/*
 * CAT AER LASA PORTALUL IN JURUL CONTINUTULUI.
 *
 * Filament vine cu spatii mari, potrivite pentru pagini cu putine randuri. Aici se lucreaza pe liste
 * lungi - articole, gestiuni, preturi - si intra pe ecran de vreo doua ori mai putin decat ar trebui.
 *
 * DE UNDE VINE. E foaia din portalul de distributie carburanti, adusa ca atare. Acolo ea NU face
 * parte din tema: e un fisier separat, incarcat ULTIMUL, dupa tema si dupa Filament. Tema
 * (`pontaj-theme.css`) chiar e aceeasi in amandoua proiectele - de aceea „avem acelasi css" era
 * adevarat, si totusi paginile aratau altfel: lipsea tocmai foaia asta.
 *
 * Nu s-au adus bucatile care tin numai de ele: verdele paginii active din bara de sus (marca lor) si
 * regulile coloanei `dependente`, care in portal nu exista.
 *
 * Totul se invarte in jurul celor cateva marimi din `:root`. Daca iese prea stramt sau prea larg, se
 * umbla NUMAI la ele.
 *
 * SE INCARCA ULTIMA, din AdminPanelProvider. Daca ajunge inaintea temei nu se vede: tema pune
 * `!important` pe regulile ei.
 */
:root {
        --dens-rand-y: 4px;     /* sus si jos, in celula */
        --dens-rand-x: 4px;     /* stanga si dreapta, in celula */
        --dens-pagina: 14px;    /* marginea paginii */
        --dens-litera: 13px;    /* marimea scrisului din tabele */
        --dens-linie: 18px;     /* inaltimea randului de text */
    }

    /* ── pagina ──────────────────────────────────────────────────────────── */

    .fi-main {
        padding-inline: var(--dens-pagina) !important;
        padding-block: 8px !important;
    }

    .fi-header {
        padding-block: 0 !important;
        margin-bottom: 6px !important;
    }

    .fi-header-heading {
        font-size: 1.15rem !important;
        line-height: 1.6rem !important;
    }

    .fi-breadcrumbs {
        margin-bottom: 2px !important;
    }

    /* Capul paginii: titlul si butoanele din dreapta lui. */
    .fi-page-header-main-ctn {
        row-gap: calc(var(--spacing) * 2);
        padding-block: calc(var(--spacing) * 2);
    }

    /* Distanta dintre ferestrele de pe prima pagina si dintre sectiuni. */
    .fi-sc-has-gap {
        gap: 8px !important;
    }

    /* ── tabele ──────────────────────────────────────────────────────────── */

    .fi-ta-header-cell,
    .fi-ta-cell {
        padding: var(--dens-rand-y) var(--dens-rand-x) !important;
    }

    /* Prima celula avea o margine dubla la stanga, ca sa respire; nu mai trebuie. */
    .fi-ta-header-cell:first-child,
    .fi-ta-cell:first-child,
    .fi-ta-selection-cell,
    .fi-ta-actions-header-cell {
        padding-inline-start: var(--dens-rand-x) !important;
    }

    .fi-ta-text,
    .fi-ta-text-item {
        padding: 0 !important;
        font-size: var(--dens-litera) !important;
        line-height: var(--dens-linie) !important;
    }

    .fi-ta-header-cell,
    .fi-ta-header-cell-sort-btn {
        font-size: var(--dens-litera) !important;
        line-height: var(--dens-linie) !important;
    }

    /*
        Bara de deasupra tabelului: cautarea si alegerea coloanelor.

        CAPCANA: sunt DOUA cutii una in alta, si amandoua au margine. Puse pe
        aceeasi valoare, se aduna: bara ramanea de 62 de pixeli pentru un camp de
        cautare de 36. Marginea se lasa numai pe cea dinauntru.
    */
    .fi-ta-header-ctn {
        padding: 0 !important;
    }

    .fi-ta-header-toolbar {
        padding: 5px var(--dens-rand-x) !important;
    }

    .fi-ta-search-field .fi-input-wrp,
    .fi-ta-search-field .fi-input {
        min-height: 30px !important;
        padding-block: 2px !important;
    }

    .fi-pagination {
        padding: 6px var(--dens-rand-x) !important;
    }

    /*
        „Nu s-au gasit date": un dreptunghi de 185 de pixeli cu un semn mare in
        mijloc. Pe prima pagina, unde stau trei ferestre una sub alta, doua liste
        goale impingeau a treia sub marginea ecranului.
    */
    .fi-ta-empty-state {
        padding: 16px !important;
    }

    /*
        Cercul cu semnul „nu este nimic aici".
        Cercul a fost stramtorat de la marimea lui Filament la 30 de pixeli, dar
        semnul dinauntru si-a pastrat marimea, si iesea dintr-o parte: nu statea
        in mijloc. Deci si cercul se aseaza pe mijloc, si semnul se micsoreaza
        odata cu el.
    */
    .fi-ta-empty-state-icon-bg {
        width: 30px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    .fi-ta-empty-state-icon-bg .fi-icon,
    .fi-ta-empty-state-icon-bg svg {
        width: 16px !important;
        height: 16px !important;
        margin: 0 !important;
        flex: none;
    }

    .fi-ta-cell .fi-icon-btn {
        padding: 3px !important;
    }

    /* ── bara de sus ─────────────────────────────────────────────────────── */
    /*
        AICI NU SE STRANGE NIMIC, si e o deosebire fata de portalul din care a venit foaia asta.
        Acolo bara de sus e doar o bara, cu cateva butoane; aici ea ESTE MENIUL aplicatiei
        (`topNavigation()`). Stransa la trei pixeli, se strang chiar butoanele de meniu: randul de
        sus se ingusteaza si se impinge, si se vede la fiecare deschidere de fereastra.

        Regulile scoase pe 31.08.2026 erau:
            .fi-topbar-ctn, .fi-topbar > nav { padding-block: 3px !important; }
            .fi-topbar-item-btn            { padding-block: 5px !important; }

        Daca vreodata portalul trece pe meniu lateral, se pot pune inapoi.
    */

    /* ── formulare si ferestre ───────────────────────────────────────────── */

    .fi-modal-window {
        --modal-p: 14px;
    }

    .fi-modal-header,
    .fi-modal-content,
    .fi-modal-footer {
        padding: var(--modal-p, 14px) !important;
    }

    .fi-modal-header {
        padding-bottom: 6px !important;
    }

    .fi-modal-footer {
        padding-top: 8px !important;
    }

    .fi-section-content,
    .fi-section-header {
        padding: 10px !important;
    }

    .fi-section-header {
        padding-bottom: 4px !important;
    }

    /* Randurile dintr-un formular, unul sub altul. */
    .fi-fo-field-label-ctn {
        margin-bottom: 1px !important;
    }

    .fi-grid.fi-sc-component {
        gap: 8px !important;
    }

    /*
        Campurile de scris: un formular de companie are optzeci. Fiecare camp era
        de 65 de pixeli - eticheta, casuta si aer imprejur - deci formularul se
        derula de patru ori. Coborate la 50, intra cu o treime mai mult pe ecran
        si nu se pierde nimic din citit.
    */
    .fi-fo-field-label,
    .fi-fo-field-label-content {
        font-size: var(--dens-litera) !important;
        line-height: var(--dens-linie) !important;
    }

    .fi-input,
    .fi-select-input-btn {
        padding-block: 4px !important;
        font-size: var(--dens-litera) !important;
        line-height: 20px !important;
    }

    /* talpa casutei de scris; urcata la 36 pe 02.09.2026 - vezi lamurirea de mai jos */
    .fi-input-wrp {
        min-height: 36px !important;
    }

    /*
        Pe ecrane mici lucrurile se apasa cu degetul, deci semnele de pe rand isi
        primesc inapoi locul lor; altfel se nimereste greu.
    */
    @media (max-width: 640px) {
        :root {
            --dens-rand-y: 9px;
            --dens-pagina: 8px;
        }

        .fi-ta-cell .fi-icon-btn {
            padding: 6px !important;
        }
    }

/* ── ADAOSUL NOSTRU, pentru Filament 5 ───────────────────────────────────────
 *
 * Foaia de mai sus vine din portalul de distributie carburanti, care merge pe Filament 4. Aici
 * suntem pe 5, iar cateva bucati de interfata s-au mutat sub alte nume - regulile de acolo nu le
 * mai prind. Ce urmeaza NU se afla in foaia lor.
 */

/*
    Coloanele cu semn (bifa verde de la «Activ», si celelalte la fel).
    In Filament 5 semnul sta intr-un `.fi-ta-icon` cu 16 pixeli de aer sus si jos. Un semn de 24 de
    pixeli ajunge asa la 56, iar randul intreg se intinde dupa el: degeaba erau celelalte celule de
    26 de pixeli, randul ramanea la 65. Aerul se scoate; semnul ramane cat era.
*/
.fi-ta-icon {
    padding: 0 !important;
}

/*
    ALEGEREA DINTR-O LISTA, la fel de inalta ca un camp de scris.

    Pe acelasi rand, «Telefon» avea 30 de pixeli si «Client facturat» 36: doua casute vecine, una
    mai umflata decat cealalta, si se vedea. MASURAT pe foile adevarate (tema lui Filament 5.7.1 plus
    foaia asta), nu socotit din cap.

    De unde venea. Regulile de mai sus strang scrisul din butonul de alegere - `padding-block: 4px`,
    `line-height: 20px`, deci continutul lui ajunge la 28 - dar Filament ii tine talpa cu
    `min-height: calc(var(--spacing) * 9)`, adica 36 de pixeli, in DOUA locuri deodata:
    `.fi-select-input .fi-select-input-btn` si `.fi-select-input div[x-ref=select]`, cutia in care
    isi construieste JS-ul lui alegerea. Cat timp oricare dintre ele ramane la 36, casuta ramane la
    36, oricat de strans ar fi scrisul dinauntru.

    De ce 30 si nu alta cifra: e chiar talpa campului de scris, `.fi-input-wrp` de mai sus. Se leaga
    de ea, ca sa nu porneasca a doua oara la departare.

    INTORS PE 02.09.2026: cifra este acum 36, la amandoua. Randurile de mai jos spun de ce, si
    lamurirea asta ramane scrisa fiindca socoteala ei este in continuare adevarata - s-a schimbat
    doar cifra la care se leaga toate.

    Ramane `min-height`, nu `height`: o alegere cu mai multe raspunsuri isi pune raspunsurile ca
    bilete unul langa altul si trebuie sa poata creste. Legata la o inaltime fixa, biletele ar iesi
    din casuta.
*/
/*
    ── 36, NU 30. INDREPTARE din 02.09.2026, dupa ce Alex a masurat pe ecranul lui ──────────

    Ce scrie mai sus a fost adevarat pe jumatate: casutele s-au potrivit intre ele, dar NU si cu
    casuta de NUMAR, cea de la «Ținta (lei)». Ea nu are alegere inauntru, deci aceleasi margini nu
    dau aceeasi inaltime: sagetile de urcat-coborat isi cer locul lor si o umfla. Doua casute vecine
    cu aceleasi reguli si inaltimi diferite - de aceea nu se putea potrivi tragand in jos.

    Cuvintele lui: «doar pe inputul Țintă, care este de fapt un number input, am diferente; el
    neavand un select interior, paddingul desi identic cu cele cu select, nu produce acelasi
    rezultat; daca setez .fi-input, .fi-select-input-btn { min-height: 36px } arata identic».

    Deci se leaga toate la 36, nu la 30: se da fiecarei casute aceeasi talpa, in loc sa se stranga
    unele pana ating pe altele. Casuta de numar nu mai are de unde sa creasca peste vecine, fiindca
    36 este deja peste cat ii cer sagetile.

    MASURAT PE ECRANUL LUI, nu socotit aici: fereastra se face de JS dupa autentificare, iar o proba
    facuta pe langa aplicatie a iesit nefidela si a fost aruncata.
*/
.fi-input,
.fi-select-input .fi-select-input-btn,
.fi-select-input div[x-ref='select'] {
    min-height: 36px !important;
}


/*
    ── CASUTELE DIN FERESTRE: aceeasi inaltime, si semnul de golire in mijloc ──────────────
    Cerut de Alex pe 02.09.2026, uitandu-se la fereastra «Adăugare target».

    1. ACEEASI TALPA PENTRU TOATE. Regula de mai sus lega la 30 de pixeli doar butonul de alegere
    si cutia in care JS-ul isi construieste alegerea. Inauntrul lor mai sunt doua cutii care isi
    pastreaza masura lor si pot impinge casuta mai jos decat vecina ei de pe acelasi rand: cutia
    valorii alese si randul de bilete la alegerile cu mai multe raspunsuri. Se leaga si ele.

    `min-height`, nu `height`, din acelasi motiv ca mai sus: o alegere cu mai multe raspunsuri
    trebuie sa poata creste cand biletele nu mai incap pe un rand.
*/
.fi-select-input .fi-select-input-value-ctn,
.fi-select-input .fi-select-input-value-badges-ctn {
    min-height: 20px !important;
}

/*
    2. SEMNUL DE GOLIRE, CENTRAT PE CASUTA LUI.

    Filament ii da butonului numai locul (`top: 50%` si o ridicare de jumatate din inaltimea lui),
    nu si o masura. Ramane un buton cu un desen inauntru, iar desenul sta pe linia de scris: sub el
    se lasa spatiul pe care orice litera il tine pentru coada lui `g` sau `p`. Butonul iese astfel
    mai inalt decat semnul din el, iar semnul urca fata de mijlocul casutei - cu atat cu cat e acel
    spatiu. De aceea „e sus", desi socoteala pozitiei e corecta.

    Se face cutie care isi aseaza continutul in mijloc, pe amandoua directiile, si i se stinge
    inaltimea de linie. Atunci nu mai ramane spatiu de coada de litera, iar mijlocul butonului este
    chiar mijlocul semnului.

    NU i se scrie o masura. Marimea semnului o da Filament, prin `fi-size-sm`; scrisa si aici, s-ar
    despartii de a lui la prima schimbare de tema, si semnul ar iesi din casuta lui.
*/
.fi-select-input .fi-select-input-value-remove-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    line-height: 0 !important;
}

.fi-select-input .fi-select-input-value-remove-btn > svg {
    display: block !important;
}