/* ── Group Spend — report-styled licence spend & utilisation ──────────────
   Ported onto the same design language as the per-agency usage reports
   (css/claude-usage.css) and the Group AI Progress report (css/group-report.css):
   same palette (#111 / #6B6A64 / gold #C9A21A / #fafafa surfaces), same 8px
   cards, same tabular numerals, same light-default/dark-opt-in behaviour.

   Before this, the tab used the generic `.go-*` admin styling plus ~130 lines of
   inline styles with hardcoded hexes, which is why it couldn't be themed or
   printed. Tokens here deliberately duplicate `.gr-root`'s values rather than
   importing them, so the two tabs stay visually locked together without one
   stylesheet depending on the other's load order.

   NOTE: this tab is visible to `access=='all'` AND `'finance'`, unlike the Group
   AI Progress report — so nothing here may depend on /group_reports data. */

.gs-root {
  --gs-bg: #fff; --gs-surface: #fafafa; --gs-surface2: #f5f5f2;
  --gs-border: rgba(0,0,0,0.12); --gs-divider: rgba(0,0,0,0.08);
  --gs-text: #111; --gs-muted: #6B6A64; --gs-sub: #6B6A64;
  --gs-track: #EDECE6; --gs-bar: #111; --gs-bar-mut: #9C9A90; --gs-accent: #C9A21A;
  font-family: 'PPNeueMontreal', 'Lato', system-ui, sans-serif;
  color: var(--gs-text);
  max-width: 1200px;
  background: var(--gs-bg);
  border-radius: 12px;
}

/* ── dark theme (opt-in via the light/dark toggle, shared `hub-theme` key) ── */
.gs-dark {
  --gs-bg: #0b0b0b; --gs-surface: #141414; --gs-surface2: #1c1c1c;
  --gs-border: rgba(255,255,255,0.14); --gs-divider: rgba(255,255,255,0.08);
  --gs-text: #fff; --gs-muted: rgba(255,255,255,0.55); --gs-sub: rgba(255,255,255,0.6);
  --gs-track: rgba(255,255,255,0.10); --gs-bar: #fff; --gs-bar-mut: rgba(255,255,255,0.45);
  --gs-accent: #FFE255;
  padding: 24px;
}
.gs-dark .gs-kpi { border-top-color: rgba(255,255,255,0.22); }
.gs-dark .gs-mtx__z { color: rgba(255,255,255,0.25); }
.gs-dark .gs-callout { background: rgba(255,226,85,0.08); border-color: rgba(255,226,85,0.35); color: rgba(255,255,255,0.78); }
.gs-dark .gs-callout b { color: #FFE255; }
.gs-dark .gs-flag { background: rgba(255,226,85,0.08); border-color: rgba(255,226,85,0.35); color: #FFE255; }
.gs-dark .gs-head--glow { background: #141414; border-color: rgba(255,255,255,0.12); }
.gs-dark .gs-head--glow::after {
  background: radial-gradient(circle at 50% 50%, rgba(255,226,85,.58), rgba(255,226,85,0) 68%); }

.gs-root h2, .gs-root h3 { margin: 0; }

/* ── header ── */
.gs-head { display: flex; justify-content: space-between; align-items: center;
           margin-bottom: 20px; flex-wrap: wrap; gap: 12px; }
.gs-head--glow { position: relative; overflow: hidden; padding: 20px 22px; border-radius: 8px;
                 background: #f5f5f2; border: 1px solid rgba(0,0,0,0.12); }
.gs-head--glow::after { content: ''; position: absolute; right: -30px; top: -120px;
                 width: 460px; height: 460px; border-radius: 50%; pointer-events: none;
                 background: radial-gradient(circle at 50% 50%, rgba(201,162,26,.34), rgba(201,162,26,0) 68%); }
.gs-head--glow > * { position: relative; z-index: 1; }
.gs-head__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gs-head__actions { display: flex; align-items: center; gap: 8px; }
.gs-badge { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .08em;
            text-transform: uppercase; padding: 5px 10px; background: var(--gs-surface2);
            border: 1px solid var(--gs-border); color: var(--gs-muted); border-radius: 4px; }
.gs-updated { font-size: 11px; color: var(--gs-muted); }

/* ── numbered question sections (same chapter treatment as the reports) ── */
.gs-section { margin-bottom: 32px; }
.gs-section:last-of-type { margin-bottom: 20px; }
.gs-section__head { margin-bottom: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--gs-border); }
.gs-section__num { font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
                   color: var(--gs-accent); margin-bottom: 5px; }
.gs-section__q { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; color: var(--gs-text); }
@media (max-width: 600px) { .gs-section__q { font-size: 16px; } }

/* ── KPI cards ── */
.gs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 24px; }
.gs-kpi { background: var(--gs-surface); border: 1px solid var(--gs-border);
          border-top: 3px solid rgba(0,0,0,0.2); border-radius: 8px; padding: 12px 14px; }
.gs-kpi--hl { border-top-color: var(--gs-accent); }
.gs-kpi__lbl { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
               color: var(--gs-muted); margin-bottom: 6px; }
.gs-kpi__val { font-size: 22px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.gs-kpi__val small { font-size: 13px; color: var(--gs-muted); font-weight: 400; }
.gs-kpi__sub { font-size: 11px; color: var(--gs-sub); margin-top: 6px; line-height: 1.4; }

/* ── generic card ── */
.gs-card { background: var(--gs-surface); border: 1px solid var(--gs-border); border-radius: 8px;
           padding: 16px; margin-bottom: 16px; }
.gs-card h3 { font-size: 15px; font-weight: 500; margin-bottom: 2px; }
.gs-csub { font-size: 11px; color: var(--gs-sub); margin-bottom: 12px; }
.gs-flag { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: .08em;
           text-transform: uppercase; color: #8a6d00; border: 1px solid #E3CD66; background: #FFFBE8;
           padding: 2px 8px; margin-left: 8px; border-radius: 3px; vertical-align: 2px; }
.gs-callout { padding: 10px 12px; border-radius: 6px; background: #FFFBE8; border: 1px solid #F1E4A6;
              font-size: 11px; line-height: 1.45; color: #5a4a00; }
.gs-callout b { font-weight: 700; }

/* ── data tables ── */
.gs-mtx { width: 100%; border-collapse: collapse; font-size: 12px; }
.gs-mtx th { text-align: right; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
             color: var(--gs-muted); padding: 5px 8px; border-bottom: 1px solid var(--gs-border); }
.gs-mtx th:first-child { text-align: left; padding-left: 0; }
.gs-mtx td { padding: 7px 8px; border-bottom: 1px solid var(--gs-divider); text-align: right;
             font-variant-numeric: tabular-nums; }
.gs-mtx td:first-child { text-align: left; font-weight: 500; padding-left: 0; }
.gs-mtx__z { color: rgba(0,0,0,0.2); }
.gs-mtx__totrow td { border-top: 2px solid var(--gs-text); border-bottom: none; font-weight: 700; padding-top: 8px; }

/* ── utilisation bars ──
   Deliberately NOT a green/amber traffic light: the reports reserve colour for
   the single gold accent, so a filled row reads in the neutral ink and only
   rows needing attention pick up gold. Keeps this tab in the same visual
   language as everything else rather than importing a second colour system. */
.gs-util__bar { display: inline-block; width: 88px; height: 6px; background: var(--gs-track);
                border-radius: 3px; vertical-align: middle; margin-right: 8px; overflow: hidden; }
.gs-util__fill { display: block; height: 100%; background: var(--gs-bar); border-radius: 3px; }
.gs-util__fill--attn { background: var(--gs-accent); }
.gs-util__pct { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; vertical-align: middle; }
.gs-util__tier { display: inline-block; font-size: 9.5px; font-weight: 500; letter-spacing: .07em;
                 text-transform: uppercase; color: var(--gs-muted); margin-left: 8px; }
.gs-util__tier--attn { color: var(--gs-accent); }
.gs-util__cell { white-space: nowrap; }

/* ── LTX credit pacing ── */
.gs-ltx__grid { display: grid; grid-template-columns: 1.4fr 46px 1fr 104px 104px 62px;
                gap: 10px; align-items: center; }
.gs-ltx__head { padding-bottom: 6px; border-bottom: 1px solid var(--gs-border); margin-bottom: 2px; }
.gs-ltx__head span { font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase;
                     color: var(--gs-muted); }
.gs-ltx__row { padding: 8px 0; border-bottom: 1px solid var(--gs-divider); }
.gs-ltx__name { font-size: 12px; font-weight: 500; }
.gs-ltx__num { font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--gs-text); }
.gs-ltx__num--mut { color: var(--gs-muted); }
.gs-ltx__mid { font-size: 12px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.gs-ltx__pct { font-size: 11px; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }
.gs-ltx__pct--attn { color: var(--gs-accent); }
.gs-ltx__totrow { padding: 9px 0 0; border-top: 1px solid var(--gs-border); margin-top: 2px; font-weight: 600; }
.gs-ltx__totrow .gs-ltx__name, .gs-ltx__totrow .gs-ltx__num { font-weight: 600; }
.gs-ltx__availrow { padding: 8px 0; border-top: 1px dashed var(--gs-border); }
.gs-ltx__note { font-size: 10.5px; color: var(--gs-sub); margin-top: 10px; line-height: 1.5; }

/* Track with expected-pace / rollover markers. Marker positions are set inline
   as a percentage by the renderer — a computed value, so it can't live in CSS. */
.gs-track { position: relative; height: 8px; background: var(--gs-track); border-radius: 4px; overflow: visible; }
.gs-track--lg { height: 10px; border-radius: 5px; }
.gs-track__fill { position: absolute; top: 0; left: 0; height: 100%; background: var(--gs-bar); border-radius: 4px; }
.gs-track__mark { position: absolute; top: -3px; bottom: -3px; width: 1.5px; background: var(--gs-bar-mut); border-radius: 1px; }
.gs-track--lg .gs-track__mark { top: -4px; bottom: -4px; width: 2px; }
.gs-track__mark--gold { background: var(--gs-accent); }

.gs-pace { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--gs-border); }
.gs-pace__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 12px; }
.gs-pace__ttl { font-size: 13px; font-weight: 500; }
.gs-pace__legend { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
                   font-size: 11px; color: var(--gs-sub); margin-top: 8px; }
.gs-pace__legend b { color: var(--gs-text); font-weight: 500; }
.gs-key--gold { color: var(--gs-accent); }

/* ── footer ── */
.gs-foot { margin-top: 16px; border-top: 1px solid var(--gs-border); padding-top: 10px;
           font-size: 10.5px; color: var(--gs-sub); line-height: 1.5; }
.gs-foot b { color: var(--gs-text); }

/* Narrow widths: drop the progress bar, never the figures. The bar restates
   the percentage that's already in the last column, whereas hiding the
   allocation column made the "Available to allocate" total disappear. */
@media (max-width: 900px) {
  .gs-ltx__grid { grid-template-columns: 1fr 40px 92px 92px 56px; }
  .gs-ltx__grid > .gs-ltx__barcell { display: none; }
}

/* ── Print / Export-as-PDF ──
   The shared print sheet in css/claude-usage.css hides the whole page
   (`body * { visibility:hidden }`) and re-reveals ONLY .cu / .ltx / .au / .gr-root.
   .gs-root is new to that list, so without this block the exported PDF is blank. */
@media print {
  .gs-root, .gs-root * { visibility: visible; }
  .gs-root {
    position: absolute; left: 0; top: 0; width: 100%;
    max-width: none; border-radius: 0;
    background: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .gs-root * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gs-head__actions { display: none !important; }
  .gs-head--glow::after { display: none !important; }
  .gs-kpi, .gs-callout, .gs-section__head { break-inside: avoid; page-break-inside: avoid; }
  .gs-section { break-inside: auto; page-break-inside: auto; }
  .gs-section__head { break-after: avoid; page-break-after: avoid; }
}