/* ===========================================================================================
   GASTRO – portal stravníka, vizuál podľa Material Design 3 (Material You)

   Štýly sú vlastné (plain CSS) – žiadny CSS framework ani klientska knižnica sa nepoužívajú
   (viď specifications/tech_spec.md), ale celý vzhľad je postavený na designovom systéme
   Material Design 3: tokeny (farebné roly, typografická škála, tvary, výšky, pohyb, stavové
   vrstvy), komponenty (top app bar, taby, karty, položky zoznamu, tlačidlá, textové pole,
   číselník, dialógy, kalendárová mriežka, segmented buttons, snackbar-hlásenie) a pravidlá
   (48 px dotykové ciele, kontrast, viditeľný focus, svetlý/tmavý režim).

   Farebné roly sú vygenerované z oficiálneho algoritmu Material (HCT/CAM16, balík
   material-color-utilities 0.4.0 – svetlá aj tmavá schéma, contrast level 0) pre zdrojové farby
   aplikácie:
     primary/secondary/neutral  – modrá stola  #1257A8
     tertiary (teplý akcent)    – balíčky      #C4551F
     success (rozšírená rola)   – objednaný deň #1A7F4B
     error                      – Material baseline #B3261E
   Kontrast dvojíc (on-rola proti svojej role) je v oboch režimoch >= 4,5 : 1.
   Roly, ktoré tento portál zatiaľ nepoužíva (inverse-*, surface-dim, *-fixed, surface-variant),
   ostávajú v tokenovej vrstve – sú súčasťou schémy Materialu a použijú ich ďalšie portály
   (čašník, kuchár, manažér) rovnako ako ďalšie komponenty.

   Vrstvy (glass): polopriesvitné povrchy + `backdrop-filter` na pruhoch, popupoch a dlaždiciach,
   inak polopriesvitné povrchy bez rozostrenia – vzhľad drží aj na lacnejšom tablete v jedálni.
   =========================================================================================== */

/* ---------------------------------------------------------------------------------------
   1. Tokeny – farby (svetlý režim)
   --------------------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --md-sys-color-primary: #2a5ea7;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #d6e3ff;
  --md-sys-color-on-primary-container: #00458d;
  --md-sys-color-primary-fixed: #d6e3ff;
  --md-sys-color-primary-fixed-dim: #aac7ff;
  --md-sys-color-on-primary-fixed: #001b3e;
  --md-sys-color-on-primary-fixed-variant: #00458d;
  --md-sys-color-secondary: #565f71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dae2f9;
  --md-sys-color-on-secondary-container: #3e4759;
  --md-sys-color-secondary-fixed: #dae2f9;
  --md-sys-color-secondary-fixed-dim: #bec6dc;
  --md-sys-color-on-secondary-fixed: #131c2b;
  --md-sys-color-on-secondary-fixed-variant: #3e4759;
  --md-sys-color-tertiary: #815340;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #ffdbcd;
  --md-sys-color-on-tertiary-container: #663c2b;
  --md-sys-color-tertiary-fixed: #ffdbcd;
  --md-sys-color-tertiary-fixed-dim: #f5b9a1;
  --md-sys-color-on-tertiary-fixed: #321205;
  --md-sys-color-on-tertiary-fixed-variant: #663c2b;
  --md-sys-color-error: #b4271f;
  --md-sys-color-on-error: #ffffff;
  --md-sys-color-error-container: #ffdad5;
  --md-sys-color-on-error-container: #910809;
  --md-sys-color-surface: #faf9fd;
  --md-sys-color-on-surface: #1a1b1e;
  --md-sys-color-surface-dim: #dad9dd;
  --md-sys-color-surface-bright: #faf9fd;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f4f3f7;
  --md-sys-color-surface-container: #efedf1;
  --md-sys-color-surface-container-high: #e9e7ec;
  --md-sys-color-surface-container-highest: #e3e2e6;
  --md-sys-color-surface-variant: #e0e2ec;
  --md-sys-color-on-surface-variant: #44474e;
  --md-sys-color-inverse-surface: #2f3033;
  --md-sys-color-inverse-on-surface: #f1f0f4;
  --md-sys-color-inverse-primary: #aac7ff;
  --md-sys-color-outline: #74777f;
  --md-sys-color-outline-variant: #c4c6d0;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;
  --md-sys-color-surface-tint: #2a5ea7;

  /* rozšírené farebné roly (Material 3 custom colors) – stav objednaného dňa a balíčky */
  --md-ext-color-success: #006d3d;
  --md-ext-color-on-success: #ffffff;
  --md-ext-color-success-container: #98f6b7;
  --md-ext-color-on-success-container: #00210f;

  /* povrch kariet (panely jedál, karty v lístku): v svetlom režime čistý svetlý povrch,
     v tmavom o stupeň vyšší než plocha – karty tak v oboch režimoch „vystupujú“ */
  --md-sys-color-surface-card: var(--md-sys-color-surface-container-lowest);

  /* ambientné pozadie stránky (dýchajúca plocha za sklom) */
  --md-app-glow-primary: color-mix(in srgb, var(--md-sys-color-primary-container) 88%, transparent);
  --md-app-glow-tertiary: color-mix(in srgb, var(--md-sys-color-tertiary-container) 82%, transparent);
  --md-app-glow-secondary: color-mix(in srgb, var(--md-sys-color-secondary-container) 70%, transparent);

  /* glass vrstvy */
  --md-glass-blur: 20px;
  --md-glass-saturate: 180%;
  --md-glass-surface: color-mix(in srgb, var(--md-sys-color-surface-container) 78%, transparent);
  --md-glass-surface-strong: color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, transparent);
  --md-glass-outline: color-mix(in srgb, var(--md-sys-color-outline-variant) 62%, transparent);
  --md-glass-highlight: color-mix(in srgb, var(--md-sys-color-surface-bright) 55%, transparent);

  /* -----------------------------------------------------------------------------------
     Tokeny – typografia (Material 3 typescale; žiadny web font sa nesťahuje, preto prvé
     miesto patrí systémovej rodine – Roboto/UI font systému)
     ----------------------------------------------------------------------------------- */
  --md-ref-typeface-plain: Roboto, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --md-sys-typescale-headline-small-size: 1.5rem;      /* 24 */
  --md-sys-typescale-headline-small-line-height: 2rem;
  --md-sys-typescale-headline-small-weight: 600;
  --md-sys-typescale-title-large-size: 1.375rem;       /* 22 */
  --md-sys-typescale-title-large-line-height: 1.75rem;
  --md-sys-typescale-title-large-weight: 600;
  --md-sys-typescale-title-medium-size: 1rem;          /* 16 */
  --md-sys-typescale-title-medium-line-height: 1.5rem;
  --md-sys-typescale-title-medium-weight: 600;
  --md-sys-typescale-title-small-size: 0.875rem;       /* 14 */
  --md-sys-typescale-title-small-line-height: 1.25rem;
  --md-sys-typescale-title-small-weight: 600;
  --md-sys-typescale-body-large-size: 1rem;            /* 16 */
  --md-sys-typescale-body-large-line-height: 1.5rem;
  --md-sys-typescale-body-large-weight: 400;
  --md-sys-typescale-body-medium-size: 0.875rem;       /* 14 */
  --md-sys-typescale-body-medium-line-height: 1.25rem;
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-small-size: 0.75rem;         /* 12 */
  --md-sys-typescale-body-small-line-height: 1rem;
  --md-sys-typescale-body-small-weight: 400;
  --md-sys-typescale-label-large-size: 0.875rem;       /* 14 */
  --md-sys-typescale-label-large-line-height: 1.25rem;
  --md-sys-typescale-label-large-weight: 600;
  --md-sys-typescale-label-medium-size: 0.75rem;       /* 12 */
  --md-sys-typescale-label-medium-line-height: 1rem;
  --md-sys-typescale-label-medium-weight: 600;
  --md-sys-typescale-label-small-size: 0.6875rem;      /* 11 */
  --md-sys-typescale-label-small-line-height: 1rem;
  --md-sys-typescale-label-small-weight: 600;

  /* -----------------------------------------------------------------------------------
     Tokeny – tvary, výšky (elevation), pohyb a stavové vrstvy
     ----------------------------------------------------------------------------------- */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 0.25rem;   /* 4  – textové pole */
  --md-sys-shape-corner-small: 0.5rem;          /* 8  */
  --md-sys-shape-corner-medium: 0.75rem;        /* 12 */
  --md-sys-shape-corner-large: 1rem;            /* 16 – karty, dlaždice */
  --md-sys-shape-corner-extra-large: 1.75rem;   /* 28 – dialógy */
  --md-sys-shape-corner-full: 999px;            /* tlačidlá, pilulky, ikonové tlačidlá */

  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px rgba(0, 0, 0, .28), 0 1px 3px 1px rgba(0, 0, 0, .12);
  --md-sys-elevation-level2: 0 1px 2px rgba(0, 0, 0, .28), 0 2px 6px 2px rgba(0, 0, 0, .12);
  --md-sys-elevation-level3: 0 4px 8px 3px rgba(0, 0, 0, .12), 0 1px 3px rgba(0, 0, 0, .28);
  --md-sys-elevation-level4: 0 6px 10px 4px rgba(0, 0, 0, .12), 0 2px 3px rgba(0, 0, 0, .28);
  --md-sys-elevation-level5: 0 8px 12px 6px rgba(0, 0, 0, .12), 0 4px 4px rgba(0, 0, 0, .28);

  --md-sys-motion-easing-emphasized: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;

  --md-sys-state-hover-opacity: 8%;
  --md-sys-state-pressed-opacity: 12%;
  --md-sys-state-disabled-content-opacity: .38;
  --md-sys-state-disabled-container-opacity: .12;
}

/* ---------------------------------------------------------------------------------------
   2. Tokeny – farby (tmavý režim); prepínač režimu v hornom pruhu
   --------------------------------------------------------------------------------------- */
:root[data-theme="dark"] {
  color-scheme: dark;

  --md-sys-color-primary: #aac7ff;
  --md-sys-color-on-primary: #002f64;
  --md-sys-color-primary-container: #00458d;
  --md-sys-color-on-primary-container: #d6e3ff;
  --md-sys-color-secondary: #bec6dc;
  --md-sys-color-on-secondary: #283141;
  --md-sys-color-secondary-container: #3e4759;
  --md-sys-color-on-secondary-container: #dae2f9;
  --md-sys-color-tertiary: #f5b9a1;
  --md-sys-color-on-tertiary: #4b2717;
  --md-sys-color-tertiary-container: #663c2b;
  --md-sys-color-on-tertiary-container: #ffdbcd;
  --md-sys-color-error: #ffb4aa;
  --md-sys-color-on-error: #690003;
  --md-sys-color-error-container: #910809;
  --md-sys-color-on-error-container: #ffdad5;
  --md-sys-color-surface: #121316;
  --md-sys-color-on-surface: #e3e2e6;
  --md-sys-color-surface-dim: #121316;
  --md-sys-color-surface-bright: #38393c;
  --md-sys-color-surface-container-lowest: #0d0e11;
  --md-sys-color-surface-container-low: #1a1b1e;
  --md-sys-color-surface-container: #1e1f23;
  --md-sys-color-surface-container-high: #292a2d;
  --md-sys-color-surface-container-highest: #343539;
  --md-sys-color-surface-variant: #44474e;
  --md-sys-color-on-surface-variant: #c4c6d0;
  --md-sys-color-inverse-surface: #e3e2e6;
  --md-sys-color-inverse-on-surface: #2f3033;
  --md-sys-color-inverse-primary: #2a5ea7;
  --md-sys-color-outline: #8e9099;
  --md-sys-color-outline-variant: #44474e;
  --md-sys-color-surface-tint: #aac7ff;

  --md-ext-color-success: #7cda9d;
  --md-ext-color-on-success: #00391d;
  --md-ext-color-success-container: #00522c;
  --md-ext-color-on-success-container: #98f6b7;

  /* v tmavom režime žiara menej svieti, aby plocha za sklom nerušila čítanie */
  --md-app-glow-primary: color-mix(in srgb, var(--md-sys-color-primary-container) 55%, transparent);
  --md-app-glow-tertiary: color-mix(in srgb, var(--md-sys-color-tertiary-container) 50%, transparent);
  --md-app-glow-secondary: color-mix(in srgb, var(--md-sys-color-secondary-container) 55%, transparent);

  --md-sys-color-surface-card: var(--md-sys-color-surface-container);

  --md-glass-surface: color-mix(in srgb, var(--md-sys-color-surface-container) 84%, transparent);
  --md-glass-surface-strong: color-mix(in srgb, var(--md-sys-color-surface-container-high) 92%, transparent);
  --md-glass-outline: color-mix(in srgb, var(--md-sys-color-outline-variant) 75%, transparent);
  --md-glass-highlight: color-mix(in srgb, var(--md-sys-color-surface-bright) 25%, transparent);
}

/* ---------------------------------------------------------------------------------------
   3. Základ: plocha, typografia, focus, pohyb
   --------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--md-ref-typeface-plain);
  font-size: var(--md-sys-typescale-body-large-size);
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-weight: var(--md-sys-typescale-body-large-weight);
  letter-spacing: .01em;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface);
  /* ambientná plocha: dve teplé a jedna chladná žiara pod sklom – dáva stránke hĺbku */
  background-image:
    radial-gradient(120% 70% at 8% -12%, var(--md-app-glow-primary), transparent 60%),
    radial-gradient(110% 60% at 105% 2%, var(--md-app-glow-tertiary), transparent 58%),
    radial-gradient(120% 70% at 50% 112%, var(--md-app-glow-secondary), transparent 62%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1, h2, h3, p, ul, ol { margin: 0; }
h1, h2, h3 { font-weight: var(--md-sys-typescale-title-medium-weight); line-height: 1.3; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a, button, [data-seat], .day, .prep { -webkit-tap-highlight-color: transparent; }

/* Material indikátor fokusu – viditeľný pri ovládaní klávesnicou */
:focus-visible {
  outline: .125rem solid var(--md-sys-color-primary);
  outline-offset: .125rem;
  border-radius: var(--md-sys-shape-corner-small);
}

/* textové role */
.muted { color: var(--md-sys-color-on-surface-variant); }
.small { font-size: var(--md-sys-typescale-body-small-size); line-height: var(--md-sys-typescale-body-small-line-height); }
/* čísla alergénov – error rola, zvýraznené všade, kde sa alergény vypisujú (Prehľad, lístok) */
.al { color: var(--md-sys-color-error); font-weight: 700; }

/* ---------------------------------------------------------------------------------------
   4. Horný pruh (Material top app bar, glass) a spodná lišta
   --------------------------------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: .5rem;
  min-height: 3.5rem; padding: 0 .5rem;
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--md-glass-surface);
  border-bottom: .0625rem solid var(--md-glass-outline);
  box-shadow: 0 .0625rem .125rem rgba(0, 0, 0, .06);
  -webkit-backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-saturate));
  backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-saturate));
}
.top::after { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--md-glass-highlight); }
.top .t {
  margin-left: .5rem;
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--md-sys-color-primary);
}
/* kód stola za názvom aplikácie: štvorec s číslom a modrým obrysom; pri odhlásení (alebo pred
   prihlásením) sa neukazuje */
.top .stol {
  display: inline-grid; place-items: center;
  min-width: 1.75rem; min-height: 1.75rem; padding: 0 .1875rem;
  border: .125rem solid var(--md-sys-color-primary);
  border-radius: var(--md-sys-shape-corner-small);
  color: var(--md-sys-color-primary);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: 1; font-weight: 700;
}
.top .stol[hidden] { display: none; }
.top .prut-akcie { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
/* akcie pruhu = textové tlačidlá Material (bez výplne, v stavovej farbe primary) */
.top .tb {
  min-height: 2.5rem; padding: .25rem .875rem;
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: transparent; color: var(--md-sys-color-primary);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.top .tb:hover { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-opacity), transparent); }
.top .tb:active { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-pressed-opacity), transparent); }
/* na najmenších displejoch (okolo 320 px) sa pruh so štvorcom stola zmestí bez odrezania
   pravých tlačidiel – menšie rozstupy a užšie textové tlačidlá */
@media (max-width: 22.5rem) {
  .top { gap: .375rem; }
  .top .t { margin-left: .25rem; }
  .top .tb { padding-left: .5rem; padding-right: .5rem; }
  .top .stol { min-width: 1.625rem; min-height: 1.625rem; }
}

#app {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--top-h, 3.5rem));
  min-height: calc(100dvh - var(--top-h, 3.5rem));
}
#app > .wrap { flex: 1 1 auto; }

/* prechod medzi obrazovkami (spustí ho router – viď `data-prechod` nižšie) */
@keyframes md-screen-enter {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: none; }
}
html[data-prechod] #app > .wrap,
html[data-prechod] #app > .bar > .btn {
  animation: md-screen-enter var(--md-sys-motion-duration-medium2)
             var(--md-sys-motion-easing-emphasized-decelerate) both;
}
html[data-prechod] #app > .bar > .btn:nth-child(2) { animation-delay: 40ms; }

/* ---------------------------------------------------------------------------------------
   5. Rozvrhnutie obsahu a nadpisy obrazoviek
   --------------------------------------------------------------------------------------- */
.wrap { width: 100%; max-width: 45rem; margin: 0 auto; padding: .5rem 1rem 1rem; }

.pg-head { position: relative; }
.pg-title {
  margin: 0 0 1.5rem; text-align: center;
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
  color: var(--md-sys-color-on-surface);
}
.pg-sub {
  margin: 0 0 1.5rem; text-align: center;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  color: var(--md-sys-color-on-surface-variant);
}
/* krátky štítok stavu (napr. Uzavreté) – v riadku nadpisu vľavo, mimo toku, aby nadpis ostal na strede */
.podanie-stav {
  display: inline-block; padding: .0625rem .5rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: 700;
}

.lbl {
  margin: 0 0 .375rem;
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.lbl.sec {
  margin: .5rem 0 .375rem;
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: var(--md-sys-typescale-title-small-weight);
  letter-spacing: 0; text-transform: none;
  color: var(--md-sys-color-on-surface-variant);
}
.blok { margin: 0 0 .875rem; }
/* nadpis sekcie (OBED, VEČERA, POLIEVKA, BALÍČKY) – najvyššia úroveň v obsahu, preto plnou
   farbou textu; podnadpis menu (Štandard / Racio) je stlmený, aby hierarchia sedela */
.blok > .lbl { margin: 0 0 .375rem; font-size: 1rem; line-height: 1.35; letter-spacing: .04em; color: var(--md-sys-color-on-surface); }

/* ---------------------------------------------------------------------------------------
   6. Titulný panel obrazovky – deň ako tlačidlo, okolo neho šípky (ikonové tlačidlá)
   --------------------------------------------------------------------------------------- */
.day-head { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin: 0 0 .5rem; }
.day-head .dh-date {
  display: flex; align-items: center; justify-content: center; gap: .5rem; max-width: 100%;
}
/* šípka na posun dňa – Material ikonové tlačidlo (plnené tonálne), dotykový cieľ 48 px */
.dnav {
  flex: 0 0 auto; width: 3rem; height: 3rem; padding: 0;
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  font-size: 1.75rem; font-weight: 600; line-height: 1; cursor: pointer;
  box-shadow: var(--md-sys-elevation-level0);
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.dnav:hover { box-shadow: var(--md-sys-elevation-level1); }
.dnav:active { background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) var(--md-sys-state-pressed-opacity), var(--md-sys-color-secondary-container)); }
.dnav:disabled {
  background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-container-opacity), transparent);
  color: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-disabled-content-opacity), transparent);
  box-shadow: none; cursor: default;
}
/* deň ako tlačidlo (otvára popup Kalendára) – Material filled button; šírka je pevná,
   aby šípky pri prepnutí dňa neposkakujú */
.dh-day {
  flex: 0 1 13.75rem; width: 13.75rem; min-height: 3rem; padding: .25rem 1rem;
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: 700; letter-spacing: .01em; text-align: center; white-space: nowrap; cursor: pointer;
  box-shadow: var(--md-sys-elevation-level0);
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized);
}
.dh-day:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-hover-opacity), var(--md-sys-color-primary));
  box-shadow: var(--md-sys-elevation-level1);
}
.dh-day:active { transform: scale(.98); }

/* ---------------------------------------------------------------------------------------
   7. Prepnutie podania (Obed / Večera) – dve tlačidlá s obrysom (Material outlined button)
   --------------------------------------------------------------------------------------- */
.ctl { margin: 0 0 .875rem; }
/* Obe podania sú tlačidlá s obrysom; zvolené podanie má **zvýraznený obrys** (modrý, o 1 px
   hrubší) a modrý text. Hrúbka sa pridáva vnútorným tieňom, takže sa tlačidlá pri prepnutí
   neposunú. */
.prepinac {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 0 0 1.25rem;
}
.prepinac .prep {
  min-height: 3rem; padding: .5rem .625rem;
  border: .0625rem solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background: none; color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  cursor: pointer;
  transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.prepinac .prep:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-opacity), transparent); }
.prepinac .prep:focus-visible { outline: .125rem solid var(--md-sys-color-primary); outline-offset: .125rem; }
.prepinac .prep.on {
  color: var(--md-sys-color-primary);
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 .0625rem var(--md-sys-color-primary);
  font-weight: 700;
}
/* prepínač Balíčky pod tlačidlami podania – Material switch (dráha 52 × 32 px, gombík 16 px
   vypnutý / 24 px zapnutý); vypnutý má obrys, zapnutý modrú dráhu a gombík v on-primary */
/* riadok len drží výšku a zarovnanie; prázdny priestor pred/za komponentou nie je klikací.
   Komponenta (switch + text Balíčky) stojí pri ľavom okraji pri Obede a pri pravom pri Večere. */
.rezim-riadok { display: flex; align-items: center; min-height: 3rem; margin: 0 0 .375rem; }
.rezim-riadok[data-riadok="vecera"] { justify-content: flex-end; }
.rezim {
  display: flex; align-items: center; gap: .75rem;
  width: auto; min-height: 3rem; margin: 0; padding: .25rem .5rem;
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: none; color: var(--md-sys-color-on-surface);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.rezim:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-opacity), transparent); }
.rezim:focus-visible { outline: .125rem solid var(--md-sys-color-primary); outline-offset: .125rem; }
.rezim-text {
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: 600;
}
.rezim-track {
  position: relative; flex: 0 0 auto;
  width: 3.25rem; height: 2rem;
  border: .125rem solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.rezim-thumb {
  position: absolute; top: 50%; left: .25rem; width: 1rem; height: 1rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-outline);
  transform: translateY(-50%);
  transition: left var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              width var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              height var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.rezim[aria-checked="true"] .rezim-track {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-primary);
}
.rezim[aria-checked="true"] .rezim-thumb {
  left: 1.5rem; width: 1.5rem; height: 1.5rem;
  background: var(--md-sys-color-on-primary);
}
.rezim:disabled { opacity: .38; cursor: default; }
.rezim:disabled:hover { background: none; }

/* ---------------------------------------------------------------------------------------
   8. Kalendárová mriežka (popup) – Material date picker bunky so stavmi dňa
   --------------------------------------------------------------------------------------- */
#kalendar { max-width: 28.75rem; }
.days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
#kalendar .days { gap: .375rem; }
#kalendar .day .d { font-size: 1.5rem; }

.day {
  position: relative; min-width: 0; aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem;
  padding: .25rem;
  border: .0625rem solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-on-surface); cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
              border-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
              box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
              transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized);
}
.day:hover { background: var(--md-sys-color-surface-container-high); box-shadow: var(--md-sys-elevation-level1); }
.day:active { transform: scale(.97); }
.day .w {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.day .d { font-size: 1.625rem; font-weight: 700; line-height: 1; }
.day .s {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: 1.15; font-weight: 600; text-align: center;
  color: var(--md-sys-color-on-surface-variant);
}
/* čo sa v deň podáva (balíčky) – výraznejšie ako stav dňa */
.day .z {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: 1.15; font-weight: 700;
  color: var(--md-sys-color-tertiary);
}
/* rám dlaždice nesie stav dňa: objednaný (success), uzavretý (error), rozpracovaný (primary) */
.day.ok { background: var(--md-ext-color-success-container); border-color: var(--md-ext-color-success); }
.day.ok .d, .day.ok .s { color: var(--md-ext-color-on-success-container); }
.day.locked { border-color: var(--md-sys-color-error); }
.day.locked .s { color: var(--md-sys-color-error); }
.day.rozprac { border-color: var(--md-sys-color-primary); }
.day.rozprac .d { color: var(--md-sys-color-primary); }
/* deň z adresy: modrý vnútorný rám + jemné podfarbenie (nezávisle od stavu dňa) */
.day.sel {
  box-shadow: inset 0 0 0 .125rem var(--md-sys-color-primary);
  background-image: linear-gradient(color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent),
                                    color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent));
}
/* deň mimo zverejneného lístka nie je tlačidlo */
.day.off {
  border: 0; background: transparent; box-shadow: none; opacity: .55; cursor: default;
}
.day.off .d, .day.off .w, .day.off .s, .day.off .z { color: var(--md-sys-color-on-surface-variant); }

/* dlaždice v prázdnych bunkách mriežky (Jedálny lístok týždňa, Návod) – plnené tonálne tlačidlá */
.days .dakcia {
  min-width: 0; min-height: 0; aspect-ratio: 1 / 1; align-self: center;
  padding: .625rem .375rem; border-radius: var(--md-sys-shape-corner-full);
  justify-content: center; text-align: center;
}
.days .dakcia .big { font-size: var(--md-sys-typescale-label-large-size); line-height: 1.2; }
.days .dakcia .sub { font-size: var(--md-sys-typescale-label-small-size); line-height: 1.2; }

/* posun po týždňoch – Material segmented buttons (spojené segmenty) */
.kbar { display: flex; gap: 0; margin-top: .75rem; }
.kbar > .btn {
  flex: 1 1 0; min-width: 0; min-height: 3rem; padding: .25rem .5rem;
  border: .0625rem solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-none);
  background: transparent; color: var(--md-sys-color-on-surface);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
}
.kbar > .btn + .btn { margin-left: -.0625rem; }
.kbar > .btn:first-child {
  border-top-left-radius: var(--md-sys-shape-corner-full);
  border-bottom-left-radius: var(--md-sys-shape-corner-full);
}
.kbar > .btn:last-child {
  border-top-right-radius: var(--md-sys-shape-corner-full);
  border-bottom-right-radius: var(--md-sys-shape-corner-full);
}
.kbar > .btn:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-opacity), transparent); }
.kbar > .btn .big { font-size: var(--md-sys-typescale-label-large-size); }

/* malé pomocné tlačidlo na obnovu demo dát v popupe Kalendára */
.demo-reset {
  display: block; margin: .875rem auto 0; padding: .375rem .875rem;
  border: .0625rem dashed var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: var(--md-sys-typescale-label-medium-weight);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.demo-reset:hover { color: var(--md-sys-color-primary); border-color: var(--md-sys-color-primary); }

/* ---------------------------------------------------------------------------------------
   9. Stravníci – obrázok jedla (ikonové tlačidlo s detailom) a panely na výber
   --------------------------------------------------------------------------------------- */
/* ponuka na Stravníkoch je mriežka 2 stĺpce × 3 riadky (dva stvorčeky vedľa seba); každý stvorček
   nesie obrázok aj popis jedla a v jednom riadku sa naťahujú na rovnakú výšku */
.rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; align-items: stretch; }

/* stvorček ponuky = obrázok cez celú šírku + popis jedla; celý je jedno tlačidlo, takže sa
   vyberá kliknutím kamkoľvek na obrázok alebo popis. Text „Vybrať“ je len informatívny. */
.prow {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0;
  overflow: hidden; padding: 0;
  border: .0625rem solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
  border-radius: var(--md-sys-shape-corner-large);
  background: color-mix(in srgb, var(--md-sys-color-surface-card) 90%, transparent);
  color: inherit; font: inherit; text-align: left;
  -webkit-appearance: none; appearance: none;
}
.rows button.prow { cursor: pointer; }
.rows button.prow:hover { box-shadow: var(--md-sys-elevation-level1); }
.rows button.prow:focus-visible { outline: .125rem solid var(--md-sys-color-primary); outline-offset: .125rem; }
.rows .prow.polievka { cursor: default; }
/* zvolený stvorček má zvýraznený obrys celého stvorčeka (obrázok aj popis) */
.rows .prow.on {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 .0625rem var(--md-sys-color-primary);
}
/* v úzkom stĺpci mriežky stojí text „Vybrať“ pod názvom (nie vedľa neho) – názov jedla tak má
   celú šírku karty a môže sa zalomiť do troch riadkov namiesto skrátenia po pár znakoch */
.rows .pick { grid-template-columns: minmax(0, 1fr) auto; gap: .0625rem .375rem; border: 0; border-radius: 0; background: transparent; box-shadow: none; cursor: inherit; }
.rows .pick .dh { grid-column: 1 / -1; grid-row: 1; min-height: 0; }
.rows .pick .nm { font-size: 0.8125rem; line-height: 1.0625rem; -webkit-line-clamp: 3; }
.rows .pick .pick-al { grid-column: 1; grid-row: 2; justify-self: start; font-size: var(--md-sys-typescale-label-small-size); line-height: 1rem; }
.rows .pick .pick-al:empty { display: none; }
.rows .pick .pick-vybrat { grid-column: 2; grid-row: 2; justify-self: end; }
.rows .pick .neobj,
.rows .pick.polievka .neobj { grid-column: 1 / -1; grid-row: 2; justify-self: end; max-width: none; white-space: nowrap; }
.rows .pick:hover, .rows .pick.on:hover { box-shadow: none; }
.rows .pick:active { transform: none; }
.rows .pick.on { border-color: transparent; box-shadow: none; }
/* obrázok je súčasťou stvorčeka a vyplní **celú šírku stvorčeka**; pomer 4 : 3 drží obrázky
   rovnaké, `cover` ich oreže na šírku karty */
.prow > .dish-img {
  flex: 0 0 auto; display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  border: 0; border-radius: 0; background: transparent; font-size: .5rem;
}
.prow > .dish-img img { object-fit: cover; border-radius: 0; }
.prow .pick { flex: 1 1 auto; min-width: 0; }
/* „Nedám si“ pri nepárnom počte ponúk: nižší riadkový panel na celú šírku – malý obrázok vľavo,
   popis a „Vybrať“ vpravo */
.rows .prow.none-full { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: .5rem; padding: .375rem .5rem; }
.rows .prow.none-full > .dish-img {
  flex: 0 0 3.25rem; width: 3.25rem; height: 3.25rem; aspect-ratio: auto;
  border-radius: var(--md-sys-shape-corner-medium);
}
.rows .prow.none-full .pick {
  grid-template-columns: minmax(0, 1fr) auto; padding: .125rem .25rem .125rem 0;
}
.rows .prow.none-full .pick .dh { grid-column: 1; grid-row: 1; }
.rows .prow.none-full .pick .pick-vybrat { grid-column: 2; grid-row: 1; align-self: center; justify-self: end; }

/* panel jedla – Material karta, celá je tlačidlo (kliknutím sa jedlo vyberie) */
.pick {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .375rem .5rem;
  width: 100%; min-height: 3.25rem; padding: .5rem .75rem;
  border: .0625rem solid color-mix(in srgb, var(--md-sys-color-outline-variant) 80%, transparent);
  border-radius: var(--md-sys-shape-corner-large);
  background: color-mix(in srgb, var(--md-sys-color-surface-card) 90%, transparent);
  color: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
              box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
              transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized);
}
.pick:hover { box-shadow: var(--md-sys-elevation-level1); }
.pick:active { transform: scale(.995); }
.pick .dh { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 2.5rem; }
.pick .nm {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: 700;
}
.pick .ck {
  display: inline-block; margin-right: .3125rem; color: var(--md-sys-color-primary);
  font-weight: 800; line-height: 1;
  visibility: hidden; transform: scale(.7);
  transition: transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.pick.on .ck { visibility: visible; transform: none; }
.pick .pick-vybrat {
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  font-weight: 700; color: var(--md-sys-color-primary); white-space: nowrap;
}
/* balíčky majú **rovnaký rámik aj výplň ako jedlá z menu** – odlíšené sú len teplou farbou názvu
   (na výber upozorňuje text „Vybrať“ a fajka ako inde) */
.pick.bal .nm { color: var(--md-sys-color-tertiary); }
/* vybrané jedlo nesie len **zvýraznený obrys** (2 px primary) – výplň panela ostáva rovnaká ako
   u ostatných panelov, takže v ponuke nič neprepadáva a výber je vidieť na prvý pohľad;
   pravidlo stojí za balíčkami, aby výber vyhral aj na ich paneli */
.pick.on {
  border-color: var(--md-sys-color-primary);
  box-shadow: inset 0 0 0 .0625rem var(--md-sys-color-primary);
}
.pick.on:hover { box-shadow: inset 0 0 0 .0625rem var(--md-sys-color-primary), var(--md-sys-elevation-level1); }
/* prázdny panel (menu stravníka nemá v ten deň toľko jedál) – drží miesto v zozname */
.pick.prazdny { cursor: default; border-style: dashed; background: transparent; box-shadow: none; }
/* polievka – len informácia, nedá sa objednať */
.pick.polievka {
  cursor: default; background: var(--md-sys-color-secondary-container);
  border-color: color-mix(in srgb, var(--md-sys-color-secondary) 35%, transparent);
  color: var(--md-sys-color-on-secondary-container);
}
.pick.polievka .nm { color: var(--md-sys-color-on-secondary-container); }
.pick.polievka .neobj {
  max-width: 5.5rem; text-align: right; line-height: 1.15; white-space: normal;
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--md-sys-color-on-surface-variant);
}

/* obrázok jedla (ilustrácia alebo fotografia); bez obrázka šrafovaný placeholder */
.dish-img {
  flex: 0 0 4rem; width: 4rem; height: 4rem;
  display: flex; align-items: center; justify-content: center;
  border: .0625rem solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface-variant);
  background: repeating-linear-gradient(45deg,
    var(--md-sys-color-surface-container), var(--md-sys-color-surface-container) .375rem,
    var(--md-sys-color-surface-container-high) .375rem, var(--md-sys-color-surface-container-high) .75rem);
  font-size: .625rem; line-height: 1.2; text-align: center;
}
.dish-img.foto { background: var(--md-sys-color-surface-container-high); overflow: hidden; }
.dish-img.foto img { display: block; width: 100%; height: 100%; object-fit: contain; }

/* ---------------------------------------------------------------------------------------
   10. Karta polievky (v Jedálnom lístku) – tonálna karta
   --------------------------------------------------------------------------------------- */
.soup {
  display: flex; gap: .75rem; align-items: flex-start; margin: .375rem 0 .625rem; padding: .75rem;
  border-radius: var(--md-sys-shape-corner-large);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-high) 88%, transparent);
}
.soup .dish-img { flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; font-size: .5625rem; }
.soup .dh { flex: 1 1 auto; min-width: 0; }
.soup .tag { display: block; margin-bottom: .25rem; text-align: left; }
.soup .tag .neobj {
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--md-sys-color-on-surface-variant);
}
.soup .nm {
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: 700; color: var(--md-sys-color-primary);
}
.soup .mt {
  margin-top: .125rem;
  font-size: var(--md-sys-typescale-label-medium-size);
  color: var(--md-sys-color-on-surface-variant);
}
.soup .mt .al { color: var(--md-sys-color-error); font-weight: 700; }

/* ---------------------------------------------------------------------------------------
   11. Prehľad objednávky – panely stravníkov v mriežke 3 riadky × 2 stĺpce
   --------------------------------------------------------------------------------------- */
/* Šiesti stravníci stola sú v mriežke 3 × 2 (pri menšom stole sa zaplnia prvé bunky); panely
   v jednom riadku majú rovnakú výšku, takže mriežka ostáva pravidelná. */
.dlist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, auto));
  gap: .375rem;
}
/* Panel stravníka v Prehľade: prvý riadok patrí menu (meno · typ menu · 1/2) a orientačnému
   textu `Zmeniť` vpravo, druhý riadok objednanému jedlu – to má **celú šírku panela** a najviac
   **tri riadky textu** (dlhší názov sa skráti tromi bodkami). V mriežke je panel samostatná karta
   s rámikom a zaoblenými rohmi (stavová vrstva kopíruje jej tvar). */
.drow {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  gap: .0625rem .25rem; width: 100%;
  min-height: 4.5rem; padding: .375rem;
  border: .0625rem solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-medium);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 70%, transparent);
  color: inherit; font: inherit; text-align: left;
  -webkit-appearance: none; appearance: none;
}
/* stavová vrstva (Material state layer) je zaoblený obdĺžnik nad panelom – kopíruje rámik karty */
.drow::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: transparent; pointer-events: none;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.drow[data-seat] { cursor: pointer; }
.drow[data-seat]:hover::before { background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-opacity), transparent); }
.drow[data-seat]:focus-visible::before { background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-opacity), transparent); }
.drow[data-seat]:active::before { background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-pressed-opacity), transparent); }
.drow .nm {
  grid-column: 1; grid-row: 1; min-width: 0;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: 1.25rem;
  font-weight: 700;
}
/* stravník, ktorého objednávka sa práve menila – v primárnej farbe */
.drow .nm.ja { color: var(--md-sys-color-primary); }
/* riadok pod menom: typ menu (a pri polovičnej porcii 1/2) a za ním alergény objednaného jedla –
   meno tak ostáva veľké a v úzkom stĺpci mriežky sa neláme */
.drow .podmenu { display: block; }
.drow .nm .mini {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: 1rem;
  font-weight: 600; color: var(--md-sys-color-on-surface-variant);
}
/* objednané jedlo: riadky cez celú šírku panela (v úzkom stĺpci mriežky sa názov zalomí);
   alergény za názvom ostávajú viditeľné, kým sa text zmestí do troch riadkov, dlhší sa skráti
   tromi bodkami */
.drow .jedlo {
  grid-column: 1 / -1; grid-row: 2; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.0625rem;
  font-weight: 500; text-align: left;
}
/* čísla alergénov za typom menu – error rola, rovnaká veľkosť písma ako typ menu */
.drow .al {
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: 1rem;
  font-weight: 700; color: var(--md-sys-color-error); white-space: nowrap;
}
/* text Zmeniť – len označenie akcie v riadku s menom (kliká sa na celý panel, tlačidlo to nie je) */
.drow .zmen {
  grid-column: 2; grid-row: 1; align-self: start; justify-self: end;
  font-size: var(--md-sys-typescale-label-small-size);
  line-height: 1.25rem;
  font-weight: 700; color: var(--md-sys-color-primary); white-space: nowrap;
}
.drow[data-seat]:hover .zmen, .drow[data-seat]:focus-visible .zmen { text-decoration: underline; }
/* hlásenie o prijatí voľby – krátky „snackbar“ v riadku, ktorého voľba sa uložila */
.drow .zmen.prijate {
  padding: .0625rem .5rem; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-ext-color-success-container); color: var(--md-ext-color-on-success-container);
  text-decoration: none;
  animation: md-snackbar-in var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized-decelerate) both;
}
@keyframes md-snackbar-in {
  from { opacity: 0; transform: scale(.85) translateY(.25rem); }
  to { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------------------
   12. Spodný riadok obrazovky: legenda alergénov a poznámka k stolu
   --------------------------------------------------------------------------------------- */
/* Na Prehľade sú v jednom riadku: vľavo legenda alergénov, vpravo poznámka k stolu. Rámik a
   rozstupy drží riadok, takže ostane aj vtedy, keď legenda nie je (jedlá bez alergénov). */
.spodok {
  display: flex; align-items: flex-start; gap: .5rem .75rem;
  margin: .5rem 0; padding-top: .5rem;
  border-top: .0625rem solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent);
}
.spodok .alergeny { margin: 0; padding-top: 0; border-top: 0; }

.alergeny { flex: 1 1 auto; min-width: 0; margin: .5rem 0; padding-top: .5rem; border-top: .0625rem solid color-mix(in srgb, var(--md-sys-color-outline-variant) 60%, transparent); }
.alergeny:empty { display: none; }
.alergeny .tx {
  margin: 0;
  font-size: var(--md-sys-typescale-label-medium-size);
  line-height: 1.5; color: var(--md-sys-color-on-surface-variant);
}
.alergeny .tx b { color: var(--md-sys-color-on-surface); font-weight: 700; }

/* poznámka k stolu = asistívny čip Materialu (ikona ✎ a text poznámky); bez poznámky nesie výzvu
   „Poznámka“, s poznámkou jej text (najviac dva riadky – dlhší sa skráti tromi bodkami) */
.pozn { flex: 0 1 auto; min-width: 0; margin-left: auto; }
.pozn-btn {
  display: inline-flex; align-items: center; gap: .375rem; max-width: 100%;
  min-height: 2rem; padding: .25rem .75rem;
  border: .0625rem solid color-mix(in srgb, var(--md-sys-color-outline) 70%, transparent);
  border-radius: var(--md-sys-shape-corner-full);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  text-align: left; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.pozn-btn:hover {
  border-color: var(--md-sys-color-primary); color: var(--md-sys-color-primary);
  background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-opacity), transparent);
}
/* poznámka existuje: čip je plnený (výplň je vidieť na prvý pohľad) */
.pozn-btn.on {
  border-color: transparent;
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
}
/* hlásenie o uložení (na dve sekundy) */
.pozn-btn.ok {
  border-color: transparent;
  background: var(--md-ext-color-success-container); color: var(--md-ext-color-on-success-container);
  animation: md-snackbar-in var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized-decelerate) both;
}
.pozn-btn.ok .pozn-ok { font-weight: 700; }
/* uzavretý deň: poznámka sa len číta */
.pozn-btn.off { border-style: dashed; cursor: default; }
.pozn-ikona { flex: 0 0 auto; font-size: 1rem; line-height: 1; }
.pozn-txt { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* na úzkych displejoch drží čip jeden riadok a obmedzenú šírku textu (celý text poznámky je aj tak
   v popupe a v tlači) – spodný riadok tak ostane nízky a Prehľad sa zmestí na obrazovku mobilu
   bez posúvania, aj keď je poznámka dlhá */
@media (max-width: 26rem) {
  .pozn-txt { -webkit-line-clamp: 1; max-width: 7rem; }
}
/* na najmenších displejoch (okolo 320 px) drží čip len ikonu ✎ (celý text poznámky je v popupe
   a v tlači) – legenda alergénov tak dostane miesto na dva riadky a spodný riadok ostane nízky;
   uloženie poznámky dáva najavo zelená výplň čipu */
@media (max-width: 21rem) {
  .pozn-btn { min-height: 2.5rem; padding: .125rem .5rem; }
  .pozn-txt, .pozn-ok { display: none; }
}

/* popup poznámky: textové pole Materialu pre viac riadkov */
#pozn-text {
  display: block; width: 100%; min-height: 5rem; padding: .75rem 1rem;
  border: .0625rem solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 70%, transparent);
  color: var(--md-sys-color-on-surface);
  font-family: inherit; font-size: var(--md-sys-typescale-body-large-size); line-height: 1.5;
  resize: vertical;
  transition: box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
#pozn-text:focus { outline: none; border-color: transparent; box-shadow: inset 0 0 0 .125rem var(--md-sys-color-primary); }
#pozn-text::placeholder { color: var(--md-sys-color-on-surface-variant); }
#poznamka .muted.small { margin: 0 0 .5rem; }

/* ---------------------------------------------------------------------------------------
   13. Jedálny lístok – karty jedál, rozbaliteľný popis
   --------------------------------------------------------------------------------------- */
.jcard {
  display: flex; gap: .75rem; align-items: flex-start; margin: 0 0 .5rem; padding: .75rem;
  border: .0625rem solid color-mix(in srgb, var(--md-sys-color-outline-variant) 70%, transparent);
  border-radius: var(--md-sys-shape-corner-large);
  background: color-mix(in srgb, var(--md-sys-color-surface-card) 90%, transparent);
  transition: box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized);
}
.jcard:hover { box-shadow: var(--md-sys-elevation-level1); }
.jcard .jtxt { flex: 1 1 auto; min-width: 0; }
.jcard .jhead {
  font-size: var(--md-sys-typescale-title-small-size);
  line-height: var(--md-sys-typescale-title-small-line-height);
  font-weight: 700;
}
.jcard .mt { font-size: var(--md-sys-typescale-label-medium-size); color: var(--md-sys-color-on-surface-variant); }
.jcard .jpopis {
  margin: .375rem 0 0;
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: 1.5; color: var(--md-sys-color-on-surface-variant);
  animation: md-expand var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized-decelerate) both;
}
@keyframes md-expand {
  from { opacity: 0; transform: translateY(-.25rem); }
  to { opacity: 1; transform: none; }
}
/* Detail jedla = textové tlačidlo Material so šípkou, ktorá sa pri rozbalení otočí */
.jcard .jdet {
  display: inline-block; margin: .4375rem 0 0; padding: .25rem .75rem;
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: transparent; color: var(--md-sys-color-primary);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: 600; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.jcard .jdet:hover { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-opacity), transparent); }
.jcard .jdet.on { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.jcard .jdet .ar {
  display: inline-block; margin-right: .3125rem;
  transition: transform var(--md-sys-motion-duration-medium1) var(--md-sys-motion-easing-emphasized);
}
.jcard .jdet.on .ar { transform: rotate(180deg); }

/* ---------------------------------------------------------------------------------------
   14. Týždenný jedálny lístok
   --------------------------------------------------------------------------------------- */
.tyz .blok { margin: 0 0 1.25rem; }
.tyz-den {
  margin: 0 0 .5rem; padding-bottom: .25rem;
  border-bottom: .0625rem solid var(--md-sys-color-outline-variant);
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  font-weight: 700;
}
.tyz-podanie { margin: 0 0 .75rem; }
/* podanie (OBED / VEČERA) je úroveň nad označeniami riadkov (Polievka / Štandard / Racio),
   preto je plnou farbou textu a o stupeň výraznejšie */
.tyz-podanie > .lbl {
  margin: .375rem 0 .125rem;
  font-size: var(--md-sys-typescale-label-medium-size);
  letter-spacing: .08em; color: var(--md-sys-color-on-surface);
}
.tyz-riadok { display: flex; gap: .5rem; margin: .125rem 0; font-size: var(--md-sys-typescale-body-medium-size); line-height: 1.35; }
.tyz-riadok .lb {
  flex: 0 0 5rem; padding-top: .125rem;
  font-size: var(--md-sys-typescale-label-small-size);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
}
.tyz-riadok .tx { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------------------------------------
   15. Návod
   --------------------------------------------------------------------------------------- */
.navod h2 {
  margin: 1.25rem 0 .375rem;
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
}
.navod h2:first-child { margin-top: 0; }
.navod p { margin: 0 0 .625rem; font-size: var(--md-sys-typescale-body-large-size); line-height: 1.55; }
.navod ul, .navod ol { margin: 0 0 .625rem; padding-left: 1.375rem; }
.navod li { margin: 0 0 .3125rem; font-size: var(--md-sys-typescale-body-large-size); line-height: 1.55; }
.navod li::marker { color: var(--md-sys-color-primary); font-weight: 700; }

/* ---------------------------------------------------------------------------------------
   16. Prihlásenie – textové pole, PIN, číselník
   --------------------------------------------------------------------------------------- */
.fld { display: block; margin: .5rem 0 0; }
.fld > span {
  display: block; margin: 0 0 .25rem;
  font-size: var(--md-sys-typescale-label-medium-size);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--md-sys-color-on-surface-variant);
  transition: color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
/* Material outlined text field */
.fld input {
  display: block; width: 100%; height: 3.5rem; padding: 0 1rem;
  border: .0625rem solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-extra-small);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-lowest) 70%, transparent);
  color: var(--md-sys-color-on-surface);
  font-family: inherit; font-size: 1.25rem; font-weight: 700; letter-spacing: .06em;
  transition: border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.fld:focus-within > span { color: var(--md-sys-color-primary); }
.fld input:focus {
  outline: none; border-color: transparent;
  box-shadow: inset 0 0 0 .125rem var(--md-sys-color-primary);
}
.fld input::placeholder { color: var(--md-sys-color-on-surface-variant); font-size: var(--md-sys-typescale-body-medium-size); font-weight: 400; letter-spacing: 0; }

.pin { display: flex; gap: .5rem; justify-content: center; margin: .5rem 0; }
.pin span {
  flex: 0 0 auto; width: 2.5rem; height: 2.875rem;
  display: flex; align-items: center; justify-content: center;
  border: .0625rem solid var(--md-sys-color-outline-variant);
  border-radius: var(--md-sys-shape-corner-medium);
  background: color-mix(in srgb, var(--md-sys-color-surface-container-low) 80%, transparent);
  font-size: var(--md-sys-typescale-title-large-size);
  font-weight: 700;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              border-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
.pin span.f { border-color: var(--md-sys-color-primary); background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); }

/* číselník – Material plnené tonálne tlačidlá, dotykový cieľ 56 px */
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: .5rem; }
.pad button {
  min-height: 3.5rem;
  border: 0; border-radius: var(--md-sys-shape-corner-large);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: 600; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized);
}
.pad button:hover { background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) var(--md-sys-state-hover-opacity), var(--md-sys-color-secondary-container)); }
.pad button:active { transform: scale(.97); }
.pad button[data-k="OK"] { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.pad button[data-k="OK"]:hover { background: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-hover-opacity), var(--md-sys-color-primary)); }
.pad button[data-k="C"] { background: var(--md-sys-color-surface-container-high); color: var(--md-sys-color-error); }
.pad button[data-k="C"]:hover { background: color-mix(in srgb, var(--md-sys-color-error) var(--md-sys-state-hover-opacity), var(--md-sys-color-surface-container-high)); }

.err { margin: .375rem 0 0; color: var(--md-sys-color-error); font-weight: 700; font-size: var(--md-sys-typescale-body-medium-size); }

/* ---------------------------------------------------------------------------------------
   17. Spodná lišta s navigáciou a tlačidlá
   --------------------------------------------------------------------------------------- */
.bar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; flex-wrap: wrap; gap: .5rem;
  width: 100%; max-width: 45rem; margin: 0 auto;
  padding: .5rem .75rem calc(.5rem + env(safe-area-inset-bottom, 0px));
  background: var(--md-glass-surface);
  border-top: .0625rem solid var(--md-glass-outline);
  -webkit-backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-saturate));
  backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-saturate));
}
/* tlačidlo – plnené tonálne (vedľajšia akcia), hlavná akcia je plnená primárna */
.btn {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .125rem;
  min-height: 3rem; padding: .5rem 1rem;
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);
  font-size: var(--md-sys-typescale-label-large-size);
  line-height: var(--md-sys-typescale-label-large-line-height);
  font-weight: var(--md-sys-typescale-label-large-weight);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              box-shadow var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized),
              transform var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-emphasized);
}
.btn:hover {
  background: color-mix(in srgb, var(--md-sys-color-on-secondary-container) var(--md-sys-state-hover-opacity), var(--md-sys-color-secondary-container));
  box-shadow: var(--md-sys-elevation-level1);
}
.btn:active { transform: scale(.98); }
.btn.pri { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.btn.pri:hover { background: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-hover-opacity), var(--md-sys-color-primary)); }
.btn .big { font-size: var(--md-sys-typescale-label-large-size); font-weight: 700; }
.btn .sub { font-size: var(--md-sys-typescale-label-small-size); font-weight: 500; color: inherit; opacity: .85; }
.btn[hidden] { display: none; }
#back .big::before { content: "‹  "; }
.kal .big::before { content: "‹  "; }

.bar > .btn { flex: 1 1 0; min-width: 0; min-height: 3rem; padding: .375rem .875rem; }
/* obrazovky, kde lišta drží len pár akcií: tlačidlá majú šírku svojho textu a sú na strede */
body[data-page="stravnici"] .bar > .btn,
body[data-page="listok"] .bar > .btn,
body[data-page="tyzden"] .bar > .btn { flex: 0 0 auto; }
/* Stravníci a Jedálny lístok dňa: lišta je priesvitná (bez výplne a rámika) – tlačidlá plávajú nad obsahom */
body[data-page="stravnici"] .bar,
body[data-page="listok"] .bar {
  justify-content: center; background: transparent; border-top: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body[data-page="tyzden"] .bar { justify-content: center; }

/* dialógové akcie = textové tlačidlá Material (v popupoch sa nehodí plnená pilulka z lišty) */
.dbtns { display: flex; gap: .5rem; margin-top: .5rem; }
.dbtns .btn {
  flex: 1 1 0; min-height: 2.75rem;
  background: transparent; color: var(--md-sys-color-primary); box-shadow: none;
}
.dbtns .btn:hover { background: color-mix(in srgb, var(--md-sys-color-primary) var(--md-sys-state-hover-opacity), transparent); box-shadow: none; }
.dbtns .btn:active { transform: none; }
.dbtns .btn.pri { background: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary); }
.dbtns .btn.pri:hover { background: color-mix(in srgb, var(--md-sys-color-on-primary) var(--md-sys-state-hover-opacity), var(--md-sys-color-primary)); }

/* ---------------------------------------------------------------------------------------
   18. Dialógy (popupy) – Material basic dialog na skle + scrim
   --------------------------------------------------------------------------------------- */
dialog {
  width: calc(100% - 2rem); max-width: 26.25rem; max-height: calc(100dvh - 3rem); overflow: auto;
  padding: 1.5rem;
  border: .0625rem solid var(--md-glass-outline);
  border-radius: var(--md-sys-shape-corner-extra-large);
  background: var(--md-glass-surface-strong);
  color: var(--md-sys-color-on-surface);
  box-shadow: var(--md-sys-elevation-level5);
  -webkit-backdrop-filter: blur(1.5rem) saturate(var(--md-glass-saturate));
  backdrop-filter: blur(1.5rem) saturate(var(--md-glass-saturate));
  animation: md-dialog-in var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized-decelerate) both;
}
@keyframes md-dialog-in {
  from { opacity: 0; transform: scale(.9) translateY(.5rem); }
  to { opacity: 1; transform: none; }
}
dialog::backdrop {
  background: color-mix(in srgb, var(--md-sys-color-scrim) 45%, transparent);
  animation: md-scrim-in var(--md-sys-motion-duration-short4) linear both;
}
@keyframes md-scrim-in { from { opacity: 0; } to { opacity: 1; } }
dialog:not([open]) { display: none; }
/* popupy v prehliadačoch bez `<dialog>.showModal` (iOS < 15.4, staršie WebView) */
dialog[data-fallback] {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0; z-index: 40;
  animation: none;
}
.zaclona {
  position: fixed; inset: 0; z-index: 35;
  background: color-mix(in srgb, var(--md-sys-color-scrim) 45%, transparent);
}
dialog h2 {
  margin: 0 0 .5rem; padding-right: 2.5rem;
  font-size: var(--md-sys-typescale-headline-small-size);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  font-weight: var(--md-sys-typescale-headline-small-weight);
}
dialog .x {
  position: absolute; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--md-sys-shape-corner-full);
  background: transparent; color: var(--md-sys-color-on-surface-variant);
  font-size: 1.5rem; line-height: 1; font-weight: 700; cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-emphasized);
}
dialog .x:hover { background: color-mix(in srgb, var(--md-sys-color-on-surface) var(--md-sys-state-hover-opacity), transparent); }
dialog ul { list-style: none; margin: .5rem 0 1rem; padding: 0; }
dialog li {
  padding: .5rem 0;
  border-bottom: .0625rem solid color-mix(in srgb, var(--md-sys-color-outline-variant) 55%, transparent);
  font-size: var(--md-sys-typescale-body-medium-size);
  font-weight: 500;
}
dialog li:last-child { border-bottom: 0; }

/* ---------------------------------------------------------------------------------------
   19. Obrazovkové doladenia
   --------------------------------------------------------------------------------------- */
/* Stravníci: kompaktné rozstupy, aby sa ponuka zmesila na obrazovku mobilu bez posúvania */
body[data-page="stravnici"] .day-head { margin-bottom: .5rem; }
body[data-page="stravnici"] .pg-title {
  margin-bottom: 0;
  font-size: var(--md-sys-typescale-title-medium-size);
  line-height: var(--md-sys-typescale-title-medium-line-height);
}
body[data-page="stravnici"] .pg-title.bez-podnadpisu { margin-bottom: .5rem; }
body[data-page="stravnici"] .pg-sub { margin: 0 0 .75rem; }
body[data-page="stravnici"] .rows { gap: .5rem; }
body[data-page="stravnici"] .wrap { padding-bottom: 0; }

/* Prehľad objednávky: lištu nemá, obsah sa posúva v #app */
body[data-page="prehlad"] #app { height: calc(100vh - var(--top-h, 3.5rem)); height: calc(100dvh - var(--top-h, 3.5rem)); }
body[data-page="prehlad"] .wrap {
  min-height: 0; overflow-y: auto; scrollbar-width: thin;
  padding-top: .25rem; padding-bottom: .375rem;
}
body[data-page="prehlad"] .day-head { margin-bottom: 0; }
/* Prázdny riadok po titulnom paneli má nad sebou aj pod sebou **rovnakú malú medzeru** (4 px):
   hore ho oddeľuje od titulného panela s dňom, dole od tlačidiel podania, takže stojí v páse
   vyvážene. */
body[data-page="prehlad"] .pg-title { margin: .25rem 0 0; font-size: var(--md-sys-typescale-title-small-size); line-height: 1.25rem; }
/* nadpis prehľadu je prázdny – riadok si drží výšku jedného riadku textu, takže pod titulným
   panelom ostáva prázdny riadok namiesto textu */
body[data-page="prehlad"] .pg-title:empty { min-height: 1.25rem; }
body[data-page="prehlad"] .pg-title.bez-podnadpisu { margin-bottom: .25rem; }
body[data-page="prehlad"] .podanie-stav {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  margin: 0; text-align: left;
}
body[data-page="prehlad"] .blok.zavrete .drow { color: var(--md-sys-color-on-surface-variant); }
body[data-page="prehlad"] .ctl { margin-bottom: 0; }
/* taby a mriežka panelov sú tesnejšie, aby sa celý deň (šesť stravníkov, legenda aj taby)
   zmestil na výšku obrazovky mobilu bez posúvania */
body[data-page="prehlad"] .prepinac { margin-bottom: .375rem; }
body[data-page="prehlad"] .prepinac .prep { min-height: 2.625rem; }
body[data-page="prehlad"] .blok { margin-bottom: 0; }
body[data-page="prehlad"] .blok:last-child { margin-bottom: 0; }
body[data-page="prehlad"] .spodok { margin: .1875rem 0 0; padding-top: .1875rem; }
body[data-page="prehlad"] .alergeny .tx { font-size: var(--md-sys-typescale-label-small-size); }
body[data-page="tyzden"] .pg-title { margin-bottom: 0; }

/* Prihlásenie: rozstupy tak, aby sa celý obsah zmestil na obrazovku mobilu */
body[data-page="prihlasenie"] .pg-title { margin-bottom: .625rem; }
body[data-page="prihlasenie"] .wrap > .muted.small { margin: .375rem 0 .125rem; }
body[data-page="prihlasenie"] .lbl { margin: 0 0 .25rem; }

/* ---------------------------------------------------------------------------------------
   20. Prístupnosť: obmedzený pohyb, vyšší kontrast, tlač
   --------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}
@media (prefers-contrast: more) {
  :root { --md-glass-outline: var(--md-sys-color-outline); }
  .pick, .jcard, .soup, .day, .fld input, .pin span { border-color: var(--md-sys-color-outline); }
  .drow { border-bottom-color: var(--md-sys-color-outline); }
  dialog { background: var(--md-sys-color-surface-container-high); }
}
@media print {
  /* na papieri niet navigácie ani akcií – tlačí sa len obsah obrazovky */
  .top, .bar, .dakcia, .demo-reset, .dnav, .drow .zmen { display: none; }
  html[data-theme] { color-scheme: light; }
  body { background: #fff; color: #000; background-image: none; }
  /* Prehľad má na obrazovke obsah v pevnej výške okna so scrollom – na papieri musí tiecť celý */
  body[data-page="prehlad"] #app { height: auto; }
  body[data-page="prehlad"] .wrap { overflow: visible; }
  /* na papieri ide o obsah: výzva „Poznámka“ sa netlačí, text existujúcej poznámky áno */
  .pozn-btn:not(.on):not(.off) { display: none; }
  /* riadok sa v tlači skladá pod seba (legenda, potom poznámka) – na papieri sa číta lineárne */
  .spodok { display: block; }
  .pozn { margin-left: 0; margin-top: .25rem; }
  .pozn-txt, .pozn-ok { display: inline; -webkit-line-clamp: unset; overflow: visible; }
  dialog { display: none; }
}