/* ============================================================================
   ATH Suite — shared design system (single source of truth)
   ----------------------------------------------------------------------------
   Linked by BOTH ath ranking and tracker. Holds the design tokens, the shared
   DataTable component (row / cell / company / ticker / price / today's % /
   session / drawdown bars / sparkline / quick-actions), plus the toast, KPI
   cards, header gradient and animated navigation underline.

   Row POSITIONING is intentionally left to each page (Ranking virtualizes with
   absolute rows; the Tracker lays them out in normal flow) — everything visual
   lives here so the two tables are one component. Dark mode is honored via both
   :root[data-theme="dark"] (Ranking) and body.dark (Tracker).
   ============================================================================ */

/* ---------- design tokens (light) ---------- */
:root{
  --bg:#F8FAFC; --panel:#FFFFFF; --panel-2:#F8FAFC; --border:#E5E7EB; --border-2:#E5E7EB;
  --text:#111827; --text-2:#6B7280; --text-3:#9CA3AF;
  --accent:#2563EB; --accent-weak:#EFF4FE;
  --brand:#107C41; --brand-2:#0E6F3A;
  --indigo:#6366F1; --indigo-weak:#EEF0FE;
  --red:#EF4444; --red-2:#F87171; --red-weak:rgba(239,68,68,.10);
  --green:#16A34A; --green-weak:rgba(22,163,74,.12); --amber:#D97706; --amber-weak:rgba(217,119,6,.13);
  --sess-live:#16A34A; --sess-pre:#D97706; --sess-after:#2563EB; --sess-night:#7C3AED;
  --shadow-sm:0 1px 2px rgba(18,20,26,.05),0 1px 3px rgba(18,20,26,.04);
  --shadow-md:0 12px 32px rgba(18,20,26,.12),0 3px 10px rgba(18,20,26,.06);
  --radius:16px; --row-h:76px;
  --content-max:1280px; --content-pad:24px;
}
/* ---------- design tokens (dark — both theming conventions) ---------- */
:root[data-theme="dark"], body.dark{
  --bg:#0A0B0D; --panel:#141518; --panel-2:#181A1E; --border:#232529; --border-2:#2C2F35;
  --text:#ECEDEF; --text-2:#9BA1AB; --text-3:#6B7079;
  --accent:#5B95F0; --accent-weak:rgba(91,149,240,.14);
  --brand:#0F6E3A; --brand-2:#0C5E31;
  --indigo:#9A86F0; --indigo-weak:rgba(154,134,240,.14);
  --red:#FF6B70; --red-2:#FF8085; --red-weak:rgba(255,107,112,.13);
  --green:#3DD68C; --green-weak:rgba(61,214,140,.14); --amber:#F0B049; --amber-weak:rgba(240,176,73,.15);
  --sess-live:#34D399; --sess-pre:#FBBF24; --sess-after:#60A5FA; --sess-night:#A78BFA;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 14px 36px rgba(0,0,0,.55),0 3px 10px rgba(0,0,0,.4);
}

/* ---------- shared header polish (both .topbar and #athNav) ---------- */
.topbar, #athNav{background:linear-gradient(180deg,#107C41 0%,#0E6F3A 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 10px rgba(6,40,24,.22)}
.ath-sidebar-overlay{display:none;position:fixed;inset:0;z-index:1490;background:rgba(15,23,42,.42)}
.ath-sidebar-overlay:not([hidden]){display:block}
@media (min-width:768px){
  #athSide,.rk-side{transition:transform .22s ease,margin-left .22s ease,width .22s ease}
  body.sb-collapsed #athSide,body.sb-collapsed .rk-side{transform:translateX(-100%);margin-left:0}
}
@media (max-width:767px){
  #athSide,.rk-side{display:none !important;position:fixed;top:56px;bottom:0;left:0;width:280px;z-index:1500;transform:translateX(-100%);transition:transform .22s ease;box-shadow:8px 0 24px rgba(15,23,42,.18)}
  body.sidebar-open #athSide,body.sidebar-open .rk-side{display:block !important;transform:translateX(0)}
  body.sidebar-open{overflow:hidden}
}
.nav-a::after, #athNav a.an-a::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;background:#fff;border-radius:2px;transform:scaleX(0);transform-origin:center;transition:transform .26s cubic-bezier(.22,.7,.2,1);opacity:.9}
.nav-a:hover::after, #athNav a.an-a:hover::after{transform:scaleX(.5)}
.nav-a.on::after, #athNav a.an-a.on::after{transform:scaleX(1);opacity:1}

/* header live-status dot */
.sdot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:#9CA3AF;box-shadow:0 0 0 3px rgba(156,163,175,.18)}
.sdot.live{background:var(--sess-live);box-shadow:0 0 0 3px rgba(22,163,74,.18);animation:athPulse 2s ease-in-out infinite}
.sdot.pre{background:var(--sess-pre);box-shadow:0 0 0 3px rgba(217,119,6,.2)}
.sdot.after{background:var(--sess-after);box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.sdot.night{background:var(--sess-night);box-shadow:0 0 0 3px rgba(124,58,237,.2)}
@keyframes athPulse{0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,.18)}50%{box-shadow:0 0 0 5px rgba(22,163,74,.05)}}

/* ---------- search box (shared) ---------- */
.search{position:relative;width:340px;max-width:46vw}
.search .mag{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--text-3);display:flex;pointer-events:none}
.search input{width:100%;height:40px;padding:0 46px 0 38px;border-radius:11px;border:1px solid var(--border-2);background:var(--panel);color:var(--text);font-family:inherit;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s}
.search input::placeholder{color:var(--text-3)}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-weak)}
.search kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:inherit;font-size:11px;color:var(--text-3);background:var(--panel-2);border:1px solid var(--border-2);border-radius:6px;padding:2px 6px}
.search .clr{position:absolute;right:9px;top:50%;transform:translateY(-50%);width:22px;height:22px;border:none;border-radius:50%;cursor:pointer;background:var(--border-2);color:var(--text-2);display:none;place-items:center}
.search.has kbd{display:none}.search.has .clr{display:grid}

/* ---------- filter / control chip buttons (shared) ---------- */
.chip-btn{border:1px solid var(--border-2);background:var(--panel);color:var(--text-2);font:inherit;font-size:12.5px;font-weight:600;height:34px;padding:0 13px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:all .14s;display:inline-flex;align-items:center;gap:6px}
.chip-btn:hover{color:var(--text);border-color:var(--text-3)}
.chip-btn.on{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 2px 8px rgba(59,125,237,.3)}

/* ---------- KPI cards (shared) ---------- */
.kpi .top{display:flex;align-items:center;gap:9px}
.kpi .chip{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;background:var(--accent-weak);color:var(--accent)}
.kpi .chip.red{background:var(--red-weak);color:var(--red)}.kpi .chip.green{background:var(--green-weak);color:var(--green)}
.kpi .chip.indigo{background:var(--indigo-weak);color:var(--indigo)}.kpi .chip.amber{background:var(--amber-weak);color:var(--amber)}
.kpi{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:14px 15px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:8px;transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer}
.kpi:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);border-color:var(--border-2)}
.kpi .top{display:flex;align-items:center;gap:9px}
.kpi .lab{font-size:12px;color:var(--text-2);font-weight:500}
.kpi .val{font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1}
.kpi .val.red{color:var(--red)}.kpi .val.green{color:var(--green)}
.kpi .val small{font-size:13px;font-weight:600;color:var(--text-3);margin-left:4px}
.kpi .sub{font-size:11.5px;color:var(--text-3)}

/* ============================================================================
   DataTable component (visual identity shared by both pages)
   ============================================================================ */
.thead,.row{display:grid;grid-template-columns:var(--grid);align-items:center;column-gap:10px;padding:0 18px}
.thead{flex:0 0 auto;min-height:48px;border-bottom:1px solid var(--border);background:var(--panel-2);font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--text-3);position:relative;z-index:5}
.th{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.th.r{align-items:flex-end}.th.c{align-items:center}
.th .lb{display:inline-flex;align-items:center;gap:4px}
.th .s2{font-size:9.5px;letter-spacing:.02em;color:var(--text-3);text-transform:none;font-weight:500;opacity:.8}
.th.sortable .lb{cursor:pointer;border-radius:5px;transition:color .14s}
.th.sortable:hover .lb{color:var(--text)}
.th.active .lb{color:var(--accent)}
.th .car{opacity:0}.th.active .car{opacity:1}

/* row: internal layout + soft highlight hover (no positioning here) */
.row{height:var(--row-h);border-bottom:1px solid var(--border);cursor:pointer;transition:background .14s,box-shadow .14s;position:relative}
.row:last-child{border-bottom:none}
.list:not(.scrolling) .row:hover,.dt-body .row:hover{background:var(--panel-2)}

.row .cell{min-width:0}
.c-rank{text-align:center;font-variant-numeric:tabular-nums;color:var(--text-3);font-weight:700;font-size:13px}
.c-rank.top{color:var(--red)}
.c-co{display:flex;align-items:center;gap:13px;min-width:0;position:relative}
.avatar{position:relative;width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;background:transparent}
.avatar .mono{color:#fff;font-weight:700;font-size:12px;letter-spacing:.3px}
.avatar .mono{position:absolute;inset:0;display:grid;place-items:center;background:hsl(var(--h,220),58%,52%);border-radius:7px}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:transparent;padding:0;z-index:1}
.co-txt{min-width:0;display:flex;flex-direction:column;gap:1px}
.co-txt .nm{font-weight:600;font-size:14.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.co-txt .sector{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ticker pill — selectable + copyable */
.pill{display:inline-flex;align-items:center;font-weight:700;font-size:11.5px;letter-spacing:.02em;color:var(--text-2);background:var(--panel-2);border:1px solid var(--border-2);border-radius:7px;padding:4px 9px;font-variant-numeric:tabular-nums}
.tik{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:11.5px;letter-spacing:.02em;color:var(--text-2);background:var(--panel-2);border:1px solid var(--border-2);border-radius:7px;padding:4px 9px;cursor:pointer;user-select:text;transition:border-color .14s,color .14s,background .14s}
.tik .tik-t{user-select:all;font-variant-numeric:tabular-nums}
.tik:hover{border-color:var(--accent);color:var(--text)}
.tik .cpi{display:inline-flex;opacity:0;color:var(--text-3);transition:opacity .14s;margin-left:-2px}
.tik:hover .cpi{opacity:1}
.tik:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* current price (price-only, emphasized) + today's % */
.c-num{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;font-variant-numeric:tabular-nums}
.c-num .v{font-weight:600;font-size:14px}
.c-num .v.vbig{font-size:20px;font-weight:600;letter-spacing:-.02em}
.c-num .s2{font-size:11px;color:var(--text-3)}
.c-num .chg.dn{color:var(--red)}.c-num .chg.up{color:var(--green)}
.c-num .chg.dchg{font-size:13.5px;font-weight:700}

/* market session cell */
.c-sess{display:flex;flex-direction:column;align-items:center;gap:3px}
.sess{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:20px;white-space:nowrap}
.sess .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.sess.live{background:rgba(22,163,74,.12);color:var(--sess-live)}.sess.live .dot{background:var(--sess-live)}
.sess.pre{background:rgba(217,119,6,.14);color:var(--sess-pre)}.sess.pre .dot{background:var(--sess-pre)}
.sess.after{background:rgba(37,99,235,.12);color:var(--sess-after)}.sess.after .dot{background:var(--sess-after)}
.sess.night{background:rgba(124,58,237,.14);color:var(--sess-night)}.sess.night .dot{background:var(--sess-night)}
.sess.closed{background:var(--panel-2);color:var(--text-3)}.sess.closed .dot{background:var(--text-3)}
.c-sess .ext{font-size:10.5px;font-weight:500;color:var(--text-3);font-variant-numeric:tabular-nums}
.c-sess .ext b{font-weight:600;color:var(--text-2)}

/* drawdown progress bars */
.c-dd .dd{display:flex;flex-direction:column;gap:5px;max-width:200px}
.c-dd .pctv{font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;color:var(--red);letter-spacing:-.02em}
.c-dd .dd.pos .pctv{color:var(--green)}
.c-dd .track{height:6px;border-radius:999px;background:var(--red-weak);overflow:hidden}
.c-dd .dd.pos .track{background:var(--green-weak)}
.c-dd .fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,var(--red-2),var(--red));transition:width .6s cubic-bezier(.22,.7,.2,1)}
.c-dd .dd.pos .fill{background:linear-gradient(90deg,var(--green),#49cf90)}
.list.scrolling .fill{transition:none}
.c-dd .sev{font-size:10.5px;color:var(--text-3);font-weight:500}
.c-dd .dd.na .pctv{color:var(--text-3)}

/* sparkline + actions */
.c-spark{display:flex;justify-content:center;align-items:center}
.c-spark svg circle{cursor:crosshair}
.c-act{display:flex;justify-content:center}
.starbtn{width:30px;height:30px;border:none;background:none;color:#D0D3D9;cursor:pointer;font-size:16px;line-height:1;border-radius:8px;transition:color .14s,background .14s}
.starbtn:hover{background:var(--panel-2);color:#EAB308}
.starbtn.on{color:#F5B301}
.starbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dt-del{opacity:0;border:none;background:none;color:var(--text-3);cursor:pointer;font-size:15px;width:28px;height:28px;border-radius:7px;transition:opacity .14s,background .14s,color .14s}
.row:hover .dt-del{opacity:1}
.dt-del:hover{background:rgba(239,68,68,.14);color:var(--red)}
.dt-tag{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.muted{color:var(--text-3)}

/* company quick-actions on hover */
.qa{position:absolute;right:2px;top:50%;transform:translateY(-50%) translateX(4px);display:flex;gap:4px;padding:4px;background:var(--panel);border:1px solid var(--border-2);border-radius:10px;box-shadow:var(--shadow-md);opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;z-index:4}
.row:hover .qa,.c-co:hover .qa{opacity:1;pointer-events:auto;transform:translateY(-50%) translateX(0)}
.qa a{font-size:11px;font-weight:600;color:var(--text-2);text-decoration:none;padding:4px 8px;border-radius:7px;white-space:nowrap;transition:background .12s,color .12s}
.qa a:hover{background:var(--accent-weak);color:var(--accent)}

/* loading skeleton */
.ag-sk{display:inline-block;height:12px;width:56px;border-radius:6px;background:linear-gradient(90deg,var(--panel-2),var(--panel),var(--panel-2));background-size:200% 100%;animation:athSk 1.2s linear infinite}
@keyframes athSk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- green status bar (shared, both pages) ---------- */
.ath-statusbar{flex:0 0 auto;height:32px;display:flex;align-items:center;gap:16px;padding:0 14px;background:#107C41;color:rgba(255,255,255,.9);font-size:12px;line-height:1;font-variant-numeric:tabular-nums;overflow:hidden;white-space:nowrap;box-shadow:0 -1px 4px rgba(6,40,24,.18)}
.ath-statusbar .grow{flex:1;min-width:0}
.ath-statusbar a{color:inherit;text-decoration:none;opacity:.72}
.ath-statusbar a:hover{opacity:1}
.ath-statusbar .dim{opacity:.72}
:root[data-theme="dark"] .ath-statusbar, body.dark .ath-statusbar{background:#0F5C34}
@media (max-width:640px){.ath-statusbar .hide-sm{display:none}}

/* ---------- toast ---------- */
.ath-toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(14px);display:inline-flex;align-items:center;gap:8px;background:#111827;color:#fff;font-size:13px;font-weight:600;padding:10px 16px;border-radius:11px;box-shadow:0 10px 30px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5000}
.ath-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.ath-toast .ok{color:#4ADE80;font-weight:800}
:root[data-theme="dark"] .ath-toast, body.dark .ath-toast{background:#26282C}

@media (prefers-reduced-motion:reduce){.sdot.live{animation:none}.c-dd .fill{transition:none}}