/* ============================================================
   Iris Ledger CRM — "Skill" style: light sidebar + green accent
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --surface-2:#F1F4F8; --surface-3:#F8FAFC;
  --sidebar:#FFFFFF; --border:#E7ECF2; --border-2:#EEF1F6;
  --text:#0F1B2D; --text-muted:#64748B; --text-faint:#94A3B8;
  --green:#15A34A; --green-600:#12893E; --green-50:#E7F6EC; --green-100:#D2EEDC;
  --red:#EF4444; --red-50:#FDECEC; --blue:#3B82F6; --blue-50:#E9F1FE;
  --amber:#F59E0B; --amber-50:#FDF3E1; --purple:#8B5CF6; --purple-50:#F0EBFE;
  --teal:#14B8A6; --teal-50:#E0F7F4; --ink:#0E1116;
  --shadow-sm:0 1px 2px rgba(15,27,45,.05);
  --shadow:0 6px 20px -6px rgba(15,27,45,.12),0 2px 6px -2px rgba(15,27,45,.06);
  --shadow-lg:0 22px 48px -14px rgba(15,27,45,.28);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:20px;
  --ease:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
h1,h2,h3,h4{font-family:'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-muted)}
::selection{background:var(--green-100)}

/* ---------- Shell ---------- */
.app{display:grid;grid-template-columns:268px 1fr;min-height:100vh}

/* ---------- Sidebar (dark) ---------- */
.sidebar{background:#0F1B2D;border-right:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden}
.brand{display:flex;align-items:center;gap:11px;padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.07);position:relative}
.brand::after{content:'';position:absolute;top:0;right:0;width:120px;height:60px;background:radial-gradient(ellipse at 100% 0,rgba(21,163,74,.18),transparent 70%);pointer-events:none}
.brand-mark{width:40px;height:40px;border-radius:12px;flex:none;background:linear-gradient(135deg,#15A34A,#059669);color:#fff;display:grid;place-items:center;font-weight:800;font-size:13px;line-height:1;text-align:center;font-family:'Plus Jakarta Sans';box-shadow:0 4px 14px rgba(21,163,74,.4)}
.brand-name{font-family:'Plus Jakarta Sans';font-weight:800;font-size:16px;color:#fff}
.brand-name small{display:block;font-size:11px;font-weight:600;color:rgba(255,255,255,.38);letter-spacing:.02em}

.side-user{margin:12px 12px 8px;padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.06)}
.side-user .meta{min-width:0;flex:1}
.side-user .meta b{display:block;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.side-user .meta span{font-size:11.5px;color:rgba(255,255,255,.42)}
.side-user .out{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:rgba(255,255,255,.38);transition:.15s}
.side-user .out:hover{background:rgba(239,68,68,.16);color:#f87171}

.side-search{margin:0 12px 4px;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:9px 12px;color:rgba(255,255,255,.35);transition:border-color .15s,box-shadow .15s,background .15s}
.side-search input{border:0;outline:0;background:none;flex:1;font-size:13px;font-family:inherit;color:#fff}
.side-search input::placeholder{color:rgba(255,255,255,.3)}
.side-search svg{width:16px;height:16px;color:rgba(255,255,255,.35)}
.side-search:focus-within{border-color:rgba(21,163,74,.6);box-shadow:0 0 0 3px rgba(21,163,74,.18);background:rgba(255,255,255,.09)}

.nav{flex:1;overflow-y:auto;padding:4px 12px 16px}
.nav::-webkit-scrollbar{width:4px}.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.nav-group{margin-top:12px}
.nav-group-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;cursor:pointer;font:inherit;padding:0;border-radius:8px;transition:background .15s}
.nav-group-toggle:hover{background:rgba(255,255,255,.05)}
.nav-group-toggle:hover .nav-label{color:rgba(255,255,255,.45)}
.nav-group-toggle:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.nav-group-toggle .nav-label{padding-bottom:6px;transition:color .15s}
.nav-group-toggle .chev-group{width:13px;height:13px;flex:none;opacity:.28;transition:transform .15s var(--ease),opacity .15s;margin:0 10px 6px 0}
.nav-group-toggle:hover .chev-group{opacity:.5}
.nav-group.open .nav-group-toggle .chev-group{transform:rotate(180deg);opacity:.5}
.nav-group-items{display:flex;flex-direction:column}
.nav-group:not(.open) .nav-group-items{display:none}
.nav-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.26);padding:0 10px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;color:rgba(255,255,255,.6);font-weight:500;font-size:13.5px;margin-bottom:1px;transition:.15s var(--ease)}
.nav-item svg{width:18px;height:18px;flex:none;stroke-width:1.9;color:rgba(255,255,255,.32);transition:.15s}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item:hover svg{color:rgba(255,255,255,.65)}
.nav-item.active{background:linear-gradient(90deg,rgba(21,163,74,.9),rgba(5,150,105,.85));color:#fff;box-shadow:0 4px 14px rgba(21,163,74,.28);font-weight:600}
.nav-item.active svg{color:#fff}
.nav-item .chev{margin-left:auto;width:15px;height:15px;opacity:.4;transition:transform .15s var(--ease)}
.nav-item .tag{margin-left:auto;font-size:10.5px;font-weight:700;background:rgba(21,163,74,.22);color:#4ADE80;padding:1px 8px;border-radius:20px}

/* Submenu (parent item with children — menu.php's optional 'children' key) */
.nav-toggle{width:100%;background:none;border:none;cursor:pointer;text-align:left;font:inherit}
.nav-parent.open > .nav-toggle .chev{transform:rotate(180deg);opacity:.7}
.nav-children{display:flex;flex-direction:column;padding-left:14px;margin-top:1px}
.nav-children .nav-item{padding-left:24px;font-size:12.5px}
.nav-children .nav-item svg{width:15px;height:15px}
.nav-item-disabled{cursor:default;opacity:.45}
.nav-item-disabled:hover{background:none;color:rgba(255,255,255,.6)}
.nav-item-disabled .tag{background:rgba(255,255,255,.1);color:rgba(255,255,255,.5)}
.nav-item.active .tag{background:rgba(255,255,255,.22);color:#fff}
.nav-empty{padding:16px 14px;font-size:12.5px;color:rgba(255,255,255,.35);text-align:center}
.side-foot{border-top:1px solid rgba(255,255,255,.07);padding:8px 12px 14px}

/* ---------- Topbar ---------- */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:16px;padding:0 28px;height:64px;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:20;box-shadow:0 1px 0 var(--border)}
.topbar h1{font-size:17px;font-weight:700;color:var(--text)}
.topbar .right{margin-left:auto;display:flex;align-items:center;gap:12px}
.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);display:grid;place-items:center;color:var(--text-muted);box-shadow:var(--shadow-sm);cursor:pointer;position:relative;transition:.15s}
.icon-btn:hover{color:var(--text);background:var(--surface-2)}
.icon-btn.active-ghost{color:var(--green-600);background:var(--green-50);border-color:var(--green-100)}
.topbar .who{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--border)}
.topbar .who .meta{text-align:right;line-height:1.25}
.topbar .who .meta b{font-size:13px;font-weight:700;display:block}
.topbar .who .meta span{font-size:11px;color:var(--text-faint)}
.content{padding:24px 28px 56px;flex:1}

/* avatars */
.avatar{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;color:#fff;font-size:13px}
.av-sm{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none}
.av-soft{background:var(--green-50)!important;color:var(--green-600)!important}

/* ---------- Buttons / pills ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:600;font-size:13.5px;padding:9px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:.16s var(--ease)}
.btn svg{width:16px;height:16px;stroke-width:2}
.btn-primary{background:var(--green);color:#fff;box-shadow:0 8px 18px -6px rgba(21,163,74,.5)}
.btn-primary:hover{background:var(--green-600);transform:translateY(-1px)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:9px}
.link-all{font-size:12.5px;font-weight:600;color:var(--green-600)}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:30px;line-height:1.4}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill-green{background:var(--green-50);color:var(--green-600)} .pill-red{background:var(--red-50);color:#D33}
.pill-amber{background:var(--amber-50);color:#B6791B} .pill-blue{background:var(--blue-50);color:#2D6FE0}
.pill-purple{background:var(--purple-50);color:#7C4BD8} .pill-teal{background:var(--teal-50);color:#0E8C82}
.pill-gray{background:var(--surface-2);color:var(--text-muted)}
.badge{font-size:11.5px;font-weight:700;padding:3px 11px;border-radius:20px;background:var(--blue-50);color:#2D6FE0}
.badge-green{background:var(--green-50);color:var(--green-600)}

/* ---------- Cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card-pad{padding:20px}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.card-head h3{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.card-head h3 svg{width:17px;height:17px;color:var(--text-muted)}

/* Collapsed-by-default section wrapper — used for low-frequency panels
   (Playbook, Deal Intel, Meeting Notes, Change History, etc.) so a detail
   page isn't a wall of equally-weighted cards. Native <details>/<summary>:
   no JS needed, works with browser find-in-page, degrades safely. */
details.card-collapsible{margin-bottom:16px}
details.card-collapsible > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r);color:var(--text-muted);font-size:13px;font-weight:600;user-select:none}
details.card-collapsible > summary::-webkit-details-marker{display:none}
details.card-collapsible > summary:hover{color:var(--text);background:var(--surface-2)}
details.card-collapsible > summary::before{content:'▸';display:inline-block;font-size:11px;transition:transform .15s var(--ease);color:var(--text-faint)}
details.card-collapsible[open] > summary::before{transform:rotate(90deg)}
details.card-collapsible > summary .cc-count{margin-left:auto;font-size:11px;font-weight:700;background:var(--surface-2);color:var(--text-faint);padding:1px 8px;border-radius:20px}
details.card-collapsible[open] > summary{margin-bottom:8px}
details.card-collapsible .card{margin:0}

/* Simple numbered step indicator for short wizards (import, install, etc.) */
.wiz-steps{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.wiz-step{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--text-faint)}
.wiz-step .n{width:20px;height:20px;border-radius:50%;background:var(--surface-2);color:var(--text-faint);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none}
.wiz-step.done .n{background:var(--green);color:#fff}
.wiz-step.active{color:var(--text)}
.wiz-step.active .n{background:var(--green);color:#fff}
.wiz-sep{width:20px;height:1px;background:var(--border)}
.grid{display:grid;gap:16px}
.cols-2{grid-template-columns:1fr 1fr}

/* ---------- Profile banner ---------- */
.profile-banner{display:flex;align-items:center;gap:18px;padding:16px 20px;border-radius:var(--r-lg);border:1px solid #F6D9D9;background:linear-gradient(100deg,#FDECEC,#FFF7F4 60%,#FFFDFB);margin-bottom:16px}
.pb-ic{width:46px;height:46px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-items:center;flex:none;box-shadow:0 8px 18px -6px rgba(239,68,68,.5)}
.pb-ic svg{width:22px;height:22px}
.pb-body{flex:1;min-width:0}
.pb-title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;margin-bottom:9px}
.pb-chip{font-size:11.5px;font-weight:700;background:var(--red);color:#fff;padding:1px 9px;border-radius:20px}
.pb-bar{height:8px;border-radius:20px;background:#F4D3D0;overflow:hidden}
.pb-bar>span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#F97316,#F59E0B)}
.pb-sub{font-size:12px;color:var(--text-muted);margin-top:8px}

/* ---------- Command center ---------- */
.command{position:relative;overflow:hidden;border-radius:var(--r-xl);background:radial-gradient(120% 160% at 100% 0,#3A1622 0,#15171E 42%,#101218 100%);color:#fff;padding:24px 26px;display:flex;align-items:center;gap:20px;margin-bottom:18px}
.cmd-badge{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#FFC9C2;background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.35);padding:5px 11px;border-radius:8px}
.cmd-badge svg{width:13px;height:13px}
.command h2{font-size:28px;font-weight:800;margin:14px 0 6px;color:#fff}
.cmd-sub{color:#9BA3B4;font-size:13.5px}
.cmd-stats{margin-left:auto;display:flex;gap:12px;flex:none}
.cmd-stat{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:14px 18px;text-align:center;min-width:104px}
.cmd-stat b{font-family:'Plus Jakarta Sans';font-size:24px;font-weight:800;display:block;color:#fff}
.cmd-stat span{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#9BA3B4;display:inline-flex;align-items:center;gap:5px;margin-top:5px}
.cmd-stat span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green)}
.cmd-stat.red span::before{background:var(--red)}
.cmd-stat.amber span::before{background:var(--amber)}

/* ---------- KPI cards ---------- */
.kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:18px}
.kpi{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm);overflow:hidden;transition:.2s var(--ease);cursor:default}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.kpi::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--k,#94A3B8)}
.kpi::after{content:"";position:absolute;top:0;right:0;width:80px;height:80px;background:radial-gradient(ellipse at 100% 0,var(--kbg,#F1F4F8),transparent 70%);pointer-events:none}
.kpi .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;background:var(--kbg,#F1F4F8);color:var(--k,#64748B)}
.kpi .ic svg{width:18px;height:18px;stroke-width:2}
.kpi .val{font-family:'Plus Jakarta Sans';font-weight:800;font-size:28px;letter-spacing:-.04em;line-height:1;color:var(--text)}
.kpi .label{font-size:12px;color:var(--text-muted);font-weight:500;margin:8px 0 10px}
.kpi .delta{font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px}
.kpi .delta.up{color:var(--green);background:var(--green-50)} .kpi .delta.down{color:var(--red);background:var(--red-50)} .kpi .delta.flat{color:var(--text-faint);background:var(--surface-2)}
.k-red{--k:var(--red);--kbg:var(--red-50)} .k-green{--k:var(--green);--kbg:var(--green-50)}
.k-blue{--k:var(--blue);--kbg:var(--blue-50)} .k-amber{--k:var(--amber);--kbg:var(--amber-50)}
.k-purple{--k:var(--purple);--kbg:var(--purple-50)} .k-teal{--k:var(--teal);--kbg:var(--teal-50)}

/* ---------- Action pills ---------- */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.action{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:30px;padding:9px 16px;font-size:13px;font-weight:600;color:var(--text);box-shadow:var(--shadow-sm);transition:.15s var(--ease)}
.action svg{width:15px;height:15px;color:var(--text-muted);stroke-width:2}
.action:hover{border-color:var(--green-100);color:var(--green-600);transform:translateY(-1px)}
.action:hover svg{color:var(--green)}

/* ---------- Panels (leaderboard / shortcuts) ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.panel-body{padding:8px 18px 18px}
.lb-row{display:flex;align-items:center;gap:13px;padding:12px 0;border-bottom:1px solid var(--border-2)}
.lb-row:last-child{border-bottom:0}
.lb-rank{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;font-size:13px;color:#fff;flex:none}
.lb-rank.r1{background:#F97316} .lb-rank.r2{background:#94A3B8} .lb-rank.r3{background:#B98A4B} .lb-rank.rx{background:#CBD5E1}
.lb-meta{flex:1;min-width:0}
.lb-meta b{font-size:13.5px;font-weight:700;display:block}
.lb-meta span{font-size:12px;color:var(--text-faint)}
.lb-pts{text-align:right;font-weight:800;font-family:'Plus Jakarta Sans';color:var(--green-600)}
.lb-pts span{display:block;font-size:10.5px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}
.shortcut-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:4px 18px 18px}
.shortcut{display:flex;align-items:center;gap:9px;border:1px solid var(--border);border-radius:11px;padding:11px 13px;font-size:13px;font-weight:600;background:var(--surface);transition:.14s}
.shortcut svg{width:16px;height:16px;color:var(--text-muted)}
.shortcut:hover{border-color:var(--green-100);background:var(--green-50);color:var(--green-600)}
.shortcut:hover svg{color:var(--green)}

/* ---------- Tabs ---------- */
.tabs{display:flex;gap:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:5px;margin:18px 0 16px;width:fit-content}
.tab{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer}
.tab svg{width:15px;height:15px}
.tab.active{background:var(--surface);color:var(--green-600);box-shadow:var(--shadow-sm)}
.tab-highlight{animation:tabHighlightPulse 1.2s ease}
@keyframes tabHighlightPulse{
  0%{box-shadow:0 0 0 4px var(--green-ring);border-radius:14px}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0);border-radius:14px}
}

/* ---------- Chart cards ---------- */
.chart-empty{min-height:170px;display:grid;place-items:center;color:var(--text-faint);font-size:13px}
.chart-grad{height:170px;border-radius:12px;margin:0 20px 20px;background:linear-gradient(180deg,#15A34A,#43C66B 55%,rgba(67,198,107,.15));position:relative;overflow:hidden}

/* ---------- Table ---------- */
.table-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);padding:12px 20px;border-bottom:1px solid var(--border-2);background:var(--surface-3)}
.tbl td{padding:13px 20px;border-bottom:1px solid var(--border-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-3)}
.tbl .who{display:flex;align-items:center;gap:11px}
.tbl .who b{font-weight:600;display:block} .tbl .who span{font-size:12px;color:var(--text-faint)}
.money{font-variant-numeric:tabular-nums;font-weight:600}
.empty{padding:46px;text-align:center;color:var(--text-faint)}
.empty svg{width:30px;height:30px;margin-bottom:8px;opacity:.5}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px}
.section-title h2{font-size:17px}

/* ---------- Pipeline kanban ---------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(220px,1fr));gap:14px;align-items:start;overflow-x:auto;padding-bottom:8px}
.col{background:var(--surface-2);border-radius:var(--r-lg);border:1px solid var(--border-2);min-height:120px}
.col-head{display:flex;align-items:center;gap:8px;padding:13px 15px 10px}
.col-head .dot{width:9px;height:9px;border-radius:50%}
.col-head b{font-size:13px;font-weight:700;flex:1}
.col-head .count{font-size:11px;font-weight:700;color:var(--text-muted);background:var(--surface);padding:1px 8px;border-radius:20px;border:1px solid var(--border)}
.col-sum{padding:0 15px 10px;font-size:11.5px;color:var(--text-faint);font-weight:600;font-variant-numeric:tabular-nums}
.col-body{padding:0 10px 12px;display:flex;flex-direction:column;gap:9px;min-height:60px}
.deal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 14px;box-shadow:var(--shadow-sm);cursor:grab;transition:.15s}
.deal:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.deal.dragging{opacity:.45;transform:rotate(1.5deg) scale(.98)}
.deal .co{font-weight:700;font-size:13.5px;margin-bottom:3px}
.deal .amt{font-family:'Plus Jakarta Sans';font-weight:800;font-size:16px;letter-spacing:-.02em}
.deal .row{display:flex;align-items:center;justify-content:space-between;margin-top:11px}
.deal .owner{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-muted)}
.col.drop-on{outline:2px dashed var(--green);outline-offset:-3px;background:var(--green-50)}

/* ---------- Forms / dialogs ---------- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;margin-bottom:7px}
.input{width:100%;padding:10px 13px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:14px;background:var(--surface);transition:.15s;color:var(--text)}
.input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px var(--green-50)}
.alert{background:var(--red-50);color:#C5302F;padding:11px 14px;border-radius:10px;font-size:13px;font-weight:500;margin-bottom:16px}
dialog{border:0;border-radius:18px;padding:0;max-width:420px;width:92%;box-shadow:var(--shadow-lg)}
dialog::backdrop{background:rgba(15,27,45,.45)}

/* ---------- Login ---------- */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.auth-aside{background:radial-gradient(120% 120% at 0 0,#15A34A 0,#0F7A38 45%,#0C3D24 100%);color:#fff;padding:54px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.auth-aside .glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.18),transparent 65%);top:-130px;right:-120px}
.auth-aside h2{font-size:33px;line-height:1.2;font-weight:800;max-width:14ch;position:relative}
.auth-aside p{color:#D6F0DE;max-width:34ch;margin-top:16px;position:relative}
.auth-stats{display:flex;gap:30px;position:relative}
.auth-stats b{font-family:'Plus Jakarta Sans';font-size:25px;font-weight:800;display:block}
.auth-stats span{font-size:12px;color:#BFE6CB}
.auth-main{display:grid;place-items:center;padding:40px}
.auth-card{width:100%;max-width:380px}
.auth-card h1{font-size:26px;margin-bottom:6px}
.auth-card .lead{color:var(--text-muted);margin-bottom:24px}
.demo-keys{margin-top:20px;background:var(--surface-2);border:1px dashed var(--border);border-radius:12px;padding:13px 15px;font-size:12px;color:var(--text-muted)}
.demo-keys b{color:var(--text)}

/* ---------- Install wizard ---------- */
.wiz{min-height:100vh;display:grid;grid-template-columns:300px 1fr}
.wiz-rail{background:radial-gradient(120% 120% at 0 0,#15A34A,#0F7A38 45%,#0C3D24 100%);color:#fff;padding:40px 34px;display:flex;flex-direction:column}
.wiz-rail .brand-mark{background:rgba(255,255,255,.16)}
.wiz-steps{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:4px}
.wiz-step{display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:11px;font-size:14px;font-weight:600;color:#BFE6CB}
.wiz-step .dot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:rgba(255,255,255,.14);color:#D6F0DE;flex:none}
.wiz-step.now{color:#fff;background:rgba(255,255,255,.10)}
.wiz-step.now .dot{background:#fff;color:var(--green-600)}
.wiz-step.done .dot{background:#0C3D24;color:#fff}
.wiz-foot{margin-top:auto;font-size:11.5px;color:#BFE6CB;opacity:.8}
.wiz-main{display:grid;place-items:center;padding:48px 32px;overflow-y:auto}
.wiz-card{width:100%;max-width:560px}
.wiz-card h1{font-size:28px;margin-bottom:8px}
.wiz-card .lead{color:var(--text-muted);margin-bottom:26px;line-height:1.55}
.wiz-actions{display:flex;align-items:center;justify-content:space-between;margin-top:30px}
.check-list{list-style:none;display:flex;flex-direction:column;gap:9px}
.check{display:flex;align-items:center;gap:13px;padding:13px 16px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}
.check b{display:block;font-size:13.5px;font-weight:600}.check span{font-size:12px;color:var(--text-faint)}
.check-ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-weight:800;font-size:13px;flex:none}
.check.ok .check-ic{background:var(--green-50);color:var(--green-600)}
.check.bad{border-color:#F3C9D4}.check.bad .check-ic{background:var(--red-50);color:#D33}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice{position:relative;border:1.5px solid var(--border);border-radius:14px;padding:16px;cursor:pointer;transition:.16s;background:var(--surface)}
.choice input{position:absolute;top:15px;right:15px;accent-color:var(--green);width:17px;height:17px}
.choice:has(input:checked){border-color:var(--green);box-shadow:0 0 0 3px var(--green-50)}
.choice-body b{display:block;font-size:14.5px;font-weight:700;margin-bottom:5px;font-family:'Plus Jakarta Sans'}
.choice-body span{font-size:12.5px;color:var(--text-muted);line-height:1.5}
code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--surface-2);padding:1px 5px;border-radius:5px}
.opt-list{display:flex;flex-direction:column;gap:10px;margin-top:22px}
.opt{display:flex;gap:13px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:var(--surface)}
.opt:has(input:checked){border-color:var(--green);background:#FCFEFC}
.opt input{margin-top:2px;accent-color:var(--green);width:17px;height:17px;flex:none}
.opt b{display:block;font-size:13.5px;font-weight:600}.opt span{font-size:12.5px;color:var(--text-muted)}
.done-mark{width:62px;height:62px;border-radius:50%;background:var(--green-50);color:var(--green-600);display:grid;place-items:center;font-size:30px;font-weight:800;margin-bottom:20px}
.done-box{border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:6px}
.done-row{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-size:13.5px;border-bottom:1px solid var(--border-2)}
.done-row:last-child{border-bottom:0}.done-row span{color:var(--text-muted)}

/* ---------- Responsive ---------- */
@media (max-width:1200px){.kpis{grid-template-columns:repeat(3,1fr)}}
@media (max-width:1024px){.cols-2{grid-template-columns:1fr}.cmd-stats{display:none}}
/* Tablet gap: the sidebar was a fixed 268px column all the way down to the
   760px full-drawer collapse, with no intermediate step — content already
   gets tight enough at 1024px to collapse .cols-2 above, so the sidebar
   should give some of that width back over the same range instead of
   staying full-size right up until it becomes an overlay. */
@media (max-width:1024px) and (min-width:761px){.app{grid-template-columns:216px 1fr}}
@media (max-width:760px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:-272px;z-index:50;transition:left .28s var(--ease);width:268px}
  .sidebar.open{left:0;box-shadow:0 0 0 100vw rgba(0,0,0,.4),0 24px 64px rgba(0,0,0,.4)}
  .menu-toggle{display:grid!important}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .auth,.wiz{grid-template-columns:1fr}.auth-aside,.wiz-rail{display:none}
  .command{flex-direction:column;align-items:flex-start}
  .choice-grid{grid-template-columns:1fr}
}
.menu-toggle{display:none}
.scrim{display:none}
@media (max-width:760px){.scrim.show{display:block;position:fixed;inset:0;background:rgba(15,27,45,.4);z-index:40}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.av-sm svg{width:16px;height:16px}
.lb-pts{display:flex;flex-direction:column;align-items:flex-end}

/* ---- Topbar search + notifications (Phase 5) ---- */
.topsearch{position:relative;display:flex;align-items:center}
.topsearch input{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:8px 12px 8px 34px;font:inherit;font-size:13px;width:230px;color:var(--text);outline:none;transition:border-color .15s,box-shadow .15s}
.topsearch input:focus{border-color:var(--green);box-shadow:0 0 0 3px var(--green-50);background:var(--surface)}
.topsearch .ts-ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-muted);display:flex;pointer-events:none}
.topsearch .ts-ic svg{width:15px;height:15px}
@media(max-width:720px){.topsearch{display:none}.cmd-hint{display:none}}

.notif{position:relative}
.notif>summary{list-style:none;cursor:pointer;position:relative}
.notif>summary::-webkit-details-marker{display:none}
.notif-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--red,#E5484D);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;line-height:1}
.notif-panel{position:absolute;right:0;top:calc(100% + 8px);width:288px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-lg,0 10px 40px rgba(20,30,60,.16));padding:6px;z-index:60}
.notif-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:8px 10px 6px;display:flex;align-items:center;justify-content:space-between}
.notif-empty{padding:14px 10px;color:var(--text-muted);font-size:13px}
.notif-item{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--text);font-size:13px}
.notif-item:hover{background:var(--surface-2)}
.notif-item .ni-ic{display:flex;color:var(--text-muted)}
.notif-item .ni-ic svg{width:15px;height:15px}
.notif-dot{width:7px;height:7px;border-radius:50%;flex:none}
.notif-dot.red{background:var(--red,#E5484D)}.notif-dot.amber{background:var(--amber,#E5A53B)}.notif-dot.green{background:var(--green,#15A34A)}
.notif-new-dot{width:6px;height:6px;border-radius:50%;background:var(--green,#15A34A);flex:none;margin-left:auto}
.notif-mark-read{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:11px;font-weight:600;padding:2px 6px;border-radius:5px;display:flex;align-items:center;gap:3px}
.notif-mark-read:hover{background:var(--surface-2);color:var(--text)}
.notif-mark-read svg{width:12px;height:12px}
.notif-view-all{font-size:11px;font-weight:600;color:var(--green,#15A34A);text-decoration:none;padding:2px 6px;border-radius:5px}
.notif-view-all:hover{background:rgba(21,163,74,.08)}

/* ================================================================
   DARK MODE — activated by data-theme="dark" on <html>
   All values map 1-to-1 with the :root light vars above so every
   component picks up the change automatically via CSS variables.
   ================================================================ */
[data-theme="dark"] {
  --bg:#0C0F15; --surface:#151820; --surface-2:#1C2030; --surface-3:#222638;
  --sidebar:#080C14; --border:#242A3A; --border-2:#1E2436;
  --text:#E8EBF0; --text-muted:#8A91A0; --text-faint:#555D6E;
  --green:#22C55E; --green-600:#16A34A; --green-50:#0D2518; --green-100:#122E1E;
  --red:#F87171; --red-50:#2D1414; --blue:#60A5FA; --blue-50:#0E1E38;
  --amber:#FBBF24; --amber-50:#2A1D08; --purple:#A78BFA; --purple-50:#1E1530;
  --teal:#2DD4BF; --teal-50:#0A2625;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);
  --shadow:0 6px 24px -4px rgba(0,0,0,.5);
  --shadow-lg:0 24px 56px -10px rgba(0,0,0,.7);
}

/* ================================================================
   COMMAND PALETTE  (Cmd/Ctrl + K)
   ================================================================ */
.cmd-overlay{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(10,13,20,.55);backdrop-filter:blur(4px);
  align-items:flex-start;justify-content:center;padding-top:14vh;
}
.cmd-overlay.open{display:flex}
.cmd-box{
  width:min(620px,94vw);background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;
}
.cmd-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border-2)}
.cmd-input-wrap svg{flex:none;color:var(--text-muted)}
.cmd-input{flex:1;font:inherit;font-size:16px;background:transparent;border:none;outline:none;color:var(--text)}
.cmd-input::placeholder{color:var(--text-faint)}
.cmd-results{max-height:360px;overflow-y:auto;padding:6px}
.cmd-group-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint);padding:8px 10px 4px}
.cmd-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:9px;cursor:pointer;color:var(--text);text-decoration:none;font-size:13.5px}
.cmd-item:hover,.cmd-item.sel{background:var(--surface-2)}
.cmd-item svg{color:var(--text-muted);flex:none}
.cmd-item .cmd-sub{margin-left:auto;font-size:11px;color:var(--text-faint)}
.cmd-empty{padding:28px 16px;text-align:center;color:var(--text-muted);font-size:13px}
.cmd-footer{display:flex;gap:14px;padding:9px 14px;border-top:1px solid var(--border-2);font-size:11px;color:var(--text-faint)}
.cmd-footer kbd{background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:2px 5px;font-size:10px;font-family:inherit}

/* ================================================================
   PRINT STYLES — clean A4/letter print of lead/deal summaries
   ================================================================ */
@media print {
  .sidebar,.topbar,.cmd-overlay,.notif,.icon-btn,.btn,.actions,
  .card-head > a,.alert,.flash,.pager,form,.shortcut-grid,.tabs { display:none!important }
  body,.app,.main,.content { display:block!important;background:#fff!important;color:#000!important }
  .card { border:1px solid #ccc!important;break-inside:avoid;margin-bottom:12px }
  .tbl th,.tbl td { border:1px solid #ddd!important }
  .tbl thead { position:static!important }
  a { color:#000!important;text-decoration:none!important }
  .pill { border:1px solid #999!important;background:#eee!important;color:#000!important }
}

/* ================================================================
   UI/UX OVERHAUL — comprehensive additions 2026-06-30
   ================================================================ */

/* ── Missing CSS variables ── */
:root {
  --green-ring: rgba(21,163,74,.16);
  --font-mono: ui-monospace,'Cascadia Code',Menlo,'Courier New',monospace;
  --orange:#F97316; --orange-50:#FFF4ED; --orange-100:#FFEDD5;
  --indigo:#6366F1; --indigo-50:#EEF2FF;
  --pink:#EC4899;   --pink-50:#FDF2F8;
  --cyan:#06B6D4;   --cyan-50:#ECFEFF;
  --content-max:1540px;
}
[data-theme="dark"] {
  --green-ring: rgba(34,197,94,.13);
  --orange-50:#2A1400; --orange-100:#361B00;
  --indigo-50:#1E1D38; --pink-50:#2A0E1E;
  --cyan-50:#071E22;
}

/* ── Smooth scroll ── */
html { scroll-behavior:smooth; }

/* ── Content max-width at ultra-wide screens ── */
@media (min-width:1800px) { .content { max-width:var(--content-max); } }

/* ── Scrollbar polish (webkit) ── */
.nav::-webkit-scrollbar-track { background:transparent; }
.main { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
.main::-webkit-scrollbar { width:5px; }
.main::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }

/* ── Dialog open animation ── */
@keyframes dlg-in  { from{opacity:0;transform:scale(.94) translateY(12px)} to{opacity:1;transform:none} }
@keyframes bk-in   { from{opacity:0} to{opacity:1} }
dialog[open]          { animation:dlg-in .22s cubic-bezier(.34,1.28,.64,1) both; }
dialog[open]::backdrop{ animation:bk-in  .22s ease both; }
dialog::backdrop      { background:rgba(10,15,30,.52); backdrop-filter:blur(3px); }
[data-theme="dark"] dialog::backdrop { background:rgba(0,0,0,.68); }

/* ── Button variants ── */
.btn-danger {
  background:var(--red); color:#fff;
  box-shadow:0 8px 18px -6px rgba(239,68,68,.45);
}
.btn-danger:hover { background:#DC2626; transform:translateY(-1px); box-shadow:0 10px 22px -6px rgba(239,68,68,.55); }
.btn-danger:active { transform:none; }

.btn-warn {
  background:var(--amber); color:#fff;
  box-shadow:0 8px 18px -6px rgba(245,158,11,.4);
}
.btn-warn:hover { background:#D97706; transform:translateY(-1px); }

.btn-outline {
  background:transparent; color:var(--text); border-color:var(--border);
}
.btn-outline:hover { border-color:var(--green); color:var(--green); background:var(--green-50); }

.btn-link {
  background:none; border-color:transparent; color:var(--green-600);
  box-shadow:none; padding-left:4px; padding-right:4px;
}
.btn-link:hover { background:var(--green-50); color:var(--green); text-decoration:none; }

.btn:disabled, .btn[disabled] {
  opacity:.48; pointer-events:none; cursor:not-allowed;
  box-shadow:none; transform:none;
}
.btn-loading {
  pointer-events:none; position:relative; color:transparent !important;
}
.btn-loading::after {
  content:''; position:absolute; width:15px; height:15px;
  border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
  border-radius:50%; animation:spin .65s linear infinite;
  left:50%; top:50%; margin:-7.5px 0 0 -7.5px;
}
.btn-primary.btn-loading::after { border-color:rgba(255,255,255,.3); border-top-color:#fff; }
.btn-ghost.btn-loading::after { border-color:var(--border); border-top-color:var(--text-muted); }
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Alert / flash variants ── */
.alert {
  display:flex; align-items:flex-start; gap:10px;
  padding:12px 16px; border-radius:10px; margin-bottom:16px;
  font-size:13.5px; font-weight:500;
  border:1px solid rgba(239,68,68,.22);
  background:var(--red-50); color:#B91C1C;
  animation:flash-in .28s ease both;
}
[data-theme="dark"] .alert { color:#FCA5A5; }
.alert svg { width:16px; height:16px; flex:none; margin-top:1px; }
.alert-success { background:var(--green-50); color:var(--green-600); border-color:rgba(21,163,74,.25); }
.alert-info    { background:var(--blue-50);  color:#1D4ED8;           border-color:rgba(59,130,246,.22); }
.alert-warn    { background:var(--amber-50); color:#92400E;           border-color:rgba(245,158,11,.22); }
[data-theme="dark"] .alert-success { color:var(--green); }
[data-theme="dark"] .alert-info    { color:#93C5FD; }
[data-theme="dark"] .alert-warn    { color:var(--amber); }

/* Flash messages — standardized */
.flash {
  display:flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:10px; margin-bottom:16px;
  font-size:13.5px; font-weight:500;
  border:1px solid transparent;
  animation:flash-in .3s ease both;
}
@keyframes flash-in { from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
.flash svg { width:15px; height:15px; flex:none; }
.flash-success {
  background:var(--green-50); color:var(--green-600);
  border-color:rgba(21,163,74,.25);
}
.flash-error {
  background:var(--red-50); color:#B91C1C;
  border-color:rgba(239,68,68,.22);
}
.flash-info {
  background:var(--blue-50); color:#1D4ED8;
  border-color:rgba(59,130,246,.2);
}
.flash-warn {
  background:var(--amber-50); color:#92400E;
  border-color:rgba(245,158,11,.2);
}
[data-theme="dark"] .flash-success { color:var(--green); }
[data-theme="dark"] .flash-error   { color:#FCA5A5; }
[data-theme="dark"] .flash-info    { color:#93C5FD; }
[data-theme="dark"] .flash-warn    { color:var(--amber); }

/* ── Form enhancements ── */
.input::placeholder { color:var(--text-faint); }
.input:disabled, .input[readonly] {
  background:var(--surface-2); color:var(--text-muted);
  cursor:not-allowed; opacity:.72;
}
.input:invalid:not(:placeholder-shown):not(:focus) {
  border-color:var(--red); box-shadow:0 0 0 3px var(--red-50);
}
[data-theme="dark"] .input:invalid:not(:placeholder-shown):not(:focus) {
  box-shadow:0 0 0 3px rgba(239,68,68,.15);
}

/* Custom select arrow */
select.input {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  background-size:16px; padding-right:34px;
  appearance:none; -webkit-appearance:none; cursor:pointer;
}
[data-theme="dark"] select.input {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A91A0' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
textarea.input { resize:vertical; min-height:88px; line-height:1.55; }

/* Form helpers */
.form-hint { font-size:12px; color:var(--text-faint); margin-top:5px; line-height:1.45; }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
@media(max-width:560px) { .form-row,.form-row-3 { grid-template-columns:1fr; } }

/* .form-input / .form-label — aliases used in several views */
.form-input{width:100%;padding:10px 13px;border:1px solid var(--border);border-radius:10px;font-family:inherit;font-size:14px;background:var(--surface);transition:.15s;color:var(--text)}
.form-input:focus{outline:0;border-color:var(--green);box-shadow:0 0 0 3px var(--green-50)}
.form-input::placeholder{color:var(--text-faint)}
.form-input:disabled,.form-input[readonly]{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed;opacity:.72}
select.form-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px;padding-right:34px;appearance:none;-webkit-appearance:none;cursor:pointer}
textarea.form-input{resize:vertical;min-height:88px;line-height:1.55}
[data-theme="dark"] select.form-input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A91A0' stroke-width='2.2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}
.form-label{display:block;font-size:12.5px;font-weight:600;color:var(--text-muted);margin-bottom:6px}

/* Input group (addon pattern) */
.input-group { display:flex; align-items:stretch; }
.input-group .input { flex:1; border-radius:0; }
.input-group .input:first-child { border-radius:10px 0 0 10px; }
.input-group .input:last-child  { border-radius:0 10px 10px 0; }
.input-group > .btn { border-radius:0 10px 10px 0; border-left:none; }
.input-group-addon {
  display:flex; align-items:center; padding:0 12px;
  background:var(--surface-2); border:1px solid var(--border);
  font-size:13px; color:var(--text-muted); white-space:nowrap;
  border-radius:0;
}
.input-group-addon:first-child { border-radius:10px 0 0 10px; border-right:none; }
.input-group-addon:last-child  { border-radius:0 10px 10px 0; border-left:none;  }

/* Required asterisk */
.field label.req::after,
.st-field label.req::after { content:' *'; color:var(--red); }

/* ── Inline text link ── */
.link { color:var(--green-600); font-weight:600; text-decoration:none; transition:color .14s; }
.link:hover { color:var(--green); text-decoration:underline; }
.link-muted { color:var(--text-muted); font-weight:500; }
.link-muted:hover { color:var(--text); }

/* ── Badge extra variants ── */
.badge-red    { background:var(--red-50);    color:#B91C1C; }
.badge-amber  { background:var(--amber-50);  color:#92400E; }
.badge-purple { background:var(--purple-50); color:#5B21B6; }
.badge-teal   { background:var(--teal-50);   color:#0F766E; }
.badge-gray   { background:var(--surface-2); color:var(--text-muted); }
.badge-orange { background:var(--orange-50); color:#C2410C; }
[data-theme="dark"] .badge-red    { color:#FCA5A5; }
[data-theme="dark"] .badge-amber  { color:var(--amber); }
[data-theme="dark"] .badge-purple { color:var(--purple); }

/* ── Additional pill colors ── */
.pill-orange { background:var(--orange-50); color:#C2410C; }
.pill-indigo { background:var(--indigo-50); color:#4338CA; }
[data-theme="dark"] .pill-orange { color:var(--orange); }
[data-theme="dark"] .pill-indigo { color:var(--indigo); }

/* ── Page header component ── */
.page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:24px; flex-wrap:wrap;
}
.page-header-left h2 {
  font-size:22px; font-weight:800; color:var(--text); margin:0 0 4px;
}
.page-header-left .sub {
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13px; color:var(--text-muted); line-height:1.4;
}
.page-header-left .sub .dot {
  width:6px; height:6px; border-radius:50%; background:var(--green); flex:none;
}
.page-header-actions {
  display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start;
}

/* ── Card improvements ── */
.card-hover {
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
  cursor:pointer;
}
.card-hover:hover {
  transform:translateY(-2px); box-shadow:var(--shadow);
  border-color:rgba(21,163,74,.18);
}
.card-sm .card-pad { padding:14px; }
.card-sm .card-head { padding:12px 14px; }
.card-inset {
  background:var(--surface-2); border:1px solid var(--border-2);
  border-radius:var(--r); padding:14px;
}

/* ── Table improvements ── */
.tbl thead { position:sticky; top:0; z-index:2; }
.tbl th { vertical-align:middle; }
.tbl td { vertical-align:middle; }
.tbl .action-col { text-align:right; white-space:nowrap; }
.tbl tbody tr { transition:background .12s; }
.tbl-compact th { padding:9px 14px; }
.tbl-compact td { padding:9px 14px; }

/* ── Detail row ── */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; }
.detail-row {
  display:flex; align-items:flex-start; gap:12px;
  padding:11px 0; border-bottom:1px solid var(--border-2);
  font-size:13.5px;
}
.detail-row:last-child { border-bottom:none; }
.detail-row .dr-label {
  font-size:12px; color:var(--text-muted); min-width:120px;
  flex:none; font-weight:500; padding-top:1px; line-height:1.5;
}
.detail-row .dr-value {
  flex:1; font-weight:500; color:var(--text);
  word-break:break-word; line-height:1.5;
}

/* ── Divider ── */
.divider { height:1px; background:var(--border); margin:20px 0; }
.divider-text {
  display:flex; align-items:center; gap:12px; margin:20px 0;
  font-size:12px; font-weight:600; color:var(--text-faint); white-space:nowrap;
}
.divider-text::before, .divider-text::after {
  content:''; flex:1; height:1px; background:var(--border);
}

/* ── Skeleton loader ── */
.skel {
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 50%,var(--surface-2) 75%);
  background-size:200% 100%; border-radius:6px;
  animation:skel .14s linear infinite; /* override below */
}
@keyframes skel-pulse { 0%,100%{background-position:200% 0} 50%{background-position:0 0} }
.skel { animation:skel-pulse 1.5s ease-in-out infinite; }
.skel-text  { height:14px; width:70%; }
.skel-title { height:22px; width:45%; }
.skel-card  { height:80px; border-radius:var(--r-lg); }
.skel-circle{ border-radius:50%; }

/* ── Spinner ── */
.spinner {
  display:inline-block; width:20px; height:20px;
  border:2px solid var(--border); border-top-color:var(--green);
  border-radius:50%; animation:spin .7s linear infinite;
  flex:none;
}
.spinner-sm { width:14px; height:14px; border-width:1.5px; }
.spinner-lg { width:32px; height:32px; border-width:3px; }

/* ── Code / pre ── */
code {
  font-family:var(--font-mono);
  font-size:12.5px; background:var(--surface-2);
  color:var(--text); padding:2px 6px;
  border-radius:5px; border:1px solid var(--border);
}
pre {
  font-family:var(--font-mono); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r);
  padding:14px 16px; font-size:12.5px; overflow-x:auto;
  line-height:1.65; color:var(--text);
}
pre code { background:none; border:none; padding:0; font-size:inherit; }

/* ── Sticky form footer ── */
.form-footer {
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; padding:14px 20px;
  border-top:1px solid var(--border);
  background:var(--surface);
  border-radius:0 0 var(--r-lg) var(--r-lg);
}

/* ── Section title enhancements ── */
.section-title { margin:0 0 20px; align-items:flex-start; }
.section-title h2 { font-size:18px; font-weight:800; color:var(--text); }
.section-title .sub { font-size:12.5px; color:var(--text-muted); margin-top:3px; }

/* ── KPI grid tighten at medium widths ── */
@media(max-width:1400px) { .kpis { grid-template-columns:repeat(4,1fr); } }
@media(max-width:1150px) { .kpis { grid-template-columns:repeat(3,1fr); } }
@media(max-width:900px)  { .kpis { grid-template-columns:repeat(2,1fr); } }

/* ── Pipeline board mobile ── */
@media(max-width:760px) {
  .board { grid-template-columns:repeat(5,minmax(180px,1fr)); }
}

/* ── Empty state improvements ── */
.empty { padding:48px 24px; text-align:center; color:var(--text-faint); }
.empty svg { width:36px; height:36px; margin:0 auto 10px; display:block; opacity:.4; }
.empty h3  { font-size:15px; font-weight:700; color:var(--text-muted); margin:0 0 6px; }
.empty p   { font-size:13px; margin:0 0 16px; line-height:1.5; max-width:28ch; margin-inline:auto; }

/* ── Mobile layout improvements ── */
@media(max-width:760px) {
  .content  { padding:16px 14px 52px; }
  .topbar   { padding:0 14px; height:56px; }
  .topbar h1 { font-size:15px; }
  .page-header { flex-direction:column; gap:12px; }
  .page-header-actions { width:100%; }
  .page-header-actions .btn { justify-content:center; }
  dialog { width:96vw!important; border-radius:14px!important; }
  .form-row, .form-row-3 { grid-template-columns:1fr; }
  .form-footer { padding:12px 14px; }
  .detail-grid { grid-template-columns:1fr; }
}
@media(max-width:500px) {
  .page-header-actions .btn { flex:1; }
  .kpis { grid-template-columns:1fr 1fr; gap:8px; }
  .kpi  { padding:14px; }
  .kpi .val { font-size:22px; }
}

/* ── Topbar breadcrumb fade on small screens ── */
@media(max-width:900px) { .topbar .who .meta span { display:none; } }

/* ── Focus rings for interactive elements ── */
.btn:focus-visible,
.icon-btn:focus-visible,
.nav-item:focus-visible { outline:2px solid var(--green); outline-offset:2px; }
.input:focus { outline:0; border-color:var(--green); box-shadow:0 0 0 3px var(--green-ring); }
.input:focus-visible { outline:none; }

/* ── Tooltip helper ── */
[data-tip] { position:relative; cursor:help; }
[data-tip]::after {
  content:attr(data-tip); position:absolute; bottom:calc(100% + 6px);
  left:50%; transform:translateX(-50%);
  background:#0F1B2D; color:#fff; font-size:11.5px; font-weight:500;
  padding:5px 10px; border-radius:7px; white-space:nowrap;
  pointer-events:none; opacity:0; transition:opacity .16s; z-index:100;
}
[data-tip]:hover::after { opacity:1; }
[data-theme="dark"] [data-tip]::after { background:#E8EBF0; color:#0C0F15; }

/* ── Progress bar ── */
.progress { height:8px; border-radius:20px; background:var(--surface-2); overflow:hidden; }
.progress-bar {
  height:100%; border-radius:20px;
  background:linear-gradient(90deg,var(--green),#4ADE80);
  transition:width .6s cubic-bezier(.34,1.1,.64,1);
}
.progress-bar.amber { background:linear-gradient(90deg,var(--amber),#FCD34D); }
.progress-bar.red   { background:linear-gradient(90deg,var(--red),#F97316); }

/* ── Tag/chip ── */
.chip {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:20px;
  font-size:11.5px; font-weight:600;
  background:var(--surface-2); color:var(--text-muted);
  border:1px solid var(--border);
  transition:.14s;
}
.chip-green { background:var(--green-50); color:var(--green-600); border-color:rgba(21,163,74,.22); }
.chip-blue  { background:var(--blue-50);  color:#1D4ED8;          border-color:rgba(59,130,246,.2); }
.chip-red   { background:var(--red-50);   color:#B91C1C;          border-color:rgba(239,68,68,.2); }
.chip-amber { background:var(--amber-50); color:#92400E;          border-color:rgba(245,158,11,.2); }
.chip svg   { width:11px; height:11px; flex:none; }
.chip-rm    { opacity:.6; cursor:pointer; }
.chip-rm:hover { opacity:1; }
[data-theme="dark"] .chip-blue { color:#93C5FD; }
[data-theme="dark"] .chip-red  { color:#FCA5A5; }
[data-theme="dark"] .chip-amber{ color:var(--amber); }

/* ── Score bar ── */
.score-bar { display:flex; align-items:center; gap:8px; }
.score-bar .score-val { font-weight:700; font-size:13px; min-width:28px; }
.score-bar .progress  { flex:1; height:6px; }

/* ── Avatar ring ── */
.avatar-ring {
  padding:2px; border:2px solid var(--green);
  border-radius:50%;
}

/* ── Stat number highlight ── */
.stat-num {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:800; letter-spacing:-.03em;
}

/* ── Topbar elevation bump for sticky content ── */
.topbar { box-shadow:0 1px 0 var(--border), 0 2px 8px -4px rgba(0,0,0,.06); }
[data-theme="dark"] .topbar { box-shadow:0 1px 0 var(--border), 0 2px 8px -4px rgba(0,0,0,.3); }

/* ── Sidebar brand glow improvement ── */
.brand-mark {
  box-shadow:0 4px 16px rgba(21,163,74,.45), 0 0 0 1px rgba(255,255,255,.08);
}

/* ── Nav item micro-animation ── */
.nav-item { will-change:background; }
.nav-item.active {
  background:linear-gradient(90deg,rgba(21,163,74,.92) 0%,rgba(5,150,105,.78) 100%);
  box-shadow:0 4px 16px rgba(21,163,74,.3), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ── Topbar who block on medium screens ── */
@media(max-width:1050px) { .topbar .who { display:none; } }

/* ── Action buttons hover lift ── */
.action { transition:.16s var(--ease); }
.action:active { transform:none; box-shadow:none; }

/* ── Kanban deal drag enhancement ── */
.deal { transition:box-shadow .15s,transform .15s,opacity .15s; }
.deal:active { cursor:grabbing; }
.col.drop-on { background:var(--green-50); box-shadow:inset 0 0 0 2px var(--green); }
[data-theme="dark"] .col.drop-on { background:var(--green-100); }

/* ── Table sort indicator ── */
.tbl th[data-sort] { cursor:pointer; user-select:none; }
.tbl th[data-sort]:hover { color:var(--text); }
.tbl th[data-sort]::after { content:' ↕'; opacity:.3; font-size:10px; }
.tbl th[data-sort="asc"]::after  { content:' ↑'; opacity:.7; color:var(--green); }
.tbl th[data-sort="desc"]::after { content:' ↓'; opacity:.7; color:var(--green); }

/* ── Pager ── */
.pager { display:flex; align-items:center; gap:6px; margin-top:18px; justify-content:center; flex-wrap:wrap; }
.pager a, .pager span {
  min-width:34px; height:34px; border-radius:8px; display:inline-flex;
  align-items:center; justify-content:center; font-size:13px; font-weight:600;
  border:1px solid var(--border); background:var(--surface); color:var(--text);
  text-decoration:none; transition:.14s;
}
.pager a:hover    { border-color:var(--green); color:var(--green); background:var(--green-50); }
.pager .active    { background:var(--green); color:#fff; border-color:var(--green); }
.pager .disabled  { opacity:.38; pointer-events:none; }

/* ── Responsive table on mobile ── */
@media(max-width:640px) {
  .table-responsive thead { display:none; }
  .table-responsive td {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 14px; border-bottom:none;
  }
  .table-responsive td::before {
    content:attr(data-label); font-weight:600; font-size:11.5px;
    color:var(--text-faint); margin-right:12px; flex:none;
  }
  .table-responsive tr {
    display:block; border:1px solid var(--border);
    border-radius:var(--r); margin-bottom:10px;
    background:var(--surface);
  }
}

/* ── Upload/drop zone ── */
.drop-zone {
  border:2px dashed var(--border); border-radius:var(--r-lg);
  padding:32px 20px; text-align:center; cursor:pointer;
  transition:.18s var(--ease); background:var(--surface-2);
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color:var(--green); background:var(--green-50);
}
.drop-zone svg { color:var(--text-faint); width:32px; height:32px; margin:0 auto 10px; display:block; }
.drop-zone p   { font-size:13.5px; color:var(--text-muted); margin:0; }
.drop-zone .hint { font-size:12px; color:var(--text-faint); margin-top:4px; }

/* ── Toggle switch ── */
.toggle-wrap { display:flex; align-items:center; gap:10px; cursor:pointer; }
.toggle {
  width:40px; height:22px; border-radius:20px; background:var(--border);
  position:relative; transition:background .2s; flex:none; cursor:pointer;
  border:none; padding:0;
}
.toggle::after {
  content:''; position:absolute; width:16px; height:16px; border-radius:50%;
  background:#fff; top:3px; left:3px; transition:transform .2s, box-shadow .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.toggle:checked, input:checked + .toggle { background:var(--green); }
.toggle:checked::after, input:checked + .toggle::after {
  transform:translateX(18px);
  box-shadow:0 1px 6px rgba(21,163,74,.4);
}
.toggle:focus-visible { outline:2px solid var(--green); outline-offset:2px; }

/* ── Number stats beside card heads ── */
.card-stat {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:20px; font-weight:800; color:var(--text);
}
.card-stat-sub { font-size:11px; color:var(--text-faint); font-weight:500; margin-top:1px; }

/* ── Sub-navigation pills ── */
.sub-nav {
  display:flex; gap:4px; flex-wrap:wrap;
  margin-bottom:16px;
}
.sub-nav-item {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:20px; font-size:13px;
  font-weight:600; color:var(--text-muted);
  text-decoration:none; transition:.14s; border:1px solid transparent;
}
.sub-nav-item:hover { color:var(--text); background:var(--surface-2); }
.sub-nav-item.active {
  background:var(--surface); color:var(--green-600);
  border-color:rgba(21,163,74,.25);
  box-shadow:var(--shadow-sm);
}

/* ── Notification bell animation ── */
@keyframes bell-ring {
  0%,100% { transform:rotate(0); }
  15% { transform:rotate(12deg); }
  30% { transform:rotate(-10deg); }
  45% { transform:rotate(8deg); }
  60% { transform:rotate(-6deg); }
}
.notif-badge ~ svg { animation:bell-ring 3s ease 1.5s; }

/* ── Upgrade banner ── */
.upgrade-banner {
  background:linear-gradient(135deg,#4F46E5,#7C3AED);
  color:#fff; border-radius:var(--r-lg); padding:16px 20px;
  display:flex; align-items:center; gap:14px;
  margin-bottom:18px;
}
.upgrade-banner svg { width:20px; height:20px; flex:none; color:rgba(255,255,255,.8); }
.upgrade-banner p  { flex:1; font-size:13.5px; margin:0; }
.upgrade-banner .btn-ghost {
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25);
  color:#fff; flex:none;
}
.upgrade-banner .btn-ghost:hover { background:rgba(255,255,255,.22); }

/* ── Copy button helper ── */
.copy-btn {
  background:none; border:1px solid var(--border); border-radius:7px;
  padding:4px 9px; font-size:11.5px; font-weight:600; cursor:pointer;
  color:var(--text-muted); display:inline-flex; align-items:center; gap:4px;
  transition:.14s;
}
.copy-btn:hover { background:var(--surface-2); color:var(--text); }
.copy-btn svg   { width:12px; height:12px; }
.copy-btn.copied { color:var(--green); border-color:rgba(21,163,74,.3); }

/* ── Keyboard shortcut key ── */
kbd {
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  background:var(--surface-2); border:1px solid var(--border);
  border-bottom-width:2px; border-radius:5px; padding:2px 6px;
  color:var(--text-muted); white-space:nowrap;
}

/* ── Fullscreen loader overlay ── */
.page-loading {
  position:fixed; inset:0; z-index:9999;
  background:var(--surface); display:grid;
  place-items:center; opacity:1; transition:opacity .3s;
}
.page-loading.done { opacity:0; pointer-events:none; }

/* ── Settings page — override missing var ── */
.st-field input:focus,
.st-field select:focus,
.st-field textarea:focus {
  border-color:var(--green);
  box-shadow:0 0 0 3px var(--green-ring);
}

/* ── Site-wide system banners (trial / lock-tier) ── */
.site-banner {
  display:flex; align-items:center; gap:10px;
  padding:10px 24px; font-size:13px; font-weight:500;
  border-bottom:1px solid transparent;
}
.site-banner svg { width:15px; height:15px; flex:none; }
.site-banner-warn  { background:var(--amber-50,#FFFBEB); border-color:rgba(229,165,59,.3); color:#92670A; }
.site-banner-error { background:var(--red-50,#FEF2F2);   border-color:rgba(239,68,68,.25);  color:var(--red,#EF4444); }
.site-banner-cta {
  margin-left:auto; font-weight:700; color:inherit;
  text-decoration:underline; white-space:nowrap;
}
[data-theme="dark"] .site-banner-warn  { background:#2D2200; color:#FBBF24; border-color:rgba(251,191,36,.2); }
[data-theme="dark"] .site-banner-error { background:#2D0B0B; color:#FCA5A5; border-color:rgba(239,68,68,.2); }

/* ================================================================
   PRINT STYLES — improved
   ================================================================ */
@media print {
  .sidebar,.topbar,.cmd-overlay,.notif,.icon-btn,.btn,.actions,
  .flash,.alert,.site-banner,.upgrade-banner,.pager,form,
  .shortcut-grid,.tabs,.sub-nav,.page-header-actions { display:none!important }
  body,.app,.main,.content { display:block!important;background:#fff!important;color:#000!important }
  .card { border:1px solid #ccc!important;break-inside:avoid;margin-bottom:12px!important; box-shadow:none!important; }
  .tbl { font-size:12px!important; }
  .tbl th,.tbl td { border:1px solid #ddd!important; padding:7px 10px!important; }
  .tbl thead { position:static!important; background:#f5f5f5!important; }
  a { color:#000!important;text-decoration:none!important }
  .pill { border:1px solid #bbb!important;background:#eee!important;color:#333!important }
  .kpi { border:1px solid #ddd!important; box-shadow:none!important; }
}

/* ============================================================
   Shared component/utility classes used across inner pages.
   Consolidated so pages that referenced them no longer render
   unstyled — page headers, KPI/stat cards, tables, modals, forms.
   ============================================================ */

/* Grid columns (extends existing .cols-2) */
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}}

/* Page header title/sub (used by Track D–H + finance pages) */
.page-title{font-family:'Plus Jakarta Sans',inherit;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0}
.page-sub,.page-head{font-size:13.5px;color:var(--text-muted);margin:4px 0 0}
.form-head-row{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}

/* Form field wrapper + small input */
.form-field{margin-bottom:14px;display:flex;flex-direction:column;gap:6px}
.input-sm{padding:6px 10px;font-size:13px;border-radius:8px}
.attr-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}

/* KPI chips / compact stat rows */
.kpi-row,.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.kpi-chip,.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-sm)}
.kpi-val,.stat-card b{font-family:'Plus Jakarta Sans',inherit;font-weight:800;font-size:24px;letter-spacing:-.03em;line-height:1;color:var(--text);display:block}
.kpi-label,.stat-card span{font-size:12px;color:var(--text-muted);font-weight:500;margin-top:8px;display:block}

/* Generic data table (mirrors .tbl) */
table.data-table{width:100%;border-collapse:collapse;font-size:13.5px}
.data-table th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);padding:12px 16px;border-bottom:1px solid var(--border-2);background:var(--surface-3)}
.data-table td{padding:12px 16px;border-bottom:1px solid var(--border-2)}
.data-table tr:last-child td{border-bottom:0}
.data-table tbody tr:hover{background:var(--surface-3)}
.tbl-info{font-size:12px;color:var(--text-faint);padding:8px 4px}

/* Dialog-based modals */
dialog.modal{border:none;border-radius:var(--r-lg);padding:0;max-width:560px;width:94%;box-shadow:var(--shadow-lg);color:var(--text)}
dialog.modal::backdrop{background:rgba(15,27,45,.45)}
.modal-box{padding:22px 24px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}

/* Badge + avatar variants */
.badge-blue{background:var(--blue-50);color:#2D6FE0}
.av,.avatar-sm{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:700;color:#fff;font-size:12px;background:var(--text-muted)}

/* Text utilities */
.text-muted{color:var(--text-muted)}
.text-faint{color:var(--text-faint)}
.fw-600{font-weight:600}

/* WhatsApp/tab-style pill buttons */
.wa-tab-btn{padding:7px 14px;border:1px solid var(--border);background:var(--surface);border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:var(--text-muted)}
.wa-tab-btn.active{background:var(--green-50);border-color:var(--green);color:var(--green-600)}

/* Checkboxes used as JS hooks — keep them aligned/clickable */
.chk,.assignee-cb,.ct-chk,.pb-check{cursor:pointer;vertical-align:middle}

/* Password show/hide toggles */
.eye-hide{display:none}

/* ============================================================
   5x POLISH — premium visual pass for inner pages.
   Elevates the shared components (page headers, stat/KPI cards,
   tables, cards, empty states) so report/ops/settings pages
   look consistent and refined without per-page rewrites.
   ============================================================ */

/* Page header: icon becomes a soft colored chip; hairline separator */
.page-header{padding-bottom:18px;border-bottom:1px solid var(--border-2)}
.page-title,.page-header-left h2{display:inline-flex;align-items:center;gap:12px}
.page-title svg,.page-header-left h2 svg{width:19px;height:19px;flex:none;padding:9px;box-sizing:content-box;
  background:linear-gradient(135deg,var(--green-50),var(--surface-2));
  color:var(--green-600);border-radius:12px;box-shadow:var(--shadow-sm)}

/* Cards: refined border + gentle hover lift */
.card{transition:box-shadow .2s var(--ease),transform .2s var(--ease),border-color .2s}
.card:hover{box-shadow:var(--shadow);border-color:var(--border)}
.card-head{border-bottom:1px solid var(--border-2)}
.card-head h3{font-size:14px;letter-spacing:-.01em}
/* Cards that only wrap a table shouldn't double-line under the head */
.card-head + .card-pad{padding-top:16px}

/* Stat / KPI cards: accent bar, big number, uppercase label, hover */
.stat-row{grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:14px}
.stat-card,.kpi-chip{position:relative;overflow:hidden;padding:18px 20px;border-radius:var(--r-lg);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.stat-card::before,.kpi-chip::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--green),var(--teal));opacity:.9}
.stat-card:hover,.kpi-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.stat-num,.kpi-val,.stat-card b{font-size:25px;line-height:1.05;color:var(--text)}
.stat-label,.kpi-label,.stat-card span{font-size:11.5px;color:var(--text-muted);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;margin-top:9px;display:block}
/* Colored accent variants (add class to the stat-card/kpi div) */
.stat-card.s-amber::before,.kpi-chip.s-amber::before{background:linear-gradient(90deg,var(--amber),#F6C177)}
.stat-card.s-red::before,.kpi-chip.s-red::before{background:linear-gradient(90deg,var(--red),#F98E8E)}
.stat-card.s-blue::before,.kpi-chip.s-blue::before{background:linear-gradient(90deg,var(--blue),#7FB0FA)}
.stat-card.s-purple::before,.kpi-chip.s-purple::before{background:linear-gradient(90deg,var(--purple),#B79BF3)}

/* Generic data tables: airier, emphasised first column, smooth hover */
.data-table th{padding:12px 18px;background:var(--surface-3)}
.data-table td{padding:13px 18px}
.data-table tbody tr{transition:background .12s}
.data-table tbody td:first-child{font-weight:600;color:var(--text)}

/* Empty states: icon in a soft circle */
.empty{padding:52px 24px}
.empty svg{width:26px;height:26px;opacity:1;color:var(--text-muted);
  padding:14px;box-sizing:content-box;background:var(--surface-2);border-radius:50%;margin-bottom:14px}
.empty div{font-size:14px;color:var(--text-muted)}
/* A plain card used as an empty state gets the same calm treatment */
.card-pad.text-muted{padding:44px;text-align:center}

/* Filter/segment tab row consistency */
.seg-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}

/* Section sub-heads inside cards */
.section-label{font-size:11px;font-weight:700;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.07em;margin:0 0 12px}

/* Small progress bar helper (win-rate/health bars) */
.mini-bar{height:6px;border-radius:5px;background:var(--border);overflow:hidden}
.mini-bar > span{display:block;height:100%;border-radius:5px;background:var(--green)}

@media (max-width:640px){
  .page-title{font-size:19px}
  .stat-num,.kpi-val,.stat-card b{font-size:22px}
}

/* ============================================================
   Workflow Builder — drag-and-drop flow canvas
   ============================================================ */
.wf-layout{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
@media (max-width:1024px){.wf-layout{grid-template-columns:1fr}}

.wf-canvas{display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(var(--surface-3) 1px,transparent 1px) 0 0/22px 22px,
             linear-gradient(90deg,var(--surface-3) 1px,transparent 1px) 0 0/22px 22px,var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 18px 30px}

.wf-node{display:flex;align-items:center;gap:12px;width:100%;max-width:460px;
  background:var(--surface);border:1px solid var(--border);border-radius:14px;
  padding:13px 15px;box-shadow:var(--shadow-sm);position:relative;transition:box-shadow .15s,transform .15s}
.wf-node:hover{box-shadow:var(--shadow)}
.wf-node-ic{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--text-muted)}
.wf-node-ic svg{width:16px;height:16px}
.wf-node-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.wf-node-body b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wf-node-body code{background:var(--surface-2);padding:1px 5px;border-radius:5px;font-size:12px}
.wf-node-kind{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-faint)}

/* Node accents by type */
.wf-trigger{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-50)}
.wf-trigger .wf-node-ic{background:var(--blue-50);color:#2D6FE0}
.wf-cond{border-left:3px solid var(--amber)} .wf-cond .wf-node-ic{background:var(--amber-50);color:#B6791B}
.wf-act{border-left:3px solid var(--green)}  .wf-act .wf-node-ic{background:var(--green-50);color:var(--green-600)}

/* Step-specific chrome */
.wf-step{cursor:default}
.wf-drag{cursor:grab;color:var(--text-faint);padding:2px;flex:none;display:flex;align-items:center}
.wf-drag:active{cursor:grabbing}
.wf-del{border:none;background:transparent;color:var(--text-faint);cursor:pointer;font-size:14px;padding:4px 6px;border-radius:6px;flex:none}
.wf-del:hover{background:var(--red-50);color:var(--red)}
.wf-dragging{opacity:.45;box-shadow:var(--shadow-lg);transform:scale(1.01)}

/* Connector line between nodes */
.wf-conn{width:2px;height:22px;background:var(--border);position:relative;flex:none}
.wf-conn::after{content:"";position:absolute;bottom:-1px;left:50%;transform:translateX(-50%);
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid var(--border)}

/* Add-step node */
.wf-add{display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  background:var(--surface);border:1.5px dashed var(--border);color:var(--text-muted);
  border-radius:12px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;transition:.15s}
.wf-add:hover{border-color:var(--green);color:var(--green-600);background:var(--green-50)}
.wf-add svg{width:15px;height:15px}

/* Highlight the add panel when jumped to */
.pulse{animation:wfPulse .9s ease}
@keyframes wfPulse{0%,100%{box-shadow:var(--shadow-sm)}40%{box-shadow:0 0 0 3px var(--green-50),var(--shadow)}}

/* ── Workflow branch tree (v80) ──────────────────────────────────────────────
   .wf-canvas is a single column, which can't express a branch. A condition or
   approval node renders .wf-branches: two side-by-side lanes that each hold
   their own nested column of nodes. Lanes stack on narrow screens. */
.wf-branches{display:grid;grid-template-columns:1fr 1fr;gap:14px;width:100%;max-width:620px;margin-top:10px}
@media (max-width:720px){.wf-branches{grid-template-columns:1fr}}
.wf-branch{display:flex;flex-direction:column;align-items:center;
  border:1px dashed var(--border);border-radius:12px;padding:10px 10px 14px;background:var(--surface-2)}
.wf-branch-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-faint);margin-bottom:8px}
.wf-branch-true,.wf-branch-approved{color:var(--green-600)}
.wf-branch-false,.wf-branch-rejected{color:var(--red)}

/* Wait/parallel children hang in a single indented lane rather than two. */
.wf-sub{display:flex;flex-direction:column;align-items:center;width:100%;max-width:620px;margin-top:10px;
  border-left:2px solid var(--border);padding-left:14px}

.wf-wait{border-left:3px solid var(--blue)}    .wf-wait .wf-node-ic{background:var(--blue-50);color:#2D6FE0}
.wf-appr{border-left:3px solid var(--purple,#8B5CF6)} .wf-appr .wf-node-ic{background:var(--purple-50,#f3eaff);color:#7C4BD8}
.wf-par{border-left:3px solid var(--teal,#12B5A8)}    .wf-par .wf-node-ic{background:var(--teal-50,#e6faf8);color:#0E8C82}

.wf-empty{margin-top:6px}
.wf-empty a{font-size:12.5px;color:var(--text-muted);border:1.5px dashed var(--border);
  border-radius:10px;padding:7px 14px;display:inline-block;text-decoration:none;transition:.15s}
.wf-empty a:hover{border-color:var(--green);color:var(--green-600);background:var(--green-50)}

/* ===========================================================================
   UI/UX pass — fixes for issues found in the application audit (doc 10).
   =========================================================================== */

/* U7 — long text broke table layouts.
   A 200-character company name used to stretch a row until the table scrolled
   sideways. Cap the flexible columns and ellipsize; the full value stays
   available via each cell's title attribute. */
.tbl td, .tbl th { overflow-wrap:anywhere; }
.tbl td.cell-clip, .tbl th.cell-clip { max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl td.cell-clip-sm { max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Numeric columns line up only when the digits are tabular. */
.tbl td.num, .tbl th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* Accessibility — respect a reduced-motion preference.
   The app animates dialogs, toasts and nav transitions; users who ask the OS
   for less motion were previously ignored. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* Accessibility — a visible, consistent focus ring for keyboard users.
   :focus-visible keeps it off mouse clicks, so the visual design is unchanged
   for pointer users. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline:2px solid var(--green); outline-offset:2px; border-radius:var(--r-sm);
}

/* A form control in an error state should not rely on colour alone. */
.input[aria-invalid="true"] { border-color:var(--red); background:var(--red-50); }
.field-error { color:var(--red); font-size:12px; margin-top:4px; display:flex; gap:5px; align-items:center; }

/* Submit buttons disabled mid-flight (U3) should read as busy, not broken. */
.btn[aria-busy="true"], .btn:disabled { opacity:.6; cursor:progress; pointer-events:none; }