/* Margin / controlling read view. Reuses .data-table, .num, .col-amount and the
   .budget-bar-* component (from projects.css); this file only adds the bits
   unique to controlling: the inline consumption cell, margin colouring, and the
   per-ToR grouping. */

.controlling-warning {
  color: var(--danger);
}

/* These tables are read top-to-bottom against finance, so let the page scroll
   rather than the global viewport cap's inner scrollbar (tables.css). Gated at
   the width where they stop fitting (min-content ~1100px): a wrap scrolls in
   both axes or neither, so below this they still need the wrap's horizontal
   scrolling. The th rule restores the page-level sticky offset tables.css drops
   for scroll containers. Figures and layout are unchanged either way. */
@media (min-width: 1400px) {
  .controlling-table-wrap {
    max-height: none;
    overflow: visible;
  }

  .controlling-table-wrap .data-table thead th {
    top: var(--nav-height);
  }
}

/* Stack the budget-line and ToR cards with breathing room — without this they
   butt together and the ToR card's teal top border crowds the totals row. */
.controlling-sections {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}

/* Consumption cell: a slim bar above an "x / y" label. Kept narrow so the
   adjacent Remaining column fits without stretching the row. */
.col-consumption {
  min-width: 120px;
}

.consumption .budget-bar-track {
  margin-bottom: 0.25rem;
}

.consumption-label {
  font-size: 0.78rem;
  color: var(--gray-mid);
}

/* Legend for the consumption bars (INT-168). Reuses .spend-legend/.spend-swatch;
   swatch colours come from the bar fill classes. */
.consumption-legend {
  margin: 0 0 0.6rem;
}

/* Border so the track swatch doesn't vanish against the white card. */
.consumption-swatch-track {
  background: var(--border);
  border: 1px solid var(--border-input);
}

.margin-positive { color: var(--teal); font-weight: 600; }
.margin-negative { color: var(--danger);     font-weight: 600; }

/* An over-budget line's Remaining goes negative; flag it red like a loss. */
.remaining-negative { color: var(--danger); font-weight: 600; }

/* Over-promised, not overspent: never the overspend red. */
.unallocated-negative { color: var(--warning-dark); font-weight: 600; }

/* Mixed parent / sub-budget lines: a chevron toggles the child rows, which read
   as nested under the parent (indented, tinted, no consumption bar of their own). */
.tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  /* A real ~30px click target — the bare glyph was almost unhittable. Negative
     margins let the larger button overlap the cell padding instead of shifting
     the label or growing the row. */
  width: 1.9rem;
  height: 1.9rem;
  margin: -0.4rem 0.15rem -0.4rem -0.5rem;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: var(--gray-dark);
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.1s ease, background-color 0.1s ease;
}

.tree-toggle:hover {
  background: var(--gray-light);
  color: var(--gray-dark);
}

.tree-toggle.expanded {
  transform: rotate(90deg);
}

.data-table .sub-budget-row {
  background: var(--surface-muted);
}

.sub-budget-row .sub-cell {
  padding-left: 1.75rem;
}

.sub-marker {
  color: var(--gray-mid);
  margin-right: 0.25rem;
}

.sub-consumption {
  font-size: 0.78rem;
  color: var(--gray-mid);
}

/* Budget-overflow annotations under a consumption bar. The "+ X from Flexible
   Remuneration" note is informational (it is NOT counted in this line's Billed/
   Actual); the pending badge flags an unresolved overflow awaiting the PM. */
.overflow-note {
  font-size: 0.72rem;
  color: var(--teal);
  margin-top: 0.15rem;
}
.overflow-pending {
  font-size: 0.72rem;
  color: var(--danger);
  font-weight: 600;
  margin-top: 0.15rem;
}

/* Drill-down flag on a lump_sum_manual line's decoupled cost records: they show
   in the Contributing records table (and the actual-cost total) but don't fill
   the consumption bar, so mark the quantity as non-contributing. */
.qty-flag {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray-mid);
  margin-top: 0.15rem;
}

/* Period filter: a compact inline MM-YY range living in the overview bar,
   pushed to the right of the figures to use the empty space. */
.controlling-filter {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-left: auto;
}

/* Team-lead view: the filter is the only thing left in the summary row, so the
   auto margin above would strand it against the right edge. */
.controlling-summary > .controlling-filter:only-child {
  margin-left: 0;
}

.controlling-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.controlling-filter-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-mid);
}

.controlling-filter-selects {
  display: flex;
  gap: 0.4rem;
}

.controlling-filter-selects .filter-select {
  flex: none;
  min-width: 0;
}

.controlling-filter-selects .filter-select:first-child { width: 7rem; }  /* month */
.controlling-filter-selects .filter-select:last-child  { width: 5rem; }  /* year */

.controlling-filter-sep {
  align-self: center;
  color: var(--gray-mid);
  padding-bottom: 0.4rem;
}

/* Beside the To selects: the bottom margin centres it on their height, the
   negative left margin pulls it in from the form's gap. */
.controlling-filter > .info-tip {
  margin: 0 0 0.65rem -0.35rem;
}

.controlling-filter-clear {
  align-self: center;
  font-size: 0.85rem;
  color: var(--gray-mid);
}

/* Shown by the period-filter Stimulus controller while Apply is disabled for a
   backwards range. */
.controlling-filter-error {
  align-self: center;
  font-size: 0.85rem;
  color: var(--danger);
}

.controlling-period {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--gray-mid);
}

/* Cost recognised by service period: five narrow columns — don't stretch across the card. */
.controlling-months-table { max-width: 760px; }

/* A collapsible dashboard card inside the Cost view panel: the heading is the
   <summary>, so the card keeps its look while shipping closed with no JS. The
   h2's usual bottom margin applies only once opened. */
.controlling-collapsible { margin-top: 1.5rem; }

.controlling-collapsible > summary {
  cursor: pointer;
  list-style: revert;
}

.controlling-collapsible > summary h2 {
  display: inline-flex;
  margin-bottom: 0;
}

.controlling-collapsible[open] > summary {
  margin-bottom: 1.25rem;
}

/* Project budget overview at the top of the controlling page: the headline
   figures, a stacked spend bar, and its legend. */
.controlling-overview {
  margin: 1.5rem 0;
}

.controlling-view-toggles { gap: 0; }

.controlling-view-toggle {
  position: relative; /* lets the active segment's border win the -1px overlap */
  border-radius: 0;
  margin-left: -1px;
  padding: 0.45rem 0.9rem;
  font-weight: 600;
}

.controlling-view-toggle::before { display: none; }

.controlling-view-toggle:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.controlling-view-toggle:last-child  { border-radius: 0 6px 6px 0; }

.controlling-view-toggle.is-active {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--white);
  z-index: 1;
}

.controlling-view-toggle.is-active:hover { color: var(--white); }

.controlling-summary--controls {
  align-items: flex-end;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 0.75rem;
}

.controlling-overview [data-view-switch-target="panel"] .controlling-summary {
  align-items: flex-start;
}

.controlling-summary-subvalue {
  font-size: 0.76rem;
  color: var(--gray-mid);
}

.controlling-summary-item--end   { margin-left: auto; }
.controlling-summary-item--right { text-align: right; }

.controlling-bar-caption {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--gray-mid);
}

.controlling-overrun {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--danger);
}

.spend-bar {
  display: flex;
  width: 100%;
  height: 22px;
  margin-top: 1rem;
  border-radius: 6px;
  overflow: hidden;
  background: var(--gray-light);
}

.spend-bar-seg { height: 100%; }
/* Cost side in greys, darker = more certain. */
.spend-bar-seg--opening  { background: var(--chart-gray); }
.spend-bar-seg--pending  { background: var(--border-input); }
.spend-bar-seg--incurred { background: var(--gray-mid); }
.spend-bar-seg--paid-by-donor          { background: var(--teal); }
.spend-bar-seg--billed                 { background: var(--chart-blue); }
.spend-bar-seg--billable               { background: var(--chart-gold); }
.spend-bar-seg--approved-not-delivered { background: var(--teal-tint); }

.spend-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--gray-mid);
}

.spend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.spend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}

/* Push the budget remainder to the far end of the legend. */
.spend-legend-remaining {
  margin-left: auto;
  font-weight: 600;
  color: var(--gray-dark);
}

/* Drill-down summary: the budget line's headline figures laid out as a row of
   labelled cells above the contributing-records table. */
.controlling-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--surface-muted);
  border: 1px solid var(--gray-light);
  border-radius: 6px;
}

.controlling-summary-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.controlling-summary-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-mid);
}

.controlling-summary-value {
  font-size: 1rem;
  font-weight: 600;
}

/* Same de-emphasis as .data-table .muted (budget_lines.css) — the summary block
   sits outside any table, so the shared rule doesn't reach it. */
.controlling-summary-value .muted {
  color: var(--gray-mid);
  font-weight: 400;
}

/* .controlling-tor-header moved to opening_balances.css — the controlling ToR
   section used to render one per ToR, but it is now a single flat table and the
   opening-balances page is the only remaining user. */

/* One flat table now, so no fixed column widths (they existed to align several
   separate per-ToR tables). Auto layout sizes to content; the floor lets
   .data-table-wrap scroll sideways rather than crush the bar and money columns. */
.controlling-tor-table {
  min-width: 980px;
}

/* `anywhere`, not `break-word`: only `anywhere` reduces min-content width, which
   is what auto table layout sizes a column from. */
.controlling-tor-table td.cell-title,
.controlling-tor-table td.col-budget-line {
  overflow-wrap: anywhere;
}

/* Group separator on the first row of each ToR's run. Dropped via .is-ungrouped
   when a sort interleaves the ToRs — see table_sort_controller. The very first
   row needs none; the header is already its boundary. */
.controlling-tor-table tbody tr.is-group-start:not(:first-child) > td {
  border-top: 2px solid var(--border);
}

.controlling-tor-table.is-ungrouped tbody tr.is-group-start > td {
  border-top: 0;
}

/* Identity and status read as single tokens — never split them over two lines. */
.controlling-tor-table .col-tor,
.controlling-allocations-table .col-tor {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Identity first, link second — reads as text, reveals itself on hover, like
   `.data-table .cell-title a`. */
.controlling-tor-table .col-tor a:not(.btn-icon),
.controlling-allocations-table .col-tor a {
  color: var(--gray-dark);
  text-decoration: none;
}

.controlling-tor-table .col-tor a:not(.btn-icon):hover,
.controlling-allocations-table .col-tor a:hover {
  color: var(--teal);
  text-decoration: underline;
}

/* Box trimmed only — the 2rem square would stretch every ToR row. */
.controlling-tor-table .controlling-tor-doc-btn {
  width: 1.5rem;
  height: 1.5rem;
  margin-left: 0.15rem;
  vertical-align: -0.35rem;
}

.controlling-tor-table .col-tor-status {
  white-space: nowrap;
}