/* ============================================================
   tokens.css — motyw wspólny dla wszystkich aplikacji
   Źródło: System Delegacji i Ewidencji (css/base.css)

   Kopiuj ten plik do nowego projektu bez zmian. Kolory dobierane
   pod pracę przy sztucznym świetle w warsztacie i biurze — ciemne
   tło, jeden mocny akcent, niski kontrast między panelami.
   ============================================================ */

:root {
    /* --- paleta bazowa (od najciemniejszego) --- */
    --bg: #111214;              /* tło aplikacji i panelu bocznego */
    --bg-main: #161719;         /* obszar roboczy */
    --panel: #1a1b1e;           /* nagłówki tabel, paski, panele */
    --card: #1e1f22;            /* karty, pola formularzy */
    --row-hover: #232428;       /* wiersz pod kursorem */
    --row-active: #27292d;      /* wiersz wybrany */
    --border: #2a2b2f;
    --border-soft: rgba(42, 43, 47, 0.4);   /* linie wewnątrz tabel */
    --hover-strong: #34353a;

    /* --- akcent: czerwień. Akcja główna i błąd — nic więcej --- */
    --primary: #dc2626;
    --primary-hover: #b91c1c;
    --accent-line: #ef4444;     /* kreska aktywnej zakładki, wyróżnione kwoty */
    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --success: #10b981;
    --warning: #f59e0b;
    --info: #3b82f6;

    /* --- tekst (od najjaśniejszego) --- */
    --text-strong: #ffffff;     /* wartości, nagłówki, treść w polach */
    --text: #e3e4e6;            /* tekst domyślny */
    --text-soft: #d1d5db;       /* komórki tabel */
    --text-dim: #9ca3af;        /* przyciski drugorzędne, opisy */
    --muted: #6b7280;           /* etykiety pól, nagłówki kolumn */

    /* Akcent w zapisie składowych — do poświat i obwódek ognisk,
       gdzie potrzebna jest przezroczystość: rgba(var(--accent-rgb), 0.12). */
    --primary-rgb: 220, 38, 38;
    --accent-rgb: 239, 68, 68;

    --radius-sm: 4px;           /* pola, przyciski */
    --radius-md: 6px;
    --radius-lg: 8px;           /* karty, panele, kafelki */
    --radius-xl: 12px;          /* modale */

    /* --- SKALA TEKSTU ---
       Jedyne dopuszczalne rozmiary czcionki w interfejsie. Bez niej
       w jednej aplikacji potrafiło się zebrać dziewięć rozmiarów
       i nagłówek jednego ekranu był o piksel inny niż następnego. */
    --tekst-xs: 11px;           /* etykiety pól, nagłówki kolumn, liczniki */
    --tekst-sm: 12px;           /* przyciski, komórki tabel */
    --tekst-md: 13px;           /* treść pól formularza */
    --tekst-lg: 15px;           /* nagłówek sekcji (h2) */
    --tekst-xl: 18px;           /* tytuł modułu w pasku górnym */
    --tekst-liczba: 20px;       /* wartość na kafelku (font-mono, bold) */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.65);
    --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.4);   /* element uniesiony */
    --glow-primary: 0 2px 14px rgba(var(--primary-rgb), 0.35);

    /* --- RUCH ---
       Jedna krzywa i dwa czasy na całą aplikację. Krótki dla stanów
       kontrolek (kolor, obwódka), dłuższy dla ruchu paneli i wejścia
       ekranu. Nic w interfejsie nie animuje się dłużej niż 220 ms. */
    --ruch: cubic-bezier(0.4, 0, 0.2, 1);
    --czas-szybki: 140ms;
    --czas-wolny: 220ms;

    --font: Arial, Helvetica, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;

    /* Panel boczny stoi zwinięty do ikon i rozsuwa się po najechaniu. */
    --sidebar-szer: 208px;
    --sidebar-zwiniety: 56px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;

    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
}

/* Nagłówek sekcji: linia pod spodem zaczyna się krótką kreską akcentu.
   Linia jest TŁEM, nie obwódką ani pseudoelementem — nagłówek bywa
   kontenerem flex (nazwa + licznik pozycji), a pseudoelement stałby się
   w nim kolejną kolumną układu i rozepchnął treść. */
h2 {
    font-size: var(--tekst-lg);
    font-weight: 600;
    color: var(--text-strong);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    background-image: linear-gradient(to right,
        var(--accent-line) 0 28px, var(--border) 28px);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 1px;
}

h3 {
    font-size: var(--tekst-md);
    font-weight: 600;
    color: var(--text-soft);
    margin: 16px 0 8px 0;
}

/* --- RUCH: WEJŚCIE EKRANU I OKNA ---
   Tyle wystarczy, żeby oko zauważyło zmianę; więcej byłoby animacją
   dla samej animacji. */
@keyframes wejscie-zakladki {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes wejscie-modala {
    from { opacity: 0; transform: translateY(8px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}

/* Ustawienie systemowe „ogranicz animacje" wyłącza cały ruch. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- PASKI PRZEWIJANIA --- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: #2a2b31;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3a3b42;
}

/* --- SZKIELET --- */
.app-shell {
    display: flex;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--bg);
}

.sidebar {
    width: var(--sidebar-zwiniety);
    flex-shrink: 0;
    position: relative;
    z-index: 30;
}

/* Panel rozsuwa się „nad" treścią, żeby obszar roboczy nie skakał
   przy każdym przejechaniu myszą. */
.sidebar-panel {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-zwiniety);
    background: var(--bg);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 24px 0;
    overflow: hidden;
    transition: width 0.14s ease;
}

.sidebar:hover .sidebar-panel {
    width: var(--sidebar-szer);
    box-shadow: var(--shadow-md);
}

.sidebar .tab-btn span:last-child,
.sidebar-tytul span:first-child,
.sidebar-stopka {
    opacity: 0;
    transition: opacity 0.12s;
    white-space: nowrap;
}

.sidebar:hover .tab-btn span:last-child,
.sidebar:hover .sidebar-tytul span:first-child,
.sidebar:hover .sidebar-stopka {
    opacity: 1;
}

.app-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--bg-main);
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.topbar h1 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-strong);
    margin: 0;
}

.app-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* --- ZAKŁADKI --- */
.tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-left: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    text-align: left;
    color: var(--text-dim);
    transition: background 0.15s, color 0.15s;
}

.tab-btn.active {
    background: #202225;
    color: var(--text-strong);
    border-left-color: var(--accent-line);
}

.tab-btn:hover:not(.active) {
    background: var(--panel);
    color: var(--text-soft);
}

.tab-content {
    display: none;
    background: var(--card);
    border: 1px solid var(--border);
    padding: 24px;
    border-radius: var(--radius-lg);
}

.tab-content.active {
    display: block;
}

/* --- POLA FORMULARZY --- */
label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    font-size: 12px;
    color: var(--muted);
}

input,
select,
textarea {
    width: 100%;
    padding: 9px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-line);
}

/* --- PRZYCISKI ---
   btn-action  — akcja główna, czerwona. Jeden na ekran.
   btn-neutral — wszystko pozostałe.
   btn-danger  — usuwanie.
   btn-ikona   — akcja w wierszu tabeli.                          */

button {
    font-family: inherit;
}

button.btn-action {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, transform 0.05s;
    box-shadow: var(--shadow-sm);
}

button.btn-action:hover { background: var(--primary-hover); }
button.btn-action:active { transform: scale(0.97); }

button.btn-neutral {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text-dim);
    box-shadow: none;
    padding: 9px 16px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

button.btn-neutral:hover {
    background: var(--row-hover);
    color: var(--text-soft);
}

button.btn-danger {
    background: rgba(69, 10, 10, 0.35);
    border: 1px solid rgba(127, 29, 29, 0.45);
    color: #f87171;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    transition: background 0.15s;
}

button.btn-danger:hover { background: rgba(69, 10, 10, 0.6); }

button.btn-ikona {
    background: transparent;
    border: none;
    color: var(--muted);
    line-height: 0;
    padding: 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: color 0.15s;
}

button.btn-ikona:hover { color: var(--text-strong); }
button.btn-ikona.usun:hover { color: #f87171; }

/* --- KAFELKI PODSUMOWANIA --- */
.kafelki {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.kafelek {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}

.kafelek-etykieta {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.kafelek-wartosc {
    font-size: 19px;
    font-weight: bold;
    font-family: var(--font-mono);
    color: var(--text-strong);
}

.kafelek-wartosc.akcent-kwota { color: var(--accent-line); }

/* --- TABELE --- */
.tabela-wrap {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

.tabela-wrap table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.tabela-wrap thead th {
    background: var(--panel);
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    text-align: left;
    padding: 14px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.tabela-wrap td {
    padding: 12px;
    color: var(--text-soft);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
    white-space: nowrap;
}

.tabela-wrap tbody tr:hover { background: var(--row-hover); }

/* Kolumny liczbowe: monospace do prawej — cyfry układają się w pion. */
.kol-liczba {
    font-family: var(--font-mono);
    text-align: right;
    color: var(--text-strong);
}

/* --- PANEL/KARTA --- */
.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
}

/* --- MODALE --- */
.modal-tlo {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
}

.modal-tlo.otwarty { display: block; }

.modal-okno {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    max-width: 560px;
    margin: 60px auto;
    padding: 24px;
}

.modal-okno.waskie { max-width: 380px; }

.modal-stopka {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

/* --- MAŁE ELEMENTY --- */
.tekst-drobny {
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
}

.pusta-lista {
    font-size: 12px;
    color: var(--muted);
    text-align: center;
    padding: 20px;
}

/* --- WĄSKIE OKNO / TELEFON ---
   Aplikacja ma być używalna w oknie postawionym obok innego programu
   i na telefonie: panel boczny kładzie się poziomo u góry, układ
   zwija się do jednej kolumny, pola dostają wysokość dotykową. */
@media (max-width: 820px) {
    .app-shell { flex-direction: column; height: auto; min-height: 100vh; }

    .sidebar { width: 100%; }

    .sidebar-panel {
        position: static;
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 8px;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .sidebar .tab-btn span:last-child,
    .sidebar-tytul span:first-child,
    .sidebar-stopka { opacity: 1; }

    .tab-btn { width: auto; white-space: nowrap; }

    .app-scroll { padding: 14px; }

    input, select, textarea { font-size: 16px; padding: 12px; }   /* 16px = iOS nie przybliża */

    button.btn-action,
    button.btn-neutral { padding: 12px 16px; min-height: 44px; }  /* 44px = minimum dotykowe */

    .kafelki { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}