/* Excel mode — global paint layer.
   Active when <html> carries the "excel" class (set pre-paint in base.html).
   Excel mode is a light theme: the toggle removes the "dark" class, so all
   rules here only need to beat Tailwind's light-mode utilities.
   See docs/EXCEL_MODE_ARCHITECTURE.md for the full design. */

html.excel {
  --xl-accent: #217346;      /* Excel brand green */
  --xl-accent-deep: #185c37;
  --xl-gridline: #cbd5e1;
  --xl-header-fill: #f1f5f9;
  --xl-cell-fill: #ffffff;
  --xl-ink: #0f172a;
  --xl-pos-green: #006100;   /* Excel "Green Text" conditional-format color */
  --xl-neg-red: #b91c1c;
}

html.excel body {
  background-color: #eef1f5 !important;
  color: var(--xl-ink) !important;
  font-family: Calibri, 'Segoe UI', Inter, system-ui, sans-serif !important;
}

/* ---- Flatten: spreadsheets have no rounded corners or shadows ---- */
html.excel [class*="rounded"] { border-radius: 0 !important; }
html.excel [class*="shadow"] { box-shadow: none !important; }

/* Every border becomes a gridline */
html.excel [class*="border"] { border-color: var(--xl-gridline) !important; }

/* Card / panel surfaces -> white sheet cells on the gray desk */
html.excel .bg-white,
html.excel .bg-zinc-50,
html.excel .bg-zinc-100 { background-color: var(--xl-cell-fill) !important; }

/* ---- Amber brand accent -> Excel green ---- */
html.excel .text-amber-400,
html.excel .text-amber-500,
html.excel .text-amber-600 { color: var(--xl-accent) !important; }
html.excel .bg-amber-500 {
  background-color: var(--xl-accent) !important;
  color: #ffffff !important;
}
html.excel .bg-amber-500\/10 { background-color: #e8f2ec !important; }
html.excel .bg-amber-50\/20 { background-color: #f4f9f6 !important; }
html.excel .hover\:text-amber-600:hover,
html.excel .hover\:text-amber-300:hover { color: var(--xl-accent-deep) !important; }

/* Positive / negative values use workbook green & red */
html.excel .text-emerald-400,
html.excel .text-emerald-500,
html.excel .text-emerald-600 { color: var(--xl-pos-green) !important; }
html.excel .text-rose-400,
html.excel .text-rose-500 { color: var(--xl-neg-red) !important; }

/* Numbers: classic spreadsheet mono with aligned digits */
html.excel .font-mono {
  font-family: ui-monospace, Consolas, 'SFMono-Regular', Menlo, monospace !important;
  font-variant-numeric: tabular-nums;
}

/* ---- Top nav -> Excel title bar (green chrome, white type) ----
   nav.bg-white needed so this outranks the generic .bg-white cell rule above. */
html.excel nav,
html.excel nav.bg-white {
  background-color: var(--xl-accent) !important;
  border-bottom: none !important;
}
html.excel nav a,
html.excel nav a span,
html.excel nav button { color: #ffffff !important; }
html.excel nav .text-amber-500,
html.excel nav .text-amber-600,
html.excel nav .text-amber-400 { color: #ffffff !important; }
html.excel nav [class*="text-zinc"] { color: #d7e8de !important; }
html.excel nav a:hover,
html.excel nav a:hover span,
html.excel nav [class*="text-zinc"]:hover { color: #ffffff !important; }
html.excel nav [class*="border"] { border-color: rgba(255, 255, 255, 0.35) !important; }

/* Topbar pillar and utility chrome styling */
html.excel nav a[id^="nav-"] {
  color: #ffffff !important;
}
html.excel nav a[id^="nav-"]:hover {
  color: #ffffff !important;
}
html.excel nav a[id^="nav-"].border-amber-500 {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
  font-weight: 700;
}
html.excel nav a#nav-settings.border-amber-500 {
  border-color: #ffffff !important;
}

/* ---- Ticker sub-nav -> workbook sheet-tab strip ---- */
html.excel #ticker-sub-nav {
  background-color: #dce3ea !important;
  border-bottom: 1px solid var(--xl-gridline) !important;
}
html.excel #ticker-sub-nav .hidden {
  display: none !important;
}
html.excel #ticker-sub-nav a[id^="sub-link"] {
  background-color: #eef1f5 !important;
  border: 1px solid var(--xl-gridline) !important;
  border-radius: 3px 3px 0 0 !important;
  color: #334155 !important;
}
html.excel #ticker-sub-nav a[id^="sub-link"]:hover {
  background-color: #ffffff !important;
  color: var(--xl-ink) !important;
}
/* Active view = active sheet tab: white with the green top rule */
html.excel #ticker-sub-nav a.bg-amber-500,
html.excel #ticker-sub-nav a[id^="sub-link"].bg-amber-500 {
  background-color: #ffffff !important;
  color: var(--xl-accent-deep) !important;
  border-top: 3px solid var(--xl-accent) !important;
  font-weight: 700;
}
/* The amber ticker pill reads as the Name Box */
html.excel #ticker-sub-nav .bg-amber-500\/10 {
  background-color: #ffffff !important;
  border: 1px solid var(--xl-gridline) !important;
}
html.excel #sub-nav-ticker { color: var(--xl-accent-deep) !important; }

/* Text selection matches the Excel selection tint */
html.excel ::selection { background-color: #c6e0d4; }

/* Disable animated border trail in Excel mode to keep sheets flat */
html.excel .animated-border-trail {
  animation: none !important;
  background-image: none !important;
  padding: 0 !important;
  border: 1px solid var(--xl-gridline) !important;
}
html.excel .animated-border-trail > * {
  border-radius: 0 !important;
}

/* ==== Sheet components (structure emitted by templates/_excel.html) ==== */

html.excel .xl-sheet {
  border: 1px solid var(--xl-gridline);
  background-color: var(--xl-cell-fill);
}
html.excel .xl-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  background-color: var(--xl-header-fill);
  border-bottom: 1px solid var(--xl-gridline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #334155;
}
html.excel .xl-titlebar-tag {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 9px;
  font-weight: 500;
  color: var(--xl-accent);
  letter-spacing: 0.02em;
}

/* The grid table: row numbers, column letters, gridline cells */
html.excel .xl-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
html.excel .xl-grid th,
html.excel .xl-grid td {
  border: 1px solid var(--xl-gridline);
  padding: 6px 10px;
}
html.excel .xl-colhead,
html.excel .xl-corner,
html.excel .xl-rowno {
  background-color: var(--xl-header-fill);
  color: #64748b;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  padding: 3px 4px;
  user-select: none;
}
html.excel .xl-corner,
html.excel .xl-rowno { width: 34px; }
html.excel .xl-label {
  background-color: #f8fafc;
  color: #475569;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
html.excel .xl-val {
  font-family: ui-monospace, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 600;
  color: var(--xl-ink);
}

/* Value semantics — Excel conditional-format conventions */
html.excel .xl-neg  { color: var(--xl-neg-red); background-color: #fef2f2; }
html.excel .xl-pos  { color: var(--xl-pos-green); background-color: #f0fdf4; }
html.excel .xl-warn { background-color: #fffbeb; }
html.excel .xl-muted { color: #64748b; font-weight: 400; }

/* Panels converted via the panel() macro: re-grid their label/value pairs
   into bordered cells. gap collapses so cell borders form the gridlines.

   OPT-IN via .xl-kv, and deliberately so. This used to match every .grid in a
   sheet body, which assumed each grid child was a simple label/value pair of
   two <p>s. _institutional.html later wrapped rich nested layouts in panel()
   -- a 12-column split, three-up stat rows, cards holding a label, a value and
   a caption -- and the forced flex/space-between crushed them into overlapping
   text. Anything not marked .xl-kv now keeps its own layout inside the sheet. */
html.excel .xl-sheet-body { padding: 8px 12px; }
html.excel .xl-sheet-body .grid.xl-kv {
  gap: 0 !important;
  border-top: 1px solid var(--xl-gridline);
  border-left: 1px solid var(--xl-gridline);
}
html.excel .xl-sheet-body .grid.xl-kv > div {
  border-right: 1px solid var(--xl-gridline);
  border-bottom: 1px solid var(--xl-gridline);
  padding: 4px 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
html.excel .xl-sheet-body .grid.xl-kv > div > p:first-child {
  margin-bottom: 0;
  font-size: 11px;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
}
html.excel .xl-sheet-body .grid.xl-kv > div > p:last-child {
  margin-top: 0;
  font-family: ui-monospace, Consolas, monospace !important;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 640px) {
  html.excel .xl-sheet {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html.excel .xl-grid {
    min-width: 34rem;
  }

  html.excel .xl-titlebar {
    min-width: 34rem;
  }

  html.excel .xl-sheet-body {
    padding: 10px;
  }
}