/* tsg-design-system.css — v2 · TSG Hub
   Extracted verbatim from tsg-design-system.html (the reference/preview
   document). Source of truth for tokens + component classes; this file is
   the CSS itself, ported as-is so component markup across the TSG apps can
   share one real, importable stylesheet instead of copy-pasting from the
   preview doc. */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --p:#E63329;--pd:#C02820;--pl:#FDECEA;
  --success:#16A34A;--sl:#DCFCE7;--sb:#BBF7D0;
  --warning:#D97706;--wl:#FEF3C7;--wb:#FDE68A;
  --danger:#DC2626;--dl:#FEE2E2;--db:#FECACA;
  --info:#2563EB;--il:#DBEAFE;--ib:#BFDBFE;
  --purple:#7C3AED;--pul:#EDE9FE;--pub:#DDD6FE;
  --cyan:#0891B2;--cl:#CFFAFE;--cb:#A5F3FC;
  --amber:#B45309;--al:#FEF3C7;--ab:#FDE68A;
  --g50:#F8FAFC;--g100:#F1F5F9;--g200:#E2E8F0;
  --g400:#94A3B8;--g500:#64748B;--g700:#334155;--g800:#1E293B;--g900:#0F172A;
  --f:'Nunito Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:18px;--r-2xl:22px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{font-family:var(--f);color:var(--g700);background:var(--g50);font-size:14px;line-height:1.5;}

/* ── LAYOUT ── */
.page-wrap{display:flex;min-height:100vh;padding-left:240px;}
.sidebar{width:240px;background:white;border-right:1px solid var(--g200);position:fixed;top:0;left:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;z-index:40;}
/* Sidebar's sibling, not .main's direct parent anymore -- the Topbar sits
   inside this column too so it pushes .main down in normal flow instead of
   needing a fixed-position + manual top-padding offset on .main. */
.content-col{flex:1;display:flex;flex-direction:column;min-height:100vh;}
/* max-width caps line length on very wide monitors; margin:0 auto centers
   that capped box within the space to the right of the fixed sidebar
   (page-wrap's padding-left already reserves the sidebar's own 240px, so
   this centers relative to the remaining viewport, not the full window). */
.main{flex:1;padding:40px 48px;max-width:1600px;margin:0 auto;width:100%;}
@media(max-width:900px){.sidebar{display:none;}.page-wrap{padding-left:0;}.main{padding:24px 20px;max-width:none;margin:0;}}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:30;height:64px;flex-shrink:0;background:white;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between;padding:0 32px;}
.topbar-left{display:flex;align-items:center;gap:12px;}
.topbar-right{display:flex;align-items:center;gap:16px;}

.topbar-status-form{display:inline-flex;}
.topbar-status-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--f);font-size:13px;font-weight:600;color:var(--g500);background:var(--g50);border:1px solid var(--g200);border-radius:20px;padding:6px 14px;cursor:pointer;transition:all .15s;}
.topbar-status-btn:hover{border-color:var(--g400);}
.topbar-status-dot{width:8px;height:8px;border-radius:50%;background:var(--g400);flex-shrink:0;}
.topbar-status-btn.is-online{background:var(--sl);color:var(--success);border-color:var(--sb);}
.topbar-status-btn.is-online .topbar-status-dot{background:var(--success);}

.topbar-clock{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--g700);font-variant-numeric:tabular-nums;min-width:64px;text-align:center;}

.topbar-icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--r-md);border:1px solid var(--g200);background:white;color:var(--g500);cursor:pointer;transition:all .15s;}
.topbar-icon-btn:hover{background:var(--g50);color:var(--g900);}
.topbar-icon-btn i{font-size:17px;}
.topbar-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 3px;border-radius:20px;background:var(--p);color:white;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;}

.topbar-user{position:relative;}
.topbar-user-btn{display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;padding:4px 6px;border-radius:var(--r-md);transition:background .15s;}
.topbar-user-btn:hover{background:var(--g50);}
.topbar-user-avatar{width:30px;height:30px;border-radius:50%;background:var(--p);color:white;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.topbar-user-name{font-size:13px;font-weight:600;color:var(--g800);}
.topbar-user-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:white;border:1px solid var(--g200);border-radius:var(--r-lg);box-shadow:0 10px 30px rgba(15,23,42,.12);min-width:160px;padding:6px;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s,visibility .15s;z-index:50;}
.topbar-user-dropdown.open{opacity:1;visibility:visible;transform:translateY(0);}
.topbar-dropdown-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--g700);text-decoration:none;transition:background .1s;}
.topbar-dropdown-item:hover{background:var(--g50);color:var(--g900);}
.topbar-dropdown-item i{font-size:15px;}

@media(max-width:900px){.topbar{padding:0 20px;}.topbar-user-name{display:none;}}
@media(max-width:640px){.topbar-clock{display:none;}}

/* ── SIDEBAR ── */
.sb-brand{display:flex;align-items:center;gap:10px;padding:20px 16px 16px;border-bottom:1px solid var(--g100);}
.sb-logo{width:36px;height:36px;background:var(--p);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sb-logo i{font-size:18px;color:white;}
.sb-brand-name{font-size:13px;font-weight:700;color:var(--g900);}
.sb-brand-sub{font-size:10px;color:var(--g400);}
.sb-nav{padding:10px;}
.sb-section{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);padding:10px 10px 4px;}
.sb-link{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-md);font-size:13px;font-weight:500;color:var(--g500);cursor:pointer;text-decoration:none;transition:all .12s;margin-bottom:1px;}
.sb-link:hover{background:var(--g50);color:var(--g900);}
.sb-link.active{background:var(--pl);color:var(--p);font-weight:700;}
.sb-link i{font-size:16px;width:18px;text-align:center;flex-shrink:0;}
.sb-divider{height:1px;background:var(--g100);margin:8px 10px;}

/* ── PAGE HEADER ── */
.page-header{margin-bottom:40px;padding-bottom:24px;border-bottom:2px solid var(--g200);}
.page-logo{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.page-logo-box{width:44px;height:44px;background:var(--p);border-radius:12px;display:flex;align-items:center;justify-content:center;}
.page-logo-box i{font-size:22px;color:white;}
.page-title{font-size:28px;font-weight:700;color:var(--g900);}
.page-sub{font-size:14px;color:var(--g400);margin-top:4px;}
.version-badge{display:inline-flex;align-items:center;gap:5px;background:var(--pl);color:var(--p);border:1px solid #FECACA;border-radius:20px;font-size:12px;font-weight:700;padding:4px 12px;margin-top:10px;}

/* ── SECTIONS ── */
.section{margin-bottom:56px;scroll-margin-top:24px;}
.section-header{display:flex;align-items:center;gap:10px;margin-bottom:20px;}
.section-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.section-title{font-size:20px;font-weight:700;color:var(--g900);}
.section-sub{font-size:13px;color:var(--g400);margin-top:2px;}
.subsection{margin-bottom:24px;}
.subsection-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--g200);}

/* ── CARDS ── */
.card{background:white;border:1px solid var(--g200);border-radius:var(--r-xl);overflow:hidden;}
/* Deep-link highlight -- e.g. the Ops pool's Edit action links straight to
   /dialer?lead_id=X#edit-details; the browser's own anchor scroll already
   gets the agent there, this just makes it obvious which card they landed
   on instead of a bare unannounced jump. */
.card:target{box-shadow:0 0 0 3px rgba(230,51,41,.25);}
.card-pad{padding:16px 20px;}
.demo-bg{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-xl);padding:20px;}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;}
.col{display:flex;flex-direction:column;gap:8px;}

/* ── TOKENS ── */
.code-box{background:var(--g900);border-radius:var(--r-lg);padding:16px;overflow-x:auto;margin-top:12px;}
pre{font-family:var(--mono);font-size:12px;color:#E2E8F0;line-height:1.8;white-space:pre;}
.c-comment{color:#475569;}
.c-prop{color:#93C5FD;}
.c-val{color:#86EFAC;}
.c-str{color:#FCA5A5;}

/* ── COLORS ── */
.palette{display:flex;flex-wrap:wrap;gap:8px;}
.swatch{display:flex;align-items:center;gap:10px;background:white;border:1px solid var(--g200);border-radius:var(--r-lg);padding:10px 14px;flex:1;min-width:130px;}
.sw-dot{width:32px;height:32px;border-radius:50%;flex-shrink:0;border:1px solid rgba(0,0,0,.07);}
.sw-name{font-size:12px;font-weight:700;color:var(--g900);}
.sw-hex{font-size:11px;color:var(--g400);font-family:var(--mono);}

/* ── TYPOGRAPHY ── */
.typo-row{display:flex;align-items:baseline;gap:14px;background:white;border:1px solid var(--g200);border-radius:var(--r-md);padding:10px 16px;}
.typo-meta{font-size:10px;color:var(--g400);font-family:var(--mono);min-width:120px;flex-shrink:0;}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:5px;font-family:var(--f);font-size:13px;font-weight:600;border-radius:var(--r-md);border:1px solid transparent;cursor:pointer;padding:7px 14px;transition:all .15s;white-space:nowrap;text-decoration:none;}
.btn i{font-size:15px;}
.btn-primary{background:var(--p);color:white;border-color:var(--pd);}
.btn-primary:hover{background:var(--pd);}
.btn-secondary{background:white;color:var(--g700);border-color:var(--g200);box-shadow:0 1px 2px rgba(0,0,0,.04);}
.btn-secondary:hover{background:var(--g50);border-color:var(--g400);}
.btn-ghost{background:transparent;color:var(--g500);border-color:transparent;}
.btn-ghost:hover{background:var(--g100);color:var(--g800);}
.btn-danger{background:var(--dl);color:var(--danger);border-color:var(--db);}
.btn-danger:hover{background:var(--db);}
.btn-add{background:var(--sl);color:var(--success);border-color:var(--sb);}
.btn-receive{background:var(--il);color:var(--info);border-color:var(--ib);}
.btn-transfer{background:var(--pul);color:var(--purple);border-color:var(--pub);}
.btn-reconcile{background:var(--al);color:var(--amber);border-color:var(--ab);}
.btn-bulk{background:var(--cl);color:var(--cyan);border-color:var(--cb);}
.btn-neutral{background:white;color:var(--g700);border-color:var(--g200);box-shadow:0 1px 2px rgba(0,0,0,.04);}
.btn-sm{padding:5px 10px;font-size:12px;border-radius:var(--r-sm);}
.btn-lg{padding:10px 20px;font-size:14px;border-radius:var(--r-lg);}
.btn-icon{padding:7px;border-radius:var(--r-md);}

/* ── ICON BUTTONS + TOOLTIP ── */
.action-wrap{position:relative;display:inline-flex;}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-md);border:1px solid var(--g200);background:white;cursor:pointer;transition:all .15s;}
.icon-btn i{font-size:16px;}
.icon-btn:hover{transform:translateY(-1px);}
.icon-btn-view{color:var(--g700);}
.icon-btn-view:hover{background:var(--g50);}
.icon-btn-edit{color:var(--info);border-color:var(--ib);}
.icon-btn-edit:hover{background:var(--il);}
.icon-btn-test{color:var(--purple);border-color:var(--pub);}
.icon-btn-test:hover{background:var(--pul);}
.icon-btn-sync{color:var(--cyan);border-color:var(--cb);}
.icon-btn-sync:hover{background:var(--cl);}
.icon-btn-warn{color:var(--amber);border-color:var(--ab);}
.icon-btn-warn:hover{background:var(--al);}
.icon-btn-ok{color:var(--success);border-color:var(--sb);}
.icon-btn-ok:hover{background:var(--sl);}
.icon-btn-delete{color:var(--danger);border-color:var(--db);}
.icon-btn-delete:hover{background:var(--dl);}
.icon-btn-whatsapp{color:#25D366;border-color:#bbf2cf;}
.icon-btn-whatsapp:hover{background:#e9fbf1;}
.tsg-tooltip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);background:rgba(15,23,42,.96);color:#fff;font-size:11px;font-weight:600;padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s;z-index:50;box-shadow:0 8px 20px rgba(15,23,42,.18);}
.tsg-tooltip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(15,23,42,.96);}
.action-wrap:hover .tsg-tooltip{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}

/* ── BADGES ── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;border:1px solid transparent;white-space:nowrap;}
.badge-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.b-success{background:var(--sl);color:var(--success);border-color:var(--sb);}
.b-success .badge-dot{background:var(--success);}
.b-ofd{background:var(--il);color:var(--info);border-color:var(--ib);}
.b-ofd .badge-dot{background:var(--info);}
.b-warning{background:var(--wl);color:var(--warning);border-color:var(--wb);}
.b-warning .badge-dot{background:var(--warning);}
.b-danger{background:var(--dl);color:var(--danger);border-color:var(--db);}
.b-danger .badge-dot{background:var(--danger);}
.b-new{background:var(--pul);color:var(--purple);border-color:var(--pub);}
.b-new .badge-dot{background:var(--purple);}
.b-low{background:var(--al);color:var(--amber);border-color:var(--ab);}
.b-low .badge-dot{background:var(--warning);}
/* Duplicate status -- deliberately flat gray, distinct from both New's
   purple and Cancelled's red: a duplicate isn't a fresh lead and isn't a
   customer-refused outcome, it's noise being corrected, so it shouldn't
   visually compete with either. */
.b-muted{background:var(--g100);color:var(--g500);border-color:var(--g200);}
.b-muted .badge-dot{background:var(--g400);}

/* ── INPUTS ── */
.field-group{display:flex;flex-direction:column;gap:5px;}
.field-label{font-size:12px;font-weight:600;color:var(--g700);}
.field-input{font-family:var(--f);font-size:13px;color:var(--g900);background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-lg);padding:8px 12px;outline:none;width:100%;min-height:40px;transition:all .15s;}
.field-input:focus{border-color:rgba(230,51,41,.5);background:white;box-shadow:0 0 0 3px rgba(230,51,41,.1);}
.field-input.valid{border-color:var(--success);background:white;}
.field-input.error{border-color:var(--danger);background:white;box-shadow:0 0 0 3px rgba(220,38,38,.08);}
.field-hint{font-size:11px;color:var(--g400);}
.field-hint.error{color:var(--danger);}
.field-hint.ok{color:var(--success);}
.field-icon-wrap{position:relative;}
.field-icon-wrap .field-input{padding-right:34px;}
.field-icon-wrap i.field-icon-right{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none;}
.field-icon-wrap i.field-icon-left{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:15px;pointer-events:none;color:var(--g400);}
.field-icon-wrap .has-left{padding-left:34px;}
.input-ok-icon{color:var(--success);}
.input-err-icon{color:var(--danger);}

/* ── TOM SELECT STYLE ── */
.ts-demo{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-lg);padding:9px 14px;font-size:13px;color:var(--g800);display:flex;align-items:center;justify-content:space-between;cursor:pointer;min-height:40px;transition:all .15s;font-family:var(--f);}
.ts-demo:hover{background:white;border-color:var(--g400);}
.ts-demo.focused{background:white;border-color:rgba(230,51,41,.5);box-shadow:0 0 0 3px rgba(230,51,41,.1);}
.ts-prefix{display:flex;align-items:center;gap:8px;color:var(--g500);}
.ts-prefix i{font-size:15px;color:var(--g400);}
.ts-chevron{color:var(--g400);font-size:14px;}
.ts-dropdown-demo{background:white;border:1px solid var(--g200);border-radius:var(--r-lg);margin-top:4px;box-shadow:0 10px 30px rgba(15,23,42,.1);overflow:hidden;}
.ts-opt{padding:9px 14px;font-size:13px;color:var(--g800);cursor:pointer;display:flex;align-items:center;gap:8px;}
.ts-opt:hover{background:var(--g50);}
.ts-opt.active{background:var(--pl);color:var(--p);font-weight:600;}
.ts-opt i{font-size:14px;color:var(--g400);}
.ts-opt.active i{color:var(--p);}

/* Real TomSelect instances (initialized by selects.js on every .js-select
   element) generate their own .ts-wrapper/.ts-control/.ts-dropdown markup --
   the .ts-demo/.ts-opt rules above are for the static mockup only and never
   match actual TomSelect output. This is what makes a live Country/Store/
   Payment Method/Cancel Reason dropdown actually look like the rest of the
   design system instead of the library's unstyled default theme. */
.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  min-height: 40px;
  border-radius: var(--r-lg);
  border: 1px solid var(--g200);
  background: var(--g50);
  padding: 8px 12px;
  font-family: var(--f);
  font-size: 13px;
  color: var(--g900);
  box-shadow: none;
  transition: all .15s;
}
.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.focus .ts-control {
  border-color: rgba(230,51,41,.5);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(230,51,41,.1);
}
.ts-dropdown {
  border: 1px solid var(--g200);
  border-radius: var(--r-lg);
  margin-top: 4px;
  box-shadow: 0 10px 30px rgba(15,23,42,.1);
  font-family: var(--f);
  font-size: 13px;
  /* selects.js renders this into <body> (dropdownParent:'body') specifically
     so it can float above table rows, modals and cards regardless of any
     ancestor's overflow/stacking context -- the z-index still needs to beat
     everything else on the page since it's now a body-level sibling, not a
     descendant relying on inherited stacking. */
  z-index: 9999;
}
.ts-dropdown .ts-dropdown-content .option {
  padding: 9px 14px;
  color: var(--g800);
}
.ts-dropdown .ts-dropdown-content .option.active {
  background: var(--pl);
  color: var(--p);
}

/* ── METRIC CARDS ── */
.metric-card{background:var(--g50);border:1px solid var(--g200);border-radius:var(--r-lg);padding:14px 16px;flex:1;min-width:120px;}
.mc-label{font-size:10px;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.07em;}
.mc-value{font-size:22px;font-weight:700;color:var(--g900);line-height:1;margin:5px 0 3px;}
.mc-sub{font-size:11px;color:var(--g400);}
.mc-trend{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;padding:2px 7px;border-radius:5px;margin-top:6px;}
.trend-up{background:var(--sl);color:var(--success);}
.trend-down{background:var(--dl);color:var(--danger);}

/* Clickable metric-card variant -- an <a> styled identically to .metric-card
   (the base class already has no interactive affordance since it's normally
   a plain <div>), plus an active state for whichever KPI's filter is
   currently applied. Added for the Ops Leads (My Leads / Shared Pool) KPI
   row -- the base design-system.html mockup only ever showed static KPI
   divs, never a clickable/quick-filter variant, so there was nothing to
   port here. */
a.metric-card{text-decoration:none;display:block;cursor:pointer;transition:border-color .15s,background .15s;}
a.metric-card:hover{border-color:var(--g400);}
a.metric-card.metric-card-active{background:var(--pl);border-color:#f8b4ae;}
a.metric-card.metric-card-active .mc-label{color:var(--p);}
a.metric-card.metric-card-active .mc-value{color:var(--pd);}

/* ── TABS ── */
.tabs{display:flex;gap:4px;border-bottom:2px solid var(--g200);margin-bottom:20px;}
.tab{display:inline-flex;align-items:center;gap:6px;padding:10px 4px;margin-bottom:-2px;font-size:13px;font-weight:600;color:var(--g400);text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;}
.tab:hover{color:var(--g700);}
.tab.active{color:var(--p);border-bottom-color:var(--p);}
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:20px;background:var(--g100);color:var(--g500);font-size:11px;font-weight:700;}
.tab.active .tab-count{background:var(--pl);color:var(--p);}

/* Row states for the optimistic-lock claim flow (work()/reopen() in
   leads.js): a row a claim just failed on is grayed and its action disabled
   in place -- no redirect, no page reload, matching the exact "gray out
   that row" requirement. */
.tsg-table tbody tr.row-claimed-by-other{opacity:.45;}
.tsg-table tbody tr.row-claimed-by-other:hover{background:transparent;}
.row-claim-note{font-size:11px;color:var(--danger);font-weight:600;margin-top:2px;}

/* ── TABLE ── */
.tsg-table{width:100%;border-collapse:collapse;font-size:13px;}
.tsg-table thead th{font-size:10px;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.07em;padding:9px 14px;text-align:left;background:var(--g50);border-bottom:1px solid var(--g200);}
.tsg-table tbody tr{border-bottom:1px solid var(--g100);transition:background .1s;}
.tsg-table tbody tr:hover{background:var(--g50);}
.tsg-table tbody td{padding:11px 14px;vertical-align:middle;}
.order-id{font-family:var(--mono);font-size:12px;font-weight:500;color:var(--p);}

/* ── SKELETON ── */
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
.skeleton{background:linear-gradient(90deg,var(--g100) 25%,var(--g200) 50%,var(--g100) 75%);background-size:1200px 100%;animation:shimmer 1.4s infinite linear;border-radius:6px;}
.sk-circle{border-radius:50%;}

/* ── DATE RANGE ── */
.dr-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.dr-btn{padding:5px 12px;border-radius:20px;border:1px solid var(--g200);background:white;font-family:var(--f);font-size:12px;font-weight:600;color:var(--g500);cursor:pointer;transition:all .15s;}
.dr-btn:hover{background:var(--g50);border-color:var(--g400);}
.dr-btn.active{background:var(--g900);color:white;border-color:var(--g900);}

/* ── MODALS ── */
.modal-backdrop{background:rgba(15,23,42,.45);border-radius:var(--r-xl);padding:20px;display:flex;align-items:center;justify-content:center;min-height:200px;}
.modal{background:white;border-radius:var(--r-xl);box-shadow:0 20px 60px rgba(0,0,0,.18);width:100%;max-width:380px;}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 14px;border-bottom:1px solid var(--g100);}
.modal-title{font-size:15px;font-weight:700;color:var(--g900);}
.modal-close{width:28px;height:28px;border-radius:var(--r-sm);border:1px solid var(--g200);background:var(--g50);color:var(--g500);display:flex;align-items:center;justify-content:center;cursor:pointer;}
.modal-body{padding:16px 20px;}
.modal-footer{padding:14px 20px;border-top:1px solid var(--g100);display:flex;align-items:center;justify-content:flex-end;gap:8px;}
.alert-icon{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;margin:0 auto 12px;}
.alert-icon-danger{background:var(--dl);color:var(--danger);}
.alert-icon-success{background:var(--sl);color:var(--success);}

/* ── TOASTS ── */
.toast-stack{display:flex;flex-direction:column;gap:8px;}
.toast{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:var(--r-lg);border:1px solid transparent;box-shadow:0 4px 16px rgba(15,23,42,.08);}
.toast i.toast-icon{font-size:17px;flex-shrink:0;margin-top:1px;}
.toast-content{flex:1;}
.toast-title{font-size:13px;font-weight:700;line-height:1.3;}
.toast-sub{font-size:12px;margin-top:2px;opacity:.85;}
.toast-close{font-size:15px;opacity:.6;cursor:pointer;flex-shrink:0;background:none;border:none;color:inherit;}
.toast-success{background:var(--sl);border-color:var(--sb);color:#14532D;}
.toast-warning{background:var(--wl);border-color:var(--wb);color:#78350F;}
.toast-danger{background:var(--dl);border-color:var(--db);color:#7F1D1D;}
.toast-info{background:var(--il);border-color:var(--ib);color:#1E3A8A;}

/* ── EMPTY STATES ── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px;text-align:center;gap:8px;}
.empty-icon{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:4px;}
.empty-title{font-size:14px;font-weight:700;color:var(--g900);}
.empty-sub{font-size:12px;color:var(--g400);max-width:200px;line-height:1.5;}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;gap:4px;}
.pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;border-radius:var(--r-md);border:1px solid var(--g200);background:white;color:var(--g700);font-family:var(--f);font-size:13px;font-weight:600;cursor:pointer;transition:all .12s;padding:0 6px;}
.pg-btn:hover{background:var(--g50);border-color:var(--g400);}
.pg-btn.active{background:var(--p);color:white;border-color:var(--pd);}
.pg-btn:disabled{opacity:.4;cursor:not-allowed;}
.pg-dots{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;font-size:13px;color:var(--g400);}

/* ── INLINE CONFIRM ── */
.inline-confirm{display:flex;align-items:center;gap:8px;background:var(--dl);border:1px solid var(--db);border-radius:var(--r-md);padding:8px 12px;font-size:12px;color:#7F1D1D;}
.inline-confirm i{font-size:16px;color:var(--danger);flex-shrink:0;}
.inline-confirm-text{flex:1;}

/* ── DARK MODE ── */
.dark-wrap{background:#0F172A;border-radius:var(--r-xl);padding:20px;border:1px solid #1E293B;}
.dark-sidebar-mini{background:#1E293B;border-radius:10px;padding:10px;width:160px;flex-shrink:0;}
.dark-nav-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;font-size:12px;font-weight:600;color:#64748B;margin-bottom:2px;cursor:pointer;}
.dark-nav-item.active{background:rgba(230,51,41,.15);color:#FCA5A5;}
.dark-nav-item i{font-size:16px;width:18px;text-align:center;}
.dark-card{background:#1E293B;border:1px solid #334155;border-radius:10px;padding:12px 14px;}
.dark-label{font-size:10px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.07em;}
.dark-value{font-size:20px;font-weight:700;color:#F1F5F9;margin-top:3px;}
.dark-sub{font-size:11px;color:#475569;margin-top:2px;}
.dark-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;}
.dark-b-success{background:rgba(22,163,74,.2);color:#4ADE80;border:1px solid rgba(22,163,74,.3);}
.dark-b-ofd{background:rgba(37,99,235,.2);color:#60A5FA;border:1px solid rgba(37,99,235,.3);}
.dark-b-danger{background:rgba(220,38,38,.2);color:#F87171;border:1px solid rgba(220,38,38,.3);}

/* ── SIDEBAR PREVIEW (design-system doc only) ── */
.sb-preview{background:white;border:1px solid var(--g200);border-radius:var(--r-xl);overflow:hidden;display:flex;}
.sb-preview-sidebar{width:220px;border-right:1px solid var(--g200);flex-shrink:0;padding:10px;}
.sb-preview-main{flex:1;background:var(--g50);padding:14px;display:flex;flex-direction:column;gap:10px;}
.nav-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-md);font-size:13px;font-weight:500;color:var(--g500);margin-bottom:1px;cursor:pointer;}
.nav-item:hover{background:var(--g50);color:var(--g900);}
.nav-item.active{background:var(--pl);color:var(--p);font-weight:700;}
.nav-item i{font-size:16px;width:18px;text-align:center;flex-shrink:0;}
.nav-sub-item{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 36px;border-radius:var(--r-md);font-size:12px;font-weight:500;color:var(--g500);margin-bottom:1px;cursor:pointer;}
.nav-sub-item:hover{background:var(--g50);color:var(--g900);}
.nav-sub-item.active{color:var(--p);font-weight:700;}
.nav-sub-item i{font-size:13px;width:15px;text-align:center;flex-shrink:0;}

/* ── MOBILE PREVIEW (design-system doc only) ── */
.phone-frame{background:#1a1a2e;border-radius:36px;padding:10px;width:260px;box-shadow:0 20px 50px rgba(0,0,0,.3);}
.phone-screen{background:var(--g50);border-radius:28px;overflow:hidden;height:480px;display:flex;flex-direction:column;}
.phone-statusbar{background:white;padding:8px 16px 4px;display:flex;justify-content:space-between;font-size:10px;font-weight:700;color:var(--g900);}
.phone-topbar{background:white;border-bottom:1px solid var(--g200);padding:6px 10px;display:flex;align-items:center;gap:8px;}
.phone-search{flex:1;display:flex;align-items:center;gap:6px;background:var(--g50);border:1px solid var(--g200);border-radius:8px;padding:5px 8px;}
.phone-search i{font-size:12px;color:var(--g400);}
.phone-search span{font-size:11px;color:var(--g400);}
.phone-content{flex:1;overflow:hidden;padding:12px;display:flex;flex-direction:column;gap:8px;}
.phone-bottom-nav{background:white;border-top:1px solid var(--g200);display:flex;align-items:stretch;padding:0 4px 4px;}
.phone-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:7px 4px;cursor:pointer;gap:3px;position:relative;}
.phone-tab i{font-size:18px;color:var(--g400);}
.phone-tab span{font-size:9px;font-weight:600;color:var(--g400);}
.phone-tab.active i{color:var(--p);}
.phone-tab.active span{color:var(--p);}
.phone-tab.active::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:3px;background:var(--p);border-radius:0 0 3px 3px;}

/* ── PROMPT BOX (design-system doc only) ── */
.prompt-box{background:var(--g900);border-radius:var(--r-xl);padding:24px;margin-top:12px;}
.prompt-box pre{font-family:var(--mono);font-size:12px;color:#E2E8F0;line-height:1.9;white-space:pre-wrap;word-break:break-word;}
.prompt-label{font-size:11px;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px;}
.copy-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;color:#CBD5E1;font-size:12px;font-weight:600;padding:6px 12px;cursor:pointer;font-family:var(--f);transition:background .15s;margin-top:12px;}
.copy-btn:hover{background:rgba(255,255,255,.14);}