/* Wszystko, co lezy nad trescia: okna, menu rozwijane, podpowiedzi,
   komunikaty, blokada malego okna.

   Widocznoscia steruja tu klasy, a nie atrybut `hidden` - bo tak robia to
   skrypty, ktore te elementy otwieraja (`classList.toggle('hidden-window')`,
   `.toggle('show')`, `.toggle('tab-hidden')`). Tam, gdzie skrypt ustawia
   `style.display` wprost (pasek postepu, podpowiedz wykresu), zostaje
   `hidden` w znaczniku - atrybut przegrywa ze stylem w linii, wiec jedno
   nie wchodzi drugiemu w droge.
*/

@layer components {
    /* ==================================================================
       OKNO MODALNE
    ================================================================== */
    .dialog {
        position: fixed;
        inset: 0;
        z-index: var(--z-modal);
        display: grid;
        place-items: center;
        padding: var(--space-md);
        background: #000000a6;
        backdrop-filter: blur(3px);
    }

    .dialog.hidden-window {
        display: none;
    }

    .dialog__panel {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        width: min(38rem, 100%);
        max-height: min(85dvh, 48rem);
        padding: var(--card-pad);
        overflow-y: auto;
        /* Wlasna powierzchnia, nie `--surface-raised`: pod oknem lezy cala
           strona, a nie plotno, wiec panel musi ja zakryc i odciac sie od
           zaslony. Menu otwarte wewnatrz okna bierze jasniejszy
           `--surface-overlay`, zeby mialo czym odciac sie od panelu. */
        background: var(--surface-window);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-lg);
    }

    .dialog__panel--wide { width: min(60rem, 100%); }
    .dialog__panel--narrow { width: min(26rem, 100%); }

    .dialog__head {
        display: flex;
        align-items: center;
        gap: var(--space-sm);
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid var(--hairline);
    }

    /* Tytul okna jest tu bezposrednim dzieckiem panelu (a nie osobnym
       naglowkiem), wiec kreske i odstep bierze sam. */
    .dialog__title {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-xs);
        margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 0;
        padding: var(--space-sm) var(--card-pad);
        font-size: var(--text-lg);
        font-weight: var(--weight-medium);
        border-bottom: 1px solid var(--hairline);
    }

    .dialog__title > :last-child:not(:only-child) {
        margin-inline-start: auto;
    }

    .dialog__close {
        margin-inline-start: auto;
    }

    .dialog__body {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
    }

    .dialog__foot {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-xs);
        margin: auto calc(var(--card-pad) * -1) calc(var(--card-pad) * -1);
        padding: var(--space-sm) var(--card-pad);
        border-top: 1px solid var(--hairline);
    }

    /* Ostatni przycisk stopki jest akcja potwierdzajaca - to on ma byc
       widoczny jako glowny, bez dopisywania klasy w kazdym z 19 okien. */
    .dialog__foot > .btn:last-child {
        color: var(--text-on-accent);
        background: var(--accent);
        border-color: var(--accent);
    }

    .dialog__foot > .btn:last-child:hover {
        background: var(--accent-strong);
        border-color: var(--accent-strong);
    }

    /* --- okno na telefonie ----------------------------------------------
       Okno wysrodkowane w ekranie ma sens, dopoki zostaje wokol niego
       plotno. Na szerokosci 375 px nie zostaje: `width: min(38rem, 100%)`
       i tak daje pelna szerokosc, a `place-items: center` z wypelnieniem
       dokolo zostawia paski po bokach i okno wyglada, jakby sie nie zmiescilo.

       Okno idzie wiec do dolnej krawedzi i wychodzi z niej - tam, gdzie
       siega kciuk, i skad na telefonie wysuwaja sie wszystkie panele.
       Zaslona zostaje nad nim widoczna, wiec nadal wiadomo, ze strona pod
       spodem czeka.

       Tytul i pasek przyciskow przestaja przy tym odjezdzac z trescia:
       w oknie "Zapisz serwis" czy "Przypisz frezarki" lista bywa dluga na
       kilka ekranow, a "Zapisz" lezal na jej koncu. Obie belki sa `sticky`
       tylko jako bezposrednie dzieci panelu - to on jest obszarem
       przewijania, a niektore okna trzymaja stopke jeszcze wewnatrz
       formularza. */
    @media (max-width: 48rem) {
        .dialog {
            padding: 0;
            place-items: end stretch;
        }

        .dialog__panel,
        .dialog__panel--wide,
        .dialog__panel--narrow {
            width: 100%;
            max-height: 92dvh;
            border-bottom: 0;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }

        .dialog__panel > .dialog__title {
            position: sticky;
            top: 0;
            z-index: var(--z-raised);
            background: var(--surface-window);
        }

        .dialog__panel > .dialog__foot {
            position: sticky;
            bottom: 0;
            z-index: var(--z-raised);
            background: var(--surface-window);
        }
    }

    /* Pasek filtrow otwierany przyciskiem jest tym samym mechanizmem, ale
       nie zaslania strony - wysuwa sie nad lista. */
    .filter-panel.hidden-window {
        display: none;
    }

    .filter-btn-icon.hidden-window {
        display: none;
    }

    /* ==================================================================
       MENU ROZWIJANE
       Akcje w komorce tabeli. Skrypt przelacza `show` na tresci menu.
    ================================================================== */
    .dropdown {
        position: relative;
        display: inline-block;
    }

    .dropdown-content {
        position: absolute;
        top: calc(100% + var(--space-2xs));
        right: 0;
        z-index: var(--z-dropdown);
        display: none;
        min-width: 11rem;
        padding: var(--space-2xs);
        text-align: left;
        background: var(--surface-overlay);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
    }

    .dropdown-content.show {
        display: flex;
        flex-direction: column;
        gap: var(--space-3xs);
    }

    /* Menu otwiera sie w lewo od prawej krawedzi komorki, wiec przy tabeli
       przewijanej w bok potrafilo siegnac poza ekran. Granica jest liczona
       z okna, a nie z komorki, bo to okno jest tym, poza co menu nie moze
       wyjsc. */
    @media (max-width: 48rem) {
        .dropdown-content {
            max-width: calc(100vw - 2 * var(--space-md));
        }
    }

    /* Kazda pozycja menu - odsylacz, przycisk albo przycisk w formularzu
       usuwania - ma wygladac tak samo. */
    .dropdown-content :where(a, button) {
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        width: 100%;
        padding: var(--space-2xs) var(--space-xs);
        color: var(--text-muted);
        font-size: var(--text-sm);
        text-align: left;
        text-decoration: none;
        background: none;
        border: 0;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .dropdown-content :where(a, button):hover {
        color: var(--text);
        background: var(--surface-hover);
    }

    /* Pozycja menu jest sama w sobie tylko napisem z odstepem - pod kursorem
       wystarczy, pod palcem nie. Rosnie sam obszar dotkniecia; wyglad, czyli
       tlo pod napisem, zostaje ten sam. */
    @media (pointer: coarse) {
        .dropdown-content :where(a, button) {
            min-height: var(--control-height-sm);
        }
    }

    .dropdown-content form {
        margin: 0;
    }

    /* ==================================================================
       PODPOWIEDZI
       Jedna oprawa dla podpowiedzi Bootstrapa (`.tooltip`, trzy miejsca)
       i dla wlasnej podpowiedzi wykresow SPC (`#logTooltip`). Arkusz
       Bootstrapa juz nie wchodzi, wiec ten wyglad musi byc tutaj.
    ================================================================== */
    .tooltip,
    #logTooltip {
        position: fixed;
        z-index: var(--z-toast);
        max-width: 22rem;
        padding: var(--space-2xs) var(--space-xs);
        color: var(--text);
        font-size: var(--text-xs);
        line-height: var(--leading-normal);
        pointer-events: none;
        background: var(--surface-overlay);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-md);
    }

    .tooltip {
        opacity: 0;
        transition: opacity var(--dur-fast) var(--ease);
    }

    .tooltip.show {
        opacity: 1;
    }

    .tooltip .tooltip-arrow {
        display: none;
    }

    /* ==================================================================
       WLASNY SELECT
       `customSelects.js` podmienia kazdy <select> na przycisk z lista
       i polem wyszukiwania - dzieki temu w liscie stu firm da sie
       filtrowac, czego natywny <select> nie potrafi.

       Oryginalny <select> zostaje w formularzu, tylko schowany: to on
       niesie wartosc do serwera. Chowamy go tak jak `.sr-only`, a nie
       `display: none` - dzieki temu walidacja przegladarki nadal potrafi
       ustawic na nim fokus.

       Otwarta liste skrypt przenosi do <body> i nadaje jej `.is-portal`
       razem z pozycja w `style` - stad `position: fixed` i brak wlasnego
       `top`/`left`, ktore by z tamtymi walczyly.
    ================================================================== */
    .custom-select {
        position: relative;
        display: inline-block;
        width: 100%;
        min-width: 0;
        vertical-align: middle;
    }

    .custom-select-native {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
        opacity: 0;
        pointer-events: none;
    }

    button.custom-select-button {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-xs);
        width: 100%;
        min-height: var(--control-height);
        padding: 0 calc(var(--control-pad-x) * 2) 0 var(--control-pad-x);
        color: var(--text);
        font: inherit;
        font-size: var(--text-sm);
        line-height: 1.2;
        text-align: left;
        background: var(--surface-sunken);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: border-color var(--dur-fast) var(--ease);
    }

    /* Strzalka rysowana ksztaltem, a nie plikiem PNG - skaluje sie
       z tekstem i bierze kolor z `currentColor`. */
    button.custom-select-button::after {
        content: "";
        position: absolute;
        top: 50%;
        right: var(--control-pad-x);
        width: 0;
        height: 0;
        border-inline: 4px solid transparent;
        border-top: 5px solid currentColor;
        opacity: 0.7;
        transform: translateY(-2px);
        pointer-events: none;
    }

    button.custom-select-button:hover,
    .custom-select.is-open button.custom-select-button {
        border-color: var(--border-strong);
    }

    .custom-select.is-open button.custom-select-button {
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-ring);
    }

    .custom-select.is-disabled button.custom-select-button {
        color: var(--text-muted);
        cursor: not-allowed;
    }

    .custom-select-menu {
        position: absolute;
        top: calc(100% + var(--space-2xs));
        left: 0;
        z-index: var(--z-dropdown);
        display: none;
        padding: var(--space-2xs);
        overflow-y: auto;
        overflow-x: hidden;
        background: var(--surface-overlay);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
    }

    .custom-select-menu.is-portal {
        position: fixed;
        z-index: var(--z-modal);
        display: block;
    }

    .custom-select-search {
        display: block;
        width: 100%;
        min-width: 0;
        min-height: var(--control-height-sm);
        margin-bottom: var(--space-2xs);
        padding: 0 var(--space-xs);
        color: var(--text);
        font: inherit;
        font-size: var(--text-sm);
        background: var(--surface-sunken);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
    }

    /* Pole wyszukiwania w liscie jest zwyklym <input>, wiec obowiazuje je
       ten sam prog, co pola formularza w `03-base`: ponizej 16 px Safari na
       iPhonie powieksza cala strone przy wejsciu w nie fokusem - a lista
       stoi wtedy juz otwarta i przesuwa sie spod palca. */
    @media (pointer: coarse) {
        .custom-select-search {
            font-size: max(1rem, var(--text-sm));
        }
    }

    .custom-select-option {
        display: block;
        width: 100%;
        min-height: var(--control-height-sm);
        padding: var(--space-2xs) var(--space-xs);
        color: var(--text-muted);
        font: inherit;
        font-size: var(--text-sm);
        line-height: 1.3;
        text-align: left;
        white-space: nowrap;
        background: transparent;
        border: 0;
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .custom-select-option:hover {
        color: var(--text);
        background: var(--surface-hover);
    }

    .custom-select-option.is-selected {
        color: var(--accent-soft);
        background: var(--surface-active);
    }

    .custom-select-option:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

    /* ==================================================================
       PODPOWIEDZI POL (jQuery UI autocomplete)
       Arkusz motywu jQuery UI juz nie wchodzi - lista podpowiedzi firm,
       skanerow i oprogramowania dostaje wyglad stad.
    ================================================================== */
    .ui-autocomplete {
        position: absolute;
        z-index: var(--z-dropdown) !important;
        max-height: 16rem;
        margin: var(--space-2xs) 0 0;
        padding: var(--space-2xs);
        overflow-y: auto;
        list-style: none;
        background: var(--surface-overlay);
        border: 1px solid var(--border-strong);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
    }

    .ui-menu-item {
        list-style: none;
    }

    .ui-menu-item-wrapper {
        display: block;
        padding: var(--space-2xs) var(--space-xs);
        color: var(--text-muted);
        font-size: var(--text-sm);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

    .ui-menu-item-wrapper.ui-state-active,
    .ui-menu-item-wrapper:hover {
        color: var(--text);
        background: var(--surface-active);
    }

    .ui-helper-hidden-accessible {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    /* ==================================================================
       KOMUNIKATY
       Django wystawia poziom w `data-level`; kolor bierze sie stad.
       Wczesniej niosla go klasa `alert-danger` z ustawien - czyli nazwa
       klasy Bootstrapa wpisana w `settings.py`.
    ================================================================== */
    .alert {
        position: fixed;
        bottom: var(--space-lg);
        /* Srodek tresci, nie srodek okna - `--nav-offset` ustawia `.app`
           i wynosi zero wszedzie tam, gdzie menu bocznego nie ma. */
        left: calc(50% + var(--nav-offset, 0px) / 2);
        z-index: var(--z-toast);
        display: flex;
        align-items: center;
        gap: var(--space-xs);
        max-width: min(32rem, calc(100vw - 2 * var(--space-md)));
        padding: var(--space-xs) var(--space-md);
        color: var(--text);
        font-size: var(--text-sm);
        background: var(--surface-overlay);
        border: 1px solid var(--border-strong);
        border-inline-start: 3px solid var(--alert-color, var(--border-strong));
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        transform: translateX(-50%);
    }

    /* Na telefonie komunikat idzie pod pasek gorny, a nie nad dolna krawedz.
       Trzy rzeczy zbiegaja sie tam na dole i przeszkadzaja sobie nawzajem:
       slupek akcji (nizej w tym pliku), pasek przegladarki, ktory na iOS
       wjezdza i schodzi przy kazdym przewinieciu, oraz klawiatura ekranowa -
       a komunikat pojawia sie najczesciej wlasnie po wyslaniu formularza,
       czyli wtedy, gdy klawiatura jeszcze stoi.

       Srodkowanie wzgledem tresci przestaje tu byc potrzebne: menu jest
       szuflada, wiec `--nav-offset` i tak wynosi zero, a komunikat zajmuje
       cala szerokosc miedzy krawedziami. */
    @media (max-width: 48rem) {
        .alert {
            top: calc(var(--app-bar-height) + var(--space-xs));
            right: var(--space-sm);
            bottom: auto;
            left: var(--space-sm);
            max-width: none;
            transform: none;
        }
    }

    .alert[data-level="success"] { --alert-color: var(--ok); }
    .alert[data-level="warning"] { --alert-color: var(--warn); }
    .alert[data-level="error"]   { --alert-color: var(--danger); }
    .alert[data-level="info"]    { --alert-color: var(--info); }
    .alert[data-level="debug"]   { --alert-color: var(--text-faint); }

    /* ==================================================================
       POWIADOMIENIE
       Wiersz listy w oknie powiadomien: obrazek modelu, tresc, akcje.
    ================================================================== */
    .notification {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-sm);
        padding: var(--space-sm);
        background: var(--surface-raised);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
    }

    /* Zdjecie modelu frezarki - bez wypelnienia pod spodem, tak samo jak
       w naglowku frezarki i na kafelku w parku maszynowym. */
    .notification__image {
        flex: none;
        width: 3rem;
        height: 3rem;
        object-fit: contain;
        border-radius: var(--radius-sm);
    }

    .notification__body {
        flex: 1;
        min-width: 12rem;
    }

    /* W arkuszu dolnym na telefonie `min-width: 12rem` razem ze zdjeciem
       i przyciskami rozpycha wiersz powiadomienia poza szerokosc okna. */
    @media (max-width: 48rem) {
        .notification {
            flex-wrap: wrap;
        }

        .notification__body {
            min-width: 0;
            flex: 1 1 100%;
        }

        .notification__actions {
            width: 100%;
            margin-inline-start: 0;
        }
    }

    .notification__topic {
        font-weight: var(--weight-medium);
    }

    .notification-desc {
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    .notification__actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        margin-inline-start: auto;
    }

    .notification__actions form {
        margin: 0;
    }

    /* ==================================================================
       ZAKLADKI (statystyki SPC)
    ================================================================== */
    .tab-hidden {
        display: none !important;
    }

    /* ==================================================================
       BLOKADA ZBYT MALEGO OKNA
       Nakladka stoi na czerni i zaslania cala strone. Pokazuje ja skrypt,
       nadajac klase `active`.
    ================================================================== */
    #screen-size-overlay {
        position: fixed;
        inset: 0;
        z-index: var(--z-blocker);
        display: none;
        place-items: center;
        padding: var(--space-xl);
        text-align: center;
        background: var(--canvas);
    }

    #screen-size-overlay.active {
        display: grid;
    }
}