/* Domyslny wyglad samych znacznikow.

   Cel: strona bez ani jednej klasy ma byc juz czytelna. Kazdy <table> jest
   tabela danych, kazdy <input> polem tej samej wysokosci, kazdy <h2>
   naglowkiem strony. Komponenty w nastepnej warstwie tylko to precyzuja.
*/

@layer base {
    html {
        font-size: 100%;
        /* Kotwica dla `scroll-margin-top` - tresc przewinieta do celu nie
           chowa sie pod przyklejonym paskiem gornym. */
        scroll-padding-top: calc(var(--app-bar-height) + var(--space-md));
    }

    body {
        margin: 0;
        min-height: 100dvh;
        font-family: var(--font-sans);
        font-size: var(--text-md);
        line-height: var(--leading-normal);
        color: var(--text);
        background-color: var(--canvas);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        touch-action: manipulation;
    }

    /* --- naglowki -----------------------------------------------------
       Skala jest plaska celowo. To narzedzie pracy, a nie artykul: rzadko
       schodzi ponizej trzeciego poziomu, a roznica ma wynikac z wagi
       i odstepu, nie z wielkosci. */
    h1, h2, h3, h4, h5, h6 {
        font-weight: var(--weight-medium);
        line-height: var(--leading-tight);
        text-wrap: balance;
    }

    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
    h4 { font-size: var(--text-lg); }
    h5, h6 { font-size: var(--text-md); }

    p {
        text-wrap: pretty;
    }

    strong, b {
        font-weight: var(--weight-medium);
        color: var(--text);
    }

    small {
        font-size: var(--text-sm);
        color: var(--text-muted);
    }

    /* Numery seryjne, PLC, wspolrzedne - wszedzie tam, gdzie liczy sie
       porownywanie znak po znaku. */
    code, kbd, samp, pre {
        font-family: var(--font-mono);
        font-size: 0.95em;
    }

    hr {
        height: 1px;
        margin: var(--space-md) 0;
        border: 0;
        background: var(--hairline);
    }

    /* --- odsylacze ----------------------------------------------------- */
    a {
        color: var(--accent-soft);
        text-decoration-color: var(--accent-line);
        text-underline-offset: 0.2em;
        transition: color var(--dur-fast) var(--ease);
    }

    /* Po najechaniu odsylacz jasnieje do bieli, a nie ciemnieje do czerwieni
       firmowej: `--accent` na tle karty ma 2.9:1, wiec stan wyrozniony
       bylby gorzej czytelny od spoczynkowego. */
    a:hover {
        color: var(--text);
        text-decoration-color: currentColor;
    }

    /* --- widocznosc fokusu ---------------------------------------------
       Jedna regula na cala aplikacje. Stary front gasil obrys `outline: none`
       w kilku miejscach i nie dawal nic w zamian - klawiatura gubila sie
       wtedy w formularzu kalibracji. `:focus-visible` pokazuje pierscien
       tylko wtedy, gdy fokus przyszedl z klawiatury. */
    :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
        border-radius: var(--radius-xs);
    }

    :focus:not(:focus-visible) {
        outline: none;
    }

    ::selection {
        background: var(--accent-quiet);
        color: var(--text);
    }

    /* --- tabele --------------------------------------------------------
       Tabela jest tu podstawowa forma tresci: listy firm, frezarek,
       uzytkownikow, zgloszen, plikow. Dlatego domyslny <table> juz wyglada
       jak tabela danych i wiekszosc list nie potrzebuje zadnej klasy. */
    table {
        width: 100%;
        font-size: var(--text-sm);
    }

    caption {
        margin-bottom: var(--space-xs);
        color: var(--text-muted);
        font-size: var(--text-sm);
        text-align: left;
    }

    th {
        font-weight: var(--weight-medium);
        text-align: left;
    }

    /* Podpis kolumny nie ma `white-space: nowrap` i to jest decyzja, a nie
       przeoczenie. Przy `table-layout: auto` kolumna dostaje swoja pelna
       szerokosc zawsze, gdy tabela ma na to miejsce - podpis zawija sie wiec
       dopiero wtedy, gdy naprawde nie ma dokad pojsc. Z `nowrap` bylo
       odwrotnie: "Ostrzezenie (mm)" zajmowalo 134 px niezaleznie od wszystkiego
       i tolerancje osi na stronie frezarki nie miescily sie w swojej karcie
       (374 px tresci w 348 px karty), choc same wartosci maja po piec znakow. */
    thead th {
        position: sticky;
        top: 0;
        z-index: var(--z-raised);
        padding: var(--space-xs) var(--space-sm);
        color: var(--text-faint);
        font-size: var(--label-size);
        letter-spacing: var(--label-spacing);
        text-transform: var(--label-transform);
        background: var(--surface-sunken);
        border-bottom: 1px solid var(--border);
    }

    tbody td,
    tbody th {
        padding: var(--space-xs) var(--space-sm);
        border-bottom: 1px solid var(--hairline);
        vertical-align: middle;
    }

    tbody tr:last-child :where(td, th) {
        border-bottom: 0;
    }

    tbody tr {
        transition: background var(--dur-fast) var(--ease);
    }

    /* Podswietlenie wiersza jest podpowiedzia kursora - mowi, ktory wiersz
       jest pod nim. Palec zadnego wiersza nie "mija": dotkniety zostaje
       podswietlony az do nastepnego dotkniecia gdzie indziej i czyta sie
       wtedy jak zaznaczenie, ktorego nikt nie robil. */
    @media (hover: hover) {
        tbody tr:hover {
            background: var(--surface-hover);
        }
    }

    /* Kolumny liczbowe czyta sie kolumnami, nie wierszami. */
    td:has(> .num),
    .num {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    /* --- pola formularza ------------------------------------------------
       Wszystko, co przyjmuje dane, ma ta sama wysokosc, obrys i promien.
       Bez tego rzad "pole + select + przycisk" nigdy nie stoi w linii -
       a takich rzedow jest w pasku filtrow kilkanascie. */
    input:not([type="checkbox"], [type="radio"], [type="file"], [type="range"], [type="submit"], [type="button"]),
    select,
    textarea {
        width: 100%;
        min-height: var(--control-height);
        padding: 0 var(--control-pad-x);
        color: var(--text);
        background: var(--surface-sunken);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        transition: border-color var(--dur-fast) var(--ease),
                    box-shadow var(--dur-fast) var(--ease);
    }

    textarea {
        min-height: calc(var(--control-height) * 2.5);
        padding: var(--space-xs) var(--control-pad-x);
        line-height: var(--leading-normal);
    }

    input:hover:not(:disabled),
    select:hover:not(:disabled),
    textarea:hover:not(:disabled) {
        border-color: var(--border-strong);
    }

    input:focus,
    select:focus,
    textarea:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-ring);
    }

    /* Safari na iPhonie powieksza cala strone w chwili, gdy fokus wchodzi
       w pole pisace mniejsze niz 16 px - i po wyjsciu z pola juz jej nie
       zmniejsza. Uzytkownik zostaje z przewinieta w bok strona i musi
       zwezac ja palcami przy kazdym polu formularza.

       Skala pisma schodzi tu ponizej 16 px w kilku miejscach naraz
       (`--text-sm` w komorce tabeli, wlasny select, wyszukiwarka listy),
       wiec zamiast poprawiac je po kolei, `max()` podnosi kazde pole do
       progu i zostawia wieksze takim, jakie jest.

       Warunek jest o wskazniku, nie o szerokosci okna: powiekszanie robi
       to samo na tablecie trzymanym w poziomie, gdzie zadna reguly
       szerokosci by nie zlapala. */
    @media (pointer: coarse) {
        input:not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"]),
        select,
        textarea {
            font-size: max(1rem, var(--text-md));
        }
    }

    input::placeholder,
    textarea::placeholder {
        color: var(--text-faint);
    }

    input:disabled,
    select:disabled,
    textarea:disabled,
    input[readonly] {
        color: var(--text-muted);
        background: var(--surface);
        cursor: not-allowed;
    }

    /* Django dokleja `aria-invalid` polom z bledem; ramka ma to powtarzac,
       bo sam czerwony tekst pod polem bywa poza kadrem przy dlugim
       formularzu. */
    [aria-invalid="true"] {
        border-color: var(--danger) !important;
    }

    select {
        appearance: none;
        padding-right: calc(var(--control-pad-x) * 2.5);
        /* Strzalka rysowana tlem, a nie znacznikiem - `select` nie moze miec
           dziecka ::after. */
        background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
                          linear-gradient(135deg, currentcolor 50%, transparent 50%);
        background-position: calc(100% - 18px) center, calc(100% - 13px) center;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        cursor: pointer;
    }

    /* Lista rozwijana rysuje sie natywnie, wiec musi dostac wlasne kolory -
       inaczej na ciemnym motywie bywa biala plama. */
    select option {
        color: var(--text);
        background: var(--surface-overlay);
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 1rem;
        height: 1rem;
        accent-color: var(--accent);
        cursor: pointer;
    }

    input[type="file"] {
        max-width: 100%;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    /* Kalendarzyk w polach dat na ciemnym tle jest domyslnie prawie
       niewidoczny. */
    ::-webkit-calendar-picker-indicator {
        filter: invert(0.75);
        cursor: pointer;
    }

    label {
        display: inline-block;
        color: var(--text-muted);
        font-size: var(--text-sm);
    }

    fieldset {
        margin: 0;
        padding: 0;
        border: 0;
    }

    legend {
        padding: 0;
        color: var(--text-muted);
        font-size: var(--label-size);
        letter-spacing: var(--label-spacing);
        text-transform: var(--label-transform);
    }

    /* Lista bledow, ktora Django renderuje pod polem. */
    .errorlist {
        margin: var(--space-2xs) 0 0;
        padding: 0;
        list-style: none;
        color: var(--danger);
        font-size: var(--text-xs);
    }

    /* --- pasek przewijania ---------------------------------------------
       Domyslny jasny pasek na czarnym tle rozbija ciemny motyw. */
    * {
        scrollbar-width: thin;
        scrollbar-color: var(--border-strong) transparent;
    }

    ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    ::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border: 2px solid transparent;
        border-radius: var(--radius-pill);
        background-clip: content-box;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: var(--text-faint);
        background-clip: content-box;
    }
}