/* ============================================================
   Kleenheat LPG Post Boost — Train 1 SMP
   Dual-branded: Kleenheat / WesCEF (client) + SRG Global (delivery)
   ============================================================ */

/* ─── DESIGN TOKENS ─── */
:root {
  /* Client brand.
     Kleenheat blue #009EE3 — read off the SUPPLIED logo file, not off a screenshot.
     An earlier pass sampled #459CDC from a screen capture of wescef.com.au; that was
     the browser's ANTIALIASED rendering of the wordmark at display scale, several
     shades light of the real mark. Sampling a rasterised screenshot for a brand colour
     gets you what the compositor produced, not what the brand is.
     WesCEF green #367D45 is still screenshot-sampled — replace it if a brand value
     turns up.

     The --cov-* names are kept rather than renamed. Every rule in this 44 KB stylesheet
     and the tile/status classes in gantt.js reference them, and a sweeping rename buys
     nothing but the chance to miss one and leave a panel on the old palette. They are
     the CLIENT PRIMARY slots; what changed is the colours behind them.

     The two deep shades carry white text (headers, panel bars), so they are darkened
     far enough to hold it: 8.5:1 and 11.8:1 against white. The mark itself is only
     3.0:1 and is never used behind white text. */
  --cov-navy: #005276;          /* deep Kleenheat blue — headers, panel bars */
  --cov-navy-deep: #003C56;
  --cov-navy-light: #009EE3;    /* the wordmark blue itself */
  --cov-green: #367D45;         /* WesCEF green — 'done' / positive states */
  --cov-green-dark: #2b6537;
  --cov-green-light: #4f9c60;
  --cov-green-pale: #eaf4ec;

  /* The client marks, by their own names, for anything added later. */
  --kleenheat-blue: #009EE3;
  --wescef-green: #367D45;

  /* SRG brand */
  --srg-red: #b30000;

  /* Neutrals */
  --dark: #1a1c3a;
  --charcoal: #2d2f4a;
  --grey: #4f5170;
  --mid: #6e708b;
  --light: #d1d3e0;
  --offwhite: #f4f4f9;
  --bg: #fafafd;

  /* Gantt phase colours */
  --phase-mob: #46ac59;
  --phase-t1-frame: #24255a;
  --phase-t1-stack: #d64d2b;
  --phase-t2-frame: #585aa8;
  --phase-t2-stack: #e77c58;
  --phase-elec: #23884d;
  --phase-close: #6a4fae;
  --hold-point: #e09410;
  --night-shift: #1e1f4d;
  --shutdown: #d64d2b;

  /* Tracking status colours */
  --st-done: #368f46;
  --st-active: #24255a;
  --st-ontrack: #3c7ec8;
  --st-atrisk: #cc8020;
  --st-delayed: #a83124;
  --st-planned: #7f819e;
  --st-risk-strong: #b56a13;
}

/* ─── RESET ─── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--dark);
  -webkit-font-smoothing: antialiased;
}

/* ─── HEADER ─── */
.header {
  background: white;
  color: var(--cov-navy);
  padding: 24px 40px;
  display: flex;
  align-items: center;
  gap: 28px;
  position: relative;
  border-bottom: 1px solid var(--light);
}
.header::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--cov-green), var(--cov-green-light));
}
.header-logo-area {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 28px;
  border-right: 1px solid var(--light);
  flex-shrink: 0;
}
/* Co-branding sizes. Both marks are TIGHT-CROPPED, so a CSS height means the same
   thing on each and equal heights give equal optical weight.
   That was not true before: the SRG file carried 44 % vertical whitespace, so at 38 px
   only ~21 px was mark, against 48 px of solid Kleenheat letterform — the wordmark read
   more than twice the size before its 7.5:1 aspect was even counted. Trimming the
   padding is the fix; matching the numbers alone would not have been.
   28 px keeps the wordmark to ~211 px. A wordmark is always wider than a roundel — that
   is the shape of it — but at this height it sits as a peer rather than a banner. */
.logo-cov { height: 28px; width: auto; }        /* Kleenheat wordmark — 7.53:1 */
.logo-divider { width: 1px; height: 26px; background: var(--light); }
.logo-srg { height: 28px; width: auto; }        /* SRG roundel — 1.47:1 */

.header-info { flex: 1; }
.header-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.3px;
  margin-bottom: 3px;
  color: var(--cov-navy);
}
.header-sub { font-size: 12.5px; color: var(--mid); font-weight: 400; }
.header-ref { text-align: right; font-size: 11px; color: var(--mid); line-height: 1.7; }
.header-ref strong { color: var(--cov-navy); font-weight: 600; }

/* ─── CONTAINER ─── */
.container { padding: 24px 40px 40px; max-width: 1600px; margin: 0 auto; }

/* ─── KEY INFO BAR ─── */
.key-info {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--light);
  border: 1px solid var(--light);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.key-info-item { background: white; padding: 16px 20px; text-align: center; }
.key-info-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--mid); font-weight: 600; margin-bottom: 4px;
}
.key-info-value {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--dark);
}
.key-info-value.hl { color: var(--cov-navy); }
.key-info-value.hl-green { color: var(--cov-green-dark); }
.key-info-value.hl-risk { color: var(--st-risk-strong); }

/* ─── LEGEND ─── */
.legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px;
  padding: 12px 18px; background: white; border: 1px solid var(--light);
  border-radius: 8px; align-items: center;
}
.legend-title {
  font-weight: 700; font-size: 10px; text-transform: uppercase;
  letter-spacing: 1px; color: var(--grey); margin-right: 6px;
}
.legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px; color: var(--grey); font-weight: 500;
}
.legend-sw { width: 16px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.legend-sw.legend-line { height: 3px; border-radius: 0; }
.legend-diamond {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
  transform: rotate(45deg);
}

/* ─── GANTT TABLE ─── */
.gantt-wrapper {
  background: white; border: 1px solid var(--light);
  border-radius: 8px; overflow-x: auto; margin-bottom: 24px;
}
table.gantt { width: 100%; border-collapse: collapse; min-width: 1200px; font-size: 12px; }

table.gantt thead th {
  background: var(--cov-navy); color: white; font-weight: 600;
  padding: 0; text-align: center; position: sticky; top: 0; z-index: 10;
  border-right: 1px solid rgba(255,255,255,0.06);
}
table.gantt thead th.week-header {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px; letter-spacing: 0.3px; padding: 10px 2px; font-weight: 700;
}
table.gantt thead th.day-header {
  font-size: 9px; font-weight: 500; padding: 3px 1px;
  color: rgba(255,255,255,0.5); background: var(--cov-navy-deep);
}
table.gantt thead th.task-col {
  text-align: left; padding: 10px 12px; min-width: 275px; width: 275px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
  position: sticky; left: 0; top: 0; z-index: 11;
}
table.gantt thead th.notes-col {
  text-align: left; padding: 10px 12px; min-width: 210px; width: 210px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px;
}
table.gantt thead th.crew-col {
  padding: 10px 4px; min-width: 52px; width: 52px;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.6px;
}

table.gantt tbody td {
  padding: 0; height: 27px; border-bottom: 1px solid #e1e2ed;
  vertical-align: middle; position: relative;
}
table.gantt tbody td.task-cell {
  padding: 4px 12px; font-size: 11.5px; font-weight: 400; color: var(--dark);
  white-space: nowrap; border-right: 1px solid #e1e2ed; background: white;
  position: sticky; left: 0; z-index: 5;
}
table.gantt tbody td.notes-cell {
  padding: 4px 10px; font-size: 10.5px; color: var(--mid);
  border-right: 1px solid #e1e2ed; white-space: nowrap; background: white;
}
table.gantt tbody td.crew-cell {
  padding: 4px 4px; font-size: 11px; font-weight: 600; text-align: center;
  color: var(--grey); border-right: 1px solid #e1e2ed; background: white;
}
table.gantt tbody td.day-cell {
  border-right: 1px solid #e9e9f2; min-width: 25px; width: 25px;
}
table.gantt tbody td.day-cell.weekend { background: rgba(43,45,107,0.04); }
table.gantt tbody td.day-cell.week-start { border-left: 1px solid #cbcdda; }

/* Gantt bars */
.bar {
  position: absolute; top: 4px; bottom: 4px; border-radius: 3px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 700; color: rgba(255,255,255,0.9);
  letter-spacing: 0.3px; overflow: hidden;
}
.bar.hatched {
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 3px,
    rgba(255,255,255,0.18) 3px, rgba(255,255,255,0.18) 6px
  );
}

/* ─── STATUS BARS (tracking) — base bar = light tint, .bar-fill = % complete ─── */
.bar { background: var(--st-planned); }
.bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: inherit; z-index: 1;
}
.bar.st-done    { background: rgba(54,143,70,0.32); }
.bar.st-done    .bar-fill { background: var(--st-done); }
.bar.st-active  { background: rgba(36,37,90,0.28); box-shadow: inset 0 0 0 1px rgba(36,37,90,0.6); }
.bar.st-active  .bar-fill { background: var(--st-active); }
.bar.st-ontrack { background: rgba(60,126,200,0.34); }
.bar.st-ontrack .bar-fill { background: var(--st-ontrack); }
.bar.st-atrisk  { background: rgba(204,128,32,0.28); box-shadow: inset 0 0 0 1.5px var(--st-atrisk);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px,
    rgba(204,128,32,0.40) 4px, rgba(204,128,32,0.40) 8px); }
.bar.st-atrisk  .bar-fill { background: var(--st-atrisk); }
.bar.st-delayed { background: rgba(168,49,36,0.26); box-shadow: inset 0 0 0 1.5px var(--st-delayed);
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 4px,
    rgba(168,49,36,0.38) 4px, rgba(168,49,36,0.38) 8px); }
.bar.st-delayed .bar-fill { background: var(--st-delayed); }
.bar.st-planned { background: rgba(127,129,158,0.38); }
.bar.st-planned .bar-fill { background: var(--st-planned); }

/* Parent step roll-up bars — thinner, framed */
.bar.bar-rollup { top: 9px; bottom: 9px; border-radius: 2px; opacity: 0.95; }
tr.is-subtask .bar.bar-rollup { top: 9px; bottom: 9px; }

/* Milestone marker on the grid */
.ms-marker {
  position: absolute; width: 12px; height: 12px; background: var(--st-atrisk);
  border: 2px solid white; transform: rotate(45deg);
  top: 50%; margin-top: -6px; left: 50%; margin-left: -6px; z-index: 3;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; transition: transform 0.1s;
}
.ms-marker:hover, .ms-marker:focus-visible { transform: rotate(45deg) scale(1.25); outline: none; }
/* Forecast (progress-based) marker — green, distinct from the amber baseline */
.ms-marker.ms-forecast { background: var(--st-done); box-shadow: 0 0 0 2px rgba(54,143,70,0.25), 0 1px 3px rgba(0,0,0,0.2); z-index: 4; }
.legend-diamond.ms-forecast { background: var(--st-done); border: none; }

/* Status pill + note in the Status column */
.status-cell { white-space: normal; line-height: 1.4; }
.status-pill {
  display: inline-block; font-size: 8.5px; font-weight: 700; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.4px; color: white;
  padding: 3px 6px; border-radius: 10px; vertical-align: middle;
}
.status-pill.st-done    { background: var(--st-done); }
.status-pill.st-active  { background: var(--st-active); }
.status-pill.st-ontrack { background: var(--st-ontrack); }
.status-pill.st-atrisk  { background: var(--st-atrisk); }
.status-pill.st-delayed { background: var(--st-delayed); }
.status-pill.st-planned { background: var(--st-planned); }
.status-note { font-size: 10px; color: var(--mid); margin-left: 6px; }
.wbs-cell { font-variant-numeric: tabular-nums; font-size: 10px; }

/* At-risk row emphasis */
tr.is-risk td.task-cell { border-left: 3px solid var(--st-atrisk); }
tr.is-delayed td.task-cell { border-left: 3px solid var(--st-delayed); }
tr.is-subtask.is-risk td.task-cell { padding-left: 29px; }

/* Legend swatches by status */
.legend-sw.st-done    { background: var(--st-done); }
.legend-sw.st-active  { background: var(--st-active); }
.legend-sw.st-ontrack { background: var(--st-ontrack); }
.legend-sw.st-atrisk  { background: var(--st-atrisk); }
.legend-sw.st-delayed { background: var(--st-delayed); }
.legend-sw.st-planned { background: var(--st-planned); }
.legend-diamond.st-atrisk { background: var(--st-atrisk); }

/* ─── PROGRESS SUMMARY STRIP ─── */
.status-summary {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  padding: 12px 18px; background: white; border: 1px solid var(--light);
  border-radius: 8px; margin-bottom: 18px;
}
.summary-label { font-size: 12px; color: var(--grey); white-space: nowrap; }
.summary-label strong {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 16px; color: var(--cov-navy);
}
.summary-bar {
  flex: 1; min-width: 160px; height: 10px; background: var(--offwhite);
  border: 1px solid var(--light); border-radius: 6px; overflow: hidden;
}
.summary-bar-fill {
  height: 100%; background: linear-gradient(90deg, var(--st-done), var(--cov-green-light));
  border-radius: 6px 0 0 6px;
}
.summary-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.summary-chip {
  font-size: 10px; font-weight: 700; color: white; padding: 4px 9px;
  border-radius: 12px; letter-spacing: 0.3px;
}
.summary-chip.st-done    { background: var(--st-done); }
.summary-chip.st-active  { background: var(--st-active); }
.summary-chip.st-ontrack { background: var(--st-ontrack); }
.summary-chip.st-atrisk  { background: var(--st-atrisk); }
.summary-chip.st-delayed { background: var(--st-delayed); }
.summary-chip.st-planned { background: var(--st-planned); }

/* Milestone register diamond colours */
.ms-diamond.st-done    { background: var(--st-done); }
.ms-diamond.st-active  { background: var(--st-active); }
.ms-diamond.st-ontrack { background: var(--st-ontrack); }
.ms-diamond.st-atrisk  { background: var(--st-atrisk); }
.ms-diamond.st-delayed { background: var(--st-delayed); }
.ms-diamond.st-planned { background: var(--st-planned); }

/* Weekend day-header (Sat/Sun) */
table.gantt thead th.day-header.wk { color: rgba(255,255,255,0.32); }

/* ─── ACCELERATION & REDUNDANCY PANEL ─── */
.accel-panel .info-panel-body { padding: 16px 18px; }
.accel-intro { font-size: 12px; color: var(--grey); line-height: 1.6; margin-bottom: 14px; }
.accel-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 12px;
}
.accel-item {
  background: var(--cov-green-pale); border: 1px solid #cdeccf;
  border-radius: 8px; padding: 12px 14px;
}
.accel-metric {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800;
  font-size: 22px; color: var(--cov-green-dark); line-height: 1; margin-bottom: 8px;
}
.accel-text { font-size: 11px; color: var(--charcoal); line-height: 1.5; }
.accel-text strong { color: var(--cov-navy); }
.accel-note {
  font-size: 11px; color: var(--mid); line-height: 1.55; font-style: italic;
  border-top: 1px dashed var(--light); padding-top: 10px;
}
@media (max-width: 900px) { .accel-grid { grid-template-columns: 1fr 1fr; } }

/* Progress "as-at" data-date line */
.asat-line {
  position: absolute; top: 0; width: 2px; z-index: 6; pointer-events: none;
  background: var(--st-done);
  background-image: repeating-linear-gradient(180deg, var(--st-done), var(--st-done) 4px, transparent 4px, transparent 8px);
}
.asat-line::before {
  content: 'As-at 29 Jun'; position: absolute; top: -2px; right: 4px;
  background: var(--st-done); color: white;
  font-size: 9px; font-weight: 700; letter-spacing: 0.3px;
  padding: 2px 5px; border-radius: 3px; white-space: nowrap;
}

/* Phase group headers */
tr.phase-row td {
  background: var(--offwhite) !important;
  border-bottom: 1px solid #cbcdda; height: 30px;
}
tr.phase-row td.task-cell {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--cov-navy);
  background: var(--offwhite) !important; padding-left: 12px;
}

/* Hold point diamond */
.hold-point {
  position: absolute; width: 12px; height: 12px; background: var(--hold-point);
  border: 2px solid white; transform: rotate(45deg);
  top: 50%; margin-top: -6px; z-index: 3; box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  left: 50%; margin-left: -6px;
}

/* ─── INFO PANELS ─── */
/* align-items:start so each panel is its own natural height. Stretched, a short panel
   beside a long one (Contract & Scope Basis has 8 bullets, Open Items has 12) gained a
   large empty tail that read as missing content rather than as a shorter list. */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px;
  align-items: start; }
/* A panel that spans both columns is a full-width block, not a column — it must still
   stretch, or a table inside it collapses to its content width. */
.info-grid > .info-panel[style*="1/-1"] { align-self: stretch; }
.info-panel { background: white; border: 1px solid var(--light); border-radius: 8px; overflow: hidden; }
.info-panel-header {
  background: var(--cov-navy); color: white;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; padding: 10px 16px;
}
.info-panel-body { padding: 14px 16px; }
/* A bullet beside flowing text is an INDENT problem, not a flex one.
   These rows were `display: flex`, which makes the ::before bullet a flex item — and
   every inline child of the li a flex item alongside it. Covalent's lists were plain
   text, so one text node meant one item and it looked fine. These lists carry <strong>
   and <em> throughout, and each one became its own column: "Contract 367043 , executed
   as a deed ... PO 61247912 Rev 0" broke into fragments laid out side by side with the
   words out of order.
   Indenting the row and hanging the bullet in the padding lets the content lay out as
   ordinary inline text, however much markup is in it. */
.info-panel-body ul { list-style: none; padding: 0; margin: 0; }
.info-panel-body li {
  font-size: 11.5px; color: var(--grey); padding: 6px 0 6px 16px;
  border-bottom: 1px solid #f0f0f5; line-height: 1.6;
  position: relative;
}
.info-panel-body li:last-child { border: none; }
.info-panel-body li::before {
  /* Centred on the first line: 6px top padding + half of the 1.6 line box, less half
     the bullet. Eyeballed higher first and it floated above the cap line. */
  content: '●'; color: var(--cov-green); font-size: 7px;
  position: absolute; left: 2px; top: 1.02em;
}
/* Emphasis inside a bullet is a phrase, not a block — keep it from being the thing
   that decides where the line breaks. */
.info-panel-body li strong { font-weight: 700; color: var(--charcoal); }

/* ─── DATA TABLES ─── */
table.hc, table.equip { width: 100%; border-collapse: collapse; font-size: 11px; }
table.hc th, table.equip th {
  background: var(--offwhite); font-weight: 600; padding: 8px 10px;
  text-align: center; border-bottom: 2px solid var(--light);
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px; letter-spacing: 0.3px;
}
table.hc th:first-child, table.equip th:first-child { text-align: left; }
table.hc td, table.equip td {
  padding: 6px 10px; text-align: center; border-bottom: 1px solid #f0f0f5; color: var(--grey);
}
table.hc td:first-child, table.equip td:first-child { text-align: left; font-weight: 500; color: var(--dark); }
/* equip tables are text columns — left-align headers to match their (left-aligned) data */
table.equip th, table.equip td { text-align: left; }
table.hc tr.total-row td {
  font-weight: 700; color: var(--dark);
  border-top: 2px solid var(--cov-navy); background: var(--offwhite);
}
table.hc td.peak { background: rgba(43,45,107,0.05); color: var(--cov-navy); font-weight: 700; }
.section-label td {
  font-weight: 700; color: var(--cov-navy) !important; background: var(--offwhite) !important;
  font-size: 9px !important; text-transform: uppercase; letter-spacing: 1px; padding: 6px 10px !important;
}
.tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.tag-srg { color: var(--srg-red); }
.tag-hire { color: var(--cov-navy-light); }
.tag-client { color: var(--cov-green-dark); }
.tag-tbc { color: var(--hold-point); }

/* ─── FOOTER ─── */
.footer {
  text-align: center; padding: 20px; font-size: 10px; color: var(--mid);
  border-top: 2px solid var(--cov-green); margin-top: 16px;
}
.footer strong { color: var(--cov-navy); }
.footer .prepared { font-size: 9px; color: var(--mid); margin-top: 6px; }

/* ─── ACCESSIBILITY ─── */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cov-navy); color: white; padding: 8px 14px;
  font-size: 12px; font-weight: 600; border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ─── GANTT CONTROLS BAR ─── */
.gantt-controls {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 10px 14px; background: white; border: 1px solid var(--light);
  border-radius: 8px; margin-bottom: 12px;
}
.control-group { display: flex; gap: 6px; align-items: center; }
.control-right { margin-left: auto; }
.control-search {
  position: relative; flex: 1; min-width: 220px; max-width: 420px;
}
.control-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--mid); font-size: 14px; pointer-events: none;
}
#gantt-search {
  width: 100%; padding: 7px 10px 7px 28px; font-size: 12px;
  font-family: inherit; color: var(--dark);
  border: 1px solid var(--light); border-radius: 6px; background: var(--offwhite);
  transition: border-color 0.15s, background 0.15s;
}
#gantt-search:focus {
  outline: none; border-color: var(--cov-navy); background: white;
  box-shadow: 0 0 0 3px rgba(43,45,107,0.08);
}
.ctrl-btn {
  font-family: inherit; font-size: 11px; font-weight: 600;
  letter-spacing: 0.3px; padding: 7px 12px; border-radius: 6px;
  border: 1px solid var(--light); background: white; color: var(--grey);
  cursor: pointer; transition: all 0.15s;
}
.ctrl-btn:hover { border-color: var(--cov-navy); color: var(--cov-navy); }
.ctrl-btn:focus-visible {
  outline: none; border-color: var(--cov-navy);
  box-shadow: 0 0 0 3px rgba(43,45,107,0.12);
}
.ctrl-btn.active {
  background: var(--cov-navy); color: white; border-color: var(--cov-navy);
}
.ctrl-btn-primary {
  background: var(--cov-green); color: white; border-color: var(--cov-green);
}
.ctrl-btn-primary:hover {
  background: var(--cov-green-dark); color: white; border-color: var(--cov-green-dark);
}

/* ─── GANTT INTERACTIVITY ─── */
.gantt-wrapper { position: relative; }

tr.phase-row { cursor: pointer; user-select: none; transition: background 0.15s; }
tr.phase-row:hover td.task-cell { background: #ecedf5 !important; }
tr.phase-row:focus-visible {
  outline: 2px solid var(--cov-navy); outline-offset: -2px;
}
.caret {
  display: inline-block; font-size: 9px; margin-right: 2px;
  transition: transform 0.2s; color: var(--cov-navy);
}
tr.phase-row.collapsed .caret { transform: rotate(-90deg); }

.bar {
  cursor: pointer; transition: transform 0.1s, box-shadow 0.1s;
}
.bar:hover, .bar:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  outline: none; z-index: 4;
}
.bar-critical {
  box-shadow: inset 0 0 0 1.5px var(--srg-red);
}
tr.is-critical td.task-cell {
  border-left: 3px solid var(--srg-red);
}

/* ─── SUB-TASK ROWS ─── */
tr.is-subtask td.task-cell {
  padding-left: 32px; font-size: 10.5px; font-weight: 400;
  color: var(--grey);
}
tr.is-subtask td.task-cell::before {
  content: '↳'; color: var(--mid); margin-right: 6px; font-size: 10px;
}
tr.is-subtask td.notes-cell { font-size: 10px; color: var(--mid); }
tr.is-subtask td.crew-cell { color: var(--mid); font-weight: 500; }
tr.is-subtask td { height: 23px; }
tr.is-subtask .bar {
  top: 7px; bottom: 7px; opacity: 0.82; border-radius: 2px;
}
tr.is-subtask.is-critical td.task-cell {
  border-left: 3px solid var(--srg-red);
  padding-left: 29px;
}

.hold-point { cursor: pointer; transition: transform 0.1s; }
.hold-point:hover, .hold-point:focus-visible {
  transform: rotate(45deg) scale(1.25);
  outline: none;
}

td.day-cell.has-night::after {
  content: ''; position: absolute; left: 0; right: -1px; bottom: 0;
  height: 3px; background: var(--night-shift); opacity: 0.6; z-index: 1;
}

/* ─── TODAY LINE ─── */
.today-line {
  position: absolute; top: 0; width: 2px; background: var(--srg-red);
  pointer-events: none; z-index: 6; box-shadow: 0 0 6px rgba(204,0,0,0.35);
}
.today-line::before {
  content: attr(data-label); position: absolute; top: -2px; left: 4px;
  background: var(--srg-red); color: white;
  font-size: 9px; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 5px; border-radius: 3px; white-space: nowrap;
}
.today-badge {
  padding: 10px 14px; background: #fffbe6; border: 1px solid #f5e6a8;
  border-radius: 8px; margin-bottom: 10px;
  font-size: 11px; color: var(--grey); font-weight: 500;
}

/* ─── TOOLTIP ─── */
.gantt-tip {
  position: absolute; background: var(--dark); color: white;
  padding: 8px 11px; font-size: 11px; line-height: 1.5; font-weight: 500;
  border-radius: 5px; white-space: pre-line; pointer-events: none;
  max-width: 280px; z-index: 999; opacity: 0;
  transform: translateY(4px); transition: opacity 0.12s, transform 0.12s;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.gantt-tip.visible { opacity: 1; transform: translateY(0); }
.gantt-tip::after {
  content: ''; position: absolute; bottom: -5px; left: 50%;
  margin-left: -5px; border: 5px solid transparent; border-top-color: var(--dark);
}

/* ─── PANEL HEADER COUNT ─── */
.info-panel-header {
  display: flex; align-items: center; justify-content: space-between;
}
.panel-count {
  font-size: 10px; font-weight: 500; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.7); text-transform: none;
}

/* ─── MILESTONES TABLE ─── */
table.milestones td { color: var(--dark); }
.ms-diamond {
  display: inline-block; width: 10px; height: 10px;
  background: var(--hold-point); transform: rotate(45deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* ─── DELIVERABLES TABLE HELPERS ─── */
.cell-sub { display: block; font-size: 9.5px; color: var(--mid); font-weight: 400; margin-top: 2px; }
.doc-link {
  font-size: 11px; font-weight: 600; color: var(--cov-navy);
  text-decoration: none; white-space: nowrap;
}
.doc-link:hover, .doc-link:focus-visible { color: var(--cov-green-dark); text-decoration: underline; outline: none; }
.doc-none { font-size: 10px; color: var(--mid); font-style: italic; }

/* ─── SAFETY DOCUMENT LIBRARY ─── */
.doc-library { padding: 16px 18px; }
.doc-group { margin-bottom: 16px; }
.doc-group:last-child { margin-bottom: 0; }
.doc-group-title {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--cov-navy); margin-bottom: 8px;
  padding-bottom: 5px; border-bottom: 1px solid var(--light);
}
@media (min-width: 901px) {
  .doc-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
  .doc-group-title { grid-column: 1 / -1; }
}
.doc-card {
  display: grid; grid-template-columns: 24px 1fr 20px; align-items: center;
  gap: 10px; padding: 9px 12px; margin-bottom: 6px;
  background: white; border: 1px solid var(--light); border-radius: 7px;
  text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.doc-card:last-child { margin-bottom: 0; }
.doc-card:hover, .doc-card:focus-visible {
  border-color: var(--cov-navy); box-shadow: 0 2px 10px rgba(43,45,107,0.12);
  transform: translateY(-1px); outline: none;
}
.doc-icon { font-size: 16px; line-height: 1; text-align: center; }
.doc-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.doc-name {
  font-size: 12px; font-weight: 600; color: var(--dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.doc-sub {
  font-size: 10px; color: var(--mid); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.doc-dl {
  font-size: 15px; color: var(--mid); text-align: center; transition: color 0.15s;
}
.doc-card:hover .doc-dl, .doc-card:focus-visible .doc-dl { color: var(--cov-green-dark); }

/* ─── HISTOGRAM ─── */
.chart-host { width: 100%; }
.chart-host svg { display: block; }

/* ─── TABS ─── */
.tabs {
  display: flex; gap: 2px; align-items: stretch;
  background: white; border-bottom: 1px solid var(--light);
  padding: 0 40px; position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.tab-btn {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: 0.2px; color: var(--mid);
  background: none; border: none; cursor: pointer;
  padding: 14px 20px; position: relative; transition: color 0.15s;
}
.tab-btn:hover { color: var(--cov-navy); }
.tab-btn::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 3px; border-radius: 3px 3px 0 0; background: transparent; transition: background 0.15s;
}
.tab-btn.active { color: var(--cov-navy); font-weight: 700; }
.tab-btn.active::after { background: var(--cov-green); }
.tab-btn:focus-visible { outline: none; color: var(--cov-navy); }
.tab-btn:focus-visible::after { background: var(--cov-navy); }
.tab-panel[hidden] { display: none; }

/* ─── DAILY UPDATES FEED ─── */
.updates-feed { position: relative; }
.update-card {
  background: white; border: 1px solid var(--light); border-radius: 8px;
  border-left: 3px solid var(--cov-green); margin-bottom: 14px; overflow: hidden;
}
.update-card.is-milestone { border-left-color: var(--hold-point); background: #fffdf5; }
.update-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 18px; border-bottom: 1px solid #f0f0f5; background: var(--offwhite);
}
.update-date {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 14px;
  color: var(--cov-navy); min-width: 96px;
}
.update-author { font-size: 12px; font-weight: 600; color: var(--grey); flex: 1; min-width: 160px; }
.update-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.update-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  padding: 4px 9px; border-radius: 12px; white-space: nowrap;
}
.update-tag.safe { background: var(--cov-green-pale); color: var(--cov-green-dark); }
.update-tag.alert { background: #f7e3c4; color: #8a5200; border: 1px solid #d69a3f; }
.update-tag.crew { background: rgba(43,45,107,0.08); color: var(--cov-navy); }
.update-tag.ms   { background: var(--hold-point); color: white; }
.update-body {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0; padding: 4px 0;
}
.update-sec { padding: 10px 18px; }
.update-sec h5 {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px; color: var(--cov-navy);
  margin-bottom: 7px;
}
.update-sec.forecast h5 { color: var(--cov-green-dark); }
.update-sec.concerns h5 { color: var(--st-risk-strong); }
.update-sec ul { list-style: none; padding: 0; margin: 0; }
.update-sec li {
  font-size: 11.5px; color: var(--grey); line-height: 1.5; padding: 3px 0 3px 14px;
  position: relative;
}
.update-sec li::before {
  content: '▸'; position: absolute; left: 0; color: var(--cov-green); font-size: 9px; top: 5px;
}
.update-sec.concerns li::before { content: '!'; color: var(--st-risk-strong); font-weight: 800; left: 2px; }

/* Design-engineer / external feedback callout on a card */
.update-feedback {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0 18px 14px; padding: 12px 16px;
  background: var(--cov-green-pale); border: 1px solid #cdeccf;
  border-left: 3px solid var(--cov-green); border-radius: 8px;
}
.update-feedback .fb-mark {
  font-family: Georgia, serif; font-size: 26px; line-height: 1;
  color: var(--cov-green-dark); flex-shrink: 0;
}
.fb-quote { font-size: 12.5px; color: var(--charcoal); font-style: italic; line-height: 1.5; margin: 2px 0 4px; }
.fb-from { font-size: 10.5px; color: var(--cov-green-dark); font-weight: 700; }

/* "No Work" day card */
.update-card.is-nowork { border-left-color: var(--light); opacity: 0.85; }
.update-card.is-nowork .update-head { border-bottom: none; }
.update-card.is-nowork .update-date { color: var(--grey); }
.nowork-note { font-style: italic; color: var(--mid); }
.update-tag.nowork {
  background: var(--offwhite); color: var(--mid);
  border: 1px solid var(--light); text-transform: uppercase; letter-spacing: 0.5px;
}

/* Photo strip */
.update-photos {
  display: flex; gap: 8px; padding: 12px 18px; overflow-x: auto;
  border-top: 1px solid #f0f0f5; background: var(--offwhite);
}
.update-photo {
  flex: 0 0 auto; display: block; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--light); line-height: 0; transition: transform 0.12s, box-shadow 0.12s;
}
.update-photo img { height: 92px; width: auto; display: block; object-fit: cover; }
.update-photo:hover, .update-photo:focus-visible {
  transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  outline: none; border-color: var(--cov-navy);
}

/* ─── LATEST UPDATE SNIPPET (Overview) ─── */
#latest-update { border-left: 3px solid var(--cov-green); }
.latest-body { padding: 14px 18px; }
.latest-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.latest-date {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 14px; color: var(--cov-navy);
}
.latest-list { list-style: none; padding: 0; margin: 0 0 10px; }
.latest-list li {
  font-size: 12px; color: var(--grey); line-height: 1.5; padding: 3px 0 3px 14px; position: relative;
}
.latest-list li::before { content: '▸'; position: absolute; left: 0; color: var(--cov-green); font-size: 9px; top: 5px; }
.latest-link {
  font-family: inherit; font-size: 11.5px; font-weight: 700; color: var(--cov-navy);
  background: none; border: none; padding: 0; cursor: pointer;
}
.latest-link:hover { color: var(--cov-green-dark); text-decoration: underline; }

/* ─── CONTRACT NOTICES REGISTER ─── */
.notices { display: flex; flex-direction: column; gap: 8px; }
.notice { border: 1px solid var(--light); border-radius: 8px; overflow: hidden; background: white; }
.notice.open { border-color: var(--cov-navy); }
.notice-head {
  width: 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 14px; background: white; border: none; cursor: pointer;
  font-family: inherit; text-align: left; transition: background 0.12s;
}
.notice-head:hover { background: var(--offwhite); }
.notice-head:focus-visible { outline: 2px solid var(--cov-navy); outline-offset: -2px; }
.notice-type {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px;
  color: white; padding: 3px 8px; border-radius: 5px; flex-shrink: 0;
}
.type-ncr        { background: var(--srg-red); }
.type-concession { background: var(--cov-green-dark); }
.type-variation  { background: var(--cov-navy); }
.type-eot        { background: var(--st-atrisk); }
.type-notice     { background: var(--grey); }
.type-payment    { background: #137a8a; }
.notice-ref { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 12px; color: var(--cov-navy); flex-shrink: 0; }
.notice-title { font-size: 12.5px; color: var(--dark); font-weight: 600; flex: 1; min-width: 160px; }
.notice-date { font-size: 10px; color: var(--mid); }
.notice-caret { font-size: 10px; color: var(--cov-navy); transition: transform 0.2s; flex-shrink: 0; }
.notice.open .notice-caret { transform: rotate(180deg); }
.notice-drawer { padding: 4px 16px 14px; border-top: 1px solid #f0f0f5; background: var(--offwhite); }
.nr-list { margin: 10px 0 0; }
.nr-row { display: grid; grid-template-columns: 150px 1fr; gap: 10px; padding: 5px 0; border-bottom: 1px solid #eceef5; }
.nr-row:last-child { border-bottom: none; }
.nr-row dt { font-size: 10.5px; font-weight: 700; color: var(--cov-navy); text-transform: uppercase; letter-spacing: 0.3px; }
.nr-row dd { font-size: 11.5px; color: var(--grey); line-height: 1.5; margin: 0; }
.notice-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notice-link {
  font-size: 11px; font-weight: 600; color: var(--cov-navy); text-decoration: none;
  background: white; border: 1px solid var(--light); border-radius: 6px; padding: 4px 10px;
}
.notice-link:hover { border-color: var(--cov-navy); color: var(--cov-green-dark); }
@media (max-width: 900px) { .nr-row { grid-template-columns: 1fr; gap: 2px; } }

/* ─── WEATHER & LIFTING OUTLOOK ─── */
.wx-host { width: 100%; }
.wx-strip {
  position: relative; display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(118px, 1fr); gap: 8px;
  overflow-x: auto; padding-bottom: 6px; scroll-behavior: smooth;
}
.wx-tile {
  border: 1px solid var(--light); border-top: 4px solid var(--mid);
  border-radius: 8px; padding: 10px 8px; text-align: center; background: white;
}
.wx-tile.wx-fc { border-style: dashed; }
.wx-tile.wx-today { box-shadow: inset 0 0 0 2px var(--cov-navy); }
.wx-tag {
  display: inline-block; font-size: 8px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.4px; color: var(--mid); margin-bottom: 2px;
}
.wx-tag-today { color: var(--cov-navy); }
.wx-tag-rec { color: var(--cov-green-dark); }
.wx-tile.wx-ok   { border-top-color: var(--cov-green);  background: var(--cov-green-pale); }
.wx-tile.wx-marg { border-top-color: var(--st-atrisk);  background: #fff7ea; }
.wx-tile.wx-high { border-top-color: var(--srg-red);    background: #fdecea; }
.wx-day { font-size: 11px; font-weight: 700; color: var(--cov-navy); }
.wx-ic { font-size: 13px; }
.wx-gust {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 22px; font-weight: 800;
  color: var(--dark); margin: 5px 0 2px;
}
.wx-gust span { display: block; font-size: 8.5px; font-weight: 600; color: var(--mid); letter-spacing: 0.3px; }
.wx-sub { font-size: 9.5px; color: var(--grey); }
.wx-flag { font-size: 10px; font-weight: 700; color: var(--st-risk-strong); margin-top: 6px; line-height: 1.3; }
.wx-note { font-size: 9px; color: var(--mid); margin-top: 5px; }
.wx-loading, .wx-error { font-size: 12px; color: var(--mid); padding: 10px 2px; }
.wx-disclaimer { font-size: 9.5px; color: var(--mid); font-style: italic; margin-top: 10px; line-height: 1.4; }
@media (max-width: 900px) {
  .wx-strip { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(130px, 1fr); overflow-x: auto; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .header { padding: 16px 18px; flex-wrap: wrap; gap: 16px; }
  .container { padding: 16px; }
  .tabs { padding: 0 8px; overflow-x: auto; }
  .tab-btn { padding: 12px 14px; font-size: 12px; white-space: nowrap; }
  .key-info { grid-template-columns: repeat(2, 1fr); }
  .key-info-value { font-size: 16px; }
  .info-grid { grid-template-columns: 1fr; }
  .gantt-controls { flex-direction: column; align-items: stretch; }
  .control-group { flex-wrap: wrap; }
  .control-right { margin-left: 0; }
  .update-body { grid-template-columns: 1fr; }
}

/* ─── PRINT  —  reveal every tab so the whole pack prints ─── */
@media print {
  @page { size: A3 landscape; margin: 10mm; }
  body { font-size: 9px; background: white; }
  .container { padding: 0; max-width: 100%; }
  .tabs, .gantt-controls, .skip-link { display: none !important; }
  .tab-panel[hidden] { display: block !important; }
  .tab-panel { page-break-before: always; }
  #tab-overview { page-break-before: avoid; }
  .gantt-wrapper { overflow: visible; border: none; }
  table.gantt { min-width: auto; page-break-inside: avoid; }
  .info-panel, .update-card { page-break-inside: avoid; }
  .today-line { display: none; }
  .header { padding: 10px 12px; }
  .bar:hover { transform: none; box-shadow: none; }
  .ticket-modal { display: none !important; }
}

/* ─────────────────────────────────────────────────────────
   TRAINING MATRIX
   ───────────────────────────────────────────────────────── */
.tm-host { width: 100%; }
.tm-scroll { overflow-x: auto; border: 1px solid #e6e7f0; border-radius: 10px; background: white; }
table.training-matrix { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
table.training-matrix th, table.training-matrix td { border-bottom: 1px solid #eef0f6; border-right: 1px solid #f2f3f8; }

table.training-matrix thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--cov-navy); color: white; font-weight: 600;
}
table.training-matrix th.tm-ticket-col {
  width: 40px; min-width: 40px; padding: 8px 0 10px; vertical-align: bottom; text-align: center;
}
table.training-matrix th.tm-ticket-col span {
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.2px; display: inline-block;
}
table.training-matrix th.tm-held-col { width: 52px; min-width: 52px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; vertical-align: bottom; padding-bottom: 10px; }

table.training-matrix th.tm-name-col {
  position: sticky; left: 0; z-index: 3; text-align: left;
  min-width: 200px; width: 200px; padding: 8px 12px;
}
table.training-matrix thead th.tm-name-col { z-index: 4; vertical-align: bottom; font-size: 10px; text-transform: uppercase; letter-spacing: 0.8px; }
table.training-matrix tbody th.tm-name-col { background: white; color: var(--dark); font-weight: 400; }
table.training-matrix tbody tr:hover th.tm-name-col,
table.training-matrix tbody tr:hover td { background: var(--offwhite); }

.tm-name-col { display: table-cell; }
table.training-matrix tbody th.tm-name-col { white-space: nowrap; }
.tm-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: 9px; background: #e9ebf3; border: 1px solid #dfe1ec; }
.tm-avatar-blank { display: inline-block; }
.tm-name { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1.25; }
.tm-name strong { font-weight: 700; color: var(--cov-navy); font-size: 12.5px; }
.tm-role { font-size: 10px; color: var(--grey); }

td.tm-cell { text-align: center; height: 34px; padding: 0; }
td.tm-no { color: #cfd2e0; font-weight: 700; }
.tm-tick {
  width: 26px; height: 26px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(39,174,96,0.13); color: var(--st-done); font-size: 14px; font-weight: 800;
  line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all .12s ease;
}
.tm-tick:hover, .tm-tick:focus-visible { background: var(--st-done); color: white; transform: scale(1.12); outline: none; }
.tm-voc { width: auto; min-width: 30px; padding: 0 7px; border-radius: 13px; gap: 1px; }
.tm-voc-n { font-size: 9px; font-weight: 800; }
.voc-item { margin-bottom: 20px; text-align: left; }
.voc-item:last-child { margin-bottom: 0; }
.voc-item-title { font-weight: 700; color: var(--cov-navy); font-size: 13px; margin-bottom: 6px; }
.voc-item-title .ticket-open { margin: 0 0 0 8px; font-size: 11px; }
.voc-frame { width: 100%; height: 60vh; border: 1px solid #e6e7f0; border-radius: 6px; }
td.tm-held { text-align: center; font-weight: 700; color: var(--cov-navy); font-size: 12px; }
.tm-held-tot { color: var(--grey); font-weight: 500; }

/* ─── Gantt bar overrun (planned → +1 day → over target) ─── */
.legend-sw.legend-overrun {
  background: linear-gradient(to right,
    var(--st-done) 0 55%, var(--hold-point) 55% 70%, var(--st-delayed) 70% 100%);
}
.bar.bar-overrun { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }

/* ─── Roster (Workforce tab) ─── */
.roster-draft-banner {
  background: #fdf3e3; border: 1px solid #f0c674; color: #8a5a00;
  border-radius: 8px; padding: 10px 14px; font-size: 12.5px; line-height: 1.45;
}
.roster-draft-banner strong { color: #7a4f00; }
.rs-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 4px; font-size: 10px; font-weight: 800; color: white;
  vertical-align: middle; margin: 0 1px;
}
.rs-ds-key { background: var(--cov-navy); }
.rs-ns-key { background: var(--night-shift); }

table.roster-table th.rs-date-col {
  width: 30px; min-width: 30px; padding: 6px 0; vertical-align: bottom; line-height: 1.15;
}
table.roster-table th.rs-date-col .rs-dow { display: block; font-size: 8.5px; font-weight: 500; opacity: 0.7; }
table.roster-table th.rs-date-col .rs-dom { display: block; font-size: 9.5px; font-weight: 700; }
table.roster-table th.rs-date-col.rs-weekend { background: var(--cov-navy-deep); }

td.rs-cell { text-align: center; height: 30px; padding: 0; width: 30px; }
td.rs-cell.rs-weekend { background: rgba(43,45,107,0.04); }
td.rs-cell.rs-off { color: #cfd2e0; }
.rs-cell.rs-ds span, .rs-cell.rs-ns span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 5px; font-size: 11px; font-weight: 800; color: white;
}
.rs-cell.rs-ds span { background: var(--cov-navy); }
.rs-cell.rs-ns span { background: var(--night-shift); }

/* Ticket viewer modal */
.ticket-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.ticket-modal.open { display: block; }
.ticket-modal-backdrop { position: absolute; inset: 0; background: rgba(15,18,40,0.72); }
.ticket-modal-box {
  position: relative; max-width: 900px; margin: 4vh auto; background: white; border-radius: 12px;
  max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 70px rgba(0,0,0,0.45);
}
.ticket-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eee; }
.ticket-modal-title { font-weight: 700; color: var(--cov-navy); font-size: 14px; }
.ticket-modal-close { border: none; background: none; font-size: 18px; cursor: pointer; color: var(--mid); line-height: 1; }
.ticket-modal-close:hover { color: var(--dark); }
.ticket-modal-body { padding: 14px; overflow: auto; text-align: center; }
.ticket-img { max-width: 100%; max-height: 76vh; border-radius: 6px; }
.ticket-frame { width: 100%; height: 76vh; border: none; }
.ticket-open { display: inline-block; margin-top: 10px; font-size: 12px; color: var(--cov-navy); font-weight: 600; }

@media (max-width: 640px) {
  table.training-matrix th.tm-name-col { min-width: 150px; width: 150px; }
}

/* Lifting-band key chips in the control table. They reuse the tile state classes so a
   band can never be recoloured in one place and not the other — the legend and the
   tiles are the same three colours by construction. */
.wx-key{display:inline-block;padding:2px 10px;border-radius:6px;font-weight:800;
  font-size:12px;letter-spacing:.02em;border:1px solid rgba(0,0,0,.12)}
/* The tile state rules above are scoped to .wx-tile, so the chips restate them —
   from the SAME variables, so a band cannot be recoloured in one place and not the
   other and leave the legend disagreeing with the tiles. */
.wx-key.wx-ok   { background: var(--cov-green-pale); border-color: var(--cov-green); color: var(--cov-green); }
.wx-key.wx-marg { background: #fff7ea;               border-color: var(--st-atrisk); color: #92400e; }
.wx-key.wx-high { background: #fdecea;               border-color: var(--srg-red);   color: var(--srg-red); }