/* LoadMatch CSS — Preserved High-Aesthetic Dark Mode */
:root {
  --bg-dark: #0b0f19;
  --card-bg: rgba(30, 41, 59, 0.75);
  --card-border: rgba(255, 255, 255, 0.08);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --accent-emerald: #10b981;
  --accent-emerald-hover: #059669;
  --accent-azure: #3b82f6;
  --accent-azure-hover: #2563eb;
  --accent-whatsapp: #25d366;
  --accent-whatsapp-hover: #128c7e;
  --accent-danger: #ef4444;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-main: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--bg-dark);
  color: var(--text-main);
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

/* AUTH COVER SCREEN */
.auth-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: radial-gradient(circle at center, rgba(30, 41, 59, 0.9) 0%, rgba(11, 15, 25, 0.98) 100%);
  backdrop-filter: blur(20px);
  z-index: 2000;
  display: flex;
  /* NOT align-items: center. Flex centring splits overflow equally, so a card
     taller than the viewport has its top pushed above the container and its
     bottom below it, and both are unreachable even with overflow-y set — which
     is how the delete button became impossible to press. `margin: auto` on the
     card centres it when there is room and collapses when there is not, keeping
     both ends inside the scrollable area. */
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 1.5rem;
}

.auth-screen.hidden {
  display: none !important;
}

.auth-card {
  width: 100%;
  max-width: 460px;
  padding: 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  margin: auto;   /* see .auth-screen — this is what does the vertical centring */
}

.auth-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-brand .brand-logo {
  margin: 0 auto 0.75rem auto;
  width: 54px;
  height: 54px;
  font-size: 1.6rem;
}

.auth-brand h2 {
  font-size: 1.6rem;
  font-weight: 800;
}

.auth-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.auth-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.35rem;
  margin-bottom: 1.25rem;
  background: rgba(15, 23, 42, 0.6);
  padding: 0.35rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--card-border);
}

.auth-tab-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  padding: 0.5rem 0.25rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
}

.auth-tab-btn.active {
  background: var(--accent-azure);
  color: white;
}

.auth-panel {
  display: none;
}

.auth-panel.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

/* Danger zone — visually separated from the rest of the settings form, because
   nothing else in the product is irreversible. */
.danger-zone {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: var(--radius-md);
  background: rgba(239, 68, 68, 0.07);
}

.danger-zone h4 {
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  color: var(--accent-danger);
  margin-bottom: 0.5rem;
}

.danger-zone .danger-summary {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

.danger-zone #btnDeleteAccount {
  background: var(--accent-danger);
  color: #fff;
}

.danger-zone #btnDeleteAccount:hover {
  background: #dc2626;
}

/* Read-only display of the name being replaced — shown as text rather than
   pre-filled into the input, so no field carries pre-selected live text. */
.settings-current {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-main);
  padding: 0.6rem 0.75rem;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  word-break: break-word;
}

.auth-desc {
  font-size: 0.825rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
  background: rgba(15, 23, 42, 0.5);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-border);
}

.auth-footer {
  margin-top: 1.5rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-muted);
  border-top: 1px solid var(--card-border);
  padding-top: 0.85rem;
}

/* Header & Account Profile Badge */
.app-header {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--card-border);
  padding: 0.85rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.brand-logo {
  background: linear-gradient(135deg, var(--accent-emerald), var(--accent-azure));
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: white;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.brand-text h1 {
  font-size: 1.35rem;
  font-weight: 800;
  background: linear-gradient(to right, #ffffff, #cbd5e1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-tagline {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.account-profile-badge {
  background: rgba(51, 65, 85, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.account-info {
  display: flex;
  flex-direction: column;
}

.company-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-main);
}

.account-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.btn-danger-ghost {
  color: var(--accent-danger) !important;
}
.btn-danger-ghost:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}

/* 3-Page Navigation Bar */
.page-navigation {
  background: rgba(30, 41, 59, 0.6);
  border-bottom: 1px solid var(--card-border);
  padding: 0.75rem 1.5rem;
}

.nav-container {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .nav-container {
    grid-template-columns: 1fr;
  }
}

.page-nav-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s ease;
  text-align: left;
}

.page-nav-btn:hover {
  background: rgba(15, 23, 42, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
}

.page-nav-btn.active {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(59, 130, 246, 0.15));
  border-color: var(--accent-emerald);
  color: var(--text-main);
}

.step-num {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
}

.page-nav-btn.active .step-num {
  background: var(--accent-emerald);
  color: white;
}

.btn-text {
  display: flex;
  flex-direction: column;
}

.nav-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-main);
}

.nav-desc {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Page Layout & Transitions */
.app-main {
  max-width: 1400px;
  margin: 1.5rem auto;
  padding: 0 1.5rem;
}

.page-content {
  display: none;
}

.page-content.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.page-header-intro {
  margin-bottom: 1.25rem;
}

.page-header-intro h2 {
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.page-header-intro p {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.page-footer-action {
  margin-top: 1.5rem;
  display: flex;
  justify-content: flex-end;
}

.flex-between {
  justify-content: space-between !important;
}

/* Cards & Layout */
.glass-card {
  background: var(--card-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-main);
}

.grid-2col-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .grid-2col-layout {
    grid-template-columns: 1fr;
  }
}

.margin-bottom-lg { margin-bottom: 1.5rem; }
.margin-top-md { margin-top: 0.85rem; }
.margin-top-lg { margin-top: 1.5rem; }

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}

.card-header h3 {
  font-size: 1.05rem;
}

/* Forms */
.form-group {
  margin-bottom: 0.85rem;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  color: var(--text-main);
  font-size: 0.85rem;
  outline: none;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  border-color: var(--accent-emerald);
}

/* A checkbox is not a field to be filled, so width:100% above does not apply to
   it. Left inheriting it, the box claimed the row inside its flex label and
   shoved the wording off to the right, which is why the mine requirement
   toggles sat indented and centred instead of reading as a list. */
.form-group input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
}

/* The pick-up point control, same story as the date below it: width:100% in a
   1fr 1fr grid rendered it 644px, against a widest-possible content of 180px.
   22rem is about twice the date field beside it — the right proportion for a
   field holding a name rather than a number, with room for a mine named well
   past "Goedehoop Colliery". The dropdown's popup list is unaffected; Chrome
   sizes that to its options, not to the closed control. */
.form-group .pickup-input {
  max-width: 22rem;
}

/* A date field is sized by its content, not by the grid cell it lands in.
   Without this it inherits width:100% above and stretches to half the card —
   dd/mm/yyyy adrift in a field built for an email address, with the calendar
   button pushed to the far edge. 11rem is the value plus the button. */
.form-group input[type="date"] {
  max-width: 11rem;
}

/* Chrome's default picker indicator is a near-black glyph, and this is a
   near-black field, so the button was invisible rather than absent. Replaced
   with an explicit calendar in the accent already used for informational icons.
   Inline SVG so it carries no font or network dependency — the page's CSP
   blocks external requests and an icon font would be one. */
.form-group input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 1;
  width: 1rem;
  height: 1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
  filter: brightness(1.4);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

/* Roster Category Tabs */
.roster-tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 1rem;
  overflow-x: auto;
  border-bottom: 1px solid var(--card-border);
  padding-bottom: 0.5rem;
}

.roster-tab-btn {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--card-border);
  color: var(--text-muted);
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.roster-tab-btn.active {
  background: var(--accent-azure);
  color: white;
  border-color: var(--accent-azure);
}

.roster-panel { display: none; }
.roster-panel.active { display: block; }

/* Mini Item List */
.mini-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* 380px fitted the old one-line rows. A rig row is now three lines, so a
   five-rig fleet — the smallest real one — was scrolling to reach its last
   entry, which defeats the point of showing the whole rig at a glance. */
.max-h-lg {
  max-height: 520px;
  overflow-y: auto;
}

/* A saved rig reads as a small block: horse on top, then its trailers and its
   driver. Sub-lines are muted so the horse reg stays the thing you scan for. */
.rig-line {
  display: block;
}

.rig-sub {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.rig-sub strong {
  color: var(--text-main);
  font-weight: 600;
}

/* Row action buttons (Edit, Delete) sit together at the end of a mini-item. */
.mini-item-actions {
  display: flex;
  gap: 0.35rem;
  flex: 0 0 auto;
}

.mini-item {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid var(--card-border);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.825rem;
}

/* Combinations Grid (Page 2) */
.combinations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0.85rem;
  max-height: 460px;
  overflow-y: auto;
}

.combo-card {
  background: rgba(15, 23, 42, 0.6);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.combo-card:hover { border-color: rgba(16, 185, 129, 0.5); }
.combo-card.selected {
  border-color: var(--accent-emerald);
  background: rgba(16, 185, 129, 0.1);
}

.combo-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent-emerald);
}

.combo-info { flex: 1; }

.combo-title {
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.combo-sub {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Buttons */
.btn {
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.btn-sm { padding: 0.35rem 0.6rem; font-size: 0.75rem; }
.btn-lg { padding: 0.75rem 1.35rem; font-size: 0.95rem; }
.btn-full { width: 100%; }

.btn-emerald { background: var(--accent-emerald); color: white; }
.btn-emerald:hover { background: var(--accent-emerald-hover); }

.btn-azure { background: var(--accent-azure); color: white; }
.btn-azure:hover { background: var(--accent-azure-hover); }

.btn-whatsapp { background: var(--accent-whatsapp); color: white; }
.btn-whatsapp:hover { background: var(--accent-whatsapp-hover); }

.btn-ghost { background: rgba(255, 255, 255, 0.08); color: var(--text-main); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.15); }

.icon-btn-ghost { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0.2rem; }
.icon-btn-danger {
  color: var(--accent-danger); background: rgba(239, 68, 68, 0.1); border: none; padding: 0.25rem 0.45rem; border-radius: 4px; cursor: pointer;
}

/* Badges */
.badge {
  padding: 0.2rem 0.55rem;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-info { background: rgba(59, 130, 246, 0.2); color: var(--accent-azure); }
.badge-success { background: rgba(16, 185, 129, 0.2); color: var(--accent-emerald); }

/* The yard's own reference — a fleet number, not a status. Deliberately the
   quietest badge on the page: it identifies, it never warns, and it must not
   compete with the compliance badges sitting next to it. */
.badge-muted {
  background: rgba(148, 163, 184, 0.16);
  color: #94a3b8;
  border: 1px solid rgba(148, 163, 184, 0.28);
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Marks a field the operator may leave empty, so "no fleet number" never reads
   as an unfinished form. */
.label-optional {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-left: 0.35rem;
}

/* Manifest Output Paper */
.manifest-paper {
  background: #ffffff;
  color: #0f172a;
  border-radius: var(--radius-md);
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.manifest-header-block {
  border-bottom: 2px solid #0f172a;
  padding-bottom: 0.85rem;
  margin-bottom: 0.85rem;
}

.manifest-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

.manifest-title-row h3 {
  font-size: 1.35rem;
  color: #0f172a;
}

.manifest-subtitle {
  font-size: 0.75rem;
  font-weight: 800;
  color: #475569;
  letter-spacing: 1px;
}

.manifest-stamp {
  border: 2px solid #059669;
  color: #059669;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  font-weight: 800;
  font-size: 0.75rem;
}

.manifest-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #334155;
  background: #f8fafc;
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
}

.table-responsive { width: 100%; overflow-x: auto; }

.manifest-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 0.85rem;
}

.manifest-table th {
  background: #0f172a;
  color: #ffffff;
  text-align: left;
  padding: 0.65rem 0.75rem;
  font-weight: 600;
}

.manifest-table td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid #e2e8f0;
  color: #1e293b;
}

.manifest-table tbody tr:nth-child(even) { background: #f8fafc; }
.empty-state { color: #64748b; padding: 2rem !important; font-style: italic; }

.manifest-footer-block {
  font-size: 0.75rem;
  color: #64748b;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.5rem;
}

.export-toolbar-header {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.text-emerald { color: var(--accent-emerald); }
.text-azure { color: var(--accent-azure); }
.text-center { text-align: center; }

/* Print Stylesheet */
@media print {
  body { background: #ffffff !important; color: #000000 !important; }
  .auth-screen, .app-header, .page-navigation, .page-header-intro, .export-toolbar-header, .page-footer-action { display: none !important; }
  .app-main { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }
  .manifest-paper { box-shadow: none !important; border: none !important; padding: 0 !important; }
}

/* =======================================================================
   PHONE LAYOUT (<= 640px)
   The truck company does the whole job from a handset: register, load
   trucks and drivers, link them, send the list. These rules exist because
   a phone audit found the manifest table truncated, the header wrapping
   into three lines, the roster tabs clipped mid-word, and 16 tap targets
   under 40px on page 1.
   ======================================================================= */
@media (max-width: 640px) {

  /* --- Header: stack instead of squeezing three blocks onto one row --- */
  .app-header { padding: 0.6rem 0.9rem; }
  .header-container {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .brand { justify-content: flex-start; }
  .brand-text h1 { font-size: 1.15rem; line-height: 1.2; }
  .brand-text p { font-size: 0.7rem; }

  /* --- Roster tabs: keep the horizontal scroll, but make it obvious --- */
  .roster-tabs {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    /* fade the right edge so it reads as "more this way" */
    mask-image: linear-gradient(to right, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  }
  .roster-tab-btn { flex: 0 0 auto; }

  /* --- The manifest table is the gate document. Never crush its columns:
         let it exceed the width and scroll, with a visible edge fade. --- */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 92%, transparent 100%);
  }
  .manifest-table {
    width: auto;
    min-width: max-content;   /* columns keep their content width */
    font-size: 0.8rem;
  }
  .manifest-table th,
  .manifest-table td { white-space: nowrap; }

  /* --- Tap targets: 44px is the smallest reliably hittable with a thumb --- */
  .btn,
  .roster-tab-btn,
  .page-nav-btn,
  select,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="file"] {
    min-height: 44px;
  }
  .icon-btn-danger,
  .icon-btn-ghost {
    min-width: 44px;
    min-height: 44px;
  }

  /* Rig-selection checkboxes render at 18px. The whole card already toggles
     them (app.js card click handler), so the card is the real tap target —
     this just makes the box itself aimable rather than fiddly. */
  input[type="checkbox"] {
    width: 24px;
    height: 24px;
    min-height: 24px;
    accent-color: var(--accent-emerald);
  }

  /* --- Page headers: let the action button sit under the heading
         instead of being squeezed beside it into four wrapped lines --- */
  .page-header-intro {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.75rem;
  }
  .page-header-intro .btn { width: 100%; }

  /* --- Export actions on page 3: the badge sat overlapping the button
         column, because .card-header is a two-across flex row. Stack it. --- */
  .card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .card-header .badge { text-align: center; }
  .export-toolbar-header {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
  }
  .export-toolbar-header .btn { width: 100%; }

  /* --- Forms: single column, full-width controls --- */
  .form-row { grid-template-columns: 1fr !important; }
  .grid-2col-layout,
  .grid-3col-layout { grid-template-columns: 1fr !important; }
}

/* COMPLIANCE LAYER STYLES ([R12], [R13]) */
.clearance-fact-line {
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.5rem;
}
.fact-line-clear {
  background: rgba(16, 185, 129, 0.15);
  color: var(--accent-emerald);
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.fact-line-warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.fact-line-unconfigured {
  background: rgba(100, 116, 139, 0.15);
  color: var(--text-muted);
  border: 1px solid rgba(100, 116, 139, 0.3);
}

.badge-missing {
  background: rgba(100, 116, 139, 0.2);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.4);
}
.badge-warning {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.4);
}
.badge-danger {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.4);
}


/* --- Item 2: roster credential capture ([Q1]-[Q3]) --------------------- */
.credential-rows { display: flex; flex-direction: column; gap: 0.5rem; }
.cred-rows-head {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-muted); margin-bottom: 0.15rem;
}
.credential-row {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.5rem 0.6rem; border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.cred-row-label { font-size: 0.82rem; font-weight: 600; }
.cred-row-body { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.cred-inline {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; color: var(--text-muted);
}
.cred-inline input[type="date"] { min-width: 9.5rem; }
.cred-hint { font-size: 0.7rem; color: var(--text-muted); opacity: 0.8; }
.cred-site-row {
  display: flex; align-items: center; gap: 0.4rem; width: 100%;
  margin-bottom: 0.3rem;
}
.cred-site-row select { flex: 1 1 8rem; min-width: 0; }
.cred-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; margin-left: 0.3rem; }

/* --- Item 3: dispatch live clearance ([R4]-[R6], [R12]-[R14]) ---------- */

/* [R4] The "nothing was checked" line. Deliberately visible rather than subtle:
   it is the only thing standing between a dispatcher and reading a blank card
   as a pass. */
.clearance-scope-notice {
  padding: 0.5rem 0.75rem; border-radius: 6px; font-size: 0.8rem;
  margin-bottom: 0.75rem;
}
.notice-unchecked {
  background: rgba(148, 163, 184, 0.14);
  border: 1px solid rgba(148, 163, 184, 0.45);
  color: var(--text-muted);
}
.notice-pending {
  background: rgba(59, 130, 246, 0.12);
  border: 1px solid rgba(59, 130, 246, 0.4);
  color: var(--accent-azure);
}

.combo-verdict { margin-top: 0.4rem; }
.combo-verdict-label {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px;
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em;
}
.combo-verdict-reasons {
  margin-top: 0.25rem; font-size: 0.72rem; line-height: 1.35;
  color: #f87171;
}
.verdict-clear .combo-verdict-label {
  background: rgba(16, 185, 129, 0.2); color: var(--accent-emerald);
}
.verdict-expiring .combo-verdict-label {
  background: rgba(245, 158, 11, 0.2); color: #fbbf24;
}
.verdict-expired .combo-verdict-label,
.verdict-missing .combo-verdict-label {
  background: rgba(239, 68, 68, 0.2); color: #f87171;
}
/* [R5] NOT_CHECKED is visually distinct and NEVER green — nothing to check is
   not the same as passing. Grey, and it does not borrow the CLEAR treatment. */
.verdict-notchecked .combo-verdict-label {
  background: rgba(148, 163, 184, 0.18); color: var(--text-muted);
  border: 1px dashed rgba(148, 163, 184, 0.6);
}
.verdict-notchecked .combo-verdict-reasons { color: var(--text-muted); }

.site-rules-body { padding-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.site-rules-facts {
  display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.8rem;
}
.site-rules-key { color: var(--text-muted); }
.site-rules-reqs { font-size: 0.8rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.site-rules-text {
  font-size: 0.78rem; white-space: pre-wrap; padding: 0.5rem 0.65rem;
  border-radius: 6px; background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── A mine's document requirements ──────────────────────────────────────────
   Replaced three fixed tick boxes with one row per document type the tenant
   owns. See DECISIONS.md #site-requirements-live. */

.site-req-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.site-req-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* Ten types is a comfortable list; thirty is a scroll, not a wall. */
  max-height: 15rem;
  overflow-y: auto;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius-md);
  background: var(--bg-dark);
}

.site-req-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0;
  cursor: pointer;
  font-size: 0.85rem;
}

.site-req-name {
  flex: 1;
}

.site-req-tag {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.site-req-empty {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}

/* ── Mine loading hours ──────────────────────────────────────────────────────
   Three bands, hourly. See DECISIONS.md #mine-loading-hours. */

.hours-grid {
  display: grid;
  /* label | from | to — the three columns the form is actually about. */
  grid-template-columns: auto 1fr 1fr;
  gap: 0.4rem 0.5rem;
  align-items: center;
}

.hours-band {
  font-size: 0.82rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.hours-sel {
  /* Narrower than a full-width control: these hold "06:00", not a sentence. */
  min-width: 0;
  padding: 0.35rem 0.4rem;
  font-size: 0.85rem;
}

.hours-allday {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  padding: 0.3rem 0.7rem;
}