/* finance.css — Finance tab. Uses the expense app's existing CSS variables, so
   it follows the light/dark theme without any extra work. */

/* A flex child defaults to min-width:auto, so a wide table makes the card grow
   instead of scrolling. The app only zeroes this inside a mobile media query,
   so do it here for every breakpoint or the budget grid can never scroll. */
.fin-wrap { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fin-wrap > * { min-width: 0; max-width: 100%; }

.fin-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fin-tabs { display: inline-flex; background: var(--bg, #f4f5f7); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.fin-tab { border: 0; background: none; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600;
           padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.fin-tab.active { background: var(--white); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

.fin-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; min-width: 0; }
.fin-card.fin-scroll { padding: 0; }
.fin-org { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.fin-h { font-size: 14px; font-weight: 700; color: var(--text); }
.fin-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; line-height: 1.5; }
.fin-sub { font-size: 11px; color: var(--text-muted); }
.fin-empty { padding: 28px; text-align: center; color: var(--text-muted); font-size: 13px;
             border: 1px dashed var(--border); border-radius: 10px; }
.fin-error { border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent);
             color: var(--text); border-radius: 10px; padding: 12px 14px; font-size: 13px; }

.fin-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.fin-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.fin-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-muted); }
.fin-field select, .fin-field input {
  font-size: 13px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--white); color: var(--text); min-width: 190px;
}
.fin-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 10px 0; color: var(--text); }

/* ── tables ─────────────────────────────────────────────────────────────── */
.fin-scroll { overflow-x: auto; max-width: 100%; min-width: 0; -webkit-overflow-scrolling: touch; }

/* The editable budget/forecast grid scrolls inside its own box rather than growing
   to its full height. It was ~1,270px tall, so its horizontal scrollbar sat some
   770px below the fold: to move the months left or right you had to scroll the whole
   page to the bottom, drag, then scroll back up. Capping the height keeps that
   scrollbar — and the sticky header — on screen while you work. */
.fin-scroll.fin-grid-scroll {
  overflow: auto;
  /* A plain pixel cap. The first attempt used calc(100vh - 250px), which resolves to
     0 wherever the viewport height is not yet known and collapses the whole grid. */
  max-height: 640px;
  /* Stop a horizontal trackpad swipe escaping to the page, where the browser turns it
     into a back-navigation gesture — that is the "pulls across and springs back". */
  overscroll-behavior-x: contain;
  scroll-padding-left: 268px;   /* the three sticky columns: 30 + 48 + 190 */
}

/* An always-present scrollbar, because an overlay one that fades out gives no hint
   the months continue past the right edge. Styling ::-webkit-scrollbar is what makes
   Chrome drop the overlay bar and lay out a real one — but Chrome ignores those rules
   entirely if scrollbar-color or scrollbar-width is also set, so the standard
   properties are kept behind an @supports for Firefox only. */
.fin-grid-scroll::-webkit-scrollbar { height: 14px; width: 14px; }
.fin-grid-scroll::-webkit-scrollbar-track { background: var(--surface); border-radius: 7px; }
.fin-grid-scroll::-webkit-scrollbar-thumb {
  background: var(--navy, #1f3864); border-radius: 7px; border: 3px solid var(--white);
}
.fin-grid-scroll::-webkit-scrollbar-thumb:hover { background: var(--text); }
@supports not selector(::-webkit-scrollbar) {
  .fin-grid-scroll { scrollbar-width: auto; scrollbar-color: var(--navy, #1f3864) var(--surface); }
}

.fin-table { width: 100%; border-collapse: collapse; font-size: 12px; }

/* position:sticky on a table cell does not work under border-collapse:collapse in
   Chrome — the cell reports itself as sticky and then scrolls away with the rest of
   the row, which is why the Code and Account columns did not stay put. Separate
   borders are the documented requirement; the row rule is redrawn with an inset
   shadow so nothing doubles up at the edges. */
.fin-table.fin-grid { border-collapse: separate; border-spacing: 0; }
.fin-grid th, .fin-grid td { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border); }

.fin-table th, .fin-table td { padding: 5px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.fin-table tbody tr { position: relative; z-index: 0; }
/* The app injects <style> blocks at runtime, which land after this file and win
   at equal specificity, so the sticky header is scoped twice over to stay navy
   and stay above the rows it is scrolling under.
   The !important on the three paint properties is not decoration: core/ui/theme.css
   carries `table th { background: transparent !important; color: var(--muted)
   !important; border-bottom: 1px solid var(--line) !important }`, which no amount of
   specificity beats. It left the column labels see-through, so the rows scrolling
   underneath showed straight through them and the frozen Code/Account headers had the
   month labels sliding visibly behind them. */
.fin-wrap .fin-table thead th,
.fin-modal .fin-table thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--navy, #1f3864) !important; color: #fff !important;
  font-size: 11px; font-weight: 600; text-align: left;
  text-transform: none; letter-spacing: 0; padding: 5px 8px;
  border-bottom: 0 !important;
}
.fin-wrap .fin-table thead th.num,
.fin-modal .fin-table thead th.num { text-align: right; }
.fin-table th.num, .fin-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.fin-table td.neg { color: var(--danger); }
.fin-table tr.sec td { background: color-mix(in srgb, var(--navy, #1f3864) 12%, transparent);
                       font-weight: 700; font-size: 11px; letter-spacing: .04em; color: var(--text); }
.fin-table tr.tot td { font-weight: 700; background: color-mix(in srgb, var(--text) 5%, transparent); }
.fin-table tr.gp td  { font-weight: 700; background: color-mix(in srgb, var(--navy, #1f3864) 12%, transparent); }
.fin-table tr.net td, .fin-table tr.net td.num { font-weight: 700; background: var(--navy, #1f3864); color: #fff; }
.fin-table tr.net td.neg { color: #ffb4b4; }
.fin-table td.acct { white-space: normal; min-width: 170px; }

.fin-warn { font-size: 11px; color: var(--text-muted); border: 1px solid var(--border);
            border-radius: 8px; padding: 10px 14px; }
.fin-warn ul { margin: 6px 0 0; padding-left: 18px; }
.fin-warn li { margin: 2px 0; }

/* ── budget grid ────────────────────────────────────────────────────────── */
.fin-grid td { padding: 2px 4px; }

/* Code and Account stay put while the twelve months scroll sideways. Sticky
   cells must be opaque, and each row type carries its own background. */
.fin-grid th:nth-child(1), .fin-grid td:nth-child(1) { position: sticky; left: 0;    width: 30px; }
.fin-grid th:nth-child(2), .fin-grid td:nth-child(2) { position: sticky; left: 30px; width: 48px; }
.fin-grid th:nth-child(3), .fin-grid td:nth-child(3) { position: sticky; left: 78px; min-width: 190px; }
.fin-grid td:nth-child(-n+3) { z-index: 1; background: var(--white); }
.fin-grid tr.tot td:nth-child(-n+3) { background: #f2f2f2; }
.fin-grid tr.net td:nth-child(-n+3) { background: var(--navy, #1f3864); color: #fff; }
.fin-wrap .fin-grid thead th:nth-child(-n+3) { z-index: 6; }
/* The divider down the right of the sticky Account column. It has to carry the row
   rule too, because the shared `.fin-grid td` shadow above is overridden here. */
.fin-grid td:nth-child(3) { box-shadow: inset 0 -1px 0 var(--border), 1px 0 0 var(--border); }
.fin-grid th.yr, .fin-grid td.yr { border-left: 2px solid var(--border); }
.fin-grid th .hint { font-weight: 400; opacity: .75; font-size: 9px; }
.fin-cell { width: 72px; padding: 4px 6px; font-size: 12px; text-align: right;
            border: 1px solid transparent; border-radius: 5px; background: transparent;
            color: var(--text); font-variant-numeric: tabular-nums; }
.fin-cell:hover  { border-color: var(--border); }
.fin-cell:focus  { border-color: var(--navy, #1f3864); background: var(--white); outline: none; }
/* Tabbing across seventeen columns, the cell you are on has to be obvious. The rule
   above removes the outline, so the ring is put back deliberately here. */
.fin-grid .fin-cell:focus {
  outline: 2px solid var(--navy, #1f3864);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--navy, #1f3864) 8%, var(--white));
  position: relative;
  z-index: 2;
}
/* Months already reported are actuals, not a forecast. They are rendered as readonly
   inputs so the column widths and the tabular alignment stay identical to the editable
   months, then painted flat and muted so it is obvious they are not yours to change.
   Tab skips them (tabindex="-1") and the arrow-key navigation excludes them.
   The selector is long and the !important unavoidable, both for the same reason:
   core/ui/theme.css carries
     input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"])
   with !important on background, border, colour and border-radius — that is what gives
   the editable cells their pill. Four :not()s score as four classes, so that selector
   is (0,4,1); anything shorter than the five class-level parts below loses to it even
   with !important. Do not shorten this. */
.fin-wrap .fin-grid td.num .fin-cell[readonly],
.fin-wrap .fin-grid td.num .fin-cell[readonly]:hover,
.fin-wrap .fin-grid td.num .fin-cell[readonly]:focus {
  background: color-mix(in srgb, var(--text) 5%, transparent) !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  color: var(--text-muted) !important;
  cursor: default;
  outline: none !important;
  box-shadow: none !important;
}

.fin-yr { font-weight: 700; width: 88px; }
.fin-x, .fin-copy, .fin-clear {
  border: 1px solid var(--border); background: var(--white); color: var(--text-muted);
  border-radius: 5px; width: 22px; height: 22px; line-height: 1; cursor: pointer; font-size: 13px;
}
.fin-x:hover { color: var(--danger); border-color: var(--danger); }
.fin-copy:hover { color: var(--navy, #1f3864); border-color: var(--navy, #1f3864); }
.fin-clear:hover { color: var(--gold, #c8a227); border-color: var(--gold, #c8a227); }
.fin-rowbtns { white-space: nowrap; }
.fin-rowbtns .fin-clear { margin-left: 4px; }

/* the hint under a settings input */
.fin-field .fin-sub { max-width: 520px; white-space: normal; line-height: 1.5; }
.fin-field code { font-size: 11px; background: color-mix(in srgb, var(--text) 7%, transparent);
                  padding: 1px 4px; border-radius: 4px; }

/* ── wizard ─────────────────────────────────────────────────────────────── */
.fin-wiz-controls { align-items: flex-end; margin: 12px 0; }
.fin-wiz-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.fin-wiz-list tr.off td { opacity: .45; }
.fin-wiz-foot { margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.fin-chip { display: inline-block; font-size: 10px; font-weight: 600; padding: 1px 6px;
            border-radius: 999px; margin-right: 6px; }
.fin-chip.warn   { background: color-mix(in srgb, var(--gold, #c8a227) 25%, transparent); color: var(--text); }
.fin-chip.new    { background: color-mix(in srgb, var(--navy, #1f3864) 18%, transparent); color: var(--text); }
.fin-chip.lapsed { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--text); }

/* ── modal ──────────────────────────────────────────────────────────────── */
.fin-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 900;
                      display: flex; align-items: center; justify-content: center; padding: 16px; }
.fin-modal { background: var(--white); border-radius: 12px; width: min(920px, 100%);
             max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,.3); }
.fin-modal-head { display: flex; align-items: center; justify-content: space-between;
                  padding: 14px 16px; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text); }
.fin-modal-body { padding: 14px 16px; overflow-y: auto; }
.fin-modal-foot { display: flex; justify-content: flex-end; gap: 8px;
                  padding: 12px 16px; border-top: 1px solid var(--border); }

/* ── pinned save bar ────────────────────────────────────────────────────── */
.fin-savebar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 800;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px;
  background: var(--white); border: 1px solid var(--border);
  box-shadow: 0 8px 28px rgba(0,0,0,.22); font-size: 13px; color: var(--text);
}
@media (max-width: 900px) {
  .fin-savebar { bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 720px) {
  .fin-field select, .fin-field input { min-width: 0; width: 100%; }
  .fin-row { flex-direction: column; align-items: stretch; }
}