/*
 * COPIE. Originalul e `public/css/device_identity.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.
 */
/*
 * Iconita de identitate a masinii, peste tot: comunicare + tip + OS + Host.
 * Vezi get_device_icon() si get_status_dot() in application/helpers/devices_helper.php.
 */

.od-id { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }

/* --- comunicarea: cinci trepte ------------------------------------------ */

.od-comm { display: inline-block; vertical-align: middle; }

.dots.od-comm { width: 10px; height: 10px; border-radius: 50%; }

/*
 * VERDE cat masina vorbeste, rosu numai cand tace.
 *
 * Pana pe 24 septembrie 2026 treapta cea mai proaspata - "vorbeste chiar
 * acum", sub 30 de secunde - era desenata cu #d83430, adica EXACT culoarea lui
 * `od-comm-lost`, "n-a mai vorbit de sapte zile": aceeasi bulina roscata la
 * cele doua capete ale scalei. Asa a fost raportata din productie: "in tot
 * portalul device-ul clipoceste verde; il expandez - eu sunt pe statie si
 * lucrez, deci comunica - si se face rosu". Nu se schimbase nimic in date:
 * masina doar coborase sub 30 de secunde, adica devenise MAI vie, si culoarea
 * spunea invers. Inainte de 26.9.3.1 rosu clipind era chiar treapta cea mai
 * rea (`dots-danger faa-flash`, "peste 30 de zile"), deci ochiul invatase
 * exact pe dos.
 *
 * Deci: cele trei trepte care inseamna "vorbeste" sunt toate verzi, iar
 * "acum" se deosebeste prin INEL, nu prin culoare.
 */
.dots.od-comm-live  { background: #2e9e4a; animation: od-comm-pulse 1.2s ease-out infinite; }
.dots.od-comm-fresh { background: #2e9e4a; animation: od-comm-blink 1.4s steps(1, end) infinite; }
.dots.od-comm-ok    { background: #2e9e4a; }

/* semnul de exclamare intr-un cerc, galben sau rosu */
.od-comm-stale, .od-comm-lost {
    width: 14px; height: 14px; border-radius: 50%;
    font-size: 9px; line-height: 14px; text-align: center; color: #fff;
}
.od-comm-stale { background: #e0a800; }
.od-comm-lost  { background: #d83430; }

@keyframes od-comm-blink { 50% { opacity: 0.15; } }
@keyframes od-comm-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(46, 158, 74, .55); }
    100% { box-shadow: 0 0 0 6px rgba(46, 158, 74, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .dots.od-comm-live, .dots.od-comm-fresh { animation: none; }
}

/* --- tipul aparatului, cu sistemul de operare PE el ------------------------ */

.od-id-type { position: relative; display: inline-block; line-height: 1; }

/* alaturi (imprimante, telefoane, necunoscute): ca inainte */
.od-id-os { color: #6b7480; font-size: 13px; }
.od-id-os-windows { color: #0a66c2; }
.od-id-os-linux   { color: #333; }
.od-id-os-macos   { color: #555; }

/*
 * In ecran: alb pe ecranul inchis al glifei. Ecranul lui fa-desktop ocupa
 * partea de sus a glifei (~ 65%), al lui fa-laptop e putin mai jos si mai
 * turtit; procentele de mai jos aseaza glifa OS in mijlocul lui.
 */
.od-id-type .od-id-os {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 8px;
    color: #fff;
    pointer-events: none;
}
.od-id-type-desktop .od-id-os { top: 37%; }
.od-id-type-laptop  .od-id-os { top: 42%; font-size: 7px; }

/* pe server nu e ecran: insigna mica, rotunda, in coltul carcasei */
.od-id-type-server .od-id-os {
    left: auto; right: -5px; top: auto; bottom: -4px;
    transform: none;
    width: 13px; height: 13px; border-radius: 50%;
    background: #fff; border: 1px solid rgba(16, 24, 40, .18);
    color: #33414e; font-size: 8px; line-height: 12px; text-align: center;
}
.od-id-type-server .od-id-os-windows { color: #0a66c2; }

.od-id-host {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 0 6px; border-radius: 9px;
    background: rgba(60, 141, 188, .12); color: #3c8dbc;
    font-size: 10px; font-weight: 700; letter-spacing: .02em;
}

/* legenda */
.table_legend .od-comm { margin-right: 4px; }