/* ─────────────────────────────────────────────────────────────────────────────
   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 — teal brand colour */
.form-control:focus,
.form-select:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 .2rem rgba(13,148,136,.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: #0d9488; }
.photo-zone.has-photo { border-style: solid; border-color: #0d9488; }

/* 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 */
}
.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; }

  /* Hide screen chrome — the navy sidebar (nav), every button, the unified
     shell's topbar (.admin-topbar with the page title + Print/PDF button),
     and the on-screen inspection-meta subheading. Only .pdf-header below
     remains as the document header in print. */
  nav, button,
  .admin-topbar,
  .inspection-meta-subheading { 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-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. */
}