/* ============================================================
   Destiny AB — tema "steagul suedez"

   Albastru si galben, culorile drapelului Suediei si ale siglei firmei.
   Albastrul poarta identitatea (bara de sus, tab-ul activ, butoanele
   principale); galbenul e accentul care marcheaza ce e activ acum.

   Portocaliul si rosul RAMAN, dar isi schimba rolul: nu mai sunt culori de
   brand, ci semnale -- scadenta apropiata, restanta, cheltuiala. Verdele
   ramane pentru bani incasati. Asta e important: daca ar fi decorative,
   nu ar mai transmite nimic cand chiar conteaza.
   ============================================================ */

/* Fonturile stau pe serverul nostru (static/fonts), nu se iau de la Google.
   Importul de la Google era blocat de regula de securitate a paginii
   (Content-Security-Policy: doar resurse de pe propriul server), asa ca nu se
   incarca niciunul: pe Windows se vedea Arial, iar sumele in Courier. Aceleasi
   fonturi si aceleasi grosimi ca in importul vechi, doar luate de la noi.
   Doua bucati pe font: „latin” (inclusiv å ä ö â î) si „latin-ext” (ă ș ț);
   browserul o descarca pe a doua doar cand pe pagina chiar apare o litera din ea.
   Licenta: SIL Open Font License (static/fonts/OFL-*.txt). */
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/barlow-condensed-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/barlow-condensed-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/barlow-condensed-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/static/fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/inter-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/inter-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/inter-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/inter-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/inter-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/inter-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/static/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --navy-950: #0f1e2e;
  --navy-900: #16293d;
  --navy-800: #1f3b57;
  --navy-700: #2c4f70;
  --asphalt-100: #eef1f4;
  --asphalt-200: #d2dbe4;   /* conturul cardurilor -- vizibil, nu doar banuit */
  --asphalt-300: #c3cbd3;
  --paper: #f7f8fa;
  --card: #ffffff;            /* suprafata unui card, a unei ferestre, a unui tabel */
  --bara-jos: rgba(248, 250, 252, .92);
  --bara-jos-plin: rgb(248, 250, 252);

  /* Fundalurile inchise (bara de sus, antetul soferului) sunt separate de
     --navy-*, care se folosesc ca text. Pe tema inchisa cele doua trebuie sa
     mearga in directii opuse: fundalul si mai inchis, textul deschis. */
  --navy-fundal: #0f1e2e;
  --navy-fundal-2: #1f3b57;

  --rosu: #b3261e;
  --rosu-f1: #fdf3f2;
  --rosu-f2: #fde2de;
  --rosu-f3: #fbe9e7;
  --rosu-f4: #fbe3e1;
  --rosu-f5: #fdf6f5;
  --rosu-inchis: #7a2318;
  --albastru-pal: #e4ecf7;
  --verde-pal: #c7ecd7;
  --verde: #2fa06a;
  --portocaliu: #f59331;
  --portocaliu-pal: #fbd9ae;
  --portocaliu-f: #fdf0e3;
  --galben-pal: #f7e2b8;
  --gri-pal: #fbfbfc;
  --ink: #16232f;
  --ink-soft: #55677a;

  /* Albastrul si galbenul din drapel. Galbenul nu se foloseste niciodata
     pentru text pe alb -- nu se citeste; e doar fundal sau accent. */
  --swe-blue: #005293;
  --swe-blue-dark: #003d70;
  --swe-blue-light: #0a6cb8;
  --swe-blue-soft: #e3eefa;
  --swe-yellow: #fecc02;
  --swe-yellow-dark: #d9a900;
  --swe-yellow-soft: #fff6d6;

  --signal-orange: #e8790c;
  --signal-orange-dark: #c4640a;
  --signal-orange-soft: #fde8d2;

  --good-green: #1c7c4c;
  --good-green-soft: #dcf3e6;
  --warn-amber: #a6650a;
  --warn-amber-soft: #fbecd4;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 16px;

  --shadow-card: 0 1px 2px rgba(15, 30, 46, 0.06), 0 4px 16px rgba(15, 30, 46, 0.06);
  --shadow-pop: 0 12px 32px rgba(15, 30, 46, 0.18);

  --font-display: 'Barlow Condensed', sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
}
/* Aici era un fundal de "hartie liniata" -- o linie la fiecare 64px. Arata
   bine cand pagina era mai goala, dar in spatele cardurilor liniile treceau
   pe langa ele si se citeau ca un defect. Daca vrei sa le aduci inapoi:
     background-image: linear-gradient(var(--asphalt-200) 1px, transparent 1px);
     background-size: 100% 64px;
     background-position: 0 120px;
     background-attachment: local;                                            */

a { color: inherit; }
button { font-family: inherit; }

::selection { background: var(--swe-yellow-soft); color: var(--swe-blue-dark); }

/* ---------- Top bar ---------- */

/* ===========================================================================
   Zonele blocate ale ecranului (Dynamic Island, notch, camera, bara de gesturi)
   ---------------------------------------------------------------------------
   Aplicatia instalata se deseneaza pe TOT ecranul, inclusiv sub bara de stare.
   De asta blocul albastru arata bine pana sus -- dar continutul ar intra sub
   ceas si sub baterie daca nu l-am da la o parte.

   iOS ne spune exact cate puncte sunt blocate pe fiecare latura. Le trecem
   prin variabile ca sa le putem si testa: pe un ecran obisnuit valorile sunt
   0, deci nimic nu se schimba.

   "left" si "right" nu sunt zero cand tii telefonul pe orizontala -- atunci
   Dynamic Island ajunge pe o latura.
   =========================================================================== */
:root {
  --sa-sus:    env(safe-area-inset-top, 0px);
  --sa-jos:    env(safe-area-inset-bottom, 0px);
  --sa-stanga: env(safe-area-inset-left, 0px);
  --sa-dreapta:env(safe-area-inset-right, 0px);
}

.topbar {
  background: linear-gradient(160deg, var(--swe-blue) 0%, var(--swe-blue-dark) 100%);
  color: white;
  padding: calc(18px + var(--sa-sus)) calc(20px + var(--sa-dreapta)) 18px calc(20px + var(--sa-stanga));
  position: sticky;
  top: 0;
  z-index: 40;
  /* Dunga galbena de dedesubt e crucea din drapel, redusa la o linie. */
  box-shadow: 0 3px 0 var(--swe-yellow);
}

.topbar-inner {
  max-width: 1460px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo-ul firmei (Destiny AB) -- imagine cu fundal transparent, decupata circular.
   Fundalul propriu al emblemei e tot bleumarin, deci se topeste natural in bara de sus. */
.brand-logo {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  object-fit: contain;
  display: block;
}
.brand-logo-sm { width: 38px; height: 38px; }
.brand-logo-lg { width: 96px; height: 96px; margin: 0 auto 14px; }

@media (max-width: 760px) {
  .brand-logo { width: 40px; height: 40px; }
}

.brand-text h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0.02em;
  margin: 0;
  line-height: 1.1;
}

.brand-text p {
  margin: 0;
  font-size: 12px;
  color: #9fb3c4;
  letter-spacing: 0.03em;
}

.topbar-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: var(--radius-s);
  border: 1px solid transparent;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Text alb pe albastrul inchis: textul inchis de dinainte (#201000) avea un
   contrast de 2,3:1 si abia se citea, mai ales pe telefon in soare. Alb pe
   #005293 da aproape 8:1, iar pe albastrul de la hover peste 5:1. */
.btn-primary {
  background: var(--swe-blue);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--swe-blue-light); }
/* In tema inchisa albastrul e mult mai deschis (#2f8ada): acolo textul
   inchis se citeste mai bine decat albul, deci ramane cum era. */
html[data-theme="dark"] .btn-primary { color: #201000; }

.btn-ghost {
  background: rgba(255,255,255,0.06);
  color: white;
  border-color: rgba(255,255,255,0.16);
}
.btn-ghost:hover { background: rgba(255,255,255,0.12); }

.btn-outline {
  background: var(--card);
  color: var(--navy-900);
  border-color: var(--asphalt-300);
}
.btn-outline:hover { background: var(--asphalt-100); }

.btn-icon-only { padding: 9px; }

/* ---------- Layout ---------- */

.page {
  max-width: 1460px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

/* ---------- Stat cards ---------- */

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
/* Cand apare si al cincilea card ("Total incasari"), trec toate pe cinci
   coloane -- altfel unul singur ar ramane pe un rand nou, sub celelalte patru. */
/* Randul de la Facturi are acum cinci carduri fixe (patru cifre + Istoric);
   cand se aprinde si "Total incasari" devin sase.
   "[style*=none]", fara spatiu, prinde ambele scrieri: cea din HTML
   (display:none) si cea pusa de JavaScript (display: none). Inainte se
   verifica doar varianta cu spatiu, iar la prima incarcare randul ramanea pe
   cinci coloane cu ultima goala -- exact gaura in care sta acum Istoric. */
#invoiceStats { grid-template-columns: repeat(5, 1fr); }
#invoiceStats:has(#statFilteredCard:not([style*="none"])) {
  grid-template-columns: repeat(6, 1fr);
}
@media (max-width: 1450px) {
  #invoiceStats,
  #invoiceStats:has(#statFilteredCard:not([style*="none"])) {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1000px) {
  #invoiceStats,
  #invoiceStats:has(#statFilteredCard:not([style*="none"])) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stats-row:has(#statFilteredCard:not([style*="display: none"])) {
  grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 1250px) {
  .stats-row:has(#statFilteredCard:not([style*="display: none"])) {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
}
.stat-card.tone-total::before { background: var(--navy-fundal-2); }
.stat-card.tone-unpaid::before { background: var(--signal-orange); }
.stat-card.tone-paid::before { background: var(--good-green); }
.stat-card.tone-review::before { background: var(--warn-amber); }
.stat-card.tone-log::before { background: var(--ink-soft); }

/* Cardul de istoric e un <button>, deci trebuie dezbracat de infatisarea
   implicita a butoanelor ca sa arate identic cu cardurile din stanga lui. */
button.stat-card {
  font: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease;
}
button.stat-card:hover { border-color: var(--asphalt-300); }
button.stat-card:focus-visible { outline: 2px solid var(--swe-blue); outline-offset: 2px; }

/* Cat timp ruleaza o sincronizare, dunga din stanga pulseaza incet: se vede
   dintr-o privire ca jurnalul se completeaza chiar acum. */
.stat-card.tone-log.ruleaza::before {
  background: var(--swe-blue);
  animation: puls-istoric 1.4s ease-in-out infinite;
}
@keyframes puls-istoric { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.stat-card.tone-log .stat-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Fereastra de istoric (consola) ---------- */

.log-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2200;
  padding: 20px;
}
.log-zoom-card {
  background: var(--card);
  border-radius: var(--radius-l);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
  width: min(880px, 100%);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* Fereastra creste din card: originea trebuie sa fie centrul ei. */
  transform-origin: center center;
  will-change: transform, opacity;
}
.log-zoom-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--asphalt-200);
  flex: 0 0 auto;
}
.log-zoom-title { font-weight: 700; font-size: 16px; }
.log-zoom-count { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }

/* Consola ramane inchisa la culoare in ambele teme: asa arata un jurnal si
   asa se disting cel mai bine randurile colorate pe tipuri. */
.log-consola {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: #0e1621;
  color: #c8d3e0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.65;
  padding: 12px 14px 16px;
  -webkit-overflow-scrolling: touch;
}
.log-rand { display: flex; gap: 10px; padding: 1px 0; }
.log-ora { color: #5f7086; flex: 0 0 auto; }
.log-text { flex: 1 1 auto; word-break: break-word; }
.log-rand.nivel-ok      .log-text { color: #7ee0a6; }
.log-rand.nivel-gata    .log-text { color: #7ee0a6; font-weight: 700; }
.log-rand.nivel-atentie .log-text { color: #f3c56a; }
.log-rand.nivel-eroare  .log-text { color: #ff8a80; }
.log-rand.nivel-sarit   .log-text { color: #8895a6; }
.log-rand.nivel-info    .log-text { color: #9fc7f0; }
.log-rand.nivel-start   .log-text { color: #ffffff; font-weight: 700; }

/* Capul unei rulari: desparte vizual doua sincronizari diferite */
.log-rulare {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 6px;
  color: #7f8ea3;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.log-rulare:first-child { margin-top: 0; }
.log-rulare::after { content: ""; flex: 1 1 auto; height: 1px; background: #24303f; }

.log-gol { color: #7f8ea3; padding: 6px 0; }

.log-zoom-foot {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--asphalt-200);
  font-size: 12px;
  color: var(--ink-soft);
}
.log-viu { display: inline-flex; align-items: center; gap: 7px; }
.log-bec { width: 8px; height: 8px; border-radius: 50%; background: var(--asphalt-300); }
.log-viu.activ .log-bec { background: var(--good-green); animation: puls-istoric 1.2s ease-in-out infinite; }

.stat-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 6px;
}

.stat-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  color: var(--navy-950);
}

.stat-sub {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 4px;
}

/* ---------- Toolbar ---------- */

.toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.search-box {
  flex: 1;
  min-width: 200px;
  position: relative;
}

.search-box input {
  width: 100%;
  padding: 10px 14px 10px 38px;
  border: 1px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  font-size: 14px;
  background: var(--card);
  color: var(--ink);
}
.search-box input:focus {
  outline: none;
  border-color: var(--swe-blue);
  box-shadow: 0 0 0 3px rgba(0, 82, 147, 0.16);
}

.search-box svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--ink-soft);
}

.month-input {
  padding: 9px 12px;
  border: 1px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  font-size: 13.5px;
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
}
.month-input:focus {
  outline: none;
  border-color: var(--swe-blue);
  box-shadow: 0 0 0 3px rgba(0, 82, 147, 0.16);
}

/* ---------- Calendarul șoferului (portalul /sofer) ---------- */

.driver-calendar {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 14px;
}
.driver-calendar .month-nav { justify-content: center; margin-bottom: 12px; }
.driver-calendar .month-nav h2 { font-size: 17px; min-width: 140px; }
.driver-calendar .calendar-weekdays span { font-size: 10.5px; }
.driver-calendar .calendar-grid { gap: 4px; }
.driver-calendar .cal-day {
  min-height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  border-radius: 7px;
  background: var(--paper);
  border: 1px solid var(--asphalt-100);
}
.driver-calendar .cal-day.outside { opacity: 0.3; }
.driver-calendar .cal-day.today { border-color: var(--swe-blue); border-width: 1.5px; font-weight: 700; }

.driver-calendar .cal-day.day-paid { background: var(--good-green); border-color: var(--good-green); color: white; font-weight: 600; }
.driver-calendar .cal-day.day-unpaid { background: var(--signal-orange); border-color: var(--signal-orange); color: white; font-weight: 600; }
.driver-calendar .cal-day.day-pending {
  background: var(--card);
  border: 1.5px dashed var(--warn-amber);
  color: var(--warn-amber);
  font-weight: 600;
}

.driver-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--asphalt-100);
  font-size: 11.5px;
  color: var(--ink-soft);
}
.driver-legend span { display: flex; align-items: center; gap: 5px; }
.driver-legend .dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.driver-legend .dot.approved-paid { background: var(--good-green); }
.driver-legend .dot.approved-unpaid { background: var(--signal-orange); }
.driver-legend .dot.pending { border: 1.5px dashed var(--warn-amber); }

.load-more-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px 0;
  flex-wrap: wrap;
}
.load-more-count { font-size: 12.5px; color: var(--ink-soft); }

/* ---------- Tab ACASĂ (vedere de ansamblu) ---------- */

.home-hero { margin-bottom: 20px; }
.home-hero h2 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--navy-950);
  margin: 0 0 4px;
}
.home-hero p { font-size: 14px; color: var(--ink-soft); margin: 0; }

.overview-alert {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 16px;
  margin-bottom: 8px;
  border-radius: var(--radius-s);
  border: 1px solid var(--asphalt-200);
  border-left-width: 4px;
  font-size: 13.5px;
  font-family: inherit;
  cursor: pointer;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-card);
}
.overview-alert:hover { filter: brightness(0.98); }
.overview-alert svg { flex-shrink: 0; opacity: 0.5; }
.overview-alert.urgent { border-color: var(--rosu-f2); border-left-color: var(--rosu); background: var(--rosu-f1); }
.overview-alert.warn { border-color: var(--portocaliu-pal); border-left-color: var(--signal-orange); background: var(--signal-orange-soft); }
.overview-alert.info { border-left-color: var(--navy-700); }

/* Banda pentru impozitul pe vehicul neplatit, deasupra taburilor. */
.alerta-impozit { margin: 0 0 14px; }
.alerta-impozit[hidden] { display: none; }
.alerta-impozit-rand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: var(--radius-s);
  border: 1px solid var(--rosu-f2);
  border-left: 4px solid var(--rosu);
  background: var(--rosu-f1);
  color: var(--ink);
}
.alerta-impozit-rand > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--rosu); }
.alerta-impozit-rand.grav { border-left-width: 6px; background: var(--rosu-f2); }
.alerta-impozit-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
.alerta-impozit-text strong { color: var(--rosu-inchis); }
.alerta-impozit-btn { flex-shrink: 0; white-space: nowrap; }

.overview-clear {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px;
  border-radius: var(--radius-s);
  background: var(--good-green-soft);
  color: var(--good-green);
  font-size: 14px;
  font-weight: 600;
}
.overview-clear svg { width: 22px; height: 22px; flex-shrink: 0; }

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 20px;
}
/* Cand toate sunt pe zero nu ramane niciuna, deci nici spatiul de deasupra. */
.overview-grid:empty { display: none; margin-top: 0; }
.overview-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.overview-tile:hover { border-color: var(--swe-blue); }
.overview-tile-value {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  color: var(--navy-950);
  line-height: 1.1;
}
.overview-tile-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.overview-tile-sub { font-size: 11.5px; color: var(--ink-soft); }

.driver-period {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 10.5px;
  color: var(--ink-soft);
  flex-wrap: wrap;
}
.driver-period input {
  padding: 3px 6px;
  border: 1px solid var(--asphalt-300);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Progresul sincronizarii, in galbenul din drapel: se vede clar pe butonul
   albastru si se distinge de textul obisnuit. */
.sync-progress {
  color: var(--swe-yellow);
  font-family: var(--font-mono);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.btn-outline .sync-progress { color: var(--swe-yellow-dark); }

/* ---------- Zona periculoasă (resetare) ---------- */

.danger-zone {
  margin-top: 24px;
  padding: 16px;
  border: 1.5px solid #f0c9c5;
  border-radius: var(--radius-m);
  background: var(--rosu-f5);
}
.danger-zone h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--rosu);
  margin: 0 0 4px;
}
.danger-zone > p {
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.danger-zone select {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--asphalt-300);
  border-radius: 6px;
  font-size: 13.5px;
  font-family: inherit;
  background: var(--card);
}

.reset-preview { margin-bottom: 12px; }
.reset-preview-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rosu);
  margin-bottom: 5px;
}
.reset-preview-list { display: flex; flex-wrap: wrap; gap: 6px; }
.reset-preview-list span {
  background: var(--card);
  border: 1px solid #f0c9c5;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  color: var(--ink);
}
.reset-preview-list b { font-family: var(--font-mono); color: var(--rosu); }
.reset-empty { font-size: 12.5px; color: var(--ink-soft); font-style: italic; }

.reset-note {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.reset-note code {
  font-family: var(--font-mono);
  background: var(--card);
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--asphalt-200);
}

.btn-danger {
  background: var(--rosu);
  color: white;
  border-color: var(--rosu);
}
.btn-danger:hover { filter: brightness(1.08); }
.btn-danger:disabled { opacity: 0.6; cursor: default; }

.diagnose-result { margin-top: 10px; font-size: 12.5px; }
.folder-ok { color: var(--good-green); font-size: 10.5px; font-weight: 600; }
.folder-missing { color: var(--rosu); font-size: 10.5px; font-weight: 700; }
.diagnose-head { color: var(--ink-soft); margin-bottom: 8px; }
.diagnose-head code { font-family: var(--font-mono); background: var(--asphalt-100); padding: 1px 5px; border-radius: 4px; }
.diagnose-folder {
  border: 1px solid var(--asphalt-200);
  border-left: 3px solid var(--swe-blue);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--card);
}
.diagnose-folder-name { font-weight: 700; color: var(--navy-950); margin-bottom: 4px; }
.diagnose-line { color: var(--ink-soft); padding: 1px 0; }
.diagnose-line.found b { color: var(--good-green); }
.diagnose-line.none { color: var(--signal-orange-dark); }
.diagnose-error { color: var(--rosu); }
.diagnose-samples { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--asphalt-100); }
.diagnose-sample {
  display: grid;
  grid-template-columns: 1.2fr 2fr auto;
  gap: 10px;
  font-size: 11.5px;
  color: var(--ink-soft);
  padding: 2px 0;
}
.diagnose-sample .found { color: var(--good-green); font-weight: 600; }
.diagnose-sample .none { color: var(--signal-orange-dark); font-weight: 600; }

.dkv-plates { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; }
.dkv-row { display: flex; align-items: center; gap: 7px; }
.dkv-row input {
  flex: 1;
  padding: 6px 9px;
  border: 1px solid var(--asphalt-300);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-transform: uppercase;
}
.dkv-row span { color: var(--ink-soft); }
.dkv-missing { color: var(--signal-orange-dark); font-size: 10.5px; font-weight: 600; white-space: nowrap; }

.folder-picker {
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-s);
  padding: 8px;
  background: var(--paper);
}
.folder-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.folder-tools input {
  flex: 1;
  min-width: 120px;
  padding: 6px 9px;
  border: 1px solid var(--asphalt-300);
  border-radius: 5px;
  font-size: 12.5px;
  font-family: inherit;
}
.folder-tools .btn { padding: 5px 10px; font-size: 12px; }
.folder-count { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.folder-list { display: flex; flex-direction: column; gap: 2px; max-height: 240px; overflow-y: auto; }
.folder-sub {
  margin-left: auto;
  background: none;
  border: 1px solid var(--asphalt-300);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  color: var(--swe-blue);
  cursor: pointer;
  font-family: inherit;
}
.folder-sub:hover { background: var(--swe-blue-soft); }
.folder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 3px 4px;
  border-radius: 4px;
  cursor: pointer;
}
.folder-item:hover { background: var(--swe-blue-soft); }
.folder-item input { width: 15px; height: 15px; cursor: pointer; }

.sync-errors {
  background: var(--rosu-f5);
  border: 1px solid #f0c9c5;
  border-left: 3px solid var(--rosu);
  border-radius: var(--radius-m);
  padding: 12px 16px;
  margin-bottom: 14px;
  font-size: 12.5px;
}
.sync-errors-head { font-weight: 700; color: var(--rosu); margin-bottom: 6px; }
.sync-errors ul { margin: 0 0 8px; padding-left: 18px; color: var(--ink-soft); }
.sync-errors li { font-family: var(--font-mono); font-size: 11.5px; padding: 1px 0; }
.sync-errors-more { color: var(--ink-soft); font-size: 11.5px; margin-bottom: 8px; }

/* ---------- Rulaj: km cu marfă vs km goi ---------- */

.leg-summary {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-left: 3px solid var(--swe-blue);
  border-radius: var(--radius-m);
  padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
}
.leg-sum-item { display: flex; flex-direction: column; gap: 1px; }
.leg-sum-item span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); font-weight: 600; }
.leg-sum-item b { font-family: var(--font-display); font-size: 22px; color: var(--navy-950); }
.leg-sum-item i { font-size: 11px; color: var(--ink-soft); font-style: normal; }
.leg-sum-item.empty b { color: var(--signal-orange-dark); }
.leg-sum-item.total { padding-left: 22px; border-left: 1px solid var(--asphalt-200); }
.leg-summary .btn { margin-left: auto; }

.so-item.leg-empty { border-left: 3px solid var(--signal-orange); background: var(--signal-orange-soft); }
.leg-tag {
  background: var(--signal-orange);
  color: white;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
  vertical-align: middle;
}

.skonto-summary { border-left-color: var(--signal-orange); }
.skonto-note {
  flex-basis: 100%;
  font-size: 11.5px;
  color: var(--ink-soft);
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--asphalt-100);
}
.leg-sum-item i { font-size: 11px; color: var(--ink-soft); font-style: normal; }

/* ---------- Descărcarea celor trei documente ---------- */

.doc-dl { display: flex; gap: 3px; }
.doc-dl-btn {
  min-width: 26px;
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid var(--asphalt-300);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--swe-blue);
  cursor: pointer;
  line-height: 1.4;
}
.doc-dl-btn:hover { background: var(--swe-blue); color: white; border-color: var(--swe-blue); }
.doc-dl-btn.off {
  color: var(--asphalt-300);
  border-style: dashed;
  cursor: default;
  background: transparent;
}
.doc-dl-sm .doc-dl-btn { min-width: 24px; padding: 2px 5px; font-size: 10px; }

.early-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--swe-blue);
  background: var(--swe-blue-soft);
  border-radius: 999px;
  padding: 1px 8px;
  cursor: help;
}
.early-flag svg { width: 11px; height: 11px; }

.chain-na { color: var(--asphalt-300); font-family: var(--font-mono); font-size: 15px; cursor: help; }
.badge.neutral {
  background: var(--asphalt-100);
  color: var(--ink-soft);
  border: 1px solid var(--asphalt-200);
  cursor: help;
}
.reissue-chip {
  display: inline-block;
  background: var(--swe-blue-soft);
  color: var(--swe-blue-dark);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 600;
  cursor: help;
}

.awaiting-invoice {
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--font-body);
  font-size: 12px;
  cursor: help;
}
.date-note {
  font-size: 10px;
  color: var(--ink-soft);
  font-style: italic;
  cursor: help;
}

/* ---------- Stornări și facturi anulate ---------- */

.kind-tag {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
  margin-right: 4px;
}
.kind-tag.credit { background: var(--rosu-f2); color: var(--rosu); }
.kind-tag.cancelled { background: var(--asphalt-200); color: var(--ink-soft); }

tr.row-cancelled { opacity: 0.5; }
tr.row-cancelled .amount-cell { text-decoration: line-through; }
tr.row-credit { background: var(--rosu-f5); }
tr.row-credit .amount-cell { color: var(--rosu); }

/* ---------- Coloana TVA ---------- */

.vat-cell { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.vat-rate {
  background: var(--swe-blue-soft);
  color: var(--swe-blue-dark);
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
  font-family: var(--font-body);
}
.vat-amount { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }
.vat-missing { color: var(--asphalt-300); font-family: var(--font-mono); }

/* ---------- Graficul de bani (CashFlow) ---------- */

.cf-chart-wrap { position: relative; }
.cf-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* Grila: hairline punctat — se citesc valorile, dar nu concurează cu datele */
.cf-grid { stroke: var(--asphalt-200); stroke-width: 1; stroke-dasharray: 2 5; }
.cf-zero { stroke: var(--asphalt-300); stroke-width: 1.5; }
.cf-axis {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--ink-soft);
  letter-spacing: -0.02em;
}
.cf-axis-now { fill: var(--navy-950); font-weight: 700; }

/* Luna curentă: o bandă abia vizibilă, ca reper */
.cf-now { fill: var(--navy-950); opacity: 0.035; }

.cf-bar { transform-box: fill-box; transform-origin: bottom; }
.cf-bar-up { fill: url(#cfUp); }
.cf-bar-down { fill: url(#cfDown); }

/* Bucata de deasupra barei: bani care ÎNCĂ nu s-au mișcat. Hașurată în
   aceeași culoare -- se citește dintr-o privire ca "promis, nu încasat", și
   arată la fel și pe tema deschisă, și pe cea închisă. */
.cf-bar-up.cf-bar-astept { fill: url(#cfUpAstept); }
.cf-bar-down.cf-bar-astept { fill: url(#cfDownAstept); }

/* Soldul de după ce se încasează și se achită tot: aceeași linie, punctată.
   Selectorul e dublu ca să bată regula de animație a liniei normale, care mai
   jos pune un stroke-dasharray de 1400 ca s-o deseneze din mers -- pe o linie
   care TREBUIE să rămână punctată, aia ar șterge tocmai punctele. */
.cf-line.cf-line-astept {
  stroke-dasharray: 7 5;
  stroke-opacity: 0.55;
  stroke-width: 2;
  animation: none;
}
/* Pătrățelele din legendă și din fișa de pe grafic poartă aceeași hașură ca
   barele. Culoarea se pune AICI, nu în atributul style al elementului: un
   `background:` scris inline ar șterge dungile, pentru că e o proprietate
   prescurtată și le resetează pe toate. */
.legend-swatch.legend-astept-up,
.cf-tip-key.up.astept {
  background-color: var(--good-green, #2fa06a);
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.85) 0 2px, rgba(255,255,255,0.15) 2px 5px);
}
.legend-swatch.legend-astept-down,
.cf-tip-key.down.astept {
  background-color: var(--signal-orange, #f59331);
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,0.85) 0 2px, rgba(255,255,255,0.15) 2px 5px);
}
.legend-swatch.legend-line.legend-line-astept,
.cf-tip-key.line.astept {
  background-color: transparent;
  background-image: repeating-linear-gradient(90deg,
    currentColor 0 5px, transparent 5px 9px);
}

.cf-area { fill: url(#cfArea); pointer-events: none; }
.cf-line {
  fill: none;
  stroke: var(--navy-800);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.cf-dot {
  fill: white;
  stroke: var(--navy-800);
  stroke-width: 2;
  pointer-events: none;
  transition: r 0.12s ease;
}
.cf-dot.active { r: 6; stroke-width: 2.5; }

.cf-guide {
  stroke: var(--navy-800);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0.5;
  pointer-events: none;
}
.cf-hit { fill: transparent; cursor: crosshair; }
.cf-hit:focus { outline: none; }
.cf-hit:focus-visible { fill: rgba(44, 79, 112, 0.06); }

/* Fișa cu cifrele lunii, prinsă de coloană */
.cf-tip {
  position: absolute;
  top: 6px;
  transform: translateX(-50%);
  background: var(--navy-fundal);
  color: white;
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 172px;
  box-shadow: 0 8px 24px rgba(15, 30, 46, 0.28);
  pointer-events: none;
  z-index: 3;
}
.cf-tip-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  text-transform: capitalize;
  margin-bottom: 7px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.cf-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: #c7d3de;
  padding: 2px 0;
}
.cf-tip-row b {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  color: white;
}
.cf-tip-row.total {
  margin-top: 5px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.cf-tip-key { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.cf-tip-key.up { background: var(--verde); }
.cf-tip-key.down { background: var(--portocaliu); }
.cf-tip-key.line { background: #fff; height: 3px; border-radius: 2px; }

.chart-empty { text-align: center; padding: 48px 20px; }
.chart-empty p {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--navy-950);
  margin: 0 0 4px;
}
.chart-empty span { font-size: 13px; color: var(--ink-soft); }

/* Intrarea în scenă: barele cresc din linia de bază, linia se desenează.
   Scurtă și o singură dată — cât să dea senzația că cifrele „aterizează". */
@keyframes cfBarIn { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cfLineIn { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } }
@keyframes cfFadeIn { from { opacity: 0; } to { opacity: 1; } }

.cf-bar { animation: cfBarIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) backwards; animation-delay: calc(var(--i) * 22ms); }
.cf-line { stroke-dasharray: 1400; animation: cfLineIn 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s backwards; }
.cf-area, .cf-dot { animation: cfFadeIn 0.5s ease 0.7s backwards; }

@media (prefers-reduced-motion: reduce) {
  .cf-bar, .cf-line, .cf-area, .cf-dot { animation: none; }
  .cf-line { stroke-dasharray: none; }
}

/* ---------- Tab CASHFLOW ---------- */

.cf-note {
  display: none;
  background: var(--albastru-pal);
  color: var(--navy-800);
  border-radius: var(--radius-s);
  padding: 11px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 16px;
}

.cf-pending-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--asphalt-200);
}
.cf-pending-head.green { color: var(--good-green); border-bottom-color: var(--good-green); }
.cf-pending-head.orange { color: var(--signal-orange-dark); border-bottom-color: var(--signal-orange); }
.cf-pending-head strong { font-family: var(--font-mono); font-size: 15px; }
.cf-pending-sub { font-size: 11.5px; color: var(--ink-soft); margin: 5px 0 8px; }

.cf-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--asphalt-100);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.cf-line:last-child { border-bottom: none; }
.cf-line.overdue { color: var(--rosu); font-weight: 600; }
.cf-amount { font-family: var(--font-mono); font-weight: 600; color: var(--navy-950); white-space: nowrap; }
.cf-line.overdue .cf-amount { color: var(--rosu); }
.cf-more { font-size: 11.5px; color: var(--ink-soft); padding-top: 6px; font-style: italic; }

/* Rambursarea TVA, in coloana „De încasat și de plătit”. */
.cf-tva { padding: 8px 0; border-bottom: 1px solid var(--asphalt-100); font-size: 12.5px; color: var(--ink-soft); }
.cf-tva:last-child { border-bottom: none; }
.cf-tva-sus { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--ink); }
.cf-tva-per { font-size: 11.5px; color: var(--ink-soft); }
.cf-tva-jos { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 3px; }
.cf-tva.de_incasat .cf-tva-jos > span { color: var(--good-green); font-weight: 600; }
.cf-tva.primit .cf-amount { color: var(--good-green); }
.cf-tva-btn {
  font: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--good-green); background: transparent; color: var(--good-green); white-space: nowrap;
}
.cf-tva-btn.link { border: 0; padding: 0; color: var(--ink-soft); font-weight: 500; text-decoration: underline; }
.cf-tva-nota { font-size: 11px; margin-top: 3px; color: var(--signal-orange-dark); }
.cf-tva-nota.info { color: var(--ink-soft); }
.cf-tva-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.cf-tva-form[hidden] { display: none; }
.cf-tva-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; margin: 0; }
/* .field: ca telefonul sa nu-i mai puna campului de data inca o eticheta */
.cf-tva-form .field { margin: 0; padding: 0; }
.cf-tva-form input { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--asphalt-200); border-radius: 6px; background: var(--card); color: var(--ink); min-width: 0; }
.cf-tva-butoane { grid-column: 1 / -1; display: flex; gap: 8px; }
.cf-tva-butoane .btn { padding: 6px 12px; font-size: 12.5px; }

/* Cardul „TVA deductibil” din Plăți se apasă: deschide rambursările. */
.stat-card-apasabil { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.stat-card-apasabil:hover { transform: translateY(-1px); box-shadow: var(--shadow-card), 0 6px 18px rgba(0,0,0,.08); }
.stat-card-apasabil:focus-visible { outline: 2px solid var(--swe-blue); outline-offset: 2px; }
.stat-sageata { float: right; font-size: 16px; line-height: 1; opacity: .6; }
.stat-link { color: var(--swe-blue); font-weight: 600; margin-top: 2px; }
.tva-an { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 10px; }
.tva-an strong { font-family: var(--font-display); font-size: 22px; min-width: 60px; text-align: center; }
.tva-an .btn { padding: 4px 12px; font-size: 16px; }
.tva-sumar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 6px 0 12px; }
.tva-sumar > div { border: 1px solid var(--asphalt-200); border-radius: var(--radius-s); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.tva-sumar span { font-size: 11.5px; color: var(--ink-soft); }
.tva-sumar strong { font-family: var(--font-mono); font-size: 16px; }
.cf-tva.gol { opacity: .6; }
.tva-incarca { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 4px 0 14px; cursor: pointer; }
.tva-incarca .field-hint { margin: 0; }

/* ---------- Tab ANGAJĂRI ---------- */

.jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.job-card {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-left: 3px solid var(--good-green);
  border-radius: var(--radius-m);
  padding: 16px;
  box-shadow: var(--shadow-card);
}
.job-card.unpublished { border-left-color: var(--asphalt-300); opacity: 0.72; }
.job-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.job-card-top h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0;
}
.job-state {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.job-state.live { background: var(--good-green-soft); color: var(--good-green); }
.job-state.draft { background: var(--asphalt-100); color: var(--ink-soft); }
.job-card-meta { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0; }
.job-card-summary { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }
.job-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--asphalt-100);
}
.job-card-count { font-size: 12px; color: var(--ink-soft); font-weight: 600; }

.app-status {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1.5px solid var(--asphalt-300);
  font-size: 11.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: var(--card);
  color: var(--ink-soft);
}
.app-status.nou { background: var(--signal-orange-soft); border-color: var(--signal-orange); color: var(--signal-orange-dark); }
.app-status.contactat { background: var(--good-green-soft); border-color: var(--good-green); color: var(--good-green); }
.app-status.respins { background: var(--rosu-f2); border-color: var(--rosu); color: var(--rosu); }

.application-cards { display: none; }
@media (max-width: 760px) {
  .application-cards { display: flex; flex-direction: column; gap: 10px; }
  #tabAngajari .table-wrap { display: none; }
}

/* ---------- Coloana "Lipsuri" ---------- */

.missing-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

/* Casete in stilul placutelor de inmatriculare, ca sa fie citite la fel de rapid */
.missing-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1.5px solid var(--asphalt-300);
  border-radius: 4px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10.5px;
  color: var(--ink-soft);
  background: var(--card);
  white-space: nowrap;
}
.missing-chip svg { width: 10px; height: 10px; flex-shrink: 0; }

/* Neconcordanta (referinta sau suma nu se potrivesc) -- mai grava decat un document lipsa */
.missing-chip.mismatch {
  border-color: var(--signal-orange);
  background: var(--signal-orange-soft);
  color: var(--signal-orange-dark);
}

/* Lantul complet si corect: bifa alba pe fundal verde */
.chain-ok {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--good-green);
  cursor: help;
}
.chain-ok svg { width: 14px; height: 14px; }

@media (max-width: 760px) {
  .missing-stack { flex-direction: row; flex-wrap: wrap; align-items: flex-start; margin-top: 6px; }
}

/* ---------- Notificări scadență plăți ---------- */

.due-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.due-badge svg { width: 10px; height: 10px; flex-shrink: 0; }

/* galben: mai sunt 4-5 zile */
.due-badge.soon { background: var(--warn-amber-soft); color: var(--warn-amber); }
/* rosu: mai sunt 3 zile sau mai putin */
.due-badge.urgent { background: var(--rosu-f2); color: var(--rosu); }
/* rosu inchis: scadenta a trecut deja */
.due-badge.overdue { background: var(--rosu); color: white; }

/* Accent pe marginea randului, ca sa se vada dintr-o privire in tabel */
table.invoices tbody tr.due-soon td:first-child { box-shadow: inset 3px 0 0 var(--warn-amber); }
table.invoices tbody tr.due-urgent td:first-child { box-shadow: inset 3px 0 0 var(--rosu); }
table.invoices tbody tr.due-overdue td:first-child { box-shadow: inset 3px 0 0 var(--rosu); }
table.invoices tbody tr.due-overdue { background: var(--rosu-f1); }
table.invoices tbody tr.due-overdue:hover { background: var(--rosu-f3); }

.generic-card.due-soon { border-left: 3px solid var(--warn-amber); }
.generic-card.due-urgent { border-left: 3px solid var(--rosu); }
.generic-card.due-overdue { border-left: 3px solid var(--rosu); background: var(--rosu-f1); }

/* Pe portocaliul si rosul inchise ale temei deschise cifrele sunt albe.
   Bleumarinul mostenit de la .tab-badge avea acolo un contrast de 1,7-2,4:1. */
.tab-badge.soon { background: var(--warn-amber); color: #fff; }
.tab-badge.urgent { background: var(--rosu); color: #fff; }

.status-tabs {
  display: flex;
  background: var(--asphalt-200);
  border-radius: var(--radius-s);
  padding: 3px;
  gap: 2px;
}

.status-tab {
  border: none;
  background: transparent;
  padding: 7px 13px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-soft);
}
.status-tab.active {
  background: var(--swe-blue);
  color: white;
  box-shadow: 0 1px 3px rgba(0, 82, 147, 0.3);
}

/* ---------- Table (desktop) ---------- */

.table-wrap {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  /* derulare pe orizontala in loc de taiere: pe ecrane inguste, ultimele coloane
     (inclusiv "Lipsuri") raman accesibile, nu se pierd sub marginea tabelului */
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: var(--shadow-card);
}

table.invoices { min-width: 1120px; }
@media (max-width: 760px) { table.invoices { min-width: 0; } }

table.invoices {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

table.invoices thead th {
  text-align: left;
  background: var(--asphalt-100);
  color: var(--ink-soft);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  padding: 11px 14px;
  border-bottom: 1px solid var(--asphalt-200);
  white-space: nowrap;
}

table.invoices tbody td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--asphalt-100);
  vertical-align: middle;
}

table.invoices tbody tr:last-child td { border-bottom: none; }
table.invoices tbody tr:hover { background: var(--gri-pal); }
table.invoices tbody tr.needs-review { background: var(--warn-amber-soft); }
table.invoices tbody tr.needs-review:hover { background: var(--galben-pal); }

.mono { font-family: var(--font-mono); }

table.invoices thead th.th-center { text-align: center; }

.route-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.route-cell .arrow { color: var(--swe-blue); font-weight: 600; }

.plate-chip {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px solid var(--navy-800);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.4;
  background: var(--card);
}
.plate-chip .plate-num {
  padding: 2px 7px;
  color: var(--navy-950);
  white-space: nowrap;
}
.plate-stack { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }

.amount-cell {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 14px;
  color: var(--navy-950);
}
.amount-cell .cur { font-size: 11px; color: var(--ink-soft); font-weight: 500; margin-left: 3px; }

/* Echivalentul in coroane al unei facturi in alta moneda (zloti, la bac).
   Sta discret langa suma de pe hartie: aia ramane cifra principala. */
.suma-sek {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
  white-space: nowrap;
  margin-left: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.badge svg { width: 12px; height: 12px; }
.badge.unpaid { background: var(--signal-orange-soft); color: var(--signal-orange-dark); }
.badge.paid { background: var(--good-green-soft); color: var(--good-green); }
.badge:hover { filter: brightness(0.96); }

.review-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--warn-amber);
  font-weight: 600;
  margin-top: 3px;
}
.review-flag svg { width: 12px; height: 12px; }

.row-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.12s ease;
}
tr:hover .row-actions { opacity: 1; }

.icon-btn {
  background: transparent;
  border: 1px solid var(--asphalt-300);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  color: var(--ink-soft);
  display: flex;
}
.icon-btn:hover { background: var(--asphalt-100); color: var(--ink); }
.icon-btn svg { width: 14px; height: 14px; }

/* ---------- Empty state ---------- */

.empty-state {
  padding: 64px 24px;
  text-align: center;
  color: var(--ink-soft);
}
.empty-state svg { width: 48px; height: 48px; color: var(--asphalt-300); margin-bottom: 14px; }
.empty-state h3 {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--navy-900);
  margin: 0 0 6px;
  font-weight: 600;
}
.empty-state p { margin: 0 0 18px; font-size: 14px; max-width: 360px; margin-inline: auto; }

/* ---------- Modals ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 30, 46, 0.55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  z-index: 100;
  overflow-y: auto;
}

.modal {
  background: var(--card);
  border-radius: var(--radius-l);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-pop);
  animation: modal-in 0.16s ease;
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--asphalt-200);
}
.modal-header h2 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: var(--navy-950);
}
.modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-soft);
  padding: 4px;
}
.modal-body { padding: 20px; }
.modal-footer {
  padding: 16px 20px;
  border-top: 1px solid var(--asphalt-200);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.field input[type="text"],
.field input[type="password"],
.field input[type="email"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  font-size: 14px;
}
.field input:focus { outline: none; border-color: var(--swe-blue); box-shadow: 0 0 0 3px rgba(0, 82, 147, 0.16); }
.field-hint { font-size: 12px; color: var(--ink-soft); margin-top: 5px; line-height: 1.5; }
.field-hint a { color: var(--navy-700); text-decoration: underline; }

.test-result {
  white-space: pre-line;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-s);
  font-size: 13px;
  display: none;
}
.test-result.show { display: block; }
.test-result.success { background: var(--good-green-soft); color: var(--good-green); }
.test-result.error { background: var(--signal-orange-soft); color: var(--signal-orange-dark); }

.dropzone {
  border: 2px dashed var(--asphalt-300);
  border-radius: var(--radius-m);
  padding: 32px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dropzone:hover, .dropzone.dragover {
  border-color: var(--signal-orange);
  background: var(--signal-orange-soft);
}
.dropzone svg { width: 32px; height: 32px; color: var(--ink-soft); margin-bottom: 10px; }
.dropzone p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.dropzone strong { color: var(--navy-900); }

.upload-status { margin-top: 12px; font-size: 13px; }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--navy-fundal);
  color: white;
  padding: 12px 18px;
  border-radius: var(--radius-s);
  font-size: 13.5px;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 90vw;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 16px; height: 16px; flex-shrink: 0; }
.toast.toast-error { background: var(--rosu-inchis); }

/* ---------- Mobile cards (replaces table under 760px) ---------- */

.invoice-cards { display: none; }

@media (max-width: 760px) {
  .stats-row { grid-template-columns: repeat(2, 1fr); }
  .table-wrap { display: none; }
  .invoice-cards { display: flex; flex-direction: column; gap: 10px; }

  .invoice-card {
    background: var(--card);
    border: 1px solid var(--asphalt-200);
    border-radius: var(--radius-m);
    padding: 14px 16px;
    box-shadow: var(--shadow-card);
  }
  .invoice-card.needs-review { background: var(--warn-amber-soft); border-color: #eacb8c; }

  .invoice-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
  }
  .invoice-card-doc {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--ink-soft);
  }
  .invoice-card-date { font-size: 12px; color: var(--ink-soft); }
  .invoice-card-route {
    font-family: var(--font-mono);
    font-size: 13px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .invoice-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid var(--asphalt-100);
  }

  .topbar-actions .btn span.label { display: none; }
  .topbar-actions .btn { padding: 9px 11px; }
  .brand-text p { display: none; }
}

/* ============================================================
   Extensie: Concedii, autentificare, portal soferi
   ============================================================ */

/* ---------- Login overlay (admin) ---------- */

/* Ecranul de conectare: crucea din drapel, sugerata prin doua dungi galbene
   foarte discrete peste fundalul albastru. Se simte, nu se vede. */
.auth-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, transparent 34%, rgba(254, 204, 2, 0.055) 34%, rgba(254, 204, 2, 0.055) 41%, transparent 41%),
    linear-gradient(to bottom, transparent 44%, rgba(254, 204, 2, 0.055) 44%, rgba(254, 204, 2, 0.055) 52%, transparent 52%);
  pointer-events: none;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(160deg, var(--swe-blue) 0%, var(--swe-blue-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 20px;
}

.auth-card {
  background: var(--card);
  border-radius: var(--radius-l);
  padding: 32px 28px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow-pop);
  text-align: center;
}

.auth-card h2 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0 0 6px;
}

.auth-card p.auth-sub {
  color: var(--ink-soft);
  font-size: 13.5px;
  margin: 0 0 22px;
}

.auth-step { text-align: left; }
.auth-step h2, .auth-step .auth-sub { text-align: center; }

.auth-field { margin-bottom: 12px; }
.auth-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  font-size: 14.5px;
  font-family: inherit;
}
.auth-field input:focus {
  outline: none;
  border-color: var(--swe-blue);
  box-shadow: 0 0 0 3px rgba(0, 82, 147, 0.16);
}
.auth-hint {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: 5px 0 0;
  line-height: 1.5;
}

.auth-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-bottom: 12px;
  cursor: pointer;
  justify-content: center;
}
.auth-remember input { width: 15px; height: 15px; cursor: pointer; }

.auth-pin-input {
  width: 100%;
  padding: 14px;
  font-size: 24px;
  letter-spacing: 0.3em;
  text-align: center;
  font-family: var(--font-mono);
  border: 1.5px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  margin-bottom: 14px;
}
.auth-pin-input:focus { outline: none; border-color: var(--swe-blue); box-shadow: 0 0 0 3px rgba(0, 82, 147, 0.16); }

.auth-error {
  color: var(--signal-orange-dark);
  font-size: 13px;
  margin: -6px 0 14px;
  min-height: 16px;
}

.auth-card .btn { width: 100%; justify-content: center; padding: 12px; font-size: 14.5px; }

/* ---------- Tabs (Facturi / Concedii) ---------- */

.main-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid var(--asphalt-200);
  margin-bottom: 22px;
  flex-wrap: wrap;
}

/* Butoanele de actiune ale tab-ului curent, in dreapta barei de tab-uri */
.tab-actions {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
  padding-bottom: 8px;
  flex-wrap: wrap;
}

/* ---------- Tab ACASĂ ---------- */

.home-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.period-tabs {
  display: flex;
  background: var(--asphalt-200);
  border-radius: var(--radius-s);
  padding: 3px;
  gap: 2px;
}

.home-rate {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.home-rate input {
  width: 64px;
  padding: 6px 8px;
  border: 1px solid var(--asphalt-300);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: center;
}
.home-rate input:focus { outline: none; border-color: var(--swe-blue); }

/* Cand cursul vine singur de la BCE, nu mai e o casuta de scris ci o cifra,
   cu o eticheta mica langa ea care spune de unde vine. */
.home-rate b { font-family: var(--font-mono); font-size: 12.5px; color: var(--navy-950); font-weight: 700; }
.home-rate i {
  font-style: normal;
  font-size: 10.5px;
  letter-spacing: .02em;
  color: var(--ink-soft);
  background: var(--asphalt-100, #eef1f4);
  border-radius: 4px;
  padding: 2px 6px;
}
.home-rate i:empty { display: none; }

.chart-card {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 18px;
  margin-bottom: 16px;
}
.chart-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.chart-header h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0;
}
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.chart-legend .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.legend-swatch.legend-line { height: 3px; border-radius: 2px; background: var(--navy-fundal-2); }

.home-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .home-bottom { grid-template-columns: 1fr; } }

.breakdown-row { margin-bottom: 14px; }
.breakdown-row:last-child { margin-bottom: 0; }
.breakdown-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.breakdown-name { font-size: 13.5px; font-weight: 600; color: var(--navy-950); }
.breakdown-value { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--navy-950); }
.breakdown-track { height: 8px; background: var(--asphalt-100); border-radius: 999px; overflow: hidden; }
.breakdown-fill { height: 100%; background: var(--signal-orange); border-radius: 999px; }
.breakdown-pct { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--asphalt-100);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.detail-row:last-child { border-bottom: none; }
.detail-value { font-family: var(--font-mono); font-weight: 600; color: var(--navy-950); }

.main-tab {
  background: transparent;
  border: none;
  padding: 10px 14px;
  /* Fara margine proprie: bara are deja "gap: 4px" intre tab-uri, iar cele doua
     se adunau la 8px. Cu unsprezece tab-uri, cei cativa pixeli hotarasc daca
     ultimul ("Nerecunoscute") incape pe rand sau cade singur pe al doilea. */
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  border-radius: var(--radius-s) var(--radius-s) 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-tab:hover { background: var(--swe-blue-soft); color: var(--swe-blue-dark); }

/* Tab-ul deschis: casuta albastra plina, cu o dunga galbena dedesubt care il
   leaga vizual de continut -- ca fila unui dosar scoasa in fata. */
.main-tab.active {
  background: var(--swe-blue);
  color: white;
}
.main-tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: var(--swe-yellow);
}
.main-tab.active:hover { background: var(--swe-blue); color: white; }

/* Cifrele pe galben sunt mereu bleumarin, scris direct, nu prin variabila:
   in tema inchisa --swe-blue-dark devine albastru-deschis (e facut pentru text
   pe fundal inchis), iar pe galben cifrele aproape disparea (contrast 1,2:1).
   Albul n-ar fi ajutat -- alb pe galben da 1,5:1. Bleumarinul da 11:1. */
.tab-badge {
  background: var(--swe-yellow);
  color: #0f1e2e;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---------- Concedii toolbar ---------- */

.leave-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.month-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.month-nav button {
  background: var(--card);
  border: 1px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  padding: 7px 9px;
  cursor: pointer;
  color: var(--navy-900);
  display: flex;
}
.month-nav button:hover { background: var(--asphalt-100); }
.month-nav h2 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0;
  min-width: 160px;
  text-align: center;
  text-transform: capitalize;
}

/* ---------- Pending requests panel ---------- */

.pending-panel {
  background: var(--card);
  border: 1px solid #eacb8c;
  border-left: 4px solid var(--warn-amber);
  border-radius: var(--radius-m);
  margin-bottom: 22px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.pending-panel-header {
  padding: 13px 16px;
  background: var(--warn-amber-soft);
  font-weight: 600;
  font-size: 14px;
  color: var(--warn-amber);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Antet care functioneaza ca buton de pliere/depliere */
button.pending-panel-header.collapsible {
  width: 100%;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
button.pending-panel-header.collapsible:hover { filter: brightness(0.97); }

.panel-chevron {
  width: 18px;
  height: 18px;
  margin-left: auto;      /* impinge sageata in dreapta de tot */
  flex-shrink: 0;
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Panou inchis -> sageata in jos; deschis -> sageata rotita in sus */
.pending-panel:not(.collapsed) .panel-chevron { transform: rotate(180deg); }

/*
  Animatia de pliere/depliere.
  Folosim trucul cu grila (grid-template-rows: 1fr <-> 0fr) pentru ca permite
  animarea pana la inaltimea REALA a continutului, oricare ar fi ea -- spre
  deosebire de max-height, unde ar trebui ghicita o valoare fixa, iar animatia
  ar parea sacadata sau intarziata cand continutul e mult mai scurt decat ea.
*/
.pending-panel-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.pending-panel.collapsed .pending-panel-body { grid-template-rows: 0fr; }

.pending-panel-inner {
  min-height: 0;          /* necesar ca elementul din grila sa poata cobori la 0 */
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.26s ease 0.06s;
}
.pending-panel.collapsed .pending-panel-inner {
  opacity: 0;
  transition: opacity 0.18s ease;   /* dispare putin mai repede decat se strange */
}

/* Derularea se activeaza DOAR dupa ce animatia de deschidere s-a terminat
   (clasa "is-open" e pusa din JS la finalul tranzitiei). Daca am pune
   overflow-y:auto de la inceput, ar aparea o bara de derulare palpaind pe toata
   durata deschiderii, fiindca continutul depaseste inaltimea inca in crestere. */
.pending-panel.is-open .pending-panel-inner {
  max-height: 420px;
  overflow-y: auto;
}

/* Rezerva pentru browsere foarte vechi, care nu stiu 0fr: pliere fara animatie,
   dar functionala */
@supports not (grid-template-rows: 0fr) {
  .pending-panel.collapsed .pending-panel-body { display: none; }
}

/* Respectam setarea de sistem "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  .pending-panel-body,
  .pending-panel-inner,
  .panel-chevron { transition: none; }
}
.pending-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-top: 1px solid var(--asphalt-100);
  flex-wrap: wrap;
}
.pending-item .driver-dot-btn {
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s, box-shadow .12s;
}
.driver-dot-btn:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(0,0,0,.08);
}

.color-picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.color-picker-box {
  background: var(--card);
  border-radius: var(--radius-l);
  padding: 20px 22px;
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
  min-width: 290px;
}
.color-picker-title { font-weight: 700; margin-bottom: 14px; font-size: 14.5px; }
.color-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 9px;
  margin-bottom: 16px;
}
.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .12s;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px #fff inset;
}
.color-picker-custom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.color-picker-custom input[type="color"] {
  width: 46px;
  height: 30px;
  border: 1px solid var(--asphalt-300);
  border-radius: 6px;
  cursor: pointer;
  padding: 2px;
}
.color-picker-actions { display: flex; justify-content: flex-end; }

.plate-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.plate-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  background: var(--card);
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, background .12s;
}
.plate-row:hover { border-color: var(--rosu); background: var(--rosu-f5); }

.plate-row-wrap {
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  padding: 10px 12px;
  background: var(--card);
}
.plate-row-main { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plate-row-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--asphalt-100);
}
.plate-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-soft);
  cursor: pointer;
}
.plate-toggle input { cursor: pointer; }
.plate-name { font-weight: 700; font-size: 13px; }
.plate-meta { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }

.ignored-block {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--asphalt-200);
}
.ignored-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.ignored-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 12.5px;
}
.btn-tiny { padding: 3px 10px; font-size: 11px; }

/* Fila „De verificat”: se coloreaza doar cand chiar sunt facturi de corectat. */
.status-tab.needs-review.has-items { color: var(--signal-orange-dark); font-weight: 700; }
.status-tab.needs-review.has-items.active {
  background: var(--signal-orange-dark);
  color: #fff;
}
.tab-count { font-size: 11px; opacity: .85; }

.outflow-detail {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--asphalt-200);
  font-size: 12.5px;
}
.outflow-head { font-weight: 700; margin-bottom: 10px; }
.outflow-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--asphalt-100);
}
.outflow-row.muted { color: var(--ink-soft); font-style: italic; }
.outflow-list-title {
  margin: 12px 0 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
.outflow-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 4px 0;
  font-size: 12px;
}
.outflow-line .mono { font-size: 11px; color: var(--ink-soft); }

.driver-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.pending-item .pending-main { flex: 1; min-width: 200px; }
.pending-item .pending-driver { font-weight: 600; font-size: 14px; color: var(--navy-950); }
.pending-item .pending-dates { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }
.pending-item .pending-note { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin-top: 2px; }
.pending-actions { display: flex; gap: 6px; }

.btn-approve { background: var(--good-green-soft); color: var(--good-green); }
.btn-approve:hover { background: var(--verde-pal); }
.btn-reject { background: var(--signal-orange-soft); color: var(--signal-orange-dark); }
.btn-reject:hover { background: var(--portocaliu-pal); }

/* ---------- Calendar grid ---------- */

.calendar-wrap {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  padding: 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}
.calendar-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-day {
  min-height: 78px;
  /* Ziua creste daca sunt multi soferi in concediu -- vrem sa-i vedem pe toti. */
  height: auto;
  border: 1px solid var(--asphalt-100);
  border-radius: 8px;
  padding: 6px;
  background: var(--paper);
}
.cal-day.outside { opacity: 0.35; }
.cal-day.today { border-color: var(--swe-blue); border-width: 1.5px; }
.cal-day .cal-daynum { font-size: 11.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 4px; }
.cal-day.today .cal-daynum { color: var(--swe-blue); font-weight: 700; }

.cal-pill {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
/* Tipul concediului, scris mai mic si mai discret decat numele. */
.cal-pill-type {
  font-weight: 500;
  opacity: .82;
  font-size: 9px;
}

.cal-pill.pending {
  background: transparent !important;
  border: 1.5px dashed;
  color: var(--ink) !important;
  opacity: 0.85;
}

/* Raportul sta SUB calendar, pe toata latimea. Cand era in dreapta, cele sapte
   coloane il faceau sa creasca in lateral si impingeau calendarul, iar pagina
   cerea derulare orizontala. */
.leave-report {
  margin-top: 4px;
  margin-bottom: 20px;
  padding: 16px 18px;
  width: 100%;
  overflow-x: auto;
}
.leave-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.leave-report-head h3 { margin: 0; font-size: 15px; }
.leave-report-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* Butonul de export sta langa selectoare, deci se face de aceeasi inaltime cu
   ele -- altfel iese cu doi pixeli mai inalt si randul arata strambat. */
.leave-report-filters .btn {
  padding: 6px 11px;
  font-size: 12.5px;
  gap: 6px;
}
.leave-report-filters select,
.leave-report-filters input {
  padding: 6px 10px;
  border: 1px solid var(--asphalt-300);
  border-radius: 6px;
  font-size: 12.5px;
  background: var(--card);
}
.leave-report-range {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  margin-bottom: 12px;
}
/* Tabelul de zile: strans, cu cifrele centrate sub antetul lor. */
.report-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.report-table th {
  text-align: center;
  padding: 6px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--asphalt-200);
  white-space: nowrap;
  cursor: help;
}
.report-table th:first-child, .report-table td:first-child { text-align: left; }
.report-table td {
  padding: 6px 8px;
  text-align: center;
  border-bottom: 1px solid var(--asphalt-100);
  white-space: nowrap;
}
.report-table tr.inactive { opacity: .55; }
.report-table td.paid { color: var(--good-green); }
.report-table td.unpaid { color: var(--signal-orange-dark); }
.report-table td.no-load { color: var(--swe-blue); }

/* Numele ramane pe un rand: rupt pe doua linii, tabelul devine de doua ori
   mai inalt si greu de urmarit pe orizontala. */
.report-table td.report-name { max-width: 200px; }
.report-table td.report-name .driver-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
/* Sub nume, cu litere mici: de cand e angajat. Apare doar la cine n-a fost
   in firma toata perioada -- la ceilalti n-ar spune nimic. */
.report-name-nota {
  display: block; font-style: normal; font-size: 11px;
  color: var(--ink-soft); margin: 1px 0 0 16px;
}
.report-name-text {
  display: inline-block;
  max-width: 175px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* Ziua din calendar, cand are concedii, se poate apasa ca sa se deschida mare. */
.cal-day.has-leaves { cursor: pointer; transition: box-shadow .14s, transform .14s; }
.cal-day.has-leaves:hover {
  box-shadow: 0 3px 12px rgba(15, 23, 42, .13);
  transform: translateY(-1px);
}
.cal-day.has-leaves:focus-visible {
  outline: 2px solid var(--swe-blue);
  outline-offset: 2px;
}

.day-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2200;
  padding: 20px;
  transition: opacity .22s ease;
}
.day-zoom-card {
  background: var(--card);
  border-radius: var(--radius-l);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
  width: min(560px, 100%);
  max-height: 82vh;
  display: flex;
  flex-direction: column;
  /* Fereastra creste din casuta zilei: originea trebuie sa fie centrul ei. */
  transform-origin: center center;
  will-change: transform, opacity;
}
.day-zoom-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid var(--asphalt-200);
}
.day-zoom-title { font-weight: 700; font-size: 16px; }
.day-zoom-count { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.day-zoom-body { padding: 8px 12px 16px; overflow-y: auto; }
.day-zoom-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-radius: var(--radius-m);
}
.day-zoom-row:hover { background: var(--asphalt-50); }
.day-zoom-row.pending { opacity: .8; }
.day-zoom-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.day-zoom-info { flex: 1; min-width: 0; }
.day-zoom-name { font-weight: 600; font-size: 13.5px; }
.day-zoom-meta {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-family: var(--font-mono);
  margin-top: 2px;
}
.day-zoom-empty { color: var(--ink-soft); font-size: 13px; padding: 14px 10px; }

@media (prefers-reduced-motion: reduce) {
  .cal-day.has-leaves { transition: none; }
  .day-zoom-card { transition: none !important; }
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--asphalt-100);
}
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.legend-hint { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); margin-left: auto; }
.legend-hint .dash-swatch {
  width: 14px; height: 14px; border-radius: 3px; border: 1.5px dashed var(--ink-soft);
}

/* ---------- All leaves table ---------- */

.leave-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.leave-status-badge.pending { background: var(--warn-amber-soft); color: var(--warn-amber); }
.leave-status-badge.approved { background: var(--good-green-soft); color: var(--good-green); }
.leave-status-badge.rejected { background: var(--rosu-f2); color: var(--rosu); }

.leave-type-tag {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 5px;
  background: var(--asphalt-100);
  color: var(--ink-soft);
  font-weight: 600;
}
.leave-type-tag.paid { background: var(--albastru-pal); color: var(--navy-800); }
/* Ziua nelucrata: portocaliu, ca sa se deosebeasca de concediul fara plata. */
.leave-type-tag.day-off { background: var(--portocaliu-f); color: var(--signal-orange-dark); }
/* Zi fara cursa: albastru — e platita, deci nu o punem in tonuri de avertizare. */
.leave-type-tag.no-load { background: var(--albastru-pal); color: var(--swe-blue-dark); }

.type-toggle-btn.no-load.selected {
  background: var(--swe-blue);
  border-color: var(--swe-blue);
  color: #fff;
}

.type-toggle-btn.day-off.selected {
  background: var(--signal-orange-dark);
  border-color: var(--signal-orange-dark);
  color: #fff;
}

/* ---------- Section headers within tab ---------- */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 28px 0 12px;
}
.section-header h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0;
}

/* ---------- Drivers management modal ---------- */

.driver-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--asphalt-100);
}
.driver-list-item:last-child { border-bottom: none; }
.driver-list-item .driver-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.driver-list-item .driver-list-name { flex: 1; font-weight: 500; font-size: 14px; }
.driver-list-item.inactive { opacity: 0.5; }
.driver-list-item .driver-list-actions { display: flex; gap: 6px; }

.color-swatch-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.color-swatch {
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  border: 2px solid transparent;
}
.color-swatch.selected { border-color: var(--navy-950); }

/* ============================================================
   Portal sofer (/sofer) — pagina separata, aceeasi identitate vizuala
   ============================================================ */

.driver-portal-page {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
}

.driver-header {
  background: var(--navy-fundal);
  color: white;
  padding: calc(20px + var(--sa-sus)) calc(20px + var(--sa-dreapta)) 20px calc(20px + var(--sa-stanga));
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 0 var(--swe-yellow);
}
.driver-header .driver-id {
  display: flex;
  align-items: center;
  gap: 10px;
}
.driver-header .driver-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 15px; color: white;
}
.driver-header h1 { font-family: var(--font-display); font-size: 18px; margin: 0; font-weight: 600; }
.driver-header p { margin: 0; font-size: 11px; color: #9fb3c4; }

.driver-page-body { padding: 20px 16px 60px; }

.leave-form-card {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  padding: 18px;
  box-shadow: var(--shadow-card);
  margin-bottom: 22px;
}
.leave-form-card h3 {
  font-family: var(--font-display);
  font-size: 17px;
  margin: 0 0 14px;
  color: var(--navy-950);
}

.date-range-row { display: flex; gap: 10px; }
.date-range-row .field { flex: 1; }

.type-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.type-toggle-btn {
  flex: 1;
  padding: 10px;
  border: 1.5px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  background: var(--card);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.type-toggle-btn.selected.paid { border-color: var(--navy-700); background: var(--albastru-pal); color: var(--navy-800); }
.type-toggle-btn.selected.unpaid { border-color: var(--signal-orange); background: var(--signal-orange-soft); color: var(--signal-orange-dark); }

.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}

.my-leave-card {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  padding: 14px 16px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-card);
}
.my-leave-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.my-leave-dates { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--navy-950); }
.my-leave-note { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; font-style: italic; }
.my-leave-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

.driver-empty { text-align: center; padding: 40px 20px; color: var(--ink-soft); }
.driver-empty svg { width: 40px; height: 40px; color: var(--asphalt-300); margin-bottom: 10px; }

@media (max-width: 460px) {
  .stats-row { grid-template-columns: 1fr 1fr; }
  .stat-value { font-size: 24px; }
  .page { padding: 20px 14px 70px; }
  .date-range-row { flex-direction: column; gap: 0; }
}

/* ---------- Badge-uri potrivire documente (Service overview / Plata) ---------- */

.mismatch-flag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--signal-orange-dark);
  font-size: 10.5px;
  font-weight: 600;
  margin-top: 3px;
  cursor: help;
}
.mismatch-flag svg { width: 11px; height: 11px; }

/* ---------- Layout calendar + panou salarii ---------- */

.calendar-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  margin-bottom: 20px;
  align-items: start;
}

.calendar-layout .calendar-wrap { margin-bottom: 0; }

.salary-panel {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 16px;
  position: sticky;
  top: 96px;
}

.salary-panel-header { margin-bottom: 12px; }
.salary-panel-header h3 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--navy-950);
  margin: 0 0 8px;
}
.salary-panel-header h3 span {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  text-transform: capitalize;
}

.salary-workdays {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-soft);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--asphalt-100);
}
.salary-workdays input {
  width: 52px;
  padding: 4px 6px;
  border: 1px solid var(--asphalt-300);
  border-radius: 5px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  text-align: center;
}
.salary-workdays input:focus { outline: none; border-color: var(--swe-blue); }
.salary-workdays input.overridden { border-color: var(--signal-orange); background: var(--signal-orange-soft); }

.salary-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid var(--asphalt-100);
}
.salary-row:last-of-type { border-bottom: none; }
.salary-row .driver-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.salary-row-main { flex: 1; min-width: 0; }
.salary-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.salary-row-sub { font-size: 11px; color: var(--ink-soft); font-family: var(--font-mono); }
.salary-row-sub.has-unpaid { color: var(--signal-orange-dark); font-weight: 600; }
.salary-row-amount {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-950);
  white-space: nowrap;
}
.salary-row-amount.reduced { color: var(--signal-orange-dark); }
.salary-row-sub.real { color: var(--swe-blue); }
.salary-fluturasi { padding: 10px 0 2px; border-bottom: 1px solid var(--asphalt-100); }
.salary-fluturasi .btn { width: 100%; justify-content: center; font-size: 12px; padding: 6px 10px; min-height: 32px; }

.salary-pending-hint {
  font-size: 10.5px;
  color: var(--warn-amber);
  font-weight: 600;
  margin-top: 2px;
}

.salary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--asphalt-200);
  font-size: 13px;
}
.salary-total .total-label { color: var(--ink-soft); font-weight: 600; }
.salary-total .total-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy-950);
}

.salary-note {
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--asphalt-100);
}

.salary-empty { font-size: 12.5px; color: var(--ink-soft); padding: 16px 0; text-align: center; }

@media (max-width: 1000px) {
  .calendar-layout { grid-template-columns: 1fr; }
  .salary-panel { position: static; }
}

/* ---------- Documente neasociate (Service overview / Plati fara factura) ---------- */

.so-item, .pa-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--asphalt-100);
  flex-wrap: wrap;
  font-size: 13px;
}
.so-item .item-main, .pa-item .item-main { flex: 1; min-width: 200px; }
.so-item .item-title, .pa-item .item-title { font-weight: 600; color: var(--navy-950); font-size: 13.5px; }
.so-item .item-sub, .pa-item .item-sub { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); margin-top:2px; }

/* ============================================================
   Plăți & Combustibil
   ============================================================ */

.consumption-value {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--navy-950);
}
.consumption-value.empty { color: var(--asphalt-300); font-weight: 400; }

tr.fuel-group-start td { border-top: 2px solid var(--asphalt-300); }

/* ---- Inbox (Plati): in stanga emailurile, in dreapta platile lunii, ca in
   filmul de prezentare. Emailul cu factura e legat de randul platii lui. ---- */
/* Cele doua panouri au aceeasi inaltime: lista de emailuri ia inaltimea
   tabelului din dreapta (dar nu mai putin de MIN), iar totalul sta jos. */
.ib-grila { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; }
.ib-panou { background: var(--card); border: 1px solid var(--asphalt-200); border-radius: 16px;
  box-shadow: var(--shadow-card); overflow: hidden; display: flex; flex-direction: column; }
.ib-panou-cap { display: flex; align-items: center; gap: 8px; padding: 16px 20px 14px; border-bottom: 1px solid var(--asphalt-100); }
.ib-panou-cap h3 { margin: 0; font-family: var(--font-body); font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.ib-insigna { font-size: 11.5px; font-weight: 500; color: var(--ink-soft); background: var(--asphalt-100); border-radius: 999px; padding: 2px 9px; }
.ib-insigna.are { color: var(--ink); }
.ib-insigna.rosu { background: var(--rosu-f1); color: var(--rosu); }
.ib-sincron { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); }
.ib-luna { font-size: 11.5px; color: var(--ink-soft); background: var(--asphalt-100);
  border-radius: 999px; padding: 3px 10px; text-transform: capitalize; min-width: 76px; text-align: center; }
.ib-luna-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }
.ib-luna-nav button, .ib-citeste { border: 1px solid var(--asphalt-200); background: var(--card); color: var(--ink-soft);
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.ib-luna-nav button:hover, .ib-citeste:hover { color: var(--ink); border-color: var(--asphalt-300, var(--asphalt-200)); background: var(--gri-pal); }
.ib-citeste { margin-left: 2px; font-size: 14px; }

.ib-emailuri { flex: 1 1 0; min-height: 440px; overflow-y: auto; }
.ib-rand { display: grid; grid-template-columns: 16px 8px 38px minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 13px 20px 13px 14px; border-bottom: 1px solid var(--asphalt-100); cursor: pointer; transition: background .15s; }
.ib-rand:last-child { border-bottom: 0; }
.ib-rand:hover { background: var(--gri-pal); }
.ib-rand.ales { background: var(--albastru-pal); }
.ib-rand.bifat { background: var(--galben-pal); }
.ib-bifa, .ib-toate-bifa input { width: 16px; height: 16px; margin: 0; cursor: pointer; accent-color: var(--swe-blue); }
/* Bara de sus: bifezi emailurile si le treci ca vazute sau nevazute */
.ib-unelte { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 20px 9px 14px;
  border-bottom: 1px solid var(--asphalt-100); background: var(--gri-pal); }
.ib-toate-bifa { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--ink-soft);
  cursor: pointer; margin-right: auto; }
.ib-unelte .btn:disabled { opacity: .45; cursor: default; }
.ib-rand.rau { box-shadow: inset 3px 0 0 var(--rosu); }
.ib-punct { width: 7px; height: 7px; border-radius: 50%; background: transparent; }
.ib-rand.nou .ib-punct { background: #e64980; }
.ib-avatar { width: 38px; height: 38px; border-radius: 50%; color: #fff; font-weight: 600; font-size: 15px;
  display: flex; align-items: center; justify-content: center; }
.ib-mijloc { min-width: 0; }
.ib-exp { display: flex; align-items: baseline; gap: 8px; font-size: 14px; }
.ib-exp-nume { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.ib-cand { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.ib-subiect { font-size: 13px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ib-unde { margin-top: 4px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ib-pdf-chip { font-size: 11px; font-weight: 600; color: #e64980; border: 1px solid #f3c1d3; border-radius: 6px;
  padding: 3px 9px; background: var(--card); white-space: nowrap; }
.ib-ora { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
.ib-stare { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.ib-stare.verde { background: var(--good-green-soft); color: var(--good-green); }
.ib-stare.albastru { background: var(--albastru-pal); color: var(--swe-blue); }
.ib-stare.portocaliu { background: var(--signal-orange-soft); color: var(--signal-orange-dark); }
.ib-stare.galben { background: var(--galben-pal); color: #7a5300; }
.ib-stare.mov { background: #ece5fb; color: #5f3dc4; }
.ib-stare.gri { background: var(--asphalt-100); color: var(--ink-soft); }
.ib-stare.stins { background: transparent; color: var(--ink-soft); font-weight: 500; padding-left: 0; }
.ib-stare.contur { background: transparent; color: var(--ink); border: 1px solid var(--asphalt-200); font-weight: 500; }
/* Platita: acelasi verde plin ca butonul „✓ Plătit” din lista clasica de plati */
.ib-stare.platita { background: var(--good-green); color: #fff; font-weight: 700; }
html[data-theme="dark"] .ib-stare.platita { background: #1a8f5c; }
.ib-stare.rosu { background: var(--rosu); color: #fff; }
html[data-theme="dark"] .ib-stare.galben { color: #f2c66d; }
html[data-theme="dark"] .ib-stare.mov { background: #2a2140; color: #b9a4f5; }
.ib-rezumat { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }

/* Tabelul curge in cutia lui, la aceeasi inaltime cu emailurile: o luna are
   des 30-40 de plati, iar totalul de jos trebuie sa ramana la vedere. */
.ib-tabel-cutie { flex: 1 1 auto; max-height: 620px; overflow-y: auto; }
.ib-tabel { width: 100%; border-collapse: collapse; }
.ib-tabel th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
  font-weight: 600; padding: 12px 20px 8px; position: sticky; top: 0; background: var(--card); z-index: 1;
  box-shadow: 0 1px 0 var(--asphalt-100); }
.ib-tabel td { padding: 15px 20px; border-top: 1px solid var(--asphalt-100); font-size: 14px; color: var(--ink); vertical-align: middle; }
.ib-plata { cursor: pointer; transition: background .3s; }
.ib-plata:hover { background: var(--gri-pal); }
.ib-plata.ales { background: var(--albastru-pal); }
.ib-plata.stinsa td { color: var(--ink-soft); }
.ib-plata.sosita { animation: ib-sosire 1.5s ease-out; }
@keyframes ib-sosire { 0% { background: #ffe3ec; } 100% { background: transparent; } }
.ib-furnizor { font-weight: 500; }
.ib-nr { display: block; font-size: 11.5px; color: var(--ink-soft); font-weight: 400; }
.ib-scad { color: var(--ink-soft) !important; white-space: nowrap; }
.ib-suma { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.ib-suma.minus { color: #5f3dc4; }
.ib-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 20px;
  border-top: 1px solid var(--asphalt-200); color: var(--ink-soft); font-size: 14px; }
.ib-total-suma { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--ink); }
.ib-cur { font-size: 11px; color: var(--ink-soft); font-weight: 500; }

/* PDF-ul care zboara din email in randul platii */
.ib-zbor { position: fixed; z-index: 3000; display: flex; align-items: center; gap: 7px; padding: 7px 11px 7px 7px;
  background: var(--card); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 30, 46, .22);
  font-size: 12px; font-weight: 600; color: var(--ink); pointer-events: none;
  transition: transform .75s cubic-bezier(.22, .9, .28, 1), opacity .3s ease; }
.ib-pdf-mic { font-size: 9px; font-weight: 700; color: #fff; background: #e64980; border-radius: 4px; padding: 3px 4px; }

.ib-detaliu { margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: var(--card);
  border: 1px solid var(--asphalt-200); box-shadow: var(--shadow-card); }
.ib-detaliu-cap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ib-adr { font-size: 12px; color: var(--ink-soft); }
.ib-detaliu-subiect { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.ib-detaliu-text { margin: 0 0 10px; font-size: 13.5px; color: var(--ink); }
.ib-detaliu-motiv { margin: -4px 0 12px; font-size: 12.5px; color: var(--ink-soft); font-family: var(--font-mono); }
.ib-alte { list-style: none; margin: -2px 0 12px; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ib-alte li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.ib-alte-nume { color: var(--ink); }
.ib-campuri { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; margin: 0 0 12px; }
.ib-campuri dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.ib-campuri dd { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.ib-butoane { display: flex; gap: 8px; flex-wrap: wrap; }
.ib-gol { padding: 20px; color: var(--ink-soft); font-size: 13px; }

.ib-mai-multe { display: none; width: 100%; border: 0; border-top: 1px solid var(--asphalt-100); background: var(--card);
  color: var(--swe-blue); font-weight: 600; font-size: 13px; padding: 12px; cursor: pointer; }
@media (max-width: 900px) {
  .ib-grila { grid-template-columns: 1fr; }
  .ib-emailuri, .ib-tabel-cutie { max-height: none; flex: none; min-height: 0; }
  .ib-emailuri:not(.toate) .ib-rand:nth-child(n+6) { display: none; }
  .ib-tabel-cutie:not(.toate) .ib-plata:nth-child(n+9) { display: none; }
  .ib-mai-multe { display: block; }
}
@media (max-width: 640px) {
  .ib-rand { grid-template-columns: 18px 7px 34px minmax(0, 1fr) auto; gap: 8px; padding: 12px 14px 12px 10px; }
  .ib-bifa { width: 18px; height: 18px; }
  .ib-unelte { padding: 8px 12px 8px 10px; }
  .ib-avatar { width: 34px; height: 34px; font-size: 14px; }
  .ib-tabel th, .ib-tabel td { padding-left: 12px; padding-right: 12px; }
  .ib-tabel td { font-size: 13px; }
  .ib-sincron { display: none; }
  /* Pe telefon starea trece sub furnizor, ca tabelul să încapă pe lățime */
  .ib-tabel th:nth-child(4), .ib-tabel td:nth-child(4) { display: none; }
  .ib-stare-tel { display: inline-block !important; margin-top: 4px; }
}
.ib-stare-tel { display: none; }

/* ---- Kilometrajul curatat: cardurile camioanelor si citirile gresite ---- */
.km-titlu { flex-wrap: wrap; gap: 4px 16px; }
.km-titlu-nota { font-size: 12.5px; color: var(--ink-soft); margin: 0; flex: 1; text-align: right; }
.km-camioane { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.km-camion { background: var(--card); border: 1px solid var(--asphalt-200); border-radius: var(--radius-m);
  box-shadow: var(--shadow-card); padding: 13px 15px 12px; display: flex; flex-direction: column; gap: 6px; }
.km-camion.atentie { border-color: var(--signal-orange); }
.km-camion.consum-mare { border-color: var(--rosu); }
.km-rau .km-val, .km-rau .km-et { color: var(--rosu); }
.km-consum-mare { display: flex; flex-direction: column; gap: 2px; font-size: 12px; margin: 2px 0 0;
  padding: 7px 9px; border-radius: 8px; background: var(--rosu-f1); color: var(--rosu); }
.km-consum-mare > b { font-size: 12.5px; }
.km-consum-mare b b, .km-consum-mare span b { font-family: var(--font-mono); }
.km-consum-mare-nota { font-size: 11px; opacity: .85; }
.km-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.km-cod { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--ink); }
.km-chip { margin-left: auto; font-size: 11.5px; font-weight: 600; border: 0; border-radius: 999px; padding: 3px 10px;
  background: var(--rosu-f1); color: var(--rosu); cursor: pointer; white-space: nowrap; }
.km-chip:hover { filter: brightness(.96); }
.km-chip.zero { background: var(--good-green-soft); color: var(--good-green); cursor: default; }
.km-azi { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.km-azi-val { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--navy-950); line-height: 1.1; }
.km-azi-u { font-size: 12px; color: var(--ink-soft); }
.km-interval { font-size: 12.5px; color: var(--ink-soft); margin: 0; }
.km-interval b { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.km-cifre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 6px 0 2px;
  padding: 8px 0; border-top: 1px dashed var(--asphalt-200); border-bottom: 1px dashed var(--asphalt-200); }
.km-cifre > div { display: flex; flex-direction: column; min-width: 0; }
.km-et { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km-val { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); }
.km-u { font-size: 10.5px; color: var(--ink-soft); }
.km-luna, .km-ultima { font-size: 12px; color: var(--ink-soft); margin: 0; }
.km-luna b { font-family: var(--font-mono); color: var(--ink); }
.km-avert { font-size: 12px; margin: 2px 0 0; padding: 6px 9px; border-radius: 8px;
  background: var(--signal-orange-soft); color: var(--signal-orange-dark); }
html[data-theme="dark"] .km-avert { color: var(--signal-orange); }
.km-nota-mica { font-size: 11.5px; color: var(--ink-soft); margin: 0; font-style: italic; }
.km-gol { color: var(--ink-soft); font-size: 13px; }

/* in tabel: citirea gresita taiata, cu estimarea dedesubt */
.km-scris-gresit { color: var(--rosu); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.km-est { display: block; color: var(--ink-soft); font-size: .92em; }
.km-scris-gresit + .km-est { margin-top: 1px; }

.km-matrice { margin-top: 14px; background: var(--card); border: 1px solid var(--asphalt-200); border-radius: var(--radius-m);
  box-shadow: var(--shadow-card); padding: 12px 15px; }
.km-matrice-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.km-matrice-cap h4 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--navy-950); }
.km-matrice-total { font-size: 12.5px; color: var(--ink-soft); }
.km-matrice-total b { font-family: var(--font-mono); color: var(--rosu); }
.km-matrice-scroll { overflow-x: auto; }
.km-matrice table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.km-matrice th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft);
  font-weight: 600; padding: 4px 6px; text-align: center; }
.km-matrice th:first-child, .km-matrice td.km-mat-cod { text-align: left; width: 1%; white-space: nowrap; padding-right: 14px; }
.km-matrice td { padding: 3px 4px; text-align: center; border-top: 1px solid var(--asphalt-100); }
.km-mat-cod { font-family: var(--font-mono); font-weight: 600; color: var(--ink); padding-left: 6px !important; }
.km-cel { font-family: var(--font-mono); font-size: 12px; font-weight: 600; min-width: 28px; padding: 2px 6px;
  border: 0; border-radius: 6px; cursor: pointer; }
.km-cel.una { background: var(--rosu-f1); color: var(--rosu); }
.km-cel.cateva { background: #f6c9c4; color: #8c1d16; }
.km-cel.mult { background: var(--rosu); color: #fff; }
html[data-theme="dark"] .km-cel.cateva { background: #6b2a26; color: #ffd9d4; }
html[data-theme="dark"] .km-cel.mult { background: #d9473c; color: #fff; }
.km-cel.total { background: var(--asphalt-100); color: var(--ink); }
.km-cel-gol { color: var(--asphalt-300); }

.km-modal { max-width: 640px; }
.km-modal-nota { margin-top: 0; }
.km-lista { width: 100%; border-collapse: collapse; font-size: 13px; }
.km-lista th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); padding: 4px 6px; }
.km-lista td { padding: 6px; border-top: 1px solid var(--asphalt-100); }
.km-ora { color: var(--ink-soft); font-size: .9em; }

@media (max-width: 640px) {
  .km-titlu-nota { text-align: left; }
  .km-cifre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.payment-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
/* Plătit: verde plin, ca sa se vada dintr-o privire care facturi sunt inchise */
.payment-status-badge.confirmat {
  background: var(--good-green);
  color: white;
  border-color: var(--good-green);
}
.payment-status-badge.confirmat:hover { filter: brightness(1.08); }
/* Neplătit: neutru, ca sa nu concureze vizual cu marcajele de scadenta */
.payment-status-badge.neconfirmat {
  background: var(--card);
  color: var(--ink-soft);
  border-color: var(--asphalt-300);
}
.payment-status-badge.neconfirmat:hover { background: var(--asphalt-100); }
/* Anulată: factura și nota ei de credit s-au închis una pe alta, fără plată.
   Nu e buton -- n-ai ce bifa --, deci fără mânuță și fără hover. */
.payment-status-badge.compensata {
  background: var(--albastru-pal);
  color: var(--navy-800);
  border-color: var(--albastru-pal);
  cursor: default;
}
/* „Notă de credit" lângă categorie: de ce suma e cu minus. */
.nota-credit-tag {
  display: inline-block; margin-left: 4px; padding: 3px 8px; border-radius: 5px;
  font-size: 11px; font-weight: 700;
  background: var(--albastru-pal); color: var(--navy-800);
}
/* Sub numărul notei, numărul facturii pe care o anulează (și invers). */
.legatura-credit {
  margin-top: 3px; font-size: 11px; color: var(--ink-soft); white-space: nowrap;
}
.legatura-credit.fara-pereche { color: var(--signal-orange-dark); }

.payment-cards, .fuel-cards { display: none; }

@media (max-width: 760px) {
  .payment-cards, .fuel-cards { display: flex; flex-direction: column; gap: 10px; }
  #tabPlati .table-wrap, #tabCombustibil .table-wrap { display: none; }

  .generic-card {
    background: var(--card);
    border: 1px solid var(--asphalt-200);
    border-radius: var(--radius-m);
    padding: 14px 16px;
    box-shadow: var(--shadow-card);
  }
  .generic-card.needs-review { background: var(--warn-amber-soft); border-color: #eacb8c; }
  .generic-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
  }
  .generic-card-title { font-weight: 600; font-size: 14px; color: var(--navy-950); }
  .generic-card-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
  .generic-card-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 0;
    border-top: 1px solid var(--asphalt-100);
  }
  .generic-card-row span:first-child { color: var(--ink-soft); }
  .generic-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--asphalt-100);
  }
}


/* ============================================================
   Vederea pe TURE (tab-ul Facturi)

   Tabelul de facturi porneste de la documente emise; aici randul principal e
   TURA -- un camion, o zi, toate cursele lui. Cursele goale si cele carora nu
   le-a venit inca factura exista aici de la inceput, pentru ca s-au si mers.

   Randul se desface in jos cu aceeasi tehnica de grila (0fr <-> 1fr) folosita
   la panourile pliabile: animatia merge pana la inaltimea REALA a continutului,
   fara max-height ghicit.
   ============================================================ */

/* Curba de miscare din iOS: porneste repede si se aseaza lin la final --
   de aici senzatia ca panoul "cade la locul lui", nu ca se deruleaza uniform. */
:root {
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1);
  --tour-cols: 122px 172px minmax(170px, 1fr) 78px 90px 118px 58px;
}

.tours-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-left: 4px solid var(--swe-blue);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
}
.tours-bar .tb-item { display: flex; flex-direction: column; line-height: 1.25; }
.tours-bar .tb-item span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.tours-bar .tb-item b {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--navy-950);
}
.tours-bar .tb-item.empty b { color: var(--signal-orange-dark); }
.tours-bar .tb-item i {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-soft);
}
.tours-bar .tb-spacer { margin-left: auto; }
.tours-bar .tb-warn {
  font-size: 12px;
  color: var(--warn-amber);
  background: var(--warn-amber-soft);
  border-radius: var(--radius-s);
  padding: 6px 10px;
}

/* Capul vederii pe ture: coloanele obisnuite, plus casuta de bifat lipita in
   dreapta. Bifa sta INAFARA butonului care deschide tura -- un buton nu poate
   contine alt buton, si oricum n-ai vrea ca bifatul sa si desfaca randul. */
.tours-head {
  display: flex;
  align-items: flex-end;
  padding: 0 16px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.tours-head-grid {
  display: grid;
  grid-template-columns: var(--tour-cols);
  gap: 12px;
  flex: 1 1 auto;
  min-width: 0;
}
.tours-head .th-km,
.tours-head .th-amount,
.tours-head .th-legs { text-align: right; }

/* Fundalul randului sta pe invelis, nu pe buton: altfel s-ar opri inainte de
   coloana bifelor si ar ramane o fasie alba in dreapta. */
.tour-cap-rand { display: flex; align-items: center; background: var(--card); }
.tour-cap-rand:hover { background: var(--paper); }
.tour.open > .tour-cap-rand { background: var(--swe-blue-soft); }
.tour-cap-rand > .tour-head { flex: 1 1 auto; min-width: 0; background: none; }
.tour-cap-rand > .tour-head:hover { background: none; }
.tour.open > .tour-cap-rand > .tour-head { background: none; }
.tour-cap-rand > .bifa { flex: 0 0 auto; margin-right: 10px; }

/* Randul unei curse e infasurat la fel ca randul turei, ca bifa cursei sa cada
   exact sub bifa turei. Linia de despartire s-a mutat pe invelis: altfel s-ar
   fi oprit inainte de coloana bifelor. */
.leg-rand { display: flex; align-items: center; border-bottom: 1px solid var(--asphalt-200); }
.leg-rand:last-child { border-bottom: none; }
.leg-rand > .tour-leg { flex: 1 1 auto; min-width: 0; border-bottom: none; }
.leg-rand > .bifa { flex: 0 0 auto; margin-right: 10px; }
.leg-rand.is-empty {
  background: repeating-linear-gradient(135deg, transparent, transparent 7px,
              rgba(15,30,46,0.025) 7px, rgba(15,30,46,0.025) 14px);
}
.leg-rand.is-empty > .tour-leg { background: none; }

/* Locul gol de sub bifa, pe cursele care n-au (inca) factura. Tine coloana
   dreapta, fara sa sugereze ca ai ceva de apasat acolo. */
.bifa-loc { flex: 0 0 auto; width: 30px; height: 30px; margin-right: 10px; }

/* Bifele din vederea pe ture nu se apasa: spun doar daca a sosit factura.
   Cat timp se asteapta, conturul e punctat -- se vede ca e un loc care se va
   umple, nu o casuta pe care ai uitat s-o bifezi. */
.bifa.bifa-stare { cursor: default; border-style: dashed; }
.bifa.bifa-stare.bifat { border-style: solid; }

/* Exceptia: cursa fara factura SE poate bifa cu mana, cand LKW Walter a unit
   doua curse intr-un singur document. Aceea e buton adevarat -- deci arata ca
   ceva de apasat -- iar cand e bifata ramane albastra, nu verde: verdele
   inseamna "a sosit factura", albastrul "am zis eu ca e in ordine". */
.bifa.bifa-mana { cursor: pointer; padding: 0; font: inherit; -webkit-appearance: none; appearance: none; }
.bifa.bifa-mana:hover { border-color: var(--swe-blue, var(--navy-700)); background: var(--swe-blue-soft); }
.bifa.bifa-mana.bifat,
.bifa.bifa-mana.bifat:hover {
  background: var(--swe-blue, #0d4a8f);
  border-color: var(--swe-blue, #0d4a8f);
  color: #fff;
}
.bifa.bifa-mana:disabled { opacity: .5; cursor: default; }
.bifa.bifa-mana:focus-visible {
  outline: 2px solid var(--swe-blue, #0d4a8f);
  outline-offset: 3px;
}

/* Coloana de bifat, in tabel si in capul turelor */
.th-bifa {
  flex: 0 0 74px;
  width: 74px;
  text-align: center;
  white-space: nowrap;
}
.bifa-contor {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}
td.td-bifa { text-align: center; width: 74px; }

/* Casuta in sine. Casuta desenata de browser e mica si arata altfel pe
   fiecare sistem, asa ca desenam noi una destul de mare cat s-o nimeresti cu
   degetul, si o legam de un input adevarat ascuns dedesubt -- ca sa mearga si
   cu tastatura, si cu cititorul de ecran. */
.bifa {
  position: relative;   /* tine inputul ascuns inauntru */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1.5px solid var(--asphalt-300);
  background: var(--card);
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
  color: transparent;
}
.bifa:hover { border-color: var(--swe-blue, var(--navy-700)); }
.bifa input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}
.bifa-semn { display: flex; width: 16px; height: 16px; }
.bifa-semn svg { width: 100%; height: 100%; }
.bifa.bifat {
  background: var(--good-green, #16a34a);
  border-color: var(--good-green, #16a34a);
  color: #fff;
}
.bifa input:focus-visible + .bifa-semn {
  outline: 2px solid var(--swe-blue, #0d4a8f);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Un rand bifat se retrage un pic, ca sa iasa in fata cele nerezolvate. */
/* Un rand bifat de tine se retrage un pic, ca sa iasa in fata cele nerezolvate.
   Turele NU se estompeaza: acolo bifa nu inseamna "gata cu el", ci doar ca au
   sosit facturile -- ar fi stins jumatate din lista degeaba. */
tr:has(.bifa.bifat) > td:not(.td-bifa) { opacity: .62; }

.tour {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  margin-bottom: 8px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15, 30, 46, 0.05);
  transition: box-shadow 0.24s ease, border-color 0.24s ease;
}
.tour.open {
  border-color: var(--swe-blue);
  box-shadow: var(--shadow-card);
}
.tour.tour-orphan { border-left: 3px solid var(--asphalt-300); }

.tour-head {
  display: grid;
  grid-template-columns: var(--tour-cols);
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 13px 16px;
  border: none;
  background: var(--card);
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.tour-head:hover { background: var(--paper); }
/* Doar pentru un cap FĂRĂ învelișul .tour-cap-rand. Când învelișul există, el
   poartă fundalul (vezi mai sus), iar capul rămâne transparent — altfel cele
   două reguli se bat între ele și câștigă cea scrisă mai jos. */
.tour.open > .tour-head { background: var(--swe-blue-soft); }

.tour-date { font-weight: 600; color: var(--navy-950); }
.tour-date small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-soft); }

.tour-truck { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tour-plate {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  background: var(--navy-fundal-2);
  color: white;
  padding: 2px 7px;
  border-radius: var(--radius-s);
}
.tour-trailer {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--asphalt-100);
  color: var(--ink-soft);
  padding: 2px 6px;
  border-radius: var(--radius-s);
}

.tour-route {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 12.5px;
}
.tour-route b { color: var(--ink); font-weight: 500; }
.tour-route .arrow { color: var(--signal-orange); flex-shrink: 0; }
.tour-route .more { font-size: 11px; }

.tour-legs-count { text-align: right; font-size: 12.5px; color: var(--ink-soft); }
.tour-legs-count em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--signal-orange-dark);
}

.tour-km {
  text-align: right;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-950);
}
.tour-km small { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.tour-km.pending { font-size: 13px; color: var(--ink-soft); font-family: var(--font-body); font-weight: 400; }

.tour-amount {
  text-align: right;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-950);
}
.tour-amount small { font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--ink-soft); }

.tour-chevron {
  width: 18px;
  height: 18px;
  color: var(--ink-soft);
  justify-self: end;
  transition: transform 0.42s var(--ease-ios);
}
.tour.open > .tour-cap-rand > .tour-head > .tour-chevron { transform: rotate(180deg); }

/* --- desfacerea in jos --- */
.tour-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.42s var(--ease-ios);
}
/* Combinatorul ">" e obligatoriu, nu de stil: la "Încasări viitoare" un rând
   ține alte rânduri înăuntru. Cu selector descendent, deschiderea sertarului
   deschidea din CSS și toate rândurile dinăuntru deodată. */
.tour.open > .tour-body { grid-template-rows: 1fr; }

.tour-inner {
  min-height: 0;            /* fara asta, elementul din grila nu poate cobori la 0 */
  overflow: hidden;
}
.tour-legs {
  border-top: 1px solid var(--asphalt-200);
  background: var(--paper);
  /* Continutul urca usor la deschidere si coboara la inchidere. Miscarea e
     mica (6px) intentionat: destul cat sa se simta ca "iese", nu atat cat sa
     para ca sare. */
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.42s var(--ease-ios);
}
.tour.open > .tour-body .tour-legs {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.04s;
}

.tour-leg {
  display: grid;
  grid-template-columns: var(--tour-cols);
  gap: 12px;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--asphalt-200);
  font-size: 13px;
}
.tour-leg:last-child { border-bottom: none; }
.tour-leg.is-empty { background: repeating-linear-gradient(135deg, transparent, transparent 7px, rgba(15,30,46,0.025) 7px, rgba(15,30,46,0.025) 14px); }

/* Traseul cursei preia si coloana "Curse" din antet: acolo nu are ce sta pe
   randul unei curse, iar numele de localitati au nevoie de spatiu. */
.tour-leg .leg-route { grid-column: 3 / 5; }
.leg-order { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; }
.leg-type {
  width: 20px; height: 20px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy-fundal-2);
  color: white;
  font-size: 10.5px;
  font-weight: 700;
}
.tour-leg.is-empty .leg-type { background: var(--asphalt-300); color: var(--navy-900); }
.leg-ref { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink); }
.leg-ref.none { color: var(--ink-soft); letter-spacing: 0.06em; font-family: var(--font-body); font-size: 11px; }

.leg-doc { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.leg-doc .mono { font-family: var(--font-mono); font-size: 11.5px; }
.leg-missing {
  font-size: 11px;
  color: var(--warn-amber);
  background: var(--warn-amber-soft);
  border-radius: var(--radius-s);
  padding: 2px 6px;
}
.leg-na { font-size: 11px; color: var(--ink-soft); }
/* Cursa bifata de tine: factura ei a venit unita cu a altei curse. Se scrie
   altfel decat una cu factura adevarata, ca sa nu para ca exista un document
   care de fapt nu exista. */
.leg-manual {
  font-size: 11px;
  color: var(--swe-blue, var(--navy-700));
  background: var(--swe-blue-soft);
  border-radius: var(--radius-s);
  padding: 2px 6px;
}
.leg-manual-nota { font-size: 11px; color: var(--ink-soft); }

.leg-km { text-align: right; font-family: var(--font-mono); font-size: 12.5px; }
.leg-km.missing { color: var(--ink-soft); }
.leg-amount {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.leg-amount.none { font-weight: 400; color: var(--ink-soft); }

/* Coloana are loc pentru doua butoane (58px). Le tinem lipite de marginea din
   dreapta si nu le lasam sa se intinda peste coloana sumei, oricate ar fi. */
.leg-actions {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  overflow: hidden;
}

.tour-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  padding: 10px 16px;
  background: var(--card);
  border-top: 1px solid var(--asphalt-200);
  font-size: 12px;
  color: var(--ink-soft);
}
.tour-foot b { color: var(--navy-950); }

@supports not (grid-template-rows: 0fr) {
  .tour:not(.open) > .tour-body { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-body, .tour-legs, .tour-chevron { transition: none; }
}

@media (max-width: 900px) {
  .tours-head { display: none; }
  .tour-head {
    grid-template-columns: 1fr auto auto;
    grid-template-areas:
      "date   km     chev"
      "truck  amount chev"
      "route  route  chev";
    row-gap: 6px;
  }
  .tour-date   { grid-area: date; }
  .tour-truck  { grid-area: truck; }
  .tour-route  { grid-area: route; }
  .tour-km     { grid-area: km; }
  .tour-amount { grid-area: amount; }
  .tour-chevron { grid-area: chev; align-self: center; }
  .tour-legs-count { display: none; }

  .tour-leg {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "order  km"
      "route  amount"
      "doc    doc";
    row-gap: 5px;
  }
  .tour-leg .leg-route { grid-column: auto; }
  .leg-order  { grid-area: order; }
  .leg-route  { grid-area: route; }
  .leg-km     { grid-area: km; }
  .leg-amount { grid-area: amount; }
  .leg-doc    { grid-area: doc; flex-direction: row; align-items: center; gap: 8px; }
  .leg-actions { display: none; }
}

.leg-doc a { color: var(--swe-blue); text-decoration: none; border-bottom: 1px solid rgba(0, 82, 147, 0.3); }
.leg-doc a:hover { border-bottom-color: var(--swe-blue); }
.leg-doc .badge { font-size: 10.5px; padding: 2px 7px; }

/* Mentenanta: inregistrarile deja reinnoite raman in tabel ca istoric, dar
   estompate -- sunt de citit, nu de facut ceva cu ele. */
tr.maint-replaced { opacity: 0.5; }
tr.maint-replaced td { font-style: italic; }

/* Stergerea selectiva: bifezi exact ce vrei sa dispara. */
.reset-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px;
  margin: 4px 0 12px;
}
.reset-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-s);
  font-size: 12.5px;
  cursor: pointer;
}
.reset-check:hover { border-color: var(--asphalt-300); }
.reset-check input { margin-top: 2px; flex-shrink: 0; }
.reset-check b { color: var(--navy-950); }
.reset-check .reset-count { color: var(--ink-soft); font-family: var(--font-mono); font-size: 11.5px; }
.reset-check .reset-note { display: block; color: var(--ink-soft); font-size: 11px; margin-top: 2px; }
.reset-check.is-empty { opacity: 0.55; }
.reset-extras { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.reset-extras .reset-check { background: transparent; border: none; padding: 2px 0; }

/* Butonul de editare al unei curse: apare la trecerea peste rand, ca sa nu
   umple tabelul cu iconite cand doar te uiti. */
.tour-leg .leg-actions { gap: 4px; }
.tour-leg .leg-edit { opacity: 0; transition: opacity 0.15s ease; }
.tour-leg:hover .leg-edit, .tour-leg:focus-within .leg-edit { opacity: 1; }
@media (hover: none) { .tour-leg .leg-edit { opacity: 1; } }
.leg-km.manual { color: var(--swe-blue); font-weight: 600; }
.tour-foot .btn-tiny { font-size: 11.5px; }

/* Cardul care apare doar cand cauti sau filtrezi. Culoarea drapelului, ca sa
   se distinga de cele patru permanente: acelea privesc toata firma, asta
   priveste doar ce e pe ecran acum. */
.stat-card.tone-filtered { border-left: 4px solid var(--swe-blue); background: var(--swe-blue-soft); }
.stat-card.tone-filtered .stat-value { color: var(--swe-blue-dark); }
.stat-card.tone-filtered .stat-label span {
  font-weight: 400;
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
}

/* Suprataxele LKW: bani retinuti din virament, nu incasari. */
.kind-tag.charge { background: var(--asphalt-200); color: var(--navy-800); }

/* „De unde suma?" — desfacerea sumei de incasat. */
.modal-wide { max-width: 820px; }
.ex-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 16px;
  padding: 12px 14px;
  border-radius: var(--radius-m);
  background: var(--paper);
  border-left: 4px solid var(--swe-blue);
  margin-bottom: 8px;
}
.ex-head.alt { border-left-color: var(--signal-orange); }
.ex-head span { font-weight: 600; color: var(--navy-950); }
.ex-head b { font-family: var(--font-display); font-size: 22px; color: var(--navy-950); text-align: right; }
.ex-head b small { font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--ink-soft); }
.ex-head i { grid-column: 1 / -1; font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.ex-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--swe-blue-soft); border-radius: var(--radius-m);
  font-weight: 600; color: var(--swe-blue-dark);
}
.ex-total b { font-family: var(--font-display); font-size: 20px; }
.ex-note { font-size: 12.5px; padding: 9px 12px; border-radius: var(--radius-s); margin-bottom: 8px; }
.ex-note.warn { background: var(--warn-amber-soft); color: var(--warn-amber); }
.ex-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); margin: 18px 0 8px; }
.ex-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 6px 2px; border-bottom: 1px solid var(--asphalt-100); font-size: 13px; }
.ex-row i { display: block; font-style: normal; font-size: 11px; color: var(--ink-soft); }
.ex-row b { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
.ex-legs { max-height: 300px; overflow-y: auto; border: 1px solid var(--asphalt-200); border-radius: var(--radius-s); }
.ex-leg {
  display: grid;
  grid-template-columns: 78px 62px 108px 1fr auto;
  gap: 10px; align-items: center;
  padding: 7px 10px; font-size: 12px;
  border-bottom: 1px solid var(--asphalt-100);
}
.ex-leg:last-child { border-bottom: none; }
.ex-leg .mono { font-family: var(--font-mono); font-size: 11px; }
.ex-leg-route { color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-leg b { font-family: var(--font-mono); font-size: 12px; }
@media (max-width: 700px) {
  .ex-leg { grid-template-columns: 1fr auto; }
  .ex-leg-route { grid-column: 1 / -1; }
}

/* Tipurile de verificare, ca butoane: lista din datalist se vede doar dacă
   începi să scrii, iar dacă nu știi ce e înăuntru nu ai ce scrie. */
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.cat-chip {
  border: 1px solid var(--asphalt-300);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  padding: 4px 11px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.cat-chip:hover { border-color: var(--swe-blue); color: var(--swe-blue-dark); }
.cat-chip.active {
  background: var(--swe-blue);
  border-color: var(--swe-blue);
  color: white;
}

/* Ce s-a schimbat pe camion. Textul poate fi lung, dar randul nu trebuie sa
   creasca la nesfarsit: taiem la doua randuri si aratam restul la hover. */
.maint-note {
  max-width: 250px;
  font-size: 12.5px;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.generic-card-row.maint-note-card { align-items: flex-start; gap: 14px; }
.generic-card-row.maint-note-card span:last-child { text-align: right; }

/* ============================================================
   Evidenta greselilor soferilor
   ============================================================ */

.driver-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Sanctiunea, colorata dupa greutate: o discutie si o retinere din salariu nu
   trebuie sa arate la fel cand treci cu ochii peste tabel. */
.sanction-tag {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-s);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.sanction-tag.soft    { background: var(--asphalt-100); color: var(--ink-soft); }
.sanction-tag.warn    { background: var(--warn-amber-soft); color: var(--warn-amber); }
.sanction-tag.hard    { background: var(--rosu-f4); color: var(--rosu); }
.sanction-tag.neutral { background: var(--swe-blue-soft); color: var(--swe-blue-dark); }
.sanction-tag.good    { background: var(--good-green-soft); color: var(--good-green); }

/* Evidenta: greseala sau lucru bine facut */
.inc-fel {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.inc-fel.greseala { background: var(--rosu-f4); color: var(--rosu); }
.inc-fel.bine     { background: var(--good-green-soft); color: var(--good-green); }
.inc-suma.greseala { color: var(--rosu); }
.inc-suma.bine     { color: var(--good-green); }
.inc-bar-impartit { display: flex; }
.inc-bar-impartit i { border-radius: 0; }
.inc-bar-impartit i.greseala { background: var(--rosu); }
.inc-bar-impartit i.bine { background: var(--good-green); }
.inc-n.greseala { color: var(--rosu); }
.inc-n.bine { color: var(--good-green); }
.inc-legenda { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-soft); }
.inc-leg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: 8px; }
.inc-leg.greseala { background: var(--rosu); }
.inc-leg.bine { background: var(--good-green); }
.inc-fel-alege { display: inline-flex; }

/* Descrierea poate fi lunga; taiem la doua randuri, restul la hover. */
.inc-desc {
  max-width: 420px;
  font-size: 12.5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inc-bars { display: flex; flex-direction: column; gap: 8px; }
.inc-bar-row {
  display: grid;
  grid-template-columns: 190px 1fr 56px 150px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.inc-bar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inc-bar-track {
  height: 10px;
  background: var(--asphalt-100);
  border-radius: 999px;
  overflow: hidden;
}
.inc-bar-track i { display: block; height: 100%; border-radius: 999px; }
.inc-bar-row b { font-family: var(--font-display); font-size: 16px; text-align: right; }
.inc-bar-sum { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); text-align: right; }

@media (max-width: 760px) {
  .inc-bar-row { grid-template-columns: 1fr 56px; }
  .inc-bar-track, .inc-bar-sum { display: none; }
}

/* ===========================================================================
   Bara care propune instalarea pe ecranul principal (vezi static/js/pwa.js)
   =========================================================================== */

.pwa-bar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  border-radius: 16px;
  background: var(--swe-blue-dark, #0f2a4a);
  color: #fff;
  box-shadow: 0 8px 28px rgba(10, 25, 45, .32);
  /* intra lin de jos, ca sa nu apara brusc peste continut */
  transform: translateY(140%);
  transition: transform .38s cubic-bezier(0.32, 0.72, 0, 1);
  padding-bottom: calc(11px + var(--sa-jos));
}
.pwa-bar.pwa-in { transform: translateY(0); }

.pwa-bar img { width: 36px; height: 36px; border-radius: 9px; flex: 0 0 auto; }

.pwa-text {
  flex: 1 1 auto;
  font-size: 13.5px;
  line-height: 1.35;
}

.pwa-ok {
  flex: 0 0 auto;
  background: var(--swe-yellow, #f0c419);
  color: #0f2a4a;
  border: 0;
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 700;
}

.pwa-x {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .65);
  font-size: 22px;
  line-height: 1;
  padding: 4px 6px;
}

@media (prefers-reduced-motion: reduce) {
  .pwa-bar { transition: none; }
}

/* ===========================================================================
   Tema închisă
   ---------------------------------------------------------------------------
   Se aprinde punand data-theme="dark" pe <html>. Nu duplicam niciun stil:
   schimbam doar valorile variabilelor, iar restul foii de stil le foloseste
   fara sa stie ca s-a schimbat ceva.

   Cateva alegeri, nu la intamplare:

   * Fundalul NU e negru pur. Pe negru absolut, textul alb "vibreaza" la citit
     si orice umbra dispare, deci cardurile n-ar mai avea adancime. #0d141d e
     destul de inchis pentru un ecran OLED si destul de moale pentru ochi.

   * Albastrul din sigla e prea intunecat pe fundal inchis -- ar disparea. Il
     deschidem, dar pastram aceeasi nuanta: e tot albastrul din drapel, doar
     luminat cat sa se vada.

   * Galbenul ramane exact acelasi. E singura culoare care merge la fel de
     bine si pe alb, si pe negru -- de asta ramane accentul in ambele teme.

   * Culorile de semnal (rosu, portocaliu, verde) sunt deschise, nu saturate.
     Un rosu tare pe negru vibreaza si oboseste; unul mai palid se citeste.
   =========================================================================== */

html[data-theme="dark"] {
  /* --navy-* se folosesc aproape numai ca DE TEXT (titluri, cifre mari).
     Pe fundal inchis trebuie sa devina deschise, altfel textul dispare. */
  --navy-950: #e7eef7;
  --navy-900: #d3e0ed;
  --navy-800: #a8bed3;
  --navy-700: #8aa5bd;

  /* fundalurile care erau inchise raman inchise */
  --navy-fundal: #0a121c;
  --navy-fundal-2: #24384f;

  --rosu: #ff8579;
  --rosu-f1: #2b1518;
  --rosu-f2: #35181c;
  --rosu-f3: #31171a;
  --rosu-f4: #35181c;
  --rosu-f5: #281316;
  --rosu-inchis: #ffb0a6;
  --albastru-pal: #17283c;
  --verde-pal: #123024;
  --verde: #46c98d;
  --portocaliu: #ff9f45;
  --portocaliu-pal: #3a2712;
  --portocaliu-f: #33230f;
  --galben-pal: #35290f;
  --gri-pal: #131b25;

  --paper: #0d141d;           /* fundalul paginii */
  --card:  #161f2b;           /* cardurile si ferestrele */
  --asphalt-100: #1c2836;     /* umpluturi discrete */
  --asphalt-200: #2a3848;     /* linii si contururi */
  --asphalt-300: #3d4f64;

  --ink: #e7eef7;
  --ink-soft: #93a6bb;

  --swe-blue: #2f8ada;
  --swe-blue-dark: #86c4f7;   /* folosit aproape numai ca text pe fundal inchis */
  --swe-blue-light: #58a8ee;
  --swe-blue-soft: #14273c;

  --swe-yellow: #fecc02;
  --swe-yellow-dark: #d9a900;
  --swe-yellow-soft: #33290a;

  --signal-orange: #ff9f45;
  --signal-orange-dark: #e07f22;
  --signal-orange-soft: #3a2612;

  --good-green: #45c98a;
  --good-green-soft: #102a1f;
  --warn-amber: #e2ae55;
  --warn-amber-soft: #322611;

  --bara-jos: rgba(13, 20, 29, .92);
  --bara-jos-plin: rgb(13, 20, 29);

  /* Pe fundal inchis o umbra nu se mai vede. Adancimea o dam din contur. */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 18px rgba(0, 0, 0, .35);
  --shadow-pop: 0 18px 44px rgba(0, 0, 0, .6);

  color-scheme: dark;         /* barele de derulare si campurile devin inchise */
}

/* Etichetele mici colorate: fundal deja inchis + text inchis = ilizibil.
   Pe tema inchisa fundalul ramane, textul devine deschis. */
html[data-theme="dark"] .vat-rate,
html[data-theme="dark"] .leave-type-tag.no-load { color: var(--swe-blue-light); }
html[data-theme="dark"] .kind-tag.credit { color: var(--rosu); }
html[data-theme="dark"] .kind-tag.cancelled,
html[data-theme="dark"] .kind-tag.charge { color: var(--ink-soft); }

/*
 * Culorile de semnal au DOUA roluri si ele trebuie sa mearga in directii
 * opuse pe tema inchisa:
 *   - ca TEXT pe fundal inchis  -> trebuie deschise, altfel nu se citesc
 *   - ca FUNDAL sub text alb    -> trebuie sa ramana inchise, altfel albul
 *                                  de deasupra dispare
 * Mai sus le-am deschis, pentru primul rol. Aici le punem la loc, dar numai
 * acolo unde chiar sunt fundal cu scris alb peste.
 */
html[data-theme="dark"] .payment-status-badge.confirmat,
html[data-theme="dark"] .driver-calendar .cal-day.day-paid,
html[data-theme="dark"] .stat-card.tone-paid::before,
html[data-theme="dark"] .driver-legend .dot.approved-paid { background: #1a8f5c; border-color: #1a8f5c; }

html[data-theme="dark"] .driver-calendar .cal-day.day-unpaid,
html[data-theme="dark"] .stat-card.tone-unpaid::before,
html[data-theme="dark"] .driver-legend .dot.approved-unpaid { background: #c9720f; border-color: #c9720f; }

html[data-theme="dark"] .due-badge.overdue,
html[data-theme="dark"] .tab-badge.urgent { background: #c0392f; color: #fff; }
/* In tema inchisa verdele si portocaliul sunt deschise: acolo cifrele raman
   bleumarin, ca pe galben (contrast 8:1); albul ar fi dat doar 2:1. */
html[data-theme="dark"] .tab-badge.soon,
html[data-theme="dark"] .tab-badge.nou { color: #0f1e2e; }

/* Campurile de scris nu au fundal propriu in foaia de stil, deci pe tema
   inchisa browserul le colora singur -- ieseau maro-cenusii. Le dam explicit
   culoarea cardului si un contur care se vede. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: var(--asphalt-100);
  color: var(--ink);
  border-color: var(--asphalt-200);
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--ink-soft); opacity: .75; }

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus { border-color: var(--swe-blue-light); }

/* Iconita de calendar din campurile de data e neagra pe negru fara asta */
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.75); }

/* Cateva locuri unde albul era scris direct in HTML sau depindea de tema */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .day-zoom-card { border: 1px solid var(--asphalt-200); }

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .auth-overlay {
  background: linear-gradient(160deg, #10243a 0%, #0a1725 100%);
}

/* Imaginile si iconitele foarte luminoase se mai domolesc putin */
html[data-theme="dark"] .brand-logo { filter: brightness(.94); }

/* ===========================================================================
   Comutatorul de temă (fereastra de Setări)
   =========================================================================== */

.tema-rand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--asphalt-200);
}
.tema-rand label { display: block; }
.tema-rand .field-hint { margin: 2px 0 0; }

.tema-comutator {
  flex: 0 0 auto;
  width: 58px;
  height: 32px;
  padding: 3px;
  border: 1px solid var(--asphalt-300);
  border-radius: 999px;
  background: var(--asphalt-100);
  cursor: pointer;
  transition: background-color .28s ease, border-color .28s ease;
}
.tema-comutator.pornit {
  background: var(--swe-blue);
  border-color: var(--swe-blue);
}

.tema-bila {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--card);
  color: var(--warn-amber);
  box-shadow: 0 1px 3px rgba(15, 30, 46, .3);
  /* aceeasi curbă ca peste tot: pornește repede, frânează lung */
  transition: transform .34s cubic-bezier(0.32, 0.72, 0, 1), color .28s ease;
}
.tema-comutator.pornit .tema-bila {
  transform: translateX(26px);
  color: var(--swe-blue-dark);
}

.tema-bila .tema-luna { display: none; }
.tema-comutator.pornit .tema-bila .tema-soare { display: none; }
.tema-comutator.pornit .tema-bila .tema-luna { display: block; }

/*
 * Trecerea dintr-o temă în alta.
 *
 * Prima variantă punea o tranziție pe FIECARE element din pagină. Sute de
 * elemente × patru proprietăți, recalculate la fiecare cadru: se târa.
 *
 * Varianta asta cere browserului să fotografieze pagina înainte și după, apoi
 * să facă un singur fondu între cele două imagini. E o operație pe placa
 * video, deci durează la fel indiferent dacă pagina are zece elemente sau o
 * mie. Pe browserele care nu știu, schimbarea e instantanee — mai bine sec
 * decât sacadat.
 */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Cât ține fondu-ul, pagina e o imagine: nimic nu mai poate fi apăsat, deci
   nu riscăm clicuri pe o interfață care încă se schimbă. */
html.tema-trece { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ===========================================================================
   Ecranul de blocare cu amprentă / Face ID (vezi static/js/lock.js)
   =========================================================================== */

/* Ascundem conținutul cât timp e blocat. Clasa se pune de un script mic din
   <head>, înainte de prima desenare, ca să nu apuci să vezi datele o clipă. */
html.blocat body > *:not(.lock-screen):not(.start-ecran) { visibility: hidden !important; }
html.blocat, html.blocat body { overflow: hidden; }

.lock-screen {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: linear-gradient(160deg, var(--navy-fundal) 0%, #06101b 100%);
  animation: lock-intra 260ms ease both;
}
.lock-screen.lock-iese { animation: lock-iese 240ms ease both; }

@keyframes lock-intra { from { opacity: 0; } to { opacity: 1; } }
@keyframes lock-iese  { from { opacity: 1; } to { opacity: 0; } }

.lock-box { text-align: center; max-width: 320px; width: 100%; }
.lock-logo { width: 76px; height: 76px; border-radius: 20px; margin-bottom: 18px; }
.lock-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .01em;
}
.lock-sub { color: rgba(255,255,255,.72); font-size: 14px; margin: 8px 0 22px; line-height: 1.45; }
.lock-screen .btn-primary { width: 100%; justify-content: center; }
.lock-err { color: #ff9d92; font-size: 13px; min-height: 18px; margin: 12px 0 0; }

/* Rândul din Setări, la fel ca cel de temă */
.blocare-rand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--asphalt-200);
}
.tema-comutator:disabled { opacity: .45; cursor: not-allowed; }

/* Data facturii, scrisă lângă numărul ei în coloana DOCUMENT.
   Aceeași familie de caractere ca numărul, dar puțin mai stinsă: numărul
   rămâne lucrul pe care îl cauți, data e context. */
.doc-date {
  color: var(--ink-soft);
  font-weight: 500;
  white-space: nowrap;
}

/* ===========================================================================
   Coloana Observații din tabelul de facturi
   =========================================================================== */

.note-cell { min-width: 150px; max-width: 220px; vertical-align: middle; }

.note-text {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink);
  cursor: text;
  border-radius: var(--radius-s);
  padding: 4px 6px;
  margin: -4px -6px;
  /* Notele lungi nu au voie să întindă rândul: arătăm două rânduri și restul
     la trecerea cu mausul, în bulina de ajutor. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.note-text:hover { background: var(--asphalt-100); }

.note-add {
  background: none;
  border: 1px dashed var(--asphalt-300);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  opacity: 0;                     /* apare la trecerea peste rând */
  transition: opacity .18s ease, border-color .18s ease, color .18s ease;
}
tr:hover .note-add, .note-add:focus { opacity: 1; }
.note-add:hover { border-color: var(--swe-blue); color: var(--swe-blue); }

/* pe telefon nu există „trecere cu mausul”, deci butonul stă mereu vizibil */
@media (hover: none) { .note-add { opacity: 1; } }

.note-input {
  width: 100%;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.35;
  padding: 5px 7px;
  border: 1px solid var(--swe-blue);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--ink);
  resize: vertical;
}

/* Două câmpuri pe un rând în ferestrele de formular. Pe telefon, regula din
   mobile.css le pune unul sub altul. */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}


/* ============================================================
   TAB STATISTICI
   ============================================================ */

.st-perioada { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* --- subtabul "Nr. facturi" --- */

/* Doua campuri de zi in aceeasi bara. Pe telefon mobile.js le imbraca in
   etichete si le imparte randul in doua; aici le lasam sa curga. */
.st-interval { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-interval-nume { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }

/* Lista compacta e facuta pentru telefon; pe calculator ramane tabelul, care
   acolo se citeste bine. */
.st-mob { display: none; }

/* Butonul de test al notificarilor, cu randul lui de raspuns dedesubt. */
.notif-test { margin: 0 0 14px; }
.notif-test #notifTestStare { margin: 6px 2px 0; min-height: 1em; }

/* Scurtaturile nu inlocuiesc intervalul, il completeaza: apesi "Luna trecuta"
   si vezi imediat, in cele doua casute, ce zile a ales pentru tine -- de aici
   poti muta mai departe o zi-doua cu mana. */
.nf-scurtaturi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 2px;
}
.nf-scurt {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px dashed var(--asphalt-300);
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.nf-scurt:hover { border-color: var(--navy-fundal); color: var(--navy-800); }
.nf-scurt.activ {
  border-style: solid;
  border-color: var(--navy-fundal);
  background: var(--navy-fundal);
  color: #fff;
}

/* Trei cifre, nu patru: aici nu exista "rezultat", pentru ca nu se scade
   niciun cost. Le lasam sa umple randul in mod egal. */
.nf-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nf-rand { cursor: pointer; }
.nf-lista td, .nf-lista th { white-space: nowrap; }
.nf-lista td:nth-child(3) { white-space: normal; }


/* Pastilele cu camioane: se aleg dintr-o privire, iar cifra de pe fiecare
   spune imediat care duce firma si care o trage in jos. */
.st-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}
.st-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--asphalt-200);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.st-chip:hover { border-color: var(--asphalt-300); }
.st-chip.activ {
  background: var(--navy-fundal);
  border-color: var(--navy-fundal);
  color: #fff;
}
.st-chip-cifra {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--asphalt-50);
  color: var(--ink-soft);
}
.st-chip.bun .st-chip-cifra { background: rgba(22, 163, 74, .12); color: var(--good-green); }
.st-chip.slab .st-chip-cifra { background: rgba(220, 38, 38, .12); color: var(--signal-red, #dc2626); }
.st-chip.activ .st-chip-cifra { background: rgba(255, 255, 255, .18); color: #fff; }

.st-row { margin-bottom: 18px; }
.stat-card.st-rezultat .stat-value { font-size: 1.75rem; }
.st-plus { color: var(--good-green); }
.st-minus { color: var(--signal-red, #dc2626); }
.st-mic { font-size: 11px; color: var(--ink-soft); }

/* Defalcarea: fiecare linie are o bara proportionala, ca sa se vada dintr-o
   privire care cost cantareste cel mai mult -- nu doar cifra. */
.st-defalcare { margin-bottom: 18px; }
.st-bare { display: flex; flex-direction: column; gap: 7px; padding: 4px 2px 2px; }
.st-bara-rand {
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr minmax(110px, auto);
  align-items: center;
  gap: 14px;
}
.st-bara-nume { font-size: 13px; color: var(--ink); }
.st-bara-desen {
  height: 12px;
  border-radius: 3px;
  background: var(--asphalt-50);
  overflow: hidden;
  min-width: 30px;
}
.st-bara-umplut { display: block; height: 100%; border-radius: 3px; }
.st-bara-umplut.plus { background: var(--good-green); }
.st-bara-umplut.minus { background: var(--signal-orange); }
.st-bara-suma {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}
.st-bara-suma.plus { color: var(--good-green); }
.st-bara-suma.minus { color: var(--ink); }
.st-bara-total {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--asphalt-200);
}
.st-bara-total .st-bara-nume { font-weight: 700; }
.st-bara-total .st-bara-suma { font-size: 15px; font-weight: 800; }
.st-nota { font-size: 12px; color: var(--ink-soft); margin: 12px 2px 0; }

/* Costurile generale, desfacute pe categorii */
.st-general { margin-bottom: 18px; }
.st-gen-sub { font-size: 13px; color: var(--ink-soft); margin: -4px 2px 12px; line-height: 1.5; }
.st-gen-sub strong { color: var(--ink); }
.st-gen-cap, .st-gen-sus {
  display: grid;
  grid-template-columns: minmax(170px, 260px) 1fr 100px 80px;
  gap: 14px;
  align-items: center;
}
.st-gen-cap.cu-camion, .st-gen-sus.cu-camion { grid-template-columns: minmax(170px, 260px) 1fr 100px 80px 100px; }
.st-gen-cap span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft); text-align: right;
}
.st-gen-cap span:first-child { text-align: left; }
.st-gen-rand { border-top: 1px solid var(--asphalt-200); }
.st-gen-rand > summary { list-style: none; cursor: pointer; padding: 7px 2px; }
.st-gen-rand > summary::-webkit-details-marker { display: none; }
.st-gen-rand > summary:hover { background: var(--asphalt-100); }
.st-gen-rand > summary:focus-visible { outline: 2px solid var(--swe-blue); outline-offset: -2px; }
.st-gen-nume { font-size: 13px; color: var(--ink); }
.st-gen-nume::before { content: "▸"; display: inline-block; width: 14px; color: var(--ink-soft); }
.st-gen-rand[open] .st-gen-nume::before { content: "▾"; }
.st-gen-nume i { font-style: normal; font-size: 11.5px; color: var(--ink-soft); margin-left: 6px; }
.st-gen-suma, .st-gen-procent { text-align: right; font-variant-numeric: tabular-nums; font-size: 13px; color: var(--ink); }
.st-gen-procent { color: var(--ink-soft); }
.st-gen-total { border-top: 1px solid var(--asphalt-300); padding: 8px 2px 0; font-weight: 700; }
.st-gen-total .st-gen-nume::before { content: ""; }
.st-gen-docs { padding: 2px 2px 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.st-gen-doc { display: grid; grid-template-columns: 100px 1fr auto; gap: 12px; font-size: 12.5px; padding: 3px 0; }
.st-gen-doc-zi { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.st-gen-doc-furnizor { color: var(--ink); }
.st-gen-doc-furnizor i, .st-gen-doc-suma i { font-style: normal; color: var(--ink-soft); font-size: 11.5px; }
.st-gen-doc-suma { text-align: right; font-variant-numeric: tabular-nums; }
.st-gen-gol { font-size: 12.5px; color: var(--ink-soft); margin: 2px 2px 10px 16px; }

/* Editorul de salarii pe luni, din „Din ce se adună rezultatul" */
.st-edit {
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  margin: 0 0 14px;
  background: var(--asphalt-100);
}
.st-edit-nota { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; line-height: 1.45; }
.st-edit-tabel { display: flex; flex-direction: column; gap: 6px; }
.st-edit-cap, .st-edit-rand {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(100px, 150px) minmax(100px, 150px) minmax(100px, 150px) minmax(160px, 1fr);
  gap: 10px;
  align-items: center;
}
.st-edit-camp { display: block; margin: 0; }
.st-edit-et { display: none; }
.st-edit-nota-in { width: 100%; box-sizing: border-box; }
/* Ce au fost „alte cheltuieli”, sub bare */
.st-alte-luni { margin: 14px 2px 0; padding-top: 10px; border-top: 1px solid var(--asphalt-200); }
.st-alte-luni-cap {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px;
}
.st-alte-luni-rand {
  display: grid; grid-template-columns: minmax(110px, 150px) minmax(90px, 130px) 1fr;
  gap: 10px; font-size: 13px; padding: 3px 0;
}
.st-alte-luni-luna { color: var(--ink); text-transform: capitalize; }
.st-alte-luni-suma { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
.st-alte-luni-nota { color: var(--ink-soft); }
.st-edit-cap span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft);
}
.st-edit-luna { font-size: 13px; color: var(--ink); text-transform: capitalize; }
.st-edit-in { width: 100%; box-sizing: border-box; text-align: right; font-variant-numeric: tabular-nums; }
.st-edit-in.scris { border-color: var(--swe-blue); }
.st-edit-butoane { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

.st-rand { cursor: pointer; }
.st-rand:hover { background: var(--asphalt-50); }

.st-reguli {
  margin-top: 16px;
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  background: var(--card);
}
.st-reguli > summary {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  list-style: none;
}
.st-reguli > summary::-webkit-details-marker { display: none; }
.st-reguli > summary::before { content: "▸ "; }
.st-reguli[open] > summary::before { content: "▾ "; }
.st-reguli-corp {
  padding: 0 16px 16px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  border-top: 1px solid var(--asphalt-200);
}
.st-reguli-corp p { margin: 10px 0; }
.st-reguli-corp strong { color: var(--ink); }
.st-atentie {
  background: var(--asphalt-50);
  border-left: 3px solid var(--warn-amber);
  padding: 9px 12px;
  border-radius: 0 6px 6px 0;
}
.st-reguli-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 4px 18px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.st-reguli-lista > div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }

/* ============================================================
   TAB PREVIZIUNI
   ============================================================ */

.fc-orizont { display: inline-flex; gap: 4px; padding: 3px; background: var(--asphalt-50); border-radius: 999px; }
.fc-buton, .sz-buton {
  padding: 7px 15px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.fc-buton.active, .sz-buton.active { background: var(--card); color: var(--navy-fundal); box-shadow: var(--shadow-card); }
html[data-theme="dark"] .sz-buton.active { color: var(--ink); }

.fc-card { margin-bottom: 18px; }
.fc-row { margin-bottom: 18px; }

/* Graficul din Previziuni. Barele = lunile trecute (verde plus, portocaliu
   minus, ca in CashFlow). Liniile = scenariile; „dacă merge tot așa” e cea
   groasa, celelalte doua marginesc evantaiul -- cat de larg poate fi viitorul. */
.fc-wrap { margin-top: 4px; }
.fc-wrap .cf-svg { width: 100%; height: auto; }
.fc-bara.pozitiv { fill: var(--verde); opacity: .78; }
.fc-bara.negativ { fill: var(--portocaliu); opacity: .78; }
.fc-viitor { fill: var(--swe-blue); opacity: .045; }
html[data-theme="dark"] .fc-viitor { opacity: .07; }
.fc-taietura { stroke: var(--asphalt-300); stroke-width: 1; stroke-dasharray: 3 4; }
.fc-zona-text { font-size: 10.5px; fill: var(--ink-soft); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; }
.fc-taietura-text { font-size: 11px; fill: var(--ink-soft); font-family: var(--font-mono); }
.fc-evantai { fill: var(--swe-blue); opacity: .10; }
html[data-theme="dark"] .fc-evantai { opacity: .16; }
.fc-linie { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fc-linie-baza { stroke: var(--swe-blue); stroke-width: 3; }
.fc-linie-expansiune { stroke: var(--verde); }
.fc-linie-declin { stroke: #dc2626; stroke-dasharray: 5 4; }
html[data-theme="dark"] .fc-linie-declin { stroke: #f87171; }
.fc-cheie { stroke-dasharray: none; stroke-width: 3; }
.fc-start { fill: var(--ink); stroke: var(--card); stroke-width: 2; }
.fc-capat { stroke: var(--card); stroke-width: 2; }
.fc-punct-expansiune { fill: var(--verde); }
.fc-punct-baza { fill: var(--swe-blue); }
.fc-punct-declin { fill: #dc2626; }
html[data-theme="dark"] .fc-punct-declin { fill: #f87171; }
.fc-cap-text { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; fill: var(--ink); }
.fc-viitor-eticheta { opacity: .75; }
.fc-tinta { fill: transparent; cursor: crosshair; }
.fc-cursor { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 2 3; pointer-events: none; }
.fc-tip { top: 34px; transform: none; }
.fc-tip-est { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-left: 4px; }
.cf-tip-key.fc-k-expansiune { background: var(--verde); }
.cf-tip-key.fc-k-baza { background: #5aa9f0; }
.cf-tip-key.fc-k-declin { background: #f87171; }

.fc-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0 2px 6px; font-size: 12px; color: var(--ink-soft); }
.fc-leg { display: inline-flex; align-items: center; gap: 6px; }
.fc-leg i { width: 18px; height: 3px; border-radius: 2px; display: inline-block; }
.fc-leg-istoric i { width: 9px; height: 11px; border-radius: 2px 2px 0 0; margin-right: -3px; }
.fc-leg-istoric i.plus { background: var(--verde); opacity: .78; }
.fc-leg-istoric i.minus { background: var(--portocaliu); opacity: .78; margin-right: 0; }
.fc-leg-baza i { background: var(--swe-blue); height: 4px; }
.fc-leg-expansiune i { background: var(--verde); }
.fc-leg-declin i { background: repeating-linear-gradient(90deg, #dc2626 0 5px, transparent 5px 8px); }
html[data-theme="dark"] .fc-leg-declin i { background: repeating-linear-gradient(90deg, #f87171 0 5px, transparent 5px 8px); }
.fc-leg-evantai i { height: 11px; width: 16px; background: var(--swe-blue); opacity: .18; border-radius: 3px; }

.stat-card.fc-scenariu::before { background: var(--asphalt-300); }
.stat-card.fc-expansiune::before { background: var(--good-green); }
.stat-card.fc-baza::before { background: var(--swe-blue); }
.stat-card.fc-declin::before { background: var(--signal-red, #dc2626); }

.fc-factori {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px 20px;
  padding: 4px 2px 12px;
}
.fc-factor {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px dashed var(--asphalt-200);
  font-size: 13px;
}
.fc-factor-nume { color: var(--ink-soft); }
.fc-factor-val { font-family: var(--font-mono); font-weight: 700; color: var(--ink); white-space: nowrap; }

.fc-explicatie { font-size: 12.5px; line-height: 1.75; color: var(--ink-soft); padding-top: 6px; }
.fc-explicatie p { margin: 10px 0; }
.fc-explicatie strong { color: var(--ink); }
.fc-avertisment {
  background: var(--asphalt-50);
  border-left: 3px solid var(--swe-blue);
  padding: 10px 13px;
  border-radius: 0 6px 6px 0;
}

/* --- Soldul zi cu zi (Previziuni) ---------------------------------------
   Ca graficul unei monede: linia trecutului e verde cand soldul a urcat in
   intervalul ales si rosie cand a coborat; viitorul e albastru si punctat,
   ca restul estimarilor din tab, cu banda ritmului obisnuit in jurul lui. */
.sz-card { margin-bottom: 26px; }
.sz-titlu, .fc-titlu { flex-wrap: wrap; gap: 10px 16px; }
.sz-titlu { margin-top: 18px; }
.sz-cap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 14px 32px; }
.sz-eticheta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 11.5px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .07em; }
.sz-valoare {
  margin: 4px 0 6px;
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.sz-valoare .cur { margin-left: 7px; font-size: 15px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.sz-schimbare { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12.5px; color: var(--ink-soft); }
.sz-delta { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.sz-delta.plus { color: var(--good-green); background: var(--good-green-soft); }
.sz-delta.minus { color: var(--rosu); background: var(--rosu-f1); }
.sz-ora { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--ink-soft); text-transform: none; letter-spacing: 0; }
.sz-viu { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 0 var(--verde); animation: szViu 2.4s ease-out infinite; }
@keyframes szViu {
  0% { box-shadow: 0 0 0 0 rgba(47, 160, 106, .55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(47, 160, 106, 0); }
}

.sz-repere { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sz-legenda { margin-top: 16px; }
.sz-reper { display: flex; flex-direction: column; gap: 2px; padding: 10px 13px; border-radius: 10px; background: var(--asphalt-100); }
.sz-reper-nume { font-size: 11.5px; color: var(--ink-soft); }
.sz-reper b { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.sz-reper b.st-plus { color: var(--good-green); }
.sz-reper b.st-minus { color: var(--rosu); }
.sz-reper-sub { font-size: 11.5px; color: var(--ink-soft); font-family: var(--font-mono); }

.sz-leg-real i { height: 3px; background: var(--verde); }
.sz-leg-real.minus i { background: var(--rosu); }
.sz-leg-viitor i { background: repeating-linear-gradient(90deg, var(--swe-blue) 0 5px, transparent 5px 9px); }

.sz-wrap { margin-top: 2px; }
.sz-linie-real { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; stroke: var(--verde); }
.sz-scade .sz-linie-real { stroke: var(--rosu); }
.sz-umbra-sus { stop-color: var(--verde); stop-opacity: .24; }
.sz-umbra-jos { stop-color: var(--verde); stop-opacity: 0; }
.sz-scade .sz-umbra-sus { stop-color: var(--rosu); stop-opacity: .18; }
.sz-scade .sz-umbra-jos { stop-color: var(--rosu); }
.sz-linie-viitor { fill: none; stroke: var(--swe-blue); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; stroke-linecap: round; }
.sz-azi-punct { fill: var(--verde); stroke: var(--card); stroke-width: 2; }
.sz-scade .sz-azi-punct { fill: var(--rosu); }
.sz-puls { fill: var(--verde); opacity: 0; transform-box: fill-box; transform-origin: center; animation: szPuls 2.4s ease-out infinite; pointer-events: none; }
.sz-scade .sz-puls { fill: var(--rosu); }
@keyframes szPuls {
  0% { opacity: .45; transform: scale(1); }
  80%, 100% { opacity: 0; transform: scale(3.2); }
}
.sz-jos { fill: var(--card); stroke: var(--rosu); stroke-width: 2; }
.sz-jos-text { font-family: var(--font-mono); font-size: 11px; font-weight: 600; fill: var(--rosu); }
.sz-cursor-punct { fill: var(--verde); stroke: var(--card); stroke-width: 2; pointer-events: none; }
.sz-scade .sz-cursor-punct { fill: var(--rosu); }
.sz-svg .sz-cursor-punct.viitor { fill: var(--swe-blue); }
.sz-tinta { touch-action: pan-y; }

.sz-tip { min-width: 210px; max-width: 320px; }
.sz-tip-titlu { text-transform: none; }
.sz-tip-data { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; opacity: .75; }
.sz-tip-sold b { font-size: 14px; }
.sz-tip-ev { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.sz-tip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-tip-ritm { font-style: italic; opacity: .78; }

.sz-urmeaza { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--asphalt-200); }
.sz-urmeaza h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--ink); }
.sz-lista { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.sz-rand { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px dashed var(--asphalt-200); font-size: 12.5px; }
.sz-rand-zi { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; }
.sz-rand-zi span { font-family: var(--font-mono); }
.sz-rand-text { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sz-rand b { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.sz-rand b.st-minus { color: var(--rosu); }
.sz-mai-multe { margin: 8px 0 0; font-size: 11.5px; color: var(--ink-soft); }
.sz-explicatie { margin-top: 10px; border-top: 1px solid var(--asphalt-200); }

@media (max-width: 800px) {
  .sz-cap { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .sz-valoare { font-size: 27px; }
  .sz-lista { grid-template-columns: 1fr; }
  .sz-reper b { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .sz-puls, .sz-viu { animation: none; }
}

/* --- Evidenta -> Anvelope ------------------------------------------------
   Fiecare cap tractor e un card: schita vazuta de sus (rotile colorate dupa ce
   e montat: iarna albastru, vara portocaliu, all-season verde, M+S gri) si,
   langa ea, osiile cu setul lor. Dedesubt stocul (grupat pe depozit) si
   istoricul mutarilor. */
.anv-sezon {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-left: 4px solid var(--asphalt-300);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 14px 18px;
  margin-bottom: 6px;
}
.anv-sezon.curand { border-left-color: var(--swe-blue); }
.anv-sezon.iarna { border-left-color: var(--swe-blue); background: var(--swe-blue-soft); }
.anv-sezon-cap { display: flex; gap: 12px; align-items: flex-start; }
.anv-sezon-cap svg { color: var(--swe-blue); flex-shrink: 0; margin-top: 2px; }
.anv-sezon-titlu { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--navy-950); }
.anv-sezon-cand { color: var(--swe-blue); }
html[data-theme="dark"] .anv-sezon-cand { color: var(--swe-blue-light); }
.anv-sezon-regula { margin: 3px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.anv-sezon-stare { margin: 12px 0 0; font-size: 13px; color: var(--ink); }
.anv-sezon-rele { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-soft); }
.anv-sezon-cifre { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--ink-soft); }
.anv-sezon-cifre b { font-family: var(--font-mono); color: var(--ink); }

.anv-titlu { flex-wrap: wrap; gap: 10px 16px; }
.anv-camioane { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; }
.anv-camion {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-margin-top: 120px;
  transition: box-shadow .3s ease;
}
.anv-camion.anv-clipeste { box-shadow: 0 0 0 3px var(--swe-blue); }
.anv-camion-cap { display: flex; align-items: center; gap: 10px; }
.anv-camion-cap > div { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.anv-placuta { font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.anv-km { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
/* Numarul de inmatriculare, ca o placuta suedeza: alba, cu banda albastra a UE. */
.anv-nr { font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; line-height: 18px; color: #15181c;
  background: #fff; border: 1px solid var(--asphalt-300); border-left: 5px solid var(--swe-blue); border-radius: 3px;
  padding: 0 6px; letter-spacing: .05em; white-space: nowrap; }
.anv-stare { font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.anv-stare.ok { color: var(--good-green); background: var(--good-green-soft); }
.anv-stare.rau { color: var(--rosu); background: var(--rosu-f1); }
.anv-stare.necunoscut { color: var(--ink-soft); background: var(--asphalt-100); }
.anv-config { flex-shrink: 0; }

.anv-camion-corp { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: start; }
.anv-schita { display: block; }
.anv-cabina { fill: var(--asphalt-100); stroke: var(--asphalt-300); stroke-width: 1.2; }
.anv-parbriz { stroke: var(--asphalt-300); stroke-width: 2; stroke-linecap: round; }
.anv-sasiu { stroke: var(--asphalt-300); stroke-width: 3; stroke-linecap: round; }
.anv-ax { stroke: var(--asphalt-300); stroke-width: 3; stroke-linecap: round; }
/* Masina mica si remorca: caroseria vazuta de sus, cu geamuri si plafon. */
.anv-caroserie { fill: var(--asphalt-100); stroke: var(--asphalt-300); stroke-width: 1.2; }
.anv-geam { fill: var(--asphalt-300); opacity: .55; }
.anv-plafon { fill: var(--card); stroke: var(--asphalt-200); stroke-width: 1; }
.anv-pivot { fill: var(--card); stroke: var(--asphalt-300); stroke-width: 1.5; }
.anv-fel { font-size: 11px; font-weight: 600; color: var(--ink-soft); padding: 1px 8px; border-radius: 999px; background: var(--asphalt-100); }
.anv-r { stroke: var(--card); stroke-width: 1; }
.anv-r-iarna { fill: var(--swe-blue); }
.anv-r-vara { fill: var(--portocaliu); }
.anv-r-all_season { fill: var(--verde); }
.anv-r-ms { fill: var(--ink-soft); }
.anv-r-gol { fill: transparent; stroke: var(--asphalt-300); stroke-width: 1.2; stroke-dasharray: 3 2; }
.anv-r.rau { stroke: var(--rosu); stroke-width: 2.2; }

.anv-osii { display: flex; flex-direction: column; gap: 10px; }
.anv-osie { padding-bottom: 10px; border-bottom: 1px dashed var(--asphalt-200); }
.anv-osie:last-child { border-bottom: 0; padding-bottom: 0; }
.anv-osie-cap { display: flex; align-items: center; gap: 8px; }
.anv-osie-nume { font-size: 12px; font-weight: 700; color: var(--ink); text-transform: uppercase; letter-spacing: .05em; }
.anv-osie-roti { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.anv-osie-set {
  display: flex; flex-direction: column; gap: 1px;
  width: 100%; margin-top: 5px; padding: 6px 8px;
  background: var(--asphalt-100); border: 0; border-radius: 8px;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
}
.anv-osie-set:hover { filter: brightness(0.97); }
html[data-theme="dark"] .anv-osie-set:hover { filter: brightness(1.15); }
.anv-osie-marca { font-size: 13px; font-weight: 600; color: var(--ink); }
.anv-osie-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.anv-osie-gol { margin: 4px 0 0; font-size: 12px; color: var(--ink-soft); }
.anv-problema { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--rosu); }
.anv-osie-actiuni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

.anv-tip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.anv-tip.t-iarna { color: var(--swe-blue); background: var(--swe-blue-soft); }
html[data-theme="dark"] .anv-tip.t-iarna { color: var(--swe-blue-dark); }
.anv-tip.t-vara { color: var(--signal-orange-dark, #b45309); background: var(--portocaliu-f); }
html[data-theme="dark"] .anv-tip.t-vara { color: var(--portocaliu); background: var(--portocaliu-pal); }
.anv-tip.t-all_season { color: var(--good-green); background: var(--good-green-soft); }
.anv-tip.t-ms { color: var(--ink-soft); background: var(--asphalt-100); }

.anv-card-depozit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--asphalt-200); }
.anv-card-depozit-titlu { font-size: 11px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-right: 2px; }
.anv-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--asphalt-200); background: var(--card);
  font: inherit; font-size: 12px; color: var(--ink); cursor: pointer;
}
.anv-chip:hover { border-color: var(--asphalt-300); }
.anv-chip.rau { color: var(--rosu); border-color: var(--rosu); font-family: var(--font-mono); font-weight: 700; }
.anv-chip-mic { font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.anv-chip-plus { border-style: dashed; color: var(--ink-soft); }
.anv-ascunse { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

.anv-stoc, .anv-istoric {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.anv-grupa + .anv-grupa { border-top: 1px solid var(--asphalt-200); }
.anv-grupa-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--asphalt-100); font-size: 12.5px; color: var(--ink-soft); }
.anv-grupa-cap b { color: var(--ink); font-size: 13px; }
.anv-rand {
  display: grid;
  grid-template-columns: 96px minmax(0, 1.6fr) 60px 60px minmax(0, 1fr) 90px;
  align-items: center; gap: 10px;
  width: 100%; padding: 9px 16px;
  background: none; border: 0; border-top: 1px solid var(--asphalt-200);
  text-align: left; font: inherit; font-size: 13px; color: var(--ink); cursor: pointer;
}
.anv-grupa-cap + .anv-rand { border-top: 0; }
.anv-rand:hover { background: var(--asphalt-100); }
.anv-rand-nume { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.anv-rand-nume small { margin-left: 8px; font-weight: 400; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
.anv-rand-buc, .anv-rand-profil, .anv-rand-km { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.anv-rand-km { text-align: right; }
.anv-rand-al { font-size: 12.5px; color: var(--ink-soft); }
.anv-gol { margin: 0; padding: 18px 16px; font-size: 13px; color: var(--ink-soft); }

.anv-ist-rand {
  display: grid; grid-template-columns: 92px 130px minmax(0, 1fr) 100px;
  gap: 10px; align-items: baseline;
  padding: 8px 16px; border-top: 1px solid var(--asphalt-200); font-size: 12.5px;
}
.anv-istoric .anv-ist-rand:first-child { border-top: 0; }
.anv-ist-data, .anv-ist-km { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.anv-ist-km { text-align: right; }
.anv-ist-unde { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.anv-ist-ce { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 7px; color: var(--ink); }
.anv-ist-nume { color: var(--ink-soft); }
.anv-ist-sageata, .anv-ist-profil { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); }
.anv-ist-nota { font-size: 12px; font-style: italic; color: var(--ink-soft); }
.anv-ist-tot { margin: 10px 16px 14px; }

/* Fereastra */
.anv-modal { max-width: 560px; }
.anv-modal .field input[type="text"], .anv-modal .field input[type="number"], .anv-modal .field input[type="date"],
.anv-modal .field select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--asphalt-300); border-radius: var(--radius-s);
  font: inherit; font-size: 14px; background: var(--card); color: var(--ink);
}
.anv-modal .field select:disabled { opacity: .65; }
.anv-nota-mica { margin: -4px 0 12px; }
.anv-alege { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink); }
.anv-alege label { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--ink); margin: 0; cursor: pointer; }
.anv-bifa { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.anv-acum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 14px; padding: 9px 12px; border-radius: var(--radius-s); background: var(--asphalt-100); font-size: 13px; color: var(--ink-soft); }
.anv-acum b { color: var(--ink); }
.anv-fisa-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; color: var(--ink); }
.anv-fisa-cap span:last-child:not(.anv-tip) { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }
.anv-fisa-unde { margin: 6px 0 12px; font-size: 13px; color: var(--ink-soft); }
.anv-fisa-unde b { color: var(--ink); }
.anv-fisa-rand { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px dashed var(--asphalt-200); font-size: 13px; color: var(--ink-soft); }
.anv-fisa-rand b { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }
.anv-fisa-note { margin: 8px 0 0; font-size: 12.5px; font-style: italic; color: var(--ink-soft); }
.anv-fisa-actiuni { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.anv-fisa-istoric { margin-top: 18px; border: 1px solid var(--asphalt-200); border-radius: var(--radius-s); overflow: hidden; }
.anv-fisa-titlu { margin: 0; padding: 8px 12px; font-size: 11.5px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; background: var(--asphalt-100); }
.anv-fisa-istoric .anv-ist-rand { grid-template-columns: 84px minmax(0, 1fr) 90px; padding: 7px 12px; }
.anv-fisa-istoric .anv-ist-unde { display: none; }

@media (max-width: 760px) {
  .anv-camioane { grid-template-columns: 1fr; }
  .anv-camion-corp { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .anv-schita { width: 76px; height: auto; }
  .anv-rand { grid-template-columns: 82px minmax(0, 1fr) auto; row-gap: 2px; }
  .anv-rand-profil, .anv-rand-km { display: none; }
  .anv-rand-al { grid-column: 2 / 4; font-size: 12px; }
  .anv-ist-rand { grid-template-columns: 84px minmax(0, 1fr); row-gap: 3px; }
  .anv-ist-ce { grid-column: 1 / 3; }
  .anv-ist-km { text-align: left; }
}

/* Moneda lipita de cifra ("4.663.406SEK") se citeste greu. O departam putin,
   doar in taburile noi, ca sa nu miscam nimic din ce era deja asezat. */
/* Un spatiu intre suma si moneda in toate cardurile de sus, nu doar in
   Statistici si Previziuni: in Plati, CashFlow sau Combustibil scria „2.500SEK”. */
.stat-value .cur { margin-left: 5px; }

/* --- Scoaterea unui vehicul din Statistici --- */

/* "x"-ul sta pe pastila, dar discret: pe calculator apare la trecerea cu
   mausul, ca sa nu para ca fiecare camion e de sters. Pe telefon nu exista
   "trecere cu mausul", deci acolo se vede mereu (vezi mobile.css). */
.st-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  margin-left: 1px;
  margin-right: -4px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
  color: var(--muted, #7b8794);
  opacity: 0;
  transition: opacity .14s ease, background .14s ease, color .14s ease;
}
.st-chip:hover .st-chip-x { opacity: 1; }
.st-chip-x:hover {
  background: rgba(220, 38, 38, .14);
  color: var(--signal-red, #dc2626);
  opacity: 1;
}
.st-chip.activ .st-chip-x { color: rgba(255, 255, 255, .7); }
.st-chip.activ .st-chip-x:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* Randurile de dedesubt: vehicule care nu fac curse, si cele scoase de tot */
.st-alte {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.st-alte-titlu {
  flex: 1 1 100%;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 1px;
}
.st-chip-alt,
.st-chip-ascuns {
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  cursor: default;
}
.st-chip-ascuns {
  cursor: pointer;
  border-style: dashed;
  opacity: .75;
}
.st-chip-ascuns:hover { opacity: 1; border-style: solid; }
.st-chip-ascuns::before { content: "↩ "; color: var(--ink-soft); }

/* --- Capul de tabel apasabil, la Statistici --- */
.st-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color .14s ease, background .14s ease;
}
.st-th:hover { background: var(--asphalt-50); color: var(--ink); }
.st-th:focus-visible { outline: 2px solid var(--swe-blue); outline-offset: -2px; }
.st-th-text { display: inline-flex; align-items: center; gap: 5px; }
/* Sageata are latime rezervata chiar cand e goala, ca sa nu sara capul de
   tabel dintr-o parte in alta la fiecare apasare. */
.st-th-sageata {
  display: inline-block;
  min-width: 9px;
  font-size: 9px;
  line-height: 1;
  color: var(--swe-blue);
}
.st-th-activ { color: var(--ink); }
.st-th-activ .st-th-text { font-weight: 700; }

/* Pe calculator sortezi din capul tabelului; selectorul e doar pentru telefon,
   unde tabelul devine carduri si capul nu se mai vede. */
.st-sort-mobil { display: none; }
/* Comutatorul SEK / EUR de deasupra tabelului din Statistici */
.st-cap-dreapta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.st-moneda .status-tab { min-width: 52px; font-weight: 600; }
.st-mod .status-tab { font-weight: 600; white-space: nowrap; }
/* Placuta langa categoria unei plati pe un singur camion. */
.plata-camion {
  display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  border: 1px solid var(--asphalt-300); color: var(--ink);
}
.st-facturi-camion { margin-top: 10px; }
/* „Per camion": randurile de sub totalul camioanelor. */
.st-tabel tfoot .st-rand-general td { color: var(--ink-soft); }
.st-tabel tfoot .st-rand-final td { border-top: 2px solid var(--asphalt-300); font-size: 14px; }

/* --- Fereastra "ce se schimba daca recitesc platile" --- */
.reparse-card { width: min(920px, 100%); }
.reparse-corp {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 12px 18px 16px;
  -webkit-overflow-scrolling: touch;
}
.reparse-rand {
  padding: 12px 0;
  border-bottom: 1px solid var(--asphalt-100);
}
.reparse-rand:last-child { border-bottom: 0; }
.reparse-titlu {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
  font-size: 13.5px;
}
.reparse-fisier {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  word-break: break-all;
}
.reparse-campuri { display: flex; flex-direction: column; gap: 4px; }
.reparse-camp {
  display: grid;
  grid-template-columns: 130px 1fr 18px 1fr;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
}
.reparse-nume { color: var(--ink-soft); }
/* Valoarea veche taiata: se vede dintr-o privire ce dispare si ce ii ia locul. */
.reparse-vechi {
  font-family: var(--font-mono);
  text-decoration: line-through;
  color: var(--muted, #7b8794);
  word-break: break-word;
}
.reparse-sageata { color: var(--ink-soft); text-align: center; }
.reparse-nou {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--good-green);
  word-break: break-word;
}
.reparse-foot { flex-wrap: wrap; gap: 12px; }
.reparse-butoane { display: inline-flex; gap: 8px; margin-left: auto; }

/* --- Lista platilor dublate --- */
.dedup-info { font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); }
.dedup-linii { display: flex; flex-direction: column; gap: 3px; }
.dedup-linie {
  display: grid;
  grid-template-columns: 80px 1fr auto 60px;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  padding: 3px 0;
}
.dedup-eticheta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dedup-linie.pastrat .dedup-eticheta { color: var(--good-green); }
.dedup-linie.sters .dedup-eticheta { color: var(--signal-red, #dc2626); }
.dedup-linie.sters .dedup-furnizor { text-decoration: line-through; color: var(--muted, #7b8794); }
.dedup-furnizor { font-weight: 600; }
.dedup-stare { font-size: 11.5px; color: var(--ink-soft); }
.dedup-id { font-family: var(--font-mono); font-size: 11px; color: var(--muted, #7b8794); text-align: right; }

/* --- Plati care se repeta --- */
.rec-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.rec-rand {
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  padding: 12px 14px;
  background: var(--card);
}
.rec-rand.oprita { opacity: .6; }
.rec-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 14px; }
.rec-oprita {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); background: var(--asphalt-50); padding: 2px 7px; border-radius: 999px;
}
.rec-detalii {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font-size: 12.5px; color: var(--ink-soft);
}
.rec-suma { font-family: var(--font-mono); font-weight: 700; color: var(--ink); }
.rec-urmatoarea { color: var(--swe-blue); font-weight: 600; }
.rec-butoane { display: flex; gap: 8px; margin-top: 9px; }
.btn.btn-mic { padding: 5px 12px; font-size: 12px; min-height: 0; }
.btn.btn-sterge { color: var(--signal-red, #dc2626); }
.rec-gol { color: var(--ink-soft); font-size: 13px; padding: 6px 0 16px; }

.rec-formular { border-top: 1px solid var(--asphalt-200); padding-top: 16px; }
.rec-formular h4 { margin: 0 0 12px; font-size: 14px; }
.rec-grila {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px 14px;
}
.rec-camp { display: flex; flex-direction: column; gap: 3px; }
.rec-camp.rec-lat { grid-column: 1 / -1; }
.rec-camp > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft);
}
.rec-camp input, .rec-camp select {
  padding: 8px 10px;
  border: 1px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  background: var(--card);
  color: var(--ink);
  font: inherit;
  font-size: 13.5px;
}
.rec-bifa {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 14px 0 0; font-size: 12.5px; color: var(--ink-soft); cursor: pointer;
}
.rec-bifa input { margin-top: 2px; flex: 0 0 auto; }
.rec-actiuni { display: flex; justify-content: flex-end; margin-top: 14px; }
.rec-camp[hidden], .rec-nota[hidden], .rec-previzualizare[hidden] { display: none; }
/* Pe ecrane inguste, o optiune lunga dintr-un select nu are voie sa impinga
   grila in afara ferestrei. */
.rec-camp { min-width: 0; }
.rec-camp input, .rec-camp select { width: 100%; box-sizing: border-box; min-width: 0; }
.rec-detalii .plate-chip { align-self: flex-start; }
.rec-nota { font-size: 12px; color: var(--ink-soft); margin: 10px 0 0; line-height: 1.45; }
.rec-previzualizare {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px;
  margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--asphalt-100); font-size: 12.5px; color: var(--ink-soft);
}
.rec-previzualizare b { color: var(--ink); font-weight: 600; text-transform: capitalize; margin-right: 4px; }
.rec-prev-cap {
  grid-column: 1 / -1; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* comutatorul de notificari foloseste acelasi stil ca tema si blocarea */
.tema-comutator:disabled { opacity: .45; cursor: not-allowed; }


/* ============================================================
   PORTALUL DE CONTABILITATE (/contabilitate)
   ============================================================ */

.ct-taburi { margin-bottom: 14px; flex-wrap: wrap; }

/* Cartea de conectare din portal: pe telefon nu e "carte", ci pagina intreaga
   -- fara umbra, fara margini, lipita de marginile ecranului. Pe calculator
   (mai jos, in blocul de peste 761px) redevine o carte ingusta, centrata. */
.auth-card.auth-card-portal {
  max-width: none;
  box-shadow: none;
  padding: 0;
}

.ct-bara {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.ct-luna { display: flex; flex-direction: column; gap: 3px; }
.ct-luna > span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-soft); padding-left: 2px;
}

.ct-explicatie {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 2px 16px;
  max-width: 70ch;
}

/* --- pagina de luni --- */

.ct-luni { display: grid; gap: 12px; }

.ct-luna-card {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-left: 4px solid var(--signal-orange, #e07b12);
  border-radius: var(--radius-m);
  padding: 14px 16px;
}
/* Luna deja luata isi schimba dunga: se vede dintr-o privire ce a mai ramas. */
.ct-luna-card.luata { border-left-color: var(--good-green, #16a34a); }

.ct-luna-cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 10px;
}
.ct-luna-cap h3 {
  margin: 0; font-family: var(--font-display); font-size: 17px;
  font-weight: 600; color: var(--navy-950); text-transform: capitalize;
}
.ct-eticheta {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  white-space: nowrap;
}
.ct-eticheta.bun { background: rgba(22, 163, 74, .12); color: var(--good-green, #16a34a); }
.ct-eticheta.nou { background: rgba(224, 123, 18, .14); color: var(--signal-orange-dark, #b45f09); }

.ct-luna-cifre {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--asphalt-100, #eef1f4);
  border-bottom: 1px solid var(--asphalt-100, #eef1f4);
  margin-bottom: 12px;
}
.ct-luna-cifre > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ct-luna-cifre span {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
}
.ct-luna-cifre strong { font-family: var(--font-mono); font-size: 20px; color: var(--navy-950); }
.ct-luna-cifre em {
  font-style: normal; font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ct-luna-butoane { display: flex; gap: 8px; flex-wrap: wrap; }

.ct-lista-cap { margin-bottom: 12px; }
.ct-lista-cap h3 {
  margin: 0; font-family: var(--font-display); font-size: 18px;
  font-weight: 600; color: var(--navy-950); text-transform: capitalize;
}
.ct-lista-cap p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }

.ct-anulat td { opacity: .55; text-decoration: line-through; }
.ct-anulat td:last-child { text-decoration: none; }

.ct-atentie {
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 16px;
  padding: 10px 13px;
  border-radius: var(--radius-s);
  border-left: 3px solid var(--signal-orange, #e07b12);
  background: rgba(224, 123, 18, .09);
  color: var(--signal-orange-dark, #b45f09);
}

/* --- portalul pe calculator ---------------------------------------------
   Pagina e construita pe scheletul portalului de sofer, care are latimea unui
   telefon (480px). Pe sofer are sens: se foloseste numai de pe telefon. La
   contabilitate nu: tabelul de facturi are sapte coloane si, strans intr-o
   coloana de 480px in mijlocul unui ecran de 27", se deruleaza in lateral, cu
   jumatate din coloane ascunse.

   Deci de la 761px in sus -- exact peste pragul de la care tabelele nu mai
   devin carduri -- ii dam latime de calculator. Sub prag nu se schimba nimic:
   pe telefon ramane exact cum era. */
/* Bara de sus ține toată lățimea ferestrei, la ORICE lățime, iar cuprinsul ei
   stă aliniat cu restul paginii.
   Pagina era strânsă la 480px, deci bara albastră și dunga galbenă de sub ea se
   opreau la mijlocul ecranului și se vedeau ca o dungă tăiată, cu alb de-o parte
   și de alta. Regula a stat o vreme doar peste 761px, așa că pe o fereastră de
   laptop trasă mai îngust, sau pe tabletă, dunga rămânea tăiată exact ca înainte.
   Acum nu mai depinde de lățime.
   Alinierea o face marginea interioară, nu o lățime fixă: „(100% - 1220px)/2" e
   chiar spațiul alb rămas, iar „max(16px, ...)" ține bara dezlipită de margine
   pe ecranele mai mici de 1220px. */
.driver-portal-page.ct-portal { max-width: none; }
.ct-portal .driver-page-body {
  max-width: 1220px;
  margin: 0 auto;
}
.ct-portal .driver-header {
  padding-left: max(16px, calc((100% - 1220px) / 2));
  padding-right: max(16px, calc((100% - 1220px) / 2));
}

@media (min-width: 761px) {
  .ct-portal .driver-page-body {
    padding: 24px 24px 60px;
  }
  .ct-portal .driver-header {
    padding-left: max(24px, calc((100% - 1220px) / 2));
    padding-right: max(24px, calc((100% - 1220px) / 2));
    padding-top: 18px;
    padding-bottom: 18px;
  }

  /* Formularul de conectare ramane ingust si centrat: doua campuri intinse pe
     toata latimea ecranului arata a greseala, nu a pagina de conectare. */
  .ct-portal .auth-card-portal {
    max-width: 400px;
    margin: 40px auto;
    padding: 30px 26px;
    background: var(--card);
    box-shadow: var(--shadow-pop);
    border-radius: var(--radius-l);
  }

  /* Lunile stau doua pe rand. Trei ar incapea, dar atunci coloana de sume se
     ingusteaza atat incat "1.275,00 EUR + 2.214,00 PLN + ..." se taie -- si
     tocmai sumele sunt ce cauti pe pagina asta. */
  .ct-portal .ct-luni { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .ct-portal .ct-luna-cifre em { white-space: normal; overflow: visible; line-height: 1.4; }

  /* Tabelele au loc sa respire. Nu rupem pe doua randuri decat textul lung
     (traseul); numerele si datele raman intregi, ca sa se citeasca dintr-o data. */
  .ct-portal .report-table { width: 100%; }
  .ct-portal .report-table th,
  .ct-portal .report-table td.mono,
  .ct-portal .report-table td.num { white-space: nowrap; }
}

/* Zona dintre telefon si calculator (tableta, fereastra pe jumatate de ecran):
   tabelul intreg nu incape, dar nici carduri nu se fac -- acelea pornesc doar
   sub 760px. Strangem scrisul si lasam camionul sa se rupa pe doua randuri, ca
   sa ramana toate coloanele la vedere in loc sa se ascunda ultima. */
@media (min-width: 761px) and (max-width: 1010px) {
  .ct-portal .report-table th,
  .ct-portal .report-table td { padding-left: 7px; padding-right: 7px; font-size: 12px; }
  .ct-portal .report-table td.ct-rupe { white-space: normal; word-break: break-word; }
}


/* ============================================================
   TAB NERECUNOSCUTE — documentele venite pe email si neincadrate
   ============================================================ */

.nerec-card {
  border-left: 4px solid var(--asphalt-300, #c7d0d8);
  padding: 14px 16px;
  margin-bottom: 12px;
}
/* Cele care par documente LKW se vad primele si au dunga portocalie: acolo, un
   document pierdut inseamna curse si facturi care nu intra nicaieri. */
.nerec-card.nerec-suspect { border-left-color: var(--signal-orange, #e07b12); }
.nerec-card.nerec-rezolvat { opacity: .62; border-left-color: var(--good-green, #16a34a); }

.nerec-cap {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.nerec-titlu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.nerec-titlu strong {
  font-size: 14.5px; color: var(--navy-950);
  word-break: break-all;       /* numele de atasament n-au spatii */
}
.nerec-data { font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); white-space: nowrap; }

.nerec-eticheta {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  white-space: nowrap;
  background: rgba(224, 123, 18, .14); color: var(--signal-orange-dark, #b45f09);
}
.nerec-eticheta.bun { background: rgba(22, 163, 74, .12); color: var(--good-green, #16a34a); }

.nerec-rand {
  display: grid; grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px; padding: 3px 0; font-size: 12.5px;
}
.nerec-rand > span:first-child {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); padding-top: 2px;
}
.nerec-rand > span:last-child { color: var(--ink); word-break: break-word; }

/* Primele randuri citite din PDF. De multe ori antetul spune singur de la cine
   e documentul, chiar daca aplicatia n-a stiut sa-l incadreze. */
.nerec-indiciu {
  margin-top: 10px;
  padding: 9px 11px;
  border-radius: var(--radius-s);
  background: var(--asphalt-100);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  word-break: break-word;
}

.nerec-butoane { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.nerec-lipsa { font-size: 12px; color: var(--ink-soft); align-self: center; }

@media (max-width: 760px) {
  .nerec-rand { grid-template-columns: 1fr; gap: 0; }
  .nerec-butoane .btn { flex: 1 1 100%; justify-content: center; }
}

/* "Șterge" e singurul buton de aici care nu se poate desface: sterge si randul,
   si fisierul. Ii dam culoarea de avertisment, nu ca sa sperie, ci ca sa nu fie
   apasat din reflex in locul lui "Nu e nimic important", care doar il scoate
   din lista. */
.btn.nerec-sterge { color: var(--rosu, #c0392b); border-color: rgba(192, 57, 43, .35); }
.btn.nerec-sterge:hover { background: rgba(192, 57, 43, .08); }

/* Lista expeditorilor ignorati permanent, la coada tabului. */
.nerec-reguli { margin-top: 22px; padding: 16px 18px; }
.nerec-regula {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 9px 0;
  border-top: 1px solid var(--asphalt-100, #eef1f4);
}
.nerec-regula:first-of-type { border-top: 0; }
.nerec-regula strong { font-family: var(--font-mono); font-size: 13px; color: var(--navy-950); }
.nerec-regula span { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; }

/* "Descarcă PDF-ul" e o legatura, nu un buton, ca sa descarce fisierul direct.
   Fara asta ar arata subliniata printre butoane. */
.nerec-butoane a.btn { text-decoration: none; }

/* Bara de progres a cautarii prin documentele deja primite. */
.nerec-scan {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.nerec-scan-text { display: flex; flex-direction: column; gap: 2px; min-width: 180px; }
.nerec-scan-text strong { font-size: 13.5px; color: var(--navy-950); }
.nerec-scan-text span { font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); }
.nerec-scan-bara {
  flex: 1 1 200px;
  height: 7px;
  border-radius: 999px;
  background: var(--asphalt-200);
  overflow: hidden;
}
.nerec-scan-bara > i {
  display: block; height: 100%;
  background: var(--swe-blue, #2f79c4);
  transition: width .35s ease;
}
@media (max-width: 760px) {
  .nerec-scan { flex-direction: column; align-items: stretch; }
  .nerec-scan .btn { justify-content: center; }
}

/* ============================================================
   „Unde ești logat” — aparatele de pe care s-a intrat în aplicație
   ============================================================ */

.disp-lista { margin: -4px 0 14px; }

.disp-rand {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 10px 0;
  border-top: 1px solid var(--asphalt-100, #eef1f4);
}
.disp-rand:first-child { border-top: 0; }
/* Aparatul de pe care te uiti chiar acum: dunga verde, ca sa se vada dintr-o
   privire care e al tau si care nu. Pe el nu exista buton de scos -- te-ai da
   afara singur din pagina deschisa. */
.disp-rand.acesta { border-left: 3px solid var(--good-green, #16a34a); padding-left: 10px; }

.disp-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.disp-info strong { font-size: 13.5px; color: var(--navy-950); }
.disp-info span { font-size: 11.5px; color: var(--ink-soft); }

.disp-eticheta {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: rgba(22, 163, 74, .12); color: var(--good-green, #16a34a);
  vertical-align: middle;
}

.disp-rand .btn { padding: 6px 12px; font-size: 12.5px; }

/* Mai multe conectari de pe aceeasi adresa, stranse intr-un rand. */
.disp-numar { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
/* Textul lung („Mac · Safari, iPhone · Safari ×4...") nu mai impinge butonul pe randul de jos. */
.disp-grup > .disp-info { flex: 1 1 260px; }
.disp-detalii { flex-basis: 100%; }
.disp-detalii > summary { font-size: 12px; color: var(--ink-soft); cursor: pointer; padding: 2px 0; }
.disp-detalii .disp-rand { padding-left: 14px; }
.disp-detalii .disp-rand:first-of-type { border-top: 1px solid var(--asphalt-100, #eef1f4); }
.disp-grup.acesta .disp-detalii .disp-rand.acesta { padding-left: 11px; }

@media (max-width: 760px) {
  .disp-rand { align-items: stretch; }
  .disp-rand .btn { width: 100%; justify-content: center; }
}

/* Rolul, langa numele omului, in „Cine mai e conectat”. */
.disp-rol {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px;
  background: var(--asphalt-200); color: var(--ink-soft);
  vertical-align: middle; text-transform: lowercase;
}

/* Formularul de învățare a unui furnizor nou. */
.invata-semne { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.invata-semn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: 7px 11px;
  border: 1px solid var(--asphalt-300); border-radius: var(--radius-s);
  background: var(--card); cursor: pointer; text-align: left;
}
.invata-semn:hover { background: var(--asphalt-100); }
.invata-semn.ales { border-color: var(--swe-blue, #2f79c4); box-shadow: 0 0 0 2px rgba(47,121,196,.16); }
.invata-semn strong { font-family: var(--font-mono); font-size: 12.5px; color: var(--navy-950); }
.invata-semn span { font-size: 10.5px; color: var(--ink-soft); }

/* Ce ar ieși din factura asta. Se salvează doar dacă cifrele de aici sunt bune. */
.invata-preview {
  border: 1px solid var(--asphalt-200); border-radius: var(--radius-s);
  padding: 10px 12px; background: var(--asphalt-100);
}
.invata-rand {
  display: grid; grid-template-columns: 120px minmax(0, 1fr);
  gap: 10px; padding: 3px 0; font-size: 12.5px;
}
.invata-rand > span:first-child {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft); padding-top: 2px;
}
.invata-rand > span:last-child { color: var(--ink); font-family: var(--font-mono); }
.invata-rand > span.gol { font-family: var(--font-body); font-style: italic; color: var(--ink-soft); }

@media (max-width: 760px) {
  .invata-rand { grid-template-columns: 1fr; gap: 0; }
  .invata-semne { flex-direction: column; }
  .invata-semn { width: 100%; }
}

/* Selectorul de sortare al tab-ului Plăți. Pe calculator sortezi din capul
   tabelului, deci aici nu are ce căuta; apare doar pe telefon, unde tabelul
   devine carduri și capul nu se mai vede. */
.sort-mobil { display: none; }

/* ============================================================
   STEAGURILE DE LIMBĂ

   Limba se ține pe dispozitiv (localStorage), nu pe cont: pe același cont de
   administrator lucrează mai mulți oameni, iar fiecare trebuie să vadă
   aplicația în limba lui.

   Steagurile sunt desenate ca SVG, nu scrise cu emoji: pe Windows emoji-urile
   de drapel nu se afișează deloc — s-ar vedea două litere în loc de steag.
   ============================================================ */
.steaguri {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-right: 6px;
}
.steag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 22px;
  padding: 0;
  border: 1.5px solid transparent;
  border-radius: 5px;
  background: none;
  cursor: pointer;
  overflow: hidden;
  /* Nealese, steagurile stau stinse, ca să nu tragă ochiul de la butoanele
     care chiar se apasă des. Cel ales e la culoare și are contur. */
  opacity: .48;
  filter: saturate(.35);
  transition: opacity .14s ease, filter .14s ease, border-color .14s ease;
}
.steag svg { width: 24px; height: 16px; border-radius: 2px; display: block; }
.steag:hover { opacity: .9; filter: none; }
.steag-ales {
  opacity: 1;
  filter: none;
  border-color: rgba(255, 255, 255, .55);
}
.steag:focus-visible { outline: 2px solid var(--signal-orange); outline-offset: 2px; }

/* Pe paginile fără bară de sus (conectare, portalul șoferilor, al contabilei,
   pagina publică) steagurile stau fixate în colț. Deasupra cardului de
   conectare, dar sub ecranul de blocare. */
.steaguri-plutitoare {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 60;
  padding: 4px 6px;
  border-radius: 9px;
  background: rgba(15, 30, 46, .55);
  backdrop-filter: blur(6px);
  margin-right: 0;
}
.steaguri-plutitoare .steag-ales { border-color: rgba(255, 255, 255, .7); }

/* Steagurile din bara portalului de contabilitate: stau în rând cu butoanele
   de Setări și Ieși, nu peste ele. */
.ct-antet-dreapta {
  display: flex;
  align-items: center;
  gap: 6px;
}
.ct-antet-dreapta .steaguri { margin-right: 4px; }

/* ============================================================
   CE E NOU DE LA ULTIMA TA VIZITĂ

   Verde, nu roșu și nu galben: roșul e deja restanța, galbenul „de verificat".
   Un al treilea semn de alarmă ar fi făcut tabelul de necitit. Verdele spune
   „uite ce a intrat", nu „ai o problemă".

   Marcajul e al DISPOZITIVULUI: dacă sincronizarea o pornește calculatorul din
   birou, pe telefonul tău rândurile rămân aprinse până te uiți și acolo.
   ============================================================ */
table.invoices tbody tr.rand-nou td:first-child {
  box-shadow: inset 3px 0 0 var(--good-green);
}
table.invoices tbody tr.rand-nou { background: var(--good-green-soft); }
table.invoices tbody tr.rand-nou:hover { background: var(--nou-hover); }

.generic-card.rand-nou,
.invoice-card.rand-nou {
  border-left: 3px solid var(--good-green);
  background: var(--good-green-soft);
}

/* Eticheta de pe rând. Mică și lipită de prima coloană: pe un tabel de zece
   coloane, un cuvânt în plus la capăt nu s-ar vedea niciodată. */
.eticheta-nou {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--good-green);
  color: #fff;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

/* Pâlpâirea de la prima apariție: doar pentru rândurile care intră chiar sub
   ochii tăi, în timpul unei sincronizări. Se stinge singură și nu se mai repetă
   la următoarea redesenare — altfel tabelul ar clipi la fiecare filtrare. */
/* Cele doua nuante sunt legate de tema: pe fundal inchis, un verde de zi ar
   fi aratat ca o pata de lumina in mijlocul tabelului. */
:root { --nou-hover: #cfeeda; --nou-aprins: #a9e3c3; }
html[data-theme="dark"] { --nou-hover: #16402d; --nou-aprins: #1d5c40; }

@keyframes randNouIntra {
  0%   { background: var(--nou-aprins); }
  100% { background: var(--good-green-soft); }
}
table.invoices tbody tr.rand-nou-abia { animation: randNouIntra 2.6s ease-out 1; }
.generic-card.rand-nou-abia,
.invoice-card.rand-nou-abia { animation: randNouIntra 2.6s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  table.invoices tbody tr.rand-nou-abia,
  .generic-card.rand-nou-abia,
  .invoice-card.rand-nou-abia { animation: none; }
}

/* Contorul de pe tab. Verde, ca să nu se confunde cu roșul scadențelor —
   pe tabul Plăți stau unul lângă altul și înseamnă lucruri diferite. */
.tab-badge.nou { background: var(--good-green); color: #fff; }

/* Butonul „Am văzut" */
.btn.btn-nou { color: var(--good-green); border-color: #9ed7b8; }
.btn.btn-nou:hover { background: var(--good-green-soft); border-color: var(--good-green); }

/* ============================================================
   ÎNCASĂRI VIITOARE

   Un rând = un virament, desfăcut ca o tură: aceeași grilă, aceeași animație,
   același chevron. Deschis, arată exact ce scrie pe avizul de plată — fiecare
   factură cu numărul, ziua și suma ei.
   ============================================================ */
:root {
  /* Prima coloană ține data și etichetele ei („azi", „primit"). La 150px cele
     două etichete nu încăpeau una lângă alta și „primit" sărea pe rândul de
     dedesubt; lățimea în plus o ia din coloana elastică de lângă. */
  --inc-cols: 186px minmax(200px, 1fr) 96px 150px 140px 36px;
}

.incasari-bara {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.incasari-explicatie {
  flex: 1 1 auto;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.tour.inc-tur { margin-bottom: 6px; }
.inc-head { grid-template-columns: var(--inc-cols); }

.inc-titlu { font-weight: 600; color: var(--navy-950); }
.inc-interval { font-weight: 400; color: var(--ink-soft); font-family: var(--font-mono); font-size: 12.5px; }
.inc-interval .arrow { color: var(--signal-orange); margin: 0 2px; }
.inc-nr { font-size: 11.5px; color: var(--ink-soft); }
.inc-total { text-align: right; font-size: 14px; font-weight: 700; }
.inc-total small { font-size: 10.5px; font-weight: 500; color: var(--ink-soft); }

.inc-azi {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--swe-blue);
  color: #fff;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* „primit" — banii zilei au intrat. Stă lângă dată, ca să se vadă dintr-o
   privire pe care zi s-a încasat, fără să cauți suma la capătul rândului. */
.inc-primit {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--good-green);
  color: #fff;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Ce a venit efectiv. Verde când dă exact, chihlimbar
   când nu — acolo chiar ai ceva de verificat. */
.inc-real {
  font-family: var(--font-mono);
  font-size: 11.5px;
  padding: 1px 7px;
  border-radius: var(--radius-s);
  white-space: nowrap;
}
.inc-real.bun { background: var(--good-green-soft); color: var(--good-green); }
.inc-real.dif { background: var(--warn-amber-soft); color: var(--warn-amber); font-weight: 600; }
.inc-real.lipsa { color: var(--ink-soft); }

/* Ziua trecută se retrage un pic: ce contează e ce urmează. */
.tour.inc-tur.trecut .tour-date,
.tour.inc-tur.trecut .inc-total { opacity: .66; }
.tour.inc-tur.azi .tour-head { background: var(--swe-blue-soft); }

/* Desfășurat: ziua facturării, apoi facturile ei — ca pe aviz. */
.inc-linii { padding: 4px 0 2px; }
.inc-grup + .inc-grup { border-top: 1px solid var(--asphalt-200); }
.inc-grup-cap {
  display: grid;
  grid-template-columns: 150px 96px minmax(150px, 1fr) 140px 36px;
  gap: 12px;
  align-items: baseline;
  padding: 7px 16px 3px;
  background: var(--asphalt-100);
}
.inc-grup-zi { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--navy-950); }
.inc-grup-nr { font-size: 11px; color: var(--ink-soft); }
.inc-grup-total { text-align: right; font-size: 12.5px; font-weight: 600; }
.inc-mutata { font-style: normal; font-size: 11px; color: var(--signal-orange-dark); }

.inc-linie {
  display: grid;
  grid-template-columns: 150px 96px minmax(150px, 1fr) 140px 36px;
  gap: 12px;
  align-items: baseline;
  padding: 4px 16px;
  border-bottom: 1px solid var(--asphalt-200);
  font-size: 12.5px;
}
.inc-linie:last-child { border-bottom: none; }
.inc-l-nr a { color: var(--swe-blue); text-decoration: none; font-size: 12px; }
.inc-l-nr a:hover { text-decoration: underline; }
.inc-l-data { color: var(--ink-soft); font-size: 12px; }
.inc-l-camion { color: var(--ink-soft); font-family: var(--font-mono); font-size: 11.5px; }
.inc-l-suma { text-align: right; font-weight: 600; }
.inc-linie.incasata .inc-l-suma { color: var(--good-green); }

/* Sertarul cu plățile trecute: un rând ca toate celelalte, dar stins, ca ochiul
   să cadă pe ce urmează. Înăuntru sunt zilele trecute, fiecare desfăcându-se la
   rândul ei — de aceea fundalul e mai închis, ca să se vadă că ești un nivel
   mai jos. */
.tour.inc-sertar { border-style: dashed; }
.tour.inc-sertar > .tour-cap-rand > .tour-head { color: var(--ink-soft); }
.tour.inc-sertar > .tour-cap-rand > .tour-head .inc-total { color: var(--ink-soft); }
.tour.inc-sertar.open > .tour-cap-rand > .tour-head { background: var(--asphalt-100); }

.inc-sertar-cap {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft) !important;
  font-weight: 600;
}

.inc-sertar-lista {
  border-top: 1px solid var(--asphalt-200);
  background: var(--paper);
  padding: 8px 12px;
}
/* Rândurile dinăuntru sunt cu un nivel mai jos: puțin mai mici și fără umbră,
   ca să nu pară că sunt tot atât de importante ca cele de sus. */
.inc-sertar-lista .tour { box-shadow: none; margin-bottom: 5px; }
.inc-sertar-lista .tour:last-child { margin-bottom: 0; }
.inc-sertar-lista .tour-head { padding-top: 10px; padding-bottom: 10px; font-size: 13px; }

.inc-fara {
  padding: 22px 16px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 13px;
}

#incasariCard { padding: 6px 16px; }

/* Luna, în „Plăți primite": rândul de cel mai de sus nivel. Se vede că e altă
   treaptă — scris cu majuscule mici și fundal propriu când e deschis. */
.tour.inc-luna.open > .tour-cap-rand > .tour-head { background: var(--asphalt-100); }
.inc-luna-nume {
  font-weight: 700;
  text-transform: capitalize;
  color: var(--navy-950);
}
#primiteCard { padding: 6px 16px; }

/* Bifa „am primit banii", pentru zilele fără aviz de plată. Se vede că e de
   apăsat, dar stins: e o excepție, nu drumul obișnuit. */
.inc-real.bifeaza {
  cursor: pointer;
  border: 1px dashed var(--asphalt-300);
  color: var(--ink-soft);
  background: none;
  font-family: var(--font-body);
  font-size: 11px;
}
.inc-real.bifeaza:hover {
  border-color: var(--good-green);
  color: var(--good-green);
  background: var(--good-green-soft);
}
/* Bifat de tine, nu de aviz: verde, dar cu contur — dovada e cuvântul tău, nu
   o hârtie de la LKW. */
.inc-real.manual {
  cursor: pointer;
  background: none;
  border: 1px solid var(--good-green);
  color: var(--good-green);
  font-weight: 600;
}
.inc-real.manual:hover { background: var(--good-green-soft); }
.inc-real.lucreaza { opacity: .5; pointer-events: none; }
.inc-real.bifeaza:focus-visible,
.inc-real.manual:focus-visible { outline: 2px solid var(--swe-blue); outline-offset: 2px; }

/* Descărcarea avizului, chiar din rândul zilei. Mic și discret: e la îndemână
   când ai nevoie de el, dar nu se bate cu suma de lângă. */
.inc-aviz-desc {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 5px;
  padding: 2px 5px;
  border-radius: var(--radius-s);
  border: 1px solid var(--asphalt-300);
  color: var(--ink-soft);
  cursor: pointer;
  vertical-align: -2px;
}
.inc-aviz-desc:hover { border-color: var(--swe-blue); color: var(--swe-blue); background: var(--swe-blue-soft); }
.inc-aviz-desc:focus-visible { outline: 2px solid var(--swe-blue); outline-offset: 2px; }
.inc-aviz-desc i { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; }

/* ---------------------------------------------------------------------------
   Documentele care vin CU factura (anexele DKV)

   In tabel apare doar un semn cu numarul lor -- destul cat sa se vada ca
   hartiile exista. Lista intreaga, cu butoane de descarcare, se deschide odata
   cu plata.
   ------------------------------------------------------------------------- */
.anexe-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--asphalt-100, #f1f3f5);
  border: 1px solid var(--asphalt-300);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
  vertical-align: 1px;
}

.anexe-lista { display: flex; flex-direction: column; gap: 6px; }

.anexe-rand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  background: var(--paper, #fff);
}

.anexe-fel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink);
}

.anexe-desc { padding: 4px 10px; font-size: 12px; white-space: nowrap; }
.anexe-lipsa { font-size: 12px; color: var(--ink-soft); font-style: italic; }

@media (max-width: 560px) {
  .anexe-rand { flex-wrap: wrap; }
}

/* Cele doua butoane de descarcare din portalul de contabilitate: doar factura,
   sau tot setul. Stau lipite, ca sa se vada ca sunt doua feluri de a lua
   acelasi document. */
.ct-descarca { display: flex; gap: 4px; align-items: center; }

/* „+6” langa referinta: cate documente mai vin cu factura. */
.ct-anexe {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--asphalt-100, #f1f3f5);
  border: 1px solid var(--asphalt-300);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10.5px;
}

/* Randul de sus din lista de anexe: „ia-le pe toate”. Se desparte de restul
   printr-o linie, ca sa nu para inca o anexa. */
.anexe-rand.anexe-tot {
  border-color: var(--swe-blue);
  background: var(--swe-blue-soft);
  margin-bottom: 2px;
}

/* ---------------------------------------------------------------------------
   Tura care a intrat de la ultima vizita.

   Aceeasi dunga verde ca la facturi si plati, dar pusa pe randul-cap al turei.
   Fundalul verde se vede DOAR cat timp tura e inchisa: cand o deschizi, albastrul
   de „deschis" trebuie sa ramana el, altfel nu se mai vede care e desfacuta.
   ------------------------------------------------------------------------- */
.tour.rand-nou > .tour-cap-rand { box-shadow: inset 3px 0 0 var(--good-green); }
.tour.rand-nou:not(.open) > .tour-cap-rand { background: var(--good-green-soft); }
.tour.rand-nou:not(.open) > .tour-cap-rand:hover { background: var(--nou-hover); }
.tour.rand-nou > .tour-cap-rand > .tour-head { background: none; }
.tour.rand-nou-abia:not(.open) > .tour-cap-rand { animation: randNouIntra 2.6s ease-out 1; }

@media (prefers-reduced-motion: reduce) {
  .tour.rand-nou-abia:not(.open) > .tour-cap-rand { animation: none; }
}

/* ===========================================================================
   „Ce s-a schimbat” — jurnalul de versiuni, aratat o data pe dispozitiv.

   E singurul loc din aplicatie unde ne permitem putina bucurie: un camion care
   intra din marginea ecranului si un drum care curge sub el. Restul ramane la
   fel de sobru ca tot ce e in jur -- e o fereastra pe care o vezi zece secunde
   la fiecare actualizare, nu un afis.
   ========================================================================= */

/* Numarul de versiune din antet. Sta stins pana il cauti. */
.brand-versiune {
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
  opacity: .55;
  transition: opacity .18s ease, background .18s ease;
}
.brand-versiune:hover { opacity: 1; background: rgba(255, 255, 255, 0.18); }
.brand-versiune:empty { display: none; }

.nou-modal { max-width: 640px; overflow: hidden; }

.nou-cap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px 18px;
  background: linear-gradient(135deg, var(--swe-blue) 0%, #0a3d78 100%);
  color: #fff;
  overflow: hidden;
}
.nou-cap h2 { margin: 2px 0 0; font-size: 19px; color: #fff; }
.nou-cap .modal-close { position: absolute; top: 12px; right: 12px; color: rgba(255,255,255,.75); }
.nou-cap .modal-close:hover { color: #fff; }

.nou-eticheta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--swe-yellow, #ffcd00);
}

/* Camionul intra din stanga o singura data, cand se deschide fereastra. */
.nou-camion { flex: 0 0 auto; color: rgba(255, 255, 255, .92); }
.nou-camion svg { width: 64px; height: 32px; display: block; animation: nouCamionIntra .7s cubic-bezier(.22,.8,.3,1) 1; }
.nou-drum { stroke: var(--swe-yellow, #ffcd00); stroke-dasharray: 8 10; animation: nouDrum 1.1s linear infinite; }

@keyframes nouCamionIntra {
  0%   { transform: translateX(-70px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
/* Drumul curge INAPOI, adica spre stanga: camionul e desenat cu botul spre
   dreapta, iar ochiul citeste miscarea din ce trece pe langa el. Cu dungile
   mergand in aceeasi directie cu camionul, parea ca drumul fuge cu el.
   La „stroke-dashoffset" crescator, tiparul se muta spre inceputul liniei --
   adica spre stanga. */
@keyframes nouDrum {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 18; }
}
@media (prefers-reduced-motion: reduce) {
  .nou-camion svg { animation: none; }
  .nou-drum { animation: none; }
}

.nou-corp { max-height: min(60vh, 520px); overflow-y: auto; padding: 6px 22px 4px; }

.nou-versiune { padding: 16px 0; border-bottom: 1px solid var(--asphalt-100, #eef1f4); }
.nou-versiune:last-child { border-bottom: 0; }

.nou-versiune-cap { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.nou-numar {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--swe-blue-soft);
  color: var(--swe-blue);
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
}
.nou-versiune-titlu { font-weight: 650; font-size: 14.5px; color: var(--ink); }
.nou-zi { margin-left: auto; font-size: 12px; color: var(--ink-soft); font-family: var(--font-mono); }

.nou-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.nou-lista li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
}
/* Bulina e un semn de bifat, nu un punct: fiecare rand e ceva ce chiar s-a facut. */
.nou-lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 6px;
  width: 8px;
  height: 5px;
  border-left: 2px solid var(--good-green);
  border-bottom: 2px solid var(--good-green);
  transform: rotate(-45deg);
}

.nou-subsol { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nou-toate { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-soft); cursor: pointer; }
.nou-toate input { width: 15px; height: 15px; }

@media (max-width: 560px) {
  .nou-cap { padding: 16px 18px 14px; }
  .nou-camion svg { width: 48px; height: 24px; }
  .nou-cap h2 { font-size: 17px; }
  .nou-corp { padding: 4px 18px; }
}

/* ============================================================
   DIURNE — hârtia lunară pentru contabil
   Tabelul zilelor la stânga, rezumatul și notele la dreapta: cifrele se schimbă
   sub ochii tăi în timp ce corectezi zilele.
   ============================================================ */
.diurne-total { margin-left: auto; font-size: 13px; color: var(--ink-soft); }
.diurne-total b { color: var(--ink); font-size: 15px; }

.diurne-doua {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
  align-items: start;
}
.diurne-lateral .card { margin-bottom: 14px; padding: 14px; }
.diurne-lateral h4 { margin: 0 0 10px; font-size: 13px; }

.diurne-tabel td { padding-top: 4px; padding-bottom: 4px; }
.diurne-tabel .month-input { padding: 5px 8px; font-size: 12.5px; width: 100%; }
.diurne-tabel .diurne-suma { text-align: right; max-width: 110px; }
.diurne-zi-nume { display: block; font-size: 10.5px; color: var(--ink-soft); }

/* Ziua schimbată de mână se vede: e singura care nu se mai reface la „Refă luna". */
.diurne-manual { background: rgba(255, 205, 0, .10); }
.diurne-liber td { opacity: .62; }

.diurne-linie {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 12.5px; padding: 3px 0;
}
.diurne-linie.total {
  border-top: 1px solid var(--asphalt-200);
  margin-top: 6px; padding-top: 7px; font-size: 13.5px;
}
.diurne-nota {
  margin: 0 0 6px; font-size: 12px; line-height: 1.45; color: var(--ink-soft);
  padding-left: 10px; border-left: 2px solid var(--asphalt-200);
}

@media (max-width: 1100px) {
  .diurne-doua { grid-template-columns: minmax(0, 1fr); }
}

/* Casetele din panoul de note: două pe rând, cu numere și date la fel de
   îmbrăcate ca restul câmpurilor (regula veche prindea doar text/parolă/email). */
.diurne-perechi { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.diurne-perechi .field { margin-bottom: 10px; }
.diurne-lateral .field input[type="number"],
.diurne-lateral .field input[type="date"],
.diurne-lateral .field input[type="text"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--asphalt-300);
  border-radius: var(--radius-s);
  font-size: 13.5px;
  background: var(--card);
  color: var(--ink);
}
.diurne-bifa { display: flex; align-items: flex-end; }
.diurne-bifa .check { display: flex; align-items: center; gap: 7px; font-size: 12.5px; margin-bottom: 8px; }
.diurne-lateral textarea { font-size: 13px; }

/* Bara sub-taburilor din „Șoferi" ține exact cât țin butoanele. Fiind un
   .period-tabs obișnuit, se întindea pe toată lățimea paginii și rămânea o
   bandă goală de un metru în dreapta celor două butoane. */
.soferi-taburi {
  display: inline-flex;
  width: auto;
  margin-bottom: 14px;
}

/* ===========================================================================
   FASIA DE DRUM DE PE PAGINA ACASA
   ---------------------------------------------------------------------------
   Locul gol de sub casutele de pe Acasa. Nu spune nimic despre firma, doar
   umple spatiul cu un tir de-al nostru pe o sosea suedeza, sub cerul si vremea
   de acum. Desenul si socotelile sunt in static/js/drum.js.

   Tot ce se misca e mutat cu "transform", nu cu "background-position" sau cu
   "left": asa desenul e mutat de placa video, fara sa fie redesenat la fiecare
   cadru. Duratele se pun din drum.js, toate socotite din aceeasi viteza.

   Culorile cerului, ale peisajului si cat e de noapte (--drum-noapte, 0..1)
   le scrie drum.js pe #drum, o data la doua minute. Cele de aici sunt doar
   valorile de pornire, pana ruleaza scriptul.
   =========================================================================== */

:root {
  --drum-cab: #1668b3;
  --drum-cab-inchis: #0f4d88;
  --drum-dunga: var(--swe-yellow);
  --drum-prelata: #f2f6fa;
  --drum-contur: #0b2540;
  --drum-sasiu: #26364a;
  --drum-roata: #1d2836;
  --drum-janta: #9db0c2;
  --drum-rezervor: #8e9cab;
  --drum-geam: #cfe2f2;
  --drum-bec-far: #fff3c4;
  --drum-bec-galben: #ffb12e;
  --drum-bec-rosu: #e2382b;
  --drum-avion: #4a6885;
  --drum-cer-sus: #5f9ad8;
  --drum-cer-mij: #a9cdeb;
  --drum-cer-jos: #d3e5f1;
  --drum-asfalt: #78889a;
  --drum-margine: #8b9b76;
  --drum-noapte: 0;
  --drum-stele: 0;
  --drum-nori-vad: .3;
  --drum-ceata: 0;
  --drum-zapada: 0;
  --drum-astru-vad: 0;
}
html[data-theme="dark"] {
  --drum-avion: #7f97ae;
}

.drum {
  position: relative;
  overflow: hidden;
  height: 165px;
  margin-top: 18px;
  border: 1px solid var(--asphalt-200);
  border-radius: 12px;
  background: var(--drum-cer-jos);
  isolation: isolate;
}

/* ---------- cerul ---------- */
.drum-cer {
  position: absolute; inset: 0; z-index: 0;
  /* culoarea de la orizont trebuie sa ajunga deasupra dealurilor, altfel apusul s-ar ascunde in spatele lor */
  background: linear-gradient(180deg, var(--drum-cer-sus) 0%, var(--drum-cer-mij) 30%, var(--drum-cer-jos) 58%);
}
.drum-stele {
  position: absolute; left: 0; right: 0; top: 0; height: 62%; z-index: 0;
  background-size: 600px 100%; background-repeat: repeat-x;
  opacity: var(--drum-stele);
}
/* Soarele sau luna. Soarele e pus unde e el pe cer acum (drum.js), luna sta
   sus in dreapta; umbra ei (::after) arata faza lunii. */
.drum-astru {
  position: absolute; z-index: 0;
  left: var(--drum-astru-x, 70%); top: var(--drum-astru-y, 20%);
  width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  opacity: var(--drum-astru-vad); overflow: hidden;
}
.drum-astru.drum-soare {
  background: radial-gradient(circle, #fffbe8 0%, #ffe39a 62%, #ffd06a 100%);
  box-shadow: 0 0 22px 9px rgba(255, 214, 120, .45);
  overflow: visible;
}
.drum-astru.drum-luna {
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  background: #e9eef5;
  box-shadow: 0 0 16px 4px rgba(214, 226, 255, .28);
}
.drum-astru.drum-luna::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  background: var(--drum-cer-sus);
  transform: translateX(var(--drum-luna-umbra, 100%));
}

/* Straturile de fundal: doua copii lipite una de alta, mutate pana cand a doua
   ajunge exact unde era prima. Asa nu se vede nicio taietura. */
.drum-banda {
  position: absolute; left: 0; width: 200%;
  background-repeat: repeat-x; background-size: 50% 100%;
}
.drum-nori    { top: 2%; height: 46%; z-index: 0; opacity: var(--drum-nori-vad); }
.drum-dealuri { bottom: 30%; height: 38%; z-index: 1; }
.drum-copaci  { bottom: 29%; height: 27%; z-index: 1; }

/* Ceata: departe acopera dealurile si brazii aproape de tot, in fata doar putin. */
.drum-ceata {
  position: absolute; left: 0; right: 0; top: 0; bottom: 28%; z-index: 2;
  background: linear-gradient(180deg, rgba(196, 204, 212, .55) 0%, rgba(206, 213, 220, .92) 100%);
  opacity: var(--drum-ceata); pointer-events: none;
}
html[data-theme="dark"] .drum-ceata {
  background: linear-gradient(180deg, rgba(70, 80, 92, .55) 0%, rgba(84, 94, 106, .9) 100%);
}
.drum-ceata-fata {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: rgba(205, 212, 220, .28);
  opacity: var(--drum-ceata);
}
html[data-theme="dark"] .drum-ceata-fata { background: rgba(80, 90, 102, .3); }

/* ---------- soseaua ---------- */
.drum-sosea {
  position: absolute; left: 0; right: 0; bottom: 0; height: 29%; z-index: 2;
  background: linear-gradient(180deg, var(--drum-asfalt) 0%, rgba(0, 0, 0, .32) 100%), var(--drum-asfalt);
  border-top: 3px solid var(--drum-margine);
}
/* Iarna, zapada stransa pe marginea drumului. */
.drum-zapada-margine {
  position: absolute; left: 0; right: 0; bottom: 29%; height: 5px; z-index: 2;
  background: linear-gradient(180deg, #f4f7fa, #dfe6ee);
  border-radius: 3px 3px 0 0;
  opacity: var(--drum-zapada);
}

/* Dungile: o banda mai lata decat cadrul, mutata cu exact o perioada. Taierea
   se intampla in afara cadrului, deci nu se vede nicio dunga rupta. */
.drum-dungi-cutie {
  position: absolute; left: -160px; right: -160px; bottom: 5%; z-index: 2;
  height: 4px; overflow: hidden;
}
.drum-dungi {
  position: absolute; inset: 0; opacity: .9;
  background: repeating-linear-gradient(90deg,
              var(--swe-yellow) 0 34px, transparent 34px 74px);
}
@keyframes drum-curge {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--drum-pas), 0, 0); }
}

/* Stalpii reflectorizanti de pe marginea dinspre padure, unul la 260 px.
   Noaptea, reflectorul lor prinde lumina (al doilea strat, doar reflectoarele). */
.drum-stalpi-cutie {
  position: absolute; left: -300px; right: -300px; bottom: 27.5%; height: 22px; z-index: 2;
  overflow: hidden; pointer-events: none;
}
.drum-stalpi {
  position: absolute; inset: 0;
  background-repeat: repeat-x; background-size: 260px 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='22'%3E%3Crect x='120' y='3' width='4' height='19' rx='1' fill='%23eef2f6'/%3E%3Crect x='120' y='3' width='4' height='5' rx='1' fill='%23151a20'/%3E%3Crect x='121' y='4.2' width='2' height='2.6' fill='%23f2c14a'/%3E%3C/svg%3E");
}
.drum-reflectoare {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='22'%3E%3Ccircle cx='122' cy='5.5' r='3.4' fill='%23ffd56a' fill-opacity='.85'/%3E%3C/svg%3E");
  opacity: var(--drum-noapte);
}

/* ---------- tirul ----------
   z-index 4: tirul trece PESTE semne si stalpi, care sunt pe marginea
   cealalta a drumului. Containerul sta pe loc; doar caroseria se leagana pe
   suspensie, rotile raman pe asfalt si se invart. */
.drum-camion {
  position: absolute; left: 6%; bottom: 8%; z-index: 4;
  width: 400px;
}
.drum-caroserie {
  position: relative; display: block; width: 100%; height: auto; overflow: visible;
  animation: drum-hurducai 1.1s ease-in-out infinite;
}
@keyframes drum-hurducai {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.2px); }
}
.drum-roata {
  position: absolute; aspect-ratio: 1;
  animation: drum-rotire var(--drum-roata-t, .3s) linear infinite;
}
.drum-roata svg { display: block; width: 100%; height: 100%; }
@keyframes drum-rotire {
  to { transform: rotate(360deg); }
}

/* Luminile: becurile ard putin si ziua, noaptea tare si cu lumina in jur. */
.drum-lum  { opacity: calc(.55 + .45 * var(--drum-noapte)); }
.drum-halo { opacity: var(--drum-noapte); }

/* Farurile noaptea: un con de lumina in fata tirului si o pata pe asfalt. */
.drum-far-raza {
  position: absolute; left: 89.6%; top: 51%; width: 260px; height: 64px; margin-top: -32px;
  background: linear-gradient(90deg, rgba(255, 238, 180, .5) 0%, rgba(255, 238, 180, .16) 45%, rgba(255, 238, 180, 0) 100%);
  clip-path: polygon(0 44%, 100% 0, 100% 100%, 0 56%);
  opacity: calc(var(--drum-noapte) * .9); pointer-events: none;
}
.drum-far-pata {
  position: absolute; left: 92%; bottom: -6%; width: 240px; height: 26px;
  background: radial-gradient(ellipse at 40% 50%, rgba(255, 236, 170, .32), rgba(255, 236, 170, 0) 70%);
  opacity: var(--drum-noapte); pointer-events: none;
}

/* ---------- masina care depaseste ----------
   Pe banda din fata, deci trece peste tir. */
.drum-masina {
  position: absolute; left: -170px; bottom: 1%; z-index: 5;
  width: 128px; will-change: transform;
}
.drum-masina-corp { display: block; width: 100%; height: auto; overflow: visible; }
.drum-masina.drum-depaseste {
  animation: drum-depasire var(--drum-masina-durata, 6s) linear 1 both;
}
@keyframes drum-depasire {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--drum-masina-drum), 0, 0); }
}

/* ---------- avionul cu steagul Suediei ---------- */
.drum-avion {
  position: absolute; left: 100%; top: 9%; z-index: 1;
  width: 142px; will-change: transform;
}
.drum-avion svg { display: block; width: 100%; height: auto; }
.drum-avion.drum-zboara {
  animation: drum-zbor var(--drum-durata-avion, 12s) linear 1 both;
}
@keyframes drum-zbor {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--drum-avion-drum), 0, 0); }
}
/* Steagul flutura putin -- altfel pare o placa de tabla trasa dupa avion. */
.drum-steag {
  transform-origin: 88px 24px;
  animation: drum-flutura 1.6s ease-in-out infinite;
}
@keyframes drum-flutura {
  0%, 100% { transform: rotate(-1.6deg) scaleY(1); }
  50%      { transform: rotate(1.6deg) scaleY(.94); }
}

/* ---------- semnele ---------- */
.drum-semn {
  position: absolute; left: 100%; bottom: 27%; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start;
  will-change: transform;
}
.drum-semn.drum-trece {
  animation: drum-treci var(--drum-durata-semn, 8s) linear 1 both;
}
@keyframes drum-treci {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--drum-semn), 0, 0); }
}
.drum-placa {
  background: #0a5ca8; color: #fff; border: 3px solid #fff; border-radius: 6px;
  padding: 5px 10px; min-width: 132px; font-weight: 700;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}
.drum-rand {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  font-size: 13px; line-height: 1.35; white-space: nowrap;
}
.drum-km { font-weight: 500; opacity: .92; }
.drum-stalp {
  width: 5px; height: 26px; margin-left: 22px; border-radius: 2px;
  background: linear-gradient(180deg, #c9d3dc, #7d8b98);
}
.drum-semn-elan { align-items: center; }
.drum-elan { width: 46px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .3)); }
.drum-elan svg { display: block; width: 100%; height: auto; }
.drum-semn-elan .drum-stalp { margin-left: 0; height: 30px; }

/* Noaptea, semnele raman luminate de farurile care trec -- nu le stingem de tot,
   dar le coboram putin lumina ca sa nu sara din cadru. */
.drum-semn { filter: brightness(calc(1 - .28 * var(--drum-noapte))); }

/* ---------- ploaia, ninsoarea, fulgerul ----------
   Fiecare strat cade cu exact o bucata de model pe tura, deci nu sare. Un
   strat departe (mic, rar) si unul aproape (mare, des) dau adancime. Stratul e
   rotit: tirul merge spre dreapta, deci ploaia si zapada vin pieziș. */
.drum-precip {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  opacity: 0; transition: opacity 2s ease;
}
.drum-cade { position: absolute; inset: -60% -30%; transform: rotate(14deg); }
.drum.drum-ninge .drum-cade { transform: rotate(32deg); }
.drum-cade-strat {
  position: absolute; left: 0; right: 0; top: -40%; height: 180%;
  will-change: transform;
  animation: drum-cade var(--drum-cade-t, .3s) linear infinite;
}
.drum-cade-departe .drum-cade-strat { opacity: .7; }
@keyframes drum-cade {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, var(--drum-cade-pas, 100px), 0); }
}
.drum-fulger {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  background: rgba(235, 242, 255, .85); opacity: 0;
}
.drum-fulger.drum-fulgera { animation: drum-fulgera .9s ease-out 1; }
@keyframes drum-fulgera {
  0% { opacity: 0; } 6% { opacity: .9; } 14% { opacity: .1; }
  22% { opacity: .7; } 100% { opacity: 0; }
}

/* Cand omul a cerut din sistem mai putina miscare, fasia ramane un desen fix. */
.drum.drum-oprit *, .drum.drum-oprit *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .drum *, .drum *::after { animation: none !important; }
}

/* ---- Acasa, jos: fasia cu camionul si caseta „Astăzi” in dreapta ei ----
   Ca in filmul de prezentare: amandoua la aceeasi inaltime (cat incap 4 randuri
   si „Încă N”). Peisajul e pus in procente, deci la fasia mai inalta creste doar
   cerul. Cand desfaci toata lista, creste doar caseta, nu si fasia. */
.acasa-jos { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; margin-top: 18px; align-items: start; }
.acasa-jos .drum { margin-top: 0; height: 380px; border-radius: 16px; }
.acasa-azi { background: var(--card); border: 1px solid var(--asphalt-200); border-radius: 16px;
  box-shadow: var(--shadow-card); padding: 18px 16px 12px; display: flex; flex-direction: column; min-height: 380px; }
.acasa-azi h3 { margin: 0 0 10px 6px; font-family: var(--font-body); font-size: 17px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em; }
.acasa-azi .sk-alerta { height: 46px; margin: 6px; border-radius: 10px; }
.az-lista { display: flex; flex-direction: column; gap: 2px; }
.az-rand { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%;
  border: 0; background: transparent; text-align: left; padding: 8px 6px; border-radius: 10px; cursor: pointer;
  font: inherit; color: inherit; transition: background .15s; }
.az-rand:hover { background: var(--gri-pal); }
.az-rand.az-gol { cursor: default; }
.az-rand.az-gol:hover { background: transparent; }
.acasa-azi:not(.toate) .az-ascuns { display: none; }
.az-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; }
.az-icon svg { width: 16px; height: 16px; }
.az-icon.galben { background: var(--galben-pal); color: #b07700; }
.az-icon.mov { background: #ece5fb; color: #6741d9; }
.az-icon.albastru { background: var(--albastru-pal); color: var(--swe-blue); }
.az-icon.verde { background: var(--good-green-soft); color: var(--good-green); }
.az-icon.rosu { background: var(--rosu-f1); color: var(--rosu); }
.az-icon.gri { background: var(--asphalt-100); color: var(--ink-soft); }
html[data-theme="dark"] .az-icon.galben { color: #f2c66d; }
html[data-theme="dark"] .az-icon.mov { background: #2a2140; color: #b9a4f5; }
.az-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.az-text b { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.az-text span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; }
.az-mai-multe { margin: 6px 6px 0; align-self: flex-start; border: 0; background: transparent; color: var(--swe-blue);
  font-weight: 600; font-size: 13px; cursor: pointer; padding: 4px 0; }
@media (max-width: 1100px) {
  .acasa-jos { grid-template-columns: minmax(0, 1fr) 330px; }
}
@media (max-width: 900px) {
  /* Pe telefon si tableta ingusta caseta trece sub fasie */
  .acasa-jos { grid-template-columns: 1fr; }
  .acasa-jos .drum { height: 165px; }
  .acasa-azi { min-height: 0; }
}
@media (max-width: 760px) {
  .acasa-jos { margin-top: 14px; gap: 12px; }
  .acasa-jos .drum { height: 118px; }
}

@media (max-width: 760px) {
  /* Pe telefon fasia e joasa, deci semnul coboara si se face mai mic --
     altfel placa cu doua orase iese prin marginea de sus a cadrului. */
  .drum { height: 118px; margin-top: 14px; }
  .drum-camion { width: 250px; left: 4%; bottom: 9%; }
  .drum-far-raza { width: 150px; height: 40px; margin-top: -20px; }
  .drum-far-pata { width: 140px; }
  .drum-masina { width: 84px; }
  .drum-semn { bottom: 20%; }
  .drum-rand { font-size: 12px; }
  .drum-placa { min-width: 112px; padding: 4px 8px; border-width: 2px; }
  .drum-stalp { height: 18px; width: 4px; margin-left: 18px; }
  .drum-elan { width: 34px; }
  .drum-semn-elan .drum-stalp { height: 20px; }
  .drum-stalpi-cutie { bottom: 26.5%; height: 16px; }
  .drum-stalpi, .drum-reflectoare { background-size: 260px 16px; }
  .drum-avion { width: 90px; top: 4%; }
}

/* Rezumatul si notele de sub tabelul de diurne, in portalul contabilei. Doua
   coloane pe calculator, una sub alta pe telefon. */
.ct-diurne-jos {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.ct-diurne-jos h4 {
  margin: 0 0 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-soft);
}
/* Zilele fara diurna (weekend, zi rosie) sunt doar stinse, nu taiate cu o
   linie: taiate ar parea anulate, si nu e cazul -- asa e luna. */
.ct-zi-goala td { color: var(--ink-soft); }
.ct-note { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.65; }
.ct-note li { margin-bottom: 3px; }
@media (max-width: 760px) {
  .ct-diurne-jos { grid-template-columns: 1fr; }
}

/* ===========================================================
   COMENZILE DE TRANSPORT
   Fiecare rand e o comanda. Dunga din stanga spune starea dintr-o privire:
   portocaliu = n-a ajuns in service overview, chihlimbar = a ajuns schimbata,
   verde = totul se potriveste, stins = anulata. Culoarea o poarta dunga, nu
   tot randul: un rand colorat pe toata latimea tipa la tine chiar si cand e in
   regula, iar lista are zeci de randuri.
   =========================================================== */
.comanda-rand {
  display: grid;
  grid-template-columns: 96px 108px 1fr 128px 128px;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-left: 4px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  margin-bottom: 6px;
  font-size: 13px;
}
.comanda-rand.lipsa      { border-left-color: var(--signal-orange); }
.comanda-rand.diferente  { border-left-color: var(--warn-amber); }
.comanda-rand.potrivita  { border-left-color: var(--good-green); }
.comanda-rand.anulata    { opacity: .62; }
.comanda-rand .c-ref { font-weight: 600; font-variant-numeric: tabular-nums; }
.comanda-rand .c-zi { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.comanda-rand .c-drum { min-width: 0; }
.comanda-rand .c-drum b { font-weight: 600; }
.comanda-rand .c-drum i {
  display: block;
  font-style: normal;
  font-size: 11.5px;
  color: var(--ink-soft);
}
.comanda-rand .c-camion { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.comanda-rand .c-stare { text-align: right; }
.comanda-eticheta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.comanda-eticheta.lipsa     { background: var(--signal-orange-soft); color: var(--signal-orange-dark); }
.comanda-eticheta.diferente { background: var(--warn-amber-soft); color: var(--warn-amber); }
.comanda-eticheta.potrivita { background: var(--good-green-soft); color: var(--good-green); }
.comanda-eticheta.anulata   { background: var(--asphalt-100, #eef1f4); color: var(--ink-soft); }
.comanda-eticheta.facturata { background: var(--good-green-soft); color: var(--good-green); }
/* Ce anume difera fata de comanda, scris sub rand. Fara explicatie, „cu
   diferente" nu-ti spune nimic si tot trebuie sa deschizi ambele hartii. */
.comanda-difera {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--asphalt-200);
  font-size: 12px;
  color: var(--warn-amber);
}
.comanda-difera span { margin-right: 14px; white-space: nowrap; }
.comanda-difera b { font-weight: 600; }
@media (max-width: 760px) {
  .comanda-rand { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .comanda-rand .c-drum { grid-column: 1 / -1; }
  .comanda-rand .c-camion { grid-column: 1; }
  .comanda-rand .c-stare { grid-column: 2; }
}

/* Cifrele despre bani n-au ce cauta peste lista de comenzi: comanda n-are
   suma. Clasa bate si regula de carusel de pe telefon, care e „!important". */
.stats-row.fara-cifre { display: none !important; }
/* Randul de diferente: eticheta ingrosata, cuvintele de legatura stinse,
   valorile in evidenta. Fiecare bucata e un element separat ca sa se poata
   traduce; culorile fac din ele iar o propozitie. */
.comanda-difera i { font-style: normal; opacity: .72; margin-left: 6px; }
.comanda-difera em { font-style: normal; font-weight: 600; }

/* Rândul care explică un virament cu bani ceruți în avans. Stă sub capul zilei,
   la vedere fără să desfaci nimic: acolo te uiți când suma zilei e mult mai mare
   decât facturile ei și vrei să știi de ce. */
.inc-avans {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 7px 16px 9px;
  font-size: 12.5px;
  color: var(--ink-soft);
  border-top: 1px dashed var(--asphalt-200);
  background: var(--swe-blue-soft);
}
.inc-avans b { color: var(--navy-950); font-variant-numeric: tabular-nums; }
.inc-avans em { font-style: normal; font-weight: 600; color: var(--swe-blue-dark); }
.inc-avans .inc-comision { color: var(--warn-amber); }
/* Grupa cerută în avans: o dungă albastră, nu portocalie. Nu e o problemă, e o
   alegere pe care ai făcut-o tu. */
.inc-grup.in-avans { border-left: 3px solid var(--swe-blue-light); }
.inc-mutata.avans { color: var(--swe-blue-dark); }

/* ===========================================================
   INVENTARUL ȘOFERILOR
   O linie neconfirmată are dungă portocalie: e singurul lucru la care mai ai
   ceva de făcut. Restul stă liniștit — o listă în care totul strigă nu spune
   nimic.
   =========================================================== */
.inv-sofer, .inv-obiect {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  margin-bottom: 8px;
  overflow: hidden;
}
.inv-sofer.inactiv { border-color: var(--signal-orange); }
.inv-sofer-cap, .inv-obiect-cap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--asphalt-100);
  font-size: 13.5px;
}
.inv-obiect-cap { cursor: default; }
.inv-punct { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.inv-sofer-nr, .inv-categorie { color: var(--ink-soft); font-size: 12px; }
.inv-sofer-val { margin-left: auto; font-variant-numeric: tabular-nums; }
.inv-obiect-actiuni { margin-left: auto; }
.inv-plecat {
  font-style: normal; font-size: 11px; font-weight: 600;
  color: var(--signal-orange-dark);
  background: var(--signal-orange-soft);
  padding: 2px 8px; border-radius: 999px;
}
.inv-serie {
  font-size: 11.5px; color: var(--ink-soft);
  background: var(--asphalt-100); padding: 1px 6px; border-radius: 4px;
}
.inv-eticheta {
  font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.inv-eticheta.la-cineva { background: var(--swe-blue-soft); color: var(--swe-blue-dark); }
.inv-eticheta.in-birou { background: var(--good-green-soft); color: var(--good-green); }
.inv-eticheta.neconfirmat { background: var(--warn-amber-soft); color: var(--warn-amber); }

.inv-linie {
  display: grid;
  grid-template-columns: 1fr 52px 130px 150px 96px;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--asphalt-200);
  border-left: 3px solid transparent;
  font-size: 13px;
}
.inv-linie.neconfirmata { border-left-color: var(--warn-amber); }
.inv-l-cant, .inv-l-data { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.inv-l-act, .inv-l-conf { text-align: right; }
.inv-confirmat { font-size: 12px; color: var(--good-green); font-weight: 600; }
.inv-nimic { color: var(--ink-soft); font-size: 13px; padding: 8px 2px; }
.inv-explicatie { font-size: 12.5px; color: var(--ink-soft); margin: 4px 0 0; line-height: 1.55; }
@media (max-width: 760px) {
  .inv-linie { grid-template-columns: 1fr auto; gap: 4px 10px; }
  .inv-l-data { grid-column: 1; }
  .inv-l-conf, .inv-l-act { grid-column: 2; text-align: right; }
}

/* Inventarul, în portalul șoferului. Cardurile de confirmat au dungă portocalie
   și stau sus; cele deja confirmate sunt stinse, la subsol. */
.inv-de-confirmat {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-left: 4px solid var(--signal-orange);
  border-radius: var(--radius-m);
  padding: 14px 16px 12px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-card);
}
.inv-de-confirmat h3 { margin: 0 0 2px; }
.inv-sub { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 10px; line-height: 1.5; }
.inv-card {
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--card);
}
.inv-card.de-confirmat { background: var(--signal-orange-soft); border-color: transparent; }
.inv-card-sus { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.inv-card-sus b { font-size: 14.5px; }
.inv-cod {
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft);
  background: var(--asphalt-100); padding: 1px 6px; border-radius: 4px;
}
.inv-card-jos {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 8px; font-size: 12.5px; color: var(--ink-soft);
}
.inv-card-jos .btn { padding: 6px 14px; font-size: 13px; }
.inv-ok { color: var(--good-green); font-weight: 600; }

/* Comenzile strânse pe zi și camion, cu aceeași mecanică de desfăcut ca turele.
   Rândurile dinăuntru își păstrează dunga de stare, dar fără chenar propriu:
   chenarul e al grupului, iar două chenare unul în altul fac lista să pară
   mai încâlcită decât e. */
/* Despartitorul de zi: o linie, nu o caseta. Casetele sunt pentru camioane --
   daca ziua ar fi tot o caseta, ochiul n-ar mai sti care e nivelul mare si care
   cel mic. Asa, sub fiecare data vin camioanele ei, si se vede dintr-o privire
   unde se termina o zi si incepe alta. */
.com-zi {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 2px 7px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--navy-950);
}
.com-zi::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--asphalt-200);
}
/* Prima zi nu are ce despartii de ce e deasupra ei. */
#comenziLista > .com-zi:first-child { margin-top: 4px; }
/* Fara data in cap, capul casetei are cinci coloane: camion, semne, numar,
   suma, sageata. */
.com-grup > .tour-cap-rand > .tour-head {
  grid-template-columns: minmax(150px, 190px) minmax(0, 1fr) 110px 120px 24px;
}

/* PADDING-UL NU SE PUNE PE .tour-inner. Sertarul se inchide cu
   "grid-template-rows: 0fr", ceea ce duce INALTIMEA la zero -- dar padding-ul
   ramane, iar prin banda aia se vedea dunga colorata a primului rand: o
   liniuta care atarna sub fiecare caseta inchisa. Spatiul se pune pe invelisul
   dinauntru, care dispare odata cu continutul. */
.com-grup .com-linii {
  border-top: 1px solid var(--asphalt-200);
  background: var(--paper);
}
.com-grup .comanda-rand {
  border: none;
  border-left: 3px solid var(--asphalt-200);
  border-radius: 0;
  border-bottom: 1px solid var(--asphalt-200);
  margin-bottom: 0;
  background: transparent;
}
.com-grup .comanda-rand:last-child { border-bottom: none; }
.com-grup-semne { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
@media (max-width: 760px) {
  /* Pe telefon semnele coboara pe randul al doilea al capului (vezi mobile.css);
     tot ce trebuie aici e sa nu impinga latimea. */
  .com-grup-semne { font-size: 11px; }
}

/* „Lipsește din decont" e mai grav decât „n-a ajuns încă": decontul a venit și
   cursa nu e în el. De aia are roșu, nu portocaliu — portocaliul e pentru ce e
   încă în termen. */
.comanda-eticheta.intarziat { background: #fde2e2; color: var(--rosu); }
.com-grup .comanda-rand.intarziat { border-left-color: var(--rosu); }

/* Totalurile din bara de sus, scrise cu aceleași casete ca pe rânduri. Aceeași
   formă și aceeași culoare înseamnă același lucru — altfel ochiul trebuie să
   învețe de două ori acelaș­i cod. */
.com-bara-semne { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.com-bara-semne .comanda-eticheta { font-size: 12px; padding: 4px 11px; }

/* ===========================================================
   CONTA — foaia de declarație
   Rubricile se scriu în suedeză și cu numerele din formular, anume: așa le
   vezi pe ecranul de la Skatteverket când le tastezi, deci nu mai trebuie
   tradus nimic în cap.
   =========================================================== */
.conta-foaie {
  background: var(--card);
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  max-width: 760px;
}
.conta-foaie-cap {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  background: var(--navy-950);
  color: #fff;
  font-size: 13.5px;
}
.conta-foaie-cap b { font-family: var(--font-display); font-size: 16px; }
.conta-foaie-cap span { opacity: .8; font-size: 12px; }
.conta-rand {
  display: grid;
  grid-template-columns: 44px 1fr 130px;
  gap: 12px;
  align-items: center;
  padding: 9px 16px;
  border-top: 1px solid var(--asphalt-200);
  font-size: 13px;
}
.conta-rand.zero { color: var(--ink-soft); }
.conta-rand.total {
  background: var(--swe-blue-soft);
  font-weight: 600;
  border-top: 2px solid var(--swe-blue);
}
.conta-cod {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  color: var(--ink-soft); text-align: center;
  background: var(--asphalt-100); border-radius: 4px; padding: 2px 0;
}
.conta-rand.total .conta-cod { background: var(--swe-blue); color: #fff; }
.conta-suma { text-align: right; font-variant-numeric: tabular-nums; }
.conta-foaie-jos {
  padding: 10px 16px; border-top: 1px solid var(--asphalt-200);
  background: var(--paper); font-size: 12.5px; color: var(--ink-soft);
}
.conta-termen { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); }

.conta-nota {
  max-width: 760px; margin-top: 12px; padding: 11px 14px;
  border-radius: var(--radius-s); font-size: 12.5px; line-height: 1.6;
  background: var(--swe-blue-soft); color: var(--navy-950);
}
.conta-nota.atentie { background: var(--warn-amber-soft); color: var(--warn-amber); }

/* Ce nu se poate face încă. Stă în capul paginii, nu ascuns la subsol. */
.conta-lipsuri {
  max-width: 760px; margin-bottom: 16px; padding: 12px 16px;
  border: 1px solid var(--signal-orange);
  border-left-width: 4px;
  border-radius: var(--radius-m);
  background: var(--signal-orange-soft);
  font-size: 13px;
}
.conta-lipsuri-cap { font-weight: 600; color: var(--signal-orange-dark); margin-bottom: 6px; }
.conta-lipsuri ul { margin: 0; padding-left: 20px; line-height: 1.7; }
.conta-lipsuri em { font-style: normal; color: var(--ink-soft); }

.conta-grup-cap {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); margin: 16px 2px 7px;
}
.conta-furnizor {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 6px;
  background: var(--card); border: 1px solid var(--asphalt-200);
  border-left: 3px solid var(--good-green);
  border-radius: var(--radius-m);
}
.conta-furnizor.fara { border-left-color: var(--signal-orange); }
.cf-nume { flex: 1 1 260px; min-width: 0; font-size: 13.5px; }
.cf-nume i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.conta-regim {
  padding: 7px 10px; border: 1px solid var(--asphalt-300);
  border-radius: 6px; font-size: 12.5px; max-width: 330px;
}
@media (max-width: 760px) {
  .conta-rand { grid-template-columns: 38px 1fr 90px; gap: 8px; padding: 8px 12px; font-size: 12.5px; }
  .conta-regim { max-width: 100%; width: 100%; box-sizing: border-box; }
  .cf-regim { flex: 1 1 100%; min-width: 0; }
  /* Cele trei nume („Declarația europeană") nu incap pe un telefon, iar fara
     asta ieseau cu cativa pixeli peste marginea paginii si mergea toata pagina
     in lateral. Aici se plimba doar banda, ca la tabul de sus. */
  #contaVederi { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #contaVederi .status-tab { white-space: nowrap; }
}
/* Numărul personal și tabelul de impozit, pe rândul șoferului. Caseta e
   îngustă anume: sunt date scurte, iar rândul are deja două date în el. */
.driver-pnr { width: 118px; font-family: var(--font-mono); font-size: 12px; }
.driver-tabel { width: 46px; font-family: var(--font-mono); font-size: 12px; text-align: center; }

/* --- Contractele de muncă --- */
.contract-rand {
  display: grid; grid-template-columns: 1fr 150px auto; align-items: center; gap: 12px;
  padding: 11px 14px; margin-bottom: 6px;
  background: var(--card); border: 1px solid var(--asphalt-200);
  border-left: 3px solid var(--swe-blue); border-radius: var(--radius-m);
}
.ctr-nume { font-size: 13.5px; }
.ctr-nume i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.ctr-cand { font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.ctr-butoane { display: flex; gap: 6px; flex-wrap: wrap; }
/* Formularul: etichetele sunt în suedeză, cum scrie pe hârtie, iar sub ele, cu
   litere mici, ce înseamnă. Fără traducere, jumătate din casete ar fi ghicite. */
.ctr-sectiune {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--navy-950); margin: 16px 0 8px;
  padding-bottom: 5px; border-bottom: 1px solid var(--asphalt-200);
  display: flex; align-items: baseline; gap: 8px;
}
/* Traducerea stă LÂNGĂ cuvântul suedez, nu în celălalt capăt al rândului: acolo
   nu s-ar mai vedea că e explicația lui. Butonul e singurul împins la dreapta. */
.ctr-sectiune i { font-style: normal; font-weight: 400; font-size: 12px; color: var(--ink-soft); }
.ctr-sectiune > .btn { margin-left: auto; }
.ctr-firma-cap > span { display: flex; align-items: baseline; gap: 8px; }
.ctr-firma-cap { margin-top: 0; }
.ctr-firma-rezumat { font-size: 12.5px; color: var(--ink-soft); margin: -2px 0 10px; }
.ctr-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ctr-grid .field { margin: 0; }
.ctr-grid .field > span i {
  font-style: normal; color: var(--ink-soft); font-weight: 400; font-size: 11px;
}
/* Pe suedeza eticheta ESTE explicatia: „Fullständigt namn fullständigt namn" nu
   ajuta pe nimeni. Traducatorul pune limba pe <html>, deci o ascundem de acolo. */
html[lang="sv"] .ctr-grid .field > span i,
html[lang="sv"] .ctr-sectiune i { display: none; }
.ctr-grid textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--asphalt-300);
  border-radius: 6px; font-size: 13px; font-family: inherit; resize: vertical;
}
.ctr-din-vechi {
  display: block; font-style: normal; font-size: 11.5px;
  color: var(--good-green); margin-top: 5px;
}
.ctr-lat { grid-column: span 2; }
.ctr-tot { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .ctr-grid { grid-template-columns: 1fr; }
  .ctr-lat, .ctr-tot { grid-column: auto; }
  .contract-rand { grid-template-columns: 1fr; gap: 8px; }
}

/* --- Comanda deschisă în fereastră --- */
.comanda-rand[data-comanda] { cursor: pointer; }
.comanda-rand[data-comanda]:hover { background: var(--asphalt-100); }
.cmd-cap {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.cmd-drum { font-family: var(--font-display); font-size: 17px; color: var(--navy-950); }
.cmd-sub { font-size: 12.5px; color: var(--ink-soft); margin-top: 2px; }
/* Cele două capete ale cursei, unul lângă altul: așa se citește drumul dintr-o
   privire, în loc de două liste puse una sub alta. */
.cmd-etape { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.cmd-etapa {
  padding: 11px 13px; background: var(--asphalt-100);
  border: 1px solid var(--asphalt-200); border-radius: var(--radius-m);
}
.cmd-etapa-cap {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); margin-bottom: 5px;
}
.cmd-nume { font-weight: 600; font-size: 13.5px; color: var(--navy-950); }
.cmd-adresa { font-size: 12.5px; color: var(--ink-soft); }
.cmd-cand { font-size: 12.5px; color: var(--navy-950); margin-top: 4px; font-variant-numeric: tabular-nums; }
.cmd-bloc { margin-bottom: 14px; }
.cmd-bloc-cap {
  font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); margin-bottom: 6px;
}
.cmd-rand {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--asphalt-200); font-size: 13px;
}
.cmd-rand:last-child { border-bottom: 0; }
.cmd-rand > span { color: var(--ink-soft); }
.cmd-rand > b { text-align: right; color: var(--navy-950); font-weight: 600; }
.cmd-rand i { font-style: normal; color: var(--ink-soft); font-weight: 400; font-size: 11.5px; }
@media (max-width: 760px) {
  .cmd-etape { grid-template-columns: 1fr; }
}

/* --- Termenele din capul tabului Conta --- */
/* Aceeasi latime ca foile de dedesubt: altfel termenele se intind cat pagina,
   iar cifrele stau intr-o coloana ingusta si nu par acelasi lucru. */
.conta-termene { margin-bottom: 14px; max-width: 760px; }
.ctm-cap {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-soft); margin: 0 2px 7px;
}
.ctm-cap i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .75; }
.ctm-lista { display: flex; flex-direction: column; gap: 6px; }
.ctm-rand {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 12px;
  padding: 9px 14px; background: var(--card);
  border: 1px solid var(--asphalt-200); border-left: 3px solid var(--asphalt-300);
  border-radius: var(--radius-m); font-size: 13.5px;
}
.ctm-rand[data-termen-vedere] { cursor: pointer; }
.ctm-rand[data-termen-vedere]:hover { border-color: var(--swe-blue); }
.ctm-rand.aproape { border-left-color: var(--signal-orange); }
.ctm-rand.trecut { border-left-color: var(--signal-red, #dc2626); }
.ctm-data { color: var(--ink-soft); font-size: 12.5px; }
.ctm-ce i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink-soft); }
.ctm-zile { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }
.ctm-rand.aproape .ctm-zile { color: var(--signal-orange-dark); font-weight: 600; }
.ctm-rand.trecut .ctm-zile { color: var(--signal-red, #dc2626); font-weight: 600; }
/* Bara cu perioada: o alegere pentru tot tabul, cu termenul ei la dreapta. */
.conta-bara {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-bottom: 12px;
}
/* Termenul sta langa perioada, nu la marginea paginii: „margin-left: auto”
   de pe .conta-termen il arunca in dreapta, unde nu se leaga de nimic. */
.conta-bara .conta-termen { margin-left: 0; padding-bottom: 10px; }
.conta-bara select {
  padding: 9px 12px; border: 1px solid var(--asphalt-300);
  border-radius: 6px; font-size: 14px; background: var(--card);
}
@media (max-width: 760px) {
  .ctm-rand { grid-template-columns: 78px 1fr; gap: 4px 10px; font-size: 12.5px; padding: 8px 11px; }
  /* Pe telefon „peste 38 de zile" trece pe rândul al doilea, sub text, în loc
     să strângă numele până se rupe în trei. */
  .ctm-zile { grid-column: 2; }
  .ctm-cap i { display: none; }
}

/* --- Fișierul pentru contabilitate --- */
.reg-serii { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.reg-serie {
  display: flex; align-items: baseline; gap: 6px;
  padding: 8px 12px; background: var(--card);
  border: 1px solid var(--asphalt-200); border-radius: var(--radius-m);
  font-size: 12.5px; color: var(--ink-soft);
}
.reg-serie b { font-family: var(--font-mono); font-size: 15px; color: var(--navy-950); }
.reg-serie.total { background: var(--asphalt-100); }
.reg-bifa { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-soft); }
.reg-bifa input { width: 16px; height: 16px; }
/* Caseta contului: un numar de patru cifre n-are nevoie de toata latimea unui
   meniu de regim, iar una lata arata ca ar aștepta un text. */
.conta-regim[data-cont-pentru] { max-width: 96px; text-align: center; letter-spacing: .04em; }
/* Foaia de conturi are patru coloane: cont, nume, debit, credit. Debitul și
   creditul stau alături anume — așa se vede dintr-o privire că fiecare cont
   are o parte, iar cele care au amândouă s-au și închis. */
.conta-foaie-reg .conta-rand { grid-template-columns: 56px 1fr 120px 120px; }
.conta-foaie-reg .conta-cod { text-align: left; padding: 2px 7px; }
.conta-foaie-reg .conta-rand.cap {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-soft); padding-top: 6px; padding-bottom: 6px;
}
@media (max-width: 760px) {
  /* Pe telefon coloanele se string, dar rămân toate patru: pe conturile de
     cheltuială cifra e la debit, pe cele de venit la credit, iar dacă ascund
     una, jumătate din conturi ar apărea goale. */
  .conta-foaie-reg .conta-rand {
    grid-template-columns: 42px 1fr 80px 80px; gap: 3px; font-size: 11.5px;
  }
  /* Sumele mari („2.440.553,25") se lipeau una de alta la 74px. */
  .conta-foaie-reg .conta-suma { font-size: 10.5px; }
  .conta-foaie-reg .conta-nume { overflow: hidden; text-overflow: ellipsis; }
}

/* Codul de TVA e mult mai lat decât un număr de rubrică („ATU19208701" față de
   „39"), deci foaia europeană are prima coloană pe măsură. Cu lățimea celeilalte
   foi, codul ieșea peste text. */
.conta-foaie-eu .conta-rand { grid-template-columns: 150px 1fr 130px; }
.conta-foaie-eu .conta-cod { text-align: left; padding: 2px 7px; }
@media (max-width: 760px) {
  .conta-foaie-eu .conta-rand { grid-template-columns: 1fr 90px; }
  .conta-foaie-eu .conta-nume { display: none; }
}

/* Rândurile de sub-taburi („Toate / Neplătite / Plătite…") sunt un flex simplu:
   pe calculator încap, pe telefon al patrulea buton ieșea prin marginea din
   dreapta și trăgea toată pagina după el — te uitai la Facturi și pagina se
   mișca lateral. Acum banda de sub-taburi se plimbă singură, iar pagina stă
   pe loc. */
@media (max-width: 760px) {
  /* Bara de la „Șoferi" e „inline-flex; width:auto" ca să nu lase o bandă
     goală pe calculator. Pe telefon însă o cutie inline-flex crește după
     conținut, deci rulajul de mai jos n-avea ce să oprească: de la al
     cincilea sub-tab, pagina se mișca lateral. Aici o strângem în lățimea
     ecranului, ca să se plimbe banda, nu pagina. */
  .soferi-taburi { display: flex; max-width: 100%; }
  .period-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .period-tabs::-webkit-scrollbar { display: none; }
  .period-tabs > * { flex: 0 0 auto; }
}

/* Comisionul de plată anticipată, sub lista de ieșiri din CashFlow. E scris ca
   notă, nu ca rând de cheltuială cu bară: banii au fost reținuți din virament,
   iar intrările de deasupra sunt deja cele nete. Un rând normal l-ar face să
   pară o plată în plus, adică exact greșeala pe care o repară. */
.cf-nota-comision {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--asphalt-200);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.cf-nota-comision b {
  font-family: var(--font-mono);
  color: var(--ink);
  white-space: nowrap;
}
.cf-nota-comision i {
  grid-column: 1 / -1;
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.55;
}

/* Facturile anulate de o notă de credit venită în altă perioadă, sub decont.
   Sunt puține și trebuie citite una câte una — număr, dată, din ce perioadă în
   ce perioadă sare — deci rând pe rând, nu îngrămădite într-o frază. */
.conta-storno-rand {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--asphalt-200);
  font-size: 12.5px;
}
.conta-storno-rand .mono { font-family: var(--font-mono); color: var(--ink-soft); }
.conta-storno-rand b { font-family: var(--font-mono); white-space: nowrap; }
@media (max-width: 760px) {
  .conta-storno-rand { grid-template-columns: 1fr auto; }
}

/* ---------- Banii de concediu (LÖNEBESKED) ---------- */

/* Ce iese din ce ai scris: brutul, contribuția și netul, sub caseta de
   semesterlön. Stau pe un rând, la vedere, ca să prinzi o cifră greșită
   înainte de a scoate hârtia — nu după. */
.bc-socotit {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  align-items: baseline;
  margin: -4px 0 14px;
  padding: 10px 12px;
  background: var(--asphalt-50, #f7f9fb);
  border-radius: var(--radius-s);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.bc-socotit b {
  font-family: var(--font-mono);
  color: var(--ink);
  margin-left: 4px;
}
.bc-socotit i {
  flex-basis: 100%;
  font-style: normal;
  font-size: 11.5px;
}

/* Capetele care se deschid („Månadslön och traktamente", „Ackumulerat").
   Sunt pline de zerouri pe fluturașul de concediu, deci stau strânse: le
   deschizi doar dacă ai ceva de pus acolo. */
.ctr-sectiune.bc-pliant {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Cele nouă trepte de diurnă: numele, tariful, câte zile, cât. Tariful nu se
   scrie — vine din setările de diurne, ca să nu existe două adevăruri. */
.bc-diurne { margin-top: 8px; }
.bc-diurna-rand {
  display: grid;
  grid-template-columns: 1fr 60px 90px 110px;
  gap: 8px;
  align-items: center;
  padding: 3px 0;
  font-size: 12.5px;
}
.bc-diurna-rand .bc-tarif {
  font-family: var(--font-mono);
  color: var(--ink-soft);
  text-align: right;
}
.bc-diurna-rand input {
  width: 100%;
  padding: 5px 8px;
  font-family: var(--font-mono);
  text-align: right;
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-s);
  background: var(--card, #fff);
  color: var(--ink);
}
@media (max-width: 760px) {
  .bc-diurna-rand { grid-template-columns: 1fr 48px 1fr 1fr; font-size: 12px; }
}

/* Rândurile de scăzut de la banii de concediu (biletele la vapor): denumirea
   lată, suma îngustă și aliniată la dreapta, ca o coloană de bani. */
.ctr-sectiune.bc-cap-scaderi {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.bc-scadere-rand {
  display: grid;
  grid-template-columns: 1fr 130px auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.bc-scadere-rand input {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--asphalt-200);
  border-radius: var(--radius-s);
  background: var(--card, #fff);
  color: var(--ink);
  font-size: 13.5px;
}
.bc-scadere-rand input[data-bc-scadere-suma] { font-family: var(--font-mono); text-align: right; }
.bc-nota-scaderi { margin: 2px 0 12px; }
@media (max-width: 760px) {
  .bc-scadere-rand { grid-template-columns: 1fr 96px auto; }
}

/* Cererea de cont recunoscută după nume: fișa ta pentru omul ăla e deja aleasă
   în listă, iar rândul ăsta spune de ce — ca să nu apeși „Aprobă" pe ghicite. */
.pending-potrivire {
  font-size: 11.5px;
  color: var(--signal-green, #1c7c4c);
  margin-top: 4px;
  line-height: 1.45;
}

/* ===========================================================================
   ECRANUL DE START
   ---------------------------------------------------------------------------
   Logo-ul, „DESTINY AB” si camionul de pe fasia de pe Acasa, pe o sosea, cat
   se deschide aplicatia. Apoi camionul pleaca in viteza si ecranul urca: dunga
   lui galbena de jos se opreste fix peste dunga galbena a barei de sus.
   Markup-ul e in templates/_start.html, miscarea in static/js/start.js.
   Totul se misca doar cu transform si opacity -- placa video, 60 de cadre.
   =========================================================================== */
.start-ecran {
  position: fixed; inset: 0; z-index: 6000;
  display: grid; place-items: center;
  color: #fff;
  /* aceeasi culoare ca bara de sus, pe fiecare tema */
  background: linear-gradient(160deg, #005293 0%, #003d70 100%);
  will-change: transform;
}
html[data-theme="dark"] .start-ecran { background: linear-gradient(160deg, #10243a 0%, #0a1725 100%); }
.start-ecran::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 520px at 50% 40%, rgba(80, 150, 220, .22), transparent 62%);
}
.start-ecran::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; background: var(--swe-yellow); }
.start-ecran.pleaca { animation: startPleaca .72s cubic-bezier(.76, 0, .24, 1) forwards; }
@keyframes startPleaca { to { transform: translateY(calc(-100% - 6px)); } }
.start-ecran.ascuns { display: none; }
/* cat sta deasupra, aplicatia de dedesubt nu se poate atinge si nu se citeste */
html.cu-start body { overflow: hidden; }

.start-centru { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; width: min(440px, 100%); }
.start-logo { position: relative; width: 104px; height: 104px; }
.start-logo img {
  position: relative; z-index: 1; width: 104px; height: 104px; border-radius: 50%; display: block;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .4);
  opacity: 0; transform: scale(.55) rotate(-14deg);
  animation: stLogo .8s cubic-bezier(.34, 1.56, .64, 1) .05s forwards;
}
@keyframes stLogo { to { opacity: 1; transform: none; } }
.start-inel { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--swe-yellow); opacity: 0; will-change: transform, opacity; animation: stInel 2.2s cubic-bezier(.2, .6, .3, 1) .45s infinite; }
.start-inel.doi { animation-delay: 1.55s; }
@keyframes stInel { 0% { opacity: .9; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.75); } }

.start-marca { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: .14em; display: flex; height: 40px; overflow: hidden; }
.start-marca span { display: inline-block; transform: translateY(110%); animation: stLitera .6s cubic-bezier(.2, .9, .25, 1.15) forwards; animation-delay: calc(.3s + var(--i) * 38ms); }
.start-marca .gol { width: .35em; }
@keyframes stLitera { to { transform: none; } }

.start-scena { position: relative; width: 320px; max-width: 100%; height: 96px; }
.start-sosea {
  position: absolute; left: 0; right: 0; bottom: 8px; height: 12px; border-radius: 6px; overflow: hidden;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
  transform: scaleX(0); transform-origin: left center;
  animation: stSosea .7s cubic-bezier(.65, 0, .35, 1) .35s forwards;
}
@keyframes stSosea { to { transform: none; } }
/* capetele soselei se pierd in fundal -- cu doua umbre fixe, nu cu masca:
   o masca peste ceva care se misca se redeseneaza la fiecare cadru */
.start-sosea::before, .start-sosea::after { content: ""; position: absolute; top: 0; bottom: 0; width: 46px; z-index: 1; }
.start-sosea::before { left: 0; background: linear-gradient(90deg, #003d70, transparent); }
.start-sosea::after { right: 0; background: linear-gradient(-90deg, #003d70, transparent); }
html[data-theme="dark"] .start-sosea::before { background: linear-gradient(90deg, #0c1b2c, transparent); }
html[data-theme="dark"] .start-sosea::after { background: linear-gradient(-90deg, #0c1b2c, transparent); }
.start-dungi { position: absolute; top: 5px; left: 0; width: 200%; height: 2px; will-change: transform; background: repeating-linear-gradient(90deg, var(--swe-yellow) 0 18px, transparent 18px 34px); animation: stDungi .5s linear infinite; }
@keyframes stDungi { to { transform: translateX(-34px); } }

/* Camionul: acelasi desen ca pe fasia de pe Acasa (drum.js). */
.start-camion { position: absolute; left: 50%; bottom: 13px; width: 210px; margin-left: -118px; opacity: 0; transform: translateX(-280px); animation: stCamionIntra 1s cubic-bezier(.16, 1, .3, 1) .55s forwards; }
.start-camion svg { display: block; width: 100%; height: auto; overflow: visible; will-change: transform; animation: stSuspensie .42s ease-in-out infinite alternate; }
@keyframes stCamionIntra { 0% { opacity: 0; transform: translateX(-280px); } 15% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes stSuspensie { from { transform: translateY(0); } to { transform: translateY(-1.2px); } }
.start-ecran.pleaca .start-camion { animation: stCamionPleaca .62s cubic-bezier(.55, 0, .85, .35) forwards; }
.start-ecran.pleaca .start-camion svg { animation: stIncline .62s ease-in forwards; }
@keyframes stCamionPleaca { from { opacity: 1; transform: none; } to { opacity: 1; transform: translateX(110vw); } }
@keyframes stIncline { to { transform: skewX(-7deg) scaleX(1.04); } }
.start-viteza { position: absolute; left: -66px; top: 16px; width: 66px; height: 36px; opacity: 0; }
.start-viteza b { position: absolute; right: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85)); }
.start-viteza b:nth-child(1) { top: 4px; width: 58px; }
.start-viteza b:nth-child(2) { top: 16px; width: 38px; }
.start-viteza b:nth-child(3) { top: 28px; width: 50px; }
.start-ecran.pleaca .start-viteza { animation: stViteza .62s ease-out forwards; }
@keyframes stViteza { 0% { opacity: 0; transform: scaleX(.3); transform-origin: right; } 30% { opacity: 1; } 100% { opacity: .9; transform: scaleX(1.4); transform-origin: right; } }

.start-stare { position: relative; height: 20px; width: 100%; text-align: center; font-size: 13px; color: rgba(255, 255, 255, .82); }
.start-stare span { position: absolute; left: 0; right: 0; opacity: 0; transform: translateY(8px); transition: opacity .35s, transform .35s; }
.start-stare span.acum { opacity: 1; transform: none; }
.start-stare span.dus { opacity: 0; transform: translateY(-8px); }
.start-bara { width: 180px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.start-bara i { display: block; height: 100%; background: var(--swe-yellow); transform: scaleX(0); transform-origin: left; transition: transform .5s cubic-bezier(.3, .7, .3, 1); }

/* Cu blocarea pornita, ecranul de start e si ecranul de blocare: in locul
   mesajelor, butonul de amprenta. Camionul sta pe loc, cu motorul pornit. */
.start-blocare { display: none; width: min(300px, 100%); text-align: center; }
.start-ecran.cu-blocare .start-blocare { display: block; animation: stBlocare .4s ease .2s both; }
.start-ecran.cu-blocare .start-stare, .start-ecran.cu-blocare .start-bara { display: none; }
.start-ecran.cu-blocare .start-dungi { animation-duration: 1.6s; }
@keyframes stBlocare { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.start-blocare .lock-sub { margin: 0 0 14px; }
.start-blocare .btn-primary { width: 100%; justify-content: center; }

.start-ecran.scurt .start-marca span { animation-delay: calc(.05s + var(--i) * 18ms); animation-duration: .4s; }
.start-ecran.scurt .start-logo img { animation-duration: .5s; animation-delay: 0s; }
.start-ecran.scurt .start-sosea { animation-delay: .05s; animation-duration: .4s; }
.start-ecran.scurt .start-camion { animation-delay: .1s; animation-duration: .5s; }

/* Fasia de drum de pe Acasa sta pe loc cat ecranul de start e deasupra: nu se
   vede, deci n-are de ce sa lucreze placa video pentru ea. */
.drum.drum-pauza, .drum.drum-pauza * { animation-play-state: paused !important; }

/* Contururile gri de pe Acasa, pana vin cifrele. */
.sk { position: relative; overflow: hidden; display: block; background: var(--asphalt-200); border-radius: 6px; opacity: .55; }
html[data-theme="dark"] .sk { background: rgba(255, 255, 255, .07); opacity: 1; }
.sk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .55) 50%, transparent 80%); transform: translateX(-100%); animation: skLuciu 1.25s ease-in-out infinite; }
html[data-theme="dark"] .sk::after { background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .08) 50%, transparent 80%); }
@keyframes skLuciu { to { transform: translateX(100%); } }
.sk-alerta { height: 46px; border-radius: var(--radius-s); margin-bottom: 8px; }
.sk-tile { pointer-events: none; cursor: default; }
/* cand vin datele prima oara, apar in cascada, nu deodata */
.intra-cascada { animation: skIntra .45s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes skIntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .start-ecran *, .sk::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .start-ecran.pleaca { animation: stDispare .3s ease forwards; }
  @keyframes stDispare { to { opacity: 0; } }
  .intra-cascada { animation: none; }
}

/* ---------- Plăți → PDF noi ----------
   Cardurile folosesc forma celor din Nerecunoscute (.nerec-*), ca sa arate
   la fel; aici doar ce e in plus: suma in dreapta si dunga albastra. */
.pn-card { border-left-color: var(--navy-700, #1e3a5f); }
.pn-suma {
  font-family: var(--font-mono);
  font-size: 15px; font-weight: 600;
  color: var(--navy-950);
  white-space: nowrap;
}
.pn-suma .cur { margin-left: 4px; font-size: 12px; color: var(--ink-soft); }
.pn-doc {
  color: var(--navy-800, #16304f);
  text-decoration: underline;
  word-break: break-all;            /* numele de atasament n-au spatii */
}