/* ===========================================================================
   style.css — Ofertare ComStore & ExpoTigla

   Limbajul vizual e același cu al aplicației bugete.laurenoptique.ro (cerut
   explicit): fundal rece, foarte deschis, panouri albe cu colțuri moi și
   chenar fin, cifra care răspunde întrebării paginii cea mai mare, restul
   coborând brusc în scară. Tipografia e tot IBM Plex (Sans pentru text,
   Condensed pentru cifrele mari).

   Identitatea e a celor două firme: auriul brandului pe acțiuni și pe
   elementul activ, ardezia din logo-uri pe text. Graficele au paleta lor,
   separată de brand: indigo pentru ofertat, teal pentru vândut, roșu pentru
   pierdut — ca în bugete, unde culoarea unui grafic spune ce e seria.

   Paginile ocupă TOATĂ lățimea de lângă bara laterală: fără coloană cu
   lățime maximă și bandă goală în dreapta.

   Cuprins
     1. Jetoane și temă          7. Tabele, liste, insigne
     2. Reset și tipografie      8. Carduri, KPI, grafice
     3. Structura paginii        9. Editorul de ofertă și cartușul
     4. Navigație               10. Dialoguri, toast-uri, autentificare
     5. Butoane                 11. Responsive
     6. Formulare               12. Mișcare și imprimare
   =========================================================================== */

/* 1. JETOANE ȘI TEMĂ ------------------------------------------------------- */

:root {
    --fundal:      #F5F6F9;
    --panou:       #FFFFFF;
    --card:        #FFFFFF;
    --card-2:      #F0F2F6;
    --linie:       rgba(22, 27, 38, .11);
    --linie-tare:  rgba(22, 27, 38, .20);

    --text:        #1B2029;   /* ardezia din logo-ul ComStore, adâncită */
    --slab:        #5A6170;
    --mai-slab:    #878E9B;

    /* Auriul brandului. „--aur” e fundalul acțiunii principale (închis destul
       cât textul alb să treacă pragul AA); „--aur-text” e pentru text și
       iconițe active; „--aur-slab” pentru fundaluri. */
    --aur:         #9A6906;
    --aur-hover:   #B07A0B;
    --aur-text:    #8A6106;
    --aur-viu:     #C2890B;
    --aur-slab:    rgba(194, 137, 11, .13);
    --aur-linie:   rgba(194, 137, 11, .38);

    /* Paleta graficelor — ca în bugete. */
    --g-ofertat:   #6D5BD0;
    --g-vandut:    #2E9C8F;
    --g-pierdut:   #D0515E;
    --g-linie:     #1F9D63;
    --g-neutru:    #A6ACB8;

    /* Stările ofertei și semaforul. */
    --verde:       #17915C;
    --verde-slab:  rgba(23, 145, 92, .12);
    --galben:      #B57614;
    --galben-slab: rgba(181, 118, 20, .13);
    --rosu:        #C8354A;
    --rosu-slab:   rgba(200, 53, 74, .11);
    --albastru:    #3767A6;
    --albastru-slab: rgba(55, 103, 166, .12);

    --r-card:   14px;
    --r-ctrl:   9px;
    --r-mic:    6px;
    --r-pilula: 999px;

    --umbra-plutire: 0 12px 32px -8px rgba(22, 27, 38, .18), 0 2px 6px rgba(22, 27, 38, .06);

    --bara:    260px;
    --gutiera: 28px;

    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-tema="clar"]) {
        --fundal:      #0C0E13;
        --panou:       #13161D;
        --card:        #181C25;
        --card-2:      #212632;
        --linie:       rgba(255, 255, 255, .09);
        --linie-tare:  rgba(255, 255, 255, .18);
        --text:        #ECEEF3;
        --slab:        #A3AAB8;
        --mai-slab:    #707888;
        --aur:         #D29B26;
        --aur-hover:   #E1AE43;
        --aur-text:    #E3B24C;
        --aur-viu:     #E3B24C;
        --aur-slab:    rgba(227, 178, 76, .15);
        --aur-linie:   rgba(227, 178, 76, .36);
        --g-ofertat:   #9A8BF0;
        --g-vandut:    #4FC3B4;
        --g-pierdut:   #EE7682;
        --g-linie:     #45C889;
        --g-neutru:    #5C6475;
        --verde:       #3FBF7F;  --verde-slab:  rgba(63, 191, 127, .15);
        --galben:      #E0A94B;  --galben-slab: rgba(224, 169, 75, .15);
        --rosu:        #E8616A;  --rosu-slab:   rgba(232, 97, 106, .15);
        --albastru:    #7EA9E0;  --albastru-slab: rgba(126, 169, 224, .15);
        --umbra-plutire: 0 16px 40px -10px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .35);
        color-scheme: dark;
    }
}

:root[data-tema="intunecat"] {
    --fundal:      #0C0E13;
    --panou:       #13161D;
    --card:        #181C25;
    --card-2:      #212632;
    --linie:       rgba(255, 255, 255, .09);
    --linie-tare:  rgba(255, 255, 255, .18);
    --text:        #ECEEF3;
    --slab:        #A3AAB8;
    --mai-slab:    #707888;
    --aur:         #D29B26;
    --aur-hover:   #E1AE43;
    --aur-text:    #E3B24C;
    --aur-viu:     #E3B24C;
    --aur-slab:    rgba(227, 178, 76, .15);
    --aur-linie:   rgba(227, 178, 76, .36);
    --g-ofertat:   #9A8BF0;
    --g-vandut:    #4FC3B4;
    --g-pierdut:   #EE7682;
    --g-linie:     #45C889;
    --g-neutru:    #5C6475;
    --verde:       #3FBF7F;  --verde-slab:  rgba(63, 191, 127, .15);
    --galben:      #E0A94B;  --galben-slab: rgba(224, 169, 75, .15);
    --rosu:        #E8616A;  --rosu-slab:   rgba(232, 97, 106, .15);
    --albastru:    #7EA9E0;  --albastru-slab: rgba(126, 169, 224, .15);
    --umbra-plutire: 0 16px 40px -10px rgba(0, 0, 0, .6), 0 2px 8px rgba(0, 0, 0, .35);
    color-scheme: dark;
}

/* 2. RESET ȘI TIPOGRAFIE --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: var(--fundal); scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--fundal);
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -.011em; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.125rem; }
h3 { font-size: .975rem; }
p  { margin: 0 0 .75em; }
p:last-child { margin-bottom: 0; }

a { color: var(--aur-text); text-decoration-color: color-mix(in srgb, var(--aur-text) 35%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .875em; background: var(--card-2); padding: .1em .4em; border-radius: var(--r-mic); }
hr { border: 0; border-top: 1px solid var(--linie); margin: 18px 0; }
img { max-width: 100%; }

/* Cifrele mari: familia condensată, cu „lei” în corp mic. */
.cifra { font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.cifra-xl { font-size: clamp(2.1rem, 3.3vw, 3rem); }
.cifra-l  { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.cifra-m  { font-size: 1.3rem; }
.cifra .unitate { font-size: .46em; font-weight: 600; color: var(--slab); margin-left: .18em; letter-spacing: 0; }

.slab     { color: var(--slab); }
.mai-slab { color: var(--mai-slab); }
.mic      { font-size: .8125rem; }
.cifre    { font-variant-numeric: tabular-nums; }
.dreapta  { text-align: right; }
.centru   { text-align: center; }
.nowrap   { white-space: nowrap; }
.pozitiv  { color: var(--verde); }
.negativ  { color: var(--rosu); }
.vizual-ascuns { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ico    { width: 18px; height: 18px; flex: none; vertical-align: -.2em; }
.ico-14 { width: 14px; height: 14px; }
.ico-16 { width: 16px; height: 16px; }
.ico-20 { width: 20px; height: 20px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--aur-viu);
    outline-offset: 2px;
    border-radius: var(--r-ctrl);
    box-shadow: 0 0 0 5px var(--aur-slab);
}

.sari-la-continut {
    position: absolute; left: -9999px; top: 8px; z-index: 200;
    background: var(--aur); color: #fff; padding: 10px 18px; border-radius: var(--r-ctrl); font-weight: 600;
}
.sari-la-continut:focus { left: 8px; }

/* Cele două logo-uri, egale și alăturate, despărțite de o linie subțire. */
.logo-duo { display: inline-flex; align-items: center; gap: 12px; }
.logo-duo img { height: 40px; width: auto; display: block; }
.logo-duo-linie { width: 1px; align-self: stretch; background: var(--linie-tare); margin: 3px 0; }
/* Pe fundal închis, logo-urile (desenate pe alb) stau pe o plăcuță albă. */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="clar"]) .logo-duo { background: #fff; border-radius: var(--r-ctrl); padding: 6px 10px; }
    :root:not([data-tema="clar"]) .logo-duo-linie { background: #D3D8DD; }
}
:root[data-tema="intunecat"] .logo-duo { background: #fff; border-radius: var(--r-ctrl); padding: 6px 10px; }
:root[data-tema="intunecat"] .logo-duo-linie { background: #D3D8DD; }

/* 3. STRUCTURA PAGINII ----------------------------------------------------- */

.aplicatie {
    display: grid;
    grid-template-columns: var(--bara) minmax(0, 1fr);
    min-height: 100vh;
    min-height: 100svh;
}

/* Conținutul ocupă tot spațiul de lângă bara laterală: fără lățime maximă. */
.continut { min-width: 0; padding: 0 var(--gutiera) 96px; }
.fundal-meniu { display: none; }

.antet {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 18px 0 16px; margin-bottom: 20px;
    background: color-mix(in srgb, var(--fundal) 88%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--linie);
}
.antet-titlu { flex: 1 1 260px; min-width: 0; }
.antet-titlu h1 { display: flex; align-items: center; gap: 10px; }
.antet-titlu .sub { color: var(--slab); font-size: .875rem; margin: 2px 0 0; }
.antet-actiuni { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bara-mobil-sus, .meniu-inchide { display: none; }
.text-scurt { display: none; }
.inapoi { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; color: var(--slab); text-decoration: none; margin-bottom: 3px; }
.inapoi:hover { color: var(--text); }

main#continut { display: block; }

/* Grila de 12 coloane pentru paginile cu mai multe panouri. */
.grila { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; align-items: start; }
.grila > * { min-width: 0; grid-column: span 12; }
.col-9 { grid-column: span 9 !important; }
.col-8 { grid-column: span 8 !important; }
.col-7 { grid-column: span 7 !important; }
.col-6 { grid-column: span 6 !important; }
.col-5 { grid-column: span 5 !important; }
.col-4 { grid-column: span 4 !important; }
.col-3 { grid-column: span 3 !important; }
.stiva { display: flex; flex-direction: column; gap: 16px; }
.doua-coloane { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.grila + .grila, .stiva + .grila, .grila + .stiva, .grila-kpi + .grila { margin-top: 16px; }

/* Rândul de cifre: carduri KPI, o singură unitate de citit. */
.grila-kpi { display: grid; gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grila-kpi.cinci { display: flex; flex-wrap: wrap; }
.grila-kpi.cinci > * { flex: 1 1 210px; min-width: 0; }

/* 4. NAVIGAȚIE ------------------------------------------------------------- */

.bara-laterala {
    position: sticky; top: 0; height: 100vh; height: 100svh;
    display: flex; flex-direction: column;
    background: var(--panou); border-right: 1px solid var(--linie);
}

.marca { display: block; padding: 20px 16px 14px 18px; text-decoration: none; color: inherit; }
.marca .logo-duo { gap: 12px; }
.marca .logo-duo img { height: 54px; }
.marca-sub { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .75rem; color: var(--mai-slab); }
.marca-insigna {
    display: inline-block; font-size: .72rem; font-weight: 600; line-height: 1;
    color: var(--panou); background: var(--text); padding: 5px 9px; border-radius: var(--r-pilula);
}

.nav { flex: 1; overflow-y: auto; padding: 4px 10px 16px; }
.nav-grup + .nav-grup { margin-top: 18px; }
.nav-grup-titlu { font-size: .75rem; color: var(--mai-slab); font-weight: 500; padding: 0 10px 6px; }
.nav a {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: var(--r-ctrl);
    color: var(--slab); text-decoration: none; font-size: .9rem; font-weight: 500;
}
.nav a:hover { background: var(--card-2); color: var(--text); }
.nav a[aria-current="page"] { background: var(--aur-slab); color: var(--aur-text); font-weight: 600; }
.nav a[aria-current="page"] .ico { color: var(--aur-text); }
.nav-numar {
    margin-left: auto; font-size: .75rem; font-weight: 600;
    background: var(--rosu); color: #fff; padding: 1px 7px; border-radius: var(--r-pilula);
}

.bara-cont { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--linie); }
.bara-cont-nume { flex: 1; min-width: 0; font-size: .8125rem; line-height: 1.25; text-decoration: none; color: inherit; }
.bara-cont-nume strong { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bara-cont-nume span { display: block; color: var(--mai-slab); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.nav-mobil { display: none; }

/* 5. BUTOANE --------------------------------------------------------------- */

.buton {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 9px 15px; border: 1px solid transparent; border-radius: var(--r-ctrl);
    font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.3;
    text-decoration: none; cursor: pointer; white-space: nowrap;
    background: var(--card-2); color: var(--text);
    transition: background .12s ease, border-color .12s ease;
}
.buton:hover { background: color-mix(in srgb, var(--card-2) 70%, var(--linie)); color: var(--text); }
.buton:disabled, .buton[aria-disabled="true"] { opacity: .5; pointer-events: none; }

.buton-primar { background: var(--aur); color: #fff; }
.buton-primar:hover { background: var(--aur-hover); color: #fff; }
:root[data-tema="intunecat"] .buton-primar, :root[data-tema="intunecat"] .buton-primar:hover { color: #1B1405; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="clar"]) .buton-primar, :root:not([data-tema="clar"]) .buton-primar:hover { color: #1B1405; }
}

.buton-fantoma { background: transparent; border-color: var(--linie-tare); color: var(--text); }
.buton-fantoma:hover { background: var(--card-2); }
.buton-pericol { background: transparent; border-color: color-mix(in srgb, var(--rosu) 55%, transparent); color: var(--rosu); }
.buton-pericol:hover { background: var(--rosu-slab); color: var(--rosu); }
.buton-vandut { background: transparent; border-color: color-mix(in srgb, var(--verde) 55%, transparent); color: var(--verde); }
.buton-vandut:hover { background: var(--verde-slab); color: var(--verde); }

.buton-mic { padding: 6px 11px; font-size: .8125rem; gap: 5px; }
.buton-iconita { padding: 8px; }
.buton-mic.buton-iconita { padding: 6px; }
.buton-lat { width: 100%; }

/* Comutatorul de perioadă: un singur obiect, cu opțiunile lipite. */
.grup-butoane {
    display: inline-flex; max-width: 100%;
    border: 1px solid var(--linie); border-radius: var(--r-ctrl); background: var(--panou);
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
}
.grup-butoane::-webkit-scrollbar { display: none; }
.grup-butoane > * { flex: none; }
.grup-butoane a {
    padding: 7px 13px; font-size: .8125rem; font-weight: 500;
    border-right: 1px solid var(--linie); color: var(--slab); text-decoration: none;
}
.grup-butoane > :last-child { border-right: 0; }
.grup-butoane a:hover { background: var(--card-2); color: var(--text); }
.grup-butoane [aria-current="true"] { background: var(--aur-slab); color: var(--aur-text); font-weight: 600; }
.selector-perioada { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.selector-perioada .grup-butoane { min-width: 0; }
.selector-perioada input[type="date"], .selector-perioada select { width: auto; padding: 6px 10px; font-size: .8125rem; }
.selector-perioada select { padding-right: 32px; }

.actiuni-rand { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.actiuni-formular { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; padding-top: 16px; margin-top: 4px; border-top: 1px solid var(--linie); }

/* Comutatorul de temă arată ce se întâmplă dacă îl apeși: luna în tema
   clară, soarele în cea întunecată (ca în bugete). */
.doar-intunecat { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="clar"]) .doar-clar { display: none; }
    :root:not([data-tema="clar"]) .doar-intunecat { display: inline-block; }
}
:root[data-tema="intunecat"] .doar-clar { display: none; }
:root[data-tema="intunecat"] .doar-intunecat { display: inline-block; }

/* 6. FORMULARE ------------------------------------------------------------- */

.camp { display: block; margin-bottom: 15px; min-width: 0; }
.camp > span:first-child { display: block; font-size: .8125rem; font-weight: 500; color: var(--slab); margin-bottom: 5px; }
.camp .ajutor { display: block; font-size: .8125rem; color: var(--mai-slab); margin-top: 4px; font-weight: 400; }
.eroare-camp { display: block; font-size: .8125rem; color: var(--rosu); margin-top: 4px; font-weight: 500; }

input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="search"], input[type="month"], input:not([type]), select, textarea {
    width: 100%; padding: 9px 12px;
    font: inherit; font-size: .9375rem; color: var(--text);
    background: var(--panou); border: 1px solid var(--linie-tare); border-radius: var(--r-ctrl);
    font-variant-numeric: tabular-nums;
}
textarea { min-height: 80px; resize: vertical; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--mai-slab); }
input:hover, select:hover, textarea:hover { border-color: var(--aur-linie); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--aur-viu); box-shadow: 0 0 0 4px var(--aur-slab); }
input[readonly], input:disabled, select:disabled, textarea:disabled { background: var(--card-2); color: var(--slab); }
input.cifre { text-align: right; }
[aria-invalid="true"] { border-color: var(--rosu) !important; }

select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 1px), calc(100% - 12px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
    padding-right: 34px;
}

.bifa { display: inline-flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: .875rem; font-weight: 500; }
.bifa input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; accent-color: var(--aur); }

.formular-grila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.formular-grila.trei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formular-grila .lat { grid-column: 1 / -1; }
.formular-ingust { max-width: 640px; }
fieldset { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
legend { font-weight: 600; font-size: .9375rem; padding: 0; margin-bottom: 10px; }

/* Filtrele listelor: un card propriu, pe toată lățimea. */
.filtre {
    display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
    background: var(--card); border: 1px solid var(--linie); border-radius: var(--r-card);
    padding: 14px 16px; margin-bottom: 16px;
}
.filtre .camp { margin-bottom: 0; }
.filtre .camp input, .filtre .camp select { min-width: 130px; }
.filtre .camp-cautare { flex: 1 1 240px; }
.filtre-comutator { display: none; }
.filtre-comutator .numar { font-size: .75rem; font-weight: 600; color: #fff; background: var(--aur); border-radius: var(--r-pilula); padding: 1px 7px; }

.caseta { padding: 13px 16px; border-radius: var(--r-card); font-size: .875rem; border: 1px solid var(--linie); background: var(--card); margin-bottom: 16px; }
.caseta > :last-child { margin-bottom: 0; }
.caseta ul { margin: 4px 0 0; padding-left: 18px; }
.caseta-eroare { background: var(--rosu-slab); border-color: color-mix(in srgb, var(--rosu) 34%, transparent); color: var(--rosu); }
.caseta-ok { background: var(--verde-slab); border-color: color-mix(in srgb, var(--verde) 34%, transparent); color: var(--verde); }
.caseta-aur { background: var(--aur-slab); border-color: var(--aur-linie); color: var(--text); }

/* 7. TABELE, LISTE, INSIGNE ------------------------------------------------ */

.tabel-cadru { overflow-x: auto; }
table.tabel { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tabel th {
    text-align: left; font-weight: 500; font-size: .75rem; color: var(--slab);
    padding: 10px 14px; border-bottom: 1px solid var(--linie); background: var(--card-2); white-space: nowrap;
}
.tabel th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.tabel th a:hover { color: var(--text); }
.tabel th[aria-sort="ascending"] a::after { content: '↑'; }
.tabel th[aria-sort="descending"] a::after { content: '↓'; }
.tabel td { padding: 11px 14px; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover td { background: var(--card-2); }
.tabel .num { text-align: right; white-space: nowrap; }
.tabel .actiuni { text-align: right; white-space: nowrap; width: 1%; }
.tabel .actiuni .actiuni-rand { flex-wrap: nowrap; }
.tabel .subtitlu-celula { display: block; font-size: .8125rem; color: var(--mai-slab); }
.tabel a.rand-link { color: var(--text); text-decoration: none; font-weight: 600; }
.tabel a.rand-link:hover { color: var(--aur-text); text-decoration: underline; }
.tabel tfoot td { font-weight: 700; background: var(--card-2); border-top: 2px solid var(--linie-tare); border-bottom: 0; }
.tabel-compact th, .tabel-compact td { padding: 9px 10px; }
.rand-inactiv td { color: var(--mai-slab); }
.rand-ales td { background: var(--aur-slab); }
/* Avatar + nume, pe un rând. */
.persoana { display: flex; align-items: center; gap: 12px; min-width: 0; }
.persoana > div { min-width: 0; }
.numar-oferta { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: .01em; }

/* Insignele de status: complet rotunde. */
.insigna {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: var(--r-pilula);
    font-size: .75rem; font-weight: 600; white-space: nowrap;
    background: var(--card-2); color: var(--slab); border: 1px solid transparent;
}
.insigna::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-ciorna    { background: transparent; color: var(--slab); border-color: var(--linie-tare); }
.st-emisa     { background: var(--albastru-slab); color: var(--albastru); }
.st-castigata { background: var(--verde-slab); color: var(--verde); }
.st-pierduta  { background: var(--rosu-slab); color: var(--rosu); }
.st-expirata  { background: transparent; color: var(--galben); border: 1px dashed color-mix(in srgb, var(--galben) 60%, transparent); }
.st-activ     { background: var(--verde-slab); color: var(--verde); }
.st-inactiv   { background: transparent; color: var(--mai-slab); border-color: var(--linie-tare); }
.st-lead-nou         { background: var(--aur-slab); color: var(--aur-text); }
.st-lead-in_discutie { background: var(--albastru-slab); color: var(--albastru); }
.st-lead-ofertat     { background: color-mix(in srgb, var(--g-ofertat) 13%, transparent); color: var(--g-ofertat); }
.st-lead-castigat    { background: var(--verde-slab); color: var(--verde); }
.st-lead-pierdut     { background: var(--rosu-slab); color: var(--rosu); }

.marca-modificat { display: inline-block; font-size: .75rem; color: var(--aur-text); border-bottom: 1px dotted var(--aur-text); line-height: 1.1; cursor: help; }

/* Tab-urile listelor. */
.taburi { display: flex; gap: 2px; border-bottom: 1px solid var(--linie); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.taburi::-webkit-scrollbar { display: none; }
.taburi a { flex: none; }
.taburi a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; color: var(--slab); text-decoration: none; font-weight: 500; font-size: .9rem;
    border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.taburi a:hover { color: var(--text); }
.taburi a[aria-current="page"] { color: var(--text); border-bottom-color: var(--aur-viu); font-weight: 600; }
.taburi .numar { font-size: .75rem; font-weight: 600; color: var(--mai-slab); background: var(--card-2); border-radius: var(--r-pilula); padding: 0 7px; }

.paginare { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--linie); font-size: .8125rem; color: var(--slab); }

.gol { text-align: center; padding: 44px 24px; color: var(--slab); }
.gol .ico { width: 32px; height: 32px; color: var(--mai-slab); margin-bottom: 8px; }
.gol p { max-width: 46ch; margin: 0 auto 14px; font-size: .9rem; }

/* Listele scurte din panouri. */
.lista { list-style: none; margin: 0; padding: 0; }
.lista li { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-bottom: 1px solid var(--linie); }
.lista li:last-child { border-bottom: 0; }
.lista .principal { flex: 1; min-width: 0; }
.lista .principal strong, .lista .principal a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .principal a { color: var(--text); text-decoration: none; font-weight: 500; font-size: .9rem; }
.lista .principal a:hover { color: var(--aur-text); }
.lista .principal a .numar-oferta { color: var(--slab); margin-right: 6px; font-weight: 500; }
.lista .principal span { display: block; font-size: .8125rem; color: var(--mai-slab); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Pătratul cu iconiță din fața unui rând de listă, ca în bugete. */
.pastila-iconita {
    display: grid; place-items: center; width: 34px; height: 34px; flex: none;
    border-radius: 10px; color: var(--c, var(--slab));
    background: color-mix(in srgb, var(--c, var(--slab)) 14%, transparent);
}

.fisa { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.fisa dt { color: var(--slab); font-size: .8125rem; padding-top: 2px; }
.fisa dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

.avatar {
    display: inline-grid; place-items: center; flex: none;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--text); color: var(--panou);
    font-weight: 600; font-size: .875rem; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-mare { width: 96px; height: 96px; font-size: 1.9rem; }

.cartela { display: flex; gap: 18px; align-items: center; border: 1px solid var(--linie); border-radius: var(--r-card); padding: 16px; background: var(--card); }
.cartela .avatar { width: 88px; height: 88px; font-size: 1.75rem; }
.cartela-text { line-height: 1.4; min-width: 0; }
.cartela-text .mic { color: var(--mai-slab); }
.cartela-text strong { display: block; font-size: 1.1rem; }
.cartela-text .tel { font-weight: 700; font-size: 1.1rem; color: var(--aur-text); }

.istoric { list-style: none; margin: 0; padding: 0; }
.istoric li { position: relative; padding: 0 0 14px 20px; font-size: .875rem; }
.istoric li::before { content: ''; position: absolute; left: 4px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--aur-viu); }
.istoric li::after { content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; width: 1px; background: var(--linie); }
.istoric li:last-child::after { display: none; }
.istoric .cand { display: block; font-size: .8125rem; color: var(--mai-slab); }

.linii-citire .grup td { font-weight: 600; font-size: .8125rem; color: var(--aur-text); background: var(--card-2); }
.jurnal-detalii { font-size: .8125rem; color: var(--slab); max-width: 460px; overflow-wrap: anywhere; }
.parola-generata { font-weight: 700; font-size: 1.1rem; letter-spacing: .04em; background: var(--panou); padding: 4px 10px; border-radius: var(--r-ctrl); border: 1px dashed var(--aur-viu); user-select: all; }
.logo-partener { height: 30px; width: auto; max-width: 120px; object-fit: contain; display: block; }
.previzualizare-coperta { max-width: 100%; max-height: 160px; border-radius: var(--r-ctrl); border: 1px solid var(--linie); display: block; margin-bottom: 8px; }

/* 8. CARDURI, KPI, GRAFICE ------------------------------------------------- */

.panou, .card {
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--linie);
    border-radius: var(--r-card);
}
.panou { overflow: hidden; }
.card { padding: 18px; }
.panou-antet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 16px 18px 12px; }
.panou-antet h2 { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 1.0625rem; }
.panou-antet h2 .ico { color: var(--slab); }
.panou-antet .sub { width: 100%; margin: -6px 0 0; font-size: .8125rem; color: var(--slab); }
.panou-antet + .tabel-cadru, .panou-antet + .lista, .panou-antet + form.panou-corp { border-top: 1px solid var(--linie); }
.panou-antet + form.panou-corp { padding-top: 16px; }
.panou-corp { padding: 4px 18px 18px; }
.panou-corp > :last-child { margin-bottom: 0; }
.panou > .panou-corp:first-child { padding-top: 18px; }
.panou-subsol { padding: 12px 18px; border-top: 1px solid var(--linie); background: var(--card-2); }

/* Cardul KPI: etichetă mică, cifră mare, context mic. Trei trepte. */
.kpi { display: flex; flex-direction: column; gap: 8px; }
.kpi-eticheta { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--slab); font-weight: 500; }
.kpi-eticheta .ico { color: var(--mai-slab); }
.kpi-valoare { color: var(--text); }
.kpi-jos { display: flex; align-items: center; gap: 6px; font-size: .8125rem; color: var(--slab); min-height: 20px; flex-wrap: wrap; }
.kpi-variatie { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.kpi-accent-aur { border-color: var(--aur-linie); }
.kpi-accent-verde { border-color: color-mix(in srgb, var(--verde) 34%, var(--linie)); }
.kpi-accent-rosu { border-color: color-mix(in srgb, var(--rosu) 34%, var(--linie)); }

/* Bara țintei, cu cifrele deasupra. */
.progres { height: 10px; background: var(--card-2); border-radius: var(--r-pilula); overflow: hidden; }
.progres > span { display: block; height: 100%; background: var(--aur-viu); border-radius: var(--r-pilula); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.tinta-cifre { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; gap: 12px; flex-wrap: wrap; }

/* Irisul: graficul inel cu legenda alături, ca în bugete. */
.iris { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.iris-desen { position: relative; flex: none; width: 200px; height: 200px; }
.iris-desen svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.iris-pupila { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding: 0 36px; }
.iris-pupila .eticheta { font-size: .75rem; color: var(--slab); font-weight: 500; margin-bottom: 3px; line-height: 1.2; }
.iris-felie { transition: opacity .12s ease; }
.iris-felie:hover { opacity: .78; }
.iris-legenda { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.iris-legenda > div {
    display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto;
    align-items: center; gap: 10px; padding: 5px 8px; border-radius: var(--r-mic); font-size: .875rem;
}
.iris-legenda > div:hover { background: var(--card-2); }
.iris-punct { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
.iris-nume { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iris-suma { font-weight: 600; white-space: nowrap; }
.iris-procent { color: var(--mai-slab); font-size: .8125rem; min-width: 38px; text-align: right; }

.grafic { width: 100%; height: auto; overflow: visible; display: block; }
.grafic text { font-size: 11px; fill: var(--mai-slab); font-variant-numeric: tabular-nums; font-family: inherit; }
.grafic .axa { stroke: var(--linie-tare); stroke-width: 1; }
.grafic .grila-linie { stroke: var(--linie); stroke-dasharray: 2 4; }
.grafic .bara-ofertat { fill: var(--g-ofertat); }
.grafic .bara-vandut  { fill: var(--g-vandut); }
.grafic .bara-pierdut { fill: var(--g-pierdut); }
.grafic .bara-neutru  { fill: var(--g-neutru); }
.grafic .linie-pierdut { fill: none; stroke: var(--g-pierdut); stroke-width: 2; stroke-linejoin: round; }
.grafic .punct-pierdut { fill: var(--g-pierdut); }
.grafic .linie-conversie { fill: none; stroke: var(--g-linie); stroke-width: 2; stroke-linejoin: round; }
.grafic .punct-conversie { fill: var(--g-linie); }
.grafic rect, .grafic circle { transition: opacity .12s ease; }
.grafic .interactiv:hover { opacity: .75; }

.legenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .8125rem; color: var(--slab); margin-top: 10px; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.legenda i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); }

/* Barele orizontale (consultanți, motive, categorii). */
.bara-orizontala { display: grid; grid-template-columns: minmax(90px, 170px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; font-size: .875rem; }
.bara-orizontala .nume { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bara-orizontala .pista { height: 9px; background: var(--card-2); border-radius: var(--r-pilula); overflow: hidden; display: flex; }
.bara-orizontala .pista span { display: block; height: 100%; background: var(--c, var(--g-vandut)); }
.bara-orizontala .valoare { font-weight: 600; white-space: nowrap; text-align: right; }

.conversie-rand { display: flex; align-items: center; gap: 8px; min-width: 96px; }
.conversie-rand .pista { flex: 1; height: 6px; background: var(--card-2); border-radius: var(--r-pilula); overflow: hidden; }
.conversie-rand .pista span { display: block; height: 100%; background: var(--g-vandut); border-radius: var(--r-pilula); }

/* „Ce aveți de făcut” pe dashboard-ul consultantului. */
.de-facut li { gap: 14px; }
.de-facut .termen { font-size: .8125rem; font-weight: 600; white-space: nowrap; color: var(--slab); }
.de-facut .termen.urgent { color: var(--rosu); }
.de-facut .valoare { font-weight: 700; white-space: nowrap; }

/* 9. EDITORUL DE OFERTĂ ȘI CARTUȘUL ---------------------------------------- */

.editor-grila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); gap: 16px; align-items: start; }
.editor-stanga { container-type: inline-size; container-name: linii; }
.editor-lipit { position: sticky; top: 104px; }
.editor-bara-mobil { display: none; }

.comutator { display: inline-flex; border: 1px solid var(--linie); border-radius: var(--r-ctrl); padding: 3px; margin-bottom: 14px; background: var(--card-2); }
.comutator label { padding: 5px 12px; border-radius: var(--r-mic); cursor: pointer; font-weight: 500; font-size: .875rem; color: var(--slab); }
.comutator input { position: absolute; opacity: 0; pointer-events: none; }
.comutator label:has(input:checked) { background: var(--panou); color: var(--text); box-shadow: 0 1px 2px rgba(22, 27, 38, .1); }
.comutator label:has(input:focus-visible) { outline: 2px solid var(--aur-viu); outline-offset: 1px; }

/* Clientul: persoană fizică / juridică. Datele firmei și etichetele se comută din CSS. */
.date-client .doar-firma {
    margin: 0 0 16px; padding: 14px 16px 2px;
    border: 1px solid var(--linie); border-radius: var(--r-card); background: var(--card-2);
}
.date-client .doar-firma legend { float: left; width: 100%; margin-bottom: 12px; font-size: .875rem; }
.date-client .doar-firma legend + * { clear: both; }
/* Grila se potrivește lățimii formularului (îngust în editor, lat în fișa lead-ului). */
.date-client { container: client / inline-size; }
.date-client .formular-grila.trei .dublu { grid-column: span 2; }
@container client (max-width: 560px) {
    .date-client .formular-grila.trei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .date-client .formular-grila.trei .dublu { grid-column: 1 / -1; }
}
@container client (max-width: 340px) {
    .date-client .formular-grila.trei { grid-template-columns: minmax(0, 1fr); }
}
.date-client:has(.tip-client input[value="persoana_fizica"]:checked) .doar-firma,
.date-client:has(.tip-client input[value="persoana_fizica"]:checked) .eticheta-pj,
.date-client:has(.tip-client input[value="firma"]:checked) .eticheta-pf { display: none; }

.editor-coperta { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.editor-coperta .camp { flex: 1; min-width: 240px; }
.editor-coperta .previzualizare-coperta { max-width: 180px; max-height: 120px; object-fit: cover; }

.editor-linii td { vertical-align: top; padding: 8px; }
.editor-linii th { padding: 10px 8px; }
.editor-linii .col-maner { width: 30px; padding-right: 0; }
.editor-linii .col-cant { width: 110px; }
.editor-linii .col-um { width: 96px; }
.editor-linii .col-um select { width: 100%; padding-right: 26px; }
.editor-linii .col-pret { width: 140px; }
.editor-linii .col-tva { width: 88px; }
.editor-linii .col-total { width: 130px; padding-top: 17px; font-weight: 600; }
/* Cota TVA: câmp scurt cu „%” lipit în dreapta. */
.camp-procent { position: relative; display: block; }
.camp-procent input { width: 100%; padding-right: 24px; text-align: right; }
.camp-procent > span { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--mai-slab); font-size: .8125rem; pointer-events: none; }
.total-cu-tva { display: block; margin-top: 3px; font-weight: 400; font-size: .75rem; color: var(--mai-slab); white-space: nowrap; }
.editor-linii .col-sterge { width: 40px; }
.editor-linii .linie-produs { min-width: 260px; }
.editor-linii tbody tr:hover td { background: transparent; }
.linie-meta { display: block; font-size: .8125rem; color: var(--mai-slab); margin-top: 3px; }
.linie-libera { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin-top: 6px; }
.linie-grup td { padding: 14px 8px 4px !important; border-bottom: 1px solid var(--linie); font-weight: 600; font-size: .8125rem; color: var(--aur-text); }
.maner { border: 0; background: none; color: var(--mai-slab); cursor: grab; padding: 10px 2px; touch-action: none; }
.maner:hover { color: var(--text); }
.se-muta td { background: var(--aur-slab) !important; }
.col-pret .marca-modificat { display: block; width: max-content; margin: 3px 0 0 auto; }

.editor-subsol { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: flex-end; }
.editor-subsol .camp { margin: 0; }
.camp-discount input { width: 110px; }

.combo { position: relative; }
/* Poziția și lățimea le pune JS-ul (lista plutește peste tabel, fără să fie tăiată). */
.combo-lista {
    position: fixed; z-index: 60; left: 0; top: 0; width: 440px;
    max-height: 420px; overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 4px 0; list-style: none;
    background: var(--panou); border: 1px solid var(--linie-tare); border-radius: var(--r-ctrl); box-shadow: var(--umbra-plutire);
}
.combo-grup { position: sticky; top: -4px; padding: 8px 14px 4px; font-size: .75rem; font-weight: 600; color: var(--mai-slab); background: var(--panou); }
.combo-optiune { padding: 8px 14px; cursor: pointer; line-height: 1.35; }
.combo-optiune strong { display: block; font-weight: 500; }
.combo-optiune span { display: block; font-size: .8125rem; color: var(--mai-slab); font-variant-numeric: tabular-nums; }
.combo-optiune.activ, .combo-optiune:hover { background: var(--aur-slab); }
.combo-libera { border-top: 1px solid var(--linie); margin-top: 4px; padding-top: 8px; }
.combo-gol { padding: 8px 12px; color: var(--mai-slab); }

/* Cartușul ofertei: rezumatul pe celule, cu totalul cel mai mare din pagină. */
.linie-panta { display: none; }
.cartus { background: var(--card); border: 1px solid var(--linie); border-radius: var(--r-card); overflow: hidden; font-variant-numeric: tabular-nums; }
.cartus-grila { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cartus-celula { padding: 10px 16px; border-bottom: 1px solid var(--linie); min-width: 0; }
.cartus-celula:nth-child(odd) { border-right: 1px solid var(--linie); }
.cartus-celula.lat { grid-column: 1 / -1; border-right: 0; }
.cartus-celula .eticheta { display: block; font-size: .75rem; font-weight: 500; color: var(--mai-slab); }
.cartus-celula .val { display: block; font-weight: 600; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartus-celula .val.numar-oferta { font-size: 1.05rem; }
.cartus-sume { padding: 12px 16px; margin: 0; border-bottom: 1px solid var(--linie); font-size: .875rem; }
.cartus-sume div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.cartus-sume dt { color: var(--slab); }
.cartus-sume dd { margin: 0; font-weight: 600; }
.cartus-total { padding: 14px 16px 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; background: var(--aur-slab); }
.cartus-total .eticheta { font-size: .875rem; font-weight: 600; }
.cartus-total .suma { font-family: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif; font-weight: 700; font-size: 2.2rem; line-height: 1; letter-spacing: -.02em; }
.cartus-total .suma small { font-size: .46em; font-weight: 600; margin-left: 3px; color: var(--slab); }
.cartus-actiuni { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* 10. DIALOGURI, TOAST-URI, AUTENTIFICARE ---------------------------------- */

dialog.dialog {
    width: min(540px, calc(100vw - 32px)); padding: 0; max-height: 88vh; overflow: auto;
    border: 1px solid var(--linie); border-radius: var(--r-card);
    background: var(--panou); color: var(--text); box-shadow: var(--umbra-plutire);
}
dialog.dialog::backdrop { background: rgba(8, 10, 14, .55); backdrop-filter: blur(2px); }
.dialog-antet { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--linie); }
.dialog-antet h2 { flex: 1; }
.dialog-corp { padding: 18px; }
.dialog-corp .actiuni-formular { margin-top: 8px; }

.toasturi { position: fixed; z-index: 100; bottom: 20px; right: 20px; display: flex; flex-direction: column; gap: 9px; max-width: min(400px, calc(100vw - 32px)); }
.toast {
    display: flex; align-items: flex-start; gap: 10px;
    background: var(--panou); border: 1px solid var(--linie); border-left: 3px solid var(--verde);
    border-radius: var(--r-ctrl); padding: 12px 15px; box-shadow: var(--umbra-plutire); font-size: .875rem;
    animation: toast-intra .18s ease;
}
.toast > span { flex: 1; }
.toast-succes .ico:first-child { color: var(--verde); }
.toast-eroare  { border-left-color: var(--rosu); }
.toast-eroare .ico:first-child { color: var(--rosu); }
.toast-atentie { border-left-color: var(--galben); }
.toast-atentie .ico:first-child { color: var(--galben); }
.toast-info    { border-left-color: var(--albastru); }
.toast button { background: none; border: 0; color: var(--mai-slab); cursor: pointer; padding: 0; margin-left: auto; }
@keyframes toast-intra { from { opacity: 0; transform: translateY(8px); } }

.pagina-autentificare { min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; }
.autentificare { width: 100%; max-width: 400px; }
.autentificare > .logo-duo { display: flex; width: max-content; margin: 0 auto 18px; }
.autentificare > .logo-duo img { height: 72px; }
.autentificare-antet { text-align: center; margin-bottom: 22px; }
.autentificare-antet h1 { font-size: 1.3rem; }
.autentificare-antet p { color: var(--slab); font-size: .875rem; margin-top: 3px; }
.autentificare-antet .marca-insigna { margin-bottom: 10px; }
.autentificare form { background: var(--card); border: 1px solid var(--linie); border-radius: var(--r-card); padding: 22px; }
.autentificare-alt { text-align: center; margin: 16px 0 0; font-size: .8125rem; }
.autentificare-alt a { color: var(--slab); }

/* „Vândut”: singurul moment orchestrat — rândul se strânge, bara țintei avansează. */
.rand-vandut { animation: rand-strange .45s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes rand-strange {
    0%   { opacity: 1; background: var(--verde-slab); }
    40%  { opacity: 1; background: var(--verde-slab); }
    100% { opacity: 0; transform: translateX(24px); }
}

/* Pe ecrane medii, Vândut / Pierdut din tabele rămân doar cu iconița. */
@media (max-width: 1400px) {
    .tabel .eticheta-lata { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .tabel .buton-vandut.buton-mic, .tabel .buton-pericol.buton-mic { padding: 6px; }
}

/* 11. RESPONSIVE ----------------------------------------------------------- */

@container linii (max-width: 700px) {
    .editor-linii thead { display: none; }
    .editor-linii, .editor-linii tbody { display: block; }
    .editor-linii tr.linie { display: grid; grid-template-columns: 28px 1fr 1fr 36px; gap: 6px 8px; padding: 12px 10px; border-bottom: 1px solid var(--linie); }
    .editor-linii tr.linie td { display: block; padding: 0; border: 0; width: auto; }
    .editor-linii .col-maner { grid-row: 1; grid-column: 1; }
    .editor-linii .linie-produs { grid-row: 1; grid-column: 2 / 4; min-width: 0; }
    .editor-linii .col-sterge { grid-row: 1; grid-column: 4; }
    .editor-linii .col-cant { grid-row: 2; grid-column: 2; }
    .editor-linii .col-pret { grid-row: 2; grid-column: 3; }
    .editor-linii .col-um { grid-row: 3; grid-column: 2; }
    .editor-linii .col-tva { grid-row: 3; grid-column: 3; }
    .editor-linii .col-total { grid-row: 4; grid-column: 2 / 4; padding-top: 0; display: flex; justify-content: space-between; align-items: baseline; }
    .editor-linii tr.linie-grup, .editor-linii tr.linie-grup td { display: block; }
}

/* Coloane secundare ascunse pe ecranele medii (pe telefon, tabelul devine carduri). */
@media (min-width: 641px) and (max-width: 1400px) {
    .ascunde-mediu { display: none; }
}

@media (max-width: 1180px) {
    :root { --bara: 232px; --gutiera: 22px; }
    .marca .logo-duo img { height: 48px; }
    .grila-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3 { grid-column: span 12 !important; }
    .grila > .detaliu-lateral { order: -1; }
}

@media (max-width: 1000px) {
    .editor-grila { grid-template-columns: minmax(0, 1fr); }
    .editor-lipit { position: static; }
    .editor { padding-bottom: 72px; }
    .editor-bara-mobil {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: var(--panou); border-top: 2px solid var(--aur-viu); box-shadow: var(--umbra-plutire);
    }
    .editor-bara-mobil strong { display: block; font-family: 'IBM Plex Sans Condensed', sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
}

@media (max-width: 900px) {
    :root { --gutiera: 16px; }
    .aplicatie { grid-template-columns: minmax(0, 1fr); }
    .bara-laterala {
        position: fixed; inset: 0 auto 0 0; z-index: 60; width: min(290px, 86vw);
        transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--umbra-plutire);
    }
    .meniu-deschis .bara-laterala { transform: none; }
    .meniu-deschis .fundal-meniu { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(8, 10, 14, .5); }
    /* Sus rămâne lipită doar bara subțire; titlul și acțiunile se derulează. */
    .bara-mobil-sus {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: sticky; top: 0; z-index: 30;
        margin: 0 calc(-1 * var(--gutiera)); padding: 9px var(--gutiera);
        background: color-mix(in srgb, var(--fundal) 90%, transparent);
        backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--linie);
    }
    .bara-mobil-marca { display: flex; text-decoration: none; }
    .bara-mobil-marca .logo-duo { gap: 10px; }
    .bara-mobil-marca .logo-duo img { height: 40px; }
    .antet { position: static; padding-top: 16px; gap: 12px; backdrop-filter: none; -webkit-backdrop-filter: none; background: none; }
    .antet-titlu { flex: 1 1 100%; }
    .antet-titlu h1 { font-size: 1.375rem; }
    .antet-actiuni { width: 100%; }
    .antet-actiuni > .selector-perioada { flex: 1 1 100%; }

    /* Butonul de meniu: auriu plin, cu text, ca să nu treacă neobservat. */
    .antet-burger {
        display: inline-flex; align-items: center; gap: 7px; flex: none; align-self: flex-start;
        height: 42px; padding: 0 15px 0 12px; border: 0; border-radius: 12px; cursor: pointer;
        background: var(--aur); color: #fff; font: 600 .875rem/1 inherit; letter-spacing: .01em;
        box-shadow: 0 3px 10px color-mix(in srgb, var(--aur) 38%, transparent);
    }
    .antet-burger:hover { background: color-mix(in srgb, var(--aur) 88%, #000); }
    .antet-burger:active { transform: scale(.97); }
    .antet-burger:focus-visible { outline: 2px solid var(--aur-viu); outline-offset: 2px; }

    /* Filtrele listelor: căutarea la vedere, restul după butonul „Filtre”. */
    .filtre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
    .filtre .camp-cautare, .filtre > .filtre-comutator { grid-column: 1 / -1; }
    .filtre .camp input, .filtre .camp select { min-width: 0 !important; width: 100% !important; }
    .filtre > .buton { justify-content: center; }
    .filtre-comutator { display: inline-flex; }
    .filtre.restrans { grid-template-columns: minmax(0, 1fr) auto; }
    .filtre.restrans .camp-cautare, .filtre.restrans > .filtre-comutator { grid-column: auto; }
    .filtre.restrans > .camp:not(.camp-cautare), .filtre.restrans > .buton:not(.filtre-comutator) { display: none; }
    .meniu-inchide {
        display: grid; place-items: center; position: absolute; top: 14px; right: 12px; z-index: 1;
        width: 38px; height: 38px; border: 1px solid var(--linie); border-radius: 10px;
        background: var(--card-2); color: var(--text); cursor: pointer;
    }
    .meniu-inchide:hover { background: var(--aur-slab); color: var(--aur-text); }
    .bara-laterala .marca { padding-right: 60px; }
    .formular-grila, .formular-grila.trei, .doua-coloane { grid-template-columns: minmax(0, 1fr); }

    /* Bara de jos, ca în bugete: cinci locuri, cu „+” (ofertă nouă) în mijloc. */
    .nav-mobil {
        display: grid; grid-template-columns: repeat(5, 1fr);
        position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
        background: color-mix(in srgb, var(--panou) 94%, transparent);
        backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
        border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom);
    }
    .nav-mobil a {
        display: flex; flex-direction: column; align-items: center; gap: 3px;
        padding: 9px 4px 8px; font-size: .6875rem; font-weight: 500;
        color: var(--mai-slab); text-decoration: none;
    }
    .nav-mobil a[aria-current="page"] { color: var(--aur-text); }
    .nav-mobil .adauga { justify-content: center; }
    .nav-mobil .adauga i {
        display: grid; place-items: center; width: 46px; height: 46px;
        border-radius: 15px; background: var(--aur); color: #fff;
        margin-top: -16px; box-shadow: var(--umbra-plutire);
    }
    .nav-mobil .adauga .ico { width: 24px; height: 24px; }
    .toasturi { left: 16px; right: 16px; bottom: 82px; max-width: none; }
    /* În editor, bara fixă cu totalul ține locul navigației de jos. */
    body:has(.editor) .nav-mobil { display: none; }
}

@media (max-width: 640px) {
    /* Cardurile KPI câte două pe rând, ca să încapă mai multe cifre pe ecran. */
    .grila-kpi, .grila-kpi.cinci { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .grila-kpi.cinci > :first-child { grid-column: 1 / -1; }
    .grila-kpi .kpi { padding: 14px; gap: 6px; }
    .grila-kpi .kpi-valoare.cifra-xl { font-size: 1.75rem; }
    .grila-kpi .kpi-valoare .unitate { font-size: .8125rem; }
    .grila-kpi .kpi-jos { font-size: .75rem; }
    .grila-kpi .kpi-eticheta { font-size: .75rem; }
    .grila-kpi .text-lung { display: none; }
    .grila-kpi .text-scurt { display: inline; }
    /* Selectorul de perioadă pe două rânduri (3 + 2), toate opțiunile la vedere. */
    .selector-perioada .grup-butoane { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; }
    .selector-perioada .grup-butoane a {
        grid-column: span 2; text-align: center; padding: 9px 4px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--linie);
    }
    .selector-perioada .grup-butoane a:nth-child(3) { border-right: 0; }
    .selector-perioada .grup-butoane a:nth-child(n+4) { grid-column: span 3; border-bottom: 0; }
    .selector-perioada form, form.selector-perioada { width: 100%; }
    .selector-perioada input[type="date"] { flex: 1 1 0; min-width: 0; }
    .tabel-carduri thead { display: none; }
    .tabel-carduri, .tabel-carduri tbody, .tabel-carduri tr, .tabel-carduri td { display: block; width: 100%; }
    .tabel-carduri tr { padding: 10px 16px; border-bottom: 1px solid var(--linie); }
    .tabel-carduri td { border: 0; padding: 2px 0; text-align: left !important; }
    .tabel-carduri td[data-eticheta]::before { content: attr(data-eticheta) ': '; color: var(--mai-slab); font-size: .8125rem; }
    .tabel-carduri .actiuni-rand { justify-content: flex-start; margin-top: 6px; }
    .tabel-carduri tfoot td { display: block; }
    .cartela { flex-direction: column; text-align: center; }
    .iris { justify-content: center; }
    .iris-desen { width: 180px; height: 180px; }
    .bara-orizontala { grid-template-columns: 90px minmax(0, 1fr) auto; }
}

@media (max-width: 359px) {
    .grila-kpi, .grila-kpi.cinci { grid-template-columns: minmax(0, 1fr); }
}

/* 12. MIȘCARE ȘI IMPRIMARE ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

@media print {
    .bara-laterala, .nav-mobil, .antet-actiuni, .toasturi, .filtre { display: none !important; }
    .aplicatie { display: block; }
    .antet { position: static; }
    body { background: #fff; }
}