/* ============================================================================
   Atlas Dashboard v2 — shared design system
   Navy + gold + warm cream. One token set, one type scale, one table style.
   Loaded by every page; sidebar rendered by nav.js, data fetched by atlas.js.
   ============================================================================ */

:root {
  color-scheme: light;

  /* Brand */
  --navy-900:#1F2A44; --navy-800:#2A3A5C; --navy-700:#3D4F6B; --navy-500:#5B6B85;
  --navy-100:#E5E9F2; --navy-50:#F2F4F9;
  --gold-600:#D89E1F; --gold-500:#E8B872; --gold-100:#FCEBB8; --gold-50:#FEF6DD;

  /* Surfaces */
  --cream-bg:#FAF7F2; --card:#FFFFFF; --cream-empty:#EFE9DD;

  /* Semantic five (the only everyday accents) */
  --emerald-700:#047857; --emerald-500:#10B981; --emerald-50:#D1FAE5;
  --rose-600:#DC2626; --rose-500:#EF4444; --rose-50:#FEE2E2;
  --amber-600:#B87800; --amber-500:#D89E1F; --amber-50:#FEF6DD;
  --sage-500:#7FA68A; --terracotta-500:#B87262;

  /* Warm grey ramp */
  --gray-50:#F8F6F0; --gray-100:#EFEDE6; --gray-150:#E6E2D9; --gray-200:#DCD8CD;
  --gray-300:#C8C2B6; --gray-400:#9A948A; --gray-500:#6F6A62; --gray-600:#524E49;
  --gray-700:#4A4540; --gray-800:#312E2A; --gray-900:#1F1C18;
  /* --gray-400 = faint MARKS only (dashes, hairlines). Body muted text uses --gray-500 (WCAG AA). */

  --shadow-xs:0 1px 2px rgba(74,69,64,0.05);
  --shadow-sm:0 1px 3px rgba(74,69,64,0.07), 0 1px 2px rgba(74,69,64,0.04);
  --shadow-md:0 4px 10px rgba(74,69,64,0.09), 0 2px 4px rgba(74,69,64,0.05);

  --radius-sm:6px; --radius-md:10px; --radius-lg:14px;

  /* Type scale — six steps, no half-pixels */
  --fs-eyebrow:11px; --fs-sm:13px; --fs-base:14px; --fs-h2:17px; --fs-kpi:22px; --fs-h1:24px;

  --sidebar-w:230px;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
body {
  font-family:-apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
  background:var(--cream-bg); color:var(--navy-900);
  font-size:var(--fs-base); line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { color:#2563eb; text-decoration:none; }
a:hover { text-decoration:underline; }

/* ===== APP LAYOUT ===== */
.app { display:flex; min-height:100vh; }
.main { flex:1; min-width:0; padding:24px 28px 64px; max-width:1180px; }

/* ===== SIDEBAR ===== */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--navy-900); color:#fff;
  padding:18px 12px; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sb-brand { display:flex; align-items:center; gap:9px; padding:0 8px 16px; }
.sb-brand .sb-logo {
  width:28px; height:28px; border-radius:7px; background:var(--gold-600);
  display:flex; align-items:center; justify-content:center; color:var(--navy-900); font-size:17px;
}
.sb-brand .sb-name { font-size:15px; font-weight:600; color:#fff; line-height:1.1; }
.sb-brand .sb-sub { font-size:11px; color:rgba(255,255,255,.5); }

.sb-item {
  display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:8px;
  font-size:var(--fs-sm); color:rgba(255,255,255,.66); cursor:pointer; margin-bottom:2px;
  transition:background .15s ease, color .15s ease;
}
.sb-item:hover { background:rgba(255,255,255,.08); color:#fff; text-decoration:none; }
.sb-item .ti { font-size:16px; flex-shrink:0; }
.sb-item.active { background:var(--navy-800); color:#fff; box-shadow:inset 3px 0 0 var(--gold-500); }
.sb-item .sb-badge {
  margin-left:auto; font-size:11px; font-weight:700; border-radius:999px; padding:1px 7px;
  background:rgba(255,255,255,.14); color:#fff;
}
.sb-item .sb-badge.alert { background:#A32D2D; color:#F7C1C1; }
.sb-item .sb-badge.warn  { background:#854F0B; color:#FAC775; }
.sb-item.soon { color:rgba(255,255,255,.36); cursor:default; }
.sb-item.soon:hover { background:transparent; color:rgba(255,255,255,.36); }
.sb-item .sb-soon { margin-left:auto; font-size:10px; letter-spacing:.04em; color:rgba(255,255,255,.4); border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:0 6px; }

.sb-shelf {
  display:flex; align-items:center; gap:6px; padding:12px 10px 5px;
  font-size:var(--fs-eyebrow); text-transform:uppercase; letter-spacing:.07em;
  color:rgba(255,255,255,.42); cursor:pointer; user-select:none;
}
.sb-shelf .ti.sb-chev { margin-left:auto; font-size:14px; transition:transform .15s ease; }
.sb-shelf.collapsed .ti.sb-chev { transform:rotate(-90deg); }
.sb-shelf .sb-dot { width:6px; height:6px; border-radius:50%; margin-left:auto; }
.sb-shelf .sb-dot.warn { background:var(--gold-500); }
.sb-shelf .sb-dot.alert { background:var(--rose-500); }
.sb-group { overflow:hidden; }
.sb-group.collapsed { display:none; }
.sb-cta {
  margin-top:14px; display:flex; align-items:center; justify-content:center; gap:7px;
  padding:10px; border-radius:8px; background:var(--gold-600); color:var(--navy-900);
  font-size:var(--fs-sm); font-weight:600; cursor:pointer;
}
.sb-cta:hover { background:var(--gold-500); text-decoration:none; }

/* Mobile top bar + drawer */
.mobile-bar { display:none; }
.scrim { display:none; }

@media (max-width:860px) {
  .mobile-bar {
    display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:30;
    background:var(--navy-900); color:#fff; padding:12px 16px;
  }
  .mobile-bar .ham { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:0; line-height:1; }
  .mobile-bar .mb-title { font-size:15px; font-weight:600; }
  .app { display:block; }
  .sidebar {
    position:fixed; top:0; left:0; z-index:50; height:100vh; width:260px;
    transform:translateX(-100%); transition:transform .22s ease;
  }
  .sidebar.open { transform:translateX(0); box-shadow:0 0 40px rgba(0,0,0,.35); }
  .scrim.show { display:block; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40; }
  .main { padding:18px 16px 56px; max-width:none; }
}

/* ===== TOPBAR (page header) ===== */
.topbar { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.topbar h1 { margin:0; font-size:var(--fs-h1); font-weight:700; letter-spacing:-0.01em; color:var(--navy-900); }
.topbar .page-sub { margin:2px 0 0; font-size:var(--fs-sm); color:var(--gray-500); }
.fresh-chip {
  display:inline-flex; align-items:center; gap:7px; background:#fff;
  border:1px solid var(--gray-150); border-radius:999px; padding:5px 12px;
  font-size:12px; color:var(--gray-500);
}
.fresh-chip .hs-dot { width:7px; height:7px; border-radius:50%; background:var(--gray-300); }
.hs-dot.ok { background:var(--sage-500); } .hs-dot.slow { background:var(--amber-500); } .hs-dot.error { background:var(--terracotta-500); }
.ds-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gray-300); margin-right:3px; }
.ds-dot.ok { background:var(--sage-500); } .ds-dot.slow { background:var(--amber-500); } .ds-dot.error { background:var(--terracotta-500); }

/* ===== CARDS ===== */
.card {
  background:var(--card); border:1px solid var(--gray-150); border-radius:var(--radius-lg);
  padding:22px 24px; margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.section-head { display:flex; align-items:flex-start; gap:14px; margin-bottom:16px; }
.section-icon {
  flex-shrink:0; width:38px; height:38px; border-radius:10px; background:var(--navy-50);
  display:flex; align-items:center; justify-content:center; color:var(--navy-700); font-size:18px;
}
.section-icon.gold { background:var(--gold-50); color:var(--gold-600); }
.section-icon.rose { background:var(--rose-50); color:var(--rose-600); }
.section-icon.navy { background:var(--navy-50); color:var(--navy-700); }
.section-icon.amber { background:var(--amber-50); color:var(--amber-600); }
.section-icon.emerald { background:var(--emerald-50); color:var(--emerald-700); }
.section-head h2 { margin:0; font-size:var(--fs-h2); font-weight:700; letter-spacing:-0.01em; color:var(--gray-900); }
.section-head .section-sub { margin:2px 0 0; color:var(--gray-500); font-size:var(--fs-sm); }
h3.subhead { font-size:var(--fs-sm); font-weight:700; color:var(--gray-700); text-transform:uppercase; letter-spacing:.05em; margin:16px 0 6px; }

/* ===== KPI TILES ===== */
.kpi-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:12px; margin-bottom:16px; }
.kpi { background:var(--card); border:1px solid var(--gray-150); border-left:4px solid var(--gray-300); border-radius:var(--radius-md); padding:15px; }
.kpi.navy { border-left-color:var(--navy-700); } .kpi.gold { border-left-color:var(--gold-500); }
.kpi.emerald { border-left-color:var(--emerald-500); } .kpi.rose { border-left-color:var(--rose-500); } .kpi.amber { border-left-color:var(--amber-500); }
.kpi.sage { border-left-color:var(--sage-500); } .kpi.terracotta { border-left-color:var(--terracotta-500); } .kpi.blue { border-left-color:var(--navy-700); }
.kpi-label { font-size:var(--fs-eyebrow); color:var(--gray-500); text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin-bottom:7px; }
.kpi-value { font-size:var(--fs-kpi); font-weight:800; color:var(--gray-900); line-height:1.1; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.kpi-sub { font-size:12px; color:var(--gray-500); margin-top:5px; }

/* ===== TODAY action cards + lists ===== */
.today-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px,1fr)); gap:12px; }
.today-card { background:var(--card); border:1px solid var(--gray-150); border-radius:var(--radius-md); padding:14px 16px; cursor:pointer; transition:box-shadow .15s ease, transform .15s ease; }
.today-card:hover { box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.today-card .tc-num { font-size:24px; font-weight:800; color:var(--navy-900); font-variant-numeric:tabular-nums; line-height:1; }
.today-card .tc-label { font-size:var(--fs-sm); color:var(--gray-600); margin-top:6px; }
.today-card.is-clear .tc-num { color:var(--sage-500); }
.today-list-row { display:flex; align-items:flex-start; gap:10px; padding:9px 2px; border-bottom:1px solid var(--gray-100); font-size:var(--fs-sm); }
.today-list-row:last-child { border-bottom:none; }
.today-list-row .tl-name { font-weight:600; color:var(--navy-900); }
.today-list-row .tl-meta { color:var(--gray-500); }
.today-list-row .tl-right { margin-left:auto; text-align:right; white-space:nowrap; }
.seeall { background:none; border:none; color:var(--navy-700); font-size:13px; font-weight:600; cursor:pointer; padding:8px 2px 0; font-family:inherit; }
.seeall:hover { color:var(--gold-600); }

/* ===== PROGRESS BAR ===== */
.progress-bar { background:var(--gray-100); height:18px; border-radius:999px; overflow:hidden; position:relative; border:1px solid var(--gray-150); }
.progress-fill { height:100%; border-radius:999px; background:var(--sage-500); transition:width .5s ease; }
.progress-fill.sage { background:var(--sage-500); } .progress-fill.amber { background:var(--amber-500); } .progress-fill.terracotta { background:var(--terracotta-500); } .progress-fill.rose { background:var(--rose-500); } .progress-fill.emerald { background:var(--emerald-500); }
.progress-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; color:var(--gray-800); }

/* ===== UNIFIED TABLE ===== */
.atbl { width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.atbl thead th { background:var(--navy-700); color:#fff; padding:8px 12px; text-align:left; font-weight:600; font-size:12px; white-space:nowrap; }
.atbl tbody td { padding:8px 12px; border-bottom:1px solid var(--gray-100); vertical-align:top; }
.atbl tbody tr:nth-child(even) td { background:var(--gray-50); }
.atbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* ===== BADGES / EMPTY / ERROR ===== */
.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:999px; font-size:var(--fs-eyebrow); font-weight:600; line-height:1.5; }
.badge.emerald { background:var(--emerald-50); color:var(--emerald-700); }
.badge.rose { background:var(--rose-50); color:var(--rose-600); }
.badge.amber { background:var(--amber-50); color:var(--amber-600); }
.badge.gray { background:var(--gray-100); color:var(--gray-600); }
.empty { color:var(--sage-500); font-size:var(--fs-sm); padding:10px 0; }
.atlas-error {
  background:var(--rose-50); border:1px solid var(--rose-500); color:var(--rose-600);
  border-radius:var(--radius-md); padding:14px 16px; margin-bottom:16px; font-size:var(--fs-sm);
}
.iframe-embed { width:100%; height:calc(100vh - 180px); min-height:520px; border:1px solid var(--gray-150); border-radius:var(--radius-md); background:#fff; }