h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Permite textului din dropdown să se propage pe mai multe rânduri */
.mud-list-item-text {
    white-space: normal !important;
}

/* Ajustare pentru ecrane foarte mici (iPhone SE, etc) */
@media (max-width: 400px) {
    .mud-select-panel {
        max-width: 95vw !important;
    }
}

/* Slightly increase MudBlazor caption font size to improve readability */
.mud-typography-caption,
.mud-typography.mud-typography-caption {
    font-size: 0.9rem !important;
    line-height: 1.3 !important;
}
/* Elimină padding-ul excesiv din stânga în interiorul listei de selecție */
.custom-select-popover .mud-list-item {
    padding-left: 8px !important; /* Ajustează la 4px dacă vrei și mai la stânga */
    padding-right: 8px !important;
}

/* Aliniază conținutul textului la marginea stângă a containerului său */
.custom-select-popover .mud-list-item-content {
    padding-left: 0px !important;
    justify-content: flex-start !important;
}

/* Asigură că textul nu are margin-left implicit */
.custom-select-popover .mud-list-item-text {
    margin-inline-start: 0px !important;
    text-align: left !important;
}

/* Face popover-ul să ocupe aproape tot ecranul pe mobile pentru a evita tăierea textului */
@media (max-width: 600px) {
    .custom-select-popover {
        max-width: 95vw !important;
        left: 2.5vw !important;
    }
}

/* Permite textului din dropdown să se propage pe mai multe rânduri */
.mud-list-item-text {
    white-space: normal !important;
}

/* Ajustare pentru ecrane foarte mici (iPhone SE, etc) */
@media (max-width: 400px) {
    .mud-select-panel {
        max-width: 95vw !important;
    }
}

/* =========================================================================
   Titlul de ecran al fiecărei pagini (h1), ascuns vizual.

   DE CE ASCUNS ȘI NU ȘTERS. Până pe 2026-09-22 nicio pagină nu avea `h1`:
   toate porneau direct de la `h4` sau `h6`. Consecința nu era teoretică —
   `<FocusOnNavigate Selector="h1" />` din Routes.razor nu găsea niciun
   element, deci focusul de tastatură rămânea pe controlul vechi la fiecare
   navigare, iar cititoarele de ecran nu anunțau pagina nouă.

   `clip-path` plus dimensiunea de 1px este metoda care ascunde elementul
   FĂRĂ să îl scoată din arborele de accesibilitate. `display: none` și
   `visibility: hidden` l-ar ascunde și de cititoarele de ecran, adică ar
   păstra exact problema. `white-space: nowrap` împiedică textul să producă
   o bandă de derulare orizontală înainte de a fi decupat.
   ========================================================================= */
.cf-titlu-ecran {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   Câmpurile formularelor de autentificare (P2, AUTH-checkup-2026-09-23)

   Auth.razor, AuthAction.razor și schimbarea parolei din Profil.razor folosesc
   elemente <input> simple în locul lui MudTextField: managerul de parole al
   browserului are nevoie de `autocomplete`, `name` și un <form> real, iar
   parola nu trebuie legată de o variabilă C#. Stilul de mai jos imită varianta
   „Outlined” a MudBlazor, cu variabilele temei, ca pagina să arate la fel.
   ========================================================================= */
.cf-field {
    margin-bottom: 16px;
}

.cf-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.cf-input-wrap {
    position: relative;
}

.cf-input {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 0 14px;
    font: inherit;
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 10px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.cf-input-wrap .cf-input {
    padding-right: 48px; /* loc pentru butonul „arată parola” */
}

.cf-input:hover {
    border-color: var(--mud-palette-text-primary);
}

.cf-input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 1px var(--mud-palette-primary);
    /* 2026-10-15: inel de 4px în jurul chenarului (3:1 cu fundalul alb, WCAG 2.4.11), nu doar chenar mai gros:
       pe tabletă, la distanță, câmpul activ se vedea greu. Prima linie e rezerva pentru browsere fără color-mix. */
    box-shadow: 0 0 0 1px var(--mud-palette-primary), 0 0 0 4px rgba(11, 100, 119, 0.22);
    box-shadow: 0 0 0 1px var(--mud-palette-primary), 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 24%, transparent);
}

.cf-input.cf-input-invalid {
    border-color: var(--mud-palette-error);
}

.cf-input-toggle {
    position: absolute !important;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
}

.cf-help {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.cf-error {
    margin-top: 6px;
    font-size: 0.75rem;
    color: var(--mud-palette-error);
}

/* Câmpul `username` ascuns vizual din formularele de parolă nouă: trebuie să
   existe în DOM ca managerul de parole să știe CĂREI intrări îi aparține parola.
   `display: none` l-ar face invizibil și pentru managerul de parole. */
.cf-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* =========================================================================
   Margine dublă pe telefon și tabletă (2026-09-28)

   MainLayout pune tot conținutul într-un MudContainer, iar aproape fiecare
   pagină își deschide propriul MudContainer înăuntru. Fiecare aduce 16px de
   margine (24px de la 600px în sus), deci pe un telefon de 375px conținutul
   primea 311px: 64px — o șesime din ecran — erau margine. Programare.razor
   ocolea problema doar pentru sine, cu o regulă care schimba TOATE
   containerele cât timp pagina era deschisă.

   Containerul din interior renunță la margine; o dă cel din layout, o singură
   dată. Doar sub 960px — acolo unde spațiul lipsește —, ca pe laptop pagina să
   arate exact ca înainte. `max-width` rămâne: o pagină `Small` rămâne îngustă.
   ========================================================================= */
@media (max-width: 959.98px) {
    .mud-container .mud-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* =========================================================================
   Titlul mare de pe prima pagină (2026-09-28)

   `Typo.h2` are 60px pe orice ecran. Pe un telefon de 375px, „Pneumologie”
   cerea 351px într-o coloană de 311px și ieșea din ecran — măsurat pe
   producție. Litera urmează acum lățimea ecranului, între 36px și 60px; peste
   ~600px rămâne 60px, deci pe laptop nu se schimbă nimic.

   `break-word` e plasa de siguranță pentru un nume de cabinet foarte lung: rupe
   un cuvânt doar dacă altfel ar ieși din coloană.
   ========================================================================= */
.mud-typography-h2.cf-hero-titlu {
    font-size: clamp(2.25rem, 10vw, 3.75rem);
    overflow-wrap: break-word;
    hyphens: auto;
}

/* =========================================================================
   Semnarea consimțământului pe tabletă (2026-09-28)

   Recepția dă pacientului tableta (/admin/semnare/{id}); aceeași informare se
   semnează și din cont (/consintamant-gdpr). Pe tabletă, textul legal stătea
   într-o casetă fixă de 320px cu literă de 14px, derulată în interiorul
   paginii, iar chenarul de semnătură avea 200–220px — gândit pentru telefon.

   DE CE DIN AFARĂ, cu `!important`: caseta este primul element din
   Components/Shared/InformareGdpr.razor, iar orice modificare a acelui fișier
   cere incrementarea GdprConstants.ConsentVersion — adică toți pacienții ar
   trebui să semneze din nou pentru o schimbare de aspect. Stilul ei este
   inline, deci o regulă din afară îl poate înlocui doar cu `!important`.
   Textul semnat rămâne neatins. Sub 600px (telefon) nu se schimbă nimic.
   ========================================================================= */
@media (min-width: 600px) {
    .cf-informare-gazda > div:first-of-type {
        height: auto !important;
        max-height: min(55vh, 560px);
        font-size: 1rem !important;
    }

    .cf-panza-semnatura {
        height: 300px !important;
    }
}

/* =========================================================================
   Statistici (2026-09-28): cifrele de sus și barele orizontale

   Clasele vechi de pe carduri (`border-t-4 border-blue-500`) veneau din
   Tailwind, pe care aplicația nu îl încarcă: nu produceau nimic.

   Barele (Components/Shared/GraficBare.razor) sunt HTML, nu MudChart — motivul
   e în antetul componentei. Pe telefon eticheta urcă pe rândul ei, ca bara să
   păstreze lățimea; pe laptop stă în stânga, cu cel mult 40% din rând.
   Capătul barei e rotunjit doar spre valoare: baza rămâne dreaptă, deci toate
   barele pornesc vizibil din același loc.
   ========================================================================= */
.cf-kpi {
    height: 100%;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cf-kpi-eticheta {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.cf-kpi-valoare {
    font-size: clamp(1.6rem, 5vw, 2.1rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.cf-kpi-valoare small {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
}

.cf-kpi-context {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.cf-card-grafic {
    height: 100%;
}

.cf-bare {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cf-bara-rand {
    display: grid;
    grid-template-columns: minmax(0, 40%) minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
}

.cf-bara-eticheta {
    font-size: 0.875rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    color: var(--mud-palette-text-primary);
}

.cf-bara-detaliu {
    display: block;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.cf-bara-pista {
    height: 14px;
    border-radius: 0 4px 4px 0;
    background: rgba(0, 0, 0, 0.045);
}

.cf-bara-umplere {
    height: 100%;
    border-radius: 0 4px 4px 0;
    transition: width 0.3s ease;
}

.cf-bara-valoare {
    min-width: 76px;
    text-align: right;
    white-space: nowrap;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.cf-bara-procent {
    margin-left: 6px;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599.98px) {
    .cf-bara-rand {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 4px;
    }

    .cf-bara-eticheta {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf-bara-umplere {
        transition: none;
    }
}

/* =========================================================================
   Statistici: variația față de perioada anterioară și harta zi × oră
   (2026-09-28)

   Variația: săgeata poartă sensul, culoarea doar spune „bine” sau „rău” —
   pentru neprezentări, o creștere e roșie. Verdele este cel de TEXT (#006300),
   nu cel al barelor: #0ca30c are 3,3:1 pe alb, sub pragul de 4,5:1 pentru
   text mic.

   Harta: o singură nuanță de albastru, cinci trepte. Pe primele trei, cifra e
   închisă; pe ultimele două, albă — fiecare pereche trece de 4,5:1. Tabelul
   are cel mult 560px: pe laptop, celule de 150px ar face o hartă de citit cu
   capul întors; lista „cele mai aglomerate ore” ocupă restul rândului.
   ========================================================================= */
.cf-kpi-variatie {
    margin-top: 4px;
    font-size: 0.8rem;
    font-weight: 600;
}

.cf-var-buna { color: #006300; }
.cf-var-rea { color: #c62828; }
.cf-var-neutra { color: var(--mud-palette-text-secondary); }

/* =========================================================================
   Statistici: segmentele ratei de neprezentare și secțiunea „Agenda”
   (2026-10-12)

   Grupurile stau în coloane de cel puțin 300px (una singură pe telefon); `min()`
   ține coloana în ecran și sub 300px + marginile de 16px. Titlul de secțiune
   desparte vizual viitorul (agenda) de trecut (rezultatele perioadei).
   ========================================================================= */
.cf-segmente {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 28px 40px;
}

.cf-sectiune-titlu {
    margin: 8px 0 4px;
    font-weight: 700;
}

.cf-harta-rand {
    display: flex;
    flex-wrap: wrap;
    gap: 24px 40px;
    align-items: flex-start;
}

.cf-harta-cutie {
    flex: 1 1 320px;
    max-width: 560px;
}

.cf-harta {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 3px;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
}

.cf-harta th {
    padding: 2px 0;
    font-weight: 600;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.cf-harta th.cf-harta-ora {
    width: 30px;
    padding-right: 4px;
    text-align: right;
}

.cf-harta td {
    height: 30px;
    border-radius: 4px;
    text-align: center;
    color: #0b0b0b;
}

.cf-harta td.cf-harta-gol { background: #f4f4f2; color: #898781; }
.cf-harta-inchis { background: repeating-linear-gradient(135deg, #f4f4f2 0 4px, #e3e2dc 4px 6px); }
.cf-harta-t1 { background: #cde2fb; }
.cf-harta-t2 { background: #9ec5f4; }
.cf-harta-t3 { background: #6da7ec; }
.cf-harta td.cf-harta-t4 { background: #256abf; color: #ffffff; }
.cf-harta td.cf-harta-t5 { background: #104281; color: #ffffff; }
.cf-harta-afara { outline: 1px dashed #52514e; outline-offset: -2px; }

.cf-harta-legenda {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.cf-harta-legenda-grup {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 12px;
    white-space: nowrap;
}

.cf-harta-mostra {
    display: inline-block;
    width: 16px;
    height: 12px;
    border-radius: 3px;
}

.cf-harta-legenda .cf-harta-t4 { background: #256abf; }
.cf-harta-legenda .cf-harta-t5 { background: #104281; }

.cf-harta-varfuri {
    flex: 1 1 220px;
    max-width: 360px;
}

.cf-harta-varfuri ol {
    margin: 0;
    padding-left: 1.2rem;
}

.cf-harta-varfuri li {
    display: list-item;
    padding: 4px 0;
    font-size: 0.875rem;
}

.cf-harta-varfuri li strong {
    float: right;
    font-variant-numeric: tabular-nums;
}

/* =========================================================================
   Tipărirea consimțământului semnat (2026-09-30), /{cabinet}/consintamant-gdpr/tipar.
   La tipar dispar bara, meniul, subsolul și butoanele, iar caseta derulabilă
   a informării (height fix + overflow) se desfășoară pe toată foaia: altfel pe
   hârtie ar ieși doar primele 320px din text.
   ========================================================================= */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-drawer-overlay,
    .mud-snackbar-provider,
    footer,
    .cf-no-print {
        display: none !important;
    }

    .mud-main-content {
        padding-top: 0 !important;
    }

    body {
        background: #fff !important;
    }

    .cf-tipar .cf-tipar-foaie {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    .cf-tipar .cf-tipar-text > div:first-of-type {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        border: none !important;
        background: #fff !important;
        font-size: 0.85rem !important;
    }
}

/* =========================================================================
   Îmbunătățirile de UX din 2026-10-13 (/platforma A1–A6, /admin B1–B12)
   ========================================================================= */

/* Card întreg ca buton (panoul /platforma, indicatorii din agendă). Un <button> real, nu un
   <div @onclick>: se ajunge la el cu Tab și se apasă cu Enter / Spațiu, iar cititorul de ecran
   îl anunță ca buton. Până acum cardurile panoului erau MudPaper cu @onclick — invizibile pentru
   tastatură (A6). */
.cf-card-buton {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 14px;
}

.cf-card-buton:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Indicatorul care filtrează agenda acum (B5): conturul spune „activ”, nu doar culoarea. */
.cf-kpi-activ {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

/* Lista de verificări (A1, B1): pictogramă + text pe fiecare rând. */
.cf-lista-verificari {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cf-lista-verificari li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 3px 0;
}

.cf-lista-verificari-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.cf-lista-lipsa {
    margin: 4px 0 0 0;
    padding-left: 1.2rem;
}

.cf-pasi-gazda {
    padding-left: 1.2rem;
}

.cf-pasi-gazda code {
    overflow-wrap: anywhere;
}

/* Tabele late (/platforma) pe ecran îngust: derulează tabelul, nu pagina. */
.cf-tabel-derulabil {
    overflow-x: auto;
    max-width: 100%;
}

/* Alertă marcată ca tratată (A4): rămâne în listă, dar mai stinsă. Opacitatea, nu doar culoarea
   cipului, ca diferența să se vadă și fără culori. */
.cf-rand-tratat td {
    opacity: 0.6;
}

/* Motivul pentru care o acțiune din meniul agendei e oprită (B7). Elementul dezactivat al
   MudBlazor scade deja opacitatea; textul rămâne lizibil pentru că e același element. */
.cf-motiv-oprit {
    margin-left: 4px;
    font-size: 0.8rem;
}

/* „Urmează azi” (B8): pe ecrane sub 1280 px urcă deasupra listei agendei (dar sub antet și
   indicatori, care au ordinea implicită 0) — pe tableta de la recepție e primul lucru căutat; pe
   laptop stă în dreapta listei, ca vechiul panou. */
.cf-urmeaza {
    order: 1;
}

.cf-agenda-lista {
    order: 2;
}

@media (min-width: 1280px) {
    .cf-urmeaza {
        order: 3;
    }
}

/* Bara de salvare din Setări → Date cabinet (B9): lipită de marginea de jos cât timp formularul
   lung e derulat, cu mesajul „modificări nesalvate” lângă buton. */
.cf-bara-salvare {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* =========================================================================
   Meniul lateral al administrării platformei (2026-10-14)
   Marcajul: Components/Layout/PlatformaLayout.razor; starea: NavigatiePlatforma.

   Sub 960px (telefon, tabletă în portret) meniul este un panou care alunecă peste pagină, sub bara
   de sus, închis după alegere; de la 960px în sus este o coloană fixă lângă conținut. 960px este
   pragul „md” din MudBlazor, același cu `d-md-none` de pe butonul din bara de sus: dacă se mută
   unul, se mută și celălalt.

   Țintele de atingere au cel puțin 48px (WCAG 2.5.5 cere 44px). Secțiunea curentă se vede din trei
   semne, nu doar din culoare: fundal, linie pe margine și text îngroșat. Panoul închis are
   `visibility: hidden`, ca tastatura să nu intre în intrări invizibile.
   ========================================================================= */

/* Antetul de file al lui MudTabs: ascuns, secțiunile se aleg din meniu. Panourile rămân. */
.cf-fara-antet-file .mud-tabs-tabbar {
    display: none;
}

.cf-platforma-grid {
    display: block;
}

.cf-meniu-fundal {
    display: none;
}

.cf-meniu {
    background: var(--mud-palette-surface, #fff);
    border-right: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    padding: 4px 8px 24px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cf-meniu:focus {
    outline: none;
}

.cf-meniu-antet {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 4px 0 12px;
}

.cf-meniu-titlu {
    font-weight: 600;
    font-size: 1.0625rem;
}

.cf-meniu-inchide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: inherit;
    cursor: pointer;
}

.cf-meniu-inchide:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: -3px;
}

.cf-meniu-grup {
    padding: 18px 12px 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    /* 2026-10-15: fără majuscule răsfirate. Pe tabletă, etichetele de grup în majuscule mici și gri se
       citeau ca separatoare, nu ca nume; acum au aceeași culoare ca secțiunea activă și fraza normală. */
    color: var(--mud-palette-primary);
}

.cf-meniu-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cf-meniu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 8px 12px;
    border: 0;
    border-left: 4px solid transparent;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 1rem;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

/* 2026-10-15: pe touch :hover rămâne lipit după atingere și a doua intrare părea selectată. */
@media (hover: hover) {
    .cf-meniu-item:hover {
        background: rgba(11, 100, 119, 0.08);
    }
}

.cf-meniu-item:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: -3px;
}

.cf-meniu-item--activ {
    background: rgba(11, 100, 119, 0.13);
    border-left-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.cf-meniu-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cf-meniu-insigna {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 12px;
    background: var(--mud-palette-warning, #b54708);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.cf-meniu-insigna--grava {
    background: var(--mud-palette-error, #c62828);
}

@media (max-width: 959.98px) {
    .cf-meniu {
        position: fixed;
        top: var(--mud-appbar-height, 56px);
        bottom: 0;
        left: 0;
        width: min(88vw, 320px);
        z-index: var(--mud-zindex-drawer, 1200);
        transform: translateX(-100%);
        visibility: hidden;
        transition: transform 0.22s ease, visibility 0s linear 0.22s;
    }

    .cf-meniu--deschis {
        transform: none;
        visibility: visible;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        transition: transform 0.22s ease, visibility 0s;
    }

    .cf-meniu-fundal--vizibil {
        display: block;
        position: fixed;
        top: var(--mud-appbar-height, 56px);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: calc(var(--mud-zindex-drawer, 1200) - 1);
        background: rgba(7, 42, 54, 0.52);
    }
}

@media (min-width: 960px) {
    .cf-platforma-grid--cu-meniu {
        display: grid;
        grid-template-columns: 248px minmax(0, 1fr);
        align-items: start;
    }

    .cf-platforma-continut {
        min-width: 0;
    }

    .cf-meniu {
        position: sticky;
        top: var(--mud-appbar-height, 64px);
        height: calc(100vh - var(--mud-appbar-height, 64px));
        height: calc(100dvh - var(--mud-appbar-height, 64px));
    }

    .cf-meniu-antet {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf-meniu,
    .cf-meniu--deschis {
        transition: none;
    }
}

/* =========================================================================
   Administrarea platformei: progres, cronometru, ajutor, rezumat, tabele ca
   carduri (2026-10-14, P1–P8). Marcajul: PlatformaLayout, Platforma.razor,
   Components/PlatformaUi.
   ========================================================================= */

/* P1: bara de progres stă lipită sub bara de sus, peste conținut, ca să se vadă oricât s-ar fi derulat. */
.cf-progres-platforma {
    position: fixed !important;
    top: var(--mud-appbar-height, 64px);
    left: 0;
    right: 0;
    z-index: calc(var(--mud-zindex-appbar, 1100) + 1);
}

/* P2: cronometrul deblocării. Cifre tabulare: „1:42” → „1:41” nu mișcă textul de lângă el. */
.cf-cronometru {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Sub prag: alt fundal și text îngroșat, nu doar altă culoare. */
.cf-cronometru--avertizare {
    background: var(--mud-palette-warning, #b54708);
    color: #fff;
    font-weight: 700;
}

.cf-banda-expirare {
    position: sticky;
    top: var(--mud-appbar-height, 64px);
    z-index: 5;
    padding: 8px 0;
    background: #fff4e5;
    border-bottom: 1px solid #f0c38a;
    color: #3d2400;
}

.cf-banda-expirare-rand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
}

.cf-banda-expirare-text {
    flex: 1 1 280px;
}

.cf-banda-expirare-cod {
    flex: 0 0 160px;
    max-width: 160px;
    margin: 0 !important;
}

/* P8: explicația unei secțiuni, pliată. Marcajul propriu (▸) în locul celui al browserului, ca să arate la fel peste tot. */
.cf-ajutor {
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 8px;
    padding: 0 12px;
}

.cf-ajutor > summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    list-style: none;
    font-weight: 600;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.cf-ajutor > summary::-webkit-details-marker {
    display: none;
}

.cf-ajutor > summary::before {
    content: "▸";
    display: inline-block;
    transition: transform 0.15s ease;
}

.cf-ajutor[open] > summary::before {
    transform: rotate(90deg);
}

.cf-ajutor > summary:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.cf-ajutor-continut {
    padding: 0 0 12px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary, #455a64);
}

/* P4: rezumatul intervenției, lângă „Execută”. Linia din stânga este roșie pentru acțiunile distructive. */
.cf-rezumat-actiune {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-left: 4px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: rgba(11, 100, 119, 0.06);
}

.cf-rezumat-actiune--distructiva {
    border-left-color: var(--mud-palette-error, #c62828);
}

/* P3: sub 900px de COLOANĂ (2026-10-15; înainte, 600px de ecran) un rând de tabel devine un card, cu eticheta coloanei deasupra valorii (data-label).
   Cu derulare orizontală, prima coloană — numele cabinetului, data alertei — ieșea din ecran și rândul
   nu mai avea identitate. `!important` doar unde MudSimpleTable are selectori mai specifici. */
@container platforma (max-width: 899.98px) {
    .cf-tabel-carduri table,
    .cf-tabel-carduri tbody,
    .cf-tabel-carduri tr,
    .cf-tabel-carduri td {
        display: block !important;
        width: 100% !important;
    }

    .cf-tabel-carduri thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .cf-tabel-carduri tbody tr {
        margin-bottom: 12px;
        padding: 8px 12px;
        border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
        border-radius: 8px;
    }

    .cf-tabel-carduri tbody td {
        padding: 4px 0 !important;
        border: 0 !important;
        white-space: normal !important;
    }

    .cf-tabel-carduri td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary, #455a64);
    }

    .cf-tabel-carduri td.cf-celula-titlu {
        padding-bottom: 8px !important;
        font-size: 1rem;
        font-weight: 600;
    }
}

@media (max-width: 400px) {
    .cf-cronometru {
        margin-right: 4px;
        padding: 2px 6px;
    }

    .cf-cronometru .mud-icon-root {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf-ajutor > summary::before {
        transition: none;
    }
}

/* =========================================================================
   Administrarea platformei: distribuția pe lățimea COLOANEI de conținut (2026-10-15)

   De ce container queries și nu breakpoint-urile MudBlazor (`sm` / `md`): de la 960px meniul ocupă
   248px, deci coloana de conținut are cu 248px mai puțin decât ecranul. Un `md="3"` (patru carduri pe
   rând) pornea la 960px de ecran, adică pe ~700px de conținut: carduri de ~170px, cu etichetele rupte
   pe trei rânduri. Pragurile de mai jos se raportează la coloana numită `platforma`, deci arată la fel
   cu meniul fix, cu panoul glisant sau fără meniu (formularele de conectare).

   Praguri (lățimea coloanei): 520 = două carduri pe rând; 900 = tabelele sunt tabele (sub, carduri);
   1040 = patru carduri / două coloane; 1240 = două coloane asimetrice; 1360 = formular + listă alăturate.
   Formularul de anunț își are propriul container (`formular`): câmpurile lui depind de lățimea LUI,
   nu a paginii, ca să arate la fel și când stă singur, și când stă lângă listă.
   ========================================================================= */
.cf-platforma-continut {
    container-type: inline-size;
    container-name: platforma;
}

/* Înlocuiește MudContainer MaxWidth.Large (1280px): pe un monitor de 1920px lăsa ~200px goi de
   fiecare parte, cu meniul lipit de margine. Plafonul stă la 1520px, centrat în coloană. */
.cf-platforma-pagina {
    width: 100%;
    max-width: 1520px;
    margin-inline: auto;
    padding: 16px clamp(16px, 2.4vw, 32px) 64px;
}

/* Banda de expirare stă pe toată lățimea coloanei, dar conținutul ei se aliniază cu al paginii. */
.cf-platforma-pagina--banda {
    padding-block: 0;
}

/* Patru carduri (indicatorii din Panou, operațiile de recuperare): 1 → 2 → 4 pe rând. */
.cf-grila-4 {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}

@container platforma (min-width: 520px) {
    .cf-grila-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container platforma (min-width: 1040px) {
    .cf-grila-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Alerte + intervenții: alertele primesc tot rândul; intervențiile stau alături doar când au conținut
   și coloana are loc. Cu `--una`, ambele sunt pe rânduri, la orice lățime. */
.cf-grila-panou {
    display: grid;
    gap: 16px;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

@container platforma (min-width: 1240px) {
    .cf-grila-panou:not(.cf-grila-panou--una) {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    }
}

/* Operații de recuperare: pliate, cu titlul în rezumat. */
.cf-operatii > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 16px;
    padding: 16px;
    cursor: pointer;
    list-style: none;
}

.cf-operatii > summary::-webkit-details-marker {
    display: none;
}

.cf-operatii > summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    color: var(--mud-palette-text-secondary, #455a64);
}

.cf-operatii[open] > summary::before {
    content: "▾";
}

.cf-operatii > summary:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: -3px;
}

.cf-operatii-corp {
    padding: 0 16px 16px;
}

/* Starea platformei (a doua trecere, 2026-10-15): o singură listă într-un singur card, nu opt carduri pe două
   coloane. Verificările cu probleme stau primele (le sortează componenta), cu bandă și tentă în culoarea stării;
   cele în regulă sunt rânduri liniștite, fără chip. Pe coloană lată, numele stă în stânga și descrierea în dreapta. */
.cf-grila-verificari {
    overflow: hidden;
    padding: 0;
}

.cf-verificare {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--cf-linie, #d3e3e6);
}

.cf-verificare:first-child {
    border-top: 0;
}

.cf-verificare-problema {
    background: rgba(181, 71, 8, 0.07);
    background: color-mix(in srgb, var(--cf-stare, #b54708) 9%, #fff);
    box-shadow: inset 4px 0 0 var(--cf-stare, #b54708);
}

.cf-verificare-pictograma {
    flex: 0 0 auto;
    margin-top: 2px;
}

.cf-verificare-corp {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 24px;
    align-items: baseline;
}

.cf-verificare-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
}

/* Numele verificării este un identificator tehnic (audit-chain, mykeys-db): monospațiat, nu un titlu. */
.cf-verificare-nume {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

@container platforma (min-width: 760px) {
    .cf-verificare-corp {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .cf-verificare-corp > .cf-detalii-caseta {
        grid-column: 2;
    }
}

/* O descriere lungă pe 1400px nu se mai citește: rândul se oprește la ~80 de caractere. */
.cf-verificare-text {
    max-width: 80ch;
    overflow-wrap: anywhere;
}

.cf-verificare-detalii {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 2px 16px;
    margin: 8px 0 0;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary, #455a64);
}

.cf-verificare-detalii dt {
    font-weight: 600;
}

.cf-verificare-detalii dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.cf-verificare-detalii dd.cf-verificare-simplu {
    grid-column: 1 / -1;
}

/* Anunțuri: formularul (cel mult 760px) și lista, una sub alta; de la 1360px, alăturate. */
.cf-anunturi-grila {
    display: grid;
    gap: 16px 24px;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

.cf-anunturi-formular {
    max-width: 760px;
    min-width: 0;
}

.cf-anunturi-lista {
    min-width: 0;
}

@container platforma (min-width: 1360px) {
    .cf-anunturi-grila {
        grid-template-columns: minmax(420px, 560px) minmax(0, 1fr);
    }

    .cf-anunturi-formular {
        max-width: none;
    }
}

.cf-formular {
    container-type: inline-size;
    container-name: formular;
}

.cf-camp-2,
.cf-camp-data {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr);
}

.cf-camp-data {
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@container formular (min-width: 460px) {
    .cf-camp-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container formular (min-width: 720px) {
    .cf-camp-data {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container formular (max-width: 419.98px) {
    .cf-camp-data {
        grid-template-columns: minmax(0, 1fr);
    }
}

.cf-camp-2 .mud-input-control,
.cf-camp-data .mud-input-control,
.cf-camp-data .mud-picker {
    width: 100%;
}

/* Codul și „Publică”: lipite de marginea de jos cât formularul e derulat (același tipar ca
   .cf-bara-salvare din Setări), ca butonul să nu iasă din ecran sub un formular lung. */
.cf-bara-actiune {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 16px;
    padding: 12px 0 4px;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default, #e0e0e0);
}

.cf-bara-actiune .mud-input-control {
    flex: 0 1 260px;
}

/* Cabinete: cardurile compacte pe două coloane de la 1240px; cele care cer atenție, pe tot rândul. */
.cf-grila-cabinete {
    display: grid;
    gap: 12px;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

.cf-grila-cabinete > .cf-cabinet-extins {
    grid-column: 1 / -1;
}

@container platforma (min-width: 1240px) {
    .cf-grila-cabinete {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* „Cabinet nou”: câmpurile pe perechi de la 900px; câmpul cu `cf-span-2` ia tot rândul. */
.cf-form-cabinet {
    display: grid;
    gap: 0 16px;
    grid-template-columns: minmax(0, 1fr);
}

@container platforma (min-width: 900px) {
    .cf-form-cabinet {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cf-form-cabinet > .cf-span-2 {
        grid-column: 1 / -1;
    }
}

/* Cont: starea contului lângă intervenție de la 1240px, ca să se vadă ce se schimbă cât se acționează. */
.cf-grila-cont {
    display: grid;
    gap: 16px;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
}

.cf-grila-cont-stare > .mud-paper {
    margin-bottom: 0 !important;
}

@container platforma (min-width: 1240px) {
    .cf-grila-cont {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }
}
/* =========================================================================
   Administrarea platformei, a doua trecere (2026-10-15): ținte tactile, tipografie pe touch,
   acțiunile sensibile ale cabinetului, rândul sesiunii.

   De ce `pointer: coarse` și nu o lățime de ecran: dimensiunea degetului nu depinde de lățime. O tabletă
   în landscape (1180–1413px) are aceeași problemă ca un telefon, iar un monitor îngust cu mouse nu o are.
   Limită cunoscută: un laptop cu ecran tactil și mouse raportează de obicei `fine`, deci nu primește regulile.
   ========================================================================= */

/* Rândul de sub antet: ora exactă și „Închide”. Numărătoarea inversă e deja în bara de sus. */
.cf-bara-sesiune {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
}

/* Acțiunile unui cabinet: grupul obișnuit + grupul sensibil (Suspendă / Reactivează). Despărțirea e
   spațiul dintre grupuri și un fundal discret, nu o linie: la lățimi mici grupul coboară pe rând nou, iar o
   linie verticală ar rămâne la marginea rândului, fără sens. */
.cf-actiuni-cabinet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 24px;
}

.cf-actiuni-grup,
.cf-actiuni-sensibile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cf-actiuni-sensibile {
    margin-inline-start: auto;
    padding: 4px 6px;
    border-radius: 8px;
    background: rgba(181, 71, 8, 0.08);
    background: color-mix(in srgb, var(--mud-palette-warning, #b54708) 10%, transparent);
}

@media (pointer: coarse) {
    /* 44px: pragul WCAG 2.5.5 / Apple HIG, același ca la intrările meniului (MeniuPlatformaGuardTests). */
    .cf-platforma-continut .mud-button-root:not(.mud-icon-button) {
        min-height: 44px;
    }

    .cf-platforma-continut .mud-icon-button {
        min-width: 44px;
        min-height: 44px;
    }

    .cf-platforma-continut .mud-chip.mud-clickable {
        min-height: 44px;
    }

    /* Captionul e deja 0.9rem (14.4px) global, cu !important (regula „Slightly increase MudBlazor caption”), deci
       aici nu se atinge. Body2 rămânea la 14px, MAI MIC decât captionul: pe touch urcă la 15px ca ierarhia
       (caption < body2) să nu fie inversată. */
    .cf-platforma-continut .mud-typography-body2 {
        font-size: 0.9375rem;
    }
}

/* =========================================================================
   2026-10-15 — funcționalitățile pe cabinet (A1) și afișul cu cod QR (C7)
   ========================================================================= */

/* A1: definițiile funcționalităților, câte încap pe lățimea coloanei (fără praguri de ecran). */
.cf-functionalitati-definitii {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* A1: celula din matrice este un <button> (tastatură, cititor de ecran), fără aspect de buton.
   44px: același prag de atingere ca intrările meniului platformei. */
.cf-celula-functionalitate {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 4px;
    margin: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    border-radius: 8px;
}

.cf-celula-functionalitate:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.cf-celula-functionalitate:disabled {
    cursor: default;
    opacity: 0.6;
}

/* C7: afișul de la recepție. Pe ecran, o foaie centrată; la tipar, doar foaia (restul are cf-no-print,
   bara și meniul le ascunde regula @media print de mai sus). Dimensiunile în mm: codul trebuie să iasă
   la ~9 cm pe A4, ca să se scaneze de la un metru, oricât de lat e ecranul pe care se previzualizează. */
.cf-afis {
    max-width: 190mm;
    margin: 0 auto;
    padding: 14mm 10mm;
    text-align: center;
    background: #fff;
    color: #111;
    border: 1px solid var(--mud-palette-lines-default, #e0e0e0);
    border-radius: 12px;
}

.cf-afis-cabinet {
    font-size: 1.6rem;
    font-weight: 700;
}

.cf-afis-medic {
    font-size: 1.15rem;
    margin-top: 4px;
}

.cf-afis-titlu {
    font-size: 2.4rem;
    font-weight: 800;
    margin-top: 12mm;
}

.cf-afis-subtitlu {
    font-size: 1.15rem;
    margin-top: 4px;
}

.cf-afis-cod {
    display: block;
    width: 90mm;
    max-width: 100%;
    height: auto;
    margin: 8mm auto;
}

.cf-afis-adresa {
    font-size: 1.3rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cf-afis-telefon {
    font-size: 1.15rem;
    margin-top: 6mm;
}

@media print {
    .cf-afis {
        border: none;
        border-radius: 0;
        padding: 0;
        break-inside: avoid;
    }
}

/* =========================================================================
   Administrarea platformei, a treia trecere (2026-10-15): petrol în loc de gri, ecranul de conectare,
   tabelele-card pe tabletă, rândul de filtre. Paleta: Helpers/TemaCabinetFlow (testată pentru contrast);
   valorile de aici sunt aceleași, repetate doar pentru gradiente și umbre, unde MudBlazor nu are variabilă.

   De ce nu `Elevation` pe fiecare MudPaper: pe 15 octombrie toate cardurile aveau aceeași umbră gri
   (rgba(0,0,0,.2)), deci pe tabletă se contopeau cu fundalul alb. Acum fundalul paginii este tintat, iar
   cardul are chenar și o umbră în aceeași nuanță — se schimbă într-un singur loc, nu în 80 de pagini.
   ========================================================================= */

.cf-platforma {
    --cf-fundal: #eef5f6;
    --cf-linie: #d3e3e6;
    --cf-petrol-profund: #072a36;
    --cf-petrol: #0a3442;
    --cf-navy: #12224f; /* albastru închis: doar sfârșit de gradient, alb pe el are 15:1 */
    --cf-mov: #6b46c1; /* = TemaCabinetFlow.PlatformaSecondary; accent rar (progres, insignă, linia de sub bară), niciodată stare */
    --cf-umbra: 7, 42, 54;
    background: var(--cf-fundal);
}

/* Bara de sus: Color.Primary ar fi făcut-o petrol deschis (#0b6477); marca platformei este petrolul închis,
   cu o linie cyan (culoarea sigla) pe margine — singurul loc unde apare. */
.cf-platforma .cf-bara-platforma.mud-appbar {
    background: linear-gradient(105deg, var(--cf-petrol-profund) 0%, var(--cf-petrol) 42%, var(--cf-navy) 100%);
    box-shadow: 0 8px 24px rgba(var(--cf-umbra), 0.2);
}

/* Linia de sub bară: cyan (sigla) care trece în mov. Era un box-shadow cyan; umbra nu poate face gradient. */
.cf-platforma .cf-bara-platforma.mud-appbar::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(100, 223, 223, 0.55) 0%, rgba(139, 108, 224, 0.55) 65%, rgba(139, 108, 224, 0) 100%);
    pointer-events: none;
}

.cf-platforma .mud-main-content {
    background: var(--cf-fundal);
}

/* Cardurile paginii: chenar + umbră tintate. Selectorul cu trei clase câștigă fără !important. */
.cf-platforma-continut .mud-paper.mud-elevation-1,
.cf-platforma-continut .mud-paper.mud-elevation-2,
.cf-platforma-continut .mud-paper.mud-elevation-3 {
    border: 1px solid var(--cf-linie);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(var(--cf-umbra), 0.05), 0 8px 20px -8px rgba(var(--cf-umbra), 0.14);
}

.cf-platforma-continut .mud-paper.mud-paper-outlined {
    border-color: var(--cf-linie);
    border-radius: 12px;
}

/* MudTabs fără antet (meniul lateral alege secțiunea): foaia albă din jurul panourilor dispare, ca
   cardurile să stea direct pe fundal, nu într-un card mare de alb care conține alte carduri. */
.cf-platforma-continut .mud-tabs.cf-fara-antet-file {
    background: transparent;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

.cf-platforma-continut .cf-fara-antet-file .mud-tabs-panels {
    background: transparent;
}

/* Subsol */
.cf-platforma-subsol {
    margin-top: 8px;
    padding: 16px 0;
    border-top: 1px solid var(--cf-linie);
    background: #fff;
}

.cf-platforma-subsol-rand {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4px 16px;
    width: 100%;
    max-width: 1520px;
    margin-inline: auto;
    padding-inline: clamp(16px, 2.4vw, 32px);
    color: var(--mud-palette-text-secondary);
}

.cf-platforma-subsol-versiune {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Titlul din bara de sus: nu rupe numele aplicației pe telefon. */
.cf-bara-titlu {
    line-height: 1.15;
    min-width: 0;
}

.cf-bara-titlu .mud-typography-h6 {
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Intrarea activă a meniului: aceeași culoare ca bara de sus (petrolul închis din care pornește gradientul ei),
   nu movul — pe 15 octombrie movul din stânga se bătea cu bara și părea o a doua marcă. Textul în petrol (peste 10:1
   pe tentă). Selectorul cu două clase bate regula comună din `.cf-meniu-item--activ`, pe care o folosește și meniul
   cabinetului. */
.cf-platforma .cf-meniu-item--activ {
    background: rgba(10, 52, 66, 0.08);
    border-left-color: var(--cf-petrol);
    color: var(--cf-petrol);
}

/* Meniul lateral: o treaptă mai aerisit pe touch, rotunjit la fel ca cardurile. */
.cf-platforma .cf-meniu-item {
    border-radius: 10px;
}

.cf-platforma .cf-meniu-item .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.cf-platforma .cf-meniu-item--activ .mud-icon-root {
    color: var(--cf-petrol);
}

/* ---- Indicatorii din Panou: banda din stânga spune starea (ok / atenție / grav), numărul o confirmă. ---- */
.cf-kpi-card {
    --cf-stare: transparent;
    height: 100%;
    box-shadow: inset 4px 0 0 var(--cf-stare), 0 1px 2px rgba(var(--cf-umbra), 0.05), 0 8px 20px -8px rgba(var(--cf-umbra), 0.14) !important;
    overflow: hidden;
}

.cf-kpi-card--ok { --cf-stare: var(--mud-palette-success); }
.cf-kpi-card--atentie { --cf-stare: var(--mud-palette-warning); }
.cf-kpi-card--grav { --cf-stare: var(--mud-palette-error); }

/* „Overline” al MudBlazor este majuscule răsfirate de 12px: pe tabletă, etichetele indicatorilor se
   citeau mai greu decât cifra de sub ele. Fraza obișnuită, 0.9375rem, culoarea textului secundar. */
.cf-kpi-card .mud-typography-overline {
    display: block;
    margin-bottom: 4px;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mud-palette-text-secondary);
}

.cf-kpi-card .mud-typography-h4 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ---- Tabele: antet tintat, fără gri. ---- */
.cf-platforma-continut .mud-simple-table .mud-table-root th {
    background: #f4f9fa;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.cf-platforma-continut .mud-simple-table .mud-table-root td,
.cf-platforma-continut .mud-simple-table .mud-table-root th {
    border-bottom-color: var(--cf-linie);
}

/* ---- Rândul de filtre din „Cabinete”: se rupe pe rânduri, nu iese din ecran. ---- */
.cf-bara-filtre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.cf-bara-filtre .cf-filtru-cauta {
    flex: 1 1 280px;
    min-width: 0;
}

.cf-bara-filtre-bife {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
}

/* ---- Tabelele-card, a doua formă: câmpurile unui rând stau într-o grilă, nu una sub alta.
   Un card de 800px cu câmpuri una sub alta avea jumătate din lățime goală (tabletă în portret). ---- */
@container platforma (max-width: 899.98px) {
    .cf-tabel-carduri tbody tr {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
        gap: 6px 20px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(var(--cf-umbra), 0.05);
    }

    .cf-tabel-carduri tbody td {
        min-width: 0;
    }

    .cf-tabel-carduri tbody td.cf-celula-titlu,
    .cf-tabel-carduri tbody td.cf-celula-actiuni {
        grid-column: 1 / -1;
    }
}

/* Tabelele cu 8 coloane (Utilizare) cer ~1250px; pe o tabletă în peisaj coloana are ~1170px și
   ultima coloană ieșea din ecran. Aceleași reguli ca mai sus, cu pragul la 1240px (cel al grilelor pe
   două coloane). Modificatorul se pune doar pe tabelele late. */
@container platforma (max-width: 1239.98px) {
    .cf-tabel-carduri--lat table,
    .cf-tabel-carduri--lat tbody,
    .cf-tabel-carduri--lat tr,
    .cf-tabel-carduri--lat td {
        display: block !important;
        width: 100% !important;
    }

    .cf-tabel-carduri--lat thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .cf-tabel-carduri--lat tbody tr {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
        gap: 6px 20px;
        margin-bottom: 12px;
        padding: 12px 16px;
        border: 1px solid var(--mud-palette-lines-default, #d3e3e6);
        border-radius: 12px;
        background: #fff;
    }

    .cf-tabel-carduri--lat tbody td {
        min-width: 0;
        padding: 4px 0 !important;
        border: 0 !important;
        white-space: normal !important;
    }

    .cf-tabel-carduri--lat td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
    }

    .cf-tabel-carduri--lat td.cf-celula-titlu {
        grid-column: 1 / -1;
        padding-bottom: 8px !important;
        font-size: 1rem;
        font-weight: 600;
    }
}

/* =========================================================================
   Ecranele de conectare și de deschidere (2026-10-15)
   Marcajul: Platforma.razor (conectare, activarea factorului, deschiderea) și Auth.razor (`cf-auth-*`).

   Un singur ecran, trei forme, după lățimea COLOANEI (aceeași regulă ca restul paginii):
     * sub 800px — o carte în coloană: banda de brand compactă deasupra, formularul dedesubt;
     * de la 800px — două panouri: brand în stânga (petrol, sigla mare, filigran), formular în dreapta.
   Tableta în portret (~890px) intră în a doua formă; telefonul în peisaj (~800px × 360px) abia, de aceea
   panoul de brand nu are înălțime fixă și pagina derulează, nu taie.
   ========================================================================= */

.cf-poarta {
    display: flex;
    justify-content: center;
    padding: clamp(4px, 2vw, 32px) 0 8px;
}

.cf-poarta-card {
    width: 100%;
    max-width: 520px;
    overflow: hidden;
    border: 1px solid var(--cf-linie, #d3e3e6);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(7, 42, 54, 0.05), 0 28px 56px -20px rgba(7, 42, 54, 0.28);
}

.cf-poarta-card--lat {
    max-width: 640px;
}

.cf-poarta-card--split {
    max-width: 980px;
}

/* Banda / panoul de brand. Filigranul este chiar sigla (ramurile plămânului), mărită și stinsă:
   singurul element decorativ al ecranului, și singurul care poartă identitatea platformei. */
.cf-poarta-marca {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(15, 115, 136, 0.9) 0%, rgba(15, 115, 136, 0) 62%),
        radial-gradient(90% 110% at 100% 0%, rgba(107, 70, 193, 0.4) 0%, rgba(107, 70, 193, 0) 60%),
        linear-gradient(160deg, #0a3442 0%, var(--cf-navy) 100%);
}

.cf-poarta-sigla {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
}

.cf-poarta-marca-text {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.cf-poarta-marca-titlu {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}

.cf-poarta-marca-descriere {
    display: none;
    margin: 12px 0 0;
    max-width: 34ch;
    font-size: 1rem;
    line-height: 1.55;
    color: #cfe9ee; /* 10,4:1 pe #0a3442 */
}

.cf-poarta-filigran {
    position: absolute;
    right: -6%;
    bottom: -12%;
    width: 64%;
    max-width: 340px;
    opacity: 0.085;
    pointer-events: none;
}

.cf-poarta-formular {
    padding: 24px 20px 28px;
}

.cf-poarta-formular > h2:first-child {
    margin-top: 0;
}

/* „sau” între formular și furnizorul extern. */
.cf-sau {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.cf-sau::before,
.cf-sau::after {
    content: "";
    flex: 1 1 0;
    height: 1px;
    background: var(--mud-palette-lines-default, #d3e3e6);
}

/* Butoanele mari ale ecranelor de conectare: 52px, ca și câmpurile. */
.cf-poarta .mud-button-root.mud-button-filled,
.cf-poarta .mud-button-root.mud-button-outlined {
    min-height: 52px;
    border-radius: 12px;
    text-transform: none;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

@container platforma (min-width: 560px) {
    .cf-poarta-formular {
        padding: 32px 36px 36px;
    }

    .cf-poarta-marca-descriere {
        display: block;
    }
}

@container platforma (min-width: 800px) {
    .cf-poarta-card--split {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }

    .cf-poarta-card--split .cf-poarta-marca {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 24px;
        padding: 48px 40px;
    }

    .cf-poarta-card--split .cf-poarta-sigla {
        width: 72px;
        height: 72px;
    }

    .cf-poarta-card--split .cf-poarta-marca-titlu {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    .cf-poarta-card--split .cf-poarta-formular {
        align-self: center;
        padding: 48px 44px;
    }
}

/* Telefon în peisaj (≈844×390): coloana are ≥800px, deci intră pe două panouri, dar înălțimea nu ajunge pentru
   paddingul de tabletă. Panoul de brand se strânge (fără descriere, sigla mică, padding redus) ca formularul
   să rămână cât mai sus; ce nu încape se derulează. Regulile cu `.cf-poarta-card--split` repetă selectorul
   din interogarea de container, altfel (aceeași specificitate, ordine) nu ar câștiga. */
@media (max-height: 520px) {
    .cf-poarta {
        padding-top: 0;
    }

    .cf-poarta-marca {
        padding-block: 12px;
    }

    .cf-poarta-marca-descriere {
        display: none !important;
    }

    .cf-poarta-card--split .cf-poarta-marca {
        gap: 12px;
        padding: 16px 28px;
    }

    .cf-poarta-card--split .cf-poarta-sigla {
        width: 48px;
        height: 48px;
    }

    .cf-poarta-card--split .cf-poarta-marca-titlu {
        font-size: 1.25rem;
    }

    .cf-poarta-card--split .cf-poarta-formular {
        padding: 20px 28px;
    }
}

/* ---- Autentificarea pacientului / personalului (Auth.razor): același limbaj, culoarea cabinetului. ---- */
.cf-auth-fundal {
    background:
        radial-gradient(900px 320px at 50% -60px, rgba(0, 119, 182, 0.12), rgba(0, 119, 182, 0) 70%);
    background:
        radial-gradient(900px 320px at 50% -60px, color-mix(in srgb, var(--mud-palette-primary) 14%, transparent), transparent 70%);
}

.cf-auth-container {
    padding-top: clamp(16px, 4vw, 48px) !important;
    padding-bottom: clamp(24px, 4vw, 48px) !important;
}

.cf-auth-card.mud-paper {
    padding: 24px 20px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 20px;
    box-shadow: 0 2px 4px rgba(16, 39, 47, 0.05), 0 24px 48px -20px rgba(16, 39, 47, 0.25);
}

@media (min-width: 600px) {
    .cf-auth-card.mud-paper {
        padding: 36px 40px 32px;
    }
}

/* Antetul cardului: pictograma într-un disc tintat cu culoarea cabinetului. */
.cf-auth-antet .mud-icon-root {
    box-sizing: content-box;
    padding: 14px;
    border-radius: 50%;
    background: rgba(0, 119, 182, 0.1);
    background: color-mix(in srgb, var(--mud-palette-primary) 11%, transparent);
}

.cf-auth-antet .mud-typography-h4,
.cf-auth-antet .mud-typography-h5 {
    letter-spacing: -0.005em;
}

/* Legătura de trecere conectare ↔ cont nou: țintă de atingere de 44px, nu o propoziție mică. */
.cf-auth-comuta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
}

/* Pe telefon în peisaj, cardul nu mai e centrat vertical și nu are margini duble. */
@media (max-height: 520px) {
    .cf-auth-container {
        padding-top: 8px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf-poarta-card,
    .cf-input {
        transition: none;
    }
}

/* Codul de 6 cifre (deschiderea administrării, activarea factorului): cifre mari și răsfirate, ca să se
   verifice dintr-o privire ce s-a tastat pe tabletă. Doar pe câmpurile numerice ale ecranelor de poartă. */
.cf-poarta input[inputmode="numeric"] {
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.18em;
}

/* =========================================================================
   Administrarea platformei, a patra trecere (2026-10-15): mai puțină aglomerație în „Starea platformei” și în
   „Cabinete”, meniul activ în culoarea barei de sus. Regula comună: ce e în regulă stă liniștit (pictogramă sau
   bulină, text obișnuit), ce cere o acțiune are culoare, chip și poziție de început.
   ========================================================================= */

/* Culoarea stării într-o variabilă, ca bulina unui fapt și banda unui antet să o ia de aici (cf. `.cf-kpi-card--*`). */
.cf-stare--ok { --cf-stare: var(--mud-palette-success); }
.cf-stare--atentie { --cf-stare: var(--mud-palette-warning); }
.cf-stare--grav { --cf-stare: var(--mud-palette-error); }

/* Antetul „Starea platformei”: verdictul, apoi când s-a citit; butonul la capăt. */
.cf-stare-antet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
}

.cf-stare-antet--card {
    justify-content: flex-start;
    padding: 14px 20px;
    box-shadow: inset 4px 0 0 var(--cf-stare, transparent);
}

.cf-platforma .cf-stare-antet-pictograma.mud-icon-root {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    font-size: 2rem;
}

.cf-stare-antet-text {
    flex: 1 1 220px;
    min-width: 0;
}

.cf-stare-antet-text h2 {
    margin: 0;
}

/* Detalii pliabile (rând de verificare, „verificări trecute”): același marcaj ▸ ca la `.cf-ajutor`. */
.cf-detalii-caseta > summary {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    list-style: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    cursor: pointer;
}

.cf-detalii-caseta > summary::-webkit-details-marker {
    display: none;
}

.cf-detalii-caseta > summary::before {
    content: "▸";
    display: inline-block;
    transition: transform 0.15s ease;
}

.cf-detalii-caseta[open] > summary::before {
    transform: rotate(90deg);
}

.cf-detalii-caseta > summary:focus-visible {
    outline: 3px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.cf-verificari-trecute {
    margin-top: 8px;
}

/* „Cabinet nou” închis: un singur buton, la dreapta, nu un card cu titlu. */
.cf-cabinet-nou-rand {
    display: flex;
    justify-content: flex-end;
}

/* Cele cinci cifre din fila „Cabinete”. Doar cele care pot cere o acțiune se colorează, și numai peste zero. */
.cf-cifre {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}

.cf-cifra {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--cf-linie, #d3e3e6);
    border-radius: 12px;
}

.cf-cifra b {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

.cf-cifra span {
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--mud-palette-text-secondary);
}

.cf-cifra--atentie {
    background: rgba(181, 71, 8, 0.07);
    background: color-mix(in srgb, var(--mud-palette-warning, #b54708) 8%, #fff);
    border-color: rgba(181, 71, 8, 0.35);
    border-color: color-mix(in srgb, var(--mud-palette-warning, #b54708) 35%, transparent);
}

.cf-cifra--atentie b {
    color: var(--mud-palette-warning, #b54708);
}

/* Faptele unui cabinet (livrare, canale, activitate): etichetă + text cu bulină. Bulina ia culoarea din `--cf-stare`
   (clasa `.cf-stare--*`); fără clasă e neutră. Textul stării rămâne mereu: culoarea nu poartă singură informația. */
.cf-fapte {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 6px 14px;
    align-items: baseline;
    margin: 12px 0 0;
}

.cf-fapte dt {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.cf-fapte dd {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 18px;
    margin: 0;
}

.cf-fapt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.cf-fapt::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cf-stare, #9fb4ba);
}

/* Acțiunile cardului stau ca un subsol: linie deasupra, butoanele obișnuite ca text, „Suspendă” în grupul lui. */
.cf-actiuni-cabinet {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--cf-linie, #d3e3e6);
}

@media (pointer: coarse) {
    .cf-detalii-caseta > summary {
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf-detalii-caseta > summary::before {
        transition: none;
    }
}