/*
 * COPIE. Originalul e `public/css/od_ux.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.
 */
/*
 * =============================================================================
 * od_ux.css - perechea lui `public/js/od_ux.js`
 * =============================================================================
 *
 * Trei lucruri, toate pe tot portalul:
 *
 *   1. cum arata o lista goala, una filtrata pana la zero si una care a cazut
 *   2. contrastul suprafetelor pe care sta text alb
 *   3. ce vede omul care deschide portalul pe un ecran mic
 *
 * Culorile vin din `tokens.css`, incarcat inaintea acestui fisier.
 */


/* =============================================================================
   1. GOL, FILTRAT, CAZUT
   ============================================================================= */

.od-empty {
    padding: 28px 16px;
    text-align: center;
}

.od-empty-head {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--od-ink, #1f2933);
}

.od-empty-body {
    margin: 6px auto 0;
    max-width: 52ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--od-ink-soft, #5b6672);
}

.od-empty-clear,
.od-empty-retry,
.od-fail-retry {
    margin-top: 14px;
    border: 1px solid var(--od-rule, #d9dee4);
    background: var(--od-surface, #fff);
    color: var(--od-ink, #1f2933);
}

.od-empty-clear:hover,
.od-empty-retry:hover,
.od-fail-retry:hover {
    background: var(--od-surface-alt, #f7f9fa);
}

/* Caderea nu are voie sa arate ca linistea. */
.od-empty-error .od-empty-head {
    color: var(--od-crit, #b42318);
}

.od-empty-error {
    border-left: 3px solid var(--od-crit, #b42318);
    background: var(--od-crit-bg, #fbe6e4);
    text-align: left;
    padding-left: 18px;
}

.od-empty-error .od-empty-body {
    margin-left: 0;
}

/* Panoul de cadere din afara listelor - vezi `odFail()`. */
.od-fail {
    margin: 12px 0;
    padding: 18px 20px;
    border: 1px solid var(--od-rule, #d9dee4);
    border-left: 3px solid var(--od-crit, #b42318);
    background: var(--od-crit-bg, #fbe6e4);
}

.od-fail-head {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--od-crit, #b42318);
}

.od-fail-body {
    margin: 6px 0 0;
    max-width: 62ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--od-ink-soft, #5b6672);
}

.od-fail-detail {
    margin: 8px 0 0;
    font-family: var(--od-font-mono, monospace);
    font-size: 11.5px;
    color: var(--od-ink-faint, #6b7480);
    word-break: break-word;
}

/* Randul care spune ca s-au restaurat filtre. Fara el, o lista scurta pare o
   lista goala - exact greseala pe care o repara restul fisierului. */
.od-filters-note {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0 0 10px;
    padding: 7px 12px;
    background: var(--od-info-bg, #e6edfa);
    border-left: 3px solid var(--od-info, #1f62cb);
    font-size: 12.5px;
    color: var(--od-ink, #1f2933);
}

.od-filters-clear {
    border: 0;
    background: none;
    padding: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--od-info, #1f62cb);
    text-decoration: underline;
    cursor: pointer;
}

/* Locul barei de unelte pusa de OdListTools pe listele care n-aveau una.
   `list_chrome.js` o gaseste de aici si o aseaza ca pe celelalte. */
.od-tools-home {
    display: inline-block;
}


/* =============================================================================
   2. CONTRAST
   =============================================================================
 *
 * Culoarea unui modul ramane identitatea lui. Ce se corecteaza aici sunt DOAR
 * suprafetele pe care sta text alb peste ea - acolo unde contrastul e o regula,
 * nu o preferinta. Raportul cerut de WCAG AA pentru text normal e 4,5:1.
 *
 *   Softsee     #52BBB6  2,30:1  ->  #33807D  4,64:1
 *   Opteemum    #1FA67A  3,09:1  ->  #198461  4,65:1
 *   Securitee   #4E7CB5  4,31:1  ->  #4A77B0  4,61:1
 *   Overview    #797979  4,35:1  ->  #757575  4,61:1
 *
 * Inventoree, Easeedesk, Proactivitee si Protectee treceau deja si nu se ating.
 *
 * Selectoarele le repeta pe cele din `app.css` ca sa aiba aceeasi specificitate;
 * fisierul asta se incarca dupa, deci castiga. Cand se va putea rula din nou
 * build-ul de SASS, locul lor de drept e in `_variables.scss`, si blocul asta
 * dispare.
   ============================================================================= */

.softsee #page-header .fixed-header {
    background-image: linear-gradient(to right, #2c6f6c, #33807D, #33807D);
    border-bottom-color: #2c6f6c !important;
}

.softsee .modal-header,
.softsee .bg-module,
.softsee .dataTableM > thead {
    background-color: #33807D;
}

.softsee .pagination > .active > a,
.softsee .pagination > .active > span,
.softsee .pagination > .active > a:hover,
.softsee .pagination > .active > span:hover,
.softsee .pagination > .active > a:focus,
.softsee .pagination > .active > span:focus {
    background-color: #33807D;
    border-color: #33807D !important;
}

.opteemum #page-header .fixed-header {
    background-image: linear-gradient(to right, #146b4f, #198461, #198461);
    border-bottom-color: #146b4f !important;
}

.opteemum .modal-header,
.opteemum .bg-module,
.opteemum .dataTableM > thead {
    background-color: #198461;
}

.opteemum .pagination > .active > a,
.opteemum .pagination > .active > span,
.opteemum .pagination > .active > a:hover,
.opteemum .pagination > .active > span:hover,
.opteemum .pagination > .active > a:focus,
.opteemum .pagination > .active > span:focus {
    background-color: #198461;
    border-color: #198461 !important;
}

.securitee #page-header .fixed-header {
    background-image: linear-gradient(to right, #3f6597, #4A77B0, #4A77B0);
    border-bottom-color: #3f6597 !important;
}

.securitee .modal-header,
.securitee .bg-module,
.securitee .dataTableM > thead {
    background-color: #4A77B0;
}

.overview #page-header .fixed-header {
    background-image: linear-gradient(to right, #616161, #757575, #757575);
    border-bottom-color: #616161 !important;
}

.overview .modal-header,
.overview .bg-module,
.overview .dataTableM > thead {
    background-color: #757575;
}

/*
 * Insignele de stare, oriunde sunt puse cu clasele astea.
 *
 * Verdele si galbenul vechi (2,34:1 si 2,17:1) erau cele mai slabe culori din
 * tot portalul, si tocmai ele purtau cea mai importanta informatie: e bine sau
 * nu. Perechea noua vine din `tokens.css` si trece amandoua.
 */
.od-state-ok {
    background-color: var(--od-ok, #008300) !important;
    color: #fff !important;
}

.od-state-warn {
    background-color: var(--od-warn, #9e6b00) !important;
    color: #fff !important;
}

.od-state-crit {
    background-color: var(--od-crit, #b42318) !important;
    color: #fff !important;
}

/*
 * Litera de langa cifra, pe insignele care se deosebeau NUMAI prin culoare.
 *
 * Verde langa rosu, doua cifre, niciun cuvant: pentru cei cu deficiente de
 * perceptie a rosu-verde - in jur de 8% dintre barbati - sunt doua numere
 * identice. Litera se citeste chiar si cand culoarea nu se vede.
 */
.od-state-mark {
    font-weight: 700;
    opacity: .85;
    margin-right: 2px;
}


/* =============================================================================
   3. ECRANUL MIC
   =============================================================================
 *
 * Portalul e de desktop. `_responsive.scss` are 5 linii si zero reguli media,
 * si asta e in regula - un ITSM cu tabele de 20 de coloane nu se foloseste de
 * pe telefon. Ce NU e in regula e ca antetul declara `viewport
 * width=device-width`, deci telefonul incearca sa randeze macheta la latimea
 * lui reala si iese ceva rupt, fara ca nimeni sa spuna de ce.
 *
 * Sub 700px se spune. Pagina ramane dedesubt, intreaga - cine chiar trebuie sa
 * se uite acum inchide randul si merge mai departe. O promisiune tinuta e mai
 * buna decat una neonorata, chiar cand raspunsul e "nu inca".
   ============================================================================= */

.od-small-screen {
    display: none;
}

@media (max-width: 700px) {
    .od-small-screen {
        display: block;
        position: relative;
        z-index: 10000;
        padding: 12px 40px 12px 14px;
        background: var(--od-warn-bg, #fbf1dc);
        border-bottom: 2px solid var(--od-warn, #9e6b00);
        font-size: 13px;
        line-height: 1.45;
        color: var(--od-ink, #1f2933);
    }

    .od-small-screen b {
        display: block;
        margin-bottom: 2px;
    }

    /*
     * Drumul catre fata de telefon.
     *
     * Pana acum randul asta spunea doar "portalul e de birou" si atat - o
     * constatare, fara nicio cale inainte. Acum exista una, deci se ofera:
     * ecranul care recunoaste o problema si nu spune ce se poate face e mai
     * enervant decat unul care tace.
     */
    .od-small-screen-go {
        display: inline-block;
        margin-top: 8px;
        min-height: 44px;
        padding: 11px 16px;
        border-radius: 8px;
        background: var(--od-warn, #9e6b00);
        color: #fff;
        font-weight: 600;
        text-decoration: none;
    }

    .od-small-screen-go:hover,
    .od-small-screen-go:focus {
        color: #fff;
        text-decoration: none;
        opacity: .9;
    }

    .od-small-screen-close {
        position: absolute;
        top: 8px;
        right: 10px;
        border: 0;
        background: none;
        font-size: 18px;
        line-height: 1;
        color: var(--od-ink-soft, #5b6672);
        cursor: pointer;
    }
}


/* =============================================================================
   4. CAND A VORBIT MASINA ULTIMA OARA
   =============================================================================
 *
 * Perechea lui `OdLastActivity` din od_ux.js. Aceleasi trei stari, si aici:
 * live acum, in regula, sau tacuta de prea mult timp.
   ============================================================================= */

.od-la {
    white-space: nowrap;
}

.od-la-never {
    color: var(--od-ink-faint, #6b7480);
}

/* Sub 5 secunde: vorbeste chiar acum. Rosu ca la un indicator de inregistrare -
   nu fiindca ar fi rau, ci fiindca e viu si trebuie sa sara in ochi. */
.od-la-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    color: var(--od-crit, #b42318);
}

.od-la-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--od-crit, #b42318);
    animation: od-la-pulse 1.6s ease-in-out infinite;
}

@keyframes od-la-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: .25; }
}

@media (prefers-reduced-motion: reduce) {
    .od-la-dot { animation: none; }
}

/* Peste 8 ore: patratel rosu. O statie inchisa peste noapte se intoarce
   dimineata; un agent care tace o zi de lucru intreaga e altceva. */
.od-la-stale {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid var(--od-crit, #b42318);
    border-radius: var(--od-radius, 3px);
    background: var(--od-crit-bg, #fbe6e4);
    color: var(--od-crit, #b42318);
    font-weight: 600;
}


/* =============================================================================
   5. CAUTAREA CARE MERGE DE ORIUNDE
   =============================================================================
 *
 * Perechea lui `OdSearch` din od_ux.js. Se deschide cu Ctrl+K sau `/`, peste
 * ecran, si se inchide cu Escape sau click pe fundal.
 *
 * Sus, nu la mijloc: mana ramane pe tastatura, ochiul nu are de traversat
 * ecranul, si lista creste in jos - unde te uiti oricum.
   ============================================================================= */

/*
 * SE LASA IN JOS DE SUB LUPA.
 *
 * Era o fereastra peste tot ecranul, si nu se inchidea: `close()` punea
 * `hidden` pe ea, dar `hidden` e o regula a browserului si `display: flex` de
 * aici era una a paginii - regula paginii castiga, si fereastra ramanea acolo
 * orice apasai. Randul cu `[hidden]` de mai jos e leacul, si el trebuie sa
 * stea oriunde o regula de-a noastra da un `display` unui lucru care se ascunde
 * asa (vezi si `.aia-more` din ai_audit.css).
 *
 * Si nu mai e o fereastra: e un sertar agatat sub lupa, pe modelul selectorului
 * de client - aceeasi culoare a modulului, aceleasi doua coloane. In stanga
 * ultimele zece cautari, in dreapta ce s-a gasit.
 */
.od-search[hidden] {
    display: none;
}

.od-search {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 12000;
}

/* Foaia nevazuta care prinde click-ul de langa sertar. Fara fundal intunecat:
   un sertar din antet nu opreste pagina de dedesubt, doar se inchide cand te
   uiti in alta parte. */
.od-search-back {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.od-search-panel {
    position: absolute;
    width: 720px;
    max-width: calc(100vw - 16px);
    border-radius: var(--od-radius-lg, 6px);
    box-shadow: var(--od-shadow-lg, 0 8px 32px rgba(0, 0, 0, .3));
    overflow: hidden;
    color: #fff;
    text-align: left;
}

.od-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .18);
}

.od-search-field > .fa-search {
    color: rgba(255, 255, 255, .6);
}

.od-search-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
    outline: 0;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
}

.od-search-input::placeholder {
    color: rgba(255, 255, 255, .6);
}

.od-search-input:focus {
    border-color: rgba(255, 255, 255, .65);
}

.od-search-esc {
    flex: 0 0 auto;
    font-family: var(--od-font-mono, monospace);
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-bottom-width: 2px;
    border-radius: var(--od-radius, 3px);
    color: rgba(255, 255, 255, .75);
}

/* Doua coloane, ca la selectorul de client: de unde vii in stanga, ce ai gasit
   in dreapta. */
.od-search-body {
    display: flex;
    align-items: stretch;
}

.od-search-side {
    display: flex;
    flex-direction: column;
    width: 210px;
    flex: 0 0 210px;
    min-width: 0;
    border-right: 1px solid rgba(255, 255, 255, .18);
}

.od-search-where {
    padding: 12px 12px 4px;
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.od-search-recent {
    max-height: 300px;
    overflow-y: auto;
    padding: 0 6px 10px;
}

.od-search-again {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: rgba(255, 255, 255, .9);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.od-search-again:hover,
.od-search-again:focus-visible {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    outline: 0;
}

.od-search-again .fa-history {
    flex: 0 0 auto;
    font-size: 10px;
    color: rgba(255, 255, 255, .5);
}

.od-search-again span {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-search-none {
    margin: 0;
    padding: 4px 8px 12px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .55);
}

.od-search-out {
    flex: 1 1 auto;
    min-width: 0;
    max-height: 340px;
    overflow-y: auto;
    padding-bottom: 6px;
}

.od-search-group {
    padding: 12px 16px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.od-search-hit {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 16px;
    color: #fff;
    text-decoration: none;
    border-left: 3px solid transparent;
}

/* Randul pe care esti, la fel de la tastatura ca de la mouse - altfel sagetile
   si cursorul ar spune doua lucruri diferite despre ce se deschide la Enter. */
.od-search-hit.is-on,
.od-search-hit:focus {
    background: rgba(255, 255, 255, .14);
    border-left-color: #fff;
    text-decoration: none;
    color: #fff;
    outline: 0;
}

.od-search-hit > .fas {
    flex: 0 0 auto;
    width: 14px;
    color: rgba(255, 255, 255, .6);
}

.od-search-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.od-search-note {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .6);
}

.od-search-hint {
    margin: 0;
    padding: 22px 16px;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, .7);
}

/* Pe telefon nu incap doua coloane: sertarul se face cat ecranul, si ultimele
   cautari trec deasupra rezultatelor. */
@media (max-width: 767px) {
    .od-search-panel {
        left: 8px !important;
        right: 8px !important;
        width: auto;
    }

    .od-search-body {
        flex-direction: column;
    }

    .od-search-side {
        width: auto;
        flex: 0 0 auto;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    .od-search-recent {
        max-height: 140px;
    }
}

.od-search .od-fail {
    margin: 12px 16px;
}


/* =============================================================================
   6. INSIGNA "AM CEVA DE REZOLVAT"
   =============================================================================
 *
 * Perechea lui `OdToday` din od_ux.js. Nu e a saptea cutie postala din randul
 * din dreapta: e cate lucruri cer o ACTIUNE acum. De-aia are si alta culoare
 * decat celelalte insigne din antet - portocaliul lor inseamna "s-au mai
 * intamplat cateva", asta inseamna "ai ceva de facut".
   ============================================================================= */

.od-today-badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--od-crit, #b42318);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}

#odTodayLink { position: relative; }

.od-today-badge[hidden] { display: none !important; }

/*
 * =============================================================================
 * INSIGNELE DIN COLTURILE SEMNULUI DE AGENT RELEASES
 * =============================================================================
 *
 * Trei buline mici, in trei colturi ale desenului, fiecare cu alt inteles -
 * vezi comentariul din `_layout/header.php`, unde se si scriu:
 *
 *   sus-stanga    galben   isi iau versiunea, n-au ajuns inca
 *   sus-dreapta   rosu     s-au impotmolit
 *   jos-dreapta   verde    sunt pe versiunea publicata
 *
 * Coltul si nu marginea: trei numere insirate langa semn ar fi fost trei cifre
 * pe care trebuie sa le citesti pe rand ca sa afli care e care. Puse in
 * colturi, LOCUL spune despre ce e vorba, si el ramane acelasi si cand un numar
 * lipseste - verdele e mereu jos-dreapta, si cand galbenul nu e scris.
 *
 * Al patrulea colt ramane gol dinadins: masurat in browser, patru buline in
 * jurul unui desen de douazeci si opt de pixeli il acopera cu totul.
 *
 * Invelisul `.od-ar-pips` are exact marimea desenului, si de-aia colturile sunt
 * ale desenului. Pus pe ancora, "sus-stanga" ar fi cazut in spatiul din bara,
 * langa semnul dinainte.
 */
.od-ar-pips {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.od-ar-pip {
    position: absolute;
    z-index: 2;
    /*
     * Aceeasi croiala ca insignele vecine din bara - clopotelul, memo,
     * colaborarea.
     *
     * Alea sunt `.label` de Bootstrap: cifre de 10, indesare de 3 pe 5, si
     * colturi de `0.25em` - adica doi pixeli si jumatate, cat sa nu fie taiate
     * drept, dar nici pe departe rotunde. Aici erau pastile de opt pixeli, si
     * se vedea: aceeasi bara, doua feluri de insigna.
     *
     * Valorile sunt scrise cu numarul lor, nu cu `em`: bulinele astea nu stau
     * intr-un rand de text, ci peste un desen, iar `em` le-ar fi legat de
     * marimea de litera pe care o mosteneste ancora din bara.
     */
    padding: 3px 5px;
    border-radius: 2px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    color: #fff;
}

/*
 * Stranse pe desen, nu imprastiate in jurul lui.
 *
 * Erau scoase in afara cu zece pixeli pe laturi si sapte pe inaltime, ca sa
 * lase hexagonul cat mai descoperit. Iesea insa un ciorchine lat cat doua
 * semne din bara, in care nu se mai vedea ce tine de ce - trei numere plutind
 * pe langa un desen, nu un semn cu trei numere pe el.
 */
.od-ar-pip.is-late    { top: -4px;    left: -6px;  background: #9e6b00; }
.od-ar-pip.is-stuck   { top: -4px;    right: -6px; background: #d0342a; }
.od-ar-pip.is-current { bottom: -4px; right: -6px; background: #1f8b3f; }

/*
 * =============================================================================
 * "CE TE ASTEAPTA ACUM", MUTAT IN CAPUL BAREI
 * =============================================================================
 *
 * Semnul a plecat din `#header-right-nav`, unde randul intreg avea deja
 * culoare, inaltime si apasare, si a intrat in `ul.page-logo`, care n-are
 * niciuna dintre ele: acolo se aseaza numai sigla si numele modulului.
 *
 * Deci se scriu aici, si se scriu dupa `#show-modules` - vecinul lui de la
 * dreapta - ca sa fie o pereche, nu doua semne de marimi diferite lipite unul
 * de altul: aceeasi indesare, aceeasi inaltime de rand, acelasi gri la trecere.
 */
.page-logo #odTodayItem {
    position: relative;
    margin-left: 20px;
}

.page-logo #odTodayItem > a {
    display: block;
    color: #fff;
    font-size: 20px;
    padding: 5px 13px;
    line-height: 35px;
}

.page-logo #odTodayItem > a:hover {
    background-color: rgba(0, 0, 0, .13);
}

/* Insigna sta pe glifa, nu pe marginea de apasare a legaturii. */
.page-logo #odTodayItem .od-today-badge {
    top: 2px;
    right: 6px;
}

/*
 * =============================================================================
 * CONTUL, IN SERTARUL DE SETARI
 * =============================================================================
 *
 * Cele trei randuri de cont (My Account, codul de acces, iesirea) au venit
 * dintr-un sertar ingust, unde tineau toata latimea. Sertarul de setari e larg
 * si are doua coloane sub ele, asa ca randurile se pun pe un singur rand cat
 * incap, si se despart de setari cu aceeasi linie ca "Install Agent" jos.
 */
/*
 * Capul cu numele, pe un rand, nu pe patru.
 *
 * Chipul rotund de 80 de pixeli venea dintr-un sertar care n-avea altceva in
 * el. Aici, deasupra a doua coloane de setari si a butonului de instalare,
 * inaltimea aia impinge jumatate din meniu sub marginea ecranului. Acelasi
 * lucru spus lateral: chipul mic la stanga, numele langa el.
 *
 * Selectoarele pornesc toate de la `#settings-dropdown`, si nu din obisnuinta:
 * regulile casei sunt `.dropdown-menu .dropdown-menu-header .user-avatar`, cu
 * trei clase. O clasa singura pierde in fata lor, iar chipul ramanea de 80 de
 * pixeli fara ca nimic sa para stricat.
 */
#settings-dropdown .settings-account-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
}

#settings-dropdown .settings-account-head .user-avatar {
    height: 36px;
    width: 36px;
    margin-bottom: 0;
    flex: 0 0 auto;
}

/* Chipul e o poza oarecare: se taie in patrat, nu intinde randul. */
#settings-dropdown .settings-account-head .user-avatar img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

#settings-dropdown .settings-account-head .settings-account-who {
    min-width: 0;
}

#settings-dropdown .settings-account-head h6 {
    font-size: 14px;
    line-height: 18px;
}

#settings-dropdown .settings-account-head span {
    font-size: 12px;
    opacity: .85;
}

/*
 * Cele trei randuri de cont (My Account, codul de acces, iesirea) au venit
 * dintr-un sertar ingust, unde tineau toata latimea. Sertarul de setari e larg
 * si are doua coloane sub ele, asa ca randurile se pun pe un singur rand cat
 * incap, si se despart de setari cu aceeasi linie ca "Install Agent" jos.
 */
#settings-dropdown .settings-account-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding: 8px 12px 6px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

#settings-dropdown .settings-account-row .dropdown-item {
    width: auto;
    padding: 2px 0;
}

/* =============================================================================
   7. SELECTORUL DE CLIENT SI SEDIU
   -----------------------------------------------------------------------------

   Doua liste una langa alta, in panoul din antet: clientii in stanga, cu o
   cautare deasupra; sediile clientului aratat, in dreapta. Erau doua
   <select>-uri suprapuse - pe un furnizor cu douazeci de clienti nu se putea
   cauta si nu incapea pe ecran (7 septembrie 2026).

   STA PE CULOAREA MODULULUI (`bg-module`), CU LITERA ALBA. Panoul din antet
   isi ia culoarea de la modul, si prima scriere presupunea fundal inchis: pe
   modulele deschise a iesit gol, cu litera alba pe alb ("selectorul nu merge,
   uite cum apare"). Acum fundalul si-l pune singur, din aceeasi clasa pe care
   o folosea antetul vechi al panoului - deci e mereu culoarea locului in care
   esti, si litera alba e mereu buna pe ea.
   ========================================================================== */

.od-switch {
    display: flex;
    align-items: stretch;
    color: #fff;
    text-align: left;
}

.od-switch-side {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.od-switch-side:first-child {
    width: 240px;
    border-right: 1px solid rgba(255, 255, 255, .18);
}

.od-switch-offices {
    width: 220px;
}

/* Cautarea: lipita de capul listei, cu lupa in stanga literei. */
.od-switch-find {
    position: relative;
    padding: 10px 10px 6px;
}

.od-switch-find .fa-search {
    position: absolute;
    left: 20px;
    top: 18px;
    font-size: 11px;
    color: rgba(255, 255, 255, .55);
}

.od-switch-find input {
    width: 100%;
    height: 30px;
    padding: 0 8px 0 26px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
}

.od-switch-find input::placeholder {
    color: rgba(255, 255, 255, .6);
}

.od-switch-find input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, .65);
}

/* Numele clientului sub care stau sediile: un titlu, nu un rand de apasat. */
.od-switch-where {
    padding: 14px 12px 6px;
    color: rgba(255, 255, 255, .6);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lista se deruleaza in ea insasi: panoul nu creste cat ecranul. */
.od-switch-list {
    max-height: 320px;
    overflow-y: auto;
    padding: 0 6px 10px;
}

.od-switch-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 32px;
    padding: 5px 8px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #fff;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.od-switch-row:hover,
.od-switch-row:focus-visible {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    outline: none;
}

.od-switch-row.is-on {
    background: rgba(255, 255, 255, .22);
    color: #fff;
    font-weight: 600;
}

.od-switch-row.is-hidden {
    display: none;
}

.od-switch-logo {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 3px;
}

.od-switch-logo img {
    max-width: 18px;
    max-height: 18px;
}

.od-switch-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.od-switch-row .fa-chevron-right {
    flex: 0 0 auto;
    font-size: 10px;
    color: rgba(255, 255, 255, .5);
}

.od-switch-none {
    margin: 0;
    padding: 4px 14px 12px;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
}

/* Subsolul: bifa in stanga, iesirea in dreapta. */
.od-switch-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: #fff;
}

.od-switch-all {
    margin: 0;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    cursor: pointer;
}

.od-switch-all input {
    margin-right: 6px;
    vertical-align: middle;
}

/* Pe telefon panoul e cat ecranul, deci cele doua liste stau una sub alta. */
@media (max-width: 767px) {
    .od-switch {
        flex-direction: column;
    }

    .od-switch-side:first-child,
    .od-switch-offices {
        width: auto;
        border-right: 0;
    }

    .od-switch-side:first-child {
        border-bottom: 1px solid rgba(255, 255, 255, .18);
    }

    .od-switch-list {
        max-height: 40vh;
    }
}


/* =============================================================================
   8. BARA DE DERULARE
   =============================================================================

   Peste tot in portal - si mai ales in Settings, unde se vede pe fiecare ecran
   - santul de derulare era cel al browserului: cincisprezece pixeli de gri de
   sistem, cu sageti la capete pe Windows, lipit de un portal care nu mai are
   nicaieri altundeva gri de sistem. Se vedea ca o dunga straina langa hartie.

   Aici se subtiaza si i se da culoarea LOCULUI in care esti: griul in Settings,
   culoarea modulului in rest. Nu e o infrumusetare - e acelasi lucru pe care il
   face patratul modulului din antet: spune, fara cuvinte, unde te afli.

   PATRU PIXELI IN REPAUS, OPT SUB MOUSE
   -----------------------------------------------------------------------------
   Santul ramane de 10px si nu se schimba NICIODATA. Ce se schimba e cat din el
   se vopseste: bara are o rama transparenta si `background-clip: padding-box`,
   deci la o rama de 3px raman 4px de culoare, iar la 1px raman 8px.

   De-aia se face asa, si nu cu `width` pe `::-webkit-scrollbar`: santul ia loc
   din latimea elementului. Daca s-ar ingusta la 4px si s-ar largi la 10 cand
   intra mouse-ul, continutul de langa el s-ar re-aseza la fiecare trecere - un
   tabel intreg tresarind fiindca ai trecut pe langa el. Cu rama transparenta,
   asezarea nu se clinteste: se schimba doar vopseaua.

   Si mai e un castig: locul in care se poate APUCA bara ramane 10px chiar si
   cand ea arata 4 - rama transparenta face parte din bara. Deci e subtire la
   privit si groasa la atins, in acelasi timp.

   Culoarea NU se stinge in repaus. S-a incercat si asta - aceeasi culoare la
   45% - si patru pixeli de terracotta spalata nu mai citesc a Inventoree,
   citesc a bej. Daca bara poarta culoarea modulului, atunci s-o poarte.

   INGROSAREA SE FACE PRINTR-O VARIABILA, SI ASTA NU E UN MOFT
   -----------------------------------------------------------------------------
   `.ceva:hover::-webkit-scrollbar-thumb { ... }` - scrierea care se gaseste
   peste tot pe internet - NU MAI MERGE in Chromium. Masurat in Edge, pe o
   pagina de proba: elementul chiar e `:hover` (verificat cu `matches`), si bara
   ramane neschimbata. Browserul nu redeseneaza bara desenata de noi cand se
   schimba doar starea de hover a elementului.

   Ce redeseneaza el e schimbarea unei VARIABILE CSS mostenite. De-aia grosimea
   sta in `--od-scroll-inset`, si `:hover` schimba variabila, nu bara.

   Repausul se scrie pe `*`, adica pe FIECARE element, si asta e chiar rostul
   lui: variabila se mosteneste, iar cand mouse-ul e pe un rand de tabel, TOTI
   stramosii lui sunt `:hover` - fara valoarea pusa pe fiecare element in parte,
   grosimea s-ar scurge in jos si s-ar ingrosa toate barele din pagina deodata.

   FIREFOX
   -----------------------------------------------------------------------------
   Firefox n-are pseudo-elemente de bara. Are `scrollbar-width`, cu trei trepte,
   si `scrollbar-color`. `thin` e cel mai subtire pe care il da si sub el nu se
   poate cobori, deci acolo bara e subtire si colorata, si atat - fara
   ingrosare.

   DE CE `*` SI NU O LISTA DE ELEMENTE
   -----------------------------------------------------------------------------
   Fiindca "peste tot" chiar inseamna peste tot: pagina, rail-ul zonei, tabelele
   care se duc in lateral, sertarele, modalele, listele lungi din panourile
   antetului. O lista scrisa de mana ar fi ramas in urma la primul ecran nou.

   `*` are specificitate zero, deci NU strica nimic din ce e deja scris cu o
   clasa - barele ascunse dinadins (`.odb-views`, `.od-mbar-base`,
   `ul.page-logo`) raman ascunse.
   ========================================================================== */

/*
 * Culoarea barei, o data pentru toata pagina. Griul e implicit; fiecare modul
 * si-o schimba mai jos. Nu se inventeaza nimic: sunt chiar tokenurile de
 * identitate din `tokens.css`, si perechea `-deep` acolo unde nuanta deschisa
 * n-ar avea ce arata pe patru pixeli - exact modulele pentru care si
 * `od_dashboard.css` ia varianta inchisa.
 */
:root { --od-scroll: var(--od-ink-faint); }

body.inventoree   { --od-scroll: var(--od-inventoree); }
body.easeedesk    { --od-scroll: var(--od-easeedesk); }
body.proactivitee { --od-scroll: var(--od-proactivitee); }
body.protectee    { --od-scroll: var(--od-protectee); }
body.softsee      { --od-scroll: var(--od-softsee-deep); }
body.opteemum     { --od-scroll: var(--od-opteemum-deep); }
body.securitee    { --od-scroll: var(--od-securitee-deep); }
body.overview     { --od-scroll: var(--od-overview-deep); }

/*
 * SETTINGS RAMANE GRI, SI DE-AIA STA ULTIMA.
 *
 * Controllerele de setari ale unui modul scriu `appModule = 'easeedesk
 * settings'`, si atunci `<body>` poarta AMANDOUA clasele. La specificitate
 * egala castiga cine e scris mai jos, deci randul asta trebuie sa ramana sub
 * cele de sus: esti in Settings, bara e gri, oricare ar fi modulul din care ai
 * intrat acolo.
 */
body.settings { --od-scroll: var(--od-ink-faint); }

/* Grosimea, ca variabila - vezi mai sus de ce nu se scrie direct pe bara. */
* { --od-scroll-inset: 3px; }         /* 10 - 2x3 = 4px vopsiti */
*:hover { --od-scroll-inset: 1px; }   /* 10 - 2x1 = 8px vopsiti */

/*
 * PAGINA E ALTCEVA.
 *
 * `html` si `body` sunt sub mouse ORICAND e el in fereastra, deci bara paginii
 * ar fi fost groasa tot timpul si n-ar mai fi fost subtire niciodata. Ea se
 * ingroasa doar cand mouse-ul e chiar pe ea (`::-webkit-scrollbar-thumb:hover`,
 * mai jos) - si asta ajunge, fiindca zona ei sensibila e tot de 10px, nu de 4.
 */
html:hover,
body:hover { --od-scroll-inset: 3px; }

/* -----------------------------------------------------------------------------
   Chromium si WebKit
   -------------------------------------------------------------------------- */

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Santul gol nu se vede deloc - ca la rail-ul din Settings, de dinainte. */
*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--od-scroll);
    background-clip: padding-box;
    border: var(--od-scroll-inset) solid transparent;
    border-radius: 999px;
}

/* Mouse-ul chiar pe bara o ingroasa si el - starea asta Chromium o redeseneaza
   (e a barei, nu a paginii), si e singura pe care o are bara paginii. */
*::-webkit-scrollbar-thumb:hover { border-width: 1px; }

/* -----------------------------------------------------------------------------
   Firefox - si NUMAI Firefox
   -----------------------------------------------------------------------------

   Gardul asta nu e o precautie, e o reparatie, si nu se scoate inapoi.

   `scrollbar-width` si `scrollbar-color` le stie si Chromium. Cand le vede, el
   LASA BALTA bara desenata de noi si deseneaza una standard - cu sageti la
   capete, sagetile de sistem, si niciun `::-webkit-scrollbar-button {
   display: none }` nu le mai da jos (incercat, in Edge: raman). Adica exact
   griul de sistem de la care a plecat toata treaba asta, doar vopsit.

   `@supports not selector(::-webkit-scrollbar)` e adevarat numai acolo unde
   pseudo-elementul nu exista: Firefox. Chromium si WebKit nici nu intra
   inauntru, deci raman cu bara lor, fara sageti.
   -------------------------------------------------------------------------- */

@supports not selector(::-webkit-scrollbar) {
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--od-scroll) transparent;
    }
}