/* =============================================================================
   Stilul comun al aplicatiei, peste CSS-ul Bootstrap adus din CDN.

   Aplicatia NU are bundler (nu exista package.json / vite.config.js), deci
   fisierul se serveste direct din `public/` si se leaga cu `asset()` din
   layouts/app.blade.php. Nu adaugati aici reguli care depind de un pas de
   build: ce se scrie in fisier este exact ce ajunge in browser.

   Referinta vizuala pentru toata aplicatia este listarea de medicamente:
   antet de tabel deschis, randuri compacte, actiuni de rand ca butoane
   "outline" mici. Regulile de mai jos generalizeaza acel stil, ca ecranele sa
   nu se mai desincronizeze copiind markup dintr-un view in altul.
   ========================================================================== */

:root {
    /* Inaltimea reala a navigatiei pe desktop (padding .5rem x2 + nav-link).
       Este folosita si ca margine de derulare pentru ancore - vezi mai jos. */
    --adapost-navbar-inaltime: 3.5rem;
    --adapost-ancora-spatiu: calc(var(--adapost-navbar-inaltime) + 1rem);

    /* Fundalul antetelor de tabel, UN SINGUR loc pentru toata aplicatia: de aici
       il iau si tabelele de date (`.tabel-adapost > thead`), si tabelele de fisa
       (`.tabel-fisa > tr > th`). O schimbare de nuanta se face aici, nu in view-uri.

       Albastru deschis, masurat impotriva textului de antet (`--bs-secondary-color`,
       adica rgba(33,37,41,.75) compus peste acest fundal): raport de contrast
       ~6.0:1, peste pragul WCAG AA de 4.5:1 pentru text normal. Daca se schimba
       nuanta, se reface calculul - antetul este scris cu 13px, nu este text mare. */
    --adapost-antet-tabel: #dce9f7;
}

/* =============================================================================
   1. Navigatia lipita in capul paginii
   ========================================================================== */

/* `sticky`, nu `fixed`: bara ramane in fluxul paginii, deci continutul de sub
   ea nu are nevoie de un padding-top "magic" care sa fie tinut manual in acord
   cu inaltimea barei (si care s-ar strica de indata ce meniul mobil se
   desfasoara si bara creste). z-index-ul este cel al lui Bootstrap pentru
   `fixed-top`, ca dropdown-urile si alertele sa treaca corect pe sub. */
.navbar-adapost {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* Meniul mobil desfasurat nu are voie sa depaseasca ecranul: pe telefoanele
   scunde cele 10 sectiuni + contul + iesirea nu incap, iar fara derulare
   proprie ultimele intrari ar ramane inaccesibile.

   Pragul urmeaza `navbar-expand-xl` din layout (1200px), nu `lg`: sub el bara
   este pliata, deci aici se stilizeaza chiar meniul pliat. */
@media (max-width: 1199.98px) {
    .navbar-adapost .navbar-collapse {
        max-height: calc(100vh - var(--adapost-navbar-inaltime));
        overflow-y: auto;
    }

    .navbar-adapost .navbar-collapse .nav-link {
        padding-top: .5rem;
        padding-bottom: .5rem;
        border-top: 1px solid rgba(255, 255, 255, .08);
    }
}

/* =============================================================================
   2. Ancore: legaturile adanci nu ajung sub bara lipita
   ========================================================================== */

/* Fara asta, `#intrare-lot` (scurtatura "+ intrare stoc" din listarea de
   medicamente) aduce formularul exact in capul ferestrei, adica FIX sub bara
   lipita, deci pe jumatate ascuns. `scroll-padding-top` pe elementul care
   deruleaza acopera si derularea programatica (`scrollIntoView`, focalizarea
   automata a campului), nu doar saltul la ancora. */
html {
    scroll-padding-top: var(--adapost-ancora-spatiu);
}

/* Plasa de siguranta pentru browserele care ignora scroll-padding pe radacina. */
[id] {
    scroll-margin-top: var(--adapost-ancora-spatiu);
}

/* =============================================================================
   3. Antetul de pagina (titlu + actiunile ecranului)
   ========================================================================== */

.antet-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
}

.antet-pagina-actiuni {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

/* Pe telefon titlul si actiunile se aseaza pe coloane, iar butoanele ocupa
   toata latimea disponibila in loc sa se inghesuie pe randul titlului. */
@media (max-width: 575.98px) {
    .antet-pagina {
        flex-direction: column;
        align-items: stretch;
    }

    .antet-pagina-actiuni {
        width: 100%;
    }

    .antet-pagina-actiuni > * {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* =============================================================================
   4. Bara de filtre
   ========================================================================== */

.bara-filtre .form-label {
    margin-bottom: .125rem;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* Butoanele de filtrare stau pe acelasi rand cu campurile pe ecran larg si se
   intind pe toata latimea cand coloanele se sparg pe telefon. */
.bara-filtre-butoane {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

@media (max-width: 767.98px) {
    .bara-filtre-butoane > * {
        flex: 1 1 auto;
        text-align: center;
    }
}

/* =============================================================================
   5. Tabelele de date
   ========================================================================== */

/* Invelisul deruleaza orizontal DOAR cat timp tabelul este inca tabel (peste
   pragul de telefon). Sub prag randurile devin carduri, deci nu mai exista
   nimic de derulat lateral si pagina nu trebuie sa capete o bara orizontala. */
.tabel-invelis {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.tabel-adapost {
    margin-bottom: .75rem;
}

/* Antetul se coloreaza AICI, in componenta comuna, nu view cu view: fiecare
   listare isi scrie propriul `<thead>` in slotul lui `<x-tabel>`, deci singurul
   loc care le prinde pe toate este clasa `tabel-adapost`.

   De ce se scriu si cele doua variabile Bootstrap, nu doar `background-color`:
   in Bootstrap 5.3 celulele nu sunt colorate doar de fundal, ci si de un
   `box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type,
   var(--bs-table-accent-bg)))` care se aseaza PESTE el. Redefinite pe chiar
   celula, ambele capete ale acelui lant duc la aceeasi culoare, deci antetul
   arata la fel indiferent pe care dintre ele o rezolva versiunea incarcata din
   CDN - si trece si peste `class="table-light"` ramas prin view-uri. */
.tabel-adapost > thead th {
    --bs-table-bg: var(--adapost-antet-tabel);
    --bs-table-accent-bg: var(--adapost-antet-tabel);
    background-color: var(--adapost-antet-tabel);
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    white-space: nowrap;
    vertical-align: bottom;
}

/* Antetul sortabil ramane LEGATURA, nu buton: este navigare, nu o actiune
   asupra randului. Se coloreaza doar coloana activa. */
.antet-sortabil {
    color: inherit;
    text-decoration: none;
}

.antet-sortabil:hover,
.antet-sortabil:focus-visible {
    color: var(--bs-link-color);
    text-decoration: underline;
}

.antet-sortabil.este-activ {
    color: var(--bs-emphasis-color);
}

.tabel-adapost > tbody > tr > td {
    vertical-align: middle;
}

/* =============================================================================
   6. Actiunile de rand
   ========================================================================== */

/* Grupul de butoane al unui rand: acelasi tipar peste tot (editeaza / vezi /
   sterge / restaureaza), oricat de multe actiuni ar avea ecranul. Butoanele
   raman `btn btn-sm btn-outline-*` din Bootstrap - aici se rezolva doar
   asezarea lor, ca sa nu mai fie nevoie de `text-nowrap` pe celula. */
.actiuni-rand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem;
}

.actiuni-rand .btn {
    white-space: nowrap;
}

/* `<x-confirm-form>` este un `<form>`: intr-un container flex trebuie sa se
   comporte ca orice alt buton din grup. */
.actiuni-rand > form {
    margin: 0;
}

/* Motivul pentru care o actiune este blocata (ex. ultimul administrator activ)
   sta langa butoane, nu sub ele. */
.actiuni-rand .actiune-blocata {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* =============================================================================
   7. Tabelele de fisa (cheie / valoare), pe doua coloane
   ========================================================================== */

/* Fisa nu se intinde pe toata latimea unui ecran mare: perechile cheie/valoare
   devin ilizibile cand valoarea sta la un metru de eticheta ei. */
.tabel-fisa {
    max-width: 56rem;
}

/* `<th>`-ul unei fise este eticheta randului, adica antetul lui: primeste
   aceeasi culoare ca antetul tabelelor de date, din aceeasi variabila. Cele
   doua variabile Bootstrap se scriu din acelasi motiv ca mai sus. */
.tabel-fisa > tbody > tr > th,
.tabel-fisa > tr > th {
    --bs-table-bg: var(--adapost-antet-tabel);
    --bs-table-accent-bg: var(--adapost-antet-tabel);
    width: 14rem;
    font-weight: 600;
    background-color: var(--adapost-antet-tabel);
}

/* Varianta cu MAI MULTE perechi cheie/valoare pe acelasi rand (fisa de
   consultatie asaza cate trei). Acolo eticheta nu poate avea latimea fixa a
   unei fise pe doua coloane - ar insuma mai mult decat latimea ecranului. */
.tabel-fisa-lata {
    max-width: none;
}

.tabel-fisa-lata > tbody > tr > th,
.tabel-fisa-lata > tr > th {
    width: auto;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    /* Sub 576px perechea cheie/valoare nu mai incape pe un rand: eticheta trece
       deasupra valorii, ca in cardurile de mai jos. */
    .tabel-fisa,
    .tabel-fisa > tbody,
    .tabel-fisa > tbody > tr,
    .tabel-fisa > tbody > tr > th,
    .tabel-fisa > tbody > tr > td,
    .tabel-fisa > tr,
    .tabel-fisa > tr > th,
    .tabel-fisa > tr > td {
        display: block;
        width: auto;
    }

    .tabel-fisa > tbody > tr,
    .tabel-fisa > tr {
        border-bottom: 1px solid var(--bs-border-color);
    }

    .tabel-fisa > tbody > tr > th,
    .tabel-fisa > tr > th {
        border-bottom: 0;
    }

    .tabel-fisa > tbody > tr > td,
    .tabel-fisa > tr > td {
        border-bottom: 0;
        padding-top: 0;
    }
}

/* =============================================================================
   8. Telefon: fiecare rand de tabel devine un card cu campuri etichetate
   =============================================================================

   Etichetele NU sunt scrise in Blade: le pune scriptul din layout, copiind
   textul antetului in `data-eticheta` pe fiecare celula. Asa markup-ul
   randurilor ramane exact cel de pe desktop (conteaza: mai multe teste verifica
   celule intregi, ex. `<td class="text-end">3</td>` la boxe), iar un tabel nou
   capata automat varianta de telefon fara sa dubleze etichetele in view.

   Fara JavaScript nu se pierde nimic: tabelul ramane tabel si se deruleaza
   orizontal in `.tabel-invelis`. */
@media (max-width: 767.98px) {

    .tabel-invelis {
        overflow-x: visible;
    }

    .tabel-adapost,
    .tabel-adapost > thead,
    .tabel-adapost > tbody,
    .tabel-adapost > tbody > tr,
    .tabel-adapost > tbody > tr > td,
    .tabel-adapost > tbody > tr > th {
        display: block;
        width: auto;
    }

    .tabel-adapost {
        border: 0;
        background-color: transparent;
    }

    /* Antetul nu se sterge, se ascunde accesibil: cititoarele de ecran il
       folosesc in continuare, iar scriptul citeste tot de acolo etichetele. */
    .tabel-adapost > thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .tabel-adapost > tbody > tr {
        position: relative;
        margin-bottom: .75rem;
        overflow: hidden;
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        /* Fundalul cardului. Culoarea de stare a randului (table-warning /
           table-secondary) ramane pe celule, deci se vede peste acest alb. */
        background-color: #fff;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    }

    .tabel-adapost > tbody > tr > td,
    .tabel-adapost > tbody > tr > th {
        padding: .375rem .75rem;
        border: 0;
        /* Bootstrap coloreaza celulele, nu randul: pastram exact acelasi
           mecanism, ca `table-warning` si `table-secondary` sa se vada. */
        background-color: var(--bs-table-bg);
        box-shadow: none;
        /* Alinierile la dreapta ale coloanelor numerice nu au sens intr-un card
           cu eticheta deasupra valorii. */
        text-align: left !important;
        white-space: normal;
    }

    .tabel-adapost > tbody > tr > td:first-child {
        padding-top: .625rem;
    }

    .tabel-adapost > tbody > tr > td:last-child {
        padding-bottom: .625rem;
    }

    /* Eticheta campului, preluata din antetul coloanei. */
    .tabel-adapost > tbody > tr > td[data-eticheta]::before {
        content: attr(data-eticheta);
        display: block;
        margin-bottom: .0625rem;
        font-size: .6875rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--bs-secondary-color);
    }

    /* Celulele fara continut nu merita un rand in card. */
    .tabel-adapost > tbody > tr > td[data-celula-goala] {
        display: none;
    }

    /* Celula cu actiunile randului incheie cardul, separata de date.
       Marcajul `data-celula-actiuni` vine tot de la scriptul de etichetare:
       aceeasi celula este si cea careia nu i se pune eticheta de coloana. */
    .tabel-adapost > tbody > tr > td[data-celula-actiuni] {
        padding-top: .5rem;
        border-top: 1px solid var(--bs-border-color);
    }

    .tabel-adapost > tbody > tr > td > .actiuni-rand > .btn,
    .tabel-adapost > tbody > tr > td > .actiuni-rand > form > .btn {
        flex: 1 1 auto;
    }

    /* Randurile care se intind pe toata latimea (mesajul "niciun rezultat",
       randul de total, randul extins cu pacientii unei boxe) nu sunt fise: nu
       primesc chenar de card, ci raman o banda simpla. */
    .tabel-adapost > tbody > tr[data-rand-intins] {
        border: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
    }

    .tabel-adapost > tbody > tr[data-rand-intins] > td {
        background-color: transparent;
    }

    /* Cand banda apartine cardului de deasupra (randul extins cu pacientii unei
       boxe), cele doua formeaza un singur bloc: cardul nu isi mai rotunjeste
       coltul de jos, iar banda preia chenarul lateral si coltul.

       `:has()` este folosit strict cosmetic. Intr-un browser care nu il suporta
       se vede doar cardul cu coltul rotunjit deasupra benzii - nimic nu se
       pierde functional. */
    .tabel-adapost > tbody > tr:has(+ tr[data-rand-intins]) {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .tabel-adapost > tbody > tr + tr[data-rand-intins] {
        margin-bottom: .75rem;
        /* `!important` fiindca randul de detaliu al unei boxe poarta clasa
           Bootstrap `.border-0` (`border: 0 !important`). Clasa NU se poate
           scoate: face parte din contractul de markup verificat de
           BoxeStergereSiOcupantiTest - in tabelul normal randul chiar trebuie sa
           fie fara chenar, ca sa aiba inaltime zero cand este colapsat. Doar
           aici, unde devine continuarea unui card, chenarul lateral il inchide. */
        border: 1px solid var(--bs-border-color) !important;
        border-top: 0 !important;
        border-bottom-right-radius: .5rem;
        border-bottom-left-radius: .5rem;
        overflow: hidden;
        background-color: #fff;
    }
}

/* =============================================================================
   9. Formulare pe ecrane inguste
   ========================================================================== */

/* Repetitorul de produse administrate si celelalte randuri cu multe campuri
   scurte: pe telefon campurile se aseaza cate doua, nu unul sub altul pe toata
   latimea, iar fiecare isi primeste eticheta lui (ascunsa pe desktop, unde
   antetul randului este suficient). */
.eticheta-mobil {
    display: block;
    margin-bottom: .125rem;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

@media (min-width: 768px) {
    .eticheta-mobil {
        display: none;
    }
}

/* Randul repetitorului: pe telefon capata un chenar propriu, ca sa se vada
   unde se termina un produs administrat si unde incepe urmatorul. */
@media (max-width: 767.98px) {
    .rand-repetitor {
        margin-bottom: .75rem;
        padding: .625rem;
        border: 1px solid var(--bs-border-color);
        border-radius: .5rem;
        background-color: #fff;
    }
}

/* Nicio pagina nu trebuie sa deruleze orizontal, dar rezolvarea sta pe elementul
   lat, nu pe `body { overflow-x: hidden }`: acela doar ASCUNDE ce iese din
   ecran (continutul devine inaccesibil, nu incapator) si mascheaza exact genul
   de regresie pe care vrem sa o vedem. Tabelele deruleaza in `.tabel-invelis`,
   blocurile de JSON din jurnalul de audit in ele insele. */
pre {
    overflow-x: auto;
    max-width: 100%;
}

/* Lista de rezultate a cautarii de pacient din formularul de operatiune.

   Suprapusa peste continut (`position: absolute` pe invelisul relativ), deci
   are nevoie de un z-index peste campurile obisnuite - dar SUB bara de
   navigare lipita (1030), altfel ar trece peste meniu la derulare.

   Inaltimea este plafonata si deruleaza in ea insasi: se arata cel mult 20 de
   potriviri, iar pe telefon nici acelea nu incap pe ecran. */
.lista-cautare {
    z-index: 1020;
    max-height: 16rem;
    overflow-y: auto;
}