/* ─────────────────────────────────────────────────────────────────────────────
   SHEQ — Global stylesheet
   All component CSS lives here. Templates contain HTML only, no <style> blocks.
   ───────────────────────────────────────────────────────────────────────────── */


/* ── Base ─────────────────────────────────────────────────────────────────── */

body { font-family: Verdana, Geneva, Tahoma, sans-serif; }

/* Bootstrap rounded-4 support */
.rounded-4     { border-radius: 1rem !important; }
.rounded-top-4 { border-top-left-radius: 1rem !important; border-top-right-radius: 1rem !important; }

/* Focus ring — navy brand colour */
.form-control:focus,
.form-select:focus {
  border-color: #1e3a5f;
  box-shadow: 0 0 0 .2rem rgba(30,58,95,.2);
}

/* Letter-spacing utility */
.ls-wide { letter-spacing: .08em; }

/* Navy primary button hover — matches the synarete-shell brand. */
.btn[style*="background:#1e3a5f"]:hover { background: #15294a !important; }


/* ── Toast container (shared by inspection form + admin detail) ───────────── */
/* 2026-05-06: moved from bottom-right to top-right per product feedback.
   `top: 4.5rem` clears the 57px sticky navbar with a small breathing gap.
   Toast container has no navbar on /login and /change-password but the
   4.5rem clearance there just shows up as comfortable top-margin space. */

#toast-container {
  position: fixed;
  top:     4.5rem;
  right:   1.5rem;
  z-index: 3000;
}


/* ── Checklist rows (shared by engineer form + admin detail) ─────────────── */

.checklist-row            { border-bottom: 1px solid #f1f5f9; padding: .85rem 1rem; }
.checklist-row:last-child { border-bottom: none; }


/* ── Engineer inspection form: placeholder fade ─────────────────────────── */
/* Uniform placeholder + format-hint fade across the inspection form's
   header (Vehicle Details). Moved from engineer/inspection.html inline CSS. */
#main-form .form-control::placeholder { color: #94a3b8; opacity: 1; text-transform: none; }
#main-form .form-control::-webkit-input-placeholder { color: #94a3b8; text-transform: none; }
#main-form .form-control::-moz-placeholder { color: #94a3b8; opacity: 1; text-transform: none; }

#main-form input[type="date"]:not(.has-value)::-webkit-datetime-edit-text,
#main-form input[type="date"]:not(.has-value)::-webkit-datetime-edit-month-field,
#main-form input[type="date"]:not(.has-value)::-webkit-datetime-edit-day-field,
#main-form input[type="date"]:not(.has-value)::-webkit-datetime-edit-year-field {
  color: #94a3b8;
}
#main-form input[type="date"].has-value::-webkit-datetime-edit-text,
#main-form input[type="date"].has-value::-webkit-datetime-edit-month-field,
#main-form input[type="date"].has-value::-webkit-datetime-edit-day-field,
#main-form input[type="date"].has-value::-webkit-datetime-edit-year-field {
  color: #1e293b;
}


/* ── Admin dashboard: dark filter inputs ────────────────────────────────── */
/* Moved from admin/dashboard.html inline CSS. */
.filter-input-dark::placeholder { color: rgba(255, 255, 255, .55); opacity: 1; }
.filter-input-dark::-webkit-input-placeholder { color: rgba(255, 255, 255, .55); }
.filter-input-dark::-moz-placeholder { color: rgba(255, 255, 255, .55); opacity: 1; }
.filter-input-dark::-webkit-datetime-edit-text,
.filter-input-dark::-webkit-datetime-edit-month-field,
.filter-input-dark::-webkit-datetime-edit-day-field,
.filter-input-dark::-webkit-datetime-edit-year-field {
  color: rgba(255, 255, 255, .55);
}
.filter-input-dark.has-value::-webkit-datetime-edit-text,
.filter-input-dark.has-value::-webkit-datetime-edit-month-field,
.filter-input-dark.has-value::-webkit-datetime-edit-day-field,
.filter-input-dark.has-value::-webkit-datetime-edit-year-field {
  color: #fff;
}
select.filter-input-dark.is-empty { color: rgba(255, 255, 255, .55) !important; }


/* ── Engineer inspection form ────────────────────────────────────────────── */

/* Photo upload drop zone */
.photo-zone {
  border: 2px dashed #cbd5e1;
  border-radius: .75rem;
  padding: 1rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
}
.photo-zone:hover     { border-color: #1e3a5f; }
.photo-zone.has-photo { border-style: solid; border-color: #1e3a5f; }

/* Need Repair button — keep text dark so it's readable on yellow background */
.btn-warning,
.btn-outline-warning { color: #000; }

/* Vehicle plate placeholder — lighter grey hint text */
#vehicle_plate::placeholder { color: #cbd5e1; }


/* Variant B "Required" affordance for Not OK rows (v1.5.0 Phase 8).
   Mirrors .planning/sketches/001-not-ok-row/index.html lines 56-77. */
.required-block {
  border: 1px solid #fecaca;      /* sheq-red-200 */
  background: #fef2f2;            /* sheq-red-50 */
  border-radius: .5rem;
  padding: .625rem .75rem;
  margin-bottom: .5rem;
}
.required-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .375rem;
}
.required-label {
  font-size: .75rem;
  font-weight: 700;
  color: #dc2626;                 /* sheq-red-600 */
  text-transform: uppercase;
  letter-spacing: .05em;
}
.required-pill {
  background: #dc2626;            /* sheq-red-600 */
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: .125rem .5rem;
  border-radius: 1rem;
  letter-spacing: .05em;
}
.required-comment-input {
  background: #fff;               /* stand out against red-50 parent */
}
/* Optional variant (v0.5.1) — neutral grey so it doesn't read as required. */
.required-block.optional-block {
  border-color: #e2e8f0;          /* sheq-slate-200 */
  background: #f8fafc;            /* sheq-slate-50 */
}
.optional-block .required-label { color: #475569; }  /* sheq-slate-600 */
.optional-pill {
  background: #e2e8f0;            /* sheq-slate-200 */
  color: #475569;                 /* sheq-slate-600 */
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: .125rem .5rem;
  border-radius: 1rem;
  letter-spacing: .05em;
}
.photo-zone-optional-note {
  font-size: .72rem;
  color: #64748b;                 /* sheq-slate-500 */
  margin-top: .25rem;
}


/* ── Admin inspection detail — status chips ──────────────────────────────── */

.status-chip {
  display: inline-block;
  padding: .25rem .65rem;
  border-radius: 9999px;
  font-size: .72rem;
  font-weight: 700;
}
.chip-ok          { background: #f0fdf4; color: #16a34a; }
.chip-not_ok      { background: #fef2f2; color: #dc2626; }
.chip-none        { background: #f1f5f9; color: #94a3b8; }


/* ── Admin inspection detail — print / PDF export ───────────────────────── */

/* Document header is hidden on screen; only shows in print */
.pdf-header { display: none; }

@media print {
  /* Force colour output in all browsers */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* ALLOWLIST: print ONLY the inspection document (#printable). Walk the
     shell ancestry (body → .admin-layout → main.admin-main → .admin-content
     → #printable) and at each level hide every sibling that does NOT lead to
     #printable. This means screen chrome (sidebar, topbar + its buttons,
     server flash, lockout banner, the inspection-meta subheading, toasts,
     the photo-lightbox modal) — and any FUTURE screen-only widget — stays
     out of the PDF by default, with nothing to maintain in a hide-list.
     Replaces the old per-element denylist that repeatedly let new chrome
     leak into PDFs (admin-topbar, then toasts). Scoped with :has(#printable)
     so OTHER admin pages (no #printable) still print normally. display:none
     (not position:absolute) keeps #printable in normal flow so the multi-page
     checklist paginates correctly. */
  body:has(#printable) > :not(.admin-layout),
  .admin-layout:has(#printable) > :not(main),
  .admin-main:has(#printable) > :not(.admin-content),
  .admin-content:has(#printable) > :not(#printable) { display: none !important; }

  /* Controls that live INSIDE the document (e.g. edit-mode Save/Cancel) must
     not print; the photo-enlarge wrappers (data-lightbox-trigger) must, since
     the photo <img> is nested in them. */
  #printable button:not([data-lightbox-trigger]) { display: none !important; }

  /* `@page { margin: 0 }` is the standard trick to suppress Chrome's
     auto-injected URL/timestamp headers and the trailing URL footer.
     Page-edge spacing is then applied via body padding so content doesn't
     run to the paper edge. Firefox users still need to untick "Headers
     and footers" in their print dialog — see the .print-tip note in the
     inspection_detail template that nudges them. */
  @page { margin: 0; size: A4 portrait; }

  body {
    background: #fff !important;
    font-family: Verdana, sans-serif;
    font-size: 9pt;
    padding: 1.4cm 1.6cm !important;
    margin: 0 !important;
  }
  .container-xl { max-width: 100% !important; padding: 0 !important; }

  /* PDF-only document header */
  .pdf-header {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2.5px solid #1e3a5f;
    padding-bottom: .55rem;
    margin-bottom: .9rem;
  }
  .pdf-header-lockup { display: flex; align-items: center; gap: .45cm; }
  /* Region-based logos (whitespace-trimmed sources): heights differ because
     the Synarete mark is stacked and the JD mark is wide — these balance them
     visually against the 13pt title. */
  .pdf-logo-synarete { height: 1.35cm; }
  .pdf-logo-jd       { height: .85cm; }
  .pdf-header-title { font-size: 13pt; font-weight: 700; color: #1e3a5f; margin: 0; }
  .pdf-header-sub   { font-size: 8pt;  color: #64748b; margin: .15rem 0 0; }
  .pdf-header-meta  { text-align: right; font-size: 8pt; color: #334155; }
  .pdf-header-meta strong { font-size: 10pt; font-family: ui-monospace, monospace; color: #1e3a5f; }

  /* Cards — flat bordered boxes. NOTE: `break-inside: avoid` was REMOVED
     here because it caused tall cards (the full 31-item checklist) to
     push to a fresh page, leaving the previous page nearly empty (the
     "wasted whitespace on first page" complaint). The card *can* split
     across pages now; individual checklist-rows still don't (see below). */
  .card {
    box-shadow: none !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    margin-bottom: .55rem !important;
  }
  .card-header    { padding: .35rem .65rem !important; }
  .card-header h6 { font-size: 8pt !important; letter-spacing: .06em; margin: 0; }
  .card-body      { padding: .45rem .65rem !important; }

  /* Checklist rows — tighter in print, never split across pages */
  .checklist-row {
    padding: .3rem .65rem !important;
    border-bottom: 1px solid #e2e8f0 !important;
    break-inside: avoid;
  }
  .checklist-row:last-child { border-bottom: none !important; }

  /* Status chips — add border so they print even if background colours are suppressed */
  .status-chip {
    border-radius: 4px !important;
    padding: .1rem .45rem !important;
    font-size: 7.5pt !important;
    border: 1px solid currentColor;
  }

  /* Photos */
  .checklist-photo { max-height: 100px !important; border-radius: 4px !important; margin-top: .3rem; }

  /* The leftover `.row.g-4 > div { flex: 1 }` from the old Signature
     side-by-side layout is intentionally GONE — Condition of Vehicle is
     a single col-12 card now and looked stretched-and-empty under the
     flex rule. */
}

/* Vehicle Details field order on STACKED MOBILE only (<576px). Put Next Service
   directly under Current Mileage and move Checked By to last. The web grid
   (>=576px, col-sm-6/col-lg-4) keeps its DOM order — unchanged. The `.row` is a
   flexbox, so `order` reflows the stacked column. Children are in DOM order:
   1 Plate, 2 Date, 3 Checked By, 4 Current Mileage, 5 License, 6 Insurance,
   7 Next Service. */
@media (max-width: 575.98px) {
  #vehicle-details-grid > div:nth-child(1) { order: 1; }  /* Vehicle Plate  */
  #vehicle-details-grid > div:nth-child(2) { order: 2; }  /* Date           */
  #vehicle-details-grid > div:nth-child(4) { order: 3; }  /* Current Mileage */
  #vehicle-details-grid > div:nth-child(7) { order: 4; }  /* Next Service   */
  #vehicle-details-grid > div:nth-child(5) { order: 5; }  /* License Expiry */
  #vehicle-details-grid > div:nth-child(6) { order: 6; }  /* Insurance Expiry */
  #vehicle-details-grid > div:nth-child(3) { order: 7; }  /* Checked By (last) */
}

/* The Checked By autocomplete opens downward (inline top:100%). When Checked By
   is the last field (mobile), that dropdown would be clipped by the Vehicle
   Details card's `overflow:hidden` (present for the rounded corners). While the
   dropdown is shown — its inline style flips to display:block — let the card
   spill its overflow so the matches show BELOW the input, un-clipped. The clip
   (and rounded corners) is restored the moment the dropdown closes. */
.card:has(#engineer-dropdown[style*="block"]) { overflow: visible !important; }

/* ── Management reporting chart ──────────────────────────────────────────────
   CSS bars, not a charting library. Three bars per person on two independent
   scales: counts sit around 5-10, percentages around 100-200, and on one
   shared scale the percentage bar disappears. A CDN chart library would add an
   SRI hash to maintain and a network dependency at page load, for ten rows. */
.sic-chart { display: flex; gap: 1.25rem; align-items: flex-end; overflow-x: auto; padding: 1.25rem 0 .5rem; }
.sic-chart-group { flex: 0 0 auto; text-align: center; }
.sic-chart-bars { display: flex; align-items: flex-end; gap: .25rem; height: 220px; }
.sic-chart-bar { width: 22px; min-height: 2px; border-radius: 3px 3px 0 0; position: relative; }
.sic-chart-bar span { position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%); font-size: .7rem; white-space: nowrap; }
.sic-chart-bar[data-bar="kpi"], .sic-chart-key[data-key="kpi"] { background: #9aa7b5; }
.sic-chart-bar[data-bar="count"], .sic-chart-bar[data-bar="month"],
.sic-chart-key[data-key="count"] { background: #1e3a5f; }
.sic-chart-bar[data-bar="percent"], .sic-chart-key[data-key="percent"] { background: #00b0f0; }
.sic-chart-key { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; vertical-align: -1px; }
.sic-chart-label { font-size: .7rem; margin-top: .4rem; max-width: 88px; overflow-wrap: anywhere; }

/* Yearly view — twelve months per person against a KPI reference line. The
   line replaces a KPI bar repeated twelve times, and the percentage stays in
   the table above rather than doubling the bar count for a rescaled duplicate. */
.sic-chart-year { gap: 2rem; }
.sic-chart-year .sic-chart-bars { gap: 4px; }
.sic-chart-year .sic-chart-bar { width: 14px; }
.sic-chart-year .sic-chart-bar span { font-size: 9px; top: -1rem; }
.sic-chart-months { display: flex; gap: 4px; margin-top: .3rem; }
.sic-chart-months span {
  width: 14px; text-align: center; font-size: 9px; color: var(--sic-muted, #77879b);
  white-space: nowrap; overflow: visible;
}
/* The KPI slot's label is three characters over a 14px bar; let it sit wider
   than its bar rather than wrap to "KP / I". */
.sic-chart-months span:first-child { letter-spacing: -.03em; font-weight: 600; }

/* ── PPE answer radios ──────────────────────────────────────────────────────
   Real radio buttons with the circle visible. The previous control used
   Bootstrap's btn-check, which clips the input out of view and lets three
   coloured buttons stand in for it — with nothing chosen, the green
   "Satisfactory" button reads as already selected, so an untouched form looks
   answered (owner, 2026-09-08). Nothing here may hide .ppe-answer-input.

   Sized for a thumb: the whole label is the hit area, 44px tall, because this
   is filled in on a phone on site. */
.ppe-answers {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
}

.ppe-answer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px 6px 12px;
  border: 1px solid #d7dee6;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.2;
  color: #475569;
  user-select: none;
  transition: border-color .12s ease, background-color .12s ease;
}

.ppe-answer:hover { border-color: #9fb0c2; }

.ppe-answer .ppe-answer-input {
  /* Bigger than Bootstrap's default — this is a gloved finger on a phone. */
  width: 1.15em;
  height: 1.15em;
  margin: 0;
  flex: none;
  cursor: pointer;
}

/* Only the CHOSEN answer takes colour. An unchosen option stays neutral, so
   the form cannot look answered before anyone has touched it. */
.ppe-answer:has(.ppe-answer-input:checked) {
  font-weight: 600;
  border-width: 2px;
  padding: 5px 13px 5px 11px;
}
.ppe-answer--ok:has(.ppe-answer-input:checked) {
  border-color: #1c7a4b; background: #e9f6ef; color: #15603a;
}
.ppe-answer--ok .ppe-answer-input:checked {
  background-color: #1c7a4b; border-color: #1c7a4b;
}
.ppe-answer--bad:has(.ppe-answer-input:checked) {
  border-color: #b83a30; background: #fceceb; color: #93261e;
}
.ppe-answer--bad .ppe-answer-input:checked {
  background-color: #b83a30; border-color: #b83a30;
}
.ppe-answer--muted:has(.ppe-answer-input:checked) {
  border-color: #64748b; background: #eef2f6; color: #3f4b5a;
}
.ppe-answer--muted .ppe-answer-input:checked {
  background-color: #64748b; border-color: #64748b;
}

.ppe-answer:focus-within { outline: 2px solid #1e3a5f; outline-offset: 2px; }

/* On a phone the three options get their own line each, full width, so they
   are unmissable and easy to hit. */
@media (max-width: 575.98px) {
  .ppe-answers { flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
  .ppe-answer { width: 100%; }
}