@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700;800;900&display=swap');
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Heebo',sans-serif;direction:rtl;font-size:16.5px;overflow:hidden;transition:background .5s,color .5s}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:6px}
input,select,textarea,button{font-family:'Heebo',sans-serif;direction:rtl;font-size:16px}
button,[onclick],[role="button"],.btn,.filter-btn,.pill,.list-item,.task-list-card,.theme-toggle,.nav-item,.tab-btn,.cv-file-tab,a[href]{cursor:pointer!important}
button *,[onclick] *,[role="button"] *,.btn *,.list-item *,.task-list-card *,.tab-btn *,.cv-file-tab *,a[href] *{cursor:pointer!important}
input:not([type=button]):not([type=submit]):not([type=reset]):not([type=checkbox]):not([type=radio]):not([type=file]),textarea,.modal-body input,.modal-body textarea{cursor:text!important}
select,.modal-body select{cursor:default!important}
.hidden{display:none!important}

/* ═══════════════════════════════════════════════
   LIGHT MODE (Default) - Cohen Partners CRM
   ═══════════════════════════════════════════════ */
:root{
  --bg-primary:#f4f6f9;
  --bg-secondary:#f4f6f9;
  --bg-card:rgba(255,255,255,0.96);
  --bg-card-hover:rgba(255,255,255,0.99);
  --bg-card-solid:#fefeff;
  --bg-input:rgba(238,241,247,0.92);
  --bg-glass:rgba(238,241,247,0.88);
  --bg-navbar:rgba(244,246,249,0.98);
  --bg-sidebar:rgba(244,246,249,0.95);
  --border:rgba(0,0,0,0.12);
  --border-light:rgba(0,0,0,0.08);
  --border-hover:rgba(0,0,0,0.22);
  --text:#1d1d1f;
  --text-secondary:#555;
  --text-muted:rgba(0,0,0,0.35);
  --accent:#1a1a2e;
  --accent-light:#2d3f63;
  --accent-glow:rgba(26,26,46,0.1);
  --accent-glow-strong:rgba(26,26,46,0.18);
  --success:#0d8f60;
  --success-glow:rgba(13,143,96,0.12);
  --warning:#d4850a;
  --warning-glow:rgba(212,133,10,0.12);
  --danger:#dc2626;
  --danger-glow:rgba(220,38,38,0.1);
  --purple:#c8a44e;
  --purple-glow:rgba(200,164,78,0.1);
  --teal:#b8923e;
  --teal-glow:rgba(184,146,62,0.1);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.07);
  --shadow:0 8px 32px rgba(0,0,0,0.09);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.14);
  --shadow-card:0 4px 24px rgba(0,0,0,0.08),0 1px 4px rgba(0,0,0,0.05);
  --shadow-card-hover:0 12px 40px rgba(0,0,0,0.14),0 4px 12px rgba(0,0,0,0.07);
  --glass-blur:blur(40px);
  --glass-blur-sm:blur(20px);
  --radius:10px;
  --radius-sm:8px;
  --radius-xs:6px;
  --scroll-thumb:rgba(200,164,78,0.25);
  --transition:all .35s cubic-bezier(.4,0,.2,1);
  --transition-fast:all .2s cubic-bezier(.4,0,.2,1);
  --neon-accent:rgba(26,26,46,0.25);
  --neon-purple:rgba(200,164,78,0.3);
  --neon-teal:rgba(184,146,62,0.2);
  --neon-glow:0 4px 16px rgba(0,0,0,0.08);
  --neon-glow-strong:0 6px 24px rgba(0,0,0,0.1);
  --neon-border:1px solid rgba(200,164,78,0.15);
  --inline-bg:#eef1f6;
  --inline-bg-deep:#e8ebf1;
  --inline-border:#c8cdd6;
  --inline-border-hover:#adb3be;
  --inline-text:#1d1d1f;
  --inline-text-secondary:#555;
  --inline-text-muted:#6b7080;
  color-scheme:light;
}
html{background:var(--bg-primary);color:var(--text)}

/* ═══════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════ */
html.dark{
  --bg-primary:#0c0c16;
  --bg-secondary:#11111e;
  --bg-card:rgba(18,18,30,0.7);
  --bg-card-hover:rgba(22,22,38,0.85);
  --bg-card-solid:#13132a;
  --bg-input:rgba(255,255,255,0.04);
  --bg-glass:rgba(18,18,30,0.55);
  --bg-navbar:rgba(12,12,22,0.85);
  --bg-sidebar:rgba(16,16,28,0.6);
  --border:rgba(255,255,255,0.06);
  --border-light:rgba(255,255,255,0.04);
  --border-hover:rgba(255,255,255,0.12);
  --text:#e6edf3;
  --text-secondary:rgba(255,255,255,0.5);
  --text-muted:rgba(255,255,255,0.2);
  --accent:#d4b86a;
  --accent-light:#e0c87a;
  --accent-glow:rgba(212,184,106,0.1);
  --accent-glow-strong:rgba(212,184,106,0.2);
  --success:#10b981;
  --success-glow:rgba(16,185,129,0.1);
  --warning:#f59e0b;
  --warning-glow:rgba(245,158,11,0.1);
  --danger:#ef4444;
  --danger-glow:rgba(239,68,68,0.1);
  --purple:#2d3f63;
  --purple-glow:rgba(45,63,99,0.15);
  --teal:#c8a44e;
  --teal-glow:rgba(200,164,78,0.1);
  --shadow-sm:0 2px 8px rgba(0,0,0,0.2);
  --shadow:0 8px 32px rgba(0,0,0,0.4);
  --shadow-lg:0 20px 60px rgba(0,0,0,0.5);
  --shadow-card:0 4px 24px rgba(0,0,0,0.2);
  --shadow-card-hover:0 12px 40px rgba(0,0,0,0.3);
  --scroll-thumb:rgba(212,184,106,0.12);
  --neon-accent:rgba(212,184,106,0.35);
  --neon-purple:rgba(45,63,99,0.3);
  --neon-teal:rgba(200,164,78,0.25);
  --neon-glow:0 4px 16px rgba(0,0,0,0.18);
  --neon-glow-strong:0 6px 24px rgba(0,0,0,0.22);
  --neon-border:1px solid rgba(212,184,106,0.15);
  --inline-bg:#0d0d19;
  --inline-bg-deep:#121220;
  --inline-border:#2a2a40;
  --inline-border-hover:#3d3d55;
  --inline-text:#e6edf3;
  --inline-text-secondary:#8b949e;
  --inline-text-muted:#484f58;
  color-scheme:dark;
  background:#0c0c16;color:#e6edf3;
}

/* ═══ ANIMATED BACKGROUND ═══ */
body::before{
  content:'';position:fixed;inset:0;z-index:-2;
  background:var(--bg-primary);
  transition:background .5s;
}
/* Light mode: warm cream background */
html:not(.dark) body::before{
  background:var(--bg-primary);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 900px 700px at 15% 25%,rgba(200,164,78,0.07) 0%,transparent 60%),
    radial-gradient(ellipse 700px 600px at 85% 75%,rgba(26,26,46,0.05) 0%,transparent 60%),
    radial-gradient(ellipse 600px 500px at 55% 15%,rgba(184,146,62,0.04) 0%,transparent 60%);
  pointer-events:none;
}
html.dark body::after{
  background:
    radial-gradient(ellipse 800px 600px at 20% 20%,rgba(212,184,106,0.05) 0%,transparent 60%),
    radial-gradient(ellipse 600px 500px at 80% 80%,rgba(45,63,99,0.04) 0%,transparent 60%),
    radial-gradient(ellipse 500px 400px at 60% 30%,rgba(200,164,78,0.03) 0%,transparent 60%);
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes glow{0%,100%{box-shadow:0 0 20px var(--accent-glow)}50%{box-shadow:0 0 40px var(--accent-glow-strong)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes countUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes cardEnter{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}

.animate-in{animation:cardEnter .5s cubic-bezier(.22,1,.36,1) both}
.animate-in-delay-1{animation-delay:.06s}
.animate-in-delay-2{animation-delay:.12s}
.animate-in-delay-3{animation-delay:.18s}
.animate-in-delay-4{animation-delay:.24s}
.animate-in-delay-5{animation-delay:.3s}

/* ═══ LOGIN ═══ */
#login-screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9000;
  background:#1a1a2e;overflow-y:auto;padding:24px 0}
.login-brand-logo{width:auto;height:140px;margin-bottom:32px;border-radius:14px;filter:drop-shadow(0 4px 16px rgba(0,0,0,0.3))}
html.dark #login-screen{background:#0c0c16}
#login-screen::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 800px 600px at 30% 20%,rgba(200,164,78,0.12) 0%,transparent 60%),
    radial-gradient(ellipse 600px 500px at 70% 80%,rgba(200,164,78,0.08) 0%,transparent 60%)}
.login-box{background:rgba(255,253,248,0.97);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid rgba(200,164,78,0.25);border-top:3px solid #c8a44e;border-radius:12px;padding:44px;width:440px;max-width:95vw;box-shadow:0 16px 48px rgba(0,0,0,0.2);animation:fadeInScale .6s cubic-bezier(.22,1,.36,1);position:relative}
html.dark .login-box{background:rgba(18,18,30,0.95);border-color:rgba(212,184,106,0.2);border-top-color:#d4b86a}
.login-logo{font-size:28px;font-weight:700;color:#2d3f63;margin-bottom:4px;text-align:center;letter-spacing:-0.3px}
html.dark .login-logo{color:#d4b86a}
.login-sub{font-size:14px;color:var(--text-secondary);text-align:center;margin-bottom:40px}
.login-divider{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--text-muted);font-size:12px}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.g-btn{width:100%;background:var(--bg-card-solid);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:16px;transition:var(--transition)}
.g-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-card)}
.g-icon{width:20px;height:20px}
.inp-field{margin-bottom:18px}
.inp-field label{display:block;font-size:14px;color:var(--text-secondary);margin-bottom:6px;font-weight:600;transition:var(--transition-fast)}
.inp-field input{width:100%;background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);padding:14px 18px;color:var(--text);outline:none;font-size:15px;transition:var(--transition)}
.inp-field input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow),0 4px 20px var(--accent-glow)}
.login-btn{width:100%;background:linear-gradient(135deg,var(--accent) 0%,var(--purple) 100%);color:#fff;border:none;border-radius:var(--radius-sm);padding:15px;font-size:16px;font-weight:700;margin-top:8px;transition:var(--transition)}
.login-btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(26,26,46,0.2)}
.login-err{background:var(--danger-glow);border:1px solid var(--danger);border-radius:var(--radius-xs);padding:12px;color:var(--danger);font-size:13px;margin-bottom:14px;text-align:center;animation:fadeInDown .3s}

/* ═══ APP ═══ */
#app{display:flex;flex-direction:column;height:100vh;animation:fadeInUp .65s ease-out}
#navbar{
  background:var(--bg-navbar);
  border-bottom:2px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:4px;height:64px;flex-shrink:0;
  position:relative;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,0.06)
}
html:not(.dark) #navbar{background:rgba(26,26,46,0.97);border-bottom-color:rgba(200,164,78,0.2);box-shadow:0 2px 16px rgba(0,0,0,0.15)}
html:not(.dark) #navbar .logo-img{}
html:not(.dark) #navbar .nav-btn{color:rgba(255,255,255,0.6)}
html:not(.dark) #navbar .nav-btn:hover{color:#fff;background:rgba(255,255,255,0.1)}
html:not(.dark) #navbar .nav-btn.active{color:#d4b86a}
html:not(.dark) #navbar .nav-btn.active::after{background:#c8a44e}
html:not(.dark) #navbar .badge{background:rgba(200,164,78,0.15);color:#d4b86a}
html:not(.dark) #navbar .logo{color:#d4b86a}
html:not(.dark) #navbar .theme-toggle{color:rgba(255,255,255,0.6)}
html:not(.dark) #navbar .theme-toggle:hover{color:#fff}
#navbar::after{content:'';position:absolute;bottom:0;right:0;left:0;height:1px;background:var(--border)}
html:not(.dark) #navbar::after{background:rgba(200,164,78,0.3)}
.logo{font-weight:800;font-size:18px;color:var(--accent);display:flex;align-items:center;gap:10px}
.logo img{height:42px!important;transition:var(--transition);filter:drop-shadow(0 2px 8px rgba(0,0,0,0.1))}
.logo img:hover{transform:scale(1.02)}
.nav-btns{display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;padding:6px 0;flex:1;min-width:0;scrollbar-width:none;-ms-overflow-style:none}
.nav-btns::-webkit-scrollbar{display:none}
.nav-btn{background:transparent;border:none;color:var(--text-secondary);border-radius:var(--radius-xs);padding:8px 10px;font-size:13px;font-weight:700;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:var(--transition);position:relative;flex-shrink:0;text-decoration:none}
.nav-btn::after{content:'';position:absolute;bottom:2px;right:15%;left:15%;height:3px;background:var(--accent);border-radius:3px;transform:scaleX(0);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.nav-btn:hover{color:var(--text);background:var(--accent-glow)}
.nav-btn.active{color:var(--accent);font-weight:700}
.nav-btn.active::after{transform:scaleX(1)}
.nav-icon{display:inline-flex;align-items:center;line-height:0}
.badge{background:var(--accent-glow);color:var(--accent);border-radius:20px;padding:2px 9px;font-size:11px;font-weight:700;min-width:20px;text-align:center;transition:var(--transition)}

/* ═══ NAV DROPDOWNS ═══ */
.nav-dropdown{position:relative;display:flex;align-items:center}
.nav-dropdown-toggle{display:flex;align-items:center;gap:4px}
.nav-dropdown-menu{
  position:fixed;min-width:200px;z-index:200;
  background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px;
  box-shadow:var(--shadow-lg);animation:fadeInDown .2s ease-out;
}
.nav-dropdown-item{
  width:100%;background:none;border:none;color:var(--text-secondary);padding:10px 16px;font-size:14px;font-weight:600;text-decoration:none;
  text-align:right;border-radius:var(--radius-xs);cursor:pointer;display:flex;align-items:center;gap:8px;
  transition:var(--transition-fast);white-space:nowrap;
}
.nav-dropdown-item:hover{background:var(--accent-glow);color:var(--text)}
.nav-dropdown-item.active{color:var(--accent)}
.nav-btn.active .badge{background:var(--accent);color:#fff}
#content{flex:1;overflow:hidden;display:flex;position:relative;background:var(--bg-secondary)}
#content > div:not(.hidden){animation:fadeInUp .7s cubic-bezier(.22,1,.36,1)}

/* ═══ SIDEBAR ═══ */
.sidebar{width:310px;border-left:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;background:var(--bg-sidebar);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);transition:width .3s ease;position:relative}
.sidebar.expanded{width:520px}
.sidebar-resize-btn{position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5;font-size:12px;color:var(--text-secondary);transition:all .2s;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.sidebar-resize-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.sidebar-tools{padding:16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px}
.sidebar-count{padding:10px 16px;border-bottom:1px solid var(--border);font-size:15px;color:var(--text-secondary);font-weight:600}
.sidebar-list{flex:1;overflow-y:auto}
.list-item{padding:14px 16px;border-bottom:1px solid var(--border-light);cursor:pointer;transition:var(--transition)}
a.list-item{display:block;text-decoration:none;color:inherit}
.list-item:hover{background:var(--accent-glow);padding-right:20px}
.list-item.active{background:var(--accent-glow-strong);border-right:3px solid var(--accent)}
.item-name{font-weight:700;font-size:16px;transition:var(--transition-fast)}
.list-item:hover .item-name{color:var(--accent)}
.item-sub{font-size:15px;color:var(--text-secondary);margin-top:4px}
.item-pills{display:flex;gap:5px;margin-top:6px;flex-wrap:wrap}

/* ═══ 3D GLASS CARDS WITH NEON ═══ */
.card{
  background:var(--bg-card);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);
  border:1.5px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:16px;
  box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,0.5);transition:var(--transition);position:relative;
}
html.dark .card{box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,0.04)}
.card::before{content:'';position:absolute;top:0;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);border-radius:var(--radius) var(--radius) 0 0;pointer-events:none}
html.dark .card::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent)}
.card:hover{box-shadow:var(--shadow-card-hover);border-color:var(--border-hover)}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.card-title{font-size:20px;font-weight:700;margin-bottom:6px;letter-spacing:-0.2px}
.card-sub{font-size:15px;color:var(--text-secondary);margin-bottom:8px}

/* ═══ KPI CARDS ═══ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:24px}
.kpi-card{
  background:var(--bg-card);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);
  border:1.5px solid var(--border);border-radius:var(--radius);padding:26px;
  position:relative;overflow:hidden;transition:var(--transition);cursor:default;
  box-shadow:var(--shadow-card);
}
.kpi-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.kpi-card::before{content:'';position:absolute;top:0;right:0;left:0;height:4px;border-radius:var(--radius) var(--radius) 0 0}
.kpi-card::after{content:'';position:absolute;top:-40%;right:-40%;width:80%;height:80%;border-radius:50%;opacity:0;transition:opacity .5s;pointer-events:none}
.kpi-card:hover::after{opacity:1}
.kpi-card.kpi-blue::before{background:linear-gradient(90deg,var(--accent),var(--teal))}
.kpi-card.kpi-blue::after{background:radial-gradient(circle,var(--accent-glow),transparent 70%)}
.kpi-card.kpi-green::before{background:linear-gradient(90deg,var(--success),#34d399)}
.kpi-card.kpi-green::after{background:radial-gradient(circle,var(--success-glow),transparent 70%)}
.kpi-card.kpi-orange::before{background:linear-gradient(90deg,var(--warning),#fbbf24)}
.kpi-card.kpi-orange::after{background:radial-gradient(circle,var(--warning-glow),transparent 70%)}
.kpi-card.kpi-purple::before{background:linear-gradient(90deg,var(--purple),#2d3f63)}
.kpi-card.kpi-purple::after{background:radial-gradient(circle,var(--purple-glow),transparent 70%)}
.kpi-card.kpi-red::before{background:linear-gradient(90deg,var(--danger),#f87171)}
.kpi-card.kpi-red::after{background:radial-gradient(circle,var(--danger-glow),transparent 70%)}
.kpi-card.kpi-teal::before{background:linear-gradient(90deg,var(--teal),#d4b86a)}
.kpi-card.kpi-teal::after{background:radial-gradient(circle,var(--teal-glow),transparent 70%)}
.kpi-icon{font-size:28px;margin-bottom:12px}
.kpi-value{font-size:32px;font-weight:700;line-height:1;margin-bottom:8px;letter-spacing:-1px;animation:countUp .6s cubic-bezier(.22,1,.36,1)}
.kpi-label{font-size:15px;color:var(--text-secondary);font-weight:600}

/* ═══ SECTION HEADERS ═══ */
.section-header{font-size:20px;font-weight:700;margin-bottom:18px;display:flex;align-items:center;gap:10px;letter-spacing:-0.2px}
.section-header .icon{font-size:24px}

/* ═══ TABS ═══ */
.tabs{display:flex;overflow-x:auto;border-bottom:1px solid var(--border);margin-top:10px;gap:2px}
.tab{background:none;border:none;border-bottom:3px solid transparent;color:var(--text-secondary);padding:13px 20px;font-size:15px;font-weight:700;white-space:nowrap;transition:var(--transition)}
.tab:hover{color:var(--text)}.tab.active{border-bottom-color:var(--accent);color:var(--accent)}

/* ═══ INFO GRID ═══ */
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.info-cell{background:var(--bg-input);border-radius:var(--radius-xs);padding:14px 16px;border:1.5px solid var(--border);transition:var(--transition)}
.info-cell:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm)}
.info-label{font-size:14px;color:var(--text-secondary);font-weight:600}.info-val{font-size:17px;font-weight:700;margin-top:4px}

/* ═══ PILLS ═══ */
.pill{display:inline-block;border-radius:20px;padding:5px 14px;font-size:14px;font-weight:700;border-width:1.5px;border-style:solid}
.status-badge{display:inline-block;padding:6px 16px;border-radius:20px;font-size:14px;font-weight:700}

/* ═══ BUTTONS ═══ */
.btn{border:none;border-radius:var(--radius-xs);padding:11px 24px;font-size:15px;font-weight:600;transition:var(--transition)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0);transition-duration:.1s}
.btn-blue{background:linear-gradient(135deg,var(--accent),var(--purple));color:#fff}.btn-blue:hover{box-shadow:0 10px 30px rgba(26,26,46,0.25)}
.btn-green{background:linear-gradient(135deg,var(--success),#059669);color:#fff}.btn-green:hover{box-shadow:0 10px 30px rgba(13,159,110,0.25)}
.btn-sm{padding:8px 16px;font-size:13px}
.btn-outline{background:var(--bg-glass);border:1px solid var(--border);color:var(--text-secondary);padding:10px 20px;backdrop-filter:var(--glass-blur-sm)}
.btn-outline:hover{border-color:var(--border-hover);color:var(--text);box-shadow:var(--shadow-sm)}
.btn-outline-red{background:transparent;border:1px solid var(--danger);color:var(--danger);padding:7px 15px;font-size:13px}

/* ═══ FORMS ═══ */
.field{margin-bottom:16px}.field label{display:block;font-size:14px;color:var(--text-secondary);margin-bottom:6px;font-weight:600;transition:var(--transition-fast)}
.req{color:var(--danger)}
.field input,.field select,.field textarea{width:100%;background:var(--bg-input);backdrop-filter:var(--glass-blur-sm);border:1px solid var(--border);border-radius:var(--radius-xs);padding:13px 16px;color:var(--text);outline:none;font-size:15px;transition:var(--transition)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow),0 4px 20px var(--accent-glow)}
.field:focus-within label{color:var(--accent)}
.field textarea{resize:vertical}.form2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* ═══ MODAL ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;animation:fadeInScale .25s ease-out}
html.dark .modal-overlay{background:rgba(0,0,0,0.75)}
.modal{background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:10px;max-width:96vw;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:fadeInUp .4s cubic-bezier(.22,1,.36,1)}
.modal-hdr{padding:20px 26px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--bg-card);backdrop-filter:var(--glass-blur);z-index:1;border-radius:10px 10px 0 0}
.modal-hdr span{font-weight:800;font-size:18px}.modal-hdr button{background:var(--bg-input);border:none;color:var(--text-secondary);font-size:18px;transition:var(--transition);width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.modal-hdr button:hover{color:var(--text);background:var(--border-hover)}
.modal-body{padding:26px}

/* ═══ FILTERS & SEARCH ═══ */
.filter-bar{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap}
.filter-btn{border-radius:20px;padding:7px 14px;font-size:13px;font-weight:600;background:var(--bg-glass);border:1px solid var(--border);color:var(--text-secondary);transition:var(--transition);backdrop-filter:var(--glass-blur-sm);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px}
.filter-btn:hover{border-color:var(--border-hover);color:var(--text);box-shadow:var(--shadow-sm)}
.search-inp{width:100%;background:var(--bg-input);backdrop-filter:var(--glass-blur-sm);border:1px solid var(--border);border-radius:var(--radius-xs);padding:12px 16px;color:var(--text);outline:none;font-size:15px;transition:var(--transition)}
.search-inp:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow),0 4px 20px var(--accent-glow)}

/* ═══ TASK TABLE ═══ */
.rep-table{width:100%;border-collapse:collapse;font-size:14px}
.rep-th{padding:10px 6px;text-align:center;background:var(--bg-glass);border-bottom:2px solid var(--border);min-width:46px;color:var(--text);font-weight:700;font-size:14px}
.rep-th-label{text-align:right;min-width:120px;padding:10px 14px;position:sticky;right:0;font-weight:800;background:var(--bg-card-solid);font-size:15px}
.rep-td{padding:4px;text-align:center;border-bottom:1px solid var(--border)}
.rep-td-label{text-align:right;padding:8px 14px;background:var(--bg-card-solid);position:sticky;right:0;white-space:nowrap;font-weight:700;border-bottom:1px solid var(--border);font-size:15px}
.rep-cell{width:44px;height:36px;margin:0 auto;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;border:1px solid var(--border);font-size:12px;transition:var(--transition)}
.rep-cell:hover{transform:scale(1.06);z-index:1;box-shadow:var(--shadow-sm)}
.rep-done{background:var(--success-glow);border-color:var(--success);color:var(--success)}
.rep-na{background:var(--bg-input);border-color:var(--border);color:var(--text-muted)}
.rep-cur{background:var(--accent-glow);border-color:var(--accent)}
.rep-off{background:transparent;opacity:0.06;cursor:default}

/* ═══ DROP ZONE ═══ */
.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:48px;text-align:center;cursor:pointer;margin-bottom:16px;transition:var(--transition);background:var(--bg-glass)}
.drop-zone:hover,.drop-drag{border-color:var(--accent);background:var(--accent-glow)}

/* ═══ PROGRESS ═══ */
.prog-bar{width:80px;height:7px;background:var(--bg-input);border-radius:5px;overflow:hidden}
.prog-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--success),#34d399);transition:width .7s cubic-bezier(.22,1,.36,1)}

/* ═══ DASHBOARD ═══ */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;margin-bottom:24px}
.dash-section{margin-bottom:36px}
.dash-welcome{font-size:26px;font-weight:700;margin-bottom:8px;letter-spacing:-0.5px;color:var(--text)}
.dash-subtitle{font-size:16px;color:var(--text-secondary);margin-bottom:28px}

/* ═══ TASK LIST CARDS ═══ */
.task-list-card{background:var(--bg-card);backdrop-filter:var(--glass-blur-sm);border:2px solid var(--border);border-radius:var(--radius-sm);padding:16px 20px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;transition:var(--transition);cursor:pointer;box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,0.5)}
html.dark .task-list-card{box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,0.03)}
.task-list-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-card-hover);transform:translateX(-3px)}
.task-list-card.urgent{border-right:4px solid var(--danger)}
.task-list-card.normal{border-right:4px solid var(--warning)}
.task-list-info{flex:1}
.task-list-name{font-size:16px;font-weight:800}.task-list-sub{font-size:14px;color:var(--text-secondary);margin-top:4px}

/* ═══ DATA TABLE ═══ */
.data-table{width:100%;border-collapse:collapse}
.data-table th{padding:14px 16px;text-align:right;font-weight:800;font-size:14px;color:var(--text);border-bottom:2px solid var(--border);background:var(--bg-glass)}
.data-table td{padding:14px 16px;border-bottom:1px solid var(--border);font-size:15px;transition:var(--transition-fast)}
.data-table tr:hover td{background:var(--accent-glow)}

/* ═══ MISC ═══ */
.conv-box{background:var(--bg-card);border:1px solid var(--accent);border-radius:var(--radius);padding:18px;margin-top:16px}
#sync-status{font-size:12px;color:var(--text-secondary)}
#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--success),#059669);color:#fff;padding:14px 28px;border-radius:var(--radius-sm);font-weight:700;font-size:15px;z-index:3000;display:none;box-shadow:0 10px 40px rgba(13,159,110,0.3);animation:fadeInUp .3s}
#loading{position:fixed;inset:0;background:var(--bg-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:5000}
.spinner{width:44px;height:44px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}

/* ═══ USER MENU ═══ */
.user-menu{position:relative}
.user-btn{background:var(--bg-glass);backdrop-filter:var(--glass-blur-sm);border:1px solid var(--border);border-radius:var(--radius-xs);padding:8px 16px;color:var(--text);display:flex;align-items:center;gap:8px;font-size:14px;transition:var(--transition)}
.user-btn:hover{box-shadow:var(--shadow-sm);border-color:var(--border-hover)}
.user-dropdown{position:absolute;top:50px;left:0;background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:var(--radius);padding:8px;min-width:240px;z-index:500;box-shadow:var(--shadow-lg);animation:fadeInDown .25s ease-out}
.user-dropdown-item{padding:12px 16px;border-radius:var(--radius-xs);font-size:14px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:var(--transition)}
.user-dropdown-item:hover{background:var(--accent-glow)}

/* ═══ ROLES ═══ */
.role-admin{background:var(--purple-glow);color:var(--purple);border:1px solid rgba(200,164,78,0.2)}
.role-senior_employee{background:var(--accent-glow);color:var(--accent);border:1px solid rgba(26,26,46,0.2)}
.role-employee{background:var(--success-glow);color:var(--success);border:1px solid rgba(13,159,110,0.2)}
.role-readonly{background:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border)}
.user-row{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border-light);transition:var(--transition-fast)}
.user-row:hover{background:var(--accent-glow)}

/* ═══ TASKS MODULE ═══ */
.tasks-wrap{padding:24px;max-width:1300px;margin:0 auto}
.tasks-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.tasks-header h2{font-size:24px;font-weight:800}
.period-sel{display:flex;gap:10px;align-items:center}
.period-sel select{background:var(--bg-glass);backdrop-filter:var(--glass-blur-sm);border:1px solid var(--border);border-radius:var(--radius-xs);padding:10px 18px;color:var(--text);outline:none;font-size:14px;transition:var(--transition)}
.period-sel select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.task-cell{display:flex;flex-direction:column;align-items:center;gap:4px}
.task-status-btn{width:100%;border:none;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:var(--transition)}
.task-status-btn:hover{transform:scale(1.03)}
.task-done{background:var(--success-glow);color:var(--success);border:1px solid var(--success)}
.task-pending{background:var(--bg-glass);color:var(--text-secondary);border:1px solid var(--border)}
.task-na{background:var(--bg-input);color:var(--text-muted);border:1px solid var(--border)}
.task-file-btn{font-size:12px;color:var(--accent);background:none;border:none;cursor:pointer;padding:0;transition:var(--transition-fast)}
.task-file-btn:hover{color:var(--accent-light)}
.task-upload-btn{font-size:12px;color:var(--text-secondary);background:var(--bg-glass);border:1px dashed var(--border);border-radius:8px;cursor:pointer;padding:5px 12px;transition:var(--transition)}
.task-upload-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}
.task-worker{font-size:11px;color:var(--text-secondary);text-align:center;margin-top:3px}
.na-cell{opacity:0.25}

/* ═══ AI WIDGET ═══ */
.ai-fab{position:fixed;bottom:24px;left:24px;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--purple));border:1px solid rgba(255,255,255,0.15);color:#fff;font-size:22px;font-weight:700;display:none;align-items:center;justify-content:center;z-index:900;box-shadow:0 4px 16px rgba(26,26,46,0.2);transition:var(--transition);cursor:pointer;letter-spacing:-1px}
.ai-fab:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(26,26,46,0.25)}
.ai-panel{position:fixed;bottom:92px;left:24px;width:400px;max-height:520px;background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);z-index:901;display:none;flex-direction:column;overflow:hidden;animation:fadeInUp .35s cubic-bezier(.22,1,.36,1)}

/* ═══ THEME TOGGLE ═══ */
.theme-toggle{background:var(--bg-glass);border:1px solid var(--border);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:var(--transition)}
.theme-toggle:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm)}

/* ═══ SCROLL AREA ═══ */
.scroll-area{overflow-y:auto;padding:24px}

/* ═══ RESPONSIVE ═══ */
/* ═══════════════════════════════════════════════
   CLIENT VIEW - Full-screen 3D Futuristic Mode
   ═══════════════════════════════════════════════ */
.cv-overlay{
  position:fixed;inset:0;z-index:2000;
  background:var(--bg-primary);
  animation:cvSlideIn .45s cubic-bezier(.22,1,.36,1);
  overflow:hidden;
}
.cv-overlay.cv-closing{
  animation:cvSlideOut .35s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes cvSlideIn{from{opacity:0;transform:translateY(30px) scale(0.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cvSlideOut{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(30px) scale(0.97)}}

.cv-overlay::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:var(--bg-primary);
}
html:not(.dark) .cv-overlay::before{
  background:
    linear-gradient(135deg,rgba(197,205,216,0.88) 0%,rgba(210,218,230,0.85) 40%,rgba(195,205,220,0.9) 100%),
    url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&q=80') center/cover no-repeat;
  filter:blur(12px) saturate(0.3) brightness(0.88);
  transform:scale(1.08);
}
.cv-overlay::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 900px 700px at 15% 25%,rgba(200,164,78,0.1) 0%,transparent 60%),
    radial-gradient(ellipse 700px 600px at 85% 75%,rgba(26,26,46,0.07) 0%,transparent 60%),
    radial-gradient(ellipse 600px 500px at 55% 15%,rgba(184,146,62,0.06) 0%,transparent 60%);
  pointer-events:none;
}

.cv-container{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* ── Header ── */
.cv-header{
  background:var(--bg-navbar);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
  border-bottom:2px solid var(--border);padding:16px 28px;display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;position:relative;z-index:10;
}
.cv-header::after{content:'';position:absolute;bottom:0;right:0;left:0;height:1px;background:var(--border)}
.cv-header-right{display:flex;align-items:center;gap:16px}
.cv-header-left{display:flex;align-items:center;gap:12px}
.cv-back-btn{
  width:42px;height:42px;border-radius:50%;background:var(--bg-glass);border:1px solid var(--border);
  color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:var(--transition);backdrop-filter:var(--glass-blur-sm);
}
.cv-back-btn:hover{background:var(--danger-glow);border-color:var(--danger);color:var(--danger)}
.cv-header-info{}
.cv-client-name{font-size:20px;font-weight:700;letter-spacing:-0.2px}
.cv-client-sub{font-size:12px;color:var(--text-secondary);margin-bottom:4px}
.cv-pills{display:flex;gap:5px;flex-wrap:wrap}
.cv-source-badge{font-size:10px;font-weight:600;border-radius:20px;padding:4px 12px;border:1px solid;white-space:nowrap}
.cv-year-btns{display:flex;gap:4px}
.cv-yr-btn{
  background:transparent;border:1px solid var(--border);color:var(--text-secondary);
  border-radius:8px;padding:5px 14px;font-size:12px;font-weight:600;cursor:pointer;transition:var(--transition);
}
.cv-yr-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.cv-yr-btn:hover:not(.active){border-color:var(--accent);color:var(--accent)}

/* ── Body ── */
.cv-body{flex:1;overflow-y:auto;padding:24px 28px;scroll-behavior:smooth}

/* ── Quick Stats ── */
.cv-quick-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:24px;
}
.cv-quick-stat{
  background:var(--bg-card);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);
  border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:14px 16px;
  display:flex;align-items:center;gap:10px;transition:var(--transition);
  box-shadow:var(--shadow-sm);overflow:hidden;min-width:0;
}
.cv-quick-stat:hover{border-color:var(--border-hover);box-shadow:var(--shadow-card);transform:translateY(-1px)}
.cv-qs-icon{font-size:22px;flex-shrink:0}
.cv-qs-label{font-size:12px;color:var(--text-secondary);font-weight:600}
.cv-qs-val{font-size:15px;font-weight:700;margin-top:1px;-webkit-user-select:text!important;-moz-user-select:text!important;-ms-user-select:text!important;user-select:text!important;cursor:text;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.cv-qs-val::selection,.cv-client-name::selection,.cv-client-sub::selection,.pill::selection,.cv-qs-label::selection,.cv-section-title::selection,.cv-kpi-val::selection,.cv-kpi-label::selection{background:var(--accent);color:#fff}
.cv-overlay,.cv-overlay *{-webkit-user-select:text!important;-moz-user-select:text!important;user-select:text!important}
.cv-client-name,.cv-client-sub,.pill,.cv-qs-label,.cv-section-title,.cv-kpi-val,.cv-kpi-label{-webkit-user-select:text!important;user-select:text!important;cursor:text}

/* ── Grid Layout ── */
.cv-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}

/* ── Sections ── */
.cv-section{
  background:var(--bg-card);backdrop-filter:var(--glass-blur-sm);-webkit-backdrop-filter:var(--glass-blur-sm);
  border:1.5px solid var(--border);border-radius:var(--radius);padding:24px;margin-bottom:18px;
  box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,0.5);transition:var(--transition);position:relative;
}
html.dark .cv-section{box-shadow:var(--shadow-card),inset 0 1px 0 rgba(255,255,255,0.04)}
.cv-section::before{content:'';position:absolute;top:0;right:0;left:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);border-radius:var(--radius) var(--radius) 0 0;pointer-events:none}
html.dark .cv-section::before{background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent)}
.cv-section:hover{box-shadow:var(--shadow-card-hover);border-color:var(--border-hover)}
.cv-section-title{font-size:16px;font-weight:800;margin-bottom:16px;letter-spacing:-0.2px}

/* ── KPI Row ── */
.cv-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:18px}
.cv-kpi{
  background:var(--bg-glass);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  padding:18px;text-align:center;position:relative;overflow:hidden;transition:var(--transition);
}
.cv-kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover)}
.cv-kpi::before{content:'';position:absolute;top:0;right:0;left:0;height:3px;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.cv-kpi-blue::before{background:linear-gradient(90deg,#1a1a2e,#2d3f63)}
.cv-kpi-red::before{background:linear-gradient(90deg,#ef4444,#f87171)}
.cv-kpi-green::before{background:linear-gradient(90deg,#10b981,#34d399)}
.cv-kpi-purple::before{background:linear-gradient(90deg,#1a1a2e,#2d3f63)}
.cv-kpi-orange::before{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.cv-kpi-icon{font-size:22px;margin-bottom:8px}
.cv-kpi-val{font-size:24px;font-weight:700;line-height:1.1;letter-spacing:-0.5px;animation:countUp .6s cubic-bezier(.22,1,.36,1)}
.cv-kpi-label{font-size:11px;color:var(--text-secondary);font-weight:600;margin-top:4px}
.cv-kpi-sub{font-size:10px;color:var(--text-secondary);margin-top:2px}

/* ── Tax Grid ── */
.cv-tax-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.cv-tax-card{background:var(--bg-input);border:1px solid var(--border);border-radius:var(--radius-xs);padding:14px;transition:var(--transition)}
.cv-tax-card:hover{border-color:var(--border-hover);box-shadow:var(--shadow-sm)}
.cv-tax-label{font-size:11px;color:var(--text-secondary);font-weight:600}
.cv-tax-val{font-size:18px;font-weight:800;margin-top:4px}

/* ── Alerts ── */
.cv-alert{border-radius:var(--radius-xs);padding:10px 14px;font-size:12px;font-weight:600;margin-top:12px}
.cv-alert-danger{background:#ef444418;border:1px solid #ef4444;color:#ef4444}
.cv-alert-info{background:rgba(200,164,78,0.1);border:1px solid rgba(200,164,78,0.3);color:var(--accent)}

/* ── VAT Grid ── */
.cv-vat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px;margin-bottom:12px}
.cv-vat-cell{
  border:1px solid;border-radius:10px;padding:8px 4px;text-align:center;transition:var(--transition);
  background:var(--bg-glass);
}
.cv-vat-cell:hover{transform:scale(1.08);box-shadow:var(--shadow-sm)}
.cv-vat-period{font-size:10px;font-weight:700;margin-bottom:2px}
.cv-vat-status{font-size:16px;margin:2px 0}
.cv-vat-amount{font-size:10px;font-weight:700}
.cv-vat-total{font-size:12px;color:var(--text-secondary);text-align:center;margin-top:8px}

/* ── Advance Grid ── */
.cv-adv-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin-bottom:12px}
.cv-adv-cell{border:1px solid var(--border);border-radius:8px;padding:6px 2px;text-align:center;transition:var(--transition)}
.cv-adv-cell:hover{transform:scale(1.1);box-shadow:var(--shadow-sm)}

/* ── Progress ── */
.cv-prog-wrap{display:flex;align-items:center;gap:10px;margin-top:8px}
.cv-prog-bar{height:8px;background:var(--bg-input);border-radius:5px;overflow:hidden;flex:1}
.cv-prog-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--success),#34d399);transition:width .7s cubic-bezier(.22,1,.36,1)}

/* ── Chart ── */
.cv-chart{margin-top:16px;background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px}
.cv-chart-title{font-size:12px;font-weight:700;margin-bottom:12px}
.cv-chart-bars{display:flex;align-items:flex-end;gap:6px;height:120px}
.cv-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px}
.cv-chart-bar-wrap{display:flex;gap:2px;align-items:flex-end;height:100px;width:100%}
.cv-chart-bar{flex:1;border-radius:4px 4px 0 0;min-height:2px;transition:height .5s cubic-bezier(.22,1,.36,1)}
.cv-bar-income{background:linear-gradient(180deg,#1a1a2e,#2d3f63)}
.cv-bar-expense{background:linear-gradient(180deg,#ef4444,#f87171)}
.cv-chart-label{font-size:9px;color:var(--text-secondary);font-weight:600}
.cv-chart-legend{display:flex;gap:16px;justify-content:center;margin-top:10px;font-size:10px;color:var(--text-secondary)}
.cv-legend-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-left:4px;vertical-align:middle}

/* ── Notes ── */
.cv-notes{background:var(--bg-input);border-radius:var(--radius-xs);padding:14px;font-size:13px;line-height:1.7;color:var(--text);border:1px solid var(--border)}

/* ── Client Files ── */
.cv-file-tab{background:var(--bg-input);border:1px solid var(--border);border-radius:16px;padding:3px 12px;font-size:11px;font-weight:600;color:var(--text-secondary);cursor:pointer;transition:all .2s}
.cv-file-tab:hover{border-color:var(--accent);color:var(--accent)}
.cv-file-tab.active{background:var(--accent);color:white;border-color:var(--accent)}
.cv-files-list{max-height:400px;overflow-y:auto}
.cv-file-row{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:10px;border:1px solid var(--border);margin-bottom:6px;transition:all .2s;gap:10px}
.cv-file-row:hover{background:var(--bg-input);border-color:var(--accent-glow);box-shadow:0 2px 8px rgba(0,0,0,0.06)}

/* ── Loading Shimmer ── */
.cv-loading{display:flex;flex-direction:column;gap:12px;padding:16px 0}
.cv-shimmer{height:60px;border-radius:var(--radius-xs);background:var(--bg-input)}
.cv-loading-text{text-align:center;font-size:12px;color:var(--text-secondary);margin-top:4px}

/* ═══════════════════════════════════════════════
   3D FUTURISTIC ENHANCEMENTS
   ═══════════════════════════════════════════════ */

/* Glass depth effect on cards */
html:not(.dark) .card,
html:not(.dark) .cv-section{
  box-shadow:
    0 4px 24px rgba(0,0,0,0.06),
    0 1px 4px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.03);
}
html:not(.dark) .card:hover,
html:not(.dark) .cv-section:hover{
  box-shadow:
    0 12px 40px rgba(26,26,46,0.1),
    0 4px 12px rgba(0,0,0,0.06),
    0 0 20px rgba(200,164,78,0.06),
    inset 0 1px 0 rgba(255,255,255,0.8);
}

html:not(.dark) .kpi-card:hover{
  box-shadow:
    0 8px 24px rgba(26,26,46,0.1),
    inset 0 1px 0 rgba(255,255,255,0.9);
}

/* ═══ COHEN PARTNERS BRAND ENHANCEMENTS ═══ */

/* Section headers - gold accent underline */
html:not(.dark) .section-header{
  color:#1a1a2e;
  padding-bottom:10px;
  border-bottom:2px solid rgba(200,164,78,0.25);
}

/* Table headers - navy background */
html:not(.dark) .data-table th{
  background:rgba(26,26,46,0.06);
  border-bottom:2px solid rgba(200,164,78,0.3);
}
html:not(.dark) .rep-th{
  background:rgba(26,26,46,0.06);
  border-bottom:2px solid rgba(200,164,78,0.3);
}

/* Modal headers - navy with gold accent line */
html:not(.dark) .modal-hdr{
  background:rgba(26,26,46,0.97);
  border-bottom:2px solid rgba(200,164,78,0.3);
}
html:not(.dark) .modal-hdr span{color:#fff}
html:not(.dark) .modal-hdr button{background:rgba(255,255,255,0.1);color:rgba(255,255,255,0.7)}
html:not(.dark) .modal-hdr button:hover{background:rgba(255,255,255,0.2);color:#fff}

/* Sidebar - navy top accent + brand border */
html:not(.dark) .sidebar{
  border-left:2px solid rgba(200,164,78,0.15);
}
html:not(.dark) .sidebar-tools{
  border-bottom:2px solid rgba(200,164,78,0.15);
}

/* Active sidebar item - gold indicator */
html:not(.dark) .list-item.active{
  border-right:3px solid #c8a44e;
  background:rgba(200,164,78,0.06);
}
html:not(.dark) .list-item:hover .item-name{
  color:#1a1a2e;
}

/* Tab active - gold underline */
html:not(.dark) .tab.active{
  border-bottom-color:#c8a44e;
  color:#1a1a2e;
}

/* Active filter button - gold */
html:not(.dark) .filter-btn.active{
  background:rgba(200,164,78,0.1);
  border-color:rgba(200,164,78,0.3);
  color:#1a1a2e;
}

/* Dashboard welcome - navy to gold gradient */
html:not(.dark) .dash-welcome{
  background:linear-gradient(135deg,#1a1a2e 30%,#c8a44e 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* Card hover - gold accent border */
html:not(.dark) .card:hover{
  border-color:rgba(200,164,78,0.3);
}
html:not(.dark) .task-list-card:hover{
  border-color:rgba(200,164,78,0.3);
}

/* KPI card top bars - ensure brand colors */
html:not(.dark) .kpi-card.kpi-blue::before{
  background:linear-gradient(90deg,#1a1a2e,#2d3f63);
}
html:not(.dark) .kpi-card.kpi-purple::before{
  background:linear-gradient(90deg,#c8a44e,#d4b86a);
}
html:not(.dark) .kpi-card.kpi-teal::before{
  background:linear-gradient(90deg,#b8923e,#c8a44e);
}

/* User menu and dropdowns */
html:not(.dark) .user-menu{color:rgba(255,255,255,0.8)}

/* Form focus - gold glow */
html:not(.dark) .field input:focus,
html:not(.dark) .field select:focus,
html:not(.dark) .field textarea:focus{
  border-color:#c8a44e;
  box-shadow:0 0 0 4px rgba(200,164,78,0.1),0 4px 20px rgba(200,164,78,0.08);
}
html:not(.dark) .search-inp:focus{
  border-color:#c8a44e;
  box-shadow:0 0 0 4px rgba(200,164,78,0.1),0 4px 20px rgba(200,164,78,0.08);
}

/* Drop zone - gold accent on hover */
html:not(.dark) .drop-zone:hover,
html:not(.dark) .drop-drag{
  border-color:#c8a44e;
  background:rgba(200,164,78,0.06);
}

/* AI FAB - navy primary */
html:not(.dark) .ai-fab{
  box-shadow:0 8px 30px rgba(26,26,46,0.3),0 0 20px rgba(200,164,78,0.1);
}

/* Conv box - gold border */
html:not(.dark) .conv-box{
  border-color:rgba(200,164,78,0.3);
}

/* ═══ MOBILE HAMBURGER ═══ */
.mobile-hamburger{
  display:none;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;
  padding:8px;border-radius:8px;transition:var(--transition);z-index:201
}
.mobile-hamburger:hover{background:var(--accent-glow)}
.mobile-menu-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:199;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:fadeIn .2s
}
.mobile-menu-overlay.open{display:block}
.mobile-menu{
  position:fixed;top:0;right:-320px;width:300px;height:100vh;z-index:200;
  /* Use the solid bg — card color is semi-transparent and swallows text */
  background:var(--bg-card-solid);
  border-left:2px solid var(--border);
  box-shadow:var(--shadow-lg);transition:right .3s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;padding:0;display:flex;flex-direction:column
}
.mobile-menu.open{right:0}
.mobile-menu-header{
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid var(--accent);
  background:var(--bg-card-solid);
  position:sticky;top:0;z-index:1
}
.mobile-menu-close{
  background:var(--accent-glow);border:none;color:var(--text);
  font-size:20px;cursor:pointer;padding:6px 12px;border-radius:8px;font-weight:700
}
.mobile-menu-close:hover{background:var(--accent);color:#fff}
.mobile-nav-item{
  display:flex;align-items:center;gap:10px;padding:14px 22px;border:none;background:none;
  /* Full-strength text — was too dim before */
  color:var(--text);
  font-size:15px;font-weight:600;width:100%;text-align:right;
  cursor:pointer;transition:var(--transition-fast);border-radius:0;
  border-bottom:1px solid var(--border-light,transparent)
}
.mobile-nav-item:hover,.mobile-nav-item.active{
  background:var(--accent-glow);color:var(--accent);font-weight:700
}
.mobile-nav-section{
  padding:14px 22px 8px;
  font-size:12px;font-weight:800;
  /* Strong accent color so the section headers STAND OUT instead of being swallowed */
  color:var(--accent);
  text-transform:uppercase;letter-spacing:1px;
  /* Was opacity:0.7 which made it invisible on dark bg — removed */
  margin-top:8px;
  background:var(--accent-glow);
  border-top:1px solid var(--border);
  border-bottom:2px solid var(--accent);
}
.mobile-nav-section:first-of-type{margin-top:0;border-top:none}

/* ═══ RESPONSIVE ═══ */
@media(max-width:768px){
  #navbar{padding:0 10px;height:50px}
  .nav-btns{display:none!important}
  .mobile-hamburger{display:flex!important;align-items:center}
  .logo img{height:32px!important}
  .user-menu .user-btn span:not(#user-avatar){display:none}
  #nav-info{display:none}
  #sync-status{display:none}
  #content{flex-direction:column!important}
  .sidebar{width:100%;border-left:none;border-bottom:1px solid var(--border);max-height:calc(100vh - 52px);overflow-y:auto;flex-shrink:0}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .dash-grid{grid-template-columns:1fr}
  .dash-welcome{font-size:20px}
  .card{padding:14px;border-radius:12px}
  /* Client View responsive */
  .cv-grid{grid-template-columns:1fr}
  .cv-kpi-row{grid-template-columns:1fr 1fr}
  .cv-tax-grid{grid-template-columns:1fr 1fr}
  .cv-adv-grid{grid-template-columns:repeat(4,1fr)}
  .cv-quick-stats{grid-template-columns:1fr 1fr}
  .cv-header{padding:10px 14px;flex-direction:column;gap:8px;align-items:flex-start}
  .cv-header-left{width:100%;justify-content:space-between}
  .cv-body{padding:12px}
  /* Personal tasks mobile */
  .pt-actions{opacity:1!important}
  .task-list-card{-webkit-tap-highlight-color:transparent}
  /* Tab content */
  #content{overflow-y:auto}
  /* Modal */
  .modal{width:95vw!important;max-width:95vw;border-radius:16px;margin:8px}
  .modal-body{padding:12px}
  /* Forms */
  .field{margin-bottom:8px}
  .field input,.field select,.field textarea{font-size:16px!important}
  /* Table */
  .tbl{font-size:12px}
  .tbl th,.tbl td{padding:6px 8px}
  /* Toast */
  #toast{font-size:13px;padding:10px 16px;left:10px;right:10px;width:auto;transform:none;bottom:60px}
}

@media(max-width:480px){
  #navbar{padding:0 8px;height:46px}
  .logo img{height:28px!important}
  .card{padding:10px;border-radius:10px}
  .dash-welcome{font-size:18px}
}

/* ═══ MOBILE FIX: client card layout ═══ */
@media(max-width:768px){
  /* Tabs row inside client card — make horizontally scrollable instead of overflowing */
  .card .tab,
  div[role="tablist"] .tab,
  .tab-group .tab,
  .tabs .tab{
    padding:10px 14px!important;
    font-size:13px!important;
  }
  /* Any container holding multiple .tab buttons in a row → horizontally scrollable */
  .tab-group,
  .tabs,
  .card-tabs,
  div:has(> .tab + .tab){
    display:flex;
    flex-wrap:nowrap!important;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    padding-bottom:2px;
    margin-bottom:8px;
  }
  /* Visual hint that there's more to scroll */
  .tab-group::after,
  .tabs::after{
    content:'';
    flex-shrink:0;
    width:8px
  }

  /* Pills (status chips) — wrap nicely on mobile, smaller padding */
  .pill{
    padding:4px 10px!important;
    font-size:12px!important;
    white-space:nowrap;
  }
  /* Pills container — wrap with vertical gap */
  .card-header > div > div:has(> .pill),
  div:has(> .pill + .pill){
    display:flex;
    flex-wrap:wrap;
    gap:6px!important;
  }

  /* Card header stacking on mobile */
  .card-header{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:10px;
  }

  /* AI floating button — smaller and out of the way of content */
  .ai-fab{
    width:46px!important;
    height:46px!important;
    font-size:20px!important;
    bottom:14px!important;
    left:14px!important;
    opacity:0.9;
  }
  .ai-fab:active{opacity:1}

  /* Bottom padding on body when ai-fab is visible — so content doesn't get hidden */
  #content{padding-bottom:80px!important}

  /* Info grid (פרטים cards) — single column on small phones for breathing room */
  .info-grid{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }
  .info-cell{padding:10px!important;min-width:0!important}
  .info-label{font-size:10px!important}
  .info-val{font-size:13px!important;word-break:break-word}

  /* Card sub-text under client name (the "פטור / 212₪/חודש" pills row) */
  .card-sub{
    font-size:12px!important;
    line-height:1.5!important;
    word-wrap:break-word;
  }
  .card-title{font-size:18px!important;line-height:1.3}

  /* Buttons row on client card — wrap nicely */
  .card-header > div:last-child{
    width:100%;
    justify-content:flex-start!important;
  }
  .btn.btn-sm{font-size:12px!important;padding:7px 12px!important}
}

/* Even smaller phones — tighter spacing */
@media(max-width:400px){
  .info-grid{grid-template-columns:1fr!important}
  .card .tab,
  .tab{padding:8px 10px!important;font-size:12px!important}
  .pill{font-size:11px!important;padding:3px 8px!important}
  .card{padding:10px!important}
}

/* ═══ ENHANCED MOBILE SUPPORT ═══ */
@media(max-width:768px){
  /* ── Navbar: fixed top, not scrollable ── */
  #navbar{
    position:fixed!important;top:0;left:0;right:0;z-index:100;
    box-shadow:0 2px 8px rgba(0,0,0,0.15)
  }
  /* Push content below fixed navbar */
  #content{
    margin-top:52px!important;
    height:calc(100vh - 52px)!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch
  }
  /* Expiry banner above navbar on mobile */
  #access-expiry-banner{bottom:auto!important;top:50px!important}

  /* ── Tax Refund module mobile ── */
  /* Split-screen → stacked on mobile */
  [style*="display:flex"][style*="height:100%"] > div[style*="width:60%"],
  [style*="display:flex"][style*="height:100%"] > div[style*="width:40%"]{
    width:100%!important;min-width:0!important;max-width:100%!important
  }

  /* ── Tables: horizontal scroll wrapper ── */
  .tbl-wrap,.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{min-width:600px}

  /* ── Layout: stack sidebar above main on mobile ── */
  #content{flex-direction:column!important}

  /* ── Lead/Client sidebar: full height scrollable on mobile ── */
  .sidebar{
    position:relative!important;width:100%!important;height:auto!important;
    max-height:calc(100vh - 52px)!important;border-left:none!important;
    border-bottom:1px solid var(--border);flex-shrink:0!important;
    overflow-y:auto!important
  }
  .sidebar-list{flex:1!important;overflow-y:auto!important}

  /* ── Mobile back button ── */
  .mobile-back-btn{display:block!important}

  /* ── When client selected, main content fills screen ── */
  .sidebar[style*="display: none"]+div,.sidebar[style*="display:none"]+div{
    max-height:calc(100vh - 52px)!important;overflow-y:auto!important
  }

  /* ── Buttons: bigger touch targets ── */
  button,.btn{min-height:40px;min-width:40px}
  .nav-btn{padding:8px 12px}

  /* ── Year buttons row: scrollable ── */
  [style*="display:flex"][style*="gap"]:has(> button){
    flex-wrap:nowrap!important;overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;padding-bottom:4px
  }

  /* ── Modal: fullscreen on mobile ── */
  .modal{
    width:100vw!important;max-width:100vw!important;height:100vh!important;
    max-height:100vh!important;border-radius:0!important;margin:0!important
  }
  .modal-overlay{padding:0!important;align-items:stretch!important}
  .modal-body{
    max-height:calc(100vh - 50px)!important;overflow-y:auto!important;
    -webkit-overflow-scrolling:touch
  }

  /* ── KPI cards: 2 columns, compact ── */
  .kpi-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .kpi-card{padding:10px!important}
  .kpi-card .value{font-size:20px!important}

  /* ── Case detail header: stack vertically ── */
  [style*="display:flex"][style*="align-items:center"][style*="gap:12px"]{
    flex-direction:column!important;align-items:flex-start!important
  }

  /* ── Tab buttons: scrollable row ── */
  [style*="display:flex"][style*="border-bottom"]:has(> button){
    overflow-x:auto!important;-webkit-overflow-scrolling:touch;
    flex-wrap:nowrap!important;white-space:nowrap
  }

  /* ── Inputs: prevent zoom on iOS ── */
  input,select,textarea{font-size:16px!important}

  /* ── Toast: wider on mobile ── */
  #toast{left:8px!important;right:8px!important;width:auto!important;bottom:60px!important;font-size:13px!important}
}

/* ── Extra small screens ── */
@media(max-width:380px){
  #navbar{height:42px}
  #content{margin-top:44px!important;height:calc(100vh - 44px)!important}
  .mobile-hamburger{font-size:20px;padding:6px}
  .logo img{height:24px!important}
  .kpi-grid{grid-template-columns:1fr!important}
  .modal-body{padding:8px!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   LEADS MOBILE — fix overlapping text on small screens
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:768px){
  /* Card header — wrap on mobile so title + buttons don't overlap */
  .card-header{
    flex-wrap:wrap!important;
    gap:8px!important;
    align-items:flex-start!important
  }
  .card-header > div:first-child{
    flex:1 1 100%!important;
    min-width:0!important
  }
  .card-header > div:last-child{
    flex:0 0 auto!important;
    width:auto!important
  }

  /* Card title smaller on phone */
  .card-title{
    font-size:18px!important;
    line-height:1.3;
    word-break:break-word;
    max-width:100%
  }

  /* Status badge — smaller padding on mobile */
  .status-badge{
    padding:3px 10px!important;
    font-size:11px!important;
    white-space:nowrap;
    margin-top:4px;
    display:inline-block
  }

  /* Edit/delete buttons row — compact */
  .card-header > div:last-child .btn{
    padding:6px 10px!important;
    font-size:11px!important;
    min-height:32px;
    min-width:32px
  }
  .card-header > div:last-child .btn-outline-red{
    padding:5px 9px!important;
    font-size:13px
  }

  /* Info grid — keep 2 cols but allow shrinking */
  .info-grid{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important
  }
  .info-cell{
    padding:8px 10px!important;
    min-width:0!important;
    overflow:hidden
  }
  .info-label{
    font-size:10px!important;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
  }
  .info-val{
    font-size:13px!important;
    line-height:1.3;
    word-break:break-word;
    overflow-wrap:anywhere;
    margin-top:3px!important
  }

  /* Lead notes display — break long text */
  #lead-notes-display{
    font-size:12px!important;
    line-height:1.5!important;
    word-break:break-word
  }

  /* Referrals card cells — wrap nicely */
  .card [onclick^="selLead"]{
    flex-wrap:wrap!important;
    gap:6px!important
  }
  .card [onclick^="selLead"] > div{
    min-width:0!important
  }
  .card [onclick^="selLead"] > div > div{
    word-break:break-word
  }
  .card [onclick^="selLead"] .status-badge{
    flex-shrink:0
  }

  /* Sidebar list items — fix wrap of name + status badge */
  .sidebar-list .list-item{
    padding:10px 12px!important
  }
  .sidebar-list .item-name{
    font-size:13px!important;
    line-height:1.3;
    word-break:break-word;
    flex:1;
    min-width:0
  }
  .sidebar-list .list-item > div:first-child{
    flex-wrap:wrap!important;
    gap:4px!important
  }
  .sidebar-list .item-sub{
    font-size:11px!important;
    direction:ltr;
    text-align:right
  }

  /* Status update buttons in lead view — wrap properly */
  .field label{font-size:11px!important}
}

/* Single-column on very small phones (<360px) */
@media(max-width:360px){
  .info-grid{grid-template-columns:1fr!important}
  .card-title{font-size:16px!important}
  .status-badge{font-size:10px!important;padding:2px 8px!important}
}

/* ═══════════════════════════════════════════════
   WHATSAPP CHAT — Client Card Tab
   ═══════════════════════════════════════════════ */
.wa-container{
  display:flex;flex-direction:column;height:calc(100vh - 320px);min-height:400px;
  padding:0!important;overflow:hidden;border-radius:var(--radius-sm);
  background:var(--bg-card);
}
.wa-header{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:linear-gradient(135deg,#075E54,#128C7E);color:#fff;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;flex-shrink:0;
}
.wa-header .btn{color:#fff;border-color:rgba(255,255,255,0.4);font-size:11px}
.wa-header .btn:hover{background:rgba(255,255,255,0.15)}
.wa-header-icon{
  width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,0.15);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.wa-header-info{flex:1;min-width:0}
.wa-header-title{font-size:15px;font-weight:700}
.wa-header-phone{font-size:11px;opacity:0.8;direction:ltr;text-align:right}

/* Chat area */
.wa-chat{
  flex:1;overflow-y:auto;padding:16px 18px;
  background:var(--bg-secondary);
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  display:flex;flex-direction:column;gap:6px;
}

/* Messages */
.wa-msg{display:flex;max-width:80%}
.wa-msg-out{margin-right:auto;align-self:flex-start}
.wa-msg-in{margin-left:auto;align-self:flex-end}

.wa-bubble{
  padding:8px 12px;border-radius:12px;max-width:100%;
  box-shadow:0 1px 3px rgba(0,0,0,0.08);position:relative;
  word-break:break-word;font-size:13px;line-height:1.5;
}
.wa-bubble-out{
  background:#DCF8C6;color:#111;border-top-left-radius:4px;
}
.dark .wa-bubble-out{
  background:#005C4B;color:#e4e6eb;
}
.wa-bubble-in{
  background:var(--bg-card-solid);color:var(--text);border-top-right-radius:4px;
}
.dark .wa-bubble-in{
  background:#1f2937;color:#e4e6eb;
}
.wa-bubble-body{margin-bottom:2px}
.wa-bubble-meta{
  display:flex;align-items:center;gap:4px;justify-content:flex-end;
  margin-top:2px;
}
.wa-msg-time{font-size:10px;color:#667781;white-space:nowrap}
.dark .wa-msg-time{color:#8696a0}
.wa-msg-status{font-size:11px;margin-right:-2px}
.wa-msg-error{
  font-size:11px;color:#ef4444;background:rgba(239,68,68,0.08);
  border-radius:6px;padding:3px 8px;margin-top:4px;
}
.wa-template-badge{
  display:inline-block;background:rgba(37,211,102,0.12);
  color:#128C7E;border-radius:8px;padding:2px 8px;
  font-size:12px;font-weight:600;
}
.dark .wa-template-badge{background:rgba(37,211,102,0.2);color:#25D366}

/* Empty / Loading states */
.wa-empty,.wa-empty-chat,.wa-loading{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:40px 20px;text-align:center;color:var(--text-secondary);
  font-size:14px;
}
.wa-loading{flex:1;min-height:200px}
.wa-spinner{
  width:32px;height:32px;border:3px solid var(--border-light);
  border-top-color:#25D366;border-radius:50%;
  animation:waSpin 0.8s linear infinite;
}
@keyframes waSpin{to{transform:rotate(360deg)}}

/* Opt-out banner */
.wa-opt-out-banner{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:#fef2f2;border-bottom:1px solid #fecaca;
  color:#991b1b;font-size:13px;flex-shrink:0;
}
.dark .wa-opt-out-banner{background:#451a1a;border-color:#7f1d1d;color:#fca5a5}

/* 24h window badge */
.wa-window-badge{
  padding:6px 16px;font-size:12px;font-weight:600;
  text-align:center;flex-shrink:0;
}
.wa-window-open{background:#ecfdf5;color:#065f46;border-bottom:1px solid #a7f3d0}
.wa-window-closed{background:#fefce8;color:#854d0e;border-bottom:1px solid #fde68a}
.dark .wa-window-open{background:#052e16;color:#6ee7b7;border-color:#065f46}
.dark .wa-window-closed{background:#422006;color:#fde68a;border-color:#854d0e}

/* Send area */
.wa-send-area{
  padding:12px 16px;border-top:1px solid var(--border-light);
  background:var(--bg-card);flex-shrink:0;
  display:flex;flex-direction:column;gap:8px;
}
.wa-send-row,.wa-freeform-row{
  display:flex;gap:8px;align-items:center;
}
.wa-select{
  flex:1;padding:8px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--bg-input);color:var(--text);
  font-size:13px;font-family:'Heebo',sans-serif;
  appearance:none;-webkit-appearance:none;
  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='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 10px center;
}
.wa-input{
  flex:1;padding:8px 12px;border:1px solid var(--border);
  border-radius:10px;background:var(--bg-input);color:var(--text);
  font-size:13px;font-family:'Heebo',sans-serif;
}
.wa-input:focus,.wa-select:focus{
  outline:none;border-color:#25D366;
  box-shadow:0 0 0 3px rgba(37,211,102,0.15);
}
.wa-send-btn{
  background:#25D366!important;color:#fff!important;
  border:none;border-radius:10px;padding:8px 16px;
  font-weight:700;font-size:12px;white-space:nowrap;
  transition:all .2s;
}
.wa-send-btn:hover:not(:disabled){background:#128C7E!important;transform:translateY(-1px)}
.wa-send-btn:disabled{opacity:0.5;cursor:not-allowed!important}
.wa-send-free{background:#075E54!important}
.wa-send-free:hover:not(:disabled){background:#054D44!important}

/* Mobile responsive */
@media(max-width:768px){
  .wa-container{height:calc(100vh - 280px);min-height:350px}
  .wa-msg{max-width:90%}
  .wa-header{padding:10px 14px;gap:8px}
  .wa-send-row,.wa-freeform-row{flex-wrap:wrap}
  .wa-select,.wa-input{font-size:14px;min-width:0}
}

/* ═══════════════════════════════════════════════
   MOBILE: CRM Module Responsive (768px)
   ═══════════════════════════════════════════════ */
@media(max-width:768px){
  /* ── Annual Reports Dashboard ── */
  .ard-header,.ard-actions,.ard-list,.ard-search-wrap,.ard-filters{padding-left:12px!important;padding-right:12px!important}
  .ard-stats{grid-template-columns:1fr 1fr!important}
  .ard-row{flex-wrap:wrap!important;gap:6px!important;padding:10px 12px!important}
  .ard-stations{display:none!important}
  .ard-frac{display:none!important}
  .ard-info{min-width:0!important;flex:1 1 auto!important}
  .ard-row-btns{margin-right:auto!important}
  .ard-row-btns button{min-width:36px!important;min-height:36px!important}

  /* ── Annual Reports Client View ── */
  .arws-body{flex-direction:column!important}
  .arws-nav{width:100%!important;height:auto!important;max-height:none!important;flex-direction:row!important;overflow-x:auto!important;border-left:none!important;border-bottom:1px solid var(--border)!important;flex-shrink:0!important}
  .arws-nav-item{white-space:nowrap!important;padding:10px 14px!important}
  .arws-main{padding:14px!important}
  .arws-topbar{flex-wrap:wrap!important;gap:8px!important;padding:12px 14px!important}
  .arws-topbar-right{flex-wrap:wrap!important;gap:6px!important}
  .arws-progress-track{width:100px!important}
  .arws-qa-grid{grid-template-columns:1fr!important}

  /* ── Modal internals: 2-col grids → 1 col ── */
  .modal [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  .modal [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
  .modal td[style*="width:160"]{width:100px!important}
  .modal td[style*="width: 160"]{width:100px!important}

  /* ── Onboarding session rows ── */
  #tab-onboarding>div>div{padding-left:12px!important;padding-right:12px!important}

  /* ── Tasks filter bar ── */
  #tab-tasks select{font-size:12px!important;min-width:0!important;flex:1 1 auto!important}
  #tab-tasks input[type="text"]{max-width:none!important;flex:1 1 100%!important}
  #tab-tasks th[style*="min-width:140"]{min-width:100px!important}
  #tab-tasks td[style*="min-width:240"]{min-width:160px!important}

  /* ── Clients: billing 6-col → 4-col ── */
  [style*="grid-template-columns:repeat(6"]{grid-template-columns:repeat(4,1fr)!important}

  /* ── Clients: 3-col info grids ── */
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important}
}

/* ═══════════════════════════════════════════════
   MOBILE: Narrow phones (480px)
   ═══════════════════════════════════════════════ */
@media(max-width:480px){
  .ard-stats{grid-template-columns:1fr!important}
  .ard-row{padding:8px!important}
  .ard-av{width:32px!important;height:32px!important;font-size:12px!important}
  .arws-topbar{padding:10px!important}
  .arws-main{padding:10px!important}

  /* Billing grids → 3 col */
  [style*="grid-template-columns:repeat(6"]{grid-template-columns:repeat(3,1fr)!important}
  [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important}

  /* Tasks: tighter columns */
  #tab-tasks th[style*="min-width"]{min-width:80px!important}
  #tab-tasks td[style*="min-width:240"]{min-width:120px!important}

  /* Modal padding tighter */
  .modal-body{padding:8px!important}
}