/* ==========================================================================
   NOTIFO - front.css
   Design comun pentru toate paginile (client + login/inregistrare):
   index.php, login.php, register.php, account.php, garage.php, acte.php,
   import.php.

   INSTALARE: <link rel="stylesheet" href="assets/css/front.css"> in <head>.

   Fiecare pagina isi seteaza latimea prin clasa pe <body>:
   w-480 / w-560 / w-600 / w-700 / w-720 / w-wide.

   Paginile admin (clients.php + ecranele "alege client") incarca in plus
   admin.css, dupa acest fisier.
   ========================================================================== */

/* Fonturile (Instrument Sans + Inter) se incarca acum din <head>-ul
   fiecarei pagini (vezi render_font_preload() in auth.php), cu
   preconnect - NU mai prin @import aici, care bloca randarea intregii
   pagini pana se rezolva stylesheet-ul extern. */

:root {
  /* Paleta Notifo - aceeasi ca in landing page (index.php) si in
     proiectul de design "Notifo brand": albastru profund/viu, chihlimbar
     pentru "expira in curand", caramiziu EXCLUSIV pentru ce e deja
     expirat. "In regula" foloseste albastrul brandului, nu verde -
     paleta oficiala nu contine verde (vezi CLAUDE.md al proiectului). */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display: 'Instrument Sans', var(--font);

  --c-brand:       #2E6FD9;
  --c-brand-dark:  #1B3A6B;
  --c-brand-light: #EAF1FB;
  /* Fundalul header-ului (app-bar) - FIX, identic in light si dark mode.
     Nu poate fi var(--c-brand-dark): in dark mode acea variabila devine
     albastru viu #2E6FD9 (mai deschis), iar textul/iconitele albe de pe
     el pica sub pragul de contrast WCAG AA. Header-ul e un element de
     brand, nu de continut - ramane mereu bleumarin profund. */
  --c-header-bg: #142B54;

  --c-success:      #1B3A6B;
  --c-success-bg:   #EAF1FB;
  --c-success-bord: #D7E1F2;

  --c-danger:       #C4382C;
  --c-danger-bg:    #FBEAE8;
  --c-danger-bord:  #C4382C;

  --c-warning:      #8A5A00;
  --c-warning-bg:   #FCF1DD;
  --c-warning-bord: #E0A030;

  --c-text:   #16202E;
  --c-muted:  #5B6472;
  --c-border: #D7E1F2;
  --c-bg:     #F4F6FA;
  /* suprafata "ridicata" (carduri, input-uri, bara de jos pe mobil) -
     distincta de --c-bg (fundalul paginii), ca sa functioneze corect
     si in dark mode (unde nu mai pot fi pur si simplu "#fff" fixat) */
  --c-surface:       #FFFFFF;
  --c-surface-hover: #EAF1FB;
  --c-toast-bg:   #16202E;
  --c-toast-text: #FFFFFF;

  --radius:    6px;
  --radius-sm: 6px;
  --shadow:    0 2px 10px rgba(27, 58, 107, .08);
  --shadow-md: 0 8px 24px rgba(27, 58, 107, .12);
  --shadow-sm: 0 1px 4px rgba(27, 58, 107, .08);
  --transition: 150ms ease;
}

/* ---------- Dark mode ----------
   Comutat manual (buton in bara de taburi, vezi render_tab_bar() din
   auth.php) + retine alegerea in localStorage; daca utilizatorul nu a ales
   niciodata explicit, respectam preferinta sistemului (prefers-color-scheme)
   - vezi scriptul inline din render_theme_init_script().
   Ramane in familia de albastru Notifo (bleumarin profund in loc de gri
   neutru), doar cu accente mai deschise/saturate pentru contrast WCAG AA
   pe fundal inchis - nu doar culorile din light mode cu fundal schimbat. */
:root[data-theme="dark"] {
  --c-brand:       #6FA3EE;
  --c-brand-dark:  #2E6FD9;
  --c-brand-light: rgba(46, 111, 217, .16);
  --c-header-bg: #142B54; /* fix, vezi comentariul din :root */

  --c-success:      #A9C6F2;
  --c-success-bg:   rgba(46, 111, 217, .14);
  --c-success-bord: rgba(169, 198, 242, .35);

  --c-danger:       #FF8A75;
  --c-danger-bg:    rgba(196, 56, 44, .2);
  --c-danger-bord:  #C4382C;

  --c-warning:      #FFCF6B;
  --c-warning-bg:   rgba(224, 160, 48, .16);
  --c-warning-bord: #E0A030;

  --c-text:   #E8EEF9;
  --c-muted:  #9AA8BD;
  --c-border: #2A3B57;
  --c-bg:     #10192B;
  --c-surface:       #16233D;
  --c-surface-hover: #1D2C4A;
  --c-toast-bg:   #E8EEF9;
  --c-toast-text: #10192B;

  --shadow:    0 2px 10px rgba(0, 0, 0, .35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, .35);
}

/* ---------- Reset & tipografie ---------- */

* { box-sizing: border-box; }

body {
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-bg);
  margin: 0 auto;
  padding: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-family: var(--font-display);
  color: var(--c-brand-dark);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 4px 0 18px;
}

a { color: var(--c-brand); }
a:hover { color: var(--c-brand-dark); }

/* latimi de pagina, aplicate pe <body>. FARA margin-top individual -
   fiecare pagina avea o valoare diferita (30-40px), asa ca header-ul
   "sarea" in sus/jos la navigare intre pagini si irosea spatiu sus.
   Header-ul sta acum la aceeasi distanta de varf (doar padding-ul lui
   body, mai jos) pe orice pagina. */
body.w-480 { max-width: 480px; }
body.w-560 { max-width: 560px; }
body.w-600 { max-width: 600px; }
body.w-700 { max-width: 700px; }
body.w-720 { max-width: 720px; }
/* Pagini late, cu tabele/date dense (ex. Starea flotei) - folosesc
   latimea desktop-ului in loc sa se comprima in aceeasi coloana ingusta
   ca formularele. Ramane fluid/responsive pe ecrane mai mici. */
body.w-wide { max-width: 1440px; }

/* ---------- Bara de navigare superioara ---------- */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
  font-size: 14px;
}

.nav a {
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition);
}

.nav a:hover { text-decoration: underline; }

/* ---------- Formulare ---------- */

label {
  display: block;
  margin-top: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-muted);
}

input, select, textarea {
  font-family: inherit;
  font-size: 15px;
  padding: 9px 11px;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  background: var(--c-surface);
  color: var(--c-text);
  transition: border-color var(--transition), box-shadow var(--transition);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--c-brand);
  box-shadow: 0 0 0 3px var(--c-brand-light);
}

input[type=file] { padding: 6px; background: none; border: 1px dashed var(--c-border); }

/* checkbox/radio nu trebuie sa mosteneasca width:100% de la regula generala
   de mai sus - altfel fiecare bifa are nevoie de style="width:auto" inline */
input[type=checkbox], input[type=radio] {
  width: auto;
  margin-top: 0;
}

/* ---------- Bife (checkbox) ca "chip"-uri usor de atins pe mobil ----------
   Folosite in loc de <label><input type=checkbox> text</label> simplu:
   intreaga eticheta devine zona de atins (min. 44px inaltime), nu doar
   patratelul de 16px al bifei native. */

.chk-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

label.chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 0;
  padding: 6px 14px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

label.chk:hover { background: var(--c-bg); border-color: var(--c-brand); }

.chk input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--c-brand);
  cursor: pointer;
}

/* checkbox de selectie pe cardul unei masini (pentru raportul PDF) */
.report-check {
  width: 20px;
  height: 20px;
  margin: 0 6px 0 0;
  vertical-align: middle;
  accent-color: var(--c-brand);
  cursor: pointer;
}

textarea { font-family: "SFMono-Regular", Consolas, Menlo, monospace; }

fieldset {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
  margin-top: 24px;
  padding: 8px 16px 16px;
}

legend {
  font-family: var(--font-display);
  padding: 0 6px;
  font-weight: 700;
  font-size: 15px;
  color: var(--c-brand-dark);
}

/* pe ecrane inguste, doua campuri unul langa altul devin prea stramte -
   trec automat pe cate un rand (flex-basis minim, nu o media query fixa
   legata de un breakpoint anume - se adapteaza la orice latime) */
.row { display: flex; flex-wrap: wrap; gap: 12px; }
.row > div { flex: 1 1 200px; }

.readonly-note { color: var(--c-muted); font-size: 12px; margin-top: 3px; }

.hidden { display: none; }

/* ---------- Butoane ---------- */

button {
  font-family: inherit;
  background: var(--c-brand);
  color: #fff;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  margin-top: 14px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-weight: 600;
  transition: background-color var(--transition), transform 100ms ease;
}

button:hover { background: var(--c-brand-dark); }
button:active { transform: translateY(1px); }

button.save, button.btn-save { background: var(--c-success); }
button.save:hover, button.btn-save:hover { background: var(--c-brand-dark); }

button.link {
  background: none;
  border: 0;
  color: var(--c-danger);
  cursor: pointer;
  padding: 0;
  margin-top: 0;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
}

a.link, small.link {
  color: var(--c-brand);
  cursor: pointer;
  text-decoration: underline;
  font-size: 13px;
  font-weight: 600;
}

form.inline { display: inline; }

/* ---------- Carduri ---------- */

.card {
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
  background: var(--c-surface);
  box-shadow: var(--shadow);
}

.card h3 { margin: 0 0 8px; font-size: 16px; }

a.card {
  display: block;
  text-decoration: none;
  color: var(--c-brand);
  font-weight: 600;
  transition: box-shadow var(--transition), transform var(--transition);
}

a.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* ---------- Mesaje / stari ---------- */

.box {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 14px;
}

.box.ok, .box.valid {
  background: var(--c-success-bg);
  border: 1px solid var(--c-success-bord);
  color: var(--c-success);
}

.box.err, .box.expired {
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-bord);
  color: var(--c-danger);
}

.box.unknown {
  background: var(--c-warning-bg);
  border: 1px solid var(--c-warning-bord);
  color: var(--c-warning);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  margin: 2px 6px 2px 0;
}

.pill.valid   { background: var(--c-success-bg); color: var(--c-success); border: 1px solid var(--c-success-bord); }
.pill.expired { background: var(--c-danger-bg);  color: var(--c-danger);  border: 1px solid var(--c-danger-bord); }
.pill.unknown { background: var(--c-warning-bg); color: var(--c-warning); border: 1px solid var(--c-warning-bord); }

/* ✕ de resetare per document, atasat direct pe pastila (pattern "chip cu
   remove", cunoscut din Gmail/Material). .pill e acum flex cu
   align-items:center, deci ✕-ul se centreaza vertical automat fata de
   iconita+text din fata lui - nu mai depinde de vertical-align/baseline. */
.pill-clear {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .15);
  color: inherit;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition), transform 100ms ease;
}

.pill-clear:hover,
.pill-clear:focus-visible {
  background: rgba(0, 0, 0, .3);
}

.pill-clear:active { transform: scale(.9); }

.empty { color: var(--c-muted); text-align: center; margin-top: 40px; }

/* ---------- Butoane de actiune pe card (ex. garaj: corecteaza / actualizeaza / sterge) ----------
   Tinta de atingere generoasa pentru mobil (min. 44px inaltime, standard
   Apple HIG / Google Material), spatiate cu gap, se aranjeaza automat
   pe mai multe randuri daca nu incap pe un rand (evita tap-uri
   accidentale pe linkul vecin). */

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  margin-top: 0;
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  /* fundal usor gri-albastrui, nu alb pur - altfel butonul e practic
     invizibil pe fundalul alb al cardului (se observa doar prin chenarul
     foarte deschis), mai ales pentru iconite fara culoare proprie (🗑️) */
  background: var(--c-bg);
  color: var(--c-text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition), transform 100ms ease;
}

.action-btn:hover {
  background: var(--c-surface);
  border-color: var(--c-brand);
  color: var(--c-brand);
  text-decoration: none;
}

.action-btn:active { transform: translateY(1px); }

/* Buton rotund mic (ex. restrange/extinde card) - trebuie sa suprascrie
   explicit regula globala button{min-height:44px;padding:10px 18px},
   altfel iese oval (latimea creste din padding, inaltimea e fortata la
   44px de min-height, chiar daca width/height sunt setate mai mici) -
   aceeasi problema mai patita si-n alta parte pe site. */
.card-collapse-btn {
  width: 32px;
  height: 32px;
  min-height: 0;
  min-width: 0;
  padding: 0;
  margin-top: 0;
  border-radius: 50%;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  color: var(--c-muted);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}
.card-collapse-btn:hover {
  background: var(--c-surface);
  border-color: var(--c-brand);
  color: var(--c-brand);
}

.action-btn--success { color: var(--c-success); border-color: var(--c-success-bord); background: var(--c-success-bg); }
.action-btn--success:hover { background: var(--c-brand-light); color: var(--c-success); }

.action-btn--danger { color: var(--c-danger); border-color: var(--c-danger-bord); background: var(--c-danger-bg); }
.action-btn--danger:hover { background: var(--c-danger-bg); filter: brightness(.96); color: var(--c-danger); }

.action-btn--brand { color: var(--c-brand); border-color: var(--c-brand); background: var(--c-brand-light); }
.action-btn--brand:hover { background: var(--c-brand-light); filter: brightness(.96); }

.action-btn--warning { color: var(--c-warning); border-color: var(--c-warning-bord); background: var(--c-warning-bg); }
.action-btn--warning:hover { background: var(--c-warning-bg); filter: brightness(.96); }

/* Buton "Anuleaza" langa submit, in formulare toggle (adauga/editeaza) -
   trebuie sa arate ca un link discret, nu ca actiunea principala (aia e
   deja butonul de submit alaturat) - suprascrie regula globala button{}
   (fundal plin, min-height 44px). Pastram totusi padding suficient pe
   verticala ca zona de atins sa ramana rezonabila pe mobil, fara sa fortam
   44px stricte ca la actiunile principale. */
.linklike {
  background: transparent;
  color: var(--c-muted);
  border: 0;
  min-height: 0;
  padding: 10px 4px;
  margin-top: 14px;
  text-decoration: underline;
  font-size: 13.5px;
}
.linklike:hover { background: transparent; color: var(--c-brand); }

/* mesaj de stare pentru "Actualizeaza" (feedback real, in pagina - nu doar
   spinner-ul barei de adresa a browserului, care nu spune nimic despre
   progresul efectiv al reinterogarii) */
.refresh-status {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
}

.refresh-status--pending { background: var(--c-brand-light); color: var(--c-brand-dark); }
.refresh-status--ok      { background: var(--c-success-bg); color: var(--c-success); }
.refresh-status--err     { background: var(--c-warning-bg); color: var(--c-warning); }

/* ---------- Card vehicul (garaj) ---------- */

.vehicle-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.vehicle-header .report-check {
  margin-top: 3px;
  flex-shrink: 0;
}

.vehicle-plate {
  font-family: var(--font-display);
  color: var(--c-brand-dark);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.vehicle-subtitle {
  font-size: 13.5px;
  color: var(--c-muted);
  font-weight: 500;
  margin-top: 1px;
  overflow-wrap: anywhere;
}

/* Rezumatul implicit al unei masini (progressive disclosure) - un singur
   indicator de stare, mare si usor de scanat, in loc de cele 4 pastile
   detaliate. Detaliile complete raman disponibile la un click pe
   "Detalii", nu sunt sterse - doar ascunse implicit. */
.vehicle-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

/* Text plat, fara pastila umpluta - sistemul de design Notifo interzice
   "carduri plutitoare" si accente grele; starea se transmite doar prin
   culoarea textului (+ un punct patrat pentru "expira in curand"). */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}

.status-badge--ok      { color: var(--c-success); }
.status-badge--soon    { color: var(--c-text); }
.status-badge--soon .status-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--c-warning-bord); flex-shrink: 0; }
.status-badge--problem { color: var(--c-danger); }

.details-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 6px 4px;
  margin: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
}

.details-toggle:hover { color: var(--c-brand); }

.vehicle-details {
  margin-top: 6px;
}

.vehicle-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2px;
}

/* metadatele ("ultima verificare") sunt informatie secundara, de audit -
   vizual mai discrete decat pilulele de status, separate printr-o linie
   subtila ca sa nu se contopeasca vizual cu ele */
.vehicle-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--c-border);
  font-size: 13px;
  line-height: 1.4;
  color: var(--c-muted);
}

.vehicle-meta span { white-space: nowrap; }

/* ---------- Starea flotei: tabel continuu (nu carduri separate) ----------
   Un singur container alb, randuri zebrate, fara umbra/chenar per masina -
   exact structura din designul "Starea flotei" (desktop = tabel, mobil =
   stack cu etichete inline). Severitatea nu mai e un chenar gros in jurul
   intregii masini, ci doar un accent subtire pe marginea stanga + culoarea
   textului din coloana Stare - la fel ca in mockup. */
/* Fara umbra mare / "card plutitor" - regula explicita a sistemului de
   design Notifo. Doar un contur subtire pe fundalul paginii. */
.fleet-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  margin: 4px 0 20px;
}

.fleet-header h1 {
  font-family: var(--font-display);
  margin: 0;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -.025em;
  color: var(--c-brand-dark);
}

.fleet-header p {
  margin: 8px 0 0;
  font-size: 16px;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}

/* Fara overflow:hidden aici - ar rupe position:sticky pe capul de tabel
   de mai jos (orice ancestor cu overflow diferit de "visible" anuleaza
   sticky in Chrome/Firefox). Coltul rotunjit se obtine punand
   border-radius direct pe primul/ultimul element din tabel. */
.fleet-table {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  margin-bottom: 14px;
}

.fleet-table > .vehicle-columns-head { border-radius: var(--radius) var(--radius) 0 0; }
.fleet-table > .fleet-row:last-child { border-radius: 0 0 var(--radius) var(--radius); }

/* Sticky doar pe desktop (pe mobil e oricum display:none - fiecare
   rand isi arata singur eticheta). Ramane vizibil in timp ce dai scroll
   prin lista, ca sa stii mereu ce coloana stergi cand apesi ✕, fara sa
   te bazezi doar pe confirm()-ul din JS. */
.vehicle-columns-head {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1.3fr) minmax(0,1.2fr);
  gap: 10px;
  padding: 14px 18px;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-text);
  position: sticky;
  top: 0;
  z-index: 5;
}

/* Pe client (nu admin) mai exista deasupra bara sticky de navigare
   (.app-bar-outer, z-index 300 - mai mare decat 5 de aici), tot pinata la
   top:0 - fara offset, capul de coloane s-ar bloca EXACT sub ea, ascuns
   la nesfarsit cat derulezi (parea ca "nu ramane fix", desi de fapt
   ramanea fix, doar acoperit - bug raportat 2026-09-23). Pe admin (meniu
   lateral fix, fara bara sus) nu e nevoie de offset, ramane top:0. */
body:not(:has(.admin-sidebar)) .vehicle-columns-head { top: 72px; }

.fleet-row {
  padding: 16px 18px;
  border-bottom: 1px solid var(--c-border);
  border-left: 3px solid transparent;
  background: var(--c-surface);
}

.fleet-row:last-child { border-bottom: 0; }
.fleet-row:nth-child(even) { background: var(--c-surface-hover); }
.fleet-row[data-urgency="problem"] { border-left-color: var(--c-danger-bord); }
.fleet-row[data-urgency="soon"]    { border-left-color: var(--c-warning-bord); }

/* Flash scurt dupa ce salvezi ceva pe o masina (vezi #vehicle-<VIN> in
   URL dupa redirect) - confirma vizual "asta e masina la care tocmai
   ai lucrat, s-a salvat", fara sa trebuiasca sa cauti prin lista.
   Albastru de brand (nu verde/galben/rosu) - intentionat distinct de
   culorile de stare (OK/curand/expirat), ca sa nu se confunde "tocmai
   modificat" cu "are o problema". Puls tare imediat, apoi fade treptat
   (pattern standard - vezi si .flash-select de mai jos, aceeasi idee,
   dar acolo doar un inel subtire; aici + fundal solid, ca sa fie
   observabil clar, nu doar o nuanta aproape imperceptibila). */
@keyframes just-updated-flash {
  0%   { background: var(--c-brand-light); box-shadow: inset 0 0 0 2px var(--c-brand); }
  60%  { background: var(--c-brand-light); box-shadow: inset 0 0 0 2px var(--c-brand); }
  100% { background: transparent; box-shadow: inset 0 0 0 0 transparent; }
}

/* Generic, nu doar pentru Garaj - orice element cu id-ul tinta dupa un
   redirect de salvare (ex. #contact-2 in account.php) poate primi clasa
   .just-updated pentru acelasi puls. */
.just-updated {
  animation: just-updated-flash 2.8s ease-out;
}

/* scroll-margin-top: cand deruleaza automat la un id-ancora dupa
   redirect, browserul opreste cu atata spatiu LIBER deasupra randului -
   fara asta, bara de navigare sticky de sus (~70px) acopera varful
   elementului tinta, iar scrollIntoView() isi face calculul pe toata
   inaltimea ecranului, inclusiv portiunea acoperita - rezultatul era ca
   ajungeai putin mai jos decat tinta cautata (vedeai practic urmatorul
   element). Generic (.scroll-target), reutilizabil oriunde, nu doar
   .fleet-row din Garaj. */
.fleet-row, .scroll-target { scroll-margin-top: 90px; }

/* Desktop: un singur rand de tabel cu 7 coloane explicite (Vehicul / RCA /
   ITP / Rovinieta / Revizie / Acte / Stare). .vehicle-head si .vehicle-docs
   sunt doar wrappere logice pentru markup (necesare pentru gruparea de pe
   mobil) - "display:contents" le face invizibile pentru grid, copiii lor
   devin direct elemente ale grilei, plasate explicit pe coloana lor. */
.vehicle-row {
  display: grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1.15fr) minmax(0,1.3fr) minmax(0,1.2fr);
  gap: 10px;
  /* "start", nu "center" - plaeuta/VIN-ul lung poate ocupa 2 randuri,
     iar centrarea fata de tot blocul variabil facea ca restul coloanelor
     (un singur rand fiecare) sa para "plutind" la inaltimi diferite intre
     masini. Aliniate de sus, toate coloanele pornesc din acelasi punct. */
  align-items: start;
  padding-top: 2px;
}

.vehicle-head, .vehicle-docs { display: contents; }

/* padding-top: coloanele RCA/ITP/etc isi centreaza textul intr-o cutie
   de 28px (ca sa faca loc butonului ✕), ceea ce le coboara ~4px fata
   de varful randului. Vehicul nu are acea cutie, deci fara acest
   padding placuta arata "mai sus" decat restul randului - il adaugam
   explicit ca sa porneasca din acelasi punct. */
.vehicle-id     { grid-column: 1; grid-row: 1; display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding-top: 4px; }
.vehicle-id .report-check { margin-top: 3px; flex-shrink: 0; }
.vehicle-id > div { min-width: 0; }

.col-rca      { grid-column: 2; grid-row: 1; }
.col-itp      { grid-column: 3; grid-row: 1; }
.col-rov      { grid-column: 4; grid-row: 1; }
.col-revizie  { grid-column: 5; grid-row: 1; }
.col-acte     { grid-column: 6; grid-row: 1; }
.vehicle-stare { grid-column: 7; grid-row: 1; display: flex; align-items: center; gap: 8px; justify-content: flex-start; flex-wrap: wrap; }

/* .col-acte poate avea 0, 1 sau mai multe acte (spre deosebire de restul
   coloanelor, care au mereu exact un document). PRIMUL act sta pe acelasi
   rand cu eticheta, exact ca RCA/ITP/Rovinieta/Revizie (consistenta
   vizuala) - doar actele SUPLIMENTARE (a doua+, marcate cu
   .col-value--extra) trec pe rand nou, sub eticheta. */
.col-acte { flex-wrap: wrap; row-gap: 2px; }
.col-acte .col-value.col-value--extra { flex-basis: 100%; width: 100%; }

/* Flexbox standard, fara position:absolute/transform (care s-a dovedit
   fragil - jumatate din buton se taia din cauza unei nepotriviri intre
   inaltimea calculata si cea reala). .col-value e un flex-item separat
   de eticheta, care se poate trunchia (elipsis) daca data+zilele nu
   incap; butonul ✕ e ultimul copil, flex-shrink:0, deci NU se
   micsoreaza si nu e impins in afara - centrarea verticala vine gratis
   din align-items:center, aplicat o singura data la nivelul celulei. */
.vehicle-col {
  min-height: 28px;
  font-size: 14.5px;
  line-height: 1.35;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.vehicle-col .col-label { display: none; }
.vehicle-col .col-value { display: flex; align-items: center; min-width: 0; overflow: hidden; }
.vehicle-col .col-dot { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; flex-shrink: 0; }
.vehicle-col .col-date { font-weight: 600; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vehicle-col .col-days { color: var(--c-muted); font-size: 13px; margin-left: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }

/* Tinta de click generoasa si pe desktop (nu doar pe mobil) - un cerc
   mic de 22px e greu de nimerit chiar si cu mouse-ul, mai ales langa
   text dens intr-un tabel. Ultimul copil al randului flex, flex-shrink:0
   - nu se micsoreaza niciodata, indiferent cat de lunga e data de langa el. */
.col-clear {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  /* regula globala "button { min-height: 44px }" (buna practica pentru
     tinta de atins) altfel intra in conflict cu inaltimea explicita de
     mai sus - min-height castiga mereu in fata unui height mai mic, deci
     butonul devenea 28x44 (oval) in loc de 28x28 (cerc). Pe mobil ramane
     44x44 (patrat -> cerc perfect), acolo nu apare conflictul. */
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--c-border);
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-muted);
  cursor: pointer;
  opacity: .85;
  transition: opacity var(--transition), background-color var(--transition), color var(--transition), border-color var(--transition);
}

.col-clear:hover,
.col-clear:focus-visible { opacity: 1; background: var(--c-danger-bg); color: var(--c-danger); border-color: var(--c-danger-bord); }

/* Popover de confirmare custom - inlocuieste confirm()-ul nativ al
   browserului peste tot in Garaj (nesigur in unele contexte: browsere
   mobile, aplicatie instalata ca PWA - a blocat chiar randarea paginii
   in timpul testelor). Card simplu, langa butonul apasat, cu doua
   butoane mari (Da/Anuleaza) - min. 44px inaltime, ca restul actiunilor. */
.confirm-popover {
  position: fixed;
  z-index: 800;
  max-width: 280px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 12px 14px;
}

.confirm-popover p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.4; color: var(--c-text); }

.confirm-popover-actions { display: flex; gap: 8px; }
.confirm-popover-actions .action-btn { flex: 1; justify-content: center; margin-top: 0; }

/* Modal centrat pe ecran (spre deosebire de .confirm-popover, ancorat de
   un buton) - folosit dupa actiuni cu "urmatorul pas" clar (ex. adauga
   masina -> continua sau mergi la checkout), gen "adauga in cos" din
   magazinele online - vezi discutia din chat. */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 16px;
}
.modal-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 22px 20px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}
.modal-box h3 { margin: 0 0 8px; font-size: 17px; }
.modal-box p { margin: 0 0 16px; font-size: 13.5px; color: var(--c-muted); line-height: 1.4; }
.modal-actions { display: flex; flex-direction: column; gap: 8px; }
.modal-actions .action-btn { justify-content: center; margin-top: 0; width: 100%; }

/* Mobil: cardul redevine ce arata designul - un rand de sus (plaeuta +
   stare) si sub el, cate UN document pe rand (nu grila 2x2) - la latimea
   unui telefon, doua coloane nu lasa loc datei+zilelor+butonului ✕ pe
   acelasi rand, si rezultatul era text rupt inconsecvent intre celule. */
@media (max-width: 860px) {
  .fleet-header { margin: 4px 0 14px; }
  .fleet-header h1 { font-size: 22px; }
  .fleet-header p { font-size: 14px; margin-top: 4px; }
  .fleet-table { margin-bottom: 10px; }
  .fleet-row, .vehicle-columns-head { padding-left: 16px; padding-right: 16px; padding-top: 14px; padding-bottom: 14px; }
  .vehicle-columns-head { display: none; }

  .vehicle-row { display: block; }
  .vehicle-head, .vehicle-docs { display: revert; }

  .vehicle-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
  }

  .vehicle-id { grid-column: auto; grid-row: auto; padding-top: 0; }
  .vehicle-stare { grid-column: auto; grid-row: auto; justify-content: flex-end; text-align: right; }
  .vehicle-plate { font-size: 17px; }
  .vehicle-subtitle { font-size: 13.5px; }
  .status-badge { font-size: 15px; }

  .vehicle-docs {
    display: flex;
    flex-direction: column;
  }

  .col-rca, .col-itp, .col-rov, .col-revizie, .col-acte { grid-column: auto; grid-row: auto; }

  /* randul are inaltime minima de 44px (tinta de atins standard) ca sa
     incapa comod butonul ✕, nu doar textul - vezi si .action-btn */
  .vehicle-col {
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: 15px;
    border-bottom: 1px solid var(--c-border);
  }
  .vehicle-col .col-label { display: inline-block; width: 72px; flex-shrink: 0; color: var(--c-muted); font-weight: 600; font-size: 13px; }
  .vehicle-col .col-value { flex: 1; min-width: 0; }
  .vehicle-col .col-days { font-size: 13px; }
  .col-clear {
    width: 44px;
    height: 44px;
    opacity: .85;
  }
}

/* sub 400px (telefoane foarte inguste) plaeuta+VIN-ul lung nu mai incap
   pe acelasi rand cu pastila de stare - trecem pe doua randuri. */
@media (max-width: 400px) {
  .vehicle-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .vehicle-stare { align-self: flex-start; }
}

/* banner-ul de urgenta: text informativ (nu clicabil) + buton distinct
   "Arata-le", in acelasi limbaj vizual (.action-btn) ca restul actiunilor
   din aplicatie - mai clar decat un text-link ascuns intr-o alerta */
.urgency-banner { font-weight: 700; }

.urgency-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.urgency-row + .urgency-row {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, .08);
}

.urgency-row .action-btn { flex-shrink: 0; }

.urgency-link:hover { text-decoration-style: solid; }
.urgency-link:focus-visible { outline: 2px solid var(--c-danger-bord); outline-offset: 2px; }

/* confirmare vizuala ca o masina tocmai a fost selectata automat de banner-ul
   de urgenta - un puls scurt, nu o schimbare permanenta de stil */
@keyframes flash-select-pulse {
  0%, 100% { box-shadow: var(--shadow); }
  30% { box-shadow: 0 0 0 4px var(--c-brand-light); }
}

.flash-select { animation: flash-select-pulse 1.6s ease; }

/* toast discret, jos pe ecran - confirma actiuni rapide (selectie automata)
   fara sa intrerupa fluxul cu un alert() blocant */
#toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(20px);
  background: var(--c-toast-bg);
  color: var(--c-toast-text);
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  z-index: 700;
  max-width: 90vw;
  text-align: center;
}

#toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 600px) {
  #toast { bottom: 90px; }
}

/* Pe mobil, flex-wrap cu butoane de latimi diferite arata neuniform
   ("aruncate la intamplare") - trecem la un grid de 2 coloane egale,
   aliniat curat. Daca ramane un buton singur pe ultimul rand (numar
   impar), il intindem pe toata latimea in loc sa lase un gol strâmb. */
@media (max-width: 600px) {
  .card-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .card-actions > form.inline { display: block; }

  .card-actions .action-btn {
    width: 100%;
    justify-content: center;
  }

  .card-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ---------- Card pliabil (accordion) - ex. "Adauga client nou" ---------- */

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  color: var(--c-text);
  border-radius: var(--radius);
  transition: background-color var(--transition);
}

.collapsible-header:hover { background: var(--c-bg); }

.collapsible-header .chevron {
  color: var(--c-muted);
  transition: transform var(--transition);
}

.collapsible-header.open {
  border-bottom: 1px solid var(--c-border);
  border-radius: var(--radius) var(--radius) 0 0;
}

.collapsible-header.open .chevron { transform: rotate(180deg); }

/* ---------- Navigare principala ----------
   Bara albastru-profund cu sigla "notifo", exact culoarea din sistemul
   de design (nu doar taburi neutre pe fundal alb ca inainte). Desktop:
   rand orizontal continuu. Mobil (sub 600px): taburile se desprind
   intr-o bara fixa de JOS (pattern "bottom navigation", Material/Apple
   HIG pentru 3-5 destinatii), iar sigla + actiunile raman sus, intr-o
   bara subtire. */

/* Bara "sparge" containerul ingust al paginii curente (fiecare pagina
   are propriul body.w-XXX, de la 480px la 1440px) si se intinde mereu
   la aceeasi latime maxima, indiferent unde e afisata - altfel arata
   complet diferit de la o pagina la alta (ingusta pe Cont/Verificare,
   lata pe Garaj), desi codul e identic. Tehnica standard "full-bleed":
   iese din fluxul normal cu latime 100vw, centrata, apoi plafonata. */
.app-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  box-sizing: border-box;
  background: var(--c-header-bg);
  color: #fff;
  padding: 8px 20px;
  border-radius: var(--radius);
  margin: 0 0 20px;
}

/* "Sparge" containerul ingust al paginii (calc(50% - 50vw) anuleaza
   exact offsetul parintelui centrat, indiferent cat de ingust e -
   functioneaza pe orice pagina, de la w-480 la w-wide). Latimea vizuala
   ramane plafonata la 1440px prin padding-ul lateral calculat simetric,
   ca sa arate identic peste tot, nu doar "cat mai lat posibil". */
.app-bar-outer {
  position: sticky;
  top: 0;
  z-index: 300;
  /* acopera continutul care scroleaza pe sub bara, in zona "letterbox"
     din stanga/dreapta cutiei rotunjite .app-bar (cand viewport-ul
     depaseste 1440px) - fara asta, continutul ar transparea prin ea */
  background: var(--c-bg);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(16px, calc(50vw - 720px + 16px));
  padding-right: max(16px, calc(50vw - 720px + 16px));
  padding-top: 12px;
}

.app-bar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -.02em;
  color: #fff;
  flex-shrink: 0;
  text-decoration: none;
  transition: opacity var(--transition);
}

.app-bar-brand svg { width: 26px; height: 26px; }

.app-bar-brand:hover { color: #fff; text-decoration: none; opacity: .8; }

.app-bar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }

/* titlul paginii curente (render_tab_bar, parametrul $pageTitle) - vizibil
   DOAR pe mobil (vezi media query de mai jos). Pe desktop taburile umplu
   deja bara, nu mai e nevoie de el - ramane ascuns, ca sa nu dubleze
   informatia din H2-ul paginii. */
.app-bar-title { display: none; }

/* pastila cu costul curent al abonamentului, in bara de sus - vizibila pe
   orice pagina, nu doar in Contul meu (vezi render_abonament_pill() din
   auth.php). Click -> account.php#abonament, unde se genereaza proforma. */
.abonament-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--transition);
}
.abonament-pill:hover { background: rgba(255, 255, 255, .24); color: #fff; text-decoration: none; }

@media (max-width: 600px) {
  .abonament-pill { font-size: 12px; padding: 0 9px; }
}

.tab-bar {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}

.tab-bar .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background-color var(--transition);
}

.tab-bar .tab-icon { font-size: 15px; line-height: 1; }

.tab-bar .tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, .1);
  text-decoration: none;
}

.tab-bar .tab.active {
  color: #fff;
  font-weight: 700;
  background: rgba(255, 255, 255, .16);
}

/* butonul de deconectare si cel de comutare tema - inline, in bara,
   nu mai plutesc fix peste continut ca inainte. .tollro-quick-btn (acces
   rapid la calculatorul TollRo) foloseste acelasi stil - nu e in rotatia
   de taburi, ca sa nu inguste celelalte 4 pe bara de jos de mobil (vezi
   discutia din chat, 2026-09-29). */
.logout-icon,
.theme-toggle,
.tollro-quick-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 0; /* .theme-toggle e <button>: regula globala button{min-height:44px}
                    il facea oval - vezi acelasi bug rezolvat la .col-clear */
  padding: 0;
  margin: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition), transform 100ms ease;
}

.logout-icon:hover,
.theme-toggle:hover,
.tollro-quick-btn:hover { background: rgba(255, 255, 255, .24); text-decoration: none; }
.logout-icon:active,
.theme-toggle:active,
.tollro-quick-btn:active { transform: translateY(1px); }
.tollro-quick-btn--active { background: rgba(255, 255, 255, .32); border-color: rgba(255, 255, 255, .4); }

/* Calculator TollRo: pe desktop e tab normal in bara de navigare (clasa
   tab-desktop-only), butonul rotund ramane doar pe mobil, unde bara de
   jos ar deveni prea aglomerata cu 5 taburi (vezi discutia din chat,
   2026-09-29). */
@media (min-width: 601px) { .tollro-quick-btn { display: none; } }
@media (max-width: 600px) { .tab-bar .tab.tab-desktop-only { display: none; } }
/* tab "Transport" (TollRo + Foi de parcurs) doar pe mobil; pe desktop sunt doua taburi separate */
@media (min-width: 601px) { .tab-bar .tab.tab-mobile-only { display: none; } }
/* etichete scurte pe mobil (coloane inguste in bara de jos) */
.tab-bar .lbl-short { display: none; }
@media (max-width: 600px) { .tab-bar .lbl-long { display: none; } .tab-bar .lbl-short { display: inline; } }

/* carduri de acces rapid pe Garaj: Calculator TollRo + Foi de parcurs (descoperibilitate) */
.promo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.promo-card { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); text-decoration: none; transition: background-color var(--transition), border-color var(--transition); }
.promo-card:hover { background: var(--c-surface-hover); border-color: var(--c-brand); text-decoration: none; }
.promo-card .promo-ico { font-size: 24px; line-height: 1; flex-shrink: 0; }
.promo-card b { display: block; font-size: 14px; color: var(--c-brand-dark); }
.promo-card small { display: block; color: var(--c-muted); font-size: 12px; line-height: 1.35; margin-top: 2px; }
@media (max-width: 600px) { .promo-card { flex-direction: column; align-items: flex-start; padding: 10px 12px; gap: 4px; } .promo-card .promo-ico { font-size: 20px; } .promo-card small { font-size: 11px; } }

/* afisam doar iconita relevanta pentru tema CURENTA (☀️ cand esti in light
   si ai vrea sa comuti spre dark, 🌙 invers) - un singur simbol clar, nu
   ambele suprapuse */
.theme-icon-dark  { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark  { display: inline; }

/* ---------- Meniu lateral admin (sidebar) ----------
   Inlocuieste bara orizontala de sus pentru admin - cu 13+ taburi nu mai
   incapea (scroll ascuns pe desktop, comprimata ilizibil pe mobil - vezi
   discutia din chat, 2026-08-30). Fix in stanga, pe toata inaltimea.
   :has() e cel care leaga totul de <body>, fara sa fie nevoie sa umblam
   prin fiecare pagina admin in parte dupa clasa ei w-XXX. */
.admin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 220px;
  background: var(--c-header-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  box-sizing: border-box;
  overflow-y: auto;
  z-index: 400;
}

.admin-sidebar .app-bar-brand { margin: 4px 8px 18px; }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }

.sidebar-nav .tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background-color var(--transition);
}

.sidebar-nav .tab-icon { font-size: 16px; line-height: 1; width: 18px; text-align: center; flex-shrink: 0; }

.sidebar-nav .tab:hover { color: #fff; background: rgba(255, 255, 255, .1); text-decoration: none; }

.sidebar-nav .tab.active { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .16); }

.sidebar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .15);
}

/* impinge continutul paginii la dreapta sidebar-ului - functioneaza pe
   orice pagina, indiferent de body.w-XXX (margin-left invinge margin:0
   auto de mai sus prin specificitatea data de :has()) */
body:has(.admin-sidebar) { margin-left: 220px; }

.sidebar-toggle { display: none; }
.admin-sidebar-backdrop { display: none; }

@media (max-width: 860px) {
  .admin-sidebar {
    width: 240px;
    transform: translateX(-100%);
    box-shadow: var(--shadow-md);
    transition: transform var(--transition);
  }
  body.sidebar-open .admin-sidebar { transform: translateX(0); }

  body:has(.admin-sidebar) { margin-left: 0; padding-top: 64px; }

  .sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 12px;
    left: 14px;
    z-index: 450;
    width: 40px;
    height: 40px;
    min-height: 0;
    padding: 0;
    border-radius: 999px;
    background: var(--c-header-bg);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .2);
    font-size: 17px;
    cursor: pointer;
  }

  .admin-sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 390;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
  }
  body.sidebar-open .admin-sidebar-backdrop { opacity: 1; pointer-events: auto; }
}

@media (max-width: 600px) {
  /* Bara de sus pe mobil: lipita de margini (lungime completa, fara colturi rotunde, fara
     spatiu alb deasupra) si fara cuvantul "notifo" - doar logo-ul rotund; titlul paginii
     arata oricum unde esti. Vezi discutia din chat, 2026-10-01. */
  body:has(.app-bar-outer) { padding-top: 0; }
  .app-bar-outer { padding: 0; }
  .app-bar { padding: 6px 12px; margin: 0 0 12px; border-radius: 0; gap: 10px; }
  .app-bar:has(.tab-bar) .app-bar-brand span { display: none; }
  .app-bar-actions { gap: 4px; }
  /* 4 iconite in bara de sus (TollRo, Foi, tema, deconectare) - putin mai mici,
     ca sa incapa si titlul paginii (vezi discutia din chat, 2026-10-01) */
  .app-bar-actions .tollro-quick-btn, .app-bar-actions .theme-toggle, .app-bar-actions .logout-icon { width: 34px; height: 34px; font-size: 15px; }

  /* taburile "sar" jos de tot (bara fixa, mai jos) - umplem golul ramas
     in bara de sus cu titlul paginii curente, in loc sa ramana goala
     intre logo si iconite (vezi discutia din chat, 2026-09-29) */
  .app-bar-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    flex: none;
    overflow: visible;
    background: var(--c-header-bg);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .25);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .tab-bar .tab {
    flex: 1 1 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-height: 58px;
    padding: 6px 2px;
    border-radius: 0;
    font-size: 10.5px;
    text-align: center;
  }

  .tab-bar .tab-icon { font-size: 19px; }
  .tab-bar .tab-label { line-height: 1.15; }

  .tab-bar .tab.active { background: rgba(255, 255, 255, .16); }

  /* spatiu jos ca sa nu se ascunda continutul sub bara fixa - doar pt
     paginile de client (.tab-bar de jos); admin foloseste sidebar (☰),
     nu are bara fixa de jos, deci nu are nevoie de spatiul asta */
  body:not(:has(.admin-sidebar)) { padding-bottom: 74px; }
}

/* ---------- Footer aplicatie (render_footer() din auth.php) ----------
   Acelasi logo/branding "notifo" ca app-bar-ul de sus si ca footer-ul de
   pe index.php (pagina publica) - un singur punct de referinta vizuala,
   aplicat pe TOATE paginile (interne + login/register), nu doar landing. */
.app-footer {
  margin-top: 32px;
  padding: 20px max(16px, calc(50vw - 720px + 16px));
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  border-top: 1px solid var(--c-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.app-footer-brand {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--c-brand-dark);
  text-decoration: none;
}
.app-footer-brand:hover { text-decoration: none; opacity: .8; }
.app-footer-brand svg { color: var(--c-brand-dark); }

.app-footer-meta { color: var(--c-muted); font-size: 13px; }

/* pictograma SAL (ANPC) - obligatorie, vezi comentariul din
   render_footer() (auth.php). Fundal alb fix - imaginea oficiala e
   desenata pentru fundal deschis, ar deveni ilizibila pe fundalul
   intunecat al temei dark. */
.app-footer-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 30px;
  box-sizing: border-box;
  padding: 2px 5px;
  border-radius: 4px;
  background: #fff;
}
.app-footer-badge img { display: block; height: 24px; width: auto; }

/* sigle de plata (Visa/Mastercard/Maestro/Apple Pay/Google Pay) - fiecare
   sigla are alt raport de aspect (unele patrate, altele late) - un simplu
   img cu height fix le lasa nealiniate pe verticala. Fiecare e in propriul
   chip alb, TOATE de aceeasi inaltime (30px, ca la SAL), cu iconita
   centrata in interior - randul ramane compact si aliniat. Marimea e cel
   mai mare compromis care inca incape pe un singur rand pe telefoanele
   obisnuite (vezi discutia din chat, 2026-08-30: 22px/14px erau prea
   mici, ilizibile) - pe ecrane foarte inguste tot se poate rupe elegant
   pe rand doi (flex-wrap ramane activ ca plasa de siguranta). */
.app-footer-pay {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.app-footer-pay .pay-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 30px;
  box-sizing: border-box;
  padding: 0 5px;
  border-radius: 4px;
  background: #fff;
}
.app-footer-pay .pay-badge img { display: block; height: 16px; width: auto; }