/* THE MODERN SKIN (Direction B, Paul's pick 2026-08-27) - an OVERRIDE loaded
   AFTER style.css, never a rewrite of it. Removing the one <link> in
   base.html/public_base.html is the whole rollback.

   THE RULES THIS FILE MUST NEVER BREAK, inherited from style.css's tokens:
   chrome stays neutral slate; green means complete and NOTHING else; amber
   and red keep their jobs; the customer's brand.css still wins where it
   applies (it loads after this file). This skin changes presentation only -
   typography, depth, spacing, softness - and redefines no status colour.

   Two structural facts found while adapting the approved preview, both
   load-bearing:
   - full-bleed banners (.item-header, .section-summary) cancel the card's
     padding with EXACT -24px margins, so the card's horizontal padding must
     stay 24px or every bleed under-shoots by the difference;
   - .section-summary is "deliberately identical to .card > h2" (Company
     Admin's folding sections), so when the card heading changes, it changes
     with it or that page reads as a different product. */

:root {
  --bg: #EEF1F5;
  --card-radius: 16px;
  --ctl-radius: 10px;
  --shadow-card: 0 1px 2px rgba(16, 24, 32, .05), 0 8px 24px rgba(16, 24, 32, .07);
  --shadow-raise: 0 3px 8px rgba(16, 24, 32, .10), 0 14px 34px rgba(16, 24, 32, .12);
}

/* ---- typography ----------------------------------------------------------- */
body {
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, Roboto, Arial, sans-serif;
  font-size: 15.5px;
  line-height: 1.55;
  color: #1F262C;
  background: var(--bg);
}

h1 { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.hint { color: #66707A; }

/* ---- cards: white to the top, heading as text + icon chip ----------------- */
.card {
  border: 1px solid #E5E9ED;
  border-radius: var(--card-radius);
  box-shadow: var(--shadow-card);
  /* EXACTLY 24px on every side, unchanged from style.css: the full-bleed
     elements (.item-header, .section-summary) cancel it with exact -24px
     margins, and style.css never varies it by breakpoint - so neither can
     this file, or every bleed under- or over-shoots. The extra air comes
     from the gap between cards instead. */
  padding: 24px;
  margin-bottom: 26px;
}

.card > h2 {
  background: none;
  color: #1F262C;
  font-size: 1.12rem;
  font-weight: 680;
  letter-spacing: -0.01em;
  margin: -4px 0 16px;
  padding: 0 0 12px;
  border-radius: 0;
  border-bottom: 1px solid #ECEFF2;
  display: flex;
  align-items: center;
  gap: 11px;
}

/* The heading icon: from a white mark on a slate bar to a slate CHIP. Same
   SVGs, same matcher - card-icons.js is untouched. */
.card > h2 .card-icon {
  width: 32px;
  height: 32px;
  padding: 6px;
  background: var(--chrome);
  color: #fff;
  border-radius: 9px;
  flex: none;
}

/* Company Admin's folding sections, kept in step with the card heading. The
   summary still bleeds to the card edge (its open/close affordance depends on
   reading as the card's own top), so it keeps the -24px margins and takes a
   quiet tint instead of the slate bar. */
.section-summary {
  /* The tint was #EEF1F4 against a page of #EEF1F5 - a contrast ratio of
     1.00:1, which is to say the header bar was invisible and the sections
     read as one undifferentiated column (Paul, 2026-08-31). Deep enough now
     to read as a band against BOTH the page behind it and the white card
     below, and still quiet: 1.30:1 to the page, 1.48:1 to the card body,
     with the title at 10.4:1 on top of it. */
  background: #CBD6E0;
  color: #16202A;
  border-radius: 15px 15px 0 0;
  border-bottom: 1px solid #AFBECD;
}

/* style.css colours this white for the dark green bar it was written for.
   On the light bar that is white-on-near-white: three templates put a hint
   in a section header and none of it could be read. */
.section-summary .hint {
  color: #3C4753;
  opacity: 1;
}

/* ---- top bar: slate with a brand accent line ------------------------------ */
.topbar {
  background: #262C30;
  box-shadow: 0 2px 14px rgba(16, 24, 32, .22);
  border-bottom: 3px solid var(--nav-blue);
}

.nav-button {
  border-radius: 999px;
  padding: 7px 16px;
  font-weight: 600;
  transition: background .14s ease, color .14s ease;
}

.evacuate-button { border-radius: 999px; font-weight: 700; }

/* ---- controls ------------------------------------------------------------- */
/* NOT .link-button: those are the quiet in-row actions on every register, and
   giving them button bulk turns each table row into a toolbar. */
.button, button[type="submit"]:not(.link-button) {
  border-radius: var(--ctl-radius);
  font-weight: 600;
  transition: background .14s ease, box-shadow .14s ease, transform .06s ease;
}

.button { padding: 10px 20px; box-shadow: 0 1px 2px rgba(16, 24, 32, .14); }
.button:active { transform: translateY(1px); }
.link-button { border-radius: 8px; }

input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="time"], input[type="number"], input[type="search"], select, textarea {
  border: 1px solid #D2D9DF;
  border-radius: var(--ctl-radius);
  padding: 9px 12px;
  background: #FCFDFE;
  transition: border-color .14s ease, box-shadow .14s ease;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--nav-blue);
  box-shadow: 0 0 0 3px rgba(44, 74, 99, .20);
}

/* ---- registers: product tables, not spreadsheet prints -------------------- */
table { border-collapse: separate; border-spacing: 0; }

th {
  background: transparent;
  color: #66707A;
  font-weight: 650;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 2px solid #E2E7EC;
  padding: 10px 14px;
}

td {
  padding: 12px 14px;
  border-bottom: 1px solid #EEF1F4;
}

tbody tr { transition: background .1s ease; }
tbody tr:hover { background: #F4F7FA; }

/* ---- status pills with a dot ---------------------------------------------- */
.status-badge {
  border-radius: 999px;
  padding: 4px 12px 4px 9px;
  font-weight: 650;
  font-size: 0.8rem;
}

.status-badge::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 6px;
  background: currentColor;
  opacity: .9;
  vertical-align: 1px;
}

/* ---- dashboard tiles: lift on hover, traffic-light stripes untouched ------ */
.dashboard-stat {
  border-radius: var(--card-radius);
  border-color: #E5E9ED;
  box-shadow: var(--shadow-card);
  transition: box-shadow .16s ease, transform .16s ease;
}

a.dashboard-stat:hover {
  box-shadow: var(--shadow-raise);
  transform: translateY(-2px);
}

/* ---- odds and ends -------------------------------------------------------- */
/* The count is TEXT, not a progress bar: "6/6" beside a two-line label was
   being squeezed by the flex row and then CLIPPED by overflow:hidden, so it
   read "6/6" with the second half sliced off (Paul, 2026-09-01). It keeps its
   pill shape; what it no longer does is shrink or cut. */
.phase-progress {
  border-radius: 999px;
  flex: 0 0 auto;
  white-space: nowrap;
}
.phase-tab { border-radius: 999px; }

/* ...and the label takes the room that is left, wrapping instead of pushing
   the count off the end. */
.phase-tab { align-items: center; }
::selection { background: rgba(44, 74, 99, .18); }

/* ---- document actions: Preview, Print, Download, remove -------------------
   Paul, 2026-09-01: "make these buttons a little bit fancier rather than just
   text with a line underneath, so it's clear that they're a link, similar to
   the upload button. Make them all the same across the whole site."

   Keyed on WHAT THE CONTROL DOES, not on where it sits: there are 83 preview
   buttons across 52 templates, and a rule per page is a rule that drifts. One
   selector set here styles every one of them, and a new page gets it for free
   by using the same data-action as everywhere else.

   SCOPED TO DOCUMENT ACTIONS on purpose. The note above this file's .button
   rule still stands for everything else - "Stand down", "Record that I briefed
   them" and the rest are quiet in-row actions, and giving THOSE button bulk
   would turn every register row into a toolbar. What changed is that a
   document's Preview / Print / Download are a recognised trio people look for,
   and they were reading as three underlined words. */
.link-button[data-action="doc-preview"],
.link-button[data-action="print-doc"],
.doc-actions a[download],
.doc-actions .link-button,
.competency-doc-actions .link-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #C6D0DA;
  border-radius: 999px;
  background: #FFFFFF;
  color: #24303C;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(16, 24, 32, .06);
  transition: background .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.link-button[data-action="doc-preview"]:hover,
.link-button[data-action="print-doc"]:hover,
.doc-actions a[download]:hover,
.doc-actions .link-button:hover,
.competency-doc-actions .link-button:hover {
  background: #EEF3F8;
  border-color: #9FB0C2;
  box-shadow: 0 2px 4px rgba(16, 24, 32, .12);
}

/* The mark in front of each says which is which at a glance, and costs no
   template change - the pages already declare what the control does. */
.link-button[data-action="doc-preview"]::before { content: "\1F441"; }
.link-button[data-action="print-doc"]::before { content: "\1F5A8"; }
.doc-actions a[download]::before { content: "\2B07"; }

/* Removing a document keeps its warning colour - it must never be mistaken for
   one of the three safe actions beside it. Styled WHEREVER it sits, not just
   inside a doc-actions cell: the remove control is usually in its own column,
   and a bare 15px cross beside three 29px pills reads as unfinished. A
   destructive control should look like a control. */
.link-button.danger,
.doc-actions .link-button.danger,
.competency-doc-actions .link-button.danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid #E3B7B7;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.link-button.danger,
.doc-actions .link-button.danger,
.competency-doc-actions .link-button.danger {
  color: #A32020;
  border-color: #E3B7B7;
  background: #FFF7F7;
}

.link-button.danger:hover,
.doc-actions .link-button.danger:hover,
.competency-doc-actions .link-button.danger:hover {
  background: #FBE9E9;
  border-color: #C98B8B;
}

/* Room to breathe when several sit in one cell, and they wrap rather than
   forcing a table to scroll sideways. */
.doc-actions, .competency-doc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* On paper they are not controls at all. */
@media print {
  .link-button[data-action="doc-preview"],
  .link-button[data-action="print-doc"],
  .doc-actions a[download],
  .doc-actions .link-button { display: none; }
}

/* v4.56.0 (Paul: the Approve PQQ done elsewhere button was grey on grey).
   The one primary action on the PQQ row, in the site's own green, whatever
   the row's link styling does around it. */
.competency-doc-actions .button-approve-elsewhere,
.competency-doc-actions a.button-approve-elsewhere {
  background: var(--accent-green);
  color: #FFFFFF;
  border: 1px solid var(--accent-green);
  border-radius: 999px;
  padding: 5px 14px;
  font-weight: 600;
  text-decoration: none;
}
.competency-doc-actions .button-approve-elsewhere:hover { background: var(--dark-green); border-color: var(--dark-green); color: #FFFFFF; }