/* ===========================================================================
   Stratul de stiluri al aplicatiei.

   MudBlazor isi aduce propriile stiluri si isi expune paleta ca variabile CSS
   (--mud-palette-*). Aici stau doar lucrurile pe care tema MudBlazor nu le poate
   exprima: focalizarea, miscarea redusa, tintele tactile, navigatia de jos si
   formularele statice, care nu pot folosi componente MudBlazor.

   Regula: nicio culoare scrisa direct. Totul trece prin variabilele paletei,
   ca sa se schimbe singur intre tema luminoasa si cea intunecata.
   =========================================================================== */

:root {
    /* Inaltimea REALA a barei de sus (MudAppBar Dense="true"): trei sferturi din
       inaltimea normala MudBlazor, nu inaltimea normala intreaga. Cu valoarea gresita,
       antetul lipicios al unui grup se lipea prea jos, lasand un gol prin care se vedea
       firul de dedesubt. */
    --app-bar-height: calc(var(--mud-appbar-height) - var(--mud-appbar-height) / 4);
    --app-mobile-nav-height: 60px;
    --app-touch-target: 44px;
    --app-radius: 10px;

    /* Marginea de jos a ecranelor cu crestatura (iPhone). Fara ea, bara de
       navigatie sta peste bara de gesturi a sistemului. */
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Marginea de sus (crestatura si ceasul). Fara ea, bara de sus ajunge sub
       ceas: clopotelul si meniul se vad, dar atingerea o ia sistemul. */
    --app-safe-top: env(safe-area-inset-top, 0px);

    /* Raza, in trepte: suprafata mica (input, chip) creste spre suprafata mare
       (hero, ecran de autentificare). O singura raza peste tot aplatiza orice
       ierarhie intre "camp de completat" si "carton de bun venit". */
    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 20px;
    --app-radius-xl: 26px;
    --app-radius-pill: 999px;

    /* Scara de spatiere ceruta: 4/8/12/16/20/24/32. Adaugata #8 (40px) pentru
       spatiul mare dintre sectiuni pe ecrane inalte. */
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
    --app-space-5: 20px;
    --app-space-6: 24px;
    --app-space-7: 32px;
    --app-space-8: 40px;

    /* Umbre foarte joase: cardurile se despart de fundal prin contrastul
       hartie/alb, nu prin umbre grele. --app-shadow-lg e rezervata pentru
       hero si autentificare - niciodata pentru liste. */
    --app-shadow-sm: 0 1px 2px rgba(17, 24, 39, .04), 0 1px 1px rgba(17, 24, 39, .03);
    --app-shadow-md: 0 4px 16px rgba(17, 24, 39, .08), 0 1px 2px rgba(17, 24, 39, .04);
    --app-shadow-lg: 0 16px 40px rgba(17, 24, 39, .16), 0 4px 10px rgba(17, 24, 39, .06);

    /* Durate si curba, echivalentul Easing.CubicOut din MAUI. */
    --app-motion-fast: 150ms;
    --app-motion-base: 220ms;
    --app-motion-slow: 320ms;
    --app-ease: cubic-bezier(.33, 1, .68, 1);

    /* Gradient discret, STRICT pentru autentificare si cardul de bun-venit -
       nu pentru fiecare element. Bleumarinul institutional, doar cu o treapta
       de lumina intre capete. */
    --app-gradient-hero: linear-gradient(135deg, #1B2A41 0%, #24354E 55%, #2F4460 100%);
}

[data-theme="dark"] {
    /* Pe fundal deja inchis, o umbra la fel de intunecata devine invizibila -
       aici ridicarea se vede prin lumina, nu prin intuneric. */
    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .35);
    --app-shadow-md: 0 4px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
    --app-shadow-lg: 0 20px 48px rgba(0, 0, 0, .6), 0 6px 14px rgba(0, 0, 0, .35);

    --app-gradient-hero: linear-gradient(135deg, #0E1219 0%, #161B24 55%, #202A3A 100%);
}

/* ---------------------------------------------------------------------------
   Miscare
   Respectam optiunea de sistem. Cine a cerut mai putina miscare o primeste peste
   tot, inclusiv in animatiile interne ale MudBlazor.

   ".reduce-motion" e echivalentul manual pentru aplicatia de telefon: unele
   WebView-uri vechi nu propaga prefers-reduced-motion din setarile sistemului,
   asa ca MotionPreferences (portul MAUI al verificarii native) o adauga pe
   <html> la pornire cand sistemul cere mai putina miscare. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

html.reduce-motion *,
html.reduce-motion *::before,
html.reduce-motion *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
}

/* ---------------------------------------------------------------------------
   Intrarea in ecran / sectiune
   Fade discret + urcare de 8px, ca in Power-Safety (FadeToAsync + TranslateToAsync,
   CubicOut). Se aplica pe CONTAINERUL de continut al unei pagini, o singura data
   la intrare - nu pe fiecare element din el.
   --------------------------------------------------------------------------- */
@keyframes app-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.app-enter {
    animation: app-enter var(--app-motion-slow) var(--app-ease) both;
}

/* Cateva carduri la rand, fiecare cu o intarziere mica: nu o cascada lunga,
   doar atat cat sa se simta ca vin unul dupa altul. Folosit doar pe grupuri
   scurte (dashboard, primele randuri) - o lista lunga ar intarzia perceptia
   de "gata incarcat". */
.app-enter-stagger > * {
    opacity: 0;
    animation: app-enter var(--app-motion-base) var(--app-ease) both;
}

.app-enter-stagger > *:nth-child(1) { animation-delay: 0ms; }
.app-enter-stagger > *:nth-child(2) { animation-delay: 40ms; }
.app-enter-stagger > *:nth-child(3) { animation-delay: 80ms; }
.app-enter-stagger > *:nth-child(4) { animation-delay: 120ms; }
.app-enter-stagger > *:nth-child(5) { animation-delay: 160ms; }
.app-enter-stagger > *:nth-child(n+6) { animation-delay: 200ms; }

/* ---------------------------------------------------------------------------
   Apasare
   Echivalentul VisualStateManager "Pressed" din Power-Safety: scara foarte
   discreta, nu opacitate - opacitatea pe un fundal colorat arata ca un buton
   stricat, scara arata ca un buton apasat.
   --------------------------------------------------------------------------- */
.app-pressable {
    transition: transform var(--app-motion-fast) var(--app-ease);
}

.app-pressable:active {
    transform: scale(.98);
}

/* ---------------------------------------------------------------------------
   Focalizare
   Conturul implicit al browserului dispare pe fundalurile inchise. Punem unul
   propriu, care ia culoarea din paleta si se vede pe ambele teme.
   Folosim :focus-visible, nu :focus: altfel conturul apare si la clic de mouse.
   --------------------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.mud-button-root:focus-visible,
.mud-icon-button:focus-visible,
.mud-nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Pe fundal primar conturul primar ar fi invizibil. */
.mud-appbar :focus-visible {
    outline-color: var(--mud-palette-appbar-text);
}

/* ---------------------------------------------------------------------------
   Tinte tactile
   Sub 44px degetul rateaza. Se aplica doar acolo unde apasarea conteaza.
   --------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .mud-icon-button,
    .mud-button-root,
    .mud-nav-link {
        min-height: var(--app-touch-target);
    }

    .mud-table-row .mud-icon-button {
        min-width: var(--app-touch-target);
    }
}

/* ---------------------------------------------------------------------------
   Marca
   --------------------------------------------------------------------------- */
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.app-brand__mark {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Emblema e desenata in negru. Pe tema intunecata o intoarcem, altfel dispare. */
[data-theme="dark"] .app-brand__mark {
    filter: invert(1) brightness(1.9);
}

.app-brand__text {
    min-width: 0;
}

.app-brand__name {
    display: block;
    font-family: "Source Serif 4", Georgia, Cambria, serif;
    font-weight: 600;
    font-size: 1.0625rem;
    letter-spacing: .01em;
    line-height: 1.15;

    /* Numele nu are voie sa treaca pe al doilea rand: ar inalta bara de sus. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-brand__sub {
    display: block;
    font-family: Inter, system-ui, sans-serif;
    font-weight: 500;
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .62;
    line-height: 1.2;
    white-space: nowrap;
}

/* Sub 600px ramane doar emblema si numele scurt. */
@media (max-width: 599.98px) {
    .app-brand__sub { display: none; }
    .app-brand__name { font-size: .9375rem; }
    .app-brand__mark { width: 28px; height: 28px; }
}

/* ---------------------------------------------------------------------------
   Ecranele de autentificare (DOAR aplicatia de telefon - Login/Register/Terms
   din WebAppM.Mobile; ecranele din browser au propriile clase, .app-input etc.,
   si raman neatinse in aceasta faza).

   Fundalul e gradientul institutional, cu un singur cerc foarte stins deasupra:
   destul cat sa dea adancime, nu efectul de forme suprapuse. Emblema si titlul
   stau DIRECT pe gradient, nu ascunse ca filigran - ecranul de intrare e locul
   unde marca chiar trebuie sa se vada.
   --------------------------------------------------------------------------- */
.app-auth {
    position: relative;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: calc(var(--app-space-8) + var(--app-safe-top)) var(--app-space-4)
             calc(var(--app-space-8) + var(--app-safe-bottom));
    overflow: hidden;
    background: var(--app-gradient-hero);
}

/* In aplicatie, ecranul de intrare ia inaltimea ecranului intreg (100vh) din prima clipa. WebView-ul de iOS da 763 pe un
   ecran de 844 pana isi corecteaza viewport-ul (IosViewportFix), iar cu 100dvh ramanea o banda goala sub el. Pe web ramane
   dvh, corect acolo (bara browserului). */
.app-hybrid .app-auth {
    min-height: 100vh;
}

.app-auth::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -90px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    pointer-events: none;
}

.app-auth__hero {
    position: relative;
    width: 100%;
    max-width: 420px;
    text-align: center;
    margin-bottom: var(--app-space-6);
}

/* Pe gradientul inchis, textul si emblema (desenata in negru) trebuie sa fie deschise -
   indiferent de tema aleasa, fiindca fundalul de aici e mereu bleumarin inchis. */
.app-auth__hero .app-brand__name,
.app-auth__hero .app-brand__sub {
    color: #FFFFFF;
}

.app-auth__hero .app-brand__mark {
    filter: invert(1) brightness(1.9);
}

/* Subtitlul marcii ramane vizibil aici, spre deosebire de bara de sus - ecranul
   de intrare are loc, si "Portalul membrilor" spune omului unde a ajuns. */
@media (max-width: 599.98px) {
    .app-auth__hero .app-brand__sub { display: block; }
    .app-auth__hero .app-brand { justify-content: center; }
}

.app-auth__tagline {
    margin: var(--app-space-3) 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, .8);
}

.app-auth__card {
    position: relative;
    width: 100%;
    max-width: 420px;
    border-radius: var(--app-radius-xl) !important;
    box-shadow: var(--app-shadow-lg) !important;
}

/* ---------------------------------------------------------------------------
   Bara de sus sub crestatura (iPhone)
   In aplicatie, ecranul se intinde si sub ceas. Bara fixa coboara cu marginea de
   sus (fondul ei ramane si sub ceas), iar continutul se muta cu aceeasi masura,
   fara sa rescriem formulele MudBlazor. Pe web marginea e 0, deci nu se schimba
   nimic; pe Android o anuleaza regula de mai jos.
   --------------------------------------------------------------------------- */

/* Pe Android, continutul e deja mutat sub bare de partea nativa (SystemBarInsets), iar WebView-ul raporteaza si el
   marginile ca env(safe-area-inset-*): cele doua se adunau si ieseau benzi albe mari sus si jos. Aici raman doar cele
   native. Pe iOS marginile vin numai din CSS (IosViewportFix), deci acolo nu se atinge nimic. Atributul il pune
   index.html al aplicatiei; pe web nu exista, deci acolo ramane env() ca pana acum. */
html[data-platform="android"] {
    --app-safe-top: 0px;
    --app-safe-bottom: 0px;
}

.mud-appbar.mud-appbar-fixed-top {
    padding-top: var(--app-safe-top);
}

.mud-main-content {
    margin-top: var(--app-safe-top);
}

/* Meniul din stanga ("Mai mult") porneste de sub bara de sus, nu de sub ceas: MudBlazor il pune la inaltimea barii,
   fara marginea de sus pe care bara o are pe iPhone, deci acoperea logoul si clopotelul (raportat pe 24.10.2026).
   Pe Android si pe web marginea e 0: nu se schimba nimic. "html" doar ca regula sa treaca peste cea din MudBlazor. */
html .mud-appbar-dense ~ .mud-drawer-fixed.mud-drawer-responsive.mud-drawer-clipped-always,
html .mud-appbar-dense ~ .mud-drawer-fixed.mud-drawer-temporary.mud-drawer-clipped-always {
    top: calc(var(--app-bar-height) + var(--app-safe-top));
    height: calc(100% - var(--app-bar-height) - var(--app-safe-top));
}

/* Meniul cu trei puncte din bara de sus se inchide cand apesi in afara lui: MudBlazor pune un strat peste tot ecranul
   care prinde atingerea. Doua lucruri il ocoleau (raportat pe 23.10.2026):
   1. Stratul sta in bara de sus, la nivelul ei, iar bara de jos e la acelasi nivel, dar mai tarziu in pagina - deci
      deasupra. O atingere pe "Mai mult" deschidea sertarul langa meniul inca deschis. Cat timp meniul e deschis, bara
      de sus urca un pas: atingerea pe bara de jos inchide intai meniul.
   2. Pe iPhone, o atingere pe ceva ce nu pare de apasat (un strat gol, fara cursor de mana) nu ajunge la aplicatie,
      deci meniul nu se inchidea nici apasand pe pagina. */
.mud-appbar:has(.mud-menu > .mud-overlay) {
    z-index: calc(var(--mud-zindex-appbar) + 1);
}

@media (pointer: coarse) {
    .mud-overlay {
        cursor: pointer;
    }
}

/* ---------------------------------------------------------------------------
   Navigatia de jos, pe telefon
   Portalul membrilor are noua destinatii; fara bara asta fiecare mutare cere
   hamburger, sertar, alegere. Trei atingeri pentru una singura.
   --------------------------------------------------------------------------- */
.app-mobile-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;

    height: calc(var(--app-mobile-nav-height) + var(--app-safe-bottom));
    padding-bottom: var(--app-safe-bottom);

    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-divider);
    box-shadow: 0 -8px 24px rgba(17, 24, 39, .05);
}

[data-theme="dark"] .app-mobile-nav {
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .3);
}

.app-mobile-nav__item {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    border: 0;
    background: none;
    padding: 7px 4px 6px;
    cursor: pointer;

    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-family: inherit;
    font-size: .6875rem;
    line-height: 1.1;

    transition: color var(--app-motion-fast) var(--app-ease);
    -webkit-tap-highlight-color: transparent;
}

.app-mobile-nav__item:hover {
    color: var(--mud-palette-text-primary);
}

.app-mobile-nav__item--active {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Indicatorul de stare activa: o pastila discreta in spatele iconitei, in loc de
   linia subtire de sus - modelul Material 3, mai aproape de o aplicatie nativa. */
.app-mobile-nav__icon-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 26px;
    border-radius: var(--app-radius-pill);
    transition: background-color var(--app-motion-base) var(--app-ease),
                transform var(--app-motion-fast) var(--app-ease);
}

.app-mobile-nav__item--active .app-mobile-nav__icon-slot {
    background: color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}

.app-mobile-nav__item:active .app-mobile-nav__icon-slot {
    transform: scale(.9);
}

.app-mobile-nav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Continutul nu are voie sa ramana sub bara. Si nici sa faca pagina mai lata decat ecranul: un singur element
   prea lat (un antet, un link lung) lasa toata pagina sa fie trasa in stanga si in dreapta. "clip", nu "hidden":
   nu face din continut un loc de derulat, deci antetele lipite sus (position: sticky) raman lipite. */
.app-has-mobile-nav .mud-main-content {
    padding-bottom: calc(var(--app-mobile-nav-height) + var(--app-safe-bottom) + 16px);
    overflow-x: clip;
}

@media (min-width: 960px) {
    .app-mobile-nav { display: none; }
    .app-has-mobile-nav .mud-main-content { padding-bottom: 0; }
}

/* Legaturile din sertar care pe telefon sunt deja in bara de jos (vezi MemberNavMenu). */
@media (max-width: 959.98px) {
    .app-nav-wide-only { display: none; }
}

/* ---------------------------------------------------------------------------
   MudTable pe ecran ingust: din perechi eticheta/valoare, in carduri

   Implicit, MudBlazor face din fiecare celula un rand intreg, cu eticheta la
   stanga si valoarea la DREAPTA. La /admin/people asta inseamna sase randuri
   pentru un singur om, cu numele aliniat in dreapta, sub cuvantul "Nume", ca si
   cum ar fi o valoare oarecare. O persoana ocupa un ecran.

   Aici randul redevine un card: prima celula e titlul, restul sunt perechi
   compacte pe doua coloane, cu eticheta deasupra valorii - asa se citesc.

   ATENTIE la media query-uri. MudBlazor pune clasa (.mud-xs-table s.a.m.d.) pe
   tabel INDIFERENT de latime si activeaza modul ingust din @media. Regulile de
   mai jos trebuie sa stea in exact aceleasi praguri - 600 / 960 / 1280 px -
   altfel se aplica si pe desktop si strica tabelul normal.
   --------------------------------------------------------------------------- */

/* Partea comuna, scrisa o data pentru fiecare prag. */
@media (max-width: 600px) {
    .mud-xs-table .mud-table-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 8px;
        padding: 10px 4px 12px;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .mud-xs-table .mud-table-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1px;
        padding: 5px 12px;
        min-width: 0;
    }

    /* MudBlazor pune deja o linie sub ultima celula; cu grila ar aparea de doua ori. */
    .mud-xs-table .mud-table-row .mud-table-cell:last-child {
        border-bottom: 0;
    }

    .mud-xs-table .mud-table-cell::before {
        padding: 0;
        font-size: .6875rem;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

    /* Prima celula e numele. Devine titlul cardului, pe toata latimea, fara eticheta:
       "Nume" deasupra unui nume de om nu spune nimic. */
    .mud-xs-table .mud-table-cell:first-child {
        grid-column: 1 / -1;
        font-size: 1rem;
        font-weight: 600;
        padding-bottom: 8px;
    }

    .mud-xs-table .mud-table-cell:first-child::before {
        display: none;
    }

    /* Coloana de actiuni: fara eticheta, pe rand, lipita la dreapta. */
    .mud-xs-table .mud-table-cell:not([data-label]),
    .mud-xs-table .mud-table-cell[data-label=""] {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
        padding-top: 8px;
    }
}

@media (max-width: 960px) {
    .mud-sm-table .mud-table-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 8px;
        padding: 10px 4px 12px;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .mud-sm-table .mud-table-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1px;
        padding: 5px 12px;
        min-width: 0;
    }

    .mud-sm-table .mud-table-row .mud-table-cell:last-child {
        border-bottom: 0;
    }

    .mud-sm-table .mud-table-cell::before {
        padding: 0;
        font-size: .6875rem;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

    .mud-sm-table .mud-table-cell:first-child {
        grid-column: 1 / -1;
        font-size: 1rem;
        font-weight: 600;
        padding-bottom: 8px;
    }

    .mud-sm-table .mud-table-cell:first-child::before {
        display: none;
    }

    .mud-sm-table .mud-table-cell:not([data-label]),
    .mud-sm-table .mud-table-cell[data-label=""] {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
        padding-top: 8px;
    }
}

@media (max-width: 1280px) {
    .mud-md-table .mud-table-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 8px;
        padding: 10px 4px 12px;
        border-bottom: 1px solid var(--mud-palette-table-lines);
    }

    .mud-md-table .mud-table-cell {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 1px;
        padding: 5px 12px;
        min-width: 0;
    }

    .mud-md-table .mud-table-row .mud-table-cell:last-child {
        border-bottom: 0;
    }

    .mud-md-table .mud-table-cell::before {
        padding: 0;
        font-size: .6875rem;
        font-weight: 500;
        line-height: 1.3;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--mud-palette-text-secondary);
    }

    .mud-md-table .mud-table-cell:first-child {
        grid-column: 1 / -1;
        font-size: 1rem;
        font-weight: 600;
        padding-bottom: 8px;
    }

    .mud-md-table .mud-table-cell:first-child::before {
        display: none;
    }

    .mud-md-table .mud-table-cell:not([data-label]),
    .mud-md-table .mud-table-cell[data-label=""] {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 4px;
        padding-top: 8px;
    }
}

/* Latimea da numarul de coloane. Pe o tableta de 768px, doua coloane lasa
   jumatate din rand gol. */
@media (min-width: 600px) and (max-width: 960px) {
    .mud-sm-table .mud-table-row,
    .mud-md-table .mud-table-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 960px) and (max-width: 1280px) {
    .mud-md-table .mud-table-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Pe latimi foarte mici doua coloane inghesuie textul. */
@media (max-width: 359.98px) {
    .mud-xs-table .mud-table-row,
    .mud-sm-table .mud-table-row,
    .mud-md-table .mud-table-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------------------------
   Carduri de lista - varianta scrisa de mana, pentru listele care nu sunt tabele
   --------------------------------------------------------------------------- */
.app-list-card {
    display: block;
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    transition: background-color .15s ease;
}

.app-list-card:last-child { border-bottom: 0; }

.app-list-card--clickable { cursor: pointer; }

.app-list-card--clickable:hover {
    background: var(--mud-palette-table-hover);
}

.app-list-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 6px;
}

.app-list-card__fact {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    font-size: .8125rem;
    min-width: 0;
}

.app-list-card__fact-label {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

/* ---------------------------------------------------------------------------
   Bulina de notificari
   MudBadge o aseaza la top:-8px fata de pictograma. Intr-o bara densa de 46px,
   asta o duce la -9px fata de marginea de sus a ferestrei: jumatate din ea iese
   din pagina si browserul o taie. Se vede doar pe telefon, doar cand exista
   notificari necitite - adica exact cand conteaza.
   --------------------------------------------------------------------------- */
/* MudBlazor pozitioneaza bulina cu "inset", ancorata pe BOTTOM:
       inset: auto auto calc(100% - 12px) calc(100% - 12px)
   adica o impinge deasupra pictogramei. O regula pe "top" nu are niciun efect,
   fiindca "top" ramane auto si "bottom" castiga.

   Aici o ancoram in coltul din dreapta-sus al pictogramei, inauntru. Suprapunerea
   peste colt ramane - asta si era intentia - dar nimic nu mai iese din bara. */
.mud-appbar .mud-badge.mud-badge-top.right,
.mud-appbar .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: 5px 2px auto auto;
}

/* ---------------------------------------------------------------------------
   File
   Majusculele fortate sunt greu de citit si nu se potrivesc cu restul interfetei,
   unde butoanele sunt propozitii, nu etichete.
   --------------------------------------------------------------------------- */
.mud-tab {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
}

/* MudBlazor da fiecarei file o latime minima generoasa. Pe 390px, trei file nu mai
   incap, apar sagetile de derulare si a treia optiune ramane ascunsa - iar o fila
   pe care nu o vezi nu exista. Aici filele isi impart latimea disponibila. */
@media (max-width: 599.98px) {
    .mud-tab {
        min-width: 0;
        flex: 1 1 0;
        padding-left: 8px;
        padding-right: 8px;
        font-size: .875rem;
    }

    /* MudBlazor invaluie fiecare fila intr-un recipient de indiciu; daca acela nu se
       intinde, flex-ul de mai sus nu are pe ce sa se aplice. */
    .mud-tabs-tabbar-wrapper > .mud-tooltip-inline {
        flex: 1 1 0;
        min-width: 0;
    }
}

/* ---------------------------------------------------------------------------
   Panoul de filtre
   Pliat pe telefon, mereu deschis de la 600px in sus. Deschiderea se face cu o
   clasa, nu cu JavaScript: merge si pe paginile randate static.
   --------------------------------------------------------------------------- */
.app-filter-body--collapsed {
    display: none;
}

@media (min-width: 600px) {
    .app-filter-body--collapsed {
        display: block;
    }
}

/* ---------------------------------------------------------------------------
   Carduri - ridicare discreta la trecerea cursorului, doar unde se poate apasa
   --------------------------------------------------------------------------- */
.app-card-hover {
    transition: transform .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {
    .app-card-hover:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
    }
}

/* ---------------------------------------------------------------------------
   Continut care nu incape: derulare in propriul recipient, niciodata pe pagina
   --------------------------------------------------------------------------- */
.app-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Butoanele dintr-un rand care se deruleaza nu au voie sa se stranga: altfel
   "Import CSV" se rupe pe doua randuri ca sa incapa, in loc sa iasa din cadru
   si sa fie adus prin derulare. */
.app-scroll-x .mud-button-root {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   Inputuri pentru formularele STATICE (SSR) de autentificare.
   Acestea nu pot folosi MudTextField, pentru ca in mod static componentele
   MudBlazor nu emit un <input name="..."> care sa fie inclus in POST.
   Stilul reproduce aspectul MudBlazor Outlined.
   --------------------------------------------------------------------------- */
.app-input {
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 8px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.app-input:focus {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
}

/* Tinte tactile de minimum 52px, ca in portalul Laravel (.touch-button). */
.app-input-touch {
    min-height: 52px;
}

/* Campul PIN cu ochiul in dreapta (pagina statica de intrare a membrilor). Ochiul e o tinta de 44px. */
.app-pin-field {
    position: relative;
}

.app-pin-field .app-input {
    padding-right: 52px;
}

.app-pin-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.app-pin-toggle:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
}

.app-pin-toggle .app-pin-toggle__hide,
.app-pin-toggle.is-visible .app-pin-toggle__show {
    display: none;
}

.app-pin-toggle.is-visible .app-pin-toggle__hide {
    display: inline-block;
}

/* Previne zoom-ul automat pe iOS la focalizarea unui input. */
@supports (-webkit-touch-callout: none) {
    .app-input { font-size: 16px; }
}

.app-label {
    display: block;
    margin-bottom: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.app-hint {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: var(--mud-palette-text-secondary);
}

/* ---------------------------------------------------------------------------
   Validare
   --------------------------------------------------------------------------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--mud-palette-success);
}

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

.validation-message {
    display: block;
    margin-top: 4px;
    font-size: .75rem;
    color: var(--mud-palette-error);
}

/* ---------------------------------------------------------------------------
   Bariera de eroare Blazor
   --------------------------------------------------------------------------- */
.blazor-error-boundary {
    padding: 1rem 1.25rem;
    background: var(--mud-palette-error);
    color: #fff;
    border-radius: var(--app-radius);
}

.blazor-error-boundary::after {
    content: "A aparut o eroare.";
}

/* ---------------------------------------------------------------------------
   Termenii si conditiile: textul vine ca HTML din resursele incorporate,
   deci stilizarea se face aici, nu prin clase in continut (cum era in Laravel).
   --------------------------------------------------------------------------- */
/* Caseta cu termenii si conditiile. In tema intunecata fundalul "gri" al paginii e aproape negru, la fel ca
   cardul si ca fundalul ecranului de intrare: caseta, marginile si textul se topeau una in alta. Aici caseta
   e MAI DESCHISA decat cardul, cu chenar, iar textul are culoarea de baza a temei. */
/* Textul de acte (termeni), citit o singura data, se vede la fel de bine indiferent de tema
   telefonului - o pagina tiparita, nu o suprafata care se schimba cu tema aplicatiei. Fondul
   intunecat din spatele ecranului de intrare facea textul aproape ilizibil in tema inchisa. */
.app-terms-box {
    max-height: 45vh;
    overflow-y: auto;
    border: 1px solid #D8D3C8;
    background: #FBFAF7;
    color: #1B2A41;
}

.terms-content {
    color: #1B2A41;
}

/* Pe fundal aproape negru, cardul ecranului de intrare are nevoie de un chenar ca sa se vada. */
[data-theme="dark"] .app-auth__card {
    border: 1px solid color-mix(in srgb, #FFFFFF 14%, transparent);
}

.terms-content h2 {
    font-family: "Source Serif 4", Georgia, Cambria, serif;
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 1.5rem 0 .5rem;
}

.terms-content h2:first-child {
    margin-top: 0;
}

.terms-content p {
    margin-bottom: .75rem;
    line-height: 1.65;
}

.terms-content ul {
    margin: 0 0 .75rem 1.25rem;
    padding-left: .75rem;
    list-style: disc;
}

.terms-content li {
    margin-bottom: .35rem;
    line-height: 1.55;
}

/* ---------------------------------------------------------------------------
   Tipar de pagina
   Ritmul vertical intre sectiuni, ca sa nu fie scris de mana pe fiecare pagina.
   Raza mai mare decat butoanele/inputurile - o sectiune e o suprafata mare, nu un
   control - si un contur, nu o umbra: umbra pe zeci de carduri la rand ar
   ingreuna pagina fara sa adauge nimic ochiului.

   .app-card e acelasi tipar, fara spatierea automata intre "frati" - pentru cardurile
   dintr-o grila (un eveniment, un anunt), unde spatiul il da deja grila, nu marginea.
   --------------------------------------------------------------------------- */
/* Doua carduri care sunt bucati ale aceluiasi chenar (de exemplu o urgenta si raspunsurile ei): lipite, fara spatiu si
   fara colturi rotunjite la mijloc. Linia dintre ele o da bordura de sus a celei de jos. */
.app-card.app-card--stack-top {
    margin-bottom: 0 !important;
    border-bottom: 0;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.app-card.app-card--stack-bottom {
    margin-top: 0 !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.app-card,
.app-section {
    border-radius: var(--app-radius-lg) !important;
    border: 1px solid var(--mud-palette-divider);

    /* Listele si tabelele care ating marginea cardului trebuie sa se opreasca la colt
       rotunjit, nu sa il acopere cu un dreptunghi drept la evidentierea unui rand.
       MudBlazor randeaza meniuri si tooltip-uri in alta parte a paginii (MudPopoverProvider),
       deci taierea de aici nu le atinge. */
    overflow: hidden;
}

.app-section + .app-section {
    margin-top: 24px;
}

@media (max-width: 599.98px) {
    .app-section + .app-section {
        margin-top: 16px;
    }
}

/* Numarul dintr-un card de statistica: cifre de latime egala, ca sa nu joace
   cand valoarea se schimba. */
.app-stat-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
}

/* ---------------------------------------------------------------------------
   Tabloul de bord al membrului - bannerul de identitate
   Acelasi gradient institutional de la autentificare, ca omul sa recunoasca
   identitatea vizuala. Este singurul loc din portal, in afara de autentificare,
   unde gradientul apare - restul paginii ramane pe suprafete plate.
   --------------------------------------------------------------------------- */
.app-dashboard-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--app-radius-lg) !important;
    background: var(--app-gradient-hero);
    color: #FFFFFF;
}

.app-dashboard-hero::before {
    content: "";
    position: absolute;
    top: -90px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .07);
    pointer-events: none;
}

.app-dashboard-hero__avatar.mud-avatar {
    background: rgba(255, 255, 255, .16) !important;
    color: #FFFFFF !important;
}

/* Poza unei persoane: cerc cu initiale, iar poza, cand se incarca, vine peste ele. */
.app-avatar {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--mud-palette-gray-light);
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    line-height: 1;
}

.app-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Poza mare din fisa unui coleg: patrat cu colturi rotunjite, nu cerc - pe o poza de fata se vede mai mult. */
.app-avatar--card {
    border-radius: 28px;
}

.app-avatar--hero {
    background: rgba(255, 255, 255, .16);
    color: #FFFFFF;
}

.app-dashboard-hero__eyebrow {
    display: block;
    color: rgba(255, 255, 255, .74);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.app-dashboard-hero__name.mud-typography {
    color: #FFFFFF;
}

.app-dashboard-hero__grade.mud-typography {
    color: rgba(255, 255, 255, .82);
}

.app-dashboard-hero__action.mud-button-root {
    position: relative;
    background: rgba(255, 255, 255, .14) !important;
    color: #FFFFFF !important;
    box-shadow: none !important;
}

@media (hover: hover) {
    .app-dashboard-hero__action.mud-button-root:hover {
        background: rgba(255, 255, 255, .22) !important;
    }
}

/* Cardul cu codul QR: rama alba fixa, indiferent de tema - un cod scanat pe fundal
   intunecat pierde contrast, iar telefonul care il citeste nu stie ce e "modul intunecat". */
.app-dashboard-qr {
    border-radius: var(--app-radius-lg) !important;
}

.app-dashboard-qr__frame {
    padding: var(--app-space-3);
    background: #FFFFFF;
    border-radius: var(--app-radius-md);
    border: 1px solid var(--mud-palette-lines-default);
}

/* Randul unui grup pe pagina de start: numele si un semn de necitite, nimic mai mult -
   discutia in sine se citeste dupa ce apesi. */
.app-dashboard-group {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--app-radius-md);
    color: inherit;
    text-decoration: none;
    background: var(--mud-palette-background-gray);
    transition: background-color 120ms ease-out;
}

.app-dashboard-group:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.app-dashboard-group__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* Lista de grupuri de pe pagina de start: trei randuri si jumatate, apoi derulare. Randul are inaltime
   fixa (cu sau fara bulina), ca taietura sa cada mereu la jumatatea celui de-al patrulea - semnul ca mai
   sunt grupuri. 48px x 3.5 + 3 spatii de 8px = 192px. */
.app-dashboard-groups {
    max-height: 192px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-text-disabled) transparent;
}

.app-dashboard-groups .app-dashboard-group {
    /* Fara asta, intr-o coloana flex cu inaltime limitata randurile s-ar strange sa incapa toate. */
    flex-shrink: 0;
    height: 48px;
    box-sizing: border-box;
}

.app-dashboard-groups .app-dashboard-group .mud-chip {
    margin: 0;
}

/* Bara se vede tot timpul pe Android (WebView-ul e Chromium). Pe iPhone sistemul o arata doar in timpul
   derularii; acolo semnul ramane randul taiat. */
.app-dashboard-groups::-webkit-scrollbar {
    width: 4px;
}

.app-dashboard-groups::-webkit-scrollbar-thumb {
    background: var(--mud-palette-text-disabled);
    border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   Ecranul gol - un disc usor colorat, nu un gri neutru, ca ecranul fara date sa
   nu para o eroare de randare. Foloseste aceeasi culoare ca actiunile, discret.
   --------------------------------------------------------------------------- */
.app-empty-state__icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    color: var(--mud-palette-primary);
}

/* ---------------------------------------------------------------------------
   Orient MLMSR: structurile de conducere
   Forma vine din aplicatia veche si merita pastrata. O structura nu e o lista,
   e un tablou: fotografiile stau una langa alta, cartonase mici, centrate, si se
   vede dintr-o privire cine e in ea. Cartonase late, pe patru coloane, ar fi
   rupt tabloul si ar fi cerut derulare pentru zece oameni.
   --------------------------------------------------------------------------- */
.app-orient-group {
    border-radius: var(--app-radius-lg);
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-divider);
}

/* Bara cu numele structurii. Inchisa la culoare, ca in aplicatia veche: separa
   limpede un organism de urmatorul cand pagina are cinci la rand. */
.app-orient-group__header {
    background: var(--mud-palette-dark);
    color: var(--mud-palette-dark-text);
    padding: 14px 24px;
    text-align: center;
}

.app-orient-group__people {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    padding: 20px 16px;
}

.app-orient-card {
    width: 150px;
    padding: 16px 10px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--app-radius-md);
    text-align: center;
    transition: transform var(--app-motion-fast) var(--app-ease),
                box-shadow var(--app-motion-fast) var(--app-ease);
}

@media (hover: hover) {
    .app-orient-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--app-shadow-sm);
    }
}

/* Doua pe rand pe telefon: la 150px fix ar fi ramas o coloana si jumatate de gol. */
@media (max-width: 420px) {
    .app-orient-card { width: calc(50% - 8px); }
}

/* Poza e un PersonAvatar (cerc, initiale dedesubt, 88 de puncte din parametrul Size): aici doar rama si spatiul. */
.app-orient-card__photo {
    margin-bottom: 12px;
    border: 2px solid var(--mud-palette-lines-default);
}

/* Semnul care apare cand se trage de ecran in jos. Sta ascuns deasupra listei si coboara
   odata cu degetul; fara "is-open" nu ocupa loc si nu se vede. */
.app-pull-sign {
    position: absolute;
    top: -2.5rem;
    left: 0;
    right: 0;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    opacity: 0;
    transition: opacity 120ms ease-out;
}

.app-pull-sign.is-open {
    opacity: 1;
}

.app-pull {
    position: relative;
}

/* Notificarile din clopotel. Cele de urgenta: dunga rosie si fond slab rosu, ca sa se distinga
   de restul chiar si citite pe fuga. Dupa citire raman rosii, doar mai stinse. */
.app-notif--urgent {
    border-left: 3px solid var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 9%, transparent);
}

.app-notif--urgent .mud-typography-body2 {
    color: var(--mud-palette-error);
}

.app-notif--urgent.app-notif--read {
    background: color-mix(in srgb, var(--mud-palette-error) 4%, transparent);
    border-left-color: color-mix(in srgb, var(--mud-palette-error) 45%, transparent);
}

.app-notif--urgent.app-notif--read .mud-typography-body2 {
    color: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary));
}

.app-pull.is-releasing {
    transition: transform var(--app-motion-base) var(--app-ease);
}

/* Cardurile de urgente: aceeasi inaltime unele langa altele, descrierea taiata la trei
   randuri ca o descriere lunga sa nu faca un card de doua ori mai inalt decat vecinul. */
.emergency-card {
    cursor: pointer;
    transition: background-color 120ms ease-out;

    /* Toata latimea coloanei. Clasa "w-100" din markup e din Bootstrap si aici nu exista: fara asta, fiecare
       card era cat textul din el - unul cu un cuvant iesea mai ingust si de alta forma decat vecinii. */
    width: 100%;
    min-width: 0;
}

/* La fel, "text-truncate" e din Bootstrap. Numele si randul data-loja raman pe un singur rand, taiate cu "...":
   o loja cu nume lung nu mai face cardul mai inalt decat restul. */
.emergency-card .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emergency-card:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.emergency-card--muted {
    opacity: 0.65;
}

/* Cu ".emergency-card" in fata: altfel "display" de mai jos pierdea in fata celui pus de MudBlazor pe orice text
   (.mud-typography), iar taierea la trei randuri nu se aplica deloc - un text lung umfla cardul. */
.emergency-card .emergency-card__description {
    white-space: pre-wrap;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* Exact trei randuri, pentru orice text: unul scurt nu mai face cardul mai scund, unul lung se
       termina cu "..." (tot textul e in urgenta, la deschidere). Un cuvant fara spatii (o adresa) se
       rupe, in loc sa iasa din card. */
    height: calc(1.43em * 3);
    overflow-wrap: anywhere;
}

/* Cardurile de grupuri, in lista de relax: cele in care esti membru se pot trage si lasa,
   cu un cursor care spune asta din prima. */
.app-relax-card {
    position: relative;
    height: 100%;
}

/* Cardul unui grup din care faci parte se deschide dintr-o atingere, oriunde pe el: titlul e o legatura adevarata, iar
   ::after o intinde peste tot cardul. Meniul cu trei puncte sta deasupra ei (z-index), ca sa se poata apasa separat. */
.app-relax-card--member {
    transition: border-color .15s ease, background-color .15s ease;
    -webkit-tap-highlight-color: transparent;
}

.app-relax-card--member:active {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-surface));
}

@media (hover: hover) {
    .app-relax-card--member:hover {
        border-color: var(--mud-palette-primary);
    }
}

.app-relax-card__link {
    color: inherit;
    text-decoration: none;
}

.app-relax-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.app-relax-card__link:focus-visible {
    outline: none;
}

.app-relax-card--member:has(.app-relax-card__link:focus-visible) {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.app-relax-card__menu {
    position: relative;
    z-index: 2;
    margin: -4px -6px 0 0;
}

.app-relax-card--draggable {
    cursor: grab;
}

.app-relax-card--draggable:active {
    cursor: grabbing;
}

/* Cardul tras: se vede clar ca "e ridicat", nu doar ca a disparut din locul lui - fara
   asta, tras-si-lasat se simte ca un salt brusc intre doua liste, nu ca o mutare. */
.app-relax-card--dragging {
    opacity: 0.4;
    transform: scale(0.98);
    transition: opacity var(--app-motion-fast) var(--app-ease), transform var(--app-motion-fast) var(--app-ease);
}

/* Locul unde s-ar lasa, cat timp alt card e tras deasupra lui. */
.app-relax-card--drop-target {
    border-color: var(--mud-palette-primary) !important;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface));
    transition: border-color var(--app-motion-fast) var(--app-ease), background-color var(--app-motion-fast) var(--app-ease);
}

/* Grupurile in care nu esti membru stau ultimele in lista si se vad mai sterse - nu sunt
   ale tale, doar o usa deschisa daca vrei sa intri. */
.app-relax-card--outsider {
    opacity: 0.65;
}

/* ---------------------------------------------------------------------------
   Bula de mesaj - forma de discutie, nu de card: rotunjita peste tot, cu un
   colt mai ascutit spre persoana care a scris-o, ca la orice aplicatie de chat.
   --------------------------------------------------------------------------- */
.app-chat-bubble {
    border-radius: var(--app-radius-lg) !important;
}

.app-chat-bubble--mine {
    border-bottom-right-radius: 4px !important;
}

.app-chat-bubble--theirs {
    border-bottom-left-radius: 4px !important;
}

/* ---------------------------------------------------------------------------
   Dialogurile MudBlazor - o singura regula, valabila peste tot unde se deschide
   un dialog: confirmari, raspunsuri la invitatii, formulare scurte. O raza mai
   mare decat butoanele din interiorul lor, ca o fereastra sa se simta o
   suprafata, nu un control mare.
   --------------------------------------------------------------------------- */
.mud-dialog {
    border-radius: var(--app-radius-lg) !important;
}

/* Inaltimea: MudBlazor lasa ecranul minus 64 de puncte, centrat - 32 sus. Pe iPhone bara cu ora si camera are
   aproape 60, deci o fereastra lunga (membrii unui grup, cine a citit un mesaj, cine vine la un eveniment) intra
   sub ea si i se taie capul. Fereastra sta acum intre marginile sigure, cu loc de respirat si deasupra, si
   dedesubt. Pe Android marginile sigure sunt 0 aici (le pune aplicatia, vezi html[data-platform]). */
.mud-dialog-container {
    box-sizing: border-box;
    padding-top: var(--app-safe-top);
    padding-bottom: var(--app-safe-bottom);
}

.mud-dialog:not(.mud-dialog-fullscreen) {
    max-height: calc(100vh - var(--app-safe-top) - var(--app-safe-bottom) - 48px) !important;
    max-height: calc(100dvh - var(--app-safe-top) - var(--app-safe-bottom) - 48px) !important;
}

@media (max-width: 599.98px) {
    /* Pe telefon, colturile foarte rotunjite langa marginea ecranului par taiate. */
    .mud-dialog {
        border-radius: var(--app-radius-md) !important;
    }
}

/* ---------------------------------------------------------------------------
   Text doar pentru cititoarele de ecran: ascuns pe ecran, citit cu voce tare. MudBlazor nu
   are o clasa pentru asta, iar "mud-visually-hidden" pe care o folosea SkeletonList nu
   exista - textul se vedea deasupra scheletului.
   --------------------------------------------------------------------------- */
.app-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------------------------------------------------------------------------
   Comutatorul AppSwitch: linia si bulina sunt un singur element, deci bulina ramane pe centru.
   --------------------------------------------------------------------------- */
.app-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.app-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 28px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--mud-palette-text-secondary) 40%, transparent);
    transition: background-color var(--app-motion-fast) var(--app-ease);
}

.app-switch__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform var(--app-motion-fast) var(--app-ease),
                background-color var(--app-motion-fast) var(--app-ease);
}

.app-switch--on .app-switch__track {
    background: var(--mud-palette-primary);
}

.app-switch--on .app-switch__thumb {
    transform: translateX(20px);
    background: var(--mud-palette-primary-text);
}

.app-switch--danger.app-switch--on .app-switch__track {
    background: var(--mud-palette-error);
}

.app-switch--danger.app-switch--on .app-switch__thumb {
    background: #FFFFFF;
}

.app-switch__label {
    min-width: 0;
    font-size: .9375rem;
    line-height: 1.35;
}

.app-switch:focus-visible .app-switch__track {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 3px;
}

.app-switch:disabled {
    opacity: .5;
    cursor: default;
}

@media (forced-colors: active) {
    .app-switch__track { border: 1px solid CanvasText; }
    .app-switch--on .app-switch__track { background: Highlight; }
}

/* ---------------------------------------------------------------------------
   Numele de coleg pe care se poate apasa (PersonLink) si fisa lui (PersonPreviewDialog).
   Butonul nu are aspect de buton: se citeste ca text, cu o subliniere punctata care spune
   ca se poate apasa. Pe deasupra, zona de atins ramane cel putin cat randul.
   --------------------------------------------------------------------------- */
.app-person-link {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 3px;
    -webkit-tap-highlight-color: transparent;
}

/* Poza unui coleg pe care se poate apasa (Orient MLMSR, Loji): fara sublinierea numelui, cat poza. */
.app-person-link.app-person-link--photo {
    display: inline-flex;
    flex-shrink: 0;
    border-radius: 50%;
    line-height: 0;
    text-decoration: none;
}

.app-person-link:hover,
.app-person-link:focus-visible {
    color: var(--mud-palette-primary);
    text-decoration-style: solid;
    text-decoration-color: currentColor;
}

/* "@Nume" intr-un mesaj de grup (LinkifiedText): colorat, ca la WhatsApp, fara subliniere. */
.app-person-link.app-mention {
    color: var(--mud-palette-primary);
    font-weight: 600;
    text-decoration: none;
}

.app-msg__bubble--mine .app-person-link.app-mention,
.app-comment__bubble--mine .app-person-link.app-mention,
.app-chat-bubble--mine .app-person-link.app-mention {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Lista cu cei din grup care apare cand scrii "@" (MemberRelaxChat). */
.app-mention-picker {
    display: flex;
    flex-direction: column;
    max-height: 220px;
    overflow-y: auto;
    margin-bottom: 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
}

.app-mention-picker__item {
    display: flex;
    flex-shrink: 0;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 8px 12px;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.app-mention-picker__item:hover,
.app-mention-picker__item:focus-visible {
    background: var(--mud-palette-action-default-hover);
}

.app-person-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.app-person-card__facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    color: var(--mud-palette-text-secondary);
    font-size: .875rem;
}

.app-person-card__fact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* ---------------------------------------------------------------------------
   Previzualizarea unei poze sau a unui PDF (FilePreviewDialog).
   --------------------------------------------------------------------------- */
.app-preview {
    max-height: 68vh;
    overflow: auto;
    border-radius: var(--app-radius);
    background: var(--mud-palette-background-gray);
    -webkit-overflow-scrolling: touch;
}

.app-preview--image {
    display: flex;
    justify-content: center;
}

/* Poza din previzualizare e MICA (varianta de 640 de puncte): un patrat de cel mult 360 x 50vh, nu toata fereastra.
   Pentru poza completa exista butonul "Descarca". */
.app-preview--image {
    padding: 8px;
}

.app-preview--image img {
    display: block;
    max-width: min(100%, 360px);
    max-height: 50vh;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
}

/* Locul unei poze cat timp se aduce (CachedImage): nu lasa pagina sa sara cand apare poza. */
.app-cached-placeholder {
    display: block;
    min-width: 96px;
    min-height: 96px;
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 8%, transparent);
}

/* Paginile PDF-ului: pe latimea ferestrei, una sub alta, pe alb ca hartia si in tema neagra. */
.app-pdf-pages canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
    margin: 0 auto 8px;
    background: #FFFFFF;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}

/* Miniatura unei poze dintr-un anunt: un buton, ca sa se poata apasa si cu tastatura. */
.app-thumb {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------------------------
   Firul unui grup (MemberRelaxChat): mesaje, citate, zile, linia "Mesaje necitite", bara de raspuns.

   Randurile sunt flex: [poza][bula][optiuni] la ai altora, [optiuni][bula] la ale mele. Poza si numele
   apar doar la primul mesaj dintr-un sir al aceluiasi om, iar coloana pozei ramane goala la restul,
   ca bulele sa stea aliniate.
   --------------------------------------------------------------------------- */
.app-chat {
    display: flex;
    flex-direction: column;
}

/* Locul butonului "Mesaje mai vechi" / al indicatorului de incarcare: nu isi schimba inaltimea. */
.app-chat-more {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.app-chat-day,
.app-chat-unread {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px 0 8px;
    /* Cand pagina deruleaza aici, sa ramana sub bara de sus, nu ascuns dupa ea. */
    scroll-margin-top: 72px;
}

.app-chat-day span {
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    font-weight: 600;
}

.app-chat-unread {
    gap: 10px;
    color: var(--mud-palette-primary);
    font-size: .75rem;
    font-weight: 700;
}

.app-chat-unread::before,
.app-chat-unread::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .4;
}

/* Cand chatul deruleaza la capat (scrollIntoView pe #chat-end), ultimul mesaj sa ramana deasupra barii de jos, nu sub ea. */
#chat-end {
    scroll-margin-bottom: calc(var(--app-mobile-nav-height) + var(--app-safe-bottom) + 12px);
}

/* Mesajul de sistem ("X a parasit grupul"): la fel de sters ca despartitorul de zi, nu o
   bula de discutie - nu are autor de apasat ca sa raspunzi, doar numele de vazut. */
.app-chat-system {
    display: flex;
    justify-content: center;
    margin: 8px 0;
    scroll-margin-top: 72px;
}

.app-chat-system span {
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

.app-chat-system .app-person-link {
    font-weight: 600;
}

.app-msg {
    position: relative;
    display: flex;
    gap: 8px;
    margin-bottom: 3px;
    scroll-margin-top: 72px;
}

.app-msg--first {
    margin-top: 10px;
}

.app-msg--mine {
    justify-content: flex-end;
}

.app-msg__avatar {
    flex: 0 0 34px;
    width: 34px;
}

.app-msg__body {
    max-width: 78%;
    min-width: 0;
}

.app-msg .app-msg__bubble {
    padding: 7px 12px 5px;
    overflow-wrap: anywhere;
    cursor: pointer;
}

.app-msg .app-msg__bubble--mine {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.app-msg .app-msg__bubble--theirs {
    background: var(--mud-palette-background-gray);
}

/* Cine participa la un eveniment: lista se deruleaza in fereastra, nu impinge butoanele afara din ecran. */
.app-participants {
    max-height: 50vh;
    overflow-y: auto;
}

/* Profilul meu: un singur chenar, cu creionul de editare in coltul de sus. */
.app-profile-card {
    position: relative;
}

.app-profile-card__edit {
    position: absolute !important;
    top: 8px;
    right: 8px;
}

/* Raspunsurile la o urgenta: fiecare in bula lui, cu poza alaturi. Al tau, usor colorat, ca sa se gaseasca dintr-o privire. */
.app-comment {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.app-comment__bubble {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 6px 10px 12px;
    border-radius: 4px 14px 14px 14px;
    background: var(--mud-palette-background-gray);
    overflow-wrap: anywhere;
}

.app-comment__bubble--mine {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, var(--mud-palette-surface));
}

.app-comment__menu {
    flex: 0 0 auto;
    margin-top: -4px;
}

.app-msg__author {
    margin-bottom: 2px;
    color: var(--mud-palette-primary);
    font-size: .75rem;
    font-weight: 700;
}

/* Mesajul la care se raspunde, citat in bula. */
.app-msg__quote {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    padding: 5px 10px;
    border: 0;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.app-msg__bubble--mine .app-msg__quote {
    border-left-color: rgba(255, 255, 255, .8);
}

.app-msg__quote-name {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    opacity: .9;
}

.app-msg__quote-text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .8125rem;
    opacity: .85;
}

.app-msg__image {
    margin-top: 6px;
}

.app-msg__image img {
    display: block;
    max-width: 100%;
    max-height: 320px;
    border-radius: 8px;
}

/* Placuta unui clip, in aplicatia de telefon (VideoTile): clipul se aduce la apasare si se reda de pe telefon.
   Inchisa la culoare in ambele teme, ca fereastra unui clip. */
.app-clip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    margin: 6px 0 0;
    padding: 12px 14px;
    border: 0;
    border-radius: 8px;
    background: #16181d;
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.app-clip:disabled {
    cursor: default;
    opacity: .85;
}

.app-clip__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
}

.app-clip__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.app-clip__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .875rem;
}

.app-clip__hint {
    font-size: .75rem;
    opacity: .75;
}

/* Clipul cu un cadru din el: poza la latimea bulei, butonul de redare la mijloc, marimea jos, ca pe WhatsApp. */
.app-clip--poster {
    position: relative;
    display: block;
    width: 260px;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
}

.app-clip--poster .app-clip__poster,
.app-clip--poster .app-cached-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-clip__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
}

.app-clip__badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: .6875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Info" la un mesaj: titlul fiecarei liste (Citit de / Necitit inca). */
.app-readers__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* Un fisier pe care serverul l-a sters dupa termenul de pastrare (FileGoneNote). */
.app-file-gone {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: .75rem;
    opacity: .7;
    overflow-wrap: anywhere;
}

.app-msg__meta {
    margin-top: 2px;
    text-align: right;
    font-size: .6875rem;
    opacity: .7;
}

/* Reactiile unui mesaj: pastile mici sub bula, nu in ea - se vad fara sa impinga textul. */
.app-msg__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.app-msg--mine .app-msg__reactions {
    justify-content: flex-end;
}

.app-reaction-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 8px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-surface);
    font-size: .75rem;
    line-height: 1.6;
    cursor: pointer;
}

.app-reaction-pill--mine {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
}

/* Alegerea unui emoji, in fereastra "Reactioneaza": cateva pictograme mari, usor de nimerit cu degetul. */
.app-reaction-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.app-reaction-picker__item {
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    font-size: 1.75rem;
    line-height: 1;
    padding: 10px;
    cursor: pointer;
    transition: transform var(--app-motion-fast) var(--app-ease), background-color var(--app-motion-fast) var(--app-ease);
}

.app-reaction-picker__item:active {
    transform: scale(1.15);
}

.app-reaction-picker__item--mine {
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
    border-color: var(--mud-palette-primary);
}

/* Antetul unui grup (numele si numarul de membri) ramane la vedere sub bara de sus, oricat ai derula in fir.
   Fondul e cel al paginii (nu transparent), altfel mesajele care trec pe sub el s-ar vedea prin el. */
.app-group-header {
    position: sticky;
    top: calc(var(--app-bar-height) + var(--app-safe-top));
    z-index: 5;
    /* Iese peste marginile paginii cat sunt ele de late, nu mai mult: pe telefon pagina are 12px (px-3 in
       MemberLayout), pe ecrane mari 16px. Cu 16px peste tot, antetul era cu 8px mai lat decat ecranul pe telefon,
       iar discutia se putea trage in stanga si in dreapta. */
    margin: 0 calc(var(--app-space-3) * -1) var(--app-space-3);
    padding: var(--app-space-2) var(--app-space-3);
    background: var(--app-body-background, var(--mud-palette-background));
}

@media (min-width: 600px) {
    .app-group-header {
        margin-left: calc(var(--app-space-4) * -1);
        margin-right: calc(var(--app-space-4) * -1);
        padding-left: var(--app-space-4);
        padding-right: var(--app-space-4);
    }
}

.app-group-header__back {
    margin-bottom: 4px;
}

/* Poza grupului: in capul discutiei, in lista de grupuri si pe prima pagina. */
.app-group-photo {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.app-group-photo--list {
    width: 44px;
    height: 44px;
}

.app-group-photo--small {
    width: 28px;
    height: 28px;
}

/* Grupul fara poza: un cerc cu semnul grupului, cat poza, ca randurile din lista sa stea aliniate. */
.app-group-avatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

/* ---- Membrii unui grup ---- */

/* Numarul de membri din antetul grupului: se apasa si arata cine sunt. */
.app-members-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: .8125rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.app-members-link:hover,
.app-members-link:focus-visible {
    color: var(--mud-palette-primary);
}

.app-members {
    display: flex;
    flex-direction: column;
}

.app-members__row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.app-members__row:last-child {
    border-bottom: 0;
}

.app-members__who {
    flex: 1;
    min-width: 0;
}

.app-members__me {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .6875rem;
    font-weight: 600;
}

.app-members__lodge {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
}

/* ---- Sondaj, in bula unui mesaj din grup ---- */

/* Intrebarea, mai apasat decat un mesaj obisnuit. */
.app-poll__question.mud-typography {
    font-weight: 700;
}

.app-poll {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 280px;
    max-width: 100%;
    margin-top: 6px;
}

/* Bula cu sondaj primeste mai mult loc decat un mesaj obisnuit: optiunile sunt scurte, dar trebuie sa incapa. */
.app-msg__body:has(.app-poll) {
    max-width: 92%;
}

.app-poll--busy {
    opacity: .7;
}

.app-poll__hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .75rem;
    opacity: .8;
}

/* O optiune: un rand pe care se apasa. Culorile vin din culoarea textului bulei (currentColor), ca sa se vada la fel
   in bula mea (fond colorat) si in a celorlalti (fond gri), pe tema deschisa si pe cea inchisa. */
.app-poll__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 8px 10px;
    overflow: hidden;
    border: 1.5px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 10px;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.app-poll__option--locked {
    cursor: default;
}

.app-poll__option--picked {
    border-color: currentColor;
}

/* Bara de fundal: cati dintre cei care au votat au ales optiunea. */
.app-poll__bar {
    position: absolute;
    inset: 0 auto 0 0;
    background: color-mix(in srgb, currentColor 18%, transparent);
    transition: width .25s ease;
}

.app-poll__mark,
.app-poll__text,
.app-poll__count {
    position: relative;
}

.app-poll__mark {
    flex: 0 0 18px;
    height: 18px;
    border: 2px solid currentColor;
    box-sizing: border-box;
    opacity: .75;
}

.app-poll__mark--dot {
    border-radius: 50%;
}

.app-poll__mark--box {
    border-radius: 5px;
}

.app-poll__option--picked .app-poll__mark {
    opacity: 1;
}

/* Alegerea ta: un punct plin (un singur raspuns) sau o bifa (raspuns multiplu). */
.app-poll__option--picked .app-poll__mark--dot::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: currentColor;
}

.app-poll__option--picked .app-poll__mark--box::after {
    content: "";
    position: absolute;
    left: 3px;
    top: -1px;
    width: 5px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.app-poll__text {
    flex: 1;
    min-width: 0;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.app-poll__option--picked .app-poll__text {
    font-weight: 700;
}

.app-poll__count {
    font-size: .8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.app-poll__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 8px;
}

.app-poll__summary {
    font-size: .75rem;
    opacity: .8;
}

.app-poll__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
}

.app-poll .app-poll__action.mud-button-root {
    min-width: 0;
    padding: 2px 6px;
    font-size: .75rem;
    text-transform: none;
}

/* Fereastra "Cine a votat": pe fiecare optiune, oamenii care au ales-o. */
.app-poll-voters {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.app-poll-voters__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: .9rem;
    font-weight: 700;
}

.app-poll-voters__count {
    color: var(--mud-palette-text-secondary);
    font-variant-numeric: tabular-nums;
}

.app-poll-voters__person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.app-poll-voters__person .app-person-link {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-poll-voters__time {
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    white-space: nowrap;
}

/* Butonul de optiuni: doar pe calculator, la trecerea mausului. Pe telefon exista apasarea lunga. */
.app-msg__more {
    display: none;
    align-self: center;
    padding: 2px;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.app-msg--mine .app-msg__more {
    order: -1;
}

@media (hover: hover) and (pointer: fine) {
    .app-msg:hover .app-msg__more,
    .app-msg__more:focus-visible {
        display: inline-flex;
    }
}

/* Mesajul la care s-a sarit din citat: un contur care se stinge. */
.app-msg--flash .app-msg__bubble {
    animation: app-msg-flash 1.4s ease-out;
}

@keyframes app-msg-flash {
    0%, 55% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 55%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* "N mesaje noi", cand omul citeste mai sus si sosesc altele. Deasupra barii de jos de pe telefon. */
.app-chat-new {
    position: fixed;
    left: 50%;
    bottom: calc(var(--app-mobile-nav-height) + var(--app-safe-bottom) + 14px);
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transform: translateX(-50%);
}

@media (min-width: 960px) {
    .app-chat-new { bottom: 24px; }
}

/* La ce raspunzi / ce editezi, deasupra campului de scris. */
.app-reply-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding: 6px 4px 6px 10px;
    border-left: 3px solid var(--mud-palette-primary);
    border-radius: 8px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.app-reply-bar--edit {
    border-left-color: var(--mud-palette-warning);
}

.app-reply-bar__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.app-reply-bar__name {
    color: var(--mud-palette-text-primary);
    font-size: .75rem;
    font-weight: 700;
}

.app-reply-bar__preview {
    overflow: hidden;
    font-size: .8125rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Meniul unui mesaj (RelaxMessageActionsDialog): actiunile una sub alta, aliniate la stanga. */
.app-msg-action.mud-button-root {
    justify-content: flex-start;
    padding: 12px 8px;
}

.app-msg-actions__preview {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Un nume-legatura care inveleste o poza: fara subliniere. */
.app-person-link--plain {
    display: inline-flex;
    text-decoration: none;
}

/* Adresele web din mesaje, urgente si informatii (LinkifiedText): aceeasi culoare cu textul din jur,
   ca sa se citeasca si pe bula intunecata a mesajelor proprii; subliniate, ca sa se vada ca se apasa.
   Se rup oriunde: o adresa lunga nu are voie sa lateasca bula peste marginea ecranului. */
.app-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    overflow-wrap: anywhere;
}

@media (max-width: 959px) {
    html.app-chat-input-focus .app-mobile-nav { display: none; }
    html.app-chat-input-focus .app-group-header { padding-block: 4px; gap: 4px; }
    html.app-chat-input-focus .app-group-header__back { display: none; }
    html.app-chat-input-focus .app-group-header .mud-typography-h5 { font-size: 1rem; }
    html.app-chat-input-focus .app-group-photo { width: 28px; height: 28px; }
    html.app-chat-input-focus { --app-mobile-nav-height: 0px; }
}