/* CrockyHost - Sonar
 * ------------------------------------------------------------------
 * Consola hidrografica. Fundal deschis si rece ca hartia de harta,
 * accent teal, si monospace ca fata principala - pentru ca tot ce se
 * citeste aici sunt numere: CUI, CAEN, numere de la registru, telefoane.
 *
 * Deliberat FARA nimic din .calling: acela e inchis, cald-maro, cu Plex
 * Sans si accent chihlimbar. Nu se imprumuta nici paleta, nici asezarea.
 */

@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plex-mono-400-latin.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plex-mono-400-latin-ext.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plex-mono-600-latin.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212;
}
@font-face {
    font-family: 'Plex Mono';
    src: url('../fonts/plex-mono-600-latin-ext.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-roman.var.woff2') format('woff2-variations');
    font-weight: 100 900; font-style: normal; font-display: swap;
}

/* O SINGURA tema, intunecata, si aia e. Nu se uita la `prefers-color-scheme`:
 * unealta se foloseste noaptea si dimineata devreme, iar o consola care sare
 * pe alb pentru ca sistemul asa zice nu ajuta pe nimeni. `color-scheme` spune
 * si browserului sa dea controale, calendare si bare de derulare intunecate -
 * fara el, selectorul de data se deschide alb peste pagina. */
:root {
    color-scheme: dark;

    /* apa adanca, rece */
    --vellum:   #0c1b1e;
    --surface:  #112629;
    --sunk:     #0a1719;

    /* Patru trepte de cerneala, masurate pe fundalul pe care chiar apar:
     * 13 : 7 : 4,5 fata de suprafata. Varianta dinainte avea `--faint` la 3,4 -
     * text real, sub pragul la care se citeste. */
    --depth:    #e6efee;   /* cea mai luminoasa, pentru cifre si nume */
    --ink:      #d3e2e1;
    --mute:     #9ab1b6;
    --faint:    #718e94;

    --rule:     #1e393d;   /* linii de despartire, decor */
    --rule-2:   #2b4a4f;
    /* Marginea unui camp sau a unui buton nu e decor: ea spune unde se apasa.
     * Are prag propriu, 3:1, si de aceea token propriu. */
    --edge:     #43747c;

    --signal:   #2fb3b6;   /* pingul de sonar */
    --signal-2: #57c9cb;
    --signal-bg:#0e3236;
    /* Ce se scrie PESTE accent. Accentul e un teal luminos, iar albul pe el da
     * 2,55 - sub orice prag. Butonul „Trimite in .calling” era exact asa. */
    --pe-signal:#062225;

    --sand:     #d5a163;   /* PFA */
    --sand-bg:  #2e2517;
    --alarm:    #e0736b;   /* fara telefon, ce nu se poate suna */
    --alarm-bg: #33191a;

    --f-mono: 'Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
    --f-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --rail: 46px;
    --filtre: 53px;   /* inaltimea barei de filtre, pentru lipirea antetului */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    background: var(--vellum);
    color: var(--ink);
    font-family: var(--f-mono);
    font-size: 13px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

p, .prose, button, input, select, label { font-family: var(--f-sans); }

:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- sina de sus */

.rail {
    height: var(--rail);
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 18px;
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: 0;
    z-index: 40;
}

.mark {
    font-weight: 600;
    letter-spacing: .18em;
    font-size: 13px;
    color: var(--depth);
}
.mark i {
    font-style: normal;
    color: var(--signal);
}

.rail-sub {
    color: var(--faint);
    font-size: 11px;
    letter-spacing: .04em;
}

.rail-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.nav { display: flex; gap: 2px; }
.nav button {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    padding: 6px 11px;
    border: 1px solid transparent;
    background: none;
    color: var(--mute);
    cursor: pointer;
    border-radius: 2px;
}
.nav button:hover { color: var(--depth); background: var(--sunk); }
.nav button[aria-current='true'] {
    color: var(--signal);
    border-color: var(--edge);
    background: var(--signal-bg);
}

/* ---------------------------------------------------------------- panglica */

/* Semnatura paginii. Fiecare CUI alocat al zilei e o linie fina, in
 * ordinea registrului. Nu e o diagrama decorativa: e forma reala a
 * datelor, un sir contiguu de numere care se termina intr-o frontiera. */

.ribbon-wrap {
    background: var(--surface);
    border-bottom: 1px solid var(--rule);
    padding: 16px 18px 13px;
}

.ribbon-head {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 9px;
}
.ribbon-title {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
}
.ribbon-note { font-size: 11px; color: var(--faint); margin-left: auto; }

.ribbon {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 42px;
    overflow: hidden;
}

.tick {
    flex: 1 1 0;
    min-width: 1px;
    height: 60%;
    background: var(--rule-2);
    border-radius: .5px;
    transition: height .12s, background .12s;
}
.tick.srl      { background: var(--signal); height: 100%; }
.tick.pfa      { background: var(--sand);   height: 82%; }
.tick.mut      { background: var(--rule-2); height: 44%; }   /* fara telefon */
.tick.sediu    { background: var(--rule);   height: 26%; }
.tick:hover    { background: var(--depth); }

.ribbon.trage .tick {
    animation: sweep .5s cubic-bezier(.2, .7, .3, 1) backwards;
}
@keyframes sweep {
    from { height: 0; opacity: 0; }
}

.ribbon-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: 10px;
    color: var(--faint);
    letter-spacing: .06em;
}

.legend { display: flex; gap: 14px; font-size: 10px; color: var(--mute); margin-top: 8px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.legend b { width: 9px; height: 9px; border-radius: 1px; display: inline-block; }

@media (prefers-reduced-motion: reduce) {
    .ribbon.trage .tick { animation: none; }
    * { transition: none !important; }
}

/* ---------------------------------------------------------------- cifre */

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    background: var(--rule);
    gap: 1px;
    border-bottom: 1px solid var(--rule);
}
.kpi {
    background: var(--surface);
    padding: 13px 16px 14px;
}
.kpi dt {
    font-size: 10px;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 6px;
}
/* Fara asta, cifrele zilei si cele din toata baza stau una langa alta si arata
 * la fel. „Asteapta trimiterea 135.854” parea numarul de azi. */
.kpi dt .scop {
    display: block;
    margin-top: 2px;
    font-size: 9px;
    letter-spacing: .07em;
    text-transform: none;
    color: var(--faint);
}
.kpi dd {
    font-size: 25px;
    font-weight: 600;
    color: var(--depth);
    line-height: 1.05;
    letter-spacing: -.02em;
}
.kpi .delta { font-size: 11px; font-weight: 400; color: var(--faint); margin-left: 7px; }
.kpi .delta.plus { color: var(--signal); }
.kpi .delta.minus { color: var(--alarm); }
.kpi.accent dd { color: var(--signal); }
.kpi.alarma dd { color: var(--alarm); }
.kpi.alarma { background: var(--alarm-bg); }

/* ---------------------------------------------------------------- filtre */

.filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    background: var(--sunk);
    border-bottom: 1px solid var(--rule);
    position: sticky;
    top: var(--rail);
    z-index: 30;
}

/* `number` lipsea din lista si ramanea cu stilul browserului: o casuta ALBA
 * intre campuri intunecate, in pagina de setari si la adaugarea unei chei. */
input[type='text'], input[type='date'], input[type='search'], input[type='password'],
input[type='number'], select {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--edge);
    border-radius: 2px;
    padding: 6px 8px;
    min-width: 0;
}
input[type='search'] { min-width: 190px; }
select { max-width: 190px; }

.check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--mute);
    cursor: pointer;
    user-select: none;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 2px;
}
.check:hover { background: var(--surface); }
.check input { accent-color: var(--signal); }
.check.on { color: var(--signal); border-color: var(--edge); background: var(--signal-bg); }

.spacer { margin-left: auto; }

button.act {
    font-family: var(--f-sans);
    font-size: 12px;
    font-weight: 500;
    padding: 7px 13px;
    border-radius: 2px;
    border: 1px solid var(--edge);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}
button.act:hover:not(:disabled) { border-color: var(--signal); color: var(--signal); }
button.act:disabled { opacity: .45; cursor: not-allowed; }
button.act.tare {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--pe-signal);
}
button.act.tare:hover:not(:disabled) {
    background: var(--signal-2); border-color: var(--signal-2); color: var(--pe-signal);
}

/* ---------------------------------------------------------------- tabel */

/* FARA overflow aici pe ecran lat. Un container cu overflow devine blocul
 * fata de care se lipeste thead-ul, iar antetul ajunge sa pluteasca peste
 * randul doi in loc sa stea sus. Derularea pe orizontala ramane doar sub
 * 1100px, unde tabelul chiar nu incape - si acolo antetul nu se mai lipeste. */
.tabel-wrap { padding-bottom: 74px; }

/* Bordurile sunt separate, nu colapsate: cu border-collapse:collapse
 * fundalul unui thead lipit nu acopera complet randul de dedesubt si
 * textul lui se vede pe sub antet la derulare. */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }

thead th {
    position: sticky;
    top: calc(var(--rail) + var(--filtre));
    background: var(--vellum);
    text-align: left;
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mute);
    padding: 9px 10px;
    box-shadow: inset 0 -1px 0 var(--rule-2);
    white-space: nowrap;
    z-index: 20;
}
thead th.sortabil { cursor: pointer; user-select: none; }
thead th.sortabil:hover { color: var(--signal); }
thead th.sortabil.activ { color: var(--signal); }
thead th.sortabil.activ::after { content: ' \2193'; }

/* ---- nota FIRMEI ---- */

/* Alta pastila decat nota site-ului, si alta coloana: una spune cat merita
 * apelul, cealalta cat de bun e site-ul ca infrastructura. Sa nu fie luate
 * vreodata una drept alta. */
td.nota-cel { width: 52px; }

.nota-firma {
    position: relative;
    display: inline-block;
    min-width: 30px;
    text-align: center;
    font-weight: 600;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 2px;
    border: 1px solid var(--edge);
    color: var(--mute);
    cursor: help;
}
.nota-firma.mare  { color: var(--signal); border-color: var(--signal); background: var(--signal-bg); }
.nota-firma.medie { color: var(--sand);   border-color: var(--sand);   background: var(--sand-bg); }
.nota-firma.mica  { color: var(--faint); }

/* De ce are nota pe care o are. O nota fara explicatie nu e crezuta si nici
 * nu poate fi contrazisa cand greseste. */
.motive-panou {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    min-width: 230px;
    background: var(--surface); border: 1px solid var(--edge); border-radius: 3px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
    padding: 8px 0;
    text-align: left; font-weight: 400;
    opacity: 0; visibility: hidden; transform: translateY(-3px);
    transition: opacity .12s, transform .12s, visibility .12s;
    pointer-events: none;
}
.nota-firma:hover .motive-panou,
.nota-firma:focus-within .motive-panou { opacity: 1; visibility: visible; transform: none; }

.motive-cap {
    display: block; padding: 0 12px 6px;
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--mute); font-weight: 400;
}
.motiv {
    display: flex; gap: 9px; align-items: baseline;
    padding: 3px 12px;
    font-family: var(--f-sans); font-size: 11px; color: var(--ink);
}
.motiv b { flex: 0 0 30px; text-align: right; font-family: var(--f-mono); color: var(--signal); }
.motiv b:first-child { color: var(--signal); }

tbody td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
tbody tr:hover { background: var(--surface); }
tbody tr.aleasa { background: var(--signal-bg); }
tbody tr.trimisa { color: var(--faint); }

td.cui { color: var(--mute); }
td.nume { font-family: var(--f-sans); font-weight: 500; color: var(--depth); min-width: 210px; }
td.tel a { color: var(--signal); text-decoration: none; }
td.tel a:hover { text-decoration: underline; }
td.tel .lipsa { color: var(--faint); }

/* Pe cate firme mai apare numarul. Sub numar, nu langa el: numarul e ce se
 * apeleaza, asta e o avertizare despre el. */
.pe-numar {
    display: block; margin-top: 3px;
    font-size: 10px; letter-spacing: .04em;
    color: var(--sand);
}
.pe-numar.rau { color: var(--alarm); font-weight: 600; }

/* Cifra de afaceri, sub telefon. Lipseste la firmele proaspete si atunci nu se
 * arata nimic - un zero ar minti. */
.ca {
    display: block; margin-top: 3px;
    font-size: 10px; letter-spacing: .03em; color: var(--mute); cursor: help;
}
td.admin { font-family: var(--f-sans); color: var(--mute); }

/* Numele de contact, dublat sub denumire. Se vede DOAR pe ecran ingust, acolo
 * unde coloana Administrator e ascunsa; pe lat ar fi de doua ori acelasi lucru
 * pe acelasi rand. */
.contact-mobil { display: none; }
td.chk { width: 30px; }
td.chk input { accent-color: var(--signal); }

.pill {
    display: inline-block;
    font-size: 10px;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 2px;
    border: 1px solid var(--rule-2);
    color: var(--mute);
    white-space: nowrap;
}
.pill.srl { color: var(--signal); border-color: var(--signal); background: var(--signal-bg); }
.pill.pfa { color: var(--sand); border-color: var(--sand); background: var(--sand-bg); }
.pill.sediu_secundar, .pill.alta { color: var(--faint); }
.pill.rea { color: var(--alarm); border-color: var(--alarm); background: var(--surface); font-weight: 600; }

.caen { color: var(--mute); font-size: 11px; display: block; max-width: 260px; }
.caen b { color: var(--ink); font-weight: 600; }

/* Semnele fiscale stau sub CUI, care e tot un cod fiscal. Doua litere, nu o
 * pastila: sunt un detaliu de sprijin, nu starea firmei. */
.fisc { display: flex; gap: 4px; margin-top: 3px; }
.fisc b {
    font-size: 9px; font-weight: 600; letter-spacing: .06em;
    padding: 1px 4px; border-radius: 2px;
    color: var(--signal); background: var(--signal-bg); border: 1px solid var(--edge);
    cursor: help;
}

/* Pachetul recomandat: raspunsul la „si acum ce-i propun?”. Sub segment, care
 * spune doar in ce ramura e firma. */
.oferta { min-width: 150px; }
.pachet {
    display: block; margin-top: 2px;
    font-size: 10px; color: var(--signal); letter-spacing: .02em;
}

/* Un rand inactiv fiscal ramane vizibil, dar nu se mai citeste ca un lead: fara
 * bifa, 13.356 dintre ele stateau in coada de sunat fara niciun semn. */
tbody tr.inactiva td { background: var(--alarm-bg); }
tbody tr.inactiva .nume { color: var(--mute); }

/* ---------------------------------------------------------------- bara de jos */

.bara {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 18px;
    background: var(--surface);
    border-top: 1px solid var(--rule-2);
    box-shadow: 0 -6px 22px rgba(0, 0, 0, .45);
    z-index: 35;
    transform: translateY(100%);
    transition: transform .16s ease-out;
}
.bara.vizibila { transform: none; }
.bara .cate { font-weight: 600; color: var(--depth); }
.bara .cate b { color: var(--signal); }

/* ---------------------------------------------------------------- panouri */

.panou { padding: 18px; }
.panou h2 {
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 11px;
}

.card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.job { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rule); }
.job:last-child { border-bottom: 0; }
.job .tip { font-weight: 600; color: var(--depth); min-width: 84px; }
.job .stare { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; }
.job .stare.terminat { color: var(--signal); }
.job .stare.esuat { color: var(--alarm); }
.job .stare.pornit { color: var(--sand); }
.job .stare.fara-semn {
    color: var(--alarm); border: 1px solid var(--alarm); background: var(--alarm-bg);
    padding: 1px 6px; border-radius: 2px; cursor: help;
}
.job.rau .tip { color: var(--alarm); }
.job .cand { color: var(--faint); margin-left: auto; font-size: 11px; }
.job .rez { color: var(--mute); font-size: 11px; }

/* ---------------------------------------------------------------- intrare */

.poarta {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
}
.poarta form {
    width: 100%;
    max-width: 340px;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 3px;
    padding: 26px;
}
.poarta .mark { font-size: 16px; margin-bottom: 4px; display: block; }
.poarta p { font-size: 12px; color: var(--mute); margin-bottom: 18px; }
.poarta input { width: 100%; margin-bottom: 11px; padding: 9px 10px; }
.poarta button { width: 100%; padding: 10px; }

.eroare {
    font-family: var(--f-sans);
    font-size: 12px;
    color: var(--alarm);
    background: var(--alarm-bg);
    border: 1px solid var(--alarm);
    border-radius: 2px;
    padding: 8px 10px;
    margin-bottom: 11px;
}

.gol {
    text-align: center;
    padding: 56px 20px;
    color: var(--mute);
    font-family: var(--f-sans);
}
.gol strong { display: block; color: var(--depth); font-size: 15px; margin-bottom: 6px; font-weight: 600; }
.gol.rau strong { color: var(--alarm); }
.gol button { margin-top: 14px; }

.ascuns { display: none !important; }

/* Ascuns pentru ochi, citibil pentru browser, pentru managerul de parole si
 * pentru cititorul de ecran. `display:none` sau `hidden` l-ar face invizibil si
 * pentru ele. Al doilea nume e pentru textul care completeaza o prescurtare -
 * „TVA” se vede, „platitoare de TVA” se aude. */
.doar-pentru-browser,
.doar-pentru-cititor {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* bara de versiune, cand serverul are alt build decat pagina */
.verbar {
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--depth); color: var(--vellum);
    font-family: var(--f-sans); font-size: 12px;
    padding: 10px 18px; display: flex; align-items: center; gap: 12px; z-index: 60;
}
.verbar button {
    font-family: var(--f-sans); font-size: 12px; padding: 5px 11px;
    background: var(--signal); color: var(--pe-signal); border: 0; border-radius: 2px; cursor: pointer;
}

@media (max-width: 1100px) {
    .tabel-wrap { overflow-x: auto; }
    thead th { position: static; }
    table { min-width: 940px; }
}

@media (max-width: 720px) {
    .rail { gap: 10px; padding: 0 12px; }
    .rail-sub { display: none; }
    .filters { position: static; }
}

/* --- unde traieste numele de contact ---
 *
 * 800px, nu 720. Tabelul nu are 940px cum spune `min-width`, ci 1225: latimile
 * minime ale celulelor il impinge acolo. Coloana Administrator se termina la
 * x=765, deci sub ~800px iese din ecran si trebuie derulata pe orizontala ca
 * s-o vezi. Cu pragul la 720, intre 721 si 800 numele nu era NICAIERI: coloana
 * afisata dar in afara ecranului, iar linia de sub denumire inca ascunsa.
 * Exact latimea unei tablete in portret.
 *
 * Cele doua reguli trebuie sa aiba mereu acelasi prag: coloana se retrage
 * fix acolo unde apare linia, ca numele sa existe intr-un singur loc la orice
 * latime, si sa nu lipseasca la niciuna. */
@media (max-width: 800px) {
    td.admin, th.admin { display: none; }

    .contact-mobil {
        display: block;
        margin-top: 4px;
        font-family: var(--f-sans);
        font-weight: 500;
        font-size: 11px;
        color: var(--signal);
    }
    /* Eticheta, nu o pictograma: un simbol de telefon langa un nume de om
     * sugereaza ca ala e numarul care se apeleaza. */
    .contact-mobil i {
        font-style: normal;
        font-size: 9px;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--faint);
        margin-right: 6px;
    }
}

/* ---------------------------------------------------------------- analiza */

/* Doua grafice desenate din div-uri, fara nicio librarie. Stau in vederea
 * Explorare, nu pe prima pagina: pe "Astazi" panglica spune deja totul si
 * doua diagrame in plus ar fi zgomot. */

.analiza {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 1px;
    background: var(--rule);
    border-bottom: 1px solid var(--rule);
}
@media (max-width: 900px) { .analiza { grid-template-columns: 1fr; } }

.grafic { background: var(--surface); padding: 15px 18px 16px; min-width: 0; }
.grafic h2 {
    font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--mute); margin-bottom: 13px;
}
.grafic h2 span { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--faint); }

.coloane { display: flex; align-items: flex-end; gap: 2px; height: 108px; }
.zi {
    flex: 1 1 0; min-width: 2px; position: relative;
    background: var(--rule-2); border-radius: 1px 1px 0 0; cursor: default;
}
.zi .apelabile {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: var(--signal); border-radius: 1px 1px 0 0;
}
.zi:hover { background: var(--depth); }
.zi.azi { outline: 1px solid var(--signal); outline-offset: 1px; }

.axa { display: flex; justify-content: space-between; margin-top: 7px; font-size: 10px; color: var(--faint); }

.bare { display: flex; flex-direction: column; gap: 5px; }
.bara-jud { display: flex; align-items: center; gap: 9px; font-size: 11px; }
.bara-jud .nume { width: 104px; color: var(--mute); text-align: right; flex: none;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bara-jud .sina { flex: 1; height: 11px; background: var(--sunk); border-radius: 1px; overflow: hidden; }
/* `display: block` nu e de forma: `.plin` e un <span>, iar un element inline
 * ignora si `width` si `height`. Bara de judete a stat goala de la inceput -
 * fundalul sinei se vedea, umplutura avea latime zero, si graficul arata ca si
 * cum n-ar fi fost date. Sora ei de la credite avea `display: block`. */
.bara-jud .plin { display: block; height: 100%; background: var(--signal); border-radius: 1px; }
.bara-jud .n { width: 36px; color: var(--depth); font-weight: 600; flex: none; }

/* ---------------------------------------------------------------- setari */

/* Setarile se citesc, nu se scaneaza: coloana ramane ingusta, cu comanda
 * imediat langa eticheta ei. Latita pe tot ecranul, eticheta ajungea la un
 * capat si campul la celalalt, si nu se mai vedea ce comanda ce. */
#panouSetari { max-width: 860px; }

.panou .prose.mic { font-size: 12px; color: var(--mute); margin-bottom: 14px; max-width: 62ch; line-height: 1.5; }
.h2-nota { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--faint); margin-left: 9px; }

/* ---- chei ---- */

/* Grila, nu flex cu wrap: cu `flex-wrap` si `margin-left:auto`, butoanele
 * treceau pe randul urmator si se lipeau de marginea STANGA, adica exact
 * invers decat voiam. Grila le tine in coloana a doua orice s-ar intampla. */
.cheie {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    padding: 13px 0;
    border-bottom: 1px solid var(--rule);
}
.cheie:last-of-type { border-bottom: 0; }

.cheie-cap { grid-column: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cheie-masca { font-weight: 600; font-size: 13px; color: var(--depth); letter-spacing: .05em; }
.cheie-eticheta { color: var(--mute); font-family: var(--f-sans); font-size: 12px; }
.cheie-actiuni { grid-column: 2; grid-row: 1; display: flex; gap: 5px; align-items: start; }
.cheie-actiuni button {
    font-family: var(--f-sans); font-size: 11px; padding: 4px 9px;
    border: 1px solid var(--edge); background: var(--surface); color: var(--mute);
    border-radius: 2px; cursor: pointer; white-space: nowrap;
}
.cheie-actiuni button:hover { color: var(--signal); border-color: var(--signal); }
.cheie-actiuni button.rau:hover { color: var(--alarm); border-color: var(--alarm); }

.stare-pastila {
    font-size: 10px; letter-spacing: .09em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 2px; border: 1px solid var(--rule-2); color: var(--mute);
}
.stare-pastila.activa   { color: var(--signal); border-color: var(--signal); background: var(--signal-bg); }
.stare-pastila.epuizata { color: var(--sand);   border-color: var(--sand);   background: var(--sand-bg); }
.stare-pastila.invalida { color: var(--alarm);  border-color: var(--alarm);  background: var(--alarm-bg); }
.stare-pastila.oprita   { color: var(--faint); }

.credite { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-size: 11px; color: var(--mute); flex-wrap: wrap; }
.credite .sina {
    flex: 0 0 220px; height: 8px; background: var(--sunk);
    border: 1px solid var(--rule); border-radius: 4px; overflow: hidden;
}
.credite .plin { display: block; height: 100%; background: var(--signal); transition: width .2s; }
.credite .plin.plina { background: var(--sand); }
.credite .plin.gata  { background: var(--alarm); }
.credite .cifre { font-variant-numeric: tabular-nums; color: var(--depth); font-weight: 600; }
.credite .motiv { color: var(--alarm); font-family: var(--f-sans); }

.cheie-noua {
    display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
    margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--rule);
}
.cheie-noua input[type='password'] { flex: 1 1 260px; }
.cheie-noua input[type='text']     { flex: 0 1 170px; }
.cheie-noua input[type='number']   { flex: 0 0 110px; }

/* ---- setari propriu-zise ---- */

.setare {
    display: flex; align-items: flex-start; gap: 24px;
    padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.setare:last-child { border-bottom: 0; }
.setare .text { flex: 1; min-width: 0; }
.setare .titlu { display: block; font-weight: 600; color: var(--depth); margin-bottom: 3px; }
.setare .ajutor { font-family: var(--f-sans); font-size: 12px; color: var(--mute); line-height: 1.5; }
.setare .camp { flex: none; padding-top: 1px; }
.setare input[type='number'] { width: 100px; }

.comutator { display: inline-flex; border: 1px solid var(--edge); border-radius: 2px; overflow: hidden; }
.comutator button {
    font-family: var(--f-sans); font-size: 12px; padding: 6px 15px;
    border: 0; background: var(--surface); color: var(--mute); cursor: pointer;
}
.comutator button:hover { color: var(--depth); }
.comutator button[aria-pressed='true'] { background: var(--signal); color: var(--pe-signal); }

@media (max-width: 640px) {
    .setare { flex-direction: column; gap: 9px; }
    .cheie { grid-template-columns: 1fr; }
    .cheie-actiuni { grid-column: 1; grid-row: auto; }
}

/* ---------------------------------------------------------------- site */

td.site { min-width: 210px; }

.site-cel { position: relative; display: inline-flex; align-items: center; gap: 7px; }
.site-cel a { color: var(--signal); text-decoration: none; }
.site-cel a:hover { text-decoration: underline; }
.site-nimic { color: var(--faint); font-size: 11px; }

.nota {
    font-weight: 600; font-size: 11px; padding: 1px 6px; border-radius: 2px;
    border: 1px solid var(--rule-2); color: var(--mute); font-variant-numeric: tabular-nums;
}
.nota.mare  { color: var(--signal); border-color: var(--signal); background: var(--signal-bg); }
.nota.medie { color: var(--sand);   border-color: var(--sand);   background: var(--sand-bg); }
.nota.mica  { color: var(--faint); }
.nota-lipsa { color: var(--faint); font-size: 13px; padding: 0 4px; }

/* Butonul care deschide sursele. Pe telefon nu exista hover, deci fara el
 * panoul era de neatins acolo. Cifra de pe el e cate surse stiu domeniul -
 * doi inseamna „doua surse nu spun acelasi lucru”, exact ce vrei sa vezi. */
.surse-buton {
    font-family: var(--f-sans); font-size: 10px; font-weight: 500;
    height: 18px; padding: 0 7px;
    border: 1px solid var(--edge); border-radius: 9px;
    background: var(--surface); color: var(--mute);
    cursor: pointer; line-height: 1;
}
.surse-buton:hover { color: var(--signal); border-color: var(--signal); }

/* Cat timp scannerul propriu e in calibrare, un domeniu gasit de el nu se
 * prezinta ca sigur. `contestat` inseamna ca Tavily a gasit altceva - si
 * atunci amandoua stau in panoul de surse. */
.ver {
    font-style: normal; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
    padding: 1px 5px; border-radius: 2px; color: var(--faint);
    border: 1px solid var(--rule-2); cursor: help;
}
.ver.bun { color: var(--signal); border-color: var(--signal); }
.ver.rau { color: var(--alarm); border-color: var(--alarm); font-weight: 600; }
.site-cel.deschis .surse-buton { color: var(--pe-signal); background: var(--signal); border-color: var(--signal); }

/* Panoul cu toate sursele. Se adauga, nu inlocuieste nimic. */
.surse-panou {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    min-width: 320px; max-width: 460px;
    background: var(--surface); border: 1px solid var(--edge); border-radius: 3px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .55);
    padding: 4px 0;
    opacity: 0; visibility: hidden; transform: translateY(-3px);
    transition: opacity .12s, transform .12s, visibility .12s;
    pointer-events: none;
}

/* Deschis prin apasare: singura cale pe ecran atins, si tot ce trebuie pentru
 * tastatura. `pointer-events` se intoarce, altfel legaturile dinauntru nu se
 * pot apasa - lipsea si la hover, deci panoul era doar de privit. */
.site-cel.deschis .surse-panou {
    opacity: 1; visibility: visible; transform: none; pointer-events: auto;
}

@media (hover: hover) {
    .site-cel:hover .surse-panou,
    .site-cel:focus-within .surse-panou {
        opacity: 1; visibility: visible; transform: none; pointer-events: auto;
    }
}

.sursa { padding: 9px 13px; border-bottom: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 5px 10px; align-items: baseline; }
.sursa:last-child { border-bottom: 0; }
.sursa-nume {
    font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
    color: var(--signal); flex: 0 0 auto;
}
.sursa-domeniu { color: var(--depth); font-weight: 600; }
.sursa-nota, .sursa-scor { font-size: 11px; color: var(--mute); }
.sursa-dovada { font-size: 10px; color: var(--signal); letter-spacing: .04em; }
.sursa-text {
    flex: 1 0 100%; font-family: var(--f-sans); font-size: 11px; color: var(--mute);
    line-height: 1.45; margin-top: 2px;
}

/* ================================================================ asezare
 *
 * Masurat pe un ecran de 371px: pagina se derula pe orizontala (437 > 371),
 * navigatia iesea din ecran, si TOATE tintele de atins aveau 28-31px, sub
 * pragul la care degetul le nimereste. Reparat aici, la sfarsit, ca sa bata
 * ce e mai sus fara sa rescriu regulile de dinainte.
 */

/* Navigatia se centreaza fata de PAGINA, nu fata de vecinii ei.
 *
 * Cu o grila `auto 1fr auto`, coloana din mijloc incepe dupa subtitlu si se
 * termina inaintea butoanelor; cum subtitlul e mult mai lat, centrul ei era la
 * 115px de centrul paginii. Scoasa din flux si asezata la 50%, e centrata
 * exact, oricat ar creste textul din stanga. */
.rail { height: auto; min-height: var(--rail); }
.rail .nav {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.rail-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 26vw;
}

/* Panourile de citit stau centrate, nu lipite de marginea stanga a unui
 * ecran de doua ori mai lat decat au nevoie. */
#panouSetari, #panouJoburi { max-width: 860px; margin: 0 auto; }

/* --- ecrane inguste --- */

@media (max-width: 760px) {
    /* Marca si butoanele pe primul rand, navigatia pe al doilea, cu derulare
     * proprie daca nu incape - pagina intreaga nu are voie sa se miste. */
    /* Pe ingust navigatia se intoarce in flux, pe al doilea rand, cu derulare
     * proprie daca nu incape. Pagina intreaga nu are voie sa se miste. */
    .rail { flex-wrap: wrap; padding: 8px 12px; gap: 8px 10px; }
    .rail-sub { display: none; }
    .rail .nav {
        position: static;
        transform: none;
        order: 3;
        flex: 1 0 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .rail .nav::-webkit-scrollbar { display: none; }
    .rail .nav button { flex: 1 0 auto; }
    .rail-end { order: 2; }

    /* Nimic nu are voie sa impinga pagina pe orizontala. */
    html, body { overflow-x: hidden; }
    .kpis { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); }
    .filters { padding: 10px 12px; }
    .filters input[type='search'] { min-width: 0; flex: 1 1 100%; }
    .filters select { max-width: none; flex: 1 1 132px; }
    .ribbon-wrap, .panou { padding-left: 12px; padding-right: 12px; }
    .bara { padding: 10px 12px; flex-wrap: wrap; }
    .bara .rail-sub { display: none; }

    /* Pe telefon panoul de surse e o foaie de jos, nu un balon agatat de
     * celula. `position: fixed` cu `top: calc(100% + 6px)` insemna 100% din
     * INALTIMEA ecranului plus 6px, adica sub marginea de jos - panoul era
     * acolo, dar nimeni nu-l putea vedea. */
    .surse-panou {
        position: fixed;
        left: 8px; right: 8px; bottom: 8px; top: auto;
        min-width: 0; max-width: none;
        max-height: 60vh; overflow-y: auto;
    }
}

/* --- tinte pe care le nimereste degetul ---
 *
 * Se aplica si pe ecran ingust, si pe orice ecran atins cu degetul. Numai
 * dupa `pointer: coarse` nu ajungea: hibridele raporteaza cursor fin desi se
 * folosesc cu degetul, iar regula nici nu se putea verifica intr-un browser
 * de birou. Pe ecran lat cu mouse raman compacte - densitatea e chiar rostul
 * acestei interfete. */
@media (max-width: 760px), (pointer: coarse) {
    .nav button, button.act, .check, .cheie-actiuni button, .comutator button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* Butonul de surse ramane mic pe ecran - e o cifra intr-un rand de tabel -
     * dar zona pe care o prinde degetul creste la 44px in jurul lui, fara sa
     * imprastie randul. */
    .surse-buton { position: relative; }
    .surse-buton::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 44px; height: 44px;
    }
    /* 24px e minimul la care o tinta se nimereste cu degetul; 20 nu era. */
    td.chk input[type='checkbox'], #alegeTot { width: 24px; height: 24px; }
    td.chk, th.chk { width: 44px; }
    th.chk { padding-top: 12px; padding-bottom: 12px; }
    tbody td { padding-top: 11px; padding-bottom: 11px; }
    .filters input, .filters select { min-height: 44px; }
}