/* GroupFin structural styles. All colour comes from industry-theme.css
   tokens - no raw hex in this file. */

.amt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Branding: navbar logo + print-only brand line ─────────────────────── */
.brand-logo { max-height: 26px; max-width: 140px; display: block; }
.print-brand { display: none; } /* print.css shows it */

/* ── Navbar dropdowns: the theme keeps the light panel, but inside the dark
   navbar Bootstrap's dark mode paints item text light too - light-on-light.
   Re-assert ink on the theme panel via Bootstrap's own variables. ────────── */
nav.navbar .dropdown-menu {
  --bs-dropdown-color: var(--color-text);
  --bs-dropdown-link-color: var(--color-text);
  --bs-dropdown-link-hover-color: var(--color-text);
  --bs-dropdown-link-active-color: var(--color-bg);
  --bs-dropdown-link-active-bg: var(--color-accent-700);
  --bs-dropdown-header-color: var(--color-neutral-700);
  --bs-dropdown-divider-bg: var(--color-divider);
}
/* Dark navbar fills unchecked boxes with the dark body colour, which on this
   light panel reads as a solid black square. Bootstrap declares the variable
   on the input itself, so the override has to land there too - setting it on
   the menu is shadowed. Checked still paints accent. */
nav.navbar .dropdown-menu .form-check-input {
  --bs-form-check-bg: transparent;
}
nav.navbar .dropdown-menu .form-check-input:not(:checked) {
  border-color: rgba(29, 31, 32, 0.45);
}

/* ── Navbar subsidiary picker ──────────────────────────────────────────── */
/* Sized to the longest subsidiary name, capped to the viewport. */
.subs-menu {
  width: max-content;
  min-width: 320px;
  max-width: min(560px, calc(100vw - 2rem));
}
.subs-menu-list { max-height: 300px; overflow-y: auto; scrollbar-gutter: stable; }
.subs-menu .form-check-label { white-space: nowrap; }

/* ── Statement tables (weights and rhythm; colours live in the theme) ──── */
.table-statement th, .table-statement td { padding: .3rem .6rem; }
.table-statement td.num, .table-statement th.num { text-align: right; }
.table-statement tr.row-header td { font-weight: 600; padding-top: .8rem; text-transform: uppercase; font-size: .74rem; letter-spacing: .1em; }
.table-statement tr.row-subtotal td { border-top: 1px solid var(--color-divider); font-weight: 600; }
.table-statement tr.row-total td { font-weight: 700; }
.table-statement a.drill { text-decoration: none; color: inherit; border-bottom: 1px dotted; }
.table-statement td.indent-1 { padding-left: 1.6rem; }

/* Hide/show the month columns via toggle */
.hide-month-cols .col-month { display: none; }

/* ── Wizard steps: geometry only (square skin is themed) ───────────────── */
.wizard-steps { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.wizard-steps .step { padding: .25rem .75rem; font-size: .85rem; font-family: var(--font-heading); font-weight: 600; }

/* ── Import preview grid ───────────────────────────────────────────────── */
.preview-grid { font-size: .78rem; }
.preview-grid th, .preview-grid td { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.preview-grid thead th { position: sticky; top: 0; background: var(--color-bg); }

/* ── Mapping table ─────────────────────────────────────────────────────── */
.mapping-table select { min-width: 130px; font-size: .78rem; }
.mapping-table td { vertical-align: middle; }
.suggestion-chip { cursor: pointer; }

/* ── Status chips ──────────────────────────────────────────────────────── */
.status-chip { min-width: 92px; display: inline-block; text-align: center; }

/* ── Schedule numeric inputs ───────────────────────────────────────────── */
.sched-input { text-align: right; font-variant-numeric: tabular-nums; min-width: 90px; }

/* ── Forecast grid: twelve months of inputs across one page ────────────── */
/* A fixed minimum on each input forces the table wider than the viewport and
   the whole grid scrolls sideways. Letting them flex to their column keeps
   all twelve months on screen at any point in the year - early on there are
   many inputs and few actuals, later the reverse, and both fit. */
.forecast-grid td, .forecast-grid th { padding: .2rem .35rem; }
.forecast-grid .sched-input {
  min-width: 0;
  width: 100%;
  font-size: .72rem;
  padding: .1rem .25rem;
}
.forecast-grid .month-actual { background: var(--color-surface); }

/* ── Schedules: how much of the GL line is still unallocated ───────────── */
.sched-allocation {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  min-width: 260px;
}

/* ── Trial balance: which month is this upload for? ────────────────────── */
/* A TB export names its month nowhere, so the banner has to. The accent rule
   down the left edge is the same device the close-out strip uses for "this is
   the thing you are working on". */
.tb-period-head {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-accent);
}
.tb-period-head .dash-h1 { font-size: 1.9rem; }

.tb-month-strip { display: flex; flex-wrap: wrap; gap: 4px; }
.tb-month {
  position: relative;
  min-width: 62px;
  padding: 6px 8px 5px;
  text-align: center;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  line-height: 1.1;
}
.tb-month:hover, .tb-month:focus-visible {
  color: var(--color-text);
  outline: 2px solid var(--color-accent-900);
  outline-offset: 1px;
}
.tb-month-name { display: block; font-family: var(--font-heading); font-weight: 600; font-size: .82rem; }
.tb-month-year { display: block; font-size: .68rem; color: rgba(29, 31, 32, 0.55); }
.tb-month-flag { position: absolute; top: 2px; right: 3px; font-size: .6rem; opacity: .75; }
/* Loaded reads as filled; the current month keeps the heavy accent edge so it
   stays findable whether or not it has data yet. */
.tb-month.is-loaded { background: var(--color-accent-400); }
.tb-month.is-locked { color: rgba(29, 31, 32, 0.5); border-style: dashed; }
.tb-month.is-current {
  border-color: var(--color-accent-900);
  box-shadow: inset 0 0 0 2px var(--color-accent-900);
}

/* ── Side-by-side at scale ─────────────────────────────────────────────── */
.table-sticky-first thead th:first-child,
.table-sticky-first tbody td:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--color-bg);
  box-shadow: 1px 0 0 var(--color-divider);
}
.table-sticky-first thead th:first-child { z-index: 3; }
.table-compare { font-size: .78rem; }
.table-compare th, .table-compare td { padding: .25rem .5rem; }
.table-compare th.entity-col { min-width: 84px; }

/* ── Charts (geometry; palette comes from ChartSvg + theme) ────────────── */
.chart { width: 100%; height: auto; display: block; color: var(--color-text); }
.chart-donut { max-width: 170px; margin: 0 auto; }
.chart-spark { width: 120px; height: 30px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: center; margin-top: .35rem; }
.chart-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.chart-swatch { width: 16px; height: 2px; background: var(--swatch); display: inline-block; }
.chart-swatch.dashed { background: repeating-linear-gradient(90deg, var(--swatch) 0 4px, transparent 4px 7px); }

/* ── Dashboard 1A: panels and page furniture ───────────────────────────── */
.panel-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; line-height: 1.1; }
.panel-note { font-size: .78rem; color: rgba(29, 31, 32, 0.55); }
.bp-pad { padding: var(--space-4) var(--space-6); }

.dash-h1 { font-family: var(--font-heading); font-weight: 600; font-size: 2.35rem; line-height: 1; letter-spacing: -0.015em; margin: 0; }
.kicker-accent { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent); }

/* Basis toggle (100% / group share) as a squared segment control */
.seg-toggle { display: inline-flex; border: 1px solid var(--color-divider); }
.seg-toggle a { padding: 6px 14px; font-size: 13px; color: var(--color-text); text-decoration: none; }
.seg-toggle a + a { border-left: 1px solid var(--color-divider); }
.seg-toggle a.active { background: var(--color-accent); color: var(--color-bg); }

/* Close-out strip */
.closeout-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; }
@media (max-width: 992px) { .closeout-grid { grid-template-columns: 1fr; } }
.closeout-right { border-left: 1px solid var(--color-divider); padding-left: 26px; }
@media (max-width: 992px) { .closeout-right { border-left: 0; padding-left: 0; border-top: 1px solid var(--color-divider); padding-top: 14px; } }
.swatch-sq { width: 10px; height: 10px; display: inline-block; }

/* Needs attention band */
.watch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--color-divider); }
@media (max-width: 992px) { .watch-grid { grid-template-columns: 1fr; } }
.watch-card { background: var(--color-bg); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; text-decoration: none; color: var(--color-text); }
.watch-card:hover { background: rgba(29, 31, 32, 0.04); color: var(--color-text); }
.watch-card .gutter { width: 3px; align-self: stretch; flex: none; background: var(--color-alert); }
.watch-card .w-name { font-family: var(--font-heading); font-weight: 600; font-size: 1.02rem; }
.watch-card .w-reason { font-size: .8rem; color: rgba(29, 31, 32, 0.6); margin-top: 2px; }

/* Intercompany pair list */
.ic-pairs { display: flex; flex-direction: column; gap: 1px; background: rgba(29, 31, 32, 0.12); }
.ic-pairs > div { background: var(--color-bg); padding: 8px 0; display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: baseline; font-size: 13px; }

/* Reporting status square grid */
.status-grid { display: grid; grid-template-columns: repeat(17, 1fr); gap: 5px; }
/* Each square is a link to that subsidiary's month; the hover ring is the
   affordance, since the fill already carries the status meaning. */
.status-sq { width: 100%; aspect-ratio: 1; display: block; text-decoration: none; }
a.status-sq:hover, a.status-sq:focus-visible {
  outline: 2px solid var(--color-accent-900);
  outline-offset: 1px;
}
/* Legend swatches are fixed size - they are not part of the grid. */
.status-sq.legend-sq { width: 11px; height: 11px; aspect-ratio: auto; flex: 0 0 auto; }
.status-sq.closed { background: var(--color-accent-900); }
.status-sq.submitted { background: var(--color-accent); }
.status-sq.pending_approval { background: var(--color-accent-500); }
/* Awaiting approval sits between draft and submitted on the close-out bar. */
.seg-pending { background: var(--color-accent-500); }
.status-sq.draft { background: var(--color-accent-400); }
.status-sq.not_started { background: transparent; box-shadow: inset 0 0 0 1px var(--color-alert); }

/* Subsidiary performance table */
.subs-table { width: 100%; border-collapse: collapse; font-size: 13.5px; table-layout: fixed; }
.subs-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--color-bg);
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: rgba(29, 31, 32, 0.6); padding: 8px 12px; border-bottom: 1px solid var(--color-divider);
}
.subs-table tbody td { padding: 7px 12px; border-bottom: 1px solid rgba(29, 31, 32, 0.08); vertical-align: middle; }
.subs-table .num { text-align: right; }
.subs-scroll { max-height: 460px; overflow-y: auto; overflow-x: hidden; }
.spark-cell { width: 96px; height: 26px; display: block; }

/* Print */
@media (max-width: 768px) { .table-statement { font-size: .8rem; } }