/* ============================================================
   SRG Global — Southwest Shutdowns dashboard
   Styles aligned with the per-site dashboards (Covalent, Tronox,
   CSBP): Source Sans 3 throughout, exact SRG palette, white-on-
   light surfaces, red 3px accents on cards/tables, grey-uppercase
   table headers, compact summary cards.
   ============================================================ */

:root {
  /* --- Brand (exact tokens from per-site dashboards) --- */
  --srg-red:       #E30613;
  --srg-red-dark:  #B50510;
  --srg-red-soft:  #FDECEE;

  /* --- Ink / greys --- */
  --srg-dark:      #1A1A1A;
  --srg-grey:      #595959;
  --srg-grey-2:    #8C8C8C;
  --srg-light:     #F5F5F5;
  --srg-border:    #E5E5E5;

  /* --- Surfaces --- */
  --surface:       #FFFFFF;
  --surface-2:     #FAFAFA;

  /* --- Status / trend tones (aligned with the corporate presentation:
     bright green for positive changes, amber for partial, red for misses) --- */
  --ok:            #16A34A;
  --ok-soft:       #E7F6EC;
  --warn:          #F59E0B;
  --warn-soft:     #FEF3D7;
  --bad:           #DC2626;
  --bad-soft:      #FDECEE;

  /* Soft aqua callout (matches the dashed-green "Upgraded FY26 Guidance"
     box on the Executive Summary slide). */
  --callout-fill:  #EAF6F5;
  --callout-line:  #23B1A5;

  /* --- Company identity (stays clear of the brand red) --- */
  --co-covalent:   #3A7849;   /* forest green */
  --co-tronox:     #3D4250;   /* graphite slate */
  --co-csbp:       #1F4E79;   /* navy blue — umbrella for NAAN2 + KPF LNG (Kleenheat) */

  /* --- System --- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --radius:    6px;

  /* Single font family — matches per-site dashboards exactly. */
  --body:      "Source Sans 3", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--srg-dark);
  background: var(--srg-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 { font-family: var(--body); letter-spacing: 0; }

/* ----------------- Top bar ----------------- */

.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--srg-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 24px;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 32px;
}
.topbar .wm-divider {
  width: 1px;
  height: 40px;
  background: var(--srg-border);
}
.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}
.logo {
  height: 44px;
  width: auto;
  display: block;
}

.brand { min-width: 0; }
.brand .eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--srg-red);
}
.brand h1 {
  margin: 2px 0 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--srg-dark);
  line-height: 1.2;
}

@media (max-width: 880px) {
  .topbar {
    grid-template-columns: auto 1fr;
  }
  .topbar .wm-divider { display: none; }
}

/* ----------------- Tab bar ----------------- */

.tabbar {
  display: flex !important;      /* defensive — never let another rule collapse the bar */
  gap: 0;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px;
  background: var(--surface-2);   /* light grey so the tabs read as a distinct strip below the white header */
  border-top: 1px solid var(--srg-border);
  border-bottom: 1px solid var(--srg-border);
}
.tab {
  appearance: none;
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  color: var(--srg-dark);
  font-family: var(--body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 16px 24px 13px;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
  margin-bottom: -1px; /* overlap .filterbar's top border so active tab line is flush */
  opacity: 0.65;
}
.tab:hover { color: var(--srg-red); opacity: 1; background: rgba(255,255,255,0.6); }
.tab.active {
  color: var(--srg-dark);
  border-bottom-color: var(--srg-red);
  opacity: 1;
  background: var(--surface);
}
.tab-panel { display: none; flex-direction: column; gap: 20px; }
.tab-panel.active { display: flex; }

/* ----------------- Filter bar ----------------- */

.filterbar {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 1440px;
  margin: 0 auto;
  padding: 12px 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--srg-border);
}
.filter-group {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.filter-group + .filter-group {
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--srg-border);
}
.filter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--srg-grey);
  margin-right: 6px;
}
.chip {
  appearance: none;
  border: 1px solid var(--srg-border);
  background: var(--surface);
  color: var(--srg-dark);
  padding: 6px 14px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.chip:hover { border-color: var(--srg-red); color: var(--srg-red); }
.chip.active {
  background: var(--srg-red);
  color: #fff;
  border-color: var(--srg-red);
}

/* ----------------- Layout ----------------- */

main {
  padding: 24px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 1440px;
  margin: 0 auto;
}

/* ----------------- Placeholder banner ----------------- */

.banner {
  background: var(--srg-red-soft);
  border-left: 3px solid var(--srg-red);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--srg-dark);
}
.banner strong { color: var(--srg-red); }
.kpi-star {
  color: var(--srg-red);
  font-weight: 700;
  margin-left: 2px;
  cursor: help;
}

/* ----------------- KPIs (SC-card look from per-site dashboards) ----------------- */

.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 960px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-value { font-size: 36px; }
}
@media (max-width: 520px) {
  .kpis { grid-template-columns: 1fr; }
  .kpi-value { font-size: 32px; }
}

.kpi {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--srg-border);
  border-left: 3px solid var(--srg-red);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow-md);
  min-width: 0;
}
.kpi-value {
  font-size: 44px;
  font-weight: 800;
  color: var(--srg-dark);
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.kpi-value .kpi-sep {
  color: var(--srg-grey-2);
  font-weight: 600;
  margin: 0 4px;
}
.kpi-label {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--srg-grey);
}
.kpi-value.positive { color: var(--ok); }
/* Surplus pill on the "Requested / Confirmed" KPI — appears only when the
   overall confirmed roster exceeds the requested plan. Kept visually subtle
   (smaller than the main number) so the split stays readable; the green
   tone matches the .positive colour used on the fill-rate KPI. */
.kpi-surplus {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ok);
  background: var(--ok-soft);
  border-radius: 3px;
  vertical-align: 8px;
  letter-spacing: 0;
}

/* "Next shutdown" tile styled like the 'Upgraded FY26 Guidance' callout on
   the Executive Summary slide: soft aqua background + dashed brand-green
   border, so the upcoming shutdown catches the eye ahead of the other
   three plain tiles. */
.kpi.kpi-next {
  background: var(--callout-fill);
  border: 1.5px dashed var(--callout-line);
  border-left: 1.5px dashed var(--callout-line);
  box-shadow: none;
}
.kpi.kpi-next .kpi-value {
  font-size: 22px;
  line-height: 1.2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kpi.kpi-next .kpi-next-co {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.kpi.kpi-next .kpi-next-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--srg-dark);
  line-height: 1.15;
}
.kpi.kpi-next .kpi-label { color: var(--callout-line); }

/* ----------------- Cards ----------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--srg-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* Card headers: dark text on white with a 2px red rule beneath — matches the
   bold black section titles on the investor deck's Executive Summary slide
   (eg "Record 1H Financial Result") where red is used as an accent, not a
   full banner. Understated, readable, still on-brand. */
.card h2 {
  margin: 0;
  padding: 14px 20px;
  background: var(--surface);
  color: var(--srg-dark);
  border-bottom: 2px solid var(--srg-red);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.card > .card-head { padding: 0; }
.card > .card-head h2 { border-bottom: 2px solid var(--srg-red); }
.card > .card-head + * { margin-top: 0; }
.card .card-head .hint {
  padding: 10px 20px 0;
  margin: 0;
  font-size: 12px;
  font-style: italic;
  color: var(--srg-grey);
}
.card .card-head .hint strong {
  font-style: normal;
  color: var(--srg-red);
  font-weight: 700;
}
.card > *:not(h2):not(.card-head):not(details) { padding: 16px 20px; }
.card > details > summary { padding: 0; }
.card > details > *:not(summary) { padding: 12px 20px 16px; }
.card > .card-head + .chart-wrap,
.card > .card-head + .gantt-legend,
.card > .card-head + .gantt,
.card > .card-head + .table-wrap,
.card > .card-head + #shutdown-summary,
.card > .card-head + #warnings,
.card > .card-head + #gantt,
.card > .card-head + details { padding: 16px 20px; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 960px) { .grid-2 { grid-template-columns: 1fr; } }

.chart-wrap { position: relative; height: 260px; }
.chart-wrap.tall { height: 340px; }
/* Retention chart is horizontal + one bar per shutdown — grow the height as
   shutdowns accrue so bars stay readable instead of squashing. Capped so a
   dashboard with 15+ historics doesn't push the other cards off-screen. */
.chart-wrap.retention { height: clamp(280px, calc(60px + var(--retention-rows, 8) * 36px), 640px); }
.chart-offline {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--srg-grey);
  font-size: 12px;
  font-style: italic;
  background: repeating-linear-gradient(45deg, #fafafa, #fafafa 6px, #f0f0f0 6px, #f0f0f0 12px);
}

/* ----------------- Tables (match per-site dashboards exactly) ----------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--srg-border);
  background: var(--surface);
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--srg-dark);
}
thead tr {
  background: var(--surface-2);
  border-bottom: 1px solid var(--srg-border);
}
th {
  text-align: left;
  padding: 12px 12px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--srg-grey);
  background: var(--surface-2);
  border: none;
}
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--srg-border);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--surface-2); }
td.num, th.num {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.muted { color: var(--srg-grey); font-size: 12px; }
.co-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

/* ----------------- Gantt ----------------- */

.gantt-legend {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  color: var(--srg-grey);
  font-size: 11px;
  font-weight: 600;
}
.gantt-legend .sep { opacity: 0.35; }
.gantt-legend .sw {
  display: inline-block;
  width: 14px; height: 10px;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.gantt-legend .co-covalent  { background: var(--co-covalent); }
.gantt-legend .co-tronox    { background: var(--co-tronox); }
.gantt-legend .co-csbp      { background: var(--co-csbp); }
.gantt-legend .booked-swatch {
  background: transparent;
  border: 1.5px dashed var(--srg-grey);
}
.gantt-legend .today-swatch {
  background: var(--srg-red);
  width: 2px; height: 14px;
  border: none;
}

.gantt {
  --lane-label-w: 120px;
  border: 1px solid var(--srg-border);
  overflow-x: auto;                 /* horizontal scroll for long spans */
  overflow-y: hidden;
  background: var(--surface);
  -webkit-overflow-scrolling: touch;
}
.gantt-inner {
  position: relative;
  /* width set inline by JS = LANE_LABEL_W + totalWeeks * WEEK_PX */
}

.gantt-axis {
  position: relative;
  display: block;
  height: 44px;
  margin-left: var(--lane-label-w);
  border-bottom: 1px solid var(--srg-border);
  background: var(--surface-2);
}
.gantt-axis-months {
  position: relative;
  height: 22px;
  border-bottom: 1px solid var(--srg-border);
}
.gantt-month-tick {
  position: absolute;
  top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 8px;
  border-left: 1px solid var(--srg-border);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--srg-dark);
  white-space: nowrap;
  overflow: hidden;
}
.gantt-axis-weeks {
  position: relative;
  height: 22px;
}
.gantt-week-tick {
  position: absolute;
  top: 0; bottom: 0;
  display: flex; flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-left: 4px;
  border-left: 1px solid var(--srg-border);
  font-size: 9.5px;
  color: var(--srg-grey);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.gantt-week-tick .dom {
  font-weight: 700;
  font-size: 11px;
  color: var(--srg-dark);
}
.gantt-week-tick .mo {
  font-size: 8.5px;
  color: var(--srg-grey-2);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

.gantt-body { position: relative; }
.gantt-body > .gantt-grid,
.gantt-body > .gantt-today { position: absolute; }
.gantt-grid {
  position: absolute;
  left: var(--lane-label-w);
  right: 0; top: 0; bottom: 0;
  pointer-events: none;
}
.gantt-gridline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--srg-border);
}
.gantt-today {
  top: 0; bottom: 0;
  width: 2px;
  background: var(--srg-red);
  z-index: 2;
  box-shadow: 0 0 0 1px rgba(227, 6, 19, 0.2);
}

.gantt-row {
  display: flex;
  align-items: stretch;
  /* Height is set inline per lane by renderGantt — grows when overlapping
     shutdowns need to stack onto separate tracks. Keep a reasonable floor
     for the common single-track case. */
  min-height: 44px;
  border-bottom: 1px solid var(--srg-border);
}
.gantt-row:last-child { border-bottom: none; }
.gantt-row-label {
  flex: 0 0 var(--lane-label-w);
  padding: 0 14px;
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--srg-dark);
  background: var(--surface-2);
  border-right: 1px solid var(--srg-border);
  /* Sticky so the company name stays visible while the chart scrolls. */
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 1px 0 0 var(--srg-border);
}
.gantt-track { position: relative; flex: 1; overflow: hidden; }
.gantt-bar {
  position: absolute;
  /* top + height are set inline per bar by renderGantt (one track row per
     non-overlapping bar within a lane). */
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 8px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  background: var(--co);
  opacity: var(--fill-opacity, 1);
  border: 1px solid rgba(0, 0, 0, 0.15);
  cursor: default;
  transition: filter .12s ease, opacity .12s ease;
}
.gantt-bar.booked {
  border: 1.5px dashed rgba(0, 0, 0, 0.5);
}
.gantt-bar:hover { filter: brightness(1.1); opacity: 1; }
.gantt-bar > span { overflow: hidden; text-overflow: ellipsis; }

/* ----------------- Consolidated ops roster (tab 2) -----------------
   Mirrors the Gantt's structure (month + week axis, today line, sticky
   left column) but with one row per worker instead of one lane per
   company. Each row's coloured bars are their assignments across
   shutdowns, positioned by per-worker start/end dates. */

.roster-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.roster-search {
  flex: 1 1 260px;
  min-width: 240px;
  padding: 8px 12px;
  border: 1px solid var(--srg-border);
  background: var(--surface);
  font-family: var(--body);
  font-size: 13px;
  color: var(--srg-dark);
  border-radius: 2px;
}
.roster-search:focus {
  outline: none;
  border-color: var(--srg-red);
  box-shadow: 0 0 0 1px var(--srg-red);
}
.roster-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--srg-dark);
  cursor: pointer;
  user-select: none;
}
.roster-jump input { accent-color: var(--srg-red); cursor: pointer; }
.roster-count {
  margin-left: auto;
  font-size: 12px;
  color: var(--srg-grey);
  font-weight: 600;
}
.roster-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  color: var(--srg-grey);
  flex-wrap: wrap;
}
.roster-legend .sep { opacity: 0.35; }
.roster-legend .sw {
  display: inline-block;
  width: 16px; height: 10px;
  margin-right: 6px;
  border-radius: 2px;
  vertical-align: middle;
}
.roster-legend .co-covalent  { background: var(--co-covalent); }
.roster-legend .co-tronox    { background: var(--co-tronox); }
.roster-legend .co-csbp      { background: var(--co-csbp); }
.roster-legend .today-swatch {
  background: var(--srg-red);
  width: 2px; height: 14px;
}

.ops-roster {
  position: relative;
  overflow: auto;
  /* Tall enough to show ~15 worker rows by default; the rest scrolls. */
  max-height: 680px;
  border: 1px solid var(--srg-border);
  background: var(--surface);
}
.ops-roster-inner { position: relative; }

.ops-roster-axis {
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--surface-2);
  border-bottom: 1px solid var(--srg-border);
  padding-left: var(--lane-label-w);
}
.ops-roster-months {
  position: relative;
  height: 22px;
  border-bottom: 1px solid var(--srg-border);
}
.ops-roster-month-tick {
  position: absolute;
  top: 0; bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--srg-grey);
  border-left: 1px solid var(--srg-border);
}
.ops-roster-month-tick:first-child { border-left: none; }
.ops-roster-days {
  position: relative;
  height: 22px;
}
.ops-roster-day-tick {
  position: absolute;
  top: 0; bottom: 0;
  border-left: 1px solid var(--srg-border);
  opacity: 0.45;
}
.ops-roster-day-tick.week-start {
  border-left-color: var(--srg-grey);
  opacity: 1;
  display: flex;
  align-items: center;
  padding-left: 3px;
}
.ops-roster-day-tick .dom {
  font-size: 10px;
  font-weight: 700;
  color: var(--srg-dark);
  line-height: 1;
}

.ops-roster-body { position: relative; }
.ops-roster-grid {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--lane-label-w);
  right: 0;
  pointer-events: none;
  z-index: 0;
}
.ops-roster-gridline {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--srg-border);
  opacity: 0.55;
}
.ops-roster-today {
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--srg-red);
  z-index: 1;
}

.ops-roster-group {
  /* Company separator row between groups of workers. Sticky-left so the
     label stays visible while the timeline scrolls. */
  position: sticky;
  left: 0;
  z-index: 2;
  padding: 8px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--srg-border);
  border-bottom: 1px solid var(--srg-border);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--srg-dark);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ops-roster-row {
  display: flex;
  align-items: stretch;
  min-height: 42px;
  border-bottom: 1px solid var(--srg-border);
  position: relative;
}
.ops-roster-row:last-child { border-bottom: none; }
.ops-roster-row-label {
  flex: 0 0 var(--lane-label-w);
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  background: var(--surface);
  border-right: 1px solid var(--srg-border);
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 1px 0 0 var(--srg-border);
}
.ops-roster-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--srg-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-roster-meta {
  font-size: 11px;
  color: var(--srg-grey);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ops-roster-role { font-weight: 600; color: var(--srg-dark); }
.ops-roster-meta .muted { color: var(--srg-grey); }
.ops-roster-meta .mobile-link { font-size: 11px; }
.ops-roster-hire { font-size: 10px; color: var(--srg-grey-2); margin-top: 1px; }

.ops-roster-track {
  position: relative;
  flex: 1;
  overflow: hidden;
}
.ops-roster-bar {
  position: absolute;
  top: 6px;
  bottom: 6px;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 6px;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  background: var(--co);
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  cursor: default;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  transition: filter .12s ease;
}
.ops-roster-bar.booked {
  border: 1.5px dashed rgba(0, 0, 0, 0.45);
  opacity: 0.85;
}
.ops-roster-bar:hover { filter: brightness(1.12); }
.ops-roster-bar > span { overflow: hidden; text-overflow: ellipsis; }

/* ----------------- Per-shutdown summary cards ----------------- */

.shutdown-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sd-card {
  border: 1px solid var(--srg-border);
  border-top: 3px solid var(--srg-red);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* "Next shutdown" detail card — dashed green callout, mirrors the matching
   KPI tile so the visual link is clear. */
.sd-card.sd-card-next {
  border: 1.5px dashed var(--callout-line);
  border-top: 1.5px dashed var(--callout-line);
  background: var(--surface);
}
.sd-card.sd-card-next .sd-head {
  background: var(--callout-fill);
}
.sd-card-next-pill {
  display: inline-block;
  padding: 2px 8px;
  margin-left: 8px;
  background: var(--callout-line);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  vertical-align: 2px;
}
/* "Open site dashboard" link on each per-shutdown card heading — subtle
   red-outlined pill, only appears when a per-site dashboard URL exists. */
.sd-open {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--srg-red);
  border: 1px solid var(--srg-red);
  background: var(--surface);
  border-radius: 2px;
  text-decoration: none;
  vertical-align: 2px;
}
.sd-open:hover {
  background: var(--srg-red);
  color: #fff;
}
/* <details> collapsible mechanics — hide native marker, add our own chevron. */
.sd-card > summary { list-style: none; cursor: pointer; user-select: none; }
.sd-card > summary::-webkit-details-marker { display: none; }
.sd-card .sd-chevron {
  display: inline-block;
  color: var(--srg-grey);
  font-size: 14px;
  line-height: 1;
  margin-left: 4px;
  transition: transform .15s ease;
}
.sd-card[open] .sd-chevron { transform: rotate(180deg); }
.sd-card > summary:hover { background: var(--surface-2); }
.sd-card > summary:hover .sd-chevron { color: var(--srg-dark); }
.sd-quick {
  font-weight: 700;
  color: var(--srg-dark);
  padding-left: 10px;
  border-left: 1px solid var(--srg-border);
}
.sd-card:not([open]) .sd-head { border-bottom: none; }
.sd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--srg-border);
}
.sd-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  color: var(--srg-dark);
}
.sd-title .sd-co { color: var(--srg-dark); }
.sd-title .sd-sep { color: var(--srg-border); font-weight: 400; }
.sd-title .sd-name { color: var(--srg-grey); font-weight: 600; }
/* Rapid Crews JobNo chip — small monospace identifier so multiple
   shutdowns at the same client (e.g. Tronox 1116 vs 1353) are
   distinguishable at the head of each card. */
.sd-title .sd-jobno {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.3px;
  color: var(--srg-dark);
  background: #F3F4F6;
  border: 1px solid var(--srg-border);
  border-radius: 3px;
  margin-right: 4px;
}
.sd-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--srg-grey);
  font-variant-numeric: tabular-nums;
}
.sd-dates, .sd-site { font-weight: 600; }
.sd-status {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
}
.sd-status.status-booked       { background: var(--srg-grey); }
.sd-status.status-in_progress  { background: var(--warn); color: #fff; }
.sd-status.status-completed    { background: var(--ok); }

/* "Over plan" pill shown on the shutdown header when the confirmed roster
   exceeds the requested plan. Green outline + soft fill so it reads as a
   positive variance (the team mobilised more people than required) and
   never clashes with the .status-in_progress amber chip next to it. */
.sd-over-pill, .sd-archive-pill, .sd-planning-pill, .sd-data-flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 2px;
  cursor: help;
}
.sd-over-pill {
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid var(--ok);
}
/* "Archived" pill: shutdown has rolled off Rapid Crews' live SQL view and is
   being served from data/history/. Grey so it reads as "stale / last-known"
   without alarming users — the data is still useful, just frozen. */
.sd-archive-pill {
  color: var(--srg-grey);
  background: var(--srg-light);
  border: 1px solid var(--srg-grey-2);
}
/* "Planning view" pill: DPS roster contains more names than RC has ticked
   over to filled — RC's clerk is behind by N. Amber, informational. */
.sd-planning-pill {
  color: #8a5a00;
  background: #fff4d6;
  border: 1px solid #d9a233;
}
/* "Data flag" pill: RC reports more filled than we found names for in
   DPS. RC fills are always backed by a name, so this gap means the DPS
   export is stale or names didn't propagate. Red-tinged to read as
   "needs investigation" rather than informational. */
.sd-data-flag {
  color: var(--bad);
  background: var(--bad-soft);
  border: 1px solid var(--bad);
}

.sd-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--srg-border);
}
.sd-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px;
  border-right: 1px solid var(--srg-border);
}
.sd-kpi:last-child { border-right: none; }
.sd-kpi-lbl {
  color: var(--srg-grey);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sd-kpi-val {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--srg-dark);
  line-height: 1.1;
}
.sd-table-wrap {
  margin: 0;
  border: none;
}
.sd-table th, .sd-table td { padding: 10px 12px; }
.sd-table th:first-child, .sd-table td:first-child { padding-left: 20px; }
.sd-table th:last-child,  .sd-table td:last-child  { padding-right: 20px; }
.sd-table .sd-total td {
  font-weight: 800;
  background: var(--surface-2);
  border-top: 2px solid var(--srg-dark);
  border-bottom: none;
}
.gap-short { color: var(--srg-red); font-weight: 700; }
.gap-over  { color: var(--ok); font-weight: 700; }
.gap-even  { color: var(--srg-grey-2); }

/* Traffic-light fill-rate cells — matches the readiness pills on the
   per-site dashboards. Green ≥100%, amber 80-99%, red <80%. */
.fill-cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fill-ok    { background: var(--ok-soft);    color: var(--ok); }
.fill-warn  { background: var(--warn-soft);  color: #8A5A00; }
.fill-bad   { background: var(--bad-soft);   color: var(--bad); }
.fill-empty { color: var(--srg-grey-2); font-weight: 500; }

@media (max-width: 700px) {
  .sd-kpis { grid-template-columns: repeat(2, 1fr); }
  .sd-kpi:nth-child(2) { border-right: none; }
  .sd-kpi:nth-child(1),
  .sd-kpi:nth-child(2) { border-bottom: 1px solid var(--srg-border); }
}

/* ----------------- Worker retention matrix ----------------- */

.matrix-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--srg-border);
}
.matrix-search {
  flex: 1;
  max-width: 320px;
  padding: 7px 12px;
  border: 1px solid var(--srg-border);
  border-radius: 3px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--srg-dark);
  background: var(--surface);
}
.matrix-search:focus {
  outline: none;
  border-color: var(--srg-red);
}
.matrix-count {
  color: var(--srg-grey);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.matrix-count strong {
  color: var(--srg-dark);
  font-weight: 800;
}
.matrix-wrap {
  max-height: 560px;
  overflow-y: auto;
  border: none;
  border-radius: 0;
}
#worker-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  box-shadow: 0 1px 0 var(--srg-border);
  font-size: 10px;
  vertical-align: bottom;
}
#worker-matrix th.matrix-col {
  min-width: 100px;
}
#worker-matrix .matrix-col-sub {
  display: block;
  color: var(--srg-grey-2);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 9.5px;
  margin-top: 2px;
}
#worker-matrix td { font-size: 12.5px; padding: 6px 10px; }
#worker-matrix td:first-child { font-weight: 700; color: var(--srg-dark); padding-left: 20px; }
#worker-matrix td:nth-child(2) { color: var(--srg-grey); }
#worker-matrix .tick {
  color: var(--ok);
  font-weight: 800;
  font-size: 14px;
}
#worker-matrix .tick-empty {
  color: var(--srg-border);
}
#worker-matrix .returner-count {
  color: var(--ok);
  font-weight: 800;
}
/* Small arrow next to the current role column when the worker has changed
   role between shutdowns. Hover the cell to see the previous role(s). */
#worker-matrix .role-shift {
  color: var(--srg-grey-2);
  font-size: 11px;
  margin-left: 4px;
  cursor: help;
}
/* Compact "CV" pill that opens the worker's resume (typically a SharePoint
   share link) in a new tab. Rendered inline next to the name in both the
   matrix and the ops roster. Outline by default so it doesn't out-shout
   the name, fills brand-red on hover for affordance. Only rendered when
   Resumes.xlsx has a URL on file — absent = no pill, zero layout shift. */
.resume-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--body);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--srg-red);
  border: 1px solid var(--srg-red);
  border-radius: 2px;
  background: var(--surface);
  text-decoration: none;
  vertical-align: 1px;
  transition: all .12s ease;
}
.resume-badge:hover {
  background: var(--srg-red);
  color: #fff;
}

/* Click-to-call mobile numbers in the matrix. tel: hrefs hand off to the
   device dialer on iOS / Android; on desktop they open the default handler. */
.mobile-link {
  color: var(--srg-dark);
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.mobile-link:hover {
  color: var(--srg-red);
  text-decoration: underline;
}
/* Tri-state per-column filter chip in the matrix header. Cycles on click:
   Any → Present (green) → Absent (red) → Any. */
.matrix-col-filter {
  appearance: none;
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border: 1px solid var(--srg-border);
  background: var(--surface);
  border-radius: 2px;
  font-family: var(--body);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--srg-grey);
  cursor: pointer;
  user-select: none;
  transition: all .12s ease;
}
.matrix-col-filter:hover { border-color: var(--srg-dark); color: var(--srg-dark); }
.matrix-col-filter[data-state="present"] {
  background: var(--ok-soft);
  color: var(--ok);
  border-color: var(--ok);
}
.matrix-col-filter[data-state="absent"] {
  background: var(--bad-soft);
  color: var(--bad);
  border-color: var(--bad);
}
.matrix-col-filter[data-state="blank"] {
  background: var(--warn-soft);
  color: #92620a;
  border-color: var(--warn);
}
.matrix-clear {
  appearance: none;
  margin-left: 10px;
  padding: 3px 10px;
  border: 1px solid var(--srg-red);
  background: var(--surface);
  color: var(--srg-red);
  border-radius: 2px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.matrix-clear:hover { background: var(--srg-red); color: #fff; }

/* ----------------- Disclosure (warnings) ----------------- */

details summary {
  cursor: pointer;
  list-style: none;
  padding: 0;
}
details summary::-webkit-details-marker { display: none; }
details summary h2 {
  display: block !important;
  margin: 0;
  padding: 14px 20px;
  background: var(--surface);
  color: var(--srg-dark);
  border-bottom: 2px solid var(--srg-red);
}
details summary h2::after {
  content: "▾";
  float: right;
  font-size: 11px;
  color: var(--srg-grey);
  transition: transform .15s ease;
}
details[open] summary h2::after { transform: rotate(180deg); display: inline-block; }
#warnings ul {
  list-style: none;
  margin: 8px 0 0 0;
  padding: 0;
}
#warnings li {
  margin: 6px 0;
  font-size: 13px;
  padding-left: 14px;
  position: relative;
}
#warnings li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  background: var(--srg-red);
}

/* ----------------- Footer ----------------- */

footer {
  padding: 28px 32px 36px;
  text-align: center;
  color: var(--srg-grey);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.foot-rule {
  height: 2px;
  width: 60px;
  background: var(--srg-red);
  margin: 0 auto 12px;
}
code {
  font-family: var(--mono);
  background: var(--srg-red-soft);
  color: var(--srg-dark);
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 0.9em;
}