/* =====================================================================
   Kolejkomat — WARSTWA NOWEGO UI (v2). FAZA XIII, 2026-08-07.

   JAK TO DZIAŁA — i dlaczego jest bezpieczne:
   • Każda reguła jest zawężona do `html[data-ui="v2"]`. Bez tego atrybutu
     plik NIE ROBI NIC — ekran wygląda dokładnie jak dotąd (stary CSS zostaje
     w plikach nietknięty i wygrywa domyślnie).
   • Warstwa celuje w selektory, które ekrany JUŻ MAJĄ (.card/.wrap/.hdr/button/input…),
     więc NIE trzeba zmieniać markupu ani JS. Żaden element nie znika, żadne id
     ani handler nie są ruszane — zmienia się wyłącznie wygląd.
   • Przełącznik: ui-switch.js (róg ekranu) — zapamiętuje wybór w localStorage.
   • Nadpisujemy własności WIZUALNE (kolor, promień, cień, odstęp, ruch), a nie
     układ (display/position/flex-direction), żeby nie rozjechać layoutu stron.

   Podgląd wszystkich komponentów: /styleguide.html
   Tokeny i biblioteka `kb-*`: theme.css (wspólne dla obu wersji UI).
   ===================================================================== */

/* ---- BAZA ---- */
html[data-ui="v2"] body {
  font-family:var(--font-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
html[data-ui="v2"] .wrap { padding-bottom:var(--sp-12); }

/* ---- NAGŁÓWEK STRONY ---- */
/* Tytuł na Sora + wyraźniejsza hierarchia (dotąd bywał w foncie systemowym) */
html[data-ui="v2"] h1,
html[data-ui="v2"] .hdr h1 {
  font-family:var(--font-head);
  font-weight:800;
  letter-spacing:-.015em;
}
html[data-ui="v2"] h2, html[data-ui="v2"] h3 { font-family:var(--font-head); letter-spacing:-.005em; }
html[data-ui="v2"] .sub { color:var(--muted); }
/* Ikona nagłówka w kaflu akcentu (wzorzec z makiet layoucik/) */
html[data-ui="v2"] .hdr .ic,
html[data-ui="v2"] .hicon {
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:var(--r-lg);
  box-shadow:none;
}

/* ---- KARTY: głębia zamiast płaskiego obrysu ---- */
html[data-ui="v2"] .card {
  border-radius:var(--r-2xl);
  border:1px solid var(--line);
  box-shadow:var(--sh-2);
  transition:border-color var(--dur-base), box-shadow var(--dur-base);
}
html[data-ui="v2"] .ctitle,
html[data-ui="v2"] .card > b:first-child {
  font-family:var(--font-head);
  font-weight:700;
  letter-spacing:-.005em;
}

/* ---- PRZYCISKI: spójne promienie, czytelny hover, reakcja na dotyk ---- */
html[data-ui="v2"] button,
html[data-ui="v2"] .btn {
  border-radius:var(--r-md);
  font-family:var(--font-body);
  font-weight:700;
  transition:filter var(--dur-base), background var(--dur-base), border-color var(--dur-base), transform var(--dur-fast);
}
html[data-ui="v2"] button:hover:not(:disabled) { border-color:var(--accent-line); }
html[data-ui="v2"] button:active:not(:disabled) { transform:translateY(1px); }
html[data-ui="v2"] button:focus-visible { outline:2px solid var(--accent-line); outline-offset:2px; }
html[data-ui="v2"] button.primary,
html[data-ui="v2"] button.ok {
  font-weight:800;
  border-color:transparent;
  box-shadow:var(--sh-1);
}
html[data-ui="v2"] button.primary:hover:not(:disabled),
html[data-ui="v2"] button.ok:hover:not(:disabled) { filter:brightness(1.07); }
html[data-ui="v2"] button.bad:hover:not(:disabled),
html[data-ui="v2"] button.warn:hover:not(:disabled) { filter:brightness(1.07); }

/* ---- POLA FORMULARZA ---- */
html[data-ui="v2"] input,
html[data-ui="v2"] select,
html[data-ui="v2"] textarea {
  border-radius:var(--r-md);
  font-family:var(--font-body);
  transition:border-color var(--dur-base), box-shadow var(--dur-base);
}
html[data-ui="v2"] input:focus,
html[data-ui="v2"] select:focus,
html[data-ui="v2"] textarea:focus {
  outline:2px solid var(--accent-line);
  outline-offset:1px;
  border-color:var(--accent);
}
html[data-ui="v2"] label { font-weight:600; letter-spacing:.005em; }

/* ---- TABELE: czytelniejsze wiersze + podświetlenie pod kursorem ---- */
html[data-ui="v2"] table { border-collapse:collapse; }
html[data-ui="v2"] th {
  font-size:12.5px;
  font-weight:700;
  color:var(--muted);
  letter-spacing:.02em;
  border-bottom:1px solid var(--line-strong);
}
html[data-ui="v2"] td { border-bottom:1px solid var(--line); }
html[data-ui="v2"] tbody tr { transition:background var(--dur-fast); }
html[data-ui="v2"] tbody tr:hover { background:var(--panel-3); }

/* ---- KOMUNIKATY / PIGUŁKI / ZNACZNIKI ---- */
html[data-ui="v2"] #msg { border-radius:var(--r-md); font-weight:600; }
html[data-ui="v2"] .pill,
html[data-ui="v2"] .badge { border-radius:var(--r-full); font-weight:700; letter-spacing:.005em; }

/* ---- LINKI ---- */
html[data-ui="v2"] a { text-underline-offset:3px; transition:color var(--dur-fast); }
html[data-ui="v2"] a:hover { filter:brightness(1.12); }

/* ---- KIOSK: kafle usług — mocniejsza reakcja na dotyk ---- */
html[data-ui="v2"] .svc {
  border-radius:var(--r-2xl);
  box-shadow:var(--sh-1);
  transition:transform var(--dur-base) var(--ease), border-color var(--dur-base), box-shadow var(--dur-base);
}
html[data-ui="v2"] .svc:hover:not(.unavail) { box-shadow:var(--sh-3); }
html[data-ui="v2"] .svc .badge { border-radius:var(--r-xl); }

/* ---- PANEL: bieżący numer / karta stanowiska ---- */
html[data-ui="v2"] .cur .num { letter-spacing:-.02em; }

/* ---- ADMIN: sidebar / topbar ---- */
html[data-ui="v2"] .topbar { backdrop-filter:saturate(1.1); }
html[data-ui="v2"] .nav a,
html[data-ui="v2"] .navlink { border-radius:var(--r-sm); transition:background var(--dur-fast), color var(--dur-fast); }

/* =====================================================================
   STRONA STARTOWA (index.html) — jedyny ekran sprzed FAZY XII.
   Ma zaszyte na sztywno kolory z poprzedniej palety (niebieski #4aa8ff,
   tła #0f1420/#1a2030) i font systemowy, więc reguły ogólne go nie zmieniają
   — wymaga własnych nadpisań na tokeny. W trybie „Obecny” zostaje bez zmian.
   ===================================================================== */
html[data-ui="v2"] body { background:var(--bg); color:var(--text); }
html[data-ui="v2"] .sub, html[data-ui="v2"] .note, html[data-ui="v2"] a.app .d { color:var(--muted); }
html[data-ui="v2"] h2 { color:var(--muted); font-size:12px; letter-spacing:.12em; }
html[data-ui="v2"] .pill {
  background:var(--accent-soft); color:var(--accent); border:1px solid var(--accent-line);
}
html[data-ui="v2"] .card,
html[data-ui="v2"] a.app {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-xl);
}
html[data-ui="v2"] a.app {
  box-shadow:var(--sh-1);
  transition:border-color var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base);
}
html[data-ui="v2"] a.app:hover { border-color:var(--accent-line); box-shadow:var(--sh-2); transform:translateY(-2px); }
html[data-ui="v2"] a.app b { color:var(--accent); font-family:var(--font-head); font-weight:700; }
html[data-ui="v2"] code { color:var(--accent); font-family:var(--font-mono); }
html[data-ui="v2"] .row { border-bottom:1px solid var(--line); }
html[data-ui="v2"] .ok { color:var(--accent); }
html[data-ui="v2"] .wip { color:var(--warn); }

/* ---- Szanuj „ogranicz ruch” (WCAG 2.3.3) ---- */
@media (prefers-reduced-motion: reduce) {
  html[data-ui="v2"] * { transition-duration:.01ms !important; animation-duration:.01ms !important; }
}