/*
 * COPIE. Originalul e `public/css/idle.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 - exceptie:
 * bara din v4 e rosie si are sase casute, pe drumul de rescriere; portalul
 * vechi pastreaza griul si campul unic pana livrarea trece pe v4.
 */
/*
 * Bara de inactivitate. Jos, peste tot, si nu se inchide - cat e acolo, pagina
 * de deasupra ei nu mai raspunde oricum. Rosie: e o deconectare, nu un anunt.
 */
.od-idle-bar {
    position: fixed;
    left: 0;
    right: 0;
    /* Deasupra subsolului portalului, nu peste el: acolo stau versiunea si
       Change Log-ul, si exact alea se cer cand cineva raporteaza o problema.
       Vezi tools/check_overlays.py, care refuza un panou care le acopera. */
    bottom: 39px;
    z-index: 12000;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 12px 20px;
    background: #b33a3a;
    color: #fff;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .28);
    font-size: 13px;
}

.od-idle-bar[hidden] { display: none; }

/* Subsolul propriu al portalului ar sta sub ea. */
body.od-idle-on { padding-bottom: 118px; }

.od-idle-what { display: flex; align-items: center; gap: 9px; min-width: 0; }

.od-idle-what i { color: #ffe08a; font-size: 15px; }

.od-idle-what strong { font-weight: 600; }

.od-idle-what span { color: rgba(255, 255, 255, .88); }

.od-idle-act { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.od-idle-bar .btn { white-space: nowrap; }

.od-idle-step2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

#odIdleStep2[hidden] { display: none; }

/*
 * Cele sase casute - aceleasi clase ca la login (`CodeBoxes`), desenate aici
 * fiindca foaia de login nu e incarcata pe fiecare pagina. Pe fondul rosu:
 * albe, ca cifra tastata sa se vada clar.
 */
.od-idle-bar .od-boxes {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
}

.od-idle-bar .od-box {
    width: 36px;
    flex: 0 0 36px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 6px;
    background: rgba(0, 0, 0, .18);
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

.od-idle-bar .od-box:focus {
    border-color: #fff;
    background: rgba(0, 0, 0, .32);
    outline: none;
}

.od-idle-say { font-size: 12px; color: rgba(255, 255, 255, .9); }

.od-idle-say.od-idle-bad { color: #ffe0d8; font-weight: 600; }

@media (max-width: 767px) {
    .od-idle-act { margin-left: 0; width: 100%; }
    body.od-idle-on { padding-bottom: 168px; }
    .od-idle-bar .od-box {
        width: 32px;
        flex-basis: 32px;
        height: 36px;
        font-size: 16px;
    }
}