/* ============================================================================
   LOKALKA · Panel restauracji — KDS DESIGN SYSTEM (neutral / pro)
   Kitchen Display System theme. Nadpisuje /css/panel.min.css (Tailwind compiled).
   Reguły twarde (spec Adrian 2026-06-02):
   - Baza chłodny neutral #F4F5F7 + grafit #111827. Zero ciepłych/editorial tonów.
   - Brand #2C5530 TYLKO jako chrome (logo, header, aktywna nav, focus). Nie tło, nie status.
   - Status = ZAWSZE kolor + ikona + etykieta (daltonizm cz-z, kuchnia).
   - Optymalizacja: rzut oka, niska męczliwość, brak pomyłek. Nie pod „ładność".
   Dwie gęstości: body.kds-comfort (tablet/lada) / body.kds-compact (ekran kuchni).
   ========================================================================== */

/* ---------- 1. TOKENY (light) ---------- */
:root {
  /* powierzchnie */
  --kds-bg:        #F5F6F9;   /* tło aplikacji — chłodny neutral, lekko zmiękczony */
  /* miększe, przyjemniejsze tło: delikatny gradient + subtelna brand-poświata (świeże/jedzenie) */
  --kds-bg-grad:   radial-gradient(1100px 560px at 100% -5%, rgba(44,85,48,.06) 0%, rgba(44,85,48,0) 58%),
                   radial-gradient(900px 500px at -10% 110%, rgba(44,85,48,.04) 0%, rgba(44,85,48,0) 60%),
                   linear-gradient(177deg, #FAFBFD 0%, #F2F4F8 52%, #ECEFF4 100%);
  --kds-surface:   #FFFFFF;   /* karty */
  --kds-surface-2: #FBFBFD;   /* kolumny / subtelnie podniesione */
  --kds-surface-3: #EEF0F3;   /* muted wypełnienia */
  /* tekst */
  --kds-text:      #111827;   /* grafit */
  --kds-text-2:    #374151;
  --kds-text-muted:#6B7280;
  --kds-text-faint:#9AA1AC;
  /* linie */
  --kds-border:    #E4E7EC;
  --kds-border-2:  #D5D9E0;
  /* BRAND chrome (tylko nagłówek, logo, aktywna nav, focus) */
  --kds-brand:     #2C5530;
  --kds-brand-700: #244626;
  --kds-brand-50:  #EAF0EA;
  --kds-brand-tint:#E9F0EA;   /* tło aktywnej nawigacji */
  --kds-on-brand:  #F4F7F2;
  --kds-focus:     #2C5530;
  /* PRIMARY akcja (neutralny grafit — nie brand, nie status) */
  --kds-primary:   #1F2937;
  --kds-primary-700:#111827;
  /* STATUSY semantyczne (KDS) */
  --kds-new:       #1D4ED8;  --kds-new-bg:   #EAF1FF;  --kds-new-bd:   #BCD2FF;
  --kds-prep:      #4B5563;  --kds-prep-bg:  #F1F3F6;  --kds-prep-bd:  #DDE1E8;
  --kds-warn:      #B45309;  --kds-warn-bg:  #FEF3C7;  --kds-warn-bd:  #FAD980;
  --kds-late:      #DC2626;  --kds-late-bg:  #FEE2E2;  --kds-late-bd:  #FCA5A5;
  --kds-ready:     #15803D;  --kds-ready-bg: #DCFCE7;  --kds-ready-bd: #86EFAC; /* funkcjonalna zieleń, ≠ brand */
  --kds-cancel:    #9B1C1C;  --kds-cancel-bg:#F3F4F6;  --kds-cancel-bd:#E5E7EB;
  --kds-note:      #1D4ED8;  --kds-note-bg:  #EAF1FF;
  --kds-allergen:  #DC2626;  --kds-allergen-bg:#FEE2E2;
  --kds-multi:     #7C3AED;  --kds-multi-bg: #F3E8FF;  --kds-multi-bd: #D8B4FE;
  /* elevation — płaska, subtelna (nie „AI gradient") */
  --kds-e1: 0 1px 2px rgba(17,24,39,.05), 0 1px 1px rgba(17,24,39,.04);
  --kds-e2: 0 1px 3px rgba(17,24,39,.07), 0 4px 10px rgba(17,24,39,.05);
  --kds-e3: 0 8px 28px rgba(17,24,39,.12);
  /* density (domyślnie comfort) */
  --kds-radius:   12px;
  --kds-radius-sm:9px;
  --kds-pad:      1rem;
  --kds-pad-card: 0.85rem;
  --kds-gap:      1rem;
  --kds-fs-base:  15px;
  --kds-card-mb:  0.55rem;
}
:root { --kds-brand-50: #EAF0EA; }

/* ---------- 2. DARK (kuchnia / niska męczliwość) ---------- */
html.dark {
  --kds-bg:        #0F1115;
  --kds-bg-grad:   none;      /* ciemny tryb = płaskie tło (niska męczliwość) */
  --kds-surface:   #1A1D24;
  --kds-surface-2: #15181E;
  --kds-surface-3: #232733;
  --kds-text:      #F2F4F7;
  --kds-text-2:    #D4D8DF;
  --kds-text-muted:#9AA2AE;
  --kds-text-faint:#6B7280;
  --kds-border:    #2A2F3A;
  --kds-border-2:  #3A4150;
  --kds-brand:     #4F7E55;        /* rozjaśniony brand na ciemnym chrome */
  --kds-brand-700: #3C6342;
  --kds-brand-tint:#1C2A1E;
  --kds-on-brand:  #F4F7F2;
  --kds-focus:     #6FA776;
  --kds-primary:   #374151;
  --kds-primary-700:#4B5563;
  --kds-new:       #93B8FF;  --kds-new-bg:   #16233D;  --kds-new-bd:   #2A4470;
  --kds-prep:      #B7BECB;  --kds-prep-bg:  #21262F;  --kds-prep-bd:  #353C49;
  --kds-warn:      #FBBF24;  --kds-warn-bg:  #2E2410;  --kds-warn-bd:  #4D3D12;
  --kds-late:      #FB7185;  --kds-late-bg:  #34161B;  --kds-late-bd:  #5E2630;
  --kds-ready:     #5BD98A;  --kds-ready-bg: #11291C;  --kds-ready-bd: #1F4A31;
  --kds-cancel:    #F0A6A6;  --kds-cancel-bg:#21262F;  --kds-cancel-bd:#353C49;
  --kds-note:      #93B8FF;  --kds-note-bg:  #16233D;
  --kds-allergen:  #FB7185;  --kds-allergen-bg:#34161B;
  --kds-multi:     #C4A2F5;  --kds-multi-bg: #241836;  --kds-multi-bd: #43306A;
  --kds-e1: 0 1px 2px rgba(0,0,0,.45);
  --kds-e2: 0 2px 6px rgba(0,0,0,.5), 0 6px 16px rgba(0,0,0,.4);
  --kds-e3: 0 10px 30px rgba(0,0,0,.6);
}

/* ---------- 3. DENSITY ---------- */
body.kds-compact {
  --kds-radius:   8px;
  --kds-radius-sm:6px;
  --kds-pad:      0.6rem;
  --kds-pad-card: 0.55rem;
  --kds-gap:      0.6rem;
  --kds-fs-base:  13px;
  --kds-card-mb:  0.4rem;
}
body.kds-compact { line-height: 1.35; }
body.kds-compact main { padding-top: 0.85rem !important; padding-bottom: 0.85rem !important; }
/* compact: więcej zamówień na ekranie — zwężamy padding kart i list */
body.kds-compact .rounded-2xl,
body.kds-compact .rounded-xl { border-radius: var(--kds-radius) !important; }
body.kds-compact .p-3 { padding: var(--kds-pad-card) !important; }
body.kds-compact .gap-4 { gap: var(--kds-gap) !important; }
body.kds-compact .py-6 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
body.kds-compact .text-2xl { font-size: 1.4rem !important; }
body.kds-compact .text-3xl { font-size: 1.6rem !important; }
/* compact kanban: pokaż 5 kolumn na szerokim ekranie kuchni gdy się zmieści */
@media (min-width: 1536px) {
  body.kds-compact .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ---------- 4. BAZA ---------- */
body {
  font-family: 'Inter Variable', 'Inter', system-ui, -apple-system, sans-serif !important;
  background-color: var(--kds-bg) !important;
  background-image: var(--kds-bg-grad) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  color: var(--kds-text) !important;
  font-size: var(--kds-fs-base);
  -webkit-font-smoothing: antialiased;
}
/* jeden intencjonalny font roboczy — bez editorial serif w KDS. display = Inter zwarty.
   Wyjątek brand-chrome: .font-brand (Fraunces) TYLKO na tytule logowania / lockupie marki
   (hybryda 2026-06-11 — robocze powierzchnie KDS zostają na Interze wg specu). */
.font-display { font-family: 'Inter Variable', 'Inter', system-ui, sans-serif !important; letter-spacing: -0.012em; }
.font-brand { font-family: 'Fraunces Variable', Fraunces, Georgia, serif !important; letter-spacing: -0.01em; }
.tabular, .tabular-nums { font-variant-numeric: tabular-nums; }
/* liczby/ceny/timery zawsze tabular (zero skakania layoutu) */

*:focus-visible {
  outline: 2px solid var(--kds-focus) !important;
  outline-offset: 2px;
  border-radius: 5px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 5. REMAP powierzchni (Tailwind compiled → tokeny) ---------- */
.bg-white       { background-color: var(--kds-surface) !important; }
.bg-sand-50     { background-color: var(--kds-bg) !important; }
.bg-sand-100    { background-color: var(--kds-surface-2) !important; }
.bg-ink-50      { background-color: var(--kds-surface-2) !important; }
.bg-ink-100     { background-color: var(--kds-surface-3) !important; }
.hover\:bg-sand-50:hover  { background-color: var(--kds-surface-2) !important; }
.hover\:bg-ink-50:hover   { background-color: var(--kds-surface-2) !important; }
.hover\:bg-ink-100:hover  { background-color: var(--kds-surface-3) !important; }

/* tekst */
.text-ink-900 { color: var(--kds-text) !important; }
.text-ink-700 { color: var(--kds-text-2) !important; }
.text-ink-500 { color: var(--kds-text-muted) !important; }
/* a11y (D5): text-ink-300 (puste stany „Brak …", drobny tekst) na --kds-text-faint dawało
   2.60:1 (light) / 3.49:1 (dark) = WCAG AA fail. Mapujemy na --kds-text-muted → 4.83:1 / 6.55:1.
   Ikony/uchwyty z tą klasą (aria-hidden) tylko nieco ciemnieją — bez regresji wyglądu. */
.text-ink-300 { color: var(--kds-text-muted) !important; }

/* linie */
.border-ink-100 { border-color: var(--kds-border) !important; }
.divide-ink-100 > * + * { border-color: var(--kds-border) !important; }

/* elevation */
.shadow-e1 { box-shadow: var(--kds-e1) !important; }
.shadow-e2 { box-shadow: var(--kds-e2) !important; }
.shadow-e3 { box-shadow: var(--kds-e3) !important; }

/* ---------- 6. BRAND chrome + rozdzielenie PRIMARY / DANGER ---------- */
/* Spec: brand #2C5530 TYLKO chrome (logo/header/aktywna nav/focus). NIE tło, NIE status.
   Stary `tomato` był przeciążony (primary + danger). Rozdzielamy:
   - solid fill (bg-tomato-700/800/900) = PRIMARY akcja  -> grafit (neutral, nie brand, nie status)
   - tekst/border (text/border-tomato) = DESTRUCTIVE/DANGER -> czerwień
   - aktywna NAV (bg-tomato-50 + text-tomato-700) -> brand green (wyjątek, wyżej specyficzność). */
header.bg-white { background-color: var(--kds-surface) !important; }

/* PRIMARY (grafit) */
.bg-tomato-700, .bg-tomato-800, .bg-tomato-900 { background-color: var(--kds-primary) !important; color: #fff !important; }
.hover\:bg-tomato-800:hover, .hover\:bg-tomato-700:hover { background-color: var(--kds-primary-700) !important; }
.ring-tomato-700 { --tw-ring-color: var(--kds-primary) !important; }

/* DANGER (czerwień) — tekst/ikony/bordery destrukcyjne + eskalacja SLA */
.text-tomato-700, .text-tomato-800 { color: var(--kds-late) !important; }
.bg-tomato-100 { background-color: var(--kds-late-bg) !important; }
.bg-tomato-200 { background-color: var(--kds-late-bd) !important; }
.border-tomato-200, .border-tomato-300, .border-tomato-700 { border-color: var(--kds-late-bd) !important; }
.hover\:bg-tomato-50:hover, .hover\:bg-tomato-100:hover, .hover\:bg-tomato-200:hover { background-color: var(--kds-late-bg) !important; }

/* aktywna NAV = brand (wyższa specyficzność niż .text-tomato-700) */
header nav .bg-tomato-50 { background-color: var(--kds-brand-tint) !important; }
header nav .text-tomato-700, header nav button.bg-tomato-50 { color: var(--kds-brand) !important; }
/* nie-nawigacyjne bg-tomato-50 (np. aktywne zakładki ustawień) -> brand tint też (chrome) */
.bg-tomato-50 { background-color: var(--kds-brand-tint) !important; }
/* a11y (D5): w DARK aktywna nav = brand #4F7E55 na tincie #1C2A1E dawała tylko 3.18:1 (WCAG AA fail).
   Rozjaśniamy TEKST aktywnej zakładki do jaśniejszej zieleni forest (= dark --kds-focus #6FA776) → 5.33:1.
   Light bez zmian (brand #2C5530 na #E9F0EA = 7.40:1). Wygląd „ciepły brand/forest" zachowany. */
html.dark header nav .text-tomato-700,
html.dark header nav button.bg-tomato-50 { color: #6FA776 !important; }

/* gradienty (login header) → płaski grafit/brand chrome */
.bg-gradient-to-br.from-tomato-700, .from-tomato-700 { background-image: none !important; background-color: var(--kds-brand) !important; }
.to-tomato-800 { --tw-gradient-to: var(--kds-brand) !important; }
/* focus ring → brand */
.focus\:ring-sage-300:focus, .ring-sage-300 { --tw-ring-color: var(--kds-focus) !important; }

/* ---------- 6b. BLUE → status NEW (kolumna „Nowe", badge nowych zamówień) ---------- */
.bg-blue-50, .bg-blue-100 { background-color: var(--kds-new-bg) !important; }
.bg-blue-500, .bg-blue-600, .bg-blue-700 { background-color: var(--kds-new) !important; color:#fff !important; }
.text-blue-700, .text-blue-800 { color: var(--kds-new) !important; }
.border-blue-200, .border-blue-300, .border-blue-500 { border-color: var(--kds-new-bd) !important; }

/* ---------- 6c. SLA badge (kolor+ikona+label; eskalacja deterministyczna) ---------- */
.kds-sla-ok   { background: var(--kds-surface-3); color: var(--kds-text-2); }
.kds-sla-warn { background: var(--kds-warn-bg);   color: var(--kds-warn); }
.kds-sla-late { background: var(--kds-late);      color: #fff; }

/* ---------- 7. STATUSY semantyczne ---------- */
/* sage (sukces/„gotowe"/liczby dodatnie) → funkcjonalna zieleń ready (≠ brand) */
.bg-sage-50  { background-color: var(--kds-ready-bg) !important; }
.bg-sage-100 { background-color: var(--kds-ready-bg) !important; }
.bg-sage-700 { background-color: var(--kds-ready) !important; }
.text-sage-700, .text-sage-800 { color: var(--kds-ready) !important; }
.border-sage-200, .border-sage-300 { border-color: var(--kds-ready-bd) !important; }
.hover\:bg-sage-50:hover { background-color: var(--kds-ready-bg) !important; }
/* a11y (D5): aktywny chip „czas przygotowania" = .bg-sage-700.text-white (solid fill, biały tekst).
   W DARK --kds-ready to jasna mięta #5BD98A → biały na niej = 1.79:1 (WCAG AA fail).
   Solid-fill z białym tekstem wymaga ciemniejszej zieleni — używamy #15803D (= light ready) → 5.02:1.
   Light bez zmian (już 5.02:1). border-sage-700 dociągamy kosmetycznie do tej samej zieleni. */
html.dark .bg-sage-700 { background-color: #15803D !important; }
.border-sage-700 { border-color: #15803D !important; }
/* amber (ostrzeżenie / ETA zbliża się) */
.bg-amber-50  { background-color: var(--kds-warn-bg) !important; }
.bg-amber-100 { background-color: var(--kds-warn-bg) !important; }
.bg-amber-200 { background-color: var(--kds-warn-bd) !important; }
.bg-amber-500 { background-color: var(--kds-warn) !important; }
.bg-amber-700, .bg-amber-800 { background-color: var(--kds-warn) !important; color: #fff !important; }
.text-amber-700, .text-amber-800 { color: var(--kds-warn) !important; }
.border-amber-200, .border-amber-300 { border-color: var(--kds-warn-bd) !important; }
.hover\:bg-amber-100:hover, .hover\:bg-amber-200:hover { background-color: var(--kds-warn-bd) !important; }

/* ---------- 8. KOMPONENTY KDS (status pill = kolor+ikona+label) ---------- */
.kds-badge {
  display: inline-flex; align-items: center; gap: .32em;
  font-size: .72rem; font-weight: 700; line-height: 1;
  padding: .28em .56em; border-radius: 999px;
  border: 1px solid transparent; white-space: nowrap;
  letter-spacing: .01em;
}
.kds-badge .kds-ico { width: 1em; height: 1em; flex: 0 0 auto; }
.kds-badge--new    { color: var(--kds-new);    background: var(--kds-new-bg);    border-color: var(--kds-new-bd); }
.kds-badge--prep   { color: var(--kds-prep);   background: var(--kds-prep-bg);   border-color: var(--kds-prep-bd); }
.kds-badge--warn   { color: var(--kds-warn);   background: var(--kds-warn-bg);   border-color: var(--kds-warn-bd); }
.kds-badge--late   { color: var(--kds-late);   background: var(--kds-late-bg);   border-color: var(--kds-late-bd); }
.kds-badge--ready  { color: var(--kds-ready);  background: var(--kds-ready-bg);  border-color: var(--kds-ready-bd); }
.kds-badge--cancel { color: var(--kds-cancel); background: var(--kds-cancel-bg); border-color: var(--kds-cancel-bd); opacity: .85; }
.kds-badge--multi  { color: var(--kds-multi);  background: var(--kds-multi-bg);  border-color: var(--kds-multi-bd); }
.kds-badge--allergen{color: var(--kds-allergen);background: var(--kds-allergen-bg); border-color: var(--kds-late-bd); }
.kds-badge--note   { color: var(--kds-note);   background: var(--kds-note-bg);   border-color: var(--kds-new-bd); }

/* status „kropka" w nagłówkach kolumn (kolor + obok ikona + label) */
.kds-dot { display:inline-block; width:.6rem; height:.6rem; border-radius:999px; flex:0 0 auto; }
.kds-dot--new   { background: var(--kds-new); }
.kds-dot--prep  { background: var(--kds-prep); }
.kds-dot--warn  { background: var(--kds-warn); }
.kds-dot--late  { background: var(--kds-late); }
.kds-dot--ready { background: var(--kds-ready); }

/* lewy pasek statusu na karcie zamówienia — szybki rzut oka */
.kds-card { position: relative; }
.kds-card--new   { border-left: 4px solid var(--kds-new)  !important; }
.kds-card--warn  { border-left: 4px solid var(--kds-warn) !important; }
.kds-card--late  { border-left: 4px solid var(--kds-late) !important; }
.kds-card--prep  { border-left: 4px solid var(--kds-prep) !important; }
.kds-card--ready { border-left: 4px solid var(--kds-ready)!important; }

/* SLA przekroczony — pulsująca czerwień (z respektem reduced-motion) */
@keyframes kdsPulseLate {
  0%,100% { box-shadow: 0 0 0 0 rgba(220,38,38,.0); }
  50%     { box-shadow: 0 0 0 3px rgba(220,38,38,.35); }
}
.kds-late-pulse { animation: kdsPulseLate 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .kds-late-pulse { animation: none; outline: 2px solid var(--kds-late); } }

/* ikona inline (SVG) — domyślne wymiary, dziedziczy kolor */
.kds-ico { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.15em; stroke: currentColor; fill: none; flex: 0 0 auto; }
.kds-ico--lg { width: 1.5rem; height: 1.5rem; }
/* ikona w kafelkach health — neutralna, stonowana */
.kds-tile-ico { width: 1.15rem; height: 1.15rem; color: var(--kds-text-muted); stroke: currentColor; fill: none; }

/* ---------- 9. CHROME: nav / topbar / kafelki ---------- */
nav button.bg-tomato-50 { box-shadow: inset 0 -2px 0 var(--kds-brand); }
/* przyciski okrągłe topbar (toggle) — spójne, neutralne */
header .rounded-full.bg-ink-100 { background: var(--kds-surface-3) !important; color: var(--kds-text-2) !important; }
/* kafelki health-strip — czyste, równy rytm */
.kds-tile { background: var(--kds-surface) !important; border: 1px solid var(--kds-border); border-radius: var(--kds-radius); }

/* tabele/listy — wiersze hover */
tr:hover > td { background: var(--kds-surface-2); }

/* karty ogólne: delikatna ramka zamiast samego cienia (mniej „floaty AI") */
.bg-white.rounded-2xl, .bg-white.rounded-3xl, .bg-white.rounded-xl { border: 1px solid var(--kds-border); }

/* ---------- 10. zachowane z oryginału (kiosk / sortable / a11y) ---------- */
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
body.kiosk .kiosk-hide { display: none !important; }
body.kiosk main { padding-top: .5rem; padding-bottom: .5rem; max-width: 100% !important; }
body.kiosk { font-size: 17px; }
body.kiosk .text-xs { font-size: .85rem; }
body.kiosk .text-sm { font-size: 1rem; }
body.kiosk h3 { font-size: 1.15rem; }
.sortable-ghost { opacity: .4; background-color: var(--kds-new-bg) !important; }
.sortable-drag  { opacity: .9; box-shadow: var(--kds-e3); }
.drag-handle { cursor: grab; } .drag-handle:active { cursor: grabbing; }
@keyframes flashRequired { 0%,100%{box-shadow:0 0 0 0 rgba(180,83,9,0);} 25%,65%{box-shadow:0 0 0 3px rgba(180,83,9,.7);} }
.flash-required { animation: flashRequired 1.3s ease-in-out 1; }
@keyframes kdsFadeUp { from { opacity:0; transform: translateY(4px); } to { opacity:1; transform:none; } }
.animate-fade-slide-up { animation: kdsFadeUp .22s ease-out; }
@keyframes kdsPulseNew { 0%,100%{opacity:1;} 50%{opacity:.55;} }
.animate-pulse-tomato { animation: kdsPulseNew 1.4s ease-in-out infinite; }
.animate-pulse { animation: kdsPulseNew 1.6s ease-in-out infinite; }

/* ---------- 8. BRAND CHROME 2026-06-11 (hybryda — spójność z marką, KDS roboczy nietknięty) ----------
   a) Gradienty `from/to-tomato-*` (login „Lokalka Partner", karta podsumowania) były POZA remapem
      sekcji 6 (remap łapał tylko bg-*) → na żywo wyciekał karmazyn #C41E3A sprzed rebrandu.
      Brand = forest #2C5530 (logo/B2C od 2026-05-22). Chrome/login = dozwolone miejsce brandu wg specu.
   b) Frosted sticky header — matowa prześwitująca belka jak panele gps (czytelność: fallback solid). */
.from-tomato-700 { --tw-gradient-from: #2C5530 var(--tw-gradient-from-position) !important; }
.to-tomato-800   { --tw-gradient-to:   #1F3D23 var(--tw-gradient-to-position) !important; }
.from-tomato-100 { --tw-gradient-from: #E9F0EA var(--tw-gradient-from-position) !important; }
.to-tomato-300   { --tw-gradient-to:   #A9C5AC var(--tw-gradient-to-position) !important; }
.text-tomato-700.text-4xl { color: var(--kds-brand) !important; } /* ikona na placeholderze zdjęcia */

@supports (backdrop-filter: blur(1px)) {
  header.sticky.top-0 {
    background-color: color-mix(in srgb, var(--kds-surface) 70%, transparent) !important;
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* ============================================================================
   REDESIGN 2026-06-16 · „premium-tech" (wzór: bialystok.nadajesz.pl) + SIDEBAR
   Kierunek: grafit (sidebar/chrome) + akcent CZERWONY, chłodne prawie-białe płótno.
   AKCENT zieleń → czerwień (unifikacja z adminem + wzorem). Zieleń ZOSTAJE jako status „gotowe".
   Statusy KDS (kolor+ikona+etykieta) nietknięte. Additive override — usunięcie = stary look.
   ========================================================================== */

/* ---- 1. Tokeny ---- */
:root {
  /* sidebar/chrome grafit (panel restauracji nie miał ciemnego chrome — dodajemy dla sidebara) */
  --kds-chrome:    #1B1E24;
  --kds-chrome-700:#15171C;
  --kds-on-brand:  #F4F7F2;
  /* AKCENT: zieleń → czysta czerwień (aktywna nawigacja, focus, linki) */
  --kds-brand:     #C81212;
  --kds-brand-700: #A30F0F;
  --kds-brand-50:  #FEF2F2;
  --kds-brand-tint:#FDE8E8;
  --kds-focus:     #C81212;
  /* płótno chłodne prawie-białe (spójne z adminem/wzorem) */
  --kds-bg:        #FCFCFE;
  --kds-bg-grad:   radial-gradient(58rem 40rem at 100% -12%, rgba(40,46,120,.05) 0%, rgba(40,46,120,0) 60%),
                   radial-gradient(50rem 34rem at -12% 112%, rgba(200,18,18,.03) 0%, rgba(200,18,18,0) 60%),
                   linear-gradient(180deg, #FDFDFF 0%, #F6F7FC 100%);
  --kds-surface:   #FFFFFF;
  --kds-surface-2: #F5F6FB;
  --kds-surface-3: #ECEEF6;
  --kds-text:      #15173A;
  --kds-text-2:    #3A3F58;
  --kds-text-muted:#5C5F7A;
  --kds-text-faint:#9498AE;
  --kds-border:    #E4E6F0;
  --kds-border-2:  #D5D8E6;
  --kds-e1: 0 1px 2px rgba(20,23,58,.06), 0 1px 1px rgba(20,23,58,.04);
  --kds-e2: 0 1px 3px rgba(20,23,58,.08), 0 10px 24px rgba(20,23,58,.06);
  --kds-e3: 0 18px 48px rgba(20,23,58,.16);
  --kds-radius: 14px; --kds-radius-sm: 10px;
  --lk-sidebar-w: 256px;
}
html.dark {
  --kds-chrome:    #15171C;
  --kds-chrome-700:#101216;
  --kds-brand:     #FB3B3B;
  --kds-brand-700: #E11D1D;
  --kds-brand-tint:#2E1818;
  --kds-focus:     #FB3B3B;
  --kds-bg-grad:   radial-gradient(58rem 40rem at 100% -12%, rgba(120,130,255,.06) 0%, rgba(120,130,255,0) 60%),
                   radial-gradient(50rem 34rem at -12% 112%, rgba(251,59,59,.05) 0%, rgba(251,59,59,0) 60%);
}

/* login chrome: zielony → grafit (spójny z adminem); karta podsumowania → neutralna chłodna */
.from-tomato-700 { --tw-gradient-from: var(--kds-chrome) var(--tw-gradient-from-position) !important; }
.to-tomato-800   { --tw-gradient-to:   var(--kds-chrome-700) var(--tw-gradient-to-position) !important; }
/* sekcja 6 (l.213) ma `.bg-gradient-to-br.from-tomato-700` (2 klasy → wyższa specyficzność) z flat
   background-color: var(--kds-brand) → po zmianie akcentu na czerwień login świecił czerwienią.
   Nadpisujemy tą samą specyficznością (later-wins) na grafit chrome — spójnie z adminem. */
.bg-gradient-to-br.from-tomato-700 { background-image: none !important; background-color: var(--kds-chrome) !important; }
.from-tomato-100 { --tw-gradient-from: #EEF0F6 var(--tw-gradient-from-position) !important; }
.to-tomato-300   { --tw-gradient-to:   #DCE0EC var(--tw-gradient-to-position) !important; }

/* ---- 2. Typografia: nagłówki = Bricolage (KDS liczby/timery zostają Inter tabular) ---- */
.font-display, h1, h2 {
  font-family: 'Bricolage Grotesque','Inter Variable',Inter,system-ui,-apple-system,sans-serif !important;
  letter-spacing: -0.02em;
}
.font-brand {
  font-family: 'Bricolage Grotesque','Inter Variable',Inter,system-ui,sans-serif !important;
  letter-spacing: -0.015em; font-weight: 700;
}

/* ---- 3. APP SHELL + SIDEBAR (kiosk chowa sidebar/topbar) ---- */
.lk-shell { min-height: 100vh; }
@media (min-width:1024px){ .lk-shell { padding-left: var(--lk-sidebar-w); } }
body.kiosk .lk-shell { padding-left: 0 !important; }
body.kiosk .lk-sidebar, body.kiosk .lk-topbar, body.kiosk .lk-backdrop { display:none !important; }

.lk-sidebar{
  position: fixed; top:0; left:0; bottom:0; width: var(--lk-sidebar-w); z-index: 60;
  display:flex; flex-direction:column;
  background: var(--kds-chrome); color: var(--kds-on-brand);
  border-right: 1px solid rgba(255,255,255,.07);
  transform: translateX(-100%); transition: transform .28s cubic-bezier(.22,1,.36,1);
}
@supports (backdrop-filter: blur(1px)){
  .lk-sidebar{ background: color-mix(in srgb, var(--kds-chrome) 88%, transparent);
    backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); }
}
.lk-sidebar.open{ transform:none; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
@media (min-width:1024px){ .lk-sidebar{ transform:none; } }

.lk-sidebar__brand{ display:flex; align-items:center; gap:.6rem; padding: 1.05rem 1rem .85rem; width:100%; cursor:pointer; background:transparent; border:0; text-align:left; }
.lk-sidebar__brand:hover .lk-brand-meta b{ text-decoration:underline; }
.lk-logo{ background:#FFFFFF; border-radius:.55rem; padding:.28rem .55rem; box-shadow:0 2px 8px rgba(0,0,0,.25); display:inline-flex; flex:0 0 auto; }
.lk-logo img{ height:24px; width:auto; max-width:118px; display:block; }
.lk-brand-meta{ min-width:0; }
.lk-brand-meta b{ font-size:.9rem; font-weight:700; color:#fff; display:block; line-height:1.15; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lk-brand-meta span{ font-size:.66rem; color:rgba(255,255,255,.5); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.lk-nav{ flex:1 1 auto; overflow-y:auto; padding:.4rem .55rem 1rem; display:flex; flex-direction:column; gap:2px; }
.lk-nav::-webkit-scrollbar{ width:8px; } .lk-nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:99px; }
.lk-nav-link{
  position:relative; display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.58rem .7rem; border-radius:11px; border:0; background:transparent;
  font-size:.875rem; font-weight:500; color:rgba(255,255,255,.66);
  text-align:left; transition: background .15s, color .15s; cursor:pointer; white-space:nowrap;
}
.lk-nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.lk-nav-link .lk-nav-ico{ width:1.2rem; flex:0 0 auto; font-size:1.02rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; opacity:.92; }
.lk-nav-link .lk-nav-label{ overflow:hidden; text-overflow:ellipsis; }
.lk-nav-link.is-active{ background: rgba(200,18,18,.18); background: color-mix(in srgb, var(--kds-brand) 20%, transparent); color:#fff; }
.lk-nav-link.is-active::before{ content:""; position:absolute; left:-.55rem; top:50%; transform:translateY(-50%); width:3px; height:1.45rem; border-radius:0 3px 3px 0; background: var(--kds-brand); }
.lk-nav-badge{ margin-left:auto; min-width:1.2rem; height:1.2rem; padding:0 .3rem; border-radius:99px; background: var(--kds-new); color:#fff; font-size:.68rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }

.lk-sidebar__footer{ border-top:1px solid rgba(255,255,255,.08); padding:.65rem .6rem .85rem; display:flex; flex-direction:column; gap:.45rem; }
.lk-side-iconrow{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.lk-iconbtn{ width:40px; height:40px; min-width:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.07); color:rgba(255,255,255,.82); transition:background .15s, color .15s; cursor:pointer; border:0; }
.lk-iconbtn:hover{ background:rgba(255,255,255,.15); color:#fff; }
.lk-iconbtn.is-on{ background: color-mix(in srgb, var(--kds-ready) 30%, transparent); color:#fff; }
.lk-iconbtn.is-warn{ background: color-mix(in srgb, var(--kds-late) 30%, transparent); color:#fff; }
.lk-side-link{ font-size:.72rem; color:rgba(255,255,255,.6); padding:.1rem .25rem; transition:color .15s; }
.lk-side-link:hover{ color:#fff; text-decoration:underline; }
.lk-side-user{ font-size:.72rem; color:rgba(255,255,255,.5); padding:.05rem .3rem; }
.lk-logout{ display:flex; align-items:center; gap:.5rem; padding:.5rem .7rem; border-radius:10px; font-size:.8rem; font-weight:600; color:rgba(255,255,255,.7); background:transparent; cursor:pointer; border:0; width:100%; }
.lk-logout:hover{ background: color-mix(in srgb, var(--kds-late) 26%, transparent); color:#fff; }

/* topbar w kolumnie treści (slim, frosted) */
.lk-topbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:.7rem; padding:.5rem .9rem; border-bottom:1px solid var(--kds-border); background: var(--kds-bg); }
@supports (backdrop-filter: blur(1px)){ .lk-topbar{ background: color-mix(in srgb, var(--kds-bg) 74%, transparent); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); } }
.lk-topbar__title{ font-weight:600; font-size:.92rem; color:var(--kds-text); }
.lk-hamb{ display:inline-flex; } @media (min-width:1024px){ .lk-hamb{ display:none !important; } }

.lk-backdrop{ position:fixed; inset:0; z-index:55; background:rgba(8,9,18,.5); }
@supports (backdrop-filter: blur(1px)){ .lk-backdrop{ backdrop-filter: blur(2px); } }
@media (min-width:1024px){ .lk-backdrop{ display:none !important; } }
/* hamburger / przyciski w jasnym topbarze (kolumna treści) */
.lk-topbar .lk-iconbtn{ background: var(--kds-surface-3); color: var(--kds-text-2); }
.lk-topbar .lk-iconbtn:hover{ background: var(--kds-border); color: var(--kds-text); }
/* przycisk wyjścia z trybu kiosk (sidebar schowany w kiosku → potrzebna stała kotwica) */
.lk-kiosk-exit{ position:fixed; top:.7rem; right:.7rem; z-index:80; display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .8rem; border-radius:99px; background:var(--kds-chrome); color:#fff; font-size:.8rem; font-weight:600; box-shadow:var(--kds-e3); border:1px solid rgba(255,255,255,.14); cursor:pointer; }
.lk-kiosk-exit:hover{ background:var(--kds-chrome-700); }

/* ---- Nawigacja zgrupowana + nowoczesne ikony SVG (redesign 2026-06-16, iteracja 2) ---- */
.lk-nav-ico{ width:1.15rem; height:1.15rem; flex:0 0 auto; stroke:currentColor; fill:none; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; opacity:.95; }
.lk-nav-link .lk-nav-label, .lk-nav-grouphead .lk-nav-label, .lk-nav-sublink .lk-nav-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lk-nav-section{ font-size:.64rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.32); padding:.7rem .75rem .25rem; }

/* grupa zwijalna (akordeon) */
.lk-nav-group{ display:flex; flex-direction:column; }
.lk-nav-grouphead{
  position:relative; display:flex; align-items:center; gap:.7rem; width:100%;
  padding:.58rem .7rem; border-radius:11px; border:0; background:transparent;
  font-size:.875rem; font-weight:600; color:rgba(255,255,255,.74);
  text-align:left; cursor:pointer; transition:background .15s,color .15s;
}
.lk-nav-grouphead:hover{ background:rgba(255,255,255,.07); color:#fff; }
.lk-nav-group.open > .lk-nav-grouphead{ color:#fff; }
.lk-nav-chev{ width:.95rem; height:.95rem; margin-left:auto; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; opacity:.55; transition:transform .24s cubic-bezier(.22,1,.36,1); }
.lk-nav-group.open .lk-nav-chev{ transform:rotate(180deg); opacity:.85; }

.lk-nav-children{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s cubic-bezier(.22,1,.36,1); }
.lk-nav-group.open .lk-nav-children{ grid-template-rows:1fr; }
.lk-nav-childwrap{ overflow:hidden; min-height:0; display:flex; flex-direction:column; gap:1px; margin:1px 0 2px .95rem; }

.lk-nav-sublink{
  position:relative; display:flex; align-items:center; gap:.6rem; width:100%;
  padding:.45rem .7rem .45rem .85rem; border-radius:9px; border:0; background:transparent;
  font-size:.83rem; font-weight:500; color:rgba(255,255,255,.56);
  text-align:left; cursor:pointer; transition:background .15s,color .15s; white-space:nowrap;
}
.lk-nav-sublink::before{ content:""; position:absolute; left:0; top:-1px; bottom:-1px; width:1.5px; background:rgba(255,255,255,.12); border-radius:2px; }
.lk-nav-sublink:hover{ background:rgba(255,255,255,.06); color:#fff; }
.lk-nav-sublink:hover::before{ background:rgba(255,255,255,.28); }
.lk-nav-sublink .lk-nav-ico{ width:1rem; height:1rem; opacity:.8; }
.lk-nav-sublink.is-active{ background:rgba(200,18,18,.16); background:color-mix(in srgb,var(--kds-brand) 18%,transparent); color:#fff; }
.lk-nav-sublink.is-active::before{ background:var(--kds-brand); width:2px; }
.lk-nav-sublink .lk-nav-badge{ margin-left:auto; }