/* banana_dashboard — view α styling.
   Visual style locked in UX-A_visual_style_v0.1.md (decisions A · A · A):
   - Classic accounting palette (red over / green under)
   - System fonts + tabular-nums on tables
   - Compact density: .38rem padding, .81rem font
*/

:root {
  --bg: #fafaf7;
  --panel: #fff;
  --border: #e3e3df;
  --border-strong: #c8c6bd;
  --ink: #1f1f1c;
  --muted: #777;
  --label-bg: #f4f3ef;
  --over: #c92a2a;
  --over-bg: #fff5f5;
  --under: #2b8a3e;
  --under-bg: #ebfbee;
  --neutral: #555;
  --future-bg: #f7f7f3;
  --today: #1864ab;
  --today-bg: #e7f0fa;
  --group-bg: #eeece2;
  --subaccount-bg: #f4f3ed;  /* TB-005c Item 1 — subtler than group, distinct from white */
  --warn: #b54708;
  --warn-bg: #fffbf0;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  line-height: 1.45;
}

a { color: var(--today); text-decoration: none; }
a:hover { text-decoration: underline; }

.nav {
  background: #1f1f1c;
  color: #f4f3ef;
  padding: .65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .9rem;
}
.nav .brand { font-weight: 600; letter-spacing: .3px; }
.nav .user { color: #c8c6bd; font-size: .82rem; }
.nav .user a { color: #c8c6bd; }
.linklike {
  background: none; border: none; color: inherit; font: inherit;
  cursor: pointer; padding: 0; text-decoration: underline;
}

.container { max-width: 1500px; margin: 0 auto; padding: 1.2rem 1.5rem 3rem; }
h1.page-title { font-size: 1.4rem; margin: .8rem 0 1rem; font-weight: 600; }
.muted { color: var(--muted); font-size: .88rem; }

/* Global controls strip (year + freshness) */
.global-controls {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.global-controls label { color: var(--muted); font-size: .85rem; }
.global-controls select {
  padding: .35rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: #fff;
  font: inherit;
}
.freshness {
  margin-left: auto;
  color: var(--muted);
  font-size: .8rem;
}
.freshness .dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--under);
  border-radius: 50%;
  margin-right: .4rem;
  vertical-align: middle;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border-strong);
  margin-bottom: 1.2rem;
}
.tabs .tab {
  padding: .7rem 1.4rem;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  font: inherit;
  color: var(--muted);
  font-weight: 500;
  margin-bottom: -2px;
  text-decoration: none;
}
.tabs .tab:hover { color: var(--ink); text-decoration: none; }
.tabs .tab.active {
  color: var(--ink);
  border-bottom-color: var(--today);
  font-weight: 600;
}
.tab-panel { display: block; }

/* Panels */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1rem;
}
.panel h2 { margin: 0 0 .8rem; font-size: 1.05rem; font-weight: 600; }

/* Control strip */
.control-strip {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
  padding: .65rem .8rem;
  background: var(--label-bg);
  border-radius: 6px;
  margin-bottom: .8rem;
  font-size: .85rem;
}
.control-strip label { color: var(--muted); }
.control-strip select {
  padding: .25rem .55rem;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: #fff;
  font: inherit;
}
.pill {
  display: inline-block;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border-strong);
  font-size: .82rem;
  cursor: pointer;
  user-select: none;
}
.pill.active { background: var(--today); color: #fff; border-color: var(--today); }
.toggle-row {
  display: flex; gap: 1rem;
  font-size: .82rem;
  align-items: center;
  margin-left: auto;
}
.toggle-row label { display: flex; gap: .35rem; align-items: center; cursor: pointer; color: var(--muted); }

/* Matrix */
.scroll-x { overflow-x: auto; }
table.alpha-matrix {
  /* `border-collapse: separate` (vs collapse) is required for `position: sticky`
     to actually pin on Safari/macOS — collapsed borders share storage between
     adjacent cells and break the sticky boxing model. Bottom borders kept via
     `box-shadow inset` per cell so the visual matches the previous collapsed look.
     TB-005c Item 2a. */
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .81rem;
  font-variant-numeric: tabular-nums;
}
table.alpha-matrix th,
table.alpha-matrix td {
  padding: .38rem .55rem;
  text-align: right;
  box-shadow: inset 0 -1px 0 #f0efea;
  white-space: nowrap;
}
table.alpha-matrix th {
  background: var(--label-bg);
  font-weight: 600;
  position: sticky;
  top: 0;
  cursor: pointer;
  user-select: none;
}
table.alpha-matrix th .sort-mark {
  color: var(--muted); font-weight: 400; margin-left: .2rem; font-size: .75rem;
}
table.alpha-matrix th.left,
table.alpha-matrix td.left { text-align: left; }
table.alpha-matrix td.code {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .78rem;
}
table.alpha-matrix td.desc { font-weight: 500; }

tr.group td {
  background: var(--group-bg);
  font-weight: 700;
  border-top: 1px solid var(--border-strong);
}
tr.inactive td { opacity: .4; }

td.over   { background: var(--over-bg);   color: var(--over);   font-weight: 600; }
td.under  { background: var(--under-bg);  color: var(--under);  font-weight: 600; }
td.zero   { color: #bbb; }
td.future { background: var(--future-bg); color: #aaa; }
td.today-col, th.today-col { background: var(--today-bg); }
td.ytd    { background: #fffbe6; font-weight: 600; }
th.ytd    { background: #fff6cc; }

.hoverable { cursor: help; border-bottom: 1px dotted transparent; }
.hoverable:hover { border-bottom-color: var(--muted); }

/* Legend */
.legend {
  margin-top: .6rem;
  font-size: .76rem;
  color: var(--muted);
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
}
.legend span { display: inline-flex; align-items: center; gap: .35rem; }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 2px; }
.swatch-over   { background: var(--over-bg);   border: 1px solid var(--over); }
.swatch-under  { background: var(--under-bg);  border: 1px solid var(--under); }
.swatch-future { background: var(--future-bg); }
.swatch-today  { background: var(--today-bg); }
.swatch-ytd    { background: #fffbe6; border: 1px solid #f0d98a; }
.swatch-group  { background: var(--group-bg); }

/* Alerts */
.alert-note {
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  padding: .7rem 1rem;
  margin: .8rem 0;
  font-size: .9rem;
  color: var(--warn);
  border-radius: 4px;
}
.alert-note strong { font-weight: 700; }

/* View β — chart container */
.chart-wrap {
  background: #fff;
  padding: .8rem;
  border-radius: 6px;
}
.chart-wrap svg { display: block; }

/* Projection cells (current month + future) get italic + dimmer text +
   a leading `~` (rendered in the template). Tooltip on hover via title. */
td.projection {
  font-style: italic;
}

/* TB-005c Item 2a — sticky LEFT (Category) AND RIGHT (YTD) columns.
 *
 * Rationale: at iPad / Mac landscape widths the full-year matrix is wider
 * than the viewport. Pinning both the row label AND the annual roll-up
 * means the eye never loses orientation.
 *
 * Each sticky cell needs:
 *   - explicit `left:` or `right:` offset (cumulative)
 *   - `min-width` so offsets stay correct across rows
 *   - a non-transparent background (scrolling content otherwise bleeds through)
 *   - z-index above non-sticky body cells
 *
 * Box-shadow on the inner edge of each sticky band marks the scrollable
 * region. NOTE: `box-shadow: inset 0 -1px` on every cell provides the
 * row-bottom borders (replaces the missing `border-collapse: collapse`).
 */

/* --- LEFT-sticky: Category (col 1 in α; Group + Description in β) --- */

.scroll-x table.alpha-matrix th.col-desc,
.scroll-x table.alpha-matrix td.desc {
  position: sticky;
  left: 0;
  min-width: 200px;
  background: #fff;
  z-index: 2;
  /* right-edge accent indicating the scrollable region begins here */
  box-shadow: inset 0 -1px 0 #f0efea, 4px 0 6px -3px rgba(0, 0, 0, .15);
}
.scroll-x table.alpha-matrix th.col-desc { z-index: 5; }

/* α's Code col is gone (TB-005c Item 2b). β still uses col-code for the
   Group code; pin it too. */
.scroll-x table.alpha-matrix th.col-code,
.scroll-x table.alpha-matrix td.code {
  position: sticky;
  left: 0;
  min-width: 90px;
  background: #fff;
  z-index: 2;
  box-shadow: inset 0 -1px 0 #f0efea;
}
.scroll-x table.alpha-matrix th.col-code { z-index: 5; }
/* When both col-code AND col-desc are present (β tables), shift desc right by code width */
.scroll-x table.alpha-matrix th.col-code + th.col-desc,
.scroll-x table.alpha-matrix td.code + td.desc {
  left: 90px;
}

/* Group-row sticky cells keep the group background instead of plain white. */
.scroll-x table.alpha-matrix tr.group td.code,
.scroll-x table.alpha-matrix tr.group td.desc,
.scroll-x table.alpha-matrix tr.group td.opening {
  background: var(--group-bg);
}
.scroll-x table.alpha-matrix tr.drill-row td.code,
.scroll-x table.alpha-matrix tr.drill-row td.desc,
.scroll-x table.alpha-matrix tr.drill-row td.opening {
  background: var(--subaccount-bg);
}

/* β balances has a sticky Opening column (3rd sticky col on left). */
.scroll-x table.alpha-matrix th.col-opening,
.scroll-x table.alpha-matrix td.opening {
  position: sticky;
  left: 290px;  /* 90px (code) + 200px (desc) */
  min-width: 90px;
  background: #fff;
  z-index: 2;
  box-shadow: inset 0 -1px 0 #f0efea, 4px 0 6px -3px rgba(0, 0, 0, .15);
}
.scroll-x table.alpha-matrix th.col-opening { z-index: 5; }

/* β movements has a sticky Year column (also 3rd sticky col, position-wise
   identical to Opening — different table, same offset). TB-005c Item 3. */
.scroll-x table.alpha-matrix th.col-year-mov,
.scroll-x table.alpha-matrix td.year-mov {
  position: sticky;
  left: 290px;
  min-width: 90px;
  background: #fff;
  z-index: 2;
  font-weight: 600;
  box-shadow: inset 0 -1px 0 #f0efea, 4px 0 6px -3px rgba(0, 0, 0, .15);
}
.scroll-x table.alpha-matrix th.col-year-mov { z-index: 5; background: #fff6cc; }

/* --- RIGHT-sticky: YTD trio (BU, AC, Δ). Three columns pinned to the
 * right edge. Cumulative `right:` from the rightmost column inward. The
 * YTD background was already yellow (`#fffbe6`); keep that as the sticky
 * background. Left-edge shadow marks the scrollable region's right edge. */

.scroll-x table.alpha-matrix th.ytd,
.scroll-x table.alpha-matrix td.ytd {
  position: sticky;
  background: #fffbe6;
  z-index: 2;
  min-width: 80px;
}
.scroll-x table.alpha-matrix th.ytd { background: #fff6cc; z-index: 5; }

/* nth-of-type(N from-end) doesn't exist; cumulative right offsets are
 * computed by walking the trio in source order. The YTD Δ is rightmost,
 * then AC, then BU. */
.scroll-x table.alpha-matrix th.ytd:nth-last-of-type(1),
.scroll-x table.alpha-matrix td.ytd:nth-last-of-type(1) {
  right: 0;
  /* left-edge shadow on the FIRST of the three (leftmost YTD col) — but
     we apply it to the leftmost YTD via :nth-last-of-type(3) below. */
}
.scroll-x table.alpha-matrix th.ytd:nth-last-of-type(2),
.scroll-x table.alpha-matrix td.ytd:nth-last-of-type(2) {
  right: 80px;
}
.scroll-x table.alpha-matrix th.ytd:nth-last-of-type(3),
.scroll-x table.alpha-matrix td.ytd:nth-last-of-type(3) {
  right: 160px;
  /* Left-edge shadow on the leftmost YTD col, marking the boundary of
     the right-sticky band. */
  box-shadow: inset 0 -1px 0 #f0efea, -4px 0 6px -3px rgba(0, 0, 0, .15);
}

/* TB-005b Item 5 — drill toggle + per-account drill rows */
button.drill-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  color: var(--muted);
  padding: 0 .3rem 0 0;
  width: 1.2em;
  text-align: left;
}
button.drill-toggle:hover { color: var(--ink); }

tr.drill-row td {
  background: var(--subaccount-bg);  /* TB-005c Item 1 */
  font-size: .78rem;
  color: #444;
}
tr.drill-row td.code,
tr.drill-row td.opening {
  background: var(--subaccount-bg);
}
tr.drill-row td.drill-indent {
  padding-left: 1.6rem;  /* visually nest under the parent group row */
  font-family: ui-monospace, SFMono-Regular, monospace;
}
/* Left border accent on first cell to chain subaccount rows visually
   under their parent group row. */
tr.drill-row td:first-child {
  border-left: 3px solid var(--border-strong);
}

/* Admin panel */
.admin-mock {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem;
  margin-top: 1rem;
}
.admin-mock .admin-btn {
  display: inline-block;
  padding: .5rem 1rem;
  background: var(--today);
  color: #fff;
  border: none;
  border-radius: 4px;
  font: inherit;
  margin-right: .5rem;
  cursor: pointer;
}
.admin-mock .admin-btn:hover { filter: brightness(1.05); }
.admin-mock .admin-btn:disabled { opacity: .5; cursor: wait; }
.admin-mock .admin-btn.secondary { background: #6c757d; }
.admin-mock .admin-log {
  background: #1f1f1c;
  color: #c8e6c9;
  padding: .8rem 1rem;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: .78rem;
  margin-top: .8rem;
  white-space: pre-line;
  min-height: 6em;
}
.admin-list {
  font-size: .88rem;
  color: var(--muted);
  list-style: none;
  padding-left: 0;
}
.admin-list li { padding: .15rem 0; }

/* Mobile reflow — wireframe note: 36-column matrix becomes cards.
   In v1.0 we keep the table scrollable; the responsive baseline is just
   horizontal scroll + smaller controls. Full card layout is parked. */
@media (max-width: 720px) {
  .container { padding: .8rem; }
  .global-controls { font-size: .8rem; }
  .freshness { width: 100%; margin-left: 0; }
  table.alpha-matrix { font-size: .76rem; }
  table.alpha-matrix th,
  table.alpha-matrix td { padding: .3rem .4rem; }
}