/* ─── List (professional table) View ─── */
.bk-table{padding:8px 16px 0;}
.bk-thead{display:grid;grid-template-columns:2.3fr 1.5fr 1.3fr 1.2fr .95fr .8fr 78px;gap:12px;padding:4px 14px 8px;font-size:9.5px;font-weight:800;color:var(--t3,#94a3b8);letter-spacing:.4px;}
.bk-trow{display:grid;grid-template-columns:2.3fr 1.5fr 1.3fr 1.2fr .95fr .8fr 78px;gap:12px;align-items:center;
background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-right:3px solid var(--bk-color,rgba(14,165,233,.5));
border-radius:12px;padding:11px 14px;margin-bottom:8px;transition:background .18s,border-color .18s;animation:bkCardIn .25s ease both;}
.bk-trow:hover{background:rgba(255,255,255,.06);border-color:rgba(14,165,233,.25);}
.bk-c{min-width:0;display:flex;flex-direction:column;gap:2px;}
.bk-c .k{display:none;font-size:9px;font-weight:800;color:var(--t3,#94a3b8);}
.bk-c .v{font-size:12px;font-weight:800;color:var(--t1,#f4f0e6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bk-c .v2{font-size:10px;font-weight:600;color:var(--t3,#94a3b8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bk-c.cust{flex-direction:row;align-items:center;gap:10px;}
.bk-c.cust .av{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;flex-shrink:0;overflow:hidden;}
.bk-c.cust .who{min-width:0;}
.bk-c.cust .nm{font-size:12.5px;font-weight:800;color:var(--t1,#f4f0e6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bk-c.cust .ph{font-size:10px;color:var(--t3,#94a3b8);font-weight:600;}
.bk-c.price .v{color:var(--gold,#c9a84c);font-weight:900;font-size:13px;}
.bk-c.act{align-items:flex-start;}
.bk-c.act .bkc-btn{flex:none;padding:7px 12px;font-size:10px;}
@media(max-width:760px){
.bk-thead{display:none;}
.bk-trow{grid-template-columns:1fr 1fr;gap:9px 12px;padding:13px 14px;}
.bk-c .k{display:block;}
.bk-c.cust{grid-column:1 / -1;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.06);}
.bk-c.act{grid-column:1 / -1;align-items:stretch;}
.bk-c.act .bkc-btn{width:100%;}
}
/* ─── Pagination ─── */
.bk-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 18px 24px;}
.bk-pg-info{font-size:11.5px;font-weight:700;color:var(--t3,#94a3b8);}
.bk-pg-nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.bk-pg{min-width:32px;height:32px;padding:0 11px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);
color:var(--t2,#c8bfa8);font-family:'Cairo',sans-serif;font-size:12px;font-weight:800;cursor:pointer;transition:all .16s;}
.bk-pg:hover:not(:disabled):not(.on){background:rgba(255,255,255,.09);color:#fff;}
.bk-pg.on{background:rgba(14,165,233,.20);border-color:rgba(14,165,233,.4);color:#38bdf8;}
.bk-pg:disabled{opacity:.35;cursor:default;}
.bk-pg-dots{color:var(--t3,#94a3b8);padding:0 3px;align-self:center;font-weight:800;}
/* ══ TOKENS ══ */
:root{
--g1:#C9A84C;--g2:#E8C96A;--g3:#A07830;--g4:#6B5020;
--g-glow:rgba(201,168,76,.35);
--d0:#050507;--d1:#090A0D;--d2:#0E1014;--d3:#131519;
--d4:#181B20;--d5:#1E2228;--d6:#252C35;--d7:#2E3848;
--glass:rgba(255,255,255,.03);--glass2:rgba(255,255,255,.055);
--t1:#F4F0E6;--t2:#C8BFA8;--t3:#7A7260;--t4:#4A4438;
--gr:#22C55E;--rd:#EF4444;--bl:#3B82F6;--or:#F59E0B;--pu:#8B5CF6;
--bdr:rgba(201,168,76,.1);--bdr2:rgba(201,168,76,.25);--bdr3:rgba(255,255,255,.05);
--sh:0 4px 24px rgba(0,0,0,.7);--sh2:0 2px 8px rgba(0,0,0,.5);
--hdr:62px;--sb:220px;--nav:64px;
--r6:6px;--r8:8px;--r10:10px;--r12:12px;--r14:14px;--r16:16px;--r20:20px;--r24:24px;
--font:'Cairo',sans-serif;--body:'Tajawal',sans-serif;--mono:'IBM Plex Mono',monospace;
}
/* LIGHT */
html[data-theme='light']{
/* 🎨 لوحة نهارية موحّدة مع اللانشر — كريمي دافئ + ذهبي تمييز + حبر دافئ للنص */
--d0:#FFFFFF;--d1:#F2ECE0;--d2:#FBF7EF;--d3:#F6F0E3;
--d4:#EFE7D6;--d5:#EAE2D2;--d6:#E3DAC6;--d7:#D8CDB6;
--glass:rgba(201,168,76,.04);--glass2:rgba(201,168,76,.08);
--t1:#23201B;--t2:#5F584C;--t3:#9A9285;--t4:#B8B0A1;
--g1:#E3A92C;--g2:#F1C04C;--g3:#A07830;--g4:#6B5020;
--g-glow:rgba(227,169,44,.28);
--bdr:rgba(201,168,76,.18);--bdr2:rgba(201,168,76,.34);--bdr3:rgba(95,88,76,.08);
--sh:0 12px 34px rgba(60,48,20,.10);--sh2:0 6px 16px rgba(60,48,20,.06);
}
/* TRANSITIONS — ⚡ جذرياً: لا انتقال عاماً على كل العناصر (كان يسبّب لاج وتهنيج في كل النظام).
الانتقال محصور في العناصر التفاعلية فقط. */
a,button,
.cp-nav a,.cp-ibtn,.cp-pill .cp-bar,
.sb-nav-item,.mob-tab,.cxtab,.cxbar-query,
.btn,.btn-theme,.lock-btn,.rec-hdr-btn{transition:background-color .18s ease,color .18s ease,border-color .18s ease;}
/* إيقاف كل الانتقالات أثناء تبديل الثيم لمنع اللاج (يُضاف الكلاس مؤقّتاً عبر JS) */
html.theme-switching *,html.theme-switching *::before,html.theme-switching *::after{transition:none !important;}
input,select,textarea,button,.tk,.tk *{transition:none;}
input,select,textarea{transition:border-color .2s,background-color .3s;}
button{transition:transform .15s,box-shadow .2s,background-color .3s,color .3s,opacity .15s;}
/* THEME BUTTON */
.btn-theme{width:36px;height:36px;background:var(--glass2);border:1px solid var(--bdr);border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;flex-shrink:0;transition:transform .2s,background .2s !important;}
.btn-theme:hover{transform:rotate(20deg);background:var(--d5) !important;}
/* LIGHT OVERRIDES */
html[data-theme='light'] #s-login{background:var(--d1);background-image:radial-gradient(ellipse 70% 50% at 50% -10%,rgba(201,168,76,.10),transparent 60%);}
html[data-theme='light'] .login-card{background:#fff;box-shadow:0 8px 40px rgba(0,0,0,.1);}
html[data-theme='light'] .login-hero{background:linear-gradient(160deg,#E3A92C,#A07830);}
html[data-theme='light'] .hdr{background:#fff;border-bottom:1.5px solid rgba(201,168,76,.18);box-shadow:0 2px 20px rgba(0,0,0,.07);}
html[data-theme='light'] .hdr-name{color:var(--g3);}
html[data-theme='light'] .sidebar{background:#fff;border-left:1px solid rgba(0,0,0,.08);}
html[data-theme='light'] .sb-day,.html[data-theme='light'] .sb-acts{border-bottom-color:rgba(0,0,0,.08);}
html[data-theme='light'] .sb-nav-item{color:var(--t3);}
html[data-theme='light'] .sb-nav-item:hover{background:var(--d3);color:var(--t2);}
html[data-theme='light'] .sb-nav-item.on{background:rgba(201,168,76,.07);color:var(--g3);border-color:rgba(201,168,76,.18);}
html[data-theme='light'] .mob-tabs,html[data-theme='light'] .day-bar{background:#fff;border-bottom-color:rgba(0,0,0,.08);}
html[data-theme='light'] .mob-tab{color:var(--t3);}
html[data-theme='light'] .mob-tab.on{color:var(--g3);}
html[data-theme='light'] .card{background:#fff;border-color:rgba(0,0,0,.08);box-shadow:0 2px 12px rgba(0,0,0,.05);}
html[data-theme='light'] .card-h{background:linear-gradient(90deg,#E3A92C,#A07830);}
html[data-theme='light'] .f input,html[data-theme='light'] .f select,html[data-theme='light'] .f textarea{background:var(--d3);border-color:rgba(0,0,0,.1);color:var(--t1);}
html[data-theme='light'] .f input:focus,html[data-theme='light'] .f select:focus{background:#fff;border-color:var(--g1);}
html[data-theme='light'] .lg-input input{background:var(--d3);border-color:rgba(0,0,0,.1);color:var(--t1);}
html[data-theme='light'] .lg-input input:focus{background:#fff;}
html[data-theme='light'] .hcard{background:#fff;border-color:rgba(0,0,0,.08);}
html[data-theme='light'] .hcard:hover{border-color:rgba(201,168,76,.3);}
html[data-theme='light'] .ha{color:var(--t3);}
html[data-theme='light'] .ha:hover{background:var(--d3);}
html[data-theme='light'] .hcard-acts{border-top-color:rgba(0,0,0,.07);}
html[data-theme='light'] .ha+.ha{border-right-color:rgba(0,0,0,.07);}
html[data-theme='light'] .tkcard{background:#fff;border-color:rgba(0,0,0,.08);}
html[data-theme='light'] .tkci{background:var(--d3);}
html[data-theme='light'] .stat-c{background:#fff;border-color:rgba(0,0,0,.08);}
html[data-theme='light'] .dg-hdr{background:rgba(201,168,76,.06);border-color:rgba(201,168,76,.18);}
html[data-theme='light'] .dg-date{color:var(--g3);}
html[data-theme='light'] .vat-card{background:var(--d3);}
html[data-theme='light'] .vat-row .vl{color:var(--t3);}
html[data-theme='light'] .bar-track{background:var(--d4);}
html[data-theme='light'] .tbl-wrap{border-color:rgba(0,0,0,.1);}
html[data-theme='light'] .tbl thead tr{background:var(--d4);}
html[data-theme='light'] .tbl th{color:var(--t2);}
html[data-theme='light'] .overlay{background:rgba(0,0,0,.45);}
html[data-theme='light'] .modal{background:#fff;border-color:rgba(0,0,0,.1);box-shadow:0 16px 60px rgba(0,0,0,.15);}
html[data-theme='light'] .modal-x{background:var(--d3);border-color:rgba(0,0,0,.1);}
html[data-theme='light'] .cash-box{background:rgba(34,197,94,.04);border-color:rgba(34,197,94,.18);}
html[data-theme='light'] .idc-stat,html[data-theme='light'] .idc-list{background:var(--d4);}
html[data-theme='light'] .inc-day-card{background:#fff;border-color:rgba(0,0,0,.08);}
html[data-theme='light'] .idc-hdr{background:var(--d3);border-bottom-color:rgba(0,0,0,.08);}
html[data-theme='light'] .exp-card{background:var(--d3);border-color:rgba(0,0,0,.08);}
html[data-theme='light'] .bot-nav{background:#fff;border-top-color:rgba(0,0,0,.1);}
html[data-theme='light'] .bn-item{color:var(--t3);}
html[data-theme='light'] .bn-item.on{color:var(--g3);}
html[data-theme='light'] .filter-bar select{background:var(--d3);border-color:rgba(0,0,0,.1);color:var(--t2);}
html[data-theme='light'] .filter-btn{background:var(--d3);border-color:rgba(0,0,0,.1);color:var(--t2);}
html[data-theme='light'] .view-toggle{background:var(--d3);border-color:rgba(0,0,0,.1);}
html[data-theme='light'] .vt-btn.on{background:#fff;color:var(--g3);}
html[data-theme='light'] .tka{background:var(--d3);border-color:rgba(0,0,0,.08);color:var(--t3);}
html[data-theme='light'] .pk{background:var(--d3);border-color:rgba(0,0,0,.1);color:var(--t1);}
html[data-theme='light'] .dash-bn-items{
background:rgba(248,247,245,.92);
border-color:rgba(139,110,40,.18);
box-shadow:0 8px 32px rgba(0,0,0,.15),0 0 0 1px rgba(255,255,255,.8) inset;
}
html[data-theme='light'] .dash-bn-item{color:var(--t3);}
html[data-theme='light'] .dash-bn-item.on{color:var(--g3);}
html[data-theme='light'] .dash-bn-icon{
background:rgba(0,0,0,.04);
border-color:rgba(0,0,0,.07);
}
html[data-theme='light'] .dash-bn-item.on .dash-bn-icon{
background:rgba(201,168,76,.15);
border-color:rgba(201,168,76,.3);
}
html[data-theme='light'] .ndc{background:rgba(34,197,94,.04);}
html[data-theme='light'] .site-footer{color:var(--t3);border-top-color:rgba(0,0,0,.08);}
/* RESET */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{font-size:16px;scroll-behavior:smooth;overflow-y:scroll;scrollbar-width:none;background:var(--d0) !important;}
body{background:var(--d0) !important;color:var(--t1);font-family:var(--body);min-height:100vh;direction:rtl;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
html::-webkit-scrollbar{width:0 !important;display:none !important;}body::-webkit-scrollbar{width:3px;height:3px;}
html::-webkit-scrollbar-track,body::-webkit-scrollbar-track{background:var(--d1,#0a0a0c);}
html::-webkit-scrollbar-thumb,body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#3a3528,#2a261c);border:3px solid var(--d1,#0a0a0c);border-radius:10px;}
html::-webkit-scrollbar-thumb:hover,body::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#C9A84C,#9F7E1C);}
html{scrollbar-width:none;}
input,select,button,textarea{font-family:var(--body);outline:none;}
button{cursor:pointer;border:none;}
::-webkit-scrollbar{width:3px;height:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--g4);border-radius:3px;}
/* SCREENS */
.screen{display:none;min-height:100vh;}
.screen.on{display:flex;}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
/*═══
🆕🆕🆕 LUXURIOUS LOGIN SCREEN V2 — Obsidian + Gold (notif-popup style)
═══*/
#s-login{
flex-direction:column;align-items:center;justify-content:center;
background:#000;
padding:20px 16px;
min-height:100vh;
position:relative;
overflow:hidden;
}
/* Animated background */
.login-bg{
position:fixed;
inset:0;
pointer-events:none;
z-index:0;
}
.login-bg-orb{
position:absolute;
border-radius:50%;
filter:blur(120px);
animation:loginOrbit 28s ease-in-out infinite;
}
.login-bg-orb-1{
width:600px;height:600px;
background:radial-gradient(circle, rgba(201,168,76,.28), transparent 65%);
top:-200px;right:-150px;
}
.login-bg-orb-2{
width:500px;height:500px;
background:radial-gradient(circle, rgba(159,126,28,.22), transparent 65%);
bottom:-180px;left:-130px;
animation-delay:-9s;
}
.login-bg-orb-3{
width:380px;height:380px;
background:radial-gradient(circle, rgba(251,191,36,.15), transparent 65%);
top:45%;left:50%;
transform:translate(-50%, -50%);
animation-delay:-17s;
}
@keyframes loginOrbit{
0%,100%{transform:translate(0,0) scale(1);opacity:.7;}
33%{transform:translate(50px,-40px) scale(1.18);opacity:1;}
66%{transform:translate(-40px,50px) scale(.92);opacity:.85;}
}
.login-bg-grid{
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px);
background-size:60px 60px;
mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
opacity:.5;
}
.login-wrap{
width:100%;
max-width:440px;
position:relative;
z-index:1;
animation:loginFadeUp .9s cubic-bezier(.16,1,.3,1);
}
@keyframes loginFadeUp{
from{opacity:0;transform:translateY(30px) scale(.96);}
to{opacity:1;transform:translateY(0) scale(1);}
}
/* GLASS CARD — Obsidian theme */
.login-card{
position:relative;
background:linear-gradient(165deg,
rgba(10, 8, 16, .98) 0%,
rgba(15, 12, 22, .98) 50%,
rgba(10, 8, 16, .98) 100%);
border-radius:28px;
overflow:hidden;
backdrop-filter:blur(40px) saturate(180%);
-webkit-backdrop-filter:blur(40px) saturate(180%);
box-shadow:
0 50px 130px rgba(0,0,0,.85),
0 0 0 1px rgba(255,255,255,.04) inset,
0 1px 0 rgba(255,255,255,.05) inset,
0 0 100px rgba(201,168,76,.15);
}
/* Animated gradient border */
.login-card::before{
content:'';
position:absolute;
inset:0;
border-radius:28px;
padding:1px;
background:linear-gradient(135deg,
rgba(201,168,76,.65) 0%,
rgba(201,168,76,.18) 25%,
rgba(255,255,255,.05) 50%,
rgba(201,168,76,.18) 75%,
rgba(201,168,76,.65) 100%);
background-size:200% 200%;
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
z-index:1;
pointer-events:none;
animation:loginBorderShift 10s ease infinite;
}
@keyframes loginBorderShift{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
/* Top hairline shine */
.login-card::after{
content:'';
position:absolute;
top:0;left:-100%;
width:60%;height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
animation:loginTopShine 4s ease-in-out infinite;
z-index:2;
}
@keyframes loginTopShine{
0%{left:-100%;opacity:0;}
50%{opacity:1;}
100%{left:120%;opacity:0;}
}
/* Floating gold orbs inside card */
.login-card-orb{
position:absolute;
border-radius:50%;
filter:blur(80px);
pointer-events:none;
z-index:0;
}
.login-card-orb-1{
width:240px;height:240px;
background:radial-gradient(circle, rgba(201,168,76,.25), transparent 65%);
top:-100px;right:-70px;
animation:loginOrb1 14s ease-in-out infinite;
}
.login-card-orb-2{
width:180px;height:180px;
background:radial-gradient(circle, rgba(159,126,28,.18), transparent 65%);
bottom:-60px;left:-50px;
animation:loginOrb2 18s ease-in-out infinite;
}
@keyframes loginOrb1{
0%,100%{transform:translate(0,0) scale(1);opacity:.7;}
50%{transform:translate(-20px,15px) scale(1.2);opacity:1;}
}
@keyframes loginOrb2{
0%,100%{transform:translate(0,0) scale(1);opacity:.6;}
50%{transform:translate(20px,-15px) scale(1.15);opacity:.9;}
}
/* Subtle dot pattern */
.login-card-pattern{
position:absolute;
inset:0;
background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.025) 1px, transparent 0);
background-size:18px 18px;
mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
pointer-events:none;
z-index:0;
}
/* HERO */
.login-hero{
position:relative;
padding:36px 28px 22px;
text-align:center;
z-index:2;
}
.login-hero::after{
content:'';
position:absolute;
bottom:0;left:24px;right:24px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.2) 30%, rgba(201,168,76,.2) 70%, transparent);
}
/* Logo with rings */
.lh-logo-wrap{
position:relative;
width:88px;height:88px;
margin:0 auto 18px;
}
.lh-logo-glow{
position:absolute;
inset:-28px;
background:radial-gradient(circle, rgba(201,168,76,.4) 0%, transparent 60%);
filter:blur(15px);
z-index:0;
animation:lhLogoGlow 3s ease-in-out infinite;
}
@keyframes lhLogoGlow{
0%,100%{opacity:.5;transform:scale(1);}
50%{opacity:.95;transform:scale(1.15);}
}
.lh-logo-ring{
position:absolute;
inset:-8px;
border:1.5px solid rgba(201,168,76,.3);
border-radius:50%;
z-index:1;
animation:lhRingSpin 14s linear infinite;
}
.lh-logo-ring::before,
.lh-logo-ring::after{
content:'';
position:absolute;
width:7px;height:7px;
background:linear-gradient(135deg, #fbbf24, #C9A84C);
border-radius:50%;
box-shadow:0 0 12px rgba(251,191,36,.7);
}
.lh-logo-ring::before{top:-3.5px;left:50%;transform:translateX(-50%);}
.lh-logo-ring::after{bottom:-3.5px;left:50%;transform:translateX(-50%);}
.lh-logo-ring-inner{
position:absolute;
inset:-4px;
border:1px dashed rgba(201,168,76,.3);
border-radius:50%;
z-index:1;
animation:lhRingSpin 22s linear infinite reverse;
}
@keyframes lhRingSpin{
from{transform:rotate(0);}
to{transform:rotate(360deg);}
}
.lh-logo{
position:absolute;
inset:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,
rgba(40,30,15,.95) 0%,
rgba(25,20,12,.95) 100%);
border:1.5px solid rgba(201,168,76,.4);
border-radius:22px;
font-size:40px;
z-index:2;
color:#fbbf24;
box-shadow:
0 24px 50px rgba(0,0,0,.6),
inset 0 2px 0 rgba(255,255,255,.1),
inset 0 -2px 0 rgba(0,0,0,.2),
inset 0 0 30px rgba(201,168,76,.15);
overflow:hidden;
/* 🆕 Subtle inner gold ring */
position:absolute;
}
/* 🆕 Premium image styling — show admin logo with elegant treatment */
.lh-logo img{
filter:
drop-shadow(0 4px 12px rgba(201,168,76,.45))
drop-shadow(0 0 20px rgba(201,168,76,.15));
animation:lhLogoFloat 4s ease-in-out infinite;
}
@keyframes lhLogoFloat{
0%,100%{transform:translateY(0) scale(1);}
50%{transform:translateY(-2px) scale(1.03);}
}
/* 🆕 Inner highlight for the logo container */
.lh-logo::before{
content:'';
position:absolute;
top:0;left:0;
width:60%;height:50%;
background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 70%);
border-radius:22px 0 60% 0;
pointer-events:none;
z-index:1;
}
/* Sparkle effect when logo is present */
.lh-logo::after{
content:'';
position:absolute;
inset:-1px;
border-radius:22px;
background:linear-gradient(135deg, rgba(251,191,36,.4), transparent 30%, transparent 70%, rgba(201,168,76,.3));
opacity:0;
z-index:0;
animation:lhLogoSparkle 5s ease-in-out infinite;
pointer-events:none;
}
@keyframes lhLogoSparkle{
0%,100%{opacity:.2;}
50%{opacity:.5;}
}
.lh-name{
font-family:var(--font);
font-size:28px;
font-weight:900;
letter-spacing:-.7px;
line-height:1.3;
background-image:linear-gradient(135deg,
#f5f5f5 0%,
#fbbf24 35%,
#ffffff 50%,
#C9A84C 65%,
#f5f5f5 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:lhNameShine 6s ease-in-out infinite;
margin-bottom:6px;
}
@keyframes lhNameShine{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.lh-tagline{
display:inline-flex;align-items:center;gap:6px;
font-size:11.5px;
color:var(--t2);
font-weight:700;
margin-bottom:4px;
padding:5px 12px 5px 8px;
background:rgba(0,0,0,.3);
border:1px solid rgba(255,255,255,.05);
border-radius:30px;
}
.lh-tag-dot{
width:5px;height:5px;
border-radius:50%;
background:#fbbf24;
box-shadow:0 0 6px #fbbf24;
animation:lhTagDot 1.8s ease-in-out infinite;
}
@keyframes lhTagDot{
0%,100%{opacity:1;transform:scale(1);}
50%{opacity:.4;transform:scale(.7);}
}
.lh-version{
font-size:10px;
color:var(--t4);
font-weight:700;
letter-spacing:.5px;
margin-top:6px;
}
/* BODY */
.login-body{
padding:22px 24px 18px;
position:relative;
z-index:2;
}
/* SUBTABS — Gold accent */
.auth-subtabs-lux{
display:grid;
grid-template-columns:1fr 1fr;
gap:4px;
padding:4px;
background:rgba(0,0,0,.4);
border:1px solid rgba(255,255,255,.04);
border-radius:14px;
margin-bottom:18px;
}
.auth-subtabs-lux .auth-subtab{
display:flex;align-items:center;justify-content:center;gap:6px;
padding:10px 12px;
background:transparent;
border:none;
color:var(--t3);
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:12px;
font-weight:800;
cursor:pointer;
transition:all .3s cubic-bezier(.16,1,.3,1);
-webkit-tap-highlight-color:transparent;
letter-spacing:-.1px;
}
.auth-subtabs-lux .auth-subtab:hover:not(.on){
color:#fbbf24;
background:rgba(201,168,76,.06);
}
.auth-subtabs-lux .auth-subtab.on{
background:linear-gradient(135deg, #C9A84C 0%, #9F7E1C 100%);
color:#1a1206;
box-shadow:
0 8px 20px rgba(201,168,76,.4),
inset 0 1px 0 rgba(255,255,255,.3),
inset 0 -2px 0 rgba(0,0,0,.1);
}
.auth-tabs{display:none;}
/* FORM FIELDS */
.lg{
display:flex;flex-direction:column;
gap:6px;
margin-bottom:13px;
}
.lg label{
font-size:11px;
font-weight:800;
color:var(--t2);
letter-spacing:-.1px;
}
.lg-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.lg-row .lg{margin-bottom:0;}
.lg-input{
position:relative;
transition:all .25s;
}
/* 🆕 LOGIN METHOD TOGGLE · email/username switch */
.lg-method-toggle{
display:flex;
gap:6px;
padding:5px;
background:rgba(0,0,0,0.40);
border:1px solid rgba(255,255,255,0.06);
border-radius:12px;
margin-bottom:14px;
}
.lg-method-tab{
flex:1;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
background:transparent;
border:none;
color:var(--t3);
font-family:'Cairo',sans-serif;
font-size:12px;
font-weight:800;
padding:9px 8px;
border-radius:8px;
cursor:pointer;
transition:all .25s;
}
.lg-method-tab:hover{ color:var(--t2); }
.lg-method-tab.on{
background:linear-gradient(135deg,rgba(201,168,76,0.18),rgba(201,168,76,0.08));
color:#E8C96A;
box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}
html[data-theme='light'] .lg-method-toggle{ background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.08); }
html[data-theme='light'] .lg-method-tab{ color:#A07830; }
html[data-theme='light'] .lg-method-tab.on{ color:#92400e; background:linear-gradient(135deg,rgba(201,168,76,0.18),rgba(201,168,76,0.06)); }
/* 🆕 Username prefix @ inside input */
.lg-prefix{
position:absolute;
right:36px; top:50%;
transform:translateY(-50%);
color:var(--g1,#C9A84C);
font-size:14px;
font-weight:900;
pointer-events:none;
z-index:2;
}
.lg-input input{
width:100%;
background:rgba(0,0,0,.5);
border:1.5px solid rgba(255,255,255,.06);
border-radius:12px;
padding:13px 42px 13px 14px;
font-family:'Cairo',sans-serif;
font-size:13.5px;
font-weight:700;
color:var(--t1);
direction:ltr;
text-align:right;
transition:all .3s;
outline:none;
}
.lg-input input::placeholder{
color:var(--t4);
font-weight:600;
}
.lg-input input:focus{
border-color:rgba(201,168,76,.55);
background:rgba(0,0,0,.6);
box-shadow:
0 0 0 4px rgba(201,168,76,.1),
0 0 30px rgba(201,168,76,.15);
}
.lg-icon{
position:absolute;
right:14px;top:50%;
transform:translateY(-50%);
color:var(--t4);
pointer-events:none;
display:flex;align-items:center;
transition:all .3s;
}
.lg-input:focus-within .lg-icon{
color:#fbbf24;
transform:translateY(-50%) scale(1.1);
}
.pw-eye{
position:absolute;
left:13px;top:50%;
transform:translateY(-50%);
color:var(--t4);
cursor:pointer;
padding:5px;
display:flex;align-items:center;
transition:all .25s;
border-radius:7px;
z-index:2;
}
.pw-eye:hover{
color:#fbbf24;
background:rgba(255,255,255,.04);
}
/* BUTTON LUXE — Gold gradient */
.btn-lg-lux{
position:relative;
width:100%;
display:flex;align-items:center;justify-content:center;gap:8px;
padding:15px 20px;
background:linear-gradient(135deg, #C9A84C 0%, #9F7E1C 50%, #C9A84C 100%);
background-size:200% auto;
border:none;
border-radius:13px;
font-family:var(--font);
font-size:14.5px;
font-weight:900;
color:#1a1206;
letter-spacing:-.2px;
cursor:pointer;
transition:all .35s cubic-bezier(.16,1,.3,1);
box-shadow:
0 14px 32px rgba(201,168,76,.45),
inset 0 1px 0 rgba(255,255,255,.3),
inset 0 -2px 0 rgba(0,0,0,.1);
overflow:hidden;
margin-top:6px;
}
.btn-lg-lux::before{
content:'';
position:absolute;
top:0;left:-100%;
width:60%;height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
transition:left .8s ease;
}
.btn-lg-lux:hover{
transform:translateY(-2px);
background-position:right center;
box-shadow:
0 18px 44px rgba(201,168,76,.6),
inset 0 1px 0 rgba(255,255,255,.3);
}
.btn-lg-lux:hover::before{left:100%;}
.btn-lg-lux:active{transform:scale(.97);}
/* Info banner */
.login-info-banner{
display:flex;align-items:flex-start;gap:9px;
background:linear-gradient(155deg, rgba(201,168,76,.08), rgba(201,168,76,.02));
border:1px solid rgba(201,168,76,.22);
border-radius:11px;
padding:11px 13px;
margin-bottom:13px;
font-size:11.5px;
color:var(--t2);
line-height:1.7;
font-weight:700;
}
.login-info-banner svg{
color:#fbbf24;
flex-shrink:0;
margin-top:2px;
}
.login-info-banner strong{
color:#fbbf24;
font-weight:900;
font-family:var(--font);
}
/* Error display */
.login-err{
font-size:11.5px;
min-height:16px;
margin-top:12px;
text-align:center;
color:#fca5a5;
font-weight:700;
line-height:1.6;
}
/* Forgot password link */
.login-link{
display:block;
width:100%;
background:transparent;
border:none;
color:#fbbf24;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:700;
margin-top:10px;
cursor:pointer;
padding:8px;
text-align:center;
transition:color .2s;
}
.login-link:hover{color:#fcd34d;}
/* Pending card */
.pending-card{
text-align:center;
padding:18px 14px;
background:linear-gradient(155deg, rgba(201,168,76,.08), rgba(201,168,76,.02));
border:1.5px solid rgba(201,168,76,.3);
border-radius:16px;
margin-bottom:14px;
}
.pending-ico-wrap{
position:relative;
width:64px;height:64px;
margin:0 auto 12px;
}
.pending-ico{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, rgba(40,30,15,.95), rgba(25,20,12,.95));
border:1.5px solid rgba(201,168,76,.4);
color:#fbbf24;
border-radius:18px;
font-size:28px;
box-shadow:
0 14px 30px rgba(0,0,0,.6),
inset 0 2px 0 rgba(255,255,255,.1),
inset 0 0 25px rgba(201,168,76,.15);
z-index:2;
}
.pending-ring{
position:absolute;
inset:-7px;
border:1.5px dashed rgba(251,191,36,.4);
border-radius:25px;
animation:lhRingSpin 8s linear infinite;
}
.pending-title{
font-family:var(--font);
font-size:17px;
font-weight:900;
background-image:linear-gradient(135deg,#fff,#fbbf24,#fff);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:lhNameShine 5s ease-in-out infinite;
margin-bottom:5px;
letter-spacing:-.3px;
}
.pending-sub{
font-size:11.5px;
color:var(--t2);
line-height:1.7;
font-weight:700;
}
/* Contact card */
.contact-card{
background:linear-gradient(155deg, rgba(201,168,76,.06), rgba(201,168,76,.02));
border:1px solid rgba(201,168,76,.25);
border-radius:12px;
padding:14px 15px;
margin-bottom:12px;
text-align:center;
}
.contact-card-h{
font-size:10.5px;
color:var(--t3);
font-weight:800;
margin-bottom:8px;
}
.contact-card-name{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:#fbbf24;
margin-bottom:6px;
}
.contact-card-phone{
display:inline-flex;align-items:center;gap:6px;
color:#fbbf24;
font-family:var(--font);
font-size:13.5px;
font-weight:800;
text-decoration:none;
letter-spacing:.5px;
}
.contact-card-phone:hover{color:#fcd34d;}
/* Login card footer */
.login-footer{
position:relative;
padding:14px 24px 16px;
z-index:2;
}
.login-footer-divider{
height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.2), transparent);
margin-bottom:11px;
}
.login-footer-content{
display:flex;align-items:center;justify-content:center;
}
.login-footer-text{
display:flex;align-items:center;gap:6px;
font-size:10.5px;
color:var(--t4);
font-weight:700;
letter-spacing:.1px;
}
.login-footer-text svg{color:#22c55e;}
/* Below-card meta */
.login-meta{
display:flex;align-items:center;justify-content:center;
gap:7px;
margin-top:18px;
font-size:10.5px;
color:var(--t4);
font-weight:700;
}
.login-meta-dot{color:var(--t4);opacity:.5;}
.login-meta-owner{
color:#fbbf24;
font-family:var(--font);
font-weight:800;
}
/* Mobile adjustments */
@media(max-width:480px){
.login-wrap{max-width:100%;}
.login-hero{padding:30px 22px 20px;}
.lh-logo-wrap{width:72px;height:72px;}
.lh-logo{font-size:34px;border-radius:20px;}
.lh-name{font-size:24px;}
.login-body{padding:20px 20px 16px;}
.lg-row{grid-template-columns:1fr;gap:0;}
.lg-row .lg{margin-bottom:13px;}
}
/* Hide forms */
.auth-pane{display:none;}
.auth-pane.on{display:block;animation:loginFadeUp .4s ease;}
.auth-form{display:none;}
.auth-form.on{display:block;animation:loginFadeUp .35s ease;}
.pw-strength{height:3px;border-radius:3px;margin:-6px 0 10px;background:var(--d5);overflow:hidden;}
.pw-strength-fill{height:100%;border-radius:3px;transition:width .3s,background .3s;}
.btn-lg{width:100%;padding:14px;background:linear-gradient(135deg,var(--g2),var(--g1),var(--g3));border-radius:var(--r12);font-family:var(--font);font-size:15px;font-weight:700;color:#050507;letter-spacing:.3px;box-shadow:0 6px 24px rgba(201,168,76,.35);display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,box-shadow .15s !important;}
.btn-lg:hover{transform:translateY(-1px);box-shadow:0 10px 32px rgba(201,168,76,.5);}
.btn-lg:active{transform:scale(.97);}
.btn-resend{width:100%;padding:10px;background:transparent;border:1px solid var(--bdr);border-radius:var(--r10);color:var(--t3);font-size:12px;font-weight:600;margin-top:8px;transition:border-color .2s,color .2s !important;}
.btn-resend:hover{border-color:var(--bdr2);color:var(--t2);}
.setup-badge{background:rgba(59,130,246,.08);border:1px solid rgba(59,130,246,.2);border-radius:var(--r8);padding:9px 13px;font-size:11px;color:var(--bl);margin-bottom:16px;display:flex;align-items:center;gap:7px;}
.login-attempts-bar{display:flex;align-items:center;gap:8px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.15);border-radius:var(--r8);padding:8px 12px;margin-bottom:10px;}
.ab-dots{display:flex;gap:4px;}
.ab-dot{width:10px;height:10px;border-radius:50%;background:var(--d6);}
.ab-dot.used{background:var(--rd);}
.ab-dot.ok{background:var(--gr);}
.ab-txt{font-size:11px;color:var(--or);}
.lockout-box{text-align:center;padding:24px;background:rgba(239,68,68,.04);border:1px solid rgba(239,68,68,.15);border-radius:var(--r12);}
.lb-icon{font-size:44px;margin-bottom:10px;}
.lb-title{font-family:var(--font);font-size:17px;font-weight:700;color:var(--rd);margin-bottom:4px;}
.lb-sub{font-size:12px;color:var(--t3);margin-bottom:18px;}
.lb-timer{font-family:var(--mono);font-size:40px;font-weight:700;color:var(--rd);letter-spacing:3px;margin-bottom:8px;}
.lb-hint{font-size:11px;color:var(--t4);}
.login-err{font-size:11px;min-height:14px;margin-top:8px;text-align:center;}
.login-footer{padding:18px 0 6px;text-align:center;width:100%;max-width:420px;}
.lf-copy{font-size:10px;color:var(--t4);line-height:2.2;}
.lf-copy strong{color:var(--t3);}
.lf-btns{display:flex;justify-content:center;gap:10px;margin-top:12px;}
.lf-btn{display:flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--r8);font-size:11px;font-weight:700;border:1px solid;transition:transform .15s !important;}
.lf-btn:hover{transform:translateY(-1px);}
.lf-btn.call{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.2);color:var(--bl);}
.lf-btn.wa{background:rgba(34,197,94,.08);border-color:rgba(34,197,94,.2);color:var(--gr);}
/* ══ APP ══ */
#s-app{flex-direction:column;background:var(--d0);}
.hdr{height:var(--hdr);background:linear-gradient(90deg,rgba(5,5,7,.98),var(--d2) 40%,var(--d2) 60%,rgba(5,5,7,.98));border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;padding:0 20px;position:sticky;top:0;z-index:300;box-shadow:0 1px 0 var(--bdr),0 4px 24px rgba(0,0,0,.6);flex-shrink:0;}
.hdr-left{display:flex;align-items:center;gap:12px;}
.hdr-ico{width:40px;height:40px;background:linear-gradient(135deg,var(--g2),var(--g3));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;box-shadow:0 4px 14px rgba(201,168,76,.3);}
.hdr-name{font-family:var(--font);font-size:14px;font-weight:900;color:var(--g2);letter-spacing:.3px;}
.hdr-sub{font-size:9px;color:var(--t3);margin-top:1px;}
.hdr-center{display:flex;align-items:center;gap:8px;}
.hdr-stat{background:var(--d3);border:1px solid var(--bdr);border-radius:var(--r8);padding:5px 12px;text-align:center;display:none;}
.hdr-stat .hs-l{font-size:9px;color:var(--t3);display:block;letter-spacing:.3px;}
.hdr-stat .hs-v{font-size:13px;font-weight:700;color:var(--g2);font-family:var(--font);}
.hdr-day{background:var(--d3);border:1px solid var(--bdr);border-radius:var(--r8);padding:5px 12px;text-align:center;}
.hdr-day .dl{font-size:9px;color:var(--t3);display:block;}
.hdr-day .dv{font-size:12px;font-weight:700;color:var(--g2);font-family:var(--font);}
.hdr-right{display:flex;align-items:center;gap:7px;}
.btn-ico{width:34px;height:34px;background:var(--glass2);border:1px solid var(--bdr3);border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--t3);}
.btn-ico:hover{color:var(--rd);border-color:rgba(239,68,68,.25);}
.app-body{display:flex;flex:1;min-height:0;overflow:hidden;}
/* SIDEBAR */
.sidebar{width:var(--sb);background:linear-gradient(180deg,var(--d2),var(--d1));border-left:1px solid var(--bdr);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));}
.sb-day{padding:16px 14px 12px;border-bottom:1px solid var(--bdr);}
.sb-day-lbl{font-size:9px;color:var(--t3);font-weight:700;letter-spacing:.6px;margin-bottom:6px;text-transform:uppercase;}
.sb-day-val{font-family:var(--font);font-size:13px;font-weight:700;color:var(--g2);line-height:1.4;}
.sb-day-stats{font-size:10px;color:var(--t3);margin-top:3px;line-height:1.5;}
.sb-acts{padding:10px;border-bottom:1px solid var(--bdr);display:flex;flex-direction:column;gap:5px;}
.sb-btn{width:100%;padding:9px 11px;border-radius:var(--r8);font-family:var(--body);font-size:12px;font-weight:700;display:flex;align-items:center;gap:8px;text-align:right;}
.sb-btn:hover{transform:translateX(-2px);}
.sb-btn.primary{background:linear-gradient(135deg,var(--g2),var(--g3));color:var(--d0);box-shadow:0 4px 14px rgba(201,168,76,.25);}
.sb-btn.newday{background:rgba(34,197,94,.08);color:var(--gr);border:1px solid rgba(34,197,94,.15);}
.sb-btn.logout{background:rgba(239,68,68,.06);color:var(--rd);border:1px solid rgba(239,68,68,.12);}
.sb-alert{background:rgba(239,68,68,.06);border-radius:var(--r8);padding:8px 11px;margin:8px;font-size:11px;color:var(--rd);border:1px solid rgba(239,68,68,.15);display:none;line-height:1.6;}
.sb-alert.on{display:block;}
.sb-nav{padding:8px;flex:1;}
.sb-nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r8);font-size:12px;font-weight:700;color:var(--t3);cursor:pointer;margin-bottom:3px;border:1px solid transparent;transition:all .25s;}
.sb-nav-item:hover{background:var(--glass2);color:var(--t2);}
.sb-nav-item.on{background:linear-gradient(135deg,rgba(201,168,76,.10),rgba(201,168,76,.04));color:var(--g1);border-color:rgba(201,168,76,.18);}
.sb-badge{margin-right:auto;background:var(--d5);border-radius:10px;padding:2px 8px;font-size:10px;font-weight:800;color:var(--t3);}
.sb-nav-item.on .sb-badge{background:rgba(201,168,76,.15);color:var(--g1);}
/* 🆕 SMART SIDEBAR SECTIONS · categorized collapsible groups */
.sb-section-h{display:flex;align-items:center;gap:8px;padding:10px 10px 6px;font-size:10px;font-weight:900;color:var(--t3);text-transform:uppercase;letter-spacing:1px;cursor:pointer;user-select:none;border-radius:6px;margin-top:8px;opacity:0.65;transition:opacity .2s;}
.sb-section-h:hover{opacity:1;background:var(--glass2);}
.sb-section-h:first-of-type{margin-top:4px;}
.sb-section-ico{font-size:12px;}
.sb-section-title{flex:1;font-size:9.5px;}
.sb-section-chev{font-size:10px;transition:transform .25s;opacity:0.5;}
.sb-section-h.collapsed .sb-section-chev{transform:rotate(-90deg);}
.sb-section-body{display:flex;flex-direction:column;gap:0;padding-right:6px;margin-bottom:6px;border-right:1.5px solid var(--bdr);margin-right:6px;overflow:hidden;max-height:600px;transition:max-height .35s ease;}
.sb-section-body.collapsed{max-height:0;}
/* 🆕 GENERAL ACCOUNT PANE · innovative card-based dashboard */
.gen-hero{position:relative;overflow:hidden;border-radius:18px;padding:24px 28px;margin-bottom:18px;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);color:#fff;}
html[data-theme='light'] .gen-hero{background:linear-gradient(135deg,#A07830 0%,#A07830 100%);}
.gen-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 80% -20%,rgba(201,168,76,0.20),transparent 60%);pointer-events:none;}
.gen-hero-orb{position:absolute;border-radius:50%;filter:blur(40px);pointer-events:none;opacity:0.3;}
.gen-hero-orb-1{width:140px;height:140px;background:#C9A84C;top:-30px;left:-30px;}
.gen-hero-orb-2{width:100px;height:100px;background:#10b981;bottom:-20px;right:30%;opacity:0.2;}
.gen-hero-content{position:relative;z-index:2;display:flex;align-items:center;gap:14px;}
.gen-hero-ico{width:60px;height:60px;border-radius:16px;background:linear-gradient(135deg,#C9A84C,#E8C96A);color:#1a1a1a;display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 24px rgba(201,168,76,0.40);}
.gen-hero-text{flex:1;min-width:0;}
.gen-hero-title{font-size:22px;font-weight:900;margin-bottom:4px;letter-spacing:-0.5px;}
.gen-hero-sub{font-size:12px;font-weight:700;opacity:0.75;line-height:1.5;}
/* KPI cards row */
.gen-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
@media(max-width:900px){.gen-kpi-row{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.gen-kpi-row{grid-template-columns:1fr;}}
.gen-kpi{position:relative;background:var(--d1);border:1px solid var(--bdr);border-radius:14px;padding:16px;overflow:hidden;transition:transform .2s,box-shadow .2s;}
.gen-kpi:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,0.10);}
.gen-kpi-glow{position:absolute;top:-30px;right:-30px;width:90px;height:90px;border-radius:50%;filter:blur(30px);opacity:0.30;pointer-events:none;}
.gen-kpi-income .gen-kpi-glow{background:#10b981;}
.gen-kpi-month .gen-kpi-glow{background:#3b82f6;}
.gen-kpi-expense .gen-kpi-glow{background:#f59e0b;}
.gen-kpi-profit .gen-kpi-glow{background:#a855f7;}
.gen-kpi-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;position:relative;z-index:2;}
.gen-kpi-ico{font-size:18px;}
.gen-kpi-lbl{font-size:11px;font-weight:800;color:var(--t3);text-transform:uppercase;letter-spacing:0.5px;}
.gen-kpi-val{font-size:22px;font-weight:900;color:var(--t1);margin-bottom:4px;letter-spacing:-0.5px;position:relative;z-index:2;}
.gen-kpi-sub{font-size:11px;font-weight:700;color:var(--t3);position:relative;z-index:2;}
/* Section title */
.gen-section-title{display:flex;align-items:center;gap:10px;margin:8px 0 14px;font-size:13px;font-weight:900;color:var(--t1);}
.gen-section-bar{width:4px;height:16px;border-radius:2px;background:linear-gradient(180deg,#C9A84C,#E8C96A);}
.gen-section-hint{margin-right:auto;font-size:10px;font-weight:700;color:var(--t3);opacity:0.7;}
/* Quick access cards grid */
.gen-cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px;}
@media(max-width:900px){.gen-cards-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.gen-cards-grid{grid-template-columns:1fr;}}
.gen-card{position:relative;background:var(--d1);border:1px solid var(--bdr);border-radius:14px;padding:16px;display:flex;align-items:center;gap:14px;cursor:pointer;overflow:hidden;transition:all .25s;}
.gen-card:hover{transform:translateX(-3px);border-color:rgba(201,168,76,0.35);box-shadow:0 10px 26px rgba(0,0,0,0.10);}
.gen-card-bg{position:absolute;left:-40px;top:-40px;width:90px;height:90px;border-radius:50%;filter:blur(28px);opacity:0.18;pointer-events:none;}
.gen-card:hover .gen-card-bg{opacity:0.30;}
.gen-card-ico-wrap{width:44px;height:44px;border-radius:12px;background:var(--d3);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:2;}
.gen-card-ico{font-size:22px;}
.gen-card-body{flex:1;min-width:0;position:relative;z-index:2;}
.gen-card-title{font-size:14px;font-weight:900;color:var(--t1);margin-bottom:3px;}
.gen-card-desc{font-size:11px;font-weight:700;color:var(--t3);line-height:1.5;}
.gen-card-arrow{font-size:18px;color:var(--t3);font-weight:900;opacity:0.5;transition:all .25s;position:relative;z-index:2;}
.gen-card:hover .gen-card-arrow{opacity:1;transform:translateX(-3px);color:#C9A84C;}
/* Actions bar */
.gen-actions-bar{display:flex;align-items:center;gap:10px;padding:14px 18px;background:var(--d1);border:1px solid var(--bdr);border-radius:12px;margin-bottom:14px;flex-wrap:wrap;}
.gen-action-btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,#C9A84C,#E8C96A);color:#1a1a1a;border:none;padding:9px 16px;border-radius:9px;font-family:'Cairo',sans-serif;font-size:12px;font-weight:900;cursor:pointer;transition:all .2s;}
.gen-action-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(201,168,76,0.35);}
.gen-action-btn.gen-action-secondary{background:var(--d3);color:var(--t1);}
.gen-action-btn.gen-action-secondary:hover{background:var(--d5);box-shadow:0 6px 18px rgba(0,0,0,0.10);}
.gen-actions-status{margin-right:auto;font-size:11px;font-weight:700;color:var(--t3);}
/* CONTENT */
.content{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0;}
/* DAY BAR */
.day-bar{background:var(--d1);border-bottom:1px solid var(--bdr);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0;}
.db-date{font-family:var(--font);font-size:13px;font-weight:700;color:var(--g2);}
.db-stats{font-size:10px;color:var(--t3);margin-top:2px;line-height:1.4;}
.db-acts{display:flex;gap:6px;}
/* MOB TABS */
.mob-tabs{display:flex;background:var(--d1);border-bottom:1px solid var(--bdr);overflow-x:auto;flex-shrink:0;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.mob-tabs::-webkit-scrollbar{display:none;}
.mob-tab{flex:none;min-width:58px;padding:11px 10px;text-align:center;font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;white-space:nowrap;}
.mob-tab.on{color:var(--g1);border-bottom-color:var(--g1);}
.mob-tab .mt-b{background:var(--d5);border-radius:10px;padding:0 5px;font-size:9px;margin-right:2px;}
.mob-tab.on .mt-b{background:rgba(201,168,76,.15);color:var(--g1);}
/* PANES */
.pane{display:none;padding:2px;flex-direction:column;gap:14px;flex:1;}
.pane.on{display:flex;}
/* BOT NAV */
.bot-nav{display:none;height:var(--nav);background:var(--d1);border-top:1px solid var(--bdr);position:fixed;bottom:0;left:0;right:0;z-index:300;box-shadow:0 -4px 24px rgba(0,0,0,.6);flex-shrink:0;padding-bottom:env(safe-area-inset-bottom,0px);}
.bot-nav::before{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,var(--g1),transparent);opacity:.5;}
.bn-items{display:flex;height:100%;}
.bn-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--t3);font-size:9px;font-weight:700;padding:6px 4px;position:relative;-webkit-tap-highlight-color:transparent;border:none;background:transparent;}
.bn-item.on{color:var(--g1);}
.bn-item.on::after{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:linear-gradient(90deg,var(--g3),var(--g1),var(--g3));border-radius:0 0 3px 3px;}
.bn-icon{font-size:18px;line-height:1;}
.bn-item.on .bn-icon{transform:scale(1.12);}
.bn-item+.bn-item{border-right:1px solid rgba(255,255,255,.04);}
/* CARDS */
.card{background:linear-gradient(160deg,var(--d3),var(--d2));border:1px solid var(--bdr);border-radius:var(--r14);overflow:hidden;box-shadow:var(--sh2);}
.card-h{background:linear-gradient(90deg,rgba(15,11,0,.95),rgba(25,18,0,.9));border-bottom:1px solid rgba(201,168,76,.2);padding:13px 16px;display:flex;align-items:center;gap:9px;}
.card-ico{width:30px;height:30px;background:rgba(201,168,76,.12);border:1px solid var(--bdr);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.card-h h3{font-family:var(--font);font-size:13px;font-weight:700;color:var(--g2);}
.card-h .card-h-extra{margin-right:auto;}
.card-body{padding:16px;}
/* FORMS */
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.f{display:flex;flex-direction:column;gap:5px;}
.f.s2{grid-column:1/-1;}
.f label{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.4px;}
.f input,.f select,.f textarea{background:var(--d4);border:1px solid var(--bdr3);border-radius:var(--r8);padding:10px 12px;font-size:14px;color:var(--t1);direction:rtl;width:100%;-webkit-appearance:none;}
.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--g1);background:rgba(201,168,76,.04);box-shadow:0 0 0 3px rgba(201,168,76,.08);}
.f input::placeholder,.f textarea::placeholder{color:var(--d7);}
.f select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23504030' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 10px center;padding-left:30px;}
.f select option{background:var(--d3);}
.f textarea{resize:vertical;min-height:70px;}
/* BUTTONS */
.btn-row{display:flex;gap:9px;flex-wrap:wrap;}
.btn{flex:1;min-width:90px;padding:10px 14px;border-radius:var(--r10);font-family:var(--body);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;}
.btn:hover{transform:translateY(-1px);}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;}
.btn-gold{background:linear-gradient(135deg,var(--g2),var(--g1),var(--g3));color:var(--d0);box-shadow:0 4px 16px rgba(201,168,76,.28);}
.btn-gold:hover{box-shadow:0 8px 24px rgba(201,168,76,.4);}
.btn-wa{background:#25D366;color:#fff;}
.btn-dl{background:var(--d4);color:var(--t1);border:1px solid var(--bdr);}
.btn-ghost{background:var(--d4);color:var(--t2);border:1px solid var(--bdr);}
.btn-danger{background:rgba(239,68,68,.07);color:var(--rd);border:1px solid rgba(239,68,68,.18);}
.btn-green{background:rgba(34,197,94,.08);color:var(--gr);border:1px solid rgba(34,197,94,.18);}
.btn-blue{background:rgba(59,130,246,.08);color:var(--bl);border:1px solid rgba(59,130,246,.18);}
.btn-orange{background:rgba(245,158,11,.08);color:var(--or);border:1px solid rgba(245,158,11,.18);}
/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.stat-c{background:linear-gradient(145deg,var(--d3),var(--d4));border:1px solid var(--bdr);border-radius:var(--r12);padding:16px 14px;position:relative;overflow:hidden;}
.stat-c::before{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:var(--accent,var(--g1));}
.stat-c::after{content:'';position:absolute;top:-20px;left:-20px;width:80px;height:80px;background:radial-gradient(circle,var(--accent,rgba(201,168,76,.08)),transparent 70%);border-radius:50%;}
.stat-c .sl{font-size:10px;color:var(--t3);font-weight:600;letter-spacing:.3px;margin-bottom:6px;position:relative;}
.stat-c .sv{font-size:24px;font-weight:900;color:var(--t1);font-family:var(--font);line-height:1;position:relative;}
.stat-c .su{font-size:10px;color:var(--t3);margin-top:3px;position:relative;}
.stat-c .si{position:absolute;top:12px;left:12px;font-size:24px;opacity:.08;}
/* TABLE */
.tbl-wrap{overflow-x:auto;border-radius:var(--r12);border:1px solid var(--bdr);}
.tbl{width:100%;border-collapse:collapse;font-size:12px;}
.tbl thead tr{background:linear-gradient(90deg,var(--d4),var(--d3));}
.tbl th{padding:10px 12px;text-align:right;font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.4px;border-bottom:1px solid var(--bdr);white-space:nowrap;}
.tbl td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.025);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tbody tr:hover{background:rgba(201,168,76,.025);}
/* BADGES */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:10px;font-weight:700;}
.badge-gold{background:rgba(201,168,76,.15);color:var(--g1);border:1px solid rgba(201,168,76,.25);}
.badge-green{background:rgba(34,197,94,.12);color:var(--gr);border:1px solid rgba(34,197,94,.2);}
.badge-red{background:rgba(239,68,68,.12);color:var(--rd);border:1px solid rgba(239,68,68,.2);}
.badge-blue{background:rgba(59,130,246,.12);color:var(--bl);border:1px solid rgba(59,130,246,.2);}
.badge-muted{background:var(--d5);color:var(--t3);border:1px solid var(--bdr);}
/* FLASH */
.flash{border-radius:var(--r8);padding:9px 13px;font-size:12px;opacity:0;height:0;overflow:hidden;border:1px solid transparent;display:flex;align-items:center;gap:7px;}
.flash.on{opacity:1;height:auto;padding:9px 13px;}
/* TICKET DOM */
.tk-preview-wrap{display:none;}
.tk-preview-wrap.on{display:block;}
.tk{background:#fff;max-width:460px;margin:0 auto;border-radius:var(--r16);overflow:hidden;font-family:var(--font);direction:rtl;box-shadow:0 12px 40px rgba(0,0,0,.65);}
.tkh{background:linear-gradient(140deg,#100c00,#1c1400 50%,#100c00);padding:16px 18px 13px;text-align:center;border-bottom:2.5px solid #C9A84C;position:relative;overflow:hidden;}
.tkh::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent,transparent 16px,rgba(201,168,76,.025) 16px,rgba(201,168,76,.025) 32px);}
.tkh-i{position:relative;}
.tkh-row{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:3px;}
.tkh-box{width:34px;height:34px;background:#C9A84C;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.tkh-name{font-size:17px;font-weight:900;color:#C9A84C;}
.tkh-sub{font-size:10px;color:rgba(255,255,255,.45);}
.tkh-badge{display:inline-flex;align-items:center;gap:4px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.35);border-radius:20px;padding:2px 11px;font-size:10px;color:#C9A84C;margin-top:7px;}
.tkm{background:#F8F4E8;border-bottom:1px solid #EAE0C4;padding:7px 16px;display:flex;justify-content:space-between;}
.tkm-i{font-size:9px;color:#7A6830;}
.tkm-i strong{color:#3A2A08;font-size:10px;display:block;}
.tkb{padding:13px 16px;background:#fff;}
.tks{font-size:8px;font-weight:700;color:#C9A84C;letter-spacing:1px;border-bottom:1px solid #F0E8C8;padding-bottom:3px;margin-bottom:8px;}
.tkr{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px dashed #EDE5CC;}
.tkr:last-child{border-bottom:none;}
.tkrl{font-size:10px;color:#8A7840;display:flex;align-items:center;gap:4px;}
.tkdot{width:4px;height:4px;background:#C9A84C;border-radius:50%;flex-shrink:0;}
.tkrv{font-size:11px;font-weight:700;color:#1A1200;max-width:56%;text-align:left;}
.tkdiv{margin:8px 0;height:1px;background:linear-gradient(90deg,transparent,#C9A84C,transparent);}
.tkpb{background:linear-gradient(135deg,#100c00,#1c1400);border-radius:8px;padding:10px 13px;display:flex;justify-content:space-between;align-items:center;margin:8px 0;}
.tkpl{font-size:9px;color:rgba(201,168,76,.65);}
.tkpa{font-size:20px;font-weight:900;color:#C9A84C;}
.tkpc{font-size:9px;color:rgba(201,168,76,.45);margin-top:1px;}
.tkpay{background:#F8F4E8;border:1px solid #EAE0C4;border-radius:6px;padding:6px 10px;display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
.tkpayl{font-size:9px;color:#8A7840;}
.tkpayv{font-size:11px;font-weight:700;color:#2A1E00;}
.tkf{background:#F8F4E8;border-top:2px solid #EAE0C4;padding:10px 16px;text-align:center;}
.tkf-thx{font-size:11px;font-weight:700;color:#2A1E00;margin-bottom:5px;}
.tkf-cr{font-size:9px;color:#8A7840;line-height:1.6;}
.tkf-cr strong{color:#5A4520;font-weight:900;}
.tkf-brand-row{
display:inline-flex;align-items:center;gap:5px;
margin-bottom:2px;
}
.tkf-brand-logo{
display:inline-flex;align-items:center;justify-content:center;
width:16px;height:16px;
color:#8A7840;
overflow:hidden;
}
.tkf-brand-logo img{width:100%;height:100%;object-fit:contain;display:block;}
.tkf-phone{
display:inline-block;
font-size:10px;
color:#5A4520;
font-weight:800;
text-decoration:none;
letter-spacing:.5px;
}
.tkf-phone span{direction:ltr;display:inline-block;}
.tkf-cr a{color:#7A5820;}
.unpaid-banner{background:rgba(239,68,68,.07);border:1.5px solid rgba(239,68,68,.22);border-radius:8px;padding:7px 11px;display:flex;align-items:center;gap:7px;font-size:11px;color:var(--rd);margin-top:8px;}
/* VIEW TOGGLE */
.view-toggle{display:flex;gap:2px;background:var(--d4);border:1px solid var(--bdr);border-radius:var(--r8);padding:3px;flex-shrink:0;}
.vt-btn{width:30px;height:28px;border-radius:6px;background:transparent;border:none;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;}
.vt-btn.on{background:var(--d2);color:var(--g1);box-shadow:0 1px 4px rgba(0,0,0,.4);}
/* LIST VIEW */
.hist-grid{display:flex;flex-direction:column;gap:8px;}
.hcard{background:linear-gradient(145deg,var(--d3),var(--d4));border:1px solid var(--bdr);border-radius:var(--r12);overflow:hidden;}
.hcard:hover{border-color:var(--bdr2);box-shadow:0 4px 20px rgba(0,0,0,.3);}
.drag-hdl{cursor:grab;padding:0 4px;color:var(--t4);font-size:16px;flex-shrink:0;touch-action:none;line-height:1;user-select:none;}
.drag-hdl:active{cursor:grabbing;}
.hcard.dragging{opacity:.3;border:2px dashed var(--g1)!important;}
.hcard.drag-over{border-color:var(--g1)!important;transform:scale(1.01);}
.drag-hint{font-size:10px;color:var(--t4);display:flex;align-items:center;gap:5px;padding:2px 0;}
/* CARD GRID */
.ticket-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
.tkcard{background:linear-gradient(145deg,var(--d3),var(--d4));border:1px solid var(--bdr);border-radius:var(--r16);overflow:hidden;}
.tkcard:hover{border-color:var(--bdr2);box-shadow:0 8px 28px rgba(0,0,0,.4);}
.tkcard-hdr{background:linear-gradient(135deg,#0e0b00,#1a1200);padding:11px 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1.5px solid rgba(201,168,76,.25);}
.tkcard-badge{display:flex;align-items:center;gap:5px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.25);border-radius:20px;padding:3px 10px;font-size:10px;font-weight:700;color:var(--g1);font-family:var(--font);}
.tkcard-time{font-size:10px;color:rgba(201,168,76,.45);}
.tkcard-body{padding:13px 14px;}
.tkcard-name{font-family:var(--font);font-size:15px;font-weight:700;color:var(--t1);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tkcard-phone{font-size:11px;color:var(--bl);font-weight:600;margin-bottom:10px;}
.tkcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px;}
.tkci{background:var(--d5);border-radius:var(--r8);padding:7px 9px;}
.tkci-l{font-size:9px;color:var(--t3);font-weight:600;letter-spacing:.3px;margin-bottom:2px;}
.tkci-v{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tkci.full{grid-column:1/-1;}
.tkcard-price{background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.04));border:1px solid rgba(201,168,76,.15);border-radius:var(--r8);padding:9px 12px;display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.tkcard-price-amt{font-size:22px;font-weight:900;color:var(--g1);font-family:var(--font);}
.tkcard-pay-tag{background:var(--d6);border:1px solid var(--bdr);border-radius:6px;padding:3px 9px;font-size:10px;font-weight:700;color:var(--t2);}
.tkcard-status{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.tkcard-vat{font-size:10px;color:var(--t3);background:var(--d5);border-radius:6px;padding:5px 9px;display:flex;justify-content:space-between;}
.tkcard-acts{display:flex;gap:6px;padding-top:10px;border-top:1px solid var(--bdr);}
.tka{flex:1;padding:7px 4px;border-radius:var(--r8);background:var(--d5);border:1px solid var(--bdr);color:var(--t3);font-family:var(--body);font-size:10px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;}
.tka:active{transform:scale(.93);}
.tka.view:hover{background:rgba(201,168,76,.1);color:var(--g1);}
.tka.wa:hover{background:rgba(37,211,102,.1);color:#25D366;}
.tka.paid:hover{background:rgba(34,197,94,.1);color:var(--gr);}
.tka.del:hover{background:rgba(239,68,68,.1);color:var(--rd);}
.hcard-top{display:flex;align-items:center;gap:10px;padding:11px 13px;}
.hc-num{width:38px;height:38px;background:rgba(201,168,76,.1);border:1px solid var(--bdr);border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:var(--font);color:var(--g1);flex-shrink:0;}
.hc-info{flex:1;min-width:0;}
.hc-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hc-sub{font-size:10px;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hc-right{flex-shrink:0;text-align:left;}
.hc-price{font-size:13px;font-weight:700;color:var(--g1);font-family:var(--font);}
.hc-pay{font-size:9px;color:var(--t3);margin-top:1px;}
.hc-time{font-size:9px;color:var(--t4);}
.hcard-acts{display:flex;border-top:1px solid var(--bdr);}
.ha{flex:1;padding:8px 4px;background:transparent;border:none;color:var(--t3);font-family:var(--body);font-size:10px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:3px;}
.ha:hover{background:var(--d5);}
.ha.view:hover{color:var(--g1);}
.ha.wa:hover{color:#25D366;}
.ha.edit:hover{color:var(--bl);}
.ha.del:hover{color:var(--rd);}
.ha.paid:hover{color:var(--gr);}
.ha+.ha{border-right:1px solid var(--bdr);}
/* Day group */
.dg-hdr{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,rgba(201,168,76,.08),rgba(201,168,76,.02));border:1px solid var(--bdr);border-radius:var(--r10);padding:9px 13px;margin-bottom:8px;cursor:pointer;user-select:none;}
.dg-hdr:hover{border-color:var(--bdr2);}
.dg-left{display:flex;align-items:center;gap:8px;}
.dg-date{font-family:var(--font);font-size:13px;font-weight:700;color:var(--g2);}
.dg-sub{font-size:10px;color:var(--t3);}
.dg-right{display:flex;align-items:center;gap:6px;}
.dg-total{font-size:13px;font-weight:700;color:var(--gr);font-family:var(--font);}
.dg-chevron{font-size:10px;color:var(--t3);}
.dg.collapsed .dg-chevron{transform:rotate(-90deg);}
.dg.collapsed .dg-body{display:none;}
/* VAT */
.vat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.vat-card{background:var(--d4);border:1px solid var(--bdr);border-radius:var(--r10);padding:13px;}
.vat-title{font-size:11px;font-weight:700;color:var(--t3);margin-bottom:10px;letter-spacing:.3px;}
.vat-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:12px;}
.vat-row:last-child{border-bottom:none;}
.vat-row .vl{color:var(--t3);}
.vat-row .vv{font-weight:700;color:var(--t1);font-family:var(--font);}
.vat-row.total{margin-top:4px;padding-top:8px;border-top:1px solid var(--bdr);}
.vat-row.total .vl,.vat-row.total .vv{color:var(--g1);}
.vat-row.total .vv{font-size:15px;}
/* CASH */
.cash-box{background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(34,197,94,.02));border:1px solid rgba(34,197,94,.15);border-radius:var(--r12);padding:14px;}
.cb-title{font-family:var(--font);font-size:13px;font-weight:700;color:var(--gr);margin-bottom:12px;display:flex;align-items:center;gap:7px;}
.cb-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.03);font-size:12px;}
.cb-row:last-child{border-bottom:none;}
.cb-label{color:var(--t3);}
.cb-val{font-weight:700;font-family:var(--font);}
.cb-balance{margin-top:10px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.18);border-radius:var(--r8);padding:11px 13px;display:flex;justify-content:space-between;align-items:center;}
.cb-bal-label{font-size:12px;color:var(--gr);}
.cb-bal-val{font-size:22px;font-weight:900;color:var(--gr);font-family:var(--font);}
/* EXPENSE */
.exp-card{background:linear-gradient(145deg,var(--d3),var(--d4));border:1px solid var(--bdr);border-radius:var(--r10);padding:12px 13px;display:flex;align-items:center;gap:10px;}
.exp-card:hover{border-color:var(--bdr2);}
.exp-cat-ico{width:36px;height:36px;border-radius:var(--r8);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.exp-info{flex:1;min-width:0;}
.exp-title{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.exp-meta{font-size:10px;color:var(--t3);margin-top:1px;}
.exp-right{flex-shrink:0;text-align:left;}
.exp-amount{font-size:14px;font-weight:700;color:var(--rd);font-family:var(--font);}
.exp-date{font-size:9px;color:var(--t4);margin-top:1px;}
/* REPORT */
.rep-section{background:var(--d3);border:1px solid var(--bdr);border-radius:var(--r12);overflow:hidden;margin-bottom:12px;}
.rep-hdr{background:linear-gradient(90deg,#100c00,var(--d4));border-bottom:1px solid var(--bdr);padding:11px 15px;display:flex;align-items:center;justify-content:space-between;}
.rep-hdr-title{font-family:var(--font);font-size:13px;font-weight:700;color:var(--g2);}
.rep-body{padding:14px;}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.bar-label{font-size:11px;color:var(--t2);width:80px;flex-shrink:0;text-align:right;}
.bar-track{flex:1;height:20px;background:var(--d5);border-radius:6px;overflow:hidden;}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--g3),var(--g1));border-radius:6px;}
.bar-val{font-size:11px;font-weight:700;color:var(--g1);font-family:var(--font);width:80px;flex-shrink:0;}
.rep-filters{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;}
.rep-filter-btn{padding:7px 14px;border-radius:20px;background:var(--d4);border:1px solid var(--bdr);color:var(--t3);font-size:12px;font-weight:600;cursor:pointer;}
.rep-filter-btn.on{background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.28);color:var(--g2);}
/* ════════════════════════════════════════════════════════
🆕✨ LUXURY REPORTS SYSTEM (v3)
Daily + Monthly with switchable navigation
════════════════════════════════════════════════════════ */
/* HERO — large header card */
.rpt-hero{
position:relative;
padding:22px 22px 20px;
margin-bottom:14px;
background:
radial-gradient(ellipse at top right, rgba(201,168,76,.18) 0%, transparent 55%),
radial-gradient(ellipse at bottom left, rgba(168,85,247,.12) 0%, transparent 55%),
linear-gradient(155deg, var(--d2) 0%, var(--d3) 100%);
border:1px solid var(--bdr2);
border-radius:18px;
overflow:hidden;
}
.rpt-hero-bg{
position:absolute;inset:0;
background-image:
radial-gradient(circle at 25% 30%, rgba(255,255,255,.025) 0%, transparent 4%),
radial-gradient(circle at 75% 60%, rgba(255,255,255,.02) 0%, transparent 3%);
background-size:80px 80px;
pointer-events:none;
}
.rpt-hero-orb{
position:absolute;
border-radius:50%;
filter:blur(70px);
pointer-events:none;
}
.rpt-hero-orb-1{
width:200px;height:200px;
background:rgba(201,168,76,.28);
top:-70px;right:-50px;
animation:rptOrb1 14s ease-in-out infinite;
}
.rpt-hero-orb-2{
width:180px;height:180px;
background:rgba(168,85,247,.2);
bottom:-60px;left:-40px;
animation:rptOrb2 18s ease-in-out infinite;
}
@keyframes rptOrb1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-20px,15px) scale(1.1);}}
@keyframes rptOrb2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(20px,-15px) scale(1.1);}}
.rpt-hero-content{
position:relative;z-index:2;
display:flex;align-items:center;gap:16px;
}
.rpt-hero-ico{
width:60px;height:60px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #C9A84C 0%, #9F7E1C 100%);
color:#1a1a1a;
border-radius:16px;
box-shadow:
0 12px 28px rgba(201,168,76,.45),
0 0 24px rgba(201,168,76,.18),
inset 0 1.5px 0 rgba(255,255,255,.3);
}
.rpt-hero-text{flex:1;min-width:0;}
.rpt-hero-title{
font-family:var(--font);
font-size:19px;
font-weight:900;
letter-spacing:-.5px;
background:linear-gradient(135deg, #fff 0%, #fde68a 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
animation:rptShine 5s ease-in-out infinite;
margin-bottom:4px;
}
@keyframes rptShine{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.rpt-hero-sub{
font-size:11.5px;
color:var(--t3);
font-weight:700;
line-height:1.55;
}
/* MODE TABS — Daily/Monthly switcher */
.rpt-mode-tabs{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:14px;
}
.rpt-mode-tab{
display:flex;
align-items:center;
gap:11px;
padding:13px 14px;
background:linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
border:1.5px solid var(--bdr);
border-radius:14px;
cursor:pointer;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
text-align:right;
position:relative;
overflow:hidden;
}
.rpt-mode-tab::before{
content:'';
position:absolute;
top:0;right:0;
width:3px;height:100%;
background:linear-gradient(180deg, var(--g1), var(--g2));
opacity:0;
transition:opacity .3s;
}
.rpt-mode-tab:hover{
border-color:rgba(201,168,76,.35);
transform:translateY(-1.5px);
box-shadow:0 8px 20px rgba(201,168,76,.12);
}
.rpt-mode-tab.is-active{
background:linear-gradient(155deg, rgba(201,168,76,.15) 0%, rgba(201,168,76,.04) 100%);
border-color:rgba(201,168,76,.5);
box-shadow:0 8px 22px rgba(201,168,76,.2), inset 0 1px 0 rgba(255,255,255,.04);
}
.rpt-mode-tab.is-active::before{opacity:1;}
.rpt-mt-ico{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.06);
border-radius:11px;
color:var(--t3);
flex-shrink:0;
transition:all .3s;
}
.rpt-mode-tab.is-active .rpt-mt-ico{
background:linear-gradient(135deg, var(--g1), var(--g2));
border-color:rgba(201,168,76,.5);
color:#1a1a1a;
box-shadow:0 6px 14px rgba(201,168,76,.35);
}
.rpt-mt-text{flex:1;min-width:0;}
.rpt-mt-title{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
margin-bottom:2px;
}
.rpt-mode-tab.is-active .rpt-mt-title{color:var(--g1);}
.rpt-mt-sub{
font-size:10.5px;
color:var(--t3);
font-weight:700;
}
/* NAVIGATION BAR — prev/picker/next + today */
.rpt-nav{
display:flex;
align-items:center;
gap:8px;
padding:9px;
background:linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
border:1.5px solid var(--bdr);
border-radius:14px;
margin-bottom:14px;
}
.rpt-nav-arrow{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
color:var(--t3);
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
flex-shrink:0;
}
.rpt-nav-arrow:hover{
background:rgba(201,168,76,.12);
border-color:rgba(201,168,76,.35);
color:var(--g1);
transform:scale(1.06);
}
.rpt-nav-arrow:active{transform:scale(.94);}
.rpt-nav-picker{
flex:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:9px 14px;
background:linear-gradient(155deg, rgba(201,168,76,.08) 0%, rgba(201,168,76,.02) 100%);
border:1px solid rgba(201,168,76,.22);
border-radius:11px;
color:var(--g1);
cursor:pointer;
transition:all .25s;
min-width:0;
}
.rpt-nav-picker:hover{
background:linear-gradient(155deg, rgba(201,168,76,.14), rgba(201,168,76,.04));
border-color:rgba(201,168,76,.4);
box-shadow:0 4px 12px rgba(201,168,76,.15);
}
.rpt-nav-current{flex:1;min-width:0;text-align:right;}
.rpt-nav-label{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:#fde68a;
letter-spacing:-.2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.rpt-nav-hint{
font-size:9.5px;
color:var(--t3);
font-weight:700;
margin-top:2px;
letter-spacing:.2px;
}
.rpt-nav-today{
padding:8px 14px;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1a1a;
border:none;
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:11px;
font-weight:900;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
flex-shrink:0;
box-shadow:0 5px 14px rgba(201,168,76,.35), inset 0 1px 0 rgba(255,255,255,.3);
}
.rpt-nav-today:hover{
transform:translateY(-1.5px);
box-shadow:0 8px 20px rgba(201,168,76,.5);
}
.rpt-nav-today:active{transform:scale(.95);}
/* REPORT BODY */
.rpt-body{
animation:rptFadeIn .4s cubic-bezier(.16,1,.3,1);
min-height:200px;
}
@keyframes rptFadeIn{
from{opacity:0;transform:translateY(10px);}
to{opacity:1;transform:translateY(0);}
}
/* DAY/MONTH PICKER MODAL */
.rpt-picker-modal{
display:none;
position:fixed;
inset:0;
z-index:900;
align-items:center;
justify-content:center;
padding:20px;
}
.rpt-picker-modal.is-open{display:flex;}
.rpt-picker-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.7);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
animation:rptBdIn .25s ease;
}
@keyframes rptBdIn{from{opacity:0;}to{opacity:1;}}
.rpt-picker-card{
position:relative;
z-index:2;
background:linear-gradient(160deg, #14141c 0%, #0f0f17 100%);
border:1.5px solid rgba(201,168,76,.25);
border-radius:22px;
width:100%;
max-width:440px;
max-height:85vh;
display:flex;
flex-direction:column;
overflow:hidden;
box-shadow:
0 40px 100px rgba(0,0,0,.7),
0 0 80px rgba(201,168,76,.1);
animation:rptPickerIn .35s cubic-bezier(.16,1,.3,1);
}
@keyframes rptPickerIn{
from{opacity:0;transform:translateY(30px) scale(.96);}
to{opacity:1;transform:translateY(0) scale(1);}
}
.rpt-picker-h{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 18px;
border-bottom:1px solid rgba(255,255,255,.06);
}
.rpt-picker-title{
font-family:var(--font);
font-size:14.5px;
font-weight:900;
color:#fde68a;
}
.rpt-picker-close{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
background:rgba(239,68,68,.12);
border:1px solid rgba(239,68,68,.25);
border-radius:9px;
color:#fca5a5;
font-size:14px;
cursor:pointer;
transition:all .2s;
}
.rpt-picker-close:hover{
background:rgba(239,68,68,.22);
transform:rotate(90deg);
}
.rpt-picker-search{
padding:12px 18px;
border-bottom:1px solid rgba(255,255,255,.04);
}
.rpt-picker-search input{
width:100%;
padding:10px 13px;
background:rgba(0,0,0,.4);
border:1.5px solid var(--bdr);
color:var(--t1);
border-radius:11px;
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:700;
transition:all .25s;
}
.rpt-picker-search input:focus{
outline:none;
border-color:rgba(201,168,76,.5);
background:rgba(0,0,0,.55);
box-shadow:0 0 0 3px rgba(201,168,76,.1);
}
.rpt-picker-list{
flex:1;
overflow-y:auto;
padding:8px;
-webkit-overflow-scrolling:touch;
}
.rpt-picker-list::-webkit-scrollbar{width:6px;}
.rpt-picker-list::-webkit-scrollbar-track{background:transparent;}
.rpt-picker-list::-webkit-scrollbar-thumb{background:rgba(201,168,76,.25);border-radius:3px;}
.rpt-picker-item{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:11px 14px;
margin-bottom:5px;
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.04);
border-radius:11px;
cursor:pointer;
transition:all .22s;
}
.rpt-picker-item:hover{
background:linear-gradient(155deg, rgba(201,168,76,.1), rgba(201,168,76,.02));
border-color:rgba(201,168,76,.3);
transform:translateX(-3px);
}
.rpt-picker-item.is-current{
background:linear-gradient(155deg, rgba(201,168,76,.18), rgba(201,168,76,.05));
border-color:rgba(201,168,76,.45);
box-shadow:0 4px 12px rgba(201,168,76,.15);
}
.rpt-picker-item-label{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.rpt-picker-item.is-current .rpt-picker-item-label{color:var(--g1);}
.rpt-picker-item-sub{
font-size:10.5px;
color:var(--t3);
font-weight:700;
margin-top:2px;
}
.rpt-picker-item-badge{
flex-shrink:0;
padding:3px 9px;
background:rgba(201,168,76,.15);
border:1px solid rgba(201,168,76,.3);
border-radius:8px;
font-size:10px;
color:var(--g1);
font-weight:900;
}
.rpt-picker-empty{
text-align:center;
padding:40px 20px;
color:var(--t3);
}
.rpt-picker-empty-ico{font-size:36px;opacity:.4;margin-bottom:10px;}
.rpt-picker-empty-t{font-size:13px;font-weight:800;color:var(--t2);margin-bottom:4px;}
.rpt-picker-empty-s{font-size:10.5px;color:var(--t3);font-weight:700;}
/* Mobile responsiveness for reports */
@media(max-width:640px){
.rpt-hero{padding:18px 16px;}
.rpt-hero-content{gap:12px;}
.rpt-hero-ico{width:50px;height:50px;}
.rpt-hero-title{font-size:16px;}
.rpt-hero-sub{font-size:10.5px;}
.rpt-mode-tabs{gap:7px;}
.rpt-mode-tab{padding:11px 12px;gap:9px;}
.rpt-mt-ico{width:34px;height:34px;}
.rpt-mt-title{font-size:12px;}
.rpt-mt-sub{font-size:9.5px;}
.rpt-nav{padding:7px;gap:6px;}
.rpt-nav-arrow{width:34px;height:34px;}
.rpt-nav-picker{padding:7px 11px;}
.rpt-nav-label{font-size:12px;}
.rpt-nav-hint{font-size:9px;}
.rpt-nav-today{padding:7px 11px;font-size:10px;}
.rpt-picker-card{max-width:100%;max-height:92vh;}
.rpt-picker-modal{padding:0;align-items:flex-end;}
.rpt-picker-card{border-radius:22px 22px 0 0;}
}
/* ════════════════════════════════════════════════════════
🆕✨ PDF GENERATOR CARDS — Daily + Monthly
════════════════════════════════════════════════════════ */
.rpt-pdf-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
margin-bottom:14px;
}
.rpt-pdf-card{
position:relative;
padding:20px;
background:linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
border:1.5px solid var(--bdr);
border-radius:18px;
overflow:hidden;
transition:all .35s cubic-bezier(.16,1,.3,1);
}
.rpt-pdf-card:hover{
border-color:rgba(201,168,76,.4);
transform:translateY(-3px);
box-shadow:0 20px 50px rgba(0,0,0,.4), 0 0 30px rgba(201,168,76,.12);
}
.rpc-glow{
position:absolute;
inset:0;
background:radial-gradient(ellipse at top right, rgba(201,168,76,.1) 0%, transparent 55%);
pointer-events:none;
}
.rpt-pdf-monthly .rpc-glow{
background:radial-gradient(ellipse at top right, rgba(168,85,247,.12) 0%, transparent 55%);
}
.rpc-h{
display:flex;
align-items:center;
gap:13px;
margin-bottom:14px;
position:relative;
z-index:1;
}
.rpc-ico{
width:50px;height:50px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1a1a;
border-radius:14px;
flex-shrink:0;
box-shadow:
0 10px 22px rgba(201,168,76,.4),
inset 0 1.5px 0 rgba(255,255,255,.3),
inset 0 -1.5px 0 rgba(0,0,0,.15);
}
.rpt-pdf-monthly .rpc-ico{
background:linear-gradient(135deg, #a855f7, #7c3aed);
color:#fff;
box-shadow:
0 10px 22px rgba(168,85,247,.4),
inset 0 1.5px 0 rgba(255,255,255,.3),
inset 0 -1.5px 0 rgba(0,0,0,.15);
}
.rpc-h-text{flex:1;min-width:0;}
.rpc-title{
font-family:var(--font);
font-size:16px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
margin-bottom:3px;
}
.rpc-sub{
font-size:11px;
color:var(--t3);
font-weight:700;
line-height:1.5;
}
.rpc-date-box{
padding:12px 14px;
background:linear-gradient(155deg, rgba(201,168,76,.08), rgba(201,168,76,.02));
border:1.5px solid rgba(201,168,76,.2);
border-radius:12px;
margin-bottom:14px;
position:relative;
z-index:1;
}
.rpt-pdf-monthly .rpc-date-box{
background:linear-gradient(155deg, rgba(168,85,247,.08), rgba(168,85,247,.02));
border-color:rgba(168,85,247,.2);
}
.rpc-date-lbl{
font-size:10px;
color:var(--t3);
font-weight:800;
letter-spacing:.3px;
margin-bottom:5px;
}
.rpc-date-val{
font-family:var(--font);
font-size:14.5px;
font-weight:900;
color:#fde68a;
letter-spacing:-.2px;
margin-bottom:8px;
}
.rpt-pdf-monthly .rpc-date-val{color:#d8b4fe;}
.rpc-change-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 13px;
background:rgba(0,0,0,.35);
border:1px solid rgba(255,255,255,.08);
border-radius:9px;
color:var(--t2);
font-family:'Cairo',sans-serif;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:all .25s;
}
.rpc-change-btn:hover{
background:rgba(201,168,76,.15);
border-color:rgba(201,168,76,.35);
color:var(--g1);
}
.rpt-pdf-monthly .rpc-change-btn:hover{
background:rgba(168,85,247,.15);
border-color:rgba(168,85,247,.35);
color:#c084fc;
}
.rpc-features{
display:flex;
flex-direction:column;
gap:7px;
margin-bottom:16px;
position:relative;
z-index:1;
}
.rpc-feat{
display:flex;
align-items:center;
gap:8px;
font-size:11.5px;
color:var(--t2);
font-weight:700;
}
.rpc-feat-ico{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;height:18px;
background:rgba(34,197,94,.15);
border:1px solid rgba(34,197,94,.3);
border-radius:50%;
color:#4ade80;
font-size:10px;
font-weight:900;
flex-shrink:0;
}
.rpc-action-btn{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:9px;
padding:13px 18px;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1a1a;
border:none;
border-radius:13px;
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:900;
cursor:pointer;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
box-shadow:
0 10px 24px rgba(201,168,76,.4),
inset 0 1.5px 0 rgba(255,255,255,.3),
inset 0 -1.5px 0 rgba(0,0,0,.15);
position:relative;
z-index:1;
}
.rpt-pdf-monthly .rpc-action-btn{
background:linear-gradient(135deg, #a855f7, #7c3aed);
color:#fff;
box-shadow:
0 10px 24px rgba(168,85,247,.4),
inset 0 1.5px 0 rgba(255,255,255,.3),
inset 0 -1.5px 0 rgba(0,0,0,.15);
}
.rpc-action-btn:hover{
transform:translateY(-2px) scale(1.02);
box-shadow:0 14px 30px rgba(201,168,76,.55), inset 0 1.5px 0 rgba(255,255,255,.4);
}
.rpt-pdf-monthly .rpc-action-btn:hover{
box-shadow:0 14px 30px rgba(168,85,247,.55), inset 0 1.5px 0 rgba(255,255,255,.4);
}
.rpc-action-btn:active{transform:scale(.96);}
/* SALES INVOICES SECTION */
.rpt-sales-card{
margin-bottom:14px;
}
.rpt-sales-card .rpc-h{margin-bottom:12px;}
.rpt-invoices-toolbar{
display:flex;gap:8px;flex-wrap:wrap;
margin-bottom:12px;
position:relative;z-index:1;
}
.rpt-inv-search{
flex:1;
min-width:180px;
padding:9px 13px;
background:rgba(0,0,0,.4);
border:1.5px solid var(--bdr);
color:var(--t1);
border-radius:11px;
font-family:'Cairo',sans-serif;
font-size:12.5px;
font-weight:700;
transition:all .25s;
}
.rpt-inv-search:focus{
outline:none;
border-color:rgba(168,85,247,.5);
box-shadow:0 0 0 3px rgba(168,85,247,.1);
}
.rpt-inv-day-filter{
padding:9px 13px;
background:rgba(0,0,0,.4);
border:1.5px solid var(--bdr);
color:var(--t1);
border-radius:11px;
font-family:'Cairo',sans-serif;
font-size:12px;
font-weight:800;
cursor:pointer;
min-width:140px;
}
.rpt-inv-day-filter:focus{
outline:none;
border-color:rgba(168,85,247,.5);
}
.rpt-inv-day-filter option{background:#1a1a1f;color:var(--t1);}
.rpt-invoices-list{
display:flex;
flex-direction:column;
gap:7px;
max-height:500px;
overflow-y:auto;
position:relative;z-index:1;
-webkit-overflow-scrolling:touch;
}
.rpt-invoices-list::-webkit-scrollbar{width:6px;}
.rpt-invoices-list::-webkit-scrollbar-track{background:transparent;}
.rpt-invoices-list::-webkit-scrollbar-thumb{background:rgba(168,85,247,.25);border-radius:3px;}
.rpt-inv-loading,
.rpt-inv-empty{
text-align:center;
padding:40px 20px;
color:var(--t3);
font-size:12.5px;
font-weight:700;
}
.rpt-inv-empty-ico{font-size:42px;opacity:.4;margin-bottom:8px;}
.rpt-inv-row{
display:grid;
grid-template-columns:auto 1fr auto auto;
gap:11px;
align-items:center;
padding:11px 13px;
background:linear-gradient(155deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
border:1px solid rgba(255,255,255,.05);
border-radius:11px;
transition:all .25s cubic-bezier(.16,1,.3,1);
}
.rpt-inv-row:hover{
background:linear-gradient(155deg, rgba(168,85,247,.06), rgba(168,85,247,.01));
border-color:rgba(168,85,247,.25);
transform:translateX(-2px);
}
.rpt-inv-num{
font-family:'Cairo',monospace;
font-size:13px;
font-weight:900;
color:#c084fc;
padding:6px 11px;
background:rgba(168,85,247,.12);
border:1px solid rgba(168,85,247,.25);
border-radius:9px;
min-width:50px;
text-align:center;
flex-shrink:0;
}
.rpt-inv-info{min-width:0;}
.rpt-inv-name{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
margin-bottom:2px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.rpt-inv-meta{
display:flex;
gap:8px;
font-size:10.5px;
color:var(--t3);
font-weight:700;
flex-wrap:wrap;
}
.rpt-inv-meta-item{display:inline-flex;align-items:center;gap:3px;}
.rpt-inv-price{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:#fde68a;
white-space:nowrap;
flex-shrink:0;
}
.rpt-inv-price.is-unpaid{color:#fca5a5;}
.rpt-inv-price.is-refunded{color:#a78bfa;text-decoration:line-through;}
.rpt-inv-pdf-btn{
display:flex;
align-items:center;
justify-content:center;
width:42px;height:42px;
background:linear-gradient(135deg, #DC2626 0%, #b91c1c 100%);
color:#fff;
border:none;
border-radius:11px;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
flex-shrink:0;
box-shadow:0 6px 14px rgba(220,38,38,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.rpt-inv-pdf-btn:hover{
transform:translateY(-2px) scale(1.06);
box-shadow:0 10px 22px rgba(220,38,38,.55);
}
.rpt-inv-pdf-btn:active{transform:scale(.92);}
/* Mobile responsiveness for PDF cards */
@media(max-width:640px){
.rpt-pdf-grid{
grid-template-columns:1fr;
gap:11px;
}
.rpt-pdf-card{padding:16px;border-radius:15px;}
.rpc-h{gap:11px;margin-bottom:12px;}
.rpc-ico{width:44px;height:44px;}
.rpc-title{font-size:14.5px;}
.rpc-sub{font-size:10.5px;}
.rpc-date-box{padding:10px 12px;}
.rpc-date-val{font-size:13px;}
.rpc-feat{font-size:11px;}
.rpc-action-btn{padding:11px 14px;font-size:12px;}
.rpt-invoices-toolbar{gap:6px;}
.rpt-inv-day-filter{min-width:100%;flex:1;}
.rpt-inv-row{
grid-template-columns:auto 1fr;
gap:9px;
padding:9px 11px;
row-gap:7px;
}
.rpt-inv-num{font-size:12px;padding:5px 9px;}
.rpt-inv-price{
grid-column:2;
text-align:left;
font-size:13px;
}
.rpt-inv-pdf-btn{
grid-column:1/-1;
width:100%;
height:36px;
border-radius:9px;
font-size:11.5px;
font-weight:900;
}
.rpt-inv-pdf-btn::after{
content:'📄 تحميل فاتورة PDF';
margin-right:8px;
font-family:'Cairo',sans-serif;
}
}
/* ════════════════════════════════════════════════════════
🆕✨ INVOICES TAB (الفواتير)
════════════════════════════════════════════════════════ */
.inv-hero{
position:relative;
padding:22px 22px 20px;
margin-bottom:14px;
background:
radial-gradient(ellipse at top right, rgba(59,130,246,.18) 0%, transparent 55%),
radial-gradient(ellipse at bottom left, rgba(168,85,247,.12) 0%, transparent 55%),
linear-gradient(155deg, var(--d2) 0%, var(--d3) 100%);
border:1px solid var(--bdr2);
border-radius:18px;
overflow:hidden;
}
.inv-hero-bg{
position:absolute;inset:0;
background-image:
radial-gradient(circle at 25% 30%, rgba(255,255,255,.025) 0%, transparent 4%),
radial-gradient(circle at 75% 60%, rgba(255,255,255,.02) 0%, transparent 3%);
background-size:80px 80px;
pointer-events:none;
}
.inv-hero-orb{
position:absolute;border-radius:50%;
filter:blur(70px);pointer-events:none;
}
.inv-hero-orb-1{
width:200px;height:200px;
background:rgba(59,130,246,.28);
top:-70px;right:-50px;
animation:rptOrb1 14s ease-in-out infinite;
}
.inv-hero-orb-2{
width:180px;height:180px;
background:rgba(168,85,247,.22);
bottom:-60px;left:-40px;
animation:rptOrb2 18s ease-in-out infinite;
}
.inv-hero-content{
position:relative;z-index:2;
display:flex;align-items:center;gap:16px;
}
.inv-hero-ico{
width:60px;height:60px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
border-radius:16px;
box-shadow:
0 12px 28px rgba(59,130,246,.45),
0 0 24px rgba(59,130,246,.18),
inset 0 1.5px 0 rgba(255,255,255,.3);
}
.inv-hero-text{flex:1;min-width:0;}
.inv-hero-title{
font-family:var(--font);
font-size:19px;
font-weight:900;
letter-spacing:-.5px;
background:linear-gradient(135deg, #fff 0%, #93c5fd 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:rptShine 5s ease-in-out infinite;
margin-bottom:4px;
}
.inv-hero-sub{
font-size:11.5px;
color:var(--t3);
font-weight:700;
line-height:1.55;
}
/* Stats Dashboard */
.inv-stats-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-bottom:14px;
}
.inv-stat{
display:flex;
align-items:center;
gap:11px;
padding:13px 14px;
background:linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
border:1px solid var(--bdr);
border-radius:13px;
transition:all .3s cubic-bezier(.16,1,.3,1);
}
.inv-stat:hover{
border-color:rgba(59,130,246,.35);
transform:translateY(-2px);
box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.inv-stat-ico{
width:38px;height:38px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
color:#fff;
border-radius:11px;
box-shadow:inset 0 1.5px 0 rgba(255,255,255,.25);
}
.inv-stat-text{flex:1;min-width:0;}
.inv-stat-lbl{
font-size:10px;
color:var(--t3);
font-weight:800;
margin-bottom:2px;
letter-spacing:.3px;
}
.inv-stat-val{
font-family:var(--font);
font-size:18px;
font-weight:900;
color:#fde68a;
letter-spacing:-.4px;
line-height:1;
}
/* Filters */
.inv-filters{
display:flex;gap:8px;flex-wrap:wrap;
margin-bottom:10px;
}
.inv-search-wrap{
flex:1;
position:relative;
min-width:200px;
}
.inv-search-ico{
position:absolute;
top:50%;right:12px;
transform:translateY(-50%);
color:var(--t3);
pointer-events:none;
}
.inv-search-wrap input{
width:100%;
padding:10px 36px 10px 13px;
background:rgba(0,0,0,.4);
border:1.5px solid var(--bdr);
color:var(--t1);
border-radius:12px;
font-family:'Cairo',sans-serif;
font-size:12.5px;
font-weight:700;
transition:all .25s;
}
.inv-search-wrap input:focus{
outline:none;
border-color:rgba(59,130,246,.5);
box-shadow:0 0 0 3px rgba(59,130,246,.1);
}
.inv-filter-select{
padding:10px 12px;
background:rgba(0,0,0,.4);
border:1.5px solid var(--bdr);
color:var(--t1);
border-radius:12px;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:800;
cursor:pointer;
min-width:130px;
}
.inv-filter-select:focus{outline:none;border-color:rgba(59,130,246,.5);}
.inv-filter-select option{background:#1a1a1f;color:var(--t1);}
/* Quick Actions */
.inv-quick-actions{
display:flex;gap:8px;flex-wrap:wrap;
margin-bottom:14px;
}
.inv-qa-btn{
display:inline-flex;
align-items:center;gap:7px;
padding:9px 14px;
background:linear-gradient(155deg, rgba(59,130,246,.1), rgba(59,130,246,.02));
border:1px solid rgba(59,130,246,.25);
color:#93c5fd;
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:800;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.inv-qa-btn:hover{
background:linear-gradient(155deg, rgba(59,130,246,.18), rgba(59,130,246,.05));
border-color:rgba(59,130,246,.45);
transform:translateY(-1.5px);
box-shadow:0 6px 14px rgba(59,130,246,.18);
}
.inv-qa-btn:active{transform:scale(.96);}
/* Invoices List */
.inv-list{
display:flex;
flex-direction:column;
gap:9px;
}
.inv-loading,.inv-empty{
text-align:center;
padding:50px 20px;
color:var(--t3);
font-size:13px;
font-weight:700;
}
.inv-empty-ico{font-size:48px;opacity:.35;margin-bottom:10px;}
.inv-empty-t{font-size:14px;font-weight:800;color:var(--t2);margin-bottom:5px;}
.inv-empty-s{font-size:11px;color:var(--t3);font-weight:700;}
.inv-card{
display:grid;
grid-template-columns:auto 1fr auto auto;
gap:13px;
align-items:center;
padding:13px 15px;
background:linear-gradient(155deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
border:1px solid rgba(255,255,255,.06);
border-radius:13px;
transition:all .28s cubic-bezier(.16,1,.3,1);
position:relative;
overflow:hidden;
}
.inv-card::before{
content:'';
position:absolute;
top:0;right:0;
width:3px;height:100%;
background:linear-gradient(180deg, #3B82F6, #1d4ed8);
opacity:0;
transition:opacity .25s;
}
.inv-card:hover{
background:linear-gradient(155deg, rgba(59,130,246,.08), rgba(59,130,246,.02));
border-color:rgba(59,130,246,.3);
transform:translateX(-3px);
box-shadow:0 8px 22px rgba(0,0,0,.3);
}
.inv-card:hover::before{opacity:1;}
.inv-card.is-paid::before{background:linear-gradient(180deg, #22C55E, #16a34a);}
.inv-card.is-unpaid::before{background:linear-gradient(180deg, #EF4444, #b91c1c);}
.inv-card.is-refunded::before{background:linear-gradient(180deg, #a855f7, #7c3aed);}
.inv-num{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
min-width:54px;
padding:8px 12px;
background:linear-gradient(135deg,#1e293b,#0f172a);
border:1.5px solid rgba(59,130,246,.35);
border-radius:11px;
flex-shrink:0;
}
.inv-num-lbl{
font-size:8.5px;
color:#93c5fd;
font-weight:800;
margin-bottom:2px;
letter-spacing:.4px;
}
.inv-num-val{
font-family:'Cairo',monospace;
font-size:14px;
font-weight:900;
color:#fff;
letter-spacing:-.3px;
line-height:1;
}
.inv-info{min-width:0;}
.inv-name{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
margin-bottom:4px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.inv-meta{
display:flex;
gap:9px;
font-size:10.5px;
color:var(--t3);
font-weight:700;
flex-wrap:wrap;
}
.inv-meta-item{
display:inline-flex;align-items:center;gap:3px;
}
.inv-status-badge{
display:inline-flex;
align-items:center;
padding:2px 7px;
border-radius:6px;
font-size:9.5px;
font-weight:900;
letter-spacing:.2px;
}
.inv-status-paid{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.3);}
.inv-status-unpaid{background:rgba(239,68,68,.15);color:#fca5a5;border:1px solid rgba(239,68,68,.3);}
.inv-status-refunded{background:rgba(168,85,247,.15);color:#c084fc;border:1px solid rgba(168,85,247,.3);}
.inv-price{
font-family:var(--font);
font-size:15px;
font-weight:900;
color:#fde68a;
white-space:nowrap;
flex-shrink:0;
text-align:left;
}
.inv-price.is-unpaid{color:#fca5a5;}
.inv-price.is-refunded{color:#c084fc;text-decoration:line-through;opacity:.75;}
.inv-actions{
display:flex;
gap:6px;
flex-shrink:0;
}
.inv-action-btn{
display:flex;
align-items:center;
justify-content:center;
width:38px;height:38px;
border:none;
border-radius:10px;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
flex-shrink:0;
}
.inv-action-pdf{
background:linear-gradient(135deg,#DC2626,#b91c1c);
color:#fff;
box-shadow:0 5px 12px rgba(220,38,38,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.inv-action-pdf:hover{
transform:translateY(-2px) scale(1.06);
box-shadow:0 9px 20px rgba(220,38,38,.55);
}
.inv-action-wa{
background:linear-gradient(135deg,#25D366,#128c7e);
color:#fff;
box-shadow:0 5px 12px rgba(37,211,102,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.inv-action-wa:hover{
transform:translateY(-2px) scale(1.06);
box-shadow:0 9px 20px rgba(37,211,102,.55);
}
.inv-action-btn:active{transform:scale(.92);}
/* ════════════════════════════════════════════════════════
🆕✨ SMART QUERY TAB (الاستعلام الذكي)
════════════════════════════════════════════════════════ */
.qry-hero{
position:relative;
padding:13px 20px;
margin-bottom:12px;
background:
radial-gradient(ellipse at top right, rgba(168,85,247,.22) 0%, transparent 55%),
radial-gradient(ellipse at bottom left, rgba(236,72,153,.15) 0%, transparent 55%),
linear-gradient(155deg, var(--d2) 0%, var(--d3) 100%);
border:1px solid var(--bdr2);
border-radius:18px;
overflow:hidden;
}
.qry-hero-bg{
position:absolute;inset:0;
background-image:
radial-gradient(circle at 30% 40%, rgba(255,255,255,.03) 0%, transparent 5%),
radial-gradient(circle at 70% 60%, rgba(255,255,255,.025) 0%, transparent 4%);
background-size:70px 70px;
pointer-events:none;
}
.qry-hero-orb{
position:absolute;border-radius:50%;
filter:blur(70px);pointer-events:none;
}
.qry-hero-orb-1{
width:220px;height:220px;
background:rgba(168,85,247,.3);
top:-80px;right:-60px;
animation:rptOrb1 12s ease-in-out infinite;
}
.qry-hero-orb-2{
width:190px;height:190px;
background:rgba(236,72,153,.22);
bottom:-70px;left:-40px;
animation:rptOrb2 16s ease-in-out infinite;
}
.qry-hero-content{
position:relative;z-index:2;
display:flex;align-items:center;gap:16px;
}
.qry-hero-ico{
width:48px;height:48px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#a855f7 0%,#7c3aed 50%,#ec4899 100%);
color:#fff;
border-radius:18px;
box-shadow:
0 14px 32px rgba(168,85,247,.5),
0 0 30px rgba(236,72,153,.25),
inset 0 1.5px 0 rgba(255,255,255,.3);
animation:qryIcoFloat 4s ease-in-out infinite;
}
@keyframes qryIcoFloat{
0%,100%{transform:translateY(0) rotate(0);}
50%{transform:translateY(-3px) rotate(3deg);}
}
.qry-hero-text{flex:1;min-width:0;}
.qry-hero-title{
font-family:var(--font);
font-size:19px;
font-weight:900;
letter-spacing:-.5px;
background:linear-gradient(135deg, #fff 0%, #d8b4fe 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:rptShine 5s ease-in-out infinite;
margin-bottom:4px;
display:flex;align-items:center;gap:8px;
}
.qry-ai-badge{
display:inline-flex;
align-items:center;
padding:2px 8px;
background:linear-gradient(135deg, #a855f7, #7c3aed);
color:#fff !important;
-webkit-text-fill-color:#fff !important;
border-radius:7px;
font-size:9.5px;
font-weight:900;
letter-spacing:.5px;
box-shadow:0 4px 12px rgba(168,85,247,.4);
animation:none;
}
.qry-hero-sub{
font-size:11.5px;
color:var(--t3);
font-weight:700;
line-height:1.55;
}
/* SMART SEARCH BOX */
.qry-search-box{
position:relative;
display:flex;
align-items:center;
gap:11px;
padding:14px 18px;
background:
linear-gradient(155deg, rgba(168,85,247,.1) 0%, rgba(168,85,247,.02) 100%),
var(--d3);
border:2px solid rgba(168,85,247,.3);
border-radius:16px;
margin-bottom:12px;
transition:all .3s;
overflow:hidden;
}
.qry-search-box:focus-within{
border-color:rgba(168,85,247,.6);
box-shadow:
0 0 0 4px rgba(168,85,247,.1),
0 10px 30px rgba(168,85,247,.2);
transform:translateY(-1px);
}
.qry-search-pulse{
position:absolute;
top:0;left:-30%;
width:30%;height:100%;
background:linear-gradient(90deg, transparent, rgba(168,85,247,.12), transparent);
animation:qryPulse 3s ease-in-out infinite;
pointer-events:none;
}
@keyframes qryPulse{
0%{left:-30%;}
100%{left:130%;}
}
.qry-search-ico{
color:#c084fc;
flex-shrink:0;
z-index:1;
}
.qry-search-box input{
flex:1;
background:transparent;
border:none;
outline:none;
color:var(--t1);
font-family:'Cairo',sans-serif;
font-size:14px;
font-weight:700;
z-index:1;
}
.qry-search-box input::placeholder{
color:var(--t3);
font-size:13px;
font-weight:600;
}
.qry-clear-btn{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:rgba(239,68,68,.15);
border:1px solid rgba(239,68,68,.3);
border-radius:9px;
color:#fca5a5;
cursor:pointer;
transition:all .2s;
z-index:1;
flex-shrink:0;
}
.qry-clear-btn:hover{
background:rgba(239,68,68,.25);
transform:rotate(90deg);
}
/* QUICK FILTER CHIPS */
.qry-chips{
display:flex;
align-items:center;
gap:9px;
margin-bottom:12px;
flex-wrap:wrap;
}
.qry-chips-lbl{
font-size:11px;
font-weight:800;
color:var(--t3);
letter-spacing:.3px;
}
.qry-chip-list{
display:flex;
gap:6px;
flex-wrap:wrap;
}
.qry-chip{
padding:6px 12px;
background:linear-gradient(155deg, rgba(168,85,247,.08), rgba(168,85,247,.02));
border:1px solid rgba(168,85,247,.25);
border-radius:18px;
color:#d8b4fe;
font-family:'Cairo',sans-serif;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.qry-chip:hover{
background:linear-gradient(155deg, rgba(168,85,247,.2), rgba(168,85,247,.05));
border-color:rgba(168,85,247,.5);
color:#e9d5ff;
transform:translateY(-1.5px) scale(1.03);
box-shadow:0 6px 14px rgba(168,85,247,.25);
}
.qry-chip:active{transform:scale(.95);}
.qry-chip.is-active{
background:linear-gradient(135deg, #a855f7, #7c3aed);
border-color:rgba(168,85,247,.6);
color:#fff;
box-shadow:0 8px 20px rgba(168,85,247,.4);
}
/* RESULTS STATS */
.qry-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:10px;
margin-bottom:14px;
animation:rptFadeIn .4s cubic-bezier(.16,1,.3,1);
}
.qry-stat{
padding:11px 13px;
background:linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
border:1px solid var(--bdr);
border-radius:11px;
text-align:center;
}
.qry-stat-l{
font-size:10px;
color:var(--t3);
font-weight:800;
margin-bottom:4px;
letter-spacing:.3px;
}
.qry-stat-v{
font-family:var(--font);
font-size:15px;
font-weight:900;
color:#d8b4fe;
letter-spacing:-.3px;
}
/* RESULTS */
.qry-results{
min-height:280px;
}
.qry-empty{
text-align:center;
padding:50px 20px;
background:linear-gradient(155deg, rgba(168,85,247,.04), transparent);
border:1.5px dashed rgba(168,85,247,.25);
border-radius:18px;
}
.qry-empty-ico{
color:rgba(168,85,247,.4);
margin-bottom:14px;
filter:drop-shadow(0 4px 12px rgba(168,85,247,.25));
}
.qry-empty-t{
font-family:var(--font);
font-size:15px;
font-weight:900;
color:var(--t2);
margin-bottom:6px;
letter-spacing:-.3px;
}
.qry-empty-s{
font-size:11.5px;
color:var(--t3);
font-weight:700;
margin-bottom:24px;
line-height:1.6;
}
.qry-suggestions{
margin-top:18px;
padding-top:18px;
border-top:1px dashed rgba(255,255,255,.08);
}
.qry-sug-lbl{
font-size:11px;
color:var(--t3);
font-weight:800;
margin-bottom:10px;
}
.qry-sug-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:7px;
max-width:420px;
margin:0 auto;
}
.qry-sug{
padding:9px 10px;
background:rgba(168,85,247,.06);
border:1px solid rgba(168,85,247,.18);
border-radius:9px;
font-size:11px;
color:#c084fc;
font-weight:700;
text-align:center;
transition:all .2s;
}
.qry-sug:hover{
background:rgba(168,85,247,.12);
transform:translateY(-1px);
}
/* Result cards (reuse inv-card styling) */
.qry-result-card{
display:grid;
grid-template-columns:auto 1fr auto auto;
gap:13px;
align-items:center;
padding:13px 15px;
background:linear-gradient(155deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
border:1px solid rgba(255,255,255,.06);
border-radius:13px;
margin-bottom:8px;
transition:all .25s;
position:relative;
overflow:hidden;
}
.qry-result-card::before{
content:'';
position:absolute;
top:0;right:0;
width:3px;height:100%;
background:linear-gradient(180deg, #a855f7, #7c3aed);
opacity:0;
transition:opacity .25s;
}
.qry-result-card:hover{
background:linear-gradient(155deg, rgba(168,85,247,.08), rgba(168,85,247,.02));
border-color:rgba(168,85,247,.3);
transform:translateX(-3px);
}
.qry-result-card:hover::before{opacity:1;}
.qry-no-results{
text-align:center;
padding:50px 20px;
color:var(--t3);
}
.qry-no-results-ico{font-size:50px;opacity:.35;margin-bottom:10px;}
.qry-no-results-t{font-size:14px;font-weight:800;color:var(--t2);margin-bottom:5px;}
.qry-no-results-s{font-size:11px;color:var(--t3);font-weight:700;}
/* Mobile responsiveness */
@media(max-width:640px){
.inv-hero{padding:18px 16px;}
.qry-hero{padding:11px 14px;}
.inv-hero-content,.qry-hero-content{gap:12px;}
.inv-hero-ico{width:50px;height:50px;}
.qry-hero-ico{width:42px;height:42px;}
.inv-hero-title,.qry-hero-title{font-size:16px;}
.inv-hero-sub,.qry-hero-sub{font-size:10.5px;}
.inv-stats-grid,.qry-stats{grid-template-columns:repeat(2,1fr);gap:7px;}
.inv-stat{padding:10px 11px;gap:9px;}
.inv-stat-ico{width:34px;height:34px;}
.inv-stat-val{font-size:15px;}
.inv-search-wrap{min-width:100%;}
.inv-filter-select{flex:1;min-width:48%;}
.inv-quick-actions{gap:6px;}
.inv-qa-btn{padding:8px 11px;font-size:10.5px;}
.inv-card,.qry-result-card{
grid-template-columns:auto 1fr;
gap:9px;
padding:11px 12px;
row-gap:8px;
}
.inv-num{padding:6px 10px;min-width:48px;}
.inv-num-val{font-size:12.5px;}
.inv-name{font-size:12.5px;}
.inv-meta{font-size:9.5px;}
.inv-price{
grid-column:2;
text-align:left;
font-size:13.5px;
}
.inv-actions{
grid-column:1/-1;
width:100%;
justify-content:stretch;
}
.inv-action-btn{
width:auto;flex:1;
height:34px;
}
.qry-search-box{padding:12px 14px;gap:9px;}
.qry-search-box input{font-size:13px;}
.qry-chips{gap:7px;}
.qry-chip-list{gap:5px;}
.qry-chip{padding:5px 10px;font-size:10px;}
.qry-stat{padding:9px 10px;}
.qry-stat-v{font-size:13px;}
.qry-empty{padding:30px 16px;}
.qry-sug-grid{grid-template-columns:repeat(2,1fr);}
}
/* MODAL */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:600;align-items:center;justify-content:center;padding:14px;overflow-y:auto;}
.overlay.on{display:flex;}
.modal{background:linear-gradient(160deg,var(--d2),var(--d3));border:1px solid var(--bdr2);border-radius:var(--r20);width:100%;max-width:520px;padding:20px;margin:auto;animation:fadeUp .25s ease;box-shadow:0 20px 60px rgba(0,0,0,.8);}
.modal-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-title{font-family:var(--font);font-size:14px;font-weight:700;color:var(--g2);}
.modal-x{width:28px;height:28px;background:var(--d5);border:1px solid var(--bdr);color:var(--t3);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.modal-x:hover{color:var(--t1);}
.modal-acts{display:flex;gap:9px;margin-top:14px;}
/* NDA */
.ndc{background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.18);border-radius:var(--r12);padding:13px 15px;display:none;}
.ndc.on{display:block;}
.ndc-title{font-family:var(--font);font-size:13px;font-weight:700;color:var(--gr);margin-bottom:6px;}
.ndc-text{font-size:12px;color:var(--t3);line-height:1.7;margin-bottom:11px;}
/* EMPTY */
.empty{text-align:center;padding:44px 20px;color:var(--t3);}
.empty .ei{font-size:38px;margin-bottom:10px;opacity:.4;}
.empty p{font-size:13px;line-height:1.7;}
/* FILTER */
.filter-bar{
display:flex;
gap:10px;
flex-wrap:nowrap;
align-items:center;
padding:12px 14px;
margin-bottom:16px;
background:linear-gradient(135deg, rgba(201,168,76,.10), rgba(201,168,76,.02));
border:1px solid var(--bdr2,rgba(201,168,76,.25));
border-radius:18px;
backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
position:relative;overflow:hidden;
}
.filter-bar::before{
content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
background:linear-gradient(90deg,transparent,rgba(201,168,76,.5),transparent);pointer-events:none;
}
/* الفلتر يتمدد لملء المساحة، الباقي بحجمه */
.filter-bar > #dash-rec-filter{ flex:1 1 auto; min-width:0; }
.filter-bar > .view-toggle{ flex:0 0 auto; }
.filter-bar > .pdf-export-btn{ flex:0 0 auto; }
/* على الشاشات الضيقة جداً: نخفي نص PDF ونُبقي الأيقونة */
@media (max-width: 560px){
.filter-bar{ gap:8px; padding:10px 12px; }
.filter-bar > .pdf-export-btn .pdf-btn-text,
.filter-bar > .pdf-export-btn .pdf-btn-arrow{ display:none; }
.filter-bar > .pdf-export-btn{ padding:9px 11px; }
}
.filter-bar select{background:var(--d4);border:1px solid var(--bdr);border-radius:var(--r8);padding:8px 28px 8px 10px;color:var(--t2);font-size:12px;font-weight:600;font-family:var(--body);cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23504030' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 8px center;outline:none;direction:rtl;flex:1;min-width:110px;}
.filter-btn{padding:8px 13px;border-radius:var(--r8);font-family:var(--body);font-size:11px;font-weight:700;cursor:pointer;border:1px solid;display:flex;align-items:center;gap:5px;flex-shrink:0;white-space:nowrap;}
/* DESK FORM */
.desk-form-grid{display:grid;grid-template-columns:1fr 380px;gap:20px;align-items:start;}
.desk-form-left{display:flex;flex-direction:column;gap:14px;}
.desk-form-right{position:sticky;top:calc(var(--hdr) + 18px);}
/* INCOME */
.inc-day-card{background:linear-gradient(145deg,var(--d3),var(--d4));border:1px solid var(--bdr);border-radius:var(--r12);overflow:hidden;margin-bottom:10px;}
.idc-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;background:var(--d3);border-bottom:1px solid var(--bdr);}
.idc-date{font-family:var(--font);font-size:13px;font-weight:700;color:var(--g2);}
.idc-meta{font-size:10px;color:var(--t3);margin-top:2px;}
.idc-total{font-size:14px;font-weight:700;color:var(--gr);font-family:var(--font);}
.idc-body{padding:12px;}
.idc-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.idc-stat{background:var(--d5);border-radius:var(--r8);padding:9px;text-align:center;}
.idc-stat .sl{font-size:9px;color:var(--t3);}
.idc-stat .sv{font-size:15px;font-weight:700;font-family:var(--font);}
.idc-list{background:var(--d5);border-radius:var(--r8);overflow:hidden;}
.idc-list-hdr{padding:7px 12px;font-size:9px;font-weight:700;color:var(--t3);border-bottom:1px solid var(--bdr);letter-spacing:.5px;}
.idc-row{display:flex;align-items:center;padding:7px 12px;border-bottom:1px solid rgba(255,255,255,.025);}
.idc-row:last-child{border-bottom:none;}
.ir-n{font-size:10px;font-weight:700;color:var(--g1);font-family:var(--font);width:28px;flex-shrink:0;}
.ir-name{flex:1;font-size:11px;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 6px;}
.ir-plate{font-size:9px;color:var(--t3);flex-shrink:0;}
.ir-time{font-size:9px;color:var(--t4);margin:0 6px;flex-shrink:0;}
.ir-price{font-size:11px;font-weight:700;color:var(--g1);font-family:var(--font);flex-shrink:0;}
.idc-total-bar{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.15);border-radius:var(--r8);padding:10px 14px;display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.itb-lbl{font-size:11px;color:var(--gr);}
.itb-val{font-size:20px;font-weight:900;color:var(--gr);font-family:var(--font);}
/* PIN */
.pin-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--bdr2);background:transparent;}
.pin-dot.on{background:var(--g1);border-color:var(--g1);box-shadow:0 0 8px rgba(201,168,76,.5);}
.pin-dot.err{background:var(--rd);border-color:var(--rd);animation:shk .4s;}
.pk{padding:14px 0;border-radius:var(--r10);background:var(--d4);border:1px solid var(--bdr);color:var(--t1);font-family:var(--font);font-size:17px;font-weight:700;cursor:pointer;}
.pk:hover{background:var(--d5);border-color:var(--bdr2);}
.pk:active{transform:scale(.92);}
/* ANIMATIONS */
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes shk{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
@keyframes shakeX{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}
.spin{display:inline-block;animation:spin 1s linear infinite;}
/* FOOTER */
.site-footer{padding:14px;text-align:center;font-size:10px;color:var(--t4);border-top:1px solid var(--bdr);line-height:2;margin-top:auto;}
.site-footer a{color:var(--g3);}
/*════
SITE FOOTER V2 — Luxurious copyright for dashboard panes
════*/
.site-footer-v2{
padding:0;
border:none;
margin-top:24px;
background:none;
position:relative;
}
.site-footer-v2 .sf-divider{
height:1px;
background:linear-gradient(
90deg,
transparent 0%,
rgba(201,168,76,.04) 15%,
rgba(201,168,76,.28) 50%,
rgba(201,168,76,.04) 85%,
transparent 100%
);
margin-bottom:16px;
position:relative;
}
.site-footer-v2 .sf-divider::before{
content:'';
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:24px;height:1px;
background:linear-gradient(90deg,var(--g1),var(--g2));
box-shadow:0 0 10px rgba(201,168,76,.5);
}
.site-footer-v2 .sf-content{
background:linear-gradient(155deg,
rgba(15,11,0,.5) 0%,
rgba(20,15,0,.3) 100%
);
border:1px solid var(--bdr);
border-radius:14px;
padding:13px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
flex-wrap:wrap;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
.site-footer-v2 .sf-brand{
display:inline-flex;
align-items:center;
gap:7px;
flex-wrap:wrap;
font-size:11px;
color:var(--t3);
font-weight:600;
}
.site-footer-v2 .sf-crown{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
border-radius:7px;
box-shadow:0 3px 10px rgba(201,168,76,.3),0 0 0 1px rgba(255,247,214,.25) inset;
}
.site-footer-v2 .sf-cr{
color:var(--t4);
letter-spacing:.2px;
}
.site-footer-v2 .sf-owner{
color:var(--g2);
font-family:var(--font);
font-weight:900;
font-size:12.5px;
text-shadow:0 1px 3px rgba(201,168,76,.18);
}
.site-footer-v2 .sf-actions{
display:flex;
gap:8px;
flex-shrink:0;
}
.site-footer-v2 .sf-btn{
display:inline-flex;
align-items:center;
gap:6px;
padding:7px 12px;
border-radius:10px;
text-decoration:none;
font-family:var(--font);
font-size:11px;
font-weight:800;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
border:1px solid transparent;
position:relative;
overflow:hidden;
}
.site-footer-v2 .sf-btn:hover{transform:translateY(-1.5px);}
.site-footer-v2 .sf-btn:active{transform:scale(.95);}
.site-footer-v2 .sf-call{
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
box-shadow:0 4px 12px rgba(201,168,76,.32),0 0 0 1px rgba(255,247,214,.25) inset;
}
.site-footer-v2 .sf-call:hover{
box-shadow:0 7px 18px rgba(201,168,76,.45),0 0 0 1px rgba(255,247,214,.4) inset;
}
.site-footer-v2 .sf-wa{
background:linear-gradient(135deg,#25D366,#128C7E);
color:#fff;
box-shadow:0 4px 12px rgba(37,211,102,.3),0 0 0 1px rgba(255,255,255,.15) inset;
}
.site-footer-v2 .sf-wa:hover{
box-shadow:0 7px 18px rgba(37,211,102,.45),0 0 0 1px rgba(255,255,255,.25) inset;
}
@media(max-width:560px){
.site-footer-v2 .sf-content{
flex-direction:column;
align-items:stretch;
text-align:center;
padding:14px;
}
.site-footer-v2 .sf-brand{justify-content:center;}
.site-footer-v2 .sf-actions{justify-content:center;}
.site-footer-v2 .sf-btn{flex:1;justify-content:center;}
}
/* ══════════════════════════════════════
MOBILE <= 640px — كامل ومحسَّن
══════════════════════════════════════ */
@media(max-width:640px){
:root{--hdr:56px;--nav:66px;}
html,body{direction:rtl;text-align:right;}
*{-webkit-tap-highlight-color:transparent;box-sizing:border-box;}
/* ── LAYOUT ── */
.sidebar{display:none;}
.mob-tabs{display:flex;}
.day-bar{display:flex;}
.bot-nav{display:flex;}
.content{padding-bottom:var(--nav);}
/* ══════════════════════════════
HEADER
══════════════════════════════ */
.hdr{padding:0 14px;height:var(--hdr);}
.hdr-left{gap:9px;}
.hdr-ico{width:36px;height:36px;font-size:16px;border-radius:9px;}
.hdr-name{font-size:13px;font-weight:800;}
.hdr-sub{display:none;}
.hdr-stat{display:none;}
.hdr-day{padding:5px 10px;}
.hdr-day .dl{font-size:8px;}
.hdr-day .dv{font-size:11px;}
.hdr-right{gap:6px;}
.btn-ico,.btn-theme{width:32px;height:32px;font-size:14px;}
/* ══════════════════════════════
DAY BAR
══════════════════════════════ */
.day-bar{
padding:10px 14px;
gap:10px;
background:linear-gradient(90deg,rgba(201,168,76,.07),rgba(201,168,76,.02));
position:relative;
z-index:5;
flex-shrink:0;
width:100%;
box-sizing:border-box;
}
.db-date{font-size:13px;font-weight:800;}
.db-stats{font-size:10px;margin-top:2px;line-height:1.4;}
.db-acts{gap:6px;flex-shrink:0;}
.db-acts .filter-btn{padding:8px 12px;font-size:11px;font-weight:700;border-radius:var(--r8);}
/* ══════════════════════════════
MOBILE TABS — clean underline
══════════════════════════════ */
.mob-tabs{
display:flex;
align-items:center;
background:var(--d2);
border-bottom:1px solid var(--bdr);
padding:0 6px;
gap:0;
overflow-x:auto;
scrollbar-width:none;
position:relative;
z-index:5;
flex-shrink:0;
width:100%;
box-sizing:border-box;
box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.mob-tabs::-webkit-scrollbar{display:none;}
.mob-tab{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
padding:13px 13px 12px;
font-size:12px;
font-weight:700;
color:var(--t3);
border-bottom:2.5px solid transparent;
white-space:nowrap;
cursor:pointer;
flex-shrink:0;
letter-spacing:.1px;
position:relative;
}
.mob-tab.on{
color:var(--g1);
border-bottom-color:var(--g1);
}
.mob-tab.on::before{
content:'';
position:absolute;
bottom:-1px;left:15%;right:15%;
height:2.5px;
background:linear-gradient(90deg,var(--g3),var(--g1),var(--g3));
border-radius:2px 2px 0 0;
}
.mob-tab .mt-b{
background:var(--d5);
border-radius:9px;
padding:1px 6px;
font-size:9px;font-weight:700;color:var(--t3);
}
.mob-tab.on .mt-b{background:rgba(201,168,76,.2);color:var(--g1);}
/* ══════════════════════════════
PANE — كل التبويبات
══════════════════════════════ */
.pane{
padding:12px 12px 20px;
gap:12px;
direction:rtl;
align-items:stretch;
background:var(--d0);
width:100%;
box-sizing:border-box;
}
/* ══════════════════════════════
RECEPTION PANE — تصليح كامل
══════════════════════════════ */
/* Force the grid to NEVER be two columns on mobile */
.desk-form-grid,
#pane-rec .desk-form-grid{
display:block !important;
width:100% !important;
max-width:100% !important;
grid-template-columns:unset !important;
}
/* Left side — full width, vertical stack */
.desk-form-left,
#pane-rec .desk-form-left{
display:flex !important;
flex-direction:column !important;
gap:12px !important;
width:100% !important;
max-width:100% !important;
}
/* Right side (preview) — full width below form */
.desk-form-right,
#pane-rec .desk-form-right{
display:block !important;
position:static !important;
width:100% !important;
max-width:100% !important;
margin-top:12px;
}
/* Flash and NDA inside reception */
#pane-rec .flash,
#pane-rec .ndc{
width:100%;
border-radius:var(--r12);
margin:0;
}
/* Issue button — full width, tall */
#pane-rec .btn-row{
gap:8px;
padding:0;
width:100%;
}
#pane-rec .btn-row .btn,
.btn-row .btn{
min-height:52px;
font-size:15px;
font-weight:800;
border-radius:var(--r12);
}
/* ══════════════════════════════
CARDS — full width, proper sizing
══════════════════════════════ */
.card{
border-radius:var(--r12);
width:100% !important;
max-width:100% !important;
box-sizing:border-box;
}
.card-h{
padding:13px 15px;
direction:rtl;
text-align:right;
}
.card-h h3{font-size:14px;font-weight:800;}
.card-body{
padding:14px 15px;
width:100%;
box-sizing:border-box;
}
/* ══════════════════════════════
FORM FIELDS — fill full width
══════════════════════════════ */
.fgrid{
display:flex !important;
flex-direction:column !important;
gap:14px !important;
width:100% !important;
}
/* Car fields: 2 per row */
#pane-rec .card:nth-child(2) .fgrid,
.fgrid.two-col{
display:grid !important;
grid-template-columns:1fr 1fr !important;
gap:11px !important;
}
.f,.f.s2{
grid-column:auto;
display:flex;
flex-direction:column;
gap:6px;
width:100%;
}
.f.s2{grid-column:1/-1;}
.f label{
font-size:12px;
font-weight:700;
color:var(--t2);
text-align:right;
display:block;
width:100%;
margin-bottom:2px;
}
.f input,
.f select,
.f textarea{
width:100% !important;
display:block !important;
padding:14px 15px !important;
font-size:16px !important; /* prevents iOS zoom */
border-radius:var(--r10) !important;
direction:rtl !important;
text-align:right !important;
min-height:52px !important;
background:var(--d3) !important;
border:1.5px solid var(--bdr3) !important;
color:var(--t1) !important;
box-sizing:border-box !important;
-webkit-appearance:none !important;
appearance:none !important;
}
.f select{
padding-left:36px !important;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9'%3E%3Cpath d='M1 1l5.5 5.5L12 1' stroke='%23706050' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-repeat:no-repeat !important;
background-position:left 12px center !important;
}
.f textarea{
min-height:85px !important;
font-size:15px !important;
resize:none;
}
.f input:focus,
.f select:focus,
.f textarea:focus{
border-color:var(--g1) !important;
background:rgba(201,168,76,.05) !important;
box-shadow:0 0 0 3px rgba(201,168,76,.12) !important;
outline:none !important;
}
.f input::placeholder,
.f textarea::placeholder{
color:var(--t4);
font-size:14px;
}
/* Ticket preview */
.tk{max-width:100%;}
.tk-preview-wrap p{font-size:11px;text-align:right;}
/* ── BUTTONS ── */
.btn-row{flex-direction:row;gap:8px;width:100%;}
.btn{
flex:1;min-width:0;
padding:13px 10px;
font-size:14px;font-weight:700;
border-radius:var(--r10);
min-height:50px;
}
/* ══════════════════════════════
BOTTOM NAV
══════════════════════════════ */
.bot-nav{
height:var(--nav);
background:var(--d1);
border-top:1px solid var(--bdr);
box-shadow:0 -6px 28px rgba(0,0,0,.7);
}
.bot-nav::before{
content:'';position:absolute;
top:0;left:8%;right:8%;height:1px;
background:linear-gradient(90deg,transparent,rgba(201,168,76,.7),transparent);
}
.bn-items{display:flex;flex-direction:row;height:100%;width:100%;}
.bn-item{
flex:1;display:flex;flex-direction:column;
align-items:center;justify-content:center;
gap:4px;padding:6px 4px 4px;
cursor:pointer;color:var(--t3);
font-size:9px;font-weight:700;
position:relative;background:transparent;border:none;
border-left:1px solid rgba(255,255,255,.04);
-webkit-tap-highlight-color:transparent;
}
.bn-item:last-child{border-left:none;}
.bn-item.on{color:var(--g1);}
.bn-item.on::after{
content:'';position:absolute;
top:0;left:20%;right:20%;
height:2.5px;
background:linear-gradient(90deg,var(--g3),var(--g2),var(--g3));
border-radius:0 0 4px 4px;
}
.bn-icon{font-size:20px;line-height:1;margin-bottom:1px;}
.bn-item.on .bn-icon{transform:scale(1.12);}
.bn-label{font-size:9px;font-weight:700;white-space:nowrap;}
/* ══════════════════════════════
STATS ROW
══════════════════════════════ */
.stats-row{grid-template-columns:repeat(2,1fr);gap:9px;}
.stat-c{padding:13px 12px;border-radius:var(--r10);text-align:right;}
.stat-c .sl{font-size:10px;margin-bottom:5px;}
.stat-c .sv{font-size:22px;}
.stat-c .su{font-size:9px;}
/* ══════════════════════════════
FILTER BAR
══════════════════════════════ */
.filter-bar{flex-wrap:wrap;gap:7px;direction:rtl;}
.filter-bar select{flex:1;min-width:120px;font-size:13px;padding:11px 13px 11px 30px;min-height:44px;direction:rtl;}
.filter-btn{font-size:11px;padding:9px 12px;min-height:44px;border-radius:var(--r8);flex-shrink:0;}
.view-toggle{flex-shrink:0;}
/* ══════════════════════════════
HISTORY CARDS
══════════════════════════════ */
.hcard{width:100%;border-radius:var(--r12);}
.hcard-top{padding:12px 13px;direction:rtl;gap:10px;}
.hc-num{width:40px;height:40px;font-size:12px;}
.hc-info{flex:1;min-width:0;text-align:right;}
.hc-name{font-size:13px;font-weight:700;}
.hc-sub{font-size:10px;color:var(--t3);}
.hc-right{flex-shrink:0;text-align:left;display:flex;flex-direction:column;align-items:flex-end;}
.hc-price{font-size:14px;font-weight:800;color:var(--g1);}
.hc-pay{font-size:9.5px;color:var(--t3);}
.hc-time{font-size:9px;color:var(--t4);}
.hcard-acts{direction:rtl;}
.ha{padding:9px 6px;font-size:11px;font-weight:700;min-height:42px;}
/* ══════════════════════════════
TICKET CARDS
══════════════════════════════ */
.ticket-grid{grid-template-columns:1fr;}
.tkcard{border-radius:var(--r12);direction:rtl;}
.tkcard-name,.tkcard-phone{text-align:right;}
.tkcard-grid{grid-template-columns:1fr 1fr;}
.tkci{text-align:right;}
/* ══════════════════════════════
DAY GROUP
══════════════════════════════ */
.dg-hdr{padding:10px 13px;border-radius:var(--r10);}
.dg-date{font-size:13px;font-weight:800;}
.dg-total{font-size:13px;font-weight:800;}
/* ══════════════════════════════
VAT / CASH / CHARTS
══════════════════════════════ */
.vat-grid{grid-template-columns:1fr;gap:10px;}
.vat-card,.cb-row,.cash-box{direction:rtl;text-align:right;}
.vat-row .vv{text-align:left;}
.cb-val{text-align:left;}
.cb-bal-val{font-size:20px;text-align:left;}
.bar-row{direction:rtl;gap:8px;}
.bar-label{width:70px;font-size:10px;text-align:right;flex-shrink:0;}
.bar-track{flex:1;height:18px;border-radius:5px;}
.bar-val{width:55px;font-size:10px;flex-shrink:0;text-align:left;}
/* ══════════════════════════════
TABLE
══════════════════════════════ */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl{font-size:11px;min-width:520px;}
.tbl th,.tbl td{padding:9px 10px;text-align:right;}
/* ══════════════════════════════
MODAL — bottom sheet style
══════════════════════════════ */
.overlay{padding:0;align-items:flex-end;}
.modal{
padding:20px 16px 24px;
border-radius:var(--r20) var(--r20) 0 0;
max-width:100%;width:100%;margin:0;
direction:rtl;text-align:right;
/* handle bar */
padding-top:28px;
position:relative;
}
.modal::before{
content:'';
position:absolute;top:10px;left:50%;
transform:translateX(-50%);
width:40px;height:4px;
background:var(--d6);border-radius:2px;
}
.modal-h{direction:rtl;}
.modal-title{font-size:15px;font-weight:800;}
.modal-acts{direction:rtl;gap:9px;}
.modal .fgrid{grid-template-columns:1fr;}
.modal .f input,.modal .f select,.modal .f textarea{min-height:50px;font-size:15px;}
/* ══════════════════════════════
MISC
══════════════════════════════ */
.ndc{direction:rtl;text-align:right;border-radius:var(--r12);}
.rep-filters{
flex-wrap:nowrap;overflow-x:auto;
scrollbar-width:none;gap:6px;direction:rtl;
padding-bottom:2px;
}
.rep-filters::-webkit-scrollbar{display:none;}
.rep-filter-btn{flex-shrink:0;padding:9px 14px;font-size:12px;min-height:42px;border-radius:20px;}
.exp-card{direction:rtl;}
.exp-info,.exp-title,.exp-meta{text-align:right;}
.idc-stats{grid-template-columns:repeat(3,1fr);gap:6px;}
.idc-stat{padding:8px 6px;}
.idc-stat .sl{font-size:9px;}
.idc-stat .sv{font-size:14px;}
.idc-row{direction:rtl;}
.drag-hint{display:none;}
.empty{direction:rtl;text-align:center;}
.flash{direction:rtl;text-align:right;}
.site-footer{padding:14px 12px;font-size:10px;text-align:center;}
.pk{min-height:52px;font-size:18px;}
/* ── LOGIN on mobile ── */
.login-wrap{max-width:100%;}
.login-hero{padding:28px 20px 22px;}
.lh-logo{width:64px;height:64px;font-size:30px;border-radius:16px;}
.lh-name{font-size:19px;}
.login-body{padding:22px 18px 18px;}
.lg label{text-align:right;font-size:11px;width:100%;}
.lg-input input{direction:rtl;text-align:right;padding:13px 42px 13px 14px;font-size:16px;min-height:52px;}
.lg-icon{right:13px;left:auto;}
.pw-eye{left:13px;right:auto;}
.btn-lg{min-height:52px;font-size:16px;border-radius:var(--r12);}
.btn-resend{min-height:46px;}
.lf-btns{flex-direction:row;gap:8px;justify-content:center;}
.lf-btn{padding:9px 14px;font-size:11px;}
}
/* ══ TABLET 641-1023px ══ */
@media(min-width:641px) and (max-width:1023px){
.sidebar{display:none;} .mob-tabs{display:flex;} .day-bar{display:flex;}
.hdr-day{display:block;} .hdr-stat{display:block;} .bot-nav{display:none;}
.content{padding-bottom:0;}
.pane{padding:2px;gap:10px;}
.fgrid{grid-template-columns:1fr 1fr;}
.desk-form-grid{display:flex;flex-direction:column;gap:16px;} .desk-form-right{position:static;}
.stats-row{grid-template-columns:repeat(2,1fr);}
.ticket-grid{grid-template-columns:repeat(2,1fr);}
.vat-grid{grid-template-columns:1fr 1fr;}
.mob-tabs{padding:0 4px;background:var(--d1);border-bottom:1px solid var(--bdr);}
.mob-tab{padding:12px 14px;font-size:12px;}
}
/* ══ DESKTOP 1024px+ ══ */
@media(min-width:1024px){
.sidebar{display:flex;} .mob-tabs{display:none;} .day-bar{display:none;}
.hdr-day{display:block;} .hdr-stat{display:block;} .bot-nav{display:none;}
.content{padding-bottom:0;}
.pane{padding:2px;gap:14px;}
.stats-row{grid-template-columns:repeat(4,1fr);}
.ticket-grid{grid-template-columns:repeat(3,1fr);}
.vat-grid{grid-template-columns:1fr 1fr;}
#inc-body .vat-grid,#rep-body .vat-grid{grid-template-columns:1fr 1fr;}
}
/* ══════════════════════════════════════════════════
LAUNCHER SCREEN
══════════════════════════════════════════════════ */
#s-launcher{
flex-direction:column;align-items:center;justify-content:center;
background:var(--d0);
background-image:
radial-gradient(ellipse 80% 60% at 50% -5%,rgba(201,168,76,.11),transparent 55%),
radial-gradient(ellipse 40% 40% at 90% 90%,rgba(201,168,76,.06),transparent 60%),
repeating-linear-gradient(45deg,transparent,transparent 40px,rgba(201,168,76,.015) 40px,rgba(201,168,76,.015) 41px);
padding:2px 2px;min-height:100vh;
}
.lnch-wrap{width:100%;max-width:640px;animation:fadeUp .5s ease;}
.lnch-header{text-align:center;margin-bottom:32px;}
.lnch-logo{
width:72px;height:72px;
background:linear-gradient(135deg,var(--g2),var(--g1),var(--g3));
border-radius:20px;display:flex;align-items:center;justify-content:center;
font-size:34px;margin:0 auto 16px;
box-shadow:0 8px 32px rgba(201,168,76,.4),0 0 60px rgba(201,168,76,.12);
}
.lnch-name{font-family:var(--font);font-size:24px;font-weight:900;color:var(--g2);}
.lnch-sub{font-size:12px;color:var(--t3);margin-top:6px;letter-spacing:.4px;}
/* Day badge */
.lnch-day{
display:inline-flex;align-items:center;gap:7px;
background:var(--d3);border:1px solid var(--bdr);
border-radius:20px;padding:6px 14px;
font-size:11px;color:var(--t2);font-weight:600;
margin-top:12px;
}
.lnch-day-dot{width:7px;height:7px;border-radius:50%;background:var(--gr);box-shadow:0 0 6px var(--gr);}
/* Stats row */
.lnch-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
margin-bottom:28px;
}
.lnch-stat{
background:var(--d3);border:1px solid var(--bdr);
border-radius:var(--r12);padding:14px 12px;text-align:center;
position:relative;overflow:hidden;
}
.lnch-stat::before{
content:'';position:absolute;top:0;right:0;
width:3px;height:100%;background:var(--ls-c,var(--g1));
}
.lnch-stat .ls-v{font-family:var(--font);font-size:26px;font-weight:900;color:var(--t1);}
.lnch-stat .ls-l{font-size:10px;color:var(--t3);margin-top:3px;font-weight:600;}
/* Mode cards */
.lnch-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
@media(max-width:480px){.lnch-cards{grid-template-columns:1fr;}}
.lnch-card{
background:linear-gradient(150deg,var(--d3),var(--d2));
border:1px solid var(--bdr);border-radius:var(--r20);
padding:28px 22px;text-align:center;cursor:pointer;
position:relative;overflow:hidden;
transition:transform .2s,box-shadow .2s,border-color .2s;
}
.lnch-card:hover{transform:translateY(-4px);border-color:var(--bdr2);box-shadow:0 12px 40px rgba(0,0,0,.5);}
.lnch-card:active{transform:scale(.98);}
.lnch-card.rec-card::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 120% 80% at 50% -20%,rgba(201,168,76,.12),transparent 60%);
}
.lnch-card.dash-card::before{
content:'';position:absolute;inset:0;
background:radial-gradient(ellipse 120% 80% at 50% -20%,rgba(59,130,246,.1),transparent 60%);
}
.lnch-card-ico{
width:68px;height:68px;border-radius:18px;
display:flex;align-items:center;justify-content:center;
font-size:30px;margin:0 auto 16px;position:relative;
}
.rec-card .lnch-card-ico{
background:linear-gradient(135deg,rgba(201,168,76,.2),rgba(201,168,76,.08));
border:2px solid rgba(201,168,76,.25);
box-shadow:0 0 30px rgba(201,168,76,.15);
}
.dash-card .lnch-card-ico{
background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.06));
border:2px solid rgba(59,130,246,.2);
box-shadow:0 0 30px rgba(59,130,246,.12);
}
.lnch-card-title{font-family:var(--font);font-size:18px;font-weight:900;margin-bottom:8px;position:relative;}
.rec-card .lnch-card-title{color:var(--g2);}
.dash-card .lnch-card-title{color:var(--bl);}
.lnch-card-desc{font-size:11px;color:var(--t3);line-height:1.7;position:relative;}
.lnch-card-badge{
display:inline-flex;align-items:center;gap:5px;
border-radius:20px;padding:5px 13px;
font-size:11px;font-weight:700;margin-top:14px;position:relative;
transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.rec-card .lnch-card-badge{background:rgba(201,168,76,.12);color:var(--g1);border:1px solid rgba(201,168,76,.22);}
.dash-card .lnch-card-badge{background:rgba(59,130,246,.1);color:var(--bl);border:1px solid rgba(59,130,246,.18);}
/* Dynamic protection states for dashboard card badge */
.dash-card .lnch-card-badge.is-protected{
background:rgba(34,197,94,.1);
color:#4ade80;
border-color:rgba(34,197,94,.25);
}
.dash-card .lnch-card-badge.is-unprotected{
background:rgba(245,158,11,.1);
color:#fbbf24;
border-color:rgba(245,158,11,.25);
}
.dash-card .lnch-card-badge.is-loading{
background:rgba(120,120,120,.08);
color:var(--t3);
border-color:rgba(120,120,120,.15);
}
/* Footer */
.lnch-footer{text-align:center;margin-top:24px;font-size:10px;color:var(--t4);line-height:2;}
.lnch-logout{
display:inline-flex;align-items:center;gap:5px;
background:rgba(239,68,68,.06);border:1px solid rgba(239,68,68,.15);
color:var(--rd);border-radius:8px;padding:6px 14px;
font-size:11px;font-weight:700;cursor:pointer;margin-top:10px;
}
/*════
LAUNCHER V2 — Luxurious & Role-aware
════*/
.lnch-v2{
position:relative;
max-width:780px;
padding:0;
}
/* Animated background orbs */
.lnch-orb{
position:fixed;
border-radius:50%;
filter:blur(80px);
pointer-events:none;
z-index:0;
opacity:.5;
}
.lnch-orb-1{
top:-100px;right:-100px;
width:400px;height:400px;
background:radial-gradient(circle,rgba(201,168,76,.25),transparent 70%);
animation:lnchFloat1 14s ease-in-out infinite;
}
.lnch-orb-2{
bottom:-150px;left:-100px;
width:450px;height:450px;
background:radial-gradient(circle,rgba(168,85,247,.18),transparent 70%);
animation:lnchFloat2 18s ease-in-out infinite;
}
.lnch-orb-3{
top:30%;left:50%;
width:350px;height:350px;
background:radial-gradient(circle,rgba(59,130,246,.12),transparent 70%);
animation:lnchFloat3 22s ease-in-out infinite;
}
@keyframes lnchFloat1{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(-30px,30px) scale(1.1);}
}
@keyframes lnchFloat2{
0%,100%{transform:translate(0,0) scale(1);}
50%{transform:translate(40px,-30px) scale(1.15);}
}
@keyframes lnchFloat3{
0%,100%{transform:translate(-50%,-50%) scale(1);}
50%{transform:translate(-30%,-60%) scale(1.2);}
}
@media(prefers-reduced-motion:reduce){
.lnch-orb-1, .lnch-orb-2, .lnch-orb-3{animation:none;}
}
.lnch-v2 > *:not(.lnch-orb){position:relative;z-index:1;}
/* TOP BAR — greeting + actions */
.lnch-top{
display:flex;align-items:center;justify-content:space-between;
gap:14px;
padding:18px 4px 12px;
margin-bottom:24px;
flex-wrap:wrap;
}
.lnch-top-left{
display:flex;flex-direction:column;gap:4px;
flex:1;min-width:0;
}
.lnch-greeting{
font-family:var(--font);
font-size:13px;
color:var(--t3);
font-weight:600;
}
.lnch-user-name{
font-family:var(--font);
font-size:18px;
font-weight:900;
color:var(--t1);
letter-spacing:.2px;
}
.lnch-role-pill{
display:inline-flex;align-items:center;gap:6px;
padding:4px 11px;
border-radius:20px;
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.25);
font-size:10.5px;font-weight:800;
color:var(--g2);
margin-top:5px;
align-self:flex-start;
}
.lnch-role-pill.role-admin{
background:rgba(201,168,76,.12);
border-color:rgba(201,168,76,.3);
color:var(--g2);
}
.lnch-role-pill.role-accountant{
background:rgba(59,130,246,.1);
border-color:rgba(59,130,246,.25);
color:#60A5FA;
}
.lnch-role-pill.role-receptionist{
background:rgba(168,85,247,.1);
border-color:rgba(168,85,247,.25);
color:#c084fc;
}
.lnch-top-right{
display:flex;align-items:center;gap:8px;
flex-shrink:0;
}
.lnch-money-btn, .lnch-logout-btn, .lnch-theme-btn{
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
border-radius:12px;
cursor:pointer;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
color:var(--t2);
touch-action:manipulation;
}
.lnch-money-btn:hover, .lnch-theme-btn:hover{
background:rgba(201,168,76,.1);
color:var(--g2);
border-color:rgba(201,168,76,.3);
transform:translateY(-2px);
}
.lnch-theme-btn:hover svg{
animation:themeBtnSpin .6s ease;
}
@keyframes themeBtnSpin{
from{transform:rotate(0deg);}
to{transform:rotate(20deg);}
}
.lnch-logout-btn{color:#f87171;border-color:rgba(239,68,68,.2);}
.lnch-logout-btn:hover{
background:linear-gradient(135deg,#EF4444,#b91c1c);
color:#fff;
border-color:transparent;
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(239,68,68,.35);
}
.lnch-money-btn:active, .lnch-logout-btn:active, .lnch-theme-btn:active{transform:scale(.92);}
body.money-hidden .lnch-money-btn{
background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(159,126,28,.08));
color:var(--g2);
border-color:rgba(201,168,76,.4);
}
/* BRAND section */
.lnch-v2 .lnch-brand{
text-align:center;
margin-bottom:28px;
}
.lnch-v2 .lnch-logo{
width:88px;height:88px;
margin:0 auto 16px;
background:linear-gradient(135deg,var(--g2),var(--g1),var(--g3));
border-radius:24px;
display:flex;align-items:center;justify-content:center;
font-size:42px;
overflow:hidden;
box-shadow:
0 12px 36px rgba(201,168,76,.45),
0 0 80px rgba(201,168,76,.15),
0 0 0 1px rgba(255,255,255,.1) inset;
animation:lnchLogoPulse 4s ease-in-out infinite;
}
.lnch-v2 .lnch-logo img{
width:100%;height:100%;
object-fit:contain;
border-radius:inherit;
background:#fff;
}
@keyframes lnchLogoPulse{
0%,100%{box-shadow:0 12px 36px rgba(201,168,76,.45),0 0 80px rgba(201,168,76,.15),0 0 0 1px rgba(255,255,255,.1) inset;}
50%{box-shadow:0 14px 44px rgba(201,168,76,.55),0 0 100px rgba(201,168,76,.22),0 0 0 1px rgba(255,255,255,.15) inset;}
}
.lnch-v2 .lnch-name{
font-family:var(--font);
font-size:28px;
font-weight:900;
color:var(--g2);
letter-spacing:.3px;
margin-bottom:6px;
}
.lnch-v2 .lnch-sub{
font-size:12px;
color:var(--t3);
letter-spacing:.4px;
margin-bottom:14px;
}
.lnch-v2 .lnch-day{
display:inline-flex;align-items:center;gap:7px;
background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(34,197,94,.02));
border:1px solid rgba(34,197,94,.22);
border-radius:20px;padding:6px 14px;
font-size:11px;color:#4ade80;font-weight:700;
}
.lnch-v2 .lnch-day-dot{
width:7px;height:7px;border-radius:50%;
background:var(--gr);
box-shadow:0 0 6px var(--gr);
animation:lnchDayPulse 2.5s ease-in-out infinite;
}
@keyframes lnchDayPulse{
0%,100%{opacity:1;transform:scale(1);}
50%{opacity:.5;transform:scale(.8);}
}
/* STATS row V2 */
.lnch-v2 .lnch-stats{
display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
margin-bottom:28px;
}
.lnch-v2 .lnch-stat{
background:linear-gradient(155deg,var(--d3) 0%, var(--d4) 100%);
border:1px solid var(--bdr);
border-radius:14px;
padding:16px 14px;
text-align:center;
position:relative;
overflow:hidden;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.lnch-v2 .lnch-stat:hover{
border-color:var(--ls-c);
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.lnch-v2 .lnch-stat::before{
content:'';position:absolute;
top:0;right:0;
width:3px;height:100%;
background:var(--ls-c,var(--g1));
box-shadow:0 0 12px var(--ls-c,var(--g1));
}
.lnch-stat-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
border-radius:10px;
color:var(--ls-c,var(--g1));
margin:0 auto 8px;
opacity:.85;
}
.lnch-v2 .lnch-stat .ls-v{
font-family:var(--font);
font-size:24px;
font-weight:900;
color:var(--t1);
line-height:1;
}
.lnch-v2 .lnch-stat .ls-l{
font-size:10.5px;
color:var(--t3);
margin-top:5px;
font-weight:700;
}
/* CARDS V2 */
.lnch-cards-v2{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:14px;
margin-bottom:24px;
}
.lnch-card-v2{
position:relative;
background:linear-gradient(150deg,var(--d3),var(--d2));
border:1px solid var(--bdr);
border-radius:22px;
padding:0;
cursor:pointer;
overflow:hidden;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
}
.lnch-card-v2:hover{
transform:translateY(-4px);
box-shadow:0 16px 40px rgba(0,0,0,.35);
}
.lnch-card-v2:active{transform:scale(.97);}
.lnch-card-bg{
position:absolute;
top:-50px;right:-50px;
width:200px;height:200px;
border-radius:50%;
opacity:.5;
filter:blur(40px);
transition:all .4s ease;
pointer-events:none;
}
.rec-card .lnch-card-bg{background:radial-gradient(circle,rgba(201,168,76,.4),transparent);}
.dash-card .lnch-card-bg{background:radial-gradient(circle,rgba(59,130,246,.35),transparent);}
.lnch-card-v2:hover .lnch-card-bg{
opacity:.8;
transform:scale(1.3);
}
.lnch-card-glow{
position:absolute;
inset:-1px;
border-radius:inherit;
background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,.04) 50%,transparent 60%);
opacity:0;
transition:opacity .35s ease;
pointer-events:none;
}
.lnch-card-v2:hover .lnch-card-glow{opacity:1;}
.lnch-card-content{
position:relative;
z-index:1;
padding:26px 22px;
text-align:center;
}
.lnch-card-ico-v2{
width:64px;height:64px;
border-radius:18px;
display:flex;align-items:center;justify-content:center;
margin:0 auto 16px;
transition:transform .3s ease;
}
.rec-card .lnch-card-ico-v2{
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
box-shadow:0 8px 22px rgba(201,168,76,.4);
}
.dash-card .lnch-card-ico-v2{
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
box-shadow:0 8px 22px rgba(59,130,246,.4);
}
.lnch-card-v2:hover .lnch-card-ico-v2{transform:scale(1.1) rotate(-5deg);}
.lnch-card-v2 .lnch-card-title{
font-family:var(--font);
font-size:20px;
font-weight:900;
margin-bottom:8px;
}
.rec-card .lnch-card-title{color:var(--g2);}
.dash-card .lnch-card-title{color:#60A5FA;}
.lnch-card-v2 .lnch-card-desc{
font-size:11.5px;
color:var(--t3);
line-height:1.7;
margin-bottom:14px;
}
.lnch-card-cta{
display:inline-flex;align-items:center;gap:7px;
padding:9px 16px;
border-radius:11px;
font-family:var(--font);
font-size:11.5px;
font-weight:800;
margin-bottom:12px;
transition:all .25s ease;
}
.rec-card .lnch-card-cta{
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
box-shadow:0 4px 14px rgba(201,168,76,.3);
}
.dash-card .lnch-card-cta{
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
box-shadow:0 4px 14px rgba(59,130,246,.3);
}
.lnch-card-v2:hover .lnch-card-cta{
transform:translateY(-1px);
}
.lnch-card-v2 .lnch-card-badge{
display:inline-flex;align-items:center;gap:5px;
padding:4px 11px;
border-radius:20px;
font-size:10.5px;
font-weight:800;
margin-top:0;
}
/* QUICK ACTIONS BAR */
/*
🆕🆕🆕 FUTURISTIC LAUNCHER V3 — Holographic · Cyberpunk · Premium
*/
.lnch-wrap.lnch-v3{
position:relative;
max-width:1080px;
margin:0 auto;
padding:2px 2px 14px;
min-height:100vh;
overflow:hidden;
}
/* Background grid - cyberpunk style */
.lnch-bg-grid{
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px);
background-size:42px 42px;
mask-image:radial-gradient(ellipse at center top, black 0%, transparent 70%);
-webkit-mask-image:radial-gradient(ellipse at center top, black 0%, transparent 70%);
animation:lnch3GridMove 60s linear infinite;
pointer-events:none;
z-index:0;
}
@keyframes lnch3GridMove{
from{background-position:0 0;}
to{background-position:42px 42px;}
}
/* Glowing orbs */
.lnch-bg-glow{
position:fixed;
border-radius:50%;
filter:blur(80px);
pointer-events:none;
z-index:0;
}
.lnch-bg-glow-1{
width:500px;height:500px;
background:radial-gradient(circle, rgba(201,168,76,.18) 0%, transparent 70%);
top:-150px;right:-100px;
animation:lnch3OrbFloat1 18s ease-in-out infinite;
}
.lnch-bg-glow-2{
width:450px;height:450px;
background:radial-gradient(circle, rgba(59,130,246,.13) 0%, transparent 70%);
top:30%;left:-150px;
animation:lnch3OrbFloat2 22s ease-in-out infinite;
}
.lnch-bg-glow-3{
width:380px;height:380px;
background:radial-gradient(circle, rgba(168,85,247,.13) 0%, transparent 70%);
bottom:-100px;right:30%;
animation:lnch3OrbFloat3 25s ease-in-out infinite;
}
@keyframes lnch3OrbFloat1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,30px) scale(1.15);}}
@keyframes lnch3OrbFloat2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-30px) scale(1.15);}}
@keyframes lnch3OrbFloat3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,-40px) scale(1.18);}}
/* Background particles */
.lnch-bg-particles{position:fixed;inset:0;pointer-events:none;z-index:0;}
.lnch-bp{
position:absolute;
width:3px;height:3px;
background:radial-gradient(circle, #fde68a 0%, transparent 70%);
border-radius:50%;
animation:lnch3Particle 12s linear infinite;
opacity:0;
}
.lnch-bp:nth-child(1){left:15%;animation-delay:0s;animation-duration:14s;}
.lnch-bp:nth-child(2){left:35%;animation-delay:2.5s;animation-duration:16s;}
.lnch-bp:nth-child(3){left:55%;animation-delay:5s;animation-duration:13s;}
.lnch-bp:nth-child(4){left:75%;animation-delay:7.5s;animation-duration:15s;}
.lnch-bp:nth-child(5){left:90%;animation-delay:10s;animation-duration:18s;}
.lnch-bp:nth-child(6){left:25%;animation-delay:12s;animation-duration:14s;}
@keyframes lnch3Particle{
0%{transform:translateY(110vh) scale(0);opacity:0;}
10%{opacity:1;}
90%{opacity:.6;}
100%{transform:translateY(-20vh) scale(1.4);opacity:0;}
}
/* All content sits above bg layers */
.lnch-wrap.lnch-v3 > *:not(.lnch-bg-grid):not(.lnch-bg-glow):not(.lnch-bg-particles){
position:relative;
z-index:5;
}
/* ═══ TOP BAR ═══ */
.lnch3-topbar{
display:flex;
flex-direction:column;
align-items:flex-start;
gap:14px;
width:100%;
margin-bottom:18px;
position:relative;
z-index:20;
direction:ltr; /* 🆕 Force LTR so flex-start = LEFT visually */
animation:lnch3FadeIn .5s cubic-bezier(.16,1,.3,1);
}
@keyframes lnch3FadeIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}
/* ROW 1: Controls (toggle + actions side by side) */
.lnch3-topbar-controls{
display:flex;
align-items:center;
gap:10px;
direction:ltr; /* Toggle on LEFT, actions expand to RIGHT */
min-height:50px;
}
/* Hamburger toggle */
.lnch3-menu-toggle{
position:relative;
width:46px;
height:46px;
flex-shrink:0;
background:linear-gradient(155deg, rgba(201,168,76,.18) 0%, rgba(201,168,76,.06) 100%);
border:1.5px solid rgba(201,168,76,.35);
border-radius:13px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all .3s cubic-bezier(.4,0,.2,1);
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
-webkit-tap-highlight-color:transparent;
z-index:10;
}
.lnch3-menu-toggle::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at top left, rgba(232,201,106,.25), transparent 70%);
opacity:0;
transition:opacity .3s;
}
.lnch3-menu-toggle:hover{
border-color:rgba(201,168,76,.55);
background:linear-gradient(155deg, rgba(201,168,76,.25) 0%, rgba(201,168,76,.08) 100%);
transform:translateY(-1px);
}
.lnch3-menu-toggle:hover::before{opacity:1;}
.lnch3-menu-toggle:active{transform:scale(.93);}
.lnch3-menu-toggle-glow{
position:absolute;
inset:-2px;
border-radius:13px;
background:conic-gradient(from 0deg, transparent, rgba(232,201,106,.5), transparent, transparent);
opacity:0;
z-index:-1;
}
.lnch3-menu-toggle.is-open .lnch3-menu-toggle-glow{
opacity:1;
animation:lnchMenuGlowSpin 2s linear infinite;
}
@keyframes lnchMenuGlowSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.lnch3-menu-toggle-icon{
display:flex;
flex-direction:column;
gap:4px;
width:18px;
height:13px;
justify-content:center;
position:relative;
z-index:2;
}
.lnch3-menu-toggle-icon span{
width:100%;
height:2.5px;
background:linear-gradient(90deg, #E8C96A, #C9A84C);
border-radius:2px;
transition:all .35s cubic-bezier(.68,-.55,.27,1.55);
transform-origin:center;
box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.lnch3-menu-toggle-icon span:nth-child(1){width:80%;}
.lnch3-menu-toggle-icon span:nth-child(3){width:65%;}
.lnch3-menu-toggle.is-open .lnch3-menu-toggle-icon span:nth-child(1){
width:100%;
transform:translateY(6.5px) rotate(45deg);
}
.lnch3-menu-toggle.is-open .lnch3-menu-toggle-icon span:nth-child(2){
opacity:0;
transform:scaleX(0);
}
.lnch3-menu-toggle.is-open .lnch3-menu-toggle-icon span:nth-child(3){
width:100%;
transform:translateY(-6.5px) rotate(-45deg);
}
/* Actions bar — expands NEXT to toggle (to the RIGHT) */
.lnch3-actions-bar{
display:flex;
gap:8px;
flex-direction:row;
align-items:center;
max-width:0;
opacity:0;
overflow:hidden;
transition:max-width .45s cubic-bezier(.4,0,.2,1), opacity .25s, padding .3s;
padding:0;
direction:ltr;
flex-shrink:0;
}
.lnch3-actions-bar.is-open{
max-width:340px;
opacity:1;
padding:0 4px;
}
.lnch3-menu-action-btn{
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
color:rgba(255,255,255,.85);
cursor:pointer;
transition:background .25s, border-color .25s, transform .25s, box-shadow .25s, color .25s;
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
position:relative;
transform:translateX(-20px) scale(.6);
opacity:0;
box-shadow:0 3px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
}
.lnch3-menu-action-btn-logout{color:#fca5a5;}
.lnch3-actions-bar.is-open .lnch3-menu-action-btn{
transform:translateX(0) scale(1);
opacity:1;
}
.lnch3-actions-bar.is-open .lnch3-menu-action-btn:nth-child(1){transition:transform .4s cubic-bezier(.34,1.56,.64,1) .08s, opacity .3s .08s, background .25s, border-color .25s, color .25s;}
.lnch3-actions-bar.is-open .lnch3-menu-action-btn:nth-child(2){transition:transform .4s cubic-bezier(.34,1.56,.64,1) .14s, opacity .3s .14s, background .25s, border-color .25s, color .25s;}
.lnch3-actions-bar.is-open .lnch3-menu-action-btn:nth-child(3){transition:transform .4s cubic-bezier(.34,1.56,.64,1) .2s, opacity .3s .2s, background .25s, border-color .25s, color .25s;}
.lnch3-actions-bar.is-open .lnch3-menu-action-btn:nth-child(4){transition:transform .4s cubic-bezier(.34,1.56,.64,1) .26s, opacity .3s .26s, background .25s, border-color .25s, color .25s;}
.lnch3-actions-bar.is-open .lnch3-menu-action-btn:nth-child(5){transition:transform .4s cubic-bezier(.34,1.56,.64,1) .32s, opacity .3s .32s, background .25s, border-color .25s, color .25s;}
.lnch3-menu-action-btn:hover{
background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
border-color:rgba(255,255,255,.18);
color:#fff;
transform:translateY(-2px) scale(1) !important;
box-shadow:0 6px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
}
.lnch3-menu-action-btn-logout:hover{
color:#ef4444;
border-color:rgba(239,68,68,.3);
background:linear-gradient(180deg, rgba(239,68,68,.08) 0%, rgba(239,68,68,.02) 100%);
}
.lnch3-menu-action-btn:active{transform:scale(.92) !important;}
/* 🆕 ROW 2: LUXURIOUS IDENTITY CHIP — BELOW the controls, LARGER and PROMINENT */
.lnch3-id-chip{
align-self:flex-end; /* 🆕 RIGHT side (since topbar is LTR, flex-end = RIGHT) */
display:flex;
align-items:center;
gap:14px;
padding:11px 16px 11px 11px;
background:linear-gradient(135deg,
rgba(201,168,76,.18) 0%,
rgba(201,168,76,.06) 50%,
rgba(201,168,76,.14) 100%);
background-size:200% 200%;
border:1.5px solid rgba(201,168,76,.4);
border-radius:50px;
direction:rtl;
position:relative;
overflow:hidden;
box-shadow:
0 8px 24px rgba(0,0,0,.35),
inset 0 1px 0 rgba(255,255,255,.1),
0 0 0 1px rgba(201,168,76,.1);
transition:all .35s cubic-bezier(.4,0,.2,1);
animation:idChipBgFlow 6s ease infinite;
}
@keyframes idChipBgFlow{
0%, 100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.lnch3-id-chip:hover{
border-color:rgba(201,168,76,.6);
transform:translateY(-1px);
box-shadow:
0 12px 30px rgba(0,0,0,.4),
0 0 0 3px rgba(201,168,76,.12),
inset 0 1px 0 rgba(255,255,255,.12);
}
/* Shine sweep */
.lnch3-id-chip-shine{
position:absolute;
top:0;
left:-100%;
width:50%;
height:100%;
background:linear-gradient(90deg, transparent, rgba(232,201,106,.22) 50%, transparent);
transform:skewX(-20deg);
animation:idChipShine 5s ease-in-out infinite;
pointer-events:none;
}
@keyframes idChipShine{
0%, 100%{left:-100%;}
50%{left:150%;}
}
/* Avatar — LARGER & more impressive */
.lnch3-id-chip-avatar{
width:48px;
height:48px;
min-width:48px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, #F4D079 0%, #E8C96A 35%, #C9A84C 100%);
border-radius:50%;
font-family:var(--font);
font-size:22px;
font-weight:900;
color:#0E1014;
flex-shrink:0;
box-shadow:
0 6px 16px rgba(201,168,76,.5),
inset 0 2px 0 rgba(255,255,255,.5),
inset 0 -3px 6px rgba(0,0,0,.25),
0 0 0 2px rgba(232,201,106,.15);
position:relative;
z-index:2;
letter-spacing:-.5px;
text-shadow:0 1px 1px rgba(255,255,255,.4);
overflow:hidden;
}
.lnch3-id-chip-avatar img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
}
/* Role badge — more prominent */
.lnch3-id-chip-role{
display:inline-flex;
align-items:center;
gap:5px;
padding:5px 11px;
background:linear-gradient(135deg, rgba(201,168,76,.25), rgba(201,168,76,.1));
border:1px solid rgba(201,168,76,.45);
border-radius:16px;
font-family:var(--font);
font-size:11.5px;
font-weight:800;
color:#E8C96A;
flex-shrink:0;
white-space:nowrap;
position:relative;
z-index:2;
box-shadow:0 2px 6px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
.lnch3-id-chip-role-ico{font-size:11px;line-height:1;}
/* Vertical divider */
.lnch3-id-chip-divider{
width:1px;
height:34px;
background:linear-gradient(180deg, transparent, rgba(201,168,76,.5), transparent);
flex-shrink:0;
position:relative;
z-index:2;
}
/* Text block (name + greeting) */
.lnch3-id-chip-text{
display:flex;
flex-direction:column;
align-items:flex-end;
gap:3px;
min-width:0;
text-align:right;
position:relative;
z-index:2;
}
.lnch3-id-chip-greet{
display:inline-flex;
align-items:center;
gap:5px;
font-size:11px;
color:rgba(232,201,106,.75);
font-weight:700;
line-height:1;
letter-spacing:.3px;
white-space:nowrap;
}
.lnch3-id-chip-greet-emoji{font-size:12px;line-height:1;}
.lnch3-id-chip-name{
font-family:var(--font);
font-size:17px;
font-weight:900;
background:linear-gradient(135deg, #fff 0%, #E8C96A 50%, #C9A84C 100%);
background-size:200% auto;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
line-height:1.15;
letter-spacing:-.3px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:220px;
animation:idChipNameShimmer 4s linear infinite;
}
@keyframes idChipNameShimmer{
0%{background-position:0% 50%;}
100%{background-position:200% 50%;}
}
/* Mobile responsive */
@media(max-width:640px){
.lnch3-menu-toggle{width:44px;height:44px;}
.lnch3-menu-action-btn{width:42px;height:42px;}
.lnch3-actions-bar.is-open{max-width:300px;}
.lnch3-topbar{gap:12px;}
.lnch3-id-chip{padding:9px 14px 9px 9px;gap:11px;}
.lnch3-id-chip-avatar{width:42px;height:42px;font-size:19px;min-width:42px;}
.lnch3-id-chip-greet{font-size:10.5px;}
.lnch3-id-chip-greet-emoji{font-size:11.5px;}
.lnch3-id-chip-name{font-size:15.5px;max-width:170px;}
.lnch3-id-chip-role{padding:4px 9px;font-size:10.5px;}
.lnch3-id-chip-divider{height:30px;}
}
@media(max-width:480px){
.lnch3-menu-toggle{width:42px;height:42px;}
.lnch3-menu-action-btn{width:40px;height:40px;}
.lnch3-actions-bar.is-open{max-width:260px;}
.lnch3-id-chip{padding:8px 12px 8px 8px;gap:10px;}
.lnch3-id-chip-avatar{width:38px;height:38px;font-size:17px;min-width:38px;}
.lnch3-id-chip-name{font-size:14.5px;max-width:140px;}
.lnch3-id-chip-role{padding:3px 8px;font-size:10px;}
.lnch3-id-chip-divider{height:28px;}
}
@media(max-width:380px){
/* On very tight screens, hide greeting label text */
.lnch3-id-chip-greet-txt{display:none;}
.lnch3-id-chip-name{font-size:14px;max-width:120px;}
.lnch3-id-chip-avatar{width:36px;height:36px;font-size:16px;min-width:36px;}
}
/* Legacy CSS — hide old hero-user (now removed) */
.lnch3-hero-user, .lnch3-hero-divider{display:none !important;}
/* ═══ ANNOUNCEMENT STRIP (rolling marquee) ═══ */
.lnch3-ann-strip{
display:flex;
align-items:center;
gap:11px;
padding:10px 14px;
margin-bottom:18px;
background:linear-gradient(90deg,
rgba(201,168,76,.12) 0%,
rgba(201,168,76,.05) 50%,
rgba(201,168,76,.12) 100%);
background-size:200% auto;
border:1px solid rgba(201,168,76,.3);
border-radius:13px;
overflow:hidden;
position:relative;
animation:lnch3StripShine 6s ease-in-out infinite, lnch3FadeIn .6s cubic-bezier(.16,1,.3,1);
}
@keyframes lnch3StripShine{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.lnch3-ann-strip-icon{
width:32px;height:32px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #C9A84C, #9F7E1C);
color:#fff;
border-radius:9px;
box-shadow:0 4px 10px rgba(201,168,76,.4), inset 0 1px 0 rgba(255,255,255,.25);
animation:lnch3StripIcoPulse 2s ease-in-out infinite;
}
@keyframes lnch3StripIcoPulse{
0%,100%{box-shadow:0 4px 10px rgba(201,168,76,.4), inset 0 1px 0 rgba(255,255,255,.25);}
50%{box-shadow:0 4px 18px rgba(201,168,76,.7), inset 0 1px 0 rgba(255,255,255,.25);}
}
.lnch3-ann-strip-lbl{
flex-shrink:0;
font-size:10.5px;
font-weight:900;
color:#fde68a;
letter-spacing:.5px;
padding:3px 9px;
background:rgba(201,168,76,.15);
border:1px solid rgba(201,168,76,.3);
border-radius:7px;
}
.lnch3-ann-strip-track{
flex:1;
overflow:hidden;
position:relative;
min-width:0;
}
.lnch3-ann-strip-content{
white-space:nowrap;
font-size:12.5px;
font-weight:700;
color:var(--t1);
animation:lnch3StripScroll 30s linear infinite;
padding-left:100%;
}
@keyframes lnch3StripScroll{
from{transform:translateX(100%);}
to{transform:translateX(-100%);}
}
/* ═══ CENTER HOLOGRAM HERO ═══ */
.lnch3-hero{
position:relative;
padding:24px 22px;
margin-bottom:18px;
background:
linear-gradient(135deg, rgba(201,168,76,.04) 0%, transparent 50%, rgba(168,85,247,.04) 100%),
linear-gradient(155deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%);
border:1px solid rgba(201,168,76,.2);
border-radius:22px;
overflow:hidden;
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
animation:lnch3FadeIn .7s cubic-bezier(.16,1,.3,1);
box-shadow:
0 20px 50px rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.04);
}
.lnch3-hero::before{
content:'';
position:absolute;
inset:-1px;
background:linear-gradient(135deg, transparent 0%, rgba(201,168,76,.3) 50%, transparent 100%);
border-radius:22px;
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
padding:1px;
pointer-events:none;
opacity:.6;
}
.lnch3-hero-shine{
position:absolute;
top:0;left:-100%;
width:50%;height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
animation:lnch3HeroShine 8s ease-in-out infinite;
pointer-events:none;
}
@keyframes lnch3HeroShine{
0%,100%{left:-100%;}
50%{left:200%;}
}
.lnch3-hero-content{
display:flex;
align-items:center;
gap:18px;
position:relative;
z-index:2;
}
/* Logo stage */
.lnch3-hero-logo-stage{
position:relative;
width:90px;height:90px;
flex-shrink:0;
}
.lnch3-hero-logo-rings{
position:absolute;
inset:-8px;
}
.lnch3-hr-ring{
position:absolute;
inset:0;
border-radius:50%;
}
.lnch3-hr-ring-1{
border:1.5px dashed rgba(201,168,76,.4);
animation:lnch3RingSpin 15s linear infinite;
}
.lnch3-hr-ring-2{
inset:4px;
border:1px solid rgba(201,168,76,.25);
animation:lnch3RingSpin 10s linear infinite reverse;
}
@keyframes lnch3RingSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.lnch3-hero-logo.lh-logo{
position:absolute;
inset:8px;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.1), transparent 50%),
linear-gradient(135deg, #2d2100 0%, #1a1410 100%);
border:1.5px solid rgba(201,168,76,.5);
border-radius:22px;
color:#fbbf24;
font-size:38px;
overflow:hidden;
box-shadow:
0 14px 30px rgba(0,0,0,.5),
0 0 30px rgba(201,168,76,.25),
inset 0 1.5px 0 rgba(255,255,255,.1);
animation:lnch3LogoFloat 4s ease-in-out infinite;
}
@keyframes lnch3LogoFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-3px);}
}
/* Center name + meta */
.lnch3-hero-text{flex:1;min-width:0;}
.lnch3-hero-name{
font-family:var(--font);
font-size:24px;
font-weight:900;
letter-spacing:-.8px;
background:linear-gradient(135deg, #fff 0%, #fde68a 35%, #fbbf24 65%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
animation:lnch3NameShine 5s ease-in-out infinite;
margin-bottom:6px;
line-height:1.2;
}
@keyframes lnch3NameShine{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.lnch3-hero-meta{
display:flex;
align-items:center;
gap:8px;
flex-wrap:wrap;
font-size:11.5px;
color:var(--t3);
font-weight:700;
margin-bottom:10px;
}
.lnch3-hero-meta-item{
display:inline-flex;
align-items:center;
gap:4px;
}
.lnch3-hero-meta-ico{font-size:12px;color:#fbbf24;}
.lnch3-hero-meta-sep{opacity:.3;}
/* Hero pills */
.lnch3-hero-pills{
display:flex;
gap:7px;
flex-wrap:wrap;
}
.lnch3-hero-pill{
display:inline-flex;
align-items:center;
gap:5px;
padding:4px 11px;
border-radius:18px;
font-size:10.5px;
font-weight:800;
letter-spacing:.2px;
}
.lnch3-hero-pill-day{
background:linear-gradient(135deg, rgba(34,197,94,.13), rgba(34,197,94,.04));
border:1px solid rgba(34,197,94,.3);
color:#4ade80;
}
.lnch3-hero-pill-clock{
background:linear-gradient(135deg, rgba(168,85,247,.13), rgba(168,85,247,.04));
border:1px solid rgba(168,85,247,.3);
color:#c084fc;
}
.lnch3-pill-dot{
width:6px;height:6px;
border-radius:50%;
background:#4ade80;
box-shadow:0 0 8px #4ade80;
animation:lnch3DotPulse 1.5s ease-in-out infinite;
}
@keyframes lnch3DotPulse{
0%,100%{opacity:.6;transform:scale(1);}
50%{opacity:1;transform:scale(1.25);}
}
/* ═══ LIVE STATS - 4 cards ═══ */
.lnch3-stats{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:10px;
margin-bottom:18px;
animation:lnch3FadeIn .8s cubic-bezier(.16,1,.3,1);
}
.lnch3-stat{
position:relative;
padding:14px;
background:linear-gradient(155deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%);
border:1px solid rgba(255,255,255,.06);
border-radius:14px;
overflow:hidden;
transition:all .3s cubic-bezier(.16,1,.3,1);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.lnch3-stat:hover{
transform:translateY(-3px);
box-shadow:0 12px 28px rgba(0,0,0,.4);
}
.lnch3-stat-shine{
position:absolute;
top:0;left:-100%;
width:50%;height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
pointer-events:none;
}
.lnch3-stat:hover .lnch3-stat-shine{
animation:lnch3StatShine 1s ease-in-out;
}
@keyframes lnch3StatShine{from{left:-100%;}to{left:200%;}}
.lnch3-stat-h{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:10px;
}
.lnch3-stat-ico{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
color:#fff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
flex-shrink:0;
}
.lnch3-stat-ico svg{display:block;width:22px;height:22px;}
.lnch3-stat-pulse{
width:6px;height:6px;
border-radius:50%;
background:#fbbf24;
box-shadow:0 0 10px currentColor;
animation:lnch3DotPulse 1.8s ease-in-out infinite;
}
.lnch3-stat-v{
font-family:var(--font);
font-size:22px;
font-weight:900;
color:#fff;
letter-spacing:-.7px;
margin-bottom:3px;
line-height:1;
}
/* 🆕 Value row with inline Riyal symbol */
.lnch3-stat-v-currency{
display:flex;
align-items:baseline;
gap:5px;
flex-wrap:nowrap;
}
.lnch3-stat-v-currency span{
line-height:1;
}
.lnch3-stat-riyal{
flex-shrink:0;
color:#86efac;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
vertical-align:baseline;
transform:translateY(2px);
}
.lnch3-stat-l{
font-size:10.5px;
color:var(--t3);
font-weight:700;
letter-spacing:.2px;
}
/* Color variants */
.lnch3-stat-blue .lnch3-stat-ico{background:linear-gradient(135deg, #3b82f6, #1d4ed8);}
.lnch3-stat-blue:hover{border-color:rgba(59,130,246,.35);}
.lnch3-stat-blue .lnch3-stat-pulse{background:#60a5fa;}
.lnch3-stat-blue .lnch3-stat-v{color:#bfdbfe;}
.lnch3-stat-green .lnch3-stat-ico{background:linear-gradient(135deg, #22c55e, #15803d);}
.lnch3-stat-green:hover{border-color:rgba(34,197,94,.35);}
.lnch3-stat-green .lnch3-stat-pulse{background:#4ade80;}
.lnch3-stat-green .lnch3-stat-v{color:#bbf7d0;}
.lnch3-stat-red .lnch3-stat-ico{background:linear-gradient(135deg, #ef4444, #b91c1c);}
.lnch3-stat-red:hover{border-color:rgba(239,68,68,.35);}
.lnch3-stat-red .lnch3-stat-pulse{background:#fca5a5;}
.lnch3-stat-red .lnch3-stat-v{color:#fecaca;}
.lnch3-stat-purple .lnch3-stat-ico{background:linear-gradient(135deg, #a855f7, #7c3aed);}
.lnch3-stat-purple:hover{border-color:rgba(168,85,247,.35);}
.lnch3-stat-purple .lnch3-stat-pulse{background:#c084fc;}
.lnch3-stat-purple .lnch3-stat-v{color:#e9d5ff;}
/* ═══ MAIN ACTION CARDS ═══ */
.lnch3-actions{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:14px;
margin-bottom:18px;
animation:lnch3FadeIn .9s cubic-bezier(.16,1,.3,1);
}
.lnch3-action-card{
position:relative;
padding:20px 18px;
background:linear-gradient(155deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.005) 100%);
border:1px solid rgba(255,255,255,.07);
border-radius:18px;
cursor:pointer;
overflow:hidden;
transition:all .35s cubic-bezier(.16,1,.3,1);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
}
.lnch3-action-card:hover:not(.lnch3-action-locked){
transform:translateY(-5px);
box-shadow:0 20px 40px rgba(0,0,0,.5);
}
.lnch3-action-card:active:not(.lnch3-action-locked){transform:translateY(-2px) scale(.98);}
.lnch3-action-shine{
position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background:linear-gradient(135deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%);
transform:translateX(-100%);
transition:transform .8s;
pointer-events:none;
}
.lnch3-action-card:hover .lnch3-action-shine{transform:translateX(100%);}
.lnch3-action-glow{
position:absolute;
inset:0;
border-radius:18px;
opacity:0;
transition:opacity .3s;
pointer-events:none;
}
.lnch3-action-card:hover .lnch3-action-glow{opacity:1;}
.lnch3-action-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
margin-bottom:16px;
position:relative;
z-index:2;
}
.lnch3-action-ico{
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
border-radius:13px;
color:#fff;
box-shadow:0 8px 20px rgba(0,0,0,.4), inset 0 1.5px 0 rgba(255,255,255,.25);
transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.lnch3-action-card:hover:not(.lnch3-action-locked) .lnch3-action-ico{transform:scale(1.08) rotate(-3deg);}
.lnch3-action-badge{
display:inline-flex;
align-items:center;
padding:3px 9px;
background:linear-gradient(135deg, rgba(201,168,76,.13), rgba(201,168,76,.04));
border:1px solid rgba(201,168,76,.3);
border-radius:14px;
font-size:9.5px;
font-weight:900;
color:#fde68a;
letter-spacing:.3px;
}
.lnch3-action-badge-new{
background:linear-gradient(135deg, rgba(168,85,247,.18), rgba(168,85,247,.05));
border-color:rgba(168,85,247,.4);
color:#d8b4fe;
}
.lnch3-action-title{
font-family:var(--font);
font-size:18px;
font-weight:900;
color:#fff;
letter-spacing:-.4px;
margin-bottom:7px;
position:relative;z-index:2;
}
.lnch3-action-desc{
font-size:11.5px;
color:var(--t3);
font-weight:700;
line-height:1.55;
margin-bottom:14px;
position:relative;z-index:2;
}
.lnch3-action-cta{
display:inline-flex;
align-items:center;
gap:5px;
padding:8px 14px;
background:linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08);
border-radius:10px;
font-family:var(--font);
font-size:11.5px;
font-weight:800;
color:#fde68a;
position:relative;z-index:2;
transition:all .25s;
}
.lnch3-action-card:hover:not(.lnch3-action-locked) .lnch3-action-cta{
background:linear-gradient(135deg, rgba(201,168,76,.2), rgba(201,168,76,.06));
border-color:rgba(201,168,76,.4);
}
/* Reception card colors */
.lnch3-action-rec .lnch3-action-ico{background:linear-gradient(135deg, #fbbf24, #d97706);}
.lnch3-action-rec .lnch3-action-glow{background:radial-gradient(circle at top right, rgba(251,191,36,.18) 0%, transparent 60%);}
.lnch3-action-rec:hover{border-color:rgba(251,191,36,.35);}
/* Dashboard card colors */
.lnch3-action-dash .lnch3-action-ico{background:linear-gradient(135deg, #3b82f6, #1d4ed8);}
.lnch3-action-dash .lnch3-action-glow{background:radial-gradient(circle at top right, rgba(59,130,246,.2) 0%, transparent 60%);}
.lnch3-action-dash:hover{border-color:rgba(59,130,246,.4);}
/* Tech Report card (COMING SOON) */
.lnch3-action-tech{
position:relative;
}
.lnch3-action-tech .lnch3-action-ico{background:linear-gradient(135deg, #a855f7, #7c3aed);}
.lnch3-action-tech .lnch3-action-glow{background:radial-gradient(circle at top right, rgba(168,85,247,.2) 0%, transparent 60%);}
.lnch3-action-locked{
opacity:.88;
}
.lnch3-action-locked .lnch3-action-cta{
background:linear-gradient(135deg, rgba(168,85,247,.12), rgba(168,85,247,.04));
border-color:rgba(168,85,247,.3);
color:#d8b4fe;
}
.lnch3-action-soon-stripe{
position:absolute;
top:14px;left:14px;
z-index:3;
display:inline-flex;
align-items:center;
gap:5px;
padding:4px 10px;
background:linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
color:#fff;
border-radius:8px;
font-size:9.5px;
font-weight:900;
letter-spacing:.6px;
box-shadow:0 6px 16px rgba(168,85,247,.4);
}
.lnch3-soon-pulse{
width:6px;height:6px;
border-radius:50%;
background:#fff;
animation:lnch3DotPulse 1.2s ease-in-out infinite;
}
/* ═══ ANNOUNCEMENT CARD (square) ═══ */
.lnch3-ann-card{
position:relative;
padding:20px 22px;
margin-bottom:18px;
background:
linear-gradient(155deg, rgba(168,85,247,.05) 0%, transparent 50%, rgba(236,72,153,.04) 100%),
linear-gradient(155deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%);
border:1px solid rgba(168,85,247,.25);
border-radius:18px;
overflow:hidden;
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
animation:lnch3FadeIn 1s cubic-bezier(.16,1,.3,1);
box-shadow:0 14px 36px rgba(0,0,0,.4);
}
.lnch3-ann-card-shine{
position:absolute;
top:0;left:-100%;
width:50%;height:100%;
background:linear-gradient(90deg, transparent, rgba(168,85,247,.06), transparent);
animation:lnch3HeroShine 6s ease-in-out infinite;
pointer-events:none;
}
.lnch3-ann-card-glow{
position:absolute;
top:-100px;right:-50px;
width:300px;height:300px;
background:radial-gradient(circle, rgba(168,85,247,.18) 0%, transparent 60%);
filter:blur(40px);
pointer-events:none;
}
.lnch3-ann-card-head{
display:flex;
align-items:flex-start;
gap:14px;
margin-bottom:12px;
position:relative;z-index:2;
}
.lnch3-ann-card-ico{
width:48px;height:48px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #a855f7, #7c3aed);
border-radius:13px;
font-size:24px;
color:#fff;
box-shadow:0 8px 20px rgba(168,85,247,.4), inset 0 1.5px 0 rgba(255,255,255,.25);
}
.lnch3-ann-card-titles{flex:1;min-width:0;}
.lnch3-ann-card-eyebrow{
display:inline-flex;
align-items:center;
gap:5px;
padding:3px 9px;
background:rgba(168,85,247,.13);
border:1px solid rgba(168,85,247,.3);
border-radius:14px;
font-size:9.5px;
font-weight:900;
color:#d8b4fe;
letter-spacing:.5px;
margin-bottom:6px;
}
.lnch3-ann-card-eyebrow-dot{
width:5px;height:5px;border-radius:50%;
background:#c084fc;
box-shadow:0 0 8px #c084fc;
animation:lnch3DotPulse 1.2s ease-in-out infinite;
}
.lnch3-ann-card-title{
font-family:var(--font);
font-size:16px;
font-weight:900;
color:#fff;
letter-spacing:-.3px;
line-height:1.35;
}
.lnch3-ann-card-body{
font-size:13px;
color:var(--t2);
line-height:1.65;
font-weight:700;
margin-bottom:14px;
position:relative;z-index:2;
}
.lnch3-ann-card-foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
position:relative;z-index:2;
}
.lnch3-ann-card-meta{
font-size:10.5px;
color:var(--t3);
font-weight:700;
}
.lnch3-ann-card-btn{
display:inline-flex;
align-items:center;
gap:5px;
padding:7px 14px;
background:linear-gradient(135deg, #a855f7, #7c3aed);
border:none;
border-radius:10px;
color:#fff;
font-family:var(--font);
font-size:11px;
font-weight:800;
cursor:pointer;
box-shadow:0 6px 14px rgba(168,85,247,.35), inset 0 1px 0 rgba(255,255,255,.2);
transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.lnch3-ann-card-btn:hover{transform:translateY(-1.5px);box-shadow:0 9px 20px rgba(168,85,247,.5);}
.lnch3-ann-card-btn:active{transform:scale(.95);}
/* Variant colors for announcement (set by type) */
.lnch3-ann-card.is-info .lnch3-ann-card-ico,
.lnch3-ann-card.is-info .lnch3-ann-card-btn{background:linear-gradient(135deg, #3b82f6, #1d4ed8);}
.lnch3-ann-card.is-info{border-color:rgba(59,130,246,.3);}
.lnch3-ann-card.is-info .lnch3-ann-card-glow{background:radial-gradient(circle, rgba(59,130,246,.15) 0%, transparent 60%);}
.lnch3-ann-card.is-success .lnch3-ann-card-ico,
.lnch3-ann-card.is-success .lnch3-ann-card-btn{background:linear-gradient(135deg, #22c55e, #15803d);}
.lnch3-ann-card.is-success{border-color:rgba(34,197,94,.3);}
.lnch3-ann-card.is-success .lnch3-ann-card-glow{background:radial-gradient(circle, rgba(34,197,94,.15) 0%, transparent 60%);}
.lnch3-ann-card.is-warning .lnch3-ann-card-ico,
.lnch3-ann-card.is-warning .lnch3-ann-card-btn{background:linear-gradient(135deg, #fbbf24, #d97706);}
.lnch3-ann-card.is-warning{border-color:rgba(251,191,36,.35);}
.lnch3-ann-card.is-warning .lnch3-ann-card-glow{background:radial-gradient(circle, rgba(251,191,36,.15) 0%, transparent 60%);}
.lnch3-ann-card.is-critical .lnch3-ann-card-ico,
.lnch3-ann-card.is-critical .lnch3-ann-card-btn{background:linear-gradient(135deg, #ef4444, #b91c1c);}
.lnch3-ann-card.is-critical{border-color:rgba(239,68,68,.35);}
.lnch3-ann-card.is-critical .lnch3-ann-card-glow{background:radial-gradient(circle, rgba(239,68,68,.15) 0%, transparent 60%);}
/* Hide old launcher V2 elements */
.lnch-wrap.lnch-v3 .lnch-orb,
.lnch-wrap.lnch-v3 .lnch-top,
.lnch-wrap.lnch-v3 .lnch-brand,
.lnch-wrap.lnch-v3 .lnch-stats:not(#lnch-stats-block),
.lnch-wrap.lnch-v3 .lnch-cards{display:none;}
/* ═══ MOBILE RESPONSIVE ═══ */
@media(max-width:768px){
.lnch3-actions{grid-template-columns:repeat(2, 1fr);}
.lnch3-action-tech{grid-column:1/-1;}
}
@media(max-width:640px){
.lnch-wrap.lnch-v3{padding:2px 2px 12px;}
.lnch3-ann-strip{padding:8px 10px;gap:8px;}
.lnch3-ann-strip-icon{width:28px;height:28px;}
.lnch3-ann-strip-lbl{font-size:9.5px;padding:2px 7px;}
.lnch3-ann-strip-content{font-size:11.5px;}
.lnch3-hero{padding:18px 16px;}
.lnch3-hero-content{gap:14px;}
.lnch3-hero-logo-stage{width:70px;height:70px;}
.lnch3-hero-logo.lh-logo{font-size:30px;border-radius:17px;}
.lnch3-hero-name{font-size:20px;}
.lnch3-hero-meta{font-size:11px;}
.lnch3-stats{grid-template-columns:repeat(2, 1fr);gap:8px;}
.lnch3-stat{padding:11px 12px;}
.lnch3-stat-v{font-size:18px;}
.lnch3-stat-ico{width:28px;height:28px;}
.lnch3-actions{grid-template-columns:1fr;gap:11px;}
.lnch3-action-card{padding:16px 15px;}
.lnch3-action-tech{grid-column:auto;}
.lnch3-action-ico{width:42px;height:42px;}
.lnch3-action-title{font-size:16px;}
.lnch3-action-desc{font-size:11px;}
.lnch3-ann-card{padding:16px 15px;}
.lnch3-ann-card-ico{width:42px;height:42px;font-size:22px;}
.lnch3-ann-card-title{font-size:14.5px;}
.lnch3-ann-card-body{font-size:12px;}
}
.lnch-quick-bar{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:18px;
padding:18px;
margin-bottom:18px;
}
.lnch-quick-title{
font-family:var(--font);
font-size:12px;
font-weight:900;
color:var(--g2);
margin-bottom:12px;
letter-spacing:.4px;
}
.lnch-quick-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:10px;
}
.lnch-quick-btn{
display:flex;align-items:center;gap:9px;
padding:11px 13px;
background:rgba(255,255,255,.03);
border:1px solid var(--bdr);
border-radius:11px;
cursor:pointer;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
font-family:var(--font);
font-size:11px;
font-weight:700;
color:var(--t1);
}
.lnch-quick-btn:hover{
background:rgba(255,255,255,.06);
border-color:var(--bdr2);
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,.2);
}
.lqb-ico{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
color:#fff;
border-radius:9px;
flex-shrink:0;
box-shadow:0 4px 10px rgba(0,0,0,.25);
}
/* ROLE-BASED VISIBILITY */
/* Receptionist: hide stats, hide dashboard card, hide quick bar */
body.role-receptionist .lnch-v2 .lnch-stats,
body.role-receptionist #lnch-dash-card,
body.role-receptionist #lnch-quick-bar{
display:none !important;
}
body.role-receptionist .lnch-cards-v2{
grid-template-columns:1fr;
max-width:480px;
margin:0 auto 24px;
}
/* Accountant: hide reception card (they shouldn't issue tickets), show stats + dashboard */
body.role-accountant #lnch-rec-card{
display:none !important;
}
body.role-accountant .lnch-cards-v2{
grid-template-columns:1fr;
max-width:480px;
margin:0 auto 24px;
}
/* Hide some admin-only quick actions for accountant */
body.role-accountant #lqb-center,
body.role-accountant #lqb-staff{display:none;}
/* Admin: full access (default) - quick bar visible */
body.role-admin #lnch-quick-bar{display:block;}
/* RESPONSIVE */
@media(max-width:480px){
.lnch-cards-v2{grid-template-columns:1fr;}
.lnch-v2 .lnch-stats{gap:8px;}
.lnch-v2 .lnch-stat{padding:12px 8px;}
.lnch-stat-ico{width:32px;height:32px;}
.lnch-v2 .lnch-stat .ls-v{font-size:20px;}
.lnch-v2 .lnch-logo{width:78px;height:78px;font-size:36px;}
.lnch-v2 .lnch-name{font-size:22px;}
.lnch-quick-grid{grid-template-columns:repeat(2,1fr);}
}
/*════
LUXURIOUS FOOTER WITH CONTACT BUTTONS
════*/
.lnch-footer-v2{
margin-top:32px;
padding:0;
position:relative;
}
/* Gold gradient divider */
.lnch-footer-divider{
height:1px;
background:linear-gradient(
90deg,
transparent 0%,
rgba(201,168,76,.05) 15%,
rgba(201,168,76,.35) 50%,
rgba(201,168,76,.05) 85%,
transparent 100%
);
margin-bottom:24px;
position:relative;
}
.lnch-footer-divider::before{
content:'';
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:32px;height:1px;
background:linear-gradient(90deg,var(--g1),var(--g2));
box-shadow:0 0 12px rgba(201,168,76,.6);
}
.lnch-footer-content{
background:linear-gradient(155deg,
rgba(15,11,0,.6) 0%,
rgba(20,15,0,.4) 100%
);
border:1px solid var(--bdr);
border-radius:18px;
padding:18px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
position:relative;
overflow:hidden;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.lnch-footer-content::before{
content:'';
position:absolute;
top:0;right:0;
width:200px;height:200px;
background:radial-gradient(
circle,
rgba(201,168,76,.08) 0%,
transparent 70%
);
pointer-events:none;
}
/* Brand: Crown + owner name */
.lnch-footer-brand{
display:flex;
align-items:center;
gap:12px;
flex:1;
min-width:0;
position:relative;
z-index:1;
}
.lnch-footer-crown{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
border-radius:11px;
color:#1a1206;
flex-shrink:0;
box-shadow:
0 6px 16px rgba(201,168,76,.35),
0 0 0 1px rgba(255,247,214,.3) inset,
0 1px 0 rgba(255,255,255,.4) inset;
animation:crownPulse 4s ease-in-out infinite;
}
@keyframes crownPulse{
0%,100%{
box-shadow:0 6px 16px rgba(201,168,76,.35),0 0 0 1px rgba(255,247,214,.3) inset,0 1px 0 rgba(255,255,255,.4) inset;
}
50%{
box-shadow:0 8px 22px rgba(201,168,76,.55),0 0 0 1px rgba(255,247,214,.5) inset,0 1px 0 rgba(255,255,255,.6) inset;
}
}
.lnch-footer-text{min-width:0;}
.lnch-footer-cr{
font-size:9.5px;
color:var(--t4);
letter-spacing:.4px;
margin-bottom:2px;
font-weight:600;
}
.lnch-footer-owner{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:var(--g2);
letter-spacing:.2px;
text-shadow:0 1px 4px rgba(201,168,76,.2);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* Action buttons row */
.lnch-footer-actions{
display:flex;
gap:10px;
flex-shrink:0;
position:relative;
z-index:1;
}
/* Contact button base */
.lnch-contact-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 14px;
border-radius:13px;
text-decoration:none;
cursor:pointer;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
position:relative;
overflow:hidden;
border:1px solid transparent;
}
.lnch-contact-btn::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);
transform:translateX(-100%);
transition:transform .6s ease;
pointer-events:none;
}
.lnch-contact-btn:hover::before{transform:translateX(100%);}
.lnch-contact-btn:hover{transform:translateY(-2px);}
.lnch-contact-btn:active{transform:scale(.96);}
.lnch-contact-ico{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
flex-shrink:0;
background:rgba(255,255,255,.12);
color:#fff;
transition:transform .25s ease;
}
.lnch-contact-btn:hover .lnch-contact-ico{
transform:rotate(-8deg) scale(1.08);
}
.lnch-contact-text{
display:flex;
flex-direction:column;
text-align:right;
line-height:1.2;
}
.lnch-contact-lbl{
font-size:9.5px;
font-weight:700;
opacity:.85;
letter-spacing:.3px;
}
.lnch-contact-num{
font-family:var(--font);
font-size:12.5px;
font-weight:900;
margin-top:1px;
letter-spacing:.2px;
}
/* CALL button — Gold luxury */
.lnch-call-btn{
background:linear-gradient(135deg,#C9A84C 0%, #b08c2a 100%);
color:#1a1206;
border-color:rgba(255,247,214,.3);
box-shadow:
0 6px 18px rgba(201,168,76,.4),
0 0 0 1px rgba(255,247,214,.2) inset,
0 1px 0 rgba(255,255,255,.35) inset;
}
.lnch-call-btn:hover{
box-shadow:
0 10px 26px rgba(201,168,76,.55),
0 0 0 1px rgba(255,247,214,.4) inset;
}
.lnch-call-btn .lnch-contact-ico{
background:rgba(26,18,6,.18);
color:#1a1206;
}
/* WHATSAPP button — Green WhatsApp */
.lnch-wa-btn{
background:linear-gradient(135deg,#25D366 0%, #128C7E 100%);
color:#fff;
border-color:rgba(255,255,255,.18);
box-shadow:
0 6px 18px rgba(37,211,102,.35),
0 0 0 1px rgba(255,255,255,.15) inset,
0 1px 0 rgba(255,255,255,.25) inset;
}
.lnch-wa-btn:hover{
box-shadow:
0 10px 26px rgba(37,211,102,.5),
0 0 0 1px rgba(255,255,255,.25) inset;
}
.lnch-wa-btn .lnch-contact-ico{
background:rgba(255,255,255,.18);
color:#fff;
}
/* Mobile responsive */
@media(max-width:560px){
.lnch-footer-content{
padding:14px;
gap:14px;
flex-direction:column;
align-items:stretch;
}
.lnch-footer-brand{justify-content:center;text-align:center;}
.lnch-footer-actions{
width:100%;
justify-content:center;
}
.lnch-contact-btn{flex:1;justify-content:center;}
}
@media(max-width:360px){
.lnch-contact-btn{padding:9px 10px;gap:8px;}
.lnch-contact-ico{width:30px;height:30px;}
.lnch-contact-num{font-size:11.5px;}
}
/* ══════════════════════════════════════════════════
RECEPTION SCREEN — صفحة استقبال مستقلة
══════════════════════════════════════════════════ */
#s-rec{
flex-direction:column;
align-items:center;
background:var(--d0);
min-height:100vh;
}
/* Reception Header */
.rec-hdr{
height:58px;
background:linear-gradient(90deg,rgba(5,5,7,.98),var(--d2) 30%,var(--d2) 70%,rgba(5,5,7,.98));
border-bottom:1px solid var(--bdr);
display:flex;align-items:center;justify-content:space-between;
padding:0 16px;
position:sticky;top:0;z-index:200;
flex-shrink:0;
box-shadow:0 2px 20px rgba(0,0,0,.5);
}
.rec-hdr-left{display:flex;align-items:center;gap:10px;}
.rec-hdr-back{
width:36px;height:36px;
background:var(--d4);border:1px solid var(--bdr);
border-radius:var(--r8);
display:flex;align-items:center;justify-content:center;
font-size:16px;cursor:pointer;color:var(--t2);
}
.rec-hdr-back:hover{background:var(--d5);color:var(--t1);}
.rec-hdr-logout{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:rgba(239,68,68,.08);
border:1px solid rgba(239,68,68,.25);
color:#f87171;
border-radius:10px;
cursor:pointer;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
}
.rec-hdr-logout:hover{
background:linear-gradient(135deg,#EF4444,#b91c1c);
color:#fff;
border-color:transparent;
transform:translateY(-1px);
box-shadow:0 6px 14px rgba(239,68,68,.35);
}
.rec-hdr-logout:active{transform:scale(.92);}
.rec-hdr-title{
font-family:var(--font);font-size:15px;font-weight:800;
color:var(--g2);
}
.rec-hdr-sub{font-size:10px;color:var(--t3);margin-top:1px;}
.rec-hdr-right{display:flex;align-items:center;gap:8px;}
/* Today counter badge */
.rec-today-badge{
display:flex;align-items:center;gap:5px;
background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.06));
border:1px solid rgba(201,168,76,.2);
border-radius:20px;padding:5px 12px;
font-size:11px;color:var(--g1);font-weight:700;
cursor:default;
}
/* Reception body */
.rec-body{
flex:1;overflow-y:auto;
padding:2px 0;
display:flex;flex-direction:column;gap:5px;
direction:rtl;
}
/* ═══════════════════════════════════════════
RECEPTION FORM — Pro Edit-modal style
═══════════════════════════════════════════ */
/*
🆕 RECEPTION ANNOUNCEMENT — Subtle ad space (banner + card)
Non-intrusive · Professional · Elegant
*/
/* Banner strip — thin marquee just below header */
.rec-ann-strip{
display:flex;
align-items:center;
gap:10px;
padding:9px 13px;
margin:10px 16px 0;
background:linear-gradient(90deg,
rgba(201,168,76,.08) 0%,
rgba(201,168,76,.03) 50%,
rgba(201,168,76,.08) 100%);
background-size:200% auto;
border:1px solid rgba(201,168,76,.22);
border-radius:11px;
overflow:hidden;
position:relative;
animation:recAnnStripShine 7s ease-in-out infinite;
}
@keyframes recAnnStripShine{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.rec-ann-strip-icon{
width:26px;height:26px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #C9A84C, #9F7E1C);
color:#fff;
border-radius:7px;
box-shadow:0 3px 8px rgba(201,168,76,.3), inset 0 1px 0 rgba(255,255,255,.25);
}
.rec-ann-strip-lbl{
flex-shrink:0;
font-size:9.5px;
font-weight:900;
color:#fde68a;
letter-spacing:.4px;
padding:2px 7px;
background:rgba(201,168,76,.13);
border:1px solid rgba(201,168,76,.25);
border-radius:6px;
}
.rec-ann-strip-track{
flex:1;
overflow:hidden;
position:relative;
min-width:0;
}
.rec-ann-strip-content{
white-space:nowrap;
font-size:11.5px;
font-weight:700;
color:var(--t1);
animation:recAnnStripScroll 35s linear infinite;
padding-left:100%;
}
@keyframes recAnnStripScroll{
from{transform:translateX(100%);}
to{transform:translateX(-100%);}
}
.rec-ann-strip-close{
width:22px;height:22px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
color:rgba(255,255,255,.45);
border-radius:6px;
cursor:pointer;
transition:all .2s;
}
.rec-ann-strip-close:hover{
background:rgba(239,68,68,.1);
border-color:rgba(239,68,68,.25);
color:#fca5a5;
}
/* Square ad card — at the end of body (subtle, premium) */
.rec-ann-card{
position:relative;
padding:16px 18px;
margin:14px 16px 22px;
background:
linear-gradient(155deg, rgba(168,85,247,.04) 0%, transparent 50%, rgba(236,72,153,.03) 100%),
linear-gradient(155deg, rgba(255,255,255,.02) 0%, rgba(255,255,255,.005) 100%);
border:1px solid rgba(168,85,247,.2);
border-radius:14px;
overflow:hidden;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.rec-ann-card-shine{
position:absolute;
top:0;left:-100%;
width:50%;height:100%;
background:linear-gradient(90deg, transparent, rgba(168,85,247,.05), transparent);
animation:recAnnCardShine 9s ease-in-out infinite;
pointer-events:none;
}
@keyframes recAnnCardShine{
0%,100%{left:-100%;}
50%{left:200%;}
}
.rec-ann-card-glow{
position:absolute;
top:-60px;right:-30px;
width:180px;height:180px;
background:radial-gradient(circle, rgba(168,85,247,.14) 0%, transparent 60%);
filter:blur(30px);
pointer-events:none;
}
.rec-ann-card-h{
display:flex;
align-items:flex-start;
gap:11px;
margin-bottom:9px;
position:relative;z-index:2;
}
.rec-ann-card-ico{
width:38px;height:38px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #a855f7, #7c3aed);
border-radius:10px;
font-size:19px;
color:#fff;
box-shadow:0 6px 14px rgba(168,85,247,.35), inset 0 1px 0 rgba(255,255,255,.25);
}
.rec-ann-card-titles{flex:1;min-width:0;}
.rec-ann-card-eyebrow{
display:inline-flex;
align-items:center;
gap:5px;
padding:2.5px 8px;
background:rgba(168,85,247,.12);
border:1px solid rgba(168,85,247,.28);
border-radius:12px;
font-size:8.5px;
font-weight:900;
color:#d8b4fe;
letter-spacing:.5px;
margin-bottom:5px;
}
.rec-ann-card-eyebrow-dot{
width:4px;height:4px;border-radius:50%;
background:#c084fc;
box-shadow:0 0 6px #c084fc;
animation:recAnnDot 1.3s ease-in-out infinite;
}
@keyframes recAnnDot{
0%,100%{opacity:.55;transform:scale(1);}
50%{opacity:1;transform:scale(1.3);}
}
.rec-ann-card-title{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:#fff;
letter-spacing:-.2px;
line-height:1.35;
}
.rec-ann-card-close{
width:22px;height:22px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
color:rgba(255,255,255,.45);
border-radius:6px;
cursor:pointer;
transition:all .2s;
}
.rec-ann-card-close:hover{
background:rgba(239,68,68,.1);
border-color:rgba(239,68,68,.25);
color:#fca5a5;
}
.rec-ann-card-body{
font-size:12px;
color:var(--t2);
line-height:1.6;
font-weight:700;
margin-bottom:11px;
position:relative;z-index:2;
}
.rec-ann-card-foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
position:relative;z-index:2;
}
.rec-ann-card-meta{
font-size:10px;
color:var(--t3);
font-weight:700;
}
.rec-ann-card-btn{
display:inline-flex;
align-items:center;
gap:5px;
padding:6px 12px;
background:linear-gradient(135deg, #a855f7, #7c3aed);
border:none;
border-radius:9px;
color:#fff;
font-family:var(--font);
font-size:10.5px;
font-weight:800;
cursor:pointer;
box-shadow:0 4px 12px rgba(168,85,247,.3), inset 0 1px 0 rgba(255,255,255,.2);
transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.rec-ann-card-btn:hover{transform:translateY(-1.5px);box-shadow:0 7px 18px rgba(201,168,76,.45);}
.rec-ann-card-btn:active{transform:scale(.95);}
/* Type variants */
.rec-ann-card.is-info .rec-ann-card-ico,
.rec-ann-card.is-info .rec-ann-card-btn{background:linear-gradient(135deg, #A07830, #5F584C);}
.rec-ann-card.is-info{border-color:rgba(201,168,76,.25);}
.rec-ann-card.is-info .rec-ann-card-glow{background:radial-gradient(circle, rgba(201,168,76,.13) 0%, transparent 60%);}
.rec-ann-card.is-success .rec-ann-card-ico,
.rec-ann-card.is-success .rec-ann-card-btn{background:linear-gradient(135deg, #22c55e, #15803d);}
.rec-ann-card.is-success{border-color:rgba(34,197,94,.25);}
.rec-ann-card.is-success .rec-ann-card-glow{background:radial-gradient(circle, rgba(34,197,94,.13) 0%, transparent 60%);}
.rec-ann-card.is-warning .rec-ann-card-ico,
.rec-ann-card.is-warning .rec-ann-card-btn{background:linear-gradient(135deg, #fbbf24, #d97706);}
.rec-ann-card.is-warning{border-color:rgba(251,191,36,.3);}
.rec-ann-card.is-warning .rec-ann-card-glow{background:radial-gradient(circle, rgba(251,191,36,.13) 0%, transparent 60%);}
.rec-ann-card.is-critical .rec-ann-card-ico,
.rec-ann-card.is-critical .rec-ann-card-btn{background:linear-gradient(135deg, #ef4444, #b91c1c);}
.rec-ann-card.is-critical{border-color:rgba(239,68,68,.3);}
.rec-ann-card.is-critical .rec-ann-card-glow{background:radial-gradient(circle, rgba(239,68,68,.13) 0%, transparent 60%);}
@media(max-width:640px){
.rec-ann-strip{margin:8px 10px 0;padding:7px 10px;gap:8px;}
.rec-ann-strip-icon{width:24px;height:24px;}
.rec-ann-strip-lbl{font-size:9px;padding:2px 6px;}
.rec-ann-strip-content{font-size:11px;}
.rec-ann-card{margin:12px 10px 18px;padding:13px 14px;}
.rec-ann-card-ico{width:34px;height:34px;font-size:17px;}
.rec-ann-card-title{font-size:13px;}
.rec-ann-card-body{font-size:11.5px;}
}
/*
🆕🆕🆕 RECEPTION V3 — Matched Launcher V3 Design Language
*/
.rec-v3-wrap{
position:relative;
width:100%;
max-width:1080px;
margin:0 auto;
padding:2px 2px 12px;
min-height:100vh;
overflow-x:hidden;
}
/* Background — same cyberpunk feel as launcher */
.rec-v3-bg-grid{
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(201,168,76,.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,76,.035) 1px, transparent 1px);
background-size:42px 42px;
mask-image:radial-gradient(ellipse at center top, black 0%, transparent 70%);
-webkit-mask-image:radial-gradient(ellipse at center top, black 0%, transparent 70%);
pointer-events:none;
z-index:0;
}
.rec-v3-bg-glow{
position:fixed;
border-radius:50%;
filter:blur(80px);
pointer-events:none;
z-index:0;
}
.rec-v3-bg-glow-1{
width:420px;height:420px;
background:radial-gradient(circle, rgba(245,158,11,.15) 0%, transparent 70%);
top:-120px;right:-100px;
}
.rec-v3-bg-glow-2{
width:420px;height:420px;
background:radial-gradient(circle, rgba(59,130,246,.12) 0%, transparent 70%);
bottom:20%;left:-150px;
}
.rec-v3-wrap > *:not(.rec-v3-bg-grid):not(.rec-v3-bg-glow){
position:relative;
z-index:5;
}
/* Header */
.rec-v3-hdr{
position:relative;
display:flex;
flex-direction:column;
align-items:stretch;
gap:10px;
margin-bottom:14px;
}
/*
🆕 PAGE TOP MENU ROW — FIRST element on page
- Menu toggle on right, icons strip expands to left
- z-index high to stay above all
*/
.rec-page-top{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
width:100%;
direction:rtl;
min-height:50px;
margin-bottom:14px;
padding:0 2px;
position:relative;
z-index:20;
}
/* ═══ LUXURY MENU TOGGLE BUTTON (always on right) ═══ */
.rec-menu-toggle{
position:relative;
width:44px;
height:44px;
flex-shrink:0;
background:linear-gradient(155deg, rgba(201,168,76,.18) 0%, rgba(201,168,76,.06) 100%);
border:1.5px solid rgba(201,168,76,.35);
border-radius:12px;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
transition:all .3s cubic-bezier(.4,0,.2,1);
overflow:hidden;
box-shadow:0 4px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
-webkit-tap-highlight-color:transparent;
z-index:10;
order:0; /* In RTL with flex: first child = rightmost */
}
.rec-menu-toggle::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at top right, rgba(232,201,106,.25), transparent 70%);
opacity:0;
transition:opacity .3s;
}
.rec-menu-toggle:hover{
border-color:rgba(201,168,76,.55);
background:linear-gradient(155deg, rgba(201,168,76,.25) 0%, rgba(201,168,76,.08) 100%);
transform:translateY(-1px);
}
.rec-menu-toggle:hover::before{opacity:1;}
.rec-menu-toggle:active{transform:scale(.93);}
.rec-menu-toggle-glow{
position:absolute;
inset:-2px;
border-radius:12px;
background:conic-gradient(from 0deg, transparent, rgba(232,201,106,.5), transparent, transparent);
opacity:0;
z-index:-1;
}
.rec-menu-toggle.is-open .rec-menu-toggle-glow{
opacity:1;
animation:menuGlowSpin 2s linear infinite;
}
@keyframes menuGlowSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.rec-menu-toggle-icon{
display:flex;
flex-direction:column;
gap:4px;
width:18px;
height:13px;
justify-content:center;
position:relative;
z-index:2;
}
.rec-menu-toggle-icon span{
width:100%;
height:2.5px;
background:linear-gradient(90deg, #E8C96A, #C9A84C);
border-radius:2px;
transition:all .35s cubic-bezier(.68,-.55,.27,1.55);
transform-origin:center;
box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.rec-menu-toggle-icon span:nth-child(1){width:80%;margin-left:auto;}
.rec-menu-toggle-icon span:nth-child(3){width:65%;margin-left:auto;}
/* Open: morph to X */
.rec-menu-toggle.is-open .rec-menu-toggle-icon span:nth-child(1){
width:100%;
margin-left:0;
transform:translateY(6.5px) rotate(45deg);
}
.rec-menu-toggle.is-open .rec-menu-toggle-icon span:nth-child(2){
opacity:0;
transform:scaleX(0);
}
.rec-menu-toggle.is-open .rec-menu-toggle-icon span:nth-child(3){
width:100%;
margin-left:0;
transform:translateY(-6.5px) rotate(-45deg);
}
/* ═══ HORIZONTAL ACTIONS BAR (icons in parallel) ═══ */
.rec-actions-bar{
display:flex;
gap:8px;
flex-direction:row;
align-items:center;
max-width:0;
opacity:0;
overflow:hidden;
transition:max-width .45s cubic-bezier(.4,0,.2,1), opacity .25s, padding .3s;
padding:0;
direction:rtl;
order:1; /* In RTL, this appears to LEFT of toggle */
}
.rec-actions-bar.is-open{
max-width:340px;
opacity:1;
padding:0 4px;
}
.rec-menu-action-btn{
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
color:rgba(255,255,255,.85);
cursor:pointer;
transition:background .25s, border-color .25s, transform .25s, box-shadow .25s;
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
position:relative;
transform:translateX(20px) scale(.6);
opacity:0;
box-shadow:0 3px 8px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
}
.rec-menu-action-btn-logout{color:#fca5a5;}
.rec-actions-bar.is-open .rec-menu-action-btn{
transform:translateX(0) scale(1);
opacity:1;
}
.rec-actions-bar.is-open .rec-menu-action-btn:nth-child(1){transition:transform .4s cubic-bezier(.34,1.56,.64,1) .08s, opacity .3s .08s, background .25s, border-color .25s;}
.rec-actions-bar.is-open .rec-menu-action-btn:nth-child(2){transition:transform .4s cubic-bezier(.34,1.56,.64,1) .14s, opacity .3s .14s, background .25s, border-color .25s;}
.rec-actions-bar.is-open .rec-menu-action-btn:nth-child(3){transition:transform .4s cubic-bezier(.34,1.56,.64,1) .2s, opacity .3s .2s, background .25s, border-color .25s;}
.rec-actions-bar.is-open .rec-menu-action-btn:nth-child(4){transition:transform .4s cubic-bezier(.34,1.56,.64,1) .26s, opacity .3s .26s, background .25s, border-color .25s;}
.rec-actions-bar.is-open .rec-menu-action-btn:nth-child(5){transition:transform .4s cubic-bezier(.34,1.56,.64,1) .32s, opacity .3s .32s, background .25s, border-color .25s;}
.rec-menu-action-btn:hover{
background:linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.03) 100%);
border-color:rgba(255,255,255,.18);
color:#fff;
transform:translateY(-2px) scale(1) !important;
box-shadow:0 6px 16px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.08);
}
.rec-menu-action-btn-logout:hover{
color:#ef4444;
border-color:rgba(239,68,68,.3);
background:linear-gradient(180deg, rgba(239,68,68,.08) 0%, rgba(239,68,68,.02) 100%);
}
.rec-menu-action-btn:active{transform:scale(.92) !important;}
/*
🆕 LUXURY IDENTITY PANEL — Full-width
*/
.rec-id-panel{
position:relative;
display:flex;
width:100%;
background:linear-gradient(155deg,
rgba(201,168,76,.08) 0%,
rgba(201,168,76,.02) 30%,
rgba(255,255,255,.01) 70%,
rgba(201,168,76,.05) 100%);
border:1px solid rgba(201,168,76,.25);
border-radius:16px;
padding:14px 18px;
overflow:hidden;
box-shadow:
0 8px 24px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 0 40px rgba(201,168,76,.04);
}
.rec-id-panel-shine{
position:absolute;
top:0;
right:-150%;
width:60%;
height:100%;
background:linear-gradient(90deg,
transparent,
rgba(232,201,106,.15) 40%,
rgba(255,255,255,.08) 50%,
rgba(232,201,106,.15) 60%,
transparent);
transform:skewX(-25deg);
animation:idShineSweep 6s ease-in-out infinite;
pointer-events:none;
}
@keyframes idShineSweep{
0%, 100%{right:-150%;}
40%, 60%{right:150%;}
}
.rec-id-panel-orb{
position:absolute;
top:-30px;
left:-30px;
width:120px;
height:120px;
background:radial-gradient(circle, rgba(232,201,106,.15) 0%, transparent 60%);
border-radius:50%;
pointer-events:none;
animation:idOrbPulse 4s ease-in-out infinite;
}
@keyframes idOrbPulse{
0%, 100%{opacity:.6;transform:scale(1);}
50%{opacity:1;transform:scale(1.15);}
}
.rec-id-panel-content{
position:relative;
z-index:2;
display:flex;
flex-direction:column;
gap:6px;
width:100%;
text-align:right;
direction:rtl;
}
.rec-id-greet{
display:flex;
align-items:center;
gap:6px;
font-size:11px;
color:rgba(201,168,76,.7);
font-weight:700;
letter-spacing:.3px;
}
.rec-id-greet-emoji{font-size:13px;}
.rec-id-greet-txt{font-family:var(--font);}
.rec-id-name{
font-family:var(--font);
font-size:20px;
font-weight:900;
background:linear-gradient(135deg, #fff 0%, #E8C96A 50%, #C9A84C 100%);
background-size:200% auto;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
letter-spacing:-.3px;
line-height:1.2;
animation:idNameShimmer 4s linear infinite;
text-align:right;
margin-top:2px;
}
@keyframes idNameShimmer{
to{background-position:200% center;}
}
.rec-id-pills{
display:flex;
flex-wrap:wrap;
gap:6px;
margin-top:6px;
direction:rtl;
}
.rec-id-pill{
display:inline-flex;
align-items:center;
gap:5px;
padding:5px 10px;
font-family:var(--font);
font-size:11px;
font-weight:800;
border-radius:9px;
white-space:nowrap;
letter-spacing:-.1px;
}
.rec-id-pill-role{
background:linear-gradient(155deg, rgba(201,168,76,.15), rgba(201,168,76,.05));
border:1px solid rgba(201,168,76,.3);
color:#E8C96A;
}
.rec-id-pill-ico{font-size:10px;}
.rec-id-pill-count{
background:linear-gradient(155deg, rgba(59,130,246,.15), rgba(59,130,246,.05));
border:1px solid rgba(59,130,246,.3);
color:#93c5fd;
}
.rec-id-pill-count strong{color:#fff;font-weight:900;}
.rec-id-pill-day{
background:linear-gradient(155deg, rgba(34,197,94,.15), rgba(34,197,94,.05));
border:1px solid rgba(34,197,94,.3);
color:#86efac;
}
.rec-id-day-dot{
width:6px;
height:6px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 8px #22c55e;
animation:idDayPulse 1.5s ease-in-out infinite;
}
@keyframes idDayPulse{
0%, 100%{opacity:.55;transform:scale(1);}
50%{opacity:1;transform:scale(1.3);}
}
/*
🆕 MOBILE FORCED FULL WIDTH — Cards always fill screen
- Maximum specificity to prevent any size shrink
- Works regardless of inner content size
*/
@media(max-width:640px){
/* Wrapper minimal padding */
body .rec-v3-wrap{padding:2px 2px 12px !important;width:100% !important;max-width:100% !important;box-sizing:border-box !important;}
body .rec-v3-wrap .rec-body,
body .rec-v3-wrap .rec-form-side{
padding:0 !important;
margin:0 !important;
width:100% !important;
max-width:100% !important;
box-sizing:border-box !important;
align-self:stretch !important;
align-items:stretch !important;
}
/* Identity panel — compact */
body .rec-id-panel{padding:13px 15px;border-radius:14px;width:100% !important;box-sizing:border-box !important;}
body .rec-id-name{font-size:18px;}
body .rec-id-greet{font-size:10.5px;}
body .rec-id-pill{font-size:10px;padding:4px 8px;}
/* CARDS — FORCED full width with extreme specificity */
body .rec-v3-wrap .rec-pro-card,
body .rec-v3-wrap .rec-form-side .rec-pro-card,
body .rec-v3-wrap .rec-body .rec-pro-card{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
box-sizing:border-box !important;
margin:0 0 10px 0 !important;
border-radius:14px !important;
align-self:stretch !important;
flex-shrink:0 !important;
flex-grow:0 !important;
flex-basis:auto !important;
display:block !important;
}
body .rec-pro-card-h{padding:6px 9px !important;width:100% !important;box-sizing:border-box !important;}
body .rec-pro-card-body{
padding:14px !important;
width:100% !important;
box-sizing:border-box !important;
}
body .rec-pro-card-body > *,
body .rec-pro-card-body .staff-form-f,
body .rec-pro-card-body .staff-form-f input,
body .rec-pro-card-body .staff-form-f select,
body .rec-pro-card-body .staff-form-f textarea{
max-width:100% !important;
box-sizing:border-box !important;
}
body .rec-pro-card-body .staff-form-f{width:100% !important;}
/* Stack form rows */
body .rec-form-side .staff-form-row,
body .rec-form-side .form-row{
grid-template-columns:1fr !important;
flex-direction:column !important;
gap:12px !important;
width:100% !important;
}
body .rec-form-side .staff-form-f,
body .rec-form-side .form-f{
width:100% !important;
box-sizing:border-box !important;
}
/* Menu buttons */
body .rec-menu-toggle{width:44px;height:44px;}
body .rec-menu-action-btn{width:44px;height:44px;}
body .rec-actions-bar.is-open{max-width:280px;}
}
@media(max-width:380px){
body .rec-v3-wrap{padding:2px 2px 10px !important;}
body .rec-id-name{font-size:16.5px;}
body .rec-id-pill{font-size:9.5px;padding:3px 7px;gap:4px;}
body .rec-menu-toggle{width:42px;height:42px;}
body .rec-menu-action-btn{width:42px;height:42px;}
body .rec-actions-bar.is-open{max-width:255px;}
}
/*
🆕 PREMIUM SMART PHONE INPUT — Redesigned
- Larger touch target (56px)
- Clear separation between cc chip and input
- Status icon clearly contained
- No overlap with anything
*/
.rec-phone-smart{
position:relative;
display:flex !important;
align-items:stretch;
background:linear-gradient(155deg, rgba(255,255,255,.03) 0%, rgba(0,0,0,.4) 100%);
border:1.5px solid rgba(201,168,76,.25);
border-radius:14px;
overflow:hidden;
transition:border-color .25s, background .25s, box-shadow .25s;
direction:ltr !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 3px 12px rgba(0,0,0,.3);
height:56px;
width:100% !important;
box-sizing:border-box;
}
.rec-phone-smart:focus-within{
border-color:rgba(201,168,76,.6);
background:linear-gradient(155deg, rgba(201,168,76,.04) 0%, rgba(0,0,0,.45) 100%);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 4px rgba(201,168,76,.12);
}
.rec-phone-smart.is-valid{
border-color:rgba(34,197,94,.55) !important;
background:linear-gradient(155deg, rgba(34,197,94,.05) 0%, rgba(0,0,0,.4) 100%) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 0 0 3px rgba(34,197,94,.1) !important;
}
.rec-phone-smart.is-invalid{
border-color:rgba(239,68,68,.5) !important;
animation:phoneShake .4s cubic-bezier(.36,.07,.19,.97);
}
@keyframes phoneShake{
0%,100%{transform:translateX(0);}
25%{transform:translateX(-4px);}
75%{transform:translateX(4px);}
}
/* Country code chip — luxurious golden gradient with clear separator */
.rec-phone-cc{
position:relative;
display:flex !important;
align-items:center;
gap:8px;
padding:0 16px;
background:linear-gradient(155deg, rgba(201,168,76,.22) 0%, rgba(201,168,76,.08) 100%);
font-family:'Outfit',var(--font);
font-weight:900;
font-size:14px;
color:#E8C96A;
flex-shrink:0 !important;
direction:ltr;
text-shadow:0 1px 2px rgba(0,0,0,.5);
transition:background .3s, color .3s;
z-index:2;
}
/* Separator line between cc and input */
.rec-phone-cc::after{
content:'';
position:absolute;
top:10px;
bottom:10px;
right:0;
width:1px;
background:linear-gradient(180deg, transparent, rgba(201,168,76,.45), transparent);
pointer-events:none;
}
.rec-phone-smart.is-valid .rec-phone-cc{
background:linear-gradient(155deg, rgba(34,197,94,.22) 0%, rgba(34,197,94,.06) 100%);
color:#86efac;
}
.rec-phone-smart.is-valid .rec-phone-cc::after{
background:linear-gradient(180deg, transparent, rgba(34,197,94,.45), transparent);
}
.rec-phone-flag{
font-size:20px;
line-height:1;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
.rec-phone-code{
letter-spacing:.6px;
font-family:'Outfit',var(--font);
font-weight:800;
}
/* Input — clean, large, with reserved space for status on LEFT */
.rec-phone-smart input{
flex:1 !important;
min-width:0 !important;
width:auto !important;
padding:0 44px 0 18px !important;
background:transparent !important;
border:none !important;
color:#fff !important;
font-family:'Outfit','SF Mono',monospace !important;
font-size:17px !important;
font-weight:700 !important;
text-align:left !important;
letter-spacing:2px !important;
direction:ltr !important;
outline:none !important;
height:100% !important;
box-sizing:border-box;
}
.rec-phone-smart input::placeholder{
color:rgba(255,255,255,.2);
letter-spacing:1.5px;
font-weight:600;
font-size:14px;
}
/* Status indicator — absolute INSIDE input on LEFT, contained */
.rec-phone-status{
position:absolute !important;
left:14px !important;
top:50%;
transform:translateY(-50%);
display:flex !important;
align-items:center;
justify-content:center;
width:26px !important;
height:26px !important;
font-size:15px;
font-weight:900;
pointer-events:none;
transition:all .3s;
z-index:3;
border-radius:50%;
}
.rec-phone-status:empty{display:none !important;}
.rec-phone-status.is-checking{color:#E3A92C;}
.rec-phone-status.is-found{
color:#22c55e;
background:rgba(34,197,94,.15);
text-shadow:0 0 12px rgba(34,197,94,.7);
}
.rec-phone-status.is-new{
color:#fbbf24;
background:rgba(251,191,36,.15);
font-size:13px;
text-shadow:0 0 12px rgba(251,191,36,.7);
}
/* Hint — Arabic RTL with elegant dot */
.rec-phone-hint{
display:flex !important;
align-items:center;
gap:7px;
font-size:11.5px;
color:var(--t3);
font-weight:700;
margin-top:9px;
padding:0 4px;
direction:rtl;
text-align:right;
font-family:var(--font);
transition:color .25s;
line-height:1.5;
}
.rec-phone-hint::before{
content:'';
width:6px;
height:6px;
border-radius:50%;
background:currentColor;
opacity:.6;
flex-shrink:0;
box-shadow:0 0 6px currentColor;
}
.rec-phone-hint.is-invalid{color:#fca5a5;}
.rec-phone-hint.is-valid{color:#86efac;}
/* Mobile */
@media(max-width:480px){
.rec-phone-smart{height:52px;border-radius:12px;}
.rec-phone-cc{padding:0 13px;font-size:13px;gap:6px;}
.rec-phone-flag{font-size:18px;}
.rec-phone-smart input{padding:0 40px 0 14px !important;font-size:16px !important;letter-spacing:1.5px !important;}
.rec-phone-smart input::placeholder{font-size:13px;letter-spacing:1px;}
.rec-phone-status{width:24px !important;height:24px !important;left:12px !important;}
.rec-phone-hint{font-size:11px;margin-top:8px;}
}
/* Legacy wrap (kept for compat) */
/* Legacy wrap (kept for compat) */
.rec-phone-wrap{
position:relative;
}
.rec-phone-ind{
position:absolute;
left:10px;
top:50%;
transform:translateY(-50%);
display:flex;
align-items:center;
pointer-events:none;
}
@keyframes recPhoneSpin{
from{transform:rotate(0);}
to{transform:rotate(360deg);}
}
.rec-cust-lookup-state{
margin-right:auto;
font-size:10px;
font-weight:800;
}
/* Customer found banner */
.rec-cust-found{
background:linear-gradient(155deg, rgba(34,197,94,.1), rgba(34,197,94,.02));
border:1.5px solid rgba(34,197,94,.4);
border-radius:12px;
padding:11px 13px;
margin-bottom:12px;
width:100%;max-width:100%;min-width:0;box-sizing:border-box;
overflow:hidden;
animation:recCustSlide .35s cubic-bezier(.16,1,.3,1);
}
@keyframes recCustSlide{
from{opacity:0;transform:translateY(-6px);}
to{opacity:1;transform:translateY(0);}
}
.rec-cust-found-h{display:flex;align-items:center;gap:10px;min-width:0;width:100%;}
.rec-cust-found-ico{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #22c55e, #15803d);
color:#fff;
border-radius:50%;
font-size:18px;
font-weight:900;
box-shadow:0 4px 10px rgba(34,197,94,.4);
flex-shrink:0;
}
.rec-cust-found-info{flex:1 1 0;min-width:0;overflow:hidden;}
.rec-cust-found-name{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:#fff;
margin-bottom:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;
}
.rec-cust-found-meta{
display:flex;
gap:7px;
flex-wrap:wrap;
font-size:10.5px;
min-width:0;max-width:100%;
}
.rec-cust-found-tier{
padding:1.5px 7px;
background:rgba(34,197,94,.15);
border:1px solid rgba(34,197,94,.3);
color:#86efac;
border-radius:10px;
font-weight:800;
white-space:nowrap;flex-shrink:0;
}
.rec-cust-found-stats{
color:var(--t3);
font-weight:700;
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.rec-cust-found-clear{
width:24px;height:24px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
color:var(--t3);
border-radius:7px;
cursor:pointer;
flex-shrink:0;
transition:all .2s;
}
.rec-cust-found-clear:hover{
background:rgba(239,68,68,.1);
border-color:rgba(239,68,68,.3);
color:#fca5a5;
}
/* 🆕 NEW CUSTOMER LUXURIOUS DROPDOWN BOX — appears below phone field */
.rec-new-cust-box{
position:relative;
display:flex !important;
align-items:center;
gap:14px;
width:100% !important;
box-sizing:border-box;
padding:14px 16px;
margin-top:10px;
margin-bottom:14px;
background:linear-gradient(135deg,
rgba(251,191,36,.08) 0%,
rgba(251,191,36,.02) 50%,
rgba(245,158,11,.06) 100%);
border:1px solid rgba(251,191,36,.35);
border-radius:14px;
overflow:hidden;
box-shadow:0 6px 20px rgba(251,191,36,.1), inset 0 1px 0 rgba(255,255,255,.05);
animation:newCustBoxDrop .4s cubic-bezier(.16,1,.3,1);
direction:rtl;
}
@keyframes newCustBoxDrop{
from{opacity:0;transform:translateY(-12px);max-height:0;padding-top:0;padding-bottom:0;margin-top:0;margin-bottom:0;}
to{opacity:1;transform:translateY(0);max-height:120px;}
}
/* Shine sweep */
.rec-new-cust-box-shine{
position:absolute;
top:0;
right:-100%;
width:50%;
height:100%;
background:linear-gradient(90deg, transparent, rgba(251,191,36,.18) 50%, transparent);
transform:skewX(-25deg);
animation:newCustShine 4s ease-in-out infinite;
pointer-events:none;
}
@keyframes newCustShine{
0%, 100%{right:-100%;}
50%{right:150%;}
}
/* Icon circle */
.rec-new-cust-box-icon{
flex-shrink:0;
width:44px;
height:44px;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg, #fbbf24, #d97706);
border-radius:50%;
box-shadow:0 4px 14px rgba(251,191,36,.4), inset 0 1px 0 rgba(255,255,255,.25);
position:relative;
z-index:2;
}
.rec-new-cust-box-icon-inner{
font-size:20px;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
/* Text content */
.rec-new-cust-box-content{
flex:1;
min-width:0;
text-align:right;
position:relative;
z-index:2;
}
.rec-new-cust-box-title{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:#fde68a;
letter-spacing:-.1px;
line-height:1.3;
margin-bottom:3px;
}
.rec-new-cust-box-sub{
font-family:var(--font);
font-size:11px;
font-weight:700;
color:rgba(253,230,138,.65);
line-height:1.4;
}
/* Mobile */
@media(max-width:480px){
.rec-new-cust-box{padding:12px 14px;gap:12px;}
.rec-new-cust-box-icon{width:40px;height:40px;}
.rec-new-cust-box-icon-inner{font-size:18px;}
.rec-new-cust-box-title{font-size:12.5px;}
.rec-new-cust-box-sub{font-size:10.5px;}
}
/* Hide old save row classes (legacy) */
.rec-cust-save-row,.rec-cust-save-btn,.rec-cust-save-hint{display:none !important;}
/* ═══ BRAND PICKER ═══ */
.brand-picker-trigger{
width:100%;
display:flex;
align-items:center;
gap:8px;
padding:9px 12px;
background:rgba(0,0,0,.3);
border:1.5px solid rgba(255,255,255,.08);
border-radius:10px;
color:#fff;
font-family:var(--font);
font-size:12px;
font-weight:700;
cursor:pointer;
text-align:right;
transition:all .2s;
}
.brand-picker-trigger:hover{
border-color:rgba(59,130,246,.4);
background:rgba(59,130,246,.05);
}
.brand-trigger-icon{font-size:16px;}
.brand-trigger-text{flex:1;text-align:right;color:rgba(255,255,255,.85);}
.brand-trigger-text.is-empty{color:rgba(255,255,255,.4);}
.brand-trigger-arrow{
color:var(--t3);
transition:transform .25s;
}
.brand-picker-trigger.is-open .brand-trigger-arrow{transform:rotate(180deg);}
/*
🆕 SMART MODEL PICKER — Matches brand picker style exactly
*/
.model-picker-trigger{
width:100%;
display:flex;
align-items:center;
gap:8px;
padding:9px 12px;
background:rgba(0,0,0,.3);
border:1.5px solid rgba(59,130,246,.18);
border-radius:10px;
color:#fff;
font-family:var(--font);
font-size:12px;
font-weight:700;
cursor:pointer;
text-align:right;
transition:all .2s;
direction:rtl;
-webkit-tap-highlight-color:transparent;
box-sizing:border-box;
min-height:42px;
}
.model-picker-trigger:hover{
border-color:rgba(59,130,246,.4);
background:rgba(59,130,246,.05);
}
.model-trigger-icon{
font-size:16px;
line-height:1;
flex-shrink:0;
}
.model-trigger-text{
flex:1;
text-align:right;
color:rgba(255,255,255,.85);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
min-width:0;
}
.model-picker-trigger.is-empty .model-trigger-text{
color:rgba(255,255,255,.4);
}
.model-picker-trigger.has-value .model-trigger-text{
color:#86efac;
font-weight:800;
}
.model-trigger-arrow{
color:var(--t3);
transition:transform .25s;
flex-shrink:0;
}
.model-picker-trigger.is-open .model-trigger-arrow{transform:rotate(180deg);}
/* Disabled state — when no brand selected */
.model-picker-trigger.is-disabled{
cursor:not-allowed;
border-color:rgba(251,191,36,.25);
background:rgba(251,191,36,.04);
}
.model-picker-trigger.is-disabled .model-trigger-text{
color:#fbbf24;
font-weight:700;
font-size:11.5px;
}
.model-picker-trigger.is-disabled .model-trigger-icon{
opacity:.5;
filter:grayscale(.5);
}
.model-picker-trigger.is-disabled .model-trigger-arrow{
opacity:.3;
}
.model-picker-trigger.is-disabled:hover{
border-color:rgba(251,191,36,.35);
background:rgba(251,191,36,.06);
}
/* Has-brand state (brand selected, no model yet) */
.model-picker-trigger.has-brand{
border-color:rgba(59,130,246,.3);
}
.model-picker-modal{
position:fixed;
inset:0;
z-index:9999;
background:rgba(0,0,0,.75);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
display:none;
align-items:flex-end;
justify-content:center;
padding:0;
}
.model-picker-modal.on{display:flex;}
.model-picker-sheet{
width:100%;
max-width:560px;
max-height:88vh;
background:linear-gradient(155deg, #1a1a1f 0%, #0f0f12 100%);
border:1px solid rgba(59,130,246,.2);
border-radius:22px 22px 0 0;
display:flex;
flex-direction:column;
overflow:hidden;
box-shadow:0 -20px 60px rgba(0,0,0,.6);
animation:modelSlideUp .35s cubic-bezier(.16,1,.3,1);
}
@media(min-width:640px){
.model-picker-modal{align-items:center;padding:24px;}
.model-picker-sheet{border-radius:22px;max-height:80vh;}
}
@keyframes modelSlideUp{from{transform:translateY(50px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.model-picker-drag{
width:42px;
height:5px;
background:linear-gradient(90deg, transparent, rgba(59,130,246,.4), transparent);
border-radius:3px;
margin:10px auto 4px;
flex-shrink:0;
}
@media(min-width:640px){.model-picker-drag{display:none;}}
.model-picker-h{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 18px;
border-bottom:1px solid rgba(255,255,255,.06);
flex-shrink:0;
gap:10px;
}
.model-picker-title{
display:flex;
align-items:center;
gap:10px;
font-family:var(--font);
font-size:14px;
font-weight:900;
color:#fff;
flex:1;
min-width:0;
}
.model-picker-title-brand{
display:inline-flex;
align-items:center;
gap:6px;
padding:4px 10px;
background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.05));
border:1px solid rgba(59,130,246,.35);
border-radius:8px;
font-size:12px;
color:#93c5fd;
flex-shrink:0;
}
.model-picker-title-brand-flag{font-size:14px;line-height:1;}
.model-picker-title-brand-name{font-weight:800;}
.model-picker-title-text{
font-size:13px;
color:rgba(255,255,255,.7);
flex:1;
text-align:right;
}
.model-picker-close{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:var(--t3);
border-radius:8px;
cursor:pointer;
transition:all .2s;
flex-shrink:0;
}
.model-picker-close:hover{background:rgba(239,68,68,.1);color:#fca5a5;border-color:rgba(239,68,68,.3);}
.model-picker-search{
position:relative;
padding:12px 16px;
border-bottom:1px solid rgba(255,255,255,.06);
flex-shrink:0;
}
.model-picker-search input{
width:100%;
padding:10px 36px 10px 32px;
background:rgba(0,0,0,.4);
border:1.5px solid rgba(255,255,255,.08);
color:#fff;
border-radius:10px;
font-family:var(--font);
font-size:13px;
font-weight:700;
text-align:right;
outline:none;
transition:all .2s;
box-sizing:border-box;
}
.model-picker-search input:focus{
border-color:rgba(59,130,246,.5);
box-shadow:0 0 0 3px rgba(59,130,246,.1);
}
.model-search-ico{
position:absolute;
right:26px;
top:50%;
transform:translateY(-50%);
color:var(--t3);
pointer-events:none;
}
.model-search-clear{
position:absolute;
left:24px;
top:50%;
transform:translateY(-50%);
width:22px;height:22px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);
color:var(--t3);
border-radius:6px;
cursor:pointer;
}
.model-search-count{
position:absolute;
left:52px;
top:50%;
transform:translateY(-50%);
font-family:var(--font);
font-size:10px;
font-weight:800;
color:rgba(59,130,246,.7);
background:rgba(59,130,246,.08);
border:1px solid rgba(59,130,246,.2);
padding:3px 8px;
border-radius:10px;
pointer-events:none;
white-space:nowrap;
}
.model-search-count:empty{display:none;}
.model-picker-list{
flex:1;
display:flex;
flex-direction:column;
gap:6px;
padding:12px;
overflow-y:auto;
overflow-x:hidden;
scroll-behavior:smooth;
}
.model-picker-list::-webkit-scrollbar{width:5px;}
.model-picker-list::-webkit-scrollbar-track{background:transparent;}
.model-picker-list::-webkit-scrollbar-thumb{background:rgba(59,130,246,.25);border-radius:3px;}
.model-picker-list::-webkit-scrollbar-thumb:hover{background:rgba(59,130,246,.5);}
.model-item{
position:relative;
display:grid !important;
grid-template-columns:42px 1fr auto !important;
gap:12px !important;
align-items:center;
padding:11px 14px;
background:linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.005) 100%);
border:1px solid rgba(255,255,255,.06);
border-radius:12px;
cursor:pointer;
transition:background .25s, border-color .25s;
overflow:hidden;
direction:rtl;
text-align:right;
width:100%;
box-sizing:border-box;
min-height:56px;
}
.model-item::before{
content:'';
position:absolute;
right:0;
top:50%;
transform:translateY(-50%) scaleY(0);
width:3px;
height:55%;
background:linear-gradient(180deg, #60a5fa, #3b82f6);
border-radius:3px 0 0 3px;
transition:transform .3s cubic-bezier(.4,0,.2,1);
box-shadow:0 0 12px rgba(59,130,246,.5);
}
.model-item:hover{
background:linear-gradient(180deg, rgba(59,130,246,.07) 0%, rgba(59,130,246,.01) 100%);
border-color:rgba(59,130,246,.35);
}
.model-item:hover::before{transform:translateY(-50%) scaleY(1);}
.model-item:active{transform:scale(.99);}
.model-item-icon{
grid-column:1;
width:42px;
height:42px;
min-width:42px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius:50%;
font-size:19px;
line-height:42px;
background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.04));
border:1.5px solid rgba(59,130,246,.25);
box-shadow:0 4px 10px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.1);
color:#93c5fd;
text-align:center;
vertical-align:middle;
font-style:normal;
letter-spacing:0;
transition:transform .3s;
}
.model-item:hover .model-item-icon{
transform:scale(1.06);
background:linear-gradient(135deg, rgba(59,130,246,.25), rgba(59,130,246,.06));
}
.model-item-text{
grid-column:2;
display:flex;
flex-direction:column;
gap:2px;
min-width:0;
text-align:right;
direction:rtl;
overflow:hidden;
}
.model-item-name{
font-family:var(--font);
font-size:14.5px;
font-weight:800;
color:#F4F0E6;
line-height:1.25;
letter-spacing:-.1px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:color .25s;
}
.model-item-en{
font-family:'Outfit',var(--font);
font-size:10px;
font-weight:600;
color:rgba(59,130,246,.55);
letter-spacing:1.2px;
text-transform:uppercase;
direction:ltr;
text-align:right;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
transition:color .25s;
}
.model-item:hover .model-item-name{color:#fff;}
.model-item:hover .model-item-en{color:rgba(147,197,253,.85);}
.model-item-cat{
grid-column:3;
display:inline-flex;
align-items:center;
justify-content:center;
padding:4px 9px;
font-family:var(--font);
font-size:10px;
font-weight:800;
letter-spacing:.2px;
color:rgba(59,130,246,.7);
background:rgba(59,130,246,.07);
border:1px solid rgba(59,130,246,.2);
border-radius:7px;
transition:all .25s;
white-space:nowrap;
}
.model-item:hover .model-item-cat{
color:#93c5fd;
background:rgba(59,130,246,.15);
border-color:rgba(59,130,246,.35);
}
.model-item.is-selected{
background:linear-gradient(180deg, rgba(59,130,246,.16) 0%, rgba(59,130,246,.04) 100%);
border-color:rgba(59,130,246,.55);
box-shadow:0 6px 18px rgba(59,130,246,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
.model-item.is-selected::before{transform:translateY(-50%) scaleY(1);}
.model-item.is-selected .model-item-name{color:#93c5fd;}
.model-item.is-selected .model-item-cat{
background:linear-gradient(135deg, #60a5fa, #3b82f6);
border-color:transparent;
color:#fff;
box-shadow:0 3px 10px rgba(59,130,246,.45);
}
.model-section-h{
padding:10px 4px 4px;
font-family:var(--font);
font-size:10.5px;
font-weight:900;
color:#60a5fa;
letter-spacing:.7px;
display:flex;
align-items:center;
gap:10px;
margin-top:6px;
text-transform:uppercase;
width:100%;
box-sizing:border-box;
}
.model-section-h:first-child{margin-top:0;}
.model-section-h-line{
flex:1;
height:1px;
background:linear-gradient(90deg, rgba(59,130,246,.3) 0%, rgba(59,130,246,.05) 50%, transparent 100%);
}
.model-empty{padding:50px 20px;text-align:center;}
.model-empty-ico{font-size:42px;margin-bottom:10px;opacity:.45;}
.model-empty-t{font-family:var(--font);font-size:14px;font-weight:800;color:var(--t2);margin-bottom:4px;}
.model-empty-sub{font-family:var(--font);font-size:11px;font-weight:600;color:var(--t3);line-height:1.5;}
.model-picker-footer{
padding:10px 14px;
border-top:1px solid rgba(255,255,255,.06);
background:rgba(0,0,0,.2);
flex-shrink:0;
}
.model-picker-custom{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:9px 14px;
background:linear-gradient(135deg, rgba(59,130,246,.1), rgba(59,130,246,.03));
border:1px solid rgba(59,130,246,.3);
color:#93c5fd;
border-radius:9px;
font-family:var(--font);
font-size:11.5px;
font-weight:800;
cursor:pointer;
transition:all .2s;
}
.model-picker-custom:hover{
background:linear-gradient(135deg, rgba(59,130,246,.18), rgba(59,130,246,.06));
border-color:rgba(59,130,246,.5);
color:#bfdbfe;
}
/* Mobile */
@media(max-width:480px){
.model-item{padding:10px 12px;gap:10px !important;min-height:52px;}
.model-item-icon{width:38px !important;height:38px !important;min-width:38px !important;font-size:17px;line-height:38px;}
.model-item-name{font-size:13.5px;}
.model-item-en{font-size:9.5px;letter-spacing:1px;}
.model-item-cat{font-size:9px;padding:3px 7px;}
.model-picker-h{padding:14px;}
.model-picker-title-text{font-size:12px;}
}
/* Brand picker modal */
.brand-picker-modal{
position:fixed;
inset:0;
z-index:9999;
background:rgba(0,0,0,.75);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
display:none;
align-items:flex-end;
justify-content:center;
padding:0;
animation:brandFadeIn .25s ease-out;
}
.brand-picker-modal.on{display:flex;}
@keyframes brandFadeIn{from{opacity:0;}to{opacity:1;}}
.brand-picker-sheet{
width:100%;
max-width:560px;
max-height:88vh;
background:linear-gradient(155deg, #1a1a1f 0%, #0f0f12 100%);
border:1px solid rgba(201,168,76,.2);
border-radius:22px 22px 0 0;
display:flex;
flex-direction:column;
overflow:hidden;
box-shadow:0 -20px 60px rgba(0,0,0,.6);
animation:brandSlideUp .35s cubic-bezier(.16,1,.3,1);
}
@media(min-width:640px){
.brand-picker-modal{align-items:center;padding:24px;}
.brand-picker-sheet{border-radius:22px;max-height:80vh;}
}
@keyframes brandSlideUp{from{transform:translateY(50px);opacity:0;}to{transform:translateY(0);opacity:1;}}
.brand-picker-h{
display:flex;
align-items:center;
justify-content:space-between;
padding:16px 18px;
border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-picker-title{
display:flex;
align-items:center;
gap:8px;
font-family:var(--font);
font-size:14px;
font-weight:900;
color:#fff;
}
.brand-picker-title svg{color:#60a5fa;}
.brand-picker-close{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
color:var(--t3);
border-radius:8px;
cursor:pointer;
transition:all .2s;
}
.brand-picker-close:hover{background:rgba(239,68,68,.1);color:#fca5a5;border-color:rgba(239,68,68,.3);}
.brand-picker-search{
position:relative;
padding:12px 16px;
border-bottom:1px solid rgba(255,255,255,.06);
}
.brand-picker-search input{
width:100%;
padding:10px 36px 10px 32px;
background:rgba(0,0,0,.4);
border:1.5px solid rgba(255,255,255,.08);
color:#fff;
border-radius:10px;
font-family:var(--font);
font-size:13px;
font-weight:700;
text-align:right;
outline:none;
transition:all .2s;
}
.brand-picker-search input:focus{
border-color:rgba(59,130,246,.5);
box-shadow:0 0 0 3px rgba(59,130,246,.1);
}
.brand-search-ico{
position:absolute;
right:26px;
top:50%;
transform:translateY(-50%);
color:var(--t3);
pointer-events:none;
}
.brand-search-clear{
position:absolute;
left:24px;
top:50%;
transform:translateY(-50%);
width:22px;height:22px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.1);
color:var(--t3);
border-radius:6px;
cursor:pointer;
}
.brand-search-count{
position:absolute;
left:52px;
top:50%;
transform:translateY(-50%);
font-family:var(--font);
font-size:10px;
font-weight:800;
color:rgba(201,168,76,.7);
background:rgba(201,168,76,.08);
border:1px solid rgba(201,168,76,.2);
padding:3px 8px;
border-radius:10px;
pointer-events:none;
white-space:nowrap;
}
.brand-search-count:empty{display:none;}
.brand-search-count.has-results{
color:#86efac;
background:rgba(34,197,94,.1);
border-color:rgba(34,197,94,.25);
}
.brand-picker-tabs{
display:flex !important;
gap:7px;
padding:12px 14px;
overflow-x:auto;
overflow-y:hidden;
border-bottom:1px solid rgba(255,255,255,.06);
scrollbar-width:none;
-ms-overflow-style:none;
flex-shrink:0 !important;
min-height:48px;
background:linear-gradient(180deg, rgba(0,0,0,.15), transparent);
-webkit-overflow-scrolling:touch;
}
.brand-picker-tabs::-webkit-scrollbar{display:none;height:0;width:0;}
.brand-picker-tabs::-webkit-scrollbar-thumb{background:transparent;}
.brand-tab{
flex-shrink:0;
display:inline-flex !important;
align-items:center;
gap:6px;
padding:8px 13px;
background:linear-gradient(155deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.08);
color:var(--t3);
border-radius:22px;
font-family:var(--font);
font-weight:800;
cursor:pointer;
white-space:nowrap;
transition:background .2s, border-color .2s, color .2s, transform .2s, box-shadow .2s;
-webkit-tap-highlight-color:transparent;
line-height:1.2;
min-height:34px;
}
.brand-tab-emoji{
font-size:14px;
line-height:1;
display:inline-flex;
align-items:center;
}
.brand-tab-label{
font-size:11px;
font-weight:800;
letter-spacing:-.1px;
}
.brand-tab:hover{
background:linear-gradient(155deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
border-color:rgba(255,255,255,.15);
color:var(--t1);
transform:translateY(-1px);
}
.brand-tab.is-active{
background:linear-gradient(135deg, rgba(201,168,76,.22), rgba(201,168,76,.06));
border-color:rgba(201,168,76,.45);
color:#E8C96A;
box-shadow:0 4px 12px rgba(201,168,76,.15), inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-tab.is-active .brand-tab-emoji{
filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
}
@media(max-width:480px){
.brand-picker-tabs{padding:10px 12px;gap:6px;min-height:44px;}
.brand-tab{padding:7px 11px;min-height:32px;}
.brand-tab-emoji{font-size:13px;}
.brand-tab-label{font-size:10.5px;}
}
/* (Old grid brand CSS removed — using new design above) */
.brand-picker-footer{
padding:10px 14px;
border-top:1px solid rgba(255,255,255,.06);
background:rgba(0,0,0,.2);
}
.brand-picker-custom{
width:100%;
display:flex;
align-items:center;
justify-content:center;
gap:6px;
padding:9px 14px;
background:linear-gradient(135deg, rgba(201,168,76,.1), rgba(201,168,76,.03));
border:1px solid rgba(201,168,76,.3);
color:#fde68a;
border-radius:9px;
font-family:var(--font);
font-size:11.5px;
font-weight:800;
cursor:pointer;
transition:all .2s;
}
.brand-picker-custom:hover{
background:linear-gradient(135deg, rgba(201,168,76,.18), rgba(201,168,76,.06));
border-color:rgba(201,168,76,.5);
}
/* Mobile */
@media(max-width:640px){
.rec-v3-wrap{padding:2px 2px 12px;}
.rec-v3-hdr{flex-direction:column-reverse;align-items:stretch;gap:14px;}
.rec-v3-identity{justify-content:flex-end;}
.rec-v3-id-name{font-size:16px;}
.rec-v3-hdr-actions{justify-content:center;}
.rec-v3-hdr-btn{width:36px;height:36px;}
.rec-v3-day-row{justify-content:center;}
}
/* ═══ POLISHED SECTIONS (Inspection + Payment subsections) ═══ */
.rec-section{
position:relative;
}
.rec-section-h{
display:flex;
align-items:center;
gap:8px;
margin-bottom:10px;
}
.rec-section-h-bar{
width:3px;
height:14px;
border-radius:2px;
}
.rec-section-h-title{
display:flex;
align-items:center;
gap:6px;
font-family:var(--font);
font-size:12px;
font-weight:900;
color:#fff;
letter-spacing:.2px;
}
.rec-section-h-ico{font-size:13px;}
/* Price input with suffix */
.rec-price-input{
position:relative;
}
.rec-price-input input{
width:100%;
padding-left:32px !important;
}
.rec-price-suffix{
position:absolute;
left:12px;
top:50%;
transform:translateY(-50%);
color:#fbbf24;
font-weight:900;
font-size:14px;
pointer-events:none;
}
/* Toggle rows — premium switch-style */
.rec-toggle-row{
display:flex;
align-items:center;
gap:10px;
padding:11px 14px;
background:linear-gradient(155deg, rgba(255,255,255,.025), rgba(255,255,255,.005));
border:1px solid rgba(255,255,255,.07);
border-radius:12px;
cursor:pointer;
margin-bottom:12px;
transition:all .25s;
}
.rec-toggle-row:hover{
background:linear-gradient(155deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
border-color:rgba(255,255,255,.12);
}
.rec-toggle-row input[type="checkbox"]{
position:absolute;
opacity:0;
pointer-events:none;
}
.rec-toggle-switch{
flex-shrink:0;
width:36px;
height:20px;
background:rgba(255,255,255,.08);
border-radius:20px;
position:relative;
transition:all .25s;
}
.rec-toggle-switch::after{
content:'';
position:absolute;
top:2px;
right:2px;
width:16px;height:16px;
background:#fff;
border-radius:50%;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 2px 5px rgba(0,0,0,.3);
}
.rec-toggle-row input:checked + .rec-toggle-switch{
background:linear-gradient(135deg, #22c55e, #15803d);
}
.rec-toggle-row input:checked + .rec-toggle-switch::after{
right:auto;
left:2px;
}
.rec-toggle-text{flex:1;}
.rec-toggle-text-main{
display:block;
font-family:var(--font);
font-size:12px;
font-weight:800;
color:#fff;
margin-bottom:2px;
}
.rec-toggle-text-sub{
display:block;
font-size:10.5px;
color:var(--t3);
font-weight:700;
}
.rec-toggle-badge{
padding:3px 9px;
background:rgba(34,197,94,.13);
border:1px solid rgba(34,197,94,.3);
color:#86efac;
border-radius:14px;
font-size:11px;
font-weight:800;
}
/* Sub-fields container */
.rec-sub-fields{
background:linear-gradient(155deg, rgba(34,197,94,.06), rgba(34,197,94,.01));
border:1px solid rgba(34,197,94,.22);
border-radius:11px;
padding:12px;
margin-bottom:12px;
animation:recCustSlide .35s cubic-bezier(.16,1,.3,1);
}
.rec-sub-fields-h{
display:flex;
align-items:center;
gap:7px;
font-size:10.5px;
font-weight:800;
color:#4ade80;
margin-bottom:9px;
letter-spacing:.2px;
}
.rec-sub-fields-h-dot{
width:6px;height:6px;
border-radius:50%;
box-shadow:0 0 6px currentColor;
}
.rec-sub-fields-hint{
font-size:10px;
color:var(--t3);
line-height:1.6;
padding-top:7px;
border-top:1px dashed rgba(255,255,255,.06);
font-weight:700;
}
/* VAT card — premium receipt-style */
.rec-vat-card{
background:linear-gradient(155deg, rgba(245,158,11,.08), rgba(245,158,11,.015));
border:1px solid rgba(245,158,11,.3);
border-radius:12px;
margin-bottom:14px;
overflow:hidden;
animation:recCustSlide .35s cubic-bezier(.16,1,.3,1);
}
.rec-vat-card-h{
display:flex;
align-items:center;
gap:7px;
padding:9px 14px;
background:linear-gradient(155deg, rgba(245,158,11,.13), rgba(245,158,11,.03));
border-bottom:1px solid rgba(245,158,11,.2);
}
.rec-vat-card-h-ico{font-size:14px;}
.rec-vat-card-h-t{
font-family:var(--font);
font-size:11.5px;
font-weight:900;
color:#fde68a;
letter-spacing:.2px;
}
.rec-vat-card-body{padding:11px 14px;}
.rec-vat-row{
display:flex;
justify-content:space-between;
align-items:center;
padding:4px 0;
font-size:11.5px;
}
.rec-vat-row-l{
color:var(--t3);
font-weight:700;
}
.rec-vat-row-l-tax{color:#fbbf24;}
.rec-vat-row-v{
font-family:var(--font);
font-weight:800;
color:#fff;
}
.rec-vat-row-v-tax{color:#fbbf24;}
.rec-vat-divider{
height:1px;
background:linear-gradient(90deg, transparent, rgba(245,158,11,.3), transparent);
margin:5px 0;
}
.rec-vat-row-total{
padding-top:4px;
}
.rec-vat-row-total .rec-vat-row-l{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:#fff;
}
.rec-vat-row-total .rec-vat-row-v{
font-family:var(--font);
font-size:15px;
font-weight:900;
color:#fbbf24;
}
/* ═══ POLISHED SECTIONS END ═══ */
.rec-pro-card{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
overflow:hidden;
width:100%;box-sizing:border-box;
transition:border-color .25s, box-shadow .25s;
}
.rec-pro-card:hover{
border-color:var(--bdr2);
box-shadow:0 4px 14px rgba(0,0,0,.2);
}
.rec-pro-card-h{
display:flex;align-items:center;gap:8px;
padding:7px 10px;
background:linear-gradient(90deg,rgba(15,11,0,.4),rgba(25,18,0,.3));
border-bottom:1px solid var(--bdr);
}
.rec-pro-card-ico{
width:38px;height:38px;
border-radius:11px;
display:flex;align-items:center;justify-content:center;
color:#fff;
flex-shrink:0;
box-shadow:0 4px 12px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.1) inset;
}
.rec-pro-card-title{
font-family:var(--font);
font-size:13.5px;font-weight:900;
color:var(--t1);
letter-spacing:.2px;
}
.rec-pro-card-sub{
font-size:10.5px;color:var(--t3);
margin-top:2px;
}
.rec-pro-card-body{
padding:6px 8px 8px;
}
/* Grid layouts */
.rec-form-grid{
display:grid;
gap:10px;
margin-bottom:0;
}
.rec-form-grid.rec-grid-2{grid-template-columns:1fr 1fr;}
.rec-form-grid.rec-grid-3{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:480px){
.rec-form-grid.rec-grid-2,
.rec-form-grid.rec-grid-3{grid-template-columns:1fr;}
}
/* Reuse staff form field styling */
.rec-pro-card .staff-form-f{margin-bottom:5px;}
.rec-pro-card .staff-form-f:last-child{margin-bottom:0;}
.rec-pro-card .staff-form-f label{
display:block;
font-family:var(--font);font-size:11px;font-weight:800;
color:var(--g2);
margin-bottom:6px;
letter-spacing:.2px;
}
.rec-pro-card .staff-form-f input:not([type="checkbox"]),
.rec-pro-card .staff-form-f select,
.rec-pro-card .staff-form-f textarea{
width:100%;
background:var(--d4);
border:1px solid var(--bdr);
border-radius:10px;
padding:11px 13px;
font-family:var(--font);font-size:12.5px;
color:var(--t1);
transition:all .2s;
box-sizing:border-box;
}
.rec-pro-card .staff-form-f input:focus,
.rec-pro-card .staff-form-f select:focus,
.rec-pro-card .staff-form-f textarea:focus{
outline:none;
border-color:var(--g2);
background:var(--d3);
box-shadow:0 0 0 3px rgba(201,168,76,.1);
}
.rec-pro-card .staff-form-f textarea{font-family:var(--body);}
/* VAT preview when populated */
#r-vat-preview{display:none;}
#r-vat-preview.on{display:flex !important;}
/* Issue button — premium gold style matching edit modal save */
.rec-issue-btn{
width:100%;
display:flex;align-items:center;justify-content:center;gap:10px;
padding:16px 20px;
background:linear-gradient(145deg,var(--g1),var(--g2));
border:1.5px solid rgba(255,247,214,.4);
color:#1a1206;
border-radius:14px;
font-family:var(--font);font-size:15px;font-weight:900;
letter-spacing:.4px;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
box-shadow:
0 8px 24px rgba(201,168,76,.45),
0 2px 6px rgba(0,0,0,.2),
0 0 0 1px rgba(255,255,255,.2) inset,
0 1px 0 rgba(255,255,255,.4) inset;
position:relative;overflow:hidden;
white-space:nowrap;
}
.rec-issue-btn::before{
content:'';position:absolute;inset:0;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
transform:translateX(-100%);
transition:transform .7s cubic-bezier(.34,1.56,.64,1);
pointer-events:none;
}
.rec-issue-btn:hover{
transform:translateY(-2px);
box-shadow:
0 16px 36px rgba(201,168,76,.55),
0 4px 10px rgba(0,0,0,.25),
0 0 0 1px rgba(255,255,255,.3) inset,
0 1px 0 rgba(255,255,255,.5) inset;
}
.rec-issue-btn:hover::before{transform:translateX(100%);}
.rec-issue-btn:active{transform:scale(.97);}
.rec-issue-btn svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.2));}
.rec-issue-btn .rec-issue-arrow{
opacity:.6;
transition:transform .25s,opacity .25s;
}
.rec-issue-btn:hover .rec-issue-arrow{
transform:translateX(-3px);
opacity:1;
}
/* Desktop 2-col in reception */
@media(min-width:1024px){
/* 🎨 تخطيط ديسكتوب احترافي — كل المحتوى ضمن عرض موحّد متناسق
الهيدر + النموذج بنفس العرض تماماً، والمعاينة لوحة جانبية لاصقة أنيقة */
.rec-v3-wrap{max-width:1160px;}
.rec-v3-hdr{max-width:100%;}
.rec-body{
display:grid;
grid-template-columns:minmax(0,1fr) 360px;
grid-template-areas:"form preview";
gap:22px;
align-items:start;
padding:0;
max-width:100%;
margin:0;
width:100%;
overflow-x:hidden;
}
.rec-form-side{
grid-area:form;
min-width:0;width:100%;
display:flex;flex-direction:column;gap:16px;
}
.rec-form-side .rec-pro-card{width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
.rec-form-side .staff-form-f{width:100%;max-width:100%;min-width:0;box-sizing:border-box;}
.rec-form-side .staff-form-f input,
.rec-form-side .staff-form-f select,
.rec-form-side .staff-form-f textarea{width:100%;max-width:100%;box-sizing:border-box;}
/* 🔒 أي عنصر يظهر ديناميكياً (بطاقة العميل، السمعة، الشركة) لا يتجاوز العمود أبداً */
.rec-form-side *{min-width:0;}
.rec-form-side .rec-cust-found,
.rec-form-side .rec-company-box,
.rec-form-side #rec-reputation,
.rec-form-side .rec-new-cust-box,
.rec-form-side .rec-fraud-warning{width:100%;max-width:100%;box-sizing:border-box;overflow:hidden;}
.rec-form-side .rec-cust-found-stats,
.rec-form-side .rec-cust-found-name{overflow:hidden;text-overflow:ellipsis;}
.rec-form-side .rec-cust-found-meta{flex-wrap:wrap;min-width:0;}
/* لوحة المعاينة — لاصقة وأنيقة على الجانب */
.rec-preview-side{
grid-area:preview;
width:360px;max-width:360px;
position:sticky;top:18px;
align-self:start;
}
}
@media(min-width:1024px) and (max-width:1199px){
.rec-body{grid-template-columns:minmax(0,1fr) 320px;gap:18px;}
.rec-preview-side{width:320px;max-width:320px;}
}
@media(max-width:1023px){
.rec-form-side{display:flex;flex-direction:column;gap:12px;}
.rec-preview-side{margin-top:4px;}
}
/* Mobile: full width fields */
@media(max-width:640px){
.rec-body{padding:0;gap:4px;}
.rec-hdr{height:54px;padding:0 14px;}
.rec-hdr-title{font-size:14px;}
.rec-today-badge span:first-child{display:none;}
}
/* Flash in reception */
#rec-flash{
border-radius:var(--r8);padding:0 13px;font-size:12px;
opacity:0;height:0;overflow:hidden;border:1px solid transparent;
display:flex;align-items:center;gap:7px;transition:all .3s;
}
#rec-flash.on{opacity:1;height:auto;padding:9px 13px;}
/* Ticket counter pulse */
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.4);}50%{box-shadow:0 0 0 6px rgba(201,168,76,0);}}
.rec-today-badge.pulse{animation:pulse 1s;}
/* Unpaid */
#rec-unpaid-banner{background:rgba(239,68,68,.07);border:1.5px solid rgba(239,68,68,.22);border-radius:8px;padding:8px 11px;display:none;align-items:center;gap:7px;font-size:11px;color:var(--rd);margin-top:8px;}
#rec-unpaid-banner.on{display:flex;}
/* ══════════════════════════════════════════════════
DASHBOARD SCREEN — لوحة التحكم
══════════════════════════════════════════════════ */
#s-dash{flex-direction:column;background:var(--d0);}
/* Dash header */
.dash-hdr{
height:62px;
background:linear-gradient(90deg,rgba(5,5,7,.98),var(--d2) 40%,var(--d2) 60%,rgba(5,5,7,.98));
border-bottom:1px solid var(--bdr);
display:flex;align-items:center;justify-content:space-between;
padding:0 20px;
position:sticky;top:0;z-index:300;
box-shadow:0 1px 0 var(--bdr),0 4px 24px rgba(0,0,0,.6);
flex-shrink:0;
}
.dash-hdr-left{display:flex;align-items:center;gap:10px;}
.dash-back{
display:flex;align-items:center;gap:7px;
padding:8px 13px;background:var(--d4);border:1px solid var(--bdr);
border-radius:var(--r8);font-size:12px;font-weight:700;color:var(--t2);cursor:pointer;
}
.dash-back:hover{background:var(--d5);color:var(--t1);}
.dash-hdr-name{font-family:var(--font);font-size:14px;font-weight:900;color:var(--g2);}
.dash-hdr-sub{font-size:9px;color:var(--t3);margin-top:1px;}
.dash-hdr-right{display:flex;align-items:center;gap:7px;}
/* Dash sidebar */
.dash-body{display:flex;flex:1;min-height:0;overflow:hidden;}
.dash-sb{
width:320px;
background:linear-gradient(180deg,var(--d2),var(--d1));
border-left:none;
display:flex;flex-direction:column;flex-shrink:0;
overflow-y:auto;
position:sticky;top:0;
height:100vh;
}
/* ═══════════════════════════════════════════
Luxurious "New Day" button — full sidebar width
═══════════════════════════════════════════ */
.sb-newday-btn{
position:relative;
width:100%;
padding:13px 14px;
background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(21,128,61,.04));
border:1px solid rgba(34,197,94,.3);
border-radius:14px;
cursor:pointer;
overflow:hidden;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
box-shadow:
0 4px 14px rgba(0,0,0,.15),
0 0 0 1px rgba(34,197,94,.05) inset;
}
.sb-newday-btn::before{
content:'';position:absolute;inset:0;
background:linear-gradient(120deg,transparent 30%,rgba(34,197,94,.15) 50%,transparent 70%);
transform:translateX(-100%);
transition:transform .8s cubic-bezier(.34,1.56,.64,1);
pointer-events:none;
}
.sb-newday-btn:hover{
background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(21,128,61,.08));
border-color:rgba(34,197,94,.5);
transform:translateY(-2px);
box-shadow:
0 10px 28px rgba(34,197,94,.25),
0 0 0 1px rgba(34,197,94,.15) inset;
}
.sb-newday-btn:hover::before{transform:translateX(100%);}
.sb-newday-btn:active{transform:scale(.97);}
.sb-nd-glow{
position:absolute;
top:-40px;left:-40px;
width:140px;height:140px;
background:radial-gradient(circle,rgba(34,197,94,.18),transparent 65%);
border-radius:50%;
pointer-events:none;
opacity:0;
transition:opacity .35s ease;
}
.sb-newday-btn:hover .sb-nd-glow{opacity:1;}
.sb-nd-content{
position:relative;z-index:1;
display:flex;align-items:center;gap:11px;
}
.sb-nd-ico{
width:38px;height:38px;
flex-shrink:0;
background:linear-gradient(135deg,#22C55E,#15803d);
color:#fff;
border-radius:11px;
display:flex;align-items:center;justify-content:center;
box-shadow:
0 4px 12px rgba(34,197,94,.4),
0 0 0 1px rgba(255,255,255,.15) inset,
0 1px 0 rgba(255,255,255,.25) inset;
}
.sb-nd-txt{flex:1;min-width:0;text-align:right;}
.sb-nd-title{
font-family:var(--font);
font-size:13px;font-weight:900;
color:#4ade80;
letter-spacing:.2px;
}
.sb-nd-sub{
font-size:10px;
color:var(--t3);
margin-top:2px;
}
.sb-nd-arrow{
color:#4ade80;
opacity:.5;
transition:transform .25s,opacity .25s;
flex-shrink:0;
}
.sb-newday-btn:hover .sb-nd-arrow{
transform:translateX(-4px);
opacity:1;
}
/* ═══════════════════════════════════════════
Sidebar bottom panel — cloud status + actions
═══════════════════════════════════════════ */
.sb-bottom-panel{
margin-top:auto;
padding:12px;
border-top:1px solid var(--bdr);
background:linear-gradient(180deg,transparent,rgba(0,0,0,.15));
display:flex;flex-direction:column;gap:9px;
}
/* Cloud status pill */
.sb-cloud-status{
display:flex;align-items:center;gap:10px;
padding:10px 12px;
background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(34,197,94,.02));
border:1px solid rgba(34,197,94,.22);
border-radius:11px;
transition:all .25s ease;
}
.sb-cloud-status.syncing{
background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.02));
border-color:rgba(245,158,11,.25);
}
.sb-cloud-status.offline{
background:linear-gradient(135deg,rgba(239,68,68,.08),rgba(239,68,68,.02));
border-color:rgba(239,68,68,.25);
}
.sb-cloud-dot{
width:9px;height:9px;
border-radius:50%;
flex-shrink:0;
background:#22C55E;
box-shadow:0 0 8px rgba(34,197,94,.6);
animation:sbCloudPulse 2.5s ease-in-out infinite;
}
.sb-cloud-status.syncing .sb-cloud-dot{
background:#F59E0B;
box-shadow:0 0 8px rgba(245,158,11,.6);
animation:sbCloudPulse 1s ease-in-out infinite;
}
.sb-cloud-status.offline .sb-cloud-dot{
background:#EF4444;
box-shadow:0 0 8px rgba(239,68,68,.6);
animation:none;
}
@keyframes sbCloudPulse{
0%, 100%{opacity:1;transform:scale(1);}
50%{opacity:.5;transform:scale(.85);}
}
.sb-cloud-info{flex:1;min-width:0;}
.sb-cloud-lbl{
font-family:var(--font);
font-size:11px;font-weight:800;
color:#4ade80;
letter-spacing:.2px;
}
.sb-cloud-status.syncing .sb-cloud-lbl{color:#fbbf24;}
.sb-cloud-status.offline .sb-cloud-lbl{color:#f87171;}
.sb-cloud-sub{
font-size:9.5px;
color:var(--t3);
margin-top:1px;
}
/* Action row: theme + logout */
.sb-action-row{
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:8px;
}
.sb-icon-btn{
flex-direction:column;
gap:4px !important;
padding:9px 4px !important;
font-size:9.5px !important;
}
.sb-icon-btn span{ font-size:9.5px; }
.sb-icon-btn{
display:flex;align-items:center;justify-content:center;gap:7px;
padding:11px 10px;
border-radius:11px;
font-family:var(--font);
font-size:11px;font-weight:800;
cursor:pointer;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
border:1px solid;
background:rgba(255,255,255,.03);
}
.sb-theme-btn{
color:var(--t2);
border-color:var(--bdr);
}
.sb-theme-btn:hover{
color:var(--g2);
border-color:rgba(201,168,76,.35);
background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.02));
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(201,168,76,.2);
}
.sb-logout-btn{
color:#f87171;
border-color:rgba(239,68,68,.25);
}
.sb-logout-btn:hover{
background:linear-gradient(135deg,#EF4444,#b91c1c);
color:#fff;
border-color:transparent;
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(239,68,68,.35);
}
.sb-icon-btn:active{transform:scale(.94);}
/* Light theme adjustments */
html[data-theme='light'] .sb-newday-btn{
background:linear-gradient(135deg,rgba(34,197,94,.08),rgba(21,128,61,.02));
}
html[data-theme='light'] .sb-bottom-panel{
background:linear-gradient(180deg,transparent,rgba(0,0,0,.04));
}
.dash-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;min-width:0;}
/* Dash mobile tabs */
.dash-mob-tabs{
display:none !important;
background:var(--d2);
border-bottom:1px solid var(--bdr);
overflow-x:auto;flex-shrink:0;
-webkit-overflow-scrolling:touch;scrollbar-width:none;
position:relative;z-index:5;
box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.dash-mob-tabs::-webkit-scrollbar{display:none;}
.dash-mob-tab{
flex:none;padding:13px 14px 12px;
font-size:12px;font-weight:700;color:var(--t3);cursor:pointer;
border-bottom:2.5px solid transparent;white-space:nowrap;position:relative;
}
.dash-mob-tab.on{color:var(--g1);border-bottom-color:var(--g1);}
.dash-mob-tab.on::before{
content:'';position:absolute;
bottom:-1px;left:15%;right:15%;
height:2.5px;
background:linear-gradient(90deg,var(--g3),var(--g1),var(--g3));
border-radius:2px 2px 0 0;
}
/* Dash day bar */
.dash-day-bar{
background:linear-gradient(90deg,rgba(201,168,76,.07),rgba(201,168,76,.02));
border-bottom:1px solid var(--bdr);
padding:10px 14px;
display:flex;align-items:center;justify-content:space-between;gap:10px;
flex-shrink:0;position:relative;z-index:5;
}
/* Dash bottom nav */
/* ═════════════════════════════════════════
MOBILE BOTTOM: TWO SEPARATE FLOATING ELEMENTS
- Apple-style menu pill (left)
- Pulsing circular reception FAB (right)
═════════════════════════════════════════ */
.dash-bot-nav{
display:none;
position:fixed;
bottom:0;
inset-inline-start:0;
inset-inline-end:0;
z-index:400;
padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));
background:transparent;
pointer-events:none;
/* Use flex to position elements at opposite ends */
display:flex !important;
align-items:center;
justify-content:space-between;
gap:14px;
}
.dash-bot-nav{display:none;}
@media(max-width:1023px){
.dash-bot-nav{display:flex !important;}
}
/* Apple-style menu pill — rectangular, sleek */
.mob-menu-pill{
pointer-events:all;
position:relative;
display:flex !important;align-items:center;justify-content:center;
gap:5px;
height:56px;min-width:70px;padding:0 22px;
background:linear-gradient(155deg,rgba(20,22,26,.92),rgba(14,16,20,.96));
backdrop-filter:blur(32px) saturate(180%);
-webkit-backdrop-filter:blur(32px) saturate(180%);
border:1.5px solid rgba(201,168,76,.25);
border-radius:20px;
cursor:pointer;
box-shadow:
0 14px 38px rgba(0,0,0,.65),
0 4px 12px rgba(0,0,0,.5),
0 0 0 1px rgba(255,255,255,.04) inset,
0 1px 0 rgba(255,255,255,.08) inset,
0 0 24px rgba(201,168,76,.12);
transition:all .25s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
flex-direction:column;
overflow:hidden;
}
/* Subtle inner glow on hover/active */
.mob-menu-pill::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at center, rgba(201,168,76,.15), transparent 70%);
opacity:0;
transition:opacity .3s;
pointer-events:none;
}
.mob-menu-pill:hover::before{opacity:1;}
.mob-menu-pill:active{
transform:scale(.93);
background:linear-gradient(155deg,rgba(28,30,34,.92),rgba(20,22,26,.96));
}
.mob-menu-pill .mmp-line{
display:block;
width:24px;height:2.5px;
background:linear-gradient(90deg,var(--g1),var(--g2));
border-radius:2px;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 0 6px rgba(201,168,76,.4);
}
.mob-menu-pill .mmp-line:nth-child(1){width:24px;}
.mob-menu-pill .mmp-line:nth-child(2){width:18px;}
.mob-menu-pill .mmp-line:nth-child(3){width:14px;}
.mob-menu-pill:hover .mmp-line:nth-child(2){width:24px;}
.mob-menu-pill:hover .mmp-line:nth-child(3){width:24px;}
/* 🆕 Premium Sidebar Backdrop with smooth fade + zoom */
.sb-backdrop{
position:fixed;
inset:0;
background:radial-gradient(ellipse at right center, rgba(0,0,0,.45) 0%, rgba(0,0,0,.65) 70%);
backdrop-filter:blur(8px) saturate(120%);
-webkit-backdrop-filter:blur(8px) saturate(120%);
z-index:9000;
opacity:0;
visibility:hidden;
transition:
opacity .45s cubic-bezier(.16,1,.3,1),
visibility .45s ease,
backdrop-filter .45s ease;
pointer-events:none;
will-change:opacity;
}
.sb-backdrop.on{
opacity:1;
visibility:visible;
pointer-events:all;
}
/* Pulsing circular reception FAB — beautiful golden orb */
.mob-rec-fab{
pointer-events:all;
position:relative;
width:62px;height:62px;
background:linear-gradient(135deg,var(--g2),var(--g1),var(--g3));
border:2px solid rgba(232,201,106,.6);
border-radius:50%;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
box-shadow:
0 0 28px rgba(201,168,76,.5),
0 10px 32px rgba(0,0,0,.5),
0 2px 8px rgba(0,0,0,.4),
0 0 0 1px rgba(255,255,255,.1) inset;
transition:transform .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
z-index:1;
}
.mob-rec-fab:active{transform:scale(.92);}
.mob-rec-fab .mrf-ico{
font-size:26px;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
position:relative;z-index:2;
}
/* Pulse rings */
.mob-rec-fab .mrf-pulse{
position:absolute;inset:0;
border-radius:50%;
border:2px solid var(--g2);
animation:fabPulse 2.4s ease-out infinite;
pointer-events:none;
}
.mob-rec-fab .mrf-pulse-2{animation-delay:1.2s;}
@keyframes fabPulse{
0%{transform:scale(1);opacity:.7;}
100%{transform:scale(1.6);opacity:0;}
}
/* Pane */
.dash-pane{display:none;padding:2px;flex-direction:column;gap:10px;flex:1;direction:rtl;}
.dash-pane.on{display:flex;}
@media(min-width:1024px){
.dash-sb{display:flex;}
.dash-mob-tabs,.dash-day-bar,.dash-bot-nav{display:none !important;}
.dash-pane{padding:2px;gap:12px;}
.stats-row{grid-template-columns:repeat(4,1fr);}
}
/* 🆕 Unified MOBILE/TABLET — single drawer pattern for everything below desktop */
@media(max-width:1023px){
/* 🆕 Sidebar = لوحة سفلية (Bottom Sheet) تنزلق من الأسفل للأعلى */
.dash-sb{
display:flex !important;
flex-direction:column !important;
position:fixed !important;
inset:0 !important;
width:100vw !important;
max-width:100vw !important;
height:100vh !important;
max-height:100vh !important;
border-radius:0 !important;
border:none !important;
z-index:9001 !important;
transform:translateY(100%) !important;
transition:transform .5s cubic-bezier(.16,1,.3,1) !important;
box-shadow:none !important;
overflow-y:auto;
will-change:transform;
background:var(--d1,#0b0c0f) !important;
padding:0 !important;
}
.dash-sb.drawer-open{
transform:translateY(0) !important;
}
/* تخطيط اللوحة السفلية — شبكة عناصر نظيفة */
.dash-sb .sb-acts{ padding:0 14px 14px !important; }
.dash-sb .sb-nav-item{ margin:3px 0 !important; }
/* زر الإغلاق ثابت بالأعلى */
/* زر الإغلاق داخل رأس اللوحة (sb-panel-head) — لا حاجة لتموضع منفصل */
/* حركة صعود لطيفة للعناصر */
@keyframes sbRiseUp{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
.dash-sb.drawer-open .sb-nav-item{
animation:sbRiseUp .4s cubic-bezier(.16,1,.3,1) backwards !important;
}
.dash-sb.drawer-open .sb-day,
.dash-sb.drawer-open .sb-bottom-panel{
animation:sbRiseUp .45s cubic-bezier(.16,1,.3,1) backwards !important;
}
/* خلفية معتمة خلف اللوحة */
.sb-backdrop{ backdrop-filter:blur(3px); }
/* Premium stagger reveal for nav items when drawer opens (GPU-only) */
.dash-sb.drawer-open .sb-nav-item{
animation:sbNavReveal .35s cubic-bezier(.16,1,.3,1) backwards;
will-change:opacity, transform;
}
.dash-sb.drawer-open .sb-nav-item:nth-child(1){animation-delay:.10s;}
.dash-sb.drawer-open .sb-nav-item:nth-child(2){animation-delay:.13s;}
.dash-sb.drawer-open .sb-nav-item:nth-child(3){animation-delay:.16s;}
.dash-sb.drawer-open .sb-nav-item:nth-child(4){animation-delay:.19s;}
.dash-sb.drawer-open .sb-nav-item:nth-child(5){animation-delay:.22s;}
.dash-sb.drawer-open .sb-nav-item:nth-child(6){animation-delay:.25s;}
.dash-sb.drawer-open .sb-nav-item:nth-child(7){animation-delay:.28s;}
.dash-sb.drawer-open .sb-nav-item:nth-child(8){animation-delay:.31s;}
.dash-sb.drawer-open .sb-nav-item:nth-child(n+9){animation-delay:.34s;}
/* Cleanup will-change after animation completes */
.dash-sb:not(.drawer-open) .sb-nav-item{
will-change:auto;
}
/* Day card subtle reveal */
.dash-sb.drawer-open .sb-day,
.dash-sb.drawer-open .sb-newday-btn,
.dash-sb.drawer-open .sb-btn.primary{
animation:sbNavReveal .45s cubic-bezier(.34,1.56,.64,1) backwards;
animation-delay:.1s;
}
/* Hide top mob tabs (we use drawer instead) — keeps things clean */
.dash-mob-tabs{display:none !important;}
/* Show top day-bar */
.dash-day-bar{display:flex !important;}
/* Bot-nav: visible on ALL mobile/tablet */
.dash-bot-nav{display:flex !important;}
/* Content gets bottom padding for bot-nav clearance */
.dash-content{padding-bottom:96px !important;}
.dash-pane{padding:2px 2px 0 !important;gap:8px !important;}
/* Hide desktop collapse button on mobile */
.sb-collapse-btn{display:none !important;}
/* Force NOT collapsed on mobile even if localStorage has it */
.dash-sb.is-collapsed{width:300px !important;}
}
@media(max-width:640px){
.dash-sb{width:100vw !important;max-width:100vw !important;inset:0 !important;height:100vh !important;}
.dash-sb.is-collapsed{width:100vw !important;}
.dash-hdr{height:54px;padding:0 13px;}
.dash-back{padding:7px 11px;font-size:11px;}
.dash-hdr-name{font-size:13px;}
}
/* ══════════════════════════════════════════════════
FIREBASE / CLOUD CSS
══════════════════════════════════════════════════ */
/* Cloud indicator */
.cloud-ind{
display:flex;align-items:center;gap:5px;
padding:4px 10px;border-radius:20px;
font-size:10px;font-weight:700;
transition:all .3s;flex-shrink:0;
}
.cloud-ind.synced{background:rgba(34,197,94,.1);color:var(--gr);border:1px solid rgba(34,197,94,.2);}
.cloud-ind.syncing{background:rgba(245,158,11,.1);color:var(--or);border:1px solid rgba(245,158,11,.2);}
.cloud-ind.offline{background:rgba(239,68,68,.08);color:var(--rd);border:1px solid rgba(239,68,68,.18);}
.cloud-ind.no-cloud{background:var(--d4);color:var(--t3);border:1px solid var(--bdr);}
.cloud-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
@keyframes cloudPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.cloud-ind.syncing .cloud-dot{animation:cloudPulse .8s infinite;}
/* Firebase Setup Screen */
#s-fbsetup{
flex-direction:column;align-items:center;justify-content:center;
background:var(--d0);
background-image:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(59,130,246,.1),transparent 60%);
padding:20px;min-height:100vh;
}
.fbsetup-wrap{width:100%;max-width:500px;animation:fadeUp .5s ease;}
.fbsetup-card{background:linear-gradient(160deg,var(--d2),var(--d3));border:1px solid var(--bdr2);border-radius:var(--r20);overflow:hidden;box-shadow:var(--sh);}
.fbsetup-hero{background:linear-gradient(135deg,#001535,#00234a);padding:28px 24px 20px;text-align:center;border-bottom:1px solid rgba(59,130,246,.2);}
.fbsetup-ico{width:64px;height:64px;background:linear-gradient(135deg,#1a73e8,#0d47a1);border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 14px;box-shadow:0 8px 24px rgba(26,115,232,.4);}
.fbsetup-title{font-family:var(--font);font-size:18px;font-weight:900;color:#64b5f6;margin-bottom:4px;}
.fbsetup-sub{font-size:11px;color:rgba(100,181,246,.6);line-height:1.5;}
.fbsetup-body{padding:22px 20px 16px;}
.fbsetup-step{display:flex;gap:10px;margin-bottom:16px;padding:12px 14px;background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.12);border-radius:var(--r10);}
.fbsetup-step-num{width:24px;height:24px;border-radius:50%;background:rgba(59,130,246,.2);border:1px solid rgba(59,130,246,.3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#64b5f6;flex-shrink:0;margin-top:1px;}
.fbsetup-step-text{font-size:12px;color:var(--t2);line-height:1.7;}
.fbsetup-step-text a{color:#64b5f6;text-decoration:none;}
.fbsetup-step-text strong{color:var(--t1);}
.fbsetup-skip{width:100%;padding:12px;background:var(--d4);border:1px solid var(--bdr);border-radius:var(--r10);color:var(--t3);font-size:13px;font-weight:600;margin-top:8px;cursor:pointer;}
.fbsetup-skip:hover{color:var(--t2);}
/* Staff panel in dashboard */
/* ═══════════════════════════════════════════
STAFF MANAGEMENT — Luxurious Design
═══════════════════════════════════════════ */
/* Hero header */
.staff-hero{
position:relative;
background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(168,85,247,.08));
border:1px solid rgba(201,168,76,.25);
border-radius:18px;
padding:20px 22px;
margin-bottom:14px;
overflow:hidden;
}
.staff-hero-bg{
position:absolute;top:-60px;left:-60px;
width:240px;height:240px;
background:radial-gradient(circle,rgba(201,168,76,.15),transparent 70%);
border-radius:50%;
pointer-events:none;
}
.staff-hero-content{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;
gap:14px;flex-wrap:wrap;
}
.staff-hero-left{display:flex;align-items:center;gap:14px;}
.staff-hero-ico{
width:56px;height:56px;
background:linear-gradient(135deg,var(--g1),var(--g2));
border-radius:14px;
display:flex;align-items:center;justify-content:center;
color:#1a1206;
box-shadow:
0 8px 24px rgba(201,168,76,.35),
0 0 0 1px rgba(255,255,255,.15) inset,
0 1px 0 rgba(255,255,255,.25) inset;
flex-shrink:0;
}
.staff-hero-title{
font-family:var(--font);
font-size:17px;font-weight:900;
color:var(--g2);
letter-spacing:.2px;
}
.staff-hero-sub{
font-size:11px;color:var(--t3);margin-top:3px;
}
/* Add staff button — luxurious */
.staff-add-btn{
display:inline-flex;align-items:center;gap:8px;
padding:11px 18px;
background:linear-gradient(145deg,var(--g1),var(--g2));
border:1.5px solid rgba(255,247,214,.4);
color:#1a1206;
border-radius:12px;
font-family:var(--font);font-size:12px;font-weight:900;
letter-spacing:.3px;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
box-shadow:
0 6px 18px rgba(201,168,76,.45),
0 2px 4px rgba(0,0,0,.2),
0 0 0 1px rgba(255,255,255,.2) inset,
0 1px 0 rgba(255,255,255,.4) inset;
position:relative;overflow:hidden;
white-space:nowrap;
}
.staff-add-btn::before{
content:'';position:absolute;inset:0;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);
transform:translateX(-100%);
transition:transform .7s cubic-bezier(.34,1.56,.64,1);
pointer-events:none;
}
.staff-add-btn:hover{
transform:translateY(-2px);
box-shadow:
0 14px 32px rgba(201,168,76,.55),
0 4px 8px rgba(0,0,0,.25),
0 0 0 1px rgba(255,255,255,.3) inset,
0 1px 0 rgba(255,255,255,.5) inset;
}
.staff-add-btn:hover::before{transform:translateX(100%);}
.staff-add-btn:active{transform:scale(.96);}
/* Stats row */
.staff-stats-row{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:10px;
margin-bottom:14px;
}
.staff-stat-card{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-right:3px solid var(--sc);
border-radius:12px;
padding:14px;
display:flex;align-items:center;gap:12px;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.staff-stat-card:hover{
transform:translateY(-2px);
border-color:var(--sc);
box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.staff-stat-card.staff-stat-clickable{cursor:pointer;}
.staff-stat-card.staff-stat-clickable:hover{
background:linear-gradient(155deg,color-mix(in srgb,var(--sc) 8%,var(--d3)),var(--d4));
}
.staff-stat-ico{
width:42px;height:42px;
background:color-mix(in srgb, var(--sc) 12%, transparent);
border:1px solid color-mix(in srgb, var(--sc) 25%, transparent);
border-radius:11px;
display:flex;align-items:center;justify-content:center;
font-size:20px;
flex-shrink:0;
}
.staff-stat-body{flex:1;min-width:0;}
.staff-stat-label{font-size:10px;color:var(--t3);font-weight:700;}
.staff-stat-value{
font-family:var(--font);
font-size:24px;font-weight:900;color:var(--sc);
line-height:1;margin-top:3px;
}
/* Permissions guide */
.staff-perm-guide{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
padding:14px;
margin-bottom:14px;
}
.staff-perm-guide-h{
display:flex;align-items:center;gap:8px;
font-family:var(--font);font-size:13px;font-weight:800;
color:var(--g2);
margin-bottom:12px;
padding-bottom:10px;
border-bottom:1px solid var(--bdr);
}
.staff-perm-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:10px;
}
.staff-perm-card{
padding:12px;
border-radius:11px;
border:1px solid;
}
.staff-perm-card.admin{
background:linear-gradient(155deg,rgba(201,168,76,.08),rgba(201,168,76,.02));
border-color:rgba(201,168,76,.3);
}
.staff-perm-card.accountant{
background:linear-gradient(155deg,rgba(59,130,246,.08),rgba(59,130,246,.02));
border-color:rgba(59,130,246,.3);
}
.staff-perm-card.receptionist{
background:linear-gradient(155deg,rgba(34,197,94,.08),rgba(34,197,94,.02));
border-color:rgba(34,197,94,.3);
}
.staff-perm-badge{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;
border-radius:8px;
font-family:var(--font);font-size:11px;font-weight:800;
margin-bottom:10px;
}
.staff-perm-card.admin .staff-perm-badge{
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
box-shadow:0 2px 6px rgba(201,168,76,.3);
}
.staff-perm-card.accountant .staff-perm-badge{
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
box-shadow:0 2px 6px rgba(59,130,246,.3);
}
.staff-perm-card.receptionist .staff-perm-badge{
background:linear-gradient(135deg,#22C55E,#15803d);
color:#fff;
box-shadow:0 2px 6px rgba(34,197,94,.3);
}
.staff-perm-list{display:flex;flex-direction:column;gap:4px;}
.staff-perm-list span{
font-size:10.5px;
color:var(--t2);
line-height:1.6;
letter-spacing:.1px;
}
/* Staff list card */
.staff-list-card{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
overflow:hidden;
margin-bottom:14px;
}
.staff-list-h{
padding:14px 16px;
background:linear-gradient(90deg,rgba(15,11,0,.4),rgba(25,18,0,.3));
border-bottom:1px solid var(--bdr);
display:flex;align-items:center;justify-content:space-between;
gap:10px;flex-wrap:wrap;
}
.staff-list-h-ico{
width:30px;height:30px;
background:linear-gradient(135deg,rgba(201,168,76,.2),rgba(201,168,76,.05));
border:1px solid rgba(201,168,76,.3);
border-radius:9px;
display:flex;align-items:center;justify-content:center;
color:var(--g2);
}
.staff-search-inp{
background:var(--d4);
border:1px solid var(--bdr);
border-radius:8px;
padding:7px 11px;
font-size:11px;
color:var(--t1);
max-width:180px;
font-family:var(--font);
transition:all .2s;
}
.staff-search-inp:focus{
outline:none;
border-color:var(--g2);
box-shadow:0 0 0 3px rgba(201,168,76,.1);
}
/* Staff row card */
.staff-row{
display:flex;align-items:center;gap:13px;
padding:14px 16px;
border-bottom:1px solid var(--bdr);
transition:background .15s ease;
position:relative;
}
.staff-row:last-child{border-bottom:none;}
.staff-row:hover{background:rgba(255,255,255,.02);}
.staff-row.is-self{
background:linear-gradient(90deg,rgba(201,168,76,.05),transparent);
}
.staff-row.is-self::before{
content:'';position:absolute;right:0;top:0;bottom:0;
width:3px;background:linear-gradient(180deg,var(--g1),var(--g2));
}
.staff-row-avatar{
width:46px;height:46px;
border-radius:13px;
display:flex;align-items:center;justify-content:center;
font-family:var(--font);font-size:17px;font-weight:900;
color:#fff;
flex-shrink:0;
box-shadow:
0 3px 10px rgba(0,0,0,.25),
0 0 0 1px rgba(255,255,255,.1) inset,
0 1px 0 rgba(255,255,255,.15) inset;
position:relative;
}
.staff-row-avatar.admin{background:linear-gradient(135deg,var(--g1),var(--g2));color:#1a1206;box-shadow:0 4px 14px rgba(201,168,76,.4),0 0 0 1px rgba(255,255,255,.2) inset;}
.staff-row-avatar.accountant{background:linear-gradient(135deg,#3B82F6,#1d4ed8);}
.staff-row-avatar.receptionist{background:linear-gradient(135deg,#22C55E,#15803d);}
.staff-row-info{flex:1;min-width:0;}
.staff-row-name{
font-family:var(--font);
font-size:13.5px;font-weight:800;color:var(--t1);
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.staff-self-badge{
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
padding:2px 7px;
border-radius:6px;
font-size:9px;font-weight:800;
box-shadow:0 1px 3px rgba(201,168,76,.3);
}
.staff-row-email{
font-size:11px;color:var(--t3);
margin-top:3px;
font-family:var(--font);
letter-spacing:.1px;
direction:ltr;text-align:right;
word-break:break-all;
}
.staff-row-role-pill{
display:inline-flex;align-items:center;gap:5px;
padding:3px 9px;
border-radius:7px;
font-family:var(--font);font-size:10px;font-weight:800;
margin-top:4px;
}
.staff-row-role-pill.admin{
background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(201,168,76,.05));
border:1px solid rgba(201,168,76,.35);
color:var(--g2);
}
.staff-row-role-pill.accountant{
background:linear-gradient(135deg,rgba(59,130,246,.18),rgba(59,130,246,.05));
border:1px solid rgba(59,130,246,.35);
color:#60A5FA;
}
.staff-row-role-pill.receptionist{
background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,197,94,.05));
border:1px solid rgba(34,197,94,.35);
color:#4ade80;
}
.staff-row-actions{
display:flex;gap:6px;
flex-shrink:0;
}
.staff-action-btn{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
cursor:pointer;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
border:1px solid;
background:rgba(255,255,255,.02);
}
.staff-action-btn.edit{
color:#60A5FA;
border-color:rgba(59,130,246,.3);
}
.staff-action-btn.edit:hover{
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
border-color:transparent;
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(59,130,246,.35);
}
.staff-action-btn.del{
color:#f87171;
border-color:rgba(239,68,68,.3);
}
.staff-action-btn.del:hover{
background:linear-gradient(135deg,#EF4444,#b91c1c);
color:#fff;
border-color:transparent;
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(239,68,68,.35);
}
.staff-action-btn:active{transform:scale(.9);}
.staff-action-btn:disabled{opacity:.35;cursor:not-allowed;}
.staff-action-btn:disabled:hover{transform:none;box-shadow:none;background:rgba(255,255,255,.02);color:inherit;border-color:rgba(239,68,68,.15);}
/* Empty state */
.staff-empty{
padding:40px 20px;
text-align:center;
color:var(--t3);
}
.staff-empty-ico{
font-size:48px;
margin-bottom:10px;
opacity:.5;
}
/* Staff modal — luxurious */
.staff-modal-overlay{
position:fixed;inset:0;
background:rgba(0,0,0,.75);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
z-index:9999;
display:none;
align-items:center;justify-content:center;
padding:20px;
opacity:0;
transition:opacity .25s ease;
}
.staff-modal-overlay.on{display:flex;opacity:1;}
.staff-modal{
background:linear-gradient(155deg,#1a1208,#0d0904);
border:1px solid rgba(201,168,76,.3);
border-radius:20px;
padding:0;
max-width:460px;
width:100%;
max-height:90vh;
overflow-y:auto;
box-shadow:
0 30px 80px rgba(0,0,0,.7),
0 0 0 1px rgba(255,255,255,.05) inset,
0 1px 0 rgba(201,168,76,.2) inset;
transform:scale(.85) translateY(20px);
transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}
.staff-modal-overlay.on .staff-modal{transform:scale(1) translateY(0);}
.staff-modal-h{
padding:18px 22px;
background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.03));
border-bottom:1px solid rgba(201,168,76,.2);
display:flex;align-items:center;justify-content:space-between;
gap:10px;
position:relative;overflow:hidden;
}
.staff-modal-h::after{
content:'';position:absolute;top:-30px;right:-30px;
width:120px;height:120px;
background:radial-gradient(circle,rgba(201,168,76,.15),transparent 70%);
border-radius:50%;
pointer-events:none;
}
.staff-modal-title-wrap{
display:flex;align-items:center;gap:11px;
position:relative;z-index:1;
}
.staff-modal-icon{
width:38px;height:38px;
background:linear-gradient(135deg,var(--g1),var(--g2));
border-radius:11px;
display:flex;align-items:center;justify-content:center;
color:#1a1206;
box-shadow:0 4px 12px rgba(201,168,76,.4);
}
.staff-modal-title{
font-family:var(--font);
font-size:15px;font-weight:900;
color:var(--g2);
}
.staff-modal-close{
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
color:var(--t2);
width:30px;height:30px;
border-radius:9px;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .2s;
-webkit-tap-highlight-color:transparent;
}
.staff-modal-close:hover{
background:rgba(239,68,68,.1);
border-color:rgba(239,68,68,.3);
color:#f87171;
transform:rotate(90deg);
}
.staff-modal-body{padding:18px 22px;}
.staff-form-f{margin-bottom:14px;}
.staff-form-f label{
display:block;
font-family:var(--font);font-size:11px;font-weight:800;
color:var(--g2);
margin-bottom:6px;
letter-spacing:.2px;
}
.staff-form-f input,
.staff-form-f select{
width:100%;
background:var(--d4);
border:1px solid var(--bdr);
border-radius:10px;
padding:11px 13px;
font-family:var(--font);font-size:12.5px;
color:var(--t1);
transition:all .2s;
}
.staff-form-f input:focus,
.staff-form-f select:focus{
outline:none;
border-color:var(--g2);
background:var(--d3);
box-shadow:0 0 0 3px rgba(201,168,76,.1);
}
/* Role selector — visual cards */
.staff-role-cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin-bottom:14px;
}
.staff-role-pick{
position:relative;
background:var(--d4);
border:2px solid var(--bdr);
border-radius:11px;
padding:11px 8px;
cursor:pointer;
text-align:center;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
}
.staff-role-pick:hover{
transform:translateY(-2px);
background:var(--d3);
}
.staff-role-pick.selected{
background:linear-gradient(155deg,rgba(201,168,76,.12),rgba(201,168,76,.02));
border-color:var(--g2);
box-shadow:
0 6px 18px rgba(201,168,76,.25),
0 0 0 1px rgba(255,255,255,.05) inset;
}
.staff-role-pick.selected[data-role="accountant"]{
background:linear-gradient(155deg,rgba(59,130,246,.12),rgba(59,130,246,.02));
border-color:#3B82F6;
box-shadow:0 6px 18px rgba(59,130,246,.25);
}
.staff-role-pick.selected[data-role="receptionist"]{
background:linear-gradient(155deg,rgba(34,197,94,.12),rgba(34,197,94,.02));
border-color:#22C55E;
box-shadow:0 6px 18px rgba(34,197,94,.25);
}
.staff-role-pick-ico{
font-size:24px;
margin-bottom:4px;
}
.staff-role-pick-name{
font-family:var(--font);
font-size:11px;font-weight:800;
color:var(--t1);
}
.staff-role-pick-check{
position:absolute;top:4px;left:4px;
width:18px;height:18px;
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
border-radius:50%;
display:none;
align-items:center;justify-content:center;
font-size:11px;font-weight:900;
box-shadow:0 2px 6px rgba(201,168,76,.4);
}
.staff-role-pick.selected .staff-role-pick-check{display:flex;}
.staff-role-pick.selected[data-role="accountant"] .staff-role-pick-check{
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
}
.staff-role-pick.selected[data-role="receptionist"] .staff-role-pick-check{
background:linear-gradient(135deg,#22C55E,#15803d);
color:#fff;
}
.staff-modal-info{
background:rgba(59,130,246,.06);
border:1px solid rgba(59,130,246,.2);
border-radius:10px;
padding:10px 13px;
font-size:11px;color:#93c5fd;
line-height:1.7;
margin-bottom:14px;
}
.staff-modal-err{
background:rgba(239,68,68,.08);
border:1px solid rgba(239,68,68,.25);
border-radius:9px;
padding:9px 12px;
font-size:11px;
color:#f87171;
margin-bottom:12px;
display:none;
}
.staff-modal-err.on{display:block;}
.staff-modal-actions{
display:flex;gap:9px;
padding:14px 22px 18px;
border-top:1px solid var(--bdr);
}
.staff-modal-btn{
flex:1;
padding:12px 16px;
border-radius:11px;
font-family:var(--font);font-size:12.5px;font-weight:800;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
border:1px solid transparent;
-webkit-tap-highlight-color:transparent;
display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.staff-modal-btn.save{
background:linear-gradient(145deg,var(--g1),var(--g2));
color:#1a1206;
box-shadow:
0 6px 18px rgba(201,168,76,.4),
0 0 0 1px rgba(255,255,255,.2) inset,
0 1px 0 rgba(255,255,255,.4) inset;
}
.staff-modal-btn.save:hover{
transform:translateY(-2px);
box-shadow:
0 12px 28px rgba(201,168,76,.5),
0 0 0 1px rgba(255,255,255,.3) inset,
0 1px 0 rgba(255,255,255,.5) inset;
}
.staff-modal-btn.save:active{transform:scale(.96);}
.staff-modal-btn.save:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.staff-modal-btn.cancel{
background:rgba(255,255,255,.04);
border-color:var(--bdr);
color:var(--t2);
}
.staff-modal-btn.cancel:hover{
background:rgba(255,255,255,.08);
border-color:var(--bdr2);
color:var(--t1);
}
/* Salary badges on staff rows */
.staff-salary-badge{
display:inline-flex;align-items:center;gap:5px;
padding:3px 8px;
border-radius:7px;
font-family:var(--font);font-size:10px;font-weight:700;
border:1px solid;
}
.staff-salary-badge .ssb-amt{
font-family:var(--font);font-weight:900;
padding-right:5px;margin-right:3px;
border-right:1px solid currentColor;
opacity:.9;
}
.staff-salary-badge.pending{
background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(245,158,11,.03));
border-color:rgba(245,158,11,.3);
color:var(--or);
}
.staff-salary-badge.partial{
background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(59,130,246,.03));
border-color:rgba(59,130,246,.3);
color:#60A5FA;
}
.staff-salary-badge.paid{
background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.03));
border-color:rgba(34,197,94,.35);
color:#4ade80;
}
/* Pay salary action button */
.staff-action-btn.pay{
color:#4ade80;
border-color:rgba(34,197,94,.3);
}
.staff-action-btn.pay:hover{
background:linear-gradient(135deg,#22C55E,#15803d);
color:#fff;
border-color:transparent;
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(34,197,94,.35);
}
/* Center modal logo upload buttons */
.cm-logo-btn{
display:inline-flex;align-items:center;gap:6px;
padding:8px 14px;
border-radius:9px;
font-family:var(--font);font-size:11px;font-weight:800;
cursor:pointer;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
border:1px solid;
}
.cm-logo-btn.upload{
background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.05));
border-color:rgba(59,130,246,.35);
color:#60A5FA;
}
.cm-logo-btn.upload:hover{
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
border-color:transparent;
transform:translateY(-1px);
box-shadow:0 6px 14px rgba(59,130,246,.35);
}
.cm-logo-btn.remove{
background:rgba(239,68,68,.08);
border-color:rgba(239,68,68,.3);
color:#f87171;
}
.cm-logo-btn.remove:hover{
background:linear-gradient(135deg,#EF4444,#b91c1c);
color:#fff;
border-color:transparent;
transform:translateY(-1px);
box-shadow:0 6px 14px rgba(239,68,68,.35);
}
/* Logo preview img */
#cm-logo-preview img{width:100%;height:100%;object-fit:contain;border-radius:12px;}
/*════
CENTER SETTINGS PAGE V2 — Luxurious Business Profile
════*/
.center-profile-v2{
background:linear-gradient(155deg,var(--d3) 0%, var(--d4) 100%);
border:1px solid var(--bdr);
border-radius:20px;
overflow:hidden;
margin-bottom:14px;
box-shadow:0 8px 32px rgba(0,0,0,.18);
position:relative;
}
/* ────────── HERO COVER ────────── */
.cpv-hero{
position:relative;
height:200px;
overflow:hidden;
background:linear-gradient(135deg,#0a0800 0%,#1a1206 30%,#2d2100 60%,#3a2a00 100%);
}
.cpv-cover{
position:absolute;inset:0;
background-size:cover;background-position:center;
transition:opacity .4s ease;
}
.cpv-cover-overlay{
position:absolute;inset:0;
background:
linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%),
linear-gradient(135deg,rgba(201,168,76,.08),transparent 70%);
}
.cpv-cover-pattern{
position:absolute;inset:0;
background-image:
radial-gradient(circle at 20% 30%,rgba(201,168,76,.12),transparent 40%),
radial-gradient(circle at 80% 70%,rgba(168,85,247,.08),transparent 40%);
pointer-events:none;
}
.cpv-cover-actions{
position:absolute;top:14px;right:14px;z-index:3;
display:flex;gap:8px;
}
.cpv-cover-btn{
display:inline-flex;align-items:center;gap:6px;
padding:8px 13px;
border-radius:10px;
font-family:var(--font);font-size:11px;font-weight:800;
background:rgba(0,0,0,.5);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.15);
color:#fff;
cursor:pointer;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
}
.cpv-cover-btn:hover{
background:rgba(255,255,255,.96);
color:#000;
border-color:transparent;
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.cpv-cover-rm{
width:34px;height:34px;padding:0;justify-content:center;
}
.cpv-cover-rm:hover{
background:linear-gradient(135deg,#EF4444,#b91c1c);
color:#fff;
}
/* ────────── IDENTITY (logo + name) ────────── */
.cpv-identity{
position:relative;
padding:0 28px 22px;
margin-top:-58px;
display:flex;align-items:flex-end;gap:18px;
flex-wrap:wrap;
z-index:2;
}
.cpv-logo-wrap{
position:relative;
width:120px;height:120px;
flex-shrink:0;
}
.cpv-logo{
width:120px;height:120px;
border-radius:24px;
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
box-shadow:
0 12px 32px rgba(0,0,0,.55),
0 0 0 5px var(--d3),
0 0 0 6px rgba(255,255,255,.06),
0 0 0 7px rgba(201,168,76,.15);
}
.cpv-logo img{
width:100%;height:100%;
object-fit:contain;
border-radius:19px;
background:#fff;
}
.cpv-logo-edit{
position:absolute;
bottom:-2px;left:-2px;
width:34px;height:34px;
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
border:3px solid var(--d3);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 6px 14px rgba(59,130,246,.45);
-webkit-tap-highlight-color:transparent;
}
.cpv-logo-edit:hover{
transform:scale(1.12) rotate(-8deg);
box-shadow:0 10px 22px rgba(59,130,246,.6);
}
.cpv-logo-rm{
position:absolute;
top:-2px;left:-2px;
width:26px;height:26px;
background:#EF4444;
color:#fff;
border:3px solid var(--d3);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:all .2s;
-webkit-tap-highlight-color:transparent;
}
.cpv-logo-rm:hover{
transform:scale(1.2);
background:#dc2626;
}
.cpv-identity-text{
flex:1;min-width:220px;
padding-bottom:6px;
}
.cpv-name{
font-family:var(--font);
font-size:26px;font-weight:900;
color:var(--g2);
letter-spacing:.3px;
text-shadow:0 2px 12px rgba(0,0,0,.6);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
margin-bottom:8px;
line-height:1.1;
}
.cpv-meta{
display:flex;gap:12px;flex-wrap:wrap;
margin-bottom:10px;
}
.cpv-meta-item{
display:inline-flex;align-items:center;gap:5px;
font-size:11.5px;
color:var(--t2);
font-weight:600;
}
.cpv-meta-item svg{opacity:.6;flex-shrink:0;}
/* Cloud status pill */
.cpv-cloud-status{
display:inline-flex;align-items:center;gap:7px;
padding:5px 11px;
background:rgba(34,197,94,.1);
border:1px solid rgba(34,197,94,.22);
border-radius:20px;
font-size:10.5px;font-weight:700;
color:#4ade80;
transition:all .25s;
}
.cpv-cloud-status.is-syncing{
background:rgba(245,158,11,.1);
border-color:rgba(245,158,11,.25);
color:#fbbf24;
}
.cpv-cloud-status.is-error{
background:rgba(239,68,68,.1);
border-color:rgba(239,68,68,.25);
color:#f87171;
}
.cpv-cloud-dot{
width:7px;height:7px;
border-radius:50%;
background:currentColor;
box-shadow:0 0 6px currentColor;
animation:cpvPulse 2.5s ease-in-out infinite;
}
.cpv-cloud-status.is-syncing .cpv-cloud-dot{animation-duration:.8s;}
.cpv-cloud-status.is-error .cpv-cloud-dot{animation:none;}
@keyframes cpvPulse{
0%,100%{opacity:1;transform:scale(1);}
50%{opacity:.4;transform:scale(.8);}
}
/* ────────── TABS ────────── */
.cpv-tabs{
display:flex;
padding:0 28px;
border-bottom:1px solid var(--bdr);
gap:4px;
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
}
.cpv-tabs::-webkit-scrollbar{display:none;}
.cpv-tab{
display:inline-flex;align-items:center;gap:8px;
padding:14px 18px;
background:transparent;
border:none;
color:var(--t3);
font-family:var(--font);
font-size:12.5px;font-weight:800;
cursor:pointer;
transition:all .2s;
border-bottom:2px solid transparent;
margin-bottom:-1px;
white-space:nowrap;
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
}
.cpv-tab:hover{color:var(--t1);}
.cpv-tab.on{
color:var(--g2);
border-bottom-color:var(--g2);
}
/* ────────── BODY & PANES ────────── */
.cpv-err{margin:14px 28px 0;}
.cpv-body{padding:20px 28px 100px;}
.cpv-pane{display:none;}
.cpv-pane.on{display:block;animation:cpvFadeIn .35s ease;}
@keyframes cpvFadeIn{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
/* ────────── SECTIONS ────────── */
.cpv-section{
background:linear-gradient(155deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
border:1px solid var(--bdr);
border-radius:16px;
overflow:hidden;
}
.cpv-section-h{
display:flex;align-items:center;gap:12px;
padding:14px 18px;
background:linear-gradient(90deg,rgba(15,11,0,.4),rgba(25,18,0,.15));
border-bottom:1px solid var(--bdr);
}
.cpv-section-ico{
width:36px;height:36px;
border-radius:10px;
display:flex;align-items:center;justify-content:center;
color:#fff;
flex-shrink:0;
box-shadow:
0 4px 12px rgba(0,0,0,.3),
0 0 0 1px rgba(255,255,255,.12) inset;
}
.cpv-section-title{
font-family:var(--font);
font-size:14px;font-weight:900;
color:var(--t1);
letter-spacing:.2px;
}
.cpv-section-sub{
font-size:10.5px;color:var(--t3);
margin-top:2px;
line-height:1.5;
}
.cpv-fields{padding:18px;}
/* Grid for 2-col forms */
.cpv-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
/* ────────── ACTION BUTTONS ────────── */
.cpv-action-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:12px 16px;
border:none;
border-radius:11px;
font-family:var(--font);
font-size:12.5px;font-weight:800;
color:#fff;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
white-space:nowrap;
}
.cpv-action-btn:hover{transform:translateY(-2px);}
.cpv-action-btn:active{transform:scale(.96);}
.cpv-action-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.cpv-pwd-btn{
width:100%;
background:linear-gradient(135deg,#F59E0B,#d97706);
box-shadow:0 6px 18px rgba(245,158,11,.4);
}
.cpv-pwd-btn:hover{box-shadow:0 10px 24px rgba(245,158,11,.55);}
.cpv-pin-btn{
flex:1;
background:linear-gradient(135deg,#a855f7,#7c3aed);
box-shadow:0 6px 18px rgba(168,85,247,.4);
}
.cpv-pin-btn:hover{box-shadow:0 10px 24px rgba(168,85,247,.55);}
.cpv-pin-rm-btn{
background:rgba(239,68,68,.08);
color:#f87171;
border:1px solid rgba(239,68,68,.3);
}
.cpv-pin-rm-btn:hover{
background:linear-gradient(135deg,#EF4444,#b91c1c);
color:#fff;
border-color:transparent;
box-shadow:0 8px 18px rgba(239,68,68,.4);
}
/* ────────── WARN BANNER ────────── */
.cpv-warn{
display:flex;align-items:flex-start;gap:9px;
background:rgba(245,158,11,.07);
border:1px solid rgba(245,158,11,.22);
border-radius:10px;
padding:11px 13px;
font-size:11.5px;
color:#fbbf24;
line-height:1.6;
margin-bottom:14px;
}
.cpv-warn svg{flex-shrink:0;margin-top:1px;}
/* ────────── PIN STATUS PILL ────────── */
.cpv-pin-status{
display:flex;align-items:center;gap:10px;
padding:11px 14px;
border-radius:11px;
font-size:11.5px;font-weight:700;
margin-bottom:16px;
background:rgba(120,120,120,.06);
border:1px solid rgba(120,120,120,.15);
color:var(--t3);
transition:all .3s;
}
.cpv-pin-status.is-protected{
background:rgba(34,197,94,.08);
border-color:rgba(34,197,94,.22);
color:#4ade80;
}
.cpv-pin-status.is-unprotected{
background:rgba(245,158,11,.08);
border-color:rgba(245,158,11,.22);
color:#fbbf24;
}
.cpv-pin-status-dot{
width:8px;height:8px;border-radius:50%;
background:currentColor;
box-shadow:0 0 6px currentColor;
flex-shrink:0;
}
.cpv-pin-status.is-protected .cpv-pin-status-dot{animation:cpvPulse 2.5s ease-in-out infinite;}
/* PIN inputs */
.cpv-pin-input{
text-align:center !important;
letter-spacing:16px !important;
font-family:var(--font) !important;
font-size:22px !important;
font-weight:900 !important;
padding-right:6px !important;
}
.cpv-pin-actions{
display:flex;gap:10px;flex-wrap:wrap;
}
/* ────────── FLOATING SAVE BAR ────────── */
.cpv-save-bar{
position:sticky;
bottom:0;
margin-top:18px;
padding:14px 22px;
background:linear-gradient(180deg,rgba(15,11,0,.7),rgba(15,11,0,.95));
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border-top:1px solid var(--bdr);
border-radius:0 0 20px 20px;
display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;
z-index:5;
}
.cpv-save-info{
display:inline-flex;align-items:center;gap:8px;
font-size:11px;
color:var(--t3);
}
.cpv-save-info svg{opacity:.5;flex-shrink:0;}
.cpv-save-btn{
display:inline-flex;align-items:center;gap:9px;
padding:12px 22px;
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
border:1.5px solid rgba(255,247,214,.4);
border-radius:12px;
font-family:var(--font);
font-size:13px;font-weight:900;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
box-shadow:
0 8px 22px rgba(201,168,76,.45),
0 0 0 1px rgba(255,255,255,.2) inset,
0 1px 0 rgba(255,255,255,.4) inset;
white-space:nowrap;
}
.cpv-save-btn:hover{
transform:translateY(-2px);
box-shadow:
0 14px 30px rgba(201,168,76,.6),
0 0 0 1px rgba(255,255,255,.3) inset;
}
.cpv-save-btn:active{transform:scale(.96);}
.cpv-save-btn:disabled{opacity:.65;cursor:not-allowed;transform:none;}
/* Hide save bar on security tab (security uses its own buttons) */
.cpv-save-bar.is-hidden{display:none;}
/* Spin animation for loading button */
@keyframes cpvSpin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
/* ────────── RESPONSIVE ────────── */
@media(max-width:680px){
.cpv-hero{height:160px;}
.cpv-identity{
padding:0 18px 18px;
margin-top:-50px;
flex-direction:column;
align-items:flex-start;
gap:14px;
}
.cpv-logo-wrap,
.cpv-logo{width:100px;height:100px;}
.cpv-name{font-size:22px;}
.cpv-tabs{padding:0 18px;}
.cpv-tab{padding:13px 14px;font-size:12px;}
.cpv-body{padding:16px 18px 100px;}
.cpv-grid-2{grid-template-columns:1fr;}
.cpv-save-bar{padding:12px 18px;}
.cpv-save-info{display:none;}
.cpv-save-btn{flex:1;justify-content:center;}
.cpv-cover-btn span{display:none;}
.cpv-cover-btn{padding:8px;width:34px;height:34px;justify-content:center;}
}
@media(max-width:420px){
.cpv-meta{gap:8px;}
.cpv-name{font-size:19px;}
}
/* Legacy staff classes (kept for backward compat) */
.staff-panel{display:none;}
/* ═══════════════════════════════════════════
CENTER PROFILE MODAL — Business profile style
═══════════════════════════════════════════ */
.staff-modal.cm-profile{padding:0;}
/* Cover image area */
.cm-cover{
position:relative;
height:140px;
background:linear-gradient(135deg,#1d4ed8,#7c3aed,#c026d3);
border-radius:20px 20px 0 0;
overflow:hidden;
}
.cm-cover-bg{
position:absolute;inset:0;
background-size:cover;background-position:center;
transition:opacity .3s ease;
}
.cm-cover-overlay{
position:absolute;inset:0;
background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 100%);
}
.cm-cover-close{
position:absolute !important;
top:12px !important;
left:12px !important;
background:rgba(0,0,0,.45) !important;
backdrop-filter:blur(8px);
border-color:rgba(255,255,255,.2) !important;
color:#fff !important;
}
.cm-cover-close:hover{
background:rgba(239,68,68,.9) !important;
border-color:transparent !important;
}
.cm-cover-actions{
position:absolute;
top:12px;right:12px;
display:flex;gap:6px;
}
.cm-cover-btn{
display:inline-flex;align-items:center;gap:6px;
padding:6px 11px;
border-radius:9px;
font-family:var(--font);font-size:10.5px;font-weight:800;
background:rgba(0,0,0,.45);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.2);
color:#fff;
cursor:pointer;
transition:all .2s;
-webkit-tap-highlight-color:transparent;
}
.cm-cover-btn:hover{
background:rgba(255,255,255,.95);
color:#000;
border-color:transparent;
transform:translateY(-1px);
}
.cm-cover-btn.rm:hover{background:rgba(239,68,68,.95);color:#fff;}
/* Profile head: logo + name */
.cm-profile-head{
position:relative;
padding:0 22px;
margin-top:-46px;
display:flex;align-items:flex-end;gap:14px;
z-index:2;
}
.cm-logo-wrap{
position:relative;
width:92px;height:92px;
flex-shrink:0;
}
.cm-logo-preview{
width:92px;height:92px;
border-radius:18px;
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
display:flex;align-items:center;justify-content:center;
font-size:40px;
overflow:hidden;
box-shadow:
0 8px 24px rgba(0,0,0,.5),
0 0 0 4px var(--d2),
0 0 0 5px rgba(255,255,255,.05);
}
.cm-logo-preview img{width:100%;height:100%;object-fit:contain;border-radius:14px;}
.cm-logo-edit-btn{
position:absolute;
bottom:-4px;left:-4px;
width:28px;height:28px;
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
border:2px solid var(--d2);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 4px 10px rgba(0,0,0,.3);
}
.cm-logo-edit-btn:hover{
transform:scale(1.1);
box-shadow:0 6px 14px rgba(59,130,246,.4);
}
.cm-logo-rm-btn{
position:absolute;
top:-4px;left:-4px;
width:22px;height:22px;
background:#EF4444;
color:#fff;
border:2px solid var(--d2);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:all .2s;
}
.cm-logo-rm-btn:hover{transform:scale(1.15);}
.cm-profile-info{
flex:1;min-width:0;
padding-bottom:8px;
}
.cm-profile-name{
font-family:var(--font);
font-size:18px;font-weight:900;
color:var(--g2);
text-shadow:0 2px 8px rgba(0,0,0,.5);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cm-profile-meta{
font-size:11px;
color:var(--t2);
margin-top:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Tabs */
.cm-tabs{
display:flex;
padding:14px 22px 0;
border-bottom:1px solid var(--bdr);
gap:4px;
margin-bottom:0;
}
.cm-tab{
display:inline-flex;align-items:center;gap:6px;
padding:10px 14px;
background:transparent;
border:none;
color:var(--t3);
font-family:var(--font);
font-size:11.5px;font-weight:800;
cursor:pointer;
transition:all .2s;
border-bottom:2px solid transparent;
margin-bottom:-1px;
-webkit-tap-highlight-color:transparent;
}
.cm-tab:hover{color:var(--t1);}
.cm-tab.on{
color:var(--g2);
border-bottom-color:var(--g2);
}
.cm-body{padding:18px 22px;}
.cm-tab-pane{display:none;}
.cm-tab-pane.on{display:block;animation:cmFadeIn .3s ease;}
@keyframes cmFadeIn{
from{opacity:0;transform:translateY(4px);}
to{opacity:1;transform:translateY(0);}
}
.cm-actions{padding:14px 22px 18px;}
/* ═══════════════════════════════════════════
DAYS ARCHIVE PANE — Luxurious
═══════════════════════════════════════════ */
.arch-hero{
position:relative;
background:linear-gradient(135deg,rgba(59,130,246,.12),rgba(168,85,247,.08));
border:1px solid rgba(59,130,246,.25);
border-radius:18px;
padding:20px 22px;
margin-bottom:14px;
overflow:hidden;
}
.arch-hero-bg{
position:absolute;top:-60px;right:-60px;
width:240px;height:240px;
background:radial-gradient(circle,rgba(59,130,246,.18),transparent 70%);
border-radius:50%;
pointer-events:none;
}
.arch-hero-content{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;
gap:14px;flex-wrap:wrap;
}
.arch-hero-left{display:flex;align-items:center;gap:14px;}
.arch-hero-ico{
width:56px;height:56px;
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
border-radius:14px;
display:flex;align-items:center;justify-content:center;
color:#fff;
box-shadow:
0 8px 24px rgba(59,130,246,.4),
0 0 0 1px rgba(255,255,255,.15) inset,
0 1px 0 rgba(255,255,255,.25) inset;
flex-shrink:0;
}
.arch-hero-title{
font-family:var(--font);
font-size:17px;font-weight:900;
color:#60A5FA;
}
.arch-hero-sub{
font-size:11px;color:var(--t3);margin-top:3px;
}
.arch-hero-stats{display:flex;gap:10px;}
.arch-hero-stat{
text-align:center;
padding:8px 14px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:11px;
}
.arch-hero-stat-v{
font-family:var(--font);
font-size:22px;font-weight:900;
color:#60A5FA;
line-height:1;
}
.arch-hero-stat-l{
font-size:10px;
color:var(--t3);
margin-top:3px;
font-weight:700;
}
/* Toolbar */
.arch-toolbar{
display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;
}
.arch-search-inp{
flex:1;min-width:180px;
background:var(--d4);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 13px;
font-size:12px;
color:var(--t1);
font-family:var(--font);
transition:all .2s;
}
.arch-search-inp:focus{
outline:none;
border-color:var(--g2);
box-shadow:0 0 0 3px rgba(201,168,76,.1);
}
.arch-sort-sel{
background:var(--d4);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 13px;
font-size:12px;
color:var(--t1);
font-family:var(--font);
cursor:pointer;
}
.arch-sort-sel:focus{
outline:none;
border-color:var(--g2);
}
/* Day card */
.arch-day{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
overflow:hidden;
margin-bottom:12px;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
position:relative;
}
.arch-day:hover{
border-color:rgba(59,130,246,.3);
transform:translateY(-2px);
box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.arch-day.is-current{
border-color:rgba(34,197,94,.3);
background:linear-gradient(155deg,rgba(34,197,94,.06),var(--d4));
}
.arch-day.is-current::before{
content:'';position:absolute;top:0;bottom:0;right:0;
width:3px;
background:linear-gradient(180deg,#22C55E,#15803d);
}
.arch-day-h{
display:flex;align-items:center;gap:14px;
padding:14px 16px;
cursor:pointer;
user-select:none;
}
.arch-day-ico{
width:46px;height:46px;
background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.05));
border:1px solid rgba(59,130,246,.25);
border-radius:12px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
color:#60A5FA;
font-family:var(--font);
flex-shrink:0;
}
.arch-day.is-current .arch-day-ico{
background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05));
border-color:rgba(34,197,94,.3);
color:#4ade80;
}
.arch-day-ico-d{font-size:18px;font-weight:900;line-height:1;}
.arch-day-ico-m{font-size:9px;font-weight:700;margin-top:1px;opacity:.7;}
.arch-day-info{flex:1;min-width:0;}
.arch-day-name{
font-family:var(--font);
font-size:14px;font-weight:800;
color:var(--t1);
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.arch-day-current-pill{
background:linear-gradient(135deg,#22C55E,#15803d);
color:#fff;
padding:2px 8px;
border-radius:7px;
font-size:9px;font-weight:800;
}
.arch-day-quick{
display:flex;gap:10px;font-size:11px;color:var(--t3);margin-top:4px;flex-wrap:wrap;
}
.arch-day-quick strong{color:var(--t2);font-family:var(--font);font-weight:800;}
.arch-day-rev{
text-align:left;
flex-shrink:0;
}
.arch-day-rev-v{
font-family:var(--font);
font-size:18px;font-weight:900;
color:var(--gr);
}
.arch-day-rev-l{
font-size:9px;
color:var(--t3);
margin-top:1px;
}
.arch-day-toggle{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
color:var(--t3);
flex-shrink:0;
transition:transform .25s;
}
.arch-day.is-open .arch-day-toggle{transform:rotate(180deg);}
/* Day details (expanded) */
.arch-day-details{
max-height:0;
overflow:hidden;
transition:max-height .35s ease;
border-top:1px solid var(--bdr);
}
.arch-day.is-open .arch-day-details{max-height:3000px;}
.arch-day-stats-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
gap:8px;
padding:14px 16px;
background:rgba(0,0,0,.15);
border-bottom:1px solid var(--bdr);
}
.arch-stat{
padding:10px 12px;
background:var(--d3);
border:1px solid var(--bdr);
border-right:3px solid var(--sc,var(--g2));
border-radius:10px;
}
.arch-stat-l{font-size:9.5px;color:var(--t3);font-weight:700;}
.arch-stat-v{
font-family:var(--font);
font-size:17px;font-weight:900;
color:var(--sc,var(--g2));
margin-top:3px;
line-height:1;
}
.arch-stat-sub{font-size:9px;color:var(--t4);margin-top:3px;}
.arch-day-tickets{
padding:14px 16px;
}
.arch-day-tickets-h{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:10px;
}
.arch-day-tickets-h-t{
font-family:var(--font);font-size:12px;font-weight:800;
color:var(--g2);
}
.arch-view-all-btn{
padding:6px 11px;
background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(59,130,246,.05));
border:1px solid rgba(59,130,246,.3);
color:#60A5FA;
border-radius:8px;
font-size:10.5px;font-weight:700;
cursor:pointer;
transition:all .2s;
}
.arch-view-all-btn:hover{
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
border-color:transparent;
}
.arch-ticket-list{display:flex;flex-direction:column;gap:6px;}
.arch-tk{
display:flex;align-items:center;gap:11px;
padding:9px 11px;
background:rgba(255,255,255,.02);
border:1px solid var(--bdr);
border-radius:9px;
font-size:11px;
transition:all .15s;
}
.arch-tk:hover{
background:rgba(255,255,255,.04);
border-color:var(--bdr2);
}
.arch-tk-num{
font-family:var(--font);font-weight:900;font-size:12px;color:var(--g2);
min-width:38px;
}
.arch-tk-info{flex:1;min-width:0;}
.arch-tk-name{color:var(--t1);font-weight:700;}
.arch-tk-sub{color:var(--t3);font-size:10px;margin-top:1px;}
.arch-tk-price{
font-family:var(--font);font-weight:900;font-size:13px;
}
.arch-tk-price.paid{color:var(--gr);}
.arch-tk-price.unpaid{color:var(--rd);}
.arch-tk-price.refunded{color:#a855f7;}
.arch-tk-status{
width:8px;height:8px;border-radius:50%;flex-shrink:0;
}
.arch-tk-status.paid{background:var(--gr);box-shadow:0 0 6px rgba(34,197,94,.5);}
.arch-tk-status.unpaid{background:var(--rd);box-shadow:0 0 6px rgba(239,68,68,.5);}
.arch-tk-status.refunded{background:#a855f7;box-shadow:0 0 6px rgba(168,85,247,.5);}
/* Empty state */
.arch-empty{
padding:50px 20px;
text-align:center;
color:var(--t3);
}
.arch-empty-ico{font-size:56px;opacity:.4;margin-bottom:12px;}
.arch-empty-t{font-size:14px;font-weight:700;color:var(--t2);margin-bottom:5px;}
.arch-empty-s{font-size:11px;color:var(--t3);}
/*
🆕🆕🆕 ARCHIVE — Luxurious redesign (arch-* extensions)
*/
/* Skeleton loader */
.arch-skeleton{
display:flex;flex-direction:column;gap:10px;
padding:14px 0;
}
.arch-skel-pulse{
height:80px;
background:linear-gradient(90deg,
rgba(255,255,255,.02) 0%,
rgba(255,255,255,.06) 50%,
rgba(255,255,255,.02) 100%);
background-size:200% 100%;
border:1px solid var(--bdr);
border-radius:14px;
animation:archSkel 1.4s ease-in-out infinite;
}
@keyframes archSkel{
0%{background-position:200% 0;}
100%{background-position:-200% 0;}
}
/* ─── VIEW MODE TOGGLE ─── */
.arch-view-toggle{
display:flex;align-items:center;
gap:6px;
padding:5px;
background:linear-gradient(155deg, rgba(255,255,255,.025), rgba(255,255,255,.01));
border:1px solid var(--bdr);
border-radius:14px;
margin:0 0 10px;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.arch-view-btn{
flex:1;
display:flex;align-items:center;justify-content:center;gap:6px;
padding:9px 12px;
background:transparent;
border:none;
color:var(--t3);
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:800;
cursor:pointer;
transition:all .3s cubic-bezier(.16,1,.3,1);
letter-spacing:-.1px;
-webkit-tap-highlight-color:transparent;
}
.arch-view-btn:hover:not(.is-on){
color:var(--t1);
background:rgba(255,255,255,.03);
}
.arch-view-btn.is-on{
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
box-shadow:
0 6px 18px rgba(201,168,76,.35),
inset 0 1px 0 rgba(255,255,255,.2);
}
.arch-view-btn svg{flex-shrink:0;}
/* ─── FILTER CHIPS ─── */
.arch-chips{
display:flex;flex-wrap:wrap;gap:6px;
margin-bottom:12px;
}
.arch-chip{
display:inline-flex;align-items:center;
padding:6px 13px;
background:rgba(255,255,255,.02);
border:1px solid rgba(255,255,255,.06);
color:var(--t3);
border-radius:18px;
font-family:'Cairo',sans-serif;
font-size:11px;
font-weight:800;
cursor:pointer;
transition:all .25s cubic-bezier(.16,1,.3,1);
-webkit-tap-highlight-color:transparent;
letter-spacing:-.1px;
}
.arch-chip:hover:not(.is-on){
background:rgba(255,255,255,.05);
color:var(--t1);
}
.arch-chip.is-on{
background:linear-gradient(135deg, rgba(201,168,76,.2), rgba(201,168,76,.06));
border-color:rgba(201,168,76,.4);
color:var(--g2);
box-shadow:0 4px 12px rgba(201,168,76,.2);
}
.arch-chip.arch-chip-good.is-on{
background:linear-gradient(135deg, rgba(34,197,94,.2), rgba(34,197,94,.06));
border-color:rgba(74,222,128,.4);
color:#4ade80;
box-shadow:0 4px 12px rgba(34,197,94,.2);
}
.arch-chip.arch-chip-bad.is-on{
background:linear-gradient(135deg, rgba(239,68,68,.2), rgba(239,68,68,.06));
border-color:rgba(248,113,113,.4);
color:#f87171;
box-shadow:0 4px 12px rgba(239,68,68,.2);
}
/* ─── INSIGHTS GRID ─── */
.arch-insights{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
gap:9px;
margin-bottom:13px;
}
.arch-insight{
position:relative;
display:flex;align-items:center;gap:10px;
padding:12px 13px;
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid var(--bdr);
border-radius:14px;
overflow:hidden;
transition:all .3s cubic-bezier(.16,1,.3,1);
}
.arch-insight:hover{
transform:translateY(-2px);
border-color:rgba(255,255,255,.1);
box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.arch-insight-good{
border-color:rgba(74,222,128,.25);
background:linear-gradient(155deg, rgba(34,197,94,.06), var(--d4));
}
.arch-insight-bad{
border-color:rgba(248,113,113,.25);
background:linear-gradient(155deg, rgba(239,68,68,.06), var(--d4));
}
.arch-insight-ico{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
color:#fff;
border-radius:11px;
font-size:17px;
flex-shrink:0;
box-shadow:0 6px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
}
.arch-insight-body{flex:1;min-width:0;}
.arch-insight-lbl{
font-size:10px;
color:var(--t3);
font-weight:800;
margin-bottom:3px;
letter-spacing:.2px;
}
.arch-insight-val{
font-family:var(--font);
font-size:16px;
font-weight:900;
color:var(--t1);
letter-spacing:-.4px;
line-height:1;
}
.arch-insight-val span{
font-size:10px;
opacity:.65;
margin-right:3px;
font-weight:700;
}
.arch-insight-good .arch-insight-val{color:#4ade80;}
.arch-insight-bad .arch-insight-val{color:#f87171;}
/* ─── HIGHLIGHTS (best/busiest) ─── */
.arch-highlights{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:11px;
margin-bottom:14px;
}
.arch-highlight{
position:relative;
padding:14px 16px 13px;
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid var(--bdr);
border-radius:16px;
overflow:hidden;
transition:all .3s cubic-bezier(.16,1,.3,1);
}
.arch-highlight:hover{
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(0,0,0,.35);
}
.arch-highlight-best{
border-color:rgba(251,191,36,.4);
background:linear-gradient(155deg, rgba(201,168,76,.1), var(--d4));
box-shadow:0 10px 26px rgba(201,168,76,.15);
}
.arch-highlight-busy{
border-color:rgba(248,113,113,.4);
background:linear-gradient(155deg, rgba(239,68,68,.08), var(--d4));
box-shadow:0 10px 26px rgba(239,68,68,.15);
}
.arch-highlight-orb{
position:absolute;
width:180px;height:180px;
border-radius:50%;
filter:blur(60px);
pointer-events:none;
top:-70px;right:-50px;
animation:archHighlightOrb 14s ease-in-out infinite;
}
.arch-highlight-best .arch-highlight-orb{
background:radial-gradient(circle, rgba(251,191,36,.35), transparent 65%);
}
.arch-highlight-busy .arch-highlight-orb{
background:radial-gradient(circle, rgba(248,113,113,.32), transparent 65%);
}
@keyframes archHighlightOrb{
0%,100%{transform:translate(0,0) scale(1);opacity:.85;}
50%{transform:translate(-15px,10px) scale(1.1);opacity:1;}
}
.arch-highlight-h{
position:relative;z-index:1;
margin-bottom:8px;
}
.arch-highlight-badge{
display:inline-flex;align-items:center;
padding:4px 11px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
font-family:'Cairo',sans-serif;
font-size:10.5px;
font-weight:900;
letter-spacing:.2px;
}
.arch-highlight-best .arch-highlight-badge{
background:rgba(251,191,36,.18);
border-color:rgba(251,191,36,.4);
color:#fbbf24;
}
.arch-highlight-busy .arch-highlight-badge{
background:rgba(248,113,113,.18);
border-color:rgba(248,113,113,.4);
color:#f87171;
}
.arch-highlight-day{
position:relative;z-index:1;
font-family:var(--font);
font-size:13px;
font-weight:800;
color:var(--t2);
margin-bottom:5px;
}
.arch-highlight-val{
position:relative;z-index:1;
font-family:var(--font);
font-size:26px;
font-weight:900;
letter-spacing:-.7px;
line-height:1;
background-image:linear-gradient(135deg, #fff 0%, var(--g2) 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:luxShine 6s ease-in-out infinite;
margin-bottom:5px;
}
.arch-highlight-best .arch-highlight-val{
background-image:linear-gradient(135deg, #fff 0%, #fbbf24 50%, #fff 100%);
}
.arch-highlight-busy .arch-highlight-val{
background-image:linear-gradient(135deg, #fff 0%, #f87171 50%, #fff 100%);
}
.arch-highlight-val span{
font-size:14px;
opacity:.7;
margin-right:4px;
font-weight:700;
-webkit-text-fill-color:initial;
background:none;
color:var(--t2);
}
.arch-highlight-sub{
position:relative;z-index:1;
font-size:11px;
color:var(--t3);
font-weight:700;
}
/* ─── DAY CARD ENHANCEMENTS ─── */
.arch-cards-wrap{
display:flex;flex-direction:column;
gap:9px;
}
.arch-day-dow{
display:inline-flex;align-items:center;
padding:1.5px 8px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
color:var(--t3);
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:9.5px;
font-weight:800;
margin-right:6px;
}
.arch-day.is-profit .arch-day-rev-v.is-profit{color:#4ade80;}
.arch-day.is-loss .arch-day-rev-v.is-loss{color:#f87171;}
.arch-day-rev-v span{
font-size:11px;opacity:.6;font-weight:700;
}
/* Adapt stats colors */
.arch-stat-rev{--sc:#4ade80;}
.arch-stat-exp{--sc:#f87171;}
.arch-stat-ref{--sc:#c084fc;}
.arch-stat-cash{--sc:#22C55E;}
.arch-stat-elec{--sc:#60A5FA;}
.arch-stat-vat{--sc:#fbbf24;}
/* ─── TICKET VIEW TOGGLE INSIDE DAY ─── */
.arch-tk-view-toggle{
display:inline-flex;align-items:center;
gap:3px;
padding:3px;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
border-radius:9px;
margin-right:8px;
}
.arch-tk-view-btn{
width:28px;height:24px;
display:flex;align-items:center;justify-content:center;
background:transparent;
border:none;
color:var(--t3);
border-radius:7px;
cursor:pointer;
transition:all .2s;
-webkit-tap-highlight-color:transparent;
}
.arch-tk-view-btn:hover:not(.is-on){
background:rgba(255,255,255,.04);
color:var(--t1);
}
.arch-tk-view-btn.is-on{
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
box-shadow:0 3px 8px rgba(201,168,76,.3);
}
/* ─── TICKETS IN LIST MODE (Rectangle rows) ─── */
.arch-tk-list .arch-tk-name{flex:1;min-width:0;}
.arch-tk-price span{font-size:9px;opacity:.6;}
.arch-tk-empty{
text-align:center;
padding:20px;
color:var(--t3);
font-size:11px;
}
.arch-tk-more{
text-align:center;
padding:10px;
color:var(--t3);
font-size:11px;
font-weight:700;
}
/* ─── TICKETS IN GRID MODE (Square cards) ─── */
.arch-ticket-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
gap:8px;
}
.arch-tk-card{
position:relative;
display:flex;flex-direction:column;
gap:6px;
padding:11px 12px;
background:linear-gradient(155deg, rgba(0,0,0,.25), rgba(0,0,0,.15));
border:1.5px solid var(--bdr);
border-radius:13px;
transition:all .3s cubic-bezier(.16,1,.3,1);
cursor:default;
overflow:hidden;
}
.arch-tk-card:hover{
transform:translateY(-2px);
border-color:rgba(255,255,255,.12);
box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.arch-tk-card.paid{
border-color:rgba(74,222,128,.25);
background:linear-gradient(155deg, rgba(34,197,94,.05), rgba(0,0,0,.25));
}
.arch-tk-card.unpaid{
border-color:rgba(251,191,36,.25);
background:linear-gradient(155deg, rgba(245,158,11,.05), rgba(0,0,0,.25));
}
.arch-tk-card.refunded{
border-color:rgba(192,132,252,.25);
background:linear-gradient(155deg, rgba(168,85,247,.05), rgba(0,0,0,.25));
opacity:.85;
}
.arch-tk-card-h{
display:flex;align-items:center;justify-content:space-between;
}
.arch-tk-card-num{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t2);
letter-spacing:-.3px;
}
.arch-tk-card-status{
width:22px;height:22px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
border-radius:50%;
font-size:11px;
font-weight:900;
}
.arch-tk-card-status.paid{
background:rgba(74,222,128,.18);
color:#4ade80;
}
.arch-tk-card-status.unpaid{
background:rgba(251,191,36,.18);
color:#fbbf24;
}
.arch-tk-card-status.refunded{
background:rgba(192,132,252,.18);
color:#c084fc;
}
.arch-tk-card-name{
font-family:'Cairo',sans-serif;
font-size:12px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
line-height:1.4;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.arch-tk-card-meta{
display:flex;flex-direction:column;
gap:2px;
}
.arch-tk-card-meta-row{
font-size:9.5px;
color:var(--t3);
font-weight:700;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
line-height:1.5;
}
.arch-tk-card-price{
font-family:var(--font);
font-size:16px;
font-weight:900;
letter-spacing:-.4px;
color:#4ade80;
margin-top:auto;
padding-top:4px;
border-top:1px dashed rgba(255,255,255,.06);
}
.arch-tk-card.unpaid .arch-tk-card-price{color:#fbbf24;}
.arch-tk-card.refunded .arch-tk-card-price{color:#c084fc;}
.arch-tk-card-price span{font-size:10px;opacity:.65;margin-right:3px;font-weight:700;}
.arch-tk-card-pay{
font-size:9.5px;
color:var(--t3);
font-weight:800;
padding:3px 8px;
background:rgba(255,255,255,.04);
border-radius:8px;
text-align:center;
}
.arch-tk-grid-more{
grid-column:1/-1;
text-align:center;
padding:10px;
color:var(--t3);
font-size:11px;
font-weight:700;
}
/* ─── COMPACT LIST MODE ─── */
.arch-compact-list{
display:flex;flex-direction:column;
gap:4px;
}
.arch-compact{
display:flex;align-items:center;
gap:11px;
padding:11px 13px;
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid var(--bdr);
border-radius:12px;
cursor:pointer;
transition:all .25s cubic-bezier(.16,1,.3,1);
-webkit-tap-highlight-color:transparent;
}
.arch-compact:hover{
background:linear-gradient(155deg, var(--d2), var(--d3));
border-color:rgba(255,255,255,.1);
transform:translateX(-2px);
}
.arch-compact.is-current{
border-color:rgba(74,222,128,.4);
background:linear-gradient(155deg, rgba(34,197,94,.05), var(--d4));
}
.arch-compact.is-profit{border-right:3px solid #4ade80;}
.arch-compact.is-loss{border-right:3px solid #f87171;}
.arch-compact.is-zero{border-right:3px solid var(--t4);}
.arch-compact-day{
width:44px;height:44px;
display:flex;flex-direction:column;align-items:center;justify-content:center;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border-radius:11px;
flex-shrink:0;
}
.arch-compact-dd{
font-family:var(--font);
font-size:17px;
font-weight:900;
letter-spacing:-.5px;
line-height:1;
}
.arch-compact-m{
font-size:9px;
font-weight:800;
opacity:.8;
margin-top:1px;
}
.arch-compact-info{flex:1;min-width:0;}
.arch-compact-name{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
margin-bottom:3px;
display:flex;align-items:center;gap:6px;
}
.arch-compact-dow{
display:inline-flex;align-items:center;
padding:1.5px 7px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
color:var(--t3);
border-radius:9px;
font-family:'Cairo',sans-serif;
font-size:9px;
font-weight:800;
}
.arch-compact-stats{
display:flex;gap:9px;
font-size:10.5px;
color:var(--t3);
font-weight:700;
}
.arch-compact-net{
font-family:var(--font);
font-size:15px;
font-weight:900;
letter-spacing:-.4px;
white-space:nowrap;
}
.arch-compact.is-profit .arch-compact-net{color:#4ade80;}
.arch-compact.is-loss .arch-compact-net{color:#f87171;}
.arch-compact.is-zero .arch-compact-net{color:var(--t3);}
.arch-compact-net span{font-size:10px;opacity:.6;margin-right:2px;font-weight:700;}
.arch-compact-arrow{
color:var(--t4);
flex-shrink:0;
transition:transform .2s;
}
.arch-compact:hover .arch-compact-arrow{
color:var(--g2);
transform:translateX(-3px);
}
/* ─── CALENDAR VIEW ─── */
.arch-cal-wrap{
display:flex;flex-direction:column;
gap:18px;
}
.arch-cal-month{
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid var(--bdr);
border-radius:18px;
padding:14px;
overflow:hidden;
}
.arch-cal-month-h{
display:flex;align-items:center;justify-content:space-between;
gap:10px;flex-wrap:wrap;
margin-bottom:14px;
padding-bottom:11px;
border-bottom:1px dashed rgba(255,255,255,.08);
}
.arch-cal-month-title{
font-family:var(--font);
font-size:15px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
}
.arch-cal-month-stats{
display:flex;align-items:center;gap:12px;
font-size:11px;
color:var(--t3);
font-weight:700;
}
.arch-cal-month-net{
font-family:var(--font);
font-weight:900;
font-size:13px;
padding:4px 12px;
border-radius:11px;
letter-spacing:-.2px;
}
.arch-cal-month-net.pos{
background:rgba(34,197,94,.15);
color:#4ade80;
border:1px solid rgba(74,222,128,.3);
}
.arch-cal-month-net.neg{
background:rgba(239,68,68,.15);
color:#f87171;
border:1px solid rgba(248,113,113,.3);
}
.arch-cal-week-h{
display:grid;
grid-template-columns:repeat(7, 1fr);
gap:5px;
margin-bottom:6px;
}
.arch-cal-week-h > div{
text-align:center;
font-family:'Cairo',sans-serif;
font-size:10px;
font-weight:800;
color:var(--t3);
padding:5px 0;
letter-spacing:-.1px;
}
.arch-cal-grid{
display:grid;
grid-template-columns:repeat(7, 1fr);
gap:5px;
}
.arch-cal-cell{
aspect-ratio:1;
min-height:55px;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
gap:1px;
padding:5px 4px;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:11px;
color:var(--t3);
font-weight:700;
transition:all .2s cubic-bezier(.16,1,.3,1);
position:relative;
overflow:hidden;
}
.arch-cal-cell-empty{
background:transparent;
border:1px dashed rgba(255,255,255,.04);
}
.arch-cal-cell-blank{
color:var(--t4);
font-size:10px;
opacity:.4;
}
.arch-cal-cell-has{
cursor:pointer;
border-width:1.5px;
}
.arch-cal-cell-has:hover{
transform:scale(1.08);
z-index:2;
border-color:var(--g2);
box-shadow:0 8px 20px rgba(0,0,0,.4);
}
.arch-cal-cell-has.is-profit{
background:linear-gradient(155deg, rgba(34,197,94,.18), rgba(0,0,0,.2));
border-color:rgba(74,222,128,.45);
}
.arch-cal-cell-has.is-loss{
background:linear-gradient(155deg, rgba(239,68,68,.18), rgba(0,0,0,.2));
border-color:rgba(248,113,113,.45);
}
.arch-cal-cell-has.is-zero{
background:rgba(255,255,255,.03);
border-color:rgba(148,163,184,.3);
}
.arch-cal-cell-day{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
line-height:1;
}
.arch-cal-cell-tk{
font-size:9px;
color:var(--t3);
font-weight:800;
}
.arch-cal-cell-net{
font-family:var(--font);
font-size:9.5px;
font-weight:900;
letter-spacing:-.2px;
line-height:1;
}
.arch-cal-cell-has.is-profit .arch-cal-cell-net{color:#4ade80;}
.arch-cal-cell-has.is-loss .arch-cal-cell-net{color:#f87171;}
@media(max-width:560px){
.arch-view-toggle{flex-wrap:wrap;}
.arch-view-btn{font-size:10.5px;padding:8px 9px;}
.arch-view-btn span{display:none;}
.arch-view-btn svg{margin:0;}
.arch-insights{grid-template-columns:repeat(2, 1fr);}
.arch-insight{padding:10px 11px;}
.arch-insight-val{font-size:14px;}
.arch-highlight-val{font-size:22px;}
.arch-cal-cell{min-height:48px;font-size:10px;padding:3px 2px;}
.arch-cal-cell-day{font-size:12px;}
.arch-cal-cell-tk,.arch-cal-cell-net{font-size:8.5px;}
.arch-ticket-grid{grid-template-columns:repeat(2, 1fr);}
.arch-compact{padding:9px 11px;gap:9px;}
.arch-compact-day{width:38px;height:38px;}
.arch-compact-dd{font-size:14px;}
.arch-compact-net{font-size:13px;}
}
/* ═══════════════════════════════════════════
MONEY HIDDEN MODE (BANK-STYLE PRIVACY)
═══════════════════════════════════════════ */
.dhp-money-toggle{
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);
border:1px solid var(--bdr);
color:var(--t2);
border-radius:12px;
cursor:pointer;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
touch-action:manipulation;
}
.dhp-money-toggle:hover{
background:rgba(201,168,76,.1);
color:var(--g2);
border-color:rgba(201,168,76,.3);
transform:translateY(-1px);
}
.dhp-money-toggle:active{transform:scale(.92);}
/* Active state when money is hidden */
body.money-hidden .dhp-money-toggle{
background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(159,126,28,.08));
color:var(--g2);
border-color:rgba(201,168,76,.4);
box-shadow:0 4px 12px rgba(201,168,76,.25);
}
/*
🆕🆕🆕 NOTIFICATIONS BELL + PANEL — Luxurious
*/
.notif-bell{
position:relative;
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);
border:1px solid var(--bdr);
color:var(--t2);
border-radius:12px;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
flex-shrink:0;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
z-index:5;
}
.notif-bell:hover{
background:linear-gradient(135deg,rgba(168,85,247,.15),rgba(168,85,247,.05));
color:#c084fc;
border-color:rgba(168,85,247,.35);
transform:translateY(-1px);
}
.notif-bell:active{transform:scale(.92);}
/* When there are unread notifications */
.notif-bell.has-unread{
background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(168,85,247,.08));
color:#c084fc;
border-color:rgba(168,85,247,.45);
box-shadow:0 4px 14px rgba(168,85,247,.3);
animation:bellRing 2.5s ease-in-out;
}
@keyframes bellRing{
0%{transform:rotate(0);}
3%{transform:rotate(15deg);}
6%{transform:rotate(-12deg);}
9%{transform:rotate(10deg);}
12%{transform:rotate(-8deg);}
15%{transform:rotate(5deg);}
18%{transform:rotate(0);}
100%{transform:rotate(0);}
}
/* Badge with count */
.notif-bell-badge{
position:absolute;
top:-4px;left:-4px;
min-width:18px;height:18px;
padding:0 5px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#ef4444,#dc2626);
color:#fff;
border-radius:10px;
font-family:'Outfit',sans-serif;
font-size:10px;
font-weight:900;
border:2px solid var(--d2);
box-shadow:0 4px 10px rgba(239,68,68,.45);
z-index:2;
letter-spacing:-.3px;
}
/* Pulse ring effect when unread */
.notif-bell-pulse{
position:absolute;
inset:-2px;
border-radius:14px;
pointer-events:none;
opacity:0;
}
.notif-bell.has-unread .notif-bell-pulse{
border:2px solid rgba(168,85,247,.5);
animation:bellPulse 2s ease-in-out infinite;
}
@keyframes bellPulse{
0%{opacity:.8;transform:scale(1);}
100%{opacity:0;transform:scale(1.4);}
}
/* Notification panel — dropdown */
.notif-backdrop{
position:fixed;
inset:0;
background:rgba(0,0,0,.4);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
z-index:998;
display:none;
animation:notifBackdropFade .25s ease;
}
.notif-backdrop.on{display:block;}
@keyframes notifBackdropFade{from{opacity:0;}to{opacity:1;}}
.notif-panel{
position:fixed;
top:74px;left:14px;
width:min(420px, calc(100vw - 28px));
max-height:min(580px, calc(100vh - 100px));
background:linear-gradient(160deg,rgba(20,15,30,.96),rgba(15,10,25,.98));
border:1.5px solid rgba(168,85,247,.4);
border-radius:22px;
overflow:hidden;
display:none;
flex-direction:column;
z-index:999;
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
box-shadow:
0 30px 80px rgba(0,0,0,.7),
0 0 0 1px rgba(255,255,255,.04) inset,
0 0 80px rgba(168,85,247,.2);
transform-origin:top left;
}
.notif-panel.on{display:flex;animation:notifSlide .35s cubic-bezier(.16,1,.3,1);}
@keyframes notifSlide{
from{opacity:0;transform:translateY(-12px) scale(.96);}
to{opacity:1;transform:translateY(0) scale(1);}
}
.notif-panel-orb{
position:absolute;
top:-80px;right:-80px;
width:240px;height:240px;
background:radial-gradient(circle,rgba(168,85,247,.3),transparent 65%);
filter:blur(50px);
pointer-events:none;
animation:notifOrb 14s ease-in-out infinite;
}
@keyframes notifOrb{0%,100%{transform:translate(0,0);}50%{transform:translate(-20px,20px);}}
/* Top shine sweep */
.notif-panel::before{
content:'';
position:absolute;
top:0;left:-100%;
width:100%;height:1.5px;
background:linear-gradient(90deg,transparent,rgba(192,132,252,.6),transparent);
animation:notifShine 6s ease-in-out infinite;
}
@keyframes notifShine{0%,100%{left:-100%;}50%{left:100%;}}
.notif-h{
position:relative;
display:flex;align-items:center;justify-content:space-between;
gap:10px;
padding:16px 18px 14px;
border-bottom:1px solid rgba(255,255,255,.06);
background:linear-gradient(155deg,rgba(168,85,247,.08),transparent);
}
.notif-h-left{
display:flex;align-items:center;gap:11px;
flex:1;min-width:0;
}
.notif-h-ico{
width:40px;height:40px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#a855f7,#7c3aed);
border-radius:12px;
color:#fff;
box-shadow:0 8px 20px rgba(168,85,247,.4),inset 0 1px 0 rgba(255,255,255,.2);
}
.notif-h-title{
font-family:'Outfit',sans-serif;
font-size:15px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
}
.notif-h-sub{
font-size:10.5px;
color:var(--t3);
font-weight:700;
margin-top:2px;
}
.notif-h-actions{
display:flex;align-items:center;gap:6px;
flex-shrink:0;
}
.notif-mark-all{
display:inline-flex;align-items:center;gap:5px;
padding:7px 11px;
background:rgba(168,85,247,.12);
border:1px solid rgba(168,85,247,.3);
color:#c084fc;
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:10.5px;
font-weight:800;
cursor:pointer;
transition:all .25s;
}
.notif-mark-all:hover{
background:rgba(168,85,247,.18);
transform:translateY(-1px);
}
.notif-clear-all{
display:inline-flex;align-items:center;gap:5px;
padding:7px 11px;
background:rgba(239,68,68,.1);
border:1px solid rgba(239,68,68,.3);
color:#fca5a5;
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:10.5px;
font-weight:800;
cursor:pointer;
transition:all .25s;
}
.notif-clear-all:hover{
background:rgba(239,68,68,.18);
transform:translateY(-1px);
}
/*
🆕🆕🆕 NOTIFICATION POPUP — V2: Ultra-luxurious palette
Dark obsidian + gold accents instead of purple
*/
/* Backdrop — deeper darker */
.notif-popup-backdrop{
position:fixed;
inset:0;
background:radial-gradient(ellipse at center, rgba(8,5,12,.7), rgba(0,0,0,.85));
backdrop-filter:blur(10px) saturate(120%);
-webkit-backdrop-filter:blur(10px) saturate(120%);
z-index:9998;
opacity:0;
pointer-events:none;
transition:opacity .4s cubic-bezier(.16,1,.3,1);
}
.notif-popup-backdrop.on{
opacity:1;
pointer-events:auto;
}
/* The popup card — obsidian glass */
.notif-popup{
position:fixed;
top:50%;left:50%;
width:min(440px, calc(100vw - 32px));
z-index:9999;
background:
linear-gradient(165deg,
rgba(10, 8, 16, .98) 0%,
rgba(15, 12, 22, .98) 50%,
rgba(10, 8, 16, .98) 100%);
border:1px solid rgba(201,168,76,.18);
border-radius:26px;
overflow:hidden;
backdrop-filter:blur(40px) saturate(180%);
-webkit-backdrop-filter:blur(40px) saturate(180%);
box-shadow:
0 60px 160px rgba(0,0,0,.9),
0 0 0 1px rgba(255,255,255,.04) inset,
0 1px 0 rgba(255,255,255,.05) inset,
0 0 80px rgba(201,168,76,.12);
opacity:0;
transform:translate(-50%, -50%) scale(.88) translateY(20px);
transition:all .55s cubic-bezier(.34, 1.5, .64, 1);
pointer-events:none;
}
.notif-popup.on{
opacity:1;
transform:translate(-50%, -50%) scale(1) translateY(0);
pointer-events:auto;
}
.notif-popup.is-closing{
opacity:0;
transform:translate(-50%, -50%) scale(.94) translateY(10px);
transition:all .3s cubic-bezier(.4, 0, .2, 1);
}
/* Refined gradient border — gold-centric */
.notif-popup::before{
content:'';
position:absolute;
inset:0;
border-radius:26px;
padding:1px;
background:linear-gradient(135deg,
rgba(201,168,76,.6) 0%,
rgba(201,168,76,.15) 25%,
rgba(255,255,255,.04) 50%,
rgba(201,168,76,.15) 75%,
rgba(201,168,76,.6) 100%);
background-size:200% 200%;
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask-composite:exclude;
z-index:1;
pointer-events:none;
animation:popupBorderShift 10s ease infinite;
}
@keyframes popupBorderShift{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
/* Top hairline shine */
.notif-popup::after{
content:'';
position:absolute;
top:0;left:-100%;
width:60%;height:1px;
background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
animation:popupTopShine 4s ease-in-out infinite;
z-index:2;
}
@keyframes popupTopShine{
0%{left:-100%;opacity:0;}
50%{opacity:1;}
100%{left:120%;opacity:0;}
}
/* Subtle gold orbs inside (much more refined) */
.notif-popup-orb{
position:absolute;
border-radius:50%;
filter:blur(80px);
pointer-events:none;
z-index:0;
}
.notif-popup-orb-1{
width:240px;height:240px;
background:radial-gradient(circle, rgba(201,168,76,.22), transparent 65%);
top:-100px;right:-70px;
animation:popupOrb1 14s ease-in-out infinite;
}
.notif-popup-orb-2{
width:180px;height:180px;
background:radial-gradient(circle, rgba(159,126,28,.15), transparent 65%);
bottom:-60px;left:-50px;
animation:popupOrb2 18s ease-in-out infinite;
}
@keyframes popupOrb1{
0%,100%{transform:translate(0,0) scale(1);opacity:.7;}
50%{transform:translate(-20px,15px) scale(1.2);opacity:1;}
}
@keyframes popupOrb2{
0%,100%{transform:translate(0,0) scale(1);opacity:.6;}
50%{transform:translate(20px,-15px) scale(1.15);opacity:.9;}
}
/* Subtle dot pattern background */
.notif-popup-pattern{
position:absolute;
inset:0;
background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.025) 1px, transparent 0);
background-size:18px 18px;
mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
pointer-events:none;
z-index:0;
}
/* Close button — refined gold accent */
.notif-popup-close{
position:absolute;
top:14px;left:14px;
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
color:var(--t3);
border-radius:11px;
cursor:pointer;
z-index:5;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
backdrop-filter:blur(10px);
}
.notif-popup-close:hover{
background:rgba(201,168,76,.15);
border-color:rgba(201,168,76,.35);
color:#fbbf24;
transform:rotate(90deg) scale(1.05);
}
/* Hero section — refined spacing */
.notif-popup-hero{
position:relative;
padding:34px 28px 24px;
text-align:center;
z-index:2;
}
/* Hero divider — subtle gold gradient line */
.notif-popup-hero::after{
content:'';
position:absolute;
bottom:0;left:24px;right:24px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.2) 30%, rgba(201,168,76,.2) 70%, transparent);
}
/* Icon area — premium framing */
.notif-popup-ico-wrap{
position:relative;
width:84px;height:84px;
margin:0 auto 18px;
}
/* Outer glow ring */
.notif-popup-ico-glow{
position:absolute;
inset:-28px;
background:radial-gradient(circle, rgba(201,168,76,.35) 0%, transparent 60%);
filter:blur(15px);
z-index:0;
animation:popupIcoGlow 2.8s ease-in-out infinite;
}
@keyframes popupIcoGlow{
0%,100%{opacity:.5;transform:scale(1);}
50%{opacity:.9;transform:scale(1.12);}
}
/* Spinning ring with gold dots */
.notif-popup-ico-ring{
position:absolute;
inset:-8px;
border:1.5px solid rgba(201,168,76,.25);
border-radius:50%;
z-index:1;
animation:popupRingSpin 14s linear infinite;
}
.notif-popup-ico-ring::before,
.notif-popup-ico-ring::after{
content:'';
position:absolute;
width:6px;height:6px;
background:linear-gradient(135deg, #fbbf24, #C9A84C);
border-radius:50%;
box-shadow:0 0 10px rgba(251,191,36,.7);
}
.notif-popup-ico-ring::before{top:-3px;left:50%;transform:translateX(-50%);}
.notif-popup-ico-ring::after{bottom:-3px;left:50%;transform:translateX(-50%);}
@keyframes popupRingSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
/* Inner dashed ring (reverse) */
.notif-popup-ico-ring-inner{
position:absolute;
inset:-4px;
border:1px dashed rgba(201,168,76,.3);
border-radius:50%;
z-index:1;
animation:popupRingSpin 22s linear infinite reverse;
}
/* The icon itself — premium dark with gold ring */
.notif-popup-ico{
position:absolute;
inset:0;
display:flex;align-items:center;justify-content:center;
border-radius:22px;
font-size:38px;
z-index:2;
color:#fff;
background:linear-gradient(135deg,
rgba(40,30,15,.95) 0%,
rgba(25,20,12,.95) 100%);
border:1.5px solid rgba(201,168,76,.4);
box-shadow:
0 24px 50px rgba(0,0,0,.6),
inset 0 2px 0 rgba(255,255,255,.1),
inset 0 -2px 0 rgba(0,0,0,.2),
inset 0 0 30px rgba(201,168,76,.15);
animation:popupIcoBounce .9s cubic-bezier(.34,1.6,.64,1);
}
@keyframes popupIcoBounce{
0%{transform:scale(0) rotate(-25deg);}
60%{transform:scale(1.12) rotate(8deg);}
100%{transform:scale(1) rotate(0);}
}
/* Type-specific accent rings on the icon (no garish backgrounds anymore) */
.notif-popup-info .notif-popup-ico{border-color:rgba(96,165,250,.45);box-shadow:0 24px 50px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.1),inset 0 0 30px rgba(59,130,246,.15);}
.notif-popup-info .notif-popup-ico-glow{background:radial-gradient(circle, rgba(59,130,246,.35), transparent 60%);}
.notif-popup-info .notif-popup-ico-ring{border-color:rgba(96,165,250,.3);}
.notif-popup-info .notif-popup-ico-ring::before,
.notif-popup-info .notif-popup-ico-ring::after{background:linear-gradient(135deg, #60A5FA, #3B82F6);box-shadow:0 0 10px rgba(96,165,250,.7);}
.notif-popup-success .notif-popup-ico{border-color:rgba(74,222,128,.45);box-shadow:0 24px 50px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.1),inset 0 0 30px rgba(34,197,94,.15);}
.notif-popup-success .notif-popup-ico-glow{background:radial-gradient(circle, rgba(34,197,94,.35), transparent 60%);}
.notif-popup-success .notif-popup-ico-ring{border-color:rgba(74,222,128,.3);}
.notif-popup-success .notif-popup-ico-ring::before,
.notif-popup-success .notif-popup-ico-ring::after{background:linear-gradient(135deg, #4ade80, #22C55E);box-shadow:0 0 10px rgba(74,222,128,.7);}
.notif-popup-warning .notif-popup-ico{border-color:rgba(251,191,36,.5);box-shadow:0 24px 50px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.1),inset 0 0 30px rgba(245,158,11,.18);}
.notif-popup-warning .notif-popup-ico-glow{background:radial-gradient(circle, rgba(245,158,11,.4), transparent 60%);}
.notif-popup-urgent .notif-popup-ico{
border-color:rgba(248,113,113,.55);
box-shadow:0 24px 50px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.1),inset 0 0 30px rgba(239,68,68,.2);
animation:popupUrgentShake 1.3s ease-in-out infinite, popupIcoBounce .9s cubic-bezier(.34,1.6,.64,1);
}
@keyframes popupUrgentShake{
0%,100%{box-shadow:0 24px 50px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.1),inset 0 0 30px rgba(239,68,68,.2),0 0 0 0 rgba(239,68,68,.5);}
50%{box-shadow:0 24px 50px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.1),inset 0 0 30px rgba(239,68,68,.3),0 0 40px 6px rgba(239,68,68,.25);}
}
.notif-popup-urgent .notif-popup-ico-glow{background:radial-gradient(circle, rgba(239,68,68,.45), transparent 60%);}
.notif-popup-urgent .notif-popup-ico-ring{border-color:rgba(248,113,113,.35);}
.notif-popup-urgent .notif-popup-ico-ring::before,
.notif-popup-urgent .notif-popup-ico-ring::after{background:linear-gradient(135deg, #f87171, #EF4444);box-shadow:0 0 10px rgba(248,113,113,.8);}
/* Badge — refined with gold accent */
.notif-popup-badge{
display:inline-flex;align-items:center;gap:6px;
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.3);
color:#C9A84C;
padding:5px 14px;
border-radius:22px;
font-family:'Outfit',sans-serif;
font-size:10px;
font-weight:900;
letter-spacing:1.5px;
margin-bottom:12px;
text-transform:uppercase;
backdrop-filter:blur(10px);
}
.notif-popup-info .notif-popup-badge{background:rgba(59,130,246,.1);border-color:rgba(96,165,250,.3);color:#93c5fd;}
.notif-popup-success .notif-popup-badge{background:rgba(34,197,94,.1);border-color:rgba(74,222,128,.3);color:#86efac;}
.notif-popup-warning .notif-popup-badge{background:rgba(245,158,11,.1);border-color:rgba(251,191,36,.3);color:#fcd34d;}
.notif-popup-urgent .notif-popup-badge{background:rgba(239,68,68,.1);border-color:rgba(248,113,113,.3);color:#fca5a5;}
.notif-popup-badge-dot{
width:5px;height:5px;
border-radius:50%;
background:currentColor;
box-shadow:0 0 6px currentColor;
animation:popupBadgeDot 1.5s ease-in-out infinite;
}
@keyframes popupBadgeDot{
0%,100%{opacity:1;transform:scale(1);}
50%{opacity:.4;transform:scale(.7);}
}
/* Title — refined gold-to-white gradient */
.notif-popup-title{
font-family:'Outfit',sans-serif;
font-size:23px;
font-weight:900;
letter-spacing:-.7px;
line-height:1.3;
background-image:linear-gradient(135deg,
#f5f5f5 0%,
#fbbf24 35%,
#ffffff 50%,
#C9A84C 65%,
#f5f5f5 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:popupTitleShine 6s ease-in-out infinite;
margin-bottom:6px;
word-break:break-word;
}
@keyframes popupTitleShine{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
/* From owner — premium chip */
.notif-popup-from{
display:inline-flex;align-items:center;gap:7px;
margin-top:4px;
padding:5px 12px 5px 8px;
background:rgba(0,0,0,.3);
border:1px solid rgba(255,255,255,.05);
border-radius:30px;
font-size:11px;
color:var(--t3);
font-weight:700;
}
.notif-popup-from-crown{
display:inline-flex;align-items:center;justify-content:center;
width:22px;height:22px;
background:linear-gradient(135deg, #C9A84C, #9F7E1C);
color:#1a1206;
border-radius:7px;
font-size:12px;
box-shadow:0 3px 8px rgba(201,168,76,.4),inset 0 1px 0 rgba(255,255,255,.25);
}
.notif-popup-from-name{
color:#fff;
font-family:'Outfit',sans-serif;
font-weight:800;
}
/* Body — refined message */
.notif-popup-body{
position:relative;
padding:24px 30px 20px;
z-index:2;
}
.notif-popup-msg{
font-size:14px;
color:var(--t2);
font-weight:700;
line-height:1.85;
text-align:center;
word-break:break-word;
}
/* Footer — sleek with subtle gold accents */
.notif-popup-footer{
position:relative;
padding:14px 24px 18px;
z-index:2;
}
.notif-popup-footer::before{
content:'';
position:absolute;
top:0;left:24px;right:24px;
height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.15) 30%, rgba(201,168,76,.15) 70%, transparent);
}
/* Progress bar — gold theme */
.notif-popup-progress{
position:relative;
height:3px;
background:rgba(255,255,255,.04);
border-radius:3px;
overflow:hidden;
margin-bottom:14px;
border:1px solid rgba(255,255,255,.02);
}
.notif-popup-progress-bar{
position:absolute;
inset:0;
background:linear-gradient(90deg,
#fbbf24,
#C9A84C,
#fbbf24);
background-size:200% 100%;
transform-origin:right;
box-shadow:0 0 8px rgba(201,168,76,.5);
animation:popupProgressShift 2s linear infinite;
}
.notif-popup-progress-bar.is-running{
animation:popupProgressShrink 5s linear forwards, popupProgressShift 2s linear infinite;
}
@keyframes popupProgressShrink{
from{transform:scaleX(1);}
to{transform:scaleX(0);}
}
@keyframes popupProgressShift{
0%{background-position:0% 50%;}
100%{background-position:200% 50%;}
}
.notif-popup-progress.is-paused .notif-popup-progress-bar{
animation-play-state:paused;
}
.notif-popup-actions{
display:flex;align-items:center;justify-content:space-between;
gap:12px;
}
.notif-popup-timer{
display:flex;align-items:center;gap:6px;
font-size:10.5px;
color:var(--t3);
font-weight:700;
}
.notif-popup-timer svg{color:#C9A84C;opacity:.7;}
.notif-popup-timer-val{
font-family:'Outfit',sans-serif;
font-weight:900;
color:#fbbf24;
font-size:13px;
letter-spacing:-.2px;
min-width:14px;
text-align:center;
text-shadow:0 0 8px rgba(251,191,36,.4);
}
/* Dismiss button — gold premium */
.notif-popup-dismiss{
display:inline-flex;align-items:center;gap:7px;
padding:10px 20px;
background:linear-gradient(135deg, #C9A84C 0%, #9F7E1C 50%, #C9A84C 100%);
background-size:200% auto;
color:#1a1206;
border:none;
border-radius:11px;
font-family:'Cairo',sans-serif;
font-size:12.5px;
font-weight:900;
cursor:pointer;
letter-spacing:-.1px;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
box-shadow:
0 10px 24px rgba(201,168,76,.4),
inset 0 1px 0 rgba(255,255,255,.3),
inset 0 -2px 0 rgba(0,0,0,.1);
-webkit-tap-highlight-color:transparent;
}
.notif-popup-dismiss:hover{
transform:translateY(-2px);
background-position:right center;
box-shadow:
0 14px 32px rgba(201,168,76,.55),
inset 0 1px 0 rgba(255,255,255,.3);
}
.notif-popup-dismiss:active{transform:scale(.96);}
@media(max-width:480px){
.notif-popup{
width:calc(100vw - 24px);
border-radius:22px;
}
.notif-popup-hero{padding:28px 22px 20px;}
.notif-popup-ico-wrap{width:74px;height:74px;}
.notif-popup-ico{font-size:32px;border-radius:18px;}
.notif-popup-title{font-size:20px;}
.notif-popup-body{padding:20px 22px 18px;}
.notif-popup-msg{font-size:13px;}
.notif-popup-footer{padding:12px 20px 16px;}
}
/* Keep the old corner toast as fallback (used elsewhere) */
/*
🆕🆕🆕 LOCK BUTTON IN HEADER
*/
.lock-btn{
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);
border:1px solid var(--bdr);
color:var(--t2);
border-radius:12px;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
flex-shrink:0;
-webkit-tap-highlight-color:transparent;
touch-action:manipulation;
z-index:5;
}
.lock-btn:hover{
background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(201,168,76,.05));
color:#fbbf24;
border-color:rgba(201,168,76,.35);
transform:translateY(-1px);
}
.lock-btn:active{transform:scale(.92);}
/*
🆕🆕🆕 LOCK SCREEN — Full overlay with PIN pad
*/
.lock-screen{
position:fixed;inset:0;z-index:99999;
display:none;
align-items:flex-start;justify-content:center;
background:#000;
overflow-y:auto;
overflow-x:hidden;
padding:20px 16px;
-webkit-overflow-scrolling:touch;
}
.lock-screen.on{display:flex;animation:lockFadeIn .5s cubic-bezier(.16,1,.3,1);}
@keyframes lockFadeIn{from{opacity:0;}to{opacity:1;}}
/* 🆕🆕 Hide ALL content while app is entering with lock active */
body.app-locking > *:not(.lock-screen):not(#lock-screen):not(.lock-bg):not(.lock-setup-modal){
visibility:hidden !important;
}
body.app-locking #lock-screen,
body.app-locking .lock-screen{
visibility:visible !important;
}
.lock-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;}
.lock-orb{position:absolute;border-radius:50%;filter:blur(120px);}
.lock-orb-1{width:600px;height:600px;background:radial-gradient(circle, rgba(201,168,76,.25), transparent 65%);top:-200px;right:-150px;animation:lockOrb1 30s ease-in-out infinite;}
.lock-orb-2{width:500px;height:500px;background:radial-gradient(circle, rgba(159,126,28,.18), transparent 65%);bottom:-180px;left:-130px;animation:lockOrb2 36s ease-in-out infinite;}
.lock-orb-3{width:380px;height:380px;background:radial-gradient(circle, rgba(251,191,36,.12), transparent 65%);top:45%;left:50%;transform:translate(-50%,-50%);animation:lockOrb3 24s ease-in-out infinite;}
@keyframes lockOrb1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,30px) scale(1.1);}}
@keyframes lockOrb2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-30px) scale(1.15);}}
@keyframes lockOrb3{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.2);}}
.lock-grid{
position:fixed;inset:0;
background-image:linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px),linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px);
background-size:60px 60px;
mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
-webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 80%);
opacity:.5;
pointer-events:none;
}
.lock-wrap{
position:relative;z-index:1;
width:100%;max-width:380px;
padding:14px 0 24px;
display:flex;flex-direction:column;
align-items:center;
margin:auto;
}
.lock-time{
font-family:'Outfit',sans-serif;
font-size:48px;font-weight:200;letter-spacing:-1.5px;color:#fff;
margin-bottom:3px;
text-shadow:0 4px 30px rgba(201,168,76,.25);
font-variant-numeric:tabular-nums;
animation:lockRise .8s cubic-bezier(.16,1,.3,1) .15s both;
line-height:1;
}
.lock-date{font-size:12px;color:var(--t3);font-weight:700;margin-bottom:18px;letter-spacing:.5px;animation:lockRise .8s cubic-bezier(.16,1,.3,1) .25s both;}
@keyframes lockRise{from{opacity:0;transform:translateY(15px);}to{opacity:1;transform:translateY(0);}}
.lock-card{
position:relative;width:100%;
background:linear-gradient(165deg,rgba(15,12,22,.85),rgba(10,8,16,.92),rgba(15,12,22,.85));
border:1px solid rgba(201,168,76,.2);
border-radius:24px;
padding:20px 18px 16px;
overflow:hidden;
backdrop-filter:blur(30px) saturate(180%);
-webkit-backdrop-filter:blur(30px) saturate(180%);
box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04) inset,0 0 80px rgba(201,168,76,.1);
animation:lockRise .8s cubic-bezier(.16,1,.3,1) .35s both;
}
.lock-card-shine{position:absolute;top:0;left:-100%;width:60%;height:1px;background:linear-gradient(90deg, transparent, rgba(201,168,76,.7), transparent);animation:lockShine 5s ease-in-out infinite;}
@keyframes lockShine{0%{left:-100%;opacity:0;}50%{opacity:1;}100%{left:120%;opacity:0;}}
.lock-ico-wrap{position:relative;width:64px;height:64px;margin:0 auto 12px;}
.lock-ico-glow{position:absolute;inset:-20px;background:radial-gradient(circle, rgba(201,168,76,.4), transparent 60%);filter:blur(12px);animation:lockIcoGlow 3s ease-in-out infinite;}
@keyframes lockIcoGlow{0%,100%{opacity:.5;}50%{opacity:1;}}
.lock-ico-ring{position:absolute;inset:-6px;border:1.5px solid rgba(201,168,76,.3);border-radius:50%;animation:lockRingSpin 14s linear infinite;}
.lock-ico-ring::before,.lock-ico-ring::after{content:'';position:absolute;width:5px;height:5px;background:linear-gradient(135deg,#fbbf24,#C9A84C);border-radius:50%;box-shadow:0 0 8px rgba(251,191,36,.7);}
.lock-ico-ring::before{top:-2.5px;left:50%;transform:translateX(-50%);}
.lock-ico-ring::after{bottom:-2.5px;left:50%;transform:translateX(-50%);}
.lock-ico-ring-inner{position:absolute;inset:-3px;border:1px dashed rgba(201,168,76,.35);border-radius:50%;animation:lockRingSpin 22s linear infinite reverse;}
@keyframes lockRingSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.lock-ico{
position:absolute;inset:0;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,rgba(40,30,15,.95),rgba(25,20,12,.95));
border:1.5px solid rgba(201,168,76,.4);
border-radius:18px;
color:#fbbf24;
box-shadow:0 14px 30px rgba(0,0,0,.6),inset 0 2px 0 rgba(255,255,255,.1),inset 0 0 25px rgba(201,168,76,.15);
}
.lock-ico svg{width:28px;height:28px;}
.lock-ico.is-wrong{animation:lockShake .4s ease-in-out;}
@keyframes lockShake{0%,100%{transform:translateX(0);}20%{transform:translateX(-8px);}40%{transform:translateX(8px);}60%{transform:translateX(-6px);}80%{transform:translateX(6px);}}
.lock-title{
font-family:'Outfit',sans-serif;
font-size:17px;font-weight:900;letter-spacing:-.4px;text-align:center;
background-image:linear-gradient(135deg,#f5f5f5,#fbbf24,#f5f5f5);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
animation:lockTitleShine 5s ease-in-out infinite;
margin-bottom:4px;
}
@keyframes lockTitleShine{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.lock-sub{text-align:center;font-size:11.5px;color:#C9A84C;font-weight:800;margin-bottom:3px;}
.lock-user{display:flex;align-items:center;justify-content:center;gap:5px;font-size:10.5px;color:var(--t3);font-weight:700;margin-bottom:12px;}
.lock-user-ico{opacity:.7;}
.lock-pin-dots{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:4px;padding:10px 0;}
.lock-pin-dot{
width:12px;height:12px;
background:rgba(255,255,255,.06);
border:1.5px solid rgba(255,255,255,.1);
border-radius:50%;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.lock-pin-dot.is-filled{background:linear-gradient(135deg,#fbbf24,#C9A84C);border-color:#C9A84C;box-shadow:0 0 12px rgba(251,191,36,.5);transform:scale(1.15);}
.lock-pin-dot.is-wrong{background:rgba(239,68,68,.6);border-color:#ef4444;box-shadow:0 0 12px rgba(239,68,68,.5);}
.lock-err{text-align:center;font-size:11px;color:#fca5a5;font-weight:800;min-height:16px;margin-bottom:10px;opacity:0;transition:opacity .3s;}
.lock-err.on{opacity:1;}
.lock-numpad{display:grid;grid-template-columns:repeat(3, 1fr);gap:7px;margin-bottom:12px;}
.lock-key{
height:46px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(155deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.08);
color:var(--t1);
border-radius:12px;
font-family:'Outfit',sans-serif;
font-size:19px;font-weight:700;
cursor:pointer;
transition:all .15s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
user-select:none;
position:relative;
overflow:hidden;
}
.lock-key::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center, rgba(201,168,76,.2), transparent 60%);opacity:0;transition:opacity .25s;pointer-events:none;}
.lock-key:hover{background:linear-gradient(155deg,rgba(201,168,76,.12),rgba(255,255,255,.04));border-color:rgba(201,168,76,.3);color:#fbbf24;transform:translateY(-1px);}
.lock-key:hover::before{opacity:1;}
.lock-key:active{transform:scale(.93);background:rgba(201,168,76,.2);border-color:rgba(201,168,76,.5);}
.lock-key-action{color:var(--t3);}
.lock-key-action:hover{color:#fbbf24;}
.lock-footer{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:var(--t4);font-weight:700;}
.lock-footer svg{color:#22c55e;}
/*
🆕🆕 SAUDI RIYAL SYMBOL — Official icon font from CDN
Uses 'Saudi Riyal Symbol' font (via unpkg.com)
Renders the official SAMA symbol crisply on every device
*/
.sar-icon{
font-family:'Saudi Riyal Symbol', 'Noto Sans Arabic', 'Cairo', sans-serif !important;
font-style:normal !important;
font-weight:normal !important;
font-variant:normal !important;
text-transform:none !important;
line-height:1 !important;
display:inline-block;
font-size:1.05em;
vertical-align:-0.1em;
margin:0 2px;
color:currentColor;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* The icon font's character: # (hash) becomes the SAR symbol */
.sar-icon::before{
content:"\23"; /* HTML \23 is # which the font maps to SAR symbol */
}
.sar-icon.lg{font-size:1.3em;vertical-align:-0.15em;}
.sar-icon.xl{font-size:1.6em;vertical-align:-0.2em;}
@media(max-width:420px){
.lock-time{font-size:42px;}
.lock-card{padding:16px 14px 14px;border-radius:20px;}
.lock-ico-wrap{width:58px;height:58px;}
.lock-ico svg{width:24px;height:24px;}
.lock-key{height:42px;font-size:17px;border-radius:10px;}
.lock-numpad{gap:6px;}
.lock-pin-dots{gap:10px;padding:8px 0;}
.lock-pin-dot{width:11px;height:11px;}
.lock-wrap{padding:10px 0 16px;}
}
@media(max-height:680px){
.lock-time{font-size:36px;margin-bottom:2px;}
.lock-date{margin-bottom:12px;font-size:11px;}
.lock-ico-wrap{width:54px;height:54px;margin-bottom:10px;}
.lock-ico svg{width:22px;height:22px;}
.lock-card{padding:14px 14px 12px;}
.lock-title{font-size:15px;margin-bottom:3px;}
.lock-user{margin-bottom:8px;}
.lock-pin-dots{padding:6px 0;}
.lock-key{height:38px;font-size:16px;}
.lock-numpad{gap:5px;margin-bottom:8px;}
}
/*
🆕🆕🆕 LOCK SETUP MODAL
*/
.lock-setup-modal{position:fixed;inset:0;z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;}
.lock-setup-modal.on{display:flex;animation:lockFadeIn .35s ease;}
.lock-setup-backdrop{position:absolute;inset:0;background:radial-gradient(ellipse at center, rgba(8,5,12,.7), rgba(0,0,0,.85));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
.lock-setup-card{
position:relative;width:100%;max-width:360px;
background:linear-gradient(165deg,rgba(15,12,22,.97),rgba(10,8,16,.99),rgba(15,12,22,.97));
border:1.5px solid rgba(201,168,76,.3);
border-radius:24px;
overflow:hidden;
backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
box-shadow:0 40px 100px rgba(0,0,0,.8),0 0 60px rgba(201,168,76,.15);
animation:lockRise .4s cubic-bezier(.34,1.56,.64,1);
}
.lock-setup-h{display:flex;align-items:center;gap:12px;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,.06);}
.lock-setup-ico{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#C9A84C,#9F7E1C);color:#1a1206;border-radius:12px;flex-shrink:0;box-shadow:0 8px 18px rgba(201,168,76,.35);}
.lock-setup-titles{flex:1;min-width:0;}
.lock-setup-title{font-family:'Outfit',sans-serif;font-size:14px;font-weight:900;color:var(--t1);letter-spacing:-.3px;margin-bottom:2px;}
.lock-setup-sub{font-size:10.5px;color:var(--t3);font-weight:700;}
.lock-setup-close{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:var(--t3);border-radius:10px;cursor:pointer;transition:all .25s;}
.lock-setup-close:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:#fca5a5;}
.lock-setup-body{padding:20px 22px 18px;}
.lock-setup-pin-dots{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px;padding:10px 0;}
.lock-setup-err{text-align:center;font-size:11px;color:#fca5a5;font-weight:800;min-height:16px;margin-bottom:12px;}
.lock-setup-err.is-success{color:#86efac;}
.lock-setup-numpad{display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;margin-bottom:12px;}
.lock-setup-numpad .lock-key{height:48px;font-size:19px;}
.lock-setup-remove{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:10px;background:rgba(239,68,68,.08);border:1px dashed rgba(239,68,68,.3);color:#fca5a5;border-radius:11px;font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:800;cursor:pointer;transition:all .25s;}
.lock-setup-remove:hover{background:rgba(239,68,68,.15);border-style:solid;}
/*
🆕🆕 LOCK SCREEN SETTINGS CARD (in Center Settings)
*/
.lock-settings-card{
position:relative;
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1.5px solid var(--bdr);
border-radius:18px;
margin:14px 0;
overflow:hidden;
box-shadow:0 12px 32px rgba(0,0,0,.25);
transition:all .3s;
}
.lock-settings-card.is-enabled{
border-color:rgba(201,168,76,.35);
box-shadow:0 12px 32px rgba(0,0,0,.25),0 0 30px rgba(201,168,76,.08);
}
.lock-settings-card::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:1px;
background:linear-gradient(90deg,transparent,rgba(201,168,76,.4),transparent);
}
.lock-settings-h{
display:flex;align-items:center;gap:12px;
padding:16px 18px 12px;
border-bottom:1px dashed rgba(255,255,255,.06);
flex-wrap:wrap;
}
.lock-settings-ico{
width:46px;height:46px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#C9A84C,#9F7E1C);
color:#1a1206;
border-radius:13px;
flex-shrink:0;
box-shadow:0 10px 22px rgba(201,168,76,.4),inset 0 1px 0 rgba(255,255,255,.25);
}
.lock-settings-titles{flex:1;min-width:160px;}
.lock-settings-title{
font-family:'Outfit',sans-serif;
font-size:15px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
margin-bottom:3px;
}
.lock-settings-sub{
font-size:11px;
color:var(--t3);
font-weight:700;
line-height:1.6;
}
.lock-settings-status{
display:inline-flex;align-items:center;gap:5px;
padding:5px 12px;
background:rgba(239,68,68,.1);
border:1px solid rgba(239,68,68,.3);
color:#fca5a5;
border-radius:18px;
font-family:'Cairo',sans-serif;
font-size:10.5px;
font-weight:900;
flex-shrink:0;
}
.lock-settings-status-dot{
width:6px;height:6px;
background:currentColor;
border-radius:50%;
box-shadow:0 0 6px currentColor;
}
.lock-settings-card.is-enabled .lock-settings-status{
background:rgba(34,197,94,.12);
border-color:rgba(74,222,128,.35);
color:#86efac;
}
.lock-settings-body{
padding:14px 18px 16px;
}
.lock-settings-features{
display:flex;flex-direction:column;
gap:8px;
margin-bottom:14px;
}
.lock-settings-feature{
display:flex;align-items:center;gap:9px;
font-size:11.5px;
color:var(--t2);
font-weight:700;
}
.lock-settings-feature-ico{
width:22px;height:22px;
display:flex;align-items:center;justify-content:center;
background:rgba(201,168,76,.12);
border:1px solid rgba(201,168,76,.25);
border-radius:7px;
font-size:12px;
flex-shrink:0;
}
.lock-settings-btn{
display:flex;align-items:center;justify-content:center;gap:7px;
width:100%;
padding:12px 18px;
background:linear-gradient(135deg,#C9A84C,#9F7E1C);
color:#1a1206;
border:none;
border-radius:12px;
font-family:'Cairo',sans-serif;
font-size:12.5px;
font-weight:900;
cursor:pointer;
transition:all .25s;
box-shadow:0 8px 20px rgba(201,168,76,.35),inset 0 1px 0 rgba(255,255,255,.25);
letter-spacing:-.1px;
}
.lock-settings-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(201,168,76,.5),inset 0 1px 0 rgba(255,255,255,.25);}
.lock-settings-btn:active{transform:scale(.97);}
/* Secondary button (idle timer) */
.lock-settings-btn-idle{
margin-top:8px;
background:rgba(201,168,76,.08);
color:#fbbf24;
border:1px solid rgba(201,168,76,.3);
box-shadow:none;
}
.lock-settings-btn-idle:hover{
background:rgba(201,168,76,.14);
border-color:rgba(201,168,76,.45);
box-shadow:0 6px 16px rgba(201,168,76,.18);
}
/* Idle options modal */
.idle-options{
display:flex;
flex-direction:column;
gap:7px;
}
.idle-opt{
display:flex;align-items:center;justify-content:space-between;
padding:12px 14px;
background:rgba(255,255,255,.04);
border:1.5px solid rgba(255,255,255,.06);
color:var(--t1);
border-radius:11px;
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:800;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
text-align:right;
}
.idle-opt:hover{
background:rgba(201,168,76,.08);
border-color:rgba(201,168,76,.3);
color:#fbbf24;
transform:translateX(-2px);
}
.idle-opt.is-on{
background:linear-gradient(155deg, rgba(201,168,76,.15), rgba(201,168,76,.05));
border-color:rgba(201,168,76,.5);
color:#fbbf24;
box-shadow:0 6px 16px rgba(201,168,76,.15);
}
.idle-opt-label{flex:1;}
.idle-opt svg{color:#fbbf24;flex-shrink:0;}
/* List container */
.notif-list{
flex:1;
overflow-y:auto;
padding:10px;
scrollbar-width:thin;
scrollbar-color:rgba(168,85,247,.3) transparent;
}
.notif-list::-webkit-scrollbar{width:5px;}
.notif-list::-webkit-scrollbar-track{background:transparent;}
.notif-list::-webkit-scrollbar-thumb{background:rgba(168,85,247,.3);border-radius:3px;}
/* Individual notification item */
.notif-item{
position:relative;
display:flex;align-items:flex-start;gap:11px;
padding:13px 13px 12px;
background:linear-gradient(155deg,rgba(0,0,0,.25),rgba(0,0,0,.15));
border:1px solid rgba(255,255,255,.05);
border-radius:13px;
margin-bottom:7px;
cursor:pointer;
transition:all .25s cubic-bezier(.16,1,.3,1);
overflow:hidden;
}
.notif-item:hover{
background:linear-gradient(155deg,rgba(168,85,247,.06),rgba(0,0,0,.2));
border-color:rgba(168,85,247,.2);
transform:translateX(-2px);
}
.notif-item.is-unread{
background:linear-gradient(155deg,rgba(168,85,247,.1),rgba(168,85,247,.02));
border-color:rgba(168,85,247,.3);
border-right:3px solid #a855f7;
}
.notif-item.is-unread::before{
content:'';
position:absolute;
top:13px;left:13px;
width:8px;height:8px;
background:#a855f7;
border-radius:50%;
box-shadow:0 0 10px #a855f7;
animation:unreadDot 1.8s ease-in-out infinite;
}
@keyframes unreadDot{0%,100%{opacity:1;}50%{opacity:.3;}}
/* Type-specific colors */
.notif-item-info{border-color:rgba(96,165,250,.25);}
.notif-item-info.is-unread{border-right-color:#3b82f6;background:linear-gradient(155deg,rgba(59,130,246,.08),rgba(0,0,0,.2));}
.notif-item-info.is-unread::before{background:#3b82f6;box-shadow:0 0 10px #3b82f6;}
.notif-item-success{border-color:rgba(74,222,128,.25);}
.notif-item-success.is-unread{border-right-color:#22c55e;background:linear-gradient(155deg,rgba(34,197,94,.08),rgba(0,0,0,.2));}
.notif-item-success.is-unread::before{background:#22c55e;box-shadow:0 0 10px #22c55e;}
.notif-item-warning{border-color:rgba(251,191,36,.3);}
.notif-item-warning.is-unread{border-right-color:#f59e0b;background:linear-gradient(155deg,rgba(245,158,11,.08),rgba(0,0,0,.2));}
.notif-item-warning.is-unread::before{background:#f59e0b;box-shadow:0 0 10px #f59e0b;}
.notif-item-urgent{border-color:rgba(248,113,113,.3);}
.notif-item-urgent.is-unread{border-right-color:#ef4444;background:linear-gradient(155deg,rgba(239,68,68,.08),rgba(0,0,0,.2));animation:urgentGlow 2.5s ease-in-out infinite;}
.notif-item-urgent.is-unread::before{background:#ef4444;box-shadow:0 0 12px #ef4444;}
@keyframes urgentGlow{
0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.15);}
50%{box-shadow:0 0 20px 0 rgba(239,68,68,.3);}
}
/* ═══════════════════════════════════════════════════════════════
🎫 TICKET NOTIFICATION · LUXURY rich card
Premium design — gold ribbon, customer card, services, total
═══════════════════════════════════════════════════════════════ */
.notif-item-ticket {
position: relative;
display: block;
padding: 0;
background: linear-gradient(155deg, rgba(34, 197, 94, 0.06), rgba(0, 0, 0, 0.15));
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: 16px;
overflow: hidden;
margin-bottom: 10px;
transition: all 0.3s cubic-bezier(.16,1,.3,1);
cursor: pointer;
isolation: isolate;
}
.notif-item-ticket:hover {
transform: translateX(-3px);
border-color: rgba(34, 197, 94, 0.4);
box-shadow: 0 10px 26px rgba(34, 197, 94, 0.15), 0 4px 10px rgba(0, 0, 0, 0.2);
}
.notif-item-ticket.is-unread {
background: linear-gradient(155deg, rgba(34, 197, 94, 0.12), rgba(201, 168, 76, 0.04));
border-color: rgba(34, 197, 94, 0.45);
box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15), 0 8px 20px rgba(34, 197, 94, 0.1);
animation: ntkPulse 3s ease-in-out infinite;
}
.notif-item-ticket.is-unread::before { display: none; }
@keyframes ntkPulse {
0%, 100% { box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.15), 0 8px 20px rgba(34, 197, 94, 0.1); }
50% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25), 0 12px 28px rgba(34, 197, 94, 0.18); }
}
/* Top gradient ribbon — green + gold */
.ntk-ribbon {
height: 4px;
background: linear-gradient(90deg,
rgba(34, 197, 94, 0.4),
#22c55e 25%,
#C9A84C 50%,
#22c55e 75%,
rgba(34, 197, 94, 0.4));
background-size: 200% 100%;
animation: ntkRibbonShine 4s ease-in-out infinite;
box-shadow: 0 0 18px rgba(34, 197, 94, 0.4);
}
@keyframes ntkRibbonShine {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Header: # + title + paid pill */
.ntk-head {
display: flex;
align-items: center;
gap: 11px;
padding: 14px 14px 10px;
}
.ntk-num {
display: inline-flex;
align-items: baseline;
gap: 1px;
padding: 8px 12px;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.18), rgba(34, 197, 94, 0.05));
border: 1px solid rgba(34, 197, 94, 0.35);
border-radius: 10px;
font-family: 'Outfit', 'Cairo', sans-serif;
font-weight: 900;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
flex-shrink: 0;
}
.ntk-num-hash {
font-size: 11px;
color: #22c55e;
opacity: 0.7;
}
.ntk-num-val {
font-size: 17px;
color: #4ade80;
letter-spacing: -0.4px;
}
.ntk-head-info { flex: 1; min-width: 0; }
.ntk-head-title {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Outfit', 'Cairo', sans-serif;
font-size: 13.5px;
font-weight: 900;
color: #f1f5f9;
letter-spacing: -0.2px;
margin-bottom: 3px;
}
.ntk-emoji {
display: inline-flex;
width: 22px; height: 22px;
align-items: center; justify-content: center;
border-radius: 7px;
background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(201, 168, 76, 0.15));
border: 1px solid rgba(34, 197, 94, 0.3);
font-size: 13px;
}
.ntk-head-time {
display: flex;
align-items: center;
gap: 4px;
font-size: 10.5px;
color: rgba(241, 245, 249, 0.55);
font-weight: 700;
}
.ntk-head-time svg { opacity: 0.7; }
.ntk-dot { color: rgba(241, 245, 249, 0.3); }
.ntk-paid-pill {
padding: 4px 10px;
border-radius: 100px;
font-family: 'Outfit', 'Cairo', sans-serif;
font-size: 9.5px;
font-weight: 900;
letter-spacing: 0.4px;
white-space: nowrap;
text-transform: uppercase;
flex-shrink: 0;
}
.ntk-paid {
background: linear-gradient(135deg, #22c55e, #15803d);
color: #fff;
box-shadow: 0 2px 8px rgba(34, 197, 94, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.ntk-unpaid {
background: linear-gradient(135deg, #f59e0b, #d97706);
color: #fff;
box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
/* Customer block */
.ntk-customer {
display: flex;
align-items: center;
gap: 11px;
margin: 0 14px 10px;
padding: 10px 12px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 11px;
}
.ntk-customer-avatar {
width: 34px;
height: 34px;
min-width: 34px;
border-radius: 50%;
background: linear-gradient(135deg, #C9A84C, #a78032);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-family: 'Outfit', 'Cairo', sans-serif;
font-size: 14px;
font-weight: 900;
box-shadow: 0 3px 10px rgba(201, 168, 76, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ntk-customer-info { flex: 1; min-width: 0; }
.ntk-customer-name {
font-family: 'Outfit', 'Cairo', sans-serif;
font-size: 13px;
font-weight: 900;
color: #f1f5f9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 1px;
}
.ntk-customer-phone {
font-size: 11.5px;
color: rgba(241, 245, 249, 0.55);
font-weight: 700;
font-family: 'Outfit', 'Cairo', sans-serif;
letter-spacing: 0.4px;
}
/* Car details */
.ntk-car {
display: flex;
flex-wrap: wrap;
gap: 7px;
padding: 0 14px;
margin-bottom: 10px;
}
.ntk-car-row {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 10px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 8px;
font-size: 11px;
color: rgba(241, 245, 249, 0.8);
font-weight: 700;
}
.ntk-car-ico { font-size: 12px; }
.ntk-plate {
font-family: 'Outfit', 'Cairo', sans-serif;
font-weight: 800;
letter-spacing: 1px;
color: #C9A84C;
}
/* Services */
.ntk-services {
margin: 0 14px 10px;
padding: 9px 12px;
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 11px;
}
.ntk-svc {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 4px 0;
font-size: 11.5px;
}
.ntk-svc:not(:last-child) {
border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
margin-bottom: 2px;
padding-bottom: 6px;
}
.ntk-svc-name {
color: rgba(241, 245, 249, 0.85);
font-weight: 700;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.ntk-svc-price {
font-family: 'Outfit', 'Cairo', sans-serif;
font-weight: 800;
color: #4ade80;
white-space: nowrap;
}
/* Footer: payment + total */
.ntk-foot {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 11px 14px;
background: linear-gradient(135deg, rgba(201, 168, 76, 0.06), rgba(0, 0, 0, 0.2));
border-top: 1px solid rgba(201, 168, 76, 0.18);
}
.ntk-pay {
font-size: 11px;
color: rgba(241, 245, 249, 0.7);
font-weight: 700;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ntk-total {
display: flex;
align-items: baseline;
gap: 6px;
flex-shrink: 0;
}
.ntk-total-lbl {
font-size: 10px;
color: rgba(241, 245, 249, 0.5);
font-weight: 800;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.ntk-total-val {
font-family: 'Outfit', 'Cairo', sans-serif;
font-size: 17px;
font-weight: 900;
color: #C9A84C;
letter-spacing: -0.5px;
text-shadow: 0 2px 8px rgba(201, 168, 76, 0.25);
}
/* Notes */
.ntk-notes {
display: flex;
align-items: flex-start;
gap: 6px;
margin: 0 14px 14px;
padding: 8px 11px;
background: rgba(96, 165, 250, 0.06);
border: 1px solid rgba(96, 165, 250, 0.2);
border-radius: 10px;
font-size: 10.5px;
color: rgba(241, 245, 249, 0.75);
font-weight: 600;
line-height: 1.5;
}
.ntk-notes svg { flex-shrink: 0; color: #60a5fa; margin-top: 1px; }
.notif-item-ico{
width:38px;height:38px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
font-size:17px;
color:#fff;
box-shadow:0 6px 14px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.15);
}
.notif-item-info .notif-item-ico{background:linear-gradient(135deg,#3b82f6,#1d4ed8);}
.notif-item-success .notif-item-ico{background:linear-gradient(135deg,#22c55e,#16a34a);}
.notif-item-warning .notif-item-ico{background:linear-gradient(135deg,#f59e0b,#d97706);}
.notif-item-urgent .notif-item-ico{background:linear-gradient(135deg,#ef4444,#dc2626);}
.notif-item-body{
flex:1;min-width:0;
}
.notif-item-title{
font-family:'Outfit',sans-serif;
font-size:13px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
margin-bottom:4px;
line-height:1.4;
}
.notif-item-text{
font-size:11.5px;
color:var(--t2);
font-weight:700;
line-height:1.7;
margin-bottom:6px;
word-break:break-word;
}
.notif-item-meta{
display:flex;align-items:center;gap:7px;
font-size:10px;
color:var(--t4);
font-weight:700;
}
.notif-item-time{
display:inline-flex;align-items:center;gap:3px;
}
.notif-item-from{
display:inline-flex;align-items:center;gap:3px;
padding:2px 7px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
color:#c084fc;
font-family:'Outfit',sans-serif;
font-weight:800;
}
/* Delete button on hover */
.notif-item-delete{
position:absolute;
top:10px;left:10px;
width:26px;height:26px;
display:flex;align-items:center;justify-content:center;
background:rgba(239,68,68,.1);
border:1px solid rgba(239,68,68,.2);
color:#f87171;
border-radius:8px;
cursor:pointer;
opacity:0;
transition:all .25s;
z-index:3;
}
.notif-item:hover .notif-item-delete{opacity:1;}
.notif-item-delete:hover{background:rgba(239,68,68,.2);}
/* Empty state */
.notif-empty{
padding:42px 20px;
text-align:center;
}
.notif-empty-ico{font-size:48px;opacity:.4;margin-bottom:12px;}
.notif-empty-t{font-size:13px;font-weight:800;color:var(--t2);margin-bottom:5px;}
.notif-empty-s{font-size:11px;color:var(--t3);font-weight:700;}
/* Mobile adjustments */
@media(max-width:600px){
.notif-panel{
top:64px;
left:8px;
width:calc(100vw - 16px);
max-height:calc(100vh - 80px);
}
/* Smaller bell/lock buttons on mobile to fit header */
.notif-bell, .lock-btn{
width:36px;height:36px;
border-radius:10px;
}
.notif-bell svg, .lock-btn svg{
width:16px;height:16px;
}
.notif-bell-badge{
min-width:16px;height:16px;
font-size:9px;
top:-3px;left:-3px;
border-width:1.5px;
}
}
@media(max-width:420px){
.notif-bell, .lock-btn{
width:32px;height:32px;
}
.notif-bell svg, .lock-btn svg{
width:14px;height:14px;
}
}
/* When money is hidden, blur all elements with .money-blur class */
body.money-hidden .money-blur{
filter:blur(8px);
user-select:none;
pointer-events:none;
transition:filter .3s ease;
}
body.money-hidden .money-blur:hover{
filter:blur(0);
pointer-events:auto;
}
/* Auto-wrapped money text nodes (most flexible — works inside any container) */
body.money-hidden .money-blur-text{
filter:blur(7px);
user-select:none;
display:inline-block;
transition:filter .3s ease;
}
body.money-hidden .money-blur-text:hover{
filter:blur(0);
}
/* ═══════════════════════════════════════════
🆕🆕 SYSTEM-WIDE MONEY BLUR (auto-applies via JS)
These rules also catch elements that the JS may add classes to
═══════════════════════════════════════════ */
/* Catch-all attribute selector for elements marked as money */
body.money-hidden [data-money],
body.money-hidden [data-money="1"]{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
body.money-hidden [data-money]:hover{
filter:blur(0);
}
/* Saudi Riyal icon — blur it too if standalone next to a number */
body.money-hidden .money-blur .sar-icon,
body.money-hidden .money-blur-text .sar-icon{
filter:none; /* parent already blurred */
}
/* ═══════════════════════════════════════════
TARGETED MONEY HIDING
Only blur the money values, not entire panes
═══════════════════════════════════════════ */
/* ── Ticket prices everywhere ── */
body.money-hidden .tkc-price,
body.money-hidden .tkc-price-amount,
body.money-hidden .tkc-price-orig,
body.money-hidden .tkc-price-currency,
body.money-hidden .tkc-refund-pricing,
body.money-hidden .tkc-rp-orig,
body.money-hidden .tkc-rp-refund,
body.money-hidden .tkc-rp-kept,
body.money-hidden .tkc-amount{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
body.money-hidden .tkc-price:hover,
body.money-hidden .tkc-price-amount:hover{
filter:blur(0);
}
/* ── Header stats ── */
body.money-hidden #dash-hdr-total,
body.money-hidden #lnch-rev,
body.money-hidden #lnch-unpaid,
body.money-hidden .dhp-stat-val,
body.money-hidden .lnch-stat .ls-v,
body.money-hidden #dash-sb-stats,
body.money-hidden #dash-db-stats{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
/* ── Archive specifics ── */
body.money-hidden .arch-day-rev-v,
body.money-hidden .arch-stat-v,
body.money-hidden .arch-tk-price,
body.money-hidden .da-day-rev{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
body.money-hidden .arch-day-rev-v:hover,
body.money-hidden .arch-stat-v:hover,
body.money-hidden .arch-tk-price:hover{
filter:blur(0);
}
/* ── Salary badges ── */
body.money-hidden .staff-salary-badge,
body.money-hidden .ssb-amt,
body.money-hidden #stf-payroll{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
body.money-hidden .staff-salary-badge:hover{
filter:blur(0);
}
/* ── KPI VALUES only (not full cards) ── */
body.money-hidden .kpi-value{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
body.money-hidden .kpi-value:hover{
filter:blur(0);
}
/* ── Income/Reports HERO numbers + sums only ── */
body.money-hidden .sum-value,
body.money-hidden .sum-amount,
body.money-hidden [data-money="1"]{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
body.money-hidden [data-money="1"]:hover{
filter:blur(0);
}
/* ── Expenses pane stats only ── */
body.money-hidden #exp-stats .kpi-value,
body.money-hidden .exp-row-amount,
body.money-hidden .exp-amount{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
/* ── Reception preview + reception counter ── */
body.money-hidden #r-vat-preview,
body.money-hidden #r-t-price,
body.money-hidden #r-split-preview,
body.money-hidden #rec-cnt,
body.money-hidden .rec-today-badge strong{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
/* ── Edit ticket VAT preview ── */
body.money-hidden #tke-vat-preview,
body.money-hidden #tke-price{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
/* ── Mobile day bar stats (text only, not whole bar) ── */
body.money-hidden .db-stats{
filter:blur(6px);
user-select:none;
transition:filter .3s ease;
}
/* ═══════════════════════════════════════════
🆕🆕 EXTENDED COVERAGE — Partners, Obligations, Treasury, Income, Reports
═══════════════════════════════════════════ */
/* 🆕🆕 FINANCE PANE — All money displays */
body.money-hidden .mfh-value,
body.money-hidden .mfh-unit,
body.money-hidden .mfh-pl-val,
body.money-hidden .mfb-balance,
body.money-hidden .mfb-balance-val,
body.money-hidden .mfb-row-val,
body.money-hidden .fin-kpi-val,
body.money-hidden .fin-calc-val,
body.money-hidden .fin-net-val,
body.money-hidden .fin-obl-amt,
body.money-hidden .fin-obl-amount,
body.money-hidden .fin-pay-val,
body.money-hidden .fin-prt-share-val,
body.money-hidden .fin-svc-amt,
body.money-hidden .obl-amt,
body.money-hidden .obl-group-amt,
body.money-hidden .tax-amount,
body.money-hidden .tax-impact-val,
body.money-hidden .tax-status-amt,
body.money-hidden .tax-status-val,
body.money-hidden .tax-toggle-amt-val,
body.money-hidden .tr-balance-v{
filter:blur(7px) !important;
user-select:none;
transition:filter .3s ease;
}
body.money-hidden .mfh-value:hover,
body.money-hidden .mfh-pl-val:hover,
body.money-hidden .mfb-balance:hover,
body.money-hidden .mfb-balance-val:hover,
body.money-hidden .mfb-row-val:hover,
body.money-hidden .fin-kpi-val:hover,
body.money-hidden .fin-calc-val:hover,
body.money-hidden .fin-net-val:hover,
body.money-hidden .fin-obl-amt:hover,
body.money-hidden .fin-pay-val:hover,
body.money-hidden .obl-amt:hover,
body.money-hidden .tax-amount:hover,
body.money-hidden .tax-status-val:hover{
filter:blur(0) !important;
}
/* Partners */
body.money-hidden .partner-share-v,
body.money-hidden .partner-amt,
body.money-hidden .partner-card-v,
body.money-hidden .partner-row-v,
body.money-hidden .partner-total{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
body.money-hidden .partner-share-v:hover,
body.money-hidden .partner-amt:hover{filter:blur(0);}
/* Obligations / debts */
body.money-hidden .oblig-amt,
body.money-hidden .oblig-card-v,
body.money-hidden .oblig-total-v,
body.money-hidden .oblig-row-amt{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
body.money-hidden .oblig-amt:hover{filter:blur(0);}
/* Treasury (cash/bank/safe) */
body.money-hidden .treasury-card-v,
body.money-hidden .treasury-stat-v,
body.money-hidden .treasury-amt,
body.money-hidden .treasury-balance,
body.money-hidden #treasury-cash,
body.money-hidden #treasury-bank,
body.money-hidden #treasury-emergency,
body.money-hidden .tr-balance-v{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
body.money-hidden .treasury-card-v:hover{filter:blur(0);}
/* Income (any inputs/displays) */
body.money-hidden .inc-row-amt,
body.money-hidden .inc-total-v,
body.money-hidden .inc-amount,
body.money-hidden .income-card-v{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
/* Reports & charts */
body.money-hidden .rep-stat-v,
body.money-hidden .rep-row-amt,
body.money-hidden .rep-total,
body.money-hidden .chart-tooltip,
body.money-hidden .chart-y-label{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
/* Salary history modal */
body.money-hidden .sal-history-item-amt,
body.money-hidden .staff-modal-pay-amt,
body.money-hidden .salary-amt{
filter:blur(7px);
user-select:none;
transition:filter .3s ease;
}
/* Generic catch: any element with class containing "-amount", "-amt", "-rev", "-price" */
body.money-hidden [class*="-amount"]:not(input):not(button),
body.money-hidden [class*="-amt"]:not(input):not(button),
body.money-hidden [class*="-rev"]:not(input):not(button),
body.money-hidden [class*="-price"]:not(input):not(button){
filter:blur(6px);
user-select:none;
transition:filter .3s ease;
}
body.money-hidden [class*="-amount"]:hover,
body.money-hidden [class*="-amt"]:hover{filter:blur(0);}
/* Role badge */
.role-badge-admin{background:rgba(201,168,76,.15);color:var(--g1);border:1px solid rgba(201,168,76,.25);}
.role-badge-rec{background:rgba(59,130,246,.12);color:var(--bl);border:1px solid rgba(59,130,246,.2);}
/* User info in header */
.hdr-user{display:flex;align-items:center;gap:6px;padding:4px 10px;background:var(--d4);border:1px solid var(--bdr);border-radius:20px;cursor:default;}
.hdr-user-name{font-size:11px;font-weight:700;color:var(--t2);}
.hdr-user-role{font-size:9px;color:var(--t3);}
/* Add staff modal fields */
.modal-divider{height:1px;background:var(--bdr);margin:14px 0;}
/* ══ LAUNCHER CLOUD WIDGET ══ */
.center-setup-card{background:linear-gradient(145deg,var(--d3),var(--d2));border:1px solid var(--bdr2);border-radius:var(--r20);padding:22px;box-shadow:var(--sh);}
.center-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px;}
@media(max-width:640px){.center-field-row{grid-template-columns:1fr;}}
/* Report CSS */
.rep-header-card{
background:linear-gradient(140deg,#0a0800,#161000);
border:1px solid rgba(201,168,76,.25);
border-radius:var(--r16);padding:20px 22px;
display:flex;align-items:center;justify-content:space-between;
margin-bottom:14px;
}
.rep-hdr-left .rhc-system{font-size:10px;color:rgba(201,168,76,.5);letter-spacing:.5px;margin-bottom:4px;}
.rep-hdr-left .rhc-center{font-family:var(--font);font-size:20px;font-weight:900;color:var(--g2);}
.rep-hdr-left .rhc-period{font-size:12px;color:var(--t3);margin-top:4px;}
.rep-hdr-right{text-align:left;}
.rep-hdr-right .rhc-date{font-size:11px;color:var(--t3);}
.rep-hdr-right .rhc-vat{font-size:10px;color:rgba(201,168,76,.5);margin-top:3px;}
/*════
FINANCE PANE — Comprehensive financial management
════*/
/* Hero */
.fin-hero{
position:relative;
background:linear-gradient(155deg,#0a0800 0%, #1a1206 50%, #2a1f00 100%);
border:1px solid var(--bdr);
border-radius:18px;
overflow:hidden;
margin-bottom:14px;
padding:22px 22px 20px;
}
.fin-hero-bg{
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 30%, rgba(34,197,94,.12), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(201,168,76,.1), transparent 50%);
pointer-events:none;
}
.fin-hero-content{
position:relative;
display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.fin-hero-ico{
width:54px;height:54px;
background:linear-gradient(135deg,#22C55E,#15803d);
color:#fff;
display:flex;align-items:center;justify-content:center;
border-radius:14px;
box-shadow:0 8px 22px rgba(34,197,94,.35), 0 0 0 1px rgba(255,255,255,.1) inset;
flex-shrink:0;
}
.fin-hero-text{flex:1;min-width:200px;}
.fin-hero-title{
font-family:var(--font);font-size:22px;font-weight:900;
color:#4ade80;
margin-bottom:4px;
text-shadow:0 2px 8px rgba(34,197,94,.25);
}
.fin-hero-sub{font-size:11.5px;color:var(--t3);}
.fin-hero-period{
display:flex;align-items:center;gap:8px;
background:rgba(0,0,0,.3);
border:1px solid var(--bdr);
border-radius:11px;
padding:8px 12px;
}
.fin-hero-period label{font-size:11px;color:var(--t3);font-weight:600;}
.fin-hero-period select{
background:transparent;border:none;color:var(--g2);
font-family:var(--font);font-size:12px;font-weight:800;
outline:none;cursor:pointer;
}
.fin-hero-period select option{background:var(--d3);color:var(--t1);}
/* Tabs */
.fin-tabs{
display:flex;gap:4px;
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
padding:5px;
margin-bottom:14px;
overflow-x:auto;
scrollbar-width:none;
}
.fin-tabs::-webkit-scrollbar{display:none;}
.fin-tab{
display:inline-flex;align-items:center;gap:7px;
padding:10px 14px;
background:transparent;border:none;
color:var(--t3);
font-family:var(--font);font-size:12px;font-weight:800;
border-radius:10px;
cursor:pointer;transition:all .2s;
white-space:nowrap;flex-shrink:0;
-webkit-tap-highlight-color:transparent;
}
.fin-tab:hover{color:var(--t1);background:rgba(255,255,255,.03);}
.fin-tab.on{
background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(34,197,94,.04));
color:#4ade80;
box-shadow:0 0 0 1px rgba(34,197,94,.25) inset;
}
/* Body sections */
.fin-body{display:flex;flex-direction:column;gap:14px;}
/* Summary cards (top KPIs) */
.fin-summary-grid{
display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
margin-bottom:14px;
}
@media(max-width:768px){.fin-summary-grid{grid-template-columns:repeat(2,1fr);}}
.fin-kpi{
background:linear-gradient(145deg,var(--d3),var(--d4));
border:1px solid var(--bdr);border-radius:12px;
padding:14px;position:relative;overflow:hidden;
}
.fin-kpi::before{
content:'';position:absolute;top:0;right:0;
width:3px;height:100%;
background:var(--fc,var(--g1));
box-shadow:0 0 12px var(--fc,var(--g1));
}
.fin-kpi-lbl{
display:flex;align-items:center;gap:6px;
font-size:10.5px;color:var(--t3);font-weight:700;
margin-bottom:6px;letter-spacing:.3px;
}
.fin-kpi-val{
font-family:var(--font);font-size:21px;font-weight:900;
color:var(--t1);line-height:1.1;
}
.fin-kpi-val .unit{font-size:11px;color:var(--t3);font-weight:700;margin-right:3px;}
.fin-kpi-sub{font-size:10px;color:var(--t4);margin-top:4px;}
/* Income breakdown card */
.fin-section{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:16px;
overflow:hidden;
}
.fin-section-h{
display:flex;align-items:center;gap:11px;
padding:14px 18px;
background:linear-gradient(90deg,rgba(15,11,0,.4),rgba(25,18,0,.15));
border-bottom:1px solid var(--bdr);
}
.fin-section-ico{
width:34px;height:34px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
color:#fff;flex-shrink:0;
box-shadow:0 4px 10px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.1) inset;
}
.fin-section-title{
font-family:var(--font);font-size:13.5px;font-weight:900;color:var(--t1);
}
.fin-section-sub{font-size:10.5px;color:var(--t3);margin-top:2px;}
.fin-section-body{padding:18px;}
/* Service revenue rows */
.fin-svc-row{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:10px 12px;
background:rgba(255,255,255,.02);
border:1px solid var(--bdr);
border-radius:10px;
margin-bottom:6px;
transition:all .2s;
}
.fin-svc-row:hover{border-color:var(--bdr2);background:rgba(255,255,255,.04);}
.fin-svc-info{display:flex;align-items:center;gap:9px;min-width:0;flex:1;}
.fin-svc-ico{
width:30px;height:30px;border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-size:14px;flex-shrink:0;
}
.fin-svc-name{font-size:12px;color:var(--t1);font-weight:700;}
.fin-svc-count{font-size:10px;color:var(--t3);}
.fin-svc-amt{
font-family:var(--font);font-size:14px;font-weight:900;color:var(--g2);
white-space:nowrap;
}
/* Payment method breakdown bars */
.fin-pay-bars{display:flex;flex-direction:column;gap:10px;}
.fin-pay-row{
display:grid;grid-template-columns:90px 1fr 110px;gap:12px;
align-items:center;
font-size:11.5px;
}
.fin-pay-lbl{font-weight:700;color:var(--t2);}
.fin-pay-track{
height:10px;background:rgba(255,255,255,.05);
border-radius:5px;overflow:hidden;position:relative;
}
.fin-pay-fill{
height:100%;
background:linear-gradient(90deg,var(--pc,var(--g1)),var(--pc-2,var(--g2)));
border-radius:5px;
transition:width .6s cubic-bezier(.34,1.56,.64,1);
}
.fin-pay-val{
font-family:var(--font);font-size:12px;font-weight:900;
color:var(--t1);text-align:left;
}
/* Obligations form */
.fin-obl-add{
background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(34,197,94,.01));
border:1px dashed rgba(34,197,94,.3);
border-radius:12px;
padding:14px;
margin-bottom:12px;
}
.fin-obl-add-grid{
display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;
align-items:end;
}
@media(max-width:680px){.fin-obl-add-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:420px){.fin-obl-add-grid{grid-template-columns:1fr;}}
.fin-obl-add input, .fin-obl-add select{
width:100%;padding:9px 11px;
background:var(--d4);border:1px solid var(--bdr);color:var(--t1);
border-radius:9px;font-size:12px;
font-family:'Cairo',sans-serif;outline:none;
}
.fin-obl-add input:focus, .fin-obl-add select:focus{
border-color:var(--g2);background:var(--d3);
}
.fin-obl-add label{
display:block;font-size:10px;color:var(--t3);
margin-bottom:4px;font-weight:700;
}
.fin-obl-add-btn{
display:inline-flex;align-items:center;gap:6px;
padding:9px 14px;
background:linear-gradient(135deg,#22C55E,#15803d);
color:#fff;border:none;border-radius:9px;
font-family:var(--font);font-size:12px;font-weight:800;
cursor:pointer;transition:all .2s;
-webkit-tap-highlight-color:transparent;
box-shadow:0 4px 12px rgba(34,197,94,.3);
white-space:nowrap;
}
.fin-obl-add-btn:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(34,197,94,.4);}
.fin-obl-add-btn:active{transform:scale(.96);}
/* Obligations list */
.fin-obl-list{display:flex;flex-direction:column;gap:8px;}
.fin-obl-item{
display:flex;align-items:center;gap:11px;
background:linear-gradient(135deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
border:1px solid var(--bdr);
border-radius:11px;
padding:11px 14px;
transition:all .2s;
}
.fin-obl-item:hover{border-color:var(--bdr2);}
.fin-obl-ico{
width:36px;height:36px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
font-size:16px;flex-shrink:0;
}
.fin-obl-main{flex:1;min-width:0;}
.fin-obl-name{
font-family:var(--font);font-size:13px;font-weight:800;color:var(--t1);
}
.fin-obl-meta{
font-size:10px;color:var(--t3);margin-top:2px;
display:flex;gap:8px;flex-wrap:wrap;
}
.fin-obl-amt{
font-family:var(--font);font-size:15px;font-weight:900;
color:var(--or);white-space:nowrap;
}
.fin-obl-del{
width:30px;height:30px;
background:rgba(239,68,68,.08);color:#f87171;
border:1px solid rgba(239,68,68,.2);
border-radius:8px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .2s;flex-shrink:0;
-webkit-tap-highlight-color:transparent;
}
.fin-obl-del:hover{
background:linear-gradient(135deg,#EF4444,#b91c1c);
color:#fff;border-color:transparent;
}
/* Partners */
.fin-prt-add{
background:linear-gradient(135deg,rgba(168,85,247,.06),rgba(168,85,247,.01));
border:1px dashed rgba(168,85,247,.3);
border-radius:12px;
padding:14px;
margin-bottom:12px;
}
.fin-prt-add input{
width:100%;padding:9px 11px;
background:var(--d4);border:1px solid var(--bdr);color:var(--t1);
border-radius:9px;font-size:12px;
font-family:'Cairo',sans-serif;outline:none;
}
.fin-prt-add-grid{
display:grid;grid-template-columns:2fr 1fr auto;gap:10px;align-items:end;
}
@media(max-width:520px){
.fin-prt-add-grid{grid-template-columns:1fr;}
}
.fin-prt-add-btn{
display:inline-flex;align-items:center;gap:6px;
padding:9px 14px;
background:linear-gradient(135deg,#a855f7,#7c3aed);
color:#fff;border:none;border-radius:9px;
font-family:var(--font);font-size:12px;font-weight:800;
cursor:pointer;transition:all .2s;
-webkit-tap-highlight-color:transparent;
box-shadow:0 4px 12px rgba(168,85,247,.3);
white-space:nowrap;
}
.fin-prt-add-btn:hover{transform:translateY(-1px);box-shadow:0 7px 16px rgba(168,85,247,.4);}
.fin-prt-add-btn:active{transform:scale(.96);}
.fin-prt-percentages{
background:rgba(168,85,247,.05);
border:1px solid rgba(168,85,247,.2);
border-radius:10px;
padding:11px 14px;
margin-bottom:14px;
display:flex;align-items:center;justify-content:space-between;
font-size:11.5px;
gap:10px;
flex-wrap:wrap;
}
.fin-prt-percentages .fpp-lbl{color:var(--t3);font-weight:700;}
.fin-prt-percentages .fpp-val{
font-family:var(--font);font-size:14px;font-weight:900;
}
.fin-prt-percentages.is-valid .fpp-val{color:#4ade80;}
.fin-prt-percentages.is-invalid .fpp-val{color:#f87171;}
/* Partner cards */
/*
🆕🆕🆕 LUXURY TAX SYSTEM (lux-tax-*) — Premium 3-mode UI
*/
/* HERO */
.lux-tax-hero{
position:relative;
background:linear-gradient(155deg,
rgba(201,168,76,.10) 0%,
rgba(245,158,11,.06) 50%,
rgba(201,168,76,.04) 100%);
border:1.5px solid rgba(251,191,36,.35);
border-radius:22px;
padding:20px 20px 16px;
margin-bottom:14px;
overflow:hidden;
box-shadow:
0 20px 50px rgba(0,0,0,.4),
0 0 0 1px rgba(255,255,255,.04) inset,
0 0 60px rgba(201,168,76,.08) inset;
}
.lux-tax-orb{
position:absolute;
border-radius:50%;
filter:blur(80px);
pointer-events:none;
animation:luxTaxOrbit 20s ease-in-out infinite;
}
.lux-tax-orb-1{
width:340px;height:340px;
background:radial-gradient(circle, rgba(251,191,36,.32), transparent 65%);
top:-130px;right:-100px;
}
.lux-tax-orb-2{
width:280px;height:280px;
background:radial-gradient(circle, rgba(201,168,76,.28), transparent 65%);
bottom:-110px;left:-80px;
animation-delay:-7s;
}
.lux-tax-orb-3{
width:200px;height:200px;
background:radial-gradient(circle, rgba(168,85,247,.18), transparent 65%);
top:40%;left:30%;
animation-delay:-13s;
}
@keyframes luxTaxOrbit{
0%,100%{transform:translate(0,0) scale(1); opacity:.8;}
33%{transform:translate(30px,-25px) scale(1.1); opacity:1;}
66%{transform:translate(-25px,20px) scale(.95); opacity:.85;}
}
.lux-tax-hero-top{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;
gap:10px;margin-bottom:18px;flex-wrap:wrap;
}
.lux-tax-hero-badge{
display:inline-flex;align-items:center;gap:7px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
padding:6px 14px;
border-radius:22px;
font-family:'Cairo',sans-serif;
font-size:11.5px;font-weight:900;
color:var(--t2);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.lux-tax-badge-dot{
width:7px;height:7px;
border-radius:50%;
background:var(--g2);
box-shadow:0 0 8px var(--g2);
animation:luxTaxPulse 1.8s ease-in-out infinite;
}
@keyframes luxTaxPulse{
0%,100%{opacity:1;transform:scale(1);}
50%{opacity:.5;transform:scale(.8);}
}
.lux-tax-hero-period{
font-family:var(--font);
font-size:12px;
font-weight:800;
color:var(--t3);
letter-spacing:.3px;
}
.lux-tax-hero-main{
position:relative;z-index:1;
display:flex;align-items:center;gap:14px;
padding:10px 0 18px;
}
.lux-tax-hero-ico-wrap{
position:relative;flex-shrink:0;
}
.lux-tax-hero-ico{
width:62px;height:62px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border-radius:18px;
font-size:28px;
box-shadow:
0 10px 28px rgba(201,168,76,.4),
inset 0 1px 0 rgba(255,255,255,.2);
position:relative;z-index:2;
}
.lux-tax-hero-ring{
position:absolute;
inset:-6px;
border-radius:24px;
border:2px solid rgba(201,168,76,.3);
animation:luxRingPulse 2.5s ease-in-out infinite;
}
@keyframes luxRingPulse{
0%,100%{transform:scale(1); opacity:.6;}
50%{transform:scale(1.08); opacity:.2;}
}
.lux-tax-hero-titles{flex:1;min-width:0;}
.lux-tax-hero-title{
font-family:var(--font);
font-size:20px;
font-weight:900;
letter-spacing:-.6px;
background-image:linear-gradient(135deg, #fff 0%, var(--g2) 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:luxShine 6s ease-in-out infinite;
margin-bottom:5px;
}
@keyframes luxShine{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.lux-tax-hero-sub{
font-size:11.5px;
color:var(--t3);
font-weight:700;
letter-spacing:.2px;
}
/* Impact grid */
.lux-impact-grid{
position:relative;z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
padding-top:14px;
border-top:1px dashed rgba(255,255,255,.1);
}
.lux-impact{
display:flex;align-items:center;gap:10px;
padding:12px 13px;
border-radius:14px;
border:1px solid;
background:rgba(0,0,0,.2);
transition:all .3s;
}
.lux-impact:hover{transform:translateY(-1px);}
.lux-impact-deduct{
border-color:rgba(248,113,113,.3);
background:linear-gradient(155deg, rgba(239,68,68,.08), rgba(0,0,0,.2));
}
.lux-impact-keep{
border-color:rgba(74,222,128,.3);
background:linear-gradient(155deg, rgba(34,197,94,.08), rgba(0,0,0,.2));
}
.lux-impact-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
font-size:17px;
flex-shrink:0;
}
.lux-impact-deduct .lux-impact-ico{background:rgba(248,113,113,.2); color:#f87171;}
.lux-impact-keep .lux-impact-ico{background:rgba(74,222,128,.2); color:#4ade80;}
.lux-impact-info{flex:1;min-width:0;}
.lux-impact-lbl{
font-size:10.5px;
color:var(--t3);
font-weight:800;
margin-bottom:3px;
letter-spacing:.2px;
}
.lux-impact-val{
font-family:var(--font);
font-size:15px;
font-weight:900;
letter-spacing:-.4px;
line-height:1;
}
.lux-impact-deduct .lux-impact-val{color:#f87171;}
.lux-impact-keep .lux-impact-val{color:#4ade80;}
.lux-impact-val span{font-size:10px;opacity:.7;margin-right:3px;font-weight:700;}
/* Source cards */
.lux-tax-card{
position:relative;
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid var(--bdr);
border-radius:20px;
padding:16px 16px 14px;
margin-bottom:13px;
overflow:hidden;
box-shadow:0 12px 32px rgba(0,0,0,.35);
transition:all .3s cubic-bezier(.16,1,.3,1);
}
.lux-tax-card:hover{
transform:translateY(-2px);
box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.lux-tax-card-glow{
position:absolute;
inset:0;
pointer-events:none;
opacity:.7;
}
.lux-tax-h{
position:relative;z-index:1;
display:flex;align-items:flex-start;gap:12px;
margin-bottom:14px;
}
.lux-tax-ico-wrap{flex-shrink:0;}
.lux-tax-ico{
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
border-radius:14px;
font-size:22px;
color:#fff;
box-shadow:
0 8px 20px rgba(0,0,0,.3),
inset 0 1px 0 rgba(255,255,255,.15);
}
.lux-tax-info{flex:1;min-width:0;padding-top:2px;}
.lux-tax-title{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
margin-bottom:3px;
}
.lux-tax-sub{
font-size:10.5px;
color:var(--t3);
line-height:1.6;
font-weight:700;
}
.lux-tax-amount-wrap{
text-align:left;
flex-shrink:0;
display:flex;flex-direction:column;
align-items:flex-end;gap:6px;
}
.lux-tax-amount{
font-family:var(--font);
font-size:20px;
font-weight:900;
letter-spacing:-.5px;
line-height:1;
}
.lux-tax-amount span{
font-size:11px;
opacity:.6;
margin-right:3px;
font-weight:700;
}
.lux-tax-state-pill{
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;
border-radius:14px;
font-family:'Cairo',sans-serif;
font-size:10px;
font-weight:900;
white-space:nowrap;
letter-spacing:-.1px;
}
/* 3-mode selector */
.lux-tax-modes{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:7px;
position:relative;z-index:1;
padding-top:10px;
border-top:1px dashed rgba(255,255,255,.08);
}
.lux-mode{
position:relative;
display:flex;flex-direction:column;
align-items:center;justify-content:center;
gap:6px;
padding:14px 9px;
background:rgba(255,255,255,.02);
border:1.5px solid rgba(255,255,255,.05);
border-radius:14px;
cursor:pointer;
font-family:'Cairo',sans-serif;
color:var(--t3);
transition:all .3s cubic-bezier(.16,1,.3,1);
-webkit-tap-highlight-color:transparent;
text-align:center;
min-height:90px;
overflow:hidden;
}
.lux-mode:disabled{cursor:not-allowed;opacity:.5;}
.lux-mode:not(:disabled):hover{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.1);
transform:translateY(-2px);
}
.lux-mode:not(:disabled):active{transform:scale(.96);}
.lux-mode-glow{
position:absolute;
inset:0;
opacity:0;
pointer-events:none;
transition:opacity .35s;
}
.lux-mode.is-on .lux-mode-glow{opacity:1;}
.lux-mode-ico{
font-size:22px;
line-height:1;
font-weight:900;
position:relative;z-index:1;
}
.lux-mode-text{
display:flex;flex-direction:column;
gap:2px;
text-align:center;
position:relative;z-index:1;
}
.lux-mode-name{
font-family:var(--font);
font-size:13px;
font-weight:900;
letter-spacing:-.2px;
line-height:1.1;
}
.lux-mode-desc{
font-size:9.5px;
opacity:.7;
font-weight:700;
line-height:1.4;
}
.lux-mode-tick{
position:absolute;
top:7px;right:7px;
width:20px;height:20px;
border-radius:50%;
background:currentColor;
color:#0a0a0a !important;
display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:900;
box-shadow:0 4px 10px rgba(0,0,0,.3);
z-index:2;
}
/* Active states with full luxe gradients */
.lux-mode-pay.is-on{
background:linear-gradient(155deg, rgba(34,197,94,.22), rgba(34,197,94,.05));
border-color:rgba(74,222,128,.6);
color:#4ade80;
box-shadow:
0 8px 24px rgba(34,197,94,.3),
inset 0 1px 0 rgba(255,255,255,.06);
}
.lux-mode-pay.is-on .lux-mode-glow{
background:radial-gradient(circle at center, rgba(74,222,128,.15), transparent 70%);
}
.lux-mode-defer.is-on{
background:linear-gradient(155deg, rgba(245,158,11,.22), rgba(245,158,11,.05));
border-color:rgba(251,191,36,.6);
color:#fbbf24;
box-shadow:
0 8px 24px rgba(245,158,11,.3),
inset 0 1px 0 rgba(255,255,255,.06);
}
.lux-mode-defer.is-on .lux-mode-glow{
background:radial-gradient(circle at center, rgba(251,191,36,.15), transparent 70%);
}
.lux-mode-cancel.is-on{
background:linear-gradient(155deg, rgba(148,163,184,.22), rgba(148,163,184,.05));
border-color:rgba(148,163,184,.6);
color:#cbd5e1;
box-shadow:
0 8px 24px rgba(148,163,184,.22),
inset 0 1px 0 rgba(255,255,255,.06);
}
.lux-mode-cancel.is-on .lux-mode-glow{
background:radial-gradient(circle at center, rgba(148,163,184,.12), transparent 70%);
}
/* 🆕🆕 SMART POS AUTO BANNER */
.lux-pos-auto-banner{
position:relative;z-index:1;
display:flex;align-items:flex-start;gap:12px;
padding:13px 14px;
background:linear-gradient(155deg, rgba(168,85,247,.14), rgba(168,85,247,.04));
border:1.5px solid rgba(192,132,252,.4);
border-radius:13px;
margin-bottom:13px;
overflow:hidden;
}
.lux-pos-auto-banner::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg, transparent, rgba(192,132,252,.08), transparent);
animation:luxPosAutoShine 3s ease-in-out infinite;
pointer-events:none;
}
@keyframes luxPosAutoShine{
0%,100%{transform:translateX(-100%);}
50%{transform:translateX(100%);}
}
.lux-pos-auto-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #a855f7, #7c3aed);
color:#fff;
border-radius:11px;
font-size:18px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(168,85,247,.4);
position:relative;z-index:1;
}
.lux-pos-auto-body{flex:1;min-width:0;position:relative;z-index:1;}
.lux-pos-auto-title{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:#c084fc;
letter-spacing:-.2px;
margin-bottom:5px;
}
.lux-pos-auto-desc{
font-size:11px;
color:var(--t2);
line-height:1.8;
font-weight:700;
}
.lux-pos-auto-desc strong{
font-family:var(--font);
color:#c084fc;
}
/* POS rates */
.lux-pos-rates{
margin-top:14px;
padding:12px 14px;
background:linear-gradient(155deg, rgba(168,85,247,.08), rgba(168,85,247,.02));
border:1px solid rgba(192,132,252,.22);
border-radius:14px;
position:relative;z-index:1;
}
.lux-pos-rates-title{
font-family:var(--font);
font-size:11.5px;
font-weight:900;
color:#c084fc;
margin-bottom:9px;
letter-spacing:-.2px;
}
.lux-pos-rates-list{
display:flex;flex-wrap:wrap;gap:7px;
}
.lux-pos-rate{
display:inline-flex;align-items:center;gap:7px;
padding:6px 12px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
font-size:11px;
}
.lux-pos-rate-name{
font-family:'Cairo',sans-serif;
font-weight:800;
color:var(--t2);
}
.lux-pos-rate-val{
font-family:var(--font);
font-weight:900;
color:#c084fc;
}
/* 🆕🆕 POS EDITOR — Luxurious rate configuration per bank method */
.lux-pos-editor{
position:relative;z-index:1;
margin-top:14px;
padding:14px 14px 12px;
background:linear-gradient(155deg, rgba(168,85,247,.08), rgba(168,85,247,.02));
border:1.5px solid rgba(192,132,252,.3);
border-radius:16px;
overflow:hidden;
}
.lux-pos-editor-h{
display:flex;flex-direction:column;
gap:3px;
margin-bottom:12px;
padding-bottom:10px;
border-bottom:1px dashed rgba(192,132,252,.2);
}
.lux-pos-editor-title{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:#c084fc;
letter-spacing:-.3px;
}
.lux-pos-editor-sub{
font-size:10.5px;
color:var(--t3);
font-weight:700;
line-height:1.6;
}
.lux-pos-bank-row{
margin-bottom:14px;
}
.lux-pos-label{
display:block;
font-family:'Cairo',sans-serif;
font-size:11px;
font-weight:900;
color:var(--t2);
margin-bottom:6px;
letter-spacing:-.1px;
}
.lux-pos-input{
width:100%;
padding:11px 14px;
background:rgba(0,0,0,.3);
border:1.5px solid rgba(192,132,252,.2);
border-radius:11px;
color:var(--t1);
font-family:'Cairo',sans-serif;
font-size:12.5px;
font-weight:700;
outline:none;
transition:all .25s;
}
.lux-pos-input:focus{
border-color:rgba(192,132,252,.55);
background:rgba(0,0,0,.4);
box-shadow:0 0 0 3px rgba(168,85,247,.12);
}
.lux-pos-input:disabled{
opacity:.5;
cursor:not-allowed;
}
.lux-pos-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
gap:9px;
margin-bottom:13px;
}
.lux-pos-card{
position:relative;
background:linear-gradient(155deg, rgba(168,85,247,.08), rgba(0,0,0,.25));
border:1.5px solid rgba(192,132,252,.22);
border-radius:13px;
padding:11px 12px;
transition:all .3s cubic-bezier(.16,1,.3,1);
overflow:hidden;
}
.lux-pos-card:hover{
border-color:rgba(192,132,252,.45);
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(168,85,247,.18);
}
.lux-pos-card:focus-within{
border-color:rgba(192,132,252,.6);
box-shadow:0 0 0 3px rgba(168,85,247,.15);
}
.lux-pos-card-h{
display:flex;align-items:center;justify-content:space-between;
gap:8px;
margin-bottom:9px;
}
.lux-pos-card-name{
display:flex;align-items:center;gap:6px;
font-family:var(--font);
font-size:12.5px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
min-width:0;
}
.lux-pos-card-dot{
width:6px;height:6px;
border-radius:50%;
background:#c084fc;
box-shadow:0 0 6px #c084fc;
flex-shrink:0;
}
.lux-pos-card-known{
display:inline-flex;align-items:center;
padding:1.5px 6px;
background:rgba(192,132,252,.15);
color:#c084fc;
border:1px solid rgba(192,132,252,.3);
border-radius:8px;
font-family:'Cairo',sans-serif;
font-size:8.5px;
font-weight:900;
letter-spacing:-.1px;
}
.lux-pos-card-current{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:#c084fc;
letter-spacing:-.3px;
white-space:nowrap;
}
.lux-pos-card-input-wrap{
position:relative;
display:flex;align-items:center;
margin-bottom:7px;
}
.lux-pos-card-input{
width:100%;
padding:10px 28px 10px 13px;
background:rgba(0,0,0,.4);
border:1.5px solid rgba(192,132,252,.2);
border-radius:10px;
color:#c084fc;
font-family:var(--font);
font-size:14px;
font-weight:900;
text-align:center;
outline:none;
transition:all .25s;
letter-spacing:-.3px;
}
.lux-pos-card-input:focus{
border-color:rgba(192,132,252,.6);
background:rgba(0,0,0,.55);
box-shadow:0 0 0 3px rgba(168,85,247,.15);
}
.lux-pos-card-input:disabled{
opacity:.5;
cursor:not-allowed;
}
.lux-pos-card-input::-webkit-outer-spin-button,
.lux-pos-card-input::-webkit-inner-spin-button{
-webkit-appearance:none;
margin:0;
}
.lux-pos-card-input[type=number]{-moz-appearance:textfield;}
.lux-pos-card-unit{
position:absolute;
right:10px;
pointer-events:none;
font-family:var(--font);
font-size:12px;
font-weight:800;
color:rgba(192,132,252,.5);
}
.lux-pos-card-eg{
font-size:10px;
color:var(--t4);
text-align:center;
font-weight:700;
line-height:1.5;
}
.lux-pos-card-eg strong{
font-family:var(--font);
font-weight:900;
}
.lux-pos-empty{
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:10px;
padding:24px 16px;
background:rgba(0,0,0,.15);
border:1.5px dashed rgba(192,132,252,.25);
border-radius:13px;
margin-bottom:6px;
}
.lux-pos-empty-ico{
font-size:32px;
opacity:.55;
}
.lux-pos-empty-text{
font-size:12px;
color:var(--t3);
font-weight:700;
text-align:center;
line-height:1.8;
}
.lux-pos-save-row{
display:flex;flex-direction:column;
align-items:center;
gap:6px;
padding-top:10px;
border-top:1px dashed rgba(192,132,252,.18);
}
.lux-pos-save-btn{
display:flex;align-items:center;justify-content:center;gap:8px;
width:100%;
padding:13px 18px;
background:linear-gradient(135deg, #a855f7, #7c3aed);
color:#fff;
border:none;
border-radius:12px;
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:900;
cursor:pointer;
transition:all .25s;
box-shadow:
0 10px 24px rgba(168,85,247,.4),
inset 0 1px 0 rgba(255,255,255,.15);
letter-spacing:-.2px;
}
.lux-pos-save-btn:hover:not(:disabled){
transform:translateY(-2px);
box-shadow:
0 14px 32px rgba(168,85,247,.55),
inset 0 1px 0 rgba(255,255,255,.15);
}
.lux-pos-save-btn:active{transform:scale(.97);}
.lux-pos-save-btn:disabled{cursor:wait;}
.lux-pos-save-hint{
font-size:10px;
color:var(--t4);
font-weight:700;
}
@media(max-width:560px){
.lux-pos-grid{grid-template-columns:1fr;}
}
/* Info section */
.lux-tax-info{
display:flex;align-items:flex-start;gap:12px;
padding:14px 16px;
background:linear-gradient(155deg, rgba(96,165,250,.07), rgba(96,165,250,.02));
border:1px solid rgba(96,165,250,.22);
border-radius:16px;
margin-top:13px;
}
.lux-tax-info-ico{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
background:rgba(96,165,250,.15);
border:1px solid rgba(96,165,250,.3);
border-radius:11px;
font-size:18px;
flex-shrink:0;
}
.lux-tax-info-body{flex:1;min-width:0;}
.lux-tax-info-title{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:#93c5fd;
margin-bottom:9px;
letter-spacing:-.2px;
}
.lux-tax-info-rows{
display:flex;flex-direction:column;
gap:7px;
}
.lux-tax-info-row{
display:flex;align-items:flex-start;gap:9px;
font-size:11px;
color:var(--t2);
line-height:1.7;
font-weight:700;
}
.lux-tax-info-tag{
display:inline-flex;align-items:center;
padding:3px 10px;
border-radius:11px;
font-family:var(--font);
font-size:10.5px;
font-weight:900;
white-space:nowrap;
flex-shrink:0;
letter-spacing:-.1px;
}
@media(max-width:560px){
.lux-tax-hero{padding:16px 14px 14px;}
.lux-tax-hero-title{font-size:17px;}
.lux-tax-hero-ico{width:54px;height:54px;font-size:24px;}
.lux-impact-grid{grid-template-columns:1fr;}
.lux-tax-amount{font-size:17px;}
.lux-tax-h{flex-wrap:wrap;}
.lux-tax-amount-wrap{width:100%;flex-direction:row;align-items:center;justify-content:space-between;}
.lux-tax-modes{grid-template-columns:1fr;gap:5px;}
.lux-mode{flex-direction:row;justify-content:flex-start;min-height:auto;padding:11px 13px;text-align:right;}
.lux-mode-text{flex-direction:row;align-items:center;gap:8px;text-align:right;}
.lux-mode-desc{font-size:10px;}
}
/*
🚨 NO PAYMENT METHODS MODAL — Block ticket issue if missing
*/
.no-paym-modal{
position:fixed;
inset:0;
z-index:99999;
display:flex;align-items:center;justify-content:center;
opacity:0;
pointer-events:none;
transition:opacity .35s cubic-bezier(.16,1,.3,1);
padding:20px;
}
.no-paym-modal.on{
opacity:1;
pointer-events:auto;
}
.no-paym-backdrop{
position:absolute;
inset:0;
background:rgba(0,0,0,.75);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.no-paym-card{
position:relative;
width:100%;
max-width:440px;
background:linear-gradient(155deg, var(--d2), var(--d3));
border:1.5px solid rgba(251,191,36,.45);
border-radius:24px;
padding:24px 22px 20px;
overflow:hidden;
box-shadow:
0 30px 80px rgba(0,0,0,.6),
0 0 0 1px rgba(255,255,255,.05) inset,
0 0 80px rgba(245,158,11,.15);
transform:scale(.9) translateY(20px);
transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
.no-paym-modal.on .no-paym-card{
transform:scale(1) translateY(0);
}
.no-paym-orb{
position:absolute;
border-radius:50%;
filter:blur(70px);
pointer-events:none;
animation:noPaymOrbit 18s ease-in-out infinite;
}
.no-paym-orb-1{
width:280px;height:280px;
background:radial-gradient(circle, rgba(251,191,36,.3), transparent 65%);
top:-100px;right:-80px;
}
.no-paym-orb-2{
width:220px;height:220px;
background:radial-gradient(circle, rgba(201,168,76,.25), transparent 65%);
bottom:-90px;left:-60px;
animation-delay:-8s;
}
@keyframes noPaymOrbit{
0%,100%{transform:translate(0,0) scale(1); opacity:.8;}
50%{transform:translate(-25px,20px) scale(1.1); opacity:1;}
}
.no-paym-ico-wrap{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:center;
margin:6px auto 16px;
width:fit-content;
}
.no-paym-ico{
position:relative;z-index:2;
width:74px;height:74px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #F59E0B, #d97706);
color:#fff;
border-radius:22px;
font-size:36px;
box-shadow:
0 14px 36px rgba(245,158,11,.5),
inset 0 2px 0 rgba(255,255,255,.2);
}
.no-paym-ico-ring{
position:absolute;
inset:-8px;
border-radius:30px;
border:2.5px solid rgba(251,191,36,.35);
animation:noPaymRing 2.5s ease-in-out infinite;
}
@keyframes noPaymRing{
0%,100%{transform:scale(1); opacity:.6;}
50%{transform:scale(1.1); opacity:.15;}
}
.no-paym-title{
position:relative;z-index:1;
text-align:center;
font-family:var(--font);
font-size:21px;
font-weight:900;
letter-spacing:-.6px;
background-image:linear-gradient(135deg, #fff 0%, #fbbf24 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:luxShine 5s ease-in-out infinite;
margin-bottom:8px;
}
.no-paym-sub{
position:relative;z-index:1;
text-align:center;
font-size:12.5px;
color:var(--t2);
line-height:1.7;
font-weight:700;
margin-bottom:18px;
padding:0 6px;
}
.no-paym-steps{
position:relative;z-index:1;
display:flex;flex-direction:column;
gap:8px;
padding:14px 14px;
background:rgba(0,0,0,.3);
border:1px solid var(--bdr);
border-radius:14px;
margin-bottom:18px;
}
.no-paym-step{
display:flex;align-items:center;gap:10px;
font-family:'Cairo',sans-serif;
font-size:12px;
color:var(--t2);
font-weight:700;
line-height:1.5;
}
.no-paym-step strong{
color:#fbbf24;
font-family:var(--font);
}
.no-paym-step-num{
flex-shrink:0;
width:24px;height:24px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border-radius:50%;
font-family:var(--font);
font-size:11px;
font-weight:900;
box-shadow:0 3px 10px rgba(201,168,76,.4);
}
.no-paym-actions{
position:relative;z-index:1;
display:flex;align-items:center;gap:10px;
}
.no-paym-btn-secondary{
flex:1;
padding:12px 16px;
background:rgba(255,255,255,.03);
border:1px solid var(--bdr);
color:var(--t3);
border-radius:13px;
font-family:'Cairo',sans-serif;
font-size:12px;
font-weight:800;
cursor:pointer;
transition:all .25s;
}
.no-paym-btn-secondary:hover{
background:rgba(255,255,255,.06);
color:var(--t1);
}
.no-paym-btn-primary{
flex:2;
display:flex;align-items:center;justify-content:center;gap:7px;
padding:13px 18px;
background:linear-gradient(135deg, #F59E0B, #d97706);
color:#fff;
border:none;
border-radius:13px;
font-family:'Cairo',sans-serif;
font-size:12.5px;
font-weight:900;
cursor:pointer;
transition:all .25s;
box-shadow:
0 10px 24px rgba(245,158,11,.4),
inset 0 1px 0 rgba(255,255,255,.15);
letter-spacing:-.2px;
}
.no-paym-btn-primary:hover{
transform:translateY(-2px);
box-shadow:
0 14px 32px rgba(245,158,11,.55),
inset 0 1px 0 rgba(255,255,255,.15);
}
.no-paym-btn-primary:active{transform:scale(.97);}
@media(max-width:560px){
.no-paym-card{padding:20px 18px 16px;}
.no-paym-ico{width:64px;height:64px;font-size:30px;}
.no-paym-title{font-size:18px;}
.no-paym-sub{font-size:12px;}
.no-paym-step{font-size:11.5px;}
}
/*
💳 PAYMENT METHODS TAB (paym-*) — Luxurious management UI
*/
/* Empty banner — shown when no methods configured */
.paym-empty-banner{
position:relative;
display:flex;align-items:flex-start;gap:13px;
background:linear-gradient(155deg, rgba(245,158,11,.14), rgba(245,158,11,.04));
border:1.5px solid rgba(251,191,36,.45);
border-radius:16px;
padding:14px 16px;
margin-bottom:13px;
overflow:hidden;
box-shadow:0 10px 28px rgba(245,158,11,.2);
animation:paymEmptyPulse 2s ease-in-out infinite;
}
@keyframes paymEmptyPulse{
0%,100%{box-shadow:0 10px 28px rgba(245,158,11,.2), 0 0 0 0 rgba(251,191,36,.3);}
50%{box-shadow:0 10px 28px rgba(245,158,11,.25), 0 0 0 4px rgba(251,191,36,.08);}
}
.paym-empty-banner-orb{
position:absolute;
width:200px;height:200px;
border-radius:50%;
background:radial-gradient(circle, rgba(251,191,36,.25), transparent 65%);
filter:blur(50px);
top:-80px;right:-50px;
pointer-events:none;
}
.paym-empty-banner-ico{
position:relative;z-index:1;
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #F59E0B, #d97706);
color:#fff;
border-radius:12px;
font-size:20px;
flex-shrink:0;
box-shadow:0 8px 20px rgba(245,158,11,.4);
}
.paym-empty-banner-body{
position:relative;z-index:1;
flex:1;min-width:0;
}
.paym-empty-banner-title{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:#fbbf24;
letter-spacing:-.3px;
margin-bottom:4px;
}
.paym-empty-banner-sub{
font-size:11.5px;
color:var(--t2);
font-weight:700;
line-height:1.7;
}
/* HERO */
.paym-hero{
position:relative;
background:linear-gradient(155deg,
rgba(168,85,247,.10) 0%,
rgba(96,165,250,.06) 50%,
rgba(74,222,128,.04) 100%);
border:1.5px solid rgba(192,132,252,.35);
border-radius:22px;
padding:20px 20px 16px;
margin-bottom:14px;
overflow:hidden;
box-shadow:
0 20px 50px rgba(0,0,0,.4),
0 0 0 1px rgba(255,255,255,.04) inset;
}
.paym-hero-orb{
position:absolute;
border-radius:50%;
filter:blur(80px);
pointer-events:none;
animation:paymOrbit 18s ease-in-out infinite;
}
.paym-orb-1{
width:300px;height:300px;
background:radial-gradient(circle, rgba(168,85,247,.3), transparent 65%);
top:-110px;right:-90px;
}
.paym-orb-2{
width:240px;height:240px;
background:radial-gradient(circle, rgba(96,165,250,.25), transparent 65%);
bottom:-90px;left:-60px;
animation-delay:-8s;
}
@keyframes paymOrbit{
0%,100%{transform:translate(0,0) scale(1);opacity:.8;}
50%{transform:translate(-25px,20px) scale(1.08);opacity:1;}
}
.paym-hero-top{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;
gap:10px;flex-wrap:wrap;
margin-bottom:16px;
}
.paym-hero-badge{
display:inline-flex;align-items:center;gap:7px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
padding:6px 14px;
border-radius:22px;
font-family:'Cairo',sans-serif;
font-size:11.5px;font-weight:900;
color:var(--t2);
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
.paym-hero-dot{
width:7px;height:7px;
border-radius:50%;
background:#c084fc;
box-shadow:0 0 8px #c084fc;
animation:luxTaxPulse 1.8s ease-in-out infinite;
}
.paym-hero-period{
font-family:var(--font);
font-size:12px;
font-weight:800;
color:var(--t3);
}
.paym-hero-main{
position:relative;z-index:1;
display:flex;align-items:center;gap:14px;
padding:8px 0 18px;
}
.paym-hero-ico{
width:58px;height:58px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #a855f7, #7c3aed);
border-radius:17px;
font-size:26px;
box-shadow:
0 10px 28px rgba(168,85,247,.4),
inset 0 1px 0 rgba(255,255,255,.2);
flex-shrink:0;
}
.paym-hero-titles{flex:1;min-width:0;}
.paym-hero-title{
font-family:var(--font);
font-size:19px;
font-weight:900;
letter-spacing:-.5px;
background-image:linear-gradient(135deg, #fff 0%, #c084fc 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:luxShine 6s ease-in-out infinite;
margin-bottom:5px;
}
.paym-hero-sub{
font-size:11px;
color:var(--t3);
font-weight:700;
line-height:1.7;
}
/* Distribution bars */
.paym-dist{
position:relative;z-index:1;
display:flex;flex-direction:column;
gap:10px;
padding-top:14px;
border-top:1px dashed rgba(255,255,255,.1);
}
.paym-dist-row{
padding:10px 12px;
background:rgba(0,0,0,.22);
border:1px solid var(--bdr);
border-radius:12px;
}
.paym-dist-cash{
border-color:rgba(74,222,128,.25);
background:linear-gradient(155deg, rgba(34,197,94,.05), rgba(0,0,0,.22));
}
.paym-dist-bank{
border-color:rgba(96,165,250,.25);
background:linear-gradient(155deg, rgba(59,130,246,.05), rgba(0,0,0,.22));
}
.paym-dist-head{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:7px;
font-family:'Cairo',sans-serif;
font-size:12px;
font-weight:900;
color:var(--t1);
}
.paym-dist-head > span:first-child{display:flex;align-items:center;gap:6px;}
.paym-dist-dot{
width:7px;height:7px;
border-radius:50%;
}
.paym-dist-amt{
font-family:var(--font);
font-size:14px;
font-weight:900;
letter-spacing:-.3px;
}
.paym-dist-cash .paym-dist-amt{color:#4ade80;}
.paym-dist-bank .paym-dist-amt{color:#60A5FA;}
.paym-dist-bar{
height:8px;
background:rgba(255,255,255,.05);
border-radius:5px;
overflow:hidden;
margin-bottom:6px;
}
.paym-dist-fill{
height:100%;
border-radius:5px;
transition:width .8s cubic-bezier(.16,1,.3,1);
box-shadow:0 0 12px currentColor;
}
.paym-dist-foot{
font-size:10px;
color:var(--t3);
font-weight:700;
}
/* Add form */
.paym-add{
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid rgba(74,222,128,.3);
border-radius:18px;
padding:16px 16px 14px;
margin-bottom:14px;
box-shadow:0 10px 26px rgba(34,197,94,.12);
}
.paym-add-h{
display:flex;align-items:center;gap:11px;
margin-bottom:14px;
}
.paym-add-ico{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #22C55E, #16a34a);
color:#fff;
border-radius:11px;
font-size:18px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(34,197,94,.35);
}
.paym-add-title{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
margin-bottom:2px;
}
.paym-add-sub{
font-size:10.5px;
color:var(--t3);
font-weight:700;
}
.paym-add-form{
display:flex;flex-direction:column;
gap:10px;
}
.paym-input{
width:100%;
padding:12px 14px;
background:rgba(0,0,0,.3);
border:1.5px solid var(--bdr);
border-radius:12px;
color:var(--t1);
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:700;
outline:none;
transition:all .25s;
}
.paym-input:focus{
border-color:rgba(74,222,128,.5);
background:rgba(0,0,0,.4);
box-shadow:0 0 0 3px rgba(34,197,94,.1);
}
.paym-type-select{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.paym-type-opt{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.paym-type-opt input{display:none;}
.paym-type-card{
padding:13px 11px;
background:rgba(255,255,255,.02);
border:1.5px solid rgba(255,255,255,.05);
border-radius:13px;
text-align:center;
transition:all .3s cubic-bezier(.16,1,.3,1);
}
.paym-type-opt:hover .paym-type-card{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.1);
}
.paym-type-opt input:checked + .paym-type-card{
box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(0,0,0,.25);
}
.paym-type-cash input:checked + .paym-type-card{
background:linear-gradient(155deg, rgba(34,197,94,.22), rgba(34,197,94,.05));
border-color:rgba(74,222,128,.6);
}
.paym-type-bank input:checked + .paym-type-card{
background:linear-gradient(155deg, rgba(59,130,246,.22), rgba(59,130,246,.05));
border-color:rgba(96,165,250,.6);
}
.paym-type-ico{
font-size:24px;
line-height:1;
margin-bottom:6px;
}
.paym-type-name{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
margin-bottom:2px;
}
.paym-type-cash input:checked ~ .paym-type-card .paym-type-name,
.paym-type-cash .paym-type-card:has(input:checked) .paym-type-name{color:#4ade80;}
.paym-type-bank input:checked ~ .paym-type-card .paym-type-name,
.paym-type-bank .paym-type-card:has(input:checked) .paym-type-name{color:#60A5FA;}
.paym-type-desc{
font-size:9.5px;
color:var(--t3);
font-weight:700;
}
.paym-add-btn{
width:100%;
display:flex;align-items:center;justify-content:center;gap:7px;
padding:13px 16px;
background:linear-gradient(135deg, #22C55E, #16a34a);
color:#fff;
border:none;
border-radius:12px;
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:900;
cursor:pointer;
transition:all .25s;
box-shadow:0 8px 20px rgba(34,197,94,.35);
letter-spacing:-.2px;
}
.paym-add-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(34,197,94,.5);
}
.paym-add-btn:active{transform:scale(.96);}
/* Groups */
.paym-group{
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid var(--bdr);
border-radius:18px;
padding:14px 14px 12px;
margin-bottom:13px;
}
.paym-group-h{
display:flex;align-items:center;gap:11px;
margin-bottom:14px;
padding-bottom:11px;
border-bottom:1px dashed rgba(255,255,255,.07);
}
.paym-group-ico{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
font-size:18px;
color:#fff;
flex-shrink:0;
box-shadow:0 6px 16px rgba(0,0,0,.2);
}
.paym-group-title{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
}
.paym-group-sub{
font-size:10.5px;
color:var(--t3);
margin-top:2px;
font-weight:700;
}
.paym-group-count{
font-family:var(--font);
font-size:20px;
font-weight:900;
color:var(--g2);
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.25);
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
flex-shrink:0;
}
.paym-grid{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
gap:10px;
}
.paym-card{
position:relative;
background:rgba(0,0,0,.22);
border:1.5px solid var(--bdr);
border-radius:14px;
padding:0;
overflow:hidden;
transition:all .3s cubic-bezier(.16,1,.3,1);
}
.paym-card:hover{
transform:translateY(-2px);
border-color:rgba(255,255,255,.1);
box-shadow:0 10px 24px rgba(0,0,0,.3);
}
.paym-card-cash{
background:linear-gradient(155deg, rgba(34,197,94,.05), rgba(0,0,0,.22));
border-color:rgba(74,222,128,.2);
}
.paym-card-bank{
background:linear-gradient(155deg, rgba(59,130,246,.05), rgba(0,0,0,.22));
border-color:rgba(96,165,250,.2);
}
.paym-card-glow{
position:absolute;
inset:0;
pointer-events:none;
}
.paym-card-cash .paym-card-glow{
background:radial-gradient(circle at top right, rgba(74,222,128,.1), transparent 65%);
}
.paym-card-bank .paym-card-glow{
background:radial-gradient(circle at top right, rgba(96,165,250,.1), transparent 65%);
}
.paym-card-h{
position:relative;z-index:1;
display:flex;align-items:center;gap:10px;
padding:12px 12px 10px;
}
.paym-card-ico{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
font-size:18px;
color:#fff;
flex-shrink:0;
box-shadow:0 5px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.15);
}
.paym-card-info{flex:1;min-width:0;}
.paym-card-name{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
margin-bottom:4px;
}
.paym-card-type{
display:flex;align-items:center;gap:4px;
flex-wrap:wrap;
}
.paym-type-pill{
display:inline-flex;align-items:center;
padding:2px 8px;
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:9.5px;
font-weight:900;
letter-spacing:-.1px;
}
.paym-default-pill{
display:inline-flex;align-items:center;
padding:2px 8px;
background:rgba(201,168,76,.15);
color:var(--g2);
border:1px solid rgba(201,168,76,.3);
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:9px;
font-weight:900;
}
.paym-card-actions{
display:flex;align-items:center;gap:5px;
flex-shrink:0;
}
.paym-action{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
border-radius:9px;
color:var(--t3);
cursor:pointer;
transition:all .2s;
-webkit-tap-highlight-color:transparent;
}
.paym-action:hover{
background:rgba(255,255,255,.08);
color:var(--t1);
transform:scale(1.05);
}
.paym-action:disabled{
opacity:.35;
cursor:not-allowed;
}
.paym-action-del:not(:disabled):hover{
background:rgba(239,68,68,.12);
border-color:rgba(248,113,113,.3);
color:#f87171;
}
.paym-stats{
position:relative;z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:1px;
background:rgba(255,255,255,.04);
border-top:1px solid rgba(255,255,255,.04);
}
.paym-stat{
display:flex;flex-direction:column;
gap:2px;
padding:8px 10px;
background:rgba(0,0,0,.2);
text-align:center;
}
.paym-stat-lbl{
font-size:9.5px;
color:var(--t4);
font-weight:800;
letter-spacing:.2px;
}
.paym-stat-val{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.paym-empty{
grid-column:1/-1;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:8px;
padding:30px 20px;
background:rgba(0,0,0,.15);
border:1.5px dashed var(--bdr);
border-radius:13px;
color:var(--t3);
font-size:12px;
font-weight:700;
}
.paym-empty-ico{font-size:32px;opacity:.5;}
/* Info */
.paym-info{
display:flex;align-items:flex-start;gap:12px;
padding:14px 16px;
background:linear-gradient(155deg, rgba(96,165,250,.07), rgba(96,165,250,.02));
border:1px solid rgba(96,165,250,.22);
border-radius:16px;
}
.paym-info-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:rgba(96,165,250,.15);
border:1px solid rgba(96,165,250,.3);
border-radius:11px;
font-size:17px;
flex-shrink:0;
}
.paym-info-body{flex:1;min-width:0;}
.paym-info-title{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:#93c5fd;
margin-bottom:7px;
letter-spacing:-.2px;
}
.paym-info-text{
font-size:11px;
color:var(--t2);
line-height:2;
font-weight:700;
}
@media(max-width:560px){
.paym-hero{padding:16px 14px 14px;}
.paym-hero-title{font-size:16px;}
.paym-hero-ico{width:50px;height:50px;font-size:23px;}
.paym-grid{grid-template-columns:1fr;}
}
/*
🆕🆕🆕 SMART MONTH CLOSE (smart-close-*)
Two-path decision UI: distribute & archive OR carry forward
*/
/* INFO BANNER — Replaces close CTA in summary tab */
.mfc-info-banner{
position:relative;
display:flex;align-items:flex-start;gap:11px;
background:linear-gradient(155deg, rgba(96,165,250,.08), rgba(96,165,250,.02));
border:1.5px solid rgba(96,165,250,.25);
border-radius:14px;
padding:13px 15px;
margin-bottom:14px;
}
.mfc-info-banner-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:rgba(96,165,250,.15);
border:1px solid rgba(96,165,250,.3);
border-radius:10px;
font-size:17px;
flex-shrink:0;
}
.mfc-info-banner-body{flex:1;min-width:0;}
.mfc-info-banner-title{
font-family:var(--font);
font-size:12.5px;
font-weight:900;
color:#93c5fd;
letter-spacing:-.2px;
margin-bottom:4px;
}
.mfc-info-banner-sub{
font-size:11px;
color:var(--t2);
font-weight:700;
line-height:1.7;
}
/* MAIN SMART CLOSE CARD */
.smart-close{
position:relative;
background:linear-gradient(165deg,
rgba(201,168,76,.10) 0%,
rgba(168,85,247,.06) 50%,
rgba(74,222,128,.04) 100%);
border:1.5px solid rgba(201,168,76,.4);
border-radius:24px;
padding:22px 20px 18px;
margin-bottom:16px;
overflow:hidden;
box-shadow:
0 24px 60px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.04) inset,
0 0 100px rgba(201,168,76,.08) inset;
}
.smart-close.is-distributed{
background:linear-gradient(165deg,
rgba(74,222,128,.12) 0%,
rgba(34,197,94,.06) 50%,
rgba(201,168,76,.04) 100%);
border-color:rgba(74,222,128,.45);
box-shadow:
0 24px 60px rgba(34,197,94,.15),
0 0 0 1px rgba(255,255,255,.04) inset,
0 0 100px rgba(34,197,94,.08) inset;
}
.smart-close.is-closed:not(.is-distributed){
background:linear-gradient(165deg,
rgba(96,165,250,.10) 0%,
rgba(168,85,247,.06) 50%,
rgba(96,165,250,.04) 100%);
border-color:rgba(96,165,250,.4);
box-shadow:
0 24px 60px rgba(59,130,246,.12),
0 0 0 1px rgba(255,255,255,.04) inset,
0 0 100px rgba(59,130,246,.08) inset;
}
.smart-close-orb{
position:absolute;
border-radius:50%;
filter:blur(90px);
pointer-events:none;
animation:smartOrbit 22s ease-in-out infinite;
}
.smart-close-orb-1{
width:340px;height:340px;
background:radial-gradient(circle, rgba(251,191,36,.3), transparent 65%);
top:-130px;right:-100px;
}
.smart-close-orb-2{
width:280px;height:280px;
background:radial-gradient(circle, rgba(168,85,247,.22), transparent 65%);
bottom:-100px;left:-70px;
animation-delay:-7s;
}
.smart-close-orb-3{
width:220px;height:220px;
background:radial-gradient(circle, rgba(74,222,128,.18), transparent 65%);
top:40%;left:30%;
animation-delay:-14s;
}
.smart-close.is-distributed .smart-close-orb-1{background:radial-gradient(circle, rgba(74,222,128,.32), transparent 65%);}
.smart-close.is-distributed .smart-close-orb-2{background:radial-gradient(circle, rgba(201,168,76,.25), transparent 65%);}
.smart-close.is-closed:not(.is-distributed) .smart-close-orb-1{background:radial-gradient(circle, rgba(96,165,250,.3), transparent 65%);}
.smart-close.is-closed:not(.is-distributed) .smart-close-orb-2{background:radial-gradient(circle, rgba(192,132,252,.22), transparent 65%);}
@keyframes smartOrbit{
0%,100%{transform:translate(0,0) scale(1); opacity:.85;}
33%{transform:translate(35px,-30px) scale(1.12); opacity:1;}
66%{transform:translate(-30px,25px) scale(.95); opacity:.9;}
}
/* HEADER */
.smart-close-h{
position:relative;z-index:1;
display:flex;align-items:center;gap:14px;
margin-bottom:18px;
}
.smart-close-ico-wrap{
position:relative;
flex-shrink:0;
}
.smart-close-ico{
width:62px;height:62px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border-radius:19px;
font-size:30px;
box-shadow:
0 12px 32px rgba(201,168,76,.5),
inset 0 2px 0 rgba(255,255,255,.2);
position:relative;z-index:2;
}
.smart-close.is-distributed .smart-close-ico{
background:linear-gradient(135deg, #4ade80, #22C55E);
color:#fff;
box-shadow:
0 12px 32px rgba(34,197,94,.5),
inset 0 2px 0 rgba(255,255,255,.2);
}
.smart-close.is-closed:not(.is-distributed) .smart-close-ico{
background:linear-gradient(135deg, #60A5FA, #3B82F6);
color:#fff;
box-shadow:
0 12px 32px rgba(59,130,246,.5),
inset 0 2px 0 rgba(255,255,255,.2);
}
.smart-close-ring{
position:absolute;
inset:-7px;
border-radius:26px;
border:2.5px solid rgba(201,168,76,.35);
animation:smartRing 2.8s ease-in-out infinite;
}
.smart-close.is-distributed .smart-close-ring{border-color:rgba(74,222,128,.4);}
.smart-close.is-closed:not(.is-distributed) .smart-close-ring{border-color:rgba(96,165,250,.4);}
@keyframes smartRing{
0%,100%{transform:scale(1); opacity:.6;}
50%{transform:scale(1.1); opacity:.15;}
}
.smart-close-titles{flex:1;min-width:0;}
.smart-close-title{
font-family:var(--font);
font-size:19px;
font-weight:900;
letter-spacing:-.5px;
background-image:linear-gradient(135deg, #fff 0%, var(--g2) 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:luxShine 5s ease-in-out infinite;
margin-bottom:5px;
}
.smart-close.is-distributed .smart-close-title{
background-image:linear-gradient(135deg, #fff 0%, #4ade80 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.smart-close.is-closed:not(.is-distributed) .smart-close-title{
background-image:linear-gradient(135deg, #fff 0%, #60A5FA 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.smart-close-sub{
font-size:11.5px;
color:var(--t2);
font-weight:700;
line-height:1.7;
}
/* TWO PATHS */
.smart-close-paths{
position:relative;z-index:1;
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:14px;
}
.smart-path{
position:relative;
background:linear-gradient(155deg, rgba(0,0,0,.3), rgba(0,0,0,.18));
border:1.5px solid var(--bdr);
border-radius:18px;
padding:16px 15px 14px;
overflow:hidden;
transition:all .3s cubic-bezier(.16,1,.3,1);
display:flex;flex-direction:column;
}
.smart-path:hover{
transform:translateY(-3px);
border-color:rgba(255,255,255,.12);
box-shadow:0 16px 38px rgba(0,0,0,.4);
}
.smart-path-distribute{
border-color:rgba(74,222,128,.35);
}
.smart-path-distribute:hover{
border-color:rgba(74,222,128,.55);
box-shadow:0 16px 38px rgba(34,197,94,.22);
}
.smart-path-carry{
border-color:rgba(96,165,250,.35);
}
.smart-path-carry:hover{
border-color:rgba(96,165,250,.55);
box-shadow:0 16px 38px rgba(59,130,246,.22);
}
.smart-path-glow{
position:absolute;
inset:0;
pointer-events:none;
opacity:.4;
transition:opacity .35s;
}
.smart-path:hover .smart-path-glow{opacity:.7;}
.smart-path-distribute .smart-path-glow{
background:radial-gradient(circle at top right, rgba(74,222,128,.18), transparent 65%);
}
.smart-path-carry .smart-path-glow{
background:radial-gradient(circle at top right, rgba(96,165,250,.18), transparent 65%);
}
.smart-path-h{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;
gap:10px;
margin-bottom:11px;
}
.smart-path-ico{
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
border-radius:13px;
font-size:20px;
color:#fff;
flex-shrink:0;
box-shadow:0 8px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15);
}
.smart-path-ico-distribute{
background:linear-gradient(135deg, #4ade80, #22C55E);
}
.smart-path-ico-carry{
background:linear-gradient(135deg, #60A5FA, #3B82F6);
}
.smart-path-label{
font-family:'Cairo',sans-serif;
font-size:9.5px;
font-weight:900;
letter-spacing:.5px;
text-transform:uppercase;
padding:4px 10px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
color:var(--t3);
}
.smart-path-title{
position:relative;z-index:1;
font-family:var(--font);
font-size:15px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
margin-bottom:7px;
}
.smart-path-distribute .smart-path-title{color:#4ade80;}
.smart-path-carry .smart-path-title{color:#60A5FA;}
.smart-path-desc{
position:relative;z-index:1;
font-size:11px;
color:var(--t2);
line-height:1.8;
font-weight:700;
margin-bottom:12px;
}
.smart-path-desc strong{
font-family:var(--font);
font-weight:900;
}
.smart-path-distribute .smart-path-desc strong{color:#4ade80;}
.smart-path-carry .smart-path-desc strong{color:#60A5FA;}
.smart-path-info{
position:relative;z-index:1;
display:flex;flex-direction:column;
gap:5px;
padding:10px 11px;
background:rgba(0,0,0,.25);
border:1px solid var(--bdr);
border-radius:11px;
margin-bottom:12px;
flex:1;
}
.smart-path-info-row{
display:flex;align-items:center;justify-content:space-between;
gap:6px;
font-family:'Cairo',sans-serif;
font-size:11px;
font-weight:700;
}
.smart-path-info-lbl{color:var(--t3);}
.smart-path-info-val{
font-family:var(--font);
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.smart-path-info-total{
margin-top:4px;
padding-top:6px;
border-top:1px dashed rgba(255,255,255,.08);
}
.smart-path-info-total .smart-path-info-lbl{color:var(--g2);}
.smart-path-info-total .smart-path-info-val{
font-size:13px;
color:var(--g2);
}
.smart-path-distribute .smart-path-info-total .smart-path-info-val{color:#4ade80;}
.smart-path-carry .smart-path-info-total .smart-path-info-val{color:#60A5FA;}
.smart-path-btn{
position:relative;z-index:1;
width:100%;
display:flex;align-items:center;justify-content:center;gap:7px;
padding:13px 16px;
border:none;
border-radius:13px;
font-family:'Cairo',sans-serif;
font-size:12.5px;
font-weight:900;
cursor:pointer;
transition:all .25s;
letter-spacing:-.2px;
color:#fff;
}
.smart-path-btn:hover:not(:disabled){
transform:translateY(-2px);
}
.smart-path-btn:active:not(:disabled){transform:scale(.97);}
.smart-path-btn:disabled{
opacity:.4;
cursor:not-allowed;
}
.smart-path-btn-distribute{
background:linear-gradient(135deg, #22C55E, #16a34a);
box-shadow:0 10px 24px rgba(34,197,94,.4), inset 0 1px 0 rgba(255,255,255,.15);
}
.smart-path-btn-distribute:hover:not(:disabled){
box-shadow:0 14px 32px rgba(34,197,94,.55), inset 0 1px 0 rgba(255,255,255,.15);
}
.smart-path-btn-carry{
background:linear-gradient(135deg, #3B82F6, #1d4ed8);
box-shadow:0 10px 24px rgba(59,130,246,.4), inset 0 1px 0 rgba(255,255,255,.15);
}
.smart-path-btn-carry:hover:not(:disabled){
box-shadow:0 14px 32px rgba(59,130,246,.55), inset 0 1px 0 rgba(255,255,255,.15);
}
.smart-close-hint{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:center;gap:7px;
padding:9px 14px;
background:rgba(0,0,0,.2);
border:1px dashed rgba(255,255,255,.08);
border-radius:11px;
font-size:10.5px;
color:var(--t3);
font-weight:700;
}
.smart-close-hint-ico{font-size:13px;}
/* CLOSED STATE SUMMARY */
.smart-close-summary{
position:relative;z-index:1;
}
.smart-close-result{
padding:14px 16px;
background:rgba(0,0,0,.25);
border:1.5px solid;
border-radius:14px;
margin-bottom:11px;
}
.smart-close-result-distributed{
border-color:rgba(74,222,128,.4);
background:linear-gradient(155deg, rgba(34,197,94,.08), rgba(0,0,0,.25));
}
.smart-close-result-carried{
border-color:rgba(96,165,250,.4);
background:linear-gradient(155deg, rgba(59,130,246,.08), rgba(0,0,0,.25));
}
.smart-close-result-h{
display:flex;align-items:center;gap:11px;
margin-bottom:11px;
padding-bottom:11px;
border-bottom:1px dashed rgba(255,255,255,.08);
}
.smart-close-result-distributed .smart-close-result-h{border-bottom-color:rgba(74,222,128,.15);}
.smart-close-result-carried .smart-close-result-h{border-bottom-color:rgba(96,165,250,.15);}
.smart-close-result-ico{
font-size:26px;
flex-shrink:0;
}
.smart-close-result-title{
font-family:var(--font);
font-size:14px;
font-weight:900;
letter-spacing:-.3px;
}
.smart-close-result-distributed .smart-close-result-title{color:#4ade80;}
.smart-close-result-carried .smart-close-result-title{color:#60A5FA;}
.smart-close-result-sub{
font-size:10.5px;
color:var(--t3);
font-weight:700;
margin-top:3px;
}
.smart-close-shares{
display:flex;flex-direction:column;
gap:5px;
}
.smart-close-share{
display:flex;align-items:center;gap:10px;
padding:8px 11px;
background:rgba(0,0,0,.2);
border:1px solid rgba(74,222,128,.18);
border-radius:10px;
}
.smart-close-share-name{
flex:1;
font-family:var(--font);
font-size:12px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.smart-close-share-pct{
font-family:var(--font);
font-size:11px;
font-weight:800;
color:var(--t3);
padding:2px 9px;
background:rgba(255,255,255,.05);
border-radius:9px;
}
.smart-close-share-val{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:#4ade80;
letter-spacing:-.3px;
white-space:nowrap;
}
.smart-close-undo-btn{
display:flex;align-items:center;justify-content:center;gap:6px;
width:100%;
padding:11px 16px;
background:transparent;
border:1px dashed rgba(251,191,36,.35);
color:#fbbf24;
border-radius:11px;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:800;
cursor:pointer;
transition:all .25s;
}
.smart-close-undo-btn:hover{
background:rgba(245,158,11,.08);
border-style:solid;
border-color:rgba(251,191,36,.55);
transform:translateY(-1px);
}
@media(max-width:560px){
.smart-close{padding:18px 16px 14px;}
.smart-close-title{font-size:16px;}
.smart-close-ico{width:54px;height:54px;font-size:26px;}
.smart-close-paths{grid-template-columns:1fr;gap:10px;}
.smart-path-title{font-size:14px;}
}
/*
🆕🆕 PARTNERS HERO (prt-*) — Luxurious profit/loss breakdown
*/
.prt-hero{
position:relative;
background:linear-gradient(155deg, rgba(34,197,94,.08), rgba(201,168,76,.04));
border:1.5px solid rgba(74,222,128,.35);
border-radius:18px;
padding:18px 18px 14px;
margin-bottom:16px;
overflow:hidden;
box-shadow:0 14px 36px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.prt-hero.is-loss{
background:linear-gradient(155deg, rgba(239,68,68,.08), rgba(245,158,11,.04));
border-color:rgba(248,113,113,.4);
box-shadow:0 14px 36px rgba(239,68,68,.18), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.prt-hero-orb{
position:absolute;
border-radius:50%;
filter:blur(70px);
pointer-events:none;
animation:prtOrbit 16s ease-in-out infinite;
}
.prt-orb-1{
width:280px;height:280px;
background:radial-gradient(circle, rgba(74,222,128,.3), transparent 65%);
top:-100px;right:-80px;
}
.prt-orb-2{
width:200px;height:200px;
background:radial-gradient(circle, rgba(201,168,76,.25), transparent 65%);
bottom:-70px;left:-50px;
animation-delay:-8s;
}
.prt-hero.is-loss .prt-orb-1{background:radial-gradient(circle, rgba(248,113,113,.3), transparent 65%);}
.prt-hero.is-loss .prt-orb-2{background:radial-gradient(circle, rgba(251,191,36,.22), transparent 65%);}
@keyframes prtOrbit{
0%,100%{transform:translate(0,0) scale(1); opacity:.8;}
50%{transform:translate(-20px,15px) scale(1.08); opacity:1;}
}
.prt-hero-top{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;
gap:10px;
margin-bottom:14px;
}
.prt-hero-period{
display:inline-flex;align-items:center;gap:7px;
padding:5px 12px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
font-family:'Cairo',sans-serif;
font-size:11px;font-weight:800;
color:var(--t2);
}
.prt-hero-dot{
width:6px;height:6px;
border-radius:50%;
background:var(--g2);
box-shadow:0 0 6px var(--g2);
animation:prtPulse 1.8s ease-in-out infinite;
}
@keyframes prtPulse{
0%,100%{opacity:1;}
50%{opacity:.4;}
}
.prt-hero-status{
display:inline-flex;align-items:center;gap:5px;
padding:5px 12px;
border-radius:20px;
font-family:'Cairo',sans-serif;
font-size:11px;font-weight:900;
}
.prt-hero-status.is-profit{
background:rgba(34,197,94,.15);
border:1px solid rgba(74,222,128,.35);
color:#4ade80;
}
.prt-hero-status.is-loss{
background:rgba(239,68,68,.15);
border:1px solid rgba(248,113,113,.35);
color:#f87171;
}
.prt-hero-main{
position:relative;z-index:1;
text-align:center;
padding:8px 0 16px;
}
.prt-hero-lbl{
font-family:var(--font);
font-size:12px;
font-weight:800;
color:var(--t2);
margin-bottom:7px;
letter-spacing:.3px;
}
.prt-hero-value{
font-family:var(--font);
font-size:42px;
font-weight:900;
letter-spacing:-1.4px;
line-height:1;
margin-bottom:7px;
background-image:linear-gradient(135deg, #fff 0%, #4ade80 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:prtShine 6s ease-in-out infinite;
}
.prt-hero.is-loss .prt-hero-value{
background-image:linear-gradient(135deg, #fff 0%, #f87171 50%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
@keyframes prtShine{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.prt-hero-unit{
font-size:18px;
opacity:.65;
font-weight:700;
margin-right:5px;
-webkit-text-fill-color:initial;
background:none;
color:var(--t2);
}
.prt-hero-sub{
font-size:11px;
color:var(--t3);
font-weight:700;
line-height:1.6;
}
/* Breakdown — accounting trail */
.prt-breakdown{
position:relative;z-index:1;
padding-top:12px;
border-top:1px dashed rgba(255,255,255,.1);
display:flex;flex-direction:column;
gap:5px;
}
.prt-br-row{
display:flex;align-items:center;gap:9px;
padding:7px 11px;
background:rgba(0,0,0,.2);
border:1px solid rgba(255,255,255,.04);
border-radius:10px;
transition:all .2s;
}
.prt-br-row:hover{background:rgba(0,0,0,.28);}
.prt-br-pos{
border-color:rgba(74,222,128,.15);
background:linear-gradient(155deg, rgba(34,197,94,.04), rgba(0,0,0,.2));
}
.prt-br-neg{
border-color:rgba(248,113,113,.15);
background:linear-gradient(155deg, rgba(239,68,68,.04), rgba(0,0,0,.2));
}
.prt-br-result{
margin-top:5px;
padding:10px 13px;
border:1.5px solid;
border-radius:11px;
}
.prt-br-result.is-profit{
background:linear-gradient(155deg, rgba(34,197,94,.14), rgba(34,197,94,.04));
border-color:rgba(74,222,128,.45);
box-shadow:0 4px 14px rgba(34,197,94,.18);
}
.prt-br-result.is-loss{
background:linear-gradient(155deg, rgba(239,68,68,.14), rgba(239,68,68,.04));
border-color:rgba(248,113,113,.45);
box-shadow:0 4px 14px rgba(239,68,68,.18);
}
.prt-br-ico{
width:28px;height:28px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);
border-radius:8px;
font-size:13px;
font-weight:900;
flex-shrink:0;
}
.prt-br-pos .prt-br-ico{background:rgba(74,222,128,.18); color:#4ade80;}
.prt-br-neg .prt-br-ico{background:rgba(248,113,113,.18); color:#f87171;}
.prt-br-result.is-profit .prt-br-ico{background:rgba(74,222,128,.22); color:#4ade80; font-size:14px;}
.prt-br-result.is-loss .prt-br-ico{background:rgba(248,113,113,.22); color:#f87171; font-size:14px;}
.prt-br-info{flex:1;min-width:0;}
.prt-br-lbl{
font-family:var(--font);
font-size:12px;
font-weight:800;
color:var(--t1);
letter-spacing:-.2px;
}
.prt-br-result .prt-br-lbl{
font-size:13px;
font-weight:900;
}
.prt-br-result.is-profit .prt-br-lbl{color:#4ade80;}
.prt-br-result.is-loss .prt-br-lbl{color:#f87171;}
.prt-br-sub{
font-size:9.5px;
color:var(--t4);
margin-top:1.5px;
font-weight:700;
}
.prt-br-val{
font-family:var(--font);
font-size:13px;
font-weight:900;
letter-spacing:-.3px;
white-space:nowrap;
}
.prt-br-pos .prt-br-val{color:#4ade80;}
.prt-br-neg .prt-br-val{color:#f87171;}
.prt-br-result.is-profit .prt-br-val{color:#4ade80; font-size:15px;}
.prt-br-result.is-loss .prt-br-val{color:#f87171; font-size:15px;}
/* Pending note */
.prt-pending-note{
margin-top:9px;
display:flex;align-items:flex-start;gap:9px;
padding:9px 12px;
background:linear-gradient(155deg, rgba(245,158,11,.08), rgba(245,158,11,.02));
border:1px solid rgba(251,191,36,.28);
border-radius:10px;
font-size:10.5px;
color:#fbbf24;
line-height:1.7;
font-weight:700;
}
.prt-pending-ico{font-size:14px;flex-shrink:0;}
.prt-pending-note strong{font-family:var(--font);color:#fbbf24;}
@media(max-width:560px){
.prt-hero{padding:15px 14px 12px;}
.prt-hero-value{font-size:34px;}
.prt-hero-unit{font-size:15px;}
.prt-br-row{padding:6px 10px;}
.prt-br-lbl{font-size:11.5px;}
.prt-br-val{font-size:12px;}
}
.fin-prt-list{display:flex;flex-direction:column;gap:10px;}
.fin-prt-card{
background:linear-gradient(135deg,rgba(168,85,247,.05),rgba(168,85,247,.01));
border:1px solid rgba(168,85,247,.2);
border-radius:14px;
padding:14px;
display:flex;align-items:center;gap:14px;
flex-wrap:wrap;
transition:all .2s;
}
.fin-prt-card:hover{border-color:rgba(168,85,247,.35);}
.fin-prt-avatar{
width:48px;height:48px;
background:linear-gradient(135deg,#a855f7,#7c3aed);
color:#fff;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--font);font-size:18px;font-weight:900;
flex-shrink:0;
box-shadow:0 6px 14px rgba(168,85,247,.35);
}
.fin-prt-info{flex:1;min-width:160px;}
.fin-prt-name{
font-family:var(--font);font-size:14px;font-weight:900;color:var(--t1);
}
.fin-prt-pct{
display:inline-block;
background:rgba(168,85,247,.15);
border:1px solid rgba(168,85,247,.3);
color:#c084fc;
font-family:var(--font);font-size:11px;font-weight:800;
padding:3px 9px;border-radius:11px;
margin-top:5px;
}
.fin-prt-share{
text-align:left;flex:1;min-width:140px;
}
.fin-prt-share-lbl{font-size:10px;color:var(--t3);font-weight:700;margin-bottom:3px;}
.fin-prt-share-val{
font-family:var(--font);font-size:18px;font-weight:900;
color:#4ade80;
}
.fin-prt-share-val.is-loss{color:#f87171;}
.fin-prt-actions{display:flex;gap:6px;}
.fin-prt-btn{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--bdr);
border-radius:9px;background:transparent;
color:var(--t3);cursor:pointer;
transition:all .2s;
-webkit-tap-highlight-color:transparent;
}
.fin-prt-btn:hover{color:var(--t1);border-color:var(--bdr2);}
.fin-prt-btn.del:hover{background:#EF4444;color:#fff;border-color:transparent;}
/* Net profit hero */
.fin-net-hero{
text-align:center;
background:linear-gradient(135deg,
rgba(34,197,94,.1) 0%,
rgba(34,197,94,.02) 100%);
border:1px solid rgba(34,197,94,.3);
border-radius:18px;
padding:24px 20px;
position:relative;
overflow:hidden;
}
.fin-net-hero.is-loss{
background:linear-gradient(135deg,
rgba(239,68,68,.1) 0%,
rgba(239,68,68,.02) 100%);
border-color:rgba(239,68,68,.3);
}
.fin-net-hero::before{
content:'';position:absolute;
top:-30px;left:-30px;
width:140px;height:140px;
background:radial-gradient(circle,rgba(34,197,94,.15),transparent 70%);
border-radius:50%;
pointer-events:none;
}
.fin-net-hero.is-loss::before{background:radial-gradient(circle,rgba(239,68,68,.15),transparent 70%);}
.fin-net-hero::after{
content:'';position:absolute;
bottom:-30px;right:-30px;
width:120px;height:120px;
background:radial-gradient(circle,rgba(34,197,94,.1),transparent 70%);
border-radius:50%;
pointer-events:none;
}
.fin-net-lbl{
font-size:11px;color:var(--t3);font-weight:700;
letter-spacing:.5px;margin-bottom:6px;
position:relative;z-index:1;
}
.fin-net-val{
font-family:var(--font);font-size:42px;font-weight:900;
color:#4ade80;line-height:1;letter-spacing:-1px;
position:relative;z-index:1;
}
.fin-net-hero.is-loss .fin-net-val{color:#f87171;}
.fin-net-val .unit{font-size:18px;opacity:.7;margin-right:5px;}
.fin-net-sub{
font-size:10.5px;color:var(--t3);margin-top:6px;
position:relative;z-index:1;
}
/* Calculation breakdown table */
.fin-calc-table{display:flex;flex-direction:column;gap:1px;}
.fin-calc-row{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:11px 14px;
background:rgba(255,255,255,.015);
border:1px solid var(--bdr);
font-size:12px;
}
.fin-calc-row:first-child{border-radius:11px 11px 0 0;}
.fin-calc-row:last-child{border-radius:0 0 11px 11px;}
.fin-calc-row.is-sub{
background:rgba(34,197,94,.04);
border-color:rgba(34,197,94,.15);
}
.fin-calc-row.is-deduct{
background:rgba(239,68,68,.04);
border-color:rgba(239,68,68,.15);
}
.fin-calc-row.is-final{
background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.02));
border-color:rgba(201,168,76,.3);
font-weight:900;
}
.fin-calc-lbl{display:flex;align-items:center;gap:8px;color:var(--t2);font-weight:700;}
.fin-calc-lbl .ico{
width:24px;height:24px;
display:flex;align-items:center;justify-content:center;
font-size:11px;border-radius:6px;
}
.fin-calc-val{
font-family:var(--font);font-size:14px;font-weight:900;color:var(--t1);
white-space:nowrap;
}
.fin-calc-row.is-sub .fin-calc-val{color:#4ade80;}
.fin-calc-row.is-deduct .fin-calc-val{color:#f87171;}
.fin-calc-row.is-final .fin-calc-val{color:var(--g2);font-size:18px;}
/* Empty states */
.fin-empty{
text-align:center;padding:50px 20px;
background:rgba(255,255,255,.02);
border:2px dashed var(--bdr);
border-radius:14px;
color:var(--t3);
}
.fin-empty-ico{font-size:42px;margin-bottom:10px;opacity:.4;}
.fin-empty-title{font-family:var(--font);font-size:14px;font-weight:800;color:var(--t2);margin-bottom:5px;}
.fin-empty-sub{font-size:11px;line-height:1.7;}
/* ════════ Treasury (Cash + Bank + Emergency) ════════ */
.fin-treasury-grid{
display:grid;grid-template-columns:1fr 1fr;gap:12px;
margin-bottom:14px;
}
.fin-treasury-grid.has-emergency{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:980px){.fin-treasury-grid.has-emergency{grid-template-columns:1fr 1fr;}}
@media(max-width:780px){
.fin-treasury-grid{grid-template-columns:1fr;}
.fin-treasury-grid.has-emergency{grid-template-columns:1fr;}
}
.ft-box{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:16px;
padding:18px;
position:relative;
overflow:hidden;
}
.ft-box::before{
content:'';position:absolute;
top:-40px;left:-40px;
width:160px;height:160px;
border-radius:50%;
filter:blur(50px);
opacity:.4;
pointer-events:none;
}
.ft-box-cash{border-color:rgba(34,197,94,.25);}
.ft-box-cash::before{background:radial-gradient(circle,rgba(34,197,94,.4),transparent);}
.ft-box-bank{border-color:rgba(59,130,246,.25);}
.ft-box-bank::before{background:radial-gradient(circle,rgba(59,130,246,.4),transparent);}
.ft-box-emergency{border-color:rgba(239,68,68,.3);}
.ft-box-emergency::before{background:radial-gradient(circle,rgba(239,68,68,.45),transparent);}
.ft-box-emergency .ft-box-ico{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);}
.ft-box-emergency .ft-box-val{
background:linear-gradient(135deg,#EF4444,#fca5a5);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.ft-box-emergency .ft-box-val::after{
content:'🚨';
-webkit-text-fill-color:initial;
font-size:14px;
margin-right:6px;
opacity:.6;
filter:none;
}
.ft-box-h{
display:flex;align-items:center;gap:11px;
margin-bottom:14px;
position:relative;z-index:1;
}
.ft-box-ico{
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
font-size:22px;
border-radius:12px;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
}
.ft-box-cash .ft-box-ico{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);}
.ft-box-bank .ft-box-ico{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.25);}
.ft-box-title{
font-family:var(--font);font-size:14px;font-weight:900;color:var(--t1);
}
.ft-box-sub{font-size:10.5px;color:var(--t3);margin-top:2px;}
.ft-box-val{
font-family:var(--font);
font-size:32px;font-weight:900;
letter-spacing:-1px;line-height:1;
margin-bottom:14px;
position:relative;z-index:1;
}
.ft-box-cash .ft-box-val{color:#4ade80;}
.ft-box-bank .ft-box-val{color:#60A5FA;}
.ft-box-val .unit{font-size:14px;opacity:.6;margin-right:5px;font-weight:700;}
.ft-box-flow{
display:flex;flex-direction:column;gap:1px;
background:rgba(0,0,0,.15);
border:1px solid var(--bdr);
border-radius:11px;
overflow:hidden;
position:relative;z-index:1;
}
.ft-flow-row{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:9px 12px;
font-size:11px;
border-bottom:1px solid var(--bdr);
}
.ft-flow-row:last-child{border-bottom:none;}
.ft-flow-lbl{color:var(--t3);font-weight:600;}
.ft-flow-val{
font-family:var(--font);font-size:12.5px;font-weight:800;color:var(--t1);
white-space:nowrap;
}
.ft-flow-row.in .ft-flow-val{color:#4ade80;}
.ft-flow-row.out .ft-flow-val{color:#f87171;}
.ft-flow-row.total{
background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(201,168,76,.02));
border-top:1px solid rgba(201,168,76,.25);
}
.ft-flow-row.total .ft-flow-lbl{color:var(--g2);font-weight:800;}
.ft-flow-row.total .ft-flow-val{color:var(--g2);font-size:14px;}
/* Opening balances form */
.fin-treasury-form{
display:grid;grid-template-columns:1fr 1fr;gap:11px;
}
@media(max-width:560px){.fin-treasury-form{grid-template-columns:1fr;}}
.ft-field label{
display:block;font-size:10.5px;color:var(--t3);
font-weight:700;margin-bottom:5px;letter-spacing:.2px;
}
.ft-input-wrap{position:relative;}
.ft-input-wrap input{padding-left:38px !important;}
.ft-input-suffix{
position:absolute;left:11px;top:50%;
transform:translateY(-50%);
font-family:var(--font);font-size:13px;font-weight:800;
color:var(--g2);
pointer-events:none;
}
.ft-field input{
width:100%;padding:10px 12px;
background:var(--d4);border:1px solid var(--bdr);color:var(--t1);
border-radius:10px;font-size:13px;
font-family:'Cairo',sans-serif;outline:none;
}
.ft-field input:focus{border-color:#a855f7;background:var(--d3);}
/* ════════ Partner exclude toggle / badge ════════ */
.fin-prt-excl-toggle{
display:inline-flex;align-items:center;gap:6px;
font-size:10.5px;color:var(--t3);font-weight:600;
cursor:pointer;
padding:5px 10px;
background:rgba(34,197,94,.05);
border:1px solid rgba(34,197,94,.2);
border-radius:9px;
transition:all .2s;
}
.fin-prt-excl-toggle:hover{
background:rgba(34,197,94,.1);
border-color:rgba(34,197,94,.35);
}
.fin-prt-excl-toggle input{
width:auto;margin:0;cursor:pointer;
accent-color:#4ade80;
}
.fin-prt-excl-badge{
display:inline-flex;align-items:center;gap:4px;
background:rgba(34,197,94,.12);
border:1px solid rgba(34,197,94,.3);
color:#4ade80;
font-size:10px;font-weight:800;
padding:3px 8px;border-radius:9px;
margin-right:5px;
}
.fin-prt-card.is-excluded-card{
background:linear-gradient(135deg,rgba(34,197,94,.04),rgba(34,197,94,.01));
border-color:rgba(34,197,94,.2);
opacity:.92;
}
.fin-prt-share-val.is-excluded{color:#94a3b8;font-style:italic;font-weight:700;font-size:12px;}
/* ════════ Rent Fund Box ════════ */
.ft-rent-fund{
background:linear-gradient(155deg,rgba(59,130,246,.08),rgba(59,130,246,.02));
border:1px solid rgba(59,130,246,.3);
border-radius:16px;
padding:18px;
margin-bottom:14px;
position:relative;
overflow:hidden;
}
.ft-rent-fund::before{
content:'';
position:absolute;top:-50px;right:-50px;
width:180px;height:180px;
background:radial-gradient(circle,rgba(59,130,246,.18),transparent 70%);
border-radius:50%;
filter:blur(40px);
pointer-events:none;
}
.ft-rent-h{
display:flex;align-items:center;gap:11px;
margin-bottom:14px;
position:relative;z-index:1;
flex-wrap:wrap;
}
.ft-rent-ico{
width:46px;height:46px;
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
display:flex;align-items:center;justify-content:center;
border-radius:12px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(59,130,246,.4),0 0 0 1px rgba(255,255,255,.1) inset;
}
.ft-rent-title{
font-family:var(--font);font-size:15px;font-weight:900;
color:#60A5FA;
text-shadow:0 1px 4px rgba(59,130,246,.2);
}
.ft-rent-sub{font-size:11px;color:var(--t3);margin-top:3px;}
.ft-rent-val{
font-family:var(--font);
font-size:28px;font-weight:900;
color:#60A5FA;
margin-right:auto;
line-height:1;
}
.ft-rent-val.is-deficit{color:#f87171;}
.ft-rent-flow{
display:flex;flex-direction:column;gap:1px;
background:rgba(0,0,0,.18);
border:1px solid var(--bdr);
border-radius:11px;
overflow:hidden;
margin-bottom:11px;
position:relative;z-index:1;
}
.ft-rent-warn{
background:rgba(239,68,68,.08);
border:1px solid rgba(239,68,68,.25);
border-radius:9px;
padding:9px 13px;
font-size:11px;
color:#f87171;
line-height:1.7;
position:relative;z-index:1;
}
.ft-rent-ok{
background:rgba(34,197,94,.08);
border:1px solid rgba(34,197,94,.25);
border-radius:9px;
padding:9px 13px;
font-size:11px;
color:#4ade80;
line-height:1.7;
position:relative;z-index:1;
}
.ft-rent-info{
background:rgba(59,130,246,.06);
border:1px solid rgba(59,130,246,.2);
border-radius:9px;
padding:9px 13px;
font-size:11px;
color:#93c5fd;
line-height:1.7;
position:relative;z-index:1;
}
/* Rent obligation row indicator */
.fin-obl-item.is-rent-obl{
background:linear-gradient(135deg,rgba(59,130,246,.05),rgba(59,130,246,.01));
border-color:rgba(59,130,246,.2);
}
.fin-rent-badge{
display:inline-flex;align-items:center;gap:3px;
background:rgba(59,130,246,.12);
border:1px solid rgba(59,130,246,.3);
color:#60A5FA;
font-size:9.5px;font-weight:800;
padding:2px 7px;border-radius:9px;
margin-right:5px;
vertical-align:middle;
}
/* ════════ "Paid" toggle for obligations ════════ */
.fin-obl-paid-toggle{
display:inline-flex;align-items:center;gap:6px;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
user-select:none;
}
.fin-obl-paid-toggle input{
position:absolute;opacity:0;width:0;height:0;
}
.fopt-track{
position:relative;
width:38px;height:21px;
background:rgba(255,255,255,.08);
border:1px solid var(--bdr);
border-radius:11px;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
flex-shrink:0;
}
.fopt-knob{
position:absolute;
top:1.5px;right:1.5px;
width:15px;height:15px;
background:linear-gradient(135deg,#94a3b8,#64748b);
border-radius:50%;
box-shadow:0 2px 6px rgba(0,0,0,.3);
transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.fin-obl-paid-toggle input:checked ~ .fopt-track{
background:linear-gradient(135deg,rgba(34,197,94,.25),rgba(34,197,94,.1));
border-color:rgba(34,197,94,.4);
}
.fin-obl-paid-toggle input:checked ~ .fopt-track .fopt-knob{
right:auto;left:1.5px;
background:linear-gradient(135deg,#4ade80,#16a34a);
box-shadow:0 2px 8px rgba(34,197,94,.5);
}
.fopt-lbl{
font-size:10px;color:var(--t3);font-weight:700;
min-width:50px;text-align:right;
}
.fin-obl-paid-toggle input:checked ~ .fopt-lbl{
color:#4ade80;
}
/* "Paid" badge on obligation name */
.fin-paid-badge{
display:inline-flex;align-items:center;gap:3px;
background:linear-gradient(135deg,rgba(34,197,94,.18),rgba(34,197,94,.06));
border:1px solid rgba(34,197,94,.35);
color:#4ade80;
font-size:9.5px;font-weight:800;
padding:2px 8px;border-radius:9px;
margin-right:5px;
vertical-align:middle;
}
/* ════════ POS Fee Cards ════════ */
.pos-fee-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
@media(max-width:720px){.pos-fee-grid{grid-template-columns:1fr;}}
.pos-fee-card{
background:linear-gradient(155deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
border:1px solid var(--bdr);
border-radius:12px;
padding:14px;
position:relative;
overflow:hidden;
transition:all .2s;
}
.pos-fee-card::before{
content:'';position:absolute;
top:0;right:0;
width:3px;height:100%;
background:var(--pc,#F59E0B);
box-shadow:0 0 10px var(--pc,#F59E0B);
}
.pos-fee-card:hover{border-color:var(--bdr2);}
.pos-fee-h{
display:flex;align-items:center;gap:9px;
margin-bottom:11px;
padding-bottom:9px;
border-bottom:1px solid var(--bdr);
}
.pos-fee-logo{
display:inline-flex;align-items:center;justify-content:center;
min-width:46px;height:26px;padding:0 8px;
border-radius:6px;
font-family:var(--font);font-size:10.5px;font-weight:900;
color:#fff;
letter-spacing:.4px;
flex-shrink:0;
box-shadow:0 3px 8px rgba(0,0,0,.3);
}
.pos-fee-name{
font-family:var(--font);font-size:13px;font-weight:900;color:var(--t1);
}
.pos-fee-rate{
font-size:10.5px;color:var(--t3);
margin-top:2px;
font-family:var(--font);font-weight:700;
}
.pos-fee-amounts{display:flex;flex-direction:column;gap:5px;}
.pos-fee-row{
display:flex;align-items:center;justify-content:space-between;
font-size:11px;color:var(--t3);
padding:3px 0;
}
.pos-fee-row strong{
font-family:var(--font);font-size:12px;font-weight:900;color:var(--t1);
}
.pos-fee-row.total{
border-top:1px dashed var(--bdr);
padding-top:7px;margin-top:3px;
}
.pos-fee-row.total strong{color:#4ade80;font-size:13.5px;}
/* ════════ Obligation Month Navigator ════════ */
.obl-month-hero{
display:flex;align-items:center;gap:14px;
background:linear-gradient(155deg,rgba(168,85,247,.12),rgba(227,169,44,.04));
border:1px solid rgba(168,85,247,.35);
border-radius:20px;
padding:20px 18px;
margin-bottom:14px;
position:relative;
overflow:hidden;
box-shadow:0 10px 30px rgba(168,85,247,.12), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.obl-month-hero::before{
content:'';position:absolute;
top:-60px;left:-60px;
width:220px;height:220px;
background:radial-gradient(circle,rgba(168,85,247,.22),transparent 65%);
border-radius:50%;
filter:blur(40px);
pointer-events:none;
animation:heroOrb 8s ease-in-out infinite;
}
.obl-month-hero::after{
content:'';position:absolute;
bottom:-60px;right:-60px;
width:200px;height:200px;
background:radial-gradient(circle,rgba(227,169,44,.15),transparent 65%);
border-radius:50%;
filter:blur(40px);
pointer-events:none;
animation:heroOrb 10s ease-in-out infinite reverse;
}
@keyframes heroOrb{
0%,100%{transform:translate(0,0) scale(1); opacity:.8;}
50%{transform:translate(15px,15px) scale(1.1); opacity:1;}
}
.obl-month-arrow{
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
background:rgba(168,85,247,.08);
border:1px solid rgba(168,85,247,.28);
border-radius:14px;
color:#c084fc;
cursor:pointer;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
flex-shrink:0;
-webkit-tap-highlight-color:transparent;
position:relative;
z-index:2;
}
.obl-month-arrow:hover{
background:linear-gradient(135deg,#a855f7,#7c3aed);
color:#fff;
border-color:transparent;
transform:scale(1.1);
box-shadow:0 8px 22px rgba(168,85,247,.5);
}
.obl-month-arrow:active{transform:scale(.94);}
.obl-month-center{
flex:1;text-align:center;
position:relative;z-index:2;
/* Animate month title changes */
}
.obl-month-center.is-changing .obl-month-title{
animation:monthSwap .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes monthSwap{
0%{opacity:0; transform:translateY(8px) scale(.95);}
100%{opacity:1; transform:translateY(0) scale(1);}
}
.obl-month-label-sm{
font-size:11px;color:var(--t3);
font-weight:700;letter-spacing:.4px;
margin-bottom:4px;
display:inline-flex; align-items:center; gap:5px;
}
.obl-month-title{
font-family:var(--font);
font-size:26px;font-weight:900;
background:linear-gradient(135deg,#c084fc,#e9d5ff,#c084fc);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:-.5px;
animation:titleShimmer 6s ease-in-out infinite;
text-shadow:none;
}
@keyframes titleShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.obl-month-today-btn{
margin-top:9px;
padding:6px 14px;
background:rgba(168,85,247,.1);
border:1px solid rgba(168,85,247,.35);
color:#c084fc;
border-radius:9px;
font-size:10.5px;font-weight:800;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
font-family:'Cairo',sans-serif;
}
.obl-month-today-btn:hover{
background:linear-gradient(135deg,rgba(168,85,247,.25),rgba(227,169,44,.15));
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(168,85,247,.25);
}
/* Quick month chips scroller */
.obl-chip-scroller{
margin-bottom:14px;
overflow-x:auto;
scrollbar-width:none;
-webkit-overflow-scrolling:touch;
position:relative;
/* Fade edges */
mask-image:linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
-webkit-mask-image:linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}
.obl-chip-scroller::-webkit-scrollbar{display:none;}
.obl-chips{
display:flex;gap:8px;
padding:4px 12px;
min-width:max-content;
}
.obl-chip{
flex-shrink:0;
min-width:84px;
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:13px;
padding:11px 9px 9px;
cursor:pointer;
transition:all .35s cubic-bezier(.34,1.56,.64,1);
text-align:center;
-webkit-tap-highlight-color:transparent;
position:relative;
overflow:hidden;
animation:chipEnter .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.obl-chip:nth-child(1){animation-delay:.02s;}
.obl-chip:nth-child(2){animation-delay:.06s;}
.obl-chip:nth-child(3){animation-delay:.1s;}
.obl-chip:nth-child(4){animation-delay:.14s;}
.obl-chip:nth-child(5){animation-delay:.18s;}
.obl-chip:nth-child(6){animation-delay:.22s;}
.obl-chip:nth-child(7){animation-delay:.26s;}
@keyframes chipEnter{
from{opacity:0; transform:translateY(8px) scale(.92);}
to{opacity:1; transform:translateY(0) scale(1);}
}
.obl-chip:hover{
border-color:rgba(168,85,247,.35);
transform:translateY(-3px);
box-shadow:0 6px 16px rgba(0,0,0,.25), 0 0 0 1px rgba(168,85,247,.2) inset;
}
.obl-chip:active{transform:translateY(-1px) scale(.97);}
.obl-chip.on{
background:linear-gradient(155deg,rgba(168,85,247,.22),rgba(168,85,247,.06));
border-color:rgba(168,85,247,.55);
box-shadow:0 10px 24px rgba(168,85,247,.3), 0 0 0 1px rgba(168,85,247,.4) inset;
transform:translateY(-2px) scale(1.04);
}
.obl-chip.on::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
animation:shimmer 3s ease-in-out infinite;
pointer-events:none;
}
@keyframes shimmer{
0%{transform:translateX(100%);}
100%{transform:translateX(-100%);}
}
.obl-chip.now::after{
content:'';
position:absolute;
top:6px;left:6px;
width:7px;height:7px;
background:#4ade80;
border-radius:50%;
box-shadow:0 0 10px rgba(74,222,128,.8), 0 0 18px rgba(74,222,128,.4);
animation:nowPulse 1.8s ease-in-out infinite;
}
@keyframes nowPulse{
0%,100%{opacity:.7; transform:scale(1);}
50%{opacity:1; transform:scale(1.25);}
}
.obl-chip-name{
font-family:var(--font);font-size:12.5px;font-weight:900;
color:var(--t2);
position:relative;z-index:1;
letter-spacing:-.2px;
}
.obl-chip.on .obl-chip-name{
color:#c084fc;
text-shadow:0 1px 6px rgba(168,85,247,.4);
}
.obl-chip-year{
font-size:9.5px;color:var(--t4);
font-family:var(--font);font-weight:700;
margin-top:1px;
position:relative;z-index:1;
letter-spacing:.3px;
}
.obl-chip.on .obl-chip-year{color:#a78bfa;}
.obl-chip-prog{
height:3px;
background:rgba(255,255,255,.06);
border-radius:2px;
margin-top:8px;
overflow:hidden;
position:relative;z-index:1;
}
.obl-chip-prog-fill{
height:100%;
background:linear-gradient(90deg,#a855f7,#c084fc);
border-radius:2px;
transition:width .6s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 0 8px rgba(168,85,247,.5);
}
.obl-chip.on .obl-chip-prog-fill{
background:linear-gradient(90deg,#22C55E,#4ade80);
box-shadow:0 0 10px rgba(74,222,128,.6);
}
/* "اليوم" indicator under current chip */
.obl-chip-today{
display:inline-block;
margin-top:4px;
padding:2px 7px;
font-size:8.5px;
font-weight:800;
font-family:var(--font);
background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(74,222,128,.1));
border:1px solid rgba(74,222,128,.4);
color:#4ade80;
border-radius:7px;
letter-spacing:.3px;
position:relative;
z-index:1;
box-shadow:0 2px 6px rgba(74,222,128,.15);
}
/* Pay method buttons (askPayMethod modal) */
.paymethod-btn:not(:disabled):hover{
transform:translateY(-2px) scale(1.01);
box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.1) inset !important;
}
.paymethod-btn:not(:disabled):active{
transform:translateY(0) scale(.99);
}
.paymethod-btn::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.12) 50%, transparent 70%);
transform:translateX(100%);
transition:transform .6s ease;
pointer-events:none;
}
.paymethod-btn:not(:disabled):hover::before{
transform:translateX(-100%);
}
.askpay-cancel:hover{
background:rgba(255,255,255,.04) !important;
color:var(--t1) !important;
}
/* ════════ Monthly Income Tab (الدخل الشهري) — smart month switcher + luxurious cards ════════ */
.mi-hero{
position:relative;
background:linear-gradient(135deg,
rgba(245,158,11,.10) 0%,
rgba(168,85,247,.10) 50%,
rgba(59,130,246,.10) 100%);
border:1px solid rgba(201,168,76,.45);
border-radius:22px;
padding:0;
margin-bottom:14px;
overflow:hidden;
box-shadow:
0 14px 40px rgba(0,0,0,.35),
0 0 0 1px rgba(255,255,255,.05) inset;
}
.mi-hero-orb{
position:absolute;
border-radius:50%;
filter:blur(70px);
pointer-events:none;
animation:miOrb 18s ease-in-out infinite;
}
.mi-orb-1{
width:340px;height:340px;
background:radial-gradient(circle,rgba(245,158,11,.35),transparent 65%);
top:-130px;left:-80px;
animation-delay:0s;
}
.mi-orb-2{
width:280px;height:280px;
background:radial-gradient(circle,rgba(168,85,247,.3),transparent 65%);
top:30%;right:-90px;
animation-delay:-6s;
}
.mi-orb-3{
width:240px;height:240px;
background:radial-gradient(circle,rgba(59,130,246,.28),transparent 65%);
bottom:-100px;left:40%;
animation-delay:-11s;
}
@keyframes miOrb{
0%,100%{transform:translate(0,0) scale(1); opacity:.7;}
33%{transform:translate(30px,-20px) scale(1.1); opacity:.95;}
66%{transform:translate(-20px,20px) scale(.95); opacity:.85;}
}
.mi-hero-inner{
position:relative;z-index:1;
padding:18px 18px 20px;
}
/* Month Navigator — luxurious arrow controls */
.mi-nav{
display:flex;align-items:center;
gap:10px;
margin-bottom:16px;
}
.mi-nav-btn{
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1.5px solid rgba(201,168,76,.35);
color:var(--g2);
border-radius:14px;
cursor:pointer;
flex-shrink:0;
-webkit-tap-highlight-color:transparent;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 4px 12px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.mi-nav-btn:hover{
transform:scale(1.1);
border-color:var(--g2);
background:linear-gradient(155deg, rgba(201,168,76,.15), rgba(201,168,76,.05));
box-shadow:0 8px 22px rgba(201,168,76,.3), 0 0 0 1px rgba(201,168,76,.2) inset;
}
.mi-nav-btn:active{
transform:scale(.94);
transition:transform .08s;
}
.mi-nav-prev svg{transform:scaleX(-1);} /* RTL: prev points right */
.mi-nav-next svg{transform:scaleX(1);}
.mi-nav-center{
flex:1;
text-align:center;
min-width:0;
}
.mi-nav-status{
font-size:10px;
font-weight:800;
margin-bottom:4px;
letter-spacing:.3px;
}
.mi-status-cur{
color:#4ade80;
background:rgba(34,197,94,.12);
padding:3px 10px;
border-radius:8px;
border:1px solid rgba(74,222,128,.3);
display:inline-block;
animation:miCurPulse 2.4s ease-in-out infinite;
}
@keyframes miCurPulse{
0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4);}
50%{box-shadow:0 0 0 5px rgba(34,197,94,0);}
}
.mi-status-past{
color:var(--t3);
background:rgba(148,163,184,.1);
padding:3px 10px;
border-radius:8px;
display:inline-block;
}
.mi-status-future{
color:#fbbf24;
background:rgba(245,158,11,.12);
padding:3px 10px;
border-radius:8px;
border:1px solid rgba(245,158,11,.3);
display:inline-block;
}
.mi-nav-month{
font-family:var(--font);
font-size:22px;
font-weight:900;
letter-spacing:-.5px;
background:linear-gradient(135deg, var(--g2), #fde047, var(--g2));
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:miMonthShimmer 6s ease-in-out infinite;
text-shadow:0 2px 8px rgba(201,168,76,.3);
}
@keyframes miMonthShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.mi-nav-sub{
font-size:10.5px;
color:var(--t3);
margin-top:3px;
line-height:1.5;
}
/* Hero main net value */
.mi-hero-main{text-align:center;margin-bottom:14px;}
.mi-hero-label{
font-family:var(--font);
font-size:11.5px;
font-weight:800;
color:var(--g2);
margin-bottom:6px;
text-shadow:0 1px 4px rgba(201,168,76,.25);
}
.mi-hero-value{
font-family:var(--font);
font-size:42px;
font-weight:900;
letter-spacing:-1.2px;
line-height:1;
margin-bottom:10px;
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:miValShimmer 7s ease-in-out infinite;
}
.mi-hero-value.is-positive{
background-image:linear-gradient(135deg,#fff 0%, #4ade80 50%, #22C55E 100%);
}
.mi-hero-value.is-negative{
background-image:linear-gradient(135deg,#fff 0%, #f87171 50%, #ef4444 100%);
}
@keyframes miValShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.mi-hero-unit{
font-size:18px;
opacity:.7;
font-weight:700;
margin-right:5px;
-webkit-text-fill-color:initial;
background:none;
color:var(--t2);
}
.mi-hero-sub{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:8px;
font-size:11.5px;
font-weight:700;
}
.mi-hero-chip{
display:inline-flex;align-items:center;gap:5px;
padding:3px 10px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
border-radius:8px;
font-family:'Cairo',sans-serif;
}
.mi-hero-sep{
color:var(--t4);
font-weight:900;
font-family:var(--font);
}
/* Month pills (quick jump) */
.mi-month-pills{
display:flex;
gap:6px;
overflow-x:auto;
padding:8px 2px 6px;
margin:0 -4px;
scrollbar-width:none;
}
.mi-month-pills::-webkit-scrollbar{display:none;}
.mi-month-pill{
flex-shrink:0;
padding:6px 13px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:var(--t3);
border-radius:10px;
font-size:11px;
font-weight:800;
font-family:'Cairo',sans-serif;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:all .2s;
white-space:nowrap;
}
.mi-month-pill:hover{
background:rgba(255,255,255,.08);
color:var(--t1);
transform:translateY(-1px);
}
.mi-month-pill.is-active{
background:linear-gradient(135deg, var(--g1), var(--g2));
border-color:var(--g2);
color:#0a0a0a;
box-shadow:0 4px 12px rgba(201,168,76,.4);
}
/* Stats grid */
.mi-stats-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:7px;
margin-bottom:14px;
}
@media(max-width:600px){
.mi-stats-grid{grid-template-columns:repeat(5, 1fr);gap:5px;}
}
.mi-stat{
display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:13px;
padding:11px 6px;
transition:transform .2s, border-color .2s, box-shadow .2s;
}
.mi-stat:hover{
transform:translateY(-2px);
border-color:rgba(201,168,76,.35);
box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.mi-stat-ico{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:15px;
flex-shrink:0;
}
.mi-stat-body{min-width:0;width:100%;}
.mi-stat-val{
font-family:var(--font);
font-size:16px;font-weight:900;
color:var(--t1);
letter-spacing:-.4px;
line-height:1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mi-stat-lbl{
font-size:8.5px;color:var(--t3);
font-weight:700;
margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Sections */
.mi-section{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
padding:13px;
margin-bottom:12px;
}
.mi-section-h{
display:flex;align-items:center;gap:9px;
margin-bottom:11px;
}
.mi-section-ico{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
color:#fff;
font-size:14px;
flex-shrink:0;
box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.mi-section-title{
font-family:var(--font);
font-size:13px;font-weight:900;
color:var(--t1);
}
.mi-section-sub{
font-size:10.5px;
color:var(--t3);
margin-top:2px;
}
.mi-section-total{
font-family:var(--font);
font-size:14px;font-weight:900;
letter-spacing:-.3px;
margin-left:auto;
margin-right:auto;
}
/* Daily Chart */
.mi-chart-wrap{
background:rgba(0,0,0,.22);
border:1px solid var(--bdr);
border-radius:11px;
padding:12px 10px 8px;
direction:ltr;
}
.mi-chart-bars{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:2px;
height:90px;
margin-bottom:6px;
}
.mi-day-bar{
flex:1;
min-width:5px;
min-height:3px;
background:linear-gradient(180deg, var(--g2) 0%, rgba(201,168,76,.5) 100%);
border-radius:2px 2px 0 0;
box-shadow:0 0 6px rgba(201,168,76,.25);
position:relative;
transition:all .3s;
cursor:pointer;
}
.mi-day-bar:hover{
background:linear-gradient(180deg, #fde047 0%, var(--g2) 100%);
box-shadow:0 0 14px rgba(253,224,71,.55);
transform:scaleY(1.05);
transform-origin:bottom;
}
.mi-day-bar.is-best{
background:linear-gradient(180deg, #4ade80 0%, #22C55E 100%);
box-shadow:0 0 16px rgba(74,222,128,.65);
}
.mi-day-badge{
position:absolute;
top:-15px;left:50%;transform:translateX(-50%);
font-size:11px;
filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
.mi-chart-axis{
display:flex;
justify-content:space-between;
gap:2px;
}
.mi-chart-tick{
flex:1;
text-align:center;
font-size:8.5px;
color:var(--t4);
font-weight:700;
font-family:var(--font);
height:11px;
}
.mi-chart-tick.has-num{color:var(--t3);}
/* Cash/Bank split */
.mi-split-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:12px;
}
@media(max-width:760px){.mi-split-grid{grid-template-columns:1fr;}}
.mi-side{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
padding:13px 14px;
position:relative;
overflow:hidden;
}
.mi-side-cash{border-color:rgba(74,222,128,.3);}
.mi-side-cash::before{
content:'';position:absolute;
top:-40px;left:-40px;
width:140px;height:140px;
background:radial-gradient(circle,rgba(34,197,94,.2),transparent 70%);
border-radius:50%;
filter:blur(30px);
pointer-events:none;
}
.mi-side-bank{border-color:rgba(96,165,250,.3);}
.mi-side-bank::before{
content:'';position:absolute;
top:-40px;right:-40px;
width:140px;height:140px;
background:radial-gradient(circle,rgba(59,130,246,.2),transparent 70%);
border-radius:50%;
filter:blur(30px);
pointer-events:none;
}
.mi-side-h{
display:flex;align-items:center;gap:10px;
margin-bottom:11px;
position:relative;z-index:1;
}
.mi-side-ico{
width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
font-size:19px;
color:#fff;
flex-shrink:0;
box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.mi-side-title{
font-family:var(--font);
font-size:13px;font-weight:900;
color:var(--t1);
}
.mi-side-sub{
font-size:10.5px;color:var(--t3);
margin-top:2px;
}
.mi-side-amount{
font-family:var(--font);
font-size:18px;font-weight:900;
letter-spacing:-.5px;line-height:1;
flex-shrink:0;
}
.mi-side-amount span{
font-size:10px;opacity:.6;margin-right:3px;font-weight:700;
}
.mi-method-pills{
display:flex;flex-wrap:wrap;gap:5px;
margin-bottom:9px;
position:relative;z-index:1;
}
.mi-mp{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;
border-radius:8px;
font-size:10.5px;font-weight:800;
font-family:'Cairo',sans-serif;
}
.mi-mp.is-cash{
background:rgba(34,197,94,.08);
border:1px solid rgba(74,222,128,.25);
color:#86efac;
}
.mi-mp.is-bank{
background:rgba(59,130,246,.08);
border:1px solid rgba(96,165,250,.25);
color:#93c5fd;
}
.mi-mp-val{font-family:var(--font); letter-spacing:-.2px;}
.mi-empty{
text-align:center;
font-size:10.5px;color:var(--t4);
padding:14px;font-style:italic;
}
.mi-side-vat{
display:flex;align-items:center;justify-content:space-between;gap:8px;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:9px;
padding:7px 11px;
margin-top:6px;
position:relative;z-index:1;
}
.mi-side-vat-lbl{font-size:10.5px;color:var(--t3);font-weight:700;}
.mi-side-vat-val{
font-family:var(--font);
font-size:12px;font-weight:900;
color:var(--t1);letter-spacing:-.2px;
}
/* Service rows */
.mi-svc-list{display:flex;flex-direction:column;gap:7px;}
.mi-svc-row{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.18);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 11px;
}
.mi-svc-ico{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:16px;flex-shrink:0;
}
.mi-svc-info{flex:1;min-width:0;}
.mi-svc-name{
font-family:var(--font);
font-size:12px;font-weight:800;
color:var(--t1);
margin-bottom:5px;
}
.mi-svc-count{
font-size:9.5px;color:var(--t4);
font-weight:700;
margin-right:5px;
}
.mi-svc-bar{
height:5px;
background:rgba(255,255,255,.04);
border-radius:3px;
overflow:hidden;
}
.mi-svc-bar-fill{
height:100%;
border-radius:3px;
transition:width .6s cubic-bezier(.34,1.56,.64,1);
}
.mi-svc-val{
font-family:var(--font);
font-size:14px;font-weight:900;
letter-spacing:-.3px;
flex-shrink:0;
}
.mi-svc-val span{font-size:10px;opacity:.6;margin-right:3px;font-weight:700;}
/* Outgoings rows */
.mi-out-rows{display:flex;flex-direction:column;gap:7px;}
.mi-out-row{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.18);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 11px;
}
.mi-out-ico{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:15px;
flex-shrink:0;
}
.mi-out-info{flex:1;min-width:0;}
.mi-out-label{
font-family:var(--font);
font-size:12px;font-weight:800;
color:var(--t1);
}
.mi-out-sub{
font-size:10px;color:var(--t3);
margin-top:2px;
line-height:1.5;
}
.mi-out-val{
font-family:var(--font);
font-size:14px;font-weight:900;
color:#f87171;
letter-spacing:-.3px;
flex-shrink:0;
}
.mi-out-val span{font-size:10px;opacity:.6;margin-right:3px;font-weight:700;}
/* Expense category breakdown */
.mi-cat-section{
margin-top:12px;
padding-top:12px;
border-top:1px dashed var(--bdr);
}
.mi-cat-title{
font-size:10.5px;color:var(--t3);
font-weight:800;
margin-bottom:8px;
letter-spacing:.3px;
}
.mi-cat-list{display:flex;flex-direction:column;gap:5px;}
.mi-cat-row{
display:flex;align-items:center;gap:9px;
padding:6px 4px;
}
.mi-cat-name{
font-size:11px;
color:var(--t2);
font-weight:700;
width:90px;
flex-shrink:0;
}
.mi-cat-bar{
flex:1;
height:5px;
background:rgba(255,255,255,.04);
border-radius:3px;
overflow:hidden;
}
.mi-cat-bar-fill{
height:100%;
background:linear-gradient(90deg, #EF4444aa, #f87171);
border-radius:3px;
}
.mi-cat-val{
font-family:var(--font);
font-size:11.5px;
font-weight:800;
color:#f87171;
letter-spacing:-.2px;
white-space:nowrap;
}
/* Net Card */
.mi-net-card{
background:linear-gradient(155deg,rgba(34,197,94,.08),rgba(34,197,94,.02));
border:1.5px solid rgba(74,222,128,.35);
border-radius:16px;
padding:15px;
margin-bottom:12px;
position:relative;
overflow:hidden;
box-shadow:0 8px 24px rgba(34,197,94,.12);
}
.mi-net-card::before{
content:'';position:absolute;
top:-40px;right:-40px;
width:160px;height:160px;
background:radial-gradient(circle,rgba(34,197,94,.18),transparent 70%);
border-radius:50%;
filter:blur(40px);
pointer-events:none;
}
.mi-net-h{
display:flex;align-items:center;gap:11px;
margin-bottom:12px;
position:relative;z-index:1;
}
.mi-net-ico{
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#22C55E,#15803d);
color:#fff;
border-radius:12px;
font-size:20px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(34,197,94,.4);
}
.mi-net-title{
font-family:var(--font);
font-size:14px;font-weight:900;
color:#4ade80;
}
.mi-net-sub{
font-size:11px;color:var(--t3);
margin-top:3px;
}
.mi-net-rows{
display:flex;flex-direction:column;gap:6px;
margin-bottom:12px;
position:relative;z-index:1;
}
.mi-net-row{
display:flex;align-items:center;justify-content:space-between;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:9px;
padding:9px 12px;
font-family:var(--font);
font-size:12.5px;font-weight:800;
}
.mi-net-row > span:first-child{color:var(--t2);}
.mi-net-row-val{letter-spacing:-.3px;font-weight:900;}
.mi-net-pos .mi-net-row-val{color:#4ade80;}
.mi-net-neg .mi-net-row-val{color:#f87171;}
.mi-net-result{
background:linear-gradient(155deg,rgba(34,197,94,.12),rgba(34,197,94,.04));
border-color:rgba(74,222,128,.4);
padding:11px 12px;
}
.mi-net-result > span:first-child{color:var(--t1);font-size:13.5px;}
.mi-net-result .mi-net-row-val{font-size:16px;}
.mi-net-side-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
position:relative;z-index:1;
}
.mi-net-side{
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 12px;
}
.mi-net-side-cash{border-color:rgba(74,222,128,.25);}
.mi-net-side-bank{border-color:rgba(96,165,250,.25);}
.mi-nss-lbl{
font-size:10px;color:var(--t3);
font-weight:700;
margin-bottom:4px;
}
.mi-nss-val{
font-family:var(--font);
font-size:14px;font-weight:900;
letter-spacing:-.3px;
}
/* Empty state */
.mi-empty-state{
text-align:center;
padding:50px 20px;
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px dashed var(--bdr);
border-radius:16px;
}
.mi-empty-ico{
font-size:54px;
margin-bottom:14px;
opacity:.6;
}
.mi-empty-title{
font-family:var(--font);
font-size:15px;font-weight:900;
color:var(--t1);
margin-bottom:6px;
}
.mi-empty-sub{
font-size:11.5px;
color:var(--t3);
margin-bottom:18px;
line-height:1.6;
}
.mi-empty-btn{
padding:10px 20px;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#0a0a0a;
border:none;
border-radius:10px;
font-size:12px;font-weight:900;
font-family:var(--font);
cursor:pointer;
box-shadow:0 6px 16px rgba(201,168,76,.35);
transition:all .2s;
}
.mi-empty-btn:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(201,168,76,.45);}
@media(max-width:560px){
.mi-hero-inner{padding:14px 14px 16px;}
.mi-hero-value{font-size:34px;}
.mi-hero-unit{font-size:15px;}
.mi-nav-btn{width:40px;height:40px;}
.mi-nav-month{font-size:19px;}
.mi-net-side-grid{grid-template-columns:1fr;}
.mi-section-total{font-size:13px;}
}
/* ════════ Smart Obligations List (mi-obl-*) — Monthly Income tab ════════ */
.fin-freq-badge{
display:inline-block;
font-size:9px;
font-weight:800;
font-family:'Cairo',sans-serif;
padding:2px 7px;
border-radius:6px;
border:1px solid;
letter-spacing:.2px;
margin-right:5px;
}
.fin-freq-monthly{
background:rgba(168,85,247,.12);
border-color:rgba(168,85,247,.3);
color:#c084fc;
}
.fin-freq-yearly{
background:rgba(245,158,11,.14);
border-color:rgba(245,158,11,.35);
color:#fbbf24;
}
.mi-obl-section{
border-color:rgba(168,85,247,.25) !important;
}
.mi-obl-list{display:flex;flex-direction:column;gap:6px;}
.mi-obl-row{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 11px;
transition:all .2s;
}
.mi-obl-row.is-paid{
background:linear-gradient(155deg,rgba(34,197,94,.06),rgba(34,197,94,.01));
border-color:rgba(74,222,128,.25);
}
.mi-obl-row.is-pending{
background:linear-gradient(155deg,rgba(245,158,11,.05),rgba(245,158,11,.01));
border-color:rgba(245,158,11,.25);
}
.mi-obl-status{
font-size:16px;
flex-shrink:0;
}
.mi-obl-info{
flex:1;min-width:0;
}
.mi-obl-name{
display:flex;align-items:center;gap:7px;flex-wrap:wrap;
font-family:var(--font);
font-size:12.5px;
font-weight:800;
color:var(--t1);
line-height:1.4;
}
.mi-obl-freq{
font-size:9.5px;
padding:2px 8px;
border-radius:7px;
border:1px solid;
font-weight:800;
font-family:'Cairo',sans-serif;
letter-spacing:.2px;
}
.mi-obl-meta{
font-size:10.5px;
color:var(--t3);
margin-top:3px;
line-height:1.5;
}
.mi-obl-row.is-paid .mi-obl-meta{color:#86efac;}
.mi-obl-amt{
font-family:var(--font);
font-size:14.5px;
font-weight:900;
letter-spacing:-.3px;
flex-shrink:0;
}
.mi-obl-amt span{
font-size:10px;opacity:.6;margin-right:3px;font-weight:700;
}
/* ════════ Rent Fund Card (mrf-*) — Cumulative reserve for yearly obligations ════════ */
.mi-rent-fund-card{
background:linear-gradient(155deg,rgba(59,130,246,.10),rgba(168,85,247,.05));
border:1.5px solid rgba(96,165,250,.4);
border-radius:16px;
padding:15px;
margin-bottom:12px;
position:relative;
overflow:hidden;
box-shadow:0 8px 24px rgba(59,130,246,.12);
}
.mi-rent-fund-card.is-deficit{
background:linear-gradient(155deg,rgba(239,68,68,.10),rgba(245,158,11,.05));
border-color:rgba(248,113,113,.45);
box-shadow:0 8px 24px rgba(239,68,68,.15);
}
.mrf-bg-orb{
content:'';position:absolute;
top:-50px;right:-50px;
width:180px;height:180px;
background:radial-gradient(circle,rgba(59,130,246,.25),transparent 70%);
border-radius:50%;
filter:blur(45px);
pointer-events:none;
animation:mrfOrb 12s ease-in-out infinite;
}
.mi-rent-fund-card.is-deficit .mrf-bg-orb{
background:radial-gradient(circle,rgba(239,68,68,.25),transparent 70%);
}
@keyframes mrfOrb{
0%,100%{transform:translate(0,0) scale(1); opacity:.7;}
50%{transform:translate(-20px,15px) scale(1.1); opacity:.9;}
}
.mrf-h{
display:flex;align-items:center;gap:12px;
margin-bottom:13px;
position:relative;z-index:1;
}
.mrf-ico{
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
border-radius:13px;
font-size:22px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(59,130,246,.4);
}
.is-deficit .mrf-ico{
background:linear-gradient(135deg,#EF4444,#b91c1c);
box-shadow:0 6px 16px rgba(239,68,68,.4);
}
.mrf-title{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
font-family:var(--font);
font-size:14.5px;
font-weight:900;
color:#60A5FA;
letter-spacing:-.3px;
}
.is-deficit .mrf-title{color:#f87171;}
.mrf-badge{
font-size:9.5px;
font-weight:800;
font-family:'Cairo',sans-serif;
padding:2px 8px;
border-radius:7px;
background:rgba(59,130,246,.15);
border:1px solid rgba(96,165,250,.3);
color:#93c5fd;
letter-spacing:.2px;
}
.is-deficit .mrf-badge{
background:rgba(239,68,68,.12);
border-color:rgba(248,113,113,.3);
color:#fca5a5;
}
.mrf-sub{
font-size:11px;
color:var(--t3);
margin-top:3px;
line-height:1.5;
}
.mrf-balance{
text-align:left;
flex-shrink:0;
}
.mrf-balance-lbl{
font-size:10px;
color:var(--t3);
font-weight:700;
margin-bottom:3px;
letter-spacing:.2px;
}
.mrf-balance-val{
font-family:var(--font);
font-size:22px;
font-weight:900;
letter-spacing:-.5px;
line-height:1;
color:#60A5FA;
}
.is-deficit .mrf-balance-val{color:#f87171;}
.mrf-balance-val span{
font-size:11px;opacity:.6;margin-right:3px;font-weight:700;
}
.mrf-flow{
display:flex;flex-direction:column;gap:5px;
background:rgba(0,0,0,.22);
border:1px solid var(--bdr);
border-radius:11px;
padding:11px 12px;
position:relative;z-index:1;
}
.mrf-flow-row{
display:flex;align-items:center;justify-content:space-between;
font-family:var(--font);
font-size:12px;
font-weight:800;
}
.mrf-flow-lbl{color:var(--t2);}
.mrf-flow-val{
letter-spacing:-.3px;
font-weight:900;
}
.mrf-in .mrf-flow-val{color:#4ade80;}
.mrf-out .mrf-flow-val{color:#f87171;}
.mrf-total{
border-top:1px dashed var(--bdr);
padding-top:6px;
margin-top:3px;
}
.mrf-total .mrf-flow-lbl{
color:var(--t1);
font-weight:900;
}
.mrf-total .mrf-flow-val{
color:#60A5FA;
font-size:14px;
}
.is-deficit .mrf-total .mrf-flow-val{color:#f87171;}
.mrf-items{
margin-top:11px;
padding-top:11px;
border-top:1px dashed var(--bdr);
position:relative;z-index:1;
}
.mrf-items-title{
font-size:10.5px;color:var(--t3);
font-weight:800;
margin-bottom:7px;
letter-spacing:.3px;
}
.mrf-item{
display:flex;align-items:center;gap:9px;
background:rgba(0,0,0,.15);
border:1px solid var(--bdr);
border-radius:9px;
padding:7px 11px;
margin-bottom:5px;
}
.mrf-item:last-child{margin-bottom:0;}
.mrf-item-name{
font-family:var(--font);
font-size:11.5px;
font-weight:800;
color:var(--t1);
flex-shrink:0;
}
.mrf-item-meta{
flex:1;
font-size:9.5px;
color:var(--t4);
font-weight:700;
text-align:center;
}
.mrf-item-bal{
font-family:var(--font);
font-size:12px;
font-weight:900;
letter-spacing:-.2px;
}
.mrf-hint{
margin-top:11px;
padding:10px 13px;
background:rgba(59,130,246,.06);
border:1px solid rgba(59,130,246,.2);
border-radius:10px;
font-size:11px;
color:#93c5fd;
line-height:1.7;
position:relative;z-index:1;
}
.mrf-warning{
margin-top:11px;
padding:10px 13px;
background:rgba(239,68,68,.08);
border:1px solid rgba(248,113,113,.3);
border-radius:10px;
font-size:11px;
color:#fca5a5;
line-height:1.7;
position:relative;z-index:1;
}
@media(max-width:560px){
.mrf-balance-val{font-size:18px;}
.mrf-ico{width:42px;height:42px;font-size:19px;}
.mrf-item-meta{display:none;}
}
/* ════════ Financial Summary — Luxurious Redesign (fs-*) ════════ */
/* ════════ Financial Summary — Luxurious Redesign (fs-*) ════════ */
/*
🆕🆕🆕 3-MODE TAX SYSTEM (tax3-*) — pay | defer | cancel
Luxurious 3-button selector for each tax source
*/
.tax3-card{
position:relative;
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid var(--bdr);
border-radius:18px;
padding:16px 16px 12px;
margin-bottom:13px;
overflow:hidden;
box-shadow:0 10px 28px rgba(0,0,0,.32);
transition:all .3s cubic-bezier(.16,1,.3,1);
}
.tax3-card:hover{
border-color:rgba(255,255,255,.1);
box-shadow:0 14px 36px rgba(0,0,0,.4);
}
.tax3-h{
display:flex;align-items:center;gap:11px;
margin-bottom:14px;
}
.tax3-ico{
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
border-radius:12px;
font-size:19px;
border:1px solid var(--bdr);
flex-shrink:0;
}
.tax3-title{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
}
.tax3-sub{
font-size:11px;
color:var(--t3);
margin-top:3px;
font-weight:700;
}
.tax3-current-state{
font-family:var(--font);
font-size:11px;
font-weight:900;
padding:5px 11px;
border-radius:20px;
border:1px solid;
flex-shrink:0;
letter-spacing:-.1px;
}
/* 3-button selector */
.tax3-modes{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:6px;
padding-top:10px;
border-top:1px dashed rgba(255,255,255,.07);
}
.tax3-mode-btn{
position:relative;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:5px;
padding:11px 8px;
background:rgba(255,255,255,.02);
border:1.5px solid rgba(255,255,255,.05);
border-radius:13px;
cursor:pointer;
font-family:'Cairo',sans-serif;
color:var(--t3);
transition:all .3s cubic-bezier(.16,1,.3,1);
-webkit-tap-highlight-color:transparent;
text-align:center;
min-height:78px;
}
.tax3-mode-btn:disabled{cursor:not-allowed;opacity:.5;}
.tax3-mode-btn:not(:disabled):hover{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.1);
transform:translateY(-1px);
}
.tax3-mode-btn:not(:disabled):active{transform:scale(.97);}
/* Active states */
.tax3-mode-btn.tax3-mode-pay.is-active{
background:linear-gradient(155deg, rgba(34,197,94,.18), rgba(34,197,94,.04));
border-color:rgba(74,222,128,.55);
color:#4ade80;
box-shadow:0 6px 18px rgba(34,197,94,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.tax3-mode-btn.tax3-mode-defer.is-active{
background:linear-gradient(155deg, rgba(245,158,11,.18), rgba(245,158,11,.04));
border-color:rgba(251,191,36,.55);
color:#fbbf24;
box-shadow:0 6px 18px rgba(245,158,11,.22), inset 0 1px 0 rgba(255,255,255,.05);
}
.tax3-mode-btn.tax3-mode-cancel.is-active{
background:linear-gradient(155deg, rgba(148,163,184,.18), rgba(148,163,184,.04));
border-color:rgba(148,163,184,.5);
color:#cbd5e1;
box-shadow:0 6px 18px rgba(148,163,184,.18), inset 0 1px 0 rgba(255,255,255,.05);
}
.tax3-mode-ico{
font-size:20px;
line-height:1;
font-weight:900;
}
.tax3-mode-info{
display:flex;flex-direction:column;
gap:2px;
text-align:center;
}
.tax3-mode-label{
font-family:var(--font);
font-size:12px;
font-weight:900;
letter-spacing:-.2px;
line-height:1.1;
}
.tax3-mode-desc{
font-size:9.5px;
opacity:.75;
font-weight:700;
line-height:1.4;
}
.tax3-mode-check{
position:absolute;
top:6px;right:6px;
font-size:11px;
font-weight:900;
width:18px;height:18px;
border-radius:50%;
background:currentColor;
color:#000;
display:flex;align-items:center;justify-content:center;
}
/* POS rates section */
.tax3-pos-rates{
margin-top:14px;
padding:11px 13px;
background:rgba(168,85,247,.06);
border:1px solid rgba(192,132,252,.2);
border-radius:11px;
}
.tax3-rates-title{
font-family:var(--font);
font-size:11px;
font-weight:900;
color:#c084fc;
margin-bottom:7px;
letter-spacing:-.2px;
}
.tax3-rates-list{
display:flex;flex-wrap:wrap;gap:6px;
}
.tax3-rate-row{
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
border-radius:8px;
font-size:10.5px;
}
.tax3-rate-name{
font-family:'Cairo',sans-serif;
font-weight:800;
color:var(--t2);
}
.tax3-rate-val{
font-family:var(--font);
font-weight:900;
color:#c084fc;
}
.tax3-rates-foot{
margin-top:7px;
font-size:10px;
color:var(--t3);
font-weight:700;
}
/* Impact summary in hero */
.ftax-impact{
margin-top:12px;
padding:11px 13px;
background:linear-gradient(155deg, rgba(0,0,0,.25), rgba(0,0,0,.15));
border:1px solid rgba(255,255,255,.05);
border-radius:12px;
display:flex;flex-direction:column;
gap:6px;
position:relative;z-index:1;
}
.ftax-impact-row{
display:flex;align-items:center;justify-content:space-between;
gap:10px;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:800;
}
.ftax-impact-lbl{color:var(--t2);}
.ftax-impact-val{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
letter-spacing:-.3px;
}
/* Info card */
.tax3-info-card{
display:flex;align-items:flex-start;gap:11px;
padding:13px 15px;
background:linear-gradient(155deg, rgba(96,165,250,.06), rgba(96,165,250,.02));
border:1px solid rgba(96,165,250,.22);
border-radius:14px;
margin-top:12px;
}
.tax3-info-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:rgba(96,165,250,.15);
border:1px solid rgba(96,165,250,.3);
border-radius:10px;
font-size:17px;
flex-shrink:0;
}
.tax3-info-card strong{
font-family:var(--font);
color:#93c5fd;
font-size:13px;
}
.tax3-info-rows{
margin-top:8px;
display:flex;flex-direction:column;
gap:5px;
}
.tax3-info-row{
font-size:11px;
color:var(--t2);
font-weight:700;
line-height:1.7;
}
@media(max-width:560px){
.tax3-modes{grid-template-columns:1fr;gap:5px;}
.tax3-mode-btn{flex-direction:row;justify-content:flex-start;min-height:auto;padding:10px 12px;}
.tax3-mode-info{flex-direction:row;align-items:center;gap:6px;text-align:right;}
.tax3-mode-desc{font-size:10px;}
.tax3-h{flex-wrap:wrap;}
.tax3-current-state{width:100%;text-align:center;}
}
/* HERO */
.ftax-hero{
position:relative;
background:linear-gradient(155deg, rgba(245,158,11,.12), rgba(201,168,76,.06));
border:1.5px solid rgba(251,191,36,.4);
border-radius:18px;
padding:18px 20px;
margin-bottom:14px;
overflow:hidden;
box-shadow:0 14px 36px rgba(245,158,11,.18), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.ftax-hero-orb{
position:absolute;
border-radius:50%;
filter:blur(70px);
pointer-events:none;
animation:ftaxOrbit 16s ease-in-out infinite;
}
.ftax-orb-1{
width:300px;height:300px;
background:radial-gradient(circle, rgba(251,191,36,.32), transparent 65%);
top:-120px;right:-90px;
}
.ftax-orb-2{
width:220px;height:220px;
background:radial-gradient(circle, rgba(201,168,76,.28), transparent 65%);
bottom:-80px;left:-50px;
animation-delay:-8s;
}
@keyframes ftaxOrbit{
0%,100%{transform:translate(0,0) scale(1); opacity:.85;}
50%{transform:translate(-20px,15px) scale(1.1); opacity:1;}
}
.ftax-hero-inner{
position:relative;z-index:1;
display:flex;align-items:center;gap:13px;
margin-bottom:16px;
}
.ftax-hero-ico-wrap{
position:relative;
flex-shrink:0;
}
.ftax-hero-ico{
width:54px;height:54px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #F59E0B, #d97706);
color:#fff;
border-radius:15px;
font-size:26px;
box-shadow:0 10px 24px rgba(245,158,11,.45);
position:relative;z-index:2;
}
.ftax-hero-glow{
position:absolute;
inset:-8px;
background:radial-gradient(circle, rgba(245,158,11,.4), transparent 70%);
filter:blur(10px);
z-index:1;
animation:ftaxGlow 3s ease-in-out infinite;
}
@keyframes ftaxGlow{
0%,100%{opacity:.65; transform:scale(1);}
50%{opacity:.95; transform:scale(1.15);}
}
.ftax-hero-title{
font-family:var(--font);
font-size:18px;
font-weight:900;
letter-spacing:-.4px;
background:linear-gradient(135deg, #fbbf24, var(--g2));
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:ftaxShimmer 6s ease-in-out infinite;
}
@keyframes ftaxShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.ftax-hero-sub{
font-size:11.5px;
color:var(--t3);
margin-top:3px;
font-weight:700;
}
/* Status grid */
.ftax-status-grid{
position:relative;z-index:1;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:8px;
}
.ftax-status{
display:flex;align-items:center;gap:8px;
background:rgba(0,0,0,.25);
border:1px solid var(--bdr);
border-radius:12px;
padding:9px 11px;
transition:all .25s;
}
.ftax-status.is-on{
border-color:rgba(74,222,128,.4);
background:linear-gradient(155deg, rgba(34,197,94,.1), rgba(0,0,0,.22));
}
.ftax-status.is-off{
border-color:rgba(148,163,184,.25);
opacity:.7;
}
.ftax-status-ico{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.06);
border-radius:9px;
font-size:15px;
flex-shrink:0;
}
.ftax-status.is-on .ftax-status-ico{
background:rgba(74,222,128,.18);
color:#4ade80;
}
.ftax-status-info{flex:1;min-width:0;}
.ftax-status-lbl{
font-size:10px;
color:var(--t3);
font-weight:800;
margin-bottom:1px;
letter-spacing:.1px;
}
.ftax-status-val{
font-family:var(--font);
font-size:12px;
font-weight:900;
color:var(--t1);
}
.ftax-status.is-on .ftax-status-val{color:#4ade80;}
.ftax-status.is-off .ftax-status-val{color:var(--t3);}
.ftax-status-amt{
font-family:var(--font);
font-size:11.5px;
font-weight:900;
color:var(--g2);
letter-spacing:-.2px;
white-space:nowrap;
}
.ftax-status-amt span{font-size:9px;opacity:.6;margin-right:2px;}
/* SECTIONS */
.ftax-section{
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1px solid var(--bdr);
border-radius:16px;
overflow:hidden;
margin-bottom:14px;
box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.ftax-section-h{
display:flex;align-items:center;gap:11px;
padding:14px 16px;
border-bottom:1px solid var(--bdr);
background:linear-gradient(90deg, rgba(255,255,255,.025), transparent);
}
.ftax-section-ico{
width:38px;height:38px;
border-radius:11px;
display:flex;align-items:center;justify-content:center;
color:#fff;
font-size:17px;
flex-shrink:0;
box-shadow:0 5px 14px rgba(0,0,0,.3);
}
.ftax-section-title{
font-family:var(--font);
font-size:14.5px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
}
.ftax-section-sub{
font-size:11px;
color:var(--t3);
margin-top:2px;
font-weight:700;
}
.ftax-mode-pill{
padding:4px 12px;
border-radius:18px;
font-family:'Cairo',sans-serif;
font-size:10.5px;
font-weight:900;
letter-spacing:.2px;
}
.ftax-mode-pill.is-full{
background:rgba(74,222,128,.15);
border:1px solid rgba(74,222,128,.4);
color:#4ade80;
}
.ftax-mode-pill.is-partial{
background:rgba(251,191,36,.15);
border:1px solid rgba(251,191,36,.4);
color:#fbbf24;
}
.ftax-mode-pill.is-off{
background:rgba(148,163,184,.1);
border:1px solid rgba(148,163,184,.25);
color:var(--t3);
}
/* TOGGLES GRID */
.ftax-toggles-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:10px;
padding:14px 14px 6px;
}
.ftax-toggle{
position:relative;
background:rgba(0,0,0,.25);
border:1.5px solid var(--bdr);
border-radius:14px;
padding:0;
overflow:hidden;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.ftax-toggle.is-on.ftax-toggle-cash{
border-color:rgba(74,222,128,.5);
background:linear-gradient(155deg, rgba(34,197,94,.1), rgba(0,0,0,.25));
box-shadow:0 8px 22px rgba(34,197,94,.18);
}
.ftax-toggle.is-on.ftax-toggle-bank{
border-color:rgba(96,165,250,.5);
background:linear-gradient(155deg, rgba(59,130,246,.1), rgba(0,0,0,.25));
box-shadow:0 8px 22px rgba(59,130,246,.18);
}
.ftax-toggle.is-on.ftax-toggle-pos{
border-color:rgba(74,222,128,.5);
background:linear-gradient(155deg, rgba(34,197,94,.1), rgba(0,0,0,.25));
box-shadow:0 8px 22px rgba(34,197,94,.15);
margin:14px;
}
.ftax-toggle-pos{margin:14px;}
.ftax-toggle-shine{
position:absolute;
inset:0;
background:linear-gradient(135deg, transparent 40%, rgba(255,255,255,.05) 50%, transparent 60%);
pointer-events:none;
opacity:0;
transition:opacity .3s;
}
.ftax-toggle.is-on .ftax-toggle-shine{opacity:1;}
.ftax-toggle-h{
display:flex;align-items:center;gap:10px;
padding:12px 14px;
border-bottom:1px solid var(--bdr);
background:linear-gradient(155deg, rgba(255,255,255,.02), transparent);
}
.ftax-toggle-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.06);
border:1px solid var(--bdr);
border-radius:10px;
font-size:17px;
flex-shrink:0;
}
.ftax-toggle.is-on.ftax-toggle-cash .ftax-toggle-ico{
background:rgba(74,222,128,.2);
border-color:rgba(74,222,128,.4);
color:#4ade80;
}
.ftax-toggle.is-on.ftax-toggle-bank .ftax-toggle-ico{
background:rgba(96,165,250,.2);
border-color:rgba(96,165,250,.4);
color:#60A5FA;
}
.ftax-toggle.is-on.ftax-toggle-pos .ftax-toggle-ico{
background:rgba(74,222,128,.2);
border-color:rgba(74,222,128,.4);
color:#4ade80;
}
.ftax-toggle-name{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.ftax-toggle-sub{
font-size:10.5px;
color:var(--t3);
margin-top:2px;
font-weight:700;
line-height:1.5;
}
.ftax-toggle-body{
padding:12px 14px;
position:relative;z-index:1;
}
.ftax-toggle-amt-row{
display:flex;align-items:center;justify-content:space-between;
padding:8px 11px;
background:rgba(0,0,0,.2);
border-radius:9px;
margin-bottom:9px;
}
.ftax-toggle-amt-lbl{
font-size:11px;
color:var(--t3);
font-weight:800;
}
.ftax-toggle-amt-val{
font-family:var(--font);
font-size:14.5px;
font-weight:900;
color:var(--g2);
letter-spacing:-.3px;
}
.ftax-toggle-effect{
padding:7px 11px;
border-radius:9px;
margin-bottom:10px;
font-size:11px;
font-weight:800;
text-align:center;
line-height:1.5;
}
.ftax-effect-on{
display:block;
background:rgba(74,222,128,.1);
border:1px solid rgba(74,222,128,.3);
color:#4ade80;
padding:7px 10px;
border-radius:9px;
}
.ftax-effect-off{
display:block;
background:rgba(148,163,184,.08);
border:1px dashed rgba(148,163,184,.3);
color:var(--t3);
padding:7px 10px;
border-radius:9px;
}
/* Custom luxurious switch */
.ftax-switch{
display:flex;align-items:center;gap:10px;
cursor:pointer;
padding:10px 12px;
background:rgba(0,0,0,.22);
border:1px solid var(--bdr);
border-radius:11px;
transition:all .25s;
user-select:none;
}
.ftax-switch:hover{
background:rgba(0,0,0,.32);
border-color:var(--bdr2);
}
.ftax-switch input{position:absolute; opacity:0; pointer-events:none;}
.ftax-switch-slider{
position:relative;
width:44px;height:24px;
background:linear-gradient(135deg, #1a1f2e, #0f1419);
border:1px solid var(--bdr);
border-radius:14px;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
flex-shrink:0;
}
.ftax-switch-slider::before{
content:'';
position:absolute;
top:1.5px;
right:1.5px;
width:19px;height:19px;
background:linear-gradient(135deg, #cbd5e1, #94a3b8);
border-radius:50%;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.ftax-switch input:checked + .ftax-switch-slider{
background:linear-gradient(135deg, #22C55E, #15803d);
border-color:#4ade80;
box-shadow:0 0 12px rgba(74,222,128,.4), 0 0 0 1px rgba(74,222,128,.3) inset;
}
.ftax-switch input:checked + .ftax-switch-slider::before{
right:22px;
background:linear-gradient(135deg, #fff, #f0fdf4);
}
.ftax-switch-lbl{
flex:1;
font-family:var(--font);
font-size:12.5px;
font-weight:900;
color:var(--t2);
letter-spacing:-.2px;
}
.ftax-switch input:checked ~ .ftax-switch-lbl{color:#4ade80;}
/* INFO CARD */
.ftax-info-card{
display:flex;align-items:flex-start;gap:10px;
margin:11px 14px 14px;
padding:11px 13px;
background:linear-gradient(155deg, rgba(96,165,250,.07), rgba(96,165,250,.02));
border:1px solid rgba(96,165,250,.25);
border-radius:11px;
font-size:11.5px;
color:#93c5fd;
line-height:1.65;
}
.ftax-info-ico{
font-size:18px;
flex-shrink:0;
}
.ftax-info-card strong{color:#bfdbfe; font-weight:900;}
/* POS CONFIG */
.ftax-pos-config{
padding:14px;
border-top:1px dashed var(--bdr);
background:linear-gradient(180deg, rgba(255,255,255,.01), transparent);
}
.ftax-pos-config-h{
display:flex;align-items:center;gap:11px;
margin-bottom:13px;
padding-bottom:10px;
border-bottom:1px dashed var(--bdr);
}
.ftax-pos-config-ico{
font-size:18px;
}
.ftax-pos-config-title{
font-family:var(--font);
font-size:12.5px;
font-weight:900;
color:#60A5FA;
letter-spacing:-.2px;
}
.ftax-pos-config-sub{
font-size:10.5px;
color:var(--t3);
margin-top:2px;
font-weight:700;
}
.ftax-rate-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:9px;
margin-bottom:13px;
}
.ftax-rate-cell{
background:rgba(0,0,0,.25);
border:1.5px solid var(--bdr);
border-radius:12px;
padding:10px;
transition:all .25s;
}
.ftax-rate-mada{border-color:rgba(74,222,128,.3);}
.ftax-rate-visa{border-color:rgba(96,165,250,.3);}
.ftax-rate-mc{border-color:rgba(251,146,60,.3);}
.ftax-rate-cell:focus-within{
background:rgba(0,0,0,.35);
transform:translateY(-1px);
}
.ftax-rate-mada:focus-within{border-color:#4ade80; box-shadow:0 4px 14px rgba(74,222,128,.2);}
.ftax-rate-visa:focus-within{border-color:#60A5FA; box-shadow:0 4px 14px rgba(96,165,250,.2);}
.ftax-rate-mc:focus-within{border-color:#fb923c; box-shadow:0 4px 14px rgba(251,146,60,.2);}
.ftax-rate-h{
display:flex;align-items:center;gap:6px;
margin-bottom:8px;
}
.ftax-rate-ico{font-size:11px;}
.ftax-rate-name{
font-family:var(--font);
font-size:12px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.ftax-rate-input-wrap{
position:relative;
display:flex;align-items:center;
background:rgba(0,0,0,.3);
border:1px solid var(--bdr);
border-radius:9px;
overflow:hidden;
}
.ftax-rate-input{
flex:1;
background:transparent;
border:none;
color:var(--t1);
padding:8px 10px;
font-family:var(--font);
font-size:14px;
font-weight:900;
text-align:left;
letter-spacing:-.3px;
outline:none;
}
.ftax-rate-input::-webkit-outer-spin-button,
.ftax-rate-input::-webkit-inner-spin-button{
-webkit-appearance:none;margin:0;
}
.ftax-rate-input{-moz-appearance:textfield;}
.ftax-rate-pct{
padding:8px 11px;
background:rgba(255,255,255,.04);
border-right:1px solid var(--bdr);
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t3);
}
.ftax-rate-default{
font-size:9.5px;
color:var(--t4);
margin-top:6px;
text-align:center;
font-weight:700;
}
.ftax-bank-row{
display:flex;flex-direction:column;
gap:5px;
margin-bottom:12px;
}
.ftax-bank-lbl{
font-family:'Cairo',sans-serif;
font-size:11px;
font-weight:800;
color:var(--t2);
}
.ftax-bank-input{
background:rgba(0,0,0,.3);
border:1px solid var(--bdr);
border-radius:9px;
padding:9px 12px;
color:var(--t1);
font-family:'Cairo',sans-serif;
font-size:12px;
font-weight:700;
outline:none;
transition:all .2s;
}
.ftax-bank-input:focus{
border-color:var(--g2);
background:rgba(0,0,0,.4);
box-shadow:0 0 0 3px rgba(201,168,76,.1);
}
.ftax-save-btn{
width:100%;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border:none;
padding:12px;
border-radius:11px;
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:900;
cursor:pointer;
transition:all .25s;
box-shadow:0 8px 20px rgba(201,168,76,.4);
letter-spacing:-.2px;
}
.ftax-save-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 28px rgba(201,168,76,.55);
}
@media(max-width:560px){
.ftax-status-grid{grid-template-columns:1fr;}
.ftax-toggles-grid{grid-template-columns:1fr;}
.ftax-rate-grid{grid-template-columns:1fr;}
.ftax-hero-title{font-size:16px;}
}
/* ════════ Financial Summary — Luxurious Redesign (fs-*) ════════ */
.mfh-hero{
position:relative;
background:linear-gradient(155deg,
rgba(34,197,94,.10) 0%,
rgba(201,168,76,.08) 50%,
rgba(34,197,94,.06) 100%);
border:1.5px solid rgba(74,222,128,.4);
border-radius:20px;
padding:22px 20px;
margin-bottom:14px;
overflow:hidden;
box-shadow:0 18px 44px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.mfh-hero.is-loss{
background:linear-gradient(155deg,
rgba(245,158,11,.10) 0%,
rgba(201,168,76,.08) 50%,
rgba(245,158,11,.06) 100%);
border-color:rgba(251,191,36,.4);
box-shadow:0 18px 44px rgba(245,158,11,.15), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.mfh-hero.is-deficit{
background:linear-gradient(155deg,
rgba(239,68,68,.10) 0%,
rgba(245,158,11,.06) 50%,
rgba(239,68,68,.06) 100%);
border-color:rgba(248,113,113,.4);
box-shadow:0 18px 44px rgba(239,68,68,.18), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.mfh-hero.is-empty{
opacity:.7;
text-align:center;
}
.mfh-orb{
position:absolute;
border-radius:50%;
filter:blur(75px);
pointer-events:none;
animation:mfhOrbit 18s ease-in-out infinite;
}
.mfh-orb-1{
width:340px;height:340px;
background:radial-gradient(circle, rgba(74,222,128,.32), transparent 65%);
top:-130px;right:-100px;
}
.mfh-orb-2{
width:280px;height:280px;
background:radial-gradient(circle, rgba(201,168,76,.3), transparent 65%);
bottom:-110px;left:-70px;
animation-delay:-6s;
}
.mfh-orb-3{
width:200px;height:200px;
background:radial-gradient(circle, rgba(96,165,250,.22), transparent 65%);
top:38%;left:35%;
animation-delay:-11s;
}
.mfh-hero.is-loss .mfh-orb-1{background:radial-gradient(circle, rgba(251,191,36,.32), transparent 65%);}
.mfh-hero.is-loss .mfh-orb-2{background:radial-gradient(circle, rgba(245,158,11,.28), transparent 65%);}
.mfh-hero.is-deficit .mfh-orb-1{background:radial-gradient(circle, rgba(248,113,113,.32), transparent 65%);}
.mfh-hero.is-deficit .mfh-orb-2{background:radial-gradient(circle, rgba(251,191,36,.25), transparent 65%);}
@keyframes mfhOrbit{
0%,100%{transform:translate(0,0) scale(1); opacity:.8;}
33%{transform:translate(30px,-25px) scale(1.1); opacity:1;}
66%{transform:translate(-20px,20px) scale(.95); opacity:.85;}
}
.mfh-header{
position:relative;z-index:1;
display:flex;align-items:center;justify-content:space-between;
gap:10px;flex-wrap:wrap;
margin-bottom:18px;
}
.mfh-period-pill{
display:inline-flex;align-items:center;gap:7px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
padding:5px 13px;
border-radius:20px;
font-size:11px;font-weight:800;
color:var(--t2);
font-family:'Cairo',sans-serif;
}
.mfh-period-dot{
width:7px;height:7px;
border-radius:50%;
background:var(--g2);
box-shadow:0 0 8px var(--g2);
animation:mfhPulse 2s ease-in-out infinite;
}
@keyframes mfhPulse{
0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.5);}
50%{box-shadow:0 0 0 6px rgba(201,168,76,0);}
}
.mfh-status{
display:inline-flex;align-items:center;gap:6px;
padding:5px 13px;
border-radius:20px;
font-size:11.5px;font-weight:900;
font-family:'Cairo',sans-serif;
}
.mfh-status.is-profit{
background:rgba(34,197,94,.15);
border:1px solid rgba(74,222,128,.35);
color:#4ade80;
}
.mfh-status.is-loss{
background:rgba(245,158,11,.15);
border:1px solid rgba(251,191,36,.35);
color:#fbbf24;
}
.mfh-status span{font-size:13px;}
.mfh-main{
position:relative;z-index:1;
text-align:center;
padding:14px 0 20px;
}
.mfh-label{
font-family:var(--font);
font-size:12.5px;
font-weight:800;
color:var(--t2);
margin-bottom:10px;
letter-spacing:.4px;
}
.mfh-value{
font-family:var(--font);
font-size:52px;
font-weight:900;
letter-spacing:-1.8px;
line-height:1;
margin-bottom:10px;
background-image:linear-gradient(135deg, #fff 0%, #4ade80 50%, #22C55E 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:mfhShimmer 7s ease-in-out infinite;
}
.mfh-hero.is-loss .mfh-value{
background-image:linear-gradient(135deg, #fff 0%, #fbbf24 50%, #F59E0B 100%);
}
.mfh-hero.is-deficit .mfh-value{
background-image:linear-gradient(135deg, #fff 0%, #f87171 50%, #ef4444 100%);
}
@keyframes mfhShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.mfh-unit{
font-size:22px;
opacity:.7;
font-weight:700;
margin-right:7px;
-webkit-text-fill-color:initial;
background:none;
color:var(--t2);
}
.mfh-sub{
font-size:12px;
color:var(--t3);
font-weight:700;
}
/* P/L cells */
.mfh-pl{
position:relative;z-index:1;
display:grid;
grid-template-columns:repeat(3,1fr);
gap:8px;
margin-top:6px;
padding-top:14px;
border-top:1px dashed rgba(255,255,255,.12);
}
.mfh-pl-cell{
display:flex;align-items:center;gap:9px;
background:rgba(0,0,0,.25);
border:1px solid var(--bdr);
border-radius:12px;
padding:10px 12px;
}
.mfh-pl-in{
border-color:rgba(74,222,128,.3);
background:linear-gradient(155deg, rgba(34,197,94,.08), rgba(0,0,0,.2));
}
.mfh-pl-out{
border-color:rgba(248,113,113,.3);
background:linear-gradient(155deg, rgba(239,68,68,.08), rgba(0,0,0,.2));
}
.mfh-pl-net.is-profit{
border-color:rgba(74,222,128,.4);
background:linear-gradient(155deg, rgba(34,197,94,.12), rgba(0,0,0,.2));
}
.mfh-pl-net.is-loss{
border-color:rgba(251,191,36,.4);
background:linear-gradient(155deg, rgba(245,158,11,.12), rgba(0,0,0,.2));
}
.mfh-pl-ico{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.06);
border-radius:9px;
font-size:15px;
font-weight:900;
flex-shrink:0;
}
.mfh-pl-in .mfh-pl-ico{background:rgba(74,222,128,.18); color:#4ade80;}
.mfh-pl-out .mfh-pl-ico{background:rgba(248,113,113,.18); color:#f87171;}
.mfh-pl-net.is-profit .mfh-pl-ico{background:rgba(74,222,128,.18); color:#4ade80;}
.mfh-pl-net.is-loss .mfh-pl-ico{background:rgba(251,191,36,.18); color:#fbbf24;}
.mfh-pl-info{flex:1;min-width:0;}
.mfh-pl-lbl{
font-size:10px;
color:var(--t3);
font-weight:800;
margin-bottom:2px;
letter-spacing:.2px;
}
.mfh-pl-val{
font-family:var(--font);
font-size:13px;
font-weight:900;
letter-spacing:-.3px;
white-space:nowrap;
}
.mfh-pl-in .mfh-pl-val{color:#4ade80;}
.mfh-pl-out .mfh-pl-val{color:#f87171;}
.mfh-pl-net.is-profit .mfh-pl-val{color:#4ade80;}
.mfh-pl-net.is-loss .mfh-pl-val{color:#fbbf24;}
@media(max-width:560px){
.mfh-hero{padding:18px 16px;}
.mfh-value{font-size:38px;}
.mfh-unit{font-size:17px;}
.mfh-pl{grid-template-columns:1fr;gap:6px;}
.mfh-pl-cell{padding:9px 11px;}
.mfh-pl-val{font-size:12px;}
}
/*
🏦 MONTHLY FUND BOXES (mfb-*) — Cash & Bank for this month
*/
.mfb-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
gap:12px;
margin-bottom:14px;
}
.mfb-box{
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid var(--bdr);
border-radius:16px;
padding:0;
overflow:hidden;
box-shadow:0 10px 28px rgba(0,0,0,.3);
transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.mfb-box:hover{
transform:translateY(-2px);
box-shadow:0 14px 36px rgba(0,0,0,.4);
}
.mfb-box-cash{
border-color:rgba(74,222,128,.4);
background:linear-gradient(155deg, rgba(34,197,94,.08), var(--d4));
}
.mfb-box-cash:hover{
border-color:rgba(74,222,128,.6);
box-shadow:0 14px 36px rgba(34,197,94,.18);
}
.mfb-box-bank{
border-color:rgba(96,165,250,.4);
background:linear-gradient(155deg, rgba(59,130,246,.08), var(--d4));
}
.mfb-box-bank:hover{
border-color:rgba(96,165,250,.6);
box-shadow:0 14px 36px rgba(59,130,246,.18);
}
.mfb-box.is-deficit{
border-color:rgba(248,113,113,.45);
background:linear-gradient(155deg, rgba(239,68,68,.08), var(--d4));
}
.mfb-h{
display:flex;align-items:center;gap:11px;
padding:14px 15px;
background:linear-gradient(155deg, rgba(255,255,255,.025), transparent);
border-bottom:1px solid var(--bdr);
}
.mfb-ico{
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
border-radius:12px;
font-size:20px;
flex-shrink:0;
background:rgba(255,255,255,.05);
border:1px solid var(--bdr);
}
.mfb-box-cash .mfb-ico{
background:rgba(74,222,128,.15);
border-color:rgba(74,222,128,.35);
}
.mfb-box-bank .mfb-ico{
background:rgba(96,165,250,.15);
border-color:rgba(96,165,250,.35);
}
.mfb-titles{flex:1;min-width:0;}
.mfb-title{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
display:flex;flex-direction:column;
gap:3px;
align-items:flex-start;
}
/* 🆕 Carried-forward badge — appears when box contains last-month rollover */
.mfb-carry-badge{
display:inline-flex;align-items:center;
padding:2px 8px;
background:linear-gradient(135deg, rgba(168,85,247,.2), rgba(168,85,247,.08));
border:1px solid rgba(192,132,252,.4);
color:#c084fc;
border-radius:14px;
font-family:'Cairo',sans-serif;
font-size:9.5px;
font-weight:900;
letter-spacing:-.1px;
white-space:nowrap;
animation:mfbCarryGlow 2.5s ease-in-out infinite;
}
@keyframes mfbCarryGlow{
0%,100%{box-shadow:0 0 0 0 rgba(192,132,252,.25);}
50%{box-shadow:0 0 12px 0 rgba(192,132,252,.35);}
}
.mfb-box.has-carry{
border-color:rgba(192,132,252,.35) !important;
}
.mfb-sub{
font-size:10.5px;
color:var(--t3);
margin-top:2px;
font-weight:700;
}
.mfb-balance{text-align:left;flex-shrink:0;}
.mfb-balance-lbl{
font-size:9.5px;
color:var(--t3);
font-weight:800;
margin-bottom:3px;
letter-spacing:.2px;
}
.mfb-balance-val{
font-family:var(--font);
font-size:19px;
font-weight:900;
letter-spacing:-.5px;
line-height:1;
}
.mfb-balance-val span{
font-size:11px;opacity:.6;margin-right:3px;font-weight:700;
}
.mfb-flow{
padding:12px;
display:flex;flex-direction:column;
gap:4px;
}
.mfb-row{
display:flex;align-items:center;gap:8px;
padding:7px 10px;
background:rgba(0,0,0,.18);
border:1px solid var(--bdr);
border-radius:9px;
font-size:11.5px;
transition:all .2s;
}
.mfb-row:hover{
background:rgba(0,0,0,.28);
}
.mfb-row-ico{
width:24px;height:24px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.05);
border-radius:7px;
font-size:12px;
font-weight:900;
flex-shrink:0;
}
.mfb-row-lbl{
flex:1;
font-weight:700;
color:var(--t2);
font-family:'Cairo',sans-serif;
font-size:11.5px;
line-height:1.4;
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient:vertical;
min-width:0;
}
.mfb-row-val{
font-family:var(--font);
font-size:12.5px;
font-weight:900;
letter-spacing:-.2px;
white-space:nowrap;
}
.mfb-in{
border-color:rgba(74,222,128,.2);
background:linear-gradient(155deg, rgba(34,197,94,.05), rgba(0,0,0,.18));
}
.mfb-in .mfb-row-ico{
background:rgba(74,222,128,.15);
color:#4ade80;
}
.mfb-in .mfb-row-val{color:#4ade80;}
.mfb-out{
border-color:rgba(248,113,113,.2);
background:linear-gradient(155deg, rgba(239,68,68,.05), rgba(0,0,0,.18));
}
.mfb-out .mfb-row-ico{
background:rgba(248,113,113,.15);
color:#f87171;
}
.mfb-out .mfb-row-val{color:#f87171;}
/* Special: carryover row — purple gradient (the "magic" row) */
.mfb-carry{
background:linear-gradient(155deg, rgba(168,85,247,.1), rgba(168,85,247,.02)) !important;
border-color:rgba(168,85,247,.35) !important;
position:relative;
overflow:hidden;
}
.mfb-carry::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg, transparent, rgba(168,85,247,.08), transparent);
animation:mfbCarryShine 3s ease-in-out infinite;
pointer-events:none;
}
@keyframes mfbCarryShine{
0%,100%{transform:translateX(-100%);}
50%{transform:translateX(100%);}
}
.mfb-carry .mfb-row-ico{
background:rgba(168,85,247,.18) !important;
color:#c084fc !important;
font-size:14px;
}
.mfb-carry .mfb-row-lbl{color:#c084fc !important;font-weight:900;}
.mfb-carry .mfb-row-val{color:#c084fc !important;}
/* Empty state */
.mfb-empty{
padding:18px 12px;
text-align:center;
background:rgba(148,163,184,.04);
border:1px dashed var(--bdr);
border-radius:10px;
color:var(--t4);
font-size:11.5px;
font-weight:700;
letter-spacing:-.1px;
margin:6px 0;
}
/* Result row */
.mfb-result{
margin-top:4px;
padding:9px 11px;
background:linear-gradient(155deg, rgba(201,168,76,.12), rgba(201,168,76,.02));
border:1.5px solid rgba(201,168,76,.4);
}
.mfb-result .mfb-row-ico{
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
font-size:14px;
}
.mfb-result .mfb-row-lbl{
color:var(--g2);
font-weight:900;
font-size:12px;
}
.mfb-result .mfb-row-val{
font-size:14px;
}
@media(max-width:560px){
.mfb-grid{grid-template-columns:1fr;}
.mfb-h{padding:12px 13px;}
.mfb-balance-val{font-size:16px;}
.mfb-row{padding:6px 9px;font-size:11px;}
}
/*
🔄 CARRYOVER CTA (mfc-*)
*/
.mfc-cta{
position:relative;
background:linear-gradient(155deg, rgba(201,168,76,.12), rgba(168,85,247,.06));
border:1.5px solid rgba(201,168,76,.4);
border-radius:16px;
padding:14px;
margin-bottom:14px;
overflow:hidden;
box-shadow:0 10px 28px rgba(201,168,76,.18);
}
.mfc-cta.is-closed{
background:linear-gradient(155deg, rgba(168,85,247,.12), rgba(168,85,247,.04));
border-color:rgba(192,132,252,.45);
box-shadow:0 10px 28px rgba(168,85,247,.18);
}
.mfc-cta-bg{
position:absolute;
inset:0;
background:radial-gradient(circle at top right, rgba(201,168,76,.2), transparent 60%);
pointer-events:none;
}
.mfc-cta.is-closed .mfc-cta-bg{
background:radial-gradient(circle at top right, rgba(168,85,247,.22), transparent 60%);
}
.mfc-cta-inner{
position:relative;z-index:1;
display:flex;align-items:center;gap:12px;
}
.mfc-cta-ico{
width:46px;height:46px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border-radius:13px;
font-size:22px;
flex-shrink:0;
box-shadow:0 6px 18px rgba(201,168,76,.4);
}
.mfc-cta.is-closed .mfc-cta-ico{
background:linear-gradient(135deg, #a855f7, #7c3aed);
color:#fff;
box-shadow:0 6px 18px rgba(168,85,247,.4);
}
.mfc-cta-body{flex:1;min-width:0;}
.mfc-cta-title{
font-family:var(--font);
font-size:14px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
margin-bottom:3px;
}
.mfc-cta-sub{
font-size:11px;
color:var(--t3);
line-height:1.6;
font-weight:700;
}
.mfc-cta-btn{
display:flex;align-items:center;gap:6px;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border:none;
padding:11px 16px;
border-radius:11px;
font-family:'Cairo',sans-serif;
font-size:12px;
font-weight:900;
cursor:pointer;
transition:all .2s;
box-shadow:0 6px 18px rgba(201,168,76,.4);
flex-shrink:0;
letter-spacing:-.1px;
}
.mfc-cta-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 26px rgba(201,168,76,.55);
}
.mfc-cta-btn-secondary{
background:transparent;
color:#c084fc;
border:1px dashed rgba(192,132,252,.4);
box-shadow:none;
}
.mfc-cta-btn-secondary:hover{
background:rgba(168,85,247,.12);
border-style:solid;
box-shadow:none;
}
@media(max-width:560px){
.mfc-cta-inner{flex-wrap:wrap;}
.mfc-cta-btn{width:100%;justify-content:center;margin-top:5px;}
}
/* ════════ MONTH NAVIGATION — Luxurious switcher (fm-*) ════════ */
.fm-nav-wrap{
margin-bottom:16px;
display:flex;flex-direction:column;
gap:9px;
}
/* Big nav card */
.fm-nav-card{
position:relative;
display:flex;align-items:stretch;justify-content:space-between;gap:10px;
background:linear-gradient(155deg,
rgba(201,168,76,.08) 0%,
rgba(34,197,94,.06) 50%,
rgba(59,130,246,.05) 100%);
border:1.5px solid rgba(201,168,76,.35);
border-radius:18px;
padding:12px 13px;
overflow:hidden;
min-height:88px;
box-shadow:0 10px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.fm-nav-card.is-future{
background:linear-gradient(155deg, rgba(96,165,250,.08), rgba(168,85,247,.04));
border-color:rgba(96,165,250,.35);
}
.fm-nav-card.is-past{
background:linear-gradient(155deg, rgba(148,163,184,.08), rgba(100,116,139,.04));
border-color:rgba(148,163,184,.3);
}
.fm-nav-card.is-archived{
background:linear-gradient(155deg, rgba(168,85,247,.1), rgba(168,85,247,.04));
border-color:rgba(168,85,247,.4);
box-shadow:0 10px 28px rgba(168,85,247,.2), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.fm-nav-orb{
position:absolute;
border-radius:50%;
filter:blur(55px);
pointer-events:none;
animation:fmOrbit 14s ease-in-out infinite;
}
.fm-orb-1{
width:180px;height:180px;
background:radial-gradient(circle, rgba(201,168,76,.35), transparent 70%);
top:-70px;right:-60px;
}
.fm-orb-2{
width:140px;height:140px;
background:radial-gradient(circle, rgba(34,197,94,.25), transparent 70%);
bottom:-50px;left:-40px;
animation-delay:-7s;
}
.fm-nav-card.is-archived .fm-orb-1{background:radial-gradient(circle, rgba(168,85,247,.4), transparent 70%);}
.fm-nav-card.is-archived .fm-orb-2{background:radial-gradient(circle, rgba(192,132,252,.3), transparent 70%);}
.fm-nav-card.is-future .fm-orb-1{background:radial-gradient(circle, rgba(96,165,250,.35), transparent 70%);}
.fm-nav-card.is-past .fm-orb-1{background:radial-gradient(circle, rgba(148,163,184,.3), transparent 70%);}
@keyframes fmOrbit{
0%,100%{transform:translate(0,0) scale(1); opacity:.7;}
50%{transform:translate(-15px,15px) scale(1.1); opacity:.95;}
}
/* Arrow buttons */
.fm-nav-arrow{
position:relative;z-index:2;
display:flex;align-items:center;gap:6px;
background:rgba(0,0,0,.28);
border:1px solid var(--bdr);
color:var(--t2);
padding:0 13px;
border-radius:12px;
cursor:pointer;
font-family:'Cairo',sans-serif;
font-size:11px;
font-weight:800;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
min-width:78px;
flex-shrink:0;
}
.fm-nav-arrow:hover{
background:rgba(201,168,76,.12);
border-color:rgba(201,168,76,.4);
color:var(--g2);
transform:translateY(-1px);
}
.fm-nav-arrow:hover svg{
transform:translateX(-2px);
}
.fm-nav-prev:hover svg{transform:translateX(2px);}
.fm-nav-arrow svg{
transition:transform .25s;
opacity:.7;
}
.fm-arrow-label{
font-family:var(--font);
letter-spacing:-.2px;
opacity:.85;
font-size:10.5px;
}
/* Center (active month) */
.fm-nav-center{
flex:1;
position:relative;z-index:2;
display:flex;flex-direction:column;align-items:center;justify-content:center;
cursor:pointer;
padding:0 8px;
text-align:center;
-webkit-tap-highlight-color:transparent;
}
.fm-nav-status{margin-bottom:4px;}
.fm-status-badge{
display:inline-flex;align-items:center;gap:5px;
padding:3px 10px;
border-radius:20px;
font-size:9.5px;
font-weight:900;
font-family:'Cairo',sans-serif;
letter-spacing:.2px;
}
.fm-status-current{
background:rgba(34,197,94,.15);
border:1px solid rgba(74,222,128,.35);
color:#4ade80;
}
.fm-status-future{
background:rgba(96,165,250,.15);
border:1px solid rgba(96,165,250,.35);
color:#93c5fd;
}
.fm-status-past{
background:rgba(148,163,184,.15);
border:1px solid rgba(148,163,184,.35);
color:#cbd5e1;
}
.fm-status-archived{
background:rgba(168,85,247,.15);
border:1px solid rgba(192,132,252,.4);
color:#c084fc;
}
.fm-pulse-dot{
width:6px;height:6px;
background:#4ade80;
border-radius:50%;
box-shadow:0 0 8px #4ade80;
animation:fmPulseDot 1.5s ease-in-out infinite;
}
@keyframes fmPulseDot{
0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.6);}
50%{box-shadow:0 0 0 4px rgba(74,222,128,0);}
}
.fm-nav-month{
font-family:var(--font);
font-size:22px;
font-weight:900;
letter-spacing:-.6px;
line-height:1;
background:linear-gradient(135deg, var(--g2), #fde047, var(--g2));
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:fmShimmer 6s ease-in-out infinite;
}
.fm-nav-card.is-future .fm-nav-month{
background:linear-gradient(135deg, #60A5FA, #93c5fd, #60A5FA);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.fm-nav-card.is-past .fm-nav-month{
background:linear-gradient(135deg, #cbd5e1, #94a3b8, #cbd5e1);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
.fm-nav-card.is-archived .fm-nav-month{
background:linear-gradient(135deg, #c084fc, #e9d5ff, #c084fc);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
}
@keyframes fmShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.fm-nav-year{
font-family:var(--font);
font-size:12px;
font-weight:800;
color:var(--t3);
letter-spacing:.5px;
margin-top:2px;
}
.fm-nav-hint{
font-size:9.5px;
color:var(--t4);
margin-top:4px;
font-weight:700;
}
/* Quick pills */
.fm-pills{
display:flex;
gap:5px;
overflow-x:auto;
padding:2px 0;
scrollbar-width:none;
}
.fm-pills::-webkit-scrollbar{display:none;}
.fm-pill{
flex-shrink:0;
position:relative;
background:var(--d3);
border:1px solid var(--bdr);
color:var(--t2);
padding:6px 12px;
border-radius:10px;
cursor:pointer;
font-family:'Cairo',sans-serif;
font-size:10.5px;
font-weight:800;
letter-spacing:-.1px;
transition:all .2s;
display:flex;align-items:center;gap:5px;
min-width:62px;
justify-content:center;
}
.fm-pill:hover{
background:var(--d4);
border-color:var(--bdr2);
color:var(--t1);
}
.fm-pill.is-active{
background:linear-gradient(155deg, rgba(201,168,76,.18), rgba(201,168,76,.04));
border-color:var(--g2);
color:var(--g2);
box-shadow:0 4px 12px rgba(201,168,76,.2);
}
.fm-pill-name{font-weight:900;}
.fm-pill-year{
font-size:9px;
opacity:.65;
font-family:var(--font);
}
.fm-pill-dot{
width:5px;height:5px;
background:#4ade80;
border-radius:50%;
box-shadow:0 0 5px #4ade80;
}
.fm-pill-all{
background:linear-gradient(155deg, rgba(168,85,247,.08), var(--d3));
border-color:rgba(168,85,247,.25);
color:#c084fc;
}
.fm-pill-all.is-active{
background:linear-gradient(155deg, rgba(168,85,247,.18), rgba(168,85,247,.04));
border-color:#c084fc;
color:#c084fc;
box-shadow:0 4px 12px rgba(168,85,247,.2);
}
/* Return-to-current button */
.fm-return-btn{
background:rgba(34,197,94,.1);
border:1px dashed rgba(74,222,128,.35);
color:#86efac;
padding:8px 14px;
border-radius:10px;
cursor:pointer;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:800;
transition:all .2s;
}
.fm-return-btn:hover{
background:rgba(34,197,94,.15);
border-style:solid;
color:#4ade80;
}
/* Archived banner */
.fm-archived-banner{
display:flex;align-items:center;gap:11px;
background:linear-gradient(155deg, rgba(168,85,247,.12), rgba(168,85,247,.04));
border:1px solid rgba(192,132,252,.35);
border-radius:13px;
padding:11px 14px;
margin-bottom:14px;
}
.fm-arch-ico{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
background:rgba(168,85,247,.2);
border:1px solid rgba(192,132,252,.4);
border-radius:10px;
font-size:18px;
flex-shrink:0;
}
.fm-arch-title{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:#c084fc;
letter-spacing:-.2px;
}
.fm-arch-sub{
font-size:10.5px;
color:var(--t3);
margin-top:3px;
line-height:1.5;
}
/* Close CTA (close month + archive) */
.fm-close-cta{
position:relative;
background:linear-gradient(155deg, rgba(201,168,76,.1), rgba(34,197,94,.06));
border:1.5px solid rgba(201,168,76,.4);
border-radius:16px;
padding:13px;
margin-top:14px;
overflow:hidden;
box-shadow:0 10px 28px rgba(201,168,76,.15);
}
.fm-close-cta.is-archived{
background:linear-gradient(155deg, rgba(168,85,247,.1), rgba(168,85,247,.04));
border-color:rgba(192,132,252,.4);
box-shadow:0 10px 28px rgba(168,85,247,.15);
}
.fm-cta-bg{
position:absolute;
inset:0;
background:radial-gradient(circle at top right, rgba(201,168,76,.18), transparent 60%);
pointer-events:none;
}
.fm-close-cta.is-archived .fm-cta-bg{
background:radial-gradient(circle at top right, rgba(168,85,247,.2), transparent 60%);
}
.fm-cta-inner{
position:relative;z-index:1;
display:flex;align-items:center;gap:12px;
}
.fm-cta-ico{
width:44px;height:44px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border-radius:12px;
font-size:21px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(201,168,76,.4);
}
.fm-cta-ico-archived{
background:linear-gradient(135deg, #a855f7, #7c3aed);
color:#fff;
box-shadow:0 6px 16px rgba(168,85,247,.4);
}
.fm-cta-body{flex:1;min-width:0;}
.fm-cta-title{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
margin-bottom:3px;
}
.fm-cta-sub{
font-size:10.5px;
color:var(--t3);
line-height:1.5;
}
.fm-cta-btn{
display:flex;align-items:center;gap:6px;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border:none;
padding:10px 14px;
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:900;
cursor:pointer;
transition:all .2s;
box-shadow:0 6px 16px rgba(201,168,76,.35);
flex-shrink:0;
letter-spacing:-.1px;
}
.fm-cta-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(201,168,76,.5);
}
.fm-cta-btn:active{transform:translateY(0);}
.fm-cta-btn-secondary{
background:transparent;
color:#c084fc;
border:1px dashed rgba(192,132,252,.4);
box-shadow:none;
}
.fm-cta-btn-secondary:hover{
background:rgba(168,85,247,.1);
border-style:solid;
box-shadow:none;
}
@media(max-width:560px){
.fm-nav-arrow{padding:0 8px;min-width:64px;}
.fm-arrow-label{display:none;}
.fm-nav-month{font-size:19px;}
.fm-cta-inner{flex-wrap:wrap;}
.fm-cta-btn{width:100%;justify-content:center;margin-top:5px;}
}
/* ════════ MONTH PICKER MODAL (mpkr-*) ════════ */
.mpkr-modal{
width:100%;
max-width:480px;
max-height:90vh;
background:linear-gradient(155deg, var(--d1), var(--d2));
border:1px solid var(--bdr);
border-radius:20px;
padding:0;
overflow:hidden;
display:flex;flex-direction:column;
animation:mpkrIn .35s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 24px 60px rgba(0,0,0,.6);
}
@keyframes mpkrIn{
from{opacity:0;transform:scale(.92) translateY(20px);}
to{opacity:1;transform:scale(1) translateY(0);}
}
.mpkr-h{
display:flex;align-items:center;justify-content:space-between;
padding:16px 18px;
border-bottom:1px solid var(--bdr);
background:linear-gradient(155deg, rgba(201,168,76,.06), transparent);
}
.mpkr-h-title{
display:flex;align-items:center;gap:11px;
}
.mpkr-h-ico{
width:40px;height:40px;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border-radius:11px;
display:flex;align-items:center;justify-content:center;
font-size:19px;
box-shadow:0 5px 14px rgba(201,168,76,.35);
}
.mpkr-h-name{
font-family:var(--font);
font-size:15px;
font-weight:900;
color:var(--g2);
}
.mpkr-h-sub{
font-size:10.5px;
color:var(--t3);
margin-top:2px;
}
.mpkr-close{
background:rgba(255,255,255,.05);
border:1px solid var(--bdr);
color:var(--t2);
width:32px;height:32px;
border-radius:10px;
font-size:15px;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .2s;
}
.mpkr-close:hover{
background:rgba(239,68,68,.12);
border-color:rgba(248,113,113,.3);
color:#f87171;
}
.mpkr-year-nav{
display:flex;align-items:center;justify-content:center;gap:14px;
padding:14px 18px;
background:rgba(255,255,255,.02);
border-bottom:1px solid var(--bdr);
}
.mpkr-year-btn{
width:36px;height:36px;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
color:var(--t2);
border-radius:10px;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .2s;
}
.mpkr-year-btn:hover{
background:rgba(201,168,76,.12);
border-color:var(--g2);
color:var(--g2);
}
.mpkr-year-val{
font-family:var(--font);
font-size:24px;
font-weight:900;
color:var(--g2);
letter-spacing:-.5px;
min-width:80px;
text-align:center;
}
.mpkr-grid{
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:8px;
padding:18px;
overflow-y:auto;
flex:1;
}
.mpkr-cell{
position:relative;
background:var(--d3);
border:1.5px solid var(--bdr);
color:var(--t2);
padding:14px 8px 10px;
border-radius:12px;
cursor:pointer;
font-family:'Cairo',sans-serif;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:4px;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
min-height:74px;
}
.mpkr-cell:hover{
background:var(--d4);
border-color:var(--bdr2);
transform:translateY(-2px);
}
.mpkr-cell.is-active{
background:linear-gradient(155deg, rgba(201,168,76,.18), rgba(201,168,76,.04));
border-color:var(--g2);
box-shadow:0 6px 16px rgba(201,168,76,.25);
}
.mpkr-cell.is-current{
border-color:rgba(74,222,128,.4);
background:linear-gradient(155deg, rgba(34,197,94,.08), var(--d3));
}
.mpkr-cell.is-current.is-active{
background:linear-gradient(155deg, rgba(201,168,76,.18), rgba(34,197,94,.06));
}
.mpkr-cell.is-archived{
background:linear-gradient(155deg, rgba(168,85,247,.08), var(--d3));
border-color:rgba(168,85,247,.3);
}
.mpkr-cell.is-future{
opacity:.55;
background:rgba(255,255,255,.02);
}
.mpkr-cell-name{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.mpkr-cell.is-active .mpkr-cell-name{color:var(--g2);}
.mpkr-cell-tag{
font-size:8.5px;
font-weight:900;
padding:2px 7px;
border-radius:6px;
background:rgba(74,222,128,.15);
border:1px solid rgba(74,222,128,.3);
color:#4ade80;
letter-spacing:.2px;
}
.mpkr-cell.is-active .mpkr-cell-tag{
background:rgba(201,168,76,.2);
border-color:rgba(201,168,76,.4);
color:var(--g2);
}
.mpkr-tag-archived{
background:rgba(168,85,247,.15) !important;
border-color:rgba(192,132,252,.35) !important;
color:#c084fc !important;
}
.mpkr-tag-future{
background:rgba(96,165,250,.12) !important;
border-color:rgba(96,165,250,.25) !important;
color:#93c5fd !important;
}
.mpkr-cell-net{
font-family:var(--font);
font-size:10.5px;
font-weight:900;
margin-top:2px;
}
.mpkr-foot{
display:flex;gap:8px;
padding:14px 18px;
border-top:1px solid var(--bdr);
background:rgba(255,255,255,.02);
}
.mpkr-foot-btn{
flex:1;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
color:var(--t2);
padding:11px;
border-radius:11px;
cursor:pointer;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:800;
transition:all .2s;
}
.mpkr-foot-btn:hover{
background:rgba(34,197,94,.12);
border-color:rgba(74,222,128,.3);
color:#86efac;
}
.mpkr-foot-all:hover{
background:rgba(168,85,247,.12);
border-color:rgba(192,132,252,.3);
color:#c084fc;
}
@media(max-width:560px){
.mpkr-grid{grid-template-columns:repeat(3, 1fr); padding:14px; gap:7px;}
.mpkr-cell{min-height:64px; padding:10px 6px 8px;}
.mpkr-cell-name{font-size:12px;}
.mpkr-year-val{font-size:20px;}
}
/* ════════ Financial Summary — Luxurious Redesign (fs-*) ════════ */
/* HERO BLOCK */
.fs-hero{
position:relative;
background:linear-gradient(135deg,
rgba(34,197,94,.10) 0%,
rgba(201,168,76,.08) 50%,
rgba(34,197,94,.06) 100%);
border:1.5px solid rgba(74,222,128,.35);
border-radius:20px;
padding:0;
margin-bottom:14px;
overflow:hidden;
box-shadow:0 16px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.fs-hero.is-loss{
background:linear-gradient(135deg,
rgba(239,68,68,.10) 0%,
rgba(245,158,11,.06) 50%,
rgba(239,68,68,.06) 100%);
border-color:rgba(248,113,113,.4);
box-shadow:0 16px 40px rgba(239,68,68,.15), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.fs-hero.is-covered{
background:linear-gradient(135deg,
rgba(245,158,11,.10) 0%,
rgba(201,168,76,.08) 50%,
rgba(245,158,11,.06) 100%);
border-color:rgba(251,191,36,.4);
box-shadow:0 16px 40px rgba(245,158,11,.15), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.fs-hero-orb{
position:absolute;
border-radius:50%;
filter:blur(70px);
pointer-events:none;
animation:fsOrb 16s ease-in-out infinite;
}
.fs-orb-1{
width:340px;height:340px;
background:radial-gradient(circle, rgba(74,222,128,.32), transparent 65%);
top:-120px;right:-90px;
animation-delay:0s;
}
.fs-orb-2{
width:280px;height:280px;
background:radial-gradient(circle, rgba(201,168,76,.3), transparent 65%);
bottom:-110px;left:-70px;
animation-delay:-5s;
}
.fs-orb-3{
width:200px;height:200px;
background:radial-gradient(circle, rgba(96,165,250,.25), transparent 65%);
top:30%;left:35%;
animation-delay:-10s;
}
.fs-hero.is-loss .fs-orb-1{background:radial-gradient(circle, rgba(248,113,113,.32), transparent 65%);}
.fs-hero.is-loss .fs-orb-2{background:radial-gradient(circle, rgba(251,191,36,.25), transparent 65%);}
.fs-hero.is-covered .fs-orb-1{background:radial-gradient(circle, rgba(251,191,36,.32), transparent 65%);}
.fs-hero.is-covered .fs-orb-2{background:radial-gradient(circle, rgba(201,168,76,.3), transparent 65%);}
@keyframes fsOrb{
0%,100%{transform:translate(0,0) scale(1); opacity:.8;}
33%{transform:translate(30px,-25px) scale(1.1); opacity:1;}
66%{transform:translate(-20px,20px) scale(.95); opacity:.85;}
}
.fs-hero-inner{
position:relative;z-index:1;
padding:20px;
}
.fs-hero-top{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:18px;
gap:10px;
flex-wrap:wrap;
}
.fs-period-pill{
display:inline-flex;align-items:center;gap:7px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
padding:5px 13px;
border-radius:20px;
font-size:11px;font-weight:800;
color:var(--t2);
font-family:'Cairo',sans-serif;
}
.fs-period-dot{
width:7px;height:7px;
border-radius:50%;
background:var(--g2);
box-shadow:0 0 8px var(--g2);
animation:fsPulse 2s ease-in-out infinite;
}
@keyframes fsPulse{
0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,.5);}
50%{box-shadow:0 0 0 6px rgba(201,168,76,0);}
}
.fs-hero-status{
display:inline-flex;align-items:center;gap:6px;
padding:5px 13px;
border-radius:20px;
font-size:11.5px;font-weight:900;
font-family:'Cairo',sans-serif;
letter-spacing:.2px;
}
.fs-hero-status span{font-size:13px;}
.fs-status-profit{
background:rgba(34,197,94,.15);
border:1px solid rgba(74,222,128,.35);
color:#4ade80;
}
.fs-status-loss{
background:rgba(239,68,68,.15);
border:1px solid rgba(248,113,113,.35);
color:#f87171;
}
.fs-status-covered{
background:rgba(245,158,11,.15);
border:1px solid rgba(251,191,36,.35);
color:#fbbf24;
}
.fs-hero-value-block{
text-align:center;
padding:8px 0;
}
.fs-hero-label{
font-family:var(--font);
font-size:11.5px;
font-weight:800;
color:var(--t2);
margin-bottom:8px;
letter-spacing:.4px;
}
.fs-hero-value{
font-family:var(--font);
font-size:46px;
font-weight:900;
letter-spacing:-1.5px;
line-height:1;
margin-bottom:8px;
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:fsValShimmer 7s ease-in-out infinite;
}
.fs-hero.is-profit .fs-hero-value{
background-image:linear-gradient(135deg, #fff 0%, #4ade80 50%, #22C55E 100%);
}
.fs-hero.is-loss .fs-hero-value{
background-image:linear-gradient(135deg, #fff 0%, #f87171 50%, #ef4444 100%);
}
.fs-hero.is-covered .fs-hero-value{
background-image:linear-gradient(135deg, #fff 0%, #fbbf24 50%, #F59E0B 100%);
}
@keyframes fsValShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.fs-hero-unit{
font-size:20px;
opacity:.7;
font-weight:700;
margin-right:6px;
-webkit-text-fill-color:initial;
background:none;
color:var(--t2);
}
.fs-hero-sub{
font-size:12px;
color:var(--t3);
font-weight:700;
}
.fs-hero-extra{
margin-top:14px;
padding-top:14px;
border-top:1px dashed rgba(255,255,255,.1);
display:flex;flex-direction:column;gap:6px;
}
.fs-extra-row{
display:flex;align-items:center;justify-content:space-between;
padding:6px 12px;
background:rgba(0,0,0,.18);
border-radius:9px;
font-size:11.5px;
font-weight:700;
}
.fs-extra-lbl{color:var(--t3);}
.fs-extra-val{
font-family:var(--font);
font-weight:900;
font-size:13px;
letter-spacing:-.2px;
}
/* ════════ Sources Card — Rich breakdown of grand-total (fs-sources-*) ════════ */
.fs-sources-card{
margin-top:16px;
padding-top:16px;
border-top:1px dashed rgba(255,255,255,.12);
position:relative;
}
.fs-sources-h{
display:flex;align-items:center;gap:11px;
margin-bottom:11px;
}
.fs-sources-h-ico{
width:36px;height:36px;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border-radius:10px;
display:flex;align-items:center;justify-content:center;
font-size:17px;
flex-shrink:0;
box-shadow:0 5px 14px rgba(201,168,76,.35);
}
.fs-sources-h-title{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--g2);
letter-spacing:-.2px;
}
.fs-sources-h-sub{
font-size:10px;
color:var(--t3);
margin-top:2px;
font-weight:700;
}
.fs-sources-h-total{
font-family:var(--font);
font-size:15.5px;
font-weight:900;
letter-spacing:-.4px;
padding:5px 11px;
border-radius:9px;
border:1px solid;
}
.fs-sources-h-total.is-pos{
background:rgba(34,197,94,.1);
border-color:rgba(74,222,128,.3);
color:#4ade80;
}
.fs-sources-h-total.is-neg{
background:rgba(239,68,68,.1);
border-color:rgba(248,113,113,.3);
color:#f87171;
}
.fs-sources-list{
display:flex;flex-direction:column;
gap:6px;
}
.fs-source-row{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.22);
border:1px solid var(--bdr);
border-radius:11px;
padding:9px 11px;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
cursor:default;
position:relative;
overflow:hidden;
}
.fs-source-row[onclick]{cursor:pointer;}
.fs-source-row[onclick]:hover{
transform:translateY(-1px);
background:rgba(0,0,0,.3);
border-color:var(--bdr2);
}
.fs-source-row.is-positive{
border-color:rgba(74,222,128,.22);
}
.fs-source-row.is-negative{
border-color:rgba(248,113,113,.22);
background:linear-gradient(155deg, rgba(239,68,68,.04), rgba(0,0,0,.22));
}
.fs-source-row.is-grand{
background:linear-gradient(155deg, rgba(201,168,76,.1), rgba(201,168,76,.02));
border:1.5px solid rgba(201,168,76,.4);
margin-top:3px;
padding:11px 13px;
box-shadow:0 4px 14px rgba(201,168,76,.15);
}
.fs-source-row.is-grand::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at right top, rgba(201,168,76,.12), transparent 60%);
pointer-events:none;
}
.fs-source-row.is-grand.is-neg-grand{
background:linear-gradient(155deg, rgba(239,68,68,.1), rgba(239,68,68,.02));
border-color:rgba(248,113,113,.4);
box-shadow:0 4px 14px rgba(239,68,68,.15);
}
.fs-source-row.is-grand.is-neg-grand::before{
background:radial-gradient(circle at right top, rgba(239,68,68,.12), transparent 60%);
}
.fs-source-ico{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:15px;
font-weight:900;
flex-shrink:0;
position:relative;z-index:1;
}
.fs-source-info{
flex:1;min-width:0;
position:relative;z-index:1;
}
.fs-source-label{
font-family:var(--font);
font-size:12px;
font-weight:800;
color:var(--t1);
letter-spacing:-.2px;
line-height:1.3;
}
.fs-source-meta{
font-size:10px;
color:var(--t4);
margin-top:2px;
font-weight:700;
line-height:1.5;
}
.fs-source-val{
font-family:var(--font);
font-size:14px;
font-weight:900;
letter-spacing:-.3px;
flex-shrink:0;
position:relative;z-index:1;
}
@media(max-width:560px){
.fs-source-row{padding:8px 10px;gap:8px;}
.fs-source-ico{width:30px;height:30px;font-size:14px;}
.fs-source-label{font-size:11.5px;}
.fs-source-val{font-size:13px;}
.fs-sources-h-total{font-size:13.5px;padding:4px 9px;}
}
/* ─── KPI Grid (4 tiles) ─── */
.fs-kpi-grid{
display:grid;
grid-template-columns:repeat(4, 1fr);
gap:9px;
margin-bottom:14px;
}
@media(max-width:760px){
.fs-kpi-grid{grid-template-columns:repeat(2, 1fr);}
}
.fs-kpi{
position:relative;
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
padding:13px;
overflow:hidden;
cursor:pointer;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.fs-kpi:hover{
transform:translateY(-3px);
border-color:var(--bdr2);
box-shadow:0 12px 28px rgba(0,0,0,.3);
}
.fs-kpi-shine{
position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background:linear-gradient(135deg, transparent 45%, rgba(255,255,255,.04) 50%, transparent 55%);
opacity:0;
transition:opacity .3s;
pointer-events:none;
}
.fs-kpi:hover .fs-kpi-shine{opacity:1;}
.fs-kpi-head{
display:flex;align-items:center;gap:9px;
margin-bottom:10px;
}
.fs-kpi-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
border-radius:10px;
color:#fff;
font-size:17px;
flex-shrink:0;
box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.fs-kpi-label{
font-size:11px;
color:var(--t3);
font-weight:800;
letter-spacing:.2px;
line-height:1.3;
}
.fs-kpi-value{
font-family:var(--font);
font-size:22px;
font-weight:900;
letter-spacing:-.6px;
line-height:1;
margin-bottom:6px;
color:var(--t1);
}
.fs-kpi-unit{
font-size:11px;
opacity:.6;
font-weight:700;
margin-right:3px;
}
.fs-kpi-sub{
font-size:10px;
color:var(--t3);
font-weight:700;
line-height:1.5;
}
.fs-kpi-net.fs-kpi-profit{border-color:rgba(74,222,128,.35);background:linear-gradient(155deg, rgba(34,197,94,.08), var(--d4));}
.fs-kpi-net.fs-kpi-loss{border-color:rgba(248,113,113,.35);background:linear-gradient(155deg, rgba(239,68,68,.08), var(--d4));}
.fs-kpi-net.fs-kpi-covered{border-color:rgba(251,191,36,.35);background:linear-gradient(155deg, rgba(245,158,11,.08), var(--d4));}
/* ─── Treasury Card ─── */
.fs-treasury-card{
background:linear-gradient(155deg,
rgba(201,168,76,.10) 0%,
rgba(34,197,94,.06) 50%,
rgba(59,130,246,.06) 100%);
border:1.5px solid rgba(201,168,76,.4);
border-radius:18px;
padding:16px;
margin-bottom:14px;
cursor:pointer;
position:relative;
overflow:hidden;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.fs-treasury-card:hover{
transform:translateY(-2px);
border-color:var(--g2);
box-shadow:0 16px 36px rgba(201,168,76,.25);
}
.fs-tc-header{
display:flex;align-items:center;gap:12px;
margin-bottom:12px;
}
.fs-tc-ico-wrap{
position:relative;
width:46px;height:46px;
flex-shrink:0;
}
.fs-tc-ico{
position:relative;z-index:2;
width:46px;height:46px;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#1a1206;
border-radius:13px;
display:flex;align-items:center;justify-content:center;
font-size:22px;
box-shadow:0 6px 18px rgba(201,168,76,.4);
}
.fs-tc-glow{
position:absolute;inset:-8px;
background:radial-gradient(circle, rgba(201,168,76,.4), transparent 70%);
border-radius:50%;
filter:blur(10px);
animation:fsGlow 3s ease-in-out infinite;
}
@keyframes fsGlow{
0%,100%{opacity:.5;transform:scale(1);}
50%{opacity:.85;transform:scale(1.15);}
}
.fs-tc-title{
font-family:var(--font);
font-size:14.5px;
font-weight:900;
color:var(--g2);
letter-spacing:-.3px;
}
.fs-tc-sub{
font-size:11px;
color:var(--t3);
margin-top:3px;
}
.fs-tc-cta{
display:flex;align-items:center;gap:4px;
color:var(--g2);
font-size:11px;
font-weight:800;
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.25);
border-radius:9px;
padding:5px 10px;
}
.fs-tc-total{
font-family:var(--font);
font-size:34px;
font-weight:900;
letter-spacing:-1px;
line-height:1;
margin-bottom:12px;
color:var(--t1);
text-align:center;
}
.fs-tc-unit{
font-size:16px;
opacity:.6;
font-weight:700;
margin-right:5px;
}
.fs-tc-cells{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
gap:7px;
}
.fs-tc-cell{
background:rgba(0,0,0,.22);
border:1px solid var(--bdr);
border-radius:11px;
padding:9px 11px;
text-align:center;
transition:all .2s;
}
.fs-tc-cell:hover{
transform:translateY(-1px);
background:rgba(0,0,0,.3);
}
.fs-tc-cash{border-color:rgba(74,222,128,.3);}
.fs-tc-bank{border-color:rgba(96,165,250,.3);}
.fs-tc-emergency{border-color:rgba(248,113,113,.3);}
.fs-tc-rent{border-color:rgba(168,85,247,.3);background:linear-gradient(155deg,rgba(59,130,246,.06),rgba(168,85,247,.04));}
.fs-tc-cell-h{
display:flex;align-items:center;justify-content:center;gap:5px;
font-size:10.5px;
color:var(--t3);
font-weight:800;
margin-bottom:5px;
}
.fs-tc-cell-val{
font-family:var(--font);
font-size:16px;
font-weight:900;
letter-spacing:-.4px;
margin-bottom:3px;
line-height:1;
}
.fs-tc-cash .fs-tc-cell-val{color:#4ade80;}
.fs-tc-bank .fs-tc-cell-val{color:#60A5FA;}
.fs-tc-emergency .fs-tc-cell-val{color:#f87171;}
.fs-tc-rent .fs-tc-cell-val{color:#c084fc;}
.fs-tc-cell-val span{font-size:9.5px;opacity:.6;margin-right:2px;font-weight:700;}
.fs-tc-cell-foot{
font-size:9.5px;
color:var(--t4);
font-weight:700;
}
/* ─── Sections ─── */
.fs-section{
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
padding:0;
margin-bottom:12px;
overflow:hidden;
}
.fs-section-h{
display:flex;align-items:center;gap:10px;
padding:13px 14px;
background:linear-gradient(155deg, rgba(255,255,255,.02), transparent);
border-bottom:1px solid var(--bdr);
}
.fs-section-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
border-radius:10px;
color:#fff;
font-size:17px;
flex-shrink:0;
box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.fs-section-title{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
}
.fs-section-sub{
font-size:10.5px;
color:var(--t3);
margin-top:3px;
}
.fs-section-body{
padding:13px 14px;
}
/* ─── Payment Bars ─── */
.fs-pay-bars{
display:flex;flex-direction:column;
gap:14px;
}
.fs-pay-row{
background:rgba(0,0,0,.18);
border:1px solid var(--bdr);
border-radius:11px;
padding:11px 13px;
}
.fs-pay-head{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:8px;
}
.fs-pay-lbl{
display:flex;align-items:center;gap:7px;
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
}
.fs-pay-dot{
width:9px;height:9px;
border-radius:50%;
box-shadow:0 0 6px currentColor;
}
.fs-pay-val{
font-family:var(--font);
font-size:14.5px;
font-weight:900;
letter-spacing:-.3px;
color:var(--t1);
}
.fs-pay-track{
height:8px;
background:rgba(255,255,255,.04);
border-radius:5px;
overflow:hidden;
margin-bottom:7px;
}
.fs-pay-fill{
height:100%;
border-radius:5px;
transition:width .8s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 0 8px currentColor;
}
.fs-pay-foot{
font-size:10.5px;
color:var(--t3);
font-weight:700;
margin-bottom:3px;
}
.fs-pay-meta{
font-size:10px;
color:var(--t4);
line-height:1.6;
}
/* ─── POS section ─── */
.fs-pos-section{
border-color:rgba(245,158,11,.25);
}
.fs-pos-total{
font-family:var(--font);
font-size:20px;
font-weight:900;
color:#fbbf24;
letter-spacing:-.4px;
text-align:left;
}
.fs-pos-total span{
font-size:12px;opacity:.7;margin-right:3px;font-weight:700;
}
@media(max-width:560px){
.fs-hero-value{font-size:36px;}
.fs-hero-unit{font-size:16px;}
.fs-kpi-value{font-size:18px;}
.fs-tc-total{font-size:28px;}
.fs-hero-inner{padding:16px;}
}
/* ════════ Yearly Rent Fund Box (rf-*) — Smart conditional display ════════ */
.rf-box{
position:relative;
background:linear-gradient(155deg,
rgba(59,130,246,.12) 0%,
rgba(168,85,247,.08) 50%,
rgba(59,130,246,.06) 100%);
border:1.5px solid rgba(96,165,250,.45);
border-radius:18px;
padding:18px;
margin-bottom:14px;
overflow:hidden;
box-shadow:0 14px 36px rgba(59,130,246,.18), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.rf-box.is-deficit{
background:linear-gradient(155deg,
rgba(239,68,68,.12) 0%,
rgba(245,158,11,.08) 50%,
rgba(239,68,68,.06) 100%);
border-color:rgba(248,113,113,.45);
box-shadow:0 14px 36px rgba(239,68,68,.2), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.rf-box.is-paid{
background:linear-gradient(155deg,
rgba(34,197,94,.12) 0%,
rgba(74,222,128,.06) 50%,
rgba(34,197,94,.04) 100%);
border-color:rgba(74,222,128,.45);
box-shadow:0 14px 36px rgba(34,197,94,.2), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.rf-glow{
position:absolute;
border-radius:50%;
filter:blur(60px);
pointer-events:none;
animation:rfFloat 12s ease-in-out infinite;
}
.rf-glow-1{
width:220px;height:220px;
background:radial-gradient(circle, rgba(96,165,250,.4), transparent 70%);
top:-60px;right:-60px;
}
.rf-glow-2{
width:180px;height:180px;
background:radial-gradient(circle, rgba(168,85,247,.3), transparent 70%);
bottom:-50px;left:-40px;
animation-delay:-5s;
}
.rf-box.is-deficit .rf-glow-1{background:radial-gradient(circle, rgba(248,113,113,.4), transparent 70%);}
.rf-box.is-deficit .rf-glow-2{background:radial-gradient(circle, rgba(251,191,36,.3), transparent 70%);}
.rf-box.is-paid .rf-glow-1{background:radial-gradient(circle, rgba(74,222,128,.4), transparent 70%);}
.rf-box.is-paid .rf-glow-2{background:radial-gradient(circle, rgba(34,197,94,.3), transparent 70%);}
@keyframes rfFloat{
0%,100%{transform:translate(0,0) scale(1); opacity:.7;}
50%{transform:translate(-15px,15px) scale(1.1); opacity:.9;}
}
.rf-header{
display:flex;align-items:center;gap:12px;
margin-bottom:18px;
position:relative;z-index:1;
}
.rf-ico-wrap{
position:relative;
width:52px;height:52px;
flex-shrink:0;
}
.rf-ico{
position:relative;z-index:2;
width:52px;height:52px;
background:linear-gradient(135deg, #3B82F6, #1d4ed8);
color:#fff;
border-radius:14px;
display:flex;align-items:center;justify-content:center;
font-size:24px;
box-shadow:0 8px 20px rgba(59,130,246,.45);
}
.is-deficit .rf-ico{
background:linear-gradient(135deg, #EF4444, #b91c1c);
box-shadow:0 8px 20px rgba(239,68,68,.45);
}
.is-paid .rf-ico{
background:linear-gradient(135deg, #22C55E, #15803d);
box-shadow:0 8px 20px rgba(34,197,94,.45);
}
.rf-ico-pulse{
position:absolute;inset:-6px;
border:2px solid rgba(96,165,250,.4);
border-radius:50%;
animation:rfPulse 2s ease-out infinite;
}
.is-deficit .rf-ico-pulse{border-color:rgba(248,113,113,.4);}
.is-paid .rf-ico-pulse{border-color:rgba(74,222,128,.4);}
@keyframes rfPulse{
0%{transform:scale(1);opacity:.6;}
100%{transform:scale(1.5);opacity:0;}
}
.rf-titles{flex:1;min-width:0;}
.rf-title{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
font-family:var(--font);
font-size:15.5px;
font-weight:900;
letter-spacing:-.3px;
color:#60A5FA;
}
.is-deficit .rf-title{color:#f87171;}
.is-paid .rf-title{color:#4ade80;}
.rf-badge{
font-size:9.5px;
font-weight:800;
font-family:'Cairo',sans-serif;
padding:2px 8px;
border-radius:7px;
background:rgba(96,165,250,.18);
border:1px solid rgba(96,165,250,.3);
color:#93c5fd;
letter-spacing:.2px;
}
.is-deficit .rf-badge{
background:rgba(239,68,68,.15);
border-color:rgba(248,113,113,.3);
color:#fca5a5;
}
.is-paid .rf-badge{
background:rgba(34,197,94,.15);
border-color:rgba(74,222,128,.3);
color:#86efac;
}
.rf-sub{
font-size:11.5px;
color:var(--t3);
margin-top:4px;
line-height:1.5;
}
/* Big balance display */
.rf-balance{
text-align:center;
padding:14px 0;
margin-bottom:14px;
background:rgba(0,0,0,.18);
border-radius:14px;
border:1px solid var(--bdr);
position:relative;z-index:1;
}
.rf-balance-lbl{
font-size:11.5px;
color:var(--t3);
font-weight:800;
margin-bottom:6px;
letter-spacing:.3px;
}
.rf-balance-val{
font-family:var(--font);
font-size:38px;
font-weight:900;
letter-spacing:-1.2px;
line-height:1;
color:#60A5FA;
text-shadow:0 0 20px rgba(96,165,250,.4);
}
.is-deficit .rf-balance-val{
color:#f87171;
text-shadow:0 0 20px rgba(248,113,113,.4);
}
.is-paid .rf-balance-val{
color:#4ade80;
text-shadow:0 0 20px rgba(74,222,128,.4);
}
.rf-unit{
font-size:18px;
opacity:.7;
font-weight:700;
margin-right:6px;
text-shadow:none;
}
.rf-balance-sub{
font-size:11px;
color:var(--t3);
margin-top:7px;
font-weight:700;
}
/* Progress bar */
.rf-progress{
background:rgba(0,0,0,.22);
border:1px solid var(--bdr);
border-radius:11px;
padding:11px 13px;
margin-bottom:14px;
position:relative;z-index:1;
}
.rf-progress-lbl{
display:flex;justify-content:space-between;
font-size:11px;
color:var(--t3);
font-weight:800;
margin-bottom:7px;
}
.rf-progress-pct{
color:#60A5FA;
font-family:var(--font);
font-size:13px;
font-weight:900;
}
.is-deficit .rf-progress-pct{color:#f87171;}
.is-paid .rf-progress-pct{color:#4ade80;}
.rf-progress-bar{
position:relative;
height:12px;
background:rgba(255,255,255,.05);
border-radius:6px;
overflow:hidden;
margin-bottom:7px;
}
.rf-progress-fill{
height:100%;
background:linear-gradient(90deg, #3B82F6, #60A5FA);
border-radius:6px;
box-shadow:0 0 12px rgba(96,165,250,.6);
transition:width 1s cubic-bezier(.34,1.56,.64,1);
}
.is-deficit .rf-progress-fill{
background:linear-gradient(90deg, #EF4444, #f87171);
box-shadow:0 0 12px rgba(248,113,113,.6);
}
.is-paid .rf-progress-fill{
background:linear-gradient(90deg, #22C55E, #4ade80);
box-shadow:0 0 12px rgba(74,222,128,.6);
}
.rf-tick{
position:absolute;
top:0;bottom:0;
width:1px;
background:rgba(255,255,255,.15);
pointer-events:none;
}
.rf-progress-foot{
display:flex;justify-content:space-between;
font-size:10px;
color:var(--t4);
font-weight:700;
font-family:var(--font);
}
/* Flow rows */
.rf-flow{
display:flex;flex-direction:column;gap:6px;
margin-bottom:14px;
position:relative;z-index:1;
}
.rf-flow-row{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:11px;
padding:9px 11px;
transition:all .2s;
}
.rf-flow-row:hover{
background:rgba(0,0,0,.28);
border-color:var(--bdr2);
}
.rf-flow-row.rf-result{
background:linear-gradient(155deg, rgba(59,130,246,.1), rgba(59,130,246,.02));
border-color:rgba(96,165,250,.35);
border-width:1.5px;
}
.is-deficit .rf-flow-row.rf-result{
background:linear-gradient(155deg, rgba(239,68,68,.1), rgba(239,68,68,.02));
border-color:rgba(248,113,113,.35);
}
.is-paid .rf-flow-row.rf-result{
background:linear-gradient(155deg, rgba(34,197,94,.1), rgba(34,197,94,.02));
border-color:rgba(74,222,128,.35);
}
.rf-flow-ico{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-family:var(--font);
font-size:18px;
font-weight:900;
flex-shrink:0;
}
.rf-flow-info{flex:1;min-width:0;}
.rf-flow-label{
font-family:var(--font);
font-size:12px;
font-weight:800;
color:var(--t2);
}
.rf-flow-meta{
font-size:10px;
color:var(--t4);
margin-top:2px;
font-weight:700;
}
.rf-flow-val{
font-family:var(--font);
font-size:14.5px;
font-weight:900;
letter-spacing:-.3px;
flex-shrink:0;
}
/* Status */
.rf-status{
display:flex;align-items:flex-start;gap:9px;
padding:11px 13px;
border-radius:11px;
font-size:11.5px;
line-height:1.7;
position:relative;z-index:1;
}
.rf-status-info{
background:rgba(59,130,246,.08);
border:1px solid rgba(96,165,250,.25);
color:#93c5fd;
}
.rf-status-ok{
background:rgba(34,197,94,.08);
border:1px solid rgba(74,222,128,.25);
color:#86efac;
}
.rf-status-warn{
background:rgba(239,68,68,.08);
border:1px solid rgba(248,113,113,.3);
color:#fca5a5;
}
.rf-status-ico{font-size:15px;flex-shrink:0;}
.rf-status strong{color:var(--t1);font-weight:900;}
@media(max-width:560px){
.rf-box{padding:14px;}
.rf-balance-val{font-size:30px;}
.rf-unit{font-size:14px;}
.rf-flow-row{padding:8px 10px;gap:8px;}
}
/* ════════ INTERACTIVE Rent Fund Buttons (rf-btn-*) ════════ */
.rf-actions{
display:flex;flex-direction:column;gap:9px;
margin-bottom:14px;
position:relative;z-index:1;
}
.rf-btn{
width:100%;
display:flex;align-items:center;gap:11px;
padding:13px 14px;
border:none;
border-radius:13px;
cursor:pointer;
font-family:'Cairo',sans-serif;
text-align:right;
position:relative;
overflow:hidden;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 6px 18px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.05) inset;
}
.rf-btn::before{
content:'';
position:absolute;
top:-50%;left:-50%;
width:200%;height:200%;
background:linear-gradient(135deg, transparent 45%, rgba(255,255,255,.12) 50%, transparent 55%);
opacity:0;
transition:opacity .3s;
pointer-events:none;
}
.rf-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.1) inset;
}
.rf-btn:hover::before{opacity:1;}
.rf-btn:active{transform:translateY(0);}
/* DEPOSIT BUTTON (deposit to fund) — primary blue/purple gradient */
.rf-btn-deposit{
background:linear-gradient(135deg, #3B82F6 0%, #6366F1 50%, #8B5CF6 100%);
color:#fff;
}
.rf-btn-deposit:hover{
filter:brightness(1.1);
}
/* DEPOSITED CHECKMARK — already done this month */
.rf-btn-deposited{
background:linear-gradient(135deg, rgba(34,197,94,.15), rgba(34,197,94,.05));
border:1px solid rgba(74,222,128,.4);
color:#4ade80;
}
.rf-btn-deposited:hover{
background:linear-gradient(135deg, rgba(34,197,94,.2), rgba(34,197,94,.08));
border-color:rgba(74,222,128,.6);
}
/* WITHDRAW BUTTON (pay landlord) — green gradient when fund is full */
.rf-btn-withdraw{
background:linear-gradient(135deg, #22C55E 0%, #16a34a 50%, #15803d 100%);
color:#fff;
animation:rfBtnPulse 2.4s ease-in-out infinite;
}
@keyframes rfBtnPulse{
0%,100%{box-shadow:0 6px 18px rgba(34,197,94,.35), 0 0 0 1px rgba(255,255,255,.05) inset;}
50%{box-shadow:0 8px 24px rgba(34,197,94,.55), 0 0 0 1px rgba(255,255,255,.15) inset, 0 0 24px rgba(74,222,128,.3);}
}
/* WITHDRAWN — already paid landlord */
.rf-btn-withdrawn{
background:linear-gradient(135deg, rgba(34,197,94,.18), rgba(34,197,94,.08));
border:1px solid rgba(74,222,128,.45);
color:#4ade80;
font-weight:900;
}
.rf-btn-ico{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.18);
border-radius:10px;
font-size:18px;
flex-shrink:0;
}
.rf-btn-deposited .rf-btn-ico,
.rf-btn-withdrawn .rf-btn-ico{
background:rgba(34,197,94,.2);
}
.rf-btn-info{
flex:1;
min-width:0;
}
.rf-btn-label{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
letter-spacing:-.2px;
line-height:1.3;
margin-bottom:3px;
}
.rf-btn-sub{
font-size:10.5px;
opacity:.85;
font-weight:700;
line-height:1.5;
}
.rf-btn-arrow{
font-size:18px;
opacity:.85;
flex-shrink:0;
transition:transform .3s;
}
.rf-btn:hover .rf-btn-arrow{
transform:translateX(-3px);
}
/* Warning card when fund is short on due month */
.rf-warn-card{
display:flex;align-items:flex-start;gap:11px;
padding:13px 14px;
background:linear-gradient(155deg, rgba(239,68,68,.12), rgba(245,158,11,.06));
border:1.5px solid rgba(248,113,113,.4);
border-radius:13px;
color:#fca5a5;
font-size:12px;
line-height:1.7;
position:relative;
overflow:hidden;
}
.rf-warn-card::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at top right, rgba(239,68,68,.15), transparent 60%);
pointer-events:none;
}
.rf-warn-ico{
font-size:22px;
flex-shrink:0;
position:relative;z-index:1;
}
.rf-warn-card strong{color:#f87171;font-weight:900;font-family:var(--font);}
/* ════════ Frequency Radio Cards (qa-freq-*) — Quick-add obligation modal ════════ */
.qa-freq-radio{
cursor:pointer;
-webkit-tap-highlight-color:transparent;
position:relative;
}
.qa-freq-radio input[type="radio"]{
position:absolute;
opacity:0;
pointer-events:none;
}
.qa-freq-card{
background:rgba(255,255,255,.03);
border:1.5px solid var(--bdr);
border-radius:12px;
padding:11px 9px;
text-align:center;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
position:relative;
overflow:hidden;
}
.qa-freq-card::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at center, transparent 60%, rgba(255,255,255,.04));
opacity:0;
transition:opacity .3s;
}
.qa-freq-radio:hover .qa-freq-card{
border-color:var(--bdr2);
transform:translateY(-2px);
background:rgba(255,255,255,.05);
}
.qa-freq-radio input[type="radio"]:checked + .qa-freq-card{
background:linear-gradient(155deg, rgba(201,168,76,.18), rgba(201,168,76,.04));
border-color:var(--g2);
box-shadow:0 6px 20px rgba(201,168,76,.25), 0 0 0 1px var(--g2) inset;
}
.qa-freq-radio input[type="radio"]:checked + .qa-freq-card::before{
opacity:1;
}
.qa-freq-radio input[type="radio"]:checked + .qa-freq-card .qa-freq-ico{
transform:scale(1.15);
filter:drop-shadow(0 0 8px rgba(201,168,76,.5));
}
.qa-freq-ico{
font-size:22px;
margin-bottom:5px;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
display:inline-block;
}
.qa-freq-name{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
margin-bottom:2px;
}
.qa-freq-desc{
font-size:9.5px;
color:var(--t3);
font-weight:700;
line-height:1.4;
}
.qa-freq-radio input[type="radio"]:checked + .qa-freq-card .qa-freq-name{
color:var(--g2);
}
/* ════════ Month Fund Card (mf-*) — Smart accounting visualization ════════ */
.mf-card{
background:linear-gradient(155deg,
rgba(201,168,76,.08) 0%,
rgba(34,197,94,.06) 50%,
rgba(59,130,246,.06) 100%);
border:1.5px solid rgba(201,168,76,.4);
border-radius:18px;
padding:0;
margin-bottom:14px;
position:relative;
overflow:hidden;
box-shadow:
0 12px 32px rgba(0,0,0,.35),
0 0 0 1px rgba(255,255,255,.04) inset;
}
.mf-h{
display:flex;align-items:center;gap:12px;
padding:16px 17px;
background:linear-gradient(155deg, rgba(255,255,255,.02), transparent);
border-bottom:1px solid var(--bdr);
position:relative;
}
.mf-ico-wrap{
position:relative;
width:50px;height:50px;
flex-shrink:0;
}
.mf-ico{
width:50px;height:50px;
background:linear-gradient(135deg, var(--g1), var(--g2));
color:#0a0a0a;
border-radius:14px;
display:flex;align-items:center;justify-content:center;
font-size:24px;
box-shadow:0 6px 18px rgba(201,168,76,.4);
position:relative;
z-index:2;
}
.mf-ico-glow{
position:absolute;inset:-8px;
background:radial-gradient(circle, rgba(201,168,76,.4), transparent 70%);
border-radius:50%;
filter:blur(12px);
animation:mfGlow 3s ease-in-out infinite;
}
@keyframes mfGlow{
0%,100%{opacity:.5;transform:scale(1);}
50%{opacity:.85;transform:scale(1.15);}
}
.mf-title{
font-family:var(--font);
font-size:16px;
font-weight:900;
letter-spacing:-.4px;
background:linear-gradient(135deg, var(--g2), #fde047, var(--g2));
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:mfShimmer 6s ease-in-out infinite;
}
@keyframes mfShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.mf-sub{
font-size:10.5px;
color:var(--t3);
margin-top:3px;
line-height:1.5;
}
.mf-balance-box{
flex-shrink:0;
padding:10px 14px;
border-radius:13px;
background:rgba(0,0,0,.3);
border:1.5px solid;
text-align:left;
min-width:130px;
}
.mf-balance-box.is-positive{
border-color:rgba(74,222,128,.5);
background:linear-gradient(155deg, rgba(34,197,94,.18), rgba(34,197,94,.04));
box-shadow:0 4px 12px rgba(34,197,94,.18);
}
.mf-balance-box.is-negative{
border-color:rgba(248,113,113,.5);
background:linear-gradient(155deg, rgba(239,68,68,.18), rgba(239,68,68,.04));
box-shadow:0 4px 12px rgba(239,68,68,.18);
}
.mf-balance-lbl{
font-size:9.5px;
color:var(--t3);
font-weight:800;
margin-bottom:4px;
letter-spacing:.3px;
}
.mf-balance-val{
font-family:var(--font);
font-size:20px;
font-weight:900;
letter-spacing:-.5px;
line-height:1;
}
.is-positive .mf-balance-val{color:#4ade80;}
.is-negative .mf-balance-val{color:#f87171;}
.mf-balance-val span{
font-size:10px;opacity:.6;margin-right:3px;font-weight:700;
}
/* Section (IN/OUT) */
.mf-section{
padding:14px 17px;
border-bottom:1px solid var(--bdr);
}
.mf-section:last-of-type{border-bottom:none;}
.mf-in-section{
background:linear-gradient(180deg, rgba(34,197,94,.03), transparent);
}
.mf-out-section{
background:linear-gradient(180deg, rgba(239,68,68,.03), transparent);
}
.mf-section-h{
display:flex;align-items:center;gap:10px;
margin-bottom:11px;
}
.mf-section-ico{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:10px;
color:#fff;
font-size:16px;font-weight:900;
flex-shrink:0;
box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.mf-section-title{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:var(--t1);
}
.mf-section-sub{
font-size:10.5px;
color:var(--t3);
margin-top:2px;
}
.mf-section-total{
font-family:var(--font);
font-size:15px;
font-weight:900;
letter-spacing:-.4px;
}
/* In-flow grid (cash/bank/emergency cells) */
.mf-flow-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
gap:8px;
}
.mf-flow-cell{
background:rgba(0,0,0,.22);
border:1px solid var(--bdr);
border-radius:11px;
padding:10px 12px;
}
.mf-cell-cash{
border-color:rgba(74,222,128,.3);
background:linear-gradient(155deg, rgba(34,197,94,.08), rgba(34,197,94,.01));
}
.mf-cell-bank{
border-color:rgba(96,165,250,.3);
background:linear-gradient(155deg, rgba(59,130,246,.08), rgba(59,130,246,.01));
}
.mf-cell-emergency{
border-color:rgba(245,158,11,.3);
background:linear-gradient(155deg, rgba(245,158,11,.08), rgba(245,158,11,.01));
}
.mf-cell-lbl{
font-size:10.5px;
color:var(--t3);
font-weight:800;
margin-bottom:5px;
}
.mf-cell-val{
font-family:var(--font);
font-size:18px;
font-weight:900;
letter-spacing:-.4px;
margin-bottom:5px;
line-height:1;
}
.mf-cell-meta{
font-size:9.5px;
color:var(--t4);
line-height:1.5;
font-weight:700;
}
/* Out-flow list */
.mf-out-list{
display:flex;flex-direction:column;gap:6px;
}
.mf-out-row{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.22);
border:1px solid var(--bdr);
border-radius:11px;
padding:9px 11px;
transition:all .2s;
}
.mf-out-row:hover{
background:rgba(0,0,0,.3);
border-color:var(--bdr2);
}
.mf-out-transfer{
background:linear-gradient(155deg, rgba(59,130,246,.08), rgba(168,85,247,.04));
border-color:rgba(96,165,250,.35);
}
.mf-out-ico{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:15px;
flex-shrink:0;
}
.mf-out-info{flex:1;min-width:0;}
.mf-out-label{
font-family:var(--font);
font-size:12px;
font-weight:800;
color:var(--t1);
}
.mf-out-meta{
display:flex;flex-wrap:wrap;gap:5px;
margin-top:4px;
font-size:10px;
font-weight:700;
}
.mf-tag-cash, .mf-tag-bank, .mf-tag-emergency, .mf-tag-info{
display:inline-block;
padding:2px 7px;
border-radius:6px;
border:1px solid;
font-family:'Cairo',sans-serif;
}
.mf-tag-cash{
background:rgba(34,197,94,.1);
border-color:rgba(74,222,128,.25);
color:#86efac;
}
.mf-tag-bank{
background:rgba(59,130,246,.1);
border-color:rgba(96,165,250,.25);
color:#93c5fd;
}
.mf-tag-emergency{
background:rgba(245,158,11,.12);
border-color:rgba(245,158,11,.3);
color:#fbbf24;
}
.mf-tag-info{
background:rgba(255,255,255,.04);
border-color:rgba(255,255,255,.08);
color:var(--t3);
font-style:italic;
}
.mf-out-val{
font-family:var(--font);
font-size:14.5px;
font-weight:900;
color:#f87171;
letter-spacing:-.3px;
flex-shrink:0;
}
.mf-out-val span{font-size:10px;opacity:.6;margin-right:3px;font-weight:700;}
/* Final balance grid */
.mf-balance-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
gap:9px;
padding:14px 17px;
background:linear-gradient(155deg, rgba(255,255,255,.02), transparent);
border-top:1px solid var(--bdr);
}
.mf-bal-cell{
background:rgba(0,0,0,.25);
border:1.5px solid var(--bdr);
border-radius:12px;
padding:11px 13px;
text-align:center;
}
.mf-bal-cash.is-pos{border-color:rgba(74,222,128,.4);background:linear-gradient(155deg, rgba(34,197,94,.1), rgba(34,197,94,.02));}
.mf-bal-cash.is-neg{border-color:rgba(248,113,113,.4);background:linear-gradient(155deg, rgba(239,68,68,.1), rgba(239,68,68,.02));}
.mf-bal-bank.is-pos{border-color:rgba(96,165,250,.4);background:linear-gradient(155deg, rgba(59,130,246,.1), rgba(59,130,246,.02));}
.mf-bal-bank.is-neg{border-color:rgba(248,113,113,.4);background:linear-gradient(155deg, rgba(239,68,68,.1), rgba(239,68,68,.02));}
.mf-bal-emergency.is-pos{border-color:rgba(245,158,11,.4);background:linear-gradient(155deg, rgba(245,158,11,.1), rgba(245,158,11,.02));}
.mf-bal-emergency.is-neg{border-color:rgba(248,113,113,.4);background:linear-gradient(155deg, rgba(239,68,68,.1), rgba(239,68,68,.02));}
.mf-bal-cell-h{
display:flex;align-items:center;justify-content:center;gap:6px;
margin-bottom:6px;
}
.mf-bal-cell-ico{font-size:14px;}
.mf-bal-cell-lbl{
font-size:10.5px;
color:var(--t2);
font-weight:800;
letter-spacing:.2px;
}
.mf-bal-cell-val{
font-family:var(--font);
font-size:18px;
font-weight:900;
letter-spacing:-.5px;
line-height:1;
margin-bottom:5px;
}
.is-pos .mf-bal-cell-val{color:#4ade80;}
.mf-bal-bank.is-pos .mf-bal-cell-val{color:#60A5FA;}
.mf-bal-emergency.is-pos .mf-bal-cell-val{color:#fbbf24;}
.is-neg .mf-bal-cell-val{color:#f87171;}
.mf-bal-cell-val span{
font-size:10px;opacity:.6;margin-right:3px;font-weight:700;
}
.mf-bal-cell-detail{
display:flex;align-items:center;justify-content:center;gap:5px;
font-size:9.5px;
font-weight:800;
font-family:var(--font);
}
.mf-bd-in{color:#4ade80;}
.mf-bd-sep{color:var(--t4);}
.mf-bd-out{color:#f87171;}
/* Note */
.mf-note{
padding:11px 17px;
background:rgba(59,130,246,.05);
border-top:1px solid rgba(59,130,246,.15);
font-size:11px;
color:var(--t2);
line-height:1.7;
}
.mf-note strong{color:var(--t1);}
@media(max-width:560px){
.mf-h{padding:13px;flex-wrap:wrap;}
.mf-balance-box{width:100%;}
.mf-section{padding:12px 13px;}
.mf-balance-grid{padding:11px 13px;grid-template-columns:1fr 1fr;}
.mf-title{font-size:14.5px;}
.mf-balance-val{font-size:18px;}
.mf-bal-cell-val{font-size:15.5px;}
.mf-cell-val{font-size:16px;}
}
/* ════════ Month-Linked Treasury Entries (mle-*) — Treasury tab ════════ */
.mle-form{
background:linear-gradient(155deg, rgba(245,158,11,.06), rgba(245,158,11,.01));
border:1px solid rgba(245,158,11,.25);
border-radius:14px;
padding:14px;
margin-bottom:14px;
}
.mle-form-row{
display:flex;gap:10px;
margin-bottom:11px;
}
.mle-form-row:last-of-type{margin-bottom:13px;}
.mle-field{
display:flex;flex-direction:column;
min-width:0;
}
.mle-field label{
font-size:10.5px;
color:var(--t3);
font-weight:800;
margin-bottom:5px;
letter-spacing:.2px;
}
.mle-field input,
.mle-field select{
width:100%;
padding:9px 11px;
background:var(--d4);
border:1px solid var(--bdr);
color:var(--t1);
border-radius:9px;
font-size:12.5px;
font-family:'Cairo',sans-serif;
outline:none;
transition:border-color .2s;
}
.mle-field input:focus,
.mle-field select:focus{
border-color:rgba(245,158,11,.5);
box-shadow:0 0 0 2px rgba(245,158,11,.15);
}
.mle-add-btn{
width:100%;
display:flex;align-items:center;justify-content:center;
gap:7px;
padding:11px;
background:linear-gradient(135deg, #F59E0B, #d97706);
color:#fff;
border:none;
border-radius:10px;
font-size:13px;
font-weight:900;
font-family:var(--font);
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 6px 16px rgba(245,158,11,.35);
}
.mle-add-btn:hover{
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(245,158,11,.45);
}
.mle-add-btn:active{transform:scale(.97);}
.mle-list-h{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:8px;
padding:0 4px;
font-family:var(--font);
font-size:11.5px;
font-weight:800;
color:var(--t2);
}
.mle-list-h-total{
color:#fbbf24;
letter-spacing:-.2px;
}
.mle-list{
display:flex;flex-direction:column;gap:6px;
}
.mle-item{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:11px;
padding:9px 11px;
position:relative;
overflow:hidden;
transition:all .2s;
}
.mle-item:hover{
background:rgba(0,0,0,.28);
transform:translateX(-2px);
}
.mle-item-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:17px;
flex-shrink:0;
}
.mle-item-info{
flex:1;min-width:0;
}
.mle-item-name{
font-family:var(--font);
font-size:12.5px;
font-weight:800;
color:var(--t1);
letter-spacing:-.2px;
}
.mle-item-meta{
display:flex;flex-wrap:wrap;gap:6px;
font-size:10px;
color:var(--t3);
font-weight:700;
margin-top:3px;
}
.mle-meta-month{
background:rgba(168,85,247,.12);
color:#c084fc;
padding:2px 7px;
border-radius:6px;
border:1px solid rgba(168,85,247,.2);
}
.mle-meta-method{
background:rgba(255,255,255,.04);
padding:2px 7px;
border-radius:6px;
border:1px solid rgba(255,255,255,.06);
}
.mle-meta-note{font-style:italic;opacity:.8;}
.mle-item-amt{
font-family:var(--font);
font-size:15px;
font-weight:900;
letter-spacing:-.4px;
flex-shrink:0;
}
.mle-item-amt span{
font-size:10px;
opacity:.6;
margin-right:3px;
font-weight:700;
}
.mle-item-del{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:rgba(239,68,68,.08);
border:1px solid rgba(239,68,68,.2);
color:#f87171;
border-radius:8px;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
transition:all .2s;
}
.mle-item-del:hover{
background:rgba(239,68,68,.18);
border-color:rgba(239,68,68,.4);
transform:scale(1.1);
}
.mle-empty{
text-align:center;
padding:24px 16px;
background:rgba(0,0,0,.15);
border:1px dashed var(--bdr);
border-radius:11px;
}
@media(max-width:560px){
.mle-form-row{flex-direction:column;gap:8px;}
.mle-item{gap:8px;padding:8px 10px;}
.mle-item-ico{width:32px;height:32px;font-size:15px;}
.mle-item-name{font-size:11.5px;}
.mle-item-amt{font-size:13.5px;}
}
/* ════════ Linked entries display in Monthly Income tab ════════ */
.mi-linked-section{
border-color:rgba(245,158,11,.3) !important;
background:linear-gradient(155deg, rgba(245,158,11,.05), rgba(245,158,11,.01)) !important;
}
.mi-linked-list{display:flex;flex-direction:column;gap:6px;}
.mi-linked-row{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 11px;
}
.mi-linked-ico{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:16px;
flex-shrink:0;
}
.mi-linked-info{flex:1;min-width:0;}
.mi-linked-name{
font-family:var(--font);
font-size:12px;font-weight:800;
color:var(--t1);
}
.mi-linked-sub{
font-size:10px;color:var(--t3);
margin-top:2px;
line-height:1.5;
}
.mi-linked-val{
font-family:var(--font);
font-size:15px;font-weight:900;
letter-spacing:-.3px;
flex-shrink:0;
}
.mi-linked-val span{
font-size:10px;opacity:.6;margin-right:3px;font-weight:700;
}
/* ════════ Daily Income Tab (يومية الدخل) — luxurious & professional ════════ */
/* Day Navigator (top of hero) */
.dyi-nav{
display:flex;align-items:center;
gap:10px;
margin-bottom:14px;
}
.dyi-nav-btn{
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1.5px solid rgba(201,168,76,.35);
color:var(--g2);
border-radius:13px;
cursor:pointer;
flex-shrink:0;
-webkit-tap-highlight-color:transparent;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 4px 12px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.dyi-nav-btn:hover{
transform:scale(1.1);
border-color:var(--g2);
background:linear-gradient(155deg, rgba(201,168,76,.15), rgba(201,168,76,.05));
box-shadow:0 8px 20px rgba(201,168,76,.3), 0 0 0 1px rgba(201,168,76,.2) inset;
}
.dyi-nav-btn:active{
transform:scale(.94);
transition:transform .08s;
}
.dyi-nav-prev svg{transform:scaleX(-1);}
.dyi-nav-center{
flex:1;
text-align:center;
min-width:0;
}
.dyi-nav-status{
font-size:10px;
font-weight:800;
margin-bottom:4px;
letter-spacing:.3px;
}
.dyi-status-live{
display:inline-flex;align-items:center;gap:6px;
color:#4ade80;
background:rgba(34,197,94,.12);
padding:3px 10px;
border-radius:8px;
border:1px solid rgba(74,222,128,.3);
animation:dyiNavPulse 2.4s ease-in-out infinite;
}
@keyframes dyiNavPulse{
0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.4);}
50%{box-shadow:0 0 0 5px rgba(34,197,94,0);}
}
.dyi-status-past{
display:inline-block;
color:#c084fc;
background:rgba(168,85,247,.12);
padding:3px 10px;
border-radius:8px;
border:1px solid rgba(168,85,247,.3);
}
.dyi-nav-date{
font-family:var(--font);
font-size:14.5px;
font-weight:900;
letter-spacing:-.3px;
background:linear-gradient(135deg, var(--g2), #fde047, var(--g2));
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:dyiDateShimmer 6s ease-in-out infinite;
line-height:1.3;
}
@keyframes dyiDateShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.dyi-nav-sub{
font-size:10px;
color:var(--t3);
margin-top:3px;
line-height:1.5;
}
/* Quick day pills (last 7) */
.dyi-day-pills-wrap{
display:flex;
align-items:center;
gap:8px;
margin-top:10px;
}
.dyi-day-pills{
flex:1;
display:flex;
gap:5px;
overflow-x:auto;
padding:6px 2px 4px;
scrollbar-width:none;
}
.dyi-day-pills::-webkit-scrollbar{display:none;}
.dyi-day-pill{
flex-shrink:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-width:48px;
padding:6px 8px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
color:var(--t3);
border-radius:10px;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
position:relative;
}
.dyi-day-pill:hover{
background:rgba(255,255,255,.08);
color:var(--t1);
transform:translateY(-2px);
}
.dyi-day-pill.is-today{
border-color:rgba(74,222,128,.35);
}
.dyi-day-pill.is-active{
background:linear-gradient(135deg, var(--g1), var(--g2));
border-color:var(--g2);
color:#0a0a0a;
box-shadow:0 4px 12px rgba(201,168,76,.4);
}
.dyi-day-pill.is-active.is-today{
background:linear-gradient(135deg, #22C55E, #15803d);
border-color:#4ade80;
color:#fff;
box-shadow:0 4px 12px rgba(34,197,94,.45);
}
.dyi-dp-name{
font-size:9.5px;
font-weight:800;
font-family:'Cairo',sans-serif;
letter-spacing:.2px;
opacity:.9;
}
.dyi-dp-num{
font-family:var(--font);
font-size:15px;
font-weight:900;
letter-spacing:-.5px;
line-height:1;
margin-top:2px;
}
.dyi-dp-badge{
position:absolute;
top:3px; left:3px;
color:#4ade80;
font-size:8px;
filter:drop-shadow(0 0 4px rgba(74,222,128,.7));
}
.dyi-day-pill.is-active.is-today .dyi-dp-badge{color:#fff;}
.dyi-day-today-btn{
flex-shrink:0;
padding:8px 12px;
background:linear-gradient(135deg, #22C55E, #15803d);
color:#fff;
border:none;
border-radius:10px;
font-size:10.5px;font-weight:900;
font-family:'Cairo',sans-serif;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
box-shadow:0 4px 12px rgba(34,197,94,.35);
transition:all .2s;
white-space:nowrap;
}
.dyi-day-today-btn:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(34,197,94,.5);
}
@media(max-width:560px){
.dyi-nav-btn{width:38px;height:38px;}
.dyi-nav-date{font-size:13px;}
.dyi-day-pill{min-width:42px;padding:5px 6px;}
.dyi-dp-num{font-size:13.5px;}
}
.dyi-hero{
position:relative;
background:linear-gradient(135deg,
rgba(168,85,247,.12) 0%,
rgba(59,130,246,.10) 50%,
rgba(34,197,94,.08) 100%);
border:1px solid rgba(201,168,76,.45);
border-radius:22px;
padding:0;
margin-bottom:14px;
overflow:hidden;
box-shadow:
0 14px 36px rgba(0,0,0,.3),
0 0 0 1px rgba(255,255,255,.04) inset;
}
.dyi-hero-bg-orb{
position:absolute;
border-radius:50%;
filter:blur(60px);
pointer-events:none;
animation:dyiOrb 14s ease-in-out infinite;
}
.dyi-orb-1{
width:280px;height:280px;
background:radial-gradient(circle,rgba(168,85,247,.35),transparent 65%);
top:-100px;right:-60px;
animation-delay:0s;
}
.dyi-orb-2{
width:220px;height:220px;
background:radial-gradient(circle,rgba(59,130,246,.3),transparent 65%);
bottom:-80px;left:30%;
animation-delay:-5s;
}
.dyi-orb-3{
width:200px;height:200px;
background:radial-gradient(circle,rgba(34,197,94,.3),transparent 65%);
top:40%;left:-50px;
animation-delay:-9s;
}
@keyframes dyiOrb{
0%,100%{transform:translate(0,0) scale(1); opacity:.7;}
33%{transform:translate(25px,-15px) scale(1.1); opacity:.9;}
66%{transform:translate(-15px,15px) scale(.95); opacity:.85;}
}
.dyi-hero-inner{
position:relative;z-index:1;
padding:18px 20px 20px;
}
.dyi-hero-top{
display:flex;align-items:center;justify-content:space-between;
margin-bottom:14px;
}
.dyi-hero-date-block{flex:1;}
.dyi-hero-date-lbl{
font-size:10.5px;
color:var(--t3);
font-weight:800;
letter-spacing:.5px;
margin-bottom:4px;
}
.dyi-hero-date-val{
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:var(--g2);
letter-spacing:-.2px;
line-height:1.4;
}
.dyi-hero-live-badge{
display:inline-flex;align-items:center;gap:6px;
background:rgba(34,197,94,.12);
border:1px solid rgba(74,222,128,.4);
color:#4ade80;
font-size:10px;
font-weight:800;
padding:5px 11px;
border-radius:9px;
font-family:'Cairo',sans-serif;
letter-spacing:.3px;
}
.dyi-live-dot{
width:7px;height:7px;
background:#4ade80;
border-radius:50%;
box-shadow:0 0 8px rgba(74,222,128,.7);
animation:dyiLive 1.5s ease-in-out infinite;
}
@keyframes dyiLive{
0%,100%{opacity:.7; transform:scale(1);}
50%{opacity:1; transform:scale(1.3);}
}
.dyi-hero-main{text-align:center; margin-bottom:14px;}
.dyi-hero-label{
font-family:var(--font);
font-size:11.5px;
font-weight:800;
color:var(--g2);
letter-spacing:.2px;
margin-bottom:5px;
text-shadow:0 1px 4px rgba(201,168,76,.25);
}
.dyi-hero-value{
font-family:var(--font);
font-size:40px;
font-weight:900;
letter-spacing:-1.2px;
line-height:1;
margin-bottom:9px;
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:dyiValShimmer 7s ease-in-out infinite;
}
.dyi-hero-value.is-positive{
background-image:linear-gradient(135deg,#fff 0%, #4ade80 50%, #22C55E 100%);
}
.dyi-hero-value.is-negative{
background-image:linear-gradient(135deg,#fff 0%, #f87171 50%, #ef4444 100%);
}
@keyframes dyiValShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.dyi-hero-unit{
font-size:18px;
opacity:.7;
font-weight:700;
margin-right:5px;
-webkit-text-fill-color:initial;
background:none;
color:var(--t2);
}
.dyi-hero-sub{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
gap:8px;
font-size:11.5px;
font-weight:700;
}
.dyi-hero-chip{
display:inline-flex;align-items:center;gap:5px;
padding:3px 10px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
border-radius:8px;
font-family:'Cairo',sans-serif;
}
.dyi-hero-sep{
color:var(--t4);
font-weight:900;
font-family:var(--font);
}
/* Hourly sparkline */
.dyi-hero-spark{
padding:11px 13px;
background:rgba(0,0,0,.18);
border:1px solid rgba(255,255,255,.05);
border-radius:12px;
}
.dyi-spark-label{
font-size:10px;color:var(--t3);
font-weight:700;
margin-bottom:8px;
letter-spacing:.3px;
}
.dyi-spark-bars{
display:flex;align-items:flex-end;justify-content:space-between;
gap:1.5px;
height:38px;
}
.dyi-spark-bar{
flex:1;
min-width:5px;
min-height:2px;
background:linear-gradient(180deg, var(--g2) 0%, var(--g1) 100%);
border-radius:2px 2px 0 0;
box-shadow:0 0 6px rgba(201,168,76,.3);
transition:all .3s;
}
.dyi-spark-bar:hover{
background:linear-gradient(180deg, #fde047 0%, var(--g2) 100%);
box-shadow:0 0 12px rgba(201,168,76,.6);
}
/* Quick stats */
.dyi-stats-grid{
display:grid;
grid-template-columns:repeat(5, 1fr);
gap:7px;
margin-bottom:14px;
}
@media(max-width:600px){
.dyi-stats-grid{grid-template-columns:repeat(5, 1fr);gap:5px;}
}
.dyi-stat{
display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:13px;
padding:11px 6px;
transition:transform .2s, border-color .2s, box-shadow .2s;
}
.dyi-stat:hover{
transform:translateY(-2px);
border-color:rgba(201,168,76,.35);
box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.dyi-stat-ico{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:15px;
flex-shrink:0;
}
.dyi-stat-body{min-width:0;width:100%;}
.dyi-stat-val{
font-family:var(--font);
font-size:16px;font-weight:900;
color:var(--t1);
letter-spacing:-.4px;
line-height:1;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dyi-stat-lbl{
font-size:8.5px;color:var(--t3);
font-weight:700;
margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Cash vs Bank split */
.dyi-split-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
margin-bottom:14px;
}
@media(max-width:760px){
.dyi-split-grid{grid-template-columns:1fr;}
}
.dyi-side{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
padding:13px 14px;
position:relative;
overflow:hidden;
}
.dyi-side-cash{border-color:rgba(74,222,128,.3);}
.dyi-side-cash::before{
content:'';position:absolute;
top:-40px;left:-40px;
width:140px;height:140px;
background:radial-gradient(circle,rgba(34,197,94,.2),transparent 70%);
border-radius:50%;
filter:blur(30px);
pointer-events:none;
}
.dyi-side-bank{border-color:rgba(96,165,250,.3);}
.dyi-side-bank::before{
content:'';position:absolute;
top:-40px;right:-40px;
width:140px;height:140px;
background:radial-gradient(circle,rgba(59,130,246,.2),transparent 70%);
border-radius:50%;
filter:blur(30px);
pointer-events:none;
}
.dyi-side-h{
display:flex;align-items:center;gap:10px;
margin-bottom:11px;
position:relative;z-index:1;
}
.dyi-side-ico{
width:40px;height:40px;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
font-size:19px;
color:#fff;
flex-shrink:0;
box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.dyi-side-title{
font-family:var(--font);
font-size:13px;font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.dyi-side-sub{
font-size:10.5px;color:var(--t3);
margin-top:2px;
}
.dyi-side-h > div:nth-child(2){flex:1;min-width:0;}
.dyi-side-amount{
font-family:var(--font);
font-size:18px;font-weight:900;
letter-spacing:-.5px;
line-height:1;
flex-shrink:0;
}
.dyi-side-amount span{
font-size:10px;
opacity:.6;
margin-right:3px;
font-weight:700;
}
.dyi-method-pills{
display:flex;flex-wrap:wrap;gap:5px;
margin-bottom:9px;
position:relative;z-index:1;
}
.dyi-mp{
display:inline-flex;align-items:center;gap:6px;
padding:5px 10px;
border-radius:8px;
font-size:10.5px;
font-weight:800;
font-family:'Cairo',sans-serif;
}
.dyi-mp.is-cash{
background:rgba(34,197,94,.08);
border:1px solid rgba(74,222,128,.25);
color:#86efac;
}
.dyi-mp.is-bank{
background:rgba(59,130,246,.08);
border:1px solid rgba(96,165,250,.25);
color:#93c5fd;
}
.dyi-mp-val{font-family:var(--font); letter-spacing:-.2px;}
.dyi-empty{
text-align:center;
font-size:10.5px;color:var(--t4);
padding:14px;
font-style:italic;
}
.dyi-side-vat{
display:flex;align-items:center;justify-content:space-between;gap:8px;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:9px;
padding:7px 11px;
margin-top:6px;
position:relative;z-index:1;
}
.dyi-side-vat-lbl{
font-size:10.5px;
color:var(--t3);
font-weight:700;
}
.dyi-side-vat-val{
font-family:var(--font);
font-size:12px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
/* Section blocks */
.dyi-section{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
padding:13px;
margin-bottom:12px;
}
.dyi-section-h{
display:flex;align-items:center;gap:9px;
margin-bottom:11px;
}
.dyi-section-ico{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
color:#fff;
font-size:14px;
flex-shrink:0;
}
.dyi-section-title{
flex:1;
font-family:var(--font);
font-size:12.5px;font-weight:900;
color:var(--t1);
}
.dyi-section-total{
font-family:var(--font);
font-size:14px;font-weight:900;
letter-spacing:-.3px;
}
/* Service rows */
.dyi-svc-list{display:flex;flex-direction:column;gap:7px;}
.dyi-svc-row{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.18);
border:1px solid var(--bdr);
border-radius:10px;
padding:8px 11px;
}
.dyi-svc-ico{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
background:rgba(59,130,246,.12);
border-radius:9px;
font-size:16px;
flex-shrink:0;
}
.dyi-svc-info{flex:1;min-width:0;}
.dyi-svc-name{
font-family:var(--font);
font-size:12px;font-weight:800;
color:var(--t1);
margin-bottom:4px;
}
.dyi-svc-count{
font-size:9.5px;color:var(--t4);
font-weight:700;
margin-right:5px;
}
.dyi-svc-bar{
height:4px;
background:rgba(255,255,255,.04);
border-radius:2px;
overflow:hidden;
}
.dyi-svc-bar-fill{
height:100%;
background:linear-gradient(90deg, #3B82F6, #60A5FA);
border-radius:2px;
box-shadow:0 0 6px rgba(59,130,246,.5);
transition:width .6s cubic-bezier(.34,1.56,.64,1);
}
.dyi-svc-val{
font-family:var(--font);
font-size:14px;font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
flex-shrink:0;
}
.dyi-svc-val span{
font-size:10px;opacity:.6;margin-right:3px;font-weight:700;
}
/* Outgoings rows */
.dyi-out-rows{display:flex;flex-direction:column;gap:7px;}
.dyi-out-row{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.18);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 11px;
}
.dyi-out-ico{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:15px;
flex-shrink:0;
}
.dyi-out-info{flex:1;min-width:0;}
.dyi-out-label{
font-family:var(--font);
font-size:12px;font-weight:800;
color:var(--t1);
}
.dyi-out-sub{
font-size:10px;color:var(--t3);
margin-top:2px;
line-height:1.5;
}
.dyi-out-val{
font-family:var(--font);
font-size:14px;font-weight:900;
color:#f87171;
letter-spacing:-.3px;
flex-shrink:0;
}
.dyi-out-val span{
font-size:10px;opacity:.6;margin-right:3px;font-weight:700;
}
/* Net Card */
.dyi-net-card{
background:linear-gradient(155deg,rgba(34,197,94,.08),rgba(34,197,94,.02));
border:1.5px solid rgba(74,222,128,.35);
border-radius:16px;
padding:15px;
margin-bottom:12px;
position:relative;
overflow:hidden;
box-shadow:0 8px 24px rgba(34,197,94,.12);
}
.dyi-net-card::before{
content:'';position:absolute;
top:-40px;right:-40px;
width:160px;height:160px;
background:radial-gradient(circle,rgba(34,197,94,.18),transparent 70%);
border-radius:50%;
filter:blur(40px);
pointer-events:none;
}
.dyi-net-h{
display:flex;align-items:center;gap:11px;
margin-bottom:12px;
position:relative;z-index:1;
}
.dyi-net-ico{
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#22C55E,#15803d);
color:#fff;
border-radius:12px;
font-size:19px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(34,197,94,.4);
}
.dyi-net-title{
font-family:var(--font);
font-size:13.5px;font-weight:900;
color:#4ade80;
}
.dyi-net-sub{
font-size:11px;color:var(--t3);
margin-top:3px;
}
.dyi-net-rows{
display:flex;flex-direction:column;gap:6px;
margin-bottom:12px;
position:relative;z-index:1;
}
.dyi-net-row{
display:flex;align-items:center;justify-content:space-between;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:9px;
padding:9px 12px;
font-family:var(--font);
font-size:12.5px;
font-weight:800;
}
.dyi-net-row > span:first-child{color:var(--t2);}
.dyi-net-row-val{
letter-spacing:-.3px;
font-weight:900;
}
.dyi-net-pos .dyi-net-row-val{color:#4ade80;}
.dyi-net-neg .dyi-net-row-val{color:#f87171;}
.dyi-net-result{
background:linear-gradient(155deg,rgba(34,197,94,.12),rgba(34,197,94,.04));
border-color:rgba(74,222,128,.4);
padding:11px 12px;
}
.dyi-net-result > span:first-child{
color:var(--t1);
font-size:13px;
}
.dyi-net-result .dyi-net-row-val{font-size:15px;}
/* 🆕 INFO ROW (expenses for display) */
.dyi-net-info{
background:linear-gradient(155deg,rgba(168,85,247,.06),rgba(168,85,247,.02)) !important;
border-color:rgba(168,85,247,.2) !important;
}
.dyi-net-info > span:first-child{
color:var(--t3) !important;
font-style:italic;
}
.dyi-net-info .dyi-net-row-val{color:var(--t3) !important;}
/* 🆕 SHADOW ROW (alternate calculation) */
.dyi-net-shadow{
background:rgba(255,255,255,.02);
border:1px dashed rgba(255,255,255,.08) !important;
font-size:11px !important;
opacity:.85;
}
.dyi-net-shadow > span:first-child{
color:var(--t3) !important;
font-style:italic;
}
/* 🆕 MODE TOGGLE — Smart Net calculation switcher */
.dyi-mode-toggle{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 14px;
margin-bottom:12px;
background:linear-gradient(155deg, rgba(168,85,247,.06), rgba(168,85,247,.02));
border:1.5px solid rgba(168,85,247,.18);
border-radius:13px;
position:relative;
overflow:hidden;
flex-wrap:wrap;
}
.dyi-mode-toggle::before{
content:'';
position:absolute;
top:0;left:0;
width:3px;height:100%;
background:linear-gradient(180deg,#c084fc,#a855f7);
box-shadow:0 0 14px rgba(168,85,247,.4);
}
.dyi-mt-info{flex:1;min-width:180px;}
.dyi-mt-label{
font-size:12px;
font-weight:900;
color:var(--t1);
margin-bottom:3px;
letter-spacing:-.1px;
}
.dyi-mt-sub{
font-size:10.5px;
color:var(--t3);
font-weight:700;
line-height:1.55;
}
.dyi-mt-switch{
display:inline-flex;
background:rgba(0,0,0,.4);
border:1px solid var(--bdr);
border-radius:11px;
padding:3px;
flex-shrink:0;
}
.dyi-mt-opt{
display:inline-flex;align-items:center;gap:5px;
padding:7px 12px;
background:transparent;
border:none;
color:var(--t3);
font-family:'Cairo',sans-serif;
font-size:11px;
font-weight:800;
cursor:pointer;
border-radius:8px;
transition:all .25s;
white-space:nowrap;
}
.dyi-mt-opt:hover{color:var(--t1);}
.dyi-mt-opt.is-on{
background:linear-gradient(135deg,#a855f7,#7c3aed);
color:#fff;
box-shadow:0 4px 12px rgba(168,85,247,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
/* 🆕 Mode badge on net card header */
.dyi-mode-badge{
display:inline-flex;align-items:center;
padding:4px 10px;
border-radius:10px;
font-family:var(--font);
font-size:10px;
font-weight:900;
letter-spacing:.4px;
flex-shrink:0;
}
.dyi-mode-badge.is-op{
background:rgba(168,85,247,.15);
border:1px solid rgba(168,85,247,.35);
color:#c084fc;
}
.dyi-mode-badge.is-full{
background:rgba(239,68,68,.12);
border:1px solid rgba(239,68,68,.3);
color:#fca5a5;
}
/* 🆕 Display-only flag on expense row */
.dyi-out-row.is-display-only{
background:linear-gradient(155deg, rgba(168,85,247,.06), rgba(0,0,0,.2)) !important;
border-color:rgba(168,85,247,.2) !important;
position:relative;
}
.dyi-out-row.is-display-only::before{
content:'';
position:absolute;
top:0;left:0;
width:3px;height:100%;
background:linear-gradient(180deg,#c084fc,#a855f7);
border-radius:0 3px 3px 0;
}
.dyi-display-tag{
position:absolute;
top:-9px;
right:14px;
display:inline-flex;align-items:center;
padding:2px 9px;
background:linear-gradient(135deg,#a855f7,#7c3aed);
color:#fff;
border-radius:8px;
font-size:9px;
font-weight:900;
letter-spacing:.3px;
box-shadow:0 4px 10px rgba(168,85,247,.4);
white-space:nowrap;
}
.dyi-info-chip{
display:inline-flex;align-items:center;justify-content:center;
width:14px;height:14px;
background:rgba(168,85,247,.18);
color:#c084fc;
border:1px solid rgba(168,85,247,.3);
border-radius:50%;
font-size:9px;
font-weight:900;
font-style:italic;
margin-right:4px;
vertical-align:middle;
}
/* Hero mode hint */
.dyi-hero-mode-hint{
display:inline-flex;align-items:center;
padding:3px 9px;
background:linear-gradient(135deg,rgba(168,85,247,.22),rgba(168,85,247,.1));
border:1px solid rgba(168,85,247,.4);
color:#c084fc;
border-radius:9px;
font-family:var(--font);
font-size:10px;
font-weight:900;
letter-spacing:.3px;
margin-right:6px;
white-space:nowrap;
cursor:help;
}
.dyi-net-side-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
position:relative;z-index:1;
}
.dyi-net-side{
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 12px;
}
.dyi-net-side-cash{border-color:rgba(74,222,128,.25);}
.dyi-net-side-bank{border-color:rgba(96,165,250,.25);}
.dyi-nss-lbl{
font-size:10px;color:var(--t3);
font-weight:700;
margin-bottom:4px;
}
.dyi-nss-val{
font-family:var(--font);
font-size:14px;font-weight:900;
letter-spacing:-.3px;
}
/* Close banner */
.dyi-close-banner{
display:flex;align-items:center;gap:12px;
background:linear-gradient(135deg, rgba(168,85,247,.08), rgba(168,85,247,.02));
border:1px dashed rgba(168,85,247,.35);
border-radius:13px;
padding:11px 13px;
}
.dyi-close-icon{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:rgba(168,85,247,.15);
color:#c084fc;
border-radius:10px;
font-size:17px;
flex-shrink:0;
}
.dyi-close-text{flex:1;min-width:0;}
.dyi-close-title{
font-family:var(--font);
font-size:12px;font-weight:900;
color:#c084fc;
}
.dyi-close-sub{
font-size:10.5px;color:var(--t3);
margin-top:3px;
line-height:1.6;
}
@media(max-width:560px){
.dyi-hero-inner{padding:14px 14px 16px;}
.dyi-hero-value{font-size:32px;}
.dyi-hero-unit{font-size:15px;}
.dyi-net-side-grid{grid-template-columns:1fr;}
}
/* ════════ Consolidated Income Hero — Cash + Bank + Emergency unified ════════ */
.fin-consolidated-hero{
position:relative;
background:linear-gradient(135deg,
rgba(34,197,94,.10) 0%,
rgba(59,130,246,.10) 50%,
rgba(239,68,68,.10) 100%);
border:1px solid rgba(201,168,76,.4);
border-radius:20px;
padding:20px 22px;
margin-bottom:14px;
overflow:hidden;
cursor:pointer;
transition:all .35s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 10px 30px rgba(0,0,0,.2), 0 0 0 1px rgba(255,255,255,.04) inset;
}
.fin-consolidated-hero:hover{
transform:translateY(-2px);
box-shadow:0 16px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(201,168,76,.3) inset, 0 0 30px rgba(201,168,76,.15);
border-color:rgba(201,168,76,.55);
}
.fin-consolidated-hero:active{transform:translateY(-1px);}
/* Background orbs */
.fch-bg-orb{
position:absolute;
border-radius:50%;
filter:blur(50px);
pointer-events:none;
animation:fchOrb 12s ease-in-out infinite;
}
.fch-orb-1{
width:240px;height:240px;
background:radial-gradient(circle,rgba(34,197,94,.35),transparent 65%);
top:-80px;right:-50px;
animation-delay:0s;
}
.fch-orb-2{
width:200px;height:200px;
background:radial-gradient(circle,rgba(59,130,246,.35),transparent 65%);
bottom:-60px;left:30%;
animation-delay:-4s;
}
.fch-orb-3{
width:180px;height:180px;
background:radial-gradient(circle,rgba(239,68,68,.3),transparent 65%);
top:50%;left:-40px;
animation-delay:-8s;
}
@keyframes fchOrb{
0%,100%{transform:translate(0,0) scale(1); opacity:.7;}
33%{transform:translate(20px,-15px) scale(1.1); opacity:.9;}
66%{transform:translate(-15px,10px) scale(.95); opacity:.8;}
}
.fch-content{
position:relative;z-index:1;
display:flex;align-items:center;gap:16px;
}
.fch-icon-wrap{
width:64px;height:64px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--g1),var(--g2));
color:#1a1206;
border-radius:18px;
flex-shrink:0;
box-shadow:0 8px 24px rgba(201,168,76,.4),0 0 0 1px rgba(255,255,255,.15) inset;
}
.fch-main{flex:1;min-width:0;}
.fch-label{
font-family:var(--font);
font-size:11.5px;
font-weight:800;
color:var(--g2);
letter-spacing:.2px;
margin-bottom:5px;
text-shadow:0 1px 4px rgba(201,168,76,.25);
}
.fch-value{
font-family:var(--font);
font-size:36px;
font-weight:900;
background:linear-gradient(135deg,#fff 0%, var(--g2) 50%, var(--g1) 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:-1px;
line-height:1;
margin-bottom:9px;
animation:fchValShimmer 7s ease-in-out infinite;
}
@keyframes fchValShimmer{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
.fch-unit{
font-size:18px;
opacity:.7;
font-weight:700;
margin-right:4px;
-webkit-text-fill-color:initial;
background:none;
color:var(--g2);
}
.fch-sub{
display:flex;align-items:center;flex-wrap:wrap;
gap:8px;
font-size:11px;
font-weight:700;
color:var(--t2);
}
.fch-source{
display:inline-flex;align-items:center;gap:5px;
padding:3px 9px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);
border-radius:8px;
transition:all .2s;
font-family:'Cairo',sans-serif;
}
.fch-source:hover{
background:rgba(255,255,255,.07);
border-color:rgba(255,255,255,.12);
}
.fch-dot{
width:6px;height:6px;
border-radius:50%;
box-shadow:0 0 6px currentColor;
}
.fch-source.fch-cash{color:#86efac;}
.fch-source.fch-bank{color:#93c5fd;}
.fch-source.fch-emergency{color:#fca5a5;}
.fch-sep{
color:var(--t4);
font-size:13px;
font-weight:900;
font-family:var(--font);
}
.fch-cta{
display:flex;align-items:center;gap:4px;
padding:7px 11px;
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.3);
border-radius:9px;
color:var(--g2);
font-size:10.5px;
font-weight:800;
font-family:'Cairo',sans-serif;
flex-shrink:0;
transition:all .25s;
}
.fin-consolidated-hero:hover .fch-cta{
background:rgba(201,168,76,.2);
transform:translateX(3px);
}
@media(max-width:560px){
.fin-consolidated-hero{padding:16px 14px;}
.fch-content{gap:12px;}
.fch-icon-wrap{width:52px;height:52px;border-radius:14px;}
.fch-icon-wrap svg{width:24px;height:24px;}
.fch-value{font-size:28px;}
.fch-unit{font-size:14px;}
.fch-cta{display:none;}
}
/* Treasury sub-cards — hover effect */
.fin-kpi.fin-kpi-fund{
transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.fin-kpi.fin-kpi-fund:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.25), 0 0 0 1px var(--fc,#a855f7)33 inset;
border-color:var(--fc,#a855f7);
}
/* Modal entrance animations */
@keyframes fadeIn{
from{opacity:0;}
to{opacity:1;}
}
@keyframes popIn{
0%{opacity:0; transform:scale(.92) translateY(8px);}
100%{opacity:1; transform:scale(1) translateY(0);}
}
/* Monthly cycle card entrance */
.month-cycle-card{
animation:cycleCardEnter .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes cycleCardEnter{
from{opacity:0; transform:translateY(12px) scale(.98);}
to{opacity:1; transform:translateY(0) scale(1);}
}
/* Card blocks staggered entry */
.mcc-block{
animation:blockEnter .5s cubic-bezier(.34,1.56,.64,1) backwards;
}
.mcc-block:nth-child(1){animation-delay:.1s;}
.mcc-block:nth-child(3){animation-delay:.18s;}
.mcc-block:nth-child(5){animation-delay:.26s;}
.mcc-block:nth-child(7){animation-delay:.34s;}
@keyframes blockEnter{
from{opacity:0; transform:translateY(8px) scale(.95);}
to{opacity:1; transform:translateY(0) scale(1);}
}
/* Section headers (paid / unpaid groups) */
.obl-section-h{
display:flex;align-items:center;gap:10px;
padding:11px 4px 8px;
margin-bottom:6px;
}
.obl-section-h h3{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
margin:0;
display:inline-flex;
align-items:center;
gap:7px;
flex:1;
}
.obl-section-count{
background:rgba(255,255,255,.05);
border:1px solid var(--bdr);
color:var(--t3);
font-size:10px;font-weight:800;
padding:2px 8px;border-radius:9px;
}
.obl-section-tot{
font-family:var(--font);
font-size:13.5px;font-weight:900;
color:var(--rd);
}
.obl-section-dot{
width:10px;height:10px;
border-radius:50%;
box-shadow:0 0 8px currentColor;
flex-shrink:0;
}
/* Progress section */
.obl-progress-section{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
padding:14px 16px;
margin-bottom:14px;
}
.obl-progress-h{
display:flex;align-items:center;justify-content:space-between;gap:10px;
margin-bottom:10px;
}
.obl-progress-title{
font-family:var(--font);font-size:13px;font-weight:900;color:var(--t1);
}
.obl-progress-sub{font-size:10.5px;color:var(--t3);margin-top:2px;}
.obl-progress-pct{
font-family:var(--font);font-size:24px;font-weight:900;
letter-spacing:-.5px;
line-height:1;
}
.obl-progress-bar{
height:10px;
background:rgba(255,255,255,.04);
border-radius:5px;
overflow:hidden;
position:relative;
}
.obl-progress-fill{
height:100%;
border-radius:5px;
transition:width .6s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 0 12px currentColor;
}
/* ════════ Monthly Cycle Card ════════ */
.month-cycle-card{
background:linear-gradient(155deg,rgba(168,85,247,.1),rgba(168,85,247,.02));
border:1px solid rgba(168,85,247,.3);
border-radius:18px;
padding:18px;
margin-bottom:14px;
position:relative;
overflow:hidden;
}
.month-cycle-card::before{
content:'';position:absolute;
top:-50px;right:-50px;
width:200px;height:200px;
background:radial-gradient(circle,rgba(168,85,247,.15),transparent 70%);
border-radius:50%;
filter:blur(40px);
pointer-events:none;
}
.mcc-h{
display:flex;align-items:center;gap:11px;
margin-bottom:16px;
position:relative;z-index:1;
}
.mcc-h-ico{
width:44px;height:44px;
background:linear-gradient(135deg,#a855f7,#7c3aed);
color:#fff;
display:flex;align-items:center;justify-content:center;
border-radius:12px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(168,85,247,.4),0 0 0 1px rgba(255,255,255,.1) inset;
}
.mcc-h-title{
font-family:var(--font);font-size:15px;font-weight:900;
color:#c084fc;
}
.mcc-h-sub{font-size:11px;color:var(--t3);margin-top:3px;line-height:1.6;}
/* Flow blocks: Income → − → Obligations → − → Other → = → Distributable */
.mcc-flow{
display:grid;
grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
gap:8px;
align-items:stretch;
position:relative;z-index:1;
margin-bottom:13px;
}
@media(max-width:760px){
.mcc-flow{
grid-template-columns:1fr 1fr;
}
.mcc-flow .mcc-op{
grid-column:1/-1;
height:14px;font-size:13px;
}
.mcc-block{font-size:11.5px;}
.mcc-block-val{font-size:18px !important;}
}
/* ════════ NEW: Clean Vertical Rows for Monthly Cycle ════════ */
.mcc-rows{
display:flex;flex-direction:column;
gap:6px;
margin-bottom:13px;
position:relative;z-index:1;
}
.mcc-row{
display:flex;align-items:center;gap:12px;
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:13px;
padding:12px 14px;
position:relative;
overflow:hidden;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.mcc-row::before{
content:'';position:absolute;
top:0;right:0;
width:4px;height:100%;
background:var(--rowc, #94a3b8);
box-shadow:0 0 12px var(--rowc, #94a3b8);
}
.mcc-row-income{--rowc:#4ade80; border-color:rgba(74,222,128,.25);}
.mcc-row-deduct{--rowc:#f87171; border-color:rgba(239,68,68,.2);}
.mcc-row-result{
padding:16px 14px;
border-width:1.5px;
}
.mcc-row-result.is-positive{
--rowc:#4ade80;
background:linear-gradient(155deg, rgba(34,197,94,.12), rgba(34,197,94,.02));
border-color:rgba(74,222,128,.4);
box-shadow:0 6px 20px rgba(34,197,94,.15);
}
.mcc-row-result.is-zero{
--rowc:#94a3b8;
background:linear-gradient(155deg, rgba(148,163,184,.08), rgba(148,163,184,.02));
border-color:rgba(148,163,184,.25);
}
.mcc-row-icon-wrap{
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
font-size:19px;
border-radius:11px;
flex-shrink:0;
box-shadow:0 2px 6px rgba(0,0,0,.15) inset;
}
.mcc-row-main{flex:1;min-width:0;}
.mcc-row-label{
font-family:var(--font);
font-size:13.5px;font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
line-height:1.3;
}
.mcc-row-result .mcc-row-label{font-size:15px;}
.mcc-row-sub{
font-size:11px;color:var(--t3);
margin-top:3px;
line-height:1.5;
}
.mcc-row-val{
font-family:var(--font);
font-size:22px;font-weight:900;
letter-spacing:-.5px;
line-height:1;
flex-shrink:0;
}
.mcc-row-result .mcc-row-val{font-size:26px;}
.mcc-row-val span{
font-size:11px;
opacity:.6;
font-weight:700;
margin-right:3px;
}
.mcc-row-val-pos{color:#4ade80;}
.mcc-row-val-neg{color:#f87171;}
/* Operators between rows */
.mcc-row-op{
align-self:center;
font-family:var(--font);
font-size:18px;font-weight:900;
color:var(--t4);
line-height:1;
padding:2px 0;
}
.mcc-row-op-eq{
color:var(--g2);
font-size:22px;
text-shadow:0 0 12px rgba(201,168,76,.4);
}
@media(max-width:560px){
.mcc-row{padding:10px 12px;gap:10px;}
.mcc-row-icon-wrap{width:36px;height:36px;font-size:17px;border-radius:10px;}
.mcc-row-label{font-size:12.5px;}
.mcc-row-sub{font-size:10px;}
.mcc-row-val{font-size:18px;}
.mcc-row-result .mcc-row-val{font-size:22px;}
}
/* ════════ VAT Liability Card ════════ */
.vat-liability-card{
background:linear-gradient(155deg,rgba(245,158,11,.08),rgba(245,158,11,.02));
border:1px solid rgba(245,158,11,.3);
border-radius:16px;
padding:16px;
margin-bottom:14px;
position:relative;
overflow:hidden;
}
.vat-liability-card::before{
content:'';position:absolute;
top:-40px;left:-40px;
width:160px;height:160px;
background:radial-gradient(circle,rgba(245,158,11,.2),transparent 70%);
border-radius:50%;
filter:blur(40px);
pointer-events:none;
}
.vat-liability-card.is-paid{
background:linear-gradient(155deg,rgba(34,197,94,.06),rgba(34,197,94,.01));
border-color:rgba(34,197,94,.3);
}
.vat-liability-card.is-paid::before{
background:radial-gradient(circle,rgba(34,197,94,.2),transparent 70%);
}
.vlc-h{
display:flex;align-items:center;gap:11px;
margin-bottom:14px;
position:relative;z-index:1;
}
.vlc-ico{
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#F59E0B,#d97706);
color:#fff;
border-radius:13px;
font-size:22px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(245,158,11,.35);
}
.is-paid .vlc-ico{
background:linear-gradient(135deg,#22C55E,#15803d);
box-shadow:0 6px 16px rgba(34,197,94,.35);
}
.vlc-title{
font-family:var(--font);
font-size:14px;font-weight:900;
color:#fbbf24;
display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.is-paid .vlc-title{color:#4ade80;}
.vlc-badge-paid, .vlc-badge-pending{
font-size:9.5px;font-weight:800;
padding:2px 9px;border-radius:9px;
font-family:'Cairo',sans-serif;
}
.vlc-badge-paid{
background:rgba(34,197,94,.15);
border:1px solid rgba(34,197,94,.35);
color:#4ade80;
}
.vlc-badge-pending{
background:rgba(245,158,11,.15);
border:1px solid rgba(245,158,11,.35);
color:#fbbf24;
animation:vatPulse 2.4s ease-in-out infinite;
}
@keyframes vatPulse{
0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,.4);}
50%{box-shadow:0 0 0 6px rgba(245,158,11,0);}
}
.vlc-sub{
font-size:11px;color:var(--t3);
margin-top:3px;line-height:1.6;
}
.vlc-total{
font-family:var(--font);
font-size:26px;font-weight:900;
color:#fbbf24;
letter-spacing:-.5px;
line-height:1;
}
.is-paid .vlc-total{color:#4ade80;}
.vlc-total span{
font-size:13px;opacity:.6;margin-right:3px;
font-weight:700;
}
.vlc-split{
display:flex;flex-direction:column;gap:8px;
position:relative;z-index:1;
}
.vlc-split-row{
display:flex;align-items:center;gap:11px;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:11px;
padding:10px 12px;
}
.vlc-split-icon{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
font-size:17px;
border-radius:9px;
flex-shrink:0;
}
.vlc-split-info{flex:1;min-width:0;}
.vlc-split-label{
font-family:var(--font);
font-size:12.5px;font-weight:800;
color:var(--t1);
}
.vlc-split-sub{
font-size:10.5px;color:var(--t3);
margin-top:2px;line-height:1.5;
}
.vlc-split-val{
font-family:var(--font);
font-size:17px;font-weight:900;
letter-spacing:-.3px;
}
.vlc-split-val span{
font-size:10px;opacity:.6;margin-right:3px;font-weight:700;
}
.vlc-hint{
margin-top:11px;
padding:10px 13px;
background:rgba(59,130,246,.06);
border:1px solid rgba(59,130,246,.2);
border-radius:10px;
font-size:11px;
color:#93c5fd;
line-height:1.7;
position:relative;z-index:1;
}
/* ════════ VAT Cash/Bank Split (in treasury toggles area) ════════ */
.vat-split-breakdown{
margin-top:12px;
background:linear-gradient(155deg,rgba(245,158,11,.04),rgba(245,158,11,.01));
border:1px solid rgba(245,158,11,.22);
border-radius:13px;
padding:14px;
position:relative;
overflow:hidden;
}
.vat-split-breakdown.is-active{
background:linear-gradient(155deg,rgba(34,197,94,.05),rgba(34,197,94,.01));
border-color:rgba(34,197,94,.25);
}
.vat-split-breakdown::before{
content:'';position:absolute;
top:-30px;left:-30px;
width:120px;height:120px;
background:radial-gradient(circle,rgba(245,158,11,.15),transparent 70%);
border-radius:50%;
filter:blur(30px);
pointer-events:none;
}
.vat-split-breakdown.is-active::before{
background:radial-gradient(circle,rgba(34,197,94,.15),transparent 70%);
}
.vsb-header{
display:flex;align-items:center;gap:9px;
margin-bottom:11px;
padding-bottom:10px;
border-bottom:1px solid var(--bdr);
position:relative;z-index:1;
}
.vsb-h-ico{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
background:rgba(245,158,11,.15);
color:#fbbf24;
border-radius:9px;
font-size:14px;
flex-shrink:0;
}
.vat-split-breakdown.is-active .vsb-h-ico{
background:rgba(34,197,94,.15);
color:#4ade80;
}
.vsb-h-txt{
flex:1;
font-family:var(--font);
font-size:12px;font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.vsb-h-total{
font-family:var(--font);
font-size:14px;font-weight:900;
color:#fbbf24;
letter-spacing:-.3px;
}
.vat-split-breakdown.is-active .vsb-h-total{color:#4ade80;}
.vsb-rows{
display:flex;flex-direction:column;gap:6px;
position:relative;z-index:1;
}
.vsb-row{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.22);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 11px;
position:relative;
overflow:hidden;
}
.vsb-row::before{
content:'';position:absolute;
top:0;right:0;
width:3px;height:100%;
background:var(--vsbc, #94a3b8);
box-shadow:0 0 8px var(--vsbc, #94a3b8);
}
.vsb-cash{--vsbc:#4ade80;}
.vsb-bank{--vsbc:#60A5FA;}
.vsb-total{
--vsbc:#fbbf24;
background:linear-gradient(155deg,rgba(245,158,11,.08),rgba(245,158,11,.02));
border-color:rgba(245,158,11,.3);
margin-top:3px;
}
.vat-split-breakdown.is-active .vsb-total{
--vsbc:#4ade80;
background:linear-gradient(155deg,rgba(34,197,94,.08),rgba(34,197,94,.02));
border-color:rgba(34,197,94,.3);
}
.vsb-row-ico{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
font-size:15px;
border-radius:8px;
background:rgba(255,255,255,.04);
flex-shrink:0;
}
.vsb-cash .vsb-row-ico{background:rgba(34,197,94,.12);}
.vsb-bank .vsb-row-ico{background:rgba(59,130,246,.12);}
.vsb-total .vsb-row-ico{
background:rgba(245,158,11,.15);
color:#fbbf24;
font-family:var(--font);
font-weight:900;
font-size:16px;
}
.vat-split-breakdown.is-active .vsb-total .vsb-row-ico{
background:rgba(34,197,94,.15);
color:#4ade80;
}
.vsb-row-info{flex:1;min-width:0;}
.vsb-row-label{
font-family:var(--font);
font-size:12px;font-weight:800;
color:var(--t1);
line-height:1.3;
}
.vsb-row-sub{
font-size:10px;color:var(--t3);
margin-top:2px;line-height:1.5;
}
.vsb-row-val{
font-family:var(--font);
font-size:15px;font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
flex-shrink:0;
}
.vsb-row-val span{
font-size:10px;opacity:.6;margin-right:3px;font-weight:700;
}
.vsb-cash .vsb-row-val{color:#86efac;}
.vsb-bank .vsb-row-val{color:#93c5fd;}
.vsb-total .vsb-row-val{color:#fbbf24;font-size:17px;}
.vat-split-breakdown.is-active .vsb-total .vsb-row-val{color:#4ade80;}
.vsb-hint{
margin-top:11px;
padding:9px 12px;
background:rgba(59,130,246,.06);
border:1px solid rgba(59,130,246,.2);
border-radius:9px;
font-size:10.5px;
color:#93c5fd;
line-height:1.7;
position:relative;z-index:1;
}
/* ════════ Dual VAT Toggle Card — Cash + Bank independent ════════ */
.vat-dual-toggle{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:16px;
padding:0;
margin-bottom:12px;
overflow:hidden;
transition:border-color .3s, box-shadow .3s;
}
.vat-dual-toggle.is-partial{
border-color:rgba(245,158,11,.4);
box-shadow:0 0 0 1px rgba(245,158,11,.15) inset, 0 6px 22px rgba(245,158,11,.1);
}
.vat-dual-toggle.is-fully-on{
border-color:rgba(34,197,94,.4);
box-shadow:0 0 0 1px rgba(34,197,94,.15) inset, 0 6px 22px rgba(34,197,94,.1);
}
/* Header */
.vdt-header{
display:flex;align-items:center;gap:12px;
padding:14px 16px;
background:linear-gradient(90deg, rgba(245,158,11,.08), rgba(245,158,11,.01));
border-bottom:1px solid var(--bdr);
}
.vat-dual-toggle.is-fully-on .vdt-header{
background:linear-gradient(90deg, rgba(34,197,94,.08), rgba(34,197,94,.01));
}
.vat-dual-toggle.is-partial .vdt-header{
background:linear-gradient(90deg, rgba(245,158,11,.1), rgba(245,158,11,.01));
}
.vdt-h-ico{
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#F59E0B,#d97706);
color:#fff;
border-radius:12px;
font-size:20px;
flex-shrink:0;
box-shadow:0 4px 12px rgba(245,158,11,.35);
}
.vat-dual-toggle.is-fully-on .vdt-h-ico{
background:linear-gradient(135deg,#22C55E,#15803d);
box-shadow:0 4px 12px rgba(34,197,94,.4);
}
.vdt-h-text{flex:1;min-width:0;}
.vdt-h-title{
font-family:var(--font);
font-size:13.5px;font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.vdt-h-sub{
font-size:11px;
color:var(--t3);
margin-top:3px;
line-height:1.6;
}
.vdt-h-total{
font-family:var(--font);
font-size:20px;font-weight:900;
color:#fbbf24;
letter-spacing:-.4px;
line-height:1;
text-align:left;
flex-shrink:0;
}
.vat-dual-toggle.is-fully-on .vdt-h-total{color:#4ade80;}
.vdt-h-total span{
font-size:11px;opacity:.6;margin-right:3px;font-weight:700;
}
/* Toggles rows container */
.vdt-toggles{
padding:10px;
display:flex;flex-direction:column;
gap:8px;
}
.vdt-row{
display:flex;align-items:center;gap:11px;
background:rgba(0,0,0,.2);
border:1px solid var(--bdr);
border-radius:12px;
padding:11px 13px;
position:relative;
overflow:hidden;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.vdt-row::before{
content:'';position:absolute;
top:0;right:0;
width:3px;height:100%;
background:var(--vdtc, #94a3b8);
box-shadow:0 0 10px var(--vdtc, #94a3b8);
transition:width .3s;
}
.vdt-row.is-on::before{width:5px;}
.vdt-cash{--vdtc:#4ade80;}
.vdt-cash.is-on{
background:linear-gradient(155deg,rgba(34,197,94,.08),rgba(34,197,94,.01));
border-color:rgba(74,222,128,.35);
box-shadow:0 4px 12px rgba(34,197,94,.1);
}
.vdt-bank{--vdtc:#60A5FA;}
.vdt-bank.is-on{
background:linear-gradient(155deg,rgba(59,130,246,.08),rgba(59,130,246,.01));
border-color:rgba(96,165,250,.35);
box-shadow:0 4px 12px rgba(59,130,246,.1);
}
.vdt-row-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
font-size:18px;
border-radius:10px;
background:rgba(255,255,255,.04);
flex-shrink:0;
transition:all .3s;
}
.vdt-cash.is-on .vdt-row-ico{
background:rgba(34,197,94,.18);
box-shadow:0 0 12px rgba(34,197,94,.25);
}
.vdt-bank.is-on .vdt-row-ico{
background:rgba(59,130,246,.18);
box-shadow:0 0 12px rgba(59,130,246,.25);
}
.vdt-row-info{flex:1;min-width:0;}
.vdt-row-title{
font-family:var(--font);
font-size:12.5px;font-weight:900;
color:var(--t1);
display:flex;align-items:center;gap:7px;flex-wrap:wrap;
line-height:1.3;
}
.vdt-badge-on, .vdt-badge-off{
font-size:9px;
font-weight:800;
padding:2px 7px;
border-radius:7px;
font-family:'Cairo',sans-serif;
letter-spacing:.2px;
}
.vdt-badge-on{
background:rgba(34,197,94,.18);
border:1px solid rgba(74,222,128,.35);
color:#4ade80;
}
.vdt-badge-off{
background:rgba(245,158,11,.12);
border:1px solid rgba(245,158,11,.3);
color:#fbbf24;
}
.vdt-row-sub{
font-size:10.5px;
color:var(--t3);
margin-top:3px;
line-height:1.6;
}
.vdt-row-amount{
display:flex;align-items:baseline;gap:2px;
font-family:var(--font);
flex-shrink:0;
padding:0 6px;
}
.vdt-amt-val{
font-size:16px;
font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
line-height:1;
}
.vdt-cash.is-on .vdt-amt-val{color:#86efac;}
.vdt-bank.is-on .vdt-amt-val{color:#93c5fd;}
.vdt-amt-unit{
font-size:10px;
opacity:.6;
font-weight:700;
}
/* Toggle Switch */
.vdt-sw{
position:relative;
display:inline-block;
flex-shrink:0;
cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.vdt-sw input{
position:absolute;
opacity:0;
width:0;height:0;
}
.vdt-sw-track{
display:block;
width:44px;height:24px;
background:rgba(100,116,139,.4);
border-radius:14px;
position:relative;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
border:1px solid rgba(255,255,255,.06);
}
.vdt-sw-knob{
position:absolute;
top:2px;right:2px;
width:18px;height:18px;
background:linear-gradient(135deg,#e5e7eb,#cbd5e1);
border-radius:50%;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.vdt-cash .vdt-sw input:checked ~ .vdt-sw-track{
background:linear-gradient(135deg,#22C55E,#15803d);
box-shadow:0 0 12px rgba(34,197,94,.4);
}
.vdt-bank .vdt-sw input:checked ~ .vdt-sw-track{
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
box-shadow:0 0 12px rgba(59,130,246,.4);
}
.vdt-sw input:checked ~ .vdt-sw-track .vdt-sw-knob{
transform:translateX(-20px);
background:linear-gradient(135deg,#fff,#f8fafc);
}
/* Hint at bottom */
.vdt-hint{
margin:0 10px 12px;
padding:10px 13px;
background:rgba(59,130,246,.06);
border:1px solid rgba(59,130,246,.2);
border-radius:10px;
font-size:11px;
color:#93c5fd;
line-height:1.7;
}
.vat-dual-toggle.is-fully-on .vdt-hint{
background:rgba(34,197,94,.06);
border-color:rgba(34,197,94,.25);
color:#86efac;
}
.vat-dual-toggle.is-partial .vdt-hint{
background:rgba(245,158,11,.06);
border-color:rgba(245,158,11,.25);
color:#fbbf24;
}
@media(max-width:560px){
.vdt-header{padding:12px;gap:9px;}
.vdt-h-ico{width:36px;height:36px;font-size:17px;border-radius:10px;}
.vdt-h-title{font-size:12.5px;}
.vdt-h-total{font-size:17px;}
.vdt-row{padding:9px 11px;gap:9px;}
.vdt-row-ico{width:30px;height:30px;font-size:15px;}
.vdt-row-title{font-size:11.5px;}
.vdt-row-sub{font-size:10px;}
.vdt-amt-val{font-size:14px;}
.vdt-row-amount{display:none;} /* Hide amount on tiny screens — it's in the sub text */
}
/* ════════ Rent Fund Card ════════ */
.rent-fund-card{
background:linear-gradient(155deg,rgba(59,130,246,.08),rgba(59,130,246,.02));
border:1px solid rgba(59,130,246,.3);
border-radius:16px;
padding:16px;
margin-bottom:14px;
position:relative;
overflow:hidden;
}
.rent-fund-card::before{
content:'';position:absolute;
top:-40px;right:-40px;
width:160px;height:160px;
background:radial-gradient(circle,rgba(59,130,246,.22),transparent 70%);
border-radius:50%;
filter:blur(40px);
pointer-events:none;
}
.rfc-h{
display:flex;align-items:center;gap:11px;
margin-bottom:13px;
position:relative;z-index:1;
}
.rfc-ico{
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
border-radius:13px;
font-size:22px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(59,130,246,.35);
}
.rfc-title{
font-family:var(--font);
font-size:14px;font-weight:900;
color:#60A5FA;
}
.rfc-sub{
font-size:11px;color:var(--t3);
margin-top:3px;line-height:1.6;
}
.rfc-amount{
font-family:var(--font);
font-size:24px;font-weight:900;
color:#60A5FA;
letter-spacing:-.5px;
line-height:1;
}
.rfc-amount span{
font-size:12px;opacity:.6;margin-right:3px;font-weight:700;
}
.rfc-details{
display:flex;flex-direction:column;gap:5px;
position:relative;z-index:1;
}
.rfc-item{
display:flex;align-items:center;gap:10px;
background:rgba(0,0,0,.18);
border:1px solid var(--bdr);
border-radius:10px;
padding:9px 12px;
transition:all .2s;
}
.rfc-item.is-paid{
background:rgba(34,197,94,.05);
border-color:rgba(74,222,128,.25);
}
.rfc-item-status{
font-size:14px;flex-shrink:0;
}
.rfc-item-name{
flex:1;min-width:0;
font-family:var(--font);
font-size:12.5px;font-weight:800;
color:var(--t1);
}
.rfc-item-method{
font-size:10.5px;
color:var(--t3);
font-weight:700;
letter-spacing:.2px;
}
.rfc-item.is-paid .rfc-item-method{color:#86efac;}
.rfc-item-amt{
font-family:var(--font);
font-size:13px;font-weight:900;
color:var(--t1);
margin-right:4px;
}
.rfc-action-hint{
margin-top:11px;
padding:10px 13px;
background:rgba(59,130,246,.07);
border:1px solid rgba(59,130,246,.22);
border-radius:10px;
font-size:11px;
color:#93c5fd;
line-height:1.7;
position:relative;z-index:1;
}
.mcc-block{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:13px;
padding:11px 10px;
text-align:center;
position:relative;
overflow:hidden;
transition:transform .2s;
}
.mcc-block::before{
content:'';position:absolute;
top:0;right:0;width:100%;height:3px;
background:var(--bc,#a855f7);
box-shadow:0 0 12px var(--bc,#a855f7);
}
.mcc-income{--bc:#4ade80;}
.mcc-obligations{--bc:#f87171;}
.mcc-other{--bc:#fbbf24;}
.mcc-distributable.is-positive{--bc:#4ade80;background:linear-gradient(155deg,rgba(34,197,94,.1),rgba(34,197,94,.02));border-color:rgba(34,197,94,.35);}
.mcc-distributable.is-zero{--bc:#94a3b8;}
.mcc-block-lbl{
font-size:10px;color:var(--t3);
font-weight:700;
margin-bottom:6px;
text-transform:none;
line-height:1.4;
}
.mcc-block-val{
font-family:var(--font);
font-size:21px;font-weight:900;
color:var(--t1);
line-height:1;
margin-bottom:5px;
letter-spacing:-.5px;
}
.mcc-block-val span{
font-size:11px;
opacity:.6;
margin-right:3px;
font-weight:700;
}
.mcc-block-sub{
font-size:9.5px;color:var(--t4);
line-height:1.5;
font-weight:600;
}
.mcc-op{
display:flex;align-items:center;justify-content:center;
font-family:var(--font);
font-size:22px;font-weight:900;
color:var(--t3);
align-self:center;
padding:0 4px;
}
/* Warning / success bands */
.mcc-warning{
background:rgba(245,158,11,.08);
border:1px solid rgba(245,158,11,.25);
border-radius:11px;
padding:10px 14px;
font-size:11.5px;
color:#fbbf24;
line-height:1.7;
position:relative;z-index:1;
}
.mcc-success{
background:rgba(34,197,94,.08);
border:1px solid rgba(34,197,94,.25);
border-radius:11px;
padding:10px 14px;
font-size:11.5px;
color:#4ade80;
line-height:1.7;
position:relative;z-index:1;
}
/* ════════ Obligation Quick-Add ════════ */
.obl-quickadd-section{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:14px;
padding:14px;
margin-bottom:14px;
}
.obl-quickadd-h{
margin-bottom:12px;
}
.obl-quickadd-title{
font-family:var(--font);
font-size:13px;font-weight:900;
color:var(--t1);
}
.obl-quickadd-sub{
font-size:10.5px;color:var(--t3);
margin-top:3px;
line-height:1.6;
}
.obl-quickadd-chips{
display:grid;
grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
gap:8px;
}
.obl-quickadd-chip{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:11px;
padding:11px 12px;
display:flex;align-items:center;gap:9px;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
position:relative;
overflow:hidden;
font-family:'Cairo',sans-serif;
text-align:right;
-webkit-tap-highlight-color:transparent;
}
.obl-quickadd-chip::before{
content:'';position:absolute;
top:0;right:0;
width:3px;height:100%;
background:var(--qac,#a855f7);
transition:width .25s;
}
.obl-quickadd-chip:hover{
border-color:var(--qac,#a855f7);
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(0,0,0,.25), 0 0 0 1px var(--qac,#a855f7)33 inset;
}
.obl-quickadd-chip:hover::before{width:5px;}
.obl-quickadd-chip:active{transform:translateY(-1px);}
.oqc-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:18px;
flex-shrink:0;
}
.oqc-name{
flex:1;
font-size:12px;font-weight:800;
color:var(--t1);
}
.oqc-plus{
font-family:var(--font);
font-size:18px;font-weight:900;
color:var(--qac,#a855f7);
width:24px;height:24px;
display:flex;align-items:center;justify-content:center;
background:var(--qac,#a855f7)15;
border-radius:50%;
flex-shrink:0;
transition:all .25s;
}
.obl-quickadd-chip:hover .oqc-plus{
background:var(--qac,#a855f7);
color:#fff;
transform:rotate(90deg);
}
/* Detailed Add — collapsible */
.obl-detailed-add{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:12px;
margin-bottom:14px;
overflow:hidden;
}
.obl-detailed-add summary{
cursor:pointer;
padding:12px 14px;
display:flex;align-items:center;gap:8px;
font-family:var(--font);
font-size:12px;font-weight:800;
color:var(--t2);
list-style:none;
user-select:none;
-webkit-tap-highlight-color:transparent;
}
.obl-detailed-add summary::-webkit-details-marker{display:none;}
.obl-detailed-add summary:hover{color:var(--t1);}
.obl-detailed-add[open] summary{
border-bottom:1px solid var(--bdr);
}
.obl-detailed-add > .fin-obl-add{
margin:0 12px 12px;
}
/* Grouped obligation lists */
.obl-groups{
display:flex;flex-direction:column;
gap:14px;
margin-top:14px;
}
.obl-group{
background:linear-gradient(155deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
border:1px solid var(--bdr);
border-radius:13px;
overflow:hidden;
}
.obl-group-h{
display:flex;align-items:center;gap:10px;
padding:11px 13px;
background:linear-gradient(90deg,var(--gc,#a855f7)15,transparent);
border-bottom:1px solid var(--bdr);
}
.obl-group-ico{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
font-size:15px;
flex-shrink:0;
}
.obl-group-name{
font-family:var(--font);
font-size:12.5px;font-weight:900;
color:var(--t1);
flex:1;
}
.obl-group-meta{
font-size:10px;color:var(--t3);
}
.obl-group-amt{
font-family:var(--font);
font-size:13.5px;font-weight:900;
color:var(--rd);
margin-right:6px;
}
.obl-group .fin-obl-list{padding:8px;}
/* ════════ Deduction Toggle Rows ════════ */
.deduct-toggle-row{
display:flex;align-items:center;justify-content:space-between;gap:14px;
padding:14px;
background:linear-gradient(135deg,rgba(255,255,255,.02),rgba(255,255,255,.005));
border:1px solid var(--bdr);
border-radius:12px;
transition:all .25s;
}
.deduct-toggle-row.is-on{
background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(34,197,94,.01));
border-color:rgba(34,197,94,.3);
}
.deduct-toggle-info{
display:flex;align-items:center;gap:12px;
flex:1;min-width:0;
}
.deduct-toggle-ico{
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
font-size:19px;
flex-shrink:0;
box-shadow:0 4px 12px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.1) inset;
}
.deduct-toggle-title{
font-family:var(--font);font-size:13.5px;font-weight:900;color:var(--t1);
}
.deduct-toggle-sub{
font-size:11px;color:var(--t3);
margin-top:3px;
line-height:1.6;
}
.deduct-toggle-sw{
position:relative;
cursor:pointer;
flex-shrink:0;
-webkit-tap-highlight-color:transparent;
}
.deduct-toggle-sw input{
position:absolute;opacity:0;width:0;height:0;
}
.dt-track{
position:relative;display:block;
width:54px;height:30px;
background:rgba(255,255,255,.08);
border:1px solid var(--bdr);
border-radius:15px;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.dt-knob{
position:absolute;
top:2px;right:2px;
width:22px;height:22px;
background:linear-gradient(135deg,#94a3b8,#64748b);
border-radius:50%;
box-shadow:0 3px 8px rgba(0,0,0,.3);
transition:all .3s cubic-bezier(.34,1.56,.64,1);
}
.deduct-toggle-sw input:checked ~ .dt-track{
background:linear-gradient(135deg,rgba(34,197,94,.3),rgba(34,197,94,.15));
border-color:rgba(34,197,94,.5);
box-shadow:0 0 12px rgba(34,197,94,.3);
}
.deduct-toggle-sw input:checked ~ .dt-track .dt-knob{
right:auto;left:2px;
background:linear-gradient(135deg,#4ade80,#16a34a);
box-shadow:0 3px 10px rgba(34,197,94,.5);
}
/* ════════ POS Fee Rate Editor ════════ */
.pos-rates-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
}
@media(max-width:560px){.pos-rates-grid{grid-template-columns:1fr;}}
.pos-rate-field{
background:linear-gradient(155deg,var(--d3),var(--d4));
border:1px solid var(--bdr);
border-radius:10px;
padding:10px;
position:relative;
overflow:hidden;
}
.pos-rate-field::before{
content:'';position:absolute;
top:0;right:0;
width:3px;height:100%;
background:var(--rc,#a855f7);
}
.pos-rate-field label{
display:block;
font-family:var(--font);
font-size:11.5px;
font-weight:900;
color:var(--t1);
margin-bottom:6px;
}
.pos-rate-input-wrap{
position:relative;
}
.pos-rate-input-wrap input{
width:100%;padding:8px 28px 8px 10px;
background:var(--d4);border:1px solid var(--bdr);color:var(--t1);
border-radius:8px;
font-family:var(--font);font-size:14px;font-weight:900;
outline:none;
transition:all .2s;
}
.pos-rate-input-wrap input:focus{
border-color:var(--rc,#a855f7);
background:var(--d3);
}
.pos-rate-suffix{
position:absolute;
left:9px;top:50%;
transform:translateY(-50%);
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--rc,#a855f7);
pointer-events:none;
}
/* Visual treatment for paid obligations */
.fin-obl-item.is-paid-obl{
background:linear-gradient(135deg,rgba(34,197,94,.04),rgba(34,197,94,.01));
border-color:rgba(34,197,94,.2);
}
.fin-obl-item.is-paid-obl .fin-obl-amt{
color:#4ade80;
}
/* KPI row */
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px;}
@media(max-width:640px){.kpi-row{grid-template-columns:repeat(2,1fr);}}
.kpi-card{
background:linear-gradient(145deg,var(--d3),var(--d4));
border:1px solid var(--bdr);border-radius:var(--r12);
padding:14px 13px;position:relative;overflow:hidden;
}
.kpi-card::before{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:var(--kc,var(--g1));}
.kpi-label{font-size:10px;color:var(--t3);font-weight:600;margin-bottom:6px;letter-spacing:.3px;}
.kpi-value{font-family:var(--font);font-size:22px;font-weight:900;color:var(--t1);}
.kpi-unit{font-size:10px;color:var(--t3);margin-top:3px;}
.kpi-change{font-size:10px;margin-top:4px;font-weight:700;}
.kpi-change.up{color:var(--gr);}
.kpi-change.dn{color:var(--rd);}
/* Report section cards */
.rep-section-card{background:var(--d2);border:1px solid var(--bdr);border-radius:var(--r12);overflow:hidden;margin-bottom:12px;}
.rep-section-hdr{
background:linear-gradient(90deg,rgba(15,11,0,.95),rgba(25,18,0,.9));
border-bottom:1px solid rgba(201,168,76,.18);
padding:12px 16px;
display:flex;align-items:center;justify-content:space-between;
}
.rep-section-title{font-family:var(--font);font-size:13px;font-weight:700;color:var(--g2);}
.rep-section-badge{background:rgba(201,168,76,.12);color:var(--g1);border:1px solid rgba(201,168,76,.22);border-radius:20px;padding:3px 10px;font-size:10px;font-weight:700;}
.rep-section-body{padding:14px 16px;}
/* Financial summary table */
.fin-table{width:100%;border-collapse:collapse;font-size:12px;}
.fin-table th{background:var(--d4);padding:9px 12px;text-align:right;font-size:10px;font-weight:700;color:var(--t3);border-bottom:1px solid var(--bdr);}
.fin-table td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.025);}
.fin-table tr:last-child td{border-bottom:none;}
.fin-table .total-row{background:rgba(201,168,76,.06);}
.fin-table .total-row td{font-weight:700;color:var(--g1);}
/* Pay method bar */
.pay-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.pay-bar-label{font-size:11px;color:var(--t2);width:90px;flex-shrink:0;text-align:right;}
.pay-bar-wrap{flex:1;height:22px;background:var(--d5);border-radius:6px;overflow:hidden;position:relative;}
.pay-bar-fill{height:100%;border-radius:6px;display:flex;align-items:center;justify-content:flex-end;padding-right:8px;}
.pay-bar-pct{font-size:9px;font-weight:700;color:rgba(255,255,255,.8);}
.pay-bar-amount{font-size:11px;font-weight:700;color:var(--g1);font-family:var(--font);width:90px;flex-shrink:0;text-align:left;}
/* Print report */
@media print{
.dash-hdr,.dash-day-bar,.dash-mob-tabs,.dash-bot-nav,.rep-filters,.no-print{display:none!important;}
body{background:#fff!important;color:#000!important;}
.dash-pane{padding:0;}
.kpi-card{background:#f8f4e8!important;border-color:#d4b85a!important;}
.kpi-value,.kpi-label,.kpi-unit{color:#1a1200!important;}
.rep-section-card{break-inside:avoid;}
}
/* ══════════════════════════════════════════════════
AUTH TABS — Owner / Client switching
══════════════════════════════════════════════════ */
.auth-tabs{
display:grid;grid-template-columns:1fr 1fr;gap:6px;
background:var(--d3);border:1px solid var(--bdr);
border-radius:var(--r10);padding:5px;margin-bottom:16px;
}
.auth-tab{
background:transparent;border:none;color:var(--t3);
padding:10px 8px;border-radius:7px;
font-family:var(--font);font-size:12px;font-weight:700;
cursor:pointer;transition:all .2s;
}
.auth-tab:hover{color:var(--t1);}
.auth-tab.on{
background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(201,168,76,.05));
color:var(--g2);box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.auth-tab[data-tab="owner"].on{
background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(168,85,247,.05));
color:#a855f7;
}
/* Auth sub-tabs (sign-in / sign-up) */
.auth-subtabs{
display:flex;gap:8px;margin-bottom:14px;
border-bottom:1px solid var(--bdr);
}
.auth-subtab{
flex:1;background:transparent;border:none;
padding:9px 6px 11px;color:var(--t3);
font-size:11px;font-weight:700;cursor:pointer;
border-bottom:2px solid transparent;
margin-bottom:-1px;
}
.auth-subtab.on{color:var(--g2);border-bottom-color:var(--g1);}
/* Auth panes/forms */
.auth-pane{display:none;}
.auth-pane.on{display:block;animation:fadeUp .35s ease;}
.auth-form{display:none;}
.auth-form.on{display:block;animation:fadeUp .25s ease;}
/* ══════════════════════════════════════════════════ */
/* Step indicator */
.step-pill{
display:flex;align-items:center;gap:6px;justify-content:center;
margin-bottom:14px;flex-wrap:wrap;
}
.step-pill-item{
display:flex;align-items:center;gap:5px;
background:var(--d4);border:1px solid var(--bdr);
border-radius:18px;padding:4px 10px;
font-size:10px;color:var(--t3);font-weight:700;
}
.step-pill-item.on{background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(201,168,76,.08));border-color:rgba(201,168,76,.4);color:var(--g2);}
.step-pill-item.done{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);color:var(--gr);}
.step-pill-num{
width:16px;height:16px;border-radius:50%;
background:rgba(255,255,255,.06);
display:flex;align-items:center;justify-content:center;
font-size:9px;font-weight:800;
}
.step-pill-item.on .step-pill-num{background:var(--g1);color:var(--d0);}
.step-pill-item.done .step-pill-num{background:var(--gr);color:#fff;}
.step-pill-sep{width:14px;height:1.5px;background:var(--bdr);}
/* Terms screen */
.terms-box{
background:var(--d3);border:1px solid var(--bdr);
border-radius:var(--r12);
max-height:280px;overflow-y:auto;
padding:14px 16px;margin-bottom:14px;
font-size:11.5px;line-height:1.9;color:var(--t2);
}
.terms-box h4{
font-family:var(--font);font-size:12px;font-weight:800;
color:var(--g2);margin:10px 0 5px;
}
.terms-box h4:first-child{margin-top:0;}
.terms-box p{margin-bottom:7px;}
.terms-box strong{color:var(--t1);}
.terms-check{
display:flex;align-items:center;gap:9px;
background:rgba(201,168,76,.06);
border:1px solid rgba(201,168,76,.2);
border-radius:var(--r10);padding:11px 13px;
margin-bottom:14px;cursor:pointer;
}
.terms-check input{width:18px;height:18px;cursor:pointer;accent-color:var(--g1);}
.terms-check label{font-size:12px;color:var(--t2);cursor:pointer;flex:1;}
.terms-check strong{color:var(--g1);}
/* Code display */
.code-display{
background:linear-gradient(135deg,#0a0800,#161000);
border:1.5px solid rgba(201,168,76,.35);
border-radius:var(--r12);
padding:18px 16px;text-align:center;
margin:14px 0;
box-shadow:0 0 30px rgba(201,168,76,.15) inset;
}
.code-display .cd-label{font-size:10px;color:var(--t3);margin-bottom:6px;letter-spacing:.5px;}
.code-display .cd-value{
font-family:'IBM Plex Mono',monospace;
font-size:28px;font-weight:900;
color:var(--g2);letter-spacing:8px;
text-shadow:0 0 16px rgba(201,168,76,.4);
}
.code-display .cd-hint{font-size:10px;color:var(--t3);margin-top:7px;}
/* Code input */
.code-input-row{
display:flex;gap:8px;justify-content:center;
margin:18px 0;direction:ltr;
}
.code-input-cell{
width:42px;height:50px;
background:var(--d3);border:1.5px solid var(--bdr);
border-radius:var(--r10);
font-family:'IBM Plex Mono',monospace;
font-size:22px;font-weight:800;text-align:center;
color:var(--g2);outline:none;
transition:border-color .15s,background .15s;
}
.code-input-cell:focus{border-color:var(--g1);background:var(--d4);box-shadow:0 0 0 3px rgba(201,168,76,.12);}
.code-input-cell.filled{border-color:rgba(201,168,76,.4);background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(201,168,76,.02));}
.code-input-cell.err{border-color:var(--rd);animation:shakeX .4s;}
/* Mailto helper button */
.mailto-btn{
display:flex;align-items:center;gap:8px;justify-content:center;
background:linear-gradient(135deg,#22C55E,#16a34a);
color:#fff;border:none;
border-radius:var(--r10);padding:13px 16px;
font-family:var(--font);font-size:13px;font-weight:800;
cursor:pointer;width:100%;margin-bottom:8px;
box-shadow:0 4px 14px rgba(34,197,94,.3);
}
.mailto-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(34,197,94,.4);}
.mailto-btn:active{transform:scale(.98);}
/* Pending status box */
.pending-box{
background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(245,158,11,.03));
border:1px solid rgba(245,158,11,.22);
border-radius:var(--r10);
padding:13px 14px;margin-bottom:14px;
}
.pending-box .pb-title{
display:flex;align-items:center;gap:7px;
font-size:12px;font-weight:800;color:var(--or);margin-bottom:5px;
}
.pending-box .pb-text{font-size:11px;color:var(--t2);line-height:1.7;}
/* Refund — banner & filters */
.refund-banner{
display:inline-flex;align-items:center;gap:5px;
background:rgba(168,85,247,.1);
color:#a855f7;border:1px solid rgba(168,85,247,.25);
border-radius:20px;padding:3px 10px;
font-size:10px;font-weight:700;
}
.refund-row td{background:rgba(168,85,247,.04) !important;}
.kpi-card.refund-kpi{--kc:#a855f7;}
/* ════════════════════════════════════════
OWNER MODE — Owner moved to separate file (owner-panel.html)
Kept here only as safety: in main file, owner role should never show.
═══════════════════════════════════════ */
/* Safety: if somehow `is-owner` class gets added in main file, hide owner pane */
body.is-owner #dash-pane-owner{display:none !important;}
/* ── Role-based pane visibility (non-owner roles) ── */
/* Only admin can see staff management & finance */
body.role-accountant #dsn-staff,
body.role-receptionist #dsn-staff,
body.role-receptionist #dsn-finance{display:none !important;}
/* Accountant: hide reception card on launcher (no ticket issuing) */
body.role-accountant .lnch-card.rec-card{display:none !important;}
/* Receptionist: completely locked to reception screen */
body.role-receptionist #dsn-rec2,
body.role-receptionist #dsn-inc,
body.role-receptionist #dsn-mon,
body.role-receptionist #dsn-exp,
body.role-receptionist #dsn-rep,
body.role-receptionist #dsn-finance,
body.role-receptionist #dsn-staff,
body.role-receptionist .dash-mob-tabs,
body.role-receptionist .dash-bot-nav,
body.role-receptionist .lnch-card.dash-card,
body.role-receptionist .rec-hdr-back,
body.role-receptionist .mob-menu-pill,
/* Hide ALL launcher financial data from receptionist (no flash, no peek) */
body.role-receptionist .lnch-stats,
body.role-receptionist #lnch-cnt,
body.role-receptionist #lnch-rev,
body.role-receptionist #lnch-unpaid{display:none !important;}
/* Hide launcher entirely while role is being detected to prevent flash */
body.role-receptionist #s-launcher{
visibility:hidden !important;
pointer-events:none !important;
}
/* Hide owner-only navigation items everywhere (owner uses separate file) */
#dsn-owner, #dmt-owner, #dbn-owner{display:none !important;}
/* Banned screen */
.banned-screen{
display:flex;flex-direction:column;align-items:center;justify-content:center;
min-height:100vh;padding:30px 20px;text-align:center;
background:var(--d0);
}
.banned-icon{font-size:64px;margin-bottom:18px;}
.banned-title{font-family:var(--font);font-size:22px;font-weight:900;color:var(--rd);margin-bottom:10px;}
.banned-text{font-size:13px;color:var(--t2);line-height:1.8;max-width:380px;margin-bottom:18px;}
.banned-contact{background:var(--d3);border:1px solid var(--bdr);border-radius:var(--r10);padding:14px 16px;font-size:12px;color:var(--t2);}
/* Role selector in staff form */
.role-radio-group{
display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:6px;
}
.role-radio{
background:var(--d4);border:1.5px solid var(--bdr);
border-radius:var(--r10);padding:10px 8px;text-align:center;
cursor:pointer;transition:all .15s;
}
.role-radio:hover{border-color:var(--bdr2);}
.role-radio.on{
background:linear-gradient(135deg,rgba(201,168,76,.15),rgba(201,168,76,.05));
border-color:rgba(201,168,76,.4);
}
.role-radio input{display:none;}
.role-radio .rr-icon{font-size:20px;margin-bottom:4px;}
.role-radio .rr-name{font-size:11px;font-weight:700;color:var(--t1);}
.role-radio .rr-desc{font-size:9px;color:var(--t3);margin-top:2px;line-height:1.4;}
@media(max-width:480px){
.role-radio-group{grid-template-columns:1fr;}
.code-input-cell{width:36px;height:46px;font-size:18px;}
}
/* Refund modal */
#refund-modal .refund-amount-display{
background:linear-gradient(135deg,rgba(168,85,247,.1),rgba(168,85,247,.04));
border:1px solid rgba(168,85,247,.25);
border-radius:var(--r10);padding:14px;text-align:center;margin-bottom:12px;
}
#refund-modal .ra-label{font-size:10px;color:var(--t3);margin-bottom:4px;}
#refund-modal .ra-value{font-family:var(--font);font-size:26px;font-weight:900;color:#a855f7;}
/* New day modal — improved */
#newday-modal .nd-summary{
background:linear-gradient(135deg,rgba(34,197,94,.06),rgba(34,197,94,.02));
border:1px solid rgba(34,197,94,.18);
border-radius:var(--r10);padding:13px 14px;margin-bottom:14px;
}
#newday-modal .nd-stat{display:flex;justify-content:space-between;align-items:center;padding:5px 0;font-size:12px;}
#newday-modal .nd-stat-l{color:var(--t3);}
#newday-modal .nd-stat-v{font-weight:700;color:var(--t1);font-family:var(--font);}
#newday-modal .nd-stat-v.green{color:var(--gr);}
#newday-modal .nd-stat-v.red{color:var(--rd);}
/* ════════════════════════════════════════
PROFESSIONAL DASHBOARD HEADER
═══════════════════════════════════════ */
.dash-hdr-pro{
display:flex;align-items:center;justify-content:space-between;
gap:16px;padding:12px 18px;
background:linear-gradient(180deg,#000000 0%,#070708 60%,#0b0c0e 100%);
border-bottom:1px solid rgba(255,255,255,.07);
position:sticky;top:0;z-index:80;
box-shadow:0 4px 28px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
flex-wrap:wrap;
}
.dhp-left{display:flex;align-items:center;gap:10px;min-width:0;}
.dhp-home{
width:40px;height:40px;
background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.04));
border:1px solid rgba(201,168,76,.25);
border-radius:12px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;font-size:18px;
transition:all .15s;flex-shrink:0;
}
.dhp-home:hover{
background:linear-gradient(135deg,rgba(201,168,76,.2),rgba(201,168,76,.08));
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(201,168,76,.2);
}
.dhp-home:active{transform:scale(.95);}
.dhp-brand-row{display:flex;align-items:center;gap:10px;}
.dhp-brand-logo{
width:42px;height:42px;
background:linear-gradient(135deg,var(--g1),var(--g2));
border-radius:12px;
display:flex;align-items:center;justify-content:center;
font-size:20px;color:#0a0800;
box-shadow:0 4px 16px rgba(201,168,76,.3);
}
.dhp-brand-name{
font-family:var(--font);font-size:15px;font-weight:900;
background:linear-gradient(135deg,#fef3c7,var(--g2));
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
line-height:1.1;
}
.dhp-brand-sub{
display:flex;align-items:center;gap:6px;
font-size:10px;color:var(--t3);margin-top:3px;
}
.dhp-dot{
width:3px;height:3px;background:var(--t4);border-radius:50%;
}
.dhp-stats{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
flex:1;justify-content:center;
}
.dhp-stat{
display:flex;align-items:center;gap:8px;
background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
border:1px solid rgba(201,168,76,.15);
border-radius:10px;padding:7px 12px;
min-width:0;
}
.dhp-stat-ico{
width:30px;height:30px;
background:rgba(201,168,76,.1);
border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-size:14px;flex-shrink:0;
}
.dhp-stat-lbl{font-size:9px;color:var(--t4);font-weight:600;letter-spacing:.3px;}
.dhp-stat-val{
font-family:var(--font);font-size:14px;font-weight:900;color:var(--g2);
line-height:1.1;
}
.dhp-right{display:flex;align-items:center;gap:6px;flex-shrink:0;position:relative;}
.dhp-cloud{
display:flex;align-items:center;gap:5px;
padding:5px 10px;border-radius:14px;
background:rgba(34,197,94,.08);
border:1px solid rgba(34,197,94,.2);
font-size:10px;color:var(--gr);font-weight:700;
}
.dhp-cloud-dot{
width:6px;height:6px;border-radius:50%;
background:var(--gr);
box-shadow:0 0 6px var(--gr);
animation:cloudPulse 2s ease-in-out infinite;
}
.dhp-cloud.offline{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.2);color:var(--rd);}
.dhp-cloud.offline .dhp-cloud-dot{background:var(--rd);box-shadow:0 0 6px var(--rd);animation:none;}
.dhp-cloud.syncing{background:rgba(245,158,11,.08);border-color:rgba(245,158,11,.2);color:var(--or);}
.dhp-cloud.syncing .dhp-cloud-dot{background:var(--or);box-shadow:0 0 6px var(--or);}
@keyframes cloudPulse{0%,100%{opacity:1;}50%{opacity:.5;}}
.dhp-btn{
width:38px;height:38px;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
color:var(--t2);
border-radius:10px;cursor:pointer;font-size:15px;
display:flex;align-items:center;justify-content:center;
transition:all .15s;
}
.dhp-btn:hover{background:rgba(255,255,255,.08);border-color:var(--bdr2);}
.dhp-btn-danger:hover{
background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.3);color:var(--rd);
}
/* Hide old header */
.dash-hdr{display:none !important;}
/* Owner mode header changes */
body.is-owner .dhp-brand-logo{background:linear-gradient(135deg,#a855f7,#7c3aed);}
body.is-owner .dhp-brand-name{background:linear-gradient(135deg,#e9d5ff,#a855f7);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
body.is-owner .dhp-home{background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(168,85,247,.04));border-color:rgba(168,85,247,.25);}
body.is-owner .dhp-home{display:none;}
body.is-owner .client-only{display:none !important;}
body:not(.is-owner) .owner-only{display:none !important;}
/* Mobile responsive */
@media(max-width:880px){
.dash-hdr-pro{padding:10px 12px;gap:8px;}
.dhp-brand-name{font-size:13px;}
.dhp-cloud{display:none;}
.dhp-money-toggle{width:42px;height:42px;}
}
@media(max-width:480px){
.dhp-brand-logo{width:36px;height:36px;font-size:17px;}
.dhp-home{width:36px;height:36px;}
.dhp-btn{width:34px;height:34px;font-size:13px;}
.dhp-brand-sub{display:none;}
.dhp-money-toggle{width:40px;height:40px;}
}
/* ════════════════════════════════════════
ENHANCED DAY SYSTEM
═══════════════════════════════════════ */
.day-bar-pro{
display:flex;align-items:center;gap:10px;
padding:10px 16px;
background:linear-gradient(135deg,rgba(201,168,76,.04),rgba(201,168,76,.01));
border-bottom:1px solid rgba(201,168,76,.15);
flex-wrap:wrap;
}
.day-bar-pro .dbp-current{
display:flex;align-items:center;gap:8px;
background:rgba(34,197,94,.06);
border:1px solid rgba(34,197,94,.2);
border-radius:10px;padding:6px 12px;
}
.day-bar-pro .dbp-cur-dot{
width:8px;height:8px;border-radius:50%;background:var(--gr);
box-shadow:0 0 8px var(--gr);
animation:cloudPulse 2s ease-in-out infinite;
}
.day-bar-pro .dbp-cur-text{font-size:11px;font-weight:700;color:var(--gr);}
.day-bar-pro .dbp-cur-date{font-size:12px;color:var(--t1);font-weight:800;}
.day-archive-modal .da-list{
max-height:340px;overflow-y:auto;
display:flex;flex-direction:column;gap:6px;
}
.da-day-card{
display:flex;align-items:center;justify-content:space-between;
padding:10px 12px;background:var(--d3);border:1px solid var(--bdr);
border-radius:10px;cursor:pointer;
transition:all .15s;
}
.da-day-card:hover{border-color:var(--g1);background:var(--d4);}
.da-day-card .da-day-info{flex:1;min-width:0;}
.da-day-card .da-day-name{font-size:12px;font-weight:700;color:var(--t1);}
.da-day-card .da-day-stats{font-size:10px;color:var(--t3);margin-top:2px;}
.da-day-card .da-day-rev{
font-family:var(--font);font-size:14px;font-weight:900;color:var(--g2);
}
/* PIN modal */
.pin-modal-pro .pin-grid{
display:grid;grid-template-columns:repeat(3,1fr);gap:8px;
max-width:240px;margin:14px auto;
}
.pin-modal-pro .pin-btn{
aspect-ratio:1;
background:var(--d3);border:1px solid var(--bdr);
border-radius:12px;
font-family:var(--font);font-size:22px;font-weight:700;
color:var(--t1);cursor:pointer;
transition:all .12s;
}
.pin-modal-pro .pin-btn:hover{background:var(--d4);border-color:var(--g1);}
.pin-modal-pro .pin-btn:active{transform:scale(.92);}
.pin-modal-pro .pin-display{
display:flex;justify-content:center;gap:10px;margin:14px 0;
}
.pin-modal-pro .pin-dot{
width:18px;height:18px;border-radius:50%;
background:var(--d3);border:2px solid var(--bdr);
transition:all .15s;
}
.pin-modal-pro .pin-dot.on{
background:var(--g1);border-color:var(--g2);
box-shadow:0 0 10px rgba(201,168,76,.4);
}
.pin-modal-pro .pin-dot.err{
background:var(--rd);border-color:var(--rd);
animation:shakeX .4s;
}
@keyframes shakeX{
0%,100%{transform:translateX(0);}
25%{transform:translateX(-4px);}
75%{transform:translateX(4px);}
}
@keyframes successPop{
0%{transform:scale(0) rotate(-30deg);opacity:0;}
60%{transform:scale(1.15) rotate(10deg);opacity:1;}
100%{transform:scale(1) rotate(0);opacity:1;}
}
/* ════════════════════════════════════════
PREMIUM TICKET CARDS — Elegant & Refined
═══════════════════════════════════════ */
.tkcard-pro, .tkrow-pro{
position:relative;
display:flex;align-items:stretch;
background:linear-gradient(155deg,var(--d3) 0%, var(--d4) 100%);
border:1px solid var(--bdr);
border-radius:16px;overflow:hidden;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 2px 12px rgba(0,0,0,.15);
}
.tkcard-pro:hover, .tkrow-pro:hover{
border-color:var(--bdr2);
transform:translateY(-1px);
box-shadow:0 6px 24px rgba(0,0,0,.3);
}
.tkrow-pro{padding:12px;gap:12px;}
.tkcard-pro{padding:14px;gap:14px;}
/* ═══════════════════════════════════════════
Luxurious full-card status pulse
— Subtle, elegant, never jarring
═══════════════════════════════════════════ */
.tkcard-pro::after, .tkrow-pro::after{
content:'';
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
opacity:0;
transition:opacity .4s ease;
}
/* PAID — soft green wash */
.tkcard-pro.is-paid, .tkrow-pro.is-paid{
border-color:rgba(34,197,94,.22);
background:
radial-gradient(ellipse at right top, rgba(34,197,94,.06), transparent 60%),
linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
animation:tkPulsePaid 4.5s ease-in-out infinite;
}
.tkcard-pro.is-paid::after, .tkrow-pro.is-paid::after{
background:radial-gradient(ellipse at right center, rgba(34,197,94,.08), transparent 70%);
animation:tkGlowPaid 4.5s ease-in-out infinite;
}
/* UNPAID — DRAMATIC ATTENTION: stronger glow + shake + pulsing badge */
.tkcard-pro.is-unpaid, .tkrow-pro.is-unpaid{
border-color:rgba(239,68,68,.45);
background:
radial-gradient(ellipse at right top, rgba(239,68,68,.12), transparent 60%),
linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
animation:
tkPulseUnpaid 2s ease-in-out infinite,
tkShakeUnpaid 6s ease-in-out infinite;
position:relative;
}
.tkcard-pro.is-unpaid::after, .tkrow-pro.is-unpaid::after{
background:radial-gradient(ellipse at right center, rgba(239,68,68,.18), transparent 70%);
animation:tkGlowUnpaid 2s ease-in-out infinite;
}
/* 🆕 Pulsing red dot in corner (top-left in RTL) of unpaid cards */
.tkcard-pro.is-unpaid::before, .tkrow-pro.is-unpaid::before{
content:'';
position:absolute;
top:10px;
left:10px;
width:10px;height:10px;
background:#EF4444;
border-radius:50%;
box-shadow:
0 0 0 0 rgba(239,68,68,.7),
0 0 12px rgba(239,68,68,.6);
animation:tkUnpaidDot 1.8s ease-out infinite;
z-index:2;
}
/* Make the payment pill RED + pulsing when unpaid */
.tkcard-pro.is-unpaid .tkc-pay-pill,
.tkrow-pro.is-unpaid .tkc-pay-pill{
background:linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.08));
border-color:rgba(239,68,68,.45);
color:#fca5a5;
animation:tkPayPillPulse 2s ease-in-out infinite;
font-weight:900;
}
/* REFUNDED — soft purple wash */
.tkcard-pro.is-refunded, .tkrow-pro.is-refunded{
border-color:rgba(168,85,247,.22);
background:
radial-gradient(ellipse at right top, rgba(168,85,247,.06), transparent 60%),
linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
animation:tkPulseRefunded 5s ease-in-out infinite;
}
.tkcard-pro.is-refunded::after, .tkrow-pro.is-refunded::after{
background:radial-gradient(ellipse at right center, rgba(168,85,247,.07), transparent 70%);
animation:tkGlowRefunded 5s ease-in-out infinite;
}
/* 🆕 Respect reduced-motion preference — disable shake but keep glow */
@media (prefers-reduced-motion: reduce){
.tkcard-pro.is-unpaid, .tkrow-pro.is-unpaid{
animation:tkPulseUnpaid 2.5s ease-in-out infinite; /* keep pulse only */
}
}
/* Pause animations on hover so it feels intentional, not noisy */
.tkcard-pro:hover, .tkrow-pro:hover{
animation-play-state:paused;
}
.tkcard-pro:hover::after, .tkrow-pro:hover::after{
animation-play-state:paused;
opacity:0;
}
@keyframes tkPulsePaid{
0%, 100%{
box-shadow:0 2px 12px rgba(0,0,0,.15), 0 0 0 0 rgba(34,197,94,0);
}
50%{
box-shadow:0 4px 18px rgba(0,0,0,.2), 0 0 0 1px rgba(34,197,94,.12), 0 0 22px rgba(34,197,94,.06);
}
}
@keyframes tkGlowPaid{
0%, 100%{opacity:.3;}
50%{opacity:.8;}
}
@keyframes tkPulseUnpaid{
0%, 100%{
box-shadow:
0 2px 12px rgba(0,0,0,.15),
0 0 0 0 rgba(239,68,68,.4),
0 0 18px rgba(239,68,68,.15);
}
50%{
box-shadow:
0 6px 22px rgba(0,0,0,.25),
0 0 0 3px rgba(239,68,68,.35),
0 0 38px rgba(239,68,68,.35);
}
}
@keyframes tkGlowUnpaid{
0%, 100%{opacity:.4;}
50%{opacity:1;}
}
/* 🆕 Subtle horizontal shake — fires every 6s for ~0.6s */
@keyframes tkShakeUnpaid{
0%, 90%, 100%{ transform:translateX(0); }
92%{ transform:translateX(-2px); }
94%{ transform:translateX(2px); }
96%{ transform:translateX(-2px); }
98%{ transform:translateX(1px); }
}
/* 🆕 Pulsing red dot — expanding ring effect */
@keyframes tkUnpaidDot{
0%{
box-shadow:0 0 0 0 rgba(239,68,68,.7), 0 0 12px rgba(239,68,68,.6);
transform:scale(1);
}
60%{
box-shadow:0 0 0 12px rgba(239,68,68,0), 0 0 18px rgba(239,68,68,.4);
transform:scale(1.15);
}
100%{
box-shadow:0 0 0 0 rgba(239,68,68,0), 0 0 12px rgba(239,68,68,.6);
transform:scale(1);
}
}
/* 🆕 Payment pill pulse (red) */
@keyframes tkPayPillPulse{
0%, 100%{
background:linear-gradient(135deg, rgba(239,68,68,.18), rgba(239,68,68,.08));
box-shadow:0 0 0 0 rgba(239,68,68,0);
}
50%{
background:linear-gradient(135deg, rgba(239,68,68,.32), rgba(239,68,68,.16));
box-shadow:0 0 14px rgba(239,68,68,.4), inset 0 0 0 1px rgba(239,68,68,.3);
}
}
@keyframes tkPulseRefunded{
0%, 100%{
box-shadow:0 2px 12px rgba(0,0,0,.15), 0 0 0 0 rgba(168,85,247,0);
}
50%{
box-shadow:0 4px 18px rgba(0,0,0,.2), 0 0 0 1px rgba(168,85,247,.12), 0 0 22px rgba(168,85,247,.06);
}
}
@keyframes tkGlowRefunded{
0%, 100%{opacity:.3;}
50%{opacity:.7;}
}
/* Light mode — even more subtle */
html[data-theme='light'] .tkcard-pro.is-paid,
html[data-theme='light'] .tkrow-pro.is-paid{
background:
radial-gradient(ellipse at right top, rgba(34,197,94,.04), transparent 60%),
linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
}
html[data-theme='light'] .tkcard-pro.is-unpaid,
html[data-theme='light'] .tkrow-pro.is-unpaid{
background:
radial-gradient(ellipse at right top, rgba(239,68,68,.05), transparent 60%),
linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
}
/* Respect reduced-motion preference */
@media(prefers-reduced-motion: reduce){
.tkcard-pro.is-paid, .tkrow-pro.is-paid,
.tkcard-pro.is-unpaid, .tkrow-pro.is-unpaid,
.tkcard-pro.is-refunded, .tkrow-pro.is-refunded{
animation:none !important;
}
.tkcard-pro::after, .tkrow-pro::after{
animation:none !important;
}
}
/* Status accent — vertical bar on right edge */
.tkc-accent{
position:absolute;top:0;bottom:0;right:0;
width:4px;
box-shadow:0 0 8px rgba(0,0,0,.3) inset;
}
/* ── Action buttons column (LEFT) ── */
.tkc-actions{
display:flex;flex-direction:column;gap:6px;
flex-shrink:0;justify-content:center;
}
.tkc-actions-sm{gap:5px;}
.tkc-btn{
width:38px;height:38px;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
border-radius:10px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:all .15s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
}
.tkc-actions-sm .tkc-btn{width:34px;height:34px;}
.tkc-btn svg{transition:transform .15s;}
.tkc-btn:hover{
transform:translateY(-1px) scale(1.04);
box-shadow:0 4px 12px rgba(0,0,0,.2);
}
.tkc-btn:hover svg{transform:scale(1.1);}
.tkc-btn:active{transform:scale(.9);}
.tkc-btn-del{color:#EF4444;background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.2);}
.tkc-btn-del:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4);box-shadow:0 4px 14px rgba(239,68,68,.25);}
.tkc-btn-ref{color:#a855f7;background:rgba(168,85,247,.06);border-color:rgba(168,85,247,.2);}
.tkc-btn-ref:hover{background:rgba(168,85,247,.14);border-color:rgba(168,85,247,.4);box-shadow:0 4px 14px rgba(168,85,247,.25);}
.tkc-btn-pay{color:#22C55E;background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.2);}
.tkc-btn-pay:hover{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.4);box-shadow:0 4px 14px rgba(34,197,94,.25);}
.tkc-btn-wa{color:#25D366;background:rgba(37,211,102,.06);border-color:rgba(37,211,102,.25);}
.tkc-btn-wa:hover{background:rgba(37,211,102,.16);border-color:rgba(37,211,102,.45);box-shadow:0 4px 14px rgba(37,211,102,.25);}
.tkc-btn-view{color:#3B82F6;background:rgba(59,130,246,.06);border-color:rgba(59,130,246,.2);}
.tkc-btn-view:hover{background:rgba(59,130,246,.14);border-color:rgba(59,130,246,.4);box-shadow:0 4px 14px rgba(59,130,246,.25);}
/* ── Main content area (CENTER) ── */
.tkc-content{
flex:1;min-width:0;
display:flex;flex-direction:column;gap:10px;
justify-content:center;
}
.tkc-content-row{gap:6px;}
.tkc-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
}
.tkc-name{
font-size:16px;font-weight:800;color:var(--t1);
line-height:1.2;margin:0;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
flex:1;min-width:0;text-align:right;
}
.tkc-content-row .tkc-name{font-size:14px;}
.tkc-badges{display:flex;align-items:center;gap:5px;flex-shrink:0;}
.tkc-chip-cash{
display:inline-flex;align-items:center;
background:rgba(245,158,11,.15);color:var(--or);
border:1px solid rgba(245,158,11,.35);
padding:3px 8px;border-radius:8px;
font-size:11px;font-weight:800;line-height:1;
}
.tkc-chip-status{
display:inline-flex;align-items:center;gap:4px;
padding:4px 10px;border-radius:14px;
font-size:11px;font-weight:800;line-height:1;
border:1px solid;
letter-spacing:.2px;
}
.tkc-phone{
display:flex;align-items:center;gap:7px;
font-size:12px;color:var(--t3);
direction:ltr;justify-content:flex-end;
}
.tkc-phone-num{
font-family:'IBM Plex Mono','Roboto Mono',monospace;
font-weight:700;color:var(--t2);
letter-spacing:.5px;
}
/* Info grid */
.tkc-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.tkc-cell{
display:flex;align-items:flex-start;gap:8px;
background:rgba(255,255,255,.02);
border:1px solid var(--bdr);
border-radius:9px;
padding:7px 9px;
min-width:0;
}
.tkc-cell-wide{grid-column:1 / -1;}
.tkc-cell-ico{
font-size:13px;flex-shrink:0;
width:22px;height:22px;
display:flex;align-items:center;justify-content:center;
background:rgba(201,168,76,.08);
border-radius:6px;
margin-top:1px;
}
/* Soft SVG icon for license plate — more elegant than the 🔢 emoji */
.tkc-cell-ico-plate{
background:rgba(201,168,76,.1);
color:var(--g2);
}
.tkc-cell-ico-plate svg{
width:14px;height:14px;
opacity:.85;
filter:drop-shadow(0 0 4px rgba(201,168,76,.25));
}
/* 🆕 Multiple services on ticket */
.tkc-services-list{
display:flex;flex-direction:column;
gap:5px;
margin-top:3px;
white-space:normal;
}
.tkc-svc-row{
display:flex;align-items:center;justify-content:space-between;
gap:8px;
padding:5px 9px;
background:rgba(255,255,255,.03);
border:1px solid var(--bdr);
border-radius:8px;
font-size:11px;
}
.tkc-svc-row:first-child{
background:rgba(59,130,246,.08);
border-color:rgba(59,130,246,.2);
}
.tkc-svc-row:nth-child(2){
background:rgba(34,197,94,.06);
border-color:rgba(74,222,128,.2);
}
.tkc-svc-name{
flex:1;min-width:0;
font-weight:700;
color:var(--t1);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.tkc-svc-price{
flex-shrink:0;
font-family:var(--font);
font-weight:900;
font-size:11.5px;
color:var(--g2);
letter-spacing:-.2px;
}
.tkc-cell-body{flex:1;min-width:0;text-align:right;}
.tkc-cell-label{
font-size:9px;color:var(--t4);
font-weight:700;text-transform:uppercase;
letter-spacing:.5px;
margin-bottom:1px;
}
.tkc-cell-value{
font-size:12px;color:var(--t1);
font-weight:700;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
line-height:1.3;
}
.tkc-plate{
font-family:'IBM Plex Mono','Roboto Mono',monospace;
direction:ltr;text-align:right;
color:var(--g2) !important;
letter-spacing:1px;
}
/* Row view info pills */
.tkc-row-head{
display:flex;align-items:center;gap:7px;
justify-content:flex-end;flex-wrap:wrap;
}
.tkc-row-info{
display:flex;align-items:center;gap:6px;
flex-wrap:wrap;justify-content:flex-end;
font-size:11px;
}
.tkc-info-pill{
display:inline-flex;align-items:center;gap:4px;
background:rgba(255,255,255,.03);
border:1px solid var(--bdr);
padding:3px 8px;border-radius:8px;
font-size:11px;color:var(--t2);font-weight:600;
white-space:nowrap;
}
.tkc-info-plate{
font-family:'IBM Plex Mono','Roboto Mono',monospace;
direction:ltr;display:inline-block;
color:var(--g2) !important;font-weight:800 !important;
background:rgba(201,168,76,.08) !important;
border-color:rgba(201,168,76,.25) !important;
letter-spacing:1px;
}
.tkc-row-foot{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding-top:6px;border-top:1px dashed var(--bdr);
}
.tkc-meta-sm{
font-size:10px;color:var(--t4);
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
/* Refund box */
.tkc-refund-box{
background:rgba(168,85,247,.06);
border:1px solid rgba(168,85,247,.2);
border-right:3px solid #a855f7;
border-radius:8px;
padding:8px 12px;
font-size:11px;color:#a855f7;
}
.tkc-refund-title{font-weight:800;}
.tkc-refund-reason{font-size:10px;color:var(--t3);margin-top:2px;}
/* Footer with price */
.tkc-foot{
display:flex;align-items:center;justify-content:space-between;
gap:10px;flex-wrap:wrap;
padding-top:10px;border-top:1px dashed var(--bdr);
margin-top:2px;
}
.tkc-meta{
display:flex;align-items:center;gap:6px;flex-wrap:wrap;
font-size:10px;color:var(--t4);font-weight:600;
}
.tkc-meta-sep{opacity:.4;}
.tkc-pay{color:var(--t3);font-weight:700;}
.tkc-price{
display:flex;align-items:baseline;gap:4px;
flex-shrink:0;
}
.tkc-price-amount{
font-family:'IBM Plex Mono','Roboto Mono',monospace;
font-size:24px;font-weight:900;
color:var(--g2);
letter-spacing:-1px;line-height:1;
}
.tkc-price-sm .tkc-price-amount{font-size:19px;}
.tkc-price-currency{
font-size:13px;font-weight:700;
color:var(--t3);
}
/* LEFT side column (RTL): Number TOP, Move MIDDLE, Spacer, Menu BOTTOM */
.tkc-side{
display:flex;flex-direction:column;align-items:center;
gap:10px;
flex-shrink:0;
position:relative;
min-height:100%;
align-self:stretch;
}
.tkc-side-sm{gap:6px;}
/* Spacer pushes menu toggle to bottom */
.tkc-side-spacer{flex:1;min-height:6px;}
/* Elegant movement controls — vertically stacked with drag handle between */
.tkc-move-group{
display:flex;flex-direction:column;align-items:center;
gap:3px;
padding:4px;
background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
border:1px solid var(--bdr);
border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,.15) inset;
}
.tkc-side-sm .tkc-move-group{padding:3px;border-radius:10px;gap:2px;}
.tkc-move-btn{
width:34px;height:30px;
background:linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
border:1px solid rgba(255,255,255,.06);
color:var(--t2);
border-radius:9px;
cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .2s cubic-bezier(.34,1.56,.64,1);
padding:0;
-webkit-tap-highlight-color:transparent;
position:relative;overflow:hidden;
}
.tkc-side-sm .tkc-move-btn{width:30px;height:26px;border-radius:7px;}
.tkc-move-btn::after{
content:'';position:absolute;inset:0;
background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(201,168,76,.02));
opacity:0;transition:opacity .2s;
border-radius:inherit;
}
.tkc-move-btn:hover{
border-color:rgba(201,168,76,.35);
color:var(--g2);
box-shadow:0 4px 10px rgba(201,168,76,.18),0 0 0 1px rgba(201,168,76,.12);
}
.tkc-move-btn:hover::after{opacity:1;}
.tkc-move-btn:hover svg{position:relative;z-index:1;}
.tkc-move-up:hover{transform:translateY(-1px) scale(1.04);}
.tkc-move-down:hover{transform:translateY(1px) scale(1.04);}
.tkc-move-btn:active{transform:scale(.88);}
.tkc-drag-handle-mini{
color:var(--t4);
cursor:grab;
user-select:none;
padding:2px 6px;
display:flex;align-items:center;justify-content:center;
transition:color .15s;
border-radius:5px;
}
.tkc-drag-handle-mini:hover{color:var(--g2);background:rgba(201,168,76,.06);}
.tkc-drag-handle-mini:active{cursor:grabbing;}
.tkc-num{
width:54px;height:54px;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.22), transparent 50%),
linear-gradient(135deg, var(--g1), var(--g2));
color:#0a0800;
border-radius:14px;
display:flex;align-items:center;justify-content:center;
font-family:'IBM Plex Mono','Roboto Mono',monospace;
font-size:14px;font-weight:900;
letter-spacing:-.5px;
box-shadow:
0 8px 24px rgba(201,168,76,.4),
0 3px 8px rgba(201,168,76,.3),
0 0 0 1px rgba(255,255,255,.18) inset,
0 -2px 4px rgba(0,0,0,.18) inset;
position:relative;
flex-shrink:0;
}
.tkc-num-sm{width:46px;height:46px;font-size:12px;border-radius:11px;}
/* Menu wrap holds the toggle + popover */
.tkc-menu-wrap{
position:relative;
flex-shrink:0;
}
.tkc-drag{
color:var(--t4);
cursor:grab;
user-select:none;
padding:3px 6px;
display:flex;align-items:center;justify-content:center;
transition:color .15s;
border-radius:5px;
}
.tkc-drag:hover{color:var(--g2);}
.tkc-drag:active{cursor:grabbing;}
/* Mobile responsive */
@media(max-width:640px){
.tkcard-pro{padding:12px;gap:10px;}
.tkc-btn{width:34px;height:34px;}
.tkc-name{font-size:14px;}
.tkc-price-amount{font-size:20px;}
.tkc-num{width:46px;height:46px;font-size:12px;border-radius:11px;}
.tkc-arrow{width:32px;height:22px;}
.tkc-grid{grid-template-columns:1fr;gap:6px;}
.tkc-cell{padding:6px 8px;}
/* Row becomes more compact on mobile */
.tkrow-pro{padding:10px;gap:8px;}
.tkc-actions-sm .tkc-btn{width:30px;height:30px;}
.tkc-row-info{font-size:10px;}
.tkc-info-pill{padding:2px 6px;font-size:10px;}
}
@media(max-width:420px){
/* On very small screens, hide some buttons or pills to keep layout clean */
.tkc-info-pill{font-size:9px;padding:2px 5px;}
.tkc-price-amount{font-size:18px;}
}
/* ── Action menu toggle button (3-dots) at BOTTOM of side ── */
.tkc-menu-toggle{
width:42px;height:42px;
background:linear-gradient(135deg,rgba(40,32,12,.95),rgba(26,20,6,.95));
border:1.5px solid var(--g1);
color:var(--g2);
border-radius:12px;
display:flex;align-items:center;justify-content:center;
cursor:pointer;
transition:all .25s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
box-shadow:
0 4px 16px rgba(0,0,0,.4),
0 0 0 1px rgba(201,168,76,.15) inset,
0 1px 0 rgba(255,255,255,.05) inset;
position:relative;z-index:5;
overflow:hidden;
}
.tkc-menu-toggle svg{
position:relative;z-index:2;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.4));
transition:transform .2s;
}
.tkc-menu-toggle::before{
content:'';position:absolute;inset:0;
background:radial-gradient(circle at 50% 30%,rgba(201,168,76,.25),transparent 70%);
opacity:.6;transition:opacity .2s;
}
.tkc-side-sm .tkc-menu-toggle{width:36px;height:36px;border-radius:10px;}
.tkc-menu-toggle:hover{
border-color:var(--g2);
color:#fff7d6;
transform:translateY(-2px) scale(1.05);
box-shadow:
0 8px 24px rgba(201,168,76,.4),
0 0 0 1px rgba(232,201,106,.3) inset,
0 0 16px rgba(201,168,76,.25);
}
.tkc-menu-toggle:hover::before{opacity:1;}
.tkc-menu-toggle:hover svg{transform:scale(1.15);}
.tkc-menu-toggle:active{transform:scale(.92);}
.tkc-menu-open .tkc-menu-toggle{
background:linear-gradient(135deg,var(--g1),var(--g2));
border-color:#fff7d6;
color:#1a1206;
box-shadow:
0 0 28px rgba(201,168,76,.6),
0 4px 16px rgba(0,0,0,.4),
0 0 0 2px rgba(255,247,214,.4) inset;
}
.tkc-menu-open .tkc-menu-toggle svg{
filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
transform:scale(1.1);
}
.tkc-menu-open .tkc-menu-toggle::before{
background:radial-gradient(circle at 50% 30%,rgba(255,247,214,.4),transparent 70%);
opacity:1;
}
/* ── Modern PDF Export Button (in records filter bar) ── */
.pdf-export-btn{
display:inline-flex;align-items:center;gap:8px;
padding:9px 15px;
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.28);
color:#d4af6a;
border-radius:12px;
font-family:var(--font);font-size:12px;font-weight:800;
letter-spacing:.2px;
cursor:pointer;
transition:all .2s ease;
-webkit-tap-highlight-color:transparent;
position:relative;overflow:hidden;
white-space:nowrap;
}
.pdf-export-btn:hover{
background:rgba(201,168,76,.18);
border-color:rgba(201,168,76,.45);
transform:translateY(-1px);
box-shadow:0 4px 14px rgba(201,168,76,.2);
}
.pdf-export-btn:active{ transform:translateY(0); }
.pdf-export-btn::before{
content:'';position:absolute;inset:0;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
transform:translateX(-100%);
transition:transform .7s cubic-bezier(.34,1.56,.64,1);
pointer-events:none;
}
.pdf-export-btn:hover{
background:linear-gradient(145deg,#ef4444,#b91c1c);
border-color:rgba(252,165,165,.6);
transform:translateY(-2px);
box-shadow:
0 10px 28px rgba(220,38,38,.55),
0 3px 6px rgba(0,0,0,.25),
0 0 0 1px rgba(255,255,255,.18) inset,
0 1px 0 rgba(255,255,255,.28) inset;
}
.pdf-export-btn:hover::before{transform:translateX(100%);}
.pdf-export-btn:active{transform:scale(.95);}
.pdf-export-btn .pdf-btn-ico{
display:flex;align-items:center;justify-content:center;
width:24px;height:24px;
background:rgba(201,168,76,.15);
border:1px solid rgba(201,168,76,.25);
border-radius:7px;
flex-shrink:0;
}
.pdf-export-btn .pdf-btn-ico svg{
filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.pdf-export-btn .pdf-btn-text{
letter-spacing:.4px;
}
.pdf-export-btn .pdf-btn-arrow{
display:flex;align-items:center;justify-content:center;
opacity:.7;
transition:transform .25s;
}
.pdf-export-btn:hover .pdf-btn-arrow{
transform:translateY(2px);
opacity:1;
}
/* ── Elegant rectangular "New Day" button (mobile day bar) ── */
.dbar-newday-btn{
display:inline-flex;align-items:center;gap:7px;
padding:8px 14px;
background:linear-gradient(145deg,rgba(34,197,94,.18),rgba(34,197,94,.06));
border:1px solid rgba(34,197,94,.35);
color:#4ade80;
border-radius:11px;
font-family:var(--font);font-size:12px;font-weight:800;
letter-spacing:.2px;
cursor:pointer;
transition:all .22s cubic-bezier(.34,1.56,.64,1);
-webkit-tap-highlight-color:transparent;
box-shadow:
0 3px 10px rgba(34,197,94,.18),
0 1px 2px rgba(0,0,0,.2),
0 0 0 1px rgba(255,255,255,.04) inset,
0 1px 0 rgba(255,255,255,.06) inset;
position:relative;overflow:hidden;
white-space:nowrap;
}
.dbar-newday-btn::before{
content:'';position:absolute;inset:0;
background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.12) 50%,transparent 70%);
transform:translateX(-100%);
transition:transform .6s;
pointer-events:none;
}
.dbar-newday-btn:hover{
background:linear-gradient(145deg,rgba(34,197,94,.28),rgba(34,197,94,.1));
border-color:rgba(74,222,128,.55);
color:#86efac;
transform:translateY(-2px);
box-shadow:
0 8px 22px rgba(34,197,94,.35),
0 2px 4px rgba(0,0,0,.25),
0 0 0 1px rgba(255,255,255,.08) inset,
0 1px 0 rgba(255,255,255,.1) inset;
}
.dbar-newday-btn:hover::before{transform:translateX(100%);}
.dbar-newday-btn:active{transform:scale(.94);}
.dbar-newday-btn svg{
flex-shrink:0;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
/* ── Shared floating actions menu (single instance, fixed position) ── */
/* ════════════════════════════════════════
APPLE-STYLE FLOATING ICON DOCK
(shared actions menu for ticket cards)
═══════════════════════════════════════ */
.tkc-shared-menu{
position:fixed;
top:0;left:0;
display:none;
flex-direction:column;
align-items:center;gap:10px;
background:
linear-gradient(155deg,rgba(32,34,42,.88),rgba(18,20,26,.88));
backdrop-filter:blur(50px) saturate(220%);
-webkit-backdrop-filter:blur(50px) saturate(220%);
border:1px solid rgba(255,255,255,.1);
border-radius:24px;
padding:10px;
box-shadow:
0 32px 80px rgba(0,0,0,.75),
0 16px 40px rgba(0,0,0,.55),
0 4px 12px rgba(0,0,0,.4),
0 0 0 1px rgba(255,255,255,.06) inset,
0 1px 0 rgba(255,255,255,.12) inset,
0 -1px 0 rgba(0,0,0,.2) inset;
opacity:0;
transform:scale(.3) translateY(30px);
transform-origin:center bottom;
transition:opacity .3s cubic-bezier(.4,0,.2,1),
transform .5s cubic-bezier(.34,1.8,.45,1);
z-index:99999;
pointer-events:none;
filter:drop-shadow(0 0 20px rgba(201,168,76,.08));
}
/* Subtle glow ring around menu */
.tkc-shared-menu::before{
content:'';
position:absolute;
inset:-2px;
border-radius:26px;
background:linear-gradient(155deg,rgba(255,255,255,.15),transparent 40%,transparent 60%,rgba(255,255,255,.08));
z-index:-1;
opacity:0;
transition:opacity .4s ease;
pointer-events:none;
}
.tkc-shared-menu.on::before{opacity:1;}
/* When opening UP (default), origin is at the bottom */
.tkc-shared-menu.open-up{
transform-origin:center bottom;
transform:scale(.3) translateY(30px);
}
/* When opening DOWN, origin is at the top */
.tkc-shared-menu.open-down{
transform-origin:center top;
transform:scale(.3) translateY(-30px);
}
.tkc-shared-menu.on{
display:flex;
opacity:1;
transform:scale(1) translateY(0);
pointer-events:all;
}
/* Floating icon buttons — circular, Apple-app style */
.tkc-shared-menu .tkc-am-btn{
width:50px;height:50px;
display:flex;align-items:center;justify-content:center;
/* Dark rounded square base — matches reference photo */
background:
linear-gradient(155deg, rgba(20,22,28,.95), rgba(12,14,18,.98));
border:1.5px solid var(--icon-glow, rgba(255,255,255,.12));
color:var(--icon-color, var(--t1));
border-radius:16px;
cursor:pointer;
position:relative;
flex-shrink:0;
padding:0;
-webkit-tap-highlight-color:transparent;
transition:transform .3s cubic-bezier(.34,1.56,.64,1),
box-shadow .25s ease,
border-color .25s ease;
box-shadow:
0 0 0 1px rgba(255,255,255,.03) inset,
0 4px 14px rgba(0,0,0,.4),
0 0 18px var(--icon-glow, transparent);
overflow:hidden;
}
.tkc-shared-menu .tkc-am-btn::before{
/* Subtle inner radial glow following the icon color */
content:'';
position:absolute;
inset:0;
border-radius:inherit;
background:radial-gradient(circle at 50% 50%, var(--icon-glow-soft, transparent), transparent 70%);
pointer-events:none;
opacity:.6;
transition:opacity .25s;
}
.tkc-shared-menu .tkc-am-btn svg{
width:26px;height:26px;
position:relative;z-index:2;
/* Soft drop-shadow matching color */
filter:drop-shadow(0 0 6px var(--icon-glow, transparent));
transition:transform .3s cubic-bezier(.34,1.56,.64,1), filter .25s;
}
.tkc-shared-menu .tkc-am-btn:hover{
transform:scale(1.12);
border-color:var(--icon-color, rgba(255,255,255,.25));
box-shadow:
0 0 0 1px rgba(255,255,255,.05) inset,
0 8px 22px rgba(0,0,0,.5),
0 0 32px var(--icon-glow, transparent);
}
.tkc-shared-menu .tkc-am-btn:hover::before{opacity:1;}
.tkc-shared-menu .tkc-am-btn:hover svg{
transform:scale(1.12);
filter:drop-shadow(0 0 10px var(--icon-color, currentColor));
}
.tkc-shared-menu .tkc-am-btn:active{
transform:scale(.92);
transition:transform .08s ease;
}
/* Color variants — outlined icons with ambient glow (per reference photo) */
.tkc-shared-menu .tkc-am-view{
--icon-color:#60A5FA;
--icon-glow:rgba(96,165,250,.35);
--icon-glow-soft:rgba(96,165,250,.12);
}
.tkc-shared-menu .tkc-am-edit{
--icon-color:#fbbf24;
--icon-glow:rgba(251,191,36,.35);
--icon-glow-soft:rgba(251,191,36,.12);
}
.tkc-shared-menu .tkc-am-wa{
--icon-color:#4ade80;
--icon-glow:rgba(74,222,128,.4);
--icon-glow-soft:rgba(74,222,128,.14);
}
.tkc-shared-menu .tkc-am-pay{
--icon-color:#22C55E;
--icon-glow:rgba(34,197,94,.4);
--icon-glow-soft:rgba(34,197,94,.14);
}
.tkc-shared-menu .tkc-am-ref{
--icon-color:#c084fc;
--icon-glow:rgba(192,132,252,.4);
--icon-glow-soft:rgba(192,132,252,.14);
}
.tkc-shared-menu .tkc-am-del{
--icon-color:#f87171;
--icon-glow:rgba(248,113,113,.4);
--icon-glow-soft:rgba(248,113,113,.14);
}
/* Staggered entrance — icons fly up from below (closest to toggle = last) */
.tkc-shared-menu .tkc-am-btn{
opacity:0;
transform:scale(.3) translateY(15px);
}
/* When menu opens UP, icons rise from bottom (last child = closest to toggle, rises first) */
.tkc-shared-menu.open-up.on .tkc-am-btn{
opacity:1;
transform:scale(1) translateY(0);
transition:opacity .3s ease,
transform .45s cubic-bezier(.34,1.7,.5,1),
box-shadow .2s ease,
background .2s ease,
border-color .2s ease;
}
/* Reverse stagger: last item (closest to button) appears first */
.tkc-shared-menu.open-up.on .tkc-am-btn:nth-last-child(1){transition-delay:0s,0s,0s,0s,0s;}
.tkc-shared-menu.open-up.on .tkc-am-btn:nth-last-child(2){transition-delay:.05s,.05s,0s,0s,0s;}
.tkc-shared-menu.open-up.on .tkc-am-btn:nth-last-child(3){transition-delay:.10s,.10s,0s,0s,0s;}
.tkc-shared-menu.open-up.on .tkc-am-btn:nth-last-child(4){transition-delay:.15s,.15s,0s,0s,0s;}
.tkc-shared-menu.open-up.on .tkc-am-btn:nth-last-child(5){transition-delay:.20s,.20s,0s,0s,0s;}
/* When menu opens DOWN, icons fall from above (first child = closest to toggle, falls first) */
.tkc-shared-menu.open-down .tkc-am-btn{
transform:scale(.3) translateY(-15px);
}
.tkc-shared-menu.open-down.on .tkc-am-btn{
opacity:1;
transform:scale(1) translateY(0);
transition:opacity .3s ease,
transform .45s cubic-bezier(.34,1.7,.5,1),
box-shadow .2s ease,
background .2s ease,
border-color .2s ease;
}
.tkc-shared-menu.open-down.on .tkc-am-btn:nth-child(1){transition-delay:0s,0s,0s,0s,0s;}
.tkc-shared-menu.open-down.on .tkc-am-btn:nth-child(2){transition-delay:.05s,.05s,0s,0s,0s;}
.tkc-shared-menu.open-down.on .tkc-am-btn:nth-child(3){transition-delay:.10s,.10s,0s,0s,0s;}
.tkc-shared-menu.open-down.on .tkc-am-btn:nth-child(4){transition-delay:.15s,.15s,0s,0s,0s;}
.tkc-shared-menu.open-down.on .tkc-am-btn:nth-child(5){transition-delay:.20s,.20s,0s,0s,0s;}
/* Reset delay on hover so transform applies instantly */
.tkc-shared-menu.on .tkc-am-btn:hover{transition-delay:0s !important;}
/* Active toggle button visual */
.tkc-menu-toggle-open{
background:linear-gradient(135deg,var(--g1),var(--g2)) !important;
border-color:#fff7d6 !important;
color:#1a1206 !important;
box-shadow:
0 0 28px rgba(201,168,76,.6),
0 4px 16px rgba(0,0,0,.4),
0 0 0 2px rgba(255,247,214,.4) inset !important;
}
/* ── Actions popover menu (legacy, unused but kept for compatibility) ── */
.tkc-actions-menu{
position:absolute;
bottom:0;
inset-inline-start:calc(100% + 10px);
transform:translateX(-8px) scale(.92);
display:flex;flex-direction:column;gap:3px;
background:linear-gradient(155deg,rgba(20,22,28,.97),rgba(14,16,20,.97));
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border:1px solid rgba(201,168,76,.25);
border-radius:12px;
padding:6px;
min-width:175px;
box-shadow:
0 12px 40px rgba(0,0,0,.65),
0 4px 12px rgba(0,0,0,.4),
0 0 0 1px rgba(255,255,255,.04) inset;
opacity:0;visibility:hidden;pointer-events:none;
transition:all .22s cubic-bezier(.34,1.56,.64,1);
z-index:100;
}
.tkc-menu-open .tkc-actions-menu{
opacity:1;visibility:visible;pointer-events:all;
transform:translateX(0) scale(1);
}
.tkc-am-btn{
display:flex;align-items:center;gap:9px;
background:transparent;
border:1px solid transparent;
color:var(--t2);
padding:9px 12px;border-radius:8px;
font-family:var(--font);font-size:12px;font-weight:700;
cursor:pointer;
transition:all .12s;
text-align:right;
width:100%;
-webkit-tap-highlight-color:transparent;
}
.tkc-am-btn svg{flex-shrink:0;}
.tkc-am-btn span{flex:1;text-align:right;}
.tkc-am-btn:hover{
background:rgba(255,255,255,.05);
}
.tkc-am-wa{color:#25D366;}
.tkc-am-wa:hover{background:rgba(37,211,102,.1);}
.tkc-am-pay{color:#22C55E;}
.tkc-am-pay:hover{background:rgba(34,197,94,.1);}
.tkc-am-ref{color:#a855f7;}
.tkc-am-ref:hover{background:rgba(168,85,247,.1);}
.tkc-am-del{color:#EF4444;border-top:1px solid var(--bdr);margin-top:2px;padding-top:9px;}
.tkc-am-del:hover{background:rgba(239,68,68,.1);}
/* On mobile, show menu ABOVE the toggle (since toggle is at bottom of card) */
@media(max-width:640px){
.tkc-actions-menu{
inset-inline-start:auto;
inset-inline-end:0;
bottom:calc(100% + 8px);
top:auto;
transform:translateY(8px) scale(.92);
}
.tkc-menu-open .tkc-actions-menu{
transform:translateY(0) scale(1);
}
}
/* ── Footer payment pills (multiple methods) ── */
.tkc-foot-pay{
display:flex;align-items:center;gap:6px;
flex-wrap:wrap;
margin:0 0 2px;
width:100%;
}
.tkc-pay-pill{
display:inline-flex;align-items:center;gap:4px;
background:rgba(59,130,246,.08);
border:1px solid rgba(59,130,246,.2);
color:var(--t2);
padding:3px 9px;border-radius:8px;
font-size:11px;font-weight:700;
white-space:nowrap;
}
.tkc-pay-pill b{
color:var(--g2);
font-family:'IBM Plex Mono','Roboto Mono',monospace;
font-weight:800;
font-size:11px;
}
.tkc-foot-meta{
display:flex;align-items:center;gap:6px;
flex-wrap:wrap;
font-size:10px;color:var(--t4);font-weight:600;
}
.tkc-meta-item{display:inline-flex;align-items:center;gap:3px;}
/* Foot becomes a column on small cards to fit payment pills */
.tkc-foot{
display:flex;flex-direction:column;align-items:stretch;gap:8px;
padding-top:10px;border-top:1px dashed var(--bdr);
margin-top:2px;
}
.tkc-foot .tkc-price{align-self:flex-end;}
/* ── Payment block (split or single) ── */
.tkc-pay-split{
background:linear-gradient(135deg,rgba(59,130,246,.08),rgba(59,130,246,.02));
border:1px solid rgba(59,130,246,.25);
border-radius:10px;
padding:8px 12px;
display:flex;flex-direction:column;gap:5px;
margin:2px 0;
}
.tkc-pay-split-row{
display:flex;align-items:center;justify-content:space-between;gap:8px;
font-size:11px;
}
.tkc-pay-split-label{color:var(--t3);font-weight:700;}
.tkc-pay-split-amount{
font-family:'IBM Plex Mono','Roboto Mono',monospace;
color:var(--bl);
font-weight:800;
}
.tkc-pay-single{
display:flex;align-items:center;justify-content:flex-end;gap:6px;
font-size:11px;color:var(--t3);font-weight:700;
padding:6px 0;
}
.tkc-pay-cash-tag{
background:rgba(245,158,11,.15);
color:var(--or);
border:1px solid rgba(245,158,11,.3);
padding:2px 7px;
border-radius:6px;
font-size:10px;
font-weight:800;
}
/* ── Refund pricing block ── */
.tkc-refund-pricing{
background:linear-gradient(135deg,rgba(168,85,247,.08),rgba(168,85,247,.02));
border:1px solid rgba(168,85,247,.25);
border-radius:10px;
padding:10px 12px;
display:flex;flex-direction:column;gap:5px;
margin:2px 0;
}
.tkc-rp-row{
display:flex;align-items:center;justify-content:space-between;gap:8px;
font-size:11px;
}
.tkc-rp-label{color:var(--t3);font-weight:600;}
.tkc-rp-orig{
font-family:'IBM Plex Mono','Roboto Mono',monospace;
color:var(--t4);font-weight:700;
text-decoration:line-through;
text-decoration-color:rgba(168,85,247,.6);
text-decoration-thickness:2px;
}
.tkc-rp-refund{
font-family:'IBM Plex Mono','Roboto Mono',monospace;
color:#a855f7;font-weight:800;
}
.tkc-rp-net{
padding-top:5px;
border-top:1px dashed rgba(168,85,247,.3);
margin-top:2px;
}
.tkc-rp-net .tkc-rp-label{color:var(--g2);font-weight:800;}
.tkc-rp-kept{
font-family:'IBM Plex Mono','Roboto Mono',monospace;
color:var(--g2);font-weight:900;font-size:14px;
}
.tkc-refund-reason-box{
background:rgba(168,85,247,.05);
border:1px solid rgba(168,85,247,.15);
border-radius:8px;
padding:7px 10px;
font-size:11px;
color:#c4a8e8;
line-height:1.5;
}
/* Refunded ticket footer price (row view) */
.tkc-price-refunded .tkc-price-orig{
text-decoration:line-through;
text-decoration-thickness:2px;
color:var(--t4) !important;
font-size:13px !important;
opacity:.7;
}
.tkc-price-refunded .tkc-price-currency{font-size:11px;}
/* Side needs position relative for absolute menu */
.tkc-side{position:relative;}
.sb-drawer-close{
display:none;
position:absolute;top:10px;left:10px;
width:32px;height:32px;
background:rgba(255,255,255,.05);border:1px solid var(--bdr);
border-radius:8px;color:var(--t2);font-size:16px;cursor:pointer;
z-index:10;
}
@media(max-width:1023px){
.sb-drawer-close{display:flex;align-items:center;justify-content:center;}
}
.db-menu-btn{
width:38px;height:38px;flex-shrink:0;
background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.04));
border:1px solid rgba(201,168,76,.25);
border-radius:10px;color:var(--g1);
font-size:18px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:all .15s;
}
.db-menu-btn:hover{background:linear-gradient(135deg,rgba(201,168,76,.2),rgba(201,168,76,.08));transform:translateY(-1px);}
.db-menu-btn:active{transform:scale(.95);}
/* Elegant record action buttons (PDF + Reset) */
.rec-action-btn{
display:inline-flex;align-items:center;gap:7px;
padding:9px 16px;border-radius:10px;
font-family:var(--font);font-size:12px;font-weight:800;
cursor:pointer;transition:all .15s;
border:1px solid;letter-spacing:.3px;
white-space:nowrap;
}
.rec-action-btn:hover{transform:translateY(-1px);}
.rec-action-btn:active{transform:scale(.97);}
.rec-pdf-btn{
background:linear-gradient(135deg,rgba(34,197,94,.12),rgba(34,197,94,.04));
border-color:rgba(34,197,94,.3);
color:var(--gr);
}
.rec-pdf-btn:hover{
background:linear-gradient(135deg,rgba(34,197,94,.2),rgba(34,197,94,.08));
box-shadow:0 4px 14px rgba(34,197,94,.2);
}
.rec-reset-btn{
background:linear-gradient(135deg,rgba(245,158,11,.1),rgba(245,158,11,.03));
border-color:rgba(245,158,11,.3);
color:var(--or);
}
.rec-reset-btn:hover{
background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(245,158,11,.06));
box-shadow:0 4px 14px rgba(245,158,11,.2);
}
/*
🆕✨ FUTURISTIC SPLASH SCREEN — Premium Logo + Name Display
Stunning visual effects · animated orbs · particles · shimmer
*/
#s-splash{
position:fixed;inset:0;z-index:99999;
background:radial-gradient(ellipse at center, #1a1410 0%, #0a0805 70%, #000 100%);
display:flex;align-items:center;justify-content:center;
flex-direction:column;gap:0;
transition:opacity .5s ease;
overflow:hidden;
}
#s-splash.hidden{opacity:0;pointer-events:none;}
/* Background grid effect */
#s-splash::before{
content:'';
position:absolute;
inset:0;
background-image:
linear-gradient(rgba(201,168,76,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(201,168,76,.04) 1px, transparent 1px);
background-size:50px 50px;
mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
-webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 75%);
animation:splGridFloat 30s linear infinite;
pointer-events:none;
}
@keyframes splGridFloat{
from{transform:translate(0,0);}
to{transform:translate(50px,50px);}
}
/* Animated background orbs */
.spl-orb{
position:absolute;
border-radius:50%;
filter:blur(80px);
pointer-events:none;
z-index:0;
}
.spl-orb-1{
width:500px;height:500px;
background:radial-gradient(circle, rgba(201,168,76,.45) 0%, transparent 65%);
top:-180px;right:-150px;
animation:splOrb1 16s ease-in-out infinite;
}
.spl-orb-2{
width:450px;height:450px;
background:radial-gradient(circle, rgba(251,191,36,.3) 0%, transparent 65%);
bottom:-150px;left:-120px;
animation:splOrb2 20s ease-in-out infinite;
}
.spl-orb-3{
width:300px;height:300px;
background:radial-gradient(circle, rgba(168,85,247,.18) 0%, transparent 65%);
top:50%;left:50%;transform:translate(-50%,-50%);
animation:splOrb3 22s ease-in-out infinite;
}
@keyframes splOrb1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,30px) scale(1.15);}}
@keyframes splOrb2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-30px) scale(1.15);}}
@keyframes splOrb3{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.5;}50%{transform:translate(-50%,-50%) scale(1.3);opacity:.8;}}
/* Particle dust effect */
.spl-particles{
position:absolute;
inset:0;
pointer-events:none;
z-index:1;
}
.spl-particle{
position:absolute;
width:3px;height:3px;
background:radial-gradient(circle, #fde68a 0%, transparent 70%);
border-radius:50%;
animation:splParticle 8s ease-in infinite;
opacity:0;
}
.spl-particle:nth-child(1){left:10%;animation-delay:0s;animation-duration:9s;}
.spl-particle:nth-child(2){left:25%;animation-delay:1.2s;animation-duration:11s;width:2px;height:2px;}
.spl-particle:nth-child(3){left:40%;animation-delay:2.4s;animation-duration:8s;}
.spl-particle:nth-child(4){left:55%;animation-delay:3s;animation-duration:10s;width:4px;height:4px;}
.spl-particle:nth-child(5){left:70%;animation-delay:1.8s;animation-duration:12s;}
.spl-particle:nth-child(6){left:85%;animation-delay:4s;animation-duration:9s;}
.spl-particle:nth-child(7){left:15%;animation-delay:5.5s;animation-duration:10s;width:2px;height:2px;}
.spl-particle:nth-child(8){left:65%;animation-delay:6s;animation-duration:11s;width:3px;height:3px;}
@keyframes splParticle{
0%{transform:translateY(110vh) scale(0);opacity:0;}
15%{opacity:1;}
85%{opacity:.8;}
100%{transform:translateY(-20vh) scale(1.2);opacity:0;}
}
/* Main content wrapper — centered with stagger animation */
.spl-content{
position:relative;
z-index:5;
display:flex;
flex-direction:column;
align-items:center;
gap:0;
animation:splContentIn 1.2s cubic-bezier(.16,1,.3,1);
}
@keyframes splContentIn{
from{opacity:0;transform:translateY(20px);}
to{opacity:1;transform:translateY(0);}
}
/* LOGO STAGE — multi-ring + crown */
.spl-stage{
position:relative;
width:160px;height:160px;
margin-bottom:32px;
animation:splStageFloat 5s ease-in-out infinite;
}
@keyframes splStageFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-6px);}
}
/* Outermost rotating ring with stars */
.spl-ring-outer{
position:absolute;
inset:-20px;
border:1.5px dashed rgba(201,168,76,.35);
border-radius:50%;
animation:splSpin 18s linear infinite;
}
.spl-ring-outer::before,
.spl-ring-outer::after{
content:'';
position:absolute;
width:10px;height:10px;
background:radial-gradient(circle, #fbbf24 0%, #C9A84C 100%);
border-radius:50%;
box-shadow:
0 0 20px rgba(251,191,36,.9),
0 0 40px rgba(251,191,36,.5);
}
.spl-ring-outer::before{top:-5px;left:50%;transform:translateX(-50%);}
.spl-ring-outer::after{bottom:-5px;left:50%;transform:translateX(-50%);}
/* Middle rotating ring (reverse) */
.spl-ring-mid{
position:absolute;
inset:-8px;
border:1.5px solid rgba(201,168,76,.5);
border-radius:50%;
animation:splSpin 12s linear infinite reverse;
}
.spl-ring-mid::before,
.spl-ring-mid::after{
content:'';
position:absolute;
width:7px;height:7px;
background:linear-gradient(135deg, #fef3c7, #fbbf24);
border-radius:50%;
box-shadow:0 0 14px rgba(251,191,36,.8);
}
.spl-ring-mid::before{top:-3.5px;right:18%;}
.spl-ring-mid::after{bottom:-3.5px;left:18%;}
/* Inner glowing orb */
.spl-orb-glow{
position:absolute;
inset:-40px;
background:radial-gradient(circle, rgba(201,168,76,.5) 0%, transparent 60%);
filter:blur(20px);
animation:splGlowPulse 3s ease-in-out infinite;
z-index:0;
}
@keyframes splGlowPulse{
0%,100%{opacity:.55;transform:scale(1);}
50%{opacity:.95;transform:scale(1.15);}
}
/* Logo container — premium frame */
.spl-logo{
position:absolute;
inset:0;
display:flex;align-items:center;justify-content:center;
background:
radial-gradient(circle at 30% 30%, rgba(255,255,255,.1) 0%, transparent 50%),
linear-gradient(135deg, rgba(60,45,20,.95) 0%, rgba(30,22,12,.98) 100%);
border:2px solid rgba(201,168,76,.6);
border-radius:36px;
font-size:72px;
z-index:3;
color:#fbbf24;
box-shadow:
0 30px 80px rgba(0,0,0,.7),
0 0 60px rgba(201,168,76,.25),
inset 0 2px 0 rgba(255,255,255,.12),
inset 0 -2px 0 rgba(0,0,0,.3),
inset 0 0 40px rgba(201,168,76,.15);
overflow:hidden;
}
.spl-logo::before{
content:'';
position:absolute;
top:0;left:0;
width:70%;height:55%;
background:linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
border-radius:36px 0 70% 0;
pointer-events:none;
}
.spl-logo::after{
content:'';
position:absolute;
inset:8px;
border:1px solid rgba(201,168,76,.15);
border-radius:28px;
pointer-events:none;
}
.spl-logo img{
width:78%;height:78%;
object-fit:contain;
filter:
drop-shadow(0 6px 18px rgba(201,168,76,.6))
drop-shadow(0 0 24px rgba(251,191,36,.25));
animation:splLogoFloat 4s ease-in-out infinite;
}
@keyframes splLogoFloat{
0%,100%{transform:scale(1);}
50%{transform:scale(1.04);}
}
@keyframes splSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
/* SYSTEM NAME — futuristic gradient text */
.spl-system-name{
font-family:var(--font);
font-size:36px;
font-weight:900;
letter-spacing:-1.2px;
margin-bottom:8px;
background:linear-gradient(135deg, #fff 0%, #fde68a 25%, #fbbf24 50%, #fde68a 75%, #fff 100%);
background-size:200% auto;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
animation:splShine 4s ease-in-out infinite;
text-shadow:0 0 80px rgba(201,168,76,.4);
}
@keyframes splShine{
0%,100%{background-position:0% 50%;}
50%{background-position:100% 50%;}
}
/* Tagline */
.spl-tagline{
display:flex;
align-items:center;
gap:10px;
font-size:13px;
font-weight:700;
color:#fde68a;
letter-spacing:.8px;
margin-bottom:6px;
opacity:.85;
}
.spl-tagline-dot{
width:5px;height:5px;
background:#fbbf24;
border-radius:50%;
box-shadow:0 0 12px #fbbf24;
animation:splDotPulse 1.4s ease-in-out infinite;
}
@keyframes splDotPulse{
0%,100%{opacity:.5;transform:scale(1);}
50%{opacity:1;transform:scale(1.3);}
}
/* Owner / brand line */
.spl-owner-line{
display:flex;
align-items:center;
gap:8px;
margin-top:18px;
padding:8px 18px;
background:linear-gradient(135deg, rgba(201,168,76,.1), rgba(201,168,76,.02));
border:1px solid rgba(201,168,76,.25);
border-radius:30px;
font-size:11.5px;
font-weight:800;
color:#fde68a;
letter-spacing:.4px;
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
}
.spl-owner-crown{
display:inline-flex;
align-items:center;
justify-content:center;
width:16px;height:16px;
}
.spl-owner-crown svg{
color:#fbbf24;
filter:drop-shadow(0 0 6px rgba(251,191,36,.6));
}
.spl-owner-divider{opacity:.4;font-weight:900;}
.spl-owner-name{color:#fff;font-weight:900;}
/* Status / loading text */
.spl-status{
font-size:11.5px;
color:rgba(255,255,255,.5);
font-weight:700;
letter-spacing:.4px;
margin-top:34px;
display:flex;align-items:center;gap:8px;
}
.spl-status-dot{
width:6px;height:6px;
border-radius:50%;
background:#fbbf24;
box-shadow:0 0 10px #fbbf24;
animation:splDotPulse 1s ease-in-out infinite;
}
/* Futuristic loader bar */
.spl-loader{
width:200px;
height:2px;
background:rgba(255,255,255,.08);
border-radius:2px;
overflow:hidden;
margin-top:12px;
position:relative;
}
.spl-loader::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.6), rgba(251,191,36,.9), rgba(201,168,76,.6), transparent);
background-size:50% 100%;
background-repeat:no-repeat;
animation:splLoaderSlide 1.6s ease-in-out infinite;
}
@keyframes splLoaderSlide{
0%{background-position:-100% 0;}
100%{background-position:200% 0;}
}
/* Version / corner info */
.spl-version{
position:absolute;
bottom:24px;
font-size:10px;
color:rgba(255,255,255,.3);
font-weight:700;
letter-spacing:.6px;
text-align:center;
z-index:5;
width:100%;
}
.spl-version-v{color:rgba(251,191,36,.7);font-weight:900;}
/* Mobile responsive */
@media(max-width:640px){
.spl-stage{width:130px;height:130px;margin-bottom:26px;}
.spl-logo{font-size:60px;border-radius:30px;}
.spl-logo::before{border-radius:30px 0 70% 0;}
.spl-logo::after{border-radius:23px;}
.spl-system-name{font-size:28px;}
.spl-tagline{font-size:12px;}
.spl-owner-line{font-size:11px;padding:7px 14px;}
}
/* LEGACY sp- classes kept for backward compat (silently invisible) */
#s-splash .sp-logo,
#s-splash .sp-name,
#s-splash .sp-sub,
#s-splash .sp-loader{display:none;}
/*
🆕🆕🆕 LUXURIOUS EXPENSES TAB — Modern · Professional · Elegant
*/
/* ── HERO ── */
.exh-hero{
position:relative;
background:linear-gradient(155deg, rgba(239,68,68,.06) 0%, rgba(220,38,38,.03) 60%, rgba(239,68,68,.06) 100%);
border:1.5px solid rgba(239,68,68,.18);
border-radius:22px;
padding:22px 24px;
margin-bottom:14px;
overflow:hidden;
box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.exh-hero-bg-1, .exh-hero-bg-2, .exh-hero-bg-3{
position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;
}
.exh-hero-bg-1{width:260px;height:260px;background:radial-gradient(circle,rgba(239,68,68,.25),transparent 65%);top:-100px;right:-60px;animation:exhOrb1 18s ease-in-out infinite;}
.exh-hero-bg-2{width:200px;height:200px;background:radial-gradient(circle,rgba(201,168,76,.15),transparent 65%);bottom:-80px;left:-40px;animation:exhOrb2 22s ease-in-out infinite;}
.exh-hero-bg-3{width:160px;height:160px;background:radial-gradient(circle,rgba(168,85,247,.1),transparent 65%);top:30%;left:40%;animation:exhOrb3 26s ease-in-out infinite;}
@keyframes exhOrb1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-30px,40px) scale(1.1);}}
@keyframes exhOrb2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,-30px) scale(1.08);}}
@keyframes exhOrb3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-20px,30px) scale(.95);}}
/* Top scan beam */
.exh-hero::before{
content:'';position:absolute;top:0;left:0;right:0;height:1.5px;
background:linear-gradient(90deg,transparent,rgba(239,68,68,.6),rgba(201,168,76,.4),rgba(239,68,68,.6),transparent);
opacity:.7;
}
.exh-hero-inner{position:relative;z-index:1;}
.exh-hero-top{
display:flex;align-items:center;gap:20px;
justify-content:space-between;
flex-wrap:wrap;
}
.exh-hero-titles{flex:1;min-width:200px;}
.exh-hero-eyebrow{
display:inline-flex;align-items:center;gap:7px;
padding:5px 13px 5px 10px;
background:rgba(239,68,68,.15);
border:1px solid rgba(239,68,68,.35);
border-radius:20px;
font-family:var(--font);
font-size:10px;font-weight:900;
color:#fca5a5;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:10px;
}
.exh-eb-dot{
width:6px;height:6px;border-radius:50%;
background:#ef4444;
box-shadow:0 0 8px #ef4444;
animation:exhEbDot 1.8s ease-in-out infinite;
}
@keyframes exhEbDot{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.7);}}
.exh-hero-title{
font-family:var(--font);
font-size:26px;font-weight:900;
letter-spacing:-.8px;
margin-bottom:5px;
background:linear-gradient(135deg,#fff 0%,#fca5a5 50%,#fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:exhTitleShine 6s ease-in-out infinite;
}
@keyframes exhTitleShine{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.exh-hero-sub{
font-size:12px;color:var(--t3);font-weight:700;line-height:1.6;
}
.exh-hero-stat{
background:linear-gradient(155deg, rgba(0,0,0,.45), rgba(239,68,68,.06));
border:1.5px solid rgba(239,68,68,.3);
border-radius:16px;
padding:14px 20px;
min-width:170px;
text-align:left;
position:relative;
overflow:hidden;
backdrop-filter:blur(10px);
}
.exh-hero-stat::before{
content:'';position:absolute;top:0;left:0;width:3px;height:100%;
background:linear-gradient(180deg,#ef4444,#dc2626);
box-shadow:0 0 14px rgba(239,68,68,.6);
}
.exh-stat-lbl{
font-size:10px;color:var(--t3);font-weight:800;
text-transform:uppercase;letter-spacing:.5px;
margin-bottom:6px;
}
.exh-stat-val{
font-family:var(--font);
font-size:26px;font-weight:900;
color:#fca5a5;
letter-spacing:-.8px;
line-height:1;
text-shadow:0 0 30px rgba(239,68,68,.3);
}
.exh-stat-unit{
font-size:14px;margin-right:4px;color:var(--t3);font-weight:700;
}
.exh-stat-sub{
font-size:11px;color:var(--t4);font-weight:700;margin-top:5px;
}
/* ── ADD FORM CARD ── */
.exh-form-card{
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid var(--bdr);
border-radius:18px;
padding:18px 20px;
margin-bottom:14px;
box-shadow:0 10px 28px rgba(0,0,0,.3);
position:relative;
overflow:hidden;
}
.exh-form-card::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg,transparent,rgba(201,168,76,.4),transparent);
}
.exh-form-h{
display:flex;align-items:center;gap:12px;
margin-bottom:16px;
padding-bottom:13px;
border-bottom:1px dashed rgba(255,255,255,.06);
}
.exh-form-ico{
width:38px;height:38px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#22c55e,#16a34a);
color:#fff;
border-radius:11px;
flex-shrink:0;
box-shadow:0 6px 16px rgba(34,197,94,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.exh-form-title{
font-family:var(--font);font-size:15px;font-weight:900;
color:var(--t1);letter-spacing:-.3px;
}
.exh-form-sub{
font-size:10.5px;color:var(--t3);font-weight:700;margin-top:2px;
}
.exh-form-body{}
.exh-form-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:12px;
margin-bottom:14px;
}
@media(min-width:760px){
.exh-form-grid{grid-template-columns:repeat(4,1fr);}
}
.exh-field{display:flex;flex-direction:column;gap:6px;}
.exh-field-wide{grid-column:1/-1;}
.exh-field-lbl{
display:flex;align-items:center;gap:5px;
font-size:10.5px;font-weight:800;
color:var(--t3);
letter-spacing:.2px;
}
.exh-field-lbl svg{color:var(--g2);flex-shrink:0;}
.exh-input{
width:100%;
padding:11px 13px;
background:rgba(0,0,0,.35);
border:1.5px solid var(--bdr);
border-radius:11px;
color:var(--t1);
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:700;
transition:all .3s;
}
.exh-input::placeholder{color:var(--t4);font-weight:600;}
.exh-input:focus{
outline:none;
border-color:rgba(201,168,76,.5);
background:rgba(0,0,0,.5);
box-shadow:0 0 0 3px rgba(201,168,76,.1), 0 0 20px rgba(201,168,76,.15);
}
select.exh-input{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:left 11px center;background-size:13px;padding-left:34px;}
.exh-add-btn{
position:relative;
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:13px 24px;
background:linear-gradient(135deg,#C9A84C 0%,#9F7E1C 50%,#C9A84C 100%);
background-size:200% auto;
color:#000;
border:none;
border-radius:12px;
font-family:var(--font);
font-size:13px;
font-weight:900;
letter-spacing:-.2px;
cursor:pointer;
transition:all .35s cubic-bezier(.16,1,.3,1);
box-shadow:0 12px 28px rgba(201,168,76,.45), inset 0 1px 0 rgba(255,255,255,.3), inset 0 -2px 0 rgba(0,0,0,.15);
overflow:hidden;
}
.exh-add-btn:hover{
transform:translateY(-2px);
background-position:right center;
box-shadow:0 16px 36px rgba(201,168,76,.6), inset 0 1px 0 rgba(255,255,255,.35);
}
.exh-add-btn:active{transform:translateY(0) scale(.97);}
.exh-add-glow{
position:absolute;
top:0;left:-100%;
width:60%;height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
transition:left .8s ease;
}
.exh-add-btn:hover .exh-add-glow{left:120%;}
/* ── CATEGORY BREAKDOWN STRIP ── */
.exh-cat-strip{
display:flex;
gap:8px;
overflow-x:auto;
padding:4px 2px 8px;
margin-bottom:12px;
scrollbar-width:thin;
-webkit-overflow-scrolling:touch;
}
.exh-cat-strip::-webkit-scrollbar{height:6px;}
.exh-cat-strip::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:6px;}
.exh-cat-chip{
flex-shrink:0;
display:flex;align-items:center;gap:8px;
padding:10px 14px;
background:linear-gradient(155deg, rgba(255,255,255,.04), rgba(0,0,0,.25));
border:1px solid var(--bdr);
border-radius:13px;
transition:all .25s;
min-width:130px;
cursor:default;
}
.exh-cat-chip-ico{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
flex-shrink:0;
font-size:15px;
}
.exh-cat-chip-info{flex:1;min-width:0;}
.exh-cat-chip-name{
font-size:10.5px;color:var(--t3);font-weight:700;
}
.exh-cat-chip-val{
font-family:var(--font);
font-size:14px;font-weight:900;
color:var(--t1);
margin-top:2px;
letter-spacing:-.3px;
}
.exh-cat-chip-pct{
font-size:10px;color:var(--t4);font-weight:700;margin-top:1px;
}
/* ── TOOLBAR ── */
.exh-toolbar{
display:flex;
gap:10px;
align-items:center;
margin-bottom:14px;
flex-wrap:wrap;
}
.exh-search-wrap{
flex:1;min-width:200px;
position:relative;
}
.exh-search{
width:100%;
padding:11px 38px 11px 13px;
background:rgba(0,0,0,.4);
border:1.5px solid var(--bdr);
border-radius:12px;
color:var(--t1);
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:700;
transition:all .3s;
}
.exh-search::placeholder{color:var(--t4);}
.exh-search:focus{
outline:none;
border-color:rgba(201,168,76,.5);
background:rgba(0,0,0,.55);
box-shadow:0 0 0 3px rgba(201,168,76,.1);
}
.exh-search-ico{
position:absolute;right:13px;top:50%;
transform:translateY(-50%);
color:var(--t4);
pointer-events:none;
display:flex;align-items:center;
}
.exh-filter-pills{
display:flex;
gap:6px;
flex-wrap:wrap;
}
.exh-filter-pill{
display:inline-flex;align-items:center;gap:5px;
padding:8px 12px;
background:rgba(255,255,255,.03);
border:1px solid var(--bdr);
color:var(--t3);
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:800;
cursor:pointer;
transition:all .25s;
white-space:nowrap;
}
.exh-filter-pill:hover{
border-color:rgba(201,168,76,.3);
color:var(--t1);
}
.exh-filter-pill.is-on{
background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(201,168,76,.08));
border-color:rgba(201,168,76,.5);
color:var(--g1);
box-shadow:0 4px 10px rgba(201,168,76,.2);
}
.exh-filter-pill-count{
display:inline-flex;align-items:center;
padding:1px 6px;
background:rgba(0,0,0,.4);
border-radius:7px;
font-size:9.5px;
font-weight:900;
margin-right:2px;
}
/* ── EXPENSE ROWS — Modern Cards ── */
.exh-list{display:flex;flex-direction:column;gap:9px;}
.exh-row{
position:relative;
display:flex;align-items:center;gap:13px;
padding:14px 16px;
background:linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
border:1.5px solid var(--bdr);
border-radius:14px;
transition:all .3s cubic-bezier(.16,1,.3,1);
overflow:hidden;
animation:exhRowReveal .4s ease-out backwards;
}
.exh-row:nth-child(1){animation-delay:.02s;}
.exh-row:nth-child(2){animation-delay:.05s;}
.exh-row:nth-child(3){animation-delay:.08s;}
.exh-row:nth-child(4){animation-delay:.11s;}
.exh-row:nth-child(5){animation-delay:.14s;}
.exh-row:nth-child(6){animation-delay:.17s;}
.exh-row:nth-child(n+7){animation-delay:.2s;}
@keyframes exhRowReveal{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.exh-row::before{
content:'';position:absolute;top:0;left:0;
width:3px;height:100%;
background:linear-gradient(180deg,rgba(239,68,68,.7),rgba(220,38,38,.4));
opacity:.55;
}
.exh-row:hover{
border-color:rgba(239,68,68,.3);
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(0,0,0,.4), 0 0 30px rgba(239,68,68,.08);
}
.exh-row:hover::before{opacity:1;width:4px;box-shadow:0 0 16px rgba(239,68,68,.6);}
.exh-row-ico{
width:42px;height:42px;
display:flex;align-items:center;justify-content:center;
border-radius:12px;
font-size:18px;
flex-shrink:0;
background:linear-gradient(135deg, rgba(239,68,68,.15), rgba(239,68,68,.05));
border:1px solid rgba(239,68,68,.25);
color:#f87171;
}
.exh-row-info{flex:1;min-width:0;}
.exh-row-title{
font-size:14px;font-weight:800;
color:var(--t1);
margin-bottom:4px;
letter-spacing:-.2px;
display:flex;align-items:center;gap:7px;
flex-wrap:wrap;
}
.exh-row-edited{
display:inline-flex;align-items:center;gap:3px;
background:rgba(168,85,247,.12);
border:1px solid rgba(168,85,247,.3);
color:#c084fc;
font-size:9px;
font-weight:900;
padding:1px 7px;
border-radius:6px;
letter-spacing:.3px;
}
.exh-row-meta{
display:flex;align-items:center;gap:8px;
flex-wrap:wrap;
font-size:10.5px;
color:var(--t4);
font-weight:700;
}
.exh-row-cat{
display:inline-flex;align-items:center;
padding:2px 8px;
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.2);
color:var(--g1);
border-radius:7px;
font-size:10px;
font-weight:800;
}
.exh-row-pay{
display:inline-flex;align-items:center;gap:3px;
color:var(--t3);
}
.exh-row-date{color:var(--t4);}
.exh-row-note{
font-size:10.5px;
color:var(--t4);
margin-top:4px;
font-weight:600;
line-height:1.5;
font-style:italic;
}
.exh-row-amt{
font-family:var(--font);
font-size:18px;
font-weight:900;
color:#f87171;
letter-spacing:-.4px;
flex-shrink:0;
display:flex;align-items:center;gap:2px;
}
.exh-row-amt-unit{font-size:11px;font-weight:700;color:var(--t3);margin-right:2px;}
.exh-row-actions{display:flex;gap:5px;flex-shrink:0;}
.exh-row-act{
width:32px;height:32px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
cursor:pointer;
transition:all .25s;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
color:var(--t3);
}
.exh-row-act:hover{transform:translateY(-1px);}
.exh-row-act-edit:hover{background:rgba(59,130,246,.12);border-color:rgba(59,130,246,.35);color:#60A5FA;box-shadow:0 6px 14px rgba(59,130,246,.2);}
.exh-row-act-del:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:var(--rd);box-shadow:0 6px 14px rgba(239,68,68,.2);}
/* 🆕 Permit button — luxurious gold */
.exh-row-act-permit{
background:linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.04)) !important;
border-color:rgba(201,168,76,.35) !important;
color:#fde68a !important;
}
.exh-row-act-permit:hover{
background:linear-gradient(135deg, rgba(201,168,76,.25), rgba(201,168,76,.1)) !important;
border-color:rgba(201,168,76,.55) !important;
color:#fef3c7 !important;
box-shadow:0 6px 14px rgba(201,168,76,.25);
}
/* Empty state */
.exh-empty{
text-align:center;
padding:50px 20px;
background:linear-gradient(155deg, rgba(255,255,255,.02), rgba(0,0,0,.2));
border:1.5px dashed var(--bdr);
border-radius:18px;
}
.exh-empty-ico{
font-size:42px;
margin-bottom:12px;
opacity:.7;
animation:exhEmptyFloat 3s ease-in-out infinite;
}
@keyframes exhEmptyFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.exh-empty-title{
font-family:var(--font);
font-size:15px;font-weight:900;
color:var(--t2);
margin-bottom:6px;
}
.exh-empty-sub{
font-size:11.5px;color:var(--t4);font-weight:700;
}
/* Mobile */
@media(max-width:640px){
.exh-hero{padding:18px 16px;}
.exh-hero-title{font-size:21px;}
.exh-hero-stat{padding:12px 16px;min-width:140px;}
.exh-stat-val{font-size:21px;}
.exh-form-card{padding:15px;}
.exh-row{padding:12px 13px;gap:10px;}
.exh-row-ico{width:36px;height:36px;font-size:16px;}
.exh-row-amt{font-size:15px;}
.exh-row-act{width:28px;height:28px;}
}
/* === END LUXURIOUS EXPENSES === */
/*
🆕🆕🆕 LUXURIOUS POS FEES BREAKDOWN — Daily + Monthly
Detailed per-method bank fee transparency
*/
/* Trigger row (the clickable POS fees out-row) */
.pos-fees-trigger{
cursor:pointer;
transition:all .25s;
}
.pos-fees-trigger:hover{
background:rgba(245,158,11,.04) !important;
}
.pos-fees-badge{
display:inline-flex;align-items:center;
margin-right:7px;
padding:1px 7px;
background:rgba(245,158,11,.18);
color:#fbbf24;
border:1px solid rgba(245,158,11,.35);
border-radius:7px;
font-family:var(--font);
font-size:9.5px;font-weight:900;
letter-spacing:.3px;
}
.pos-fees-chev{
margin-right:5px;
color:#fbbf24;
transition:transform .35s cubic-bezier(.34,1.56,.64,1);
vertical-align:middle;
}
.pos-fees-breakdown.is-expanded ~ .pos-fees-trigger .pos-fees-chev,
.pos-fees-trigger:has(+ .pos-fees-breakdown.is-expanded) .pos-fees-chev{
transform:rotate(-180deg);
}
/* Main breakdown card — collapsed by default */
.pos-fees-breakdown{
max-height:0;
opacity:0;
overflow:hidden;
transition:max-height .55s cubic-bezier(.4,0,.2,1), opacity .35s ease, margin-top .35s ease;
margin-top:0;
}
.pos-fees-breakdown.is-expanded{
max-height:2000px;
opacity:1;
margin-top:10px;
}
.pos-fees-breakdown > div{
/* Inner wrapper for consistent padding */
}
/* HEADER */
.pfb-h{
display:flex;align-items:center;gap:14px;
padding:16px 18px;
background:linear-gradient(135deg, rgba(245,158,11,.12) 0%, rgba(220,38,38,.05) 100%);
border:1.5px solid rgba(245,158,11,.25);
border-radius:16px 16px 0 0;
position:relative;
overflow:hidden;
}
.pfb-h::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:2px;
background:linear-gradient(90deg,transparent,rgba(245,158,11,.6),rgba(220,38,38,.4),rgba(245,158,11,.6),transparent);
}
.pfb-h::after{
content:'';
position:absolute;
top:-50px;right:-50px;
width:150px;height:150px;
background:radial-gradient(circle, rgba(245,158,11,.18), transparent 65%);
filter:blur(30px);
pointer-events:none;
}
.pfb-h-ico{
width:46px;height:46px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#fbbf24,#f59e0b);
border-radius:14px;
font-size:22px;
flex-shrink:0;
box-shadow:0 10px 24px rgba(245,158,11,.45), inset 0 1px 0 rgba(255,255,255,.3);
position:relative;z-index:1;
}
.pfb-h-titles{flex:1;min-width:0;position:relative;z-index:1;}
.pfb-h-title{
font-family:var(--font);
font-size:14.5px;font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
margin-bottom:3px;
}
.pfb-h-sub{
font-size:11px;color:var(--t3);font-weight:700;
}
.pfb-h-stat{
text-align:left;
flex-shrink:0;
position:relative;z-index:1;
}
.pfb-h-stat-val{
font-family:var(--font);
font-size:19px;font-weight:900;
color:#fbbf24;
letter-spacing:-.5px;
line-height:1;
display:inline-flex;align-items:baseline;gap:3px;
}
.pfb-h-stat-val span{font-size:11px;color:var(--t3);font-weight:700;}
.pfb-h-stat-lbl{
font-size:10px;color:var(--t3);font-weight:700;
margin-top:4px;
}
/* ROWS */
.pfb-rows{
background:linear-gradient(180deg, var(--d3), var(--d4));
border-left:1.5px solid rgba(245,158,11,.25);
border-right:1.5px solid rgba(245,158,11,.25);
padding:8px;
}
.pfb-row{
display:flex;align-items:center;gap:14px;
padding:12px 14px;
background:rgba(255,255,255,.025);
border:1px solid rgba(255,255,255,.06);
border-radius:12px;
margin-bottom:6px;
transition:all .25s;
flex-wrap:wrap;
}
.pfb-row:last-child{margin-bottom:0;}
.pfb-row:hover{
background:rgba(245,158,11,.05);
border-color:rgba(245,158,11,.25);
transform:translateX(-2px);
}
.pfb-method{
display:flex;align-items:center;gap:10px;
min-width:140px;
flex-shrink:0;
}
.pfb-method-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(245,158,11,.08));
border:1px solid rgba(245,158,11,.3);
border-radius:11px;
font-size:17px;
flex-shrink:0;
}
.pfb-method-info{}
.pfb-method-name{
font-family:var(--font);
font-size:13.5px;font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
margin-bottom:3px;
}
.pfb-method-meta{
font-size:10.5px;color:var(--t3);font-weight:700;
letter-spacing:.2px;
}
.pfb-cells{
display:flex;
gap:10px;
flex:1;
justify-content:flex-end;
flex-wrap:wrap;
}
.pfb-cell{
text-align:center;
min-width:90px;
padding:7px 11px;
background:rgba(0,0,0,.3);
border:1px solid rgba(255,255,255,.05);
border-radius:10px;
}
.pfb-cell-lbl{
font-size:9.5px;color:var(--t4);font-weight:800;
letter-spacing:.4px;
margin-bottom:4px;
text-transform:uppercase;
}
.pfb-cell-val{
font-family:var(--font);
font-size:13px;font-weight:900;
letter-spacing:-.3px;
display:inline-flex;align-items:baseline;gap:2px;
line-height:1;
}
.pfb-cell-val span{font-size:9.5px;color:var(--t4);font-weight:700;}
.pfb-amount{color:var(--t1);}
.pfb-fee{color:#fca5a5;}
.pfb-net{color:#4ade80;}
/* FOOTER */
.pfb-footer{
padding:13px 18px 16px;
background:linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(34,197,94,.04) 100%);
border:1.5px solid rgba(245,158,11,.25);
border-top:1px dashed rgba(255,255,255,.08);
border-radius:0 0 16px 16px;
}
.pfb-foot-row{
display:flex;align-items:center;justify-content:space-between;
padding:7px 0;
font-size:12.5px;
}
.pfb-foot-lbl{
display:inline-flex;align-items:center;gap:8px;
color:var(--t2);
font-weight:700;
}
.pfb-foot-ico{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
border-radius:7px;
font-size:12px;
flex-shrink:0;
}
.pfb-foot-val{
font-family:var(--font);
font-weight:900;
letter-spacing:-.3px;
font-size:13.5px;
display:inline-flex;align-items:baseline;gap:3px;
}
.pfb-foot-val span{font-size:10px;color:var(--t3);font-weight:700;}
.pfb-foot-total{color:var(--t1);}
.pfb-foot-fee{color:#fca5a5;}
.pfb-foot-divider{
height:1px;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);
margin:6px 0;
}
.pfb-foot-row-final{
padding-top:10px;
}
.pfb-foot-row-final .pfb-foot-lbl{
color:#4ade80;
font-size:13.5px;
font-weight:900;
}
.pfb-foot-net{
color:#4ade80 !important;
font-size:18px !important;
text-shadow:0 0 12px rgba(34,197,94,.4);
}
/* Mobile */
@media(max-width:640px){
.pfb-h{padding:14px;gap:10px;}
.pfb-h-ico{width:40px;height:40px;font-size:19px;}
.pfb-h-title{font-size:13px;}
.pfb-h-stat-val{font-size:16px;}
.pfb-row{padding:10px 11px;gap:10px;}
.pfb-method{min-width:110px;}
.pfb-cells{gap:6px;}
.pfb-cell{min-width:70px;padding:6px 8px;}
.pfb-cell-val{font-size:11.5px;}
.pfb-footer{padding:12px 14px 14px;}
.pfb-foot-net{font-size:15px !important;}
}
/*
🆕🆕🆕 CUSTOMER DETAIL VIEW — Visit history & analytics
*/
.cust-act-view{
background:rgba(168,85,247,.1) !important;
color:#c084fc !important;
border-color:rgba(168,85,247,.3) !important;
}
.cust-act-view:hover{
background:linear-gradient(135deg,#a855f7,#7c3aed) !important;
color:#fff !important;
border-color:transparent !important;
box-shadow:0 6px 14px rgba(168,85,247,.4);
}
/* DETAIL MODAL — larger */
#cust-detail-modal .modal{
max-width:680px !important;
}
#cust-detail-body{
padding:0 18px 18px;
max-height:75vh;
overflow-y:auto;
}
/* HEADER */
.custdet-header{
display:flex;align-items:center;gap:14px;
padding:18px 16px;
background:linear-gradient(155deg, rgba(168,85,247,.08), rgba(168,85,247,.02));
border:1.5px solid rgba(168,85,247,.18);
border-radius:16px;
margin-bottom:14px;
position:relative;
overflow:hidden;
}
.custdet-header::before{
content:'';
position:absolute;
top:0;right:0;
width:100%;height:2px;
background:linear-gradient(90deg,transparent,rgba(168,85,247,.5),rgba(251,191,36,.4),rgba(168,85,247,.5),transparent);
}
.custdet-avatar{
width:64px;height:64px;
flex-shrink:0;
display:flex;align-items:center;justify-content:center;
border-radius:18px;
font-family:var(--font);
font-size:26px;font-weight:900;
color:#fff;
background:linear-gradient(135deg,#a855f7,#7c3aed);
box-shadow:0 10px 26px rgba(168,85,247,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.custdet-avatar.is-vip{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;box-shadow:0 10px 26px rgba(251,191,36,.5);}
.custdet-avatar.is-regular{background:linear-gradient(135deg,#22c55e,#16a34a);}
.custdet-avatar.is-new{background:linear-gradient(135deg,#60A5FA,#3b82f6);}
.custdet-h-info{flex:1;min-width:0;}
.custdet-h-name{
font-family:var(--font);
font-size:18px;font-weight:900;
color:var(--t1);
letter-spacing:-.4px;
margin-bottom:6px;
}
.custdet-h-meta{
display:flex;align-items:center;gap:7px;
flex-wrap:wrap;
margin-bottom:5px;
}
.custdet-h-discount{
display:inline-flex;align-items:center;gap:4px;
padding:3px 9px 3px 7px;
background:rgba(34,197,94,.15);
color:#4ade80;
border:1px solid rgba(34,197,94,.35);
border-radius:9px;
font-size:10px;font-weight:900;
letter-spacing:.3px;
}
.custdet-h-phone{
font-family:var(--font);
font-size:12.5px;
color:var(--t3);
font-weight:700;
}
.custdet-h-actions{
display:flex;gap:6px;
flex-shrink:0;
}
/* STAT TILES */
.custdet-stats{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-bottom:14px;
}
@media(min-width:520px){.custdet-stats{grid-template-columns:repeat(4,1fr);}}
.custdet-stat-tile{
position:relative;
padding:14px 12px;
background:linear-gradient(155deg, var(--d3), var(--d4));
border:1.5px solid var(--bdr);
border-radius:14px;
text-align:center;
overflow:hidden;
transition:all .3s;
}
.custdet-stat-tile:hover{
border-color:rgba(168,85,247,.25);
transform:translateY(-2px);
box-shadow:0 10px 20px rgba(0,0,0,.3);
}
.custdet-st-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
color:#fff;
margin:0 auto 8px;
box-shadow:0 6px 14px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.custdet-st-val{
font-family:var(--font);
font-size:20px;font-weight:900;
color:var(--t1);
letter-spacing:-.5px;
line-height:1.1;
display:flex;align-items:baseline;justify-content:center;gap:3px;
}
.custdet-st-unit{
font-size:11px;
color:var(--t3);
font-weight:700;
margin-right:2px;
}
.custdet-st-lbl{
font-size:10px;
color:var(--t3);
font-weight:700;
margin-top:4px;
}
/* ALERTS */
.custdet-alerts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;}
.custdet-alert{
display:inline-flex;align-items:center;gap:6px;
padding:7px 11px;
border-radius:10px;
font-size:11px;
font-weight:800;
}
.custdet-alert-warn{
background:rgba(245,158,11,.1);
color:#fbbf24;
border:1px solid rgba(245,158,11,.3);
}
.custdet-alert-purple{
background:rgba(168,85,247,.1);
color:#c084fc;
border:1px solid rgba(168,85,247,.3);
}
/* INFO GRID */
.custdet-info-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-bottom:14px;
}
.custdet-info-cell{
padding:10px 13px;
background:rgba(255,255,255,.025);
border:1px solid var(--bdr);
border-radius:11px;
}
.custdet-info-lbl{
font-size:10px;
color:var(--t3);
font-weight:800;
margin-bottom:4px;
}
.custdet-info-val{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
}
/* SECTIONS (cars + visits) */
.custdet-section{
margin-bottom:14px;
background:linear-gradient(155deg, rgba(255,255,255,.02), rgba(0,0,0,.2));
border:1px solid var(--bdr);
border-radius:14px;
padding:14px;
}
.custdet-sec-h{
display:flex;align-items:center;gap:10px;
margin-bottom:12px;
padding-bottom:10px;
border-bottom:1px dashed rgba(255,255,255,.06);
}
.custdet-sec-ico{
width:30px;height:30px;
display:flex;align-items:center;justify-content:center;
border-radius:9px;
color:#fff;
flex-shrink:0;
box-shadow:0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.2);
}
.custdet-sec-title{
flex:1;
font-family:var(--font);
font-size:13.5px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
}
.custdet-sec-count{
padding:3px 10px;
background:rgba(168,85,247,.12);
border:1px solid rgba(168,85,247,.3);
color:#c084fc;
border-radius:9px;
font-family:var(--font);
font-size:11px;
font-weight:900;
}
/* CARS LIST */
.custdet-cars-list{display:flex;flex-direction:column;gap:7px;}
.custdet-car-row{
display:flex;align-items:center;gap:10px;
padding:9px 11px;
background:rgba(255,255,255,.025);
border:1px solid rgba(255,255,255,.04);
border-radius:10px;
transition:all .25s;
}
.custdet-car-row:hover{
background:rgba(168,85,247,.05);
border-color:rgba(168,85,247,.18);
}
.custdet-car-ico{
width:28px;height:28px;
display:flex;align-items:center;justify-content:center;
background:rgba(168,85,247,.12);
border-radius:8px;
font-size:14px;
flex-shrink:0;
}
.custdet-car-body{flex:1;min-width:0;}
.custdet-car-name{
font-size:12.5px;
font-weight:800;
color:var(--t1);
}
.custdet-car-plate{
font-size:10.5px;
color:var(--t3);
font-weight:700;
margin-top:2px;
}
.custdet-car-cnt{
font-family:var(--font);
font-size:11px;
font-weight:800;
color:var(--g1);
padding:3px 9px;
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.25);
border-radius:8px;
flex-shrink:0;
}
/* VISITS */
.custdet-visits{display:flex;flex-direction:column;gap:7px;}
.custdet-visit{
position:relative;
display:flex;align-items:center;gap:11px;
padding:11px 13px;
background:linear-gradient(155deg, rgba(255,255,255,.03), rgba(0,0,0,.2));
border:1px solid var(--bdr);
border-radius:11px;
transition:all .25s;
overflow:hidden;
}
.custdet-visit::before{
content:'';
position:absolute;
top:0;right:0;
width:3px;height:100%;
background:linear-gradient(180deg,#22c55e,#16a34a);
}
.custdet-visit-unpaid::before{background:linear-gradient(180deg,#fbbf24,#f59e0b);}
.custdet-visit-refunded::before{background:linear-gradient(180deg,#a78bfa,#7c3aed);}
.custdet-visit:hover{
border-color:rgba(168,85,247,.25);
transform:translateX(-2px);
}
.custdet-v-num{
font-family:var(--font);
font-size:11px;
font-weight:900;
color:var(--g1);
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.25);
border-radius:8px;
padding:5px 9px;
letter-spacing:.3px;
flex-shrink:0;
}
.custdet-v-body{flex:1;min-width:0;}
.custdet-v-top{
display:flex;align-items:center;gap:8px;
flex-wrap:wrap;
margin-bottom:4px;
}
.custdet-v-insp{
font-family:'Cairo',sans-serif;
font-size:12.5px;
font-weight:800;
color:var(--t1);
}
.custdet-v-status{
display:inline-flex;align-items:center;
padding:2px 7px;
border-radius:7px;
font-size:9.5px;
font-weight:900;
letter-spacing:.3px;
}
.custdet-vs-paid{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(34,197,94,.3);}
.custdet-vs-unpaid{background:rgba(245,158,11,.15);color:#fbbf24;border:1px solid rgba(245,158,11,.3);}
.custdet-vs-refunded{background:rgba(168,85,247,.15);color:#c084fc;border:1px solid rgba(168,85,247,.3);}
.custdet-v-meta{
display:flex;align-items:center;gap:8px;
flex-wrap:wrap;
font-size:10px;
color:var(--t4);
font-weight:700;
}
.custdet-v-meta span{
display:inline-flex;align-items:center;gap:2px;
}
.custdet-v-price{
font-family:var(--font);
font-size:15px;
font-weight:900;
color:#4ade80;
letter-spacing:-.3px;
flex-shrink:0;
display:flex;align-items:baseline;gap:2px;
}
.custdet-visit-unpaid .custdet-v-price{color:#fbbf24;}
.custdet-visit-refunded .custdet-v-price{color:#c084fc;text-decoration:line-through;opacity:.8;}
.custdet-v-unit{font-size:10px;color:var(--t3);font-weight:700;}
.custdet-more{
text-align:center;
padding:10px;
color:var(--t4);
font-size:11px;
font-weight:700;
font-style:italic;
background:rgba(255,255,255,.02);
border-radius:9px;
margin-top:4px;
}
.custdet-empty{
text-align:center;
padding:30px 16px;
}
.custdet-empty-ico{
font-size:32px;
opacity:.6;
margin-bottom:8px;
}
.custdet-empty-title{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t2);
margin-bottom:4px;
}
.custdet-empty-sub{
font-size:11px;
color:var(--t4);
font-weight:700;
}
/* FOOTER */
.custdet-footer{
display:flex;gap:8px;
margin-top:14px;
padding-top:14px;
border-top:1px dashed rgba(255,255,255,.06);
}
@media(max-width:640px){
.custdet-header{padding:14px;gap:11px;}
.custdet-avatar{width:56px;height:56px;font-size:22px;}
.custdet-h-name{font-size:16px;}
.custdet-stat-tile{padding:11px 8px;}
.custdet-st-val{font-size:17px;}
.custdet-info-grid{grid-template-columns:1fr;}
}
/*
🆕🆕🆕 COLLAPSIBLE SIDEBAR — Icons-only mode
*/
.dash-sb{
/* Premium spring transition for both width and content */
transition:
width .48s cubic-bezier(.34,1.56,.64,1),
box-shadow .35s ease;
position:sticky;
will-change:width;
}
/* Smooth fade out for labels when collapsing */
.dash-sb .nl,
.dash-sb .sb-day,
.dash-sb .sb-alert,
.dash-sb .sb-nd-txt,
.dash-sb .sb-nd-arrow,
.dash-sb .sb-cloud-status,
.dash-sb .sb-icon-btn span,
.dash-sb .sb-badge{
transition:opacity .25s ease;
opacity:1;
}
/* Stagger reveal animation for nav items when sidebar opens */
@keyframes sbNavReveal{
from{opacity:0;transform:translateX(15px);}
to{opacity:1;transform:translateX(0);}
}
/* 🆕 Respect reduced-motion preference + low-end device fallback */
@media (prefers-reduced-motion: reduce){
.sb-nav-item .ni{transition:background .15s, color .15s !important;}
.sb-nav-item:hover .ni{transform:none !important;}
.sb-nav-item.on .ni::after{animation:none !important;}
.dash-sb.drawer-open .sb-nav-item{animation:none !important;}
}
/* ── FUTURISTIC ICON STYLING (PERFORMANCE-OPTIMIZED) ── */
.sb-nav-item{
/* Enable GPU acceleration + contain layout/paint for smoother scrolling */
contain:layout style;
will-change:auto; /* only activate during transition */
}
.sb-nav-item .ni{
display:flex !important;
align-items:center;
justify-content:center;
width:32px;height:32px;
border-radius:9px;
flex-shrink:0;
background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
border:1px solid rgba(255,255,255,.06);
position:relative;
overflow:hidden;
/* Optimized transitions — only animate transform + shadow (GPU-friendly) */
transition:
transform .28s cubic-bezier(.34,1.56,.64,1),
background .22s ease,
border-color .22s ease,
box-shadow .22s ease;
box-shadow:0 2px 6px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
/* Force GPU layer */
transform:translateZ(0);
backface-visibility:hidden;
}
.sb-nav-item .ni svg{
width:16px;height:16px;
color:var(--t3);
transition:color .22s ease;
position:relative;z-index:2;
}
/* Lightweight inset glow (replaces expensive drop-shadow filter) */
.sb-nav-item .ni::before{
content:'';
position:absolute;
inset:0;
background:linear-gradient(135deg,transparent 35%,rgba(255,255,255,.10) 50%,transparent 65%);
transform:translateX(-150%);
transition:transform .7s cubic-bezier(.4,0,.2,1);
pointer-events:none;
}
/* Pulsing orb behind icon — uses opacity instead of transform for less reflow */
.sb-nav-item:hover .ni::before{
transform:translateX(150%);
}
/* ACTIVE/ON: gold gradient (no drop-shadow filter — uses box-shadow instead) */
.sb-nav-item.on .ni{
background:linear-gradient(135deg, #C9A84C 0%, #9F7E1C 100%);
border-color:rgba(201,168,76,.7);
box-shadow:0 8px 20px rgba(201,168,76,.42), 0 0 22px rgba(201,168,76,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.sb-nav-item.on .ni svg{
color:#fff;
}
.sb-nav-item.on .ni::after{
opacity:1;
animation:niActivePulse 2.4s ease-in-out infinite;
}
@keyframes niActivePulse{
0%,100%{transform:scale(1);opacity:.6;}
50%{transform:scale(1.22);opacity:0;}
}
/* Special variants */
.sb-nav-home .ni{
background:linear-gradient(135deg, rgba(201,168,76,.18), rgba(201,168,76,.06));
border-color:rgba(201,168,76,.35);
}
.sb-nav-home .ni svg{color:var(--g1);}
.sb-nav-warn .ni{
background:linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,158,11,.05));
border-color:rgba(245,158,11,.3);
}
.sb-nav-warn .ni svg{color:var(--or);}
.sb-nav-warn:hover .ni{
background:linear-gradient(135deg, rgba(245,158,11,.25), rgba(245,158,11,.1));
border-color:rgba(245,158,11,.5);
box-shadow:0 6px 14px rgba(245,158,11,.25), 0 0 20px rgba(245,158,11,.15);
}
.sb-nav-warn:hover .ni svg{filter:drop-shadow(0 0 6px rgba(245,158,11,.7));}
/* Customer pane uses purple accent */
#dsn-customers.on .ni{
background:linear-gradient(135deg, #a855f7 0%, #7c3aed 100%);
border-color:rgba(168,85,247,.7);
box-shadow:0 8px 22px rgba(168,85,247,.45), 0 0 24px rgba(168,85,247,.25), inset 0 1px 0 rgba(255,255,255,.25);
}
#dsn-customers.on .ni::after{
background:radial-gradient(circle at center, rgba(168,85,247,.35), transparent 70%);
}
#dsn-customers:hover .ni{
background:linear-gradient(135deg, rgba(168,85,247,.18), rgba(168,85,247,.06));
border-color:rgba(168,85,247,.4);
box-shadow:0 6px 14px rgba(168,85,247,.2), 0 0 20px rgba(168,85,247,.15);
}
#dsn-customers:hover .ni svg{color:#c084fc;filter:drop-shadow(0 0 6px rgba(168,85,247,.6));}
/* On default theme — sidebar bg uses dark text */
.sb-nav-item{
display:flex;
align-items:center;
gap:10px !important;
}
/*
🆕✨ LUXURY SIDEBAR COLLAPSE — Vertical Capsule Handle
Elegant gold-trim handle that elegantly attaches to sidebar edge.
*/
/* Set CSS variable on dash-body for sidebar width */
.dash-body{
--sb-w: 220px;
position:relative;
}
.dash-body:has(.dash-sb.is-collapsed){
--sb-w: 66px;
}
.sb-collapse-btn{
position:absolute;
top:50%;
right:calc(var(--sb-w, 220px) - 7px); /* Sits centered ON the edge */
transform:translateY(-50%);
width:14px;
height:64px;
display:none;
align-items:center;justify-content:center;
background:linear-gradient(180deg,
rgba(28,30,36,.65) 0%,
rgba(35,38,45,.85) 50%,
rgba(28,30,36,.65) 100%);
backdrop-filter:blur(14px) saturate(160%);
-webkit-backdrop-filter:blur(14px) saturate(160%);
color:rgba(201,168,76,.7);
border:1px solid rgba(201,168,76,.28);
border-radius:14px;
cursor:pointer;
z-index:1500;
padding:0;
box-shadow:
0 4px 14px rgba(0,0,0,.45),
0 0 0 1px rgba(255,255,255,.03) inset,
0 0 0 2px var(--d1); /* outer ring matches background */
transition:
right .48s cubic-bezier(.34,1.56,.64,1),
width .35s cubic-bezier(.34,1.56,.64,1),
height .35s cubic-bezier(.34,1.56,.64,1),
background .35s ease,
color .25s ease,
border-color .35s ease,
box-shadow .35s ease;
-webkit-tap-highlight-color:transparent;
outline:none;
overflow:hidden;
}
/* Subtle vertical highlight strip in middle */
.sb-collapse-btn::before{
content:'';
position:absolute;
top:8px;bottom:8px;
left:50%;
width:1.5px;
transform:translateX(-50%);
background:linear-gradient(180deg,
transparent 0%,
rgba(201,168,76,.2) 20%,
rgba(201,168,76,.5) 50%,
rgba(201,168,76,.2) 80%,
transparent 100%);
border-radius:2px;
transition:opacity .35s ease, width .35s ease;
pointer-events:none;
}
/* The chevron icon — hidden by default, shown on hover */
.sb-cb-chevron{
width:0;
height:0;
opacity:0;
transition:
width .3s cubic-bezier(.34,1.56,.64,1) .05s,
height .3s cubic-bezier(.34,1.56,.64,1) .05s,
opacity .25s ease .1s,
transform .45s cubic-bezier(.34,1.56,.64,1);
filter:drop-shadow(0 0 6px rgba(251,191,36,.5));
flex-shrink:0;
}
/* HOVER — handle widens, chevron appears, gold accent */
.sb-collapse-btn:hover{
width:28px;
height:80px;
border-color:rgba(251,191,36,.6);
color:#fbbf24;
background:linear-gradient(180deg,
rgba(28,30,36,.85) 0%,
rgba(38,42,50,.92) 50%,
rgba(28,30,36,.85) 100%);
box-shadow:
0 8px 22px rgba(0,0,0,.55),
0 0 24px rgba(251,191,36,.25),
0 0 0 1px rgba(251,191,36,.2) inset,
0 0 0 2px var(--d1);
}
.sb-collapse-btn:hover::before{
opacity:0;
width:0;
}
.sb-collapse-btn:hover .sb-cb-chevron{
width:16px;
height:16px;
opacity:1;
}
.sb-collapse-btn:active{
width:22px;
height:70px;
transition-duration:.15s;
}
/* When sidebar collapsed → chevron flips */
.dash-sb.is-collapsed ~ .sb-collapse-btn .sb-cb-chevron,
.dash-body:has(.dash-sb.is-collapsed) .sb-cb-chevron{
transform:rotate(180deg);
}
/* The label — appears beside the handle when hovered */
.sb-cb-label{
position:absolute;
top:50%;
right:calc(100% + 12px); /* to the LEFT of handle (content side) */
transform:translateY(-50%) translateX(10px);
background:linear-gradient(135deg,#1a1a1a 0%,#0d0d0d 100%);
color:#fbbf24;
padding:8px 14px;
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:900;
white-space:nowrap;
border:1px solid rgba(201,168,76,.45);
box-shadow:
0 12px 28px rgba(0,0,0,.75),
0 0 20px rgba(201,168,76,.18);
opacity:0;
pointer-events:none;
z-index:2000;
transition:
opacity .25s ease .08s,
transform .35s cubic-bezier(.34,1.56,.64,1) .08s;
letter-spacing:-.1px;
}
/* Arrow on label pointing toward handle */
.sb-cb-label::before{
content:'';
position:absolute;
left:100%;
top:50%;
transform:translateY(-50%);
border:6px solid transparent;
border-left-color:rgba(201,168,76,.45);
}
.sb-cb-label::after{
content:'';
position:absolute;
left:calc(100% - 1px);
top:50%;
transform:translateY(-50%);
border:5px solid transparent;
border-left-color:#1a1a1a;
}
.sb-collapse-btn:hover .sb-cb-label{
opacity:1;
transform:translateY(-50%) translateX(0);
}
/* Show only on desktop */
@media(min-width:1024px){
.sb-collapse-btn{display:flex;}
}
/* Chevron rotates 180deg when collapsed (points outward) */
.sb-cb-chevron{
transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.dash-sb.is-collapsed .sb-cb-chevron{
transform:rotate(180deg);
}
/* When collapsed: sidebar becomes 68px wide showing only icons */
@media(min-width:1024px){
.dash-sb.is-collapsed{
width:68px;
}
.dash-sb.is-collapsed .sb-collapse-btn .sb-cb-icon-shrink{display:none;}
.dash-sb.is-collapsed .sb-collapse-btn .sb-cb-icon-expand{display:block;}
/* Hide labels when collapsed */
.dash-sb.is-collapsed .sb-day,
.dash-sb.is-collapsed .sb-alert,
.dash-sb.is-collapsed .sb-nd-txt,
.dash-sb.is-collapsed .sb-nd-arrow,
.dash-sb.is-collapsed .sb-newday-btn .sb-nd-content,
.dash-sb.is-collapsed .sb-btn.primary,
.dash-sb.is-collapsed .sb-cloud-status,
.dash-sb.is-collapsed .sb-icon-btn span,
.dash-sb.is-collapsed .nl,
.dash-sb.is-collapsed .sb-section-label,
.dash-sb.is-collapsed .sb-cloud-info,
.dash-sb.is-collapsed .sb-day-lbl,
.dash-sb.is-collapsed .sb-day-val,
.dash-sb.is-collapsed .sb-day-stats,
.dash-sb.is-collapsed .sb-badge,
.dash-sb.is-collapsed .sb-profile-info,
.dash-sb.is-collapsed .sb-quick-icons,
.dash-sb.is-collapsed .sb-stat-cards,
.dash-sb.is-collapsed #sb-featured-slot,
.dash-sb.is-collapsed .sb-avatar-edit{
display:none !important;
}
.dash-sb.is-collapsed .sb-profile{
flex-direction:column;justify-content:center;padding:10px 0!important;gap:0!important;
}
.dash-sb.is-collapsed .sb-profile-avatar{margin:0 auto!important;}
/* Hide text label of new-day button but keep icon */
.dash-sb.is-collapsed .sb-newday-btn{
padding:0;
height:46px;
display:flex;align-items:center;justify-content:center;
margin-bottom:8px;
}
.dash-sb.is-collapsed .sb-newday-btn .sb-nd-glow{display:none;}
.dash-sb.is-collapsed .sb-newday-btn::after{
content:'';
display:flex;align-items:center;justify-content:center;
width:46px;height:46px;
background:linear-gradient(135deg,#22c55e,#16a34a);
border-radius:13px;
color:#fff;
-webkit-mask:url("data:image/svg+xml;utf8,") center/22px no-repeat;
mask:url("data:image/svg+xml;utf8,") center/22px no-repeat;
}
/* Nav items: icons-only, centered */
.dash-sb.is-collapsed .sb-nav-item{
padding:8px 0 !important;
justify-content:center;
gap:0 !important;
min-height:48px;
position:relative;
}
.dash-sb.is-collapsed .sb-nav-item .ni{
width:38px;height:38px;
margin:0;
}
.dash-sb.is-collapsed .sb-nav-item .ni svg{
width:18px;height:18px;
}
/* Tooltip on hover (collapsed mode) */
.dash-sb.is-collapsed .sb-nav-item::after{
content:attr(data-label);
position:absolute;
right:calc(100% + 16px);
top:50%;
transform:translateY(-50%) translateX(8px);
background:linear-gradient(135deg,#0a0a0a,#15151c);
color:#fff;
padding:7px 13px;
border-radius:10px;
font-size:11.5px;
font-weight:800;
white-space:nowrap;
opacity:0;
pointer-events:none;
z-index:1000;
border:1px solid rgba(201,168,76,.45);
box-shadow:0 10px 28px rgba(0,0,0,.7), 0 0 20px rgba(201,168,76,.12);
transition:opacity .25s, transform .25s;
}
.dash-sb.is-collapsed .sb-nav-item:hover::after{
opacity:1;
transform:translateY(-50%) translateX(0);
}
/* Bottom panel adjustments */
.dash-sb.is-collapsed .sb-bottom-panel{padding:8px 4px;}
.dash-sb.is-collapsed .sb-action-row{flex-direction:column;gap:6px;}
.dash-sb.is-collapsed .sb-icon-btn{
width:38px;height:38px;
min-width:38px;max-width:38px;
padding:0 !important;
margin:0 auto;
justify-content:center;align-items:center;
border-radius:10px;
}
.dash-sb.is-collapsed .sb-icon-btn svg{
width:18px !important;height:18px !important;
}
.dash-sb.is-collapsed .sb-action-row{
flex-direction:column;
gap:8px;
align-items:center;
}
}
/* 🆕 MOBILE/TABLET: force-reset is-collapsed so drawer mode works */
@media(max-width:1023px){
.dash-sb.is-collapsed{
width:280px !important;
}
.dash-sb.is-collapsed .sb-day,
.dash-sb.is-collapsed .sb-alert,
.dash-sb.is-collapsed .sb-nd-txt,
.dash-sb.is-collapsed .sb-nd-arrow,
.dash-sb.is-collapsed .sb-cloud-status,
.dash-sb.is-collapsed .sb-icon-btn span,
.dash-sb.is-collapsed .nl,
.dash-sb.is-collapsed .sb-badge{
display:initial !important;
}
.dash-sb.is-collapsed .sb-newday-btn{
padding:13px 14px !important;
height:auto !important;
}
.dash-sb.is-collapsed .sb-newday-btn::after{display:none !important;}
.dash-sb.is-collapsed .sb-nav-item{
padding:10px 12px !important;
justify-content:flex-start !important;
gap:10px !important;
}
.dash-sb.is-collapsed .sb-nav-item::after{display:none !important;}
.sb-collapse-btn{display:none !important;}
}
/* Body adjustment: when sidebar is narrow, content gets more space */
.dash-body.has-collapsed-sb .dash-content{
max-width:none;
}
/*
🆕🆕🆕 CUSTOMERS TAB
*/
/* HERO */
.cust-hero{
position:relative;
background:linear-gradient(155deg, rgba(168,85,247,.06) 0%, rgba(227,169,44,.03) 60%, rgba(168,85,247,.06) 100%);
border:1.5px solid rgba(168,85,247,.18);
border-radius:22px;
padding:22px 24px;
margin-bottom:14px;
overflow:hidden;
box-shadow:0 18px 40px rgba(0,0,0,.25);
}
.cust-hero-bg-1,.cust-hero-bg-2,.cust-hero-bg-3{
position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;
}
.cust-hero-bg-1{width:260px;height:260px;background:radial-gradient(circle,rgba(168,85,247,.3),transparent 65%);top:-100px;right:-60px;animation:exhOrb1 20s ease-in-out infinite;}
.cust-hero-bg-2{width:200px;height:200px;background:radial-gradient(circle,rgba(34,197,94,.15),transparent 65%);bottom:-80px;left:-40px;animation:exhOrb2 24s ease-in-out infinite;}
.cust-hero-bg-3{width:160px;height:160px;background:radial-gradient(circle,rgba(251,191,36,.15),transparent 65%);top:30%;left:40%;animation:exhOrb3 28s ease-in-out infinite;}
.cust-hero::before{
content:'';position:absolute;top:0;left:0;right:0;height:1.5px;
background:linear-gradient(90deg,transparent,rgba(168,85,247,.6),rgba(251,191,36,.4),rgba(168,85,247,.6),transparent);
}
.cust-hero-inner{position:relative;z-index:1;display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;}
.cust-hero-titles{flex:1;min-width:200px;}
.cust-hero-eyebrow{
display:inline-flex;align-items:center;gap:7px;
padding:5px 13px 5px 10px;
background:rgba(168,85,247,.15);
border:1px solid rgba(168,85,247,.35);
border-radius:20px;
font-family:var(--font);
font-size:10px;font-weight:900;
color:#c084fc;
letter-spacing:1px;
text-transform:uppercase;
margin-bottom:10px;
}
.cust-eb-dot{
width:6px;height:6px;border-radius:50%;
background:#c084fc;
box-shadow:0 0 8px #c084fc;
animation:exhEbDot 1.8s ease-in-out infinite;
}
.cust-hero-title{
font-family:var(--font);
font-size:26px;font-weight:900;
letter-spacing:-.8px;
margin-bottom:5px;
background:linear-gradient(135deg,#fff 0%,#c084fc 50%,#fff 100%);
background-size:200% auto;
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
animation:exhTitleShine 7s ease-in-out infinite;
}
.cust-hero-sub{font-size:12px;color:var(--t3);font-weight:700;line-height:1.6;}
.cust-hero-stats{display:flex;gap:10px;flex-wrap:wrap;}
.cust-hero-stat{
display:flex;align-items:center;gap:10px;
background:linear-gradient(155deg, rgba(0,0,0,.45), rgba(168,85,247,.05));
border:1px solid rgba(255,255,255,.08);
border-radius:14px;
padding:11px 16px 11px 14px;
min-width:130px;
backdrop-filter:blur(10px);
}
.chs-ico{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
flex-shrink:0;
font-size:17px;
background:linear-gradient(135deg,#a855f7,#7c3aed);
color:#fff;
box-shadow:0 6px 14px rgba(168,85,247,.35), inset 0 1px 0 rgba(255,255,255,.2);
}
.chs-body{}
.chs-val{
font-family:var(--font);
font-size:18px;font-weight:900;
color:var(--t1);
letter-spacing:-.4px;
line-height:1;
}
.chs-lbl{
font-size:10px;color:var(--t3);font-weight:700;
margin-top:3px;
}
/* TOOLBAR */
.cust-toolbar{
display:flex;gap:10px;
align-items:center;
margin-bottom:12px;
flex-wrap:wrap;
}
.cust-search-wrap{flex:1;min-width:200px;position:relative;}
.cust-search{
width:100%;
padding:11px 38px 11px 13px;
background:rgba(0,0,0,.4);
border:1.5px solid var(--bdr);
border-radius:12px;
color:var(--t1);
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:700;
transition:all .3s;
}
.cust-search:focus{
outline:none;
border-color:rgba(168,85,247,.5);
background:rgba(0,0,0,.55);
box-shadow:0 0 0 3px rgba(168,85,247,.1);
}
.cust-search-ico{
position:absolute;right:13px;top:50%;
transform:translateY(-50%);
color:var(--t4);
pointer-events:none;
}
.cust-add-btn{
display:inline-flex;align-items:center;gap:7px;
padding:11px 18px;
background:linear-gradient(135deg,#a855f7,#7c3aed);
color:#fff;
border:none;
border-radius:12px;
font-family:'Cairo',sans-serif;
font-size:13px;
font-weight:900;
cursor:pointer;
transition:all .3s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 8px 20px rgba(168,85,247,.4), inset 0 1px 0 rgba(255,255,255,.2);
}
.cust-add-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(168,85,247,.55);}
.cust-add-btn:active{transform:scale(.97);}
/* FILTER PILLS */
.cust-filter-pills{
display:flex;
gap:6px;
margin-bottom:14px;
flex-wrap:wrap;
}
.cust-pill{
display:inline-flex;align-items:center;gap:5px;
padding:7px 13px;
background:rgba(255,255,255,.03);
border:1px solid var(--bdr);
color:var(--t3);
border-radius:10px;
font-family:'Cairo',sans-serif;
font-size:11.5px;
font-weight:800;
cursor:pointer;
transition:all .25s;
}
.cust-pill:hover{border-color:rgba(168,85,247,.3);color:var(--t1);}
.cust-pill.is-on{
background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(168,85,247,.08));
border-color:rgba(168,85,247,.5);
color:#c084fc;
box-shadow:0 4px 10px rgba(168,85,247,.2);
}
.cust-pill-cnt{
padding:1px 6px;
background:rgba(0,0,0,.4);
border-radius:7px;
font-size:9.5px;
font-weight:900;
}
/* CUSTOMER CARDS */
.cust-list{display:flex;flex-direction:column;gap:10px;}
.cust-card{
position:relative;
display:flex;
flex-direction:column;
gap:11px;
padding:14px 16px;
background:linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
border:1.5px solid var(--bdr);
border-radius:16px;
transition:all .3s cubic-bezier(.16,1,.3,1);
overflow:hidden;
animation:exhRowReveal .4s ease-out backwards;
}
.cust-card:nth-child(1){animation-delay:.02s;}
.cust-card:nth-child(2){animation-delay:.05s;}
.cust-card:nth-child(3){animation-delay:.08s;}
.cust-card:nth-child(4){animation-delay:.11s;}
.cust-card:nth-child(5){animation-delay:.14s;}
.cust-card:nth-child(n+6){animation-delay:.17s;}
.cust-card::before{
content:'';position:absolute;top:0;left:0;
width:3px;height:100%;
background:linear-gradient(180deg,rgba(168,85,247,.7),rgba(227,169,44,.4));
}
.cust-card.is-vip::before{background:linear-gradient(180deg,#fbbf24,#f59e0b);box-shadow:0 0 14px rgba(251,191,36,.5);}
.cust-card.is-regular::before{background:linear-gradient(180deg,#22c55e,#16a34a);box-shadow:0 0 14px rgba(34,197,94,.4);}
.cust-card.is-new::before{background:linear-gradient(180deg,#60A5FA,#3b82f6);}
.cust-card:hover{
border-color:rgba(168,85,247,.3);
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(0,0,0,.4), 0 0 30px rgba(168,85,247,.08);
}
/* Main row inside card — avatar + info + actions */
.cust-card-main{
display:flex;
flex-direction:row;
align-items:center;
gap:14px;
flex-wrap:nowrap;
}
/* الترتيب البصري في RTL: avatar يمين، info وسط، actions يسار */
.cust-card-main > .cust-actions{ margin-left:auto; }
.cust-avatar{
width:50px;height:50px;
display:flex;align-items:center;justify-content:center;
border-radius:14px;
font-family:var(--font);
font-size:18px;font-weight:900;
color:#fff;
flex-shrink:0;
background:linear-gradient(135deg,#a855f7,#7c3aed);
box-shadow:0 6px 16px rgba(168,85,247,.4), inset 0 1px 0 rgba(255,255,255,.2);
transition:transform .25s;
}
.cust-card:hover .cust-avatar{transform:scale(1.05);}
.cust-card.is-vip .cust-avatar{background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#000;box-shadow:0 8px 20px rgba(251,191,36,.4);}
.cust-card.is-regular .cust-avatar{background:linear-gradient(135deg,#22c55e,#16a34a);}
.cust-card.is-new .cust-avatar{background:linear-gradient(135deg,#60A5FA,#3b82f6);}
.cust-info{
flex:1;
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start;
gap:6px;
text-align:right;
}
.cust-name-row{
display:flex;
align-items:center;
justify-content:flex-start;
gap:8px;
flex-wrap:wrap;
margin-bottom:0;
}
.cust-name{
font-family:var(--font);
font-size:17px;font-weight:900;
color:var(--t1);
letter-spacing:-.3px;
line-height:1.25;
width:100%;
margin-bottom:2px;
}
.cust-badges-row{
display:flex;align-items:center;justify-content:flex-start;
gap:6px;flex-wrap:wrap;
}
.cust-tier{
display:inline-flex;align-items:center;gap:4px;
padding:2px 9px 2px 7px;
border-radius:9px;
font-family:var(--font);
font-size:9.5px;font-weight:900;
letter-spacing:.4px;
}
.cust-tier.is-vip{background:rgba(251,191,36,.18);color:#fbbf24;border:1px solid rgba(251,191,36,.4);}
.cust-tier.is-regular{background:rgba(34,197,94,.15);color:#4ade80;border:1px solid rgba(74,222,128,.4);}
.cust-tier.is-new{background:rgba(96,165,250,.15);color:#60A5FA;border:1px solid rgba(96,165,250,.4);}
.cust-phone{
font-family:var(--font);
font-size:12.5px;
color:var(--t2);
font-weight:700;
direction:rtl;
text-align:right;
letter-spacing:.3px;
unicode-bidi:plaintext;
}
.cust-meta{
display:flex;align-items:center;justify-content:flex-start;gap:8px;
flex-wrap:wrap;
margin-top:0;
font-size:10.5px;
color:var(--t4);
font-weight:700;
}
.cust-meta-item{
display:inline-flex;align-items:center;gap:5px;
padding:4px 10px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.07);
border-radius:8px;
font-size:11px;
color:var(--t2);
}
/* CONTACT ACTIONS (call + WhatsApp + edit + delete) */
.cust-actions{
display:flex;
flex-direction:column;
gap:7px;
align-items:center;
flex-shrink:0;
}
.cust-act{
width:36px;height:36px;
display:flex;align-items:center;justify-content:center;
border-radius:11px;
border:1px solid var(--bdr);
cursor:pointer;
transition:all .25s;
text-decoration:none;
position:relative;
background:rgba(255,255,255,.04);
color:var(--t3);
}
.cust-act:hover{transform:translateY(-2px);}
.cust-act-call{
background:rgba(59,130,246,.1);
color:#60A5FA;
border-color:rgba(59,130,246,.3);
}
.cust-act-call:hover{
background:linear-gradient(135deg,#3B82F6,#1d4ed8);
color:#fff;
border-color:transparent;
box-shadow:0 6px 14px rgba(59,130,246,.4);
}
.cust-act-wa{
background:rgba(37,211,102,.1);
color:#22c55e;
border-color:rgba(37,211,102,.3);
}
.cust-act-wa:hover{
background:linear-gradient(135deg,#25D366,#1ebd5b);
color:#fff;
border-color:transparent;
box-shadow:0 6px 14px rgba(37,211,102,.4);
}
.cust-act-edit:hover{
background:rgba(168,85,247,.12);
color:#c084fc;
border-color:rgba(168,85,247,.4);
}
.cust-act-del:hover{
background:rgba(239,68,68,.12);
color:#f87171;
border-color:rgba(239,68,68,.4);
}
/* 🆕 STATS RIBBON — Always visible, prominent, beautiful */
.cust-ribbon{
display:flex;
gap:8px;
width:100%;
padding-top:11px;
border-top:1px dashed rgba(255,255,255,.07);
flex-wrap:wrap;
}
.cust-stat{
display:flex;align-items:center;gap:7px;
padding:6px 12px 6px 10px;
background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
border:1px solid rgba(255,255,255,.07);
border-radius:10px;
font-size:11px;
color:var(--t2);
font-weight:700;
transition:all .25s;
flex-shrink:0;
}
.cust-stat:hover{
border-color:rgba(168,85,247,.25);
background:linear-gradient(135deg, rgba(168,85,247,.08), rgba(168,85,247,.02));
transform:translateY(-1px);
}
.cust-stat-ico{
display:flex;align-items:center;justify-content:center;
width:20px;height:20px;
flex-shrink:0;
}
.cust-stat-ico svg{
width:13px;height:13px;
filter:drop-shadow(0 0 4px currentColor);
}
.cust-stat-lbl{
font-size:10.5px;
color:var(--t3);
font-weight:700;
}
.cust-stat-val{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
display:inline-flex;align-items:baseline;
}
/* Visits stat — purple accent */
.cust-stat-visits .cust-stat-ico{color:#c084fc;}
.cust-stat-visits .cust-stat-val{color:#c084fc;text-shadow:0 0 10px rgba(168,85,247,.3);}
.cust-stat-visits{
background:linear-gradient(135deg, rgba(168,85,247,.1), rgba(168,85,247,.03));
border-color:rgba(168,85,247,.25);
}
/* Money stat — gold accent */
.cust-stat-money .cust-stat-ico{color:var(--g1);}
.cust-stat-money .cust-stat-val{color:var(--g1);text-shadow:0 0 10px rgba(201,168,76,.3);}
.cust-stat-money{
background:linear-gradient(135deg, rgba(201,168,76,.1), rgba(201,168,76,.03));
border-color:rgba(201,168,76,.25);
}
/* Avg stat — blue accent */
.cust-stat-avg .cust-stat-ico{color:#60A5FA;}
.cust-stat-avg .cust-stat-val{color:#60A5FA;}
.cust-stat-avg{
background:linear-gradient(135deg, rgba(96,165,250,.08), rgba(96,165,250,.02));
border-color:rgba(96,165,250,.2);
}
/* Discount stat — green accent */
.cust-stat-discount{
background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05));
border-color:rgba(34,197,94,.3);
color:#4ade80;
}
.cust-stat-discount .cust-stat-val{color:#4ade80;}
.cust-stat-discount .cust-stat-lbl{color:#86efac;}
/* EMPTY STATE */
.cust-empty{
text-align:center;
padding:50px 20px;
background:linear-gradient(155deg, rgba(255,255,255,.02), rgba(0,0,0,.2));
border:1.5px dashed var(--bdr);
border-radius:18px;
}
.cust-empty-ico{
font-size:42px;
margin-bottom:12px;
opacity:.7;
animation:exhEmptyFloat 3s ease-in-out infinite;
}
.cust-empty-title{
font-family:var(--font);
font-size:15px;font-weight:900;
color:var(--t2);
margin-bottom:6px;
}
.cust-empty-sub{font-size:11.5px;color:var(--t4);font-weight:700;}
.span2{grid-column:1/-1;}
/* 🆕 CUSTOMER TYPE PICKER (Individual vs Company) */
.cust-type-picker{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px;}
.cust-type-opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 10px;background:linear-gradient(155deg,rgba(255,255,255,.02),rgba(0,0,0,.15));border:1.5px solid var(--bdr);border-radius:12px;cursor:pointer;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;font-family:var(--font);}
.cust-type-opt::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(201,168,76,.15),transparent 70%);opacity:0;transition:opacity .3s;}
.cust-type-opt:hover{border-color:rgba(201,168,76,.35);transform:translateY(-1px);}
.cust-type-opt:hover::before{opacity:.6;}
.cust-type-opt:active{transform:scale(.97);}
.cust-type-opt.is-active{border-color:rgba(201,168,76,.6);background:linear-gradient(155deg,rgba(201,168,76,.16),rgba(201,168,76,.04));box-shadow:0 6px 18px rgba(0,0,0,.25),0 0 0 3px rgba(201,168,76,.08),inset 0 1px 0 rgba(232,201,106,.15);}
.cust-type-opt.is-active::before{opacity:1;}
.cust-type-opt-ico{font-size:22px;line-height:1;filter:grayscale(.4);transition:filter .3s;position:relative;z-index:2;}
.cust-type-opt.is-active .cust-type-opt-ico{filter:grayscale(0);}
.cust-type-opt-lbl{font-family:var(--font);font-size:12.5px;font-weight:800;color:var(--t3);letter-spacing:-.2px;transition:color .3s;position:relative;z-index:2;}
.cust-type-opt.is-active .cust-type-opt-lbl{color:#fde68a;}
.cust-company-only{display:none !important;animation:custCompanyFieldIn .4s cubic-bezier(.34,1.56,.64,1);}
.cust-modal-body.is-company .cust-company-only{display:block !important;}
@keyframes custCompanyFieldIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.cust-list-badge-company{display:inline-flex;align-items:center;gap:4px;padding:2px 7px;margin-right:6px;background:linear-gradient(135deg,rgba(168,85,247,.18),rgba(168,85,247,.06));border:1px solid rgba(168,85,247,.35);border-radius:8px;font-family:var(--font);font-size:9.5px;font-weight:800;color:#c084fc;letter-spacing:.2px;white-space:nowrap;}
.cust-list-badge-company-ico{font-size:9px;line-height:1;}
/* 🆕🆕 Custom brand/model indicators (purple ✨ accent) */
.brand-item.is-custom{border-left:2px solid rgba(168,85,247,.45);}
.model-item.is-custom{border-left:2px solid rgba(168,85,247,.45);}
.brand-item-custom-tag,.model-item-custom-tag{display:inline-block;font-size:9px;font-weight:800;color:#c084fc;background:rgba(168,85,247,.12);border:1px solid rgba(168,85,247,.35);border-radius:7px;padding:1px 6px;margin-right:5px;letter-spacing:.2px;vertical-align:middle;}
.brand-item.is-custom .brand-item-region{color:#c084fc !important;background:rgba(168,85,247,.08) !important;border-color:rgba(168,85,247,.3) !important;font-size:13px !important;}
.model-item.is-custom .model-item-cat{color:#c084fc !important;font-size:13px !important;}
/* 🆕🆕 PENDING PAYMENTS BANNER (above filter pills) */
.cust-debt-banner{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:14px;background:linear-gradient(135deg,rgba(239,68,68,.14) 0%,rgba(245,158,11,.08) 50%,rgba(239,68,68,.14) 100%);background-size:200% 200%;border:1.5px solid rgba(239,68,68,.35);border-radius:14px;position:relative;overflow:hidden;animation:custDebtBannerBg 6s ease infinite;box-shadow:0 6px 20px rgba(239,68,68,.15),inset 0 1px 0 rgba(255,255,255,.06);}
@keyframes custDebtBannerBg{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.cust-debt-banner-shine{position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(252,165,165,.18) 50%,transparent);transform:skewX(-20deg);animation:custDebtBannerShine 4s ease-in-out infinite;pointer-events:none;}
@keyframes custDebtBannerShine{0%,100%{left:-100%;}55%{left:150%;}}
.cust-debt-banner-icon{position:relative;width:44px;height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ef4444,#b91c1c);border-radius:50%;color:#fff;box-shadow:0 4px 14px rgba(239,68,68,.45),inset 0 1px 0 rgba(255,255,255,.25);flex-shrink:0;}
.cust-debt-banner-pulse{position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(239,68,68,.4);opacity:0;animation:custDebtPulse 2s ease-out infinite;}
@keyframes custDebtPulse{0%{transform:scale(.95);opacity:.7;}100%{transform:scale(1.3);opacity:0;}}
.cust-debt-banner-text{flex:1;min-width:0;}
.cust-debt-banner-title{font-family:var(--font);font-size:13px;font-weight:900;color:#fca5a5;letter-spacing:-.2px;margin-bottom:3px;}
.cust-debt-banner-stats{font-size:11.5px;color:rgba(252,165,165,.8);font-weight:700;display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.cust-debt-banner-stats strong,.cust-debt-banner-stats span:not(.cust-debt-banner-stats span span){color:#fde68a;font-weight:900;font-size:12.5px;}
#cust-debt-banner-count,#cust-debt-banner-total{color:#fff;font-weight:900;font-family:var(--font);font-size:14px;}
.cust-debt-banner-btn{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;background:linear-gradient(135deg,rgba(239,68,68,.25),rgba(239,68,68,.12));border:1px solid rgba(239,68,68,.45);border-radius:10px;color:#fff;font-family:var(--font);font-size:11.5px;font-weight:800;cursor:pointer;transition:all .25s;flex-shrink:0;white-space:nowrap;}
.cust-debt-banner-btn:hover{background:linear-gradient(135deg,#ef4444,#b91c1c);border-color:#dc2626;transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.4);}
.cust-debt-banner-btn:active{transform:scale(.96);}
/* 🆕 Debt filter pill */
.cust-pill-debt{border-color:rgba(239,68,68,.35) !important;color:#fca5a5 !important;}
.cust-pill-debt:hover{border-color:rgba(239,68,68,.55) !important;background:rgba(239,68,68,.06);}
.cust-pill-debt.is-on{background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(239,68,68,.06)) !important;border-color:rgba(239,68,68,.55) !important;color:#fca5a5 !important;box-shadow:0 0 0 3px rgba(239,68,68,.08);}
.cust-pill-cnt-debt{background:linear-gradient(135deg,#ef4444,#b91c1c) !important;color:#fff !important;animation:custDebtCountGlow 1.8s ease-in-out infinite;}
@keyframes custDebtCountGlow{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5);}50%{box-shadow:0 0 0 4px rgba(239,68,68,0);}}
/* 🆕 Debt strip on customer card (color-coded by age) */
.cust-debt-strip{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-top:8px;background:linear-gradient(135deg,var(--debt-bg-from,rgba(239,68,68,.14)),var(--debt-bg-to,rgba(239,68,68,.05)));border:1px solid var(--debt-border,rgba(239,68,68,.3));border-radius:11px;position:relative;overflow:hidden;}
.cust-debt-strip::before{content:'';position:absolute;top:0;right:0;bottom:0;width:3px;background:var(--debt-accent,#ef4444);box-shadow:0 0 8px var(--debt-accent,#ef4444);}
.cust-debt-strip-aging-yellow{--debt-bg-from:rgba(245,158,11,.14);--debt-bg-to:rgba(245,158,11,.05);--debt-border:rgba(245,158,11,.3);--debt-accent:#fbbf24;}
.cust-debt-strip-aging-orange{--debt-bg-from:rgba(249,115,22,.14);--debt-bg-to:rgba(249,115,22,.05);--debt-border:rgba(249,115,22,.35);--debt-accent:#fb923c;}
.cust-debt-strip-aging-red{--debt-bg-from:rgba(239,68,68,.16);--debt-bg-to:rgba(239,68,68,.06);--debt-border:rgba(239,68,68,.4);--debt-accent:#ef4444;}
.cust-debt-strip-ico{font-size:14px;line-height:1;flex-shrink:0;animation:custDebtStripIcoFloat 2.4s ease-in-out infinite;}
@keyframes custDebtStripIcoFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-2px);}}
.cust-debt-strip-info{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.cust-debt-strip-amt{font-family:var(--font);font-size:14px;font-weight:900;color:var(--debt-accent,#ef4444);letter-spacing:-.2px;display:inline-flex;align-items:baseline;gap:3px;}
.cust-debt-strip-riyal{display:inline-block;color:var(--debt-accent,#ef4444);transform:translateY(2px);}
.cust-debt-strip-meta{font-size:10.5px;color:rgba(255,255,255,.55);font-weight:700;}
.cust-debt-strip-days{font-size:10px;color:var(--debt-accent,#ef4444);font-weight:800;padding:2px 7px;background:rgba(0,0,0,.25);border-radius:8px;border:1px solid var(--debt-border,rgba(239,68,68,.3));}
.cust-debt-strip-remind{display:inline-flex;align-items:center;gap:4px;padding:6px 11px;background:linear-gradient(135deg,#22c55e,#15803d);border:none;border-radius:9px;color:#fff;font-family:var(--font);font-size:10.5px;font-weight:800;cursor:pointer;transition:all .25s;flex-shrink:0;box-shadow:0 3px 8px rgba(34,197,94,.3);}
.cust-debt-strip-remind:hover{transform:translateY(-1px);box-shadow:0 5px 14px rgba(34,197,94,.45);}
.cust-debt-strip-remind:active{transform:scale(.95);}
.cust-debt-strip-remind svg{flex-shrink:0;}
/* Card with debt — subtle red accent on left edge */
.cust-card.has-debt::after{content:'';position:absolute;top:14px;bottom:14px;left:0;width:3px;background:linear-gradient(180deg,#ef4444,#b91c1c);border-radius:0 3px 3px 0;box-shadow:0 0 10px rgba(239,68,68,.5);pointer-events:none;}
.cust-card.has-debt{position:relative;}
/* 🆕🆕 CUSTOMER DETAIL — FRAUD/BLOCK WARNING BANNER (shown at top of customer detail modal) */
.custdet-flag-warn{display:flex;align-items:flex-start;gap:13px;padding:14px 16px;margin-bottom:16px;border-radius:14px;position:relative;overflow:hidden;animation:custdetFlagPulse 2.5s ease-in-out infinite;}
.custdet-flag-warn.is-fraud{background:linear-gradient(135deg,rgba(251,191,36,.18) 0%,rgba(251,191,36,.06) 100%);border:1.5px solid rgba(251,191,36,.5);box-shadow:0 6px 18px rgba(251,191,36,.18);}
.custdet-flag-warn.is-block{background:linear-gradient(135deg,rgba(239,68,68,.2) 0%,rgba(239,68,68,.06) 100%);border:1.5px solid rgba(239,68,68,.55);box-shadow:0 6px 18px rgba(239,68,68,.22);}
.custdet-flag-warn::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.15) 50%,transparent);transform:skewX(-20deg);animation:custdetFlagShine 3.5s ease-in-out infinite;pointer-events:none;}
@keyframes custdetFlagShine{0%,100%{left:-100%;}55%{left:150%;}}
@keyframes custdetFlagPulse{0%,100%{box-shadow:0 6px 18px rgba(0,0,0,0);}50%{box-shadow:0 8px 24px currentColor;}}
.custdet-flag-warn-ico{width:42px;height:42px;min-width:42px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:21px;flex-shrink:0;}
.custdet-flag-warn.is-fraud .custdet-flag-warn-ico{background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;box-shadow:0 4px 14px rgba(251,191,36,.5);}
.custdet-flag-warn.is-block .custdet-flag-warn-ico{background:linear-gradient(135deg,#ef4444,#991b1b);color:#fff;box-shadow:0 4px 14px rgba(239,68,68,.5);}
.custdet-flag-warn-txt{flex:1;min-width:0;}
.custdet-flag-warn-title{font-size:13.5px;font-weight:900;margin-bottom:5px;letter-spacing:-.2px;}
.custdet-flag-warn.is-fraud .custdet-flag-warn-title{color:#fde68a;}
.custdet-flag-warn.is-block .custdet-flag-warn-title{color:#fecaca;}
.custdet-flag-warn-reason{font-size:11.5px;color:rgba(255,255,255,.85);line-height:1.6;margin-bottom:4px;}
.custdet-flag-warn-meta{font-size:10.5px;color:rgba(255,255,255,.55);font-weight:700;}
.custdet-header.has-fraud-flag{border:1px solid rgba(251,191,36,.35) !important;}
.custdet-header.has-block-flag{border:1px solid rgba(239,68,68,.4) !important;}
/* 🆕 LIVE FLAG INDICATOR (small status badge in customer page) */
.cust-flag-indicator{display:inline-block;font-size:11.5px;font-weight:800;padding:7px 12px;margin-bottom:12px;border-radius:10px;letter-spacing:-.1px;}
.cust-flag-indicator.is-active{color:#fbbf24;background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.3);}
.cust-flag-indicator.is-ready{color:#60A5FA;background:linear-gradient(135deg,rgba(96,165,250,.06),rgba(168,85,247,.04));border:1px solid rgba(96,165,250,.25);}
.cust-flag-indicator.is-error{color:#fca5a5;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.35);cursor:help;}
/* ═══════════════════════════════════════════════════════════════
🆕🆕🆕 LUXURIOUS REPUTATION SYSTEM
Used in: customer list (compact badge), reception (banner), detail (full card)
═══════════════════════════════════════════════════════════════ */
/* SHARED tier colors via CSS vars */
.rep-tier-excellent{--rep-color:#34d399;--rep-bg:linear-gradient(135deg,rgba(52,211,153,.14),rgba(4,120,87,.05));--rep-border:rgba(52,211,153,.4);}
.rep-tier-good{--rep-color:#22c55e;--rep-bg:linear-gradient(135deg,rgba(34,197,94,.12),rgba(21,128,61,.04));--rep-border:rgba(34,197,94,.35);}
.rep-tier-average{--rep-color:#fbbf24;--rep-bg:linear-gradient(135deg,rgba(251,191,36,.13),rgba(161,98,7,.04));--rep-border:rgba(251,191,36,.38);}
.rep-tier-poor{--rep-color:#fb923c;--rep-bg:linear-gradient(135deg,rgba(251,146,60,.14),rgba(154,52,18,.05));--rep-border:rgba(251,146,60,.42);}
.rep-tier-warning{--rep-color:#fbbf24;--rep-bg:linear-gradient(135deg,rgba(251,191,36,.18),rgba(180,83,9,.06));--rep-border:rgba(251,191,36,.55);}
.rep-tier-blocked{--rep-color:#ef4444;--rep-bg:linear-gradient(135deg,rgba(239,68,68,.2),rgba(127,29,29,.06));--rep-border:rgba(239,68,68,.6);}
.rep-tier-unknown{--rep-color:#9ca3af;--rep-bg:rgba(255,255,255,.02);--rep-border:rgba(255,255,255,.08);}
/* COMPACT BADGE (in customer card list) */
.rep-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:10px;background:var(--rep-bg);border:1px solid var(--rep-border);font-size:10.5px;font-weight:900;color:var(--rep-color);margin:0 4px;vertical-align:middle;letter-spacing:-.1px;}
.rep-badge .rep-tier-ico,.rep-badge .rep-badge-ico{font-size:11px;line-height:1;}
.rep-badge .rep-avg{font-family:'Outfit',var(--font);font-weight:900;color:#fff;}
.rep-badge .rep-count{font-size:9px;opacity:.7;font-weight:700;}
.rep-badge.rep-tier-blocked,.rep-badge.rep-tier-warning{animation:repBadgePulse 2.2s ease-in-out infinite;}
@keyframes repBadgePulse{0%,100%{box-shadow:0 0 0 0 var(--rep-color);}50%{box-shadow:0 0 0 3px transparent;}}
/* 🆕🆕 LARGE BADGE — for blocked/warning (more prominent) */
.rep-badge-lg{padding:4px 12px;font-size:12px;letter-spacing:0;gap:6px;border-width:1.5px;box-shadow:0 3px 10px rgba(0,0,0,.25);}
.rep-badge-lg .rep-badge-ico{font-size:14px;}
.rep-badge-lg .rep-badge-txt{color:#fff;font-weight:900;}
.rep-badge-lg.rep-tier-blocked{background:linear-gradient(135deg,#ef4444,#991b1b);border-color:#ef4444;color:#fff;}
.rep-badge-lg.rep-tier-warning{background:linear-gradient(135deg,#fbbf24,#b45309);border-color:#fbbf24;color:#fff;}
.rep-badge-lg .rep-badge-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;background:rgba(0,0,0,.4);border-radius:9px;font-size:9.5px;font-weight:900;}
/* STARS (shared inline rendering) */
.rep-stars{display:inline-flex;gap:1px;align-items:center;vertical-align:middle;}
/* BANNER (reception phone lookup) */
.rec-rep-wrap{margin-top:10px !important;display:block !important;padding:0 !important;background:none !important;border:none !important;animation:none !important;}
.rep-banner{position:relative;background:var(--rep-bg);border:1.5px solid var(--rep-border);border-radius:14px;padding:13px 15px;overflow:hidden;animation:repBannerEnter .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes repBannerEnter{0%{opacity:0;transform:translateY(-6px) scale(.98);}100%{opacity:1;transform:translateY(0) scale(1);}}
.rep-banner-shine{position:absolute;top:0;left:-100%;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14) 50%,transparent);transform:skewX(-22deg);animation:repBannerShine 3.5s ease-in-out infinite;pointer-events:none;}
@keyframes repBannerShine{0%,100%{left:-100%;}55%{left:160%;}}
.rep-banner-orb{position:absolute;width:120px;height:120px;border-radius:50%;background:var(--rep-color);opacity:.08;filter:blur(40px);top:-40px;right:-40px;pointer-events:none;}
.rep-banner-content{position:relative;z-index:1;}
.rep-banner-head{display:flex;align-items:center;justify-content:space-between;gap:11px;margin-bottom:9px;flex-wrap:wrap;}
.rep-banner-tier{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:10px;color:#fff;font-weight:900;font-size:12.5px;box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);}
.rep-banner-tier-ico{font-size:15px;line-height:1;}
.rep-banner-tier-lbl{letter-spacing:-.2px;}
.rep-banner-stars{display:inline-flex;align-items:center;gap:3px;}
.rep-banner-meta{display:flex;flex-direction:column;gap:4px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.08);}
.rep-banner-meta-line{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--t2);font-weight:700;}
.repban-meta-ico{font-size:13px;line-height:1;}
.rep-banner-meta-line strong{color:#fff;font-family:'Outfit',var(--font);font-weight:900;}
.repban-warn{color:var(--rep-color);}
/* FULL CARD (customer detail modal) */
.rep-full{position:relative;background:var(--rep-bg);border:1.5px solid var(--rep-border);border-radius:16px;padding:16px;margin-bottom:16px;overflow:hidden;}
.rep-full-shine{position:absolute;top:0;left:-100%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 50%,transparent);transform:skewX(-22deg);animation:repBannerShine 4s ease-in-out infinite;pointer-events:none;}
.rep-full-head{display:flex;align-items:center;gap:13px;margin-bottom:13px;position:relative;z-index:1;}
.rep-full-icon{width:46px;height:46px;min-width:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:23px;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.2);}
.rep-full-titles{flex:1;min-width:0;}
.rep-full-title{font-size:15.5px;font-weight:900;color:#fff;letter-spacing:-.3px;margin-bottom:4px;}
.rep-full-sub{font-size:11px;color:var(--t3);font-weight:700;}
.rep-full-rating-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.rep-full-avg{font-family:'Outfit',var(--font);font-size:13.5px;font-weight:900;color:var(--rep-color);}
.rep-full-count{font-size:10.5px;color:var(--t4);font-weight:700;}
.rep-full-breakdown{display:flex;flex-direction:column;gap:6px;position:relative;z-index:1;}
.rep-source-item{display:grid;grid-template-columns:auto auto auto 1fr;gap:8px;align-items:center;padding:7px 10px;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.05);border-radius:9px;font-size:11px;}
.rep-source-ico{font-size:14px;line-height:1;}
.rep-source-name{font-weight:800;color:var(--t1);white-space:nowrap;}
.rep-source-stars{display:inline-flex;gap:1px;}
.rep-source-note{color:var(--t3);font-style:italic;font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rep-source-flag{color:var(--rep-color);font-weight:800;font-size:10.5px;white-space:nowrap;}
.rep-source-item.is-flag.is-fraud{border-color:rgba(251,191,36,.3);}
.rep-source-item.is-flag.is-block{border-color:rgba(239,68,68,.35);}
.rep-full-actions{margin-top:13px;display:flex;gap:8px;position:relative;z-index:1;}
.rep-full-rate-btn{flex:1;padding:9px 14px;background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;border:none;border-radius:10px;font-family:'Cairo',sans-serif;font-size:12px;font-weight:900;cursor:pointer;transition:all .25s;box-shadow:0 4px 12px rgba(251,191,36,.3);}
.rep-full-rate-btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(251,191,36,.45);}
.rep-full-rate-btn:active{transform:scale(.97);}
/* RATING MODAL — Interactive star picker */
.rating-picker-wrap{padding:14px 6px 8px;text-align:center;background:linear-gradient(135deg,rgba(251,191,36,.05),rgba(217,119,6,.02));border:1px solid rgba(251,191,36,.18);border-radius:14px;margin-bottom:12px;}
.rating-picker{display:flex;justify-content:center;align-items:center;gap:4px;direction:ltr;}
.rating-star{background:transparent;border:none;padding:4px;cursor:pointer;transition:all .2s;color:rgba(255,255,255,.18);}
.rating-star:hover{transform:scale(1.15);}
.rating-star:active{transform:scale(.92);}
.rating-star.is-on{color:#fbbf24;filter:drop-shadow(0 0 6px rgba(251,191,36,.55));}
.rating-picker:hover .rating-star{color:#fbbf24;filter:drop-shadow(0 0 6px rgba(251,191,36,.4));}
.rating-picker .rating-star:hover ~ .rating-star{color:rgba(255,255,255,.18);filter:none;}
.rating-value-lbl{font-family:var(--font);font-size:13px;font-weight:900;color:#fbbf24;margin-top:8px;letter-spacing:-.2px;min-height:18px;}
/* ═══════════════════════════════════════════════════════════════
🆕🆕 RECEPTION REPUTATION — Smart split design
- WARNING banner: only for fraud/block (loud, prominent)
- Rating chip: injected inline in found-customer card
═══════════════════════════════════════════════════════════════ */
/* WARNING CARD — only shown for blocked/fraud customers */
.rec-warn-card{position:relative;display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:14px;margin-bottom:8px;overflow:hidden;animation:recWarnEnter .4s cubic-bezier(.34,1.56,.64,1);}
.rec-warn-card.is-block{background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(127,29,29,.08));border:1.5px solid rgba(239,68,68,.5);box-shadow:0 6px 20px rgba(239,68,68,.25);}
.rec-warn-card.is-fraud{background:linear-gradient(135deg,rgba(251,191,36,.18),rgba(180,83,9,.08));border:1.5px solid rgba(251,191,36,.55);box-shadow:0 6px 20px rgba(251,191,36,.25);}
@keyframes recWarnEnter{0%{opacity:0;transform:translateY(-8px) scale(.97);}100%{opacity:1;transform:translateY(0) scale(1);}}
.rec-warn-shine{position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12) 50%,transparent);transform:skewX(-22deg);animation:repBannerShine 3s ease-in-out infinite;pointer-events:none;}
.rec-warn-ico{width:46px;height:46px;min-width:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;background:rgba(0,0,0,.3);box-shadow:0 4px 12px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.1);animation:recWarnIconPulse 1.8s ease-in-out infinite;}
@keyframes recWarnIconPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}
.rec-warn-body{flex:1;min-width:0;position:relative;z-index:1;}
.rec-warn-title{font-size:14.5px;font-weight:900;color:#fff;letter-spacing:-.3px;margin-bottom:5px;}
.rec-warn-sub{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:4px;}
.rec-warn-pill{display:inline-flex;align-items:center;gap:3px;padding:2px 8px;background:rgba(0,0,0,.35);border-radius:8px;font-size:10.5px;font-weight:800;color:#fff;}
.rec-warn-pill strong{color:#fff;font-family:'Outfit',sans-serif;font-weight:900;}
.rec-warn-source{font-size:10px;color:rgba(255,255,255,.8);font-weight:700;}
.rec-warn-reason{font-size:11px;color:rgba(255,255,255,.9);font-weight:600;line-height:1.5;padding-top:4px;border-top:1px dashed rgba(255,255,255,.15);}
/* REPUTATION CHIP (inside rec-cust-found-tier) — for rated customers */
.rec-rep-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border-radius:8px;font-size:10.5px;font-weight:900;color:#fff;letter-spacing:-.1px;margin-left:5px;box-shadow:0 2px 6px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.15);}
.rec-stars-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);border-radius:8px;margin-right:5px;}
.rec-rep-injected{display:inline-flex !important;align-items:center;gap:3px;flex-wrap:wrap;}
/* 🆕🆕 MULTI-SOURCE FLAG LIST in customer detail banner */
.custdet-flag-list{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:5px;}
.custdet-flag-item{display:grid;grid-template-columns:auto auto 1fr auto;gap:8px;align-items:center;padding:6px 9px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06);border-radius:8px;font-size:11px;}
.custdet-flag-item-src{font-weight:800;color:var(--t1);white-space:nowrap;}
.custdet-flag-item-type{color:#fbbf24;font-weight:800;font-size:10.5px;white-space:nowrap;}
.custdet-flag-item-reason{color:var(--t2);font-size:10.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.custdet-flag-item-date{color:var(--t4);font-size:9.5px;font-weight:700;white-space:nowrap;}
/* 🆕 CENTER FLAG ACTION BUTTONS (in customer detail modal) */
.custdet-center-actions{display:flex;gap:8px;margin-bottom:13px;flex-wrap:wrap;}
.custdet-flag-btn{flex:1;min-width:130px;padding:9px 12px;border-radius:10px;font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:800;cursor:pointer;transition:all .25s;border:1px solid transparent;}
.custdet-flag-btn-fraud{color:#fbbf24;background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.3);}
.custdet-flag-btn-fraud:hover{background:rgba(251,191,36,.14);border-color:rgba(251,191,36,.5);}
.custdet-flag-btn-fraud.is-active{background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;border-color:#d97706;box-shadow:0 4px 12px rgba(251,191,36,.4);}
.custdet-flag-btn-block{color:#fca5a5;background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.3);}
.custdet-flag-btn-block:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.5);}
.custdet-flag-btn-block.is-active{background:linear-gradient(135deg,#ef4444,#991b1b);color:#fff;border-color:#991b1b;box-shadow:0 4px 12px rgba(239,68,68,.4);}
.custdet-flag-btn:active{transform:scale(.97);}
/* 🆕🆕 OWNER FRAUD/BLOCK FLAGS (cross-system warning from system owner) */
.cust-owner-flag{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:900;padding:2px 7px;border-radius:8px;letter-spacing:.2px;margin:0 4px;vertical-align:middle;animation:custOwnerFlagPulse 2.2s ease-in-out infinite;cursor:help;}
.cust-owner-flag-fraud{color:#fbbf24;background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.45);text-shadow:0 0 4px rgba(251,191,36,.4);}
.cust-owner-flag-block{color:#fca5a5;background:rgba(239,68,68,.14);border:1px solid rgba(239,68,68,.45);text-shadow:0 0 4px rgba(239,68,68,.4);}
@keyframes custOwnerFlagPulse{0%,100%{box-shadow:0 0 0 0 currentColor;opacity:1;}50%{box-shadow:0 0 8px currentColor;opacity:.92;}}
.cust-card.has-fraud-flag{border-color:rgba(251,191,36,.3) !important;background:linear-gradient(135deg,rgba(251,191,36,.03) 0%,transparent 50%) !important;}
.cust-card.has-block-flag{border-color:rgba(239,68,68,.35) !important;background:linear-gradient(135deg,rgba(239,68,68,.04) 0%,transparent 50%) !important;}
.cust-card.has-block-flag::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,transparent 0,transparent 12px,rgba(239,68,68,.02) 12px,rgba(239,68,68,.02) 24px);pointer-events:none;border-radius:inherit;}
.cust-card.has-block-flag{position:relative;}
/* 🆕 Reception: warning banner shown when phone lookup finds flagged customer */
.rec-fraud-warning{display:flex;align-items:center;gap:11px;padding:11px 14px;margin-top:10px;background:linear-gradient(135deg,rgba(251,191,36,.16) 0%,rgba(251,191,36,.06) 100%);border:1.5px solid rgba(251,191,36,.5);border-radius:12px;animation:recFraudPulse 2s ease-in-out infinite;}
.rec-fraud-warning.is-block{background:linear-gradient(135deg,rgba(239,68,68,.18) 0%,rgba(239,68,68,.06) 100%);border-color:rgba(239,68,68,.55);}
.rec-fraud-warning-ico{width:34px;height:34px;min-width:34px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fbbf24,#d97706);border-radius:50%;color:#fff;font-size:17px;flex-shrink:0;box-shadow:0 4px 12px rgba(251,191,36,.4);}
.rec-fraud-warning.is-block .rec-fraud-warning-ico{background:linear-gradient(135deg,#ef4444,#b91c1c);box-shadow:0 4px 12px rgba(239,68,68,.4);}
.rec-fraud-warning-txt{flex:1;min-width:0;}
.rec-fraud-warning-title{font-size:12.5px;font-weight:900;color:#fde68a;margin-bottom:2px;}
.rec-fraud-warning.is-block .rec-fraud-warning-title{color:#fecaca;}
.rec-fraud-warning-reason{font-size:11px;color:rgba(255,255,255,.7);line-height:1.5;}
@keyframes recFraudPulse{0%,100%{box-shadow:0 0 0 0 rgba(251,191,36,.4);}50%{box-shadow:0 0 0 4px rgba(251,191,36,0);}}
/* CUSTOMER DETAIL MODAL BODY */
#cust-detail-body{padding:0 16px 16px;}
.cust-detail-h{
display:flex;align-items:center;gap:14px;
padding:18px 0;
border-bottom:1px dashed rgba(255,255,255,.08);
margin-bottom:14px;
}
.cust-detail-avatar{
width:64px;height:64px;
display:flex;align-items:center;justify-content:center;
border-radius:18px;
font-family:var(--font);
font-size:24px;font-weight:900;
color:#fff;
flex-shrink:0;
background:linear-gradient(135deg,#a855f7,#7c3aed);
box-shadow:0 10px 24px rgba(168,85,247,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.cust-detail-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-bottom:14px;
}
.cust-detail-cell{
padding:11px 13px;
background:rgba(255,255,255,.03);
border:1px solid var(--bdr);
border-radius:11px;
}
.cdc-lbl{
font-size:10px;color:var(--t3);font-weight:800;
text-transform:uppercase;letter-spacing:.4px;
margin-bottom:4px;
}
.cdc-val{
font-family:var(--font);
font-size:13.5px;font-weight:900;
color:var(--t1);
}
.cust-detail-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
margin-bottom:14px;
}
/* LOYALTY DETECTION BANNER in reception */
/* Mobile responsive */
@media(max-width:640px){
.cust-hero{padding:18px 16px;}
.cust-hero-title{font-size:22px;}
.cust-card{padding:14px;gap:12px;}
.cust-avatar{width:44px;height:44px;font-size:16px;border-radius:12px;}
.cust-act{width:32px;height:32px;}
}
/*
🆕 EXPENSES PERIOD FILTER (Daily/Monthly toggle)
*/
.exh-period-bar{
display:flex;align-items:center;gap:10px;
margin:0 0 12px;
background:linear-gradient(155deg, rgba(255,255,255,.025), rgba(0,0,0,.3));
border:1.5px solid var(--bdr);
border-radius:14px;
padding:8px;
flex-wrap:wrap;
}
.exh-period-btns{
display:inline-flex;
background:rgba(0,0,0,.35);
border:1px solid var(--bdr);
border-radius:11px;
padding:3px;
}
.exh-period-btn{
padding:8px 16px;
background:transparent;
border:none;
color:var(--t3);
font-family:'Cairo',sans-serif;
font-size:12px;
font-weight:800;
cursor:pointer;
border-radius:8px;
transition:all .25s;
white-space:nowrap;
}
.exh-period-btn:hover{color:var(--t1);}
.exh-period-btn.is-on{
background:linear-gradient(135deg,#C9A84C,#9F7E1C);
color:#000;
box-shadow:0 4px 10px rgba(201,168,76,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.exh-period-nav{
display:inline-flex;align-items:center;gap:8px;
margin-right:auto;
}
.exh-period-arrow{
width:34px;height:34px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.04);
border:1px solid var(--bdr);
border-radius:9px;
color:var(--t3);
cursor:pointer;
transition:all .25s;
}
.exh-period-arrow:hover{background:rgba(201,168,76,.1);color:var(--g1);border-color:rgba(201,168,76,.3);}
.exh-period-arrow:disabled{opacity:.35;cursor:not-allowed;}
.exh-period-label{
font-family:var(--font);
font-size:13px;
font-weight:900;
color:var(--t1);
letter-spacing:-.2px;
padding:0 8px;
min-width:140px;
text-align:center;
}
/* Daily group header */
.exh-day-group{margin-bottom:10px;}
.exh-day-group-h{
display:flex;align-items:center;gap:10px;
padding:9px 13px;
background:linear-gradient(155deg, rgba(201,168,76,.06), rgba(201,168,76,.02));
border:1px solid rgba(201,168,76,.18);
border-radius:11px;
margin-bottom:6px;
}
.exh-dg-date{
font-family:var(--font);
font-size:12px;
font-weight:900;
color:var(--g1);
letter-spacing:-.2px;
}
.exh-dg-divider{
flex:1;
height:1px;
background:linear-gradient(90deg,rgba(201,168,76,.3),transparent);
}
.exh-dg-total{
font-family:var(--font);
font-size:12.5px;
font-weight:900;
color:#fca5a5;
letter-spacing:-.2px;
}
.exh-dg-count{
font-size:10px;
color:var(--t4);
font-weight:700;
}
/*
🆕 PREMIUM BRAND PICKER — Bullet-Proof Flex Layout
- 3 strict flex columns: avatar | text | badge
- No absolute positioning, no overlap
- Mobile-perfect
*/
.brand-picker-list{
flex:1 !important;
display:flex !important;
flex-direction:column !important;
gap:6px !important;
padding:12px !important;
overflow-y:auto !important;
overflow-x:hidden !important;
scroll-behavior:smooth;
}
.brand-picker-list::-webkit-scrollbar{width:5px;}
.brand-picker-list::-webkit-scrollbar-track{background:transparent;}
.brand-picker-list::-webkit-scrollbar-thumb{background:rgba(201,168,76,.25);border-radius:3px;}
.brand-picker-list::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,.5);}
/* Each row: STRICT 3-column flex */
.brand-item{
position:relative;
/* 🆕 USING GRID for guaranteed 3-column layout (no wrap possible) */
display:grid !important;
grid-template-columns:44px 1fr auto !important;
gap:12px !important;
align-items:center !important;
padding:11px 14px !important;
background:linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.005) 100%) !important;
border:1px solid rgba(255,255,255,.06) !important;
border-radius:12px !important;
cursor:pointer;
transition:background .25s, border-color .25s, transform .25s cubic-bezier(.4,0,.2,1);
overflow:hidden !important;
direction:rtl !important;
text-align:right !important;
width:100% !important;
box-sizing:border-box !important;
min-height:58px;
margin:0 !important;
flex-wrap:nowrap !important;
white-space:nowrap;
}
/* Gold accent line on RIGHT */
.brand-item::before{
content:'';
position:absolute;
right:0;
top:50%;
transform:translateY(-50%) scaleY(0);
width:3px;
height:55%;
background:linear-gradient(180deg, #E8C96A, #C9A84C);
border-radius:3px 0 0 3px;
transition:transform .3s cubic-bezier(.4,0,.2,1);
box-shadow:0 0 12px rgba(201,168,76,.5);
}
.brand-item:hover{
background:linear-gradient(180deg, rgba(201,168,76,.07) 0%, rgba(201,168,76,.01) 100%) !important;
border-color:rgba(201,168,76,.35) !important;
}
.brand-item:hover::before{transform:translateY(-50%) scaleY(1);}
.brand-item:active{transform:scale(.99);}
.brand-item::after{display:none !important;}
/* COLUMN 1: AVATAR — fixed size, no shrink */
.brand-item-flag{
grid-column:1 !important;
width:44px !important;
height:44px !important;
min-width:44px !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
border-radius:50% !important;
font-size:22px !important;
line-height:44px !important; /* match container height for true vertical center */
position:relative !important;
overflow:hidden !important;
border:1.5px solid rgba(255,255,255,.1) !important;
box-shadow:0 4px 10px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.1);
filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
transition:transform .3s;
padding:0 !important;
margin:0 !important;
background:linear-gradient(135deg, rgba(255,255,255,.08), rgba(0,0,0,.3)) !important;
color:#fff;
text-align:center !important;
vertical-align:middle !important;
box-sizing:border-box !important;
font-style:normal !important;
letter-spacing:0 !important;
}
/* Region colors */
.brand-item[data-region="japan"] .brand-item-flag{background:linear-gradient(135deg, #DC143C 0%, #8B0000 100%) !important;}
.brand-item[data-region="korea"] .brand-item-flag{background:linear-gradient(135deg, #4169E1 0%, #1E3A8A 100%) !important;}
.brand-item[data-region="usa"] .brand-item-flag{background:linear-gradient(135deg, #B22234 0%, #3C3B6E 100%) !important;}
.brand-item[data-region="europe"] .brand-item-flag{background:linear-gradient(135deg, #1a1a2e 0%, #FFCC00 120%) !important;}
.brand-item[data-region="china"] .brand-item-flag{background:linear-gradient(135deg, #DE2910 0%, #FFDE00 100%) !important;}
.brand-item:hover .brand-item-flag{transform:scale(1.05);}
/* COLUMN 2: TEXT — flex grow with min-width 0 (allows ellipsis) */
.brand-item-text{
grid-column:2 !important;
display:flex !important;
flex-direction:column !important;
gap:2px !important;
min-width:0 !important;
max-width:100% !important;
text-align:right !important;
direction:rtl !important;
overflow:hidden !important;
padding:0 !important;
margin:0 !important;
box-sizing:border-box !important;
}
.brand-item-name{
font-family:var(--font) !important;
font-size:15px !important;
font-weight:800 !important;
color:#F4F0E6 !important;
line-height:1.25 !important;
letter-spacing:-.1px !important;
display:block !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
transition:color .25s !important;
text-align:right !important;
direction:rtl !important;
margin:0 !important;
padding:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
.brand-item-en{
font-family:'Outfit',var(--font) !important;
font-size:10px !important;
font-weight:600 !important;
color:rgba(201,168,76,.5) !important;
letter-spacing:1.2px !important;
text-transform:uppercase !important;
display:block !important;
direction:ltr !important;
text-align:right !important;
white-space:nowrap !important;
overflow:hidden !important;
text-overflow:ellipsis !important;
transition:color .25s !important;
margin:0 !important;
padding:0 !important;
width:100% !important;
box-sizing:border-box !important;
}
.brand-item:hover .brand-item-name{color:#fff !important;}
.brand-item:hover .brand-item-en{color:rgba(232,201,106,.85) !important;}
/* COLUMN 3: REGION BADGE — fixed size, no shrink */
.brand-item-region{
grid-column:3 !important;
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
padding:4px 9px !important;
font-family:'Outfit',var(--font) !important;
font-size:10px !important;
font-weight:800 !important;
letter-spacing:1.2px !important;
color:rgba(201,168,76,.6) !important;
background:rgba(201,168,76,.06) !important;
border:1px solid rgba(201,168,76,.18) !important;
border-radius:7px !important;
transition:background .25s, color .25s, border-color .25s;
pointer-events:none;
min-width:32px !important;
margin:0 !important;
position:static !important;
box-sizing:border-box !important;
height:auto !important;
}
.brand-item:hover .brand-item-region{
color:#E8C96A !important;
background:rgba(201,168,76,.14) !important;
border-color:rgba(201,168,76,.35) !important;
}
/* SELECTED STATE */
.brand-item.is-selected{
background:linear-gradient(180deg, rgba(201,168,76,.16) 0%, rgba(201,168,76,.04) 100%) !important;
border-color:rgba(201,168,76,.55) !important;
box-shadow:0 6px 18px rgba(201,168,76,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
.brand-item.is-selected::before{transform:translateY(-50%) scaleY(1);}
.brand-item.is-selected .brand-item-name{color:#E8C96A !important;}
.brand-item.is-selected .brand-item-region{
background:linear-gradient(135deg, #E8C96A, #C9A84C) !important;
border-color:transparent !important;
color:#0E1014 !important;
box-shadow:0 3px 10px rgba(201,168,76,.45) !important;
}
/* RECENT STATE */
.brand-item.is-recent{
background:linear-gradient(180deg, rgba(251,191,36,.05) 0%, rgba(251,191,36,.005) 100%) !important;
border-color:rgba(251,191,36,.2) !important;
}
/* SECTION HEADERS */
.brand-section-h{
padding:10px 4px 4px !important;
font-family:var(--font) !important;
font-size:10.5px !important;
font-weight:900 !important;
color:#C9A84C !important;
letter-spacing:.7px !important;
display:flex !important;
align-items:center !important;
gap:10px !important;
margin-top:6px !important;
text-transform:uppercase !important;
width:100% !important;
box-sizing:border-box !important;
}
.brand-section-h:first-child{margin-top:0 !important;}
.brand-section-h-line{
flex:1 !important;
height:1px !important;
background:linear-gradient(90deg, rgba(201,168,76,.3) 0%, rgba(201,168,76,.05) 50%, transparent 100%) !important;
}
/* Empty state */
.brand-empty{padding:50px 20px !important;text-align:center !important;}
.brand-empty-ico{font-size:42px;margin-bottom:10px;opacity:.45;}
.brand-empty-t{font-family:var(--font);font-size:14px;font-weight:800;color:var(--t2);margin-bottom:4px;}
/* Mobile */
@media(max-width:480px){
.brand-picker-list{padding:10px !important;gap:5px !important;}
.brand-item{padding:10px 12px !important;gap:10px !important;min-height:54px;}
.brand-item-flag{width:40px !important;height:40px !important;min-width:40px !important;font-size:20px !important;line-height:40px !important;}
.brand-item-name{font-size:14px !important;}
.brand-item-en{font-size:9.5px !important;letter-spacing:1px !important;}
.brand-item-region{font-size:9px !important;padding:3px 7px !important;min-width:28px !important;}
}
@media(max-width:360px){
.brand-item{padding:9px 10px !important;gap:8px !important;}
.brand-item-flag{width:36px !important;height:36px !important;min-width:36px !important;font-size:18px !important;line-height:36px !important;}
.brand-item-name{font-size:13.5px !important;}
.brand-item-en{font-size:9px !important;}
.brand-item-region{padding:2px 6px !important;min-width:24px !important;}
}
/* ═══════════════════════════════════════════════════════════════
🏆🏆🏆 LOYALTY PROGRAM — Per-center system, fully isolated
═══════════════════════════════════════════════════════════════ */
/* TIER COLORS (shared across all components) */
.loy-tier-bronze{--loy-color:#cd7f32;--loy-grad:linear-gradient(135deg,#cd7f32,#8b4513);--loy-bg:rgba(205,127,50,.1);--loy-border:rgba(205,127,50,.4);}
.loy-tier-silver{--loy-color:#c0c0c0;--loy-grad:linear-gradient(135deg,#c0c0c0,#808080);--loy-bg:rgba(192,192,192,.1);--loy-border:rgba(192,192,192,.4);}
.loy-tier-gold{--loy-color:#FFD700;--loy-grad:linear-gradient(135deg,#FFD700,#DAA520);--loy-bg:rgba(255,215,0,.12);--loy-border:rgba(255,215,0,.45);}
.loy-tier-platinum{--loy-color:#E5E4E2;--loy-grad:linear-gradient(135deg,#E5E4E2,#A8A8A8);--loy-bg:rgba(229,228,226,.12);--loy-border:rgba(229,228,226,.45);}
/* ════════════════ HERO SECTION (top of pane) ════════════════ */
.loy-hero{position:relative;background:linear-gradient(135deg,#1e1b4b 0%,#3b0764 50%,#1e1b4b 100%);border:1px solid rgba(251,191,36,.3);border-radius:20px;padding:0;margin-bottom:18px;overflow:hidden;}
.loy-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 80% 30%,rgba(251,191,36,.18) 0%,transparent 60%),radial-gradient(circle at 20% 70%,rgba(168,85,247,.15) 0%,transparent 50%);pointer-events:none;}
.loy-hero-orb{position:absolute;border-radius:50%;filter:blur(50px);pointer-events:none;opacity:.4;}
.loy-hero-orb-1{width:200px;height:200px;background:#fbbf24;top:-50px;right:-50px;animation:loyOrbFloat 8s ease-in-out infinite;}
.loy-hero-orb-2{width:160px;height:160px;background:#a855f7;bottom:-40px;left:-40px;animation:loyOrbFloat 10s ease-in-out infinite reverse;}
@keyframes loyOrbFloat{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-15px) scale(1.05);}}
.loy-hero-content{position:relative;z-index:1;padding:22px 24px 20px;}
.loy-hero-top{display:flex;align-items:center;gap:13px;margin-bottom:18px;flex-wrap:wrap;}
.loy-hero-ico{width:58px;height:58px;min-width:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;box-shadow:0 8px 24px rgba(251,191,36,.4),inset 0 1px 0 rgba(255,255,255,.25);animation:loyHeroIcoPulse 3s ease-in-out infinite;}
.loy-hero-ico svg{width:30px;height:30px;}
@keyframes loyHeroIcoPulse{0%,100%{transform:scale(1);box-shadow:0 8px 24px rgba(251,191,36,.4),inset 0 1px 0 rgba(255,255,255,.25);}50%{transform:scale(1.05);box-shadow:0 12px 32px rgba(251,191,36,.6),inset 0 1px 0 rgba(255,255,255,.3);}}
.loy-hero-titles{flex:1;min-width:0;}
.loy-hero-eyebrow{font-family:'Outfit',sans-serif;font-size:10px;font-weight:900;letter-spacing:3px;color:#fbbf24;margin-bottom:3px;}
.loy-hero-title{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.5px;line-height:1.2;margin-bottom:3px;}
.loy-hero-sub{font-size:12px;color:rgba(255,255,255,.65);font-weight:600;}
.loy-hero-settings-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:11px;color:#fff;font-family:'Cairo',sans-serif;font-size:12px;font-weight:800;cursor:pointer;transition:all .25s;backdrop-filter:blur(10px);}
.loy-hero-settings-btn:hover{background:rgba(255,255,255,.14);transform:translateY(-1px);}
/* STATS GRID inside hero */
.loy-stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.loy-stat-card{display:flex;align-items:center;gap:10px;padding:11px 13px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:13px;backdrop-filter:blur(10px);transition:all .25s;}
.loy-stat-card:hover{background:rgba(255,255,255,.1);transform:translateY(-1px);}
.loy-stat-ico{width:38px;height:38px;min-width:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:0 4px 12px rgba(0,0,0,.3);}
.loy-stat-body{flex:1;min-width:0;}
.loy-stat-num{font-family:'Outfit',sans-serif;font-size:20px;font-weight:900;color:#fff;line-height:1;letter-spacing:-.5px;}
.loy-stat-lbl{font-size:10.5px;color:rgba(255,255,255,.6);font-weight:700;margin-top:2px;}
/* ════════════════ TOOLBAR (search + tier filter) ════════════════ */
.loy-toolbar{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center;}
.loy-search-wrap{flex:1;min-width:200px;position:relative;}
.loy-search-ico{position:absolute;top:50%;right:12px;transform:translateY(-50%);color:var(--t4);pointer-events:none;}
.loy-search-wrap input{width:100%;background:rgba(0,0,0,.25);border:1px solid var(--bdr);border-radius:11px;padding:11px 38px 11px 14px;color:var(--t1);font-family:'Cairo',sans-serif;font-size:13px;}
.loy-tier-filter{display:inline-flex;gap:4px;background:rgba(0,0,0,.25);border:1px solid var(--bdr);border-radius:11px;padding:3px;}
.loy-tf-btn{padding:7px 12px;border:none;background:transparent;color:var(--t3);font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:800;cursor:pointer;border-radius:8px;transition:all .2s;}
.loy-tf-btn:hover{color:var(--t1);}
.loy-tf-btn.on{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}
.loy-tf-bronze.on{background:linear-gradient(135deg,rgba(205,127,50,.25),rgba(139,69,19,.15));color:#fb923c;}
.loy-tf-silver.on{background:linear-gradient(135deg,rgba(192,192,192,.25),rgba(128,128,128,.15));color:#e5e7eb;}
.loy-tf-gold.on{background:linear-gradient(135deg,rgba(255,215,0,.25),rgba(218,165,32,.15));color:#fbbf24;}
.loy-tf-platinum.on{background:linear-gradient(135deg,rgba(229,228,226,.25),rgba(168,168,168,.15));color:#e5e7eb;}
/* ════════════════ MEMBERS LIST ════════════════ */
.loy-members-list{display:flex;flex-direction:column;gap:8px;}
.loy-member-row{display:grid;grid-template-columns:44px 44px 1fr auto auto;gap:11px;align-items:center;background:var(--card);border:1px solid var(--bdr);border-radius:14px;padding:11px 13px;cursor:pointer;transition:all .25s;position:relative;overflow:hidden;}
.loy-member-row::before{content:'';position:absolute;top:0;right:0;bottom:0;width:3px;background:var(--loy-color,transparent);transition:width .25s;}
.loy-member-row:hover{transform:translateX(-3px);border-color:var(--loy-border,var(--bdr));}
.loy-member-row:hover::before{width:5px;}
.loy-member-row.is-top{background:linear-gradient(135deg,var(--card),rgba(251,191,36,.04));}
.loy-rank{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid var(--bdr);font-family:'Outfit',sans-serif;font-size:14px;font-weight:900;color:var(--t3);}
.loy-rank.is-gold{background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;border:none;font-size:18px;box-shadow:0 4px 12px rgba(251,191,36,.4);}
.loy-rank.is-silver{background:linear-gradient(135deg,#c0c0c0,#808080);color:#fff;border:none;font-size:16px;box-shadow:0 4px 12px rgba(192,192,192,.4);}
.loy-rank.is-bronze{background:linear-gradient(135deg,#cd7f32,#8b4513);color:#fff;border:none;font-size:16px;box-shadow:0 4px 12px rgba(205,127,50,.4);}
.loy-member-avatar{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;color:#fff;font-size:18px;font-weight:900;box-shadow:0 4px 10px rgba(0,0,0,.25);}
.loy-member-info{min-width:0;}
.loy-member-name{font-size:13.5px;font-weight:800;color:var(--t1);margin-bottom:4px;letter-spacing:-.2px;}
.loy-member-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;font-size:10.5px;}
.loy-member-tier{font-weight:900;}
.loy-member-discount{color:#22c55e;font-weight:800;}
.loy-member-phone{color:var(--t4);font-family:'IBM Plex Mono',monospace;font-size:10px;direction:ltr;}
.loy-member-points{text-align:center;min-width:75px;}
.loy-member-pts-num{font-family:'Outfit',sans-serif;font-size:18px;font-weight:900;color:#fbbf24;letter-spacing:-.5px;line-height:1;}
.loy-member-pts-lbl{font-size:9.5px;color:var(--t4);font-weight:700;margin-top:1px;}
.loy-member-progress{height:3px;background:rgba(255,255,255,.08);border-radius:2px;margin-top:6px;overflow:hidden;}
.loy-member-progress-bar{height:100%;border-radius:2px;transition:width .4s;}
.loy-member-adj{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3);border-radius:9px;color:#c084fc;cursor:pointer;transition:all .2s;}
.loy-member-adj:hover{background:rgba(168,85,247,.2);transform:scale(1.05);}
/* Empty state */
.loy-empty{text-align:center;padding:50px 20px;color:var(--t3);}
.loy-empty-ico{font-size:48px;margin-bottom:12px;opacity:.5;}
.loy-empty-title{font-size:15px;font-weight:900;color:var(--t1);margin-bottom:5px;}
.loy-empty-sub{font-size:11.5px;color:var(--t3);}
/* ════════════════ COMPACT BADGE (in customer card list) ════════════════ */
.loy-badge{display:inline-flex;align-items:center;gap:4px;padding:2.5px 7px;border-radius:8px;background:var(--loy-bg);border:1px solid var(--loy-border);font-size:10.5px;font-weight:900;color:var(--loy-color);margin:0 3px;vertical-align:middle;}
.loy-badge-ico{font-size:11px;line-height:1;}
.loy-badge-pts{font-family:'Outfit',sans-serif;font-weight:900;}
/* ════════════════ LOYALTY CARD (in customer detail) ════════════════ */
.loy-card{position:relative;background:var(--card);border:1.5px solid var(--loy-border);border-radius:16px;padding:14px;margin-bottom:14px;overflow:hidden;}
.loy-card-bg{position:absolute;inset:0;background:var(--loy-bg);opacity:.5;pointer-events:none;}
.loy-card-head{position:relative;z-index:1;display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.loy-card-icon{width:44px;height:44px;min-width:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.25);}
.loy-card-titles{flex:1;min-width:0;}
.loy-card-tier-name{font-size:15px;font-weight:900;color:var(--loy-color);letter-spacing:-.3px;margin-bottom:2px;}
.loy-card-discount{font-size:10.5px;color:#22c55e;font-weight:800;}
.loy-card-adj-btn{width:32px;height:32px;background:rgba(168,85,247,.1);border:1px solid rgba(168,85,247,.3);border-radius:9px;color:#c084fc;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.loy-card-adj-btn:hover{background:rgba(168,85,247,.2);transform:scale(1.05);}
.loy-card-points{position:relative;z-index:1;text-align:center;padding:10px 0;background:rgba(0,0,0,.2);border-radius:11px;margin-bottom:9px;}
.loy-card-points-num{display:block;font-family:'Outfit',sans-serif;font-size:32px;font-weight:900;color:var(--loy-color);letter-spacing:-1px;line-height:1;}
.loy-card-points-lbl{display:block;font-size:11px;color:var(--t3);font-weight:700;margin-top:2px;}
.loy-card-progress{position:relative;z-index:1;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;margin-bottom:7px;}
.loy-card-progress-bar{height:100%;border-radius:3px;transition:width .6s;}
.loy-card-meta{position:relative;z-index:1;font-size:11px;color:var(--t2);text-align:center;font-weight:700;margin-bottom:11px;}
.loy-card-stats{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.loy-card-stat{text-align:center;padding:8px;background:rgba(0,0,0,.18);border-radius:9px;}
.loy-card-stat .lcs-num{display:block;font-family:'Outfit',sans-serif;font-size:15px;font-weight:900;color:var(--t1);}
.loy-card-stat .lcs-lbl{display:block;font-size:9.5px;color:var(--t4);font-weight:700;margin-top:1px;}
/* ════════════════ SETTINGS MODAL ════════════════ */
.loy-set-row{padding:11px 0;border-bottom:1px solid var(--bdr);}
.loy-set-row:last-child{border-bottom:none;}
.loy-set-row-toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.loy-set-lbl{font-size:13px;font-weight:900;color:var(--t1);margin-bottom:3px;}
.loy-set-help{font-size:10.5px;color:var(--t3);line-height:1.5;font-weight:600;}
.loy-toggle{position:relative;display:inline-block;width:46px;height:26px;flex-shrink:0;}
.loy-toggle input{opacity:0;width:0;height:0;}
.loy-toggle-slider{position:absolute;cursor:pointer;inset:0;background:rgba(0,0,0,.4);border:1px solid var(--bdr);border-radius:14px;transition:.3s;}
.loy-toggle-slider:before{content:'';position:absolute;width:18px;height:18px;right:3px;top:3px;background:#9ca3af;border-radius:50%;transition:.3s;}
.loy-toggle input:checked + .loy-toggle-slider{background:linear-gradient(135deg,#fbbf24,#d97706);border-color:#d97706;}
.loy-toggle input:checked + .loy-toggle-slider:before{transform:translateX(-20px);background:#fff;}
.loy-tiers-config{display:flex;flex-direction:column;gap:7px;margin-top:8px;}
.loy-tier-config-item{display:flex;align-items:center;gap:10px;padding:9px 11px;background:rgba(0,0,0,.2);border:1px solid var(--bdr);border-radius:10px;}
.loy-tier-config-item .loy-tier-ico{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.3);}
.loy-tier-info{flex:1;min-width:0;}
.loy-tier-name{font-size:12px;font-weight:900;color:var(--t1);margin-bottom:2px;}
.loy-tier-range{font-size:10.5px;color:var(--t3);font-weight:700;display:flex;align-items:center;gap:5px;}
.loy-tier-min-input{width:60px;background:rgba(0,0,0,.3);border:1px solid var(--bdr);border-radius:6px;padding:3px 6px;color:var(--t1);font-family:'Outfit',sans-serif;font-weight:800;font-size:11px;text-align:center;}
.loy-tier-discount{font-size:13px;font-weight:900;color:#22c55e;font-family:'Outfit',sans-serif;}
.loy-tier-disc-input{width:50px;background:rgba(0,0,0,.3);border:1px solid var(--bdr);border-radius:6px;padding:3px 6px;color:#22c55e;font-family:'Outfit',sans-serif;font-weight:900;font-size:12px;text-align:center;}
/* ════════════════ ADJUST POINTS MODAL ════════════════ */
.loy-adj-mode{display:flex;gap:5px;background:rgba(0,0,0,.25);border:1px solid var(--bdr);border-radius:10px;padding:3px;}
.loy-adj-mode-btn{flex:1;padding:8px 10px;border:none;background:transparent;color:var(--t3);font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:800;cursor:pointer;border-radius:7px;transition:all .2s;}
.loy-adj-mode-btn:hover{color:var(--t1);}
.loy-adj-mode-btn.on{background:linear-gradient(135deg,#a855f7,#7c3aed);color:#fff;box-shadow:0 3px 10px rgba(168,85,247,.4);}
/* ════════════════ MOBILE RESPONSIVENESS ════════════════ */
@media (max-width:680px){
.loy-hero-content{padding:18px 16px 16px;}
.loy-hero-title{font-size:18px;}
.loy-stats-grid{grid-template-columns:repeat(2,1fr);gap:8px;}
.loy-stat-num{font-size:17px;}
.loy-member-row{grid-template-columns:36px 38px 1fr auto;gap:8px;padding:10px;}
.loy-member-row .loy-rank{width:32px;height:32px;font-size:12px;}
.loy-member-row .loy-member-avatar{width:36px;height:36px;font-size:15px;}
.loy-member-row .loy-member-adj{display:none;}
.loy-tier-filter{width:100%;overflow-x:auto;}
.loy-tf-btn{font-size:10.5px;padding:6px 9px;white-space:nowrap;}
}
/* ═══════════════════════════════════════════════════════════════
🆕🆕🆕 SMART CUSTOMER ACTIONS PANEL (in detail modal)
Clear, context-aware buttons for rating + flag management
═══════════════════════════════════════════════════════════════ */
.cust-actions-panel{position:relative;background:linear-gradient(135deg,rgba(168,85,247,.04),rgba(168,85,247,.01));border:1px solid rgba(168,85,247,.2);border-radius:14px;padding:13px 14px;margin-bottom:14px;}
.cust-actions-title{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:900;color:#c084fc;letter-spacing:.3px;text-transform:uppercase;margin-bottom:10px;padding-bottom:8px;border-bottom:1px dashed rgba(168,85,247,.2);}
.cust-actions-title svg{color:#c084fc;}
.cust-action-section{margin-bottom:11px;}
.cust-action-section:last-child{margin-bottom:0;}
.cust-action-sec-lbl{font-size:10px;color:var(--t4);font-weight:800;letter-spacing:.4px;text-transform:uppercase;margin-bottom:6px;}
/* STATE — when action is already taken */
.cust-action-state{background:rgba(0,0,0,.25);border:1px solid var(--bdr);border-radius:11px;padding:9px 12px;}
.cust-action-state-rated{border-color:rgba(251,191,36,.35);background:linear-gradient(135deg,rgba(251,191,36,.06),rgba(217,119,6,.02));}
.cust-action-state-flag.is-fraud{border-color:rgba(251,191,36,.45);background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(180,83,9,.03));}
.cust-action-state-flag.is-block{border-color:rgba(239,68,68,.5);background:linear-gradient(135deg,rgba(239,68,68,.12),rgba(127,29,29,.04));}
.cust-action-state-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:5px;}
.cust-action-rating-num{font-family:'Outfit',sans-serif;font-size:14px;font-weight:900;color:#fbbf24;}
.cust-action-flag-icon{font-size:18px;line-height:1;}
.cust-action-flag-label{font-size:13px;font-weight:900;color:#fff;}
.cust-action-state-flag.is-fraud .cust-action-flag-label{color:#fbbf24;}
.cust-action-state-flag.is-block .cust-action-flag-label{color:#fca5a5;}
.cust-action-note{font-size:10.5px;color:var(--t2);font-style:italic;margin:5px 0;padding:5px 9px;background:rgba(0,0,0,.2);border-radius:6px;border-right:2px solid rgba(255,255,255,.15);}
/* EDIT BUTTON (next to state) */
.cust-action-edit-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;background:rgba(255,255,255,.06);border:1px solid var(--bdr);border-radius:8px;color:var(--t1);font-family:'Cairo',sans-serif;font-size:10.5px;font-weight:800;cursor:pointer;transition:all .2s;}
.cust-action-edit-btn:hover{background:rgba(255,255,255,.12);transform:translateY(-1px);}
.cust-action-btn-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px;}
.cust-action-btn-row .cust-action-edit-btn,.cust-action-btn-row .cust-action-remove-btn{flex:1;justify-content:center;}
.cust-action-remove-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:6px 10px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.3);border-radius:8px;color:#fca5a5;font-family:'Cairo',sans-serif;font-size:10.5px;font-weight:800;cursor:pointer;transition:all .2s;}
.cust-action-remove-btn:hover{background:rgba(239,68,68,.15);transform:translateY(-1px);}
/* ADD BUTTONS (when no action yet) */
.cust-action-add-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:11px 14px;border-radius:11px;font-family:'Cairo',sans-serif;font-size:12.5px;font-weight:900;cursor:pointer;transition:all .25s;border:1.5px solid transparent;letter-spacing:-.2px;}
.cust-action-add-btn:hover{transform:translateY(-1px);}
.cust-action-add-btn:active{transform:scale(.97);}
.cust-action-add-ico{font-size:15px;line-height:1;}
.cust-action-add-rating{background:linear-gradient(135deg,rgba(251,191,36,.15),rgba(217,119,6,.05));color:#fbbf24;border-color:rgba(251,191,36,.35);width:100%;}
.cust-action-add-rating:hover{background:linear-gradient(135deg,#fbbf24,#d97706);color:#fff;box-shadow:0 6px 18px rgba(251,191,36,.4);}
.cust-action-add-fraud{background:linear-gradient(135deg,rgba(251,191,36,.1),rgba(180,83,9,.03));color:#fbbf24;border-color:rgba(251,191,36,.3);}
.cust-action-add-fraud:hover{background:linear-gradient(135deg,#fbbf24,#b45309);color:#fff;box-shadow:0 6px 18px rgba(251,191,36,.4);border-color:#b45309;}
.cust-action-add-block{background:linear-gradient(135deg,rgba(239,68,68,.1),rgba(127,29,29,.03));color:#fca5a5;border-color:rgba(239,68,68,.35);}
.cust-action-add-block:hover{background:linear-gradient(135deg,#ef4444,#991b1b);color:#fff;box-shadow:0 6px 18px rgba(239,68,68,.4);border-color:#991b1b;}
/* OTHERS HINT */
.cust-action-others-hint{margin-top:10px;font-size:10.5px;color:var(--t3);background:rgba(96,165,250,.05);border:1px solid rgba(96,165,250,.2);border-radius:8px;padding:7px 11px;line-height:1.6;}
/* ═══════════════════════════════════════════════════════════════
🆕🆕 BLOCK ENFORCEMENT — Submit button disabled state
═══════════════════════════════════════════════════════════════ */
.rec-issue-btn.is-blocked-locked{
background:linear-gradient(135deg,#ef4444,#991b1b) !important;
color:#fff !important;
cursor:not-allowed !important;
pointer-events:none;
animation:blockedPulse 1.5s ease-in-out infinite;
box-shadow:0 6px 22px rgba(239,68,68,.4) !important;
}
@keyframes blockedPulse{
0%,100%{box-shadow:0 6px 22px rgba(239,68,68,.4);}
50%{box-shadow:0 6px 28px rgba(239,68,68,.7);}
}
.rec-issue-btn.is-blocked-locked .rec-issue-arrow{display:none !important;}
/* ═══════════════════════════════════════════════════════════════
🆕🆕 BLOCKED CUSTOMER MODAL — Dramatic, undismissable warning
═══════════════════════════════════════════════════════════════ */
.blocked-modal{
position:relative;
background:linear-gradient(135deg,#1f0a0a 0%,#3b0d0d 50%,#1f0a0a 100%);
border:2px solid rgba(239,68,68,.5);
border-radius:20px;
overflow:hidden;
box-shadow:0 24px 60px rgba(239,68,68,.4),0 8px 30px rgba(0,0,0,.5);
animation:blockedModalEnter .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes blockedModalEnter{
0%{opacity:0;transform:scale(.85);}
100%{opacity:1;transform:scale(1);}
}
.blocked-modal-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 30%,rgba(239,68,68,.2) 0%,transparent 60%);pointer-events:none;}
.blocked-modal-orb{position:absolute;width:200px;height:200px;border-radius:50%;background:#ef4444;opacity:.15;filter:blur(60px);top:-50px;left:-50px;pointer-events:none;}
.blocked-modal-content{position:relative;z-index:1;padding:24px 22px;text-align:center;}
.blocked-modal-icon{
font-size:56px;
line-height:1;
margin-bottom:12px;
animation:blockedIconShake .6s ease-in-out;
display:inline-block;
filter:drop-shadow(0 4px 12px rgba(239,68,68,.6));
}
@keyframes blockedIconShake{
0%,100%{transform:rotate(0);}
20%{transform:rotate(-8deg);}
40%{transform:rotate(8deg);}
60%{transform:rotate(-6deg);}
80%{transform:rotate(6deg);}
}
.blocked-modal-title{font-size:22px;font-weight:900;color:#fff;letter-spacing:-.5px;margin-bottom:6px;text-shadow:0 2px 8px rgba(0,0,0,.4);}
.blocked-modal-sub{font-size:12.5px;color:rgba(255,255,255,.75);font-weight:700;line-height:1.6;margin-bottom:18px;}
.blocked-modal-details{background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.1);border-radius:13px;padding:14px;margin-bottom:14px;text-align:right;}
.blocked-modal-row{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.08);}
.blocked-modal-row:last-child{border-bottom:none;}
.blocked-modal-lbl{font-size:10.5px;color:rgba(255,255,255,.55);font-weight:800;min-width:75px;letter-spacing:.2px;}
.blocked-modal-val{font-size:12px;color:#fff;font-weight:800;flex:1;text-align:right;}
.blocked-modal-reason{font-style:italic;color:#fca5a5;}
.blocked-modal-hint{font-size:10.5px;color:rgba(255,255,255,.6);background:rgba(96,165,250,.08);border:1px solid rgba(96,165,250,.2);border-radius:9px;padding:9px 12px;line-height:1.7;margin-bottom:14px;}
.blocked-modal-close-btn{
width:100%;
padding:13px;
background:linear-gradient(135deg,#ef4444,#b91c1c);
border:none;
border-radius:12px;
color:#fff;
font-family:'Cairo',sans-serif;
font-size:14px;
font-weight:900;
cursor:pointer;
transition:all .25s;
box-shadow:0 4px 14px rgba(239,68,68,.4),inset 0 1px 0 rgba(255,255,255,.2);
letter-spacing:.3px;
}
.blocked-modal-close-btn:hover{transform:translateY(-1px);box-shadow:0 6px 22px rgba(239,68,68,.55);}
.blocked-modal-close-btn:active{transform:scale(.97);}
/* ═══════════════════════════════════════════════════════════════
🏆🆕🆕 LOYALTY REDEMPTION SECTION (in reception form)
Luxurious gold-themed section for tier discount + points redemption
═══════════════════════════════════════════════════════════════ */
.rec-loyalty-section{
position:relative;
background:linear-gradient(135deg,rgba(251,191,36,.08) 0%,rgba(217,119,6,.04) 100%);
border:1.5px solid rgba(251,191,36,.4);
border-radius:16px;
padding:14px 15px;
margin:14px 0;
overflow:hidden;
animation:loyaltyEnter .4s cubic-bezier(.34,1.56,.64,1);
box-shadow:0 6px 22px rgba(251,191,36,.12), inset 0 1px 0 rgba(251,191,36,.15);
}
@keyframes loyaltyEnter{
0%{opacity:0;transform:translateY(-6px) scale(.98);}
100%{opacity:1;transform:translateY(0) scale(1);}
}
.rec-loy-shine{
position:absolute;top:0;left:-100%;width:50%;height:100%;
background:linear-gradient(90deg,transparent,rgba(251,191,36,.15) 50%,transparent);
transform:skewX(-22deg);
animation:loyShine 4s ease-in-out infinite;
pointer-events:none;
}
@keyframes loyShine{
0%,100%{left:-100%;}
50%{left:150%;}
}
.rec-loy-header{
display:flex;align-items:center;gap:12px;
padding-bottom:11px;margin-bottom:11px;
border-bottom:1px dashed rgba(251,191,36,.25);
position:relative;z-index:1;
}
.rec-loy-ico{
width:48px;height:48px;min-width:48px;
border-radius:13px;
display:flex;align-items:center;justify-content:center;
font-size:24px;
background:linear-gradient(135deg,#FFD700,#DAA520);
box-shadow:0 4px 14px rgba(251,191,36,.35),inset 0 1px 0 rgba(255,255,255,.25);
}
.rec-loy-info{flex:1;min-width:0;}
.rec-loy-title-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap;}
.rec-loy-title{font-size:13px;font-weight:900;color:#fbbf24;letter-spacing:-.3px;}
.rec-loy-tier-badge{
display:inline-flex;align-items:center;padding:2px 9px;
border-radius:8px;
font-size:10.5px;font-weight:900;color:#fff;
letter-spacing:-.1px;
box-shadow:0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);
}
.rec-loy-points-row{display:flex;align-items:baseline;gap:6px;}
.rec-loy-points-num{
font-family:'Outfit',sans-serif;
font-size:18px;font-weight:900;color:#FFD700;
letter-spacing:-.5px;
text-shadow:0 1px 3px rgba(251,191,36,.4);
}
.rec-loy-points-lbl{font-size:11px;color:var(--t2);font-weight:700;}
/* OPTIONS (tier discount toggle) */
.rec-loy-opt{
display:flex;align-items:flex-start;gap:11px;
padding:11px 12px;
background:rgba(0,0,0,.2);
border:1px solid rgba(251,191,36,.2);
border-radius:11px;
margin-bottom:10px;
cursor:pointer;
transition:all .2s;
position:relative;z-index:1;
}
.rec-loy-opt:hover{background:rgba(0,0,0,.3);border-color:rgba(251,191,36,.4);}
.rec-loy-opt input[type="checkbox"]{
width:20px;height:20px;
accent-color:#fbbf24;
cursor:pointer;
margin-top:1px;
}
.rec-loy-opt-body{flex:1;min-width:0;}
.rec-loy-opt-h{display:flex;align-items:center;gap:6px;margin-bottom:3px;flex-wrap:wrap;}
.rec-loy-opt-ico{font-size:14px;}
.rec-loy-opt-title{font-size:12px;font-weight:900;color:#fff;flex:1;letter-spacing:-.2px;}
.rec-loy-opt-pct{
font-family:'Outfit',sans-serif;
font-size:12px;font-weight:900;color:#fbbf24;
padding:2px 7px;background:rgba(251,191,36,.15);border-radius:6px;
}
.rec-loy-opt-sub{font-size:11px;color:var(--t2);font-weight:700;font-family:'Outfit',var(--font);}
/* REDEEM INPUT */
.rec-loy-redeem{
background:rgba(0,0,0,.2);
border:1px solid rgba(251,191,36,.2);
border-radius:11px;
padding:11px 12px;
position:relative;z-index:1;
}
.rec-loy-redeem-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.rec-loy-redeem-input-wrap{
flex:1;
display:flex;align-items:center;
background:rgba(0,0,0,.4);
border:1px solid rgba(251,191,36,.3);
border-radius:9px;
overflow:hidden;
transition:all .2s;
}
.rec-loy-redeem-input-wrap:focus-within{border-color:#fbbf24;box-shadow:0 0 0 3px rgba(251,191,36,.15);}
.rec-loy-redeem-input-wrap input{
flex:1;
background:transparent;
border:none;
padding:8px 11px;
color:#fff;
font-family:'Outfit',sans-serif;
font-size:14px;font-weight:900;
outline:none;
direction:ltr;text-align:right;
}
.rec-loy-redeem-unit{
font-size:11px;color:var(--t3);font-weight:700;
padding:0 11px;
border-right:1px solid rgba(251,191,36,.2);
}
.rec-loy-redeem-eq{font-size:14px;color:var(--t3);font-weight:900;}
.rec-loy-redeem-amount{
min-width:80px;text-align:left;
font-family:'Outfit',sans-serif;font-size:14px;font-weight:900;
padding:8px 11px;
background:rgba(34,197,94,.08);
border:1px solid rgba(34,197,94,.25);
border-radius:9px;
direction:ltr;
}
.rec-loy-redeem-hint{
font-size:10.5px;color:var(--t3);font-weight:600;
padding:5px 2px 6px;
line-height:1.6;
}
.rec-loy-redeem-quick{display:flex;gap:6px;flex-wrap:wrap;}
.rec-loy-quick-btn{
flex:1;min-width:50px;
padding:6px 10px;
background:rgba(251,191,36,.1);
border:1px solid rgba(251,191,36,.3);
border-radius:8px;
color:#fbbf24;
font-family:'Cairo',sans-serif;font-size:11px;font-weight:900;
cursor:pointer;
transition:all .2s;
}
.rec-loy-quick-btn:hover{background:rgba(251,191,36,.2);transform:translateY(-1px);}
.rec-loy-quick-btn:active{transform:scale(.95);}
/* TOTAL DISCOUNT SUMMARY */
.rec-loy-total{
margin-top:11px;
padding:10px 12px;
background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(22,163,74,.04));
border:1px solid rgba(34,197,94,.3);
border-radius:11px;
position:relative;z-index:1;
animation:loyaltyEnter .3s ease-out;
}
.rec-loy-total-row{display:flex;justify-content:space-between;align-items:center;}
.rec-loy-total-lbl{font-size:12px;font-weight:900;color:#4ade80;letter-spacing:-.2px;}
.rec-loy-total-val{
font-family:'Outfit',sans-serif;
font-size:16px;font-weight:900;color:#4ade80;
direction:ltr;
text-shadow:0 1px 3px rgba(34,197,94,.3);
}
/* Mobile adjustments */
@media (max-width: 580px){
.rec-loyalty-section{padding:12px;}
.rec-loy-ico{width:42px;height:42px;font-size:20px;}
.rec-loy-points-num{font-size:16px;}
.rec-loy-redeem-input-wrap input{font-size:13px;}
.rec-loy-quick-btn{font-size:10.5px;padding:5px 8px;}
}
/* ═══════════════════════════════════════════════════════════════
🎫 TICKET VIEW ACTIONS · Refined luxury icons (smaller, elegant)
═══════════════════════════════════════════════════════════════ */
.tkv-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.tkv-act {
flex: 1 1 calc(25% - 5px);
min-width: 72px;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 9px 6px 8px;
border-radius: 11px;
border: none;
cursor: pointer;
font-family: inherit;
font-size: 11px;
font-weight: 800;
color: #fff;
overflow: hidden;
isolation: isolate;
transition: transform 0.25s cubic-bezier(.16,1,.3,1), box-shadow 0.25s;
}
.tkv-act::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--tkv-grad, linear-gradient(135deg, #6b7280, #4b5563));
z-index: -2;
}
.tkv-act::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(180deg, rgba(255,255,255,0.12), transparent 50%, rgba(0,0,0,0.08));
z-index: -1;
pointer-events: none;
}
.tkv-act-shine {
position: absolute;
top: 0;
left: -100%;
width: 60%;
height: 100%;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
pointer-events: none;
z-index: 0;
transition: left 0.7s cubic-bezier(.16,1,.3,1);
}
.tkv-act:hover {
transform: translateY(-2px);
}
.tkv-act:hover .tkv-act-shine { left: 120%; }
.tkv-act:active { transform: translateY(0) scale(0.96); }
.tkv-act-ico {
width: 26px;
height: 26px;
border-radius: 8px;
background: rgba(255,255,255,0.18);
display: flex;
align-items: center;
justify-content: center;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
position: relative;
z-index: 1;
}
.tkv-act:hover .tkv-act-ico {
background: rgba(255,255,255,0.26);
transform: scale(1.06);
transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
}
.tkv-act-lbl {
font-family: 'Outfit', 'Cairo', sans-serif;
letter-spacing: -0.1px;
text-shadow: 0 1px 2px rgba(0,0,0,0.12);
position: relative;
z-index: 1;
font-size: 10.5px;
line-height: 1;
margin-top: 1px;
}
/* Per-action gradients with matching shadows (refined sizes) */
.tkv-act-edit { --tkv-grad: linear-gradient(135deg, #F59E0B 0%, #d97706 100%); box-shadow: 0 3px 10px rgba(245,158,11,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }
.tkv-act-edit:hover { box-shadow: 0 6px 16px rgba(245,158,11,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.tkv-act-share { --tkv-grad: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%); box-shadow: 0 3px 10px rgba(59,130,246,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }
.tkv-act-share:hover { box-shadow: 0 6px 16px rgba(59,130,246,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.tkv-act-pay { --tkv-grad: linear-gradient(135deg, #22C55E 0%, #15803d 100%); box-shadow: 0 3px 10px rgba(34,197,94,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }
.tkv-act-pay:hover { box-shadow: 0 6px 16px rgba(34,197,94,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.tkv-act-refund { --tkv-grad: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); box-shadow: 0 3px 10px rgba(168,85,247,0.35), inset 0 1px 0 rgba(255,255,255,0.15); }
.tkv-act-refund:hover { box-shadow: 0 6px 16px rgba(168,85,247,0.5), inset 0 1px 0 rgba(255,255,255,0.2); }
.tkv-act-close { --tkv-grad: linear-gradient(135deg, #475569 0%, #334155 100%); box-shadow: 0 3px 8px rgba(71,85,105,0.3), inset 0 1px 0 rgba(255,255,255,0.12); }
.tkv-act-close:hover { box-shadow: 0 6px 14px rgba(71,85,105,0.4), inset 0 1px 0 rgba(255,255,255,0.16); }
/* Removed tkv-act-wa (was redundant with share menu) */
/* ═══════════════════════════════════════════════════════════════
📤 SHARE MENU MODAL · Premium share-to-platform overlay
═══════════════════════════════════════════════════════════════ */
.tkv-share-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
animation: fadeIn 0.3s ease;
}
.tkv-share-modal {
position: relative;
width: 100%;
max-width: 480px;
max-height: 92vh;
overflow-y: auto;
background: linear-gradient(180deg, #1a2238 0%, #0e1424 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 22px;
padding: 0;
box-shadow: 0 28px 70px rgba(0,0,0,0.6), 0 12px 32px rgba(0,0,0,0.4);
animation: tkvShareIn 0.4s cubic-bezier(.16,1,.3,1);
}
@keyframes tkvShareIn {
from { opacity: 0; transform: translateY(20px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Top accent ribbon */
.tkv-share-ribbon {
height: 4px;
background: linear-gradient(90deg,
rgba(34,197,94,0.4),
#22C55E 20%,
#C9A84C 50%,
#3B82F6 80%,
rgba(59,130,246,0.4));
background-size: 200% 100%;
border-radius: 22px 22px 0 0;
animation: tkvShareRibbonShine 4s ease-in-out infinite;
box-shadow: 0 0 22px rgba(201,168,76,0.4);
}
@keyframes tkvShareRibbonShine {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Header */
.tkv-share-head {
display: flex;
align-items: center;
gap: 12px;
padding: 18px 18px 12px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tkv-share-head-ico {
width: 44px;
height: 44px;
border-radius: 14px;
background: linear-gradient(135deg, #C9A84C, #a78032);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(201,168,76,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}
.tkv-share-head-text { flex: 1; min-width: 0; }
.tkv-share-head-t {
font-family: 'Outfit', 'Cairo', sans-serif;
font-size: 17px;
font-weight: 900;
color: #f1f5f9;
letter-spacing: -0.4px;
}
.tkv-share-head-s {
font-size: 11.5px;
color: rgba(241,245,249,0.6);
font-weight: 700;
margin-top: 2px;
}
.tkv-share-close {
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(241,245,249,0.6);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
}
.tkv-share-close:hover {
background: rgba(248,113,113,0.15);
color: #f87171;
border-color: rgba(248,113,113,0.4);
transform: rotate(90deg);
}
/* Preview area */
.tkv-share-preview {
padding: 14px;
background: rgba(0,0,0,0.2);
border-bottom: 1px solid rgba(255,255,255,0.06);
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
.tkv-share-preview-img {
display: block;
width: 100%;
max-width: 280px;
max-height: 320px;
object-fit: contain;
border-radius: 14px;
box-shadow: 0 12px 36px rgba(0,0,0,0.5);
animation: tkvShareImgIn 0.5s cubic-bezier(.16,1,.3,1);
}
@keyframes tkvShareImgIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.tkv-share-spinner {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
color: rgba(241,245,249,0.6);
}
.tkv-share-spinner-ring {
width: 36px;
height: 36px;
border: 3px solid rgba(255,255,255,0.1);
border-top-color: #C9A84C;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.tkv-share-spinner-txt {
font-size: 12px;
font-weight: 700;
font-family: 'Cairo', sans-serif;
}
.tkv-share-error {
color: #f87171;
font-size: 13px;
font-weight: 700;
text-align: center;
padding: 20px;
}
/* Share grid */
.tkv-share-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 8px;
padding: 16px 14px;
}
@media (max-width: 480px) {
.tkv-share-grid { grid-template-columns: repeat(3, 1fr); }
}
.tkv-share-btn {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 14px 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
cursor: pointer;
font-family: inherit;
overflow: hidden;
isolation: isolate;
transition: all 0.3s cubic-bezier(.16,1,.3,1);
}
.tkv-share-btn:hover {
transform: translateY(-4px);
background: rgba(255,255,255,0.08);
border-color: rgba(255,255,255,0.15);
}
.tkv-share-btn-shine {
position: absolute;
top: 0;
left: -100%;
width: 70%;
height: 100%;
background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.12) 50%, transparent 70%);
pointer-events: none;
z-index: 0;
transition: left 0.7s cubic-bezier(.16,1,.3,1);
}
.tkv-share-btn:hover .tkv-share-btn-shine { left: 130%; }
.tkv-share-btn-ico {
width: 48px;
height: 48px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 6px 18px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
position: relative;
z-index: 1;
transition: transform 0.3s cubic-bezier(.34, 1.56, .64, 1);
}
.tkv-share-btn:hover .tkv-share-btn-ico {
transform: scale(1.12) rotate(-4deg);
}
.tkv-share-btn-lbl {
font-family: 'Outfit', 'Cairo', sans-serif;
font-size: 11.5px;
font-weight: 800;
color: rgba(241,245,249,0.85);
letter-spacing: -0.2px;
position: relative;
z-index: 1;
}
/* Brand gradients */
.tkv-share-wa .tkv-share-btn-ico { background: linear-gradient(135deg, #25D366, #128C7E); box-shadow: 0 6px 18px rgba(37,211,102,0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
.tkv-share-fb .tkv-share-btn-ico { background: linear-gradient(135deg, #1877F2, #0a5fc4); box-shadow: 0 6px 18px rgba(24,119,242,0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
.tkv-share-ig .tkv-share-btn-ico { background: linear-gradient(135deg, #fdb6f7 0%, #e4405f 30%, #c13584 50%, #833ab4 75%, #5851db 100%); box-shadow: 0 6px 18px rgba(228,64,95,0.45), inset 0 1px 0 rgba(255,255,255,0.3); }
.tkv-share-email .tkv-share-btn-ico { background: linear-gradient(135deg, #60a5fa, #2563eb); box-shadow: 0 6px 18px rgba(96,165,250,0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
.tkv-share-dl .tkv-share-btn-ico { background: linear-gradient(135deg, #C9A84C, #a78032); box-shadow: 0 6px 18px rgba(201,168,76,0.45), inset 0 1px 0 rgba(255,255,255,0.25); }
/* Native share fallback button */
.tkv-share-native {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: calc(100% - 28px);
margin: 0 14px 16px;
padding: 12px 16px;
background: rgba(255,255,255,0.04);
border: 1px dashed rgba(255,255,255,0.15);
border-radius: 12px;
color: rgba(241,245,249,0.75);
font-family: inherit;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.2s;
}
.tkv-share-native:hover {
background: rgba(255,255,255,0.08);
border-color: rgba(201,168,76,0.5);
color: #C9A84C;
}
/* 🌟 سمعة العميل من مراكز أخرى */
@keyframes repFadeIn { from{opacity:0;transform:translateY(-6px);} to{opacity:1;transform:translateY(0);} }
/* ╔═══════════════════════════════════════════════════════════╗ */
/* ║ CSS منقول من home.html (واجهة home الرئيسية) ║ */
/* ╚═══════════════════════════════════════════════════════════╝ */
/* ═══════════════════════════════════════════════════════════ */
/* 🔄 منقول من home.html — PIN & misc UI */
/* ═══════════════════════════════════════════════════════════ */
.pin-dot{width:13px;height:13px;border-radius:50%;border:2px solid var(--bdr2);background:transparent;transition:all .2s;}
.pin-dot.on{background:var(--g1);border-color:var(--g1);box-shadow:0 0 8px rgba(201,168,76,.5);}
.pin-dot.err{background:var(--rd);border-color:var(--rd);animation:shk .4s;}
@keyframes shk{0%,100%{transform:translateX(0);}25%{transform:translateX(-4px);}75%{transform:translateX(4px);}}
@keyframes shakeX{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}
.pk{padding:13px 0;border-radius:var(--r8);background:var(--d4);border:1px solid var(--bdr);color:var(--t1);font-family:var(--font);font-size:16px;font-weight:700;cursor:pointer;transition:background .15s;}
.pk:hover{background:var(--d5);}
.pk:active{transform:scale(.93);}
/* ═══ dash-pane visibility ═══ */
.dash-pane { display: none !important; }
/* ─── Sidebar section labels ─── */
.sb-section-label {
font-size: 9.5px;
font-weight: 800;
letter-spacing: .6px;
text-transform: uppercase;
color: rgba(255,255,255,.25);
padding: 14px 12px 5px;
margin-top: 4px;
}
.sb-section-label:first-child { margin-top: 0; padding-top: 8px; }
/* ─── Index link ─── */
.sb-index-link {
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
background: linear-gradient(135deg, rgba(201,168,76,0.12), rgba(201,168,76,0.06));
border: 1px solid rgba(201,168,76,0.25);
border-radius: 11px;
padding: 10px 12px;
transition: all .2s;
}
.sb-index-link:hover {
background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(201,168,76,0.1));
border-color: rgba(201,168,76,0.45);
transform: translateY(-1px);
}
.sb-index-link .nl { color: #c9a84c !important; font-weight: 800; }
.sb-index-link .ni svg { stroke: #c9a84c; }
.dash-pane.on { display: block !important; }
/* ═══════════════════════════════════════════════════════════ */
/* 🔄 منقول من home.html — Customer list & live UI */
/* ═══════════════════════════════════════════════════════════ */
@keyframes custLivePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.7); }
50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
}
#cust-link-modal.is-open { display: flex !important; opacity: 1 !important; }
#cust-link-modal.is-open #cust-link-sheet { transform: scale(1) !important; }
/* ═══════════════════════════════════════════════════════════════════════
🆕 MY PLAN & FEATURES PANE
═══════════════════════════════════════════════════════════════════════ */
.myplan-wrap { padding: 4px; max-width: 1100px; margin: 0 auto; }
.myplan-hero {
position: relative;
background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
backdrop-filter: blur(18px) saturate(160%);
-webkit-backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 22px;
padding: 26px 28px;
margin-bottom: 16px;
overflow: hidden;
}
.myplan-hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(50px);
pointer-events: none;
}
.mp-orb-1 {
top: -80px; right: -80px;
width: 280px; height: 280px;
background: radial-gradient(circle, rgba(201,168,76,0.30), transparent 60%);
}
.mp-orb-2 {
bottom: -100px; left: -100px;
width: 320px; height: 320px;
background: radial-gradient(circle, rgba(99,102,241,0.20), transparent 60%);
}
.myplan-hero-content { position: relative; z-index: 1; }
.myplan-hero-badge {
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(201,168,76,0.10);
border: 1px solid rgba(201,168,76,0.30);
color: #C9A84C;
padding: 5px 12px;
border-radius: 50px;
font-size: 10px;
font-weight: 800;
letter-spacing: 1px;
margin-bottom: 16px;
font-family: 'Cairo',sans-serif;
}
.myplan-hero-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #C9A84C;
box-shadow: 0 0 0 0 rgba(201,168,76,0.7);
animation: mpLivePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes mpLivePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0.7); }
50% { box-shadow: 0 0 0 6px rgba(201,168,76,0); }
}
.myplan-hero-title-row {
display: flex; align-items: center; gap: 16px;
}
.myplan-hero-icon {
width: 64px; height: 64px;
border-radius: 18px;
background: linear-gradient(135deg, #C9A84C, #A07830);
color: #0a0800;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
box-shadow: 0 10px 26px rgba(201,168,76,0.35), inset 0 1px 0 rgba(255,255,255,0.30);
flex-shrink: 0;
}
.myplan-hero-title {
font-family: 'Cairo', sans-serif;
font-size: 22px; font-weight: 900;
color: #F4F0E6;
letter-spacing: -0.3px;
}
.myplan-hero-sub {
font-size: 13px; color: rgba(244,240,230,0.74);
font-weight: 600; margin-top: 4px;
font-family: 'Cairo',sans-serif;
}
.myplan-hero-stats {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 10px; margin-top: 22px;
}
@media (max-width: 640px) {
.myplan-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
.myplan-stat {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px; padding: 12px 14px; text-align: center;
}
.myplan-stat-val {
font-family: 'Outfit', sans-serif;
font-size: 22px; font-weight: 900;
background: linear-gradient(135deg, #E8C96A, #C9A84C);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.myplan-stat-lbl {
font-size: 10.5px; color: rgba(244,240,230,0.50);
font-weight: 700; margin-top: 4px;
font-family: 'Cairo',sans-serif;
}
/* Tabs */
.myplan-tabs {
display: flex; gap: 6px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 5px;
margin-bottom: 14px;
flex-wrap: wrap;
}
.myplan-tab {
flex: 1; min-width: 110px;
background: transparent;
border: none;
padding: 9px 12px;
border-radius: 9px;
font-family: 'Cairo',sans-serif;
font-size: 12px;
font-weight: 800;
color: rgba(244,240,230,0.50);
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 6px;
transition: all 0.25s;
}
.myplan-tab:hover { color: #F4F0E6; }
.myplan-tab.on {
background: linear-gradient(135deg, rgba(201,168,76,0.18), rgba(201,168,76,0.10));
color: #E8C96A;
box-shadow: 0 2px 8px rgba(201,168,76,0.20);
}
.myplan-tabpane { display: none; }
.myplan-tabpane.on { display: block; animation: mpFadeIn 0.3s ease; }
@keyframes mpFadeIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Features grid */
.myplan-features-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 10px;
}
.mp-feature-card {
display: flex; align-items: center; gap: 11px;
background: #1a2033;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 12px 14px;
transition: all 0.2s ease;
}
.mp-feature-card.is-active {
background: linear-gradient(135deg, rgba(34,197,94,0.08), transparent);
border-color: rgba(34,197,94,0.30);
}
.mp-feature-card.is-locked {
opacity: 0.55;
}
.mp-feature-ico {
width: 32px; height: 32px;
border-radius: 9px;
background: rgba(255,255,255,0.04);
display: flex; align-items: center; justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
.mp-feature-card.is-active .mp-feature-ico {
background: rgba(34,197,94,0.15);
}
.mp-feature-body { flex: 1; min-width: 0; }
.mp-feature-name {
font-size: 12px; font-weight: 900;
color: #F4F0E6;
font-family: 'Cairo',sans-serif;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-feature-state {
font-size: 10px; font-weight: 800; margin-top: 2px;
font-family: 'Cairo',sans-serif;
}
.mp-feature-card.is-active .mp-feature-state { color: #22c55e; }
.mp-feature-card.is-locked .mp-feature-state { color: rgba(244,240,230,0.40); }
.mp-feature-card.is-granted-bonus { border-color: rgba(245,158,11,0.35); background: linear-gradient(135deg, rgba(245,158,11,0.05), transparent); }
.mp-feature-card.is-granted-bonus .mp-feature-state { color: #f59e0b; }
/* Templates grid */
.myplan-templates-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.mp-template-card {
background: #1a2033;
border: 2px solid rgba(255,255,255,0.08);
border-radius: 16px;
overflow: hidden;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
}
.mp-template-card:hover:not(.is-locked) {
transform: translateY(-3px);
box-shadow: 0 14px 30px rgba(0,0,0,0.30);
}
.mp-template-card.is-selected {
border-color: #C9A84C;
box-shadow: 0 0 0 3px rgba(201,168,76,0.25);
}
.mp-template-card.is-locked {
opacity: 0.55;
cursor: not-allowed;
}
.mp-template-preview {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
}
.mp-template-lock-overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(2px);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
color: #fff; gap: 4px;
z-index: 5;
}
.mp-template-info {
padding: 12px 14px;
}
.mp-template-name {
font-size: 13px; font-weight: 900;
color: #F4F0E6;
font-family: 'Cairo',sans-serif;
display: flex; align-items: center; gap: 7px;
}
.mp-template-desc {
font-size: 11px; color: rgba(244,240,230,0.50);
font-weight: 600; margin-top: 3px;
font-family: 'Cairo',sans-serif;
line-height: 1.4;
}
.mp-template-selected-badge {
position: absolute;
top: 8px; right: 8px;
background: linear-gradient(135deg, #C9A84C, #A07830);
color: #0a0800;
font-size: 10px; font-weight: 900;
padding: 4px 10px;
border-radius: 50px;
box-shadow: 0 4px 12px rgba(201,168,76,0.40);
z-index: 6;
display: flex; align-items: center; gap: 4px;
}
.mp-template-actions {
display: flex; gap: 6px; margin-top: 10px;
}
.mp-tpl-btn {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 5px;
padding: 8px 10px;
border-radius: 9px;
font-family: 'Cairo',sans-serif;
font-size: 11px; font-weight: 900;
cursor: pointer;
border: 1px solid transparent;
transition: all 0.2s;
}
.mp-tpl-btn-primary {
background: linear-gradient(135deg, #C9A84C, #A07830);
color: #0a0800;
box-shadow: 0 4px 12px rgba(201,168,76,0.30);
}
.mp-tpl-btn-primary:hover { transform: translateY(-1px); }
.mp-tpl-btn-active {
background: rgba(34,197,94,0.15);
color: #22c55e;
border-color: rgba(34,197,94,0.30);
cursor: default;
}
.mp-tpl-btn-ghost {
background: rgba(255,255,255,0.04);
color: #C8BFA8;
border-color: rgba(255,255,255,0.08);
}
.mp-tpl-btn-ghost:hover {
background: rgba(201,168,76,0.10);
border-color: rgba(201,168,76,0.30);
color: #C9A84C;
}
/* ═══════════════════════════════════════════════════════════ */
/* 🔄 منقول من home.html — Analytics v2 dashboard */
/* ═══════════════════════════════════════════════════════════ */
/* ════════ ANALYTICS v2 — Modern Dark Dashboard ════════ */
#anl-root{direction:rtl;font-family:'Cairo','Segoe UI',sans-serif;min-height:100%;padding:0 0 80px;color:var(--t1,#f1f5f9);}
/* ─── Hero ─── */
.anl-hero{position:relative;overflow:hidden;padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.07);}
.anl-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 100% at 0% 50%,rgba(99,102,241,.14),transparent),radial-gradient(ellipse 60% 80% at 100% 0%,rgba(139,92,246,.09),transparent);pointer-events:none;}
.anl-hero-inner{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.anl-hero-ico{width:46px;height:46px;border-radius:14px;flex-shrink:0;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(99,102,241,.4);}
.anl-hero-title{font-size:18px;font-weight:900;}
.anl-hero-sub{font-size:11.5px;color:var(--t3,#94a3b8);margin-top:3px;}
.anl-refresh{margin-right:auto;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.5);transition:all .18s;}
.anl-refresh:hover{background:rgba(99,102,241,.2);color:#818cf8;border-color:rgba(99,102,241,.3);}
/* ─── Period tabs ─── */
.anl-period-row{display:flex;gap:6px;flex-wrap:wrap;}
.anl-ptab{padding:6px 14px;border-radius:20px;font-size:11.5px;font-weight:700;cursor:pointer;border:1.5px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:var(--t2,#94a3b8);transition:all .2s;font-family:'Cairo',sans-serif;}
.anl-ptab:hover:not(.on){background:rgba(99,102,241,.1);color:#a5b4fc;}
.anl-ptab.on{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(99,102,241,.4);}
/* ─── KPI Grid ─── */
.anl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px 16px 8px;}
@media(max-width:700px){.anl-kpis{grid-template-columns:repeat(2,1fr);}}
.anl-kpi{position:relative;overflow:hidden;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:15px;padding:15px 14px 12px;transition:all .2s;cursor:default;}
.anl-kpi:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.25);}
.anl-kpi-accent{position:absolute;top:0;left:0;right:0;height:2.5px;border-radius:15px 15px 0 0;}
.anl-kpi-icon{font-size:20px;margin-bottom:8px;}
.anl-kpi-val{font-size:20px;font-weight:900;line-height:1;color:var(--t1,#f1f5f9);}
.anl-kpi-lbl{font-size:10.5px;font-weight:700;color:var(--t3,#94a3b8);margin-top:4px;}
.anl-kpi-delta{display:inline-flex;align-items:center;gap:3px;font-size:9.5px;font-weight:800;margin-top:6px;padding:2px 7px;border-radius:6px;}
.anl-kpi-delta.up{background:rgba(34,197,94,.12);color:#4ade80;}
.anl-kpi-delta.dn{background:rgba(239,68,68,.12);color:#f87171;}
.anl-kpi-delta.nt{background:rgba(148,163,184,.08);color:var(--t3,#94a3b8);}
/* ─── Charts grid ─── */
.anl-charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 14px;}
@media(max-width:720px){.anl-charts{grid-template-columns:1fr;}}
.anl-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:15px;overflow:hidden;transition:box-shadow .2s;}
.anl-card.wide{grid-column:1/-1;}
.anl-card:hover{box-shadow:0 6px 20px rgba(0,0,0,.2);}
.anl-ch{padding:14px 16px 0;display:flex;align-items:center;justify-content:space-between;}
.anl-ch-title{font-size:12.5px;font-weight:800;color:var(--t1,#f1f5f9);display:flex;align-items:center;gap:6px;}
.anl-ch-badge{font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.09);color:var(--t3,#94a3b8);}
.anl-cw{padding:12px 14px 14px;}
/* ─── Bar chart ─── */
.anl-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.anl-bar-lbl{font-size:11px;color:var(--t2,#cbd5e1);font-weight:600;width:60px;text-align:right;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.anl-bar-track{flex:1;height:8px;background:rgba(255,255,255,.06);border-radius:5px;overflow:hidden;}
.anl-bar-fill{height:100%;border-radius:5px;transition:width 1.2s cubic-bezier(.22,1,.36,1);}
.anl-bar-val{font-size:11px;font-weight:800;width:64px;text-align:left;flex-shrink:0;}
/* ─── Line SVG ─── */
.anl-svg{width:100%;overflow:visible;}
.anl-axis{font-size:9px;fill:var(--t3,#64748b);font-family:'Cairo',sans-serif;}
/* ─── Donut ─── */
.anl-donut-wrap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 14px 14px;}
.anl-dl{flex:1;min-width:100px;}
.anl-dl-item{display:flex;align-items:center;gap:7px;margin-bottom:8px;}
.anl-dl-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.anl-dl-name{font-size:11px;font-weight:600;flex:1;color:var(--t2,#cbd5e1);}
.anl-dl-pct{font-size:11px;font-weight:800;}
/* ─── Heatmap ─── */
/* heatmap removed — replaced by day-of-month chart */
/* ─── Top services table ─── */
.anl-tbl{padding:2px 14px 14px;}
.anl-tr{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;margin-bottom:3px;background:rgba(255,255,255,.025);transition:background .15s;}
.anl-tr:hover{background:rgba(99,102,241,.08);}
.anl-tr-rank{width:22px;height:22px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;flex-shrink:0;}
.anl-tr-name{flex:1;font-size:11.5px;font-weight:700;}
.anl-tr-bar{flex:1.2;height:6px;background:rgba(255,255,255,.06);border-radius:4px;overflow:hidden;}
.anl-tr-fill{height:100%;border-radius:4px;}
.anl-tr-cnt{font-size:11px;color:var(--t2);font-weight:700;width:30px;text-align:center;}
.anl-tr-rev{font-size:11px;font-weight:800;width:70px;text-align:left;direction:ltr;}
/* ─── Hour/Day bars ─── */
.anl-hbar-wrap{padding:6px 14px 14px;}
/* ─── Shimmer ─── */
.anl-shim{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:anlsh 1.4s infinite;border-radius:10px;}
@keyframes anlsh{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* ─── Animations ─── */
@keyframes anlup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.anl-fadein{animation:anlup .4s ease both;}
.anl-d1{animation-delay:.05s}.anl-d2{animation-delay:.1s}.anl-d3{animation-delay:.17s}.anl-d4{animation-delay:.24s}
.anl-d5{animation-delay:.31s}.anl-d6{animation-delay:.38s}.anl-d7{animation-delay:.45s}.anl-d8{animation-delay:.52s}
/* ─── Empty ─── */
.anl-empty{text-align:center;padding:40px 20px;}
.anl-empty-ico{font-size:36px;opacity:.4;margin-bottom:10px;}
.anl-empty-txt{font-size:12.5px;font-weight:700;color:var(--t2);}
/* ═══════════════════════════════════════════════════════════ */
/* 🔄 منقول من home.html — Bookings UI */
/* ═══════════════════════════════════════════════════════════ */
/* ─── Root ─── */
#bk-root{direction:rtl;font-family:'Cairo',sans-serif;background:transparent;}
/* ─── Hero ─── */
.bkh{position:relative;overflow:hidden;padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.07);}
.bkh-bg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 80% at 0% 50%,rgba(14,165,233,.12),transparent),radial-gradient(ellipse 50% 60% at 100% 0%,rgba(201,168,76,.07),transparent);}
.bkh-inner{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.bkh-ico{width:46px;height:46px;border-radius:14px;flex-shrink:0;background:linear-gradient(135deg,#0ea5e9,#0284c7);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(14,165,233,.4);}
.bkh-title{font-size:18px;font-weight:900;color:var(--t1,#f4f0e6);}
.bkh-sub{font-size:11.5px;color:var(--t3,#94a3b8);margin-top:3px;font-weight:600;}
.bkh-refresh{margin-right:auto;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.5);transition:all .18s;}
.bkh-refresh:hover{background:rgba(14,165,233,.15);color:#38bdf8;border-color:rgba(14,165,233,.3);}
/* ─── KPIs ─── */
.bk-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:16px 20px 0;}
@media(max-width:600px){.bk-kpis{grid-template-columns:repeat(2,1fr);}}
.bk-kpi{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:13px;padding:12px 13px;transition:border-color .2s;}
.bk-kpi:hover{border-color:rgba(255,255,255,.16);}
.bk-kpi-val{font-size:22px;font-weight:900;line-height:1;color:var(--t1,#f4f0e6);}
.bk-kpi-lbl{font-size:10px;font-weight:700;color:var(--t3,#94a3b8);margin-top:4px;}
.bk-kpi-delta{font-size:9.5px;font-weight:800;margin-top:4px;display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:20px;}
.bk-kpi-delta.up{background:rgba(34,197,94,.12);color:#4ade80;}
.bk-kpi-delta.pend{background:rgba(245,158,11,.12);color:#fbbf24;}
.bk-kpi-delta.done{background:rgba(99,102,241,.12);color:#818cf8;}
.bk-kpi-delta.red{background:rgba(239,68,68,.10);color:#f87171;}
/* ─── Filter bar ─── */
.bk-filterbar{display:flex;align-items:center;gap:8px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.07);flex-wrap:wrap;}
.bk-chip{padding:6px 14px;border-radius:20px;font-size:11.5px;font-weight:700;cursor:pointer;border:1.5px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:var(--t2,#c8bfa8);transition:all .18s;font-family:'Cairo',sans-serif;white-space:nowrap;}
.bk-chip:hover{background:rgba(255,255,255,.08);}
.bk-chip.on{background:rgba(14,165,233,.14);border-color:rgba(14,165,233,.38);color:#38bdf8;}
.bk-chip.on-pend{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.35);color:#fbbf24;}
.bk-chip.on-conf{background:rgba(34,197,94,.12);border-color:rgba(34,197,94,.35);color:#4ade80;}
.bk-chip.on-done{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.35);color:#818cf8;}
.bk-chip.on-canc{background:rgba(239,68,68,.09);border-color:rgba(239,68,68,.28);color:#f87171;}
.bk-search{flex:1;min-width:160px;background:rgba(255,255,255,.05);border:1.5px solid rgba(255,255,255,.09);border-radius:10px;padding:8px 13px;color:var(--t1,#f4f0e6);font-family:'Cairo',sans-serif;font-size:13px;font-weight:600;outline:none;transition:border-color .2s;}
.bk-search:focus{border-color:rgba(14,165,233,.45);}
.bk-view-toggle{display:flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:3px;}
.bk-vtb{width:30px;height:28px;border-radius:6px;border:none;background:transparent;cursor:pointer;color:rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;transition:all .18s;}
.bk-vtb.on{background:rgba(14,165,233,.20);color:#38bdf8;}
.bk-vtb:hover:not(.on){background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);}
/* ─── Grid View ─── */
.bk-grid{padding:14px 16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;}
@media(max-width:700px){.bk-grid{grid-template-columns:1fr;}}
/* ─── Booking Card ─── */
.bk-card{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:16px;
overflow:hidden;transition:box-shadow .22s,transform .22s,border-color .22s;
cursor:pointer;position:relative;
animation:bkCardIn .3s ease both;
}
.bk-card:hover{box-shadow:0 8px 30px rgba(0,0,0,.35);transform:translateY(-3px);border-color:rgba(14,165,233,.28);}
.bk-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--bk-color,rgba(14,165,233,0.5));opacity:.8;}
@keyframes bkCardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.bkc-top{display:flex;align-items:center;gap:10px;padding:12px 14px 10px;}
.bkc-avatar{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:900;flex-shrink:0;overflow:hidden;background:var(--bk-color-bg,rgba(14,165,233,.15));border:1.5px solid var(--bk-color-border,rgba(14,165,233,.3));color:var(--bk-color,#38bdf8);}
.bkc-avatar img,.bk-c.cust .av img{width:100%;height:100%;object-fit:cover;border-radius:inherit;}
.bkc-name{font-size:13px;font-weight:900;color:var(--t1,#f4f0e6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bkc-phone{font-size:10.5px;color:var(--t3,#94a3b8);font-weight:600;direction:ltr;text-align:right;margin-top:2px;}
.bkc-pill{margin-right:auto;padding:4px 10px;border-radius:20px;font-size:9.5px;font-weight:900;border:1px solid;white-space:nowrap;flex-shrink:0;}
.bkc-pill.pending {background:rgba(245,158,11,.11);border-color:rgba(245,158,11,.28);color:#fbbf24;}
.bkc-pill.confirmed {background:rgba(34,197,94,.11); border-color:rgba(34,197,94,.28); color:#4ade80;}
.bkc-pill.done {background:rgba(99,102,241,.11);border-color:rgba(99,102,241,.28);color:#818cf8;}
.bkc-pill.cancelled {background:rgba(239,68,68,.08); border-color:rgba(239,68,68,.22); color:#f87171;}
.bkc-body{padding:0 14px 12px;}
.bkc-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-bottom:10px;}
.bkc-m{background:rgba(255,255,255,.025);border-radius:8px;padding:7px 9px;}
.bkc-mk{font-size:9px;font-weight:800;color:var(--t3,#94a3b8);letter-spacing:.4px;text-transform:uppercase;margin-bottom:2px;}
.bkc-mv{font-size:11.5px;font-weight:800;color:var(--t1,#f4f0e6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bkc-date-row{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;color:#38bdf8;margin-bottom:10px;padding:7px 9px;background:rgba(14,165,233,.08);border-radius:9px;border:1px solid rgba(14,165,233,.18);}
.bkc-price-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.bkc-price{font-size:16px;font-weight:900;color:var(--gold,#c9a84c);}
.bkc-pay-badge{font-size:9px;font-weight:800;padding:3px 8px;border-radius:20px;}
.bkc-pay-badge.paid {background:rgba(34,197,94,.12);color:#4ade80;border:1px solid rgba(34,197,94,.28);}
.bkc-pay-badge.unpaid {background:rgba(245,158,11,.12);color:#fbbf24;border:1px solid rgba(245,158,11,.28);}
.bkc-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;}
.bkc-btn{flex:1 1 auto;min-width:78px;white-space:nowrap;padding:8px 10px;border-radius:9px;font-size:10.5px;font-weight:800;cursor:pointer;font-family:'Cairo',sans-serif;border:1px solid;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .18s;}
.bkc-btn.confirm{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.28);color:#4ade80;}
.bkc-btn.confirm:hover{background:rgba(34,197,94,.22);}
.bkc-btn.convert{background:rgba(201,168,76,.10);border-color:rgba(201,168,76,.30);color:#d4af37;}
.bkc-btn.convert:hover{background:rgba(201,168,76,.22);}
.bkc-btn.ticket{background:rgba(99,102,241,.10);border-color:rgba(99,102,241,.28);color:#818cf8;}
.bkc-btn.ticket:hover{background:rgba(99,102,241,.22);}
.bkc-btn.cancel{flex:0 0 auto;min-width:0;padding:8px 11px;background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.20);color:#f87171;}
.bkc-btn.cancel:hover{background:rgba(239,68,68,.17);}
/* ─── List View ─── */
.bk-list{padding:10px 16px;display:flex;flex-direction:column;gap:7px;}
.bkl-row{
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
border-radius:12px;padding:11px 14px;
display:flex;align-items:center;gap:11px;
cursor:pointer;transition:all .18s;
border-right:3px solid var(--bk-color,rgba(14,165,233,.5));
animation:bkCardIn .25s ease both;
}
.bkl-row:hover{background:rgba(255,255,255,.07);border-color:rgba(14,165,233,.28);}
.bkl-av{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;flex-shrink:0;background:var(--bk-color-bg);color:var(--bk-color);}
.bkl-main{flex:1;min-width:0;}
.bkl-name{font-size:12.5px;font-weight:800;color:var(--t1,#f4f0e6);}
.bkl-sub{font-size:10.5px;color:var(--t3,#94a3b8);font-weight:600;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bkl-right{text-align:left;flex-shrink:0;}
.bkl-date{font-size:11px;font-weight:800;color:#38bdf8;}
.bkl-price{font-size:12px;font-weight:900;color:var(--gold,#c9a84c);margin-top:2px;}
/* ─── Empty ─── */
.bk-empty{text-align:center;padding:60px 20px;}
.bk-empty-ico{font-size:48px;opacity:.4;margin-bottom:14px;}
.bk-empty-title{font-size:14px;font-weight:800;color:var(--t2,#c8bfa8);}
.bk-empty-sub{font-size:12px;color:var(--t3,#94a3b8);margin-top:5px;font-weight:600;line-height:1.6;}
/* ─── Shimmer ─── */
.bk-shim{background:linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);background-size:200% 100%;animation:bksh 1.4s infinite;border-radius:12px;}
@keyframes bksh{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* ─── Toast notification ─── */
.bk-toast{
position:fixed;bottom:80px;right:20px;z-index:99999;
max-width:320px;min-width:240px;
background:#0d1117;border:1px solid rgba(14,165,233,.35);
border-radius:14px;
box-shadow:0 8px 32px rgba(0,0,0,.6),0 0 0 1px rgba(14,165,233,.15);
overflow:hidden;
animation:bkToastIn .4s cubic-bezier(.34,1.56,.64,1);
cursor:pointer;
}
@keyframes bkToastIn{from{opacity:0;transform:translateX(100%) scale(.9);}to{opacity:1;transform:translateX(0) scale(1);}}
@keyframes bkToastOut{from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(110%);}}
.bk-toast-bar{height:3px;background:linear-gradient(90deg,#0ea5e9,#38bdf8);animation:bkToastBar 5s linear forwards;}
@keyframes bkToastBar{from{width:100%}to{width:0%}}
.bk-toast-body{display:flex;align-items:center;gap:11px;padding:13px 15px;}
.bk-toast-ico{width:36px;height:36px;border-radius:10px;background:rgba(14,165,233,.15);border:1px solid rgba(14,165,233,.3);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.bk-toast-title{font-size:12.5px;font-weight:900;color:#f4f0e6;font-family:'Cairo',sans-serif;}
.bk-toast-sub{font-size:10.5px;color:rgba(255,255,255,.45);font-weight:600;margin-top:2px;font-family:'Cairo',sans-serif;}
.bk-toast-action{font-size:10px;font-weight:800;color:#38bdf8;margin-top:4px;font-family:'Cairo',sans-serif;}
/* ═══════════════════════════════════════════════════════════════ */
/* 📱 قائمة الهيدر المنبثقة — انبثاق فاخر ساحر */
/* ═══════════════════════════════════════════════════════════════ */
/* زر القائمة (مخفي افتراضياً — يظهر على الجوال فقط) */
.hdr-menu-trigger{
display:flex;
position:relative;
width:44px;height:44px;
align-items:center;justify-content:center;
background:linear-gradient(135deg, rgba(201,168,76,.16), rgba(201,168,76,.06));
border:1px solid rgba(201,168,76,.3);
color:#d4af6a;
border-radius:12px;
cursor:pointer;
transition:all .28s cubic-bezier(.34,1.56,.64,1);
flex-shrink:0;
-webkit-tap-highlight-color:transparent;
}
.hdr-menu-trigger:hover{
background:linear-gradient(135deg, rgba(201,168,76,.26), rgba(201,168,76,.1));
transform:translateY(-1px);
}
.hdr-menu-trigger.on{
background:linear-gradient(135deg, rgba(201,168,76,.32), rgba(201,168,76,.14));
border-color:rgba(201,168,76,.5);
color:#e6c478;
transform:scale(.96);
}
.hdr-menu-trigger.on svg{ transform:rotate(90deg); }
.hdr-menu-trigger svg{ transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.hdr-menu-dot{
position:absolute;top:8px;right:8px;
width:8px;height:8px;border-radius:50%;
background:#ef4444;
box-shadow:0 0 0 2px rgba(10,8,0,.9), 0 0 10px rgba(239,68,68,.8);
animation:hdrDotPulse 1.8s ease-in-out infinite;
}
@keyframes hdrDotPulse{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.55;transform:scale(1.25);} }
/* على سطح المكتب: الأزرار ظاهرة بشكل طبيعي، زر القائمة مخفي */
.hdr-actions{
position:absolute;
top:calc(100% + 14px);
left:0;
display:flex;
flex-direction:row;
align-items:center;
gap:10px;
padding:12px 14px;
background:linear-gradient(155deg, rgba(40,32,12,.72), rgba(20,15,4,.82));
border:1px solid rgba(201,168,76,.25);
border-radius:20px;
box-shadow:
0 24px 60px rgba(0,0,0,.55),
0 6px 22px rgba(201,168,76,.14),
inset 0 1px 0 rgba(255,255,255,.08);
backdrop-filter:blur(28px) saturate(1.6);
-webkit-backdrop-filter:blur(28px) saturate(1.6);
z-index:200;
opacity:0;
visibility:hidden;
transform:translateY(-16px) scale(.9);
transform-origin:top left;
pointer-events:none;
transition:opacity .32s ease, transform .42s cubic-bezier(.34,1.56,.64,1), visibility .32s;
white-space:nowrap;
}
.hdr-actions.hdr-actions-open{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
pointer-events:auto;
}
/* سهم زجاجي زخرفي */
.hdr-actions.hdr-actions-open::before{
content:'';
position:absolute;top:-7px;left:20px;
width:15px;height:15px;
background:linear-gradient(135deg, rgba(40,32,12,.82), rgba(40,32,12,.82));
border-top:1px solid rgba(201,168,76,.25);
border-left:1px solid rgba(201,168,76,.25);
transform:rotate(45deg);
backdrop-filter:blur(28px);
-webkit-backdrop-filter:blur(28px);
}
/* أيقونات زجاجية ملوّنة فاخرة (كل زر بلونه) */
.hdr-actions > button{
width:48px !important;
height:48px !important;
border-radius:15px !important;
margin:0 !important;
padding:0 !important;
flex-shrink:0;
display:flex !important;
align-items:center !important;
justify-content:center !important;
position:relative;
overflow:visible;
transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s !important;
}
.hdr-actions > button::after{ display:none !important; content:none !important; }
.hdr-actions > button svg{ width:21px; height:21px; position:relative; z-index:1; }
/* لمعان زجاجي علوي */
.hdr-actions > button::before{
content:'';
position:absolute;top:0;left:0;right:0;height:50%;
background:linear-gradient(180deg, rgba(255,255,255,.16), transparent);
border-radius:15px 15px 50% 50%;
pointer-events:none; z-index:1;
}
.hdr-actions > button:hover{ transform:translateY(-3px) scale(1.07) !important; }
.hdr-actions > button:active{ transform:translateY(-1px) scale(1.02) !important; }
/* ── ألوان كل زر (مطابقة لأيقونات كارد العميل) ── */
/* مشاركة رابط الحجز — أزرق سماوي */
#hdr-booking-link-btn{
background:rgba(14,165,233,.12) !important;
border:1px solid rgba(14,165,233,.35) !important;
color:#38bdf8 !important;
box-shadow:0 0 16px rgba(14,165,233,.22), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
#hdr-booking-link-btn svg{ color:#38bdf8 !important; }
#hdr-booking-link-btn:hover{ box-shadow:0 6px 22px rgba(14,165,233,.4), inset 0 1px 0 rgba(255,255,255,.2) !important; }
/* التقرير الفني — أخضر */
.hdr-btn-inspection{
background:rgba(16,185,129,.12) !important;
border:1px solid rgba(16,185,129,.35) !important;
color:#34d399 !important;
box-shadow:0 0 16px rgba(16,185,129,.22), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.hdr-btn-inspection svg{ color:#34d399 !important; }
.hdr-btn-inspection:hover{ box-shadow:0 6px 22px rgba(16,185,129,.4), inset 0 1px 0 rgba(255,255,255,.2) !important; }
/* الإشعارات — برتقالي ذهبي */
.notif-bell{
background:rgba(168,85,247,.13) !important;
border:1px solid rgba(168,85,247,.38) !important;
color:#c084fc !important;
box-shadow:0 0 16px rgba(168,85,247,.25), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.notif-bell svg{ color:#c084fc !important; }
.notif-bell:hover{ box-shadow:0 6px 22px rgba(168,85,247,.45), inset 0 1px 0 rgba(255,255,255,.2) !important; }
/* اهتزاز عند إشعار جديد */
@keyframes notifShake{
0%,100%{transform:rotate(0);}
10%,30%,50%,70%{transform:rotate(-12deg);}
20%,40%,60%,80%{transform:rotate(12deg);}
}
.notif-bell.has-unread svg{ animation:notifShake .9s cubic-bezier(.36,.07,.19,.97) infinite; transform-origin:top center; }
.notif-bell.has-unread{ box-shadow:0 0 20px rgba(168,85,247,.5), inset 0 1px 0 rgba(255,255,255,.2) !important; }
/* قفل الشاشة — بنفسجي */
.lock-btn{
background:rgba(168,85,247,.12) !important;
border:1px solid rgba(168,85,247,.35) !important;
color:#c084fc !important;
box-shadow:0 0 16px rgba(168,85,247,.22), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.lock-btn svg{ color:#c084fc !important; }
.lock-btn:hover{ box-shadow:0 6px 22px rgba(168,85,247,.4), inset 0 1px 0 rgba(255,255,255,.2) !important; }
/* إخفاء المبالغ — أزرق */
.dhp-money-toggle{
background:rgba(59,130,246,.12) !important;
border:1px solid rgba(59,130,246,.35) !important;
color:#60a5fa !important;
box-shadow:0 0 16px rgba(59,130,246,.22), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.dhp-money-toggle svg{ color:#60a5fa !important; }
.dhp-money-toggle:hover{ box-shadow:0 6px 22px rgba(59,130,246,.4), inset 0 1px 0 rgba(255,255,255,.2) !important; }
/* دخول متتالٍ أفقي ساحر */
.hdr-actions.hdr-actions-open > *{
animation:hdrItemIn .45s cubic-bezier(.34,1.56,.64,1) backwards;
}
.hdr-actions.hdr-actions-open > *:nth-child(1){ animation-delay:.05s; }
.hdr-actions.hdr-actions-open > *:nth-child(2){ animation-delay:.11s; }
.hdr-actions.hdr-actions-open > *:nth-child(3){ animation-delay:.17s; }
.hdr-actions.hdr-actions-open > *:nth-child(4){ animation-delay:.23s; }
.hdr-actions.hdr-actions-open > *:nth-child(5){ animation-delay:.29s; }
/* إخفاء العناصر الزخرفية الزائدة داخل أزرار القائمة */
.hdr-actions .notif-bell-pulse{ display:none; }
.hdr-actions .notif-bell-badge{
position:absolute !important;
top:-4px !important; right:-4px !important; left:auto !important;
min-width:16px;
}
/* الشاشات الضيقة: أيقونات أفقية أصغر (تبقى أفقية دائماً) */
@media (max-width: 480px){
.hdr-actions{ gap:7px; padding:10px 11px; border-radius:17px; }
.hdr-actions > button{
width:42px !important;
height:42px !important;
border-radius:13px !important;
}
.hdr-actions > button svg{ width:18px; height:18px; }
}
@keyframes hdrItemIn{
from{ opacity:0; transform:translateX(-12px); }
to{ opacity:1; transform:translateX(0); }
}
/* ═══════════════════════════════════════════════════════════════ */
/* ✨ تطوير السايد بار — خفيف · مرن · راقٍ · ساحر (2026) */
/* ═══════════════════════════════════════════════════════════════ */
/* الحاوية: خلفية زجاجية عميقة + حد ذهبي ناعم متدرّج */
.dash-sb{
background:
radial-gradient(120% 60% at 100% 0%, rgba(201,168,76,.06), transparent 60%),
linear-gradient(185deg, #0f1117 0%, #0a0b10 100%) !important;
border-left:1px solid transparent !important;
border-image:linear-gradient(180deg, rgba(201,168,76,.3), rgba(201,168,76,.04) 40%, transparent) 1 !important;
backdrop-filter:blur(12px) !important;
-webkit-backdrop-filter:blur(12px) !important;
scrollbar-width:thin;
scrollbar-color:rgba(201,168,76,.25) transparent;
}
.dash-sb::-webkit-scrollbar{width:5px;}
.dash-sb::-webkit-scrollbar-thumb{background:rgba(201,168,76,.22);border-radius:3px;}
.dash-sb::-webkit-scrollbar-thumb:hover{background:rgba(201,168,76,.4);}
/* بطاقة اليوم: زجاجية فاخرة */
.sb-day{
margin:12px 12px 6px !important;
padding:14px 16px !important;
background:linear-gradient(135deg, rgba(201,168,76,.1), rgba(201,168,76,.02)) !important;
border:1px solid rgba(201,168,76,.16) !important;
border-radius:16px !important;
position:relative;
overflow:hidden;
}
.sb-day::before{
content:'';position:absolute;top:0;left:0;right:0;height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.5), transparent);
}
.sb-day-lbl{font-size:9.5px !important;letter-spacing:.8px !important;text-transform:uppercase;color:rgba(201,168,76,.7) !important;font-weight:800 !important;}
.sb-day-val{font-size:14px !important;font-weight:900 !important;color:#f4f0e6 !important;margin-top:3px !important;}
.sb-day-stats{font-size:10.5px !important;color:rgba(244,240,230,.55) !important;margin-top:2px !important;}
/* عناوين الأقسام: أخف وأرقى */
.sb-section-label{
font-size:9px !important;
letter-spacing:1px !important;
color:rgba(201,168,76,.45) !important;
padding:14px 16px 6px !important;
font-weight:800 !important;
}
/* عناصر التنقّل: خفيفة ومرنة */
.sb-acts, .dash-sb nav{ padding:0 10px !important; }
.sb-nav-item{
gap:11px !important;
padding:9px 12px !important;
border-radius:13px !important;
font-size:12.5px !important;
font-weight:600 !important;
margin-bottom:2px !important;
border:1px solid transparent !important;
position:relative;
transition:background .22s ease, color .22s ease, transform .22s cubic-bezier(.34,1.56,.64,1) !important;
}
/* أيقونة: حاوية زجاجية ناعمة */
.sb-nav-item .ni{
width:30px !important;height:30px !important;
display:flex;align-items:center;justify-content:center;
border-radius:9px !important;
background:rgba(255,255,255,.03) !important;
border:1px solid rgba(255,255,255,.05) !important;
flex-shrink:0;
transition:all .22s ease !important;
}
.sb-nav-item .ni svg{width:16px;height:16px;}
/* hover: انزلاق ناعم + توهج خفيف */
.sb-nav-item:hover{
background:rgba(255,255,255,.035) !important;
color:#f4f0e6 !important;
transform:translateX(-3px) !important;
}
.sb-nav-item:hover .ni{
background:linear-gradient(135deg, rgba(201,168,76,.2), rgba(201,168,76,.05)) !important;
border-color:rgba(201,168,76,.3) !important;
}
/* النشط: مؤشر ساحر بشريط جانبي متوهّج */
.sb-nav-item.on{
background:linear-gradient(90deg, rgba(201,168,76,.14), rgba(201,168,76,.03)) !important;
color:#f4f0e6 !important;
border-color:rgba(201,168,76,.2) !important;
}
.sb-nav-item.on::before{
content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);
width:3px;height:60%;border-radius:3px;
background:linear-gradient(180deg, #e6c478, #C9A84C);
box-shadow:0 0 10px rgba(201,168,76,.7);
}
.sb-nav-item.on .ni{
background:linear-gradient(135deg, #C9A84C, #9F7E1C) !important;
border-color:rgba(201,168,76,.6) !important;
box-shadow:0 4px 14px rgba(201,168,76,.4) !important;
}
.sb-nav-item.on .ni svg{color:#fff !important;}
/* اللوحة السفلية: زجاجية */
.sb-bottom-panel{
margin:8px 10px 12px !important;
padding:12px !important;
background:rgba(255,255,255,.02) !important;
border:1px solid rgba(255,255,255,.05) !important;
border-radius:16px !important;
backdrop-filter:blur(8px);
}
.sb-cloud-status{
border-radius:12px !important;
}
.sb-icon-btn{
border-radius:11px !important;
transition:all .2s ease !important;
}
/* توحيد حجم أيقونات أزرار الأسفل */
.sb-icon-btn svg{ width:16px;height:16px;flex-shrink:0; }
.sb-icon-btn:hover{ transform:translateY(-2px) !important; }
/* الوضع الفاتح: خلفية فاتحة أنيقة */
html[data-theme='light'] .dash-sb{
background:
radial-gradient(120% 60% at 100% 0%, rgba(201,168,76,.08), transparent 60%),
linear-gradient(185deg, #fffdf7 0%, #faf6ec 100%) !important;
}
html[data-theme='light'] .sb-day-val{ color:#23201B !important; }
html[data-theme='light'] .sb-day-stats{ color:rgba(20,20,20,.55) !important; }
html[data-theme='light'] .sb-nav-item{ color:#5a5446 !important; }
html[data-theme='light'] .sb-nav-item:hover{ background:rgba(201,168,76,.07) !important; color:#23201B !important; }
html[data-theme='light'] .sb-nav-item.on{ color:#23201B !important; }
html[data-theme='light'] .sb-nav-item .ni{ background:rgba(0,0,0,.03) !important; border-color:rgba(0,0,0,.06) !important; }
html[data-theme='light'] .sb-bottom-panel{ background:rgba(0,0,0,.02) !important; border-color:rgba(0,0,0,.06) !important; }
/* ═══ تمييز خفيف منسجم لتبويب الرئيسية ═══ */
.sb-nav-home{
background:linear-gradient(90deg, rgba(201,168,76,.1), rgba(201,168,76,.02)) !important;
border-color:rgba(201,168,76,.18) !important;
margin-bottom:8px !important;
}
.sb-nav-home .ni{
background:linear-gradient(135deg, rgba(201,168,76,.25), rgba(201,168,76,.08)) !important;
border-color:rgba(201,168,76,.35) !important;
}
.sb-nav-home .ni svg{ color:#e6c478 !important; }
.sb-nav-home .nl{ color:#f4f0e6 !important; font-weight:800 !important; }
.sb-nav-home:hover{
background:linear-gradient(90deg, rgba(201,168,76,.16), rgba(201,168,76,.04)) !important;
}
html[data-theme='light'] .sb-nav-home .nl{ color:#23201B !important; }
/* ═══ 🐺 شعار الذئب الذهبي الفاخر — شاشة البداية ═══ */
.spl-brand-wolf{
display:flex;align-items:center;justify-content:center;
margin:18px auto 8px;
position:relative;
animation:wolfReveal 1s cubic-bezier(.16,1,.3,1) backwards;
}
.spl-wolf-img{
width:128px;height:128px;
border-radius:50%;
object-fit:cover;
box-shadow:
0 0 0 1px rgba(201,168,76,.3),
0 0 30px rgba(201,168,76,.35),
0 8px 40px rgba(0,0,0,.5);
animation:wolfGlow 3s ease-in-out infinite;
}
@keyframes wolfReveal{
from{ opacity:0; transform:scale(.7) translateY(10px); filter:blur(8px); }
to{ opacity:1; transform:scale(1) translateY(0); filter:blur(0); }
}
@keyframes wolfGlow{
0%,100%{ box-shadow:0 0 0 1px rgba(201,168,76,.3), 0 0 30px rgba(201,168,76,.35), 0 8px 40px rgba(0,0,0,.5); }
50%{ box-shadow:0 0 0 1px rgba(201,168,76,.5), 0 0 48px rgba(201,168,76,.55), 0 8px 40px rgba(0,0,0,.5); }
}
/* 🐺 عرض شعار الذئب بشكل صحيح داخل حاويات الشعار */
.lh-logo img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
border-radius:inherit !important;
display:block;
}
/* شعار splash دائري نظيف بلا قصّ للحواف */
.spl-wolf-img{
object-fit:cover;
background:#0a0a0a;
}
/* ═══ 🐺 لمسة إبداعية فاخرة لشعار النظام (شاشة الدخول + البداية) ═══ */
/* الشعار دائري كامل متناسق مع دائرة OMAR، بلا مربّع يقصّه */
.lh-logo{
border-radius:50% !important;
background:radial-gradient(circle at 50% 40%, #1a1408, #0a0805) !important;
border:2px solid rgba(201,168,76,.45) !important;
padding:0 !important;
box-shadow:
0 0 0 1px rgba(201,168,76,.2),
0 12px 40px rgba(0,0,0,.6),
inset 0 0 24px rgba(201,168,76,.12) !important;
}
.lh-logo img{
width:100% !important;height:100% !important;
object-fit:cover !important;
border-radius:50% !important;
}
/* الحلقة المدارية الخارجية — دائرية متوهّجة */
.lh-logo-ring{
inset:-10px !important;
border:1.5px solid transparent !important;
border-top-color:rgba(201,168,76,.7) !important;
border-right-color:rgba(201,168,76,.25) !important;
border-radius:50% !important;
}
/* 🆕 حلقة ثانية معاكسة + نقطتان مداريتان (لمسة سحرية) */
.lh-logo-wrap::before{
content:'';
position:absolute;
inset:-18px;
border:1px solid transparent;
border-bottom-color:rgba(201,168,76,.4);
border-left-color:rgba(201,168,76,.15);
border-radius:50%;
animation:lhRingSpin 9s linear infinite reverse;
z-index:1;
}
.lh-logo-wrap::after{
content:'';
position:absolute;
top:-10px;left:50%;
width:7px;height:7px;
margin-left:-3.5px;
background:radial-gradient(circle,#f5d97a,#C9A84C);
border-radius:50%;
box-shadow:0 0 10px rgba(201,168,76,.9);
transform-origin:3.5px 54px;
animation:lhOrbit 9s linear infinite;
z-index:3;
}
@keyframes lhOrbit{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
/* شعار البداية — نفس اللمسة الدائرية الفاخرة + مدار */
.spl-brand-wolf{
width:140px;height:140px;
margin:20px auto 10px;
}
.spl-wolf-img{
width:140px !important;height:140px !important;
border-radius:50%;
border:2px solid rgba(201,168,76,.4);
background:radial-gradient(circle at 50% 40%, #1a1408, #0a0805);
}
.spl-brand-wolf::before{
content:'';
position:absolute;
inset:-12px;
border:1.5px solid transparent;
border-top-color:rgba(201,168,76,.6);
border-right-color:rgba(201,168,76,.2);
border-radius:50%;
animation:lhRingSpin 11s linear infinite;
}
.spl-brand-wolf::after{
content:'';
position:absolute;
inset:-20px;
border:1px solid transparent;
border-bottom-color:rgba(201,168,76,.35);
border-radius:50%;
animation:lhRingSpin 8s linear infinite reverse;
}
/* ═══ 🎨 الفوتر العام الفاخر ═══ */
.ftr-wrap{
display:flex;align-items:center;justify-content:space-between;
gap:16px;flex-wrap:wrap;
padding:16px 22px;
margin:18px auto 0;
max-width:760px;
background:linear-gradient(135deg, rgba(201,168,76,.06), rgba(201,168,76,.01));
border:1px solid rgba(201,168,76,.14);
border-radius:16px;
}
.ftr-main{ display:flex;align-items:center;gap:13px;flex:1;min-width:200px; }
.ftr-logo{
width:42px;height:42px;border-radius:50%;flex-shrink:0;
border:1.5px solid rgba(201,168,76,.3);
box-shadow:0 0 14px rgba(201,168,76,.2);
}
.ftr-text{ display:flex;flex-direction:column;gap:3px;text-align:right; }
.ftr-line1{ font-size:13px;font-weight:800;color:var(--t1,#f0eee8); }
.ftr-sys{ color:#C9A84C; }
.ftr-sep{ margin:0 6px;color:rgba(201,168,76,.5); }
.ftr-owner{ color:var(--t2,#cbd5e1);font-weight:600; }
.ftr-line2{ font-size:10.5px;color:var(--t3,#94a3b8);font-weight:500; }
.ftr-phone{ color:#C9A84C;text-decoration:none;font-weight:700; }
.ftr-phone:hover{ text-decoration:underline; }
.ftr-social{ display:flex;gap:9px;flex-shrink:0; }
.ftr-social-link{
width:34px;height:34px;border-radius:10px;
display:flex;align-items:center;justify-content:center;
background:rgba(201,168,76,.1);
border:1px solid rgba(201,168,76,.2);
color:#C9A84C;
transition:all .22s ease;
}
.ftr-social-link:hover{
background:linear-gradient(135deg,#C9A84C,#9F7E1C);
color:#fff;
transform:translateY(-2px);
box-shadow:0 6px 16px rgba(201,168,76,.35);
}
html[data-theme='light'] .ftr-line1{ color:#23201B; }
html[data-theme='light'] .ftr-owner{ color:#444; }
/* ═══ 🎨 الفوتر الذكي — دائماً أسفل الصفحة (لا يتأثر بالمحتوى) ═══ */
/* dash-content يملأ الارتفاع الكامل */
.dash-content{
display:flex !important;
flex-direction:column !important;
}
/* الـ pane النشط يتمدّد ليملأ المساحة المتاحة (دون min-height يسبب تداخلاً) */
.dash-pane.on{
display:flex !important;
flex-direction:column !important;
flex:1 0 auto !important;
min-height:100%;
}
/* الفوتر يُدفع للأسفل دائماً عبر margin-top:auto */
.omar-footer-converted,
[data-omar-footer]{
margin-top:auto !important;
width:100%;
padding-top:20px;
}
/* ═══ ✨ لمسة سحرية للفوتر ═══ */
.ftr-wrap{
position:relative;
overflow:hidden;
}
/* خط ذهبي متوهّج علوي */
.ftr-wrap::before{
content:'';
position:absolute;top:0;left:10%;right:10%;height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.6), transparent);
}
/* الشعار يتوهّج برفق */
.ftr-logo{
animation:ftrLogoPulse 3.5s ease-in-out infinite;
}
@keyframes ftrLogoPulse{
0%,100%{ box-shadow:0 0 14px rgba(201,168,76,.2); }
50%{ box-shadow:0 0 22px rgba(201,168,76,.4); }
}
/* أيقونات التواصل — لمعة سحرية عند المرور */
.ftr-social-link{
position:relative;
overflow:hidden;
}
.ftr-social-link::before{
content:'';
position:absolute;top:0;left:-100%;width:100%;height:100%;
background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
transition:left .5s ease;
}
.ftr-social-link:hover::before{ left:100%; }
.ftr-social-link svg{ position:relative;z-index:1; }
/* ظهور أنيق متدرّج للأيقونات */
.ftr-social-link{
animation:ftrSocialIn .5s cubic-bezier(.16,1,.3,1) backwards;
}
.ftr-social-link:nth-child(1){ animation-delay:.05s; }
.ftr-social-link:nth-child(2){ animation-delay:.12s; }
.ftr-social-link:nth-child(3){ animation-delay:.19s; }
.ftr-social-link:nth-child(4){ animation-delay:.26s; }
@keyframes ftrSocialIn{
from{ opacity:0; transform:translateY(8px) scale(.8); }
to{ opacity:1; transform:translateY(0) scale(1); }
}
/* ═══ إصلاح تداخل بطاقة اليوم مع الرئيسية ═══ */
.sb-day{
margin:12px 12px 14px !important;
padding:14px 16px !important;
position:relative;
z-index:1;
clear:both;
}
.sb-acts{
position:relative;
z-index:1;
}
.sb-nav-home{
margin-top:2px !important;
margin-bottom:10px !important;
}
/* فاصل أنيق بعد الرئيسية */
.sb-nav-home::after{
content:'';
position:absolute;
bottom:-6px;left:12px;right:12px;height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.2), transparent);
}
/* ═══ أزرار أسفل السايد بار عند الطي — متناسقة تماماً مع باقي الأيقونات ═══ */
.dash-sb.is-collapsed .sb-action-row{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:8px !important;
grid-template-columns:none !important;
}
.dash-sb.is-collapsed .sb-icon-btn{
width:38px !important;
height:38px !important;
min-width:38px !important;
max-width:38px !important;
padding:0 !important;
margin:0 !important;
flex-direction:row !important;
justify-content:center !important;
align-items:center !important;
border-radius:10px !important;
gap:0 !important;
}
.dash-sb.is-collapsed .sb-icon-btn span{ display:none !important; }
.dash-sb.is-collapsed .sb-icon-btn svg{
width:18px !important;
height:18px !important;
margin:0 !important;
}
/* الوضع الليلي: نُظهر svg واحد فقط (المعروض) */
.dash-sb.is-collapsed .sb-theme-btn{ position:relative; }
/* ═══════════════════════════════════════════════════════════ */
/* ✨ شاشة Splash فاخرة ساحرة (2026) */
/* ═══════════════════════════════════════════════════════════ */
#s-splash{
position:fixed;inset:0;z-index:9999;
display:flex;align-items:center;justify-content:center;
overflow:hidden;
background:#06070a;
}
.spl2-bg{
position:absolute;inset:0;
background:
radial-gradient(ellipse 80% 60% at 50% 35%, rgba(201,168,76,.1), transparent 70%),
radial-gradient(ellipse 60% 50% at 50% 100%, rgba(159,126,28,.08), transparent 70%),
linear-gradient(180deg, #0a0b10 0%, #06070a 60%, #0a0805 100%);
}
.spl2-glow{
position:absolute;top:38%;left:50%;
width:480px;height:480px;
transform:translate(-50%,-50%);
background:radial-gradient(circle, rgba(201,168,76,.18), transparent 65%);
filter:blur(30px);
animation:spl2GlowPulse 4s ease-in-out infinite;
}
@keyframes spl2GlowPulse{
0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(1); }
50%{ opacity:1; transform:translate(-50%,-50%) scale(1.12); }
}
/* جسيمات ذهبية */
.spl2-particles{ position:absolute;inset:0;pointer-events:none; }
.spl2-particles span{
position:absolute;
width:3px;height:3px;border-radius:50%;
background:rgba(201,168,76,.7);
box-shadow:0 0 6px rgba(201,168,76,.9);
animation:spl2Float linear infinite;
bottom:-10px;
}
.spl2-particles span:nth-child(1){ left:12%; animation-duration:9s; animation-delay:0s; }
.spl2-particles span:nth-child(2){ left:22%; animation-duration:11s; animation-delay:1.5s; }
.spl2-particles span:nth-child(3){ left:33%; animation-duration:8s; animation-delay:.5s; }
.spl2-particles span:nth-child(4){ left:44%; animation-duration:13s; animation-delay:2s; }
.spl2-particles span:nth-child(5){ left:55%; animation-duration:10s; animation-delay:1s; }
.spl2-particles span:nth-child(6){ left:63%; animation-duration:12s; animation-delay:3s; }
.spl2-particles span:nth-child(7){ left:71%; animation-duration:9s; animation-delay:.8s; }
.spl2-particles span:nth-child(8){ left:78%; animation-duration:14s; animation-delay:2.5s; }
.spl2-particles span:nth-child(9){ left:85%; animation-duration:10s; animation-delay:1.2s; }
.spl2-particles span:nth-child(10){ left:91%; animation-duration:11s; animation-delay:3.5s; }
.spl2-particles span:nth-child(11){ left:6%; animation-duration:12s; animation-delay:2.2s; }
.spl2-particles span:nth-child(12){ left:48%; animation-duration:15s; animation-delay:4s; }
@keyframes spl2Float{
0%{ transform:translateY(0) scale(1); opacity:0; }
10%{ opacity:1; }
90%{ opacity:.8; }
100%{ transform:translateY(-105vh) scale(.4); opacity:0; }
}
.spl2-content{
position:relative;z-index:2;
display:flex;flex-direction:column;align-items:center;
text-align:center;
animation:spl2ContentIn 1s cubic-bezier(.16,1,.3,1);
}
@keyframes spl2ContentIn{
from{ opacity:0; transform:translateY(20px); }
to{ opacity:1; transform:translateY(0); }
}
/* مسرح الشعار */
.spl2-logo-stage{
position:relative;
width:180px;height:180px;
margin-bottom:28px;
display:flex;align-items:center;justify-content:center;
}
.spl2-orbit{
position:absolute;border-radius:50%;
border:1px solid transparent;
}
.spl2-orbit-1{
inset:0;
border-top-color:rgba(201,168,76,.6);
border-right-color:rgba(201,168,76,.15);
animation:spl2Spin 6s linear infinite;
}
.spl2-orbit-2{
inset:14px;
border-bottom-color:rgba(201,168,76,.45);
border-left-color:rgba(201,168,76,.1);
animation:spl2Spin 4.5s linear infinite reverse;
}
@keyframes spl2Spin{ to{ transform:rotate(360deg); } }
/* نقاط مدارية */
.spl2-orbit-dot{
position:absolute;width:8px;height:8px;border-radius:50%;
background:radial-gradient(circle,#f5d97a,#C9A84C);
box-shadow:0 0 12px rgba(201,168,76,.9);
}
.spl2-orbit-dot-1{
top:-4px;left:50%;margin-left:-4px;
transform-origin:4px 94px;
animation:spl2Spin 6s linear infinite;
}
.spl2-orbit-dot-2{
bottom:10px;left:50%;margin-left:-3px;
width:6px;height:6px;
transform-origin:3px -76px;
animation:spl2Spin 4.5s linear infinite reverse;
}
.spl2-logo-halo{
position:absolute;inset:18px;border-radius:50%;
background:radial-gradient(circle, rgba(201,168,76,.3), transparent 70%);
filter:blur(12px);
animation:spl2GlowPulse 3s ease-in-out infinite;
}
.spl2-logo-frame{
position:relative;z-index:2;
width:130px;height:130px;border-radius:50%;
overflow:hidden;
border:2px solid rgba(201,168,76,.5);
box-shadow:
0 0 0 1px rgba(201,168,76,.2),
0 12px 50px rgba(0,0,0,.6),
inset 0 0 30px rgba(201,168,76,.1);
animation:spl2LogoIn 1.1s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes spl2LogoIn{
from{ opacity:0; transform:scale(.6); filter:blur(10px); }
to{ opacity:1; transform:scale(1); filter:blur(0); }
}
.spl2-logo-img{
width:100%;height:100%;object-fit:cover;
background:#0a0805;
}
/* الاسم */
.spl2-name{
font-size:34px;font-weight:900;
background:linear-gradient(135deg, #f5d97a 0%, #C9A84C 50%, #9F7E1C 100%);
-webkit-background-clip:text;background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing:1px;
animation:spl2NameIn 1s cubic-bezier(.16,1,.3,1) .2s backwards;
}
@keyframes spl2NameIn{
from{ opacity:0; transform:translateY(12px); letter-spacing:8px; }
to{ opacity:1; transform:translateY(0); letter-spacing:1px; }
}
.spl2-tagline{
font-size:13px;color:rgba(244,240,230,.6);font-weight:500;
margin-top:8px;letter-spacing:.5px;
animation:spl2FadeIn 1s ease .5s backwards;
}
@keyframes spl2FadeIn{ from{opacity:0;} to{opacity:1;} }
/* سطر صاحب النظام */
.spl2-owner{
display:flex;align-items:center;gap:9px;
margin-top:18px;
font-size:11.5px;color:rgba(244,240,230,.5);font-weight:600;
animation:spl2FadeIn 1s ease .7s backwards;
}
.spl2-owner-crown{ color:#C9A84C;display:flex; }
.spl2-owner-name{ color:#C9A84C;font-weight:800; }
.spl2-owner-line-l, .spl2-owner-line-r{
width:28px;height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.4));
}
.spl2-owner-line-r{ background:linear-gradient(90deg, rgba(201,168,76,.4), transparent); }
/* شريط التحميل */
.spl2-loader{
width:160px;height:3px;border-radius:3px;
background:rgba(201,168,76,.12);
overflow:hidden;margin-top:30px;
animation:spl2FadeIn 1s ease .9s backwards;
}
.spl2-loader-bar{
width:40%;height:100%;border-radius:3px;
background:linear-gradient(90deg, transparent, #C9A84C, #f5d97a, #C9A84C, transparent);
animation:spl2LoaderSlide 1.4s ease-in-out infinite;
}
@keyframes spl2LoaderSlide{
0%{ transform:translateX(-160px); }
100%{ transform:translateX(400px); }
}
.spl2-status{
font-size:11px;color:rgba(244,240,230,.4);font-weight:500;
margin-top:14px;letter-spacing:.3px;
animation:spl2FadeIn 1s ease 1.1s backwards;
}
.spl2-version{
position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
font-size:10px;color:rgba(201,168,76,.4);font-weight:700;
letter-spacing:1px;z-index:2;
}
/* الوضع الفاتح */
html[data-theme="light"] #s-splash{ background:#faf6ec; }
html[data-theme="light"] .spl2-bg{
background:
radial-gradient(ellipse 80% 60% at 50% 35%, rgba(201,168,76,.12), transparent 70%),
linear-gradient(180deg, #fffdf7 0%, #faf6ec 100%);
}
html[data-theme="light"] .spl2-tagline,
html[data-theme="light"] .spl2-status{ color:rgba(40,30,10,.6); }
/* ═══ توحيد موضع الفوتر في كل التبويبات (حتى ذات الجذر الديناميكي) ═══ */
#bk-root, #svc-pane-root, #rec-body,
.dash-pane > [id$="-root"],
.dash-pane > [id$="-body"]{
flex:1 0 auto;
width:100%;
}
/* الفوتر المحقون دائماً آخر عنصر بمسافة موحّدة */
.dash-pane > .omar-footer-converted{
flex:0 0 auto;
margin-top:auto !important;
width:100%;
}
/* ═══ 🗓️ بطاقة اليوم الحالي — تصميم نهائي مُبهر واضح ═══ */
.dash-sb .sb-day{
display:block !important;
margin:14px 12px 16px !important;
padding:16px 18px !important;
background:linear-gradient(135deg, rgba(201,168,76,.14), rgba(201,168,76,.03)) !important;
border:1px solid rgba(201,168,76,.25) !important;
border-radius:16px !important;
position:relative;
overflow:hidden;
box-shadow:0 4px 18px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
opacity:1 !important;
visibility:visible !important;
height:auto !important;
}
/* شريط ذهبي علوي متوهّج */
.dash-sb .sb-day::before{
content:'';position:absolute;top:0;left:0;right:0;height:2px;
background:linear-gradient(90deg, transparent, #C9A84C, transparent);
}
/* أيقونة تقويم صغيرة في الزاوية */
.dash-sb .sb-day::after{
content:'🗓️';
position:absolute;top:14px;left:16px;
font-size:15px;opacity:.5;
}
.dash-sb .sb-day-lbl{
display:block !important;
font-size:9.5px !important;
font-weight:800 !important;
letter-spacing:1px !important;
text-transform:uppercase;
color:rgba(201,168,76,.8) !important;
margin-bottom:6px !important;
}
.dash-sb .sb-day-val{
display:block !important;
font-size:15px !important;
font-weight:900 !important;
color:#f4f0e6 !important;
line-height:1.4 !important;
margin:0 0 4px !important;
}
.dash-sb .sb-day-stats{
display:block !important;
font-size:10.5px !important;
color:rgba(244,240,230,.6) !important;
line-height:1.5 !important;
}
/* الوضع الفاتح */
html[data-theme='light'] .dash-sb .sb-day-val{ color:#23201B !important; }
html[data-theme='light'] .dash-sb .sb-day-stats{ color:rgba(20,20,20,.6) !important; }
/* عند الطي فقط: نخفي التفاصيل */
.dash-sb.is-collapsed .sb-day{ padding:10px 0 !important; }
.dash-sb.is-collapsed .sb-day::after{ display:none; }
/* ═══ توحيد ارتفاع الفوتر تماماً في كل التبويبات ═══ */
.dash-pane > .omar-footer-converted,
.dash-pane .site-footer,
.dash-pane .site-footer-v2{
padding:0 !important;
margin:auto 0 0 0 !important;
border:none !important;
background:none !important;
min-height:0 !important;
}
/* الحاوية الداخلية للفوتر هي التي تحمل التصميم — ثابتة الارتفاع */
.dash-pane .ftr-wrap{
margin:20px auto 4px !important;
}
/* ═══════════════════════════════════════════════════════════ */
/* 🔵 مؤشر التبويب النشط — نقطة وامضة أنيقة (تلغي الألوان الثقيلة) */
/* ═══════════════════════════════════════════════════════════ */
/* إلغاء التمييزات الثقيلة السابقة */
.dash-sb .sb-nav-item.on{
background:transparent !important;
border-color:transparent !important;
color:#f4f0e6 !important;
}
.dash-sb .sb-nav-item.on::before{ display:none !important; }
.dash-sb .sb-nav-item.on .ni{
background:rgba(201,168,76,.12) !important;
border-color:rgba(201,168,76,.25) !important;
box-shadow:none !important;
}
.dash-sb .sb-nav-item.on .ni svg{ color:#C9A84C !important; }
.dash-sb .sb-nav-item.on .nl{ color:#C9A84C !important; font-weight:800; }
/* النقطة الوامضة الأنيقة */
.dash-sb .sb-nav-item{ position:relative; }
.dash-sb .sb-nav-item.on::after{
content:'';
position:absolute;
right:8px;
top:50%;
width:7px;height:7px;
margin-top:-3.5px;
border-radius:50%;
background:radial-gradient(circle, #f5d97a, #C9A84C);
box-shadow:0 0 8px rgba(201,168,76,.9), 0 0 14px rgba(201,168,76,.5);
animation:navDotPulse 1.8s ease-in-out infinite;
z-index:3;
}
@keyframes navDotPulse{
0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 8px rgba(201,168,76,.9), 0 0 14px rgba(201,168,76,.5); }
50%{ opacity:.65; transform:scale(1.35); box-shadow:0 0 12px rgba(201,168,76,1), 0 0 22px rgba(201,168,76,.7); }
}
/* الوضع الفاتح */
html[data-theme='light'] .dash-sb .sb-nav-item.on{ color:#23201B !important; }
html[data-theme='light'] .dash-sb .sb-nav-item.on .nl{ color:#9F7E1C !important; }
/* عند الطي: النقطة تنتقل لأعلى الأيقونة */
.dash-sb.is-collapsed .sb-nav-item.on::after{
right:50%;top:4px;margin-right:-3.5px;margin-top:0;
}
/* ═══ السايد بار: اليوم الحالي + الطي ═══ */
/* 📱 الجوال: حذف بطاقة اليوم الحالي تماماً */
@media (max-width:768px){
.sb-day, .dash-sb .sb-day{ display:none !important; }
}
/* 💻 الكمبيوتر: بطاقة اليوم واضحة كاملة */
@media (min-width:769px){
.dash-sb .sb-day{
display:block !important;
margin:14px 12px 16px !important;
padding:15px 16px !important;
background:linear-gradient(135deg, rgba(201,168,76,.14), rgba(201,168,76,.03)) !important;
border:1px solid rgba(201,168,76,.25) !important;
border-radius:14px !important;
opacity:1 !important; visibility:visible !important; height:auto !important;
overflow:visible !important;
}
.dash-sb.is-collapsed .sb-day{ display:none !important; }
}
/* ═══ الطي: أيقونات مرتّبة مرنة (لا تداخل) ═══ */
.dash-sb.is-collapsed{ overflow:visible; }
.dash-sb.is-collapsed .sb-nav-item{
display:flex !important;
justify-content:center !important;
align-items:center !important;
padding:8px 0 !important;
margin:3px auto !important;
width:100% !important;
}
.dash-sb.is-collapsed .nl,
.dash-sb.is-collapsed .sb-badge,
.dash-sb.is-collapsed .sb-section-label,
.dash-sb.is-collapsed .sb-day-lbl,
.dash-sb.is-collapsed .sb-day-val,
.dash-sb.is-collapsed .sb-day-stats{ display:none !important; }
.dash-sb.is-collapsed .ni{
width:40px !important;height:40px !important;
min-width:40px !important;
display:flex !important;align-items:center !important;justify-content:center !important;
margin:0 auto !important;
border-radius:11px !important;
}
.dash-sb.is-collapsed .ni svg{ width:18px !important;height:18px !important; }
/* ═══ ⚙️ تبويب إدارة نظام الحجز ═══ */
.bksys-wrap{ max-width:1200px;margin:0 auto;padding:10px 6px 34px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start; }
.bksys-wrap>.bksys-head,.bksys-wrap>.bksys-disabled,.bksys-wrap>.bksys-save{ grid-column:1 / -1; }
.bksys-wrap>.bksys-card,.bksys-wrap>.bksys-link-card{ margin:0 !important; }
@media(max-width:820px){ .bksys-wrap{ grid-template-columns:1fr; } }
.bksys-head{ display:flex;align-items:center;gap:14px;margin-bottom:20px;padding:18px 20px;
background:linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.02));
border:1px solid rgba(201,168,76,.2);border-radius:16px; }
.bksys-head-ico{ font-size:30px; }
.bksys-head-title{ font-size:19px;font-weight:900;color:var(--t1); }
.bksys-head-sub{ font-size:12px;color:var(--t3);margin-top:3px; }
.bksys-card{ background:var(--card,rgba(255,255,255,.02));border:1px solid var(--bdr,rgba(255,255,255,.06));
border-radius:14px;margin-bottom:16px;overflow:hidden; }
.bksys-card-h{ display:flex;align-items:center;gap:9px;padding:14px 18px;font-weight:800;font-size:14px;color:var(--t1);
background:rgba(201,168,76,.05);border-bottom:1px solid var(--bdr,rgba(255,255,255,.06)); }
.bksys-card-h span{ font-size:17px; }
.bksys-card-b{ padding:16px 18px; }
.bksys-checks{ display:grid;grid-template-columns:1fr 1fr;gap:10px; }
@media(max-width:560px){ .bksys-checks{ grid-template-columns:1fr; } }
.bksys-check{ display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;color:var(--t2);
padding:9px 12px;border-radius:10px;border:1px solid var(--bdr,rgba(255,255,255,.06));transition:all .2s; }
.bksys-check:hover{ border-color:rgba(201,168,76,.3);background:rgba(201,168,76,.04); }
.bksys-check input{ display:none; }
.bksys-check-box{ width:20px;height:20px;border-radius:6px;border:2px solid rgba(201,168,76,.4);
flex-shrink:0;position:relative;transition:all .2s; }
.bksys-check input:checked + .bksys-check-box{ background:linear-gradient(135deg,#C9A84C,#9F7E1C);border-color:#C9A84C; }
.bksys-check input:checked + .bksys-check-box::after{ content:'✓';position:absolute;inset:0;display:flex;
align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:bold; }
.bksys-svc-row{ display:flex;align-items:center;gap:8px;margin-bottom:9px; }
.bksys-inp{ background:var(--input,rgba(255,255,255,.04));border:1px solid var(--bdr,rgba(255,255,255,.08));
border-radius:9px;padding:9px 11px;color:var(--t1);font-size:13px;font-family:inherit; }
.bksys-inp:focus{ outline:none;border-color:rgba(201,168,76,.5); }
.bksys-svc-icon{ width:46px;text-align:center;flex-shrink:0; }
.bksys-svc-name{ flex:1;min-width:0; }
.bksys-svc-price{ width:90px;flex-shrink:0; }
.bksys-svc-cur{ color:#C9A84C;font-weight:700;flex-shrink:0; }
.bksys-svc-del{ width:32px;height:32px;border-radius:8px;border:none;background:rgba(239,68,68,.12);
color:#ef4444;cursor:pointer;font-size:13px;flex-shrink:0;transition:all .2s; }
.bksys-svc-del:hover{ background:#ef4444;color:#fff; }
.bksys-add-btn{ width:100%;padding:11px;margin-top:6px;border-radius:10px;border:1.5px dashed rgba(201,168,76,.4);
background:transparent;color:#C9A84C;font-weight:700;cursor:pointer;font-size:13px;transition:all .2s;font-family:inherit; }
.bksys-add-btn:hover{ background:rgba(201,168,76,.08);border-style:solid; }
.bksys-hours{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px; }
@media(max-width:560px){ .bksys-hours{ grid-template-columns:1fr; } }
.bksys-hour-f{ display:flex;flex-direction:column;gap:6px; }
.bksys-hour-f label{ font-size:11.5px;color:var(--t3);font-weight:600; }
.bksys-days{ display:flex;flex-wrap:wrap;gap:8px; }
.bksys-day{ cursor:pointer; }
.bksys-day input{ display:none; }
.bksys-day span{ display:block;padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:700;
border:1px solid var(--bdr,rgba(255,255,255,.1));color:var(--t3);transition:all .2s; }
.bksys-day.on span{ background:linear-gradient(135deg,#C9A84C,#9F7E1C);color:#fff;border-color:#C9A84C; }
.bksys-save{ width:100%;padding:14px;border-radius:12px;border:none;cursor:pointer;
background:linear-gradient(135deg,#C9A84C,#9F7E1C);color:#fff;font-weight:800;font-size:15px;font-family:inherit;
box-shadow:0 6px 20px rgba(201,168,76,.3);transition:all .2s; }
.bksys-save:hover{ transform:translateY(-2px);box-shadow:0 8px 26px rgba(201,168,76,.45); }
/* ═══ توحيد فوتر الحجوزات نهائياً مع باقي التبويبات ═══ */
/* pane الحجوزات: نفس بنية الآخرين تماماً */
#dash-pane-bookings.dash-pane.on{
display:flex !important;
flex-direction:column !important;
}
/* bk-root يتمدّد ليملأ، لكن دون دفع زائد */
#dash-pane-bookings #bk-root{
flex:1 0 auto;
display:block;
width:100%;
}
/* الفوتر داخل pane الحجوزات: نفس المسافة بالضبط */
#dash-pane-bookings > .omar-footer-converted,
#dash-pane-bookings .ftr-wrap{
margin-top:auto !important;
}
#dash-pane-bookings .ftr-wrap{
margin:20px auto 4px !important;
}
/* ═══════════════════════════════════════════════════════════ */
/* 🎨 إعادة تصميم السايد بار — فاخر راقٍ متناغم (2026) */
/* ═══════════════════════════════════════════════════════════ */
.dash-sb{
background:linear-gradient(180deg, rgba(16,14,10,.98) 0%, rgba(10,9,6,.99) 100%) !important;
border-left:1px solid rgba(201,168,76,.12) !important;
padding:0 !important;
display:flex !important;
flex-direction:column !important;
gap:0 !important;
}
html[data-theme='light'] .dash-sb{
background:linear-gradient(180deg, #fffdf8 0%, #faf6ec 100%) !important;
border-left:1px solid rgba(201,168,76,.2) !important;
}
/* منطقة التمرير للعناصر */
.dash-sb{ overflow-y:auto; overflow-x:hidden; }
.dash-sb::-webkit-scrollbar{ width:5px; }
.dash-sb::-webkit-scrollbar-thumb{ background:rgba(201,168,76,.25); border-radius:3px; }
/* عناوين الأقسام — أنيقة بخط ذهبي */
.dash-sb .sb-section-label{
display:flex !important;align-items:center;gap:7px;
font-size:9.5px !important;
font-weight:800 !important;
letter-spacing:1.2px !important;
text-transform:uppercase;
color:rgba(201,168,76,.65) !important;
padding:16px 18px 8px !important;
margin:0 !important;
}
.dash-sb .sb-section-label::after{
content:'';flex:1;height:1px;
background:linear-gradient(90deg, rgba(201,168,76,.2), transparent);
}
/* عناصر التنقل — أنيقة بمسافات مريحة */
.dash-sb .sb-nav-item{
display:flex !important;align-items:center;gap:12px;
padding:11px 16px !important;
margin:2px 10px !important;
border-radius:12px !important;
border:1px solid transparent !important;
background:transparent !important;
cursor:pointer;
transition:all .22s cubic-bezier(.16,1,.3,1) !important;
position:relative;
color:var(--t2,#cbd5e1) !important;
}
.dash-sb .sb-nav-item:hover{
background:rgba(201,168,76,.06) !important;
transform:translateX(-3px);
}
/* الأيقونة */
.dash-sb .ni{
width:36px !important;height:36px !important;min-width:36px !important;
display:flex !important;align-items:center;justify-content:center;
border-radius:10px !important;
background:rgba(255,255,255,.03) !important;
border:1px solid rgba(201,168,76,.12) !important;
color:var(--t2,#cbd5e1) !important;
transition:all .22s ease !important;
flex-shrink:0;
}
.dash-sb .ni svg{ width:17px !important;height:17px !important; }
.dash-sb .sb-nav-item:hover .ni{
background:rgba(201,168,76,.12) !important;
border-color:rgba(201,168,76,.3) !important;
color:#C9A84C !important;
}
/* النص */
.dash-sb .nl{
font-size:13.5px !important;
font-weight:600 !important;
flex:1;
white-space:nowrap;
}
/* الشارة (العداد) */
.dash-sb .sb-badge{
font-size:10px !important;
font-weight:800 !important;
padding:2px 8px !important;
border-radius:20px !important;
background:rgba(201,168,76,.15) !important;
color:#C9A84C !important;
min-width:20px;text-align:center;
}
/* sb-acts يحوي التنقل + الأزرار: flex عمودي يملأ الارتفاع */
.dash-sb .sb-acts{
flex:1 1 auto !important;
display:flex !important;
flex-direction:column !important;
padding:8px 0 !important;
min-height:0;
}
/* صف الأزرار (الوضع/الدعم/الخروج) يلتصق بالأسفل */
.dash-sb .sb-action-row{
margin-top:auto !important;
padding:14px 12px 16px !important;
border-top:1px solid rgba(201,168,76,.1) !important;
}
/* ═══ بطاقة رابط الحجز ═══ */
.bksys-link-card{
background:linear-gradient(135deg, rgba(99,102,241,.1), rgba(201,168,76,.05));
border:1px solid rgba(201,168,76,.25);
border-radius:16px;padding:18px 20px;margin-bottom:18px;
}
.bksys-link-h{
display:flex;align-items:center;gap:9px;
font-weight:800;font-size:14px;color:var(--t1,#f0eee8);margin-bottom:14px;
}
.bksys-link-h span{ font-size:17px; }
.bksys-link-row{
display:flex;gap:10px;align-items:stretch;margin-bottom:12px;
}
#bksys-link{
flex:1;min-width:0;
background:rgba(0,0,0,.25);
border:1px solid rgba(201,168,76,.2);
border-radius:10px;padding:11px 14px;
color:#C9A84C;font-size:13px;font-family:monospace;
direction:ltr;text-align:left;
text-overflow:ellipsis;
}
#bksys-link:focus{ outline:none;border-color:rgba(201,168,76,.5); }
.bksys-link-copy{
flex-shrink:0;padding:11px 18px;border-radius:10px;border:none;cursor:pointer;
background:linear-gradient(135deg,#6366f1,#C9A84C);color:#fff;font-weight:800;font-size:13px;font-family:inherit;
transition:all .2s ease;white-space:nowrap;
}
.bksys-link-copy:hover{ transform:translateY(-1px);box-shadow:0 4px 14px rgba(99,102,241,.35); }
.bksys-link-actions{ display:flex;gap:10px;margin-bottom:10px; }
.bksys-link-open, .bksys-link-share{
flex:1;text-align:center;padding:9px 14px;border-radius:10px;cursor:pointer;
font-weight:700;font-size:12.5px;text-decoration:none;font-family:inherit;
background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.2);color:var(--t2,#cbd5e1);
transition:all .2s ease;
}
.bksys-link-open:hover, .bksys-link-share:hover{
background:rgba(201,168,76,.12);border-color:rgba(201,168,76,.4);color:#C9A84C;
}
.bksys-link-hint{ font-size:11.5px;color:var(--t3,#94a3b8);line-height:1.6; }
.bksys-disabled{
display:flex;align-items:center;gap:14px;
background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);
border-radius:14px;padding:16px 20px;margin-bottom:18px;color:var(--t1,#f0eee8);font-size:13.5px;
}
/* ═══════════════════════════════════════════════════════════════ */
/* 👑 سايد بار فاخر راقٍ — OMAR Premium Sidebar */
/* ═══════════════════════════════════════════════════════════════ */
.dash-sb{
background:
linear-gradient(180deg, #14110a 0%, #0f0d08 45%, #0a0906 100%) !important;
border-left:1px solid rgba(201,168,76,.15) !important;
padding:0 !important;display:flex !important;flex-direction:column !important;gap:0 !important;
overflow-y:auto;overflow-x:hidden;position:relative;
box-shadow:inset 1px 0 0 rgba(255,255,255,.02);
}
.dash-sb::before{
content:'';position:absolute;top:0;left:0;width:100%;height:160px;pointer-events:none;
background:radial-gradient(ellipse 80% 100% at 50% 0%, rgba(201,168,76,.10), transparent 70%);
}
.dash-sb::-webkit-scrollbar{ width:4px; }
.dash-sb::-webkit-scrollbar-thumb{ background:rgba(201,168,76,.3); border-radius:4px; }
.dash-sb::-webkit-scrollbar-track{ background:transparent; }
html[data-theme='light'] .dash-sb{
background:linear-gradient(180deg, #fffefb, #faf6ed) !important;
border-left:1px solid rgba(201,168,76,.2) !important;
}
/* بطاقة اليوم — راقية بإطار ذهبي رفيع */
.dash-sb .sb-day{
margin:16px 14px 10px !important;padding:16px 18px !important;
background:linear-gradient(135deg, rgba(201,168,76,.1), rgba(201,168,76,.02)) !important;
border:1px solid rgba(201,168,76,.2) !important;border-radius:18px !important;
position:relative;overflow:hidden;
box-shadow:0 2px 12px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.dash-sb .sb-day::before{
content:'';position:absolute;top:0;left:20%;right:20%;height:1px;
background:linear-gradient(90deg, transparent, rgba(201,168,76,.7), transparent);
}
.dash-sb .sb-day-lbl{
font-size:9px !important;font-weight:700 !important;letter-spacing:1.5px !important;
text-transform:uppercase;color:rgba(201,168,76,.7) !important;margin-bottom:6px !important;
}
.dash-sb .sb-day-val{ font-size:15px !important;font-weight:800 !important;color:#f4efe2 !important;margin:0 0 4px !important;letter-spacing:.2px; }
.dash-sb .sb-day-stats{ font-size:10.5px !important;color:rgba(244,239,226,.5) !important;font-weight:500; }
html[data-theme='light'] .dash-sb .sb-day-val{ color:#23201B !important; }
html[data-theme='light'] .dash-sb .sb-day-stats{ color:rgba(0,0,0,.5) !important; }
/* عناوين الأقسام — حروف منفصلة أنيقة */
.dash-sb .sb-section-label{
display:flex !important;align-items:center;gap:9px;
font-size:8.5px !important;font-weight:800 !important;letter-spacing:2px !important;
text-transform:uppercase;color:rgba(201,168,76,.5) !important;
padding:20px 20px 8px !important;margin:0 !important;
}
.dash-sb .sb-section-label::after{
content:'';flex:1;height:1px;background:linear-gradient(90deg, rgba(201,168,76,.18), transparent);
}
/* sb-acts عمودي */
.dash-sb .sb-acts{ flex:1 1 auto !important;display:flex !important;flex-direction:column !important;padding:4px 0 !important;min-height:0; }
/* عناصر التنقل — راقية هادئة */
.dash-sb .sb-nav-item{
display:flex !important;align-items:center;gap:13px;
padding:10px 16px !important;margin:1px 12px !important;
border-radius:12px !important;border:1px solid transparent !important;background:transparent !important;
cursor:pointer;color:rgba(244,239,226,.7) !important;position:relative;
transition:background .2s ease, color .2s ease !important;
}
.dash-sb .sb-nav-item:hover{
background:rgba(201,168,76,.07) !important;color:#f4efe2 !important;
}
html[data-theme='light'] .dash-sb .sb-nav-item{ color:rgba(0,0,0,.7) !important; }
/* الأيقونة — مربّع راقٍ */
.dash-sb .ni{
width:34px !important;height:34px !important;min-width:34px !important;
display:flex !important;align-items:center;justify-content:center;border-radius:10px !important;flex-shrink:0;
background:rgba(201,168,76,.08) !important;border:1px solid rgba(201,168,76,.12) !important;
color:rgba(201,168,76,.85) !important;transition:all .2s ease !important;
}
.dash-sb .ni svg{ width:16px !important;height:16px !important; }
.dash-sb .sb-nav-item:hover .ni{ background:rgba(201,168,76,.16) !important;color:#e6c478 !important; }
.dash-sb .nl{ font-size:13px !important;font-weight:600 !important;flex:1;white-space:nowrap;letter-spacing:.2px; }
.dash-sb .sb-badge{
font-size:9.5px !important;font-weight:800 !important;padding:2px 7px !important;border-radius:20px !important;
background:rgba(201,168,76,.18) !important;color:#e6c478 !important;min-width:18px;text-align:center;
}
/* التبويب النشط — خلفية راقية + شريط ذهبي + نقطة */
.dash-sb .sb-nav-item.on{
background:linear-gradient(90deg, rgba(201,168,76,.14), rgba(201,168,76,.03)) !important;
color:#fff !important;
}
.dash-sb .sb-nav-item.on .ni{
background:linear-gradient(135deg,#C9A84C,#9F7E1C) !important;color:#fff !important;border-color:transparent !important;
box-shadow:0 3px 12px rgba(201,168,76,.35);
}
.dash-sb .sb-nav-item.on .nl{ color:#f4efe2 !important;font-weight:800 !important; }
.dash-sb .sb-nav-item.on::after{
content:'';position:absolute;right:6px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;
background:#e6c478;box-shadow:0 0 8px rgba(201,168,76,.9);animation:sbDot 2s ease-in-out infinite;
}
@keyframes sbDot{ 0%,100%{opacity:1;transform:scale(1);} 50%{opacity:.5;transform:scale(1.3);} }
html[data-theme='light'] .dash-sb .sb-nav-item.on .nl{ color:#23201B !important; }
/* الأزرار السفلية */
.dash-sb .sb-action-row{
margin-top:auto !important;display:grid !important;grid-template-columns:1fr 1fr 1fr !important;gap:8px !important;
padding:16px 14px !important;border-top:1px solid rgba(201,168,76,.1) !important;
}
.dash-sb .sb-icon-btn{
display:flex !important;flex-direction:column !important;align-items:center;justify-content:center;gap:5px !important;
padding:11px 4px !important;border-radius:12px !important;font-size:9px !important;
background:rgba(201,168,76,.05) !important;border:1px solid rgba(201,168,76,.1) !important;
color:rgba(244,239,226,.65) !important;cursor:pointer;transition:all .2s ease !important;font-weight:600;
}
.dash-sb .sb-icon-btn svg{ width:16px !important;height:16px !important; }
.dash-sb .sb-icon-btn:hover{ background:rgba(201,168,76,.12) !important;color:#e6c478 !important;border-color:rgba(201,168,76,.25) !important; }
/* الطي */
.dash-sb.is-collapsed .sb-day,
.dash-sb.is-collapsed .nl,
.dash-sb.is-collapsed .sb-badge,
.dash-sb.is-collapsed .sb-section-label{ display:none !important; }
.dash-sb.is-collapsed .sb-nav-item{ justify-content:center !important;padding:9px 0 !important;margin:2px auto !important; }
.dash-sb.is-collapsed .sb-nav-item.on::after{ right:50%;top:2px;margin-right:-3px;margin-top:0; }
.dash-sb.is-collapsed .ni{ margin:0 auto !important; }
.dash-sb.is-collapsed .sb-action-row{ grid-template-columns:1fr !important; }
.dash-sb.is-collapsed .sb-icon-btn span{ display:none !important; }
/* 📱 الجوال: حذف اليوم */
@media (max-width:768px){ .dash-sb .sb-day{ display:none !important; } }
/* ═══ توحيد شامل: كل الـ panes والفوتر متطابقة ═══ */
.dash-pane.on{ display:flex !important;flex-direction:column !important; }
.dash-pane.on > div:first-child:not(.omar-footer-converted){ flex:1 0 auto; }
#bk-root, #bksys-root, #svc-pane-root, #rec-body{ flex:1 0 auto;width:100%;min-height:0; }
.dash-pane > .omar-footer-converted{
flex:0 0 auto !important;margin-top:auto !important;width:100%;
padding:0 !important;border:none !important;background:none !important;
}
.dash-pane .ftr-wrap{ margin:24px auto 8px !important; }
/* ═══ ضمان إخفاء الـ panes غير النشطة (حسم نهائي) ═══ */
.dash-pane:not(.on){ display:none !important; }
#dash-pane-bksys:not(.on){ display:none !important; }
/* ═══ زر الفحص + modal إدارة الفحص ═══ */
.bkc-btn.inspect{ background:rgba(99,102,241,.12);color:#818cf8;border-color:rgba(99,102,241,.25); }
.bkc-btn.inspect:hover{ background:rgba(99,102,241,.2);color:#a5b4fc; }
.insp-overlay{
position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px;
background:rgba(0,0,0,.7);backdrop-filter:blur(6px);animation:inspFade .25s ease;
}
@keyframes inspFade{from{opacity:0;}to{opacity:1;}}
.insp-box{
width:100%;max-width:520px;max-height:90vh;overflow-y:auto;
background:linear-gradient(180deg,#14110a,#0f0d08);border:1px solid rgba(201,168,76,.25);
border-radius:22px;box-shadow:0 24px 70px rgba(0,0,0,.6);animation:inspUp .3s cubic-bezier(.16,1,.3,1);
}
@keyframes inspUp{from{transform:translateY(20px);opacity:0;}to{transform:none;opacity:1;}}
.insp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:20px 22px;border-bottom:1px solid rgba(201,168,76,.12);}
.insp-title{font-size:17px;font-weight:900;color:#f4efe2;}
.insp-sub{font-size:11.5px;color:#94a3b8;margin-top:4px;}
.insp-close{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#cbd5e1;cursor:pointer;font-size:15px;flex-shrink:0;transition:all .2s;}
.insp-close:hover{background:rgba(239,68,68,.15);color:#ef4444;}
.insp-body{padding:20px 22px;}
.insp-section-lbl{font-size:12px;font-weight:800;color:#e6c478;margin:18px 0 10px;}
.insp-section-lbl:first-child{margin-top:0;}
.insp-stages{display:flex;flex-direction:column;gap:8px;}
.insp-stage{
display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;cursor:pointer;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:#94a3b8;
font-size:13px;font-weight:700;font-family:inherit;text-align:right;transition:all .2s;
}
.insp-stage:hover{border-color:rgba(201,168,76,.3);}
.insp-stage-ico{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);font-size:14px;flex-shrink:0;}
.insp-stage.done{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.3);color:#4ade80;}
.insp-stage.done .insp-stage-ico{background:rgba(34,197,94,.2);}
.insp-stage.active{background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(201,168,76,.05));border-color:rgba(201,168,76,.5);color:#e6c478;box-shadow:0 0 0 3px rgba(201,168,76,.1);}
.insp-stage.active .insp-stage-ico{background:linear-gradient(135deg,#C9A84C,#9F7E1C);color:#fff;}
.insp-input{
width:100%;background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.1);border-radius:12px;
padding:12px 14px;color:#f4efe2;font-size:13.5px;font-family:inherit;box-sizing:border-box;resize:vertical;transition:all .2s;
}
.insp-input:focus{outline:none;border-color:rgba(201,168,76,.5);background:rgba(201,168,76,.04);}
.insp-hint{font-size:11px;color:#94a3b8;margin-top:6px;line-height:1.5;}
.insp-foot{padding:18px 22px;border-top:1px solid rgba(201,168,76,.12);}
.insp-save{
width:100%;padding:14px;border-radius:13px;border:none;cursor:pointer;
background:linear-gradient(135deg,#C9A84C,#9F7E1C);color:#fff;font-weight:800;font-size:14.5px;font-family:inherit;
box-shadow:0 6px 20px rgba(201,168,76,.3);transition:all .2s;
}
.insp-save:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(201,168,76,.45);}
.insp-status{text-align:center;font-size:12.5px;font-weight:700;margin-top:10px;min-height:18px;}
/* ═══════════════════════════════════════════════════ */
/* 📹 تبويب البث المباشر — تصميم مستقبلي فاخر */
/* ═══════════════════════════════════════════════════ */
.lvx-wrap{max-width:1200px;margin:0 auto;padding:8px;}
.lvx-hero{position:relative;border-radius:24px;overflow:hidden;margin-bottom:28px;padding:32px 28px;
background:linear-gradient(135deg,var(--d2,#0E1014) 0%,var(--d3,#131519) 50%,var(--d1,#090A0D) 100%);
border:1px solid var(--bdr2,rgba(201,168,76,.25));box-shadow:0 20px 60px rgba(0,0,0,.5);}
.lvx-hero::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
background:radial-gradient(circle at 15% 20%,rgba(201,168,76,.18),transparent 45%),radial-gradient(circle at 85% 80%,rgba(232,201,106,.1),transparent 45%);}
.lvx-hero::after{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;
background:linear-gradient(90deg,transparent,rgba(201,168,76,.7),transparent);}
.lvx-hero-title{position:relative;font-size:26px;font-weight:900;color:#fff;margin-bottom:8px;display:flex;align-items:center;gap:14px;}
.lvx-hero-sub{position:relative;font-size:14px;color:var(--t2,#C8BFA8);max-width:560px;line-height:1.7;}
.lvx-hero-ico{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,rgba(201,168,76,.25),rgba(201,168,76,.08));border:1px solid var(--bdr2,rgba(201,168,76,.35));
box-shadow:0 8px 24px rgba(201,168,76,.25), inset 0 1px 0 rgba(255,255,255,.15);}
/* شبكة التذاكر */
.lvx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px;}
/* فلاتر البث — مرنة نظيفة راقية */
.lvx-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:24px;}
.lvx-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:30px;cursor:pointer;
font-family:inherit;font-size:13px;font-weight:800;color:var(--t2,#C8BFA8);
background:var(--d3,#131519);border:1px solid var(--bdr,rgba(201,168,76,.12));transition:all .25s;}
.lvx-chip:hover{border-color:var(--bdr2,rgba(201,168,76,.3));color:var(--t1,#F4F0E6);}
.lvx-chip b{font-size:11px;font-weight:900;padding:2px 7px;border-radius:20px;background:rgba(201,168,76,.14);color:var(--g2,#E8C96A);}
.lvx-chip.on{background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));color:#1a1500;border-color:transparent;box-shadow:0 6px 18px rgba(201,168,76,.3);}
.lvx-chip.on b{background:rgba(0,0,0,.2);color:#1a1500;}
.lvx-chip-live .lvx-live-dot{width:7px;height:7px;}
.lvx-chip.on.lvx-chip-live{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff;}
.lvx-chip.on.lvx-chip-live b{color:#fff;}
.lvx-search{display:flex;align-items:center;gap:8px;margin-right:auto;padding:9px 14px;border-radius:30px;
background:var(--d3,#131519);border:1px solid var(--bdr,rgba(201,168,76,.12));color:var(--t3,#7A7260);min-width:240px;transition:all .25s;}
.lvx-search:focus-within{border-color:var(--bdr2,rgba(201,168,76,.4));color:var(--g1,#C9A84C);}
.lvx-search input{flex:1;background:none;border:none;outline:none;color:var(--t1,#F4F0E6);font-family:inherit;font-size:13px;font-weight:600;}
.lvx-search input::placeholder{color:var(--t3,#7A7260);}
.lvx-noresult{text-align:center;padding:40px;color:var(--t3,#7A7260);font-size:14px;font-weight:700;}
.lvx-card{position:relative;border-radius:22px;overflow:hidden;padding:22px;
background:linear-gradient(155deg,var(--d3,#131519),var(--d1,#090A0D));
border:1px solid var(--bdr,rgba(201,168,76,.12));transition:all .4s cubic-bezier(.2,.8,.3,1);
box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.03);backdrop-filter:blur(12px);}
.lvx-card:hover{transform:translateY(-6px);border-color:var(--bdr2,rgba(201,168,76,.35));box-shadow:0 22px 56px rgba(0,0,0,.7),0 0 0 1px rgba(201,168,76,.18),0 0 28px rgba(201,168,76,.1);}
.lvx-card.live{border-color:rgba(239,68,68,.45);box-shadow:0 12px 40px rgba(239,68,68,.2);}
.lvx-card-glow{position:absolute;top:-40%;right:-30%;width:200px;height:200px;border-radius:50%;
background:radial-gradient(circle,rgba(201,168,76,.16),rgba(232,201,106,.06) 50%,transparent 72%);pointer-events:none;}
.lvx-card-head{display:flex;align-items:center;gap:13px;margin-bottom:18px;position:relative;}
.lvx-avatar{width:50px;height:50px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));box-shadow:0 6px 18px rgba(201,168,76,.35), inset 0 1px 0 rgba(255,255,255,.2);}
.lvx-avatar svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));}
.lvx-info{flex:1;min-width:0;}
.lvx-name{font-size:16px;font-weight:800;color:var(--t1,#F4F0E6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lvx-meta{font-size:12px;color:var(--t3,#7A7260);margin-top:2px;}
.lvx-src-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:14px;font-size:10.5px;font-weight:800;}
.lvx-badge-live{background:rgba(239,68,68,.18);color:#fca5a5;}
.lvx-badge-off{background:rgba(100,116,139,.18);color:#94a3b8;}
.lvx-live-dot{width:7px;height:7px;border-radius:50%;background:#ef4444;animation:lvxBlink 1.2s infinite;}
@keyframes lvxBlink{50%{opacity:.3;}}
/* اختيار مصدر البث */
.lvx-sources{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;}
.lvx-src{position:relative;border-radius:15px;padding:16px 12px;cursor:pointer;text-align:center;
background:rgba(56,189,248,.05);border:1.5px solid rgba(56,189,248,.15);transition:all .25s;}
.lvx-src:hover{background:rgba(56,189,248,.1);border-color:rgba(56,189,248,.35);transform:translateY(-2px);}
.lvx-src.sel{background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(201,168,76,.05));border-color:var(--bdr2,rgba(201,168,76,.5));
box-shadow:0 0 0 3px rgba(56,189,248,.12), 0 8px 20px rgba(14,165,233,.2);}
.lvx-src-ico{width:46px;height:46px;margin:0 auto 9px;border-radius:14px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,rgba(56,189,248,.25),rgba(56,189,248,.06));border:1px solid rgba(56,189,248,.3);
box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 4px 12px rgba(14,165,233,.2);transition:all .25s;}
.lvx-src.sel .lvx-src-ico{background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));box-shadow:0 6px 18px rgba(201,168,76,.45);}
.lvx-src-label{font-size:12.5px;font-weight:800;color:#e0f2fe;}
.lvx-src-hint{font-size:10px;color:rgba(186,230,253,.55);margin-top:3px;}
.lvx-url-row{margin:14px 0;}
.lvx-url{width:100%;background:rgba(0,0,0,.3);border:1px solid rgba(56,189,248,.2);border-radius:13px;
padding:13px 15px;color:#f0f9ff;font-size:13px;font-family:inherit;transition:all .2s;box-sizing:border-box;}
.lvx-url:focus{outline:none;border-color:rgba(56,189,248,.6);box-shadow:0 0 0 3px rgba(56,189,248,.12);}
.lvx-url::placeholder{color:#475569;}
/* معاينة كاميرا الجوال */
.lvx-cam-preview{width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000;margin:14px 0;
border:1px solid rgba(56,189,248,.3);position:relative;display:none;}
.lvx-cam-preview.on{display:block;}
.lvx-cam-preview video{width:100%;height:100%;object-fit:cover;}
.lvx-cam-tag{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:5px;
padding:4px 10px;border-radius:14px;background:rgba(239,68,68,.9);color:#fff;font-size:10.5px;font-weight:800;z-index:2;}
.lvx-actions{display:flex;gap:9px;margin-top:16px;}
.lvx-btn{flex:1;padding:13px;border-radius:13px;border:none;cursor:pointer;font-weight:800;font-size:13.5px;
font-family:inherit;transition:all .25s;display:flex;align-items:center;justify-content:center;gap:7px;}
.lvx-btn-go{background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));color:#1a1500;box-shadow:0 8px 22px rgba(201,168,76,.4), inset 0 1px 0 rgba(255,255,255,.25);}
.lvx-btn-go:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(201,168,76,.55);}
.lvx-btn-stop{background:rgba(239,68,68,.12);color:#fca5a5;border:1px solid rgba(239,68,68,.3);}
.lvx-btn-stop:hover{background:rgba(239,68,68,.2);}
.lvx-btn-sec{background:rgba(56,189,248,.08);color:#7dd3fc;border:1px solid rgba(56,189,248,.2);}
.lvx-btn-sec:hover{background:rgba(56,189,248,.16);}
.lvx-empty{text-align:center;padding:70px 24px;color:rgba(186,230,253,.6);
background:linear-gradient(160deg,rgba(13,36,56,.6),rgba(10,25,41,.8));border:1px solid rgba(56,189,248,.12);border-radius:22px;}
.lvx-empty-ico{width:80px;height:80px;margin:0 auto 18px;border-radius:24px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,rgba(56,189,248,.15),rgba(56,189,248,.04));border:1px solid rgba(56,189,248,.2);
box-shadow:inset 0 1px 0 rgba(255,255,255,.1);}
.lvx-empty h3{font-size:18px;font-weight:800;color:#e0f2fe;margin-bottom:8px;}
.lvx-empty p{font-size:13.5px;line-height:1.7;}
/* ═══════════════════════════════════════════════════ */
/* 📱 شريط سفلي بأسلوب Apple-TV — لوحة المركز */
/* ═══════════════════════════════════════════════════ */
.cxbar-wrap{
display:none;flex-direction:row-reverse;align-items:center;gap:12px;
position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));
z-index:1500;width:calc(100% - 26px);max-width:480px;justify-content:center;
}
@media(max-width:1024px){
.cxbar-wrap{ display:flex; }
}
/* إظهار على الكمبيوتر (يتحكم به صاحب النظام) */
.cxbar-wrap.nvc-desktop{ display:flex !important; }
.cxbar-pill{
flex:1;display:flex;align-items:center;gap:2px;height:64px;
background:rgba(18,22,28,.72);
-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
border:1px solid rgba(94,197,224,.18);border-radius:32px;padding:0 6px;
box-shadow:0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.cxbar-query{
width:64px;height:64px;flex-shrink:0;border-radius:50%;cursor:pointer;position:relative;
background:rgba(18,22,28,.72);
-webkit-backdrop-filter:blur(30px) saturate(180%);backdrop-filter:blur(30px) saturate(180%);
border:1px solid rgba(94,197,224,.22);color:#9aa8b2;
display:flex;align-items:center;justify-content:center;transition:all .35s cubic-bezier(.34,1.3,.5,1);
box-shadow:0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.cxbar-query svg{transition:transform .4s ease;}
.cxbar-query:hover{color:#5ec5e0;}
.cxbar-query:hover svg{transform:scale(1.06);}
.cxbar-query.on{color:#5ec5e0;border-color:#5ec5e0;box-shadow:0 0 0 1px #5ec5e0, 0 10px 30px rgba(94,197,224,.22);}
/* لمسة ساحرة هادئة: ومضة نجمة خفيفة جداً */
.cxq-spark{position:absolute;top:11px;left:13px;font-size:9px;color:#5ec5e0;opacity:0;
animation:cxSpark 4.5s ease-in-out infinite;pointer-events:none;}
@keyframes cxSpark{0%,92%,100%{opacity:0;transform:scale(.6);}96%{opacity:.85;transform:scale(1);}}
.cxtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:9px 2px;cursor:pointer;color:#7c8a94;font-size:9.5px;font-weight:700;font-family:inherit;
border:none;background:none;transition:all .25s ease;border-radius:20px;position:relative;}
.cxtab-ico{display:flex;align-items:center;justify-content:center;transition:all .3s cubic-bezier(.34,1.3,.5,1);}
.cxtab:active{transform:scale(.93);}
.cxtab.on{color:#5ec5e0;}
.cxtab.on .cxtab-ico{transform:translateY(-1px);filter:drop-shadow(0 3px 8px rgba(94,197,224,.45));}
.cxbadge{position:absolute;top:4px;left:calc(50% - 20px);min-width:16px;height:16px;border-radius:8px;
background:linear-gradient(135deg,#0ea5e9,#0284c7);color:#fff;font-size:9px;font-weight:900;
display:flex;align-items:center;justify-content:center;padding:0 4px;border:1.5px solid rgba(18,22,28,.9);}
/* نخفي الشريط القديم نهائياً */
.dash-bot-nav{display:none !important;}
/* ═══════════════════════════════════════════════════════════ */
/* 🌟 NOON-STYLE SIDEBAR — تصميم نظيف احترافي عصري */
/* ═══════════════════════════════════════════════════════════ */
.dash-sb{
--nsb-accent: #38bdf8;
background: linear-gradient(180deg,#0c1119,#0a0d13) !important;
}
/* رأس اليوم — بطاقة نظيفة */
.dash-sb .sb-day{
margin:10px 12px 6px !important;padding:16px !important;border-radius:18px !important;
background:linear-gradient(135deg, color-mix(in srgb, var(--nsb-accent) 12%, transparent), color-mix(in srgb, var(--nsb-accent) 4%, transparent)) !important;
border:1px solid color-mix(in srgb, var(--nsb-accent) 22%, transparent) !important;
}
.dash-sb .sb-day-val{color:var(--t1,#F4F0E6) !important;font-weight:900 !important;}
/* فواصل الأقسام — أنظف وأخف */
.dash-sb .sb-section-label{
font-size:10.5px !important;font-weight:800 !important;letter-spacing:.5px !important;
color:var(--t3,#7A7260) !important;opacity:.75;margin:16px 16px 7px !important;
padding:0 !important;background:none !important;border:none !important;text-transform:none;
}
/* عناصر التنقّل — صفوف نظيفة فسيحة (noon) */
.dash-sb .sb-nav-item{
display:flex !important;align-items:center !important;gap:13px !important;
padding:12px 14px !important;margin:2px 10px !important;border-radius:14px !important;
font-size:13.5px !important;font-weight:700 !important;color:var(--t2,#C8BFA8) !important;
border:none !important;background:transparent !important;transition:background .2s, color .2s !important;
}
.dash-sb .sb-nav-item:hover{ background:color-mix(in srgb, var(--nsb-accent) 8%, transparent) !important; color:var(--t1,#F4F0E6) !important; }
/* الأيقونة — حاوية مستقبلية متوهّجة */
.dash-sb .sb-nav-item .ni{
width:36px !important;height:36px !important;border-radius:11px !important;
background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.01)) !important;
border:1px solid rgba(255,255,255,.07) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.05) !important;
overflow:visible !important;transform:none !important;transition:all .22s cubic-bezier(.16,1,.3,1) !important;position:relative;
}
.dash-sb .sb-nav-item .ni::before{display:none !important;}
.dash-sb .sb-nav-item .ni::after{display:block !important;content:'' !important;position:absolute !important;inset:-3px;border-radius:13px;background:radial-gradient(circle,color-mix(in srgb,var(--nsb-accent) 40%,transparent),transparent 70%);opacity:0;transition:opacity .3s !important;z-index:-1;}
.dash-sb .sb-nav-item .ni svg{width:18px !important;height:18px !important;color:var(--t2,#C8BFA8) !important;stroke-width:2 !important;transition:color .22s,filter .22s !important;}
.dash-sb .sb-nav-item:hover .ni{transform:translateY(-1px) scale(1.05) !important;background:color-mix(in srgb,var(--nsb-accent) 12%,transparent) !important;border-color:color-mix(in srgb,var(--nsb-accent) 35%,transparent) !important;box-shadow:0 0 16px color-mix(in srgb,var(--nsb-accent) 25%,transparent) !important;}
.dash-sb .sb-nav-item:hover .ni::after{opacity:.5;}
.dash-sb .sb-nav-item.on .ni{background:linear-gradient(135deg,var(--nsb-accent),color-mix(in srgb,var(--nsb-accent) 65%,#0a3a52)) !important;border-color:transparent !important;box-shadow:0 6px 18px color-mix(in srgb,var(--nsb-accent) 40%,transparent),0 0 22px color-mix(in srgb,var(--nsb-accent) 25%,transparent) !important;}
.dash-sb .sb-nav-item.on .ni svg{color:#06121f !important;filter:none !important;}
.dash-sb .sb-nav-item.on .ni::after{opacity:.6 !important;}
.dash-sb .sb-nav-item:hover .ni svg{color:var(--nsb-accent) !important;}
/* النشط — حبّة ملوّنة بارزة (noon) */
.dash-sb .sb-nav-item.on{
background:color-mix(in srgb, var(--nsb-accent) 15%, transparent) !important;
color:var(--nsb-accent) !important;position:relative;
}
.dash-sb .sb-nav-item.on::before{
content:'' !important;position:absolute !important;right:0;top:18%;bottom:18%;width:3.5px;
border-radius:4px;background:var(--nsb-accent) !important;
}
/* الشارات — نظيفة */
.dash-sb .sb-badge{
margin-right:auto !important;border-radius:20px !important;padding:2px 9px !important;
font-size:10px !important;font-weight:800 !important;
}
/* العنصر المميّز (يتحكم به صاحب النظام) */
.dash-sb .sb-nav-item.sb-featured{
background:linear-gradient(135deg, var(--nsb-accent), color-mix(in srgb, var(--nsb-accent) 70%, #000)) !important;
color:#1a1500 !important;margin:8px 10px !important;box-shadow:0 8px 22px color-mix(in srgb, var(--nsb-accent) 35%, transparent) !important;
}
.dash-sb .sb-nav-item.sb-featured .ni svg{color:#1a1500 !important;}
.dash-sb .sb-nav-item.sb-featured::before{display:none !important;}
.dash-sb .sb-nav-item.sb-featured .sb-badge{background:rgba(0,0,0,.18) !important;color:#1a1500 !important;}
/* ═══════════════════════════════════════════════════════════ */
/* 📋 لوحة البيانات الكاملة — رأس + تخطيط (noon-style) */
/* ═══════════════════════════════════════════════════════════ */
.sb-panel-head{
display:none;align-items:center;gap:14px;
padding:16px 18px 12px;position:sticky;top:0;z-index:10;
background:var(--d1,#0b0c0f);
}
.sb-panel-head .sb-drawer-close{
display:flex;align-items:center;justify-content:center;
width:42px;height:42px;border-radius:50%;flex-shrink:0;
background:var(--d3,#131519);border:1px solid var(--bdr,rgba(201,168,76,.14));
color:var(--t1,#F4F0E6);cursor:pointer;transition:all .2s;
}
.sb-panel-head .sb-drawer-close:hover{background:var(--d2,#0E1014);border-color:var(--bdr2,rgba(201,168,76,.3));}
.sb-panel-title{font-size:21px;font-weight:900;color:var(--t1,#F4F0E6);margin-right:auto;}
/* على الجوال نُظهر الرأس ونخفي زر الإغلاق القديم العائم */
@media(max-width:1023px){
.sb-panel-head{display:flex;}
.dash-sb .sb-acts{padding:6px 16px 20px !important;}
/* محتوى متمركز ومريح على اللوحة الكاملة */
.dash-sb .sb-day{margin:6px 16px 4px !important;}
.dash-sb .sb-bottom-panel{padding:14px 16px calc(20px + env(safe-area-inset-bottom)) !important;}
/* صفوف تنقّل أوسع وأوضح على اللوحة الكاملة */
.dash-sb .sb-nav-item{padding:14px 16px !important;font-size:14.5px !important;}
.dash-sb .sb-nav-item .ni svg{width:22px !important;height:22px !important;}
}
/* على سطح المكتب: يبقى زر الإغلاق العائم القديم (الرأس مخفي) */
@media(min-width:1024px){
.sb-panel-head{display:none;}
}
/* ═══════════════════════════════════════════════════════════ */
/* 🎯 لوحة نون الكاملة — ملف شخصي + بطاقات + إجراءات */
/* ═══════════════════════════════════════════════════════════ */
@media(max-width:1023px){
.dash-sb{ padding:0 0 env(safe-area-inset-bottom) !important; }
.sb-panel-head{ justify-content:space-between; padding:16px 18px 4px !important; }
.sb-head-logout{
display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
color:#3b82f6;font-family:inherit;font-size:15px;font-weight:800;padding:8px;
}
.sb-panel-titlebig{
font-size:30px;font-weight:900;color:var(--t1,#F4F0E6);
padding:6px 20px 18px;line-height:1.2;
}
/* بطاقة الملف الشخصي */
.sb-profile{
display:flex;align-items:center;justify-content:center;gap:14px;margin:0 16px 18px;padding:16px 14px;
}
.sb-profile-avatar{
width:54px;height:54px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
font-size:22px;font-weight:900;color:#1a1500;background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));
box-shadow:0 6px 18px rgba(201,168,76,.3);overflow:hidden;
}
.sb-profile-avatar img{width:100%;height:100%;object-fit:cover;}
.sb-profile-info{flex:1;min-width:0;}
.sb-profile-name{font-size:14px;font-weight:900;color:var(--t1,#F4F0E6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-profile-sub{font-size:13px;color:var(--t3,#7A7260);font-weight:600;margin-top:3px;}
/* صف بطاقات المعلومات */
.sb-stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 16px 22px;}
.sb-stat-card{
background:var(--d3,#131519);border:1px solid var(--bdr,rgba(201,168,76,.1));border-radius:18px;
padding:16px 10px;text-align:center;cursor:pointer;transition:all .25s;
}
.sb-stat-card:active{transform:scale(.96);}
.sb-stat-card:hover{border-color:var(--bdr2,rgba(201,168,76,.3));}
.sb-stat-ico{width:42px;height:42px;margin:0 auto 9px;border-radius:13px;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,rgba(201,168,76,.16),rgba(201,168,76,.05));color:var(--g1,#C9A84C);border:1px solid rgba(201,168,76,.18);}
.sb-stat-num{font-size:20px;font-weight:900;color:var(--t1,#F4F0E6);}
.sb-stat-lbl{font-size:11px;color:var(--t3,#7A7260);font-weight:700;margin-top:2px;}
/* القائمة كإجراءات سريعة بأسهم */
.dash-sb .sb-acts{padding:0 16px 16px !important;}
.dash-sb .sb-nav-item{
border-radius:0 !important;margin:0 !important;padding:16px 4px !important;
border-bottom:1px solid var(--bdr,rgba(201,168,76,.08)) !important;
flex-direction:row-reverse !important;background:none !important;
}
.dash-sb .sb-nav-item.on{background:none !important;}
.dash-sb .sb-nav-item.on::before{display:none !important;}
.dash-sb .sb-nav-item .nl{margin-right:0 !important;}
/* محاذاة لليمين (RTL): المحتوى يلتصق بالحافة اليمنى */
.dash-sb .sb-nav-item{flex-direction:row !important;justify-content:flex-start !important;gap:13px;text-align:right;direction:rtl;}
.dash-sb .sb-nav-item .ni{flex:0 0 auto !important;order:1 !important;}
.dash-sb .sb-nav-item .nl{flex:0 0 auto !important;margin:0 !important;order:2 !important;}
.dash-sb .sb-nav-item .sb-badge{margin:0 !important;flex:0 0 auto !important;order:3 !important;}
/* العنصر المميّز يبقى بارزاً */
.dash-sb .sb-nav-item.sb-featured{border-radius:16px !important;margin:10px 0 !important;padding:16px !important;border-bottom:none !important;}
}
/* ⭐ بطاقة العنصر المميّز الفاخرة */
#sb-featured-slot{padding:0 16px 18px;}
.sb-featured-card{
position:relative;display:flex;align-items:center;gap:14px;padding:18px 18px;border-radius:20px;cursor:pointer;
background:linear-gradient(135deg, var(--fa,#C9A84C), color-mix(in srgb, var(--fa,#C9A84C) 60%, #000));
box-shadow:0 12px 30px color-mix(in srgb, var(--fa,#C9A84C) 38%, transparent);
overflow:hidden;transition:transform .25s;
}
.sb-featured-card:active{transform:scale(.97);}
.sb-fc-glow{position:absolute;top:-50%;left:-20%;width:160px;height:160px;border-radius:50%;
background:radial-gradient(circle,rgba(255,255,255,.25),transparent 70%);pointer-events:none;}
.sb-fc-ico{width:50px;height:50px;border-radius:15px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.2);position:relative;z-index:1;}
.sb-fc-ico svg{width:26px;height:26px;color:#fff;stroke-width:2;}
.sb-fc-body{flex:1;position:relative;z-index:1;}
.sb-fc-label{font-size:18px;font-weight:900;color:#fff;}
.sb-fc-hint{font-size:12px;color:rgba(255,255,255,.8);font-weight:600;margin-top:2px;}
.sb-fc-arrow{color:rgba(255,255,255,.9);position:relative;z-index:1;}
/* 🔁 زر تصفير الحساب المميّز (أسفل اللوحة) */
.sb-reset-feature{
display:flex;align-items:center;gap:13px;width:100%;cursor:pointer;
padding:15px 16px;border-radius:16px;margin-bottom:12px;font-family:inherit;text-align:right;
background:linear-gradient(135deg,rgba(239,68,68,.16),rgba(220,38,38,.06));
border:1px solid rgba(239,68,68,.3);transition:all .25s;
}
.sb-reset-feature:hover{background:linear-gradient(135deg,rgba(239,68,68,.24),rgba(220,38,38,.1));border-color:rgba(239,68,68,.5);}
.sb-reset-feature:active{transform:scale(.98);}
.sb-rf-ico{width:42px;height:42px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:rgba(239,68,68,.18);color:#f87171;border:1px solid rgba(239,68,68,.25);}
.sb-rf-body{display:flex;flex-direction:column;flex:1;}
.sb-rf-title{font-size:15px;font-weight:900;color:#fca5a5;}
.sb-rf-sub{font-size:11.5px;color:rgba(248,113,113,.7);font-weight:600;margin-top:2px;}
@media(max-width:1023px){
/* لوحة الأسفل تلتصق بأسفل اللوحة الكاملة */
.dash-sb .sb-bottom-panel{margin-top:auto;border-top:1px solid var(--bdr,rgba(201,168,76,.1));}
}
/* فواصل أقسام أنيقة مريحة في اللوحة الكاملة */
@media(max-width:1023px){
.dash-sb .sb-section-label{
font-size:11px !important;font-weight:800 !important;letter-spacing:.4px !important;
color:var(--g2,#E8C96A) !important;opacity:.7 !important;
margin:20px 4px 8px !important;padding:0 0 8px !important;
border-bottom:1px solid var(--bdr,rgba(201,168,76,.1)) !important;
background:none !important;text-align:right;
}
.dash-sb .sb-section-label:first-of-type{margin-top:8px !important;}
/* عنصر التنقّل بلا حد سفلي مزعج — فاصل خفيف فقط */
.dash-sb .sb-acts .sb-nav-item{
border-bottom:1px solid rgba(201,168,76,.05) !important;
}
}
/* ⚡ أيقونات الوصول السريع الأفقية في اللوحة */
.sb-quick-icons{display:flex;gap:10px;padding:0 16px 18px;}
.sb-quick-icons .sb-qi{
flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;
padding:14px 6px;border-radius:16px;background:var(--d3,#131519);
border:1px solid var(--bdr,rgba(201,168,76,.1));transition:all .2s;min-width:0;
}
.sb-quick-icons .sb-qi:active{transform:scale(.95);}
.sb-quick-icons .sb-qi:hover{border-color:var(--bdr2,rgba(201,168,76,.3));border-radius:50% !important;aspect-ratio:1 !important;}
.sb-quick-icons .sb-qi-ico{width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--g1,#C9A84C);}
.sb-quick-icons .sb-qi-ico svg{width:24px;height:24px;}
.sb-quick-icons .sb-qi-lbl{font-size:10.5px;font-weight:700;color:var(--t2,#C8BFA8);text-align:center;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
/* فاصل أقسام راقٍ في اللوحة الكاملة */
@media(max-width:1023px){
.dash-sb .sb-dyn-section{
display:flex !important;align-items:center;gap:12px;
font-size:11.5px !important;font-weight:800 !important;letter-spacing:.5px !important;
color:var(--g2,#E8C96A) !important;opacity:.85 !important;
margin:22px 4px 10px !important;padding:0 !important;border:none !important;background:none !important;
}
.dash-sb .sb-dyn-section::before{
content:'' !important;flex:1;height:1px;
background:linear-gradient(90deg,transparent,var(--bdr2,rgba(201,168,76,.3))) !important;
}
.dash-sb .sb-dyn-section::after{
content:'' !important;flex:1;height:1px;
background:linear-gradient(90deg,var(--bdr2,rgba(201,168,76,.3)),transparent) !important;
}
}
/* أيقونات الوصول السريع — حجم ثابت + زجاجية ساحرة */
@media(max-width:1023px){
.sb-quick-icons{display:flex !important;gap:8px;padding:0 16px 18px;justify-content:space-between;flex-wrap:nowrap !important;}
.sb-quick-icons .sb-qi{
flex:1 1 0 !important;min-width:0 !important;display:flex !important;flex-direction:column;
align-items:center;justify-content:center;gap:6px;cursor:pointer;position:relative;overflow:hidden;
/* زجاج فاخر */
background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
border:1px solid rgba(255,255,255,.12) !important;
backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
box-shadow:0 8px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.15) !important;
transition:transform .25s cubic-bezier(.34,1.4,.5,1), box-shadow .25s, border-color .25s;
}
/* لمعة زجاجية علوية */
.sb-quick-icons .sb-qi::before{
content:'';position:absolute;top:0;left:0;right:0;height:50%;border-radius:inherit;
background:linear-gradient(180deg, rgba(255,255,255,.12), transparent);pointer-events:none;
}
.sb-quick-icons .sb-qi:active{transform:scale(.93);}
.sb-quick-icons .sb-qi:hover{transform:translateY(-3px);border-color:var(--bdr2,rgba(201,168,76,.4)) !important;
box-shadow:0 14px 32px rgba(0,0,0,.4), 0 0 20px rgba(201,168,76,.18), inset 0 1px 0 rgba(255,255,255,.2) !important;}
/* مربّع */
.sb-quick-icons.qs-square .sb-qi{border-radius:16px !important;aspect-ratio:1 !important;padding:6px !important;}
/* دائرة */
.sb-quick-icons.qs-circle .sb-qi{border-radius:50% !important;aspect-ratio:1 !important;padding:6px !important;}
/* مستطيل */
.sb-quick-icons.qs-rect .sb-qi{border-radius:14px !important;aspect-ratio:auto !important;min-height:62px;padding:8px 4px !important;}
.sb-quick-icons.qs-nolabel .sb-qi{gap:0 !important;}
.sb-quick-icons .sb-qi-ico{width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--g1,#C9A84C);position:relative;z-index:1;}
.sb-quick-icons .sb-qi-ico svg{width:21px;height:21px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25));}
.sb-quick-icons .sb-qi-lbl{font-size:8.5px;font-weight:700;color:var(--t2,#C8BFA8);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;position:relative;z-index:1;line-height:1.2;}
}
/* عنوان الإجراءات كآخر عنصر */
@media(max-width:1023px){
.dash-sb .sb-quick-bottom{text-align:right;opacity:.85;margin:0 0 14px !important;
color:var(--g2,#E8C96A) !important;border:none !important;padding:0 0 8px !important;
border-bottom:1px solid var(--bdr,rgba(201,168,76,.1)) !important;}
}
/* تخطيط اللوحة الكاملة: التبويبات تتمدّد، الأزرار أسفلها */
@media(max-width:1023px){
.dash-sb{display:flex !important;flex-direction:column !important;}
.dash-sb .sb-acts{flex:1 0 auto !important;}
.dash-sb .sb-bottom-panel{flex-shrink:0 !important;margin-top:0 !important;}
}
/* علاج اختفاء الجزء السفلي: ارتفاع ديناميكي + مساحة آمنة + تمرير */
@media(max-width:1023px){
.dash-sb{
height:100dvh !important;max-height:100dvh !important;
overflow-y:auto !important;-webkit-overflow-scrolling:touch;
}
.dash-sb .sb-bottom-panel{
padding-bottom:calc(24px + env(safe-area-inset-bottom, 20px)) !important;
}
}
/* تاريخ اليوم في بطاقة الملف بالوحة */
@media(max-width:1023px){
.sb-profile-date{font-size:12px;font-weight:700;color:var(--g2,#E8C96A);margin-top:5px;opacity:.85;}
.sb-profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;padding:0;}
}
/* زر فتح اللوحة في الهيدر (مكان اسم المركز) */
.dhp-panel-trigger{
display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;cursor:pointer;
/* زجاجي ديناميكي افتراضي */
background:linear-gradient(135deg, color-mix(in srgb, var(--nvc-accent,#5ec5e0) 22%, transparent), color-mix(in srgb, var(--nvc-accent,#5ec5e0) 8%, transparent));
border:1px solid color-mix(in srgb, var(--nvc-accent,#5ec5e0) 40%, transparent);
color:var(--nvc-accent,#5ec5e0);transition:all .2s;
backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%);
box-shadow:0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.12);
}
.dhp-panel-trigger:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.18);}
.dhp-panel-trigger:active{transform:scale(.94);}
/* شريط اليوم يحتضن الفلتر + PDF (نظيف بلا بطاقة) */
.dash-day-bar-filter{display:flex;align-items:center;gap:10px;}
.dash-day-bar-filter > #dash-rec-filter{flex:1 1 auto;min-width:0;}
.dash-day-bar-filter > .pdf-export-btn{flex:0 0 auto;}
@media(max-width:560px){
.dash-day-bar-filter > .pdf-export-btn .pdf-btn-text{display:none;}
}
/* 🎨 فلتر التذاكر — تصميم متناغم فاخر */
#dash-rec-filter{
appearance:none;-webkit-appearance:none;-moz-appearance:none;
font-family:var(--font);font-size:13px;font-weight:800;color:var(--t1,#F4F0E6);
background:linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.04));
border:1px solid var(--bdr2,rgba(201,168,76,.25));
border-radius:13px;padding:11px 16px;cursor:pointer;outline:none;
text-align:right;direction:rtl;
background-image:
linear-gradient(135deg, rgba(201,168,76,.12), rgba(201,168,76,.04)),
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C9A84C' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat,no-repeat;
background-position:center,left 14px center;
background-size:cover,14px;
padding-left:38px;
transition:all .25s;
box-shadow:0 4px 14px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.05);
}
#dash-rec-filter:hover{border-color:var(--bdr2,rgba(201,168,76,.45));}
#dash-rec-filter:focus{border-color:var(--g1,#C9A84C);box-shadow:0 0 0 3px rgba(201,168,76,.15);}
#dash-rec-filter option{background:var(--d2,#0E1014);color:var(--t1,#F4F0E6);font-weight:700;padding:8px;}
/* الشريط نفسه أنظف */
.dash-day-bar-filter{padding:12px 14px !important;background:transparent !important;border-bottom:1px solid var(--bdr,rgba(201,168,76,.08)) !important;}
/* ═══ أوضاع القائمة السفلية ═══ */
.cxbar-wrap.cxbar-hidden{display:none !important;}
.cxbar-wrap.cxbar-vertical{display:none !important;} /* نستبدلها بالزر المنبثق */
/* الزر العائم الزجاجي للوضع الطولي */
.cx-vfab{
position:fixed;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:9000;
width:54px;height:54px;border-radius:50%;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:transform .3s cubic-bezier(.34,1.5,.5,1);
}
.cx-vfab-right{right:18px;left:auto;}
.cx-vfab-left{left:18px;right:auto;}
/* الشكل يتأثر بشكل القائمة السفلية */
.cx-vfab.cx-vshape-minimal{border-radius:16px;}
.cx-vfab.cx-vshape-full{border-radius:14px;}
.cx-vfab.on{transform:rotate(90deg) scale(1.06);}
.cx-vfab:active{transform:scale(.92);}
/* اللوحة الطولية المنبثقة — أيقونات فقط */
.cx-vsheet{
position:fixed;bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:9000;
display:flex;flex-direction:column;gap:10px;
opacity:0;pointer-events:none;transform:translateY(20px) scale(.9);transform-origin:bottom;
transition:opacity .3s, transform .3s cubic-bezier(.34,1.5,.5,1);
}
.cx-vsheet-right{right:18px;left:auto;align-items:center;}
.cx-vsheet-left{left:18px;right:auto;align-items:center;}
.cx-vsheet.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.cx-vitem{
display:flex;align-items:center;justify-content:center;cursor:pointer;font-family:inherit;
width:54px;height:54px;border-radius:50%;padding:0;
box-shadow:0 8px 24px rgba(0,0,0,.4);
animation:cxVItemIn .35s cubic-bezier(.34,1.4,.5,1) backwards;
}
/* الشكل يتبع القائمة السفلية */
.cx-vsheet.cx-vshape-minimal .cx-vitem,.cx-vsheet.cx-vshape-full .cx-vitem{border-radius:15px;}
@keyframes cxVItemIn{from{opacity:0;transform:translateY(12px) scale(.85);}to{opacity:1;transform:none;}}
.cx-vsheet.open .cx-vitem:nth-child(1){animation-delay:.03s;}
.cx-vsheet.open .cx-vitem:nth-child(2){animation-delay:.07s;}
.cx-vsheet.open .cx-vitem:nth-child(3){animation-delay:.11s;}
.cx-vsheet.open .cx-vitem:nth-child(4){animation-delay:.15s;}
.cx-vsheet.open .cx-vitem:nth-child(5){animation-delay:.19s;}
.cx-vsheet.open .cx-vitem:nth-child(6){animation-delay:.23s;}
.cx-vitem-ico{width:26px;height:26px;display:flex;align-items:center;justify-content:center;}
.cx-vitem-ico svg{width:23px;height:23px;}
@media(min-width:1024px){ .cx-vfab,.cx-vsheet{display:none !important;} }
/* الهيدر الأبيض — قلب ألوان النص والأيقونات */
.dash-hdr-pro.hdr-light .dhp-brand-name,
.dash-hdr-pro.hdr-light .dhp-panel-trigger{color:#1a1a1a !important;}
.dash-hdr-pro.hdr-light .dhp-panel-trigger{background:linear-gradient(135deg,rgba(0,0,0,.06),rgba(0,0,0,.02)) !important;border-color:rgba(0,0,0,.12) !important;}
.dash-hdr-pro.hdr-light .notif-bell{background:rgba(168,85,247,.1) !important;}
.dash-hdr-pro.hdr-light svg{color:#333 !important;}
.dash-hdr-pro.hdr-light .notif-bell svg{color:#a855f7 !important;}
/* ظهور الجرس عند إشعار جديد */
@keyframes notifPop{0%{transform:scale(0) rotate(-30deg);opacity:0;}60%{transform:scale(1.2) rotate(8deg);}100%{transform:scale(1) rotate(0);opacity:1;}}
.notif-bell.notif-pop{animation:notifPop .5s cubic-bezier(.34,1.56,.5,1);}
.notif-bell.notif-pop svg{animation:notifShake .9s cubic-bezier(.36,.07,.19,.97) .5s infinite;transform-origin:top center;}
/* تأثير لطيف للزر المنبثق الطولي عند الفتح */
.cx-vfab{position:relative;}
.cx-vfab::after{content:'';position:absolute;inset:-4px;border-radius:inherit;border:2px solid currentColor;opacity:0;pointer-events:none;}
.cx-vfab.on::after{animation:vfabRing .6s ease-out;}
@keyframes vfabRing{0%{opacity:.5;transform:scale(1);}100%{opacity:0;transform:scale(1.4);}}
.cx-vitem{transition:transform .2s cubic-bezier(.34,1.5,.5,1);}
.cx-vitem:hover{transform:scale(1.12);}
.cx-vitem:active{transform:scale(.9);}
/* تأثير لطيف على زر القائمة الطولية */
@keyframes cxFabBreathe{
0%,100%{box-shadow:0 8px 26px rgba(0,0,0,.3), 0 0 0 0 rgba(255,255,255,.04);}
50%{box-shadow:0 10px 32px rgba(0,0,0,.4), 0 0 0 6px rgba(255,255,255,.03);}
}
.cx-vfab{ animation:cxFabBreathe 3.2s ease-in-out infinite; }
.cx-vfab:hover{ animation:none; transform:translateY(-3px) scale(1.06); }
.cx-vfab svg{ transition:transform .3s; }
.cx-vfab.on svg{ transform:rotate(90deg); }
/* لمعة دائرية تمر على الزر بين الحين والآخر */
.cx-vfab::after{
content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:linear-gradient(120deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
background-size:250% 100%;background-position:200% 0;
animation:cxFabShine 4.5s ease-in-out infinite;
}
@keyframes cxFabShine{ 0%,70%{background-position:200% 0;} 85%,100%{background-position:-100% 0;} }
.cx-vfab{position:fixed;overflow:hidden;}
/* ظهور + تنبيه الجرس عند إشعار جديد */
@keyframes notifPop{
0%{transform:scale(0) rotate(-30deg);opacity:0;}
60%{transform:scale(1.2) rotate(8deg);opacity:1;}
100%{transform:scale(1) rotate(0);opacity:1;}
}
.notif-bell.notif-pop{ animation:notifPop .5s cubic-bezier(.34,1.6,.5,1); }
/* شارة تعديل الصورة الشخصية في اللوحة */
.sb-avatar-edit{
position:absolute;bottom:-2px;left:-2px;width:24px;height:24px;border-radius:50%;
background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));color:#1a1500;
display:flex;align-items:center;justify-content:center;
border:2px solid var(--d2,#0E1014);box-shadow:0 2px 8px rgba(0,0,0,.4);
}
/* القائمة الطولية: الحبّات داخل حاوية واحدة (مثل الشريط الأفقي) + الدائرة منفصلة */
.cx-vsheet .cx-vpill-group{
display:flex;flex-direction:column;gap:0;
background:rgba(14,16,20,.9);border:1px solid var(--bdr2,rgba(201,168,76,.22));
border-radius:26px;padding:6px;
backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%);
box-shadow:0 10px 30px rgba(0,0,0,.45);
}
.cx-vsheet .cx-vpill-group .cx-vitem{
background:transparent !important;border:none !important;box-shadow:none !important;
width:50px !important;height:50px !important;border-radius:18px !important;
}
.cx-vsheet .cx-vpill-group .cx-vitem.on,
.cx-vsheet .cx-vpill-group .cx-vitem:active{ background:rgba(255,255,255,.06) !important; }
/* الدائرة المنفصلة */
.cx-vsheet .cx-vitem-circle{ margin-top:4px; }
/* صورة الموظف تملأ الدائرة بالكامل بلا إطار */
.sb-profile-avatar{position:relative;overflow:visible !important;padding:0 !important;}
.sb-profile-avatar img{
position:absolute;inset:0;width:100% !important;height:100% !important;
object-fit:cover !important;border-radius:50% !important;
border:none !important;box-shadow:none !important;padding:0 !important;
}
.sb-profile-avatar .sb-avatar-edit{z-index:3;}
/* أشكال القائمة الطولية (تتبع shape القائمة السفلية) */
.cx-vsheet .cx-vpg-circle .cx-vitem{border-radius:50% !important;}
.cx-vsheet .cx-vpg-floating{background:transparent !important;border:none !important;box-shadow:none !important;gap:8px !important;backdrop-filter:none !important;}
.cx-vsheet .cx-vpg-floating .cx-vitem{background:rgba(14,16,20,.85) !important;border:1px solid rgba(201,168,76,.25) !important;border-radius:50% !important;box-shadow:0 6px 18px rgba(0,0,0,.4) !important;}
.cx-vsheet .cx-vpg-minimal{background:transparent !important;border:none !important;box-shadow:none !important;backdrop-filter:none !important;padding:0 !important;gap:4px !important;}
.cx-vsheet .cx-vpg-minimal .cx-vitem{background:transparent !important;}
/* خطوة اختيار سنة الصنع داخل لوحة الطراز */
.model-year-step{padding:14px 16px 18px;max-height:60vh;overflow-y:auto;}
.myr-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.myr-back{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--t2,#c8bfa8);cursor:pointer;transition:all .15s;}
.myr-back:hover{background:rgba(255,255,255,.12);transform:translateX(2px);}
.myr-title{font-size:13.5px;font-weight:900;color:var(--t1,#f4f0e6);}
.myr-title span{color:var(--g1,#C9A84C);}
.myr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;}
.myr-cell{
padding:13px 6px;border-radius:12px;cursor:pointer;
background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.03));
border:1px solid rgba(201,168,76,.2);
color:var(--t1,#f4f0e6);font-family:var(--font);font-size:14px;font-weight:800;
transition:all .15s;direction:ltr;
}
.myr-cell:hover{background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));color:#1a1500;transform:translateY(-2px);box-shadow:0 6px 16px rgba(201,168,76,.35);}
.myr-cell:active{transform:scale(.95);}
@media (max-width:520px){.myr-grid{grid-template-columns:repeat(3,1fr);}}
/* 🧮 حاسبة الضريبة حسب الفترة */
.vat-calc-box{
background:linear-gradient(135deg,rgba(20,22,28,.9),rgba(14,16,20,.95));
border:1px solid var(--bdr2,rgba(201,168,76,.25));
border-radius:20px;padding:18px;margin-bottom:16px;
position:relative;overflow:hidden;
}
.vat-calc-box::before{content:'';position:absolute;top:-40%;left:-20%;width:60%;height:120%;background:radial-gradient(circle,rgba(201,168,76,.08),transparent 70%);pointer-events:none;}
.vat-calc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:15px;position:relative;}
.vat-calc-head-l{display:flex;align-items:center;gap:11px;}
.vat-calc-ico{width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));display:flex;align-items:center;justify-content:center;font-size:21px;box-shadow:0 6px 18px rgba(201,168,76,.3);flex-shrink:0;}
.vat-calc-title{font-size:15px;font-weight:900;color:var(--t1,#F4F0E6);}
.vat-calc-sub{font-size:10.5px;color:var(--t3,#7A7260);font-weight:700;margin-top:2px;}
.vat-calc-total{text-align:left;flex-shrink:0;}
.vat-calc-total-lbl{font-size:9px;color:var(--t3);font-weight:800;margin-bottom:2px;}
.vat-calc-total-val{font-size:22px;font-weight:900;color:var(--g2,#E8C96A);direction:ltr;line-height:1;}
.vat-calc-total-val span{font-size:12px;margin-right:2px;opacity:.7;}
.vat-calc-periods{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:13px;position:relative;}
.vat-period-btn{
display:flex;flex-direction:column;align-items:center;gap:4px;
padding:11px 5px;border-radius:13px;cursor:pointer;
background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
color:var(--t2,#C8BFA8);font-family:var(--font);font-size:11px;font-weight:800;
transition:all .18s;font-size:18px;
}
.vat-period-btn span{font-size:10.5px;}
.vat-period-btn:hover{background:rgba(201,168,76,.08);border-color:var(--bdr2);}
.vat-period-btn.is-on{
background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));
border-color:var(--g2);color:#1a1500;box-shadow:0 6px 16px rgba(201,168,76,.35);
}
.vat-calc-range{
display:flex;align-items:center;gap:7px;justify-content:center;
background:rgba(201,168,76,.06);border:1px solid var(--bdr);border-radius:10px;
padding:8px 12px;margin-bottom:13px;font-size:11px;font-weight:800;color:var(--t2);
}
.vat-calc-range-ico{font-size:13px;}
.vat-calc-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.vat-calc-cell{border-radius:13px;padding:12px 13px;border:1px solid;}
.vat-cell-cash{background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.2);}
.vat-cell-bank{background:rgba(59,130,246,.06);border-color:rgba(59,130,246,.2);}
.vat-cell-h{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:900;color:var(--t1);margin-bottom:6px;}
.vat-cell-h b{direction:ltr;}
.vat-cell-cash .vat-cell-h b{color:#4ade80;}
.vat-cell-bank .vat-cell-h b{color:#60A5FA;}
.vat-cell-meta{display:flex;flex-direction:column;gap:3px;font-size:9.5px;color:var(--t3);font-weight:700;}
.vat-calc-carry-note{
background:rgba(168,85,247,.08);border:1px solid rgba(168,85,247,.25);border-radius:10px;
padding:8px 12px;font-size:10px;font-weight:800;color:#c084fc;margin-bottom:12px;line-height:1.6;
}
.vat-calc-foot{border-top:1px dashed var(--bdr2);padding-top:11px;}
.vat-calc-foot-row{display:flex;align-items:center;justify-content:space-between;font-size:11.5px;font-weight:700;color:var(--t2);padding:5px 0;}
.vat-calc-foot-row b{direction:ltr;color:var(--t1);font-weight:900;}
.vat-calc-foot-total{margin-top:5px;padding:11px 13px;background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(160,120,48,.05));border:1px solid var(--bdr2);border-radius:11px;}
.vat-calc-foot-total span{color:var(--g2);font-weight:900;font-size:12.5px;}
.vat-calc-foot-total b{color:var(--g2);font-size:16px;}
@media (max-width:520px){
.vat-calc-periods{grid-template-columns:repeat(2,1fr);}
.vat-calc-split{grid-template-columns:1fr;}
.vat-calc-total-val{font-size:18px;}
}
/* 🗂 نظرة الصناديق في الخزنة */
.tbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin-bottom:16px;}
.tbox{
background:linear-gradient(135deg,rgba(20,22,28,.85),rgba(14,16,20,.92));
border:1px solid var(--tbc,rgba(201,168,76,.25));border-radius:16px;padding:14px;
position:relative;overflow:hidden;
}
.tbox::before{content:'';position:absolute;top:0;right:0;width:60px;height:60px;background:radial-gradient(circle,var(--tbc),transparent 70%);opacity:.12;pointer-events:none;}
.tbox-h{display:flex;align-items:center;gap:9px;margin-bottom:9px;}
.tbox-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.tbox-ttl{font-size:12px;font-weight:900;color:var(--t1,#F4F0E6);}
.tbox-amt{font-size:21px;font-weight:900;direction:ltr;line-height:1;}
.tbox-amt span{font-size:11px;margin-right:2px;opacity:.7;}
.tbox-sub{font-size:9.5px;color:var(--t3,#7A7260);font-weight:700;margin-top:4px;}
.tbox-months{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px;padding-top:9px;border-top:1px dashed rgba(255,255,255,.07);}
.tbox-chip{font-size:8.5px;font-weight:800;background:rgba(255,255,255,.05);color:var(--t2,#C8BFA8);border:1px solid rgba(255,255,255,.08);padding:2px 7px;border-radius:50px;direction:rtl;white-space:nowrap;}
.tbox-chip-empty{opacity:.5;}
.tbox-pay-btn{margin-top:10px;width:100%;padding:8px;border-radius:10px;border:1px solid var(--tbc);background:color-mix(in srgb, var(--tbc) 12%, transparent);color:var(--tbc);font-family:var(--font);font-size:11px;font-weight:900;cursor:pointer;transition:all .15s;}
.tbox-pay-btn:hover{background:var(--tbc);color:#1a1500;}
@media (max-width:520px){
.tbox-grid{grid-template-columns:1fr;}
.tbox-amt{font-size:19px;}
}
/* 🪄 لوحة العرض السريعة */
.qd-hero{
position:relative;overflow:hidden;border-radius:22px;padding:22px;margin-bottom:18px;
background:linear-gradient(135deg,rgba(201,168,76,.14),rgba(160,120,48,.04));
border:1px solid var(--bdr2,rgba(201,168,76,.25));
}
.qd-hero-orb{position:absolute;border-radius:50%;filter:blur(45px);opacity:.4;pointer-events:none;}
.qd-orb-1{width:160px;height:160px;background:radial-gradient(circle,rgba(201,168,76,.5),transparent 70%);top:-50px;right:-30px;}
.qd-orb-2{width:130px;height:130px;background:radial-gradient(circle,rgba(34,197,94,.35),transparent 70%);bottom:-40px;left:-20px;}
.qd-hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;position:relative;flex-wrap:wrap;gap:8px;}
.qd-hero-badge{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:900;color:var(--g2,#E8C96A);background:rgba(201,168,76,.1);border:1px solid var(--bdr2);padding:6px 13px;border-radius:50px;}
.qd-hero-dot{width:7px;height:7px;border-radius:50%;background:var(--g2);box-shadow:0 0 8px var(--g2);animation:qdPulse 2s infinite;}
@keyframes qdPulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.qd-hero-period{font-size:11px;font-weight:800;color:var(--t2,#C8BFA8);}
.qd-hero-main{position:relative;text-align:center;}
.qd-hero-lbl{font-size:12px;font-weight:800;color:var(--t2);margin-bottom:7px;}
.qd-hero-val{font-size:42px;font-weight:900;color:var(--g2,#E8C96A);direction:ltr;line-height:1;letter-spacing:-1px;}
.qd-hero-unit{font-size:18px;margin-right:5px;opacity:.6;}
.qd-hero-sub{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:11px;font-size:12px;font-weight:800;flex-wrap:wrap;}
.qd-hero-sep{color:var(--t3);}
.qd-row-title{font-size:12.5px;font-weight:900;color:var(--t2,#C8BFA8);margin:18px 2px 11px;display:flex;align-items:center;gap:6px;}
.qd-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.qd-grid-3{grid-template-columns:repeat(3,1fr);}
.qd-card{
position:relative;overflow:hidden;border-radius:17px;padding:16px;
background:linear-gradient(135deg,rgba(20,22,28,.9),rgba(14,16,20,.95));
border:1px solid var(--qdc,rgba(201,168,76,.2));
transition:transform .2s,box-shadow .2s;
}
.qd-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.35);}
.qd-card-glow{position:absolute;top:-30%;right:-20%;width:80px;height:80px;border-radius:50%;background:radial-gradient(circle,var(--qdc),transparent 70%);opacity:.16;pointer-events:none;}
.qd-card-ico{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:11px;box-shadow:0 5px 14px rgba(0,0,0,.3);}
.qd-card-lbl{font-size:11px;font-weight:800;color:var(--t2,#C8BFA8);margin-bottom:5px;}
.qd-card-val{font-size:23px;font-weight:900;direction:ltr;line-height:1;letter-spacing:-.5px;}
.qd-card-val span{font-size:12px;margin-right:3px;opacity:.65;}
.qd-card-sub{font-size:9.5px;color:var(--t3,#7A7260);font-weight:700;margin-top:6px;}
.qd-foot{text-align:center;margin-top:18px;padding:12px;font-size:10.5px;color:var(--t3);font-weight:700;background:rgba(255,255,255,.02);border:1px dashed var(--bdr);border-radius:12px;}
@media (max-width:560px){
.qd-grid-3{grid-template-columns:1fr;}
.qd-hero-val{font-size:34px;}
.qd-card-val{font-size:20px;}
}
/* لوحة سريعة — فلتر الأشهر والمعادلة */
.qd-monthnav{display:flex;align-items:center;gap:10px;margin-bottom:11px;}
.qd-nav-arrow{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid var(--bdr,rgba(201,168,76,.1));color:var(--t2,#C8BFA8);cursor:pointer;transition:all .15s;}
.qd-nav-arrow:hover{background:rgba(201,168,76,.1);border-color:var(--bdr2);color:var(--g2);}
.qd-nav-center{flex:1;text-align:center;cursor:pointer;background:linear-gradient(135deg,rgba(201,168,76,.08),rgba(201,168,76,.02));border:1px solid var(--bdr2,rgba(201,168,76,.25));border-radius:14px;padding:8px;transition:all .15s;}
.qd-nav-center:hover{background:rgba(201,168,76,.12);}
.qd-nav-status{font-size:9.5px;font-weight:800;color:var(--t3,#7A7260);margin-bottom:2px;}
.qd-nav-month{font-size:15px;font-weight:900;color:var(--t1,#F4F0E6);}
.qd-pills{display:flex;gap:7px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;-webkit-overflow-scrolling:touch;}
.qd-pills::-webkit-scrollbar{height:0;}
.qd-pill{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:1px;min-width:54px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);color:var(--t2,#C8BFA8);cursor:pointer;font-family:var(--font);transition:all .15s;}
.qd-pill:hover{background:rgba(201,168,76,.08);}
.qd-pill-m{font-size:11px;font-weight:900;}
.qd-pill-y{font-size:8.5px;font-weight:700;opacity:.6;}
.qd-pill.is-on{background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));border-color:var(--g2);color:#1a1500;box-shadow:0 5px 14px rgba(201,168,76,.3);}
.qd-pill.is-now:not(.is-on){border-color:var(--bdr2);}
.qd-pill.is-now:not(.is-on) .qd-pill-m::after{content:' •';color:var(--g2);}
.qd-grid-2{grid-template-columns:1fr 1fr;}
.qd-equation{margin-top:18px;background:linear-gradient(135deg,rgba(20,22,28,.9),rgba(14,16,20,.95));border:1px solid var(--bdr2,rgba(201,168,76,.25));border-radius:17px;padding:16px;}
.qd-eq-title{font-size:12.5px;font-weight:900;color:var(--g2,#E8C96A);margin-bottom:12px;}
.qd-eq-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:12px;font-weight:700;color:var(--t2,#C8BFA8);border-bottom:1px dashed rgba(255,255,255,.06);}
.qd-eq-row b{direction:ltr;font-weight:900;}
.qd-eq-total{margin-top:6px;padding:12px 14px;background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(160,120,48,.04));border:1px solid var(--bdr2);border-radius:12px;border-bottom:none;}
.qd-eq-total span{color:var(--t1,#F4F0E6);font-weight:900;font-size:12.5px;}
.qd-eq-total b{font-size:17px;}
/* لوحة سريعة — زر المشاركة وبطاقات التفاصيل */
.qd-hero{position:relative;}
.qd-hero-top{position:relative;z-index:2;}
.qd-share-btn{width:38px;height:38px;flex-shrink:0;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(201,168,76,.12);border:1px solid var(--bdr2,rgba(201,168,76,.25));color:var(--g2,#E8C96A);cursor:pointer;transition:all .18s;}
.qd-share-btn:hover{background:var(--g1,#C9A84C);color:#1a1500;transform:scale(1.08);box-shadow:0 6px 16px rgba(201,168,76,.4);}
.qd-share-btn:active{transform:scale(.95);}
.qd-detail-card{position:relative;overflow:hidden;background:linear-gradient(150deg,rgba(22,25,32,.95),rgba(12,14,18,.98));border:1px solid var(--bdr,rgba(201,168,76,.12));border-radius:20px;padding:16px;margin-top:14px;box-shadow:0 8px 30px rgba(0,0,0,.25);}
.qd-detail-card::before{content:'';position:absolute;inset:0;border-radius:20px;padding:1px;pointer-events:none;}
.qd-dc-in{border-top:2px solid rgba(34,197,94,.4);}
.qd-dc-out{border-top:2px solid rgba(239,68,68,.4);}
.qd-dc-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:13px;border-bottom:1px dashed rgba(255,255,255,.07);}
.qd-dc-ico{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 6px 16px rgba(0,0,0,.35);}
.qd-dc-titles{flex:1;min-width:0;}
.qd-dc-title{font-size:15px;font-weight:900;color:var(--t1,#F4F0E6);letter-spacing:-.3px;}
.qd-dc-sub{font-size:10px;color:var(--t3,#7A7260);font-weight:700;margin-top:2px;}
.qd-dc-total{font-size:17px;font-weight:900;direction:ltr;flex-shrink:0;letter-spacing:-.5px;}
.qd-d-list{display:flex;flex-direction:column;gap:9px;}
.qd-d-row{display:flex;align-items:center;gap:12px;padding:12px 13px;background:linear-gradient(135deg,rgba(255,255,255,.035),rgba(255,255,255,.01));border:1px solid rgba(255,255,255,.06);border-radius:15px;position:relative;overflow:hidden;transition:transform .15s,border-color .15s;}
.qd-d-row::after{content:'';position:absolute;top:0;right:0;bottom:0;width:3px;background:var(--rc,transparent);opacity:.5;}
.qd-d-row:hover{transform:translateX(-2px);border-color:var(--rc,rgba(255,255,255,.12));}
.qd-d-ico{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.qd-d-info{flex:1;min-width:0;}
.qd-d-name{font-size:13px;font-weight:800;color:var(--t1,#F4F0E6);display:flex;align-items:center;gap:6px;}
.qd-d-pct{font-size:9px;font-weight:900;color:var(--rc,#999);background:color-mix(in srgb,var(--rc,#999) 14%,transparent);padding:1px 7px;border-radius:50px;}
.qd-d-sub{font-size:9.5px;color:var(--t3,#7A7260);font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qd-d-bar{height:4px;border-radius:50px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:7px;}
.qd-d-bar-fill{height:100%;border-radius:50px;transition:width .6s cubic-bezier(.4,0,.2,1);opacity:.85;}
.qd-d-val{font-size:15px;font-weight:900;direction:ltr;flex-shrink:0;letter-spacing:-.3px;display:flex;align-items:baseline;gap:2px;}
.qd-d-val span{font-size:9px;opacity:.6;}
.qd-d-empty{text-align:center;padding:18px;font-size:11px;color:var(--t3);font-weight:700;}
/* 🪄 لوحة النشاط المالي الذكية */
.qd-activity{margin-top:18px;background:linear-gradient(135deg,rgba(20,22,28,.92),rgba(14,16,20,.96));border:1px solid var(--bdr2,rgba(201,168,76,.25));border-radius:20px;padding:16px;position:relative;overflow:hidden;}
.qd-activity::before{content:'';position:absolute;top:-30%;right:-10%;width:50%;height:120%;background:radial-gradient(circle,rgba(201,168,76,.07),transparent 70%);pointer-events:none;}
.qd-act-head{display:flex;align-items:center;gap:11px;margin-bottom:14px;position:relative;}
.qd-act-ico{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 5px 14px rgba(201,168,76,.3);}
.qd-act-titles{flex:1;min-width:0;}
.qd-act-title{font-size:14px;font-weight:900;color:var(--t1,#F4F0E6);}
.qd-act-sub{font-size:9.5px;color:var(--t3,#7A7260);font-weight:700;margin-top:2px;}
.qd-act-avail{text-align:left;flex-shrink:0;background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);border-radius:11px;padding:7px 11px;}
.qd-act-avail-lbl{font-size:8.5px;color:var(--t3);font-weight:800;}
.qd-act-avail-val{font-size:14px;font-weight:900;color:#4ade80;direction:ltr;}
.qd-act-list{display:flex;flex-direction:column;gap:8px;position:relative;}
.qd-act-row{display:flex;align-items:center;gap:11px;padding:11px 13px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:14px;position:relative;transition:all .15s;}
.qd-act-row:hover{background:rgba(255,255,255,.045);}
.qd-act-row.is-income{background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(34,197,94,.02));border-color:rgba(34,197,94,.25);}
.qd-act-row.is-short{border-color:rgba(239,68,68,.3);background:linear-gradient(135deg,rgba(239,68,68,.06),transparent);}
.qd-act-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.qd-act-row.is-covered .qd-act-dot{background:#4ade80;box-shadow:0 0 8px rgba(74,222,128,.6);}
.qd-act-row.is-short .qd-act-dot{background:#f87171;box-shadow:0 0 8px rgba(248,113,113,.6);animation:qdBlink 1.4s infinite;}
.qd-act-row.is-income .qd-act-dot{background:var(--g2,#E8C96A);box-shadow:0 0 8px rgba(232,201,106,.6);}
@keyframes qdBlink{0%,100%{opacity:1;}50%{opacity:.35;}}
.qd-act-row-ico{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0;}
.qd-act-row-info{flex:1;min-width:0;}
.qd-act-row-name{font-size:12.5px;font-weight:800;color:var(--t1,#F4F0E6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qd-act-row-sub{font-size:9.5px;color:var(--t3,#7A7260);font-weight:700;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qd-act-row-val{font-size:14px;font-weight:900;direction:ltr;flex-shrink:0;}
.qd-act-row-val span{font-size:9px;opacity:.7;}
.qd-act-legend{display:flex;gap:16px;justify-content:center;margin-top:13px;padding-top:12px;border-top:1px dashed var(--bdr2);font-size:10px;color:var(--t3);font-weight:700;}
.qd-act-legend span{display:flex;align-items:center;gap:5px;}
.qd-lg-dot{width:8px;height:8px;border-radius:50%;}
.qd-lg-ok{background:#4ade80;}
.qd-lg-no{background:#f87171;}
/* تحسينات اللوحة الذكية */
.qd-act-coverage{margin-bottom:11px;}
.qd-cov-bar{height:8px;border-radius:50px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:6px;}
.qd-cov-fill{height:100%;border-radius:50px;transition:width .6s cubic-bezier(.4,0,.2,1);}
.qd-cov-fill.full{background:linear-gradient(90deg,#22C55E,#4ade80);}
.qd-cov-fill.mid{background:linear-gradient(90deg,#d97706,#fbbf24);}
.qd-cov-fill.low{background:linear-gradient(90deg,#b91c1c,#f87171);}
.qd-cov-info{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;font-weight:800;color:var(--t2,#C8BFA8);}
.qd-cov-info b{font-size:13px;direction:ltr;}
.qd-act-smart{padding:9px 13px;border-radius:11px;font-size:11px;font-weight:800;margin-bottom:13px;text-align:center;}
.qd-act-smart.ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.22);color:#4ade80;}
.qd-act-smart.warn{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.25);color:#fbbf24;}
.qd-act-row.is-partial{border-color:rgba(245,158,11,.3);background:linear-gradient(135deg,rgba(245,158,11,.06),transparent);}
.qd-act-row.is-partial .qd-act-dot{background:#fbbf24;box-shadow:0 0 8px rgba(251,191,36,.6);}
.qd-tag{font-size:8px;font-weight:900;padding:1px 6px;border-radius:50px;margin-right:4px;vertical-align:middle;}
.qd-tag-ok{background:rgba(34,197,94,.15);color:#4ade80;}
.qd-tag-part{background:rgba(245,158,11,.15);color:#fbbf24;}
.qd-tag-no{background:rgba(239,68,68,.15);color:#f87171;}
/* 💸 لوحة تسجيل مصروف v2 */
.exp2-card{background:linear-gradient(135deg,rgba(20,22,28,.92),rgba(14,16,20,.96));border:1px solid var(--bdr2,rgba(201,168,76,.25));border-radius:20px;overflow:hidden;margin-bottom:16px;}
.exp2-head{display:flex;align-items:center;gap:12px;padding:16px 18px;background:linear-gradient(135deg,rgba(201,168,76,.1),transparent);border-bottom:1px solid var(--bdr,rgba(201,168,76,.1));}
.exp2-head-ico{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#EF4444,#b91c1c);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;box-shadow:0 6px 16px rgba(239,68,68,.3);}
.exp2-head-title{font-size:15px;font-weight:900;color:var(--t1,#F4F0E6);}
.exp2-head-sub{font-size:10.5px;color:var(--t3,#7A7260);font-weight:700;margin-top:2px;}
.exp2-body{padding:16px 18px;display:flex;flex-direction:column;gap:13px;}
.exp2-field{display:flex;flex-direction:column;gap:6px;}
.exp2-field label{font-size:11.5px;font-weight:800;color:var(--t2,#C8BFA8);}
.exp2-field input,.exp2-field select{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);border-radius:12px;padding:12px 13px;color:var(--t1,#F4F0E6);font-size:13px;font-family:var(--font);font-weight:700;outline:none;transition:border-color .15s;box-sizing:border-box;}
.exp2-field input:focus,.exp2-field select:focus{border-color:var(--g1,#C9A84C);}
/* وسائل الدفع */
.exp2-pays{background:rgba(255,255,255,.02);border:1px solid var(--bdr,rgba(201,168,76,.1));border-radius:15px;padding:13px;}
.exp2-pays-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.exp2-pays-head>span{font-size:12px;font-weight:900;color:var(--t1,#F4F0E6);}
.exp2-add-pay{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#10b981,#047857);color:#fff;border:none;padding:7px 13px;border-radius:9px;font-family:var(--font);font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 3px 9px rgba(16,185,129,.3);transition:all .15s;}
.exp2-add-pay:hover{transform:translateY(-1px);box-shadow:0 5px 13px rgba(16,185,129,.4);}
.exp2-pays-list{display:flex;flex-direction:column;gap:8px;margin-bottom:11px;}
.exp2-pay-row{display:grid;grid-template-columns:1.3fr 1fr auto;gap:7px;align-items:center;}
.exp2-pay-row select{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--t1);padding:10px;border-radius:9px;font-family:var(--font);font-size:11.5px;font-weight:700;cursor:pointer;outline:none;width:100%;box-sizing:border-box;}
.exp2-pay-amt{position:relative;}
.exp2-pay-amt input{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--t1);padding:10px 28px 10px 10px;border-radius:9px;font-family:'Outfit',monospace;font-size:12.5px;font-weight:800;text-align:left;outline:none;box-sizing:border-box;}
.exp2-pay-amt span{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:9px;color:var(--t3);pointer-events:none;}
.exp2-pay-del{width:34px;height:34px;border-radius:9px;background:transparent;border:1px solid rgba(239,68,68,.25);color:#ef4444;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;}
.exp2-pay-del:hover{background:rgba(239,68,68,.12);}
/* ملخّص التطابق */
.exp2-match{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:11px;padding:11px;}
.exp2-match-row{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;color:var(--t2);margin-bottom:8px;}
.exp2-match-row b{direction:ltr;color:var(--t1);font-weight:900;}
.exp2-match-bar{height:7px;border-radius:50px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:7px;}
.exp2-match-fill{height:100%;border-radius:50px;width:0;transition:width .4s ease,background .3s;}
.exp2-match-fill.ok{background:linear-gradient(90deg,#22C55E,#4ade80);}
.exp2-match-fill.under{background:linear-gradient(90deg,#3b82f6,#60a5fa);}
.exp2-match-fill.over{background:linear-gradient(90deg,#d97706,#fbbf24);}
.exp2-match-status{font-size:11px;font-weight:800;text-align:center;color:var(--t3);}
.exp2-match-status.ok{color:#4ade80;}
.exp2-match-status.under{color:#60a5fa;}
.exp2-match-status.over{color:#fbbf24;}
.exp2-match-split{margin-top:8px;font-size:10px;font-weight:700;color:var(--t3);text-align:center;display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:center;}
.exp2-cls{padding:2px 8px;border-radius:50px;font-size:9.5px;font-weight:800;}
.exp2-cls-cash{background:rgba(34,197,94,.12);color:#4ade80;}
.exp2-cls-bank{background:rgba(59,130,246,.12);color:#60A5FA;}
.exp2-cls-other{background:rgba(148,163,184,.12);color:#94a3b8;}
.exp2-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));color:#1a1500;border:none;padding:14px;border-radius:14px;font-family:var(--font);font-size:14px;font-weight:900;cursor:pointer;box-shadow:0 6px 18px rgba(201,168,76,.3);transition:all .15s;}
.exp2-submit:hover{transform:translateY(-2px);box-shadow:0 9px 24px rgba(201,168,76,.4);}
.exp2-submit:active{transform:scale(.98);}
/* ═══ 🖥 لوحة سريعة — تحسينات سطح المكتب فقط (لا تمسّ الجوال) ═══ */
@media(min-width:1024px){
/* هيرو أوسع وأوضح */
.qd-hero{padding:30px 34px;border-radius:26px;}
.qd-hero-val{font-size:56px;}
.qd-hero-unit{font-size:24px;}
.qd-hero-lbl{font-size:14px;}
.qd-hero-sub{font-size:14px;gap:14px;}
.qd-hero-badge{font-size:12px;padding:7px 15px;}
/* بطاقتا الدخل والمخصومات جنباً إلى جنب */
.fin-body-qd-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;}
.qd-detail-card{margin-top:0;padding:20px;border-radius:22px;}
.qd-dc-title{font-size:16px;}
.qd-dc-total{font-size:19px;}
.qd-d-row{padding:14px 16px;border-radius:16px;}
.qd-d-ico{width:42px;height:42px;font-size:18px;border-radius:13px;}
.qd-d-name{font-size:13.5px;}
.qd-d-val{font-size:16px;}
/* المعادلة ولوحة النشاط أوسع */
.qd-equation{margin-top:16px;padding:20px;border-radius:22px;}
.qd-eq-row{font-size:13px;padding:10px 0;}
.qd-eq-total b{font-size:19px;}
.qd-activity{padding:22px;border-radius:24px;}
.qd-act-title{font-size:16px;}
.qd-act-list{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.qd-act-row{padding:13px 15px;}
.qd-act-legend{grid-column:1/-1;}
/* فلتر الأشهر أوسع */
.qd-monthnav .obl-month-title,.obl-month-title{font-size:18px;}
/* تخطيط عام: نُحدّد عرضاً مريحاً وتوسيطاً */
#fin-body .qd-hero,#fin-body .qd-row-title{max-width:100%;}
}
/* ═══ 🖥 سطح المكتب: السايدبار = نفس تصميم اللوحة الجديدة تماماً (مرسّى لا منزلق) ═══ */
@media(min-width:1024px){
/* الإطار: مرسّى بعرض/ارتفاع ديناميكي مع تمرير داخلي */
.dash-sb{
width:320px !important;
height:100vh !important;
position:sticky !important;top:0 !important;
display:flex !important;flex-direction:column !important;
background:var(--d1,#0b0c0f) !important;
border-left:none !important;
border-radius:0 !important;
transform:none !important;
overflow-y:auto !important;overflow-x:hidden !important; /* تمرير السايدبار كاملاً — مرونة صعود/هبوط */
overscroll-behavior:contain;
scrollbar-width:thin;
padding:0 !important;z-index:auto !important;
}
.dash-sb::-webkit-scrollbar{width:7px;}
.dash-sb::-webkit-scrollbar-thumb{background:rgba(201,168,76,.22);border-radius:50px;}
.dash-sb::-webkit-scrollbar-track{background:transparent;}
/* رأس اللوحة (زر الإغلاق) مخفي على الكمبيوتر */
.dash-sb .sb-panel-head{display:none !important;}
/* منطقة قابلة للتمرير تضمّ كل المحتوى عدا القسم السفلي */
.dash-sb .sb-profile{
display:flex !important;align-items:center;justify-content:center;gap:13px;
margin:16px 16px 16px !important;padding:16px 14px !important;flex-shrink:0;
}
.dash-sb .sb-profile-avatar{width:50px;height:50px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;color:#1a1500;background:linear-gradient(135deg,var(--g1),var(--g3));box-shadow:0 6px 16px rgba(201,168,76,.3);overflow:visible;}
.dash-sb .sb-profile-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.dash-sb .sb-profile-info{flex:1;min-width:0;}
.dash-sb .sb-profile-name{font-size:13px;font-weight:900;color:var(--t1,#F4F0E6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-sb .sb-profile-sub{font-size:12px;color:var(--t3,#7A7260);font-weight:600;margin-top:2px;}
.dash-sb .sb-profile-date{font-size:10.5px;color:var(--t3);font-weight:600;margin-top:1px;}
/* العنصر المميّز (الإدارة المالية) — بطاقة فاخرة كاملة العرض */
.dash-sb #sb-featured-slot{padding:0 16px 16px;flex-shrink:0;}
/* أيقونات الوصول السريع — صف أفقي مرتّب */
.dash-sb .sb-quick-icons{gap:8px;justify-content:space-between;padding:0 16px 16px;flex-shrink:0;}
/* بطاقات معلومات سريعة — شبكة ثلاثية */
.dash-sb .sb-stat-cards{display:grid !important;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px 16px !important;margin:0 !important;flex-shrink:0;}
.dash-sb .sb-stat-card{background:var(--d3,#131519);border:1px solid var(--bdr);border-radius:16px;padding:14px 8px;text-align:center;cursor:pointer;transition:all .2s;}
.dash-sb .sb-stat-card:hover{border-color:var(--bdr2,rgba(201,168,76,.3));transform:translateY(-2px);}
.dash-sb .sb-stat-ico{width:38px;height:38px;margin:0 auto 8px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(201,168,76,.16),rgba(201,168,76,.05));color:var(--g1);border:1px solid rgba(201,168,76,.18);}
.dash-sb .sb-stat-num{font-size:18px;font-weight:900;color:var(--t1,#F4F0E6);}
.dash-sb .sb-stat-lbl{font-size:10px;color:var(--t3);font-weight:700;margin-top:2px;}
/* بطاقة اليوم الحالي */
.dash-sb .sb-day{margin:0 16px 12px !important;padding:14px !important;border:1px solid var(--bdr);border-radius:16px;background:rgba(227,169,44,.06);flex-shrink:0;}
.dash-sb .sb-day-lbl{font-size:10px;font-weight:800;color:var(--g2);margin-bottom:6px;}
.dash-sb .sb-day-val{font-size:14px;font-weight:900;color:var(--t1);}
.dash-sb .sb-day-stats{font-size:11px;color:var(--t3);font-weight:700;margin-top:3px;}
/* قائمة التنقّل — تتمدّد وتُمرَّر، عناصر بمحاذاة يمين مثل اللوحة */
.dash-sb .sb-acts{display:flex !important;flex-direction:column;gap:2px;padding:6px 16px 16px !important;flex:0 0 auto;}
.dash-sb .sb-nav-item{
display:flex !important;align-items:center;gap:13px;
flex-direction:row !important;justify-content:flex-start !important;
width:100%;box-sizing:border-box;
padding:14px 6px !important;margin:0 !important;
border:none !important;border-bottom:1px solid var(--bdr,rgba(201,168,76,.08)) !important;border-radius:0 !important;
background:none !important;font-size:14.5px;font-weight:700;color:var(--t2);
cursor:pointer;text-align:right;direction:rtl;white-space:nowrap;
}
.dash-sb .sb-nav-item .ni{width:40px;height:40px;flex:0 0 auto;order:1;display:flex;align-items:center;justify-content:center;border-radius:11px;background:rgba(255,255,255,.04);color:var(--t2);transition:all .18s;}
.dash-sb .sb-nav-item .ni svg{width:21px;height:21px;}
.dash-sb .sb-nav-item .nl{flex:1;order:2;margin:0 !important;overflow:hidden;text-overflow:ellipsis;}
.dash-sb .sb-nav-item .sb-badge{order:3;flex:0 0 auto;margin:0 !important;padding:2px 9px;font-size:10px;font-weight:900;border-radius:50px;background:var(--d5);color:var(--t2);}
.dash-sb .sb-nav-item:hover{color:var(--t1);}
.dash-sb .sb-nav-item:hover .ni{background:rgba(201,168,76,.12);color:var(--g2);}
.dash-sb .sb-nav-item.on{color:var(--g2);background:none !important;}
.dash-sb .sb-nav-item.on::before{display:none !important;}
.dash-sb .sb-nav-item.on .ni{background:linear-gradient(135deg,var(--g1),var(--g3));color:#1a1500;box-shadow:0 4px 12px rgba(201,168,76,.3);}
/* القسم السفلي (تهيئة الحساب + الأيقونات) — يلتصق بآخر السايدبار */
.dash-sb .sb-bottom-panel{
position:static !important;
margin:8px 0 0 !important;
padding:16px !important;
border:none !important;border-top:1px solid var(--bdr) !important;border-radius:0 !important;
background:var(--d1) !important;
backdrop-filter:none !important;
flex:0 0 auto !important;
display:flex !important;flex-direction:column;gap:10px;
}
.dash-sb .sb-cloud-status{display:none !important;}
.dash-sb .sb-section-label{font-size:10px;font-weight:800;color:var(--t3);letter-spacing:1px;margin:0 0 12px;}
.dash-sb .sb-reset-feature{display:flex !important;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:14px 14px;border-radius:14px;margin-bottom:12px;cursor:pointer;text-align:right;background:linear-gradient(135deg,rgba(239,68,68,.16),rgba(220,38,38,.06));border:1px solid rgba(239,68,68,.3);}
.dash-sb .sb-reset-feature:hover{background:linear-gradient(135deg,rgba(239,68,68,.24),rgba(220,38,38,.1));}
.dash-sb .sb-rf-ico{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(239,68,68,.14);color:#f87171;}
.dash-sb .sb-rf-body{flex:1;min-width:0;display:flex;flex-direction:column;text-align:right;}
.dash-sb .sb-rf-title{font-size:14px;font-weight:900;color:#fca5a5;}
.dash-sb .sb-rf-sub{font-size:10px;font-weight:600;color:var(--t3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dash-sb .sb-action-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.dash-sb .sb-icon-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:11px 4px;border-radius:13px;cursor:pointer;font-family:var(--font);background:rgba(255,255,255,.04);border:1px solid var(--bdr);color:var(--t2);font-size:10px;font-weight:800;transition:all .18s;}
.dash-sb .sb-icon-btn:hover{background:rgba(255,255,255,.08);color:var(--t1);}
/* 🆕 حالة إخفاء/إظهار السايدبار عبر الهامبرغر (انزلاق سلس) */
.dash-body{transition:none;}
.dash-sb{transition:width .28s cubic-bezier(.4,0,.2,1),opacity .2s,margin .28s cubic-bezier(.4,0,.2,1) !important;}
.dash-sb.sb-hidden{
width:0 !important;min-width:0 !important;
opacity:0;overflow:hidden !important;
border-left:none !important;pointer-events:none;
margin-left:0 !important;
}
/* إلغاء التغبيش/الخلفية على الكمبيوتر تماماً */
#sidebar-backdrop,.sb-backdrop{display:none !important;}
/* إخفاء زر الطي القديم لو بقي له أثر */
.sb-collapse-btn{display:none !important;}
/* السايدبار على الكمبيوتر لا يكون overlay حتى لو أُضيف drawer-open */
.dash-sb.drawer-open{position:sticky !important;transform:none !important;inset:auto !important;width:320px !important;height:100vh !important;z-index:auto !important;}
}
/* لوحة سريعة — تفصيل الهيرو + زر الدخل + بطاقة وسائل الدفع */
.qd-hero-hint{font-size:9.5px;font-weight:700;color:var(--t3);opacity:.8;}
.qd-hero-chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:11px;}
.qd-hc{font-size:10px;font-weight:800;padding:4px 11px;border-radius:50px;border:1px solid;}
.qd-hc-r{background:rgba(251,146,60,.1);color:#fb923c;border-color:rgba(251,146,60,.25);}
.qd-hc-v{background:rgba(245,158,11,.1);color:#fbbf24;border-color:rgba(245,158,11,.25);}
.qd-hc-e{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.25);}
.qd-hc-p{background:rgba(168,85,247,.1);color:#c084fc;border-color:rgba(168,85,247,.25);}
.qd-gross-toggle{display:inline-flex;align-items:center;gap:6px;margin-top:14px;background:rgba(255,255,255,.05);border:1px solid var(--bdr2,rgba(201,168,76,.25));color:var(--t2,#C8BFA8);padding:8px 15px;border-radius:50px;font-family:var(--font);font-size:11px;font-weight:800;cursor:pointer;transition:all .18s;}
.qd-gross-toggle:hover{background:rgba(201,168,76,.12);color:var(--g2);}
.qd-gross-toggle.on{background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05));border-color:rgba(34,197,94,.35);color:#4ade80;}
/* بطاقة وسائل الدفع */
.qd-pm-card{margin-top:14px;background:linear-gradient(160deg,rgba(24,27,35,.96),rgba(13,15,20,.99));border:1px solid var(--bdr,rgba(201,168,76,.14));border-radius:22px;padding:18px;box-shadow:0 10px 38px rgba(0,0,0,.3);}
.qd-pm-head{display:flex;align-items:center;gap:13px;margin-bottom:16px;padding-bottom:15px;border-bottom:1px solid rgba(255,255,255,.06);}
.qd-pm-ico{width:46px;height:46px;border-radius:15px;background:linear-gradient(135deg,#C9A84C,#9F7E1C);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0;box-shadow:0 6px 18px rgba(201,168,76,.28);}
.qd-pm-titles{flex:1;min-width:0;}
.qd-pm-title{font-size:15.5px;font-weight:900;color:var(--t1,#F4F0E6);letter-spacing:-.2px;}
.qd-pm-sub{font-size:10px;color:var(--t3,#7A7260);font-weight:700;margin-top:3px;}
.qd-pm-total{font-size:19px;font-weight:900;color:var(--g2,#E8C96A);direction:ltr;flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.qd-pm-total span{font-size:11px;opacity:.55;margin-inline-start:1px;}
/* الأقسام (نقدي/بنكي) */
.qd-pm-section{margin-bottom:18px;}
.qd-pm-section:last-of-type{margin-bottom:8px;}
.qd-pm-sec-head{display:flex;align-items:center;gap:9px;padding:8px 13px;margin-bottom:11px;background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border-inline-start:3px solid var(--secc);border-radius:0 10px 10px 0;}
.qd-pm-sec-ico{font-size:16px;}
.qd-pm-sec-title{font-size:12.5px;font-weight:900;color:var(--secc);flex:1;letter-spacing:-.1px;}
.qd-pm-sec-sub{font-size:11.5px;font-weight:900;color:var(--t1);font-variant-numeric:tabular-nums;direction:ltr;}
.qd-pm-sec-items{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));grid-auto-rows:1fr;gap:12px;}
.qd-pm-wide{grid-column:span 2;}
.qd-pm-star{position:absolute;top:11px;inset-inline-end:13px;font-size:9px;font-weight:900;color:var(--pmc,#999);background:rgba(255,255,255,.08);padding:3px 9px;border-radius:50px;letter-spacing:.2px;}
/* بطاقة الوسيلة — تصميم نظيف بشريط جانبي ملوّن */
.qd-pm-item{position:relative;background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.014));border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:17px 17px 15px 18px;overflow:hidden;transition:transform .18s cubic-bezier(.34,1.4,.5,1),border-color .18s,box-shadow .18s;}
.qd-pm-item::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--pmc,#999);opacity:.95;}
.qd-pm-item:hover{transform:translateY(-3px);border-color:var(--pmc,rgba(255,255,255,.18));box-shadow:0 12px 30px rgba(0,0,0,.35);}
.qd-pm-item.qd-pm-idle{opacity:.5;}
.qd-pm-item-top{display:flex;align-items:center;gap:9px;margin-bottom:12px;}
.qd-pm-item-ico{font-size:19px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border-radius:11px;flex-shrink:0;}
.qd-pm-item-name{flex:1;min-width:0;font-size:13px;font-weight:800;color:var(--t1,#F4F0E6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qd-pm-item-pct{font-size:9.5px;font-weight:900;color:var(--pmc,#999);background:rgba(255,255,255,.07);padding:3px 9px;border-radius:50px;flex-shrink:0;white-space:nowrap;}
.qd-pm-item-val{font-size:25px;font-weight:900;color:var(--pmc,#fff);direction:ltr;letter-spacing:-.8px;font-variant-numeric:tabular-nums;line-height:1;}
.qd-pm-item-val span{font-size:12px;opacity:.5;margin-inline-start:2px;}
.qd-pm-item-bar{height:6px;border-radius:50px;background:rgba(255,255,255,.08);overflow:hidden;margin:12px 0 9px;}
.qd-pm-item-fill{height:100%;border-radius:50px;background:var(--pmc,#999);transition:width .7s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px var(--pmc,transparent);}
.qd-pm-flows{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:7px;font-size:10.5px;font-weight:800;font-family:'Outfit',monospace;direction:ltr;}
.qd-pm-in{color:#4ade80;background:rgba(74,222,128,.12);padding:2px 8px;border-radius:7px;}
.qd-pm-out{color:#f87171;background:rgba(248,113,113,.12);padding:2px 8px;border-radius:7px;}
.qd-pm-fee{background:rgba(192,132,252,.14);padding:2px 8px;border-radius:7px;}
.qd-pm-item-cnt{font-size:9.5px;color:var(--t3,#7A7260);font-weight:700;letter-spacing:.1px;}
/* لوحة التسوية المحاسبية */
.qd-pm-recon{margin-top:14px;padding:14px 16px;background:linear-gradient(155deg,rgba(201,168,76,.07),rgba(201,168,76,.015));border:1px solid rgba(201,168,76,.2);border-radius:15px;}
.qd-pm-recon-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:12px;color:var(--t2,#C8BFA8);font-weight:700;border-bottom:1px dashed rgba(255,255,255,.07);}
.qd-pm-recon-row:last-child{border-bottom:none;}
.qd-pm-recon-row b{font-variant-numeric:tabular-nums;font-weight:900;direction:ltr;}
.qd-pm-recon-total{margin-top:5px;padding-top:11px;border-top:1.5px solid rgba(201,168,76,.3);font-size:13px;}
.qd-pm-recon-total span{color:var(--t1,#F4F0E6);font-weight:900;}
.qd-pm-recon-total b{font-size:16px;}
@media(max-width:560px){ .qd-pm-sec-items{grid-template-columns:1fr 1fr;gap:8px;} .qd-pm-item-val{font-size:17px;} }
/* 💵💳 صندوقا النقدي والبنكي التفاعليان */
.qd-boxes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
.qd-box{position:relative;overflow:hidden;border-radius:18px;padding:16px;border:1px solid;transition:transform .18s,box-shadow .18s;}
.qd-box:hover{transform:translateY(-3px);}
.qd-box-cash{background:linear-gradient(150deg,rgba(34,197,94,.12),rgba(20,83,45,.04));border-color:rgba(34,197,94,.3);}
.qd-box-cash:hover{box-shadow:0 12px 30px rgba(34,197,94,.2);}
.qd-box-bank{background:linear-gradient(150deg,rgba(59,130,246,.12),rgba(30,58,138,.04));border-color:rgba(59,130,246,.3);}
.qd-box-bank:hover{box-shadow:0 12px 30px rgba(59,130,246,.2);}
.qd-box.is-neg{background:linear-gradient(150deg,rgba(239,68,68,.12),rgba(127,29,29,.04));border-color:rgba(239,68,68,.35);}
.qd-box-glow{position:absolute;top:-40%;right:-20%;width:120px;height:120px;border-radius:50%;pointer-events:none;opacity:.5;}
.qd-box-cash .qd-box-glow{background:radial-gradient(circle,rgba(34,197,94,.25),transparent 70%);}
.qd-box-bank .qd-box-glow{background:radial-gradient(circle,rgba(59,130,246,.25),transparent 70%);}
.qd-box.is-neg .qd-box-glow{background:radial-gradient(circle,rgba(239,68,68,.25),transparent 70%);}
.qd-box-h{display:flex;align-items:center;gap:9px;margin-bottom:11px;position:relative;}
.qd-box-ico{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.qd-box-cash .qd-box-ico{background:linear-gradient(135deg,#22C55E,#15803d);box-shadow:0 5px 13px rgba(34,197,94,.35);}
.qd-box-bank .qd-box-ico{background:linear-gradient(135deg,#3B82F6,#1d4ed8);box-shadow:0 5px 13px rgba(59,130,246,.35);}
.qd-box.is-neg .qd-box-ico{background:linear-gradient(135deg,#EF4444,#b91c1c);}
.qd-box-name{font-size:12.5px;font-weight:900;color:var(--t1,#F4F0E6);}
.qd-box-val{font-size:26px;font-weight:900;direction:ltr;line-height:1;letter-spacing:-.5px;position:relative;}
.qd-box-cash .qd-box-val{color:#4ade80;}
.qd-box-bank .qd-box-val{color:#60A5FA;}
.qd-box.is-neg .qd-box-val{color:#fca5a5;}
.qd-box-val span{font-size:12px;margin-right:3px;opacity:.6;}
.qd-box-flows{display:flex;justify-content:space-between;gap:6px;margin-top:11px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.08);font-size:10px;font-weight:800;font-family:'Outfit',monospace;direction:ltr;position:relative;}
.qd-box-srcs{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px;}
.qd-box-src{font-size:9px;font-weight:800;padding:2px 8px;border-radius:50px;}
.qd-box-sales{background:rgba(255,255,255,.06);color:var(--t2,#C8BFA8);}
.qd-box-dep{background:rgba(52,211,153,.14);color:#34d399;}
.qd-box-in{color:#4ade80;}
.qd-box-out{color:#f87171;}
.qd-box-flowbar{height:5px;border-radius:50px;margin-top:10px;background:rgba(248,113,113,.25);overflow:hidden;}
.qd-box-flowbar-in{height:100%;border-radius:50px;background:linear-gradient(90deg,#22C55E,#4ade80);transition:width .7s cubic-bezier(.4,0,.2,1);}
.qd-box{animation:qdBoxIn .4s ease backwards;}
.qd-box-bank{animation-delay:.08s;}
@keyframes qdBoxIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@media(max-width:380px){ .qd-box-val{font-size:22px;} .qd-box-flows{font-size:9px;flex-direction:column;gap:3px;} }
@media(min-width:1024px){ .qd-box{padding:20px;} .qd-box-val{font-size:32px;} }
/* خيار ضريبة المبلغ المُضاف */
.mle-vat-toggle{display:flex;align-items:flex-start;gap:10px;cursor:pointer;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.2);border-radius:12px;padding:11px 13px;margin-bottom:12px;}
.mle-vat-toggle input{display:none;}
.mle-vat-box{width:22px;height:22px;border-radius:7px;border:2px solid rgba(245,158,11,.4);flex-shrink:0;position:relative;transition:all .15s;margin-top:1px;}
.mle-vat-toggle input:checked + .mle-vat-box{background:linear-gradient(135deg,#f59e0b,#d97706);border-color:#f59e0b;}
.mle-vat-toggle input:checked + .mle-vat-box::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:900;}
.mle-vat-txt{font-size:12px;font-weight:800;color:var(--t1,#F4F0E6);line-height:1.5;}
.mle-vat-txt small{display:block;font-size:9.5px;font-weight:600;color:var(--t3,#7A7260);margin-top:2px;}
/* شارات تمييز مصادر الضريبة في البطاقات */
.tax-src-breakdown{display:flex;flex-wrap:wrap;gap:6px;margin:-6px 4px 14px;}
.tax-src-chip{font-size:9.5px;font-weight:800;padding:4px 10px;border-radius:50px;border:1px solid;}
.tax-src-sales{background:rgba(34,197,94,.08);color:#4ade80;border-color:rgba(34,197,94,.22);}
.tax-src-fund{background:rgba(56,189,248,.1);color:#38bdf8;border-color:rgba(56,189,248,.25);}
.tax-src-carry{background:rgba(168,85,247,.1);color:#c084fc;border-color:rgba(168,85,247,.25);}
/* هيرو اللوحة — أذكى وأرقى وتفاعلي */
.qd-hero-status{display:inline-block;font-size:10px;font-weight:900;padding:2px 9px;border-radius:50px;margin-left:6px;vertical-align:middle;}
.qd-hero-status.pos{background:rgba(34,197,94,.15);color:#4ade80;}
.qd-hero-status.neg{background:rgba(239,68,68,.15);color:#fca5a5;}
.qd-hero-eqline{font-size:10.5px;font-weight:700;color:var(--t3,#7A7260);margin-top:8px;}
.qd-hero-bar{height:7px;border-radius:50px;background:rgba(239,68,68,.18);overflow:hidden;margin:11px auto 0;max-width:280px;}
.qd-hero-bar-net{height:100%;border-radius:50px;background:linear-gradient(90deg,var(--g3,#A07830),var(--g2,#E8C96A));transition:width .8s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px rgba(201,168,76,.4);}
.qd-hero-funds{display:flex;gap:10px;justify-content:center;margin-top:14px;}
.qd-hf{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:50px;padding:6px 14px;transition:transform .15s,border-color .15s;}
.qd-hf:hover{transform:translateY(-2px);}
.qd-hf-cash:hover{border-color:rgba(34,197,94,.3);}
.qd-hf-bank:hover{border-color:rgba(59,130,246,.3);}
.qd-hf-ico{font-size:13px;}
.qd-hf-lbl{font-size:10px;font-weight:700;color:var(--t3,#7A7260);}
.qd-hf-val{font-size:13px;font-weight:900;direction:ltr;}
/* ═══ 💎 بطاقة الخزنة الموحّدة (الهيرو) — راقية ساحرة تفاعلية ═══ */
.qd-vault{position:relative;overflow:hidden;border-radius:26px;padding:24px;margin-bottom:16px;
background:linear-gradient(155deg,rgba(28,24,14,.95),rgba(14,16,20,.98) 60%,rgba(9,10,13,1));
border:1px solid var(--bdr2,rgba(201,168,76,.25));
box-shadow:0 18px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);
animation:qdVaultIn .5s cubic-bezier(.2,.7,.3,1) backwards;}
@keyframes qdVaultIn{from{opacity:0;transform:translateY(14px) scale(.99);}to{opacity:1;transform:none;}}
.qd-vault.is-neg{background:linear-gradient(155deg,rgba(40,18,18,.92),rgba(14,12,14,.98) 60%,rgba(9,8,9,1));border-color:rgba(239,68,68,.3);}
.qd-vault-orb{position:absolute;border-radius:50%;pointer-events:none;filter:blur(8px);}
.qd-vault-orb-1{top:-60px;right:-40px;width:200px;height:200px;background:radial-gradient(circle,rgba(201,168,76,.16),transparent 70%);}
.qd-vault-orb-2{bottom:-70px;left:-50px;width:220px;height:220px;background:radial-gradient(circle,rgba(96,165,250,.08),transparent 70%);}
.qd-vault.is-neg .qd-vault-orb-1{background:radial-gradient(circle,rgba(239,68,68,.16),transparent 70%);}
.qd-vault-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:18px;position:relative;z-index:2;}
.qd-vault-actions{display:flex;align-items:center;gap:10px;}
.qd-vault-period{font-size:11px;font-weight:800;color:var(--t3,#7A7260);}
.qd-vault-main{text-align:center;position:relative;z-index:2;}
.qd-vault-lbl{font-size:12.5px;font-weight:800;color:var(--t2,#C8BFA8);display:flex;align-items:center;justify-content:center;gap:7px;flex-wrap:wrap;}
.qd-vault-val{font-size:46px;font-weight:900;color:var(--g2,#E8C96A);line-height:1;letter-spacing:-1.5px;margin-top:12px;direction:ltr;
text-shadow:0 4px 24px rgba(201,168,76,.25);}
.qd-vault-unit{font-size:22px;margin-right:6px;opacity:.55;font-weight:800;}
.qd-vault-split{display:inline-flex;align-items:center;gap:12px;margin-top:14px;font-size:13px;font-weight:800;direction:ltr;
background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:50px;padding:8px 18px;}
.qd-vault-sep{color:var(--t3,#7A7260);font-weight:400;}
.qd-vault-flow{display:flex;align-items:center;gap:12px;margin-top:20px;position:relative;z-index:2;}
.qd-vf{flex-shrink:0;text-align:center;min-width:74px;}
.qd-vf-lbl{font-size:10px;font-weight:800;margin-bottom:3px;}
.qd-vf-val{font-size:15px;font-weight:900;direction:ltr;letter-spacing:-.3px;}
.qd-vf-in .qd-vf-lbl{color:#4ade80;}
.qd-vf-in .qd-vf-val{color:#4ade80;}
.qd-vf-out .qd-vf-lbl{color:#f87171;}
.qd-vf-out .qd-vf-val{color:#f87171;}
.qd-vault-flowbar{flex:1;height:8px;border-radius:50px;background:rgba(248,113,113,.22);overflow:hidden;}
.qd-vault-flowbar-in{height:100%;border-radius:50px;background:linear-gradient(90deg,#15803d,#4ade80);transition:width .8s cubic-bezier(.4,0,.2,1);box-shadow:0 0 10px rgba(74,222,128,.4);}
.qd-vault-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:18px;position:relative;z-index:2;}
.qd-vc{font-size:10.5px;font-weight:800;padding:5px 12px;border-radius:50px;border:1px solid;}
.qd-vc-sal{background:rgba(244,114,182,.1);color:#f472b6;border-color:rgba(244,114,182,.25);}
.qd-vc-obl{background:rgba(251,146,60,.1);color:#fb923c;border-color:rgba(251,146,60,.25);}
.qd-vc-exp{background:rgba(239,68,68,.1);color:#f87171;border-color:rgba(239,68,68,.25);}
.qd-vc-vat{background:rgba(245,158,11,.1);color:#fbbf24;border-color:rgba(245,158,11,.25);}
.qd-vc-pos{background:rgba(168,85,247,.1);color:#c084fc;border-color:rgba(168,85,247,.25);}
.qd-vault-profit{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding:14px 18px;position:relative;z-index:2;
background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.02));border:1px solid var(--bdr2,rgba(201,168,76,.25));border-radius:16px;}
.qd-vault-profit>span{font-size:12.5px;font-weight:800;color:var(--t2,#C8BFA8);}
.qd-vault-profit b{font-size:20px;font-weight:900;direction:ltr;letter-spacing:-.5px;}
.qd-vault .qd-gross-toggle{display:flex;width:100%;justify-content:center;margin-top:14px;position:relative;z-index:2;}
@media(min-width:1024px){
.qd-vault{padding:32px 36px;}
.qd-vault-val{font-size:58px;}
.qd-vault-unit{font-size:26px;}
}
/* ═══════════════════════════════════════════════════════════ */
/* 🖥 تجاوز نهائي حاسم للسايدبar على الكمبيوتر (آخر الملف = الأعلى أولوية) */
/* ═══════════════════════════════════════════════════════════ */
@media(min-width:1024px){
/* السايدبار = عمود واحد يُمرَّر بالكامل */
.dash-sb,
.dash-sb.drawer-open{
position:sticky !important;top:0 !important;inset:auto !important;
width:320px !important;min-width:320px !important;max-width:320px !important;
height:100vh !important;max-height:100vh !important;
transform:none !important;
display:flex !important;flex-direction:column !important;
overflow-y:auto !important;overflow-x:hidden !important;
background:var(--d1,#0b0c0f) !important;border-radius:0 !important;z-index:auto !important;
padding:0 !important;
}
.dash-sb.sb-hidden{width:0 !important;opacity:0 !important;overflow:hidden !important;border:none !important;pointer-events:none !important;}
/* لا تغبيش */
#sidebar-backdrop,.sb-backdrop{display:none !important;}
/* رأس الإغلاق وزر الطي مخفيان */
.dash-sb .sb-panel-head,.sb-collapse-btn{display:none !important;}
/* القائمة بارتفاعها الطبيعي (كل التبويبات ظاهرة) */
.dash-sb .sb-acts{flex:0 0 auto !important;overflow:visible !important;display:flex !important;flex-direction:column !important;}
/* 🔴 القسم السفلي: آخر عنصر في التدفّق — يتحرك مع القائمة، لا يطفو */
.dash-sb .sb-bottom-panel{
position:static !important;float:none !important;
margin:10px 0 0 !important;padding:16px !important;
border:none !important;border-top:1px solid var(--bdr) !important;border-radius:0 !important;
background:var(--d1) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
flex:0 0 auto !important;order:99 !important;
display:flex !important;flex-direction:column !important;gap:10px !important;
box-shadow:none !important;
}
.dash-sb .sb-cloud-status{display:none !important;}
.dash-sb .sb-action-row{display:grid !important;grid-template-columns:repeat(3,1fr) !important;gap:8px !important;}
/* 🆕 حذف بطاقة اليوم الحالي من السايدبار على الكمبيوتر */
.dash-sb .sb-day{display:none !important;}
/* 🆕 العنصر المميّز أقصر (مثل الجوال) */
.dash-sb .sb-featured-card{padding:13px 14px !important;gap:11px !important;border-radius:16px !important;}
.dash-sb .sb-fc-ico{width:40px !important;height:40px !important;border-radius:12px !important;}
.dash-sb .sb-fc-ico svg{width:21px !important;height:21px !important;}
.dash-sb .sb-fc-label{font-size:15px !important;}
.dash-sb .sb-fc-hint{font-size:10.5px !important;}
/* 🆕 أيقونات الوصول السريع تتبع شكل إعدادات صاحب النظام (دائري/مربّع/مستطيل) — كالجوال */
.dash-sb .sb-quick-icons{display:flex !important;gap:9px !important;padding:0 16px 14px !important;}
.dash-sb .sb-quick-icons .sb-qi{flex:1 !important;display:flex !important;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px;background:var(--d3,#131519);border:1px solid var(--bdr);transition:all .2s;min-width:0;}
.dash-sb .sb-quick-icons.qs-square .sb-qi{border-radius:16px !important;aspect-ratio:1 !important;padding:6px !important;}
.dash-sb .sb-quick-icons.qs-circle .sb-qi{border-radius:50% !important;aspect-ratio:1 !important;padding:6px !important;}
.dash-sb .sb-quick-icons.qs-rect .sb-qi{border-radius:14px !important;aspect-ratio:auto !important;min-height:60px;padding:8px 4px !important;}
.dash-sb .sb-quick-icons.qs-nolabel .sb-qi{gap:0 !important;}
.dash-sb .sb-quick-icons.qs-nolabel .sb-qi-lbl{display:none !important;}
.dash-sb .sb-qi-ico{width:26px;height:26px;display:flex;align-items:center;justify-content:center;color:var(--g1);}
.dash-sb .sb-qi-ico svg{width:21px;height:21px;}
.dash-sb .sb-qi-lbl{font-size:9.5px;font-weight:700;color:var(--t2);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
}
/* 🔧 هيرو عمليات الفحص (نمط الفواتير · ألوان خضراء/تركوازية) */
.insp-hero{
position:relative;padding:22px 22px 20px;margin-bottom:14px;
background:
radial-gradient(ellipse at top right, rgba(16,185,129,.18) 0%, transparent 55%),
radial-gradient(ellipse at bottom left, rgba(20,184,166,.12) 0%, transparent 55%),
linear-gradient(155deg, var(--d2) 0%, var(--d3) 100%);
border:1px solid var(--bdr2);border-radius:18px;overflow:hidden;
/* 🆕 ثبات الارتفاع: لا يتمدّد مع الحاوية المرنة */
flex:0 0 auto !important;align-self:flex-start;width:100%;
height:auto !important;min-height:0 !important;max-height:none;
box-sizing:border-box;
}
.insp-hero-content{align-items:center !important;}
.insp-hero-bg{
position:absolute;inset:0;pointer-events:none;
background-image:
radial-gradient(circle at 25% 30%, rgba(255,255,255,.025) 0%, transparent 4%),
radial-gradient(circle at 75% 60%, rgba(255,255,255,.02) 0%, transparent 3%);
background-size:80px 80px;
}
.insp-hero-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;}
.insp-hero-orb-1{width:200px;height:200px;background:rgba(16,185,129,.28);top:-70px;right:-50px;animation:rptOrb1 14s ease-in-out infinite;}
.insp-hero-orb-2{width:160px;height:160px;background:rgba(20,184,166,.2);bottom:-60px;left:-40px;animation:rptOrb2 18s ease-in-out infinite;}
.insp-hero-content{position:relative;z-index:2;display:flex;align-items:center;gap:16px;}
.insp-hero-ico{
width:60px;height:60px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#10b981,#0f766e);color:#fff;border-radius:16px;
box-shadow:0 12px 28px rgba(16,185,129,.45),0 0 24px rgba(16,185,129,.18),inset 0 1.5px 0 rgba(255,255,255,.3);
}
.insp-hero-text{flex:1;min-width:0;}
.insp-hero-title{
font-family:var(--font);font-size:19px;font-weight:900;letter-spacing:-.5px;
background:linear-gradient(135deg,#fff 0%,#6ee7b7 50%,#fff 100%);background-size:200% auto;
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
animation:rptShine 5s ease-in-out infinite;margin-bottom:4px;
}
.insp-hero-sub{font-size:11.5px;color:var(--t3);font-weight:700;line-height:1.55;}
/* 💸 بطاقات وسائل إعادة المبلغ في الاسترداد */
.refund-method-chips{display:flex;flex-direction:column;gap:8px;}
.refund-mchip{display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box;cursor:pointer;
padding:12px 14px;border-radius:13px;text-align:right;font-family:inherit;
background:rgba(168,85,247,.05);border:1.5px solid rgba(168,85,247,.22);transition:all .18s;}
.refund-mchip:hover{background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.4);}
.refund-mchip.on{background:rgba(168,85,247,.16);border-color:#a855f7;box-shadow:0 0 0 1px rgba(168,85,247,.3);}
.refund-mchip-ico{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
border-radius:11px;background:rgba(168,85,247,.12);font-size:18px;}
.refund-mchip-body{flex:1;min-width:0;display:flex;flex-direction:column;}
.refund-mchip-name{font-size:14px;font-weight:900;color:var(--t1,#F4F0E6);}
.refund-mchip-sub{font-size:10.5px;color:var(--t3,#7A7260);font-weight:600;margin-top:1px;}
.refund-mchip-check{width:24px;height:24px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
border-radius:50%;font-size:13px;font-weight:900;color:#fff;background:transparent;border:2px solid rgba(168,85,247,.3);transition:all .18s;}
.refund-mchip.on .refund-mchip-check{background:#a855f7;border-color:#a855f7;}
.refund-mchip:not(.on) .refund-mchip-check{color:transparent;}
.refund-mchip-other{background:rgba(255,255,255,.03);border-color:var(--bdr);}
.refund-mchip-other .refund-mchip-ico{background:rgba(255,255,255,.06);}
/* ↩️ لوحة استرجاع المبلغ — تنسيق نظيف */
.rfnd-ctx{font-size:12px;color:var(--t2);line-height:1.7;padding:12px 14px;background:var(--d3);border-radius:12px;border:1px solid var(--bdr);margin-bottom:16px;}
.rfnd-sec{margin-bottom:15px;}
.rfnd-sec-lbl{font-size:11.5px;font-weight:800;color:var(--t2);margin-bottom:8px;}
.rfnd-sec-hint{font-size:10px;font-weight:600;color:var(--t3);}
.rfnd-type-row{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.rfnd-type{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px;border-radius:12px;cursor:pointer;
background:var(--d3);border:1.5px solid var(--bdr);transition:all .18s;}
.rfnd-type span{font-size:13px;font-weight:800;color:var(--t1);}
.rfnd-type input{accent-color:#a855f7;}
.rfnd-type.on{background:rgba(168,85,247,.1);border-color:rgba(168,85,247,.5);}
.rfnd-amount-box{background:linear-gradient(135deg,rgba(168,85,247,.12),rgba(168,85,247,.03));border:1px solid rgba(168,85,247,.3);
border-radius:16px;padding:18px;text-align:center;margin-bottom:16px;}
.rfnd-amount-lbl{font-size:10.5px;color:var(--t3);font-weight:700;margin-bottom:7px;}
.rfnd-amount-val{font-family:var(--font);font-size:34px;font-weight:900;color:#a855f7;line-height:1;direction:ltr;}
.rfnd-amount-pct{font-size:11px;color:var(--t3);margin-top:8px;font-weight:600;}
.rfnd-pct-row{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;}
.rfnd-pct-row button{background:rgba(168,85,247,.08);color:#a855f7;border:1px solid rgba(168,85,247,.25);
padding:10px 4px;border-radius:10px;font-size:12px;font-weight:800;cursor:pointer;font-family:var(--font);transition:all .15s;}
.rfnd-pct-row button:hover{background:rgba(168,85,247,.16);transform:translateY(-1px);}
.rfnd-input{width:100%;box-sizing:border-box;background:var(--d3);border:1.5px solid var(--bdr);border-radius:11px;
padding:11px 13px;font-family:var(--font);font-size:13px;font-weight:700;color:var(--t1);}
.rfnd-input:focus{outline:none;border-color:rgba(168,85,247,.5);}
.rfnd-err{font-size:11.5px;color:var(--rd,#f87171);min-height:14px;margin-bottom:8px;font-weight:700;}
.rfnd-confirm{flex:2;background:linear-gradient(135deg,#a855f7,#7c3aed)!important;}
/* ↩ مؤشّر المسترد داخل بطاقة وسيلة الدفع في الدخل اليومي */
.dyi-mp-ref{
display:inline-flex;align-items:center;
font-size:9.5px;font-weight:900;color:#c084fc;
background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.3);
border-radius:6px;padding:1px 6px;margin-inline-start:2px;
}
.dyi-mp{flex-wrap:wrap;}
/* بطاقة وسيلة دفع بها استرداد — عرض القصة الكاملة */
.dyi-mp-hasref{flex-direction:column;align-items:stretch !important;gap:4px;min-width:135px;}
.dyi-mp-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.dyi-mp-breakdown{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:3px;border-top:1px dashed rgba(168,85,247,.25);}
.dyi-mp-orig{font-size:9px;color:var(--t3);text-decoration:line-through;opacity:.7;font-weight:700;}
.dyi-mp-ref{font-size:9px;font-weight:900;color:#c084fc;}
/* ملاحظة الصافي بعد الاسترداد في رأس بطاقة الدخل النقدي/البنكي */
.dyi-side-net-note{display:block;font-size:9px;font-weight:700;color:var(--t3);margin-top:2px;opacity:.85;}
/* ↩ بانر توضيح حركة الاسترداد عبر الصناديق (الدخل اليومي) */
.dyi-xrefund-note{display:flex;gap:12px;align-items:flex-start;margin:6px 0 10px;padding:13px 15px;
background:linear-gradient(135deg,rgba(168,85,247,.1),rgba(168,85,247,.03));
border:1px solid rgba(168,85,247,.3);border-radius:14px;}
.dyi-xrefund-ico{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:rgba(168,85,247,.18);color:#c084fc;border-radius:10px;font-size:17px;font-weight:900;}
.dyi-xrefund-body{flex:1;min-width:0;}
.dyi-xrefund-t{font-size:12.5px;font-weight:900;color:var(--t1,#F4F0E6);margin-bottom:5px;}
.dyi-xrefund-s{display:flex;flex-direction:column;gap:3px;font-size:11px;font-weight:700;color:#c084fc;}
.dyi-xrefund-s b{color:var(--t1);}
.dyi-xrefund-hint{font-size:9.5px;color:var(--t3);font-weight:600;margin-top:3px;}
/* ملاحظة الاسترداد عبر وسيلة أخرى داخل بطاقة الوسيلة */
.dyi-mp-ref-cross{color:#fbbf24 !important;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.28);border-radius:6px;padding:1px 6px;}
/* 🗂 الصناديق الذكية في تبويب الخزنة */
.tbox-grid-smart{display:grid;grid-template-columns:1fr;gap:13px;}
@media(min-width:768px){ .tbox-grid-smart{grid-template-columns:1fr 1fr;} }
.tbox-smart{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:16px;
background:var(--d2,#0E1014);border:1px solid var(--bdr,rgba(201,168,76,.1));border-inline-start:3px solid var(--tbc,#4ade80);}
.tbox-smart .tbox-h{display:flex;align-items:center;gap:10px;}
.tbox-smart .tbox-ico{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:11px;font-size:18px;}
.tbox-smart .tbox-ttl{font-size:13px;font-weight:800;color:var(--t1,#F4F0E6);flex:1;}
.tbox-smart .tbox-amt{font-family:var(--font);font-size:18px;font-weight:900;}
.tbox-smart .tbox-amt span{font-size:11px;opacity:.6;margin-inline-start:2px;}
.tbox-smart .tbox-sub{font-size:10.5px;color:var(--t3,#7A7260);font-weight:600;}
.tbox-flows{display:flex;flex-direction:column;gap:5px;padding-top:8px;border-top:1px dashed var(--bdr,rgba(201,168,76,.12));}
.tflow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;}
.tflow-lbl{color:var(--t2,#C8BFA8);font-weight:700;}
.tflow-val{font-family:var(--font);font-weight:800;}
/* 🏛 الخزنة الذكية — شبكة صناديق ساحرة */
.vault-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:14px;direction:rtl;}
@media(max-width:600px){ .vault-grid{grid-template-columns:1fr;} }
.vault-grid-2{grid-template-columns:1fr 1fr;}
@media(max-width:600px){ .vault-grid-2{grid-template-columns:1fr;} }
.vbox{position:relative;background:linear-gradient(160deg,var(--d2,#0E1014),var(--d3,#131519));
border:1px solid var(--bdr,rgba(201,168,76,.12));border-radius:18px;padding:16px;overflow:hidden;
display:flex;flex-direction:column;gap:9px;border-inline-start:3px solid var(--vc,#4ade80);}
.vbox-h{display:flex;align-items:center;gap:10px;}
.vbox-ico{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:19px;
box-shadow:0 6px 16px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.25);}
.vbox-ttl{font-size:13.5px;font-weight:800;color:var(--t1,#F4F0E6);flex:1;}
.vbox-amt{font-family:var(--font);font-size:19px;font-weight:900;letter-spacing:-.3px;}
.vbox-amt span{font-size:11px;opacity:.55;margin-inline-start:3px;}
.vbox-sub{font-size:10.5px;color:var(--t3,#7A7260);font-weight:600;line-height:1.5;}
.vbox-flows{display:flex;flex-direction:column;gap:5px;padding-top:9px;border-top:1px dashed var(--bdr,rgba(201,168,76,.12));}
.vflow{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;}
.vflow span{color:var(--t2,#C8BFA8);font-weight:700;}
.vflow b{font-family:var(--font);font-weight:800;}
.vbox-empty{font-size:10px;color:var(--t3);text-align:center;padding:8px;background:rgba(255,255,255,.02);border-radius:9px;font-weight:600;}
/* الخزنة العامة — المربع الساحر */
.vbox-total{grid-row:span 1;background:
radial-gradient(ellipse at top right,rgba(201,168,76,.22),transparent 60%),
linear-gradient(160deg,#15130c,#0b0c0f);
border:1.5px solid var(--bdr2,rgba(201,168,76,.3));align-items:center;text-align:center;justify-content:center;gap:7px;min-height:165px;}
.vbox-glow{position:absolute;width:160px;height:160px;border-radius:50%;background:rgba(201,168,76,.2);filter:blur(60px);top:-50px;right:-40px;pointer-events:none;animation:rptOrb1 14s ease-in-out infinite;}
.vbox-total-top{position:relative;z-index:2;}
.vbox-badge{display:inline-block;font-size:11px;font-weight:900;color:var(--g2,#E8C96A);background:rgba(201,168,76,.12);border:1px solid var(--bdr2);border-radius:20px;padding:5px 14px;}
.vbox-total-amt{position:relative;z-index:2;font-family:var(--font);font-size:30px;font-weight:900;letter-spacing:-1px;
background:linear-gradient(135deg,#fff,var(--g2,#E8C96A),#fff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rptShine 5s ease-in-out infinite;}
.vbox-total-amt span{font-size:14px;-webkit-text-fill-color:var(--g3,#A07830);}
.vbox-total-split{position:relative;z-index:2;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.vbox-total-split span{font-size:11px;font-weight:800;color:var(--t2,#C8BFA8);background:rgba(255,255,255,.04);border:1px solid var(--bdr);border-radius:9px;padding:4px 9px;}
.vbox-total-sub{position:relative;z-index:2;font-size:10px;color:var(--t3);font-weight:600;}
.vbox-wide .vbox-h{flex-wrap:wrap;}
/* زر تبديل خصم الضريبة */
.vat-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:9px;padding:10px 12px;background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.18);border-radius:11px;}
.vat-toggle-lbl{font-size:10.5px;font-weight:700;color:var(--t2,#C8BFA8);flex:1;line-height:1.5;}
.vat-toggle-btn{width:46px;height:26px;flex-shrink:0;border-radius:20px;border:none;cursor:pointer;background:rgba(255,255,255,.12);position:relative;transition:all .25s;}
.vat-toggle-btn.on{background:linear-gradient(135deg,#22C55E,#15803d);}
.vat-toggle-knob{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:all .25s;box-shadow:0 2px 5px rgba(0,0,0,.3);}
.vat-toggle-btn.on .vat-toggle-knob{right:23px;}
/* 🧾 نافذة تسجيل دفع الضريبة */
.vatpay-card{max-width:420px;}
.vatpay-amt{font-family:var(--font);font-size:30px;font-weight:900;text-align:center;color:#fbbf24;margin:6px 0 4px;}
.vatpay-amt span{font-size:15px;opacity:.6;}
.vatpay-sub{text-align:center;font-size:12px;color:var(--t2,#C8BFA8);font-weight:700;margin-bottom:6px;}
.vatpay-hint{text-align:center;font-size:10.5px;color:var(--t3,#7A7260);background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.18);border-radius:9px;padding:7px 10px;margin-bottom:14px;}
.vatpay-methods{display:flex;flex-direction:column;gap:10px;}
.vatpay-m{display:flex;flex-direction:column;align-items:center;gap:3px;padding:14px;border-radius:14px;cursor:pointer;
background:var(--d2,#0E1014);border:1px solid var(--bdr2,rgba(201,168,76,.22));transition:all .18s;text-align:center;}
.vatpay-m:hover{border-color:var(--g2,#E8C96A);transform:translateY(-1px);}
.vatpay-m-ico{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:20px;margin-bottom:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.vatpay-m-t{font-size:13.5px;font-weight:900;color:var(--t1,#F4F0E6);}
.vatpay-m-s{font-size:10.5px;color:var(--t3,#7A7260);font-weight:600;}
.vatpay-m-split{background:linear-gradient(135deg,rgba(168,85,247,.08),transparent);}
/* صندوق الضريبة الذكي — سطور نقدي/بنكي مع زر toggle لكل وعاء */
.vat-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin-top:8px;border-radius:11px;
background:rgba(245,158,11,.05);border:1px solid rgba(245,158,11,.16);transition:all .2s;}
.vat-line.is-on{background:rgba(34,197,94,.07);border-color:rgba(34,197,94,.25);}
.vat-line-info{display:flex;flex-direction:column;gap:2px;flex:1;}
.vat-line-lbl{font-size:11.5px;font-weight:800;color:var(--t2,#C8BFA8);}
.vat-line-val{font-family:var(--font);font-size:14px;font-weight:900;color:#fbbf24;}
.vat-line.is-on .vat-line-val{color:#86efac;text-decoration:line-through;opacity:.7;}
.vat-deduct-note{margin-top:10px;padding:8px 11px;border-radius:9px;font-size:10.5px;font-weight:700;
background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.2);color:#86efac;text-align:center;}
.vat-deduct-note.vat-deduct-off{background:rgba(122,114,96,.06);border-color:rgba(122,114,96,.2);color:var(--t3,#7A7260);}
.vat-line-from{font-size:9.5px;color:#86efac;font-weight:700;margin-top:2px;}
/* 📌 بطاقة الالتزامات الشهرية الثابتة التفاعلية */
.qd-fixed{margin:12px 0;padding:15px;border-radius:16px;background:linear-gradient(150deg,rgba(251,146,60,.08),rgba(251,146,60,.02));border:1px solid rgba(251,146,60,.22);}
.qd-fixed.is-ok{background:linear-gradient(150deg,rgba(74,222,128,.08),rgba(74,222,128,.02));border-color:rgba(74,222,128,.25);}
.qd-fixed-top{display:flex;align-items:center;gap:11px;margin-bottom:11px;}
.qd-fixed-ico{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:11px;font-size:18px;background:rgba(251,146,60,.16);}
.qd-fixed.is-ok .qd-fixed-ico{background:rgba(74,222,128,.16);}
.qd-fixed-titles{flex:1;min-width:0;}
.qd-fixed-title{font-size:13px;font-weight:900;color:var(--t1,#F4F0E6);}
.qd-fixed-sub{font-size:10.5px;color:var(--t3,#7A7260);font-weight:700;margin-top:2px;}
.qd-fixed-amt{font-family:var(--font);font-size:18px;font-weight:900;color:#fb923c;}
.qd-fixed.is-ok .qd-fixed-amt{color:#4ade80;}
.qd-fixed-amt span{font-size:11px;opacity:.6;margin-inline-start:2px;}
.qd-fixed-bar{height:9px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:10px;}
.qd-fixed-fill{height:100%;border-radius:6px;background:linear-gradient(90deg,#fb923c,#fbbf24);transition:width .5s cubic-bezier(.34,1.56,.64,1);}
.qd-fixed.is-ok .qd-fixed-fill{background:linear-gradient(90deg,#22C55E,#4ade80);}
.qd-fixed-stats{display:flex;gap:10px;}
.qd-fixed-stat{flex:1;display:flex;flex-direction:column;gap:3px;padding:9px 11px;background:rgba(0,0,0,.18);border-radius:10px;}
.qd-fixed-stat-lbl{font-size:9.5px;color:var(--t3,#7A7260);font-weight:700;}
.qd-fixed-stat-val{font-family:var(--font);font-size:14px;font-weight:900;}
/* 🗂 تجميع المخصومات (ثابتة/متغيّرة) */
.qd-group{margin-bottom:13px;padding:13px;border-radius:15px;}
.qd-group-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:9px;border-bottom:1px dashed var(--bdr,rgba(201,168,76,.15));}
.qd-group-badge{font-size:12px;font-weight:900;color:var(--gc,#fb923c);background:color-mix(in srgb,var(--gc) 16%,transparent);border:1px solid color-mix(in srgb,var(--gc) 35%,transparent);border-radius:20px;padding:5px 14px;}
.qd-group-sum{font-family:var(--font);font-size:15px;font-weight:900;color:var(--gc,#fb923c);}
.qd-group-fixed{background:linear-gradient(150deg,rgba(251,146,60,.07),rgba(251,146,60,.015));border:1px solid rgba(251,146,60,.22);border-inline-start:4px solid #fb923c;}
.qd-group-fixed .qd-group-sum{color:#fb923c;}
.qd-group-var{background:linear-gradient(150deg,rgba(96,165,250,.07),rgba(96,165,250,.015));border:1px solid rgba(96,165,250,.22);border-inline-start:4px solid #60A5FA;}
.qd-group-var .qd-group-sum{color:#60A5FA;}
/* 🤝 بطاقة أرباح الشركاء */
.qd-dc-partners{border-color:rgba(139,92,246,.25);}
.qd-partner-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--bdr,rgba(201,168,76,.08));}
.qd-partner-row:last-child{border-bottom:none;}
.qd-partner-ico{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:16px;background:rgba(139,92,246,.15);}
.qd-partner-info{flex:1;min-width:0;}
.qd-partner-name{font-size:12.5px;font-weight:800;color:var(--t1,#F4F0E6);display:flex;align-items:center;gap:7px;margin-bottom:5px;}
.qd-partner-pct{font-size:9.5px;font-weight:900;color:#a78bfa;background:rgba(139,92,246,.15);border-radius:6px;padding:1px 7px;}
.qd-partner-bar{height:6px;border-radius:4px;background:rgba(255,255,255,.06);overflow:hidden;}
.qd-partner-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#8b5cf6,#a78bfa);transition:width .5s cubic-bezier(.34,1.56,.64,1);}
.qd-partner-val{font-family:var(--font);font-size:15px;font-weight:900;color:#a78bfa;}
.qd-partner-val span{font-size:10px;opacity:.6;}
/* 🤝 أرباح الشركاء داخل لوحة النشاط */
.qd-act-partners{margin-top:14px;padding:14px;border-radius:15px;background:linear-gradient(150deg,rgba(139,92,246,.1),rgba(139,92,246,.02));border:1px solid rgba(139,92,246,.25);}
.qd-act-partners-h{display:flex;align-items:center;gap:9px;margin-bottom:11px;padding-bottom:9px;border-bottom:1px dashed rgba(139,92,246,.25);flex-wrap:wrap;}
.qd-act-partners-badge{font-size:12.5px;font-weight:900;color:#a78bfa;background:rgba(139,92,246,.16);border:1px solid rgba(139,92,246,.35);border-radius:20px;padding:5px 14px;}
.qd-act-partners-note{font-size:10px;color:var(--t3,#7A7260);font-weight:700;flex:1;}
.qd-act-partners-total{font-family:var(--font);font-size:15px;font-weight:900;color:#a78bfa;}
/* ═══ 🪄 لوحة النشاط المالي الذكية (تصميم جديد act2) ═══ */
.act2{margin-top:16px;display:flex;flex-direction:column;gap:13px;direction:rtl;}
.act2-hero{position:relative;overflow:hidden;padding:18px;border-radius:20px;
background:radial-gradient(ellipse at top left,rgba(201,168,76,.18),transparent 60%),linear-gradient(160deg,#15130c,#0b0c0f);
border:1.5px solid var(--bdr2,rgba(201,168,76,.28));}
.act2-hero-glow{position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(201,168,76,.18);filter:blur(65px);top:-60px;left:-40px;pointer-events:none;animation:rptOrb1 16s ease-in-out infinite;}
.act2-hero-top{position:relative;z-index:2;margin-bottom:13px;}
.act2-hero-badge{display:inline-block;font-size:12.5px;font-weight:900;color:var(--g2,#E8C96A);background:rgba(201,168,76,.12);border:1px solid var(--bdr2);border-radius:20px;padding:6px 15px;}
.act2-hero-avail{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;margin-bottom:14px;}
.act2-hero-avail-lbl{font-size:11px;font-weight:700;color:var(--t2,#C8BFA8);}
.act2-hero-avail-val{font-family:var(--font);font-size:30px;font-weight:900;letter-spacing:-1px;
background:linear-gradient(135deg,#fff,var(--g2),#fff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:rptShine 5s ease-in-out infinite;}
.act2-hero-avail-val span{font-size:14px;-webkit-text-fill-color:var(--g3,#A07830);margin-inline-start:4px;}
.act2-hero-cov{position:relative;z-index:2;margin-bottom:11px;}
.act2-cov-bar{height:10px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:6px;}
.act2-cov-fill{height:100%;border-radius:6px;transition:width .6s cubic-bezier(.34,1.56,.64,1);}
.act2-cov-fill.full{background:linear-gradient(90deg,#22C55E,#4ade80);}
.act2-cov-fill.mid{background:linear-gradient(90deg,#d97706,#fbbf24);}
.act2-cov-fill.low{background:linear-gradient(90deg,#b91c1c,#f87171);}
.act2-cov-txt{display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:700;color:var(--t2);}
.act2-cov-txt b{font-family:var(--font);font-size:13px;}
.act2-hero-msg{position:relative;z-index:2;padding:10px 13px;border-radius:11px;font-size:11.5px;font-weight:800;line-height:1.6;}
.act2-hero-msg.ok{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.28);color:#86efac;}
.act2-hero-msg.warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.28);color:#fcd34d;}
.act2-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;}
@media(max-width:680px){ .act2-grid{grid-template-columns:1fr;} }
.act2-card{padding:15px;border-radius:18px;background:linear-gradient(160deg,var(--d2,#0E1014),var(--d3,#131519));border:1px solid var(--bdr,rgba(201,168,76,.12));}
.act2-fixed{border-inline-start:4px solid #fb923c;background:linear-gradient(160deg,rgba(251,146,60,.06),rgba(251,146,60,.01));}
.act2-var{border-inline-start:4px solid #60A5FA;background:linear-gradient(160deg,rgba(96,165,250,.06),rgba(96,165,250,.01));}
.act2-partners{border-inline-start:4px solid #a78bfa;background:linear-gradient(160deg,rgba(139,92,246,.07),rgba(139,92,246,.01));}
.act2-card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.act2-card-badge{font-size:12px;font-weight:900;color:var(--cc,#fb923c);background:color-mix(in srgb,var(--cc) 15%,transparent);border:1px solid color-mix(in srgb,var(--cc) 32%,transparent);border-radius:20px;padding:5px 13px;}
.act2-card-sum{font-family:var(--font);font-size:16px;font-weight:900;}
.act2-card-meta{font-size:10.5px;color:var(--t3,#7A7260);font-weight:700;margin-bottom:11px;line-height:1.5;}
.act2-prog{height:8px;border-radius:5px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:8px;}
.act2-prog-fill{height:100%;border-radius:5px;transition:width .6s cubic-bezier(.34,1.56,.64,1);}
.act2-prog-stats{display:flex;align-items:center;justify-content:space-between;font-size:10.5px;color:var(--t2,#C8BFA8);font-weight:700;margin-bottom:11px;}
.act2-prog-stats b{font-family:var(--font);font-weight:900;}
.act2-rows{display:flex;flex-direction:column;gap:7px;}
.act-row{display:flex;align-items:center;gap:10px;padding:9px;border-radius:11px;background:rgba(255,255,255,.02);}
.act-row-ico{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:15px;background:color-mix(in srgb,var(--ac) 13%,transparent);color:var(--ac);}
.act-row-body{flex:1;min-width:0;}
.act-row-name{font-size:12px;font-weight:800;color:var(--t1,#F4F0E6);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.act-row-sub{font-size:9.5px;color:var(--t3,#7A7260);font-weight:600;margin-top:1px;}
.act-row-val{font-family:var(--font);font-size:13px;font-weight:900;flex-shrink:0;}
.act2-partner{margin-top:9px;}
.act2-partner-top{display:flex;align-items:center;gap:8px;margin-bottom:5px;}
.act2-partner-name{font-size:12px;font-weight:800;color:var(--t1,#F4F0E6);flex:1;}
.act2-partner-pct{font-size:10px;font-weight:900;color:#a78bfa;background:rgba(139,92,246,.16);border-radius:6px;padding:1px 8px;}
.act2-partner-val{font-family:var(--font);font-size:13px;font-weight:900;color:#a78bfa;}
.act2-foot{text-align:center;font-size:10px;color:var(--t3,#7A7260);font-weight:600;padding:6px;line-height:1.6;}
/* ✨ شبكة الباقات الخمس — صف واحد مربّع قابل للتوسيع */
.allplans-section{margin-top:22px;}
.allplans-head{margin-bottom:14px;}
.allplans-title{display:block;font-size:15px;font-weight:900;color:var(--t1,#F4F0E6);}
.allplans-sub{display:block;font-size:11px;color:var(--t3,#7A7260);font-weight:600;margin-top:3px;}
.allplans-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;align-items:start;}
@media(max-width:900px){ .allplans-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:600px){ .allplans-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:400px){ .allplans-grid{grid-template-columns:1fr;} }
.allplan-card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;
background:linear-gradient(165deg,var(--d2,#0E1014),color-mix(in srgb,var(--pc,#C9A84C) 7%,var(--d3,#131519)));
border:1.5px solid var(--bdr,rgba(201,168,76,.14));border-radius:16px;padding:15px 11px;transition:border-color .2s,box-shadow .2s,transform .2s;}
.allplan-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--pc),color-mix(in srgb,var(--pc) 60%,#000));}
.allplan-card::after{content:'';position:absolute;top:-40px;right:-40px;width:110px;height:110px;border-radius:50%;background:color-mix(in srgb,var(--pc) 20%,transparent);filter:blur(42px);opacity:.5;pointer-events:none;}
.allplan-card:hover{border-color:color-mix(in srgb,var(--pc) 40%,transparent);box-shadow:0 10px 26px rgba(0,0,0,.28);}
.allplan-card.is-mine{border-color:color-mix(in srgb,var(--pc) 55%,transparent);box-shadow:0 0 0 2px color-mix(in srgb,var(--pc) 28%,transparent);}
.allplan-card.is-expanded{grid-row:span 2;}
.allplan-ribbon{position:absolute;top:8px;right:8px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#E8C96A,#A07830);border-radius:7px;font-size:11px;z-index:2;}
.allplan-mine-badge{position:absolute;top:8px;left:8px;background:color-mix(in srgb,var(--pc) 20%,transparent);color:var(--pc);border:1px solid color-mix(in srgb,var(--pc) 40%,transparent);font-size:8px;font-weight:900;padding:2px 7px;border-radius:20px;z-index:2;}
.allplan-ico{position:relative;z-index:1;width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:13px;font-size:23px;margin-top:4px;
background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 65%,#000));color:#fff;box-shadow:0 6px 15px color-mix(in srgb,var(--pc) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.3);}
.allplan-name{font-size:13px;font-weight:900;color:var(--t1,#F4F0E6);line-height:1.3;}
.allplan-price{font-family:var(--font);font-size:19px;font-weight:900;color:var(--pc);line-height:1;}
.allplan-price span{display:block;font-size:8.5px;color:var(--t3);font-weight:700;margin-top:3px;}
.allplan-featcount{font-size:9px;font-weight:800;color:var(--t2,#C8BFA8);background:rgba(255,255,255,.05);border-radius:7px;padding:3px 9px;}
/* المحتوى القابل للتوسيع */
.allplan-expand{display:none;width:100%;text-align:right;margin-top:4px;padding-top:9px;border-top:1px dashed var(--bdr);max-height:280px;overflow-y:auto;}
.allplan-expand.is-open{display:block;}
.allplan-perks-h{font-size:10px;font-weight:900;color:var(--pc);margin-bottom:6px;}
.allplan-perks{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:4px;}
.allplan-perks li{font-size:9.5px;color:var(--t2,#C8BFA8);font-weight:600;padding-inline-start:14px;position:relative;line-height:1.5;text-align:right;}
.allplan-perks li::before{content:'★';position:absolute;inset-inline-start:0;color:var(--pc);font-size:8px;}
.allplan-fcat{font-size:9.5px;font-weight:900;color:var(--t1,#F4F0E6);margin:8px 0 4px;}
.allplan-frow{display:flex;align-items:center;justify-content:space-between;font-size:9.5px;color:var(--t2,#C8BFA8);font-weight:600;padding:3px 0;}
.allplan-fchk{color:#4ade80;font-weight:900;}
.allplan-more{width:100%;padding:7px;border-radius:9px;border:1px dashed color-mix(in srgb,var(--pc) 35%,transparent);background:transparent;color:var(--pc);font-family:'Cairo';font-size:10px;font-weight:800;cursor:pointer;margin-top:auto;}
.allplan-more:hover{background:color-mix(in srgb,var(--pc) 8%,transparent);}
.allplan-btn{width:100%;padding:9px;border-radius:10px;border:none;background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 70%,#000));color:#fff;font-family:'Cairo';font-size:11px;font-weight:900;cursor:pointer;transition:filter .18s;box-shadow:0 4px 12px color-mix(in srgb,var(--pc) 30%,transparent);}
.allplan-btn:hover{filter:brightness(1.1);}
.allplan-btn.is-current{background:rgba(255,255,255,.06);color:var(--pc);box-shadow:none;cursor:default;border:1px solid color-mix(in srgb,var(--pc) 35%,transparent);}
.allplans-empty{grid-column:1/-1;text-align:center;color:var(--t3);padding:30px;font-weight:700;}
/* مودال كامل المميزات */
.mpf-card{--pc:#C9A84C;background:linear-gradient(165deg,var(--d2,#0E1014),var(--d3,#131519));border:1px solid var(--bdr2,rgba(201,168,76,.25));border-radius:22px;max-width:440px;width:100%;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;}
.mpf-head{display:flex;align-items:center;gap:12px;padding:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 18%,transparent),transparent);border-bottom:1px solid var(--bdr);}
.mpf-head-ico{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border-radius:13px;font-size:23px;background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 65%,#000));color:#fff;}
.mpf-head-name{font-size:16px;font-weight:900;color:var(--t1,#F4F0E6);}
.mpf-head-price{font-family:var(--font);font-size:12px;font-weight:800;color:var(--pc);margin-top:2px;}
.mpf-x{width:32px;height:32px;border-radius:9px;border:none;background:rgba(255,255,255,.08);color:var(--t2);font-size:14px;cursor:pointer;flex-shrink:0;}
.mpf-body{padding:16px 18px;overflow-y:auto;}
.mpf-perks{margin-bottom:16px;}
.mpf-perks-h{font-size:12px;font-weight:900;color:var(--pc);margin-bottom:8px;}
.mpf-perks ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.mpf-perks li{font-size:11.5px;color:var(--t2,#C8BFA8);font-weight:600;padding-inline-start:18px;position:relative;line-height:1.5;}
.mpf-perks li::before{content:'★';position:absolute;inset-inline-start:0;color:var(--pc);}
.mpf-cat{margin-bottom:14px;}
.mpf-cat-h{font-size:11.5px;font-weight:900;color:var(--t1,#F4F0E6);margin-bottom:7px;padding-bottom:6px;border-bottom:1px dashed var(--bdr);}
.mpf-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:11.5px;color:var(--t2,#C8BFA8);font-weight:600;}
.mpf-check{color:#4ade80;font-weight:900;}
/* ═══ ✨ شاشة اختيار الباقة — تصميم ساحر ═══ */
.splans-wrap{ max-width:1180px; margin:0 auto 34px; }
.splans-grid{
display:grid; grid-template-columns:repeat(5,1fr); gap:13px; align-items:start;
}
.splans-hint{ display:none; }
/* لوحي: 3 في صف */
@media(max-width:1023px){ .splans-grid{ grid-template-columns:repeat(3,1fr); gap:11px; } }
/* جوال: مربّعان في صف */
@media(max-width:640px){ .splans-grid{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.splan{
position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px;
background:linear-gradient(170deg,#141414,#0d0d0d);
border:1.5px solid rgba(255,255,255,.08); border-radius:18px; padding:15px 12px;
transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .25s,box-shadow .25s;
}
@media(max-width:640px){
.splan{ padding:13px 9px; border-radius:16px; gap:7px; }
.splan-ico{ width:50px !important; height:50px !important; font-size:26px !important; }
.splan-name{ font-size:14px !important; }
.splan-tag{ font-size:9px !important; min-height:26px !important; }
.splan-price{ font-size:26px !important; }
.splan-en{ font-size:7.5px !important; }
}
.splan::before{ content:''; position:absolute; top:0; left:0; right:0; height:4px; background:linear-gradient(90deg,var(--pc),color-mix(in srgb,var(--pc) 55%,#000)); }
.splan-glow{ position:absolute; top:-50px; right:-50px; width:150px; height:150px; border-radius:50%; background:var(--pc); filter:blur(60px); opacity:.18; pointer-events:none; }
.splan:hover{ transform:translateY(-4px); border-color:color-mix(in srgb,var(--pc) 50%,transparent); box-shadow:0 16px 40px rgba(0,0,0,.45); }
.splan-feat{ border-color:rgba(212,175,55,.45); background:linear-gradient(170deg,#1a160c,#0d0b06); }
.splan-feat::before{ height:5px; }
.splan-ribbon{
position:absolute; top:13px; left:-32px; transform:rotate(-45deg);
background:linear-gradient(135deg,#E8C96A,#A07830); color:#1a1408;
font-size:8px; font-weight:900; padding:4px 36px; z-index:3; letter-spacing:.5px;
}
.splan-head{ position:relative; z-index:1; text-align:center; }
.splan-ico{
width:62px; height:62px; margin:0 auto 9px; display:flex; align-items:center; justify-content:center;
border-radius:18px; font-size:32px;
background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 30%,transparent),color-mix(in srgb,var(--pc) 8%,transparent));
border:1.5px solid color-mix(in srgb,var(--pc) 35%,transparent);
box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 8px 22px color-mix(in srgb,var(--pc) 25%,transparent);
}
.splan-en{ font-family:'Outfit',sans-serif; font-size:8.5px; color:var(--pc); font-weight:800; letter-spacing:2px; text-transform:uppercase; }
.splan-name{ font-size:17px; font-weight:900; color:#fff; margin-top:3px; letter-spacing:-.3px; }
.splan-tag{ font-size:10.5px; color:rgba(255,255,255,.5); font-weight:600; margin-top:4px; line-height:1.5; min-height:30px; }
.splan-price-box{
position:relative; z-index:1; text-align:center; padding:13px; border-radius:15px;
background:color-mix(in srgb,var(--pc) 10%,transparent); border:1px solid color-mix(in srgb,var(--pc) 22%,transparent);
}
.splan-feat .splan-price-box{ background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 75%,#000)); border:none; }
.splan-price{ font-family:'Outfit',sans-serif; font-size:34px; font-weight:900; color:var(--pc); line-height:1; letter-spacing:-1.5px; }
.splan-feat .splan-price{ color:#fff; }
.splan-price span{ font-size:14px; font-weight:700; opacity:.8; margin-right:3px; }
.splan-cycle{ font-size:9px; font-weight:800; color:rgba(255,255,255,.5); margin-top:5px; letter-spacing:.5px; }
.splan-feat .splan-cycle{ color:rgba(255,255,255,.8); }
.splan-featbar{ text-align:center; font-size:10px; font-weight:700; color:rgba(255,255,255,.6); background:rgba(255,255,255,.04); border-radius:9px; padding:5px; }
.splan-featbar span{ font-family:'Outfit',sans-serif; font-weight:900; color:var(--pc); font-size:13px; }
.splan-perks{ display:none; flex-direction:column; gap:6px; padding-top:4px; }
.splan-perks.is-open{ display:flex; }
.splan-perk{ display:flex; align-items:flex-start; gap:7px; font-size:11px; color:rgba(255,255,255,.75); font-weight:600; line-height:1.5; text-align:right; }
.splan-perk-chk{ flex-shrink:0; width:16px; height:16px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:color-mix(in srgb,var(--pc) 22%,transparent); color:var(--pc); font-size:9px; font-weight:900; margin-top:1px; }
.splan-more{ margin-top:auto; width:100%; padding:8px; border-radius:11px; border:1px dashed color-mix(in srgb,var(--pc) 35%,transparent); background:transparent; color:var(--pc); font-family:'Cairo'; font-size:10.5px; font-weight:800; cursor:pointer; transition:background .18s; }
.splan-more:hover{ background:color-mix(in srgb,var(--pc) 8%,transparent); }
.splan-cta{
width:100%; padding:13px; border-radius:13px; border:none;
background:linear-gradient(135deg,var(--pc),color-mix(in srgb,var(--pc) 72%,#000)); color:#fff;
font-family:'Cairo'; font-size:13px; font-weight:900; cursor:pointer;
display:inline-flex; align-items:center; justify-content:center; gap:7px;
box-shadow:0 10px 24px color-mix(in srgb,var(--pc) 38%,transparent),inset 0 1px 0 rgba(255,255,255,.25);
transition:filter .18s,transform .18s;
}
.splan-cta:hover{ filter:brightness(1.1); transform:translateY(-1px); }
/* 🏢 نوع العميل (فرد/شركة) + حقول الشركة الذكية */
.rec-custtype-seg{display:flex;gap:8px;}
.rec-ctype-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border-radius:12px;
border:1.5px solid var(--bdr,rgba(201,168,76,.15));background:var(--d2,#0E1014);color:var(--t2,#C8BFA8);
font-family:'Cairo';font-size:12.5px;font-weight:800;cursor:pointer;transition:all .18s;}
.rec-ctype-btn .rec-ctype-ico{font-size:16px;}
.rec-ctype-btn.is-on{border-color:var(--g2,#E8C96A);background:linear-gradient(135deg,rgba(201,168,76,.14),rgba(201,168,76,.04));color:var(--g2,#E8C96A);box-shadow:0 4px 14px rgba(201,168,76,.15);}
.rec-company-box{margin-top:12px;padding:14px;border-radius:15px;width:100%;box-sizing:border-box;
background:linear-gradient(160deg,rgba(227,169,44,.08),rgba(227,169,44,.02));border:1px solid rgba(227,169,44,.25);
animation:recCompanyIn .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes recCompanyIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:translateY(0);}}
.rec-company-box-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.rec-company-box-ico{width:38px;height:38px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:11px;font-size:18px;background:linear-gradient(135deg,#A07830,#A07830);color:#fff;box-shadow:0 6px 16px rgba(201,168,76,.35);}
.rec-company-box-title{font-size:13px;font-weight:900;color:var(--t1,#F4F0E6);}
.rec-company-box-sub{font-size:10px;color:var(--t3,#7A7260);font-weight:600;margin-top:2px;}
.rec-company-hint{font-size:9.5px;color:var(--t3,#7A7260);font-weight:600;margin-top:4px;}
/* شارات الشركة في بطاقة الفحص */
.tkc-company-badge{display:inline-flex;align-items:center;gap:3px;background:rgba(227,169,44,.16);border:1px solid rgba(227,169,44,.35);color:#c084fc;font-size:9px;font-weight:800;padding:2px 8px;border-radius:20px;margin-inline-start:7px;}
.tkc-company-contact{font-size:10.5px;color:var(--t3,#7A7260);font-weight:600;margin-top:2px;}
.tkc-company-vat{font-size:10px;color:#c084fc;font-weight:700;margin-top:2px;font-family:monospace;direction:ltr;text-align:right;}
/* 🆕✨ طي السايد بار — تصميم مستقبلي سلس (ديسكتوب) */
@media(min-width:1024px){
.dash-sb{ transition:width .42s cubic-bezier(.65,.05,.36,1), min-width .42s cubic-bezier(.65,.05,.36,1), padding .42s, opacity .3s; overflow:hidden; }
.dash-sb .sb-nav-item .nl,
.dash-sb .sb-profile-info,
.dash-sb .sb-section-title,
.dash-sb .sb-profile-date{ transition:opacity .25s ease, transform .3s ease; white-space:nowrap; }
/* الحالة المطوية: شريط أيقونات نحيف أنيق */
.dash-sb.is-collapsed{ width:72px !important; min-width:72px !important; padding-inline:8px !important; }
.dash-sb.is-collapsed .sb-panel-head,
.dash-sb.is-collapsed .sb-profile-info,
.dash-sb.is-collapsed .sb-profile-date,
.dash-sb.is-collapsed .sb-section-title,
.dash-sb.is-collapsed .sb-nav-item .nl,
.dash-sb.is-collapsed .sb-nav-item .sb-badge,
.dash-sb.is-collapsed .sb-quick-icons{ opacity:0; transform:translateX(12px); width:0; height:0; overflow:hidden; pointer-events:none; }
.dash-sb.is-collapsed .sb-profile{ flex-direction:column; align-items:center; gap:4px; }
.dash-sb.is-collapsed .sb-profile-avatar{ margin:0 auto; }
.dash-sb.is-collapsed .sb-nav-item{
justify-content:center; padding:11px 0; margin-bottom:5px; border-radius:14px; position:relative;
}
.dash-sb.is-collapsed .sb-nav-item .ni{ margin:0; }
/* تلميح زجاجي مستقبلي عند المرور */
.dash-sb.is-collapsed .sb-nav-item:hover::after{
content:attr(data-label); position:absolute; inset-inline-start:calc(100% + 14px); top:50%; transform:translateY(-50%) scale(.96);
white-space:nowrap; background:linear-gradient(135deg,rgba(20,19,12,.96),rgba(13,12,8,.96));
backdrop-filter:blur(10px); color:var(--g2,#E8C96A); font-size:12px; font-weight:800; letter-spacing:.3px;
padding:8px 14px; border-radius:11px; border:1px solid var(--bdr2,rgba(201,168,76,.3));
box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 0 1px rgba(201,168,76,.1); z-index:60; pointer-events:none;
animation:sbTipIn .2s cubic-bezier(.34,1.56,.64,1);
}
.dash-sb.is-collapsed .sb-nav-item:hover::before{
content:''; position:absolute; inset-inline-start:calc(100% + 7px); top:50%; transform:translateY(-50%) rotate(45deg);
width:9px; height:9px; background:rgba(20,19,12,.96); border-inline-start:1px solid var(--bdr2,rgba(201,168,76,.3)); border-block-end:1px solid var(--bdr2,rgba(201,168,76,.3)); z-index:60;
}
@keyframes sbTipIn{ from{opacity:0;transform:translateY(-50%) translateX(-6px) scale(.9);} to{opacity:1;transform:translateY(-50%) scale(.96);} }
/* توهّج لطيف على الأيقونة النشطة في الوضع المطوي */
.dash-sb.is-collapsed .sb-nav-item.is-active{ background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(201,168,76,.05)); box-shadow:inset 0 0 0 1px rgba(201,168,76,.3); }
}
/* زر القائمة في الهيدر — توهّج عند التفعيل */
.dhp-panel-trigger{ transition:transform .2s, background .2s; }
.dhp-panel-trigger:hover{ transform:scale(1.08); }
.dhp-panel-trigger:active{ transform:scale(.94); }
/* 👑 شارة صاحب الحساب المؤسس (المربوط بالباقة) */
.staff-founder-badge{display:inline-flex;align-items:center;gap:3px;background:linear-gradient(135deg,rgba(201,168,76,.18),rgba(160,120,48,.06));border:1px solid rgba(201,168,76,.4);color:#C9A84C;font-size:9px;font-weight:900;padding:2px 8px;border-radius:20px;margin-inline-start:6px;white-space:nowrap;}
/* 🔧 إصلاح القوائم المنسدلة عالمياً — خلفية داكنة ونص فاتح (تمنع أبيض على أبيض) */
select option,
select optgroup{
background:#16161c !important;
color:#F4F0E6 !important;
}
select optgroup{font-weight:800;color:#C9A84C !important;}
/* 🗓️ فلتر أيام الشهر في قسم الدخل */
.qd-dc-income-big{grid-column:1 / -1;}
.qd-day-filter{display:flex;gap:5px;overflow-x:auto;padding:10px 2px 12px;margin-bottom:6px;scrollbar-width:thin;}
.qd-day-filter::-webkit-scrollbar{height:5px;}
.qd-day-filter::-webkit-scrollbar-thumb{background:rgba(201,168,76,.3);border-radius:10px;}
.qd-day-chip{position:relative;flex-shrink:0;min-width:34px;height:36px;padding:0 9px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);color:var(--t2,#C8BFA8);font-size:12px;font-weight:800;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;}
.qd-day-chip:hover{background:rgba(255,255,255,.08);color:var(--t1);}
.qd-day-chip.qd-day-has{color:#4ade80;border-color:rgba(74,222,128,.25);}
.qd-day-chip.on{background:linear-gradient(135deg,#22C55E,#15803d);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(34,197,94,.35);}
.qd-day-dot{position:absolute;top:5px;left:5px;width:5px;height:5px;border-radius:50%;background:#4ade80;}
.qd-day-chip.on .qd-day-dot{background:#fff;}
.qd-day-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:12px;background:linear-gradient(135deg,rgba(34,197,94,.1),rgba(34,197,94,.02));border:1px solid rgba(34,197,94,.2);border-radius:14px;}
.qd-day-sum-hero{display:flex;flex-direction:column;gap:3px;}
.qd-day-sum-num{font-size:28px;font-weight:900;color:#4ade80;line-height:1;font-variant-numeric:tabular-nums;}
.qd-day-sum-lbl{font-size:10.5px;color:var(--t3,#7A7260);font-weight:700;}
.qd-day-sum-total{font-size:19px;font-weight:900;color:#4ade80;direction:ltr;font-variant-numeric:tabular-nums;}
.qd-day-sum-total span{font-size:11px;opacity:.6;}
/* 🎯 البطاقة العريضة (الأكثر استخداماً) — قيمة أكبر وحضور أقوى */
.qd-pm-wide{background:linear-gradient(150deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:var(--pmc,rgba(255,255,255,.15));}
.qd-pm-wide::before{width:5px;}
.qd-pm-wide .qd-pm-item-val{font-size:32px;}
.qd-pm-wide .qd-pm-item-ico{width:40px;height:40px;font-size:22px;}
.qd-pm-wide .qd-pm-item-name{font-size:14.5px;}
.qd-pm-wide .qd-pm-item-bar{height:7px;}
@media(max-width:560px){
.qd-pm-sec-items{grid-template-columns:1fr 1fr;}
.qd-pm-wide{grid-column:span 2;}
.qd-pm-wide .qd-pm-item-val{font-size:26px;}
}
/* 📉 قسم المخصومات المدفوعة — مستطيل ذكي مفصّل */
.qd-dc-deduct-big{grid-column:1 / -1;}
.qd-ded-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px;}
.qd-ded-stat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:13px;border-top:2px solid var(--sc,#888);}
.qd-ded-stat-lbl{font-size:10.5px;font-weight:800;color:var(--t3,#7A7260);}
.qd-ded-stat-val{font-size:18px;font-weight:900;color:var(--sc,#fff);direction:ltr;font-variant-numeric:tabular-nums;}
.qd-ded-stat-total{background:linear-gradient(150deg,rgba(248,113,113,.1),rgba(248,113,113,.02));border-color:rgba(248,113,113,.25);}
.qd-ded-cols{display:grid;grid-template-columns:1fr;gap:14px;}
.qd-ded-col{background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:13px;}
.qd-ded-col-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:900;color:var(--cc,#fff);padding-bottom:10px;margin-bottom:11px;border-bottom:1px dashed rgba(255,255,255,.08);}
.qd-ded-col-h b{font-variant-numeric:tabular-nums;direction:ltr;}
.qd-ded-col-fixed{border-inline-start:4px solid #fb923c;}
.qd-ded-col-var{border-inline-start:4px solid #60A5FA;}
.qd-ded-col-body{display:flex;flex-direction:column;gap:8px;}
.qd-ded-row{display:flex;align-items:center;gap:11px;padding:10px 12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.05);border-radius:12px;border-inline-start:3px solid var(--rc,#888);transition:transform .15s,background .15s;}
.qd-ded-row:hover{transform:translateX(-3px);background:rgba(255,255,255,.05);}
.qd-ded-ico{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border-radius:10px;font-size:16px;}
.qd-ded-mid{flex:1;min-width:0;}
.qd-ded-name{font-size:12.5px;font-weight:800;color:var(--t1,#F4F0E6);display:flex;align-items:center;gap:7px;flex-wrap:wrap;}
.qd-ded-pct{font-size:8.5px;font-weight:900;color:var(--rc,#888);background:rgba(255,255,255,.06);padding:1px 7px;border-radius:50px;}
.qd-ded-meta{font-size:9.5px;color:var(--t3,#7A7260);font-weight:700;margin-top:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.qd-ded-date{color:var(--t2,#C8BFA8);}
.qd-ded-cnt{background:rgba(255,255,255,.06);padding:0 6px;border-radius:5px;color:var(--t2);}
.qd-ded-val{font-size:14px;font-weight:900;color:var(--rc,#f87171);direction:ltr;flex-shrink:0;font-variant-numeric:tabular-nums;}
.qd-ded-val span{font-size:9px;opacity:.55;margin-inline-start:1px;}
.qd-ded-empty-sm{font-size:11px;color:var(--t4,#5a5444);text-align:center;padding:14px;font-weight:700;}
@media(min-width:768px){ .qd-ded-cols{grid-template-columns:1fr 1fr;} }
/* 🏦 الصندوقان النقدي والبنكي داخل الخزنة الموحّدة */
.qd-vault-boxes{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:16px 0;}
.qd-vbox{padding:14px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;}
.qd-vbox::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;}
.qd-vbox-cash::before{background:#4ade80;}
.qd-vbox-bank::before{background:#60A5FA;}
.qd-vbox-h{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;color:var(--t2,#C8BFA8);margin-bottom:8px;}
.qd-vbox-ico{font-size:15px;}
.qd-vbox-val{font-size:23px;font-weight:900;direction:ltr;font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1;}
.qd-vbox-cash .qd-vbox-val{color:#4ade80;}
.qd-vbox-bank .qd-vbox-val{color:#60A5FA;}
.qd-vbox.neg .qd-vbox-val{color:#fca5a5;}
.qd-vbox-val span{font-size:11px;opacity:.5;}
.qd-vbox-flow{display:flex;gap:9px;margin-top:9px;font-size:10px;font-weight:800;font-family:'Outfit',monospace;direction:ltr;}
.qd-vbox-in{color:#4ade80;background:rgba(74,222,128,.1);padding:2px 8px;border-radius:6px;}
.qd-vbox-out{color:#f87171;background:rgba(248,113,113,.1);padding:2px 8px;border-radius:6px;}
/* 📋 الملخّص المحاسبي (ما علينا / ما خُصم) */
.qd-vault-ledger{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06);border-radius:15px;padding:13px 15px;margin-bottom:14px;}
.qd-led-row{display:flex;justify-content:space-between;align-items:center;padding:7px 0;font-size:12px;font-weight:700;color:var(--t2,#C8BFA8);border-bottom:1px dashed rgba(255,255,255,.06);}
.qd-led-row:last-child{border-bottom:none;}
.qd-led-row b{font-variant-numeric:tabular-nums;direction:ltr;font-weight:900;}
.qd-led-empty{font-size:11px;color:var(--t4,#5a5444);text-align:center;padding:8px;font-weight:700;}
/* ⚡ الأزرار الذكية */
.qd-vault-smart{margin-bottom:14px;}
.qd-smart-title{font-size:11px;font-weight:900;color:var(--g2,#E8C96A);margin-bottom:10px;letter-spacing:.2px;}
.qd-smart-btns{display:grid;grid-template-columns:1fr 1fr;gap:9px;}
.qd-smart-btn{display:flex;align-items:center;gap:9px;padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);cursor:pointer;transition:all .18s cubic-bezier(.34,1.4,.5,1);text-align:start;font-family:inherit;}
.qd-smart-btn:hover{transform:translateY(-2px);border-color:rgba(201,168,76,.4);background:rgba(255,255,255,.07);}
.qd-smart-btn:active{transform:scale(.97);}
.qd-smart-ico{font-size:18px;flex-shrink:0;}
.qd-smart-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.qd-smart-txt b{font-size:12px;font-weight:800;color:var(--t1,#F4F0E6);}
.qd-smart-txt i{font-size:10.5px;font-style:normal;color:var(--t3,#7A7260);font-weight:700;direction:ltr;}
.qd-smart-state{font-size:9.5px;font-weight:900;color:var(--t3,#7A7260);background:rgba(255,255,255,.06);padding:3px 9px;border-radius:50px;flex-shrink:0;white-space:nowrap;}
.qd-smart-btn.on{background:linear-gradient(135deg,rgba(34,197,94,.16),rgba(34,197,94,.05));border-color:rgba(34,197,94,.4);}
.qd-smart-btn.on .qd-smart-state{color:#fff;background:linear-gradient(135deg,#22C55E,#15803d);}
.qd-smart-btn.on .qd-smart-txt b{color:#86efac;}
.qd-smart-nav .qd-smart-state{color:var(--g2,#E8C96A);background:rgba(201,168,76,.12);}
@media(max-width:560px){.qd-smart-btns{grid-template-columns:1fr;}.qd-vault-boxes{grid-template-columns:1fr;}}
/* 🔒 مؤشّر المبلغ المحجوز فورياً في الخزنة */
.qd-vault-reserved{margin-top:8px;font-size:11px;font-weight:800;color:#fbbf24;background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.25);border-radius:9px;padding:6px 12px;display:inline-block;direction:rtl;}
/* 🏦 الحقيبة البنكية الشاملة — مستطيل عريض */
.qd-pm-bag{grid-column:1 / -1 !important;background:linear-gradient(150deg,rgba(56,189,248,.1),rgba(56,189,248,.02))!important;border-color:rgba(56,189,248,.3)!important;padding:18px!important;}
.qd-pm-bag .qd-pm-item-val{font-size:30px;}
.qd-pm-bag-ledger{margin-top:13px;padding-top:13px;border-top:1px dashed rgba(255,255,255,.1);}
.qd-pm-bag-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12px;font-weight:700;color:var(--t2,#C8BFA8);}
.qd-pm-bag-row b{font-variant-numeric:tabular-nums;direction:ltr;font-weight:900;}
.qd-pm-bag-total{margin-top:5px;padding-top:9px;border-top:1px solid rgba(56,189,248,.25);font-size:13px;}
.qd-pm-bag-total span{color:var(--t1,#F4F0E6);font-weight:900;}
/* شبكة قنوات ديناميكية واسعة مرتبة (تتفاعل مع حجم الشاشة) */
.qd-pm-bag-grid,.qd-pm-bag-row1{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
@media(min-width:1400px){.qd-pm-bag-grid,.qd-pm-bag-row1{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}}
@media(max-width:900px){.qd-pm-bag-grid,.qd-pm-bag-row1{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}}
@media(max-width:680px){.qd-pm-bag-grid,.qd-pm-bag-row1{grid-template-columns:1fr;}}
.qd-pm-bag-chan-title{font-size:10.5px;font-weight:900;color:#7dd3fc;margin:15px 0 10px;letter-spacing:.2px;text-transform:none;}
.qd-pm-chan-top{border-color:var(--chc,#38bdf8)!important;background:rgba(255,255,255,.06)!important;box-shadow:0 4px 14px rgba(0,0,0,.25);}
.qd-pm-chan-star{position:absolute;top:9px;inset-inline-end:10px;font-size:8px;font-weight:900;color:var(--chc,#38bdf8);background:rgba(255,255,255,.1);padding:2px 7px;border-radius:50px;}
.qd-pm-chan::before{background:var(--chc,#38bdf8);}
.qd-pm-chan-val,.qd-pm-chan-fill{color:var(--chc,#38bdf8);}
.qd-pm-chan-fill{background:var(--chc,#38bdf8);}
.qd-pm-chan{position:relative;display:flex;align-items:center;gap:11px;background:rgba(56,189,248,.06);border:1px solid rgba(56,189,248,.18);border-radius:14px;padding:15px 16px;min-height:88px;transition:transform .15s,border-color .15s;overflow:hidden;min-width:0;}
.qd-pm-chan::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--chc,#38bdf8);}
.qd-pm-chan:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.4);}
.qd-pm-chan-h{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;margin:0;width:62px;}
.qd-pm-chan-ico{font-size:18px;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(56,189,248,.12);border-radius:11px;flex-shrink:0;}
.qd-pm-chan-name{font-size:10.5px;font-weight:800;color:var(--t1,#F4F0E6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62px;text-align:center;}
.qd-pm-chan-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;}
.qd-pm-chan-flows{display:flex;flex-wrap:wrap;gap:6px;font-size:9.5px;font-weight:800;font-family:'Outfit',monospace;direction:ltr;}
.qd-pm-chan-in{color:#4ade80;background:rgba(74,222,128,.12);padding:2px 7px;border-radius:6px;}
.qd-pm-chan-out{color:#f87171;background:rgba(248,113,113,.12);padding:2px 7px;border-radius:6px;}
.qd-pm-chan-val{font-size:19px;font-weight:900;color:var(--chc,#38bdf8);direction:ltr;font-variant-numeric:tabular-nums;letter-spacing:-.4px;line-height:1;}
.qd-pm-chan-val span{font-size:9px;opacity:.5;}
.qd-pm-chan-valbox{flex-shrink:0;display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:end;}
.qd-pm-chan-vallbl{font-size:8px;font-weight:700;color:var(--t3,#7A7260);}
.qd-pm-chan-bar{height:5px;border-radius:50px;background:rgba(255,255,255,.08);overflow:hidden;margin:0;width:100%;}
.qd-pm-chan-fill{height:100%;border-radius:50px;background:var(--chc,#38bdf8);transition:width .6s cubic-bezier(.4,0,.2,1);}
.qd-pm-chan-meta{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:8.5px;font-weight:700;color:var(--t3,#7A7260);}
.qd-pm-chan-fee{color:#c084fc;background:rgba(192,132,252,.12);padding:2px 7px;border-radius:6px;flex-shrink:0;}
.qd-pm-chan-star{position:absolute;top:0;inset-inline-end:12px;font-size:7.5px;font-weight:900;color:var(--chc,#38bdf8);background:rgba(255,255,255,.1);padding:2px 7px;border-radius:0 0 7px 7px;}
/* 🎫 نافذة تذاكر القناة — رقيقة وراقية */
.qd-pm-chan-click{cursor:pointer;}
.qd-pm-chan-click:active{transform:scale(.98);}
.qctk-overlay{position:fixed;inset:0;z-index:99999;background:rgba(6,8,12,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:20px;animation:qctkFade .25s ease;}
@keyframes qctkFade{from{opacity:0}to{opacity:1}}
.qctk-modal{width:100%;max-width:440px;max-height:82vh;display:flex;flex-direction:column;background:linear-gradient(165deg,#1a1d26,#0e1016);border:1px solid rgba(201,168,76,.2);border-radius:24px;box-shadow:0 30px 80px rgba(0,0,0,.6);overflow:hidden;animation:qctkRise .35s cubic-bezier(.16,1,.3,1);}
@keyframes qctkRise{from{opacity:0;transform:translateY(24px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.qctk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 22px 16px;border-bottom:1px solid rgba(255,255,255,.06);}
.qctk-head-title{font-size:17px;font-weight:900;color:var(--t1,#F4F0E6);letter-spacing:-.3px;}
.qctk-head-sub{font-size:11px;color:var(--t3,#7A7260);font-weight:700;margin-top:4px;}
.qctk-close{width:34px;height:34px;border-radius:11px;background:rgba(255,255,255,.06);border:none;color:var(--t2,#C8BFA8);font-size:15px;cursor:pointer;flex-shrink:0;transition:all .15s;display:flex;align-items:center;justify-content:center;}
.qctk-close:hover{background:rgba(248,113,113,.15);color:#f87171;transform:rotate(90deg);}
.qctk-total{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 22px;padding:14px 18px;background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.02));border:1px solid rgba(201,168,76,.2);border-radius:15px;}
.qctk-total span{font-size:12px;font-weight:700;color:var(--t2,#C8BFA8);}
.qctk-total b{font-size:20px;font-weight:900;color:var(--g2,#E8C96A);direction:ltr;font-variant-numeric:tabular-nums;letter-spacing:-.5px;}
.qctk-list{flex:1;overflow-y:auto;padding:0 16px 18px;display:flex;flex-direction:column;gap:9px;}
.qctk-list::-webkit-scrollbar{width:7px;}
.qctk-list::-webkit-scrollbar-thumb{background:rgba(201,168,76,.25);border-radius:10px;}
.qctk-row{display:flex;align-items:center;gap:12px;padding:13px 15px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:15px;transition:transform .15s,background .15s,border-color .15s;animation:qctkRow .4s ease backwards;}
.qctk-row:hover{transform:translateX(-4px);background:rgba(255,255,255,.06);border-color:rgba(201,168,76,.2);}
@keyframes qctkRow{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.qctk-ico{width:40px;height:40px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:rgba(201,168,76,.1);border-radius:12px;font-size:18px;}
.qctk-mid{flex:1;min-width:0;}
.qctk-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.qctk-num{font-size:13px;font-weight:900;color:var(--g2,#E8C96A);direction:ltr;}
.qctk-car{font-size:12.5px;font-weight:800;color:var(--t1,#F4F0E6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;}
.qctk-plate{font-size:10px;font-weight:700;color:var(--t2,#C8BFA8);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:6px;direction:ltr;}
.qctk-cust{font-size:11px;color:var(--t2,#C8BFA8);font-weight:700;margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.qctk-phone{color:var(--t3,#7A7260);direction:ltr;background:rgba(255,255,255,.05);padding:1px 7px;border-radius:5px;font-size:9.5px;}
.qctk-sub{font-size:10px;color:var(--t3,#7A7260);font-weight:700;margin-top:4px;direction:ltr;text-align:start;}
.qctk-amt{font-size:16px;font-weight:900;color:#4ade80;direction:ltr;flex-shrink:0;font-variant-numeric:tabular-nums;letter-spacing:-.3px;}
.qctk-amt span{font-size:9px;opacity:.5;}
.qctk-empty{text-align:center;padding:36px 20px;color:var(--t3,#7A7260);font-size:12.5px;font-weight:700;}
/* 💰 منتقي وسيلة دفع التذكرة */
.qpay-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:6px 18px 20px;}
.qpay-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;padding:18px 12px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:16px;cursor:pointer;transition:all .18s cubic-bezier(.34,1.4,.5,1);font-family:inherit;}
.qpay-btn::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;background:var(--pc,#888);border-radius:16px 0 0 16px;opacity:.8;}
.qpay-btn:hover{transform:translateY(-3px);border-color:var(--pc,#888);background:rgba(255,255,255,.07);box-shadow:0 8px 22px rgba(0,0,0,.3);}
.qpay-btn:active{transform:scale(.96);}
.qpay-ico{font-size:26px;}
.qpay-name{font-size:13px;font-weight:900;color:var(--t1,#F4F0E6);}
.qpay-type{font-size:9px;font-weight:800;color:var(--pc,#888);background:rgba(255,255,255,.06);padding:2px 9px;border-radius:50px;}
/* ملخّص وأقسام نافذة القناة */
.qctk-summary{display:flex;gap:8px;margin:16px 22px;}
.qctk-sum-cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:13px;}
.qctk-sum-cell span{font-size:9.5px;font-weight:700;color:var(--t3,#7A7260);}
.qctk-sum-cell b{font-size:15px;font-weight:900;direction:ltr;font-variant-numeric:tabular-nums;}
.qctk-sum-net{background:linear-gradient(135deg,rgba(201,168,76,.1),rgba(201,168,76,.02));border-color:rgba(201,168,76,.2);}
.qctk-section-title{font-size:11px;font-weight:900;color:#f87171;margin:14px 4px 4px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.08);}
.qctk-row-exp{border-color:rgba(248,113,113,.15);}
.qctk-row-exp:hover{border-color:rgba(248,113,113,.3);}
/* 💰 قائمة وسائل الدفع في تم الدفع — صفوف أنيقة */
.qpay-list{display:flex;flex-direction:column;gap:9px;padding:6px 18px 20px;}
.qpay-row{position:relative;display:flex;align-items:center;gap:13px;padding:15px 16px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:15px;cursor:pointer;transition:all .18s cubic-bezier(.34,1.4,.5,1);font-family:inherit;text-align:start;}
.qpay-row::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--pc,#888);border-radius:15px 0 0 15px;}
.qpay-row:hover{transform:translateX(-4px);border-color:var(--pc,#888);background:rgba(255,255,255,.07);box-shadow:0 6px 18px rgba(0,0,0,.28);}
.qpay-row:active{transform:scale(.98);}
.qpay-row-ico{font-size:24px;width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.05);border-radius:13px;flex-shrink:0;}
.qpay-row-name{flex:1;font-size:15px;font-weight:900;color:var(--t1,#F4F0E6);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qpay-row-type{font-size:10px;font-weight:800;color:var(--pc,#888);background:rgba(255,255,255,.06);padding:3px 11px;border-radius:50px;flex-shrink:0;}
.qpay-row-arrow{color:var(--pc,#888);font-size:18px;font-weight:900;flex-shrink:0;opacity:.5;transition:opacity .15s,transform .15s;}
.qpay-row:hover .qpay-row-arrow{opacity:1;transform:translateX(-3px);}
/* 💰 حالة دفع أجزاء التقسيم */
.rec-split-paid-row{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap;}
.rec-split-paid-chk{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:11.5px;font-weight:700;color:var(--t2,#C8BFA8);}
.rec-split-paid-chk input{width:auto!important;margin:0!important;cursor:pointer;}
/* 💰 بطاقة الدفع الجزئي — كهرماني مميّز */
.tkcard-pro.is-partial, .tkrow-pro.is-partial{
border-color:rgba(245,158,11,.5);
background:
radial-gradient(ellipse at right top, rgba(245,158,11,.13), transparent 60%),
linear-gradient(155deg, var(--d3) 0%, var(--d4) 100%);
position:relative;
}
.tkcard-pro.is-partial::before, .tkrow-pro.is-partial::before{
content:"";position:absolute;top:10px;left:10px;width:10px;height:10px;
background:#f59e0b;border-radius:50%;
box-shadow:0 0 0 0 rgba(245,158,11,.7),0 0 12px rgba(245,158,11,.6);
animation:tkUnpaidDot 1.8s ease-out infinite;z-index:2;
}
.tkc-pay-pill.tkc-pay-defer{
background:linear-gradient(135deg,rgba(245,158,11,.2),rgba(245,158,11,.08))!important;
border-color:rgba(245,158,11,.45)!important;color:#fcd34d!important;font-weight:900;
}
.tkc-pay-debt{
display:inline-block;background:linear-gradient(135deg,#fbbf24,#f59e0b);color:#1a1a1a;
font-size:10px;font-weight:900;padding:3px 11px;border-radius:50px;margin-top:4px;
}
/* ═══ 📊 لوحة المعلومات الذكية ═══ */
.dbrd-wrap{display:block;}
/* 🆕 اللوحتان جنباً لجنب تحت بطاقات الإحصاء */
.dbrd-panels{display:grid;grid-template-columns:360px 1fr;gap:18px;align-items:start;margin-top:4px;}
@media(max-width:1023px){.dbrd-panels{grid-template-columns:1fr;}}
.dbrd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;}
.dbrd-title{font-size:23px;font-weight:900;color:var(--t1,#F4F0E6);letter-spacing:-.5px;}
.dbrd-sub{font-size:12px;color:var(--t3,#7A7260);font-weight:700;margin-top:3px;}
.dbrd-refresh{width:40px;height:40px;border-radius:13px;background:rgba(255,255,255,.05);border:1px solid var(--bdr,rgba(255,255,255,.1));color:var(--t2,#C8BFA8);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;}
.dbrd-refresh:hover{background:rgba(201,168,76,.12);color:var(--g2,#E8C96A);transform:rotate(180deg);}
/* فلتر الأيام */
.dbrd-dayfilter{margin-bottom:20px;}
.dbrd-df-bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.dbrd-df-toggle{display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(56,189,248,.14),rgba(168,139,250,.06));border:1px solid rgba(56,189,248,.28);color:#e0f2fe;font-size:13px;font-weight:800;font-family:inherit;cursor:pointer;transition:all .2s;}
.dbrd-df-toggle:hover{border-color:rgba(56,189,248,.5);box-shadow:0 6px 18px rgba(56,189,248,.18);}
.dbrd-df-toggle.open{background:linear-gradient(135deg,#38bdf8,#0ea5e9);color:#06121f;border-color:transparent;}
.dbrd-df-cal{font-size:15px;}
.dbrd-df-current{min-width:70px;}
.dbrd-df-chev{font-size:9px;opacity:.7;}
.dbrd-df-all,.dbrd-df-today{padding:10px 15px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--bdr,rgba(255,255,255,.1));color:var(--t2,#C8BFA8);font-size:12px;font-weight:800;font-family:inherit;cursor:pointer;transition:all .2s;}
.dbrd-df-all:hover,.dbrd-df-today:hover{border-color:rgba(56,189,248,.4);color:#7dd3fc;}
.dbrd-df-all.on,.dbrd-df-today.on{background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g3,#A07830));color:#1a1a1a;border-color:transparent;box-shadow:0 4px 14px rgba(201,168,76,.3);}
/* الدرج المنسدل لأيام الشهر */
.dbrd-df-drawer{display:flex;gap:7px;overflow-x:auto;max-height:0;opacity:0;padding:0 2px;transition:max-height .35s cubic-bezier(.16,1,.3,1),opacity .25s,padding .3s,margin .3s;scrollbar-width:thin;}
.dbrd-df-drawer.open{max-height:90px;opacity:1;padding:12px 2px 4px;margin-top:4px;}
.dbrd-df-drawer::-webkit-scrollbar{height:5px;}
.dbrd-df-drawer::-webkit-scrollbar-thumb{background:rgba(56,189,248,.3);border-radius:10px;}
.dbrd-df-day{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:50px;padding:8px 4px;border-radius:13px;background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.005));border:1px solid rgba(255,255,255,.07);cursor:pointer;font-family:inherit;transition:transform .16s,border-color .16s,background .16s;}
.dbrd-df-day:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.35);background:rgba(56,189,248,.06);}
.dbrd-df-dow{font-size:9px;font-weight:700;color:var(--t3,#7A7260);}
.dbrd-df-num{font-size:15px;font-weight:900;color:var(--t1,#F4F0E6);font-family:'Outfit',inherit;line-height:1;}
.dbrd-df-count{position:absolute;top:-5px;inset-inline-end:-4px;min-width:15px;height:15px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:900;color:#06121f;background:linear-gradient(135deg,#4ade80,#22c55e);border-radius:50px;padding:0 4px;box-shadow:0 2px 6px rgba(34,197,94,.4);}
.dbrd-df-day.today{border-color:rgba(201,168,76,.45);}
.dbrd-df-day.today .dbrd-df-num{color:var(--g2,#E8C96A);}
.dbrd-df-day.on{background:linear-gradient(155deg,#38bdf8,#0ea5e9);border-color:transparent;box-shadow:0 8px 22px rgba(56,189,248,.4);transform:translateY(-2px);}
.dbrd-df-day.on .dbrd-df-dow,.dbrd-df-day.on .dbrd-df-num{color:#06121f;}
.dbrd-df-day.on .dbrd-df-count{background:#06121f;color:#7dd3fc;}
/* بطاقات الإحصاء */
.dbrd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px;}
.dbrd-card{flex:1 1 0;min-width:0;position:relative;display:flex;align-items:center;gap:10px;padding:14px;background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid var(--bdr,rgba(255,255,255,.09));border-radius:18px;overflow:hidden;transition:transform .18s,border-color .18s;}
.dbrd-card::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--cc,#888);}
.dbrd-card:hover{transform:translateY(-3px);border-color:var(--cc,#888);}
.dbrd-card-warn{background:linear-gradient(155deg,rgba(251,191,36,.12),rgba(251,191,36,.02));border-color:rgba(251,191,36,.3);}
.dbrd-card-ico{width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:22px;background:rgba(255,255,255,.06);border-radius:13px;}
.dbrd-card-body{flex:1;min-width:0;}
.dbrd-card-label{font-size:10.5px;font-weight:700;color:var(--t3,#7A7260);margin-bottom:4px;}
.dbrd-card-val{font-size:21px;font-weight:900;color:var(--cc,#fff);direction:ltr;font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1.1;text-align:start;}
.dbrd-card-sub{font-size:9.5px;font-weight:700;color:var(--t3,#7A7260);margin-top:4px;}
/* ═══ 🔔 اللوحة الجانبية المستقبلية (يسار) ═══ */
.dbrd-side{max-height:560px;display:flex;flex-direction:column;overflow:hidden;border-radius:22px;
background:linear-gradient(165deg,#0d1420 0%,#0a0e16 100%);
border:1px solid rgba(56,189,248,.18);
box-shadow:0 0 0 1px rgba(56,189,248,.05),0 20px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);}
.dbrd-side-glow{position:absolute;top:-40%;left:-20%;width:80%;height:80%;background:radial-gradient(circle,rgba(56,189,248,.18),transparent 70%);pointer-events:none;animation:dbrdGlow 8s ease-in-out infinite;}
@keyframes dbrdGlow{0%,100%{transform:translate(0,0);opacity:.6;}50%{transform:translate(20%,20%);opacity:1;}}
.dbrd-side-h{position:relative;display:flex;align-items:center;gap:11px;padding:18px 18px 16px;border-bottom:1px solid rgba(56,189,248,.12);}
.dbrd-side-ico{font-size:22px;animation:dbrdBell 3s ease-in-out infinite;}
@keyframes dbrdBell{0%,90%,100%{transform:rotate(0);}93%{transform:rotate(13deg);}96%{transform:rotate(-13deg);}}
.dbrd-side-title{font-size:14.5px;font-weight:900;color:#e0f2fe;letter-spacing:-.2px;}
.dbrd-side-sub{font-size:10px;color:#5b7a93;font-weight:700;margin-top:2px;}
.dbrd-side-live{margin-inline-start:auto;display:flex;align-items:center;}
.dbrd-side-live-dot{width:9px;height:9px;border-radius:50%;background:#22d3ee;box-shadow:0 0 0 0 rgba(34,211,238,.6);animation:dbrdLiveDot 1.6s ease-out infinite;}
@keyframes dbrdLiveDot{0%{box-shadow:0 0 0 0 rgba(34,211,238,.6);}70%{box-shadow:0 0 0 9px rgba(34,211,238,0);}100%{box-shadow:0 0 0 0 rgba(34,211,238,0);}}
.dbrd-notif-list{position:relative;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:9px;padding:14px;scrollbar-width:thin;}
.dbrd-notif-list::-webkit-scrollbar{width:6px;}
.dbrd-notif-list::-webkit-scrollbar-thumb{background:rgba(56,189,248,.25);border-radius:10px;}
.dbrd-notif-total{font-size:11.5px;font-weight:800;color:#bae6fd;background:linear-gradient(135deg,rgba(251,191,36,.12),rgba(56,189,248,.06));border:1px solid rgba(251,191,36,.2);border-radius:12px;padding:11px 14px;text-align:center;margin-bottom:4px;}
.dbrd-notif-total b{color:#fbbf24;direction:ltr;font-size:14px;}
.dbrd-notif{position:relative;display:flex;align-items:center;gap:11px;padding:12px;border-radius:15px;background:linear-gradient(150deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid rgba(56,189,248,.1);cursor:pointer;transition:transform .16s,background .16s,border-color .16s,box-shadow .16s;animation:dbrdNotifIn .4s cubic-bezier(.16,1,.3,1) backwards;overflow:hidden;}
@keyframes dbrdNotifIn{from{opacity:0;transform:translateX(-14px);}to{opacity:1;transform:translateX(0);}}
.dbrd-notif::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(56,189,248,.08),transparent);transform:translateX(-120%);transition:transform .5s;}
.dbrd-notif:hover{transform:translateX(-5px);border-color:rgba(56,189,248,.4);box-shadow:0 8px 24px rgba(0,0,0,.3);}
.dbrd-notif:hover::after{transform:translateX(120%);}
.dbrd-notif.is-unpaid{border-inline-start:3px solid #f87171;}
.dbrd-notif.is-partial{border-inline-start:3px solid #f59e0b;}
.dbrd-notif-badge{font-size:19px;flex-shrink:0;z-index:1;}
.dbrd-notif-body{flex:1;min-width:0;z-index:1;}
.dbrd-notif-top{font-size:12px;font-weight:800;color:#e0f2fe;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dbrd-notif-top b{color:#fbbf24;direction:ltr;}
.dbrd-notif-meta{font-size:9.5px;color:#5b7a93;font-weight:700;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dbrd-notif-tag{display:inline-block;font-size:8.5px;font-weight:800;margin-top:5px;padding:1px 8px;border-radius:50px;}
.dbrd-notif.is-unpaid .dbrd-notif-tag{background:rgba(248,113,113,.15);color:#fca5a5;}
.dbrd-notif.is-partial .dbrd-notif-tag{background:rgba(245,158,11,.15);color:#fcd34d;}
.dbrd-notif-amt{font-size:13px;font-weight:900;color:#fbbf24;direction:ltr;flex-shrink:0;font-variant-numeric:tabular-nums;z-index:1;}
.dbrd-notif-empty{text-align:center;padding:46px 16px;color:#5b7a93;font-size:12.5px;font-weight:700;line-height:2;}
/* ═══ 🔧 تقارير الفحص الفني ═══ */
.dbrd-reports{background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01));border:1px solid var(--bdr,rgba(255,255,255,.09));border-radius:22px;padding:18px;max-height:560px;overflow-y:auto;scrollbar-width:thin;}
.dbrd-reports::-webkit-scrollbar{width:6px;}
.dbrd-reports::-webkit-scrollbar-thumb{background:rgba(201,168,76,.25);border-radius:10px;}
.dbrd-rep-h{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.dbrd-rep-ico{width:42px;height:42px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.2);border-radius:13px;}
.dbrd-rep-title{font-size:16px;font-weight:900;color:var(--t1,#F4F0E6);}
.dbrd-rep-sub{font-size:11px;color:var(--t3,#7A7260);font-weight:700;margin-top:2px;}
.dbrd-rep-stats{margin-inline-start:auto;display:flex;gap:7px;}
.dbrd-rep-stat{font-size:11px;font-weight:900;padding:5px 12px;border-radius:50px;}
.dbrd-rep-stat-open{background:rgba(245,158,11,.13);color:#fbbf24;border:1px solid rgba(245,158,11,.25);}
.dbrd-rep-stat-done{background:rgba(74,222,128,.12);color:#4ade80;border:1px solid rgba(74,222,128,.25);}
.dbrd-rep-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:11px;}
.dbrd-rep-card{position:relative;padding:14px;border-radius:16px;background:linear-gradient(155deg,rgba(255,255,255,.05),rgba(255,255,255,.01));border:1px solid var(--bdr,rgba(255,255,255,.09));transition:transform .16s,border-color .16s;overflow:hidden;}
.dbrd-rep-card::before{content:'';position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;}
.dbrd-rep-card.open::before{background:#fbbf24;}
.dbrd-rep-card.done::before{background:#4ade80;}
.dbrd-rep-card:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.3);}
.dbrd-rep-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:9px;}
.dbrd-rep-num{font-size:14px;font-weight:900;color:var(--g2,#E8C96A);direction:ltr;}
.dbrd-rep-status{font-size:8.5px;font-weight:900;padding:3px 9px;border-radius:50px;}
.dbrd-rep-status.open{background:rgba(245,158,11,.15);color:#fcd34d;}
.dbrd-rep-status.done{background:rgba(74,222,128,.15);color:#86efac;}
.dbrd-rep-veh{font-size:12.5px;font-weight:800;color:var(--t1,#F4F0E6);margin-bottom:4px;}
.dbrd-rep-plate{display:inline-block;font-size:10px;font-weight:800;font-family:monospace;direction:ltr;color:var(--t2,#C8BFA8);background:rgba(255,255,255,.06);padding:2px 9px;border-radius:6px;margin-bottom:9px;}
.dbrd-rep-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:9.5px;color:var(--t3,#7A7260);font-weight:700;}
.dbrd-rep-cust{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dbrd-rep-tech{font-size:9px;color:#7dd3fc;font-weight:700;margin-top:7px;padding-top:7px;border-top:1px dashed rgba(255,255,255,.08);}
.dbrd-rep-empty{text-align:center;padding:30px;color:var(--t3,#7A7260);font-size:12px;font-weight:700;}
/* 🆕 ضمان وضوح نصوص السايد بار (خارج أي media query) */
.sb-profile-name{color:#F4F0E6 !important;}
.sb-profile-sub{color:#C8BFA8 !important;}
.sb-profile-date{color:#9a8f76 !important;}
.sb-stat-num{color:#F4F0E6 !important;}
.sb-stat-lbl{color:#C8BFA8 !important;}
.sb-stat-card{background:rgba(255,255,255,.04);}
/* ═══ 🔧 تقارير الفحص كقائمة ذكية ═══ */
.dbrd-rep-list{display:flex;flex-direction:column;gap:8px;}
.dbrd-rep-row{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:14px;background:linear-gradient(150deg,rgba(255,255,255,.045),rgba(255,255,255,.01));border:1px solid var(--bdr,rgba(255,255,255,.08));transition:transform .16s,border-color .16s,background .16s;animation:dbrdRepIn .4s cubic-bezier(.16,1,.3,1) backwards;}
@keyframes dbrdRepIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.dbrd-rep-row:hover{transform:translateX(-4px);border-color:rgba(56,189,248,.3);background:rgba(255,255,255,.06);}
.dbrd-rep-row-status{display:flex;flex-direction:column;align-items:center;gap:5px;width:58px;flex-shrink:0;}
.dbrd-rep-dot{width:11px;height:11px;border-radius:50%;}
.dbrd-rep-row.open .dbrd-rep-dot{background:#fbbf24;box-shadow:0 0 0 0 rgba(251,191,36,.6);animation:dbrdRepPulse 1.8s ease-out infinite;}
.dbrd-rep-row.done .dbrd-rep-dot{background:#4ade80;}
@keyframes dbrdRepPulse{0%{box-shadow:0 0 0 0 rgba(251,191,36,.55);}70%{box-shadow:0 0 0 8px rgba(251,191,36,0);}100%{box-shadow:0 0 0 0 rgba(251,191,36,0);}}
.dbrd-rep-statetxt{font-size:8.5px;font-weight:800;}
.dbrd-rep-row.open .dbrd-rep-statetxt{color:#fcd34d;}
.dbrd-rep-row.done .dbrd-rep-statetxt{color:#86efac;}
.dbrd-rep-row-main{flex:1;min-width:0;}
.dbrd-rep-row-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.dbrd-rep-num{font-size:13px;font-weight:900;color:var(--g2,#E8C96A);direction:ltr;}
.dbrd-rep-veh{font-size:12.5px;font-weight:800;color:var(--t1,#F4F0E6);}
.dbrd-rep-plate{font-size:10px;font-weight:800;font-family:monospace;direction:ltr;color:var(--t2,#C8BFA8);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:6px;}
.dbrd-rep-row-sub{font-size:10px;color:var(--t3,#7A7260);font-weight:700;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dbrd-rep-row-date{font-size:9.5px;color:var(--t3,#7A7260);font-weight:700;direction:ltr;flex-shrink:0;text-align:end;}
/* ✨ لمسة ساحرة: التذكير يبدو وكأنه يتحدّث */
.dbrd-side-ico{animation:dbrdTalk 4s ease-in-out infinite;transform-origin:center bottom;}
@keyframes dbrdTalk{0%,100%{transform:scale(1) rotate(0);}25%{transform:scale(1.12) rotate(-8deg);}50%{transform:scale(1) rotate(0);}55%{transform:scale(1.08) rotate(6deg);}60%{transform:scale(1) rotate(0);}}
.dbrd-notif:nth-child(odd){animation-delay:.05s;}
.dbrd-notif-amt{position:relative;}
.dbrd-notif.is-unpaid .dbrd-notif-amt{animation:dbrdAmtGlow 2.4s ease-in-out infinite;}
@keyframes dbrdAmtGlow{0%,100%{text-shadow:none;}50%{text-shadow:0 0 12px rgba(248,113,113,.6);}}
/* نبض حيّ للوحة الجانبية بأكملها */
.dbrd-side{animation:dbrdSideBreathe 6s ease-in-out infinite;}
@keyframes dbrdSideBreathe{0%,100%{box-shadow:0 0 0 1px rgba(56,189,248,.05),0 20px 50px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.04);}50%{box-shadow:0 0 0 1px rgba(56,189,248,.12),0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06),0 0 30px rgba(56,189,248,.08);}}
.dbrd-card{animation:dbrdCardIn .5s cubic-bezier(.16,1,.3,1) backwards;}
.dbrd-card:nth-child(1){animation-delay:.02s;}.dbrd-card:nth-child(2){animation-delay:.06s;}.dbrd-card:nth-child(3){animation-delay:.1s;}.dbrd-card:nth-child(4){animation-delay:.14s;}.dbrd-card:nth-child(5){animation-delay:.18s;}.dbrd-card:nth-child(6){animation-delay:.22s;}.dbrd-card:nth-child(7){animation-delay:.26s;}.dbrd-card:nth-child(8){animation-delay:.3s;}
@keyframes dbrdCardIn{from{opacity:0;transform:translateY(14px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
/* ═══ ✋ سحب التذكير + اهتزاز دوري + تذكير التقرير ═══ */
.dbrd-swipe-wrap{position:relative;border-radius:15px;overflow:hidden;}
/* خلفيتا الإجراء — يمين أخضر (واتساب) · يسار أزرق (دفع) */
.dbrd-swipe-action{position:absolute;top:0;bottom:0;display:flex;align-items:center;gap:10px;padding:0 20px;font-size:13.5px;font-weight:900;opacity:0;pointer-events:none;width:100%;z-index:1;transition:opacity .1s ease;}
.dbrd-swipe-action-wa{inset:0;justify-content:flex-end;color:#fff;background:linear-gradient(90deg,rgba(37,211,102,.15),#1ea952 60%,#25D366);}
.dbrd-swipe-action-pay{inset:0;justify-content:flex-start;color:#fff;background:linear-gradient(90deg,#38bdf8,#0ea5e9 40%,rgba(56,189,248,.15));}
.dbrd-swipe-action .dbrd-swipe-txt{text-shadow:0 1px 4px rgba(0,0,0,.35);letter-spacing:.2px;}
.dbrd-swipe-ico{font-size:18px;transition:transform .15s;}
.dbrd-swipe-action.ready .dbrd-swipe-ico{transform:scale(1.3);}
/* البطاقة معتمة فوق الإجراءات */
.dbrd-swipe{position:relative;z-index:2;touch-action:pan-y;cursor:grab;user-select:none;will-change:transform;background:linear-gradient(150deg,#1a2230,#141a26)!important;}
.dbrd-swipe.is-partial{background:linear-gradient(150deg,#241f12,#1a160d)!important;}
.dbrd-swipe:active{cursor:grabbing;}
.dbrd-notif-hint{font-size:9.5px;font-weight:700;color:#5b7a93;text-align:center;padding:2px 0 6px;opacity:.8;}
/* اهتزاز دوري لعناصر التذكير لجذب الانتباه */
@keyframes dbrdShakePeriodic{0%,92%,100%{transform:translateX(0);}93%{transform:translateX(-3px);}94.5%{transform:translateX(3px);}96%{transform:translateX(-2px);}97.5%{transform:translateX(2px);}99%{transform:translateX(0);}}
/* الاهتزاز على الحاوية لا البطاقة (حتى لا يتعارض مع السحب) */
.dbrd-swipe-wrap{animation:dbrdShakePeriodic 5s ease-in-out infinite 1s;}
.dbrd-swipe-wrap:hover{animation-play-state:paused;}
.dbrd-notif.is-unpaid,.dbrd-notif.is-partial{animation:dbrdNotifIn .4s cubic-bezier(.16,1,.3,1) backwards;}
/* تذكير التقرير اليومي */
.dbrd-notif-report{background:linear-gradient(150deg,rgba(56,189,248,.14),rgba(56,189,248,.03))!important;border:1px solid rgba(56,189,248,.35)!important;cursor:pointer;}
.dbrd-notif-report .dbrd-notif-badge{font-size:21px;animation:dbrdReportPulse 2s ease-in-out infinite;}
@keyframes dbrdReportPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}
.dbrd-notif-report .dbrd-notif-top b{color:#38bdf8;}
.dbrd-notif-report .dbrd-notif-tag{background:rgba(56,189,248,.18);color:#7dd3fc;}
.dbrd-notif-arrow{color:#38bdf8;font-size:18px;font-weight:900;flex-shrink:0;animation:dbrdArrowSlide 1.4s ease-in-out infinite;}
@keyframes dbrdArrowSlide{0%,100%{transform:translateX(0);opacity:.6;}50%{transform:translateX(-5px);opacity:1;}}
/* تمييز وسيلة التذكرة في منتقي الدفع */
.qpay-row-current{border-color:var(--g2,#E8C96A)!important;background:linear-gradient(135deg,rgba(201,168,76,.14),rgba(201,168,76,.03))!important;box-shadow:0 4px 16px rgba(201,168,76,.2);}
.qpay-row-current::before{background:var(--g2,#E8C96A)!important;}
.qpay-row-cur-badge{font-size:8.5px;font-weight:900;color:#1a1a1a;background:linear-gradient(135deg,var(--g1,#C9A84C),var(--g2,#E8C96A));padding:2px 9px;border-radius:50px;margin-inline-start:6px;}
/* ✨ أيقونة عنوان اللوحة المستقبلية */
.dbrd-title{display:flex;align-items:center;gap:11px;}
.dbrd-title-ico{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,rgba(56,189,248,.18),rgba(168,139,250,.12));border:1px solid rgba(56,189,248,.3);color:#38bdf8;box-shadow:0 0 18px rgba(56,189,248,.25),inset 0 0 12px rgba(56,189,248,.08);position:relative;overflow:hidden;}
.dbrd-title-ico svg{width:21px;height:21px;animation:dbrdIcoSpin 8s linear infinite;}
@keyframes dbrdIcoSpin{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}
.dbrd-title-ico::after{content:"";position:absolute;inset:0;background:conic-gradient(from 0deg,transparent,rgba(56,189,248,.25),transparent 30%);animation:dbrdIcoSweep 3s linear infinite;}
@keyframes dbrdIcoSweep{0%{transform:rotate(0);}100%{transform:rotate(360deg);}}
/* ═══ 🌌 بطاقات القنوات — تصميم مستقبلي ساحر (صف واحد على الشاشات الكبيرة) ═══ */
.qd-pm-chan{
border-radius:16px!important;
border:1px solid rgba(255,255,255,.08)!important;
background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.015))!important;
box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.06)!important;
padding:16px!important;
transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s, border-color .22s!important;
overflow:hidden!important;
}
/* توهّج علوي ناعم */
.qd-pm-chan::before{
content:''!important;position:absolute!important;inset-inline-start:0;top:0;bottom:0;width:0!important;
}
.qd-pm-chan::after{
content:'';position:absolute;top:-50%;inset-inline-end:-30%;width:70%;height:120%;
background:radial-gradient(ellipse,color-mix(in srgb,var(--chc,#38bdf8) 22%,transparent),transparent 70%);
opacity:.5;pointer-events:none;transition:opacity .3s;filter:blur(6px);
}
.qd-pm-chan:hover{transform:translateY(-4px)!important;border-color:color-mix(in srgb,var(--chc,#38bdf8) 50%,transparent)!important;box-shadow:0 16px 38px rgba(0,0,0,.4),0 0 28px color-mix(in srgb,var(--chc,#38bdf8) 20%,transparent), inset 0 1px 0 rgba(255,255,255,.1)!important;}
.qd-pm-chan:hover::after{opacity:.85;}
.qd-pm-chan-ico{
border-radius:13px!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--chc,#38bdf8) 28%,transparent),color-mix(in srgb,var(--chc,#38bdf8) 8%,transparent))!important;
border:1px solid color-mix(in srgb,var(--chc,#38bdf8) 35%,transparent);
box-shadow:0 4px 14px color-mix(in srgb,var(--chc,#38bdf8) 25%,transparent), inset 0 1px 0 rgba(255,255,255,.15);
}
.qd-pm-chan-name{font-weight:800!important;letter-spacing:-.2px;}
.qd-pm-chan-val{
background:linear-gradient(135deg,#fff,var(--chc,#38bdf8));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
filter:drop-shadow(0 2px 8px color-mix(in srgb,var(--chc,#38bdf8) 30%,transparent));
}
.qd-pm-chan-val span{-webkit-text-fill-color:var(--chc,#38bdf8);opacity:.6;}
.qd-pm-chan-bar{height:6px!important;border-radius:50px!important;background:rgba(255,255,255,.07)!important;backdrop-filter:blur(2px);}
.qd-pm-chan-fill{
border-radius:50px!important;
background:linear-gradient(90deg,color-mix(in srgb,var(--chc,#38bdf8) 60%,transparent),var(--chc,#38bdf8))!important;
box-shadow:0 0 12px var(--chc,#38bdf8), 0 0 4px var(--chc,#38bdf8);
position:relative;overflow:hidden;
}
/* لمعة متحركة على الشريط */
.qd-pm-chan-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:qdPmShine 2.6s ease-in-out infinite;}
@keyframes qdPmShine{0%{transform:translateX(-100%);}60%,100%{transform:translateX(220%);}}
.qd-pm-chan-in{border-radius:7px!important;backdrop-filter:blur(4px);border:1px solid rgba(74,222,128,.2);}
.qd-pm-chan-out{border-radius:7px!important;backdrop-filter:blur(4px);border:1px solid rgba(248,113,113,.2);}
.qd-pm-chan-fee{border-radius:7px!important;}
.qd-pm-chan-star{
border-radius:0 0 10px 0!important;
background:linear-gradient(135deg,color-mix(in srgb,var(--chc,#38bdf8) 90%,#000),var(--chc,#38bdf8))!important;
color:#06121f!important;font-weight:900;box-shadow:0 3px 10px color-mix(in srgb,var(--chc,#38bdf8) 40%,transparent);
}
.qd-pm-chan-top{border-color:color-mix(in srgb,var(--chc,#38bdf8) 55%,transparent)!important;box-shadow:0 10px 30px rgba(0,0,0,.35),0 0 30px color-mix(in srgb,var(--chc,#38bdf8) 22%,transparent)!important;}
.qd-pm-chan-top::after{opacity:.9;}
/* صف واحد ديناميكي طالما الشاشة كبيرة */
/* الصف ديناميكي auto-fit: يكبر ويلتفّ حسب الشاشة بلا تكدّس */
/* زر عرض الكل داخل الدرج */
.dbrd-df-allday{width:54px!important;background:linear-gradient(155deg,rgba(201,168,76,.15),rgba(201,168,76,.03))!important;border-color:rgba(201,168,76,.3)!important;}
.dbrd-df-allday .dbrd-df-num{color:var(--g2,#E8C96A)!important;font-size:18px!important;}
.dbrd-df-allday-lbl{font-size:8px;font-weight:800;color:var(--g2,#E8C96A);}
.dbrd-df-allday.on{background:linear-gradient(155deg,var(--g1,#C9A84C),var(--g3,#A07830))!important;border-color:transparent!important;}
.dbrd-df-allday.on .dbrd-df-num,.dbrd-df-allday.on .dbrd-df-dow,.dbrd-df-allday.on .dbrd-df-allday-lbl{color:#1a1a1a!important;}
/* تذكرة جزئية في نافذة القناة */
.qctk-row-partial{border-color:rgba(245,158,11,.3);}
.qctk-row-partial .qctk-ico{background:rgba(245,158,11,.12);}
.qctk-amt-of{font-size:8.5px;font-weight:700;color:var(--t3,#7A7260);margin-top:2px;}
/* ═══ 🌌 ترقية السايد بار لمظهر مستقبلي ساحر ═══ */
.dash-sb{position:relative;}
.dash-sb::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 30% at 50% 0%,rgba(56,189,248,.06),transparent 70%);pointer-events:none;z-index:0;}
.dash-sb > *{position:relative;z-index:1;}
/* بطاقة المستخدم — زجاجية متوهّجة */
.sb-profile{background:linear-gradient(150deg,rgba(56,189,248,.08),rgba(201,168,76,.04))!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:18px!important;backdrop-filter:blur(8px);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 6px 20px rgba(0,0,0,.2);}
.sb-profile-avatar{box-shadow:0 4px 16px rgba(56,189,248,.3),0 0 0 2px rgba(56,189,248,.2)!important;}
/* أيقونات التنقّل — توهّج مستقبلي */
.sb-nav-item .ni{border-radius:11px;transition:all .22s cubic-bezier(.16,1,.3,1);}
.sb-nav-item .ni svg{transition:transform .22s,filter .22s;}
.sb-nav-item:hover .ni{background:rgba(56,189,248,.12);box-shadow:0 0 14px rgba(56,189,248,.18);}
.sb-nav-item:hover .ni svg{transform:scale(1.12);filter:drop-shadow(0 0 5px rgba(56,189,248,.5));}
.sb-nav-item.on .ni{background:linear-gradient(135deg,rgba(56,189,248,.25),rgba(56,189,248,.08));box-shadow:0 0 16px rgba(56,189,248,.3),inset 0 0 0 1px rgba(56,189,248,.3);}
.sb-nav-item.on .ni svg{filter:drop-shadow(0 0 6px rgba(56,189,248,.6));color:#7dd3fc;}
.sb-nav-item.on{position:relative;}
.sb-nav-item.on::after{content:'';position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);width:4px;height:60%;border-radius:50px;background:linear-gradient(180deg,#38bdf8,#0ea5e9);box-shadow:0 0 10px #38bdf8;}
/* بطاقات الإحصاء — زجاجية */
.sb-stat-card{transition:transform .18s,border-color .18s,box-shadow .18s;}
.sb-stat-card:hover{transform:translateY(-3px);border-color:rgba(56,189,248,.35)!important;box-shadow:0 8px 22px rgba(0,0,0,.25),0 0 16px rgba(56,189,248,.12);}
.sb-stat-ico{transition:transform .18s;}
.sb-stat-card:hover .sb-stat-ico{transform:scale(1.1);filter:drop-shadow(0 0 5px rgba(56,189,248,.4));}
/* أيقونات الوصول السريع */
.sb-quick-icons .sb-qi,.sb-quick-icons > *{transition:transform .18s,box-shadow .18s;}
.sb-quick-icons .sb-qi:hover,.sb-quick-icons > *:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(56,189,248,.2);}
/* 🆕 إصلاح تداخل الطي النهائي — القسم السفلي وبطاقة المستخدم */
@media(min-width:1024px){
.dash-sb.is-collapsed .sb-rf-body,
.dash-sb.is-collapsed .sb-reset-feature .sb-rf-sub,
.dash-sb.is-collapsed .sb-reset-feature .sb-rf-title,
.dash-sb.is-collapsed .sb-cloud-info,
.dash-sb.is-collapsed .sb-cloud-lbl,
.dash-sb.is-collapsed .sb-cloud-sub,
.dash-sb.is-collapsed .sb-profile-info,
.dash-sb.is-collapsed .sb-quick-icons,
.dash-sb.is-collapsed .sb-stat-cards,
.dash-sb.is-collapsed #sb-featured-slot,
.dash-sb.is-collapsed .sb-avatar-edit,
.dash-sb.is-collapsed .sb-action-row span{
display:none !important;
}
.dash-sb.is-collapsed .sb-reset-feature{
justify-content:center !important;padding:0 !important;width:44px;height:44px;margin:10px auto !important;
border-radius:13px !important;background:linear-gradient(145deg,rgba(248,113,113,.16),rgba(220,38,38,.06)) !important;
border:1px solid rgba(248,113,113,.3) !important;box-shadow:0 4px 14px rgba(248,113,113,.18),inset 0 1px 0 rgba(255,255,255,.08) !important;
transition:all .2s !important;
}
.dash-sb.is-collapsed .sb-reset-feature:hover{transform:translateY(-2px) !important;box-shadow:0 8px 20px rgba(248,113,113,.32),0 0 20px rgba(248,113,113,.2) !important;border-color:rgba(248,113,113,.55) !important;}
.dash-sb.is-collapsed .sb-reset-feature .sb-rf-ico{margin:0 !important;width:auto !important;height:auto !important;background:none !important;color:#fca5a5 !important;}
.dash-sb.is-collapsed .sb-reset-feature .sb-rf-ico svg{width:20px !important;height:20px !important;}
.dash-sb.is-collapsed .sb-profile{flex-direction:column !important;justify-content:center !important;padding:10px 0 !important;gap:0 !important;align-items:center !important;}
.dash-sb.is-collapsed .sb-profile-avatar{margin:0 auto !important;}
.dash-sb.is-collapsed .sb-action-row{flex-direction:column !important;align-items:center !important;gap:8px !important;}
.dash-sb.is-collapsed .sb-icon-btn{width:42px !important;justify-content:center !important;}
}
/* ═══ ✨ تحويل أيقونات السايد بار لمظهر مستقبلي (duotone + توهّج) ═══ */
.dash-sb .sb-nav-item .ni svg{
stroke-width:1.7 !important;
filter:drop-shadow(0 0 3px color-mix(in srgb,var(--nsb-accent) 30%,transparent));
transition:filter .22s,transform .22s,stroke-width .22s !important;
}
.dash-sb .sb-nav-item .ni svg [fill="none"]{}
/* تعبئة خفيفة داخل الأشكال لإحساس duotone حديث */
.dash-sb .sb-nav-item .ni svg rect,
.dash-sb .sb-nav-item .ni svg circle,
.dash-sb .sb-nav-item .ni svg polygon{
fill:color-mix(in srgb,var(--nsb-accent) 12%,transparent) !important;
}
/* الخطوط (line/polyline) لا تُملأ */
.dash-sb .sb-nav-item .ni svg line,
.dash-sb .sb-nav-item .ni svg polyline{fill:none !important;}
/* عند المرور: توهّج أقوى + تكبير طفيف */
.dash-sb .sb-nav-item:hover .ni svg{
filter:drop-shadow(0 0 6px color-mix(in srgb,var(--nsb-accent) 55%,transparent)) !important;
transform:scale(1.08);
}
.dash-sb .sb-nav-item:hover .ni svg rect,
.dash-sb .sb-nav-item:hover .ni svg circle,
.dash-sb .sb-nav-item:hover .ni svg polygon{
fill:color-mix(in srgb,var(--nsb-accent) 22%,transparent) !important;
}
/* النشط: الأيقونة داكنة فوق الحاوية الممتلئة المتوهّجة */
.dash-sb .sb-nav-item.on .ni svg{filter:none !important;}
.dash-sb .sb-nav-item.on .ni svg rect,
.dash-sb .sb-nav-item.on .ni svg circle,
.dash-sb .sb-nav-item.on .ni svg polygon{fill:rgba(6,18,31,.2) !important;}
/* ═══ 🌌 طيّ السايد بار — تمركز مثالي + مظهر مستقبلي ═══ */
@media(min-width:1024px){
/* تمركز بطاقة المستخدم وصورته */
.dash-sb.is-collapsed .sb-profile{
display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
padding:12px 0 !important;margin:8px 0 !important;gap:0 !important;width:100% !important;
}
.dash-sb.is-collapsed .sb-profile-avatar{
margin:0 auto !important;float:none !important;
}
/* تمركز زر تهيئة الحساب */
/* تمركز كل عناصر الأكشن */
.dash-sb.is-collapsed .sb-bottom-panel,
.dash-sb.is-collapsed .sb-acts{align-items:center !important;}
.dash-sb.is-collapsed::after{
content:'';position:absolute;top:0;bottom:0;inset-inline-start:0;width:2px;
background:linear-gradient(180deg,transparent,rgba(56,189,248,.5),transparent);
animation:sbEdgeFlow 3s ease-in-out infinite;pointer-events:none;
}
@keyframes sbEdgeFlow{0%,100%{opacity:.3;}50%{opacity:1;}}
}
/* ═══ 🌌 إخفاء شريط التمرير + طيّ مبتكر ساحر ═══ */
.dash-sb{scrollbar-width:none !important;-ms-overflow-style:none !important;}
.dash-sb::-webkit-scrollbar{width:0 !important;height:0 !important;display:none !important;}
@media(min-width:1024px){
/* السايد بار المطوي: قضيب أيقونات أنيق بعرض مريح */
.dash-sb.is-collapsed{
width:66px !important;min-width:66px !important;padding-inline:0 !important;
background:linear-gradient(180deg,#0c1119,#0a0d13) !important;
}
/* بطاقة المستخدم المطوية: دائرة متوهّجة نابضة ممركزة */
.dash-sb.is-collapsed .sb-profile{
background:none !important;border:none !important;box-shadow:none !important;backdrop-filter:none !important;
padding:14px 0 !important;margin:6px 0 10px !important;
}
.dash-sb.is-collapsed .sb-profile-avatar{
width:46px !important;height:46px !important;
border-radius:50% !important;overflow:hidden !important;
box-shadow:0 0 0 2px rgba(56,189,248,.45) !important;
}
.dash-sb.is-collapsed .sb-profile-avatar img{
width:100% !important;height:100% !important;object-fit:cover !important;border-radius:50% !important;
}
@keyframes sbAvatarPulse{0%,100%{box-shadow:0 0 0 2px rgba(56,189,248,.4),0 0 18px rgba(56,189,248,.3);}50%{box-shadow:0 0 0 2px rgba(56,189,248,.6),0 0 26px rgba(56,189,248,.5);}}
/* عناصر التنقّل: أيقونات أصغر راقية ممركزة */
.dash-sb.is-collapsed .sb-nav-item{
width:44px !important;height:44px !important;margin:6px auto !important;padding:0 !important;
display:flex !important;align-items:center !important;justify-content:center !important;border-radius:14px !important;
}
.dash-sb.is-collapsed .sb-nav-item .ni{width:44px !important;height:44px !important;border-radius:14px !important;}
.dash-sb.is-collapsed .sb-nav-item .ni svg{width:19px !important;height:19px !important;}
/* العنصر النشط: حاوية ممتلئة متوهّجة + مؤشّر جانبي */
.dash-sb.is-collapsed .sb-nav-item.on::before{
content:'' !important;position:absolute !important;inset-inline-start:-2px;top:50%;transform:translateY(-50%);
width:4px;height:26px;border-radius:0 4px 4px 0;background:#38bdf8;box-shadow:0 0 12px #38bdf8;display:block !important;
}
/* تلميح زجاجي مستقبلي عائم عند المرور */
.dash-sb.is-collapsed .sb-nav-item{position:relative;}
.dash-sb.is-collapsed .sb-nav-item:hover::after{
content:attr(data-label);position:absolute;inset-inline-start:calc(100% + 12px);top:50%;transform:translateY(-50%);
white-space:nowrap;padding:8px 14px;border-radius:12px;font-size:12.5px;font-weight:800;color:#e0f2fe;
background:linear-gradient(135deg,rgba(13,20,32,.96),rgba(10,14,22,.96));border:1px solid rgba(56,189,248,.35);
box-shadow:0 8px 24px rgba(0,0,0,.45),0 0 18px rgba(56,189,248,.2);backdrop-filter:blur(10px);
z-index:9999;pointer-events:none;animation:sbTipIn .22s cubic-bezier(.16,1,.3,1);
}
@keyframes sbTipIn{from{opacity:0;transform:translateY(-50%) translateX(8px);}to{opacity:1;transform:translateY(-50%) translateX(0);}}
/* تموّج ضوئي يمرّ عبر القضيب عند الطي */
.dash-sb.is-collapsed::before{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(circle 80px at 50% var(--sb-flow,0%),rgba(56,189,248,.10),transparent 70%);
animation:sbFlowDown 5s ease-in-out infinite;
}
@keyframes sbFlowDown{0%{--sb-flow:0%;}50%{--sb-flow:100%;}100%{--sb-flow:0%;}}
}
@property --sb-flow{syntax:'';inherits:false;initial-value:0%;}
/* ═══ 🌌 خلفية السايد بار المستقبلية الساحرة ═══ */
.dash-sb{
background:
radial-gradient(ellipse 50% 22% at 50% 0%, rgba(56,189,248,.10), transparent 70%),
radial-gradient(ellipse 60% 30% at 50% 100%, rgba(168,139,250,.07), transparent 70%),
linear-gradient(180deg,#0b0f17 0%,#0a0d14 50%,#080b11 100%) !important;
position:relative;
}
/* طبقة شبكة نقطية خفيفة (إحساس تقني مستقبلي) */
.dash-sb > .sb-bg-layer{display:none;}
.dash-sb::before{
content:'' !important;position:absolute !important;inset:0 !important;pointer-events:none !important;z-index:0 !important;
background-image:radial-gradient(circle, rgba(56,189,248,.08) 1px, transparent 1px) !important;
background-size:22px 22px !important;
-webkit-mask:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent) !important;
mask:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent) !important;
opacity:.5 !important;
}
/* وهج أُفقي متحرّك يتنفّس */
.dash-sb::after{
content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background:radial-gradient(circle 200px at 50% var(--sb-aura,30%), rgba(56,189,248,.08), transparent 70%);
animation:sbAura 9s ease-in-out infinite;
}
@keyframes sbAura{0%,100%{--sb-aura:25%;opacity:.6;}50%{--sb-aura:75%;opacity:1;}}
.dash-sb > *{position:relative;z-index:1;}
@property --sb-aura{syntax:'';inherits:false;initial-value:30%;}
/* ═══ منع اهتزاز الطي + فك طي احترافي ═══ */
@media(min-width:1024px){
.dash-sb{transition:width .42s cubic-bezier(.7,0,.2,1) !important;}
.dash-sb .sb-nav-item .ni{transition:width .35s cubic-bezier(.7,0,.2,1),height .35s cubic-bezier(.7,0,.2,1),background .25s,box-shadow .25s,border-color .25s !important;}
.dash-sb .sb-nav-item .nl{transition:none !important;}
.dash-sb.is-collapsed .sb-nav-item .nl{display:none !important;}
.dash-sb.is-collapsed .sb-nav-item{transition:none !important;}
.dash-sb.is-collapsed .sb-nav-item .ni{animation:none !important;}
}
/* ═══ 🎯 تمركز نهائي حاسم لعناصر الطي ═══ */
@media(min-width:1024px){
.dash-sb.is-collapsed{padding:0 !important;}
.dash-sb.is-collapsed .sb-acts{
padding:8px 0 !important;display:flex !important;flex-direction:column !important;
align-items:center !important;width:100% !important;
}
.dash-sb.is-collapsed .sb-nav-item{
width:44px !important;height:44px !important;margin:5px auto !important;padding:0 !important;
display:flex !important;align-items:center !important;justify-content:center !important;
align-self:center !important;border-bottom:none !important;
}
.dash-sb.is-collapsed .sb-nav-item .ni{margin:0 auto !important;}
.dash-sb.is-collapsed .sb-bottom-panel{padding:8px 0 !important;display:flex !important;flex-direction:column !important;align-items:center !important;}
.dash-sb.is-collapsed .sb-profile{align-self:center !important;}
}
/* ═══ ☀️ خلفية السايد بار في الوضع النهاري — فاتحة ساحرة ═══ */
html[data-theme='light'] .dash-sb{
background:
radial-gradient(ellipse 50% 22% at 50% 0%, rgba(56,189,248,.10), transparent 70%),
radial-gradient(ellipse 60% 30% at 50% 100%, rgba(168,139,250,.07), transparent 70%),
linear-gradient(180deg,#f4f7fb 0%,#eef2f8 50%,#F6F0E3 100%) !important;
}
html[data-theme='light'] .dash-sb::before{
background-image:radial-gradient(circle, rgba(56,189,248,.12) 1px, transparent 1px) !important;
opacity:.4 !important;
}
html[data-theme='light'] .dash-sb .sb-nav-item .ni{
background:linear-gradient(150deg,rgba(56,189,248,.08),rgba(255,255,255,.5)) !important;
border-color:rgba(56,189,248,.18) !important;
}
html[data-theme='light'] .dash-sb .sb-nav-item .ni svg{color:#A07830 !important;}
html[data-theme='light'] .dash-sb .sb-nav-item.on .ni svg{color:#fff !important;}
html[data-theme='light'] .dash-sb .sb-profile-name{color:#A07830 !important;}
html[data-theme='light'] .dash-sb .sb-profile-sub{color:#A07830 !important;}
/* 🎨✨ بطاقة مستخدم رقيقة شفافة تتكيف مع أي خلفية (الوضع النهاري) */
html[data-theme='light'] .dash-sb .sb-profile{
background:rgba(255,255,255,.35) !important;
border:1px solid rgba(255,255,255,.55) !important;
border-radius:22px !important;
backdrop-filter:blur(12px) saturate(140%) !important;
-webkit-backdrop-filter:blur(12px) saturate(140%) !important;
box-shadow:0 1px 2px rgba(0,0,0,.03),0 8px 28px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.7) !important;
}
/* عند الطي: إزالة خلفية البطاقة في النهاري تماماً */
html[data-theme='light'] .dash-sb.is-collapsed .sb-profile{
background:none !important;
background-color:transparent !important;
border:none !important;
box-shadow:none !important;
backdrop-filter:none !important;
-webkit-backdrop-filter:none !important;
}
html[data-theme='light'] .dash-sb .sb-profile-avatar{
box-shadow:0 4px 16px rgba(0,0,0,.12),0 0 0 3px rgba(255,255,255,.85) !important;
}
/* صورة المستخدم عند الطي — الوضع النهاري */
html[data-theme='light'] .dash-sb.is-collapsed .sb-profile-avatar{
border-radius:50% !important;overflow:hidden !important;
box-shadow:0 0 0 2px rgba(56,189,248,.45) !important;
}
html[data-theme='light'] .dash-sb.is-collapsed .sb-profile-avatar img{
width:100% !important;height:100% !important;object-fit:cover !important;border-radius:50% !important;
}
/* ═══ ✨ لمسة إضافية: توهّج حيّ لبطاقات الإحصاء والوصول السريع ═══ */
.dash-sb .sb-stat-card,.dash-sb .sb-quick-icons .sb-qi{position:relative;isolation:isolate;}
.dash-sb .sb-stat-ico,.dash-sb .sb-quick-icons .sb-qi-ico{position:relative;}
.dash-sb .sb-stat-ico::after{content:'';position:absolute;inset:-3px;border-radius:inherit;background:radial-gradient(circle,color-mix(in srgb,var(--sb-acc) 40%,transparent),transparent 70%);opacity:0;transition:opacity .3s;z-index:-1;}
.dash-sb .sb-stat-card:hover .sb-stat-ico::after{opacity:.7;}
.dash-sb .sb-quick-icons .sb-qi-ico::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--sb-acc) 40%,transparent),transparent 70%);opacity:0;transition:opacity .3s;z-index:-1;}
.dash-sb .sb-quick-icons .sb-qi:hover .sb-qi-ico::after{opacity:.7;}
/* نبض خفيف دائم على أيقونة الإحصاء */
.dash-sb .sb-stat-ico{animation:sbStatBreathe 4s ease-in-out infinite;}
@keyframes sbStatBreathe{0%,100%{box-shadow:0 4px 14px color-mix(in srgb,var(--sb-acc) 18%,transparent),inset 0 1px 0 rgba(255,255,255,.12);}50%{box-shadow:0 4px 18px color-mix(in srgb,var(--sb-acc) 32%,transparent),inset 0 1px 0 rgba(255,255,255,.15);}}
/* ═══ 🎨 بطاقات الإحصاء + الوصول السريع تتناغم مع لون العنصر المميّز ═══ */
.dash-sb{--sb-acc:var(--nsb-accent,#38bdf8);}
.dash-sb .sb-stat-card{
background:linear-gradient(155deg,color-mix(in srgb,var(--sb-acc) 9%,transparent),rgba(255,255,255,.01)) !important;
border:1px solid color-mix(in srgb,var(--sb-acc) 18%,transparent) !important;border-radius:18px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 16px rgba(0,0,0,.2) !important;
transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .22s !important;position:relative;overflow:hidden;
}
.dash-sb .sb-stat-card:hover{transform:translateY(-4px) !important;border-color:color-mix(in srgb,var(--sb-acc) 45%,transparent) !important;box-shadow:0 12px 30px rgba(0,0,0,.35),0 0 24px color-mix(in srgb,var(--sb-acc) 20%,transparent) !important;}
.dash-sb .sb-stat-ico{
background:linear-gradient(135deg,color-mix(in srgb,var(--sb-acc) 26%,transparent),color-mix(in srgb,var(--sb-acc) 7%,transparent)) !important;
border:1px solid color-mix(in srgb,var(--sb-acc) 30%,transparent) !important;border-radius:50% !important;
box-shadow:0 4px 14px color-mix(in srgb,var(--sb-acc) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.12) !important;transition:transform .2s !important;
}
.dash-sb .sb-stat-card:hover .sb-stat-ico{transform:scale(1.12) !important;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--sb-acc) 55%,transparent));}
.dash-sb .sb-stat-num{color:var(--t1,#F4F0E6) !important;}
/* أيقونات الوصول السريع — دائرية تتناغم مع لون التمييز */
.dash-sb .sb-quick-icons .sb-qi{
background:linear-gradient(155deg,color-mix(in srgb,var(--sb-acc) 9%,transparent),rgba(255,255,255,.01)) !important;
border:1px solid color-mix(in srgb,var(--sb-acc) 16%,transparent) !important;border-radius:16px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 4px 14px rgba(0,0,0,.18) !important;
transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .22s !important;
}
.dash-sb .sb-quick-icons .sb-qi:hover{transform:translateY(-3px) !important;border-color:color-mix(in srgb,var(--sb-acc) 45%,transparent) !important;box-shadow:0 10px 26px rgba(0,0,0,.32),0 0 22px color-mix(in srgb,var(--sb-acc) 22%,transparent) !important;}
.dash-sb .sb-quick-icons .sb-qi:hover .sb-qi-ico{transform:scale(1.1) !important;border-radius:50% !important;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--sb-acc) 55%,transparent));}
.dash-sb .sb-quick-icons .sb-qi-ico svg{width:20px !important;height:20px !important;}
/* 🆕 تلميح وظيفة السحب العائم — يظهر فوق البطاقة من أول بكسل */
/* 🆕 تلميح وظيفة السحب الحديث (زجاجي بأيقونة مستقبلية) */
.dbrd-swipe-hint{
position:absolute;top:50%;transform:translateY(-50%) scale(.85);
display:flex;align-items:center;gap:8px;
font-size:12.5px;font-weight:900;opacity:0;pointer-events:none;z-index:5;white-space:nowrap;
padding:7px 14px;border-radius:50px;backdrop-filter:blur(10px);
transition:opacity .14s ease, transform .14s cubic-bezier(.16,1,.3,1);
}
.dbrd-swipe-hint[style*="opacity: 1"]{transform:translateY(-50%) scale(1);}
.dbrd-hint-wa{color:#dcffe9;background:linear-gradient(135deg,rgba(37,211,102,.28),rgba(30,169,82,.12));border:1px solid rgba(37,211,102,.45);box-shadow:0 6px 20px rgba(37,211,102,.3),0 0 18px rgba(37,211,102,.25),inset 0 1px 0 rgba(255,255,255,.15);}
.dbrd-hint-pay{color:#e0f4ff;background:linear-gradient(135deg,rgba(56,189,248,.28),rgba(14,165,233,.12));border:1px solid rgba(56,189,248,.45);box-shadow:0 6px 20px rgba(56,189,248,.3),0 0 18px rgba(56,189,248,.25),inset 0 1px 0 rgba(255,255,255,.15);}
.dbrd-hint-ico{display:flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.2);flex-shrink:0;}
.dbrd-hint-ico svg{width:14px;height:14px;}
.dbrd-hint-wa .dbrd-hint-ico{animation:dbrdHintPulse 1.4s ease-in-out infinite;}
@keyframes dbrdHintPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 0 rgba(37,211,102,.5);}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 5px rgba(37,211,102,0);}}
/* ═══ 🎯 أيقونة الوصول السريع: أبعاد ثابتة + شكل يتبع إعداد المالك ═══ */
.dash-sb .sb-quick-icons .sb-qi{display:flex !important;flex-direction:column !important;align-items:center !important;aspect-ratio:auto !important;padding:4px !important;min-width:0 !important;flex:1 1 0 !important;background:none !important;border:none !important;box-shadow:none !important;}
.dash-sb .sb-quick-icons .sb-qi-ico{
width:44px !important;height:44px !important;min-width:44px !important;max-width:44px !important;min-height:44px !important;max-height:44px !important;
flex:none !important;aspect-ratio:1/1 !important;box-sizing:border-box !important;margin:0 auto !important;
display:flex !important;align-items:center !important;justify-content:center !important;
background:linear-gradient(135deg,color-mix(in srgb,var(--sb-acc,#38bdf8) 22%,transparent),color-mix(in srgb,var(--sb-acc,#38bdf8) 6%,transparent)) !important;
border:1px solid color-mix(in srgb,var(--sb-acc,#38bdf8) 28%,transparent) !important;
box-shadow:0 4px 12px color-mix(in srgb,var(--sb-acc,#38bdf8) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.12) !important;
transition:transform .2s,border-radius .2s !important;border-radius:14px !important;
}
.dash-sb .sb-quick-icons.qs-circle .sb-qi-ico{border-radius:50% !important;}
.dash-sb .sb-quick-icons.qs-square .sb-qi-ico{border-radius:14px !important;}
.dash-sb .sb-quick-icons.qs-rect .sb-qi-ico{border-radius:12px !important;}
/* hover: دائرة دائماً — specificity أعلى ليتغلب على qs-square/rect */
.dash-sb .sb-quick-icons.qs-square .sb-qi:hover .sb-qi-ico,
.dash-sb .sb-quick-icons.qs-rect .sb-qi:hover .sb-qi-ico,
.dash-sb .sb-quick-icons.qs-circle .sb-qi:hover .sb-qi-ico,
.dash-sb .sb-quick-icons .sb-qi:hover .sb-qi-ico{border-radius:50% !important;}
.dash-sb .sb-quick-icons .sb-qi-ico svg{width:20px !important;height:20px !important;}
/* أيقونة خلفية الإجراء (سحب) — دائرة زجاجية */
.dbrd-swipe-action .dbrd-swipe-ico{display:flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 8px rgba(0,0,0,.2);}
.dbrd-swipe-action .dbrd-swipe-ico svg{width:17px;height:17px;}
/* ✨ ظهور ذكي لمحتوى إجراء السحب (ينزلق ويكبر تدريجياً مع السحب) */
.dbrd-swipe-action .dbrd-swipe-ico,.dbrd-swipe-action .dbrd-swipe-txt{transition:transform .18s cubic-bezier(.16,1,.3,1),opacity .18s;}
.dbrd-swipe-action .dbrd-swipe-ico{transform:scale(.6);opacity:.5;}
.dbrd-swipe-action .dbrd-swipe-txt{transform:translateX(0);}
.dbrd-swipe-action.ready .dbrd-swipe-ico{transform:scale(1.15);opacity:1;}
.dbrd-swipe-action.ready{filter:brightness(1.08);}
/* البطاقة صلبة فوق الإجراءات (لا شفافية تسبب تداخلاً) */
.dbrd-notif.dbrd-swipe{background:linear-gradient(150deg,#1a2230,#141a26)!important;}
.dbrd-notif.dbrd-swipe.is-partial{background:linear-gradient(150deg,#241f12,#1a1608)!important;}
/* ✨ التلميح العائم الذكي داخل خلفية الإجراء */
.dbrd-swipe-action{position:absolute;top:0;bottom:0;display:flex;align-items:center;width:100%;z-index:1;opacity:0;pointer-events:none;transition:opacity .1s ease;}
.dbrd-swipe-action-wa{inset:0;justify-content:flex-end;color:#fff;background:linear-gradient(90deg,rgba(37,211,102,.12),#1ea952 55%,#25D366);}
/* موضع التلميح العائم عند الحافة المكشوفة */
.dbrd-swipe-action.ready .dbrd-swipe-float{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.55);box-shadow:0 6px 22px rgba(0,0,0,.45);}
.dbrd-swipe-action-wa .dbrd-swipe-float{right:14px !important;left:auto !important;}
.dbrd-swipe-action-pay .dbrd-swipe-float{left:14px !important;right:auto !important;}
/* ✨ التلميح العائم — قاعدة أساسية نهائية (موضع عند الحافة + خط واضح) */
.dbrd-swipe-float{
position:absolute !important; top:50% !important;
transform:translateY(-50%) scale(.82);
display:flex !important; align-items:center; gap:9px; padding:8px 16px; border-radius:50px;
font-family:'Tajawal','Cairo',system-ui,-apple-system,sans-serif;
font-size:14px; font-weight:800; letter-spacing:.2px; white-space:nowrap; opacity:0; color:#fff;
-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
background:rgba(0,0,0,.32); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,.3); box-shadow:0 4px 16px rgba(0,0,0,.35);
transition:opacity .12s ease, transform .12s cubic-bezier(.16,1,.3,1); will-change:transform,opacity; z-index:3;
}
.dbrd-swipe-float .dbrd-swipe-ico{display:flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.22);flex-shrink:0;}
.dbrd-swipe-float .dbrd-swipe-ico svg{width:14px;height:14px;}
.dbrd-swipe-action-wa .dbrd-swipe-float{right:14px !important;left:auto !important;}
.dbrd-swipe-action-pay .dbrd-swipe-float{left:14px !important;right:auto !important;}
.dbrd-swipe-float .dbrd-swipe-txt{font-weight:800;line-height:1;text-decoration:none !important;text-shadow:0 1px 3px rgba(0,0,0,.45);}
.dbrd-swipe-action.ready .dbrd-swipe-txt{text-decoration:none !important;}
.dbrd-swipe-action .dbrd-swipe-txt{text-decoration:none !important;}
/* 🆕 وسائل دفع المصروف في القائمة (مع التقسيم) */
.exh-row-pays{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px;align-items:center;}
.exh-row-pay{display:inline-flex;align-items:center;gap:3px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.25);color:#7dd3fc;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:7px;font-family:'Tajawal','Cairo',sans-serif;}
.exh-row-pay b{font-weight:900;color:#bae6fd;}
.exh-row-split-badge{display:inline-flex;align-items:center;background:rgba(251,191,36,.14);border:1px solid rgba(251,191,36,.3);color:#fbbf24;font-size:10px;font-weight:800;padding:2px 8px;border-radius:7px;font-family:'Tajawal','Cairo',sans-serif;}
/* ═══════════════════════════════════════════════════════════════
🌞 وضع النهار الساحر — طبقة تصميم نهائية واحدة متناسقة
لوحة نهارية موحّدة مع اللانشر: كريمي #F2ECE0/#F6F0E3 · ذهبي #E3A92C/#F1C04C · ذهبي غامق #A07830 · حبر #23201B/#5F584C · حدود #D8CDB6
═══════════════════════════════════════════════════════════════ */
html[data-theme='light']{ --gr:#014224;--rd:#CC313D;--bl:#A07830;--or:#C77A1A;--pu:#E3A92C; }
/* ── الخلفيات الجذرية ── */
html[data-theme='light'],
html[data-theme='light'] body{background:#FFFFFF !important;color:#23201B;}
html[data-theme='light'] .app,
html[data-theme='light'] .dash-content,
html[data-theme='light'] .main,
html[data-theme='light'] .screen,
html[data-theme='light'] [class*="dash-pane"]{background:transparent !important;color:#23201B;}
/* ── البطاقات والأسطح: بيضاء بحدود رمادية ناعمة وظل خفيف ── */
html[data-theme='light'] .card,
html[data-theme='light'] .hcard,
html[data-theme='light'] .gen-card,
html[data-theme='light'] .sec,
html[data-theme='light'] .dg,
html[data-theme='light'] .box,
html[data-theme='light'] .panel,
html[data-theme='light'] .modal,
html[data-theme='light'] .modal-card,
html[data-theme='light'] .sheet,
html[data-theme='light'] .popup,
html[data-theme='light'] .dropdown,
html[data-theme='light'] .menu,
/* REMOVED -card wildcard */
/* REMOVED -stat wildcard */
/* ── رؤوس الأقسام والأبطال: تدرّج نيلي→بنفسجي مبهج ── */
html[data-theme='light'] .sec-h,
html[data-theme='light'] .card-h,
html[data-theme='light'] .modal-h,
html[data-theme='light'] .sec-h *,
html[data-theme='light'] .card-h *{color:#FFFFFF !important;}
/* ── النصوص ── */
html[data-theme='light'] .sec-title,
html[data-theme='light'] .card-title,
html[data-theme='light'] .title,
html[data-theme='light'] h1,html[data-theme='light'] h2,
html[data-theme='light'] h3,html[data-theme='light'] h4{color:#23201B;}
html[data-theme='light'] .hdr-name{color:#A07830 !important;}
/* ── الحقول: بيضاء بحد رمادي، تركيز نيلي ── */
html[data-theme='light'] input,
html[data-theme='light'] select,
html[data-theme='light'] textarea{
background:#FFFFFF !important;
border:1px solid #D8CDB6 !important;
color:#23201B !important;
}
html[data-theme='light'] input::placeholder,
html[data-theme='light'] textarea::placeholder{color:#B8B0A1 !important;}
html[data-theme='light'] input:focus,
html[data-theme='light'] select:focus,
html[data-theme='light'] textarea:focus{
border-color:#A07830 !important;
box-shadow:0 0 0 3px rgba(160,120,48,.10) !important;
}
/* ── الشريط الجانبي والرأس وأشرطة التنقل ── */
html[data-theme='light'] .sidebar,
html[data-theme='light'] .hdr,
html[data-theme='light'] .mob-tabs,
html[data-theme='light'] .day-bar,
html[data-theme='light'] .bottom-nav,
html[data-theme='light'] .mob-nav{
background:#FFFFFF !important;
border-color:#E6E1D2 !important;
box-shadow:0 2px 16px rgba(160,120,48,.06) !important;
}
html[data-theme='light'] .sb-nav-item{color:#5F584C !important;}
html[data-theme='light'] .sb-nav-item:hover{background:#EFE7D6 !important;color:#E3A92C !important;}
html[data-theme='light'] .sb-nav-item.on,
html[data-theme='light'] .mob-tab.on{
background:linear-gradient(135deg,rgba(160,120,48,.10),rgba(201,168,76,.12)) !important;
color:#E3A92C !important;
border-color:rgba(201,168,76,.30) !important;
}
html[data-theme='light'] .mob-tab{color:#5F584C !important;}
/* ── الأزرار الأساسية: تدرّج نيلي→بنفسجي ── */
html[data-theme='light'] .btn-gold,
html[data-theme='light'] .cpv-save-btn,
html[data-theme='light'] [class*="btn-primary"],
html[data-theme='light'] [class*="-save-btn"]{
background:linear-gradient(135deg,#A07830,#E3A92C) !important;
color:#FFFFFF !important;
border:none !important;
box-shadow:0 4px 14px rgba(201,168,76,.25) !important;
}
html[data-theme='light'] .btn-ghost{
background:#FFFFFF !important;border:1px solid #D8CDB6 !important;color:#A07830 !important;
}
/* ── الجداول: رأس كريمي، صفوف متناوبة وردية ── */
html[data-theme='light'] table th{background:#F6F0E3 !important;color:#23201B !important;border-color:#E0D9C4 !important;}
html[data-theme='light'] table td{border-color:#ECE7DA !important;color:#5F584C !important;}
html[data-theme='light'] table tr:nth-child(even){background:#FDF4F5 !important;}
html[data-theme='light'] table tr:hover{background:#EFE7D6 !important;}
/* ── الشارات والوسوم: كريمي/وردي ── */
html[data-theme='light'] .chip,
html[data-theme='light'] .badge,
html[data-theme='light'] .tag,
html[data-theme='light'] [class*="-badge"],
html[data-theme='light'] [class*="-chip"]{background:#F6F0E3 !important;color:#E3A92C !important;border-color:rgba(201,168,76,.20) !important;}
/* ── الفواصل ── */
html[data-theme='light'] hr,
html[data-theme='light'] .divider,
html[data-theme='light'] .sf-divider,
html[data-theme='light'] [class*="-divider"]{background:#E0D9C4 !important;border-color:#E0D9C4 !important;}
/* ── المخططات: محاور بنص داكن ── */
html[data-theme='light'] .recharts-text,
html[data-theme='light'] .recharts-cartesian-axis-tick text,
html[data-theme='light'] .chart-label{fill:#5F584C !important;color:#5F584C !important;}
html[data-theme='light'] .recharts-cartesian-grid line{stroke:#ECE7DA !important;}
/* ── شاشتا الدخول/التحميل ── */
html[data-theme='light'] #s-login,
html[data-theme='light'] #s-splash{background:#FFFFFF !important;background-image:radial-gradient(ellipse 70% 50% at 50% -5%,rgba(201,168,76,.08),transparent 60%) !important;}
html[data-theme='light'] .login-card{background:#FFFFFF !important;border:1px solid #E6E1D2 !important;box-shadow:0 12px 50px rgba(160,120,48,.12) !important;}
/* ── روابط/نصوص ذهبية سابقاً → نيلي/بنفسجي ── */
html[data-theme='light'] a,
html[data-theme='light'] .link{color:#A07830;}
html[data-theme='light'] [style*="color:var(--g1)"],
html[data-theme='light'] [style*="color:var(--g2)"],
html[data-theme='light'] [style*="color:var(--g3)"]{color:#E3A92C !important;}
/* ═══════════════════════════════════════════════════════════════
🌞 ضبط النهار — اللانشر + عناوين التبويبات + فواصل السايد + بطاقات الإحصاء
═══════════════════════════════════════════════════════════════ */
/* ── ① اللانشر (شاشة البداية) ── */
html[data-theme='light'] #s-launcher,
html[data-theme='light'] .lnch-wrap,
html[data-theme='light'] .lnch3-wrap{background:linear-gradient(160deg,#FFFFFF 0%,#FDF4F5 55%,#F5EFDC 100%) !important;color:#23201B;}
html[data-theme='light'] .lnch-bg-grid{opacity:.25 !important;}
html[data-theme='light'] .lnch-bg-glow-1{background:radial-gradient(circle,rgba(160,120,48,.10),transparent 70%) !important;}
html[data-theme='light'] .lnch-bg-glow-2{background:radial-gradient(circle,rgba(201,168,76,.10),transparent 70%) !important;}
html[data-theme='light'] .lnch-bg-glow-3{background:radial-gradient(circle,rgba(250,233,235,.6),transparent 70%) !important;}
html[data-theme='light'] .lnch-bp{background:rgba(201,168,76,.25) !important;}
/* أزرار التحكم العلوية */
html[data-theme='light'] .lnch3-menu-action-btn,
html[data-theme='light'] .lnch3-menu-toggle{background:#FFFFFF !important;border:1px solid #E0D9C4 !important;color:#A07830 !important;box-shadow:0 2px 10px rgba(160,120,48,.08) !important;}
html[data-theme='light'] .lnch3-menu-action-btn:hover{background:#EFE7D6 !important;color:#E3A92C !important;}
html[data-theme='light'] .lnch3-menu-toggle-icon span{background:#A07830 !important;}
/* بطاقة الهوية */
html[data-theme='light'] .lnch3-id-chip{background:#FFFFFF !important;border:1px solid #E0D9C4 !important;box-shadow:0 4px 16px rgba(160,120,48,.08) !important;}
html[data-theme='light'] .lnch3-id-chip-avatar{background:linear-gradient(135deg,#E3A92C,#F1C04C) !important;color:#3a2c00 !important;}
html[data-theme='light'] .lnch3-id-chip-name{color:#23201B !important;}
html[data-theme='light'] .lnch3-id-chip-greet-txt{color:#5F584C !important;}
html[data-theme='light'] .lnch3-id-chip-role{background:rgba(201,168,76,.08) !important;color:#E3A92C !important;}
html[data-theme='light'] .lnch3-id-chip-divider{background:#E0D9C4 !important;}
/* بطاقات اللانشر الرئيسية */
html[data-theme='light'] .lnch-card{background:#FFFFFF !important;border:1px solid #E0D9C4 !important;box-shadow:0 6px 22px rgba(160,120,48,.08) !important;}
html[data-theme='light'] .lnch-card:hover{border-color:rgba(201,168,76,.30) !important;box-shadow:0 12px 32px rgba(201,168,76,.15) !important;}
html[data-theme='light'] .lnch-card-title,html[data-theme='light'] .lnch-card-label{color:#23201B !important;}
html[data-theme='light'] .lnch-card-sub{color:#5F584C !important;}
html[data-theme='light'] .rec-card .lnch-card-ico{background:linear-gradient(135deg,#A07830,#A07830) !important;color:#fff !important;}
html[data-theme='light'] .dash-card .lnch-card-ico{background:linear-gradient(135deg,#E3A92C,#7B43BE) !important;color:#fff !important;}
html[data-theme='light'] .lnch3-greeting,html[data-theme='light'] .lnch-greeting,
html[data-theme='light'] .lnch3-clock,html[data-theme='light'] .lnch-title{color:#23201B !important;}
/* ── ② عناوين التبويبات (رؤوس الصفحات) ── */
html[data-theme='light'] .dbrd-title,
html[data-theme='light'] .pane-title,
html[data-theme='light'] .dash-pane-title,
html[data-theme='light'] [class*="-pane-title"]{color:#A07830 !important;}
html[data-theme='light'] .dbrd-title-ico,
html[data-theme='light'] .pane-title-ico{color:#E3A92C !important;}
/* عنوان داخل رأس متدرّج يبقى أبيض */
html[data-theme='light'] .sec-h .sec-title,
html[data-theme='light'] .card-h .card-title{color:#FFFFFF !important;}
/* ── ③ فواصل وخطوط السايد بار (كانت مختفية) ── */
html[data-theme='light'] .sidebar,
html[data-theme='light'] .dash-sb{background:linear-gradient(180deg,#FFFFFF,#FDFBF7) !important;border-left:none !important;}
html[data-theme='light'] .sb-day,
html[data-theme='light'] .sb-acts{border-bottom:1px solid #E0D9C4 !important;}
html[data-theme='light'] .sb-section-body{border-right:2px solid #D8CDB6 !important;}
html[data-theme='light'] .sb-section-h{color:#E3A92C !important;opacity:.85 !important;}
html[data-theme='light'] .sb-section-h:hover{background:#EFE7D6 !important;opacity:1 !important;}
html[data-theme='light'] .sb-nav-item{color:#5F584C !important;}
html[data-theme='light'] .sb-nav-item .ni{background:rgba(160,120,48,.06) !important;border:1px solid #E0D9C4 !important;color:#A07830 !important;}
html[data-theme='light'] .sb-nav-item:hover{background:#EFE7D6 !important;color:#E3A92C !important;}
html[data-theme='light'] .sb-nav-item.on{background:linear-gradient(135deg,rgba(160,120,48,.10),rgba(201,168,76,.10)) !important;color:#E3A92C !important;border-color:rgba(201,168,76,.28) !important;}
html[data-theme='light'] .sb-nav-item.on .ni{background:linear-gradient(135deg,#E3A92C,#F1C04C) !important;color:#3a2c00 !important;}
/* ── ④ بطاقات الإحصاء في لوحة المعلومات ── */
html[data-theme='light'] .dbrd-card{
background:#FFFFFF !important;
border:1px solid #E0D9C4 !important;
box-shadow:0 5px 20px rgba(160,120,48,.08) !important;
}
html[data-theme='light'] .dbrd-card::before{background:var(--cc,#A07830) !important;}
html[data-theme='light'] .dbrd-card-ico{background:rgba(160,120,48,.08) !important;}
html[data-theme='light'] .dbrd-card-label{color:#5F584C !important;}
html[data-theme='light'] .dbrd-card-val{color:#23201B !important;}
html[data-theme='light'] .dbrd-card-sub{color:#9A96A2 !important;}
html[data-theme='light'] .dbrd-card-warn{background:linear-gradient(135deg,#FFFFFF,#FFF8E8) !important;border-color:rgba(201,122,26,.30) !important;}
/* بطاقات KPI الأخرى */
html[data-theme='light'] .kpi-card{background:linear-gradient(135deg,#FFFFFF,#FDF4F5) !important;border:1px solid #E0D9C4 !important;}
html[data-theme='light'] .kpi-card .kpi-val,html[data-theme='light'] .kpi-val{color:#23201B !important;}
html[data-theme='light'] .kpi-card .kpi-label,html[data-theme='light'] .kpi-label{color:#5F584C !important;}
/* ═══════════════════════════════════════════════════════════════════
🌞 OMAR LIGHT MODE MASTER FIX — شامل ونهائي
═══════════════════════════════════════════════════════════════════ */
/* ▌0. GLOBAL BG + 2px PADDING */
html[data-theme='light'],html[data-theme='light'] body,
html[data-theme='light'] #s-launcher,html[data-theme='light'] #s-rec,
html[data-theme='light'] #s-dash,html[data-theme='light'] .lnch-wrap,
html[data-theme='light'] .lnch-wrap.lnch-v3,html[data-theme='light'] .lnch3-wrap,
html[data-theme='light'] .rec-v3-wrap,html[data-theme='light'] [class*="dash-pane"]{
background:linear-gradient(145deg,#F2F5FF 0%,#EFF2FF 55%,#F0EEFF 100%) !important;}
html[data-theme='light'] #s-launcher,
html[data-theme='light'] .lnch-wrap.lnch-v3,
html[data-theme='light'] .rec-v3-wrap{padding:2px 2px 12px !important;box-shadow:none !important;}
html[data-theme='light'] .pane,
html[data-theme='light'] .dash-pane{padding:16px 24px !important;}
@media(max-width:768px){
html[data-theme='light'] .pane,
html[data-theme='light'] .dash-pane{padding:14px 8px !important;gap:8px !important;}
html[data-theme='light'] .rec-body{padding:0 !important;gap:4px !important;}
}
html[data-theme='light'] .lnch-bg-grid,html[data-theme='light'] .rec-v3-bg-grid{background-image:linear-gradient(rgba(160,120,48,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(160,120,48,.055) 1px,transparent 1px) !important;opacity:.45 !important;}
html[data-theme='light'] .lnch-bg-glow-1,html[data-theme='light'] .rec-v3-bg-glow-1{background:radial-gradient(circle,rgba(160,120,48,.10),transparent 70%) !important;}
html[data-theme='light'] .lnch-bg-glow-2,html[data-theme='light'] .rec-v3-bg-glow-2{background:radial-gradient(circle,rgba(201,168,76,.08),transparent 70%) !important;}
html[data-theme='light'] .lnch-bg-glow-3,html[data-theme='light'] .rec-v3-bg-glow-3{background:radial-gradient(circle,rgba(201,168,76,.07),transparent 70%) !important;}
/* ▌1. RESET داخلي */
html[data-theme='light'] .lnch3-stat-h,html[data-theme='light'] .lnch3-stat-v,html[data-theme='light'] .lnch3-stat-l,html[data-theme='light'] .lnch3-stat-v-currency,html[data-theme='light'] .lnch3-stat-shine,html[data-theme='light'] .lnch3-action-header,html[data-theme='light'] .lnch3-action-shine,html[data-theme='light'] .lnch3-action-glow,html[data-theme='light'] .lnch3-hero-content,html[data-theme='light'] .lnch3-hero-text,html[data-theme='light'] .lnch3-hero-meta,html[data-theme='light'] .lnch3-hero-pills,html[data-theme='light'] .lnch3-hero-logo-rings,html[data-theme='light'] .lnch3-id-chip-text,html[data-theme='light'] .lnch3-id-chip-greet,html[data-theme='light'] .rec-id-panel-content,html[data-theme='light'] .rec-id-panel-shine,html[data-theme='light'] .rec-id-panel-orb,html[data-theme='light'] .rec-id-pills,html[data-theme='light'] .rec-id-greet,html[data-theme='light'] .rec-section-h,html[data-theme='light'] .rec-section-h-bar,html[data-theme='light'] .rec-section-h-title,html[data-theme='light'] .rec-pro-card-title,html[data-theme='light'] .rec-pro-card-sub,html[data-theme='light'] .dbrd-card-body,html[data-theme='light'] .dbrd-card-label,html[data-theme='light'] .dbrd-card-val,html[data-theme='light'] .dbrd-card-sub,html[data-theme='light'] .dbrd-notif-body,html[data-theme='light'] .dbrd-notif-top,html[data-theme='light'] .dbrd-notif-meta,html[data-theme='light'] .lnch-footer-brand,html[data-theme='light'] .lnch-footer-text,html[data-theme='light'] .lnch-footer-actions,html[data-theme='light'] .lnch-contact-text{background:none !important;border:none !important;box-shadow:none !important;}
html[data-theme='light'] .lnch3-action-header *{color:inherit !important;}
/* ▌2. TOPBAR */
html[data-theme='light'] .lnch3-menu-toggle{background:#FFFFFF !important;border:1.5px solid rgba(160,120,48,.2) !important;box-shadow:0 4px 14px rgba(160,120,48,.11),inset 0 1px 0 #fff !important;}
html[data-theme='light'] .lnch3-menu-toggle:hover{background:#F6F0E3 !important;border-color:rgba(160,120,48,.35) !important;}
html[data-theme='light'] .lnch3-menu-toggle-icon span{background:linear-gradient(90deg,#A07830,#E3A92C) !important;}
html[data-theme='light'] .lnch3-menu-action-btn{background:#FFFFFF !important;border:1px solid rgba(160,120,48,.16) !important;color:#A07830 !important;}
html[data-theme='light'] .lnch3-menu-action-btn:hover{background:#F6F0E3 !important;color:#E3A92C !important;}
html[data-theme='light'] .lnch3-menu-action-btn-logout:hover{color:#ef4444 !important;background:#FFF5F5 !important;}
/* ▌3. ID CHIP */
html[data-theme='light'] .lnch3-id-chip{background:#FFFFFF !important;border:1px solid rgba(160,120,48,.17) !important;box-shadow:0 6px 22px rgba(160,120,48,.11),inset 0 1px 0 #fff !important;}
html[data-theme='light'] .lnch3-id-chip-avatar{background:linear-gradient(135deg,#E3A92C,#F1C04C) !important;color:#3a2c00 !important;}
html[data-theme='light'] .lnch3-id-chip-name{background:none !important;-webkit-background-clip:unset !important;background-clip:unset !important;-webkit-text-fill-color:#23201B !important;color:#23201B !important;animation:none !important;}
html[data-theme='light'] .lnch3-id-chip-greet-txt{color:#5F584C !important;}
html[data-theme='light'] .lnch3-id-chip-role{background:rgba(160,120,48,.08) !important;color:#E3A92C !important;border-color:rgba(201,168,76,.18) !important;}
html[data-theme='light'] .lnch3-id-chip-divider{background:rgba(160,120,48,.11) !important;}
/* ▌4. HERO */
html[data-theme='light'] .lnch3-hero{background:linear-gradient(135deg,#A07830 0%,#A07830 42%,#E3A92C 100%) !important;border:none !important;box-shadow:0 14px 42px rgba(160,120,48,.28),inset 0 2px 0 rgba(255,255,255,.14) !important;}
html[data-theme='light'] .lnch3-hero-name{background:linear-gradient(135deg,#fff,#F6F0E3 50%,#fff) !important;background-size:200% auto !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;}
html[data-theme='light'] .lnch3-hero-meta{color:rgba(255,255,255,.76) !important;}
html[data-theme='light'] .lnch3-hero-meta-ico{color:#fde68a !important;}
html[data-theme='light'] .lnch3-hr-ring-1{border-color:rgba(255,255,255,.26) !important;}
html[data-theme='light'] .lnch3-hr-ring-2{border-color:rgba(255,255,255,.16) !important;}
html[data-theme='light'] .lnch3-hero-logo.lh-logo{background:linear-gradient(135deg,rgba(255,255,255,.17),rgba(255,255,255,.05)) !important;border-color:rgba(255,255,255,.36) !important;}
html[data-theme='light'] .lnch3-hero-pill-day{background:rgba(74,222,128,.2) !important;border-color:rgba(74,222,128,.38) !important;color:#d1fae5 !important;}
html[data-theme='light'] .lnch3-hero-pill-clock{background:rgba(255,255,255,.14) !important;border-color:rgba(255,255,255,.28) !important;color:rgba(255,255,255,.9) !important;}
/* ▌5. STAT CARDS */
html[data-theme='light'] .lnch3-stat{background:#FFFFFF !important;border:1px solid rgba(160,120,48,.12) !important;box-shadow:0 3px 14px rgba(160,120,48,.07),inset 0 1px 0 #fff !important;backdrop-filter:none !important;}
html[data-theme='light'] .lnch3-stat:hover{border-color:rgba(201,168,76,.22) !important;}
html[data-theme='light'] .lnch3-stat-l{color:#5F584C !important;}
html[data-theme='light'] .lnch3-stat-blue .lnch3-stat-ico{background:linear-gradient(135deg,#A07830,#A07830) !important;color:#fff !important;border:none !important;}
html[data-theme='light'] .lnch3-stat-green .lnch3-stat-ico{background:linear-gradient(135deg,#22c55e,#15803d) !important;color:#fff !important;border:none !important;}
html[data-theme='light'] .lnch3-stat-red .lnch3-stat-ico{background:linear-gradient(135deg,#ef4444,#b91c1c) !important;color:#fff !important;border:none !important;}
html[data-theme='light'] .lnch3-stat-purple .lnch3-stat-ico{background:linear-gradient(135deg,#a855f7,#7c3aed) !important;color:#fff !important;border:none !important;}
html[data-theme='light'] .lnch3-stat-ico svg{width:16px !important;height:16px !important;}
html[data-theme='light'] .lnch3-stat-blue .lnch3-stat-v{color:#A07830 !important;}
html[data-theme='light'] .lnch3-stat-green .lnch3-stat-v{color:#15803D !important;}
html[data-theme='light'] .lnch3-stat-red .lnch3-stat-v{color:#B91C1C !important;}
html[data-theme='light'] .lnch3-stat-purple .lnch3-stat-v{color:#6D28D9 !important;}
html[data-theme='light'] .lnch3-stat-blue .lnch3-stat-pulse{background:#A07830 !important;box-shadow:0 0 8px rgba(201,168,76,.6) !important;}
html[data-theme='light'] .lnch3-stat-green .lnch3-stat-pulse{background:#22c55e !important;box-shadow:0 0 8px rgba(34,197,94,.6) !important;}
html[data-theme='light'] .lnch3-stat-red .lnch3-stat-pulse{background:#ef4444 !important;box-shadow:0 0 8px rgba(239,68,68,.6) !important;}
html[data-theme='light'] .lnch3-stat-purple .lnch3-stat-pulse{background:#a855f7 !important;box-shadow:0 0 8px rgba(168,85,247,.6) !important;}
.lnch3-stat-riyal{font-family:'saudi_riyal_symbolregular','Cairo',sans-serif;font-size:20px;line-height:1;flex-shrink:0;transform:translateY(1px);}
html[data-theme='light'] .lnch3-stat-riyal{color:#15803D !important;font-family:'saudi_riyal_symbolregular','Cairo',sans-serif !important;font-size:20px !important;}
/* ▌6. ACTION CARDS */
html[data-theme='light'] .lnch3-action-card{background:#FFFFFF !important;border:1px solid rgba(160,120,48,.12) !important;box-shadow:0 5px 20px rgba(160,120,48,.08),inset 0 1px 0 #fff !important;backdrop-filter:none !important;}
html[data-theme='light'] .lnch3-action-title{color:#23201B !important;}
html[data-theme='light'] .lnch3-action-desc{color:#5F584C !important;}
html[data-theme='light'] .lnch3-action-cta{background:rgba(160,120,48,.06) !important;border-color:rgba(160,120,48,.14) !important;color:#A07830 !important;}
html[data-theme='light'] .lnch3-action-badge{background:rgba(160,120,48,.07) !important;border-color:rgba(160,120,48,.16) !important;color:#A07830 !important;}
html[data-theme='light'] .lnch3-action-badge-new{background:rgba(201,168,76,.08) !important;border-color:rgba(201,168,76,.2) !important;color:#E3A92C !important;}
html[data-theme='light'] .lnch3-action-rec .lnch3-action-ico{background:linear-gradient(135deg,#fbbf24,#d97706) !important;color:#fff !important;}
html[data-theme='light'] .lnch3-action-dash .lnch3-action-ico{background:linear-gradient(135deg,#A07830,#A07830) !important;color:#fff !important;}
html[data-theme='light'] .lnch3-action-tech .lnch3-action-ico{background:linear-gradient(135deg,#a855f7,#7c3aed) !important;color:#fff !important;}
/* ▌7. MISC */
html[data-theme='light'] #sub-badge,html[data-theme='light'] .sub-badge-inner{background:linear-gradient(135deg,#FFFFFF,#F5F2FF) !important;border-color:rgba(160,120,48,.17) !important;}
html[data-theme='light'] .lnch-quick-bar{background:#FFFFFF !important;border:1px solid rgba(160,120,48,.12) !important;}
html[data-theme='light'] .lnch-quick-title{color:#A07830 !important;}
html[data-theme='light'] .lnch-quick-btn{background:#F5F7FF !important;border-color:rgba(160,120,48,.12) !important;color:#23201B !important;}
html[data-theme='light'] .lnch3-ann-card{background:linear-gradient(155deg,#F5F0FF,#EFF4FF) !important;border:1px solid rgba(201,168,76,.18) !important;backdrop-filter:none !important;}
html[data-theme='light'] .lnch3-ann-card-title{color:#23201B !important;}
html[data-theme='light'] .lnch3-ann-card-body{color:#5F584C !important;}
html[data-theme='light'] .lnch-footer-content{background:#FFFFFF !important;border:1px solid rgba(160,120,48,.13) !important;backdrop-filter:none !important;}
html[data-theme='light'] .lnch-footer-content::before{display:none !important;}
html[data-theme='light'] .lnch-footer-crown{background:linear-gradient(135deg,#E3A92C,#F1C04C) !important;color:#3a2c00 !important;animation:none !important;}
html[data-theme='light'] .lnch-footer-owner{color:#A07830 !important;text-shadow:none !important;}
html[data-theme='light'] .lnch-footer-cr{color:#5F584C !important;}
/* ▌8. BOTTOM NAV */
html[data-theme='light'] .cxbar-pill{background:rgba(255,255,255,.95) !important;border-color:rgba(160,120,48,.16) !important;box-shadow:0 8px 28px rgba(160,120,48,.14),inset 0 1px 0 rgba(255,255,255,.9) !important;}
html[data-theme='light'] .cxbar-query{background:rgba(255,255,255,.95) !important;border-color:rgba(160,120,48,.18) !important;color:#5F584C !important;}
html[data-theme='light'] .cxtab{color:#5F584C !important;}
html[data-theme='light'] .cxtab.on{color:#A07830 !important;}
html[data-theme='light'] .cxtab.on .cxtab-ico{filter:drop-shadow(0 3px 8px rgba(160,120,48,.35)) !important;}
html[data-theme='light'] .cxbar-query.on{color:#A07830 !important;border-color:#A07830 !important;}
html[data-theme='light'] .cxbadge{background:linear-gradient(135deg,#A07830,#E3A92C) !important;}
/* ▌9. DASHBOARD */
html[data-theme='light'] .dbrd-title{color:#23201B !important;}
html[data-theme='light'] .dbrd-refresh{background:#FFFFFF !important;border-color:rgba(160,120,48,.16) !important;color:#A07830 !important;}
html[data-theme='light'] .dbrd-title-ico{background:linear-gradient(135deg,rgba(160,120,48,.12),rgba(201,168,76,.10)) !important;border-color:rgba(160,120,48,.22) !important;color:#A07830 !important;}
html[data-theme='light'] .dbrd-title-ico::after{display:none !important;}
html[data-theme='light'] .dbrd-card{background:#FFFFFF !important;border:1px solid rgba(160,120,48,.12) !important;box-shadow:0 4px 18px rgba(160,120,48,.08),inset 0 1px 0 #fff !important;}
html[data-theme='light'] .dbrd-card::before{background:var(--cc,#A07830) !important;}
html[data-theme='light'] .dbrd-card-ico{background:rgba(160,120,48,.07) !important;border:1px solid rgba(160,120,48,.10) !important;}
html[data-theme='light'] .dbrd-card-label{color:#5F584C !important;}
html[data-theme='light'] .dbrd-card-val{color:#23201B !important;}
html[data-theme='light'] .dbrd-card-sub{color:#9A96A2 !important;}
html[data-theme='light'] .dbrd-df-toggle{background:#FFFFFF !important;border-color:rgba(160,120,48,.2) !important;color:#A07830 !important;}
html[data-theme='light'] .dbrd-df-toggle.open{background:linear-gradient(135deg,#E3A92C,#F1C04C) !important;color:#3a2c00 !important;border-color:transparent !important;}
html[data-theme='light'] .dbrd-df-all,html[data-theme='light'] .dbrd-df-today{background:#FFFFFF !important;border-color:rgba(160,120,48,.15) !important;color:#5F584C !important;}
html[data-theme='light'] .dbrd-df-all.on,html[data-theme='light'] .dbrd-df-today.on{background:linear-gradient(135deg,#E3A92C,#F1C04C) !important;color:#3a2c00 !important;border-color:transparent !important;}
html[data-theme='light'] .dbrd-df-day{background:#FFFFFF !important;border-color:rgba(160,120,48,.11) !important;}
html[data-theme='light'] .dbrd-df-day:hover{background:#F6F0E3 !important;}
html[data-theme='light'] .dbrd-df-dow{color:#5F584C !important;}
html[data-theme='light'] .dbrd-df-num{color:#23201B !important;}
html[data-theme='light'] .dbrd-df-day.on{background:linear-gradient(155deg,#A07830,#E3A92C) !important;border-color:transparent !important;}
html[data-theme='light'] .dbrd-df-day.on .dbrd-df-dow,html[data-theme='light'] .dbrd-df-day.on .dbrd-df-num{color:#fff !important;}
html[data-theme='light'] .dbrd-side{background:linear-gradient(165deg,#F6F0E3,#F6F0E3) !important;border:1px solid rgba(160,120,48,.16) !important;animation:none !important;}
html[data-theme='light'] .dbrd-side-glow{display:none !important;}
html[data-theme='light'] .dbrd-side-h{background:linear-gradient(135deg,rgba(160,120,48,.07),rgba(201,168,76,.05)) !important;border-bottom-color:rgba(160,120,48,.10) !important;}
html[data-theme='light'] .dbrd-side-title{color:#23201B !important;}
html[data-theme='light'] .dbrd-notif{background:#FFFFFF !important;border-color:rgba(160,120,48,.10) !important;}
html[data-theme='light'] .dbrd-notif::after{display:none !important;}
html[data-theme='light'] .dbrd-notif-amt{color:#E3A92C !important;}
/* ▌10. SIDEBAR */
html[data-theme='light'] .dash-sb{background:linear-gradient(180deg,#F6F0E3,#F6F0E3 50%,#F6F0E3 100%) !important;border-color:rgba(160,120,48,.12) !important;}
html[data-theme='light'] .dash-sb .sb-nav-item{color:#5F584C !important;}
html[data-theme='light'] .dash-sb .sb-nav-item .ni{background:rgba(160,120,48,.07) !important;border-color:rgba(160,120,48,.12) !important;}
html[data-theme='light'] .dash-sb .sb-nav-item .ni svg{color:#A07830 !important;}
html[data-theme='light'] .dash-sb .sb-nav-item:hover{background:rgba(160,120,48,.05) !important;}
html[data-theme='light'] .dash-sb .sb-nav-item.on{background:linear-gradient(135deg,rgba(160,120,48,.10),rgba(201,168,76,.08)) !important;color:#A07830 !important;}
html[data-theme='light'] .dash-sb .sb-nav-item.on .ni{background:linear-gradient(135deg,#A07830,#E3A92C) !important;border-color:transparent !important;}
html[data-theme='light'] .dash-sb .sb-nav-item.on .ni svg{color:#fff !important;}
html[data-theme='light'] .dash-sb .sb-day-val{color:#23201B !important;}
/* ▌11. RECEPTION */
html[data-theme='light'] .rec-id-panel{background:linear-gradient(135deg,#A07830 0%,#A07830 45%,#E3A92C 100%) !important;border:none !important;box-shadow:0 10px 32px rgba(160,120,48,.26),inset 0 2px 0 rgba(255,255,255,.14) !important;}
html[data-theme='light'] .rec-id-greet{color:rgba(255,255,255,.75) !important;}
html[data-theme='light'] .rec-id-name{background:linear-gradient(135deg,#fff,#F6F0E3 50%,#fff) !important;background-size:200% auto !important;-webkit-background-clip:text !important;background-clip:text !important;-webkit-text-fill-color:transparent !important;}
html[data-theme='light'] .rec-pro-card{background:#FFFFFF !important;border:1px solid rgba(160,120,48,.13) !important;box-shadow:0 3px 14px rgba(160,120,48,.07) !important;}
html[data-theme='light'] .rec-pro-card-h{background:linear-gradient(135deg,#A07830 0%,#E3A92C 100%) !important;border-bottom:none !important;}
html[data-theme='light'] .rec-pro-card-title{color:#FFFFFF !important;}
html[data-theme='light'] .rec-pro-card-sub{color:rgba(255,255,255,.72) !important;}
html[data-theme='light'] .rec-pro-card-body{background:transparent !important;}
html[data-theme='light'] .rec-pro-card .staff-form-f label{color:#A07830 !important;}
html[data-theme='light'] .rec-pro-card .staff-form-f input,
html[data-theme='light'] .rec-pro-card .staff-form-f select,
html[data-theme='light'] .rec-pro-card .staff-form-f textarea{background:#FBF7EF !important;border:1.5px solid rgba(160,120,48,.18) !important;color:#23201B !important;}
html[data-theme='light'] .rec-pro-card .staff-form-f input:focus,
html[data-theme='light'] .rec-pro-card .staff-form-f select:focus{background:#FFFFFF !important;border-color:rgba(160,120,48,.45) !important;box-shadow:0 0 0 3px rgba(160,120,48,.10) !important;}
html[data-theme='light'] .rec-toggle-row{background:#FBF7EF !important;border:1px solid rgba(160,120,48,.13) !important;}
html[data-theme='light'] .rec-toggle-row:hover{background:#F6F0E3 !important;}
html[data-theme='light'] .rec-price-suffix{color:#15803D !important;}
/* ▌12. GLOBAL INPUTS */
html[data-theme='light'] select{background:#FFFFFF !important;border:1.5px solid rgba(160,120,48,.2) !important;color:#23201B !important;}
html[data-theme='light'] select:focus{border-color:rgba(160,120,48,.45) !important;box-shadow:0 0 0 3px rgba(160,120,48,.10) !important;}
html[data-theme='light'] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]){background:#FFFFFF !important;border:1.5px solid rgba(160,120,48,.18) !important;color:#23201B !important;}
html[data-theme='light'] input:focus{border-color:rgba(160,120,48,.45) !important;box-shadow:0 0 0 3px rgba(160,120,48,.10) !important;}
html[data-theme='light'] textarea{background:#FFFFFF !important;border:1.5px solid rgba(160,120,48,.18) !important;color:#23201B !important;}
/* ══════════════════════════════════════════════════════
OMAR — SIDEBAR FULL HEIGHT + NEW TOGGLE (FINAL)
══════════════════════════════════════════════════════ */
/* السايدبار كامل الطول - تغلب على كل شيء */
.dash-sb,
.dash-sb.drawer-open {
top: 0 !important;
height: 100vh !important;
max-height: 100vh !important;
}
/* إزالة الشريط الجانبي الفارغ */
.dash-content {
overflow-y: auto !important;
scrollbar-gutter: auto !important;
}
.dash-content::-webkit-scrollbar { width: 4px; }
.dash-content::-webkit-scrollbar-track { background: transparent; }
.dash-content::-webkit-scrollbar-thumb {
background: rgba(255,255,255,.07);
border-radius: 4px;
}
html[data-theme='light'] .dash-content::-webkit-scrollbar-thumb {
background: rgba(160,120,48,.1);
}
/* مسافة بين السايدبار والمحتوى */
.dash-pane { padding-right: 10px !important; }
@media(max-width:1023px) { .dash-pane { padding-right: 2px !important; } }
/* ④ إخفاء الزر القديم تماماً في كل الأحوال */
.sb-collapse-btn { display: none !important; visibility: hidden !important; }
/* ══ الزر الجديد ══ */
.sb-neo-toggle {
position: fixed;
top: 50%;
right: calc(var(--sb-w, 220px) - 1px);
transform: translateY(-50%);
z-index: 1600;
width: 18px;
height: 52px;
cursor: pointer;
border: none;
outline: none;
padding: 0;
background: transparent;
display: none;
align-items: center;
justify-content: center;
-webkit-tap-highlight-color: transparent;
transition: right .45s cubic-bezier(.34,1.56,.64,1);
}
@media(min-width:1024px) { .sb-neo-toggle { display: flex; } }
.sb-neo-inner {
position: relative;
width: 100%; height: 100%;
display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 5px;
background: linear-gradient(180deg,
var(--d2,#15192a) 0%,
var(--d3,#1e2236) 50%,
var(--d2,#15192a) 100%);
border: 1px solid var(--bdr, rgba(201,168,76,.2));
border-right: none;
border-radius: 0 8px 8px 0;
box-shadow: 3px 0 14px rgba(0,0,0,.45), inset -1px 0 0 rgba(255,255,255,.03);
overflow: hidden;
transition:
width .3s cubic-bezier(.34,1.56,.64,1),
height .3s cubic-bezier(.34,1.56,.64,1),
background .3s ease,
border-color .3s ease;
}
.sb-neo-line {
display: block; height: 1.5px; border-radius: 2px;
background: var(--nsb-accent, rgba(201,168,76,.8));
flex-shrink: 0;
transition: width .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}
.sb-neo-line:nth-child(1) { width: 5px; opacity: .5; }
.sb-neo-line:nth-child(2) { width: 8px; opacity: .95; }
.sb-neo-line:nth-child(3) { width: 5px; opacity: .5; }
.sb-neo-arrow {
position: absolute; opacity: 0; color: #fbbf24;
transition: opacity .2s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.sb-neo-arrow svg { width: 13px; height: 13px; filter: drop-shadow(0 0 5px currentColor); }
.sb-neo-toggle:hover .sb-neo-inner {
width: 26px; height: 68px;
background: linear-gradient(180deg,
var(--d3,#1e2236) 0%, var(--d4,#252840) 50%, var(--d3,#1e2236) 100%);
border-color: rgba(251,191,36,.5);
box-shadow: 5px 0 22px rgba(0,0,0,.55), 0 0 20px rgba(251,191,36,.18);
}
.sb-neo-toggle:hover .sb-neo-line { opacity: 0 !important; width: 0 !important; }
.sb-neo-toggle:hover .sb-neo-arrow { opacity: 1; }
.sb-neo-toggle:active .sb-neo-inner { width: 20px; height: 56px; transition-duration: .1s; }
.dash-sb.is-collapsed ~ .sb-neo-toggle,
.dash-body:has(.dash-sb.is-collapsed) .sb-neo-toggle { right: calc(66px - 1px); }
.dash-sb.is-collapsed ~ .sb-neo-toggle .sb-neo-arrow,
.dash-body:has(.dash-sb.is-collapsed) .sb-neo-toggle .sb-neo-arrow { transform: rotate(180deg); }
html[data-theme='light'] .sb-neo-inner {
background: linear-gradient(180deg,#F6F0E3,#F6F0E3,#F6F0E3) !important;
border-color: rgba(160,120,48,.22) !important;
}
html[data-theme='light'] .sb-neo-line { background: rgba(160,120,48,.55) !important; }
html[data-theme='light'] .sb-neo-arrow { color: #A07830 !important; }
html[data-theme='light'] .sb-neo-toggle:hover .sb-neo-inner {
background: linear-gradient(180deg,#F6F0E3,#F6F0E3,#F6F0E3) !important;
border-color: rgba(160,120,48,.45) !important;
}
.sb-collapse-btn,.sb-neo-toggle{display:none !important;}
.sb-panel-head{display:flex !important;align-items:center !important;justify-content:flex-end !important;padding:8px 10px !important;flex-shrink:0 !important;min-height:48px !important;}
.sb-unified-btn{position:relative;width:36px;height:36px;border-radius:10px;border:1px solid var(--bdr,rgba(201,168,76,.2));background:rgba(255,255,255,.04);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;overflow:hidden;transition:background .2s,border-color .2s;outline:none;-webkit-tap-highlight-color:transparent;flex-shrink:0;}
.sb-unified-btn:hover{background:rgba(201,168,76,.1);border-color:rgba(201,168,76,.45);}
.sb-unified-btn:active{transform:scale(.92);}
.sub-line{display:block;height:1.5px;border-radius:2px;background:var(--nsb-accent,rgba(201,168,76,.8));transition:width .3s cubic-bezier(.34,1.56,.64,1),opacity .25s;pointer-events:none;}
.sub-line-1{width:14px;opacity:.5;}
.sub-line-2{width:20px;opacity:.95;}
.sub-line-3{width:14px;opacity:.5;}
.sub-arrow{position:absolute;width:16px;height:16px;opacity:0;color:var(--nsb-accent,#fbbf24);filter:drop-shadow(0 0 4px currentColor);transition:opacity .2s,transform .35s cubic-bezier(.34,1.56,.64,1);pointer-events:none;}
.sub-close{position:absolute;width:16px;height:16px;opacity:0;color:var(--t2,rgba(201,168,76,.7));transition:opacity .2s;pointer-events:none;}
@media(min-width:1024px){
.dash-sb{position:sticky !important;top:0 !important;height:100vh !important;max-height:100vh !important;}
.dash-body{overflow:hidden !important;align-items:stretch !important;}
.dash-content{overflow-y:auto !important;scrollbar-gutter:auto !important;min-width:0 !important;}
.dash-pane{padding:16px 24px !important;}
.sb-unified-btn:hover .sub-line{opacity:0;width:0 !important;}
.sb-unified-btn:hover .sub-arrow{opacity:1;}
.dash-sb.is-collapsed .sb-unified-btn .sub-arrow{transform:rotate(180deg);}
}
@media(max-width:1023px){
.sub-line{opacity:0;width:0 !important;}
.sub-arrow{display:none !important;}
.sub-close{opacity:1 !important;}
.sb-panel-head{justify-content:flex-start !important;}
}
.dash-sb{background:linear-gradient(180deg,var(--d2,#13151e) 0%,var(--d1,#0b0c0f) 100%) !important;}
html[data-theme='light'] .dash-sb{background:linear-gradient(180deg,#fffdf7 0%,#faf6ec 100%) !important;}
html[data-theme='light'] .sb-unified-btn{background:rgba(0,0,0,.04) !important;border-color:rgba(0,0,0,.1) !important;}
html[data-theme='light'] .sb-unified-btn:hover{background:rgba(201,168,76,.07) !important;border-color:rgba(201,168,76,.3) !important;}
html[data-theme='light'] .sub-line{background:rgba(0,0,0,.4) !important;}
html[data-theme='light'] .sub-arrow{color:#5a4a2a !important;filter:none !important;}
html[data-theme='light'] .sub-close{color:rgba(0,0,0,.5) !important;}
/* ══ حذف كل أزرار السايدبار نهائياً ══ */
.dhp-panel-trigger { display: none !important; }
#cx-vfab, #cx-vsheet { display: none !important; }
.sb-panel-head { display: none !important; }
.sb-unified-btn { display: none !important; }
/* السايدبار كله قابل للنقر للطي/الفتح */
.dash-sb { cursor: default; }
/* ══ أيقونات الوصول السريع: شكل hover دائري ══ */
@media(min-width:1024px){
.dash-sb .sb-quick-icons .sb-qi {
border-radius: 14px !important;
transition: border-radius .25s ease, transform .25s cubic-bezier(.34,1.4,.5,1), box-shadow .25s, border-color .25s !important;
}
/* عند المرور: يتحول لدائرة */
}
/* ══ صورة المستخدم عند الطي: دائرة مثالية في كل الأوضاع (أعلى أولوية) ══ */
html .dash-sb.is-collapsed #sb-prof-avatar,
html[data-theme='light'] .dash-sb.is-collapsed #sb-prof-avatar,
html[data-theme='dark'] .dash-sb.is-collapsed #sb-prof-avatar {
border-radius: 50% !important;
overflow: hidden !important;
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
max-width: 46px !important;
min-height: 46px !important;
max-height: 46px !important;
aspect-ratio: 1 / 1 !important;
flex: none !important;
flex-shrink: 0 !important;
padding: 0 !important;
box-sizing: border-box !important;
display: block !important;
font-size: 0 !important;
line-height: 0 !important;
background: none !important;
background-color: transparent !important;
position: relative !important;
}
html .dash-sb.is-collapsed #sb-prof-avatar img,
html[data-theme='light'] .dash-sb.is-collapsed #sb-prof-avatar img,
html[data-theme='dark'] .dash-sb.is-collapsed #sb-prof-avatar img {
position: absolute !important;
inset: 0 !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: 50% !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* إخفاء أيقونة التعديل عند الطي */
html .dash-sb.is-collapsed #sb-prof-avatar .sb-avatar-edit {
display: none !important;
}
/* الكمبيوتر فقط: بطاقات الإحصاءات صف واحد يتمدد/يتقلص */
@media(min-width:1024px){
.dbrd-cards{display:flex;flex-wrap:nowrap;gap:14px;align-items:stretch;}
.dbrd-card{flex:1 1 0;min-width:0;}
}
/* ══ بطاقات الإحصاءات: تكيّف ذكي مع الشاشات الكبيرة ══ */
@media(min-width:1400px){
.dbrd-cards{gap:16px;}
.dbrd-card{padding:18px;}
}
@media(min-width:1800px){
.dbrd-cards{gap:18px;}
.dbrd-card{padding:22px;}
}
/* ══════════ الإدارة المالية — معالجة الوضع النهاري (الشكل فقط) ══════════ */
/* Hero: من البني الداكن إلى تدرّج نيلي/بنفسجي أنيق */
html[data-theme='light'] .fin-hero{
background:linear-gradient(155deg,#FFFFFF 0%,#F2ECE0 55%,#EFE7D6 100%) !important;
border:1px solid rgba(201,168,76,.14) !important;
box-shadow:0 6px 24px rgba(201,168,76,.08) !important;
}
html[data-theme='light'] .fin-hero-bg{
background:
radial-gradient(circle at 20% 30%, rgba(201,168,76,.07), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(160,120,48,.06), transparent 50%) !important;
}
html[data-theme='light'] .fin-hero-title{
color:#E3A92C !important;
text-shadow:none !important;
}
html[data-theme='light'] .fin-hero-ico{
background:linear-gradient(135deg,#E3A92C,#A07830) !important;
box-shadow:0 8px 22px rgba(201,168,76,.25),0 0 0 1px rgba(255,255,255,.4) inset !important;
}
html[data-theme='light'] .fin-hero-period{
background:#FFFFFF !important;
border:1px solid rgba(201,168,76,.14) !important;
}
/* Tabs: خلفية فاتحة ناعمة */
html[data-theme='light'] .fin-tabs{
background:#FFFFFF !important;
border:1px solid rgba(201,168,76,.12) !important;
box-shadow:0 2px 12px rgba(201,168,76,.05) !important;
}
html[data-theme='light'] .fin-tab:hover{
color:#E3A92C !important;background:#EFE7D6 !important;
}
html[data-theme='light'] .fin-tab.on{
background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(160,120,48,.06)) !important;
color:#E3A92C !important;
box-shadow:0 0 0 1px rgba(201,168,76,.25) inset !important;
}
/* KPIs والأقسام: أبيض بحدود ناعمة */
html[data-theme='light'] .fin-kpi,
html[data-theme='light'] .fin-section{
background:#FFFFFF !important;
border:1px solid rgba(201,168,76,.12) !important;
box-shadow:0 4px 16px rgba(201,168,76,.06) !important;
}
html[data-theme='light'] .fin-section-h{
background:linear-gradient(90deg,rgba(201,168,76,.05),rgba(160,120,48,.02)) !important;
border-bottom:1px solid rgba(201,168,76,.10) !important;
}
/* الصفوف: خلفية فاتحة بدل rgba أبيض غير مرئي */
html[data-theme='light'] .fin-svc-row{
background:#F2ECE0 !important;
border:1px solid rgba(201,168,76,.10) !important;
}
html[data-theme='light'] .fin-svc-row:hover{
background:#EFE7D6 !important;border-color:rgba(201,168,76,.22) !important;
}
/* جداول الإدارة المالية في النهار: خطوط فاصلة مرئية */
html[data-theme='light'] .fin-table td{border-bottom:1px solid rgba(201,168,76,.10) !important;}
html[data-theme='light'] .fin-table th{color:#E3A92C !important;border-bottom:1px solid rgba(201,168,76,.16) !important;}
html[data-theme='light'] .fin-table tr:hover td{background:#F2ECE0 !important;}
/* صفوف الالتزامات/القوائم في النهار */
html[data-theme='light'] .fin-obl-row,
html[data-theme='light'] .fin-partner-row,
html[data-theme='light'] .fin-pay-row{background:#F2ECE0 !important;border:1px solid rgba(201,168,76,.10) !important;}
html[data-theme='light'] .fin-obl-row:hover,
html[data-theme='light'] .fin-partner-row:hover{background:#EFE7D6 !important;}
/* ══════════ الخزنة والصندوق (qd-) — معالجة الوضع النهاري (الشكل فقط) ══════════ */
/* الحاوية الرئيسية للخزنة: من الداكن إلى أبيض/وردي أنيق */
html[data-theme='light'] .qd-vault{
background:linear-gradient(155deg,#FFFFFF 0%,#F2ECE0 60%,#EFE7D6 100%) !important;
border:1px solid rgba(201,168,76,.16) !important;
box-shadow:0 12px 36px rgba(201,168,76,.10),inset 0 1px 0 rgba(255,255,255,.6) !important;
}
html[data-theme='light'] .qd-vault-lbl{color:#5F584C !important;}
html[data-theme='light'] .qd-vault-val{
color:#E3A92C !important;
text-shadow:0 4px 18px rgba(201,168,76,.18) !important;
}
html[data-theme='light'] .qd-vault-split{
background:#FFFFFF !important;border:1px solid rgba(201,168,76,.14) !important;
}
html[data-theme='light'] .qd-vault-sep{color:#A39DA8 !important;}
/* بطاقة التفاصيل (الخلفية السوداء الكبيرة) */
html[data-theme='light'] .qd-detail-card{
background:linear-gradient(150deg,#FFFFFF,#F2ECE0) !important;
border:1px solid rgba(201,168,76,.14) !important;
box-shadow:0 8px 26px rgba(201,168,76,.08) !important;
}
html[data-theme='light'] .qd-dc-h{border-bottom:1px dashed rgba(201,168,76,.16) !important;}
html[data-theme='light'] .qd-dc-title{color:#23201B !important;}
html[data-theme='light'] .qd-dc-sub{color:#5F584C !important;}
/* صناديق النقد/البنك */
html[data-theme='light'] .qd-box-cash{
background:linear-gradient(150deg,rgba(1,66,36,.10),rgba(1,66,36,.02)) !important;
border-color:rgba(1,66,36,.28) !important;
}
html[data-theme='light'] .qd-box-bank{
background:linear-gradient(150deg,rgba(160,120,48,.10),rgba(160,120,48,.02)) !important;
border-color:rgba(160,120,48,.28) !important;
}
html[data-theme='light'] .qd-box-name{color:#5F584C !important;}
html[data-theme='light'] .qd-box-val{color:#23201B !important;}
/* دفتر الحركات */
html[data-theme='light'] .qd-vault-ledger{
background:#F2ECE0 !important;border:1px solid rgba(201,168,76,.12) !important;
}
html[data-theme='light'] .qd-led-row{
color:#5F584C !important;border-bottom:1px dashed rgba(201,168,76,.12) !important;
}
html[data-theme='light'] .qd-led-empty{color:#A39DA8 !important;}
/* الأزرار الذكية */
html[data-theme='light'] .qd-smart-btn{
background:#FFFFFF !important;border:1px solid rgba(201,168,76,.14) !important;
}
html[data-theme='light'] .qd-smart-btn:hover{
border-color:rgba(201,168,76,.35) !important;background:#EFE7D6 !important;
}
html[data-theme='light'] .qd-smart-txt b{color:#23201B !important;}
html[data-theme='light'] .qd-smart-title{color:#E3A92C !important;}
/* عناصر الخزنة المتبقية في النهار */
html[data-theme='light'] .qd-vault-period{color:#5F584C !important;}
html[data-theme='light'] .qd-share-btn{
background:rgba(201,168,76,.10) !important;border:1px solid rgba(201,168,76,.22) !important;color:#E3A92C !important;
}
html[data-theme='light'] .qd-smart-state{
color:#5F584C !important;background:rgba(201,168,76,.07) !important;
}
html[data-theme='light'] .qd-dc-total{color:#23201B !important;}
/* ══════════ وسائل الدفع/القنوات (qd-pm-) — الوضع النهاري (الشكل فقط) ══════════ */
/* البطاقة الكبيرة (حقيبة النقدية/الحساب البنكي) */
html[data-theme='light'] .qd-pm-card{
background:linear-gradient(160deg,#FFFFFF,#F2ECE0) !important;
border:1px solid rgba(201,168,76,.14) !important;
box-shadow:0 10px 32px rgba(201,168,76,.08) !important;
}
html[data-theme='light'] .qd-pm-head{border-bottom:1px solid rgba(201,168,76,.10) !important;}
html[data-theme='light'] .qd-pm-title{color:#23201B !important;}
html[data-theme='light'] .qd-pm-sub{color:#5F584C !important;}
/* عناصر القنوات (الموظفون) — كانت شفافة غير مرئية */
html[data-theme='light'] .qd-pm-item{
background:#F2ECE0 !important;
border:1px solid rgba(201,168,76,.12) !important;
}
html[data-theme='light'] .qd-pm-item-name{color:#23201B !important;}
html[data-theme='light'] .qd-pm-item-val{color:#23201B !important;}
html[data-theme='light'] .qd-pm-item-cnt,
html[data-theme='light'] .qd-pm-item-pct{color:#5F584C !important;}
html[data-theme='light'] .qd-pm-item-bar{background:rgba(201,168,76,.10) !important;}
/* قنوات الاستقبال البنكية */
html[data-theme='light'] .qd-pm-chan{
background:rgba(160,120,48,.06) !important;
border:1px solid rgba(160,120,48,.18) !important;
}
html[data-theme='light'] .qd-pm-chan-name{color:#23201B !important;}
html[data-theme='light'] .qd-pm-chan-val{color:#23201B !important;}
html[data-theme='light'] .qd-pm-chan-meta,
html[data-theme='light'] .qd-pm-chan-vallbl{color:#5F584C !important;}
html[data-theme='light'] .qd-pm-chan-bar{background:rgba(160,120,48,.12) !important;}
/* رؤوس الأقسام */
html[data-theme='light'] .qd-pm-sec-head{
background:linear-gradient(90deg,rgba(201,168,76,.06),rgba(201,168,76,.01)) !important;
}
html[data-theme='light'] .qd-pm-sec-title{color:#23201B !important;}
html[data-theme='light'] .qd-pm-sec-sub{color:#5F584C !important;}
/* المطابقة/التسوية */
html[data-theme='light'] .qd-pm-recon{
background:linear-gradient(155deg,rgba(201,168,76,.06),rgba(201,168,76,.015)) !important;
border:1px solid rgba(201,168,76,.18) !important;
}
html[data-theme='light'] .qd-pm-bag-ledger{border-top:1px dashed rgba(201,168,76,.16) !important;}
html[data-theme='light'] .qd-pm-bag-row{color:#5F584C !important;}
html[data-theme='light'] .qd-pm-total{color:#23201B !important;}
/* ══════════ لوحة النشاط المالي الذكية (act2-) — الوضع النهاري (الشكل فقط) ══════════ */
html[data-theme='light'] .act2-hero{
background:radial-gradient(ellipse at top left,rgba(201,168,76,.10),transparent 60%),linear-gradient(160deg,#FFFFFF,#F2ECE0) !important;
border:1.5px solid rgba(201,168,76,.20) !important;
}
html[data-theme='light'] .act2-hero-glow{background:rgba(201,168,76,.10) !important;}
html[data-theme='light'] .act2-card{
background:linear-gradient(160deg,#FFFFFF,#F2ECE0) !important;
border:1px solid rgba(201,168,76,.12) !important;
box-shadow:0 4px 16px rgba(201,168,76,.06) !important;
}
html[data-theme='light'] .act2-cov-bar{background:rgba(201,168,76,.10) !important;}
html[data-theme='light'] .qd-cov-bar{background:rgba(201,168,76,.10) !important;}
/* ════════════════════════════════════════════════════════════════
🎨 تبويب الدخل اليومي + عمليات الفحص — تنسيق نهاري احترافي
(الشكل فقط — لوحة: بنفسجي #E3A92C / نيلي #A07830 / أخضر #014224 / وردي / أبيض)
════════════════════════════════════════════════════════════════ */
/* ═══════════ عمليات الفحص — HERO (insp-hero) ═══════════ */
html[data-theme='light'] .insp-hero{
background:
radial-gradient(ellipse at top right, rgba(1,66,36,.10) 0%, transparent 55%),
radial-gradient(ellipse at bottom left, rgba(160,120,48,.08) 0%, transparent 55%),
linear-gradient(155deg, #FFFFFF 0%, #F2ECE0 100%) !important;
border:1.5px solid rgba(201,168,76,.18) !important;
box-shadow:0 8px 30px rgba(201,168,76,.08) !important;
}
html[data-theme='light'] .insp-hero-title{
background:linear-gradient(135deg,#014224 0%,#A07830 100%) !important;
-webkit-background-clip:text !important; background-clip:text !important;
-webkit-text-fill-color:transparent !important;
text-shadow:none !important;
}
html[data-theme='light'] .insp-hero-sub{ color:#5A5560 !important; font-weight:700 !important; }
html[data-theme='light'] .insp-hero-ico{
background:linear-gradient(135deg,#014224,#A07830) !important;
box-shadow:0 8px 22px rgba(1,66,36,.25) !important;
}
html[data-theme='light'] .insp-hero-orb-1{ background:radial-gradient(circle, rgba(1,66,36,.10), transparent 70%) !important; }
html[data-theme='light'] .insp-hero-orb-2{ background:radial-gradient(circle, rgba(160,120,48,.08), transparent 70%) !important; }
/* ═══════════ الدخل اليومي — HERO (exh-hero / dyi-hero) ═══════════ */
html[data-theme='light'] .exh-hero{
background:linear-gradient(155deg, #FFFFFF 0%, #F2ECE0 60%, #EFE7D6 100%) !important;
border:1.5px solid rgba(201,168,76,.20) !important;
box-shadow:0 8px 30px rgba(201,168,76,.08) !important;
}
html[data-theme='light'] .exh-hero-title{ color:#E3A92C !important; }
html[data-theme='light'] .exh-hero-sub,
html[data-theme='light'] .exh-hero-eyebrow{ color:#5F584C !important; }
html[data-theme='light'] .exh-stat-val{ color:#23201B !important; }
html[data-theme='light'] .exh-stat-lbl,
html[data-theme='light'] .exh-stat-sub,
html[data-theme='light'] .exh-stat-unit{ color:#5F584C !important; }
html[data-theme='light'] .exh-hero-bg-1{ background:radial-gradient(circle, rgba(201,168,76,.08), transparent 70%) !important; }
html[data-theme='light'] .exh-hero-bg-2{ background:radial-gradient(circle, rgba(160,120,48,.07), transparent 70%) !important; }
html[data-theme='light'] .exh-hero-bg-3{ background:radial-gradient(circle, rgba(1,66,36,.06), transparent 70%) !important; }
html[data-theme='light'] .dyi-hero{
background:linear-gradient(135deg, rgba(201,168,76,.06) 0%, rgba(160,120,48,.05) 50%, rgba(1,66,36,.04) 100%), #FFFFFF !important;
border:1.5px solid rgba(201,168,76,.30) !important;
box-shadow:0 10px 34px rgba(201,168,76,.10) !important;
}
html[data-theme='light'] .dyi-hero-main{ color:#E3A92C !important; }
html[data-theme='light'] .dyi-hero-label,
html[data-theme='light'] .dyi-hero-sub,
html[data-theme='light'] .dyi-hero-unit,
html[data-theme='light'] .dyi-hero-sep,
html[data-theme='light'] .dyi-hero-mode-hint{ color:#5F584C !important; }
html[data-theme='light'] .dyi-hero-chip{
background:rgba(201,168,76,.08) !important; color:#E3A92C !important;
border:1px solid rgba(201,168,76,.20) !important;
}
html[data-theme='light'] .dyi-hero-bg-orb{ background:radial-gradient(circle, rgba(201,168,76,.08), transparent 70%) !important; }
/* ═══════════ الدخل اليومي — التنقّل والأقراص (dyi-nav / dyi-day-pill) ═══════════ */
html[data-theme='light'] .dyi-nav{
background:#FFFFFF !important; border:1px solid rgba(201,168,76,.12) !important;
box-shadow:0 2px 12px rgba(201,168,76,.05) !important;
}
html[data-theme='light'] .dyi-nav-btn{
background:rgba(201,168,76,.06) !important; color:#E3A92C !important;
border:1px solid rgba(201,168,76,.14) !important;
}
html[data-theme='light'] .dyi-nav-btn:hover{ background:#EFE7D6 !important; }
html[data-theme='light'] .dyi-nav-date{ color:#23201B !important; }
html[data-theme='light'] .dyi-day-pill{
background:#F2ECE0 !important; color:#5F584C !important;
border:1px solid rgba(201,168,76,.14) !important;
}
html[data-theme='light'] .dyi-day-pill:hover{ background:#EFE7D6 !important; border-color:rgba(201,168,76,.30) !important; }
html[data-theme='light'] .dyi-day-pill.on,
html[data-theme='light'] .dyi-day-pill.active{
background:linear-gradient(135deg,rgba(201,168,76,.14),rgba(160,120,48,.07)) !important;
color:#E3A92C !important; border-color:rgba(201,168,76,.35) !important;
}
html[data-theme='light'] .dyi-dp-name{ color:inherit !important; }
html[data-theme='light'] .dyi-dp-num,
html[data-theme='light'] .dyi-dp-badge{ color:#5F584C !important; }
html[data-theme='light'] .dyi-day-today-btn{
background:linear-gradient(135deg,#E3A92C,#A07830) !important; color:#fff !important;
}
/* ═══════════ الدخل اليومي — أقراص طرق الدفع (dyi-mp) ═══════════ */
html[data-theme='light'] .dyi-method-pills{ }
html[data-theme='light'] .dyi-mp{
background:#FFFFFF !important; border:1px solid rgba(201,168,76,.14) !important;
box-shadow:0 3px 12px rgba(201,168,76,.05) !important;
}
html[data-theme='light'] .dyi-mp-name{ color:#5F584C !important; }
html[data-theme='light'] .dyi-mp-val{ color:#23201B !important; }
html[data-theme='light'] .dyi-mp-orig{ color:#A39DA8 !important; }
html[data-theme='light'] .dyi-mp-ref{ color:#CC313D !important; }
html[data-theme='light'] .dyi-info-chip{
background:rgba(201,168,76,.10) !important; color:#E3A92C !important;
}
/* ═══════════ الدخل اليومي — مفتاح الوضع (dyi-mode-toggle / dyi-mt) ═══════════ */
html[data-theme='light'] .dyi-mode-toggle,
html[data-theme='light'] .dyi-mt-switch{
background:rgba(201,168,76,.06) !important; border:1px solid rgba(201,168,76,.14) !important;
}
html[data-theme='light'] .dyi-mt-label{ color:#23201B !important; }
html[data-theme='light'] .dyi-mt-sub{ color:#5F584C !important; }
/* ═══════════ الدخل اليومي — البطاقات والأقسام (dyi-sec / dyi-card) ═══════════ */
html[data-theme='light'] .dyi-sec,
html[data-theme='light'] .dyi-sec-card,
html[data-theme='light'] .dyi-card{
background:#FFFFFF !important; border:1px solid rgba(201,168,76,.12) !important;
box-shadow:0 4px 16px rgba(201,168,76,.06) !important;
}
html[data-theme='light'] .dyi-sec-title,
html[data-theme='light'] .dyi-card-title{ color:#23201B !important; }
/* صفوف الخدمات */
html[data-theme='light'] .dyi-svc-list{ background:transparent !important; }
html[data-theme='light'] .dyi-svc-row{
background:#F2ECE0 !important; border:1px solid rgba(201,168,76,.10) !important;
color:#5F584C !important;
}
html[data-theme='light'] .dyi-svc-row:hover{ background:#EFE7D6 !important; }
html[data-theme='light'] .dyi-svc-name{ color:#23201B !important; }
html[data-theme='light'] .dyi-svc-val{ color:#014224 !important; }
/* صفوف المخرجات (المصروفات/الخصومات) */
html[data-theme='light'] .dyi-out-rows{ background:transparent !important; }
html[data-theme='light'] .dyi-out-row{
background:#F2ECE0 !important; border:1px solid rgba(204,49,61,.12) !important;
color:#5F584C !important;
}
html[data-theme='light'] .dyi-out-val{ color:#CC313D !important; }
/* صف الصافي */
html[data-theme='light'] .dyi-net-row,
html[data-theme='light'] .dyi-net-side{
background:linear-gradient(135deg,rgba(1,66,36,.08),rgba(1,66,36,.02)) !important;
border:1px solid rgba(1,66,36,.22) !important;
}
html[data-theme='light'] .dyi-net-label{ color:#5F584C !important; }
html[data-theme='light'] .dyi-net-val{ color:#014224 !important; }
html[data-theme='light'] .dyi-side-vat{
background:rgba(160,120,48,.06) !important; border:1px solid rgba(160,120,48,.16) !important;
color:#A07830 !important;
}
html[data-theme='light'] .dyi-empty{ color:#A39DA8 !important; }
html[data-theme='light'] .dyi-display-tag{ background:rgba(201,168,76,.08) !important; color:#E3A92C !important; }
/* ═══════════ الدخل اليومي — بطاقات المصروفات (exp2) ═══════════ */
html[data-theme='light'] .exp2-card{
background:linear-gradient(135deg,#FFFFFF,#F2ECE0) !important;
border:1px solid rgba(201,168,76,.14) !important;
box-shadow:0 6px 22px rgba(201,168,76,.07) !important;
}
html[data-theme='light'] .exp2-head{ border-bottom:1px solid rgba(201,168,76,.10) !important; }
html[data-theme='light'] .exp2-head-title{ color:#23201B !important; }
html[data-theme='light'] .exp2-head-sub{ color:#5F584C !important; }
html[data-theme='light'] .exp2-head-ico{
background:linear-gradient(135deg,#E3A92C,#A07830) !important; color:#fff !important;
}
html[data-theme='light'] .exp2-field input,
html[data-theme='light'] .exp2-field select{
background:#FFFFFF !important; border:1px solid rgba(201,168,76,.16) !important; color:#23201B !important;
}
html[data-theme='light'] .exp2-add-pay{
background:rgba(201,168,76,.08) !important; color:#E3A92C !important;
border:1px dashed rgba(201,168,76,.30) !important;
}
/* ═══════════ عمليات الفحص — خلايا بطاقة التذكرة (tkc-cell) ═══════════ */
/* الخلايا كانت بخلفية بيضاء شبه شفافة غير مرئية على النهاري */
html[data-theme='light'] .tkc-cell{
background:#FBFCFE !important; border:1px solid rgba(160,120,48,.10) !important;
border-radius:12px !important;
}
html[data-theme='light'] .tkc-cell-label{ color:#9690A0 !important; font-weight:600 !important; }
html[data-theme='light'] .tkc-cell-value{ color:#23201B !important; font-weight:700 !important; }
html[data-theme='light'] .tkc-cell-ico{ color:#E3A92C !important; }
html[data-theme='light'] .tkc-cell-ico-plate{
background:rgba(160,120,48,.08) !important; color:#A07830 !important;
}
/* أزرار الإجراءات في البطاقة */
html[data-theme='light'] .tkc-am-btn{
background:#FFFFFF !important; border:1px solid rgba(201,168,76,.14) !important;
}
html[data-theme='light'] .tkc-am-btn:hover{ background:#EFE7D6 !important; border-color:rgba(201,168,76,.30) !important; }
html[data-theme='light'] .tkc-am-edit{ color:#A07830 !important; }
html[data-theme='light'] .tkc-am-pay{ color:#014224 !important; }
html[data-theme='light'] .tkc-am-ref{ color:#CC313D !important; }
html[data-theme='light'] .tkc-am-wa{ color:#1a8a4a !important; }
html[data-theme='light'] .tkc-am-view{ color:#E3A92C !important; }
html[data-theme='light'] .tkc-am-del{ color:#CC313D !important; }
/* شارة الشركة في البطاقة */
html[data-theme='light'] .tkc-company-badge{
background:rgba(201,168,76,.10) !important; color:#E3A92C !important;
border:1px solid rgba(201,168,76,.20) !important;
}
html[data-theme='light'] .tkc-company-contact,
html[data-theme='light'] .tkc-company-vat{ color:#5F584C !important; }
/* مقبض السحب */
html[data-theme='light'] .tkc-drag-handle-mini{ color:#C0BAC6 !important; }
/* ═══════════ عمليات الفحص — التذييل (sf-*) ═══════════ */
html[data-theme='light'] .site-footer-v2{ background:none !important; border:none !important; }
/* sf-content: من البني الداكن إلى أبيض/وردي أنيق */
html[data-theme='light'] .site-footer-v2 .sf-content{
background:linear-gradient(155deg,#FFFFFF,#F2ECE0) !important;
border:1px solid rgba(201,168,76,.12) !important;
box-shadow:0 4px 16px rgba(201,168,76,.06) !important;
}
html[data-theme='light'] .sf-owner{ color:#23201B !important; }
html[data-theme='light'] .sf-cr{ color:#5F584C !important; }
html[data-theme='light'] .sf-brand{ color:#E3A92C !important; }
html[data-theme='light'] .sf-btn.sf-call{ background:rgba(160,120,48,.10) !important; color:#A07830 !important; }
html[data-theme='light'] .sf-btn.sf-wa{ background:rgba(1,66,36,.10) !important; color:#014224 !important; }
html[data-theme='light'] .sf-divider{ background:rgba(201,168,76,.12) !important; }
/* ═══════════ عمليات الفحص — لمسات رقيقة على البطاقة (نهاري) ═══════════ */
/* البطاقة: ظل أنعم وحدود ألطف */
html[data-theme='light'] .tkcard-pro{
box-shadow:0 4px 20px rgba(160,120,48,.07) !important;
border:1px solid rgba(160,120,48,.10) !important;
}
/* الحد الجانبي (accent): أرقّ وبتوهّج ناعم بدل الظل الداكن */
html[data-theme='light'] .tkc-accent{
width:3px !important;
box-shadow:none !important;
opacity:.85 !important;
}
/* بطاقة مدفوعة: لمسة خضراء رقيقة */
html[data-theme='light'] .tkcard-pro.is-paid{
background:radial-gradient(ellipse at right top, rgba(1,66,36,.035), transparent 55%), #FFFFFF !important;
}
/* بطاقة غير مدفوعة: لمسة حمراء رقيقة */
html[data-theme='light'] .tkcard-pro.is-unpaid{
background:radial-gradient(ellipse at right top, rgba(204,49,61,.04), transparent 55%), #FFFFFF !important;
}
/* رقم التذكرة (badge): بنفسجي ناعم متدرّج */
html[data-theme='light'] .tkc-num{
background:linear-gradient(135deg,#6B46C1,#A07830) !important;
color:#fff !important;
box-shadow:0 4px 14px rgba(201,168,76,.25) !important;
}
/* طريقة الدفع (مدى/عمر) chip */
html[data-theme='light'] .tkc-pay-chip,
html[data-theme='light'] .tkc-paymethod{
background:rgba(160,120,48,.07) !important; color:#A07830 !important;
border:1px solid rgba(160,120,48,.16) !important;
}
/* السعر */
html[data-theme='light'] .tkc-price,
html[data-theme='light'] .tkc-amount{ color:#E3A92C !important; }
/* التاريخ والوقت */
html[data-theme='light'] .tkc-datetime,
html[data-theme='light'] .tkc-date,
html[data-theme='light'] .tkc-time{ color:#8A8490 !important; }
/* اسم العميل */
html[data-theme='light'] .tkc-customer-name,
html[data-theme='light'] .tkc-name{ color:#23201B !important; }
/* رقم الهاتف */
html[data-theme='light'] .tkc-phone{ color:#5F584C !important; }
/* ═══════════ عمليات الفحص — زر القائمة في البطاقة (نهاري) ═══════════ */
/* كان بنّياً داكناً جداً — نجعله فاتحاً أنيقاً مناسباً للنهاري */
html[data-theme='light'] .tkc-menu-toggle{
background:linear-gradient(135deg,#FFFFFF,#F5F3FA) !important;
border:1.5px solid rgba(201,168,76,.20) !important;
color:#E3A92C !important;
box-shadow:0 3px 12px rgba(201,168,76,.12),0 0 0 1px rgba(201,168,76,.06) inset !important;
}
html[data-theme='light'] .tkc-menu-toggle:hover{
background:linear-gradient(135deg,#EFE7D6,#F5F3FA) !important;
border-color:rgba(201,168,76,.35) !important;
}
html[data-theme='light'] .tkc-menu-toggle svg{
filter:none !important;
color:#E3A92C !important;
}
html[data-theme='light'] .tkc-menu-toggle::before{
background:radial-gradient(circle at 50% 30%,rgba(201,168,76,.10),transparent 70%) !important;
}
/* ═══════════ الدخل اليومي — لمسات أخيرة على العناصر الفرعية (نهاري) ═══════════ */
/* الشرارة/التوهّج في الهيرو */
html[data-theme='light'] .dyi-hero-spark{ background:rgba(201,168,76,.10) !important; }
/* خط الاسترداد المشطوب: من الذهبي للأحمر الناعم */
html[data-theme='light'] .dyi-mp-ref-cross{ color:#CC313D !important; }
/* إحصاءات الهيرو */
html[data-theme='light'] .dyi-hero-stat{ color:#23201B !important; }
/* نقطة "مباشر" */
html[data-theme='light'] .dyi-live-dot{ background:#1a8a4a !important; box-shadow:0 0 0 3px rgba(1,66,36,.12) !important; }
/* شارة القرص */
html[data-theme='light'] .dyi-dp-badge{ color:#1a8a4a !important; }
/* نقطة eyebrow */
html[data-theme='light'] .dyi-eb-dot{ background:#E3A92C !important; }
/* تفصيل طريقة الدفع */
html[data-theme='light'] .dyi-mp-breakdown,
html[data-theme='light'] .dyi-mp-top{ color:#5F584C !important; }
/* تباين أوضح: حدود ألطف وظل أنعم على البطاقات الرئيسية */
html[data-theme='light'] .dyi-sec,
html[data-theme='light'] .dyi-card,
html[data-theme='light'] .dyi-sec-card{ border-color:rgba(160,120,48,.10) !important; }
/* ════════════════════════════════════════════════════════════════
🕊️ الدخل اليومي — وضع نهاري رقيق وهادئ (تهدئة الألوان)
نهج موحّد: خلفيات بيضاء/رمادية ناعمة · نصوص رمادية · لمسة بنفسجية خفيفة فقط
════════════════════════════════════════════════════════════════ */
/* الهيرو: تدرّج هادئ جداً (أبيض → رمادي فاتح) بلمسة بنفسجية خفيفة */
html[data-theme='light'] .dyi-hero{
background:linear-gradient(160deg,#FFFFFF 0%,#F6F0E3 100%) !important;
border:1px solid rgba(201,168,76,.12) !important;
box-shadow:0 4px 20px rgba(40,40,60,.05) !important;
}
html[data-theme='light'] .dyi-hero-bg-orb{ background:radial-gradient(circle, rgba(201,168,76,.05), transparent 70%) !important; }
html[data-theme='light'] .exh-hero{
background:linear-gradient(160deg,#FFFFFF 0%,#F6F0E3 100%) !important;
border:1px solid rgba(201,168,76,.12) !important;
box-shadow:0 4px 20px rgba(40,40,60,.05) !important;
}
html[data-theme='light'] .exh-hero-bg-1,
html[data-theme='light'] .exh-hero-bg-2,
html[data-theme='light'] .exh-hero-bg-3{ background:radial-gradient(circle, rgba(201,168,76,.04), transparent 70%) !important; }
html[data-theme='light'] .insp-hero{
background:linear-gradient(160deg,#FFFFFF 0%,#F6F0E3 100%) !important;
border:1px solid rgba(201,168,76,.12) !important;
box-shadow:0 4px 20px rgba(40,40,60,.05) !important;
}
html[data-theme='light'] .insp-hero-orb-1,
html[data-theme='light'] .insp-hero-orb-2{ background:radial-gradient(circle, rgba(201,168,76,.04), transparent 70%) !important; }
/* البطاقات والأقسام: حدود رمادية محايدة ناعمة، ظل خفيف موحّد */
html[data-theme='light'] .dyi-sec,
html[data-theme='light'] .dyi-card,
html[data-theme='light'] .dyi-sec-card,
html[data-theme='light'] .dyi-mp,
html[data-theme='light'] .dyi-nav,
html[data-theme='light'] .exp2-card{
background:#FFFFFF !important;
border:1px solid rgba(40,40,60,.08) !important;
box-shadow:0 2px 10px rgba(40,40,60,.04) !important;
}
/* الصفوف: خلفية رمادية فاتحة جداً موحّدة (بلا أخضر/أحمر صاخب) */
html[data-theme='light'] .dyi-svc-row,
html[data-theme='light'] .dyi-out-row{
background:#F6F0E3 !important;
border:1px solid rgba(40,40,60,.06) !important;
}
html[data-theme='light'] .dyi-svc-row:hover,
html[data-theme='light'] .dyi-out-row:hover{ background:#F5F5F8 !important; }
/* القيم: لون موحّد هادئ (رمادي داكن) — لمسة لونية خفيفة فقط للأرقام المهمة */
html[data-theme='light'] .dyi-svc-val{ color:#23201B !important; }
html[data-theme='light'] .dyi-out-val{ color:#9A7070 !important; } /* أحمر مكتوم */
html[data-theme='light'] .dyi-mp-val{ color:#23201B !important; }
html[data-theme='light'] .dyi-mp-ref{ color:#B08585 !important; } /* أحمر مكتوم */
html[data-theme='light'] .dyi-mp-ref-cross{ color:#B08585 !important; }
/* صف الصافي: لمسة بنفسجية خفيفة موحّدة (بدل الأخضر الصاخب) */
html[data-theme='light'] .dyi-net-row,
html[data-theme='light'] .dyi-net-side{
background:linear-gradient(135deg,rgba(201,168,76,.05),rgba(201,168,76,.01)) !important;
border:1px solid rgba(201,168,76,.14) !important;
}
html[data-theme='light'] .dyi-net-val{ color:#E3A92C !important; }
html[data-theme='light'] .dyi-side-vat{
background:#F6F0E3 !important; border:1px solid rgba(40,40,60,.08) !important;
color:#5F584C !important;
}
/* أقراص الأيام: محايدة، النشط بلمسة بنفسجية خفيفة */
html[data-theme='light'] .dyi-day-pill{
background:#F6F0E3 !important; color:#5A5560 !important;
border:1px solid rgba(40,40,60,.08) !important;
}
html[data-theme='light'] .dyi-day-pill.on,
html[data-theme='light'] .dyi-day-pill.active{
background:rgba(201,168,76,.08) !important; color:#E3A92C !important;
border-color:rgba(201,168,76,.25) !important;
}
/* الأيقونات والنقاط: بنفسجي هادئ موحّد (بدل أخضر/أحمر متعدد) */
html[data-theme='light'] .dyi-live-dot{ background:#5F584C !important; box-shadow:0 0 0 3px rgba(201,168,76,.08) !important; }
html[data-theme='light'] .dyi-dp-badge{ color:#9690A0 !important; }
html[data-theme='light'] .dyi-eb-dot{ background:#E3A92C !important; }
html[data-theme='light'] .dyi-info-chip{ background:rgba(201,168,76,.06) !important; color:#5F584C !important; }
html[data-theme='light'] .dyi-hero-chip{ background:rgba(201,168,76,.06) !important; color:#5F584C !important; border:1px solid rgba(201,168,76,.14) !important; }
html[data-theme='light'] .dyi-display-tag{ background:rgba(201,168,76,.06) !important; color:#5F584C !important; }
/* العنوان الرئيسي للهيرو: بنفسجي هادئ (بدل التدرّجات) */
html[data-theme='light'] .dyi-hero-main{ color:#E3A92C !important; }
html[data-theme='light'] .exh-hero-title{ color:#E3A92C !important; }
html[data-theme='light'] .exh-hero-ico,
html[data-theme='light'] .exp2-head-ico,
html[data-theme='light'] .dyi-day-today-btn{
background:linear-gradient(135deg,#5F584C,#E3A92C) !important; color:#fff !important;
}
/* ════════════════════════════════════════════════════════════════════════
🎨✨ الدخل اليومي — نظام لوني أحادي هادئ راقٍ (نهاري) — التصميم النهائي
فلسفة: بنفسجي مكتوم واحد + محايدات رمادية + إشارتان دلاليتان مكتومتان فقط
──────────────────────────────────────────────────────────────────────
اللوحة:
• أساسي: #6B5B95 (بنفسجي مكتوم راقٍ) · فاتح: #8B7FB0
• محايد: نص #2D2A32 / ثانوي #847E8C / باهت #B0AAB8
• أسطح: #FFFFFF / #FAFAFB / حدود rgba(45,42,50,.07)
• موجب: #5E8B7E (أخضر مريمي مكتوم) · سالب: #B07D6E (تيراكوتا مكتوم)
════════════════════════════════════════════════════════════════════════ */
/* ═══ الأسطح: كل البطاقات والحاويات بيضاء بحدود محايدة موحّدة ═══ */
html[data-theme='light'] .dyi-hero,
html[data-theme='light'] .dyi-nav,
html[data-theme='light'] .dyi-sec,
html[data-theme='light'] .dyi-card,
html[data-theme='light'] .dyi-sec-card,
html[data-theme='light'] .dyi-mp,
html[data-theme='light'] .dyi-net-card,
html[data-theme='light'] .dyi-close-banner,
html[data-theme='light'] .dyi-xrefund-note{
background:#FFFFFF !important;
border:1px solid rgba(45,42,50,.08) !important;
box-shadow:0 2px 12px rgba(45,42,50,.04) !important;
}
/* الهيرو: لمسة تدرّج بنفسجية شفّافة خفيفة جداً */
html[data-theme='light'] .dyi-hero{
background:linear-gradient(165deg,#FFFFFF 0%,#FBFAFD 100%) !important;
border:1px solid rgba(107,91,149,.14) !important;
}
html[data-theme='light'] .dyi-hero-bg-orb,
html[data-theme='light'] .dyi-spark-bar{ background:radial-gradient(circle,rgba(107,91,149,.05),transparent 70%) !important; }
/* ═══ النصوص: نظام محايد موحّد ═══ */
html[data-theme='light'] .dyi-hero-main,
html[data-theme='light'] .dyi-net-result,
html[data-theme='light'] .dyi-mp-val,
html[data-theme='light'] .dyi-svc-val{ color:#23201B !important; }
html[data-theme='light'] .dyi-hero-label,
html[data-theme='light'] .dyi-hero-sub,
html[data-theme='light'] .dyi-hero-unit,
html[data-theme='light'] .dyi-hero-sep,
html[data-theme='light'] .dyi-hero-mode-hint,
html[data-theme='light'] .dyi-mp-name,
html[data-theme='light'] .dyi-mp-top,
html[data-theme='light'] .dyi-mp-breakdown,
html[data-theme='light'] .dyi-nav-date,
html[data-theme='light'] .dyi-side-net-note{ color:#5F584C !important; }
html[data-theme='light'] .dyi-dp-num,
html[data-theme='light'] .dyi-dp-badge,
html[data-theme='light'] .dyi-mp-orig{ color:#B0AAB8 !important; }
/* ═══ اللون الأساسي البنفسجي المكتوم: للعناوين والعناصر المميّزة ═══ */
html[data-theme='light'] .dyi-net-title,
html[data-theme='light'] .dyi-close-title,
html[data-theme='light'] .dyi-close-text,
html[data-theme='light'] .dyi-sec-title{ color:#5F584C !important; }
html[data-theme='light'] .dyi-info-chip,
html[data-theme='light'] .dyi-hero-chip,
html[data-theme='light'] .dyi-display-tag,
html[data-theme='light'] .dyi-hero-mode-hint{
background:rgba(107,91,149,.07) !important; color:#5F584C !important;
border:1px solid rgba(107,91,149,.14) !important;
}
/* أيقونات بتدرّج بنفسجي مكتوم موحّد */
html[data-theme='light'] .dyi-net-ico,
html[data-theme='light'] .dyi-svc-ico,
html[data-theme='light'] .dyi-day-today-btn,
html[data-theme='light'] .dyi-close-icon,
html[data-theme='light'] .dyi-xrefund-ico{
background:linear-gradient(135deg,#5F584C,#5F584C) !important; color:#FFFFFF !important;
}
/* أشرطة التقدّم: بنفسجي مكتوم */
html[data-theme='light'] .dyi-svc-bar-fill{ background:linear-gradient(90deg,#5F584C,#5F584C) !important; }
/* ═══ الأقراص والأزرار: محايدة، النشط بنفسجي مكتوم خفيف ═══ */
html[data-theme='light'] .dyi-nav-btn{
background:rgba(107,91,149,.06) !important; color:#5F584C !important;
border:1px solid rgba(107,91,149,.12) !important;
}
html[data-theme='light'] .dyi-nav-btn:hover{ background:rgba(107,91,149,.12) !important; }
html[data-theme='light'] .dyi-day-pill{
background:#FAFAFB !important; color:#5F584C !important;
border:1px solid rgba(45,42,50,.08) !important;
}
html[data-theme='light'] .dyi-day-pill:hover{ background:rgba(107,91,149,.06) !important; border-color:rgba(107,91,149,.20) !important; }
html[data-theme='light'] .dyi-day-pill.on,
html[data-theme='light'] .dyi-day-pill.active{
background:rgba(107,91,149,.10) !important; color:#5F584C !important;
border-color:rgba(107,91,149,.28) !important;
}
/* ═══ الصفوف: خلفية محايدة فاتحة جداً موحّدة ═══ */
html[data-theme='light'] .dyi-svc-row,
html[data-theme='light'] .dyi-out-row,
html[data-theme='light'] .dyi-mp{
background:#FAFAFB !important; border:1px solid rgba(45,42,50,.06) !important;
}
html[data-theme='light'] .dyi-svc-row:hover,
html[data-theme='light'] .dyi-out-row:hover{ background:#F4F3F6 !important; }
/* ═══ الإشارتان الدلاليتان المكتومتان فقط (موجب/سالب) ═══ */
/* موجب — أخضر مريمي مكتوم */
html[data-theme='light'] .dyi-net-pos,
html[data-theme='light'] .dyi-status-live,
html[data-theme='light'] .dyi-live-dot{ color:#5E8B7E !important; }
html[data-theme='light'] .dyi-live-dot{ background:#5E8B7E !important; box-shadow:0 0 0 3px rgba(94,139,126,.10) !important; }
/* سالب/استرداد — تيراكوتا مكتوم */
html[data-theme='light'] .dyi-net-neg,
html[data-theme='light'] .dyi-out-val,
html[data-theme='light'] .dyi-mp-ref,
html[data-theme='light'] .dyi-mp-ref-cross,
html[data-theme='light'] .dyi-xrefund-s,
html[data-theme='light'] .dyi-xrefund-hint{ color:#B07D6E !important; }
/* قيمة الصافي: ملوّنة حسب الإشارة بمكتوم */
html[data-theme='light'] .dyi-net-row-val{ color:#23201B !important; }
/* ═══ بطاقة الصافي: لمسة بنفسجية مكتومة موحّدة ═══ */
html[data-theme='light'] .dyi-net-card,
html[data-theme='light'] .dyi-net-row,
html[data-theme='light'] .dyi-net-side,
html[data-theme='light'] .dyi-net-result,
html[data-theme='light'] .dyi-net-info{
background:linear-gradient(135deg,rgba(107,91,149,.05),rgba(107,91,149,.01)) !important;
border:1px solid rgba(107,91,149,.14) !important;
}
html[data-theme='light'] .dyi-net-result{ color:#5F584C !important; }
/* الصناديق الجانبية (نقدي/بنكي): محايدة بلمسة بنفسجية */
html[data-theme='light'] .dyi-side-cash,
html[data-theme='light'] .dyi-side-bank,
html[data-theme='light'] .dyi-net-side-cash,
html[data-theme='light'] .dyi-net-side-bank,
html[data-theme='light'] .dyi-side-vat{
background:#FAFAFB !important; border:1px solid rgba(45,42,50,.08) !important;
color:#5F584C !important;
}
/* ═══ بطاقة إغلاق اليوم / الاسترداد: بنفسجي مكتوم موحّد ═══ */
html[data-theme='light'] .dyi-xrefund-body,
html[data-theme='light'] .dyi-xrefund-t{ color:#23201B !important; }
html[data-theme='light'] .dyi-xrefund-note,
html[data-theme='light'] .dyi-side-net-note{
background:rgba(107,91,149,.05) !important; border:1px solid rgba(107,91,149,.12) !important;
}
/* ════════════════════════════════════════════════════════════════════════
🚀 إعدادات المركز — التصميم النهائي الموحّد (نظيف · مستقبلي · ليلي+نهاري)
كتلة واحدة شاملة — تستبدل كل ما سبق
════════════════════════════════════════════════════════════════════════ */
/* ═══ كسر اللوحة: صفحة ممتدة بهامش ضئيل ═══ */
#dash-pane-center{ padding:0 !important; margin:0 !important; gap:0 !important; }
#dash-pane-center .center-profile-v2{
background:transparent !important; border:none !important; border-radius:0 !important;
max-width:none !important; margin:0 !important; overflow:visible !important; position:relative;
}
#dash-pane-center .center-profile-v2::before{
content:''; position:absolute; inset:-30px -10px 0; z-index:0; pointer-events:none;
background:radial-gradient(circle at 20% 0%, rgba(227,169,44,.10), transparent 50%), radial-gradient(circle at 80% 5%, rgba(160,120,48,.08), transparent 50%);
}
html[data-theme='light'] #dash-pane-center .center-profile-v2::before{
background:radial-gradient(circle at 20% 0%, rgba(107,91,149,.07), transparent 50%), radial-gradient(circle at 80% 5%, rgba(160,120,48,.05), transparent 50%);
}
/* ═══ البطاقة الموحّدة: غلاف + هوية كوحdة واحدة (هامش صغير) ═══ */
#dash-pane-center .cpv-hero{
position:relative !important; z-index:5 !important;
height:150px !important; min-height:0 !important;
margin:0 8px !important;
border-radius:22px 22px 0 0 !important; overflow:hidden !important;
box-shadow:none !important;
}
#dash-pane-center .cpv-cover{
position:absolute !important; inset:0 !important;
background:linear-gradient(135deg, #7C3AED 0%, #E3A92C 40%, #A07830 100%) !important;
pointer-events:none !important;
}
html[data-theme='light'] #dash-pane-center .cpv-cover{
background:linear-gradient(135deg, #8B5CF6 0%, #5F584C 45%, #A07830 100%) !important;
}
#dash-pane-center .cpv-cover-overlay{
position:absolute !important; inset:0 !important; pointer-events:none !important;
background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.2) 100%) !important;
}
#dash-pane-center .cpv-cover-pattern{
position:absolute !important; inset:0 !important; pointer-events:none !important;
background-image:linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) !important;
background-size:30px 30px !important; opacity:.5 !important;
-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%); mask-image:linear-gradient(180deg,#000,transparent 85%);
}
/* زر تغيير الغلاف — فوق كل شيء، يستجيب للنقر */
#dash-pane-center .cpv-cover-actions{
position:absolute !important; top:14px !important; right:14px !important;
z-index:20 !important; pointer-events:auto !important; display:flex; gap:8px;
}
#dash-pane-center .cpv-cover-btn{
pointer-events:auto !important; cursor:pointer !important;
white-space:nowrap !important; display:inline-flex; align-items:center; gap:6px;
padding:9px 14px !important; border-radius:12px !important;
font-size:12px !important; font-weight:700 !important;
background:rgba(0,0,0,.4) !important; color:#fff !important;
border:1px solid rgba(255,255,255,.2) !important;
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
html[data-theme='light'] #dash-pane-center .cpv-cover-btn{ background:rgba(255,255,255,.92) !important; color:#23201B !important; }
#dash-pane-center .cpv-cover-rm, #dash-pane-center #cp-cover-rm{ display:none !important; }
/* ═══ بطاقة الهوية: متصلة بالغلاف · شعار يمين · هامش صغير ═══ */
#dash-pane-center .cpv-identity{
position:relative !important; z-index:4 !important;
margin:0 8px 16px !important; padding:0 16px 18px !important;
display:flex !important; flex-direction:row !important; align-items:flex-end !important; gap:16px !important;
background:rgba(255,255,255,.05) !important;
-webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
border:1px solid rgba(255,255,255,.1) !important; border-top:none !important;
border-radius:0 0 22px 22px !important;
box-shadow:0 20px 44px -22px rgba(0,0,0,.45) !important;
}
html[data-theme='light'] #dash-pane-center .cpv-identity{
background:rgba(255,255,255,.88) !important; border:1px solid rgba(45,42,50,.07) !important; border-top:none !important;
box-shadow:0 20px 44px -22px rgba(201,168,76,.2) !important;
}
/* الشعار: أول عنصر = يمين (RTL)، يبرز فوق حدّ الغلاف */
#dash-pane-center .cpv-logo-wrap{
order:0 !important; position:relative !important; z-index:6 !important;
width:92px !important; height:92px !important; flex-shrink:0 !important;
margin-top:-46px !important;
}
#dash-pane-center .cpv-logo{
width:92px !important; height:92px !important; border-radius:22px !important;
border:4px solid #1a1a2e !important;
box-shadow:0 8px 24px rgba(227,169,44,.35) !important;
overflow:hidden;
}
html[data-theme='light'] #dash-pane-center .cpv-logo{ border-color:#fff !important; box-shadow:0 8px 24px rgba(107,91,149,.22) !important; }
/* زر كاميرا الشعار: زاوية أنيقة، يستجيب */
#dash-pane-center .cpv-logo-edit{
position:absolute !important; bottom:-4px !important; left:-4px !important; right:auto !important;
z-index:11 !important; pointer-events:auto !important; cursor:pointer !important;
width:32px !important; height:32px !important; border-radius:50% !important;
display:flex !important; align-items:center !important; justify-content:center !important;
background:linear-gradient(135deg,#7C3AED,#E3A92C) !important; color:#fff !important;
border:3px solid #1a1a2e !important; box-shadow:0 4px 12px rgba(227,169,44,.45) !important;
transition:transform .2s !important;
}
html[data-theme='light'] #dash-pane-center .cpv-logo-edit{ background:linear-gradient(135deg,#5F584C,#A07830) !important; border-color:#fff !important; }
#dash-pane-center .cpv-logo-edit:hover{ transform:scale(1.1) !important; }
#dash-pane-center .cpv-logo-rm, #dash-pane-center #cp-logo-rm{
position:absolute !important; top:-6px !important; left:-6px !important; right:auto !important;
width:24px !important; height:24px !important; border-radius:50% !important; z-index:7 !important;
border:2px solid #1a1a2e !important;
}
html[data-theme='light'] #dash-pane-center .cpv-logo-rm{ border-color:#fff !important; }
/* النص: على اليسار، محاذاة سفلية */
#dash-pane-center .cpv-identity-text{
order:1 !important; flex:1 !important; min-width:0 !important;
display:flex !important; flex-direction:column !important; align-items:flex-start !important;
text-align:right !important; gap:9px !important; padding-bottom:4px !important;
}
#dash-pane-center .cpv-name{
margin:0 !important; line-height:1.2 !important; font-size:21px !important; font-weight:900 !important;
color:#FFFFFF !important;
background:none !important;
-webkit-text-fill-color:#FFFFFF !important;
}
html[data-theme='light'] #dash-pane-center .cpv-name{
color:#23201B !important; background:none !important; -webkit-text-fill-color:#23201B !important;
}
#dash-pane-center .cpv-meta{ display:flex !important; flex-wrap:wrap !important; gap:12px !important; align-items:center !important; }
#dash-pane-center .cpv-meta-item{ display:inline-flex !important; align-items:center !important; gap:5px !important; font-size:12px !important; white-space:nowrap !important; color:var(--t3) !important; }
html[data-theme='light'] #dash-pane-center .cpv-meta-item{ color:#5F584C !important; }
#dash-pane-center .cpv-cloud-status{
display:inline-flex !important; width:auto !important; align-self:flex-start !important;
padding:6px 13px !important; border-radius:50px !important;
background:rgba(94,139,126,.15) !important; border:1px solid rgba(94,139,126,.3) !important;
font-size:11.5px !important; font-weight:700 !important;
}
/* ═══ التبويبات: شريط زجاجي · هامش صغير ═══ */
#dash-pane-center .cpv-tabs{
margin:0 8px 16px !important; padding:6px !important;
display:flex; flex-wrap:wrap; gap:5px !important;
background:rgba(255,255,255,.05) !important; border:1px solid rgba(255,255,255,.1) !important;
border-bottom:1px solid rgba(255,255,255,.1) !important; border-radius:16px !important;
-webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
}
html[data-theme='light'] #dash-pane-center .cpv-tabs{ background:rgba(255,255,255,.7) !important; border:1px solid rgba(45,42,50,.06) !important; }
#dash-pane-center .cpv-tab{
flex:1; justify-content:center; min-width:max-content;
padding:10px 14px !important; border-radius:12px !important;
font-size:12.5px !important; font-weight:800 !important; color:var(--t3) !important;
background:transparent !important; border:none !important;
}
#dash-pane-center .cpv-tab::after{ display:none !important; }
#dash-pane-center .cpv-tab.on{
background:linear-gradient(135deg, #7C3AED, #A07830) !important; color:#fff !important;
box-shadow:0 6px 18px -4px rgba(227,169,44,.5) !important;
}
html[data-theme='light'] #dash-pane-center .cpv-tab{ color:#5F584C !important; }
html[data-theme='light'] #dash-pane-center .cpv-tab.on{ background:linear-gradient(135deg, #5F584C, #A07830) !important; color:#fff !important; }
/* ═══ الجسم والأقسام: هامش صغير · بطاقات زجاجية ═══ */
#dash-pane-center .cpv-body{ padding:0 8px 110px !important; }
#dash-pane-center .cpv-section{
position:relative; margin-bottom:16px !important; border-radius:20px !important; overflow:hidden !important;
background:rgba(255,255,255,.04) !important; border:1px solid rgba(255,255,255,.09) !important;
-webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
box-shadow:0 10px 34px -16px rgba(0,0,0,.35) !important;
transition:transform .3s, box-shadow .3s !important;
}
#dash-pane-center .cpv-section::before{
content:''; position:absolute; top:0; left:0; right:0; height:2px;
background:linear-gradient(90deg, transparent, #7C3AED, #A07830, transparent); opacity:.7;
}
#dash-pane-center .cpv-section:hover{ transform:translateY(-2px) !important; box-shadow:0 18px 44px -16px rgba(227,169,44,.3) !important; }
html[data-theme='light'] #dash-pane-center .cpv-section{ background:rgba(255,255,255,.85) !important; border:1px solid rgba(45,42,50,.06) !important; box-shadow:0 10px 34px -16px rgba(201,168,76,.12) !important; }
html[data-theme='light'] #dash-pane-center .cpv-section::before{ background:linear-gradient(90deg, transparent, #5F584C, #A07830, transparent); }
#dash-pane-center .cpv-section-h{ padding:16px 18px !important; background:transparent !important; border-bottom:1px solid rgba(255,255,255,.07) !important; }
html[data-theme='light'] #dash-pane-center .cpv-section-h{ border-bottom:1px solid rgba(45,42,50,.05) !important; }
#dash-pane-center .cpv-section-ico{ width:40px !important; height:40px !important; border-radius:13px !important; background:linear-gradient(135deg, #7C3AED, #A07830) !important; color:#fff !important; box-shadow:0 6px 16px -4px rgba(227,169,44,.5) !important; }
html[data-theme='light'] #dash-pane-center .cpv-section-ico{ background:linear-gradient(135deg, #5F584C, #A07830) !important; }
#dash-pane-center .cpv-section-title{ color:var(--t1) !important; font-weight:800 !important; font-size:15px !important; }
html[data-theme='light'] #dash-pane-center .cpv-section-title{ color:#23201B !important; }
#dash-pane-center .cpv-fields{ padding:18px !important; }
/* ═══ الحقول: مستقبلية بتوهّج focus ═══ */
#dash-pane-center .cpv-fields label, #dash-pane-center .cpv-field label{
color:var(--t2) !important; font-size:11.5px !important; font-weight:700 !important; margin-bottom:8px !important;
}
html[data-theme='light'] #dash-pane-center .cpv-fields label, html[data-theme='light'] #dash-pane-center .cpv-field label{ color:#5F584C !important; }
#dash-pane-center .cpv-fields input, #dash-pane-center .cpv-fields textarea, #dash-pane-center .cpv-fields select,
#dash-pane-center .cpv-field input, #dash-pane-center .cpv-field textarea{
background:rgba(255,255,255,.04) !important; border:1.5px solid rgba(255,255,255,.1) !important;
border-radius:13px !important; padding:13px 15px !important; font-size:13.5px !important; color:var(--t1) !important;
transition:all .25s !important;
}
html[data-theme='light'] #dash-pane-center .cpv-fields input, html[data-theme='light'] #dash-pane-center .cpv-fields textarea, html[data-theme='light'] #dash-pane-center .cpv-fields select, html[data-theme='light'] #dash-pane-center .cpv-field input, html[data-theme='light'] #dash-pane-center .cpv-field textarea{
background:#FBFAFD !important; border:1.5px solid rgba(45,42,50,.1) !important; color:#23201B !important;
}
#dash-pane-center .cpv-fields input:focus, #dash-pane-center .cpv-fields textarea:focus, #dash-pane-center .cpv-fields select:focus, #dash-pane-center .cpv-field input:focus{
border-color:#7C3AED !important; box-shadow:0 0 0 4px rgba(227,169,44,.15) !important; outline:none !important;
}
html[data-theme='light'] #dash-pane-center .cpv-fields input:focus, html[data-theme='light'] #dash-pane-center .cpv-field input:focus{ border-color:#5F584C !important; box-shadow:0 0 0 4px rgba(107,91,149,.12) !important; background:#fff !important; }
#dash-pane-center .cpv-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
/* ═══ زر الحفظ ═══ */
#dash-pane-center #cp-save-btn, #dash-pane-center .cpv-save-btn{
background:linear-gradient(135deg, #7C3AED, #A07830) !important; color:#fff !important; border:none !important;
border-radius:15px !important; padding:15px !important; font-weight:800 !important;
box-shadow:0 12px 30px -8px rgba(227,169,44,.55) !important; transition:transform .2s !important;
}
#dash-pane-center #cp-save-btn:hover{ transform:translateY(-2px) !important; }
html[data-theme='light'] #dash-pane-center #cp-save-btn{ background:linear-gradient(135deg, #5F584C, #A07830) !important; }
/* ═══ تجاوب الجوال: هامش أدنى · شعار يتمركز ═══ */
@media(max-width:768px){
#dash-pane-center .cpv-hero{ height:130px !important; margin:0 4px !important; border-radius:18px 18px 0 0 !important; }
#dash-pane-center .cpv-identity{
margin:0 4px 14px !important; padding:0 14px 16px !important;
flex-direction:column !important; align-items:center !important; text-align:center !important;
border-radius:0 0 18px 18px !important;
}
#dash-pane-center .cpv-logo-wrap{ order:0 !important; margin-top:-46px !important; }
#dash-pane-center .cpv-identity-text{ order:1 !important; align-items:center !important; text-align:center !important; padding-bottom:0 !important; }
#dash-pane-center .cpv-meta{ justify-content:center !important; }
#dash-pane-center .cpv-cloud-status{ align-self:center !important; }
#dash-pane-center .cpv-tabs{ margin:0 4px 14px !important; }
#dash-pane-center .cpv-body{ padding:0 4px 110px !important; }
#dash-pane-center .cpv-fields{ padding:16px 14px !important; }
#dash-pane-center .cpv-grid-2{ grid-template-columns:1fr !important; }
}
@media(max-width:480px){
#dash-pane-center .cpv-hero{ margin:0 2px !important; }
#dash-pane-center .cpv-identity{ margin:0 2px 12px !important; padding:0 12px 14px !important; }
#dash-pane-center .cpv-tabs{ margin:0 2px 12px !important; }
#dash-pane-center .cpv-body{ padding:0 2px 105px !important; }
}
/* ════════════════════════════════════════════════════════════════════════
🔧 إعدادات المركز — إصلاحات نهائية: زر الحفظ + الشعار المقصوص
════════════════════════════════════════════════════════════════════════ */
/* ① زر الحفظ: كان sticky bottom فيختفي خلف شريط التنقل/في الأقسام القصيرة.
نجعله عادياً يظهر دائماً بوضوح بعد المحتوى */
#dash-pane-center .cpv-save-bar{
position:relative !important;
bottom:auto !important;
margin:8px 8px 24px !important;
padding:16px 18px !important;
border-radius:18px !important;
background:rgba(227,169,44,.08) !important;
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
border:1px solid rgba(227,169,44,.2) !important;
display:flex !important; align-items:center !important; justify-content:space-between !important;
gap:14px !important; flex-wrap:wrap;
z-index:8 !important;
}
html[data-theme='light'] #dash-pane-center .cpv-save-bar{
background:rgba(107,91,149,.06) !important; border:1px solid rgba(107,91,149,.18) !important;
}
#dash-pane-center .cpv-save-info{ display:flex; align-items:center; gap:8px; font-size:11.5px !important; color:var(--t3) !important; flex:1; min-width:160px; }
html[data-theme='light'] #dash-pane-center .cpv-save-info{ color:#5F584C !important; }
#dash-pane-center .cpv-save-btn{
flex-shrink:0 !important;
background:linear-gradient(135deg, #7C3AED, #A07830) !important; color:#fff !important; border:none !important;
border-radius:14px !important; padding:13px 22px !important; font-weight:800 !important; font-size:13.5px !important;
display:inline-flex; align-items:center; gap:7px; cursor:pointer;
box-shadow:0 10px 26px -8px rgba(227,169,44,.55) !important; transition:transform .2s !important;
}
#dash-pane-center .cpv-save-btn:hover{ transform:translateY(-2px) !important; }
html[data-theme='light'] #dash-pane-center .cpv-save-btn{ background:linear-gradient(135deg, #5F584C, #A07830) !important; }
/* ② الشعار المقصوص: السبب أن cpv-hero فيه overflow:hidden يقص الشعار البارز.
الحل: نسمح للشعار بالظهور فوق حدّ الغلاف (الشعار في identity وليس hero، فالمشكلة أن identity يبدأ بعد hero والشعار يرتفع لكن hero يقصه).
نضمن أن لا شيء يقص الشعار */
#dash-pane-center .cpv-identity{ overflow:visible !important; }
#dash-pane-center .cpv-logo-wrap{ overflow:visible !important; }
#dash-pane-center .cpv-logo{ overflow:hidden !important; }
/* الشعار يرتفع فوق الغلاف: نرفع z-index ونتأكd أن hero لا يقصه (الشعار خارج hero أصلاً) */
#dash-pane-center .cpv-logo-wrap{ margin-top:-46px !important; position:relative !important; z-index:9 !important; }
/* ════════════════════════════════════════════════════════════════════════
🔧 إعدادات المركز — إصلاح قص الشعار (ترتيب الطبقات النهائي)
السبب: الغلاف (z:5) يرسم فوق النصف العلوي من الشعار البارز.
الحل: رفع البطاقة كاملة + الشعار فوق الغلاف
════════════════════════════════════════════════════════════════════════ */
/* البطاقة (الهوية) فوق الغلاف بصرياً — فالشعار البارز لا يُقص */
#dash-pane-center .cpv-identity{ z-index:10 !important; }
/* لكن أزرار الغلاف يجب أن تبقى قابلة للنقر فوق الغلاف نفسه (ليست فوق البطاقة) */
#dash-pane-center .cpv-cover-actions{ z-index:11 !important; }
/* الشعار فوق كل شيء */
#dash-pane-center .cpv-logo-wrap{ z-index:12 !important; }
#dash-pane-center .cpv-logo-edit{ z-index:13 !important; }
/* الغلاف يبقى أسفل البطاقة */
#dash-pane-center .cpv-hero{ z-index:3 !important; }
/* ════════════════════════════════════════════════════════════════════════
🔧 إعدادات المركز — إصلاح إطار الشعار + ملء الصورة + زر الحفظ (نهائي)
════════════════════════════════════════════════════════════════════════ */
/* ① الشعار: إطار متساوٍ من كل الجهات + الصورة تملأ بالكامل */
#dash-pane-center .cpv-logo{
width:92px !important; height:92px !important;
border-radius:22px !important;
border:4px solid #1a1a2e !important;
box-sizing:border-box !important;
overflow:hidden !important;
display:flex !important; align-items:center !important; justify-content:center !important;
background:#1a1a2e !important;
padding:0 !important;
}
html[data-theme='light'] #dash-pane-center .cpv-logo{ border-color:#fff !important; background:#fff !important; }
/* الصورة داخل الشعار: تملأ الإطار بالكامل بلا فراغ */
#dash-pane-center .cpv-logo img{
width:100% !important; height:100% !important;
object-fit:cover !important;
border-radius:18px !important;
display:block !important;
}
/* ② زر الحفظ: ضمان الظهور المطلق (قد يكون مخفياً بقاعدة قديمة) */
#dash-pane-center .cpv-save-bar{
display:flex !important;
visibility:visible !important;
opacity:1 !important;
position:relative !important;
bottom:auto !important; top:auto !important;
margin:8px 8px 28px !important;
}
#dash-pane-center .cpv-save-btn{
display:inline-flex !important;
visibility:visible !important;
opacity:1 !important;
}
/* ════════════════════════════════════════════════════════════════════════
🔧 إعدادات المركز — تنسيق أفضل لزر الغلاف + ضمان عمله (كمبيوتر+جوال)
════════════════════════════════════════════════════════════════════════ */
/* زر الغلاف (button الآن): شكل أنيق + يستجيب للنقر بوضوح */
#dash-pane-center button.cpv-cover-btn{
pointer-events:auto !important; cursor:pointer !important;
display:inline-flex !important; align-items:center !important; gap:7px !important;
white-space:nowrap !important;
padding:10px 16px !important; border-radius:13px !important;
font-size:12.5px !important; font-weight:800 !important;
background:rgba(0,0,0,.4) !important; color:#fff !important;
border:1px solid rgba(255,255,255,.25) !important;
-webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
box-shadow:0 4px 16px rgba(0,0,0,.3) !important;
transition:all .2s !important;
}
#dash-pane-center button.cpv-cover-btn:hover{
background:rgba(227,169,44,.6) !important;
border-color:rgba(255,255,255,.4) !important;
transform:translateY(-1px) !important;
}
html[data-theme='light'] #dash-pane-center button.cpv-cover-btn{
background:rgba(255,255,255,.92) !important; color:#23201B !important;
border:1px solid rgba(45,42,50,.1) !important;
}
html[data-theme='light'] #dash-pane-center button.cpv-cover-btn:hover{ background:#fff !important; }
/* زر كاميرا الشعار (button): يستجيب */
#dash-pane-center button.cpv-logo-edit{ pointer-events:auto !important; cursor:pointer !important; border:none !important; }
/* ============================================================
MIGRATED FROM home.html — session style blocks (order preserved)
============================================================ */
/* ---- (no-id) ---- */
/* مؤشر بصري على الحافة اليمنى */
#sb-edge-hint{position:fixed;right:0;top:50%;transform:translateY(-50%);width:5px;height:64px;border-radius:50px 0 0 50px;background:rgba(150,150,160,.45);z-index:1499;pointer-events:none;display:none;transition:opacity .3s,background .3s,width .2s;}
@media(max-width:1023px){#sb-edge-hint{display:block;}}
#sb-edge-hint.dragging{background:var(--nvc-accent,#5ec5e0);width:8px;}
/* ---- omar-future2-login ---- */
/* 🆕 إزالة إطار الدخول فقط + إعادة هامش جانبي بسيط جداً لباقي الموقع */
html,body{margin:0 !important;}
body{padding-left:3px !important;padding-right:3px !important;}
#s-login{padding:0 !important;width:100vw !important;}
/* 🆕 الوضع النهاري: تغميق ألوان الرصيد الصافي على البطاقات لتظهر بوضوح (يحفظ الأخضر/الأحمر) */
html[data-theme='light'] .qd-pm-item-val,
html[data-theme='light'] .qd-pm-chan-val,
html[data-theme='light'] .qd-pm-bag-total b{ filter:brightness(.62) saturate(1.55); font-weight:900; }
/* ═══════════════════════════════════════════════════════════════
🛸 شاشة الدخول · "Aurora HUD" — مستقبلي مبتكر · نهاري + ليلي
بصري فقط — لا يمسّ أي id أو دالة. يحترم data-theme. آخر ستايل.
═══════════════════════════════════════════════════════════════ */
/* ليلي (الافتراضي) */
#s-login{
--f-text:#F6F0E3; --f-dim:#9A9285;
--f-card:linear-gradient(180deg,rgba(20,21,28,.66),rgba(13,14,18,.74));
--f-stroke:rgba(201,168,76,.18); --f-input:rgba(13,14,18,.7);
--f-cyan:#E3A92C; --f-violet:#bd7236; --f-blue:#A07830;
--f-grid:rgba(201,168,76,.12); --f-shadow:rgba(0,0,0,.8);
position:relative;overflow:hidden;align-items:center !important;justify-content:center !important;
font-family:'Tajawal','Cairo',sans-serif;
background:
radial-gradient(120% 80% at 50% -12%,rgba(227,169,44,.16),transparent 55%),
radial-gradient(90% 70% at 84% 12%,rgba(241,192,76,.10),transparent 55%),
radial-gradient(85% 70% at 10% 88%,rgba(201,168,76,.10),transparent 55%),
linear-gradient(180deg,#0F1115,#15171C 45%,#0F1115) !important;
}
/* نهاري */
html[data-theme='light'] #s-login{
--f-text:#23201B; --f-dim:#9A9285;
--f-card:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,240,227,.86));
--f-stroke:rgba(201,168,76,.22); --f-input:rgba(255,255,255,.9);
--f-cyan:#E3A92C; --f-violet:#bd7236; --f-blue:#A07830;
--f-grid:rgba(201,168,76,.14); --f-shadow:rgba(160,120,48,.22);
background:
radial-gradient(120% 80% at 50% -12%,rgba(227,169,44,.14),transparent 55%),
radial-gradient(90% 70% at 84% 10%,rgba(241,192,76,.10),transparent 55%),
radial-gradient(85% 70% at 10% 90%,rgba(201,168,76,.10),transparent 55%),
linear-gradient(180deg,#eef4ff,#f5f9ff 45%,#eaf2ff) !important;
}
/* شبكة منظور */
#s-login::before{content:'';position:absolute;left:50%;bottom:-12%;width:240%;height:60%;
transform:translateX(-50%) perspective(520px) rotateX(62deg);
background-image:linear-gradient(var(--f-grid) 1px,transparent 1px),linear-gradient(90deg,var(--f-grid) 1px,transparent 1px);
background-size:46px 46px;
-webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 100%,#000,transparent 75%);
mask-image:radial-gradient(ellipse 60% 80% at 50% 100%,#000,transparent 75%);
animation:f2Grid 7s linear infinite;opacity:.6;pointer-events:none;z-index:0;}
@keyframes f2Grid{from{background-position:0 0,0 0;}to{background-position:0 46px,46px 0;}}
/* جزيئات */
#s-login::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
background-image:
radial-gradient(2px 2px at 20% 30%,var(--f-cyan),transparent),
radial-gradient(2px 2px at 72% 22%,var(--f-violet),transparent),
radial-gradient(1.5px 1.5px at 42% 72%,var(--f-blue),transparent),
radial-gradient(2px 2px at 86% 66%,var(--f-cyan),transparent),
radial-gradient(1.5px 1.5px at 55% 48%,var(--f-violet),transparent);
background-repeat:no-repeat;opacity:.7;animation:f2Twinkle 4.5s ease-in-out infinite;}
@keyframes f2Twinkle{0%,100%{opacity:.35;}50%{opacity:.85;}}
/* أورورا */
#s-login .login-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
#s-login .login-bg-grid{display:none !important;}
#s-login .login-bg-orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;mix-blend-mode:screen;}
#s-login .login-bg-orb-1{width:46vw;height:46vw;max-width:520px;max-height:520px;top:-12%;left:-8%;background:radial-gradient(circle,var(--f-violet),transparent 65%);animation:f2Float 16s ease-in-out infinite;}
#s-login .login-bg-orb-2{width:40vw;height:40vw;max-width:440px;max-height:440px;top:-6%;right:-10%;background:radial-gradient(circle,var(--f-cyan),transparent 65%);animation:f2Float 20s ease-in-out infinite reverse;}
#s-login .login-bg-orb-3{width:42vw;height:42vw;max-width:480px;max-height:480px;bottom:-16%;left:30%;background:radial-gradient(circle,var(--f-blue),transparent 65%);animation:f2Float 24s ease-in-out infinite;}
@keyframes f2Float{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(4%,5%) scale(1.12);}}
/* الحاوية */
#s-login .login-wrap{position:relative;z-index:2;width:100%;max-width:432px;margin:0 auto;padding:22px 18px;animation:f2Rise .7s cubic-bezier(.16,1,.3,1) both;}
/* البطاقة */
#s-login .login-card{position:relative;border-radius:28px !important;overflow:visible !important;
background:var(--f-card) !important;-webkit-backdrop-filter:blur(22px) saturate(140%);backdrop-filter:blur(22px) saturate(140%);
border:1px solid var(--f-stroke) !important;
box-shadow:0 30px 80px -28px var(--f-shadow),inset 0 1px 0 rgba(255,255,255,.14) !important;}
#s-login .login-card::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.4px;
background:conic-gradient(from 0deg,transparent,var(--f-cyan) 60deg,var(--f-violet) 150deg,transparent 210deg,var(--f-blue) 300deg,transparent);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
animation:f2Spin 9s linear infinite;opacity:.85;pointer-events:none;}
@keyframes f2Spin{to{transform:rotate(360deg);}}
@keyframes f2Rise{from{opacity:0;transform:translateY(14px) scale(.99);}to{opacity:1;transform:none;}}
/* الهيرو */
#s-login .login-hero{background:transparent !important;padding:30px 26px 6px !important;border:0 !important;}
#s-login .login-hero-shine{display:none !important;}
#s-login .lh-logo-wrap{position:relative;width:98px;height:98px;margin:0 auto 14px;}
#s-login .lh-logo{position:absolute;inset:11px;border-radius:50%;overflow:hidden;z-index:3;border:1px solid var(--f-stroke);
background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.2),rgba(40,46,90,.5));box-shadow:inset 0 0 18px rgba(227,169,44,.35);}
#s-login .lh-logo-ring{position:absolute;inset:-3px;border-radius:50%;z-index:2;
background:conic-gradient(from 0deg,var(--f-cyan),var(--f-violet),var(--f-blue),var(--f-cyan));
-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 3px));
animation:f2Spin 6s linear infinite;filter:drop-shadow(0 0 8px var(--f-violet));}
#s-login .lh-logo-glow{position:absolute;inset:-20px;border-radius:50%;z-index:1;
background:radial-gradient(circle,var(--f-violet),transparent 70%);filter:blur(14px);opacity:.55;animation:f2Pulse 3.4s ease-in-out infinite;}
@keyframes f2Pulse{0%,100%{opacity:.45;transform:scale(1);}50%{opacity:.9;transform:scale(1.08);}}
#s-login .lh-name{font-family:'Tajawal','Cairo',sans-serif !important;font-weight:800 !important;font-size:25px !important;text-align:center;margin:2px 0 6px;letter-spacing:.4px;
background:linear-gradient(90deg,var(--f-cyan),var(--f-violet) 55%,var(--f-blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--f-violet);}
#s-login .lh-tagline{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--f-dim) !important;font-size:12.5px !important;font-weight:600;text-align:center;}
#s-login .lh-tag-dot{width:7px;height:7px;border-radius:50%;background:var(--f-cyan);box-shadow:0 0 10px var(--f-cyan);animation:f2Pulse 1.8s ease-in-out infinite;}
#s-login .lh-version{font-family:'IBM Plex Mono',monospace !important;font-size:9.5px !important;letter-spacing:2.4px;color:var(--f-dim) !important;text-align:center;margin-top:9px;opacity:.8;text-transform:uppercase;}
/* الجسم */
#s-login .login-body{padding:6px 26px 22px !important;}
/* التبويبات */
#s-login .auth-subtabs,#s-login .auth-subtabs-lux{background:var(--f-input) !important;border:1px solid var(--f-stroke) !important;border-radius:14px !important;padding:5px !important;gap:5px !important;margin-bottom:16px !important;}
#s-login .auth-subtab{border-radius:10px !important;color:var(--f-dim) !important;font-family:'Tajawal',sans-serif !important;font-weight:700 !important;font-size:13px !important;background:transparent !important;border:0 !important;gap:7px;transition:all .25s;}
#s-login .auth-subtab.on{color:#fff !important;background:linear-gradient(135deg,var(--f-violet),var(--f-cyan)) !important;box-shadow:0 6px 16px -6px var(--f-glow,rgba(227,169,44,.6)),inset 0 1px 0 rgba(255,255,255,.25) !important;}
/* الحقول */
#s-login .lg{margin-bottom:14px;}
#s-login .lg>label{color:var(--f-dim) !important;font-size:11.5px !important;font-weight:700 !important;margin-bottom:7px !important;display:block;}
#s-login .lg-input{background:var(--f-input) !important;border:1px solid var(--f-stroke) !important;border-radius:13px !important;transition:border-color .25s,box-shadow .25s,background .25s;}
#s-login .lg-input:focus-within{border-color:var(--f-violet) !important;box-shadow:0 0 0 3px rgba(227,169,44,.18),0 0 22px -4px var(--f-cyan) !important;}
#s-login .lg-input input{background:transparent !important;color:var(--f-text) !important;font-family:'Tajawal','IBM Plex Mono',sans-serif;font-size:14px !important;font-weight:600;}
#s-login .lg-input input::placeholder{color:var(--f-dim) !important;opacity:.6;font-weight:500;}
#s-login .lg-icon{color:var(--f-violet) !important;}
#s-login .lg-input:focus-within .lg-icon{color:var(--f-cyan) !important;}
#s-login .pw-eye{color:var(--f-dim) !important;}
#s-login .pw-eye:hover{color:var(--f-cyan) !important;}
#s-login #otp-code{color:var(--f-cyan) !important;}
/* الأزرار */
#s-login .btn-lg{border-radius:14px !important;font-family:'Tajawal',sans-serif !important;font-weight:800 !important;font-size:14.5px !important;transition:transform .18s,box-shadow .25s;}
#s-login .btn-lg-lux{position:relative;overflow:hidden;color:#fff !important;border:0 !important;background:linear-gradient(120deg,var(--f-violet),var(--f-blue) 55%,var(--f-cyan)) !important;box-shadow:0 12px 30px -10px var(--f-glow,rgba(227,169,44,.7)),inset 0 1px 0 rgba(255,255,255,.28) !important;}
#s-login .btn-lg-lux::after{content:'';position:absolute;top:0;left:-120%;width:58%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:f2Sheen 3.4s ease-in-out infinite;}
@keyframes f2Sheen{0%{left:-120%;}55%{left:150%;}100%{left:150%;}}
#s-login .btn-lg:hover{transform:translateY(-2px);}
#s-login .btn-lg:active{transform:translateY(0);}
#s-login .btn-lg:disabled{opacity:.62;}
#s-login button[onclick="switchAuthSub('signin')"]{background:linear-gradient(135deg,rgba(52,231,228,.14),rgba(227,169,44,.14)) !important;border:1px solid var(--f-stroke) !important;color:var(--f-cyan) !important;border-radius:13px !important;}
/* روابط/أخطاء/فوتر */
#s-login .login-link{color:var(--f-dim) !important;font-weight:700;}
#s-login .login-link:hover{color:var(--f-cyan) !important;}
#s-login #lnk-back-otp{color:var(--f-cyan) !important;}
#s-login .login-err{color:#ff8da3 !important;}
html[data-theme='light'] #s-login .login-err{color:#d63a4f !important;}
#s-login .login-footer-divider{background:linear-gradient(90deg,transparent,var(--f-stroke),transparent) !important;}
#s-login .login-footer-text{color:var(--f-dim) !important;}
#s-login .login-footer-text svg{color:var(--f-cyan) !important;}
#s-login .login-meta{color:var(--f-dim) !important;opacity:.8;margin-top:16px;}
#s-login .login-meta-owner{color:var(--f-violet) !important;font-weight:800;}
#s-login .pending-title{color:var(--f-text) !important;}
#s-login .pending-sub{color:var(--f-dim) !important;}
#s-login .contact-card{background:var(--f-input) !important;border:1px solid var(--f-stroke) !important;}
#s-login .contact-card-phone{color:var(--f-cyan) !important;}
#s-login .auth-form.on{animation:f2Rise .45s cubic-bezier(.16,1,.3,1);}
@media(max-width:480px){#s-login .login-wrap{max-width:100%;padding:16px 14px;}#s-login .lh-name{font-size:22px !important;}}
/* ---- omar-ticket-form ---- */
/* 🆕 توحيد حقول بطاقة بيانات السيارة + توافق الوضع النهاري (بصري فقط) */
.rec-pro-card .rec-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end;}
@media(max-width:560px){.rec-pro-card .rec-grid-3{grid-template-columns:1fr;}}
.rec-pro-card .staff-form-f{display:flex;flex-direction:column;}
.rec-pro-card .staff-form-f>label{font-size:11.5px;font-weight:800;color:var(--t2,#A07830);margin-bottom:6px;display:block;}
/* توحيد ارتفاع وشكل كل عناصر الإدخال والأزرار */
.rec-pro-card .staff-form-f>select,
.rec-pro-card .staff-form-f>input[type="text"],
.rec-pro-card .staff-form-f>input[type="number"],
.rec-pro-card .brand-picker-trigger,
.rec-pro-card .model-picker-trigger{
width:100%!important;box-sizing:border-box!important;min-height:48px!important;
border-radius:12px!important;padding:0 14px!important;
border:1px solid var(--line,rgba(127,127,127,.28))!important;
background:var(--d2,rgba(127,127,127,.06))!important;
color:var(--t1,#1a2236)!important;font-family:var(--font,inherit)!important;font-size:13.5px!important;font-weight:700!important;
outline:none!important;display:flex!important;align-items:center!important;gap:8px;
transition:border-color .2s,box-shadow .2s,background .2s;
}
.rec-pro-card .staff-form-f>select{cursor:pointer;}
.rec-pro-card .staff-form-f>select:focus,
.rec-pro-card .staff-form-f>input:focus,
.rec-pro-card .brand-picker-trigger:focus,
.rec-pro-card .model-picker-trigger:focus{
border-color:#6d5cf0!important;box-shadow:0 0 0 3px rgba(227,169,44,.14)!important;
}
.rec-pro-card #r-plate{letter-spacing:3px!important;text-align:center!important;font-size:15px!important;font-weight:800!important;}
.rec-pro-card #r-plate::placeholder{letter-spacing:normal;font-weight:600;opacity:.6;}
/* الوضع النهاري: خلفية بيضاء وحدود وألوان واضحة لكل حقول التذكرة */
html[data-theme='light'] .rec-pro-card .staff-form-f>select,
html[data-theme='light'] .rec-pro-card .staff-form-f>input,
html[data-theme='light'] .rec-pro-card .brand-picker-trigger,
html[data-theme='light'] .rec-pro-card .model-picker-trigger,
html[data-theme='light'] .rec-pro-card .rec-price-input input{
background:#fff!important;border-color:rgba(70,90,140,.22)!important;color:#A07830!important;
}
html[data-theme='light'] .rec-pro-card .staff-form-f>label{color:#A07830!important;}
/* ---- omar-ticket-fix2 ---- */
/* 🆕 تقوية وضوح حقول بطاقة السيارة في الوضع النهاري + ضمان التساوي */
html[data-theme='light'] .rec-pro-card .staff-form-f>select,
html[data-theme='light'] .rec-pro-card .staff-form-f>input,
html[data-theme='light'] .rec-pro-card .brand-picker-trigger,
html[data-theme='light'] .rec-pro-card .model-picker-trigger,
html[data-theme='light'] .rec-pro-card .rec-price-input input{
background:#f6f8fc !important;
border:1.5px solid rgba(70,90,140,.32) !important;
color:#A07830 !important;
}
html[data-theme='light'] .rec-pro-card .staff-form-f>label{color:#5F584C !important;}
html[data-theme='light'] .rec-pro-card .staff-form-f>select option{color:#A07830;background:#fff;}
/* تساوي تام للحقول الثلاثة بصرف النظر عن المحتوى */
.rec-pro-card .rec-grid-3>.staff-form-f{min-width:0;}
.rec-pro-card .rec-grid-3 .brand-picker, .rec-pro-card .rec-grid-3 .brand-picker-trigger{width:100% !important;}
.rec-pro-card .staff-form-f>select,
.rec-pro-card .staff-form-f>input[type="text"],
.rec-pro-card .staff-form-f>input[type="number"],
.rec-pro-card .brand-picker-trigger,
.rec-pro-card .model-picker-trigger{height:50px !important;min-height:50px !important;}
/* ---- omar-ticket-fix3 ---- */
/* 🆕 الوضع النهاري لصفحة إنشاء تذكرة — تجاوز قوي بالـ ID يتغلّب على styles.css */
html[data-theme='light'] #r-year,
html[data-theme='light'] #r-plate,
html[data-theme='light'] #brand-trigger,
html[data-theme='light'] #model-picker-trigger,
html[data-theme='light'] #r-insp,
html[data-theme='light'] #r-price{
background:#f4f7fc !important;
border:1.5px solid rgba(55,75,135,.30) !important;
color:#A07830 !important;
}
html[data-theme='light'] #brand-trigger .brand-trigger-text,
html[data-theme='light'] #model-picker-trigger .model-trigger-text{ color:#A07830 !important; }
html[data-theme='light'] #r-year option{ color:#A07830; background:#fff; }
/* تهدئة رؤوس البطاقات في الوضع النهاري (كانت لافتة/مزعجة) */
html[data-theme='light'] .rec-pro-card-h{
background:var(--soft,#FBF7EF) !important;
border-bottom:1px solid rgba(201,168,76,.14) !important;
}
html[data-theme='light'] .rec-pro-card-title{ color:#23201B !important; }
html[data-theme='light'] .rec-pro-card-sub{ color:#A07830 !important; }
/* ---- omar-rec-wizard-css ---- */
.wiz-hide{display:none !important;}
#s-rec .rec-form-side .rec-pro-card{margin-bottom:14px;}
.wiz-steps{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 12px;margin-bottom:4px;-webkit-overflow-scrolling:touch;}
.wiz-step{flex:1 0 auto;min-width:74px;display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;opacity:.5;transition:opacity .2s;}
.wiz-step.on,.wiz-step.done{opacity:1;}
.wiz-dot{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;background:var(--d3,rgba(127,127,127,.15));color:var(--t2,#E3A92C);border:2px solid transparent;}
.wiz-step.on .wiz-dot{background:linear-gradient(135deg,#A07830,#A07830);color:#fff;}
.wiz-step.done .wiz-dot{background:rgba(16,185,129,.18);color:#10b981;border-color:rgba(16,185,129,.4);}
.wiz-step-lbl{font-size:10.5px;font-weight:700;color:var(--t2,#A07830);white-space:nowrap;}
.wiz-step.on .wiz-step-lbl{color:var(--t1,#23201B);}
.wiz-bar{position:relative;height:4px;border-radius:4px;background:var(--d3,rgba(127,127,127,.15));margin:0 4px 14px;overflow:hidden;}
.wiz-bar-fill{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#A07830,#A07830);border-radius:4px;transition:width .35s cubic-bezier(.16,1,.3,1);}
.wiz-nav{display:flex;gap:10px;margin-top:6px;}
.wiz-nav button{flex:1;border:0;border-radius:13px;padding:14px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;transition:transform .15s,opacity .2s;}
.wiz-nav button:active{transform:translateY(1px);}
.wiz-back{background:var(--d2,rgba(127,127,127,.1));color:var(--t1,#222);}
.wiz-back:disabled{opacity:.4;cursor:default;}
.wiz-next{background:linear-gradient(135deg,#A07830,#A07830);color:#fff;}
.wiz-sum-row{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px dashed var(--line,rgba(127,127,127,.2));font-size:13px;}
.wiz-sum-row:last-child{border-bottom:0;}
.wiz-sum-k{color:var(--t2,#A07830);font-weight:700;}
.wiz-sum-v{color:var(--t1,#23201B);font-weight:800;text-align:left;}
.wiz-sum-v.muted{color:var(--t3,#E3A92C);font-weight:600;}
/* ---- omar-wiz-future ---- */
#s-rec .wiz-steps{background:linear-gradient(90deg,rgba(201,168,76,.10),rgba(201,168,76,.10));border:1px solid var(--line,rgba(127,127,127,.18));border-radius:16px;padding:10px 8px;}
#s-rec .wiz-dot{transition:all .3s cubic-bezier(.16,1,.3,1);}
#s-rec .wiz-step.on .wiz-dot{box-shadow:0 0 18px rgba(201,168,76,.7),0 0 0 4px rgba(201,168,76,.15);transform:scale(1.12);}
#s-rec .wiz-bar{height:5px;}
#s-rec .wiz-bar-fill{box-shadow:0 0 12px rgba(201,168,76,.7);}
#s-rec .wiz-next{position:relative;overflow:hidden;box-shadow:0 10px 26px -8px rgba(201,168,76,.7);}
#s-rec .wiz-next::after{content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);animation:wizSheen 3s ease-in-out infinite;}
@keyframes wizSheen{0%{left:-130%}55%{left:160%}100%{left:160%}}
#s-rec .rec-form-side > .rec-pro-card{animation:wizIn .45s cubic-bezier(.16,1,.3,1);}
@keyframes wizIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
/* بطاقة المراجعة = تذكرة مستقبلية */
.wiz-ticket{position:relative;border-radius:22px;padding:20px;overflow:hidden;color:#F6F0E3;background:linear-gradient(145deg,#23201B,#23201B);border:1px solid rgba(201,168,76,.22);box-shadow:0 24px 60px -22px rgba(201,168,76,.6),inset 0 1px 0 rgba(255,255,255,.08);}
.wiz-ticket::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 80% -10%,rgba(201,168,76,.35),transparent 55%),radial-gradient(90% 70% at 0% 110%,rgba(201,168,76,.30),transparent 55%);pointer-events:none;}
.wiz-ticket>*{position:relative;}
.wiz-ticket-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.wiz-ticket-brand{font-weight:900;font-size:18px;}
.wiz-ticket-brand span{display:block;font-size:12px;font-weight:600;color:#E3A92C;margin-top:2px;}
.wiz-ticket-year{font-family:'IBM Plex Mono',monospace;font-size:13px;color:#34e7e4;background:rgba(241,192,76,.10);padding:5px 10px;border-radius:10px;border:1px solid rgba(52,231,228,.25);white-space:nowrap;}
.wiz-ticket-plate{margin:16px 0;}
.wiz-ticket-plate span{display:block;text-align:center;font-family:'IBM Plex Mono',monospace;font-weight:800;font-size:23px;letter-spacing:6px;color:#fff;background:rgba(255,255,255,.06);border:1.5px dashed rgba(201,168,76,.4);border-radius:14px;padding:12px 8px;}
.wiz-ticket-perf{height:0;margin:16px -20px;border-top:2px dashed rgba(201,168,76,.25);position:relative;}
.wiz-ticket-perf::before,.wiz-ticket-perf::after{content:'';position:absolute;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--d0,#0F1115);}
.wiz-ticket-perf::before{right:-10px;}
.wiz-ticket-perf::after{left:-10px;}
.wiz-ticket-rows{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.wiz-ticket-rows label{display:block;font-size:10.5px;color:#E3A92C;margin-bottom:3px;}
.wiz-ticket-rows b{font-size:14px;font-weight:800;}
.wiz-ticket-price{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid rgba(201,168,76,.18);}
.wiz-ticket-price label{font-size:12px;color:#E3A92C;font-weight:700;}
.wiz-ticket-price b{font-family:'IBM Plex Mono',monospace;font-size:26px;font-weight:900;background:linear-gradient(90deg,#34e7e4,#E3A92C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.wiz-ticket-price b i{font-style:normal;font-size:15px;}
/* تذكرة فاتحة أنيقة في الوضع النهاري */
html[data-theme='light'] .wiz-ticket{color:#23201B;background:linear-gradient(145deg,#ffffff,#F6F0E3);border:1px solid rgba(201,168,76,.18);box-shadow:0 22px 50px -22px rgba(201,168,76,.4);}
html[data-theme='light'] .wiz-ticket-brand span,html[data-theme='light'] .wiz-ticket-rows label,html[data-theme='light'] .wiz-ticket-price label{color:#9A9285;}
html[data-theme='light'] .wiz-ticket-plate span{color:#23201B;background:rgba(201,168,76,.06);border-color:rgba(201,168,76,.35);}
html[data-theme='light'] .wiz-ticket-perf::before,html[data-theme='light'] .wiz-ticket-perf::after{background:#F6F0E3;}
/* ---- omar-rec-livepreview-css ---- */
.rtk-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.rtk-btn{border:0;border-radius:13px;padding:13px;font-family:inherit;font-weight:800;font-size:13.5px;cursor:pointer;color:#fff;display:flex;align-items:center;justify-content:center;gap:6px;transition:transform .15s,box-shadow .2s;}
.rtk-btn:active{transform:translateY(1px);}
.rtk-wa{background:linear-gradient(135deg,#25d366,#128c7e);box-shadow:0 10px 24px -8px rgba(37,211,102,.6);}
.rtk-save{background:linear-gradient(135deg,#A07830,#A07830);box-shadow:0 10px 24px -8px rgba(201,168,76,.6);}
#rec-preview-wrap .wiz-ticket{animation:wizIn .4s cubic-bezier(.16,1,.3,1);}
@media(max-width:380px){.rtk-actions{grid-template-columns:1fr;}}
/* ---- omar-future-ui ---- */
/* ===== Futuristic live-preview placeholder ===== */
#rec-preview-placeholder.rec-ph-future{
position:relative;overflow:hidden;text-align:center!important;
border:1px solid rgba(140,170,255,.22)!important;border-radius:24px!important;padding:56px 22px!important;
background:radial-gradient(120% 110% at 50% 0%,rgba(90,90,210,.20),rgba(10,12,30,0) 60%),linear-gradient(160deg,#141733,#0b0d20)!important;
box-shadow:0 30px 70px -28px rgba(80,60,200,.55),inset 0 1px 0 rgba(255,255,255,.06)!important;color:#cdd6ff!important;
}
.rec-ph-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(201,168,76,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.07) 1px,transparent 1px);background-size:26px 26px;-webkit-mask:radial-gradient(circle at 50% 38%,#000,transparent 72%);mask:radial-gradient(circle at 50% 38%,#000,transparent 72%);}
.rec-ph-orb{position:absolute;left:50%;top:34%;width:220px;height:220px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(201,168,76,.38),transparent 65%);filter:blur(20px);animation:phPulse 4s ease-in-out infinite;}
@keyframes phPulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}50%{opacity:.95;transform:translate(-50%,-50%) scale(1.18)}}
.rec-ph-scan{position:absolute;left:6%;right:6%;height:2px;top:8%;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(52,231,228,.95),transparent);filter:blur(.4px);animation:phScan 3.2s ease-in-out infinite;}
@keyframes phScan{0%{top:10%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:90%;opacity:0}}
.rec-ph-ticket{position:relative;font-size:56px;line-height:1;filter:drop-shadow(0 8px 22px rgba(201,168,76,.75));animation:phFloat 3.6s ease-in-out infinite;}
@keyframes phFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-12px) rotate(5deg)}}
.rec-ph-title{position:relative;margin-top:16px;font-size:17px;font-weight:900;letter-spacing:.3px;background:linear-gradient(90deg,#34e7e4,#E3A92C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.rec-ph-sub{position:relative;margin-top:8px;font-size:12px;font-weight:600;color:#E3A92C;}
.rec-ph-dots{position:relative;margin-top:18px;display:flex;gap:7px;justify-content:center;}
.rec-ph-dots span{width:8px;height:8px;border-radius:50%;background:#A07830;animation:phDot 1.4s infinite ease-in-out;}
.rec-ph-dots span:nth-child(2){animation-delay:.2s;background:#34e7e4;}
.rec-ph-dots span:nth-child(3){animation-delay:.4s;background:#E3A92C;}
@keyframes phDot{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
html[data-theme='light'] #rec-preview-placeholder.rec-ph-future{background:radial-gradient(120% 110% at 50% 0%,rgba(201,168,76,.14),transparent 60%),linear-gradient(160deg,#FBF7EF,#F2ECE0)!important;border-color:rgba(160,120,48,.18)!important;box-shadow:0 26px 60px -28px rgba(160,120,48,.4)!important;color:#A07830!important;}
html[data-theme='light'] .rec-ph-sub{color:#9A9285;}
/* ===== Futuristic WhatsApp / Save buttons ===== */
.rtk-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.rtk-btn{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.20)!important;border-radius:15px!important;padding:14px 12px!important;font-weight:800!important;letter-spacing:.2px;color:#fff!important;
box-shadow:0 16px 32px -12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.28)!important;
transition:transform .18s cubic-bezier(.16,1,.3,1),filter .25s,box-shadow .25s;}
.rtk-btn::before{content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s ease;}
.rtk-btn:hover::before{left:140%;}
.rtk-btn:hover{transform:translateY(-2px);filter:brightness(1.09);}
.rtk-btn:active{transform:translateY(1px);}
.rtk-wa{background:linear-gradient(135deg,#2bf07a,#0f9d72)!important;box-shadow:0 18px 36px -12px rgba(37,211,102,.7),inset 0 1px 0 rgba(255,255,255,.3)!important;}
.rtk-save{background:linear-gradient(135deg,#A07830,#A07830)!important;box-shadow:0 18px 36px -12px rgba(201,168,76,.7),inset 0 1px 0 rgba(255,255,255,.3)!important;}
/* ===== Futuristic step indicators ===== */
#s-rec .wiz-dot{width:36px!important;height:36px!important;border-radius:13px!important;font-family:'IBM Plex Mono',monospace;font-weight:900!important;position:relative;overflow:visible;
background:linear-gradient(145deg,rgba(124,92,255,.14),rgba(17,196,214,.10))!important;border:1.5px solid rgba(140,170,255,.30)!important;color:#aeb8e6!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);}
#s-rec .wiz-step.on .wiz-dot{background:linear-gradient(135deg,#A07830,#A07830)!important;color:#fff!important;border-color:transparent!important;box-shadow:0 0 22px rgba(201,168,76,.85),0 0 0 4px rgba(201,168,76,.16)!important;transform:scale(1.16)!important;}
#s-rec .wiz-step.done .wiz-dot{background:linear-gradient(135deg,rgba(16,231,180,.24),rgba(16,185,129,.12))!important;color:#33e0a8!important;border-color:rgba(16,231,180,.5)!important;box-shadow:0 0 14px rgba(16,231,180,.4)!important;}
#s-rec .wiz-step.on .wiz-dot::after{content:'';position:absolute;inset:-3px;border-radius:16px;border:1.5px solid rgba(52,231,228,.6);animation:wizRing 1.6s ease-out infinite;}
@keyframes wizRing{0%{transform:scale(.92);opacity:.85}100%{transform:scale(1.55);opacity:0}}
#s-rec .wiz-step-lbl{font-weight:800;}
#s-rec .wiz-step.on .wiz-step-lbl{background:linear-gradient(90deg,#34e7e4,#E3A92C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
/* ===== Ticket holographic sheen ===== */
.wiz-ticket::after{content:'';position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.12),transparent);transform:skewX(-18deg);animation:tkSheen 5.5s ease-in-out infinite;pointer-events:none;}
@keyframes tkSheen{0%,68%{left:-60%}100%{left:170%}}
/* ---- omar-ticket-export-css ---- */
.wiz-nav{display:none !important;}
#s-rec .wiz-step{cursor:pointer;}
#s-rec .wiz-step:hover{opacity:.95;}
/* ---- omar-ui3 ---- */
#rec-preview-wrap.tk-flip-in{animation:tkFlip .72s cubic-bezier(.2,.85,.25,1);}
@keyframes tkFlip{0%{transform:perspective(1100px) rotateY(85deg) scale(.96);opacity:0}55%{opacity:1}100%{transform:perspective(1100px) rotateY(0) scale(1);opacity:1}}
.wiz-ticket-eyebrow{text-align:center;font-size:10.5px;letter-spacing:1.6px;color:#E3A92C;margin-bottom:12px;text-transform:uppercase;}
html[data-theme='light'] .wiz-ticket-eyebrow{color:#A07830;}
.rtk-actions{display:flex;gap:8px;margin-top:16px;}
.rtk-btn{flex:1;border-radius:13px!important;padding:10px 12px!important;font-size:13px!important;font-weight:800!important;border:1px solid rgba(255,255,255,.14)!important;background:rgba(255,255,255,.05)!important;color:#F6F0E3!important;box-shadow:none!important;backdrop-filter:blur(8px);transition:background .2s,transform .15s,border-color .2s;display:flex;align-items:center;justify-content:center;gap:6px;}
.rtk-btn::before{display:none!important;}
.rtk-btn:hover{transform:translateY(-1px);}
.rtk-wa{border-color:rgba(37,231,122,.38)!important;background:rgba(37,231,122,.08)!important;color:#7ef0a8!important;}
.rtk-wa:hover{background:rgba(37,231,122,.16)!important;}
.rtk-save{border-color:rgba(201,168,76,.40)!important;background:rgba(201,168,76,.09)!important;color:#E3A92C!important;}
.rtk-save:hover{background:rgba(201,168,76,.17)!important;}
html[data-theme='light'] .rtk-btn{color:#23201B!important;background:rgba(35,32,27,.04)!important;border-color:rgba(35,32,27,.12)!important;}
html[data-theme='light'] .rtk-wa{color:#0f9d72!important;background:rgba(15,157,114,.08)!important;border-color:rgba(15,157,114,.3)!important;}
html[data-theme='light'] .rtk-save{color:#A07830!important;background:rgba(201,168,76,.08)!important;border-color:rgba(201,168,76,.3)!important;}
/* ---- omar-shake-css ---- */
@keyframes wizShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.wiz-shake{animation:wizShake .5s cubic-bezier(.36,.07,.19,.97);}
/* ---- omar-ui4 ---- */
#s-rec #rec-reputation:not(:empty),#s-rec .rec-cust-found,#s-rec #rec-name-field,#s-rec .rec-fraud-warning,#s-rec #rec-custtype-field,#s-rec .rec-company-box{margin-top:12px!important;clear:both;box-sizing:border-box;}
#s-rec #rec-reputation:empty{margin:0!important;}
#s-rec .wiz-bar{display:none!important;}
#s-rec .wiz-steps{position:fixed!important;bottom:14px;left:50%;transform:translateX(-50%);z-index:9000;width:min(94%,460px);background:rgba(35,32,27,.74)!important;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(201,168,76,.22)!important;border-radius:22px!important;box-shadow:0 20px 55px -18px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.07);padding:11px 10px!important;margin:0!important;overflow:visible;}
#s-rec .wiz-steps::before{content:'';position:absolute;inset:0;border-radius:22px;background:linear-gradient(90deg,rgba(201,168,76,.12),rgba(241,192,76,.10));opacity:.55;pointer-events:none;}
html[data-theme='light'] #s-rec .wiz-steps{background:rgba(255,255,255,.86)!important;border-color:rgba(160,120,48,.18)!important;box-shadow:0 18px 45px -18px rgba(160,120,48,.4)!important;}
#s-rec .rec-form-side{padding-bottom:98px!important;}
#s-rec .wiz-step{position:relative;z-index:1;}
#s-rec .wiz-step.on .wiz-dot{animation:wizPulse 1.7s ease-in-out infinite;}
@keyframes wizPulse{0%,100%{box-shadow:0 0 18px rgba(124,92,255,.7),0 0 0 4px rgba(124,92,255,.16)}50%{box-shadow:0 0 30px rgba(52,231,228,.95),0 0 0 8px rgba(124,92,255,.10)}}
/* ---- omar-ui5 ---- */
#r-vat-preview{display:none!important;}
#rec-preview-wrap .wiz-ticket{animation:none!important;}
#rec-preview-wrap.tk-flip-in{animation:none!important;}
#s-rec .wiz-dot{font-size:16px!important;}
.rec-calc-future{margin-top:14px;border-radius:18px;padding:16px;background:linear-gradient(160deg,rgba(201,168,76,.10),rgba(201,168,76,.06));border:1px solid rgba(201,168,76,.22);position:relative;overflow:hidden;}
.rec-calc-future::before{content:'';position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0,rgba(201,168,76,.10),transparent 60%);pointer-events:none;}
.rec-calc-future .rcf-head{display:flex;align-items:center;gap:8px;font-weight:900;font-size:14px;margin-bottom:10px;color:var(--t1,#F6F0E3);position:relative;}
.rec-calc-future .rcf-ico{font-size:18px;}
.rec-calc-future .rcf-row{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:13px;padding:7px 0;color:var(--t2,#E3A92C);font-weight:600;border-bottom:1px solid rgba(201,168,76,.10);position:relative;}
.rec-calc-future .rcf-row span:last-child{font-family:'IBM Plex Mono',monospace;color:var(--t1,#F6F0E3);font-weight:800;white-space:nowrap;}
.rec-calc-future .rcf-disc span:last-child{color:#ff9a9a;}
.rec-calc-future .rcf-vat span:last-child{color:#E3A92C;}
.rec-calc-future .rcf-total{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:12px;border-top:2px solid rgba(201,168,76,.20);position:relative;}
.rec-calc-future .rcf-total span:first-child{font-size:14px;font-weight:900;color:var(--t1,#F6F0E3);}
.rec-calc-future .rcf-total span:last-child{font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:900;background:linear-gradient(90deg,#34e7e4,#E3A92C);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
html[data-theme='light'] .rec-calc-future{background:linear-gradient(160deg,rgba(201,168,76,.07),rgba(201,168,76,.05));border-color:rgba(160,120,48,.2);}
html[data-theme='light'] .rec-calc-future .rcf-row span:last-child,html[data-theme='light'] .rec-calc-future .rcf-head,html[data-theme='light'] .rec-calc-future .rcf-total span:first-child{color:#23201B;}
/* ---- omar-ui6 ---- */
#s-rec .rec-pro-card{background:linear-gradient(150deg,#23201B,#23201B)!important;border:1px solid rgba(201,168,76,.20)!important;box-shadow:0 22px 52px -26px rgba(201,168,76,.5),inset 0 1px 0 rgba(255,255,255,.05)!important;}
html[data-theme='light'] #s-rec .rec-pro-card{background:linear-gradient(150deg,#ffffff,#F6F0E3)!important;border-color:rgba(160,120,48,.16)!important;box-shadow:0 18px 44px -26px rgba(160,120,48,.34)!important;}
#s-rec .wiz-steps{gap:3px!important;}
#s-rec .wiz-step{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 2px;border-radius:15px;transition:background .25s;cursor:pointer;}
#s-rec .wiz-step:hover{background:rgba(201,168,76,.08);}
#s-rec .wiz-dot{width:36px!important;height:36px!important;border-radius:13px!important;display:flex;align-items:center;justify-content:center;background:rgba(201,168,76,.10)!important;border:1px solid rgba(201,168,76,.20)!important;color:#E3A92C!important;transition:all .32s cubic-bezier(.16,1,.3,1);overflow:visible;}
#s-rec .wiz-dot svg{width:18px;height:18px;}
#s-rec .wiz-step.done .wiz-dot{background:rgba(16,231,180,.16)!important;border-color:rgba(16,231,180,.42)!important;color:#33e0a8!important;}
#s-rec .wiz-step.on .wiz-dot{background:linear-gradient(135deg,#A07830,#A07830)!important;border-color:transparent!important;color:#fff!important;transform:translateY(-5px) scale(1.14);box-shadow:0 12px 24px -6px rgba(201,168,76,.85),0 0 0 4px rgba(201,168,76,.14)!important;animation:wizPulse 1.7s ease-in-out infinite;}
#s-rec .wiz-step.on .wiz-step-lbl{color:var(--t1,#fff)!important;font-weight:900;}
#s-rec .wiz-step-lbl{transition:color .25s;}
.svc2-pulse{animation:svc2Pulse 1.4s ease-in-out infinite;border-radius:16px;}
@keyframes svc2Pulse{0%,100%{box-shadow:0 0 0 0 rgba(245,158,11,0)}50%{box-shadow:0 0 0 4px rgba(245,158,11,.20)}}
/* ---- omar-ui7 ---- */
/* ===== قوائم منسدلة راقية (سهم مخصص بدل سهم النظام) ===== */
#s-rec select{-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa6d6' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:left 14px center!important;background-size:12px!important;padding-left:36px!important;}
#s-rec select option{background:#23201B;color:#F6F0E3;font-weight:700;padding:8px;}
html[data-theme='light'] #s-rec select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23566089' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")!important;}
html[data-theme='light'] #s-rec select option{background:#fff;color:#A07830;}
/* ===== قسم السعر: كروت منفصلة متناغمة ===== */
#s-rec .rec-pro-card-body > .rec-section{background:linear-gradient(160deg,rgba(201,168,76,.07),rgba(201,168,76,.035))!important;border:1px solid rgba(201,168,76,.16)!important;border-radius:16px!important;padding:14px!important;margin-top:12px!important;}
#s-rec .rec-pro-card-body > .rec-section:first-child{margin-top:0!important;}
html[data-theme='light'] #s-rec .rec-pro-card-body > .rec-section{background:linear-gradient(160deg,rgba(201,168,76,.05),rgba(201,168,76,.022))!important;border-color:rgba(160,120,48,.14)!important;}
#s-rec #rec-loyalty-section,#s-rec #rec-calc{margin-top:12px!important;}
/* ===== فاصل واضح بين الخدمة الأساسية والخدمة الثانية ===== */
#s-rec .rec-toggle-row{margin-top:14px!important;}
#s-rec .rec-sub-fields{margin-top:12px!important;}
/* ===== تأثير تلميح الانتقال في الشريط السفلي ===== */
.wiz-step.wiz-next-hint .wiz-dot{animation:wizNextHint 1.15s ease-in-out infinite!important;border-color:rgba(201,168,76,.55)!important;color:#34e7e4!important;}
@keyframes wizNextHint{0%,100%{box-shadow:0 0 0 0 rgba(17,196,214,0);transform:translateY(0) scale(1)}50%{box-shadow:0 0 0 6px rgba(17,196,214,.20);transform:translateY(-3px) scale(1.07)}}
.wiz-step.wiz-next-hint .wiz-step-lbl{color:#34e7e4!important;font-weight:800;}
/* ===== بطاقة العميل في الاستقبال — متناغمة ===== */
#s-rec .rec-cust-found{background:linear-gradient(150deg,rgba(16,231,180,.12),rgba(35,32,27,.55))!important;border:1px solid rgba(16,231,180,.32)!important;border-radius:16px!important;box-shadow:0 14px 34px -20px rgba(16,231,180,.4)!important;}
html[data-theme='light'] #s-rec .rec-cust-found{background:linear-gradient(150deg,rgba(16,185,129,.10),#ffffff)!important;border-color:rgba(16,185,129,.3)!important;}
/* ===== لمسة تناغم عامة ===== */
#s-rec .rec-section-h{margin-bottom:10px;}
#s-rec .staff-form-f>label{margin-bottom:6px;display:block;}
/* ---- omar-ui8 ---- */
/* إخفاء الإشعار المنبثق على الجوال فقط — يبقى على الأجهزة الأخرى */
@media (max-width:600px){
.notif-popup,.notif-popup-backdrop{display:none!important;}
}
/* ---- omar-ui9 ---- */
/* محاذاة المعاينة للأعلى مع بيانات العميل + حجم مناسب */
#s-rec .rec-body{align-items:flex-start!important;}
#s-rec .rec-preview-side{justify-content:flex-start!important;}
#rec-preview-placeholder.rec-ph-future{min-height:380px;justify-content:flex-start!important;}
/* الشريط السفلي: كل الخطوات دون قصّ */
#s-rec .wiz-steps{overflow:visible!important;justify-content:space-between!important;}
#s-rec .wiz-step{flex:1 1 0!important;min-width:0!important;}
#s-rec .wiz-step-lbl{font-size:10.5px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-align:center;}
#s-rec .rec-form-side{padding-bottom:140px!important;}
/* أجهزة أضيق (لوحي/جوال): عمود واحد + شريط بعرض كامل كتطبيق */
@media (max-width:980px){
#s-rec .rec-body{display:block!important;}
#s-rec .rec-form-side,#s-rec .rec-preview-side{width:100%!important;max-width:100%!important;}
#s-rec .rec-preview-side{margin-top:16px!important;}
#rec-preview-placeholder.rec-ph-future{min-height:300px;}
#s-rec .wiz-steps{position:fixed!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;margin:0!important;border-radius:22px 22px 0 0!important;padding:10px 6px calc(12px + env(safe-area-inset-bottom,0px))!important;background:linear-gradient(180deg,rgba(35,32,27,.94),rgba(35,32,27,.99))!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important;border:none!important;border-top:1px solid rgba(201,168,76,.22)!important;box-shadow:0 -12px 34px -12px rgba(0,0,0,.6)!important;z-index:99999!important;}
#s-rec .rec-form-side{padding-bottom:150px!important;}
}
/* ---- omar-ui10 ---- */
/* ===== شريط سفلي بنمط تطبيق: دائرة بارزة للخطوة النشطة (مستوحى من المراجع) ===== */
#s-rec .wiz-steps{overflow:visible!important;align-items:flex-end!important;gap:2px!important;background:linear-gradient(180deg,rgba(35,32,27,.94),rgba(35,32,27,.99))!important;border:1px solid rgba(201,168,76,.20)!important;border-radius:26px!important;box-shadow:0 18px 50px -16px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)!important;padding:12px 12px!important;}
#s-rec .wiz-steps::before{display:none!important;}
#s-rec .wiz-step{flex:1 1 0!important;min-width:0!important;display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 0!important;position:relative;background:none!important;}
#s-rec .wiz-dot{width:40px!important;height:40px!important;border-radius:50%!important;background:rgba(201,168,76,.08)!important;border:1px solid rgba(201,168,76,.16)!important;color:#E3A92C!important;display:flex;align-items:center;justify-content:center;transition:all .35s cubic-bezier(.16,1,.3,1);transform:none!important;box-shadow:none!important;animation:none!important;}
#s-rec .wiz-dot svg{width:19px;height:19px;}
#s-rec .wiz-step-lbl{font-size:10.5px!important;color:#E3A92C;font-weight:700;transition:.3s;white-space:nowrap;}
#s-rec .wiz-step.done .wiz-dot{background:rgba(16,231,180,.14)!important;border-color:rgba(16,231,180,.4)!important;color:#33e0a8!important;}
#s-rec .wiz-step.on .wiz-dot{width:60px!important;height:60px!important;transform:translateY(-30px)!important;background:linear-gradient(135deg,#A07830,#A07830)!important;border:5px solid #23201B!important;color:#fff!important;box-shadow:0 14px 30px -6px rgba(201,168,76,.9),0 0 0 1px rgba(201,168,76,.3)!important;animation:wizPulse 2s ease-in-out infinite!important;}
#s-rec .wiz-step.on .wiz-dot svg{width:26px!important;height:26px!important;}
#s-rec .wiz-step.on .wiz-step-lbl{color:#fff!important;font-weight:900;transform:translateY(-24px)!important;font-size:11.5px!important;}
html[data-theme='light'] #s-rec .wiz-steps{background:linear-gradient(180deg,#ffffff,#F6F0E3)!important;border-color:rgba(160,120,48,.18)!important;}
html[data-theme='light'] #s-rec .wiz-step.on .wiz-dot{border-color:#F6F0E3!important;}
@media (max-width:980px){ #s-rec .wiz-steps{border-radius:24px 24px 0 0!important;} }
/* محاذاة المعاينة: تثبيت أعلى الجانبين */
#s-rec .rec-preview-side{align-self:flex-start!important;}
#rec-preview-placeholder.rec-ph-future{min-height:420px;}
/* ---- omar-ui11 ---- */
/* حذف الشريط القديم نهائيًا */
#s-rec .wiz-steps{display:none!important;}
#s-rec .rec-form-side{padding-bottom:140px!important;}
/* القائمة السفلية الجديدة للجوال (دائرة بارزة للخطوة النشطة) */
#omar-appnav{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:99999;display:none;align-items:flex-end;gap:4px;width:min(94%,440px);padding:12px 14px;background:linear-gradient(180deg,rgba(26,30,54,.93),rgba(13,16,34,.99));border:1px solid rgba(140,170,255,.2);border-radius:28px;box-shadow:0 22px 55px -16px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.06);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-sizing:border-box;}
.oan-item{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:0;cursor:pointer;padding:4px 0;font-family:inherit;position:relative;}
.oan-ico{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.16);color:#E3A92C;transition:all .38s cubic-bezier(.16,1,.3,1);}
.oan-ico svg{width:19px;height:19px;}
.oan-lbl{font-size:10.5px;color:#E3A92C;font-weight:700;white-space:nowrap;transition:.3s;}
.oan-item.oan-done .oan-ico{background:rgba(16,231,180,.14);border-color:rgba(16,231,180,.4);color:#33e0a8;}
.oan-item.oan-on .oan-ico{width:62px;height:62px;transform:translateY(-32px);background:linear-gradient(135deg,#A07830,#A07830);border:5px solid #23201B;color:#fff;box-shadow:0 16px 34px -8px rgba(201,168,76,.95),0 0 0 1px rgba(201,168,76,.3);animation:oanPulse 2s ease-in-out infinite;}
.oan-item.oan-on .oan-ico svg{width:27px;height:27px;}
.oan-item.oan-on .oan-lbl{color:#fff;font-weight:900;transform:translateY(-26px);font-size:11.5px;}
@keyframes oanPulse{0%,100%{box-shadow:0 16px 34px -8px rgba(124,92,255,.9),0 0 0 1px rgba(140,170,255,.3)}50%{box-shadow:0 18px 40px -6px rgba(52,231,228,.95),0 0 0 5px rgba(124,92,255,.12)}}
html[data-theme='light'] #omar-appnav{background:linear-gradient(180deg,#ffffff,#F6F0E3);border-color:rgba(80,100,180,.18);}
html[data-theme='light'] .oan-item.oan-on .oan-ico{border-color:#F6F0E3;}
@media (max-width:980px){ #omar-appnav{left:0;right:0;bottom:0;transform:none;width:100%;border-radius:24px 24px 0 0;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));} }
/* ---- omar-ui12 ---- */
/* روح المراجع: زجاج مصنفر + خطّ علوي مضيء + تركيز محسّن */
#s-rec .rec-pro-card{position:relative;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);}
#s-rec .rec-pro-card::after{content:'';position:absolute;top:0;left:20px;right:20px;height:1px;background:linear-gradient(90deg,transparent,rgba(201,168,76,.55),rgba(201,168,76,.55),transparent);opacity:.55;pointer-events:none;}
#s-rec .staff-form-f input:focus,#s-rec .staff-form-f select:focus,#s-rec .brand-picker-trigger:focus,#s-rec .model-picker-trigger:focus{border-color:rgba(201,168,76,.6)!important;box-shadow:0 0 0 3px rgba(201,168,76,.15)!important;}
#s-rec .rec-pro-card-title{letter-spacing:.3px;}
/* ---- omar-ui13 ---- */
/* ===== القائمة السفلية مطابقة للصورة (للجوال فقط) ===== */
#omar-appnav{background:linear-gradient(135deg,#c6f4f1,#8ce3e1 52%,#abdcf3)!important;border:none!important;box-shadow:0 20px 50px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.55)!important;align-items:center!important;height:76px!important;padding:0 14px!important;border-radius:30px!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;}
.oan-item{justify-content:center!important;height:100%!important;}
.oan-ico{background:transparent!important;border:none!important;color:#23201B!important;width:auto!important;height:auto!important;box-shadow:none!important;}
.oan-ico svg{width:26px!important;height:26px!important;}
.oan-lbl{display:none!important;}
.oan-item.oan-done .oan-ico{background:transparent!important;border:none!important;color:#0a6f5a!important;}
.oan-item.oan-on .oan-ico{width:72px!important;height:72px!important;border-radius:50%!important;transform:translateY(-34px)!important;background:linear-gradient(135deg,#caf4f1,#8ce3e1)!important;border:7px solid #23201B!important;color:#23201B!important;box-shadow:0 16px 34px -6px rgba(0,0,0,.6)!important;animation:none!important;}
.oan-item.oan-on .oan-ico svg{width:30px!important;height:30px!important;}
.oan-item.oan-on .oan-lbl{display:block!important;color:#23201B!important;font-weight:800!important;transform:translateY(-28px)!important;font-size:12px!important;}
@media (min-width:981px){ #omar-appnav{display:none!important;} }
/* ===== أسهم رؤوس البطاقات (للكمبيوتر) ===== */
.rec-hdr-nav{display:flex;gap:7px;margin-inline-start:auto;align-items:center;}
.rhn-btn{width:34px;height:34px;border-radius:11px;border:1px solid rgba(201,168,76,.25);background:rgba(201,168,76,.08);color:#E3A92C;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:.2s;padding:0;}
.rhn-btn svg{width:17px;height:17px;}
.rhn-btn:hover{background:rgba(201,168,76,.22);border-color:rgba(201,168,76,.55);color:#fff;}
.rhn-btn:disabled{opacity:.28;cursor:not-allowed;}
html[data-theme='light'] .rhn-btn{color:#A07830;border-color:rgba(201,168,76,.25);background:rgba(201,168,76,.08);}
@media (max-width:980px){ .rec-hdr-nav{display:none!important;} }
/* ===== تثبيت محاذاة المعاينة (لا تتحرك مع الكتابة) ===== */
#s-rec .rec-form-side{align-self:flex-start!important;}
#s-rec .rec-preview-side{align-self:flex-start!important;}
/* ===== نصّ مكافأة الولاء يظهر كاملًا ===== */
#s-rec .rec-loy-points-lbl{white-space:normal!important;}
/* ---- omar-ui14 ---- */
/* ===== صقل القائمة السفلية لتطابق المرجع ===== */
#omar-appnav{padding:0 20px!important;height:78px!important;gap:0!important;}
.oan-item.oan-on .oan-ico{width:74px!important;height:74px!important;transform:translateY(-37px)!important;border:8px solid #23201B!important;box-shadow:0 18px 36px -8px rgba(0,0,0,.65)!important;}
.oan-item.oan-on .oan-ico svg{width:31px!important;height:31px!important;}
.oan-item.oan-on .oan-lbl{transform:translateY(-30px)!important;}
.oan-item .oan-ico svg{stroke-width:2.2!important;}
.oan-item:not(.oan-on) .oan-ico{opacity:.78;}
/* ===== هوية المراجع على شاشة الاستقبال ===== */
/* شبكة تقنية خفيفة في الخلفية */
#s-rec .rec-body{position:relative;}
#s-rec .rec-body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(201,168,76,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,.045) 1px,transparent 1px);background-size:34px 34px;-webkit-mask:radial-gradient(110% 80% at 70% 0,#000,transparent 75%);mask:radial-gradient(110% 80% at 70% 0,#000,transparent 75%);pointer-events:none;z-index:0;}
#s-rec .rec-form-side,#s-rec .rec-preview-side{position:relative;z-index:1;}
/* توهّج أشرطة عناوين الأقسام */
#s-rec .rec-section-h-bar{box-shadow:0 0 9px currentColor;border-radius:3px;}
/* صفوف الحساب: خطّ تدرّج رفيع أسفل كل صف (مثل مؤشرات المرجع) */
.rec-calc-future .rcf-row{border-bottom:none!important;}
.rec-calc-future .rcf-row::after{content:'';display:block;height:2px;border-radius:2px;margin-top:7px;background:linear-gradient(90deg,#34e7e4,rgba(52,231,228,0));opacity:.55;}
.rec-calc-future .rcf-disc::after{background:linear-gradient(90deg,#ff9a9a,rgba(255,154,154,0))!important;}
.rec-calc-future .rcf-vat::after{background:linear-gradient(90deg,#E3A92C,rgba(201,168,76,0))!important;}
/* قيم نقدية بخط تقني */
#s-rec .rec-pro-card-title{letter-spacing:.4px;}
/* بطاقة الحساب: توهّج كرت التنبيه في المرجع */
.rec-calc-future{box-shadow:0 22px 55px -28px rgba(201,168,76,.6),inset 0 1px 0 rgba(255,255,255,.05)!important;}
/* ---- omar-ui15 ---- */
/* ===== محاذاة: تثبيت أعلى الجانبين (يغطي flex و inline-block) ===== */
#s-rec .rec-form-side,#s-rec .rec-preview-side{vertical-align:top!important;align-self:flex-start!important;margin-top:0!important;}
/* ===== إعادة تصميم القائمة السفلية: داكنة ذكية ديناميكية (بدل السماوي) ===== */
#omar-appnav{background:linear-gradient(180deg,rgba(24,28,52,.92),rgba(11,14,32,.99))!important;border:1px solid rgba(140,170,255,.22)!important;box-shadow:0 24px 60px -18px rgba(0,0,0,.78),inset 0 1px 0 rgba(255,255,255,.07)!important;height:auto!important;padding:13px 16px!important;}
.oan-item .oan-ico{background:rgba(201,168,76,.07)!important;border:1px solid rgba(201,168,76,.14)!important;color:#E3A92C!important;width:42px!important;height:42px!important;transform:none!important;box-shadow:none!important;}
.oan-item .oan-ico svg{width:20px!important;height:20px!important;stroke-width:2!important;}
.oan-item:not(.oan-on):active .oan-ico{transform:scale(.9)!important;}
.oan-item.oan-done .oan-ico{color:#3ee0a0!important;border-color:rgba(62,224,160,.38)!important;background:rgba(62,224,160,.1)!important;}
.oan-lbl{display:none!important;}
/* النشطة: دائرة متوهّجة بارزة نابضة */
.oan-item.oan-on .oan-ico{width:60px!important;height:60px!important;transform:translateY(-26px)!important;background:linear-gradient(135deg,#A07830,#A07830)!important;border:6px solid #23201B!important;color:#fff!important;animation:oanPulse 2.4s ease-in-out infinite;}
.oan-item.oan-on .oan-ico svg{width:26px!important;height:26px!important;stroke-width:2.3!important;}
.oan-item.oan-on .oan-lbl{display:block!important;color:#E3A92C!important;font-weight:800!important;font-size:11px!important;transform:translateY(-20px)!important;letter-spacing:.3px;}
@keyframes oanPulse{0%,100%{box-shadow:0 16px 32px -8px rgba(124,92,255,.85),0 0 22px rgba(52,231,228,.45);}50%{box-shadow:0 18px 38px -6px rgba(124,92,255,.95),0 0 36px rgba(52,231,228,.72);}}
@media(min-width:981px){#omar-appnav{display:none!important;}}
/* ===== (٣) توهّج المعاينة (هوية المراجع الأمبر) ===== */
#rec-preview-wrap .wiz-ticket,#wiz-summary .wiz-ticket{box-shadow:0 34px 80px -34px rgba(255,150,60,.42),0 0 0 1px rgba(255,170,80,.16),inset 0 1px 0 rgba(255,255,255,.06)!important;}
#rec-preview-wrap .wiz-ticket::after,#wiz-summary .wiz-ticket::after{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,#ff9a3c,#ffce6a,transparent);border-radius:3px;opacity:.85;}
#rec-preview-wrap .wiz-ticket,#wiz-summary .wiz-ticket{position:relative;}
/* ---- omar-ui16 ---- */
/* ===== محاذاة أقوى ===== */
#s-rec .rec-body{align-items:flex-start!important;}
#s-rec .rec-preview-side{align-self:flex-start!important;margin-top:0!important;padding-top:0!important;}
/* ===== القائمة السفلية: حالات ذكية (قفل / التالي / مكتمل) ===== */
.oan-item.oan-locked{opacity:.4!important;}
.oan-item.oan-locked .oan-ico{background:rgba(201,168,76,.04)!important;border-color:rgba(201,168,76,.08)!important;color:#A07830!important;}
.oan-item.oan-done .oan-ico{color:#3ee0a0!important;border-color:rgba(62,224,160,.4)!important;background:rgba(62,224,160,.1)!important;}
/* إشارة اتجاه المرحلة القادمة */
.oan-item.oan-next .oan-ico{border-color:rgba(201,168,76,.6)!important;box-shadow:0 0 18px rgba(201,168,76,.5)!important;color:#E3A92C!important;animation:oanNextB 1.3s ease-in-out infinite;}
@keyframes oanNextB{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.oan-item.oan-next::before{content:'';position:absolute;top:-9px;left:50%;width:7px;height:7px;border-right:2px solid #E3A92C;border-bottom:2px solid #E3A92C;transform:translateX(-50%) rotate(45deg);animation:oanArrowB 1.3s ease-in-out infinite;}
@keyframes oanArrowB{0%,100%{opacity:.25;top:-11px}50%{opacity:1;top:-6px}}
/* اهتزاز عند محاولة تجاوز مرحلة غير مكتملة */
@keyframes oanShakeB{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.oan-item.oan-shake .oan-ico{animation:oanShakeB .5s;}
@keyframes recCardShakeB{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(7px)}75%{transform:translateX(-5px)}}
#s-rec .rec-form-side > .rec-pro-card.rec-card-shake{animation:recCardShakeB .5s;}
/* ===== بطاقات بروح المراجع: زجاج داكن + أقواس زوايا ===== */
#s-rec .rec-form-side > .rec-pro-card{position:relative!important;background:linear-gradient(165deg,rgba(35,32,27,.74),rgba(35,32,27,.88))!important;border:1px solid rgba(201,168,76,.14)!important;border-radius:22px!important;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 28px 64px -36px rgba(0,0,0,.72),inset 0 1px 0 rgba(255,255,255,.05)!important;overflow:visible!important;}
#s-rec .rec-form-side > .rec-pro-card::before,#s-rec .rec-form-side > .rec-pro-card::after{content:''!important;position:absolute!important;width:15px;height:15px;border:2px solid rgba(201,168,76,.42);pointer-events:none;opacity:.8;}
#s-rec .rec-form-side > .rec-pro-card::before{top:11px;right:11px;border-left:0;border-bottom:0;border-radius:0 6px 0 0;left:auto;background:none;}
#s-rec .rec-form-side > .rec-pro-card::after{bottom:11px;left:11px;border-right:0;border-top:0;border-radius:0 0 0 6px;}
/* عنوان البطاقة كشارة Pill */
#s-rec .rec-pro-card-title{letter-spacing:.4px;}
/* ---- omar-ui17 ---- */
/* ===== إصلاح جذري لمحاذاة لوحة المعاينة =====
الأساس: rec-body شبكة align-items:start، والمعاينة sticky top:18px.
تعديل سابق حوّلها relative وأبقى top:18px فدُفعت للأسفل. نعيدها sticky مع محاذاة القمة. */
#s-rec .rec-preview-side{position:sticky!important;top:14px!important;align-self:start!important;margin:0!important;padding-top:0!important;z-index:1;}
#s-rec .rec-form-side{align-self:start!important;margin-top:0!important;}
/* ---- omar-ui18 ---- */
/* ===== (٣) أسهم الكمبيوتر: ذكية ديناميكية بمؤشرات ===== */
.rec-hdr-nav{display:flex!important;gap:8px!important;margin-inline-start:auto!important;align-items:center!important;}
.rhn-btn{display:inline-flex!important;align-items:center;gap:6px;height:34px;width:auto!important;padding:0 12px!important;border-radius:12px;border:1px solid rgba(201,168,76,.25);background:rgba(201,168,76,.08);color:#E3A92C;cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:800;transition:.2s;}
.rhn-btn svg{width:15px;height:15px;}
.rhn-btn:hover:not(:disabled){background:rgba(201,168,76,.22);border-color:rgba(201,168,76,.55);color:#fff;transform:translateY(-1px);}
.rhn-btn:disabled{opacity:.32;cursor:not-allowed;}
.rhn-next.rhn-locked{border-color:rgba(255,170,80,.45)!important;background:rgba(255,170,80,.1)!important;color:#ffcf9a!important;opacity:.9!important;cursor:not-allowed;animation:rhnNudge 1.7s ease-in-out infinite;}
@keyframes rhnNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(-3px)}}
.rhn-lbl{white-space:nowrap;}
.rhn-prog{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:84px;padding:0 4px;}
.rhn-prog-num{font-size:9.5px;font-weight:800;color:#E3A92C;letter-spacing:.6px;}
.rhn-prog-name{font-size:12px;font-weight:800;color:#E3A92C;}
.rhn-prog-bar{width:74px;height:3px;border-radius:3px;background:rgba(201,168,76,.18);overflow:hidden;}
.rhn-prog-bar>b{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#A07830,#A07830);transition:width .45s cubic-bezier(.16,1,.3,1);}
html[data-theme='light'] .rhn-prog-name{color:#A07830;}
html[data-theme='light'] .rhn-btn{color:#A07830;border-color:rgba(201,168,76,.25);background:rgba(201,168,76,.08);}
/* ===== (٢) زر إصدار التذكرة: تنسيق احترافي متوهّج ===== */
.rec-issue-btn{position:relative!important;overflow:hidden!important;background:linear-gradient(135deg,#E3A92C,#A07830)!important;border:none!important;color:#fff!important;font-weight:800!important;border-radius:16px!important;box-shadow:0 18px 40px -14px rgba(201,168,76,.7),inset 0 1px 0 rgba(255,255,255,.25)!important;letter-spacing:.3px!important;transition:transform .2s,box-shadow .2s!important;}
.rec-issue-btn:hover{transform:translateY(-2px)!important;box-shadow:0 26px 52px -14px rgba(201,168,76,.88),inset 0 1px 0 rgba(255,255,255,.3)!important;}
.rec-issue-btn>svg,.rec-issue-btn>span{position:relative;z-index:1;}
.rec-issue-btn::after{content:'';position:absolute;top:0;left:-60%;width:38%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-20deg);animation:issSheen 3.4s ease-in-out infinite;z-index:0;}
@keyframes issSheen{0%{left:-60%}58%,100%{left:135%}}
/* ===== (٥) صقل القائمة السفلية باحتراف ===== */
#omar-appnav{width:min(92%,418px)!important;border-radius:27px!important;padding:11px 15px!important;box-shadow:0 26px 64px -20px rgba(0,0,0,.82),0 0 0 1px rgba(140,170,255,.08),inset 0 1px 0 rgba(255,255,255,.08)!important;}
.oan-item .oan-ico{width:40px!important;height:40px!important;}
.oan-item.oan-on .oan-ico{width:58px!important;height:58px!important;transform:translateY(-25px)!important;border-width:5px!important;}
.oan-item.oan-on .oan-ico svg{width:25px!important;height:25px!important;}
.oan-item.oan-on .oan-lbl{font-size:10.5px!important;letter-spacing:.4px!important;transform:translateY(-18px)!important;font-weight:800!important;}
/* ===== (٤) طبقة هوية المراجع على شاشة الاستقبال ===== */
#s-rec .rec-body::after{content:'';position:fixed;top:-8%;right:-6%;width:52vw;height:52vw;max-width:620px;max-height:620px;background:radial-gradient(circle,rgba(255,150,60,.075),transparent 68%);pointer-events:none;z-index:0;}
#s-rec input[type=text],#s-rec input[type=tel],#s-rec input[type=number],#s-rec select,#s-rec textarea{background:rgba(35,32,27,.62)!important;border:1px solid rgba(201,168,76,.16)!important;border-radius:13px!important;color:#F6F0E3!important;transition:.2s!important;}
#s-rec input[type=text]:focus,#s-rec input[type=tel]:focus,#s-rec input[type=number]:focus,#s-rec select:focus,#s-rec textarea:focus{border-color:rgba(201,168,76,.55)!important;box-shadow:0 0 0 3px rgba(201,168,76,.14)!important;outline:none!important;}
#s-rec .rec-today-badge{border:1px solid rgba(255,170,80,.28)!important;border-radius:999px!important;background:rgba(255,170,80,.07)!important;}
/* ---- omar-ui19 ---- */
/* ===== إخفاء أسهم الكمبيوتر تمامًا على الجوال (يغلب على display:flex السابق) ===== */
@media(max-width:980px){
.rec-hdr-nav,.rhn-btn,.rhn-prog{display:none!important;}
}
/* ===== إعادة ضبط القائمة السفلية: تخطيط نظيف متوازن احترافي ===== */
#omar-appnav{align-items:center!important;height:66px!important;padding:0 14px!important;gap:2px!important;overflow:visible!important;}
.oan-item{height:66px!important;justify-content:center!important;gap:0!important;padding:0!important;position:relative!important;}
.oan-ico{margin:0!important;transition:all .35s cubic-bezier(.16,1,.3,1)!important;}
/* الأيقونات غير النشطة واضحة (لا باهتة) */
.oan-item:not(.oan-on) .oan-lbl{display:none!important;}
.oan-item:not(.oan-on):not(.oan-locked) .oan-ico{opacity:.9!important;}
/* المقفلة: خافتة بوضوح لكن غير مكسورة */
.oan-item.oan-locked{opacity:1!important;}
.oan-item.oan-locked .oan-ico{opacity:.4!important;}
/* النشطة: دائرة بارزة + التسمية مثبّتة أسفل الشريط */
.oan-item.oan-on .oan-ico{width:56px!important;height:56px!important;transform:translateY(-22px)!important;border-width:5px!important;}
.oan-item.oan-on .oan-ico svg{width:24px!important;height:24px!important;}
.oan-item.oan-on .oan-lbl{display:block!important;position:absolute!important;left:0;right:0;bottom:8px!important;margin:0!important;transform:none!important;text-align:center;font-size:10px!important;font-weight:800!important;color:#E3A92C!important;letter-spacing:.3px;}
/* سهم اتجاه المرحلة القادمة فوق الأيقونة (إعادة ضبط الموضع مع الشريط الجديد) */
.oan-item.oan-next::before{top:6px!important;}
.oan-item.oan-next .oan-ico{transform:translateY(-2px)!important;}
/* ---- omar-ui20 ---- */
/* ===== توسيط القائمة: الدائرة النشطة دائمًا في منتصف الشريط (تمرير ذكي) ===== */
#omar-appnav{overflow:visible!important;clip-path:inset(-70px 0px -45px 0px)!important;}
.oan-track{display:flex!important;flex:1 1 auto!important;width:100%!important;align-items:center!important;gap:2px!important;transition:transform .42s cubic-bezier(.16,1,.3,1)!important;will-change:transform;}
/* ---- omar-ui21 ---- */
/* ===== تراجع عن التمرير/القصّ الذي أخفى المراحل — إظهار الخمسة بتوزيع متساوٍ ثابت ===== */
#omar-appnav{clip-path:none!important;overflow:visible!important;}
.oan-track{transform:none!important;clip-path:none!important;display:flex!important;width:100%!important;align-items:center!important;}
.oan-item{flex:1 1 0!important;min-width:0!important;}
/* الدائرة النشطة بارزة في مكانها دون تجاوز أفقي */
.oan-item.oan-on .oan-ico{width:54px!important;height:54px!important;transform:translateY(-22px)!important;}
.oan-item.oan-on .oan-ico svg{width:23px!important;height:23px!important;}
/* ---- omar-ui22 ---- */
/* منع تجاوز الدائرة النشطة لحافة الشريط + توسيط الشريط */
#omar-appnav{padding:0 26px!important;left:50%!important;transform:translateX(-50%)!important;}
.oan-item.oan-on .oan-ico{width:50px!important;height:50px!important;transform:translateY(-20px)!important;}
.oan-item.oan-on .oan-ico svg{width:22px!important;height:22px!important;}
.oan-item.oan-on .oan-lbl{bottom:7px!important;}
/* ---- omar-ui23 ---- */
/* ===== ملاءمة القائمة السفلية للجوال ===== */
#omar-appnav{width:min(94vw,440px)!important;max-width:calc(100vw - 20px)!important;box-sizing:border-box!important;bottom:max(14px,env(safe-area-inset-bottom,14px))!important;}
@media(max-width:480px){
#omar-appnav{padding:0 12px!important;height:62px!important;}
.oan-item{height:62px!important;}
.oan-item .oan-ico{width:38px!important;height:38px!important;}
.oan-item .oan-ico svg{width:18px!important;height:18px!important;}
.oan-item.oan-on .oan-ico{width:48px!important;height:48px!important;transform:translateY(-18px)!important;}
.oan-item.oan-on .oan-ico svg{width:21px!important;height:21px!important;}
.oan-item.oan-on .oan-lbl{font-size:9.5px!important;bottom:6px!important;}
}
/* ---- omar-ui24 ---- */
/* ===== شريط تبويب سفلي قياسي (كالتطبيقات) — يلغي الشريط العائم والدائرة البارزة ===== */
#omar-appnav{
left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important;
transform:none!important;border-radius:0!important;clip-path:none!important;overflow:visible!important;
height:auto!important;min-height:0!important;
padding:9px 4px calc(9px + env(safe-area-inset-bottom,0px))!important;
background:rgba(13,17,34,.94)!important;-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;
border:0!important;border-top:1px solid rgba(140,170,255,.16)!important;
box-shadow:0 -10px 34px -12px rgba(0,0,0,.65)!important;
align-items:stretch!important;gap:0!important;
}
.oan-track{transform:none!important;clip-path:none!important;width:100%!important;display:flex!important;align-items:stretch!important;gap:0!important;}
.oan-item{flex:1 1 0!important;min-width:0!important;height:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;padding:6px 0!important;position:relative!important;background:transparent!important;}
/* أيقونة مسطّحة بلا دائرة/بروز */
.oan-item .oan-ico{width:auto!important;height:auto!important;background:transparent!important;border:0!important;box-shadow:none!important;transform:none!important;border-radius:0!important;color:#E3A92C!important;animation:none!important;opacity:1!important;}
.oan-item .oan-ico svg{width:23px!important;height:23px!important;stroke-width:2!important;}
/* تسمية ظاهرة دائمًا */
.oan-item .oan-lbl{display:block!important;position:static!important;transform:none!important;margin:0!important;font-size:10px!important;font-weight:700!important;color:#E3A92C!important;opacity:1!important;letter-spacing:0!important;text-align:center!important;line-height:1!important;white-space:nowrap!important;}
/* النشطة: لون + خط علوي مميّز */
.oan-item.oan-on .oan-ico{color:#E3A92C!important;}
.oan-item.oan-on .oan-ico svg{stroke-width:2.5!important;}
.oan-item.oan-on .oan-lbl{color:#E3A92C!important;}
.oan-item.oan-on::before{content:''!important;position:absolute!important;top:0!important;left:50%!important;transform:translateX(-50%)!important;width:32px!important;height:3px!important;border-radius:0 0 4px 4px!important;background:linear-gradient(90deg,#A07830,#A07830)!important;border:0!important;animation:none!important;}
/* مكتملة / مقفلة / التالية */
.oan-item.oan-done .oan-ico,.oan-item.oan-done .oan-lbl{color:#3ee0a0!important;}
.oan-item.oan-locked{opacity:1!important;}
.oan-item.oan-locked .oan-ico,.oan-item.oan-locked .oan-lbl{color:#A07830!important;opacity:.55!important;}
.oan-item.oan-next .oan-ico,.oan-item.oan-next .oan-lbl{color:#E3A92C!important;}
.oan-item.oan-next::before{display:none!important;}
@media(min-width:981px){#omar-appnav{display:none!important;}}
/* ---- omar-ui25 ---- */
/* ===== شريط عائم بتجويف يحتضن النشطة (كالصورة) + لمسة سحرية ===== */
#omar-appnav{
left:50%!important;right:auto!important;transform:translateX(-50%)!important;
bottom:max(16px,env(safe-area-inset-bottom,16px))!important;
width:min(92vw,430px)!important;max-width:none!important;box-sizing:border-box!important;
height:66px!important;min-height:66px!important;padding:0 12px!important;
border-radius:30px!important;clip-path:none!important;overflow:visible!important;align-items:center!important;
background:linear-gradient(180deg,rgba(26,31,54,.94),rgba(12,16,34,.98))!important;
border:1px solid rgba(140,170,255,.18)!important;
box-shadow:0 24px 55px -18px rgba(0,0,0,.72),0 0 34px -12px rgba(124,92,255,.3),inset 0 1px 0 rgba(255,255,255,.06)!important;
-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;
/* التجويف: قطع دائري شفّاف في أعلى الشريط عند موضع النشطة */
-webkit-mask:radial-gradient(circle 37px at var(--notch-x,50%) -6px, transparent 0 36px, #000 37px)!important;
mask:radial-gradient(circle 37px at var(--notch-x,50%) -6px, transparent 0 36px, #000 37px)!important;
}
.oan-track{transform:none!important;clip-path:none!important;width:100%!important;display:flex!important;align-items:center!important;height:66px!important;gap:0!important;}
.oan-item{flex:1 1 0!important;min-width:0!important;height:66px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;padding:0!important;position:relative!important;overflow:visible!important;background:transparent!important;}
/* الأيقونات غير النشطة: مسطّحة */
.oan-item .oan-ico{width:42px!important;height:42px!important;background:transparent!important;border:0!important;box-shadow:none!important;border-radius:50%!important;color:#E3A92C!important;transform:none!important;opacity:1!important;animation:none!important;transition:all .4s cubic-bezier(.16,1,.3,1)!important;}
.oan-item .oan-ico svg{width:22px!important;height:22px!important;}
.oan-item .oan-lbl{display:none!important;}
.oan-item.oan-done .oan-ico{color:#3ee0a0!important;}
.oan-item.oan-locked{opacity:1!important;}
.oan-item.oan-locked .oan-ico{color:#5F584C!important;opacity:.55!important;}
.oan-item.oan-next .oan-ico{color:#E3A92C!important;}
.oan-item.oan-on::before{display:none!important;}
/* النشطة: دائرة بارزة تجلس في التجويف */
.oan-item.oan-on .oan-ico{
position:relative!important;z-index:2!important;
width:56px!important;height:56px!important;transform:translateY(-28px)!important;
background:linear-gradient(135deg,#7c5cff,#11c4d6)!important;color:#fff!important;border:0!important;
box-shadow:0 12px 28px -6px rgba(124,92,255,.85),0 0 26px rgba(52,231,228,.55)!important;
animation:oanGlow 2.6s ease-in-out infinite!important;
}
.oan-item.oan-on .oan-ico svg{width:25px!important;height:25px!important;stroke-width:2.3!important;}
.oan-item.oan-on .oan-lbl{display:block!important;position:absolute!important;bottom:7px!important;left:0!important;right:0!important;transform:none!important;margin:0!important;text-align:center!important;font-size:10px!important;font-weight:800!important;color:#E3A92C!important;letter-spacing:.2px!important;}
@keyframes oanGlow{0%,100%{box-shadow:0 12px 28px -6px rgba(124,92,255,.85),0 0 22px rgba(52,231,228,.45)}50%{box-shadow:0 15px 36px -4px rgba(124,92,255,1),0 0 42px rgba(52,231,228,.8)}}
/* لمسة سحرية: لمعان متحرك على الإطار */
#omar-appnav::after{content:''!important;position:absolute!important;inset:0!important;border-radius:30px!important;padding:1px!important;background:linear-gradient(120deg,transparent 30%,rgba(124,92,255,.55),rgba(17,196,214,.55),transparent 70%)!important;background-size:220% 100%!important;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0)!important;-webkit-mask-composite:xor!important;mask-composite:exclude!important;animation:oanSheen 4.5s linear infinite!important;pointer-events:none!important;opacity:.9!important;}
@keyframes oanSheen{0%{background-position:220% 0}100%{background-position:-220% 0}}
@media(min-width:981px){#omar-appnav{display:none!important;}}
/* ---- omar-ui26 ---- */
/* ===== إصلاح: القناع كان يقصّ الأيقونة. ننقل الخلفية+التجويف لطبقة ::before والأيقونات فوقها ===== */
#omar-appnav{
background:transparent!important;border:0!important;box-shadow:none!important;
-webkit-mask:none!important;mask:none!important;
-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
overflow:visible!important;position:fixed!important;
}
#omar-appnav::before{
content:''!important;position:absolute!important;inset:0!important;border-radius:30px!important;z-index:0!important;pointer-events:none!important;
background:linear-gradient(180deg,rgba(26,31,54,.95),rgba(12,16,34,.99))!important;
border:1px solid rgba(140,170,255,.18)!important;
box-shadow:0 24px 55px -18px rgba(0,0,0,.72),0 0 34px -12px rgba(124,92,255,.3),inset 0 1px 0 rgba(255,255,255,.06)!important;
-webkit-backdrop-filter:blur(20px)!important;backdrop-filter:blur(20px)!important;
-webkit-mask:radial-gradient(circle 37px at var(--notch-x,50%) -6px, transparent 0 36px, #000 37px)!important;
mask:radial-gradient(circle 37px at var(--notch-x,50%) -6px, transparent 0 36px, #000 37px)!important;
}
/* الأيقونات فوق الخلفية، غير مقصوصة */
.oan-track{position:relative!important;z-index:1!important;}
.oan-item{z-index:1!important;}
.oan-item.oan-on .oan-ico{z-index:3!important;}
/* ---- omar-ui27 ---- */
/* ===== ضبط التجويف: الدائرة في منتصفه (غير ملتصقة بالأسفل) ===== */
#omar-appnav::before{
-webkit-mask:radial-gradient(circle 36px at var(--notch-x,50%) -2px, transparent 0 35px, #000 36px)!important;
mask:radial-gradient(circle 36px at var(--notch-x,50%) -2px, transparent 0 35px, #000 36px)!important;
}
.oan-item.oan-on .oan-ico{transform:translateY(-34px)!important;}
.oan-item.oan-on .oan-lbl{bottom:8px!important;}
/* ---- omar-ui28 ---- */
/* ===== أزرار قائمة المُشغّل (تخصيص أعلى ليغلب أي قاعدة في styles.css) ===== */
html[data-theme='light'] .lnch3-actions-bar .lnch3-menu-action-btn{
background:#FFFFFF!important;border:1px solid rgba(160,120,48,.18)!important;color:#A07830!important;box-shadow:0 2px 9px rgba(160,120,48,.1)!important;
}
html[data-theme='light'] .lnch3-actions-bar .lnch3-menu-action-btn-logout{color:#dc2626!important;}
html[data-theme='light'] .lnch3-actions-bar .lnch3-menu-action-btn:hover{background:#F6F0E3!important;border-color:rgba(160,120,48,.3)!important;color:#E3A92C!important;}
html[data-theme='light'] .lnch3-actions-bar .lnch3-menu-action-btn-logout:hover{color:#ef4444!important;background:#FFF5F5!important;}
html[data-theme='light'] .notif-bell-badge{border-color:#fff!important;}
/* ============================================================
RON RECEPTION OVERHAUL — شاشة الاستقبال (فحمي + توهّج أمبر)
(#s-rec يمنح أسبقية تغلب الوضعين الليلي/النهاري)
============================================================ */
#s-rec .rec-v3-wrap{ background:#080b12 !important; }
#s-rec .rec-v3-bg-grid{
background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px) !important;
background-size:42px 42px !important; opacity:1 !important;
-webkit-mask:radial-gradient(135% 90% at 80% 0,#000,transparent 72%) !important; mask:radial-gradient(135% 90% at 80% 0,#000,transparent 72%) !important;
}
#s-rec .rec-v3-bg-glow-1{ background:radial-gradient(circle, rgba(255,122,24,.20), transparent 68%) !important; opacity:1 !important; filter:blur(10px) !important; }
#s-rec .rec-v3-bg-glow-2{ background:radial-gradient(circle, rgba(255,160,60,.12), transparent 70%) !important; opacity:1 !important; }
/* رأس الشاشة */
#s-rec .rec-v3-hdr{
background:linear-gradient(150deg, rgba(22,18,14,.92), rgba(10,12,18,.96)) !important;
border:1px solid rgba(255,138,46,.18) !important; border-radius:22px !important;
box-shadow:0 26px 60px -32px rgba(0,0,0,.8), 0 0 40px -14px rgba(255,122,24,.35), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#s-rec .rec-v3-hdr::after{ background:linear-gradient(90deg,transparent,#ff7a18,#ffb347,transparent) !important; }
#s-rec .rec-id-greet-txt{ color:#ffb37a !important; letter-spacing:.5px !important; }
/* البطاقات: زجاج فحمي + حافة أمبر */
#s-rec .rec-pro-card{
background:linear-gradient(160deg, rgba(24,26,34,.74), rgba(11,14,22,.9)) !important;
border:1px solid rgba(255,255,255,.06) !important; border-radius:20px !important;
box-shadow:0 26px 60px -32px rgba(0,0,0,.78), inset 0 1px 0 rgba(255,255,255,.04) !important;
-webkit-backdrop-filter:blur(16px) !important; backdrop-filter:blur(16px) !important;
}
#s-rec .rec-pro-card::before{ border-color:rgba(255,138,46,.45) !important; }
#s-rec .rec-pro-card::after{ border-color:rgba(255,138,46,.45) !important; }
#s-rec .rec-pro-card-h{ border-bottom:1px solid rgba(255,255,255,.05) !important; }
#s-rec .rec-pro-card-title{ color:#F6F0E3 !important; letter-spacing:.3px !important; }
#s-rec .rec-section-h-bar{ background:linear-gradient(180deg,#ffb347,#ff7a18) !important; box-shadow:0 0 11px rgba(255,122,24,.65) !important; }
/* الحقول: زجاج داكن + تركيز أمبر */
#s-rec input[type=text], #s-rec input[type=tel], #s-rec input[type=number], #s-rec select, #s-rec textarea{
background:rgba(8,11,18,.72) !important; border:1px solid rgba(255,255,255,.09) !important; color:#eef2fb !important; border-radius:12px !important;
}
#s-rec input[type=text]:focus, #s-rec input[type=tel]:focus, #s-rec input[type=number]:focus, #s-rec select:focus, #s-rec textarea:focus{
border-color:rgba(255,138,46,.65) !important; box-shadow:0 0 0 3px rgba(255,138,46,.16) !important; outline:none !important;
}
/* بطاقة الحساب = كرت "Nuclear Danger" (توهّج أمبر + أشرطة متدرّجة) */
#s-rec .rec-calc-future{
background:radial-gradient(130% 85% at 50% 0, rgba(255,122,24,.13), transparent 58%), linear-gradient(160deg, rgba(26,24,30,.86), rgba(11,13,20,.94)) !important;
border:1px solid rgba(255,138,46,.22) !important;
box-shadow:0 30px 72px -34px rgba(255,122,24,.45), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#s-rec .rec-calc-future .rcf-row::after{ background:linear-gradient(90deg,#ff7a18,rgba(255,122,24,0)) !important; opacity:.75 !important; height:2px !important; }
#s-rec .rec-calc-future .rcf-disc::after{ background:linear-gradient(90deg,#ff5a5a,rgba(255,90,90,0)) !important; }
#s-rec .rec-calc-future .rcf-total{ border-top:1px solid rgba(255,138,46,.3) !important; }
#s-rec .rec-calc-future .rcf-total span:last-child{ color:#ff9a3c !important; text-shadow:0 0 14px rgba(255,122,24,.5) !important; }
/* المعاينة (التذكرة الذكية): توهّج أمبر */
#s-rec .wiz-ticket{ box-shadow:0 34px 80px -34px rgba(255,150,60,.5), 0 0 0 1px rgba(255,170,80,.18), inset 0 1px 0 rgba(255,255,255,.06) !important; }
#s-rec .wiz-ticket-eyebrow{ color:#ffb37a !important; }
#s-rec .wiz-ticket-price b{ color:#ff9a3c !important; }
/* القائمة السفلية: الدائرة النشطة أمبر لتناسق الطابع */
.oan-item.oan-on .oan-ico{ background:linear-gradient(135deg,#ffb347,#ff7a18) !important; box-shadow:0 12px 28px -6px rgba(255,122,24,.85), 0 0 26px rgba(255,154,60,.55) !important; }
@keyframes oanGlow{0%,100%{box-shadow:0 12px 28px -6px rgba(255,122,24,.85),0 0 22px rgba(255,154,60,.45)}50%{box-shadow:0 15px 36px -4px rgba(255,122,24,1),0 0 42px rgba(255,154,60,.8)}}
.oan-item.oan-on .oan-lbl{ color:#ffc890 !important; }
.oan-item.oan-next .oan-ico{ color:#ffb37a !important; }
/* ============================================================
RON OVERHAUL v2 — تخصيص أعلى ليغلب القواعد الزرقاء السابقة
============================================================ */
/* بطاقات النموذج الفحمية (تغلب #s-rec .rec-form-side > .rec-pro-card السابقة) */
#s-rec .rec-form-side > .rec-pro-card{
background:linear-gradient(160deg, rgba(26,27,34,.8), rgba(9,12,19,.93)) !important;
border:1px solid rgba(255,255,255,.06) !important; border-radius:20px !important;
box-shadow:0 26px 60px -32px rgba(0,0,0,.82), 0 0 36px -22px rgba(255,122,24,.3), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
#s-rec .rec-form-side > .rec-pro-card::before,
#s-rec .rec-form-side > .rec-pro-card::after{ border-color:rgba(255,138,46,.5) !important; }
/* بطاقة المعاينة (placeholder) الزرقاء -> فحمي + أمبر (تخصيص بـ ID مزدوج يغلب الوضعين) */
#s-rec #rec-preview-placeholder.rec-ph-future,
html[data-theme='light'] #s-rec #rec-preview-placeholder.rec-ph-future{
background:radial-gradient(125% 110% at 50% 0%, rgba(255,122,24,.16), transparent 56%), linear-gradient(160deg, #15110c, #090b11) !important;
border:1px solid rgba(255,138,46,.22) !important;
box-shadow:0 30px 70px -30px rgba(255,122,24,.45), inset 0 1px 0 rgba(255,255,255,.04) !important;
color:#ffd9b0 !important;
}
#s-rec #rec-preview-placeholder .rec-ph-orb{
background:radial-gradient(circle, rgba(255,150,50,.6), rgba(255,90,20,.18) 48%, transparent 70%) !important;
filter:blur(6px) !important;
}
#s-rec #rec-preview-placeholder .rec-ph-grid{
background-image:linear-gradient(rgba(255,150,60,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,150,60,.07) 1px,transparent 1px) !important;
}
#s-rec #rec-preview-placeholder .rec-ph-scan{ background:linear-gradient(90deg,transparent,rgba(255,154,60,.65),transparent) !important; }
#s-rec #rec-preview-placeholder .rec-ph-title{ color:#ff9a3c !important; text-shadow:0 0 18px rgba(255,122,24,.55) !important; }
#s-rec #rec-preview-placeholder .rec-ph-sub{ color:#caa988 !important; }
#s-rec #rec-preview-placeholder .rec-ph-dots span{ background:rgba(255,154,60,.55) !important; }
/* مؤشّر تقدّم الأسهم العلوية -> أمبر */
#s-rec .rhn-prog-bar > b{ background:linear-gradient(90deg,#ffb347,#ff7a18) !important; }
#s-rec .rhn-btn:hover:not(:disabled){ background:rgba(255,138,46,.18) !important; border-color:rgba(255,138,46,.5) !important; color:#fff !important; }
/* ============================================================
RON CALM v3 — أناقة وهدوء وتنظيم: تقليل التوهّج + تهدئة الألوان
اللون النحاسي الهادئ #d98a4a بدل البرتقالي الصاخب
============================================================ */
/* خلفية أهدأ */
#s-rec .rec-v3-wrap{ background:#0c0e13 !important; }
#s-rec .rec-v3-bg-glow-1{ background:radial-gradient(circle, rgba(217,138,74,.10), transparent 70%) !important; filter:blur(8px) !important; }
#s-rec .rec-v3-bg-glow-2{ background:radial-gradient(circle, rgba(217,138,74,.05), transparent 72%) !important; }
#s-rec .rec-v3-bg-grid{ opacity:.5 !important; }
/* رأس الشاشة — هادئ */
#s-rec .rec-v3-hdr{
background:linear-gradient(150deg, rgba(20,19,16,.92), rgba(11,12,17,.96)) !important;
border:1px solid rgba(255,255,255,.07) !important;
box-shadow:0 22px 50px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#s-rec .rec-v3-hdr::after{ background:linear-gradient(90deg,transparent,rgba(217,138,74,.55),transparent) !important; opacity:.6 !important; }
#s-rec .rec-id-greet-txt{ color:#c79a6f !important; }
/* البطاقات — حدّ رفيع وظلّ ناعم بلا توهّج */
#s-rec .rec-form-side > .rec-pro-card{
background:linear-gradient(160deg, rgba(22,23,29,.84), rgba(10,12,17,.93)) !important;
border:1px solid rgba(255,255,255,.06) !important; border-radius:18px !important;
box-shadow:0 20px 48px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03) !important;
}
#s-rec .rec-form-side > .rec-pro-card::before,
#s-rec .rec-form-side > .rec-pro-card::after{ border-color:rgba(217,138,74,.32) !important; opacity:.55 !important; }
#s-rec .rec-pro-card-title{ color:#F6F0E3 !important; }
#s-rec .rec-section-h-bar{ background:linear-gradient(180deg,#d98a4a,#bd7236) !important; box-shadow:0 0 5px rgba(217,138,74,.35) !important; }
/* الحقول — هادئة */
#s-rec input[type=text], #s-rec input[type=tel], #s-rec input[type=number], #s-rec select, #s-rec textarea{
background:rgba(8,10,15,.7) !important; border:1px solid rgba(255,255,255,.08) !important; color:#eef2fb !important; border-radius:11px !important;
}
#s-rec input[type=text]:focus, #s-rec input[type=tel]:focus, #s-rec input[type=number]:focus, #s-rec select:focus, #s-rec textarea:focus{
border-color:rgba(217,138,74,.55) !important; box-shadow:0 0 0 3px rgba(217,138,74,.1) !important; outline:none !important;
}
/* بطاقة الحساب — هادئة بأشرطة خفيفة */
#s-rec .rec-calc-future{
background:linear-gradient(160deg, rgba(22,23,29,.88), rgba(11,13,18,.94)) !important;
border:1px solid rgba(255,255,255,.07) !important;
box-shadow:0 22px 50px -34px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#s-rec .rec-calc-future .rcf-row::after{ background:linear-gradient(90deg, rgba(217,138,74,.55), transparent) !important; opacity:.38 !important; height:2px !important; }
#s-rec .rec-calc-future .rcf-disc::after{ background:linear-gradient(90deg, rgba(214,120,120,.5), transparent) !important; }
#s-rec .rec-calc-future .rcf-total{ border-top:1px solid rgba(255,255,255,.08) !important; }
#s-rec .rec-calc-future .rcf-total span:last-child{ color:#dca06a !important; text-shadow:none !important; }
/* ===== التذكرة الحيّة (بعد إدخال البيانات): فحمي نحاسي هادئ بدل البنفسجي ===== */
#rec-preview-wrap .wiz-ticket, #wiz-summary .wiz-ticket, #s-rec .wiz-ticket{
background:linear-gradient(160deg, #16181f, #0d0f15) !important;
border:1px solid rgba(255,255,255,.07) !important;
box-shadow:0 22px 52px -32px rgba(0,0,0,.82), inset 0 1px 0 rgba(255,255,255,.035) !important;
}
#rec-preview-wrap .wiz-ticket::after, #wiz-summary .wiz-ticket::after{ background:linear-gradient(90deg,transparent,rgba(217,138,74,.5),transparent) !important; opacity:.45 !important; }
#s-rec .wiz-ticket-eyebrow{ color:#9c8e7c !important; letter-spacing:1.8px !important; }
#s-rec .wiz-ticket-rows label, #s-rec .wiz-ticket-price label{ color:#A07830 !important; }
#s-rec .wiz-ticket-plate span{ background:rgba(255,255,255,.04) !important; border:1.5px dashed rgba(255,255,255,.16) !important; color:#F6F0E3 !important; }
#s-rec .wiz-ticket-price{ border-top:1px solid rgba(255,255,255,.08) !important; }
#s-rec .wiz-ticket-price b{ background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; -webkit-text-fill-color:#dca06a !important; color:#dca06a !important; }
/* لوحة المعاينة الفارغة — توهّج خافت */
#s-rec #rec-preview-placeholder.rec-ph-future,
html[data-theme='light'] #s-rec #rec-preview-placeholder.rec-ph-future{
background:radial-gradient(120% 100% at 50% 0%, rgba(217,138,74,.08), transparent 55%), linear-gradient(160deg, #131119, #0a0c11) !important;
border:1px solid rgba(255,255,255,.07) !important;
box-shadow:0 22px 52px -34px rgba(0,0,0,.8) !important;
color:#d8c4ad !important;
}
#s-rec #rec-preview-placeholder .rec-ph-orb{ background:radial-gradient(circle, rgba(217,138,74,.32), transparent 64%) !important; filter:blur(12px) !important; }
#s-rec #rec-preview-placeholder .rec-ph-title{ color:#dca06a !important; text-shadow:none !important; }
#s-rec #rec-preview-placeholder .rec-ph-sub{ color:#9a8b76 !important; }
#s-rec #rec-preview-placeholder .rec-ph-scan{ background:linear-gradient(90deg,transparent,rgba(217,138,74,.45),transparent) !important; }
#s-rec #rec-preview-placeholder .rec-ph-dots span{ background:rgba(217,138,74,.5) !important; }
/* القائمة السفلية — هادئة بلا نبض */
.oan-item.oan-on .oan-ico{ background:linear-gradient(135deg,#dca06a,#bd7236) !important; box-shadow:0 10px 24px -8px rgba(189,114,54,.55), 0 0 14px rgba(217,138,74,.3) !important; animation:none !important; }
.oan-item.oan-on .oan-lbl{ color:#d8a87e !important; }
.oan-item.oan-next .oan-ico{ color:#caa07a !important; }
/* ============================================================
إصلاح القائمة السفلية للوحة التحكم تغطّي المحتوى (بلا مساس بالمنطق)
============================================================ */
/* النوافذ (.overlay) كانت z-index:600 أي أسفل الشريط (1500) فيغطّيها.
نرفعها فوق الشريط لتظهر أزرارها كاملة (تبقى التنبيهات 99999 أعلى الجميع). */
.overlay{ z-index:2000 !important; }
/* مساحة سفلية للمحتوى القابل للتمرير طوال ظهور الشريط (حتى 1024px) + المنطقة الآمنة */
@media(max-width:1024px){
.dash-content{ padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important; }
}
/* ============================================================
قائمة الاستقبال: تناسق وتغطية (#omar-appnav)
1) خفض z-index أسفل النوافذ (.overlay=2000) فتعلوها النافذة بدل أن تغطّيها القائمة
2) تلوين بالفحمي النحاسي ليتناسق مع شاشة الاستقبال الهادئة
============================================================ */
#omar-appnav{ z-index:1500 !important; }
/* خلفية الشريط فحمية (الوضع الداكن) — لا نمسّ قناع التجويف */
html[data-theme='dark'] #omar-appnav{ background:transparent !important; border:none !important; }
html[data-theme='dark'] #omar-appnav::before{
background:linear-gradient(180deg, rgba(21,22,29,.96), rgba(11,13,18,.99)) !important;
border:1px solid rgba(255,255,255,.08) !important;
box-shadow:0 24px 55px -18px rgba(0,0,0,.78), 0 0 30px -14px rgba(217,138,74,.26), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
/* لمعان الحدّ نحاسي بدل البنفسجي-السماوي */
#omar-appnav::after{
background:linear-gradient(120deg,transparent 30%, rgba(217,138,74,.5), rgba(189,114,54,.4), transparent 70%) !important;
opacity:.7 !important;
}
/* الأيقونات والوسوم — نحاسي خافت */
html[data-theme='dark'] .oan-ico{ background:rgba(217,138,74,.08) !important; border:1px solid rgba(255,255,255,.1) !important; color:#9a8b76 !important; }
html[data-theme='dark'] .oan-lbl{ color:#9a8b76 !important; }
/* المرحلة المكتملة — نحاسي فاتح */
.oan-item.oan-done .oan-ico{ background:rgba(217,138,74,.14) !important; border-color:rgba(217,138,74,.36) !important; color:#caa07a !important; }
/* المرحلة النشطة — دائرة نحاسية هادئة بلا نبض */
.oan-item.oan-on .oan-ico{ background:linear-gradient(135deg,#dca06a,#bd7236) !important; border:5px solid #131419 !important; box-shadow:0 14px 30px -8px rgba(189,114,54,.7),0 0 0 1px rgba(217,138,74,.3) !important; animation:none !important; }
.oan-item.oan-on .oan-lbl{ color:#d8a87e !important; }
/* ============================================================
شاشة الاستقبال: تناسق الوضع النهاري + أزرار الهيدر (نحاسي/فاتح)
============================================================ */
/* أزرار الهيدر مرئية في النهاري (كانت أبيض على أبيض) */
html[data-theme='light'] #s-rec .rec-menu-action-btn{
background:linear-gradient(180deg,#ffffff,#f1f4fb) !important;
border:1px solid rgba(160,120,48,.18) !important;
color:#A07830 !important;
box-shadow:0 4px 12px rgba(160,120,48,.10), inset 0 1px 0 #fff !important;
}
html[data-theme='light'] #s-rec .rec-menu-action-btn:hover{ background:#F6F0E3 !important; border-color:rgba(160,120,48,.3) !important; color:#23201B !important; }
html[data-theme='light'] #s-rec .rec-menu-action-btn-logout{ color:#dc2626 !important; }
html[data-theme='light'] #s-rec .rec-menu-toggle{ background:linear-gradient(155deg,#ffffff,#f5efe4) !important; border:1.5px solid rgba(189,114,54,.5) !important; }
html[data-theme='light'] #s-rec .rec-menu-toggle svg{ stroke:#bd7236 !important; color:#bd7236 !important; }
/* تجاوب: الأزرار تتّسع دون تجاوز حافة الشاشة */
@media(max-width:600px){
#s-rec .rec-menu-action-btn{ width:42px !important; height:42px !important; }
#s-rec .rec-actions-bar{ gap:6px !important; }
#s-rec .rec-actions-bar.is-open{ max-width:calc(100vw - 78px) !important; }
}
/* لوحة الهوية: نحاسية بدل البنفسجي (يبقى النص الأبيض واضحًا) */
html[data-theme='light'] #s-rec .rec-id-panel{
background:linear-gradient(135deg,#4a3922 0%,#7a5230 48%,#3a2c1a 100%) !important;
box-shadow:0 12px 34px rgba(120,80,40,.28), inset 0 2px 0 rgba(255,255,255,.12) !important;
}
html[data-theme='light'] #s-rec .rec-v3-hdr{
background:linear-gradient(150deg,#ffffff,#f3f6fc) !important;
border:1px solid rgba(160,120,48,.12) !important;
box-shadow:0 14px 36px -26px rgba(160,120,48,.3), inset 0 1px 0 #fff !important;
}
html[data-theme='light'] #s-rec .rec-id-greet-txt{ color:#e9d6bf !important; }
html[data-theme='light'] #s-rec .rec-section-h-title{ color:#A07830 !important; }
html[data-theme='light'] #s-rec .rec-pro-card-title{ color:#23201B !important; }
html[data-theme='light'] #s-rec .rec-pro-card-sub{ color:#5F584C !important; }
html[data-theme='light'] #s-rec .rec-section-h-bar{ background:linear-gradient(180deg,#bd7236,#a9632a) !important; }
/* البطاقات فاتحة */
html[data-theme='light'] #s-rec .rec-form-side > .rec-pro-card{
background:#ffffff !important;
border:1px solid rgba(160,120,48,.12) !important;
box-shadow:0 16px 40px -30px rgba(160,120,48,.32), inset 0 1px 0 #fff !important;
}
html[data-theme='light'] #s-rec .rec-form-side > .rec-pro-card::before,
html[data-theme='light'] #s-rec .rec-form-side > .rec-pro-card::after{ border-color:rgba(189,114,54,.3) !important; }
/* الحقول فاتحة */
html[data-theme='light'] #s-rec input[type=text],
html[data-theme='light'] #s-rec input[type=tel],
html[data-theme='light'] #s-rec input[type=number],
html[data-theme='light'] #s-rec select,
html[data-theme='light'] #s-rec textarea{
background:#FBF7EF !important; border:1px solid rgba(160,120,48,.16) !important; color:#23201B !important;
}
html[data-theme='light'] #s-rec input:focus,
html[data-theme='light'] #s-rec select:focus,
html[data-theme='light'] #s-rec textarea:focus{
border-color:rgba(189,114,54,.55) !important; box-shadow:0 0 0 3px rgba(189,114,54,.12) !important;
}
/* بطاقة الحساب فاتحة */
html[data-theme='light'] #s-rec .rec-calc-future{
background:linear-gradient(160deg,#ffffff,#f3f6fc) !important;
border:1px solid rgba(160,120,48,.12) !important;
box-shadow:0 16px 40px -30px rgba(160,120,48,.3) !important;
}
html[data-theme='light'] #s-rec .rec-calc-future .rcf-total span:last-child{ color:#bd7236 !important; }
/* التذكرة الحيّة فاتحة (بعد إدخال البيانات) */
html[data-theme='light'] #rec-preview-wrap .wiz-ticket,
html[data-theme='light'] #wiz-summary .wiz-ticket,
html[data-theme='light'] #s-rec .wiz-ticket{
background:linear-gradient(160deg,#ffffff,#f1f5fc) !important;
border:1px solid rgba(160,120,48,.14) !important;
box-shadow:0 18px 44px -28px rgba(160,120,48,.35), inset 0 1px 0 #fff !important;
color:#23201B !important;
}
html[data-theme='light'] #s-rec .wiz-ticket-eyebrow{ color:#8a7a64 !important; }
html[data-theme='light'] #s-rec .wiz-ticket-rows label,
html[data-theme='light'] #s-rec .wiz-ticket-price label{ color:#A07830 !important; }
html[data-theme='light'] #s-rec .wiz-ticket-rows b{ color:#23201B !important; }
html[data-theme='light'] #s-rec .wiz-ticket-plate span{ color:#23201B !important; background:rgba(160,120,48,.05) !important; border:1.5px dashed rgba(189,114,54,.4) !important; }
html[data-theme='light'] #s-rec .wiz-ticket-price b{ -webkit-text-fill-color:#bd7236 !important; color:#bd7236 !important; background:none !important; }
/* لوحة المعاينة الفارغة فاتحة */
html[data-theme='light'] #s-rec #rec-preview-placeholder.rec-ph-future{
background:radial-gradient(120% 100% at 50% 0, rgba(189,114,54,.07), transparent 55%), linear-gradient(160deg,#ffffff,#F6F0E3) !important;
border:1px solid rgba(160,120,48,.12) !important;
box-shadow:0 16px 40px -30px rgba(160,120,48,.3) !important;
color:#5F584C !important;
}
html[data-theme='light'] #s-rec #rec-preview-placeholder .rec-ph-title{ color:#bd7236 !important; }
html[data-theme='light'] #s-rec #rec-preview-placeholder .rec-ph-sub{ color:#9A9285 !important; }
/* ============================================================
لوحة الهوية + هيدر البطاقات + أزرار الانتقال — لون راقٍ هادئ (الوضعين)
============================================================ */
/* (1) لوحة هوية المستخدم — سْليت أنيق هادئ بخيط نحاسي رفيع بدل البنّي */
#s-rec .rec-id-panel{
background:linear-gradient(140deg,#212a33,#A07830 52%,#1a232a) !important;
border:1px solid rgba(217,138,74,.22) !important;
box-shadow:0 16px 40px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html[data-theme='light'] #s-rec .rec-id-panel{
background:linear-gradient(140deg,#26323c,#33454f 52%,#1e2a32) !important;
box-shadow:0 16px 38px -20px rgba(30,45,55,.45), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#s-rec .rec-id-greet-txt{ color:#cdb69a !important; }
/* (2) أيقونة هيدر البطاقات — موحّدة نحاسية هادئة بدل الألوان المتفرّقة (الوضعين) */
#s-rec .rec-pro-card-ico{
background:linear-gradient(135deg,#dca06a,#bd7236) !important;
box-shadow:0 6px 16px -4px rgba(189,114,54,.5), 0 0 0 1px rgba(255,255,255,.12) inset !important;
color:#fff !important;
}
/* (3) أزرار الانتقال (الهيدر، سطح المكتب) — نحاسية متناسقة (الوضعين) */
/* الليلي */
#s-rec .rhn-btn{ border:1px solid rgba(217,138,74,.3) !important; background:rgba(217,138,74,.09) !important; color:#d8b89a !important; }
#s-rec .rhn-btn:hover:not(:disabled){ background:rgba(217,138,74,.2) !important; border-color:rgba(217,138,74,.55) !important; color:#fff !important; transform:translateY(-1px) !important; }
#s-rec .rhn-next.rhn-locked{ border-color:rgba(217,138,74,.5) !important; background:rgba(217,138,74,.12) !important; color:#e3ba8e !important; }
#s-rec .rhn-prog-num{ color:#a98f74 !important; }
#s-rec .rhn-prog-name{ color:#e6d4bd !important; }
#s-rec .rhn-prog-bar{ background:rgba(217,138,74,.18) !important; }
#s-rec .rhn-prog-bar > b{ background:linear-gradient(90deg,#dca06a,#bd7236) !important; }
/* النهاري */
html[data-theme='light'] #s-rec .rhn-btn{ color:#8a5a28 !important; border-color:rgba(189,114,54,.34) !important; background:rgba(189,114,54,.09) !important; }
html[data-theme='light'] #s-rec .rhn-btn:hover:not(:disabled){ background:rgba(189,114,54,.18) !important; border-color:rgba(189,114,54,.55) !important; color:#6b3f1c !important; }
html[data-theme='light'] #s-rec .rhn-next.rhn-locked{ color:#8a5a28 !important; border-color:rgba(189,114,54,.45) !important; background:rgba(189,114,54,.1) !important; }
html[data-theme='light'] #s-rec .rhn-prog-num{ color:#8a7a64 !important; }
html[data-theme='light'] #s-rec .rhn-prog-name{ color:#3a3526 !important; }
html[data-theme='light'] #s-rec .rhn-prog-bar{ background:rgba(189,114,54,.16) !important; }
html[data-theme='light'] #s-rec .rhn-prog-bar > b{ background:linear-gradient(90deg,#c98a4a,#a9632a) !important; }
/* ============================================================
انسجام الوضع النهاري (عين فنية) + ظهور أيقونات القائمة السفلية
لوحة دافئة راقية: سْليت + نحاسي + ورق أبيض دافئ، بلا بنفسجي/كريمي صاخب
============================================================ */
/* (A) القائمة السفلية في النهاري: سْليت متناغم مع لوحة الهوية + أيقونات واضحة */
html[data-theme='light'] #omar-appnav{ background:transparent !important; border:none !important; }
html[data-theme='light'] #omar-appnav::before{
background:linear-gradient(180deg,#A07830,#1e2730) !important;
border:1px solid rgba(217,138,74,.2) !important;
box-shadow:0 22px 52px -18px rgba(20,30,40,.5), 0 0 26px -14px rgba(217,138,74,.22), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html[data-theme='light'] #omar-appnav .oan-ico{ background:rgba(255,255,255,.07) !important; border:1px solid rgba(255,255,255,.15) !important; color:#E3A92C !important; }
html[data-theme='light'] #omar-appnav .oan-lbl{ color:#E3A92C !important; }
html[data-theme='light'] #omar-appnav .oan-item.oan-done .oan-ico{ background:rgba(217,138,74,.18) !important; border-color:rgba(217,138,74,.42) !important; color:#e6bd8e !important; }
html[data-theme='light'] #omar-appnav .oan-item.oan-on .oan-ico{ background:linear-gradient(135deg,#dca06a,#bd7236) !important; border:5px solid #23201B !important; color:#fff !important; }
html[data-theme='light'] #omar-appnav .oan-item.oan-on .oan-lbl{ color:#bd7236 !important; }
/* (B) زر نوع العميل المحدّد: نحاسي بدل البنفسجي/الذهبي (الوضعين) */
#s-rec .rec-ctype-btn.is-on{
border-color:rgba(189,114,54,.6) !important;
background:linear-gradient(135deg,rgba(217,138,74,.14),rgba(217,138,74,.04)) !important;
color:#cf9356 !important;
box-shadow:0 4px 14px rgba(189,114,54,.16) !important;
}
html[data-theme='light'] #s-rec .rec-ctype-btn.is-on{ color:#8a5a28 !important; }
/* (C) صندوق رمز الجوال +966: نظيف هادئ بدل الكريمي */
#s-rec .rec-phone-cc{
background:linear-gradient(160deg,rgba(217,138,74,.1),rgba(217,138,74,.03)) !important;
border-color:rgba(217,138,74,.28) !important;
}
#s-rec .rec-phone-code{ color:#cf9356 !important; }
html[data-theme='light'] #s-rec .rec-phone-cc{ background:#faf7f2 !important; border-color:rgba(189,114,54,.3) !important; }
html[data-theme='light'] #s-rec .rec-phone-code{ color:#8a5a28 !important; }
/* (D) صندوق بيانات الشركة: نحاسي بدل البنفسجي */
#s-rec .rec-company-box{
background:linear-gradient(160deg,rgba(217,138,74,.08),rgba(217,138,74,.02)) !important;
border:1px solid rgba(217,138,74,.25) !important;
}
/* (E) دفء راقٍ يريح العين في النهاري: بطاقات وحقول بورق أبيض دافئ بدل الأزرق البارد */
html[data-theme='light'] #s-rec .rec-form-side > .rec-pro-card{
background:#fdfbf7 !important; border:1px solid rgba(120,92,54,.12) !important;
box-shadow:0 16px 40px -30px rgba(90,70,40,.28), inset 0 1px 0 #fff !important;
border-radius:20px !important; overflow:hidden !important;
}
html[data-theme='light'] #s-rec input[type=text],
html[data-theme='light'] #s-rec input[type=tel],
html[data-theme='light'] #s-rec input[type=number],
html[data-theme='light'] #s-rec select,
html[data-theme='light'] #s-rec textarea{
background:#f8f5ef !important; border:1px solid rgba(120,92,54,.16) !important; color:#2c2820 !important;
}
html[data-theme='light'] #s-rec .rec-ctype-btn:not(.is-on){ background:#faf8f3 !important; border-color:rgba(120,92,54,.14) !important; }
/* ============================================================
بطاقة المستخدم: ليلية ساحرة (داكن) + فاتحة (نهاري) + قائمة سفلية فاتحة نهارًا
============================================================ */
/* (1) الليلي — لوحة هوية ساحرة: شفق أزرق + لمسة نحاسية + توهّج ناعم */
html[data-theme='dark'] #s-rec .rec-id-panel{
background:
radial-gradient(130% 130% at 12% -10%, rgba(86,116,180,.40), transparent 52%),
radial-gradient(120% 120% at 94% 112%, rgba(204,140,80,.20), transparent 50%),
linear-gradient(145deg,#1b2236,#262f48 48%,#141826) !important;
border:1px solid rgba(150,178,240,.20) !important;
box-shadow:0 24px 58px -24px rgba(0,0,0,.72), 0 0 50px -16px rgba(86,120,190,.42), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
html[data-theme='dark'] #s-rec .rec-id-panel-orb{ background:radial-gradient(circle, rgba(201,168,76,.24), transparent 62%) !important; filter:blur(8px) !important; }
html[data-theme='dark'] #s-rec .rec-id-name{ text-shadow:0 0 22px rgba(201,168,76,.28) !important; }
html[data-theme='dark'] #s-rec .rec-id-greet-txt{ color:#E3A92C !important; }
html[data-theme='dark'] #s-rec .rec-id-panel-shine{
background:linear-gradient(100deg,transparent 30%,rgba(180,205,255,.10),transparent 70%) !important;
background-size:240% 100% !important; animation:recIdAura 7s linear infinite !important; opacity:1 !important;
}
@keyframes recIdAura{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* (2-أ) النهاري — لوحة هوية فاتحة بنص داكن */
html[data-theme='light'] #s-rec .rec-id-panel{
background:linear-gradient(145deg,#ffffff,#F6F0E3 55%,#e9eefb) !important;
border:1px solid rgba(120,92,54,.2) !important;
box-shadow:0 16px 40px -24px rgba(70,85,140,.32), inset 0 1px 0 #fff !important;
}
html[data-theme='light'] #s-rec .rec-id-name{ background:none !important; -webkit-background-clip:initial !important; background-clip:initial !important; -webkit-text-fill-color:#A07830 !important; color:#A07830 !important; text-shadow:none !important; }
html[data-theme='light'] #s-rec .rec-id-greet-txt{ color:#8a5a28 !important; }
/* (2-ب) النهاري — القائمة السفلية فاتحة بأيقونات داكنة (العنصر شفاف لإبقاء التجويف) */
html[data-theme='light'] #omar-appnav{ background:transparent !important; border:none !important; }
html[data-theme='light'] #omar-appnav::before{
background:linear-gradient(180deg,#ffffff,#F6F0E3) !important;
border:1px solid rgba(120,92,54,.16) !important;
box-shadow:0 22px 52px -18px rgba(70,85,140,.3), 0 0 24px -14px rgba(189,114,74,.18), inset 0 1px 0 #fff !important;
}
html[data-theme='light'] #omar-appnav .oan-ico{ background:rgba(120,92,54,.07) !important; border:1px solid rgba(120,92,54,.18) !important; color:#7a5a34 !important; }
html[data-theme='light'] #omar-appnav .oan-lbl{ color:#6a5436 !important; }
html[data-theme='light'] #omar-appnav .oan-item.oan-done .oan-ico{ background:rgba(217,138,74,.16) !important; border-color:rgba(217,138,74,.42) !important; color:#bd7236 !important; }
html[data-theme='light'] #omar-appnav .oan-item.oan-on .oan-ico{ background:linear-gradient(135deg,#dca06a,#bd7236) !important; border:5px solid #ffffff !important; color:#fff !important; box-shadow:0 12px 28px -8px rgba(189,114,54,.55) !important; }
html[data-theme='light'] #omar-appnav .oan-item.oan-on .oan-lbl{ color:#bd7236 !important; }
/* ============================================================
بطاقة المستخدم = تنسيق القائمة السفلية الليلية + لمسة فنان
(زجاج فحمي + حدّ رفيع + توهّج نحاسي + بلور، مع تفتّح نحاسي ولمعة)
============================================================ */
html[data-theme='dark'] #s-rec .rec-id-panel{
background:
radial-gradient(95% 130% at 88% -12%, rgba(217,138,74,.17), transparent 55%),
linear-gradient(180deg, rgba(21,22,29,.96), rgba(11,13,18,.99)) !important;
border:1px solid rgba(255,255,255,.08) !important;
border-radius:20px !important;
box-shadow:0 24px 55px -18px rgba(0,0,0,.78), 0 0 30px -14px rgba(217,138,74,.26), inset 0 1px 0 rgba(255,255,255,.05) !important;
-webkit-backdrop-filter:blur(20px) saturate(160%) !important; backdrop-filter:blur(20px) saturate(160%) !important;
}
/* لمسة فنان: حلقة نحاسية رفيعة في الأعلى */
html[data-theme='dark'] #s-rec .rec-id-panel::after{
content:'' !important; position:absolute !important; left:14px; right:14px; top:0;
height:1px !important;
background:linear-gradient(90deg,transparent,rgba(217,138,74,.55),transparent) !important;
pointer-events:none !important;
}
html[data-theme='dark'] #s-rec .rec-id-panel-orb{ background:radial-gradient(circle, rgba(217,138,74,.22), transparent 62%) !important; filter:blur(10px) !important; }
html[data-theme='dark'] #s-rec .rec-id-panel-shine{
background:linear-gradient(100deg,transparent 32%,rgba(224,170,110,.13),transparent 68%) !important;
background-size:240% 100% !important; animation:recIdAura 7.5s linear infinite !important; opacity:1 !important;
}
html[data-theme='dark'] #s-rec .rec-id-name{ text-shadow:0 0 16px rgba(217,138,74,.22) !important; }
html[data-theme='dark'] #s-rec .rec-id-greet-txt{ color:#d8b48a !important; }
/* ============================================================
بطاقة المستخدم النهارية = القائمة السفلية النهارية + لمسة فنان
(زجاج أبيض + حدّ نحاسي رفيع + توهّج نحاسي خفيف)
============================================================ */
html[data-theme='light'] #s-rec .rec-id-panel{
background:
radial-gradient(95% 130% at 88% -12%, rgba(189,114,54,.10), transparent 55%),
linear-gradient(180deg,#ffffff,#F6F0E3) !important;
border:1px solid rgba(120,92,54,.16) !important;
border-radius:20px !important;
box-shadow:0 22px 52px -18px rgba(70,85,140,.3), 0 0 24px -14px rgba(189,114,74,.18), inset 0 1px 0 #fff !important;
-webkit-backdrop-filter:blur(20px) saturate(160%) !important; backdrop-filter:blur(20px) saturate(160%) !important;
}
html[data-theme='light'] #s-rec .rec-id-panel::after{
content:'' !important; position:absolute !important; left:14px; right:14px; top:0; height:1px !important;
background:linear-gradient(90deg,transparent,rgba(189,114,74,.5),transparent) !important; pointer-events:none !important;
}
html[data-theme='light'] #s-rec .rec-id-panel-orb{ background:radial-gradient(circle, rgba(189,114,74,.14), transparent 62%) !important; filter:blur(10px) !important; }
html[data-theme='light'] #s-rec .rec-id-panel-shine{ background:none !important; animation:none !important; }
/* ============================================================
أزرار الانتقال (سطح المكتب) — تصميم ذكي ديناميكي منظّم (الوضعين)
(لا نمسّ خاصية display حفاظًا على الإخفاء في الجوال)
============================================================ */
/* عنقود تحكّم متماسك */
#s-rec .rec-hdr-nav{
align-items:center !important; gap:6px !important;
padding:5px !important; border-radius:16px !important;
background:rgba(217,138,74,.05) !important;
border:1px solid rgba(217,138,74,.16) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
}
/* أزرار شبحية بحركة اتجاهية */
#s-rec .rhn-btn{
display:inline-flex !important; align-items:center !important; gap:6px !important;
height:36px !important; width:auto !important; padding:0 13px !important; border-radius:11px !important;
background:transparent !important; border:1px solid transparent !important;
color:#caa07a !important; font-weight:800 !important; font-size:11.5px !important;
transition:all .22s cubic-bezier(.34,1.4,.5,1) !important; cursor:pointer !important;
}
#s-rec .rhn-btn svg{ width:15px !important; height:15px !important; transition:transform .22s !important; }
#s-rec .rhn-btn:hover:not(:disabled){
background:linear-gradient(135deg,rgba(217,138,74,.2),rgba(189,114,54,.1)) !important;
border-color:rgba(217,138,74,.4) !important; color:#f0d4b4 !important;
transform:translateY(-2px) !important; box-shadow:0 8px 18px -8px rgba(189,114,54,.6) !important;
}
#s-rec .rhn-prev:hover:not(:disabled) svg{ transform:translateX(3px) !important; }
#s-rec .rhn-next:hover:not(:disabled) svg{ transform:translateX(-3px) !important; }
#s-rec .rhn-btn:disabled{ opacity:.4 !important; cursor:not-allowed !important; }
/* حالة القفل: منقّطة نحاسية بنبض هادئ */
#s-rec .rhn-next.rhn-locked{
opacity:1 !important; color:#e3ba8e !important;
background:rgba(217,138,74,.08) !important;
border:1px dashed rgba(217,138,74,.5) !important;
font-size:10.5px !important;
animation:rhnPulse 2.2s ease-in-out infinite !important;
}
@keyframes rhnPulse{0%,100%{box-shadow:0 0 0 0 rgba(217,138,74,0)}50%{box-shadow:0 0 0 4px rgba(217,138,74,.12)}}
/* التقدّم — رقم بشريحة + اسم + شريط مقسّم 5 خطوات */
#s-rec .rhn-prog{
display:flex !important; flex-direction:column !important; align-items:center !important;
gap:4px !important; min-width:96px !important; padding:0 11px !important;
border-inline:1px solid rgba(217,138,74,.14) !important;
}
#s-rec .rhn-prog-num{
font-family:'IBM Plex Mono',monospace !important; font-size:9.5px !important; font-weight:800 !important;
color:#bd7236 !important; background:rgba(217,138,74,.12) !important;
padding:2px 9px !important; border-radius:999px !important; letter-spacing:1px !important;
}
#s-rec .rhn-prog-name{ font-size:12.5px !important; font-weight:900 !important; color:#e6d4bd !important; }
#s-rec .rhn-prog-bar{
position:relative !important; width:92px !important; height:5px !important; border-radius:99px !important; overflow:hidden !important;
background:repeating-linear-gradient(90deg, rgba(217,138,74,.18) 0 calc(20% - 2px), transparent calc(20% - 2px) 20%) !important;
}
#s-rec .rhn-prog-bar > b{
display:block !important; height:100% !important; border-radius:99px !important;
background:linear-gradient(90deg,#dca06a,#bd7236) !important;
box-shadow:0 0 8px rgba(217,138,74,.6) !important;
transition:width .5s cubic-bezier(.16,1,.3,1) !important; position:relative !important;
}
#s-rec .rhn-prog-bar > b::after{
content:'' !important; position:absolute !important; inset:0 !important;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent) !important;
background-size:200% 100% !important; animation:rhnShine 2.4s linear infinite !important;
}
@keyframes rhnShine{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* النهاري */
html[data-theme='light'] #s-rec .rec-hdr-nav{ background:rgba(189,114,54,.06) !important; border-color:rgba(189,114,54,.18) !important; }
html[data-theme='light'] #s-rec .rhn-btn{ color:#8a5a28 !important; }
html[data-theme='light'] #s-rec .rhn-btn:hover:not(:disabled){ background:linear-gradient(135deg,rgba(189,114,54,.16),rgba(189,114,54,.06)) !important; border-color:rgba(189,114,54,.4) !important; color:#6b3f1c !important; box-shadow:0 8px 18px -8px rgba(189,114,54,.4) !important; }
html[data-theme='light'] #s-rec .rhn-next.rhn-locked{ color:#8a5a28 !important; border-color:rgba(189,114,54,.5) !important; background:rgba(189,114,54,.07) !important; }
html[data-theme='light'] #s-rec .rhn-prog{ border-inline-color:rgba(189,114,54,.16) !important; }
html[data-theme='light'] #s-rec .rhn-prog-num{ color:#8a5a28 !important; background:rgba(189,114,54,.12) !important; }
html[data-theme='light'] #s-rec .rhn-prog-name{ color:#3a3526 !important; }
html[data-theme='light'] #s-rec .rhn-prog-bar{ background:repeating-linear-gradient(90deg, rgba(189,114,54,.2) 0 calc(20% - 2px), transparent calc(20% - 2px) 20%) !important; }
html[data-theme='light'] #s-rec .rhn-prog-bar > b{ background:linear-gradient(90deg,#c98a4a,#a9632a) !important; box-shadow:0 0 8px rgba(189,114,54,.5) !important; }
/* ============================================================
(الجوال) رفع لوحة المعاينة تحت الحقول مباشرة + ديناميكية
============================================================ */
@media(max-width:980px){
#s-rec .rec-form-side{ padding-bottom:10px !important; }
#s-rec .rec-body{ padding-bottom:150px !important; }
#s-rec .rec-preview-side{ margin-top:8px !important; transition:opacity .4s ease, transform .45s cubic-bezier(.16,1,.3,1) !important; }
}
/* ============================================================
سهما التنقّل فوق القائمة السفلية (الجوال) — ذكيان وديناميكيان
============================================================ */
#oan-arrows{
position:fixed; left:50%; transform:translateX(-50%);
width:min(94vw,440px); max-width:calc(100vw - 20px);
display:none; justify-content:space-between; align-items:center;
bottom:calc(env(safe-area-inset-bottom,0px) + 92px);
z-index:1501; pointer-events:none; box-sizing:border-box; padding:0 6px;
}
@media(min-width:981px){ #oan-arrows{ display:none !important; } }
#oan-arrows .oan-arrow{
pointer-events:auto; width:44px; height:44px; border-radius:50%;
display:flex; align-items:center; justify-content:center; cursor:pointer;
border:1px solid rgba(217,138,74,.3); background:rgba(20,21,28,.72);
-webkit-backdrop-filter:blur(16px) saturate(160%); backdrop-filter:blur(16px) saturate(160%);
color:#dca06a; box-shadow:0 10px 26px -10px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
transition:transform .25s cubic-bezier(.34,1.5,.5,1), background .25s, box-shadow .25s, opacity .25s, color .25s;
}
#oan-arrows .oan-arrow svg{ width:20px; height:20px; }
#oan-arrows .oan-arrow:active{ transform:scale(.86); }
/* جاهز للانتقال: نحاسي متوهّج بنبض هادئ */
#oan-arrows .oan-arrow-ready{
border-color:rgba(217,138,74,.6); color:#fff;
background:linear-gradient(135deg,#dca06a,#bd7236);
box-shadow:0 12px 30px -8px rgba(189,114,54,.7), inset 0 1px 0 rgba(255,255,255,.25);
animation:oanArrowGlow 1.9s ease-in-out infinite;
}
@keyframes oanArrowGlow{0%,100%{box-shadow:0 12px 28px -10px rgba(189,114,54,.5),inset 0 1px 0 rgba(255,255,255,.25)}50%{box-shadow:0 12px 36px -6px rgba(189,114,54,.95),inset 0 1px 0 rgba(255,255,255,.25)}}
/* مقفل: المرحلة غير مكتملة */
#oan-arrows .oan-arrow-locked{ opacity:.5; }
/* غير متاح (حافة) */
#oan-arrows .oan-arrow-off{ opacity:.22; pointer-events:none; }
.oan-arrow-tap{ animation:oanArrowTap .42s ease !important; }
@keyframes oanArrowTap{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
/* النهاري */
html[data-theme='light'] #oan-arrows .oan-arrow{ background:rgba(255,255,255,.88); border-color:rgba(189,114,54,.32); color:#bd7236; box-shadow:0 10px 26px -10px rgba(201,168,76,.35), inset 0 1px 0 #fff; }
html[data-theme='light'] #oan-arrows .oan-arrow-ready{ background:linear-gradient(135deg,#dca06a,#bd7236); color:#fff; border-color:rgba(189,114,54,.6); }
/* ============================================================
أزرار التالي/السابق مستطيلة بتسمية أنيقة وتأثير مفهوم
============================================================ */
#oan-arrows .oan-arrow{
width:auto !important; min-width:104px !important; height:44px !important;
border-radius:14px !important; padding:0 16px !important; gap:8px !important;
font-family:inherit !important; font-weight:800 !important; font-size:13px !important;
}
#oan-arrows .oan-arrow .oan-arrow-lbl{ white-space:nowrap !important; line-height:1 !important; }
#oan-arrows .oan-arrow svg{ width:16px !important; height:16px !important; transition:transform .3s cubic-bezier(.34,1.5,.5,1) !important; }
/* تأثير اتجاهي: السهم ينزلق نحو جهته عند المرور/الجاهزية */
#oan-arrows .oan-arrow-next.oan-arrow-ready svg{ animation:oanNextHint 1.4s ease-in-out infinite !important; }
@keyframes oanNextHint{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
#oan-arrows .oan-arrow-prev:active svg{ transform:translateX(4px) !important; }
#oan-arrows .oan-arrow-next:active svg{ transform:translateX(-4px) !important; }
#oan-arrows .oan-arrow:not(.oan-arrow-ready):not(.oan-arrow-off):hover{ border-color:rgba(217,138,74,.5) !important; color:#f0d4b4 !important; }
html[data-theme='light'] #oan-arrows .oan-arrow:not(.oan-arrow-ready):not(.oan-arrow-off):hover{ color:#6b3f1c !important; }
/* ============================================================
إزالة طبقات خلفية شاشة الاستقبال (الشبكة + التوهّجات) — خلفية نظيفة
============================================================ */
#s-rec .rec-v3-bg-grid,
#s-rec .rec-v3-bg-glow,
#s-rec .rec-v3-bg-glow-1,
#s-rec .rec-v3-bg-glow-2{ display:none !important; }
#s-rec .rec-body::before,
#s-rec .rec-body::after{ display:none !important; content:none !important; background:none !important; }
/* ═══ nesxa 71 — إزالة المستطيل الخلفي في الاستقبال: الغلاف شفّاف بلا ارتفاع ممتدّ ═══ */
#s-rec .rec-v3-wrap{ background:transparent !important; min-height:auto !important; }
/* ═══ nesxa 73 — تنعيم قائمة هيدر الاستقبال: إزالة تهنيج تحريك max-width (reflow) ═══ */
/* العرض يتغيّر فورًا (بلا أنيميشن تخطيط)، وتبقى حركة الأزرار transform/opacity المسرّعة بالGPU */
#s-rec .rec-actions-bar{ transition:opacity .2s ease !important; pointer-events:none; }
#s-rec .rec-actions-bar.is-open{ pointer-events:auto; }
#s-rec .rec-menu-action-btn{ will-change:transform,opacity; }
#s-rec .rec-menu-toggle,#s-rec .rec-menu-toggle-icon span{ will-change:transform; }
/* ═══ nesxa 75 — تصحيح اتجاه القائمة: الزر يسارًا والتوسّع نحو اليمين في الشاشتين ═══ */
/* اللانشر يبقى على اتجاهه الأصلي (يسار→يمين) + تنعيم بلا تهنيج */
.lnch3-actions-bar{ transition:opacity .2s ease !important; pointer-events:none; }
.lnch3-actions-bar.is-open{ pointer-events:auto; }
.lnch3-menu-action-btn{ will-change:transform,opacity; }
.lnch3-menu-toggle,.lnch3-menu-toggle-icon span{ will-change:transform; }
/* الاستقبال: قلب الاتجاه ليطابق اللانشر (كان يتوسّع لليسار) */
#s-rec .rec-page-top{ direction:ltr !important; justify-content:flex-start !important; }
#s-rec .rec-actions-bar{ direction:ltr !important; }
#s-rec .rec-menu-action-btn{ transform:translateX(-20px) scale(.6) !important; }
#s-rec .rec-menu-toggle-icon span:nth-child(1),
#s-rec .rec-menu-toggle-icon span:nth-child(3){ margin-left:0 !important; }
/* ═══ nesxa 76 — أيقونات قائمة الاستقبال + إزالة تهنيج التوهّج الدوّار ═══ */
/* التوهّج: هالة ثابتة ناعمة بدل دوران conic-gradient (الذي يعيد الرسم كل إطار = تهنيج) */
.rec-menu-toggle-glow,.lnch3-menu-toggle-glow{ background:radial-gradient(circle, rgba(232,201,106,.4), transparent 72%) !important; }
.rec-menu-toggle.is-open .rec-menu-toggle-glow,
.lnch3-menu-toggle.is-open .lnch3-menu-toggle-glow{ animation:none !important; opacity:1 !important; }
/* توحيد مقاسات قائمة الاستقبال مع اللانشر (الزر ٤٦ والأزرار ٤٤) */
#s-rec .rec-menu-toggle{ width:46px !important; height:46px !important; border-radius:13px !important; }
#s-rec .rec-menu-action-btn{ width:44px !important; height:44px !important; border-radius:12px !important; }
/* ═══ nesxa 78 — إصلاح جذر «الأيقونات هشّة/صغيرة» في الاستقبال ═══ */
/* النسخة ٧٥ ثبّتت scale(.6)!important حتى عند الفتح؛ نُعيد الحجم الكامل عند الفتح */
#s-rec .rec-actions-bar.is-open .rec-menu-action-btn{ transform:translateX(0) scale(1) !important; }
/* ═══ nesxa 79 — شريط الانتقال شريط مستقلّ فوق البطاقة (كمبيوتر) ═══ */
#s-rec .rec-form-side > .rec-hdr-nav.rec-hdr-nav-top{
width:100% !important;
margin:0 0 16px 0 !important; margin-inline-start:0 !important; margin-inline-end:0 !important;
justify-content:space-between !important;
padding:9px 14px !important; border-radius:18px !important;
background:linear-gradient(135deg, rgba(217,138,74,.07), rgba(217,138,74,.03)) !important;
border:1px solid rgba(217,138,74,.2) !important;
box-shadow:0 14px 30px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.05) !important;
animation:wizIn .45s cubic-bezier(.16,1,.3,1) !important;
}
#s-rec .rec-form-side > .rec-hdr-nav.rec-hdr-nav-top .rhn-prog{ min-width:120px !important; }
#s-rec .rec-form-side > .rec-hdr-nav.rec-hdr-nav-top .rhn-prog-bar{ width:108px !important; }
html[data-theme='light'] #s-rec .rec-form-side > .rec-hdr-nav.rec-hdr-nav-top{
background:linear-gradient(135deg, rgba(189,114,54,.08), rgba(189,114,54,.03)) !important;
border-color:rgba(189,114,54,.22) !important;
}
/* ═══ nesxa 80 — محاذاة قمة لوحة المعاينة مع شريط الانتقال (كمبيوتر) ═══ */
@media(min-width:981px){
#s-rec .rec-body{ align-items:start !important; }
#s-rec .rec-form-side,#s-rec .rec-preview-side{ align-self:start !important; margin-top:0 !important; }
#s-rec .rec-preview-side{ top:0 !important; }
}
/* ═══ nesxa 81 — توحيد ألوان بطاقات الاستقبال مع ستايل لوحة المعاينة (نيلي/بنفسجي + توهّج بنفسجي‑تركوازي) ═══ */
/* خلفيات البطاقات (الوضع الليلي حيث يظهر النحاسي) */
html[data-theme='dark'] #s-rec .rec-pro-card,
html[data-theme='dark'] #s-rec .rec-form-side > .rec-pro-card{
background:
radial-gradient(120% 80% at 82% -8%, rgba(227,169,44,.30), transparent 56%),
radial-gradient(90% 70% at 0% 112%, rgba(11,159,176,.24), transparent 56%),
linear-gradient(150deg, #1b1f3a, #0f1226) !important;
border:1px solid rgba(140,170,255,.22) !important;
box-shadow:0 26px 62px -30px rgba(80,60,200,.6), inset 0 1px 0 rgba(255,255,255,.07) !important;
}
/* بطاقة المستخدم */
html[data-theme='dark'] #s-rec .rec-id-panel{
background:
radial-gradient(130% 85% at 50% 0, rgba(227,169,44,.28), transparent 58%),
radial-gradient(90% 80% at 0% 110%, rgba(11,159,176,.20), transparent 58%),
linear-gradient(150deg, #1b1f3a, #0f1226) !important;
border:1px solid rgba(140,170,255,.22) !important;
box-shadow:0 30px 72px -34px rgba(80,60,200,.6), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
html[data-theme='dark'] #s-rec .rec-id-panel-orb{ background:radial-gradient(circle, rgba(201,168,76,.24), transparent 62%) !important; filter:blur(9px) !important; }
/* لوحة المعاينة (placeholder) */
html[data-theme='dark'] #s-rec #rec-preview-placeholder.rec-ph-future{
background:
radial-gradient(120% 90% at 80% -10%, rgba(227,169,44,.30), transparent 55%),
radial-gradient(90% 70% at 0% 110%, rgba(11,159,176,.26), transparent 55%),
linear-gradient(145deg, #1b1f3a, #0f1226) !important;
border:1px solid rgba(140,170,255,.22) !important;
box-shadow:0 30px 70px -30px rgba(80,60,200,.55), inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#eaf0ff !important;
}
/* بطاقة الحساب */
html[data-theme='dark'] #s-rec .rec-calc-future{
background:
radial-gradient(120% 85% at 82% -8%, rgba(227,169,44,.28), transparent 56%),
linear-gradient(150deg, #1b1f3a, #0f1226) !important;
border:1px solid rgba(140,170,255,.22) !important;
box-shadow:0 30px 72px -34px rgba(80,60,200,.55), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
/* شريط الانتقال */
html[data-theme='dark'] #s-rec .rec-form-side > .rec-hdr-nav.rec-hdr-nav-top{
background:linear-gradient(135deg, rgba(227,169,44,.12), rgba(11,159,176,.06)) !important;
border:1px solid rgba(140,170,255,.22) !important;
}
/* ── لمسات الإكسسوار (الوضعان): زوايا/أشرطة/أيقونات/تركيز -> بنفسجي‑تركوازي ── */
#s-rec .rec-pro-card::before,#s-rec .rec-pro-card::after,
#s-rec .rec-form-side > .rec-pro-card::before,#s-rec .rec-form-side > .rec-pro-card::after{ border-color:rgba(201,168,76,.5) !important; }
#s-rec .rec-section-h-bar{ background:linear-gradient(180deg,#A07830,#A07830) !important; box-shadow:0 0 11px rgba(201,168,76,.6) !important; }
#s-rec .rec-pro-card-ico{ background:linear-gradient(135deg,#A07830,#A07830) !important; }
#s-rec .rec-calc-future .rcf-row::after{ background:linear-gradient(90deg,#A07830,rgba(201,168,76,0)) !important; }
#s-rec .rec-calc-future .rcf-total{ border-top:1px solid rgba(201,168,76,.3) !important; }
#s-rec input[type=text]:focus, #s-rec input[type=tel]:focus, #s-rec input[type=number]:focus, #s-rec select:focus, #s-rec textarea:focus{
border-color:rgba(227,169,44,.65) !important; box-shadow:0 0 0 3px rgba(227,169,44,.18) !important;
}
/* ═══ nesxa 83 — صورة المستخدم في بطاقة المستخدم ═══ */
.rec-id-avatar{
position:absolute; right:18px; left:auto; top:50%; transform:translateY(-50%);
width:62px; height:62px; border-radius:50%; z-index:3;
display:flex; align-items:center; justify-content:center; overflow:hidden;
background:linear-gradient(135deg,#7c5cff,#11c4d6);
box-shadow:0 12px 28px -8px rgba(227,169,44,.6), 0 0 0 2px rgba(140,170,255,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.rec-id-avatar img{ width:100%; height:100%; object-fit:cover; display:none; }
.rec-id-avatar-fb{ font-family:var(--font); font-size:27px; font-weight:900; color:#fff; line-height:1; display:flex; text-shadow:0 1px 3px rgba(0,0,0,.3); }
/* حجز مساحة لليسار حتى لا يلامس النص الصورة */
.rec-id-panel-content{ padding-inline-start:84px !important; padding-inline-end:0 !important; }
@media (max-width:560px){
.rec-id-avatar{ width:52px; height:52px; right:14px; left:auto; }
.rec-id-avatar-fb{ font-size:23px; }
.rec-id-panel-content{ padding-inline-start:70px !important; padding-inline-end:0 !important; }
}
html[data-theme='light'] .rec-id-avatar{ box-shadow:0 12px 26px -8px rgba(201,168,76,.45), 0 0 0 2px rgba(255,255,255,.6), inset 0 1px 0 rgba(255,255,255,.3); }
/* ═══ nesxa 85 — ثيم «أسود خزامي» مطبّق على الاستقبال (يغلب nesxa81) ═══ */
/* خلفيات البطاقات */
html[data-theme='dark'] #s-rec .rec-pro-card,
html[data-theme='dark'] #s-rec .rec-form-side > .rec-pro-card{
background:
radial-gradient(120% 80% at 82% -8%, rgba(182,168,224,.16), transparent 56%),
radial-gradient(90% 70% at 0% 112%, rgba(144,129,200,.10), transparent 56%),
linear-gradient(150deg, #0b0a0e, #050407) !important;
border:1px solid rgba(182,168,224,.16) !important;
box-shadow:0 26px 62px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
/* بطاقة المستخدم */
html[data-theme='dark'] #s-rec .rec-id-panel{
background:
radial-gradient(130% 85% at 50% 0, rgba(182,168,224,.17), transparent 58%),
radial-gradient(90% 80% at 0% 110%, rgba(144,129,200,.11), transparent 58%),
linear-gradient(150deg, #0b0a0e, #050407) !important;
border:1px solid rgba(182,168,224,.16) !important;
box-shadow:0 30px 72px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
html[data-theme='dark'] #s-rec .rec-id-panel-orb{ background:radial-gradient(circle, rgba(201,168,76,.20), transparent 62%) !important; }
/* لوحة المعاينة (placeholder) */
html[data-theme='dark'] #s-rec #rec-preview-placeholder.rec-ph-future{
background:
radial-gradient(120% 90% at 80% -10%, rgba(182,168,224,.17), transparent 55%),
radial-gradient(90% 70% at 0% 110%, rgba(144,129,200,.11), transparent 55%),
linear-gradient(145deg, #0b0a0e, #050407) !important;
border:1px solid rgba(182,168,224,.16) !important;
box-shadow:0 30px 70px -30px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05) !important;
color:#eae6f5 !important;
}
/* بطاقة الحساب */
html[data-theme='dark'] #s-rec .rec-calc-future{
background:
radial-gradient(120% 85% at 82% -8%, rgba(182,168,224,.15), transparent 56%),
linear-gradient(150deg, #0b0a0e, #050407) !important;
border:1px solid rgba(182,168,224,.16) !important;
box-shadow:0 30px 72px -34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
/* شريط الانتقال */
html[data-theme='dark'] #s-rec .rec-form-side > .rec-hdr-nav.rec-hdr-nav-top{
background:linear-gradient(135deg, rgba(182,168,224,.1), rgba(144,129,200,.05)) !important;
border:1px solid rgba(182,168,224,.16) !important;
}
/* لمسات الإكسسوار (الوضعان) -> لافندر */
#s-rec .rec-pro-card::before,#s-rec .rec-pro-card::after,
#s-rec .rec-form-side > .rec-pro-card::before,#s-rec .rec-form-side > .rec-pro-card::after{ border-color:rgba(201,168,76,.45) !important; }
#s-rec .rec-section-h-bar{ background:linear-gradient(180deg,#E3A92C,#A07830) !important; box-shadow:0 0 11px rgba(201,168,76,.5) !important; }
#s-rec .rec-pro-card-ico{ background:linear-gradient(135deg,#E3A92C,#A07830) !important; }
#s-rec .rec-calc-future .rcf-row::after{ background:linear-gradient(90deg,#E3A92C,rgba(201,168,76,0)) !important; }
#s-rec .rec-calc-future .rcf-total{ border-top:1px solid rgba(201,168,76,.3) !important; }
#s-rec input[type=text]:focus, #s-rec input[type=tel]:focus, #s-rec input[type=number]:focus, #s-rec select:focus, #s-rec textarea:focus{
border-color:rgba(182,168,224,.6) !important; box-shadow:0 0 0 3px rgba(182,168,224,.16) !important;
}
/* الصورة الشخصية + النقاط -> لافندر */
.rec-id-avatar{ background:linear-gradient(135deg,#E3A92C,#A07830) !important; box-shadow:0 12px 28px -8px rgba(0,0,0,.6), 0 0 0 2px rgba(201,168,76,.4), inset 0 1px 0 rgba(255,255,255,.22) !important; }
#s-rec .rec-id-day-dot{ background:#E3A92C !important; box-shadow:0 0 8px #E3A92C !important; }
html[data-theme='dark'] #s-rec .rec-id-greet{ color:rgba(201,168,76,.85) !important; }
/* ═══ nesxa 86 — أيقونة هامبرغر الاستقبال بلون الثيم «أسود خزامي» ═══ */
html[data-theme='dark'] #s-rec .rec-menu-toggle{
background:linear-gradient(155deg, rgba(182,168,224,.18), rgba(182,168,224,.06)) !important;
border:1.5px solid rgba(182,168,224,.4) !important;
}
html[data-theme='dark'] #s-rec .rec-menu-toggle:hover{
border-color:rgba(182,168,224,.6) !important;
background:linear-gradient(155deg, rgba(182,168,224,.26), rgba(182,168,224,.08)) !important;
}
html[data-theme='dark'] #s-rec .rec-menu-toggle::before{ background:radial-gradient(circle at top right, rgba(201,168,76,.28), transparent 70%) !important; }
html[data-theme='dark'] #s-rec .rec-menu-toggle-icon span{ background:linear-gradient(90deg,#E3A92C,#A07830) !important; }
html[data-theme='dark'] #s-rec .rec-menu-toggle-glow{ background:radial-gradient(circle, rgba(201,168,76,.42), transparent 72%) !important; }
/* ═══ nesxa 87 — شاشة اسبلاش جديدة (بسيطة راقية هادئة سريعة) ═══ */
#s-splash{
position:fixed !important; inset:0 !important; z-index:99999 !important;
display:flex !important; align-items:center !important; justify-content:center !important; flex-direction:column !important;
overflow:hidden !important;
background:
radial-gradient(ellipse 92% 70% at 50% 36%, rgba(182,168,224,.10), transparent 70%),
linear-gradient(180deg, #0c0b12 0%, #070610 55%, #050407 100%) !important;
transition:opacity .45s ease !important;
}
#s-splash::before, #s-splash::after{ display:none !important; content:none !important; }
#s-splash.hidden{ opacity:0 !important; pointer-events:none !important; }
.spl3-aura{
position:absolute; top:34%; left:50%; transform:translate(-50%,-50%);
width:min(72vw,430px); height:min(72vw,430px); border-radius:50%;
background:radial-gradient(circle, rgba(182,168,224,.18), transparent 62%);
filter:blur(38px); animation:spl3Breathe 5s ease-in-out infinite; pointer-events:none;
}
@keyframes spl3Breathe{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(.9)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.spl3-content{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center;
animation:spl3In .6s cubic-bezier(.16,1,.3,1) both; padding:0 24px; text-align:center; }
@keyframes spl3In{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.spl3-logo-wrap{ position:relative; width:104px; height:104px; display:flex; align-items:center; justify-content:center; margin-bottom:26px; }
.spl3-logo-ring{ position:absolute; inset:-6px; border-radius:30px;
border:1.5px solid rgba(182,168,224,.28);
box-shadow:0 0 0 1px rgba(182,168,224,.08), 0 0 42px -6px rgba(182,168,224,.45);
animation:spl3Ring 4.5s ease-in-out infinite; }
@keyframes spl3Ring{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.06);opacity:1}}
.spl3-logo-frame{ width:100%; height:100%; border-radius:26px; overflow:hidden; display:flex; align-items:center; justify-content:center;
background:linear-gradient(150deg, rgba(182,168,224,.12), rgba(144,129,200,.04));
border:1px solid rgba(182,168,224,.2);
box-shadow:0 20px 50px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); }
.spl3-logo-img{ width:72%; height:72%; object-fit:contain; }
.spl3-name{ font-family:var(--font,'Cairo',sans-serif); font-size:30px; font-weight:900; letter-spacing:.5px; line-height:1.2;
background:linear-gradient(100deg, #efeaff 0%, #b6a8e0 45%, #efeaff 90%); background-size:220% auto;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
animation:spl3Shine 4.5s linear infinite; }
@keyframes spl3Shine{to{background-position:-220% 0}}
.spl3-tagline{ font-family:var(--font,'Cairo',sans-serif); font-size:13px; font-weight:600; color:rgba(220,215,240,.6); margin-top:9px; }
.spl3-owner{ display:flex; align-items:center; gap:7px; margin-top:16px; font-size:11.5px; font-weight:700; color:rgba(200,195,225,.55); }
.spl3-owner-name{ color:#c9bef0; font-weight:800; }
.spl3-owner-dot{ width:5px; height:5px; border-radius:50%; background:#b6a8e0; box-shadow:0 0 8px #b6a8e0; }
.spl3-loader{ width:124px; height:2.5px; border-radius:99px; background:rgba(182,168,224,.14); overflow:hidden; margin-top:30px; position:relative; }
.spl3-loader > i{ position:absolute; top:0; bottom:0; left:-45%; width:42%; border-radius:99px;
background:linear-gradient(90deg, transparent, #b6a8e0, #9081c8, transparent);
animation:spl3Load 1.15s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes spl3Load{0%{left:-45%}100%{left:105%}}
.spl3-version{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:rgba(182,168,224,.42); letter-spacing:1.5px; }
/* ═══ nesxa 88 — اسبلاش «أورورا» ساحر بمؤثرات وألوان ناعمة ═══ */
#s-splash{
position:fixed !important; inset:0 !important; z-index:99999 !important;
display:flex !important; align-items:center !important; justify-content:center !important; flex-direction:column !important;
overflow:hidden !important;
background:linear-gradient(165deg, #0d0b1a 0%, #0a0916 52%, #070510 100%) !important;
transition:opacity .5s ease !important;
}
#s-splash::before, #s-splash::after{ display:none !important; content:none !important; }
#s-splash.hidden{ opacity:0 !important; pointer-events:none !important; }
/* أورورا ناعمة متحرّكة */
.spl4-aurora{ position:absolute; inset:0; overflow:hidden; pointer-events:none; filter:blur(64px); }
.spl4-blob{ position:absolute; border-radius:50%; mix-blend-mode:screen; opacity:.42; will-change:transform; }
.spl4-blob.b1{ width:58vw; height:58vw; background:radial-gradient(circle,#7c6cf0,transparent 60%); top:-12%; left:-6%; animation:spl4Drift1 19s ease-in-out infinite; }
.spl4-blob.b2{ width:52vw; height:52vw; background:radial-gradient(circle,#2bb9c8,transparent 60%); bottom:-14%; right:-8%; animation:spl4Drift2 23s ease-in-out infinite; }
.spl4-blob.b3{ width:44vw; height:44vw; background:radial-gradient(circle,#e07ab0,transparent 60%); top:28%; right:8%; animation:spl4Drift3 21s ease-in-out infinite; }
.spl4-blob.b4{ width:42vw; height:42vw; background:radial-gradient(circle,#9fb0e8,transparent 60%); bottom:14%; left:6%; animation:spl4Drift1 26s ease-in-out infinite reverse; }
@keyframes spl4Drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,6%) scale(1.16)}}
@keyframes spl4Drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-7%,-5%) scale(1.12)}}
@keyframes spl4Drift3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,8%) scale(1.2)}}
.spl4-aurora::after{ content:''; position:absolute; inset:0; background:rgba(9,8,20,.42); }
/* جسيمات متلألئة */
.spl4-stars{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.spl4-stars i{ position:absolute; width:4px; height:4px; border-radius:50%;
background:rgba(224,219,255,.85); box-shadow:0 0 9px rgba(200,190,255,.85);
opacity:0; animation-name:spl4Float; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
@keyframes spl4Float{0%{transform:translateY(24px) scale(.5);opacity:0}18%{opacity:.85}82%{opacity:.55}100%{transform:translateY(-96px) scale(1);opacity:0}}
/* المحتوى */
.spl4-content{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px;
animation:spl4In 1s cubic-bezier(.16,1,.3,1) both; }
@keyframes spl4In{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.spl4-logo{ position:relative; width:120px; height:120px; display:flex; align-items:center; justify-content:center; margin-bottom:28px;
animation:spl4LogoIn 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes spl4LogoIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:scale(1)}}
.spl4-logo-glow{ position:absolute; inset:-32px; border-radius:50%;
background:radial-gradient(circle, rgba(165,150,245,.5), transparent 60%); filter:blur(16px);
animation:spl4Breathe 5.5s ease-in-out infinite; }
@keyframes spl4Breathe{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.14)}}
.spl4-logo-img{ position:relative; z-index:2; width:100%; height:100%; object-fit:contain;
filter:drop-shadow(0 12px 32px rgba(120,100,220,.55)); }
.spl4-name{ font-family:var(--font,'Cairo',sans-serif); font-size:32px; font-weight:900; letter-spacing:.5px; line-height:1.2;
color:#f3efff; text-shadow:0 0 32px rgba(165,150,245,.55); animation:spl4FadeUp 1s .25s both; }
.spl4-tagline{ font-family:var(--font,'Cairo',sans-serif); font-size:13px; font-weight:600; color:rgba(222,217,248,.62); margin-top:10px; animation:spl4FadeUp 1s .4s both; }
.spl4-owner{ font-size:11.5px; font-weight:700; color:rgba(208,203,238,.5); margin-top:18px; animation:spl4FadeUp 1s .55s both; }
.spl4-owner b{ color:#cdc2f7; font-weight:800; }
@keyframes spl4FadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.spl4-dots{ display:flex; gap:8px; margin-top:34px; animation:spl4FadeUp 1s .7s both; }
.spl4-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(184,172,238,.9);
box-shadow:0 0 11px rgba(165,150,245,.75); animation:spl4Pulse 1.4s ease-in-out infinite; }
.spl4-dots i:nth-child(2){ animation-delay:.2s; }
.spl4-dots i:nth-child(3){ animation-delay:.4s; }
@keyframes spl4Pulse{0%,100%{opacity:.32;transform:scale(.8)}50%{opacity:1;transform:scale(1.28)}}
.spl4-version{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3;
font-family:'IBM Plex Mono',monospace; font-size:10px; color:rgba(184,172,238,.4); letter-spacing:2px; }
@media (max-width:560px){ .spl4-name{font-size:27px;} .spl4-logo{width:104px;height:104px;} }
/* ═══ nesxa 89 — اسبلاش شبكة جسيمات مستقبلية (Constellation) ═══ */
#s-splash{
position:fixed !important; inset:0 !important; z-index:99999 !important;
display:flex !important; align-items:center !important; justify-content:center !important; flex-direction:column !important;
overflow:hidden !important;
background:
radial-gradient(ellipse 80% 60% at 50% 42%, #15132a 0%, transparent 70%),
linear-gradient(165deg, #0b0a18 0%, #080712 55%, #05040c 100%) !important;
transition:opacity .5s ease !important;
}
#s-splash::before, #s-splash::after{ display:none !important; content:none !important; }
#s-splash.hidden{ opacity:0 !important; pointer-events:none !important; }
#spl5-canvas{ position:absolute !important; inset:0; width:100%; height:100%; z-index:1; display:block; }
/* قبّة ضوئية ناعمة في المنتصف + تعتيم الأطراف للراحة */
.spl5-veil{ position:absolute; inset:0; z-index:2; pointer-events:none;
background:
radial-gradient(circle 280px at 50% 44%, rgba(150,135,240,.20), transparent 70%),
radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(5,4,12,.55) 100%); }
.spl5-content{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; padding:0 24px;
animation:spl5In 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes spl5In{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.spl5-logo{ position:relative; width:124px; height:124px; display:flex; align-items:center; justify-content:center; margin-bottom:30px;
animation:spl5LogoIn 1.2s cubic-bezier(.16,1,.3,1) both; }
@keyframes spl5LogoIn{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.spl5-logo-glow{ position:absolute; inset:-34px; border-radius:50%;
background:radial-gradient(circle, rgba(150,135,240,.55), rgba(90,210,220,.18) 45%, transparent 65%);
filter:blur(16px); animation:spl5Breathe 5.5s ease-in-out infinite; }
@keyframes spl5Breathe{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:1;transform:scale(1.12)}}
.spl5-logo-ring{ position:absolute; inset:-9px; border-radius:50%;
background:conic-gradient(from 0deg, transparent, rgba(168,158,236,.7), rgba(90,210,220,.55), transparent, transparent, rgba(168,158,236,.55), transparent);
-webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
animation:spl5Spin 9s linear infinite; opacity:.9; }
@keyframes spl5Spin{to{transform:rotate(360deg)}}
.spl5-logo-img{ position:relative; z-index:2; width:78%; height:78%; object-fit:contain;
filter:drop-shadow(0 12px 30px rgba(120,100,220,.55)); }
.spl5-name{ font-family:var(--font,'Cairo',sans-serif); font-size:33px; font-weight:900; letter-spacing:.5px; line-height:1.2;
background:linear-gradient(100deg,#f3efff 0%,#bcaef0 38%,#9fe6ec 60%,#f3efff 92%); background-size:230% auto;
-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
text-shadow:0 0 36px rgba(150,135,240,.4); animation:spl5Shine 6s linear infinite, spl5FadeUp 1s .25s both; }
@keyframes spl5Shine{to{background-position:-230% 0}}
.spl5-tagline{ font-family:var(--font,'Cairo',sans-serif); font-size:13px; font-weight:600; color:rgba(222,217,248,.6); margin-top:11px; animation:spl5FadeUp 1s .42s both; }
.spl5-owner{ font-size:11.5px; font-weight:700; color:rgba(208,203,240,.5); margin-top:20px; animation:spl5FadeUp 1s .58s both; }
.spl5-owner b{ color:#cdc2f7; font-weight:800; }
@keyframes spl5FadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.spl5-version{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3;
font-family:'IBM Plex Mono',monospace; font-size:10px; color:rgba(168,158,236,.4); letter-spacing:2px; }
@media (max-width:560px){ .spl5-name{font-size:28px;} .spl5-logo{width:108px;height:108px;} }
/* ═══ nesxa 90 — شعاع برتقالي + شعار دائري للاسبلاش ═══ */
.spl5-ray{ position:absolute; z-index:2; pointer-events:none; mix-blend-mode:screen; filter:blur(17px); }
.spl5-ray-1{ width:150%; height:155px; top:15%; left:-25%; transform:rotate(-19deg); transform-origin:center;
background:linear-gradient(90deg, transparent, rgba(255,160,80,.0) 22%, rgba(255,165,85,.28) 48%, rgba(255,185,110,.34) 54%, rgba(255,150,70,0) 80%, transparent);
animation:spl5Ray1 10s ease-in-out infinite; }
.spl5-ray-2{ width:135%; height:95px; bottom:22%; right:-22%; transform:rotate(14deg); transform-origin:center;
background:linear-gradient(90deg, transparent, rgba(255,145,72,.18) 50%, transparent);
animation:spl5Ray2 13s ease-in-out infinite; }
@keyframes spl5Ray1{0%,100%{opacity:.4;transform:rotate(-19deg) translateX(-3%)}50%{opacity:.92;transform:rotate(-19deg) translateX(4%)}}
@keyframes spl5Ray2{0%,100%{opacity:.28}50%{opacity:.68}}
.spl5-logo-disc{ width:100%; height:100%; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center;
background:linear-gradient(150deg, rgba(150,135,240,.15), rgba(90,210,220,.05));
border:1px solid rgba(168,158,236,.32);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 16px 42px -16px rgba(0,0,0,.7); }
.spl5-logo-disc .spl5-logo-img{ width:70% !important; height:70% !important; }
/* ═══ nesxa 91 — شعار دائري فعلي + نبضات + حركة ناعمة ولمعة ═══ */
.spl5-logo-disc .spl5-logo-img{ width:100% !important; height:100% !important; object-fit:cover !important; border-radius:50% !important; }
.spl5-logo-glow{ z-index:0 !important; }
.spl5-logo-ring{ z-index:2 !important; }
.spl5-logo-disc{ position:relative !important; z-index:3 !important; animation:spl5Float 6s ease-in-out infinite !important; }
.spl5-logo-disc::after{ content:''; position:absolute; top:0; left:-60%; width:46%; height:100%; z-index:4; pointer-events:none;
background:linear-gradient(105deg, transparent, rgba(255,255,255,.22), transparent); transform:skewX(-18deg);
animation:spl5Sheen 5s ease-in-out infinite; }
@keyframes spl5Sheen{0%{left:-60%}45%,100%{left:135%}}
@keyframes spl5Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* نبضات تنبثق من الشعار (لافندر + برتقالي بالتناوب) */
.spl5-logo::before, .spl5-logo::after{ content:''; position:absolute; inset:6px; border-radius:50%; z-index:1; pointer-events:none;
border:1.6px solid rgba(168,158,236,.5); animation:spl5Ping 3.4s cubic-bezier(.2,.6,.3,1) infinite; }
.spl5-logo::after{ animation-delay:1.7s; border-color:rgba(255,168,88,.55); }
@keyframes spl5Ping{0%{transform:scale(.9);opacity:.75}70%{opacity:0}100%{transform:scale(2);opacity:0}}
/* ═══ nesxa 94 — توحيد نافذة «تعديل بياناتي» على ثيم الخزامي ═══ */
#myprofile-modal .staff-modal{
background:linear-gradient(160deg,#14121c,#0c0a12) !important;
border:1px solid rgba(182,168,224,.28) !important;
box-shadow:0 40px 90px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.05) !important;
}
#myprofile-modal .staff-modal-head{
background:linear-gradient(135deg, rgba(182,168,224,.14), rgba(144,129,200,.04)) !important;
border-bottom:1px solid rgba(182,168,224,.18) !important;
}
#myprofile-modal .staff-modal-head-ico{ box-shadow:0 8px 20px -6px rgba(144,129,200,.6) !important; }
#myprofile-modal .staff-modal-title{ color:#efeaff !important; }
#myprofile-modal .staff-modal-sub{ color:rgba(205,200,235,.65) !important; }
#myprofile-modal .staff-modal-x{ color:rgba(205,200,235,.7) !important; }
#myprofile-modal .staff-modal label{ color:#cdc6ea !important; }
#myprofile-modal input[type=text],
#myprofile-modal input[type=email],
#myprofile-modal input[type=password]{
background:rgba(255,255,255,.04) !important; border:1px solid rgba(182,168,224,.2) !important; color:#eae6f5 !important;
}
#myprofile-modal input[type=text]:focus,
#myprofile-modal input[type=email]:focus,
#myprofile-modal input[type=password]:focus{
border-color:rgba(182,168,224,.6) !important; box-shadow:0 0 0 3px rgba(182,168,224,.16) !important; outline:none !important;
}
#myprofile-modal .staff-modal-btn.save{
background:linear-gradient(135deg,#b6a8e0,#9081c8) !important; color:#171320 !important; border:none !important;
box-shadow:0 10px 26px -10px rgba(144,129,200,.7) !important; text-shadow:none !important;
}
#myprofile-modal .staff-modal-btn.cancel{
background:rgba(255,255,255,.05) !important; border:1px solid rgba(182,168,224,.2) !important; color:#cdc6ea !important;
}
/* ═══ nesxa 95 — ترتيب تخطيط نموذج «تعديل بياناتي» (تسمية فوق حقل بعرض كامل) ═══ */
#myprofile-modal .staff-modal-body{ padding:20px 22px !important; }
#myprofile-modal .staff-form-grid{ display:flex !important; flex-direction:column !important; gap:15px !important; }
#myprofile-modal .staff-form-grid > div{ display:flex !important; flex-direction:column !important; gap:7px !important; align-items:stretch !important; text-align:right !important; }
#myprofile-modal .staff-modal label{ display:block !important; font-size:12.5px !important; font-weight:800 !important; color:#cdc6ea !important; text-align:right !important; margin:0 !important; }
#myprofile-modal input[type=text],
#myprofile-modal input[type=email],
#myprofile-modal input[type=password]{
width:100% !important; box-sizing:border-box !important; display:block !important;
padding:12px 14px !important; border-radius:12px !important; font-size:14px !important; font-family:inherit !important;
background:rgba(255,255,255,.04) !important; border:1px solid rgba(182,168,224,.2) !important; color:#eae6f5 !important;
}
/* الهيدر: شريط داكن مسطّح متناسق بدل اللون الصارخ */
#myprofile-modal .staff-modal-head{
background:rgba(182,168,224,.06) !important;
border-bottom:1px solid rgba(182,168,224,.16) !important;
padding:16px 20px !important;
}
/* الأزرار: توزيع مرتّب */
#myprofile-modal .staff-modal-actions{ display:flex !important; gap:10px !important; padding:16px 22px !important; }
#myprofile-modal .staff-modal-btn{ flex:1 !important; }
/* ═══ nesxa 96 — تخطيط Grid لقائمة العملاء + ترقيم الصفحات ═══ */
#cust-list > .cust-list{
display:grid !important;
grid-template-columns:repeat(auto-fill, minmax(330px, 1fr)) !important;
gap:14px !important;
align-items:start !important;
}
#cust-list > .cust-list > .cust-card{ width:auto !important; margin:0 !important; height:100% !important; }
@media (max-width:560px){
#cust-list > .cust-list{ grid-template-columns:1fr !important; gap:12px !important; }
}
/* ترقيم الصفحات */
.cust-pager{ display:flex; flex-direction:column; align-items:center; gap:11px; padding:20px 8px 6px; }
.cust-pager-info{ font-size:11.5px; color:var(--t3,#9aa3bd); font-weight:700; letter-spacing:.2px; }
.cust-pager-btns{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.cust-pager-btn{ min-width:38px; height:38px; padding:0 13px; border-radius:11px; border:1px solid rgba(150,160,200,.2);
background:rgba(255,255,255,.03); color:var(--t2,#cdd6f4); font-family:inherit; font-size:13px; font-weight:800; cursor:pointer;
transition:.18s cubic-bezier(.34,1.4,.5,1); display:inline-flex; align-items:center; justify-content:center; }
.cust-pager-btn:hover:not(:disabled){ border-color:rgba(124,92,255,.5); background:rgba(124,92,255,.1); transform:translateY(-1px); }
.cust-pager-btn.is-active{ background:linear-gradient(135deg,#7c5cff,#9081c8) !important; border-color:transparent !important; color:#fff !important; box-shadow:0 8px 20px -8px rgba(124,92,255,.7); }
.cust-pager-btn:disabled{ opacity:.4; cursor:not-allowed; }
.cust-pager-dots{ color:var(--t4,#8890a8); padding:0 4px; align-self:center; font-weight:800; }
/* ═══ nesxa 97 — توحيد كل نوافذ الموظفين على ثيم الخزامي (بدل الذهبي) ═══ */
.staff-modal-overlay .staff-modal{
background:linear-gradient(160deg,#14121c,#0c0a12) !important;
border:1px solid rgba(182,168,224,.28) !important;
box-shadow:0 30px 80px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.05) inset !important;
}
.staff-modal-overlay .staff-modal-h,
.staff-modal-overlay .staff-modal-head{
background:linear-gradient(135deg, rgba(182,168,224,.12), rgba(144,129,200,.03)) !important;
border-bottom:1px solid rgba(182,168,224,.18) !important;
}
.staff-modal-overlay .staff-modal-h::after{ background:radial-gradient(circle, rgba(182,168,224,.16), transparent 70%) !important; }
.staff-modal-overlay .staff-modal-icon,
.staff-modal-overlay .staff-modal-head-ico{
background:linear-gradient(135deg,#b6a8e0,#9081c8) !important;
box-shadow:0 6px 16px -4px rgba(144,129,200,.6) !important;
}
.staff-modal-overlay .staff-modal-title{ color:#efeaff !important; }
.staff-modal-overlay .staff-modal-sub{ color:rgba(205,200,235,.65) !important; }
.staff-modal-overlay .staff-modal-close,
.staff-modal-overlay .staff-modal-x{ color:rgba(205,200,235,.7) !important; }
.staff-modal-overlay .staff-modal-btn.save{
background:linear-gradient(135deg,#b6a8e0,#9081c8) !important; color:#171320 !important;
box-shadow:0 8px 20px -8px rgba(144,129,200,.7), 0 0 0 1px rgba(255,255,255,.18) inset !important;
}
.staff-modal-overlay .staff-modal-btn.save:hover{ box-shadow:0 12px 28px -8px rgba(144,129,200,.85), 0 0 0 1px rgba(255,255,255,.25) inset !important; }
.staff-modal-overlay input[type=text]:focus,
.staff-modal-overlay input[type=email]:focus,
.staff-modal-overlay input[type=number]:focus,
.staff-modal-overlay input[type=tel]:focus,
.staff-modal-overlay input[type=password]:focus,
.staff-modal-overlay input[type=date]:focus,
.staff-modal-overlay select:focus,
.staff-modal-overlay textarea:focus{
border-color:rgba(182,168,224,.6) !important; box-shadow:0 0 0 3px rgba(182,168,224,.16) !important; outline:none !important;
}
/* ═══ nesxa 98 — إصلاح تخطيط هيدر نافذة «تعديل بياناتي» (الأيقونة كانت تتمدّد كشريط) ═══ */
.staff-modal-overlay .staff-modal-head{
display:flex !important; align-items:center !important; gap:12px !important;
padding:16px 20px !important; position:relative !important;
}
.staff-modal-overlay .staff-modal-head-ico{
width:44px !important; height:44px !important; min-width:44px !important; flex:0 0 auto !important;
border-radius:12px !important; display:flex !important; align-items:center !important; justify-content:center !important;
}
.staff-modal-overlay .staff-modal-head-ico svg{ width:20px !important; height:20px !important; }
.staff-modal-overlay .staff-modal-head > div:not(.staff-modal-head-ico){ flex:1 1 auto !important; text-align:right !important; min-width:0 !important; }
.staff-modal-overlay .staff-modal-x{
flex:0 0 auto !important; background:transparent !important; border:none !important;
color:rgba(205,200,235,.7) !important; font-size:24px !important; line-height:1 !important;
cursor:pointer !important; padding:2px 8px !important; align-self:flex-start !important;
}
/* ═══ nesxa 123 — أزرار مسح/تذكير: حبّات أنيقة بأيقونة + كلمة ═══ */
#dbrd-reports .dbrd-rep-row{ position:relative; }
#dbrd-reports .dbrd-rep-row-actions{ display:flex; gap:8px; align-items:center; margin-inline-start:10px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
#dbrd-reports .dbrd-rep-pill{
display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 14px;
border-radius:999px; cursor:pointer; font-family:inherit; font-weight:800; font-size:12.5px;
border:1px solid transparent; background:transparent; white-space:nowrap;
transition:transform .2s cubic-bezier(.16,1,.3,1), background .2s ease, box-shadow .22s ease, border-color .2s ease, color .2s ease;
-webkit-tap-highlight-color:transparent;
}
#dbrd-reports .dbrd-rep-pill svg{ width:16px; height:16px; flex:0 0 auto; transition:stroke .2s ease; }
#dbrd-reports .dbrd-rep-pill-lbl{ line-height:1; }
#dbrd-reports .dbrd-rep-pill:active{ transform:scale(.94); }
/* تذكير — كهرماني */
#dbrd-reports .dbrd-rep-remind{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.30); color:#b45309; }
#dbrd-reports .dbrd-rep-remind svg{ stroke:#d97706; }
#dbrd-reports .dbrd-rep-remind:hover{ background:linear-gradient(135deg,#fbbf24,#d97706); border-color:transparent; color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(217,119,6,.38); }
#dbrd-reports .dbrd-rep-remind:hover svg{ stroke:#fff; }
/* مسح — وردي */
#dbrd-reports .dbrd-rep-del{ background:rgba(244,63,94,.10); border-color:rgba(244,63,94,.28); color:#be123c; }
#dbrd-reports .dbrd-rep-del svg{ stroke:#e11d48; }
#dbrd-reports .dbrd-rep-del:hover{ background:linear-gradient(135deg,#fb7185,#e11d48); border-color:transparent; color:#fff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(225,29,72,.38); }
#dbrd-reports .dbrd-rep-del:hover svg{ stroke:#fff; }
/* وضع ليلي: نصوص أوضح */
[data-theme="dark"] #dbrd-reports .dbrd-rep-remind{ color:#fbbf24; }
[data-theme="dark"] #dbrd-reports .dbrd-rep-del{ color:#fb7185; }
/* 📱 جوال: الحبّتان في سطر كامل أسفل بيانات التقرير */
@media (max-width:640px){
#dbrd-reports .dbrd-rep-row{ flex-wrap:wrap; gap:10px 12px; padding:13px 13px; }
#dbrd-reports .dbrd-rep-row-main{ flex:1 1 auto; }
#dbrd-reports .dbrd-rep-row-date{ flex:0 0 auto; }
#dbrd-reports .dbrd-rep-row-actions{ flex:1 1 100%; width:100%; margin-inline-start:0; margin-top:2px; justify-content:stretch; gap:8px; flex-wrap:nowrap; }
#dbrd-reports .dbrd-rep-pill{ flex:1 1 0; min-width:0; height:36px; padding:0 12px; font-size:13px; }
}
/* ════════ 🆕 العملاء: عرض شبكة منظّم + عرض قائمة (مُحصّن) ════════ */
.cust-viewbar{display:flex;justify-content:flex-end;gap:5px;margin:8px 2px 2px;}
.cust-vtb{width:34px;height:32px;border-radius:9px;border:1px solid var(--bdr,rgba(255,255,255,.08));background:rgba(255,255,255,.04);color:var(--t3,#94a3b8);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;}
.cust-vtb:hover{color:var(--t1,#f4f0e6);background:rgba(255,255,255,.08);}
.cust-vtb.on{background:rgba(96,165,250,.18);border-color:rgba(96,165,250,.42);color:#60A5FA;}
/* الحاويات: شبكة فقط لغير القائمة، وعمود مرن للقائمة */
#cust-list .cust-list:not(.as-list){display:grid !important;grid-template-columns:repeat(auto-fill,minmax(290px,1fr)) !important;gap:14px !important;align-items:start;padding:8px 2px 4px;}
#cust-list .cust-list.as-list{display:flex !important;flex-direction:column !important;gap:9px !important;padding:8px 2px 4px;}
/* هيكل البطاقة */
#cust-list .cust-card{display:flex !important;flex-direction:column !important;gap:0 !important;padding:0 !important;overflow:hidden;}
#cust-list .cust-card .cc-top{display:flex;align-items:center;gap:12px;padding:16px 16px 13px;}
#cust-list .cust-card .cust-avatar{width:54px !important;height:54px !important;border-radius:15px !important;font-size:22px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
#cust-list .cust-card .cust-avatar img{width:100%;height:100%;object-fit:cover;}
#cust-list .cust-card .cc-id{min-width:0;flex:1;}
#cust-list .cust-card .cust-name{font-size:15.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cust-list .cust-card .cust-badges-row{margin-top:6px;display:flex;flex-wrap:wrap;gap:5px;}
#cust-list .cust-card .cc-contact{display:flex;flex-direction:column;gap:7px;padding:12px 16px;border-top:1px solid var(--bdr,rgba(255,255,255,.06));}
#cust-list .cust-card .cc-line{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--t2,#c8bfa8);min-width:0;}
#cust-list .cust-card .cc-chips{display:flex;flex-wrap:wrap;gap:6px;}
#cust-list .cust-card .cc-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--t2,#c8bfa8);background:rgba(255,255,255,.04);border:1px solid var(--bdr,rgba(255,255,255,.06));border-radius:8px;padding:4px 9px;}
/* شريط الإحصاءات (صفّ بطاقات) */
#cust-list .cust-card .cust-ribbon{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;width:auto !important;gap:8px !important;padding:12px 16px !important;border-top:1px solid var(--bdr,rgba(255,255,255,.06)) !important;margin:0 !important;}
#cust-list .cust-card .cust-stat{flex:1 1 0 !important;min-width:0 !important;flex-direction:column !important;align-items:center !important;gap:3px !important;padding:9px 6px !important;background:rgba(255,255,255,.03) !important;border:1px solid var(--bdr,rgba(255,255,255,.05)) !important;border-radius:11px !important;}
#cust-list .cust-card .cust-stat-lbl{font-size:9.5px;color:var(--t3,#94a3b8);font-weight:700;}
#cust-list .cust-card .cust-stat-val{font-size:14px;font-weight:800;color:var(--t1,#f4f0e6);}
/* الإجراءات (صفّ أفقي دائمًا) */
#cust-list .cust-card .cust-actions{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;gap:7px !important;width:auto !important;padding:12px 16px !important;border-top:1px solid var(--bdr,rgba(255,255,255,.06)) !important;margin:0 !important;}
#cust-list .cust-card .cust-act{flex:1 1 0 !important;width:auto !important;height:34px !important;}
#cust-list .cust-card .cust-debt-strip{margin:0 !important;border-top:1px solid var(--bdr,rgba(255,255,255,.06));border-radius:0;}
/* ===== عرض القائمة (صفوف نظيفة مرتّبة) ===== */
#cust-list .cust-list.as-list .cust-card{display:grid !important;grid-template-columns:220px minmax(0,1fr) minmax(0,1.5fr) 196px !important;align-items:center !important;gap:14px !important;padding:10px 16px !important;min-height:66px;}
#cust-list .cust-list.as-list .cust-card .cc-top{padding:0 !important;gap:10px;min-width:0;}
#cust-list .cust-list.as-list .cust-card .cust-avatar{width:42px !important;height:42px !important;border-radius:11px !important;font-size:16px;}
#cust-list .cust-list.as-list .cust-card .cust-name{font-size:13.5px;}
#cust-list .cust-list.as-list .cust-card .cust-badges-row{margin-top:3px;}
#cust-list .cust-list.as-list .cust-card .cc-contact{border:0 !important;padding:0 !important;flex-direction:column !important;gap:4px !important;align-items:flex-start;min-width:0;}
#cust-list .cust-list.as-list .cust-card .cc-line{font-size:12px;}
#cust-list .cust-list.as-list .cust-card .cc-chip{padding:3px 8px;font-size:10.5px;}
#cust-list .cust-list.as-list .cust-card .cust-ribbon{border:0 !important;padding:0 !important;gap:7px !important;flex-wrap:nowrap !important;overflow:hidden;justify-content:flex-start;}
#cust-list .cust-list.as-list .cust-card .cust-stat{flex:0 0 auto !important;flex-direction:row !important;align-items:center !important;gap:5px !important;padding:5px 10px !important;background:rgba(255,255,255,.04) !important;border:1px solid var(--bdr,rgba(255,255,255,.06)) !important;border-radius:9px !important;}
#cust-list .cust-list.as-list .cust-card .cust-stat-lbl{display:inline !important;font-size:9.5px;color:var(--t3,#94a3b8);font-weight:700;}
#cust-list .cust-list.as-list .cust-card .cust-stat-val{font-size:12.5px;}
#cust-list .cust-list.as-list .cust-card .cust-actions{border:0 !important;padding:0 !important;gap:7px !important;width:auto !important;justify-content:flex-start;}
#cust-list .cust-list.as-list .cust-card .cust-act{flex:0 0 auto !important;width:32px !important;height:32px !important;}
#cust-list .cust-list.as-list .cust-card .cust-debt-strip{grid-column:1 / -1;border:0 !important;margin-top:6px !important;}
@media(max-width:860px){
#cust-list .cust-list.as-list .cust-card{grid-template-columns:auto 1fr !important;gap:9px 12px !important;}
#cust-list .cust-list.as-list .cust-card .cc-contact{grid-column:1 / -1;flex-direction:row !important;flex-wrap:wrap;}
#cust-list .cust-list.as-list .cust-card .cust-ribbon{grid-column:1 / -1;}
#cust-list .cust-list.as-list .cust-card .cust-actions{grid-column:1 / -1;justify-content:flex-start;}
}
/* ════════ 🆕 قائمة العملاء — جدول احترافي متحاذٍ ════════ */
#cust-list .cl-table{display:flex;flex-direction:column;border:1px solid var(--bdr,rgba(255,255,255,.08));border-radius:14px;overflow:hidden;background:rgba(255,255,255,.015);margin-top:6px;}
#cust-list .cl-head,
#cust-list .cl-row{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(140px,1fr) minmax(120px,1fr) 78px 120px 196px;align-items:center;gap:12px;padding:11px 16px;}
#cust-list .cl-head{background:rgba(255,255,255,.045);border-bottom:1px solid var(--bdr,rgba(255,255,255,.08));font-size:11px;font-weight:800;color:var(--t3,#94a3b8);}
#cust-list .cl-row{border-bottom:1px solid rgba(255,255,255,.05);transition:background .16s;animation:bkCardIn .25s ease both;}
#cust-list .cl-row:hover{background:rgba(255,255,255,.045);}
#cust-list .cl-row:last-child{border-bottom:0;}
#cust-list .cl-c{min-width:0;}
#cust-list .cl-cust{display:flex;align-items:center;gap:11px;}
#cust-list .cl-cust .cust-avatar{width:40px !important;height:40px !important;border-radius:11px !important;font-size:15px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
#cust-list .cl-cust .cust-avatar img{width:100%;height:100%;object-fit:cover;}
#cust-list .cl-id{min-width:0;}
#cust-list .cl-name{font-size:13.5px;font-weight:800;color:var(--t1,#f4f0e6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cust-list .cl-badges{display:flex;gap:5px;margin-top:3px;flex-wrap:wrap;}
#cust-list .cl-contact .cl-phone{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--t2,#c8bfa8);}
#cust-list .cl-vehicle{font-size:12px;color:var(--t2,#c8bfa8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cust-list .cl-muted{color:var(--t4,#64748b);}
#cust-list .cl-num{display:flex;flex-direction:column;gap:1px;align-items:flex-start;}
#cust-list .cl-num-v{font-size:14px;font-weight:800;color:var(--t1,#f4f0e6);}
#cust-list .cl-num-v.cl-money{color:var(--gold,#c9a84c);}
#cust-list .cl-num-l{font-size:9.5px;color:var(--t3,#94a3b8);font-weight:700;}
#cust-list .cl-acts{display:flex;gap:6px;justify-content:flex-start;}
#cust-list .cl-acts .cust-act{width:32px !important;height:32px !important;flex:0 0 auto !important;}
#cust-list .cl-debt{grid-column:1 / -1;margin-top:8px;}
@media(max-width:900px){
#cust-list .cl-head{display:none;}
#cust-list .cl-row{grid-template-columns:1fr 1fr;gap:9px 12px;padding:13px 14px;}
#cust-list .cl-cust{grid-column:1 / -1;}
#cust-list .cl-acts{grid-column:1 / -1;justify-content:flex-start;}
}
@media(max-width:480px){
#cust-list .cl-row{grid-template-columns:1fr;}
}
/* ════════════ 🆕 لوحة بروفايل المركز — واجهة اللانشر (مَنطَقة #cprof) ════════════ */
#cprof{
--cp-cream:#F2ECE0;--cp-cream2:#EDE5D6;--cp-card:#FFFFFF;--cp-soft:#FBF7EF;
--cp-amber:#F1C04C;--cp-amber-d:#E3A92C;--cp-ink:#23201B;--cp-ink2:#5F584C;--cp-muted:#9A9285;--cp-line:#EAE2D2;--cp-dark:#1C1C1F;
--cp-r:26px;--cp-sh:0 12px 34px rgba(60,48,20,.07);--cp-sh-sm:0 6px 16px rgba(60,48,20,.05);--cp-ease:cubic-bezier(.16,1,.3,1);
font-family:'Tajawal',system-ui,sans-serif;color:var(--cp-ink);
background:radial-gradient(900px 420px at 88% -8%,#FBEFC9 0,transparent 60%),radial-gradient(700px 380px at 6% 4%,#F6EEDD 0,transparent 55%),var(--cp-cream);
padding:10px 20px 14px;
width:100%;min-height:100vh;box-sizing:border-box;
}
/* ════════════ 🌙 الوضع الليلي للانشر — مريح ومثالي للعين ════════════ */
[data-theme="dark"] #cprof{
--cp-cream:#15171C; /* الخلفية الأساسية — رمادي داكن دافئ */
--cp-cream2:#23272F; /* خلفية ثانوية أنعم */
--cp-card:#1E2127; /* خلفية البطاقات */
--cp-soft:#262A32; /* الأنعم (hover) */
--cp-ink:#ECE8E0; /* النص الأساسي — أبيض دافئ غير ناصع */
--cp-ink2:#B5AFA3; /* النص الثانوي */
--cp-muted:#8B8579; /* النص الباهت */
--cp-line:#32363F; /* الحدود */
--cp-dark:#0F1115;
--cp-sh:0 14px 40px rgba(0,0,0,.45);
--cp-sh-sm:0 6px 18px rgba(0,0,0,.35);
/* الذهبي يبقى كما هو — يتألق على الداكن */
background:
radial-gradient(900px 420px at 88% -8%,rgba(227,169,44,.10) 0,transparent 60%),
radial-gradient(700px 380px at 6% 4%,rgba(241,192,76,.06) 0,transparent 55%),
var(--cp-cream);
}
/* الإطار الرئيسي */
[data-theme="dark"] #cprof .cp-wrap{
background:transparent;
border:none;
}
/* حبة الإنتاجية المخطّطة (ghost) — نمط داكن */
[data-theme="dark"] #cprof .cp-pill .cp-bar.cp-ghost{
background:repeating-linear-gradient(60deg,#262A32,#262A32 6px,#2E333C 6px,#2E333C 12px);
color:var(--cp-ink2);
}
/* خلايا الحجوزات الكريمية */
[data-theme="dark"] #cprof .cp-bk-stat,
[data-theme="dark"] #cprof .cp-bk-next{
background:var(--cp-cream2);
border-color:rgba(255,255,255,.05);
}
[data-theme="dark"] #cprof .cp-bk-stat.cp-b .cp-bk-dot{background:#ECE8E0;}
[data-theme="dark"] #cprof .cp-bk-stat.cp-b .cp-bk-num{color:#ECE8E0;}
/* شريط دخل الشهر/الرواتب/الإيجار في تغطية التكاليف */
[data-theme="dark"] #cprof .cp-cover-bars{background:var(--cp-cream2);border-color:rgba(255,255,255,.05);}
/* النص داخل النافبار النشط يبقى مقروءاً */
[data-theme="dark"] #cprof .cp-nav a.cp-on{background:var(--cp-amber-d);color:#1A1206;}
[data-theme="dark"] #cprof .cp-pill .cp-bar.cp-inkb{background:#33373F;color:#ECE8E0;}
/* عناصر تستخدم --cp-ink كخلفية (انقلب فاتحاً في الليلي) — تصحيح للداكن */
[data-theme="dark"] #cprof .cp-gctl button.cp-darkb,
[data-theme="dark"] #cprof .cp-ev.cp-darkb{background:#33373F;color:#ECE8E0;}
[data-theme="dark"] #cprof .cp-tip{background:#33373F;color:#ECE8E0;}
/* أعمدة نشاط الأسبوع الفارغة */
[data-theme="dark"] #cprof .cp-cbar .cp-stick,
[data-theme="dark"] #cprof .cp-cbar .cp-cdot{background:#3A3F49;}
/* خلايا تغطية التكاليف */
[data-theme="dark"] #cprof .cp-cover-bar{background:var(--cp-soft);border-color:var(--cp-line);}
[data-theme="dark"] #cprof .cp-cbar.cp-picked{background:var(--cp-soft);}
/* الأفاتارات المصغّرة */
[data-theme="dark"] #cprof .cp-avs span{border-color:#1E2127;background:var(--cp-cream2);}
#cprof .cp-wrap{max-width:1400px;margin:0 auto;background:transparent;border:none;border-radius:0;box-shadow:none;padding:8px 6px 20px;position:relative;overflow:visible;}
#cprof .cp-ibtn.cp-av{position:relative;overflow:hidden;}
#cprof .cp-ibtn.cp-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit !important;}
#cprof *{box-sizing:border-box;}
#cprof .cp-topbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:22px;}
#cprof .cp-brand{display:flex;align-items:center;gap:9px;background:var(--cp-card);border:1px solid var(--cp-line);padding:9px 16px;border-radius:40px;font-weight:900;font-size:15px;box-shadow:var(--cp-sh-sm);}
#cprof .cp-brand .cp-dot{width:20px;height:20px;border-radius:7px;background:linear-gradient(135deg,var(--cp-amber),var(--cp-amber-d));display:grid;place-items:center;color:#fff;font-size:12px;}
#cprof .cp-nav{display:flex;align-items:center;gap:2px;background:var(--cp-card);border:1px solid var(--cp-line);border-radius:40px;padding:5px;box-shadow:var(--cp-sh-sm);margin-inline:auto;flex-wrap:wrap;}
#cprof .cp-nav a{font-size:13px;font-weight:600;color:var(--cp-ink2);text-decoration:none;padding:8px 15px;border-radius:30px;transition:.2s var(--cp-ease);white-space:nowrap;cursor:pointer;}
#cprof .cp-nav a:hover{color:var(--cp-ink);background:var(--cp-soft);}
#cprof .cp-nav a.cp-on{background:var(--cp-ink);color:#fff;font-weight:800;}
#cprof .cp-tools{display:flex;align-items:center;gap:8px;}
#cprof .cp-ibtn{width:42px;height:42px;border-radius:14px;background:var(--cp-card);border:1px solid var(--cp-line);display:grid;place-items:center;cursor:pointer;box-shadow:var(--cp-sh-sm);color:var(--cp-ink2);transition:.2s var(--cp-ease);}
#cprof .cp-ibtn:hover{color:var(--cp-ink);transform:translateY(-1px);}
#cprof .cp-ibtn.cp-av{background:linear-gradient(135deg,var(--cp-amber),var(--cp-amber-d));color:#fff;font-weight:900;border:none;}
#cprof .cp-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:22px;}
#cprof .cp-welcome h1{font-size:42px;font-weight:900;letter-spacing:-1px;line-height:1.05;}
#cprof .cp-welcome .cp-sub{color:var(--cp-ink2);font-size:14px;font-weight:600;margin-top:6px;}
#cprof .cp-pills{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:18px;}
#cprof .cp-pill{display:flex;flex-direction:column;gap:5px;min-width:74px;}
#cprof .cp-pill .cp-lbl{font-size:11px;color:var(--cp-muted);font-weight:700;}
#cprof .cp-pill .cp-bar{height:30px;border-radius:30px;display:flex;align-items:center;padding:0 14px;font-size:12px;font-weight:800;background:var(--cp-card);border:1px solid var(--cp-line);color:var(--cp-ink);}
#cprof .cp-pill .cp-bar.cp-amber{background:linear-gradient(135deg,var(--cp-amber),var(--cp-amber-d));border:none;color:#3a2c00;}
#cprof .cp-pill .cp-bar.cp-inkb{background:var(--cp-ink);color:#fff;}
#cprof .cp-pill .cp-bar.cp-ghost{background:repeating-linear-gradient(60deg,#EFE7D6,#EFE7D6 6px,#F6F0E3 6px,#F6F0E3 12px);color:var(--cp-ink2);min-width:120px;}
#cprof .cp-bignums{display:flex;align-items:flex-start;gap:26px;}
#cprof .cp-bignum{display:flex;flex-direction:column;align-items:center;gap:2px;}
#cprof .cp-bignum .cp-brow{display:flex;align-items:baseline;gap:7px;}
#cprof .cp-bignum .cp-ico{width:22px;height:22px;border-radius:7px;background:var(--cp-soft);display:grid;place-items:center;color:var(--cp-ink2);align-self:center;}
#cprof .cp-bignum .cp-v{font-size:48px;font-weight:900;letter-spacing:-2px;line-height:1;}
#cprof .cp-bignum .cp-l{font-size:12px;color:var(--cp-ink2);font-weight:700;}
#cprof .cp-bignum .cp-stars{color:var(--cp-amber-d);font-size:13px;letter-spacing:1px;}
#cprof .cp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
#cprof .cp-card{background:var(--cp-card);border:1px solid var(--cp-line);border-radius:var(--cp-r);padding:20px;box-shadow:var(--cp-sh-sm);opacity:0;transform:translateY(10px);animation:cpRise .55s var(--cp-ease) forwards;}
#cprof .cp-card:nth-child(1){animation-delay:.02s}#cprof .cp-card:nth-child(2){animation-delay:.06s}#cprof .cp-card:nth-child(3){animation-delay:.10s}#cprof .cp-card:nth-child(4){animation-delay:.14s}#cprof .cp-card:nth-child(5){animation-delay:.18s}#cprof .cp-card:nth-child(6){animation-delay:.22s}#cprof .cp-card:nth-child(7){animation-delay:.26s}
@keyframes cpRise{to{opacity:1;transform:none}}
#cprof .cp-card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
#cprof .cp-card-h .cp-t{font-size:17px;font-weight:900;}
#cprof .cp-go{width:34px;height:34px;border-radius:12px;background:var(--cp-soft);display:grid;place-items:center;color:var(--cp-ink);cursor:pointer;transition:.2s var(--cp-ease);border:none;}
#cprof .cp-go:hover{background:var(--cp-amber);transform:rotate(-8deg);}
#cprof .cp-c-profile{background:linear-gradient(180deg,#2a2620,#1c1a16);color:#fff;border:none;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;min-height:280px;padding:0;}
#cprof .cp-c-profile .cp-cover{position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 0%,rgba(241,192,76,.5),transparent 55%),linear-gradient(180deg,#3a342a,#1c1a16);}
#cprof .cp-c-profile .cp-logo{position:absolute;top:18px;right:18px;width:60px;height:60px;border-radius:18px;background:linear-gradient(135deg,var(--cp-amber),var(--cp-amber-d));display:grid;place-items:center;font-size:26px;font-weight:900;color:#3a2c00;box-shadow:0 8px 20px rgba(0,0,0,.3);z-index:2;}
#cprof .cp-c-profile .cp-logo svg{width:30px;height:30px}
#cprof .cp-c-profile .cp-chip{position:absolute;top:24px;left:18px;background:rgba(255,255,255,.14);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:11px;font-weight:800;padding:6px 12px;border-radius:30px;z-index:2;}
#cprof .cp-c-profile .cp-pbody{position:relative;z-index:2;padding:20px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));}
#cprof .cp-c-profile .cp-pname{font-size:22px;font-weight:900;}
#cprof .cp-c-profile .cp-pmeta{font-size:12.5px;color:#d8cfbe;font-weight:600;margin-top:4px;display:flex;gap:10px;flex-wrap:wrap;}
#cprof .cp-c-profile .cp-prev{display:inline-flex;align-items:center;gap:8px;margin-top:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:30px;padding:8px 14px;font-size:13px;font-weight:800;}
#cprof .cp-c-profile .cp-prev b{color:var(--cp-amber)}
#cprof .cp-bigh{font-size:34px;font-weight:900;letter-spacing:-1px;}
#cprof .cp-bigh small{font-size:12px;font-weight:700;color:var(--cp-ink2);margin-inline-start:8px;}
#cprof .cp-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:120px;margin-top:18px;position:relative;}
#cprof .cp-cbar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;}
#cprof .cp-cbar .cp-stick{width:9px;border-radius:8px;background:var(--cp-cream2);transition:.3s var(--cp-ease);}
#cprof .cp-cbar.cp-on .cp-stick{background:linear-gradient(180deg,var(--cp-amber),var(--cp-amber-d));}
#cprof .cp-cbar .cp-d{font-size:11px;color:var(--cp-muted);font-weight:700;}
#cprof .cp-cbar .cp-cdot{width:5px;height:5px;border-radius:50%;background:var(--cp-cream2);}
#cprof .cp-cbar.cp-on .cp-cdot{background:var(--cp-amber-d);}
#cprof .cp-tip{position:absolute;top:-6px;background:var(--cp-ink);color:#fff;font-size:11px;font-weight:800;padding:5px 10px;border-radius:20px;transform:translateX(50%);}
#cprof .cp-gauge-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:6px;}
#cprof .cp-gauge{position:relative;width:150px;height:150px;}
#cprof .cp-gauge .cp-glbl{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
#cprof .cp-gauge .cp-glbl .cp-n{font-size:30px;font-weight:900;letter-spacing:-1px;}
#cprof .cp-gauge .cp-glbl .cp-s{font-size:11px;color:var(--cp-ink2);font-weight:700;}
#cprof .cp-gctl{display:flex;gap:8px;justify-content:center;margin-top:12px;}
#cprof .cp-gctl button{width:42px;height:42px;border-radius:14px;border:1px solid var(--cp-line);background:var(--cp-soft);cursor:pointer;display:grid;place-items:center;color:var(--cp-ink);transition:.2s var(--cp-ease);font-size:16px;}
#cprof .cp-gctl button:hover{background:var(--cp-amber);}
#cprof .cp-gctl button.cp-darkb{background:var(--cp-ink);color:#fff;border:none;}
/* ════════ بطاقة الحجوزات — محسّنة: 3 خلايا واضحة + الموعد القادم ════════ */
#cprof .cp-bk-total-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:var(--cp-muted,#9A9285);font-family:'Cairo',sans-serif;}
#cprof .cp-bk-total-pill span{font-size:18px;font-weight:900;color:var(--cp-ink,#23201B);font-family:'Outfit','Cairo',sans-serif;}
/* ثلاث خلايا ثابتة العرض (لا تتمدد مع البيانات) */
#cprof .cp-bk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 14px;}
#cprof .cp-bk-stat{
display:flex;flex-direction:column;align-items:center;gap:3px;
padding:12px 6px 10px;border-radius:14px;
background:var(--cp-cream2,#F3EEE3);
border:1px solid rgba(0,0,0,.04);
position:relative;
}
#cprof .cp-bk-stat .cp-bk-dot{width:9px;height:9px;border-radius:50%;margin-bottom:3px;}
#cprof .cp-bk-stat .cp-bk-num{font-size:24px;font-weight:900;line-height:1;color:var(--cp-ink,#23201B);font-family:'Outfit','Cairo',sans-serif;letter-spacing:-.5px;}
#cprof .cp-bk-stat .cp-bk-lbl{font-size:11px;font-weight:700;color:var(--cp-muted,#9A9285);}
/* مؤكدة — ذهبي */
#cprof .cp-bk-stat.cp-a{background:linear-gradient(160deg,rgba(227,169,44,.14),rgba(227,169,44,.04));border-color:rgba(227,169,44,.25);}
#cprof .cp-bk-stat.cp-a .cp-bk-dot{background:var(--cp-amber-d,#E3A92C);box-shadow:0 0 8px rgba(227,169,44,.5);}
#cprof .cp-bk-stat.cp-a .cp-bk-num{color:var(--cp-amber-d,#E3A92C);}
/* بالانتظار — داكن */
#cprof .cp-bk-stat.cp-b .cp-bk-dot{background:var(--cp-ink,#23201B);}
/* ملغاة — أحمر */
#cprof .cp-bk-stat.cp-c{background:linear-gradient(160deg,rgba(239,68,68,.08),rgba(239,68,68,.02));border-color:rgba(239,68,68,.18);}
#cprof .cp-bk-stat.cp-c .cp-bk-dot{background:#ef4444;}
#cprof .cp-bk-stat.cp-c .cp-bk-num{color:#ef4444;}
/* الموعد القادم */
#cprof .cp-bk-next{display:flex;align-items:center;gap:12px;padding:11px;border-radius:14px;background:var(--cp-cream2,#F3EEE3);border:1px solid rgba(0,0,0,.04);}
#cprof .cp-bk-next-ico{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#EBB73C,#E3A92C);display:grid;place-items:center;color:#3a2c00;font-size:18px;flex-shrink:0;}
#cprof .cp-bk-next-body{flex:1;min-width:0;}
#cprof .cp-bk-next-lbl{font-size:10px;font-weight:700;color:var(--cp-muted,#9A9285);margin-bottom:1px;}
#cprof .cp-bk-next-t{font-weight:800;font-size:13.5px;color:var(--cp-ink,#23201B);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cprof .cp-bk-next-d{font-size:12px;color:var(--cp-ink2,#6B6355);margin-top:1px;}
/* 🆕 قائمة الحجوزات القابلة للتمرير داخل البطاقة (شريط تمرير مخفي · بنفس حجم البطاقة) */
#cprof .cp-bk-list{
display:flex;flex-direction:column;gap:8px;
max-height:142px; /* ≈ عنصرين · يبقى مدمجاً قرب الحجم الحالي ويلمّح للتمرير */
overflow-y:auto;overflow-x:hidden;
-webkit-overflow-scrolling:touch;
scrollbar-width:none; /* Firefox */
-ms-overflow-style:none; /* IE/Edge */
scroll-snap-type:y proximity;
}
#cprof .cp-bk-list::-webkit-scrollbar{width:0;height:0;display:none;} /* WebKit */
#cprof .cp-bk-list .cp-bk-next{scroll-snap-align:start;}
#cprof .cp-bk-list .cp-bk-next{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease;}
#cprof .cp-bk-list .cp-bk-next:active{transform:scale(.985);}
#cprof .cp-bk-list-empty{
display:flex;align-items:center;gap:12px;padding:11px;border-radius:14px;
background:var(--cp-cream2,#F3EEE3);border:1px solid rgba(0,0,0,.04);
}
#cprof .cp-acc{border-top:1px solid var(--cp-line);}
#cprof .cp-acc:first-of-type{border-top:none}
#cprof .cp-acc .cp-arow{display:flex;align-items:center;justify-content:space-between;padding:14px 2px;cursor:pointer;}
#cprof .cp-acc .cp-arow .cp-lt{display:flex;align-items:center;gap:10px;font-weight:800;font-size:14px;}
#cprof .cp-acc .cp-arow .cp-lt .cp-mi{width:30px;height:30px;border-radius:10px;background:var(--cp-soft);display:grid;place-items:center;}
#cprof .cp-acc .cp-arow .cp-cr{transition:.25s var(--cp-ease);color:var(--cp-muted)}
#cprof .cp-acc.cp-open .cp-arow .cp-cr{transform:rotate(180deg)}
#cprof .cp-acc .cp-abody{max-height:0;overflow:hidden;transition:max-height .3s var(--cp-ease);}
#cprof .cp-acc.cp-open .cp-abody{max-height:200px;}
#cprof .cp-acc .cp-abody .cp-in{padding:2px 2px 14px;color:var(--cp-ink2);font-size:13px;line-height:1.9;}
#cprof .cp-sch-top{display:flex;align-items:center;justify-content:space-between;color:var(--cp-ink2);font-size:13px;font-weight:700;margin-bottom:6px;}
#cprof .cp-days{display:grid;grid-template-columns:repeat(6,1fr);text-align:center;border-bottom:1px solid var(--cp-line);padding-bottom:10px;margin-bottom:6px;}
#cprof .cp-days .cp-dy{font-size:11px;color:var(--cp-muted);font-weight:700;}
#cprof .cp-days .cp-dy.cp-on{color:var(--cp-ink);}
#cprof .cp-days .cp-dy b{display:block;font-size:17px;font-weight:900;margin-top:3px;}
#cprof .cp-days .cp-dy.cp-on b{color:var(--cp-amber-d);}
#cprof .cp-slot{display:grid;grid-template-columns:54px 1fr;gap:8px;align-items:center;padding:7px 0;border-top:1px dashed var(--cp-line);}
#cprof .cp-slot .cp-tm{font-size:11px;color:var(--cp-muted);font-weight:700;}
#cprof .cp-ev{border-radius:14px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;}
#cprof .cp-ev.cp-amber{background:linear-gradient(135deg,var(--cp-amber),var(--cp-amber-d));color:#3a2c00;}
#cprof .cp-ev.cp-darkb{background:var(--cp-ink);color:#fff;}
#cprof .cp-ev .cp-ti{font-size:13px;font-weight:800;}
#cprof .cp-ev .cp-ds{font-size:11px;opacity:.8;font-weight:600;}
#cprof .cp-avs{display:flex;}
#cprof .cp-avs span{width:24px;height:24px;border-radius:50%;border:2px solid #fff;margin-inline-start:-8px;background:var(--cp-cream2);display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--cp-ink2);}
#cprof .cp-c-dark{background:var(--cp-dark);color:#fff;border:none;}
#cprof .cp-c-dark .cp-card-h .cp-t{color:#fff}
#cprof .cp-c-dark .cp-count{font-size:30px;font-weight:900;letter-spacing:-1px;}
#cprof .cp-task{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.08);}
#cprof .cp-task:first-of-type{border-top:none}
#cprof .cp-task .cp-tic{width:36px;height:36px;border-radius:11px;background:rgba(255,255,255,.07);display:grid;place-items:center;color:#d8cfbe;flex-shrink:0;}
#cprof .cp-task .cp-tmeta{flex:1;min-width:0}
#cprof .cp-task .cp-tmeta .cp-tn{font-size:13.5px;font-weight:800;}
#cprof .cp-task .cp-tmeta .cp-ttm{font-size:11px;color:#9a9388;font-weight:600;margin-top:2px;}
#cprof .cp-task.cp-done .cp-tmeta .cp-tn{color:#9a9388;text-decoration:line-through;}
#cprof .cp-chk{width:24px;height:24px;border-radius:50%;border:2px solid rgba(255,255,255,.2);display:grid;place-items:center;flex-shrink:0;color:#3a2c00;}
#cprof .cp-task.cp-done .cp-chk{background:linear-gradient(135deg,var(--cp-amber),var(--cp-amber-d));border:none;}
#cprof .cp-c-info{grid-column:1}
#cprof .cp-c-sch{grid-column:2 / 4}
#cprof .cp-c-dark{grid-column:4}
@media(max-width:1080px){#cprof .cp-grid{grid-template-columns:repeat(2,1fr)}#cprof .cp-c-sch{grid-column:1 / 3}#cprof .cp-c-dark{grid-column:auto}#cprof .cp-c-info{grid-column:auto}#cprof .cp-welcome h1{font-size:32px}}
@media(max-width:640px){#cprof{padding:14px;border-radius:22px}#cprof .cp-grid{grid-template-columns:1fr}#cprof .cp-c-sch{grid-column:auto}#cprof .cp-nav{order:3;width:100%;justify-content:flex-start;overflow-x:auto}#cprof .cp-welcome h1{font-size:26px}#cprof .cp-bignums{gap:18px}#cprof .cp-bignum .cp-v{font-size:34px}}
@media(prefers-reduced-motion:reduce){#cprof .cp-card{animation:none;opacity:1;transform:none}}
/* ════════ 🛠️ اللانشر = بروفايل المركز (بنية center-profile المباشرة) ════════ */
#s-launcher.on{display:block !important;padding:0 !important;align-items:stretch !important;justify-content:flex-start !important;}
html[data-theme='light'] #s-launcher.on{
background:#F2ECE0 !important;
background-image:radial-gradient(900px 420px at 88% -8%,#FBEFC9 0,transparent 60%),radial-gradient(700px 380px at 6% 4%,#F6EEDD 0,transparent 55%) !important;}
html[data-theme='dark'] #s-launcher.on{
background:#15171C !important;
background-image:radial-gradient(900px 420px at 88% -8%,rgba(227,169,44,.10) 0,transparent 60%),radial-gradient(700px 380px at 6% 4%,rgba(241,192,76,.06) 0,transparent 55%) !important;}
#s-launcher #cprof{display:block;min-height:100vh;padding:0;}
@media(max-width:640px){#s-launcher #cprof{padding:10px;}}
/* 🆕 خلفية body بلون اللانشر عند عرضه */
html[data-theme='light']:has(#s-launcher.on), html[data-theme='light'] body:has(#s-launcher.on){background:#F2ECE0 !important;padding:0 !important;}
html[data-theme='dark']:has(#s-launcher.on), html[data-theme='dark'] body:has(#s-launcher.on){background:#15171C !important;padding:0 !important;}
/* صفحة تسجيل الدخول — بلا هوامش (تملأ الشاشة) */
body:has(#s-login.on){padding:0 !important;}
/* روابط التنقّل تحتاج position لشارة القفل من _refreshFeatureGates */
#cprof .cp-nav a{position:relative;}
#cprof .cp-nav a [data-lock-badge]{width:20px !important;height:20px !important;font-size:10px !important;top:50% !important;left:2px !important;transform:translateY(-50%);border-radius:6px !important;}
/* عناصر meta التي يحقنها updateLauncherStats داخل بطاقة البروفايل */
#cprof .cp-pmeta .lnch3-hero-meta-item{display:inline-flex;align-items:center;gap:4px;color:#d8cfbe !important;background:none !important;border:none !important;padding:0 !important;font-size:12.5px;font-weight:600;}
#cprof .cp-pmeta .lnch3-hero-meta-sep{color:#9a9388;margin:0 2px;}
#cprof .cp-pmeta .lnch3-hero-meta-ico{font-size:12px;}
/* 🆕 شعار المركز داخل بطاقة البروفايل */
#cprof #lnch-emp-avatar{display:flex !important;align-items:center;justify-content:center;position:relative;overflow:hidden;font-weight:900;}
#cprof #lnch-emp-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* مطابقة dev للنموذج (padding:10px 0) */
#cprof .cp-dev{padding:10px 0;}
/* ════════ 🛠️ إصلاح اللانشر — العناصر المنقولة داخل لوحة #cprof ════════
شريحة الهوية · باج الاشتراك · كروت الإجراءات · شريط/بطاقة الإعلان · الإجراءات السريعة
كلها أعيد تنسيقها لتلائم اللوحة الكريمية في الوضعين (داكن/فاتح) */
/* ── شريحة الهوية (التحية + الاسم + الدور) ── */
#cprof .lnch3-id-chip{
display:inline-flex !important;align-items:center;gap:13px;
background:var(--cp-card,#fff) !important;
border:1px solid var(--cp-line,#EAE2D2) !important;
border-radius:40px !important;padding:8px 16px 8px 9px !important;
box-shadow:var(--cp-sh-sm,0 6px 16px rgba(60,48,20,.05)) !important;
margin-bottom:14px;position:relative;overflow:hidden;cursor:default;
}
#cprof .lnch3-id-chip:hover{transform:none !important;}
#cprof .lnch3-id-chip-shine{display:none !important;}
#cprof .lnch3-id-chip-avatar{
width:44px;height:44px;min-width:44px;border-radius:50% !important;
background:linear-gradient(135deg,var(--cp-amber,#F1C04C),var(--cp-amber-d,#E3A92C)) !important;
color:#3a2c00 !important;font-size:18px;font-weight:900;
display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
border:none !important;box-shadow:0 6px 14px rgba(227,169,44,.35) !important;
}
#cprof .lnch3-id-chip-greet{color:var(--cp-muted,#9A9285) !important;font-size:11px;font-weight:800;display:flex;align-items:center;gap:5px;}
#cprof .lnch3-id-chip-name{color:var(--cp-ink,#23201B) !important;font-size:16px;font-weight:900;background:none !important;-webkit-text-fill-color:var(--cp-ink,#23201B) !important;}
#cprof .lnch3-id-chip-divider{width:1px;height:30px;background:var(--cp-line,#EAE2D2) !important;}
#cprof .lnch3-id-chip-role{
display:inline-flex;align-items:center;gap:5px;
background:linear-gradient(135deg,var(--cp-amber,#F1C04C),var(--cp-amber-d,#E3A92C)) !important;
border:none !important;color:#3a2c00 !important;
padding:5px 12px !important;border-radius:30px !important;font-size:11px;font-weight:900;
}
#cprof .lnch3-id-chip-role .lnch-role-lbl{color:#3a2c00 !important;}
/* ── زر تسجيل الخروج في أدوات اللوحة ── */
#cprof .cp-ibtn-logout{color:#c2410c !important;}
#cprof .cp-ibtn-logout:hover{background:#fee2e2 !important;color:#b91c1c !important;border-color:#fecaca !important;}
/* ── باج الاشتراك (للمدير) ── */
#cprof #sub-badge-row{margin:0 0 16px !important;}
#cprof #sub-badge{
background:var(--cp-card,#fff) !important;
border:1px solid var(--cp-line,#EAE2D2) !important;
box-shadow:var(--cp-sh-sm,0 6px 16px rgba(60,48,20,.05)) !important;
border-radius:16px !important;
}
#cprof #sub-badge:hover{transform:translateY(-1px);}
#cprof #sub-badge [style*="باقتك"], #cprof #sub-badge > div > div:first-child{color:var(--cp-muted,#9A9285) !important;}
#cprof #sub-badge-name{color:var(--cp-ink,#23201B) !important;}
/* ── كروت الإجراءات الرئيسية (الاستقبال · لوحة التحكم · التقرير الفني) ── */
#cprof .lnch3-actions{
display:grid;grid-template-columns:repeat(3,1fr);gap:16px;
margin:0 0 20px !important;animation:none;
}
#cprof .lnch3-action-card{
background:var(--cp-card,#FFFFFF) !important;
border:1px solid var(--cp-line,#EAE2D2) !important;
border-radius:var(--cp-r,26px) !important;
box-shadow:var(--cp-sh-sm,0 6px 16px rgba(60,48,20,.05)) !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
padding:20px !important;
}
#cprof .lnch3-action-card:hover:not(.lnch3-action-locked){
transform:translateY(-4px);
box-shadow:0 16px 34px rgba(60,48,20,.12) !important;
border-color:var(--cp-amber-d,#E3A92C) !important;
}
#cprof .lnch3-action-shine{display:none !important;}
#cprof .lnch3-action-glow{display:none !important;}
#cprof .lnch3-action-title{color:var(--cp-ink,#23201B) !important;}
#cprof .lnch3-action-desc{color:var(--cp-ink2,#5F584C) !important;}
#cprof .lnch3-action-badge{
background:var(--cp-soft,#FBF7EF) !important;
border:1px solid var(--cp-line,#EAE2D2) !important;
color:var(--cp-ink2,#5F584C) !important;
}
#cprof .lnch3-action-badge-new{
background:linear-gradient(135deg,rgba(168,85,247,.10),rgba(168,85,247,.04)) !important;
border-color:rgba(168,85,247,.35) !important;color:#7c3aed !important;
}
#cprof .lnch3-action-cta{
background:var(--cp-soft,#FBF7EF) !important;
border:1px solid var(--cp-line,#EAE2D2) !important;
color:var(--cp-ink,#23201B) !important;
}
#cprof .lnch3-action-card:hover:not(.lnch3-action-locked) .lnch3-action-cta{
background:linear-gradient(135deg,var(--cp-amber,#F1C04C),var(--cp-amber-d,#E3A92C)) !important;
border-color:transparent !important;color:#3a2c00 !important;
}
/* ── شريط الإعلانات المتحرك ── */
#cprof .lnch3-ann-strip{
background:var(--cp-card,#fff) !important;
border:1px solid var(--cp-line,#EAE2D2) !important;
border-radius:14px !important;
box-shadow:var(--cp-sh-sm,0 6px 16px rgba(60,48,20,.05)) !important;
margin:0 0 16px !important;animation:none !important;
}
#cprof .lnch3-ann-strip-lbl{color:var(--cp-amber-d,#E3A92C) !important;}
#cprof .lnch3-ann-strip-content{color:var(--cp-ink,#23201B) !important;}
#cprof .lnch3-ann-strip-icon{
background:linear-gradient(135deg,var(--cp-amber,#F1C04C),var(--cp-amber-d,#E3A92C)) !important;
color:#3a2c00 !important;
}
/* ── بطاقة الإعلان المميّز ── */
#cprof .lnch3-ann-card{
background:var(--cp-card,#fff) !important;
border:1px solid var(--cp-line,#EAE2D2) !important;
border-radius:var(--cp-r,26px) !important;
box-shadow:var(--cp-sh-sm,0 6px 16px rgba(60,48,20,.05)) !important;
margin:0 0 18px !important;
}
#cprof .lnch3-ann-card-shine,#cprof .lnch3-ann-card-glow{display:none !important;}
#cprof .lnch3-ann-card-title{color:var(--cp-ink,#23201B) !important;}
#cprof .lnch3-ann-card-body{color:var(--cp-ink2,#5F584C) !important;}
#cprof .lnch3-ann-card-eyebrow{color:var(--cp-amber-d,#E3A92C) !important;}
#cprof .lnch3-ann-card-meta{color:var(--cp-muted,#9A9285) !important;}
#cprof .lnch3-ann-card-btn{
background:linear-gradient(135deg,var(--cp-amber,#F1C04C),var(--cp-amber-d,#E3A92C)) !important;
border:none !important;color:#3a2c00 !important;
}
/* ── شريط الإجراءات السريعة (للمدير) ── */
#cprof .lnch-quick-bar{
background:var(--cp-card,#fff) !important;
border:1px solid var(--cp-line,#EAE2D2) !important;
border-radius:var(--cp-r,26px) !important;
box-shadow:var(--cp-sh-sm,0 6px 16px rgba(60,48,20,.05)) !important;
padding:16px 18px !important;margin:0 0 18px !important;
}
#cprof .lnch-quick-title{color:var(--cp-ink,#23201B) !important;}
#cprof .lnch-quick-btn{
background:var(--cp-soft,#FBF7EF) !important;
border:1px solid var(--cp-line,#EAE2D2) !important;
color:var(--cp-ink,#23201B) !important;border-radius:13px !important;
}
#cprof .lnch-quick-btn:hover{
border-color:var(--cp-amber-d,#E3A92C) !important;
box-shadow:0 6px 14px rgba(60,48,20,.10) !important;
}
#cprof .lnch-quick-btn span{color:var(--cp-ink,#23201B) !important;}
/* ── تجاوب الجوال ── */
@media(max-width:900px){
#cprof .lnch3-actions{grid-template-columns:repeat(2,1fr);}
#cprof .lnch3-action-tech{grid-column:1/-1;}
}
@media(max-width:560px){
#cprof .lnch3-actions{grid-template-columns:1fr;gap:12px;}
#cprof .lnch3-action-tech{grid-column:auto;}
#cprof .lnch3-id-chip{width:100%;justify-content:flex-start;}
#cprof .lnch3-id-chip-name{font-size:14.5px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}
/* ════════ 🛠️ إصلاحات اللانشر — الباقة في البطاقة · الخط الأبيض · الفوتر ════════ */
/* ── ① إصلاح الخط الأبيض عند تبديل الوضع الليلي/النهاري ──
قواعد الثيم الفاتح العامة كانت تفرض تدرجاً أبيض + padding:2px على #s-launcher
فيظهر إطار أبيض رفيع أعلى (الهيد) وأسفل (الفوتر) اللوحة الكريمية.
هذه القواعد بنفس القوة لكنها متأخرة في الملف فتفوز في الوضعين. */
html[data-theme='light'] #s-launcher,
html[data-theme='light'] #s-launcher.on,
html[data-theme='dark'] #s-launcher,
html[data-theme='dark'] #s-launcher.on{
background:#F2ECE0 !important;
background-image:radial-gradient(900px 420px at 88% -8%,#FBEFC9 0,transparent 60%),radial-gradient(700px 380px at 6% 4%,#F6EEDD 0,transparent 55%) !important;
padding:0 !important;
border:0 !important;
box-shadow:none !important;
}
/* منع وميض الانتقال على أصداف الصفحة أثناء تبديل الثيم */
#s-launcher, #s-launcher.on, #cprof, #cprof .cp-wrap{
transition:none !important;
}
/* ══════════ 🌞 توحيد التبويبات الفاخرة على نسق اللانشر (الوضع النهاري) ══════════
المكوّنات صُمّمت داكنة بخلفيات سوداء/زجاج أبيض صريحة — نحوّلها لكريمي/ذهبي نهاراً.
محصور في #s-dash لتجنّب لمس اللانشر والاستقبال. */
/* الخلفيات السوداء الصريحة (rgba(0,0,0,..)) → كريمي أنعم */
html[data-theme='light'] #s-dash .mcc-row,
html[data-theme='light'] #s-dash .mi-obl-row,
html[data-theme='light'] #s-dash .mfb-row,
html[data-theme='light'] #s-dash .fs-source-row,
html[data-theme='light'] #s-dash .mf-flow-cell,
html[data-theme='light'] #s-dash .mf-out-row,
html[data-theme='light'] #s-dash .exh-row,
html[data-theme='light'] #s-dash .dyi-svc-row,
html[data-theme='light'] #s-dash .dyi-out-row,
html[data-theme='light'] #s-dash .dyi-net-row,
html[data-theme='light'] #s-dash .rf-flow-row,
html[data-theme='light'] #s-dash .vsb-row,
html[data-theme='light'] #s-dash .vdt-row,
html[data-theme='light'] #s-dash .mle-item,
html[data-theme='light'] #s-dash .fs-tc-cell,
html[data-theme='light'] #s-dash .ftax-status,
html[data-theme='light'] #s-dash .tax3-mode-btn,
html[data-theme='light'] #s-dash .pfb-cell,
html[data-theme='light'] #s-dash .custdet-info-cell,
html[data-theme='light'] #s-dash .custdet-car-row,
html[data-theme='light'] #s-dash .mi-svc-row,
html[data-theme='light'] #s-dash .mi-side-vat,
html[data-theme='light'] #s-dash .mi-obl-row,
html[data-theme='light'] #s-dash .mi-linked-row,
html[data-theme='light'] #s-dash .mi-out-row,
html[data-theme='light'] #s-dash .mi-net-row,
html[data-theme='light'] #s-dash .mrf-flow,
html[data-theme='light'] #s-dash .mrf-item{
background:var(--d3) !important;
border-color:var(--bdr) !important;
}
/* الزجاج الأبيض الباهت (rgba(255,255,255,.02-.06)) → كريمي ناعم مرئي */
html[data-theme='light'] #s-dash .exh-input,
html[data-theme='light'] #s-dash .exh-search,
html[data-theme='light'] #s-dash .exh-filter-pill,
html[data-theme='light'] #s-dash .exh-cat-chip,
html[data-theme='light'] #s-dash .custdet-stat-tile,
html[data-theme='light'] #s-dash .custdet-section,
html[data-theme='light'] #s-dash .fs-kpi,
html[data-theme='light'] #s-dash .mi-stat,
html[data-theme='light'] #s-dash .dyi-stat{
background:var(--d2) !important;
border-color:var(--bdr) !important;
}
/* النصوص البيضاء الصريحة داخل البطاقات الكريمية → حبر دافئ */
html[data-theme='light'] #s-dash .mcc-row-val,
html[data-theme='light'] #s-dash .mf-cell-val,
html[data-theme='light'] #s-dash .fs-kpi-value,
html[data-theme='light'] #s-dash .mi-stat-val,
html[data-theme='light'] #s-dash .dyi-stat-val,
html[data-theme='light'] #s-dash .custdet-st-val{
color:var(--t1) !important;
}
/* الحقول الداكنة في النماذج → كريمية */
html[data-theme='light'] #s-dash .mle-field input,
html[data-theme='light'] #s-dash .mle-field select,
html[data-theme='light'] #s-dash .ftax-rate-input,
html[data-theme='light'] #s-dash .ftax-bank-input{
background:var(--d3) !important;
border-color:var(--bdr) !important;
color:var(--t1) !important;
}
/* شريط البحث/الفلاتر داخل المصروفات */
html[data-theme='light'] #s-dash .exh-input::placeholder,
html[data-theme='light'] #s-dash .exh-search::placeholder{color:var(--t4) !important;}
/* ── البطاقات الكبيرة (hero) — تدرّجات بنفسجية/زرقاء → كريمي/ذهبي دافئ نهاراً ── */
html[data-theme='light'] #s-dash .mi-hero{
background:linear-gradient(135deg,rgba(241,192,76,.16) 0%,rgba(227,169,44,.10) 50%,rgba(241,192,76,.14) 100%) !important;
border-color:rgba(201,168,76,.4) !important;
}
html[data-theme='light'] #s-dash .dyi-hero{
background:linear-gradient(135deg,rgba(227,169,44,.14) 0%,rgba(241,192,76,.10) 50%,rgba(227,169,44,.12) 100%) !important;
border-color:rgba(201,168,76,.4) !important;
}
html[data-theme='light'] #s-dash .fm-nav-card{
background:linear-gradient(155deg,rgba(241,192,76,.14) 0%,rgba(227,169,44,.08) 50%,rgba(241,192,76,.12) 100%) !important;
border-color:rgba(201,168,76,.35) !important;
}
html[data-theme='light'] #s-dash .fm-nav-card.is-future,
html[data-theme='light'] #s-dash .fm-nav-card.is-past,
html[data-theme='light'] #s-dash .fm-nav-card.is-archived{
background:linear-gradient(155deg,rgba(241,192,76,.12),rgba(227,169,44,.06)) !important;
border-color:rgba(201,168,76,.3) !important;
}
/* توهّج البطاقات الكبيرة البنفسجي → ذهبي */
html[data-theme='light'] #s-dash .mi-hero-orb,
html[data-theme='light'] #s-dash .dyi-hero-bg-orb,
html[data-theme='light'] #s-dash .fm-nav-orb,
html[data-theme='light'] #s-dash .mfh-orb,
html[data-theme='light'] #s-dash .fs-hero-orb,
html[data-theme='light'] #s-dash .fch-bg-orb{
background:radial-gradient(circle,rgba(241,192,76,.25),transparent 65%) !important;
}
/* الرسم البياني — خلفية سوداء → كريمي */
html[data-theme='light'] #s-dash .mi-chart-wrap,
html[data-theme='light'] #s-dash .dyi-hero-spark,
html[data-theme='light'] #s-dash .obl-progress-bar,
html[data-theme='light'] #s-dash .mi-svc-bar,
html[data-theme='light'] #s-dash .fs-pay-track,
html[data-theme='light'] #s-dash .rf-progress-bar{
background:var(--d4) !important;
}
/* عنوان "بانتظار بياناتك" — تدرّج سماوي/بنفسجي → ذهبي دافئ */
html[data-theme='light'] #s-rec .rec-ph-title{
background:linear-gradient(90deg,#E3A92C,#bd7236) !important;
-webkit-background-clip:text !important;background-clip:text !important;
-webkit-text-fill-color:transparent !important;
}
html[data-theme='light'] #s-rec .rec-ph-sub{color:var(--t2) !important;}
html[data-theme='light'] #s-rec .rec-ph-dots span{background:#E3A92C !important;}
/* ══════════ 🌞 طبقة شاملة لكامل النظام — توحيد على نسق اللانشر الكريمي ══════════
تعالج المكوّنات ذات الأنماط الصريحة الداكنة التي لا تملك تجاوزاً نهارياً. */
/* النوافذ المنبثقة والبطاقات العامة بخلفية سوداء صريحة → كريمي */
html[data-theme='light'] .modal-overlay .modal,
html[data-theme='light'] .modal-card,
html[data-theme='light'] .popup-card,
html[data-theme='light'] .sheet-card{
background:var(--d2) !important;
}
/* الحقول العامة في كل النظام → كريمية */
html[data-theme='light'] #s-dash input:not([type=checkbox]):not([type=radio]),
html[data-theme='light'] #s-dash select,
html[data-theme='light'] #s-dash textarea{
background:var(--d3) !important;
border-color:var(--bdr) !important;
color:var(--t1) !important;
}
/* ── معالج إصدار التذكرة (wiz/oan/rhn/rtk) — بنفسجي/سماوي → ذهبي نهاراً ── */
html[data-theme='light'] #s-rec .wiz-step.on .wiz-dot,
html[data-theme='light'] #s-rec .rtk-save:not(:hover),
html[data-theme='light'] #s-rec .oan-item.oan-on .oan-ico{
background:linear-gradient(135deg,#E3A92C,#F1C04C) !important;
color:#3a2c00 !important;
}
html[data-theme='light'] #s-rec .wiz-step.on .wiz-step-lbl,
html[data-theme='light'] #s-rec .wiz-ticket-year,
html[data-theme='light'] #s-rec .wiz-step.wiz-next-hint .wiz-step-lbl{
background:linear-gradient(90deg,#E3A92C,#bd7236) !important;
-webkit-background-clip:text !important;background-clip:text !important;
-webkit-text-fill-color:transparent !important;
color:#bd7236 !important;
}
html[data-theme='light'] #s-rec .wiz-ticket-brand span,
html[data-theme='light'] #s-rec .wiz-ticket-rows label,
html[data-theme='light'] #s-rec .wiz-ticket-price label,
html[data-theme='light'] #s-rec .oan-lbl{color:#9A9285 !important;}
html[data-theme='light'] #s-rec .rhn-btn:hover,
html[data-theme='light'] #s-rec .rhn-prog-bar>b{
background:linear-gradient(90deg,#E3A92C,#F1C04C) !important;
border-color:rgba(201,168,76,.5) !important;
color:#3a2c00 !important;
}
/* بطاقة حساب التكلفة المستقبلية */
html[data-theme='light'] #s-rec .rec-calc-future{
background:linear-gradient(160deg,rgba(241,192,76,.14),rgba(227,169,44,.06)) !important;
border-color:rgba(201,168,76,.3) !important;
}
/* ── ② فوتر حقوق الملكية داخل اللوحة الكريمية ── */
#cprof .site-footer-v2{margin-top:24px;}
#cprof .site-footer-v2 .sf-divider{
background:linear-gradient(90deg,transparent 0%,rgba(227,169,44,.08) 15%,rgba(227,169,44,.45) 50%,rgba(227,169,44,.08) 85%,transparent 100%) !important;
}
#cprof .site-footer-v2 .sf-divider::before{
background:linear-gradient(90deg,var(--cp-amber,#F1C04C),var(--cp-amber-d,#E3A92C)) !important;
box-shadow:0 0 10px rgba(227,169,44,.4) !important;
}
#cprof .site-footer-v2 .sf-content{
background:var(--cp-soft,#FBF7EF) !important;
border:1px solid var(--cp-line,#EAE2D2) !important;
box-shadow:var(--cp-sh-sm,0 6px 16px rgba(60,48,20,.05)) !important;
backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
#cprof .site-footer-v2 .sf-brand{color:var(--cp-ink2,#5F584C) !important;}
#cprof .site-footer-v2 .sf-cr{color:var(--cp-muted,#9A9285) !important;}
#cprof .site-footer-v2 .sf-owner{color:var(--cp-ink,#23201B) !important;text-shadow:none !important;}
#cprof .site-footer-v2 .sf-crown{
background:linear-gradient(135deg,var(--cp-amber,#F1C04C),var(--cp-amber-d,#E3A92C)) !important;
color:#3a2c00 !important;
box-shadow:0 3px 10px rgba(227,169,44,.3) !important;
}
#cprof .site-footer-v2 .sf-btn{color:var(--cp-ink,#23201B);}
#cprof .site-footer-v2 .sf-call{
background:rgba(59,130,246,.08) !important;
border:1px solid rgba(59,130,246,.25) !important;
color:#1d4ed8 !important;
}
#cprof .site-footer-v2 .sf-wa{
background:rgba(37,211,102,.10) !important;
border:1px solid rgba(37,211,102,.30) !important;
color:#16803c !important;
}
/* ── ③ صف الباقة داخل بطاقة معلومات المركز ── */
#cprof #sub-badge-row:hover #sub-badge-name{color:var(--cp-amber-d,#E3A92C);}
#cprof #sub-badge-icon{font-size:15px;}
/* ── ④ شارة الدور داخل بطاقة المستخدم ── */
#cprof .cp-c-profile .cp-pmeta{align-items:center;}
#cprof .cp-c-profile #lnch-center-sub .lnch3-hero-meta-item{color:#d8cfbe !important;}
/* ── ⑤ صورة الموظف في بطاقة المستخدم — مربعة بزوايا 18px كالنموذج تماماً ──
updateLauncherStats يحقن الصورة بـ border-radius:50% مضمّن → نتجاوزه */
#cprof #lnch-emp-avatar{border-radius:18px !important;}
#cprof #lnch-emp-avatar img{border-radius:0 !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;}
/* ── ⑥ أرقام المال في الإحصاءات — نفس تنسيق النموذج بحجم يتّسع للمبالغ ── */
#cprof .cp-bignum .cp-v.cp-money{font-size:30px;letter-spacing:-1px;}
@media(max-width:640px){#cprof .cp-bignum .cp-v.cp-money{font-size:24px;}}
/* ── ⑦ بطاقات الإحصاءات — أرقام بخط رفيع كالمرجع (78 · 56 · 203) ── */
#cprof .cp-bignum .cp-v{font-weight:300 !important;letter-spacing:-1.5px;}
#cprof .cp-bignum .cp-v.cp-money{font-size:34px;font-weight:300 !important;letter-spacing:-1px;}
@media(max-width:640px){
#cprof .cp-bignum .cp-v{font-size:34px;}
#cprof .cp-bignum .cp-v.cp-money{font-size:26px;}
}
/* ── ⑧ بطاقة المستخدم — الصورة تملأ البطاقة كاملة (كمرجع Lora Piterson) ── */
#cprof .cp-c-profile .cp-cover{background-position:center top;}
#cprof .cp-c-profile.cp-has-photo .cp-logo{display:none !important;}
#cprof .cp-c-profile.cp-has-photo .cp-cover{filter:none;}
#cprof .cp-c-profile .cp-pbody{padding:16px 18px;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.30) 45%,rgba(0,0,0,.72) 100%);}
#cprof .cp-c-profile .cp-prow{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
#cprof .cp-c-profile .cp-pwho{min-width:0;}
#cprof .cp-c-profile .cp-pname{font-size:21px;font-weight:900;text-shadow:0 1px 8px rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cprof .cp-c-profile .cp-prole{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#E8E2D4;opacity:.9;margin-top:3px;text-shadow:0 1px 6px rgba(0,0,0,.4);}
#cprof .cp-c-profile .cp-prole .lnch3-id-chip-role-ico{font-size:11px;line-height:1;}
#cprof .cp-c-profile .cp-prev{margin-top:0;flex-shrink:0;background:rgba(28,28,31,.78);border:1px solid rgba(255,255,255,.16);border-radius:30px;padding:9px 16px;font-size:14.5px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
#cprof .cp-c-profile .cp-prev b{color:#fff;font-weight:800;}
/* ── ⑨ بطاقة المستخدم تساوي ارتفاع بقية بطاقات الصف تماماً ── */
#cprof .cp-c-profile{min-height:0 !important;align-self:stretch;}
#cprof .cp-c-profile .cp-logo{display:none !important;} /* مربع الحرف حُذف نهائياً */
/* ── ⑩ بطاقات الإحصاءات — تنسيق موحّد ومحاذاة ثابتة ── */
#cprof .cp-bignums{align-items:flex-end !important;gap:34px;flex-wrap:wrap;}
#cprof .cp-bignum{align-items:center !important;min-width:0;}
#cprof .cp-bignum .cp-brow{align-items:center !important;gap:9px;}
#cprof .cp-bignum .cp-ico{width:24px;height:24px;font-size:13px;flex-shrink:0;}
#cprof .cp-bignum .cp-v,
#cprof .cp-bignum .cp-v.cp-money{font-size:42px !important;font-weight:300 !important;letter-spacing:-1.5px !important;line-height:1 !important;}
#cprof .cp-bignum .cp-l{white-space:nowrap;font-size:11.5px;margin-top:5px;}
@media(max-width:1080px){
#cprof .cp-bignum .cp-v,#cprof .cp-bignum .cp-v.cp-money{font-size:34px !important;}
#cprof .cp-bignums{gap:24px;}
}
@media(max-width:640px){
#cprof .cp-bignums{gap:16px;width:100%;justify-content:space-between;}
#cprof .cp-bignum .cp-v,#cprof .cp-bignum .cp-v.cp-money{font-size:25px !important;letter-spacing:-1px !important;}
#cprof .cp-bignum .cp-l{font-size:10px;}
#cprof .cp-bignum .cp-ico{width:19px;height:19px;font-size:11px;}
}
/* ── ⑪ إصلاح ارتفاع بطاقة المستخدم = بطاقة نشاط الأسبوع تماماً ──
height:100% كانت تنهار لارتفاع المحتوى في صفوف الشبكة التلقائية → نعود لتمدد الشبكة الطبيعي */
#cprof .cp-grid{align-items:stretch;}
#cprof .cp-c-profile{height:auto !important;min-height:0 !important;align-self:stretch !important;}
@media(max-width:640px){#cprof .cp-c-profile{min-height:280px !important;}} /* عمود واحد: ارتفاع لائق للصورة */
/* رقم دخل الأسبوع قد يطول — خط رفيع بحجم مناسب */
#cprof .cp-bigh{font-size:30px;}
#cprof .cp-bigh #cp-week-total{font-weight:300;letter-spacing:-1px;}
/* ════════ ⚙️ خط معالجة عمليات الفحص (Pipeline) — تصميم مطوّر ════════ */
#cprof .cp-c-pipe{display:flex;flex-direction:column;min-height:0;grid-column:span 2;}
@media(max-width:1080px){#cprof .cp-c-pipe{grid-column:1 / -1;}}
@media(max-width:640px){#cprof .cp-c-pipe{grid-column:auto;}}
#cprof .cp-pipe-count{background:linear-gradient(135deg,var(--cp-amber,#F1C04C),var(--cp-amber-d,#E3A92C));color:#3a2c00;font-weight:900;font-size:13px;min-width:26px;height:26px;border-radius:100px;display:flex;align-items:center;justify-content:center;padding:0 9px;box-shadow:0 3px 9px rgba(227,169,44,.3);}
#cprof .cp-pipe-legend{display:flex;gap:13px;flex-wrap:wrap;margin:11px 0 13px;padding-bottom:12px;border-bottom:1px dashed var(--cp-line,#EAE2D2);}
#cprof .cp-pl{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;color:var(--cp-muted,#9A9285);}
#cprof .cp-pl i{width:9px;height:9px;border-radius:50%;display:inline-block;}
/* القائمة: ارتفاع ثابت يُظهر فحصين · الباقي بتمرير · شريط مخفي */
#cprof .cp-pipe-list{
display:flex;flex-direction:column;gap:12px;
max-height:248px; /* ≈ تقرير واحد + جزء من التالي (يحفّز التمرير) */
overflow-y:auto;
padding:2px 2px 2px 0;
scrollbar-width:none; /* Firefox */
-ms-overflow-style:none; /* IE/Edge */
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
position:relative;
}
#cprof .cp-pipe-list::-webkit-scrollbar{width:0;height:0;display:none;} /* Chrome/Safari */
/* صف العملية — بطاقة أنيقة بشريط حالة جانبي */
#cprof .cp-pipe-row{
position:relative;
background:linear-gradient(135deg,var(--cp-card,#fff),var(--cp-soft,#FBF7EE));
border:1px solid var(--cp-line,#EAE2D2);
border-radius:18px;padding:15px 16px 16px;
transition:all .25s cubic-bezier(.16,1,.3,1);
overflow:hidden;flex-shrink:0;
}
#cprof .cp-pipe-row::before{content:"";position:absolute;top:0;right:0;width:4px;height:100%;background:var(--_accent,#94a3b8);opacity:.85;}
#cprof .cp-pipe-row:hover{border-color:var(--cp-amber,#F1C04C);box-shadow:0 10px 26px rgba(60,48,20,.10);transform:translateY(-2px);}
#cprof .cp-pipe-row-done{opacity:.9;}
#cprof .cp-pipe-row-done::before{--_accent:#22c55e;}
#cprof .cp-pipe-row-cancel{opacity:.72;}
#cprof .cp-pipe-row-cancel::before{--_accent:#ef4444;}
#cprof .cp-pipe-row-cancel .cp-pipe-name{text-decoration:line-through;}
#cprof .cp-pipe-head{display:flex;align-items:center;gap:11px;margin-bottom:15px;}
#cprof .cp-pipe-av{width:40px;height:40px;border-radius:13px;background:linear-gradient(135deg,var(--cp-amber,#F1C04C),var(--cp-amber-d,#E3A92C));color:#3a2c00;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:17px;flex-shrink:0;box-shadow:0 4px 11px rgba(227,169,44,.28);}
#cprof .cp-pipe-meta{flex:1;min-width:0;}
#cprof .cp-pipe-name{font-size:14.5px;font-weight:900;color:var(--cp-ink,#23201B);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#cprof .cp-pipe-car{font-size:11px;color:var(--cp-muted,#9A9285);font-weight:700;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#cprof .cp-pipe-tag{font-size:10.5px;font-weight:900;padding:6px 13px;border-radius:100px;flex-shrink:0;letter-spacing:.2px;}
/* صف المراحل الخمس — أوضح: خط متصل خلفي + نقاط بارزة */
#cprof .cp-psteps{display:flex;align-items:flex-start;gap:0;position:relative;padding-top:2px;}
#cprof .cp-pstep{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;min-width:0;padding:0 2px;}
#cprof .cp-pstep-dot{
width:34px;height:34px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:14px;color:#fff;position:relative;z-index:2;
transition:all .25s;border:2.5px solid var(--cp-card,#fff);
}
#cprof .cp-pstep-lbl{font-size:9px;font-weight:800;color:var(--cp-muted,#9A9285);margin-top:8px;letter-spacing:.2px;}
#cprof .cp-pstep-val{font-size:9.5px;font-weight:900;margin-top:3px;line-height:1.3;min-height:12px;}
/* خط الاتصال بين المراحل */
#cprof .cp-pstep-conn{position:absolute;top:16px;left:-50%;width:100%;height:3px;border-radius:3px;z-index:1;}
/* المرحلة الجارية: نبض خفيف يلفت النظر */
#cprof .cp-pstep.is-wip .cp-pstep-dot{animation:cpPipePulse 1.8s ease-in-out infinite;}
@keyframes cpPipePulse{0%,100%{box-shadow:0 0 0 0 var(--_pc,rgba(245,158,11,.4));}50%{box-shadow:0 0 0 6px transparent;}}
/* الحالة الفارغة */
#cprof .cp-pipe-empty{display:flex;align-items:center;gap:14px;padding:30px 16px;justify-content:center;text-align:center;flex-direction:column;}
#cprof .cp-pipe-empty-ic{font-size:42px;opacity:.45;}
#cprof .cp-pipe-empty-t{font-size:14.5px;font-weight:900;color:var(--cp-ink,#23201B);}
#cprof .cp-pipe-empty-s{font-size:11.5px;color:var(--cp-muted,#9A9285);font-weight:600;margin-top:5px;max-width:300px;line-height:1.6;}
/* مؤشّر "مرّر لرؤية المزيد" يظهر عند وجود عمليات مخفية */
#cprof .cp-pipe-more{text-align:center;font-size:10.5px;font-weight:800;color:var(--cp-muted,#9A9285);padding:6px;opacity:.8;}
@media(max-width:640px){
#cprof .cp-pipe-list{max-height:230px;}
#cprof .cp-pstep-dot{width:29px;height:29px;font-size:12px;}
#cprof .cp-pstep-conn{top:14px;}
#cprof .cp-pstep-lbl{font-size:8px;}
#cprof .cp-pstep-val{font-size:8.5px;}
}
/* ════════ 💰 بطاقة تغطية التكاليف — ارتفاع مطابق للبطاقة الأصلية ════════ */
#cprof .cp-c-cover .cp-gauge-wrap{flex-direction:column;align-items:center;gap:12px;margin-top:6px;}
#cprof .cp-c-cover .cp-gauge{width:150px;height:150px;flex-shrink:0;position:relative;}
#cprof .cp-c-cover .cp-gauge svg{width:150px;height:150px;}
/* القوس الذكي: انتقال ناعم + سماكة متغيّرة عند الاكتمال */
#cprof .cp-c-cover #cp-cover-arc{transition:stroke-dashoffset 1.2s cubic-bezier(.22,1,.36,1), stroke .5s ease, stroke-width .5s ease;}
/* الوسط: النسبة · «مُغطّى» · المتبقّي — مرتّبة عمودياً بلا زحمة */
#cprof .cp-c-cover .cp-gauge .cp-n{font-size:30px;font-weight:900;letter-spacing:-1px;line-height:1;}
#cprof .cp-cover-undertxt{font-size:11px;font-weight:800;color:var(--cp-muted,#9A9285);letter-spacing:.3px;margin-top:2px;}
#cprof .cp-cover-remain-line{font-size:11.5px;font-weight:900;font-family:'Outfit','Cairo',sans-serif;margin-top:5px;line-height:1;white-space:nowrap;}
#cprof .cp-cover-remain-line .cp-crl-suffix{font-size:8.5px;font-weight:800;color:var(--cp-muted,#9A9285);font-family:'Cairo',sans-serif;}
/* نبض احتفالي عند اكتمال التغطية */
#cprof .cp-c-cover .cp-gauge.cp-cover-complete{animation:cpCoverPop .6s cubic-bezier(.34,1.56,.64,1);}
@keyframes cpCoverPop{0%{transform:scale(1);}45%{transform:scale(1.06);}100%{transform:scale(1);}}
#cprof .cp-cover-info{width:100%;}
/* الصفوف الثلاثة — شريط أفقي مدمج (3 خلايا) */
#cprof .cp-cover-bars{display:flex;gap:6px;}
#cprof .cp-cover-bar{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 5px;border-radius:12px;background:var(--cp-soft,#FBF7EE);border:1px solid var(--cp-line,#EAE2D2);text-align:center;}
#cprof .cp-cb-ic{font-size:14px;}
#cprof .cp-cb-l{font-size:8.5px;font-weight:800;color:var(--cp-muted,#9A9285);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
#cprof .cp-cover-bar b{font-size:12px;font-weight:900;color:var(--cp-ink,#23201B);font-family:'Outfit','Cairo',sans-serif;}
#cprof .cp-cover-bar:nth-child(1) b{color:#16a34a;}
/* ════════ 📊 أعمدة الأسبوع التفاعلية ════════ */
#cprof .cp-cbar{cursor:pointer;transition:transform .15s var(--cp-ease,ease);border-radius:10px;padding:4px 2px;}
#cprof .cp-cbar:hover{transform:translateY(-3px);}
#cprof .cp-cbar:hover .cp-stick{filter:brightness(1.08);}
/* أعلى يوم دخلاً — تمييز ذهبي بنقطة بارزة */
#cprof .cp-cbar.cp-top .cp-stick{background:linear-gradient(180deg,var(--cp-amber,#F1C04C),var(--cp-amber-d,#E3A92C))!important;box-shadow:0 4px 12px rgba(227,169,44,.4);}
#cprof .cp-cbar.cp-top .cp-cdot{background:var(--cp-amber-d,#E3A92C);transform:scale(1.4);}
/* العمود المُحدّد بالضغط */
#cprof .cp-cbar.cp-picked{background:var(--cp-soft,#FBF7EE);}
#cprof .cp-cbar.cp-picked .cp-stick{background:linear-gradient(180deg,#22c55e,#16a34a)!important;box-shadow:0 4px 14px rgba(34,197,94,.45);}
#cprof .cp-cbar.cp-picked .cp-cdot{background:#16a34a;transform:scale(1.5);}
#cprof .cp-cbar.cp-picked .cp-d{color:#16a34a;font-weight:900;}
/* ══════════════════ 🎨 رفع تباين صفحة الاستقبال (نهاري) — نسق اللانشر النظيف ══════════════════
بطاقات بيضاء ناصعة على خلفية كريمية + نصوص أوضح + حقل جوال موحّد. شكل فقط. */
html[data-theme='light'] #s-rec .rec-form-side > .rec-pro-card,
html[data-theme='light'] #s-rec .rec-pro-card,
html[data-theme='light'] #s-rec .rec-cust-found,
html[data-theme='light'] #s-rec .rec-company-box,
html[data-theme='light'] #s-rec .rec-calc-future{
background:#FFFFFF !important;
border:1px solid #EAE2D2 !important;
box-shadow:0 10px 30px -16px rgba(60,48,20,.18), 0 2px 8px rgba(60,48,20,.05) !important;
border-radius:20px !important; overflow:hidden !important;
}
/* رأس بطاقة العميل: كريمي ناعم متمايز عن جسمها الأبيض */
html[data-theme='light'] #s-rec .rec-pro-card-h{
background:#F6F0E3 !important;
border-bottom:1px solid #EAE2D2 !important;
}
html[data-theme='light'] #s-rec .rec-pro-card-body{ background:#FFFFFF !important; }
/* النصوص الثانوية أوضح */
html[data-theme='light'] #s-rec .rec-pro-card-sub{ color:#7A6A4A !important; }
html[data-theme='light'] #s-rec .rec-ph-sub,
html[data-theme='light'] #s-rec .rec-hint,
html[data-theme='light'] #s-rec .rec-phone-hint,
html[data-theme='light'] #s-rec .rec-field-hint{ color:#6E6552 !important; }
html[data-theme='light'] #s-rec input::placeholder,
html[data-theme='light'] #s-rec textarea::placeholder{ color:#A89B80 !important; }
/* حقل الجوال — موحّد (لا يبدو جزئين): خلفية واحدة بيضاء، الكود مدمج بنعومة */
html[data-theme='light'] #s-rec .rec-phone-smart{
background:#FFFFFF !important;
border:1.5px solid #E3D8BF !important;
box-shadow:inset 0 1px 3px rgba(60,48,20,.04) !important;
border-radius:15px !important; overflow:hidden !important;
}
html[data-theme='light'] #s-rec .rec-phone-smart:focus-within{
border-color:var(--cp-amber-d,#E3A92C) !important;
box-shadow:0 0 0 3px rgba(227,169,44,.14) !important;
}
html[data-theme='light'] #s-rec .rec-phone-cc{
background:#FBF7EF !important;
border-inline-end:1px solid #EAE2D2 !important;
color:#A07830 !important;
}
html[data-theme='light'] #s-rec .rec-phone-cc::after{ display:none !important; }
html[data-theme='light'] #s-rec .rec-phone-code{ color:#A07830 !important; font-weight:900 !important; }
html[data-theme='light'] #s-rec .rec-phone-smart input{ color:#23201B !important; background:transparent !important; }
/* تمييز شريط الجوال الأخضر عند الصحّة (يبقى أخضر دلالياً) */
html[data-theme='light'] #s-rec .rec-phone-smart.is-valid{ border-color:rgba(34,197,94,.5) !important; }
html[data-theme='light'] #s-rec .rec-phone-smart.is-valid .rec-phone-cc{ background:rgba(34,197,94,.08) !important; }
/* خلفية صفحة الاستقبال أهدأ قليلاً ليبرز البياض (تباين ألطف) */
html[data-theme='light'] #s-rec .rec-v3-wrap{ background:transparent !important; }
/* ══════════ 🚫 حذف ظل بطاقة المستخدم (rec-id-panel) ولوحة المعاينة (rec-ph-future) في الاستقبال ══════════ */
#s-rec .rec-id-panel,
html[data-theme='light'] .rec-id-panel,
html[data-theme='light'] #s-rec .rec-id-panel,
html[data-theme='dark'] #s-rec .rec-id-panel{ box-shadow:none !important; }
#s-rec #rec-preview-placeholder.rec-ph-future,
html[data-theme='light'] #rec-preview-placeholder.rec-ph-future,
html[data-theme='light'] #s-rec #rec-preview-placeholder.rec-ph-future,
html[data-theme='dark'] #s-rec #rec-preview-placeholder.rec-ph-future{ box-shadow:none !important; }
/* ══════════ ✨ انتقال ناعم بين خطوات معالج الاستقبال ══════════ */
@keyframes wizStepIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
#s-rec .wiz-anim-in{animation:wizStepIn .32s cubic-bezier(.16,1,.3,1);}
@media(prefers-reduced-motion:reduce){#s-rec .wiz-anim-in{animation:none;}}
/* ══════════════════ 🌞 توحيد نوافذ اختيار الماركة/الطراز/السنة مع الوضع النهاري ══════════════════ */
/* الأوراق (sheets) */
html[data-theme='light'] .brand-picker-sheet,
html[data-theme='light'] .model-picker-sheet{
background:linear-gradient(160deg,#FFFFFF 0%,#FBF7EF 100%) !important;
border:1px solid rgba(201,168,76,.22) !important;
box-shadow:0 -20px 60px rgba(60,48,20,.18) !important;
}
html[data-theme='light'] .brand-picker-modal,
html[data-theme='light'] .model-picker-modal{ background:rgba(35,32,27,.32) !important; }
html[data-theme='light'] .brand-picker-drag,
html[data-theme='light'] .model-picker-drag{ background:rgba(160,120,48,.3) !important; }
/* الرؤوس والعناوين */
html[data-theme='light'] .brand-picker-h,
html[data-theme='light'] .model-picker-h{ border-bottom-color:rgba(201,168,76,.16) !important; }
html[data-theme='light'] .brand-picker-title,
html[data-theme='light'] .model-picker-title,
html[data-theme='light'] .model-picker-title-text,
html[data-theme='light'] .myr-title{ color:#23201B !important; }
html[data-theme='light'] .brand-picker-title svg,
html[data-theme='light'] .model-picker-title svg{ color:#A07830 !important; }
html[data-theme='light'] .brand-picker-close,
html[data-theme='light'] .model-picker-close,
html[data-theme='light'] .myr-back{ background:#F2ECE0 !important; color:#5F584C !important; border-color:rgba(201,168,76,.2) !important; }
/* البحث */
html[data-theme='light'] .brand-search-input,
html[data-theme='light'] .model-search-input,
html[data-theme='light'] #model-search-input,
html[data-theme='light'] #brand-search-input{ background:#FFFFFF !important; border:1px solid rgba(201,168,76,.25) !important; color:#23201B !important; }
html[data-theme='light'] .brand-search-ico,
html[data-theme='light'] .model-search-ico{ color:#A07830 !important; }
html[data-theme='light'] .brand-search-count,
html[data-theme='light'] .model-search-count{ background:rgba(201,168,76,.12) !important; color:#A07830 !important; }
/* عناوين الأقسام */
html[data-theme='light'] .model-section-h,
html[data-theme='light'] .brand-sec-title{ color:#A07830 !important; }
html[data-theme='light'] .model-section-h-line{ background:linear-gradient(90deg,rgba(201,168,76,.3),transparent) !important; }
/* تبويبات الفلتر (الأكثر شيوعاً/ياباني/كوري...) */
html[data-theme='light'] .brand-tab{ background:#FBF7EF !important; border:1px solid rgba(201,168,76,.18) !important; color:#5F584C !important; }
html[data-theme='light'] .brand-tab.is-active{ background:linear-gradient(135deg,#F1C04C,#E3A92C) !important; color:#3a2c00 !important; border-color:transparent !important; }
html[data-theme='light'] .brand-tab-label{ color:inherit !important; }
/* بطاقات الماركات والطرازات */
html[data-theme='light'] .brand-item,
html[data-theme='light'] .model-item{ background:#FFFFFF !important; border:1px solid rgba(201,168,76,.16) !important; }
html[data-theme='light'] .brand-item:hover,
html[data-theme='light'] .model-item:hover{ border-color:rgba(227,169,44,.5) !important; background:#FBF7EF !important; }
html[data-theme='light'] .brand-item-name,
html[data-theme='light'] .model-item-name{ color:#23201B !important; }
html[data-theme='light'] .brand-item:hover .brand-item-name,
html[data-theme='light'] .model-item:hover .model-item-name{ color:#23201B !important; }
html[data-theme='light'] .brand-item-en{ color:#9A9285 !important; }
html[data-theme='light'] .brand-item.is-selected,
html[data-theme='light'] .model-item.is-selected{ border-color:#E3A92C !important; background:rgba(241,192,76,.10) !important; }
html[data-theme='light'] .brand-item.is-selected .brand-item-name,
html[data-theme='light'] .model-item.is-selected .model-item-name{ color:#A07830 !important; }
/* شارات الفئة (سيدان/SUV/بيك أب) */
html[data-theme='light'] .brand-item-badge,
html[data-theme='light'] .model-item-badge,
html[data-theme='light'] .model-item-type{ background:rgba(201,168,76,.12) !important; color:#A07830 !important; border-color:rgba(201,168,76,.28) !important; }
/* خلايا السنة */
html[data-theme='light'] .myr-cell{ background:#FFFFFF !important; border:1px solid rgba(201,168,76,.18) !important; color:#23201B !important; }
html[data-theme='light'] .myr-cell:hover{ border-color:rgba(227,169,44,.5) !important; background:#FBF7EF !important; }
html[data-theme='light'] .myr-cell.is-selected{ background:linear-gradient(135deg,#F1C04C,#E3A92C) !important; color:#3a2c00 !important; border-color:transparent !important; }
/* زر الإدخال اليدوي */
html[data-theme='light'] .brand-picker-custom,
html[data-theme='light'] .model-picker-custom{ background:#FBF7EF !important; border:1px dashed rgba(201,168,76,.4) !important; color:#A07830 !important; }
/* ══════════════════ 🎯 شريط خطوات الاستقبال (نهاري) — أبيض ناصع + حبر داكن عالي التباين ══════════════════ */
/* خلفية الشريط: أبيض ناصع */
html[data-theme='light'] #s-rec .wiz-steps{
background:#FFFFFF !important;
border:1px solid #EAE2D2 !important;
box-shadow:0 12px 36px -18px rgba(60,48,20,.30), 0 2px 8px rgba(60,48,20,.06) !important;
}
/* الأيقونات غير النشطة: دائرة فاتحة + أيقونة حبر داكن */
html[data-theme='light'] #s-rec .wiz-dot{
background:#F4EFE4 !important;
border:1.5px solid #E3D8BF !important;
color:#23201B !important;
}
html[data-theme='light'] #s-rec .wiz-dot svg{ color:#23201B !important; }
html[data-theme='light'] #s-rec .wiz-step-lbl{ color:#5F584C !important; }
/* الخطوة النشطة: حبر داكن ممتلئ + أيقونة بيضاء */
html[data-theme='light'] #s-rec .wiz-step.on .wiz-dot{
background:linear-gradient(135deg,#2C2820,#23201B) !important;
border-color:transparent !important;
color:#FFFFFF !important;
box-shadow:0 8px 22px -6px rgba(35,32,27,.5) !important;
}
html[data-theme='light'] #s-rec .wiz-step.on .wiz-dot svg{ color:#FFFFFF !important; }
html[data-theme='light'] #s-rec .wiz-step.on .wiz-step-lbl{ color:#23201B !important; font-weight:900 !important; }
/* الحلقة المتوهّجة حول النشطة → حبر هادئ بدل الذهبي الصارخ */
html[data-theme='light'] #s-rec .wiz-step.on .wiz-dot::after{ border-color:rgba(35,32,27,.35) !important; }
/* الخطوات المكتملة: تبقى خضراء (دلالة تمّ) */
html[data-theme='light'] #s-rec .wiz-step.done .wiz-dot{
background:rgba(34,197,94,.12) !important;
border-color:rgba(34,197,94,.4) !important;
color:#15803D !important;
}
html[data-theme='light'] #s-rec .wiz-step.done .wiz-dot svg{ color:#15803D !important; }
/* ══════════════════ 📱 قائمة هيدر اللانشر — تمرير أفقي راقٍ في الجوال (صفّ واحد) ══════════════════ */
@media(max-width:640px){
#cprof .cp-nav{
flex-wrap:nowrap !important; /* صفّ واحد بدل الالتفاف */
overflow-x:auto !important;
overflow-y:hidden !important;
-webkit-overflow-scrolling:touch;
scroll-behavior:smooth;
scrollbar-width:none; /* إخفاء شريط التمرير (Firefox) */
justify-content:flex-start !important;
gap:4px !important;
/* تلاشي أنيق على الحافتين يُلمّح لوجود المزيد */
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
}
#cprof .cp-nav::-webkit-scrollbar{display:none;} /* إخفاء شريط التمرير (WebKit) */
#cprof .cp-nav a{flex:0 0 auto;} /* منع انكماش التبويبات */
}
/* ══════════════════════════ 🌞✨ تبويب الدخل اليومي — تحسين نهاري مثالي (تباين + نظافة) ══════════════════════════ */
/* ── البطاقة البطلة (صافي اليومية) ── */
html[data-theme='light'] .dyi-hero{
background:linear-gradient(165deg,#FFFFFF 0%,#FBF7EF 100%) !important;
border:1px solid #EAE2D2 !important;
box-shadow:0 16px 44px -24px rgba(60,48,20,.22), 0 2px 10px rgba(60,48,20,.05) !important;
}
html[data-theme='light'] .dyi-hero-label{ color:#A07830 !important; }
html[data-theme='light'] .dyi-hero-sub{ color:#7A6A4A !important; }
html[data-theme='light'] .dyi-hero-unit{ color:#A07830 !important; }
html[data-theme='light'] .dyi-info-chip,
html[data-theme='light'] .dyi-hero-chip{ background:#F4EFE4 !important; border:1px solid #E3D8BF !important; color:#5F584C !important; }
html[data-theme='light'] .dyi-status-live{ background:rgba(34,197,94,.12) !important; color:#15803D !important; border:1px solid rgba(34,197,94,.3) !important; }
html[data-theme='light'] .dyi-status-past{ background:#F4EFE4 !important; color:#7A6A4A !important; }
/* ── المخطّط (توزيع الدخل بالساعة) — إظهاره بوضوح ── */
html[data-theme='light'] .dyi-hero-spark,
html[data-theme='light'] .dyi-spark{ background:rgba(201,168,76,.04) !important; }
html[data-theme='light'] .dyi-spark-bar{ background:linear-gradient(180deg,#F1C04C,#E3A92C) !important; opacity:1 !important; }
html[data-theme='light'] .dyi-spark-label{ color:#7A6A4A !important; }
/* ── شريط الأيام ── */
html[data-theme='light'] .dyi-day-pill{ background:#FFFFFF !important; border:1px solid #EAE2D2 !important; color:#5F584C !important; }
html[data-theme='light'] .dyi-day-pill .dyi-dp-name{ color:#9A9285 !important; }
html[data-theme='light'] .dyi-day-pill .dyi-dp-num{ color:#23201B !important; }
html[data-theme='light'] .dyi-day-pill.is-active,
html[data-theme='light'] .dyi-day-pill.is-today{ background:linear-gradient(135deg,#F1C04C,#E3A92C) !important; border-color:transparent !important; }
html[data-theme='light'] .dyi-day-pill.is-active .dyi-dp-name,
html[data-theme='light'] .dyi-day-pill.is-active .dyi-dp-num,
html[data-theme='light'] .dyi-day-pill.is-today .dyi-dp-name,
html[data-theme='light'] .dyi-day-pill.is-today .dyi-dp-num{ color:#3a2c00 !important; }
html[data-theme='light'] .dyi-day-today-btn{ background:#F2ECE0 !important; color:#A07830 !important; border:1px solid #E3D8BF !important; }
/* ── بطاقات الحالات (مسترد/غير مدفوع/مدفوع/ضريبة) ── */
html[data-theme='light'] .dyi-stat{
background:#FFFFFF !important;
border:1px solid #EAE2D2 !important;
box-shadow:0 8px 22px -14px rgba(60,48,20,.18) !important;
}
html[data-theme='light'] .dyi-stat-lbl{ color:#7A6A4A !important; }
html[data-theme='light'] .dyi-stat-val{ color:#23201B !important; }
/* ── الأقسام (الدخل البنكي/النقدي/حسب الخدمة) ── */
html[data-theme='light'] .dyi-section{
background:#FFFFFF !important;
border:1px solid #EAE2D2 !important;
box-shadow:0 8px 22px -14px rgba(60,48,20,.16) !important;
}
html[data-theme='light'] .dyi-section-title{ color:#23201B !important; }
html[data-theme='light'] .dyi-section-total{ color:#A07830 !important; }
/* ── طرق الدفع ── */
html[data-theme='light'] .dyi-mp{ background:#FBF7EF !important; border:1px solid #EAE2D2 !important; }
html[data-theme='light'] .dyi-mp-name{ color:#23201B !important; }
html[data-theme='light'] .dyi-mp-val{ color:#23201B !important; }
html[data-theme='light'] .dyi-mp-orig{ color:#9A9285 !important; }
/* ── صفوف الخدمات ── */
html[data-theme='light'] .dyi-svc-row{ background:#FBF7EF !important; border:1px solid #EAE2D2 !important; }
html[data-theme='light'] .dyi-svc-name{ color:#23201B !important; }
html[data-theme='light'] .dyi-svc-count{ color:#9A9285 !important; }
/* ── بطاقة الصافي ── */
html[data-theme='light'] .dyi-net-card{ background:#FFFFFF !important; border:1px solid #EAE2D2 !important; box-shadow:0 8px 22px -14px rgba(60,48,20,.16) !important; }
html[data-theme='light'] .dyi-net-pos{ color:#15803D !important; }
html[data-theme='light'] .dyi-net-neg{ color:#CC313D !important; }
/* ── شريط التنقّل (السابق/التالي/التاريخ) ── */
html[data-theme='light'] .dyi-nav-btn{ background:#FFFFFF !important; border:1px solid #EAE2D2 !important; color:#5F584C !important; }
html[data-theme='light'] .dyi-nav-date{ color:#23201B !important; }
html[data-theme='light'] .dyi-nav-sub{ color:#9A9285 !important; }
html[data-theme='light'] .dyi-empty{ color:#9A9285 !important; }
/* شريط إعداد وضع البث المباشر */
.lvx-mode-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 14px;background:rgba(125,211,252,.06);border:1px solid rgba(125,211,252,.18);border-radius:14px;}
.lvx-mode-lbl{font-size:12.5px;font-weight:800;color:var(--t2,#C8BFA8);}
.lvx-mode-sel{background:rgba(0,0,0,.25);color:#e8f4ff;border:1px solid rgba(125,211,252,.3);border-radius:10px;padding:6px 12px;font-family:Tajawal,sans-serif;font-weight:700;font-size:12.5px;cursor:pointer;}
.lvx-mode-hint{font-size:11.5px;color:var(--t3,#7A7260);}
html[data-theme='light'] .lvx-mode-bar{background:rgba(201,168,76,.07);border-color:rgba(201,168,76,.22);}
html[data-theme='light'] .lvx-mode-lbl{color:#5F584C;}
html[data-theme='light'] .lvx-mode-sel{background:#FFFFFF;color:#23201B;border-color:rgba(201,168,76,.3);}
html[data-theme='light'] .lvx-mode-hint{color:#9A9285;}
/* ═══════════ تنسيقات منقولة من styles-main (دمج v397) ═══════════ */
body{background:#000;color:#f5f5f5;font-family:'Cairo',sans-serif;margin:0;padding:0;min-height:100vh;overflow-x:hidden;}
.flk-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at center,#1a0a0a 0%,#000 70%);}
.flk-orb{position:absolute;border-radius:50%;filter:blur(120px);}
.flk-orb-1{width:500px;height:500px;background:radial-gradient(circle,#ef4444,transparent 65%);top:-150px;right:-150px;opacity:.55;animation:flkOrb1 22s ease-in-out infinite;}
.flk-orb-2{width:450px;height:450px;background:radial-gradient(circle,#dc2626,transparent 65%);bottom:-150px;left:-100px;opacity:.5;animation:flkOrb2 26s ease-in-out infinite;}
@keyframes flkOrb1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-40px,30px) scale(1.1);}}
@keyframes flkOrb2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(50px,-40px) scale(1.1);}}
.flk-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1;}
.flk-card{width:100%;max-width:480px;background:linear-gradient(160deg,rgba(30,10,10,.92),rgba(15,5,5,.96));border:2px solid rgba(239,68,68,.5);border-radius:28px;overflow:hidden;backdrop-filter:blur(30px);box-shadow:0 40px 100px rgba(0,0,0,.85),0 0 100px rgba(239,68,68,.3);animation:flkRise .8s cubic-bezier(.16,1,.3,1);}
@keyframes flkRise{from{opacity:0;transform:translateY(40px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}
.flk-hero{padding:40px 28px 26px;text-align:center;position:relative;border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(ellipse at top,rgba(239,68,68,.18),transparent 65%);}
.flk-ico-wrap{position:relative;width:100px;height:100px;margin:0 auto 22px;}
.flk-ico-glow{position:absolute;inset:-28px;background:radial-gradient(circle,rgba(239,68,68,.55),transparent 60%);filter:blur(18px);animation:flkPulse 2.2s ease-in-out infinite;}
@keyframes flkPulse{0%,100%{opacity:.55;transform:scale(1);}50%{opacity:1;transform:scale(1.18);}}
.flk-ico-ring{position:absolute;inset:-10px;border:2.5px solid rgba(239,68,68,.45);border-top-color:rgba(239,68,68,.9);border-radius:50%;animation:flkSpin 3s linear infinite;}
@keyframes flkSpin{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.flk-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ef4444,#b91c1c);border-radius:28px;font-size:48px;box-shadow:0 20px 50px rgba(239,68,68,.55),inset 0 2px 0 rgba(255,255,255,.2);}
.flk-title{font-family:'Outfit',sans-serif;font-size:26px;font-weight:900;background-image:linear-gradient(135deg,#fff,#fca5a5,#fff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:flkShine 5s ease-in-out infinite;margin-bottom:8px;}
@keyframes flkShine{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.flk-center{font-size:14px;color:#fca5a5;font-weight:800;margin-bottom:6px;}
.flk-sub{font-size:12px;color:#9ca3af;font-weight:700;line-height:1.7;}
.flk-body{padding:26px;}
.flk-status{display:flex;align-items:center;gap:12px;padding:18px;background:linear-gradient(155deg,rgba(239,68,68,.12),rgba(239,68,68,.02));border:1.5px solid rgba(239,68,68,.35);border-radius:18px;margin-bottom:16px;}
.flk-status-ico{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ef4444,#b91c1c);border-radius:14px;color:#fff;flex-shrink:0;box-shadow:0 8px 22px rgba(239,68,68,.45);}
.flk-status-t{flex:1;}
.flk-status-lbl{font-size:10px;color:#fca5a5;font-weight:800;letter-spacing:.4px;margin-bottom:3px;text-transform:uppercase;}
.flk-status-val{font-size:13px;color:#fff;font-weight:800;line-height:1.5;}
.flk-reason-card{padding:14px 16px;background:rgba(0,0,0,.45);border:1px solid rgba(239,68,68,.2);border-radius:14px;margin-bottom:16px;}
.flk-reason-lbl{font-size:10px;color:#fca5a5;font-weight:800;letter-spacing:.4px;margin-bottom:5px;}
.flk-reason-txt{font-size:12.5px;color:#e5e7eb;font-weight:700;line-height:1.7;}
.flk-contact{padding:14px 16px;background:linear-gradient(155deg,rgba(255,255,255,.03),rgba(255,255,255,.005));border:1px solid rgba(255,255,255,.07);border-radius:14px;margin-bottom:18px;}
.flk-contact-h{font-size:11px;color:#fca5a5;font-weight:800;margin-bottom:8px;letter-spacing:.4px;}
.flk-contact-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.flk-contact-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;background:linear-gradient(135deg,rgba(34,197,94,.15),rgba(34,197,94,.05));border:1.5px solid rgba(34,197,94,.35);border-radius:11px;color:#86efac;font-size:11.5px;font-weight:800;text-decoration:none;transition:all .2s;}
.flk-contact-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(34,197,94,.25);}
.flk-check{width:100%;padding:13px;background:linear-gradient(135deg,#374151,#1f2937);color:#e5e7eb;border:1px solid rgba(255,255,255,.1);border-radius:13px;font-family:'Cairo',sans-serif;font-size:12.5px;font-weight:800;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .25s;}
.flk-check:hover{background:linear-gradient(135deg,#4b5563,#374151);transform:translateY(-1px);}
.flk-check-dot{width:8px;height:8px;border-radius:50%;background:#fbbf24;animation:flkBlink 1.5s ease-in-out infinite;}
@keyframes flkBlink{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.85);}}
.flk-footer{padding:14px 26px 22px;text-align:center;border-top:1px solid rgba(255,255,255,.05);font-size:10px;color:#6b7280;font-weight:700;}
.flk-footer a{color:#fca5a5;}
/* أشكال القائمة السفلية البديلة (يتحكم بها صاحب النظام) */
.cxbar-wrap[data-shape="full"]{max-width:100%!important;width:100%!important;left:0;transform:none;bottom:0;gap:0;border-radius:0;}
.cxbar-wrap[data-shape="full"] .cxbar-pill{border-radius:0;height:60px;}
.cxbar-wrap[data-shape="full"] .cxbar-query{border-radius:0;height:60px;width:60px;}
.cxbar-wrap[data-shape="floating"] .cxbar-query{display:none;}
.cxbar-wrap[data-shape="floating"] .cxbar-pill{flex:1;}
.cxbar-wrap[data-shape="minimal"] .cxtab span:not(.cxtab-ico):not(.cxbadge){display:none;}
.cxbar-wrap[data-shape="minimal"] .cxbar-pill{height:58px;}
/* شكل docked: شريط ممتد بحواف علوية دائرية + زر مركزي بارز */
.cxbar-wrap[data-shape="docked"]{max-width:100%!important;width:100%!important;left:0;right:0;transform:none;bottom:0;gap:0;border-radius:0;padding:0;align-items:flex-end;overflow:visible;}
.cxbar-wrap[data-shape="docked"] .cxbar-pill{flex:1;border-radius:0;height:64px;overflow:visible;box-shadow:0 -2px 16px rgba(0,0,0,.12);}
.cxbar-wrap[data-shape="docked"] .cxbar-query{position:absolute;left:50%;top:auto;bottom:48px;transform:translateX(-50%);width:62px;height:62px;border-radius:50%;z-index:10;background:linear-gradient(160deg,#FF8A3D,#F26C1E)!important;border:none!important;color:#fff!important;backdrop-filter:none!important;box-shadow:0 6px 16px rgba(242,108,30,.40)!important;}
.cxbar-wrap[data-shape="docked"] .cxbar-query svg{stroke:#fff!important;width:28px!important;height:28px!important;}
.cxbar-wrap.nvc-no-labels .cxtab span:not(.cxtab-ico):not(.cxbadge){display:none;}
.cxbar-wrap.nvc-no-glass .cxbar-pill,.cxbar-wrap.nvc-no-glass .cxbar-query{backdrop-filter:none;-webkit-backdrop-filter:none;background:#0c0e11;}
/* لون التمييز القابل للتغيير */
.cxtab.on{color:var(--nvc-accent,#5ec5e0)!important;}
.cxtab.on .cxtab-ico{filter:drop-shadow(0 3px 8px var(--nvc-accent,rgba(94,197,224,.45)))!important;}
.cxbar-query.on{color:var(--nvc-accent,#5ec5e0)!important;border-color:var(--nvc-accent,#5ec5e0)!important;}
.cxq-spark{color:var(--nvc-accent,#5ec5e0)!important;}
/* إظهار القائمة السفلية على الكمبيوتر (يتحكم به صاحب النظام) */
.cxbar-wrap.nvc-desktop{display:flex!important;}
/* ═══ تحكّم صاحب النظام: القائمة السفلية ═══ */
.cxbar-wrap .cxbar-pill, .cxbar-wrap .cxbar-query{
background:var(--cx-bg, rgba(12,14,17,.72))!important;
border-color:var(--cx-bdr, rgba(94,197,224,.18))!important;
}
.cxbar-wrap.nvc-no-glass .cxbar-pill, .cxbar-wrap.nvc-no-glass .cxbar-query{
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.cxtab.on{color:var(--nvc-accent,#5ec5e0)!important;}
.cxtab.on .cxtab-ico{filter:drop-shadow(0 3px 8px var(--nvc-accent,rgba(94,197,224,.5)))!important;}
.cxbar-query.on{color:var(--nvc-accent,#5ec5e0)!important;border-color:var(--nvc-accent,#5ec5e0)!important;box-shadow:0 0 0 1px var(--nvc-accent,#5ec5e0)!important;}
.cxq-spark{color:var(--nvc-accent,#5ec5e0)!important;}
/* أشكال القائمة */
.cxbar-wrap[data-shape="full"]{max-width:100%!important;width:100%!important;left:0!important;transform:none!important;bottom:0!important;gap:0!important;}
.cxbar-wrap[data-shape="full"] .cxbar-pill{border-radius:0!important;height:62px;}
.cxbar-wrap[data-shape="full"] .cxbar-query{border-radius:0!important;height:62px;width:62px;}
.cxbar-wrap[data-shape="floating"] .cxbar-query{display:none!important;}
.cxbar-wrap[data-shape="minimal"] .cxtab span:not(.cxtab-ico):not(.cxbadge){display:none!important;}
.cxbar-wrap[data-shape="minimal"] .cxbar-pill{height:58px;}
.cxbar-wrap[data-shape="docked"]{max-width:100%!important;width:100%!important;left:0!important;right:0!important;transform:none!important;bottom:0!important;gap:0!important;align-items:flex-end!important;overflow:visible!important;}
.cxbar-wrap[data-shape="docked"] .cxbar-pill{flex:1;border-radius:0!important;height:64px;overflow:visible;}
.cxbar-wrap[data-shape="docked"] .cxbar-query{position:absolute!important;left:50%!important;top:auto!important;bottom:48px!important;transform:translateX(-50%)!important;width:62px;height:62px;border-radius:50%!important;z-index:10;background:linear-gradient(160deg,#FF8A3D,#F26C1E)!important;border:none!important;color:#fff!important;backdrop-filter:none!important;box-shadow:0 6px 16px rgba(242,108,30,.40)!important;}
.cxbar-wrap[data-shape="docked"] .cxbar-query svg{stroke:#fff!important;width:28px!important;height:28px!important;}
.cxbar-wrap.nvc-no-labels .cxtab span:not(.cxtab-ico):not(.cxbadge){display:none!important;}
.cxbar-wrap.nvc-desktop{display:flex!important;}
/* ═══ تحكّم صاحب النظام: الشريط الجانبي ═══ */
#dash-sb .sb-nav-item.on, #dash-sb .sb-nav-item.is-active{color:var(--nvc-sb-accent,#5ec5e0)!important;}
#dash-sb .sb-nav-item.on .ni, #dash-sb .sb-nav-item.is-active .ni{color:var(--nvc-sb-accent,#5ec5e0)!important;}
body.nvc-sb-flat #dash-sb .sb-nav-item{border-radius:0!important;}
body.nvc-sb-rounded #dash-sb .sb-nav-item{border-radius:16px!important;}
body.nvc-sb-compact #dash-sb .sb-nav-item{padding-top:7px!important;padding-bottom:7px!important;font-size:12.5px!important;}
body.nvc-sb-compact #dash-sb .sb-section-label{margin-top:8px!important;margin-bottom:4px!important;}
body.nvc-sb-nodividers #dash-sb .sb-section-label{display:none!important;}
body.nvc-sb-glass #dash-sb{backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
background:rgba(12,14,17,calc(var(--nvc-sb-op,0.85)))!important;}
body{background:#000;color:#f5f5f5;font-family:'Cairo',sans-serif;margin:0;padding:0;min-height:100vh;overflow-x:hidden;}
.sup-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.sup-orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.5;}
.sup-orb-1{width:500px;height:500px;background:radial-gradient(circle,#a855f7,transparent 65%);top:-200px;right:-150px;animation:supOrb1 28s ease-in-out infinite;}
.sup-orb-2{width:400px;height:400px;background:radial-gradient(circle,#ec4899,transparent 65%);bottom:-180px;left:-130px;animation:supOrb2 32s ease-in-out infinite;}
@keyframes supOrb1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-50px,40px) scale(1.1);}}
@keyframes supOrb2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(60px,-40px) scale(1.1);}}
.sup-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:1;}
.sup-card{width:100%;max-width:480px;background:linear-gradient(160deg,rgba(20,15,30,.88),rgba(15,10,25,.94));border:1.5px solid rgba(168,85,247,.4);border-radius:28px;overflow:hidden;backdrop-filter:blur(30px);box-shadow:0 40px 100px rgba(0,0,0,.7),0 0 100px rgba(168,85,247,.2);animation:supRise .8s cubic-bezier(.16,1,.3,1);}
@keyframes supRise{from{opacity:0;transform:translateY(30px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.sup-hero{padding:34px 28px 24px;text-align:center;position:relative;border-bottom:1px solid rgba(255,255,255,.06);background:radial-gradient(ellipse at top,rgba(168,85,247,.15),transparent 65%);}
.sup-ico-wrap{position:relative;width:90px;height:90px;margin:0 auto 18px;}
.sup-ico-glow{position:absolute;inset:-25px;background:radial-gradient(circle,rgba(168,85,247,.5),transparent 60%);filter:blur(15px);animation:supPulse 2.5s ease-in-out infinite;}
@keyframes supPulse{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.15);}}
.sup-ico-ring{position:absolute;inset:-8px;border:2px dashed rgba(192,132,252,.4);border-radius:50%;animation:supRing 8s linear infinite;}
@keyframes supRing{from{transform:rotate(0);}to{transform:rotate(360deg);}}
.sup-ico{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#a855f7,#7c3aed);border-radius:26px;font-size:44px;box-shadow:0 18px 44px rgba(168,85,247,.5),inset 0 2px 0 rgba(255,255,255,.2);}
.sup-title{font-family:'Outfit',sans-serif;font-size:24px;font-weight:900;background-image:linear-gradient(135deg,#fff,#c084fc,#fff);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:supShine 5s ease-in-out infinite;margin-bottom:8px;}
@keyframes supShine{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}
.sup-center{font-size:13px;color:#a78bfa;font-weight:800;margin-bottom:4px;}
.sup-sub{font-size:12px;color:#9ca3af;font-weight:700;line-height:1.7;}
.sup-body{padding:24px 26px;}
.sup-countdown{display:flex;align-items:center;justify-content:center;gap:12px;padding:18px;background:linear-gradient(155deg,rgba(168,85,247,.1),rgba(168,85,247,.02));border:1.5px solid rgba(192,132,252,.3);border-radius:18px;margin-bottom:16px;}
.sup-countdown-ico{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#a855f7,#7c3aed);border-radius:14px;color:#fff;flex-shrink:0;box-shadow:0 8px 20px rgba(168,85,247,.4);}
.sup-countdown-info{flex:1;}
.sup-countdown-lbl{font-size:11px;color:#9ca3af;font-weight:800;margin-bottom:4px;}
.sup-countdown-val{font-family:'Outfit',sans-serif;font-size:22px;font-weight:900;color:#c084fc;letter-spacing:-.4px;line-height:1;margin-bottom:3px;}
.sup-countdown-end{font-size:10.5px;color:#a1a1aa;font-weight:700;}
.sup-reason{padding:14px 16px;background:rgba(245,158,11,.05);border:1px solid rgba(251,191,36,.25);border-right:3px solid #fbbf24;border-radius:12px;margin-bottom:18px;}
.sup-reason-lbl{font-size:10.5px;color:#fbbf24;font-weight:900;margin-bottom:5px;letter-spacing:.3px;}
.sup-reason-txt{font-size:12.5px;color:#d4d4d8;line-height:1.7;font-weight:700;}
.sup-contact{padding:16px;background:linear-gradient(155deg,rgba(0,0,0,.4),rgba(168,85,247,.04));border:1px solid rgba(255,255,255,.06);border-radius:14px;}
.sup-contact-h{font-size:11.5px;color:#9ca3af;font-weight:800;margin-bottom:12px;text-align:center;}
.sup-contact-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.sup-cb{display:flex;align-items:center;gap:9px;padding:11px 12px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.08);border-radius:12px;color:#fff;text-decoration:none;font-weight:800;transition:all .25s;}
.sup-cb:hover{transform:translateY(-2px);}
.sup-cb-call{background:linear-gradient(135deg,rgba(59,130,246,.15),rgba(37,99,235,.06));border-color:rgba(59,130,246,.3);}
.sup-cb-call:hover{box-shadow:0 10px 24px rgba(59,130,246,.3);}
.sup-cb-wa{background:linear-gradient(135deg,rgba(37,211,102,.15),rgba(30,189,91,.06));border-color:rgba(37,211,102,.3);}
.sup-cb-wa:hover{box-shadow:0 10px 24px rgba(37,211,102,.3);}
.sup-cb-ico{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:10px;color:#fff;flex-shrink:0;}
.sup-cb-call .sup-cb-ico{background:linear-gradient(135deg,#3B82F6,#1d4ed8);box-shadow:0 6px 14px rgba(59,130,246,.4);}
.sup-cb-wa .sup-cb-ico{background:linear-gradient(135deg,#25D366,#1ebd5b);box-shadow:0 6px 14px rgba(37,211,102,.4);}
.sup-cb-text{flex:1;min-width:0;}
.sup-cb-lbl{font-size:9.5px;color:#9ca3af;font-weight:800;margin-bottom:2px;}
.sup-cb-val{font-family:'Outfit',sans-serif;font-size:12.5px;font-weight:900;color:#fff;direction:ltr;text-align:right;}
.sup-cb-call .sup-cb-val{color:#93c5fd;}
.sup-cb-wa .sup-cb-val{color:#86efac;}
.sup-retry{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:14px;padding:11px;background:transparent;border:1px dashed rgba(255,255,255,.15);color:#9ca3af;border-radius:11px;font-family:'Cairo',sans-serif;font-size:11.5px;font-weight:800;cursor:pointer;transition:all .25s;}
.sup-retry:hover{color:#c084fc;border-color:rgba(192,132,252,.4);background:rgba(168,85,247,.05);}
@keyframes prFadeUp { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } }
@keyframes prShine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes prFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes prPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,0.5); } 50% { box-shadow: 0 0 0 14px rgba(212,175,55,0); } }
@keyframes prRingRotate { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
@keyframes prSparkle { 0%,100% { opacity:0; transform:scale(0); } 50% { opacity:1; transform:scale(1); } }
@keyframes prParticleUp {
0% { transform:translateY(100vh) translateX(0); opacity:0; }
10% { opacity:1; }
90% { opacity:0.8; }
100% { transform:translateY(-20vh) translateX(40px); opacity:0; }
}
@keyframes prCardGlow {
0%,100% { box-shadow:0 20px 60px rgba(212,175,55,0.30), 0 0 0 2px var(--featured-color, #d4af37); }
50% { box-shadow:0 28px 80px rgba(212,175,55,0.55), 0 0 0 2px var(--featured-color, #d4af37); }
}
@keyframes prRibbon {
0%,100% { transform:translateX(-50%) translateY(0) rotate(0deg); }
50% { transform:translateX(-50%) translateY(-3px) rotate(-1deg); }
}
@keyframes prCornerGlow {
0%,100% { opacity:0.5; }
50% { opacity:1; }
}
.pr-card { transition: all 0.4s cubic-bezier(.16,1,.3,1); cursor:pointer; position:relative; }
.pr-card:hover { transform:translateY(-10px) scale(1.02); }
.pr-card:hover .pr-cta { transform:translateY(-2px); }
.pr-card.pr-featured { transform:translateY(-12px); animation:prCardGlow 3s ease-in-out infinite; }
.pr-card.pr-featured:hover { transform:translateY(-22px) scale(1.03); }
.pr-cta { transition: all 0.25s; position:relative; overflow:hidden; }
.pr-cta::before {
content:''; position:absolute; top:0; left:-100%;
width:100%; height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.35),transparent);
transition: left 0.6s ease;
}
.pr-cta:hover::before { left:100%; }
.pr-perk { transition: all 0.2s; }
.pr-card:hover .pr-perk { transform:translateX(-2px); }
.pr-bg-orb {
position:absolute; border-radius:50%; pointer-events:none;
filter: blur(80px); opacity:0.6;
}
.pr-sparkle {
position:absolute; pointer-events:none;
color:#d4af37; opacity:0;
animation:prSparkle 2s ease-in-out infinite;
}
.pr-particle {
position:fixed; bottom:0;
width:4px; height:4px;
background:radial-gradient(circle,#d4af37,transparent);
border-radius:50%;
pointer-events:none;
z-index:-1;
animation:prParticleUp 15s linear infinite;
}
.pr-corner-glow {
position:absolute; pointer-events:none;
width:120px;height:120px;border-radius:50%;
filter:blur(40px);
animation:prCornerGlow 4s ease-in-out infinite;
}
@keyframes fgFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fgCardIn { from { opacity: 0; transform: translateY(24px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fgIconPulse { 0%,100% { transform: scale(1) rotate(-5deg); } 50% { transform: scale(1.08) rotate(5deg); } }
@keyframes fgGoldShine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
*{box-sizing:border-box;margin:0;padding:0;}
@page{size:A4;margin:12mm 10mm;}
body{font-family:'Cairo','Tajawal','Segoe UI',Arial,sans-serif;color:#1a1a1a;background:#fff;line-height:1.6;}
.page{max-width:1100px;margin:0 auto;padding:18px;}
.brand-bar{
display:flex;align-items:center;gap:14px;
margin-bottom:18px;padding:14px 20px;
background:linear-gradient(135deg,#fdf8eb 0%,#faf3e0 50%,#fdf8eb 100%);
border:1.5px solid #C9A84C;border-radius:14px;
}
.brand-bar-logo{
width:48px;height:48px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,#fef3c7,#C9A84C);
border-radius:11px;overflow:hidden;
box-shadow:0 6px 16px rgba(201,168,76,.35);
}
.brand-bar-logo img{width:80%;height:80%;object-fit:contain;}
.brand-bar-text{flex:1;}
.brand-bar-title{font-size:16px;font-weight:900;color:#5A4520;letter-spacing:-.3px;}
.brand-bar-sub{font-size:11px;color:#7A6420;font-weight:700;margin-top:2px;}
.hdr{
display:flex;justify-content:space-between;align-items:flex-end;
padding:18px 22px;margin-bottom:14px;
background:linear-gradient(135deg,#1a1a1a 0%,#2d2100 100%);
border-radius:14px;color:#C9A84C;
}
.hdr-l{display:flex;align-items:center;gap:14px;}
.hdr-l .lg{
width:56px;height:56px;background:#fff;border-radius:13px;
display:flex;align-items:center;justify-content:center;
overflow:hidden;box-shadow:0 6px 16px rgba(201,168,76,.4);
}
.hdr-l .lg img{width:100%;height:100%;object-fit:contain;}
.hdr-l .lg .ph{font-size:28px;}
.hdr-name{font-size:17px;font-weight:900;color:#fde68a;}
.hdr-sub{font-size:11px;color:#C9A84C;margin-top:3px;}
.hdr-r{text-align:left;}
.hdr-title{font-size:15px;font-weight:900;color:#fde68a;letter-spacing:.3px;}
.hdr-date{font-size:12px;color:#C9A84C;margin-top:4px;font-weight:700;}
.hdr-tag{font-size:10px;color:#9F7E1C;margin-top:2px;}
.hero{
background:linear-gradient(135deg,#9F7E1C,#C9A84C);
border-radius:16px;padding:22px;margin-bottom:14px;
display:flex;justify-content:space-between;align-items:center;color:#fff;
box-shadow:0 12px 28px rgba(201,168,76,.3);
}
.hero-l{font-size:14px;font-weight:800;margin-bottom:5px;opacity:.95;}
.hero-sub{font-size:11px;opacity:.85;}
.hero-v{font-size:36px;font-weight:900;letter-spacing:-1px;text-shadow:0 2px 4px rgba(0,0,0,.2);}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.kpi{padding:14px;background:#fafafa;border:1px solid #e5e5e5;border-radius:12px;text-align:center;}
.kpi-l{font-size:10.5px;color:#666;font-weight:700;margin-bottom:6px;letter-spacing:.3px;}
.kpi-v{font-size:18px;font-weight:900;color:#1a1a1a;letter-spacing:-.3px;}
.kpi-v.green{color:#15803d;}
.kpi-v.red{color:#dc2626;}
.kpi-v.gold{color:#9F7E1C;}
.sec{margin-bottom:14px;page-break-inside:avoid;}
.sec-h{display:flex;align-items:center;gap:10px;padding:10px 14px;background:linear-gradient(135deg,#1a1a1a,#2d2100);color:#C9A84C;border-radius:10px 10px 0 0;}
.sec-h-ico{font-size:18px;}
.sec-h-title{font-size:13px;font-weight:900;letter-spacing:.3px;}
.sec-b{background:#fff;border:1px solid #e5e5e5;border-top:none;border-radius:0 0 12px 12px;padding:14px;}
table{width:100%;border-collapse:collapse;}
th{background:linear-gradient(135deg,#0a0800,#2d2100);color:#C9A84C;padding:9px 12px;text-align:right;font-size:11px;font-weight:800;}
td{padding:8px 12px;border-bottom:1px solid #f0f0f0;font-size:11.5px;font-weight:700;color:#333;}
tr:hover td{background:#fafafa;}
tr.best-day td{background:linear-gradient(90deg,#fef3c7,transparent);}
.fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fc-card{padding:12px;background:#fff;border:1.5px solid #e5e5e5;border-radius:10px;}
.fc-h{font-size:12px;font-weight:900;color:#1a1a1a;margin-bottom:8px;}
.fc-row{display:flex;justify-content:space-between;padding:5px 0;font-size:11px;border-bottom:1px dashed #eee;}
.fc-row:last-child{border-bottom:none;}
.fc-row-l{color:#666;font-weight:700;}
.fc-row-v{font-weight:900;}
.footer{margin-top:24px;padding:14px;text-align:center;border-top:1px solid #ddd;font-size:10px;color:#999;}
.footer .o{font-weight:900;color:#5A4520;}
.print-bar{position:sticky;top:0;background:#1a1a1a;padding:10px;display:flex;gap:8px;justify-content:center;margin:-12mm -10mm 14px;}
.print-bar button{padding:9px 20px;background:linear-gradient(135deg,#C9A84C,#9F7E1C);color:#fff;border:none;border-radius:8px;font-weight:800;cursor:pointer;font-size:12px;font-family:inherit;}
@media print{.print-bar{display:none;}body{padding:0;}.sec{page-break-inside:avoid;}.hero,th{-webkit-print-color-adjust:exact;print-color-adjust:exact;}}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Cairo',sans-serif;}
@page{size:A4;margin:12mm 10mm;}
body{font-family:'Cairo',sans-serif;color:#1f2430;background:#eef1f5;line-height:1.55;}
/* 🆕 قسم تفاصيل المركبة */
.z-vehicle{border:1px solid #e8ebf0;border-radius:14px;overflow:hidden;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.03);}
.z-vehicle-h{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:12px;font-weight:900;padding:11px 16px;letter-spacing:.2px;display:flex;align-items:center;gap:9px;}
.z-veh-ico{font-size:16px;}
.z-vehicle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background:#fafbfc;}
.z-vcell{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #eef0f3;border-radius:11px;padding:11px 13px;}
.z-vcell-ic{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:16px;background:linear-gradient(135deg,#eef4fb,#e0ecf8);}
.z-vcell-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.z-vcell-tx span{color:#5a6472;font-weight:700;font-size:9.5px;}
.z-vcell-tx b{color:#1f2430;font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:560px){.z-vehicle-grid{grid-template-columns:repeat(2,1fr);gap:9px;padding:12px;}}
.inv-page{max-width:820px;margin:0 auto;padding:0;background:#fff;}
.print-bar{position:sticky;top:0;background:#11131a;padding:11px;display:flex;gap:8px;justify-content:center;z-index:10;}
.print-bar button{padding:9px 22px;background:linear-gradient(135deg,#C9A84C,#9F7E1C);color:#fff;border:none;border-radius:9px;font-weight:800;cursor:pointer;font-family:inherit;font-size:13px;}
.z-invoice{padding:26px 30px 30px;}
.z-top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:3px solid #C9A84C;margin-bottom:18px;}
.z-top-r{display:flex;align-items:center;gap:13px;}
.z-logo{width:58px;height:58px;border-radius:13px;background:linear-gradient(135deg,#fdf6e3,#f0e2bd);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #e8d9ad;flex-shrink:0;}
.z-logo img{width:100%;height:100%;object-fit:contain;}
.z-logo span{font-size:28px;}
.z-seller-name{font-size:18px;font-weight:900;color:#1a1a1a;letter-spacing:-.3px;}
.z-seller-sub{font-size:11.5px;color:#8a8a8a;font-weight:700;margin-top:3px;}
.z-top-l{text-align:left;}
.z-doc-title{font-size:20px;font-weight:900;color:#9F7E1C;letter-spacing:-.5px;}
.z-doc-title-en{font-size:10px;font-weight:800;color:#8a8a8a;letter-spacing:2px;margin-bottom:6px;}
.zb{display:inline-block;padding:4px 13px;border-radius:20px;font-size:10.5px;font-weight:900;}
.zb-paid{background:#dcfce7;color:#15803d;border:1px solid #86efac;}
.zb-due{background:#fee2e2;color:#dc2626;border:1px solid #fca5a5;}
.zb-refund{background:#f3e8ff;color:#9333ea;border:1px solid #d8b4fe;}
.z-meta{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg,#fafbfc,#f3f5f8);border:1px solid #e8ebf0;border-radius:13px;padding:14px 18px;margin-bottom:16px;}
.z-meta-info{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:7px 22px;}
.z-mrow{display:flex;justify-content:space-between;font-size:11.5px;border-bottom:1px dashed #e3e6eb;padding-bottom:5px;}
.z-mrow span{color:#5a6472;font-weight:700;}
.z-mrow b{color:#1f2430;font-weight:900;}
.z-qr{width:108px;height:108px;flex-shrink:0;background:#fff;border:1px solid #e3e6eb;border-radius:10px;padding:4px;}
.z-qr-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:1px;}
.z-qr-grid span{background:#fff;border-radius:1px;}
.z-qr-grid span.on{background:#1a1a1a;}
.z-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;align-items:stretch;}
.z-party{border:1px solid #e8ebf0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff;}
.z-party-h{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:11px;font-weight:900;padding:9px 14px;letter-spacing:.3px;}
.z-prow{display:flex;justify-content:space-between;padding:7px 14px;font-size:11.5px;border-bottom:1px dashed #eef0f3;}
.z-prow:last-child{border-bottom:none;}
.z-prow span{color:#5a6472;font-weight:700;}
.z-prow b{color:#1f2430;font-weight:900;text-align:left;}
.z-muted b{color:#9098a5;}
.z-table{width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:16px;border-radius:12px;overflow:hidden;border:1px solid #e8ebf0;}
.z-table thead th{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:9.5px;font-weight:800;padding:9px 5px;text-align:center;line-height:1.3;}
.z-table thead th:nth-child(2){text-align:right;}
.z-table tbody td{padding:10px 5px;font-size:10.5px;font-weight:700;border-bottom:1px solid #f0f2f5;color:#1f2430;vertical-align:middle;text-align:center;word-break:break-word;}
.z-table tbody td:nth-child(2){text-align:right;}
.z-table .z-num{font-family:'Cairo';direction:ltr;}
.z-table tbody tr:last-child td{border-bottom:none;}
.z-table .z-c{text-align:center;}
.z-table .z-num{text-align:center;font-weight:800;direction:ltr;}
.z-desc strong{font-weight:900;color:#1a1a1a;}
.z-sub{font-size:10px;color:#5a6472;font-weight:700;margin-top:3px;}
.z-note{font-size:11px;font-weight:800;padding:10px 14px;border-radius:10px;margin-bottom:14px;}
.z-loyal{background:linear-gradient(135deg,#fef9c3,#fef3c7);color:#a16207;border:1px solid #fde68a;}
.z-summary-wrap{display:flex;justify-content:space-between;gap:18px;margin-bottom:16px;align-items:flex-start;flex-wrap:wrap;}
.z-summary-side{flex:1;min-width:240px;}
.z-pay{font-size:11.5px;margin-bottom:12px;background:#fafbfc;border:1px solid #eef0f3;border-radius:11px;padding:11px 14px;}
.z-pay span{color:#5a6472;font-weight:700;display:block;margin-bottom:4px;font-size:10px;}
.z-pay b{color:#1f2430;font-weight:900;font-size:12.5px;}
.z-legal{font-size:9px;color:#4b5563;font-weight:700;line-height:1.6;max-width:340px;}
.z-summary{width:290px;flex-shrink:0;border:1px solid #e8ebf0;border-radius:12px;overflow:hidden;align-self:flex-start;}
.z-srow{display:flex;justify-content:space-between;padding:10px 16px;font-size:12px;border-bottom:1px solid #f0f2f5;}
.z-srow span{color:#4b5563;font-weight:700;}
.z-srow b{color:#1f2430;font-weight:900;direction:ltr;}
.z-srow.z-total{background:linear-gradient(135deg,#9F7E1C,#C9A84C);border-bottom:none;}
.z-srow.z-total span{color:#fff;font-size:13px;font-weight:900;}
.z-srow.z-total b{color:#fff;font-size:16px;}
.z-refund{border:1.5px solid #d8b4fe;border-radius:12px;overflow:hidden;margin-bottom:16px;}
.z-refund-h{background:linear-gradient(135deg,#7c3aed,#9333ea);color:#fff;font-size:11.5px;font-weight:900;padding:9px 14px;}
.z-rgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding:13px 16px;background:#faf5ff;}
.z-rgrid>div{display:flex;justify-content:space-between;font-size:11.5px;border-bottom:1px dashed #e9d5ff;padding-bottom:5px;}
.z-rgrid>div span{color:#5a6472;font-weight:700;}
.z-rgrid>div b{color:#7c3aed;font-weight:900;}
.z-rfull{grid-column:1/-1;}
.z-foot{text-align:center;padding-top:16px;border-top:2px solid #eef0f3;font-size:11px;color:#5a6472;font-weight:700;}
.z-foot-sys{font-size:10px;color:#9098a5;margin-top:5px;}
.z-foot-sys strong{color:#9F7E1C;}
.z-foot-link{font-size:9.5px;color:#5a6472;font-weight:700;margin-top:6px;word-break:break-all;}
.z-foot-link span{color:#9F7E1C;}
.inv-page:not(:last-child){page-break-after:always;}
@media print{.print-bar{display:none;}body{background:#fff;}.z-invoice{padding:0;}.z-party,.z-table,.z-summary,.z-refund,.z-meta,.z-vehicle{page-break-inside:avoid;}.z-top,.z-party-h,.z-table thead th,.z-srow.z-total,.z-refund-h,.z-vehicle-h{-webkit-print-color-adjust:exact;print-color-adjust:exact;}.z-top{margin-bottom:8px;padding-bottom:8px;}.z-meta{margin-bottom:8px;}.z-parties{margin-bottom:8px;gap:10px;}.z-vehicle{margin-bottom:8px;}.z-vehicle-grid{padding:9px;gap:7px;}.z-table{margin-bottom:8px;}.z-table thead th{padding:6px 4px;}.z-table tbody td{padding:7px 4px;}.z-summary-wrap{margin-bottom:8px;}.z-prow{padding:5px 12px;}.z-vcell{padding:8px 10px;}.z-foot{padding-top:8px;margin-bottom:0;}.z-legal{margin-bottom:0;}.inv-page{margin:0;padding:0;}.inv-page>*:last-child{margin-bottom:0 !important;}html,body{height:auto !important;overflow:visible !important;}@page{size:A4 portrait;margin:7mm;}}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Cairo',sans-serif;}
@page{size:A4;margin:12mm 10mm;}
body{font-family:'Cairo',sans-serif;color:#1f2430;background:#eef1f5;line-height:1.55;}
/* 🆕 قسم تفاصيل المركبة */
.z-vehicle{border:1px solid #e8ebf0;border-radius:14px;overflow:hidden;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.03);}
.z-vehicle-h{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:12px;font-weight:900;padding:11px 16px;letter-spacing:.2px;display:flex;align-items:center;gap:9px;}
.z-veh-ico{font-size:16px;}
.z-vehicle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background:#fafbfc;}
.z-vcell{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #eef0f3;border-radius:11px;padding:11px 13px;}
.z-vcell-ic{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:16px;background:linear-gradient(135deg,#eef4fb,#e0ecf8);}
.z-vcell-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.z-vcell-tx span{color:#5a6472;font-weight:700;font-size:9.5px;}
.z-vcell-tx b{color:#1f2430;font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:560px){.z-vehicle-grid{grid-template-columns:repeat(2,1fr);gap:9px;padding:12px;}}
.inv-page{max-width:820px;margin:0 auto;padding:0;background:#fff;}
.print-bar{position:sticky;top:0;background:#11131a;padding:11px;display:flex;gap:8px;justify-content:center;z-index:10;}
.print-bar button{padding:9px 22px;background:linear-gradient(135deg,#C9A84C,#9F7E1C);color:#fff;border:none;border-radius:9px;font-weight:800;cursor:pointer;font-family:inherit;font-size:13px;}
.z-invoice{padding:26px 30px 30px;}
.z-top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:3px solid #C9A84C;margin-bottom:18px;}
.z-top-r{display:flex;align-items:center;gap:13px;}
.z-logo{width:58px;height:58px;border-radius:13px;background:linear-gradient(135deg,#fdf6e3,#f0e2bd);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #e8d9ad;flex-shrink:0;}
.z-logo img{width:100%;height:100%;object-fit:contain;}
.z-logo span{font-size:28px;}
.z-seller-name{font-size:18px;font-weight:900;color:#1a1a1a;letter-spacing:-.3px;}
.z-seller-sub{font-size:11.5px;color:#8a8a8a;font-weight:700;margin-top:3px;}
.z-top-l{text-align:left;}
.z-doc-title{font-size:20px;font-weight:900;color:#9F7E1C;letter-spacing:-.5px;}
.z-doc-title-en{font-size:10px;font-weight:800;color:#8a8a8a;letter-spacing:2px;margin-bottom:6px;}
.zb{display:inline-block;padding:4px 13px;border-radius:20px;font-size:10.5px;font-weight:900;}
.zb-paid{background:#dcfce7;color:#15803d;border:1px solid #86efac;}
.zb-due{background:#fee2e2;color:#dc2626;border:1px solid #fca5a5;}
.zb-refund{background:#f3e8ff;color:#9333ea;border:1px solid #d8b4fe;}
.z-meta{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg,#fafbfc,#f3f5f8);border:1px solid #e8ebf0;border-radius:13px;padding:14px 18px;margin-bottom:16px;}
.z-meta-info{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:7px 22px;}
.z-mrow{display:flex;justify-content:space-between;font-size:11.5px;border-bottom:1px dashed #e3e6eb;padding-bottom:5px;}
.z-mrow span{color:#5a6472;font-weight:700;}
.z-mrow b{color:#1f2430;font-weight:900;}
.z-qr{width:108px;height:108px;flex-shrink:0;background:#fff;border:1px solid #e3e6eb;border-radius:10px;padding:4px;}
.z-qr-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:1px;}
.z-qr-grid span{background:#fff;border-radius:1px;}
.z-qr-grid span.on{background:#1a1a1a;}
.z-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;align-items:stretch;}
.z-party{border:1px solid #e8ebf0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff;}
.z-party-h{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:11px;font-weight:900;padding:9px 14px;letter-spacing:.3px;}
.z-prow{display:flex;justify-content:space-between;padding:7px 14px;font-size:11.5px;border-bottom:1px dashed #eef0f3;}
.z-prow:last-child{border-bottom:none;}
.z-prow span{color:#5a6472;font-weight:700;}
.z-prow b{color:#1f2430;font-weight:900;text-align:left;}
.z-muted b{color:#9098a5;}
.z-table{width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:16px;border-radius:12px;overflow:hidden;border:1px solid #e8ebf0;}
.z-table thead th{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:9.5px;font-weight:800;padding:9px 5px;text-align:center;line-height:1.3;}
.z-table thead th:nth-child(2){text-align:right;}
.z-table tbody td{padding:10px 5px;font-size:10.5px;font-weight:700;border-bottom:1px solid #f0f2f5;color:#1f2430;vertical-align:middle;text-align:center;word-break:break-word;}
.z-table tbody td:nth-child(2){text-align:right;}
.z-table .z-num{font-family:'Cairo';direction:ltr;}
.z-table tbody tr:last-child td{border-bottom:none;}
.z-table .z-c{text-align:center;}
.z-table .z-num{text-align:center;font-weight:800;direction:ltr;}
.z-desc strong{font-weight:900;color:#1a1a1a;}
.z-sub{font-size:10px;color:#5a6472;font-weight:700;margin-top:3px;}
.z-note{font-size:11px;font-weight:800;padding:10px 14px;border-radius:10px;margin-bottom:14px;}
.z-loyal{background:linear-gradient(135deg,#fef9c3,#fef3c7);color:#a16207;border:1px solid #fde68a;}
.z-summary-wrap{display:flex;justify-content:space-between;gap:18px;margin-bottom:16px;align-items:flex-start;flex-wrap:wrap;}
.z-summary-side{flex:1;min-width:240px;}
.z-pay{font-size:11.5px;margin-bottom:12px;background:#fafbfc;border:1px solid #eef0f3;border-radius:11px;padding:11px 14px;}
.z-pay span{color:#5a6472;font-weight:700;display:block;margin-bottom:4px;font-size:10px;}
.z-pay b{color:#1f2430;font-weight:900;font-size:12.5px;}
.z-legal{font-size:9px;color:#4b5563;font-weight:700;line-height:1.6;max-width:340px;}
.z-summary{width:290px;flex-shrink:0;border:1px solid #e8ebf0;border-radius:12px;overflow:hidden;align-self:flex-start;}
.z-srow{display:flex;justify-content:space-between;padding:10px 16px;font-size:12px;border-bottom:1px solid #f0f2f5;}
.z-srow span{color:#4b5563;font-weight:700;}
.z-srow b{color:#1f2430;font-weight:900;direction:ltr;}
.z-srow.z-total{background:linear-gradient(135deg,#9F7E1C,#C9A84C);border-bottom:none;}
.z-srow.z-total span{color:#fff;font-size:13px;font-weight:900;}
.z-srow.z-total b{color:#fff;font-size:16px;}
.z-refund{border:1.5px solid #d8b4fe;border-radius:12px;overflow:hidden;margin-bottom:16px;}
.z-refund-h{background:linear-gradient(135deg,#7c3aed,#9333ea);color:#fff;font-size:11.5px;font-weight:900;padding:9px 14px;}
.z-rgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding:13px 16px;background:#faf5ff;}
.z-rgrid>div{display:flex;justify-content:space-between;font-size:11.5px;border-bottom:1px dashed #e9d5ff;padding-bottom:5px;}
.z-rgrid>div span{color:#5a6472;font-weight:700;}
.z-rgrid>div b{color:#7c3aed;font-weight:900;}
.z-rfull{grid-column:1/-1;}
.z-foot{text-align:center;padding-top:16px;border-top:2px solid #eef0f3;font-size:11px;color:#5a6472;font-weight:700;}
.z-foot-sys{font-size:10px;color:#9098a5;margin-top:5px;}
.z-foot-sys strong{color:#9F7E1C;}
.z-foot-link{font-size:9.5px;color:#5a6472;font-weight:700;margin-top:6px;word-break:break-all;}
.z-foot-link span{color:#9F7E1C;}
.inv-page:not(:last-child){page-break-after:always;}
@media print{.print-bar{display:none;}body{background:#fff;}.z-invoice{padding:0;}.z-party,.z-table,.z-summary,.z-refund,.z-meta,.z-vehicle{page-break-inside:avoid;}.z-top,.z-party-h,.z-table thead th,.z-srow.z-total,.z-refund-h,.z-vehicle-h{-webkit-print-color-adjust:exact;print-color-adjust:exact;}.z-top{margin-bottom:8px;padding-bottom:8px;}.z-meta{margin-bottom:8px;}.z-parties{margin-bottom:8px;gap:10px;}.z-vehicle{margin-bottom:8px;}.z-vehicle-grid{padding:9px;gap:7px;}.z-table{margin-bottom:8px;}.z-table thead th{padding:6px 4px;}.z-table tbody td{padding:7px 4px;}.z-summary-wrap{margin-bottom:8px;}.z-prow{padding:5px 12px;}.z-vcell{padding:8px 10px;}.z-foot{padding-top:8px;margin-bottom:0;}.z-legal{margin-bottom:0;}.inv-page{margin:0;padding:0;}.inv-page>*:last-child{margin-bottom:0 !important;}html,body{height:auto !important;overflow:visible !important;}@page{size:A4 portrait;margin:7mm;}}
*{box-sizing:border-box;margin:0;padding:0;}
@page{size:A4;margin:12mm 10mm;}
body{font-family:'Cairo','Tajawal','Segoe UI',Arial,sans-serif;color:#1a1a1a;background:#fff;line-height:1.6;}
.page{max-width:1100px;margin:0 auto;padding:14px;}
.print-bar{position:sticky;top:0;background:#1a1a1a;padding:10px;display:flex;gap:8px;justify-content:center;margin:-12mm -10mm 14px;z-index:10;}
.print-bar button{padding:9px 20px;background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;border:none;border-radius:8px;font-weight:800;cursor:pointer;font-family:inherit;}
.brand-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:12px 18px;background:linear-gradient(135deg,#fdf8eb,#faf3e0);border:1.5px solid #C9A84C;border-radius:12px;}
.brand-bar-logo{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fef3c7,#C9A84C);border-radius:10px;overflow:hidden;}
.brand-bar-logo img{width:80%;height:80%;object-fit:contain;}
.brand-bar-title{font-size:15px;font-weight:900;color:#5A4520;}
.brand-bar-sub{font-size:10.5px;color:#7A6420;font-weight:700;}
.center-hdr{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;margin-bottom:14px;background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border-radius:13px;}
.cls-logo{width:50px;height:50px;background:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cls-logo img{width:100%;height:100%;object-fit:contain;}
.cls-name{font-size:15px;font-weight:900;color:#fff;}
.cls-sub{font-size:10.5px;color:#fecaca;margin-top:2px;}
.hdr-title{font-size:14px;font-weight:900;color:#fff;text-align:left;}
.hdr-date{font-size:11px;color:#fecaca;margin-top:3px;}
.hero{background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;padding:18px 22px;border-radius:14px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 28px rgba(220,38,38,.3);}
.hero-l{font-size:14px;font-weight:800;margin-bottom:5px;}
.hero-sub{font-size:11px;opacity:.85;}
.hero-v{font-size:32px;font-weight:900;letter-spacing:-1px;}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.kpi{padding:13px;background:#fafafa;border:1px solid #e5e5e5;border-radius:11px;text-align:center;}
.kpi-l{font-size:10.5px;color:#666;font-weight:700;margin-bottom:5px;}
.kpi-v{font-size:17px;font-weight:900;color:#1a1a1a;}
.sec{margin-bottom:14px;page-break-inside:avoid;}
.sec-h{padding:9px 14px;background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border-radius:10px 10px 0 0;font-size:13px;font-weight:900;}
.sec-b{background:#fff;border:1.5px solid #e5e5e5;border-top:none;border-radius:0 0 12px 12px;padding:0;overflow:hidden;}
table{width:100%;border-collapse:collapse;}
th{background:linear-gradient(135deg,#fafafa,#f5f5f5);color:#555;padding:9px 12px;text-align:right;font-size:11px;font-weight:800;border-bottom:2px solid #e5e5e5;}
td{padding:9px 12px;border-bottom:1px solid #f0f0f0;font-size:11.5px;font-weight:700;color:#333;vertical-align:top;}
tr:nth-child(even) td{background:#fafafa;}
.footer{margin-top:24px;padding:14px;text-align:center;border-top:1.5px solid #ddd;font-size:10px;color:#999;}
.footer .o{font-weight:900;color:#5A4520;}
@media print{.print-bar{display:none;}body{padding:0;}.sec{page-break-inside:avoid;}.hero,th,.center-hdr,.sec-h,.brand-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact;}}
.page{max-width:1100px;margin:0 auto;padding:14px;}
.print-bar{position:sticky;top:0;background:#1a1a1a;padding:10px;display:flex;gap:8px;justify-content:center;margin:-12mm -10mm 14px;z-index:10;}
.print-bar button{padding:9px 20px;background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;border:none;border-radius:8px;font-weight:800;cursor:pointer;font-family:inherit;}
.brand-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:12px 18px;background:linear-gradient(135deg,#fdf8eb,#faf3e0);border:1.5px solid #C9A84C;border-radius:12px;}
.brand-bar-logo{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fef3c7,#C9A84C);border-radius:10px;overflow:hidden;}
.brand-bar-logo img{width:80%;height:80%;object-fit:contain;}
.brand-bar-title{font-size:15px;font-weight:900;color:#5A4520;}
.brand-bar-sub{font-size:10.5px;color:#7A6420;font-weight:700;}
.center-hdr{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;margin-bottom:14px;background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border-radius:13px;}
.cls-logo{width:50px;height:50px;background:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cls-logo img{width:100%;height:100%;object-fit:contain;}
.cls-name{font-size:15px;font-weight:900;color:#fff;}
.cls-sub{font-size:10.5px;color:#fecaca;margin-top:2px;}
.hdr-title{font-size:14px;font-weight:900;color:#fff;text-align:left;}
.hdr-date{font-size:11px;color:#fecaca;margin-top:3px;}
.hero{background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;padding:18px 22px;border-radius:14px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 28px rgba(220,38,38,.3);}
.hero-l{font-size:14px;font-weight:800;margin-bottom:5px;}
.hero-sub{font-size:11px;opacity:.85;}
.hero-v{font-size:32px;font-weight:900;letter-spacing:-1px;}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.kpi{padding:13px;background:#fafafa;border:1px solid #e5e5e5;border-radius:11px;text-align:center;}
.kpi-l{font-size:10.5px;color:#666;font-weight:700;margin-bottom:5px;}
.kpi-v{font-size:17px;font-weight:900;color:#1a1a1a;}
.sec{margin-bottom:14px;page-break-inside:avoid;}
.sec-h{padding:9px 14px;background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border-radius:10px 10px 0 0;font-size:13px;font-weight:900;}
.sec-b{background:#fff;border:1.5px solid #e5e5e5;border-top:none;border-radius:0 0 12px 12px;padding:0;overflow:hidden;}
table{width:100%;border-collapse:collapse;}
th{background:linear-gradient(135deg,#fafafa,#f5f5f5);color:#555;padding:9px 12px;text-align:right;font-size:11px;font-weight:800;border-bottom:2px solid #e5e5e5;}
td{padding:9px 12px;border-bottom:1px solid #f0f0f0;font-size:11.5px;font-weight:700;color:#333;vertical-align:top;}
tr:nth-child(even) td{background:#fafafa;}
.footer{margin-top:24px;padding:14px;text-align:center;border-top:1.5px solid #ddd;font-size:10px;color:#999;}
.footer .o{font-weight:900;color:#5A4520;}
@media print{.print-bar{display:none;}body{padding:0;}.sec{page-break-inside:avoid;}.hero,th,.center-hdr,.sec-h,.brand-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact;}}
.permit-title{text-align:center;padding:24px;margin-bottom:20px;background:linear-gradient(135deg,#1a1a1a,#7f1d1d);color:#fff;border-radius:14px;}
.permit-title-l{font-size:14px;font-weight:700;opacity:.9;margin-bottom:6px;}
.permit-title-h{font-size:26px;font-weight:900;letter-spacing:-.5px;color:#fde68a;}
.permit-title-num{font-size:13px;color:#fcd34d;font-weight:800;margin-top:6px;}
.center-info{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;margin-bottom:16px;background:#f5f5f5;border-radius:11px;}
.center-info-l{font-size:13px;font-weight:900;color:#1a1a1a;}
.center-info-r{font-size:11.5px;color:#666;text-align:left;}
.field-row{display:flex;align-items:center;padding:10px 0;border-bottom:1px dashed #eee;}
.field-row:last-child{border-bottom:none;}
.field-label{flex:0 0 40%;font-size:12.5px;color:#666;font-weight:800;}
.field-value{flex:1;font-size:13px;font-weight:900;color:#1a1a1a;}
.amount-hero{background:linear-gradient(135deg,#9F7E1C,#C9A84C);color:#fff;padding:24px;border-radius:14px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 28px rgba(201,168,76,.35);}
.amount-hero-l{font-size:14px;font-weight:800;opacity:.95;margin-bottom:3px;}
.amount-hero-sub{font-size:11px;opacity:.85;}
.amount-hero-v{font-size:34px;font-weight:900;letter-spacing:-1px;}
.signatures{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:24px;}
.sig-box{padding:18px 14px;border:2px dashed #c4c4c4;border-radius:11px;text-align:center;}
.sig-box-l{font-size:11px;color:#666;font-weight:800;margin-bottom:30px;}
.sig-box-line{border-top:1.5px solid #1a1a1a;padding-top:5px;font-size:11px;color:#888;}
@media print{.print-bar{display:none;}body{padding:0;}.section,.amount-hero,.permit-title,.brand-bar{page-break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact;}}
*{box-sizing:border-box;margin:0;padding:0;}
@page{size:A4;margin:12mm 10mm;}
body{font-family:'Cairo','Tajawal','Segoe UI',Arial,sans-serif;color:#1a1a1a;background:#fff;line-height:1.6;}
.page{max-width:1100px;margin:0 auto;padding:18px;}
/* 🆕 REPORT BRAND BAR — Elegant system logo display at top */
.report-brand-bar{
display:flex;align-items:center;gap:14px;
margin-bottom:18px;
padding:12px 18px;
background:linear-gradient(135deg, #fdf8eb 0%, #faf3e0 50%, #fdf8eb 100%);
border:1.5px solid #C9A84C;
border-radius:14px;
position:relative;
overflow:hidden;
box-shadow:0 4px 14px rgba(201,168,76,.18), inset 0 1px 0 rgba(255,255,255,.5);
}
.report-brand-bar::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg, transparent, #C9A84C, #fbbf24, #C9A84C, transparent);
}
.report-brand-bar::after{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at 15% 50%, rgba(251,191,36,.08), transparent 40%),
radial-gradient(circle at 85% 50%, rgba(201,168,76,.06), transparent 40%);
pointer-events:none;
}
.rbb-logo{
width:60px;height:60px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #fbbf24 0%, #C9A84C 50%, #9F7E1C 100%);
border-radius:14px;
color:#fff;
flex-shrink:0;
box-shadow:
0 6px 16px rgba(201,168,76,.4),
inset 0 1.5px 0 rgba(255,255,255,.3),
inset 0 -1.5px 0 rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.rbb-logo::before{
content:'';
position:absolute;
top:0;left:0;right:0;height:50%;
background:linear-gradient(180deg, rgba(255,255,255,.25), transparent);
pointer-events:none;
}
.rbb-logo img{
width:78%;
height:78%;
object-fit:contain;
display:block;
position:relative;
z-index:1;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.rbb-logo svg{color:#fff;}
.rbb-text{flex:1;}
.rbb-system{
font-family:'Cairo','Tajawal',sans-serif;
font-size:18px;
font-weight:900;
color:#5A4520;
letter-spacing:-.3px;
background:linear-gradient(135deg, #5A4520 0%, #9F7E1C 50%, #5A4520 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:2px;
line-height:1.2;
}
.rbb-tagline{
font-size:10.5px;
color:#9F7E1C;
font-weight:700;
letter-spacing:.2px;
opacity:.85;
}
.rbb-decor{
display:flex;align-items:center;gap:6px;
padding:6px 10px;
background:rgba(201,168,76,.12);
border:1px solid rgba(201,168,76,.3);
border-radius:10px;
position:relative;
}
.rbb-decor::before, .rbb-decor::after{
content:'';
width:5px;height:5px;
border-radius:50%;
background:linear-gradient(135deg,#fbbf24,#C9A84C);
box-shadow:0 1px 3px rgba(201,168,76,.4);
}
.rbb-decor::after{margin:0 2px;}
@media print{
.report-brand-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.rbb-logo{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.rbb-system{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}
/* HEADER */
/* 🆕 هيدر موحّد احترافي */
.rpt-header{margin-bottom:24px;border:1.5px solid #E8DCC0;border-radius:18px;overflow:hidden;box-shadow:0 4px 16px rgba(201,168,76,.1);}
.rpt-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:linear-gradient(135deg,#fdfaf2 0%,#faf4e6 100%);}
.rpt-center{display:flex;align-items:center;gap:15px;}
.rpt-center-logo{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,#fbbf24,#C9A84C,#9F7E1C);color:#fff;flex-shrink:0;box-shadow:0 6px 16px rgba(201,168,76,.35),inset 0 1.5px 0 rgba(255,255,255,.3);overflow:hidden;}
.rpt-center-logo img{width:100%;height:100%;object-fit:cover;border-radius:16px;}
.rpt-center-name{font-size:20px;font-weight:900;color:#1a1a1a;letter-spacing:-.3px;}
.rpt-center-sub{font-size:12.5px;color:#7a6f55;font-weight:600;margin-top:3px;}
.rpt-center-vat{font-size:10.5px;color:#a39577;font-weight:600;margin-top:2px;}
.rpt-meta{text-align:left;flex-shrink:0;}
.rpt-title{font-size:16px;font-weight:900;color:#9F7E1C;}
.rpt-date{font-size:12px;color:#7a6f55;font-weight:700;margin-top:4px;}
.rpt-mode-badge{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:800;}
.rpt-mode-badge.is-op{background:rgba(245,158,11,.14);color:#b45309;border:1px solid rgba(245,158,11,.3);}
.rpt-mode-badge.is-full{background:rgba(16,185,129,.14);color:#047857;border:1px solid rgba(16,185,129,.3);}
.rpt-header-brand{padding:9px 24px;background:linear-gradient(90deg,#1a1505,#2a2008);color:#d4b86a;font-size:11px;font-weight:600;text-align:center;letter-spacing:.2px;}
.rpt-header-brand strong{color:#fbbf24;font-weight:800;}
.hdr{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:3px solid #C9A84C;margin-bottom:24px;}
.hdr-left{display:flex;align-items:center;gap:14px;}
.hdr-logo{width:60px;height:60px;background:linear-gradient(135deg,#C9A84C,#9F7E1C);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;box-shadow:0 4px 12px rgba(201,168,76,.3);}
.hdr-name{font-size:22px;font-weight:900;color:#0a0800;line-height:1.2;}
.hdr-sub{font-size:11px;color:#666;margin-top:3px;}
.hdr-right{text-align:left;}
.hdr-title{font-size:14px;color:#9F7E1C;font-weight:800;letter-spacing:.5px;}
.hdr-date{font-size:12px;color:#444;margin-top:3px;font-weight:600;}
.hdr-date-tag{font-size:10px;color:#888;margin-top:2px;}
/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px;}
.kpi{background:linear-gradient(160deg,#ffffff,#f8f6f0);border:1px solid #ece5d4;border-right:4px solid;border-radius:14px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.kpi.green{border-right-color:#22C55E;}
.kpi.purple{border-right-color:#a855f7;}
.kpi.gold{border-right-color:#C9A84C;}
.kpi.red{border-right-color:#EF4444;}
.kpi.blue{border-right-color:#3B82F6;}
.kpi-l{font-size:10px;color:#777;font-weight:700;margin-bottom:4px;}
.kpi-v{font-family:'IBM Plex Mono','Roboto Mono',monospace;font-size:22px;font-weight:900;color:#0a0800;line-height:1;letter-spacing:-1px;}
.kpi-u{font-size:10px;color:#888;margin-top:3px;}
/* Net profit hero */
.hero{background:linear-gradient(135deg,#9F7E1C,#C9A84C);color:#fff;border-radius:14px;padding:18px 24px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 20px rgba(201,168,76,.25);}
.hero-l{font-size:13px;font-weight:700;opacity:.9;letter-spacing:.5px;}
.hero-v{font-family:'IBM Plex Mono','Roboto Mono',monospace;font-size:32px;font-weight:900;letter-spacing:-1px;}
.hero-sub{font-size:11px;opacity:.85;margin-top:3px;}
/* Section headings */
.sec{margin-bottom:22px;break-inside:avoid;page-break-inside:avoid;}
/* 🆕 تقسيم ذكي: الأقسام الكبيرة تبدأ صفحة جديدة */
.sec-page{break-before:page;page-break-before:always;}
/* الجداول الطويلة: السماح بالتقسيم لكن مع تكرار الرأس */
.sec-long{break-inside:auto;page-break-inside:auto;}
.sec-long thead{display:table-header-group;}
.sec-long tr{break-inside:avoid;page-break-inside:avoid;}
/* منع يُتم الصفوف */
table{break-inside:auto;}
thead{display:table-header-group;}
tfoot{display:table-footer-group;}
tr{break-inside:avoid;page-break-inside:avoid;}
/* عناوين الأقسام لا تنفصل عن محتواها */
.sec-h{break-after:avoid;page-break-after:avoid;}
@media print{
.print-bar{display:none !important;}
.sec{margin-bottom:18px;}
}
.sec-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #e5e5e5;}
.sec-h-ico{width:28px;height:28px;background:#9F7E1C;color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.sec-h-name{font-size:14px;font-weight:800;color:#0a0800;}
/* Tables */
table{width:100%;border-collapse:collapse;font-size:11px;}
th{background:linear-gradient(135deg,#0a0800,#2d2100);color:#C9A84C;padding:9px 8px;text-align:right;font-weight:700;font-size:11px;border:1px solid #1a1200;}
td{padding:8px;text-align:right;border:1px solid #e5e5e5;color:#222;}
tr:nth-child(even) td{background:#fafafa;}
td.amt{font-family:'IBM Plex Mono','Roboto Mono',monospace;font-weight:800;color:#9F7E1C;text-align:left;direction:ltr;}
.bd-paid{background:#dcfce7;color:#15803d;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
.bd-unp{background:#fee2e2;color:#991b1b;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
.bd-ref{background:#f3e8ff;color:#7c3aed;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
.bd-partial{background:#fef3c7;color:#b45309;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
/* Two-column tables */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* Footer */
.foot{margin-top:30px;padding-top:14px;border-top:2px solid #C9A84C;text-align:center;font-size:10px;color:#888;line-height:1.8;}
.foot strong{color:#9F7E1C;}
/* 🆕 Powered-by strip (admin branding badge) */
/* 🆕✨ LUXURY POWERED-BY STRIP — more prominent with logo showcase */
.powered-by-strip{
display:flex;align-items:center;justify-content:center;gap:11px;
padding:11px 18px;
margin-bottom:14px;
background:
radial-gradient(ellipse at center, rgba(201,168,76,.08) 0%, rgba(201,168,76,.02) 70%),
linear-gradient(135deg, rgba(159,126,28,.06) 0%, rgba(159,126,28,.01) 100%);
border:1px solid rgba(159,126,28,.28);
border-radius:12px;
font-size:11px;
color:#5A4520;
font-weight:700;
letter-spacing:.3px;
position:relative;
overflow:hidden;
}
/* Subtle gold shine line at top of strip */
.powered-by-strip::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:1.5px;
background:linear-gradient(90deg, transparent 0%, rgba(201,168,76,.6) 50%, transparent 100%);
}
/* Inner decorative dot */
.powered-by-strip::after{
content:'';
position:absolute;
width:4px;height:4px;
background:linear-gradient(135deg,#fbbf24,#C9A84C);
border-radius:50%;
box-shadow:0 0 8px rgba(201,168,76,.5);
right:14px;top:50%;transform:translateY(-50%);
}
.pbs-logo{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;
background:linear-gradient(135deg,#fef3c7,#fde68a 50%,#C9A84C);
border-radius:8px;
color:#5A4520;
flex-shrink:0;
overflow:hidden;
box-shadow:
0 4px 10px rgba(201,168,76,.35),
inset 0 1px 0 rgba(255,255,255,.6),
inset 0 -1px 0 rgba(0,0,0,.1);
border:1px solid rgba(201,168,76,.45);
position:relative;
}
.pbs-logo img{
width:80%;height:80%;
object-fit:contain;
display:block;
margin:auto;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
.pbs-text{
display:inline-flex;align-items:center;gap:7px;
font-size:11.5px;
font-weight:800;
color:#7A6420;
}
.pbs-sep{
opacity:.5;
font-weight:900;
}
.pbs-owner{
color:#5A4520;
font-weight:900;
letter-spacing:-.1px;
}
/* 🆕 Expense mode badge in header */
.exp-mode-badge{
display:inline-flex;align-items:center;justify-content:center;
margin-top:8px;
padding:5px 11px;
border-radius:9px;
font-size:10.5px;
font-weight:900;
letter-spacing:.3px;
border:1.5px solid;
}
.exp-mode-badge.mode-operational{
background:linear-gradient(135deg,#FEF3C7,#FDE68A);
color:#92400E;
border-color:#F59E0B;
}
.exp-mode-badge.mode-full{
background:linear-gradient(135deg,#DBEAFE,#BFDBFE);
color:#1E40AF;
border-color:#3B82F6;
}
/* 🆕 Expense mode explanation card */
.exp-mode-card{
display:grid;
grid-template-columns:auto 1fr auto;
gap:14px;
align-items:center;
padding:14px 18px;
margin-bottom:14px;
border-radius:14px;
border:1.5px solid;
position:relative;
overflow:hidden;
}
.exp-mode-card.is-op{
background:linear-gradient(155deg, rgba(245,158,11,.08), rgba(245,158,11,.02));
border-color:rgba(245,158,11,.35);
}
.exp-mode-card.is-full{
background:linear-gradient(155deg, rgba(59,130,246,.08), rgba(59,130,246,.02));
border-color:rgba(59,130,246,.35);
}
.exp-mode-card::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:2px;
background:linear-gradient(90deg,transparent,currentColor,transparent);
opacity:.4;
}
.exp-mode-card.is-op{color:#92400E;}
.exp-mode-card.is-full{color:#1E40AF;}
.emc-icon{
font-size:30px;
flex-shrink:0;
line-height:1;
}
.emc-content{flex:1;min-width:0;}
.emc-title{
font-size:13.5px;
font-weight:800;
margin-bottom:5px;
letter-spacing:-.2px;
}
.emc-title strong{
font-weight:900;
padding:1px 6px;
border-radius:5px;
}
.exp-mode-card.is-op .emc-title strong{background:rgba(245,158,11,.18);}
.exp-mode-card.is-full .emc-title strong{background:rgba(59,130,246,.18);}
.emc-desc{
font-size:11px;
color:#555;
font-weight:600;
line-height:1.65;
letter-spacing:.1px;
}
.emc-desc strong{font-weight:900;color:#222;}
.emc-formula{
flex-shrink:0;
background:rgba(255,255,255,.55);
border:1px solid currentColor;
border-radius:10px;
padding:8px 12px;
text-align:center;
min-width:140px;
}
.emc-formula-lbl{
font-size:9px;
font-weight:800;
opacity:.65;
letter-spacing:.6px;
margin-bottom:3px;
}
.emc-formula-val{
font-size:10.5px;
font-weight:900;
letter-spacing:-.1px;
}
@media(max-width:700px){
.exp-mode-card{
grid-template-columns:auto 1fr;
}
.emc-formula{
grid-column:1/-1;
margin-top:6px;
}
}
/* Print button */
.print-bar{position:fixed;top:10px;left:10px;display:flex;gap:8px;z-index:9999;}
.print-bar button{padding:10px 18px;background:#9F7E1C;color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);}
.print-bar button.close{background:#666;}
@media print{
.print-bar{display:none;}
body{padding:0;}
.sec{page-break-inside:avoid;}
.hero{background:linear-gradient(135deg,#9F7E1C,#C9A84C) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
th{background:linear-gradient(135deg,#0a0800,#2d2100) !important;color:#C9A84C !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.exp-mode-badge, .exp-mode-card, .powered-by-strip{
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}
.exp-mode-card{page-break-inside:avoid;}
}
.rpt-cover-page{width:100%;text-align:center;break-after:page;page-break-after:always;margin:0;padding:0;line-height:0;}
.rpt-cover-img{max-width:100%;max-height:92vh;width:auto;height:auto;display:block;margin:0 auto;}
.rpt-cover-frame{width:100%;height:92vh;border:none;display:block;}
@media print{
.rpt-cover-page{break-after:page;page-break-after:always;margin:0;padding:0;}
.rpt-cover-img{max-height:96vh;}
}
${window._pdfFmtCSS ? window._pdfFmtCSS() : ''}
/* 🆕 تعريف brand-bar للتقرير الشهري (كان مفقوداً) */
.brand-bar{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:14px 20px;background:linear-gradient(135deg,#fdf8eb,#faf3e0);border:1.5px solid #C9A84C;border-radius:13px;}
.brand-bar-logo{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fef3c7,#C9A84C);border-radius:11px;overflow:hidden;flex-shrink:0;}
.brand-bar-logo img{width:80%;height:80%;object-fit:contain;}
.brand-bar-logo svg{color:#5A4520;}
.brand-bar-text{flex:1;}
.brand-bar-title{font-size:16px;font-weight:900;color:#5A4520;letter-spacing:-.3px;}
.brand-bar-sub{font-size:11px;color:#7A6420;font-weight:700;margin-top:2px;}
* { margin:0; padding:0; box-sizing:border-box; }
body {
font-family:'Cairo',sans-serif;
background:${t.preview.bg};
color:${t.colors.primary === '#0f172a' || t.colors.primary === '#1e40af' || t.colors.primary === '#8b5cf6' || t.colors.primary === '#dc2626' ? '#fff' : t.colors.primary};
min-height:100vh;
padding:20px;
}
.demo-wrap { max-width:800px; margin:0 auto; }
.demo-header {
background:${t.preview.header};
color:#fff;
padding:30px 28px;
border-radius:18px 18px 0 0;
box-shadow:0 8px 24px rgba(0,0,0,0.20);
position:relative;
overflow:hidden;
}
.demo-header::before {
content:'';
position:absolute;top:-50px;right:-50px;
width:200px;height:200px;
border-radius:50%;
background:rgba(255,255,255,0.10);
filter:blur(40px);
}
.demo-header h1 { font-size:28px; font-weight:900; margin-bottom:6px; }
.demo-header .sub { opacity:0.85; font-size:13px; font-weight:700; }
.demo-body {
background:${t.colors.primary === '#0f172a' || t.colors.primary === '#1e40af' || t.colors.primary === '#8b5cf6' || t.colors.primary === '#dc2626' ? 'rgba(255,255,255,0.04)' : '#fff'};
border-radius:0 0 18px 18px;
padding:24px 28px;
box-shadow:0 8px 24px rgba(0,0,0,0.10);
border:1px solid ${t.colors.primary}22;
border-top:none;
}
.demo-row {
display:grid; grid-template-columns:1fr 1fr; gap:14px;
padding:14px 0; border-bottom:1px dashed ${t.colors.primary}33;
}
.demo-row:last-child { border-bottom:none; }
.demo-label { font-size:12px; font-weight:800; opacity:0.65; }
.demo-val { font-size:14px; font-weight:900; }
.demo-section { margin-top:18px; }
.demo-section-title {
background:${t.colors.accent};
color:#fff;
padding:8px 16px;
border-radius:50px;
font-size:13px;
font-weight:900;
display:inline-block;
margin-bottom:12px;
}
.demo-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.demo-badge {
padding:6px 12px; border-radius:8px;
font-size:11px; font-weight:800;
}
.b-ok { background:#10b98122; color:#10b981; border:1px solid #10b98144; }
.b-warn { background:#f59e0b22; color:#f59e0b; border:1px solid #f59e0b44; }
.b-bad { background:#ef444422; color:#ef4444; border:1px solid #ef444444; }
.close-bar {
position:fixed; bottom:0; left:0; right:0;
background:${t.colors.secondary};
color:#fff;
padding:12px;
text-align:center;
z-index:100;
box-shadow:0 -4px 20px rgba(0,0,0,0.30);
}
.close-bar button {
background:${t.colors.accent}; color:#fff;
border:none; padding:10px 22px; border-radius:9px;
font-family:inherit; font-size:13px; font-weight:900;
cursor:pointer; margin:0 6px;
}
.close-bar button.secondary {
background:rgba(255,255,255,0.15);
}
body { padding-bottom:80px; }
/* ═══ Booking ticket badge ═══ */
.booking-status-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 9px; border-radius: 7px;
font-size: 10px; font-weight: 800; font-family: 'Cairo', sans-serif;
}
.booking-status-badge.pending { background:rgba(245,158,11,0.12); border:1px solid rgba(245,158,11,0.28); color:#fbbf24; }
.booking-status-badge.confirmed{ background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.28); color:#4ade80; }
.booking-status-badge.cancelled{ background:rgba(239,68,68,0.10); border:1px solid rgba(239,68,68,0.22); color:#f87171; }
.bkcm-wrap{background:#0d1117;border:1px solid rgba(255,255,255,.10);border-radius:22px;width:100%;max-width:440px;overflow:hidden;box-shadow:0 32px 80px rgba(0,0,0,.7);animation:bkcmIn .35s cubic-bezier(.34,1.56,.64,1);}
@keyframes bkcmIn{from{opacity:0;transform:translateY(20px) scale(.96)}to{opacity:1;transform:none}}
.bkcm-head{padding:18px 20px 14px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:12px;}
.bkcm-ico{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,rgba(201,168,76,.25),rgba(201,168,76,.10));border:1px solid rgba(201,168,76,.35);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.bkcm-title{font-size:15px;font-weight:900;color:#f4f0e6;font-family:'Cairo',sans-serif;}
.bkcm-sub{font-size:11px;color:rgba(255,255,255,.35);font-weight:600;margin-top:2px;font-family:'Cairo',sans-serif;}
.bkcm-close{margin-right:auto;width:30px;height:30px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:9px;cursor:pointer;color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:14px;}
.bkcm-info{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:14px 20px 10px;}
.bkcm-info-item{background:rgba(255,255,255,.04);border-radius:9px;padding:8px 10px;}
.bkcm-info-k{font-size:9.5px;font-weight:800;color:rgba(255,255,255,.3);letter-spacing:.4px;font-family:'Cairo',sans-serif;}
.bkcm-info-v{font-size:12px;font-weight:800;color:#f4f0e6;margin-top:2px;font-family:'Cairo',sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bkcm-pay-sect{padding:4px 20px 14px;}
.bkcm-pay-lbl{font-size:11px;font-weight:800;color:rgba(255,255,255,.45);margin-bottom:10px;font-family:'Cairo',sans-serif;}
.bkcm-pay-opts{display:flex;flex-direction:column;gap:7px;max-height:220px;overflow-y:auto;}
.bkcm-pay-opt{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:12px;border:1.5px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);cursor:pointer;transition:all .2s;font-family:'Cairo',sans-serif;}
.bkcm-pay-opt:hover{border-color:rgba(255,255,255,.18);}
.bkcm-pay-opt.sel{background:rgba(201,168,76,.10);border-color:rgba(201,168,76,.38);}
.bkcm-pay-ico{font-size:20px;flex-shrink:0;}
.bkcm-pay-name{font-size:13px;font-weight:800;color:#f4f0e6;}
.bkcm-pay-sub{font-size:10px;color:rgba(255,255,255,.35);font-weight:600;margin-top:1px;}
.bkcm-pay-check{margin-right:auto;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s;}
.bkcm-pay-opt.sel .bkcm-pay-check{background:var(--gold,#c9a84c);border-color:var(--gold,#c9a84c);}
.bkcm-pay-opt.sel .bkcm-pay-check::after{content:'✓';font-size:10px;font-weight:900;color:#1a0f00;}
.bkcm-paid-toggle{display:flex;align-items:center;gap:10px;padding:10px 13px;background:rgba(34,197,94,.06);border:1px solid rgba(34,197,94,.20);border-radius:11px;margin-top:8px;cursor:pointer;}
.bkcm-paid-lbl{font-size:12.5px;font-weight:800;color:rgba(255,255,255,.7);font-family:'Cairo',sans-serif;flex:1;}
.bkcm-foot{padding:12px 20px 18px;border-top:1px solid rgba(255,255,255,.07);display:flex;gap:9px;}
.bkcm-btn-main{flex:2;background:linear-gradient(135deg,#b8860b,#d4af37);color:#1a0f00;border:none;padding:12px;border-radius:12px;font-size:14px;font-weight:900;cursor:pointer;font-family:'Cairo',sans-serif;display:flex;align-items:center;justify-content:center;gap:7px;}
.bkcm-btn-cancel{flex:1;background:rgba(255,255,255,.05);color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.09);padding:12px;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif;}
#bkcm-err{font-size:11.5px;font-weight:700;color:#f87171;text-align:center;min-height:14px;padding:0 20px;font-family:'Cairo',sans-serif;}
@keyframes bkShareIn{from{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:none}}
.bksp-url{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:9px 11px;font-size:11px;color:#38bdf8;direction:ltr;text-align:left;word-break:break-all;margin:10px 0;cursor:pointer;transition:background .15s;font-family:monospace;}
.bksp-url:hover{background:rgba(14,165,233,.12);}
.bksp-btn{display:flex;align-items:center;gap:7px;width:100%;padding:10px 13px;border-radius:10px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);color:var(--t1,#f4f0e6);font-size:12px;font-weight:700;cursor:pointer;font-family:'Cairo',sans-serif;transition:all .18s;margin-bottom:7px;}
.bksp-btn:hover{background:rgba(255,255,255,.10);}
.bksp-btn.primary{background:rgba(14,165,233,.15);border-color:rgba(14,165,233,.35);color:#38bdf8;}
.bksp-btn.primary:hover{background:rgba(14,165,233,.25);}
'
+'@page{size:A4;margin:0;}*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",Tahoma,Arial,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact;}'
+'body{background:#eef1f6;color:#16202e;direction:rtl;text-align:right;padding:24px;}'
+'.page{max-width:840px;margin:0 auto;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(13,20,40,.16);}'
+'.hd{position:relative;background:linear-gradient(135deg,#0b1220 0%,#1b2750 58%,'+accent+' 145%);color:#fff;padding:30px 32px 26px;overflow:hidden;}'
+'.hd::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 130% at 100% 0%,rgba(255,255,255,.13),transparent 52%);}'
+'.hd .row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;position:relative;z-index:1;}'
+'.hd .ttl{font-size:23px;font-weight:800;letter-spacing:-.3px;}'
+'.hd .badge{display:inline-block;margin-top:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.26);padding:5px 14px;border-radius:30px;font-size:13px;font-weight:700;}'
+'.hd .sub{font-size:12.5px;color:rgba(255,255,255,.8);margin-top:11px;}'
+'.hd .c{text-align:left;flex-shrink:0;}.hd .c .nm{font-size:17px;font-weight:800;}.hd .c .tag{font-size:10px;color:rgba(255,255,255,.66);margin-top:4px;letter-spacing:2px;}'
+'.bd{padding:24px 28px 6px;}'
+'.stats{display:flex;gap:11px;flex-wrap:wrap;margin-bottom:18px;}'
+'.st{position:relative;flex:1;min-width:120px;background:#fff;border:1px solid #eef1f6;border-radius:14px;padding:16px 16px 14px;box-shadow:0 6px 18px rgba(13,20,40,.06);overflow:hidden;transition:transform .25s ease,box-shadow .25s ease;animation:stIn .55s cubic-bezier(.16,1,.3,1) both;}'
+'.st:hover{transform:translateY(-5px) scale(1.015);box-shadow:0 16px 34px rgba(13,20,40,.14);}'
+'.st:nth-child(2){animation-delay:.07s}.st:nth-child(3){animation-delay:.14s}.st:nth-child(4){animation-delay:.21s}.st:nth-child(5){animation-delay:.28s}.st:nth-child(6){animation-delay:.35s}'
+'@keyframes stIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}'
+'.st-bar{position:absolute;top:0;right:0;left:0;height:4px;}'
+'.st-l{font-size:11px;color:#64748b;font-weight:700;}'
+'.st-v{font-size:21px;font-weight:800;margin-top:8px;font-variant-numeric:tabular-nums;}'
+'.st-s{font-size:10px;color:#94a3b8;margin-top:4px;}'
+'.sec-h{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:800;color:#0b1220;margin:22px 0 10px;}'
+'.sec-h .ic{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;flex-shrink:0;}'
+'.sec-h .cnt{font-size:11px;color:#94a3b8;font-weight:700;}'
+'table{width:100%;border-collapse:collapse;border:1px solid #eef1f6;border-radius:12px;overflow:hidden;}'
+'thead th{background:#f5f7fb;color:#0b1220;font-size:11.5px;font-weight:800;padding:11px 12px;text-align:right;border-bottom:1px solid #e6eaf2;}'
+'tbody td{padding:11px 12px;font-size:12.5px;border-bottom:1px solid #f1f4f9;text-align:right;}'
+'tbody tr:nth-child(even){background:#fafbfd;}'
+'td.c{text-align:center;color:#94a3b8;font-size:11px;}td.num{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap;}td.fee{color:#dc2626;}td.net{color:#059669;font-weight:800;}'
+'.dir{font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:20px;}.dir.in{background:#dcfce7;color:#166534;}.dir.out{background:#fee2e2;color:#b91c1c;}'
+'.typ{font-size:10.5px;font-weight:800;padding:3px 10px;border-radius:20px;}.typ.cash{background:#dcfce7;color:#166534;}.typ.bank{background:#dbeafe;color:#1e40af;}'
+'tr.tot td{background:linear-gradient(135deg,#0b1220,#1b2750);color:#fff;font-weight:800;border:0;}'
+'.foot{margin-top:20px;font-size:11px;color:#94a3b8;text-align:center;border-top:1px solid #eef1f6;padding-top:14px;}'
+'.noprint{text-align:center;padding:14px 28px 28px;}.noprint button{background:linear-gradient(135deg,'+accent+',#1b2750);color:#fff;border:0;padding:13px 32px;border-radius:11px;font-size:14px;font-weight:800;cursor:pointer;font-family:inherit;box-shadow:0 10px 24px rgba(27,39,80,.3);transition:transform .2s ease;}.noprint button:hover{transform:translateY(-2px);}'
+'@media print{body{background:#fff;padding:0;}.page{box-shadow:none;border-radius:0;max-width:none;}.noprint{display:none;}.st{animation:none!important;}}'
+'
*{box-sizing:border-box;margin:0;padding:0;}
@page{size:A4;margin:12mm 10mm;}
body{font-family:'Cairo','Tajawal','Segoe UI',Arial,sans-serif;color:#1a1a1a;background:#fff;line-height:1.6;}
.page{max-width:1100px;margin:0 auto;padding:18px;}
/* 🆕 REPORT BRAND BAR — Elegant system logo display at top */
.report-brand-bar{
display:flex;align-items:center;gap:14px;
margin-bottom:18px;
padding:12px 18px;
background:linear-gradient(135deg, #fdf8eb 0%, #faf3e0 50%, #fdf8eb 100%);
border:1.5px solid #C9A84C;
border-radius:14px;
position:relative;
overflow:hidden;
box-shadow:0 4px 14px rgba(201,168,76,.18), inset 0 1px 0 rgba(255,255,255,.5);
}
.report-brand-bar::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg, transparent, #C9A84C, #fbbf24, #C9A84C, transparent);
}
.report-brand-bar::after{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at 15% 50%, rgba(251,191,36,.08), transparent 40%),
radial-gradient(circle at 85% 50%, rgba(201,168,76,.06), transparent 40%);
pointer-events:none;
}
.rbb-logo{
width:60px;height:60px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #fbbf24 0%, #C9A84C 50%, #9F7E1C 100%);
border-radius:14px;
color:#fff;
flex-shrink:0;
box-shadow:
0 6px 16px rgba(201,168,76,.4),
inset 0 1.5px 0 rgba(255,255,255,.3),
inset 0 -1.5px 0 rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.rbb-logo::before{
content:'';
position:absolute;
top:0;left:0;right:0;height:50%;
background:linear-gradient(180deg, rgba(255,255,255,.25), transparent);
pointer-events:none;
}
.rbb-logo img{
width:78%;
height:78%;
object-fit:contain;
display:block;
position:relative;
z-index:1;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.rbb-logo svg{color:#fff;}
.rbb-text{flex:1;}
.rbb-system{
font-family:'Cairo','Tajawal',sans-serif;
font-size:18px;
font-weight:900;
color:#5A4520;
letter-spacing:-.3px;
background:linear-gradient(135deg, #5A4520 0%, #9F7E1C 50%, #5A4520 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:2px;
line-height:1.2;
}
.rbb-tagline{
font-size:10.5px;
color:#9F7E1C;
font-weight:700;
letter-spacing:.2px;
opacity:.85;
}
.rbb-decor{
display:flex;align-items:center;gap:6px;
padding:6px 10px;
background:rgba(201,168,76,.12);
border:1px solid rgba(201,168,76,.3);
border-radius:10px;
position:relative;
}
.rbb-decor::before, .rbb-decor::after{
content:'';
width:5px;height:5px;
border-radius:50%;
background:linear-gradient(135deg,#fbbf24,#C9A84C);
box-shadow:0 1px 3px rgba(201,168,76,.4);
}
.rbb-decor::after{margin:0 2px;}
@media print{
.report-brand-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.rbb-logo{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.rbb-system{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}
/* HEADER */
/* 🆕 هيدر موحّد احترافي */
.rpt-header{margin-bottom:24px;border:1.5px solid #E8DCC0;border-radius:18px;overflow:hidden;box-shadow:0 4px 16px rgba(201,168,76,.1);}
.rpt-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:linear-gradient(135deg,#fdfaf2 0%,#faf4e6 100%);}
.rpt-center{display:flex;align-items:center;gap:15px;}
.rpt-center-logo{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,#fbbf24,#C9A84C,#9F7E1C);color:#fff;flex-shrink:0;box-shadow:0 6px 16px rgba(201,168,76,.35),inset 0 1.5px 0 rgba(255,255,255,.3);overflow:hidden;}
.rpt-center-logo img{width:100%;height:100%;object-fit:cover;border-radius:16px;}
.rpt-center-name{font-size:20px;font-weight:900;color:#1a1a1a;letter-spacing:-.3px;}
.rpt-center-sub{font-size:12.5px;color:#7a6f55;font-weight:600;margin-top:3px;}
.rpt-center-vat{font-size:10.5px;color:#a39577;font-weight:600;margin-top:2px;}
.rpt-meta{text-align:left;flex-shrink:0;}
.rpt-title{font-size:16px;font-weight:900;color:#9F7E1C;}
.rpt-date{font-size:12px;color:#7a6f55;font-weight:700;margin-top:4px;}
.rpt-mode-badge{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:800;}
.rpt-mode-badge.is-op{background:rgba(245,158,11,.14);color:#b45309;border:1px solid rgba(245,158,11,.3);}
.rpt-mode-badge.is-full{background:rgba(16,185,129,.14);color:#047857;border:1px solid rgba(16,185,129,.3);}
.rpt-header-brand{padding:9px 24px;background:linear-gradient(90deg,#1a1505,#2a2008);color:#d4b86a;font-size:11px;font-weight:600;text-align:center;letter-spacing:.2px;}
.rpt-header-brand strong{color:#fbbf24;font-weight:800;}
.hdr{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:3px solid #C9A84C;margin-bottom:24px;}
.hdr-left{display:flex;align-items:center;gap:14px;}
.hdr-logo{width:60px;height:60px;background:linear-gradient(135deg,#C9A84C,#9F7E1C);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;box-shadow:0 4px 12px rgba(201,168,76,.3);}
.hdr-name{font-size:22px;font-weight:900;color:#0a0800;line-height:1.2;}
.hdr-sub{font-size:11px;color:#666;margin-top:3px;}
.hdr-right{text-align:left;}
.hdr-title{font-size:14px;color:#9F7E1C;font-weight:800;letter-spacing:.5px;}
.hdr-date{font-size:12px;color:#444;margin-top:3px;font-weight:600;}
.hdr-date-tag{font-size:10px;color:#888;margin-top:2px;}
/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px;}
.kpi{background:linear-gradient(160deg,#ffffff,#f8f6f0);border:1px solid #ece5d4;border-right:4px solid;border-radius:14px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.kpi.green{border-right-color:#22C55E;}
.kpi.purple{border-right-color:#a855f7;}
.kpi.gold{border-right-color:#C9A84C;}
.kpi.red{border-right-color:#EF4444;}
.kpi.blue{border-right-color:#3B82F6;}
.kpi-l{font-size:10px;color:#777;font-weight:700;margin-bottom:4px;}
.kpi-v{font-family:'IBM Plex Mono','Roboto Mono',monospace;font-size:22px;font-weight:900;color:#0a0800;line-height:1;letter-spacing:-1px;}
.kpi-u{font-size:10px;color:#888;margin-top:3px;}
/* Net profit hero */
.hero{background:linear-gradient(135deg,#9F7E1C,#C9A84C);color:#fff;border-radius:14px;padding:18px 24px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 20px rgba(201,168,76,.25);}
.hero-l{font-size:13px;font-weight:700;opacity:.9;letter-spacing:.5px;}
.hero-v{font-family:'IBM Plex Mono','Roboto Mono',monospace;font-size:32px;font-weight:900;letter-spacing:-1px;}
.hero-sub{font-size:11px;opacity:.85;margin-top:3px;}
/* Section headings */
.sec{margin-bottom:22px;break-inside:avoid;page-break-inside:avoid;}
/* 🆕 تقسيم ذكي: الأقسام الكبيرة تبدأ صفحة جديدة */
.sec-page{break-before:page;page-break-before:always;}
/* الجداول الطويلة: السماح بالتقسيم لكن مع تكرار الرأس */
.sec-long{break-inside:auto;page-break-inside:auto;}
.sec-long thead{display:table-header-group;}
.sec-long tr{break-inside:avoid;page-break-inside:avoid;}
/* منع يُتم الصفوف */
table{break-inside:auto;}
thead{display:table-header-group;}
tfoot{display:table-footer-group;}
.footer{margin-top:24px;padding:14px 12px;text-align:center;border-top:1.5px solid #ddd;font-size:10.5px;line-height:1.9;color:#777;}
.footer .o{color:#C9A84C;font-weight:800;}
.footer a{color:inherit;text-decoration:none;}
.footer strong{font-weight:800;}
tr{break-inside:avoid;page-break-inside:avoid;}
/* عناوين الأقسام لا تنفصل عن محتواها */
.sec-h{break-after:avoid;page-break-after:avoid;}
@media print{
.print-bar{display:none !important;}
.sec{margin-bottom:18px;}
}
.sec-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #e5e5e5;}
.sec-h-ico{width:28px;height:28px;background:#9F7E1C;color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.sec-h-name{font-size:14px;font-weight:800;color:#0a0800;}
/* Tables */
table{width:100%;border-collapse:collapse;font-size:11px;}
th{background:linear-gradient(135deg,#0a0800,#2d2100);color:#C9A84C;padding:9px 8px;text-align:right;font-weight:700;font-size:11px;border:1px solid #1a1200;}
td{padding:8px;text-align:right;border:1px solid #e5e5e5;color:#222;}
tr:nth-child(even) td{background:#fafafa;}
td.amt{font-family:'IBM Plex Mono','Roboto Mono',monospace;font-weight:800;color:#9F7E1C;text-align:left;direction:ltr;}
.bd-paid{background:#dcfce7;color:#15803d;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
.bd-unp{background:#fee2e2;color:#991b1b;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
.bd-ref{background:#f3e8ff;color:#7c3aed;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
.bd-partial{background:#fef3c7;color:#b45309;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
/* Two-column tables */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* Footer */
.foot{margin-top:30px;padding-top:14px;border-top:2px solid #C9A84C;text-align:center;font-size:10px;color:#888;line-height:1.8;}
.foot strong{color:#9F7E1C;}
/* 🆕 Powered-by strip (admin branding badge) */
/* 🆕✨ LUXURY POWERED-BY STRIP — more prominent with logo showcase */
.powered-by-strip{
display:flex;align-items:center;justify-content:center;gap:11px;
padding:11px 18px;
margin-bottom:14px;
background:
radial-gradient(ellipse at center, rgba(201,168,76,.08) 0%, rgba(201,168,76,.02) 70%),
linear-gradient(135deg, rgba(159,126,28,.06) 0%, rgba(159,126,28,.01) 100%);
border:1px solid rgba(159,126,28,.28);
border-radius:12px;
font-size:11px;
color:#5A4520;
font-weight:700;
letter-spacing:.3px;
position:relative;
overflow:hidden;
}
/* Subtle gold shine line at top of strip */
.powered-by-strip::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:1.5px;
background:linear-gradient(90deg, transparent 0%, rgba(201,168,76,.6) 50%, transparent 100%);
}
/* Inner decorative dot */
.powered-by-strip::after{
content:'';
position:absolute;
width:4px;height:4px;
background:linear-gradient(135deg,#fbbf24,#C9A84C);
border-radius:50%;
box-shadow:0 0 8px rgba(201,168,76,.5);
right:14px;top:50%;transform:translateY(-50%);
}
.pbs-logo{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;
background:linear-gradient(135deg,#fef3c7,#fde68a 50%,#C9A84C);
border-radius:8px;
color:#5A4520;
flex-shrink:0;
overflow:hidden;
box-shadow:
0 4px 10px rgba(201,168,76,.35),
inset 0 1px 0 rgba(255,255,255,.6),
inset 0 -1px 0 rgba(0,0,0,.1);
border:1px solid rgba(201,168,76,.45);
position:relative;
}
.pbs-logo img{
width:80%;height:80%;
object-fit:contain;
display:block;
margin:auto;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
.pbs-text{
display:inline-flex;align-items:center;gap:7px;
font-size:11.5px;
font-weight:800;
color:#7A6420;
}
.pbs-sep{
opacity:.5;
font-weight:900;
}
.pbs-owner{
color:#5A4520;
font-weight:900;
letter-spacing:-.1px;
}
/* 🆕 Expense mode badge in header */
.exp-mode-badge{
display:inline-flex;align-items:center;justify-content:center;
margin-top:8px;
padding:5px 11px;
border-radius:9px;
font-size:10.5px;
font-weight:900;
letter-spacing:.3px;
border:1.5px solid;
}
.exp-mode-badge.mode-operational{
background:linear-gradient(135deg,#FEF3C7,#FDE68A);
color:#92400E;
border-color:#F59E0B;
}
.exp-mode-badge.mode-full{
background:linear-gradient(135deg,#DBEAFE,#BFDBFE);
color:#1E40AF;
border-color:#3B82F6;
}
/* 🆕 Expense mode explanation card */
.exp-mode-card{
display:grid;
grid-template-columns:auto 1fr auto;
gap:14px;
align-items:center;
padding:14px 18px;
margin-bottom:14px;
border-radius:14px;
border:1.5px solid;
position:relative;
overflow:hidden;
}
.exp-mode-card.is-op{
background:linear-gradient(155deg, rgba(245,158,11,.08), rgba(245,158,11,.02));
border-color:rgba(245,158,11,.35);
}
.exp-mode-card.is-full{
background:linear-gradient(155deg, rgba(59,130,246,.08), rgba(59,130,246,.02));
border-color:rgba(59,130,246,.35);
}
.exp-mode-card::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:2px;
background:linear-gradient(90deg,transparent,currentColor,transparent);
opacity:.4;
}
.exp-mode-card.is-op{color:#92400E;}
.exp-mode-card.is-full{color:#1E40AF;}
.emc-icon{
font-size:30px;
flex-shrink:0;
line-height:1;
}
.emc-content{flex:1;min-width:0;}
.emc-title{
font-size:13.5px;
font-weight:800;
margin-bottom:5px;
letter-spacing:-.2px;
}
.emc-title strong{
font-weight:900;
padding:1px 6px;
border-radius:5px;
}
.exp-mode-card.is-op .emc-title strong{background:rgba(245,158,11,.18);}
.exp-mode-card.is-full .emc-title strong{background:rgba(59,130,246,.18);}
.emc-desc{
font-size:11px;
color:#555;
font-weight:600;
line-height:1.65;
letter-spacing:.1px;
}
.emc-desc strong{font-weight:900;color:#222;}
.emc-formula{
flex-shrink:0;
background:rgba(255,255,255,.55);
border:1px solid currentColor;
border-radius:10px;
padding:8px 12px;
text-align:center;
min-width:140px;
}
.emc-formula-lbl{
font-size:9px;
font-weight:800;
opacity:.65;
letter-spacing:.6px;
margin-bottom:3px;
}
.emc-formula-val{
font-size:10.5px;
font-weight:900;
letter-spacing:-.1px;
}
@media(max-width:700px){
.exp-mode-card{
grid-template-columns:auto 1fr;
}
.emc-formula{
grid-column:1/-1;
margin-top:6px;
}
}
/* Print button */
.print-bar{position:fixed;top:10px;left:10px;display:flex;gap:8px;z-index:9999;}
.print-bar button{padding:10px 18px;background:#9F7E1C;color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);}
.print-bar button.close{background:#666;}
@media print{
.print-bar{display:none;}
body{padding:0;}
.sec{page-break-inside:avoid;}
.hero{background:linear-gradient(135deg,#9F7E1C,#C9A84C) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
th{background:linear-gradient(135deg,#0a0800,#2d2100) !important;color:#C9A84C !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.exp-mode-badge, .exp-mode-card, .powered-by-strip{
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}
.exp-mode-card{page-break-inside:avoid;}
}
.rpt-cover-page{width:100%;text-align:center;break-after:page;page-break-after:always;margin:0;padding:0;line-height:0;}
.rpt-cover-img{max-width:100%;max-height:92vh;width:auto;height:auto;display:block;margin:0 auto;}
.rpt-cover-frame{width:100%;height:92vh;border:none;display:block;}
@media print{
.rpt-cover-page{break-after:page;page-break-after:always;margin:0;padding:0;}
.rpt-cover-img{max-height:96vh;}
}
${window._pdfFmtCSS ? window._pdfFmtCSS() : ''}
/* 🆕 brand-bar للتقرير الشهري */
.brand-bar{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding:14px 20px;background:linear-gradient(135deg,#fdf8eb,#faf3e0);border:1.5px solid #C9A84C;border-radius:13px;}
.brand-bar-logo{width:50px;height:50px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fef3c7,#C9A84C);border-radius:11px;overflow:hidden;flex-shrink:0;}
.brand-bar-logo img{width:80%;height:80%;object-fit:contain;}
.brand-bar-logo svg{color:#5A4520;}
.brand-bar-text{flex:1;}
.brand-bar-title{font-size:16px;font-weight:900;color:#5A4520;letter-spacing:-.3px;}
.brand-bar-sub{font-size:11px;color:#7A6420;font-weight:700;margin-top:2px;}
.fc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.fc-card{padding:12px;background:#fff;border:1.5px solid #e5e5e5;border-radius:10px;}
.fc-h{font-size:12px;font-weight:900;color:#1a1a1a;margin-bottom:8px;}
.fc-row{display:flex;justify-content:space-between;padding:5px 0;font-size:11px;border-bottom:1px dashed #eee;}
.fc-row:last-child{border-bottom:none;}
.fc-row-l{color:#666;font-weight:700;}
.fc-row-v{font-weight:900;}
.sec-h-title{font-size:13px;font-weight:900;letter-spacing:.3px;}
/* 🆕 تخطيط الهيدر المفقود للتقرير الشهري */
.hdr-l{display:flex;align-items:center;gap:14px;}
.hdr-r{text-align:left;}
.hdr-l .lg{width:56px;height:56px;background:#fff;border-radius:13px;display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:0 6px 16px rgba(201,168,76,.4);flex-shrink:0;}
.hdr-l .lg img{width:100%;height:100%;object-fit:contain;}
.hdr-l .lg .ph{font-size:28px;}
.hdr-tag{font-size:10px;color:#9F7E1C;margin-top:2px;}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Cairo',sans-serif;}
@page{size:A4;margin:12mm 10mm;}
body{font-family:'Cairo',sans-serif;color:#1f2430;background:#eef1f5;line-height:1.55;}
/* 🆕 قسم تفاصيل المركبة */
.z-vehicle{border:1px solid #e8ebf0;border-radius:14px;overflow:hidden;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.03);}
.z-vehicle-h{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:12px;font-weight:900;padding:11px 16px;letter-spacing:.2px;display:flex;align-items:center;gap:9px;}
.z-veh-ico{font-size:16px;}
.z-vehicle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background:#fafbfc;}
.z-vcell{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #eef0f3;border-radius:11px;padding:11px 13px;}
.z-vcell-ic{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:16px;background:linear-gradient(135deg,#eef4fb,#e0ecf8);}
.z-vcell-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.z-vcell-tx span{color:#5a6472;font-weight:700;font-size:9.5px;}
.z-vcell-tx b{color:#1f2430;font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:560px){.z-vehicle-grid{grid-template-columns:repeat(2,1fr);gap:9px;padding:12px;}}
.inv-page{max-width:820px;margin:0 auto;padding:0;background:#fff;}
.print-bar{position:sticky;top:0;background:#11131a;padding:11px;display:flex;gap:8px;justify-content:center;z-index:10;}
.print-bar button{padding:9px 22px;background:linear-gradient(135deg,#C9A84C,#9F7E1C);color:#fff;border:none;border-radius:9px;font-weight:800;cursor:pointer;font-family:inherit;font-size:13px;}
.z-invoice{padding:26px 30px 30px;}
.z-top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:3px solid #C9A84C;margin-bottom:18px;}
.z-top-r{display:flex;align-items:center;gap:13px;}
.z-logo{width:58px;height:58px;border-radius:13px;background:linear-gradient(135deg,#fdf6e3,#f0e2bd);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #e8d9ad;flex-shrink:0;}
.z-logo img{width:100%;height:100%;object-fit:contain;}
.z-logo span{font-size:28px;}
.z-seller-name{font-size:18px;font-weight:900;color:#1a1a1a;letter-spacing:-.3px;}
.z-seller-sub{font-size:11.5px;color:#8a8a8a;font-weight:700;margin-top:3px;}
.z-top-l{text-align:left;}
.z-doc-title{font-size:20px;font-weight:900;color:#9F7E1C;letter-spacing:-.5px;}
.z-doc-title-en{font-size:10px;font-weight:800;color:#8a8a8a;letter-spacing:2px;margin-bottom:6px;}
.zb{display:inline-block;padding:4px 13px;border-radius:20px;font-size:10.5px;font-weight:900;}
.zb-paid{background:#dcfce7;color:#15803d;border:1px solid #86efac;}
.zb-due{background:#fee2e2;color:#dc2626;border:1px solid #fca5a5;}
.zb-refund{background:#f3e8ff;color:#9333ea;border:1px solid #d8b4fe;}
.z-meta{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg,#fafbfc,#f3f5f8);border:1px solid #e8ebf0;border-radius:13px;padding:14px 18px;margin-bottom:16px;}
.z-meta-info{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:7px 22px;}
.z-mrow{display:flex;justify-content:space-between;font-size:11.5px;border-bottom:1px dashed #e3e6eb;padding-bottom:5px;}
.z-mrow span{color:#5a6472;font-weight:700;}
.z-mrow b{color:#1f2430;font-weight:900;}
.z-qr{width:108px;height:108px;flex-shrink:0;background:#fff;border:1px solid #e3e6eb;border-radius:10px;padding:4px;}
.z-qr-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:1px;}
.z-qr-grid span{background:#fff;border-radius:1px;}
.z-qr-grid span.on{background:#1a1a1a;}
.z-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;align-items:stretch;}
.z-party{border:1px solid #e8ebf0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff;}
.z-party-h{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:11px;font-weight:900;padding:9px 14px;letter-spacing:.3px;}
.z-prow{display:flex;justify-content:space-between;padding:7px 14px;font-size:11.5px;border-bottom:1px dashed #eef0f3;}
.z-prow:last-child{border-bottom:none;}
.z-prow span{color:#5a6472;font-weight:700;}
.z-prow b{color:#1f2430;font-weight:900;text-align:left;}
.z-muted b{color:#9098a5;}
.z-table{width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:16px;border-radius:12px;overflow:hidden;border:1px solid #e8ebf0;}
.z-table thead th{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:9.5px;font-weight:800;padding:9px 5px;text-align:center;line-height:1.3;}
.z-table thead th:nth-child(2){text-align:right;}
.z-table tbody td{padding:10px 5px;font-size:10.5px;font-weight:700;border-bottom:1px solid #f0f2f5;color:#1f2430;vertical-align:middle;text-align:center;word-break:break-word;}
.z-table tbody td:nth-child(2){text-align:right;}
.z-table .z-num{font-family:'Cairo';direction:ltr;}
.z-table tbody tr:last-child td{border-bottom:none;}
.z-table .z-c{text-align:center;}
.z-table .z-num{text-align:center;font-weight:800;direction:ltr;}
.z-desc strong{font-weight:900;color:#1a1a1a;}
.z-sub{font-size:10px;color:#5a6472;font-weight:700;margin-top:3px;}
.z-note{font-size:11px;font-weight:800;padding:10px 14px;border-radius:10px;margin-bottom:14px;}
.z-loyal{background:linear-gradient(135deg,#fef9c3,#fef3c7);color:#a16207;border:1px solid #fde68a;}
.z-summary-wrap{display:flex;justify-content:space-between;gap:18px;margin-bottom:16px;align-items:flex-start;flex-wrap:wrap;}
.z-summary-side{flex:1;min-width:240px;}
.z-pay{font-size:11.5px;margin-bottom:12px;background:#fafbfc;border:1px solid #eef0f3;border-radius:11px;padding:11px 14px;}
.z-pay span{color:#5a6472;font-weight:700;display:block;margin-bottom:4px;font-size:10px;}
.z-pay b{color:#1f2430;font-weight:900;font-size:12.5px;}
.z-legal{font-size:9px;color:#4b5563;font-weight:700;line-height:1.6;max-width:340px;}
.z-summary{width:290px;flex-shrink:0;border:1px solid #e8ebf0;border-radius:12px;overflow:hidden;align-self:flex-start;}
.z-srow{display:flex;justify-content:space-between;padding:10px 16px;font-size:12px;border-bottom:1px solid #f0f2f5;}
.z-srow span{color:#4b5563;font-weight:700;}
.z-srow b{color:#1f2430;font-weight:900;direction:ltr;}
.z-srow.z-total{background:linear-gradient(135deg,#9F7E1C,#C9A84C);border-bottom:none;}
.z-srow.z-total span{color:#fff;font-size:13px;font-weight:900;}
.z-srow.z-total b{color:#fff;font-size:16px;}
.z-refund{border:1.5px solid #d8b4fe;border-radius:12px;overflow:hidden;margin-bottom:16px;}
.z-refund-h{background:linear-gradient(135deg,#7c3aed,#9333ea);color:#fff;font-size:11.5px;font-weight:900;padding:9px 14px;}
.z-rgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding:13px 16px;background:#faf5ff;}
.z-rgrid>div{display:flex;justify-content:space-between;font-size:11.5px;border-bottom:1px dashed #e9d5ff;padding-bottom:5px;}
.z-rgrid>div span{color:#5a6472;font-weight:700;}
.z-rgrid>div b{color:#7c3aed;font-weight:900;}
.z-rfull{grid-column:1/-1;}
.z-foot{text-align:center;padding-top:16px;border-top:2px solid #eef0f3;font-size:11px;color:#5a6472;font-weight:700;}
.z-foot-sys{font-size:10px;color:#9098a5;margin-top:5px;}
.z-foot-sys strong{color:#9F7E1C;}
.z-foot-link{font-size:9.5px;color:#5a6472;font-weight:700;margin-top:6px;word-break:break-all;}
.z-foot-link span{color:#9F7E1C;}
.inv-page:not(:last-child){page-break-after:always;}
@media print{.print-bar{display:none;}body{background:#fff;}.z-invoice{padding:0;}.z-party,.z-table,.z-summary,.z-refund,.z-meta,.z-vehicle{page-break-inside:avoid;}.z-top,.z-party-h,.z-table thead th,.z-srow.z-total,.z-refund-h,.z-vehicle-h{-webkit-print-color-adjust:exact;print-color-adjust:exact;}.z-top{margin-bottom:8px;padding-bottom:8px;}.z-meta{margin-bottom:8px;}.z-parties{margin-bottom:8px;gap:10px;}.z-vehicle{margin-bottom:8px;}.z-vehicle-grid{padding:9px;gap:7px;}.z-table{margin-bottom:8px;}.z-table thead th{padding:6px 4px;}.z-table tbody td{padding:7px 4px;}.z-summary-wrap{margin-bottom:8px;}.z-prow{padding:5px 12px;}.z-vcell{padding:8px 10px;}.z-foot{padding-top:8px;margin-bottom:0;}.z-legal{margin-bottom:0;}.inv-page{margin:0;padding:0;}.inv-page>*:last-child{margin-bottom:0 !important;}html,body{height:auto !important;overflow:visible !important;}@page{size:A4 portrait;margin:7mm;}}
.print-bar{position:sticky;top:0;background:#1f2430;padding:10px;text-align:center;z-index:100;}
.print-bar button{background:#5C2E96;color:#fff;border:none;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;margin:0 4px;font-family:'Cairo',sans-serif;}
@media print{.print-bar{display:none;}}
*{box-sizing:border-box;margin:0;padding:0;font-family:'Cairo',sans-serif;}
@page{size:A4;margin:12mm 10mm;}
body{font-family:'Cairo',sans-serif;color:#1f2430;background:#eef1f5;line-height:1.55;}
/* 🆕 قسم تفاصيل المركبة */
.z-vehicle{border:1px solid #e8ebf0;border-radius:14px;overflow:hidden;margin-bottom:16px;box-shadow:0 2px 8px rgba(0,0,0,.03);}
.z-vehicle-h{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:12px;font-weight:900;padding:11px 16px;letter-spacing:.2px;display:flex;align-items:center;gap:9px;}
.z-veh-ico{font-size:16px;}
.z-vehicle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;background:#fafbfc;}
.z-vcell{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #eef0f3;border-radius:11px;padding:11px 13px;}
.z-vcell-ic{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:16px;background:linear-gradient(135deg,#eef4fb,#e0ecf8);}
.z-vcell-tx{display:flex;flex-direction:column;gap:2px;min-width:0;}
.z-vcell-tx span{color:#5a6472;font-weight:700;font-size:9.5px;}
.z-vcell-tx b{color:#1f2430;font-weight:900;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:560px){.z-vehicle-grid{grid-template-columns:repeat(2,1fr);gap:9px;padding:12px;}}
.inv-page{max-width:820px;margin:0 auto;padding:0;background:#fff;}
.print-bar{position:sticky;top:0;background:#11131a;padding:11px;display:flex;gap:8px;justify-content:center;z-index:10;}
.print-bar button{padding:9px 22px;background:linear-gradient(135deg,#C9A84C,#9F7E1C);color:#fff;border:none;border-radius:9px;font-weight:800;cursor:pointer;font-family:inherit;font-size:13px;}
.z-invoice{padding:26px 30px 30px;}
.z-top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:16px;border-bottom:3px solid #C9A84C;margin-bottom:18px;}
.z-top-r{display:flex;align-items:center;gap:13px;}
.z-logo{width:58px;height:58px;border-radius:13px;background:linear-gradient(135deg,#fdf6e3,#f0e2bd);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid #e8d9ad;flex-shrink:0;}
.z-logo img{width:100%;height:100%;object-fit:contain;}
.z-logo span{font-size:28px;}
.z-seller-name{font-size:18px;font-weight:900;color:#1a1a1a;letter-spacing:-.3px;}
.z-seller-sub{font-size:11.5px;color:#8a8a8a;font-weight:700;margin-top:3px;}
.z-top-l{text-align:left;}
.z-doc-title{font-size:20px;font-weight:900;color:#9F7E1C;letter-spacing:-.5px;}
.z-doc-title-en{font-size:10px;font-weight:800;color:#8a8a8a;letter-spacing:2px;margin-bottom:6px;}
.zb{display:inline-block;padding:4px 13px;border-radius:20px;font-size:10.5px;font-weight:900;}
.zb-paid{background:#dcfce7;color:#15803d;border:1px solid #86efac;}
.zb-due{background:#fee2e2;color:#dc2626;border:1px solid #fca5a5;}
.zb-refund{background:#f3e8ff;color:#9333ea;border:1px solid #d8b4fe;}
.z-meta{display:flex;justify-content:space-between;align-items:center;gap:18px;background:linear-gradient(135deg,#fafbfc,#f3f5f8);border:1px solid #e8ebf0;border-radius:13px;padding:14px 18px;margin-bottom:16px;}
.z-meta-info{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:7px 22px;}
.z-mrow{display:flex;justify-content:space-between;font-size:11.5px;border-bottom:1px dashed #e3e6eb;padding-bottom:5px;}
.z-mrow span{color:#5a6472;font-weight:700;}
.z-mrow b{color:#1f2430;font-weight:900;}
.z-qr{width:108px;height:108px;flex-shrink:0;background:#fff;border:1px solid #e3e6eb;border-radius:10px;padding:4px;}
.z-qr-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(7,1fr);gap:1px;}
.z-qr-grid span{background:#fff;border-radius:1px;}
.z-qr-grid span.on{background:#1a1a1a;}
.z-parties{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;align-items:stretch;}
.z-party{border:1px solid #e8ebf0;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;background:#fff;}
.z-party-h{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:11px;font-weight:900;padding:9px 14px;letter-spacing:.3px;}
.z-prow{display:flex;justify-content:space-between;padding:7px 14px;font-size:11.5px;border-bottom:1px dashed #eef0f3;}
.z-prow:last-child{border-bottom:none;}
.z-prow span{color:#5a6472;font-weight:700;}
.z-prow b{color:#1f2430;font-weight:900;text-align:left;}
.z-muted b{color:#9098a5;}
.z-table{width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:16px;border-radius:12px;overflow:hidden;border:1px solid #e8ebf0;}
.z-table thead th{background:linear-gradient(135deg,#0e2a47,#1a4971);color:#fff;font-size:9.5px;font-weight:800;padding:9px 5px;text-align:center;line-height:1.3;}
.z-table thead th:nth-child(2){text-align:right;}
.z-table tbody td{padding:10px 5px;font-size:10.5px;font-weight:700;border-bottom:1px solid #f0f2f5;color:#1f2430;vertical-align:middle;text-align:center;word-break:break-word;}
.z-table tbody td:nth-child(2){text-align:right;}
.z-table .z-num{font-family:'Cairo';direction:ltr;}
.z-table tbody tr:last-child td{border-bottom:none;}
.z-table .z-c{text-align:center;}
.z-table .z-num{text-align:center;font-weight:800;direction:ltr;}
.z-desc strong{font-weight:900;color:#1a1a1a;}
.z-sub{font-size:10px;color:#5a6472;font-weight:700;margin-top:3px;}
.z-note{font-size:11px;font-weight:800;padding:10px 14px;border-radius:10px;margin-bottom:14px;}
.z-loyal{background:linear-gradient(135deg,#fef9c3,#fef3c7);color:#a16207;border:1px solid #fde68a;}
.z-summary-wrap{display:flex;justify-content:space-between;gap:18px;margin-bottom:16px;align-items:flex-start;flex-wrap:wrap;}
.z-summary-side{flex:1;min-width:240px;}
.z-pay{font-size:11.5px;margin-bottom:12px;background:#fafbfc;border:1px solid #eef0f3;border-radius:11px;padding:11px 14px;}
.z-pay span{color:#5a6472;font-weight:700;display:block;margin-bottom:4px;font-size:10px;}
.z-pay b{color:#1f2430;font-weight:900;font-size:12.5px;}
.z-legal{font-size:9px;color:#4b5563;font-weight:700;line-height:1.6;max-width:340px;}
.z-summary{width:290px;flex-shrink:0;border:1px solid #e8ebf0;border-radius:12px;overflow:hidden;align-self:flex-start;}
.z-srow{display:flex;justify-content:space-between;padding:10px 16px;font-size:12px;border-bottom:1px solid #f0f2f5;}
.z-srow span{color:#4b5563;font-weight:700;}
.z-srow b{color:#1f2430;font-weight:900;direction:ltr;}
.z-srow.z-total{background:linear-gradient(135deg,#9F7E1C,#C9A84C);border-bottom:none;}
.z-srow.z-total span{color:#fff;font-size:13px;font-weight:900;}
.z-srow.z-total b{color:#fff;font-size:16px;}
.z-refund{border:1.5px solid #d8b4fe;border-radius:12px;overflow:hidden;margin-bottom:16px;}
.z-refund-h{background:linear-gradient(135deg,#7c3aed,#9333ea);color:#fff;font-size:11.5px;font-weight:900;padding:9px 14px;}
.z-rgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding:13px 16px;background:#faf5ff;}
.z-rgrid>div{display:flex;justify-content:space-between;font-size:11.5px;border-bottom:1px dashed #e9d5ff;padding-bottom:5px;}
.z-rgrid>div span{color:#5a6472;font-weight:700;}
.z-rgrid>div b{color:#7c3aed;font-weight:900;}
.z-rfull{grid-column:1/-1;}
.z-foot{text-align:center;padding-top:16px;border-top:2px solid #eef0f3;font-size:11px;color:#5a6472;font-weight:700;}
.z-foot-sys{font-size:10px;color:#9098a5;margin-top:5px;}
.z-foot-sys strong{color:#9F7E1C;}
.z-foot-link{font-size:9.5px;color:#5a6472;font-weight:700;margin-top:6px;word-break:break-all;}
.z-foot-link span{color:#9F7E1C;}
.inv-page:not(:last-child){page-break-after:always;}
@media print{.print-bar{display:none;}body{background:#fff;}.z-invoice{padding:0;}.z-party,.z-table,.z-summary,.z-refund,.z-meta,.z-vehicle{page-break-inside:avoid;}.z-top,.z-party-h,.z-table thead th,.z-srow.z-total,.z-refund-h,.z-vehicle-h{-webkit-print-color-adjust:exact;print-color-adjust:exact;}.z-top{margin-bottom:8px;padding-bottom:8px;}.z-meta{margin-bottom:8px;}.z-parties{margin-bottom:8px;gap:10px;}.z-vehicle{margin-bottom:8px;}.z-vehicle-grid{padding:9px;gap:7px;}.z-table{margin-bottom:8px;}.z-table thead th{padding:6px 4px;}.z-table tbody td{padding:7px 4px;}.z-summary-wrap{margin-bottom:8px;}.z-prow{padding:5px 12px;}.z-vcell{padding:8px 10px;}.z-foot{padding-top:8px;margin-bottom:0;}.z-legal{margin-bottom:0;}.inv-page{margin:0;padding:0;}.inv-page>*:last-child{margin-bottom:0 !important;}html,body{height:auto !important;overflow:visible !important;}@page{size:A4 portrait;margin:7mm;}}
.print-bar{position:sticky;top:0;background:#1f2430;padding:10px;text-align:center;z-index:100;}
.print-bar button{background:#5C2E96;color:#fff;border:none;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;margin:0 4px;font-family:'Cairo',sans-serif;}
@media print{.print-bar{display:none;}}
.page{max-width:1100px;margin:0 auto;padding:14px;}
.print-bar{position:sticky;top:0;background:#1a1a1a;padding:10px;display:flex;gap:8px;justify-content:center;margin:-12mm -10mm 14px;z-index:10;}
.print-bar button{padding:9px 20px;background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;border:none;border-radius:8px;font-weight:800;cursor:pointer;font-family:inherit;}
.brand-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:12px 18px;background:linear-gradient(135deg,#fdf8eb,#faf3e0);border:1.5px solid #C9A84C;border-radius:12px;}
.brand-bar-logo{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fef3c7,#C9A84C);border-radius:10px;overflow:hidden;}
.brand-bar-logo img{width:80%;height:80%;object-fit:contain;}
.brand-bar-title{font-size:15px;font-weight:900;color:#5A4520;}
.brand-bar-sub{font-size:10.5px;color:#7A6420;font-weight:700;}
.center-hdr{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;margin-bottom:14px;background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border-radius:13px;}
.cls-logo{width:50px;height:50px;background:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cls-logo img{width:100%;height:100%;object-fit:contain;}
.cls-name{font-size:15px;font-weight:900;color:#fff;}
.cls-sub{font-size:10.5px;color:#fecaca;margin-top:2px;}
.hdr-title{font-size:14px;font-weight:900;color:#fff;text-align:left;}
.hdr-date{font-size:11px;color:#fecaca;margin-top:3px;}
.hero{background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;padding:18px 22px;border-radius:14px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 28px rgba(220,38,38,.3);}
.hero-l{font-size:14px;font-weight:800;margin-bottom:5px;}
.hero-sub{font-size:11px;opacity:.85;}
.hero-v{font-size:32px;font-weight:900;letter-spacing:-1px;}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.kpi{padding:13px;background:#fafafa;border:1px solid #e5e5e5;border-radius:11px;text-align:center;}
.kpi-l{font-size:10.5px;color:#666;font-weight:700;margin-bottom:5px;}
.kpi-v{font-size:17px;font-weight:900;color:#1a1a1a;}
.sec{margin-bottom:14px;page-break-inside:avoid;}
.sec-h{padding:9px 14px;background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border-radius:10px 10px 0 0;font-size:13px;font-weight:900;}
.sec-b{background:#fff;border:1.5px solid #e5e5e5;border-top:none;border-radius:0 0 12px 12px;padding:0;overflow:hidden;}
table{width:100%;border-collapse:collapse;}
th{background:linear-gradient(135deg,#fafafa,#f5f5f5);color:#555;padding:9px 12px;text-align:right;font-size:11px;font-weight:800;border-bottom:2px solid #e5e5e5;}
td{padding:9px 12px;border-bottom:1px solid #f0f0f0;font-size:11.5px;font-weight:700;color:#333;vertical-align:top;}
tr:nth-child(even) td{background:#fafafa;}
.footer{margin-top:24px;padding:14px;text-align:center;border-top:1.5px solid #ddd;font-size:10px;color:#999;}
.footer .o{font-weight:900;color:#5A4520;}
@media print{.print-bar{display:none;}body{padding:0;}.sec{page-break-inside:avoid;}.hero,th,.center-hdr,.sec-h,.brand-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact;}}
.permit-title{text-align:center;padding:24px;margin-bottom:20px;background:linear-gradient(135deg,#1a1a1a,#7f1d1d);color:#fff;border-radius:14px;}
.permit-title-l{font-size:14px;font-weight:700;opacity:.9;margin-bottom:6px;}
.permit-title-h{font-size:26px;font-weight:900;letter-spacing:-.5px;color:#fde68a;}
.permit-title-num{font-size:13px;color:#fcd34d;font-weight:800;margin-top:6px;}
.center-info{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;margin-bottom:16px;background:#f5f5f5;border-radius:11px;}
.center-info-l{font-size:13px;font-weight:900;color:#1a1a1a;}
.center-info-r{font-size:11.5px;color:#666;text-align:left;}
.field-row{display:flex;align-items:center;padding:10px 0;border-bottom:1px dashed #eee;}
.field-row:last-child{border-bottom:none;}
.field-label{flex:0 0 40%;font-size:12.5px;color:#666;font-weight:800;}
.field-value{flex:1;font-size:13px;font-weight:900;color:#1a1a1a;}
.amount-hero{background:linear-gradient(135deg,#9F7E1C,#C9A84C);color:#fff;padding:24px;border-radius:14px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 28px rgba(201,168,76,.35);}
.amount-hero-l{font-size:14px;font-weight:800;opacity:.95;margin-bottom:3px;}
.amount-hero-sub{font-size:11px;opacity:.85;}
.amount-hero-v{font-size:34px;font-weight:900;letter-spacing:-1px;}
.signatures{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:24px;}
.sig-box{padding:18px 14px;border:2px dashed #c4c4c4;border-radius:11px;text-align:center;}
.sig-box-l{font-size:11px;color:#666;font-weight:800;margin-bottom:30px;}
.sig-box-line{border-top:1.5px solid #1a1a1a;padding-top:5px;font-size:11px;color:#888;}
@media print{.print-bar{display:none;}body{padding:0;}.section,.amount-hero,.permit-title,.brand-bar{page-break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact;}}
.page{max-width:1100px;margin:0 auto;padding:14px;}
.print-bar{position:sticky;top:0;background:#1a1a1a;padding:10px;display:flex;gap:8px;justify-content:center;margin:-12mm -10mm 14px;z-index:10;}
.print-bar button{padding:9px 20px;background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;border:none;border-radius:8px;font-weight:800;cursor:pointer;font-family:inherit;}
.brand-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px;padding:12px 18px;background:linear-gradient(135deg,#fdf8eb,#faf3e0);border:1.5px solid #C9A84C;border-radius:12px;}
.brand-bar-logo{width:46px;height:46px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fef3c7,#C9A84C);border-radius:10px;overflow:hidden;}
.brand-bar-logo img{width:80%;height:80%;object-fit:contain;}
.brand-bar-title{font-size:15px;font-weight:900;color:#5A4520;}
.brand-bar-sub{font-size:10.5px;color:#7A6420;font-weight:700;}
.center-hdr{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;margin-bottom:14px;background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border-radius:13px;}
.cls-logo{width:50px;height:50px;background:#fff;border-radius:11px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.cls-logo img{width:100%;height:100%;object-fit:contain;}
.cls-name{font-size:15px;font-weight:900;color:#fff;}
.cls-sub{font-size:10.5px;color:#fecaca;margin-top:2px;}
.hdr-title{font-size:14px;font-weight:900;color:#fff;text-align:left;}
.hdr-date{font-size:11px;color:#fecaca;margin-top:3px;}
.hero{background:linear-gradient(135deg,#dc2626,#991b1b);color:#fff;padding:18px 22px;border-radius:14px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 28px rgba(220,38,38,.3);}
.hero-l{font-size:14px;font-weight:800;margin-bottom:5px;}
.hero-sub{font-size:11px;opacity:.85;}
.hero-v{font-size:32px;font-weight:900;letter-spacing:-1px;}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px;}
.kpi{padding:13px;background:#fafafa;border:1px solid #e5e5e5;border-radius:11px;text-align:center;}
.kpi-l{font-size:10.5px;color:#666;font-weight:700;margin-bottom:5px;}
.kpi-v{font-size:17px;font-weight:900;color:#1a1a1a;}
.sec{margin-bottom:14px;page-break-inside:avoid;}
.sec-h{padding:9px 14px;background:linear-gradient(135deg,#7f1d1d,#dc2626);color:#fff;border-radius:10px 10px 0 0;font-size:13px;font-weight:900;}
.sec-b{background:#fff;border:1.5px solid #e5e5e5;border-top:none;border-radius:0 0 12px 12px;padding:0;overflow:hidden;}
table{width:100%;border-collapse:collapse;}
th{background:linear-gradient(135deg,#fafafa,#f5f5f5);color:#555;padding:9px 12px;text-align:right;font-size:11px;font-weight:800;border-bottom:2px solid #e5e5e5;}
td{padding:9px 12px;border-bottom:1px solid #f0f0f0;font-size:11.5px;font-weight:700;color:#333;vertical-align:top;}
tr:nth-child(even) td{background:#fafafa;}
.footer{margin-top:24px;padding:14px;text-align:center;border-top:1.5px solid #ddd;font-size:10px;color:#999;}
.footer .o{font-weight:900;color:#5A4520;}
@media print{.print-bar{display:none;}body{padding:0;}.sec{page-break-inside:avoid;}.hero,th,.center-hdr,.sec-h,.brand-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact;}}
.permit-title{text-align:center;padding:24px;margin-bottom:20px;background:linear-gradient(135deg,#1a1a1a,#7f1d1d);color:#fff;border-radius:14px;}
.permit-title-l{font-size:14px;font-weight:700;opacity:.9;margin-bottom:6px;}
.permit-title-h{font-size:26px;font-weight:900;letter-spacing:-.5px;color:#fde68a;}
.permit-title-num{font-size:13px;color:#fcd34d;font-weight:800;margin-top:6px;}
.center-info{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;margin-bottom:16px;background:#f5f5f5;border-radius:11px;}
.center-info-l{font-size:13px;font-weight:900;color:#1a1a1a;}
.center-info-r{font-size:11.5px;color:#666;text-align:left;}
.field-row{display:flex;align-items:center;padding:10px 0;border-bottom:1px dashed #eee;}
.field-row:last-child{border-bottom:none;}
.field-label{flex:0 0 40%;font-size:12.5px;color:#666;font-weight:800;}
.field-value{flex:1;font-size:13px;font-weight:900;color:#1a1a1a;}
.amount-hero{background:linear-gradient(135deg,#9F7E1C,#C9A84C);color:#fff;padding:24px;border-radius:14px;margin-bottom:16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 12px 28px rgba(201,168,76,.35);}
.amount-hero-l{font-size:14px;font-weight:800;opacity:.95;margin-bottom:3px;}
.amount-hero-sub{font-size:11px;opacity:.85;}
.amount-hero-v{font-size:34px;font-weight:900;letter-spacing:-1px;}
.signatures{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-top:24px;}
.sig-box{padding:18px 14px;border:2px dashed #c4c4c4;border-radius:11px;text-align:center;}
.sig-box-l{font-size:11px;color:#666;font-weight:800;margin-bottom:30px;}
.sig-box-line{border-top:1.5px solid #1a1a1a;padding-top:5px;font-size:11px;color:#888;}
@media print{.print-bar{display:none;}body{padding:0;}.section,.amount-hero,.permit-title,.brand-bar{page-break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact;}}
*{box-sizing:border-box;margin:0;padding:0;}
@page{size:A4;margin:12mm 10mm;}
body{font-family:'Cairo','Tajawal','Segoe UI',Arial,sans-serif;color:#1a1a1a;background:#fff;line-height:1.6;}
.page{max-width:1100px;margin:0 auto;padding:18px;}
/* 🆕 REPORT BRAND BAR — Elegant system logo display at top */
.report-brand-bar{
display:flex;align-items:center;gap:14px;
margin-bottom:18px;
padding:12px 18px;
background:linear-gradient(135deg, #fdf8eb 0%, #faf3e0 50%, #fdf8eb 100%);
border:1.5px solid #C9A84C;
border-radius:14px;
position:relative;
overflow:hidden;
box-shadow:0 4px 14px rgba(201,168,76,.18), inset 0 1px 0 rgba(255,255,255,.5);
}
.report-brand-bar::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:3px;
background:linear-gradient(90deg, transparent, #C9A84C, #fbbf24, #C9A84C, transparent);
}
.report-brand-bar::after{
content:'';
position:absolute;
inset:0;
background:
radial-gradient(circle at 15% 50%, rgba(251,191,36,.08), transparent 40%),
radial-gradient(circle at 85% 50%, rgba(201,168,76,.06), transparent 40%);
pointer-events:none;
}
.rbb-logo{
width:60px;height:60px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg, #fbbf24 0%, #C9A84C 50%, #9F7E1C 100%);
border-radius:14px;
color:#fff;
flex-shrink:0;
box-shadow:
0 6px 16px rgba(201,168,76,.4),
inset 0 1.5px 0 rgba(255,255,255,.3),
inset 0 -1.5px 0 rgba(0,0,0,.15);
position:relative;
overflow:hidden;
}
.rbb-logo::before{
content:'';
position:absolute;
top:0;left:0;right:0;height:50%;
background:linear-gradient(180deg, rgba(255,255,255,.25), transparent);
pointer-events:none;
}
.rbb-logo img{
width:78%;
height:78%;
object-fit:contain;
display:block;
position:relative;
z-index:1;
filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
}
.rbb-logo svg{color:#fff;}
.rbb-text{flex:1;}
.rbb-system{
font-family:'Cairo','Tajawal',sans-serif;
font-size:18px;
font-weight:900;
color:#5A4520;
letter-spacing:-.3px;
background:linear-gradient(135deg, #5A4520 0%, #9F7E1C 50%, #5A4520 100%);
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
margin-bottom:2px;
line-height:1.2;
}
.rbb-tagline{
font-size:10.5px;
color:#9F7E1C;
font-weight:700;
letter-spacing:.2px;
opacity:.85;
}
.rbb-decor{
display:flex;align-items:center;gap:6px;
padding:6px 10px;
background:rgba(201,168,76,.12);
border:1px solid rgba(201,168,76,.3);
border-radius:10px;
position:relative;
}
.rbb-decor::before, .rbb-decor::after{
content:'';
width:5px;height:5px;
border-radius:50%;
background:linear-gradient(135deg,#fbbf24,#C9A84C);
box-shadow:0 1px 3px rgba(201,168,76,.4);
}
.rbb-decor::after{margin:0 2px;}
@media print{
.report-brand-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.rbb-logo{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.rbb-system{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
}
/* HEADER */
/* 🆕 هيدر موحّد احترافي */
.rpt-header{margin-bottom:24px;border:1.5px solid #E8DCC0;border-radius:18px;overflow:hidden;box-shadow:0 4px 16px rgba(201,168,76,.1);}
.rpt-header-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:linear-gradient(135deg,#fdfaf2 0%,#faf4e6 100%);}
.rpt-center{display:flex;align-items:center;gap:15px;}
.rpt-center-logo{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:32px;background:linear-gradient(135deg,#fbbf24,#C9A84C,#9F7E1C);color:#fff;flex-shrink:0;box-shadow:0 6px 16px rgba(201,168,76,.35),inset 0 1.5px 0 rgba(255,255,255,.3);overflow:hidden;}
.rpt-center-logo img{width:100%;height:100%;object-fit:cover;border-radius:16px;}
.rpt-center-name{font-size:20px;font-weight:900;color:#1a1a1a;letter-spacing:-.3px;}
.rpt-center-sub{font-size:12.5px;color:#7a6f55;font-weight:600;margin-top:3px;}
.rpt-center-vat{font-size:10.5px;color:#a39577;font-weight:600;margin-top:2px;}
.rpt-meta{text-align:left;flex-shrink:0;}
.rpt-title{font-size:16px;font-weight:900;color:#9F7E1C;}
.rpt-date{font-size:12px;color:#7a6f55;font-weight:700;margin-top:4px;}
.rpt-mode-badge{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:800;}
.rpt-mode-badge.is-op{background:rgba(245,158,11,.14);color:#b45309;border:1px solid rgba(245,158,11,.3);}
.rpt-mode-badge.is-full{background:rgba(16,185,129,.14);color:#047857;border:1px solid rgba(16,185,129,.3);}
.rpt-header-brand{padding:9px 24px;background:linear-gradient(90deg,#1a1505,#2a2008);color:#d4b86a;font-size:11px;font-weight:600;text-align:center;letter-spacing:.2px;}
.rpt-header-brand strong{color:#fbbf24;font-weight:800;}
.hdr{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:3px solid #C9A84C;margin-bottom:24px;}
.hdr-left{display:flex;align-items:center;gap:14px;}
.hdr-logo{width:60px;height:60px;background:linear-gradient(135deg,#C9A84C,#9F7E1C);border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:30px;color:#fff;box-shadow:0 4px 12px rgba(201,168,76,.3);}
.hdr-name{font-size:22px;font-weight:900;color:#0a0800;line-height:1.2;}
.hdr-sub{font-size:11px;color:#666;margin-top:3px;}
.hdr-right{text-align:left;}
.hdr-title{font-size:14px;color:#9F7E1C;font-weight:800;letter-spacing:.5px;}
.hdr-date{font-size:12px;color:#444;margin-top:3px;font-weight:600;}
.hdr-date-tag{font-size:10px;color:#888;margin-top:2px;}
/* KPI cards */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:22px;}
.kpi{background:linear-gradient(160deg,#ffffff,#f8f6f0);border:1px solid #ece5d4;border-right:4px solid;border-radius:14px;padding:14px 16px;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.kpi.green{border-right-color:#22C55E;}
.kpi.purple{border-right-color:#a855f7;}
.kpi.gold{border-right-color:#C9A84C;}
.kpi.red{border-right-color:#EF4444;}
.kpi.blue{border-right-color:#3B82F6;}
.kpi-l{font-size:10px;color:#777;font-weight:700;margin-bottom:4px;}
.kpi-v{font-family:'IBM Plex Mono','Roboto Mono',monospace;font-size:22px;font-weight:900;color:#0a0800;line-height:1;letter-spacing:-1px;}
.kpi-u{font-size:10px;color:#888;margin-top:3px;}
/* Net profit hero */
.hero{background:linear-gradient(135deg,#9F7E1C,#C9A84C);color:#fff;border-radius:14px;padding:18px 24px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 6px 20px rgba(201,168,76,.25);}
.hero-l{font-size:13px;font-weight:700;opacity:.9;letter-spacing:.5px;}
.hero-v{font-family:'IBM Plex Mono','Roboto Mono',monospace;font-size:32px;font-weight:900;letter-spacing:-1px;}
.hero-sub{font-size:11px;opacity:.85;margin-top:3px;}
/* Section headings */
.sec{margin-bottom:22px;break-inside:avoid;page-break-inside:avoid;}
/* 🆕 تقسيم ذكي: الأقسام الكبيرة تبدأ صفحة جديدة */
.sec-page{break-before:page;page-break-before:always;}
/* الجداول الطويلة: السماح بالتقسيم لكن مع تكرار الرأس */
.sec-long{break-inside:auto;page-break-inside:auto;}
.sec-long thead{display:table-header-group;}
.sec-long tr{break-inside:avoid;page-break-inside:avoid;}
/* منع يُتم الصفوف */
table{break-inside:auto;}
thead{display:table-header-group;}
tfoot{display:table-footer-group;}
tr{break-inside:avoid;page-break-inside:avoid;}
/* عناوين الأقسام لا تنفصل عن محتواها */
.sec-h{break-after:avoid;page-break-after:avoid;}
@media print{
.print-bar{display:none !important;}
.sec{margin-bottom:18px;}
}
.sec-h{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:8px;border-bottom:2px solid #e5e5e5;}
.sec-h-ico{width:28px;height:28px;background:#9F7E1C;color:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.sec-h-name{font-size:14px;font-weight:800;color:#0a0800;}
/* Tables */
table{width:100%;border-collapse:collapse;font-size:11px;}
th{background:linear-gradient(135deg,#0a0800,#2d2100);color:#C9A84C;padding:9px 8px;text-align:right;font-weight:700;font-size:11px;border:1px solid #1a1200;}
td{padding:8px;text-align:right;border:1px solid #e5e5e5;color:#222;}
tr:nth-child(even) td{background:#fafafa;}
td.amt{font-family:'IBM Plex Mono','Roboto Mono',monospace;font-weight:800;color:#9F7E1C;text-align:left;direction:ltr;}
.bd-paid{background:#dcfce7;color:#15803d;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
.bd-unp{background:#fee2e2;color:#991b1b;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
.bd-ref{background:#f3e8ff;color:#7c3aed;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
.bd-partial{background:#fef3c7;color:#b45309;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:800;}
/* Two-column tables */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
/* Footer */
.foot{margin-top:30px;padding-top:14px;border-top:2px solid #C9A84C;text-align:center;font-size:10px;color:#888;line-height:1.8;}
.foot strong{color:#9F7E1C;}
/* 🆕 Powered-by strip (admin branding badge) */
/* 🆕✨ LUXURY POWERED-BY STRIP — more prominent with logo showcase */
.powered-by-strip{
display:flex;align-items:center;justify-content:center;gap:11px;
padding:11px 18px;
margin-bottom:14px;
background:
radial-gradient(ellipse at center, rgba(201,168,76,.08) 0%, rgba(201,168,76,.02) 70%),
linear-gradient(135deg, rgba(159,126,28,.06) 0%, rgba(159,126,28,.01) 100%);
border:1px solid rgba(159,126,28,.28);
border-radius:12px;
font-size:11px;
color:#5A4520;
font-weight:700;
letter-spacing:.3px;
position:relative;
overflow:hidden;
}
/* Subtle gold shine line at top of strip */
.powered-by-strip::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:1.5px;
background:linear-gradient(90deg, transparent 0%, rgba(201,168,76,.6) 50%, transparent 100%);
}
/* Inner decorative dot */
.powered-by-strip::after{
content:'';
position:absolute;
width:4px;height:4px;
background:linear-gradient(135deg,#fbbf24,#C9A84C);
border-radius:50%;
box-shadow:0 0 8px rgba(201,168,76,.5);
right:14px;top:50%;transform:translateY(-50%);
}
.pbs-logo{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;
background:linear-gradient(135deg,#fef3c7,#fde68a 50%,#C9A84C);
border-radius:8px;
color:#5A4520;
flex-shrink:0;
overflow:hidden;
box-shadow:
0 4px 10px rgba(201,168,76,.35),
inset 0 1px 0 rgba(255,255,255,.6),
inset 0 -1px 0 rgba(0,0,0,.1);
border:1px solid rgba(201,168,76,.45);
position:relative;
}
.pbs-logo img{
width:80%;height:80%;
object-fit:contain;
display:block;
margin:auto;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.15));
}
.pbs-text{
display:inline-flex;align-items:center;gap:7px;
font-size:11.5px;
font-weight:800;
color:#7A6420;
}
.pbs-sep{
opacity:.5;
font-weight:900;
}
.pbs-owner{
color:#5A4520;
font-weight:900;
letter-spacing:-.1px;
}
/* 🆕 Expense mode badge in header */
.exp-mode-badge{
display:inline-flex;align-items:center;justify-content:center;
margin-top:8px;
padding:5px 11px;
border-radius:9px;
font-size:10.5px;
font-weight:900;
letter-spacing:.3px;
border:1.5px solid;
}
.exp-mode-badge.mode-operational{
background:linear-gradient(135deg,#FEF3C7,#FDE68A);
color:#92400E;
border-color:#F59E0B;
}
.exp-mode-badge.mode-full{
background:linear-gradient(135deg,#DBEAFE,#BFDBFE);
color:#1E40AF;
border-color:#3B82F6;
}
/* 🆕 Expense mode explanation card */
.exp-mode-card{
display:grid;
grid-template-columns:auto 1fr auto;
gap:14px;
align-items:center;
padding:14px 18px;
margin-bottom:14px;
border-radius:14px;
border:1.5px solid;
position:relative;
overflow:hidden;
}
.exp-mode-card.is-op{
background:linear-gradient(155deg, rgba(245,158,11,.08), rgba(245,158,11,.02));
border-color:rgba(245,158,11,.35);
}
.exp-mode-card.is-full{
background:linear-gradient(155deg, rgba(59,130,246,.08), rgba(59,130,246,.02));
border-color:rgba(59,130,246,.35);
}
.exp-mode-card::before{
content:'';
position:absolute;
top:0;left:0;right:0;
height:2px;
background:linear-gradient(90deg,transparent,currentColor,transparent);
opacity:.4;
}
.exp-mode-card.is-op{color:#92400E;}
.exp-mode-card.is-full{color:#1E40AF;}
.emc-icon{
font-size:30px;
flex-shrink:0;
line-height:1;
}
.emc-content{flex:1;min-width:0;}
.emc-title{
font-size:13.5px;
font-weight:800;
margin-bottom:5px;
letter-spacing:-.2px;
}
.emc-title strong{
font-weight:900;
padding:1px 6px;
border-radius:5px;
}
.exp-mode-card.is-op .emc-title strong{background:rgba(245,158,11,.18);}
.exp-mode-card.is-full .emc-title strong{background:rgba(59,130,246,.18);}
.emc-desc{
font-size:11px;
color:#555;
font-weight:600;
line-height:1.65;
letter-spacing:.1px;
}
.emc-desc strong{font-weight:900;color:#222;}
.emc-formula{
flex-shrink:0;
background:rgba(255,255,255,.55);
border:1px solid currentColor;
border-radius:10px;
padding:8px 12px;
text-align:center;
min-width:140px;
}
.emc-formula-lbl{
font-size:9px;
font-weight:800;
opacity:.65;
letter-spacing:.6px;
margin-bottom:3px;
}
.emc-formula-val{
font-size:10.5px;
font-weight:900;
letter-spacing:-.1px;
}
@media(max-width:700px){
.exp-mode-card{
grid-template-columns:auto 1fr;
}
.emc-formula{
grid-column:1/-1;
margin-top:6px;
}
}
/* Print button */
.print-bar{position:fixed;top:10px;left:10px;display:flex;gap:8px;z-index:9999;}
.print-bar button{padding:10px 18px;background:#9F7E1C;color:#fff;border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2);}
.print-bar button.close{background:#666;}
@media print{
.print-bar{display:none;}
body{padding:0;}
.sec{page-break-inside:avoid;}
.hero{background:linear-gradient(135deg,#9F7E1C,#C9A84C) !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
th{background:linear-gradient(135deg,#0a0800,#2d2100) !important;color:#C9A84C !important;-webkit-print-color-adjust:exact;print-color-adjust:exact;}
.exp-mode-badge, .exp-mode-card, .powered-by-strip{
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}
.exp-mode-card{page-break-inside:avoid;}
}
.rpt-cover-page{width:100%;text-align:center;break-after:page;page-break-after:always;margin:0;padding:0;line-height:0;}
.rpt-cover-img{max-width:100%;max-height:92vh;width:auto;height:auto;display:block;margin:0 auto;}
.rpt-cover-frame{width:100%;height:92vh;border:none;display:block;}
@media print{
.rpt-cover-page{break-after:page;page-break-after:always;margin:0;padding:0;}
.rpt-cover-img{max-height:96vh;}
}
${window._pdfFmtCSS ? window._pdfFmtCSS() : ''}
/* qry-hero: منع التمدّد + ارتفاع حسب المحتوى */
.qry-hero{padding:13px 20px !important;margin:0 0 12px !important;flex:0 0 auto !important;align-self:stretch !important;min-height:0 !important;height:auto !important;max-height:108px !important;overflow:hidden !important;}
.qry-hero-content{min-height:0 !important;height:auto !important;}
/* insp-hero (عمليات الفحص): نفس ضبط الارتفاع */
.insp-hero{padding:13px 20px !important;margin:0 0 12px !important;flex:0 0 auto !important;align-self:stretch !important;min-height:0 !important;height:auto !important;max-height:108px !important;overflow:hidden !important;}
.insp-hero-content{min-height:0 !important;height:auto !important;}
.insp-hero-ico{width:48px !important;height:48px !important;}
.qry-hero-ico{width:48px !important;height:48px !important;}
@media(max-width:520px){.qry-hero{padding:11px 14px !important;}.qry-hero-ico{width:42px !important;height:42px !important;}}
/* ════════ 🆕 العملاء: عرض شبكة منظّم + عرض قائمة (مُحصّن) ════════ */
.cust-viewbar{display:flex;justify-content:flex-end;gap:5px;margin:8px 2px 2px;}
.cust-vtb{width:34px;height:32px;border-radius:9px;border:1px solid var(--bdr,rgba(255,255,255,.08));background:rgba(255,255,255,.04);color:var(--t3,#94a3b8);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s;}
.cust-vtb:hover{color:var(--t1,#f4f0e6);background:rgba(255,255,255,.08);}
.cust-vtb.on{background:rgba(96,165,250,.18);border-color:rgba(96,165,250,.42);color:#60A5FA;}
/* الحاويات: شبكة فقط لغير القائمة، وعمود مرن للقائمة */
#cust-list .cust-list:not(.as-list){display:grid !important;grid-template-columns:repeat(auto-fill,minmax(290px,1fr)) !important;gap:14px !important;align-items:start;padding:8px 2px 4px;}
#cust-list .cust-list.as-list{display:flex !important;flex-direction:column !important;gap:9px !important;padding:8px 2px 4px;}
/* هيكل البطاقة */
#cust-list .cust-card{display:flex !important;flex-direction:column !important;gap:0 !important;padding:0 !important;overflow:hidden;}
#cust-list .cust-card .cc-top{display:flex;align-items:center;gap:12px;padding:16px 16px 13px;}
#cust-list .cust-card .cust-avatar{width:54px !important;height:54px !important;border-radius:15px !important;font-size:22px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
#cust-list .cust-card .cust-avatar img{width:100%;height:100%;object-fit:cover;}
#cust-list .cust-card .cc-id{min-width:0;flex:1;}
#cust-list .cust-card .cust-name{font-size:15.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cust-list .cust-card .cust-badges-row{margin-top:6px;display:flex;flex-wrap:wrap;gap:5px;}
#cust-list .cust-card .cc-contact{display:flex;flex-direction:column;gap:7px;padding:12px 16px;border-top:1px solid var(--bdr,rgba(255,255,255,.06));}
#cust-list .cust-card .cc-line{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--t2,#c8bfa8);min-width:0;}
#cust-list .cust-card .cc-chips{display:flex;flex-wrap:wrap;gap:6px;}
#cust-list .cust-card .cc-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--t2,#c8bfa8);background:rgba(255,255,255,.04);border:1px solid var(--bdr,rgba(255,255,255,.06));border-radius:8px;padding:4px 9px;}
/* شريط الإحصاءات (صفّ بطاقات) */
#cust-list .cust-card .cust-ribbon{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;width:auto !important;gap:8px !important;padding:12px 16px !important;border-top:1px solid var(--bdr,rgba(255,255,255,.06)) !important;margin:0 !important;}
#cust-list .cust-card .cust-stat{flex:1 1 0 !important;min-width:0 !important;flex-direction:column !important;align-items:center !important;gap:3px !important;padding:9px 6px !important;background:rgba(255,255,255,.03) !important;border:1px solid var(--bdr,rgba(255,255,255,.05)) !important;border-radius:11px !important;}
#cust-list .cust-card .cust-stat-lbl{font-size:9.5px;color:var(--t3,#94a3b8);font-weight:700;}
#cust-list .cust-card .cust-stat-val{font-size:14px;font-weight:800;color:var(--t1,#f4f0e6);}
/* الإجراءات (صفّ أفقي دائمًا) */
#cust-list .cust-card .cust-actions{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;gap:7px !important;width:auto !important;padding:12px 16px !important;border-top:1px solid var(--bdr,rgba(255,255,255,.06)) !important;margin:0 !important;}
#cust-list .cust-card .cust-act{flex:1 1 0 !important;width:auto !important;height:34px !important;}
#cust-list .cust-card .cust-debt-strip{margin:0 !important;border-top:1px solid var(--bdr,rgba(255,255,255,.06));border-radius:0;}
/* ===== عرض القائمة (صفوف نظيفة مرتّبة) ===== */
#cust-list .cust-list.as-list .cust-card{display:grid !important;grid-template-columns:220px minmax(0,1fr) minmax(0,1.5fr) 196px !important;align-items:center !important;gap:14px !important;padding:10px 16px !important;min-height:66px;}
#cust-list .cust-list.as-list .cust-card .cc-top{padding:0 !important;gap:10px;min-width:0;}
#cust-list .cust-list.as-list .cust-card .cust-avatar{width:42px !important;height:42px !important;border-radius:11px !important;font-size:16px;}
#cust-list .cust-list.as-list .cust-card .cust-name{font-size:13.5px;}
#cust-list .cust-list.as-list .cust-card .cust-badges-row{margin-top:3px;}
#cust-list .cust-list.as-list .cust-card .cc-contact{border:0 !important;padding:0 !important;flex-direction:column !important;gap:4px !important;align-items:flex-start;min-width:0;}
#cust-list .cust-list.as-list .cust-card .cc-line{font-size:12px;}
#cust-list .cust-list.as-list .cust-card .cc-chip{padding:3px 8px;font-size:10.5px;}
#cust-list .cust-list.as-list .cust-card .cust-ribbon{border:0 !important;padding:0 !important;gap:7px !important;flex-wrap:nowrap !important;overflow:hidden;justify-content:flex-start;}
#cust-list .cust-list.as-list .cust-card .cust-stat{flex:0 0 auto !important;flex-direction:row !important;align-items:center !important;gap:5px !important;padding:5px 10px !important;background:rgba(255,255,255,.04) !important;border:1px solid var(--bdr,rgba(255,255,255,.06)) !important;border-radius:9px !important;}
#cust-list .cust-list.as-list .cust-card .cust-stat-lbl{display:inline !important;font-size:9.5px;color:var(--t3,#94a3b8);font-weight:700;}
#cust-list .cust-list.as-list .cust-card .cust-stat-val{font-size:12.5px;}
#cust-list .cust-list.as-list .cust-card .cust-actions{border:0 !important;padding:0 !important;gap:7px !important;width:auto !important;justify-content:flex-start;}
#cust-list .cust-list.as-list .cust-card .cust-act{flex:0 0 auto !important;width:32px !important;height:32px !important;}
#cust-list .cust-list.as-list .cust-card .cust-debt-strip{grid-column:1 / -1;border:0 !important;margin-top:6px !important;}
@media(max-width:860px){
#cust-list .cust-list.as-list .cust-card{grid-template-columns:auto 1fr !important;gap:9px 12px !important;}
#cust-list .cust-list.as-list .cust-card .cc-contact{grid-column:1 / -1;flex-direction:row !important;flex-wrap:wrap;}
#cust-list .cust-list.as-list .cust-card .cust-ribbon{grid-column:1 / -1;}
#cust-list .cust-list.as-list .cust-card .cust-actions{grid-column:1 / -1;justify-content:flex-start;}
}
/* ════════ 🆕 قائمة العملاء — جدول احترافي متحاذٍ ════════ */
#cust-list .cl-table{display:flex;flex-direction:column;border:1px solid var(--bdr,rgba(255,255,255,.08));border-radius:14px;overflow:hidden;background:rgba(255,255,255,.015);margin-top:6px;}
#cust-list .cl-head,
#cust-list .cl-row{display:grid;grid-template-columns:minmax(180px,1.5fr) minmax(140px,1fr) minmax(120px,1fr) 78px 120px 196px;align-items:center;gap:12px;padding:11px 16px;}
#cust-list .cl-head{background:rgba(255,255,255,.045);border-bottom:1px solid var(--bdr,rgba(255,255,255,.08));font-size:11px;font-weight:800;color:var(--t3,#94a3b8);}
#cust-list .cl-row{border-bottom:1px solid rgba(255,255,255,.05);transition:background .16s;animation:bkCardIn .25s ease both;}
#cust-list .cl-row:hover{background:rgba(255,255,255,.045);}
#cust-list .cl-row:last-child{border-bottom:0;}
#cust-list .cl-c{min-width:0;}
#cust-list .cl-cust{display:flex;align-items:center;gap:11px;}
#cust-list .cl-cust .cust-avatar{width:40px !important;height:40px !important;border-radius:11px !important;font-size:15px;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
#cust-list .cl-cust .cust-avatar img{width:100%;height:100%;object-fit:cover;}
#cust-list .cl-id{min-width:0;}
#cust-list .cl-name{font-size:13.5px;font-weight:800;color:var(--t1,#f4f0e6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cust-list .cl-badges{display:flex;gap:5px;margin-top:3px;flex-wrap:wrap;}
#cust-list .cl-contact .cl-phone{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--t2,#c8bfa8);}
#cust-list .cl-vehicle{font-size:12px;color:var(--t2,#c8bfa8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#cust-list .cl-muted{color:var(--t4,#64748b);}
#cust-list .cl-num{display:flex;flex-direction:column;gap:1px;align-items:flex-start;}
#cust-list .cl-num-v{font-size:14px;font-weight:800;color:var(--t1,#f4f0e6);}
#cust-list .cl-num-v.cl-money{color:var(--gold,#c9a84c);}
#cust-list .cl-num-l{font-size:9.5px;color:var(--t3,#94a3b8);font-weight:700;}
#cust-list .cl-acts{display:flex;gap:6px;justify-content:flex-start;}
#cust-list .cl-acts .cust-act{width:32px !important;height:32px !important;flex:0 0 auto !important;}
#cust-list .cl-debt{grid-column:1 / -1;margin-top:8px;}
@media(max-width:900px){
#cust-list .cl-head{display:none;}
#cust-list .cl-row{grid-template-columns:1fr 1fr;gap:9px 12px;padding:13px 14px;}
#cust-list .cl-cust{grid-column:1 / -1;}
#cust-list .cl-acts{grid-column:1 / -1;justify-content:flex-start;}
}
@media(max-width:480px){
#cust-list .cl-row{grid-template-columns:1fr;}
}
/* ═══════════ 🆕 منتقي شهر الأرشيف (v403) ═══════════ */
.arch-month-bar{ margin:4px 0 14px; }
.arch-month-picker-btn{
display:inline-flex;align-items:center;gap:10px;
padding:11px 20px;border-radius:14px;cursor:pointer;font-family:inherit;
background:linear-gradient(135deg, rgba(201,168,76,.14), rgba(201,168,76,.06));
border:1.5px solid rgba(201,168,76,.35);
color:var(--t1,#f5f5f5);font-size:14px;font-weight:800;transition:all .2s ease;
}
.arch-month-picker-btn:hover{
border-color:#C9A84C;background:linear-gradient(135deg, rgba(201,168,76,.22), rgba(201,168,76,.10));
transform:translateY(-1px);box-shadow:0 6px 18px rgba(201,168,76,.2);
}
.arch-month-picker-btn .ampb-ico{font-size:16px;}
.arch-month-picker-btn .ampb-caret{font-size:11px;opacity:.7;margin-right:2px;}
/* 🆕 تحسين استجابة قائمة الهيدر للنقر (v403) */
#cprof .cp-nav a{ position:relative; z-index:2; -webkit-tap-highlight-color:rgba(201,168,76,.2); user-select:none; touch-action:manipulation; }
#cprof .cp-nav{ position:relative; z-index:5; }
/* 🆕 إصلاح استجابة قائمة الهيدر على الموبايل (v404) — منع تفسير النقر كتمرير */
#cprof .cp-nav a{ cursor:pointer; -webkit-tap-highlight-color:rgba(201,168,76,.25); touch-action:manipulation; scroll-snap-align:none; flex:0 0 auto; }
@media(max-width:640px){
#cprof .cp-nav{ scroll-snap-type:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
#cprof .cp-nav a{ padding:10px 16px; min-height:40px; display:inline-flex; align-items:center; }
}
/* ═══════════════════════════════════════════════════════════
تبويب المصروفات — تصميم جديد (دفتر المصروفات)
═══════════════════════════════════════════════════════════ */
.expn-header{margin-bottom:18px;}
.expn-header-row{display:flex;align-items:baseline;gap:14px;margin-bottom:16px;flex-wrap:wrap;}
.expn-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--g1);text-transform:uppercase;}
.expn-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--g1);box-shadow:0 0 0 4px rgba(201,168,76,.14);}
.expn-title{font-size:26px;font-weight:900;color:var(--t1);letter-spacing:-.5px;line-height:1;}
/* شبكة البطاقات */
.expn-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:860px){.expn-stats{grid-template-columns:repeat(2,1fr);}}
@media(max-width:430px){.expn-stats{grid-template-columns:repeat(2,1fr);gap:9px;}}
.expn-stat{position:relative;display:flex;align-items:flex-start;gap:12px;padding:16px 16px 15px;background:var(--d2);border:1px solid var(--bdr);border-radius:18px;overflow:hidden;transition:transform .18s ease,border-color .18s ease;}
.expn-stat::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--accent,#C9A84C);opacity:.9;}
.expn-stat:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent,#C9A84C) 40%,transparent);}
.expn-stat-ic{flex-shrink:0;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:color-mix(in srgb,var(--accent,#C9A84C) 14%,transparent);color:var(--accent,#C9A84C);}
.expn-stat-body{min-width:0;flex:1;}
.expn-stat-lbl{font-size:11.5px;font-weight:700;color:var(--t2);margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.expn-stat-val{font-size:21px;font-weight:900;color:var(--t1);line-height:1;letter-spacing:-.5px;display:flex;align-items:baseline;gap:3px;font-feature-settings:"tnum";}
.expn-cur{font-size:12px;font-weight:700;color:var(--t3);}
.expn-stat-meta{font-size:10.5px;font-weight:700;color:var(--t3);margin-top:6px;}
.expn-stat--total{--accent:#C9A84C;}
.expn-stat--cash{--accent:#34d399;}
.expn-stat--bank{--accent:#60A5FA;}
.expn-stat--avg{--accent:#c084fc;}
/* لوحة التسجيل */
.expn-form{background:var(--d2);border:1px solid var(--bdr);border-radius:20px;overflow:hidden;margin-bottom:18px;}
.expn-form-head{display:flex;align-items:center;gap:13px;padding:16px 18px;background:linear-gradient(100deg,color-mix(in srgb,var(--g1) 12%,transparent),transparent 65%);border-bottom:1px solid var(--bdr);}
.expn-form-head-ic{flex-shrink:0;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:20px;font-weight:900;background:var(--g1);color:#241c00;line-height:1;}
.expn-form-head-title{font-size:15.5px;font-weight:900;color:var(--t1);}
.expn-form-head-sub{font-size:11.5px;font-weight:600;color:var(--t2);margin-top:2px;}
.expn-form-body{padding:18px;}
.expn-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:15px;}
.expn-field--wide{grid-column:1 / -1;}
@media(max-width:560px){.expn-form-grid{grid-template-columns:1fr;}}
.expn-field{display:flex;flex-direction:column;gap:6px;}
.expn-field label{font-size:12px;font-weight:800;color:var(--t2);}
.expn-field input,.expn-field select{width:100%;padding:11px 13px;background:var(--d4);border:1px solid var(--bdr);color:var(--t1);border-radius:11px;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box;}
.expn-field input:focus,.expn-field select:focus{border-color:var(--g1);box-shadow:0 0 0 3px rgba(201,168,76,.13);}
.expn-field input::placeholder{color:var(--t3);}
/* وسائل السداد */
.expn-pays{background:var(--d4);border:1px solid var(--bdr);border-radius:14px;padding:13px;margin-bottom:15px;}
.expn-pays-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.expn-pays-title{font-size:12.5px;font-weight:800;color:var(--t1);}
.expn-add-pay{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:color-mix(in srgb,var(--g1) 15%,transparent);border:1px solid color-mix(in srgb,var(--g1) 30%,transparent);color:var(--g1);border-radius:9px;font-family:inherit;font-size:11.5px;font-weight:800;cursor:pointer;transition:background .15s ease;}
.expn-add-pay:hover{background:color-mix(in srgb,var(--g1) 25%,transparent);}
.expn-pays-list{display:flex;flex-direction:column;gap:9px;}
.expn-match{margin-top:12px;padding-top:12px;border-top:1px dashed var(--bdr);}
.expn-match-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--t2);}
.expn-match-top b{color:var(--t1);font-size:13.5px;font-weight:900;}
.expn-match-bar{height:6px;background:var(--d1);border-radius:99px;overflow:hidden;margin:9px 0 7px;}
.expn-match-fill{height:100%;width:0;background:linear-gradient(90deg,var(--g1),#34d399);border-radius:99px;transition:width .25s ease;}
.expn-match-status{font-size:11px;font-weight:700;color:var(--t3);}
.expn-match-split{font-size:11px;font-weight:700;color:var(--t2);margin-top:6px;display:flex;flex-wrap:wrap;gap:6px;}
/* زر الإضافة */
.expn-submit{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px;background:linear-gradient(135deg,var(--g1),var(--g2));border:none;border-radius:13px;color:#241c00;font-family:inherit;font-size:14.5px;font-weight:900;cursor:pointer;box-shadow:0 8px 22px rgba(201,168,76,.28);transition:transform .15s ease,box-shadow .15s ease;}
.expn-submit:hover{transform:translateY(-1px);box-shadow:0 11px 28px rgba(201,168,76,.36);}
.expn-submit:active{transform:translateY(0);}
/* صفّ وسيلة سداد (يُبنى من JS — نطابق أنماط exp2 القديمة) */
.expn-pays-list .exp2-pay-row{display:flex;align-items:center;gap:8px;}