/* ===================================================================
   LAYOUT.css — wspólny wygląd aplikacji webowych ZPAS
   (zmienne, topbar, zakładki, karty, tabele, formularze, paginacja)

   Plik wspólny dla wszystkich naszych aplikacji — kopiuj bez zmian.
   Style specyficzne dla aplikacji dopisuj w osobnym pliku CSS.
   =================================================================== */

:root {
    /* Oficjalna paleta ZPAS — numeracja zgodna z dokumentem identyfikacji wizualnej.
       Ciepła skala szarości; zimnych, niebieskawych odcieni nie stosujemy. */
    --zpas-neutral-950: #0A0A0A;
    --zpas-neutral-900: #171717;
    --zpas-neutral-800: #262626;
    --zpas-neutral-700: #404040;
    --zpas-neutral-600: #525252;   /* tekst drugorzędny — kontrast 7.8:1 na białym (WCAG AAA) */
    --zpas-neutral-500: #737373;
    --zpas-neutral-400: #A3A3A3;
    --zpas-neutral-300: #D4D4D4;
    --zpas-neutral-200: #E5E5E5;
    --zpas-neutral-100: #F5F5F5;
    --zpas-neutral-50:  #FAFAFA;

    /* Akcenty: wyłącznie grafika i CTA. Nigdy jako kolor treści ani tło pod treścią.
       Docelowy udział w projekcie: bordo ok. 5%, żółć ok. 2%. */
    --zpas-maroon: #8C2A23;
    --zpas-maroon-dark: #6f1f1a;
    --zpas-yellow: #F4CE6C;

    /* kolory funkcjonalne (statusy) — świadomie inne niż bordo marki */
    --stan-ok: #21a121;
    --stan-uwaga: #f2c200;
    --stan-blad: #C8001A;
}

body.zpas-app {
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif;
    /* Marka zaleca lekko ujemny letter spacing dla tekstu zwykłego (−1% do −6%). */
    letter-spacing: -0.011em;
    background: var(--zpas-neutral-100);
    color: var(--zpas-neutral-900);
    margin: 0;
}

body.zpas-app * { font-family: inherit; }

.zpas-app-body { padding: 92px 24px 40px; }

/* ---------- Wspólny górny pasek ZPAS ---------- */

.zpas-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: 68px;
    display: flex; align-items: center;
    padding: 0 16px 0 22px;
    background: linear-gradient(90deg, #171717 0%, #262626 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}

.zpas-topbar-brand { display: flex; align-items: center; gap: 14px; }
.zpas-topbar-logo { height: 26px; width: auto; }
.zpas-topbar-titles { display: flex; flex-direction: column; line-height: 1.05; }
/* Wersaliki pełniące funkcję brandingu — marka zaleca dodatni letter spacing ok. +6%.
   Wagi trzymamy na SemiBold: Bold/ExtraBold psują elegancki charakter marki. */
.zpas-topbar-main { font-size: 20px; font-weight: 600; letter-spacing: 0.06em; }
.zpas-topbar-sub {
    font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
    color: var(--zpas-neutral-300); text-transform: uppercase;
}

.zpas-topbar-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.zpas-topbar-user { color: #fff; font-weight: 600; opacity: .9; display: inline-flex; align-items: center; gap: 8px; }
.zpas-topbar-actions .button {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    color: #fff !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
}
.zpas-topbar-actions .button:hover { background: rgba(255,255,255,.12) !important; }

/* ---------- Zakładki nawigacyjne ---------- */

.zpas-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; }
.zpas-tabs a {
    display: inline-flex; align-items: center; gap: 8px;
    border: none; text-decoration: none;
    color: var(--zpas-neutral-600);
    font-weight: 600; font-size: 14px;
    padding: 10px 16px;
    border-radius: 8px 8px 0 0;
    background: transparent;
    border-bottom: 3px solid transparent;
}
.zpas-tabs a:hover { color: var(--zpas-neutral-900); background: var(--zpas-neutral-200); }
.zpas-tabs a.aktywna {
    color: var(--zpas-maroon);
    background: #fff;
    border-bottom-color: var(--zpas-maroon);
}
.zpas-tabs a [class^="mif-"] { font-size: 17px; line-height: 1; }

/* ---------- Karty ---------- */

body.zpas-app .card {
    background: #fff;
    border: 1px solid var(--zpas-neutral-200);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 6px 18px rgba(0,0,0,.04);
    padding: 0;
    overflow: hidden;
    margin-bottom: 16px;
}
body.zpas-app .card-header {
    background: var(--zpas-neutral-100);
    border-bottom: 1px solid var(--zpas-neutral-200);
    padding: 14px 18px;
    font-weight: 600; font-size: 15px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
body.zpas-app .card-header .card-title-lg { font-size: 20px; font-weight: 600; margin: 0; }
body.zpas-app .card-header .card-subtitle { font-size: 13px; font-weight: 500; color: var(--zpas-neutral-600); margin: 3px 0 0; }
/* Metro nadaje .card-content display:flex — układamy w kolumnę, żeby elementy
   szły jeden pod drugim, a nie obok siebie. */
body.zpas-app .card-content {
    padding: 18px;
    display: block;
}
body.zpas-app .card-header .button {
    flex: 0 0 auto !important; width: auto !important; min-width: max-content !important;
    white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 9px 22px !important; font-size: 14px !important;
}
body.zpas-app .card-header .button [class^="mif-"] { font-size: 17px; line-height: 1; }
.card-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* ---------- Przyciski ---------- */

body.zpas-app .button {
    border-radius: 8px !important;
    font-weight: 600;
    border: 1px solid var(--zpas-neutral-300) !important;
    background: var(--zpas-neutral-200) !important;
    color: var(--zpas-neutral-900) !important;
    padding: 8px 16px !important;
    transition: all .12s ease;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
body.zpas-app .button:hover { background: var(--zpas-neutral-300) !important; }
body.zpas-app .button.small { padding: 5px 10px !important; font-size: 12px; }
body.zpas-app .button [class^="mif-"] { font-size: 16px; line-height: 1; }

/* CTA — bordowy akcent ZPAS. Główna akcja na widoku zwykle jedna. */
body.zpas-app .button.primary,
body.zpas-app .button.success {
    background: var(--zpas-maroon) !important;
    border-color: var(--zpas-maroon) !important;
    color: #fff !important;
}
body.zpas-app .button.primary:hover,
body.zpas-app .button.success:hover { background: var(--zpas-maroon-dark) !important; }

/* Akcja destrukcyjna — obrys, wypełnienie dopiero na hover. */
body.zpas-app .button.alert {
    background: #fff !important;
    border-color: var(--stan-blad) !important;
    color: var(--stan-blad) !important;
}
body.zpas-app .button.alert:hover { background: var(--stan-blad) !important; color: #fff !important; }

body.zpas-app .button:disabled { opacity: .45; cursor: default; }

/* ---------- Formularze ---------- */

/* input bez atrybutu type jest polem tekstowym, ale selektor [type="text"] go nie łapie —
   bez :not([type]) wypadał poza styl i stawał obok przycisku o innej wysokości. */
body.zpas-app input:not([type]),
body.zpas-app input[type="text"],
body.zpas-app input[type="search"],
body.zpas-app input[type="password"],
body.zpas-app input[type="email"],
body.zpas-app input[type="number"],
body.zpas-app input[type="date"],
body.zpas-app select,
body.zpas-app textarea {
    width: 100%;
    padding: 8px 11px;
    border: 1px solid var(--zpas-neutral-300);
    border-radius: 8px !important;
    font-size: 14px;
    line-height: 20px;
    background: #fff;
    color: var(--zpas-neutral-900);
    box-sizing: border-box;
}

/* Jednakowa wysokość kontrolek jednoliniowych — bez tego listy rozwijane
   obcinały znaki schodzące poniżej linii pisma (np. „p" w adresie e-mail). */
body.zpas-app input:not([type]),
body.zpas-app input[type="text"],
body.zpas-app input[type="search"],
body.zpas-app input[type="password"],
body.zpas-app input[type="email"],
body.zpas-app input[type="number"],
body.zpas-app input[type="date"],
body.zpas-app select { height: 38px; }
body.zpas-app input:focus,
body.zpas-app select:focus,
body.zpas-app textarea:focus {
    outline: none;
    border-color: var(--zpas-maroon);
    box-shadow: 0 0 0 3px rgba(140,42,35,.12);
}
body.zpas-app .form-group { margin-bottom: 14px; }
body.zpas-app .form-group > label { display: block; margin-bottom: 5px; }
body.zpas-app label { font-weight: 600; font-size: 13px; color: var(--zpas-neutral-600); }

/* Pasek filtrów / formularz w linii — stałe szerokości pól, bez rozpychania.
   Pola NIE mają flex-grow: przy zawijaniu zostają równe zamiast się rozjeżdżać.

   Wyrównanie do GÓRY (nie do dołu): pola bywają różnej wysokości, bo część ma pod
   spodem podpowiedź. Przy wyrównaniu do dołu inputy rozjeżdżałyby się w pionie. */
.zpas-form-row {
    display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-start;
}
.zpas-form-row .zpas-field { display: flex; flex-direction: column; gap: 4px; }
.zpas-form-row .zpas-field > label {
    margin: 0; font-size: 12px; font-weight: 600; color: var(--zpas-neutral-600);
    /* stała wysokość etykiety = inputy w jednej linii mimo różnych nazw pól */
    line-height: 16px; height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zpas-form-row .zpas-field > input,
.zpas-form-row .zpas-field > select { width: 190px; }
.zpas-form-row .zpas-field--waskie > input,
.zpas-form-row .zpas-field--waskie > select { width: 145px; }
.zpas-form-row .zpas-field--szerokie > input,
.zpas-form-row .zpas-field--szerokie > select { width: 260px; }
.zpas-form-row .zpas-field .zpas-hint { margin-top: 2px; max-width: 260px; }

/* Przyciski w linii pól: odsunięte o wysokość etykiety, żeby stanęły równo z inputami. */
.zpas-form-row .zpas-form-actions { display: inline-flex; gap: 8px; padding-top: 20px; }
.zpas-form-row .zpas-form-actions .button { min-height: 38px; }

/* Pasek filtrów osadzony w karcie — szara wstęga pod nagłówkiem. */
.zpas-filtry {
    padding: 14px 18px;
    background: var(--zpas-neutral-100);
    border-bottom: 1px solid var(--zpas-neutral-200);
}
.zpas-filtry-licznik {
    margin-left: auto; align-self: center;
    font-size: 13px; font-weight: 600; color: var(--zpas-neutral-600);
}

/* ---------- Tabele ---------- */

body.zpas-app table.table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: #fff; margin: 0;
}
body.zpas-app table.table thead th {
    background: var(--zpas-neutral-900); color: #fff;
    font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .3px;
    padding: 11px 12px; text-align: left; border: none;
    position: sticky; top: 0; z-index: 2;
    white-space: nowrap;
}
body.zpas-app table.table tbody td {
    padding: 9px 12px; border-bottom: 1px solid var(--zpas-neutral-200); font-size: 14px;
}
body.zpas-app table.table tbody tr:nth-child(even) { background: var(--zpas-neutral-100); }
body.zpas-app table.table tbody tr:hover { background: #fbeeee; }
body.zpas-app table.table td.liczba,
body.zpas-app table.table th.liczba { text-align: right; font-variant-numeric: tabular-nums; }
body.zpas-app table.table td.nowrap,
body.zpas-app table.table th.nowrap { white-space: nowrap; }
body.zpas-app table.table td.akcje { white-space: nowrap; text-align: right; }
body.zpas-app table.table td.akcje > div { display: inline-flex; gap: 6px; justify-content: flex-end; }

/* Plan ma kilkanaście kolumn i przewija się w poziomie. Kolumna z akcjami zostaje
   przyklejona do prawej krawędzi, żeby przycisk edycji był zawsze pod ręką —
   inaczej trzeba przewinąć całą tabelę, żeby go dosięgnąć. */
body.zpas-app table.table th.akcje-przyklejone,
body.zpas-app table.table td.akcje-przyklejone {
    position: sticky; right: 0; z-index: 1;
    background: inherit;
    box-shadow: -6px 0 8px -6px rgba(23,23,23,.22);
}
body.zpas-app table.table th.akcje-przyklejone { z-index: 3; background: var(--zpas-neutral-900); }
body.zpas-app table.table tbody tr:nth-child(odd) td.akcje-przyklejone { background: #fff; }
body.zpas-app table.table tbody tr:nth-child(even) td.akcje-przyklejone { background: var(--zpas-neutral-100); }
body.zpas-app table.table tbody tr:hover td.akcje-przyklejone { background: #fbeeee; }

/* Wiersz zmieniony ręcznie — żółć marki jako wąski akcent, nie tło. */
body.zpas-app table.table tbody tr.zmodyfikowany td:first-child { box-shadow: inset 3px 0 0 var(--zpas-yellow); }

/* Otoczka z przewijaniem dla długich tabel (nagłówek zostaje przyklejony). */
.zpas-tabela-otoczka {
    overflow: auto;
    max-height: 62vh;
    border-top: 1px solid var(--zpas-neutral-200);
}

/* ---------- Paginacja ---------- */

.zpas-pager {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 10px 16px; padding: 14px 18px;
    border-top: 1px solid var(--zpas-neutral-200); background: var(--zpas-neutral-100);
}
.zpas-pager-info { font-size: 13px; font-weight: 600; color: var(--zpas-neutral-600); }
.zpas-pager-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zpas-page-btn {
    min-width: 36px; height: 36px; padding: 0 12px;
    display: inline-flex; align-items: center; gap: 6px; justify-content: center;
    border: 1px solid var(--zpas-neutral-300); border-radius: 8px;
    background: #fff; color: var(--zpas-neutral-900); font-weight: 600; font-size: 14px;
    text-decoration: none; cursor: pointer;
}
.zpas-page-btn:hover { background: var(--zpas-neutral-200); }

/* ---------- Etykiety statusu ---------- */

.zpas-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; font-weight: 600;
    padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    border: 1px solid transparent;
}
.zpas-badge--gotowy { background: #e8f6e8; color: #16741a; border-color: #b8e2b8; }
.zpas-badge--pobieranie { background: #fbf2d6; color: #8a6d12; border-color: #e7cf8a; }
.zpas-badge--blad { background: #fbeaea; color: var(--stan-blad); border-color: #f0b8bd; }
.zpas-badge--neutralny { background: var(--zpas-neutral-100); color: var(--zpas-neutral-600); border-color: var(--zpas-neutral-200); }
.zpas-badge--uwaga { background: #fbf2d6; color: #8a6d12; border-color: #e7cf8a; }

/* ---------- Komunikaty ---------- */

.zpas-komunikat {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px; border-radius: 10px;
    border: 1px solid transparent; margin-bottom: 16px;
    font-size: 14px; font-weight: 500;
}
.zpas-komunikat [class^="mif-"] { font-size: 18px; line-height: 1.2; flex: 0 0 auto; }
.zpas-komunikat--ok { background: #e8f6e8; border-color: #b8e2b8; color: #16741a; }
.zpas-komunikat--blad { background: #fbeaea; border-color: #f0b8bd; color: var(--stan-blad); }
.zpas-komunikat--uwaga { background: #fbf2d6; border-color: #e7cf8a; color: #8a6d12; }

/* ---------- Stan pusty ---------- */

.zpas-pusto { padding: 48px 20px; text-align: center; color: var(--zpas-neutral-600); }
.zpas-pusto [class^="mif-"] { font-size: 44px; display: block; margin-bottom: 12px; color: var(--zpas-neutral-300); }
.zpas-pusto p { margin: 4px 0; font-size: 14px; }

/* ---------- Sekcje w karcie ---------- */

.zpas-sekcja + .zpas-sekcja { margin-top: 26px; }
.zpas-sekcja-tytul {
    font-weight: 600; font-size: 15px; color: var(--zpas-neutral-900);
    padding-bottom: 8px; margin-bottom: 14px;
    border-bottom: 2px solid var(--zpas-neutral-200);
}
.zpas-hint { font-size: 12.5px; color: var(--zpas-neutral-600); line-height: 1.4; margin: 6px 0 0; }

/* ---------- Trwająca operacja ----------
   Przycisk uruchamiający coś dłuższego niż sekunda gaśnie i dostaje kręcące się kółko.
   Ikony Metro są statyczne, więc obrót dokładamy sami. */

@keyframes zpas-obrot { to { transform: rotate(360deg); } }

.zpas-wiruje {
    display: inline-block;
    animation: zpas-obrot 1s linear infinite;
}

/* Szanujemy ustawienie systemowe: przy wyłączonych animacjach zostaje sama blokada przycisku. */
@media (prefers-reduced-motion: reduce) {
    .zpas-wiruje { animation: none; }
}

/* Kontener odświeżany w tle (np. tabela pod filtrem działającym na bieżąco). */
.wczytywanie { opacity: .55; transition: opacity .12s ease; pointer-events: none; }

/* ---------- Okno potwierdzenia ----------
   Zastępuje przeglądarkowe confirm(), które wygląda obco i pokazuje adres serwera zamiast
   treści pytania. Natywny <dialog> sam pilnuje warstwy, focusu i zamykania klawiszem Escape. */

/* Pozycjonowanie jawne, bo Metro resetuje `* { margin: 0 }` i kasuje `margin: auto`, którym
   przeglądarka domyślnie centruje <dialog> — bez tego okno ląduje w lewym górnym rogu. */
.zpas-dialog {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    width: min(460px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    overflow: auto;
    border: 1px solid var(--zpas-neutral-200);
    border-radius: 14px;                      /* jak karta — ramki wewnątrz mają mniejszy promień */
    background: #fff;
    color: var(--zpas-neutral-900);
    box-shadow: 0 18px 48px rgba(10, 10, 10, .22);
}

.zpas-dialog::backdrop { background: rgba(10, 10, 10, .45); }

.zpas-dialog-tresc { display: flex; gap: 14px; padding: 24px 24px 4px; }

.zpas-dialog-ikona {
    flex: 0 0 auto;
    width: 40px; height: 40px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--zpas-neutral-100);
    color: var(--zpas-neutral-700);
}
.zpas-dialog-ikona [class^="mif-"] { font-size: 20px; line-height: 1; }

/* Operacja nieodwracalna dostaje czerwień funkcjonalną, nie bordo marki — bordo znaczy
   „główna akcja", a nie „uwaga, to skasuje dane". */
.zpas-dialog--alarm .zpas-dialog-ikona { background: #fbeaea; color: var(--stan-blad); }

.zpas-dialog-tytul {
    margin: 0 0 6px;
    font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em;
}

.zpas-dialog-pytanie {
    margin: 0;
    font-size: 16px; font-weight: 400; line-height: 1.45;
    color: var(--zpas-neutral-600);
}

.zpas-dialog-akcje {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 20px 24px 22px;
}

@media (max-width: 720px) {
    .zpas-dialog-akcje { flex-direction: column-reverse; }
    .zpas-dialog-akcje .button { width: 100%; justify-content: center; }
}

@media (max-width: 720px) {
    .zpas-app-body { padding: 84px 12px 32px; }
    .zpas-topbar-sub { display: none; }
    .zpas-form-row .zpas-field > input,
    .zpas-form-row .zpas-field > select,
    .zpas-form-row .zpas-field--waskie > input,
    .zpas-form-row .zpas-field--waskie > select,
    .zpas-form-row .zpas-field--szerokie > input,
    .zpas-form-row .zpas-field--szerokie > select { width: 100%; }
    .zpas-form-row .zpas-field { flex: 1 1 100%; }
}