/* ============================================================================
   Fuel controls: the fuel form's lookup, status badges, the review queue,
   standards and the fuel reports with their management summary. Built on the
   theme's own tokens, so light and dark modes follow automatically.
   Colour always comes with a word and an icon (see badge() in fuelcontrol.js):
     green  normal / matched          amber  review required
     red    critical / error          blue   information / linked value
     grey   inactive / not applicable
   ==========================================================================*/

/* ------------------------------- badges ------------------------------- */
.badge.sbadge { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.badge.sbadge i { font-size: 12px; }
.badge.muted { color: var(--muted); border-color: var(--line); background: var(--panel-2); }
.bad-text { color: var(--stop-text); }

/* -------------------------------- form -------------------------------- */
input.ro, input[readonly] {
  background: var(--panel-2); color: var(--muted); border-style: dashed; cursor: not-allowed;
}
input.ro:focus { outline: none; box-shadow: none; }
.ferr { color: var(--stop-text); font-size: 11.5px; line-height: 1.35; margin-top: 3px; text-transform: none; letter-spacing: 0; }
.ferr[hidden] { display: none; }
[aria-invalid="true"] { border-color: var(--stop) !important; }
.panel-sub { display: grid; gap: 10px; margin-top: 14px; }
.lookup { display: flex; align-items: center; gap: 8px; min-height: 18px; }
.lookup.loading::before {
  content: ''; width: 12px; height: 12px; border-radius: 50%; flex: none;
  border: 2px solid var(--line-hard); border-top-color: var(--info); animation: fuel-spin .8s linear infinite;
}
.readout.linked .readout-item[title] { cursor: help; }
.fuel-notices { display: grid; gap: 8px; }
.fuel-notices > [hidden] { display: none; }
.notice {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--radius);
  border: var(--hair) solid var(--line); border-left-width: 3px; background: var(--panel-2); font-size: 12.5px;
}
.notice > i { font-size: 18px; flex: none; margin-top: 1px; }
.notice p { margin: 3px 0 6px; }
.notice .grow { flex: 1; min-width: 0; }
.notice.warn { border-left-color: var(--signal); background: var(--caution-fill); }
.notice.warn > i { color: var(--signal-text); }
.notice.info { border-left-color: var(--info); background: var(--info-fill); }
.notice.info > i { color: var(--info-text); }
.notice.bad { border-left-color: var(--stop); background: var(--stop-fill); }
.notice.bad > i { color: var(--stop-text); }
label.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; }
label.check input { width: auto; accent-color: var(--signal); }
.foot.wrap { flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.btn[disabled] { cursor: not-allowed; }

/* ---------------------------- the dialog ----------------------------- */
.fuel-dialog { display: grid; gap: 14px; }
.dlg-head { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; }
.dlg-head .badges, .ex-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ex-top { justify-content: space-between; }
.flag-list { display: grid; gap: 6px; }
.flag-row { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; }
.ex-card {
  display: grid; gap: 5px; padding: 11px 13px; border: var(--hair) solid var(--line); border-radius: var(--radius);
  background: var(--panel);
}
.ex-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.ex-top > input[type="checkbox"] { margin: 0; }
.ex-top > input[type="checkbox"] + b { flex: 1; }

/* ------------------- deciding several items at once ------------------- */
.bulkbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; padding: 8px 12px;
  border: var(--hair) solid var(--line); border-radius: var(--radius); background: var(--panel);
  position: sticky; top: 0; z-index: 2;
}
.bulkbar .grow { flex: 1; }
.bulk-all { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; cursor: pointer; }
th.pickcol, td.pickcol { width: 32px; text-align: center; }
.bulk-failures { max-height: 260px; overflow: auto; padding-left: 18px; }
details.history summary { cursor: pointer; font-weight: 600; font-size: 12.5px; padding: 4px 0; }
details.history .table-wrap { max-height: 320px; margin-top: 8px; }
.mono { font-family: var(--font-mono); }

/* --------------------------- settings page --------------------------- */
.fsetting {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(160px, 1fr); gap: 14px; align-items: center;
  padding: 9px 0; border-top: var(--hair) solid var(--line);
}
.fsetting:first-child { border-top: none; }
.fsetting > span { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--text); }
.fsetting input[type="checkbox"] { width: auto; justify-self: start; accent-color: var(--signal); }

/* ----------------------------- the reports ---------------------------- */
.fuel-report { display: grid; gap: 12px; }
.fr-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.fr-filters .f { min-width: 140px; }
.fr-filters .grow { flex: 1 1 220px; }
.fr-filters .chip { cursor: pointer; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.kpi.card { padding: 11px 13px; gap: 3px; text-align: left; font: inherit; color: inherit; }
.kpi.card .v { font-size: 20px; }
.kpi.card .v.bad { color: var(--stop-text); }
.kpi.card .v.good { color: var(--go-text); }
.kpi.card .v.warn { color: var(--signal-text); }
button.kpi.card.linked { cursor: pointer; border-color: var(--line); }
button.kpi.card.linked:hover, button.kpi.card.linked:focus-visible { border-color: var(--info); outline: none; box-shadow: 0 0 0 2px var(--info-fill); }
button.kpi.card.linked .k::after { content: ' ›'; color: var(--info-text); }
.table-wrap.tall { max-height: 70vh; }
.report-table th { padding: 0; }
.report-table .thbtn {
  all: unset; box-sizing: border-box; display: flex; gap: 4px; align-items: center; width: 100%;
  padding: 9px 12px; cursor: pointer; white-space: normal; min-width: 90px; line-height: 1.3;
}
.report-table th.numcol .thbtn { justify-content: flex-end; text-align: right; }
.report-table .thbtn:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
.report-table .thbtn i.ph-info { color: var(--info-text); font-size: 11px; }
td.numcol, th.numcol { text-align: right; }
/* A variance is coloured by what it means against the recommended km/L,
   not by its sign: adverse (more fuel than expected) is red, favourable is
   green. The cell also says so in its tooltip, never colour alone. */
.var-adverse, td.var-adverse, .readout-item.var-adverse .v { color: var(--stop-text); font-weight: 700; }
.var-favourable, td.var-favourable, .readout-item.var-favourable .v { color: var(--go-text); font-weight: 700; }
td.var-adverse { background: var(--stop-fill); }
td.var-favourable { background: var(--go-fill); }
.readout-item.var-adverse { box-shadow: inset 3px 0 0 var(--stop); }
.readout-item.var-favourable { box-shadow: inset 3px 0 0 var(--go); }
tr.row-critical td:first-child { box-shadow: inset 3px 0 0 var(--stop); }
.report-table tfoot td { font-weight: 700; background: var(--panel-2); position: sticky; bottom: 0; }
.loading-row { padding: 18px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.spin { display: inline-block; animation: fuel-spin .8s linear infinite; }
@keyframes fuel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin, .lookup.loading::before { animation: none; } }

@media (max-width: 760px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi.card .v { font-size: 17px; }
  .fr-filters { flex-direction: column; align-items: stretch; }
  /* in a column the flex basis would become a height */
  .fr-filters .f, .fr-filters .grow { min-width: 0; width: 100%; flex: none; }
  .fsetting { grid-template-columns: 1fr; gap: 6px; }
  .ex-grid { grid-template-columns: 1fr; }
  .table-wrap.tall { max-height: 75vh; }
  .report-table .thbtn { min-width: 70px; }
}

/* progress while a large selection of reviews is decided in chunks */
.modal progress { width: 100%; height: 10px; accent-color: var(--signal); }