.ico{display:inline-flex;align-items:center;justify-content:center;width:1.4em;height:1.4em;padding:3px;background:var(--brand);border-radius:6px;color:#fff;vertical-align:-0.2em;flex-shrink:0}
button .ico,a .ico,.btn-p .ico,.btn-s .ico,.sbtn .ico,.fb-wiz-prog-dot .ico,.fb-dot-check,.db-hdr-ico .ico,.db-back-btn .ico,.logout-confirm-box .ico,.lc-ico .ico,.cmp-tab .ico,.fb-tab-btn .ico,td .ico,th .ico,.adash-export-btn .ico,.col-chooser-hdr .ico,.adash-filter-bar label .ico,.pipe-card .ico{background:none;padding:0;border-radius:0;color:currentColor}
:root{
  /* ══ Hammer Design System v2 — LIGHT MODE ══ */

  /* Backgrounds */
  --bg:#FAFAF7;--card:#FFFFFF;--card2:#F4F4F1;--card3:#EDEDED;
  --bg-page:#FAFAF7;

  /* Text */
  --t1:#0A0A0A;--t2:rgba(0,0,0,.62);--t3:rgba(0,0,0,.42);--ton:#FFFFFF;

  /* Lines */
  --line:rgba(0,0,0,.08);--line-strong:rgba(0,0,0,.18);

  /* Brand — Dark Gold */
  --brand:#b8860b;--brand-hover:#a0750a;--brand-dark:#8B6914;
  --brand-light:#d4a017;--brand-bg:rgba(184,134,11,.10);--brand-bg2:rgba(184,134,11,.18);
  --on-brand:#FFFFFF;

  /* Light mode core tokens */
  --accent:#b8860b;--accent-text:#FFFFFF;--accent-strong:#a0750a;--surface:#FFFFFF;--surface-2:#F4F4F1;

  /* Accent aliases (backward compat) */
  --c1:#b8860b;--c2:#a0750a;--c3:#16A34A;--c4:#DC2626;--c5:#7C3AED;--c6:#16A34A;
  --a1:#b8860b;--a2:#a0750a;--a3:#8B6914;--a4:#d4a017;--a5:rgba(184,134,11,.10);

  /* Status Colors — deeper for light backgrounds */
  --green:#16A34A;--green-dim:#15803D;--green-bg:rgba(22,163,74,.10);
  --red:#DC2626;--red-dim:#B91C1C;--red-bg:rgba(220,38,38,.08);
  --blue:#2563EB;--blue-dim:#1D4ED8;--blue-bg:rgba(37,99,235,.08);
  --purple:#7C3AED;--purple-dim:#6D28D9;--purple-bg:rgba(124,58,237,.08);
  --orange:#EA580C;--orange-bg:rgba(234,88,12,.08);
  --cyan:#0891B2;--cyan-bg:rgba(8,145,178,.08);
  --pink:#DB2777;--pink-bg:rgba(219,39,119,.08);

  /* Semantic */
  --pos:#16A34A;--neg:#DC2626;--warn:#CA8A04;--info:#2563EB;

  /* Layout */
  --gap:16px;--r:12px;--r-sm:6px;--r-lg:12px;

  /* Borders */
  --bdr:rgba(0,0,0,.08);--bdr2:rgba(0,0,0,.12);

  /* Sidebar */
  --sb-bg:#FFFFFF;--sb-card:#F4F4F1;--sb-t1:#0A0A0A;--sb-t2:rgba(0,0,0,.55);--sb-bdr:rgba(0,0,0,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'IBM Plex Sans Arabic','Inter',-apple-system,sans-serif;background:var(--bg);color:var(--t1);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.wrap{max-width:1440px;margin:0 auto;padding:32px 40px 60px}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.14);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.28)}
/* Tabular nums for numeric values */
.num{font-variant-numeric:tabular-nums;font-feature-settings:'tnum';font-family:'Inter','IBM Plex Sans Arabic',sans-serif}
/* Live dot animation */
.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#16A34A;animation:pulse-dot 1.6s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.35}}
/* Rise animation */
@keyframes anim-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.anim-rise{animation:anim-rise .4s cubic-bezier(.2,.7,.3,1) both}


/* ── LOGIN (Minimal Split) ── */
#login-screen{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;display:flex;overflow:hidden}

/* Split Layout */
.login-split{display:grid;grid-template-columns:1.05fr 1fr;width:100%;height:100%;min-height:720px}
@media(max-width:900px){.login-split{grid-template-columns:1fr;}.login-brand-panel{display:none!important}}

/* Brand Panel (Left/Right in RTL) */
.login-brand-panel{background:#0B0B0A;color:#F5F3EC;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px 56px}
.login-brand-grid{position:absolute;inset:0;background-image:linear-gradient(to right,rgba(245,243,236,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(245,243,236,.04) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.login-brand-mark{display:flex;align-items:center;gap:14px;position:relative;z-index:1}
.login-brand-logo{width:72px;height:72px;display:grid;place-items:center;background:#fff;padding:6px}
.login-brand-logo img{width:100%;height:100%;object-fit:contain;display:block}
.login-brand-name{font-family:'Space Grotesk','IBM Plex Sans Arabic',system-ui,sans-serif;font-size:17px;letter-spacing:-0.01em;font-weight:600}
.login-brand-hero{position:relative;z-index:1;max-width:520px}
.login-brand-headline{font-size:54px;line-height:1.2;font-weight:500;letter-spacing:-0.02em;text-wrap:balance}
.login-brand-headline em{font-style:normal;color:var(--brand)}
.login-brand-sub{margin-top:20px;font-size:16px;color:rgba(245,243,236,.62);max-width:440px;line-height:1.55}
.login-brand-foot{position:relative;z-index:1;font-size:11px;color:rgba(245,243,236,.5);text-transform:uppercase;letter-spacing:.1em}

/* Form Panel (Right/Left in RTL) */
.login-form-panel{background:#FAFAF7;display:flex;flex-direction:column;padding:40px 56px;position:relative}
.login-form-wrap{flex:1;display:flex;align-items:center;justify-content:center}
.login-form-inner{width:100%;max-width:420px}

/* Form Elements */
.login-form-label{font-family:'IBM Plex Mono','IBM Plex Sans Arabic',monospace;font-size:11px;color:#6B6B66;text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px}
.login-form-title{font-size:32px;font-weight:500;letter-spacing:-0.02em;line-height:1.15;margin-bottom:10px;color:#0B0B0B}
.login-form-subtitle{font-size:14px;color:#6B6B66;margin-bottom:36px;line-height:1.5}

.login-field{margin-bottom:20px}
.login-field label{display:block;font-size:13px;font-weight:500;margin-bottom:8px;color:#2A2A28}
.login-input-wrap{position:relative;display:flex;align-items:center;background:#FFFFFF;border:1px solid #D4D2CA;transition:border-color .15s,box-shadow .15s}
.login-input-wrap:focus-within{border-color:#0B0B0B;box-shadow:0 0 0 3px rgba(242,197,11,.25)}
.login-input-wrap input{flex:1;border:none;outline:none;background:transparent;padding:14px 16px;font-size:15px;color:#0B0B0B;font-family:inherit}
.login-input-wrap input::placeholder{color:#6B6B66}
.login-input-wrap .login-input-icon{padding-inline-start:14px;color:#6B6B66;display:grid;place-items:center}
.login-input-wrap .login-input-icon svg{width:16px;height:16px}
.login-input-wrap .login-eye-btn{padding:0 14px;color:#6B6B66;background:none;border:none;cursor:pointer}
.login-input-wrap .login-eye-btn:hover{color:#0B0B0B}

.login-row-between{display:flex;justify-content:space-between;align-items:center;margin:8px 0 28px}
.login-check{display:flex;align-items:center;gap:10px;font-size:13px;color:#2A2A28;cursor:pointer}
.login-check input{appearance:none;width:16px;height:16px;border:1.5px solid #D4D2CA;background:#FFFFFF;display:grid;place-items:center;position:relative;cursor:pointer}
.login-check input:checked{background:#0B0B0B;border-color:#0B0B0B}
.login-check input:checked::after{content:"";width:8px;height:4px;border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg);margin-top:-2px}
.login-forgot{font-size:13px;color:#2A2A28;text-decoration:none;border-bottom:1px dashed #D4D2CA;padding-bottom:1px}
.login-forgot:hover{color:#0B0B0B;border-color:#0B0B0B}

.login-btn-primary{width:100%;background:#0A0A0A;color:#b8860b;padding:16px 20px;font-weight:600;font-size:15px;letter-spacing:-0.005em;display:flex;align-items:center;justify-content:center;gap:12px;transition:transform .1s,box-shadow .15s;position:relative;border:none;cursor:pointer;font-family:inherit}
.login-btn-primary:hover{box-shadow:0 6px 0 -2px #0B0B0B;transform:translate(2px,-2px)}
.login-btn-primary:active{transform:translate(0,0);box-shadow:none}
.login-btn-primary .arrow{display:inline-block;transition:transform .2s}
[dir="rtl"] .login-btn-primary .arrow{transform:scaleX(-1)}
.login-btn-primary:hover .arrow{transform:translateX(3px)}
[dir="rtl"] .login-btn-primary:hover .arrow{transform:scaleX(-1) translateX(3px)}

/* Steps inside the form */
.login-step{display:none}
.login-step.active{display:block}

/* Department/Role selection grid */
.login-dept-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.login-dept-opt{background:#FFFFFF;border:1.5px solid #D4D2CA;padding:18px 14px;cursor:pointer;transition:all .22s;text-align:center;position:relative}
.login-dept-opt:hover{border-color:rgba(255,212,0,.5);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.login-dept-opt.active{border-color:var(--brand);background:rgba(255,212,0,.04);box-shadow:0 0 0 3px rgba(245,158,11,.12)}
.login-dept-opt .ldo-icon{font-size:28px;margin-bottom:8px}
.login-dept-opt .ldo-name{font-size:14px;font-weight:600;color:#0B0B0B;margin-bottom:2px}
.login-dept-opt .ldo-sub{font-size:11px;color:#6B6B66}

/* User badge in steps */
.login-user-badge{display:flex;align-items:center;gap:12px;margin-bottom:20px;padding:12px 16px;background:#FFFFFF;border:1px solid #E8E6DF}
.login-user-badge .lub-avatar{width:40px;height:40px;border-radius:50%;background:#0A0A0A;color:#b8860b;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px}
.login-user-badge .lub-name{font-weight:600;color:#0B0B0B;font-size:14px}
.login-user-badge .lub-role{font-size:11px;color:#6B6B66;margin-top:1px}

/* Back button */
.login-back-btn{background:none;border:none;color:#6B6B66;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;padding:0;display:flex;align-items:center;gap:4px;margin-bottom:16px;transition:color .2s}
.login-back-btn:hover{color:#0B0B0B}

/* Error messages */
.login-err{color:#B8362B;font-size:12px;min-height:18px;margin:5px 0;text-align:center}

/* DB Section button */
.login-db-section{margin-top:24px;padding-top:20px;border-top:1px solid #E8E6DF}
.login-db-btn{display:flex;align-items:center;gap:12px;width:100%;background:#FFFFFF;border:1px solid #D4D2CA;padding:14px 16px;cursor:pointer;transition:all .2s;font-family:inherit;text-align:right}
.login-db-btn:hover{border-color:var(--brand);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.06)}
.login-db-ico{width:36px;height:36px;background:rgba(255,212,0,.08);display:flex;align-items:center;justify-content:center;color:var(--brand)}
.login-db-ico svg{width:18px;height:18px}
.login-db-title{font-size:13px;font-weight:600;color:#0B0B0B}
.login-db-desc{font-size:10px;color:#6B6B66;margin-top:2px}
.login-db-arr{margin-right:auto;color:#6B6B66;font-size:18px}

/* Login form foot */
.login-form-foot{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#6B6B66;text-transform:uppercase;letter-spacing:.12em;padding-top:20px}

/* Animations */
@keyframes loginFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.login-step.active{animation:loginFadeIn .3s ease both}

/* ── HEADER ── */
.hdr{color:var(--t1);padding:24px 32px;border-radius:0;margin-bottom:0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;border:none;border-bottom:1px solid var(--line)}
.hdr-sales{background:var(--card);border-bottom:1px solid var(--bdr2)}
.hdr-comp{background:var(--card);border-bottom:1px solid var(--bdr2)}
.hdr-title h1{font-size:28px;font-weight:700;color:var(--t1);letter-spacing:-.025em;line-height:1.1}
.hdr-title p{font-size:11px;color:var(--t2);margin-top:2px}
.hdr-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.filters{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.fg{display:flex;align-items:center;gap:5px}
.fg label{font-size:11px;color:var(--t2);white-space:nowrap;font-weight:600}
.fg select,.fg input[type="date"],.fg input[type="text"]{padding:5px 10px;border:1.5px solid var(--bdr);border-radius:8px;background:var(--card2);color:var(--t1);font-size:12px;outline:none;font-family:inherit;transition:border-color .2s}
.fg select:focus,.fg input[type="date"]:focus,.fg input[type="text"]:focus{border-color:var(--c1)}
.fg select option{background:var(--card2);color:var(--t1)}
.fg input[type="date"]{color-scheme:light}
.fg input[type="text"]::placeholder{color:var(--t2)}
.fg input[type="text"]{width:120px}
.sbtn{padding:6px 16px;font-size:12px;font-weight:700;background:#0A0A0A;color:#b8860b;border:none;border-radius:8px;cursor:pointer;transition:opacity .15s;font-family:inherit}
.sbtn:hover{background:#0A0A0A;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.user-tag{font-size:11px;color:var(--t1);background:var(--card2);padding:5px 12px;border-radius:8px;white-space:nowrap;font-weight:600;border:1px solid var(--bdr)}
.logout-btn{padding:5px 13px;background:rgba(248,113,113,.1);color:var(--red);border:1.5px solid rgba(248,113,113,.3);border-radius:8px;font-size:11px;cursor:pointer;font-family:inherit;font-weight:700;transition:background .15s,border-color .15s}
.logout-btn:hover{background:rgba(248,113,113,.2)}

/* ── TOP BAR ── */
.top-bar{background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:0;padding:12px 32px;margin-bottom:0;display:flex;align-items:center;flex-wrap:wrap;gap:10px;border:none;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.sbadge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:700}
.sb-s{background:rgba(184,134,11,.12);color:var(--brand)}.sb-r{background:rgba(74,222,128,.12);color:var(--green)}
.sdot{width:6px;height:6px;border-radius:50%;background:currentColor}
.cnt{font-size:12px;color:var(--t2)}
.brow{display:flex;gap:7px;flex-wrap:wrap;margin-right:auto}
.btn{padding:7px 16px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;border:none;transition:opacity .15s,background .15s;font-family:inherit}
.btn-p{background:#0A0A0A;color:#b8860b;border-radius:8px}.btn-p:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.btn-dl{background:var(--card2);color:var(--t1);border:1px solid var(--bdr)}.btn-dl:hover{background:var(--card3);transform:translateY(-1px)}
.btn-comp{background:#0A0A0A;color:#b8860b}.btn-comp:hover{background:#0A0A0A;opacity:.9}

/* ── SECTION TITLE ── */
.stitle{font-size:16px;font-weight:700;color:var(--t1);letter-spacing:-.01em;margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px}
.stitle::before{display:none}

/* ── KPIs ── */
.krow{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-bottom:var(--gap);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}
@media(max-width:1100px){.krow{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.krow{grid-template-columns:repeat(2,1fr)}}
.kpi{background:var(--card);border-radius:var(--r);padding:20px 20px 16px;border:1px solid var(--bdr);transition:border-color .15s,opacity .15s;position:relative;overflow:hidden}
.kpi::after{content:'';position:absolute;top:0;right:0;width:3px;height:100%;background:var(--c1);border-radius:var(--r) 0 0 var(--r)}
.kpi:hover{border-color:var(--bdr2);opacity:.9}


.kl{font-size:11px;color:var(--t3);letter-spacing:.1em;margin-bottom:14px;font-weight:600;text-transform:uppercase}
.kv{font-size:36px;font-weight:700;color:var(--t1);margin-bottom:12px;letter-spacing:-.04em;font-family:'Inter','IBM Plex Sans Arabic',sans-serif;line-height:1}
.kc{font-size:11.5px;font-weight:600;font-family:'Inter',sans-serif;display:inline-flex;align-items:center;gap:4px}.kc.pos{color:var(--pos)}.kc.neg{color:var(--neg)}

/* ── CHARTS ── */
.cr{display:grid;gap:var(--gap);margin-bottom:var(--gap)}
.cr2{grid-template-columns:2fr 1fr}.cr2e{grid-template-columns:1fr 1fr}
.cbox{background:var(--card);border-radius:12px;padding:22px 24px;border:1px solid var(--line)}
.cbox h3{font-size:13.5px;font-weight:700;color:var(--t1);margin-bottom:18px;letter-spacing:-.005em}
.cbox canvas{max-height:240px}

/* ── Comp/Admin chart cards ── */
.card{background:var(--card);border-radius:12px;border:1px solid var(--line);contain:layout style}
.chart-title{font-size:13.5px;font-weight:700;color:var(--t1);margin-bottom:18px;letter-spacing:-.005em}
.chart-wrap{position:relative;height:200px;width:100%}

/* ── CRM SECTION ── */
.crm-wrap{background:var(--card);border-radius:var(--r);margin-bottom:var(--gap);overflow:hidden;border:1px solid var(--bdr);contain:layout}
.crm-hdr{padding:16px 22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-bottom:1px solid var(--bdr)}
.crm-hdr-sales{background:var(--card)}
.crm-hdr-comp{background:var(--card)}
.crm-hdr h2{font-size:16px;font-weight:800;color:var(--t1)}
.crm-hdr p{font-size:11px;color:var(--t2);margin-top:2px}
.add-btn{padding:8px 18px;border-radius:9px;background:#0A0A0A;border:none;font-size:13px;font-weight:700;cursor:pointer;color:#b8860b;transition:opacity .15s;font-family:inherit}
.add-btn:hover{background:#0A0A0A;transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.18)}
.add-btn-sales{color:#FFF}.add-btn-comp{color:#FFF}

/* Pipeline */
.crm-pipeline{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:16px 32px;background:var(--bg);border-bottom:1px solid var(--bdr)}
.pipe-card{background:var(--card);border-radius:10px;padding:18px 20px;text-align:right;border:1px solid var(--line);transition:border-color .15s;position:relative}
.pipe-card.new{border-color:var(--line)}.pipe-card.prog{border-color:var(--line)}
.pipe-card.done{border-color:var(--line)}.pipe-card.lost{border-color:var(--line)}
.pipe-val{font-size:30px;font-weight:700;color:var(--t1);font-family:'Inter','IBM Plex Sans Arabic',sans-serif;letter-spacing:-.03em;line-height:1;margin-bottom:12px}
.pipe-lbl{font-size:11px;color:var(--t2);margin-bottom:12px;font-weight:600;letter-spacing:.04em}
.pipe-sub{font-size:11px;color:var(--t2);margin-top:1px}

/* Body & Form */
.crm-body{padding:24px 32px}
.eform{background:var(--card2);border-radius:12px;padding:16px 18px;margin-bottom:14px;border:1.5px dashed rgba(184,134,11,.25);display:none}
.eform.comp-form{background:var(--card2);border-color:rgba(184,134,11,.25)}
.eform h4{font-size:12px;font-weight:800;margin-bottom:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--c1)}
.eform-sales h4{color:var(--c1)}.eform-comp h4{color:var(--c1)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:9px}
.fg2{display:flex;flex-direction:column;gap:4px}
.fg2 label{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.4px}
.fg2 input,.fg2 select,.fg2 textarea{padding:8px 12px;border:1px solid var(--line);border-radius:8px;font-size:13px;outline:none;transition:border-color .2s;font-family:inherit;background:var(--card2);color:var(--t1)}
.fg2 input:focus,.fg2 select:focus{border-color:var(--brand)}
.fg2 select option{background:var(--card2);color:var(--t1)}
.fg2 input[readonly]{background:var(--card);color:var(--t2);cursor:default}
.fg2 textarea{resize:vertical;min-height:60px}
.factions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}
.save-btn{padding:8px 20px;border-radius:9px;border:none;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.save-btn-sales{background:#0A0A0A;color:#b8860b}.save-btn-sales:hover{background:#0A0A0A}
.save-btn-comp{background:#0A0A0A;color:#b8860b}.save-btn-comp:hover{background:#0A0A0A}
.clr-btn{padding:8px 14px;border-radius:9px;background:#0A0A0A;color:#b8860b;border:none;font-size:12px;cursor:pointer;font-family:inherit;transition:background .2s;font-weight:700}
.clr-btn:hover{background:#1a1a1a}
.falert{padding:8px 13px;border-radius:8px;font-size:12px;margin-top:8px}
.f-ok{background:rgba(74,222,128,.12);color:var(--green);border:1px solid rgba(74,222,128,.2)}.f-err{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.2)}

/* Table */
.tbl-scroll{overflow-x:auto;contain:layout style}
.crm-table-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.crm-table-toolbar span{font-size:12px;color:var(--t2)}
.filter-sel{padding:6px 10px;border:1.5px solid var(--bdr);border-radius:7px;font-size:12px;outline:none;background:var(--card2);color:var(--t1);cursor:pointer;font-family:inherit;transition:border-color .2s}
.filter-sel:focus{border-color:var(--c1)}
.filter-sel option{background:var(--card2);color:var(--t1)}
table.crmt{width:100%;border-collapse:collapse;font-size:13px}
table.crmt thead th{text-align:right;padding:11px 20px;border-bottom:1px solid var(--line);color:var(--t3);background:var(--surface-2);font-weight:600;font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;cursor:pointer;user-select:none}
table.crmt thead th:hover{color:var(--t1)}
table.crmt tbody td{padding:14px 20px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--t1);vertical-align:middle}
table.crmt tbody tr:hover{background:rgba(0,0,0,.02)}
table.crmt tbody tr:last-child td{border-bottom:none}
.emp-cell{font-weight:700;color:var(--c1)}
.del-btn{background:none;border:none;color:var(--red);cursor:pointer;font-size:13px;padding:3px 6px;border-radius:5px;transition:background .2s}
.del-btn:hover{background:rgba(248,113,113,.12)}

/* Badges */
.st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;background:rgba(0,0,0,.06);border:1px solid var(--line);font-family:'Inter','IBM Plex Sans Arabic',sans-serif}
.st::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.st-new{color:var(--brand)}.st-prog{color:#60A5FA}
.st-done{color:#34D399}.st-lost{color:var(--t3)}
.bdg{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.bdg-g{background:rgba(74,222,128,.12);color:var(--green)}.bdg-y{background:rgba(184,134,11,.12);color:var(--brand)}.bdg-r{background:rgba(248,113,113,.12);color:var(--red)}
/* Priority badges — Editorial */
/* Priority bars — Editorial */
.prio-bars{display:inline-flex;gap:2px;margin-right:6px}
.prio-bars i{width:3px;border-radius:1px;background:rgba(0,0,0,.10);font-style:normal}
.prio-bars i.on{background:var(--brand)}
.prio-bars i:nth-child(1){height:6px}
.prio-bars i:nth-child(2){height:9px}
.prio-bars i:nth-child(3){height:12px}
.p-urgent .prio-bars i.on{background:#F87171}
.p-high .prio-bars i.on{background:#FB923C}

.prio{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;font-family:'Inter',sans-serif}
.p-urgent{color:var(--red);background:transparent}.p-high{color:var(--orange);background:transparent}
.p-med{color:var(--t2);background:transparent}.p-low{color:var(--t3);background:transparent}
/* Inline edit selects in table */
.isel{padding:4px 8px;border-radius:20px;font-size:11px;font-weight:700;border:1.5px solid transparent;cursor:pointer;font-family:inherit;outline:none;transition:border-color .2s,box-shadow .2s}
.isel:hover{border-color:var(--bdr2)}.isel:focus{box-shadow:0 0 0 3px rgba(184,134,11,.15)}
.isel-status-new{background:rgba(184,134,11,.12);color:var(--brand)}
.isel-status-prog{background:rgba(96,165,250,.12);color:var(--blue)}
.isel-status-done{background:rgba(74,222,128,.12);color:var(--green)}
.isel-status-lost{background:rgba(248,113,113,.12);color:var(--red)}
.isel-prio-urgent{background:rgba(248,113,113,.15);color:var(--red)}
.isel-prio-high{background:rgba(251,146,60,.12);color:var(--orange)}
.isel-prio-med{background:rgba(184,134,11,.12);color:var(--brand)}
.isel-prio-low{background:rgba(74,222,128,.12);color:var(--green)}

/* Modal */
.ov{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,.4);backdrop-filter:blur(6px);z-index:1000;align-items:center;justify-content:center}
.ov.on{display:flex}
.modal{background:var(--card);border-radius:12px;padding:24px 28px;width:100%;max-width:540px;max-height:92vh;overflow-y:auto;box-shadow:0 24px 60px rgba(0,0,0,.5);border:1px solid var(--line)}
.modal h2{font-size:16px;font-weight:800;margin-bottom:14px;color:var(--t1)}
.mc{float:left;background:none;border:none;font-size:22px;cursor:pointer;color:var(--t2)}
.mc:hover{color:var(--t1)}
.dz{border:2px dashed var(--bdr2);border-radius:12px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;margin-bottom:10px;background:var(--card2)}
.dz:hover,.dz.drag{border-color:var(--c1);background:var(--card3)}
.dz .ico{font-size:28px;margin-bottom:5px}
.dz p{font-size:12px;color:var(--t2)}
.fmt-hint{background:var(--card2);border-radius:8px;padding:11px 14px;font-size:11px;color:var(--t2);margin-top:9px;line-height:1.9;border:1px solid var(--bdr)}
.fmt-hint code{background:var(--card3);color:var(--c1);padding:1px 5px;border-radius:4px;font-size:10px;border:1px solid var(--bdr2)}
.csv-prev table{width:100%;border-collapse:collapse;font-size:11px;margin-top:9px}
.csv-prev th{background:var(--card2);color:var(--c1);padding:5px 8px;text-align:right;font-size:10px;font-weight:700}
.csv-prev td{padding:4px 8px;border-bottom:1px solid var(--bdr);color:var(--t1)}
.mact{display:flex;gap:9px;margin-top:14px;justify-content:flex-end}
.btn-out{background:var(--card2);color:var(--t1);border:1.5px solid var(--bdr);padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s}
.btn-out:hover{background:var(--card3);border-color:var(--c1)}
.btn-ci{background:#0A0A0A;color:#b8860b;padding:7px 14px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:inherit;transition:opacity .15s}
.btn-ci:hover{background:#0A0A0A}
.footer{text-align:center;font-size:11px;color:var(--t3);padding:32px 40px;font-weight:500;font-family:'Inter','IBM Plex Sans Arabic',sans-serif;letter-spacing:.04em}


/* Customer avatar — Editorial */
.cust-avatar-circle{width:28px;height:28px;border-radius:50%;background:var(--card2);color:var(--t2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:1px solid var(--line);flex-shrink:0}
/* ── CUSTOMER DATABASE ── */
#cust-overlay{position:fixed;inset:0;background:var(--bg);z-index:5000;display:none;flex-direction:column;overflow:hidden;color:var(--t1)}
#cust-overlay.on{display:flex}
.cust-topbar{background:var(--card);border-bottom:2px solid var(--bdr2);padding:14px 24px;display:flex;align-items:center;gap:14px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.cust-topbar h1{font-size:18px;font-weight:800;color:var(--c1);flex:1}
.cust-close{padding:7px 16px;background:var(--card2);color:var(--t1);border:1.5px solid var(--bdr);border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s}
.cust-close:hover{border-color:var(--c1);color:var(--c1)}
.cust-body{display:flex;flex:1;overflow:hidden;gap:0}
.cust-sidebar{width:320px;flex-shrink:0;border-left:1px solid var(--bdr);background:var(--card);display:flex;flex-direction:column;overflow:hidden}
.cust-search-box{padding:14px 16px;border-bottom:1px solid var(--bdr);background:var(--card)}
.cust-search-box input{width:100%;padding:9px 13px;border:1.5px solid var(--bdr);border-radius:9px;font-size:13px;font-family:inherit;outline:none;background:var(--card2);color:var(--t1)}
.cust-search-box input:focus{border-color:var(--c1)}
.cust-search-box input::placeholder{color:var(--t2)}
.cust-count{font-size:11px;color:var(--t2);font-weight:600;margin-top:7px}
.cust-list{flex:1;overflow-y:auto;padding:8px}
.cust-card{padding:11px 13px;border-radius:10px;cursor:pointer;border:1.5px solid var(--bdr);margin-bottom:5px;transition:border-color .15s,background .15s;background:var(--card2)}
.cust-card:hover{background:var(--card3);border-color:var(--bdr2)}
.cust-card.active{background:var(--card3);border-color:var(--c1);box-shadow:0 2px 12px rgba(184,134,11,.12)}
.cust-card-name{font-size:13px;font-weight:700;color:var(--t1);margin-bottom:4px}
.cust-card-meta{display:flex;gap:8px;flex-wrap:wrap}
.cust-chip{font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;background:rgba(184,134,11,.1);color:var(--brand)}
.cust-chip.green{background:rgba(74,222,128,.1);color:var(--green)}
.cust-chip.blue{background:rgba(96,165,250,.1);color:var(--blue)}
.cust-add-btn{margin:10px 16px 14px;padding:9px;background:#0A0A0A;color:#b8860b;border:none;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;text-align:center;width:calc(100% - 32px);transition:all .2s}
.cust-add-btn:hover{background:#0A0A0A;transform:translateY(-1px)}
.cust-detail{flex:1;overflow-y:auto;padding:22px 28px;background:var(--bg)}
.cust-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--t2);gap:10px}
.cust-empty-state .ce-ico{font-size:52px}
.cust-empty-state p{font-size:14px;font-weight:600}
.cust-profile-hdr{display:flex;align-items:flex-start;gap:16px;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--bdr);flex-wrap:wrap}
.cust-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800;color:#111;flex-shrink:0}
.cust-profile-info{flex:1}
.cust-profile-info h2{font-size:20px;font-weight:800;color:var(--t1);margin-bottom:5px}
.cust-profile-info .cp-meta{font-size:12px;color:var(--t2);display:flex;gap:12px;flex-wrap:wrap}
.cust-stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:20px}
.cust-stat{background:var(--card);border-radius:10px;padding:12px 14px;text-align:center;border-top:3px solid var(--c1);border:1px solid var(--bdr);border-top:3px solid var(--c1)}
.cust-stat.red{border-top-color:var(--red)}.cust-stat.green{border-top-color:var(--green)}
.cust-stat-val{font-size:22px;font-weight:800;color:var(--t1)}
.cust-stat-lbl{font-size:10px;color:var(--t2);font-weight:700;margin-top:3px}
.cust-info-form{background:var(--card);border-radius:10px;padding:14px 16px;margin-bottom:20px;border:1px solid var(--bdr)}
.cust-info-form h4{font-size:11px;font-weight:800;color:var(--c1);text-transform:uppercase;letter-spacing:.6px;margin-bottom:11px}
.cust-section-title{font-size:11px;font-weight:800;color:var(--c1);text-transform:uppercase;letter-spacing:.7px;margin:20px 0 10px;display:flex;align-items:center;justify-content:space-between}
.cust-section-title span{background:#0A0A0A;color:#b8860b;padding:2px 9px;border-radius:20px;font-size:10px;font-weight:800}
.cust-purch-form{background:var(--card);border-radius:9px;padding:13px 15px;margin-bottom:12px;border:1.5px dashed var(--bdr2);display:none}
.no-history{background:var(--card2);border-radius:8px;padding:16px;text-align:center;font-size:12px;color:var(--t2);border:1px solid var(--bdr)}

/* ── COMPLAINT DETAIL ── */
.det-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--bdr)}
.det-header h2{margin:0;font-size:20px;font-weight:800;color:var(--t1);flex:1}
.det-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin-bottom:16px}
.det-field{background:var(--card2);border-radius:10px;padding:11px 14px;border-right:3px solid var(--c1)}
.det-field .dfl{font-size:9px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.det-field .dfv{font-size:14px;font-weight:700;color:var(--t1)}
.det-notes{background:var(--card2);border-radius:10px;padding:13px 16px;border:1px solid var(--bdr);margin-bottom:18px;line-height:1.8;font-size:13px;color:var(--t1)}
.det-notes-lbl{font-size:9px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.6px;margin-bottom:7px}
.hist-hdr{font-size:12px;font-weight:800;color:var(--c1);margin:18px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.hist-cnt{background:#0A0A0A;color:#b8860b;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:800}
.hist-empty{text-align:center;color:var(--t2);padding:20px;font-size:13px;background:var(--card2);border-radius:8px;border:1px solid var(--bdr)}
.view-btn{background:none;border:none;cursor:pointer;font-size:14px;padding:3px 6px;border-radius:5px;transition:background .2s;color:var(--t1)}
.view-btn:hover{background:var(--card3)}

@media(max-width:900px){.cr2,.cr2e{grid-template-columns:1fr}.hdr{flex-direction:column;align-items:flex-start}.crm-pipeline{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.krow{grid-template-columns:1fr 1fr}.fgrid{grid-template-columns:1fr 1fr}.crm-pipeline{grid-template-columns:1fr 1fr}.l-opts{grid-template-columns:1fr 1fr}.lcard{padding:24px 18px}}

/* invite banner removed */

/* ══ LOGIN — DATABASE BUTTON ═════════════════ */
.l-db-section{border-top:1px solid #E2E8F0;margin-top:18px;padding-top:16px}
.l-db-btn{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;background:#F8FAFC;border:1.5px solid #E2E8F0;border-radius:11px;cursor:pointer;transition:all .22s;color:#0F172A;font-family:inherit;text-align:right}
.l-db-btn:hover{background:#F1F5F9;border-color:rgba(184,134,11,.4);transform:translateY(-1px)}
.l-db-ico{font-size:26px;flex-shrink:0}
.l-db-title{font-size:12px;font-weight:700;color:#0F172A}
.l-db-desc{font-size:10px;color:var(--t3);margin-top:2px}
.l-db-arr{margin-right:auto;color:var(--t2);font-size:20px;line-height:1}

/* ══ DATABASE WRAP ═══════════════════════════ */
#db-wrap{display:none;flex-direction:column;min-height:100vh;background:var(--bg)}
#db-wrap.vis{display:flex}
.db-hdr{background:var(--card);border-bottom:2px solid var(--bdr2);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px}
.db-hdr-left{display:flex;align-items:center;gap:12px}
.db-hdr-ico{width:40px;height:40px;background:#0A0A0A;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;color:#000}
.db-hdr-title{color:var(--t1);font-size:17px;font-weight:800}
.db-hdr-sub{color:var(--t2);font-size:10px;margin-top:2px}
.db-back-btn{background:#0A0A0A;border:1.5px solid #0A0A0A;color:#b8860b;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .18s;flex-shrink:0}
.db-back-btn:hover{background:#0A0A0A;border-color:#0A0A0A;color:#b8860b}
/* Code gate */
.db-gate{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.db-gate-card{background:var(--card);border-radius:22px;padding:44px 40px;max-width:440px;width:100%;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.08);border:1px solid var(--bdr)}
.db-gate-ico{font-size:58px;margin-bottom:18px}
.db-gate-card h2{font-size:20px;font-weight:800;color:var(--t1);margin-bottom:8px}
.db-gate-card>p{font-size:13px;color:var(--t2);margin-bottom:26px;line-height:1.85}
#db-code-inp{width:100%;padding:15px;text-align:center;font-size:28px;font-weight:900;letter-spacing:8px;border:2px solid var(--bdr);border-radius:12px;font-family:'Courier New',monospace;outline:none;background:var(--card2);color:var(--t1);margin-bottom:10px;direction:ltr;text-transform:uppercase;transition:border-color .2s,background .2s;box-sizing:border-box}
#db-code-inp:focus{border-color:var(--c1);background:var(--card3)}
/* DB Gate shared input style */
#db-admin-user,#db-admin-pass{width:100%;padding:12px 14px;font-size:14px;border:2px solid var(--bdr);border-radius:12px;outline:none;background:var(--card2);color:var(--t1);font-family:inherit;box-sizing:border-box;transition:border-color .2s}
#db-admin-user:focus,#db-admin-pass:focus{border-color:var(--c1)}
#db-admin-user::placeholder,#db-admin-pass::placeholder{color:var(--t2)}
/* DB Gate tabs */
.db-tabs{display:flex;gap:0;margin-bottom:22px;border-radius:12px;overflow:hidden;border:1px solid var(--bdr);background:var(--card2)}
.db-tab{flex:1;padding:10px;border:none;background:transparent;color:var(--t2);font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .2s}
.db-tab.active{background:#0A0A0A;color:#b8860b}
.db-tab:not(.active):hover{background:var(--card3);color:var(--t1)}
#db-admin-msg{min-height:22px;font-size:12px;font-weight:700;margin:10px 0;padding:6px 10px;border-radius:7px}
#db-admin-msg.err{color:var(--red);background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2)}
#db-admin-msg.ok{color:var(--green);background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2)}
#db-code-msg{min-height:24px;font-size:12px;font-weight:700;margin-bottom:12px;padding:6px 10px;border-radius:7px}
#db-code-msg.err{color:var(--red);background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.2)}
#db-code-msg.ok{color:var(--green);background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2)}
.db-open-btn{width:100%;padding:14px;background:#0A0A0A;color:#b8860b;border:none;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;transition:opacity .15s,background .15s;letter-spacing:.2px}
.db-open-btn:hover{opacity:.9;background:#0A0A0A}
.db-gate-hint{margin-top:20px;font-size:11px;color:var(--t2);line-height:1.95;background:var(--card2);border-radius:10px;padding:12px 16px;text-align:right;border:1px solid var(--bdr)}
/* DB content layout */
.db-content-wrap{flex:1;display:flex;overflow:hidden;min-height:0}
.db-sidebar-col{width:300px;flex-shrink:0;background:var(--card);border-left:1px solid var(--bdr);display:flex;flex-direction:column;overflow:hidden}
.db-sidebar-top{padding:14px 16px;border-bottom:1px solid var(--bdr)}
.db-main-col{flex:1;overflow-y:auto;padding:24px;background:var(--bg)}

/* DB unlocked wrapper */
#db-unlocked{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0}
/* Employee phone-search view */
#db-emp-view{display:none;flex:1;align-items:center;justify-content:center;padding:40px 20px}
.db-emp-card{background:var(--card);border-radius:22px;padding:44px 40px;max-width:520px;width:100%;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.08);border:1px solid var(--bdr)}
.db-emp-card-ico{font-size:56px;margin-bottom:16px}
.db-emp-card h2{font-size:20px;font-weight:800;color:var(--t1);margin-bottom:8px}
.db-emp-card>p{font-size:13px;color:var(--t2);margin-bottom:24px;line-height:1.8}
#db-phone-inp{width:100%;padding:13px 16px;font-size:20px;font-weight:700;letter-spacing:2px;border:2px solid var(--bdr);border-radius:12px;outline:none;background:var(--card2);color:var(--t1);margin-bottom:10px;font-family:'Courier New',monospace;text-align:center;box-sizing:border-box;transition:border-color .2s;direction:ltr}
#db-phone-inp:focus{border-color:var(--c1)}
#db-phone-inp::placeholder{color:var(--t2)}
.db-phone-search-btn{width:100%;padding:13px;background:#0A0A0A;color:#b8860b;border:none;border-radius:10px;font-size:15px;font-weight:800;cursor:pointer;font-family:inherit;margin-bottom:18px;transition:opacity .15s,background .15s}
.db-phone-search-btn:hover{opacity:.9;background:#0A0A0A}
.db-phone-card{background:var(--card2);border:1px solid var(--bdr);border-radius:16px;padding:20px;text-align:right}
.db-phone-card-name{font-size:18px;font-weight:800;color:var(--t1);margin-bottom:8px}
.db-phone-card-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;font-size:12px;color:var(--t2)}
.db-not-found{background:rgba(248,113,113,.08);border:1.5px solid rgba(248,113,113,.25);border-radius:12px;padding:20px;text-align:center;color:var(--red);font-weight:700;font-size:14px}

/* DB Admin view */
#db-admin-view{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0}
.db-admin-toolbar{background:var(--card);border-bottom:1px solid var(--bdr);padding:11px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px;flex-wrap:wrap}
.db-admin-stats{font-size:13px;font-weight:600;color:var(--t2)}
.db-admin-stats strong{color:var(--t1);font-size:15px}
.db-upload-btn{background:#0A0A0A;color:#b8860b;border:none;padding:9px 20px;border-radius:9px;font-size:12px;font-weight:800;cursor:pointer;font-family:inherit;transition:opacity .15s,background .15s;display:flex;align-items:center;gap:8px}
.db-upload-btn:hover{opacity:.9;background:#0A0A0A}
.db-csv-info{font-size:10px;color:var(--t2);margin-top:3px}
/* Emergency code panel (admin toolbar) */
.emrg-code-box{background:rgba(248,113,113,.08);border:1.5px solid rgba(248,113,113,.25);border-radius:10px;padding:8px 14px;text-align:center;min-width:160px}
.emrg-code-label{font-size:10px;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px}
.emrg-code-val{font-family:'Courier New',monospace;font-size:18px;font-weight:900;color:var(--red);letter-spacing:4px;transition:filter .3s;user-select:none}
.emrg-code-val[style*="blur"]{cursor:pointer}
.emrg-cd-badge{font-size:11px;font-weight:700;color:var(--red);background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.25);border-radius:20px;padding:2px 9px;white-space:nowrap;letter-spacing:.3px}
.emrg-change-btn{background:none;border:1px solid rgba(248,113,113,.3);border-radius:6px;color:var(--red);font-size:10px;font-weight:700;cursor:pointer;padding:3px 8px;margin-right:6px;font-family:inherit;transition:background .18s}
.emrg-change-btn:hover{background:rgba(248,113,113,.1)}
/* Upload log open button */
.ulog-open-btn{background:var(--card2);border:1.5px solid var(--bdr);color:var(--t1);border-radius:9px;padding:7px 14px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:6px;transition:all .2s}
.ulog-open-btn:hover{border-color:var(--c1);background:rgba(184,134,11,.06)}
.ulog-badge{background:#0A0A0A;color:#b8860b;border-radius:20px;font-size:10px;font-weight:800;padding:1px 7px;min-width:18px;text-align:center}
/* Upload log modal rows */
.ulog-row{display:flex;align-items:flex-start;gap:12px;background:var(--card2);border:1.5px solid var(--bdr);border-radius:11px;padding:12px 14px;animation:fadeUp .25s ease both}
.ulog-icon{font-size:22px;flex-shrink:0;margin-top:1px}
.ulog-info{flex:1;min-width:0}
.ulog-name{font-weight:700;color:var(--t1);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ulog-meta{color:var(--t2);font-size:11px;margin-top:3px;display:flex;flex-wrap:wrap;gap:6px}
.ulog-chip{background:var(--card3);border-radius:6px;padding:2px 8px;font-size:10px;font-weight:700;color:var(--t2)}
.ulog-actions{display:flex;flex-direction:column;gap:5px;flex-shrink:0}
.ulog-dl{background:rgba(74,222,128,.1);border:1.5px solid rgba(74,222,128,.3);border-radius:7px;color:var(--green);font-size:11px;font-weight:700;cursor:pointer;padding:4px 11px;font-family:inherit;white-space:nowrap;transition:background .15s}
.ulog-dl:hover{background:rgba(74,222,128,.2)}
.ulog-del{background:none;border:1.5px solid rgba(248,113,113,.25);border-radius:7px;color:var(--red);font-size:11px;font-weight:700;cursor:pointer;padding:4px 11px;font-family:inherit;white-space:nowrap;transition:background .15s}
.ulog-del:hover{background:rgba(248,113,113,.1)}

/* ══════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInScale{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideUpModal{from{opacity:0;transform:translateY(36px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slideInOverlay{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse-ring{0%,100%{box-shadow:0 0 0 0 rgba(184,134,11,.25)}50%{box-shadow:0 0 0 6px rgba(184,134,11,0)}}
@keyframes shimmer{0%{background-position:200% center}100%{background-position:-200% center}}
@keyframes countUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes ripple-anim{from{transform:scale(0);opacity:.5}to{transform:scale(4);opacity:0}}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(74,222,128,.6)}50%{opacity:.6;box-shadow:0 0 0 4px rgba(74,222,128,0)}}
@keyframes slideOverlay{from{opacity:0}to{opacity:1}}
@keyframes zoomIn{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}

/* ── Login card entrance ── */
.lcard{animation:fadeUp .55s cubic-bezier(.22,.68,0,1.2) both}
.lcard>p{animation:fadeIn .4s .35s ease both}
.l-dept:nth-child(1){animation:fadeUp .4s .2s ease both}
.l-dept:nth-child(2){animation:fadeUp .4s .3s ease both}
.l-dept:nth-child(3){animation:fadeUp .4s .35s ease both}
.l-sep{animation:fadeIn .4s .4s ease both}
.l-inp{animation:fadeUp .35s .45s ease both}
.l-btn{animation:fadeUp .35s .5s ease both}
.l-hint{animation:fadeIn .4s .6s ease both}
.l-db-section{animation:fadeUp .35s .55s ease both}

/* ── Header + top bar ── */
.hdr{animation:fadeDown .4s .05s ease both}
.top-bar{animation:fadeDown .4s .12s ease both}

/* ── KPI cards stagger (animations removed for performance) ── */

/* ── KPI value pop-in (removed — conflicts with scroll) ── */

/* ── Chart boxes stagger (animations removed for performance) ── */

/* ── Pipeline cards stagger (animations removed for performance) ── */

/* ── CRM wrap (animation removed for performance) ── */

/* ── Modal entrance ── */
.ov.on .modal{animation:slideUpModal .32s cubic-bezier(.22,.68,0,1.1) both}

/* ── Customer overlay slide ── */
#cust-overlay.on{animation:fadeIn .25s ease both}
#cust-overlay.on .cust-sidebar{animation:slideInRight .35s .05s cubic-bezier(.22,.68,0,1.1) both}
#cust-overlay.on .cust-topbar{animation:fadeDown .3s ease both}

/* ── DB wrap ── */
#db-wrap.vis{animation:fadeIn .3s ease both}
#db-wrap.vis .db-hdr{animation:fadeDown .3s ease both}
#db-wrap.vis .db-gate-card,#db-wrap.vis .db-emp-card{animation:zoomIn .38s cubic-bezier(.22,.68,0,1.2) both}

/* ── Section transition ── */
.section-enter{animation:fadeUp .35s ease both}

/* ── Active status dot pulse ── */
.sdot{animation:dotPulse 2s infinite ease-in-out}

/* invite banner animation removed */

/* ── Table rows (animation disabled for performance) ── */

/* ── Cust card hover ── */
.cust-card{transition:all .18s cubic-bezier(.22,.68,0,1.2)}
.cust-card:hover{transform:translateX(-3px)}
.cust-card.active{transform:translateX(-3px)}

/* ── Ripple container ── */
.ripple-host{position:relative;overflow:hidden}
.ripple{position:absolute;border-radius:50%;background:rgba(0,0,0,.10);pointer-events:none;transform:scale(0);animation:ripple-anim .55s linear forwards}

/* ── Upload log row entrance ── */
.ulog-row{animation:fadeUp .3s ease both}

/* ── DB stat card entrance ── */
.cust-stat{animation:fadeInScale .35s ease both}
.cust-stats-row .cust-stat:nth-child(1){animation-delay:.05s}
.cust-stats-row .cust-stat:nth-child(2){animation-delay:.1s}
.cust-stats-row .cust-stat:nth-child(3){animation-delay:.15s}
.cust-stats-row .cust-stat:nth-child(4){animation-delay:.2s}

/* ── KPI active border glow (removed for performance) ── */

/* ── Smooth section show/hide ── */
#sales-wrap,#db-wrap{transition:opacity .2s ease}

/* ══ COMPLAINTS WORKFLOW ══════════════════ */
/* Sub-sheet tabs */
.cmp-tabs{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.cmp-tab{padding:6px 14px;border-radius:20px;font-size:11px;font-weight:700;cursor:pointer;border:1.5px solid var(--bdr);background:var(--card2);color:var(--t2);transition:border-color .15s,color .15s,background .15s;font-family:inherit}
.cmp-tab:hover{border-color:var(--bdr2);color:var(--t1)}
.cmp-tab.active{background:rgba(184,134,11,.12);border-color:var(--c1);color:var(--c1)}
.cmp-tab-cnt{background:rgba(15,23,42,.06);border-radius:10px;padding:1px 6px;font-size:10px;margin-right:4px}
.cmp-tab.active .cmp-tab-cnt{background:rgba(184,134,11,.2)}
/* Sub-sheet badges on rows */
.ss-badge{display:inline-block;padding:1px 7px;border-radius:5px;font-size:9px;font-weight:800;margin-right:3px;white-space:nowrap}
.ss-screen{background:rgba(52,211,153,.12);color:#34D399;border:1px solid rgba(52,211,153,.3)}
.ss-bumper{background:rgba(192,132,252,.12);color:#C084FC;border:1px solid rgba(192,132,252,.3)}
.ss-attitude{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.3)}
.ss-escalated{background:rgba(251,146,60,.12);color:var(--orange);border:1px solid rgba(251,146,60,.3)}
.ss-exception{background:rgba(96,165,250,.12);color:var(--blue);border:1px solid rgba(96,165,250,.3)}
/* Status badges */
.cst-closed{background:rgba(74,222,128,.12);color:var(--green);border:1px solid rgba(74,222,128,.3);padding:2px 9px;border-radius:6px;font-size:10px;font-weight:800}
.cst-pending{background:rgba(251,146,60,.12);color:var(--orange);border:1px solid rgba(251,146,60,.3);padding:2px 9px;border-radius:6px;font-size:10px;font-weight:800}
/* Complaint modal form */
#cmp-modal .modal{max-width:780px;max-height:90vh;overflow-y:auto}
.cmp-form-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px 14px}
.cmp-span2{grid-column:span 2}
.cmp-span3{grid-column:span 3}
.cmp-fg label{font-size:11px;font-weight:700;color:var(--t2);display:block;margin-bottom:4px}
.cmp-fg input,.cmp-fg select,.cmp-fg textarea{width:100%;padding:9px 12px;border-radius:9px;background:var(--card2);border:1.5px solid var(--bdr);color:var(--t1);font-size:12px;font-family:inherit;outline:none;transition:border-color .2s}
.cmp-fg input:focus,.cmp-fg select:focus,.cmp-fg textarea:focus{border-color:var(--c1)}
.cmp-fg textarea{min-height:56px;resize:vertical}
.cmp-section{font-size:11px;font-weight:800;color:var(--c1);letter-spacing:.5px;text-transform:uppercase;grid-column:span 3;margin-top:6px;padding-bottom:4px;border-bottom:1px solid var(--bdr)}
/* Sub-sheet checkboxes */
.ss-checks{display:flex;flex-wrap:wrap;gap:8px;grid-column:span 3}
.ss-chk{display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:8px;border:1.5px solid var(--bdr);background:var(--card2);cursor:pointer;font-size:11px;font-weight:700;transition:border-color .15s,background .15s,color .15s;user-select:none}
.ss-chk:hover{border-color:var(--bdr2)}
.ss-chk.checked-screen{border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.08);color:#34D399}
.ss-chk.checked-bumper{border-color:rgba(192,132,252,.5);background:rgba(192,132,252,.08);color:#C084FC}
.ss-chk.checked-attitude{border-color:rgba(248,113,113,.5);background:rgba(248,113,113,.08);color:var(--red)}
.ss-chk.checked-escalated{border-color:rgba(251,146,60,.5);background:rgba(251,146,60,.08);color:var(--orange)}
.ss-chk.checked-exception{border-color:rgba(96,165,250,.5);background:rgba(96,165,250,.08);color:var(--blue)}
/* Description row (repeatable) */
.cf-desc-row{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px;padding:10px 12px;background:var(--card2);border:1px solid var(--bdr);border-radius:10px}
.cf-desc-row textarea{flex:1;min-height:40px;resize:vertical;padding:8px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--bdr);color:var(--t1);font-size:12px;font-family:inherit;outline:none}
.cf-desc-row textarea:focus{border-color:var(--c1)}
.cf-desc-row input[type="date"],.cf-desc-row input[type="text"]{padding:7px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--bdr);color:var(--t1);font-size:11px;font-family:inherit;outline:none;width:130px}
.cf-desc-row input:focus{border-color:var(--c1)}
.cf-desc-del{background:none;border:none;color:var(--red-dim);cursor:pointer;font-size:18px;padding:4px;line-height:1;opacity:.6;transition:opacity .15s}
.cf-desc-del:hover{opacity:1}
@media(max-width:768px){.cf-desc-row{flex-wrap:wrap}.cf-desc-row textarea{width:100%;flex:unset}.cf-desc-row input{flex:1;min-width:0}}
/* Complaint detail view */
.cmpdet-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-bottom:14px}
.cmpdet-field{background:var(--card2);border-radius:9px;padding:9px 13px;border:1px solid var(--bdr)}
.cmpdet-lbl{font-size:10px;color:var(--t2);font-weight:700;margin-bottom:3px}
.cmpdet-val{font-size:13px;color:var(--t1);font-weight:600}
.cmpdet-full{grid-column:span 2}
.cmpdet-section{font-size:11px;font-weight:800;color:var(--c1);grid-column:span 2;margin-top:8px;padding-bottom:4px;border-bottom:1px solid var(--bdr)}
/* Refund highlight */
.refund-amt{color:var(--red);font-weight:800}
/* Destination chip */
.dest-chip{display:inline-block;background:rgba(96,165,250,.1);color:var(--blue);border:1px solid rgba(96,165,250,.3);border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700}

/* ── Chart box hover (lightweight, no transform/shadow) ── */
.cbox{transition:border-color .15s,opacity .15s}
.cbox:hover{border-color:var(--bdr2);opacity:.93}

/* ── Pipeline card hover (no transform/shadow — causes scroll lag) ── */
.pipe-card{transition:border-color .15s,opacity .15s}
.pipe-card:hover{opacity:.88;border-color:var(--bdr2)}

/* ── KPI transition (lightweight) ── */
.kpi{transition:border-color .15s,opacity .15s}

/* ── Smooth focus glow on inputs (removed background transition — expensive) ── */
input,select,textarea{transition:border-color .15s,box-shadow .15s}

/* ── Page load entrance for whole wrap ── */
#sales-wrap{animation:none}

/* ── Smooth ulog row stagger ── */
#db-upload-log-body .ulog-row:nth-child(1){animation-delay:.05s}
#db-upload-log-body .ulog-row:nth-child(2){animation-delay:.1s}
#db-upload-log-body .ulog-row:nth-child(3){animation-delay:.15s}
#db-upload-log-body .ulog-row:nth-child(4){animation-delay:.2s}
#db-upload-log-body .ulog-row:nth-child(5){animation-delay:.25s}

/* ── Cust list entrance stagger ── */
.cust-list .cust-card{animation:fadeUp .28s ease both}
.cust-list .cust-card:nth-child(1){animation-delay:.03s}
.cust-list .cust-card:nth-child(2){animation-delay:.07s}
.cust-list .cust-card:nth-child(3){animation-delay:.11s}
.cust-list .cust-card:nth-child(4){animation-delay:.15s}
.cust-list .cust-card:nth-child(5){animation-delay:.19s}
.cust-list .cust-card:nth-child(n+6){animation-delay:.22s}

/* ── Detail field hover (removed transform/shadow for performance) ── */
.det-field{transition:border-color .15s}
.det-field:hover{border-color:var(--bdr2)}

/* ── Badge transitions (specific props only — 'all' triggers scroll repaints) ── */
.st,.bdg,.prio{transition:background .15s,color .15s}

/* ── Smooth delete btn ── */
.del-btn{transition:color .18s ease,background .18s ease,transform .15s ease}
.del-btn:hover{transform:scale(1.15)}

/* ══════════════════════════════════════
   INTRO SCREEN
══════════════════════════════════════ */
@keyframes introTextIn {from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes introTextOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}
@keyframes introBgOut  {from{opacity:1}to{opacity:0}}
@keyframes introLine   {from{width:0}to{width:100%}}
@keyframes introDot    {0%,100%{transform:scale(1)}50%{transform:scale(1.6)}}

#intro-screen{
  position:fixed;inset:0;background:var(--bg);z-index:99999;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  pointer-events:all;
}
#intro-screen.out{animation:introBgOut .55s .1s ease forwards}

.intro-word{
  font-size:clamp(28px,6vw,54px);font-weight:900;letter-spacing:-.5px;
  color:var(--t1);font-family:'IBM Plex Sans Arabic',sans-serif;
  opacity:0;line-height:1.1;
}
.intro-word.hammer{color:var(--c1);text-shadow:0 0 40px rgba(184,134,11,.35)}
.intro-word.protection{font-size:clamp(14px,2.8vw,22px);font-weight:600;color:var(--t2);letter-spacing:3px;text-transform:uppercase;margin-top:6px}
.intro-word.dashboard{
  font-size:clamp(32px,7vw,62px);font-weight:900;color:var(--t1);
  letter-spacing:-1px;
}
.intro-line{
  width:0;height:3px;background:linear-gradient(90deg,transparent,var(--c1),transparent);
  border-radius:2px;margin:18px 0 6px;opacity:0;
}
.intro-badge{
  font-size:11px;font-weight:700;color:var(--t2);letter-spacing:2px;text-transform:uppercase;
  opacity:0;margin-top:10px;
}
.intro-dots{display:flex;gap:7px;margin-top:28px;opacity:0}
.intro-dots span{width:7px;height:7px;border-radius:50%;background:var(--c1);opacity:.3}
.intro-dots span:nth-child(2){animation-delay:.2s}
.intro-dots span:nth-child(3){animation-delay:.4s}
.intro-dots.active span{animation:introDot 1s infinite ease-in-out;opacity:1}

/* ══════════════════════════════════════════
   ADMIN DASHBOARD
══════════════════════════════════════════ */
#admin-dash-wrap{display:none;flex-direction:column;height:100vh;overflow:hidden;background:var(--bg)}
#admin-dash-wrap.vis{display:flex}

/* ── Sidebar (stays dark) ── */
.adash-sb{width:240px;min-width:240px;background:#FFFFFF;border-left:1px solid rgba(0,0,0,.08);display:flex;flex-direction:column;padding:0;height:100%;overflow:visible;transform:translateZ(0);transition:width .25s cubic-bezier(.4,0,.2,1),min-width .25s cubic-bezier(.4,0,.2,1);z-index:100;position:relative}
.adash-sb.collapsed{width:80px;min-width:80px}
.adash-sb.collapsed .adash-sb-logo img{width:40px!important}
.adash-sb.collapsed .adash-nav-item,.adash-sb.collapsed .adash-nav-sub-hdr,.adash-sb.collapsed .adash-nav-crm-btn,.adash-sb.collapsed .adash-nav-sub-body,.adash-sb.collapsed .adash-nav-sec-body,.adash-sb.collapsed .nsc,.adash-sb.collapsed .adash-back-btn,.adash-sb.collapsed .adash-sb-footer,.adash-sb.collapsed .adash-sb-logo{display:none}
.adash-sb.collapsed .adash-nav-item{justify-content:center;padding:11px 8px;display:none}
.adash-sb.collapsed .adash-nav-item .adni{font-size:18px;margin:0}
.adash-sb.collapsed .adash-nav-sec-hdr{justify-content:center;padding:8px;font-size:0;position:relative;background:transparent;border:none;box-shadow:none}
/* Tooltip on hover in collapsed state */
.adash-sb.collapsed .adash-nav-item[title]:hover::after,.adash-sb.collapsed .adash-nav-sec-hdr[title]:hover::after{content:attr(title);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);background:var(--sb-bg);color:var(--t1);padding:5px 10px;border-radius:6px;font-size:11px;white-space:nowrap;z-index:100;pointer-events:none;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.adash-sb.collapsed .adash-nav-sec-hdr span:first-child{font-size:0;display:flex;align-items:center;justify-content:center}
.adash-sb.collapsed .adash-nav-sec-hdr span:first-child .ico{font-size:20px;width:20px;height:20px;color:var(--brand)}
/* Flyout popup for collapsed sections */
.sb-flyout{display:none;position:absolute;right:calc(100% + 6px);top:0;background:var(--sb-card);border:1px solid var(--brand);border-radius:10px;padding:6px;min-width:220px;z-index:9999;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.sb-flyout.show{display:block}
.sb-flyout .sb-fly-title{font-size:10px;font-weight:800;color:var(--brand);padding:6px 10px 4px;text-transform:uppercase;letter-spacing:.5px}
.sb-flyout .sb-fly-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border:none;background:transparent;color:var(--t1);font-family:inherit;font-size:12px;font-weight:600;border-radius:8px;cursor:pointer;width:100%;text-align:right;transition:background .15s}
.sb-flyout .sb-fly-item:hover{background:rgba(255,215,0,.12);color:var(--brand)}
.sb-flyout .sb-fly-item .ico{color:var(--brand);width:14px;height:14px}
.adash-sb.collapsed .adash-nav-sub-hdr{justify-content:center;padding:9px 8px;display:none}
.adash-sb.collapsed .adash-sb-nav{padding:14px 8px;overflow:visible}
/* Collapse toggle button */
.sb-collapse-btn{width:100%;padding:10px;border-radius:8px;background:rgba(0,0,0,.04);color:var(--t2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:all .2s;box-shadow:none;margin-bottom:6px;font-family:inherit;font-weight:600}
.sb-collapse-btn:hover{background:rgba(0,0,0,.06);color:var(--t1);border-color:var(--line-strong)}
.adash-sb-logo{padding:28px 20px 24px;border-bottom:1px solid var(--sb-bdr);overflow:hidden;white-space:nowrap}
.adash-sb-logo h2{font-size:15px;font-weight:800;color:var(--c1);letter-spacing:.5px}
.adash-sb-logo p{font-size:11px;color:var(--sb-t2);margin-top:2px}
.adash-sb-nav{flex:1;padding:20px 20px 20px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.adash-nav-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border:none;background:transparent;color:var(--t2);font-family:inherit;font-size:13.5px;font-weight:500;border-radius:6px;cursor:pointer;width:100%;text-align:right;transition:color .15s,background .15s;position:relative}
.adash-nav-item:hover{color:var(--t1);background:rgba(0,0,0,.04)}
.adash-nav-item.active{color:var(--t1);background:rgba(0,0,0,.04);font-weight:600}
.adash-nav-item.active::before{content:'';position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:2px;height:18px;background:var(--brand)}
.adash-nav-item .adni{font-size:16px}
.adash-sb-nav::-webkit-scrollbar-track{background:var(--sb-bg)}
.adash-sb-nav::-webkit-scrollbar-thumb{background:#334155;border-radius:3px}
.adash-sb-nav::-webkit-scrollbar-thumb:hover{background:#475569}
.adash-sb-footer{padding:16px 20px;border-top:1px solid var(--line);margin-top:auto}
/* ── Collapsible nav sections (dark sidebar) ── */
.adash-nav-sec-hdr{display:flex;align-items:center;justify-content:space-between;padding:0 4px;margin-top:20px;margin-bottom:10px;width:100%;font-family:inherit;font-size:10px;font-weight:600;color:var(--t3);letter-spacing:.14em;text-transform:uppercase;cursor:default;background:transparent;border:none;border-radius:0;transition:color .15s}
.adash-nav-sec-hdr:hover{color:var(--t3)}
.adash-nav-sec-hdr .nsc{display:none}
.adash-nav-sec-hdr.open .nsc{display:none}
.adash-nav-sec-body{display:none;flex-direction:column;gap:2px;padding:4px 0 2px 8px}
.adash-nav-sec-body.open{display:flex}
.adash-nav-sub-hdr{display:flex;align-items:center;gap:8px;padding:9px 10px;background:transparent;border:none;border-radius:8px;cursor:pointer;width:100%;font-family:inherit;font-size:12px;font-weight:700;color:var(--sb-t2);transition:background .15s,color .15s;justify-content:space-between}
.adash-nav-sub-hdr:hover{background:rgba(0,0,0,.06);color:var(--sb-t1)}
.adash-nav-sub-hdr.open{color:var(--sb-t1)}
.adash-nav-sub-hdr .nsc{font-size:9px;transition:transform .18s;display:inline-block}
.adash-nav-sub-hdr.open .nsc{transform:rotate(180deg)}
.adash-nav-sub-body{display:none;flex-direction:column;gap:2px;padding:2px 0 2px 10px}
.adash-nav-sub-body.open{display:flex}
.adash-nav-crm-btn{display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:8px;cursor:pointer;width:100%;font-family:inherit;font-size:11px;font-weight:700;transition:background .15s;border:1.5px solid;background:transparent}
.adash-back-btn{display:flex;align-items:center;gap:8px;padding:9px 12px;background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--t2);font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;width:100%;text-align:right;transition:background .15s,color .15s,border-color .15s}
.adash-back-btn:hover{background:rgba(0,0,0,.04);color:var(--t1);border-color:var(--line-strong)}
.adash-logout-btn:hover{background:rgba(248,113,113,.12)!important;color:var(--red)!important;border-color:rgba(248,113,113,.35)!important}
/* ── Global date filter bar ── */
.adash-filter-bar{display:flex;align-items:center;gap:8px;margin-bottom:22px;flex-wrap:wrap;padding:14px 20px;background:var(--surface);border:1px solid var(--line);border-radius:12px}
.adash-filter-bar label{font-size:11px;font-weight:700;color:var(--t2);margin-left:4px;white-space:nowrap}
.adash-filter-btn{padding:6px 12px;border:1px solid var(--line);background:var(--surface-2);border-radius:6px;color:var(--t2);font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px}
.adash-filter-btn:hover{background:rgba(0,0,0,.06);color:var(--t1)}
.adash-filter-btn.active{background:#0A0A0A;border-color:#0A0A0A;color:#FFFFFF}
.adash-filter-sep{width:1px;height:22px;background:var(--bdr);margin:0 4px;flex-shrink:0}
.adash-filter-range{display:flex;align-items:center;gap:6px;transition:opacity .18s}
.adash-filter-range input[type=date]{padding:5px 9px;background:var(--card2);border:1.5px solid var(--bdr);border-radius:8px;color:var(--t1);font-family:inherit;font-size:11px;cursor:pointer;transition:border-color .18s}
.adash-filter-range input[type=date]:focus{outline:none;border-color:var(--c1)}
.adash-filter-range-apply{padding:5px 14px;background:#0A0A0A;color:#b8860b;border:none;border-radius:8px;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;white-space:nowrap}
/* ── Export buttons ── */
.adash-export-btn{padding:4px 11px;border:none;background:#0A0A0A;border-radius:7px;color:#b8860b;font-family:inherit;font-size:10px;font-weight:700;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.adash-export-btn:hover{background:#1a1a1a;color:#d4a017}
/* ── Product Analytics ── */
.adash-prod-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
.adash-slow-list{max-height:220px;overflow-y:auto}
.adash-slow-item{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--bdr);font-size:12px}
.adash-slow-item:last-child{border-bottom:none}
.adash-slow-badge{font-size:10px;padding:2px 8px;border-radius:6px;font-weight:700;background:rgba(248,113,113,.12);color:var(--red)}
/* ── Geo / Zone section ── */
.adash-geo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:8px}
/* ── Targets & Commissions ── */
.adash-targets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:20px}
.adash-target-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;transition:border-color .15s}
.adash-target-card:hover{border-color:var(--line-strong)}
.adash-target-emp{font-weight:800;font-size:14px;margin-bottom:14px;color:var(--t1);display:flex;align-items:center;gap:8px}
.adash-target-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px}
.adash-target-row label{flex:0 0 110px;color:var(--t2);font-weight:700}
.adash-target-inp{flex:1;padding:5px 9px;background:var(--card2);border:1.5px solid var(--bdr);border-radius:7px;color:var(--t1);font-family:inherit;font-size:12px;transition:border-color .18s}
.adash-target-inp:focus{outline:none;border-color:var(--c1)}
.adash-target-stats{margin-top:12px;padding-top:12px;border-top:1px solid var(--bdr)}
.adash-target-pct-lbl{font-size:24px;font-weight:800;margin-bottom:4px}
.adash-target-bar-track{height:6px;background:var(--card3);border-radius:3px;overflow:hidden;margin-bottom:6px}
.adash-target-bar-fill{height:100%;border-radius:3px;transition:width .6s ease}
.adash-comm-val{font-size:13px;font-weight:800;color:#16A34A;margin-top:2px}
.adash-comm-lbl{font-size:10px;color:var(--t2)}
.adash-target-save-btn{width:100%;margin-top:10px;padding:7px 0;background:#0A0A0A;border:1.5px solid #0A0A0A;border-radius:8px;color:#b8860b;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer;transition:all .18s}
.adash-target-save-btn:hover{background:#0A0A0A;border-color:#0A0A0A}
/* ══ AUDIT LOG ══════════════════════════════════════════════════ */
.audit-tbl{width:100%;border-collapse:collapse;font-size:12px}
.audit-tbl th{padding:11px 16px;background:transparent;color:var(--t3);font-size:10.5px;font-weight:600;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;text-transform:uppercase;letter-spacing:.1em}
.audit-tbl td{padding:8px 10px;border-bottom:1px solid rgba(15,23,42,.06);vertical-align:middle;color:var(--t1)}
.audit-tbl tr:hover td{background:rgba(184,134,11,.03)}
.audit-day-sep td{background:rgba(96,165,250,.07);border-top:1.5px solid rgba(96,165,250,.18);border-bottom:1.5px solid rgba(96,165,250,.18);padding:6px 12px;font-size:11px;font-weight:800;color:var(--blue);letter-spacing:.4px}
.audit-day-sep:hover td{background:rgba(96,165,250,.07)}
.audit-badge{display:inline-block;padding:2px 8px;border-radius:5px;font-size:10px;font-weight:800;white-space:nowrap}
.audit-badge.create{background:rgba(74,222,128,.15);color:var(--green);border:1px solid rgba(74,222,128,.3)}
.audit-badge.update{background:rgba(184,134,11,.12);color:var(--brand);border:1px solid rgba(184,134,11,.25)}
.audit-badge.delete{background:rgba(248,113,113,.15);color:var(--red);border:1px solid rgba(248,113,113,.3)}
.audit-badge.login{background:rgba(96,165,250,.12);color:var(--blue);border:1px solid rgba(96,165,250,.25)}
.audit-nav-badge{display:inline-block;background:#F87171;color:#fff;border-radius:8px;padding:1px 6px;font-size:9px;font-weight:800;margin-right:4px;vertical-align:middle}
/* ══ SMART ALERTS ════════════════════════════════════════════════ */
.alert-card{background:var(--card2);border-radius:10px;padding:14px 16px;border-right:4px solid;margin-bottom:10px}
.alert-card.red{border-color:var(--red);background:rgba(248,113,113,.06)}
.alert-card.yellow{border-color:var(--brand-light);background:rgba(251,191,36,.06)}
.alert-card.blue{border-color:var(--blue);background:rgba(96,165,250,.06)}
.alert-card-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.alert-card-title{font-size:13px;font-weight:800}
.alert-card-cnt{font-size:22px;font-weight:900;line-height:1}
.alert-tbl{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:6px}
.alert-tbl th{padding:5px 8px;background:rgba(15,23,42,.03);color:var(--t2);font-size:11px;font-weight:700;text-align:right}
.alert-tbl td{padding:6px 8px;border-bottom:1px solid rgba(15,23,42,.06)}
/* ── CMP Customer Search ── */
.cmp-cust-search{background:rgba(184,134,11,.04);border:1.5px solid rgba(184,134,11,.18);border-radius:10px;padding:14px 16px;margin-bottom:4px}
.cmp-cust-search-hdr{font-size:12px;font-weight:800;color:var(--c1);margin-bottom:10px;display:flex;align-items:center;gap:6px;letter-spacing:.3px}
.cmp-cust-inp-row{display:flex;gap:8px;align-items:center}
.cmp-cust-inp{flex:1;background:var(--card3);border:1.5px solid var(--bdr);border-radius:8px;padding:8px 12px;color:var(--t1);font-family:inherit;font-size:13px;outline:none}
.cmp-cust-inp:focus{border-color:rgba(184,134,11,.4);box-shadow:0 0 0 3px rgba(184,134,11,.06)}
.cmp-cust-srch-btn{padding:8px 18px;background:#0A0A0A;color:#b8860b;border:none;border-radius:8px;font-family:inherit;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap;transition:opacity .15s}
.cmp-cust-srch-btn:hover{opacity:.85}
.cmp-cust-result{margin-top:12px;display:none}
.cmp-cust-result.vis{display:block}
.cmp-cust-found-card{background:var(--card2);border:1px solid var(--bdr);border-radius:9px;padding:12px 14px;margin-bottom:10px}
.cmp-cust-not-found{background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.2);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--red)}
.cmp-inv-table{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:8px}
.cmp-inv-table th{padding:6px 8px;background:var(--card3);color:var(--t2);text-align:right;font-size:11px;font-weight:700;border-bottom:1px solid var(--bdr)}
.cmp-inv-table td{padding:7px 8px;border-bottom:1px solid rgba(15,23,42,.06);vertical-align:middle}
.cmp-inv-table tr.sel-row td{background:rgba(184,134,11,.07)}
.cmp-inv-radio{width:15px;height:15px;accent-color:var(--c1);cursor:pointer}
.cmp-apply-btn{padding:7px 22px;background:#0A0A0A;color:#b8860b;border:none;border-radius:8px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:opacity .15s}
.cmp-apply-btn:disabled{opacity:.35;cursor:not-allowed}
.cmp-apply-btn:not(:disabled):hover{opacity:.85}
.cmp-success-note{background:rgba(74,222,128,.08);border:1px solid rgba(74,222,128,.25);border-radius:8px;padding:9px 13px;font-size:12px;color:var(--green)}
/* ── CRM Column Chooser ── */
.col-chooser-wrap{position:relative;display:inline-block}
.col-chooser-btn{padding:6px 13px;background:var(--card2);border:1.5px solid var(--bdr);border-radius:8px;color:var(--t2);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;transition:all .18s;display:flex;align-items:center;gap:5px}
.col-chooser-btn:hover,.col-chooser-btn.open{background:rgba(184,134,11,.1);border-color:rgba(184,134,11,.35);color:var(--c1)}
.col-chooser-drop{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;background:var(--card);border:1.5px solid var(--bdr);border-radius:12px;box-shadow:0 12px 36px rgba(0,0,0,.4);z-index:500;padding:12px;display:none;animation:fadeUp .18s ease}
.col-chooser-drop.open{display:block}
.col-chooser-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--bdr)}
.col-chooser-hdr span{font-size:11px;font-weight:800;color:var(--t1)}
.col-chooser-hdr button{font-size:10px;padding:2px 8px;border:1px solid var(--bdr);background:var(--card2);border-radius:5px;color:var(--t2);cursor:pointer;font-family:inherit;font-weight:700}
.col-chooser-hdr button:hover{color:var(--c1);border-color:rgba(184,134,11,.35)}
.col-item{display:flex;align-items:center;gap:8px;padding:5px 4px;border-radius:6px;cursor:pointer;transition:background .15s}
.col-item:hover{background:var(--card2)}
.col-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--c1);cursor:pointer;flex-shrink:0}
.col-item label{font-size:12px;color:var(--t1);cursor:pointer;font-weight:600;flex:1}
.col-item.fixed label{color:var(--t2);font-style:italic}
.col-chooser-footer{margin-top:10px;padding-top:8px;border-top:1px solid var(--bdr);display:flex;gap:6px}
.col-apply-btn{flex:1;padding:6px 0;background:#0A0A0A;color:#b8860b;border:none;border-radius:7px;font-family:inherit;font-size:11px;font-weight:800;cursor:pointer}
.col-reset-btn{padding:6px 10px;background:var(--card2);border:1px solid var(--bdr);border-radius:7px;color:var(--t2);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer}
.col-reset-btn:hover{color:var(--t1);border-color:var(--bdr2)}
/* ── Logout confirmation overlay ── */
#logout-confirm-ov{position:fixed;inset:0;background:rgba(15,23,42,.35);backdrop-filter:blur(6px);z-index:9999;display:none;align-items:center;justify-content:center}
#logout-confirm-ov.on{display:flex}
.logout-confirm-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:32px 36px;min-width:300px;max-width:360px;text-align:center;box-shadow:0 16px 40px rgba(0,0,0,.12);animation:fadeUp .25s ease}
.logout-confirm-box .lc-ico{font-size:38px;margin-bottom:12px}
.logout-confirm-box h3{font-size:17px;font-weight:800;color:var(--t1);margin-bottom:8px}
.logout-confirm-box p{font-size:13px;color:var(--t2);margin-bottom:24px;line-height:1.6}
.lc-btns{display:flex;gap:10px;justify-content:center}
.lc-btn-yes{flex:1;padding:11px 0;background:rgba(248,113,113,.15);border:1.5px solid rgba(248,113,113,.4);border-radius:10px;color:var(--red);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .18s}
.lc-btn-yes:hover{background:rgba(248,113,113,.28);border-color:var(--red)}
.lc-btn-no{flex:1;padding:11px 0;background:var(--card2);border:1.5px solid var(--bdr);border-radius:10px;color:var(--t1);font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .18s}
.lc-btn-no:hover{background:var(--card3);border-color:var(--bdr2)}

/* ══ BODY WRAP (sidebar + main side by side) ══════════════════ */
.adash-body-wrap{display:flex;flex:1;overflow:hidden;min-height:0}

/* ══ TOP NAVIGATION BAR ═══════════════════════════════════════ */
.adash-topnav{display:none}
.adash-topnav::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(184,134,11,.15),transparent);pointer-events:none}
/* Logo inside topnav */
.adash-topnav-logo{display:flex;flex-direction:column;line-height:1;flex-shrink:0;padding-left:16px;border-left:1px solid var(--bdr);margin-left:8px}
.adash-topnav-logo .tnl-h{font-size:14px;font-weight:900;color:var(--c1);letter-spacing:.3px}
.adash-topnav-logo .tnl-s{font-size:8px;font-weight:700;color:var(--t2);letter-spacing:3px;text-transform:uppercase;margin-top:2px}
/* Search bar */
.adash-topnav-search{position:relative;flex:0 0 280px}
.adash-topnav-search input{width:100%;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:7px 36px 7px 14px;color:var(--t1);font-family:inherit;font-size:12px;outline:none;transition:border-color .2s,background .2s;direction:rtl}
.adash-topnav-search input:focus{border-color:var(--line-strong);background:var(--surface)}
.adash-topnav-search input::placeholder{color:var(--t2)}
.adash-topnav-search-ico{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:12px;pointer-events:none;color:var(--t2);opacity:.7}
/* Page title in topnav */
.adash-topnav-pagetitle{font-size:13px;font-weight:700;color:var(--t2);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Right cluster */
.mobile-menu-btn{display:none}
.adash-topnav-right{display:flex;align-items:center;gap:8px;margin-right:auto}
/* Icon buttons (bell, settings) */
.adash-topnav-iconbtn{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:10px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;transition:all .18s;flex-shrink:0}
.adash-topnav-iconbtn:hover{border-color:var(--line-strong);background:var(--surface-2);transform:translateY(-1px)}
.adash-tnav-notif-badge{position:absolute;top:-5px;left:-5px;background:#EF4444;color:#fff;border-radius:10px;font-size:9px;font-weight:800;padding:1px 5px;min-width:16px;text-align:center;line-height:1.5;pointer-events:none;display:none}
/* ── Notification dropdown ── */
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:420px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:9500;display:none;flex-direction:column;overflow:hidden;animation:notifIn .2s ease}
.notif-dropdown.open{display:flex}
@keyframes notifIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.notif-hdr{padding:12px 16px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between}
.notif-hdr h3{font-size:13px;font-weight:800;color:var(--t1);margin:0}
.notif-hdr .notif-count-chip{font-size:10px;background:rgba(239,68,68,.15);color:var(--red-dim);padding:2px 8px;border-radius:10px;font-weight:700}
.notif-body{flex:1;overflow-y:auto;padding:6px 0}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(0,0,0,.06)}
.notif-item:hover{background:rgba(184,134,11,.06)}
.notif-item:last-child{border-bottom:none}
.notif-ico{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.notif-ico.warn{background:rgba(251,191,36,.12);color:var(--brand-light)}
.notif-ico.danger{background:rgba(239,68,68,.12);color:var(--red-dim)}
.notif-ico.info{background:rgba(96,165,250,.12);color:var(--blue)}
.notif-ico.ok{background:rgba(74,222,128,.12);color:var(--green)}
.notif-txt{flex:1;min-width:0}
.notif-txt .notif-title{font-size:12px;font-weight:700;color:var(--t1);margin-bottom:2px}
.notif-txt .notif-desc{font-size:10px;color:var(--t2);line-height:1.4}
.notif-txt .notif-time{font-size:9px;color:var(--t3,#64748B);margin-top:3px}
.notif-empty{text-align:center;padding:30px 16px;color:var(--t2);font-size:12px}
/* ── Search dropdown ── */
.search-dropdown{position:absolute;top:calc(100% + 4px);right:0;left:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:9500;display:none;max-height:380px;overflow-y:auto;animation:notifIn .2s ease}
.search-dropdown.open{display:block}
.search-sec-hdr{padding:8px 14px 4px;font-size:10px;font-weight:800;color:var(--c1);text-transform:uppercase;letter-spacing:1px}
.search-item{display:flex;align-items:center;gap:10px;padding:9px 14px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(0,0,0,.06)}
.search-item:hover{background:rgba(184,134,11,.06)}
.search-item .si-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;background:rgba(184,134,11,.1);color:var(--brand)}
.search-item .si-text{flex:1;min-width:0}
.search-item .si-title{font-size:12px;font-weight:600;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-item .si-sub{font-size:10px;color:var(--t2)}
.search-item mark{background:rgba(240,192,64,.25);color:var(--t1);border-radius:2px;padding:0 2px}
.search-no-result{text-align:center;padding:20px 14px;color:var(--t2);font-size:12px}
/* ── Leaderboard ── */
.lb-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;margin-bottom:4px;transition:background .15s}
.lb-row:hover{background:rgba(0,0,0,.03)}
.lb-rank{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0}
.lb-rank.gold{background:linear-gradient(135deg,#b8860b,#8B6914);color:#fff}
.lb-rank.silver{background:linear-gradient(135deg,#94A3B8,#64748B);color:#fff}
.lb-rank.bronze{background:linear-gradient(135deg,#CD7F32,#A0522D);color:#fff}
.lb-rank.normal{background:var(--card2);color:var(--t2)}
.lb-name{flex:1;font-size:12px;font-weight:600;color:var(--t1)}
.lb-val{font-size:13px;font-weight:800;color:var(--c1)}
.lb-bar{height:4px;border-radius:2px;background:var(--card2);flex:0 0 80px;overflow:hidden}
.lb-bar-fill{height:100%;border-radius:2px;transition:width .5s ease}
.lb-empty{text-align:center;padding:20px;color:var(--t2);font-size:12px}
/* ── Page transition animations ── */
@keyframes fadeInUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInRight{from{opacity:0;transform:translateX(-15px)}to{opacity:1;transform:translateX(0)}}
@keyframes countUp{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.anim-fade-up{animation:fadeInUp .35s ease both}
.anim-fade{animation:fadeIn .3s ease both}
.anim-slide{animation:slideInRight .3s ease both}
.anim-count{animation:countUp .25s ease both}
/* Stagger children */
.anim-stagger > *:nth-child(1){animation-delay:0s}
.anim-stagger > *:nth-child(2){animation-delay:.05s}
.anim-stagger > *:nth-child(3){animation-delay:.1s}
.anim-stagger > *:nth-child(4){animation-delay:.12s}
.anim-stagger > *:nth-child(5){animation-delay:.15s}
/* KPI card hover enhancement */
/* kpi-card transition handled in main block below */
/* Card hover */
.card{transition:transform .2s ease,box-shadow .2s ease}
.card:hover{box-shadow:0 6px 20px rgba(0,0,0,.15)}
/* Nav item active indicator */
.adash-nav-item{transition:all .2s ease}
.adash-nav-item.active{transform:translateX(-4px)}
/* Table row hover */
.adash-table-card tr{transition:background .15s ease}
/* Smooth badge color transition */
.kpi-badge{transition:all .3s ease}
/* User chip */
.adash-user-chip{display:flex;align-items:center;gap:9px;background:var(--card2);border:1.5px solid var(--bdr);border-radius:12px;padding:5px 12px 5px 8px;cursor:pointer;transition:all .18s;flex-shrink:0}
.adash-user-chip:hover{border-color:rgba(184,134,11,.35);background:var(--card3)}
.adash-user-avatar{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,#b8860b,#8B6914);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#0A0A0A;flex-shrink:0;text-transform:uppercase}
.adash-user-info-block{line-height:1.2}
.adash-user-name-lbl{font-size:12px;font-weight:700;color:var(--t1)}
.adash-user-role-lbl{font-size:10px;color:var(--t2);font-weight:600}

/* ══ KPI CARD — REFERENCE DESIGN ═════════════════════════════ */
.adash-kpi-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;display:flex;align-items:center;gap:14px;transition:all .2s;position:relative;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.04)}
.adash-kpi-card::before{display:none}
.adash-kpi-card:hover{background:var(--surface-2);box-shadow:0 2px 8px rgba(0,0,0,.07)}
/* ── Vertical KPI card (clean label + big number + sparkline) ── */
.adash-kpi-card.kpi-v{flex-direction:column;align-items:flex-start;padding:22px 26px 0;gap:0;min-height:170px}
.kpi-v-top{display:flex;align-items:center;gap:9px;margin-bottom:6px;width:100%}
.adash-kpi-card.kpi-v .adash-kpi-ico{display:none}
.adash-kpi-card.kpi-v .adash-kpi-lbl{font-size:13px;color:var(--t2);font-weight:600;line-height:1.3;letter-spacing:0;text-transform:none}
.adash-kpi-card.kpi-v .adash-kpi-val{font-size:clamp(22px,3.2vw,38px);font-weight:900;color:var(--t1);letter-spacing:-.03em;line-height:1.1;margin-bottom:10px;font-family:'Inter','IBM Plex Sans Arabic',sans-serif;word-break:break-word;overflow-wrap:break-word;max-width:100%}
.kpi-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:0;border-radius:0;margin-bottom:10px;letter-spacing:.1px;background:none!important}
.kpi-badge.pos{color:var(--green)}
.kpi-badge.neg{color:var(--red)}
.kpi-badge.neu{color:var(--brand)}
.kpi-badge.blue-b{color:var(--blue)}
.kpi-badge.yellow-b{color:var(--brand-light)}

/* ── KPI Card v2 (reference design) ── */
.kpi2-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:18px}
.kpi2{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 22px 16px;position:relative;overflow:hidden;transition:all .25s;display:flex;flex-direction:column;min-height:140px}
.kpi2:hover{box-shadow:0 4px 16px rgba(0,0,0,.06);transform:translateY(-2px)}
.kpi2-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi2-title{font-size:12px;font-weight:600;color:var(--t2);letter-spacing:.02em}
.kpi2-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.kpi2-icon svg{width:18px;height:18px}
.kpi2-icon.green{background:var(--green-bg);color:var(--green)}
.kpi2-icon.red{background:var(--red-bg);color:var(--red)}
.kpi2-icon.blue{background:var(--blue-bg);color:var(--blue)}
.kpi2-icon.brand{background:var(--brand-bg);color:var(--brand)}
.kpi2-icon.purple{background:rgba(139,92,246,.1);color:#8B5CF6}
.kpi2-body{flex:1;display:flex;flex-direction:column;justify-content:center}
.kpi2-val{font-size:clamp(24px,3vw,34px);font-weight:900;color:var(--t1);line-height:1.1;letter-spacing:-.03em;margin-bottom:4px;font-family:'Inter','IBM Plex Sans Arabic',sans-serif}
.kpi2-sub{font-size:11px;color:var(--t2);margin-bottom:8px}
.kpi2-foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:8px;border-top:1px solid var(--line)}
.kpi2-badge{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px}
.kpi2-badge.up{background:rgba(22,163,74,.1);color:var(--green)}
.kpi2-badge.down{background:rgba(220,38,38,.08);color:var(--red)}
.kpi2-badge.flat{background:rgba(0,0,0,.05);color:var(--t2)}
.kpi2-spark{width:80px;height:28px;flex-shrink:0}
.kpi2-spark svg{width:100%;height:100%}
@media(max-width:600px){.kpi2-grid{grid-template-columns:1fr 1fr;gap:10px}.kpi2{padding:14px 16px 12px;min-height:120px}.kpi2-val{font-size:20px}}
/* ═══ SHADER LANDING PAGE ═══ */
.shader-landing{position:fixed;top:0;left:0;right:0;bottom:0;z-index:50;background:#0a0a0a;overflow:hidden;transition:opacity .6s ease}
.shader-landing.hiding{opacity:0;pointer-events:none}
.shader-landing canvas{display:block;width:100%;height:100%}
.shader-welcome{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;user-select:none;pointer-events:none;container-type:inline-size}
.shader-greet{font-family:'Cairo','Helvetica Neue',sans-serif;font-weight:300;font-size:clamp(13px,3vw,32px);letter-spacing:.28em;text-transform:uppercase;color:rgba(60,40,0,.55);margin-bottom:.3em}
.shader-brand{font-family:'Cairo','Helvetica Neue',sans-serif;font-weight:800;font-size:clamp(36px,9vw,110px);letter-spacing:-.025em;color:#1a1208;line-height:.95}
.shader-brand .accent{color:#d99500}
.shader-enter-wrap{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);z-index:3;pointer-events:auto;text-align:center}
.shader-enter-btn{background:rgba(10,10,10,.85);border:1.5px solid rgba(180,134,11,.4);color:#d99500;font-family:'Cairo',sans-serif;font-size:13px;font-weight:700;padding:12px 40px;border-radius:12px;cursor:pointer;letter-spacing:.06em;transition:all .3s ease;backdrop-filter:blur(8px)}
.shader-enter-btn:hover{background:rgba(217,149,0,.15);border-color:#d99500;transform:scale(1.04)}
.shader-hint{font-family:ui-monospace,'SF Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:rgba(120,80,0,.35);margin-top:10px}
.kpi-badge.purple-b{color:#C084FC}
/* Sparkline canvas at card bottom */
.kpi-spark-wrap{width:calc(100% + 52px);margin:auto -26px 0;height:50px;flex-shrink:0;overflow:hidden;border-radius:0 0 14px 14px}
.kpi-spark{width:100%;height:60px;display:block}
/* Non-vertical cards: icon hidden in kpi-v, visible in horizontal cards */
.adash-kpi-ico .ico{background:none;padding:0;border-radius:0;color:currentColor}
.adash-kpi-ico{font-size:22px;flex-shrink:0;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:transform .2s}
.adash-kpi-card:hover .adash-kpi-ico{transform:none}
.adash-kpi-ico.green{background:rgba(74,222,128,.08);box-shadow:none}
.adash-kpi-ico.yellow{background:rgba(184,134,11,.08);box-shadow:none}
.adash-kpi-ico.blue{background:rgba(96,165,250,.08);box-shadow:none}
.adash-kpi-ico.red{background:rgba(248,113,113,.08);box-shadow:none}
.adash-kpi-ico.orange{background:rgba(251,146,60,.08);box-shadow:none}
.adash-kpi-ico.purple{background:rgba(192,132,252,.08);box-shadow:none}

/* ══ CHART BOX LIGHT ══════════════════════════════════ */
.cbox,.adash-chart-box{background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 4px rgba(0,0,0,.04);border-radius:14px}
.card{background:var(--surface);border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.04)}

/* ══ SIDEBAR ENHANCEMENTS ═════════════════════════════════════ */
.adash-sb{background:#FFFFFF}
.adash-sb-logo{padding:20px 20px 16px;border-bottom:1px solid var(--bdr);background:transparent}
.adash-sb-logo h2{font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.02em;text-shadow:none}
.adash-sb-logo p{font-size:10px;font-weight:500;color:var(--t3);letter-spacing:.12em;text-transform:uppercase;margin-top:2px;opacity:1}
.adash-nav-item{position:relative;overflow:hidden}
.adash-nav-item.active{background:rgba(0,0,0,.04);color:var(--t1);border:none;box-shadow:none;font-weight:600}
.adash-nav-item.active::before{content:'';position:absolute;right:-20px;top:50%;transform:translateY(-50%);width:2px;height:18px;background:#0A0A0A;border-radius:0;left:auto;bottom:auto}
.adash-nav-sec-hdr{background:transparent;border:none;color:var(--t3);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;box-shadow:none;cursor:default;padding:0 4px;margin-top:24px;margin-bottom:10px}
.adash-nav-sec-hdr:hover{background:transparent;border:none;color:var(--t2)}
.adash-nav-sec-hdr.open{color:var(--t3);border:none;background:transparent}
.adash-sb .ico{background:none;padding:0;border-radius:0}
.adash-sb .adash-nav-item .adni .ico,.adash-sb .adash-nav-item .ico{color:currentColor;opacity:.8;width:16px;height:16px}
.adash-sb .adash-nav-sub-hdr .ico{color:var(--t3)}
.adash-sb .adash-nav-sec-hdr .ico{color:var(--t3);width:14px;height:14px}
.adash-sb .adash-back-btn .ico{color:var(--t2)}

/* Editorial Sidebar Overrides */
.adash-sb{width:240px;background:#FFFFFF;border-left:1px solid var(--line);padding:28px 20px 20px;border-right:none}
.adash-sb-logo{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:24px;padding:0 4px}
.adash-nav-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:6px;font-size:13.5px;color:var(--t2);font-weight:500;width:100%;text-align:right;transition:color .15s,background .15s;position:relative;border:none;box-shadow:none;background:transparent}
.adash-nav-item:hover{color:var(--t1);background:rgba(0,0,0,.04);border:none;box-shadow:none}
.adash-nav-item .adni{display:flex;align-items:center;justify-content:center;width:auto;height:auto;background:none;padding:0;border-radius:0}
.adash-nav-item .adni .ico{width:16px;height:16px;opacity:.8;color:currentColor}
.adash-nav-sec-body{display:flex;flex-direction:column;gap:2px}
.adash-nav-sec-body.open{display:flex}


/* ── Main content ── */
.adash-main{flex:1;height:100%;overflow-y:auto;overflow-x:hidden;padding:0;min-width:0;contain:layout style;-webkit-overflow-scrolling:touch;will-change:scroll-position;scroll-behavior:smooth;background:var(--bg)}

/* ── Top bar ── */
.adash-topbar{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:0;gap:24px;flex-wrap:wrap;padding:24px 40px;border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(250,250,247,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:10}

/* Editorial TopBar Actions */
.v1-topbar-actions{display:flex;gap:10px;align-items:center}
.v1-search{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:9px 14px;font-size:12.5px;color:var(--t1);outline:none;transition:border-color .15s;font-family:inherit;direction:rtl}
.v1-search:focus{border-color:var(--line-strong)}
.v1-search::placeholder{color:var(--t3)}
.v1-icon-btn{width:36px;height:36px;border-radius:8px;background:var(--surface);border:1px solid var(--line);color:var(--t2);display:inline-flex;align-items:center;justify-content:center;transition:all .15s;position:relative;cursor:pointer}
.v1-icon-btn:hover{background:var(--surface-2);color:var(--t1)}
.v1-cta{background:#0A0A0A;color:#b8860b;font-weight:700;font-size:12.5px;padding:9px 18px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;transition:transform .15s,box-shadow .15s;cursor:pointer;border:none;font-family:inherit}
.v1-cta:hover{transform:translateY(-1px);box-shadow:0 6px 20px rgba(0,0,0,.18)}

.adash-title{font-size:32px;font-weight:700;color:var(--t1);letter-spacing:-.025em;line-height:1.1;margin-top:12px}
.adash-subtitle{font-size:11px;color:var(--t3);margin-top:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;gap:8px}

/* Editorial live-dot */
.live-dot{width:6px;height:6px;border-radius:50%;background:#16A34A;animation:pulse-dot 2s infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.4}}

/* Editorial page content */
.dash-home{padding:32px 40px 60px}
.adash-section{margin-bottom:40px}
.adash-section-hdr{font-size:14px;font-weight:600;color:var(--t1);padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}

.adash-subtitle .live-dot,.adash-title .accent,.accent{color:var(--accent-strong,#a0750a)}

.adash-refresh-btn{padding:9px 18px;background:#0A0A0A;border:none;border-radius:8px;color:#b8860b;font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.adash-refresh-btn:hover{color:var(--t1);border-color:var(--line-strong)}
.adash-refresh-btn:hover{background:var(--card3);color:var(--t1);border-color:var(--bdr2)}


/* ══ Performance: CSS Containment ══ */
.tbl-wrap,.adash-tbl-wrap{contain:layout style}
#cust-overlay{contain:layout style paint}
.cust-list{contain:layout style;will-change:scroll-position}
.crm-table-wrap{contain:layout style}

/* Editorial Table Overrides */
.tbl-wrap,.adash-tbl-wrap{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.tbl-wrap .toolbar,.adash-tbl-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);gap:12px}
.tbl-wrap table,.adash-tbl{width:100%;font-size:13px;border-collapse:collapse}
.tbl-wrap table th,.adash-tbl th{text-align:right;padding:11px 20px;font-size:10.5px;font-weight:600;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--line);background:transparent}
.tbl-wrap table td,.adash-tbl td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl-wrap table tr:last-child td,.adash-tbl tr:last-child td{border-bottom:none}
.tbl-wrap table tr:hover,.adash-tbl tr:hover{background:rgba(184,134,11,.03)}
/* Editorial filter pills */
.filter-pill,.fb-pill,.exp-pill{background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font-size:11.5px;color:var(--t2);display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:all .15s;font-family:inherit;font-weight:600}
.filter-pill.active,.filter-pill.sel,.fb-pill.active,.fb-pill.sel,.exp-pill.active{background:#0A0A0A!important;color:#FFFFFF!important;border-color:#0A0A0A!important}
.filter-pill:hover,.fb-pill:hover,.exp-pill:hover{background:rgba(0,0,0,.06)}
/* Editorial status pills */
.st{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:600;background:rgba(0,0,0,.06);color:var(--t1);border:1px solid var(--line)}
.st::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.st.st-new,.st.st-open{color:var(--accent)}
.st.st-prog,.st.st-inprog{color:#60A5FA}
.st.st-done,.st.st-closed,.st.st-resolved{color:#34D399}
.st.st-lost,.st.st-rejected{color:var(--t3)}
/* Editorial priority bars */
.prio-bars{display:inline-flex;gap:2px;margin-right:6px}
.prio-bars i,.prio-bars span.bar{width:3px;border-radius:1px;background:rgba(0,0,0,.10);display:inline-block}
.prio-bars i.on,.prio-bars span.bar.on{background:var(--accent)}
.prio-bars i:nth-child(1),.prio-bars span.bar:nth-child(1){height:6px}
.prio-bars i:nth-child(2),.prio-bars span.bar:nth-child(2){height:9px}
.prio-bars i:nth-child(3),.prio-bars span.bar:nth-child(3){height:12px}
/* Editorial customer avatar in tables */
.cust-avatar{width:28px;height:28px;border-radius:50%;background:var(--surface-2);color:var(--t2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;border:1px solid var(--line);flex-shrink:0}
/* Editorial table footer / pagination */
.tbl-footer,.adash-tbl-footer{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--t3);font-family:'Inter',sans-serif}
.pager{display:inline-flex;gap:4px}
.pager button,.pager a{width:26px;height:26px;border-radius:4px;font-size:11px;color:var(--t2);border:1px solid var(--line);background:transparent;font-family:'Inter',sans-serif;font-weight:600;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.pager button.active,.pager a.active{background:var(--t1);color:#000;border-color:var(--t1)}
/* Table row action button */
.row-action{width:28px;height:28px;border-radius:6px;border:1px solid transparent;color:var(--t3);display:inline-flex;align-items:center;justify-content:center;transition:all .15s;cursor:pointer;background:none}
.row-action:hover{color:var(--t1);border-color:var(--line)}

/* ── Subpage panel content padding ── */
[id^="adash-"][id$="-panel"]{padding:32px 40px 60px}

/* ── Section header ── */
.adash-sec-hdr{display:flex;align-items:center;gap:10px;margin-bottom:20px;margin-top:8px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.adash-sec-hdr h2{font-size:16px;font-weight:700;color:var(--t1);letter-spacing:-.01em}
.adash-sec-sub{font-size:11px;color:var(--t2);font-weight:400;margin-right:4px}
.adash-sec-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.adash-sec-dot.sales{background:#34D399}
.adash-sec-dot.comp{background:#F87171}

/* ── KPI + Chart row ── */
.adash-row{display:grid;grid-template-columns:280px 1fr;gap:16px;margin-bottom:16px}
@media(max-width:900px){.adash-row{grid-template-columns:1fr}}

/* ── KPI cards column ── */
.adash-kpi-col{display:flex;flex-direction:column;gap:10px}
.adash-kpi-ico.green{background:rgba(74,222,128,.12)}
.adash-kpi-ico.yellow{background:rgba(184,134,11,.12)}
.adash-kpi-ico.blue{background:rgba(96,165,250,.12)}
.adash-kpi-ico.red{background:rgba(248,113,113,.12)}
.adash-kpi-ico.orange{background:rgba(251,146,60,.12)}
.adash-kpi-ico.purple{background:rgba(192,132,252,.12)}
.adash-kpi-body{flex:1;min-width:0}
.adash-kpi-lbl{font-size:11px;color:var(--t3);font-weight:600;margin-bottom:4px;letter-spacing:.08em;text-transform:uppercase}
.adash-kpi-val{font-size:20px;font-weight:800;color:var(--t1);line-height:1.1}
.adash-kpi-sub{font-size:10px;color:var(--t2);margin-top:3px}

/* ── Progress bar (target) ── */
.adash-prog-track{height:5px;background:var(--card3);border-radius:3px;margin-top:6px;overflow:hidden}
.adash-prog-bar{height:100%;border-radius:3px;background:var(--c1);transition:width .6s cubic-bezier(.4,0,.2,1)}

/* ── Deal status mini cards ── */
.adash-deal-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.adash-deal-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center}
.adash-deal-val{font-size:22px;font-weight:800}
.adash-deal-lbl{font-size:10px;color:var(--t2);font-weight:600;margin-top:2px}
.adash-deal-card.green .adash-deal-val{color:#16A34A}
.adash-deal-card.yellow .adash-deal-val{color:var(--c1)}
.adash-deal-card.red .adash-deal-val{color:var(--red)}

/* ── Chart box ── */
.adash-chart-box{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;display:flex;flex-direction:column}
.adash-chart-title{font-size:13px;font-weight:800;color:var(--t1);margin-bottom:14px}
.adash-chart-wrap{flex:1;position:relative;min-height:220px}

/* ── Tables ── */
.adash-table-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px;overflow:hidden}
.adash-table-title{font-size:13.5px;font-weight:700;color:var(--t1);margin-bottom:14px;display:flex;align-items:center;gap:8px;letter-spacing:-.005em}
.adash-tbl{width:100%;border-collapse:collapse;font-size:12px}
.adash-tbl th{padding:9px 12px;text-align:right;color:var(--t2);font-weight:700;font-size:11px;background:var(--card2);border-bottom:1px solid var(--bdr)}
.adash-tbl th:first-child{border-radius:8px 0 0 0}
.adash-tbl th:last-child{border-radius:0 8px 0 0}
.adash-tbl td{padding:10px 12px;border-bottom:1px solid rgba(15,23,42,.06);color:var(--t1);vertical-align:middle}
.adash-tbl tr:last-child td{border-bottom:none}
.adash-tbl tr:hover td{background:var(--card2)}
.adash-rank-badge{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:8px;font-size:11px;font-weight:800}
.adash-rank-badge.r1{background:rgba(184,134,11,.2);color:var(--c1)}
.adash-rank-badge.r2{background:rgba(192,132,252,.15);color:#C084FC}
.adash-rank-badge.r3{background:rgba(251,146,60,.15);color:var(--orange)}
.adash-rank-badge.rn{background:var(--card2);color:var(--t2)}
.adash-status-pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:800}
.adash-status-pill.open{background:rgba(248,113,113,.12);color:var(--red);border:1px solid rgba(248,113,113,.25)}
.adash-status-pill.closed{background:rgba(74,222,128,.12);color:var(--green);border:1px solid rgba(74,222,128,.25)}
.adash-status-pill.pend{background:rgba(251,146,60,.12);color:var(--orange);border:1px solid rgba(251,146,60,.25)}
.adash-status-pill.new{background:rgba(96,165,250,.12);color:var(--blue);border:1px solid rgba(96,165,250,.25)}

/* ── Admin open button in section headers ── */
.adash-open-btn{display:none;align-items:center;gap:7px;padding:7px 14px;background:rgba(184,134,11,.1);border:1px solid rgba(184,134,11,.25);border-radius:9px;color:var(--c1);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:all .18s;white-space:nowrap}
.adash-open-btn:hover{background:rgba(184,134,11,.18);border-color:var(--c1)}
.adash-open-btn.visible{display:flex}

/* ══ TOAST NOTIFICATIONS ══════════════════════════ */
.toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column-reverse;gap:8px;pointer-events:none}
.toast{pointer-events:auto;background:#FFFFFF;border-radius:12px;padding:12px 20px 12px 16px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);border:1px solid var(--bdr);min-width:280px;max-width:420px;animation:toastIn .35s cubic-bezier(.22,.68,0,1.1) both;font-size:13px;font-weight:600;color:var(--t1)}
.toast.out{animation:toastOut .25s ease forwards}
.toast-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.toast-icon.success{background:rgba(34,197,94,.12);color:var(--green-dim)}
.toast-icon.error{background:rgba(239,68,68,.12);color:var(--red-dim)}
.toast-icon.info{background:rgba(96,165,250,.12);color:var(--blue)}
.toast-icon.warn{background:rgba(184,134,11,.12);color:var(--brand)}
.toast-close{background:none;border:none;color:var(--t2);font-size:16px;cursor:pointer;padding:2px 4px;margin-right:auto;border-radius:4px;transition:color .15s}
.toast-close:hover{color:var(--t1)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(10px)}}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE & TABLET
   ══════════════════════════════════════ */
@media(max-width:768px){
  /* ── Show TopNav on mobile ── */
  .adash-topnav{display:flex!important;position:sticky;top:0;z-index:8000;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 12px;align-items:center;gap:8px;min-height:52px}
  .adash-topnav-search{flex:1;min-width:0}
  .adash-topnav-search input{width:100%;font-size:13px}
  .adash-topnav-pagetitle{display:none}
  /* ── Mobile menu button ── */
  .mobile-menu-btn{display:flex!important;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:1px solid var(--bdr);border-radius:10px;color:var(--c1);cursor:pointer;flex-shrink:0}
  /* ── Sidebar — slide from right ── */
  .adash-sb{position:fixed!important;top:0!important;right:-280px!important;width:270px!important;min-width:270px!important;height:100vh!important;z-index:9000;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:-4px 0 24px rgba(0,0,0,.15)}
  .adash-sb.mobile-open{right:0!important}
  .adash-sb.collapsed{width:270px;min-width:270px}
  .adash-sb.collapsed .adash-nav-item,.adash-sb.collapsed .adash-nav-sub-hdr,.adash-sb.collapsed .adash-nav-crm-btn,.adash-sb.collapsed .adash-nav-sub-body,.adash-sb.collapsed .adash-nav-sec-body,.adash-sb.collapsed .nsc,.adash-sb.collapsed .adash-back-btn,.adash-sb.collapsed .adash-sb-footer,.adash-sb.collapsed .adash-sb-logo{display:revert}
  .sb-collapse-btn{display:none!important}
  /* ── Overlay ── */
  .mobile-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.4);z-index:8999;backdrop-filter:blur(2px)}
  .mobile-overlay.active{display:block}
  /* ── Main content ── */
  /* contain:layout traps position:fixed children inside .adash-main — drop it on
     mobile so full-screen overlays (e.g. the inbox chat) pin to the viewport. */
  .adash-main{margin-right:0!important;width:100%!important;padding:16px 12px!important;contain:none!important}
  /* ── KPI cards ── */
  .krow{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .kpi2-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}
  .kpi2{padding:12px 14px 10px;min-height:auto}
  .kpi2-val{font-size:18px!important}
  .kpi2-title{font-size:10px!important}
  .adash-kpi-row,.adash-row{grid-template-columns:1fr!important}
  .adash-kpi-card{padding:14px 16px;border-radius:12px}
  /* ── Charts ── */
  .adash-chart-card,.adash-table-card{min-width:0!important;border-radius:12px!important}
  /* ── Tables — horizontal scroll ── */
  .adash-table-card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .adash-table-card table{min-width:600px}
  /* ── Headers ── */
  .adash-header{flex-wrap:wrap;gap:8px}
  .adash-header h1{font-size:16px}
  .adash-title{font-size:18px!important}
  .adash-subtitle{font-size:12px!important}
  /* ── Subpage header ── */
  .subpage-hdr{flex-wrap:wrap;gap:8px;padding:16px 12px!important}
  .subpage-hdr h2{font-size:16px!important}
  /* ── Forms ── */
  .fgrid{grid-template-columns:1fr!important}
  .cr2,.cr2e{grid-template-columns:1fr!important}
  .crm-pipeline{grid-template-columns:1fr!important}
  /* ── DB section ── */
  .db-split{flex-direction:column!important}
  .db-list-pane,.db-detail-pane{width:100%!important;min-width:0!important}
  /* ── Filter bars ── */
  .adash-filter-bar{flex-wrap:wrap;gap:6px}
  .adash-filter-bar label,.adash-filter-bar select,.adash-filter-bar input{font-size:11px;max-width:100%}
  /* ── Login card ── */
  .lcard{max-width:95vw!important;padding:20px 16px!important}
  /* ── Modals ── */
  .modal{max-width:95vw!important;margin:8px!important;padding:18px 16px!important}
  #cmp-modal .modal{max-width:95vw!important}
  #lead-modal,#emp-modal{min-width:0!important;max-width:95vw!important;width:95vw!important;padding:20px 16px!important}
  /* ── Briefing page ── */
  .br-grid{grid-template-columns:1fr!important}
  .br-card{padding:16px!important}
  /* ── Calls page tabs ── */
  .calls-tabs{flex-wrap:wrap;gap:4px}
  .calls-tabs button{font-size:11px;padding:6px 10px}
  /* ── Customer page ── */
  .cust-split{flex-direction:column!important}
  .cust-list-pane,.cust-detail-pane{width:100%!important;min-width:0!important}
  /* ── Reports page ── */
  .rep-grid{grid-template-columns:1fr!important}
  /* ── Odoo page ── */
  .odoo-filter-bar{flex-wrap:wrap!important;gap:6px!important}
  .odoo-filter-bar input,.odoo-filter-bar select{max-width:100%!important;flex:1!important;min-width:0!important}
  /* ── Feedback tabs ── */
  .fb-tabs{flex-wrap:wrap;gap:4px}
  /* ── Page topbar (sticky header inside pages) ── */
  .adash-topbar{padding:14px 12px!important;gap:12px}
  .adash-topbar .adash-title{font-size:16px!important}
  .adash-topbar .adash-subtitle{font-size:11px!important}
  /* ── Wrap / container ── */
  .wrap{padding:20px 12px 40px!important}
  /* ── General overflow fix ── */
  *{max-width:100vw}
  input,select,textarea{max-width:100%!important;box-sizing:border-box!important}
  /* ── Body wrap — prevent horizontal scroll ── */
  .adash-body-wrap{overflow-x:hidden}
  body,html{overflow-x:hidden}

  /* ── Collapse INLINE grids → single column on mobile ──
     Most pages (incl. the home) use inline style="grid-template-columns:..."
     which the named rules above don't reach, so the content squished into a
     narrow strip. Forcing 1fr makes every grid stack full-width. ── */
  .adash-main [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  .adash-main [style*="grid-template-columns"] > *{min-width:0!important}
  /* Two-up only for the compact KPI rows so they don't get too tall */
  .adash-main [style*="repeat(4,1fr)"],
  .adash-main [style*="repeat(5,1fr)"],
  .adash-main [style*="repeat(3,1fr)"]{grid-template-columns:1fr 1fr!important}
  /* Wide tables: let them scroll instead of breaking the layout */
  .adash-main table{max-width:100%}

  /* ── Shader landing: drop the heavy WebGL canvas, use a light CSS animation ── */
  #shader-canvas,.shader-landing canvas{display:none!important}
  .shader-landing{background:radial-gradient(120% 80% at 50% 30%,#241a0a 0%,#140d04 55%,#0a0a0a 100%)!important}
  /* Lightweight animated golden "blob" — pure CSS (transform/opacity only), so it
     animates on the GPU without the heavy WebGL canvas that lagged the phone. */
  .shader-landing::before{content:"";position:absolute;top:42%;left:50%;width:88vw;height:88vw;max-width:540px;max-height:540px;transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 50%,rgba(245,205,80,.55),rgba(184,134,11,.30) 42%,transparent 70%);border-radius:42% 58% 60% 40%/45% 45% 55% 55%;filter:blur(26px);z-index:0;pointer-events:none;will-change:transform;animation:shaderBlobMob 9s ease-in-out infinite}
  /* No animated canvas on mobile, so the near-black brand color is invisible —
     make "Hammer" a light cream (the gold "System" accent stays as-is). */
  .shader-welcome{z-index:2}
  .shader-brand{font-size:clamp(26px,9.5vw,46px)!important;color:#F0E4C8!important;line-height:1.05!important}
  .shader-greet{font-size:13px!important;color:rgba(240,228,200,.55)!important}
  .shader-enter-wrap{bottom:16%!important}
}
@keyframes shaderBlobMob{
  0%{transform:translate(-50%,-50%) scale(1) rotate(0deg);border-radius:42% 58% 60% 40%/45% 45% 55% 55%}
  50%{transform:translate(-47%,-53%) scale(1.12) rotate(8deg);border-radius:55% 45% 42% 58%/52% 48% 52% 48%}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0deg);border-radius:42% 58% 60% 40%/45% 45% 55% 55%}
}
@media(max-width:768px) and (prefers-reduced-motion:reduce){
  .shader-landing::before{animation:none}
}
@media(max-width:480px){
  .krow{grid-template-columns:1fr!important}
  .kpi2-grid{grid-template-columns:1fr!important}
  .kpi2-val{font-size:16px!important}
  .adash-header h1{font-size:14px}
  .adash-kpi-val{font-size:20px}
  .l-opts{grid-template-columns:1fr!important}
  .adash-sb{width:260px;min-width:260px}
  .adash-topnav-logo{display:none}
  .adash-topnav-right .adash-topnav-iconbtn span{display:none}
}

/* ══════════════════════════════════════
   PRINT STYLES
   ══════════════════════════════════════ */
@media print{
  body{background:#fff!important;color:#222!important;font-size:11pt}
  /* Hide non-printable elements */
  .adash-sb,.adash-topnav,.adash-header,.adash-filter-bar,
  .sb-collapse-btn,.mobile-menu-btn,.mobile-overlay,
  #toast-container,#loading-overlay,
  button,select,input[type="text"],input[type="search"],
  .adash-sb-footer,.adash-topnav-right,
  .intro-screen,#intro-screen,#login-screen{display:none!important}
  /* Full width main content */
  .adash-main{margin:0!important;width:100%!important;padding:10px!important}
  .adash-body-wrap{display:block!important}
  #admin-dash-wrap{padding:0!important}
  /* KPI cards */
  .adash-kpi-card,.kpi-card{background:#f9f9f9!important;border:1px solid #ddd!important;color:#222!important;break-inside:avoid}
  .adash-kpi-val,.kpi-val{color:#222!important}
  .adash-kpi-label,.kpi-label{color:#555!important}
  /* Tables */
  .adash-table-card{overflow:visible!important;box-shadow:none!important;border:1px solid #ccc!important}
  table{border-collapse:collapse!important;width:100%!important}
  th{background:#eee!important;color:#222!important;border:1px solid #ccc!important}
  td{border:1px solid #ddd!important;color:#333!important}
  /* Charts — show but don't break */
  .adash-chart-card{break-inside:avoid;box-shadow:none!important;border:1px solid #ccc!important}
  canvas{max-width:100%!important;height:auto!important}
  /* Page breaks */
  .page-section{break-before:page}
  /* RTL maintained */
  body{direction:rtl}
  /* Branding header for print */
  .adash-body-wrap::before{content:'Hammer System';display:block;text-align:center;font-size:18pt;font-weight:900;color:#333;padding:10px 0;border-bottom:2px solid #b8860b;margin-bottom:15px}
}

/* ── Toast Styles ── */
@keyframes hm-spin{to{transform:rotate(360deg)}}
.hm-toast{pointer-events:auto;padding:12px 20px;border-radius:10px;font-size:13px;font-family:Cairo,sans-serif;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,0.3);animation:hm-toast-in 0.3s ease;max-width:400px;text-align:center}
.hm-toast.success{background:#10B981}
.hm-toast.error{background:#EF4444}
.hm-toast.warning{background:#b8860b;color:#000}
.hm-toast.info{background:#3B82F6}
@keyframes hm-toast-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ── Feedback Wizard & Judge Styles ── */
        @keyframes spin{0%{transform:rotateY(0)}100%{transform:rotateY(360deg)}}
    /* ── Feedback Wizard ─────────────────────── */
    .fb-wiz-opt{border:2px solid var(--bdr);background:var(--card);color:var(--t1);padding:12px 16px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:all .2s;text-align:center}
    .fb-wiz-opt:hover{border-color:var(--purple);background:rgba(139,92,246,.06)}
    .fb-wiz-opt.active{border-color:var(--purple);background:rgba(139,92,246,.12);color:var(--purple);box-shadow:0 0 0 3px rgba(139,92,246,.15)}
    .fb-wiz-nav-btn{border:none;padding:10px 28px;border-radius:10px;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:all .2s}
    .fb-wiz-nav-btn.next,.fb-wiz-nav-btn.submit{background:#0A0A0A;color:#b8860b}
    .fb-wiz-nav-btn.next:hover,.fb-wiz-nav-btn.submit:hover{background:#1a1a1a;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
    .fb-wiz-nav-btn.prev{background:var(--card2);color:var(--t2)}
    .fb-wiz-nav-btn.prev:hover{background:var(--bdr);color:var(--t1)}
    .fb-wiz-check{display:flex;align-items:center;gap:10px;padding:12px 16px;border:2px solid var(--bdr);border-radius:10px;cursor:pointer;transition:all .2s;font-size:13px;font-weight:600;color:var(--t1)}
    .fb-wiz-check:hover{border-color:var(--purple);background:rgba(139,92,246,.04)}
    .fb-wiz-check input{display:none}
    .fb-chk-box{width:20px;height:20px;min-width:20px;border:2px solid var(--bdr);border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s;font-size:12px;color:transparent}
    .fb-wiz-check input:checked~.fb-chk-box{background:#8B5CF6;border-color:var(--purple);color:#fff}
    .fb-wiz-check input:checked~.fb-chk-box::after{content:"✓"}
    .fb-wiz-check:has(input:checked){border-color:var(--purple);background:rgba(139,92,246,.08)}
    .fb-star{font-size:32px;cursor:pointer;color:var(--bdr);transition:all .15s;user-select:none}
    .fb-star.lit{color:var(--brand);text-shadow:0 0 8px rgba(184,134,11,.4)}
    .fb-star:hover{transform:scale(1.2)}
    /* Force the wizard progress strip to lay its dots out horizontally.
       Without this, the wraps stack vertically when the inline flex
       context gets briefly lost (e.g. after toggling the call phase). */
    #fb-wiz-progress{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;align-items:center !important;justify-content:space-between !important;width:100% !important}
    #fb-wiz-progress .fb-prog-wrap{flex:0 0 auto !important;display:flex !important;flex-direction:column !important;align-items:center !important;gap:6px !important;position:relative !important;z-index:2 !important;margin:0 !important}
    .fb-wiz-prog-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;border:2.5px solid rgba(0,0,0,.08);background:var(--surface-2);color:var(--t2);position:relative;z-index:2;transition:all .4s cubic-bezier(.4,0,.2,1);cursor:default}
    .fb-wiz-prog-dot.active{border-color:var(--brand);background:linear-gradient(135deg,#b8860b,#d4a017);color:#fff;box-shadow:0 0 0 5px rgba(184,134,11,.2),0 0 16px rgba(184,134,11,.15);transform:scale(1.12);animation:fbDotPulse 2s ease-in-out infinite}
    .fb-wiz-prog-dot.done{border-color:var(--green-dim);background:linear-gradient(135deg,#34D399,#16A34A);color:#fff;box-shadow:0 0 8px rgba(34,197,94,.25)}
    .fb-wiz-prog-dot .fb-dot-check{display:none}
    .fb-wiz-prog-dot.done .fb-dot-num{display:none}
    .fb-wiz-prog-dot.done .fb-dot-check{display:block}
    @keyframes fbDotPulse{0%,100%{box-shadow:0 0 0 5px rgba(240,192,64,.2),0 0 16px rgba(240,192,64,.15)}50%{box-shadow:0 0 0 8px rgba(240,192,64,.12),0 0 24px rgba(240,192,64,.1)}}

    /* ── Feedback Tabs ── */
    .fb-tab-btn{padding:8px 18px;border-radius:8px;border:2px solid var(--bdr);background:var(--card);color:var(--t2);font-weight:600;font-size:13px;cursor:pointer;transition:all .2s}
    .fb-tab-btn:hover{border-color:var(--brand);color:var(--brand)}
    .fb-tab-btn.active{border-color:#0A0A0A;background:#0A0A0A;color:#b8860b}
    .fb-status-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
    .fb-status-new{background:rgba(59,130,246,.15);color:var(--blue-dim)}
    .fb-status-attempt{background:rgba(239,68,68,.15);color:var(--red-dim)}
    .fb-status-completed{background:rgba(34,197,94,.15);color:var(--green-dim)}
    .fb-status-no_answer{background:rgba(239,68,68,.15);color:var(--red-dim)}
    .fb-prog-bar{height:8px;border-radius:4px;background:var(--bdr);overflow:hidden;position:relative}
    .fb-prog-fill{height:100%;border-radius:4px;transition:width .4s ease}

    /* ───────────────────────────────────────────────────────────
       Hammer · FloatTilt loading animation (from design handoff)
       Logo gently floats + tilts with a soft contracting shadow.
       Sizes: --lg splash (240px) · --md inline (140px) · --sm compact (48px)
       ─────────────────────────────────────────────────────────── */
    @keyframes hp-tilt-lg { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-18px) rotate(2deg)} }
    @keyframes hp-tilt-md { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-12px) rotate(2deg)} }
    @keyframes hp-tilt-sm { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-6px) rotate(2deg)} }
    @keyframes hp-shadow    { 0%,100%{transform:translateX(-50%) scale(1)} 50%{transform:translateX(-50%) scale(0.65)} }
    @keyframes hp-shadow-op { 0%,100%{opacity:.35} 50%{opacity:.18} }

    .hp-loader-wrap{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border-radius:16px;padding:20px 28px}
    /* Fixed, viewport-centered white splash — always visible, never needs scrolling */
    .hp-loader-overlay{position:fixed;inset:0;background:#fff;z-index:99990;display:flex;align-items:center;justify-content:center}
    .hp-loader{position:relative;display:inline-flex;align-items:center;justify-content:center}
    .hp-loader__logo{display:block;user-select:none;-webkit-user-drag:none;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
    .hp-loader__shadow{position:absolute;left:50%;transform:translateX(-50%);background:radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, transparent 70%);filter:blur(2px);pointer-events:none;
      animation:hp-shadow 2.6s ease-in-out infinite, hp-shadow-op 2.6s ease-in-out infinite}

    .hp-loader--lg{width:300px;height:300px}
    .hp-loader--lg .hp-loader__logo{width:240px;height:240px;animation-name:hp-tilt-lg;animation-duration:3s}
    .hp-loader--lg .hp-loader__shadow{width:212px;height:10px;bottom:14px;animation-duration:3s}

    .hp-loader--md{width:200px;height:200px}
    .hp-loader--md .hp-loader__logo{width:140px;height:140px;animation-name:hp-tilt-md;animation-duration:2.6s}
    .hp-loader--md .hp-loader__shadow{width:123px;height:10px;bottom:14px;animation-duration:2.6s}

    .hp-loader--sm{width:48px;height:60px}
    .hp-loader--sm .hp-loader__logo{width:48px;height:48px;animation-name:hp-tilt-sm;animation-duration:2.2s}

    .hp-loader-caption{display:inline-block;margin-top:14px;font-family:'Cairo','Inter',system-ui,sans-serif;font-weight:700;font-size:10px;letter-spacing:0.32em;text-transform:uppercase;color:var(--t2,#6B6B6B)}

    @media (prefers-reduced-motion: reduce){
      .hp-loader__logo,.hp-loader__shadow{animation:none !important}
    }