/* ==========================================================================
   Aplikacja serwisowa SETUP-SERWIS - styl podstawowy.

   Kolory wyłącznie z docs/marka/README.md. Żadnego frameworka CSS ani JS:
   aplikacja chodzi w biurze i przez VPN z telefonu, więc im mniej do
   pobrania i im mniej zależności od internetu, tym lepiej.

   Czcionka: Barlow z plików w wwwroot/czcionki (zadanie 03b, D3), z pełnym
   stosem systemowym jako zapasem - Barlow nie ma strzałek, znaku ✓ ani ●.
   Żadnych zapytań do Google Fonts: aplikacja stoi za VPN-em.
   ========================================================================== */

/* --------------------------------------------------------- czcionka ---- */
/* Barlow z marki (docs/marka), hostowany LOKALNIE - zadanie 03b, D3.
   Pliki, licencja OFL i opis, jak powstaly: wwwroot/czcionki/CZYTAJ.md.

   Lokalnie, bo aplikacja stoi za VPN-em i nie zawsze ma wyjscie do
   internetu - font z CDN-u nie wczytalby sie wtedy wcale.

   font-display: swap - tekst pokazuje sie od razu czcionka systemowa
   i podmienia, gdy Barlow dojdzie. Ekran bez tekstu jest gorszy niz ekran
   w innej czcionce. */

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("czcionki/Barlow-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("czcionki/Barlow-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("czcionki/Barlow-Bold.woff2") format("woff2");
}

:root {
    --grafit: #3B3B3B;
    --czerwien: #E30016;
    --biel: #FFFFFF;
    --tlo-jasne: #F4F4F2;
    --tekst: #1F1F1F;
    --tekst-pomocniczy: #5C5C5A;
    --linie: #DADAD8;

    /* Marka: przyciski i pola dotykowe min. 44 px wysokości. */
    --dotyk: 44px;
}

* {
    box-sizing: border-box;
}

html {
    /* Nic nie wymaga przewijania w poziomie, także przy 390 px. */
    overflow-x: hidden;
}

body {
    margin: 0;
    background: var(--tlo-jasne);
    color: var(--tekst);
    font-family: "Barlow", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;

    /* Przy 390 px nic nie ma prawa rozepchnąć strony w bok. Bez tego
       pojedynczy długi wyraz - ścieżka pliku, adres e-mail, numer
       fabryczny - robi się szerszy od ekranu i ucina resztę treści. */
    overflow-wrap: break-word;
}

h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 0.75rem;
    overflow-wrap: break-word;
}

/* Ścieżki i nazwy kluczy konfiguracji. Łamane w dowolnym miejscu, bo nie
   mają spacji, a mają po kilkadziesiąt znaków. */
code {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.92em;
    overflow-wrap: anywhere;
}

h1:focus {
    outline: none;
}

h2 {
    font-size: 1.15rem;
    margin: 1.5rem 0 0.5rem;
}

a {
    color: var(--tekst);
}

.pomocniczy {
    color: var(--tekst-pomocniczy);
    font-size: 0.9rem;
}

/* ---------------------------------------------------------------- pasek --- */

.pasek {
    background: var(--grafit);
    color: var(--biel);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    min-height: 56px;
}

.pasek__logo {
    height: 26px;
    width: auto;
    flex: 0 0 auto;
}

.pasek__nazwa {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pasek__wypelniacz {
    flex: 1 1 auto;
}

.pasek__konto {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    min-width: 0;
}

.pasek__uzytkownik {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Przycisk menu - widoczny tylko na wąskim ekranie. Zwykły <label> dla
   ukrytego pola wyboru: menu chowa się i rozwija bez JavaScriptu, więc
   działa też wtedy, gdy obwód Blazora jeszcze się nie podniósł. */
.przycisk-menu {
    display: none;
    align-items: center;
    justify-content: center;
    width: var(--dotyk);
    height: var(--dotyk);
    margin-left: -0.5rem;
    border-radius: 6px;
    cursor: pointer;
    flex: 0 0 auto;
}

.przycisk-menu:hover,
.przycisk-menu:focus-within {
    background: rgba(255, 255, 255, 0.14);
}

.przycisk-menu__kreski,
.przycisk-menu__kreski::before,
.przycisk-menu__kreski::after {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    background: var(--biel);
    border-radius: 2px;
}

.przycisk-menu__kreski::before {
    transform: translateY(-7px);
}

.przycisk-menu__kreski::after {
    transform: translateY(5px);
}

#menu-rozwinie {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* ------------------------------------------------------------------ menu --- */

.menu {
    background: var(--biel);
    border-bottom: 1px solid var(--linie);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
}

.menu__pozycja {
    display: flex;
    align-items: center;
    min-height: var(--dotyk);
    padding: 0 0.85rem;
    border-radius: 6px;
    color: var(--tekst);
    text-decoration: none;
    font-weight: 500;
}

.menu__pozycja:hover {
    background: var(--tlo-jasne);
}

/* Blazor sam dokłada tę klasę pozycji odpowiadającej bieżącemu adresowi. */
.menu__pozycja.active {
    background: var(--tlo-jasne);
    box-shadow: inset 0 -3px 0 var(--czerwien);
}

/* ----------------------------------------------------------------- treść --- */

.tresc {
    max-width: 70rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

.karta {
    background: var(--biel);
    border: 1px solid var(--linie);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.karta h2:first-child {
    margin-top: 0;
}

.pusto {
    color: var(--tekst-pomocniczy);
}

/* -------------------------------------------------------------- formularz --- */

.formularz {
    background: var(--biel);
    border: 1px solid var(--linie);
    border-radius: 8px;
    padding: 1.25rem;
    max-width: 26rem;
    margin: 2rem auto;
}

.pole {
    display: block;
    margin-bottom: 1rem;
}

.pole__etykieta {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 500;
}

.pole__wejscie {
    width: 100%;
    min-height: var(--dotyk);
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--linie);
    border-radius: 6px;
    background: var(--biel);
    color: var(--tekst);
    font: inherit;
}

.pole__wejscie:focus {
    outline: 2px solid var(--grafit);
    outline-offset: 1px;
}

.pole--wybor {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--dotyk);
}

/* Jeden główny przycisk na ekranie w czerwieni marki - tak mówi
   docs/marka/README.md. Reszta akcji na graficie. */
.przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--dotyk);
    padding: 0 1.1rem;
    border: 0;
    border-radius: 6px;
    background: var(--grafit);
    color: var(--biel);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.przycisk:hover {
    filter: brightness(1.15);
}

.przycisk:focus-visible {
    outline: 2px solid var(--tekst);
    outline-offset: 2px;
}

.przycisk--glowny {
    background: var(--czerwien);
    width: 100%;
}

.przycisk--pasek {
    background: rgba(255, 255, 255, 0.14);
    min-height: 36px;
    padding: 0 0.75rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.blad {
    background: #FDECEE;
    border: 1px solid var(--czerwien);
    border-radius: 6px;
    color: #8A0010;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
}

/* Klasy, których używa walidacja formularzy Blazora. */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--czerwien);
}

.validation-message {
    color: #8A0010;
    display: block;
    margin-top: 0.25rem;
    font-size: 0.9rem;
}

.blazor-error-boundary {
    background: var(--czerwien);
    color: var(--biel);
    padding: 1rem;
}

.blazor-error-boundary::after {
    content: "Wystąpił nieoczekiwany błąd.";
}

/* ============================== telefon ==================================
   Do 699 px menu jest schowane i rozwija się przyciskiem w pasku.
   Docelowa szerokość kontrolna z zadania: 390 px.
   ========================================================================= */

@media (max-width: 699px) {
    .przycisk-menu {
        display: flex;
    }

    .menu {
        display: none;
        flex-direction: column;
        gap: 0;
        padding: 0.25rem 0.5rem 0.5rem;
    }

    #menu-rozwinie:checked ~ .menu {
        display: flex;
    }

    .menu__pozycja {
        border-radius: 0;
        border-bottom: 1px solid var(--linie);
    }

    .menu__pozycja:last-child {
        border-bottom: 0;
    }

    .menu__pozycja.active {
        box-shadow: inset 3px 0 0 var(--czerwien);
    }

    .pasek__nazwa {
        /* Na 390 px sama nazwa aplikacji nie zmieściłaby się obok logo,
           konta i przycisku menu - logo nosi już markę, nazwa jest
           w nagłówku strony. */
        display: none;
    }

    .pasek__uzytkownik {
        display: none;
    }

    .tresc {
        padding: 1rem 0.75rem 2.5rem;
    }

    .formularz {
        margin: 1rem auto;
        padding: 1rem;
    }
}

/* ==========================================================================
   Rejestr (zadanie 01)
   ========================================================================== */

.pasek-narzedzi {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.pasek-narzedzi .pole__wejscie {
    width: auto;
    flex: 1 1 14rem;
    min-width: 0;
}

.okruchy {
    font-size: 0.9rem;
    color: var(--tekst-pomocniczy);
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
}

.okruchy a {
    color: var(--tekst-pomocniczy);
}

/* Listy są kartami, nie tabelami: na 390 px tabela zawsze wyjedzie w bok. */
.pozycja {
    display: block;
    background: var(--biel);
    border: 1px solid var(--linie);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    margin-bottom: 0.5rem;
    text-decoration: none;
    color: var(--tekst);
    min-height: var(--dotyk);
}

a.pozycja:hover {
    border-color: var(--grafit);
}

.pozycja__tytul {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.pozycja__opis {
    color: var(--tekst-pomocniczy);
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.pozycja__wiersz {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: baseline;
}

.znacznik {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--linie);
    background: var(--tlo-jasne);
    color: var(--tekst-pomocniczy);
    white-space: nowrap;
}

.znacznik--uwaga {
    border-color: #C9A227;
    background: #FBF4DC;
    color: #6B5200;
}

.znacznik--wylaczone {
    border-color: var(--tekst-pomocniczy);
    background: var(--biel);
}

.dane {
    display: grid;
    grid-template-columns: minmax(7rem, auto) 1fr;
    gap: 0.35rem 0.75rem;
    margin: 0;
}

.dane dt {
    color: var(--tekst-pomocniczy);
}

.dane dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.przyciski {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.przycisk--lekki {
    background: var(--biel);
    color: var(--tekst);
    border: 1px solid var(--linie);
}

.przycisk--lekki:hover {
    background: var(--tlo-jasne);
    filter: none;
}

.uwaga {
    background: #FBF4DC;
    border: 1px solid #C9A227;
    border-radius: 6px;
    color: #6B5200;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
}

.udalo-sie {
    background: #E8F4EA;
    border: 1px solid #2E7D32;
    border-radius: 6px;
    color: #1B5E20;
    padding: 0.6rem 0.75rem;
    margin-bottom: 1rem;
}

.kod-qr {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
}

.kod-qr img {
    width: 180px;
    height: 180px;
    border: 1px solid var(--linie);
    border-radius: 6px;
    background: var(--biel);
}

.kod-qr__adres {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.historia {
    border-left: 2px solid var(--linie);
    padding-left: 0.9rem;
    margin-left: 0.25rem;
}

.historia__wpis {
    margin-bottom: 0.75rem;
}

/* Dopisek od sklepu - wyrozniony, bo przyszedl od czlowieka stojacego przy
   zepsutej kasie (zadanie 03b, B3). */
.historia__wpis--sklep {
    border-left: 4px solid #C9A227;
    background: #FBF4DC;
}

.historia__kiedy {
    color: var(--tekst-pomocniczy);
    font-size: 0.9rem;
}

@media (max-width: 699px) {
    .dane {
        grid-template-columns: 1fr;
        gap: 0 0.75rem;
    }

    .dane dd {
        margin-bottom: 0.5rem;
    }

    .przyciski .przycisk {
        flex: 1 1 100%;
    }
}

/* ==========================================================================
   Zadanie 01b - historia z rodzajem wpisu.
   ========================================================================== */

.historia__naglowek {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
}

/* Rodzaj wpisu niesie treść, nie ozdobę: po nim poznaje się, czy to była
   wymiana, czy pierwszy montaż. Dlatego kontrast, a nie szarość. */
.znacznik--rodzaj {
    border-color: var(--grafit);
    background: var(--biel);
    color: var(--grafit);
}

/* ==========================================================================
   Zadanie 01b - telefon najpierw: szybkie wyszukiwanie i zwijane formularze.
   ========================================================================== */

.szukajka {
    margin: 0 0 1.25rem;
}

.szukajka__pole {
    /* Pole szukania jest pierwszą rzeczą na ekranie rejestru, więc ma być
       duże i samo w jednej linii - palcem, w sklepie, bez celowania. */
    width: 100%;
    font-size: 1.05rem;
    min-height: var(--dotyk);
}

/* Trafienie wyszukiwania bywa przyciskiem (wybór stanowiska przy naklejce),
   a bywa linkiem (przejście do karty). Ma wyglądać tak samo. */
.pozycja--przycisk {
    width: 100%;
    text-align: left;
    border: 1px solid var(--linie);
    font: inherit;
    cursor: pointer;
}

.zwijane {
    margin: 1rem 0;
}

.zwijane__przelacznik {
    width: 100%;
}

.zwijane__tresc {
    display: none;
}

.zwijane__tresc--otwarte {
    display: block;
}

/* Komputer: formularze dodawania zostają otwarte, bo robi się je przy
   biurku. Telefon dostaje je zwinięte - serwisant u klienta szuka
   istniejącej kasy (zadanie 01b, B2). */
@media (min-width: 1024px) {
    .zwijane__pasek {
        display: none;
    }

    .zwijane__tresc {
        display: block;
    }
}

/* ==========================================================================
   Zadanie 01b - ekran urzadzenia jako miejsce pracy.
   ========================================================================== */

/* „← Wróć” nad okruszkiem: w trybie PWA na iPhonie nie ma przycisku
   „wstecz” przeglądarki, więc droga powrotna musi być na stronie. */
.przyciski--powrot {
    margin-bottom: 0.25rem;
}

.pole-grupa {
    border: 1px solid var(--linie);
    border-radius: 6px;
    padding: 0.75rem;
    margin: 0 0 1rem;
}

.pole-grupa legend {
    padding: 0 0.35rem;
}

/* ==========================================================================
   Zadanie 01b - naklejki in blanco: kod krotki, arkusz do wydruku.
   ========================================================================== */

/* Kod krótki przepisuje człowiek z naklejki, więc czcionka o stałej
   szerokości i odstępy między znakami - żeby nie zlewały się w jedno. */
.kod-krotki {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
}

.tabela th,
.tabela td {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--linie);
}

.tabela th {
    color: var(--tekst-pomocniczy);
    font-size: 0.9rem;
}

/* --- arkusz naklejek ---------------------------------------------------- */

.arkusz {
    background: var(--biel);
    padding: 1rem;
}

.arkusz__pasek {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

/* Pasek nad arkuszem ma przyciski obok siebie, a nie rozciągnięte na całą
   szerokość - to nie jest ekran dotykowy, tylko strona do drukowania. */
.arkusz__pasek .przycisk {
    flex: 0 0 auto;
}

.arkusz__siatka {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(34mm, 1fr));
    gap: 4mm;
}

.naklejka {
    border: 1px dashed var(--linie);
    padding: 2mm;
    text-align: center;
    break-inside: avoid;
}

.naklejka__kod {
    width: 28mm;
    height: 28mm;
    display: block;
    margin: 0 auto 1mm;
    image-rendering: pixelated;
}

.naklejka__krotki {
    font-family: Consolas, "Cascadia Mono", "Courier New", monospace;
    font-size: 3mm;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Wydruk: tylko naklejki. Przyciski, komunikaty i tło zostają na ekranie. */
@media print {
    @page {
        size: A4;
        margin: 8mm;
    }

    body {
        background: var(--biel);
    }

    .bez-wydruku,
    .pasek,
    .menu,
    #blazor-error-ui {
        display: none !important;
    }

    .arkusz {
        padding: 0;
    }

    .naklejka {
        border-color: #BBBBBB;
    }
}

/* ==========================================================================
   Zadanie 02 - zgłoszenia: kafelki wyboru urządzenia i galeria zdjęć.
   ========================================================================== */

/* Wybór urządzenia w formularzu zgłoszenia. Kafelki, a nie lista
   rozwijana: zgłoszenie wpisuje się w sklepie, jedną ręką, czasem
   w rękawicy - a lista rozwijana na telefonie wymaga dwóch precyzyjnych
   dotknięć (karta projektu §5.3 pkt 2). */
.kafelki {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.5rem;
}

.kafelek {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-height: var(--dotyk);
    padding: 0.6rem 0.75rem;
    border: 2px solid var(--linie);
    border-radius: 6px;
    background: var(--biel);
    color: var(--tekst);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.kafelek--wybrany {
    border-color: var(--czerwien);
    background: #FDEDEE;
}

.kafelek__tytul {
    font-weight: 600;
}

.kafelek__opis {
    color: var(--tekst-pomocniczy);
    font-size: 0.875rem;
}

/* Zdjęcia zgłoszenia. Miniatury w jednym rzędzie, który zawija się na
   telefonie; pełny obraz otwiera się endpointem, nie plikiem statycznym. */
.zdjecia {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.zdjecie {
    display: block;
    border: 1px solid var(--linie);
    border-radius: 6px;
    background: var(--biel);
    padding: 0.25rem;
}

.zdjecie img {
    display: block;
    width: 140px;
    height: 105px;
    object-fit: cover;
    border-radius: 4px;
}

.zdjecie__opis {
    display: block;
    max-width: 140px;
    color: var(--tekst-pomocniczy);
    font-size: 0.75rem;
    overflow-wrap: break-word;
}

/* ------------------------------------- alert o nowym zgloszeniu -------- */
/* Zadanie 03b, A. Licznik przy pozycji menu i komunikaty w rogu ekranu.   */

.licznik {
    display: inline-block;
    min-width: 1.5rem;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    background: var(--biel);
    color: var(--grafit);
}

.licznik--pilny {
    background: var(--czerwien);
    color: var(--biel);
}

/* Komunikaty: prawy dolny rog na komputerze, pelna szerokosc na telefonie.
   Zostaja do zamkniecia - "kasa nie sprzedaje" nie moze zniknac samo. */
.alerty {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    max-width: min(26rem, calc(100vw - 2rem));
}

.alert {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--linie);
    border-left: 5px solid var(--grafit);
    border-radius: 10px;
    background: var(--biel);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.alert--pilny {
    border-left-color: var(--czerwien);
}

.alert__gora {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.alert__naglowek {
    flex: 1;
    font-weight: 700;
}

.alert__zamknij {
    flex: none;
    min-width: var(--dotyk);
    min-height: var(--dotyk);
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--tekst-pomocniczy);
    font-size: 1rem;
    cursor: pointer;
}

.alert__zamknij:hover {
    background: var(--tlo-jasne);
}

.alert__miejsce {
    font-weight: 600;
}

.alert__opis,
.alert__znaczniki {
    font-size: 0.9rem;
    color: var(--tekst-pomocniczy);
}

.alert__znaczniki {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.alert-dzwiek {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--biel);
    color: var(--tekst-pomocniczy);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.75;
}

.alert-dzwiek:hover,
.alert-dzwiek:focus-visible {
    opacity: 1;
}

.alert-dzwiek--wlaczony {
    border-color: var(--grafit);
    color: var(--tekst);
    opacity: 1;
}

/* Przelacznik, "Test dzwieku" i podpowiedz stoja w jednej kolumnie
   (zadanie 04b, D2 i D4) - podpowiedz ma byc PRZY przelaczniku, bo to
   jego dotyczy. */
.alert-dzwiek-grupa {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
}

.alert-dzwiek__test {
    min-height: 2rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--biel);
    color: var(--tekst-pomocniczy);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
}

.alert-dzwiek__test:hover,
.alert-dzwiek__test:focus-visible {
    border-color: var(--grafit);
    color: var(--tekst);
}

/* Cisza bez wyjasnienia byla cala usterka z 04b (punkt 3), wiec ta
   podpowiedz musi byc widoczna, a nie szara na szarym. */
.alert-dzwiek__uwaga {
    max-width: 18rem;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    background: #FFF4D6;
    color: #6B4A00;
    font-size: 0.8rem;
    text-align: right;
}

/* Na telefonie sam dzwonek - napis zabralby pol ekranu. */
@media (max-width: 699px) {
    .alerty {
        right: 0.5rem;
        bottom: 0.5rem;
        left: 0.5rem;
        max-width: none;
    }

    .alert-dzwiek__napis {
        display: none;
    }
}

/* ------------------------------------------- przycisk aparatu ---------- */
/* Zadanie 03b, C2. Ten sam przycisk co na formularzu publicznym, zeby
   dodawanie zdjecia wygladalo wszedzie tak samo. Pole pliku jest schowane
   poza widok - nie display:none, bo takiego nie dosiegnie klawiatura ani
   czytnik ekranu. */

.aparat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 56px;
    padding: 0.7rem 1rem;
    border: 2px dashed var(--tekst-pomocniczy);
    border-radius: 12px;
    background: var(--biel);
    color: var(--tekst);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.aparat:hover,
.aparat:focus-within {
    border-color: var(--grafit);
    outline: 3px solid rgba(59, 59, 59, 0.2);
    outline-offset: 2px;
}

.aparat--dodane {
    border-style: solid;
    border-color: #1D5A33;
    background: #E4F1E8;
    color: #1D5A33;
}

.aparat__ikona {
    font-size: 1.4rem;
    line-height: 1;
}

.aparat__pole,
.pole__plik--ukryte {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Droga zapasowa pod przyciskiem aparatu (zadanie 04b, B1): to samo pole
   bez capture, czyli otwierajace galerie. Mala i szara - droga glowna jest
   aparat. */
.aparat__albo {
    display: inline-flex;
    align-items: center;
    align-self: center;
    min-height: 44px;
    padding: 0.2rem 0.5rem;
    font-size: 0.9rem;
    color: var(--tekst-pomocniczy);
    text-decoration: underline;
    cursor: pointer;
}

.aparat__albo:hover,
.aparat__albo:focus-within {
    color: var(--tekst);
}