/* Prepinac sezony — design/app/admin-rezervace.jsx (RezervacePage). */
.season-switch { margin-bottom: 16px; }
.season-switch__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}
.season-switch__text { text-align: center; }
.season-switch__eyebrow { color: var(--color-ink-60); margin-bottom: 2px; }
.season-switch__range { font-family: var(--font-display); font-size: 22px; font-weight: 400; }
/* Rozsah se smí zalomit jen mezi daty, ne uprostřed data (revize mobilu 2026-10-04). */
.season-switch__date { white-space: nowrap; }

/* Telefon: navigace dne (‹ datum ›) spadne pod nadpis, místo aby ho
   rozdrtila do tří řádků (revize mobilu 2026-10-04). */
@media (max-width: 640px) {
  .season-switch__range { font-size: 19px; }
  .adm-section-head--day { flex-wrap: wrap; }
}

.date-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  min-width: 140px;
  height: 36px;
  border-radius: 10px;
  background: var(--glass-soft-bg);
  border: 1px solid color-mix(in oklab, var(--color-ink-100) 14%, transparent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-100);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.date-pill:hover {
  background: color-mix(in oklab, var(--color-ink-100) 6%, transparent);
  border-color: color-mix(in oklab, var(--color-ink-100) 24%, transparent);
}
/* Nativni input zustava kvuli vyberu data, jen je pres pilulku pruhledny. */
.date-pill__input {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.day__nav { display: inline-flex; align-items: center; gap: 8px; }

.day__closed {
  padding: 24px;
  border-radius: 16px;
  background: var(--glass-soft-bg);
  text-align: center;
}
/* Zavřený den, který přesto má rezervace — důvod jen jako poznámka nad běhy. */
.day__closed--note { padding: 10px 14px; margin: 0 0 14px; color: var(--color-ink-60); }

.day__tabs {
  display: flex;
  gap: 4px;
  padding: 10px 12px;
  margin: 0 0 14px -14px;
  border-bottom: 1px solid var(--glass-soft-stroke);
  flex-wrap: wrap;
}
.day__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-ink-60);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  line-height: normal;
  cursor: pointer;
}
.day__tab:hover { color: var(--color-ink-100); background: color-mix(in oklab, var(--color-ink-100) 5%, transparent); }
.day__tab-count { font-variant-numeric: tabular-nums; font-weight: 500; opacity: 0.5; font-size: 12px; }
.day__tab[data-active='true'] {
  color: var(--color-brand-orange-deep);
  background: color-mix(in oklab, var(--color-brand-orange) 14%, transparent);
  border-color: color-mix(in oklab, var(--color-brand-orange) 30%, transparent);
}
.day__tab[data-active='true'] .day__tab-count { opacity: 0.85; color: var(--color-brand-orange); }

/* Oddělovač pod záložkami jde od kraje ke kraji karty jako hlavička tabulky
   pod ním (Table.css, majitel 2026-10-05); tabulka dne už vlastní rám nemá. */
.adm-section-body > .day__tabs {
  margin-inline: calc(-1 * var(--section-pad));
  padding-inline: var(--section-pad);
}

.detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--color-ink-100) 4%, transparent);
  font-size: 14px;
}

.detail__head-item { display: inline-flex; align-items: center; gap: 8px; }
.detail__head-item svg { color: var(--color-ink-60); }
.detail__head .num { font-size: 14px; font-weight: 500; }

/* Karta klienta — design/app/admin-rezervace.jsx (RezervaceDetailModal).
   Bez prokliku a bez chevronu: /admin/klienti je az P5-FE. */
.detail__client {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-soft-stroke);
  background: color-mix(in oklab, var(--color-brand-orange) 6%, transparent);
}
.detail__client-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-brand-orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
}
.detail__client-text { flex: 1; min-width: 0; }
.detail__client-name { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.detail__client-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--color-ink-60);
}
.detail__client-meta span { display: inline-flex; align-items: center; gap: 6px; }
.detail__client-meta svg { color: var(--color-ink-40); }

.detail__contact {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px 12px;
  margin: 16px 0 0;
  font-size: 14px;
}

.detail__contact dt {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-ink-60);
}

.detail__contact dd {
  margin: 0;
}

/* D-40: „Poslat klientovi e-mail o změně“ pod výběrem počtu osob. */
.detail__notify { margin: 0 0 16px; }

.detail__error {
  margin-top: 12px;
  color: oklch(0.5 0.18 25);
}

/* Stepper pres celou sirku modalu — `design/app/admin-rezervace.jsx:218`
   (StepDot + vlasove spojnice `flex: 1; height: 1; min-width: 24`). */
.steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-soft-stroke);
  list-style: none;
}

.steps__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-ink-60);
}

.steps__line {
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: var(--color-ink-20);
}

.steps__item[data-state='current'] {
  color: var(--color-ink-100);
  font-weight: 600;
}

.steps__dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in oklab, var(--color-ink-100) 8%, transparent);
  color: var(--color-ink-60);
}

.steps__item[data-state='current'] .steps__dot {
  background: var(--color-ink-100);
  color: #fff;
}

.steps__item[data-state='done'] .steps__dot {
  background: var(--color-brand-orange);
  color: #fff;
}

.steps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .steps__grid { grid-template-columns: 1fr; }
}

.steps__persons {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
}

.steps__persons button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--color-ink-20);
  background: var(--color-bg-elevated);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.steps__persons button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.steps__persons > span {
  flex: 1;
  text-align: center;
  font-family: var(--font-display);
  font-size: 20px;
}

.steps__kind {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--color-ink-100) 4%, transparent);
  border: 1px solid var(--glass-soft-stroke);
}

.steps__kind button {
  padding: 10px 12px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: var(--color-ink-60);
  font-size: 13px;
  cursor: pointer;
}

.steps__kind button[data-active='true'] {
  background: var(--color-bg-elevated);
  color: var(--color-ink-100);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

.steps__kind button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Pruh se souhrnem terminu nad prepinacem Klient/Host (krok 2). */
.steps__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--color-ink-100) 4%, transparent);
  font-size: 13px;
  font-weight: 600;
}

.steps__summary span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.steps__summary svg { color: var(--color-ink-60); }

/* Krok 3 — dva bloky s kartami misto plocheho <dl>. */
.steps__block + .steps__block { margin-top: 16px; }

.steps__block-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-ink-60);
  margin-bottom: 8px;
}

.steps__card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--glass-soft-stroke);
  border-radius: 12px;
  padding: 14px;
}

/* Radek karty — `admin-rezervace.jsx:493` (Row): popisek je `t-eyebrow`
   10 px, hodnota 14 px v normalni vahe a linka je POD kazdym radkem,
   vcetne posledniho. */
.steps__card-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  font-size: 14px;
  border-bottom: 1px solid var(--glass-soft-stroke);
}

.steps__card-row > span { font-size: 10px; color: var(--color-ink-60); }

.steps__card--person { display: flex; align-items: center; gap: 12px; }

.steps__person-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in oklab, var(--color-brand-orange) 15%, transparent);
  color: var(--color-brand-orange-deep);
  font-family: var(--font-display);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.steps__person-name { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.steps__person-meta { font-size: 12px; color: var(--color-ink-60); }

/* Naseptavac klientu — `design/app/admin-rezervace.jsx:391`. Seznam visi
   v portalu na `document.body`, protoze uvnitr modalu by se orizl. */
.lookup__field { position: relative; display: block; }

.lookup__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-ink-40);
  pointer-events: none;
}

.lookup__input { padding-left: 36px; }

.lookup__portal {
  position: fixed;
  z-index: 10000;
  max-height: 280px;
  overflow-y: auto;
  border-radius: 12px;
  border: 1px solid var(--glass-soft-stroke);
  background: var(--color-bg-elevated);
  box-shadow: var(--shadow-lg);
}

.lookup__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  border: none;
  border-bottom: 1px solid var(--glass-soft-stroke);
  background: transparent;
  cursor: pointer;
}

.lookup__item:last-child { border-bottom: none; }
.lookup__item:hover { background: color-mix(in oklab, var(--color-ink-100) 4%, transparent); }

.lookup__empty {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--color-ink-60);
  margin: 0;
}

.lookup__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  background: color-mix(in oklab, var(--color-brand-orange) 18%, transparent);
  color: var(--color-brand-orange-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.lookup__item-text { display: flex; flex-direction: column; min-width: 0; }
.lookup__item-name { font-size: 13px; font-weight: 500; }
.lookup__item-mail { font-size: 11px; color: var(--color-ink-60); }

.lookup__picked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--color-brand-orange);
  background: color-mix(in oklab, var(--color-brand-orange) 8%, transparent);
}

.lookup__picked-text { flex: 1; min-width: 0; }
.lookup__picked-avatar { width: 38px; height: 38px; font-size: 13px; }

.lookup__picked-name {
  font-weight: 600;
  font-size: 14px;
}

/* 390 px (R-14): navigace dne stoji VEDLE titulku a akce radku jsou ve
   spodni casti karty s linkou nad sebou. Oboji uz plati bez dalsiho CSS —
   `.adm-section-head` (Card.css) drzi navigaci v jedne rade s titulkem a
   `.adm-table.responsive td.actions` (Table.css) je hodnotu za hodnotu
   totozny s `design/admin.css:128`. Etalon `visual/out/design/
   admin-rezervace-390.png` zadne dalsi mobilni pravidlo nema — nema ho
   proto ani app. */

/* Typografie radku denni tabulky, hodnota za hodnotou z
   `design/app/admin-rezervace.jsx:677-680`: jmeno polotucne, e-mail o stupen
   mensi (`.num` uz dava mono 13 px), bunka `#` ve svetlejsim inkoustu.
   Selektory mirí na `tbody`, aby hlavicka zustala v label fontu. */
.adm-table tbody td.day__kind { color: var(--color-ink-60); }
.adm-table tbody td.day__name { font-weight: 600; }
.adm-table tbody td.day__email { font-size: 12px; }

/* Sloupec `#` ma v etalonu pevnou sirku 40 px
   (`design/app/admin-rezervace.jsx:666`: `<th style={{ width: 40 }}>#</th>`).
   Bez ni da `table-layout: auto` bunce ~71 px a cely radek (jmeno, e-mail,
   telefon) se posune o 28 px doprava. */
.adm-table th.day__kind,
.adm-table td.day__kind { width: 40px; }
/* Desktop ukazuje písmeno z etalonu, slovo jen čtečce; mobilní karta naopak. */
.day__kind-word {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .day__kind-mark { display: none; }
  .day__kind-word { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

/* D-37: nabídka existujícího klienta u hosta s jeho e-mailem. */
.steps__match {
  display: flex;
  align-items: center;
  gap: 10px 12px;
  flex-wrap: wrap;
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 14px;
  color: var(--color-brand-orange-deep);
  background: color-mix(in oklab, var(--color-brand-orange) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-brand-orange) 22%, transparent);
}

.steps__match p {
  flex: 1 1 220px;
  margin: 0;
  font-size: 14px;
  color: var(--color-ink-100);
}

/* D-37: checkbox „Poslat potvrzení e-mailem“ pod shrnutím. */
.steps__notify {
  margin-top: 4px;
}
/* Chybová hláška pod obsahem modalu a panelů klientské zóny. */
.app__error {
  margin-top: 12px;
  color: var(--color-danger);
}

/*
 * Etalon design/app/client-new-rezervace.jsx (L87) drží Datum/Počet osob
 * natvrdo ve dvou sloupcích bez responzivního kolapsu. `.steps__grid`
 * z P4 (admin-day.css) pod 640px kolabuje na jeden sloupec pro admin
 * modal - pro klientský modal to přepisujeme, aniž bychom sahali
 * do P4 souboru nebo ovlivnili admin modal.
 */
.app-zone__grid {
  grid-template-columns: 1fr 1fr;
}

/* ---- Statistické dlaždice (design/admin.css .adm-stat + .adm-stat-plain) ---- */
.app-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}
.app-stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px;
  border-radius: var(--radius-lg);
  background: var(--glass-bold-bg);
  backdrop-filter: blur(var(--glass-bold-blur));
  -webkit-backdrop-filter: blur(var(--glass-bold-blur));
  border: 1px solid var(--glass-bold-stroke);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.app-stat__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-stat[data-tone='orange'] .app-stat__icon {
  background: color-mix(in oklab, var(--color-brand-orange) 14%, transparent);
  color: var(--color-brand-orange-deep);
}
.app-stat[data-tone='green'] .app-stat__icon {
  background: color-mix(in oklab, oklch(0.78 0.16 145) 14%, transparent);
  color: oklch(0.45 0.16 145);
}
.app-stat[data-tone='blue'] .app-stat__icon {
  background: color-mix(in oklab, oklch(0.65 0.16 250) 14%, transparent);
  color: oklch(0.45 0.14 250);
}
.app-stat__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ink-60);
  margin-bottom: 4px;
}
.app-stat__value {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
  color: var(--color-ink-100);
}

/* ---- Mřížka permanentek na přehledu (MiniCardCli) ---- */
.app-passgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.app-minicard {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  text-decoration: none;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-brand-orange) 5%, transparent),
    color-mix(in oklab, var(--color-ink-100) 2%, transparent)
  );
  border: 1px solid color-mix(in oklab, var(--color-ink-100) 10%, transparent);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.app-minicard:hover {
  border-color: color-mix(in oklab, var(--color-brand-orange) 30%, transparent);
  box-shadow: 0 6px 20px -10px color-mix(in oklab, var(--color-brand-orange) 35%, transparent);
}
.app-minicard__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in oklab, var(--color-brand-orange) 18%, transparent);
  color: var(--color-brand-orange-deep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.app-minicard__name {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink-100);
}
.app-minicard__value {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.app-minicard[data-tone='low'] .app-minicard__value { color: oklch(0.55 0.16 145); }
.app-minicard[data-tone='med'] .app-minicard__value { color: oklch(0.65 0.16 75); }
.app-minicard[data-tone='high'] .app-minicard__value { color: var(--color-danger); }

/* ---- Nejbližší návštěva ---- */
/* Etalon u teto karty stahuje hlavicku (`paddingBottom: 4`) i telo
   (`paddingTop: 8`); Card sazi vychozich 18/22, coz by kartu proti
   etalonu protahlo o 28 px. */
.app-next .adm-section-head { padding-bottom: 4px; }
.app-next .adm-section-body { padding-top: 8px; }
.app-next__date {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  color: var(--color-ink-100);
}
.app-next__meta {
  margin-top: 10px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
  color: var(--color-ink-80);
}
.app-next__meta > span { display: inline-flex; align-items: center; gap: 6px; }
/* Karta další návštěvy je klikací — otevře detail rezervace s „Přidat do
   kalendáře“ (majitel 2026-10-05). Tlačítko přetáhne odsazení, aby hover
   pruh obepnul obsah a text zůstal na místě. */
.app-next__open {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  width: calc(100% + 24px);
  margin: -12px;
  padding: 12px;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  transition: background 0.15s;
}
.app-next__open:hover { background: color-mix(in oklab, var(--color-brand-orange) 8%, transparent); }
.app-next__open:focus-visible { outline: 2px solid var(--color-brand-orange-deep); outline-offset: 2px; }
/* Uvnitř tlačítka jsou jen <span>y; datum zůstává na vlastním řádku. */
.app-next__date { display: block; }
.app-next__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--color-brand-orange-deep);
}
/* Etalon sazi `padding: 36px 22px` primo na `.adm-section-body`, cimz jeho
   vlastni 22px NAHRADI. U nas je prazdny stav az uvnitr `.adm-section-body`
   (Card), takze se pada scitaji — odecitame proto 22px na obou osach:
   22 + 14 = 36 svisle, 22 + 0 = 22 vodorovne. Totez u `--lg` (22 + 26 = 48). */
.app-empty { text-align: center; padding: 14px 0; }
.app-empty__title { font-family: var(--font-display); font-size: 24px; color: var(--color-ink-80); margin-bottom: 10px; }
.app-empty__text { font-size: 14px; color: var(--color-ink-60); margin-bottom: 18px; }
/* Prazdny stav permanentek na /app/prehled ma v etalonu vlastni typografii
   (22/ink-100/mb 8 a text 13/1.55/max 420) — nedrzi se vychoziho `.app-empty`,
   ktere kopiruje blok „Zadna naplanovana navsteva“ s tlacitkem pod textem. */
.app-empty--sm .app-empty__title { font-size: 22px; color: var(--color-ink-100); margin-bottom: 8px; }
.app-empty--sm .app-empty__text {
  font-size: 13px; line-height: 1.55; max-width: 420px; margin: 0 auto;
}
/* Doplňující věta pod textem limitu rezervací (D-42). */
.app-empty--sm .app-empty__note { margin-top: 8px; font-size: 12px; color: var(--color-ink-50); }
.app-empty__icon {
  width: 48px; height: 48px; border-radius: 50%; margin: 0 auto 14px;
  background: color-mix(in oklab, var(--color-brand-orange) 14%, transparent);
  color: var(--color-brand-orange-deep);
  display: inline-flex; align-items: center; justify-content: center;
}

.app-section { margin-bottom: 20px; }

/* ---- Seznam rezervací (/app/rezervace) ---- */
.app-tabs { padding: 0 14px; margin: 14px 0 12px; }
.app-tableskel { padding: 14px; }
.app-cell--center { text-align: center; }
.app-tablefoot {
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--glass-soft-stroke);
}

/* ---- Permanentky (/app/permanentky) ---- */
.app-passcards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.app-passcard {
  position: relative;
  display: block;
  padding: 22px;
  border-radius: 18px;
  text-decoration: none;
  background: linear-gradient(
    135deg,
    color-mix(in oklab, var(--color-brand-orange) 5%, transparent),
    color-mix(in oklab, var(--color-ink-100) 2%, transparent)
  );
  border: 1px solid color-mix(in oklab, var(--color-ink-100) 10%, transparent);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.app-passcard:hover {
  border-color: color-mix(in oklab, var(--color-brand-orange) 30%, transparent);
  box-shadow: 0 6px 20px -10px color-mix(in oklab, var(--color-brand-orange) 35%, transparent);
}
.app-passcard__head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.app-passcard__icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: color-mix(in oklab, var(--color-brand-orange) 18%, transparent);
  color: var(--color-brand-orange-deep);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.app-passcard__name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--color-ink-100); }
.app-passcard__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-60); margin-bottom: 4px;
}
.app-passcard__value { font-family: var(--font-display); font-size: 44px; font-weight: 600; line-height: 1; }
.app-passcard[data-tone='low'] .app-passcard__value { color: oklch(0.55 0.16 145); }
.app-passcard[data-tone='med'] .app-passcard__value { color: oklch(0.65 0.16 75); }
.app-passcard[data-tone='high'] .app-passcard__value { color: var(--color-danger); }

.app-empty--lg { padding: 26px 0; }
.app-empty--lg .app-empty__title { color: var(--color-ink-100); }
.app-empty__icon--lg { width: 56px; height: 56px; margin-bottom: 16px; }
.app-empty__text--wide { max-width: 460px; margin: 0 auto; line-height: 1.6; }

/* ---- Detail permanentky (/app/permanentky/$id) ---- */
.app-detailgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 22px;
  align-items: center;
}
.app-detailgrid__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-ink-60); margin-bottom: 6px;
}
.app-detailgrid__card { display: flex; align-items: center; gap: 12px; }
.app-detailgrid__name { font-size: 16px; font-weight: 600; color: var(--color-ink-100); }
.app-detailgrid__issued { font-size: 18px; font-weight: 500; color: var(--color-ink-100); }
.app-detailgrid__note { font-size: 13px; color: var(--color-ink-60); margin-top: 2px; }
.app-detailgrid__value { font-family: var(--font-display); font-size: 56px; font-weight: 600; line-height: 1; }
.app-detailgrid__value[data-tone='low'] { color: oklch(0.55 0.16 145); }
.app-detailgrid__value[data-tone='med'] { color: oklch(0.65 0.16 75); }
.app-detailgrid__value[data-tone='high'] { color: var(--color-danger); }

/* ---- Filtry historie ---- */
.app-filters {
  padding: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--glass-soft-stroke);
}
.app-filters__field { display: inline-flex; align-items: center; gap: 6px; }
.app-filters__field--right { margin-left: auto; }
.app-filters__label { font-size: 12px; color: var(--color-ink-60); }
.app-filters .input,
.app-filters .select { width: auto; min-width: 140px; }
/* Telefon: typ a řazení přes celou šířku, Od a Do vedle sebe, všechna pole
   stejně široká (revize mobilu 2026-10-04). */
@media (max-width: 640px) {
  .app-filters { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
  .app-filters__field { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; }
  .app-filters__field:first-child,
  .app-filters__field--right { grid-column: 1 / -1; }
  .app-filters__field--right { margin-left: 0; }
  .app-filters .input,
  .app-filters .select { width: 100%; min-width: 0; }
}

/* ---- Pilulka typu pohybu (HistoryTypePillCli) ---- */
.app-histpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.app-histpill[data-tone='visit'] {
  background: color-mix(in oklab, oklch(0.65 0.20 25) 15%, transparent);
  color: oklch(0.45 0.18 25);
}
.app-histpill[data-tone='purchase'] {
  background: color-mix(in oklab, oklch(0.65 0.18 145) 15%, transparent);
  color: oklch(0.42 0.16 145);
}
.app-histpill[data-tone='transfer'] {
  background: color-mix(in oklab, oklch(0.65 0.16 250) 16%, transparent);
  color: oklch(0.45 0.14 250);
}
.app-cell--muted { color: var(--color-ink-60); }
.app-cell--strong { font-weight: 700; }
.app-cell--strong [data-tone='visit'] { color: oklch(0.45 0.18 25); }
.app-cell--strong [data-tone='purchase'] { color: oklch(0.42 0.16 145); }
.app-cell--strong [data-tone='transfer'] { color: oklch(0.45 0.14 250); }

.app-identity { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.app-identity__avatar {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, oklch(0.78 0.16 145), oklch(0.72 0.16 55));
  color: white; display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
}
.app-identity__name { font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--color-ink-100); }
.app-identity__email { font-size: 13px; color: var(--color-ink-60); }
/*
 * Etalon (design/app/client-permanentky.jsx L367, L399) drží Jméno/Příjmení
 * i Nové heslo/Potvrzení natvrdo ve dvou sloupcích bez responzivního
 * kolapsu (inline `gridTemplateColumns: '1fr 1fr'` bez media query) — stejný
 * precedent jako `.app-zone__grid` výš, proto tu žádný `@media` kolaps není.
 */
.app-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.app-actions { display: flex; gap: 10px; margin-top: 20px; }
/*
 * Etalonový řádek (`display:flex` bez `flexWrap`) na 390 px zalomí jen
 * TEXT uvnitř levého sloupce a tlačítko nechá vpravo na stejném řádku —
 * `flex-wrap: wrap` by celý řádek zalomil pod sebe.
 */
.app-rowsplit { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-rowsplit__title { font-size: 14px; font-weight: 500; color: var(--color-ink-100); }
.app-rowsplit__note { font-size: 12px; color: var(--color-ink-60); margin-top: 4px; }
.app-account__note { margin-top: 8px; }
.app__ok { color: oklch(0.45 0.16 145); margin-top: 8px; }