/* =========================================================================
   Druk kwitów — podgląd kwitu, kod QR, stan i ustawienia drukarki
   (komponenty KodQr, PodgladKwitu, StatusDrukarki, UstawieniaDrukarki).

   Osobny plik, linkowany po app.css, z prefiksem `druk-` — nie `.razor.css`,
   bo App.razor nie ładuje bundla izolowanych stylów. Tokeny (kolory, odstępy,
   cele dotykowe) pochodzą z app.css; tu nie ma ani jednego nowego koloru poza
   bielą i czernią papieru oraz kodu QR, które celowo nie zmieniają się z motywem.
   ========================================================================= */

/* ---------- kod QR ---------- */

/* Czarne na białym na sztywno (fill w SVG), więc tło motywu się nie przebija.
   Skaler: szerokość z kontenera, wysokość z proporcji viewBox. Minimalny rozmiar,
   poniżej którego telefon z metra już kodu nie złapie, pilnuje rodzic klasą. */
.druk-qr {
    display: block;
    width: 100%;
    max-width: 14rem;
    height: auto;
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
}

/* ---------- podgląd kwitu ---------- */

.druk-podglad {
    margin: var(--sp-4) auto;
    max-width: 24rem;
}

/* Kartka: 384 punkty głowicy skalowane do szerokości kontenera. `pixelated`, bo to
   obraz 1-bit — wygładzanie przy skalowaniu wprowadziłoby szarości, których na
   papierze nie będzie. Biel i cień zostają w obu motywach: to obraz kartki. */
.druk-podglad-papier {
    display: block;
    width: 100%;
    height: auto;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    image-rendering: pixelated;
}

.druk-podglad figcaption {
    margin-top: var(--sp-2);
    font-size: 0.875rem;
    text-align: center;
}

/* ---------- pigułka stanu ---------- */

/* Kształt jak pasek kolejki (pigułka na tle karty), ale jako cel dotykowy — w nagłówku
   mapy i kreatora prowadzi do ustawień druku. Kolor niesie wyłącznie kropka: stan
   drukarki jest informacją o sprzęcie, nie alarmem, i nie może krzyczeć jak błąd
   dokumentu. Wyjątkiem jest błąd — tam zmienia się też tekst. */
.druk-status {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: var(--tap);
    padding: var(--sp-1) var(--sp-3);
    font: inherit;
    font-size: 0.875rem;
    color: var(--fg);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

button.druk-status {
    cursor: pointer;
}

button.druk-status:hover {
    border-color: var(--brand-600);
    background: var(--brand-soft);
}

.druk-status-kropka {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--line-strong);
}

.druk-status[data-stan="polaczona"] .druk-status-kropka {
    background: var(--ok);
}

/* Wirtualna: gotowa, ale nie drukuje na papier — obwódka zamiast pełnej kropki,
   żeby na tablecie przy wadze nie dało się jej pomylić z prawdziwą drukarką. */
.druk-status[data-stan="wirtualna"] .druk-status-kropka {
    background: transparent;
    border: 2px solid var(--ok);
}

/* Niepołączona czeka na ruch operatora — kolory ostrzeżenia z app.css, obwiedzione,
   bo samo --warn-bg na białej karcie ma za mały kontrast. */
.druk-status[data-stan="niepolaczona"] .druk-status-kropka {
    background: var(--warn-bg);
    border: 2px solid var(--warn-fg);
}

.druk-status[data-stan="blad"] {
    border-color: var(--err);
    color: var(--err);
    background: var(--err-soft);
}

.druk-status[data-stan="blad"] .druk-status-kropka {
    background: var(--err);
}

/* ---------- ustawienia drukarki ---------- */

.druk-ustawienia {
    display: grid;
    gap: var(--sp-3);
    max-width: 36rem;
}

.druk-ustawienia h2 {
    margin: 0;
}

.druk-ustawienia-stan {
    display: grid;
    justify-items: start;
    gap: var(--sp-2);
}

.druk-ustawienia-stan p {
    margin: 0;
}

.druk-ustawienia .akcje {
    margin: 0;
}

/* Przycisk „Połącz" pokazuje zajętość atrybutem, który ustawia sam druk.js — Blazor
   o kliknięciu nie wie, więc nie ma jak przełączyć klasy. */
.druk-polacz[aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}

.druk-wynik {
    margin: 0;
    padding: var(--sp-3);
    color: var(--ok);
    background: var(--ok-soft);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
}

.druk-ustawienia .form-error {
    margin: 0;
}

.druk-tryby {
    display: grid;
    gap: var(--sp-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.druk-tryby legend {
    margin-bottom: var(--sp-2);
    padding: 0;
    font-size: 0.875rem;
    color: var(--muted);
}

/* Wybór trybu jako kafle — cały wiersz jest celem dotykowym, nie sama kropka radia. */
.druk-tryb {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    min-height: var(--tap-lg);
    padding: var(--sp-3) var(--sp-4);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}

.druk-tryb.wybrany {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.druk-tryb input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0.2rem 0 0;
    accent-color: var(--ui-accent);
}

.druk-tryb > span {
    display: grid;
    gap: var(--sp-1);
}

.druk-tryb .muted {
    font-size: 0.875rem;
}

/* `label.inline` z app.css ma nowrap — zdanie o drukarce wirtualnej musi się zawijać na telefonie. */
.druk-ustawienia label.inline {
    margin-right: 0;
    white-space: normal;
}

.druk-kopie {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.druk-kopie > span {
    flex: 1;
}

.druk-kopie-krok {
    min-width: var(--tap-lg);
    min-height: var(--tap-lg);
    font-size: 1.5rem;
    font-weight: 600;
}

.druk-kopie-liczba {
    min-width: 2ch;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Kopie kwitów po zapisie — tylko do odczytu, ustawia właściciel. Wiersz „kod · nazwa"
   po lewej, liczba kopii po prawej; kafel jak `.druk-pomoc`, bo to informacja, nie kontrolka. */
.druk-po-zapisie {
    padding: var(--sp-3) var(--sp-4);
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.druk-po-zapisie h3 {
    margin: 0 0 var(--sp-2);
    font-size: 1rem;
}

.druk-po-zapisie ul {
    display: grid;
    gap: var(--sp-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.druk-po-zapisie li {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
}

.druk-po-zapisie li strong {
    flex: none;
    font-variant-numeric: tabular-nums;
}

.druk-po-zapisie p {
    margin: var(--sp-2) 0 0;
    font-size: 0.875rem;
}

.druk-pomoc {
    padding: var(--sp-3) var(--sp-4);
    background: var(--card-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.druk-pomoc summary {
    min-height: var(--tap);
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
}

.druk-pomoc ol {
    margin: var(--sp-2) 0 0;
    padding-left: var(--sp-5);
}

.druk-pomoc li + li {
    margin-top: var(--sp-2);
}

/* ---------- panel druku na ekranach operatora ---------- */

/* Pigułka stanu drukarki w nagłówku mapy i kreatora: tytuł (jeśli jest) po lewej,
   pigułka po prawej. Bez tytułu (kreator ma go w krokach) pigułka stoi sama przy
   prawej krawędzi, nad pierwszym nagłówkiem kroku. */
.druk-naglowek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.druk-naglowek-sam {
    justify-content: flex-end;
    margin-bottom: var(--sp-2);
}

/* Panel rozwijany w miejscu, nie nakładka: na tablecie przy wadze nakładka nad
   przyklejonym topbarem to osobny kłopot z warstwami, a panel w treści wystarczy —
   operator otwiera go raz na zmianę. */
.druk-panel {
    margin-bottom: var(--sp-4);
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card);
}

.druk-panel-naglowek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}

.druk-panel-naglowek h2,
.druk-ostatnie h2 {
    margin: 0;
}

.druk-ostatnie {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}

/* Ten sam kształt co lista kolejki pod paskiem: wiersz z opisem i przyciskiem. */
.druk-ostatnie-lista {
    list-style: none;
    margin: var(--sp-3) 0 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.druk-ostatnie-lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    min-height: var(--tap);
}

.druk-ostatnie-lista li + li {
    border-top: 1px solid var(--line);
}

.druk-ostatnie-lista li > span:first-child {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.druk-ostatnie-lista .badge {
    align-self: flex-start;
    margin: var(--sp-1) 0;
}

/* Kwit na ekranie potwierdzenia ważenia: przycisk druku i komunikat pod podglądem. */
.druk-kwit-akcje {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.druk-kwit-akcje p {
    margin: 0;
}

/* ---------- wydruk strony (Ctrl+P na ekranie dokumentu) ---------- */

/* Kod QR zostaje na kartce — po to jest; sterowanie drukarką termiczną i podgląd
   kwitu nie są treścią dokumentu. */
@media print {
    .druk-status,
    .druk-ustawienia,
    .druk-podglad,
    .druk-panel {
        display: none !important;
    }
}