/*
 * COPIE. Originalul e `public/css/inflight_drawer.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.
 */
/*
 * Fereastra "In flight", trasa din dreapta.
 *
 * -----------------------------------------------------------------------------
 * ACEEASI CROIALA CA SERTARUL AGENTULUI
 * -----------------------------------------------------------------------------
 *
 * Pana pe 4 septembrie 2026 sertarul asta era desenat singur: 520px lati,
 * `top: 0` si `height: 100%`, deci ACOPEREA antetul si subsolul, cu o pinza
 * intunecata peste toata pagina, si cu pastile rotunjite la 12px si culori
 * scrise de mana. Sertarul agentului, care se deschide la un lat de deget de
 * el, se aseaza INTRE barile portalului si e facut din simbolurile temei.
 * Doua ferestre de acelasi fel care nu seamana intre ele arata ca doua
 * produse lipite, nu ca unul.
 *
 * Deci aceleasi masuri si aceleasi simboluri ca in `od_ai.css`: 440px,
 * asezata intre bari (numerele de aici sunt doar punctul de plecare -
 * `inflight_drawer.js` masoara barile adevarate la deschidere), cota sub ele,
 * `var(--od-*)` peste tot, colturi de 3px.
 */
.od-flow-overlay {
    position: fixed;
    top: 50px;
    bottom: 39px;
    left: 0;
    right: 0;
    background: rgba(20, 26, 33, .35);
    opacity: 0;
    visibility: hidden;
    /* Si `pointer-events`, nu doar `visibility`: un element cu opacity 0 tot
       prinde clickurile, si pagina ar parea inghetata fara sa se vada de ce. */
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1000;
}

.od-flow-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }

.od-flow-drawer {
    position: fixed;
    top: 50px;
    right: 0;
    bottom: 39px;
    width: 440px;
    max-width: 92vw;
    background: var(--od-surface, #fff);
    box-shadow: -6px 0 24px rgba(20, 26, 33, .18);
    transform: translateX(100%);
    transition: transform .22s ease;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    font-size: 13px;
    pointer-events: none;
}

.od-flow-drawer.is-open { transform: translateX(0); pointer-events: auto; }

/* Banda colorata a modulului, ca la agent si ca la Chat. */
.od-flow-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--od-opteemum-deep, #198461);
    color: var(--od-ink-on-color, #fff);
}

.od-flow-head strong { font-size: 14px; }

/* Comutatorul de vedere sta langa nume, ca treapta la agent: contur alb pe
   verde, nu o casuta de formular in mijlocul benzii. */
/*
 * `display` pe o clasa bate `[hidden]` din foaia browserului, si asa comutatorul
 * Mine / Company se vedea SI cand serverul spunea ca omul n-are voie pe vederea
 * de firma: se apasa, se cerea, se refuza, si lista se intorcea tot a lui. Un
 * buton mort care arata viu. Regula asta il stinge cu adevarat.
 */
.od-flow-scope[hidden] {
    display: none;
}

.od-flow-scope {
    display: inline-flex;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 3px;
    overflow: hidden;
    margin-right: auto;
}

.od-flow-scope-pick {
    border: 0;
    background: transparent;
    color: var(--od-ink-on-color, #fff);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    cursor: pointer;
}

.od-flow-scope-pick.is-on { background: rgba(255, 255, 255, .22); }
.od-flow-scope-pick:hover { background: rgba(255, 255, 255, .12); }

.od-flow-refresh, .od-flow-close {
    border: 0;
    background: transparent;
    color: var(--od-ink-on-color, #fff);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: .85;
}

.od-flow-refresh { margin-left: auto; }
.od-flow-scope:not([hidden]) ~ .od-flow-refresh { margin-left: 0; }
.od-flow-refresh:hover, .od-flow-close:hover { opacity: 1; }

/* Al doilea rand, ca `.od-ai-toolbar`: fundal mai stins, o linie sub el. */
.od-flow-tabs {
    display: flex;
    gap: 4px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--od-rule-soft, #e3e7ec);
    background: var(--od-surface-alt, #fafbfc);
    flex-wrap: wrap;
}

.od-flow-tab {
    border: 1px solid var(--od-rule, #d5dae1);
    background: var(--od-surface, #fff);
    border-radius: 3px;
    color: var(--od-ink, #3d4752);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 10px;
    cursor: pointer;
}

.od-flow-tab:hover { background: var(--od-surface-alt, #f3f5f7); }
.od-flow-tab.is-on { background: var(--od-ground, #eef0f2); border-color: var(--od-rule, #d5dae1); }

.od-flow-body { flex: 1; overflow: auto; padding: 8px 14px; background: var(--od-ground, #f4f6f8); }

.od-flow-foot {
    padding: 8px 14px;
    border-top: 1px solid var(--od-rule-soft, #e3e7ec);
    background: var(--od-surface-alt, #fafbfc);
}

.od-flow-muted { color: var(--od-ink-faint, #6b7480); font-size: 12px; }

/* Randurile se ridica de pe fundal, ca bulele agentului. */
.od-flow-item {
    background: var(--od-surface, #fff);
    border: 1px solid var(--od-rule-soft, #e3e7ec);
    border-radius: 3px;
    padding: 8px 10px;
    margin-bottom: 6px;
}

.od-flow-line { display: flex; align-items: baseline; gap: 8px; }
.od-flow-dev { font-weight: 600; color: var(--od-ink, #1f2933); }
.od-flow-when { margin-left: auto; color: var(--od-ink-faint, #8a93a0); font-size: 11px; white-space: nowrap; }

.od-flow-cmd {
    color: var(--od-ink-soft, #5a6472);
    font-family: Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-word;
    margin-top: 3px;
}

.od-flow-msg { color: var(--od-ink-faint, #6b7480); font-size: 12px; margin-top: 3px; word-break: break-word; }

/*
 * Treapta, ca insignele din subsol: aceleasi culori SI aceleasi iconite.
 *
 * Culorile sunt cele ale portalului (Bootstrap: primary, warning, danger,
 * success, info), scrise si in `Services\Work\Badges` - de acolo le ia si
 * subsolul, si tot de acolo isi ia fila iconita. CSS-ul nu poate citi PHP,
 * deci `tests/inflight_test.php` verifica pentru fiecare treapta ca cele doua
 * spun acelasi lucru.
 *
 * Pe alb, trei dintre ele - albastrul, verdele, turcoazul - nu se citeau cu
 * scris alb (3.98, 3.13, 3.04 la unu, cand pragul e 4.5), deci poarta varianta
 * cu o treapta mai inchisa din aceeasi familie: 5.22, 5.14, 5.02. Masurat.
 */
.od-flow-state-waiting   { background: #0069d9; color: #ffffff; }
.od-flow-state-running   { background: #ffc107; color: #3d2f00; }
.od-flow-state-failed    { background: #dc3545; color: #ffffff; }
.od-flow-state-succeeded { background: #1e7e34; color: #ffffff; }
.od-flow-state-changes   { background: #117a8b; color: #ffffff; }
.od-flow-state-tickets   { background: #6c757d; color: #ffffff; }

.od-flow-state i { font-size: 10px; }

/* Iconita fiecarei file poarta culoarea ei: randul de file se citeste ca randul
   de insigne din subsol, nu ca sase butoane la fel. */
.od-flow-tab i { font-size: 11px; margin-right: 2px; }
.od-flow-tab-waiting i   { color: #007bff; }
.od-flow-tab-running i   { color: #d39e00; }
.od-flow-tab-failed i    { color: #dc3545; }
.od-flow-tab-succeeded i { color: #28a745; }
.od-flow-tab-changes i   { color: #17a2b8; }
.od-flow-tab-tickets i   { color: #6c757d; }

/*
 * Cand cuvantul nu mai e adevarat.
 *
 * O comanda care asteapta de un ceas nu e "pe drum" - masina n-a mai cerut de
 * lucru; una luata acum trei ore si fara raspuns nu mai "ruleaza". Randul o
 * spune in cuvinte, sub comanda, si isi pierde culoarea vie: altfel subsolul
 * ar arata zece comenzi "running" pe o masina oprita de zece zile.
 */
.od-flow-item.is-stale { border-left: 3px solid var(--od-warn, #c47f17); }
.od-flow-item.is-stale .od-flow-state { background: var(--od-ground, #eef0f2); color: var(--od-ink-faint, #6b7480); }
.od-flow-stale { color: var(--od-warn, #8a5b00); font-size: 12px; margin-top: 3px; }

/*
 * Anulare si retrimitere, pe rand.
 *
 * Butoane mici si stinse, la dreapta: randul e in primul rand ceva de citit -
 * ce face masina acum - iar actiunea e a doua. Doua butoane cat un rand ar fi
 * facut din lista un panou de comanda.
 */
.od-flow-acts { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

.od-flow-act {
    border: 1px solid var(--od-rule, #d5dae1);
    background: var(--od-surface, #fff);
    border-radius: 3px;
    color: var(--od-ink-soft, #5a6472);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 8px;
    cursor: pointer;
}

.od-flow-act:hover { background: var(--od-surface-alt, #f3f5f7); color: var(--od-ink, #1f2933); }
.od-flow-act[disabled] { opacity: .6; cursor: default; }

/* Numarul de pe fila si de pe comutator: mic, in urma cuvantului. */
.od-flow-n { font-weight: 600; opacity: .75; font-size: 10px; }
.od-flow-n:empty { display: none; }

/* Cine a trimis-o - numai pe vederea de firma; vezi `row()` in JS. */
.od-flow-who { color: var(--od-ink-faint, #8a93a0); font-size: 11px; }

/* Propunerile si tichetele au si ele treapta lor. */
.od-flow-state-proposed { background: #eef2fb; color: #2b4d8f; }
.od-flow-state-approved { background: #e9f6ee; color: #1f7a3f; }
.od-flow-state-ticket   { background: #e6f2f3; color: var(--od-easeedesk, #32777e); }

/* Numarul de pe fila si de pe comutator: mic, in urma cuvantului. */
.od-flow-n { font-weight: 600; opacity: .75; font-size: 10px; }
.od-flow-n:empty { display: none; }

/* Cine a trimis-o - numai pe vederea de firma; vezi `row()` in JS. */
.od-flow-who { color: var(--od-ink-faint, #8a93a0); font-size: 11px; }

/* Propunerile si tichetele au si ele treapta lor. */
.od-flow-state-proposed { background: #eef2fb; color: #2b4d8f; }
.od-flow-state-approved { background: #e9f6ee; color: #1f7a3f; }
.od-flow-state-ticket   { background: #e6f2f3; color: var(--od-easeedesk, #32777e); }

/*
 * Semnul pe canal: agent AI, comenzi, Command Prompt.
 *
 * Trei iconite, nu tipul tehnic CON/CMD. Clasa veche `.od-flow-prompt` ramane
 * ca sinonim pentru canalul de comenzi (probele o mai cauta).
 */
.od-flow-channel,
.od-flow-prompt {
    color: var(--od-ink-faint, #8a93a0);
    margin-right: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 600;
    white-space: nowrap;
}

.od-flow-channel i,
.od-flow-prompt i { margin-right: 2px; font-size: 11px; }

.od-flow-channel-ai { color: var(--od-ink-soft, #5a6472); }
.od-flow-channel-ai i { font-size: 12px; }

.od-flow-channel-prompt { color: var(--od-ink-soft, #5a6472); }
.od-flow-channel-prompt i { font-size: 12px; }

.od-flow-channel-commands { color: var(--od-ink-faint, #8a93a0); }

.od-flow-channel,
.od-flow-prompt { cursor: help; }

/* Tipurile care nu sunt linii de shell isi pastreaza numele - acolo tipul e
   chiar toata comanda, si un prompt ar minti. */
.od-flow-kind {
    color: var(--od-ink-faint, #8a93a0);
    font-weight: 600;
    font-size: 11px;
}