/*! app.css — this app's additions on top of the starter kit's components.css. Tokens only, no colours.

   What it adds: centred narrow pages (sign-in), flash messages, form grids, small buttons, the F6 button and
   dialog, review-screen helpers (raw value under a field, confirmed / to-check rows), progress bar.
   Main classes: .narrow .center .flash(.ok .err .warn) .form-grid .btn-small .f6-btn .f6-dialog .raw .progress
   .tall .nowrap .det .pill-list .filter .actions .changed
   Role pages (phase 1): menu icons + badges (.nav-link svg, .nav-badge), home tiles (.tiles .tile .tile-*),
   fleet board (.car-grid .car-card .plate .dot .chips .chip-btn), key/value tables (.kv), status text
   (.ok-text .warn-text .danger-text), document photos (.poze-grid .poza), handover steps (.step .step-nr),
   tank buttons (.fuel), sticky save bar (.sticky-save), checkboxes with a label (.check).
   Demo build: the strip on every page (.demo-strip) and the guest box on the sign-in page (.demo-box).
   Gotchas: keep the starter files unchanged; anything new goes here. */

.narrow { max-width: 460px; margin: 6vh auto; padding: 0 16px; }
.brand.center { justify-content: center; text-decoration: none; }
a.brand { text-decoration: none; }
.theme-under { margin-top: 14px; }
.who { padding: 4px 8px 10px; line-height: 1.3; }
.sidebar-foot form { margin: 0 0 10px 8px; }

.flash { border: 1px solid currentColor; border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 14px; background: var(--surface); }
.flash.ok { color: var(--ok); }
.flash.err { color: var(--danger); }

.stack { display: grid; gap: 12px; }
.form-grid { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.form-grid .wide { grid-column: 1 / -1; }
.btn-small { padding: 5px 10px; font-size: .85rem; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.filter { margin-bottom: 12px; }
.filter input[type=search] { min-width: min(360px, 100%); }
.tall { max-height: 72vh; }
.nowrap { white-space: nowrap; }
td.det { font-family: var(--font-mono); font-size: .8rem; max-width: 420px; overflow-wrap: anywhere; }
.pill-list { display: flex; gap: 6px 12px; flex-wrap: wrap; }
.pill-list label { display: inline-flex; gap: 5px; align-items: center; }
h2.section { margin-top: 22px; }
.hint { font-size: .85rem; color: var(--muted); }

/* Review screen: the original sheet cell is shown under each field. */
.raw { font-size: .8rem; color: var(--muted); font-family: var(--font-mono); overflow-wrap: anywhere; }
.raw::before { content: "Sheets: "; font-family: var(--font); }
.changed { border-color: var(--warn) !important; }
tr.to-check td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
tr.confirmed td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.progress { height: 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--trim); }

/* F6 feedback */
.f6-btn { position: fixed; right: 16px; bottom: 16px; z-index: 9; }
.f6-dialog textarea { width: 100%; min-height: 110px; }
.f6-dialog .shot { max-width: 100%; max-height: 200px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
img.captura { max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); }

@media print { .f6-btn, .sidebar { display: none; } }
.link-card { text-decoration: none; color: inherit; display: block; }
.link-card:hover { border-color: var(--accent); }
.badge { white-space: nowrap; }
.form-grid .field { align-content: start; }
input[type=date] { min-height: 40px; }
.main { padding-bottom: 64px; }
/* Menu: always open on a desk monitor; on a phone it folds behind the "Meniu" button. */
.nav-details > summary { list-style: none; }
.nav-details > summary::-webkit-details-marker { display: none; }
.nav-toggle { display: none; }
@media (max-width: 760px) {
    .sidebar { position: relative; padding: 10px 12px; }
    .sidebar .brand { padding: 4px 8px; }
    .nav-toggle { display: inline-block; position: absolute; top: 12px; right: 12px; cursor: pointer; }
}

/* ---- Role pages ---- */
.icon { width: 18px; height: 18px; flex: none; vertical-align: -3px; }
.nav-link { display: flex; align-items: center; gap: 9px; }
.nav-label { flex: 1; }
.nav-badge { font-size: .72rem; font-weight: 700; min-width: 20px; padding: 1px 6px; border-radius: 999px; text-align: center; background: var(--primary); color: var(--on-primary); }
.flash.warn { color: var(--warn); }
.ok-text { color: var(--ok); }
.warn-text { color: var(--warn); }
.danger-text { color: var(--danger); }
.small { font-size: .85rem; }
.empty-state { text-align: center; padding: 28px 16px; }
.row.wrap { flex-wrap: wrap; }
.check { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.check input { width: 20px; height: 20px; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; display: grid; gap: 6px; }
legend { color: var(--ink-2); font-size: .85rem; padding: 0 4px; }
.btn.big { padding: 13px 22px; font-size: 1.05rem; }
.btn { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; }
.btn.nav-toggle { display: none; }
@media (max-width: 760px) { .btn.nav-toggle { display: inline-flex; } }
.actions-inline { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.actions-inline form { margin: 0; }

/* Home: "Ce e de făcut" tiles. Calm when nothing waits; amber or red edge when something does. */
.tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 14px; }
.tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; box-shadow: inset 4px 0 0 var(--line); }
.tile:hover { border-color: var(--accent); }
.tile.warn { box-shadow: inset 4px 0 0 var(--warn); }
.tile.danger { box-shadow: inset 4px 0 0 var(--danger); }
.tile-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink-2); }
.tile.warn .tile-icon { color: var(--warn); }
.tile.danger .tile-icon { color: var(--danger); }
.tile-text { display: grid; flex: 1; min-width: 0; }
.tile-num { font: 700 1.6rem/1.1 var(--font-display); color: var(--heading); }
.tile-title { font-weight: 600; }
.tile-detail { font-size: .82rem; color: var(--muted); }
.tile-go { color: var(--muted); }

/* Chips: status filters, quick dates, tank level */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 500 .88rem var(--font); cursor: pointer; text-decoration: none; }
.chip-btn:hover { background: var(--surface-hover); }
.chip-btn.active, .chip-btn:has(input:checked) { background: var(--accent-soft); border-color: var(--accent); color: var(--heading); }
.fuel .chip-btn { min-width: 58px; justify-content: center; padding: 9px 12px; }
.fuel input { position: absolute; opacity: 0; pointer-events: none; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.ok { background: var(--ok); } .dot.warn { background: var(--warn); } .dot.danger { background: var(--danger); } .dot.info { background: var(--info); }

/* Fleet board */
.car-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.car-card { display: grid; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.car-card[hidden] { display: none; }
.car-meta { display: flex; gap: 14px; font-size: .85rem; }
.motiv { font-size: .85rem; }
.plate { font-family: var(--font-mono); font-weight: 700; letter-spacing: .04em; padding: 1px 7px; border: 1.5px solid var(--ink); border-radius: 4px; color: var(--ink); text-decoration: none; background: var(--surface); white-space: nowrap; }
.plate.big { font-size: 1.5rem; padding: 2px 10px; }
.badge.big { font-size: .92rem; padding: 4px 12px; }
table.kv { border-collapse: collapse; width: 100%; }
table.kv th { text-align: left; font-weight: 500; color: var(--ink-2); padding: 5px 10px 5px 0; width: 45%; }
table.kv td { padding: 5px 0; }

/* Clients: documents block and photos */
.acte-rezumat { margin-bottom: 14px; }
ul.probleme { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 4px; }
ul.probleme a { color: inherit; }
.poze-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 10px; }
.poza { display: grid; gap: 6px; align-content: start; }
.poza img { width: 100%; aspect-ratio: 1.58; object-fit: cover; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.poza-goala { display: grid; place-items: center; aspect-ratio: 1.58; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }
.poza label.btn { cursor: pointer; justify-content: center; }
details.card > summary { cursor: pointer; }
#mrz { width: 100%; font-family: var(--font-mono); text-transform: uppercase; margin-top: 8px; }
.sticky-save { position: sticky; bottom: 8px; z-index: 2; box-shadow: var(--shadow); }

/* Handover steps */
.step .step-nr { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: .85rem; }
.step { margin-bottom: 12px; }
.main > .card, .main > details.card { margin-bottom: 14px; }
@media (max-width: 760px) {
    .app { grid-template-rows: auto 1fr; }
    .poze-grid { grid-template-columns: 1fr 1fr; }
    .main { padding: 16px 12px 72px; }
    .tiles, .car-grid { grid-template-columns: 1fr; }
    .btn.big { width: 100%; justify-content: center; }
}
[hidden] { display: none !important; }

/* Demo build: a plain strip in the warning colour, and the guest box on the sign-in page. */
.demo-strip { border-bottom: 2px solid var(--warn); color: var(--warn); background: var(--surface); padding: 6px 16px; font-size: 0.9em; text-align: center; }
.demo-strip strong { text-transform: uppercase; letter-spacing: 0.04em; }
.demo-box { border: 2px dashed var(--warn); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; }
.demo-box .parola { font-family: var(--font-mono); font-size: 1.3em; color: var(--warn); }
.demo-box .roluri { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }