/*
 * COPIE. Originalul e `public/css/inventoree_map.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.
 */
/*
 * Inventory Map - perechea lui inventory_map.js.
 *
 * Fisier separat, legat din antetul comun: app.css se construieste cu
 * laravel-mix, iar pentru atat n-are rost o reconstruire a intregii foi.
 */

/* ------------------------------------------------------- bara de sus */

/*
 * Titlul si subtitlul au fost scoase din macheta: numele ecranului sta deja in
 * antet, iar legenda de sub bara spune ce spunea subtitlul, doar ca aratand.
 * Bara preia spatiul de sus care era al lor, ca sa nu inceapa lipita de marginea
 * paginii.
 */
.imap-bar {
    display: flex;
    /*
     * Pe mijloc, nu pe talpa.
     *
     * `flex-end` era gandit pentru campuri cu eticheta deasupra, care se aliniau
     * frumos pe linia de jos. Etichetele sunt acum `sr-only`, deci pe rand stau
     * lucruri de inaltimi diferite - doua controale de 30px si o bifa cat un
     * rand de text - iar lipite de talpa ele nu mai au nicio linie comuna.
     */
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 0 10px;
}

.imap-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Etichetele campurilor sunt acum `sr-only` in macheta - scoase din ochi, nu
   din pagina. Regula de mai jos ramane pentru orice eticheta care s-ar intoarce
   vreodata vizibila; `sr-only` o bate oricum, fiind pozitionata absolut. */
.imap-field label {
    margin: 0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7480;
    font-weight: 600;
}

/*
 * Latimea e pentru campurile in care se SCRIE, nu pentru bife.
 *
 * Fara exceptia asta, si patratelul bifei primea `min-width: 190px`: semnul se
 * desena in stanga unei casute late cat un camp de cautare, iar textul pornea
 * de la capatul ei - de unde cei aproape doi centimetri de gol dintre bifa si
 * ce spune ea.
 */
.imap-field select,
.imap-field input:not([type="checkbox"]) {
    min-width: 190px;
}

.imap-spacer {
    flex: 1 1 auto;
}

.imap-count {
    font-size: 12px;
    color: #6b7480;
}

/* --------------------------------------------------------- legenda */

/*
 * Deasupra panzei, nu dedesubt: fara ea, cele doua feluri de linii sunt doar
 * doua feluri de linii, iar cine citeste harta trebuie sa stie asta INAINTE, nu
 * dupa ce a tras o concluzie.
 */
.imap-legend {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 6px 0 10px;
    font-size: 11px;
    color: #6b7480;
}

.imap-swatch {
    display: inline-block;
    width: 22px;
    height: 0;
    border-top-width: 2px;
    vertical-align: middle;
    margin-right: 4px;
}

.imap-solid {
    border-top-style: solid;
    border-top-color: #6b7480;
}

.imap-dashed {
    border-top-style: dashed;
    border-top-color: #d9b38c;
}

.imap-dotted {
    border-top-style: dotted;
    border-top-color: #1FA67A;
}

/*
 * Vazut in retea, dar nu in inventar.
 *
 * Un patratel cu contur punctat, nu o linie: in legenda liniile vorbesc despre
 * LEGATURI, iar asta e despre NODURI. Aceeasi culoare cu conturul nodului de pe
 * panza, ca sa se lege dintr-o privire.
 */
.imap-unreg {
    width: 12px;
    height: 12px;
    border: 2px dotted #7d5ba6;
    border-radius: 2px;
}

/* Comutatorul din bara: sa nu para eticheta de camp, ca vecinele lui. */
/*
 * Selectorul are DOUA clase dinadins: `.imap-field label` de mai sus e mai tare
 * decat o singura clasa (o clasa plus un element bate o clasa), si pana acum
 * ii impunea bifei majuscule si ingrosare. In macheta statea un
 * `style="text-transform:none"` scris pe element ca sa scape de una dintre ele;
 * cu selectorul pus cum trebuie, scapa de toate si macheta ramane curata.
 */
.imap-field .imap-check {
    /* Bifa si textul ei, un singur lucru: pe aceeasi linie, la o distanta
       scrisa o data - nu lasata pe seama spatiului dintre doua elemente. */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    font-size: 12px;
    /* Regula generala a etichetelor din bara le face majuscule; asta e o
       propozitie, nu un nume de camp. */
    text-transform: none;
    letter-spacing: normal;
    color: #4a5262;
    margin: 0;
    cursor: pointer;
}

.imap-field .imap-check input {
    margin: 0;
}

.imap-warn {
    color: #f0ad4e;
    margin-right: 4px;
}

/* ----------------------------------------------------------- panza */

.imap-stage {
    /* Panza si panoul din dreapta, alaturi. */
    display: flex;
    border: 1px solid rgba(16, 24, 40, .1);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    /* Inaltimea ecranului fara antet, bara si legenda: o harta de retea are
       nevoie de spatiu, si o panza scunda o face de necitit. */
    height: calc(100vh - 260px);
    min-height: 420px;
}

/*
 * `min-width: 0` nu e de prisos: fara el, un element flexibil refuza sa scada
 * sub cat ii cere continutul, iar panza ar fi impins panoul din dreapta afara
 * din chenar in loc sa se stranga ea.
 */
.imap-canvas-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

#imapCanvas {
    width: 100%;
    height: 100%;
}

/* ------------------------------------------ panoul din dreapta */

.imap-side {
    flex: 0 0 300px;
    border-left: 1px solid rgba(16, 24, 40, .1);
    background: #fbfcfd;
    padding: 12px 14px;
    overflow-y: auto;
    font-size: 13px;
}

@media (max-width: 991px) {
    /* Pe ecran ingust nu mai are de unde sa ia trei sute de pixeli fara sa
       stinga harta: trece dedesubt. */
    .imap-stage {
        flex-direction: column;
    }

    .imap-side {
        flex: 0 0 auto;
        max-height: 40%;
        border-left: 0;
        border-top: 1px solid rgba(16, 24, 40, .1);
    }
}

/* Butonul de reset, sus in stanga peste panza. */
.imap-reset {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 3;
    opacity: .75;
}

.imap-reset:hover {
    opacity: 1;
}

/* ------------------------------------------- lamurirea din coltul de sus */

.imap-note {
    position: absolute;
    top: 10px;
    right: 10px;
    max-width: 240px;
    padding: 8px 10px;
    border: 1px solid rgba(16, 24, 40, .1);
    border-radius: 4px;
    background: rgba(255, 255, 255, .94);
    font-size: 11px;
    color: #6b7480;
    /* Peste panza, dar fara sa fure apasarile de pe ea. */
    pointer-events: none;
}

.imap-note h6 {
    margin: 0 0 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aa4b1;
    font-weight: 700;
}

.imap-note-office {
    margin-bottom: 5px;
}

.imap-note-office:last-child {
    margin-bottom: 0;
}

.imap-note-name {
    color: #33414e;
    font-weight: 600;
}

.imap-note-net {
    display: block;
    padding-left: 8px;
}

.imap-loading,
.imap-empty {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #9aa4b1;
    font-size: 13px;
}

.imap-empty i {
    font-size: 28px;
    display: block;
    margin-bottom: 8px;
    opacity: .5;
}

.imap-empty-note {
    font-size: 12px;
}

/* ------------------------------------------------------- ce s-a apasat */

/* --------------------------------------- ce se stie despre un dispozitiv */

/*
 * Perechi nume-valoare pe doua coloane. Numele ingust si sters, valoarea lata
 * si citibila: cine se uita cauta valoarea, nu eticheta.
 */
.imap-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    margin: 6px 0 0;
    font-size: 12px;
}

.imap-facts dt {
    color: #9aa4b1;
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
}

.imap-facts dd {
    margin: 0;
    color: #33414e;
    word-break: break-word;
}

/* ------------------------------------ ce e legat intr-un comutator */

.imap-conn {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(16, 24, 40, .1);
}

.imap-conn h6 {
    margin: 0 0 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9aa4b1;
    font-weight: 700;
}

.imap-conn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 0;
    font-size: 12px;
    color: #33414e;
}

.imap-conn-off {
    border: 0;
    background: none;
    color: #9aa4b1;
    font-size: 15px;
    line-height: 1;
    padding: 0 2px;
}

.imap-conn-off:hover {
    color: #d9534f;
}

.imap-conn-pick {
    margin-top: 8px;
}

/* ------------------------------------------------------ editare rapida */

.imap-quick {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    width: 230px;
    padding: 10px;
    border: 1px solid rgba(16, 24, 40, .14);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(16, 24, 40, .16);
}

/*
 * Formularul din panoul din dreapta: nu mai e o fereastra plutitoare pe panza.
 * Fara asta, `position: absolute` il scoate din fluxul panoului.
 */
.imap-side .imap-quick {
    position: static;
    top: auto;
    right: auto;
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

.imap-quick-head {
    font-weight: 700;
    color: #33414e;
    font-size: 13px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.imap-quick label {
    display: block;
    margin: 8px 0 2px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7480;
    font-weight: 600;
}

.imap-quick .alert {
    padding: 6px 8px;
    font-size: 12px;
    margin-bottom: 6px;
}

/* Cu campurile de adaugare fereastra creste; sa nu iasa din panza. */
.imap-quick {
    max-height: 90%;
    overflow-y: auto;
}

.imap-quick-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.imap-quick .checkbox {
    margin: 10px 0 0;
}

.imap-quick .checkbox label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 400;
    color: #33414e;
}

.imap-quick-foot {
    margin-top: 10px;
    text-align: right;
}

/* Randul hotararii rare: linie deasupra, ca sa se vada ca nu tine de formular. */
.imap-quick-drop-row {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #e6e9ed;
    text-align: left;
}

.imap-quick-drop {
    padding-left: 0;
    color: #8a94a0;
    text-decoration: none;
}

.imap-quick-drop:hover,
.imap-quick-drop:focus {
    color: #d9534f;
    text-decoration: none;
}

.imap-quick-foot .btn + .btn {
    margin-left: 6px;
}

/* Raspunsul la "si daca pica asta?" - rosu, fiindca despre asta e vorba. */
.imap-impact-note {
    margin-top: 6px;
    color: #d9534f;
    font-weight: 600;
}

.imap-muted {
    color: #9aa4b1;
    font-size: 12px;
}

.imap-open {
    margin-top: 8px;
    display: inline-block;
}

.imap-side .imap-open {
    display: block;
    width: 100%;
    text-align: center;
}

/* Urma cutiilor date la o parte: se citeste, nu striga. */
.imap-hidden-note {
    color: #8a94a0;
    font-size: 12px;
    padding: 0 6px;
    text-decoration: none;
}

.imap-hidden-note:hover,
.imap-hidden-note:focus {
    color: #33414e;
    text-decoration: underline;
}

/*
 * MANETA TIMPULUI
 *
 * Un rand intre bara si panza. Cat timp e trasa in urma, se coloreaza si
 * primeste un chenar - impreuna cu panza de sub ea - ca sa nu poata fi
 * confundata o harta veche cu reteaua de acum.
 */
.imap-time {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-bottom: 1px solid #e6e9ed;
    background: #fbfbfa;
}

/* Ce face maneta, inaintea ei: doua randuri scurte, citite ca o propozitie. */
.imap-time-lead {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 130px;
    /* Cat sa incapa si ziua, si lamurirea de langa ea, fara sa fure din
       maneta: ea are nevoie de latime ca sa se poata alege ziua cu degetul. */
    max-width: 330px;
}

.imap-time-what {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #a3a9b1;
}

/* Ziua si lamurirea de langa ea, pe acelasi rand. */
.imap-time-line {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.imap-time-day {
    font-size: 12px;
    font-weight: 600;
    color: #33414e;
    white-space: nowrap;
}

/* Maneta si zilele de sub ea stau una peste alta, in aceeasi coloana. */
.imap-time-track {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.imap-time-slider {
    width: 100%;
    margin: 0;
}

/* Reperele: primul lipit de capatul din stanga, ultimul de cel din dreapta. */
.imap-time-scale {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: #b3b9c1;
    /* Cat tine sania manetei: fara asta, primul si ultimul reper cad in afara
       capetelor pe care le arata. */
    padding: 0 2px;
}

/* Trasa in urma: se vede din capatul celalalt al camerei. */
.imap-time-past {
    background: #fdf6e8;
    border-bottom-color: #e3c391;
}

.imap-time-past .imap-time-day {
    color: #8a6d3b;
}

.imap-time-past .imap-time-scale {
    color: #c3ab84;
}

/* Panza capata acelasi semn: harta insasi spune ca nu e de acum. */
.imap-canvas-wrap.imap-past {
    box-shadow: inset 0 0 0 2px #e3c391;
}

/*
 * Maneta, desenata de noi.
 *
 * Lasata pe seama browserului, arata altfel in fiecare si isi ia culorile din
 * tema sistemului - pe un ecran cu tema intunecata, sania iesea neagra pe bara
 * galbena. Desenata aici, e aceeasi peste tot: o sina subtire si un bumb care
 * arata ziua.
 */
.imap-time-slider {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    height: 16px;
    cursor: pointer;
}

.imap-time-slider::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: #dfe3e8;
}

.imap-time-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #3c8dbc;
    box-shadow: 0 0 0 1px #c7ced6;
}

.imap-time-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: #dfe3e8;
}

.imap-time-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #3c8dbc;
    box-shadow: 0 0 0 1px #c7ced6;
}

/* Trasa in urma, bumbul capata culoarea barii. */
.imap-time-past .imap-time-slider::-webkit-slider-thumb {
    background: #c0894a;
    box-shadow: 0 0 0 1px #e3c391;
}

.imap-time-past .imap-time-slider::-moz-range-thumb {
    background: #c0894a;
    box-shadow: 0 0 0 1px #e3c391;
}

.imap-time-past .imap-time-slider::-webkit-slider-runnable-track {
    background: #f0e2c8;
}

.imap-time-past .imap-time-slider::-moz-range-track {
    background: #f0e2c8;
}

/* Ce nu stim din trecut, scris marunt langa ziua desenata. */
.imap-time-note {
    font-size: 11px;
    color: #a3a9b1;
    font-style: italic;
}

.imap-time-past .imap-time-note {
    color: #b09263;
}