@import url('https://fonts.googleapis.com/css2?family=Exo:wght@500;600;700&family=Open+Sans:wght@400;600;700&display=swap');

:root {
  --primary: #334453;      /* Allstar Denim */
  --accent: #C82F30;       /* Allstar Red */
  --dark-text: #000000;
  --mid-text: #56565B;
  --border: #CCCCCC;
  --light-bg: #F3F3F3;
  --white: #FFFFFF;
  --positive: #2E7D32;
  --caution: #F9A825;
  --negative: #C82F30;
  --denim-50: #99A1A9;
  --denim-25: #CCD0D4;
  --section-bg: #EAEDF0;
  --fcst-bg: #FBE9C8;
  --current-col: #E8EEF3;
  --font-head: 'Exo', Calibri, Arial, sans-serif;
  --font-body: 'Open Sans', Calibri, Arial, sans-serif;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(51,68,83,0.12), 0 1px 2px rgba(51,68,83,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--dark-text);
  background: var(--light-bg);
  -webkit-font-smoothing: antialiased;
}

/* ---- Header ---- */
header {
  background: var(--primary);
  color: var(--white);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 3px solid var(--accent);
}
.brand-lockup { display: flex; align-items: center; gap: 12px; }
.brand-mark {
  width: 30px; height: 30px; border-radius: 5px;
  background: var(--accent); color: var(--white);
  font-family: var(--font-head); font-weight: 700; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
}
header h1 {
  font-family: var(--font-head); font-weight: 600; font-size: 19px;
  letter-spacing: -0.01em;
}
header .sub { font-size: 11px; color: var(--denim-25); margin-top: 1px; }
.header-right { display: flex; align-items: center; gap: 16px; }
#updated { font-size: 11px; color: var(--denim-25); }
#refreshBtn {
  font-family: var(--font-head); font-weight: 600; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: transparent; color: var(--white);
  border: 1px solid var(--denim-50); border-radius: 5px;
  padding: 7px 14px; cursor: pointer; transition: all .15s;
}
#refreshBtn:hover { background: var(--accent); border-color: var(--accent); }
#refreshBtn:disabled { opacity: .5; cursor: wait; }

/* ---- Data freshness chip (mirror source / stale / degraded) ---- */
.freshness {
  font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 4px; border: 1px solid transparent; white-space: nowrap;
}
.freshness.fresh-live { background: rgba(46,125,50,.15); color: #1b5e20; border-color: rgba(46,125,50,.35); }
.freshness.fresh-warm { background: rgba(51,68,83,.12); color: var(--primary); border-color: var(--denim-25); }
.freshness.fresh-stale { background: #FBE9C8; color: #6b4400; border-color: #F0D08A; }
.freshness.fresh-degraded { background: #F7E0E0; color: #791617; border-color: #E39797; }
.freshness-banner { margin: 0 28px 0; border-radius: 0; border-left: none; border-right: none; }

/* ---- Covenant status strip ---- */
.cov-status {
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 18px;
  border: 1px solid var(--border); background: var(--white); box-shadow: var(--shadow);
}
.cov-status-head { font-family: var(--font-head); font-size: 14px; color: var(--primary); }
.cov-status-detail { font-size: 12px; color: var(--mid-text); margin-top: 4px; line-height: 1.45; }
.cov-status-ok { border-left: 4px solid var(--positive); }
.cov-status-watch { border-left: 4px solid var(--caution); }
.cov-status-breach { border-left: 4px solid var(--negative); background: #FDF5F5; }

.fc-drift-banner { margin-bottom: 18px; }
a.fc-drift-link { color: var(--primary); font-weight: 700; }

nav.tabs button[hidden] { display: none; }

/* ---- Tabs ---- */
nav.tabs {
  display: flex; gap: 2px; padding: 0 28px;
  background: var(--white); border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
nav.tabs button {
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  background: none; border: none; cursor: pointer;
  padding: 14px 18px; color: var(--mid-text);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
nav.tabs button.active { color: var(--primary); border-bottom-color: var(--accent); }
nav.tabs button:hover { color: var(--primary); }

/* ---- Layout ---- */
main { padding: 24px 28px 48px; max-width: min(1720px, 96vw); margin: 0 auto; }
/* Wide-grid tabs (13-Week TWCF, Forecast Entry) drop the 1720px cap so the
   full-year/13-column grids can use an ultrawide monitor instead of sitting
   in a centered column. Toggled by app.js on tab switch. */
main.wide { max-width: 98vw; }
.view { display: none; }
.view.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.view-head { margin-bottom: 18px; }
.view-head h2 { font-family: var(--font-head); font-weight: 600; font-size: 20px; color: var(--primary); }
.view-head p { font-size: 12px; color: var(--mid-text); margin-top: 3px; }

/* ---- KPI cards ---- */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.kpi {
  background: var(--white); border: 1px solid var(--border);
  border-top: 3px solid var(--accent); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--shadow);
}
.kpi .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mid-text); font-weight: 600; }
.kpi .value { font-family: var(--font-head); font-weight: 700; font-size: 30px; color: var(--primary); margin-top: 6px; line-height: 1; }
.kpi .note { font-size: 12px; color: var(--mid-text); margin-top: 7px; }
.kpi.status-positive { border-top-color: var(--positive); }
.kpi.status-caution { border-top-color: var(--caution); }
.kpi.status-negative { border-top-color: var(--negative); }
.kpi .value.pos { color: var(--positive); }
.kpi .value.neg { color: var(--negative); }

/* ---- Card / chart container ---- */
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.card h3 { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--primary); margin-bottom: 14px; }
.chart-wrap { position: relative; height: 340px; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--primary); color: var(--white);
  font-family: var(--font-body); font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 9px 12px; text-align: right;
}
thead th:first-child { text-align: left; }
tbody td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--light-bg); }
tbody td:first-child { text-align: left; font-weight: 600; }
tbody tr:nth-child(even) { background: var(--light-bg); }
tfoot td { padding: 10px 12px; text-align: right; font-weight: 700; border-top: 2px solid var(--border); }
tfoot td:first-child { text-align: left; }
.var-pos { color: var(--positive); }
.var-neg { color: var(--negative); }
.pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; letter-spacing: 0.03em; }
.pill.ok { background: #E6F2E6; color: var(--positive); }
.pill.flag { background: #FBE9C8; color: #8a5a00; }
.pill.unmatched { background: #F1CBCB; color: var(--accent); }

/* ---- States ---- */
.banner { padding: 11px 16px; border-radius: 6px; font-size: 12px; margin-bottom: 18px; }
.banner.warn { background: #FBE9C8; color: #6b4400; border: 1px solid #F0D08A; }
.banner.err { background: #F7E0E0; color: #791617; border: 1px solid #E39797; }
/* Informational, not a problem: the numbers are right, something merely needs
   classifying. Denim-tinted so it reads as a note rather than an alert. */
.banner.info { background: #E8EDF2; color: #334453; border: 1px solid #B9C6D2; }
.banner.info code { background: #DCE4EB; padding: 1px 4px; border-radius: 3px; font-size: 11px; }
.loading { padding: 60px; text-align: center; color: var(--mid-text); font-size: 13px; }
.spinner { width: 26px; height: 26px; border: 3px solid var(--denim-25); border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 12px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

footer { text-align: center; font-size: 11px; color: var(--mid-text); padding: 18px; }

/* ---- Card header w/ inline filters (Collections customer detail, etc.) ---- */
.card-head-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.card-head-row h3 { margin-bottom: 0; }
.filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.filters label { font-size: 11px; color: var(--mid-text); font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
.filters select {
  font-family: var(--font-body); font-size: 13px; padding: 5px 9px; border: 1px solid var(--border);
  border-radius: 5px; background: var(--white); color: var(--dark-text); cursor: pointer;
}
.filters select:focus { outline: none; border-color: var(--primary); }
.btn-secondary {
  font-family: var(--font-head); font-weight: 600; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--primary); color: var(--white);
  border: none; border-radius: 5px; padding: 7px 14px; cursor: pointer;
}
.btn-secondary:hover { background: var(--accent); }
.cust-summary { font-size: 12px; color: var(--mid-text); padding: 0 0 10px; }
.cust-summary strong { color: var(--primary); font-weight: 700; }

/* ---- Forecast entry grid (Wave 2) ---- */
.btn-primary {
  font-family: var(--font-head); font-weight: 600; font-size: 11px;
  letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--accent); color: var(--white);
  border: none; border-radius: 5px; padding: 7px 14px; cursor: pointer;
}
.btn-primary:hover { background: #a82626; }
.btn-primary:disabled { opacity: .45; cursor: default; }
.fc-status { font-size: 11px; color: var(--mid-text); }
.fc-help { font-size: 11px; color: var(--mid-text); margin-top: 10px; }
.fc-annual { max-width: 520px; }
.fc-annual tbody tr.subtotal td { background: #F8F9FA; font-weight: 700; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--primary); }
/* The grid still scrolls sideways — the BAR is hidden, not the scrolling. It
   lives above the grid instead (.fc-scroll-top); a second one down here was the
   original complaint, since it sits below the fold on a laptop. Wheel, trackpad,
   shift+wheel, keyboard and fcScrollToCurrent all still work, and the top strip
   mirrors every one of them. */
.fc-grid-wrap { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.fc-grid-wrap::-webkit-scrollbar { display: none; }
/* Proxy scrollbar above the grid (fcSyncScrollbars). The inner div is sized to
   the table's full width in JS; this element only ever shows the bar. */
/* The explicit height is required, not cosmetic: with `height: auto` the box is
   as tall as its 1px inner div and the bar is clipped out of view, which reads
   as a rendering gap above the grid. 18px clears the widest platform default
   (Windows ~17px) — the ::-webkit rules below render it at 10px, but a browser
   ignoring them must still have room. */
.fc-scroll-top {
  overflow-x: auto; overflow-y: hidden; height: 18px; margin-bottom: 4px;
  scrollbar-width: thin; scrollbar-color: var(--denim-50) var(--light-bg);
}
.fc-scroll-top > div { height: 1px; }
.fc-scroll-top.fc-scroll-idle { display: none; }
.fc-scroll-top::-webkit-scrollbar { height: 10px; -webkit-appearance: none; }
.fc-scroll-top::-webkit-scrollbar-thumb { background: var(--denim-50); border-radius: 5px; }
.fc-scroll-top::-webkit-scrollbar-track { background: var(--light-bg); border-radius: 5px; }
.fc-grid tbody td { padding: 5px 12px; border-bottom: 1px solid var(--light-bg); }
.fc-grid tbody tr:nth-child(even) { background: transparent; }
.fc-grid tbody td:first-child { font-weight: 400; }
.fc-grid th:last-child { width: 36px; }
.fc-grid input.fc-date, .fc-grid input.fc-num {
  font-family: var(--font-body); font-size: 13px; padding: 5px 8px;
  border: 1px solid var(--border); border-radius: 5px; background: var(--white);
  color: var(--dark-text); width: 100%; max-width: 190px;
}
.fc-grid input.fc-num { text-align: right; }
.fc-grid input:focus { outline: none; border-color: var(--primary); }
.fc-grid input.fc-nonfri { border-color: var(--caution); background: #FFFBF0; }
.fc-del {
  background: none; border: none; color: var(--mid-text); cursor: pointer;
  font-size: 18px; line-height: 1; padding: 0 6px; border-radius: 4px;
}
.fc-del:hover { color: var(--accent); }

/* ===================================================================
   Forecast Entry — grouped grid, computed totals, workbook upload
   =================================================================== */
.fc-grid thead .fc-group-row th { background: var(--section-bg); color: var(--primary); }
.fc-grid th.fc-group {
  cursor: pointer; font-family: var(--font-head); font-weight: 700; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.05em; text-align: left;
  border-left: 2px solid var(--white); user-select: none;
}
.fc-grid th.fc-group:hover { background: var(--denim-25); }
.fc-grid th.fc-group .fc-caret { color: var(--accent); font-size: 11px; }
.fc-grid th.fc-total-col { background: #3d5061; }
.fc-grid td.fc-total-col {
  background: #F8F9FA; font-weight: 700; color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.fc-grid tbody td { padding: 5px 10px; }

/* Transposed Forecast Entry — weeks across the top, line items down the side
   (mirrors the 13-Week TWCF table). */
.fc-tgrid { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.fc-tgrid thead th { background: var(--primary); color: var(--white); padding: 6px 8px; font-weight: 600; font-size: 10px; text-align: center; vertical-align: top; white-space: nowrap; }
.fc-tgrid thead th:first-child { text-align: left; min-width: 168px; }
.fc-tgrid tbody td { padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--light-bg); }
.fc-tgrid tbody td:first-child { text-align: left; font-weight: 600; white-space: nowrap; }
.fc-tgrid tbody tr.section-head td { background: var(--section-bg); font-family: var(--font-head); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); padding: 7px 12px; }
.fc-tgrid tbody tr.subtotal td { background: #F8F9FA; font-weight: 700; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); color: var(--primary); }
.fc-tgrid td.fc-total-col { background: #F8F9FA; font-weight: 700; color: var(--primary); }
.fc-tgrid td.fc-empty { text-align: left; font-weight: 400; color: var(--mid-text); padding: 16px 12px; }
.fc-tgrid input.fc-num { width: 92px; text-align: right; font-family: var(--font-body); font-size: 12px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 4px; background: var(--white); color: var(--dark-text); }
.fc-tgrid input.fc-date { width: 124px; font-family: var(--font-body); font-size: 11px; padding: 3px 4px; border: 1px solid var(--denim-50); border-radius: 4px; }
.fc-tgrid input:focus { outline: none; border-color: var(--accent); }
.fc-tgrid input.fc-nonfri { border-color: var(--caution); background: #FFFBF0; }
.fc-tgrid thead .fc-del { color: var(--denim-25); font-size: 15px; padding: 0 4px; background: none; border: none; cursor: pointer; }
.fc-tgrid thead .fc-del:hover:not(:disabled) { color: var(--white); }
.fc-tgrid thead th.fc-past { background: #2b3a47; }
.fc-tgrid .fc-th-ctl { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 3px; }
.fc-tgrid .fc-lock { font-size: 9.5px; color: var(--denim-25); display: inline-flex; align-items: center; gap: 3px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }
.fc-tgrid .fc-lock input { transform: scale(0.85); margin: 0; }
.fc-tgrid input:disabled { background: var(--light-bg); color: var(--mid-text); cursor: not-allowed; opacity: 0.75; }
.fc-tgrid thead .fc-del:disabled { color: #5a6b78; cursor: not-allowed; }

/* Frozen Line Item column — the grid runs a full year wide, so the labels stay
   pinned while the week columns scroll under them. Every sticky cell needs its
   own opaque background (the default transparent td would show columns
   sliding through it). */
.fc-tgrid thead th:first-child,
.fc-tgrid tbody td:first-child { position: sticky; left: 0; }
.fc-tgrid thead th:first-child { z-index: 4; background: var(--primary); }
.fc-tgrid tbody td:first-child {
  z-index: 3; background: var(--white);
  box-shadow: 1px 0 0 var(--border);
}
.fc-tgrid tbody tr.section-head td:first-child { background: var(--section-bg); }
.fc-tgrid tbody tr.subtotal td:first-child,
.fc-tgrid tbody tr.fc-derived-row td:first-child { background: #F8F9FA; }
.fc-tgrid td.fc-empty { position: static; box-shadow: none; }

/* Plan tab seed panel: the line pickers wrap onto their own row rather than
   crowding the filter bar — eight lines do not fit beside the quarter and
   growth controls. */
.pl-seed-lines { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; }
.pl-seed-h { font-family: var(--font-head); font-weight: 600; font-size: 12px;
  color: var(--primary); text-transform: uppercase; letter-spacing: 0.04em;
  margin: 16px 0 6px; }

/* Plan tab week header: the week-ending is FIXED, not an editable date input.
   A plan year's weeks are generated from the calendar, so there is no date to
   retype — and letting one be edited would let a week escape the plan year the
   save is scoped to. */
.fc-tgrid .fc-date-static { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--white); white-space: nowrap; }

/* Column tag under each week header: Actual / Forecast / Current. */
.fc-tgrid .fc-tag { font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--denim-25); margin-top: 3px; font-weight: 600; }
.fc-tgrid .fc-tag.act { color: #9FD3A6; }
.fc-tgrid .fc-tag.cur { color: var(--white); }
.fc-tgrid thead th.fc-cur { background: #3d5061; box-shadow: inset 0 -3px 0 var(--accent); }

/* Closed weeks display bank/Sage actuals in place of the stored forecast. */
.fc-tgrid td.fc-actual-col { background: #F4F7F4; }
/* Closed weeks past the 13-week actuals overlay: stored values that the actuals
   sweep fills with real history. Distinct from both the live-actual green and
   the forward-forecast amber — these are facts, just not live-recomputed. */
.fc-tgrid .fc-tag.closed { color: var(--denim-25); }
.fc-tgrid td.fc-closed-col { background: #F7F8F9; }
.fc-tgrid tr.fc-derived-row td.fc-closed-col,
.fc-tgrid tbody tr.subtotal td.fc-closed-col { background: #EFF1F3; }
.fc-tgrid .fc-actual { display: inline-block; padding: 4px 6px; color: var(--primary); font-weight: 600; cursor: help; }
.fc-tgrid td.fc-cur-col { background: #FBFAF5; }
.fc-tgrid tr.fc-derived-row td { background: #F8F9FA; font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--border); }
.fc-tgrid tr.fc-derived-row td.fc-actual-col { background: #EDF3ED; }
.fc-tgrid tbody tr.subtotal td.fc-actual-col { background: #EDF3ED; }
.fc-tgrid tbody tr.subtotal td.fc-cur-col { background: #F5F2E8; }

/* Computed cells (Beginning/Ending Cash, the Other rollup) are read-only —
   styled flat so they don't read as an entry field sitting next to real ones. */
.fc-tgrid td.fc-derived { cursor: default; }
.fc-tgrid tr.fc-oth-head td { background: #F8F9FA; font-weight: 700; color: var(--primary); border-bottom: 1px solid var(--border); }
.fc-tgrid tr.fc-oth-head td.fc-actual-col { background: #EDF3ED; }
.fc-tgrid tr.fc-oth-head td.fc-cur-col { background: #F5F2E8; }

/* Other breakout detail: indented under the rollup, visually subordinate. */
.fc-tgrid tr.fc-oth-row td { background: #FCFCFD; }
.fc-tgrid tr.fc-oth-row td:first-child { background: #FCFCFD; font-weight: 400; padding-left: 20px; }
/* The breakout label cell stays a real table-cell so the frozen-column rule
   above (position: sticky) applies to it. `display: flex` here instead of on
   the inner div pulled the <td> out of table layout — the browser wrapped it in
   an anonymous table-cell and sticky had nothing to slide against, so these
   were the one set of labels that scrolled away with the week columns. */
.fc-tgrid td.fc-oth-label { vertical-align: middle; }
.fc-tgrid .fc-oth-lbl-wrap { display: flex; align-items: center; gap: 4px; }
.fc-tgrid input.fc-othname {
  flex: 1; min-width: 96px; font-family: var(--font-body); font-size: 11px; padding: 3px 5px;
  border: 1px solid transparent; border-radius: 4px; background: transparent; color: var(--mid-text);
}
.fc-tgrid input.fc-othname:hover { border-color: var(--border); background: var(--white); }
.fc-tgrid input.fc-othname:focus { outline: none; border-color: var(--accent); background: var(--white); color: var(--dark-text); }
.fc-tgrid .fc-othdel { color: var(--denim-25); font-size: 14px; line-height: 1; padding: 0 3px; background: none; border: none; cursor: pointer; }
.fc-tgrid .fc-othdel:hover { color: var(--accent); }
.fc-tgrid tr.fc-oth-row input.fc-othnum { width: 84px; font-size: 11.5px; }
.fc-tgrid tr.fc-oth-add td { background: #FCFCFD; border-bottom: 1px solid var(--border); }
.fc-tgrid tr.fc-oth-add td:first-child { background: #FCFCFD; padding-left: 20px; }
.fc-tgrid .fc-linkbtn {
  background: none; border: none; padding: 2px 0; cursor: pointer;
  font-family: var(--font-body); font-size: 10.5px; font-weight: 600; color: var(--primary);
}
.fc-tgrid .fc-linkbtn:hover { color: var(--accent); text-decoration: underline; }
.fc-tgrid .fc-actual.muted { color: var(--denim-50); font-weight: 400; }

.fc-preview { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 16px; overflow: hidden; }
.fc-preview-head {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--section-bg); flex-wrap: wrap;
}
.fc-preview-head .pill { margin-left: 4px; }
.fc-preview-table { font-size: 12px; }
.fc-preview-table thead th { background: var(--denim-50); }
.fc-preview-table tbody tr:nth-child(even) { background: var(--light-bg); }

/* ===================================================================
   Weekly Review — toolbar / toggle / controls
   =================================================================== */
.wk-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.wk-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.wk-toggle button {
  font-family: var(--font-head); font-weight: 600; font-size: 12px;
  background: var(--white); color: var(--mid-text); border: none; cursor: pointer;
  padding: 8px 18px; letter-spacing: 0.02em;
}
.wk-toggle button + button { border-left: 1px solid var(--border); }
.wk-toggle button.active { background: var(--primary); color: var(--white); }
.wk-controls { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.wk-controls label { font-size: 11px; color: var(--mid-text); font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
.wk-controls select { font-family: var(--font-body); font-size: 12px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--white); cursor: pointer; }
.wk-controls .toggle { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-weight: 400; }

.wk-picker-row { display: flex; justify-content: flex-end; margin-bottom: 16px; }
.weekpicker { display: flex; align-items: center; gap: 4px; }
.weekpicker button { background: var(--white); border: 1px solid var(--border); width: 32px; height: 32px; cursor: pointer; font-size: 14px; color: var(--primary); border-radius: 5px; }
.weekpicker button:hover:not(:disabled) { background: var(--section-bg); }
.weekpicker button:disabled { opacity: .4; cursor: default; }
.weekpicker .current { font-family: var(--font-head); font-weight: 600; font-size: 14px; color: var(--primary); padding: 0 14px; min-width: 230px; text-align: center; border: 1px solid var(--border); height: 32px; line-height: 30px; border-radius: 5px; background: var(--section-bg); }

.kpi-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.kpi-strip .kpi { padding: 12px 14px; }
.kpi.green { border-top-color: var(--positive); }
.kpi-strip .val { font-family: var(--font-head); font-weight: 700; font-size: 22px; color: var(--primary); margin-top: 5px; }
.kpi-strip .val.pos { color: var(--positive); }
.kpi-strip .val.neg { color: var(--negative); }
.legend { font-size: 10.5px; color: var(--mid-text); margin-bottom: 14px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.legend strong { color: var(--primary); }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.legend .sw.act { background: var(--white); border: 1px solid var(--border); }
.legend .sw.fcst { background: var(--fcst-bg); border: 1px solid #F0D08A; }
.legend .sw.cur { background: var(--current-col); border: 1px solid var(--denim-50); }

/* ---- Single Week variance table ---- */
table.var { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 22px; font-variant-numeric: tabular-nums; }
table.var thead th { background: var(--primary); color: var(--white); padding: 9px 12px; font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em; text-align: right; }
table.var thead th:first-child { text-align: left; width: 28%; }
/* Weekly Review, Single Week: the five comparison columns are the same width.
   Auto layout sized them to their headers, so "WE 7/24 Forecast" was wide and
   "Variance (%)" narrow, and the eye could not scan across a row. */
table.var.wk-var { table-layout: fixed; }
table.var thead tr.sub th { background: var(--denim-50); font-weight: 400; font-size: 9.5px; text-transform: none; letter-spacing: 0; padding: 4px 12px; }
table.var tbody td { padding: 6px 12px; text-align: right; border-bottom: 1px solid var(--light-bg); }
table.var tbody td:first-child { text-align: left; font-weight: 600; }
table.var tbody tr:nth-child(even) { background: transparent; }
table.var tbody tr.section-head td { background: var(--section-bg); font-family: var(--font-head); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); padding: 9px 12px; border-bottom: none; }
table.var tbody tr.subtotal td { background: #F8F9FA; font-weight: 700; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
table.var tbody tr.indent td:first-child { padding-left: 26px; font-weight: 400; }
table.var tbody tr.proof td { font-size: 11px; color: var(--mid-text); font-style: italic; }
table.var .pos { color: var(--positive); }
table.var .neg { color: var(--negative); }
table.var .muted { color: var(--mid-text); }

/* ---------- AP Forecast (Wave 3.6) ---------- */
/* The projection table is 9 columns and the vendor table 9 — both fit a laptop
   but not a narrow window, so they scroll inside their own box rather than
   crushing the columns (same posture as .wk-hist-wrap on Weekly Review). */
.ap-scroll { overflow-x: auto; }
.ap-scroll table { min-width: 860px; }
table.ap-tbl tfoot td {
  background: #F8F9FA; font-weight: 700; padding: 8px 12px; text-align: right;
  border-top: 2px solid var(--primary); color: var(--primary);
}
table.ap-tbl tfoot td:first-child { text-align: left; }
/* The two legs of the projection are supporting detail, not the headline —
   dimmed so the eye lands on Projected and Delta. */
table.var td.ap-dim { color: var(--mid-text); font-weight: 400; }
table.var tr.ap-cur td { background: #F5F7F9; }
table.var tr.ap-cur td:first-child { font-style: italic; }
.ap-scroll input[type="checkbox"] { cursor: pointer; }
/* Category -> vendor drill inside the DPO panel. */
table.var tr.ap-cat:hover td { background: var(--section-bg); }
.ap-caret { color: var(--accent); font-size: 10px; }
table.var tr.ap-cat-drill td { border-bottom: 1px solid var(--border); }
td.ap-drill-cell { background: #FAFBFC; padding: 10px 14px 4px 26px !important; }
table.var table.ap-subtbl { font-size: 11.5px; margin-bottom: 4px; }
table.var table.ap-subtbl thead th { background: var(--denim-50); padding: 5px 10px; }
table.var table.ap-subtbl tbody td { padding: 4px 10px; }

.detail { margin-top: 8px; margin-bottom: 8px; }
.detail summary { font-family: var(--font-head); font-weight: 600; font-size: 12px; color: var(--primary); cursor: pointer; padding: 10px 14px; background: var(--section-bg); border-radius: 5px; text-transform: uppercase; letter-spacing: 0.04em; }
.detail[open] summary { border-bottom: 1px solid var(--border); border-radius: 5px 5px 0 0; }
.detail .content { background: var(--white); padding: 12px 18px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 5px 5px; }

/* ---- Running History table ---- */
.wk-hist-wrap { overflow-x: auto; }
/* Fixed layout: every week column is the same width regardless of what it
   holds. Auto layout sized each column to its widest cell, so a week showing
   "(1,234)" came out wider than one showing "—" and the strip read as ragged
   instead of as a series. Both tables using this class (Weekly Review history
   and the 13-Week TWCF) emit a <colgroup> with these widths and a matching
   min-width, so a wide window shares the space evenly and a narrow one scrolls
   in .wk-hist-wrap rather than crushing the columns. */
table.history { width: 100%; border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; table-layout: fixed; }
table.history col.wk-lbl { width: 190px; }
table.history col.wk-col { width: 78px; }
table.history thead th { background: var(--primary); color: var(--white); padding: 8px; font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; text-align: right; }
table.history thead th:first-child { text-align: left; }
table.history thead th.current { background: var(--accent); }
table.history thead th.fcst-h { background: #B98A3C; }
table.history thead tr.sub th { background: var(--denim-50); font-weight: 400; font-size: 9.5px; text-transform: none; letter-spacing: 0; padding: 4px 8px; }
table.history thead tr.sub th.current { background: #A52527; }
table.history thead tr.sub th.fcst-h { background: #C9A35B; }
table.history tbody td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--light-bg); }
table.history tbody td:first-child { text-align: left; font-weight: 600; }
table.history tbody tr:nth-child(even) { background: transparent; }
table.history tbody td.current-col { background: var(--current-col); }
table.history tbody td.fcst { background: var(--fcst-bg); font-style: italic; color: #6b4400; }
table.history tbody tr.section-head td { background: var(--section-bg); font-family: var(--font-head); font-weight: 700; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary); padding: 8px 12px; border-bottom: none; }
table.history tbody tr.subtotal td { background: #F8F9FA; font-weight: 700; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
table.history tbody tr.subtotal td.current-col { background: #eef1f4; }
table.history tbody tr.var-strip td { background: #FFF6E6; font-size: 11px; }
table.history tbody tr.var-strip td:first-child { font-style: italic; color: var(--mid-text); font-weight: 400; }
/* WF bank-debit control line (ties categorized outflows to the bank) */
table.var tbody tr.control td, table.history tbody tr.control td { color: var(--mid-text); font-style: italic; }
table.var tbody tr.control td:first-child, table.history tbody tr.control td:first-child { font-style: normal; }

/* AP drill-through: clickable Subs/Vendors values + vendor-detail modal */
.ap-link { cursor: pointer; border-bottom: 1px dotted var(--denim-50); }
.ap-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.ap-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; }
.ap-modal[hidden] { display: none; }
.ap-backdrop { position: absolute; inset: 0; background: rgba(51,68,83,0.45); }
.ap-card { position: relative; background: var(--white); border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  width: min(640px, 92vw); max-height: 86vh; display: flex; flex-direction: column; overflow: hidden; }
.ap-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px;
  background: var(--primary); color: var(--white); border-bottom: 3px solid var(--accent); }
.ap-head h3 { font-family: var(--font-head); font-weight: 600; font-size: 15px; }
.ap-head button { background: none; border: none; color: var(--white); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
#apBody { padding: 16px 18px; overflow: auto; }
.ap-summary { font-size: 12.5px; color: var(--dark-text); margin-bottom: 12px; }
.ap-summary strong { color: var(--primary); }
.ap-note { font-size: 11px; color: var(--mid-text); margin-top: 6px; }
.ap-scroll { max-height: 52vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
table.ap-table { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
table.ap-table thead th { position: sticky; top: 0; background: var(--section-bg); color: var(--primary); text-align: right;
  padding: 7px 12px; font-family: var(--font-head); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
table.ap-table thead th:nth-child(-n+2) { text-align: left; }
table.ap-table tbody td { padding: 5px 12px; text-align: right; border-bottom: 1px solid var(--light-bg); }
table.ap-table tbody td:nth-child(-n+2) { text-align: left; }
table.ap-table tbody td:nth-child(2) { color: var(--mid-text); }
table.ap-table tbody tr:hover { background: var(--light-bg); }
table.ap-table .muted { color: var(--mid-text); text-align: center; }
table.history .pos { color: var(--positive); }
table.history .neg { color: var(--negative); }
table.history .muted { color: var(--mid-text); }

@media (max-width: 900px) { .kpi-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Diagnostics (SQL test) ---------- */
.diag { max-width: 1000px; }
.diag-controls { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 12px; }
.diag-field { display: flex; flex-direction: column; font-size: 13px; font-weight: 600; color: var(--mid-text); gap: 4px; }
.diag-field input { font: inherit; font-weight: 400; padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px; }
.diag-field.diag-limit { width: 110px; }
.diag-field input[type="password"] { min-width: 320px; }
#diagSql { width: 100%; box-sizing: border-box; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; padding: 10px; border: 1px solid var(--border); border-radius: 6px; resize: vertical; }
#diagRun { padding: 8px 20px; background: var(--primary); color: #fff; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; }
#diagRun:hover { background: var(--accent); }
.diag-status { font-size: 13px; color: var(--mid-text); }
.diag-table-wrap { margin-top: 14px; overflow-x: auto; border: 1px solid var(--border); border-radius: 6px; }
table.diag-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.diag-table th, table.diag-table td { border-bottom: 1px solid var(--border); padding: 6px 10px; text-align: left; white-space: nowrap; }
table.diag-table th { background: #f5f6f7; font-weight: 600; color: var(--primary); position: sticky; top: 0; }
table.diag-table tbody tr:hover { background: #fafbfc; }
.diag-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.diag-presets-label { font-size: 13px; font-weight: 600; color: var(--mid-text); }
.diag-preset { padding: 6px 12px; background: #fff; color: var(--primary); border: 1px solid var(--border); border-radius: 6px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.diag-preset:hover { border-color: var(--primary); background: #f5f6f7; }

/* ---- Annual cash flow (months + FY total) ---- */
/* Three month states mirror the weekly grid's vocabulary so the two tabs read
   the same way: closed = green, in-progress = denim, forward = amber. */
table.an-tbl th.an-actual, table.an-tbl td.an-actual { background: #F4F7F4; }
table.an-tbl th.an-mixed,  table.an-tbl td.an-mixed  { background: var(--current-col); }
table.an-tbl th.an-fcst,   table.an-tbl td.an-fcst   { background: #FDF6E9; }
/* The month-state tints are pale washes, and table.var's header text is white —
   so Jan..Dec were white on near-white and effectively unreadable. Header text
   goes dark on every month column and on the FY total; the Line Item header
   keeps the denim/white treatment so the row still reads as a header. The sub
   row is repainted with the same tint (it otherwise inherits table.var's grey)
   so the whole header block carries its month's colour. */
table.an-tbl thead th.an-actual,
table.an-tbl thead th.an-mixed,
table.an-tbl thead th.an-fcst,
table.an-tbl thead th.an-total { color: var(--primary); }
table.an-tbl thead tr.sub th.an-actual { background: #F4F7F4; color: var(--primary); }
table.an-tbl thead tr.sub th.an-mixed  { background: var(--current-col); color: var(--primary); }
table.an-tbl thead tr.sub th.an-fcst   { background: #FDF6E9; color: var(--primary); }
table.an-tbl thead tr.sub th.an-total  { background: var(--section-bg); color: var(--primary); }
table.an-tbl thead tr:first-child th { border-bottom: 2px solid var(--primary); }
/* The empty cell above "Line Item" otherwise keeps table.var's grey sub-row
   background, which reads as a stray block beside the tinted month headers. */
table.an-tbl thead tr.sub th:first-child { background: var(--primary); }
/* This tab's "Actual" columns are a pale green wash, not white as they are on
   the Weekly Review and TWCF strips that share the .sw classes. */
#view-annual .legend .sw.act { background: #F4F7F4; border-color: #C9D6C9; }
/* Equal month columns. Auto layout sized each column to its widest content, so
   the month holding the settled boundary — the only one carrying a "daily thru
   M/D" sub-header — came out noticeably wider than the eleven it is there to be
   compared against. Widths are declared on <col> (annualTable emits the group
   and a matching min-width, so the table scrolls in .gv-wrap rather than being
   squeezed on a narrow screen). */
table.an-tbl { table-layout: fixed; }
table.an-tbl col.an-lbl { width: 210px; }
table.an-tbl col.an-col { width: 88px; }
table.an-tbl thead th:first-child { width: auto; }
table.an-tbl thead th, table.an-tbl tbody td { padding-left: 8px; padding-right: 8px; }
/* The FY total is the column people look for — separate it from the months. */
table.an-tbl th.an-total, table.an-tbl td.an-total {
  border-left: 2px solid var(--primary); font-weight: 700; background: var(--section-bg);
}
table.an-tbl thead tr.sub th { font-size: 9.5px; font-weight: 600; padding-top: 2px; }
table.an-tbl .an-wk { font-weight: 400; opacity: .75; font-size: 9px; line-height: 1.3; white-space: normal; }
table.an-tbl tbody tr.subtotal td { font-weight: 700; border-top: 1px solid var(--border); }
table.an-tbl tbody tr.section-head td {
  background: var(--section-bg); color: var(--primary); font-weight: 700;
  font-family: var(--font-head); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.04em;
}

/* ---- Forecast notes (append-only) ---- */
/* The Notes row sits under Total Outflows; keep it visually quieter than the
   money rows so it reads as annotation, not another line item. */
table.fc-tgrid tr.fc-note-row td { border-top: 2px solid var(--border); }
.fc-note-cell { padding: 3px 6px !important; }
.fc-note-btn {
  width: 100%; background: none; border: 1px dashed var(--border); border-radius: 4px;
  color: var(--dark-text); font: inherit; font-size: 11px; text-align: left;
  padding: 4px 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fc-note-btn:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
.fc-note-add { color: var(--mid-text); }
.fc-note-thread { max-height: 40vh; overflow-y: auto; margin-bottom: 12px; }
.fc-note-entry { border-left: 3px solid var(--border); padding: 6px 0 6px 10px; margin-bottom: 10px; font-size: 12.5px; white-space: pre-wrap; }
.fc-note-meta { font-size: 10.5px; color: var(--mid-text); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
.fc-note-latest { font-size: 12.5px; white-space: pre-wrap; }
#noteBody textarea {
  width: 100%; font: inherit; font-size: 12.5px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 6px; resize: vertical;
}

/* ---- Actuals sweep panel (Diagnostics) ---- */
/* Week separator inside the stored-vs-actual table: the rows below it are that
   week's drifting line items, so it reads as a group header, not a data row. */
table.var tr.as-wk td {
  background: #F4F5F6; color: var(--primary);
  border-top: 2px solid var(--border); font-weight: 600;
}
.banner.as-ok { background: #E4F0E5; color: #1F5C23; border: 1px solid #A9CFAC; }

/* ---- Gold cross-check panel (Diagnostics) ---- */
.gold-var { margin-top: 22px; }
.gv-wrap { overflow-x: auto; }

/* Earnout GL cross-check panel. table.var right-aligns every tbody cell, which
   is right for money and wrong for the GL descriptions and raw wire text this
   panel leans on — .ec-txt puts those back to the left. */
.ec-sub { font-family: var(--font-head); font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--primary); margin: 18px 0 8px; }
table.var td.ec-txt { text-align: left; font-weight: 400; }
.ec-wire { font-size: 10px; color: var(--mid-text); word-break: break-word; }
/* Cutoff suggestions on the baseline panel — one button per audited write. */
.bl-pick, .an-pick { font-size: 10.5px; padding: 4px 8px; white-space: nowrap; }
table.var .caution-txt { color: #B07A00; font-weight: 600; }   /* readable amber on white */
table.var tbody tr.current-col td { background: var(--current-col); }
table.var tbody tr.muted td { color: var(--mid-text); font-style: italic; font-weight: 400; }
.legend .caution-txt { color: #B07A00; font-weight: 600; }
/* The shared .legend is a flex row (for colour swatches); this one is prose, so
   it must lay out as a normal paragraph or every phrase becomes a flex item. */
.gold-var .legend { display: block; line-height: 1.65; max-width: 96ch; }
.gold-var table.var tbody tr.muted td { text-align: left; }
.gold-var table.var tbody tr.muted td:first-child { width: auto; }
/* Terms opportunity — a negotiating target, so it reads as a figure to act on
   rather than a variance. Deliberately not green: it is not money earned. */
.ap-opp { color: var(--primary); }

/* Plan vs Forecast — closed weeks tinted like the actual columns elsewhere. */
table.var tbody tr.an-closed td { background: #F4F7F4; }