/* Apex Tracker - dark analytics shell.
   Tokens first: every colour used anywhere in the app resolves through these. */
:root{
  --bg:        #060e16;
  --bg-glow:   #102c3e;
  --panel:     #0d1c29;
  --panel-2:   #102434;
  --panel-3:   #0a1622;
  --line:      #17313f;
  --line-soft: #122836;

  --txt:       #e8f2f8;
  --txt-2:     #b6cbd9;
  --mut:       #7793a7;
  --mut-2:     #5c7789;

  --acc:       #2dd4bf;   /* brand teal - actions, active nav, primary series */
  --acc-2:     #22d3ee;   /* cyan - secondary series */
  --acc-dim:   rgba(45,212,191,.13);
  --profit:    #4ade80;   /* up / money made - deliberately NOT the brand teal */
  --loss:      #f87171;
  --warn:      #fbbf24;
  --violet:    #a78bfa;

  --r-lg: 18px;
  --r-md: 13px;
  --r-sm: 9px;
  --shadow: 0 18px 44px rgba(0,0,0,.42);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1100px 620px at 12% -12%, var(--bg-glow) 0%, transparent 58%),
    radial-gradient(900px 500px at 96% 4%, #0d2733 0%, transparent 52%),
    var(--bg);
  background-attachment:fixed;
  color:var(--txt);
  font:14.5px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.015em}

/* ---------------- shell ---------------- */
.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}

.sidebar{
  background:linear-gradient(180deg,rgba(13,28,41,.94),rgba(8,19,29,.94));
  border-right:1px solid var(--line-soft);
  padding:20px 14px;display:flex;flex-direction:column;gap:6px;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;align-items:center;gap:11px;padding:6px 8px 20px}
.brand .mark{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--acc),#0e7490);
  color:#04202a;font-weight:800;font-size:15px;box-shadow:0 4px 14px rgba(45,212,191,.28);
}
.brand .nm{font-weight:680;font-size:15px;letter-spacing:-.01em}

.nav-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--mut-2);
  padding:14px 10px 6px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-sm);
  color:var(--mut);font-size:13.6px;font-weight:520;transition:background .13s,color .13s;
}
.nav a svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7}
.nav a:hover{background:rgba(255,255,255,.035);color:var(--txt-2)}
.nav a.on{background:var(--acc-dim);color:var(--acc)}
.nav a .cnt{margin-left:auto;font-size:11px;color:var(--mut-2);
  background:rgba(255,255,255,.05);padding:1px 7px;border-radius:20px}

.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.side-card{
  background:linear-gradient(150deg,rgba(45,212,191,.11),rgba(34,211,238,.04));
  border:1px solid rgba(45,212,191,.2);border-radius:var(--r-md);padding:13px;
}
.side-card b{display:block;font-size:13px;margin-bottom:3px}
.side-card span{font-size:11.5px;color:var(--mut);line-height:1.45;display:block}
.who{display:flex;align-items:center;gap:10px;padding:9px 8px;border-top:1px solid var(--line-soft)}
.who .av{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:12px;
  font-weight:700;background:linear-gradient(135deg,#2dd4bf,#6366f1);color:#04202a;flex:none}
.who .nm{font-size:13px;font-weight:600;line-height:1.2}
.who .rl{font-size:11px;color:var(--mut-2)}

/* ---------------- main ---------------- */
.main{padding:24px 30px 44px;min-width:0}
.topbar{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.hello h1{font-size:23px}
.hello p{margin:3px 0 0;color:var(--mut);font-size:13.4px}
.topbar .grow{flex:1 1 auto}
.search{
  display:flex;align-items:center;gap:9px;background:var(--panel-3);
  border:1px solid var(--line);border-radius:11px;padding:9px 13px;min-width:240px;
}
.search input{background:0;border:0;outline:0;color:var(--txt);font-size:13.4px;width:100%}
.search svg{width:16px;height:16px;stroke:var(--mut);fill:none;stroke-width:1.8;flex:none}

.btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--txt-2);
  font-size:13.4px;font-weight:580;cursor:pointer;transition:.14s;white-space:nowrap;
}
.btn:hover{border-color:#24506a;color:var(--txt)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.btn-pri{background:linear-gradient(135deg,var(--acc),#14b8a6);color:#032726;border:0;font-weight:660}
.btn-pri:hover{filter:brightness(1.09)}
.btn-ghost{background:transparent}
.btn-danger{color:#fca5a5;border-color:rgba(248,113,113,.3)}
.btn-danger:hover{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.5)}
.btn-sm{padding:6px 11px;font-size:12.4px;border-radius:8px}

/* ---------------- cards ---------------- */
.card{
  background:linear-gradient(170deg,var(--panel) 0%,var(--panel-3) 100%);
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:18px 20px;min-width:0;
}
.card-h{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card-h h3{font-size:14.5px}
.card-h .grow{flex:1}
.card-h .sub{font-size:11.5px;color:var(--mut-2)}

.grid-kpi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}
.kpi .lbl{font-size:11.5px;color:var(--mut);text-transform:uppercase;letter-spacing:.07em}
.kpi .val{font-size:27px;font-weight:700;letter-spacing:-.025em;margin:7px 0 2px}
.kpi .foot{display:flex;align-items:flex-end;gap:10px}
.kpi .foot .grow{flex:1}
.delta{font-size:12.2px;font-weight:640;display:inline-flex;align-items:center;gap:3px}
.delta.up{color:var(--profit)} .delta.dn{color:var(--loss)} .delta.flat{color:var(--mut)}

.grid-main{display:grid;grid-template-columns:1.62fr 1fr;gap:16px;margin-bottom:16px}
.grid-low{display:grid;grid-template-columns:1.62fr 1fr;gap:16px}

/* ---------------- tables ---------------- */
table{width:100%;border-collapse:collapse}
th{
  text-align:left;font-size:10.8px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--mut-2);font-weight:600;padding:0 10px 9px;border-bottom:1px solid var(--line-soft);
}
td{padding:11px 10px;border-bottom:1px solid rgba(23,49,63,.5);font-size:13.4px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.022)}
.t-wrap{overflow-x:auto}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.4px}

.who-cell{display:flex;align-items:center;gap:10px}
.who-cell .av{width:29px;height:29px;border-radius:9px;display:grid;place-items:center;
  font-size:11px;font-weight:700;flex:none;color:#04202a}
.who-cell .l1{font-size:13.3px;font-weight:570;line-height:1.25}
.who-cell .l2{font-size:11.4px;color:var(--mut-2)}

/* ---------------- pills ---------------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;
  font-size:11.4px;font-weight:600;white-space:nowrap;
  background:rgba(255,255,255,.055);color:var(--txt-2);border:1px solid transparent;
}
.pill.teal  {background:rgba(45,212,191,.13);color:#5eead4;border-color:rgba(45,212,191,.22)}
.pill.green {background:rgba(74,222,128,.13);color:#86efac;border-color:rgba(74,222,128,.22)}
.pill.amber {background:rgba(251,191,36,.13);color:#fcd34d;border-color:rgba(251,191,36,.22)}
.pill.red   {background:rgba(248,113,113,.13);color:#fca5a5;border-color:rgba(248,113,113,.22)}
.pill.violet{background:rgba(167,139,250,.14);color:#c4b5fd;border-color:rgba(167,139,250,.22)}
.pill.slate {background:rgba(148,163,184,.12);color:#cbd5e1;border-color:rgba(148,163,184,.2)}
.pill .dot{width:5px;height:5px;border-radius:50%;background:currentColor}

/* ---------------- gauge / bars ---------------- */
.gauge-wrap{display:flex;align-items:center;gap:18px}
.gauge{position:relative;flex:none}
.gauge .mid{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.gauge .mid b{font-size:24px;font-weight:700;letter-spacing:-.03em;display:block;line-height:1}
.gauge .mid span{font-size:10.5px;color:var(--mut-2)}

.meter{height:5px;border-radius:4px;background:rgba(255,255,255,.07);overflow:hidden}
.meter i{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--acc),var(--acc-2))}
.drv{display:flex;align-items:center;gap:11px;padding:7px 0}
.drv .nm{font-size:12.8px;color:var(--txt-2);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drv .meter{width:82px;flex:none}
.drv .vv{font-size:12.3px;color:var(--mut);width:44px;text-align:right;font-variant-numeric:tabular-nums}

.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(23,49,63,.45);font-size:13px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--mut)}
.kv b{font-weight:620}

/* ---------------- forms ---------------- */
label.fl{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mut);margin:0 0 6px}
.fld{margin-bottom:14px}
input[type=text],input[type=email],input[type=password],input[type=number],
input[type=url],input[type=date],input[type=datetime-local],input[type=search],select,textarea{
  width:100%;padding:10px 12px;background:var(--panel-3);border:1px solid var(--line);
  border-radius:10px;color:var(--txt);font-size:13.6px;outline:none;font-family:inherit;
}
textarea{resize:vertical;min-height:90px;line-height:1.5}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-dim)}
input::placeholder,textarea::placeholder{color:#4d6579}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237793a7' stroke-width='2.5'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:34px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.frow-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.hint{font-size:11.5px;color:var(--mut-2);margin-top:5px;line-height:1.45}

/* ---------------- misc ---------------- */
.flash{padding:11px 15px;border-radius:11px;margin-bottom:18px;font-size:13.4px;
  border:1px solid transparent;display:flex;align-items:center;gap:9px}
.flash.ok{background:rgba(45,212,191,.09);border-color:rgba(45,212,191,.3);color:#99f6e4}
.flash.err{background:rgba(248,113,113,.09);border-color:rgba(248,113,113,.32);color:#fecaca}
.empty{text-align:center;padding:40px 20px;color:var(--mut-2);font-size:13.4px}
.empty svg{width:34px;height:34px;stroke:#2a4a5e;fill:none;stroke-width:1.5;margin-bottom:10px}

.tabs{display:flex;gap:6px;border-bottom:1px solid var(--line-soft);margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:9px 14px;font-size:13.3px;color:var(--mut);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--acc);border-bottom-color:var(--acc)}

.pager{display:flex;gap:6px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.pager a,.pager span{padding:6px 11px;border-radius:8px;font-size:12.8px;color:var(--mut);
  border:1px solid var(--line-soft)}
.pager a:hover{color:var(--txt);border-color:#24506a}
.pager .on{background:var(--acc-dim);color:var(--acc);border-color:rgba(45,212,191,.3)}

.copy-row{display:flex;gap:8px;align-items:stretch}
.copy-row input{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.3px}

.modal-bg{position:fixed;inset:0;background:rgba(3,9,15,.72);backdrop-filter:blur(3px);
  display:none;place-items:center;z-index:60;padding:24px}
.modal-bg.on{display:grid}
.modal{width:100%;max-width:640px;max-height:88vh;overflow:auto;
  background:linear-gradient(170deg,var(--panel),var(--panel-3));
  border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:0 30px 70px rgba(0,0,0,.6)}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.filters .fld{margin:0;min-width:150px}
.filters .fld.sm{min-width:120px}

@media(max-width:1180px){
  .grid-kpi{grid-template-columns:repeat(2,1fr)}
  .grid-main,.grid-low{grid-template-columns:1fr}
}
@media(max-width:820px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .sidebar .nav{display:flex;flex-wrap:wrap;gap:4px}
  .nav-lbl,.side-foot{display:none}
  .main{padding:18px 16px 40px}
  .grid-kpi{grid-template-columns:1fr}
}