/*
 * COPIE. Originalul e `public/css/device_workspace.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.
 */
/*
 * Meniul unic al unui dispozitiv - perechea lui device_workspace_menu.php.
 *
 * Fisier separat, legat din antetul comun: app.css se construieste cu
 * laravel-mix, iar pentru atat n-are rost o reconstruire a intregii foi.
 */

.device-workspace-menu {
    width: 100%;
    /* E un <ul> acum - vezi nota din macheta - deci trebuie curatat de ce vine
       de la lista: punctele si retragerea. */
    list-style: none;
    margin: 0;
    padding: 0;
}

.device-workspace-menu > li {
    list-style: none;
}

/* ------------------------------------------------------ privirea de ansamblu */

.device-workspace-menu .dwm-overview {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-weight: 700;
    color: #33414e;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.device-workspace-menu .dwm-overview-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* ------------------------------------------------------- banda de sanatate */

.device-workspace-menu .dwm-health {
    padding: 8px 8px 10px;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.device-workspace-menu .dwm-hs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.device-workspace-menu .dwm-hs > li {
    list-style: none;
    min-width: 0;
}

.device-workspace-menu .dwm-hs-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 6px 7px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .035);
    border-left: 3px solid #b8c2cf;
    color: #33414e;
    text-decoration: none;
    line-height: 1.15;
}

.device-workspace-menu a.dwm-hs-cell:hover {
    background: rgba(0, 0, 0, .07);
    text-decoration: none;
}

.device-workspace-menu .dwm-hs-value {
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.device-workspace-menu .dwm-hs-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--od-ink-faint, #6b7480);
}

.device-workspace-menu .dwm-hs-cell.is-ok       { border-left-color: #37addb; }
.device-workspace-menu .dwm-hs-cell.is-minor    { border-left-color: #5cb85c; }
.device-workspace-menu .dwm-hs-cell.is-major    { border-left-color: #f0ad4e; }
.device-workspace-menu .dwm-hs-cell.is-critical { border-left-color: #e34c4c; }
.device-workspace-menu .dwm-hs-cell.is-forecast { border-left-color: #7c6fcd; }
.device-workspace-menu .dwm-hs-cell.is-silent   { border-left-color: #8a94a6; color: #8a94a6; }
.device-workspace-menu .dwm-hs-cell.is-critical .dwm-hs-value { color: #b42318; }
.device-workspace-menu .dwm-hs-cell.is-major .dwm-hs-value    { color: #b7791f; }

/* Cand agentul tace, toata banda e gri: valorile sunt vechi, nu adevarate. */
.device-workspace-menu .dwm-health.is-silent .dwm-hs-cell {
    background: repeating-linear-gradient(135deg, rgba(0, 0, 0, .03) 0 4px, rgba(0, 0, 0, .06) 4px 8px);
}

.device-workspace-menu .dwm-seen {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--od-ink-faint, #6b7480);
    letter-spacing: .02em;
    white-space: nowrap;
    text-align: right;
}

/*
 * "LIVE" e o veste BUNA, deci verde.
 *
 * Era scris cu `--od-crit`, rosul de "a cazut / a expirat", langa un rand de
 * lista care in aceeasi clipa arata bulina verde: acelasi aparat, aceeasi
 * secunda, doua culori care se contrazic. Vezi si `device_identity.css`,
 * `od-comm-live`.
 */
.device-workspace-menu .dwm-seen.is-live {
    color: var(--od-ok, #008300);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/*
 * Peste 8 ore: intr-un patratel rosu.
 *
 * Pana acum, o masina care tacea de o zi arata ca una care tacuse zece minute:
 * acelasi gri, doar alta cifra - iar cifra o citesti numai daca te uiti la ea
 * dinadins. Chenarul se vede fara sa-l cauti.
 *
 * Pragul: o statie inchisa peste noapte se intoarce dimineata si n-are de ce sa
 * fie rosie. Un agent care a tacut o zi de lucru intreaga e altceva.
 *
 * Si starea linistita s-a inchis la culoare: griul de dinainte (#8a94a0) era
 * la 3,08:1 pe alb, sub pragul de 4,5:1.
 */
.device-workspace-menu .dwm-seen.is-stale {
    color: var(--od-crit, #b42318);
    font-weight: 700;
    padding: 1px 6px;
    border: 1px solid var(--od-crit, #b42318);
    border-radius: var(--od-radius, 3px);
    background: var(--od-crit-bg, #fbe6e4);
}

.device-workspace-menu .dwm-overview:hover,
.device-workspace-menu .dwm-overview.active {
    background: rgba(0, 0, 0, .04);
    color: #3c8dbc;
}

/* ------------------------------------------------------------- module */

.device-workspace-menu .dwm-module-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: #33414e;
    text-decoration: none;
    font-weight: 700;
}

/* Pastila colorata de sub iconita.

   Fisierele din public/images/header sunt glife ALBE, facute pentru placutele
   colorate din bara de module - pe fundalul deschis al meniului nu se vedeau
   deloc. Pastila are chiar culoarea modulului, aceeasi ca in "Quick Access". */
.device-workspace-menu .dwm-module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    flex: 0 0 22px;
}

.device-workspace-menu .dwm-module-icon img {
    display: block;
}

.device-workspace-menu .dwm-module-head:hover {
    background: rgba(0, 0, 0, .04);
    color: #33414e;
}

/* Numele modulului cu majuscule: e un titlu de grup, iar optiunile de sub el
   sunt scrise obisnuit - asa se vede dintr-o privire ce e titlu si ce e de
   apasat. */
.device-workspace-menu .dwm-module-name {
    flex: 1 1 auto;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 12px;
}

/*
 * Semnul de pe fiecare modul: o sageata care se intoarce in jos cand grupul se
 * desface.
 *
 * A fost plus si minus. Un plus spune "mai adaug ceva" - iar aici nu se adauga
 * nimic, se arata ce era deja acolo; iar minusul, langa un nume de modul, se
 * citeste o clipa drept "scoate modulul". Sageata nu poate fi inteleasa gresit,
 * si e acelasi semn cu care se desfac randurile in toate tabelele aplicatiei.
 *
 * Se ROTESTE, nu se schimba: aceeasi sageata, dusa de la dreapta la jos, spune
 * si ce s-a intamplat - un semn inlocuit cu altul nu spune decat starea de
 * acum.
 */
.device-workspace-menu .dwm-caret {
    font-size: 10px;
    color: #9aa4b1;
    transition: transform .15s ease;
}

.device-workspace-menu .dwm-module.is-open .dwm-caret {
    transform: rotate(90deg);
}

/* Cine a cerut sistemului mai putina miscare primeste sageata intoarsa, nu
   rotirea ei. */
@media (prefers-reduced-motion: reduce) {
    .device-workspace-menu .dwm-caret {
        transition: none;
    }
}

/* Grupul strans se ascunde de tot: `display: none` si nu inaltime zero, ca sa
   nu ramana nici spatiu, nici ceva ce se poate ajunge cu Tab. */
.device-workspace-menu .dwm-items {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0 0 6px;
}

.device-workspace-menu .dwm-module.is-open .dwm-items {
    display: block;
}

/* `app.css` pune `text-transform: uppercase` pe orice `li a.action_button`, deci
   fara regula asta optiunile ar iesi tot cu MAJUSCULE si scrierea cu Litere Mari
   La Fiecare Cuvant nici nu s-ar vedea. */
.device-workspace-menu .dwm-items > li > a {
    display: block;
    padding: 6px 12px 6px 38px;
    font-size: 12px;
    color: #4a5560;
    text-decoration: none;
    text-transform: none;
    font-weight: 400;
    letter-spacing: 0;
}

/* Si intrarea de ansamblu, din acelasi motiv. */
.device-workspace-menu .dwm-overview {
    text-transform: none;
}

.device-workspace-menu .dwm-items > li > a:hover {
    background: rgba(0, 0, 0, .04);
    color: #3c8dbc;
}

/* Optiunea deschisa acum: se vede din culoare si dintr-o dunga la stanga. */
.device-workspace-menu .dwm-items > li > a.active {
    background: rgba(60, 141, 188, .1);
    color: #3c8dbc;
    font-weight: 700;
    box-shadow: inset 3px 0 0 #3c8dbc;
}

/* ------------------------------------------- privirea de ansamblu */

/*
 * Acordeon orizontal: unul desfacut, restul cotoare inguste.
 *
 * Ordinea modulelor NU se schimba niciodata - de-aia cele dinaintea celui
 * desfacut raman la stanga lui si cele de dupa la dreapta, de la sine. Nimic nu
 * se muta; doar latimile cresc si scad, iar ochiul urmareste usor asta.
 */
.device-overview {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-height: 480px;
    padding: 10px 0;
}

.device-overview .dov-panel {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);

    /* Strans: cat un cotor de carte. */
    flex: 0 0 54px;
    min-width: 54px;

    /* Miscarea e a LATIMII, nu a continutului: cotorul aluneca si face loc, in
       loc sa dispara si sa apara altul. De-aia nu se simte ca o reincarcare. */
    transition: flex-basis 320ms cubic-bezier(.4, 0, .2, 1),
                min-width 320ms cubic-bezier(.4, 0, .2, 1),
                box-shadow 200ms ease;
}

.device-overview .dov-panel.is-open {
    /* Desfacut: ia tot ce ramane dupa cotoarele celorlalte, si se aseaza pe
       verticala - cap orizontal sus, continut dedesubt. */
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    box-shadow: 0 4px 12px rgba(16, 24, 40, .1), 0 2px 4px rgba(16, 24, 40, .06);
}

/* Cotorul se vede doar cat modulul e strans; desfacut, ii ia locul bara de sus. */
.device-overview .dov-panel.is-open .dov-spine {
    display: none;
}

/* --------------------------------------------------- capul orizontal */

.device-overview .dov-head {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    color: #fff;
    flex: 0 0 auto;
}

.device-overview .dov-panel.is-open .dov-head {
    display: flex;
}

.device-overview .dov-head-name {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 13px;
    font-weight: 700;
}

/* --------------------------------------------------------- cotorul */

.device-overview .dov-spine {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    flex: 0 0 54px;
    padding: 14px 0;
    cursor: pointer;
    color: #fff;
    transition: filter 200ms ease;
}

.device-overview .dov-panel:not(.is-open) .dov-spine:hover {
    filter: brightness(1.12);
}

.device-overview .dov-panel.is-open .dov-spine {
    cursor: default;
}

/* Sigla sta DREAPTA, in capul cotorului: culcata pe o parte nu s-ar mai
   recunoaste, si tocmai recunoasterea ei e rostul. Cerculetul deschis o
   desprinde de culoarea modulului, care uneori e prea apropiata de alb. */
.device-overview .dov-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    flex: 0 0 30px;
}

/* Numele, scris de jos in sus ca pe cotorul unei carti: asa incape intr-o dunga
   ingusta fara sa fie taiat. */
.device-overview .dov-name {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    flex: 0 1 auto;
    overflow: hidden;
}

/* Semnul ca se poate deschide: numai pe cotoarele stranse. */
.device-overview .dov-hint {
    margin-top: auto;
    font-size: 11px;
    opacity: .7;
}

.device-overview .dov-panel.is-open .dov-hint {
    display: none;
}

/* -------------------------------------------------------- continutul */

.device-overview .dov-body {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 18px;
    overflow: auto;
}

.device-overview .dov-panel.is-open .dov-body {
    display: block;
    /*
     * Continutul se arata cu o alunecare scurta, nu dintr-o data: asa se vede
     * ca e acelasi ecran care s-a deschis, nu unul nou care s-a incarcat.
     *
     * FARA `both`, si asta conteaza mai mult decat pare.
     *
     * `both` tine starea finala lipita dupa ce animatia s-a terminat - iar
     * starea finala e `transform: translateX(0)`. Un `transform`, chiar si de
     * zero, face din element un bloc de referinta: tot ce e inauntru si e
     * `position: sticky` sau `fixed` nu se mai raporteaza la fereastra, ci la
     * el. Adica exact defectul din capul fisei, pentru care s-a renuntat acolo
     * la lipire si s-au marginit doua coloane - iar marginirea aia a adus
     * derularea blocata.
     *
     * Fara `both`, dupa cele trei sute de milisecunde elementul se intoarce la
     * stilul lui nemiscat, fara nicio transformare, si lipirea dinauntru merge
     * din nou. Alunecarea arata la fel: intarzierea e zero, deci nu e nicio
     * clipa in care sa se vada starea de dinainte.
     */
    animation: dovReveal 300ms cubic-bezier(.4, 0, .2, 1);
}

@keyframes dovReveal {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Cine a cerut mai putina miscare o primeste: apare si dispare, fara alunecare. */
@media (prefers-reduced-motion: reduce) {
    .device-overview .dov-panel,
    .device-overview .dov-panel.is-open .dov-body {
        transition: none;
        animation: none;
    }
}

.device-overview .dov-loading,
.device-overview .dov-empty {
    color: #9aa4b1;
    font-size: 12px;
    padding: 8px 0;
}

/* ------------------------------------------------------ cartonasele */

/*
 * Din rezumatul fiecarui modul raman doar cartonasele cu cifre - vezi
 * `condense` din device_workspace.js. Aici se aseaza pe cate incap, la o marime
 * potrivita pentru un panou, nu pentru un rand intreg de ecran.
 */
.device-overview .dov-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
}

/* Cartonasele vin cu inaltimi si margini gandite pentru tabloul de bord; aici
   se string, ca sa incapa mai multe fara sa se piarda cifra. */
.device-overview .dov-tile .dashboard-stat {
    min-height: 0;
    margin: 0;
    border-radius: 4px;
}

.device-overview .dov-tile .dashboard-stat .number {
    font-size: 26px;
}

.device-overview .dov-tile .dashboard-stat .desc {
    font-size: 12px;
}

/* Iconita mare din fundalul cartonasului nu incape intr-unul strans si iese pe
   dedesubt; aici nu spune nimic in plus, deci se stinge. */
.device-overview .dov-tile .dashboard-stat .visual {
    display: none;
}

/*
 * Interiorul cartonasului se aseaza din nou de la zero.
 *
 * In tabloul de bord, `.details` e pozitionat ABSOLUT, cu `right` si cu padding
 * peste - potrivit acolo, unde cartonasul are latimea unui sfert de ecran. Intr-un
 * panou strans, aceleasi reguli il fac mai lat decat cartonasul, iar cartonasul
 * taie ce iese: se citea "Device ag" si "Unlicensed Softwar".
 *
 * De-aia se anuleaza TOATE - si pozitia, si marginile, si latimea - nu doar
 * pozitia. O jumatate de anulare lasa exact felul asta de taietura.
 */
.device-overview .dov-tile .dashboard-stat .details,
.device-overview .dov-tile .dashboard-stat a.details {
    position: static;
    right: auto;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    max-width: none;
    padding: 12px 14px;
    margin: 0;
    text-align: right;
    display: block;
}

/* Un nume lung - "Unlicensed Software" - trebuie sa poata trece pe randul al
   doilea, nu sa fie taiat. */
.device-overview .dov-tile .dashboard-stat .desc {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
}

/* Banda de jos a cartonasului - "View more" - nu are ce cauta intr-un rezumat
   de rezumat: legatura spre pagina intreaga e una singura, la coada. */
.device-overview .dov-tile .dashboard-stat .more {
    display: none;
}

/* Legatura spre rezumatul intreg al modulului. */
.device-overview .dov-more {
    display: inline-block;
    margin-top: 16px;
    font-size: 12px;
    font-weight: 600;
    color: #3c8dbc;
    text-transform: none;
    padding: 0;
}

.device-overview .dov-more:hover {
    text-decoration: underline;
}

/* Pe ecran ingust patru cotoare unul langa altul n-ar lasa loc de nimic. */
@media (max-width: 991px) {
    .device-overview {
        flex-direction: column;
        min-height: 0;
    }

    .device-overview .dov-panel {
        flex: 0 0 auto;
        min-width: 0;
        flex-direction: column;
    }

    .device-overview .dov-spine {
        flex-direction: row;
        flex: 0 0 auto;
        padding: 10px 14px;
        justify-content: flex-start;
    }

    .device-overview .dov-name {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .device-overview .dov-hint {
        margin-top: 0;
        margin-left: auto;
        transform: rotate(90deg);
    }
}

/* ------------------------------------------------------------ plasa */

/*
 * Daca foaia asta NU ajunge sa se incarce - cache, o livrare pe jumatate, ce-o
 * fi - acordeonul si-ar pierde toate regulile: panourile s-ar insira pe
 * verticala si TOATE corpurile s-ar vedea, adica patru "Loading..." unul sub
 * altul, dintre care trei n-ar pleca niciodata, fiindca se incarca doar cel
 * desfacut.
 *
 * Regula de mai jos nu poate fi plasa pentru ea insasi - daca fisierul
 * lipseste, lipseste si ea. De-aia acelasi lucru e scris SI in macheta, direct
 * pe element: acolo nu se poate pierde. Aici ramane pentru cine citeste si se
 * intreaba de ce e scris de doua ori.
 */
.device-overview .dov-panel:not(.is-open) .dov-body {
    display: none;
}

/* ------------------------------------------ configuratia, in patrate */

/*
 * Perechea lui deviceDetails.php: cate un patrat pentru fiecare fel de
 * componenta, in loc de un tabel lung cu toate specificatiile deodata.
 */

.device-config {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    padding: 6px 0;
    /* Patratele NU se intind unul dupa altul: unul desfacut ar fi lungit toata
       linia lui, lasand gauri albe langa vecinii lui stransi. */
    align-items: start;
}

/* Host / Virtual Machines, deasupra grupurilor de componente. */
.device-hosting {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    padding: 6px 0 18px;
    align-items: start;
}

.device-hosting .dcf-host-card {
    border: 1px solid rgba(16, 24, 40, .1);
    border-radius: 6px;
    background: #fff;
}

.device-hosting .dcf-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.device-hosting .dcf-head-static {
    cursor: default;
    user-select: none;
}

.device-hosting .dcf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(60, 141, 188, .1);
    color: #3c8dbc;
    font-size: 14px;
    flex: 0 0 30px;
}

.device-hosting .dcf-title {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 13px;
    color: #33414e;
    min-width: 0;
}

.device-hosting .dcf-count {
    background: #eef1f4;
    color: #6b7480;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
}

.device-hosting .dcf-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 6px;
    background: rgba(60, 141, 188, .12);
    color: #3c8dbc;
    cursor: pointer;
    flex: 0 0 26px;
}

.device-hosting .dcf-plus:hover {
    background: #3c8dbc;
    color: #fff;
}

.device-hosting .dcf-summary {
    padding: 0 12px 12px;
}

/*
 * ------------------------------------------------ gazda, pe un singur rand
 *
 * Cardul gazdei n-are antet si n-are corp: e un rand. Felul gazdei, o bara, si
 * lista din care se alege masina - vezi comentariul din macheta pentru de ce
 * au picat "Type" si "Host machine".
 *
 * Lista e un `selectpicker`, deci pe ecran nu e `<select>`-ul, ci invelisul
 * `.bootstrap-select` pe care il pune el - iar el isi scrie latimea in atribut,
 * pe element. De-aia `width` se ia inapoi cu `!important`: fara el randul ar
 * avea o lista de latime fixa si un gol dupa ea.
 *
 * `min-width: 0` pe invelis fiindca altfel un nume lung de masina l-ar umfla
 * peste latimea coloanei din grila si ar impinge randul in afara cardului -
 * felul in care un element de flex refuza sa se stranga sub continutul lui.
 */
.device-hosting .dcf-oneline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.device-hosting .dcf-host-type {
    font-weight: 700;
    font-size: 13px;
    color: #33414e;
    white-space: nowrap;
}

.device-hosting .dcf-sep {
    color: #d3d9df;
    font-weight: 400;
}

.device-hosting .dcf-inline-label {
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    color: #8a94a0;
    white-space: nowrap;
}

/*
 * Lista e un `selectpicker`, deci pe ecran nu e `<select>`-ul, ci invelisul
 * `.bootstrap-select` pe care il pune el - iar el isi scrie latimea pe element.
 * De-aia `width` se ia inapoi cu `!important`: fara el randul ar avea o lista
 * de latime fixa si un gol dupa ea.
 *
 * `min-width: 0` fiindca altfel un nume lung de masina ar umfla invelisul peste
 * latimea coloanei din grila si ar impinge randul in afara cartelei - felul in
 * care un element de flex refuza sa se stranga sub continutul lui.
 */
.device-hosting .dcf-oneline .bootstrap-select {
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
}

/* Fara `selectpicker` (scriptul nu s-a incarcat), randul trebuie sa arate la
   fel: `<select>`-ul gol ia acelasi loc pe care l-ar fi luat invelisul. */
.device-hosting .dcf-oneline > select.js-host-select {
    flex: 1 1 auto;
    min-width: 0;
}

.device-hosting .dcf-host-open {
    flex: 0 0 auto;
    color: #8a94a0;
    font-size: 12px;
    padding: 2px 2px 2px 0;
}

.device-hosting .dcf-host-open:hover {
    color: #3c8dbc;
}

/* Propunerea dupa poarta: un rand mic, cu butonul lui. */
.device-hosting .dcf-host-hint {
    margin: 0;
    padding: 0 12px 10px;
    font-size: 12px;
    color: #55606c;
    line-height: 1.5;
}

.device-hosting .dcf-host-hint > i {
    color: #d9a400;
    margin-right: 4px;
}

/* Nota unei legaturi ghicite: mai stinsa decat o propunere - nu cere nimic. */
.device-hosting .dcf-host-hint-soft {
    color: #8a94a0;
}

.device-hosting .dcf-host-hint-soft > i {
    color: #9aa4b0;
}

.device-hosting .dcf-host-apply {
    margin-left: 6px;
    padding: 2px 10px;
    border: 1px solid #3c8dbc;
    border-radius: 4px;
    background: #fff;
    color: #3c8dbc;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.device-hosting .dcf-host-apply:hover {
    background: #3c8dbc;
    color: #fff;
}

.device-hosting .dcf-pick-label {
    display: block;
    font-size: 11px;
    color: #8a94a0;
    margin: 0 0 4px;
}

.device-hosting .dcf-guest-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.device-hosting .dcf-guest-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    border-top: 1px solid rgba(16, 24, 40, .06);
    font-size: 13px;
}

.device-hosting .dcf-guest-list li:first-child {
    border-top: 0;
}

.device-hosting .dcf-guest-list a {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-hosting .dcf-guest-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-hosting .dcf-guest-unresolved .dcf-guest-name {
    color: #5b6570;
}

.device-hosting .dcf-vm-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    font-size: 11px;
    color: #8a94a0;
    white-space: nowrap;
}

.device-hosting .dcf-vm-state {
    font-weight: 700;
    text-transform: capitalize;
}

.device-hosting .dcf-vm-state-running {
    color: #2e7d32;
}

.device-hosting .dcf-vm-state-off,
.device-hosting .dcf-vm-state-saved {
    color: #8a94a0;
}

.device-hosting .dcf-vm-state-paused {
    color: #c77700;
}

.device-hosting .dcf-vm-hint {
    color: #8a94a0;
}

.device-hosting .dcf-unlink {
    border: 0;
    background: transparent;
    color: #9aa4b1;
    cursor: pointer;
    padding: 2px 4px;
    flex: 0 0 auto;
}

.device-hosting .dcf-unlink:hover {
    color: #c0392b;
}

.device-hosting .dcf-picker {
    margin-top: 10px;
}

.device-hosting .dcf-line {
    font-size: 13px;
    color: #33414e;
    margin-bottom: 6px;
}

.device-hosting .dcf-muted {
    color: #9aa4b1;
}

@media (max-width: 700px) {
    .device-hosting {
        grid-template-columns: minmax(0, 1fr);
    }
}

.device-config .dcf-card {
    border: 1px solid rgba(16, 24, 40, .1);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 180ms ease;
}

.device-config .dcf-card:hover {
    box-shadow: 0 2px 8px rgba(16, 24, 40, .08);
}

/* ------------------------------------------------------------ capul */

.device-config .dcf-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none;
}

.device-config .dcf-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: rgba(60, 141, 188, .1);
    color: #3c8dbc;
    font-size: 14px;
    flex: 0 0 30px;
}

.device-config .dcf-title {
    flex: 1 1 auto;
    font-weight: 700;
    font-size: 13px;
    color: #33414e;
    min-width: 0;
}

.device-config .dcf-count {
    background: #eef1f4;
    color: #6b7480;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
}

.device-config .dcf-chevron {
    font-size: 11px;
    color: #9aa4b1;
    transition: transform 200ms ease;
}

.device-config .dcf-card.is-open .dcf-chevron {
    transform: rotate(180deg);
}

/* ----------------------------------------------- randul care identifica */

.device-config .dcf-summary {
    padding: 0 12px 10px 52px;
}

/* Un nume lung se taie cu trei puncte in loc sa rupa patratul; intreg se vede
   la trecerea cu mouse-ul si, oricum, in detalii. */
.device-config .dcf-line {
    font-size: 12px;
    color: #4a5560;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 1px 0;
}

.device-config .dcf-muted {
    color: #9aa4b1;
}

/*
 * Cele trei proprietati de pe patratul inchis.
 *
 * Aceleasi doua coloane ca in detalii, ca ochiul sa nu invete o asezare la
 * inchis si alta la deschis - dar mai stranse, fiindca aici sunt trei randuri,
 * nu treizeci. Numele proprietatii la dreapta, langa valoarea ei, ca sa se
 * citeasca in perechi.
 */
.device-config .dcf-brief {
    display: grid;
    grid-template-columns: minmax(70px, 42%) 1fr;
    gap: 1px 8px;
    margin: 4px 0 0;
    font-size: 11px;
    line-height: 1.45;
}

.device-config .dcf-brief > dt {
    color: #9aa4b1;
    font-weight: 400;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.device-config .dcf-brief > dd {
    margin: 0;
    color: #4a5560;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------- detaliile */

.device-config .dcf-details {
    display: none;
    border-top: 1px solid rgba(16, 24, 40, .08);
    padding: 10px 12px;
    background: #fbfcfd;
}

.device-config .dcf-card.is-open .dcf-details {
    display: block;
    /* Fara `both`, din acelasi motiv ca la `dovReveal` mai jos: cu el, starea
       finala - un `transform` - ramane lipita dupa animatie, iar un transform
       face din element un bloc de referinta care strica `sticky` si `fixed`
       inauntru. Aceeasi scapare, in acelasi fisier, la a doua desfacere. */
    animation: dcfReveal 200ms ease;
}

@keyframes dcfReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Doua coloane: numele proprietatii si valoarea ei. Grid, nu `dl-horizontal`
   din Bootstrap - acela taie numele lungi la o latime fixa. */
.device-config .dcf-specs {
    display: grid;
    grid-template-columns: minmax(90px, 40%) 1fr;
    gap: 2px 10px;
    margin: 0 0 10px;
    font-size: 12px;
}

.device-config .dcf-specs:last-child {
    margin-bottom: 0;
}

.device-config .dcf-specs > dt {
    color: #6b7480;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.device-config .dcf-specs > dd {
    margin: 0;
    color: #33414e;
    overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
    .device-config .dcf-chevron,
    .device-config .dcf-card.is-open .dcf-details {
        transition: none;
        animation: none;
    }
}

/* Attached / Printers: aceeasi grila ca Configuration, culoarea Inventoree */

.device-attached .dcf-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-attached .dcf-chip {
    flex: 0 0 auto;
    background: rgba(177, 97, 49, .1);
    color: #B16131;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.device-attached .dcf-chip-conn {
    background: #eef1f4;
    color: #6b7480;
}

.device-attached .dcf-chip-working {
    background: rgba(39, 174, 96, .14);
    color: #1e8449;
}

.device-attached .dcf-chip-not_working,
.device-attached .dcf-chip-warn,
.device-attached .dcf-card.has-problem .dcf-chip-warn {
    background: rgba(192, 57, 43, .12);
    color: #c0392b;
}

.device-attached .dcf-chip-disconnected {
    background: rgba(127, 140, 141, .16);
    color: #5d6d7e;
}

.device-attached .dcf-card.has-problem,
.device-attached .att-status-not_working {
    border-color: rgba(192, 57, 43, .35);
}

.device-attached .att-status-working {
    border-color: rgba(39, 174, 96, .28);
}

.device-attached .att-status-disconnected {
    border-color: rgba(127, 140, 141, .35);
    opacity: .92;
}

.device-attached .dcf-warn {
    color: #c0392b;
    font-weight: 600;
}

/*
 * =============================================================================
 * COLOANE DE CATEGORII - Attached Devices SI Configuration
 * =============================================================================
 *
 * Amandoua ecranele raspund la aceeasi forma de intrebare: "din ce e facuta
 * masina asta" si "ce atarna de ea". Amandoua aveau aceeasi problema - o
 * insiruire in care trebuia sa cauti cu ochiul ce te intereseaza.
 *
 * La Attached, categoriile stateau una sub alta, cu istoria fiecareia
 * intercalata: ca sa vezi ce are masina derulai prin patru jurnale, iar
 * comparatia dintre categorii ("are ecran, dar n-are mouse") cerea sa tii minte
 * ce ai vazut cu doua ecrane mai sus. La Configuration era o grila de patrate
 * egale in ordinea in care raporteaza agentul, deci ca sa afli ce discuri are
 * te uitai pe rand la fiecare pana dadeai peste ele.
 *
 * De-aia clasele se cheama `dcol-` si nu `att-`: sunt ale amandurora. Ce a
 * ramas cu `att-` e numai istoria, care exista doar la Attached.
 *
 * `auto-fit` cu un minim, nu un numar fix de coloane: pe un ecran ingust
 * grupurile se aseaza pe doua randuri in loc sa se subtieze pana cand un card
 * nu mai incape. Grila istoriei foloseste ACELASI minim, ca sa cada sub
 * coloanele ei.
 */
.dcol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
    align-items: start;
}

.dcol {
    min-width: 0;
}

.dcol-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 700;
    color: #33414e;
}

.dcol-head .fas {
    color: #B16131;
}

.dcol-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dcol-count {
    flex: 0 0 auto;
    background: #eef1f4;
    color: #6b7480;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
}

/* Semnul, nu doar culoarea: un periferic care nu merge trebuie sa se vada din
   capul coloanei, fara sa desfaci cardul de dedesubt. */
.dcol-bad {
    flex: 0 0 auto;
    color: var(--od-crit, #b42318);
    font-size: 13px;
}

.dcol.has-problem .dcol-head {
    color: var(--od-crit, #b42318);
}

/* Titlul poarta lamurirea in `title`; randul de proza de sub el a fost scos -
   de folos prima oara, de prisos de-atunci incolo, si impingea cutiile in jos. */
.dcol-head[title] { cursor: help; }

.dcol-head { margin-bottom: 10px; }

/* Intr-o coloana ingusta cardurile stau unul sub altul, nu doua pe rand. */
.dcol-cards {
    display: block;
}

.dcol-cards .dcf-card {
    width: auto;
    margin: 0 0 10px;
}

.dcol-empty {
    margin: 0 0 12px;
    font-size: 12px;
    color: var(--od-ink-faint, #6b7480);
}

/*
 * Istoria, sub toate coloanele.
 *
 * "Ce s-a schimbat" e o a doua intrebare, pusa dupa "ce am acum" - de-aia e
 * dedesubt, si nu intercalata. Ramane insa pe coloane, ca fiecare eveniment sa
 * stea sub categoria lui: o singura lista amestecata ar fi cerut sa citesti
 * numele categoriei pe fiecare rand.
 */
.att-history-wrap {
    margin-top: 22px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.att-history-head {
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    color: #33414e;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.att-hist-col {
    min-width: 0;
}

.att-hist-name {
    margin: 0 0 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--od-ink-faint, #6b7480);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.att-history-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.att-history-item {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .06);
    font-size: 11.5px;
}

.att-history-item:last-child {
    border-bottom: 0;
}

.att-history-when {
    color: var(--od-ink-faint, #6b7480);
}

.att-history-action {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10.5px;
}

.att-history-connected .att-history-action {
    color: var(--od-ok, #008300);
}

.att-history-disconnected .att-history-action {
    color: var(--od-crit, #b42318);
}

.att-history-name {
    color: #33414e;
    word-break: break-word;
}

.device-printers .dpr-heading {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #33414e;
}

.device-printers .dpr-lead {
    margin: 2px 0 10px;
    font-size: 12px;
    color: #6b7480;
}

/* --------------------------------------- meniul ramane pe loc */

/*
 * Meniul ramane la vedere cat derulezi continutul.
 *
 * Fisa se deschide sub randul din tabel, iar continutul ei poate fi lung: patru
 * pagini de procese, o lista de aplicatii. Derulandu-l, meniul pleca in sus - si
 * ajungeai jos fara sa mai ai pe ce apasa si fara sa mai vezi la ce masina te
 * uiti, decat intorcandu-te pana la inceput.
 *
 * CUM STA LIPIT, SI DE CE ASA
 *
 * Un element lipit nu poate calatori decat inauntrul parintelui lui. Aici
 * parintele e randul, iar inaltimea randului e a celei mai inalte coloane -
 * adica a continutului. Deci meniul se margineste la inaltimea ecranului si isi
 * face propria derulare, iar continutul ramane cum e: asa randul e mai inalt
 * decat meniul, si meniul chiar are pe unde aluneca.
 *
 * A fost aici si regula pe dos - continutul lipit, pentru cand meniul cu toate
 * modulele desfacute era mai lung decat ecranul. Nu mai e nevoie de ea: un meniu
 * marginit la inaltimea ecranului nu mai impinge nimic, se deruleaza in el
 * insusi. Iar amandoua marginite la aceeasi inaltime se anulau una pe alta -
 * randul devenea exact cat ele, si niciuna nu mai avea pe unde sa alunece.
 *
 * DE CE NU E DE AJUNS `position: sticky`
 *
 * Pentru ca aici nu functioneaza. Un element lipit se raporteaza la fereastra
 * NUMAI daca niciun stramos nu are `transform` sau `overflow` - iar tabelul de
 * dispozitive are amandoua (vezi si nota din list_chrome.js, unde butonul
 * plutitor a trebuit mutat in `body` din exact acelasi motiv). Sub un
 * `transform`, lipirea se face de parintele transformat, nu de ecran, si meniul
 * pleaca in sus odata cu pagina - exact ce se vedea.
 *
 * CE FACE IN LOC
 *
 * Fisa insasi se margineste la inaltimea ecranului, si atunci ce se deruleaza e
 * CONTINUTUL ei, nu pagina. Meniul si continutul stau alaturi, fiecare cu
 * derularea lui, si meniul ramane langa ce citesti fara sa depinda de vreun
 * stramos. Lipirea ramane scrisa mai jos ca supliment: unde chiar merge, nu
 * strica; unde nu, marginirea face treaba oricum.
 */
/*
 * -----------------------------------------------------------------------------
 * DOUA REPARATII, DUPA CE DERULAREA SE BLOCA LA DESFACERE
 * -----------------------------------------------------------------------------
 *
 * 1. `overscroll-behavior: contain` A PLECAT.
 *
 * El spunea: cand derularea dinauntru ajunge la capat, nu trage pagina dupa ea.
 * Suna bine si era chiar gresit. Cu doua zone de derulare una langa alta, omul
 * cu mouse-ul peste continut ajungea la capatul cutiei si NIMIC nu se mai
 * misca - nici cutia, care se terminase, nici pagina, care era oprita anume.
 * Trebuia sa scoata mouse-ul din cutie ca sa se dezblocheze, si nimeni nu
 * ghiceste asta. Aia e "ramane blocat".
 *
 * Fara el, rotita trece mai departe la pagina cand cutia s-a terminat. Se pierde
 * ce se voia - sa nu iesi din fisa taman cand ai terminat de citit-o - dar
 * pierderea aia e o neplacere, pe cand cealalta era o infundatura.
 *
 * 2. `120px` A FOST INLOCUIT CU O MASURATOARE.
 *
 * Numarul voia sa spuna "cat tine antetul si randul de deasupra". Dar antetul nu
 * e la fel pe toate ecranele - are sau nu firimituri, are sau nu banda de
 * dispozitiv - iar acolo unde e mai inalt de 120px, cutia cobora sub marginea de
 * jos a ferestrei si ULTIMELE randuri nu se mai puteau ajunge deloc: derularea
 * dinauntru se terminase, iar restul era sub ecran.
 *
 * `--dw-top` il masoara `device_workspace.js`, din pozitia adevarata a randului,
 * si il pune la loc dupa fiecare desfacere si la fiecare redimensionare.
 * `120px` a ramas doar ca rezerva, pentru clipa dinaintea primei masuratori.
 */
.dw-row {
    align-items: flex-start;

    /* Fisa nu mai creste peste ecran. Restul (antetul fixat al paginii plus
       randul din tabel de deasupra) e lasat la vedere dinadins, ca sa se stie
       mereu la ce masina te uiti. */
    max-height: calc(100vh - var(--dw-top, 120px));
}

.dw-menu,
.dw-content {
    /* Aceeasi margine ca a randului, scrisa din nou si nu ca `100%`: procentul
       s-ar raporta la o inaltime pe care parintele n-o are hotarata (are doar un
       maxim), si atunci n-ar limita nimic. */
    max-height: calc(100vh - var(--dw-top, 120px));
    overflow-y: auto;
}

.dw-menu {
    /* Supliment, pentru ecranele unde chiar se poate lipi. */
    position: sticky;
    top: 0;
    align-self: flex-start;
}

/*
 * Numele masinii ramane in capul meniului si cand meniul insusi se deruleaza.
 *
 * Lipit de `top: 0`, adica de marginea coloanei derulabile, nu de a ecranului:
 * inauntrul unui element cu `overflow`, aia e marginea care conteaza.
 */
.device-workspace-menu .dwm-device {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 4px;
    background: #ffffff;
    border-bottom: 1px solid rgba(16, 24, 40, .08);
    font-weight: 700;
    font-size: 13px;
    color: #33414e;
}

.device-workspace-menu .dwm-device > i {
    color: #9aa4b1;
}

/* Un nume lung se taie, nu rupe coloana. */
.device-workspace-menu .dwm-device > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * DOUA NUME, UNUL SUB ALTUL
 *
 * Sus numele nostru, dedesubt hostname-ul pe care il raporteaza masina. Al
 * doilea e mic si sters: nu se citeste, se verifica - iar cand nu i-am dat
 * niciun nume, nu apare deloc, ca sa nu scrie acelasi cuvant de doua ori.
 */
.device-workspace-menu .dwm-device {
    flex-wrap: wrap;
    row-gap: 0;
}

.device-workspace-menu .dwm-device-name {
    flex: 0 1 auto;
    min-width: 0;
}

.device-workspace-menu .dwm-device-host {
    flex: 1 0 100%;
    padding-left: 22px;
    font-weight: 400;
    font-size: 11px;
    color: #97a2ae;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.device-workspace-menu .dwm-device-edit {
    flex: 0 0 auto;
    margin-left: auto;
    padding: 2px 5px;
    border: 0;
    border-radius: 4px;
    background: none;
    color: #b3bcc7;
    font-size: 11px;
    cursor: pointer;
    opacity: 0;
    transition: opacity .12s ease, color .12s ease;
}

.device-workspace-menu .dwm-device:hover .dwm-device-edit,
.device-workspace-menu .dwm-device-edit:focus {
    opacity: 1;
}

.device-workspace-menu .dwm-device-edit:hover {
    color: #4a5666;
    background: #eef1f5;
}

.device-workspace-menu .dwm-device-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    border: 1px solid #7fa8d0;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #33414e;
}

/* Pe ecran ingust cele doua nu mai stau alaturi, deci nu mai are ce sa ramana
   pe loc - si o inaltime marginita ar incurca. */
@media (max-width: 991px) {
    .dw-row {
        max-height: none;
    }

    .dw-menu,
    .dw-content {
        position: static;
        max-height: none;
        overflow-y: visible;
    }

    .device-workspace-menu .dwm-device {
        position: static;
    }
}

/* --------------------------------- Events: prima inventariere, desfacuta */

.ev-initial {
    color: #33414e;
    text-decoration: none;
}

.ev-initial:hover {
    color: #3c8dbc;
}

.ev-initial i {
    font-size: 10px;
    color: #9aa4b1;
    margin-left: 4px;
}

.ev-initial-row > td {
    background: #fbfcfd;
}

.ev-initial-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 4px 18px;
    columns: 2;
    column-gap: 24px;
}

.ev-initial-list > li {
    font-size: 12px;
    color: #4a5560;
    padding: 2px 0;
    break-inside: avoid;
}

.ev-initial-empty {
    color: #9aa4b1;
}

.ev-command {
    color: #9aa4b1;
    text-decoration: none;
    margin-left: 4px;
}

.ev-command:hover {
    color: #3c8dbc;
}

.ev-command i {
    font-size: 10px;
}

.ev-command-row > td {
    background: #111;
}

.ev-command-out {
    margin: 0;
    padding: 10px 12px;
    max-height: 240px;
    overflow: auto;
    font-size: 12px;
    line-height: 1.4;
    color: #e8e8e8;
    background: #111;
    white-space: pre-wrap;
    word-break: break-word;
}

.ev-command-out.is-error {
    color: #f5c6cb;
}

.ev-command-empty {
    padding: 8px 12px;
    color: #9aa4b1;
    font-size: 12px;
}

.ev-scan-result {
    padding: 8px 12px;
}

.ev-scan-summary {
    margin: 0 0 8px;
    font-size: 13px;
    color: #3a4a5b;
}

.ev-scan-table {
    margin-bottom: 0;
    font-size: 12px;
}

@media (max-width: 991px) {
    .ev-initial-list {
        columns: 1;
    }
}

/* ------------------------------------------------------------------ *
 * Insignele de pe file
 *
 * Numarul mic de langa numele unei file, in Agent Settings si in Discovery.
 * Aici, in foaia spatiului de lucru al dispozitivului, fiindca fragmentele
 * incarcate prin ajax nu-si aduc foi proprii - iar asta e legata din antet
 * pentru toate paginile.
 *
 * Tonurile sunt putine si inseamna ceva: albastru e o cantitate gasita,
 * chihlimbar e ceva ce asteapta un om, cenusiu e o informatie fara urgenta.
 * ------------------------------------------------------------------ */

.tab-badge {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    vertical-align: 1px;
}

.tab-badge-blue {
    background: #e8f1f8;
    color: #3f7c96;
}

.tab-badge-amber {
    background: #fdf3e3;
    color: #b8801f;
}

.tab-badge-grey {
    background: #f0f3f6;
    color: #7b8a9a;
}

/* Pe fila aleasa, insigna nu mai concureaza cu numele ei ingrosat. */
.line-tabs > li.active > a .tab-badge {
    opacity: .85;
}


/*
 * -----------------------------------------------------------------------------
 * CONFIGURATION: LATIMI, NU COLOANE EGALE
 * -----------------------------------------------------------------------------
 *
 * `.dcol-grid` singur imparte pagina in coloane egale, si asta e bine la
 * Attached Devices, unde cele patru categorii au fiecare cate un card sau doua.
 * La Configuration nu: "Compute" are procesor, memorie, placa, BIOS si carcasa,
 * iar "Storage" are un disc. Egale, Compute iesea o coloana de cinci carduri
 * unul sub altul, cu trei sferturi din pagina albe langa el.
 *
 * Aici coloanele sunt patru, fixe, iar un grup cu mai multe cutii ia doua.
 * Cutiile lui se aseaza atunci doua cate doua inauntru - grila lor,
 * `.device-config`, face asta singura, fiindca are un minim si nu un numar.
 *
 * `dense`: un grup ingust care incape intr-o gaura ramasa se muta in ea, in loc
 * sa lase un loc gol si sa coboare. Ordinea grupurilor conteaza pentru citit,
 * dar nu atat cat conteaza sa nu ai gauri intr-un ecran care se citeste dintr-o
 * privire.
 */
.dcol-grid-span {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: row dense;
}

.dcol-grid-span .dcol-span-2 { grid-column: span 2; }

@media (max-width: 1400px) {
    .dcol-grid-span { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
    .dcol-grid-span { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Sub doua coloane, "doua coloane" nu mai inseamna nimic: grupul lat ar fi iesit
   din pagina. Toate devin de o latime. */
@media (max-width: 700px) {
    .dcol-grid-span { grid-template-columns: minmax(0, 1fr); }
    .dcol-grid-span .dcol-span-2 { grid-column: span 1; }
}

/*
 * PANOUL DE REDENUMIRE
 *
 * Se desface SUB nume, in acelasi rand de flex (`flex: 1 0 100%`), nu ca
 * fereastra plutitoare: un panou absolut ar fi fost taiat de marginea cardului.
 *
 * NU mai e sub `.device-workspace-menu`: panoul a plecat din capul meniului si
 * a ajuns pe Summary, langa Owner - vezi `_partials/device_rename.php`. Prefixul
 * l-ar fi lasat fara nicio regula acolo, adica un panou fara chenar, cu campuri
 * de marimea implicita a browserului.
 *
 * `.dwm-rename[hidden]` e obligatoriu: regula noastra de `display` bate
 * `[hidden] { display: none }` al browserului, si fara perechea asta panoul
 * inchis ar tine spatiu gol sub nume. Am mai livrat exact greseala asta o data,
 * pe ecranul de Feature Requests.
 */
.dwm-rename {
    flex: 1 0 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid rgba(16, 24, 40, .1);
    border-radius: 8px;
    background: #f8fafc;
    font-weight: 400;
    white-space: normal;
}

.dwm-rename[hidden] {
    display: none;
}

.dwm-rename-head {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #5b6774;
}

.dwm-rename-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

.dwm-rename-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 26px;
    padding: 0 7px;
    border: 1px solid #cfd7e0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #33414e;
    background: #ffffff;
}

.dwm-rename-input:focus {
    border-color: #7fa8d0;
    outline: none;
}

.dwm-rename-go {
    flex: 0 0 auto;
    height: 26px;
    padding: 0 10px;
    border: 1px solid #cfd7e0;
    border-radius: 4px;
    background: #ffffff;
    font-size: 12px;
    font-weight: 600;
    color: #33414e;
    cursor: pointer;
}

.dwm-rename-go:hover {
    background: #eef1f5;
}

/* Butonul care atinge masina arata altfel decat cel care nu o atinge. */
.dwm-rename-go.is-ask {
    border-color: #b8894a;
    background: #fdf6ea;
    color: #7a5216;
}

.dwm-rename-go.is-ask:hover {
    background: #f8ebd6;
}

.dwm-rename-go[disabled] {
    opacity: .55;
    cursor: default;
}

.dwm-rename-note {
    margin: 6px 0 0;
    font-size: 11px;
    line-height: 1.45;
    font-weight: 400;
    color: #8a95a2;
}

.dwm-rename-note.is-warn {
    color: #7a5216;
}

.dwm-rename-note a {
    color: #3d6f9e;
}

/* =============================================================================
   RANDUL DESCHIS, IN TABEL
   -----------------------------------------------------------------------------
   Fisa unei masini se deschide SUB randul ei din tabel. Cat timp e deschisa,
   numele masinii din rand se scrie ingrosat si cu majuscule: el e capul fisei
   de dedesubt, si trebuie sa se vada care rand a fost apasat fara sa cauti
   sageata sau randul evidentiat.

   `:has(center.show_details)` tine regula pe randurile care CHIAR se desfac -
   `tr.details` singur ar fi prins si alte tabele care folosesc aceeasi clasa.
   In interiorul randului, numele e singurul `<p>`: asa il randeaza toate
   modelele de liste de dispozitive.
   ========================================================================== */

tr.details:has(center.show_details) > td p {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Cardul cu numele masinii, de pe Summary: acelasi cu al lui Owner, doar ca
   panoul de redenumire se desface sub el, pe randul lui. */
.dv-name {
    flex-wrap: wrap;
}