/* FX Utilities — Fleet Management
   Fleet-only additions on top of css/styles.css (KPI tiles, status pills,
   filter bars, compact table buttons). Keeping these here means styles.css
   can be swapped for the Annual Leave app's copy without losing anything. */

/* Belt and braces: `hidden` must beat any display rule, so a hidden loading
   overlay or admin-only control can never swallow a click. Repeated here so it
   still holds if styles.css is swapped for another app's copy. */
[hidden] { display: none !important; }

.kpi { text-align: left; }
.kpi-value { font-size: 26px; font-weight: 600; line-height: 1.1; }
.kpi-label { color: var(--ink-muted, #6b7785); font-size: 13px; margin-top: 4px; }
.kpi-warn .kpi-value { color: var(--warn, #a86400); }
.kpi-bad .kpi-value { color: var(--bad, #b3261e); }

.pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pill-ok { background: #e4f3ea; color: #1b7f4b; }
.pill-warn { background: #fdf0d9; color: #8a5200; }
.pill-bad { background: #fbe5e3; color: #a2211a; }

.row-warn td { background: #fffaf0; }
.row-bad td { background: #fdf1f0; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px 14px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border, #dfe4ea);
}

.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-muted, #6b7785);
  min-width: 150px;
}

.btn-small { padding: 4px 10px; font-size: 13px; }

.inline-select { padding: 4px 6px; font-size: 13px; min-width: 130px; }

.total-row td {
  font-weight: 600;
  background: #f7f9fb;
  border-top: 2px solid var(--border, #dfe4ea);
}

/* ---------- Vehicle Check checklist (moved here from Engineer Portal) ---------- */

.checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border, #dfe4ea);
  gap: 16px;
}
.checklist-item:last-child { border-bottom: none; }
.checklist-item .item-label { flex: 1; font-size: 0.95em; }
.checklist-item .item-options { display: flex; gap: 8px; }
.checklist-item .item-options button {
  padding: 6px 14px;
  font-size: 0.9em;
}
.checklist-item .item-options button.selected.pass { background: #1b7f4b; color: #fff; border-color: #1b7f4b; }
.checklist-item .item-options button.selected.fail { background: #a2211a; color: #fff; border-color: #a2211a; }
.checklist-item .item-options button.selected.na { background: #5a6b7d; color: #fff; border-color: #5a6b7d; }

/* ---------- Vehicle history subtabs (Vehicles tab -> History) ---------- */

.subtabs { display: flex; gap: 8px; margin-bottom: 14px; }
.subtabs .btn.active { background: var(--ink, #1c3d5a); color: #fff; }

/* Destructive. Tinted rather than solid, per the brand note: solid red in
   this portal means ACTION (Save, Sign in), so a solid red Delete sits in
   the same visual slot as Save and gets pressed by muscle memory. */
.btn-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger);
}
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; }
.btn-danger:disabled { opacity: 0.45; cursor: not-allowed; }

/* The card it lives in, so it does not read as one more settings box. */
.danger-card { border: 1px solid var(--danger); }
.danger-card h3 { color: var(--danger); }

/* The import plan. Hundreds of lines of "this would change", which has to
   be readable enough that somebody reads it before pressing Apply. */
.import-list {
  max-height: 240px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fcfcfd;
  font-size: 0.82em;
  line-height: 1.6;
}
.import-list > div { white-space: nowrap; }
.badge-info { background: var(--blue-light); color: var(--navy); }
.badge-grey { background: var(--grey-light); color: var(--grey); }

/* A destructive action sitting in a row of ordinary ones. Red text rather
   than a red button: it has to be findable without being the thing the eye
   lands on first in a table of thirty rows. */
.btn-danger-text { color: var(--danger); }
.btn-danger-text:hover { background: var(--danger-bg); }

/* The compliance update pop-up. Centred and scrolling down, not a panel
   down the side — it carries a form and a file picker. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(20, 37, 68, 0.45);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-panel {
  background: #fff;
  width: min(520px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.3);
}
.modal-panel h3 { margin: 0 0 2px; }
.modal-panel label { display: block; margin-top: 12px; font-weight: 600; }
.modal-panel input[type="date"], .modal-panel textarea { width: 100%; }
.modal-close { float: right; }

/* A dashboard card that opens the rows behind its number. It is a real
   button, so it keyboard-focuses and announces itself as one; these rules
   only take the browser's button styling back off. */
.kpi-clickable {
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  border: 1px solid var(--line, #e2e5ea);
  transition: transform 0.08s ease, box-shadow 0.12s ease;
}
.kpi-clickable:hover,
.kpi-clickable:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.kpi-clickable::after {
  content: "View";
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
}

/* The lists those cards open are tables, so they need the room. */
.modal-wide {
  max-width: 1100px;
  width: 96vw;
}

/* ---- The vehicle condition record (js/condition.js) ------------------
   Drawn into the book-out card, the return card and the book-in modal
   from one definition, so the three look and read the same. */
.condition-form {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line, #e2e5ea);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.015);
}
.condition-form h4 {
  margin: 0 0 4px;
}
.condition-form .table-wrap {
  margin: 14px 0;
}
.cond-table {
  width: 100%;
  table-layout: fixed;
}
.cond-table th:nth-child(1),
.cond-table td:nth-child(1) {
  width: 42%;
}
.cond-table th:nth-child(2),
.cond-table td:nth-child(2) {
  width: 120px;
}
.cond-table .cond-state,
.cond-table .cond-note {
  width: 100%;
  box-sizing: border-box;
}
.cond-kit {
  border: 1px solid var(--line, #e2e5ea);
  border-radius: 8px;
  padding: 10px 14px 14px;
  margin: 0 0 14px;
}
.cond-kit legend {
  padding: 0 6px;
  font-size: 13px;
  opacity: 0.75;
}
/* A tick box and its words, side by side. The row direction is the point:
   this form sits inside .form-grid, whose labels are column flex so that a
   caption sits above a full-width control — which puts the tick above the
   words, centred, and makes the list unreadable. */
.condition-form .cond-tick {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
  margin: 6px 0;
  font-weight: normal;
}
.condition-form .cond-tick input {
  flex: 0 0 auto;
  margin: 0;
}
.cond-kit {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 0 18px;
}
.cond-kit legend {
  grid-column: 1 / -1;
}
.condition-form .cond-declare {
  margin-top: 14px;
  font-weight: 600;
}
/* On a phone the walkaround stops being a table and becomes one block per
   area, because three columns at 360px is three unreadable columns. */
@media (max-width: 620px) {
  .cond-table,
  .cond-table tbody,
  .cond-table tr,
  .cond-table td {
    display: block;
    width: auto;
  }
  .cond-table thead {
    display: none;
  }
  .cond-table tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--line, #e2e5ea);
  }
  .cond-table td {
    padding: 3px 0;
  }
  .cond-table .cond-area {
    font-weight: 600;
  }
}

/* The saved record, read back on a vehicle's history. */
.cond-summary {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
}
.cond-summary dt {
  font-weight: 600;
  opacity: 0.7;
}
.cond-summary dd {
  margin: 0;
}
.cond-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 760px) {
  .cond-pair {
    grid-template-columns: 1fr;
  }
}

/* The paper half of the condition record — print it, get it signed, scan
   it back in. Set apart from the photographs because they answer
   different questions and a missing signature should look missing. */
.cond-signed {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line, #e2e5ea);
}

/* The small print under a field. Fleet has been writing class="field-hint"
   in three places since the book-out form was built and never had a rule
   for it, so those hints came out the same size and weight as the question
   above them and read as part of it. Every other app in the portal has
   this rule; this is Fleet catching up.

   Block, not inline: inside .checkbox-label — which is a flex row so the
   box sits beside its words — a hint put in the same row became a second
   column and the label wrapped to four lines. The hint goes after the
   label instead, on its own line. */
.field-hint {
  display: block;
  font-size: 0.82em;
  font-weight: 400;
  color: var(--ink-muted);
}