/* Szata „Karta” (projekt z Claude Design): ładowana jako ostatni arkusz na każdej stronie, po styl-c.css.
   Zmienia tylko wygląd: tokeny kolorów dla Elen i Mila w jasnym i ciemnym trybie, fonty Newsreader + Inter, kształty przycisków i kart.
   Lokal i tryb ustawia lokal.js atrybutami data-lokal (elen / mila) i data-tryb (jasny / ciemny) na <html>. */

/* ---------- Tokeny ---------- */
:root, :root[data-lokal="elen"] {
  --bg: #f4efe6; --surface: #fffcf6; --sunken: #ebe4d6; --line: #d8cdb9;
  --fg: #2b221b; --muted: #675a4c; --muted-ciemny: #675a4c;
  --accent: #6b4630; --accent-dark: #4e321f; --accent-fg: #fffaf2; --accent-soft: #efe2d2;
  --ok: #1d6650; --ok-bg: #dcefe6; --warn: #7f5300; --warn-bg: #f8e9c4; --bad: #a2361f; --bad-bg: #f7ddd4;
  --f-display: "Newsreader", Georgia, serif; --f-body: "Inter", system-ui, sans-serif; --f-num: "Newsreader", Georgia, serif;
  --r: 20px; --r-btn: 999px;
  --mila-bg: #e2e6da; --mila-ink: #2b4d34;
  /* Stałe kolory lokali (znaczki Elen / Mila), niezależne od wybranego motywu */
  --elen-bg: #efe2d2; --elen-ink: #6b4630;
  --t-makro: #1d4a9e; --t-makro-bg: #dbe6fb; --t-bid: #23652d; --t-bid-bg: #dcefdc;
  --t-vege: #8f4206; --t-vege-bg: #fde3cc; --t-chefs: #4a4641; --t-chefs-bg: #e7e5e1;
  --mk: var(--t-makro); --mk-bg: var(--t-makro-bg); --bf: var(--t-bid); --bf-bg: var(--t-bid-bg); --vp: var(--t-vege); --vp-bg: var(--t-vege-bg);
}
:root[data-lokal="mila"] {
  --bg: #eef0e8; --surface: #fbfcf7; --sunken: #e2e6da; --line: #cdd3c2;
  --fg: #1f2a22; --muted: #56635a; --muted-ciemny: #56635a;
  --accent: #3d6848; --accent-dark: #2b4d34; --accent-fg: #f6fbf4; --accent-soft: #dde9dc;
  --r: 20px; --r-btn: 999px;
  --mila-bg: #dde9dc; --mila-ink: #2b4d34;
}
:root[data-tryb="ciemny"], :root[data-tryb="ciemny"][data-lokal="elen"] {
  --bg: #1b1714; --surface: #25201c; --sunken: #141110; --line: #3a322b;
  --fg: #f1e9dd; --muted: #b3a796; --muted-ciemny: #b3a796;
  --accent: #d4a77f; --accent-dark: #e6c3a1; --accent-fg: #22170f; --accent-soft: #3a2c20;
  --ok: #7fd1b2; --ok-bg: #173328; --warn: #e8b85a; --warn-bg: #3a2d12; --bad: #f0957c; --bad-bg: #3f1f17;
  --mila-bg: #24382a; --mila-ink: #e8efe6;
  --elen-bg: #3a2c20; --elen-ink: #e6c3a1;
  --t-makro: #9cc0ff; --t-makro-bg: #1b2a4a; --t-bid: #92d69b; --t-bid-bg: #18331d;
  --t-vege: #ffb27a; --t-vege-bg: #3d2410; --t-chefs: #cfc9c1; --t-chefs-bg: #2c2a28;
}
:root[data-tryb="ciemny"][data-lokal="mila"] {
  --bg: #161a17; --surface: #1f2520; --sunken: #111412; --line: #323b33;
  --fg: #e8efe6; --muted: #a3b0a2; --muted-ciemny: #a3b0a2;
  --accent: #96c9a2; --accent-dark: #b5dcbe; --accent-fg: #10201a; --accent-soft: #24382a;
}

/* ---------- Podstawa ---------- */
body { font-family: var(--f-body); font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum"; -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.015em; }
h1 small { font-family: var(--f-body); letter-spacing: 0; }
.logo { font-family: var(--f-display); letter-spacing: -0.03em; }
.logo small { font-family: var(--f-body); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Karty i liczby ---------- */
.panel, .banner, .tile { border-radius: var(--r); }
/* Zwinięta karta (details): bez odstępu siatki pod nagłówkiem, który Safari zostawia na ukrytą treść */
details.panel:not([open]) { gap: 0; }
/* Rozwinięta karta: Safari na iPhonie nie stosuje odstępów siatki do treści <details>, więc odstępy robią marginesy (tak samo w każdej przeglądarce) */
details.panel { display: block; }
details.panel > * + * { margin-top: 14px; }
.tile .big, .big { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.01em; }

/* ---------- Przyciski: pigułki w obu lokalach ---------- */
.btn { border-radius: var(--r-btn); font-weight: 600; min-height: 44px; }
.btn.sm { border-radius: var(--r-btn); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
@media (hover: hover) { .btn.pri:hover { background: var(--accent-dark); border-color: var(--accent-dark); } }
.btn.dng { background: var(--bad-bg); border-color: var(--bad-bg); color: var(--bad); }
.tryb-btn { border-radius: var(--r-btn); }

/* ---------- Przełączniki ---------- */
.seg, .lokbar .seg, .dzialy, .lokal-wybor { border-radius: var(--r-btn); }
.seg button, .lokbar .seg button, .dzialy button, .lokal-wybor button { border-radius: var(--r-btn); }
.chips button { border-radius: var(--r-btn); }
nav button { border-radius: var(--r-btn); }

/* ---------- Pola ---------- */
input, select, textarea { border-radius: 12px; }
/* Jedna wysokość pól: data w Safari na iPhonie jest inaczej niższa niż pole tekstowe obok */
/* Pola jednej wysokości (data i lista wyboru w Safari na iPhonie są inaczej niższe); bez małych pól w tabelach, np. arkusz grafiku */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select):not(td *) { min-height: 46px; height: 46px; box-sizing: border-box; }
select:not(td *) { -webkit-appearance: none; appearance: none; padding-right: 34px; background-repeat: no-repeat; background-position: right 12px center; background-size: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%23857a6e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
select[multiple]:not(td *) { height: auto; background-image: none; padding-right: 11px; }
/* W siatce pól etykieta trzyma się pola: dwulinijkowy opis obok nie przesuwa pola w dół */
.fields > label:not(.check) { align-content: end; }

/* ---------- Znaczki statusu i tagi dostawców ---------- */
.pill { border-radius: 999px; font-weight: 600; }
.pill.off, .pill.neu { background: var(--sunken); color: var(--muted); }
.dost { border-radius: 5px; font-weight: 600; letter-spacing: 0.02em; }
.dost.d-Makro, .tag.makro { background: var(--t-makro-bg); color: var(--t-makro); }
.dost.d-Bidfood, .tag.bidfood { background: var(--t-bid-bg); color: var(--t-bid); }
.dost.d-VegePapa, .tag.vegepapa { background: var(--t-vege-bg); color: var(--t-vege); }
.dost.d-Chefs, .dost.d-ChefsCulinar, .tag.chefs { background: var(--t-chefs-bg); color: var(--t-chefs); }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 5px; font: 600 11px/1 var(--f-body); letter-spacing: 0.02em; white-space: nowrap; }

/* ---------- Powiadomienie ---------- */
.toast { border-radius: var(--r); background: var(--fg); color: var(--bg); font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }

/* ---------- Menu modułów ☰ (ekran startowy): telefon wysuwa listę z lewej, laptop ma ją stale po lewej ---------- */
.ibtn { width: 44px; height: 44px; border-radius: var(--r-btn); border: 0; background: transparent; color: var(--fg); display: inline-grid; place-items: center; cursor: pointer; padding: 0; flex: none; }
@media (hover: hover) { .ibtn:hover { background: var(--sunken); } }
.scrim { position: fixed; inset: 0; background: rgba(20, 14, 10, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; z-index: 40; }
.drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(304px, 85vw); background: var(--surface); border-right: 1px solid var(--line); transform: translateX(-102%); transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 41; display: flex; flex-direction: column; box-shadow: 12px 0 32px rgba(0, 0, 0, 0.18); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
body.menu-open .scrim { opacity: 1; pointer-events: auto; }
body.menu-open .drawer { transform: none; }
.drawer .gora { height: 60px; display: flex; align-items: center; gap: 2px; padding: 0 8px; border-bottom: 1px solid var(--line); flex: none; }
/* „Panel” wyśrodkowany na środkowej kresce ☰: wiersz przycięty do wysokości wielkich liter (Safari na iPhonie liczy wiersz inaczej niż Chrome) */
.drawer .gora .hide { line-height: 1; text-box: trim-both cap alphabetic; }
.drawer .lista { flex: 1; overflow: auto; padding-bottom: 16px; }
.drawer .grp { padding: 16px 20px 6px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.drawer .nav { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 12px; margin: 0 8px; border-radius: var(--r-btn); color: var(--fg); text-decoration: none; font-size: 15px; font-weight: 500; }
.drawer .nav { border-radius: 14px; }
@media (hover: hover) { .drawer .nav:hover { background: var(--sunken); } }
.drawer .nav svg { width: 20px; height: 20px; flex: none; }
.drawer .nav[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.drawer .nav.locked { color: var(--muted); }
.drawer .nav .cnt { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--accent); color: var(--accent-fg); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.drawer .nav .zamek { margin-left: auto; color: var(--muted); }
@media (min-width: 1024px) {
  body.ma-menu { display: grid; grid-template-columns: auto minmax(0, 1fr); }
  body.ma-menu > :not(.drawer):not(.scrim):not(.toast) { grid-column: 2; }
  /* W siatce z menu .wrap z margin: auto kurczy się do treści; pełna szerokość kolumny jak bez menu */
  body.ma-menu > .wrap { width: 100%; box-sizing: border-box; }
  .drawer { position: sticky; grid-column: 1; grid-row: 1 / span 20; transform: none; box-shadow: none; height: 100vh; width: 248px; transition: width 0.25s; }
  .scrim, .menu-mobile { display: none !important; }
  body.side-mini .drawer { width: 76px; }
  body.side-mini .drawer .txt, body.side-mini .drawer .grp, body.side-mini .drawer .hide, body.side-mini .drawer .cnt, body.side-mini .drawer .zamek { display: none; }
  body.side-mini .drawer .nav { justify-content: center; padding: 0; }
}
@media (prefers-reduced-motion: reduce) { .drawer, .scrim { transition: none; } }

/* ---------- Przełącznik części (Kuchnia / Sala / Zmywak, Elen / Mila): zawsze w jednym rzędzie, nawet przy trzech przyciskach ---------- */
.dzialy { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.dzialy button { padding-inline: 10px; white-space: normal; line-height: 1.15; text-align: center; text-wrap: balance; min-width: 0; }
/* Telefon: przyciski w tabelach (np. „Zakończ na październik 2026”) i opisy przy polach zawijają się zamiast wychodzić poza kolumnę */
@media (max-width: 700px) {
  td .actions { flex-wrap: wrap; }
  table.resp td:has(> .actions) { grid-column: 1 / -1; }
  td .btn { white-space: normal; height: auto; line-height: 1.2; padding-block: 6px; }
  label.check { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
}

/* ---------- Płynne przechodzenie między modułami ---------- */
/* Przeglądarka przenika starą stronę w nową zamiast białego mignięcia; nagłówek zostaje na miejscu */
@view-transition { navigation: auto; }
/* Duże ekrany dotykowe (tablet i telewizor na kuchni, często ze starszym Androidem): bez animacji przejścia, która na nich zostawia ślady */
@media (pointer: coarse) and (min-width: 900px) { @view-transition { navigation: none; } }
body > header { view-transition-name: naglowek; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.18s; }
/* „Łączenie z bazą…” i „Sprawdzanie dostępu…” pojawiają się dopiero, gdy wczytywanie naprawdę trwa */
#logowanie > .panel:has(> .empty:only-child), #logowanie-ekran .login-karta:has(#dostep-msg) { animation: karta-pojaw 0.2s ease 0.9s both; }
@keyframes karta-pojaw { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---------- Zamiast przycisku „Start” menu modułów ☰ na każdej stronie (wspolne.js); dawne linki „Start” w nagłówkach modułów są ukryte ---------- */
body > header .brand { flex-wrap: nowrap; }
#kto a[href="/"], body > header .brand > a[href="/"] { display: none; }
@media (min-width: 1024px) { .drawer { view-transition-name: menu-boczne; } }

/* ---------- Telefon: w nagłówku tylko logo wybranego lokalu, żeby ☰ / Start, logo i Wyloguj nie nachodziły na siebie ---------- */
@media (max-width: 700px) {
  :root[data-lokal="mila"] body > header .logos .logo:not(.mila),
  :root:not([data-lokal="mila"]) body > header .logos .logo.mila { display: none; }
  body > header .wrap { gap: 8px; }
  body > header .brand { min-width: 0; gap: 8px; }
  body > header .kto { flex: none; }
}

/* BistroDesk: znak w nagłówku i nazwa firmy pod nim */
.logo.bd { font-family: "Inter", system-ui, sans-serif; font-weight: 500; letter-spacing: -0.02em; text-transform: none; }
.logo.bd b { font-weight: 800; color: var(--accent); }
.logo.bd small:empty { display: none; }
.logo.bd .bd-nazwa { white-space: nowrap; }