/*
 * COPIE. Originalul e `public/css/header_nav_reveal.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 meniu a modulului, ascunsa pana la nevoie.
 *
 * Rostul: pe ecranele de lucru - lista de tichete in primul rand - bara aia
 * mananca vreo cincizeci de pixeli din inaltime tot timpul, desi se apasa pe ea
 * de cateva ori pe zi. Ascunsa, randurile castiga un rand si ceva.
 *
 * Ce se schimba, si nimic altceva: bara iese din flux, deci continutul urca; se
 * arata cand mouse-ul sta pe numele sectiunii curente din antet sau pe bara
 * insasi, si se retrage cand pleaca.
 *
 * TOT ce e aici atarna de clasa `nav-collapsible`, pusa pe `body` din
 * header_nav_reveal.js. Fara JS - sau daca ceva se strica in el - fisierul asta
 * nu face nimic si bara ramane exact cum era. Un meniu care dispare fiindca a
 * cazut un script nu se poate repara de catre cel din fata ecranului.
 *
 * Fisier separat, legat din antet: app.css se construieste cu laravel-mix, iar
 * pentru atat nu merita o reconstruire a intregii foi.
 */

/* ------------------------------------------------------- bara ascunsa */

body.nav-collapsible #page-header #page-header-nav {
    /* `#page-header` e deja `position: relative`, deci asta se agata de el si
       coboara peste continut - continutul nu mai sare in jos cand se deschide,
       cum ar face daca bara ar ramane in flux. */
    position: absolute;
    left: 0;
    right: 0;
    z-index: 900;

    transform: translateY(-100%);
    opacity: 0;

    /* Cat e stransa nu poate fi nici apasata, nici tinuta deschisa din
       greseala de un mouse care trece pe deasupra. */
    pointer-events: none;

    transition: transform 220ms ease, opacity 160ms ease;
}

body.nav-collapsible.nav-visible #page-header #page-header-nav {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .18);
}

/* Cine a cerut mai putina miscare o primeste: apare si dispare, fara alunecare. */
@media (prefers-reduced-motion: reduce) {
    body.nav-collapsible #page-header #page-header-nav {
        transition: opacity 1ms linear;
        transform: none;
    }
}

/* ----------------------------------------------- optiunea activa, in bara */

/*
 * Intrarea pe care esti: un punct mai mare decat vecinele ei si ingrosata.
 *
 * Bara marcheaza deja optiunea activa cu o linie alba dedesubt, dar aia se vede
 * abia daca o cauti. Ingrosat si putin mai mare, se vede dintr-o privire pe ce
 * ecran esti - la fel ca numele din antet, care spune acelasi lucru.
 *
 * Marcarea o pune general.js pe `li.selected`; aici nu se decide nimic, doar se
 * deseneaza ce a hotarat el.
 */
#page-header #page-header-nav li.selected > a {
    font-size: 14px;
    font-weight: 700;
}

/* -------------------------------------------- numele sectiunii curente */

/*
 * Randul antetului e inalt de 50px, iar vecinii se centreaza fiecare cum apuca:
 * `#module-logo` cu `line-height: 45px`, `#show-modules` cu `line-height: 36px`
 * plus padding. Al nostru nu avea nimic, deci statea agatat de marginea de sus.
 *
 * Aici se face cinstit: `.page-logo` e flex, deci elementul se intinde pe toata
 * inaltimea randului, iar continutul lui se centreaza in el. Asa ramane pe linie
 * si daca se schimba inaltimea antetului.
 */
#current-section {
    display: flex;
    align-items: center;
    margin-left: 20px;
    cursor: default;
}

#current-section .current-section-name {
    display: inline-block;
    padding: 4px 10px;
    /* Un punct peste restul antetului, care mosteneste 13px din `#page-header`,
       si ingrosat: e singurul loc care spune pe ce ecran esti. */
    font-size: 14px;
    font-weight: 700;
    border-radius: 3px;
    color: #ffffff;
    background-color: rgba(255, 255, 255, .12);
    white-space: nowrap;
}

body.nav-collapsible #current-section .current-section-name {
    /* Cand chiar deschide ceva, arata ca se poate apasa. */
    cursor: pointer;
}

body.nav-collapsible #current-section .current-section-name::after {
    content: '';
    display: inline-block;
    margin-left: 7px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid rgba(255, 255, 255, .75);
    transition: transform 220ms ease;
}

body.nav-collapsible.nav-visible #current-section .current-section-name::after {
    transform: rotate(180deg);
}

#current-section .current-section-name:hover,
body.nav-collapsible.nav-visible #current-section .current-section-name {
    background-color: rgba(255, 255, 255, .2);
}

/* ------------------------------------------------- bara prinsa deschisa */

/*
 * O apasare pe numele sectiunii prinde bara deschisa; a doua o elibereaza.
 * Alegerea se tine minte - vezi header_nav_reveal.js.
 *
 * Prinsa, bara nu mai pluteste peste continut, ci se aseaza inapoi in pagina,
 * exact cum statea inainte de toata treaba asta. Altfel ar acoperi permanent
 * primul rand din ecran: ceva ce sta mereu trebuie sa-si faca loc, nu sa stea
 * peste altceva. De-aia se anuleaza si umbra - o umbra spune "plutesc deasupra",
 * si aici nu mai e adevarat.
 */
body.nav-collapsible.nav-pinned #page-header #page-header-nav {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;

    /* Nici alunecare la incarcare: bara e deja acolo cand se deschide pagina,
       si n-are de unde sa vina. */
    transition: none;
}

/* Prinsa, sageata sta intoarsa - nu ca sa arate ca meniul e deschis, ci ca sa
   arate ca ramane deschis. E singurul semn ca apasarea a insemnat ceva. */
body.nav-collapsible.nav-pinned #current-section .current-section-name::after {
    border-top-color: #ffffff;
}

/* Si focalizarea se vede: butonul se poate apasa si cu tastatura. */
#current-section .current-section-name:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .85);
    outline-offset: 2px;
}

/* Pe ecran mic bara e oricum alt fel de meniu; nu se ascunde. */
@media (max-width: 767px) {
    body.nav-collapsible #page-header #page-header-nav {
        position: static;
        transform: none;
        opacity: 1;
        pointer-events: auto;
    }

    #current-section {
        display: none;
    }
}