/*
 * Stilurile proprii ale panoului.
 *
 * Filament isi compileaza CSS-ul cu doar clasele pe care le foloseste el, deci
 * clasele Tailwind scrise intr-un blade al nostru nu exista si nu se aplica.
 * De aceea stilurile de aici sunt clase proprii, nu utilitare, si de aceea nu
 * sunt scrise inline in blade.
 *
 * Fisierul se incarca dintr-un render hook, cu filemtime la coada, deci se
 * reimprospateaza singur cand il schimbam.
 */

/* Sigla, in meniu si la logare
   -------------------------------------------------------------------------- */

.axiotas-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    height: 100%;
}

/*
 * Inaltimea vine din cutia pe care o deseneaza Filament, "fi-logo", si care
 * primeste un stil inline. Semnul o umple si isi pastreaza proportia.
 */
.axiotas-brand img {
    height: 100%;
    width: auto;
    flex-shrink: 0;
}

/*
 * Semnul rosu, sub marca.
 *
 * „#ff1d25" e rosul eMAG, luat din foaia lor de stil, „--brand-emag-red". Cade
 * la o unghie de rosul din sigla Axiotas, „#f71c1c", deci nu se bate cu ea.
 *
 * O linie de doi pixeli, nicio suprafata plina. Rosul are deja un inteles in
 * aplicatie: „anulat" si „sterge". Daca ar umple ceva, ar incepe sa insemne
 * doua lucruri deodata, si omul nu ar mai sti pe care sa se sperie. Ca linie
 * sub marca nu spune nimic despre starea a ceva, spune doar Axiotas.
 *
 * Linia sta inauntrul cutiei numelui, nu atarnata sub ea: in meniu cutia siglei
 * are inaltime fixa si orice iese din ea se taie.
 */
.axiotas-brand-name {
    position: relative;
    padding-bottom: 5px;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: rgb(3 7 18);
}

.axiotas-brand-name::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 1.75rem;
    height: 2px;
    border-radius: 2px;
    background-color: rgb(255 29 37);
}

:where(.dark) .axiotas-brand-name {
    color: rgb(255 255 255);
}

/*
 * La logare sigla sta singura si mai mare. Numele aplicatiei ar cadea peste
 * titlul formularului, iar doua randuri ingrosate unul sub altul se citesc prost.
 */
/*
 * La logare marca sta singura, deci semnul poate sta sub ea, pe mijloc. Aici
 * sigla e mare si in jur nu e nimic altceva.
 */
.axiotas-brand--login {
    flex-direction: column;
    justify-content: center;
    gap: 0.875rem;
    height: auto;
}

/*
 * Inaltimea se scrie aici, nu se mai ia din cutie. Cutia are inaltimea pusa de
 * „brandLogoHeight", iar acum inauntru mai sta si linia rosie: daca sigla ar
 * cere in continuare toata inaltimea, s-ar inghesui una pe alta. Valoarea e
 * chiar cea pe care o da „brandLogoHeight" pentru cine nu e logat.
 */
.axiotas-brand--login img {
    height: 4.5rem;
    margin-inline: auto;
}

.axiotas-brand--login::after {
    content: '';
    width: 2.75rem;
    height: 2px;
    border-radius: 2px;
    background-color: rgb(255 29 37);
}

/* Versiunea, jos in meniu
   -------------------------------------------------------------------------- */

.axiotas-version {
    margin-top: 0.5rem;
    padding: 0.625rem 1.5rem;
    border-top: 1px solid rgb(0 0 0 / 0.06);
    font-size: 0.6875rem;
    line-height: 1;
    letter-spacing: 0.01em;
    color: rgb(107 114 128);
}

:where(.dark) .axiotas-version {
    border-top-color: rgb(255 255 255 / 0.08);
    color: rgb(156 163 175);
}

/* Despartirea dintre meniu si continut
   --------------------------------------------------------------------------
   O linie de un pixel, foarte discreta: fara ea, meniul si pagina par acelasi
   camp alb si ochiul nu stie unde se termina unul.

   Meniul ramane alb, iar pagina e gri: asa e si in aplicatia veche, si asa se
   vede unde se termina unul si incepe cealalta. */

.fi-sidebar.fi-main-sidebar {
    border-inline-end: 1px solid rgb(0 0 0 / 0.07);
}

:where(.dark) .fi-sidebar.fi-main-sidebar {
    border-inline-end-color: rgb(255 255 255 / 0.09);
    background-color: transparent;
}

/* Unde sunt acum
   --------------------------------------------------------------------------
   Randul activ din meniu are deja scrisul colorat, dar intr-o lista de
   douazeci de randuri ochiul il cauta. O dunga de trei pixeli pe margine se
   gaseste dintr-o privire, si tine locul unei culori puse peste tot.

   Culoarea nu e singurul semn: randul activ ramane si ingrosat, si marcat cu
   "aria-current", deci se vede si fara ea. */

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    position: relative;
}

.fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block: 0.375rem;
    width: 3px;
    border-radius: 3px;
    background-color: var(--primary-600);
}

/* Distanta intre o cantitate si unitatea ei
   --------------------------------------------------------------------------
   Cantitatea e aliniata la dreapta, iar coloana urmatoare incepe de la
   marginea ei, deci numarul si unitatea se ating. Un spatiu in plus la stanga
   le desparte fara sa strice alinierea numerelor. */

.axiotas-col-departe {
    padding-inline-start: 1.5rem;
}

/* Lista copiilor de siguranta
   -------------------------------------------------------------------------- */

.axiotas-copii {
    display: flex;
    flex-direction: column;
}

.axiotas-copie {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-top: 1px solid rgb(0 0 0 / 0.07);
}

.axiotas-copie:first-child {
    border-top: 0;
    padding-top: 0;
}

:where(.dark) .axiotas-copie {
    border-top-color: rgb(255 255 255 / 0.09);
}

.axiotas-copie-nume {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgb(3 7 18);
}

:where(.dark) .axiotas-copie-nume {
    color: rgb(255 255 255);
}

.axiotas-copie-detalii {
    font-size: 0.75rem;
    color: rgb(107 114 128);
}

:where(.dark) .axiotas-copie-detalii {
    color: rgb(156 163 175);
}

.axiotas-copie-actiuni {
    display: flex;
    gap: 0.5rem;
}

/* Titlul deasupra, drumul de navigare dedesubt
   --------------------------------------------------------------------------
   Filament pune firimiturile de paine deasupra titlului. Prima data cand
   deschizi un ecran citesti "Clienti > Listare" si abia apoi afli unde esti.
   Ordinea corecta e invers: intai numele paginii, apoi, marunt, drumul pana la
   ea. Se schimba doar asezarea, nu si ordinea din cod, deci un cititor de ecran
   aude in continuare navigarea inaintea titlului. */

.fi-header > div:first-child {
    display: flex;
    flex-direction: column;
}

.fi-header > div:first-child > .fi-header-heading {
    order: 1;
}

.fi-header > div:first-child > .fi-header-subheading {
    order: 2;
}

.fi-header > div:first-child > .fi-breadcrumbs {
    order: 3;
    margin-top: 0.5rem;
}

/*
 * Banda de sus, cat timp parola omului se ghiceste usor.
 *
 * Sta pe fiecare ecran si nu se poate inchide: daca s-ar putea, ar fi inchisa
 * din prima zi si nu ar mai vedea-o nimeni.
 */
.axiotas-parola-slaba {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgb(234 179 8 / 0.4);
    border-radius: 0.5rem;
    background: rgb(254 252 232);
    color: rgb(113 63 18);
    font-size: 0.875rem;
    line-height: 1.4;
}

.axiotas-parola-slaba--gata {
    border-color: rgb(239 68 68 / 0.45);
    background: rgb(254 242 242);
    color: rgb(127 29 29);
}

.axiotas-parola-slaba__semn {
    flex: none;
}

.axiotas-parola-slaba__text {
    flex: 1 1 auto;
}

/* Contorul zilelor, ca sa se vada dintr-o privire cat a mai ramas. */
.axiotas-parola-slaba__numar {
    flex: none;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgb(0 0 0 / 0.07);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

.axiotas-parola-slaba__buton {
    flex: none;
    padding: 0.35rem 0.75rem;
    border-radius: 0.375rem;
    background: rgb(113 63 18);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.axiotas-parola-slaba--gata .axiotas-parola-slaba__buton {
    background: rgb(127 29 29);
}

.axiotas-parola-slaba__buton:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .axiotas-parola-slaba {
        flex-wrap: wrap;
    }

    .axiotas-parola-slaba__text {
        flex-basis: 100%;
    }
}

:root[data-theme='dark'] .axiotas-parola-slaba,
:root:not([data-theme='light']) .axiotas-parola-slaba {
    background: rgb(66 32 6 / 0.55);
    color: rgb(253 230 138);
}

:root[data-theme='dark'] .axiotas-parola-slaba--gata,
:root:not([data-theme='light']) .axiotas-parola-slaba--gata {
    background: rgb(69 10 10 / 0.55);
    color: rgb(254 202 202);
}

/*
    Refuzurile venite din teren.

    Cand coada din telefon pleaca singura, la revenirea semnalului, raspunsul
    serverului nu mai are cui sa fie aratat: omul e pe alt ecran, sau cu telefonul
    in buzunar. Asa ca ce nu a intrat rămâne scris aici, sus, pe orice pagina, si
    nu pleaca decat daca il inchide el.

    Sta fixat, nu in curgerea paginii: un mesaj despre un material care nu s-a
    scazut din stoc nu are voie sa fie sub pliu.
*/
.axiotas-refuzuri {
    position: fixed;
    z-index: 40;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.axiotas-refuz {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgb(153 27 27 / 0.35);
    background: rgb(153 27 27);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.4;
}

.axiotas-refuz__semn {
    flex: none;
    font-size: 1.1em;
    line-height: 1.2;
}

.axiotas-refuz__text {
    flex: 1 1 auto;
}

.axiotas-refuz__cand {
    display: block;
    opacity: 0.8;
    font-size: 0.8125rem;
}

.axiotas-refuz__buton {
    flex: none;
    min-height: 1.75rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid rgb(255 255 255 / 0.5);
    border-radius: 0.375rem;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
}

.axiotas-refuz__buton:hover,
.axiotas-refuz__buton:focus-visible {
    background: rgb(255 255 255 / 0.15);
}

@media (max-width: 30rem) {
    .axiotas-refuz {
        flex-wrap: wrap;
    }

    .axiotas-refuz__buton {
        margin-left: auto;
    }
}

/*
    Unde se afla fiecare copie de siguranta: „local", „digi".

    Scrise cu litere, nu ghicite dintr-o culoare: cine nu deosebeste verdele de
    portocaliu trebuie sa poata citi acelasi lucru.
*/
.axiotas-unde {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

.axiotas-unde__semn {
    padding: 0.1rem 0.45rem;
    border: 1px solid transparent;
    border-radius: 0.3rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.axiotas-unde__semn--local {
    border-color: rgb(21 128 61 / 0.35);
    background: rgb(240 253 244);
    color: rgb(21 128 61);
}

.axiotas-unde__semn--digi {
    border-color: rgb(29 78 216 / 0.35);
    background: rgb(239 246 255);
    color: rgb(29 78 216);
}

.axiotas-unde__semn--lipsa {
    border-color: rgb(120 113 108 / 0.3);
    background: rgb(250 250 249);
    color: rgb(120 113 108);
}

/* Vestea de sus: trimiterea nu e pusa la punct, sau Digi nu raspunde. */
.axiotas-veste {
    padding: 0.75rem 1rem;
    border: 1px solid rgb(234 179 8 / 0.4);
    border-radius: 0.5rem;
    background: rgb(254 252 232);
    color: rgb(113 63 18);
    font-size: 0.875rem;
    line-height: 1.45;
}

.axiotas-veste--rea {
    border-color: rgb(239 68 68 / 0.45);
    background: rgb(254 242 242);
    color: rgb(127 29 29);
}

.axiotas-copii-nota {
    margin-top: 1rem;
    color: rgb(120 113 108);
    font-size: 0.8125rem;
    line-height: 1.45;
}

@media (prefers-color-scheme: dark) {
    .axiotas-unde__semn--local {
        background: rgb(21 128 61 / 0.15);
        color: rgb(134 239 172);
    }

    .axiotas-unde__semn--digi {
        background: rgb(29 78 216 / 0.15);
        color: rgb(147 197 253);
    }

    .axiotas-unde__semn--lipsa {
        background: rgb(255 255 255 / 0.05);
        color: rgb(168 162 158);
    }

    .axiotas-veste {
        background: rgb(234 179 8 / 0.1);
        color: rgb(253 224 71);
    }

    .axiotas-veste--rea {
        background: rgb(239 68 68 / 0.12);
        color: rgb(252 165 165);
    }
}

/* Ce are masina in ea, deschis din fereastra de alocare
   -------------------------------------------------------------------------- */

/* Pana porneste Alpine, randul „nu se potriveste nimic" nu are ce cauta. */
.axiotas-stoc [x-cloak] {
    display: none;
}

.axiotas-stoc__cauta {
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 0.4375rem 0.75rem;
    border: 1px solid rgb(214 211 209);
    border-radius: 0.5rem;
    background: rgb(255 255 255);
    color: rgb(28 25 23);
    font-size: 0.875rem;
    line-height: 1.4;
}

.axiotas-stoc__cauta:focus-visible {
    outline: 2px solid rgb(245 158 11);
    outline-offset: 1px;
    border-color: rgb(245 158 11);
}

.axiotas-stoc__tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.axiotas-stoc__tabel th {
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid rgb(231 229 228);
    color: rgb(120 113 108);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.axiotas-stoc__tabel td {
    padding: 0.4375rem 0.5rem;
    border-bottom: 1px solid rgb(245 245 244);
    color: rgb(41 37 36);
    vertical-align: top;
}

.axiotas-stoc__tabel tr:last-child td {
    border-bottom: 0;
}

.axiotas-stoc__cod {
    width: 30%;
    color: rgb(120 113 108);
    font-variant-numeric: tabular-nums;
}

.axiotas-stoc__cant {
    width: 22%;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.axiotas-stoc__um {
    margin-left: 0.25rem;
    color: rgb(120 113 108);
    font-size: 0.8125rem;
}

.axiotas-stoc__nimic {
    margin: 0.75rem 0 0;
    color: rgb(120 113 108);
    font-size: 0.875rem;
}

:where(.dark) .axiotas-stoc__cauta {
    border-color: rgb(255 255 255 / 0.1);
    background: rgb(255 255 255 / 0.05);
    color: rgb(231 229 228);
}

:where(.dark) .axiotas-stoc__tabel th {
    border-bottom-color: rgb(255 255 255 / 0.1);
    color: rgb(168 162 158);
}

:where(.dark) .axiotas-stoc__tabel td {
    border-bottom-color: rgb(255 255 255 / 0.05);
    color: rgb(231 229 228);
}

:where(.dark) .axiotas-stoc__cod,
:where(.dark) .axiotas-stoc__um,
:where(.dark) .axiotas-stoc__nimic {
    color: rgb(168 162 158);
}

/* Butoanele principale, pline, nu spalacite
   --------------------------------------------------------------------------
   Filament coloreaza butonul cu tonul 400, adica fundal deschis si scris
   inchis. Pe ecranul de logare, unde butonul e singur pe pagina, si pe
   „Adauga", unde e fapta principala a ecranului, iese spalacit: se vede ca e
   colorat, dar nu se vede ca e butonul.

   Se trece pe tonul 600, plin, cu scris alb. 600 e chiar „#0052FF", culoarea
   ceruta, si da 5,75 contrast cu albul, peste pragul de 4,5 cerut de
   accesibilitate. La trecerea cu mausul se inchide la 700.

   Numai butoanele principale. Rosul de „sterge" si verdele raman cum sunt:
   fapta principala a ecranului trebuie sa fie cea mai tare, nu toate deodata.

   Iconita din buton isi ia culoarea din „--text", deci se albeste singura. */

.fi-btn.fi-color-primary:not(.fi-outlined) {
    --bg: var(--primary-600);
    --text: var(--color-white);
    --hover-bg: var(--primary-700);
    --hover-text: var(--color-white);
    --dark-bg: var(--primary-600);
    --dark-text: var(--color-white);
    --dark-hover-bg: var(--primary-500);
    --dark-hover-text: var(--color-white);
}

/* Subsolul paginilor de logare si de resetare
   --------------------------------------------------------------------------
   Semnul de copyright si datele firmei, centrate sub cartonasul de logare,
   discrete: nu concureaza cu formularul, doar incheie pagina. */

.axiotas-subsol-logare {
    margin-top: 2rem;
    text-align: center;
    color: rgb(107 114 128);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.axiotas-subsol-logare p {
    margin: 0;
}

.axiotas-subsol-logare__date {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    opacity: 0.85;
}

:where(.dark) .axiotas-subsol-logare {
    color: rgb(156 163 175);
}