/* Stil „Tabela de plecări”: panouri grafit, cifre tabelare, segmente perforate.
   Galbenul e rezervat pentru ce s-a schimbat sau cere atenție; roșul doar pentru critic / pierdere.
   Tema întunecată e implicită (folosire seara); tema luminoasă se alege din meniu (data-theme="light"). */
:root {
  --fundal: #0b0d10;
  /* Lumină ambientală peste cerneală: grafit-verzui din colțul stânga-sus, o urmă rece în dreapta; fixă la derulare */
  --fundal-ambient: radial-gradient(ellipse 90% 75% at 0% 0%, rgb(86 102 104 / 0.6), transparent 75%),
    radial-gradient(ellipse 60% 50% at 100% 0%, rgb(70 64 96 / 0.22), transparent 70%);
  /* Butoanele secundare și comutatoarele: pastile translucide, fără contur (ca în playerele video) */
  --ton: rgb(255 255 255 / 0.1);
  --ton-hover: rgb(255 255 255 / 0.18);
  --ton-despartitor: rgb(255 255 255 / 0.2);
  --suprafata: #16181c;
  --suprafata-2: #1e2126;
  --linie: #2a2e35;
  --linie-tare: #3a3f47;
  --text: #f2f2ef;
  --text-slab: #a0a4ab;
  --accent: #f2f2ef;          /* butonul principal: hârtie pe cerneală */
  --accent-text: #0b0d10;
  --legatura: #f2f2ef;
  --galben: #ffd400;          /* fundal pentru schimbare / atenție */
  --galben-text: #1a1600;
  --ok: #5fd38d;
  --ok-fundal: #15291e;
  --eroare: #ff6a5e;
  --eroare-fundal: #2c1513;
  --avertisment: #ffd400;     /* text de atenție */
  --avertisment-fundal: #2a2508;
  --info-fundal: #1b1f26;
  /* Scara de mărimi: 7 trepte pentru text, 5 pentru cifrele și titlurile mari. Nicio altă mărime în rem. */
  --m-eticheta: 0.75rem;          /* etichete cu majuscule, chip-uri */
  --m-mic: 0.78125rem;            /* detalii, bula formulei */
  --m-nota: 0.8125rem;            /* note, text secundar, butoane mici */
  --m-tabel: 0.84375rem;          /* tabele, câmpuri */
  --m-text: 0.875rem;             /* textul de bază, meniul */
  --m-subtitlu: 0.9375rem;        /* logo, rânduri de setări, rezultatul din P&L */
  --m-accent: 1.0625rem;          /* sume evidențiate în text, cifre KPI pe telefon */
  --m-cifra-mica: 1.125rem;       /* segmentele biletului pe telefon */
  --m-titlu: 1.25rem;             /* titlul paginii */
  --m-cifra: 1.375rem;            /* segmentele biletului */
  --m-cifra-mare-mobil: 1.75rem;  /* cifra principală pe telefon */
  --m-cifra-mare: 2rem;           /* cifra principală a biletului */
  --raza: 10px;
  --raza-mica: 5px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-titlu: var(--font);  /* un singur font; titlurile se deosebesc prin grosime și mărime */
  /* Grafice: două culori stinse (apă: venit, disponibil, marjă; lavandă: costuri), apoi neutrele de la hârtie la grafit.
     Roșul doar pentru pierdere; galbenul doar pentru ce cere atenție (ex. cont nemapat), niciodată o serie obișnuită. */
  --viz-apa: #4fb0a8; --viz-lavanda: #958ad8;
  --viz-negativ: #e66767;
  --viz-hartie: #f2f2ef; --viz-cenusa: #b4b8be; --viz-otel: #7d838d; --viz-grafit: #4a4f57;
  --viz-grid: #262a30; --viz-axa: #454a52; --viz-text: #f2f2ef; --viz-muted: #a0a4ab;
  /* Materialul barelor plutitoare (translucid, cu blur) și relieful panourilor */
  --material: rgb(11 13 16 / 0.72);
  --relief: inset 0 1px 0 rgb(255 255 255 / 0.045);
  --umbra-panou: 0 18px 40px rgb(0 0 0 / 0.45);
  --rand-hover: rgb(255 255 255 / 0.035);
  /* Mișcarea: un arc fără depășire (amortizare 1.0, răspuns 0.35 s), ca la Apple */
  --arc: cubic-bezier(0.2, 0.8, 0.2, 1);
  --arc-durata: 450ms;
  color-scheme: dark;
  font-family: var(--font);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root { --arc: linear(0, 0.075 5.6%, 0.227 11.1%, 0.389 16.7%, 0.536 22.2%, 0.656 27.8%, 0.75 33.3%, 0.821 38.9%,
    0.873 44.4%, 0.938 55.6%, 0.971 66.7%, 0.986 77.8%, 0.994 88.9%, 1); }
}
@supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } }
:root[data-theme="light"] {
  --fundal: #e6e8eb;
  --fundal-ambient: radial-gradient(ellipse 85% 65% at 0% 0%, rgb(255 255 255 / 0.55), transparent 72%),
    radial-gradient(ellipse 55% 45% at 100% 0%, rgb(214 220 232 / 0.5), transparent 70%);
  --ton: rgb(16 24 40 / 0.06);
  --ton-hover: rgb(16 24 40 / 0.11);
  --ton-despartitor: rgb(16 24 40 / 0.16);
  --suprafata: #ffffff;
  --suprafata-2: #f2f3f5;
  --linie: #dcdfe3;
  --linie-tare: #c3c7cd;
  --text: #0b0d10;
  --text-slab: #555a63;
  --accent: #0b0d10;
  --accent-text: #ffffff;
  --legatura: #0b0d10;
  --ok: #157a43;
  --ok-fundal: #e3f3ea;
  --eroare: #c8261b;
  --eroare-fundal: #fdeceb;
  --avertisment: #7a5a00;
  --avertisment-fundal: #fff6cc;
  --info-fundal: #eef0f3;
  --fundal-info-semn: #555a63;
  --viz-apa: #2a8a80; --viz-lavanda: #6a5cc8;
  --viz-negativ: #e34948;
  --viz-hartie: #0b0d10; --viz-cenusa: #4a4f57; --viz-otel: #848a93; --viz-grafit: #c3c7cd;
  --viz-grid: #e6e8eb; --viz-axa: #b9bdc4; --viz-text: #0b0d10; --viz-muted: #555a63;
  --material: rgb(230 232 235 / 0.74);
  --relief: 0 1px 2px rgb(16 24 40 / 0.05), 0 0 0 1px rgb(16 24 40 / 0.035);
  --umbra-panou: 0 18px 40px rgb(16 24 40 / 0.16);
  --rand-hover: rgb(16 24 40 / 0.03);
  color-scheme: light;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--fundal-ambient), var(--fundal); background-attachment: fixed; color: var(--text); font-size: var(--m-text); line-height: 1.45;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
::selection { background: var(--galben); color: var(--galben-text); }
html { scrollbar-color: var(--linie-tare) var(--fundal); }
:focus-visible { outline: 2px solid var(--galben); outline-offset: 2px; border-radius: 3px; }
a { color: var(--legatura); text-decoration-color: var(--linie-tare); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
h1, h2, h3 { font-family: var(--font-titlu); line-height: 1.15; }
h1 { font-size: var(--m-titlu); font-weight: 700; letter-spacing: -0.01em; margin: 0; }
h2 { font-size: var(--m-nota); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.9rem; }
h3 { font-size: var(--m-mic); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-slab); margin: 1.4rem 0 0.5rem; }
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.875em; }
.ic { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* „Sari la conținut”: primul Tab al paginii, ascuns până primește focus */
.sari { position: fixed; left: 1rem; top: 0.75rem; z-index: 60; padding: 0.55rem 1rem; border-radius: var(--raza-mica);
  background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none;
  transform: translateY(-200%); transition: transform 150ms ease-out; }
.sari:focus { transform: none; }
.continut:focus { outline: none; }

/* ---------- Cadrul: meniu lateral pe ecran mare, bară sus pe telefon ---------- */
.cadru { min-height: 100vh; }
.bara-laterala { display: none; }
/* Bara de sus e un material translucid: conținutul trece pe dedesubt; marginea apare doar după ce derulezi. */
.antet-mobil {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  padding: 0.65rem 1rem; background: var(--fundal-ambient), var(--material); background-attachment: fixed; -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.logo { font-family: var(--font-titlu); font-weight: 700; font-size: var(--m-subtitlu); letter-spacing: 0.05em;
  text-decoration: none; color: var(--text); white-space: nowrap; }
.logo span { color: var(--galben); }
:root[data-theme="light"] .logo span { color: var(--text); background: var(--galben); padding: 0 0.2em; border-radius: 2px; }
.meniu summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: var(--raza-mica); font-size: var(--m-accent); transition: background 150ms ease-out, transform 100ms ease-out; }
.meniu summary:active { transform: scale(0.94); }
.meniu summary::-webkit-details-marker { display: none; }
.meniu summary .ic { grid-area: 1 / 1; transition: opacity 200ms ease-out, transform var(--arc-durata) var(--arc); }
.meniu .ic-inchide, .meniu[open]:not(.inchide) .ic-deschide { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.meniu[open]:not(.inchide) .ic-inchide { opacity: 1; transform: none; }
.meniu[open]:not(.inchide) summary { background: var(--suprafata-2); }
/* Meniul coboară din bară și urcă înapoi pe același drum; pagina de dedesubt se întunecă (umbra mare, tăiată deasupra). */
.meniu > .navigare { position: absolute; left: 0; right: 0; top: 100%; padding: 0.5rem 0.75rem 1rem;
  background: var(--fundal); border-bottom: 1px solid var(--linie); clip-path: inset(0 -100vmax -100vmax);
  box-shadow: 0 16px 32px rgb(0 0 0 / 0.35), 0 0 0 100vmax rgb(0 0 0 / 0.45);
  transition: opacity 220ms ease-out, transform var(--arc-durata) var(--arc), box-shadow 260ms ease-out; }
.meniu.inchide > .navigare { opacity: 0; transform: translateY(-0.75rem); box-shadow: 0 16px 32px rgb(0 0 0 / 0), 0 0 0 100vmax rgb(0 0 0 / 0);
  transition-duration: 180ms, 220ms, 220ms; transition-timing-function: ease-in; }
@starting-style {
  .meniu[open] > .navigare { opacity: 0; transform: translateY(-0.75rem); box-shadow: 0 16px 32px rgb(0 0 0 / 0), 0 0 0 100vmax rgb(0 0 0 / 0); }
}
.navigare { display: flex; flex-direction: column; gap: 1px; }
.navigare a { padding: 0.55rem 0.8rem; border-radius: var(--raza-mica); text-decoration: none; color: var(--text-slab);
  font-family: var(--font-titlu); font-weight: 500; font-size: var(--m-text); letter-spacing: 0.01em;
  transition: background 150ms ease-out, color 150ms ease-out, transform 100ms ease-out; }
.navigare a:hover { color: var(--text); background: var(--suprafata); }
.navigare a:active { transform: scale(0.98); }
/* „Ieșire” e un formular POST, dar arată ca un link din meniu. */
.navigare .iesire { margin: 0; display: flex; }
.navigare .iesire button { flex: 1; justify-content: flex-start; padding: 0.55rem 0.8rem; border-radius: var(--raza-mica);
  background: none; color: var(--text-slab); font-family: var(--font-titlu); font-weight: 500; font-size: var(--m-text); letter-spacing: 0.01em; }
.navigare .iesire button:hover { color: var(--text); background: var(--suprafata); }

/* ---------- Pagina de login ---------- */
.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; }
.login { width: 100%; max-width: 24rem; }
.login .logo { display: block; text-align: center; margin-bottom: 1.5rem; font-size: var(--m-accent); }
.login .card { padding: 1.5rem; }
.login h1 { font-size: var(--m-titlu); margin: 0 0 0.25rem; }
.login .formular { gap: 1rem; margin-bottom: 0; }
.login .formular label { font-size: var(--m-text); gap: 0.4rem; }
.login input { font-size: var(--m-subtitlu); padding: 0.75rem 0.9rem; min-height: 2.9rem; }
.login input[type="password"] { letter-spacing: 0.15em; }
.login button[type="submit"] { width: 100%; min-height: 2.9rem; margin-top: 0.5rem; font-size: var(--m-subtitlu); }
.login .mesaj { margin: 0.75rem 0 0; }
/* Ochiul stă în câmp, în dreapta; câmpul își lasă loc pentru el. */
.camp-parola { position: relative; display: block; }
.camp-parola input { padding-right: 3rem; }
.arata-parola { position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%); width: 2.3rem; height: 2.3rem; padding: 0;
  display: grid; place-items: center; border-radius: var(--raza-mica); background: none; color: var(--text-slab); }
.arata-parola:hover { background: var(--ton); color: var(--text); }
.arata-parola:active { transform: translateY(-50%) scale(0.94); }
.arata-parola .ic { width: 1.2rem; height: 1.2rem; }
.arata-parola .ic-ochi-taiat,.arata-parola[aria-pressed="true"] .ic-ochi { display: none; }
.arata-parola[aria-pressed="true"] .ic-ochi-taiat { display: block; }
.navigare a[aria-current="page"] { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.navigare .separator { height: 1px; background: var(--linie); margin: 0.6rem 0.8rem; }
/* Comutatorul de temă: doar pictograma (soare în tema întunecată, lună în cea luminoasă), lângă logo. */
.antet-actiuni { display: flex; align-items: center; gap: 0.25rem; }
.comuta-tema { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 0;
  border-radius: var(--raza-mica); background: transparent; color: var(--text-slab); font-size: var(--m-accent); }
.comuta-tema:hover { color: var(--text); background: var(--suprafata-2); }
.comuta-tema .ic { grid-area: 1 / 1; transition: opacity 200ms ease-out, transform var(--arc-durata) var(--arc); }
.comuta-tema .ic-luna, :root[data-theme="light"] .comuta-tema .ic-soare { opacity: 0; transform: rotate(-90deg) scale(0.6); }
:root[data-theme="light"] .comuta-tema .ic-luna { opacity: 1; transform: none; }
.nav-inactiv { color: var(--text-slab) !important; opacity: 0.6; }

.continut { max-width: 1440px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
@media (min-width: 1024px) {
  .cadru { display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
  .antet-mobil { display: none; }
  .bara-laterala { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
    padding: 1.75rem 0.9rem 1.25rem; border-right: 1px solid var(--linie); }
  .bara-laterala .bara-sus { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin: -0.55rem 0 1.05rem; padding-left: 0.8rem; }
  .continut { padding: 2rem 3rem 4rem; width: 100%; }
}

/* ---------- Titlul paginii, selector de lună, comutator ---------- */
.rand-titlu { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem 1.5rem; flex-wrap: wrap; }
.continut > .rand-titlu, .continut > h1 { margin-bottom: 1.4rem; }
/* Pe ecran mare, rândul de titlu cu comenzi (luna, Lună/YTD…) rămâne sus, ca un material translucid. */
@media (min-width: 1024px) {
  .continut > .rand-titlu:has(form, .comutator) { position: sticky; top: 0; z-index: 20; margin: 0 -3rem 0.6rem;
    padding: 0.8rem 3rem; background: var(--fundal-ambient), var(--material); background-attachment: fixed; -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%); }
  .continut > .rand-titlu:first-child:has(form, .comutator) { margin-top: -2rem; padding-top: 1.4rem; }
}
/* Marginea de sub barele plutitoare apare doar când conținutul trece pe dedesubt (după primii pixeli derulați). */
@supports (animation-timeline: scroll()) {
  .antet-mobil, .continut > .rand-titlu:has(form, .comutator) {
    animation: margine-derulare linear both; animation-timeline: scroll(root); animation-range: 0 48px; }
  @keyframes margine-derulare {
    from { box-shadow: 0 1px 0 transparent, 0 10px 18px -12px transparent; }
    to { box-shadow: 0 1px 0 var(--linie), 0 10px 18px -12px rgb(0 0 0 / 0.35); }
  }
}
@supports not (animation-timeline: scroll()) { .antet-mobil { box-shadow: 0 1px 0 var(--linie); } }
.card .rand-titlu { margin-bottom: 0.9rem; }
.card .rand-titlu h2 { margin: 0; }
.inapoi { margin: 0 0 0.6rem; font-size: var(--m-tabel); }
.inapoi a { color: var(--text-slab); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.inapoi a:hover { color: var(--text); }
.continut > .nota { margin: -0.6rem 0 1.4rem; }
.continut > h1 + .nota { margin-top: 0.5rem; }
.selector { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.selector select, .formular-inline > select { width: auto; }
/* Lista cu luni: unde browserul o permite (appearance: base-select), lista e a aplicației și coboară din câmp
   (estompare + alunecare scurtă), apoi urcă înapoi pe același drum. Altundeva rămâne lista sistemului. */
@supports (appearance: base-select) {
  select[name="luna"], select[name="luna"]::picker(select) { appearance: base-select; }
  select[name="luna"] { display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer;
    border: 0; border-radius: 999px; background: var(--ton); padding-inline: 1rem 0.9rem; }
  select[name="luna"]:hover { background: var(--ton-hover); }
  select[name="luna"]::picker-icon { content: ""; width: 0.45rem; height: 0.45rem; margin-top: -0.2rem;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg);
    color: var(--text-slab); transition: transform var(--arc-durata) var(--arc), margin-top var(--arc-durata) var(--arc); }
  select[name="luna"]:open::picker-icon { transform: rotate(225deg); margin-top: 0.2rem; }
  select[name="luna"]::picker(select) {
    margin-top: 0.35rem; padding: 0.3rem; max-height: min(22rem, 60vh); overflow-y: auto;
    background: var(--suprafata-2); color: var(--text); border: 1px solid var(--linie-tare); border-radius: var(--raza);
    box-shadow: var(--umbra-panou); transform-origin: top;
    transition: opacity 180ms ease-out, transform var(--arc-durata) var(--arc),
      overlay 220ms ease-out allow-discrete, display 220ms ease-out allow-discrete;
  }
  select[name="luna"]:not(:open)::picker(select) { opacity: 0; transform: translateY(-6px) scale(0.98); }
  select[name="luna"].aleasa::picker(select) { transition: none; }
  @starting-style { select[name="luna"]:open::picker(select) { opacity: 0; transform: translateY(-6px) scale(0.98); } }
  select[name="luna"] option { padding: 0.45rem 0.7rem; border-radius: var(--raza-mica); font-size: var(--m-tabel); white-space: nowrap; }
  select[name="luna"] option:hover, select[name="luna"] option:focus-visible { background: var(--linie); outline: none; }
  select[name="luna"] option:checked { font-weight: 600; }
  select[name="luna"] option::checkmark { order: 1; margin-left: auto; color: var(--text-slab); }
}
.comutator { display: inline-flex; border-radius: 999px; background: var(--ton); overflow: hidden; }
.comutator button, .comutator .buton { position: relative; border-radius: 0; background: transparent; color: var(--text-slab); padding: 0.5rem 1rem; }
/* Despărțitor subțire între segmente (ca la apreciere / neapreciere), ascuns lângă segmentul activ */
.comutator > * + *::before { content: ""; position: absolute; left: 0; top: 25%; bottom: 25%; width: 1px; background: var(--ton-despartitor); }
.comutator > .activ::before, .comutator > .activ + *::before { display: none; }
.comutator button:active, .comutator .buton:active { transform: none; background: var(--ton-hover); }
/* Butonul activ „alunecă” spre noua poziție la schimbarea paginii (tranziția de vedere, mai jos) */
.continut > .rand-titlu .comutator[aria-label="Perioadă"] .activ { view-transition-name: comutator-perioada; }
.continut > .rand-titlu .comutator[aria-labelledby="eticheta-asociati"] .activ { view-transition-name: comutator-asociati; }
.comutator button:hover, .comutator .buton:hover { color: var(--text); background: var(--ton-hover); }
.comutator button.activ, .comutator .buton.activ { background: var(--accent); color: var(--accent-text); }
.comenzi-titlu { display: flex; gap: 0.75rem 1rem; flex-wrap: wrap; align-items: center; }
.comutator-grup { display: inline-flex; gap: 0.5rem; align-items: center; }
.comutator-eticheta { font-size: var(--m-nota); color: var(--text-slab); }

/* ---------- Panouri ---------- */
.card { background: var(--suprafata); border-radius: var(--raza); padding: 1.25rem 1.4rem; margin-bottom: 1.25rem;
  box-shadow: var(--relief); }
.card > :last-child { margin-bottom: 0; }
.card-link { display: block; text-decoration: none; color: var(--text); transition: background 150ms ease-out, transform 100ms ease-out; }
.card-link:hover { background: var(--suprafata-2); }
.card-link:active { transform: scale(0.99); }
.card-link h2 { display: flex; justify-content: space-between; align-items: center; }
.card-link p { margin: 0; color: var(--text-slab); }
.grila-carduri { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.grila-carduri .card { margin: 0; }
.nota { color: var(--text-slab); font-size: var(--m-nota); font-weight: 400; }
.valoare-mare { font-family: var(--font-titlu); font-size: var(--m-accent); font-weight: 700; letter-spacing: -0.01em; }

/* ---------- Mesaje și alerte ---------- */
.mesaj { display: block; position: relative; padding: 0.75rem 1rem 0.75rem 3.1rem; border-radius: var(--raza-mica);
  margin: 0 0 1.25rem; background: var(--suprafata); box-shadow: var(--relief); animation: apare 360ms var(--arc) both; }
@keyframes apare { from { opacity: 0; transform: translateY(-0.4rem); } }
.mesaj::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 2.3rem; border-radius: var(--raza-mica) 0 0 var(--raza-mica);
  background: var(--text-slab) center / 1.1rem no-repeat; }
.mesaj-ok { color: var(--text); }
.mesaj-ok::before { background-color: var(--ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0d10' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.mesaj-eroare { background: var(--eroare-fundal); color: var(--text); }
.mesaj-eroare::before { background-color: var(--eroare); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b0d10' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.5'/%3E%3C/svg%3E"); }
.mesaj-avertisment { color: var(--text); }
.mesaj-avertisment::before { background-color: var(--galben); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1600' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 6.5v7M12 17.5v.5'/%3E%3C/svg%3E"); }
.mesaj-info { color: var(--text); }
.mesaj-info::before { background-color: var(--fundal-info-semn, var(--linie-tare)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2f2ef' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M12 11v6.5M12 6.5v.5'/%3E%3C/svg%3E"); }
.card .mesaj { margin-bottom: 0; }

.lista-alerte { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.4rem; }
.alerta { display: flex; gap: 0.75rem; align-items: baseline; padding: 0.7rem 1rem; border-radius: var(--raza-mica); background: var(--suprafata);
  box-shadow: var(--relief); }
.alerta-nivel { flex: none; display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-titlu); font-weight: 700;
  font-size: var(--m-mic); text-transform: uppercase; letter-spacing: 0.05em; }
.alerta-critic { background: var(--eroare-fundal); }
.alerta-critic .alerta-nivel { color: var(--eroare); }
.alerta-avertisment .alerta-nivel { color: var(--galben-text); background: var(--galben); padding: 0.1rem 0.45rem; border-radius: 3px; }
.alerta-info .alerta-nivel { color: var(--text-slab); }
.inline-detalii { margin-top: 0.5rem; }
.inline-detalii form { margin: 0.5rem 0; display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }

/* ---------- Butoane și formulare ---------- */
.buton, button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.55rem 1rem; border: 1px solid transparent;
  border-radius: 999px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 600;
  text-decoration: none; cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  transition: background 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out, transform 100ms ease-out;
}
/* Trecerea mouse-ului doar nuanțează butonul (gri ar părea dezactivat); apăsarea răspunde imediat, la coborâre. */
.buton:hover, button:hover { background: color-mix(in srgb, var(--accent) 86%, var(--fundal)); }
.buton:active, button:active { transform: scale(0.97); transition-duration: 60ms; }
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.buton-secundar, button.buton-secundar { background: var(--ton); color: var(--text); }
.buton-secundar:hover, button.buton-secundar:hover { background: var(--ton-hover); }
.buton-mic, .formular-alegere button { padding: 0.3rem 0.65rem; font-size: var(--m-nota); }
.butoane { display: flex; gap: 0.6rem; flex-wrap: wrap; margin: 0.8rem 0; }
.continut > .butoane { margin: 0 0 1.25rem; }

.formular { display: grid; gap: 0.75rem; margin: 0.9rem 0; }
.formular label { display: grid; gap: 0.3rem; font-size: var(--m-nota); color: var(--text-slab); }
input, select, textarea {
  font: inherit; font-size: var(--m-tabel); color: var(--text); background: var(--fundal);
  border: 1px solid var(--linie-tare); border-radius: var(--raza-mica); padding: 0.5rem 0.65rem; width: 100%;
}
:root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: var(--suprafata); }
input:hover, select:hover, textarea:hover { border-color: var(--text-slab); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--galben); outline-offset: 0; border-color: transparent; }
input::placeholder, textarea::placeholder { color: var(--text-slab); opacity: 0.8; }
input[type="checkbox"], input[type="radio"] { width: 1.05rem; height: 1.05rem; accent-color: var(--galben); }
.formular-inline { margin: 0; }
.formular-coloana { grid-template-columns: 1fr !important; }
.optiune { display: flex !important; grid-template-columns: none; gap: 0.55rem; align-items: center; margin: 0.35rem 0; color: var(--text) !important; }
.optiune input { width: auto; flex: none; }

details > summary { cursor: pointer; }
details:not(.meniu):not(.parametru) > summary { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text-slab); margin: 0.6rem 0; list-style: none; }
details:not(.meniu):not(.parametru) > summary::-webkit-details-marker { display: none; }
details:not(.meniu):not(.parametru) > summary::before, details.parametru > summary .eticheta::before {
  content: ""; width: 0.45rem; height: 0.45rem; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(-45deg); transition: transform 150ms ease-out; flex: none; }
details[open]:not(.meniu):not(.parametru) > summary::before, details.parametru[open] > summary .eticheta::before { transform: rotate(45deg); }
details:not(.meniu):not(.parametru) > summary:hover { color: var(--text); }
details.parametru { border-top: 1px solid var(--linie); padding: 0.75rem 0; }
details.parametru:first-of-type { border-top: 0; padding-top: 0; }
details.parametru summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; list-style: none; }
details.parametru summary::-webkit-details-marker { display: none; }
details.parametru summary .eticheta { display: inline-flex; align-items: center; gap: 0.6rem; }
details.parametru summary .eticheta::before { color: var(--text-slab); margin-right: 0.1rem; }
.parametru .valoare { flex: none; font-weight: 600; text-align: right; max-width: 60%; overflow-wrap: anywhere; }
details.parametru summary .eticheta { min-width: 0; }
/* Conținutul unui <details> se desfășoară lin (unde browserul știe să anime înălțimea „auto”). */
@supports (interpolate-size: allow-keywords) {
  details:not(.meniu)::details-content { block-size: 0; overflow: clip; opacity: 0;
    transition: block-size 320ms var(--arc), opacity 200ms ease-out, content-visibility 320ms allow-discrete; }
  details[open]:not(.meniu)::details-content { block-size: auto; opacity: 1; }
}

/* ---------- Tabele (tabela de plecări) ---------- */
.tabel { width: 100%; border-collapse: collapse; font-size: var(--m-tabel); }
.tabel th, .tabel td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabel th:first-child, .tabel td:first-child { padding-left: 0; }
.tabel th:last-child, .tabel td:last-child { padding-right: 0; }
.tabel thead th { font-family: var(--font-titlu); font-size: var(--m-eticheta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--text-slab); padding-top: 0.2rem; border-bottom-color: var(--linie-tare); vertical-align: bottom; }
/* Capul tabelului rămâne sus la derulare, sub bara fixă a paginii (înălțimea ei, --sus-lipit, o pune app.js).
   Linia de sub cap e desenată în fundal, ca să coboare odată cu el (marginea unei celule lipite rămâne pe loc;
   o umbră interioară lasă dungi verticale fine între celule). */
/* Lipit e tot capul (nu fiecare celulă): celulele lipite una câte una lasă dungi fine între ele. */
.tabel thead { position: sticky; top: var(--sus-lipit, 0px); z-index: 2; }
.tabel thead th { background: linear-gradient(var(--linie-tare), var(--linie-tare)) bottom / 100% 1px no-repeat, var(--suprafata); }
/* În panourile derulate pe orizontală capul nu se poate lipi de pagină: app.js pune deasupra o copie (.cap-lipit),
   lipită de pagină și derulată odată cu tabelul. */
.tabel-derulant .tabel thead, .cap-lipit .tabel thead { position: static; }
.cap-cadru { position: relative; }
.cap-lipit { position: sticky; top: var(--sus-lipit, 0px); z-index: 3; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; background: var(--suprafata); }  /* se poate derula și trăgând de cap (telefon) */
.cap-lipit::-webkit-scrollbar { display: none; }
.cap-lipit .tabel { table-layout: fixed; min-width: 0; }
/* linia de sub copie e una singură (pe celule s-ar rupe la marginile fracționare ale coloanelor) */
.cap-lipit { border-bottom: 1px solid var(--linie-tare); }
.cap-lipit .tabel thead th { background: var(--suprafata); border-bottom: 0; }
.cap-lipit .tabel-salariati thead th:first-child { box-shadow: 1px 0 0 var(--linie); }
.tabel tbody tr:last-child td { border-bottom-color: var(--linie-tare); }
.tabel tfoot th { font-weight: 700; border-bottom: 0; font-size: var(--m-tabel); }
.tabel .num { text-align: right; white-space: nowrap; }
.tabel .fara-rupere { white-space: nowrap; }
/* O celulă cu două informații (nume + notă dedesubt) e un singur element: pe telefon stă în dreapta etichetei, nu în coloane */
.celula { display: block; min-width: 0; }
.tabel a { text-decoration: none; }
.tabel a:hover { text-decoration: underline; }
.tabel-mic { font-size: var(--m-nota); margin-top: 0.5rem; }
.tabel-mic th, .tabel-mic td { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.tabel-derulant { overflow-x: auto; }
.rand-atentie td { background: var(--avertisment-fundal); }
.rand-atentie td:first-child { box-shadow: inset 3px 0 0 var(--galben); padding-left: 0.6rem; }
/* Rândul de sub mouse se luminează ușor, ca ochiul să urmărească cifrele pe orizontală. */
@media (hover: hover) and (min-width: 640px) {
  .tabel tbody tr:not(.rand-atentie):has(td):hover > * { background-color: var(--rand-hover); }
  /* coloana fixă cu numele rămâne opacă (pe dedesubt trec celelalte coloane) */
  .tabel-salariati tbody tr:not(.rand-atentie):hover > td:first-child { background-color: var(--suprafata);
    background-image: linear-gradient(var(--rand-hover), var(--rand-hover)); }
  /* Iconițele ⓘ stau estompate și devin clare pe rândul de sub mouse (tabelele au câte una pe aproape fiecare rând). */
  .tabel .info { opacity: 0.45; transition: opacity 150ms ease-out; }
  .tabel tr:hover .info, .tabel .info:focus, .tabel .info:focus-within { opacity: 1; }
}

/* Pe ecran îngust, tabelele marcate .tabel-carduri devin rânduri-bilet (eticheta vine din data-eticheta). */
@media (max-width: 639px) {
  .tabel-carduri thead { display: none; }
  .tabel-carduri, .tabel-carduri tbody, .tabel-carduri tfoot { display: block; }
  .tabel-carduri tr { display: block; padding: 0.6rem 0; border-bottom: 1px dashed var(--linie-tare); }
  .tabel-carduri tbody tr:last-child { border-bottom: 1px solid var(--linie-tare); }
  .tabel-carduri td, .tabel-carduri th { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: 0.2rem 0 !important;
    text-align: right; }
  .tabel-carduri td:first-child { font-weight: 600; text-align: left; }
  .tabel-carduri td::before { content: attr(data-eticheta); color: var(--text-slab); font-size: var(--m-nota); text-align: left; font-weight: 400; flex: none; }
  .tabel-carduri td:not([data-eticheta])::before { content: none; }
  .tabel-carduri td select { max-width: 60%; }
  .tabel.tabel-carduri td { overflow-wrap: anywhere; }
  .tabel.tabel-carduri td > .celula { flex: 1 1 auto; text-align: right; }  /* rânduri-bilet: nu mai e calcul de tabel, valoarea lungă se rupe în spațiul ei */
  .tabel-carduri tfoot tr { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
  .rand-atentie td:first-child { box-shadow: none; padding-left: 0; }
  .rand-atentie { box-shadow: inset 3px 0 0 var(--galben); padding-left: 0.75rem !important; background: var(--avertisment-fundal); }
  .rand-atentie td { background: transparent; }
}

@media (min-width: 640px) {
  .grila-carduri { grid-template-columns: repeat(2, 1fr); }
  .formular { grid-template-columns: repeat(3, 1fr) auto; align-items: end; }
  .formular label:has(textarea) { grid-column: 1 / -1; }
}
@media (min-width: 960px) { .grila-carduri { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Stări și etichete ---------- */
.stare-ok { color: var(--ok); }
.stare-partial { color: var(--avertisment); }
.stare-eroare { color: var(--eroare); }
.eticheta-stare { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-titlu); font-size: var(--m-subtitlu); font-weight: 700; margin: 0 0 0.3rem; }
.eticheta-mica { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--m-eticheta); font-weight: 700; font-family: var(--font-titlu);
  text-transform: uppercase; letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 3px; white-space: nowrap;
  background: var(--suprafata-2); color: var(--text-slab); }
.eticheta-mica.stare-ok { background: var(--ok-fundal); color: var(--ok); }
.eticheta-mica.stare-eroare { background: var(--eroare-fundal); color: var(--eroare); }
.eticheta-mica.stare-partial { background: var(--galben); color: var(--galben-text); }
.contoare { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lipsa { color: var(--text-slab); }
.sursa-lipsa { display: inline-flex; align-items: center; font-size: var(--m-eticheta); font-weight: 700; font-family: var(--font-titlu);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--galben-text); background: var(--galben); border-radius: 3px;
  padding: 0.05rem 0.4rem; white-space: nowrap; }

/* ---------- Import și documente ---------- */
.lista-sloturi { list-style: none; margin: 0; padding: 0; }
.slot { display: grid; gap: 0.6rem; padding: 0.85rem 0; border-top: 1px dashed var(--linie-tare); }
.slot:first-child { border-top: 0; padding-top: 0; }
.slot-info { display: grid; gap: 0.2rem; }
.slot-info .nota { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.4rem; }
.formular-incarcare { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin: 0; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; margin-right: 0.6rem; padding: 0.3rem 0.7rem;
  border: 1px solid var(--linie-tare); border-radius: 4px; background: var(--suprafata-2); color: var(--text); cursor: pointer; }
.grila-stari { display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 1rem; border-radius: var(--raza-mica);
  background: var(--suprafata-2); overflow: hidden; }
.stare { display: grid; gap: 0.1rem; padding: 0.8rem 1rem; font-size: var(--m-nota); color: var(--text-slab);
  border-left: 2px dashed var(--linie-tare); border-top: 2px dashed var(--linie-tare); margin: -2px 0 0 -2px; }
.stare.stare-ok .stare-cifra { color: var(--ok); }
.stare.stare-eroare .stare-cifra { color: var(--eroare); }
.stare.stare-partial .stare-cifra { color: var(--avertisment); }
.stare-cifra { font-family: var(--font-titlu); font-size: var(--m-titlu); font-weight: 700; line-height: 1.1; color: var(--text);
  letter-spacing: -0.01em; }
.lista-probleme { margin: 0.3rem 0; padding-left: 1.2rem; }
.lista-probleme li { margin: 0.25rem 0; }
@media (min-width: 640px) {
  .slot { grid-template-columns: 1fr auto; align-items: center; }
  .grila-stari { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Biletul: segmente perforate (Sumar, Simulator) ---------- */
.bilet, .grila-kpi { display: grid; grid-template-columns: repeat(2, 1fr); background: var(--suprafata); border-radius: var(--raza);
  margin-bottom: 1.25rem; overflow: hidden; box-shadow: var(--relief); }
.segment, .kpi { position: relative; min-width: 0; padding: 1rem 1.1rem 1.1rem;
  border-left: 2px dashed var(--linie-tare); border-top: 2px dashed var(--linie-tare); margin: -2px 0 0 -2px; }
.segment-eticheta, .kpi-eticheta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; font-family: var(--font-titlu);
  font-size: var(--m-eticheta); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-slab); }
.segment-valoare, .kpi-valoare { font-family: var(--font-titlu); font-size: var(--m-cifra-mica); font-weight: 700; line-height: 1.1; margin-top: 0.45rem;
  overflow-wrap: anywhere; letter-spacing: -0.01em; }
.segment-valoare .unitate, .kpi-valoare .unitate { font-size: 0.6em; font-weight: 600; letter-spacing: 0; white-space: nowrap; }
.segment-sub, .kpi-sub { font-size: var(--m-nota); color: var(--text-slab); margin-top: 0.35rem; }
.segment-mare { grid-column: 1 / -1; }
.segment-mare .segment-valoare { font-size: var(--m-cifra-mare-mobil); letter-spacing: -0.02em; }
.kpi-mare .kpi-valoare { font-size: var(--m-titlu); }
.ton-bine .segment-valoare, .ton-bine .kpi-valoare { color: var(--ok); }
.ton-rau .segment-valoare, .ton-rau .kpi-valoare { color: var(--eroare); }
.ton-informativ .kpi-valoare { font-weight: 500; color: var(--text-slab); }
.schimbare { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.5rem; padding: 0.1rem 0.5rem; border-radius: 3px;
  background: var(--galben); color: var(--galben-text); font-weight: 700; font-size: var(--m-mic); max-width: 100%;
  animation: tabela 420ms cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: 50% 0; }
.schimbare-neutra { background: var(--suprafata-2); color: var(--text-slab); animation: none; }
@keyframes tabela { from { transform: perspective(300px) rotateX(-75deg); opacity: 0.4; } }
@media (prefers-reduced-motion: reduce) { .schimbare { animation: none; } }
@media (min-width: 900px) {
  .bilet { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  .segment-mare { grid-column: auto; }
  .segment { padding: 1.3rem 1.5rem 1.4rem; }
  .segment-mare .segment-valoare { font-size: var(--m-cifra-mare); }
  .segment-valoare { font-size: var(--m-cifra); }
  /* perforațiile: crestături în marginile biletului, la fiecare separator */
  .segment + .segment::before, .segment + .segment::after { content: ""; position: absolute; left: -9px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--fundal); }
  .segment + .segment::before { top: -8px; }
  .segment + .segment::after { bottom: -8px; }
}
@media (min-width: 640px) { .grila-kpi { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .grila-kpi { grid-template-columns: repeat(4, 1fr); } }

/* Formula la atingere (merge și pe telefon: focus la tap) */
.info { position: relative; display: inline-flex; cursor: help; color: var(--text-slab); font-size: 0.95em; line-height: 1;
  text-transform: none; letter-spacing: 0; font-family: var(--font); font-weight: 400; }
.info::after { content: ""; position: absolute; inset: -0.5rem; }  /* zona de atingere (WCAG 2.5.8) */
.info:hover, .info:focus { color: var(--text); }
/* Bula „crește” din iconiță (originea o pune app.js) și dispare pe același drum. */
.info-text { display: none; position: absolute; z-index: 40; left: 0; top: 1.5em;  /* deplasarea o calculează app.js */
  width: min(19rem, 80vw); padding: 0.65rem 0.8rem; border-radius: var(--raza-mica); background: var(--suprafata-2);
  border: 1px solid var(--linie-tare); box-shadow: 0 10px 28px rgb(0 0 0 / 0.35); color: var(--text);
  font-size: var(--m-mic); line-height: 1.45; text-align: left; white-space: normal;
  opacity: 0; transform: scale(0.96); transform-origin: 0.5rem 0;
  transition: opacity 120ms ease-out, transform 120ms ease-out, display 120ms allow-discrete; }
.info:hover .info-text, .info:focus .info-text, .info:focus-within .info-text { display: block; opacity: 1; transform: none;
  transition: opacity 160ms ease-out 60ms, transform 280ms var(--arc) 60ms, display 0s; }
@starting-style {
  .info:hover .info-text, .info:focus .info-text, .info:focus-within .info-text { opacity: 0; transform: scale(0.96); }
}

/* ---------- Sumar ---------- */
.grila-sumar { display: grid; gap: 1.25rem; margin-bottom: 1.25rem; }
.grila-sumar > .card { margin: 0; }
@media (min-width: 1100px) { .grila-sumar { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; } }  /* minmax: graficele nu blochează lățimea coloanei când fereastra crește */
.tabel-indicatori tbody th { font-family: var(--font-titlu); font-size: var(--m-eticheta); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-slab); padding-top: 1.1rem; border-bottom-color: var(--linie-tare); }
.tabel-indicatori tbody:first-of-type th { padding-top: 0.2rem; }
.tabel-indicatori td.num:nth-child(2) { font-weight: 600; }
.tabel-indicatori .prec { color: var(--text-slab); }
.tabel-indicatori .detaliu { display: block; font-size: var(--m-mic); color: var(--text-slab); }
.tabel-indicatori .info { margin-left: 0.2rem; }
.tabel-indicatori .informativ td { color: var(--text-slab); }
.tabel-indicatori .informativ td.num:nth-child(2) { font-weight: 400; }
/* Pe telefon, denumirea indicatorului primește ~40% din lățime (altfel cifrele și antetul lunii o strâng la 3 rânduri) */
@media (max-width: 639px) {
  .tabel-indicatori td:first-child { width: 40%; }
  .tabel-indicatori th, .tabel-indicatori td { padding-left: 0.5rem; padding-right: 0.5rem; }
  .tabel-indicatori thead th.num { white-space: normal; }  /* „SEPTEMBRIE / 2026” pe două rânduri, nu o coloană lată */
}
.analiza-cfo .text-analiza { margin-bottom: 0.6rem; }

/* ---------- Grafice ---------- */
.grafic { position: relative; height: 280px; margin: 0.5rem 0; }
.grafic-mic { height: 220px; }
.grila-sumar .grafic { height: 230px; }
.grila-sumar .grafic-mic { height: 180px; }

/* ---------- P&L ---------- */
.tabel-pnl { min-width: 600px; }
.tabel-pnl td:first-child { min-width: 15rem; }
.pnl-cost td:first-child, .pnl-alte td:first-child { padding-left: 1rem; color: var(--text-slab); }
.pnl-subtotal td { font-weight: 600; border-top: 1px solid var(--linie-tare); }
.pnl-rezultat td { font-family: var(--font-titlu); font-weight: 700; font-size: var(--m-subtitlu); border-top: 2px solid var(--text); border-bottom: 0; }
.pnl-venit td { font-weight: 600; }
.pnl-alerta td { color: var(--eroare); font-weight: 600; }
.pnl-informativ td { color: var(--text-slab); }
.pnl-reconciliere th { text-align: left; padding-top: 1.4rem !important; font-family: var(--font-titlu); font-size: var(--m-eticheta);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-slab); border-bottom-color: var(--linie-tare); }
.variatie-pozitiva { color: var(--ok); }
.variatie-negativa { color: var(--eroare); }

/* ---------- Reconciliere, Salariați, Obiective ---------- */
.formular-alegere { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.4rem; }
.formular-alegere select { width: auto; max-width: 100%; }
.formular-alegere label { flex-basis: 100%; }
.filtre { grid-template-columns: repeat(2, 1fr); margin-top: 0; }
@media (min-width: 640px) { .filtre { grid-template-columns: repeat(4, 1fr); } }
.kpi-cash { font-size: var(--m-text); margin: 0.4rem 0; }
.kpi-cash strong { font-family: var(--font-titlu); font-size: var(--m-accent); color: var(--avertisment); }
.eticheta-plata { display: inline-block; font-family: var(--font-titlu); font-size: var(--m-eticheta); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.1rem 0.45rem; border-radius: 3px; white-space: nowrap; border: 1px solid var(--linie-tare); }
.plata-cash { background: var(--galben); color: var(--galben-text); border-color: var(--galben); }
.plata-mixt { border: 1px solid var(--galben); color: var(--avertisment); }
.plata-card { color: var(--text-slab); }
.plata-zero { color: var(--text-slab); border-style: dashed; }
.celula-cash { font-weight: 700; }
.rand-cash .celula-cash { color: var(--avertisment); }
.tabel-salariati, .tabel-profit { min-width: 900px; }
.tabel-salariati { font-size: var(--m-tabel); }
@media (max-width: 639px) {
  .tabel-salariati, .tabel-reconciliere { min-width: 0; }
  .tabel-salariati .col-detaliu { display: none !important; }
  .tabel-salariati tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.2rem 0.75rem; padding: 0.7rem 0; }
  .tabel-salariati tbody td { display: block; text-align: left; }
  .tabel-salariati .col-nume { grid-area: 1 / 1 / 2 / 3; font-size: var(--m-text); }
  .tabel-salariati .col-plata { grid-area: 1 / 3; justify-self: end; }
  .tabel-salariati .col-status { grid-area: 2 / 1 / 3 / -1; font-size: var(--m-mic); color: var(--avertisment); }
  .tabel-salariati .col-nume::before, .tabel-salariati .col-plata::before { content: none; }
  .tabel-salariati .col-status::before { content: "Status: "; }
  .tabel-salariati .col-bani { grid-row: 3; font-weight: 600; text-align: right; }
  .tabel-salariati .col-bani::before { display: block; text-align: right; font-family: var(--font-titlu); font-size: var(--m-eticheta); font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; }
}
.rand-obiectiv td { font-size: var(--m-nota); color: var(--text-slab); border-bottom-style: dashed; }
.rand-obiectiv td:first-child { padding-left: 1.1rem; }

/* ---------- Cash: coada „De clasificat” ---------- */
.tranzactie { display: grid; gap: 0.6rem; padding: 0.9rem 0; border-top: 1px dashed var(--linie-tare); margin: 0; }
.tranzactie:first-of-type { border-top: 0; }
.tranzactie-info strong { font-family: var(--font-titlu); font-size: var(--m-subtitlu); }
.tranzactie-info .nota { overflow-wrap: anywhere; }
.tranzactie-form { display: grid; gap: 0.5rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .tranzactie-form { grid-template-columns: 1.2fr 1fr auto 1.2fr auto; } }
.tranzactie-form .optiune { margin: 0; font-size: var(--m-nota); }

/* ---------- Analiza CFO ---------- */
.text-pachet { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: var(--m-mic); margin-top: 0.5rem; }
.text-analiza { white-space: pre-wrap; line-height: 1.55; max-width: 75ch; }

/* ---------- Simulator ---------- */
@media (min-width: 640px) { .formular-simulator { grid-template-columns: repeat(4, 1fr) !important; } }
.formular .rand-intreg { grid-column: 1 / -1; margin: 0; }
.formular details .formular { margin: 0.25rem 0 0; }
.nota-iconita { display: flex; gap: 0.45rem; align-items: baseline; }
.titlu-luna { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.inapoi a::before { content: ""; width: 0.45rem; height: 0.45rem; border: solid currentColor; border-width: 0 0 2px 2px;
  transform: rotate(45deg); margin: 0 0.15rem 0 0.2rem; }
.continut > h1:first-child { margin-bottom: 1.4rem; }
.lista-setari { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.lista-setari a { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; align-items: center; padding: 0.9rem 0;
  text-decoration: none; color: var(--text); border-top: 1px dashed var(--linie-tare); }
.lista-setari a:first-child { border-top: 0; }
.lista-setari strong { font-family: var(--font-titlu); font-size: var(--m-subtitlu); font-weight: 600; }
.lista-setari .nota { grid-column: 1; }
.lista-setari .ic { grid-column: 2; grid-row: 1 / span 2; color: var(--text-slab); transition: transform 150ms ease-out, color 150ms ease-out; }
.lista-setari a:hover .ic { color: var(--text); transform: translateX(3px); }
@media (min-width: 900px) {
  .lista-setari a { grid-template-columns: 16rem 1fr auto; }
  .lista-setari .nota { grid-column: 2; }
  .lista-setari .ic { grid-column: 3; grid-row: 1; }
}
@media (min-width: 640px) {
  .tabel-salariati td[data-eticheta="Nume"], .tabel-reconciliere td[data-eticheta="Nume"] { min-width: 11rem; }
  .tabel-salariati td[data-eticheta="Grup"], .tabel-reconciliere td[data-eticheta="Grup"] { min-width: 13rem; }
  .tabel-salariati { font-size: var(--m-nota); }
  .tabel-salariati th, .tabel-salariati td { padding-left: 0.45rem; padding-right: 0.45rem; }
  .tabel-salariati td[data-eticheta="Grup"] { min-width: 11rem; }
  /* numele rămâne vizibil când tabelul se derulează spre dreapta */
  .tabel-salariati th:first-child, .tabel-salariati td:first-child { position: sticky; left: 0; z-index: 1; background: var(--suprafata);
    box-shadow: 1px 0 0 var(--linie); padding-right: 0.75rem; }
  .tabel-salariati thead th:first-child { z-index: 3; }  /* peste celelalte capete, care trec pe dedesubt */
}
.tabel-derulant { scrollbar-width: thin; }
.nota, .card > p { text-wrap: pretty; }
.card > p.nota, .card > p, p.nota { max-width: 62ch; }
/* Coloanele din Sumar: panourile se așază unul sub altul fără goluri */
.grila-sumar > .coloana { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-content: start; }
.grila-sumar > .coloana > .card { margin: 0; }
/* Nume lungi de fișiere: se rup, nu lățesc pagina pe telefon. În tabele, cuvintele se rup doar între ele (nu „Lichiditat-e”):
   `break-word` lasă coloana cel puțin cât cel mai lung cuvânt; tabelele late se derulează în panou. */
.slot-info, .slot-info .nota { min-width: 0; overflow-wrap: anywhere; }
.tabel td { min-width: 0; overflow-wrap: break-word; }
.tabel td.num { overflow-wrap: normal; }
/* Istoricul parametrilor: valoarea (ex. lista de foldere) se rupe oriunde, data nu */
.parametru .tabel td:nth-child(2) { overflow-wrap: anywhere; }
.parametru .tabel td:first-child { white-space: nowrap; }
/* Biletul pe rânduri: ultimul segment ocupă restul rândului, ca perforația să fie continuă */
.bilet > .segment:last-child:nth-child(even) { grid-column: 1 / -1; }
.grila-kpi > .kpi:last-child:nth-child(odd) { grid-column: span 2; }
@media (min-width: 640px) {
  .grila-kpi > .kpi:last-child:nth-child(odd) { grid-column: auto; }
  .grila-kpi > .kpi:last-child:nth-child(3n+1) { grid-column: span 3; }
  .grila-kpi > .kpi:last-child:nth-child(3n+2) { grid-column: span 2; }
}
@media (min-width: 900px) { .bilet > .segment:last-child:nth-child(even) { grid-column: auto; } }
@media (min-width: 960px) {
  .grila-kpi > .kpi:last-child:nth-child(3n+1), .grila-kpi > .kpi:last-child:nth-child(3n+2) { grid-column: auto; }
  .grila-kpi > .kpi:last-child:nth-child(4n+3) { grid-column: span 2; }
  .grila-kpi > .kpi:last-child:nth-child(4n+2) { grid-column: span 3; }
}
@media (max-width: 639px) { .kpi-valoare, .kpi-mare .kpi-valoare { font-size: var(--m-accent); } }

/* ---------- Alegerea fișierului (Import): buton în stilul aplicației + zonă unde se poate trage fișierul ---------- */
.alege-fisier { position: relative; flex: 1 1 14rem; min-width: 0; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.3rem 0.75rem 0.3rem 0.3rem; border: 1px dashed var(--linie-tare); border-radius: 999px; cursor: pointer;
  transition: border-color 150ms ease-out, background 150ms ease-out; }
.alege-fisier:hover { border-color: var(--text-slab); }
.alege-fisier:hover .buton { background: var(--suprafata-2); border-color: var(--text-slab); }
.alege-fisier:active .buton { transform: scale(0.97); transition-duration: 60ms; }
.alege-fisier:has(input:focus-visible) { outline: 2px solid var(--galben); outline-offset: 2px; }
.alege-fisier .buton { padding: 0.3rem 0.7rem; font-size: var(--m-nota); }
@media (min-width: 640px) { .alege-fisier { flex: 0 0 17.5rem; } }  /* aceeași lățime pe toate rândurile */
.alege-fisier.tinta { border-style: solid; border-color: var(--text); background: var(--suprafata-2); }
.nume-fisier { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--m-nota); color: var(--text-slab); }
.alege-fisier.ales .nume-fisier { color: var(--text); font-weight: 500; }
.ascuns-vizual { position: absolute; left: 0.5rem; bottom: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; }

/* ---------- Tranziții între ecrane: fade scurt; meniul și comutatoarele alunecă spre noua poziție ---------- */
@view-transition { navigation: auto; }
.bara-laterala { view-transition-name: bara-laterala; }
.antet-mobil { view-transition-name: antet-mobil; }
.bara-laterala .navigare a[aria-current="page"] { view-transition-name: nav-activ; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; animation-timing-function: ease-out; }
::view-transition-group(nav-activ), ::view-transition-group(comutator-perioada), ::view-transition-group(comutator-asociati) {
  animation-duration: var(--arc-durata); animation-timing-function: var(--arc); }
::view-transition-old(nav-activ), ::view-transition-new(nav-activ),
::view-transition-old(comutator-perioada), ::view-transition-new(comutator-perioada),
::view-transition-old(comutator-asociati), ::view-transition-new(comutator-asociati) { animation-duration: 240ms; }
/* Schimbarea temei: luminozitatea se estompează, nu sare (app.js) */
:root.schimba-tema::view-transition-old(*), :root.schimba-tema::view-transition-new(*),
:root.schimba-tema::view-transition-group(*) { animation-duration: 320ms; animation-timing-function: ease-in-out; }
:root.tema-lina *, :root.tema-lina *::before, :root.tema-lina *::after {
  transition: background-color 300ms ease-in-out, color 300ms ease-in-out, border-color 300ms ease-in-out, box-shadow 300ms ease-in-out !important; }

/* ---------- Preferințele de accesibilitate din sistem ---------- */
/* Mai puțină mișcare: fără alunecări, salturi sau scalări; rămân doar estompările scurte. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*) { animation: none !important; }
  .buton:active, button:active, .card-link:active, .navigare a:active, .meniu summary:active,
  .alege-fisier:active .buton { transform: none; }
  .meniu > .navigare, .meniu.inchide > .navigare, .info-text, .meniu summary .ic { transform: none !important; }
  .comuta-tema .ic { transition: opacity 200ms ease-out; transform: none !important; }
  select[name="luna"]::picker(select) { transform: none !important; }
  .mesaj { animation-name: estompare; }
  @keyframes estompare { from { opacity: 0; } }
  details:not(.meniu)::details-content { transition: opacity 150ms ease-out, content-visibility 150ms allow-discrete; }
}
/* Mai puțină transparență: barele plutitoare devin opace. */
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme="light"] { --material: var(--fundal); }
  .antet-mobil, .continut > .rand-titlu { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Contrast mărit: fundaluri opace și margini clare. */
@media (prefers-contrast: more) {
  :root, :root[data-theme="light"] { --material: var(--fundal); --relief: 0 0 0 1px var(--linie-tare); }
  .antet-mobil, .continut > .rand-titlu:has(form, .comutator) { animation: none; box-shadow: 0 1px 0 var(--linie-tare);
    -webkit-backdrop-filter: none; backdrop-filter: none; }
}