/* 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(--md-sys-color-error);
}

/* 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. The
   breakpoint counts the page margins and the card's padding (~195px), which
   also take from the table's width (~1320px min-content in M3 type). */
@media (min-width: 1520px) {
  .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 totals row crowds the next card's edge. */
.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: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--md-sys-color-on-surface-variant);
}

/* 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(--md-sys-color-secondary-container);
  border: 1px solid var(--md-sys-color-outline);
}

.margin-positive { color: var(--md-sys-color-primary); font-weight: 500; }
.margin-negative { color: var(--md-sys-color-error);   font-weight: 500; }

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

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

/* 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: var(--md-sys-shape-corner-full);
  cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
  transition:
    transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),
    background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.tree-toggle:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent);
  color: var(--md-sys-color-on-surface);
}

.tree-toggle.expanded {
  transform: rotate(90deg);
}
.tree-toggle .icon { width: 20px; height: 20px; vertical-align: 0; }

.data-table .sub-budget-row {
  background: var(--md-sys-color-surface-container-low);
}

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

.sub-marker {
  color: var(--md-sys-color-on-surface-variant);
  margin-right: 0.25rem;
}

.sub-consumption {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* 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: var(--md-sys-typescale-label-small);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  color: var(--md-sys-color-primary);
  margin-top: 0.15rem;
}
.overflow-pending {
  font: var(--md-sys-typescale-label-small);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  color: var(--md-sys-color-error);
  margin-top: 0.15rem;
}
.overflow-pending .icon { width: 14px; height: 14px; vertical-align: -3px; }

/* 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: var(--md-sys-typescale-label-small);
  letter-spacing: var(--md-sys-typescale-label-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
  margin-top: 0.15rem;
}

/* Period filter: the shared month picker's field (month_grid.css) with its
   info-tip, pushed to the right of the view switch to use the empty space. */
.controlling-filter {
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  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;
}

/* Centred on the 40dp field beside it. */
.controlling-filter > .info-tip { margin-bottom: 0.7rem; }

/* The ⋮ overflow menu's button ends the row, level with the field. */
.controlling-more { align-self: flex-end; }

/* A flat page: the view switch sits right under the "Controlling" heading. */
.tab-heading + .controlling-overview { margin-top: 0; }
.controlling-period {
  margin: 0 0 0.75rem;
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* 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;
  border-color: var(--md-sys-color-outline);
  margin-left: -1px;
  padding: 0.45rem 0.9rem;
}

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

.controlling-view-toggle:first-child { border-radius: var(--md-sys-shape-corner-full) 0 0 var(--md-sys-shape-corner-full); margin-left: 0; }
.controlling-view-toggle:last-child  { border-radius: 0 var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0; }

/* M3 segmented button: the selected segment takes the secondary container. */
.controlling-view-toggle.is-active {
  background-color: var(--md-sys-color-secondary-container);
  border-color: var(--md-sys-color-outline);
  color: var(--md-sys-color-on-secondary-container);
  padding-left: 0.9rem;
  z-index: 1;
}

.controlling-view-toggle.is-active:hover { color: var(--md-sys-color-on-secondary-container); }

/* The view switch and period filter: a toolbar row straight on the page, no
   container. Both classes in the selector, so the plain .controlling-summary
   strip below (same file, later) can't paint it grey. */
.controlling-summary.controlling-summary--controls {
  align-items: flex-end;
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 1rem;
}

/* The headline figures and the spend bar that pictures them, in one white
   outlined card like the Budget lines card below — the strip, the bar and its
   legend read as one unit, and the bar's empty track gets real contrast. */
.controlling-figures {
  padding: 1.5rem;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
}

.controlling-figures .controlling-summary {
  align-items: flex-start;
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

/* On a phone the figures wrap into a column, so the contract totals' right
   alignment (meant for the far end of a desktop row) would strand them. */
@media (max-width: 600px) {
  .controlling-figures { padding: 1rem; }
  .controlling-figures .controlling-summary-item--end   { margin-left: 0; }
  .controlling-figures .controlling-summary-item--right { text-align: left; }
}

.controlling-summary-subvalue {
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

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

.controlling-bar-caption {
  margin: 0.5rem 0 0;
  font: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

.controlling-overrun {
  margin: 0.5rem 0 0;
  font: var(--md-sys-typescale-body-medium);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-error);
}

/* Stacked spend bar: a rounded track, kept thick (22px) because it carries
   several segments rather than a single progress value. */
.spend-bar {
  display: flex;
  width: 100%;
  height: 22px;
  margin-top: 1rem;
  border-radius: var(--md-sys-shape-corner-small);
  overflow: hidden;
  background: var(--md-sys-color-surface-container-highest);
}

.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(--md-sys-color-outline); }
.spend-bar-seg--incurred { background: var(--md-sys-color-on-surface-variant); }
.spend-bar-seg--paid-by-donor          { background: var(--md-sys-color-primary); }
.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: var(--md-sys-typescale-body-small);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

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

.spend-swatch {
  width: 12px;
  height: 12px;
  border-radius: var(--md-sys-shape-corner-extra-small);
  display: inline-block;
}

/* Push the budget remainder to the far end of the legend. */
.spend-legend-remaining {
  margin-left: auto;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

/* Drill-down summary: the budget line's headline figures laid out as a row of
   labelled cells above the contributing-records table. A white outlined card,
   like every stat strip — a grey fill on the near-grey page read as grey on
   grey. */
.controlling-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin: 1.5rem 0;
  padding: 1rem 1.25rem;
  background: var(--md-sys-color-surface-container-lowest);
  border: 1px solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
}

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

.controlling-summary-label {
  font: var(--md-sys-typescale-label-medium);
  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
  color: var(--md-sys-color-on-surface-variant);
}

/* Same stat style as the Donor Invoicing summary strip (title-large). */
.controlling-summary-value {
  font: var(--md-sys-typescale-title-large);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
  font-variant-numeric: tabular-nums;
}

/* 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(--md-sys-color-on-surface-variant);
  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(--md-sys-color-outline-variant);
}

.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(--md-sys-color-on-surface);
  text-decoration: none;
}

.controlling-tor-table .col-tor a:not(.btn-icon):hover,
.controlling-allocations-table .col-tor a:hover {
  color: var(--md-sys-color-primary);
  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;
}