/* =====================================================================
   Kolejkomat — WSPÓLNY MOTYW / DESIGN SYSTEM
   v2 (FAZA XIII, 2026-08-07) — rozbudowa v1 (FAZA XII, 2026-07-05).

   JEDNO ŹRÓDŁO PRAWDY dla wszystkich ekranów. Zmiana tutaj = zmiana wszędzie.
   Podgląd wszystkich komponentów na żywo: /styleguide.html

   ZASADY:
   • Prefiks `kb-` (Kolejkomat) — nie koliduje z lokalnymi stylami stron.
   • v2 NIE usuwa ani nie zmienia niczego z v1 — pełna wsteczna zgodność
     (6 ekranów już konsumuje kb-btn/kb-card/kb-input/kb-label/kb-pill…).
   • Aliasy --fg/--card/--border/--ok/--bad zapewniają zgodność admin.html/panel.html.
   • Fonty self-hostowane (bez CDN — kiosk działa offline).
   • Kontrast tekstu ≥ 4.5:1 w obu motywach (WCAG 2.1 AA, D-11/D-16).
   ===================================================================== */
@import url('fonts/fonts.css');

/* ---- TOKENY: ciemny (domyślny) ---- */
:root {
  --bg:#0a0e14; --sidebar:#0c1119; --panel:#121823; --panel-2:#182130; --panel-3:#0e141d;
  --line:#1f2a38; --line-strong:#26313f;
  --text:#eef3f9; --muted:#8595a8;
  --accent:#19c37d; --accent-contrast:#06130c; --accent-soft:rgba(25,195,125,.10); --accent-line:rgba(25,195,125,.32);
  --danger:#e5484d; --danger-soft:rgba(229,72,77,.10); --warn:#e8b64a;
  /* aliasy zgodności (panel administratora / starsze ekrany) */
  --fg:var(--text); --card:var(--panel); --border:var(--line); --ok:#3ad17a; --bad:#ff7a7a;
  --font-head:'Sora',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;

  /* — v2: warianty miękkie (tła stanów) — */
  --warn-soft:rgba(232,182,74,.12); --warn-line:rgba(232,182,74,.38);
  --danger-line:rgba(229,72,77,.35);

  /* — v2: SKALA ODSTĘPÓW (baza 4px) — spójny rytm zamiast wartości ad-hoc — */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:56px;

  /* — v2: PROMIENIE — */
  --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:18px; --r-2xl:22px; --r-full:999px;

  /* — v2: CIENIE (w ciemnym motywie głębokie i miękkie) — */
  --sh-1:0 1px 2px rgba(0,0,0,.30);
  --sh-2:0 4px 14px rgba(0,0,0,.28);
  --sh-3:0 14px 34px rgba(0,0,0,.38);

  /* — v2: RUCH — jedno miejsce na czasy animacji — */
  --dur-fast:.12s; --dur-base:.18s; --ease:cubic-bezier(.2,.8,.2,1);

  /* — v2: WARSTWY — */
  --z-pop:60; --z-modal:100;
}
/* ---- TOKENY: jasny ---- */
html[data-theme="light"] {
  --bg:#fbfcfd; --sidebar:#ffffff; --panel:#ffffff; --panel-2:#eaf6f0; --panel-3:#f5f7f9;
  --line:#e5eaf0; --line-strong:#d3dae2;
  --text:#101826; --muted:#5c6b7e;
  --accent:#0f9d63; --accent-contrast:#ffffff; --accent-soft:rgba(15,157,99,.10); --accent-line:rgba(15,157,99,.30);
  --danger:#c81e3a; --danger-soft:rgba(200,30,58,.08); --warn:#b3781a;
  --ok:#0f9d63; --bad:#c0392b;
  /* v2 — w jasnym motywie cienie muszą być delikatniejsze, inaczej robią brud */
  --warn-soft:rgba(179,120,26,.10); --warn-line:rgba(179,120,26,.32);
  --danger-line:rgba(200,30,58,.30);
  --sh-1:0 1px 2px rgba(16,24,38,.06);
  --sh-2:0 4px 14px rgba(16,24,38,.07);
  --sh-3:0 14px 34px rgba(16,24,38,.10);
}

/* ---- RESET / BAZA ---- */
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
.kb-body { margin:0; background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.55; }

/* ---- TYPOGRAFIA ---- */
.kb-h1 { font-family:var(--font-head); font-weight:800; letter-spacing:-.01em; margin:0; }
.kb-h2 { font-family:var(--font-head); font-weight:700; letter-spacing:-.01em; margin:0; }
/* v2: h3 + skala rozmiarów — hierarchia zamiast doraźnych font-size */
.kb-h3 { font-family:var(--font-head); font-weight:700; font-size:17px; letter-spacing:-.005em; margin:0; }
.kb-mono { font-family:var(--font-mono); }
.kb-muted { color:var(--muted); }
.kb-accent { color:var(--accent); }
.kb-sm { font-size:13px; }
.kb-lg { font-size:17px; }
/* v2: nadlinia — mała etykieta nad nagłówkiem (np. „TWOJE STANOWISKO") */
.kb-eyebrow { font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--accent); text-transform:uppercase; }

/* ---- KEYFRAMES ---- */
@keyframes kb-blink { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes kb-pop { from{opacity:0; transform:scale(.94) translateY(8px)} to{opacity:1; transform:none} }
@keyframes kb-glow { 0%,100%{opacity:.35} 50%{opacity:.85} }
.kb-pop { animation:kb-pop .35s var(--ease) both; }

/* =====================================================================
   v2 — UKŁAD (to, co dziś każdy ekran definiuje u siebie jako .wrap/.row)
   ===================================================================== */
.kb-wrap { max-width:var(--kb-max,960px); margin:0 auto; padding:clamp(20px,4vw,40px) clamp(16px,4vw,24px) var(--sp-12); }
.kb-wrap-wide { --kb-max:1400px; }
.kb-stack > * + * { margin-top:var(--kb-gap,var(--sp-4)); }
.kb-row { display:flex; gap:var(--sp-3); flex-wrap:wrap; }
.kb-row-between { display:flex; gap:var(--sp-3); align-items:center; justify-content:space-between; flex-wrap:wrap; }
.kb-grid { display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit,minmax(var(--kb-min,240px),1fr)); }
.kb-divider { border:none; border-top:1px solid var(--line); margin:var(--sp-5) 0; }
.kb-hide { display:none !important; }

/* ---- NAGŁÓWEK STRONY (ikona w kaflu akcentu + tytuł + podtytuł) ---- */
.kb-hdr { display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-5); }
.kb-hdr > div { min-width:0; flex:1; }
.kb-hicon { flex:0 0 auto; width:56px; height:56px; border-radius:var(--r-lg); background:var(--accent-soft);
  border:1px solid var(--accent-line); display:flex; align-items:center; justify-content:center; font-size:28px; }
.kb-sub { color:var(--muted); font-size:14px; margin-top:2px; }

/* ---- KARTA ---- */
.kb-card { background:var(--panel); border:1px solid var(--line); border-radius:clamp(18px,3vw,22px); padding:clamp(22px,4vw,32px); }
/* v2: warianty — cień dodaje głębi, akcent wyróżnia kartę „aktywną”, danger = strefa niebezpieczna */
.kb-card-raised { box-shadow:var(--sh-2); }
.kb-card-accent { border:1.5px solid var(--accent-line); background:var(--panel-3); }
.kb-card-danger { border:1px solid var(--danger-line); background:var(--danger-soft); }
.kb-card-tight { padding:var(--sp-5); border-radius:var(--r-xl); }
.kb-ctitle { font-family:var(--font-head); font-weight:700; font-size:17px; margin:0 0 var(--sp-3); }

/* ---- PIGUŁKA STATUSU ---- */
.kb-pill { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; border-radius:999px; font-weight:700; font-size:14px; line-height:1; background:var(--accent-soft); color:var(--accent); }
.kb-pill.kb-danger { background:var(--danger-soft); color:var(--danger); }
.kb-pill.kb-neutral { background:var(--panel-3); color:var(--muted); }
.kb-pill.kb-warn { background:var(--warn-soft); color:var(--warn); }
.kb-dot { width:9px; height:9px; border-radius:50%; background:currentColor; flex-shrink:0; }
.kb-dot.kb-live { animation:kb-blink 1.8s ease-in-out infinite; }

/* ---- v2: ZNACZNIK STANU (statusy kolejki: WAITING/CALLED/DONE…) ---- */
.kb-badge { display:inline-block; font-size:12.5px; font-weight:700; padding:4px 11px; border-radius:var(--r-full);
  background:var(--panel-3); color:var(--muted); white-space:nowrap; }
.kb-badge-ok { background:var(--accent-soft); color:var(--accent); }
.kb-badge-warn { background:var(--warn-soft); color:var(--warn); }
.kb-badge-danger { background:var(--danger-soft); color:var(--danger); }

/* ---- PRZYCISKI ---- */
.kb-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 22px; border-radius:12px;
  font-family:var(--font-body); font-weight:700; font-size:15px; cursor:pointer; border:1px solid transparent;
  text-decoration:none; transition:filter var(--dur-base), background var(--dur-base), border-color var(--dur-base), transform var(--dur-fast); }
.kb-btn:disabled { opacity:.5; cursor:not-allowed; }
.kb-btn:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
.kb-btn:active:not(:disabled) { transform:translateY(1px); }   /* v2: reakcja na dotyk */
.kb-btn-primary { background:var(--accent); color:var(--accent-contrast); font-weight:800; border:none; }
.kb-btn-primary:hover:not(:disabled) { filter:brightness(1.06); }
.kb-btn-outline { background:var(--panel-3); border:1px solid var(--line-strong); color:var(--text); }
.kb-btn-outline:hover:not(:disabled) { border-color:var(--accent-line); }
.kb-btn-danger { background:var(--danger); color:#fff; font-weight:800; border:none; }
.kb-btn-danger:hover:not(:disabled) { filter:brightness(1.06); }
/* v2: warianty pomocnicze */
.kb-btn-warn { background:var(--warn); color:#3a2e05; font-weight:800; border:none; }
.kb-btn-ghost { background:transparent; border:1px solid transparent; color:var(--muted); }
.kb-btn-ghost:hover:not(:disabled) { background:var(--panel-3); color:var(--text); }
.kb-btn-sm { padding:8px 14px; font-size:13.5px; border-radius:var(--r-sm); }
.kb-btn-lg { padding:17px 28px; font-size:17px; border-radius:var(--r-lg); }
.kb-btn-block { width:100%; }

/* ---- POLA ---- */
.kb-input, .kb-select { width:100%; padding:13px 14px; border-radius:11px; background:var(--panel-3);
  border:1px solid var(--line-strong); color:var(--text); font-family:var(--font-body); font-size:15px; }
.kb-input::placeholder { color:var(--muted); }
.kb-input:focus, .kb-select:focus { outline:2px solid var(--accent-line); outline-offset:1px; border-color:var(--accent); }
.kb-label { display:block; font-size:13px; color:var(--muted); font-weight:600; margin:0 0 6px; }
/* v2: podpowiedź pod polem + pole z błędem */
.kb-hint { font-size:12.5px; color:var(--muted); margin-top:5px; }
.kb-input.kb-invalid, .kb-select.kb-invalid { border-color:var(--danger); }
.kb-field + .kb-field { margin-top:var(--sp-4); }

/* ---- SWITCH (toggle) ---- */
.kb-switch { position:relative; display:inline-block; width:52px; height:30px; flex-shrink:0; }
.kb-switch input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.kb-switch .kb-track { position:absolute; inset:0; background:var(--line-strong); border-radius:999px; transition:background .2s; pointer-events:none; }
.kb-switch .kb-track::before { content:""; position:absolute; width:24px; height:24px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; }
.kb-switch input:checked + .kb-track { background:var(--accent); }
.kb-switch input:checked + .kb-track::before { transform:translateX(22px); }

/* ---- KARTA STATYSTYKI / KPI ---- */
.kb-stat { background:var(--panel-3); border:1px solid var(--line); border-radius:14px; padding:16px 18px; }
.kb-stat-label { font-size:12.5px; color:var(--muted); font-weight:600; }
.kb-stat-val { font-family:var(--font-head); font-weight:800; font-size:clamp(26px,4vw,32px); color:var(--text); line-height:1.1; margin-top:4px; }
.kb-stat-val.kb-accent { color:var(--accent); }

/* ---- CHIP ---- */
.kb-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--panel-3); border:1px solid var(--line); color:var(--text); }

/* ---- TABELA na CSS grid (NIE native <table> — foster parenting) ---- */
.kb-tblgrid { display:grid; width:100%; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.kb-tr { display:grid; grid-template-columns:var(--cols,1fr); gap:10px; padding:11px 14px; align-items:center; }
.kb-tr + .kb-tr { border-top:1px solid var(--line); }
.kb-th { background:var(--panel-3); font-size:12.5px; font-weight:700; color:var(--text); }
.kb-td { font-size:13.5px; color:var(--text); min-width:0; }

/* ---- v2: TABELA NATYWNA (admin.html używa <table>) ---- */
.kb-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.kb-table th { text-align:left; font-weight:700; font-size:12.5px; color:var(--muted); padding:10px 12px;
  border-bottom:1px solid var(--line-strong); white-space:nowrap; }
.kb-table td { padding:11px 12px; border-bottom:1px solid var(--line); color:var(--text); }
.kb-table tr:last-child td { border-bottom:none; }
.kb-table tbody tr { transition:background var(--dur-fast); }
.kb-table tbody tr:hover { background:var(--panel-3); }
.kb-table-scroll { overflow-x:auto; }   /* wąskie ekrany: tabela przewija się sama, strona nie */

/* ---- v2: KOMUNIKATY (#msg w 4 ekranach — błąd/sukces/ostrzeżenie) ---- */
.kb-msg { font-size:14px; padding:11px 14px; border-radius:var(--r-md); margin-top:var(--sp-3); border:1px solid transparent; }
.kb-msg-ok { background:var(--accent-soft); color:var(--accent); border-color:var(--accent-line); }
.kb-msg-err { background:var(--danger-soft); color:var(--danger); border-color:var(--danger-line); }
.kb-msg-warn { background:var(--warn-soft); color:var(--warn); border-color:var(--warn-line); }

/* ---- v2: STAN PUSTY (zamiast gołego „brak danych") ---- */
.kb-empty { text-align:center; padding:var(--sp-10) var(--sp-5); color:var(--muted); }
.kb-empty-ic { font-size:34px; opacity:.55; margin-bottom:var(--sp-2); }

/* ---- PRZEŁĄCZNIK MOTYWU (segmentowany) ---- */
.kb-seg { display:inline-flex; background:var(--panel-3); border:1px solid var(--line); border-radius:10px; padding:3px; gap:3px; }
.kb-seg button { border:none; background:transparent; color:var(--muted); font-family:var(--font-body); font-weight:700; font-size:13px;
  padding:7px 14px; border-radius:7px; cursor:pointer; }
.kb-seg button[aria-pressed="true"] { background:var(--accent); color:var(--accent-contrast); }

/* dostępność: widoczny focus na interaktywnych */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }

/* v2: szanuj ustawienie systemowe „ogranicz ruch” (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}