/* Inter — fontul de interfata, gazduit local (fara CDN, ca restul dependentelor).
   Variable font: o singura cerere acopera toate greutatile 100-900, deci nu incarcam
   patru fisiere ca sa avem regular/semibold/bold. `swap`: textul se vede imediat cu
   fontul de sistem si se re-randeaza cand ajunge Inter. */
@font-face {
    font-family: 'InterVariable';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-jznyFqg.woff2") format('woff2');
}

:root {
    --hs-sidebar-width: 240px;
    /* Inaltimea barei de sus (`.hs-topbar`, `position: sticky`). Citita si din JS, ca sa se
       stie cat spatiu acopera bara cand se aduce o lista in vedere. */
    --hs-topbar-h: 52px;
    /* Culoarea de brand din tema legacy (css/main.css). */
    --hs-primary: #134a6d;
    --hs-highlight: #ffea96;
    /* Sidebar gri-inchis ca AdminLTE legacy (sidebar-dark-primary). */
    --hs-sidebar-bg: #343a40;
    /* Suprascrie primary-ul Bootstrap ca sa fie albastrul legacy peste tot. */
    --bs-primary: #134a6d;
    --bs-primary-rgb: 19, 74, 109;
    --bs-link-color: #134a6d;
    --bs-link-hover-color: #0e3854;

    /* ---- Tipografie ----
       Inter cu cadere pe fonturile de sistem (Segoe UI pe Windows, SF pe macOS), ca
       pagina sa arate corect si inainte ca fontul sa fie descarcat. */
    --hs-font: 'InterVariable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, 'Noto Sans', sans-serif;

    /* ---- Paleta semantica ----
       Erau folosite doar ca `var(--hs-line, #e6e9ec)`, adica intotdeauna pe fallback.
       Definite aici, o ajustare de nuanta se face dintr-un singur loc. Valorile sunt
       exact fallback-urile de pana acum, ca nimic sa nu se schimbe neintentionat. */
    --hs-line: #e6e9ec;          /* contur de card / separator vizibil */
    --hs-line-soft: #eef1f4;     /* separator intre randuri, foarte discret */
    --hs-text: #101828;          /* titluri si valori numerice */
    --hs-text-soft: #344054;     /* text curent in tabele */
    /* Trece AA si pe fundalul paginii (#eef1f6), nu doar pe card alb: notele si
       hint-urile de sub tabele stau direct pe fundal. */
    --hs-muted: #5d6b80;         /* etichete, text secundar */
    --hs-subtle: #98a2b3;        /* elemente decorative: iconite, separatoare */
    --hs-surface: #fff;          /* fundal de card */
    --hs-surface-alt: #fafbfc;   /* antet de sectiune, randuri alternate */
    --hs-primary-soft: #eef3f8;  /* fundal pentru accente pe brand */
    --hs-primary-dark: #0e3854;
    --hs-focus: rgba(19, 74, 109, .25);

    /* ---- Paleta semantica (enterprise) ----
       O singura familie rece, cu saturatie mica, derivata din navy-ul aplicatiei. Culoarea
       ramane SEMNAL (respins = rosu, confirmat = verde), dar cu volumul dat jos: fundal
       deschis + text inchis + contur, in loc de pastile pline in culori pure. Trei roluri
       per ton: `-bg` (suprafata), `-fg` (text/iconita), `-br` (contur).
       Erau definite mai jos ca `--pq-*`, doar pentru modulul de piese; sunt mutate aici
       pentru ca aceleasi stari apar in toata aplicatia (fisa, coada magaziei, facturare). */
    --hs-neutral-bg: #f2f5f8;  --hs-neutral-fg: #4a5768;  --hs-neutral-br: #e1e7ee;
    --hs-info-bg:    #eaf2f8;  --hs-info-fg:    #1c5f89;  --hs-info-br:    #d2e3f0;
    --hs-brand-bg:   #e8f0f7;  --hs-brand-fg:   #134a6d;  --hs-brand-br:   #cbdcea;
    --hs-good-bg:    #eaf3ed;  --hs-good-fg:    #256b4b;  --hs-good-br:    #cee3d8;
    --hs-warn-bg:    #fdf4e6;  --hs-warn-fg:    #8a5d16;  --hs-warn-br:    #f2e2c6;
    --hs-bad-bg:     #fbeeee;  --hs-bad-fg:     #a4322f;  --hs-bad-br:     #f0d6d5;

    /* Umplerile solide ale actiunilor semantice (butoane). Bootstrap le da luminoase si
       saturate (#198754 / #dc3545); intr-un ecran de lucru dens arata ca reclame. */
    --hs-good-solid: #1f6b4d;  --hs-good-solid-hover: #185840;
    --hs-bad-solid:  #9e2f2c;  --hs-bad-solid-hover:  #852724;
    /* Chihlimbarul plin merge cu text ALB, deci trebuie inchis: #b07b1e dadea 3.3:1 pe alb,
       sub pragul AA pentru text mic. */
    --hs-warn-solid: #8a5d16;  --hs-warn-solid-hover: #744e12;

    /* ---- Suprafata NAVY (antetele de inregistrare) ----
       Paginile de detaliu (client, fisa) isi poarta identitatea pe o banda in culoarea de
       brand: pe un ecran plin de panouri albe, ea e „capul" inregistrarii, nu inca un card.
       Tot ce sta pe navy foloseste tokenii `--hs-on-navy-*`, ca inversarea culorilor sa fie
       aceeasi in toate modulele (si ca o schimbare de nuanta sa se faca dintr-un loc). */
    --hs-navy-1: #17547c;                          /* capatul deschis al gradientului */
    --hs-navy-2: #0f3f5e;                          /* capatul inchis */
    --hs-navy-line: #0d3a56;                       /* conturul benzii */
    --hs-on-navy: #fff;                            /* text principal (8.1:1) */
    --hs-on-navy-soft: rgba(255, 255, 255, .74);   /* text secundar (5.2:1) */
    --hs-on-navy-faint: rgba(255, 255, 255, .55);  /* iconite, elemente decorative */
    --hs-on-navy-line: rgba(255, 255, 255, .22);   /* contururi pe navy */
    --hs-on-navy-fill: rgba(255, 255, 255, .14);   /* suprafete translucide (jetoane) */
    --hs-on-navy-fill-2: rgba(255, 255, 255, .22); /* aceleasi, la hover */
    --hs-navy-sunken: rgba(0, 0, 0, .16);          /* a doua zona a benzii (metadate) */
    /* Actiunile semantice pe navy: mai luminoase decat cele de pe alb, ca sa se decupeze
       de fundal si sa pastreze AA cu propriul text. */
    --hs-good-on-navy: #0f7a52;
    --hs-good-on-navy-hover: #0c6544;
    --hs-warn-on-navy: #d99b28;
    --hs-warn-on-navy-hover: #c2871d;
    --hs-bad-on-navy: #ffb4ac;

    /* ---- Suprafete si relief ----
       Trei niveluri: canvas (spatiul de lucru) < surface (cardul) < surface-alt (antetul lui).
       Umbrele sunt minime — structura o dau conturele, nu adancimea. */
    /* Aceeasi valoare ca fundalul paginii: spatiul de lucru din modal si pagina propriu-zisa
       se citesc ca aceeasi suprafata, iar panourile albe „plutesc" clar pe ea. */
    --hs-canvas: #eef1f6;
    --hs-line-strong: #d6dde5;   /* contur care trebuie sa se vada: input, buton outline */
    --hs-shadow-xs: 0 1px 1px rgba(16, 24, 40, .03);
    --hs-shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
    --hs-shadow-lg: 0 18px 50px rgba(16, 24, 40, .18);
    --hs-radius-sm: 5px;
    --hs-radius: 7px;
    /* Text „tare" pe suprafete deschise (valori, titluri de rand). Mai bland decat
       --hs-text: apare in liste dense, unde negrul plin oboseste. */
    --hs-ink: #1f2a37;

    /* Bootstrap se incarca DUPA app.css (vezi ordinea din assets/app.js), deci regulile lui
       pe `body` bat orice scriem noi cu acelasi selector. Fontul si culoarea textului se dau
       prin variabilele pe care le citeste chiar `body`-ul lui — asa ajung sigur la destinatie.
       `--bs-body-bg` NU se atinge: in Bootstrap 5.3 `.card` isi ia fundalul din ea, deci un
       gri acolo ar innegri toate cardurile. */
    --bs-body-font-family: var(--hs-font);
    --bs-body-color: #344054;
    /* 14px, nu 16px: intr-un ERP se citesc tabele si formulare, nu articole. Toate
       dimensiunile exprimate in `rem` se aliniaza la baza asta. */
    --bs-body-font-size: .875rem;
    --bs-body-line-height: 1.5;

    /* ---- Scala tipografica ----
       Cinci trepte, atat. Restul fisierului foloseste aceste valori in px; tokenii sunt
       referinta pentru codul nou. */
    --hs-fs-2xs: 10px;   /* etichete uppercase, foarte discrete */
    --hs-fs-xs: 11px;    /* meta, sub-randuri */
    --hs-fs-sm: 12px;    /* text secundar, antet de tabel */
    --hs-fs-md: 13px;    /* text curent in tabele si formulare */
    --hs-fs-lg: 14px;    /* text de baza */
}

/* Fundalul paginii: gri-albastrui rece, cu o trecere fina in partea de sus, ca zona de
   continut sa para asezata pe pagina, nu lipita de ea. `html body` (nu `body`) ca sa avem
   specificitate mai mare decat regula Bootstrap incarcata dupa noi. */
html body {
    /* Fundal neutru rece, uniform. Gradientul de dinainte dadea un aer de pagina de
       prezentare; un ecran de lucru vrea o suprafata calma pe care cardurile albe sa se
       vada clar. */
    background-color: #eef1f6;
    /* Inter e desenat pentru randare subtiata; fara asta pare mai gros decat trebuie. */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'cv11', 'calt';
    font-optical-sizing: auto;
    letter-spacing: -.003em;
}

/* Cifre tabulare peste tot unde numerele se citesc in coloana: se aliniaza vertical si
   nu mai „danseaza" la schimbarea paginii. */
table.table-enterprise tbody td,
.dt-info,
.dt-paging,
.hs-stat__val,
.hs-kpi__val {
    font-variant-numeric: tabular-nums;
}

/* Butoane/elemente "primary" pe albastrul de brand (#134a6d).
   Selector pe DOUA clase (`.btn.btn-primary`): Bootstrap isi declara `--bs-btn-bg` pe
   `.btn-primary` (o clasa) si se incarca DUPA app.css, deci la specificitate egala castiga
   el — regula de mai jos, scrisa cu o singura clasa, nu avea niciun efect si butoanele
   ieseau albastru Bootstrap in loc de navy-ul aplicatiei. */
.btn.btn-primary {
    --bs-btn-bg: var(--hs-primary);
    --bs-btn-border-color: var(--hs-primary);
    --bs-btn-hover-bg: var(--hs-primary-dark);
    --bs-btn-hover-border-color: var(--hs-primary-dark);
    --bs-btn-active-bg: var(--hs-primary-dark);
    --bs-btn-active-border-color: var(--hs-primary-dark);
    --bs-btn-disabled-bg: var(--hs-primary);
    --bs-btn-disabled-border-color: var(--hs-primary);
}
/* Acelasi motiv pentru linkurile-butoane cu contur si pentru butoanele semantice folosite
   in restul aplicatiei: paleta sobra din `:root`, nu tonurile luminoase Bootstrap. */
.btn.btn-success {
    --bs-btn-bg: var(--hs-good-solid);
    --bs-btn-border-color: var(--hs-good-solid);
    --bs-btn-hover-bg: var(--hs-good-solid-hover);
    --bs-btn-hover-border-color: var(--hs-good-solid-hover);
    --bs-btn-active-bg: var(--hs-good-solid-hover);
    --bs-btn-active-border-color: var(--hs-good-solid-hover);
    --bs-btn-disabled-bg: var(--hs-good-solid);
    --bs-btn-disabled-border-color: var(--hs-good-solid);
}
.btn.btn-danger {
    --bs-btn-bg: var(--hs-bad-solid);
    --bs-btn-border-color: var(--hs-bad-solid);
    --bs-btn-hover-bg: var(--hs-bad-solid-hover);
    --bs-btn-hover-border-color: var(--hs-bad-solid-hover);
    --bs-btn-active-bg: var(--hs-bad-solid-hover);
    --bs-btn-active-border-color: var(--hs-bad-solid-hover);
}

.text-primary { color: #134a6d !important; }
.bg-primary { background-color: #134a6d !important; }

/* Tab activ (lista de clienti) — pe albastrul de brand, ca in legacy. */
.nav-tabs .nav-link.active {
    color: #134a6d;
    font-weight: 600;
}

/* Hover de rand in tabele — galbenul legacy (.highlight). */
.highlight,
tr.highlight > td {
    background-color: var(--hs-highlight) !important;
}

#hs-sidebar {
    width: var(--hs-sidebar-width);
    /* Sticky: ramane vizibil cat timp se deruleaza continutul din dreapta.
       height:100vh + align-self:flex-start (nu stretch) + overflow auto pentru meniuri lungi. */
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    background: var(--hs-sidebar-bg);
    font-size: 14px;
}

/* Link-uri sidebar — culori AdminLTE (sidebar-dark-primary). */
#hs-sidebar .nav-link {
    color: #c2c7d0;
    border-radius: 0;
    margin: 0;
    padding: .65rem 1rem;
}

#hs-sidebar .nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

/* Element activ — albastrul de brand (#134a6d), ca in legacy. */
#hs-sidebar .nav-link.active {
    color: #fff;
    background: var(--hs-primary);
    font-weight: 400;
}

#hs-sidebar .sidebar-brand {
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

#hs-content {
    flex: 1;
    min-width: 0;
    /* Pagina ocupa macar ecranul, ca footer-ul sa stea jos si pe paginile scurte. */
    min-height: 100vh;
}
#hs-content > main { flex: 1 0 auto; }

/* Footer-ul platformei: banda navy cu filet auriu (culorile siglei Plenia). */
.hs-footer {
    --hs-plenia-gold: #b8933f;
    --hs-plenia-gold-soft: #d9b86a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .4rem 1.25rem;
    padding: .35rem 1.25rem;
    background: linear-gradient(90deg, var(--hs-navy-2), var(--hs-primary-dark));
    border-top: 2px solid var(--hs-plenia-gold);
    color: var(--hs-on-navy-soft);
    font-family: var(--hs-font);
    font-size: 11px;
    /* Lipit de marginea de jos a ecranului cat derulezi; sub dropdown-uri/modale (z-index Bootstrap >= 1000). */
    position: sticky;
    bottom: 0;
    z-index: 900;
}
.hs-footer a { text-decoration: none; }
.hs-footer__brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--hs-on-navy); }
.hs-footer__logo {
    width: 22px; height: 22px; border-radius: 5px;
    box-shadow: 0 0 0 1px var(--hs-on-navy-line);
}
.hs-footer__name { display: flex; align-items: baseline; gap: .45rem; line-height: 1.2; }
.hs-footer__title { font-size: 12px; font-weight: 700; letter-spacing: -.01em; color: var(--hs-on-navy); }
.hs-footer__erp { color: var(--hs-plenia-gold-soft); }
.hs-footer__slogan { font-size: 10.5px; color: var(--hs-on-navy-faint); }
.hs-footer__legal { color: var(--hs-on-navy-soft); }
.hs-footer__link {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .1rem .6rem;
    border: 1px solid var(--hs-on-navy-line);
    border-radius: 999px;
    color: var(--hs-on-navy);
    font-weight: 600;
    transition: border-color .15s, background-color .15s, color .15s;
}
.hs-footer__link .bi { font-size: 11px; }
.hs-footer__ext { color: var(--hs-plenia-gold-soft); }
.hs-footer__link:hover { border-color: var(--hs-plenia-gold); background: var(--hs-on-navy-fill); color: #fff; }
.hs-footer__brand:focus-visible, .hs-footer__link:focus-visible { outline: 2px solid var(--hs-plenia-gold-soft); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 767.98px) {
    .hs-footer { justify-content: center; text-align: center; padding: .4rem 1rem; }
}
@media print { .hs-footer { display: none; } }

/* Push-menu (port legacy): #hs-menu-toggle restrange sidebar-ul la un rail cu iconite. */
#hs-sidebar {
    transition: width .2s ease;
}
body.hs-collapsed #hs-sidebar {
    width: 64px;
}
body.hs-collapsed #hs-sidebar .hs-label {
    display: none;
}
body.hs-collapsed #hs-sidebar .nav-link {
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}
body.hs-collapsed #hs-sidebar .nav-link i,
body.hs-collapsed #hs-sidebar .sidebar-brand i {
    margin: 0 !important;
    font-size: .95rem;
}
body.hs-collapsed #hs-sidebar .sidebar-brand {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}
#hs-menu-toggle {
    border: 0;
}

/* Pagina Programari (toate template-urile din appointment/): fonturi mai mici fata de Bootstrap.
   Baza 16px -> 14px; h5 (titlu modal) 20px -> 18px; controale/butoane 16px -> 14px.
   `.small`/`.text-muted small` sunt em, deci scaleaza automat cu baza. Clasa .appt-fs se pune pe
   radacina paginii (div.row) si pe radacina modalului appointment — NU pe sheet/_view_modal. */
.appt-fs {
    font-size: 14px;
}

.appt-fs h5,
.appt-fs .h5 {
    font-size: 18px;
}

.appt-fs .form-control,
.appt-fs .form-select,
.appt-fs .btn,
.appt-fs .form-label {
    font-size: 14px;
}

/* Fereastra plutitoare cu fisele selectate pentru optimizare traseu — pozitionata absolut
   fata de cardul listei „Fise fara programare". Apare la bifarea unui checkbox (JS). */
/* Selector pe ID: .card (Bootstrap) are position:relative cu aceeasi specificitate ca o clasa
   si se incarca dupa app.css, deci ar suprascrie. ID-ul (specificitate mai mare) invinge sigur. */
#route_selected_panel.route-selected-panel {
    position: absolute;
    top: 8px;
    /* In afara cardului, la stanga lui: marginea dreapta a panoului ajunge la marginea stanga
       a cardului (right:100%), cu un mic spatiu. Containing block ramane .card position-relative. */
    right: 100%;
    left: auto;
    margin-right: 8px;
    width: 270px;
    z-index: 1030;
}

/* ---- Calendar programari: stari vizuale + feedback ---- */

/* Inaltimea randurilor.
   FullCalendar da sloturilor 1.5em, prea inghesuit: textul programarii nu incape.
   Grila e la 30 min (vezi gridStepMin in pages/appointment-index.js), deci 2em pe
   slot inseamna 4em pe ora — lizibil, fara ca ziua sa devina excesiv de lunga.
   `height` pe .fc-timegrid-slot nu e suficient singur — celula de continut
   (.fc-timegrid-slot-lane) trebuie sa creasca odata cu ea. */
.fc-timegrid-slot,
.fc-timegrid-slot-lane,
.fc-timegrid-slot-label {
    height: 2em;
}

/* In vederea Luna randurile isi impart inaltimea disponibila; cu height:'auto'
   pe calendar ele se strang la continut, deci le dam un minim lizibil. */
.fc-daygrid-day-frame {
    min-height: 6.5em;
}

/* Buton de confirmare rapida (✓) afisat pe evenimentele neconfirmate. */
.fc-event {
    position: relative;
}

.appt-confirm-btn {
    position: absolute;
    top: 1px;
    right: 1px;
    z-index: 3;
    width: 17px;
    height: 17px;
    line-height: 15px;
    padding: 0;
    font-size: 12px;
    border: 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, .9);
    color: #198754;
    cursor: pointer;
}

.appt-confirm-btn:hover {
    background: #198754;
    color: #fff;
}

/* Legenda / contor per inginer. */
.appt-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 3px;
    vertical-align: middle;
}

/* Toast (feedback + undo la reprogramare / confirmare). */
.appt-toast-container {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 1080;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.appt-toast {
    background: #198754;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    font-size: 14px;
    display: flex;
    align-items: center;
}

.appt-toast-err {
    background: #dc3545;
}

.appt-toast-action {
    background: none;
    border: 0;
    color: #fff;
    text-decoration: underline;
    cursor: pointer;
    margin-left: 10px;
    font-size: 14px;
}

/* Navbar de sus — albastru ca legacy (.navbar-my-blue = #134a6d). */
.card {
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

/* Modal manopera — font 14px + accente vizuale (look „profi"). */
.wm-modal {
    font-size: 14px;
}
.wm-modal .modal-title {
    font-size: 18px;
}
.wm-modal .form-control,
.wm-modal .form-select,
.wm-modal .btn,
.wm-modal .input-group-text {
    font-size: 14px;
}
/* select2: font-size 12px peste tot (caseta + valoarea afisata + optiuni + cautare + tag-uri).
   Valoarea (__rendered) mosteneste din tema (1rem); o setam explicit, cu specificitate mare +
   !important, ca sa batem tema indiferent de ordinea de incarcare si de variantele form-select-sm. */
.select2-container--bootstrap-5 .select2-selection,
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered,
.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice,
.select2-container--bootstrap-5 .select2-search__field,
.select2-container--bootstrap-5 .select2-results__option {
    font-size: 12px !important;
}
/* Titlu de sectiune discret (uppercase, spatiere) in loc de text simplu. */
.wm-modal .wm-section {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--hs-primary);
    border-bottom: 1px solid #e9ecef;
    padding-bottom: .4rem;
    margin-bottom: 1rem;
}
/* Etichete de formular — aspect profesional, uniform in toata aplicatia: un pic mai mici,
   semibold, gri estompat, spatiere fina. `label.form-label` (0,1,1) bate default-ul Bootstrap
   `.form-label` (0,1,0), care se incarca dupa app.css. */
label.form-label {
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    letter-spacing: .01em;
    margin-bottom: .3rem;
}
/* Caseta „Pret cu TVA” — accent verde discret. */
.wm-modal .wm-price-preview {
    background: #f1f8f4;
    border: 1px solid #cfe7d6;
    border-radius: .5rem;
}

/* ===== Stil GLOBAL pentru toate listele DataTables (font 14px + accente) ===== */
.dt-container {
    font-size: 14px;
}
table.dataTable thead th {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6c757d;
    font-weight: 600;
}
table.dataTable td {
    vertical-align: middle;
}
/* „pill" monospace pentru coduri (clasa .wm-code unde e folosita). */
.wm-code {
    font-family: var(--bs-font-monospace, monospace);
    background: #f1f3f5;
    border-radius: .25rem;
    padding: .05rem .4rem;
    font-size: 12px;
}
/* Control „N înregistrări pe pagină” — 12px, pe un rand, select compact si SCURT. */
.dt-length {
    font-size: 12px;
    white-space: nowrap;
}
.dt-length label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: 0;
}
.dt-length select.form-select {
    display: inline-block; /* form-select e block (100%) -> strica randul; inline-block il compacteaza */
    width: auto;
    min-width: 0;
    margin-right: 10px;
    font-size: 12px;
    padding: .15rem 1.5rem .15rem .5rem;
}
/* Bara de sus: length la STANGA, cautare la DREAPTA, pe acelasi rand. */
.dt-container .dt-layout-row:first-child {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}
.dt-container .dt-layout-row:first-child .dt-layout-cell {
    margin: 0;
    width: auto;
    flex: 0 0 auto;
}
.dt-container .dt-layout-row:first-child .dt-layout-end {
    margin-left: auto; /* impinge cautarea la dreapta */
}
.dt-search {
    font-size: 12px;
}
.dt-search input.form-control {
    width: auto;
    font-size: 12px;
    padding: .15rem .5rem;
}
/* Loader tabel: spinner centrat pe tabel (nu text), pentru toate tabelele. */
.dt-container {
    position: relative;
}
.dt-container .dt-processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    margin: 0;
    width: auto;
    min-width: 0;
    padding: 1rem 1.25rem;
    text-align: center;
}
.dt-processing .dt-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Istoric pret (pop-up evolutie + panoul din modalul de edit) — tabel 12px si mai gri.
   Bootstrap seteaza culoarea pe celule (--bs-table-color), deci tintim td/th direct (id > clase). */
#modal_price_history_workmanship table,
#edit_workmanship_history table {
    font-size: 12px;
}
#modal_price_history_workmanship table th,
#modal_price_history_workmanship table td,
#edit_workmanship_history table th,
#edit_workmanship_history table td {
    color: #6c757d;
}

/* Header/footer de modal albastre — port din legacy main.css (.modal-general-*). */
.modal-general-header,
.modal-general-footer {
    background-color: var(--hs-primary);
    color: #fff !important;
}

/* Modalele noastre invelesc header/body/footer intr-un <form> (singurul copil al
   .modal-content). Cu .modal-dialog-scrollable, Bootstrap pune max-height + overflow:hidden
   pe .modal-content si flex pe ea, dar form-ul nu e flex -> body-ul nu deruleaza si footer-ul
   (butoanele) e taiat. Facem form-ul container flex, ca header/footer sa ramana si body sa scrolleze. */
.modal-dialog-scrollable .modal-content > form {
    display: flex;
    flex-direction: column;
    max-height: 100%;
    overflow: hidden;
}
.modal-dialog-scrollable .modal-content > form > .modal-body {
    overflow-y: auto;
}

/* ============================================================================
   MODALUL FISEI TEHNICE — cadru, suprafete, comenzi.

   Paleta vine din tokenii `--hs-*` (`:root`, inceputul fisierului): trei niveluri de
   suprafata (canvas < surface < surface-alt), contururi in loc de umbre, iar culoarea
   folosita doar ca SEMNAL (stare, validare), nu ca decor. Blocul e scopat pe
   `.modal-sheet-view` si tine doar de CADRUL modalului; layoutul fisei (antet, tab-uri,
   inspector) e mai jos, scopat pe `.sheet-view`, ca sa serveasca si pagina completa.

   Specificitate pe doua clase (.modal-dialog.modal-sheet-view) acolo unde trebuie sa bata
   Bootstrap: app.css se incarca INAINTEA lui bootstrap.min.css (vezi app.js).
   ============================================================================ */

/* Cadru: latime si inaltime FIXE, indiferent de continut — modalul nu mai „sare" intre
   fise cu putin / mult continut. Inaltimea sta pe .modal-content (flex column in Bootstrap):
   antetul ramane sus, corpul creste si deruleaza. */
.modal-dialog.modal-sheet-view {
    /* 97% din viewport pe ambele axe; marginea Bootstrap (1.75rem) ar impinge un 97vh
       peste ecran, deci restul de 3% se imparte sus/jos. */
    --bs-modal-margin: 1.5vh;
    width: 97vw;
    max-width: 97vw;
}
.modal-dialog.modal-sheet-view .modal-content {
    height: 97vh;
    border: 1px solid var(--hs-line-strong);
    border-radius: var(--hs-radius);
    box-shadow: var(--hs-shadow-lg);
    overflow: hidden;
}

/* Antet: navy plat (fara gradient) + o linie de accent mai deschisa dedesubt, ca bara de
   titlu sa se termine net, nu sa se piarda in corpul modalului. */
.modal-sheet-view .modal-header,
.modal-sheet-view .modal-header.modal-general-header {
    padding: .7rem 1.1rem;
    background-color: var(--hs-navy-1);
    background-image: none;
    border-bottom: 1px solid rgba(255, 255, 255, .14);
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16);
}
/* Titlul poarta numarul fisei si numele clientului — text propriu, deci fara uppercase
   (eyebrow-ul de deasupra e cel care da contextul „Fișă tehnică"). */
.modal-sheet-view .modal-title {
    margin: 0;
    font-size: var(--hs-fs-lg);
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
}
.modal-sheet-view .modal-title i { opacity: .85; }
/* Insigna „Fișă extinsă" din antetul modalului de fisa. Pe banda navy, deci contrast dat de un
   fundal translucid deschis, nu de o culoare proprie: e o eticheta de context, nu o alerta.
   Subtipul (retus / reprogramare / montaj piesa) vine lipit, despartit de o linie subtire. */
.sv-ext-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-left: .5rem;
    padding: .16rem .5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .28);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    vertical-align: middle;
    white-space: nowrap;
}
.sv-ext-badge i { font-size: .72rem; opacity: .9; }
.sv-ext-badge__type {
    padding-left: .35rem;
    margin-left: .1rem;
    border-left: 1px solid rgba(255, 255, 255, .32);
    font-weight: 400;
    opacity: .9;
}

/* Legatura catre fisa-mama, langa insigna. Subliniere doar la hover: e o scurtatura, nu o
   actiune principala. Data crearii, estompata — ea deosebeste mama de copil (numarul e acelasi). */
.sv-parent-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-left: .4rem;
    padding: .16rem .5rem;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, .3);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    text-decoration: none;
    vertical-align: middle;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease;
}
.sv-parent-link:hover,
.sv-parent-link:focus {
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border-color: rgba(255, 255, 255, .5);
    text-decoration: none;
}
.sv-parent-link i { font-size: .72rem; opacity: .9; }
.sv-parent-link__date { font-weight: 400; opacity: .82; }

/* Subtitlul cu clientul, din titlul modalului de fisa — alb estompat, greutate normala. */
.modal-title-customer {
    font-weight: 400;
    opacity: .8;
    text-transform: none;
    letter-spacing: 0;
}

/* Corpul = spatiul de lucru: canvas neutru, pe care panourile albe se citesc drept carduri. */
.modal-sheet-view .modal-body {
    background: var(--hs-canvas);
    padding: .85rem 1rem;
}

/* Footer discret: iesirea si scurtatura spre pagina completa. */
/* Subsolul e o bandă de context, nu o bară de acțiuni: cine a deschis fișa, cine a programat
   vizita și o scurtătură. Deci cât mai jos posibil — spațiul se duce în conținut. */
.modal-sheet-view .sv-footer {
    /* Fundal pe brand, in varianta deschisa (--hs-primary-soft, acelasi cu accentele navy din
       aplicatie): subsolul se citeste ca zona de context, legata vizual de antetul navy al
       modalului, nu ca o continuare a continutului. */
    background: var(--hs-primary-soft, #eef3f8);
    border-top: 1px solid var(--hs-line);
    justify-content: space-between;
    align-items: center;
    gap: .5rem;
    padding: .3rem .85rem;
    min-height: 0;
    font-size: 11px;
}
.modal-sheet-view .sv-footer .sv-origin { font-size: 11px; gap: .25rem .6rem; }
.modal-sheet-view .sv-footer .sv-origin__item i { font-size: 11px; }

/* Scurtătura către pagina întreagă: text discret, se colorează doar la hover. */
.sv-footer__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    flex: 0 0 auto;
    padding: .15rem .25rem;
    font-size: 11px;
    font-weight: 500;
    color: var(--hs-subtle, #98a2b3);
    text-decoration: none;
    border-radius: 4px;
    transition: color .12s ease;
}
.sv-footer__link:hover { color: var(--hs-primary, #134a6d); text-decoration: underline; }
.sv-footer__link:focus-visible { outline: 2px solid var(--hs-primary, #134a6d); outline-offset: 1px; }

/* ---- Comenzi (butoane, campuri) ----
   Conventia de culoare a actiunilor din fisa (aplicata si in template-uri, nu doar aici):
     navy  = scrii date pe fisa (Salvează, Programează, Adaugă) — actiunea obisnuita;
     verde = schimbi STAREA fisei sau confirmi ceva (Închide fișa, Confirmă, Acceptă);
     rosu  = actiune distructiva (Anulează, Șterge);
     contur = actiune secundara (Deviz, Deschide harta, Înapoi).
   Inainte, „Salvează" era verde in unele locuri si navy in altele, iar o fisa avea cinci
   butoane verzi identice — culoarea nu mai spunea nimic. Nuantele solide vin din paleta
   (`--hs-*-solid`), mai sobre decat cele Bootstrap, care pe un ecran dens tipa. */
.modal-sheet-view .btn,
.sheet-view .btn {
    border-radius: var(--hs-radius-sm);
    font-weight: 600;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.modal-sheet-view .btn:active,
.sheet-view .btn:active { transform: none; }
.modal-sheet-view .btn-primary,
.sheet-view .btn-primary,
.modal-sheet-view .btn-secondary,
.sheet-view .btn-secondary {
    --bs-btn-bg: var(--hs-primary);
    --bs-btn-border-color: var(--hs-primary);
    --bs-btn-hover-bg: var(--hs-primary-dark);
    --bs-btn-hover-border-color: var(--hs-primary-dark);
    --bs-btn-active-bg: #0c3149;
    --bs-btn-active-border-color: #0c3149;
    --bs-btn-disabled-bg: var(--hs-primary);
    --bs-btn-disabled-border-color: var(--hs-primary);
}
.modal-sheet-view .btn-outline-secondary,
.sheet-view .btn-outline-secondary,
.modal-sheet-view .btn-outline-primary,
.sheet-view .btn-outline-primary {
    --bs-btn-color: var(--hs-primary);
    --bs-btn-border-color: var(--hs-line-strong);
    --bs-btn-hover-bg: var(--hs-primary);
    --bs-btn-hover-border-color: var(--hs-primary);
    --bs-btn-active-bg: var(--hs-primary-dark);
    --bs-btn-active-border-color: var(--hs-primary-dark);
}
.modal-sheet-view .btn-success,
.sheet-view .btn-success {
    --bs-btn-bg: var(--hs-good-solid);
    --bs-btn-border-color: var(--hs-good-solid);
    --bs-btn-hover-bg: var(--hs-good-solid-hover);
    --bs-btn-hover-border-color: var(--hs-good-solid-hover);
    --bs-btn-active-bg: var(--hs-good-solid-hover);
    --bs-btn-active-border-color: var(--hs-good-solid-hover);
    --bs-btn-disabled-bg: var(--hs-good-solid);
    --bs-btn-disabled-border-color: var(--hs-good-solid);
}
.modal-sheet-view .btn-danger,
.sheet-view .btn-danger {
    --bs-btn-bg: var(--hs-bad-solid);
    --bs-btn-border-color: var(--hs-bad-solid);
    --bs-btn-hover-bg: var(--hs-bad-solid-hover);
    --bs-btn-hover-border-color: var(--hs-bad-solid-hover);
}
.modal-sheet-view .btn-warning,
.sheet-view .btn-warning {
    --bs-btn-bg: var(--hs-warn-solid);
    --bs-btn-border-color: var(--hs-warn-solid);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--hs-warn-solid-hover);
    --bs-btn-hover-border-color: var(--hs-warn-solid-hover);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}
.modal-sheet-view .btn-outline-success,
.sheet-view .btn-outline-success {
    --bs-btn-color: var(--hs-good-fg);
    --bs-btn-border-color: var(--hs-good-br);
    --bs-btn-hover-bg: var(--hs-good-solid);
    --bs-btn-hover-border-color: var(--hs-good-solid);
}
.modal-sheet-view .btn-outline-danger,
.sheet-view .btn-outline-danger {
    --bs-btn-color: var(--hs-bad-fg);
    --bs-btn-border-color: var(--hs-bad-br);
    --bs-btn-hover-bg: var(--hs-bad-solid);
    --bs-btn-hover-border-color: var(--hs-bad-solid);
}
.modal-sheet-view .form-control,
.sheet-view .form-control,
.modal-sheet-view .form-select,
.sheet-view .form-select {
    border-radius: var(--hs-radius-sm);
    border-color: var(--hs-line-strong);
    color: var(--hs-text-soft);
}
.modal-sheet-view .form-control:focus,
.sheet-view .form-control:focus,
.modal-sheet-view .form-select:focus,
.sheet-view .form-select:focus {
    border-color: var(--hs-primary);
    box-shadow: 0 0 0 3px var(--hs-focus);
}
.modal-sheet-view .form-label,
.sheet-view .form-label {
    font-size: var(--hs-fs-sm);
    font-weight: 600;
    color: var(--hs-muted);
    margin-bottom: .25rem;
}

/* Etichetele de stare (badge) devin din pastile pline etichete „soft" — fundal deschis,
   text inchis, contur — ca sa se citeasca drept eticheta, nu drept alarma. Aceeasi familie
   ca `.pq-badge` din coada magaziei, deci fisa si magazia arata la fel. */
.modal-sheet-view .badge,
.sheet-view .badge {
    border-radius: 4px;
    font-weight: 600;
    font-size: var(--hs-fs-xs);
    padding: .2em .5em;
    border: 1px solid transparent;
}
.modal-sheet-view .badge.bg-success,
.sheet-view .badge.bg-success {
    background: var(--hs-good-bg) !important;
    color: var(--hs-good-fg);
    border-color: var(--hs-good-br);
}
.modal-sheet-view .badge.bg-danger,
.sheet-view .badge.bg-danger {
    background: var(--hs-bad-bg) !important;
    color: var(--hs-bad-fg);
    border-color: var(--hs-bad-br);
}
.modal-sheet-view .badge.bg-warning,
.sheet-view .badge.bg-warning {
    background: var(--hs-warn-bg) !important;
    color: var(--hs-warn-fg) !important;
    border-color: var(--hs-warn-br);
}
.modal-sheet-view .badge.bg-info,
.sheet-view .badge.bg-info {
    background: var(--hs-info-bg) !important;
    color: var(--hs-info-fg);
    border-color: var(--hs-info-br);
}
.modal-sheet-view .badge.bg-secondary,
.sheet-view .badge.bg-secondary {
    background: var(--hs-neutral-bg) !important;
    color: var(--hs-neutral-fg);
    border-color: var(--hs-neutral-br);
}

/* Alertele Bootstrap din fragmente — acelasi ton soft ca badge-urile. */
.modal-sheet-view .alert-info,
.sheet-view .alert-info {
    background: var(--hs-info-bg);
    border-color: var(--hs-info-br);
    color: var(--hs-info-fg);
}
.modal-sheet-view .alert-warning,
.sheet-view .alert-warning {
    background: var(--hs-warn-bg);
    border-color: var(--hs-warn-br);
    color: var(--hs-warn-fg);
}

/* Cardurile ramase in fragmente (facturare, piese) — plate, pe aceleasi contururi. */
.modal-sheet-view .card,
.sheet-view .card {
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    box-shadow: none;
}
.modal-sheet-view .card-header,
.sheet-view .card-header {
    background: var(--hs-neutral-bg);
    border-bottom: 1px solid var(--hs-line);
    font-weight: 600;
    font-size: var(--hs-fs-md);
    color: var(--hs-text-soft);
}
.modal-sheet-view .card-header i,
.sheet-view .card-header i { color: var(--hs-primary); }
.modal-sheet-view dl dt,
.sheet-view dl dt { font-weight: 600; color: var(--hs-muted); font-size: var(--hs-fs-sm); }
.modal-sheet-view dl dd,
.sheet-view dl dd { font-size: var(--hs-fs-md); color: var(--hs-text-soft); }

/* Scrollbar-uri discrete pe zonele care deruleaza intern. */
.modal-sheet-view .tab-content::-webkit-scrollbar,
.modal-sheet-view .sv-side::-webkit-scrollbar,
.modal-sheet-view .card-body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.modal-sheet-view .tab-content::-webkit-scrollbar-thumb,
.modal-sheet-view .sv-side::-webkit-scrollbar-thumb,
.modal-sheet-view .card-body::-webkit-scrollbar-thumb {
    background: #cfd6de;
    border-radius: 4px;
}
.modal-sheet-view .tab-content::-webkit-scrollbar-thumb:hover,
.modal-sheet-view .sv-side::-webkit-scrollbar-thumb:hover,
.modal-sheet-view .card-body::-webkit-scrollbar-thumb:hover {
    background: #b9c2cd;
}

/* Loader pe zona reimprospatata (overlay translucid + spinner), cat dureaza actiunea. */
.modal-sheet-view [data-refresh-zone] {
    position: relative;
}
.zone-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .66);
    z-index: 5;
    border-radius: inherit;
}
.zone-loader .spinner-border {
    color: var(--hs-primary);
}

/* Toolbar de adaugare (piese) — bara pe suprafata alternativa, in acelasi ton cu `.sv-toolbar`. */
.modal-sheet-view .sheet-add-bar,
.sheet-view .sheet-add-bar {
    background: var(--hs-surface-alt);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    padding: .5rem .6rem;
    box-shadow: none;
}

/* Skeleton loader pentru continutul modalului (shimmer), in locul spinner-ului. */
.sheet-skeleton {
    padding: .25rem;
}
.sheet-skeleton .sk {
    background: linear-gradient(90deg, #eef0f2 25%, #e3e7ea 37%, #eef0f2 63%);
    background-size: 400% 100%;
    animation: sk-shimmer 1.4s ease infinite;
    border-radius: var(--hs-radius-sm);
}
.sheet-skeleton .sk-header {
    height: 68px;
    margin-bottom: .75rem;
}
.sheet-skeleton .sk-tabs {
    display: flex;
    gap: .4rem;
    margin-bottom: 1rem;
}
.sheet-skeleton .sk-tab {
    height: 38px;
    flex: 1;
}
.sheet-skeleton .sk-panel {
    height: 340px;
}
@keyframes sk-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .sheet-skeleton .sk { animation: none; }
}

/* Empty-states in tab-urile fisei (iconita contextuala + text discret). */
.sheet-empty {
    text-align: center;
    color: var(--hs-subtle);
    padding: 2.25rem 1rem;
    font-size: var(--hs-fs-md);
}
.sheet-empty i {
    display: block;
    font-size: 1.7rem;
    margin-bottom: .45rem;
    opacity: .55;
}

/* Animatie de intrare a modalului de fisa (scale + fade), peste default-ul Bootstrap. */
.modal.fade .modal-sheet-view.modal-dialog {
    transition: transform .25s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
    transform: scale(.98) translateY(6px);
    opacity: 0;
}
.modal.fade.show .modal-sheet-view.modal-dialog {
    transform: none;
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-sheet-view.modal-dialog {
        transition: none;
        transform: none;
    }
}

/* Tabele „enterprise": antet cu fundal si eticheta uppercase, randuri fine, hover discret,
   numere tabulare. Scopat pe .tab-content ca sa nu atinga tabelele din alte module. */
.modal-sheet-view .tab-content table,
.sheet-view .tab-content table {
    font-size: var(--hs-fs-sm);
    border-color: var(--hs-line-soft);
}
.modal-sheet-view .tab-content thead th,
.sheet-view .tab-content thead th {
    background: var(--hs-neutral-bg);
    border-bottom: 1px solid var(--hs-line);
    text-transform: uppercase;
    font-size: var(--hs-fs-xs);
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--hs-muted);
    padding-top: .5rem;
    padding-bottom: .5rem;
    white-space: nowrap;
}
.modal-sheet-view .tab-content tbody td,
.sheet-view .tab-content tbody td {
    border-top: 1px solid var(--hs-line-soft);
    vertical-align: middle;
    color: var(--hs-text-soft);
}
.modal-sheet-view .tab-content tbody tr:hover > td,
.sheet-view .tab-content tbody tr:hover > td { background: var(--hs-surface-alt); }
.modal-sheet-view .tab-content td.text-end,
.sheet-view .tab-content td.text-end,
.modal-sheet-view .tab-content th.text-end,
.sheet-view .tab-content th.text-end { font-variant-numeric: tabular-nums; }
.modal-sheet-view .tab-content tfoot td,
.sheet-view .tab-content tfoot td {
    border-top: 1px solid var(--hs-line);
    background: var(--hs-surface-alt);
    color: var(--hs-text);
}

/* Lista de fise (/sheet) — aspect mai „enterprise": header uppercase discret, randuri aerisite,
   dot colorat pentru status (contrast garantat indiferent de culoarea din DB). */
#sheets-table thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
    font-weight: 600;
    color: #6c757d;
    white-space: nowrap;
    border-bottom: 2px solid #e9ecef;
}
#sheets-table tbody td {
    vertical-align: middle;
    padding-top: .6rem;
    padding-bottom: .6rem;
    font-size: 12px;
    border-top: 1px solid #f3f4f6;
}
#sheets-table tbody tr:hover > td {
    background-color: #f8f9fb;
}
#sheets-table .sheet-nr {
    color: var(--hs-primary);
    font-variant-numeric: tabular-nums;
}
#sheets-table .sheet-nr:hover {
    text-decoration: underline;
}
/* Subrand discret (localitate sub client, model sub dispozitiv). */
#sheets-table .sheet-subline {
    font-size: 11px;
    color: #adb5bd;
    line-height: 1.2;
    margin-top: 1px;
}
/* Codurile externe de sub tipul fisei („S.E." = solicitare externa, „I.C."): eticheta scoasa
   in evidenta, valoarea cu cifre tabulare, ca doua coduri suprapuse sa se compare din ochi. */
#sheets-table .sheet-code {
    white-space: normal;
    word-break: break-word;
    font-variant-numeric: tabular-nums;
}
#sheets-table .sheet-code__label {
    color: #868e96;
    font-weight: 600;
    margin-right: 3px;
}

/* Fisa extinsa (retus / reprogramare / montaj piesa): poarta ACELASI numar ca fisa-mama,
   deci insigna de sub numar e singurul lucru care le deosebeste in lista. Subtipul sta pe randul
   de sub insigna: coloana „Nr fișă" e ingusta, iar alaturi eticheta ori o largea, ori se rupea
   neregulat de la un rand la altul. Pe verticala, cele trei niveluri se citesc de sus in jos:
   numar -> „e o fisa extinsa" -> ce fel de extindere. */
#sheets-table .sheet-ext-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin-top: 2px;
}
/* Insigna poarta culoarea aplicatiei, nu pe cea a subtipului: ea spune „e o fisa extinsa",
   iar culoarea subtipului ramane pe jetonul de langa. */
#sheets-table .sheet-ext-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 .4rem;
    border-radius: 999px;
    background: #eef4f8;
    border: 1px solid #d5e3ee;
    color: #134a6d;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
#sheets-table .sheet-ext-badge i { font-size: 10px; }
#sheets-table .sheet-ext-type {
    font-size: 11px;
    color: #adb5bd;
    line-height: 1.2;
    white-space: normal;
}
#sheets-table .sheet-ext-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: 1px;
}
/* Status ca pastila neutra cu dot colorat — lizibila pe orice culoare de status. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .15rem .55rem;
    border-radius: 999px;
    background: #f1f3f5;
    border: 1px solid #e9ecef;
    font-size: 11px;
    font-weight: 600;
    color: #495057;
    white-space: nowrap;
}
/* Coloana „Nr fișă" e ingusta: numarul ramane nerupt, dar eticheta fisei extinse
   („Montaj piesă" etc.) trebuie sa se poata rupe, altfel largeste ea coloana. */
#sheets-table td.tbl-primary .sheet-subline {
    white-space: normal;
}
/* Coloanele cu pastila („Tip fișă", „Status") sunt inguste: pastila trebuie sa se rupa pe
   doua randuri, nu sa iasa din celula. */
#sheets-table td .status-pill {
    white-space: normal;
    align-items: flex-start;
    text-align: left;
    line-height: 1.25;
}
#sheets-table td .status-dot {
    margin-top: 3px;
}
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .05);
}
/* Chrome DataTables rafinat (search / paginare / info) pentru lista de fise. */
#sheets-table_wrapper .dt-search input,
#sheets-table_wrapper .dt-length select {
    border-radius: 6px;
}
#sheets-table_wrapper .dt-info {
    color: #adb5bd;
    font-size: 12px;
}
#sheets-table_wrapper .dt-paging .page-link {
    border-radius: 6px;
    margin: 0 2px;
    border-color: #e9ecef;
    font-size: 12px;
}

/* Lista clienti — port din legacy css/pages/customer.css (#list_customers). */
#list_customers thead th { padding: 7px; }
#list_customers tbody td { padding: 4px; }
#list_customers .list_customers_nr { width: 30px !important; text-align: center; }
#list_customers .list_customers_fullname { width: auto !important; }
#list_customers .list_customers_location { width: 170px !important; }
#list_customers .list_customers_email { width: 200px !important; }
#list_customers .list_customers_phone { width: 125px !important; text-align: center; }
#list_customers .list_customers_operator { width: 125px !important; text-align: center; }
#list_customers .list_customers_date_created { width: 120px !important; text-align: center; }
#list_customers .list_customers_view { width: 20px !important; text-align: center; }

/* ============================================================================
   LAYOUTUL FISEI (.sheet-view) — antet de inregistrare, spatiu de lucru cu
   tab-uri grupate si inspector lateral.

   Scopat pe `.sheet-view`, nu pe `.modal-sheet-view`: acelasi partial serveste
   si pagina completa /sheet/view, care trebuie sa arate identic. Doar regulile
   de INALTIME (scroll intern in loc de pagina care creste) raman scopate pe
   modal, unde inaltimea e fixa (92vh).

   Culorile vin exclusiv din tokenii `--hs-*`; niciun hex in acest bloc.
   ============================================================================ */

/* ---- 1. Antetul de inregistrare (banda navy) ----
   Aceeasi identitate vizuala ca headerul clientului (.hs-record): banda in culoarea de brand
   duce numarul fisei, starea, comenzile care schimba fisa ca intreg si „faptele" ei. Pe navy,
   toate culorile dinauntru se inverseaza prin tokenii `--hs-on-navy-*` — altfel textul gri,
   jetoanele „soft" si butoanele cu contur gri ar cadea sub pragul de contrast.
   In modal, banda continua bara de titlu (vezi mai jos): impreuna sunt un singur cap de
   inregistrare, iar spatiul de lucru de dedesubt ramane deschis si calm. */
.sheet-view .sv-head {
    /* Gradient VERTICAL, nu diagonal: in modal banda porneste exact din culoarea barei de
       titlu (`--hs-navy-1`) si coboara — cele doua suprafete se continua fara treapta. */
    background: linear-gradient(180deg, var(--hs-navy-1) 0%, var(--hs-navy-2) 100%);
    border: 1px solid var(--hs-navy-line);
    border-radius: var(--hs-radius);
    margin-bottom: .7rem;
    overflow: hidden;
}
/* Fisa inchisa/anulata: dunga de accent la stanga, ca starea sa se vada din prima. */
.sheet-view .sv-head.is-locked { border-left: 3px solid var(--hs-on-navy-line); }
.sheet-view .sv-head-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .65rem .9rem;
}
.sheet-view .sv-ident {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding-bottom: .3rem;
}
.sheet-view .sv-ident-nr {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hs-on-navy);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
}
/* Statusul: jeton translucid + bulina in culoarea din baza de date. Culoarea vine din
   `config_status`, deci nu poate fi garantata pentru contrast — o purtam pe un punct,
   nu pe fundal, iar textul ramane alb. */
.sheet-view .sv-ident-status {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: var(--hs-fs-sm);
    font-weight: 600;
    color: var(--hs-on-navy);
    background: var(--hs-on-navy-fill);
    border: 1px solid var(--hs-on-navy-line);
    border-radius: var(--hs-radius-sm);
    padding: .2rem .55rem;
}
.sheet-view .sv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .25);
}
.sheet-view .sv-flag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--hs-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 4px;
    padding: .2rem .5rem;
    background: var(--hs-on-navy-fill);
    color: var(--hs-on-navy);
    border: 1px solid var(--hs-on-navy-line);
}
.sheet-view .sv-flag--danger {
    background: rgba(255, 138, 128, .18);
    color: var(--hs-bad-on-navy);
    border-color: rgba(255, 138, 128, .38);
}

/* Comenzile fisei: selecturi etichetate + actiuni, aliniate pe linia de baza. */
.sheet-view .sv-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .5rem;
    margin-left: auto;
}
.sheet-view .sv-field {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
.sheet-view .sv-field-label {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-on-navy-soft);
    margin: 0;
}
/* Selecturile raman ALBE pe banda navy: sunt singurele zone editabile din antet, iar
   contrastul lor le arata exact ca atare. */
.sheet-view .sv-head .form-select {
    border-color: transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.sheet-view .sv-head .form-select:focus {
    border-color: transparent;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
}
/* Fiecare actiune e un formular propriu (status / tip / deviz / inchidere / anulare):
   nu se comprima, ca butoanele sa nu fie taiate cand antetul e stramt — se rup pe rand nou. */
.sheet-view .sv-controls > form { flex: 0 0 auto; }
.sheet-view .sv-controls-sep {
    width: 1px;
    height: 26px;
    align-self: flex-end;
    margin: 0 .2rem .15rem;
    background: var(--hs-on-navy-line);
}
.sheet-view .sv-btn-icon { padding-left: .5rem; padding-right: .5rem; }

/* Butoanele din banda navy — variantele „pe navy" ale paletei semantice. */
.sheet-view .sv-head .btn-outline-secondary {
    --bs-btn-color: var(--hs-on-navy);
    --bs-btn-border-color: var(--hs-on-navy-line);
    --bs-btn-hover-color: var(--hs-on-navy);
    --bs-btn-hover-bg: var(--hs-on-navy-fill);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
    --bs-btn-active-color: var(--hs-on-navy);
    --bs-btn-active-bg: var(--hs-on-navy-fill-2);
    --bs-btn-active-border-color: rgba(255, 255, 255, .6);
}
.sheet-view .sv-head .btn-success {
    --bs-btn-bg: var(--hs-good-on-navy);
    --bs-btn-border-color: rgba(255, 255, 255, .25);
    --bs-btn-hover-bg: var(--hs-good-on-navy-hover);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .45);
    --bs-btn-active-bg: var(--hs-good-on-navy-hover);
}
.sheet-view .sv-head .btn-warning {
    --bs-btn-bg: var(--hs-warn-on-navy);
    --bs-btn-color: #1f2a37;
    --bs-btn-border-color: var(--hs-warn-on-navy);
    --bs-btn-hover-bg: var(--hs-warn-on-navy-hover);
    --bs-btn-hover-color: #1f2a37;
    --bs-btn-hover-border-color: var(--hs-warn-on-navy-hover);
    --bs-btn-active-color: #1f2a37;
}
.sheet-view .sv-head .btn-outline-danger {
    --bs-btn-color: var(--hs-bad-on-navy);
    --bs-btn-border-color: rgba(255, 138, 128, .45);
    --bs-btn-hover-color: var(--hs-on-navy);
    --bs-btn-hover-bg: var(--hs-bad-solid);
    --bs-btn-hover-border-color: var(--hs-bad-solid);
    --bs-btn-active-bg: var(--hs-bad-solid-hover);
}

/* Faptele fisei — perechi cheie/valoare pe a doua zona a benzii, despartite prin linii fine.
   Fara chenar propriu pe fiecare: sase casete conturate faceau antetul zgomotos. */
.sheet-view .sv-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: .45rem .9rem;
    background: var(--hs-navy-sunken);
    border-top: 1px solid var(--hs-on-navy-line);
}
.sheet-view .sv-fact {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    font-size: var(--hs-fs-sm);
    padding: .15rem .8rem .15rem 0;
    margin-right: .8rem;
    border-right: 1px solid var(--hs-on-navy-line);
    max-width: 100%;
}
.sheet-view .sv-fact:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.sheet-view .sv-fact > i {
    color: var(--hs-on-navy-faint);
    font-size: var(--hs-fs-sm);
    align-self: center;
}
.sheet-view .sv-fact-k {
    color: var(--hs-on-navy-soft);
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sheet-view .sv-fact-v {
    color: var(--hs-on-navy);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sheet-view a.sv-fact-v { text-decoration: none; color: var(--hs-on-navy); }
.sheet-view a.sv-fact-v:hover { text-decoration: underline; }
.sheet-view .sv-fact.is-empty .sv-fact-v { color: var(--hs-on-navy-faint); font-weight: 500; font-style: italic; }
/* Cine raspunde la numarul fisei, cand nu e clientul (contact propriu al interventiei). */
.sheet-view .sv-fact-sub {
    color: var(--hs-on-navy-faint);
    font-size: var(--hs-fs-2xs);
    font-weight: 500;
    white-space: nowrap;
}

/* ---- 2. Spatiul de lucru + 3. inspectorul ---- */
.sheet-view .sheet-view-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: .7rem;
    align-items: start;
}
@media (max-width: 1399.98px) {
    .sheet-view .sheet-view-main { grid-template-columns: minmax(0, 1fr) 300px; }
}
@media (max-width: 991.98px) {
    .sheet-view .sheet-view-main { grid-template-columns: minmax(0, 1fr); }
}
.sheet-view .sheet-view-tabs { min-width: 0; }

/* Navigarea intre sectiunile fisei a trecut de la o bara de tab-uri orizontala la rail-ul
   vertical `.sv-rail` (vezi „FIȘA TEHNICĂ — navigare pe rail vertical", mai jos): stilurile
   barei nu mai au corespondent in markup si au fost scoase. */

/* Panoul de continut: canvas, nu alb — sectiunile albe dinauntru devin cardurile care
   poarta informatia, iar spatiul dintre ele se citeste ca structura. */

/* Inspectorul lateral: panouri compacte, unul sub altul, in ordinea in care se folosesc. */
.sheet-view .sv-side {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    min-width: 0;
}
.sheet-view .sv-side .sv-section-body { padding: .75rem; }
.sheet-view .sv-side .form-label { font-size: var(--hs-fs-xs); margin-bottom: .2rem; }
/* Coloana e ingusta (320px): controalele cu latime intrinseca mare (datetime-local) trebuie
   sa poata scadea, altfel imping butonul de langa ele in afara panoului. */
.sheet-view .sv-side .form-control,
.sheet-view .sv-side .form-select { min-width: 0; }

/* Bara de actiune din capul unei sectiuni (adaugare manopera / incarcare document). */
.sheet-view .sv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .6rem .75rem;
    background: var(--hs-neutral-bg);
    border-bottom: 1px solid var(--hs-line-soft);
}

/* Select2 se randeaza cu `width: 100%` (lib/select2-init.js), asa ca in bara de adaugare umplea
   randul si impingea butonul „Adaugă" dedesubt — desi in HTML sta imediat dupa select. Aici
   selectul creste cat ii permite bara (denumirile de manopera sunt lungi: „004 Deplasare/
   Constatare Hota - post garantie"), iar butonul ramane lipit de marginea din dreapta. */
.sheet-view .sv-toolbar .select2-container { flex: 1 1 auto; max-width: 720px; min-width: 0; }
.sheet-view .sv-toolbar > .btn { flex: 0 0 auto; margin-left: auto; }

/* ── Zona de incarcare a documentelor (drag & drop + coada cu progres) ─────────────────── */
.hs-upload {
    padding: .85rem;
    background: var(--hs-surface-alt);
    border-bottom: 1px solid var(--hs-line-soft);
}
/* Suprafata de drop: punctata cat e goala, plina si pe brand cand primeste fisiere. */
.hs-upload__drop {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: 1rem 1.1rem;
    background: var(--hs-surface);
    border: 1.5px dashed var(--hs-line);
    border-radius: var(--hs-radius);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.hs-upload__drop:hover,
.hs-upload__drop:focus-within {
    border-color: var(--hs-primary);
    background: var(--hs-primary-soft);
    outline: none;
}
/* Inputul e vizual ascuns, dar ramane focusabil cu Tab: inelul de focus se muta pe eticheta,
   altfel navigarea de la tastatura n-ar avea niciun indiciu vizibil. */
.hs-upload__drop:focus-within { box-shadow: 0 0 0 3px var(--hs-focus); }
/* Fisier deasupra zonei: contur continuu, ca sa se vada ca „prinde". */
.hs-upload__drop.is-over {
    border-style: solid;
    border-color: var(--hs-primary);
    background: var(--hs-primary-soft);
    box-shadow: inset 0 0 0 1px var(--hs-primary);
}
.hs-upload__drop.is-disabled { pointer-events: none; opacity: .6; }
.hs-upload__icon {
    font-size: 1.6rem;
    color: var(--hs-primary);
    flex: 0 0 auto;
    line-height: 1;
}
.hs-upload__copy { min-width: 0; }
.hs-upload__title {
    font-size: var(--hs-fs-sm, 13px);
    font-weight: 600;
    color: var(--hs-text);
}
.hs-upload__or { color: var(--hs-subtle); font-weight: 400; margin: 0 .15rem; }
.hs-upload__browse { color: var(--hs-primary); text-decoration: underline; }
.hs-upload__hint {
    font-size: 11px;
    color: var(--hs-muted);
    margin-top: .1rem;
}
/* Inputul real: ascuns, dar in DOM — zona intreaga il declanseaza. */
.hs-upload__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Coada de fisiere alese, inainte si in timpul trimiterii. */
.hs-upload__queue {
    margin-top: .6rem;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
    background: var(--hs-surface);
    overflow: hidden;
}
.hs-upload__item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--hs-line-soft);
}
.hs-upload__item:last-child { border-bottom: 0; }
.hs-upload__item--done { background: var(--hs-good-bg); }
.hs-upload__item--error { background: var(--hs-bad-bg); }
.hs-upload__item-icon { color: var(--hs-subtle); flex: 0 0 auto; }
.hs-upload__item-body { flex: 1 1 auto; min-width: 0; }
.hs-upload__item-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--hs-text-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hs-upload__item-meta { font-size: 11px; color: var(--hs-muted); }
/* Progresul fisierului curent. */
.hs-upload__bar {
    height: 3px;
    margin-top: .3rem;
    background: var(--hs-line);
    border-radius: 999px;
    overflow: hidden;
}
.hs-upload__bar span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--hs-primary);
    transition: width .15s linear;
}
.hs-upload__state {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--hs-muted);
}
.hs-upload__state--ok { color: var(--hs-good-fg); }
.hs-upload__state--bad { color: var(--hs-bad-fg); }
.hs-upload__remove {
    flex: 0 0 auto;
    padding: 0 .25rem;
    color: var(--hs-subtle);
    text-decoration: none;
    line-height: 1;
}
.hs-upload__remove:hover { color: var(--hs-bad-fg); }

.hs-upload__actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .6rem;
}
.hs-upload__summary {
    flex: 1 1 auto;
    font-size: 11px;
    color: var(--hs-muted);
}

/* ── Lista de documente a fisei ────────────────────────────────────────────────────────── */
/* Bara de unelte: contor, cautare, mod de afisare. */
.hs-doclist-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    border-bottom: 1px solid var(--hs-line-soft);
}
.hs-doclist-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--hs-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}
.hs-doclist-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 280px;
    margin-left: auto;
}
.hs-doclist-search .bi {
    position: absolute;
    left: .55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hs-subtle);
    font-size: 12px;
    pointer-events: none;
}
.hs-doclist-search input { padding-left: 1.85rem; }
.hs-doclist-modes .btn { padding: .2rem .45rem; }

/* Randul de document. Acelasi markup in ambele moduri — comuta doar dispunerea. */
.hs-doc {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem .85rem;
    border-bottom: 1px solid var(--hs-line-soft);
    transition: background-color .1s ease;
}
.hs-doc:last-child { border-bottom: 0; }
.hs-doc:hover { background: var(--hs-surface-alt); }

/* Miniatura: poza reala pentru imagini, iconita de tip pentru rest. */
.hs-doc__thumb {
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: var(--hs-radius-sm);
    overflow: hidden;
    background: var(--hs-neutral-bg);
    border: 1px solid var(--hs-line);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hs-doc__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Iconita se vede doar cand nu exista miniatura (sau cand aceasta n-a putut fi produsa). */
.hs-doc__thumb .bi { display: none; font-size: 1.05rem; color: var(--hs-subtle); }
.hs-doc__thumb--icon .bi { display: block; }

.hs-doc__body { flex: 1 1 auto; min-width: 0; }
.hs-doc__name {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hs-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Metadatele pe un singur rand, separate cu puncte — mai compact decat patru coloane de tabel,
   si nu mai depinde de latimi fixe care se rup la nume lungi. */
.hs-doc__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .1rem;
    font-size: 11px;
    color: var(--hs-muted);
}
.hs-doc__meta > span + span::before {
    content: '·';
    margin-right: .5rem;
    color: var(--hs-subtle);
}
.hs-doc__type {
    font-weight: 700;
    color: var(--hs-brand-fg);
    text-transform: uppercase;
    letter-spacing: .03em;
}
.hs-doc__actions {
    flex: 0 0 auto;
    display: inline-flex;
    gap: .25rem;
    /* Actiunile stau discret pana la hover, ca in tabelele enterprise. */
    opacity: .5;
    transition: opacity .1s ease;
}
.hs-doc:hover .hs-doc__actions,
.hs-doc:focus-within .hs-doc__actions { opacity: 1; }
@media (hover: none) {
    .hs-doc__actions { opacity: 1; }
}

/* Modul „miniaturi": poza devine subiectul randului, nu numele fisierului. */
.hs-doclist[data-mode="grid"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .6rem;
    padding: .75rem .85rem;
}
.hs-doclist[data-mode="grid"] .hs-doc {
    display: block;
    position: relative;
    padding: 0;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
    overflow: hidden;
    background: var(--hs-surface);
}
.hs-doclist[data-mode="grid"] .hs-doc:hover {
    border-color: var(--hs-primary);
    box-shadow: var(--hs-shadow-sm);
}
.hs-doclist[data-mode="grid"] .hs-doc__thumb {
    width: 100%;
    height: 108px;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--hs-line-soft);
}
.hs-doclist[data-mode="grid"] .hs-doc__thumb .bi { font-size: 1.8rem; }
.hs-doclist[data-mode="grid"] .hs-doc__body { padding: .45rem .55rem; }
.hs-doclist[data-mode="grid"] .hs-doc__meta { font-size: 10px; gap: .35rem; }
.hs-doclist[data-mode="grid"] .hs-doc__meta > span + span::before { margin-right: .35rem; }
/* Numele autorului si data incarca prea mult cartonasul: raman in modul lista. */
.hs-doclist[data-mode="grid"] .hs-doc__by { display: none; }
.hs-doclist[data-mode="grid"] .hs-doc__actions {
    position: absolute;
    top: .35rem;
    right: .35rem;
    padding: .15rem;
    border-radius: var(--hs-radius-sm);
    background: rgba(255, 255, 255, .92);
    box-shadow: var(--hs-shadow-sm);
    opacity: 0;
}
.hs-doclist[data-mode="grid"] .hs-doc:hover .hs-doc__actions,
.hs-doclist[data-mode="grid"] .hs-doc:focus-within .hs-doc__actions { opacity: 1; }
@media (hover: none) {
    .hs-doclist[data-mode="grid"] .hs-doc__actions { opacity: 1; }
}

/* Limita de incarcare, langa selectorul de fisier. */
.sheet-view .sv-toolbar .sv-doc-limit { flex: 0 0 auto; }

/* Subtitlu de grup in interiorul unei sectiuni (Localitate / Stradă / Acces). */
.sheet-view .sv-group-title {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle);
    padding-bottom: .3rem;
    margin-bottom: .6rem;
    border-bottom: 1px dashed var(--hs-line);
}

/* Nota informativa in interiorul unei sectiuni (mai discreta decat .alert). */
.sheet-view .sv-note {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: var(--hs-fs-sm);
    color: var(--hs-info-fg);
    background: var(--hs-info-bg);
    border: 1px solid var(--hs-info-br);
    border-radius: var(--hs-radius-sm);
    padding: .45rem .65rem;
}

/* Ce contact se foloseste EFECTIV pentru fisa (tab-ul Adresa si contact): campurile goale din
   formular inseamna „ia-l de la client”, deci rezultatul trebuie aratat undeva. */
.sheet-view .sv-contact-effective {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-top: .2rem;
    padding: .5rem .65rem;
    font-size: var(--hs-fs-sm);
    color: var(--hs-muted);
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
}
.sheet-view .sv-contact-effective > .bi { color: var(--hs-subtle); }
.sheet-view .sv-contact-effective strong { color: var(--hs-text, #344054); }
.sheet-view .sv-contact-src {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hs-primary, #134a6d);
}

/* Contor discret in antetul unei sectiuni + text secundar + lista compacta (inspector). */
/* Lipit de titlu cand antetul mai are ceva la dreapta (un buton de actiune); impins la
   capat cand contorul e singurul lucru de dupa titlu. */
.sheet-view .sv-count {
    margin-left: .15rem;
    font-size: var(--hs-fs-xs);
    font-weight: 700;
    color: var(--hs-muted);
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: 999px;
    padding: 0 .45rem;
    line-height: 1.5;
}
.sheet-view .sv-section-head > .sv-count:last-child { margin-left: auto; }
.sheet-view .sv-muted { font-size: var(--hs-fs-sm); color: var(--hs-subtle); margin: 0; }
.sheet-view .sv-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .5rem;
    border: 1px solid var(--hs-line-soft);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface-alt);
}
.sheet-view .sv-list-item + .sv-list-item { margin-top: .35rem; }
/* Randul-legatura din „Fișe extinse": tot randul e clicabil, deci se comporta ca un rand de
   lista, nu ca un link — fara subliniere, culoarea textului nemodificata, iar starea de hover
   o marcheaza fundalul si sageata din dreapta. */
.sheet-view a.sv-list-item--link { text-decoration: none; color: inherit; cursor: pointer; }
.sheet-view a.sv-list-item--link:hover,
.sheet-view a.sv-list-item--link:focus-visible {
    background: var(--hs-surface);
    border-color: var(--hs-line);
    box-shadow: var(--hs-shadow-sm, 0 1px 2px rgba(16, 24, 40, .06));
}
.sheet-view a.sv-list-item--link:focus-visible { outline: 2px solid var(--hs-primary, #134a6d); outline-offset: 1px; }
.sheet-view .sv-list-go { font-size: .75rem; color: var(--hs-subtle); flex: 0 0 auto; }
.sheet-view a.sv-list-item--link:hover .sv-list-go { color: var(--hs-ink); }
.sheet-view .sv-list-main { display: flex; flex-direction: column; min-width: 0; }
.sheet-view .sv-list-title { font-size: var(--hs-fs-md); font-weight: 600; color: var(--hs-ink); }
.sheet-view .sv-list-sub { font-size: var(--hs-fs-xs); color: var(--hs-subtle); }

/* ---- Inaltimi: doar in modal, unde cadrul e fix (92vh) ----
   Lant flex de la .modal-body pana la panourile care deruleaza intern: tab-urile si
   inspectorul isi tin fiecare propriul scroll, antetul fisei ramane mereu vizibil. */
.modal-sheet-view .modal-body { display: flex; flex-direction: column; }
.modal-sheet-view .sheet-view {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* Antetul si panoul de inchidere NU se comprima: sunt flex items intr-un container cu
   inaltime fixa, iar default-ul (`flex-shrink: 1`) le turtea pana la disparitia randului
   de fapte atunci cand continutul tab-ului era mai inalt decat modalul. */
.modal-sheet-view .sheet-view > .sv-head,
.modal-sheet-view .sheet-view > .collapse,
.modal-sheet-view .sheet-view > .collapsing {
    flex: 0 0 auto;
}
.modal-sheet-view .sheet-view-main {
    flex: 1 1 auto;
    min-height: 0;
}
/* Bara de titlu a modalului si banda de identitate a fisei sunt amandoua navy: lipite, se
   citesc ca un singur cap de inregistrare. Banda se intinde pana la marginile modalului
   (marje negative peste padding-ul corpului), fara colturi rotunjite si fara contur lateral.
   Pe pagina completa /sheet/view nu exista bara de titlu, deci banda ramane card de sine
   statator — de aceea regula e scopata pe modal. */
.modal-sheet-view .modal-body { padding-top: 0; }
.modal-sheet-view .sheet-view > .sv-head {
    margin: 0 -1rem .85rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 6px 14px rgba(15, 58, 88, .18);
}
.modal-sheet-view .sheet-view > .sv-head.is-locked {
    border-left: 3px solid var(--hs-on-navy-line);
}
/* Fara linia de sub bara de titlu: ar taia in doua o suprafata continua. */
.modal-sheet-view .modal-header,
.modal-sheet-view .modal-header.modal-general-header {
    border-bottom: none;
    box-shadow: none;
}
@media (min-width: 992px) {
    .modal-sheet-view .sheet-view-main { align-items: stretch; }
    /* In modal, inaltimea e data de fereastra: rail-ul si continutul deruleaza fiecare in
       coloana lui, nu impreuna — altfel navigarea dispare in sus cand citesti un tab lung. */
    .modal-sheet-view .sheet-view-tabs { min-height: 0; }
    .modal-sheet-view .sv-split > .tab-content {
        min-height: 0;
        max-height: 100%;
        overflow-y: auto;
    }
    .modal-sheet-view .sv-rail {
        max-height: 100%;
        overflow-y: auto;
    }
    .modal-sheet-view .sv-side {
        max-height: 100%;
        overflow-y: auto;
        padding-right: .15rem;
    }
}

/* ---- Sectiunea (.sv-section): unitatea de continut a fisei ----
   Antet cu eticheta, corp cu campuri, footer cu actiunea de salvare. Fiecare e un <form>
   flex-column, cu h-100 -> inaltimi egale pe acelasi rand. */
.sv-section {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface);
    box-shadow: var(--hs-shadow-xs);
    overflow: hidden;
}
.sv-section + .sv-section { margin-top: .7rem; }
.sv-section-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    background: var(--hs-brand-bg);
    border-bottom: 1px solid var(--hs-brand-br);
    font-size: var(--hs-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-primary);
}
.sv-section-head i { color: var(--hs-primary); font-size: var(--hs-fs-md); }
.sv-section-body { padding: .85rem; flex: 1 1 auto; }
.sv-section-foot {
    padding: .5rem .85rem;
    border-top: 1px solid var(--hs-line-soft);
    background: var(--hs-surface-alt);
    display: flex;
    justify-content: flex-end;
}
/* Sectiunile din tab-ul Detalii stau una sub alta: distanta o da grila .row/.col,
   deci `.sv-section + .sv-section` nu se aplica acolo. */
.sv-details .sv-section + .sv-section { margin-top: 0; }

/* ---- Sectiunea „Programare" (coloana din dreapta a fisei) ----
   O fisa are cel mult O programare (UNIQUE pe complaint_id), deci sectiunea arata o STARE, nu
   o lista: starea in antet, intervalul intr-un card cu bara de accent, actiunile sub el, iar
   formularul de (re)programare apare doar cand e cerut. */

/* Starea, in dreapta titlului de sectiune. Antetul e uppercase/bold; jetonul se scoate din
   regula lui, altfel „Confirmată" ar arata ca inca un titlu. */
.sv-appt .sv-section-head .sv-appt-state {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--hs-fs-2xs);
    font-weight: 600;
    padding: .05rem .4rem;
    border-radius: 999px;
    border: 1px solid var(--hs-neutral-br);
    background: var(--hs-neutral-bg);
    color: var(--hs-neutral-fg);
}
.sv-appt .sv-section-head .sv-appt-state i { font-size: var(--hs-fs-2xs); color: inherit; }
.sv-appt .sv-section-head .sv-appt-state.is-ok {
    border-color: var(--hs-good-br);
    background: var(--hs-good-bg);
    color: var(--hs-good-fg);
}
.sv-appt .sv-section-head .sv-appt-state.is-wait {
    border-color: var(--hs-warn-br);
    background: var(--hs-warn-bg);
    color: var(--hs-warn-fg);
}

/* Cardul programarii: bara din stanga poarta starea (verde confirmat / chihlimbar in asteptare
   / gri trecut), asa incat sa se citeasca dintr-o privire, fara sa coloram tot panoul. */
.sv-appt-card {
    padding: .55rem .7rem;
    border: 1px solid var(--hs-line);
    border-left: 3px solid var(--hs-warn-solid);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface-alt);
}
.sv-appt-card.is-confirmed { border-left-color: var(--hs-good-solid); }
.sv-appt-card.is-past { border-left-color: var(--hs-subtle); }
.sv-appt-day {
    font-size: var(--hs-fs-xs);
    font-weight: 600;
    color: var(--hs-muted);
}
/* Ora e informatia cautata prima: cifre tabulare, ca doua programari sa se compare pe verticala. */
.sv-appt-hours {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--hs-ink);
    font-variant-numeric: tabular-nums;
}
.sv-appt-hours > i {
    font-size: var(--hs-fs-sm);
    font-weight: 400;
    color: var(--hs-subtle);
}
.sv-appt-dur {
    font-size: var(--hs-fs-xs);
    font-weight: 600;
    color: var(--hs-muted);
    background: var(--hs-neutral-bg);
    border: 1px solid var(--hs-neutral-br);
    border-radius: 999px;
    padding: 0 .35rem;
}
.sv-appt-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .4rem;
}
.sv-appt-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: var(--hs-fs-xs);
    color: var(--hs-muted);
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: 999px;
    padding: .05rem .45rem;
}
.sv-appt-chip i { color: var(--hs-subtle); }
.sv-appt-chip.is-now {
    border-color: var(--hs-warn-br);
    background: var(--hs-warn-bg);
    color: var(--hs-warn-fg);
}
.sv-appt-chip.is-past { color: var(--hs-subtle); }

/* Nota de sub card: confirmarea clientului, anularea anterioara, fisa inchisa. */
.sv-appt-note {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .5rem;
    font-size: var(--hs-fs-xs);
    line-height: 1.4;
    color: var(--hs-good-fg);
}
.sv-appt-note.is-canceled,
.sv-appt-note.is-locked {
    color: var(--hs-neutral-fg);
    background: var(--hs-neutral-bg);
    border: 1px solid var(--hs-neutral-br);
    border-radius: var(--hs-radius-sm);
    padding: .4rem .5rem;
}
.sv-appt-note i { margin-top: .1rem; }

/* Actiunile pe programarea existenta: etichete, nu doar iconite — sunt operatii cu efect
   asupra clientului (SMS de confirmare, eliberarea intervalului). */
.sv-appt-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .6rem;
}
.sv-appt-actions > form { display: contents; }
.sv-appt-actions .btn { flex: 1 1 auto; white-space: nowrap; }

/* Starea „fara programare": afirmatie scurta, nu un panou gol. */
.sv-appt-empty {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .1rem .6rem;
    font-size: var(--hs-fs-sm);
    color: var(--hs-muted);
}
.sv-appt-empty i { font-size: 1.1rem; color: var(--hs-subtle); }

/* ---- Sectiunea „Contact client" ----
   Aceleasi piese ca la „Programare" (.sv-appt-*): stare in antet, card cu bara de accent,
   actiuni sub el. Aici se adauga starea „restant" — un termen depasit si nebifat nu e o
   asteptare, ci o sarcina scapata — si caile de contact, ca actiuni. */
.sheet-view .sv-section-head .sv-appt-state.is-late,
.sv-appt-card.is-late { border-color: var(--hs-bad-br); }
.sheet-view .sv-section-head .sv-appt-state.is-late {
    background: var(--hs-bad-bg);
    color: var(--hs-bad-fg);
}
.sv-appt-card.is-late { border-left-color: var(--hs-bad-solid); }
.sv-appt-chip.is-late {
    border-color: var(--hs-bad-br);
    background: var(--hs-bad-bg);
    color: var(--hs-bad-fg);
}

/* Telefonul si e-mailul: butoane de apelare, nu text de copiat cu mana. */
.sv-contact-ways { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .7rem; }
.sv-contact-way {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .55rem;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface-alt);
    color: var(--hs-ink);
    font-size: var(--hs-fs-md);
    font-weight: 600;
    text-decoration: none;
    min-width: 0;
}
.sv-contact-way span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Tab-ul Manopere: contextul dupa care se filtreaza lista + regulile de asociere ---- */
.sheet-view .sv-wm-scope {
    padding: .6rem .85rem 0;
}
.sheet-view .sv-wm-scope__ctx {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    font-size: var(--hs-fs-sm);
    color: var(--hs-muted);
}
.sheet-view .sv-wm-scope__ctx > .bi { color: var(--hs-subtle); }
.sheet-view .sv-wm-chip {
    padding: .1rem .45rem;
    border: 1px solid var(--hs-line);
    border-radius: 999px;
    background: var(--hs-surface);
    font-size: var(--hs-fs-2xs);
    white-space: nowrap;
}
.sheet-view .sv-wm-chip strong { color: var(--hs-text, #344054); }

/* Criteriul FIX: tipul fisei (garantie / post-garantie) decide cine plateste lucrarea, deci
   filtrarea dupa el nu se poate opri — chip fara comutator, cu lacat. */
.sheet-view .sv-wm-chip--fixed {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--hs-surface-alt, #f4f7fa);
}
.sheet-view .sv-wm-chip--fixed > .bi { font-size: 9px; color: var(--hs-subtle); }

/* Chip-ul de criteriu e si comutator: „filtreaza dupa aparat / marca / tip fisa". Toate pornite
   initial; stins, criteriul iese din socoteala si reapar manoperele respinse doar din cauza lui. */
.sheet-view .sv-wm-chip.form-switch {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .15rem .5rem .15rem .45rem;
    min-height: 0;
}
.sheet-view .sv-wm-chip.form-switch .form-check-input {
    float: none;
    margin: 0;
    width: 28px;
    height: 15px;
    cursor: pointer;
    flex: 0 0 auto;
}
.sheet-view .sv-wm-chip.form-switch .form-check-label {
    cursor: pointer;
    font-size: var(--hs-fs-2xs);
    white-space: nowrap;
    color: var(--hs-muted);
}
/* Criteriu oprit: chip-ul se estompeaza, ca sa se vada dintr-o privire ca lista nu mai e filtrata
   complet — altfel „de ce imi apar manopere de la alt aparat?" ramane fara raspuns pe ecran. */
.sheet-view .sv-wm-chip.form-switch:has(.form-check-input:not(:checked)) {
    border-style: dashed;
    opacity: .65;
}

/* Cate manopere ascunde filtrarea acum. */
.sheet-view .sv-wm-hidden {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    font-size: var(--hs-fs-2xs);
    color: var(--hs-subtle);
    white-space: nowrap;
}

/* Regulile stau pliate: se citesc o data, apoi devin zgomot. */
.sheet-view .sv-wm-rules { margin-top: .45rem; }
.sheet-view .sv-wm-rules > summary {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    cursor: pointer;
    font-size: var(--hs-fs-xs);
    font-weight: 600;
    color: var(--hs-primary, #134a6d);
}
.sheet-view .sv-wm-rules > summary::marker { color: var(--hs-subtle); }
.sheet-view .sv-wm-rules ul {
    margin: .4rem 0 .5rem;
    padding-left: 1.1rem;
    font-size: var(--hs-fs-sm);
    color: var(--hs-muted);
}
.sheet-view .sv-wm-rules li { margin-bottom: .2rem; }
.sheet-view .sv-wm-empty { margin: 0 .85rem .85rem; }

/* Destinatarul SMS-ului scris in tab-ul Comunicare: numarul pe care chiar pleaca mesajul. */
.sheet-view .sv-sms-to {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .5rem;
    font-size: var(--hs-fs-sm);
    color: var(--hs-muted);
}
.sheet-view .sv-sms-to > .bi { color: var(--hs-subtle); }
.sheet-view .sv-sms-to strong { color: var(--hs-text, #344054); }

/* Contactul apartine FISEI, nu clientului: numele persoanei de la adresa interventiei, peste
   randul cu telefonul/e-mailul. Fara el, numarul pare al titularului fisei. */
.sv-contact-owner {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .4rem;
    font-size: var(--hs-fs-sm);
    font-weight: 600;
    color: var(--hs-ink);
    min-width: 0;
}
.sv-contact-owner > .bi { color: var(--hs-primary, #134a6d); }
.sv-contact-owner > span:first-of-type { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sv-contact-owner .sv-contact-src,
.sv-contact-src {
    flex: 0 0 auto;
    padding: 0 .35rem;
    border-radius: 999px;
    background: rgba(19, 74, 109, .08);
    color: var(--hs-primary, #134a6d);
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.sv-contact-way i { color: var(--hs-primary); flex-shrink: 0; }
.sv-contact-way:hover { border-color: var(--hs-primary); background: var(--hs-brand-bg); color: var(--hs-primary); }

/* Istoricul incercarilor: inchis implicit — se consulta, nu se citeste de fiecare data. */
.sv-contact-history { margin-top: .7rem; border-top: 1px dashed var(--hs-line); padding-top: .5rem; }
.sv-contact-history > summary {
    cursor: pointer;
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
    list-style: none;
}
.sv-contact-history > summary::-webkit-details-marker { display: none; }
.sv-contact-history > summary::before { content: '▸ '; }
.sv-contact-history[open] > summary::before { content: '▾ '; }
.sv-contact-hist-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
    padding: .25rem 0;
    font-size: var(--hs-fs-xs);
    border-bottom: 1px solid var(--hs-line-soft);
}
.sv-contact-hist-item:last-child { border-bottom: none; }
.sv-contact-hist-date { color: var(--hs-text-soft); font-variant-numeric: tabular-nums; }
.sv-contact-hist-state { display: inline-flex; align-items: center; gap: .2rem; color: var(--hs-subtle); }
.sv-contact-hist-item.is-done .sv-contact-hist-state { color: var(--hs-good-fg); }
.sv-contact-hist-item.is-missed .sv-contact-hist-state { color: var(--hs-warn-fg); }

/* ---- Formularul de (re)programare: #modal_sheet_appointment ----
   Nu mai sta in coloana (320px, si se reincarca prin AJAX dupa fiecare actiune), ci intr-un
   modal propriu, unde intervalul incape pe un rand. */
#modal_sheet_appointment .cf-summary,
#modal_sheet_contact .cf-summary { margin-bottom: 1rem; }
#modal_sheet_appointment .sv-appt-warn,
#modal_sheet_contact .sv-appt-warn { margin-top: 1rem; }
#modal_sheet_appointment #sa_note_confirmed,
#modal_sheet_contact #sc_note_replace { margin-top: .75rem; }
#modal_sheet_contact .sv-appt-durations { margin-top: .5rem; }
.sa-dur-label {
    display: block;
    font-size: var(--hs-fs-xs);
    font-weight: 600;
    color: var(--hs-muted);
}

/* Scurtaturi de durata: seteaza ora de sfarsit fara a o tasta. Nu sunt un camp — de aceea
   sunt jetoane, nu butoane de actiune. */
.sv-appt-durations { display: flex; flex-wrap: wrap; gap: .25rem; margin: .35rem 0 .1rem; }
.sv-appt-dur-btn {
    border: 1px solid var(--hs-line-strong);
    background: var(--hs-surface);
    color: var(--hs-muted);
    border-radius: 999px;
    padding: .05rem .5rem;
    font-size: var(--hs-fs-xs);
    font-weight: 600;
    line-height: 1.6;
}
.sv-appt-dur-btn:hover { border-color: var(--hs-primary); color: var(--hs-primary); }
.sv-appt-dur-btn.is-active {
    border-color: var(--hs-brand-br);
    background: var(--hs-brand-bg);
    color: var(--hs-brand-fg);
}

/* Avertisment de validare (interval inversat / ora in trecut). */
.sv-appt-warn {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .5rem;
    padding: .35rem .5rem;
    font-size: var(--hs-fs-xs);
    line-height: 1.4;
    color: var(--hs-warn-fg);
    background: var(--hs-warn-bg);
    border: 1px solid var(--hs-warn-br);
    border-radius: var(--hs-radius-sm);
}

/* Panou „Închidere fișă" — sectiune evidentiata (accent verde din paleta) cu antet si buton
   de inchidere, ca sa iasa in evidenta fata de restul fisei cand apesi „Închide". */
.sv-close-panel {
    border: 1px solid var(--hs-good-br);
    border-left: 3px solid var(--hs-good-solid);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface);
    box-shadow: var(--hs-shadow-sm);
    overflow: hidden;
    margin-bottom: .7rem;
}
.sv-close-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .85rem;
    background: var(--hs-good-bg);
    border-bottom: 1px solid var(--hs-good-br);
    font-size: var(--hs-fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hs-good-fg);
}
.sv-close-head .btn-close { padding: .35rem; font-size: .7rem; }
.sv-close-body { padding: .85rem; }

/* Panou „Localizare" (coordonate + geocodare) din tab-ul Adresă: antet cu status,
   coordonate in casete mono/tabulare, adresa geocodata, actiune distincta. Cand fisa nu are
   judet+oras (address.can_geocode=false) NU se randeaza butonul (fara call), ci un mesaj. */
.sv-geo {
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    overflow: hidden;
    background: var(--hs-surface);
    box-shadow: var(--hs-shadow-xs);
}
.sv-geo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .85rem;
    background: var(--hs-neutral-bg);
    border-bottom: 1px solid var(--hs-line);
}
.sv-geo-title {
    font-size: var(--hs-fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-muted);
}
.sv-geo-title i { color: var(--hs-primary); }
.sv-geo-status {
    font-size: var(--hs-fs-xs);
    font-weight: 600;
    padding: .12rem .5rem;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid transparent;
}
.sv-geo-status.is-set { background: var(--hs-good-bg); color: var(--hs-good-fg); border-color: var(--hs-good-br); }
.sv-geo-status.is-unset { background: var(--hs-neutral-bg); color: var(--hs-neutral-fg); border-color: var(--hs-neutral-br); }
.sv-geo-body {
    padding: .85rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .85rem;
}
.sv-geo-coords { display: flex; gap: .6rem; }
.sv-geo-cell {
    min-width: 140px;
    padding: .4rem .65rem;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface-alt);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
.sv-geo-key {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
}
.sv-geo-val {
    font-size: var(--hs-fs-md);
    font-weight: 600;
    color: var(--hs-ink);
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.sv-geo-addr {
    font-size: var(--hs-fs-sm);
    color: var(--hs-muted);
    flex: 1 1 220px;
    min-width: 180px;
}
.sv-geo-action {
    margin-left: auto;
    display: flex;
    gap: .5rem;
    align-items: center;
}
.sv-geo-warn {
    font-size: var(--hs-fs-sm);
    color: var(--hs-warn-fg);
    background: var(--hs-warn-bg);
    border: 1px solid var(--hs-warn-br);
    border-radius: var(--hs-radius-sm);
    padding: .45rem .65rem;
    flex: 1 1 100%;
}

/* Vizualizator de documente (modal global #modal_doc_viewer). */
#modal_doc_viewer .modal-body { background: #2b2f33; min-height: 40vh; }
.doc-viewer-img { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.doc-viewer-frame { width: 100%; height: 72vh; border: 0; background: #fff; display: block; }
.doc-viewer-empty {
    text-align: center;
    color: var(--hs-muted);
    padding: 3rem 1.5rem;
    background: var(--hs-surface);
}
.doc-viewer-empty i { display: block; font-size: 2.4rem; opacity: .5; margin-bottom: .75rem; }
.doc-viewer-empty p { margin-bottom: 1rem; }

/* Placeholder mai deschis (gri mai pal) pe toate campurile. Selector cu element + clasa
   (input.form-control::placeholder = specificitate 0,1,2) bate default-ul Bootstrap
   (.form-control::placeholder = 0,1,1), incarcat dupa app.css. */
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: #b7bec6;
    opacity: 1;
}

/* ===== Componente „enterprise" reutilizabile (liste de modul: ex. /engineer) ===== */
/* Card cu contur fin si antet curat. */
.hs-card {
    border: 1px solid var(--hs-line, #e6e9ec);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    border-radius: 8px;
}
.hs-card > .card-header {
    background: #fff;
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
    padding: .7rem 1rem;
}
/* Tabel enterprise: antet uppercase discret, randuri aerisite, hover subtil, numere tabulare. */
table.table-enterprise thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--hs-muted, #667085);
    white-space: nowrap;
    border-bottom: 2px solid #e9ecef;
    padding: .55rem .5rem;
}
table.table-enterprise tbody td {
    vertical-align: middle;
    padding: .5rem .5rem;
    font-size: 13px;
    border-top: 1px solid var(--hs-line-soft, #f1f3f5);
}
table.table-enterprise tbody tr:hover > td { background: #f8f9fb; }
/* Avatar cu initiale (persoane in liste). */
.hs-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e7eef4;
    color: var(--hs-primary);
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
    text-transform: uppercase;
    letter-spacing: .02em;
}
/* Titlu de sectiune in modalul de inginer. */
.eng-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a929b;
    border-bottom: 1px solid #eef1f4;
    padding-bottom: .35rem;
    margin-bottom: .85rem;
}
.eng-section-title + .eng-section-title,
.modal-body > .eng-section-title:not(:first-child),
.modal-body .ws-panel-body > .eng-section-title:not(:first-child) { margin-top: .25rem; }

/* ---- Card profil (pagina de detaliu: engineer/view, customer/view) ---- */
.hs-profile { overflow: hidden; }
.hs-profile__head {
    text-align: center;
    padding: 1.6rem 1rem 1.25rem;
    background: linear-gradient(180deg, #f7fafc 0%, #fff 100%);
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.hs-profile__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1a5a82 0%, #0e3a58 100%);
    color: #fff;
    font-size: 27px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    box-shadow: 0 8px 20px rgba(15, 58, 88, .28);
    margin-bottom: .75rem;
}
.hs-profile__name {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f1b34;
    margin-bottom: .5rem;
    word-break: break-word;
}
.hs-profile__contact {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
}
.hs-profile__contact li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem 1.1rem;
    font-size: 13px;
    border-bottom: 1px solid var(--hs-line-soft, #f1f3f5);
    min-width: 0;
}
.hs-profile__contact li:last-child { border-bottom: 0; }
.hs-profile__contact li i { color: var(--hs-primary, #134a6d); font-size: 14px; flex: 0 0 auto; }
.hs-profile__contact li a { overflow-wrap: anywhere; }
.hs-profile__meta {
    background: #fbfcfe;
    border-top: 1px solid var(--hs-line-soft, #eef1f4);
    padding: .85rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}
.hs-profile__meta > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    font-size: 12px;
}
.hs-profile__meta span { color: var(--hs-muted, #8a929b); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; font-size: 11px; }
.hs-profile__meta strong { color: #34405a; font-weight: 600; }

/* Coloana „Adresă" din lista de clienti: se incadreaza pe randul urmator daca e prea lunga. */
.hs-address {
    display: inline-block;
    max-width: 220px;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* ===== Bara de filtre a listelor (antetul cardului: .card-header.hs-filters) ===== */
.hs-filters { background: #fbfcfe; padding: .85rem 1rem .9rem; }
.hs-filters__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem .75rem; }
.hs-filter { display: flex; flex-direction: column; gap: .25rem; }
.hs-filter__lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8a929b;
    margin: 0;
}
.hs-filter--actions { margin-left: auto; }
.hs-filters .form-select-sm,
.hs-filters .form-control { background-color: #fff; }
.hs-filters #filter-daterange { cursor: pointer; }
/* Chip-uri cu filtrele active (sub randul de controale). */
.hs-filters__chips { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; }
/* Contorul de rezultate din bara de filtre (lista de clienți) — stă în fața chip-urilor. */
.hs-result-count { font-size: 12px; color: #6b7684; margin-right: .35rem; }
.hs-result-count strong { color: var(--hs-primary, #134a6d); font-weight: 700; }
#customer-filter-chips { display: contents; }
#product-filter-chips { display: contents; }
.hs-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid #dbe3ec;
    color: #34405a;
    border-radius: 999px;
    padding: 2px 4px 2px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.7;
}
.hs-chip__lbl { color: #8a929b; font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.hs-chip__x {
    border: 0;
    background: transparent;
    color: #98a2b3;
    line-height: 1;
    padding: 0 3px;
    border-radius: 50%;
}
.hs-chip__x:hover { color: #b42318; }

/* ===== Bara de căutare a unei liste (.hs-toolbar) =====
   A rămas doar câmpul de căutare, folosit de tabul „Fișe" din fișa clientului. Filtrarea
   propriu-zisă se face peste tot cu bara standard `.hs-filters` (etichete + chip-uri + reset);
   pastilele-dropdown de dinainte, singurele care mai foloseau restul regulilor de aici, au fost
   scoase odată cu `lib/filter-toolbar.js` și `_partials/_filter_pill.html.twig` (30.08.2026). */
.hs-toolbar { background: #fbfcfe; padding: .8rem 1rem .85rem; }

/* Casuta de cautare: elementul principal al barei, deci e si cel mai lat. */
.hs-toolbar__search { position: relative; flex: 1 1 auto; max-width: 460px; }
.hs-toolbar__search > .bi-search {
    position: absolute;
    left: .7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #98a2b3;
    font-size: 13px;
    pointer-events: none;
}
.hs-toolbar__search .form-control {
    height: 34px;
    padding: 0 2rem 0 2.1rem;
    font-size: 13px;
    background: #fff;
    border-color: #dfe5ec;
    border-radius: 8px;
}
.hs-toolbar__search .form-control:focus {
    border-color: var(--hs-primary, #134a6d);
    box-shadow: 0 0 0 3px rgba(19, 74, 109, .1);
}
.hs-toolbar__search .form-control::-webkit-search-cancel-button { display: none; }

@media (max-width: 767.98px) {
    .hs-toolbar__search { max-width: none; }
}

/* ===== Lista enterprise: chrome-ul DataTables (.hs-list) =====
   ATENTIE la selectoare: integrarea `datatables.net-bs5` suprascrie clasele de layout
   ale DataTables cu clase Bootstrap — randul devine `row mt-2 justify-content-between`,
   celulele `col-md-auto d-md-flex ...`. `.dt-layout-row` / `.dt-layout-cell` NU exista
   in DOM. Singurele ancore sigure sunt `.dt-layout-table` (randul tabelului) si
   `.dt-layout-start` / `.dt-layout-end` (celulele barei de jos).
   In plus, CSS-ul temei bs5 (dataTables.bootstrap5.min.css) nu e importat nicaieri,
   deci nu ne bazam pe el: tot ce trebuie sa arate bine scriem aici. */
.hs-list { border-radius: 0 0 8px 8px; overflow-x: clip; }
.hs-list .dt-container { font-size: 13px; }

/* Randul tabelului: fara grila Bootstrap (gutter + marginile negative ale `.row`, care
   il faceau mai lat decat cardul) si fara `d-md-flex` pe celula, care ar face tabelul
   flex item. */
.hs-list .dt-container > .dt-layout-table { --bs-gutter-x: 0; margin-left: 0; margin-right: 0; }
.hs-list .dt-container > .dt-layout-table > * {
    display: block;
    padding: 0;
    /* Doar pe orizontala (tabele late). Pe verticala NU se limiteaza inaltimea: cu ea,
       tabelul ar derula separat de pagina si primul rand ar intra sub antet. */
    overflow-x: auto;
}

.hs-list table.table-enterprise { margin-bottom: 0; }
/* Padding lateral strans: coloanele listelor sunt multe si inguste (mesaj, client, stare),
   iar spatiul dintre ele conteaza mai mult decat cel din marginea celulei. Prima si ultima
   coloana pastreaza putin mai mult, ca textul sa nu se lipeasca de marginea cardului. */
.hs-list table.table-enterprise thead th { background: #fff; padding-left: .45rem; padding-right: .45rem; }
.hs-list table.table-enterprise tbody td { padding-left: .45rem; padding-right: .45rem; }
.hs-list table.table-enterprise > thead > tr > *:first-child,
.hs-list table.table-enterprise > tbody > tr > *:first-child { padding-left: .7rem; }
.hs-list table.table-enterprise > thead > tr > *:last-child,
.hs-list table.table-enterprise > tbody > tr > *:last-child { padding-right: .7rem; }
.hs-list table.table-enterprise tbody tr:first-child > td { border-top: 0; }
/* Ultimul rand nu mai pune border-bottom (Bootstrap il adauga pe fiecare celula):
   altfel, impreuna cu border-top-ul barei de jos, iese o linie dubla lipita de tabel. */
.hs-list table.table-enterprise > tbody > tr:last-child > * { border-bottom: 0; }

/* Bara de jos = randul de dupa cel cu tabelul. Info la stanga, marimea paginii si
   paginarea la dreapta. Toata spatierea vine din `gap`; marginile proprii ale
   feature-urilor sunt anulate. Controalele au aceeasi inaltime (--hs-ctl). */
.hs-list .dt-container > .dt-layout-table ~ div {
    --hs-ctl: 30px;
    --bs-gutter-x: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin-left: 0;
    margin-right: 0;
    padding: .9rem 1rem;
    border-top: 1px solid var(--hs-line, #e6e9ec);
    background: #f7f9fc;
    border-radius: 0 0 8px 8px;
}
.hs-list .dt-container > .dt-layout-table ~ div > .dt-layout-start,
.hs-list .dt-container > .dt-layout-table ~ div > .dt-layout-end {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0;
    width: auto;
    flex: 0 0 auto;
}
.hs-list .dt-container > .dt-layout-table ~ div > .dt-layout-end { margin-left: auto; }
.hs-list .dt-container > .dt-layout-table ~ div .dt-layout-start > *,
.hs-list .dt-container > .dt-layout-table ~ div .dt-layout-end > * { margin: 0; }

.hs-list .dt-info { color: #8a929b; font-size: 12px; padding: 0; line-height: var(--hs-ctl, 30px); }
.hs-list .dt-length { font-size: 12px; color: #8a929b; }
.hs-list .dt-length label { display: inline-flex; align-items: center; gap: .4rem; margin: 0; }
.hs-list .dt-length select.form-select {
    margin: 0;
    height: var(--hs-ctl, 30px);
    padding: 0 1.6rem 0 .55rem;
    font-size: 12px;
    border-color: #dbe3ec;
}

/* Paginare: pastile discrete, pagina curenta in navy (culoarea de brand). */
.hs-list .dt-paging { margin: 0; }
.hs-list .dt-paging ul.pagination { margin: 0; padding: 0; gap: 3px; }
.hs-list .dt-paging .page-link {
    min-width: var(--hs-ctl, 30px);
    height: var(--hs-ctl, 30px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8ef;
    border-radius: 8px;
    color: #52606d;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 0 .45rem;
    box-shadow: none;
}
.hs-list .dt-paging .page-link:hover { background: #eef3f8; color: var(--hs-primary, #134a6d); border-color: #cfdae6; }
.hs-list .dt-paging .page-item.active .page-link {
    background: var(--hs-primary, #134a6d);
    border-color: var(--hs-primary, #134a6d);
    color: #fff;
}
.hs-list .dt-paging .page-item.disabled .page-link { color: #c4c9d0; background: #fff; border-color: #eef1f4; }

/* Pe ecrane inguste bara de jos se aseaza pe doua randuri, centrata. */
@media (max-width: 575.98px) {
    .hs-list .dt-container > .dt-layout-table ~ div { justify-content: center; }
    .hs-list .dt-container > .dt-layout-table ~ div > .dt-layout-start,
    .hs-list .dt-container > .dt-layout-table ~ div > .dt-layout-end {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }
}

/* Varianta fara DataTables: tabel randat server-side intr-un card (ex. fisele
   clientului pe /customer/view). Doar scroll orizontal + colturile de jos. */
.hs-list--static { overflow-x: auto; }

/* ===== Header de inregistrare (.hs-record) — pagini de detaliu tip ERP =====
   Identitate + actiuni pe primul rand, datele de contact ca „chips" pe al doilea.
   Inlocuieste headerul generic de pagina pe /customer/view. */
.hs-record { overflow: hidden; }
.hs-record__main { display: flex; align-items: flex-start; gap: 1rem; padding: 1.1rem 1.25rem; }
.hs-record__avatar {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1a5a82 0%, #0e3a58 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-shadow: 0 6px 16px rgba(15, 58, 88, .25);
}
.hs-record__id { min-width: 0; flex: 1 1 auto; }
.hs-record__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hs-record__back { color: #98a2b3; text-decoration: none; }
.hs-record__back:hover { color: var(--hs-primary, #134a6d); }
.hs-record__name {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f1b34;
    line-height: 1.2;
    margin: .15rem 0 .4rem;
    word-break: break-word;
}
.hs-record__badges { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.hs-record__since { font-size: 12px; color: #98a2b3; }
.hs-record__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; }
.hs-record__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.4rem;
    padding: .7rem 1.25rem;
    border-top: 1px solid var(--hs-line-soft, #eef1f4);
    background: #fbfcfe;
}
.hs-meta-chip { display: inline-flex; align-items: center; gap: .45rem; font-size: 13px; color: #52606d; min-width: 0; }
.hs-meta-chip i { color: #98a2b3; font-size: 13px; flex: 0 0 auto; }
.hs-meta-chip a { color: #34405a; text-decoration: none; overflow-wrap: anywhere; }
.hs-meta-chip a:hover { color: var(--hs-primary, #134a6d); text-decoration: underline; }
.hs-meta-chip--muted { color: #adb5bd; }

/* ---- Varianta pe navy a headerului de inregistrare ----
   Cardul de identitate al clientului poarta culoarea de brand: pe o pagina cu multe carduri
   albe, el devine „capul" inregistrarii, nu inca un panou. Fundalul inchis obliga la
   inversarea TUTUROR culorilor dinauntru — nume, linkuri, jetoane, butoane, iconite — altfel
   raman gri-pe-navy, sub pragul de contrast. Perechile de mai jos trec AA pe #134a6d.
   Scopat pe `.hs-record`, deci celelalte `.hs-card` din pagina raman albe. */
.hs-card.hs-record {
    background: linear-gradient(180deg, var(--hs-navy-1) 0%, var(--hs-navy-2) 100%);
    border-color: var(--hs-navy-line);
    box-shadow: 0 6px 18px rgba(15, 58, 88, .22);
}
.hs-record .hs-record__name { color: var(--hs-on-navy); }
.hs-record .hs-record__back { color: var(--hs-on-navy-soft); }
.hs-record .hs-record__back:hover { color: var(--hs-on-navy); }
.hs-record .hs-record__since { color: var(--hs-on-navy-soft); }
.hs-record .hs-record__since i { color: var(--hs-on-navy-faint); }
/* Emblema cu initialele: pe navy, gradientul ei navy dispare — devine o placa translucida. */
.hs-record .hs-record__avatar {
    background: var(--hs-on-navy-fill);
    border: 1px solid var(--hs-on-navy-line);
    box-shadow: none;
}
/* Banda de contact: acelasi navy, coborat cu un strat de negru translucid, ca sa se
   citeasca drept a doua zona a cardului. */
.hs-record .hs-record__chips {
    background: var(--hs-navy-sunken);
    border-top: 1px solid var(--hs-on-navy-line);
}
.hs-record .hs-meta-chip { color: var(--hs-on-navy-soft); }
.hs-record .hs-meta-chip i { color: var(--hs-on-navy-faint); }
.hs-record .hs-meta-chip a { color: var(--hs-on-navy); }
.hs-record .hs-meta-chip a:hover { color: var(--hs-on-navy); text-decoration: underline; }
.hs-record .hs-meta-chip--muted { color: var(--hs-on-navy-faint); }
.hs-record .hs-copy { color: var(--hs-on-navy-faint); }
.hs-record .hs-copy:hover { color: var(--hs-on-navy); }
.hs-record .hs-copy.is-copied { color: #7ee2b8; }
.hs-record .hs-copy:focus-visible { outline-color: #fff; }
/* Jetoanele de stare: pe fundal inchis, variantele „soft" (10% culoare pe alb) devin noroi.
   Semnalul ramane — atentionarea e chihlimbar, restul neutru — dar pe tonuri deschise. */
.hs-record .hs-pill--info,
.hs-record .hs-pill--ok,
.hs-record .hs-pill--mute {
    background: var(--hs-on-navy-fill);
    color: var(--hs-on-navy);
    border-color: var(--hs-on-navy-line);
}
.hs-record .hs-pill--warn {
    background: rgba(255, 193, 7, .2);
    color: #ffd88a;
    border-color: rgba(255, 193, 7, .38);
}
.hs-record .hs-pill--danger {
    background: rgba(255, 138, 128, .18);
    color: #ffb4ac;
    border-color: rgba(255, 138, 128, .35);
}
/* Actiunile: conturul gri nu se mai vede pe navy, iar butonul principal (navy pe navy) ar
   disparea — se inverseaza in alb plin, care ramane actiunea cea mai vizibila din pagina. */
.hs-record .btn-outline-secondary {
    --bs-btn-color: var(--hs-on-navy);
    --bs-btn-border-color: var(--hs-on-navy-line);
    --bs-btn-hover-color: var(--hs-on-navy);
    --bs-btn-hover-bg: var(--hs-on-navy-fill);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .6);
    --bs-btn-active-color: var(--hs-on-navy);
    --bs-btn-active-bg: var(--hs-on-navy-fill-2);
    --bs-btn-active-border-color: rgba(255, 255, 255, .6);
}
.hs-record .btn.pr-btn-primary {
    --bs-btn-color: var(--hs-primary);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-color: var(--hs-primary-dark);
    --bs-btn-hover-bg: #e8f0f7;
    --bs-btn-hover-border-color: #e8f0f7;
    --bs-btn-active-color: var(--hs-primary-dark);
    --bs-btn-active-bg: #dbe7f1;
    --bs-btn-active-border-color: #dbe7f1;
}

/* ===== Tile-uri KPI (.hs-stats) ===== */
.hs-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.hs-stat {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: #fff;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    padding: .8rem 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    min-width: 0;
}
.hs-stat__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex: 0 0 auto;
    background: #eef3f8;
    color: var(--hs-primary, #134a6d);
}
.hs-stat__icon--warn { background: #fff4e5; color: #b76e00; }
.hs-stat__icon--mute { background: #f1f3f5; color: #8a929b; }
.hs-stat__val { font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: #1f2937; line-height: 1.15; }
.hs-stat__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; }
@media (max-width: 991.98px) { .hs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) {
    .hs-stats { grid-template-columns: 1fr; }
    .hs-record__main { flex-wrap: wrap; }
    .hs-record__actions { margin-left: 0; width: 100%; }
}

/* Contoare care se încarcă lazy: cât timp cererea e în aer, valorile pulsează discret,
   ca „—" să nu fie citit drept „zero". */
.hs-stats.is-loading .hs-stat__val {
    color: #c8d1dc;
    animation: hs-stat-pulse 1.1s ease-in-out infinite;
}
@keyframes hs-stat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .hs-stats.is-loading .hs-stat__val { animation: none; }
}

/* Tile KPI folosit ca filtru (ex. /part-queue/orders: Deschise / Cu termen depășit / …) */
.hs-stat--btn { cursor: pointer; text-align: left; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.hs-stat--btn:hover { border-color: #c7d4e2; box-shadow: 0 2px 6px rgba(16, 24, 40, .07); }
.hs-stat--btn.is-active {
    border-color: var(--hs-primary, #134a6d);
    box-shadow: 0 0 0 1px var(--hs-primary, #134a6d) inset;
    background: #f7fafd;
}
.hs-stat--btn.is-active .hs-stat__lbl { color: var(--hs-primary, #134a6d); }

/* ===== Lista de comenzi la furnizor (/part-queue/orders) ===== */

/* Sub-rand discret sub valoarea principala a unei celule (observație, „+N alte piese"). */
.hs-sub { font-size: 12px; color: #98a2b3; line-height: 1.3; }
.hs-parts { max-width: 320px; font-size: 13px; line-height: 1.35; }

/* Coloana de expand + butonul ei */
.hs-col-toggle { width: 34px; padding-right: 0 !important; }
.hs-row-toggle {
    border: 0; background: transparent; padding: 2px 4px; line-height: 1;
    color: #98a2b3; border-radius: 6px; transition: color .15s ease, background .15s ease;
}
.hs-row-toggle:hover { color: var(--hs-primary, #134a6d); background: #eef3f8; }
.hs-row-toggle i { transition: transform .15s ease; display: inline-block; }
tr.is-expanded .hs-row-toggle i { transform: rotate(90deg); }
tr.is-expanded > td { background: #f7fafd; }

/* Sub-randul cu liniile comenzii */
.hs-order-details { padding: .6rem .9rem; background: #f7fafd; border-left: 3px solid var(--hs-primary, #134a6d); }
.hs-order-details table { background: transparent; }
.hs-order-details thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; border-bottom-color: #e3e9f0; }
.hs-order-details tbody td { font-size: 13px; border-bottom-color: #edf1f6; }
.hs-order-note { margin-top: .5rem; font-size: 12px; color: #52606d; }

/* ===== Card cu taburi (.hs-tabs) — ex. /customer/view: detalii client / fise tehnice =====
   main.css are un `.tab-content` global cu borduri groase si padding 30px, gandit pentru
   alt tip de tab-uri; il neutralizam aici, in interiorul cardului. */
.hs-tabs > .card-header { border-bottom: 1px solid var(--hs-line-soft, #eef1f4); }
.hs-tabs .tab-content { background: transparent; border: 0; padding: 0; line-height: inherit; }
.hs-tabs__nav { border-bottom: 0; padding: 0 .5rem; gap: .25rem; flex-wrap: nowrap; }
.hs-tabs__nav .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #6b7885;
    font-size: 13px;
    font-weight: 600;
    padding: .7rem .9rem;
    white-space: nowrap;
}
.hs-tabs__nav .nav-link:hover { color: var(--hs-primary, #134a6d); background: transparent; }
.hs-tabs__nav .nav-link.active {
    color: var(--hs-primary, #134a6d);
    background: transparent;
    border-bottom-color: var(--hs-primary, #134a6d);
}
.hs-tabs__nav .nav-link.active .hs-count { background: #e3edf5; color: var(--hs-primary, #134a6d); }
/* Padding-ul unui panou de tab. Se foloseste si in afara lui `.hs-tabs` — ex. fisa
   clientului, care are navigarea in rail lateral (.hs-rec), nu in bara de sus. */
.hs-tabs__pane { padding: 1.15rem 1.25rem; }

/* Contor discret langa titlul unui card (nr. de inregistrari din lista de dedesubt). */
.hs-count {
    display: inline-block;
    min-width: 20px;
    margin-left: .35rem;
    padding: 0 6px;
    border-radius: 999px;
    background: #eef2f7;
    color: #52606d;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    vertical-align: middle;
}

/* Grid pentru campuri scurte de adresa (Nr / Bl / Sc / Et / Ap / Interfon). */
.hs-grid-mini { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 575.98px) { .hs-grid-mini { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hs-grid-mini .form-label { font-size: 11px; }
.hs-grid-mini .form-control { padding-left: .5rem; padding-right: .5rem; }

/* Text ajutator sub un grup de campuri (reguli de validare, evidenta creare/modificare). */
.hs-form-hint { font-size: 12px; color: #98a2b3; margin: -.35rem 0 1rem; }
/* Bara de salvare a formularului din tab: lipita jos, ca butonul sa fie mereu la vedere
   pe formulare lungi. Marginile negative o intind pe toata latimea cardului. */
.hs-formbar {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    /* Marginile negative intind bara pana la marginile cardului. Padding-ul containerului
       difera (.card-body = 1rem, .hs-tabs__pane = 1.25rem/1.15rem), deci il tinem in
       variabile si suprascriem doar acolo unde e cazul. */
    --hs-pad-x: 1rem;
    --hs-pad-b: 1rem;
    margin: 1.25rem calc(-1 * var(--hs-pad-x)) calc(-1 * var(--hs-pad-b));
    padding: .7rem var(--hs-pad-x);
    background: #fff;
    border-top: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 0 0 8px 8px;
}
.hs-tabs__pane.hs-formbar,
.hs-tabs__pane .hs-formbar { --hs-pad-x: 1.25rem; --hs-pad-b: 1.15rem; }

/* Lista de perechi eticheta/valoare din cardurile de detaliu (adresa clientului). */
.hs-dl {
    display: grid;
    grid-template-columns: minmax(88px, 38%) 1fr;
    gap: .45rem .75rem;
    margin: 0;
    font-size: 13px;
}
.hs-dl dt {
    color: #8a929b;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    align-self: center;
}
.hs-dl dd { margin: 0; color: #34405a; overflow-wrap: anywhere; }

/* Stare goala (fara rezultate / tabel gol). */
.hs-list td.dt-empty { padding: 0; }
.hs-empty { padding: 2.5rem 1rem; text-align: center; color: #98a2b3; }
.hs-empty i { font-size: 26px; display: block; margin-bottom: .5rem; color: #c8d1dc; }
.hs-empty p { margin: 0; font-size: 13px; }

/* ==========================================================================
   Tabul „Fișe tehnice" din pagina clientului (templates/customer/tabs/_sheets)
   Lista e densă (până la 100 de rânduri), deci fiecare rând trebuie să se
   citească pe verticală: identificatorul aldin, contextul pe subrând estompat.
   ========================================================================== */
.cs-toolbar { align-items: center; }
/* Butonul de golire al căutării — nativul `type=search` apare doar pe unele browsere. */
.cs-toolbar .hs-toolbar__search { position: relative; }
.cs-search__clear {
    position: absolute;
    right: 6px; top: 50%;
    transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    padding: 0;
    border: 0; border-radius: 50%;
    background: transparent;
    color: var(--hs-subtle);
    font-size: 10px;
    cursor: pointer;
}
.cs-search__clear:hover { background: var(--hs-neutral-bg); color: var(--hs-text); }
.cs-search__clear:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }

/* Capete de coloană sortabile: săgeata apare estompat și se aprinde pe coloana activă. */
.cs-th--sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.cs-th--sortable:hover { color: var(--hs-primary); }
.cs-th__ic { margin-left: .3rem; font-size: 9px; opacity: .25; vertical-align: middle; }
.cs-th--sortable[aria-sort="ascending"] .cs-th__ic,
.cs-th--sortable[aria-sort="descending"] .cs-th__ic { opacity: 1; color: var(--hs-primary); }
.cs-sheets .cs-col-act { width: 56px; }
.cs-sheets tbody tr[data-sheet-row] { cursor: pointer; }

/* Numărul fișei — identificatorul rândului, singurul element aldin din tabel. */
.cs-sheet__nr { font-weight: 600; color: var(--hs-primary); text-decoration: none; }
.cs-sheet__nr:hover { text-decoration: underline; }
.cs-device { font-weight: 500; color: var(--hs-text-soft); }

/* Programarea: trecută = estompată (nu mai e de făcut nimic), azi = accent, viitoare = normal.
   Culoarea e semnal de timp, nu decor — de aceea doar două stări ies din gri. */
.cs-appt--past { color: var(--hs-subtle); }
.cs-appt--today { color: var(--hs-warn-fg, #8a5a00); font-weight: 600; }
.cs-appt--today .bi-dot { font-size: 18px; margin-left: -6px; vertical-align: -3px; }
.cs-appt--future { color: var(--hs-text-soft); }

/* Starea „niciun rezultat" stă într-un rând de tabel, deci fără padding-ul de card. */
.hs-empty--inline { padding: 1.75rem 1rem; }
.cs-nomatch td { background: var(--hs-surface-alt); }

/* Scheletul afișat cât se încarcă lista prin AJAX: ține înălțimea, ca tabul să nu se
   deschidă gol și să sară când sosesc rândurile. Animație discretă, fără spinner —
   un spinner spune „se întâmplă ceva", scheletul spune „vine o listă". */
.cs-skeleton { padding: .35rem 0; }
.cs-skeleton__row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: .75rem .9rem;
    border-bottom: 1px solid var(--hs-line-soft);
}
.cs-skeleton__row:last-child { border-bottom: 0; }
.cs-skeleton__bar {
    height: 10px;
    border-radius: 4px;
    background: linear-gradient(90deg, #eef1f4 25%, #f6f8fa 37%, #eef1f4 63%);
    background-size: 400% 100%;
    animation: cs-skeleton-shimmer 1.4s ease infinite;
}
@keyframes cs-skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-skeleton__bar { animation: none; }
}

/* Rezumatul de sub listă: câte fișe se văd din câte există. */
.cs-foot {
    padding: .55rem .9rem;
    border-top: 1px solid var(--hs-line-soft);
    color: var(--hs-muted);
    font-size: var(--hs-fs-sm);
}

/* Casuta de cautare din bara de filtre. */
.hs-search .input-group-text { background: #fff; border-right: 0; color: #98a2b3; }
.hs-search input.form-control { border-left: 0; padding-left: 0; }
.hs-search input.form-control:focus { border-color: #dee2e6; box-shadow: none; }
.hs-search input[type="search"]::-webkit-search-cancel-button { display: none; }

/* ---- Lista clienti (layout enterprise): celule rafinate ---- */
.cust-name { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cust-name__text { min-width: 0; }
.cust-name .uc-client-link { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Subrand estompat (tipul clientului sub nume). */
.cust-subline { font-size: 11px; color: #98a2b3; line-height: 1.4; }
/* Contact pe mai multe randuri (telefon / mobil / email), dens dar lizibil. */
.cust-contact { display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.cust-contact i { font-size: 12px; }
.cust-muted-link { color: var(--hs-muted, #667085); text-decoration: none; }
.cust-muted-link:hover { color: var(--hs-primary, #134a6d); text-decoration: underline; }
.cust-empty { color: #c4c9d0; }
.cust-loc { display: inline-flex; align-items: center; gap: 5px; color: #52606d; }
.cust-loc i { color: #9aa3b2; font-size: 12px; }
.cust-operator { display: inline-block; font-size: 11px; font-weight: 600; color: #4b5563; background: #eef2f7; border: 1px solid #e2e8f0; padding: 1px 9px; border-radius: 999px; }
.cust-date { color: #8a909a; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cust-num { font-variant-numeric: tabular-nums; font-weight: 600; color: #1c1b18; white-space: nowrap; }
/* Banda KPI a paginii — spatiere fata de header si de card. */
#customer-stats { margin-bottom: 14px; }

/* ============================================================================
   Modal „Detalii piesă" (editare produs) — 90% din viewport, layout pe tab-uri
   (Detalii / Stoc). Specificitate pe doua clase ca sa bata regula responsive
   .modal-dialog{max-width:...} din Bootstrap (incarcat dupa app.css).
   ============================================================================ */
.modal-dialog.modal-part-details,
#modal_new_product .modal-dialog.modal-part-details {
    --bs-modal-width: 90vw;
    width: 90vw;
    max-width: 90vw;
    height: 90vh;
    margin: 5vh auto;
}
/* Inaltime FIXA, nu doar plafon: modalul ramane 90% din viewport si cand tab-ul curent e
   scurt (Detalii), ca sa nu sara la schimbarea tab-urilor; deruleaza doar corpul. */
/* Legat si de id-ul modalului: bootstrap.min.css se incarca DUPA app.css, deci la
   specificitate egala (`.modal-dialog-scrollable .modal-content { max-height: 100% }`)
   castiga Bootstrap. Id-ul da prioritate sigura, fara !important. */
.modal-part-details .modal-content,
#modal_new_product .modal-part-details .modal-content { height: 90vh; max-height: 90vh; }
#modal_new_product .modal-part-details .modal-content > form { height: 100%; max-height: 100%; }

/* Titlu + identitatea piesei (cod monospace + denumire) in bara de header. */
.pd-head { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; min-width: 0; }
.pd-head__meta { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.pd-head__code {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    white-space: nowrap;
}
.pd-head__name {
    font-size: 13px;
    color: rgba(255, 255, 255, .78);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46vw;
}

/* Bara de tab-uri: bandă proprie intre header si corp. */
.pd-tabs {
    padding: 0 1rem;
    background: #f7f9fb;
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
    flex: 0 0 auto;
}
/* Corpul deruleaza singur: header, bara de tab-uri si footer raman fixe. */
.pd-body { background: #f7f9fb; padding: 1.1rem 1.25rem; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.pd-body > .tab-content { background: transparent; border: 0; padding: 0; }

/* Detalii: formular + panou lateral de evidenta. */
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.pd-grid--half { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1rem; }
.pd-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.pd-aside { display: flex; flex-direction: column; gap: 1rem; }

.pd-section,
.pd-card {
    background: #fff;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    padding: 1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    min-width: 0;
}
.pd-section__title,
.pd-card__title {
    display: flex;
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #8a929b;
    margin: 0 0 .85rem;
}
.pd-card__link {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--hs-primary, #134a6d);
    text-decoration: none;
}
.pd-card__link:hover { text-decoration: underline; }

/* Evidenta (creat / modificat) — perechi eticheta-valoare pe doua coloane. */
.pd-meta { display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem; margin: 0; }
.pd-meta dt { font-size: 12px; font-weight: 600; color: #98a2b3; }
.pd-meta dd { margin: 0; font-size: 13px; color: #1f2937; text-align: right; }

/* Tab „Stoc”. */
.pd-stats { gap: .75rem; }
.pd-card--table { padding-bottom: .35rem; }
.pd-table-wrap { max-height: 240px; overflow-y: auto; margin: 0 -.35rem; }
.pd-table { margin-bottom: 0; font-size: 13px; }
.pd-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #fff;
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #98a2b3;
    white-space: nowrap;
}
.pd-table td { vertical-align: middle; color: #344054; }
.pd-table__empty { text-align: center; color: #98a2b3; padding: 1.1rem 0; font-size: 12px; }
.pd-empty { display: flex; align-items: center; justify-content: center; padding: 2.5rem 0; color: #8a929b; font-size: 13px; }

/* Tab „Preț”: panoul lateral (pret curent + formular) sta la STANGA, istoricul la
   dreapta — invers fata de restul tab-urilor, de aici coloanele schimbate intre ele. */
/* Coloana laterala e cu 50% mai lata aici decat cea standard (320px), ca sa incapa
   pretul curent scos in evidenta si formularul fara sa se inghesuie. */
.pd-grid--aside-first { grid-template-columns: 480px minmax(0, 1fr); }

/* Tab „Preț”: pretul in vigoare, scos in evidenta in panoul lateral. */
.pp-current__value {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--hs-primary, #134a6d);
    line-height: 1.1;
}
.pp-current__meta { margin-top: .35rem; font-size: 12px; color: #8a929b; line-height: 1.5; }

/* Cardul pretului curent are ceva mai mult aer decat celelalte; fonturile raman cele standard. */
.pd-card--current { padding: 1.5rem 1.75rem; }
.pd-table .pp-del { line-height: 1; vertical-align: middle; }

/* Footer: badge-ul de status al stocului la stanga, actiunile la dreapta. */
.pd-footer { justify-content: flex-start; gap: .75rem; }
.pd-footer__hint { font-size: 12px; color: #8a929b; }

/* Tab-ul „Stoc” e inactiv cat timp piesa nu e salvata. */
.pd-tabs .nav-link.disabled { opacity: .45; pointer-events: none; }

/* ---- Modul „Produs nou” --------------------------------------------------
   Acelasi markup, dar redus la formularul simplu de dinainte de tab-uri:
   fara bara de tab-uri, fara panouri/carduri, campurile unul sub altul. */
.pd-mode-new .pd-tabs,
.pd-mode-new .pd-section__title,
.pd-mode-new .hs-form-hint { display: none; }
.pd-mode-new .pd-body { background: #fff; padding: 1rem; }
.pd-mode-new .pd-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.pd-mode-new .pd-col { gap: 0; }
.pd-mode-new .pd-section { border: 0; box-shadow: none; padding: 0; background: transparent; }
.pd-mode-new .pd-section .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
/* row-ul are gutter negativ, deci sectiunile trebuie despartite explicit. */
.pd-mode-new .pd-section + .pd-section { margin-top: 1rem; }
.pd-mode-new #product_code { font-family: inherit; }
.pd-mode-new .pd-footer { justify-content: flex-end; }

@media (max-width: 1199.98px) {
    .pd-grid { grid-template-columns: minmax(0, 1fr); }
    .pd-grid--half { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .modal-dialog.modal-part-details,
    #modal_new_product .modal-dialog.modal-part-details { width: auto; max-width: none; height: auto; margin: .5rem; }
    #modal_new_product .modal-part-details .modal-content { height: auto; max-height: calc(100vh - 1rem); }
    .pd-head__name { display: none; }
}

/* ============================================================================
   Modal „Optimizare traseu" — layout enterprise pe doua coloane (harta + panou),
   98% din viewport. Specificitate pe doua clase (.modal-dialog.modal-route) ca sa
   bata regula responsive .modal-dialog{max-width:...} din Bootstrap (incarcat dupa app.css).
   ============================================================================ */
.modal-dialog.modal-route {
    width: 98vw;
    max-width: 98vw;
    height: 98vh;
    /* Marginea implicita a dialogului (.5rem–1.75rem) s-ar aduna la 98vh si ar
       scoate modalul din ecran; centrarea o face .modal-dialog-centered. */
    margin: 0 auto;
}
.modal-route .modal-content {
    height: 98vh;
    border: 1px solid #d8dde2;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(16, 24, 40, .18);
}
.modal-route .modal-header {
    padding: .7rem 1.1rem;
    border-bottom: 3px solid rgba(0, 0, 0, .22);
}
.modal-route .modal-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}
/* Corpul: coloana (alerta optionala + split), fara a strica flex-ul intern. */
.modal-route .modal-body.route-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.route-split {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}
/* Harta umple coloana din stanga (pozitionata absolut ca Google Maps sa aiba dimensiune). */
.route-map-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    background: #eaeef2;
}
.route-map-wrap #route_map {
    position: absolute;
    inset: 0;
}
/* Overlay „se calculeaza ruta" — acopera toata harta cat timp se (re)calculeaza traseul. */
.route-map-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .6);
    backdrop-filter: blur(1px);
    cursor: progress;
}
/* Pastila cu spinner, in mijlocul overlay-ului. */
.route-map-loader {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 6px;
    padding: .5rem .9rem;
    font-size: 12px;
    color: var(--hs-muted, #667085);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .12);
}

/* Panoul lateral „Ruta optimizata" — card enterprise cu antet, lista si footer KPI. */
.route-panel {
    flex: 0 0 500px;
    width: 500px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #f7f8fa;
    border-left: 1px solid var(--hs-line, #e6e9ec);
}
.route-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .6rem .85rem;
    background: #fff;
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
}
.route-panel-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-ink, #1f2a37);
}
.route-panel-title i { color: var(--hs-primary); }
.route-return {
    font-size: 12px;
    color: var(--hs-muted, #667085);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    cursor: pointer;
    white-space: nowrap;
}
.route-panel-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .85rem;
}

/* Terminale (start / sosire) — panouri branded. */
.rt-term {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    color: #fff;
    background: var(--hs-primary, #134a6d);
}
.rt-term-end { background: #1a7f43; }
.rt-term i { font-size: 1rem; flex: 0 0 auto; opacity: .95; }
.rt-term-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rt-term-body b { font-size: 13px; }
.rt-term-body span { font-size: 11px; opacity: .85; overflow-wrap: anywhere; }

/* Banda din capul listei de opriri: semnaleaza ca ordinea a fost mutata cu mana
   si ofera revenirea la traseul propus de Google. Apare doar cand ordinea difera. */
.rt-reorder {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .5rem .6rem;
    margin-bottom: .5rem;
    background: #fff8e6;
    border: 1px solid #f2dfb0;
    border-radius: 8px;
}
.rt-reorder-txt {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 12px;
    font-weight: 600;
    color: #8a6a12;
}
.rt-reorder-btn { margin-left: auto; font-size: 12px; white-space: nowrap; }

/* Oprire client — rand cu numar in cerc + nume/adresa. */
.rt-stop {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .7rem;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.rt-num {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7eef4;
    color: var(--hs-primary, #134a6d);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rt-stop-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rt-stop-body b { font-size: 13px; color: var(--hs-ink, #1f2a37); }
.rt-stop-body span { font-size: 11px; color: var(--hs-muted, #667085); overflow-wrap: anywhere; }
/* Randul de titlu al opririi: nume client + numarul fisei tehnice (badge). */
.rt-stop-title { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.rt-stop-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Selector cu doua clase: `.rt-stop-body span` de mai sus e mai specific decat o clasa
   singura si i-ar suprascrie altfel dimensiunea/culoarea. */
.rt-stop-body .rt-stop-nr {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .6rem;
    border-radius: 4px;
    background: #e7eef4;
    color: var(--hs-primary, #134a6d);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap; /* numarul nu se rupe niciodata pe doua randuri */
    font-variant-numeric: tabular-nums;
}
.rt-stop-body .rt-stop-nr i { font-size: 11px; }

/* Conector intre opriri: distanta / durata, discret, cu linie verticala. */
.rt-leg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    padding: .15rem 0;
    margin: .1rem 0;
    font-size: 11px;
    color: #98a2b3;
    font-variant-numeric: tabular-nums;
}
.rt-leg i { font-size: .7rem; }

/* Footer KPI (total km / min) — chips prominente. */
.route-panel-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    padding: .6rem .85rem;
    background: #fff;
    border-top: 1px solid var(--hs-line, #e6e9ec);
}
.route-foot-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #98a2b3;
}
.route-foot-kpis { display: flex; gap: .5rem; }
.rt-kpi {
    display: inline-flex;
    align-items: baseline;
    gap: .2rem;
    padding: .2rem .55rem;
    border-radius: 6px;
    background: #eef3f7;
    border: 1px solid #dbe6ee;
}
.rt-kpi-val {
    font-size: 15px;
    font-weight: 700;
    color: var(--hs-primary, #134a6d);
    font-variant-numeric: tabular-nums;
}
.rt-kpi-unit { font-size: 11px; color: var(--hs-muted, #667085); text-transform: uppercase; letter-spacing: .03em; }

/* Responsive: pe ecrane inguste, panoul trece sub harta. */
@media (max-width: 767.98px) {
    .route-split { flex-direction: column; }
    .route-panel { flex-basis: auto; width: 100%; border-left: 0; border-top: 1px solid var(--hs-line, #e6e9ec); }
    .route-map-wrap { min-height: 45vh; }
}

/* Card de hover pe markerele din optimizarea traseului (Google Maps InfoWindow). */
.rt-info {
    min-width: 190px;
    max-width: 260px;
    font-size: 12px;
    color: var(--hs-ink, #1f2a37);
    line-height: 1.35;
}
.rt-info-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .3rem;
}
.rt-info-num {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--hs-primary, #134a6d);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}
.rt-info-nr {
    font-weight: 700;
    color: var(--hs-primary, #134a6d);
    font-variant-numeric: tabular-nums;
}
.rt-info-type {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #667085;
    background: #eef3f7;
    border: 1px solid #dbe6ee;
    border-radius: 5px;
    padding: .05rem .35rem;
}
.rt-info-name {
    font-weight: 600;
    margin-bottom: .25rem;
}
.rt-info-row {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    color: var(--hs-muted, #667085);
    margin-top: .15rem;
}
.rt-info-row i { color: var(--hs-primary, #134a6d); margin-top: 1px; flex: 0 0 auto; }
.rt-info-row span { overflow-wrap: anywhere; }

/* Indiciu „click pentru detalii" in cardul de hover al opririi. */
.rt-info-hint {
    display: flex;
    align-items: center;
    gap: .3rem;
    margin-top: .4rem;
    padding-top: .35rem;
    border-top: 1px dashed #e0e5ea;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--hs-primary, #134a6d);
}

/* Tooltip propriu la hover pe markerele de traseu (position:fixed, deasupra oricarui modal). */
.rt-tip {
    position: fixed;
    z-index: 20000;
    pointer-events: none;
    background: #fff;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
    padding: .6rem .7rem;
}

/* Bara de unelte a panoului de traseu (recalculare, reset ordine, PDF, Navigheaza).
   Ora de plecare si minutele/interventie nu se mai seteaza aici: vin din programul
   de lucru (al inginerului ales sau cel implicit al companiei). */
.route-panel-tools {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .85rem;
    background: #fff;
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
    flex-wrap: wrap;
}
/* „Navigheaza" (Google Maps) — buton iconic, in culoarea de brand. Fara text: eticheta
   sta in title/aria-label. Starea `disabled` e pusa din JS cand ruta nu are opriri. */
.route-nav {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: var(--hs-primary, #134a6d);
    border: 1px solid #0f3d5a;
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .12);
    transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.route-nav:hover { background: #0f3d5a; color: #fff; box-shadow: 0 3px 8px rgba(16, 24, 40, .18); transform: translateY(-1px); }
.route-nav:active { transform: none; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.route-nav:focus-visible { outline: 2px solid #9dc2e0; outline-offset: 2px; }
.route-nav.disabled { opacity: .45; pointer-events: none; }

/* Programul dupa care se calculeaza orele — doar afisaj, in stanga barei. */
.route-sched {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    min-width: 0;
    cursor: help;
}
.route-sched-name {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    max-width: 13rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    color: var(--hs-ink, #1f2a37);
}
.route-sched-name i { color: var(--hs-primary, #134a6d); }
.route-sched-chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .05rem .45rem;
    border-radius: 4px;
    background: #eef2f6;
    color: var(--hs-muted, #667085);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Badge ETA (ora estimata de sosire) pe randurile de oprire / terminale. */
.rt-eta {
    margin-left: auto;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hs-primary, #134a6d);
    background: #eef3f7;
    border: 1px solid #dbe6ee;
    border-radius: 5px;
    padding: .1rem .4rem;
    align-self: center;
}
.rt-term .rt-eta { color: #fff; background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .35); }

/* Oprire care s-ar termina DUPA ora de sfarsit din programul inginerului ales.
   Doar semnalare: programarea ramane permisa (un traseu poate depasi intentionat). */
.rt-eta--after {
    color: #b42318;
    background: #fef3f2;
    border-color: #fecdca;
}
.rt-eta--after::after {
    content: '!';
    margin-left: .25rem;
    font-weight: 800;
}

/* Ora confirmata telefonic cu clientul — nu mai e o estimare, deci fara eticheta „ETA". */
.rt-eta--locked {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    color: #1a7f43;
    background: #e7f4ec;
    border-color: #cfe9d9;
}
.rt-eta i { font-size: .72rem; opacity: .85; }
.rt-eta--locked i { font-size: .7rem; opacity: 1; }

/* Bara „Programează tot traseul" din panoul de traseu (inginer + data + buton). */
.route-schedule {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .85rem;
    background: #fff;
    border-top: 1px solid var(--hs-line, #e6e9ec);
}
/* Camp obligatoriu necompletat (inginer / data) — marcat la incercarea de programare. */
.is-required-empty,
.is-required-empty.form-control { border-color: #f2c9c9 !important; background: #fdf6f6; }

.route-schedule .form-select,
.route-schedule .form-control {
    font-size: 12px;
    padding: .2rem .4rem;
}
.route-schedule #route_engineer { flex: 1 1 auto; min-width: 0; }
/* Data: 110px ficsi, cu iconita ASEZATA IN input (absolut, peste padding-ul din stanga).
   `pointer-events: none` pe iconita: clicul trece prin ea in input, deci deschide
   calendarul in loc sa fie inghitit. */
.route-schedule .route-date-tool {
    position: relative;
    flex: 0 0 110px;
    display: block;
}
.route-schedule .route-date-tool i {
    position: absolute;
    left: .45rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    pointer-events: none;
    z-index: 2;
}
.route-schedule #route_date {
    width: 110px;
    max-width: none;
    padding-left: 1.45rem;
    text-align: left;
    font-variant-numeric: tabular-nums;
    background-color: #fff;
    cursor: pointer;
}
.route-schedule #route_date:hover { border-color: var(--hs-primary, #134a6d); }
.route-schedule #route_date:focus {
    border-color: var(--hs-primary, #134a6d);
    box-shadow: 0 0 0 .18rem rgba(19, 74, 109, .14);
}

/* select2 pe inginer: aceeasi inaltime si acelasi font ca restul controalelor din bara. */
.route-schedule .select2-container { flex: 1 1 auto; min-width: 0; }
.route-schedule .select2-container--bootstrap-5 .select2-selection {
    min-height: 0;
    height: calc(1.5em + .4rem + 2px);
    padding: .2rem .4rem;
    font-size: 12px;
    line-height: 1.5;
}
.route-schedule .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
}
.route-schedule .select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
}

/* Indicatorul „i" de langa inginer (programul lui de lucru, la hover).
   Buton-link fara padding, ca sa nu ingusteze select-ul din bara. */
.route-eng-info {
    flex: 0 0 auto;
    line-height: 1;
    color: var(--hs-primary, #134a6d);
    text-decoration: none;
    opacity: .75;
}
.route-eng-info:hover,
.route-eng-info:focus { opacity: 1; color: var(--hs-primary, #134a6d); }
.route-eng-info i { font-size: 1rem; }

/* Tooltip-ul cu programul inginerului: mai lat si aliniat la stanga. */
.rt-tip .tooltip-inner {
    max-width: 280px;
    text-align: left;
    padding: .5rem .6rem;
}

/* Butonul „i" din capul panoului + tooltipul cu regulile de calcul. */
.route-help {
    border: 0;
    background: transparent;
    padding: 0 0 0 .2rem;
    line-height: 1;
    color: rgba(255, 255, 255, .75);
    cursor: help;
}
.route-help:hover,
.route-help:focus { color: #fff; }
.route-help i { font-size: .95rem; }
/* Aceeasi iconita, dar pe fundal alb (bara de programare din josul panoului). */
.route-help--dark { color: #98a2b3; padding: 0 .1rem; }
.route-help--dark:hover,
.route-help--dark:focus { color: var(--hs-primary, #134a6d); }
/* Explicatia e mai lunga decat un tooltip obisnuit: mai mult loc si randuri lizibile. */
.rt-tip--help .tooltip-inner { max-width: 380px; }
.rt-help { display: flex; flex-direction: column; gap: .5rem; }
.rt-help-row { display: flex; align-items: flex-start; gap: .45rem; font-size: 12px; line-height: 1.35; }
.rt-help-row i { flex: 0 0 auto; margin-top: .12rem; opacity: .85; }
.rt-help-row b { display: block; font-weight: 700; }

/* Orele de start din tooltip-ul inginerului (chip-uri mici, se aseaza pe randuri). */
.rt-slots { display: flex; flex-wrap: wrap; gap: .2rem; max-width: 240px; }
.rt-leg--tight { color: #b42318; font-weight: 600; }

.rt-slot {
    display: inline-block;
    padding: .05rem .3rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, .16);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
}

/* Opriri reordonabile prin drag-and-drop + buton de programare per fisa. */
.rt-stop { cursor: default; }
.rt-drag {
    flex: 0 0 auto;
    cursor: grab;
    color: #b7bec6;
    font-size: 1rem;
    line-height: 1;
    padding: 0 .1rem;
}
.rt-drag:active { cursor: grabbing; }
.rt-stop.rt-dragging { opacity: .5; }
.rt-stop.rt-drop-target { outline: 2px dashed var(--hs-primary, #134a6d); outline-offset: -2px; }
/* Durata interventiei pentru oprirea curenta (cronometru) — acelasi gabarit. */
.rt-stop-dur {
    flex: 0 0 auto;
    border: 1px solid #cfe0cf;
    background: #eef7ef;
    color: #1a7f43;
    border-radius: 5px;
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
}
.rt-stop-dur:hover { background: #1a7f43; color: #fff; border-color: #1a7f43; }
/* Intervalul rezultat din durata, in dialog. */
.rt-dur-preview { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hs-ink, #1f2a37); }
/* Coloana din dreapta opririi: ETA deasupra, butoanele de actiune dedesubt. */
.rt-stop-side {
    flex: 0 0 auto;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .3rem;
}
/* In coloana, badge-ul ETA nu mai impinge singur spre dreapta (o face .rt-stop-side). */
.rt-stop-side .rt-eta { margin-left: 0; align-self: flex-end; }
/* Grupul de actiuni al opririi (confirmare / geocodare / programare / eliminare):
   lipite intre ele, ca sa nu ia din latimea numelui cand randul e ingust. */
.rt-stop-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .25rem; }
/* Precizare in dialogul de confirmare: confirmarea nu creeaza programarea. */
.rt-conf-hint {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .8rem;
    border-radius: 8px;
    background: #fff8e6;
    border: 1px solid #f2dfb0;
    border-left: 4px solid #d99b0b;
    font-size: 13px;
    line-height: 1.35;
    color: #7a5c0c;
}
.rt-conf-hint i { flex: 0 0 auto; font-size: 1.05rem; color: #d99b0b; }
.rt-conf-hint b { color: #6b4f08; }

/* Selectorul de mod din dialogul de confirmare: „ora e stabilita" vs „de recontactat". */
.rt-mode { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rt-mode-opt {
    flex: 1 1 12rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .6rem .75rem;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.rt-mode-opt input { margin: 0; flex: 0 0 auto; }
.rt-mode-opt i { font-size: 1.1rem; color: #98a2b3; flex: 0 0 auto; }
.rt-mode-opt span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rt-mode-opt b { font-size: 13px; color: var(--hs-ink, #1f2a37); }
.rt-mode-opt small { font-size: 11px; color: var(--hs-muted, #667085); }
.rt-mode-opt:hover { border-color: #cfdcea; background: #fbfdff; }
/* Optiunea aleasa — verde pentru confirmare, chihlimbar pentru recontactare. */
.rt-mode-opt.is-on { border-color: #1a7f43; background: #f4fbf7; box-shadow: inset 0 0 0 1px #cfe9d9; }
.rt-mode-opt.is-on i { color: #1a7f43; }
.rt-mode-opt.is-on:has(input[value="callback"]) { border-color: #d99b0b; background: #fffdf5; box-shadow: inset 0 0 0 1px #f2dfb0; }
.rt-mode-opt.is-on:has(input[value="callback"]) i { color: #d99b0b; }

/* Varianta informativa (albastra) a casetei din dialog. */
.rt-conf-hint--info {
    background: #eef4fa;
    border-color: #cfdcea;
    border-left-color: #134a6d;
    color: var(--hs-primary, #134a6d);
}
.rt-conf-hint--info i { color: var(--hs-primary, #134a6d); }

/* Durata rezultata din ora de inceput/final, sub campul de final. */
.rt-conf-dur { font-size: 11px; font-weight: 600; color: var(--hs-muted, #667085); }

/* Istoricul confirmarilor, in dialogul de confirmare/anulare. */
.rt-log-wrap { margin-top: 1.1rem; }
.rt-log-box { max-height: 12rem; overflow-y: auto; }
.rt-log { list-style: none; margin: 0; padding: 0; }
.rt-log-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem .6rem;
    padding: .4rem .1rem;
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
    font-size: 12px;
}
.rt-log-row:last-child { border-bottom: 0; }
.rt-log-act {
    flex: 0 0 auto;
    padding: .05rem .4rem;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    background: #eef2f6;
    color: var(--hs-muted, #667085);
}
.rt-log-act--confirm { background: #e7f4ec; color: #1a7f43; }
.rt-log-act--reconfirm { background: #fff8e6; color: #8a6a12; }
.rt-log-act--cancel { background: #fdeeee; color: #b42318; }
.rt-log-act--callback { background: #fff8e6; color: #8a6a12; }
.rt-log-act--duration { background: #eef4fa; color: #134a6d; }
.rt-log-when { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--hs-ink, #1f2a37); }
.rt-log-prev { margin-left: .3rem; font-weight: 500; color: #98a2b3; text-decoration: line-through; }
.rt-log-prev i { text-decoration: none; }
.rt-log-meta { margin-left: auto; font-size: 11px; color: #98a2b3; white-space: nowrap; }
.rt-log-note { flex: 1 1 100%; font-size: 11px; color: var(--hs-muted, #667085); }
.rt-log-note i { margin-right: .25rem; }

/* Confirma ora cu clientul / anuleaza confirmarea — acelasi gabarit ca celelalte. */
.rt-stop-conf {
    flex: 0 0 auto;
    border: 1px solid #d9d2ea;
    background: #f3f0fa;
    color: #5b4a9e;
    border-radius: 5px;
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
}
.rt-stop-conf:hover { background: #5b4a9e; color: #fff; border-color: #5b4a9e; }
/* Confirmata: butonul devine verde (click = anuleaza confirmarea). */
.rt-stop-conf.is-locked { background: #e7f4ec; border-color: #cfe9d9; color: #1a7f43; }
.rt-stop-conf.is-locked:hover { background: #1a7f43; color: #fff; border-color: #1a7f43; }

/* Marcata „de recontactat": oprirea ramane mutabila, doar semnalata vizual. */
.rt-stop-conf.is-callback { background: #fff8e6; border-color: #f2dfb0; color: #8a6a12; }
.rt-stop-conf.is-callback:hover { background: #d99b0b; color: #fff; border-color: #d99b0b; }
.rt-stop--callback { border-color: #f2dfb0; background: #fffdf7; box-shadow: inset 3px 0 0 #d99b0b, 0 1px 2px rgba(16, 24, 40, .04); }

/* Oprire cu ora confirmata: fixata in traseu (nu se trage, nu o muta optimizarea). */
.rt-stop--locked {
    border-color: #cfe9d9;
    background: #f7fcf9;
    box-shadow: inset 3px 0 0 #1a7f43, 0 1px 2px rgba(16, 24, 40, .04);
    cursor: default;
}
.rt-stop--locked .rt-drag { color: #1a7f43; cursor: default; }

/* Regenereaza coordonatele fisei — acelasi gabarit ca butonul de programare. */
.rt-stop-geo {
    flex: 0 0 auto;
    border: 1px solid #cfdcea;
    background: #eef4fa;
    color: var(--hs-primary, #134a6d);
    border-radius: 5px;
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
}
.rt-stop-geo:hover { background: var(--hs-primary, #134a6d); color: #fff; border-color: var(--hs-primary, #134a6d); }
.rt-stop-geo:disabled { opacity: .6; cursor: default; }
/* Scoate oprirea din traseu (nu sterge fisa din baza) — acelasi gabarit ca butonul de programare. */
.rt-stop-del {
    flex: 0 0 auto;
    border: 1px solid #f2c9c9;
    background: #fdeeee;
    color: #b42318;
    border-radius: 5px;
    width: 26px;
    height: 26px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    line-height: 1;
    cursor: pointer;
}
.rt-stop-del:hover { background: #b42318; color: #fff; border-color: #b42318; }
/* Iconita butonului de recalculare, cat timp se reincarca traseul.
   `.hs-spin` e acelasi lucru, dar cu nume neutru: se pune pe orice iconita care trebuie
   sa se roteasca cat tine o cerere (ex. refresh-ul necesarului de piese din fișă). */
.rt-spin, .hs-spin { display: inline-block; animation: rt-spin 1s linear infinite; }
@keyframes rt-spin { to { transform: rotate(360deg); } }

/* ============================================================================
   Modale de programare (.modal-appt) — aspect enterprise/business, consistent cu
   modalul de fisa/traseu: cadru fin, header branded compact, sectiuni, inputuri sobre.
   ============================================================================ */
.modal-dialog.modal-appt { max-width: 460px; }
.modal-appt .modal-content {
    border: 1px solid #d8dde2;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(16, 24, 40, .18);
}
.modal-appt .modal-header {
    padding: .7rem 1.1rem;
    border-bottom: 3px solid rgba(0, 0, 0, .22);
}
.modal-appt .modal-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}
.modal-appt .modal-body { padding: 1.1rem; background: #f6f7f9; }
.modal-appt .modal-footer {
    padding: .7rem 1.1rem;
    background: #fff;
    border-top: 1px solid var(--hs-line, #e6e9ec);
}
.modal-appt label.form-label { margin-bottom: .3rem; }
.modal-appt label.form-label i { color: var(--hs-primary, #134a6d); }
.modal-appt .form-control,
.modal-appt .form-select {
    border-radius: 6px;
    border-color: #d5dbe1;
}
.modal-appt .form-control:focus,
.modal-appt .form-select:focus {
    border-color: var(--hs-primary, #134a6d);
    box-shadow: 0 0 0 .2rem rgba(19, 74, 109, .15);
}

/* Card cu fisa (context) in capul modalului de programare. */
.rs-sheet {
    display: flex;
    align-items: center;
    gap: .7rem;
    background: #fff;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-left: 3px solid var(--hs-primary, #134a6d);
    border-radius: 8px;
    padding: .6rem .8rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.rs-sheet-ic {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e7eef4;
    color: var(--hs-primary, #134a6d);
    font-size: 1rem;
}
.rs-sheet-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.rs-sheet-lbl {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #98a2b3;
}
.rs-sheet-val {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--hs-ink, #1f2a37);
    outline: none;
}
/* Titlu de sectiune discret (uppercase) in modalul de programare. */
.rs-section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a929b;
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
    padding-bottom: .35rem;
    margin-bottom: .85rem;
}

/* Sumar programare bulk (modal_route_confirm) — 80% din viewport.
   Specificitate pe doua clase, ca sa bata `.modal-dialog{max-width}` din Bootstrap. */
.modal-dialog.modal-route-confirm {
    width: 80vw;
    max-width: 80vw;
    height: 80vh;
    /* Marginea implicita s-ar aduna la inaltime si ar scoate dialogul din ecran. */
    margin: 0 auto;
}
.modal-route-confirm .modal-content { height: 80vh; }

/* Sumar programare bulk (modal_route_confirm) */
.rc-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    background: var(--hs-bg-soft, #f6f8fa);
    border: 1px solid var(--hs-line-soft, #eef1f4);
    border-radius: .5rem;
}
.rc-meta-item { display: flex; flex-direction: column; min-width: 0; }
.rc-meta-lbl {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a929b;
}
.rc-meta-val { font-size: 14px; font-weight: 600; }
.rc-table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #8a929b;
}
/* Fisa opririi: numar + tip pe acelasi rand (se rup doar daca nu incap). */
.rc-sheet { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
/* Numarul fisei tehnice — badge, acelasi reper vizual ca in panoul de traseu. */
.rc-nr {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .1rem .6rem;
    border-radius: 4px;
    background: #e7eef4;
    color: var(--hs-primary, #134a6d);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.rc-nr i { font-size: 11px; }

/* ============================================================
   Modul piese — cautare stoc + statusuri (Faza 1)
   ============================================================ */

/* ---- Paleta modulului de piese ----
   Aliasuri catre paleta semantica din `:root` (inceputul fisierului), unde a fost promovata
   pentru ca aceleasi stari apar in toata aplicatia. Numele `--pq-*` raman ca sa nu se rescrie
   tot modulul; valorile se schimba dintr-un singur loc. */
:root {
    --pq-neutral-bg: var(--hs-neutral-bg);  --pq-neutral-fg: var(--hs-neutral-fg);  --pq-neutral-br: var(--hs-neutral-br);
    --pq-info-bg:    var(--hs-info-bg);     --pq-info-fg:    var(--hs-info-fg);     --pq-info-br:    var(--hs-info-br);
    --pq-brand-bg:   var(--hs-brand-bg);    --pq-brand-fg:   var(--hs-brand-fg);    --pq-brand-br:   var(--hs-brand-br);
    --pq-good-bg:    var(--hs-good-bg);     --pq-good-fg:    var(--hs-good-fg);     --pq-good-br:    var(--hs-good-br);
    --pq-warn-bg:    var(--hs-warn-bg);     --pq-warn-fg:    var(--hs-warn-fg);     --pq-warn-br:    var(--hs-warn-br);
    --pq-bad-bg:     var(--hs-bad-bg);      --pq-bad-fg:     var(--hs-bad-fg);      --pq-bad-br:     var(--hs-bad-br);
}
/* Disponibilitatea in stoc. Erau cinci pastile pline, in culori pure (verde/galben/
   portocaliu/albastru/rosu Bootstrap): pe un tabel intreg aratau ca un semafor si trageau
   ochiul inaintea datelor. Acum sunt din aceeasi familie ca `.pq-badge` — fundal deschis,
   text inchis, contur — deci se citesc ca eticheta, nu ca alarma. Punctul colorat pastreaza
   citirea rapida „dintr-o privire", care era rostul culorilor pline. */
.part-status {
    display: inline-block;
    padding: .16em .5em;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    border-radius: 4px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.part-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: .35rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}
.part-status--available   { background: var(--pq-good-bg);    color: var(--pq-good-fg);    border-color: var(--pq-good-br); }
.part-status--limited     { background: var(--pq-warn-bg);    color: var(--pq-warn-fg);    border-color: var(--pq-warn-br); }
.part-status--reserved    { background: var(--pq-warn-bg);    color: #9a5218;              border-color: var(--pq-warn-br); }
.part-status--supply      { background: var(--pq-info-bg);    color: var(--pq-info-fg);    border-color: var(--pq-info-br); }
.part-status--unavailable { background: var(--pq-bad-bg);     color: var(--pq-bad-fg);     border-color: var(--pq-bad-br); }

/* ---- Coada magaziei (/part-queue) ----
   Antet de sectiune in interiorul barei de filtre: titlul spune CE e lista, subtitlul
   PE CE se uita utilizatorul. Aceleasi primitive ca la listele de modul. */
.hs-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: .85rem;
}
.hs-section__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--hs-text, #101828);
}
.hs-section__title i { color: var(--hs-primary, #134a6d); font-size: 16px; }
.hs-section__sub {
    margin: .2rem 0 0;
    font-size: 12px;
    color: var(--hs-muted, #667085);
}
.hs-section__tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* Fara filtre dedesubt, antetul nu mai are ce sa separe. */
.hs-filters > .hs-section:last-child { margin-bottom: 0; }

/* Eticheta de stare / prioritate. Colturi mici (nu pilula) si greutate medie: intr-un
   tabel dens, pastilele rotunde si bold-ul tare fac pagina sa para zgomotoasa. */
.pq-badge {
    display: inline-block;
    padding: .16em .5em;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
    background: var(--pq-neutral-bg);
    color: var(--pq-neutral-fg);
    border-color: var(--pq-neutral-br);
}
.pq-badge--info  { background: var(--pq-info-bg);  color: var(--pq-info-fg);  border-color: var(--pq-info-br); }
.pq-badge--brand { background: var(--pq-brand-bg); color: var(--pq-brand-fg); border-color: var(--pq-brand-br); }
.pq-badge--good  { background: var(--pq-good-bg);  color: var(--pq-good-fg);  border-color: var(--pq-good-br); }
.pq-badge--warn  { background: var(--pq-warn-bg);  color: var(--pq-warn-fg);  border-color: var(--pq-warn-br); }
.pq-badge--bad   { background: var(--pq-bad-bg);   color: var(--pq-bad-fg);   border-color: var(--pq-bad-br); }
/* Prioritatea normala e cazul obisnuit: se scrie, nu se coloreaza. */
.pq-badge--quiet { background: transparent; border-color: transparent; color: var(--hs-muted, #5d6b80); font-weight: 500; }
/* Punct de prioritate: la urgent, ochiul prinde intai pata de culoare, apoi textul. */
.pq-badge--dot::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: .35rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
}

/* ---- Ecranul cozii de piese (/part-queue) ----
   Rafinari de densitate si relief, scopate pe `.pq-board` ca sa nu atinga alte module:
   colturi mai putin rotunde, umbre in doua straturi foarte fine, antet de tabel discret,
   randuri mai stranse. Enterprise inseamna aici „mai putin decor, mai multa informatie". */
.pq-board .hs-card {
    border-radius: 6px;
    border-color: var(--hs-line, #e6e9ec);
    box-shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .04);
}
.pq-board .hs-stat { border-radius: 6px; padding: .8rem .95rem; }
.pq-board .hs-stat__icon { width: 36px; height: 36px; border-radius: 8px; font-size: 16px; }
.pq-board .hs-stat__val { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.pq-board .hs-stat__lbl {
    font-size: var(--hs-fs-2xs, 10px);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle, #98a2b3);
}
/* Antetul de tabel: mic, uppercase, fara greutate mare — e o eticheta, nu un titlu. */
.pq-board table.table-enterprise thead th {
    font-size: var(--hs-fs-2xs, 10px);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hs-subtle, #98a2b3);
    font-weight: 600;
    padding-top: .55rem;
    padding-bottom: .55rem;
}
.pq-board table.table-enterprise tbody td { padding-top: .5rem; padding-bottom: .5rem; }
.pq-board .hs-section__title { font-size: 14px; }
/* Butoanele de actiune: contur foarte fin, ca randul sa nu para plin de butoane. */
.pq-board .pq-actions .btn { border-color: #dde3ea; }
.pq-board .pq-actions .btn:hover { border-color: currentColor; }

/* Cap de grup: o fisa, cu liniile ei dedesubt. Banda e discreta — structureaza, nu striga. */
.pq-group > td {
    background: var(--hs-surface-alt, #fafbfc);
    border-top: 1px solid var(--hs-line, #e6e9ec) !important;
    /* Linia navy din stanga tine grupul legat vizual, fara sa umple randul cu culoare. */
    box-shadow: inset 3px 0 0 var(--hs-primary, #134a6d);
    padding: .35rem .9rem !important;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--hs-primary, #134a6d) !important;
}
tbody > .pq-group:first-child > td { border-top: 0 !important; }
.pq-group i { margin-right: .4rem; opacity: .8; }
.pq-group__sheet a { color: var(--hs-primary, #134a6d); font-weight: 700; text-decoration: none; }
.pq-group__sheet a:hover { text-decoration: underline; }
.pq-group__count {
    display: inline-block;
    min-width: 20px;
    margin-left: .5rem;
    padding: .05em .45em;
    border-radius: 4px;
    background: #fff;
    border: 1px solid var(--hs-line, #e6e9ec);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
/* Statusul fisei in capul de grup: text neutru, culoarea o poarta doar bulina. */
.pq-group__status {
    display: inline-flex;
    align-items: center;
    margin-left: .6rem;
    padding: .05em .5em;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--hs-line, #e6e9ec);
    color: #475467;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
}
.pq-status-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    margin-right: .35rem;
    flex: none;
}
/* Zebra ar numara si capetele de grup, deci alternanta ar iesi neregulata: pe lista
   grupata structura o dau benzile de fisa, nu fundalul randurilor. */
table[data-group-by-sheet] tbody tr:nth-child(even):not(.pq-group) > td { background: transparent; }
/* Capul de grup nu e o linie de lucru: nu raspunde la hover. Bootstrap 5.3 picteaza
   hover-ul prin `--bs-table-bg-state`, deci acolo se anuleaza, nu pe `background`. */
table[data-group-by-sheet] tbody tr.pq-group:hover > td {
    --bs-table-bg-state: var(--hs-surface-alt, #fafbfc);
    background: var(--hs-surface-alt, #fafbfc);
}

/* Denumirea piesei — ancora de citire a randului, ca numele clientului in /customer. */
.pq-part__name { color: var(--hs-text, #101828); font-weight: 600; }
/* Cantitatea: cifre tabulare, ca sa se alinieze pe coloana. */
.pq-qty {
    display: inline-block;
    min-width: 28px;
    padding: .1em .4em;
    border-radius: 6px;
    background: #f2f4f7;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--hs-text, #101828);
}
/* Actiunile stau intr-un grup compact, aliniat la dreapta (trei formuri inline). */
.pq-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: .3rem; }
.pq-actions .btn { --bs-btn-padding-x: .5rem; --bs-btn-padding-y: .2rem; line-height: 1.3; }

.part-search-results table { margin-bottom: 0; }
.part-search-results .part-pick { cursor: pointer; }
.part-search-empty {
    padding: .5rem .25rem;
    font-size: 13px;
    color: #8a929b;
}

/* Modalul „Solicită piesă”: piesa aleasa, intr-un bloc de rezumat deasupra campurilor. */
.pr-part {
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    padding: .65rem .8rem;
    background: #f9fafb;
}
.pr-part__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
}
.pr-part__code { font-size: 12px; color: #8a929b; }
.pr-part__price { font-weight: 700; color: var(--hs-primary, #134a6d); white-space: nowrap; }
.pr-part__name { font-weight: 600; line-height: 1.35; margin-top: .1rem; }
.pr-part__stock { font-size: 12px; margin-top: .35rem; }
.pr-part__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--hs-line, #e6e9ec);
}
.pr-part__total-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #8a929b; }
.pr-part__total-val { font-weight: 700; color: var(--hs-primary, #134a6d); white-space: nowrap; }
.pr-flow {
    display: flex;
    gap: .5rem;
    padding: .55rem .75rem;
    border: 1px solid #cfe2f3;
    border-radius: 8px;
    background: #f1f7fc;
    color: #2b4a63;
    font-size: 12.5px;
    line-height: 1.45;
}
.pr-flow > .bi { color: var(--hs-primary, #134a6d); margin-top: .1rem; }

/* ============================================================
   Tab „Piese" din fisa — layout ENTERPRISE (banda KPI + panouri).
   Neutru la context: functioneaza si in modal (.modal-sheet-view),
   si pe pagina full /sheet/view. Foloseste tokenii deja definiti
   (--hs-line / --hs-line-soft / --hs-ink / --hs-muted / --hs-primary).
   ============================================================ */
.sv-parts {
    --hs-line: var(--hs-line, #e6e9ec);
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

/* Banda de indicatori (KPI) — sinteza rapida sus. */
.sv-parts .svp-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .5rem;
}
.sv-parts .svp-stat {
    position: relative;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    background: #fff;
    padding: .55rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .12rem;
    overflow: hidden;
}
.sv-parts .svp-stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--hs-primary, #134a6d);
    opacity: .85;
}
.sv-parts .svp-stat > i {
    position: absolute;
    right: .5rem;
    top: .5rem;
    font-size: 1.05rem;
    color: var(--hs-primary, #134a6d);
    opacity: .2;
}
.sv-parts .svp-stat-val {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    color: var(--hs-ink, #1f2a37);
    font-variant-numeric: tabular-nums;
}
.sv-parts .svp-stat-lbl {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hs-muted, #667085);
}

/* Panouri de sectiune — antet gri + corp alb, borduri fine, fara umbra. */
.sv-parts .svp-panel {
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.sv-parts .svp-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem .8rem;
    background: #f7f8fa;
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
}
.sv-parts .svp-panel-title {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-ink, #1f2a37);
}
.sv-parts .svp-panel-title > i {
    color: var(--hs-primary, #134a6d);
    font-size: 13px;
}
.sv-parts .svp-count {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: .2rem .4rem;
    border-radius: 999px;
    background: #e9edf1;
    color: var(--hs-muted, #667085);
    font-variant-numeric: tabular-nums;
}
.sv-parts .svp-panel-head form { margin: 0; }
.sv-parts .svp-panel-body { padding: .75rem .8rem; }

/* ---- „Necesar piese” (tab-ul Piese al fisei) ----
   Aceleasi primitive ca in coada depozitului: tabelul scroleaza in containerul lui,
   fara sa lateasca panoul, iar antetul si celulele vin din `.table-enterprise`. */
.sv-parts .svp-need { overflow-x: auto; margin: -.25rem 0; }
.sv-parts .svp-need table.table-enterprise thead th { background: #fff; }
.sv-parts .svp-need table.table-enterprise > tbody > tr:first-child > td { border-top: 0; }
.sv-parts .svp-need table.table-enterprise > tbody > tr:last-child > * { border-bottom: 0; }
/* Liniile inchise (rezervate/respinse/anulate) sunt istoric: raman lizibile, dar retrase.
   `text-muted` pe `tr` era anulat de culorile celulelor din `.table-enterprise`. */
.sv-parts .svp-need--closed > td { color: var(--hs-muted, #667085); }
.sv-parts .svp-need--closed .pq-part__name { color: var(--hs-muted, #667085); font-weight: 600; }
.sv-parts .svp-need--closed .pq-qty { background: #f5f6f8; color: var(--hs-muted, #667085); }

/* Motivul respingerii, pe linia respinsa din necesar. Randul e retras (linie inchisa),
   deci nota isi cere singura culoarea, altfel s-ar pierde exact informatia cautata. */
.sv-parts .svp-reject-note {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin-top: .25rem;
    padding: .3rem .45rem;
    border-left: 3px solid #f1aeb5;
    border-radius: 0 4px 4px 0;
    background: #fdf2f3;
    font-size: 12px;
    color: #b42318;
}
.sv-parts .svp-reject-note i { margin-top: .1rem; font-size: 12px; }
.sv-parts .svp-reject-note strong { font-weight: 650; }

/* Legenda de status pentru cautare. */
.sv-parts .svp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    margin-top: .6rem;
    padding-top: .55rem;
    border-top: 1px dashed var(--hs-line, #e6e9ec);
}
.sv-parts .svp-legend > span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 11px;
    font-weight: 600;
    color: var(--hs-muted, #667085);
}
.sv-parts .svp-legend .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
}

/* Sub-antet (predare / retur in panoul „Mișcări piese"). */
.sv-parts .svp-subhead {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hs-muted, #667085);
    margin-bottom: .5rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.sv-parts .svp-subhead i { color: var(--hs-primary, #134a6d); }

/* Liste de bifat (piese de predat / returnat) — randuri-card selectabile. */
.sv-parts .svp-check-list {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    margin-bottom: .65rem;
}
.sv-parts .svp-check-list label {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0;
    padding: .35rem .55rem;
    font-size: 12px;
    border: 1px solid var(--hs-line-soft, #eef1f4);
    border-radius: 6px;
    background: #fbfcfd;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}
.sv-parts .svp-check-list label:hover {
    background: #f4f6f8;
    border-color: var(--hs-line, #e6e9ec);
}

/* Documente (procese-verbale / devize) — card intern cu antet propriu. */
.sv-parts .svp-doc,
.sv-estimates .svp-doc {
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
}
.sv-parts .svp-doc-head,
.sv-estimates .svp-doc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .45rem .65rem;
    background: #fafbfc;
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.sv-parts .svp-doc-code,
.sv-estimates .svp-doc-code { font-size: 12px; }
.sv-parts .svp-doc-body,
.sv-estimates .svp-doc-body { padding: .6rem .65rem; }
.sv-parts .svp-doc-body table,
.sv-estimates .svp-doc-body table { margin-bottom: .5rem; }

/* Responsive: pe ecrane inguste banda KPI trece pe 2 coloane. */
@media (max-width: 575.98px) {
    .sv-parts .svp-stats { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   DASHBOARD HR — grafice bar/coloană (fără librărie), stat-tiles, atenție
   ========================================================================== */
.hr-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .hr-dash-grid { grid-template-columns: 1fr; } }

.hr-chartcard { background: #fff; border: 1px solid #e6e6e1; border-radius: 12px; box-shadow: 0 1px 3px rgba(17,16,12,.05); padding: .9rem 1.05rem 1rem; }
.hr-chartcard__title { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: #8a8f98; font-weight: 700; margin-bottom: .9rem; }

/* Bare orizontale (headcount pe departament) */
.hr-bars { display: flex; flex-direction: column; gap: .55rem; }
.hr-barrow { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: .6rem; }
.hr-bar-label { font-size: .8rem; color: #26251f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-bar-track { height: 12px; background: #eef1f4; border-radius: 999px; overflow: hidden; }
.hr-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #1a5a82, #134a6d); min-width: 3px; }
.hr-bar-val { font-size: .8rem; font-weight: 700; color: #134a6d; text-align: right; font-variant-numeric: tabular-nums; }

/* Coloane (angajări pe lună) */
.hr-cols { display: flex; align-items: flex-end; gap: .5rem; height: 130px; padding-top: 6px; }
.hr-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.hr-col-val { font-size: .72rem; font-weight: 700; color: #6b7079; font-variant-numeric: tabular-nums; }
.hr-col-fill { width: 62%; max-width: 34px; min-height: 3px; border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #2a78d6, #134a6d); }
.hr-col-lbl { font-size: .68rem; color: #8a8f98; text-transform: uppercase; letter-spacing: .04em; }

/* Listă de atenție (zile rămase) */
.hr-att-days { display: inline-block; min-width: 46px; text-align: center; padding: .1rem .45rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }
.hr-att-days--warn { background: #fff4e0; color: #a5730f; }
.hr-att-days--soon { background: #fdeaea; color: #b23b3b; }
.hr-att-days--ok   { background: #e6f4ea; color: #1e7a3c; }

.hr-empty-soft { padding: 1.4rem 1rem; text-align: center; color: #9aa0a8; font-style: italic; font-size: .86rem; }

/* ==========================================================================
   FIȘĂ ANGAJAT ENTERPRISE — header profil + timeline
   ========================================================================== */
.hr-prof { display: flex; align-items: center; gap: 1.1rem; padding: 1.1rem 1.25rem; background: linear-gradient(180deg, #fbfbfa, #f4f6f9); border: 1px solid #e5e5e0; border-radius: 14px; box-shadow: 0 1px 3px rgba(17,16,12,.05); flex-wrap: wrap; }
.hr-prof__avatar { width: 72px; height: 72px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 26px; font-weight: 800; color: #fff; text-transform: uppercase; background: linear-gradient(135deg, #1a5a82, #0e3a58); box-shadow: 0 8px 20px rgba(15,58,88,.28); }
.hr-prof__id { flex: 1 1 240px; min-width: 0; }
.hr-prof__name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; color: #0f1b34; line-height: 1.1; }
.hr-prof__meta { color: #6b7079; font-size: .84rem; margin-top: 3px; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.hr-prof__meta a { color: #6b7079; text-decoration: none; } .hr-prof__meta a:hover { color: #134a6d; }
.hr-prof__kpis { display: flex; gap: 1.4rem; align-items: center; padding-left: .5rem; }
.hr-prof__kpi { display: flex; flex-direction: column; }
.hr-prof__kpi b { font-size: 1.05rem; font-weight: 800; color: #134a6d; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hr-prof__kpi span { font-size: .64rem; text-transform: uppercase; letter-spacing: .06em; color: #8a8f98; font-weight: 600; margin-top: 2px; }
@media (max-width: 767px) { .hr-prof__kpis { padding-left: 0; gap: 1rem; } }

.hr-timeline { position: relative; padding: .3rem 0 .3rem 2rem; }
.hr-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: #e6e6e1; }
.hr-tl-item { position: relative; padding: 0 0 1.05rem 0; }
.hr-tl-item:last-child { padding-bottom: 0; }
.hr-tl-dot { position: absolute; left: -1.72rem; top: 2px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; box-shadow: 0 0 0 3px #fff; }
.hr-tl-dot.navy { background: #134a6d; } .hr-tl-dot.blue { background: #2a5da8; } .hr-tl-dot.green { background: #2e7d46; } .hr-tl-dot.amber { background: #a5730f; } .hr-tl-dot.red { background: #c0392b; }
.hr-tl-date { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: #9aa0a8; font-weight: 600; }
.hr-tl-title { font-size: .9rem; font-weight: 700; color: #1c1b18; margin: 1px 0; }
.hr-tl-text { font-size: .82rem; color: #6b7079; }

/* ============================================================================
   Program de lucru (Setări → Program de lucru) — layout enterprise.
   Modalele folosesc acelasi tipar ca modalul de fisa: body gri-deschis cu panouri
   albe flotante, antet cu emblema + eyebrow, sectiuni cu titlu discret.
   ========================================================================= */

/* Titlu de card, consistent cu restul modulelor enterprise. */
.ws-card-title {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #1c1b18;
}
.ws-card-title i { color: var(--hs-primary, #134a6d); font-size: 1rem; }

/* ---- Dimensiuni ----
   Modalele generice porneau de la 500px (implicitul Bootstrap), o lățime de dialog de sistem
   de operare, nu de aplicație de business: formularele ieșeau înghesuite pe o coloană, iar
   tabelele din ele cereau scroll orizontal. Lățimile de mai jos le dau aer fără să treacă în
   „fereastră plină": 640px pentru un formular obișnuit, 940px pentru cele marcate `modal-lg`.
   `modal-xl` rămâne al Bootstrap-ului (1140px) — acolo conținutul dictează deja.

   Se aplică DOAR modalelor enterprise (.ws-modal), deci cele cu layout propriu (fișă, traseu,
   programare) nu sunt atinse. */
.ws-modal .modal-dialog:not(.modal-sm):not(.modal-lg):not(.modal-xl) { max-width: 640px; }
@media (min-width: 992px) {
    .ws-modal .modal-dialog.modal-lg { max-width: 940px; }
}

/* ---- Cadrul: colțuri rotunjite, umbră de dialog, fără chenar ----
   Un modal fără umbră stă „lipit" de pagină; cu una singură, apăsată, se citește ca un strat
   deasupra ei. `overflow: hidden` ține banda navy a antetului în interiorul colțurilor —
   altfel se vede un colț drept peste unul rotunjit. */
.ws-modal .modal-content {
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 48px rgba(16, 24, 40, .24);
}
/* Colțurile se rotunjesc pe antet și footer, NU cu `overflow: hidden` pe .modal-content:
   acolo ar fi tăiat orice dropdown care iese din modal (select2, calendar). */
.ws-modal .modal-header { border-radius: 12px 12px 0 0; }
.ws-modal .modal-footer { border-radius: 0 0 12px 12px; }
/* Fundalul din spate, o idee mai închis: modalele au acum suprafață mai mare, iar un backdrop
   palid le lăsa să se piardă în pagină. */
.modal-backdrop.show { opacity: .55; }

/* ---- Antetul modalelor (emblema + eyebrow + titlu) ---- */
.ws-modal .modal-header {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .14));
    align-items: center;
    padding: .85rem 1.15rem;
}
.ws-modal-head { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.ws-modal-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .18);
    font-size: 1.05rem;
    flex: 0 0 auto;
}
.ws-modal-eyebrow {
    display: block;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    opacity: .78;
    line-height: 1;
    margin-bottom: 3px;
}
.ws-modal .modal-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }

/* ---- Corpul modalelor: fundal gri, panouri albe ---- */
.ws-modal .modal-body { background: #f6f7f9; padding: 1.15rem; }

/* Footerul: alb, cu o linie mai apăsată decât restul chenarelor — e granița dintre „citești"
   și „confirmi". NU se aplică modalelor care cer explicit banda navy. */
.ws-modal .modal-footer:not(.modal-general-footer) {
    background: #fff;
    border-top: 1px solid #e7ebef;
    padding: .8rem 1.15rem;
    gap: .5rem;
}
/* Butoanele de acțiune capătă o lățime minimă: „Salvează" lângă „Renunță" arăta ca două
   etichete de mărimi diferite, nu ca o pereche de decizii. */
.ws-modal .modal-footer .btn { min-width: 116px; }
.ws-modal .modal-footer .btn-close,
.ws-modal .modal-footer .btn-link { min-width: 0; }
/* Panoul auto-generat (JS) pentru modalele fara structura proprie: aceleasi margini,
   dar fara sa dubleze spatierea cand contine un singur formular. */
.ws-modal .modal-body > .ws-panel:only-child { margin-bottom: 0; }
.ws-panel {
    background: #fff;
    border: 1px solid #edf0f2;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    margin-bottom: .85rem;
    overflow: hidden;
}
.ws-panel:last-child { margin-bottom: 0; }
.ws-panel-head {
    padding: .6rem .9rem;
    border-bottom: 1px solid #f1f3f5;
    background: #fbfcfd;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #667085;
}
.ws-panel-head i { color: var(--hs-primary, #134a6d); }
/* ---- Lista de devize (tab-ul Deviz) ----
   Un rand per document, cu liniile ascunse pana sunt cerute. Randul de detaliu e mereu in DOM
   (un <td> cu un <div class="collapse">), deci nu are chenar propriu si nu lasa spatiu cand e
   inchis — de aici `border: 0` pe celula lui. */
.sv-est thead th {
    background: var(--hs-neutral-bg);
    border-bottom: 1px solid var(--hs-line);
    text-transform: uppercase;
    font-size: var(--hs-fs-xs);
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--hs-muted);
    white-space: nowrap;
}
.sv-est > tbody > tr.sv-est-row > td {
    border-top: 1px solid var(--hs-line-soft);
    vertical-align: middle;
}
.sv-est > tbody > tr.sv-est-row:hover > td { background: var(--hs-surface-alt); }
.sv-est-date { font-size: var(--hs-fs-sm); color: var(--hs-muted); }
.sv-est-total { font-weight: 700; color: var(--hs-text); font-variant-numeric: tabular-nums; }
.sv-est-note { font-size: var(--hs-fs-2xs); color: var(--hs-subtle); margin-top: .1rem; }

/* Proforma emisa pe un deviz: pastila discreta, nu un al doilea badge de stare — devizul are
   o singura stare, iar asta e o legatura catre alt document. Cea anulata se stinge in gri. */
.sv-est-proforma {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-right: .35rem;
    padding: .05rem .35rem;
    border: 1px solid var(--hs-good-br, #cee3d8);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-good-bg, #eaf3ed);
    color: var(--hs-good-fg, #256b4b);
    font-size: var(--hs-fs-2xs);
    white-space: nowrap;
}
.sv-est-proforma--off {
    border-color: var(--hs-line, #e6e9ec);
    background: var(--hs-surface-alt, #fafbfc);
    color: var(--hs-subtle, #98a2b3);
}
.doc-detail__idmain .sv-est-proforma { font-size: var(--hs-fs-xs); padding: .1rem .45rem; }

/* Tabul „Fișa client": documentul se vede ca PDF, nu re-randat în HTML — previzualizarea e
   chiar ce se tipărește și se semnează. */
.sv-report__hint { font-size: var(--hs-fs-sm); font-weight: 400; color: var(--hs-muted); margin-left: .5rem; }
.sv-report__preview {
    width: 100%;
    height: calc(100vh - 400px);
    min-height: 420px;
    border: 0;
    display: block;
    background: var(--hs-surface-alt);
}
.sv-report-log { font-size: var(--hs-fs-sm); }
.sv-report-log thead th {
    background: transparent;
    border-bottom: 1px solid var(--hs-line-soft);
    text-transform: uppercase;
    font-size: var(--hs-fs-2xs);
    letter-spacing: .05em;
    color: var(--hs-subtle);
    font-weight: 700;
}
.sv-report-log tbody td { border-top: 1px solid var(--hs-line-soft); color: var(--hs-text-soft); }

/* Istoricul documentului: o cronologie compactă, citită de sus în jos. Jurnalul e append-only,
   deci un rând anulat rămâne vizibil — tăiat, nu șters. */
.sv-est-history { border-top: 1px solid var(--hs-line); background: var(--hs-surface); }
.sv-est-history__head {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .75rem;
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle);
    border-bottom: 1px solid var(--hs-line-soft);
}
.sv-est-timeline { margin: 0; padding: .35rem .75rem .55rem; list-style: none; }
.sv-est-timeline li {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: .2rem 0;
    font-size: var(--hs-fs-sm);
    flex-wrap: wrap;
}
.sv-est-timeline li.is-canceled { text-decoration: line-through; opacity: .55; }
.sv-est-timeline__when {
    color: var(--hs-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    min-width: 8.5rem;
}
.sv-est-timeline__what { font-weight: 600; color: var(--hs-text); }
.sv-est-timeline__note { color: var(--hs-muted); }
/* Cine a facut actiunea: era 10px in `--hs-subtle` (tonul rezervat elementelor decorative) si
   impins in marginea randului, unde se citea ca ornament, nu ca raspuns la „cine". Ramane la
   dreapta — coloana se citeste pe verticala — dar cu iconita, contrast si un pic de spatiu
   fata de nota din stanga lui. */
.sv-est-timeline__who {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding-left: .5rem;
    color: var(--hs-muted);
    font-size: var(--hs-fs-xs);
    white-space: nowrap;
}
.sv-est-timeline__who i { color: var(--hs-subtle); font-size: var(--hs-fs-sm); }

/* ---- Lista de documente emise (tab-ul Facturare) ----
   Acelasi tipar ca lista de devize: un rand per document, iar liniile si incasarile se
   deschid la cerere. Chitantele erau randuri mereu vizibile sub factura — o factura cu trei
   incasari impingea restul documentelor in afara ecranului. */
.inv-toggle {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    background: none;
    padding: 0;
    color: var(--hs-primary);
    font-weight: 600;
}
.inv-toggle i { color: var(--hs-subtle); font-size: 11px; transition: transform .15s ease; }
.inv-toggle:not(.collapsed) i { transform: rotate(90deg); color: var(--hs-primary); }
.inv-num--plain { font-weight: 600; color: var(--hs-text); }
/* Numarul documentului: buton propriu, separat de chevron — deschide modalul de detalii,
   la fel ca la devize (`.sv-est-code-btn`). */
.inv-doc { display: inline-flex; align-items: center; gap: .35rem; }
.inv-num-btn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--hs-primary);
    font-weight: 600;
}
.inv-num-btn:hover .inv-num { text-decoration: underline; }
.inv-detail-row > td { border: 0 !important; }
.inv-row:has(.inv-toggle:not(.collapsed)) > td { background: var(--hs-brand-bg); }

/* Indentat si cu banda de accent: detaliul randului de deasupra, nu inca un document. */
.inv-detail {
    margin: 0 .5rem .6rem 2rem;
    border: 1px solid var(--hs-line);
    border-left: 3px solid var(--hs-primary);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface-alt);
    overflow: hidden;
}
.inv-lines { font-size: var(--hs-fs-sm); background: var(--hs-surface); margin-bottom: 0; }
.inv-lines thead th {
    background: transparent;
    border-bottom: 1px solid var(--hs-line-soft);
    text-transform: uppercase;
    font-size: var(--hs-fs-2xs);
    letter-spacing: .05em;
    color: var(--hs-subtle);
    font-weight: 700;
}
.inv-lines tbody td { border-top: 1px solid var(--hs-line-soft); color: var(--hs-text-soft); }
.inv-lines tfoot td {
    border-top: 1px solid var(--hs-line);
    background: var(--hs-surface-alt);
    font-weight: 700;
    color: var(--hs-text);
    font-variant-numeric: tabular-nums;
}
.inv-ico { color: var(--hs-subtle); margin-right: .3rem; }
.inv-sub { font-weight: 500; color: var(--hs-muted); font-variant-numeric: tabular-nums; }

/* Incasarile documentului, sub linii. */
.inv-receipts { border-top: 1px solid var(--hs-line); }
.inv-receipts__head {
    padding: .45rem .75rem;
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle);
}
.inv-receipt-row {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .4rem .75rem;
    border-top: 1px solid var(--hs-line-soft);
    background: var(--hs-surface);
    font-size: var(--hs-fs-sm);
}
.inv-receipt-main { display: flex; align-items: baseline; gap: .4rem; min-width: 0; flex: 1 1 auto; }
.inv-receipt-main i { color: var(--hs-good-fg); }
.inv-receipt-amount { font-weight: 700; color: var(--hs-text); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Ecranul de Setari (/setting) — taburi de grup sus (domeniul), sub-taburi pe sectiuni,
   un singur panou de continut incarcat prin AJAX dedesubt.
   ========================================================================== */
.st-tabs { display: flex; flex-direction: column; gap: .75rem; }

/* Taburile de grup: bara alba cu linie activa jos — nivelul principal de navigare. */
.st-groups {
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    margin: 0;
    padding: 0 .35rem;
    overflow-x: auto;
    scrollbar-width: thin;
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
}
.st-group {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    padding: .75rem .9rem .65rem;
    border: 0;
    border-bottom: 3px solid transparent;
    background: transparent;
    font-size: var(--hs-fs-md);
    font-weight: 600;
    color: var(--hs-text-soft);
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.st-group i { font-size: 16px; color: var(--hs-subtle); }
.st-group:hover { color: var(--hs-primary); background: var(--hs-primary-soft); }
.st-group:hover i { color: var(--hs-primary); }
.st-group.active { color: var(--hs-primary); border-bottom-color: var(--hs-primary); }
.st-group.active i { color: var(--hs-primary); }
.st-group:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: -2px; }
.st-group__count {
    min-width: 1.35rem;
    padding: 0 .35rem;
    border-radius: 999px;
    font-size: var(--hs-fs-2xs);
    line-height: 1.35rem;
    text-align: center;
    color: var(--hs-muted);
    background: var(--hs-surface-alt);
    border: 1px solid var(--hs-line-soft);
}
.st-group.active .st-group__count { color: #fff; background: var(--hs-primary); border-color: var(--hs-primary); }

/* Capul grupului: descrierea domeniului + sub-taburile sectiunilor, pe acelasi rand cand incap. */
.st-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}
.st-group-hint { margin: 0; font-size: var(--hs-fs-sm); color: var(--hs-muted); flex: 1 1 280px; min-width: 0; }

.st-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0;
}
/* Specificitate pe doua clase: Bootstrap se incarca dupa app.css si `.nav-link`
   si-ar impune propriile culori. */
.st-pills .nav-link,
.st-pills > li > .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
    border: 1px solid var(--hs-line);
    border-radius: 999px;
    padding: .35rem .8rem;
    font-size: var(--hs-fs-sm);
    font-weight: 600;
    color: var(--hs-text-soft);
    background: var(--hs-surface);
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.st-pills .nav-link i { color: var(--hs-subtle); font-size: 14px; flex: 0 0 auto; }
.st-pill-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.st-pills .nav-link:hover {
    color: var(--hs-primary);
    background: var(--hs-primary-soft);
    border-color: var(--hs-brand-br);
}
.st-pills .nav-link:hover i { color: var(--hs-primary); }
.st-pills .nav-link.active,
.st-pills > li > .nav-link.active {
    color: #fff;
    background: var(--hs-primary);
    border-color: var(--hs-primary);
}
.st-pills .nav-link.active i { color: rgba(255, 255, 255, .85); }
.st-pills .nav-link:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }

/* Panoul sectiunii: pastreaza o inaltime minima cat tine cererea, ca pagina sa nu salte. */
.st-panel { min-height: 240px; }
.st-panel[hidden] { display: none; }
.st-loading,
.st-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 240px;
    color: var(--hs-muted);
    font-size: var(--hs-fs-md);
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
}
.st-error { color: var(--hs-bad-fg); background: var(--hs-bad-bg); border-color: var(--hs-bad-br); }
.st-loading .spinner-border { color: var(--hs-primary); }

/* Grupul „Administrare": carduri catre modulele de sine statatoare (pagini proprii). */
.st-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}
.st-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: .75rem;
    row-gap: .15rem;
    padding: .9rem 1rem;
    text-decoration: none;
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.st-card > i {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--hs-radius-sm);
    font-size: 18px;
    color: var(--hs-primary);
    background: var(--hs-primary-soft);
}
.st-card__title { font-weight: 600; color: var(--hs-ink); font-size: var(--hs-fs-md); }
.st-card__desc { font-size: var(--hs-fs-sm); color: var(--hs-muted); }
.st-card::after {
    content: '\F135'; /* bi-arrow-up-right: legatura duce in ALT modul */
    font-family: 'bootstrap-icons';
    position: absolute;
    top: .7rem;
    right: .8rem;
    font-size: 11px;
    color: var(--hs-subtle);
}
.st-card:hover { border-color: var(--hs-brand-br); box-shadow: 0 2px 8px rgba(19, 74, 109, .08); }
.st-card:hover::after { color: var(--hs-primary); }

/* Pe ecran ingust sub-taburile devin un rand derulabil, nu trei randuri de pilule. */
@media (max-width: 767.98px) {
    .st-pills { flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-bottom: 2px; }
    .st-group { padding: .65rem .7rem .55rem; }
}

/* ---- Logo-ul companiei (/company) ----
   Previzualizarea e cât zona reală de pe document, nu o miniatură: logo-ul se alege o dată,
   dar apare pe fiecare factură, deci trebuie văzut la mărimea la care contează. */
.co-logo { display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
.co-logo__preview {
    width: 100%;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--hs-line-strong);
    border-radius: var(--hs-radius-sm);
    /* Tablă de șah discretă: pe fundal alb nu s-ar vedea dacă logo-ul are transparență. */
    background:
        linear-gradient(45deg, var(--hs-surface-alt) 25%, transparent 25%, transparent 75%, var(--hs-surface-alt) 75%),
        linear-gradient(45deg, var(--hs-surface-alt) 25%, transparent 25%, transparent 75%, var(--hs-surface-alt) 75%),
        #fff;
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
    overflow: hidden;
    padding: .5rem;
}
.co-logo__preview img { max-width: 100%; max-height: 84px; object-fit: contain; }
.co-logo__mono {
    width: 52px;
    height: 52px;
    border-radius: var(--hs-radius-sm);
    background: var(--hs-primary);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .5px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.co-logo__meta { margin: 0; font-size: 11px; color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.co-logo__hint { font-size: 11.5px; color: var(--hs-muted); line-height: 1.45; }
.co-logo__form { display: flex; align-items: center; gap: .5rem; }
.co-logo__delete .btn { font-size: 12px; text-decoration: none; }

/* ---- Decuparea logo-ului (#modal_logo_crop) ---- */
.co-crop { display: flex; flex-direction: column; gap: .75rem; }
/* Cropper.js are nevoie de o înălțime explicită: pe un container care se dimensionează după
   imagine, zona de decupare sare la fiecare zoom. */
.co-crop__stage {
    height: 340px;
    background: var(--hs-surface-alt);
    border-radius: var(--hs-radius-sm);
    overflow: hidden;
}
.co-crop__stage img { display: block; max-width: 100%; }
.co-crop__tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.co-crop__hint { font-size: 12px; color: var(--hs-muted); }

@media (max-width: 575.98px) {
    .co-crop__stage { height: 240px; }
}

/* ==========================================================================
   Modalul „Deviz nou" (#modal_estimate_preview) — confirmarea generarii.
   Ecranul raspunde la trei intrebari, in ordinea asta: cat iese, din ce se compune,
   ce nu e in regula. De aceea sumarul sta primul, liniile grupate pe tip dedesubt,
   iar avertismentul la final.

   E si ecran de LUCRU: pretul unitar cu TVA se corecteaza pe fiecare linie, iar totalurile
   se recalculeaza pe loc (pages/sheet-estimate-preview.js). Coloana editabila are latime
   fixa si numere tabulare — un tabel de document, nu un formular.
   Culorile vin din tokenii `--hs-*`.
   ========================================================================== */

/* Dialogul: mai lat decat un modal obisnuit (sapte coloane, una editabila), dar plafonat,
   ca liniile sa nu se intinda pe toata latimea unui monitor lat si sa devina greu de urmarit. */
.modal-estimate-preview { max-width: min(1180px, calc(100vw - 2rem)); }

/* ---- Banda de sumar: compozitia la stanga, cifra finala la dreapta ---- */
.ep-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-between;
    gap: .75rem 1rem;
    padding: .75rem .95rem;
    margin-bottom: .85rem;
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-left: 3px solid var(--hs-primary);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
/* Metricile: eticheta mica deasupra, cifra dedesubt — se citesc dintr-o privire, pe o linie. */
.ep-metrics { display: flex; flex-wrap: wrap; align-items: stretch; gap: .35rem 1.35rem; }
.ep-metric { display: flex; flex-direction: column; justify-content: center; min-width: 4.5rem; }
.ep-metric-lbl {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
    white-space: nowrap;
}
.ep-metric-lbl i { color: var(--hs-subtle); font-size: 12px; }
.ep-metric-val {
    font-size: var(--hs-fs-md, 14px);
    font-weight: 700;
    color: var(--hs-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.3;
}
.ep-summary-total { text-align: right; margin-left: auto; }
.ep-total-lbl {
    display: block;
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
}
.ep-total-val {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--hs-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}
.ep-total-sub { font-size: var(--hs-fs-xs); color: var(--hs-muted); font-variant-numeric: tabular-nums; }
/* Semnalul „am umblat la preturi": totalul nu mai e cel din catalog, deci trebuie spus. */
.ep-total-sub.js-ep-edited { display: inline-flex; align-items: center; gap: .3rem; color: var(--hs-warn-fg, #92400e); font-weight: 600; }
.ep-total-sub.js-ep-edited.d-none { display: none !important; }

/* ---- Antetul panoului cu linii: titlu la stanga, indiciu + contor la dreapta ---- */
.ep-doc .ws-panel-head { display: flex; align-items: center; gap: .5rem; }
.ep-head-tools { display: inline-flex; align-items: center; gap: .5rem; margin-left: auto; }
.ep-hint {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--hs-fs-2xs);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--hs-subtle);
}
.ep-count {
    font-size: var(--hs-fs-xs);
    font-weight: 700;
    color: var(--hs-muted);
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: 999px;
    padding: 0 .45rem;
}

/* ---- Tabelul liniilor ----
   Antet discret si LIPIT sus (documentul poate avea zeci de linii, iar modalul deruleaza),
   grupuri (Piese / Manoperă) ca sub-anteturi, numere tabulare peste tot. */
.ep-table-wrap { max-height: min(46vh, 420px); overflow-y: auto; }
.ep-table { font-size: var(--hs-fs-sm); }
.ep-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--hs-neutral-bg);
    border-bottom: 1px solid var(--hs-line);
    text-transform: uppercase;
    font-size: var(--hs-fs-xs);
    letter-spacing: .04em;
    font-weight: 600;
    color: var(--hs-muted);
    white-space: nowrap;
}
.ep-table tbody td { border-top: 1px solid var(--hs-line-soft); color: var(--hs-text-soft); }
.ep-table td.text-end, .ep-table th.text-end { font-variant-numeric: tabular-nums; }
.ep-table tbody tr:hover > td { background: var(--hs-surface-alt); }
.ep-label { font-weight: 500; color: var(--hs-text); }

/* Latimi fixe pe coloanele scurte: denumirea ia tot restul, iar campul de pret nu sare de la
   o linie la alta cand se tasteaza in el. */
.ep-col-nr { width: 2.5rem; text-align: right; padding-right: .6rem; color: var(--hs-subtle); font-variant-numeric: tabular-nums; }
.ep-col-qty { width: 4rem; }
.ep-col-vat { width: 4rem; }
.ep-col-price { width: 9.5rem; }

.ep-table tr.ep-group > td {
    background: var(--hs-surface-alt);
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle);
    padding-top: .35rem;
    padding-bottom: .35rem;
}
.ep-table tr.ep-group i { margin-right: .35rem; }
.ep-group-count {
    margin-left: .4rem;
    font-weight: 700;
    color: var(--hs-muted);
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: 999px;
    padding: 0 .35rem;
}

/* Linie cu pretul lipsa: se vede din tabel, nu doar din avertismentul de la final. */
.ep-table tr.ep-row--noprice > td { background: var(--hs-bad-bg); }
/* Linie cu pret corectat manual: bara din stanga arata unde s-a umblat, fara sa strige. */
.ep-table tr.ep-row--edited > td:first-child { box-shadow: inset 3px 0 0 var(--hs-primary); }
.ep-table tr.ep-row--edited > td { background: var(--hs-brand-bg, #eef4f9); }
.ep-table tr.ep-row--noprice.ep-row--edited > td { background: var(--hs-bad-bg); }

/* ---- Campul de pret: input in tabel, nu formular ---- */
.ep-price-cell { display: inline-flex; align-items: center; gap: .25rem; justify-content: flex-end; width: 100%; }
/* `type="number"`, ca restul campurilor de pret din aplicatie: latimea tine cont de sagetile
   native (permanente in Firefox, la hover in Chrome), ca ele sa nu calce peste cifre. */
.ep-table input.ep-price {
    width: 7.4rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: var(--hs-fs-sm);
    padding: .2rem .3rem .2rem .45rem;
    height: auto;
    border-color: var(--hs-line);
    background: var(--hs-surface);
}
/* Sagetile stau lipite de marginea din dreapta, fara spatiul suplimentar pe care Chrome il
   lasa implicit intre ele si text. */
.ep-table input.ep-price::-webkit-outer-spin-button,
.ep-table input.ep-price::-webkit-inner-spin-button { margin-left: .1rem; }
.ep-table input.ep-price:focus {
    border-color: var(--hs-primary);
    box-shadow: 0 0 0 .18rem rgba(19, 74, 109, .12);
}
.ep-table input.ep-price.is-invalid {
    border-color: var(--hs-bad-br, #f1aeb5);
    background: var(--hs-bad-bg, #fdf2f3);
    box-shadow: none;
}
/* Revenirea la pretul din catalog: apare doar pe liniile atinse. */
.ep-price-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--hs-line);
    border-radius: 4px;
    background: var(--hs-surface);
    color: var(--hs-muted);
    font-size: 12px;
    line-height: 1;
}
.ep-price-reset:hover { background: var(--hs-neutral-bg); color: var(--hs-text); }
.ep-price-reset.d-none { display: none !important; }
/* Badge-ul de pe linia corectata: navy discret, pereche cu bara din stanga randului. */
.pq-badge--edit {
    background: var(--hs-brand-bg, #eef4f9);
    color: var(--hs-primary, #134a6d);
    border-color: var(--hs-brand-br, #cddfeb);
}

/* Subsolul tabelului: doua randuri — descompunerea, apoi cifra finala, ingrosata. */
.ep-table tfoot td {
    border-top: 1px solid var(--hs-line);
    background: var(--hs-surface-alt);
    font-weight: 600;
    color: var(--hs-muted);
    font-variant-numeric: tabular-nums;
}
.ep-table tfoot tr.ep-foot-total td {
    background: var(--hs-neutral-bg);
    color: var(--hs-text);
    font-weight: 700;
    font-size: var(--hs-fs-md, 14px);
}

/* Nota de sub tabel: ce se intampla cu preturile corectate. */
.ep-foot-note {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: -.35rem 0 .75rem;
    font-size: var(--hs-fs-xs);
    color: var(--hs-muted);
}
.ep-foot-note i { color: var(--hs-subtle); margin-top: .12rem; }

/* Piesele care opresc generarea devizului (n-au trecut prin „Necesar piese"): lista lor, ca
   să știi exact ce ai de adăugat în necesar, nu doar câte. */
.ep-outside {
    margin: .5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--hs-fs-sm);
    color: var(--hs-text);
    text-align: left;
    display: inline-block;
}
.ep-outside li { padding: .1rem 0; }
.ep-outside li::before { content: '·'; color: var(--hs-subtle); margin-right: .4rem; }

/* Avertisment (piese fara pret): nu blocheaza generarea, dar trebuie vazut. */
.ep-warn {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin-top: .75rem;
    padding: .65rem .8rem;
    background: var(--hs-warn-bg);
    border: 1px solid var(--hs-warn-br);
    border-radius: var(--hs-radius-sm);
    color: var(--hs-warn-fg);
    font-size: var(--hs-fs-sm);
}
.ep-warn.d-none { display: none !important; }
.ep-warn i { font-size: 15px; flex: 0 0 auto; margin-top: .1rem; }
.ep-warn strong { display: block; font-weight: 700; }
.ep-warn .ep-outside { margin: .35rem 0 .25rem; padding-left: 1.1rem; }

/* Regulile de compunere a devizului: pliate, ca sa raspunda la „de ce nu apare piesa X"
   fara sa impinga tabelul cu liniile in jos. */
.ep-rules {
    margin-top: .75rem;
    padding: .55rem .8rem;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface-alt, #fafbfc);
    font-size: var(--hs-fs-sm);
}
.ep-rules > summary {
    display: flex;
    align-items: center;
    gap: .45rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--hs-muted, #5d6b80);
    list-style: none;
}
.ep-rules > summary::-webkit-details-marker { display: none; }
.ep-rules > summary::after {
    content: '\F282';
    font-family: 'bootstrap-icons';
    margin-left: auto;
    font-size: 12px;
    transition: transform .15s ease;
}
.ep-rules[open] > summary::after { transform: rotate(180deg); }
.ep-rules[open] > summary { margin-bottom: .5rem; }
.ep-rules ul { margin: 0; padding-left: 1.1rem; }
.ep-rules li { margin-bottom: .3rem; color: var(--hs-muted, #5d6b80); }
.ep-rules li:last-child { margin-bottom: 0; }
.ep-rules li b { color: var(--hs-text, #101828); font-weight: 600; }

/* Pe ecran ingust tabelul deruleaza orizontal, iar sumarul se aseaza pe doua randuri. */
@media (max-width: 767.98px) {
    .ep-summary-total { text-align: left; margin-left: 0; }
    .ep-table-wrap { max-height: none; }
    .ep-table { min-width: 40rem; }
}

/* Footer: consecinta actiunii la stanga, butoanele la dreapta.
   Selector pe doua clase (`.modal-footer.ep-footer`): Bootstrap se incarca dupa app.css si
   `.modal-footer` are `justify-content: flex-end`, care ar imbrancit nota langa butoane. */
.modal-footer.ep-footer { justify-content: space-between; gap: .75rem; }
.ep-note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    flex: 1 1 12rem;
    min-width: 0;
    font-size: var(--hs-fs-sm);
    color: var(--hs-muted);
    text-align: left;
}
.ep-note i { color: var(--hs-subtle); }
.ep-actions { display: flex; gap: .5rem; flex-shrink: 0; }
@media (max-width: 575.98px) {
    .modal-footer.ep-footer { flex-direction: column; align-items: stretch; }
    .ep-actions { justify-content: flex-end; }
}

/* Buton secundar in navy-ul de brand — perechea „Renunță" pentru actiunile principale
   din footerele modalelor (Bootstrap nu are o varianta outline pe culoarea noastra). */
/* Specificitate pe doua clase: app.css se incarca INAINTEA lui bootstrap.min.css, iar `.btn`
   isi seteaza singur variabilele — cu o singura clasa ar fi suprascrise. */
.btn.btn-outline-navy {
    --bs-btn-color: var(--hs-primary, #134a6d);
    --bs-btn-border-color: #c9d3db;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--hs-primary, #134a6d);
    --bs-btn-hover-border-color: var(--hs-primary, #134a6d);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0f3c59;
    --bs-btn-active-border-color: #0f3c59;
    --bs-btn-focus-shadow-rgb: 19, 74, 109;
    font-weight: 600;
}
.ws-panel-body { padding: 1.05rem 1.1rem; }
.ws-panel .form-label { font-size: 12px; font-weight: 600; color: #52606d; margin-bottom: .3rem; }
/* Textul explicativ de sub câmp: parte din formular, nu notă de subsol. */
.ws-panel .form-text { font-size: 11.5px; color: #8a94a0; margin-top: .3rem; }
/* Ultimul câmp dintr-un panou nu mai are nevoie de marginea de jos: o dă panoul. */
.ws-panel-body > .mb-3:last-child,
.ws-panel-body > .row:last-child > [class^='col']:only-child > .mb-3:last-child { margin-bottom: 0 !important; }
.ws-panel .form-control, .ws-panel .input-group-text { font-size: 13px; }
.ws-subtitle {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #8a929b;
    margin-bottom: .4rem;
}
.ws-hint { font-size: 12px; color: #7a828c; }
.ws-hint i { color: #9aa3b2; }

/* ============================================================================
   Tab Comunicare (pagina clientului) — layout enterprise: banda de indicatori,
   coloana de acțiuni la stanga, fir cronologic unificat la dreapta.
   ============================================================================ */
.cc { display: flex; flex-direction: column; gap: 1rem; }

/* ---- Banda de indicatori ---- */
/* `auto-fit`, nu 5 coloane fixe: benzile au 4 sau 5 tile-uri, iar cea cu 4 lasa altfel o
   coloana goala in dreapta. Se rearanjeaza singura si pe ecrane mici. */
.hs-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: .75rem; }
.hs-kpi {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: #fff;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    padding: .65rem .8rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    min-width: 0;
}
.hs-kpi__ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 8px;
    background: rgba(19, 74, 109, .08);
    color: var(--hs-primary, #134a6d);
    font-size: 15px;
}
.hs-kpi__ico--ok { background: rgba(25, 135, 84, .1); color: #198754; }
.hs-kpi__ico--warn { background: rgba(255, 193, 7, .16); color: #b58105; }
.hs-kpi__ico--mute { background: #f2f4f7; color: #98a2b3; }
/* Neutru-informativ (folosit de „Primite azi" din tabul de mesaje primite). */
.hs-kpi__ico--info { background: rgba(19, 74, 109, .1); color: var(--hs-primary, #134a6d); }
.hs-kpi__txt { min-width: 0; }
.hs-kpi__val { display: block; font-size: 18px; font-weight: 700; line-height: 1.1; color: #101828; font-variant-numeric: tabular-nums; }
.hs-kpi__lbl { display: block; font-size: 11px; color: #667085; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Grid principal: acțiuni | istoric ---- */
.hs-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 1rem; align-items: start; }
/* Varianta cu coloana principală în stânga (formular lat + panouri de selecție în dreapta),
   folosită la configurarea SMS-urilor de aprovizionare. */
.hs-split--wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.hs-split__col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.hs-eyebrow {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #98a2b3;
}

/* Butonul din dreapta antetului de secțiune (ex. „Fișă nouă" langa titlul listei). */
.hs-eyebrow .btn { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* Panoul „flush" tine tabelul/lista fara padding, dar pastreaza colturile rotunjite. */
.hs-panel--flush > .hs-panel__body { padding: 0; }
.hs-panel--flush .hs-list { border-radius: 0 0 8px 8px; }
/* Chip-urile de sub numele clientului (perioada, operator). */
.hs-record__since i { color: #c4ccd6; }
/* Doua coloane de panouri (detalii client, comunicare); se pun una sub alta sub 1200px. */
.hs-split__col > .hs-panel + .hs-panel { margin-top: 0; }

/* ---- Card de secțiune ---- */
.hs-panel {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}
.hs-panel__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .9rem;
    background: #f7f8fa;
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #52606d;
}
.hs-panel__head i { color: var(--hs-primary, #134a6d); font-size: 13px; }
.hs-panel__body { padding: .9rem; }
.hs-panel--flush .hs-panel__body { padding: 0; }
.hs-panel__foot {
    padding: .55rem .9rem;
    border-top: 1px solid var(--hs-line-soft, #eef1f4);
    background: #fbfcfd;
    display: flex;
    justify-content: flex-end;
}
.hs-panel .form-label { font-size: 12px; font-weight: 600; color: #52606d; margin-bottom: .2rem; }
.hs-note { display: flex; gap: .4rem; font-size: 12px; color: #7a828c; margin: 0; }
.hs-note i { color: #9aa3b2; }
.cc-hintbar { display: flex; justify-content: space-between; gap: .75rem; margin-top: .3rem; font-size: 11px; color: #98a2b3; }
.cc-counter { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Filtre (chip-uri) ---- */
.hs-seg { display: flex; gap: .3rem; margin-left: auto; }
.hs-seg__btn {
    border: 1px solid var(--hs-line, #e6e9ec);
    background: #fff;
    color: #667085;
    border-radius: 999px;
    padding: .1rem .6rem;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.6;
}
.hs-seg__btn:hover { border-color: #cfd6dd; color: #344054; }
.hs-seg__btn.is-active { background: var(--hs-primary, #134a6d); border-color: var(--hs-primary, #134a6d); color: #fff; }

/* ---- Firul cronologic ---- */
.cc-tl { list-style: none; margin: 0; padding: .4rem 0; max-height: 34rem; overflow-y: auto; }
.cc-tl__item { position: relative; display: flex; gap: .7rem; padding: .6rem .9rem .6rem .8rem; }
/* Linia verticala care leaga evenimentele; se opreste la ultimul. */
.cc-tl__item::before {
    content: "";
    position: absolute;
    left: 1.68rem;
    top: 2.2rem;
    bottom: -.6rem;
    width: 1px;
    background: var(--hs-line-soft, #eef1f4);
}
.cc-tl__item:last-child::before { display: none; }
.cc-tl__item.is-flagged { background: #fffdf6; }
.cc-tl__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    font-size: 12px;
    border: 1px solid transparent;
}
.cc-tl__dot--out { background: rgba(19, 74, 109, .1); color: var(--hs-primary, #134a6d); border-color: rgba(19, 74, 109, .18); }
.cc-tl__dot--in { background: rgba(25, 135, 84, .1); color: #198754; border-color: rgba(25, 135, 84, .2); }
.cc-tl__dot--call { background: rgba(111, 66, 193, .1); color: #6f42c1; border-color: rgba(111, 66, 193, .2); }
.cc-tl__body { min-width: 0; flex: 1 1 auto; }
.cc-tl__head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.cc-tl__title { font-size: 12px; font-weight: 700; color: #344054; }
.cc-tl__time { font-size: 11px; color: #98a2b3; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-tl__act {
    border: 0;
    background: transparent;
    color: #98a2b3;
    padding: 0 .15rem;
    font-size: 13px;
    line-height: 1;
}
.cc-tl__act:hover { color: var(--hs-primary, #134a6d); }
.cc-tl__act--danger:hover { color: #dc3545; }
.cc-tl__text { font-size: 13px; color: #344054; margin: .25rem 0 0; white-space: pre-wrap; word-break: break-word; }
.cc-tl__meta { display: flex; flex-wrap: wrap; gap: .1rem .75rem; margin-top: .25rem; font-size: 11px; color: #98a2b3; }
.cc-tl__meta i { margin-right: .25rem; }

/* ---- Pastile de stare / etichete ---- */
.hs-pill {
    font-size: 10px;
    font-weight: 700;
    padding: .1rem .45rem;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
}
.hs-pill--ok { background: rgba(25, 135, 84, .1); color: #198754; border-color: rgba(25, 135, 84, .2); }
.hs-pill--info { background: rgba(13, 110, 253, .1); color: #0d6efd; border-color: rgba(13, 110, 253, .2); }
.hs-pill--warn { background: rgba(255, 193, 7, .16); color: #b58105; border-color: rgba(255, 193, 7, .3); }
.hs-pill--danger { background: rgba(220, 53, 69, .1); color: #dc3545; border-color: rgba(220, 53, 69, .2); }
.hs-pill--mute { background: #f2f4f7; color: #667085; border-color: #e6e9ec; }
.hs-tag {
    font-size: 11px;
    color: #667085;
    background: #f6f7f9;
    border: 1px solid #eef1f4;
    border-radius: 999px;
    padding: .05rem .5rem;
    white-space: nowrap;
}

/* Banda de indicatori nu mai are nevoie de praguri: `auto-fit` o rearanjeaza singura. */
@media (max-width: 1199.98px) { .hs-split { grid-template-columns: minmax(0, 1fr); } }

/* ---- Erori de validare, in-place si in rosu (lib/form-errors.js) ----
   Mesajul se randeaza in `.invalid-feedback` de sub camp (JS ii pune `.d-block`), iar
   controlul primeste chenar rosu. Nu folosim baloanele native ale browserului: formularele
   sunt `novalidate`, iar mesajele HTML5 le citim prin checkValidity().
   Regulile sunt globale (nu doar in modale): aceleasi convenții pentru orice formular. */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #dc3545;
    background-color: #fffafa;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 .18rem rgba(220, 53, 69, .15);
}
/* Select-urile preluate de select2: originalul e ascuns, deci coloram widget-ul
   (containerul inserat imediat dupa <select>). */
select.is-invalid + .select2-container .select2-selection {
    border-color: #dc3545;
    background-color: #fffafa;
}
.invalid-feedback {
    font-size: 12px;
    font-weight: 600;
    color: #dc3545;
    margin-top: .25rem;
}
/* Eticheta campului greșit devine si ea roșie (CSS nu are selector „fratele anterior").
   Acoperim ambele tipare de layout: coloana de grid si `.mb-3` / celula de `.hs-grid-mini`. */
[class*="col-"]:has(> .is-invalid) > .form-label,
[class*="col-"]:has(> .input-group > .is-invalid) > .form-label,
.mb-3:has(> .is-invalid) > .form-label,
.hs-grid-mini > div:has(> .is-invalid) > .form-label { color: #dc3545; }
.ws-kpi { font-size: 11px; text-transform: none; letter-spacing: 0; color: #667085; font-weight: 600; }
.ws-kpi strong { font-size: 14px; color: var(--hs-primary, #134a6d); font-variant-numeric: tabular-nums; }

/* ---- Zile lucratoare: butoane-toggle ---- */
.ws-days { display: flex; flex-wrap: wrap; gap: .4rem; }
.ws-day {
    border: 1px solid #dfe4e9;
    background: #fff;
    color: #52606d;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: .28rem .85rem;
}
.ws-day:hover { border-color: #c3ced8; background: #f7f9fb; color: #344054; }
.btn-check:checked + .ws-day {
    background: var(--hs-primary, #134a6d);
    border-color: var(--hs-primary, #134a6d);
    color: #fff;
}
.btn-check:focus-visible + .ws-day { box-shadow: 0 0 0 .2rem rgba(19, 74, 109, .18); }

/* ---- Orele de start generate (chips) ---- */
.ws-slots { display: flex; flex-wrap: wrap; gap: .35rem; }
.ws-slot {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #34405a;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: .18rem .5rem;
}
.ws-slots-empty { font-size: 12px; color: #c0392b; }

/* ---- Lista de tehnicieni din modal (carduri selectabile) ---- */
.ws-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 575px) { .ws-people { grid-template-columns: 1fr; } }
.ws-person {
    display: flex;
    align-items: center;
    gap: .6rem;
    border: 1px solid #e6e9ec;
    border-radius: 8px;
    padding: .45rem .6rem;
    cursor: pointer;
    background: #fff;
    transition: border-color .12s, background-color .12s, box-shadow .12s;
    min-width: 0;
}
.ws-person:hover { border-color: #c9d4de; background: #fafcfe; }
.ws-person input { margin: 0; flex: 0 0 auto; }
.ws-person.is-checked { border-color: var(--hs-primary, #134a6d); background: #f4f8fb; box-shadow: 0 0 0 1px rgba(19, 74, 109, .08); }
.ws-person__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ws-person__name { font-size: 13px; font-weight: 600; color: #1c1b18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-person__note { font-size: 11px; color: #8a929b; display: flex; align-items: center; gap: .3rem; }
.ws-person__note .ws-tag-move { color: #a5730f; font-weight: 600; }

/* ---- Timeline istoric atribuiri ---- */
.ws-timeline { list-style: none; margin: 0; padding: .2rem 0 .2rem 1.85rem; position: relative; }
.ws-timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: #e9edf1; }
.ws-tl-item { position: relative; padding-bottom: .95rem; }
.ws-tl-item:last-child { padding-bottom: 0; }
.ws-tl-dot {
    position: absolute;
    left: -1.6rem;
    top: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #b6bec7;
    box-shadow: 0 0 0 3px #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
}
.ws-tl-item.is-current .ws-tl-dot { background: var(--hs-primary, #134a6d); }
.ws-tl-title { font-size: 13px; font-weight: 700; color: #1c1b18; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ws-tl-period { font-size: 12px; color: #667085; font-variant-numeric: tabular-nums; }
.ws-tl-by { font-size: 11px; color: #9aa0a8; }
.ws-tl-empty { font-size: 13px; color: #8a929b; }

/* ---- Celule de tabel specifice modulului ---- */
.ws-name { font-weight: 600; color: #1c1b18; }
.ws-time { font-variant-numeric: tabular-nums; color: #34405a; white-space: nowrap; }
.ws-daypill { font-size: 10px; font-weight: 700; color: #52606d; background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 4px; padding: 1px 5px; }
.ws-count { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--hs-primary, #134a6d); }
.ws-people-cell { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.ws-chip { font-size: 11px; color: #4b5563; background: #f4f6f8; border: 1px solid #e6e9ec; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.ws-chip-more { font-size: 11px; color: #8a929b; font-weight: 600; }
.ws-badge-default { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #134a6d; background: #e8f0f6; border: 1px solid #d3e2ee; border-radius: 999px; padding: 1px 8px; }
.ws-badge-muted { font-size: 10px; font-weight: 600; color: #8a929b; background: #f4f6f8; border: 1px solid #e6e9ec; border-radius: 999px; padding: 1px 8px; }

/* ============================================================================
   Accese utilizatori (/access) — matrice sectiuni, in stilul enterprise.
   ========================================================================= */
.ac-search { max-width: 280px; }

.ac-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.ac-badge-owner { color: #7a4b00; background: #fdf3e2; border: 1px solid #f2dcb6; }
.ac-badge-open { color: #256b3d; background: #e9f6ee; border: 1px solid #cfe9d9; }
.ac-badge-limited { color: #134a6d; background: #e8f0f6; border: 1px solid #d3e2ee; }

/* Lista de sectiuni: cate un card pe modul, cu submodulele dedesubt. */
.ac-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 767px) { .ac-sections { grid-template-columns: 1fr; } }
.ac-section {
    border: 1px solid #e6e9ec;
    border-radius: 8px;
    background: #fff;
    padding: .5rem .65rem;
    transition: border-color .12s, background-color .12s, box-shadow .12s;
}
.ac-section.is-checked { border-color: var(--hs-primary, #134a6d); background: #f4f8fb; box-shadow: 0 0 0 1px rgba(19, 74, 109, .08); }
.ac-section__head { display: flex; align-items: center; gap: .55rem; cursor: pointer; margin: 0; min-width: 0; }
.ac-section__head input { margin: 0; flex: 0 0 auto; }
.ac-section__name { font-size: 13px; font-weight: 600; color: #1c1b18; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-section__url { margin-left: auto; font-size: 11px; color: #9aa3b2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.ac-subs { display: flex; flex-wrap: wrap; gap: .35rem .9rem; padding: .45rem 0 .1rem 1.6rem; }
.ac-sub { display: inline-flex; align-items: center; gap: .35rem; font-size: 12px; color: #52606d; cursor: pointer; margin: 0; }
.ac-sub input:disabled + span { color: #b9c0c8; }

/* =====================================================================
   Modalul global de confirmare (#modal_confirm) — acelasi layout ca restul
   modalelor: antet navy cu emblema, corp gri cu panou alb, footer alb.
   ===================================================================== */
.modal-dialog.modal-confirm { max-width: 480px; }
/* Dialogurile care sunt de fapt formulare (fluxul de piese) au nevoie de mai mult loc. */
.modal-dialog.modal-confirm.modal-confirm--wide { max-width: 620px; }
.modal-confirm .modal-content { border: none; border-radius: 12px; box-shadow: 0 18px 44px rgba(16, 24, 40, .22); }
.modal-confirm .modal-header { border-bottom: none; }
.modal-confirm .modal-body { background: #f6f7f9; padding: 1rem; }
.modal-confirm .modal-footer { background: #fff; border-top: 1px solid #eef1f4; }
.modal-confirm .ws-panel-body { font-size: 13px; color: #344054; }
.modal-confirm .ws-panel-body .form-label { font-size: 12px; font-weight: 600; color: #52606d; margin-bottom: .2rem; }

/* Accentul de sus dupa tipul actiunii — semnalul „stergere" nu se pierde prin uniformizare. */
.modal-confirm--red .modal-header { border-top: 3px solid #dc3545; }
.modal-confirm--orange .modal-header { border-top: 3px solid #fd7e14; }
.modal-confirm--green .modal-header { border-top: 3px solid #198754; }
.modal-confirm--blue .modal-header { border-top: 3px solid #0d6efd; }

/* ---- Continut structurat pentru confirmari (.cf-*) ----
   Pentru actiuni ireversibile nu e suficient „esti sigur?": dialogul arata CE anume
   se schimba (interval, inginer, stare) si ce urmeaza dupa.
   Independent de containerul-gazda: merge si in modal Bootstrap, si in jquery-confirm. */
.cf-summary {
    border: 1px solid #eef1f4;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: .65rem;
}
.cf-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    font-size: 13px;
}
.cf-row + .cf-row { border-top: 1px solid #f2f4f7; }
.cf-lbl {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 84px;
    color: #667085;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.cf-lbl i { color: var(--hs-primary, #134a6d); font-size: .85rem; }
.cf-val {
    color: #1c1b18;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.cf-badge {
    display: inline-block;
    padding: .1rem .4rem;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    background: #f2f4f7;
    color: #667085;
}
.cf-badge--ok { background: #e9f6ee; color: #256b3d; }
/* Valoarea „de reținut" a rezumatului (totalul unei rezervări): un pas mai mare, ca
   ochiul să o găsească fără să citească toate rândurile. */
.cf-val--strong { font-size: 15px; }
/* Sub-linia unei valori (codul și marca sub denumirea piesei) — aliniată la stânga
   textului ei, nu la eticheta din stânga rândului. */
.cf-val .hs-sub { font-weight: 400; }
/* Valoare editabilă în rezumat (prețul completat la aprobarea unei piese fără preț):
   câmpul are nevoie de lățime, iar textul din jurul lui nu mai e „valoare afișată". */
.cf-val--input { flex: 1 1 260px; max-width: 320px; font-weight: 400; }
.cf-val--input .input-group { flex-wrap: nowrap; }
.cf-val--input .input-group-text { font-size: 11px; white-space: nowrap; }
/* Selectul de cotă stă în același grup, dar nu trebuie să fure lățimea câmpului. */
.cf-val--input select.form-select { flex: 0 0 auto; width: auto; }

/* Avertisment: apare doar cand clientul a confirmat deja programarea. */
.cf-warn {
    display: flex;
    gap: .45rem;
    margin: 0 0 .55rem;
    padding: .45rem .6rem;
    border-radius: 8px;
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    font-size: 12px;
    font-weight: 600;
}
.cf-warn i { flex: 0 0 auto; margin-top: .1rem; }
.cf-note { margin: 0; font-size: 12px; color: #667085; }

/* =====================================================================
   Pagina clientului (/customer/view) — primitive de interacțiune
   Adăugate la design system-ul .hs-*: contoare care filtrează, bara de
   filtre a listei de fișe, butonul de copiere din chip-uri și semnalul
   de „modificări nesalvate".
   ===================================================================== */

/* ---- Contor care filtrează (banda KPI) ----
   Același tile, dar ca <button>: resetăm stilul nativ și adăugăm afordanța de click. */
.hs-kpi--action {
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.hs-kpi--action:hover {
    border-color: #cfdae6;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
    transform: translateY(-1px);
}
.hs-kpi--action:focus-visible {
    outline: 2px solid var(--hs-primary, #134a6d);
    outline-offset: 2px;
}
/* `__txt` e <span> in butoane (div nu e permis acolo), deci ii dam explicit block. */
.hs-kpi__txt { display: block; }

/* ---- Buton de copiere din chip-urile de contact ---- */
.hs-copy {
    border: 0;
    background: transparent;
    color: #c4ccd6;
    padding: 0 .1rem;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: color .12s ease;
}
.hs-copy:hover { color: var(--hs-primary, #134a6d); }
.hs-copy:focus-visible { outline: 2px solid var(--hs-primary, #134a6d); outline-offset: 2px; border-radius: 3px; }
/* Confirmare pe loc: bifă verde ~1s, fara toast (chip-urile se copiaza des). Iconita o
   schimba JS-ul (bi-copy -> bi-check-lg); aici doar culoarea. */
.hs-copy.is-copied { color: #198754; }

/* ---- Meniul „Alte acțiuni" din antet ---- */
/* `.dropdown-menu.hs-record__menu`: Bootstrap (incarcat dupa noi) fixeaza `min-width`
   si `font-size` pe `.dropdown-menu`, la aceeasi specificitate. */
.dropdown-menu.hs-record__menu { font-size: 13px; min-width: 232px; }
.hs-record__menu .dropdown-item { display: flex; align-items: center; gap: .55rem; padding: .4rem .85rem; }
.hs-record__menu .dropdown-item i { color: #98a2b3; font-size: 14px; }
.hs-record__menu .dropdown-item:hover i { color: var(--hs-primary, #134a6d); }

/* ---- Bara de filtre a unei liste statice (fișele clientului) ---- */
.hs-toolbar.cs-toolbar {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .6rem;
}
.cs-toolbar .hs-toolbar__search { position: relative; flex: 1 1 260px; min-width: 200px; max-width: 420px; }
.cs-toolbar .hs-toolbar__search i {
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    color: #b6bfca;
    font-size: 13px;
    pointer-events: none;
}
.cs-toolbar .hs-toolbar__search .form-control { padding-left: 1.9rem; }

/* ---- Segmented control (Toate / În lucru / Finalizate / Anulate) ---- */
.hs-seg {
    display: inline-flex;
    background: #f2f4f7;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    margin-left: auto;
}
.hs-seg__btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: .25rem .6rem;
    font-size: 12px;
    font-weight: 600;
    color: #667085;
    white-space: nowrap;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.hs-seg__btn span {
    font-size: 11px;
    font-weight: 700;
    color: #98a2b3;
    background: #fff;
    border-radius: 999px;
    padding: 0 .35rem;
    font-variant-numeric: tabular-nums;
}
.hs-seg__btn:hover { color: var(--hs-primary, #134a6d); }
.hs-seg__btn.is-active { background: #fff; color: var(--hs-primary, #134a6d); box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
.hs-seg__btn.is-active span { background: #e3edf5; color: var(--hs-primary, #134a6d); }
.hs-seg__btn:focus-visible { outline: 2px solid var(--hs-primary, #134a6d); outline-offset: 1px; }

/* ---- Semnal de „modificări nesalvate" în bara formularului ---- */
.hs-dirty {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: 12px;
    font-weight: 600;
    color: #b58105;
    background: rgba(255, 193, 7, .14);
    border: 1px solid rgba(255, 193, 7, .3);
    border-radius: 999px;
    padding: .15rem .6rem;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .cs-toolbar .hs-toolbar__search { max-width: none; }
    .hs-seg { margin-left: 0; width: 100%; overflow-x: auto; }
}

/* ---- Tipărire: rămâne fișa clientului, fără cromul aplicației ---- */
@media print {
    .hs-record__actions,
    .hs-toolbar,
    .hs-formbar,
    .hs-tabs__nav,
    .hs-copy,
    .up-row-open { display: none !important; }
    /* Datele si fisele se tiparesc amandoua, indiferent de tabul deschis; comunicarea nu
       (fragmentul se incarca la cerere, deci pe hartie ar aparea doar spinnerul). */
    #tab-details, #tab-sheets { display: block !important; opacity: 1 !important; }
    #tab-communication { display: none !important; }
    .hs-card, .hs-panel, .hs-kpi { box-shadow: none !important; break-inside: avoid; }
    /* Headerul de inregistrare e navy cu text alb pe ecran, dar browserele nu tiparesc
       fundalurile: fara asta, numele si datele de contact ar iesi alb pe alb, adica goale. */
    .hs-card.hs-record,
    .hs-record .hs-record__chips {
        background: #fff !important;
        border-color: #d0d5dd !important;
    }
    .hs-record .hs-record__name,
    .hs-record .hs-meta-chip,
    .hs-record .hs-meta-chip a,
    .hs-record .hs-record__since,
    .hs-record .hs-record__since i,
    .hs-record .hs-meta-chip i,
    .hs-record .hs-record__back { color: #101828 !important; }
    .hs-record .hs-record__avatar {
        background: #f2f5f8 !important;
        color: #134a6d !important;
        border-color: #d0d5dd !important;
    }
    .hs-record .hs-pill--info,
    .hs-record .hs-pill--ok,
    .hs-record .hs-pill--mute,
    .hs-record .hs-pill--warn,
    .hs-record .hs-pill--danger {
        background: #fff !important;
        color: #101828 !important;
        border-color: #d0d5dd !important;
    }
}

/* =====================================================================
   Rafinare vizuală a listelor de modul (referință: /customer)
   Tipografie, culori și fundaluri aduse pe tokenii din :root. Regulile
   sunt scrise pe primitivele comune (.hs-stat / .hs-filters /
   .table-enterprise / .hs-list), deci toate listele se aliniază la
   aceeași ținută, nu doar pagina de clienți.
   ===================================================================== */

/* ---- Banda de contoare ----
   Valoarea e informația, eticheta doar o numește: contrast puternic pe cifră,
   etichetă în gri lizibil (nu #98a2b3, care pica sub AA pe alb). */
.hs-stat {
    padding: .85rem 1rem;
    border-color: var(--hs-line);
    background: var(--hs-surface);
    /* Umbră în două straturi: contur foarte fin + difuzie joasă. Dă relief fără „card gros". */
    box-shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .04);
}
.hs-stat__val {
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -.025em;
    color: var(--hs-text);
}
.hs-stat__lbl {
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--hs-muted);
}
.hs-stat__icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    font-size: 17px;
    background: var(--hs-primary-soft);
    color: var(--hs-primary);
}
.hs-stat__icon--mute { background: #f2f4f7; color: var(--hs-subtle); }
/* Tile-ul care filtrează: se ridică imperceptibil la hover, ca să se simtă clicabil. */
.hs-stat--btn { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.hs-stat--btn:hover { transform: translateY(-1px); border-color: #c7d4e2; }
.hs-stat--btn:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 2px; }

/* ---- Bara de filtre ----
   Fundal cald-neutru sub antetul cardului, ca zona de căutare să se distingă de
   tabel fără o linie groasă. Etichetele sunt mici și discrete: în lucrul zilnic te
   uiți la valori, nu la numele filtrului. */
/* Selector pe doua clase: `.hs-card > .card-header` (mai sus in fisier) are specificitate
   mai mare decat `.hs-filters` si i-ar anula fundalul. */
.hs-card > .card-header.hs-filters,
.card-header.hs-filters {
    background: linear-gradient(180deg, var(--hs-surface-alt) 0, #fff 100%);
    border-bottom: 1px solid var(--hs-line-soft);
    padding: .9rem 1.1rem 1rem;
}
.hs-filter__lbl {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--hs-muted);
}
.hs-filters .form-select-sm,
.hs-filters .form-control,
.hs-filters .input-group-text {
    border-color: #dde3ea;
}
.hs-filters .form-select-sm:focus,
.hs-filters .form-control:focus {
    border-color: var(--hs-primary);
    box-shadow: 0 0 0 3px var(--hs-focus);
}
.hs-result-count { color: var(--hs-muted); }

/* ---- Tabel ----
   Rânduri mai aerisite și hover pe o nuanță din brand, în loc de gri neutru.
   (Antetul NU e `sticky`: `.hs-list` are `overflow: hidden` pentru colțurile rotunjite,
   iar sticky s-ar raporta la acel container, care nu derulează — efect zero.) */
table.table-enterprise thead th {
    background: var(--hs-surface);
    color: var(--hs-muted);
    font-weight: 600;
    letter-spacing: .05em;
    border-bottom: 1px solid var(--hs-line);
    box-shadow: inset 0 -1px 0 var(--hs-line);
    padding: .65rem .75rem;
}
/* Bootstrap picteaza fundalul celulelor cu un `box-shadow: inset` din `--bs-table-accent-bg`,
   deci hover-ul lui ar acoperi orice `background` am pune pe `td`. Culorile se dau pe
   variabilele lui, nu impotriva lor. */
table.table-enterprise {
    --bs-table-bg: transparent;
    --bs-table-hover-bg: #f4f8fb;
    --bs-table-hover-color: var(--hs-text);
}
table.table-enterprise tbody td {
    padding: .62rem .75rem;
    color: var(--hs-text-soft);
    border-top: 1px solid var(--hs-line-soft);
}
/* Zebra foarte diluat: ajută ochiul să urmărească rândul pe 8 coloane, fără să pară tabel de raport. */
table.table-enterprise tbody tr:nth-child(even) > td { background: #fcfdfe; }
table.table-enterprise tbody tr:hover > td { background: #f4f8fb; }
/* Numele clientului — singura ancoră de citire a rândului. */
.cust-name .uc-client-link {
    color: var(--hs-text);
    font-weight: 600;
    text-decoration: none;
}
.cust-name .uc-client-link:hover { color: var(--hs-primary); text-decoration: underline; }
/* Subrândul (tipul clientului, tipul fișei) era pe #98a2b3 — 2,6:1 pe alb, sub pragul minim
   de lizibilitate. Ierarhia o dau mărimea și greutatea, nu un contrast prea slab. */
.cust-subline { color: var(--hs-muted); font-size: 12px; }
.cust-loc { color: var(--hs-text-soft); }
.cust-date { color: var(--hs-muted); }
.hs-avatar {
    background: var(--hs-primary-soft);
    color: var(--hs-primary);
    border: 1px solid #dde7f0;
}
/* Eticheta operatorului: pastilă neutră, nu un al doilea accent colorat pe rând. */
.cust-operator {
    color: var(--hs-muted);
    background: var(--hs-surface-alt);
    border-color: var(--hs-line);
    font-weight: 500;
}

/* Butonul de deschidere din capătul rândului își păstrează stilul din design system
   (main.css, `.up-row-open`); aici adăugăm doar starea de focus, care lipsea. */
.up-row-open:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }

/* ---- Subsolul listei (info + paginare) ---- */
.hs-list .dt-container > .dt-layout-table ~ div {
    background: var(--hs-surface-alt);
    border-top: 1px solid var(--hs-line-soft);
}
.hs-list .dt-info { color: var(--hs-muted); }

/* =====================================================================
   Fișa de înregistrare cu rail lateral (.hs-rec) — /customer/view
   Navigarea între secțiuni, contoarele și metadatele stau într-o coloană
   îngustă, permanent vizibilă; dreapta rămâne un singur flux de lucru.
   ===================================================================== */
/* `.card.hs-rec`, nu `.hs-rec`: Bootstrap se încarcă DUPĂ app.css și pune
   `.card { display: flex; flex-direction: column }` — la specificitate egală câștiga el,
   iar rail-ul ajungea deasupra conținutului, nu lângă el. */
.card.hs-rec {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: stretch;
    /* Fara `overflow: hidden` (desi ar taia colturile): ar face din card un container de
       derulare, iar `position: sticky` de pe rail s-ar raporta la el si n-ar mai face nimic.
       Colturile rotunjite le respecta oricum fundalul, fiind clipat de `border-radius`. */
    /* Fundalul coloanei din stânga stă pe container, nu pe rail: rail-ul e `sticky`, deci
       nu se întinde pe toată înălțimea, iar fără asta griul s-ar opri la jumătate. */
    background-image: linear-gradient(90deg, var(--hs-surface-alt) 0 232px, var(--hs-surface) 232px);
}

/* Rail mai lat, pentru secțiunile cu etichete lungi ȘI contor pe fiecare rând (centrul de
   alerte: „Programări neconfirmate" + badge nu încap în 232px și se taie cu „…").
   Regula stă AICI, înaintea media query-ului de sub 992px, ca acela să câștige la egalitate
   de specificitate și rail-ul să redevină bară orizontală pe ecran îngust. */
.card.hs-rec--wide {
    grid-template-columns: 280px minmax(0, 1fr);
    background-image: linear-gradient(90deg, var(--hs-surface-alt) 0 280px, var(--hs-surface) 280px);
}

/* ---- Rail-ul ----
   Fundal ușor mai rece decât panoul de conținut: separă cele două zone fără o linie groasă.
   `sticky` ca navigarea și contoarele să rămână la îndemână în formularele lungi. */
.hs-rail {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: .85rem .7rem;
    background: transparent;
    border-right: 1px solid var(--hs-line);
    position: sticky;
    top: 0;
    align-self: start;
    /* Rail-ul nu depășește ecranul: dacă e mai înalt, derulează el, nu pagina. */
    max-height: 100vh;
    overflow-y: auto;
}

.hs-rail__nav { display: flex; flex-direction: column; gap: 2px; }
.hs-rail__link {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .65rem;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--hs-text-soft);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.hs-rail__link i { font-size: 15px; color: var(--hs-subtle); flex: 0 0 auto; transition: color .12s ease; }
.hs-rail__txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-rail__link:hover { background: #eef2f6; color: var(--hs-text); }
.hs-rail__link:hover i { color: var(--hs-muted); }
/* Secțiunea activă: fundal alb (aceeași suprafață ca panoul din dreapta, deci pare „deschisă")
   plus o bară pe brand în stânga. */
.hs-rail__link.active {
    background: var(--hs-surface);
    color: var(--hs-primary);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--hs-primary), 0 1px 2px rgba(16, 24, 40, .06);
}
.hs-rail__link.active i { color: var(--hs-primary); }
.hs-rail__link:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: -2px; }
.hs-rail__link .hs-count { margin-left: auto; }

/* ---- Grupul de contoare ---- */
.hs-rail__group { display: flex; flex-direction: column; gap: 1px; margin-top: .9rem; }
.hs-rail__cap {
    padding: 0 .65rem .35rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hs-subtle);
}
.hs-rail__stat {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    width: 100%;
    padding: .3rem .65rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    text-align: left;
    cursor: pointer;
    transition: background .12s ease;
}
.hs-rail__stat:hover { background: #eef2f6; }
.hs-rail__stat:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: -2px; }
/* Cifrele se aliniază în coloană (lățime fixă + tabular-nums), ca să se citească de sus în jos. */
.hs-rail__num {
    flex: 0 0 30px;
    text-align: right;
    font-size: 14px;
    font-weight: 650;
    color: var(--hs-text);
    font-variant-numeric: tabular-nums;
}
.hs-rail__lbl { font-size: 12px; color: var(--hs-muted); }
/* „În lucru" cu valoare nenulă e singurul contor care cere atenție. */
.hs-rail__stat.is-warn .hs-rail__num { color: #b58105; }
.hs-rail__stat.is-active { background: #e8f0f7; }
.hs-rail__stat.is-active .hs-rail__lbl { color: var(--hs-primary); font-weight: 600; }

/* ---- Metadatele înregistrării ---- */
.hs-rail__meta {
    margin: auto 0 0;
    padding: .8rem .65rem 0;
    border-top: 1px solid var(--hs-line-soft);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.hs-rail__meta dt {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle);
    margin-bottom: 1px;
}
.hs-rail__meta dd {
    margin: 0;
    font-size: 12px;
    color: var(--hs-text-soft);
    font-variant-numeric: tabular-nums;
}
/* Operatorul, pe rândul lui, mai discret decât data. */
.hs-rail__meta dd span { display: block; font-size: 11px; color: var(--hs-muted); font-variant-numeric: normal; }

/* ---- Panoul de conținut ---- */
.hs-rec__main { background: var(--hs-surface); min-width: 0; }
/* Secțiunile formularului, unele sub altele. */
.hs-stack__col { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
/* `.hs-formbar` e deja lipită jos; în rail-ul lateral mai are nevoie doar de o umbră care
   o desprinde de conținutul ce trece pe sub ea, și de colțul din stânga drept — acolo e
   acum granița cu rail-ul, nu marginea cardului. */
.hs-formbar--sticky {
    box-shadow: 0 -2px 8px rgba(16, 24, 40, .05);
    border-radius: 0 0 8px 0;
}

/* Sub 992px rail-ul devine o bară orizontală deasupra conținutului: pe ecran îngust o
   coloană de 232px ar mânca jumătate din lățime. */
@media (max-width: 991.98px) {
    .card.hs-rec { grid-template-columns: minmax(0, 1fr); background-image: none; }
    .hs-rail {
        position: static;
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        gap: .5rem;
        border-right: 0;
        border-bottom: 1px solid var(--hs-line);
    }
    .hs-rail__nav { flex-direction: row; flex: 1 1 100%; overflow-x: auto; }
    .hs-rail__link { width: auto; white-space: nowrap; }
    .hs-rail__link.active { box-shadow: inset 0 -2px 0 var(--hs-primary); }
    .hs-rail__group { flex-direction: row; margin-top: 0; flex-wrap: wrap; }
    .hs-rail__cap { display: none; }
    .hs-rail__stat { width: auto; }
    /* Metadatele nu-și merită spațiul pe mobil — rămân în antetul paginii. */
    .hs-rail__meta { display: none; }
}

/* =====================================================================
   Tab „Facturare" al fișei (/sheet/view → sv_invoicing)
   ===================================================================== */
/* Linie deja facturată / document anulat: rămâne vizibilă (e istoric), dar estompată. */
.inv-line--done > td { background: #fbfcfd; color: var(--hs-subtle); }
.inv-line--done .fw-semibold { font-weight: 500 !important; }

/* Prețul unitar, editabil în lista „De facturat": câmp discret, care se vede ca editabil abia
   la hover/focus — altfel un tabel plin de casete ar arăta ca un formular, nu ca o listă. */
.inv-price {
    width: 88px;
    display: inline-block;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border-color: transparent;
    background: transparent;
    padding-right: .35rem;
}
.inv-price:hover { border-color: var(--hs-line); background: var(--hs-surface); }
.inv-price:focus { border-color: var(--hs-primary); background: var(--hs-surface); }
.inv-price:disabled { opacity: .6; }
.inv-th-hint { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .75; }

/* Previzualizarea documentului în pagina facturii: chiar PDF-ul, într-un cadru înalt cât
   ecranul minus antetul, ca pagina să nu aibă două zone de derulare suprapuse. */
.inv-preview { width: 100%; height: calc(100vh - 230px); min-height: 480px; border: 0; display: block; }

/* Bara de emitere: total în stânga, câmpurile la mijloc, acțiunile în dreapta. */
.inv-issuebar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem 1rem;
    padding: .7rem 1rem;
    background: var(--hs-surface-alt);
    border-top: 1px solid var(--hs-line);
}
.inv-issuebar__total { font-size: 13px; color: var(--hs-text-soft); }
.inv-issuebar__total strong { font-size: 16px; color: var(--hs-text); font-variant-numeric: tabular-nums; }
.inv-issuebar__total .cust-subline { display: inline; margin-left: .5rem; }
.inv-issuebar__fields { display: flex; gap: .5rem; flex: 1 1 260px; min-width: 200px; }
.inv-issuebar__actions { display: flex; gap: .5rem; margin-left: auto; }

@media (max-width: 767.98px) {
    .inv-issuebar__actions { margin-left: 0; width: 100%; }
    .inv-issuebar__actions .btn { flex: 1 1 auto; }
}

/* Linie fără preț de vânzare: nu poate fi facturată, deci se vede din prima. */
.inv-line--zero > td { background: #fff8f8; }
.inv-line--zero .hs-pill { margin-top: .2rem; display: inline-block; }

/* Avertismentul care explică de ce butoanele de emitere sunt inactive. */
.inv-blocked {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem 1rem;
    background: #fff5f5;
    border-top: 1px solid #f5d0d0;
    color: #a52834;
    font-size: 13px;
}
.inv-blocked i { font-size: 15px; flex: 0 0 auto; margin-top: .1rem; }
.inv-blocked strong { display: block; font-size: 13px; }

/* Aceeași bandă, dar EXPLICATIVĂ, nu blocantă: ce cuprinde proforma în plus față de factură,
   sau ce lipsește ca să poată fi emisă. Clasă separată intenționat — `.inv-blocked` e citită
   de sheet-invoicing.js ca semnal că emiterea e oprită, iar o notă informativă n-are voie să
   dezactiveze butoanele. */
.inv-hint {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .65rem 1rem;
    background: var(--hs-info-bg);
    border-top: 1px solid var(--hs-info-br);
    color: var(--hs-info-fg);
    font-size: var(--hs-fs-md);
}
.inv-hint i { font-size: 15px; flex: 0 0 auto; margin-top: .1rem; }
.inv-hint strong { display: block; font-size: var(--hs-fs-md); }

/* Antetul secțiunii „Documente emise": eticheta la stânga, filtrul de tip la dreapta.
   `.hs-eyebrow` e ea însăși flex, deci segmentul nu poate sta în ea fără să-i moștenească
   uppercase-ul și spațierea — de aici rândul propriu. */
.inv-docs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.inv-docs-head .hs-seg { margin-left: 0; }

/* Piesă acordată gratuit: intră pe document cu 0,00, deci verde, nu roșu ca „fără preț". */
.inv-line--free > td { background: #f7fdf9; }
.inv-line--free .hs-pill { margin-top: .2rem; display: inline-block; }

/* ---- Setări → Documente (/setting/document) ----
   Pagina folosește chrome-ul comun al listelor (.hs-card + .table-enterprise); aici rămân
   doar codul de document și marcajul rândurilor neconfigurate. */
.doc-code {
    display: inline-block;
    padding: .1rem .45rem;
    background: var(--hs-surface-alt);
    border: 1px solid var(--hs-line-soft);
    border-radius: 5px;
    color: var(--hs-text);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* Rând fără numerotare configurată: se vede că lipsește, fără să strige. */
.doc-row--missing > td { color: var(--hs-muted); }
.doc-row--missing .fw-semibold { font-weight: 500 !important; }

/* Câte o secțiune per tip de document: numerotarea se configurează pe tip, deci ecranul e
   organizat la fel. Antetul spune ce e documentul și unde se folosește, iar în dreapta stă
   ce se emite acum. */
.doc-type { margin-bottom: 0; }
.doc-type__head {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--hs-line-soft);
}
.doc-type__ic {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface-alt);
    color: var(--hs-primary);
    font-size: 15px;
}
.doc-type__text { flex: 1 1 auto; min-width: 0; }
.doc-type__title { margin: 0 0 .1rem; font-size: 14px; font-weight: 650; color: var(--hs-text); }
.doc-type__desc { margin: 0; font-size: 12px; color: var(--hs-muted); line-height: 1.45; }
.doc-type__state {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.doc-type__next { display: flex; align-items: center; gap: .4rem; }
.doc-type__next-lbl {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
}
.doc-type__empty {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1rem;
    font-size: var(--hs-fs-sm);
    color: var(--hs-muted);
}

/* Bara de tipuri: taburi orizontale, grupate pe fiscale / interne. Punctul roșu spune, fără
   să deschizi tabul, că tipul acela nu poate emite documente. */
.doc-tabs {
    display: flex;
    align-items: center;
    gap: .15rem;
    flex-wrap: wrap;
    padding-bottom: .55rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--hs-line);
}
.doc-tabs__group {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle);
    padding: 0 .5rem 0 .15rem;
}
.doc-tabs__sep {
    width: 1px;
    height: 18px;
    background: var(--hs-line);
    margin: 0 .5rem;
}
.doc-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid transparent;
    border-radius: var(--hs-radius-sm);
    background: transparent;
    padding: .4rem .65rem;
    font-size: var(--hs-fs-sm);
    font-weight: 600;
    color: var(--hs-text-soft);
    white-space: nowrap;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.doc-tab i { color: var(--hs-subtle); font-size: 14px; }
.doc-tab:hover { color: var(--hs-primary); background: var(--hs-primary-soft); border-color: var(--hs-brand-br); }
.doc-tab:hover i { color: var(--hs-primary); }
.doc-tab.active { color: #fff; background: var(--hs-primary); border-color: var(--hs-primary); }
.doc-tab.active i { color: rgba(255, 255, 255, .85); }
.doc-tab:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: -2px; }
.doc-tab__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hs-bad-fg, #dc3545);
    flex: 0 0 auto;
}
.doc-tab__dot--mute { background: var(--hs-subtle); }
.doc-tab.active .doc-tab__dot { background: #fff; }

/* Setări → Comunicare: starea canalelor. Refolosește cardul de tip document (.doc-type),
   ca ecranele de setări să arate la fel. */
.comm-warn {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: 0 1rem .75rem;
    padding: .6rem .75rem;
    background: var(--hs-warn-bg);
    border: 1px solid var(--hs-warn-br);
    border-radius: var(--hs-radius-sm);
    color: var(--hs-warn-fg);
    font-size: var(--hs-fs-sm);
}
.comm-warn--mute {
    background: var(--hs-surface-alt);
    border-color: var(--hs-line);
    color: var(--hs-muted);
}
.comm-warn i { flex: 0 0 auto; margin-top: .1rem; }
.comm-warn strong { display: block; }
.comm-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .7rem 1rem .9rem;
    border-top: 1px solid var(--hs-line-soft);
}
.comm-test { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-left: auto; }

/* Formularul serverului SMTP: stă în cardul de email, sub starea canalului. */
.comm-form { border-top: 1px solid var(--hs-line-soft); }
.comm-form__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    padding: .7rem 1rem .2rem;
}
.comm-form__title {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle);
}
.comm-form__head .btn { margin-left: auto; }
.comm-form__body { padding: .5rem 1rem .8rem; }
.comm-form__hint { font-size: 12px; color: var(--hs-muted); line-height: 1.5; }
/* Parola există, dar nu se mai poate citi: eticheta e singurul semn că e salvată. */
.comm-form__saved {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    margin-left: .35rem;
    font-size: 11px;
    font-weight: 600;
    color: var(--hs-good-fg);
}
.comm-form__saved-at { font-size: 11.5px; color: var(--hs-subtle); }

/* Alegerea modelului de document: două machete puse una lângă alta, cea în uz marcată.
   Alegerea e vizuală, deci descrierea spune ce se schimbă, nu doar cum se numește. */
.doc-models { border-top: 1px solid var(--hs-line); padding: .85rem 1rem 1rem; }
.doc-models__head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.doc-models__title {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle);
}
.doc-models__hint { font-size: 12px; color: var(--hs-muted); }
.doc-models__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 767.98px) {
    .doc-models__grid { grid-template-columns: minmax(0, 1fr); }
}
.doc-model {
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    padding: .7rem .8rem;
    background: var(--hs-surface);
}
.doc-model.is-active { border-color: var(--hs-primary); background: var(--hs-primary-soft); }
.doc-model__head { display: flex; align-items: center; gap: .5rem; }
.doc-model__radio {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    border: 1px solid var(--hs-line-strong);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
}
.doc-model.is-active .doc-model__radio { background: var(--hs-primary); border-color: var(--hs-primary); }
.doc-model__name { font-size: 13px; font-weight: 650; color: var(--hs-text); }
.doc-model__desc { margin: .35rem 0 .6rem; font-size: 12px; color: var(--hs-muted); line-height: 1.5; }
.doc-model__actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.doc-model__nosample { font-size: 11.5px; color: var(--hs-subtle); }

/* Panoul tipului selectat: cardul e unul singur, deci antetul secțiunii n-are chenar propriu. */
.doc-panel { padding: 0; overflow: hidden; }
.doc-panel .doc-type__head { border-bottom: 1px solid var(--hs-line-soft); }

/* ── Setări → Comunicare: regimul producție / test ─────────────────────────────────────── */
/* Cat timp testul e pornit, cardul poarta culoarea de avertizare: e o stare in care „am trimis
   clientului" e fals, si nu trebuie sa treaca neobservata la o privire rapida peste ecran. */
.comm-mode.is-testing {
    border-color: var(--hs-warn-br);
    box-shadow: inset 3px 0 0 var(--hs-warn-solid);
}
.comm-mode.is-testing .doc-type__ic {
    background: var(--hs-warn-bg);
    color: var(--hs-warn-fg);
}
/* Cele doua regimuri, ca alegere vizuala — nu doua bife lipite. */
.comm-mode__choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .6rem;
}
.comm-mode__choice {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
    background: var(--hs-surface);
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.comm-mode__choice:hover { border-color: var(--hs-primary); }
.comm-mode__choice.is-active {
    border-color: var(--hs-primary);
    background: var(--hs-primary-soft);
    box-shadow: inset 0 0 0 1px var(--hs-primary);
}
/* Cartonasele sunt butoane de submit: regimul se schimba dintr-un click, nu prin bifa. */
.comm-mode__choice {
    position: relative;
    text-align: left;
    width: 100%;
    font: inherit;
}
.comm-mode__choice:disabled { opacity: .6; cursor: not-allowed; }
/* Bifa regimului activ, in coltul cartonasului. */
.comm-mode__choice-mark {
    position: absolute;
    top: .45rem;
    right: .5rem;
    color: var(--hs-primary);
    opacity: 0;
    transition: opacity .12s ease;
}
.comm-mode__choice.is-active .comm-mode__choice-mark { opacity: 1; }
.comm-mode__choice-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: var(--hs-radius-sm);
    background: var(--hs-neutral-bg);
    color: var(--hs-muted);
}
.comm-mode__choice.is-active .comm-mode__choice-ic {
    background: var(--hs-brand-bg);
    color: var(--hs-brand-fg);
}
.comm-mode__choice-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.comm-mode__choice-text strong { font-size: 12.5px; color: var(--hs-text); }
.comm-mode__choice-text span { font-size: 11px; color: var(--hs-muted); }
/* Destinatarii au sens doar in test: dezactivati, se retrag vizual. */
.comm-mode__targets input:disabled { background: var(--hs-surface-alt); }
.comm-mode__targets:has(input:disabled) { opacity: .65; }
.doc-facts {
    margin: 0;
    padding: .7rem 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
}
.doc-facts dt {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
}
.doc-facts dd { margin: .15rem 0 0; font-size: 13px; font-weight: 600; color: var(--hs-text); }
@media (max-width: 575.98px) {
    .doc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .doc-type__head { flex-wrap: wrap; }
}

/* Bara de salvare a paginii de companie: rămâne la baza ferestrei cât timp pagina e derulată. */
.company-bar { position: sticky; bottom: 0; z-index: 3; }

/* Pe iOS, un control sub 16px face pagina sa se mareasca la focus. Baza de 14px ramane
   pentru desktop; pe ecran mic, controalele urca la 16px ca ecranul sa stea locului. */
@media (max-width: 767.98px) {
    .form-control, .form-select, textarea.form-control { font-size: 16px; }
}

/* ---- Ecranul „Companie" (/company) ----
   Două coloane: identitatea companiei (logo, cod, cât de complete sunt datele fiscale) rămâne
   sub ochi cât timp completezi, iar formularul e împărțit pe grupe, fiecare în cardul ei.
   Înainte totul era o singură coloană lungă, iar starea se pierdea la derulare. */
.co-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
/* Coloana de context se lipește sub antet: ce lipsește trebuie să se vadă și când ești
   la ultima grupă a formularului. */
.co-aside {
    position: sticky;
    top: 84px;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.co-main { display: flex; flex-direction: column; gap: 1rem; }
.co-card { margin: 0; }

/* Antetul unei grupe: emblemă + titlu + o linie despre unde ajung datele. */
.co-card__head {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .85rem 1.15rem;
    border-bottom: 1px solid var(--hs-line-soft);
}
.co-card__ic {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface-alt);
    color: var(--hs-primary);
    font-size: 15px;
}
.co-card__title {
    margin: 0 0 .1rem;
    font-size: 14px;
    font-weight: 650;
    color: var(--hs-text);
}
.co-card__desc { margin: 0; font-size: 12px; color: var(--hs-muted); line-height: 1.45; }

/* Datele după care recunoști compania, sub logo — citite, nu editate. */
.co-facts {
    margin: 1rem 0 0;
    padding-top: .85rem;
    border-top: 1px solid var(--hs-line-soft);
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.co-facts > div { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.co-facts dt { font-size: 12px; font-weight: 500; color: var(--hs-muted); }
.co-facts dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--hs-text);
    text-align: right;
    word-break: break-word;
}

/* Completitudinea datelor fiscale: un câmp lipsă se vede altfel abia când factura e emisă. */
.co-progress__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.co-progress__count { font-size: 12px; font-weight: 600; color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.co-progress { height: 6px; margin: .5rem 0 .6rem; }
.co-progress__note { font-size: 12px; color: var(--hs-muted); }
.co-missing {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 12px;
    color: var(--hs-text);
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

/* Navigarea pe grupe; „active" o pune IntersectionObserver din company-index.js. */
.co-nav__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .6rem;
    border-radius: var(--hs-radius-sm);
    font-size: 13px;
    color: var(--hs-muted);
    text-decoration: none;
}
.co-nav__item i { font-size: 14px; }
.co-nav__item:hover { background: var(--hs-surface-alt); color: var(--hs-text); }
.co-nav__item.active { background: var(--hs-surface-alt); color: var(--hs-primary); font-weight: 600; }

@media (max-width: 1199.98px) {
    .co-layout { grid-template-columns: minmax(0, 1fr); }
    .co-aside { position: static; }
    /* Pe o coloană, navigarea pe ancore dublează derularea — nu mai are rost. */
    .co-nav { display: none; }
}

/* =====================================================================
   Antetul aplicației (.hs-topbar)
   Bara de sus e singurul element prezent pe fiecare ecran: densă, cu un
   singur accent (navy) și cu ierarhie clară — comandă și context la
   stânga, identitate la dreapta.
   ===================================================================== */
.hs-topbar {
    display: flex;
    align-items: center;
    gap: .85rem;
    /* Aceeasi masura ca `--hs-topbar-h`, de care se aga antetele de lista (`.hs-list thead`):
       daca inaltimea se schimba aici, se schimba si acolo. */
    height: var(--hs-topbar-h);
    padding: 0 1rem 0 .75rem;
    background: var(--hs-primary);
    color: #fff;
    /* Se lipește sus: în liste lungi, comanda meniului și contul rămân la îndemână. */
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

.hs-topbar__toggle {
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .85);
    font-size: 20px;
    line-height: 1;
    padding: .3rem .4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.hs-topbar__toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hs-topbar__toggle:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }

.hs-topbar__title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hs-topbar__right { display: flex; align-items: center; gap: .6rem; margin-left: auto; }

/* Compania curentă — context permanent într-o aplicație multi-tenant. */
.hs-topbar__tenant {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .2rem .55rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    color: rgba(255, 255, 255, .92);
}
.hs-topbar__tenant i { font-size: 12px; opacity: .75; }

/* Clopotelul de alerte — acelasi gabarit ca celelalte controale din antet. */
.hs-topbar__bell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .92);
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.hs-topbar__bell:hover { background: rgba(255, 255, 255, .16); color: #fff; }
/* Pe pagina de alerte butonul ramane evidentiat, ca in meniul lateral. */
.hs-topbar__bell.is-active { background: #fff; border-color: #fff; color: var(--hs-primary, #134a6d); }
.hs-topbar__bell:focus-visible { outline: 2px solid rgba(255, 255, 255, .8); outline-offset: 2px; }

/* Limba: drapel mic + cod, într-un segmented control. */
.hs-topbar__lang { display: inline-flex; background: rgba(255, 255, 255, .12); border-radius: 6px; padding: 2px; gap: 2px; }
.hs-topbar__lang-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .4rem;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .7) !important;
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.hs-topbar__lang-btn:hover { color: #fff !important; }
.hs-topbar__lang-btn:hover .hs-topbar__flag { opacity: 1; }
.hs-topbar__lang-btn.is-active { background: #fff; color: var(--hs-primary) !important; }
.hs-topbar__lang-btn.is-active .hs-topbar__flag { opacity: 1; }
/* Limba inactivă are drapelul estompat: se vede care e cea curentă și fără să citești codul. */
.hs-topbar__flag {
    display: block;
    border-radius: 2px;
    opacity: .55;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
    transition: opacity .12s ease;
}

/* Identitatea: inițiale + nume + email, într-un singur control care deschide meniul. */
.hs-topbar__user {
    display: flex;
    align-items: center;
    gap: .55rem;
    max-width: 260px;
    padding: .25rem .5rem .25rem .3rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.hs-topbar__user:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .18); }
.hs-topbar__user:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.hs-topbar__user[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }

.hs-topbar__avatar {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
}
.hs-topbar__who { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; line-height: 1.25; }
.hs-topbar__name { font-size: 12px; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-topbar__mail { font-size: 10px; color: rgba(255, 255, 255, .65); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-topbar__caret { font-size: 10px; color: rgba(255, 255, 255, .6); flex: 0 0 auto; }

.dropdown-menu.hs-topbar__menu { min-width: 232px; font-size: 13px; padding: .35rem 0; }
.hs-topbar__menu-head { padding: .4rem .9rem .5rem; font-size: 12px; color: var(--hs-muted); line-height: 1.4; }
.hs-topbar__menu-head .fw-semibold { color: var(--hs-text); font-size: 13px; }
.hs-topbar__menu .dropdown-item { display: flex; align-items: center; gap: .55rem; padding: .4rem .9rem; }
.hs-topbar__menu .dropdown-item i { color: var(--hs-subtle); font-size: 14px; }
.hs-topbar__menu .dropdown-item:hover i { color: var(--hs-primary); }
.hs-topbar__logout, .hs-topbar__logout:hover { color: #b42318; }
.hs-topbar__menu .hs-topbar__logout:hover i { color: #b42318; }

/* ---------------------------------------------------------------------
   Căutarea de clienți din antet (.hs-qsearch)
   Câmpul stă pe navy, deci se desenează „scobit" (fundal translucid), nu
   ca un input alb care ar rupe banda. Panoul de rezultate, în schimb, e
   o suprafață de conținut: alb, pe fundalul paginii.
   --------------------------------------------------------------------- */
.hs-qsearch {
    position: relative;
    display: flex;
    align-items: center;
    /* Nu împinge titlul: crește doar cât are loc, între titlu și zona de cont. */
    flex: 0 1 340px;
    min-width: 0;
    margin-left: auto;
}

.hs-qsearch__input {
    width: 100%;
    height: 30px;
    padding: 0 3.4rem 0 2rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 6px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 12.5px;
    line-height: 1;
    transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.hs-qsearch__input::placeholder { color: rgba(255, 255, 255, .6); }
.hs-qsearch__input:hover { background: rgba(255, 255, 255, .16); }
.hs-qsearch__input:focus {
    outline: 0;
    background: #fff;
    border-color: #fff;
    color: var(--hs-text, #1f2937);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}
.hs-qsearch__input:focus::placeholder { color: var(--hs-subtle, #9aa4b2); }
/* Butonul nativ de „clear" al `type=search` dublează butonul propriu. */
.hs-qsearch__input::-webkit-search-cancel-button { display: none; }

.hs-qsearch__icon {
    position: absolute;
    left: .6rem;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
    pointer-events: none;
    transition: color .12s ease;
}
.hs-qsearch__input:focus ~ .hs-qsearch__icon { color: var(--hs-primary, #134a6d); }

.hs-qsearch__clear {
    position: absolute;
    right: 1.9rem;
    border: 0;
    background: transparent;
    color: rgba(255, 255, 255, .75);
    font-size: 10px;
    line-height: 1;
    padding: .25rem;
    border-radius: 4px;
    cursor: pointer;
}
.hs-qsearch__clear:hover { color: #fff; background: rgba(255, 255, 255, .18); }
.hs-qsearch__input:focus ~ .hs-qsearch__clear { color: var(--hs-muted, #667085); }
.hs-qsearch__input:focus ~ .hs-qsearch__clear:hover { color: var(--hs-text, #1f2937); background: rgba(19, 74, 109, .1); }

/* Indiciul pentru scurtătura „/" — dispare la focus, când nu mai are ce spune. */
.hs-qsearch__kbd {
    position: absolute;
    right: .5rem;
    min-width: 17px;
    padding: 1px 5px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 255, 255, .7);
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    pointer-events: none;
}
.hs-qsearch__input:focus ~ .hs-qsearch__kbd { display: none; }

.hs-qsearch__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 1040;
    max-height: 62vh;
    overflow-y: auto;
    padding: .25rem;
    background: #fff;
    border: 1px solid var(--hs-border, #e4e7ec);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, .18);
}
.hs-qsearch__panel[hidden] { display: none; }

.hs-qsearch__item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .5rem;
    border-radius: 6px;
    color: var(--hs-text, #1f2937);
    text-decoration: none;
}
/* Aceeași evidențiere la hover și la navigarea cu săgețile (`is-active`). */
.hs-qsearch__item:hover, .hs-qsearch__item.is-active { background: var(--hs-bg-soft, #f2f5f9); color: var(--hs-text, #1f2937); }

.hs-qsearch__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--hs-primary, #134a6d);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.hs-qsearch__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.hs-qsearch__name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-qsearch__meta { display: flex; gap: .75rem; font-size: 11px; color: var(--hs-muted, #667085); min-width: 0; }
.hs-qsearch__meta span { display: inline-flex; align-items: center; gap: .25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-qsearch__meta i { font-size: 10px; color: var(--hs-subtle, #9aa4b2); }
/* Potrivirea căutată, evidențiată — fără fundalul galben implicit al `<mark>`. */
.hs-qsearch__panel mark { padding: 0; background: transparent; color: var(--hs-primary, #134a6d); font-weight: 700; }

.hs-qsearch__more {
    display: flex;
    align-items: center;
    gap: .2rem;
    margin-top: .25rem;
    padding: .4rem .5rem;
    border-top: 1px solid var(--hs-border, #e4e7ec);
    border-radius: 0 0 6px 6px;
    color: var(--hs-primary, #134a6d);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}
.hs-qsearch__more:hover, .hs-qsearch__more.is-active { background: var(--hs-bg-soft, #f2f5f9); color: var(--hs-primary, #134a6d); }
.hs-qsearch__more i { font-size: 16px; }

.hs-qsearch__empty {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .7rem .6rem;
    color: var(--hs-muted, #667085);
    font-size: 12.5px;
}
.hs-qsearch__empty i { color: var(--hs-subtle, #9aa4b2); }

/* Pe ecran îngust rămân inițialele și meniul; numele și emailul ies. */
@media (max-width: 767.98px) {
    .hs-topbar { gap: .5rem; padding-right: .5rem; }
    .hs-topbar__who, .hs-topbar__tenant { display: none; }
    /* Căutarea rămâne (e principalul mod de a ajunge la un client) și ia locul titlului. */
    .hs-topbar__title { display: none; }
    .hs-qsearch { flex: 1 1 auto; }
    .hs-qsearch__kbd { display: none; }
}

/* Formularul de trimitere SMS: lățime de citit, nu de ecran. */
.sms-form { max-width: 720px; }

/* =====================================================================
   Programări (/appointment)
   Calendarul și lista de fișe nealocate folosesc chrome-ul comun; aici
   rămân doar antetul cu unelte, filtrul de tehnicieni și zonele care
   derulează singure (erau `style=` în șablon).
   ===================================================================== */

/* Filtrul de tehnicieni: bandă discretă sub antet, nu un bloc cu chenar și fundal gri. */

/* Lista de fișe nealocate: derulează singură, nu întinde pagina. */
.appt-sheets {
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-right: .35rem;
}
.appt-route__list { max-height: 40vh; overflow-y: auto; }

/* ============================================================================
   Modal „Optimizare traseu" — vizualizarea „Orar": aceleasi opriri asezate pe o
   grila de 30 min (ca in calendar), cu blocuri mutabile prin tragere. Comutatorul
   din capul panoului alege intre lista de opriri si orar (appointment-route.js).
   ============================================================================ */

/* Comutatorul Lista / Orar din antetul panoului. */
.rt-view-switch {
    display: inline-flex;
    flex: 0 0 auto;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}
.rt-view-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 0;
    background: transparent;
    color: var(--hs-muted, #667085);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1;
    padding: .3rem .55rem;
    cursor: pointer;
}
.rt-view-btn i { font-size: 13px; }
.rt-view-btn + .rt-view-btn { border-left: 1px solid var(--hs-line, #e6e9ec); }
.rt-view-btn:hover { background: #eef3f7; color: var(--hs-primary, #134a6d); }
.rt-view-btn.is-on { background: var(--hs-primary, #134a6d); color: #fff; }

/* Indicatia de folosire, deasupra grilei. */
.rt-cal-hint {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .5rem;
    font-size: 11px;
    color: var(--hs-muted, #667085);
}

/* Grila: coloana cu ore (gutter) + panza pe care stau blocurile. */
.rt-cal { display: flex; align-items: flex-start; gap: .35rem; padding-top: .45rem; }
.rt-cal-gutter { flex: 0 0 44px; }
.rt-cal-slot {
    height: var(--rt-slot, 34px);
    position: relative;
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: #98a2b3;
    text-align: right;
    padding-right: .3rem;
}
/* Eticheta sta pe linia intervalului, nu in mijlocul lui. */
.rt-cal-slot span { position: relative; top: -.4em; }
.rt-cal-slot.is-hour { color: var(--hs-ink, #1f2a37); font-weight: 700; font-size: 11px; }
/* Marcaj scurt in dreptul fiecarei linii, ca ora sa se lege vizual de grila. */
.rt-cal-slot::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 4px;
    border-top: 1px solid #dde3ea;
}
.rt-cal-slot.is-hour::after { width: 7px; border-top-color: #b6c2ce; }

.rt-cal-canvas {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 8px;
    background-color: #fff;
    /* Linie la fiecare 30 min si una mai apasata la ora intreaga — ca in calendar.
       Grila poate incepe la :30, deci linia orara e decalata cu --rt-hour-offset (JS).
       Contrastul e deliberat vizibil: fara el intervalele nu se citesc pe alb. */
    background-image:
        repeating-linear-gradient(
            to bottom,
            #dde3ea 0, #dde3ea 1px,
            transparent 1px, transparent var(--rt-slot, 34px)
        ),
        repeating-linear-gradient(
            to bottom,
            #b6c2ce 0, #b6c2ce 1px,
            transparent 1px, transparent calc(var(--rt-slot, 34px) * 2)
        );
    background-position: 0 0, 0 var(--rt-hour-offset, 0px);
}

/* Reperele zilei: plecarea si sfarsitul programului de lucru. */
.rt-cal-rule {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px dashed #b9c2cc;
    pointer-events: none;
    z-index: 1;
}
.rt-cal-rule span {
    position: absolute;
    right: .25rem;
    top: -.7em;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: #fff;
    padding: 0 .25rem;
    color: #98a2b3;
}
.rt-cal-rule.is-start { border-top-color: var(--hs-primary, #134a6d); }
.rt-cal-rule.is-start span { color: var(--hs-primary, #134a6d); }
.rt-cal-rule.is-end { border-top-color: #b42318; }
.rt-cal-rule.is-end span { color: #b42318; }

/* Blocul unei opriri — pozitionat absolut dupa ora si durata ei. */
.rt-ev {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: .25rem;
    overflow: hidden;
    padding: .2rem .35rem;
    border: 1px solid #cfe9d9;
    border-left: 3px solid #1a7f43;
    border-radius: 6px;
    background: #f2fbf6;
    cursor: grab;
    user-select: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.rt-ev:hover { box-shadow: 0 4px 12px rgba(16, 24, 40, .14); z-index: 3; }
.rt-ev.is-dragging {
    cursor: grabbing;
    opacity: .92;
    z-index: 10;
    box-shadow: 0 10px 24px rgba(16, 24, 40, .22);
}
/* Ora convenita cu clientul: oprirea nu se trage. */
.rt-ev.is-locked { cursor: default; border-color: #a9d9bf; border-left-color: #0f5f32; background: #e7f4ec; }
.rt-ev.is-pinned { border-color: #cdd7ee; border-left-color: #3f5fa8; background: #f3f6fd; }
.rt-ev.is-callback { border-color: #f2dfb0; border-left-color: #d99b0b; background: #fffdf7; }
.rt-ev.is-after { border-color: #fecdca; border-left-color: #b42318; background: #fef6f5; }

/* Suprapunere: durata intervenției depășește pasul dintre start-uri, deci blocul intră peste
   intervalul următor. Nu e o eroare de calcul (pasul e ritmul de plecare, durata o estimare
   maximă) — de aceea se marchează cu hașură discretă, nu cu roșu de alertă. Hașura merge peste
   orice fundal de stare, iar iconița din colț spune cu cine se suprapune. */
.rt-ev.is-overlap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    background: repeating-linear-gradient(
        135deg,
        rgba(180, 35, 24, .10) 0 6px,
        rgba(180, 35, 24, 0) 6px 12px
    );
}
.rt-ev.is-overlap { border-style: dashed; }
.rt-ev.is-overlap .bi-layers-half { color: #b42318; }

.rt-ev-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; gap: .1rem; }
.rt-ev-time {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--hs-primary, #134a6d);
}
.rt-ev-time .bi-lock-fill { color: #1a7f43; }
.rt-ev-time .bi-pin-angle-fill { color: #3f5fa8; }
.rt-ev-time .bi-exclamation-triangle-fill { color: #d99b0b; }
.rt-ev-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--hs-primary, #134a6d);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
}
.rt-ev-title { display: flex; align-items: center; gap: .3rem; min-width: 0; }
.rt-ev-title b {
    font-size: 12px;
    color: var(--hs-ink, #1f2a37);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rt-ev-nr {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 700;
    color: var(--hs-primary, #134a6d);
    background: #eef3f7;
    border: 1px solid #dbe6ee;
    border-radius: 4px;
    padding: 0 .2rem;
}
.rt-ev-meta {
    font-size: 10px;
    color: var(--hs-muted, #667085);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Blocurile scurte (30 min) n-au loc decat de ora si nume. */
.rt-ev.is-compact .rt-ev-meta { display: none; }

/* Actiunile opririi nu mai stau in bloc (nu incapeau la 30 min): le tine fisa de
   hover — .rt-evcard, mai jos. */

/* Cat tine tragerea, cursorul ramane „grabbing" peste tot panoul. */
/* Marginea de jos a blocului = durata intervenției, ca in calendar. */
.rt-ev-resize {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 7px;
    cursor: ns-resize;
}
.rt-ev-resize::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 22px;
    height: 2px;
    margin-left: -11px;
    border-radius: 2px;
    background: rgba(16, 24, 40, .18);
    opacity: 0;
    transition: opacity .12s ease;
}
.rt-ev:hover .rt-ev-resize::before { opacity: 1; }
.rt-ev.is-resizing { z-index: 10; box-shadow: 0 10px 24px rgba(16, 24, 40, .22); }
/* Durata afisata cat tine redimensionarea. */
.rt-ev-dur { margin-left: .3rem; font-weight: 600; color: var(--hs-muted, #667085); }

body.rt-dragging-grid { cursor: grabbing; user-select: none; }

/* Ora fixata manual din orar — provizorie (nu e salvata), deci albastru, nu verde. */
.rt-eta--pinned {
    color: #3f5fa8;
    background: #f3f6fd;
    border-color: #cdd7ee;
}
.rt-stop--pinned {
    border-color: #cdd7ee;
    background: #fbfcff;
    box-shadow: inset 3px 0 0 #3f5fa8, 0 1px 2px rgba(16, 24, 40, .04);
}
.rt-stop-unpin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #cdd7ee;
    border-radius: 6px;
    background: #f3f6fd;
    color: #3f5fa8;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.rt-stop-unpin:hover { background: #3f5fa8; color: #fff; border-color: #3f5fa8; }

/* ---- Fisa opririi din orar (hover peste bloc) -------------------------------
   Blocurile din grila sunt inguste si au `overflow:hidden`, deci fisa nu poate sta
   in panou. E ancorata in modal (focus-trap) si pozitionata `fixed` fata de viewport.

   Layout de card enterprise, aceeasi anatomie ca modalele aplicatiei: antet navy,
   banda de stare, corp cu perechi eticheta/valoare, subsol de actiuni. Dimensiunile
   vin din scala tipografica din :root, nu din valori ad-hoc. */
.rt-evcard {
    position: fixed;
    z-index: 20001;
    /* Lățimea e dată de bara de acțiuni: cele patru butoane de la coadă (Adresă, Coordonate,
       Durată, Elimină) trebuie să stea pe UN rând. Sub atât, „Elimină" cădea singur pe rândul
       următor și fișa arăta ca și cum ar avea o acțiune în plus, separată. */
    width: 28rem;
    max-width: calc(100vw - 1.5rem);
    background: var(--hs-surface, #fff);
    border-radius: 12px;
    /* Umbra de „suprafata deasupra modalului", ca la .modal-sheet-view. */
    box-shadow: 0 24px 48px -12px rgba(16, 24, 40, .38), 0 0 0 1px rgba(16, 24, 40, .06);
    font-size: var(--hs-fs-md, 13px);
    line-height: 1.45;
    color: var(--hs-text-soft, #344054);
    overflow: hidden;
}

/* ---- Antet: navy de brand, ca al modalelor (.modal-general-header) ---------- */
.rt-evcard-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .7rem .85rem;
    background-color: var(--hs-primary, #134a6d);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .12));
    color: #fff;
}
/* „X"-ul de inchidere: fisa se deschide la clic si ramane deschisa, deci trebuie sa aiba si o
   iesire evidenta, nu doar Escape sau clic in afara. Sta in coltul din dreapta al antetului,
   dupa numarul fisei. */
.rt-evcard-close {
    margin-left: auto;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}
.rt-evcard-close:hover { background: rgba(255, 255, 255, .26); }
.rt-evcard-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* Banda de stare: acelasi cod cromatic ca marginea stanga a blocului din grila. */
.rt-evcard-head::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 255, 255, .28);
}
.rt-evcard.is-locked .rt-evcard-head::after { background: #34c77b; }
.rt-evcard.is-pinned .rt-evcard-head::after { background: #7d98d8; }
.rt-evcard.is-callback .rt-evcard-head::after { background: #f0b429; }
.rt-evcard.is-after .rt-evcard-head::after { background: #f97066; }

.rt-evcard-num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
    font-size: var(--hs-fs-xs, 11px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rt-evcard-head-body { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.rt-evcard-time {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: var(--hs-fs-sm, 12px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
    color: rgba(255, 255, 255, .82);
}
.rt-evcard-time i { font-size: var(--hs-fs-sm, 12px); }
.rt-evcard-name {
    font-size: var(--hs-fs-lg, 14px);
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    overflow-wrap: anywhere;
}
.rt-evcard-nr {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
    margin-left: auto;
    padding: .1rem .38rem;
    border-radius: 5px;
    background: rgba(255, 255, 255, .16);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28);
    font-size: var(--hs-fs-xs, 11px);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    white-space: nowrap;
}

/* ---- Starile opririi: pastile pe banda de sub antet ------------------------- */
.rt-evcard-flags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    padding: .55rem .85rem;
    background: var(--hs-surface-alt, #fafbfc);
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
}
.rt-evflag {
    display: inline-flex;
    align-items: center;
    gap: .28rem;
    padding: .12rem .45rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: var(--hs-fs-xs, 11px);
    font-weight: 600;
    line-height: 1.4;
}
.rt-evflag i { font-size: var(--hs-fs-xs, 11px); }
.rt-evflag.is-locked { background: #e7f4ec; border-color: #cfe9d9; color: #0f5f32; }
.rt-evflag.is-pinned { background: #f3f6fd; border-color: #cdd7ee; color: #35508e; }
.rt-evflag.is-callback { background: #fff8e6; border-color: #f2dfb0; color: #8a6a12; }
.rt-evflag.is-after { background: #fef3f2; border-color: #fecdca; color: #b42318; }
.rt-evflag.is-tight { background: #fff8e6; border-color: #f2dfb0; color: #8a6a12; }

/* ---- Corp: perechi eticheta/valoare, ca fisele de detaliu din aplicatie ----- */
.rt-evcard-body { margin: 0; padding: .25rem .85rem; }
.rt-evcard-row {
    display: grid;
    grid-template-columns: 6.5rem minmax(0, 1fr);
    align-items: baseline;
    gap: .5rem;
    padding: .38rem 0;
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.rt-evcard-row:last-child { border-bottom: 0; }
.rt-evcard-lbl {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    font-size: var(--hs-fs-2xs, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hs-muted, #5d6b80);
}
.rt-evcard-lbl i { font-size: var(--hs-fs-sm, 12px); color: var(--hs-subtle, #98a2b3); }
.rt-evcard-val {
    margin: 0;
    min-width: 0;
    font-size: var(--hs-fs-md, 13px);
    color: var(--hs-text, #101828);
    overflow-wrap: anywhere;
}
.rt-evcard-val a { color: var(--hs-primary, #134a6d); font-weight: 600; text-decoration: none; }
.rt-evcard-val a:hover { text-decoration: underline; }

/* ---- Subsol: actiunile opririi + indicatia de manevrare -------------------- */
.rt-evcard-foot {
    padding: .6rem .85rem .65rem;
    background: var(--hs-surface-alt, #fafbfc);
    border-top: 1px solid var(--hs-line, #e6e9ec);
}
/* Aceleasi clase de buton ca in lista (handlerele sunt delegate pe ele), dar aici
   au eticheta, deci nu mai sunt patrate de 26px. */
/* Confirmarea orei (și eliberarea ei) ocupă primul rând; restul acțiunilor stau pe al doilea,
   toate patru pe aceeași linie. `flex-wrap` rămâne, ca pe ecrane mici să nu iasă din card. */
.rt-evcard-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.rt-evcard-actions .rt-stop-conf,
.rt-evcard-actions .rt-stop-unpin { flex: 1 1 auto; }
.rt-evcard-actions .rt-stop-addr,
.rt-evcard-actions .rt-stop-geo,
.rt-evcard-actions .rt-stop-dur,
.rt-evcard-actions .rt-stop-del { flex: 1 1 auto; justify-content: center; }
.rt-evcard-actions button {
    width: auto;
    height: 30px;
    gap: .35rem;
    padding: 0 .6rem;
    border-radius: 6px;
    font-size: var(--hs-fs-sm, 12px);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease,
                box-shadow .12s ease;
}
.rt-evcard-actions button:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 3px var(--hs-focus, rgba(19, 74, 109, .25));
}
/* Confirmarea orei e actiunea principala a fisei: ocupa tot randul, restul se
   aseaza sub ea ca actiuni secundare. */
.rt-evcard-actions .rt-stop-conf { flex: 1 0 100%; justify-content: center; }

.rt-evcard-hint {
    display: flex;
    align-items: center;
    gap: .35rem;
    margin: .55rem 0 0;
    padding-top: .5rem;
    border-top: 1px dashed var(--hs-line, #e6e9ec);
    font-size: var(--hs-fs-xs, 11px);
    line-height: 1.35;
    color: var(--hs-muted, #5d6b80);
}
.rt-evcard-hint i { flex: 0 0 auto; color: var(--hs-subtle, #98a2b3); }

/* ---- „Istoric SMS" din tabul Comunicare al fisei ----------------------------
   Inlocuieste tabelul: mesajele au 300+ caractere si nu incapeau intr-o celula.
   Fiecare intrare = pastila de stare + text strans la 3 randuri + linie de context. */
.sv-sms-scope {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-size: var(--hs-fs-2xs, 10px);
    color: var(--hs-subtle, #98a2b3);
}

.sv-sms-list { list-style: none; margin: 0; padding: 0; }
.sv-sms-item {
    display: flex;
    gap: .65rem;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.sv-sms-item:last-child { border-bottom: 0; }
.sv-sms-item:hover { background: var(--hs-surface-alt, #fafbfc); }

/* Pastila din stanga poarta aceeasi culoare ca starea — se citeste inainte de text. */
.sv-sms-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f2f4f7;
    color: var(--hs-muted, #667085);
    font-size: var(--hs-fs-sm, 12px);
}
.sv-sms-item.is-delivered .sv-sms-ico { background: rgba(25, 135, 84, .1); color: #198754; }
.sv-sms-item.is-sent .sv-sms-ico { background: rgba(13, 110, 253, .1); color: #0d6efd; }
.sv-sms-item.is-scheduled .sv-sms-ico { background: rgba(255, 193, 7, .16); color: #b58105; }

.sv-sms-main { flex: 1 1 auto; min-width: 0; }
.sv-sms-top { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.sv-sms-type {
    font-size: var(--hs-fs-sm, 12px);
    font-weight: 700;
    color: var(--hs-text, #101828);
}
.sv-sms-date {
    margin-left: auto;
    font-size: var(--hs-fs-xs, 11px);
    font-variant-numeric: tabular-nums;
    color: var(--hs-subtle, #98a2b3);
}

.sv-sms-body-short,
.sv-sms-body > summary {
    margin: .25rem 0 0;
    font-size: var(--hs-fs-sm, 12px);
    line-height: 1.45;
    color: var(--hs-text-soft, #344054);
    /* Reminderele au randuri proprii (linkurile stau separat) — se pastreaza. */
    white-space: pre-line;
    overflow-wrap: anywhere;
}
/* Mesajele lungi stau strânse la 3 randuri; click pe text = tot mesajul. Fara JS:
   <details> comuta chiar decuparea, deci textul nu e scris de doua ori. */
.sv-sms-body > summary {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    list-style: none;
}
.sv-sms-body > summary::-webkit-details-marker { display: none; }
.sv-sms-body > summary::marker { content: ''; }
.sv-sms-body > summary:hover { color: var(--hs-text, #101828); }
.sv-sms-body[open] > summary {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.sv-sms-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .75rem;
    margin-top: .3rem;
    font-size: var(--hs-fs-xs, 11px);
    color: var(--hs-muted, #5d6b80);
}
.sv-sms-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.sv-sms-meta i { color: var(--hs-subtle, #98a2b3); }

.sv-sms-more {
    margin: 0;
    padding: .45rem .9rem;
    border-top: 1px solid var(--hs-line-soft, #eef1f4);
    background: var(--hs-surface-alt, #fafbfc);
    font-size: var(--hs-fs-xs, 11px);
    color: var(--hs-muted, #5d6b80);
}
/* Avertisment in subsolul istoricului (DDL nerulat) — chihlimbar, nu gri neutru. */
.sv-sms-note { color: #8a6a12; background: #fff8e6; border-top-color: #f2dfb0; }

/* ============================================================================
   /sms — tabul „Șabloane": matrice tip SMS × tip fișă + editor lateral
   ============================================================================
   Lista plata de dinainte ascundea exact ce conteaza: unde LIPSESTE un sablon.
   Matricea face acoperirea vizibila; editorul sta langa ea, nu intr-un modal,
   ca sa poti sari din celula in celula fara sa inchizi nimic. */
.smst-hint { font-size: var(--hs-fs-xs, 11px); font-weight: 500; text-transform: none;
    letter-spacing: 0; color: var(--hs-subtle, #98a2b3); }

.smst-split { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: .9rem; align-items: start; }
@media (max-width: 1200px) { .smst-split { grid-template-columns: minmax(0, 1fr); } }

.smst-matrix-wrap {
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 10px;
    background: var(--hs-surface, #fff);
    overflow: hidden;
}
.smst-scroll { overflow-x: auto; }
.smst-grid {
    display: grid;
    grid-template-columns: minmax(11rem, 1.4fr) repeat(var(--smst-cols, 3), minmax(4.5rem, 1fr));
    min-width: max-content;
}
.smst-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .55rem;
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
    border-right: 1px solid var(--hs-line-soft, #eef1f4);
    font-size: var(--hs-fs-sm, 12px);
}
.smst-cell--corner,
.smst-cell--col {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--hs-surface-alt, #fafbfc);
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
    font-size: var(--hs-fs-2xs, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hs-muted, #5d6b80);
    text-align: center;
    line-height: 1.25;
}
.smst-cell--corner { justify-content: flex-start; }
.smst-cell.is-muted { opacity: .5; }

/* Randul: eticheta tipului + modulul care il produce. */
.smst-cell--row {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: .1rem;
    background: var(--hs-surface, #fff);
}
.smst-row-label { font-weight: 600; color: var(--hs-text, #101828); }
.smst-row-mod { font-size: var(--hs-fs-2xs, 10px); color: var(--hs-subtle, #98a2b3); }
/* Tipurile compuse de aplicatie au nevoie de un anume camp; fara el nu pleaca nimic. */
.smst-row-need {
    display: inline-flex; align-items: center; gap: .2rem;
    font-size: var(--hs-fs-2xs, 10px); font-weight: 600;
    color: var(--hs-primary, #134a6d);
}

/* Celula de valoare: buton, ca sa fie evident ca se poate deschide. */
.smst-cell--v {
    border-width: 0 1px 1px 0;
    background: none;
    cursor: pointer;
    font-size: 1rem;
    transition: background-color .12s ease, box-shadow .12s ease;
}
.smst-cell--v:hover { background: var(--hs-primary-soft, #eef3f8); }
.smst-cell--v.is-active {
    background: var(--hs-primary-soft, #eef3f8);
    box-shadow: inset 0 0 0 2px var(--hs-primary, #134a6d);
}
.smst-cell--v.is-full { color: #198754; }
.smst-cell--v.is-partial { color: #b58105; }
.smst-cell--v.is-empty { color: #d0d5dd; }
.smst-cell--v.is-off { color: #98a2b3; }
/* Fara sablon propriu, dar mesajul pleaca pe cel „generic": nu e o lipsa. */
.smst-cell--v.is-inherit { color: #98b6cd; }
/* Sablon activ care NU se poate compune — singurul loc in care eroarea se vede. */
.smst-cell--v.is-broken { color: #d92d20; background: #fef3f2; }
.smst-cell--v.is-broken:hover { background: #fee4e2; }

.smst-ic--full { color: #198754; }
.smst-ic--partial { color: #b58105; }
.smst-ic--empty { color: #d0d5dd; }
.smst-ic--off { color: #98a2b3; }
.smst-ic--inherit { color: #98b6cd; }
.smst-ic--broken { color: #d92d20; }

.smst-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    padding: .5rem .7rem;
    border-top: 1px solid var(--hs-line, #e6e9ec);
    background: var(--hs-surface-alt, #fafbfc);
    font-size: var(--hs-fs-xs, 11px);
    color: var(--hs-muted, #5d6b80);
}
.smst-legend span { display: inline-flex; align-items: center; gap: .3rem; }
/* Tipurile de fisa inactive fara niciun sablon sunt ascunse: matricea are 12 coloane. */
.smst-legend__more {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: .3rem;
    padding: 0; border: 0; background: none;
    font-size: inherit; color: var(--hs-primary, #134a6d);
    text-decoration: underline; text-underline-offset: 2px;
}
.smst-legend__more:hover { color: var(--hs-primary-dark, #0e3a56); }

/* ---- Editorul lateral ---- */
.smst-editor {
    position: sticky;
    top: .5rem;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 10px;
    background: var(--hs-surface, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}
.smst-editor__empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--hs-subtle, #98a2b3);
    font-size: var(--hs-fs-sm, 12px);
}
.smst-editor__empty i { display: block; font-size: 1.8rem; opacity: .5; margin-bottom: .5rem; }
.smst-editor__empty p { margin: 0; }

.smst-editor__head {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .8rem;
    background-color: var(--hs-primary, #134a6d);
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .12));
    color: #fff;
}
.smst-editor__id { display: flex; flex-direction: column; min-width: 0; gap: .1rem; }
.smst-editor__type { font-size: var(--hs-fs-lg, 14px); font-weight: 700; letter-spacing: -.01em; }
.smst-editor__ctype {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: var(--hs-fs-xs, 11px); color: rgba(255, 255, 255, .82);
}
.smst-editor__head .btn { margin-left: auto; flex: 0 0 auto; --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.5); }

.smst-editor__body { padding: .8rem; max-height: 62vh; overflow-y: auto; }
.smst-row2 { display: grid; grid-template-columns: 1fr 9rem; gap: .6rem; margin-bottom: .8rem; }

/* Comutator in loc de select: doua stari, si nu depinde de select2 (editorul e randat din
   JS, deci un <select> injectat aici n-ar fi fost niciodata preluat de select2-init). */
.smst-active { display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding-top: 1.1rem; }
.smst-active .form-check-label { font-size: var(--hs-fs-sm, 12px); font-weight: 600; }
.smst-active__hint { font-size: var(--hs-fs-2xs, 10px); color: var(--hs-subtle, #98a2b3); }

/* Campul fara de care tipul asta de SMS nu se poate compune deloc. */
.smst-req {
    margin-left: .35rem; padding: .05rem .3rem;
    border-radius: 4px;
    background: #fef3f2; color: #b42318;
    font-size: var(--hs-fs-2xs, 10px); font-weight: 700;
    text-transform: uppercase; letter-spacing: .03em;
}

.smst-field { margin-bottom: .9rem; }
.smst-field__lbl {
    display: block;
    margin-bottom: .25rem;
    font-size: var(--hs-fs-2xs, 10px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hs-muted, #5d6b80);
}
.smst-field__hint { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--hs-subtle, #98a2b3); }
.smst-field textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--hs-fs-sm, 12px); }

/* Legenda argumentelor: ordinea `%s` nu apare nicaieri altundeva in aplicatie. */
.smst-legend-box { margin-top: .4rem; }
.smst-args { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.smst-args li {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: var(--hs-fs-xs, 11px); color: var(--hs-text-soft, #344054);
}
.smst-arg {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.3rem; padding: 0 .2rem;
    border-radius: 4px;
    background: var(--hs-primary-soft, #eef3f8);
    color: var(--hs-primary, #134a6d);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: var(--hs-fs-2xs, 10px);
    font-weight: 700;
}
.smst-legend-empty { margin: 0; font-size: var(--hs-fs-xs, 11px); color: var(--hs-subtle, #98a2b3); }
.smst-warn {
    display: flex; gap: .35rem; margin: .35rem 0 0;
    font-size: var(--hs-fs-xs, 11px); line-height: 1.35; color: #8a6a12;
}
.smst-warn i { flex: 0 0 auto; }
.smst-warn.is-fixed { color: var(--hs-muted, #5d6b80); }
.smst-warn strong { color: var(--hs-primary, #134a6d); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.smst-preview {
    margin-top: .45rem;
    padding: .5rem .6rem;
    border-radius: 8px;
    background: var(--hs-surface-alt, #fafbfc);
    border: 1px dashed var(--hs-line, #e6e9ec);
    font-size: var(--hs-fs-xs, 11px);
}
.smst-preview:empty { display: none; }
.smst-preview__lbl {
    display: block; margin-bottom: .25rem;
    font-weight: 700; color: var(--hs-muted, #5d6b80);
}
.smst-preview__lbl i { margin-right: .25rem; }
.smst-preview__txt {
    margin: 0; white-space: pre-line; overflow-wrap: anywhere;
    color: var(--hs-text, #101828); font-size: var(--hs-fs-sm, 12px); line-height: 1.4;
}
.smst-preview__err { display: flex; gap: .35rem; color: #b42318; }

.smst-editor__foot {
    display: flex; justify-content: flex-end; gap: .4rem;
    padding: .6rem .8rem;
    border-top: 1px solid var(--hs-line, #e6e9ec);
    background: var(--hs-surface-alt, #fafbfc);
}

/* ============================================================================
   /sms — tabul „Tipuri și reguli"
   ============================================================================
   Tipurile raman globale si read-only (le citeste si aplicatia veche); editabila
   e regula companiei. Fiecare card isi spune regula in limbaj natural, ca sa nu
   fie nevoie sa deschizi formularul ca sa afli ce face. */
.smsr-list { display: flex; flex-direction: column; gap: .6rem; }
.smsr-card {
    border: 1px solid var(--hs-line, #e6e9ec);
    border-left: 3px solid #d0d5dd;
    border-radius: 10px;
    background: var(--hs-surface, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    padding: .7rem .85rem;
}
.smsr-card.is-on { border-left-color: #198754; }
.smsr-card.is-open { box-shadow: 0 6px 18px rgba(16, 24, 40, .1); }

.smsr-card__head { display: flex; align-items: center; gap: .55rem; }
.smsr-card__num {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    border-radius: 6px;
    background: var(--hs-primary-soft, #eef3f8);
    color: var(--hs-primary, #134a6d);
    font-size: var(--hs-fs-xs, 11px); font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.smsr-card__id { display: flex; flex-direction: column; min-width: 0; gap: .05rem; }
.smsr-card__label { font-size: var(--hs-fs-lg, 14px); font-weight: 700; color: var(--hs-text, #101828); }
.smsr-card__meta { font-size: var(--hs-fs-2xs, 10px); color: var(--hs-subtle, #98a2b3); }
.smsr-card__head .hs-pill { margin-left: auto; }

.smsr-card__sum {
    margin: .45rem 0 0;
    font-size: var(--hs-fs-sm, 12px);
    color: var(--hs-text-soft, #344054);
}
.smsr-card__note {
    display: flex; gap: .35rem; margin: .3rem 0 0;
    font-size: var(--hs-fs-xs, 11px); color: var(--hs-muted, #5d6b80);
}

.smsr-form { margin-top: .7rem; border-top: 1px solid var(--hs-line-soft, #eef1f4); padding-top: .7rem; }
.smsr-fs { border: 0; margin: 0 0 .8rem; padding: 0; }
.smsr-fs > legend {
    float: none; width: auto; margin-bottom: .4rem; padding: 0;
    font-size: var(--hs-fs-2xs, 10px); font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    color: var(--hs-muted, #5d6b80);
}
.smsr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .55rem; }
.smsr-lbl {
    display: block; margin-bottom: .2rem;
    font-size: var(--hs-fs-xs, 11px); color: var(--hs-muted, #5d6b80);
}
.smsr-help { display: block; margin-top: .2rem; font-size: var(--hs-fs-2xs, 10px); color: var(--hs-subtle, #98a2b3); }
.smsr-check {
    display: flex; align-items: center; gap: .45rem; margin: .1rem 0 .55rem;
    font-size: var(--hs-fs-sm, 12px); color: var(--hs-text-soft, #344054); cursor: pointer;
}
.smsr-form__foot { display: flex; justify-content: flex-end; gap: .4rem; }

/* Notă de avertizare (DDL nerulat, risc de dublare): chihlimbar, nu gri neutru. */
.hs-note--warn {
    padding: .5rem .65rem;
    border: 1px solid #f2dfb0;
    border-left: 3px solid #d99b0b;
    border-radius: 8px;
    background: #fff8e6;
    color: #8a6a12;
    margin-bottom: .5rem;
}
.hs-note--warn i { color: #d99b0b; }

/* ---- Ghid pliabil („Cum funcționează") ---------------------------------------
   <details> nativ: se deschide fără JS, iar starea nu trebuie ținută nicăieri.
   Stă deschis cât vrea utilizatorul, spre deosebire de un tooltip care dispare. */
.hs-help {
    margin-bottom: .7rem;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 10px;
    background: var(--hs-surface, #fff);
    overflow: hidden;
}
.hs-help > summary {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .8rem;
    background: var(--hs-surface-alt, #fafbfc);
    cursor: pointer;
    list-style: none;
    font-size: var(--hs-fs-sm, 12px);
    font-weight: 700;
    color: var(--hs-primary, #134a6d);
}
.hs-help > summary::-webkit-details-marker { display: none; }
.hs-help > summary::marker { content: ''; }
.hs-help > summary::after {
    content: '';
    margin-left: auto;
    width: 7px; height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform .15s ease;
    opacity: .7;
}
.hs-help[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.hs-help > summary:hover { background: var(--hs-primary-soft, #eef3f8); }

.hs-help__body { padding: .75rem .9rem .85rem; border-top: 1px solid var(--hs-line, #e6e9ec); }
.hs-help__lead {
    margin: 0 0 .6rem;
    font-size: var(--hs-fs-sm, 12px);
    line-height: 1.5;
    color: var(--hs-text-soft, #344054);
}
.hs-help__dl { display: flex; flex-direction: column; gap: .55rem; margin: 0; }
.hs-help__dl > div { display: grid; grid-template-columns: 12rem minmax(0, 1fr); gap: .6rem; }
@media (max-width: 900px) { .hs-help__dl > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; } }
.hs-help__dl dt {
    display: flex; align-items: flex-start; gap: .35rem;
    font-size: var(--hs-fs-sm, 12px);
    font-weight: 700;
    color: var(--hs-text, #101828);
}
.hs-help__dl dt i { color: var(--hs-primary, #134a6d); }
.hs-help__dl dd {
    margin: 0;
    font-size: var(--hs-fs-sm, 12px);
    line-height: 1.5;
    color: var(--hs-text-soft, #344054);
}
/* Pașii numerotați ai unei reguli — aceeași ordine ca fieldset-urile din formular. */
.hs-help__step {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--hs-primary, #134a6d);
    color: #fff;
    font-size: var(--hs-fs-2xs, 10px);
    font-weight: 700;
}
.hs-help__foot {
    display: flex; gap: .4rem;
    margin: .7rem 0 0;
    padding-top: .55rem;
    border-top: 1px dashed var(--hs-line, #e6e9ec);
    font-size: var(--hs-fs-xs, 11px);
    line-height: 1.45;
    color: var(--hs-muted, #5d6b80);
}
.hs-help__foot i { flex: 0 0 auto; color: #d99b0b; }

/* ============================================================================
   Modulul EMAIL (Comunicare → Email): lista de comunicări + editorul de șablon.
   Reface aceeași împărțire ca la șabloanele SMS (.smst-split): sursa în stânga,
   editorul în dreapta — cine cunoaște un canal se descurcă și cu celălalt.
   ============================================================================ */
/* Trei coloane: ce comunicări există | editorul | cum arată mesajul. Pe ecrane înguste se
   stivuiesc, iar previzualizarea coboară sub editor. */
.et-workspace {
    display: grid;
    grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}
.et-main { min-width: 0; }
@media (max-width: 991.98px) {
    .et-workspace { grid-template-columns: minmax(0, 1fr); }
}
.et-side { position: sticky; top: .5rem; }

/* Căutarea peste lista de comunicări. */
.et-search { position: relative; margin-bottom: .6rem; }
.et-search i {
    position: absolute;
    left: .55rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hs-subtle);
    font-size: var(--hs-fs-sm);
}
.et-search input { padding-left: 1.75rem; }

/* Legenda semnelor din listă. */
.et-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem 1rem;
    margin-top: .7rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--hs-line);
    font-size: var(--hs-fs-2xs);
    color: var(--hs-subtle);
}
.et-legend span { display: inline-flex; align-items: center; gap: .25rem; }

.et-groups { display: flex; flex-direction: column; gap: .9rem; }
.et-group__head {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .35rem;
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
}
.et-group__head i { color: var(--hs-primary); font-size: var(--hs-fs-sm); }
.et-list { display: flex; flex-direction: column; gap: .25rem; }

/* Un rând = o comunicare. Butonul poartă tot: denumire, starea textului, semnalele. */
.et-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .45rem .6rem;
    text-align: left;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface);
    color: var(--hs-ink);
}
.et-item:hover { border-color: var(--hs-primary); background: var(--hs-brand-bg); }
.et-item.is-active {
    border-color: var(--hs-primary);
    background: var(--hs-brand-bg);
    box-shadow: inset 3px 0 0 var(--hs-primary);
}
.et-item__ic { color: var(--hs-primary); font-size: 1rem; flex-shrink: 0; }
.et-item__label { display: flex; flex-direction: column; min-width: 0; font-size: var(--hs-fs-md); font-weight: 600; }
.et-item__meta { font-size: var(--hs-fs-2xs); font-weight: 400; color: var(--hs-subtle); }
.et-item__flags { margin-left: auto; display: inline-flex; gap: .3rem; color: var(--hs-subtle); font-size: var(--hs-fs-sm); }

/* Editorul din dreapta. */
.et-ed { display: flex; flex-direction: column; }
.et-ed__head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; }
.et-ed__group {
    font-size: var(--hs-fs-2xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
    width: 100%;
}
.et-ed__title { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--hs-fs-lg); color: var(--hs-text); }
.et-ed__badge {
    margin-left: auto;
    font-size: var(--hs-fs-2xs);
    font-weight: 600;
    padding: .05rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--hs-brand-br);
    background: var(--hs-brand-bg);
    color: var(--hs-brand-fg);
}
.et-ed__badge.is-default { border-color: var(--hs-neutral-br); background: var(--hs-neutral-bg); color: var(--hs-neutral-fg); }
/* Corpul e HTML scris de mână: font monospațiat, ca marcajele să se citească. */
.et-ed__body { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; }

/* Variabilele disponibile — jetoane care se inserează în text la clic. */
.et-vars { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .5rem; }
.et-vars__label {
    width: 100%;
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
    margin-bottom: .1rem;
}
.et-var {
    border: 1px solid var(--hs-line-strong);
    background: var(--hs-surface-alt);
    color: var(--hs-muted);
    border-radius: 999px;
    padding: .05rem .45rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
}
.et-var:hover { border-color: var(--hs-primary); background: var(--hs-brand-bg); color: var(--hs-primary); }

.et-ed__opts { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; }
.et-ed__foot { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--hs-line-soft); }

/* Bara de formatare a mesajului: inserează HTML în jurul selecției, ca să nu fie nevoie
   să-l scrii de mână. Nu e un editor vizual — textul rămâne HTML, vizibil și verificabil. */
.et-toolbar { display: flex; flex-wrap: wrap; gap: .2rem; margin: .35rem 0; }
.et-tool {
    border: 1px solid var(--hs-line-strong);
    background: var(--hs-surface);
    color: var(--hs-muted);
    border-radius: var(--hs-radius-sm);
    width: 1.85rem;
    height: 1.7rem;
    line-height: 1;
    font-size: var(--hs-fs-md);
}
.et-tool:hover { border-color: var(--hs-primary); background: var(--hs-brand-bg); color: var(--hs-primary); }

/* „nesalvat" — semn de stare, nu eroare: chihlimbar, lângă eticheta de text propriu/implicit. */
.et-ed__badge.is-dirty {
    margin-left: .35rem;
    border-color: var(--hs-warn-br);
    background: var(--hs-warn-bg);
    color: var(--hs-warn-fg);
}

/* Avertisment sub editor: variabile scrise greșit, semnalate la fiecare tastă. */
.et-warn {
    display: flex;
    align-items: flex-start;
    gap: .35rem;
    margin: .5rem 0 0;
    padding: .35rem .5rem;
    font-size: var(--hs-fs-xs);
    color: var(--hs-warn-fg);
    background: var(--hs-warn-bg);
    border: 1px solid var(--hs-warn-br);
    border-radius: var(--hs-radius-sm);
}

/* Dialogul de previzualizare a mesajului (deschis din editorul de șabloane). */
.emp-subject {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding-bottom: .55rem;
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--hs-line);
}
.emp-subject__label {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
}
.emp-subject strong { font-size: var(--hs-fs-lg); color: var(--hs-ink); overflow-wrap: anywhere; }
.emp-body {
    width: 100%;
    min-height: 26rem;
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    background: #fff;
}

/* ---- Jurnalul trimiterilor de email (/email → Trimiteri) ----
   Detaliul unui rând: perechile documentului, eroarea SMTP completă (nu într-un tooltip pe care
   nu-l poți copia) și retrimiterea. */
.el-subject {
    display: inline-block;
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}
.el-detail { padding: .75rem 1rem; background: var(--hs-surface-alt); border-left: 3px solid var(--hs-primary); }
.el-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .5rem 1.25rem;
}
.el-detail__item { display: flex; flex-direction: column; min-width: 0; }
.el-detail__item span {
    font-size: var(--hs-fs-2xs);
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
}
.el-detail__item strong { font-size: var(--hs-fs-md); color: var(--hs-ink); overflow-wrap: anywhere; }
.el-detail__error {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin-top: .7rem;
    padding: .5rem .65rem;
    font-size: var(--hs-fs-xs);
    line-height: 1.5;
    color: var(--hs-bad-fg);
    background: var(--hs-bad-bg);
    border: 1px solid var(--hs-bad-br);
    border-radius: var(--hs-radius-sm);
    overflow-wrap: anywhere;
}
.el-detail__foot { margin-top: .7rem; }
/* „Astăzi" e contor, nu filtru: nu primește starea „activ". */
.hs-stat--plain { cursor: default; }
.hs-stat--plain:hover { border-color: var(--hs-line); }

/* Secțiunea „Adresa intervenției" din modalul de programare al fișei: desprinsă de câmpurile
   de interval printr-o linie, ca formularul să se citească în două părți (când vs. unde). */
#modal_sheet_appointment .sa-address {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px dashed var(--hs-line);
}

/* ============================================================================
   MODULUL FINANCIAR — jurnal de vânzări, decont TVA, scadențar
   ----------------------------------------------------------------------------
   Trei rapoarte care se citesc altfel decât listele obișnuite: aici nu cauți un
   rând, ci verifici o cifră. Deci coloanele numerice au cifre de lățime egală
   (`tabular-nums`), totalurile stau lipite de tabel, iar culoarea apare doar
   unde e semnal — o factură restantă, un storno negativ. Restul e alb-negru.

   Totul e scopat pe `.fin-board`, ca rafinările să nu atingă alte module.
   ========================================================================== */

/* ---- Navigarea între rapoarte: un segmented control, nu tab-uri Bootstrap ----
   Rapoartele sunt trei vederi ale aceleiași perioade, nu pagini fără legătură;
   un grup compact spune asta mai bine decât trei tab-uri late. */
.fin-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--hs-surface-alt);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
}
.fin-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .38rem .75rem;
    border-radius: var(--hs-radius-sm);
    font-size: var(--hs-fs-md);
    font-weight: 600;
    color: var(--hs-muted);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease, background .15s ease;
}
.fin-tabs__link i { font-size: 14px; color: var(--hs-subtle); }
.fin-tabs__link:hover { color: var(--hs-primary); background: var(--hs-primary-soft); }
.fin-tabs__link:hover i { color: var(--hs-primary); }
.fin-tabs__link.is-active {
    color: var(--hs-primary);
    background: var(--hs-surface);
    box-shadow: var(--hs-shadow-xs);
    border: 1px solid var(--hs-brand-br);
    padding: calc(.38rem - 1px) calc(.75rem - 1px);
}
.fin-tabs__link.is-active i { color: var(--hs-primary); }
.fin-tabs__link:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }

/* ---- Bara de perioadă ----
   O bandă de instrumente, nu un formular într-un card: perioada e un control al
   raportului de dedesubt, nu un pas separat. Totul pe un singur rând cât încape:
   intervalul la stânga, filtrele suplimentare (dacă are pagina) după el. */
.fin-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
    box-shadow: var(--hs-shadow-xs);
}
.fin-toolbar__field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.fin-toolbar__lbl {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle);
}
.fin-toolbar__sep { align-self: stretch; width: 1px; background: var(--hs-line); margin: 0 .15rem; }
.fin-toolbar__spacer { flex: 1 1 auto; }

/* Controlul de interval (daterangepicker) — un singur chenar pentru toată perioada:
   iconiță, textul intervalului, eticheta lui („Luna trecută", „31 de zile") și săgeata.
   Inputul e doar afișaj (valorile ISO stau în câmpurile ascunse `from`/`to`), deci nu are
   chenar propriu: chenarul e al controlului întreg și se aprinde la focus, ca orice câmp. */
.fin-period {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .3rem .55rem;
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fin-period:hover { border-color: #cfd6de; }
.fin-period:focus-within { border-color: var(--hs-primary); box-shadow: 0 0 0 .18rem rgba(19, 74, 109, .12); }
.fin-period__icon { color: var(--hs-primary); font-size: 13px; line-height: 1; }
.fin-period__value {
    width: 10.6rem;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--hs-text);
    font-size: var(--hs-fs-md);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.fin-period__value:focus { outline: none; }
/* Eticheta perioadei: spune ce ai ales, nu doar între ce date („Luna trecută" e informația,
   „01.07 – 31.07" e dovada). Serverul o randează în zile, JS-ul o înlocuiește cu numele
   scurtăturii când intervalul se potrivește exact. */
.fin-period__tag {
    flex: 0 0 auto;
    padding: .1rem .45rem;
    border: 1px solid var(--hs-brand-br);
    border-radius: 999px;
    background: var(--hs-brand-bg);
    color: var(--hs-brand-fg);
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    white-space: nowrap;
}
.fin-period__caret { color: var(--hs-subtle); font-size: 11px; line-height: 1; }
/* Comutatorul de filtru („Include documentele anulate") — o stare a raportului, nu o bifă
   dintr-un formular de salvat: stă pe linia de bază a controalelor, nu a etichetelor de
   deasupra lor, și se aprinde în navy-ul aplicației, nu în albastrul Bootstrap. */
.fin-switch { margin-bottom: .35rem; padding-left: 2.4em; }
.fin-switch .form-check-input { width: 2em; height: 1.1em; margin-left: -2.4em; cursor: pointer; }
.fin-switch .form-check-input:checked { background-color: var(--hs-primary); border-color: var(--hs-primary); }
.fin-switch .form-check-input:focus { border-color: var(--hs-primary); box-shadow: 0 0 0 .18rem rgba(19, 74, 109, .12); }
.fin-switch .form-check-label { cursor: pointer; }
.fin-toolbar .form-check-label { font-size: var(--hs-fs-md); color: var(--hs-text-soft); white-space: nowrap; }

/* Resetarea: ultimul lucru din bară, scris discret — e o ieșire din filtre, nu o acțiune
   pe care s-o cauți. Inactivă când ești deja pe starea implicită (luna curentă, fără
   filtre), ca să se vadă că nu mai are ce reseta, dar fără să sară bara în lățime. */
.fin-reset {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .1rem;
    padding: .32rem .7rem;
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius-sm);
    color: var(--hs-muted);
    font-size: var(--hs-fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}
.fin-reset:hover { border-color: #cfd6de; background: var(--hs-surface-alt); color: var(--hs-text); text-decoration: none; }
.fin-reset:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }
.fin-reset:disabled { background: transparent; color: var(--hs-subtle); border-color: var(--hs-line-soft); cursor: default; }
.fin-reset i { font-size: 12px; }

/* Exportul stă lângă resetare, dar e o acțiune, nu o ieșire din filtre: aceeași formă,
   accentul verde al fișierului Excel. */
.fin-export {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: .1rem;
    padding: .32rem .7rem;
    background: var(--hs-good-bg);
    border: 1px solid var(--hs-good-br);
    border-radius: var(--hs-radius-sm);
    color: var(--hs-good-fg);
    font-size: var(--hs-fs-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .15s ease, background-color .15s ease;
}
.fin-export:hover { background: #e0eee6; border-color: #b7d6c4; color: var(--hs-good-fg); text-decoration: none; }
.fin-export:focus-visible { outline: 2px solid var(--hs-good-fg); outline-offset: 1px; }
.fin-export i { font-size: 13px; }

/* ==========================================================================
   Extrase bancare (.bk-*) — lista de reconciliere
   Rândul răspunde la trei întrebări, în ordinea asta: cine a plătit, cât, și pe
   ce factură merge. Sugestia poartă scorul și motivul: un procent fără explicație
   nu se poate verifica, iar aici o greșeală ajunge în contabilitate.
   ========================================================================== */
.bk-upload { display: inline-flex; align-items: center; gap: .5rem; }
.bk-upload__file {
    display: inline-flex; align-items: center; gap: .4rem;
    max-width: 16rem;
    padding: .42rem .7rem;
    border: 1px dashed var(--hs-line);
    border-radius: var(--hs-radius-sm);
    background: var(--hs-surface);
    color: var(--hs-muted);
    font-size: var(--hs-fs-sm);
    cursor: pointer;
    white-space: nowrap; overflow: hidden;
}
.bk-upload__file:hover { border-color: var(--hs-primary); color: var(--hs-primary); }
.bk-upload__file input[type="file"] { display: none; }
.bk-upload__file span { overflow: hidden; text-overflow: ellipsis; }

.bk-table td { vertical-align: top; }
.bk-party { font-weight: 600; color: var(--hs-text); }
.bk-descr { max-width: 42rem; overflow-wrap: anywhere; }

/* Sugestia de factură */
.bk-sugg__inv { font-weight: 700; color: var(--hs-primary); }
.bk-sugg__why { margin-top: .15rem; font-size: var(--hs-fs-xs); color: var(--hs-muted); font-style: italic; }
.bk-score {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .4rem;
    border-radius: 999px;
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    border: 1px solid transparent;
}
/* Verde doar la potrivire aproape sigură: culoarea e un verdict, nu un accent. */
.bk-score--high { background: var(--hs-good-bg); color: var(--hs-good-fg); border-color: var(--hs-good-br); }
.bk-score--mid  { background: var(--hs-warn-bg); color: var(--hs-warn-fg); border-color: var(--hs-warn-br); }
.bk-score--low  { background: var(--hs-neutral-bg); color: var(--hs-neutral-fg); border-color: var(--hs-neutral-br); }

/* ---- Cifrele de sus ----
   Aceleași `.hs-stat` ca în restul aplicației, doar cu numărul mai mare: pe un
   raport, cifra ESTE conținutul. `tabular-nums` ține sumele aliniate între ele. */
.fin-board .hs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Scadentarul are trei cifre, nu patru: cat, cat e restant si pe cate facturi. */
.fin-board .hs-stats.fin-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fin-board .hs-stat { border-radius: 6px; padding: .8rem .95rem; }
.fin-board .hs-stat__icon { width: 36px; height: 36px; border-radius: 8px; }
.fin-board .hs-stat__val { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.fin-board .hs-stat__lbl { font-size: var(--hs-fs-2xs); letter-spacing: .06em; }
.fin-board .hs-stat__unit { font-size: var(--hs-fs-sm); font-weight: 600; color: var(--hs-subtle); margin-left: .2rem; }
/* Suma restantă e singurul indicator care are voie să fie roșu: e o problemă, nu o stare. */
.fin-stat--bad .hs-stat__val { color: var(--hs-bad-fg); }
.fin-stat--bad .hs-stat__icon { background: var(--hs-bad-bg); color: var(--hs-bad-fg); }

/* ---- Cardurile și tabelele ---- */
.fin-board .hs-card {
    border-radius: 6px;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .04);
}
/* Antetul unei secțiuni: titlu mic la stânga, context la dreapta (perioada, numărul
   de documente). Aceeași bandă pe toate trei rapoartele. */
.fin-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}
.fin-head__title {
    margin: 0;
    font-size: var(--hs-fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-muted);
}
.fin-head__meta { font-size: var(--hs-fs-sm); color: var(--hs-subtle); font-variant-numeric: tabular-nums; }

.fin-board table.table-enterprise thead th {
    font-size: var(--hs-fs-2xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hs-subtle);
    font-weight: 600;
    padding-top: .5rem;
    padding-bottom: .5rem;
    white-space: nowrap;
}
.fin-board table.table-enterprise tbody td { padding-top: .45rem; padding-bottom: .45rem; }

/* Coloana de bani: cifre de lățime egală, aliniate la dreapta, fără wrap. Coloana
   citită pe verticală („se adună la total?") e cea care contează, nu rândul. */
.fin-num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
.fin-num--strong { font-weight: 700; color: var(--hs-ink); }
/* Stornările sunt stocate negativ; se citesc ca scădere, nu ca eroare — deci roșu
   temperat, nu semnal de alarmă. */
.fin-num--neg { color: var(--hs-bad-fg); }
.fin-num--muted { color: var(--hs-subtle); }
/* Restul neîncasat, scris sub suma încasată. */
.fin-num__rest { display: block; font-size: var(--hs-fs-xs); color: var(--hs-bad-fg); font-weight: 600; }

/* Rândul de total: lipit de tabel, cu o linie groasă deasupra — ochiul îl caută
   la sfârșitul coloanei, nu într-un card separat. */
.fin-board table.table-enterprise tfoot td,
.fin-board table.table-enterprise tfoot th {
    background: var(--hs-surface-alt);
    border-top: 2px solid var(--hs-line-strong) !important;
    padding-top: .55rem;
    padding-bottom: .55rem;
    font-size: var(--hs-fs-md);
    font-weight: 700;
    color: var(--hs-ink);
}
.fin-board table.table-enterprise tfoot .fin-num { font-variant-numeric: tabular-nums; }
.fin-total__lbl { font-size: var(--hs-fs-2xs); text-transform: uppercase; letter-spacing: .07em; color: var(--hs-muted); }

/* Numărul documentului + linia de context de sub el (fișa, data). */
.fin-doc__nr { font-weight: 700; color: var(--hs-ink); }
.fin-doc__sub { display: block; font-size: var(--hs-fs-xs); color: var(--hs-subtle); }
.fin-doc--void .fin-doc__nr { text-decoration: line-through; color: var(--hs-subtle); font-weight: 600; }
.fin-board tr.fin-row--void td { color: var(--hs-subtle); }

/* ---- Etichete de stare ----
   O singură familie, ca la piese: fundal deschis + text închis + contur. Stările
   e-Factura sunt șase; șase culori Bootstrap pline pe același rând ar face tabelul
   ilizibil. */
.fin-badge {
    display: inline-block;
    padding: .16em .5em;
    border-radius: 4px;
    border: 1px solid var(--hs-neutral-br);
    background: var(--hs-neutral-bg);
    color: var(--hs-neutral-fg);
    font-size: var(--hs-fs-xs);
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}
.fin-badge--info  { background: var(--hs-info-bg);  color: var(--hs-info-fg);  border-color: var(--hs-info-br); }
.fin-badge--good  { background: var(--hs-good-bg);  color: var(--hs-good-fg);  border-color: var(--hs-good-br); }
.fin-badge--warn  { background: var(--hs-warn-bg);  color: var(--hs-warn-fg);  border-color: var(--hs-warn-br); }
.fin-badge--bad   { background: var(--hs-bad-bg);   color: var(--hs-bad-fg);   border-color: var(--hs-bad-br); }
/* Cazul obișnuit („netrimisă", „în termen") se scrie, nu se colorează. */
.fin-badge--quiet { background: transparent; border-color: transparent; color: var(--hs-muted); font-weight: 500; }
/* Restanță veche: aici culoarea plină e justificată — e singura din tabel. */
.fin-badge--alert { background: var(--hs-bad-solid); border-color: var(--hs-bad-solid); color: #fff; }

/* ---- Decontul de TVA: cifra care se trece în declarație ----
   Un singur număr contează pe pagina asta. Primește spațiu și greutate, restul
   tabelului îl susține. */
.fin-figure { text-align: center; padding: 1.25rem 0; }
.fin-figure__val {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.03em;
    color: var(--hs-ink);
    font-variant-numeric: tabular-nums;
}
.fin-figure__cur { font-size: 1rem; font-weight: 600; color: var(--hs-subtle); margin-left: .25rem; }
.fin-figure__lbl { margin-top: .35rem; font-size: var(--hs-fs-sm); color: var(--hs-muted); }
/* Cota, în coloana din stânga a defalcării: un jeton, ca să se citească ca valoare. */
.fin-rate {
    display: inline-block;
    min-width: 3.1rem;
    padding: .12em .45em;
    text-align: center;
    border-radius: 4px;
    background: var(--hs-brand-bg);
    border: 1px solid var(--hs-brand-br);
    color: var(--hs-brand-fg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ---- Nota de subsol a unui raport ---- */
.fin-note {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .9rem 0 0;
    font-size: var(--hs-fs-xs);
    line-height: 1.55;
    color: var(--hs-muted);
}
.fin-note i { color: var(--hs-subtle); margin-top: .1rem; }

/* ---- Starea goală ---- */
.fin-empty { text-align: center; padding: 2.75rem 1rem; color: var(--hs-muted); }
.fin-empty i { display: block; font-size: 1.75rem; color: var(--hs-subtle); margin-bottom: .5rem; }
.fin-empty--ok i { color: var(--hs-good-fg); }

@media (max-width: 991.98px) {
    .fin-board .hs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fin-toolbar__sep { display: none; }
}
@media (max-width: 575.98px) {
    .fin-board .hs-stats { grid-template-columns: 1fr; }
    .fin-tabs { display: flex; width: 100%; }
    .fin-tabs__link { flex: 1 1 0; justify-content: center; }
    .fin-toolbar__field .form-control { width: 100%; }
}

/* ============================================================================
   MODULUL HR — layout enterprise pentru toate subsecțiunile
   ----------------------------------------------------------------------------
   HR crescuse cu o temă paralelă: banda de indicatori și tabelele veneau din
   biblioteca `urp-*` (main.css), cu o paletă caldă (bej #fbfbfa / #e6e6e1) și
   colțuri de 12px, în timp ce restul aplicației folosește paleta rece navy și
   6-7px. Două ERP-uri în același ecran.

   Aici HR trece pe tokenii `--hs-*` și pe componentele comune (`hs-stats`,
   `table-enterprise`, `hs-card`). Ce rămâne propriu modulului poartă prefixul
   `hr-` și e scopat pe `.hr-board`, ca la piese (`pq-`) și financiar (`fin-`).
   Scope-ul ridică și specificitatea peste regulile simple din main.css, care se
   încarcă după app.css.
   ========================================================================== */

/* ---- Rearmonizarea claselor HR existente pe tokeni ----
   Aceleași nume, aceeași structură — doar culorile și razele intră în sistem. */
.hr-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .hr-dash-grid { grid-template-columns: 1fr; } }

.hr-chartcard {
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: 6px;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .04);
    padding: .9rem 1.05rem 1rem;
}
.hr-chartcard__title {
    font-size: var(--hs-fs-2xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hs-subtle);
    font-weight: 700;
    margin-bottom: .9rem;
}

/* Bare orizontale (personal pe departament) */
.hr-bars { display: flex; flex-direction: column; gap: .55rem; }
.hr-barrow { display: grid; grid-template-columns: 130px 1fr 34px; align-items: center; gap: .6rem; }
.hr-bar-label {
    font-size: var(--hs-fs-md);
    color: var(--hs-text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hr-bar-track { height: 10px; background: var(--hs-neutral-bg); border-radius: 999px; overflow: hidden; }
/* Bară plată, într-o singură culoare: gradientul sugera o valoare care variază
   pe lungime, dar bara reprezintă un singur număr. */
.hr-bar-fill { height: 100%; border-radius: 999px; background: var(--hs-primary); min-width: 3px; }
.hr-bar-val {
    font-size: var(--hs-fs-md);
    font-weight: 700;
    color: var(--hs-ink);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Coloane (angajări pe lună) */
.hr-cols { display: flex; align-items: flex-end; gap: .5rem; height: 130px; padding-top: 6px; }
.hr-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.hr-col-val { font-size: var(--hs-fs-xs); font-weight: 700; color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.hr-col-fill { width: 62%; max-width: 34px; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--hs-primary); }
/* Luna fără angajări: o linie, nu o coloană — altfel „0" pare o valoare mică, nu zero. */
.hr-col--zero .hr-col-fill { background: var(--hs-line-strong); }
.hr-col--zero .hr-col-val { color: var(--hs-subtle); font-weight: 500; }
.hr-col-lbl { font-size: var(--hs-fs-2xs); color: var(--hs-subtle); text-transform: uppercase; letter-spacing: .05em; }

/* Zile rămase până la o expirare: sub 15 zile e o problemă, nu o informație. */
.hr-att-days {
    display: inline-block;
    min-width: 46px;
    text-align: center;
    padding: .12rem .45rem;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: var(--hs-fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.hr-att-days--warn { background: var(--hs-warn-bg); color: var(--hs-warn-fg); border-color: var(--hs-warn-br); }
.hr-att-days--soon { background: var(--hs-bad-bg);  color: var(--hs-bad-fg);  border-color: var(--hs-bad-br); }
.hr-att-days--ok   { background: var(--hs-good-bg); color: var(--hs-good-fg); border-color: var(--hs-good-br); }

/* Starea goală: text normal, nu italic — nu e o notă de subsol, e conținutul. */
.hr-empty-soft,
.hr-empty { padding: 2.25rem 1rem; text-align: center; color: var(--hs-muted); font-style: normal; font-size: var(--hs-fs-md); }
.hr-empty i { display: block; font-size: 1.6rem; color: var(--hs-subtle); margin-bottom: .5rem; }
.hr-empty--ok i { color: var(--hs-good-fg); }

/* ---- Antetul fișei de angajat ---- */
.hr-prof {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1rem 1.15rem;
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: 6px;
    box-shadow: var(--hs-shadow-sm);
    flex-wrap: wrap;
}
.hr-prof__avatar {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    background: var(--hs-primary);
    box-shadow: none;
}
.hr-prof__id { flex: 1 1 240px; min-width: 0; }
.hr-prof__name { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--hs-text); line-height: 1.15; }
.hr-prof__meta { color: var(--hs-muted); font-size: var(--hs-fs-md); margin-top: 3px; display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; }
.hr-prof__meta a { color: var(--hs-muted); text-decoration: none; }
.hr-prof__meta a:hover { color: var(--hs-primary); }
.hr-prof__kpis { display: flex; gap: 1.4rem; align-items: center; padding-left: .5rem; }
.hr-prof__kpi { display: flex; flex-direction: column; }
.hr-prof__kpi b { font-size: 1.05rem; font-weight: 700; color: var(--hs-ink); font-variant-numeric: tabular-nums; }
.hr-prof__kpi span { font-size: var(--hs-fs-2xs); text-transform: uppercase; letter-spacing: .06em; color: var(--hs-subtle); font-weight: 600; margin-top: 2px; }
@media (max-width: 767px) { .hr-prof__kpis { padding-left: 0; gap: 1rem; } }

/* ---- Cronologia angajatului ---- */
.hr-timeline { position: relative; padding: .3rem 0 .3rem 2rem; }
.hr-timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--hs-line); }
.hr-tl-item { position: relative; padding: 0 0 1.05rem 0; }
.hr-tl-item:last-child { padding-bottom: 0; }
.hr-tl-dot {
    position: absolute;
    left: -1.72rem;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    box-shadow: 0 0 0 3px var(--hs-surface);
}
/* Punctele cronologiei: fundal deschis + iconiță închisă, ca restul etichetelor
   de stare — nu cinci pastile pline în culori pure pe aceeași coloană. */
.hr-tl-dot.navy  { background: var(--hs-brand-bg);   color: var(--hs-brand-fg); }
.hr-tl-dot.blue  { background: var(--hs-info-bg);    color: var(--hs-info-fg); }
.hr-tl-dot.green { background: var(--hs-good-bg);    color: var(--hs-good-fg); }
.hr-tl-dot.amber { background: var(--hs-warn-bg);    color: var(--hs-warn-fg); }
.hr-tl-dot.red   { background: var(--hs-bad-bg);     color: var(--hs-bad-fg); }
.hr-tl-date { font-size: var(--hs-fs-2xs); text-transform: uppercase; letter-spacing: .05em; color: var(--hs-subtle); font-weight: 600; }
.hr-tl-title { font-size: var(--hs-fs-lg); font-weight: 700; color: var(--hs-ink); margin: 1px 0; }
.hr-tl-text { font-size: var(--hs-fs-md); color: var(--hs-muted); }

/* ============================================================================
   Componente noi, scopate pe `.hr-board`
   ========================================================================== */

.hr-board .hs-card,
.hr-board .card {
    border-radius: 6px;
    box-shadow: 0 1px 1px rgba(16, 24, 40, .03), 0 1px 3px rgba(16, 24, 40, .04);
}
/* Indicatorii: aceeași componentă ca în restul aplicației. Banda veche era un rând
   flex în care etichetele lungi ieșeau din cutia lor și se lipeau de vecin
   („ANGAJAȚI ACTIVICONTRACTE ACTIVE"); un grid cu coloane egale nu poate face asta. */
.hr-board .hs-stat { border-radius: 6px; padding: .8rem .95rem; }
.hr-board .hs-stat__icon { width: 36px; height: 36px; border-radius: 8px; }
.hr-board .hs-stat__val { font-size: 1.5rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.hr-board .hs-stat__lbl { font-size: var(--hs-fs-2xs); letter-spacing: .06em; }
.hr-stat__unit { font-size: var(--hs-fs-sm); font-weight: 600; color: var(--hs-subtle); margin-left: .15rem; }

/* Antet de card: titlu discret la stânga, context sau acțiune la dreapta. */
.hr-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: .85rem;
}
.hr-head__title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
    font-size: var(--hs-fs-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-muted);
}
.hr-head__title i { color: var(--hs-subtle); font-size: 14px; }
.hr-head__meta { font-size: var(--hs-fs-sm); color: var(--hs-subtle); font-variant-numeric: tabular-nums; }

/* Tabele: aceeași densitate ca în piese și financiar. */
.hr-board table.table-enterprise thead th {
    font-size: var(--hs-fs-2xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hs-subtle);
    font-weight: 600;
    padding-top: .5rem;
    padding-bottom: .5rem;
    white-space: nowrap;
}
.hr-board table.table-enterprise tbody td { padding-top: .45rem; padding-bottom: .45rem; }
.hr-name { font-weight: 600; color: var(--hs-ink); }
.hr-sub { display: block; font-size: var(--hs-fs-xs); color: var(--hs-subtle); }
.hr-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hr-num--strong { font-weight: 700; color: var(--hs-ink); }
.hr-board table.table-enterprise tfoot td,
.hr-board table.table-enterprise tfoot th {
    background: var(--hs-surface-alt);
    border-top: 2px solid var(--hs-line-strong) !important;
    font-weight: 700;
    color: var(--hs-ink);
}

/* ---- Etichete de stare: o singură familie pentru tot modulul ----
   Concedii, pontaj, salarizare și medical foloseau fiecare pastilele Bootstrap
   proprii (success/warning/danger/secondary, uneori cu contur, uneori fără). */
.hr-badge {
    display: inline-block;
    padding: .16em .5em;
    border-radius: 4px;
    border: 1px solid var(--hs-neutral-br);
    background: var(--hs-neutral-bg);
    color: var(--hs-neutral-fg);
    font-size: var(--hs-fs-xs);
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}
.hr-badge--info  { background: var(--hs-info-bg);  color: var(--hs-info-fg);  border-color: var(--hs-info-br); }
.hr-badge--brand { background: var(--hs-brand-bg); color: var(--hs-brand-fg); border-color: var(--hs-brand-br); }
.hr-badge--good  { background: var(--hs-good-bg);  color: var(--hs-good-fg);  border-color: var(--hs-good-br); }
.hr-badge--warn  { background: var(--hs-warn-bg);  color: var(--hs-warn-fg);  border-color: var(--hs-warn-br); }
.hr-badge--bad   { background: var(--hs-bad-bg);   color: var(--hs-bad-fg);   border-color: var(--hs-bad-br); }
/* Starea obișnuită se scrie, nu se colorează. */
.hr-badge--quiet { background: transparent; border-color: transparent; color: var(--hs-muted); font-weight: 500; }

/* ---- Punctele de intrare din dashboard ----
   Erau patru iconițe în patru culori pline (albastru, chihlimbar, verde, mov) —
   culoarea nu spunea nimic, doar decora. O singură familie, iar diferența o fac
   iconița și eticheta. */
.hr-hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.hr-hub__card {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .75rem .85rem;
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: 6px;
    box-shadow: var(--hs-shadow-xs);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.hr-hub__card:hover { border-color: var(--hs-brand-br); box-shadow: var(--hs-shadow-sm); }
.hr-hub__ic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 8px;
    background: var(--hs-brand-bg);
    color: var(--hs-primary);
    font-size: 16px;
}
.hr-hub__title { font-weight: 600; color: var(--hs-ink); font-size: var(--hs-fs-lg); }
.hr-hub__desc { font-size: var(--hs-fs-xs); color: var(--hs-muted); }
.hr-hub__card:hover .hr-hub__title { color: var(--hs-primary); }

/* ---- Bara de filtre (perioadă, căutare) ---- */
.hr-filters {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .7rem .9rem;
    background: var(--hs-surface);
    border: 1px solid var(--hs-line);
    border-radius: 6px;
    box-shadow: var(--hs-shadow-xs);
}
.hr-filters__field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.hr-filters__lbl {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle);
}
.hr-filters__field .form-control,
.hr-filters__field .form-select { width: 9.5rem; }
.hr-filters__spacer { flex: 1 1 auto; }
.hr-filters > .btn { margin-left: .35rem; }

/* ---- Segmented control pentru filtrele de stare (concedii, notificări) ---- */
.hr-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--hs-surface-alt);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius);
}
.hr-tabs__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .7rem;
    border-radius: var(--hs-radius-sm);
    font-size: var(--hs-fs-md);
    font-weight: 600;
    color: var(--hs-muted);
    text-decoration: none;
    white-space: nowrap;
}
.hr-tabs__link:hover { color: var(--hs-primary); background: var(--hs-primary-soft); }
/* `is-active` pentru linkuri (concedii, filtre pe URL), `active` pentru butoanele de tab —
   Bootstrap comuta clasa lui, deci trebuie sa raspunda la amandoua. */
.hr-tabs__link.is-active,
.hr-tabs__link.active {
    color: var(--hs-primary);
    background: var(--hs-surface);
    box-shadow: var(--hs-shadow-xs);
    border: 1px solid var(--hs-brand-br);
    padding: calc(.35rem - 1px) calc(.7rem - 1px);
}
/* Contorul din pastilă: câte cereri așteaptă în starea asta. */
.hr-tabs__n {
    min-width: 1.25rem;
    padding: 0 .3em;
    border-radius: 999px;
    background: var(--hs-neutral-bg);
    border: 1px solid var(--hs-neutral-br);
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.hr-tabs__link.is-active .hr-tabs__n,
.hr-tabs__link.active .hr-tabs__n { background: var(--hs-brand-bg); border-color: var(--hs-brand-br); color: var(--hs-brand-fg); }
/* Butonul de tab e un <button>: fara conturul si fundalul implicite de buton. */
.hr-tabs button.hr-tabs__link { border: 1px solid transparent; background: transparent; }
.hr-tabs button.hr-tabs__link.active { background: var(--hs-surface); border-color: var(--hs-brand-br); }

/* ---- Coloana de formular ----
   Formularele de adăugare (pontaj, perioadă de salarizare) stau lângă listă, ca
   un panou de lucru; primesc antet propriu, ca să nu pară un card orfan. */
.hr-form .form-label {
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--hs-subtle);
    margin-bottom: .2rem;
}
.hr-form .form-control,
.hr-form .form-select { font-size: var(--hs-fs-md); }
.hr-form__row + .hr-form__row { margin-top: .65rem; }
/* Butonul de trimitere închide panoul, despărțit de câmpuri printr-o linie. */
.hr-form__foot { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--hs-line-soft); }

/* ---- Nota de subsol / avertisment ---- */
.hr-note {
    display: flex;
    align-items: flex-start;
    gap: .4rem;
    margin: .9rem 0 0;
    font-size: var(--hs-fs-xs);
    line-height: 1.55;
    color: var(--hs-muted);
}
.hr-note i { color: var(--hs-subtle); margin-top: .1rem; }
/* Avertismentul de sus (parametri fiscali de test): serios, dar nu galben strident. */
.hr-warnbar {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding: .6rem .85rem;
    margin-bottom: 1rem;
    background: var(--hs-warn-bg);
    border: 1px solid var(--hs-warn-br);
    border-radius: 6px;
    color: var(--hs-warn-fg);
    font-size: var(--hs-fs-md);
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    .hr-board .hs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .hr-board .hs-stats { grid-template-columns: 1fr; }
    .hr-tabs { display: flex; width: 100%; }
    .hr-tabs__link { flex: 1 1 0; justify-content: center; }
    .hr-filters__field .form-control,
    .hr-filters__field .form-select { width: 100%; }
}

/* Numarul de coloane al benzii de indicatori se alege dupa cate sunt, ca ultimul rand
   sa fie plin (vezi hr/_partials/_kpi_band.html.twig). */
.hr-board .hs-stats.hr-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hr-board .hs-stats.hr-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-board .hs-stats.hr-stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Cardul care incheie un grid de doua coloane cu numar impar de elemente. */
.hr-dash-grid__wide { grid-column: 1 / -1; }
@media (max-width: 991.98px) {
    .hr-board .hs-stats.hr-stats--3,
    .hr-board .hs-stats.hr-stats--4,
    .hr-board .hs-stats.hr-stats--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .hr-board .hs-stats.hr-stats--3,
    .hr-board .hs-stats.hr-stats--4,
    .hr-board .hs-stats.hr-stats--5 { grid-template-columns: 1fr; }
}

/* ============================================================================
   HR — culoarea ca semnal de stare
   ----------------------------------------------------------------------------
   Prima trecere pe layout enterprise a scos toată culoarea din modul, ca reacție
   la cele patru iconițe decorative (albastru/chihlimbar/verde/mov, rotite după
   poziție, fără nicio legătură cu conținutul). Rezultatul a fost prea șters.

   Culoarea se întoarce, dar codifică STAREA, nu categoria, și e aceeași în tot
   modulul:
     navy       — personal, structură, valoarea de referință
     verde      — aprobat, activ, în regulă
     chihlimbar — în așteptare, expiră curând, cere atenție
     roșu       — respins, restant, expirat

   Tonurile vin din paleta semantică `--hs-*-bg/fg/br`: fundal deschis + text
   închis, nu pastile pline. Un ecran de lucru trebuie să rămână citibil când zece
   rânduri poartă zece stări.
   ========================================================================== */

/* Variante semantice pentru emblema indicatorilor. `--warn` și `--mute` existau;
   restul lipseau, de aceea totul ajunsese navy sau gri.

   Emblemele sunt PLINE, cu iconiță albă: pe un pătrat de 36px, un fundal pastelat cu
   iconiță colorată aproape nu se vede. Umplerile vin din tokenii `--hs-*-solid` —
   versiunile temperate ale semanticelor, gândite tocmai pentru butoane și pastile pline
   (verdele Bootstrap #198754 ar striga pe un ecran de lucru; #1f6b4d nu). */
.hr-board .hs-stat__icon { color: #fff; }
.hr-board .hs-stat__icon--brand { background: var(--hs-primary); }
.hr-board .hs-stat__icon--info  { background: var(--hs-info-fg); }
.hr-board .hs-stat__icon--good  { background: var(--hs-good-solid); }
.hr-board .hs-stat__icon--bad   { background: var(--hs-bad-solid); }
.hr-board .hs-stat__icon--warn  { background: var(--hs-warn-solid); }
/* „Mute" rămâne stins: e context, nu semnal. */
.hr-board .hs-stat__icon--mute  { background: var(--hs-neutral-bg); color: var(--hs-subtle); }

/* Cifra se colorează DOAR când e o problemă: cereri neaprobate, expirări, restanțe.
   Dacă s-ar colora și „în regulă", verdele ar deveni la fel de tare ca roșul și
   ochiul n-ar mai ști unde să se uite. */
.hr-stat--bad .hs-stat__val { color: var(--hs-bad-fg); }
.hr-stat--warn .hs-stat__val { color: var(--hs-warn-fg); }
/* Indicatorul cu probleme primește și un contur, ca să se decupeze de vecini. */
.hr-stat--bad { border-color: var(--hs-bad-br); }
.hr-stat--warn { border-color: var(--hs-warn-br); }

/* Punctele de intrare: fiecare destinație are tonul ei, ca să fie recunoscută din
   ochi după prima folosire. Aici culoarea e ajutor de orientare, nu decor — de
   aceea rămâne din aceeași paletă temperată, nu culori pure ca înainte. */
.hr-hub__ic { color: #fff; }
.hr-hub__ic--brand { background: var(--hs-primary); }
.hr-hub__ic--info  { background: var(--hs-info-fg); }
.hr-hub__ic--good  { background: var(--hs-good-solid); }
.hr-hub__ic--warn  { background: var(--hs-warn-solid); }
/* Bara de accent din stânga: la hover, cardul își arată tonul pe toată înălțimea. */
.hr-hub__card { position: relative; overflow: hidden; }
.hr-hub__card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: currentColor;
    opacity: 0;
    transition: opacity .15s ease;
}
.hr-hub__card:hover::before { opacity: 1; }
/* Tonul stă pe card, nu se deduce din copil cu `:has()`: selectorul e suportat abia din
   Chrome 105, iar bara de accent ar dispărea tăcut pe browsere mai vechi. */
.hr-hub__card--brand { color: var(--hs-brand-fg); }
.hr-hub__card--info  { color: var(--hs-info-fg); }
.hr-hub__card--good  { color: var(--hs-good-fg); }
.hr-hub__card--warn  { color: var(--hs-warn-fg); }
/* Textul nu moștenește tonul cardului — doar bara de accent îl folosește. */
.hr-hub__title { color: var(--hs-ink); }
.hr-hub__desc { color: var(--hs-muted); }

/* Valoarea dintr-un tabel care semnalează ceva: ore suplimentare, zile de
   angajator, sume restante. Culoare pe cifră, fără fundal — rândul rămâne calm. */
.hr-val--warn { color: var(--hs-warn-fg); font-weight: 700; }
.hr-val--bad  { color: var(--hs-bad-fg);  font-weight: 700; }
.hr-val--good { color: var(--hs-good-fg); font-weight: 700; }

/* Barele graficelor primesc tonul seriei, nu un navy uniform. */
.hr-bar-fill--good { background: var(--hs-good-fg); }
.hr-bar-fill--warn { background: var(--hs-warn-fg); }

/* ============================================================================
   ISTORIC ACȚIUNI pe o linie din „Necesar piese" (#modal_part_history)

   Un jurnal de audit se citește altfel decât un formular: multe rânduri scurte, comparate
   între ele pe verticală. De aici alegerile — o treaptă de font mai jos decât restul
   dialogurilor (12px în celule, 11px la metadate), timestamp cu cifre de lățime egală ca
   orele să se alinieze în coloană, și culoarea folosită DOAR ca semnal de stare pe o bară
   de 3px în stânga rândului, nu pe fundalul lui.

   Vezi templates/_part_request_history_modal.html.twig.
   ============================================================================ */
#modal_part_history .modal-content,
#modal_sheet_status_history .modal-content { font-size: var(--hs-fs-sm); }
#modal_part_history .modal-title,
#modal_sheet_status_history .modal-title { font-size: .9rem; }
#modal_part_history .modal-body { padding: .8rem; }

/* ---- Banda de identificare a piesei ---- */
.ph-ident {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .6rem .85rem;
}
.ph-ident__main { min-width: 0; }
.ph-ident__code {
    display: block;
    font-size: var(--hs-fs-xs);
    color: var(--hs-muted);
    letter-spacing: .02em;
}
.ph-ident__name {
    display: block;
    font-size: var(--hs-fs-md);
    font-weight: 600;
    color: var(--hs-ink);
    line-height: 1.35;
}

/* Cele trei cifre de context (câte acțiuni, prima, ultima): etichetă mică deasupra valorii,
   ca într-o bandă de KPI — se citesc fără să fie nevoie de o propoziție. */
.ph-meta { display: flex; gap: 1.35rem; margin: 0; }
.ph-meta dt {
    font-size: var(--hs-fs-2xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--hs-muted);
    line-height: 1;
    margin-bottom: 3px;
}
.ph-meta dd {
    margin: 0;
    font-size: var(--hs-fs-sm);
    font-weight: 600;
    color: var(--hs-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- Tabelul jurnalului ---- */
.ph-table { --bs-table-bg: transparent; }
.ph-table > thead > tr > th {
    padding: .45rem .7rem;
    background: var(--hs-surface-alt);
    border-bottom: 1px solid var(--hs-line);
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hs-muted);
    white-space: nowrap;
}
.ph-table > tbody > tr > td {
    padding: .45rem .7rem;
    border-top: 1px solid var(--hs-line-soft);
    border-bottom: 0;
    color: var(--hs-text-soft);
    vertical-align: top;
}
.ph-table > tbody > tr:first-child > td { border-top: 0; }
/* Rândul anulat rămâne în jurnal (append-only), dar iese din prim-plan. */
.ph-table > tbody > tr.ph-row--void > td { color: var(--hs-muted); }

/* Data pe primul rând, ora dedesubt: coloana rămâne îngustă și scanabilă. */
.ph-when { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ph-when__d { display: block; color: var(--hs-ink); font-weight: 600; }
.ph-when__t { display: block; font-size: var(--hs-fs-xs); color: var(--hs-muted); }

/* Semnalul de stare: bară de 3px pe marginea celulei de acțiune. Ține locul unui badge
   colorat pe fiecare rând — la 10 rânduri, badge-urile ar fi făcut tabelul un vitraliu. */
.ph-act { position: relative; padding-left: 1rem !important; }
.ph-act::before {
    content: '';
    position: absolute;
    left: .25rem;
    top: .5rem;
    bottom: .5rem;
    width: 3px;
    border-radius: 2px;
    background: var(--hs-line-strong);
}
.ph-act--ok::before   { background: var(--hs-good-fg); }
.ph-act--bad::before  { background: var(--hs-bad-fg); }
.ph-act--info::before { background: var(--hs-info-fg); }
.ph-act--warn::before { background: var(--hs-warn-fg); }
.ph-act__label { font-weight: 600; color: var(--hs-ink); }
.ph-row--void .ph-act__label { font-weight: 500; color: var(--hs-muted); }
/* Cantitatea și motivul/furnizorul: subordonate etichetei, nu în competiție cu ea. */
.ph-act__meta { display: block; font-size: var(--hs-fs-xs); color: var(--hs-muted); margin-top: 1px; }

.ph-who { color: var(--hs-text-soft); }
.ph-term { font-size: var(--hs-fs-xs); color: var(--hs-muted); font-variant-numeric: tabular-nums; }

/* ---- Stările care înlocuiesc tabelul ---- */
.ph-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1.6rem .9rem;
    font-size: var(--hs-fs-sm);
    color: var(--hs-muted);
}
.ph-state i { font-size: 1.1rem; opacity: .55; }
.ph-state--error { color: var(--hs-bad-fg); }

.ph-foot-note { font-size: var(--hs-fs-xs); color: var(--hs-muted); }

/* ============================================================================
   DETALII DOCUMENT (.modal-doc-detail) — modal imbricat peste modalul fișei.

   Folosit de „Detalii deviz" (#modal_estimate_detail) și de „Detalii document" din Facturare
   (#modal_invoice_detail): sunt același fel de ecran — un document, liniile lui, jurnalul lui
   și acțiunile lui — deci împart un singur set de stiluri, `.doc-detail*`.

   Documentul se citește pe secțiuni („cine/ce/cât", liniile, jurnalul, acțiunile), fiecare în
   panoul alb standard (.ws-panel). O treaptă de font sub restul dialogurilor, ca la istoricul
   de piese: sunt multe rânduri scurte, comparate pe verticală.

   Vezi templates/sheet/_estimate_detail.html.twig.
   ============================================================================ */
.modal-doc-detail .modal-content { font-size: var(--hs-fs-sm); }
.modal-doc-detail .modal-title { font-size: .9rem; }
.modal-doc-detail .modal-body { padding: .8rem; }

/* Cadru: 75% din fereastra, nu treptele Bootstrap (`modal-xl` = 1140px fix). Documentul are
   doua coloane si un tabel cu sase coloane de cifre; pe un ecran lat, 1140px lasa jurnalul
   inghesuit, iar pe unul ingust `modal-xl` ar depasi fereastra. Specificitate pe doua clase,
   ca sa bata `.modal-dialog` din Bootstrap (incarcat DUPA app.css). */
.modal-dialog.modal-doc-detail {
    width: 75vw;
    max-width: 75vw;
}
/* Sub 1200px, doua coloane inghesuie liniile: modalul creste catre toata latimea, iar grila
   de mai jos trece pe o coloana. */
@media (max-width: 1200px) {
    .modal-dialog.modal-doc-detail { width: 94vw; max-width: 94vw; }
}

/* ---- Doua coloane: documentul (larg) + jurnalul (ingust), actiunile pe toata latimea ---- */
.doc-detail__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: .8rem;
    align-items: start;
}
.doc-detail__main { min-width: 0; }
/* `min-width: 0` pe ambele: fara el, tabelul de linii refuza sa se micsoreze si impinge
   coloana jurnalului in afara grilei. */
.doc-detail__side { min-width: 0; }
.doc-detail__side .ws-panel { margin-bottom: 0; }
/* Bara de actiuni: al treilea copil al grilei, pe ambele coloane. */
.doc-detail__cols > .doc-detail__actions { grid-column: 1 / -1; }

@media (max-width: 1200px) {
    .doc-detail__cols { grid-template-columns: minmax(0, 1fr); }
    .doc-detail__cols > .doc-detail__actions { grid-column: auto; }
}

/* Jurnalul poate avea zeci de intrari: deruleaza in panoul lui, ca sa nu intinda modalul si
   sa nu impinga actiunile sub linia de vizibilitate. */
.doc-detail__log .doc-detail__timeline {
    max-height: 52vh;
    overflow-y: auto;
}
/* Capul jurnalului tine si butonul de reimprospatare, impins in dreapta. `ws-panel-head` e
   bloc, deci flex-ul se pune doar aici, nu pe toate capetele de panou. */
.doc-detail__loghead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
/* Butonul de reimprospatare, generic: jurnalele documentelor, „Istoric generari" si tab-urile
   lazy din „Detalii piesa". Merge oriunde intr-un cap de sectiune deja flex. */
.hs-refresh {
    border: 0;
    background: none;
    padding: 0 .15rem;
    line-height: 1;
    color: var(--hs-muted);
    cursor: pointer;
}
.hs-refresh:hover { color: var(--hs-primary, #134a6d); }
.hs-refresh:disabled { cursor: default; opacity: .65; }
/* Cat timp cererea e in aer, iconita se roteste — panoul ramane pe ecran cu datele vechi.
   Acelasi semn si pe butoanele de reimprospatare scrise ca `.btn` (listele din modulul SMS):
   fara el, o reincarcare de 150 ms nu schimba nimic pe ecran si butonul pare mort. */
.hs-refresh.is-busy i,
.btn.is-busy i {
    display: inline-block;
    animation: doc-detail-spin .8s linear infinite;
}
@keyframes doc-detail-spin { to { transform: rotate(360deg); } }

/* Tab-ul „Stoc" din „Detalii piesa" n-are un cap de sectiune unic in care sa intre butonul —
   situatia e compusa din mai multe carduri — deci primeste o bara proprie deasupra lor. */
.pd-refreshbar { display: flex; justify-content: flex-end; margin-bottom: .5rem; }

/* Val de incarcare, refolosibil: gazda primeste `hs-veil`, iar JS-ul comuta `is-loading` cat
   tine cererea. Il folosesc jurnalele reimprospatate prin AJAX — „Detalii deviz", „Detalii
   document" si „Istoric generari" din tab-ul „Fisa client".

   Continutul vechi ramane dedesubt (nu se goleste lista): daca cererea esueaza, se ridica valul
   si jurnalul e tot acolo. Valul si spinnerul sunt pseudo-elemente, ca sa nu trebuiasca inserat
   si scos nod din DOM — la reusita panoul e oricum inlocuit cu totul. Valul blocheaza si
   clicurile pe randurile de dedesubt cat timp se incarca. */
.hs-veil { position: relative; }
/* Cat tine incarcarea, gazda nu are voie sa fie mai scunda decat spinnerul: un jurnal cu o
   singura intrare (sau gol) l-ar taia. */
.hs-veil.is-loading { min-height: 48px; }
.hs-veil.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .65);
    border-radius: inherit;
    z-index: 2;
}
.hs-veil.is-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border: 2px solid var(--hs-line, #e4e7ec);
    border-top-color: var(--hs-primary, #134a6d);
    border-radius: 50%;
    animation: doc-detail-spin .7s linear infinite;
    z-index: 3;
}
.doc-detail__logcount {
    display: inline-block;
    margin-left: .35rem;
    padding: 0 .3rem;
    border-radius: 4px;
    background: var(--hs-surface-alt);
    border: 1px solid var(--hs-line);
    color: var(--hs-muted);
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
}

/* ---- Codul devizului în listă: buton propriu, separat de chevron ---- */
.sv-est-doc { display: inline-flex; align-items: center; gap: .35rem; }
.sv-est-code-btn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--hs-primary);
    font-weight: 600;
    font-size: var(--hs-fs-md);
}
.sv-est-code-btn:hover .sv-est-code { text-decoration: underline; }

/* ---- Banda de identificare: cod + stare, apoi cifrele documentului ---- */
.doc-detail__ident {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .6rem .85rem;
}
.doc-detail__idmain { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.doc-detail__code { font-size: var(--hs-fs-lg); font-weight: 700; color: var(--hs-ink); }
.doc-detail__resp { font-size: var(--hs-fs-xs); color: var(--hs-muted); }

.doc-detail__meta { display: flex; gap: 1.35rem; margin: 0; flex-wrap: wrap; }
.doc-detail__meta dt {
    font-size: var(--hs-fs-2xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--hs-muted);
    line-height: 1;
    margin-bottom: 3px;
}
.doc-detail__meta dd {
    margin: 0;
    font-size: var(--hs-fs-sm);
    font-weight: 600;
    color: var(--hs-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Totalul e cifra pentru care se deschide documentul: o treaptă mai mare, în culoarea mărcii. */
.doc-detail__meta--total dd { font-size: var(--hs-fs-lg); color: var(--hs-primary); }

/* ---- Fișa și aparatul: etichetă deasupra valorii, patru celule ---- */
.doc-detail__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .6rem .9rem;
    padding: .7rem .85rem;
}
.doc-detail__lbl {
    display: block;
    font-size: var(--hs-fs-2xs);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-weight: 700;
    color: var(--hs-muted);
    margin-bottom: 2px;
}
.doc-detail__val { display: block; font-size: var(--hs-fs-sm); color: var(--hs-ink); font-weight: 600; }

/* ---- Liniile documentului ---- */
.doc-detail__lines { --bs-table-bg: transparent; }
.doc-detail__lines > thead > tr > th {
    padding: .4rem .7rem;
    background: var(--hs-surface-alt);
    border-bottom: 1px solid var(--hs-line);
    font-size: var(--hs-fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hs-muted);
    white-space: nowrap;
}
.doc-detail__lines > tbody > tr > td {
    padding: .4rem .7rem;
    border-top: 1px solid var(--hs-line-soft);
    border-bottom: 0;
    color: var(--hs-text-soft);
    font-variant-numeric: tabular-nums;
}
.doc-detail__lines > tfoot > tr > td {
    padding: .45rem .7rem;
    border-top: 1px solid var(--hs-line);
    background: var(--hs-surface-alt);
    color: var(--hs-ink);
}
.doc-detail__ico { color: var(--hs-subtle); margin-right: .35rem; }
.doc-detail__sub { font-size: var(--hs-fs-xs); color: var(--hs-muted); }
/* Pretul din catalog, pe linia corectata manual la emiterea devizului: ramane vizibil, taiat,
   ca diferenta fata de oferta sa se vada pe document, nu doar in jurnalul de audit. */
.doc-detail__oldprice {
    margin-right: .35rem;
    color: var(--hs-subtle);
    text-decoration: line-through;
    font-size: var(--hs-fs-xs);
    font-variant-numeric: tabular-nums;
}
.doc-detail__edited { margin-left: .3rem; color: var(--hs-primary); font-size: 11px; }

.doc-detail__obs { padding: .7rem .85rem; color: var(--hs-text-soft); white-space: pre-line; }

/* Bara de incarcare a dovezii de plata (proforma): fisier + mentiune + buton, pe un rand.
   Sub 700px trece pe doua randuri — campul de fisier are latime proprie in mobile. */
.doc-detail__proof-add {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .55rem .85rem;
    border-bottom: 1px solid var(--hs-line-soft);
}
.doc-detail__proof-add input[type="file"] { flex: 1 1 260px; min-width: 0; }
.doc-detail__proof-add input[type="text"] { flex: 1 1 200px; min-width: 0; }

/* Incasarile: un rand per chitanta — suma la dreapta, acțiunile ei la capat. */
.doc-detail__receipt {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .45rem .85rem;
    border-top: 1px solid var(--hs-line-soft);
}
.doc-detail__receipt:first-of-type { border-top: 0; }
.doc-detail__receipt-main { flex: 1 1 auto; min-width: 0; }
.doc-detail__receipt-main b { font-size: var(--hs-fs-sm); color: var(--hs-ink); }
.doc-detail__receipt-amount {
    font-weight: 700;
    color: var(--hs-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.doc-detail__receipt-acts { display: inline-flex; gap: .25rem; flex: 0 0 auto; }

/* ---- Jurnalul: cronologie cu bulină pe linia verticală ---- */
.doc-detail__timeline { list-style: none; margin: 0; padding: .7rem .85rem .7rem 1.6rem; }
.doc-detail__timeline li {
    position: relative;
    padding: 0 0 .55rem .9rem;
    border-left: 1px solid var(--hs-line);
}
.doc-detail__timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
.doc-detail__timeline li::before {
    content: '';
    position: absolute;
    left: -4px;
    top: .35rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--hs-primary);
}
.doc-detail__timeline li.is-canceled { color: var(--hs-muted); }
.doc-detail__timeline li.is-canceled::before { background: var(--hs-line-strong); }
.doc-detail__when { display: block; font-size: var(--hs-fs-xs); color: var(--hs-muted); font-variant-numeric: tabular-nums; }
.doc-detail__what { font-size: var(--hs-fs-sm); font-weight: 600; color: var(--hs-ink); }
.doc-detail__note { display: block; font-size: var(--hs-fs-xs); color: var(--hs-muted); }
.doc-detail__who { display: inline-flex; align-items: center; gap: .25rem; flex-wrap: wrap; font-size: var(--hs-fs-xs); color: var(--hs-muted); }
.doc-detail__ip { color: var(--hs-subtle); }
/* In coloana ingusta, numele si IP-ul nu incap pe acelasi rand: IP-ul coboara sub el. */
.doc-detail__side .doc-detail__ip { display: block; width: 100%; }
.doc-detail__side .doc-detail__timeline { padding-left: 1.4rem; }
.doc-detail__side .doc-detail__what { display: block; }

/* ---- Acțiunile: bară proprie, lipită de fundalul gri al corpului ---- */
.doc-detail__actions {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    padding: .7rem .1rem 0;
}
.doc-detail__ask { font-size: var(--hs-fs-xs); color: var(--hs-muted); margin-left: .2rem; }

/* Banda de arhiva: documentul e fotografiat, deci PDF-ul nu se mai recompune. Ton neutru-bun,
   nu verde plin — e o stare normala a documentului, nu o reusita de sarbatorit. */
.doc-detail__archive {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-bottom: .8rem;
    padding: .5rem .85rem;
    background: var(--hs-good-bg);
    border: 1px solid var(--hs-good-br);
    border-radius: var(--hs-radius-sm);
    color: var(--hs-good-fg);
    font-size: var(--hs-fs-sm);
}
.doc-detail__archive i { margin-top: .1rem; }
.doc-detail__archive strong { font-weight: 700; }
.doc-detail__archive .doc-detail__note { color: inherit; opacity: .8; }

/* ---- Stări (încărcare / eroare / gol) ---- */
.doc-detail__state,
.doc-detail__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: 1.6rem .9rem;
    font-size: var(--hs-fs-sm);
    color: var(--hs-muted);
}
.doc-detail__empty i,
.doc-detail__state i { font-size: 1.1rem; opacity: .55; }
.doc-detail__state--error { color: var(--hs-bad-fg); }
.doc-detail__state--error i { opacity: 1; }

/* ==========================================================================
   MODULUL SMS — completări pentru interfața refăcută (2026-08-29)
   ========================================================================== */

/* Semnul de întrebare/informație de lângă etichete. Poartă tooltip-ul cu explicația
   completă (lib/tooltips.js), deci trebuie să arate „apăsabil", fără să fure atenția. */
.hs-tip {
    font-size: .8em;
    color: var(--hs-subtle, #98a2b3);
    cursor: help;
    vertical-align: baseline;
    margin-left: .25rem;
}
.hs-tip:hover { color: var(--hs-primary, #134a6d); }

/* Bara de filtre așezată ÎN interiorul unui panou (nu în antetul cardului): aceleași
   controale, dar cu chenar de separare față de tabelul de dedesubt. */
.hs-filters--inset {
    padding: .6rem .75rem 0;
    border-bottom: 1px solid var(--hs-border, #e4e7ec);
    background: var(--hs-surface-2, #fafbfc);
}
.hs-filters--inset .hs-filters__chips { padding-bottom: .55rem; }

/* Contorul de sub câmpul de mesaj: caractere, număr de SMS-uri, avertisment de diacritice. */
.sms-counter { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.sms-counter__sep { opacity: .4; }
.sms-counter__warn { color: #b58105; display: inline-flex; align-items: center; gap: .25rem; }
.sms-counter__warn i { font-size: .9em; }

/* Legenda stărilor de sub lista de mesaje trimise. */
.sms-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    margin-top: .6rem;
    font-size: var(--hs-fs-xs, 11px);
    color: var(--hs-subtle, #98a2b3);
}
.sms-legend > span { display: inline-flex; align-items: center; gap: .3rem; cursor: help; }

/* ==========================================================================
   CENTRUL DE ALERTE — banda de triaj (/alert)
   ========================================================================== */

/* Opt categorii nu încap decent pe grid-ul fix de 4 coloane al `.hs-stats`: tile-urile devin
   late și goale pe două rânduri. Aici se așază singure, cât încap pe lățimea ecranului. */
.hs-stats--triage { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: .6rem; }
.hs-stats--triage .hs-stat { padding: .6rem .7rem; gap: .55rem; }
.hs-stats--triage .hs-stat__icon { width: 32px; height: 32px; border-radius: 8px; font-size: 14px; }
.hs-stats--triage .hs-stat__val { font-size: 1.05rem; }
.hs-stats--triage .hs-stat__lbl { letter-spacing: .03em; }

/* Categoria fără nimic de rezolvat rămâne vizibilă, dar nu mai concurează vizual cu cele
   pline: un zero afișat la fel de apăsat ca un 40 face banda ilizibilă. */
.hs-stat.is-quiet { background: #fbfcfd; }
.hs-stat.is-quiet .hs-stat__val { color: #b7c0cc; }
.hs-stat.is-quiet .hs-stat__icon { background: #f2f4f7; color: #b7c0cc; }
.hs-stat.is-quiet .hs-stat__lbl { color: #b7c0cc; }
/* Selectată, redevine lizibilă: e secțiunea pe care o citește omul acum. */
.hs-stat--btn.is-quiet.is-active .hs-stat__val,
.hs-stat--btn.is-quiet.is-active .hs-stat__lbl { color: #667085; }

/* Același principiu în rail: badge-ul „0" nu trebuie citit drept sarcină. */
.hs-count.is-zero { background: #f5f7f9; color: #b7c0cc; }

@media (max-width: 991.98px) {
    .hs-stats--triage { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   TABELE DE LISTĂ — rafinări enterprise (29.08.2026)
   Se aplică peste `.table-enterprise` din chrome-ul `.hs-list`, deci peste toate
   listele DataTables ale aplicației.
   ========================================================================== */

/* Antetul NU e lipit. A fost, și de acolo venea „primul rând tăiat pe jumătate": zona
   tabelului avea `max-height: 68vh` și derula separat de pagină, așa că rândurile treceau pe
   sub antet — inclusiv la încărcare, fiindcă browserul păstrează poziția de derulare a
   containerului.
   Lipirea de FEREASTRĂ (singura care n-ar acoperi nimic) nu e posibilă aici: rândul tabelului
   are `overflow-x: auto` pentru tabelele late, iar asta îl face container de derulare, la care
   `sticky` se raportează în locul ferestrei. Între „antet mereu vizibil" și „primul rând
   întreg", al doilea câștigă; revenirea la începutul listei după schimbarea paginii o face
   lib/datatables-defaults.js. */
.hs-list table.table-enterprise thead th {
    background: var(--hs-surface-alt, #fbfcfd);
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
    box-shadow: inset 0 -1px 0 var(--hs-line, #e6e9ec);
}

/* Rândurile: hover ceva mai prezent (rândul e ținta clicului), cu tranziție scurtă. */
.hs-list table.table-enterprise tbody tr { transition: background .1s ease; }
.hs-list table.table-enterprise tbody tr:hover > td { background: #f4f8fc; }

/* Coloanele sortabile arată că sunt sortabile: cursor, hover și săgeata DataTables discretă. */
table.table-enterprise thead th.dt-orderable-asc,
table.table-enterprise thead th.dt-orderable-desc { cursor: pointer; }
table.table-enterprise thead th.dt-orderable-asc:hover,
table.table-enterprise thead th.dt-orderable-desc:hover { color: var(--hs-primary, #134a6d); }
table.table-enterprise thead th .dt-column-order { opacity: .35; }
table.table-enterprise thead th.dt-ordering-asc .dt-column-order,
table.table-enterprise thead th.dt-ordering-desc .dt-column-order { opacity: 1; }
table.table-enterprise thead th.dt-ordering-asc,
table.table-enterprise thead th.dt-ordering-desc { color: var(--hs-primary, #134a6d); }

/* ---- Clase de celulă, folosite de listele randate din JS ---------------- */

/* Celula „de identitate" a rândului (numărul fișei, codul PV): ancora de citire. */
table.table-enterprise td.tbl-primary { font-weight: 600; color: var(--hs-text, #101828); white-space: nowrap; }
table.table-enterprise td.tbl-primary a { color: var(--hs-primary, #134a6d); text-decoration: none; }
table.table-enterprise td.tbl-primary a:hover { text-decoration: underline; }

/* A doua informație din aceeași celulă (telefon sub client, notă sub status). */
.tbl-sub { display: block; font-size: 11px; color: var(--hs-subtle, #98a2b3); line-height: 1.35; }

/* Numere: aliniate la dreapta, cifre tabulare — coloana se citește pe verticală. */
table.table-enterprise td.tbl-num,
table.table-enterprise th.tbl-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Date și intervale: nu se rup pe două rânduri. */
table.table-enterprise td.tbl-date { white-space: nowrap; color: var(--hs-muted, #667085); }

/* Text lung (mesaj, listă de piese): o singură linie, cu „…"; întregul stă în tooltip. */
table.table-enterprise td.tbl-clip {
    max-width: 0;
    width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Coloana de acțiuni: butoanele stau discret până când rândul e sub cursor. */
table.table-enterprise td.tbl-actions { white-space: nowrap; text-align: right; }
table.table-enterprise td.tbl-actions .btn { opacity: .55; transition: opacity .1s ease; }
table.table-enterprise tbody tr:hover td.tbl-actions .btn,
table.table-enterprise td.tbl-actions .btn:focus-visible { opacity: 1; }
@media (hover: none) {
    /* Pe touch nu există hover: butoanele rămân vizibile. */
    table.table-enterprise td.tbl-actions .btn { opacity: 1; }
}

/* Rândul „niciun rezultat" ocupă tot tabelul, fără liniile de celulă. */
.hs-list table.table-enterprise td.dt-empty { border: 0; padding: 0; }

/* Rând care deschide o înregistrare la click (ex. „Programări neconfirmate" → fișa).
   Cursorul și accentul din stânga spun că rândul e o țintă, nu doar text. */
table.table-enterprise tbody tr.tbl-rowlink { cursor: pointer; }
table.table-enterprise tbody tr.tbl-rowlink > td:first-child { box-shadow: inset 2px 0 0 transparent; transition: box-shadow .1s ease; }
table.table-enterprise tbody tr.tbl-rowlink:hover > td:first-child { box-shadow: inset 2px 0 0 var(--hs-primary, #134a6d); }

/* ---- Trasabilitatea fișei (cine a deschis-o, cine a programat vizita) ----
   Randată în corpul fișei; în modal, JS o mută în subsol, lângă scurtătura către pagină. */
.sv-origin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .75rem;
    padding: .5rem 1.25rem;
    font-size: 12px;
    color: var(--hs-muted, #667085);
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.sv-origin__item { display: inline-flex; align-items: center; gap: .3rem; cursor: help; }
.sv-origin__item i { color: var(--hs-subtle, #98a2b3); }
.sv-origin__item strong { color: var(--hs-text, #101828); font-weight: 600; }
.sv-origin__when { color: var(--hs-subtle, #98a2b3); font-variant-numeric: tabular-nums; }
.sv-origin__sep { width: 1px; height: 12px; background: var(--hs-line, #e6e9ec); }

/* În subsolul modalului blocul nu mai are chenar propriu și stă lipit de stânga. */
.sv-footer__meta { min-width: 0; flex: 1 1 auto; }
.sv-footer__meta .sv-origin { padding: 0; border: 0; }

/* ==========================================================================
   FIȘA TEHNICĂ — navigare pe rail vertical (înlocuiește bara de tab-uri)
   ========================================================================== */

/* Secțiunile fișei stau în stânga, conținutul în dreapta — aceeași convenție ca în fișa
   clientului, Alerte și SMS. Vertical, cele nouă secțiuni încap cu eticheta întreagă și cu
   contorul lor; orizontal se rupeau pe mai multe rânduri sau cereau derulare. */
.sheet-view .sv-split {
    display: grid;
    grid-template-columns: 212px minmax(0, 1fr);
    align-items: stretch;
    background: var(--hs-surface, #fff);
    border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius, 8px);
    /* Fundalul coloanei din stânga stă pe container: rail-ul e `sticky`, deci nu se întinde
       singur pe toată înălțimea. */
    background-image: linear-gradient(90deg, var(--hs-surface-alt) 0 212px, var(--hs-canvas) 212px);
    overflow: hidden;
}
.sheet-view .sv-rail { padding: .7rem .55rem; }
.sheet-view .sv-rail .hs-rail__link { font-size: var(--hs-fs-sm, 12px); }
.sheet-view .sv-rail .hs-rail__cap:not(:first-child) { margin-top: .6rem; }

/* Panoul de conținut: fără chenar propriu (îl dă containerul) și fără colțuri, ca să pară
   continuarea rail-ului, nu un al doilea card. */
.sheet-view .sv-split > .tab-content {
    background: var(--hs-canvas);
    border: 0;
    border-left: 1px solid var(--hs-line);
    border-radius: 0;
    padding: .7rem;
    line-height: 1.5;
    min-width: 0;
}

/* Contorul „0" care blochează închiderea fișei (manopera lipsă). */
.hs-count--alert { background: #fde8e8; color: #b42318; }
.hs-rail__link.active .hs-count { background: var(--hs-primary, #134a6d); color: #fff; }
.hs-rail__link.active .hs-count--alert { background: #b42318; color: #fff; }

/* Sub 992px rail-ul devine bară orizontală (regula generală `.hs-rail`), deci coloana din
   stânga dispare și conținutul ocupă toată lățimea. */
@media (max-width: 991.98px) {
    .sheet-view .sv-split { grid-template-columns: minmax(0, 1fr); background-image: none; }
    .sheet-view .sv-split > .tab-content { border-left: 0; border-top: 1px solid var(--hs-line); }
}

/* Filtrele cu selecție multiplă (status, tip fișă) folosesc select2: valorile devin etichete
   în câmp. Înălțimea minimă o aliniem la restul controalelor din bară, ca rândul să nu sară
   când se bifează primul status. */
.hs-filter .select2-container { width: 100% !important; }
.hs-filter .select2-container--bootstrap-5 .select2-selection {
    min-height: calc(1.5em + .5rem + 2px);
    font-size: 12px;
    border-color: #dbe3ec;
}
.hs-filter .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice {
    font-size: 11px;
    margin: 2px 4px 2px 0;
}

/* ==========================================================================
   PANOU DE FILTRE ÎN GRILĂ (.hs-filterpanel) — lista de fișe
   Căutarea sus, pe toată lățimea; filtrele în coloane egale, sub etichete de grup.
   ========================================================================== */
.hs-filterpanel {
    background: var(--hs-surface-alt, #fbfcfd);
    /* Zonă de comandă, nu de conținut: cât mai puțină înălțime, ca lista să înceapă sus. */
    padding: .4rem .75rem .35rem;
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
}

/* Antetul panoului: „Filtre" la stânga, numărul de rezultate la dreapta. */
.hs-filterpanel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .55rem;
}
.hs-filterpanel__title {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-muted, #667085);
}
.hs-filterpanel__title i { color: var(--hs-primary, #134a6d); font-size: 13px; }

/* Grila: patru coloane egale pe desktop. Controalele au aceeași lățime, deci se citesc pe
   coloane, nu ca un șir de câmpuri de mărimi diferite. */
.hs-fgrid {
    display: grid;
    /* Șase coloane: cele zece controale + butonul de reset intră în două rânduri. Fără
       etichete deasupra, un rând are exact înălțimea unui control. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .35rem .5rem;
    align-items: center;
}
.hs-fgrid > .hs-filter { min-width: 0; }

/* Eticheta de grup: rând propriu, cu linie care o continuă până la capăt. */
.hs-fgrid__cap {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .3rem;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--hs-subtle, #98a2b3);
}
.hs-fgrid__cap::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--hs-line-soft, #eef1f4);
}

/* Butonul de reset stă pe ultima coloană a rândului de perioadă, aliniat la dreapta. */
.hs-fgrid__actions { display: flex; justify-content: flex-end; align-items: center; }
.hs-fgrid__actions .btn { padding: .2rem .45rem; line-height: 1; }

/* Chip-urile cu filtrele active, sub grilă. */
.hs-filterpanel__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .5rem;
    margin-top: .3rem;
    font-size: 11px;
}
.hs-filterpanel__chips:empty { display: none; }

@media (max-width: 1599.98px) { .hs-fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1199.98px) { .hs-fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 991.98px)  { .hs-fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
    .hs-fgrid { grid-template-columns: minmax(0, 1fr); }
    .hs-fgrid__actions { justify-content: flex-start; }
}

/* ==========================================================================
   PROGRAMĂRI (/appointment) — bara calendarului și panoul lateral
   ========================================================================== */

/* Antetul compact al paginii: titlu + contoarele intervalului + „Programare nouă", pe un rând.
   A înlocuit header-ul de pagină și banda de patru casete KPI (~170px de înălțime). */
.appt-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin-bottom: .75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 10px;
    background: #fff;
}
.appt-head__title { display: inline-flex; align-items: center; gap: .5rem; }
.appt-head__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(19, 74, 109, .08);
    color: var(--hs-primary, #134a6d);
    font-size: 14px;
}
.appt-head__title h1 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--hs-text, #101828);
}
.appt-head__kpis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    padding-left: 1rem;
    border-left: 1px solid var(--hs-line, #e6e9ec);
}
.appt-head__new { margin-left: auto; }

/* Un contor: iconiță + număr + etichetă, ca o pastilă discretă. */
.appt-kpi {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: .15rem .55rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: #f5f7fa;
    font-size: 12px;
    line-height: 1.5;
    color: var(--hs-text-soft, #52606d);
    white-space: nowrap;
}
.appt-kpi i { color: var(--hs-subtle, #98a2b3); font-size: 12px; }
.appt-kpi strong { color: var(--hs-text, #101828); font-variant-numeric: tabular-nums; }
/* „Neconfirmate": comutator pentru filtrul cu același nume. Portocaliu cât are ce arăta. */
button.appt-kpi { cursor: pointer; }
.appt-kpi--warn { background: #fff6ed; border-color: #fedcbd; color: #b54708; }
.appt-kpi--warn i, .appt-kpi--warn strong { color: #b54708; }
.appt-kpi--warn:hover { border-color: #f9b77a; }
.appt-kpi--warn.is-quiet { background: #f5f7fa; border-color: transparent; color: var(--hs-text-soft, #52606d); }
.appt-kpi--warn.is-quiet i { color: var(--hs-subtle, #98a2b3); }
.appt-kpi--warn.is-quiet strong { color: var(--hs-text, #101828); }
.appt-kpi--warn.is-active { background: #b54708; border-color: #b54708; color: #fff; }
.appt-kpi--warn.is-active i, .appt-kpi--warn.is-active strong { color: #fff; }

@media (max-width: 767.98px) {
    .appt-head__kpis { padding-left: 0; border-left: 0; order: 3; width: 100%; }
}

/* Bara calendarului: navigare, interval, data, neconfirmate, vederi, tipărire — un rând. */
.appt-bar { padding: .45rem .75rem .4rem; }
.appt-bar__row { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .5rem; }
.appt-bar__range {
    margin: 0 .35rem 0 .15rem;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--hs-text, #101828);
    text-transform: capitalize;
    white-space: nowrap;
}
.appt-bar__date { width: auto; max-width: 150px; }
.appt-fs .appt-bar__date { height: 28px; padding: 0 .45rem; font-size: 12px; }

/* Butoanele barei (navigare, vederi, tipărire): același gabarit ca inputul de dată. */
.appt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 .6rem;
    border: 1px solid #dbe3ec;
    border-radius: 7px;
    background: #fff;
    color: var(--hs-text-soft, #52606d);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}
.appt-btn:hover:not(:disabled) { background: #eef3f8; border-color: #cfdae6; color: var(--hs-primary, #134a6d); }
.appt-btn:focus-visible { outline: 2px solid var(--hs-primary, #134a6d); outline-offset: 1px; }
.appt-btn:disabled { background: #f5f7f9; border-color: #e6e9ec; color: #b7c0cc; }
.appt-btn--icon { width: 28px; padding: 0; }

/* Prev/next lipite, ca un singur control. */
.appt-nav { display: inline-flex; }
.appt-nav .appt-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.appt-nav .appt-btn:last-child { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Vederile: control segmentat, cea curentă navy plin. */
.appt-views { display: inline-flex; }
.appt-views .appt-btn { border-radius: 0; margin-left: -1px; }
.appt-views .appt-btn:first-child { margin-left: 0; border-radius: 7px 0 0 7px; }
.appt-views .appt-btn:last-child { border-radius: 0 7px 7px 0; }
.appt-views .appt-btn.is-active,
.appt-views .appt-btn.is-active:hover {
    position: relative;
    background: var(--hs-primary, #134a6d);
    border-color: var(--hs-primary, #134a6d);
    color: #fff;
}

/* Comutator compact („Doar neconfirmate"), aliniat cu restul controalelor. */
.appt-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: .18rem .5rem;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 999px;
    background: #fff;
    font-size: 12px;
    color: var(--hs-text-soft, #52606d);
    cursor: pointer;
}
.appt-toggle input { margin: 0; }
.appt-toggle:hover { border-color: #cfdae6; color: var(--hs-primary, #134a6d); }

/* Tehnicienii ca pastile de filtrare: bifat = navy plin. Zece casete de bifat înșirate
   erau un rând ilizibil; aici fiecare tehnician e o țintă clară. */
.appt-techs { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.appt-tech {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: 0;
    padding: .16rem .5rem;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-radius: 999px;
    background: #fff;
    font-size: 11.5px;
    color: var(--hs-text-soft, #52606d);
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.appt-tech input { position: absolute; opacity: 0; width: 0; height: 0; }
.appt-tech:hover { border-color: #cfdae6; color: var(--hs-primary, #134a6d); }
.appt-tech input:checked ~ .appt-tech__txt { color: #fff; }
.appt-tech:has(input:checked) {
    background: var(--hs-primary, #134a6d);
    border-color: var(--hs-primary, #134a6d);
    color: #fff;
}
.appt-tech input:focus-visible ~ .appt-tech__txt { outline: 2px solid var(--hs-primary, #134a6d); outline-offset: 2px; }

/* Numărul de vizite din intervalul afișat, pe pastila tehnicianului. */
.appt-tech__count {
    min-width: 17px;
    padding: 0 .3rem;
    border-radius: 999px;
    background: #eef3f8;
    color: var(--hs-primary, #134a6d);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 15px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.appt-tech.has-visits { border-color: #cfdae6; color: var(--hs-text, #101828); }
.appt-tech:has(input:checked) .appt-tech__count { background: rgba(255, 255, 255, .22); color: #fff; }
/* Pastilele doar informative (neasignat / tehnician inactiv): fără bifă, contur punctat. */
.appt-techs__extra { display: contents; }
.appt-tech--info { cursor: default; border-style: dashed; background: #fbfcfd; }
.appt-tech--info:hover { border-color: var(--hs-line, #e6e9ec); color: var(--hs-text-soft, #52606d); }
.appt-tech--info.is-unassigned .appt-tech__count { background: #fff6ed; color: #b54708; }


/* Panoul lateral cu fișele neprogramate: antet + filtre, apoi lista. */
.appt-side__head { padding: .45rem .7rem .5rem; }

/* Filtrele listei laterale, în grilă: căutarea pe toată lățimea, apoi controalele două câte
   două, cu resetul pe ultima celulă. Într-o coloană de 25% din ecran, patru controale unul
   sub altul împingeau lista de fișe mult prea jos. */
.appt-side__filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .3rem;
    margin-top: .45rem;
}
.appt-side__search { grid-column: 1 / -1; }
/* Statusul are nume lungi („Aparat ridicat in service"…): primește un rând întreg. */
.appt-side__status { grid-column: 1 / -1; }
.appt-side__filters > .hs-filter { min-width: 0; gap: .15rem; }
/* Eticheta filtrului: mică, dar prezentă — fără ea, trei selecturi cu „Toate" nu spun după ce
   filtrează. */
.appt-side__filters .hs-filter__lbl { font-size: 10px; letter-spacing: .04em; line-height: 1.2; }
.appt-side__filters .input-group-text {
    padding: 0 .35rem;
    background: var(--hs-surface-alt, #fbfcfd);
    border-color: #dbe3ec;
    color: var(--hs-subtle, #98a2b3);
    font-size: 12px;
}
.appt-side__filters .form-select { border-color: #dbe3ec; }
.appt-side__reset { padding: .2rem .45rem; line-height: 1; }
.appt-side__resetcell { justify-content: flex-end; }

/* Sub 1400px coloana e și mai îngustă: filtrele trec unul sub altul, resetul rămâne lângă
   ultimul (zona de lucru). */
@media (max-width: 1399.98px) {
    .appt-side__filters { grid-template-columns: minmax(0, 1fr) auto; }
    .appt-side__filters > .hs-filter:not(.appt-side__search):not(.appt-side__area):not(.appt-side__resetcell) {
        grid-column: 1 / -1;
    }
}

/* ==========================================================================
   CALENDARUL DE PROGRAMĂRI (FullCalendar) — piele enterprise
   FullCalendar vine cu stilul lui implicit (butoane albastre Bootstrap, chenare groase,
   evenimente plate). Aici îl aducem în paleta aplicației: navy pe brand, linii fine,
   evenimente cu accent lateral și stare vizibilă (confirmat / neconfirmat).
   ========================================================================== */
.appt-fs .fc {
    --fc-border-color: var(--hs-line, #e6e9ec);
    --fc-page-bg-color: #fff;
    --fc-neutral-bg-color: #f7f9fc;
    /* Ziua curentă: navy foarte diluat, cât să se vadă coloana, nu cât să acopere textul. */
    --fc-today-bg-color: rgba(19, 74, 109, .05);
    /* Orele din afara programului de lucru. */
    --fc-non-business-color: rgba(16, 24, 40, .035);
    --fc-now-indicator-color: #d92d20;
    --fc-event-border-color: transparent;
    --fc-small-font-size: 11px;
}

/* ---- Bara de sus a calendarului ---- */
.appt-fs .fc .fc-toolbar { gap: .6rem; margin-bottom: .6rem; }
.appt-fs .fc .fc-toolbar-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--hs-text, #101828);
    text-transform: capitalize;
}
.appt-fs .fc .fc-button {
    height: 28px;
    padding: 0 .6rem;
    border-radius: 7px;
    border: 1px solid #dbe3ec;
    background: #fff;
    color: var(--hs-text-soft, #52606d);
    font-size: 12px;
    font-weight: 600;
    text-transform: none;
    box-shadow: none;
}
.appt-fs .fc .fc-button:hover { background: #eef3f8; border-color: #cfdae6; color: var(--hs-primary, #134a6d); }
.appt-fs .fc .fc-button:focus-visible { outline: 2px solid var(--hs-primary, #134a6d); outline-offset: 1px; box-shadow: none; }
.appt-fs .fc .fc-button-primary:disabled { background: #f5f7f9; border-color: #e6e9ec; color: #b7c0cc; opacity: 1; }
/* Vederea curentă (Lună / Săptămână / Zi / Listă) — pastilă navy plină. */
.appt-fs .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: var(--hs-primary, #134a6d);
    border-color: var(--hs-primary, #134a6d);
    color: #fff;
}
/* Grupul de vederi arată ca un control segmentat, nu ca patru butoane lipite. */
.appt-fs .fc .fc-button-group { gap: 0; }
.appt-fs .fc .fc-button-group > .fc-button:not(:first-child) { margin-left: -1px; }

/* ---- Antetul zilelor ---- */
.appt-fs .fc .fc-col-header-cell {
    background: var(--hs-surface-alt, #fbfcfd);
    padding: .35rem 0;
}
.appt-fs .fc .fc-col-header-cell-cushion {
    padding: .2rem .3rem;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--hs-muted, #667085);
    text-transform: capitalize;
    text-decoration: none;
}
.appt-fs .fc .fc-day-today .fc-col-header-cell-cushion { color: var(--hs-primary, #134a6d); }
.appt-fs .fc .fc-daygrid-day-number { font-size: 11px; color: var(--hs-text-soft, #52606d); text-decoration: none; }
.appt-fs .fc .fc-day-today .fc-daygrid-day-number { font-weight: 700; color: var(--hs-primary, #134a6d); }

/* ---- Axa orelor ---- */
.appt-fs .fc .fc-timegrid-slot-label-cushion {
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    color: var(--hs-subtle, #98a2b3);
}
/* Linia orei întregi e mai vizibilă decât cea de la jumătate: ochiul citește ora, nu grila. */
.appt-fs .fc .fc-timegrid-slot { border-bottom-color: #f2f5f8; }
.appt-fs .fc .fc-timegrid-slot-minor { border-top-style: none; }
.appt-fs .fc .fc-timegrid-slot-label { border-color: var(--hs-line, #e6e9ec); }

/* ---- Evenimente ----
   Culoarea statusului e ALEASĂ din configurare, deci poate fi orice: pe fundal plin, textul
   alb ieșea ilizibil pe nuanțele deschise și țipător pe cele saturate. Aici culoarea devine
   o tentă de fundal + o bară de accent la stânga, iar textul rămâne închis pe toate. Fundalul
   propriu-zis îl pune JS-ul (`paintEvent`), care are culoarea evenimentului; aici stau doar
   forma și tipografia. */
.appt-fs .fc .fc-event {
    border: 0;
    /* Singurul loc în care se vede culoarea statusului. */
    border-left: 3px solid rgb(var(--appt-c, 55, 136, 216));
    border-radius: 6px;
    padding: 1px 2px;
    /* Același fundal pentru toate vizitele, indiferent de status. */
    background-color: #f2f5f8 !important;
    color: var(--hs-text, #101828) !important;
    box-shadow: none;
    transition: background-color .12s ease, box-shadow .12s ease;
}
.appt-fs .fc .fc-event:hover {
    background-color: #e8eef4 !important;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .12);
}
.appt-fs .fc .fc-timegrid-event .fc-event-main { padding: 2px 4px; color: inherit; }
.appt-fs .fc .fc-event-main,
.appt-fs .fc .fc-event-time,
.appt-fs .fc .fc-event-title { color: inherit; }
.appt-fs .fc .fc-event-time { font-size: 10px; font-weight: 700; opacity: .75; }
.appt-fs .fc .fc-event-title { font-size: 11px; font-weight: 600; line-height: 1.25; }
/* În vederea Lună evenimentele sunt „puncte + text": punctul poartă culoarea statusului. */
.appt-fs .fc .fc-daygrid-event { border-left-width: 3px; }
.appt-fs .fc .fc-daygrid-event-dot { border-color: rgb(var(--appt-c, 55, 136, 216)); }

/* Neconfirmată: contur punctat în culoarea statusului. Clasa era pusă din JS
   (eventClassNames), dar nu avea niciun stil, deci o vizită confirmată și una neconfirmată
   arătau identic. */
.appt-fs .fc .appt-unconfirmed {
    outline: 1px dashed rgba(var(--appt-c, 55, 136, 216), .85);
    outline-offset: -2px;
}

/* ---- Vederea „Listă" ---- */
.appt-fs .fc .fc-list { border-color: var(--hs-line, #e6e9ec); border-radius: 8px; overflow: hidden; }
.appt-fs .fc .fc-list-day-cushion { background: var(--hs-surface-alt, #fbfcfd); font-size: 11px; font-weight: 700; }
.appt-fs .fc .fc-list-event:hover td { background: #f4f8fc; }
.appt-fs .fc .fc-list-event-time { font-size: 11px; color: var(--hs-muted, #667085); font-variant-numeric: tabular-nums; }
.appt-fs .fc .fc-list-event-title { font-size: 12px; }

/* Fără evenimente: mesaj în stilul listelor, nu textul implicit al bibliotecii. */
.appt-fs .fc .fc-list-empty { background: #fff; color: var(--hs-subtle, #98a2b3); font-size: 12px; }

/* ==========================================================================
   FEREASTRA DE DETALII A UNEI PROGRAMĂRI (hover pe eveniment)
   Înlocuiește tooltipul negru al bibliotecii: card alb, structurat pe rânduri etichetate,
   cu telefonul apelabil și o scurtătură către fișă. Conținutul vine prin AJAX
   (pages/appointment-preview.js).
   ========================================================================== */
.appt-pop {
    position: absolute;
    z-index: 1080;
    display: none;
    width: 320px;
    max-width: calc(100vw - 16px);
    /* Navy, ca antetul modalelor: fereastra plutește peste calendar, deci trebuie să se
       desprindă clar de grila albă de dedesubt. */
    background: var(--hs-primary, #134a6d);
    border: 1px solid #0f3d5a;
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(16, 24, 40, .28);
    font-size: 12px;
    color: #fff;
    overflow: hidden;
}
.appt-pop.is-open { display: block; }

.appt-pop__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .5rem .7rem .4rem;
    background: #0f3d5a;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.appt-pop__nr { font-size: 13px; font-weight: 700; color: #fff; }
.appt-pop__type {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .6);
}
/* Pastila de status stă pe navy: fundal translucid, ca punctul colorat să rămână vizibil. */
.appt-pop__head .status-pill {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}

.appt-pop__when {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .4rem .7rem;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    font-size: 12px;
    color: rgba(255, 255, 255, .88);
}
.appt-pop__when i { color: rgba(255, 255, 255, .6); }
.appt-pop__when strong { font-variant-numeric: tabular-nums; }

.appt-pop__body { padding: .45rem .7rem; display: flex; flex-direction: column; gap: .3rem; }
.appt-pop__row { display: flex; gap: .45rem; align-items: flex-start; }
.appt-pop__row > i { width: 14px; text-align: center; color: rgba(255, 255, 255, .5); margin-top: 1px; }
.appt-pop__cell { min-width: 0; }
.appt-pop__lbl {
    display: block;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .55);
    line-height: 1.3;
}
.appt-pop__val { display: block; line-height: 1.35; word-break: break-word; color: #fff; }
.appt-pop__val a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.appt-pop__val a:hover { color: #cfe3f2; }
.appt-pop__note { color: rgba(255, 255, 255, .55); font-size: 11px; }

.appt-pop__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .7rem;
    background: #0f3d5a;
    border-top: 1px solid rgba(255, 255, 255, .12);
}
.appt-pop__state { display: inline-flex; align-items: center; gap: .3rem; font-size: 11px; font-weight: 600; }
/* Stările își păstrează semnificația culorii, dar în variante care se citesc pe navy. */
.appt-pop__state.is-ok { color: #7ee2b8; }
.appt-pop__state.is-warn { color: #ffd166; }
.appt-pop__state.is-canceled { color: #ff9b93; }
.appt-pop__open {
    --bs-btn-padding-y: .15rem;
    --bs-btn-padding-x: .45rem;
    --bs-btn-font-size: 11px;
    --bs-btn-color: #fff;
    --bs-btn-border-color: rgba(255, 255, 255, .45);
    --bs-btn-hover-color: var(--hs-primary, #134a6d);
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: #fff;
}

.appt-pop__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem .7rem;
    color: rgba(255, 255, 255, .7);
}

/* ==========================================================================
   CARDUL UNEI FIȘE FĂRĂ PROGRAMARE (panoul din dreapta calendarului)
   Cardul e o ȚINTĂ DE TRAS pe calendar, deci trebuie citit dintr-o privire, în ordinea în
   care se decide programarea: cât așteaptă, cine e clientul, unde e, ce status are.
   ========================================================================== */
.appt-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: .4rem;
    margin-bottom: .35rem;
    padding: .4rem .5rem;
    background: #fff;
    border: 1px solid var(--hs-line, #e6e9ec);
    /* Accentul din stânga poartă culoarea statusului. */
    border-left: 3px solid var(--appt-card-c, #adb5bd);
    border-radius: 8px;
    cursor: grab;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.appt-card:hover {
    background: #fbfdff;
    border-color: #cfdae6;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .10);
}
.appt-card:active { cursor: grabbing; }
/* Fișa aleasă pentru optimizarea traseului rămâne marcată cât timp e bifată. */
.appt-card:has(.route-select:checked) {
    background: var(--hs-primary-soft, #eef3f8);
    border-color: #cfdae6;
}

.appt-card__pick { display: flex; align-items: center; padding-top: 2px; margin: 0; cursor: pointer; }

.appt-card__main { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.appt-card__top { display: flex; align-items: center; gap: .35rem; min-width: 0; }
.appt-card__nr { font-size: 12px; font-weight: 700; color: var(--hs-primary, #134a6d); }

/* Vechimea: criteriul după care se alege ce se programează întâi, deci stă în față și se
   colorează singură — peste o săptămână chihlimbar, peste două roșu. */
.appt-card__age {
    padding: 0 5px;
    border-radius: 999px;
    background: #eef2f6;
    color: #667085;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.appt-card__age.is-warn { background: #fff4e5; color: #b76e00; }
.appt-card__age.is-late { background: #fde8e8; color: #b42318; }

/* Fișa fără coordonate: doar o iconiță, cu explicația în tooltip — badge-ul „fără hartă"
   ocupa jumătate din rând pe fiecare card. */
.appt-card__nogeo { color: #b76e00; font-size: 11px; }

.appt-card__status {
    margin-left: auto;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10px;
}

.appt-card__customer {
    font-size: 12px;
    font-weight: 600;
    color: var(--hs-text, #101828);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appt-card__meta {
    display: flex;
    align-items: center;
    gap: .3rem;
    font-size: 11px;
    color: var(--hs-muted, #667085);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.appt-card__meta i { color: var(--hs-subtle, #98a2b3); flex: 0 0 auto; }
.appt-card__meta--sub { gap: .5rem; color: var(--hs-subtle, #98a2b3); }
.appt-card__meta--sub > span + span::before { content: '·'; margin-right: .5rem; color: #cfd6de; }

/* Acțiunile stau discrete până când cardul e sub cursor. */
.appt-card__actions { display: flex; flex-direction: column; gap: .25rem; }
.appt-card__actions .btn {
    width: 26px;
    height: 26px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    line-height: 1;
    opacity: .5;
    transition: opacity .12s ease;
}
.appt-card:hover .appt-card__actions .btn,
.appt-card__actions .btn:focus-visible { opacity: 1; }
@media (hover: none) { .appt-card__actions .btn { opacity: 1; } }


/* ---- Recepție marfă: coloana „Fișă (necesar)" din „Linii de recepție" ----
   Fișele care așteaptă piesa sunt opțiuni selectabile, nu un câmp de text: fișele extinse
   moștenesc numărul fișei-mamă, deci mai multe sugestii pot arăta identic dacă nu le pui
   alături subtipul și clientul. Prefixul `rcs-` (receipt sheet) evită coliziunea cu `.rc-sheet`
   din panoul de traseu, care e altceva. */
.rcs-list {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    max-height: 190px;
    overflow-y: auto;
}
/* Cate fise cer piesa: lista le arata pe TOATE, si pe cele care nu se pot alege, deci
   numarul spune dintr-o privire cat de disputata e piesa. */
.rcs-head {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #8a929b;
    margin-bottom: .2rem;
}
/* Fiecare sugestie e un buton pe toată lățimea celulei: ținta de clic e tot rândul, nu doar
   numărul, iar informația se citește pe trei niveluri (număr → ce fel de fișă → cine/când). */
.rcs-opt {
    display: flex;
    flex-direction: column;
    gap: 1px;
    width: 100%;
    padding: .3rem .45rem;
    border: 1px solid var(--hs-line, #e7ebef);
    border-radius: var(--hs-radius-sm, 6px);
    background: #fff;
    text-align: left;
    line-height: 1.25;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.rcs-opt:hover { border-color: #b9c7d4; background: #f8fafc; }
.rcs-opt:focus-visible { outline: 2px solid var(--hs-primary, #134a6d); outline-offset: 1px; }
/* Aleasă: contur plin în culoarea aplicației + bifă, ca starea să se vadă dintr-o privire
   într-o coloană cu mai multe fișe. */
.rcs-opt.is-on {
    border-color: var(--hs-primary, #134a6d);
    background: #eef4f8;
    box-shadow: inset 0 0 0 1px var(--hs-primary, #134a6d);
}
/* Fisa care nu poate primi piesa pe ACEASTA linie (aleasa pe alta linie sau cu piesa deja
   rezervata): ramane vizibila si lizibila, doar estompata si fara clic. Ascunsa, ar minti —
   piesa chiar e ceruta si de ea. */
.rcs-opt.is-off {
    background: #f8fafc;
    border-style: dashed;
    cursor: default;
    opacity: .72;
}
.rcs-opt.is-off:hover { border-color: var(--hs-line, #e7ebef); background: #f8fafc; }
.rcs-blocked {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: #98a2b3;
    font-style: italic;
}
.rcs-top { display: flex; align-items: center; gap: .35rem; }
.rcs-nr {
    font-size: 12px;
    font-weight: 700;
    color: var(--hs-primary, #134a6d);
    font-variant-numeric: tabular-nums;
}
.rcs-qty { font-size: 11px; font-weight: 600; color: #667085; }
/* Bifa ocupă loc mereu (ascunsă prin opacitate), altfel rândul „sare" la selectare. */
.rcs-check { margin-left: auto; font-size: 12px; color: var(--hs-primary, #134a6d); opacity: 0; }
.rcs-opt.is-on .rcs-check { opacity: 1; }
.rcs-line { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 5px; margin-top: 1px; }
/* Insigna poartă culoarea aplicației (spune „e o fișă extinsă"), iar culoarea subtipului
   rămâne pe jetonul de lângă — aceeași convenție ca în lista de fișe. */
.rcs-ext {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 .35rem;
    border-radius: 999px;
    background: #eef4f8;
    border: 1px solid #d5e3ee;
    color: #134a6d;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
.rcs-ext i { font-size: 10px; }
.rcs-type { font-size: 10px; color: #667085; }
.rcs-status { font-size: 10px; font-weight: 600; color: #475467; white-space: nowrap; }
.rcs-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: 1px;
}
.rcs-meta {
    font-size: 10px;
    color: var(--hs-subtle, #98a2b3);
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Nicio fișă în așteptare: text, nu un input dezactivat — nu e nimic de completat acolo. */
.rcs-none {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: 11px;
    color: var(--hs-subtle, #98a2b3);
}

/* =====================================================================
   SMS → tabul „Mesaje primite"
   =====================================================================
   Lista e o casuta de lucru: fiecare rand se citeste pe doua niveluri (numarul expeditorului
   deasupra, clientul dedesubt), iar textul mesajului e vizibil in lista, nu ascuns intr-un
   tooltip — mesajele reale au mai multe randuri si trebuie triate din ochi. */

/* Badge-ul de necitite de pe rail. Ramane vizibil si pe sectiunea activa: numarul de mesaje
   necitite e o stare a aplicatiei, nu o decoratie a butonului. */
.hs-rail__badge {
    margin-left: auto;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--hs-warn-soft, #fdf3e2);
    border: 1px solid var(--hs-warn-line, #f3ddb6);
    color: var(--hs-warn-text, #8a5b12);
    font-size: 11px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Cardurile de indicatori care sunt si filtre: arata ca restul benzii, dar se comporta ca
   butoane (cursor, hover, stare activa). Fara marcajul de „activ", lista filtrata pare goala
   fara motiv. */
.inbox-kpi--action,
.sent-kpi--action {
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.inbox-kpi--action:hover,
.sent-kpi--action:hover { border-color: #cfd8e0; box-shadow: 0 2px 6px rgba(16, 24, 40, .07); }
.inbox-kpi--action:focus-visible,
.sent-kpi--action:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }
.inbox-kpi--action.is-active,
.sent-kpi--action.is-active {
    border-color: var(--hs-primary);
    box-shadow: inset 0 0 0 1px var(--hs-primary), 0 1px 2px rgba(16, 24, 40, .04);
    background: #f6fafd;
}

/* Bara de actiuni pe selectie: apare intre filtre si lista, deci trebuie sa se citeasca drept
   „stare temporara", nu drept inca un rand de filtre — de aici fundalul pe brand, deschis. */
.inbox-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .5rem .9rem;
    background: #f1f6fa;
    border-top: 1px solid var(--hs-line, #e6e9ec);
    border-bottom: 1px solid var(--hs-line, #e6e9ec);
}
.inbox-bulk__count { font-size: 12px; color: var(--hs-primary); font-weight: 600; white-space: nowrap; }
.inbox-bulk__count i { margin-right: .35rem; }
.inbox-bulk__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-left: auto; }

/* Coloana de bifare: cat mai ingusta, ca latimea sa ramana pentru mesaj. */
#sms-inbox-table .inbox-col-check,
#sms-sent-table .inbox-col-check { width: 34px; padding-right: 0; }
#sms-inbox-table td,
#sms-sent-table td { vertical-align: top; }
#sms-inbox-table .inbox-sender,
#sms-sent-table .inbox-sender { font-variant-numeric: tabular-nums; }
/* Subrandul cu clientul, sub numarul expeditorului (acelasi registru ca subrandurile din
   lista de fise). */
#sms-inbox-table .inbox-subline,
#sms-sent-table .inbox-subline {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    line-height: 1.3;
    color: var(--hs-muted, #6c757d);
}
#sms-inbox-table a.inbox-subline,
#sms-sent-table a.inbox-subline { color: var(--hs-primary); }
#sms-inbox-table a.inbox-subline:hover,
#sms-sent-table a.inbox-subline:hover { text-decoration: underline; }

/* Mesajul: buton pe toata latimea celulei, cu textul pe cel mult doua randuri. E buton, nu
   div cu handler, ca sa fie accesibil de la tastatura — deschide acelasi panou de detaliu. */
#sms-inbox-table .inbox-col-msg,
#sms-sent-table .inbox-col-msg { max-width: 420px; }
#sms-inbox-table .inbox-msg,
#sms-sent-table .inbox-msg {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: normal;
    cursor: pointer;
}
#sms-inbox-table .inbox-msg:hover,
#sms-sent-table .inbox-msg:hover { color: var(--hs-primary); }
#sms-inbox-table .inbox-msg:focus-visible,
#sms-sent-table .inbox-msg:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 2px; }

/* Panoul de detaliu: datele mesajului in perechi eticheta/valoare, apoi textul intreg pe
   fundal deschis, ca un citat — se vede unde incepe si unde se termina ce a scris clientul. */
.inbox-detail__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .5rem 1rem;
    margin: 0 0 1rem;
}
.inbox-detail__meta dt {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--hs-subtle, #98a2b3);
    margin-bottom: .1rem;
}
.inbox-detail__meta dd { margin: 0; font-size: 13px; color: var(--hs-text); }
.inbox-detail__text {
    padding: .85rem 1rem;
    border: 1px solid var(--hs-line, #e6e9ec);
    border-left: 3px solid var(--hs-primary);
    border-radius: 6px;
    background: #f8fafc;
    font-size: 14px;
    line-height: 1.55;
    white-space: normal;
    word-break: break-word;
}

/* Contorul de caractere / SMS-uri din panoul de detaliu al unui mesaj trimis: un text de 300
   de caractere pleaca drept trei mesaje platite, iar asta nu se vede nicaieri altundeva. */
.sent-detail__meter { margin-top: .45rem; color: var(--hs-muted, #6c757d); font-variant-numeric: tabular-nums; }

/* Tab-urile de LISTA curg pana la marginile panoului: banda de indicatori, panoul de filtre
   si tabelul au deja chenarele lor, iar padding-ul panelului de tab (.hs-tabs__pane) doar le
   mai ingusta o data. Tab-urile de formular (Trimite, Sabloane, Tipuri si reguli) il
   pastreaza — acolo continutul n-are chenar propriu si s-ar lipi de marginea cardului. */
#tab-inbox,
#tab-sent { padding: 0; }

/* ===== Catalog piese (/product) ===== */
/* Codul piesei: eticheta monospace discreta — e identificatorul dupa care se cauta. */
.prd-code {
    display: inline-block;
    font-family: var(--bs-font-monospace);
    font-size: 12px;
    font-weight: 600;
    color: #34405a;
    background: #f3f6f9;
    border: 1px solid #e3e8ee;
    border-radius: 4px;
    padding: 1px 6px;
    white-space: nowrap;
}
/* Denumirea deschide detaliile piesei: arata ca un link, e buton (nu navigheaza). */
.prd-name {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    font-weight: 600;
    color: var(--hs-primary, #134a6d);
    line-height: 1.35;
}
.prd-name:hover, .prd-name:focus-visible { text-decoration: underline; color: var(--hs-primary-dark, #0e3a58); }
.prd-flag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: .35rem;
    padding: 0 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--pq-warn-fg);
    background: var(--pq-warn-bg);
    border: 1px solid var(--pq-warn-br);
    border-radius: 4px;
    vertical-align: 1px;
}
.prd-brand { color: #4b5565; }
.prd-price { font-weight: 700; color: #1f2937; font-variant-numeric: tabular-nums; }
.prd-table .hs-sub { font-variant-numeric: tabular-nums; margin-top: 2px; }
/* „Fără preț": lipsa pretului e o problema de rezolvat, dar nu o alarma. */
.prd-noprice { font-size: 12px; color: #b76e00; font-style: italic; }
/* Coloanele listei: codul e scurt (medie 9 caractere, max 20) — coloana ingusta, iar codurile
   lungi trec pe randul urmator; denumirea primeste spatiul castigat (latime dubla). */
.prd-table th.prd-col-code { width: 75px; }
.prd-table th.prd-col-name { min-width: 340px; width: 34%; }
.prd-table .prd-code { white-space: normal; word-break: break-all; }
/* Randul intreg deschide „Detalii piesă". */
.prd-table tbody tr[data-row-key] { cursor: pointer; }
/* Codurile echivalente, sub codul piesei (lista /product, cautarea de piese din fisa). */
.prd-eq {
    margin-top: 2px;
    font-size: 11px;
    color: #6b7684;
    font-family: var(--bs-font-monospace);
    word-break: break-all;
    line-height: 1.3;
}
.prd-eq .bi { margin-right: 2px; color: #98a2b3; }
/* Tab „Coduri echivalente": piesa legata din catalog + randul aflat in editare. */
.eq-link { display: flex; align-items: baseline; gap: .3rem; flex-wrap: wrap; }
.eq-link > .bi { color: var(--hs-primary, #134a6d); }
#eq_rows tr.is-editing > td { background: #f2f7fc; }
.eq-take-brand { font-size: 12px; font-weight: 600; text-decoration: none; line-height: 1; }
.eq-take-brand:hover { text-decoration: underline; }
.eq-take-brand:disabled { color: #b0b8c1; }

/* =====================================================================
   Recepție marfă → „Linii de recepție" (.rcl-*)
   Fiecare piesă scanată e un card cu câmpuri etichetate (denumire, cantitate cu +/−, preț,
   total) și cu alegerea explicită a fișei — inclusiv „Stoc liber". Deasupra, un rezumat;
   dedesubt, starea recepției spusă în cuvinte (ce s-a salvat, ce urmează).
   ===================================================================== */
.rcl-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.rcl-head__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rcl-head__sub { font-size: 12px; color: #7a828c; }

.rcl-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1px;
    background: var(--hs-line-soft, #eef1f4);
    border-bottom: 1px solid var(--hs-line-soft, #eef1f4);
}
.rcl-sum { display: flex; flex-direction: column; gap: 1px; padding: .55rem .9rem; background: #fbfcfe; }
.rcl-sum__val { font-size: 1.05rem; font-weight: 800; color: #1f2937; font-variant-numeric: tabular-nums; line-height: 1.2; }
.rcl-sum__lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #98a2b3; }
.rcl-sum--ok .rcl-sum__val { color: var(--hs-good-fg, #067647); }
.rcl-sum--warn .rcl-sum__val { color: #b54708; }
.rcl-sum--new .rcl-sum__val { color: #6941c6; }
.rcl-sum.is-zero .rcl-sum__val { color: #c3cad3; }
.rcl-sum--total .rcl-sum__val { color: var(--hs-primary, #134a6d); }

.rcl-list { display: flex; flex-direction: column; gap: .75rem; }
.rcl-line {
    border: 1px solid var(--hs-line, #e6e9ec);
    border-left: 3px solid #d0d7de;
    border-radius: 8px;
    background: #fff;
    padding: .7rem .85rem .8rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}
.rcl-line.is-new { border-left-color: #9e77ed; }
.rcl-line.is-allocated { border-left-color: var(--hs-good-fg, #12b76a); }

.rcl-line__head { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .5rem; margin-bottom: .6rem; }
.rcl-idx {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #eef3f8; color: var(--hs-primary, #134a6d);
    font-size: 11px; font-weight: 800; flex: 0 0 auto;
}
.rcl-code { font-family: var(--bs-font-monospace); font-weight: 700; font-size: 13.5px; color: #1f2937; letter-spacing: .01em; }
.rcl-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; line-height: 1.6;
    background: #f2f4f7; color: #475467; border: 1px solid #e4e7ec;
    white-space: nowrap;
}
.rcl-tag--catalog { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.rcl-tag--new { background: #f4f3ff; color: #5925dc; border-color: #d9d6fe; }
.rcl-tag--ok { background: #ecfdf3; color: #067647; border-color: #abefc6; }
.rcl-tag--warn { background: #fffaeb; color: #b54708; border-color: #fedf89; }
.rcl-del {
    margin-left: auto;
    border: 1px solid transparent; background: transparent;
    color: #98a2b3; border-radius: 6px; padding: 2px 7px;
}
.rcl-del:hover { color: #b42318; background: #fef3f2; border-color: #fecdca; }

.rcl-line__fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px 118px 104px;
    gap: .6rem;
    align-items: end;
}
.rcl-field { display: flex; flex-direction: column; gap: 3px; margin: 0; min-width: 0; }
.rcl-field__lbl { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a929b; }
.rcl-stepper .btn { padding-left: .5rem; padding-right: .5rem; }
.rcl-stepper .form-control { -moz-appearance: textfield; }
.rcl-stepper .form-control::-webkit-outer-spin-button,
.rcl-stepper .form-control::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rcl-total {
    display: block; height: 31px; line-height: 31px;
    text-align: right; font-weight: 700; color: #1f2937;
    font-variant-numeric: tabular-nums;
}

/* Alegerea fișei: grilă de opțiuni (refolosește butoanele .rcs-opt). */
.rcl-sheets { margin-top: .75rem; padding-top: .65rem; border-top: 1px dashed var(--hs-line, #e6e9ec); }
.rcl-sheets__label {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem;
    font-size: 12px; font-weight: 700; color: #344054; margin-bottom: .4rem;
}
.rcl-sheets__count { font-size: 11px; font-weight: 600; color: #98a2b3; }
.rcl-sheets__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .4rem;
    max-height: 230px;
    overflow-y: auto;
}
.rcl-sheets__none { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; color: #667085; }
.rcl-sheets__hidden { display: inline-flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: 11px; color: #98a2b3; font-style: italic; }
.rcl-sheets .rcs-opt { padding: .4rem .55rem; }
.rcl-sheets .rcs-nr { font-size: 12.5px; }
.rcs-opt--free .rcs-nr { color: #475467; }
.rcs-opt--free.is-on { border-color: #667085; background: #f2f4f7; box-shadow: inset 0 0 0 1px #667085; }
.rcs-opt--free.is-on .rcs-check { color: #475467; }

/* Starea goală: pașii de urmat, nu doar „nimic aici". */
.rcl-empty { text-align: center; padding: 2rem 1rem 1.5rem; color: #667085; }
.rcl-empty > .bi { font-size: 30px; color: #c8d1dc; display: block; margin-bottom: .4rem; }
.rcl-empty__title { font-weight: 700; color: #344054; margin-bottom: .6rem; }
.rcl-empty__steps { display: inline-block; text-align: left; margin: 0; padding-left: 1.2rem; font-size: 13px; line-height: 1.7; }

.rcl-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; background: #fbfcfe; }
.rcl-foot__actions { display: flex; gap: .5rem; margin-left: auto; }
.rcl-state { font-size: 12.5px; color: #475467; }
.rcl-state .bi { margin-right: .3rem; }
.rcl-state--warn { color: #b54708; font-weight: 600; }
.rcl-state--ok { color: #067647; font-weight: 600; }
.rcl-status:empty { display: none; }
.rcl-status { font-size: 12px; color: #667085; padding: .45rem 1rem; border-top: 1px solid var(--hs-line-soft, #eef1f4); }

@media (max-width: 767.98px) {
    .rcl-line__fields { grid-template-columns: 1fr 1fr; }
    .rcl-field--name { grid-column: 1 / -1; }
}
.rcl-state--bad { color: #b42318; font-weight: 600; }
/* Recepție → „Ciorne salvate" + bara ciornei deschise. */
.rcd .rcl-head__sub { max-width: 820px; }
.rcd-row--open > td { background: #f2f7fc !important; }
.rcd-open { font-size: 12px; font-weight: 700; color: var(--hs-primary, #134a6d); }
.rcl-draftbar {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
    padding: .5rem 1rem; font-size: 12.5px; color: #134a6d;
    background: #eef4f8; border-bottom: 1px solid #d5e3ee;
}
/* Recepție → coduri echivalente pe linie + dialogul „Cod echivalent" (.rce-*). */
.rcl-tag--eq { background: #eef4f8; color: #134a6d; border-color: #d5e3ee; }
.rcl-eqbtn {
    border: 1px dashed #c7d4e2; background: #fff; color: var(--hs-primary, #134a6d);
    border-radius: 999px; padding: 1px 9px; font-size: 11px; font-weight: 600; line-height: 1.6;
}
.rcl-eqbtn:hover { background: #eef4f8; border-style: solid; }
.rcl-eqbtn .bi { margin-right: 2px; }
.rcl-eqhint {
    display: flex; align-items: center; flex-wrap: wrap; gap: .5rem;
    margin: -.15rem 0 .65rem; padding: .45rem .65rem;
    background: #f9f5ff; border: 1px solid #e9d7fe; border-radius: 6px;
    font-size: 12px; color: #53389e;
}
.rcl-eqhint > .bi { font-size: 14px; }
.rcl-eqhint > span { flex: 1 1 260px; }
.rcl-eqhint--pick { background: #eef4f8; border-color: #d5e3ee; color: #134a6d; }
.rcl-eqhint__opts { display: flex; flex-wrap: wrap; gap: .35rem; flex-basis: 100% !important; }

.rce-step { margin-bottom: 1.1rem; }
.rce-step__title { display: flex; align-items: center; gap: .5rem; font-size: 13px; font-weight: 700; color: #344054; margin-bottom: .6rem; }
.rce-step__nr {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--hs-primary, #134a6d); color: #fff; font-size: 11px; font-weight: 800;
}
.rce-picked {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem;
    padding: .6rem .75rem; border: 1px solid var(--hs-primary, #134a6d); border-radius: 8px; background: #f2f7fc;
}
.rce-picked__main { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; }
.rce-results { display: flex; flex-direction: column; gap: .3rem; margin-top: .5rem; max-height: 280px; overflow-y: auto; }
.rce-results__hint { font-size: 12px; color: #98a2b3; padding: .4rem .2rem; }
.rce-hit {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "code name stock" "meta meta meta";
    gap: 2px .6rem; align-items: center; text-align: left;
    padding: .45rem .6rem; border: 1px solid var(--hs-line, #e6e9ec); border-radius: 6px; background: #fff;
}
.rce-hit:hover { border-color: #b9c7d4; background: #f8fafc; }
.rce-hit .prd-code { grid-area: code; }
.rce-hit__name { grid-area: name; font-weight: 600; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rce-hit__stock { grid-area: stock; font-size: 11px; color: #667085; white-space: nowrap; }
.rce-hit__meta { grid-area: meta; font-size: 11px; color: #98a2b3; }
.rce-effects { background: var(--bs-tertiary-bg, #f8f9fa); border-radius: 8px; padding: .65rem .85rem; }
.rce-effects h6 { font-size: 13px; margin-bottom: .4rem; }
/* Fișă → Piese → „Caută piese": adăugarea în catalog a unei piese care lipsește (.part-add). */
.part-add { margin-top: .5rem; border: 1px dashed #c7d4e2; border-radius: 8px; background: #fbfcfe; padding: .55rem .75rem; }
.part-add--empty { border-style: solid; border-color: #d5e3ee; background: #f5f9fc; }
.part-add__lead { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: 12.5px; color: #475467; }
.part-add__lead > .bi { color: var(--hs-primary, #134a6d); }
.part-add__lead > span { flex: 1 1 200px; }
.part-add__form { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid #e6ecf2; }
.part-add__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
tr.part-row--new > td { background: #ecfdf3 !important; transition: background-color 2s ease; }

/* =====================================================================
   Setări → listele de motive (pages/setting-reason-list.js):
   banda de indicatori, file pe status, lista grupată pe status, formular
   cu previzualizarea textului de pe fișă.
   ===================================================================== */
.ssr { display: flex; flex-direction: column; gap: 1rem; }

/* Indicatorii care filtrează: starea activă se vede pe contur, ca filele de dedesubt. */
.ssr-kpi.is-active {
    border-color: var(--hs-primary);
    background: var(--hs-primary-soft);
    box-shadow: inset 0 0 0 1px var(--hs-primary);
}
.ssr-kpi.is-active .hs-kpi__lbl { color: var(--hs-primary); font-weight: 600; }

/* Bara de sub titlu: filele pe status la stânga, căutarea la dreapta. */
.ssr-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}
.ssr-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    background: var(--hs-neutral-bg);
    border: 1px solid var(--hs-line);
    border-radius: 8px;
    min-width: 0;
}
.ssr-tab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border: 0;
    background: transparent;
    color: var(--hs-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    padding: .3rem .7rem;
    border-radius: 6px;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease, box-shadow .12s ease;
}
.ssr-tab:hover { color: var(--hs-text); background: rgba(255, 255, 255, .6); }
.ssr-tab:focus-visible { outline: 2px solid var(--hs-primary); outline-offset: 1px; }
.ssr-tab.is-active {
    background: var(--hs-surface);
    color: var(--hs-primary);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 0 0 1px var(--hs-line);
}
/* Status fără niciun motiv activ: nu mai cere motiv, deci îl arătăm stins. */
.ssr-tab.is-off { opacity: .6; }
.ssr-tab__n {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 .4em;
    border-radius: 999px;
    background: var(--hs-line-soft);
    color: var(--hs-muted);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.ssr-tab.is-active .ssr-tab__n { background: var(--hs-brand-bg); color: var(--hs-brand-fg); }
.ssr-search { width: 280px; max-width: 100%; }

/* Lista */
.ssr-code {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    font-weight: 600;
    color: var(--hs-brand-fg);
    background: var(--hs-brand-bg);
    border: 1px solid var(--hs-brand-br);
    border-radius: 4px;
    padding: .05rem .4rem;
    letter-spacing: .02em;
}
.ssr-name { font-weight: 500; color: var(--hs-text); }
/* Motivul (textul) ia tot spatiul ramas; coloanele scurte se strang pe continut (`width: 1%`
   + nowrap) si stau grupate la dreapta, langa actiuni. Merge doar cu `autoWidth: false` in
   DataTables — altfel latimile calculate de el le suprascriu pe acestea. */
.ssr-table .ssr-col-name { width: auto; min-width: 280px; }
.ssr-table .ssr-col-code,
.ssr-table .ssr-col-detail,
.ssr-table .ssr-col-pos,
.ssr-table .ssr-col-state,
.ssr-table .ssr-col-stage,
.ssr-table .ssr-col-added,
.ssr-table .ssr-col-actions { width: 1%; white-space: nowrap; }
.ssr-table .ssr-col-scope { width: 220px; }
.ssr-table td:nth-last-child(2) small { max-width: 160px; margin-left: auto; }
.ssr-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ssr-table td .text-truncate { max-width: 220px; }
.ssr-toolbar--end { justify-content: flex-end; }
.ssr-table tr.ssr-row--off td { color: var(--hs-subtle); }
.ssr-table tr.ssr-row--off .ssr-name { color: var(--hs-muted); text-decoration: line-through; text-decoration-color: var(--hs-subtle); }
.ssr-table tr.ssr-row--off .ssr-code { filter: grayscale(1); opacity: .7; }
/* Antetul de grup: banda subțire, nu rând de date — fără hover, cu numele statusului. */
.ssr-table tr.ssr-group > td {
    background: var(--hs-surface-alt) !important;
    border-top: 1px solid var(--hs-line);
    padding: .45rem .75rem;
    font-size: 12px;
}
.ssr-table tr.ssr-group:first-child > td { border-top: 0; }
.ssr-table.table-hover > tbody > tr.ssr-group:hover > * { --bs-table-bg-state: transparent; }
.ssr-table tr.ssr-group .status-dot { margin-right: .45rem; vertical-align: middle; }
.ssr-group__name { font-weight: 700; color: var(--hs-text); text-transform: uppercase; letter-spacing: .04em; }
.ssr-group__n { margin-left: .6rem; color: var(--hs-muted); }

/* Explicația de sub listă: trei reguli scurte, nu un paragraf. */
.ssr-help {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem 1.25rem;
    background: var(--hs-surface-alt);
    border-top: 1px solid var(--hs-line);
    font-size: 12px;
    color: var(--hs-muted);
}
.ssr-help__item { display: flex; gap: .5rem; align-items: flex-start; line-height: 1.4; }
.ssr-help__item > .bi { color: var(--hs-primary); font-size: 14px; margin-top: 1px; }

/* Formular */
.ssr-option {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .55rem .75rem;
    border: 1px solid var(--hs-line-strong);
    border-radius: 6px;
    cursor: pointer;
    margin: 0;
}
.ssr-option:has(input:checked) { border-color: var(--hs-warn-br); background: var(--hs-warn-bg); }
.ssr-option .form-check-input { margin-top: .15rem; cursor: pointer; }
.ssr-preview {
    border: 1px dashed var(--hs-line-strong);
    border-radius: 6px;
    background: var(--hs-surface-alt);
    padding: .6rem .8rem;
}
.ssr-preview__lbl {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--hs-subtle);
    margin-bottom: .25rem;
}
.ssr-preview__txt { font-size: 13px; color: var(--hs-text-soft); word-break: break-word; }

@media (max-width: 767.98px) {
    .ssr-toolbar { flex-direction: column; align-items: stretch; }
    .ssr-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .ssr-search { width: 100%; }
}

/* ===== Modul Rapoarte (/report) ===== */
.rp-kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.rp-kpis .hs-stat { border-radius: 6px; padding: .8rem .95rem; }
.rp-kpis .rp-kpi--ok { box-shadow: inset 3px 0 0 #18794e; }
.rp-kpis .rp-kpi--warn { box-shadow: inset 3px 0 0 #dc8a00; }
.rp-kpis .rp-kpi--bad { box-shadow: inset 3px 0 0 #b42318; }
.rp-kpi__cmp { margin-top: .2rem; font-size: 11.5px; color: #667085; font-variant-numeric: tabular-nums; }
.rp-kpi__cmp .text-muted { font-size: inherit; }
.rp-delta { font-weight: 600; white-space: nowrap; }
.rp-delta--good { color: #18794e; }
.rp-delta--bad { color: #b42318; }
.rp-delta--flat { color: #667085; }
.rp-section__title { font-size: 14px; font-weight: 600; color: var(--hs-ink, #1d2939); margin: 0 0 .5rem; }
.rp-unit { color: #98a2b3; font-size: 11px; }
.rp-bar {
    display: inline-block;
    width: 110px;
    height: 6px;
    border-radius: 3px;
    background: var(--hs-line, #e4e7ec);
    vertical-align: middle;
    overflow: hidden;
}
.rp-bar__fill { display: block; height: 100%; background: var(--hs-primary, #134a6d); border-radius: 3px; }
.rp-bar__val { display: inline-block; min-width: 3.2rem; margin-left: .5rem; text-align: right; font-variant-numeric: tabular-nums; }
#report-body { min-height: 120px; }
.rp-section__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
/* Cifra care deschide lista fiselor din spatele ei (DrillableReportInterface). */
.rp-drill { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
.rp-drill:hover, .rp-drill:focus { color: var(--hs-primary, #134a6d); text-decoration-style: solid; }
.rp-days-input { width: 7rem; }
th[data-sort-col] { cursor: pointer; white-space: nowrap; }
.rp-sort-ico { font-size: 10px; opacity: .45; }
th[data-dir] .rp-sort-ico { opacity: 1; }
.rp-tone { display: inline-block; min-width: 1.6rem; padding: .05rem .4rem; border-radius: 4px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-tone--ok { background: #e7f6ec; color: #18794e; }
.rp-tone--warn { background: #fff4e0; color: #a35a00; }
.rp-tone--bad { background: #fde8e8; color: #b42318; }
.rp-tone--mute { color: #c0c7d0; font-weight: 400; }
.rp-badge { white-space: nowrap; }
.rp-tone .rp-badge { font-size: 12px; }
.rp-table--compact th, .rp-table--compact td { padding: .35rem .4rem; font-size: 12.5px; }
.rp-table--compact .rp-tone { min-width: 1.3rem; padding: 0 .25rem; }

/* ===== Rapoarte — layout enterprise (20.10.2026) =====
   Zona raportului: antet cu emblemă, panou de filtre + etichetele filtrelor active, cuprins,
   bandă KPI colorată după STARE (ok / atenție / problemă / neutru), secțiuni-card cu antet,
   căutare rapidă, antet de tabel fix și rând de total fixat. Doar tokeni --hs-*. */
.rp-main { display: flex; flex-direction: column; gap: .9rem; padding: 1.1rem 1.25rem 1.5rem; background: var(--hs-surface-alt); }

.rp-head {
    display: flex; align-items: center; gap: .9rem;
    padding: .95rem 1.1rem; background: var(--hs-surface);
    border: 1px solid var(--hs-line); border-radius: var(--hs-radius, 8px);
    box-shadow: var(--hs-shadow-xs, 0 1px 2px rgba(16, 24, 40, .04));
    border-left: 3px solid var(--hs-primary);
}
.rp-head__emblem {
    width: 44px; height: 44px; flex: 0 0 auto; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--hs-primary); color: #fff; font-size: 20px;
    box-shadow: 0 2px 6px rgba(19, 74, 109, .25);
}
.rp-head__id { flex: 1 1 auto; min-width: 0; }
.rp-head__eyebrow { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--hs-subtle); }
.rp-head__title { margin: .05rem 0 .15rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; color: var(--hs-text); }
.rp-head__desc { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--hs-muted); max-width: 80ch; }
.rp-head__tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; flex: 0 0 auto; }
.rp-stamp {
    display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem;
    font-size: 11.5px; color: var(--hs-muted); background: var(--hs-neutral-bg);
    border: 1px solid var(--hs-neutral-br); border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.rp-stamp.is-cached { background: var(--hs-info-bg); border-color: var(--hs-info-br); color: var(--hs-info-fg); }

.rp-filters { align-items: flex-end; }
.rp-filters .form-select-sm, .rp-filters .form-control-sm { min-width: 11rem; }
.rp-filters .rp-days-input { min-width: 0; }
.rp-filters__reset { color: var(--hs-muted); text-decoration: none; padding-bottom: .3rem; }
.rp-filters__reset:hover { color: var(--hs-bad-fg); }
.rp-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: -.35rem; }
.rp-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .35rem .15rem .6rem;
    font-size: 12px; color: var(--hs-brand-fg); background: var(--hs-brand-bg);
    border: 1px solid var(--hs-brand-br); border-radius: 999px;
}
.rp-chip b { font-weight: 600; }
.rp-chip button { border: 0; background: transparent; color: inherit; padding: 0 .15rem; line-height: 1; opacity: .7; }
.rp-chip button:hover { opacity: 1; }

.rp-toc { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.rp-toc__lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hs-subtle); margin-right: .25rem; }
.rp-toc a {
    font-size: 12px; padding: .2rem .6rem; border-radius: 6px; text-decoration: none;
    color: var(--hs-text-soft); background: var(--hs-surface); border: 1px solid var(--hs-line);
}
.rp-toc a:hover { border-color: var(--hs-brand-br); color: var(--hs-primary); background: var(--hs-primary-soft); }

.rp-body { display: flex; flex-direction: column; gap: .9rem; min-height: 160px; }

/* Mesaje: callout-uri, nu alerte galbene pe toată lățimea. */
.rp-notices { display: flex; flex-direction: column; gap: .4rem; }
.rp-notice {
    display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .8rem;
    font-size: 12.5px; line-height: 1.45; border-radius: 6px;
    color: var(--hs-info-fg); background: var(--hs-info-bg); border: 1px solid var(--hs-info-br);
}
.rp-notice i { margin-top: .1rem; }
.rp-notice--warn { color: var(--hs-warn-fg); background: var(--hs-warn-bg); border-color: var(--hs-warn-br); }

/* Banda KPI: emblema și bara din stânga spun starea; eticheta deasupra, cifra mare, explicația dedesubt. */
.rp-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
@media (min-width: 992px) {
    .rp-kpis--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rp-kpis--c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .rp-kpis--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rp-kpis--c5, .rp-kpis--c6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 5–6 indicatori pe un rând doar când zona raportului (lângă meniu și rail) e destul de lată. */
@media (min-width: 1400px) {
    .rp-kpis--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .rp-kpis--c6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.rp-kpi {
    position: relative; display: flex; gap: .7rem; align-items: flex-start; min-width: 0;
    padding: .8rem .9rem; background: var(--hs-surface); border: 1px solid var(--hs-line);
    border-radius: var(--hs-radius, 8px); box-shadow: var(--hs-shadow-xs, 0 1px 2px rgba(16, 24, 40, .04));
}
.rp-kpi::before { content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; border-radius: 8px 0 0 8px; background: var(--hs-neutral-br); }
.rp-kpi__icon {
    width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
    background: var(--hs-brand-bg); color: var(--hs-brand-fg);
}
.rp-kpi__body { min-width: 0; flex: 1 1 auto; }
.rp-kpi__lbl { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .045em; color: var(--hs-muted); line-height: 1.3; }
.rp-kpi__val { display: block; margin-top: .15rem; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--hs-text); line-height: 1.15; font-variant-numeric: tabular-nums; }
.rp-kpi__val .rp-unit { font-size: 12px; font-weight: 600; }
.rp-kpi__hint { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: .2rem; font-size: 11.5px; line-height: 1.35; color: var(--hs-muted); }
.rp-kpi--ok::before { background: var(--hs-good-solid); }
.rp-kpi--ok .rp-kpi__icon { background: var(--hs-good-solid); color: #fff; }
.rp-kpi--warn::before { background: #c98a1b; }
.rp-kpi--warn .rp-kpi__icon { background: #c98a1b; color: #fff; }
.rp-kpi--bad::before { background: var(--hs-bad-solid); }
.rp-kpi--bad .rp-kpi__icon { background: var(--hs-bad-solid); color: #fff; }
.rp-kpi--bad .rp-kpi__val { color: var(--hs-bad-fg); }

/* Secțiunile: card cu antet (titlu, subtitlu, instrumente) și tabel. */
.rp-card { background: var(--hs-surface); border: 1px solid var(--hs-line); border-radius: var(--hs-radius, 8px); box-shadow: var(--hs-shadow-xs, 0 1px 2px rgba(16, 24, 40, .04)); scroll-margin-top: 70px; overflow: hidden; }
.rp-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--hs-line-soft); background: var(--hs-surface); }
.rp-card__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 14px; font-weight: 700; color: var(--hs-text); }
.rp-card__count { font-size: 11px; font-weight: 600; padding: .05rem .45rem; border-radius: 999px; color: var(--hs-neutral-fg); background: var(--hs-neutral-bg); border: 1px solid var(--hs-neutral-br); font-variant-numeric: tabular-nums; }
.rp-card__sub { margin: .25rem 0 0; font-size: 12px; line-height: 1.45; color: var(--hs-muted); max-width: 110ch; }
.rp-card__tools { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.rp-card__search { position: relative; }
.rp-card__search i { position: absolute; left: .55rem; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--hs-subtle); pointer-events: none; }
.rp-card__search input { width: 13rem; padding-left: 1.7rem; font-size: 12.5px; }
.rp-card .table-responsive { margin: 0; }
.rp-card .table-responsive.is-scroll { max-height: 560px; overflow: auto; }
.rp-card .table { margin: 0; font-size: 13px; }
.rp-card .table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--hs-surface-alt); color: var(--hs-muted);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--hs-line); white-space: nowrap; vertical-align: bottom;
}
.rp-card .table tbody td { color: var(--hs-text-soft); border-color: var(--hs-line-soft); }
.rp-card .table tbody tr:nth-child(even) td { background: #fcfcfd; }
.rp-card .table td.text-end, .rp-card .table th.text-end { font-variant-numeric: tabular-nums; }
.rp-card .table tfoot th {
    position: sticky; bottom: 0; z-index: 1;
    background: var(--hs-primary-soft); color: var(--hs-text); font-weight: 700;
    border-top: 2px solid var(--hs-brand-br); font-variant-numeric: tabular-nums;
}
.rp-card .table tbody td:first-child { font-weight: 600; color: var(--hs-text); white-space: nowrap; }
/* Cifrele, sumele cu „lei" și datele nu se rup pe două rânduri; textul lung (motiv, client) da. */
.rp-card .table td.text-end, .rp-card .table th.text-end, .rp-card .table tfoot th { white-space: nowrap; }
.rp-card .table td:has(> .rp-tone), .rp-card .table td:has(> a.rp-drill) { white-space: nowrap; }
.rp-filters .fin-period__value { width: 11.6rem; }
/* Meniul rapoartelor: denumirea se vede întreagă (pe două rânduri la nevoie), nu tăiată cu „…". */
#report-page .hs-rail__link { align-items: flex-start; }
#report-page .hs-rail__link > i { margin-top: 0; line-height: 1.3; }
#report-page .hs-rail__txt { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }
#report-page .hs-rail__link .rp-rail-info { margin-top: .1rem; }
.rp-card .table tr.is-filtered-out { display: none; }
.rp-card__nomatch { padding: 1rem; text-align: center; font-size: 12.5px; color: var(--hs-muted); }

/* Încărcarea: schelet în forma raportului, nu o iconiță. */
.rp-skeleton { display: flex; flex-direction: column; gap: .9rem; }
.rp-skeleton span { display: block; border-radius: 8px; background: linear-gradient(90deg, #eef1f4 25%, #f6f8fa 50%, #eef1f4 75%); background-size: 200% 100%; animation: rp-shimmer 1.2s ease-in-out infinite; }
.rp-skeleton__kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.rp-skeleton__kpis span { height: 78px; }
.rp-skeleton__card { display: flex; flex-direction: column; gap: .5rem; padding: 1rem; background: var(--hs-surface); border: 1px solid var(--hs-line); border-radius: 8px; }
.rp-skeleton__card span { height: 14px; }
.rp-skeleton__card span:first-child { width: 30%; height: 18px; }
@keyframes rp-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rp-skeleton span { animation: none; } }

@media (max-width: 767.98px) {
    .rp-main { padding: .8rem; }
    .rp-head { flex-wrap: wrap; }
    .rp-head__tools { width: 100%; justify-content: flex-start; }
    .rp-card__head { flex-direction: column; }
    .rp-card__search input { width: 100%; }
}

/* Tipărirea: doar raportul (antet, filtrele active, cifre, tabele întregi). */
@media print {
    #hs-sidebar, .hs-topbar, .hs-footer, .hr-page, .hs-rail, .rp-filters, .rp-head__tools,
    .rp-card__tools, .rp-toc, .rp-chip button, #report_refresh { display: none !important; }
    .hs-rec, .rp-main { display: block !important; padding: 0 !important; background: #fff !important; border: 0 !important; box-shadow: none !important; }
    .rp-chips { display: flex !important; margin: .5rem 0; }
    .rp-head, .rp-card, .rp-kpi { box-shadow: none !important; break-inside: avoid; }
    .rp-card { margin-bottom: .8rem; }
    .rp-card .table-responsive.is-scroll { max-height: none !important; overflow: visible !important; }
    .rp-card .table thead th, .rp-card .table tfoot th { position: static !important; }
    .rp-drill { text-decoration: none !important; }
}

/* Ghidul raportului (modalul ⓘ): cuprins lipit în stânga, conținut derulabil în dreapta. */
.rp-help { display: grid; grid-template-columns: 230px minmax(0, 1fr); min-height: 320px; }
.rp-help > .hs-empty { grid-column: 1 / -1; }
.rp-help__toc {
    position: sticky; top: 0; align-self: start;
    display: flex; flex-direction: column; gap: 2px;
    padding: 1rem .75rem; border-right: 1px solid var(--hs-line, #e4e7ec); background: #f9fafb;
}
.rp-help__toc-link {
    display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; border-radius: 6px;
    color: #475467; font-size: 13px; font-weight: 500; text-decoration: none;
}
.rp-help__toc-link:hover { background: #eef2f6; color: var(--hs-primary, #134a6d); }
.rp-help__content { padding: 1.25rem 1.5rem 2rem; font-size: 13.5px; line-height: 1.6; color: #344054; }
.rp-help__summary {
    font-size: 14.5px; color: #1d2939; padding: .9rem 1rem; margin-bottom: 1.25rem;
    background: #f0f6fa; border-left: 3px solid var(--hs-primary, #134a6d); border-radius: 4px;
}
.rp-help__section { scroll-margin-top: .75rem; padding-bottom: .5rem; }
.rp-help__section + .rp-help__section { border-top: 1px solid var(--hs-line, #e4e7ec); padding-top: 1rem; }
.rp-help__title { display: flex; align-items: center; gap: .5rem; font-size: 16px; font-weight: 650; color: #1d2939; margin: 0 0 .75rem; }
.rp-help__title i { color: var(--hs-primary, #134a6d); }
.rp-help__h { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #667085; margin: 1.1rem 0 .5rem; }
.rp-help__list { padding-left: 1.25rem; margin-bottom: .75rem; }
.rp-help__list li + li { margin-top: .3rem; }
.rp-help__defs { margin: 0 0 .75rem; }
.rp-help__def { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: .25rem 1rem; padding: .5rem 0; border-bottom: 1px dashed #eaecf0; }
.rp-help__def:last-child { border-bottom: 0; }
.rp-help__def dt { font-weight: 600; color: #1d2939; }
.rp-help__def dd { margin: 0; }
.rp-help__formula, .rp-help__eq code {
    display: block; margin-top: .35rem; padding: .35rem .6rem; border-radius: 4px;
    background: #f2f4f7; color: #1d2939; font-size: 12.5px; white-space: pre-wrap;
}
.rp-help__eq { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 1rem; align-items: center; margin: .35rem 0; }
.rp-help__eq span { font-weight: 600; color: #1d2939; }
.rp-help__eq code { margin-top: 0; }
.rp-help__table { font-size: 12.5px; margin-bottom: .75rem; }
.rp-help__table th { background: #f9fafb; font-weight: 600; }
.rp-help__note { display: flex; align-items: flex-start; font-size: 13px; padding: .6rem .8rem; margin: .5rem 0 .9rem; }
@media (max-width: 767.98px) {
    .rp-help { grid-template-columns: 1fr; }
    .rp-help__toc { position: static; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--hs-line, #e4e7ec); }
    .rp-help__def, .rp-help__eq { grid-template-columns: 1fr; }
}

/* ---- Închiderea zilei (/day-close) ----
   Un rând de grup pe tehnician; rândul salvat e marcat discret, cel modificat și nesalvat
   are bara din stânga, ca să se vadă ce pleacă la „Salvează". */
#day-close-table .dc-group th {
    background: var(--hs-surface-2, #f8fafc);
    font-size: 13px;
    font-weight: 600;
    color: var(--hs-text, #1f2937);
    border-top: 1px solid #e5e7eb;
}
#day-close-table tr.is-saved td:first-child { box-shadow: inset 3px 0 0 #16a34a; }
#day-close-table tr.is-dirty td:first-child { box-shadow: inset 3px 0 0 #f59e0b; }

/* ---- Rapoarte: ⓘ din listă + tooltip-card cu descrierea ----
   Iconița stă estompată la capătul rândului (vizibilă, ca să se știe că există) și se aprinde
   la hover. Tooltip-ul e un card alb,
   nu caseta neagră implicită: titlul raportului cu accent navy, apoi descrierea, aliniate
   la stânga și lizibile pe mai multe rânduri. */
.hs-rail__link .rp-rail-info {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0 .1rem;
    line-height: 1;
    opacity: .45;
    cursor: help;
    transition: opacity .12s ease;
}
.hs-rail__link .rp-rail-info i { font-size: 13px; color: var(--hs-subtle, #98a2b3); }
.hs-rail__link:hover .rp-rail-info,
.hs-rail__link.active .rp-rail-info,
.hs-rail__link:focus-visible .rp-rail-info { opacity: 1; }
.hs-rail__link .rp-rail-info:hover i { color: var(--hs-primary, #134a6d); }

.tooltip.rp-tip {
    --bs-tooltip-bg: #ffffff;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-max-width: 320px;
    filter: drop-shadow(0 10px 24px rgba(16, 24, 40, .14)) drop-shadow(0 2px 6px rgba(16, 24, 40, .06));
}
.tooltip.rp-tip .tooltip-inner {
    max-width: 320px;
    padding: 12px 14px 12px 15px;
    text-align: left;
    color: #475467;
    background: #ffffff;
    border: 1px solid #e4e7ec;
    border-left: 3px solid var(--hs-primary, #134a6d);
    border-radius: 8px;
    font-size: 12.5px;
    line-height: 1.55;
}
.tooltip.rp-tip .rp-tip__title {
    display: block;
    margin-bottom: 4px;
    color: var(--hs-primary, #134a6d);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}
.tooltip.rp-tip .rp-tip__text { display: block; }

/* ==========================================================================
   PROGRAMĂRI — modalul „Sumar fișe" (templates/appointment/_modal_sheet_summary.html.twig)
   Cadrul vine din .ws-modal (antet navy cu emblemă, corp gri, panouri albe .ws-panel);
   aici doar banda de context, indicatorii și cele două tabele.
   ========================================================================== */
.appt-head__summary { margin-left: auto; }
.appt-head__summary + .appt-head__new { margin-left: 0; }

/* Banda de context: patru perechi etichetă / valoare, despărțite de linii verticale. */
.appt-sum__context {
    display: flex;
    flex-wrap: wrap;
    padding: .7rem .4rem;
}
.appt-sum__ctx-item {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
    padding: 0 1rem;
    border-right: 1px solid #edf0f2;
}
.appt-sum__ctx-item:last-child { border-right: 0; }
.appt-sum__ctx-item--end { margin-left: auto; }
.appt-sum__ctx-lbl {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #98a2b3;
}
.appt-sum__ctx-val {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 13px;
    font-weight: 600;
    color: #1d2939;
}
.appt-sum__ctx-val > i { color: var(--hs-primary, #134a6d); font-size: 13px; }
.appt-sum__ctx-val--quiet { font-weight: 500; color: #667085; }
.appt-sum__ctx-val--quiet > i { color: #98a2b3; }
.appt-sum__tag {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .05rem .5rem;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.appt-sum__tag--warn { background: #fff6ed; border: 1px solid #fedcbd; color: #b54708; }

/* Indicatorii: o bară de accent sus, numărul mare, rândul explicativ și, unde e o rată, un
   indicator de progres subțire. Tonul (bun / în lucru) e dat doar de accent, nu de fundal. */
.appt-sum__kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: .85rem;
}
.appt-sum__kpi {
    --kpi-accent: var(--hs-primary, #134a6d);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .9rem 1rem .85rem;
    background: #fff;
    border: 1px solid #edf0f2;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}
.appt-sum__kpi::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--kpi-accent);
}
.appt-sum__kpi--good { --kpi-accent: #12805c; }
.appt-sum__kpi--warn { --kpi-accent: #c4590c; }
.appt-sum__kpi-lbl {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #667085;
}
.appt-sum__kpi-val {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: #101828;
    font-variant-numeric: tabular-nums;
}
.appt-sum__kpi-sub { font-size: 12px; color: #667085; }
.appt-sum__kpi-sub strong { color: var(--kpi-accent); font-variant-numeric: tabular-nums; }
.appt-sum__kpi-meter {
    display: block;
    height: 4px;
    margin-top: .45rem;
    border-radius: 2px;
    background: #f1f3f5;
    overflow: hidden;
}
.appt-sum__kpi-meter span { display: block; height: 100%; background: var(--kpi-accent); border-radius: 2px; }

/* Antetul panourilor: titlul la stânga, totalul ca pastilă la dreapta. */
.appt-sum__phead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.appt-sum__count {
    padding: .05rem .55rem;
    border-radius: 999px;
    background: rgba(19, 74, 109, .08);
    color: var(--hs-primary, #134a6d);
    font-size: 12px;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.appt-sum__dot { display: inline-block; flex: 0 0 auto; width: 8px; height: 8px; margin-right: .5rem; border-radius: 50%; vertical-align: 1px; }
.appt-sum__name { color: #1d2939; }

/* Tabelul fișelor programate: rânduri aerisite, cifre aliniate, total pe fundal gri. */
.appt-sum__table { font-size: 13px; }
.appt-sum__table > :not(caption) > * > * { padding: .55rem .9rem; border-color: #f1f3f5; }
.appt-sum__table td, .appt-sum__table th { font-variant-numeric: tabular-nums; vertical-align: middle; }
.appt-sum__table thead th {
    background: #fff;
    border-bottom: 1px solid #e7ebef;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #98a2b3;
    white-space: nowrap;
}
.appt-sum__table tbody tr:hover > td { background: #fafbfc; }
.appt-sum__table tfoot td {
    background: #f8f9fb;
    border-top: 1px solid #e7ebef;
    border-bottom: 0;
    font-weight: 700;
    color: #101828;
}
.appt-sum__open { color: #b54708; font-weight: 600; }
.appt-sum__zero { color: #c0c6cf; }
.appt-sum__col-split { width: 132px; }
.appt-sum__split {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #fde7d3;
    overflow: hidden;
}
.appt-sum__split-done { display: block; height: 100%; background: #12805c; border-radius: 3px 0 0 3px; }

/* Distribuția fișelor închise: nume + număr + pondere, bară navy uniformă. */
.appt-sum__bars li + li { margin-top: .75rem; }
.appt-sum__bar-label { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: 13px; }
.appt-sum__bar-label .appt-sum__name { display: inline-flex; align-items: center; min-width: 0; }
.appt-sum__bar-num { display: inline-flex; align-items: baseline; gap: .5rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.appt-sum__bar-num strong { color: #101828; }
.appt-sum__bar-num span { min-width: 3.2em; text-align: right; font-size: 12px; color: #98a2b3; }
.appt-sum__bar { height: 6px; margin-top: .3rem; border-radius: 3px; background: #f1f3f5; overflow: hidden; }
.appt-sum__bar span { display: block; height: 100%; border-radius: 3px; background: var(--hs-primary, #134a6d); opacity: .85; }

.appt-sum__note {
    margin: 1rem 0 0;
    padding-top: .75rem;
    border-top: 1px dashed #e7ebef;
    font-size: 11.5px;
    line-height: 1.5;
    color: #8a94a0;
}
.appt-sum__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    padding: 2.25rem 1rem;
    font-size: 13px;
    color: #98a2b3;
}
.appt-sum__empty i { font-size: 1.6rem; color: #d0d5dd; }
.appt-sum__foot { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; color: #8a94a0; }

@media (max-width: 991.98px) {
    .appt-sum__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .appt-sum__ctx-item { padding: .35rem 1rem; border-right: 0; }
    .appt-sum__ctx-item--end { margin-left: 0; }
}
@media (max-width: 575.98px) {
    .appt-sum__kpis { grid-template-columns: 1fr; }
    .appt-sum__col-split { display: none; }
}