/* ============================================================
   ghidbucurestean.ro — style_admin.css
   DOAR pentru panoul de administrare (administrare.php).
   Frontend-ul folosește css/style.css — separat intenționat, ca
   să nu crească fișierul încărcat de vizitatori.
   ============================================================ */

/* :root — OGLINDA variabilelor din css/style.css.
   Orice schimbare de token se face în AMBELE fișiere. */
:root {
    --verde: #649B1C;
    --verde-inchis: #3E6111;
    --verde-hover: #558617;
    --verde-pal: #EFF6E3;
    --verde-mediu: #C9E39F;
    --fundal: #F4F5F2;
    --alb: #FFFFFF;
    --cerneala: #17181A;
    --gri-text: #67696B;
    --bordura: #DEDEDC;
    --bordura-soft: #ECECEA;
    --rosu: #C9553D;
    --chihlimbar: #B97A16;
    --albastru: #0055A5;
    --visiniu: #7A1F2B;
    --umbra-1: 0 1px 2px rgba(23, 24, 26, 0.05), 0 2px 10px rgba(23, 24, 26, 0.05);
    --umbra-2: 0 2px 4px rgba(23, 24, 26, 0.05), 0 14px 36px rgba(62, 97, 17, 0.12);
    /* Umbra cardului de sticlă din ecranele de autentificare. --umbra-2 are
       al doilea strat verzui și foarte difuz; peste harta de fundal se
       pierde, iar un card translucid fără umbră proprie pare decupat, nu
       așezat deasupra. Aici straturile sunt tentate cu cerneala și mai
       strânse, ca marginea să rămână citită pe un fundal deschis. Ultimul
       strat, inset, e dunga de lumină de pe muchia de sus — reflexia care
       face diferența dintre „card semitransparent" și „sticlă". */
    --umbra-sticla: 0 1px 1px rgba(23, 24, 26, 0.04), 0 14px 34px rgba(23, 24, 26, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --raza-card: 16px;
    --raza-mica: 12px;
    --tranzitie: 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
    /* Un singur token pentru orice "spațiu între blocuri" din panou:
       marginea stângă a conținutului, gap-ul dintre carduri (orizontal
       și vertical) — toate aceeași valoare, ca să fie vizual egale. */
    --spatiu-panou: 24px;
}

/* ---------- Font auto-gazduit ----------
   Figtree, acelasi font ca inainte, dar servit de pe serverul nostru:
   asa nu mai pleaca IP-ul vizitatorului catre fonts.gstatic.com inainte
   sa fi apucat sa aleaga ceva in banda de cookie-uri.
   Un SINGUR fisier variabil (axa wght 300-900) acopera toate greutatile
   folosite in site (400/500/600/700/800) - mai putin de descarcat decat
   cele 5 fisiere statice de dinainte.
   Subsetat la latin + latin-ext, deci diacriticele romanesti corecte
   (a-breve, s-virgula, t-virgula) sunt incluse.
   Calea e relativa la ACEST fisier, nu la <base href> din HTML: regulile
   url() din CSS se rezolva mereu fata de stylesheet, deci fontul trebuie
   sa stea langa el, in css/. */
@font-face {
    font-family: 'Figtree';
    src: url("figtree-var-latin-ext.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Figtree', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--cerneala);
    background: var(--verde-pal);
}

img, svg { max-width: 100%; }

a { color: var(--verde-inchis); }
a:hover { color: var(--verde); }

:focus-visible { outline: 3px solid var(--verde-mediu); outline-offset: 2px; }

/* ---------- Logo (aceeași construcție ca în header-ul public) ---------- */
.logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--cerneala);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.logo-pin { width: 22px; height: 22px; fill: var(--verde); flex: none; }

/* ---------- Buton primar (aceeași construcție ca în style.css) ---------- */
.buton-primar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--verde);
    color: var(--alb);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--raza-mica);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--tranzitie), background var(--tranzitie);
}

/* Textul ramane alb si la hover/focus: regula globala a:hover de mai sus
   are specificitate mai mare decat clasa singura, deci un
   <a class="buton-primar"> ar aparea cu text verde pe fundal verde.
   Momentan toate butoanele din admin sunt <button>, dar regula asta
   inchide capcana inainte sa apara primul buton-link. */
.buton-primar:hover,
.buton-primar:focus-visible { color: var(--alb); }

.buton-primar:hover { background: var(--verde-hover); transform: translateY(-1px); }
.buton-primar:active { transform: translateY(0) scale(0.98); }

/* ---------- Alerte (mesaje de stare) ---------- */
.admin-alerta {
    margin: 0 0 16px;
    padding: 11px 14px;
    border-radius: var(--raza-mica);
    font-size: 0.9rem;
}

.admin-alerta-eroare {
    background: #FAEDEA;
    color: var(--rosu);
    border: 1px solid #EFD2CB;
}

.admin-alerta-info {
    background: var(--fundal);
    color: var(--gri-text);
    border: 1px solid var(--bordura-soft);
}

/* ---------- Pagina de login ---------- */
.admin-login-body {
    background: var(--verde-pal) url('../poze/background_admin.jpg') center / cover no-repeat fixed;
}

.admin-login-invelis {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.admin-login-card {
    width: 100%;
    max-width: 400px;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-2);
    padding: 32px 28px;
}

/* Sticla se aplică DOAR unde blur-ul chiar funcționează. Fără @supports, un
   browser care ignoră backdrop-filter ar păstra transparența și ar lăsa
   textul direct peste hartă. Regula de mai sus rămâne fallback-ul opac,
   neatinsă.

   Reglat pentru un fundal DESCHIS. Pe harta aproape albă, sticla nu se
   citește din contrast — se citește din trei lucruri: străzile topite de
   blur care se ghicesc prin card, dunga de lumină de pe muchia de sus și
   umbra care îl desprinde de fundal. De-aia bordura e albă și aproape
   opacă, nu difuză: pe deschis, o margine transparentă e o margine
   inexistentă. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .admin-login-card {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.85);
        -webkit-backdrop-filter: blur(5px) saturate(125%);
        backdrop-filter: blur(5px) saturate(125%);
        box-shadow: var(--umbra-sticla);
    }

    /* Autofill-ul browserului pictează câmpul cu lavandă opacă, peste
       var(--alb) din regula obișnuită. Pe card opac trece neobservat; pe
       sticlă e o pată rece care sare în ochi. Umbra interioară e singura
       cale de a-l suprascrie în Chrome și Safari — `background` e ignorat.
       Ținut intenționat în interiorul cardului de login: restul panoului
       rămâne exact cum era. */
    .admin-login-card .admin-camp input:-webkit-autofill,
    .admin-login-card .admin-camp input:-webkit-autofill:hover,
    .admin-login-card .admin-camp input:-webkit-autofill:focus {
        -webkit-text-fill-color: var(--cerneala);
        -webkit-box-shadow: 0 0 0 1000px var(--alb) inset;
        box-shadow: 0 0 0 1000px var(--alb) inset;
        caret-color: var(--cerneala);
    }
}

.admin-login-titlu {
    margin: 18px 0 0;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.admin-login-subtitlu { margin: 5px 0 20px; font-size: 0.93rem; color: var(--gri-text); }

.admin-login-formular { display: flex; flex-direction: column; gap: 14px; }

.admin-camp { display: flex; flex-direction: column; gap: 5px; }

.admin-camp-eticheta { font-size: 0.82rem; font-weight: 600; color: var(--gri-text); }

/* Text de comentariu/observație în interiorul unei etichete sau al unui
   text (ex. "(minimum 8 caractere)", "— blocat până la ..."): REGULĂ
   PERMANENTĂ — orice notă explicativă auxiliară, nu instrucțiunea în
   sine, se scrie cu această clasă, ca să rămână vizual secundară. */
.admin-eticheta-nota { font-weight: 400; font-size: 0.8rem; color: var(--gri-text); opacity: 0.68; }

/* Notă explicativă sub o casetă (bloc, nu inline ca .admin-eticheta-nota
   de mai sus) — text mic, italic, cu steluță ca reper — pentru
   precizări secundare care altfel ar ocupa mult loc într-o alertă. */
.admin-nota-subsol { margin: 10px 2px 0; font-size: 0.78rem; font-style: italic; color: var(--gri-text); line-height: 1.5; }
.admin-nota-subsol + .admin-nota-subsol { margin-top: 2px; }

.admin-camp input:not([type="checkbox"]),
.admin-camp select,
.admin-camp textarea,
.admin-program-ore input[type="time"] {
    display: block;
    width: 100%;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--cerneala);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    padding: 11px 14px;
    transition: border-color var(--tranzitie);
}

.admin-camp select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367696B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.admin-camp input:focus,
.admin-camp select:focus,
.admin-camp textarea:focus,
.admin-program-ore input[type="time"]:focus { outline: none; border-color: var(--verde); }

.admin-login-buton { margin-top: 6px; width: 100%; }

/* Linkurile mici de sub cardul de autentificare: „Ai uitat parola?” si
   „Înapoi la autentificare” de pe paginile de resetare. */
.admin-login-link { margin: 16px 0 0; font-size: 0.85rem; text-align: center; }

/* ---------- Scheletul shell-ului (meniu stânga + conținut) ----------
   Stiluri MINIME, doar cât să fie utilizabil — designul complet
   (colapsare la iconițe, după referință) vine odată cu meniul. */
.admin-shell { display: flex; min-height: 100vh; align-items: stretch; }

.admin-meniu {
    flex: none;
    width: 240px;
    background: var(--alb);
    border-right: 1px solid var(--bordura-soft);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* Desktop: rămâne vizibil și pe pagini lungi, cu scroll propriu */
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Bara de sus + overlay-ul: există în DOM mereu, vizibile doar pe mobil */
.admin-topbar { display: none; }

.admin-suprapunere { display: none; }

.admin-meniu-logo { margin-bottom: 18px; }

.admin-meniu-sectiune {
    margin: 22px 0 6px;
    padding: 0 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--verde);
}

.admin-meniu-lista { display: flex; flex-direction: column; gap: 4px; }

.admin-meniu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px;
    border-radius: var(--raza-mica);
    font-size: 0.92rem;
    color: var(--cerneala);
    text-decoration: none;
    transition: background var(--tranzitie), color var(--tranzitie);
}

.admin-meniu-item:hover { background: var(--verde-pal); color: var(--verde-inchis); }

.admin-meniu-activ { background: var(--verde-pal); color: var(--verde-inchis); font-weight: 600; }

/* Iconițele outline: stroke pe currentColor -> preiau culoarea stării */
.admin-meniu-icon {
    width: 18px;
    height: 18px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Chip-ul utilizatorului logat, la baza meniului */
.admin-meniu-user {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 6px 2px;
    border-top: 1px solid var(--bordura-soft);
}

.admin-meniu-avatar {
    width: 38px;
    height: 38px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--verde-pal);
    border: 1px solid var(--verde-mediu);
    color: var(--verde-inchis);
    font-size: 0.82rem;
    font-weight: 700;
}

.admin-meniu-user-text { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }

.admin-meniu-user-nume {
    font-size: 0.88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-meniu-user-rol { font-size: 0.74rem; color: var(--gri-text); }

.admin-meniu-delogare {
    margin-left: auto;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--raza-mica);
    color: var(--gri-text);
    transition: background var(--tranzitie), color var(--tranzitie);
}

.admin-meniu-delogare:hover { background: #FAEDEA; color: var(--rosu); }

.admin-main { flex: 1; min-width: 0; padding: 28px var(--spatiu-panou); }

.admin-pagina-titlu {
    margin: 0;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.admin-pagina-subtitlu { margin: 5px 0 0; font-size: 0.93rem; color: var(--gri-text); }

/* ---------- Conținutul paginilor: KPI, carduri, tabele, formulare ---------- */

/* Spațiere uniformă între blocurile de nivel superior ale unei pagini
   (regula 30px, o singură dată, pe toate clasele odată) */
.admin-kpi-rand, .admin-main > .admin-card, .admin-main > .admin-alerta { margin-top: var(--spatiu-panou); }

.admin-kpi-rand {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spatiu-panou);
}

.admin-kpi-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    padding: 16px 18px;
}

.admin-kpi-icon {
    width: 40px;
    height: 40px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--raza-mica);
    background: var(--verde-pal);
    color: var(--verde-inchis);
}

.admin-kpi-text { display: flex; flex-direction: column; line-height: 1.25; }

.admin-kpi-valoare { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }

.admin-kpi-eticheta { font-size: 0.78rem; color: var(--gri-text); }

.admin-card {
    background: var(--alb);
    border: 1px solid var(--bordura-soft);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-1);
    padding: 18px;
}

.admin-card-titlu { margin: 0 0 14px; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }

/* Sub-titlu în interiorul unui card (mai mic decât h2-ul cardului) —
   folosit la formularele "adaugă X" din servicii/FAQ/anunțuri/galerie. */
.admin-card-titlu-mic { margin: 20px 0 10px; font-size: 0.9rem; font-weight: 700; color: var(--gri-text); }

/* ---------- Semnul intrebarii cu explicatie la hover ----------
   Pentru informatii care nu merita locul lor permanent pe ecran (limitele
   de poze per plan, de exemplu). Cea mai apropiata clasa existenta era
   .admin-eticheta-nota, dar aceea e text mic afisat mereu langa eticheta:
   n-are cerc, n-are pozitionare si n-are stare ascunsa.
   tabindex + :focus-within pe langa :hover fiindca pe telefon nu exista
   hover — acolo se atinge cerculetul si bula ramane pana la urmatoarea
   atingere in alta parte. */
.admin-ajutor {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 7px;
    vertical-align: middle;
    font-size: 0.92rem;
    font-weight: 400;
    color: var(--gri-text);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: 50%;
    cursor: help;
}

.admin-ajutor:hover { color: var(--verde-inchis); border-color: var(--verde); background: var(--verde-pal); }

/* Bula. Ramane in flux vizual deasupra restului cardului prin z-index, dar
   nu ocupa spatiu: e absoluta, deci nu impinge nimic cand apare.
   Tranzitie doar pe opacity; visibility comuta instant, altfel bula ar
   ramane clicabila cat timp e transparenta. */
.admin-ajutor-text {
    position: absolute;
    top: calc(100% + 8px);
    left: -50px;
    z-index: 30;
    width: 300px;
    max-width: 70vw;
    padding: 10px 12px;
    font-size: 0.8rem;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
    color: var(--cerneala);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    box-shadow: var(--umbra-1);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tranzitie);
}

.admin-ajutor:hover .admin-ajutor-text,
.admin-ajutor:focus .admin-ajutor-text,
.admin-ajutor:focus-within .admin-ajutor-text { opacity: 1; visibility: visible;  border-color: var(--verde); background: var(--verde-pal); }

/* Un plan pe rand, in bula. <span> bloc, nu <br>: bula traieste intr-un
   <span> dintr-un <h2>, unde un <ul> n-ar fi valid, iar cu display: block
   distanta dintre randuri se controleaza dintr-un singur loc.
   Bulina e in ::before, absoluta, ca randul care se rupe pe doua linii sa
   se alinieze sub text, nu sub bulina. */
.admin-ajutor-rand {
    position: relative;
    display: block;
    margin-top: 4px;
    padding-left: 13px;
}

.admin-ajutor-rand::before { content: "\2022"; position: absolute; left: 1px; color: var(--verde); }

/* Acelasi ajutor, dar cu bula ancorata la dreapta: pentru semnele de
   intrebare aflate langa marginea din dreapta a unui card, unde varianta
   implicita (ancorata stanga) ar iesi din el. Modificatorul sta pe inveliş,
   deci selectorul are doua clase (0,2,0) si trece peste .admin-ajutor-text
   (0,1,0) fara alte artificii. */
.admin-ajutor-dreapta .admin-ajutor-text { left: auto; right: -6px; }

.admin-alerta-succes {
    background: var(--verde-pal);
    color: var(--verde-inchis);
    border: 1px solid var(--verde-mediu);
}

/* Tabele */
.admin-tabel-invelis { overflow-x: auto; }

.admin-tabel { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 0.9rem; }

.admin-tabel th {
    text-align: left;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gri-text);
    padding: 10px 12px;
    border-bottom: 1px solid var(--bordura);
}

.admin-tabel td { padding: 12px; border-bottom: 1px solid var(--bordura-soft); vertical-align: middle; }

.admin-tabel tbody tr:last-child td { border-bottom: 0; }

.admin-tabel tbody tr:hover td { background: var(--fundal); }

.admin-tabel-cont { display: flex; align-items: center; gap: 10px; }

.admin-tabel-avatar {
    width: 34px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--verde-pal);
    border: 1px solid var(--verde-mediu);
    color: var(--verde-inchis);
    font-size: 0.76rem;
    font-weight: 700;
}

.admin-tabel-cont-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }

.admin-tabel-cont-nume { font-weight: 600; }

.admin-tabel-cont-sub { font-size: 0.78rem; color: var(--gri-text); }

.admin-tabel-actiune { font-size: 0.85rem; font-weight: 600; }

/* Insigne de stare/rol (oglinda .insigna din style.css) */
.admin-insigna {
    display: inline-block;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--verde-inchis);
    background: var(--verde-pal);
    padding: 3px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.admin-insigna-neutra, .admin-insigna-inactiv { color: var(--gri-text); background: var(--fundal); }

.admin-insigna-blocat, .admin-insigna-respins { color: var(--rosu); background: #FAEDEA; }

/* Buton care NU trebuie sa se intinda pe toata latimea, cum face
   .buton-secundar din oficiu (width: 100%). */
.admin-buton-inline { display: inline-flex; width: auto; margin-top: 0; }

/* Nota explicativa sub un camp de formular. */
.admin-camp-nota { margin: 2px 0 0; font-size: 0.78rem; color: var(--gri-text); line-height: 1.5; }

/* Camp de text care are nevoie de mai multe randuri pe mobil, unde latimea
   mica inseamna de doua ori mai multe randuri pentru acelasi text (ex.
   rezumatul articolului, 320 de caractere). Pe desktop ramane cat spune
   atributul rows. */
@media (max-width: 767px) {
    .admin-camp-inalt textarea { min-height: 150px; }
}

.admin-camp-nota code {
    padding: 1px 5px;
    background: var(--fundal);
    border-radius: 4px;
    font-size: 0.95em;
    /* O cale de fisier n-are spatii; fara asta e un singur "cuvant" de
       50+ caractere care nu incape si lateste pagina. */
    overflow-wrap: break-word;
    word-break: break-all;
}

/* Doua campuri alaturi pe desktop, unul sub altul pe ecrane mici. */
.admin-camp-rand {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* Bifa cu eticheta la dreapta. Aliniere pe prima linie de text, nu pe
   centru: la etichetele pe doua randuri, centrarea arata strambata. */
.admin-comutator {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--cerneala);
    cursor: pointer;
}

.admin-comutator input[type="checkbox"] { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--verde); }

.admin-comutator select {
    height: 32px;
    padding: 0 8px;
    font: inherit;
    font-size: 0.8rem;
    color: var(--cerneala);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: 6px;
}

/* Tabel lipit în zona de editare. Clasa .tabel-articol o pune filtrul din
   PHP abia la salvare, deci în editor tabelul e fără clasă — fără regula
   asta l-ai vedea nestilizat exact acolo unde lucrezi cu el. Minimal
   dinadins: aici contează să vezi structura, nu să semene cu site-ul. */
.editor-zona table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: 0.84rem; }

.editor-zona th, .editor-zona td {
    padding: 6px 9px;
    text-align: left;
    vertical-align: top;
    border: 1px solid var(--bordura-soft);
}

.editor-zona th { font-weight: 700; background: var(--fundal); }

.editor-zona td p, .editor-zona th p { margin: 0; }

/* Grup de comutatoare: pe mobil unul sub altul, pe desktop pe același rând,
   cu pauză între ele. Wrapper propriu, nu direct pe .admin-camp, fiindcă
   acolo mai stă și eticheta grupului — ar fi intrat și ea pe rând. */
.admin-comutatoare-rand { display: flex; flex-direction: column; gap: 8px; }

@media (min-width: 768px) {
    .admin-comutatoare-rand { flex-direction: row; flex-wrap: wrap; gap: var(--spatiu-panou); }
}

/* ---------- Ecranul de editare a articolului ---------- */

/* Titlul articolului sub H1-ul paginii, ca sa stii pe ce lucrezi fara sa
   te uiti in campul de titlu. */
.admin-articol-cap-titlu {
    margin: 6px 0 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--cerneala);
}

/* Fara margine jos: distanta pana la prima caseta o da margin-top-ul
   cardului (var(--spatiu-panou)). Aveam si aici 14px si se adunau. */
.admin-articol-cap-data { margin: 4px 0 0; font-size: 0.8rem; color: var(--gri-text); }

/* Spatiere intre rubricile formularului. Regula UNICA pe toate campurile
   directe din cardurile formularului de articol, nu valori diferite per
   element: asa distanta e aceeasi peste tot si se schimba dintr-un loc. */
.form-articol .admin-card > .admin-camp,
.form-articol .admin-card > .admin-camp-rand { margin-bottom: 26px; }

.form-articol .admin-card > .admin-camp:last-child,
.form-articol .admin-card > .admin-camp-rand:last-child { margin-bottom: 0; }

/* Valoare doar de citit, in locul unui input. Aceeasi inaltime ca un
   input, ca randul sa nu sara cand sta langa unul. */
.admin-camp-static {
    margin: 0;
    padding: 9px 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cerneala);
}

/* Spatierea verticala intre casetele formularului.
   Exista deja o regula pentru asta (.admin-main > .admin-card, mai sus),
   dar foloseste COPIL DIRECT, iar <form> rupe lantul — de-aia cardurile
   dintr-un formular nu o prindeau. Aici e aceeasi valoare si acelasi
   token, aplicate o singura data pe toate wrapper-ele de nivel superior
   din formular, nu valori diferite per element. */
.form-articol > .admin-card,
.form-articol > .admin-coloane-2,
.form-articol > .admin-articol-salvare { margin-top: var(--spatiu-panou); }

/* Instantele nested nu se dubleaza: cardurile din interiorul grilei de
   doua coloane sunt distantate de gap, nu de margine. */
.admin-coloane-2 > .admin-card { margin-top: 0; }

/* Publicare | Imagine, una langa alta. Sub 900px trec una sub alta:
   caseta de imagine are previzualizare si doua campuri, iar la coloane
   inguste selectul de format nu mai incape lizibil.
   gap = acelasi token ca spatierea verticala, ca distantele sa fie egale
   pe ambele axe. */
.admin-coloane-2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--spatiu-panou); }

@media (min-width: 900px) {
    /* minmax(0, 1fr), NU 1fr: 1fr inseamna minmax(auto, 1fr), iar acel
       auto e min-content — o coloana nu poate cobori sub cel mai lat
       element indivizibil din ea si impinge pagina in lateral. Cu 0 ca
       minim, coloana are voie sa se stranga si continutul se rupe. */
    .admin-coloane-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

/* Casuta de fisier, la aceeasi inaltime cu inputurile text de langa ea.
   Ia exact padding-ul, fontul si line-height-ul din regula comuna de mai
   sus (.admin-camp input:not([type="checkbox"]) etc.), deci inaltimea
   totala iese aceeasi fara nicio valoare fixa care sa se desincronizeze
   daca se schimba padding-ul acolo.
   Butonul intern e cel care strica alinierea: are padding propriu, dat de
   browser, si impinge caseta mai inalta decat vecinele. De-aia primeste
   inaltime 1.4em — exact line-height-ul textului de langa el — si padding
   doar pe orizontala. Sunt necesari doi selectori: ::file-selector-button e
   standardul, ::-webkit-file-upload-button il inteleg Safari si Chrome mai
   vechi. Nu pot sta in aceeasi regula: un selector necunoscut arunca toata
   regula, iar browserul care il stie doar pe unul le-ar pierde pe amandoua. */
.admin-camp input[type="file"] {
    padding: 11px 14px;
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: pointer;
}

.admin-camp input[type="file"]::file-selector-button {
    height: 1.4em;
    margin-right: 12px;
    padding: 0 12px;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--cerneala);
    background: var(--fundal);
    border: 1px solid var(--bordura);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--tranzitie), background var(--tranzitie);
}

.admin-camp input[type="file"]::-webkit-file-upload-button {
    height: 1.4em;
    margin-right: 12px;
    padding: 0 12px;
    font: inherit;
    font-size: 0.85rem;
    line-height: 1;
    color: var(--cerneala);
    background: var(--fundal);
    border: 1px solid var(--bordura);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color var(--tranzitie), background var(--tranzitie);
}

.admin-camp input[type="file"]:hover::file-selector-button { border-color: var(--verde); background: var(--verde-pal); }
.admin-camp input[type="file"]:hover::-webkit-file-upload-button { border-color: var(--verde); background: var(--verde-pal); }

/* ---------- Listarea articolelor ----------
   Bloc pe trei coloane: imagine, corp, actiuni. Nu tabel — corpul are
   prea multe controale ca sa incapa intr-o celula, iar imaginea cere
   o latime fixa care intr-un tabel s-ar lupta cu restul coloanelor. */
.admin-articol {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 16px 0;
    border-top: 1px solid var(--bordura-soft);
}

.admin-articol:first-of-type { border-top: 0; padding-top: 6px; }

.admin-articol-poza {
    width: 120px;
    height: 84px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--fundal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-articol-poza img { width: 100%; height: 100%; object-fit: cover; }

.admin-articol-poza-lipsa { font-size: 0.72rem; color: var(--gri-text); text-align: center; padding: 0 6px; }

.admin-articol-corp { min-width: 0; }

.admin-articol-titlu { margin: 0; font-size: 0.98rem; font-weight: 700; line-height: 1.3; }

.admin-articol-titlu a { color: var(--cerneala); text-decoration: none; }
.admin-articol-titlu a:hover { color: var(--verde-inchis); text-decoration: underline; }

.admin-articol-insigne { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; }

/* Randul cu Publicat / Actualizat / Promovat pana la, sub insigne.
   Era <span> inline in randul de insigne; acum e <p> propriu, de-aia
   are nevoie de margine si de display block. */
.admin-articol-data { display: block; margin: 6px 0 0; font-size: 0.76rem; color: var(--gri-text); }

.admin-articol-data strong { font-weight: 600; color: var(--cerneala); }

/* Termen trecut: articolul nu mai apare in promovari, desi bifele sunt
   puse. Refoloseste variabila --chihlimbar, ca insignele de atentie. */
.admin-articol-data .admin-articol-expirat-text { color: var(--chihlimbar); }

.admin-articol-extras { margin: 7px 0 0; font-size: 0.82rem; color: var(--gri-text); line-height: 1.55; }

/* Acum e un <form>, nu un <div>: formularele au margine implicita in
   unele browsere, de-aia margin: 0 explicit. */
.admin-articol-comutatoare {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dotted var(--bordura);
}

.admin-articol-actiuni { display: flex; gap: 6px; }

.admin-articol-salvare { display: flex; justify-content: flex-end; margin-top: 18px; }

@media (max-width: 767px) {
    .admin-articol { grid-template-columns: 84px 1fr; }
    .admin-articol-poza { width: 84px; height: 60px; }
    .admin-articol-actiuni { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---------- Editor de articole (js/editor.js) ----------
   Bara se construieste din JS, deci aici sunt doar stilurile. Textarea
   sursa ramane in pagina, ascunsa: ea e ce se trimite la server. */
.editor { margin-top: 6px; }

.editor-bara {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: var(--fundal);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica) var(--raza-mica) 0 0;
    border-bottom: 0;
}

.editor-buton {
    min-width: 32px;
    height: 30px;
    padding: 0 9px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--cerneala);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color var(--tranzitie), background var(--tranzitie);
}

.editor-buton:hover { border-color: var(--verde); background: var(--verde-pal); }
.editor-buton:active { transform: scale(0.96); }

/* Butoanele de formatare arata ca efectul lor — semnalul cel mai rapid. */
.editor-buton-b { font-weight: 800; }
.editor-buton-i { font-style: italic; }
.editor-buton-u { text-decoration: underline; }

.editor-separator {
    width: 1px;
    height: 20px;
    margin: 0 3px;
    background: var(--bordura);
}

/* Zona editabila imita tipografia paginii publice, ca sa vezi la scriere
   cam ce va vedea cititorul. Nu identic — ar cere importarea intregului
   style.css in admin — dar suficient ca ierarhia sa fie evidenta. */
.editor-zona {
    min-height: 340px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 16px 18px;
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: 0 0 var(--raza-mica) var(--raza-mica);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--cerneala);
}

.editor-zona:focus { outline: none; border-color: var(--verde); }

/* Un URL lung lipit in text ar lati zona si, cu ea, pagina. */
.editor-zona { overflow-wrap: break-word; }

.editor-zona p { margin: 0 0 12px; }
.editor-zona h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin: 20px 0 8px; }
.editor-zona h3 { font-size: 1.08rem; font-weight: 700; margin: 18px 0 6px; }
.editor-zona h4 { font-size: 0.98rem; font-weight: 700; margin: 16px 0 6px; }
.editor-zona h5 { font-size: 0.92rem; font-weight: 700; color: var(--gri-text); margin: 14px 0 6px; }
.editor-zona h2:first-child, .editor-zona h3:first-child, .editor-zona p:first-child { margin-top: 0; }
.editor-zona ul, .editor-zona ol { margin: 0 0 12px; padding-left: 24px; }
.editor-zona li { margin-bottom: 5px; }
.editor-zona a { color: var(--verde-inchis); }

.editor-zona blockquote {
    margin: 0 0 12px;
    padding: 8px 0 8px 14px;
    border-left: 3px solid var(--verde);
    color: var(--gri-text);
    font-style: italic;
}

/* Textarea sursa: ascunsa complet. Ea e ce se trimite la server; zona
   editabila doar o alimenteaza la submit.

   display: none e corect aici. Un camp ascuns astfel SE TRIMITE normal —
   singura capcana reala e `required` pe un camp ascuns, care da eroare de
   validare nefocalizabila, iar acesta n-are `required`.

   Selectorul e pe copil direct al .editor, nu pe clasa singura: exista
   .admin-camp textarea (display: block; width: 100%) cu specificitate mai
   mare decat o clasa. Cu position: absolute si fara ancestor pozitionat,
   acei 100% se calculau fata de fereastra in timp ce elementul ramanea la
   poziția lui statica — rezulta un textarea de 1900px care impingea toata
   pagina in lateral. */
.editor > .editor-sursa-ascunsa { display: none; }

/* Insignă de atenție — aceeași familie cromatică cu .admin-kpi-icon-atentie,
   pentru lucruri care nu sunt erori, dar cer o privire. */
.admin-insigna-atentie { color: var(--chihlimbar); background: #FBF1E1; }

/* Paragraf explicativ sub titlul unui card. */
.admin-card-sub { margin: -6px 0 18px; font-size: 0.86rem; color: var(--gri-text); }

/* ---------- Coada de cereri (conturi neactivate din formularul public) ----------
   Fiecare cerere e un bloc de sine stătător, nu un rând de tabel: are prea
   multe date de comparat ca să încapă pe orizontală, iar decizia de aprobare
   se ia uitându-te la ele împreună. */
.admin-cerere {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid var(--bordura);
    border-radius: 12px;
    background: var(--fundal);
}

.admin-cerere:first-of-type { margin-top: 0; }

.admin-cerere-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.admin-cerere-functie { font-weight: 400; color: var(--gri-text); }

.admin-cerere-corp { margin-top: 14px; }

/* Etichetă deasupra valorii: pe două rânduri intră mai bine decât alăturat,
   fiindcă unele valori (site, adresă) sunt lungi. */
.admin-cerere-date { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; }

.admin-cerere-date dt { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gri-text); }

.admin-cerere-date dd { margin: 3px 0 0; font-size: 0.88rem; }

.admin-cerere-lipsa { color: var(--gri-text); font-style: italic; }

.admin-cerere-verifica { margin: 14px 0 0; font-size: 0.83rem; color: var(--gri-text); }

.admin-cerere-actiuni { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

/* Variantă de KPI care semnalează nevoie de atenție (ex. "În așteptare") */
.admin-kpi-icon-atentie { background: #FBF1E1; color: var(--chihlimbar); }

/* Steluțe rating */
.admin-stele { display: inline-flex; gap: 2px; }

.admin-stea { width: 16px; height: 16px; fill: none; stroke: var(--bordura); stroke-width: 1.5; }

.admin-stea-plina { fill: var(--chihlimbar); stroke: var(--chihlimbar); }

/* Butoane-iconiță pentru rândurile de tabel (aprobă/respinge/editează/șterge) */
.admin-actiuni-rand { display: flex; gap: 6px; }

.admin-buton-icon {
    width: 32px;
    height: 32px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    border: 1px solid var(--bordura);
    background: var(--alb);
    color: var(--gri-text);
    cursor: pointer;
    transition: background var(--tranzitie), color var(--tranzitie), border-color var(--tranzitie);
}

.admin-buton-icon .admin-meniu-icon { width: 16px; height: 16px; }

.admin-buton-icon-aproba:hover { background: var(--verde-pal); border-color: var(--verde-mediu); color: var(--verde-inchis); }

.admin-buton-icon-respinge:hover { background: #FBF1E1; border-color: #E9CFA0; color: var(--chihlimbar); }

.admin-buton-icon-editeaza:hover { background: var(--fundal); border-color: var(--bordura); color: var(--cerneala); }

.admin-buton-icon-sterge:hover { background: #FAEDEA; border-color: #EFD2CB; color: var(--rosu); }

/* Buton de pericol (confirmare ștergere) */
.buton-pericol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--rosu);
    color: var(--alb);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 24px;
    border: 0;
    border-radius: var(--raza-mica);
    cursor: pointer;
    transition: background var(--tranzitie), transform var(--tranzitie);
}

.buton-pericol:hover { background: #AD4632; transform: translateY(-1px); }

.buton-pericol:active { transform: translateY(0) scale(0.98); }

/* Tab-uri de filtrare (ex. Toate/În așteptare/Aprobate/Respinse) */
.admin-filtru-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

.admin-filtru-tab {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gri-text);
    background: var(--fundal);
    border: 1px solid var(--bordura-soft);
    border-radius: 999px;
    padding: 7px 14px;
    cursor: pointer;
    transition: background var(--tranzitie), color var(--tranzitie), border-color var(--tranzitie);
}

.admin-filtru-tab:hover { background: var(--verde-pal); color: var(--verde-inchis); }

.admin-filtru-tab-activ, .admin-filtru-tab-activ:hover { background: var(--verde); color: var(--alb); border-color: var(--verde); }

.admin-filtru-tab-numar { opacity: 0.75; font-weight: 700; }

/* Paginare */
.admin-paginare {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--bordura-soft);
}

.admin-paginare-buton {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--verde-inchis);
    text-decoration: none;
    padding: 7px 12px;
    border-radius: var(--raza-mica);
    transition: background var(--tranzitie);
}

.admin-paginare-buton:hover { background: var(--verde-pal); }

.admin-paginare-dezactivat { color: var(--bordura); pointer-events: none; }

.admin-paginare-info { font-size: 0.82rem; color: var(--gri-text); }

/* Coloana "Recenzie": comentariu trunchiat cu "Vezi tot" */
.admin-tabel-recenzii { min-width: 900px; }

.admin-tabel-recenzii td:nth-child(3) { max-width: 340px; }

.admin-recenzie-text { margin-top: 3px; line-height: 1.5; }

.admin-text-trunchiat {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.admin-text-trunchiat.admin-text-extins { display: block; -webkit-line-clamp: unset; overflow: visible; }

.admin-text-toggle {
    display: inline-block;
    margin-top: 4px;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--verde-inchis);
    cursor: pointer;
}

.admin-text-toggle:hover { text-decoration: underline; }

/* Răspunsul firmei = rând propriu de tabel, imediat sub recenzia lui —
   ACELEAȘI coloane, ACELEAȘI butoane la aceeași mărime ca ale
   recenziei. Perechea părinte-copil se semnalează prin fundal verde
   pal, bară verde în stânga și săgeata ↳ din coloana Firmă. */
.admin-rand-cu-raspuns td { border-bottom: 0; }

.admin-tabel tbody tr.admin-rand-raspuns td { background: var(--verde-pal); padding-left: 62px; }

.admin-tabel tbody tr.admin-rand-raspuns:hover td { background: var(--verde-pal); }

/* Bara verde rămâne la marginea reală a rândului (nu se indentează
   odată cu conținutul) — semnalează "acesta e un rând-copil" chiar
   din capătul tabelului, înainte de golul de 50px. */
.admin-rand-raspuns td:first-child { border-left: 3px solid var(--verde); }

.admin-raspuns-eticheta { white-space: nowrap; }

/* Modale (editare comentariu, confirmare ștergere) — doar transform și
   opacity, ca să rămână animația fină pe orice conținut */
.admin-modal-fundal {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(23, 24, 26, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tranzitie);
}

.admin-modal-fundal.admin-modal-vizibil { opacity: 1; pointer-events: auto; }

.admin-modal {
    width: 100%;
    max-width: 460px;
    background: var(--alb);
    border-radius: var(--raza-card);
    box-shadow: var(--umbra-2);
    padding: 22px;
    transform: scale(0.96) translateY(6px);
    transition: transform var(--tranzitie);
}

.admin-modal-fundal.admin-modal-vizibil .admin-modal { transform: none; }

.admin-modal-titlu { margin: 0 0 4px; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.02em; }

.admin-modal-context { margin: 0 0 14px; font-size: 0.85rem; color: var(--gri-text); }

.admin-modal-text { margin: 0 0 18px; font-size: 0.94rem; line-height: 1.6; }

.admin-modal-eroare { margin: 0 0 12px; font-size: 0.85rem; color: var(--rosu); }

.admin-modal textarea {
    width: 100%;
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--cerneala);
    padding: 11px 14px;
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    resize: vertical;
}

.admin-modal textarea:focus { outline: none; border-color: var(--verde); }

.admin-modal-actiuni { display: flex; gap: 10px; margin-top: 16px; }



/* Formulare pe grilă (2 coloane pe desktop, 1 pe mobil) */
.admin-formular-grila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }

.admin-camp-full { grid-column: 1 / -1; }

.admin-camp-bifat {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
}

.admin-camp-bifat input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; accent-color: var(--verde); }

.admin-camp-bifat label { font-size: 0.88rem; }

.admin-formular-actiuni { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 4px; }

.buton-secundar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--fundal);
    color: var(--cerneala);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 12px 24px;
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--tranzitie), border-color var(--tranzitie);
}

.buton-secundar:hover { background: var(--verde-pal); border-color: var(--verde-mediu); color: var(--verde-inchis); }

@media (max-width: 700px) {
    .admin-formular-grila { grid-template-columns: 1fr; }
    .admin-formular-actiuni { flex-wrap: wrap; }
}

/* Pe mobil, orice buton de acțiune ocupă toată lățimea — regulă generală,
   ca să nu mai fie nevoie de câte o excepție per ecran. Se numesc explicit
   cele două clase: `button` la general ar prinde și .admin-buton-icon,
   pătrățelele cu iconiță din galerie și din tabele, care ar deveni bare
   late cât cardul.

   Prinde și .admin-buton-inline („Șterge definitiv"), care își declară
   `width: auto` la linia 486: aceeași specificitate (0,1,0), regula asta e
   mai jos în fișier, deci câștigă. E intenționat — pe mobil e lat ca toate
   celelalte. Dacă vreodată trebuie să rămână scurt, aici se adaugă
   :not(.admin-buton-inline), nu un !important acolo. */
@media (max-width: 767px) {
    .buton-primar,
    .buton-secundar { width: 100%; }
}

/* Rândul aflat în editare, evidențiat în tabel */
.admin-tabel tbody tr.admin-tabel-rand-activ td { background: var(--verde-pal); }

/* Câmp de parolă cu buton arată/ascunde */
.admin-camp-parola { position: relative; display: flex; }

.admin-camp-parola input { flex: 1; min-width: 0; padding-right: 46px; }

.admin-parola-toggle {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: var(--gri-text);
    transition: background var(--tranzitie), color var(--tranzitie);
}

.admin-parola-toggle:hover { background: var(--verde-pal); color: var(--verde-inchis); }

.admin-parola-toggle[aria-pressed="true"] { color: var(--verde-inchis); }

/* Ancora #formular nu se ascunde sub bara fixă de pe mobil */
#formular { scroll-margin-top: 72px; }

/* Lista de cerințe live sub câmpul de parolă */
.admin-parola-cerinte { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

.admin-parola-cerinta {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--gri-text);
    background: var(--fundal);
    border: 1px solid var(--bordura-soft);
    border-radius: 999px;
    padding: 3px 10px 3px 8px;
    transition: background var(--tranzitie), color var(--tranzitie), border-color var(--tranzitie);
}

.admin-parola-cerinta::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--bordura);
    transition: background var(--tranzitie);
}

.admin-parola-cerinta-ok { color: var(--verde-inchis); background: var(--verde-pal); border-color: var(--verde-mediu); }

.admin-parola-cerinta-ok::before { background: var(--verde); }

/* Căutare live într-un tabel (componentă generică, reutilizabilă pe
   orice pagină cu listă lungă — vezi script_admin.js secțiunea 4) */
.admin-cautare-tabel { margin-bottom: 14px; }

.admin-cautare-input {
    width: 100%;
    max-width: 360px;
    display: block;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--cerneala);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    padding: 9px 14px;
    transition: border-color var(--tranzitie);
}

.admin-cautare-input:focus { outline: none; border-color: var(--verde); }

.admin-rand-ascuns { display: none; }

.admin-tabel-fara-rezultate { margin: 14px 2px 2px; font-size: 0.88rem; color: var(--gri-text); }

/* Combobox cu căutare live (ex. selectorul de firmă) — componentă
   generică: orice .admin-combobox cu data-sursa + data-camp-id
   funcționează automat, vezi script_admin.js secțiunea 5 */
.admin-combobox { position: relative; }

.admin-combobox-lista {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    box-shadow: var(--umbra-2);
    max-height: 260px;
    overflow-y: auto;
}

.admin-combobox-item { padding: 8px 10px; border-radius: 8px; cursor: pointer; line-height: 1.3; }

.admin-combobox-item:hover, .admin-combobox-item-activ { background: var(--verde-pal); }

.admin-combobox-item-nume { display: block; font-size: 0.9rem; font-weight: 600; color: var(--cerneala); }

.admin-combobox-item-sub { display: block; font-size: 0.76rem; color: var(--gri-text); margin-top: 1px; }

.admin-combobox-gol { padding: 8px 10px; font-size: 0.85rem; color: var(--gri-text); }

/* ---------- Firme-firme: cap de pagină (titlu + acțiuni) ---------- */
.admin-pagina-cap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.admin-pagina-actiuni { display: flex; gap: 10px; flex: none; }

@media (max-width: 700px) {
    .admin-pagina-cap { flex-direction: column; align-items: stretch; }
    .admin-pagina-actiuni { width: 100%; }
    .admin-pagina-actiuni .buton-primar { width: 100%; }
}

/* Rând de filtre cu grupuri pe stânga ȘI pe dreapta (stare stânga, plan
   dreapta) — tab-urile simple (.admin-filtru-tabs) rămân neschimbate,
   doar containerul din jur le așează în rând cu selectul. */
.admin-filtru-rand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.admin-filtru-rand .admin-filtru-tabs { margin-bottom: 0; }

/* Select de filtrare, stil pastilă (diferit de .admin-camp select, care
   e gândit pentru formulare, nu pentru un filtru independent). */
.admin-select-filtru {
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cerneala);
    background: var(--alb);
    border: 1px solid var(--bordura);
    border-radius: 999px;
    padding: 7px 34px 7px 14px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2367696B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 15px;
}

.admin-select-filtru:focus { outline: none; border-color: var(--verde); }

/* Tabelul de firme (adm/admin_firme_firme.php): coloanele 4-6
   (Abonament, Expiră, Status) centrate; coloana de acțiuni cu
   activ/inactiv la marginea stângă a celulei și editează la marginea
   dreaptă. Scopat cu .admin-tabel-firme ca să nu atingă .admin-tabel-
   recenzii sau alte tabele care refolosesc .admin-actiuni-rand. */
.admin-tabel-firme th:nth-child(4), .admin-tabel-firme td:nth-child(4),
.admin-tabel-firme th:nth-child(5), .admin-tabel-firme td:nth-child(5),
.admin-tabel-firme th:nth-child(6), .admin-tabel-firme td:nth-child(6) {
    text-align: center;
}

.admin-tabel-firme .admin-actiuni-rand { justify-content: space-between; }

/* Centrare coloane specifice la servicii/FAQ/anunțuri */
.admin-tabel-servicii td:nth-child(1), .admin-tabel-servicii th:nth-child(1),
.admin-tabel-servicii td:nth-child(4), .admin-tabel-servicii th:nth-child(4) { text-align: center; }
.admin-tabel-faq td:nth-child(1), .admin-tabel-faq th:nth-child(1),
.admin-tabel-faq td:nth-child(4), .admin-tabel-faq th:nth-child(4) { text-align: center; }
.admin-tabel-servicii th:nth-child(1), .admin-tabel-faq th:nth-child(1) { width: 40px; }
.admin-tabel-anunturi td:nth-child(2), .admin-tabel-anunturi th:nth-child(2),
.admin-tabel-anunturi td:nth-child(3), .admin-tabel-anunturi th:nth-child(3) { text-align: center; }

/* Coloana Moderare — există doar în admin_firme_firme_editeaza.php.
   La Servicii/FAQ e a 5-a coloană; la Anunțuri cade pe nth-child(3),
   deja acoperită de regula de mai sus. */
.admin-main:not(.admin-main-firma) .admin-tabel-servicii td:nth-child(5),
.admin-main:not(.admin-main-firma) .admin-tabel-servicii th:nth-child(5),
.admin-main:not(.admin-main-firma) .admin-tabel-faq td:nth-child(5),
.admin-main:not(.admin-main-firma) .admin-tabel-faq th:nth-child(5) { text-align: center; }
.admin-main:not(.admin-main-firma) .admin-tabel-anunturi td:nth-child(4),
.admin-main:not(.admin-main-firma) .admin-tabel-anunturi th:nth-child(4) { text-align: center; }

/* Lățimi fixe pe desktop — ca editarea unui rând (text mai lung/mai
   scurt) să nu mai mute coloanele la stânga/dreapta. Pe mobil rămâne
   cum era (tabelul scrollează orizontal, vezi .admin-tabel-invelis +
   .admin-tabel { min-width: 640px }) — table-layout: fixed nu se aplică
   sub 900px, ca să nu strice acel comportament. Coloanele nemenționate
   aici (Descriere / Întrebare+Răspuns / Titlu) iau automat restul
   spațiului disponibil.
   Scopat STRICT la .admin-firma-continut (panoul propriu al firmei) —
   admin_firme_firme_editeaza.php refolosește aceleași clase de tabel,
   dar cu propriul set de lățimi (mai jos), calibrate separat pentru
   structura ei (nu neapărat identică). */
@media (min-width: 900px) {
    .admin-firma-continut .admin-tabel-servicii,
    .admin-firma-continut .admin-tabel-faq,
    .admin-firma-continut .admin-tabel-anunturi,
    .admin-tabel-program { table-layout: fixed; }

    .admin-firma-continut .admin-tabel-servicii th:nth-child(2) { width: 200px; }
    .admin-firma-continut .admin-tabel-servicii th:nth-child(4) { width: 110px; }
    .admin-firma-continut .admin-tabel-servicii th:nth-child(5) { width: 170px; }

    .admin-firma-continut .admin-tabel-faq th:nth-child(4) { width: 110px; }
    .admin-firma-continut .admin-tabel-faq th:nth-child(5) { width: 170px; }

    .admin-firma-continut .admin-tabel-anunturi th:nth-child(2) { width: 130px; }
    .admin-firma-continut .admin-tabel-anunturi th:nth-child(3) { width: 140px; }
    .admin-firma-continut .admin-tabel-anunturi th:nth-child(4) { width: 96px; }

    .admin-tabel-program th:nth-child(1) { width: 22%; }
    .admin-tabel-program th:nth-child(2) { width: 16%; }
    .admin-tabel-program th:nth-child(3), .admin-tabel-program th:nth-child(4) { width: 31%; }

    .admin-firma-continut .admin-tabel-servicii td,
    .admin-firma-continut .admin-tabel-faq td,
    .admin-firma-continut .admin-tabel-anunturi td { word-wrap: break-word; }
}

/* Aceleași lățimi fixe, dar pentru admin_firme_firme_editeaza.php —
   calibrate separat (coloana de acțiuni are 4 butoane la Servicii/FAQ,
   ca și la panoul firmei, dar late diferit; Recenzii nu există la
   panoul firmei). Scopat prin .admin-main:not(.admin-main-firma) —
   admin-main-firma e o clasă unică panoului firmei, deci selectorul de
   mai jos prinde STRICT pagina de admin, nu se suprapune peste blocul
   de mai sus. Motivul real al problemei din captură (niciun tabel nu
   ajungea la 100%) era table-layout: auto lăsat neatins aici — cu
   fixed + lățimi explicite, toate ajung exact la marginea dreaptă. */
@media (min-width: 900px) {
    .admin-main:not(.admin-main-firma) .admin-tabel-servicii,
    .admin-main:not(.admin-main-firma) .admin-tabel-faq,
    .admin-main:not(.admin-main-firma) .admin-tabel-anunturi,
    .admin-main:not(.admin-main-firma) .admin-tabel-recenzii-mic { table-layout: fixed; }

    .admin-main:not(.admin-main-firma) .admin-tabel-servicii th:nth-child(2) { width: 200px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-servicii th:nth-child(4) { width: 110px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-servicii th:nth-child(5) { width: 140px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-servicii th:nth-child(6) { width: 170px; }

    .admin-main:not(.admin-main-firma) .admin-tabel-faq th:nth-child(4) { width: 110px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-faq th:nth-child(5) { width: 140px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-faq th:nth-child(6) { width: 170px; }

    .admin-main:not(.admin-main-firma) .admin-tabel-anunturi th:nth-child(2) { width: 130px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-anunturi th:nth-child(3) { width: 140px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-anunturi th:nth-child(4) { width: 140px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-anunturi th:nth-child(5) { width: 96px; }

    .admin-main:not(.admin-main-firma) .admin-tabel-recenzii-mic th:nth-child(1) { width: 130px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-recenzii-mic th:nth-child(2) { width: 90px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-recenzii-mic th:nth-child(4) { width: 110px; }
    .admin-main:not(.admin-main-firma) .admin-tabel-recenzii-mic th:nth-child(6) { width: 110px; }

    .admin-main:not(.admin-main-firma) .admin-tabel-servicii td,
    .admin-main:not(.admin-main-firma) .admin-tabel-faq td,
    .admin-main:not(.admin-main-firma) .admin-tabel-anunturi td,
    .admin-main:not(.admin-main-firma) .admin-tabel-recenzii-mic td { word-wrap: break-word; }
}

.admin-tabel-recenzii-mic td:nth-child(2), .admin-tabel-recenzii-mic th:nth-child(2),
.admin-tabel-recenzii-mic td:nth-child(4), .admin-tabel-recenzii-mic th:nth-child(4),
.admin-tabel-recenzii-mic td:nth-child(6), .admin-tabel-recenzii-mic th:nth-child(6) { text-align: center; }

/* Căutare server-side (întreaga bază, nu doar pagina curentă) — formular
   GET cu input + buton pe același rând. Diferit de .admin-cautare-tabel
   (client-side, doar input), care rămâne neschimbat pentru alte pagini. */
.admin-cautare-server { display: flex; gap: 8px; margin-bottom: 14px; }
.admin-cautare-server .admin-cautare-input { margin: 0; }

/* ---------- Pagina de editare firmă (adm/admin_firme_firme_editeaza.php) ---------- */

/* Spațiere consistentă între secțiunile formularului de firmă */
.admin-formular-sectiune-titlu { margin-top: 24px; }

/* Harta interactivă Leaflet pentru lat/lon */
.admin-harta-cutie {
    position: relative;
    height: 320px;
    border: 1px solid var(--bordura);
    border-radius: var(--raza-mica);
    overflow: hidden;
    margin-top: 6px;
}
#ffe-harta { position: absolute; inset: 0; z-index: 1; }
.admin-harta-hint {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(23, 24, 26, 0.55);
    color: var(--alb);
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.admin-harta-hint-vizibil { opacity: 1; }
.admin-harta-coordonate { display: flex; gap: 14px; margin-top: 8px; font-size: 0.82rem; color: var(--gri-text); }
.admin-harta-coordonate b { color: var(--cerneala); }

/* Avertisment (diferit de eroare/succes/info — galben, pentru duplicat) */
.admin-alerta-avertisment { background: #FBF1E1; color: var(--chihlimbar); border: 1px solid #E9CFA0; }

/* Galerie foto */
.admin-galerie-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-top: 4px; }
.admin-galerie-card { position: relative; border: 1px solid var(--bordura-soft); border-radius: var(--raza-mica); overflow: hidden; background: var(--alb); }
.admin-galerie-card img { width: 100%; height: 110px; object-fit: cover; display: block; }
.admin-galerie-card-principal { border-color: var(--verde); }
.admin-galerie-insigna-principal { position: absolute; top: 6px; left: 6px; z-index: 2; }
.admin-galerie-actiuni { display: flex; gap: 4px; padding: 6px; border-top: 1px solid var(--bordura-soft); }

@media (max-width: 899px) {
    .admin-galerie-actiuni { justify-content: center; }
}
.admin-galerie-card img { cursor: pointer; }

/* Lightbox galerie (mărire poze) — creat dinamic din JS, ca la frontend */
.admin-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(23, 24, 26, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
}
.admin-lightbox[hidden] { display: none; }
.admin-lightbox-imagine { max-width: 88vw; max-height: 82vh; object-fit: contain; border-radius: var(--raza-mica); }
.admin-lightbox-inchide, .admin-lightbox-nav {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    color: var(--alb);
    cursor: pointer;
    transition: background var(--tranzitie);
}
.admin-lightbox-inchide:hover, .admin-lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.admin-lightbox-inchide { top: 20px; right: 20px; }
.admin-lightbox-inchide svg, .admin-lightbox-nav svg { width: 22px; height: 22px; }
.admin-lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.admin-lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); }
.admin-lightbox-contor { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: var(--alb); font-size: 0.85rem; background: rgba(255,255,255,0.12); padding: 4px 14px; border-radius: 999px; }

/* Rândul de program (7 zile) — refolosește .admin-tabel, doar câmpurile din interior */
.admin-program-rand td { vertical-align: middle; }

@media (max-width: 700px) {
    .admin-program-rand td { padding-left: 6px; padding-right: 6px; }
}

/* Pe mobil (sub 900px, unde table-layout: fixed de mai sus nu se mai
   aplică), scoatem și min-width: 640px — tabelul de Program nu mai e
   forțat la o lățime minimă, ia doar cât are nevoie de la table-layout: auto. */
@media (max-width: 899px) {
    .admin-tabel { min-width: 0; }
}

/* Servicii / Anunțuri / FAQ pe mobil: nu mai e tabel cu scroll orizontal
   și coloane înghesuite — fiecare rând devine o "cărticică" (card), cu
   eticheta câmpului (data-label, pus în markup) afișată deasupra
   valorii prin ::before. Rândul de acțiuni (fără etichetă, data-label="")
   se separă printr-o linie și se aliniază la dreapta.
   Scopat STRICT la .admin-firma-continut — data-label există doar în
   markup-ul panoului propriu al firmei; admin_firme_firme_editeaza.php
   nu are aceste atribute și are o coloană de acțiuni cu 4 butoane, nu 2,
   deci regulile de mai jos i-ar fi stricat vizualizarea pe mobil. */
@media (max-width: 899px) {
    .admin-firma-continut .admin-tabel-servicii, .admin-firma-continut .admin-tabel-anunturi, .admin-firma-continut .admin-tabel-faq { display: block; min-width: 0; }
    .admin-firma-continut .admin-tabel-servicii thead, .admin-firma-continut .admin-tabel-anunturi thead, .admin-firma-continut .admin-tabel-faq thead { display: none; }
    .admin-firma-continut .admin-tabel-servicii tbody, .admin-firma-continut .admin-tabel-anunturi tbody, .admin-firma-continut .admin-tabel-faq tbody,
    .admin-firma-continut .admin-tabel-servicii tr, .admin-firma-continut .admin-tabel-anunturi tr, .admin-firma-continut .admin-tabel-faq tr { display: block; }

    .admin-firma-continut .admin-tabel-servicii tr, .admin-firma-continut .admin-tabel-anunturi tr, .admin-firma-continut .admin-tabel-faq tr {
        border: 1px solid var(--bordura-soft);
        border-radius: var(--raza-mica);
        padding: 14px;
        margin-bottom: 12px;
    }
    .admin-firma-continut .admin-tabel-servicii tbody tr:last-child, .admin-firma-continut .admin-tabel-anunturi tbody tr:last-child, .admin-firma-continut .admin-tabel-faq tbody tr:last-child { margin-bottom: 0; }

    .admin-firma-continut .admin-tabel-servicii td, .admin-firma-continut .admin-tabel-anunturi td, .admin-firma-continut .admin-tabel-faq td {
        display: block;
        width: auto;
        min-width: 0;
        max-width: none;
        padding: 5px 0;
        border: 0;
        text-align: left !important;
    }

    /* Rândul de index (#) — fără sens într-un card, ascuns. Exclus
       rândul "gol" (colspan), care e și el nth-child(1) dar trebuie
       să rămână vizibil ("Niciun serviciu încă." etc.). */
    .admin-firma-continut .admin-tabel-servicii td:nth-child(1):not([colspan]), .admin-firma-continut .admin-tabel-faq td:nth-child(1):not([colspan]) { display: none; }

    /* Primul câmp de conținut (Nume/Titlu/Întrebare) — titlul cardului */
    .admin-firma-continut .admin-tabel-servicii td:nth-child(2), .admin-firma-continut .admin-tabel-anunturi td:nth-child(1), .admin-firma-continut .admin-tabel-faq td:nth-child(2) {
        font-weight: 700;
        font-size: 1rem;
        padding-top: 0;
    }

    /* Textul secundar (Descriere/Răspuns) — simplu, fără etichetă */
    .admin-firma-continut .admin-tabel-servicii td:nth-child(3), .admin-firma-continut .admin-tabel-faq td:nth-child(3) { color: var(--gri-text); }

    /* Câmpurile mici, cu etichetă (Principal/Stare/Publicat la) */
    .admin-firma-continut .admin-tabel-servicii td:nth-child(4),
    .admin-firma-continut .admin-tabel-anunturi td:nth-child(2), .admin-firma-continut .admin-tabel-anunturi td:nth-child(3),
    .admin-firma-continut .admin-tabel-faq td:nth-child(4) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.85rem;
    }
    .admin-firma-continut .admin-tabel-servicii td:nth-child(4)::before { content: "Principal"; color: var(--gri-text); }
    .admin-firma-continut .admin-tabel-servicii td[data-principal="0"] { display: none; }
    .admin-firma-continut .admin-tabel-anunturi td:nth-child(2)::before { content: "Stare"; color: var(--gri-text); }
    .admin-firma-continut .admin-tabel-anunturi td:nth-child(3)::before { content: "Publicat la"; color: var(--gri-text); }
    .admin-firma-continut .admin-tabel-faq td:nth-child(4)::before { content: "Stare"; color: var(--gri-text); }

    /* Rândul de acțiuni — separat printr-o linie, butoanele la dreapta */
    .admin-firma-continut .admin-tabel-servicii td:nth-child(5),
    .admin-firma-continut .admin-tabel-anunturi td:nth-child(4),
    .admin-firma-continut .admin-tabel-faq td:nth-child(5) {
        border-top: 1px solid var(--bordura-soft);
        margin-top: 10px;
        padding-top: 10px;
    }
    .admin-firma-continut .admin-tabel-servicii td:nth-child(5) .admin-actiuni-rand,
    .admin-firma-continut .admin-tabel-anunturi td:nth-child(4) .admin-actiuni-rand,
    .admin-firma-continut .admin-tabel-faq td:nth-child(5) .admin-actiuni-rand { justify-content: flex-end; }
}

.admin-program-ore input[type="time"] { width: 135px; }

/* Checkbox consistent PESTE TOT în admin — o singură regulă, nescopată */
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--verde); cursor: pointer; }
.admin-format-alegere { display: flex; gap: 16px; }

/* Checkbox + etichetă, aliniate pe același rând, oriunde apare acest tipar */
.admin-camp-bifa { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; font-weight: 600; color: var(--gri-text); cursor: pointer; }

/* Spațiere corectă în formularele din modale (servicii/FAQ/anunțuri):
   nu folosesc .admin-formular-grila (gap-ul de-acolo e gândit pentru
   grila de 2 coloane a formularelor de pe pagină), deci fără regula de
   mai jos, două .admin-camp/.admin-camp-bifa alăturate nu aveau NICIUN
   spațiu între ele — mai puțin decât gap-ul intern etichetă->câmp
   (5px), ceea ce arăta invers decât normal (etichetă apropiată de
   propriul câmp, dar câmpul la fel de apropiat de următoarea etichetă). */
.admin-modal .admin-camp + .admin-camp,
.admin-modal .admin-camp + .admin-camp-bifa,
.admin-modal .admin-camp-bifa + .admin-camp,
.admin-modal .admin-camp-bifa + .admin-camp-bifa { margin-top: 16px; }

/* Checkbox puțin mai rotunjit la colțuri — doar checkbox-ul, radio-ul
   rămâne cerc nativ neschimbat. */
input[type="checkbox"] { border-radius: 5px; }

/* Butoanele "+ Adaugă X" (servicii/anunțuri/FAQ) — pe modelul rotund de
   la delogare: rămân .buton-secundar (aceeași familie ca restul
   butoanelor), cu o insignă rotundă verde cu "+" alăturată în interior.
   Tot elementul (text + insignă) e UN singur <button>, nu text lângă o
   iconiță separată. */
.admin-buton-adauga { height: 36px; padding: 0 18px 0 8px; }
.admin-buton-adauga:not(:has(.admin-buton-plus)) { padding: 0 18px; }

@media (max-width: 899px) {
    .admin-card > .admin-pagina-cap { gap: 8px; margin-bottom: 20px; }
    .admin-card > .admin-pagina-cap > .admin-pagina-actiuni { width: 100%; }
    .admin-buton-adauga { width: 100%; }
}
.admin-buton-plus {
    width: 20px;
    height: 20px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--verde);
    color: var(--alb);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

/* Steluța "setează principală" — aprinsă verde cât timp poza e deja principală */
.admin-galerie-principal-activ { background: var(--verde-pal); border-color: var(--verde-mediu); color: var(--verde-inchis); }
.admin-galerie-principal-activ .admin-meniu-icon { fill: currentColor; }


/* ---------- Mobil: meniul devine sertar off-canvas ---------- */
@media (max-width: 899px) {
    .admin-topbar {
        display: flex;
        align-items: center;
        gap: 8px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 900;
        height: 56px;
        padding: 0 12px;
        background: var(--alb);
        border-bottom: 1px solid var(--bordura-soft);
    }

    .admin-buton-meniu {
        margin-left: auto;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 42px;
        height: 42px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        flex: none;
    }

    .admin-buton-meniu-linie {
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: var(--cerneala);
        transition: transform var(--tranzitie), opacity var(--tranzitie);
    }

    .admin-buton-meniu[aria-expanded="true"] .admin-buton-meniu-linie:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .admin-buton-meniu[aria-expanded="true"] .admin-buton-meniu-linie:nth-child(2) { opacity: 0; }
    .admin-buton-meniu[aria-expanded="true"] .admin-buton-meniu-linie:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .admin-meniu {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        height: auto;
        z-index: 1100;
        width: 264px;
        transform: translateX(-105%);
        transition: transform var(--tranzitie);
        box-shadow: var(--umbra-2);
        border-right: 0;
    }

    body.admin-meniu-deschis .admin-meniu { transform: none; }

    .admin-suprapunere {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: rgba(23, 24, 26, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--tranzitie);
    }

    body.admin-meniu-deschis .admin-suprapunere { opacity: 1; pointer-events: auto; }

    body.admin-meniu-deschis { overflow: hidden; }

    .admin-main { padding: 76px var(--spatiu-panou) var(--spatiu-panou); }
}

@media (prefers-reduced-motion: reduce) {
    .admin-meniu, .admin-suprapunere, .admin-buton-meniu-linie { transition: none; }
}

/* Grupare vizuală pe planuri (pagina de editare firmă) — rail colorat în
   stânga + insignă cu numele planului. Culorile urcă în intensitate cu
   nivelul planului, refolosind paleta deja existentă (nimic nou). */
.admin-plan-grup { border-left: 3px solid var(--bordura); padding-left: 20px; margin-top: var(--spatiu-panou); }
.admin-plan-grup:first-child { margin-top: 0; }
.admin-plan-grup > .admin-card { margin-top: var(--spatiu-panou); }
.admin-plan-grup > .admin-card:first-of-type { margin-top: 16px; }

.admin-plan-grup-cap { display: flex; align-items: center; gap: 10px; }

.admin-plan-insigna {
    display: inline-block;
    padding: 11px 18px;
    border-radius: var(--raza-mica);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--alb);
}
.admin-plan-grup-descriere { font-size: 0.85rem; color: var(--gri-text); }

.admin-plan-grup-starter { border-left-color: var(--gri-text); }
.admin-plan-insigna-starter { background: var(--gri-text); }

.admin-plan-grup-standard { border-left-color: var(--albastru); }
.admin-plan-insigna-standard { background: var(--albastru); }

.admin-plan-grup-pro { border-left-color: var(--visiniu); }
.admin-plan-insigna-pro { background: var(--visiniu); }

.admin-plan-grup-premium { border-left-color: var(--chihlimbar); }
.admin-plan-insigna-premium { background: var(--chihlimbar); }

/* ---------- Panoul propriu al firmei (administrare_firme.php) ---------- */

/* Fără meniu lateral -> conținutul se lățește nelimitat pe ecrane mari.
   Container centrat, DOAR pentru această pagină (nu atinge .admin-main
   de pe restul panoului de admin, care are nevoie de toată lățimea de
   lângă meniu). */
.admin-firma-continut { max-width: 1140px; margin: 0 auto; }

/* Dunga puțin mai groasă — pe .admin-main (comun tuturor paginilor de
   admin), deci la fel de groasă și pe admin_firme_home.php, și pe
   admin_firme_firme_editeaza.php, desktop ȘI mobil. */
.admin-main .admin-plan-grup { border-left-width: 5px; }

/* Pe mobil, caseta albă se simte înghesuită: lipim dunga de marginea
   stângă a ecranului și tragem marginea dreaptă a secțiunii ca să ajungă
   exact la 20px de marginea ecranului — la fel de mult cât e acum
   spațiul dintre dungă și caseta albă (.admin-plan-grup are
   padding-left: 20px, neschimbat). Scopat la .admin-main (comun tuturor
   paginilor de admin, deci acoperă ȘI admin_firme_firme_editeaza.php,
   nu doar panoul firmei) — antetul paginii și alerta de succes de
   deasupra rămân cu spațierea normală, neatinse. */
@media (max-width: 899px) {
    .admin-main-firma { padding-top: 28px; }
    .admin-main .admin-plan-grup {
        margin-left: calc(-1 * var(--spatiu-panou));
        margin-right: calc(20px - var(--spatiu-panou));
    }
}

/* Rândul insignă-plan + descriere se poate umple cu 2-3 elemente (insigna
   planului, descrierea, și la secțiunile blocate insigna "Necesită
   planul X") — fără flex-wrap, pe telefon depășește marginea paginii.
   Regulă separată, aditivă — nu schimbă .admin-plan-grup-cap de mai sus. */
.admin-plan-grup-cap { flex-wrap: wrap; }

/* ---------- Mesaj de succes — peste pagină, nu în fluxul normal ----------
   PESTE TOT în admin ȘI admin_firme (.admin-alerta-succes e clasă
   comună, deci o singură regulă aici acoperă orice pagină).
   Înainte stătea în susul paginii, în fluxul normal — dacă redirectul
   ajungea pe o ancoră mai jos (#program etc.), mesajul rămânea deasupra,
   nevăzut. Acum plutește peste conținut, la 30px de sus, indiferent unde
   ajunge pagina după redirect sau cât scrollează utilizatorul.
   S-a schimbat DOAR .admin-alerta-succes — nu și -eroare/-info/
   -avertisment, care rămân contextuale (validare lângă formularul la
   care se referă), nu notificare globală; dacă vrei tratamentul ăsta și
   pentru vreuna din ele, spune-mi care anume.
   NOTĂ: "position: absolute" nu rezolva problema — s-ar poziționa față
   de pagină, deci ar dispărea din ecran la fel după scroll la ancoră.
   "position: fixed" rămâne fixat față de FEREASTRĂ -> vizibil mereu. */
.admin-alerta-succes {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    width: calc(100% - 40px);
    max-width: 480px;
    box-shadow: var(--umbra-2);
    animation: admin-alerta-succes-durata 3s ease-in forwards;
}

/* Vizibil aproape toate cele 3 secunde, apoi dispare rapid (ultimele
   ~0.3s) — doar opacity, ca la restul animațiilor din admin. */
@keyframes admin-alerta-succes-durata {
    0%, 90% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-alerta-succes { animation: none; }
}

/* ---------- Lista de recenzii (panoul firmei) ----------
   Rânduri spațiate + linie de delimitare, aceeași ritmică vizuală ca la
   rândurile din tabelele de servicii/anunțuri/FAQ (padding + o singură
   bordură, nu dublată la primul rând). Numele autorului avea implicit
   mărimea textului obișnuit (doar <strong>, fără clasă) — concura vizual
   cu H2-ul cardului ("Recenzii"); acum e clar mai mic decât acesta. */
.admin-recenzie-rand { padding: 16px 0; border-top: 1px solid var(--bordura-soft); }
.admin-recenzie-rand:first-child { padding-top: 0; border-top: 0; }
.admin-recenzie-cap { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.admin-recenzie-nume { font-size: 0.95rem; font-weight: 700; }
/* Stelele aici imită .firma-stele din frontend (verde, caractere text)
   — nu convenția amber/SVG a admin-ului (.admin-stea-plina) — fiindcă
   firma își vede aici recenziile exact cum le văd și clienții ei pe
   pagina publică, nu ca-ntr-un ecran de moderare intern. */
.admin-recenzie-stele { color: var(--verde); font-size: 1rem; letter-spacing: 1px; }
.admin-recenzie-text { margin: 8px 0 0; }

/* Bulă cu emailul contului, cu butonul de delogare integrat în ea (nu
   alăturat, ca formă separată) — un singur control, nu o insignă
   rotunjită-999px lângă un cerc, care arătau incoerent puse una lângă
   alta. */
.admin-utilizator-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 5px 0 14px;
    border-radius: var(--raza-mica);
    border: 1px solid var(--bordura);
    background: var(--alb);
}
.admin-utilizator-chip > .admin-meniu-icon { width: 15px; height: 15px; flex: none; color: var(--gri-text); }
.admin-utilizator-chip > span { font-size: 0.85rem; font-weight: 600; color: var(--cerneala); white-space: nowrap; }

.admin-buton-delogare {
    width: 26px;
    height: 26px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 0;
    background: var(--fundal);
    color: var(--gri-text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--tranzitie), color var(--tranzitie);
}
.admin-buton-delogare .admin-meniu-icon { width: 13px; height: 13px; }
.admin-buton-delogare:hover { background: #FAEDEA; color: var(--rosu); }

/* Pe mobil: bula de email întâi, singură pe rând, aliniată dreapta —
   H1 + subtitlul încep pe rândul următor. Scopat la antetul principal
   (.admin-pagina-cap-principal), NU la .admin-pagina-cap generic, ca să
   nu reordoneze și anteturile cardurilor (Servicii/Galerie/etc., care
   au H2 + buton "+ Adaugă", nu H1 + bulă de utilizator). */
@media (max-width: 899px) {
    .admin-pagina-cap-principal { flex-wrap: wrap; }
    .admin-pagina-cap-principal > .admin-pagina-actiuni { order: -1; width: 100%; justify-content: flex-end; margin-bottom: 10px; }
}

/* Răspunsul firmei: textarea + buton pe același rând pe desktop; pe
   mobil, sub textarea (ca înainte), cu textarea puțin mai înaltă. */
.admin-recenzie-raspuns-rand { display: flex; align-items: flex-end; gap: 10px; }
.admin-recenzie-raspuns-rand .buton-secundar { flex: none; }
.admin-recenzie-raspuns { flex: 1; min-width: 0; height: 60px; }

@media (max-width: 700px) {
    .admin-recenzie-raspuns-rand { flex-direction: column; align-items: stretch; }
    .admin-recenzie-raspuns { height: 130px; }
}