/* ============================================================================
   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', 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 — bez editorial serif. display = Inter zwarty */
.font-display { font-family: 'Inter', system-ui, sans-serif !important; letter-spacing: -0.012em; }
.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; }
.text-ink-300 { color: var(--kds-text-faint) !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; }

/* 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; }
/* 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; }