/* Orbit Command Centre — UI refresh (2026-10-19)
   Theme layer over the compiled app. Remove the <link id="orbit-refresh"> in index.html to roll back. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap');

:root,[data-theme=light]{
  --bg:#f4f5f7; --surface:#ffffff; --surface-2:#f8f9fb; --line:#e3e6eb; --line-2:#eef0f3;
  --text:#141821; --muted:#5f6878; --faint:#8a92a1;
  --accent:#f0a020; --accent-dark:#a8670a; --accent-soft:rgba(240,160,32,.12);
  --good:#127a4a; --good-soft:rgba(18,122,74,.10); --warn:#9a6200; --warn-soft:rgba(240,160,32,.14);
  --bad:#b4352b; --bad-soft:rgba(180,53,43,.09);
  --glass:var(--surface); --glass-2:var(--surface-2); --glass-strong:var(--surface); --panel:var(--surface); --panel-2:var(--surface-2);
  --border:var(--line); --border-2:var(--line-2); --input-bg:#fff; --charcoal:#141821; --btn-text:#fff;
  --radius:10px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(20,24,33,.05); --shadow-lg:0 18px 48px rgba(20,24,33,.18);
  --scrim:rgba(20,24,33,.38); --blur:none; --side:#ffffff;
}
[data-theme=dark]{
  --bg:#0e1116; --surface:#151921; --surface-2:#1a1f28; --line:#252b36; --line-2:#1f242e;
  --text:#e7eaf0; --muted:#949cab; --faint:#6d7585;
  --accent:#f5a623; --accent-dark:#ffbe55; --accent-soft:rgba(245,166,35,.13);
  --good:#4cc790; --good-soft:rgba(76,199,144,.12); --warn:#f3c06e; --warn-soft:rgba(245,166,35,.14);
  --bad:#f27d73; --bad-soft:rgba(242,125,115,.12);
  --glass:var(--surface); --glass-2:var(--surface-2); --glass-strong:#181d26; --panel:var(--surface); --panel-2:var(--surface-2);
  --border:var(--line); --border-2:var(--line-2); --input-bg:#11151b; --charcoal:#e7eaf0; --btn-text:#0e1116;
  --shadow:0 1px 2px rgba(0,0,0,.35); --shadow-lg:0 22px 60px rgba(0,0,0,.55);
  --scrim:rgba(4,6,10,.62); --side:#11151b;
}

/* Base */
body{font-family:Geist,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:13.5px;background:var(--bg)!important;background-image:none!important;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1,"cv11" 1}
h1{font-size:22px;font-weight:650;letter-spacing:-.025em}
h2{font-size:14px;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
.card,.modal,.empty,table,.bell-drop,.ai-panel,.login-card,.side,.tabbar,.bell-btn,.hamburger,.tabs,button.ghost{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Shell + sidebar */
.side{background:var(--side)!important;border-right:1px solid var(--line);padding:18px 12px}
.shell.rail .side:hover{background:var(--side)!important}
.side-brand{padding:2px 6px 14px;border-bottom:1px solid var(--line-2)}
.side-brand img{height:30px}
.side-brand .t{font-size:13.5px;font-weight:650}
.nav{margin-top:14px;gap:1px}
.nav a{padding:8px 11px;border-radius:7px;font-weight:500;font-size:13.5px;color:var(--muted);position:relative}
.nav a svg{opacity:.75;width:17px;height:17px}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.active{background:var(--accent-soft);color:var(--text);font-weight:600}
.nav a.active svg{color:var(--accent);opacity:1}
.nav a.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
.shell.rail .side:not(:hover) .nav a.active::before{left:-10px}
.whoami{border-top:1px solid var(--line-2)}
.whoami .n{font-size:13px}
.whoami button.ghost{padding:7px 12px;font-size:12.5px}

/* Main + top bar */
.main{padding:18px 32px 40px}
.topbar{margin:0 0 6px}
.bell-btn,.hamburger{width:34px;height:34px;border-radius:8px;background:transparent;border:1px solid transparent;color:var(--muted)}
.bell-btn:hover,.hamburger:hover{background:var(--surface);border-color:var(--line);color:var(--text)}
.head{margin-bottom:18px}
.head .pill{background:transparent;border:1px solid var(--line)}

/* Buttons */
button{padding:8px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;box-shadow:none}
button:hover{filter:none;opacity:.9}
button.primary-amber{background:var(--accent);color:#1d1300;box-shadow:none}
button.ghost{background:var(--surface);border:1px solid var(--line);color:var(--text)}
button.ghost:hover{background:var(--surface-2);border-color:var(--faint);opacity:1}
.tab:hover,.linkbtn:hover{opacity:1}

/* Inputs */
input,select,textarea{border-radius:var(--radius-sm);padding:8px 11px;font-size:13.5px;background:var(--input-bg);border-color:var(--line)}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px var(--accent-soft)}
label{font-size:12px;font-weight:500;margin:12px 0 5px}

/* Cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none;padding:16px}
.card:hover{transform:none;box-shadow:none}
.card .k{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:500;color:var(--muted)}
.card .v{font-size:23px;font-weight:650;letter-spacing:-.03em;margin-top:6px}
.card .muted{color:var(--faint)}

/* KPI strip: the dashboard stats read as one ledger instead of loose tiles */
.cards{gap:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));margin-bottom:22px}
.cards>.card{--div:1px 0 0 var(--line),0 1px 0 var(--line);border:none!important;border-radius:0;background:transparent;min-height:96px;box-shadow:var(--div);margin:0 0 -1px 0}

/* Tables */
table{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none}
th{background:var(--surface-2);text-transform:none;letter-spacing:0;font-size:12px;font-weight:550;color:var(--muted);padding:9px 14px;border-bottom:1px solid var(--line)}
td{padding:9px 14px;border-top:1px solid var(--line-2)}
tbody tr:hover td{background:var(--surface-2)}
table button{padding:4px 10px;font-size:12px;border-radius:6px;background:var(--surface-2);color:var(--text);border:1px solid var(--line)}
table button:hover{border-color:var(--faint);opacity:1}
table button.danger{background:transparent;color:var(--bad);border-color:var(--line)}
table button.danger:hover{background:var(--bad);color:#fff;border-color:var(--bad)}
.empty{background:var(--surface);border:1px dashed var(--line)}

/* Pills */
.pill{border-radius:6px;padding:2px 8px;font-size:11.5px;font-weight:600;letter-spacing:0;border:1px solid var(--line);background:var(--surface-2)}
.pill.good,.pill.warn,.pill.bad{border-color:transparent}

/* Tabs */
.tabs{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:3px;gap:2px}
.tab{padding:6px 13px;border-radius:7px;font-size:12.5px}
.tab.active{background:var(--surface);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.12)}

/* Overlays */
.modal{background:var(--glass-strong);border:1px solid var(--line);border-radius:14px;padding:22px}
.bell-drop{background:var(--glass-strong);border:1px solid var(--line);border-radius:12px}
.ai-panel{background:var(--glass-strong)}
.login-card{background:var(--surface);border-radius:16px}
.banner{border-radius:var(--radius-sm)}

/* Dashboard: chart and recent activity side by side on wide screens */
.main > div:has(> .card > svg[viewBox^="0 0 720"]) > .card{padding:16px 18px}
.main > div:has(> .card > svg[viewBox^="0 0 720"]) svg{max-height:300px}
@media (min-width:1180px){
  .main:has(> div > .card > svg[viewBox^="0 0 720"]){display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);column-gap:18px;align-content:start}
  .main:has(> div > .card > svg[viewBox^="0 0 720"]) > *{grid-column:1/-1}
  .main > div:has(> .card > svg[viewBox^="0 0 720"]){grid-column:1;margin-top:0!important}
  .main > div:has(> .card > svg[viewBox^="0 0 720"]) + div{grid-column:2;min-width:0}
  .main > div:has(> .card > svg[viewBox^="0 0 720"]) + div > table{max-height:368px;overflow:auto;display:block}
  .main > div:has(> .card > svg[viewBox^="0 0 720"]) + div > table > tbody{display:table;width:100%}
  .main > div:has(> .card > svg[viewBox^="0 0 720"]){padding-top:calc(14px * 1.4 + 10px)}
  .main > div:has(> .card > svg[viewBox^="0 0 720"]) + div > h2{line-height:1.4;margin:0 0 10px}
}

@media (max-width:820px){
  .main{padding:14px 14px calc(92px + env(safe-area-inset-bottom,0px))}
  .side{background:var(--side)!important}
  .cards{grid-template-columns:1fr 1fr}
  .tabbar{background:var(--surface)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}