/* XCET Mileage, Operational Expenses: tool-specific styling only. Loaded after xcet-ui.css. Colours, sizes and radii come from tokens. */

.page-title { margin: 0 0 var(--space-4); font-size: var(--fs-xl); }
.page-title:focus { outline: none; }
.view > .card, .view > .banner, .view > .stat-tiles, .view > .card-grid { margin-bottom: var(--space-4); }
.narrow { max-width: 22rem; }
.hint:empty { display: none; }
.card h3.card-title { margin: 0 0 0.7rem; }
.card-head h3.card-title { margin: 0; }

.controls-bar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4); }
.controls-bar .field { margin: 0; min-width: 14rem; }
.controls-state { margin: 0; padding-bottom: 0.45rem; color: var(--text-muted); font-size: var(--fs-sm); }

.table-tools { align-items: end; }
.table-tools .field { margin: 0; }
.table-tools .field input[type="search"] { min-width: 14rem; }
.table-tools-summary { padding-bottom: 0.5rem; }

.stop-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 5.25rem; gap: var(--space-4); align-items: start; margin-bottom: var(--space-3); }
.stop-row > .field { margin: 0; }
.stop-row.is-first { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
.return-row { margin-top: var(--space-3); }
.stop-row .field-check { min-height: 2.5rem; margin-top: 1.65rem; }
.stop-row .field-remove { padding-top: 1.65rem; }
@media (max-width: 720px) { .stop-row, .stop-row.is-first, .return-row { grid-template-columns: minmax(0, 1fr); max-width: none; } }
#j-stops .stop-row:last-child { margin-bottom: var(--space-3); }
.calc-preview { min-height: 1.5rem; margin: 0.25rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-preview:empty { display: none; }
.field-grid > .field { margin-bottom: 0; }
.field.field-check { display: flex; align-items: center; min-height: 2.5rem; }
.field .checkbox-label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-weight: 500; }
td .row-actions { display: flex; gap: var(--space-2); justify-content: flex-end; white-space: nowrap; }
.row-sub { display: block; margin-top: 0.1rem; font-size: var(--fs-xs); color: var(--text-muted); }
tfoot td, tfoot th { font-weight: 700; background: var(--surface-2); border-top: 1px solid var(--border-strong); }
.stat-tile { cursor: default; }
.stat-tile .stat-tile-note { font-size: var(--fs-xs); color: var(--text-muted); }

/* Bar charts: hand-drawn, one label and one value per bar, widths set from script */
.bars { display: flex; flex-direction: column; gap: 0.55rem; }
.bar-row { display: grid; grid-template-columns: minmax(5rem, 10rem) 1fr 5.5rem; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); }
.bar-row > span:first-child { overflow-wrap: anywhere; }
.bar-track { display: block; height: 0.9rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: var(--radius-sm); }
.bar-fill.c1 { background: var(--chart-1); } .bar-fill.c2 { background: var(--chart-2); } .bar-fill.c3 { background: var(--chart-3); }
.bar-fill.c4 { background: var(--chart-4); } .bar-fill.c5 { background: var(--chart-5); } .bar-fill.co { background: var(--chart-other); }
@media (max-width: 640px) { .bar-row { grid-template-columns: 1fr 5rem; } .bar-row .bar-track { grid-column: 1 / -1; order: 3; } }

/* Claim form: a screen preview that prints as the paper form */
.claim-sheet { padding: var(--space-6); }
.claim-org { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.claim-title { margin: 0.1rem 0 var(--space-4); font-size: var(--fs-xl); }
.claim-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3) var(--space-6); margin: 0 0 var(--space-4); }
.claim-meta div { display: flex; flex-direction: column; }
.claim-meta dt { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.claim-meta dd { margin: 0; font-weight: 600; }
.claim-sign { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--space-4) var(--space-8); margin: var(--space-5) 0; }
.sign-line { display: grid; grid-template-columns: 8.5rem 1fr; align-items: end; gap: var(--space-2); }
.sign-line + .sign-line { margin-top: var(--space-4); }
.sign-line span { font-size: var(--fs-sm); color: var(--text-muted); }
.sign-line i { display: block; height: 2.2rem; border-bottom: 1px solid var(--control-border); }
.claim-sheet h4 { margin: var(--space-5) 0 0; font-size: var(--fs-md); }
.claim-total { display: flex; justify-content: flex-end; gap: var(--space-4); margin: var(--space-4) 0 0; font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.claim-note { margin: var(--space-4) 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* Print: only the claim form, black on white, whatever theme is on screen */
@media print {
  @page { margin: 14mm; }
  .view:not(#claim), .no-print, .page-title, #storage-warning, .app-footer, .toast-stack, dialog { display: none !important; }
  #gnav-layout { display: block; width: auto; max-width: none; margin: 0; }
  .app { max-width: none; }
  main { margin: 0; }
  .claim-sheet { padding: 0; border: 0; box-shadow: none; background: #fff; color: #000; }
  .claim-sheet * { color: #000 !important; background: transparent !important; box-shadow: none !important; }
  .claim-sheet .table-wrap { overflow: visible; border: 0; margin-top: 4mm; }
  .claim-sheet table { width: 100%; border-collapse: collapse; font-size: 10pt; }
  .claim-sheet th, .claim-sheet td { border: 1px solid #000 !important; padding: 1.5mm 2mm; position: static; }
  .claim-sheet .sign-line i { border-bottom: 1px solid #000; }
  .claim-sheet tr { break-inside: avoid; }
}