/* Klasy pomocnicze.

   Celowo krotka lista. Utilities stoja w najwyzszej warstwie, wiec bija
   kazdy komponent - i wlasnie dlatego nie moze ich byc duzo: im wiecej
   drobnych klas w znaczniku, tym mniej wiadomo, skad bierze sie wyglad.
   Jesli cos powtarza sie tu trzeci raz, powinno zostac komponentem.
*/

@layer utilities {
    /* Widoczne tylko dla czytnika ekranu - podpisy pol, ktore graficznie
       niesie ikona albo uklad. */
    .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    /* Odsylacz "przejdz do tresci" - pierwszy Tab na stronie. */
    .skip-link {
        position: absolute;
        top: var(--space-xs);
        left: var(--space-xs);
        z-index: var(--z-toast);
        padding: var(--space-xs) var(--space-sm);
        color: var(--text-on-accent);
        background: var(--accent);
        border-radius: var(--radius-sm);
        transform: translateY(-200%);
        transition: transform var(--dur-fast) var(--ease);
    }

    .skip-link:focus {
        transform: translateY(0);
    }

    .u-mono {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    .u-muted { color: var(--text-muted); }
    .u-faint { color: var(--text-faint); }

    .u-ok     { color: var(--ok); }
    .u-warn   { color: var(--warn); }
    .u-danger { color: var(--danger); }

    /* Jedna linia z wielokropkiem - nazwy firm i modeli w waskich
       kolumnach i na kafelkach. */
    .u-truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .u-nowrap { white-space: nowrap; }
    .u-right { text-align: right; }
    .u-center { text-align: center; }

    .u-grow { flex: 1; min-width: 0; }
    .u-push { margin-inline-start: auto; }

    /* Formularz, ktory ma stac w linii z sasiednia trescia - przycisk
       usuwania w komorce tabeli, przelacznik w naglowku karty. */
    .u-inline-form {
        display: inline;
        margin: 0;
        padding: 0;
    }
}