/*
 * COPIE. Originalul e `public/css/settings_console.css`, al portalului vechi.
 *
 * De pe 14 septembrie 2026 v4 nu mai ia NIMIC de la portalul CodeIgniter la
 * rulare: foile, fonturile, imaginile si pluginurile stau in `v4/web/public/`
 * si se servesc de sub `base`-ul aplicatiei (vezi `vite.config.ts`, PORTAL_STYLES).
 * Regulile de stil sunt neschimbate; in `app.css` caile `url(/public/...)` au
 * devenit relative la foaie (`url(../fonts/...)`, `url(../images/...)`).
 * Pana cand portalul vechi dispare, cele doua copii se tin la fel.
 */
/*
 * =============================================================================
 * settings_console.css - ce e numai al zonei de Settings
 * =============================================================================
 *
 * Componentele - butonul, campul, cardul, pastila, tabelul, modalul, titlul de
 * pagina - au plecat in `od_console.css`, fiindca sunt ale portalului, nu ale
 * setarilor: `label class="color"` e in 180 de fisiere, `<h4><strong>` in 189.
 * Foaia aia se aprinde pe zone, prin `od_console_zones()`.
 *
 * Aici a ramas numai ce tine de sasiul setarilor si n-are ce cauta intr-un
 * modul: rail-ul de navigare din stanga, cu submeniurile lui, si indesarea
 * zonei in care se incarca panourile.
 *
 * Regulile pornesc mai departe de la `body.settings`, care se pune singura:
 * toate controllerele de setari au `appModule = 'settings'`.
 */

/* ==========================================================================
 * 10. RAIL-UL DE NAVIGARE
 * ==========================================================================
 *
 * Era o banda intunecata de 270px (#2E313D) cu text alb - un al doilea portal
 * lipit de primul. Ramane naviga, si ramane si mecanismul: continutul se
 * incarca tot prin AJAX in `.page-content-wrapper`, nimic din JS nu se atinge.
 * Se schimba doar cum arata: hartie, nu tabla.
 *
 * Randul ales nu se mai marcheaza cu o dunga colorata la stanga, ci cu fundal
 * si scris mai inchis - o dunga si un fundal spun acelasi lucru de doua ori.
 */

body.settings .od-dark-sidebar {
    background: var(--od-surface);
    border-right: 1px solid var(--od-rule);
    color: var(--od-ink);
}

body.settings .od-dark-sidebar:after { background: var(--od-surface); }

body.settings .od-dark-sidebar .menu-header,
body.settings .od-dark-sidebar-nav > li { border-bottom: 0; }
body.settings .od-zone-nav > li { border-bottom: 0; }

/*
 * Aer in capul rail-ului.
 *
 * `_sidebar.scss` ii da `margin-top: -20px`, ca sa urce sub bara pe cand banda
 * era intunecata si trebuia sa se lipeasca de ea. Acum e hartie, si aceeasi
 * ridicare inseamna ca primul rand sta la paisprezece pixeli sub bara, in timp
 * ce titlul paginii de alaturi incepe la patruzeci si cinci - masurat in
 * browser, pe rail-ul de la Softsee.
 *
 * Ridicarea nu se scoate: ea tine fundalul alb lipit de bara, si fara ea ar
 * aparea o dunga de fundal intre ele. Se da inapoi doar inauntru, pe lista, cu
 * cei douazeci de pixeli luati plus respiratia unui cap de grup.
 */
/*
 * Temelia rail-ului zonei.
 *
 * Restul regulilor din foaia asta doar SUPRASCRIU ce scria `_sidebar.scss`
 * pentru `.od-dark-sidebar-nav`. Rail-ul zonei nu mai poarta clasa aia - ca sa
 * nu treaca prin ascultatorul din `app.js`, vezi sectiunea 14 - deci nu mai
 * mosteneste nici temelia: fara `display: block`, legaturile ies in rand si
 * randurile se calca unele peste altele. S-a si vazut asa, la prima masuratoare
 * dupa schimbarea clasei.
 *
 * Se scrie aici ce lua de acolo, si atat: restul il au regulile de mai jos.
 */
body.settings .od-zone-nav li,
body.settings .od-zone-nav li a { display: block; }

body.settings .od-zone-nav > li { position: relative; }

body.settings .od-zone-nav li a { position: relative; cursor: pointer; }

body.settings .od-dark-sidebar-nav { padding-top: 26px; }
body.settings .od-zone-nav { padding-top: 26px; }

/*
 * Numele zonei, in capul rail-ului.
 *
 * Doua rail-uri - Proactivitee si Opteemum - il aveau scris cu
 * `style="background-color: #1b1d25"` direct in markup: o banda aproape neagra,
 * ramasa de pe vremea cand tot rail-ul era intunecat. Cand rail-ul a trecut pe
 * hartie, banda a ramas - un dreptunghi negru in coltul din stanga sus, singurul
 * lucru inchis de pe ecran.
 *
 * Stilul s-a scos din machete, nu s-a batut cu `!important` de aici: era scris
 * inline in doua fisiere, deci se sterge din doua fisiere. `!important` se
 * foloseste cand nu se poate altfel - la Switchery, unde stilul il scrie
 * pluginul la fiecare initializare - nu ca sa nu deschid o macheta.
 */
body.settings .od-dark-sidebar .menu-header-lead {
    padding: 18px 20px 8px;
    font-size: var(--od-text-2xs);
    color: var(--od-ink-faint);
}

body.settings .od-dark-sidebar .menu-header {
    padding: 18px 20px 6px;
    font-size: var(--od-text-2xs);
    font-weight: var(--od-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--od-ink-faint);
}

body.settings .od-dark-sidebar-nav > li > a,
body.settings .od-zone-nav > li > a {
    height: auto;
    line-height: 20px;
    padding: 9px 20px;
    margin: 1px 10px;
    border-radius: 6px;
    font-size: var(--od-text-md);
    color: var(--od-ink-soft);
}

body.settings .od-dark-sidebar-nav > li > a .fa,
body.settings .od-zone-nav > li > a .fa,
body.settings .od-dark-sidebar-nav > li > a .fas,
body.settings .od-zone-nav > li > a .fas,
body.settings .od-dark-sidebar-nav > li > a .far,
body.settings .od-zone-nav > li > a .far {
    width: 18px;
    margin-right: 8px;
    color: var(--od-ink-faint);
}

body.settings .od-dark-sidebar-nav > li:hover > a,
body.settings .od-zone-nav > li:hover > a {
    background: var(--od-surface-alt);
    color: var(--od-ink);
}

/*
 * Aprinderea sta pe LEGATURA, nu pe randul intreg.
 *
 * `_sidebar.scss` pune `background: rgba(0,0,0,.1)` pe `<li>`, care e lat cat
 * rail-ul - deci iesea o banda de la un perete la altul, in loc de o pastila in
 * jurul cuvantului. Se stinge de pe `li`, si ramane doar cea de pe `a`, care are
 * marginile si coltul de mai sus.
 */
body.settings .od-dark-sidebar-nav > li.active,
body.settings .od-zone-nav > li.active,
body.settings .od-dark-sidebar-nav > li.selected,
body.settings .od-zone-nav > li.selected,
body.settings .od-dark-sidebar-nav > li > ul > li.active,
body.settings .od-zone-nav > li > ul > li.active,
body.settings .od-dark-sidebar-nav > li > ul > li.selected,
body.settings .od-zone-nav > li > ul > li.selected {
    background: none;
    box-shadow: none;
}

/*
 * Iconita: scoasa din coloana ei absoluta.
 *
 * `_sidebar.scss` o pune `position: absolute` intr-o coloana de 50 pe 50, ca sa
 * incapa sub indesarea de 50px de la stanga a randului. Randul are acum alta
 * indesare, deci coloana aia o lasa peste text. Sta in rand cu scrisul, ca
 * orice altceva.
 */
body.settings .od-dark-sidebar-nav > li > a i[class^="fa"],
body.settings .od-zone-nav > li > a i[class^="fa"],
body.settings .od-dark-sidebar-nav > li > a i[class*=" fa"],
body.settings .od-zone-nav > li > a i[class*=" fa"] {
    position: static;
    width: 18px;
    height: auto;
    line-height: inherit;
    font-size: 14px;
    text-align: left;
    margin-right: 9px;
}

/* Randurile de submeniu - aceeasi pastila ca cele de deasupra lor, doar
   trase mai la dreapta ca sa se vada ca atarna de un cap. */
body.settings .od-dark-sidebar-nav > li > ul > li > a,
body.settings .od-zone-nav > li > ul > li > a {
    height: auto;
    line-height: 20px;
    padding: 7px 14px 7px 41px;
    margin: 1px 10px;
    border-radius: 6px;
    font-size: var(--od-text-sm);
}

body.settings .od-dark-sidebar-nav > li > ul > li:hover > a,
body.settings .od-zone-nav > li > ul > li:hover > a {
    background: var(--od-surface-alt);
}

body.settings .od-dark-sidebar-nav > li > ul > li.active > a,
body.settings .od-zone-nav > li > ul > li.active > a,
body.settings .od-dark-sidebar-nav > li > ul > li.selected > a,
body.settings .od-zone-nav > li > ul > li.selected > a {
    background: var(--odc-pill-bg);
    color: var(--od-ink);
    font-weight: var(--od-weight-medium);
}

body.settings .od-dark-sidebar-nav > li.active > a,
body.settings .od-zone-nav > li.active > a,
body.settings .od-dark-sidebar-nav > li.selected > a,
body.settings .od-zone-nav > li.selected > a {
    background: var(--odc-pill-bg);
    color: var(--od-ink);
    font-weight: var(--od-weight-medium);
}

body.settings .od-dark-sidebar-nav > li.active > a .fa,
body.settings .od-zone-nav > li.active > a .fa,
body.settings .od-dark-sidebar-nav > li.active > a .fas,
body.settings .od-zone-nav > li.active > a .fas,
body.settings .od-dark-sidebar-nav > li.selected > a .fa,
body.settings .od-zone-nav > li.selected > a .fa,
body.settings .od-dark-sidebar-nav > li.selected > a .fas { color: var(--od-ink); }
body.settings .od-zone-nav > li.selected > a .fas { color: var(--od-ink); }

/*
 * Capul unui submeniu - noua ecrane il au (`Accounts`, cu `Active` si `Blocked`
 * sub el). Nu e o legatura care duce undeva, e o eticheta care deschide o
 * lista, deci nu se aprinde ca randul ales: numai scrisul se inchide la
 * culoare cand e deschis.
 */
body.settings .od-dark-sidebar-nav > li.submenu-header > a,
body.settings .od-zone-nav > li.submenu-header > a {
    color: var(--od-ink);
    font-weight: var(--od-weight-medium);
}

body.settings .od-dark-sidebar-nav > li.submenu-header.active > a,
body.settings .od-zone-nav > li.submenu-header.active > a,
body.settings .od-dark-sidebar-nav > li.submenu-header.selected > a,
body.settings .od-zone-nav > li.submenu-header.selected > a {
    background: none;
}

body.settings .od-dark-sidebar-nav li > ul > li > a,
body.settings .od-zone-nav li > ul > li > a {
    color: var(--od-ink-faint);
    padding: 0 20px 0 48px;
}

body.settings .od-dark-sidebar-nav li > ul > li:hover > a,
body.settings .od-zone-nav li > ul > li:hover > a,
body.settings .od-dark-sidebar-nav li > ul > li.active > a,
body.settings .od-zone-nav li > ul > li.active > a,
body.settings .od-dark-sidebar-nav li > ul > li.selected > a { color: var(--od-ink); }
body.settings .od-zone-nav li > ul > li.selected > a { color: var(--od-ink); }

body.settings .menu-block-divider {
    height: 1px;
    background: var(--od-rule-soft);
    margin: 10px 20px;
}

/* ==========================================================================
 * 12. LEGATURILE
 * ========================================================================== */

body.settings a { color: var(--od-ink); }
body.settings a:hover, body.settings a:focus { color: var(--od-ink); }

body.settings .page-content-wrapper { padding: 4px 0 32px; }

/* ==========================================================================
 * 14. FILELE ORIZONTALE - ETAJUL AL TREILEA
 * ==========================================================================
 *
 * Setarile aveau doua etaje de navigare si trei intrebari de raspuns: in ce
 * zona esti, pe ce ecran, si pe ce fila din el. Al treilea nu avea loc, asa ca
 * statea in stanga, in acelasi rail cu al doilea - si cine deschidea Company
 * vedea in stanga "Information, Contacts, Groups", fara sa mai afle vreodata
 * ca langa Company mai sunt Authentication si User Accounts.
 *
 * Acum stanga e a ZONEI, iar filele ecranului trec sus, orizontal.
 *
 * Nu s-a schimbat nimic din CUM merg: erau deja file - se apasa, se incarca
 * fragmentul prin AJAX in `.page-content-wrapper` - doar ca desenate una sub
 * alta. S-au pastrat pana si numele de clasa pe care le asculta scriptul
 * fiecarui ecran (`menu-tab`, `menu-link`), ca sa nu se atinga logica.
 *
 * Clasa listei INSA s-a schimbat, si nu de forma. Scripturile ascultau pe
 * `ul.od-dark-sidebar-nav` - si nu doar ale ecranelor: unul sta si in
 * `public/js/app/app.js`, in bundle. Zece din unsprezece dadeau
 * `preventDefault()` INAINTE sa se uite ce fel de rand s-a apasat. Rail-ul
 * zonei e facut din legaturi adevarate, deci ar fi fost apasate si fara
 * raspuns. Etajul trei are acum `od-tabbar-nav`, rail-ul are `od-zone-nav`,
 * si niciunul nu mai trece prin ascultatorul aceluia.
 */

body.settings .od-tabbar {
    margin-left: 270px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--od-rule);
    overflow-x: auto;
}

body.settings .od-tabbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

body.settings .od-tabbar-nav > li { border-bottom: 0; }

body.settings .od-tabbar-nav > li > a {
    display: block;
    padding: 10px 14px;
    border-bottom: 2px solid transparent;
    font-size: var(--od-text-md);
    color: var(--od-ink-soft);
    text-decoration: none;
}

body.settings .od-tabbar-nav > li > a .fa,
body.settings .od-tabbar-nav > li > a .fas,
body.settings .od-tabbar-nav > li > a .far {
    margin-right: 6px;
    color: var(--od-ink-faint);
}

body.settings .od-tabbar-nav > li > a:hover { color: var(--od-ink); }

/* Fila deschisa: o linie sub cuvant, nu o pastila. Pastila e a rail-ului din
   stanga, si daca amandoua ar folosi-o n-ai mai sti care raspunde la care
   intrebare. */
body.settings .od-tabbar-nav > li.active > a,
body.settings .od-tabbar-nav > li.selected > a {
    color: var(--od-ink);
    font-weight: var(--od-weight-medium);
    border-bottom-color: var(--od-ink);
}

body.settings .od-tabbar-nav > li.active > a .fa,
body.settings .od-tabbar-nav > li.active > a .fas,
body.settings .od-tabbar-nav > li.selected > a .fa,
body.settings .od-tabbar-nav > li.selected > a .fas { color: var(--od-ink); }

/*
 * Capul de grup, in banda orizontala.
 *
 * Doua ecrane isi impart filele in grupe - General Settings are "Service
 * Provider" si "Agent Messages". Pe verticala era un titlu deasupra grupului;
 * pe orizontala devine o eticheta mica INAINTEA lui, care spune de unde incepe
 * grupul urmator. Primul nu are nevoie de linie despartitoare, restul da.
 */
body.settings .od-tabbar-nav > li.menu-header {
    padding: 0 12px 0 4px;
    font-size: var(--od-text-2xs);
    font-weight: var(--od-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--od-ink-faint);
}

body.settings .od-tabbar-nav > li.menu-header ~ li.menu-header {
    margin-left: 8px;
    padding-left: 14px;
    border-left: 1px solid var(--od-rule-soft);
}

/* Despartitorul de la coada listei era o linie orizontala sub ultimul rand.
   Intr-o banda orizontala n-are ce desparti - e la capat. */
body.settings .od-tabbar-nav > li.menu-block-divider { display: none; }

/*
 * Bara de derulare a rail-ului.
 *
 * `_sidebar.scss` ii da `overflow-y: scroll` - adica santul se vede mereu,
 * plin sau gol - iar fiecare ecran chema `slimScroll` ca sa-l acopere cu unul
 * desenat. Rail-ul e acum al zonei si vine din macheta, nu din ecran, deci
 * n-are cine sa mai cheme pluginul.
 *
 * Si e mai bine asa: `auto` in loc de `scroll` inseamna ca santul apare cand
 * chiar e ceva de derulat. Sapte randuri intr-un ecran de 900 nu sunt.
 */
body.settings .od-dark-sidebar { overflow-y: auto; overflow-x: hidden; }

/*
 * Cum ARATA santul nu se mai scrie aici.
 *
 * Rail-ul a fost primul loc din portal cu bara desenata de noi - opt pixeli,
 * gri, cu santul gol. De pe 9 septembrie 2026 toate barele portalului arata
 * asa (`od_ux.css`, sectiunea 8: subtire in repaus, groasa cat sa se prinda
 * cand esti cu mouse-ul pe ea, in culoarea locului). Regula de aici era scrisa
 * cu o clasa, deci ar fi batut-o pe aia si rail-ul ar fi ramas singurul loc cu
 * bara de alt fel - motiv pentru care s-a scos, nu s-a rescris.
 *
 * In Settings culoarea locului e chiar griul de dinainte, deci pe ecran nu se
 * schimba decat grosimea.
 */

/* ==========================================================================
 * 16. INVELISUL ZONEI
 * ==========================================================================
 *
 * Rail-ul zonei e `position: fixed`, lat de 270. Ecranele care se incarca prin
 * file aveau deja un `.page-content-wrapper` cu marginea lui. Ecranele care isi
 * scriu continutul direct - Contacts, Agent Releases, Agent Install - n-aveau
 * nimic, si continutul lor ar fi ajuns SUB rail.
 *
 * Invelisul il pune acum macheta, deci il primesc toate, si cele de maine.
 * Marginea se muta pe el; cea dinauntru se stinge, ca sa nu se adune doua.
 */

body.settings .od-zone-body { margin-left: 270px; }

body.settings .od-zone-body > .page-content-wrapper,
body.settings .od-zone-body > .od-tabbar { margin-left: 0; }

/* ==========================================================================
 * 17. A DOUA COLOANA - CAND ETAJUL TREI E UN ARBORE
 * ==========================================================================
 *
 * Aproape toate ecranele si-au mutat etajul al treilea in file orizontale. Unul
 * nu poate: alarmele. Acolo sunt cincizeci si sapte de tipuri grupate pe
 * categorii - un arbore de doua niveluri - si un arbore nu incape pe orizontala.
 *
 * Deci ramane vertical, dar LANGA rail-ul zonei, nu peste el. Fara asta cele
 * doua `aside` s-ar aseza exact unul peste altul: amandoua `position: fixed`,
 * late de 270, pornind din acelasi loc in flux.
 *
 * Totul se socoteste fata de INVELIS: arborele sta inauntrul lui, iar invelisul
 * e deja impins cu 270. `margin-left: 0` il aseaza fix la dreapta rail-ului de
 * zona - `_sidebar.scss` ii da `-20px`, si ala l-ar trage peste el.
 *
 * DUPA sectiunea 16, si nu inainte, dinadins. Regula de acolo care stinge
 * marginea dinauntru are ACEEASI specificitate cu cea de aici, deci castiga
 * cine e scris ultimul. Scrise invers, arborele si continutul cadeau amandoua
 * in acelasi loc - masurat asa, nu banuit.
 *
 * Fara prag de latime: doua rail-uri lasa 560 de pixeli de continut pe un ecran
 * de 1100, ceea ce e destul. Un al treilea comportament, pe care nu-l poate
 * proba nimeni aici, ar fi fost mai mult risc decat castig.
 */

body.settings .od-dark-sidebar.od-subrail {
    margin-left: 0;
    border-left: 1px solid var(--od-rule);
}

body.settings .od-zone-body > .od-subrail ~ .page-content-wrapper,
body.settings .od-zone-body > .od-subrail ~ .od-tabbar { margin-left: 270px; }

/* ==========================================================================
 * 18. BARA ZONELOR SE VEDE
 * ==========================================================================
 *
 * `app.css` o ascunde, de mult si pentru toate ecranele de setari:
 *
 *     .settings #page-header #page-header-nav { display: none; }
 *
 * De aia "apas Settings si nu apare nimic", si de aia nu se intampla nimic nici
 * daca treci cu mouse-ul sau apesi: elementul nu e doar strans, e scos din
 * pagina. Nicio schimbare de PHP sau de JS n-avea cum sa-l arate.
 *
 * Se vede si de ce n-a sarit nimanui in ochi: barele de setari care au existat
 * pana acum - rapoartele si alarmele - erau scrise crezand ca se vad, iar
 * comentariul din codul vechi spunea chiar ca "restul ecranelor se deschideau cu
 * bara GOALA". Nu goala: ascunsa.
 *
 * Regula sta AICI si nu in sass fiindca `app.css` se construieste cu
 * laravel-mix, iar `node_modules` e gol intr-o sesiune noua. Selectorul incepe
 * cu `body` ca sa treaca peste cel de sus fara `!important`: acela are doua
 * id-uri si o clasa, asta are in plus un element.
 *
 * Numai `display` se schimba. Restul mecanismului - strangerea, aratarea la
 * trecerea cu mouse-ul, apasarea care o prinde, chevronul de langa nume - vine
 * din `header_nav_reveal.css` si merge aici ca oriunde: bara stransa e tot
 * `flex`, doar mutata deasupra ecranului cu `translateY`.
 *
 * `flex`, nu `block`: exact ce are bara pe orice alt modul - vezi
 * `#page-header #page-header-nav` in app.css, care o aseaza pe orizontala si o
 * lasa sa se deruleze cand nu incap toate filele.
 */

body.settings #page-header #page-header-nav { display: flex; }

/* =============================================================================
   ECRAN MIC: CONTINUTUL ISI IA INAPOI LOCUL RAIL-ULUI
   -----------------------------------------------------------------------------
   `app.css` impinge rail-ul in afara ecranului sub 769px (`left: -270px`) - e
   tiparul obisnuit de sertar. Dar nimeni nu i-a luat inapoi si LOCUL: marginea
   de 270px a ramas, deci pe un ecran de 375px continutul primea 105px.

   Nu "greu de citit" - de nefolosit, pe toate cele saptesprezece ecrane de
   setari. Iar bannerul de deasupra spunea, in acelasi timp, "pagina de dedesubt
   inca merge".

   Reparatia e marginea. Meniul ramane inchis - drumul catre el e randul de
   comutare catre fata de telefon, din acelasi banner.
   ============================================================================= */

@media (max-width: 769px) {
    body.settings .od-zone-body,
    body.settings .od-zone-body > .od-subrail ~ .page-content-wrapper,
    body.settings .od-zone-body > .od-subrail ~ .od-tabbar {
        margin-left: 0;
    }
}


/* =============================================================================
   20. EXPLICATIA DE SUB O INTRARE DIN MENIUL ROTITEI
   -----------------------------------------------------------------------------

   `.od-zone-hint` se scria de cand exista cele trei zone, si n-a avut NICIODATA
   o regula. Un `<span>` fara reguli sta pe randul dinaintea lui, lipit de el:
   in meniu ieseau randuri de felul "Global Customers, contracts, licenses, the
   agent" si "Reports What goes out, to whom, and how often" - numele si
   explicatia topite intr-o singura propozitie care nu spune nici una, nici alta.

   Regula e o linie: explicatia coboara sub nume, mai mica si stinsa. Scrisa
   aici, si nu in sass, fiindca `app.css` se construieste cu laravel-mix si
   `node_modules` e gol intr-o sesiune noua - iar foaia asta se incarca oricum
   pe orice pagina (vezi antetul).
   ============================================================================= */

#settings-dropdown .od-zone-hint {
    display: block;
    margin-top: 1px;
    padding-left: 18px;
    font-size: 11px;
    line-height: 1.35;
    color: #8a929c;
    white-space: normal;
}

/* Randul rosu al seifului: rosul e al NUMELUI, nu si al explicatiei de sub el -
   altfel trei randuri rosii intr-un meniu gri arata a eroare, nu a atentionare. */
#settings-dropdown a[href$="settings/pass_safe/index"] .od-zone-hint {
    color: #c98b8b;
}

/* ==========================================================================
 * 21. RAIL-UL STRANS: NUMAI ICONITELE, SI SE DESFACE LA MAUS
 * ==========================================================================
 *
 * Rail-ul lua 270 de pixeli din latimea ecranului pe TOATE ecranele de setari,
 * si ii lua tot timpul - inclusiv cat citesti un tabel lat, cand din el nu-ti
 * trebuie decat sa stii unde esti. Ramane 64: iconita fiecarui ecran, si atat.
 * La trecerea mausului se desface la 270, PESTE continut, nu langa el: latimea
 * paginii nu se schimba, deci nimic nu se muta sub cursor cat te uiti.
 *
 * Numele se sting cu `opacity`, nu cu `display`, si randurile isi tin
 * inaltimea: desfacerea aduce cuvintele inapoi exact acolo unde erau, in loc
 * sa impinga lista in jos sub ochiul care o citeste. Cat sunt stinse, numele
 * nu se pot nici apasa, nici citi de un cititor de ecran - de-aia `title` de pe
 * legatura, pus mai demult, ramane singurul care spune ce e iconita.
 *
 * SUB-RAIL-UL NU SE STRANGE. La alarme, etajul trei e un arbore de 57 de
 * tipuri pe categorii (vezi sectiunea 17); un arbore de doua niveluri nu se
 * poate spune din iconite. `:not(.od-subrail)` il lasa in pace.
 *
 * Nimic din asta nu e JavaScript: e `:hover` pe rail. Un buton de fixare ar fi
 * cerut o preferinta tinuta pe om, si n-a cerut-o nimeni inca.
 */

body.settings .od-dark-sidebar:not(.od-subrail) {
    width: 64px;
    transition: width 160ms ease;
}

body.settings .od-dark-sidebar:not(.od-subrail):hover {
    width: 270px;
    z-index: 1001;
    box-shadow: 2px 0 12px rgba(20, 25, 35, .14);
}

/* Marginea continutului o da rail-ul STRANS: desfacut, el pluteste deasupra. */
body.settings .od-zone-body { margin-left: 64px; }

/* Iconita ramane in acelasi loc, stransa sau desfacuta: 64px de rail au
   iconita in mijloc, iar cand se desface numele creste la dreapta ei. */
body.settings .od-zone-nav > li > a { white-space: nowrap; overflow: hidden; }

body.settings .od-zone-nav > li > a > .fa,
body.settings .od-zone-nav > li > a > .fas,
body.settings .od-zone-nav > li > a > .far,
body.settings .od-zone-nav > li > a > .fab {
    width: 20px;
    text-align: center;
}

body.settings .od-dark-sidebar:not(.od-subrail):not(:hover) .od-rail-label {
    opacity: 0;
    pointer-events: none;
}

body.settings .od-rail-label {
    opacity: 1;
    transition: opacity 120ms ease;
}

/*
 * Capul de zona ("General", "Global", "Policies") nu are iconita, deci strans
 * ar fi fost un rand gol. Ii ramane inaltimea - altfel lista ar sari in sus la
 * desfacere - dar primeste o liniuta, ca sa se vada ca acolo incepe ceva.
 */
body.settings .od-dark-sidebar:not(.od-subrail):not(:hover) .menu-header-lead:after {
    content: "";
    display: block;
    width: 20px;
    height: 1px;
    margin: 0 auto;
    background: var(--od-rule);
}

/* Bara de file porneste de la rail-ul strans, ca si restul continutului. */
body.settings .od-tabbar { margin-left: 64px; }

@media (max-width: 769px) {
    /* Sub prag rail-ul e un sertar scos din ecran (sectiunea 19): nu se strange,
       fiindca nu se vede deloc. */
    body.settings .od-dark-sidebar:not(.od-subrail),
    body.settings .od-dark-sidebar:not(.od-subrail):hover { width: 270px; }

    body.settings .od-rail-label { opacity: 1; }
    body.settings .od-tabbar { margin-left: 0; }
}

/* ==========================================================================
 * 22. LINIA DE SUB TITLU NU MAI TAIE BUTONUL DIN DREAPTA
 * ==========================================================================
 *
 * Sase ecrane de setari scriu titlul, apoi un buton `pull-right` ("New user",
 * "Add group"...), apoi `<hr/>`. Butonul pluteste - deci iese din flux - iar
 * `<hr>` e o cutie de bloc, si cutiile de bloc nu sunt impinse in jos de un
 * element plutit: doar textul curge in jurul lui. Asa a ajuns linia sa treaca
 * exact prin mijlocul butonului.
 *
 * Un `clear` pe linie e leacul intreg, si e unul singur pentru toate sase.
 * Machetele raman cum sunt: nu e nimic gresit in ele, lipsea doar regula.
 */
body.settings hr { clear: both; }

/* ==========================================================================
 * 23. BANDA DE FILE PE GRUPURI, CU TITLUL DEASUPRA
 * ==========================================================================
 *
 * Tiparul obisnuit al benzii (sectiunea 13) tine titlul grupului IN rand, ca o
 * eticheta mica inaintea filelor lui. Merge cat timp grupurile sunt marunte.
 * La conturi nu mergea: doua grupuri, sapte file, si titlul "Users" arata ca
 * inca o fila pe care nu se poate apasa.
 *
 * Aici fiecare grup e o coloana - titlul centrat deasupra filelor lui - si
 * intre grupuri o linie. Se cere anume, cu `od-tabbar-grouped` pe `nav`, deci
 * celelalte saisprezece ecrane de setari raman neatinse.
 *
 * `overflow: visible` in loc de `auto`: lista care se desface din Accounts e
 * asezata absolut, iar o bara cu derulare pe o axa capata derulare si pe
 * cealalta - si i-ar fi taiat lista chiar sub buton. Cand nu incap, grupurile
 * trec pe randul urmator; sunt doua, nu douazeci.
 */

body.settings .od-tabbar-grouped {
    overflow: visible;
}

body.settings .od-tabbar-grouped .od-tabbar-nav {
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    white-space: normal;
}

body.settings .od-tabbar-grouped .od-tabgroup {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
}

body.settings .od-tabbar-grouped .od-tabgroup:first-child { padding-left: 0; }

body.settings .od-tabbar-grouped .od-tabgroup + .od-tabgroup {
    border-left: 1px solid var(--od-rule-soft);
}

body.settings .od-tabbar-grouped .od-tabgroup-title {
    padding: 7px 0 1px;
    text-align: center;
    font-size: var(--od-text-2xs);
    font-weight: var(--od-weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--od-ink-faint);
}

body.settings .od-tabbar-grouped .od-tabgroup-tabs {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
}

body.settings .od-tabbar-grouped .od-tabgroup-tabs > li { border-bottom: 0; }

body.settings .od-tabbar-grouped .od-tabgroup-tabs > li > a,
body.settings .od-tabbar-grouped .od-tabdrop-btn {
    display: block;
    padding: 8px 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    font-size: var(--od-text-md);
    color: var(--od-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

body.settings .od-tabbar-grouped .od-tabgroup-tabs > li > a .fa,
body.settings .od-tabbar-grouped .od-tabgroup-tabs > li > a .fas,
body.settings .od-tabbar-grouped .od-tabgroup-tabs > li > a .far,
body.settings .od-tabbar-grouped .od-tabdrop-btn > .fa,
body.settings .od-tabbar-grouped .od-tabdrop-btn > .fas {
    margin-right: 6px;
    color: var(--od-ink-faint);
}

body.settings .od-tabbar-grouped .od-tabgroup-tabs > li > a:hover,
body.settings .od-tabbar-grouped .od-tabdrop-btn:hover { color: var(--od-ink); }

/* Fila deschisa: aceeasi linie sub cuvant ca in banda obisnuita. */
body.settings .od-tabbar-grouped .od-tabgroup-tabs > li.active > a,
body.settings .od-tabbar-grouped .od-tabgroup-tabs > li.selected > a,
body.settings .od-tabbar-grouped .od-tabdrop.active > .od-tabdrop-btn {
    color: var(--od-ink);
    font-weight: var(--od-weight-medium);
    border-bottom-color: var(--od-ink);
}

body.settings .od-tabbar-grouped .od-tabgroup-tabs > li.active > a .fa,
body.settings .od-tabbar-grouped .od-tabgroup-tabs > li.active > a .fas,
body.settings .od-tabbar-grouped .od-tabdrop.active > .od-tabdrop-btn > .fa {
    color: var(--od-ink);
}

/* --- Lista care se desface din Accounts ---------------------------------- */

body.settings .od-tabbar-grouped .od-tabdrop { position: relative; }

/* Pe ce esti, scris chiar pe buton: inchisa, lista nu se vede, si fara asta
   n-ai sti daca te uiti la conturile active sau la cele blocate. */
body.settings .od-tabbar-grouped .od-tabdrop-which {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 9px;
    background: var(--od-rule-soft);
    font-size: var(--od-text-2xs);
    font-weight: var(--od-weight-semibold);
    color: var(--od-ink-soft);
}

body.settings .od-tabbar-grouped .od-tabdrop-which:empty { display: none; }

body.settings .od-tabbar-grouped .od-tabdrop-caret {
    margin-left: 6px;
    font-size: var(--od-text-2xs);
    transition: transform 120ms ease;
}

body.settings .od-tabbar-grouped .od-tabdrop.is-open .od-tabdrop-caret {
    transform: rotate(180deg);
}

body.settings .od-tabbar-grouped .od-tabdrop-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1003;
    min-width: 168px;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    background: var(--od-surface);
    border: 1px solid var(--od-rule);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(20, 25, 35, .12);
}

body.settings .od-tabbar-grouped .od-tabdrop.is-open .od-tabdrop-menu { display: block; }

body.settings .od-tabbar-grouped .od-tabdrop-menu > li > a {
    display: block;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    font-size: var(--od-text-md);
    color: var(--od-ink-soft);
    text-decoration: none;
    white-space: nowrap;
}

body.settings .od-tabbar-grouped .od-tabdrop-menu > li > a:hover {
    background: var(--od-rule-soft);
    color: var(--od-ink);
}

body.settings .od-tabbar-grouped .od-tabdrop-menu > li.active > a,
body.settings .od-tabbar-grouped .od-tabdrop-menu > li.selected > a {
    color: var(--od-ink);
    font-weight: var(--od-weight-medium);
}

/* ==========================================================================
 * 24. MENIUL UNUI MODUL - CAND ECRANUL NU E IN NICIO ZONA
 * ==========================================================================
 *
 * Setarile Easeedesk nu sunt intr-o zona. `SettingsMenu::items()` n-are niciun
 * prefix `settings/easeedesk`, deci `zoneFor()` intoarce sirul gol si rail-ul
 * zonei nu se deseneaza acolo: coloana din stanga e goala pe toate cele
 * sasezeci de ecrane, si de pe unul nu se putea ajunge la altul.
 *
 * Meniul modulului o ia intreaga. Cele doua nu se pot suprapune - unul apare
 * numai unde celalalt lipseste - deci nu e nevoie de nimic care sa le desparta,
 * doar de un invelis al lui, ca cel din sectiunea 16.
 *
 * NU SE STRANGE. Sectiunea 21 strange orice `.od-dark-sidebar` la 64px si il
 * desface la maus. Aici nu merge, din acelasi motiv pentru care nu merge nici
 * la sub-rail-ul alarmelor (sectiunea 17): e un arbore de doua niveluri, iar
 * randurile de sub un cap de submeniu n-au iconita - stranse, n-ar ramane din
 * ele nimic de citit. Regulile de mai jos au aceeasi specificitate cu cele de
 * acolo si sunt scrise DUPA, deci castiga; `:hover` se stinge la fel, altfel ar
 * aparea o umbra la trecerea mausului peste un meniu care oricum nu se misca.
 *
 * -----------------------------------------------------------------------------
 * 10 SEPTEMBRIE 2026: NU NUMAI EASEEDESK
 * -----------------------------------------------------------------------------
 *
 * Clasa asta o poarta acum meniul din stanga al TUTUROR ecranelor de setari ale
 * unui modul: Inventoree, Softsee, Opteemum, Proactivitee, Agent Install,
 * Remote Connect, API Integration si Easeetask. Niciunul nu e intr-o zona - nici
 * unul din prefixele lor nu apare in `SettingsMenu::items()` - deci sunt exact
 * cazul descris mai sus.
 *
 * Pana azi cadeau sub sectiunea 21 si se strangeau la 64px. Argumentul ei nu e
 * si al lor: rail-ul zonei isi ascunde numele cu `.od-rail-label`, meniurile
 * astea scriu eticheta direct in legatura, deci strans nu ramanea o iconita, ci
 * un cuvant TAIAT in doua - „Bran", „Disco". Si mai era ceva: latimea o dadea
 * rail-ul strans, dar continutul lor sta intr-un `.page-content-wrapper` care
 * isi tine marginea de 270 din `app.css` (sectiunea 16 o stinge numai inauntrul
 * unui `od-zone-body`, iar acolo nu era niciunul). Masurat in Edge la 1440:
 * meniu 0-64, continut de la 290 - doua sute sase pixeli de nimic intre ele.
 * Cu clasa asta meniul umple chiar locul care i se lasase.
 *
 * SETARILE DE LICENTE FAC EXCEPTIE si poarta `od-subrail`, nu clasa de aici:
 * `settings/licenses` E intr-o zona - `SettingsMenu` il prinde sub intrarea
 * Customers - deci acolo sunt doua rail-uri pe aceeasi pagina, si asta e
 * situatia sectiunii 17, nu a acesteia.
 */

body.settings .od-dark-sidebar.od-module-rail { width: 270px; }

body.settings .od-dark-sidebar.od-module-rail:hover {
    width: 270px;
    z-index: auto;
    box-shadow: none;
}

/* Invelisul continutului, ca `od-zone-body`: ecranele Easeedesk isi scriu
   continutul direct, fara `.page-content-wrapper`, deci ar fi ajuns SUB meniu.
   Cand totusi au unul, marginea lui se stinge, ca sa nu se adune doua. */
body.settings .od-module-body { margin-left: 270px; }
body.settings .od-module-body > .page-content-wrapper,
body.settings .od-module-body > .od-tabbar { margin-left: 0; }

/*
 * Sageata capului de submeniu.
 *
 * `_sidebar.scss` o pune singura pe orice `a:not(:only-child)` - capul are un
 * `<ul>` langa el, randurile obisnuite nu - si o intoarce cand `<li>` e
 * `active`. Culoarea insa e de pe vremea benzii intunecate,
 * `rgba(255,255,255,.4)`: pe hartie ar fi fost alb pe alb. Rail-ul zonei n-are
 * submeniuri, deci pana acum nu se lovise nimeni de ea.
 */
body.settings .od-dark-sidebar-nav a:not(:only-child):after { color: var(--od-ink-faint); }
body.settings .od-dark-sidebar-nav .active > a:not(:only-child):after { color: var(--od-ink); }

/* Insigna „beta" de langa un nume: langa, nu lipita de el. */
body.settings .od-dark-sidebar-nav .menu-tab > a > .label { margin-right: 6px; }

/*
 * Pastila randului aprins, cu valoarea la ea.
 *
 * `--odc-pill-bg` e definita pe `body.od-console`, iar clasa aia o pune
 * `header.php` din `od_console_zones()`.
 *
 * A stat aici o zi cu o valoare de rezerva scrisa pe loc
 * (`var(--odc-pill-bg, #e4e8ec)`), fiindca in v4 nu punea nimeni clasa:
 * scheletul scria pe `<body>` doar numele modulului, tokenul nu exista, iar
 * `background: var(--odc-pill-bg)` era o declaratie invalida - randul pe care
 * STAI nu se vedea ca ales (masurat: fundal `rgba(0, 0, 0, 0)`).
 *
 * Rezerva a plecat pe 10 septembrie 2026: `Shell.tsx` pune acum `od-console`
 * pe zona de Settings, ca `header.php`, deci tokenul are de unde veni pe
 * amandoua portalurile. O rezerva ramasa dupa ce lipsa s-a reparat nu e o
 * plasa de siguranta, e o a doua definitie a aceleiasi culori, pusa unde n-o
 * cauta nimeni.
 *
 * `active` langa `selected`, de pe 10 septembrie 2026: meniul Easeedesk isi
 * marcheaza randul cu `selected`, dar celelalte opt meniuri de modul - care
 * poarta clasa de aici de azi - il marcheaza cu `active`, ca machetele vechi
 * din care au fost mutate. Aceeasi lipsa, aceeasi rezerva.
 *
 * `:not(.submenu-header)` fiindca acolo nu e un rand pe care stai, ci eticheta
 * care deschide o lista, si ea poarta `active` cat lista e deschisa. Regula de
 * la sectiunea 10 care ii stinge fundalul are (0,4,2), asta ar avea (0,4,3) -
 * deci ar castiga, si capul deschis s-ar aprinde ca ales.
 */
body.settings .od-module-rail .od-dark-sidebar-nav > li.selected:not(.submenu-header) > a,
body.settings .od-module-rail .od-dark-sidebar-nav > li.active:not(.submenu-header) > a,
body.settings .od-module-rail .od-dark-sidebar-nav > li > ul > li.selected > a,
body.settings .od-module-rail .od-dark-sidebar-nav > li > ul > li.active > a,
body.settings .od-subrail .od-dark-sidebar-nav > li.selected:not(.submenu-header) > a,
body.settings .od-subrail .od-dark-sidebar-nav > li.active:not(.submenu-header) > a,
body.settings .od-subrail .od-dark-sidebar-nav > li > ul > li.selected > a,
body.settings .od-subrail .od-dark-sidebar-nav > li > ul > li.active > a {
    background: var(--odc-pill-bg);
    color: var(--od-ink);
    font-weight: var(--od-weight-medium);
}

/*
 * ECRAN MIC: continutul isi ia inapoi locul meniului.
 *
 * Sub 769px `app.css` scoate orice `.od-dark-sidebar` din ecran
 * (`left: -270px`), ca pe orice sertar - dar locul lui ramanea luat:
 * `.page-content-wrapper` isi tine marginea de 270 din `app.css`, si nimeni
 * n-o stingea. Masurat in Edge pe un ecran de 375: continutul incepea la 290 si
 * era lat de 65 de pixeli. Sectiunea 19 face fix reparatia asta pentru
 * `od-zone-body`; aici e pentru meniul unui modul, care pana azi statea strans
 * si deci nu se lovise nimeni de ea.
 *
 * Scrisa LA COADA foii dinadins. Regula care da 270 e mai sus si are aceeasi
 * specificitate; la egalitate castiga cine e scris ultimul, nu cine e intr-un
 * `@media`. Asa a ramas fara efect si perechea din sectiunea 19, pe care
 * sectiunea 21 o rescrie mai jos - si nu se atinge de aici, fiindca e a
 * rail-ului de ZONA, care isi tine purtarea de azi.
 */
@media (max-width: 769px) {
    body.settings .od-module-rail ~ .page-content-wrapper,
    body.settings .od-module-body { margin-left: 0; }
}