/*
 * COPIE. Originalul e `public/css/events_chrome.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.
 */
/*
 * Bara de deasupra jurnalelor de evenimente.
 *
 * Perechea lui `events_chrome.js`. Fisier separat, legat din antetul comun: nu
 * cere reconstruirea foii mari cu unealta de build, si se citeste langa bucata
 * de macheta care ii da nastere.
 */

.od-ev {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid #edeff2;
}

/* ---------------------------------------------------------- categoriile */

.od-ev-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.od-ev-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid #e2e5e9;
    border-radius: 15px;
    background: #fff;
    color: #55606c;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.od-ev-cat:hover { border-color: #c9ced6; }

/* Aleasa: plina, ca sa se vada de la distanta care lista se citeste. */
.od-ev-cat.is-on {
    background: #33414e;
    border-color: #33414e;
    color: #fff;
}

/* Critical: se vede de la distanta, inainte sa citesti eticheta.
   "Failed", din istoricul comenzilor, e acelasi lucru cu alt nume. */
.od-ev-cat[data-cat="critical"],
.od-ev-cat[data-cat="failed"] {
    border-color: #e8b4b4;
    color: #a33b3b;
}

.od-ev-cat[data-cat="critical"].is-on,
.od-ev-cat[data-cat="failed"].is-on {
    background: #b42318;
    border-color: #b42318;
    color: #fff;
}

/* Major: se vede ca e mai mult decat un monitor mutat, dar nu striga.
   "Waiting" - o comanda ramasa la rand - are aceeasi greutate. */
.od-ev-cat[data-cat="major"],
.od-ev-cat[data-cat="waiting"] {
    border-color: #e6cf9a;
    color: #8a6116;
}

.od-ev-cat[data-cat="major"].is-on,
.od-ev-cat[data-cat="waiting"].is-on {
    background: #b54708;
    border-color: #b54708;
    color: #fff;
}

/* Fara randuri: se stinge, dar nu dispare - o categorie care apare si dispare
   de la un filtru la altul face bara sa sara sub deget. */
.od-ev-cat.is-empty { opacity: .45; }

.od-ev-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #eef1f4;
    color: #5b656f;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.od-ev-cat.is-on .od-ev-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

/* ------------------------------------------------- cautarea si perioada */

.od-ev-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.od-ev-search { position: relative; }

.od-ev-search .fas {
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -6px;
    color: #b3b9c1;
    font-size: 12px;
}

.od-ev-search input {
    width: 260px;
    height: 30px;
    padding-left: 28px;
    font-size: 12px;
}

.od-ev-quick { display: flex; gap: 4px; }

.od-ev-span {
    border: 1px solid #e2e5e9;
    border-radius: 13px;
    background: #fff;
    color: #6b7480;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    cursor: pointer;
}

.od-ev-span.is-on {
    background: #eef4fa;
    border-color: #b9d3e8;
    color: #2a6cb5;
}

.od-ev-range {
    display: flex;
    align-items: center;
    gap: 4px;
}

.od-ev-range input {
    width: 138px;
    height: 30px;
    font-size: 12px;
}

.od-ev-dash { color: #b3b9c1; }

.od-ev-clear {
    border: 0;
    background: transparent;
    color: #b3b9c1;
    font-size: 18px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.od-ev-clear:hover { color: #33414e; }

@media (max-width: 991px) {
    .od-ev-tools { margin-left: 0; }
    .od-ev-search input { width: 100%; }
}