/* ================================================================
   MUSHMASTER.CZ — DESIGN SYSTEM v3.0
   Barvy loga: tmavá maróna #3C1A22 + zlatá #D4870A
   Kulaté, uhlazené, mobilní. Světlý + Tmavý režim.
   ================================================================ */

/* ── Centrální SVG ikona (Heroicons outline 24×24) ────────────────
   Renderuje se ze souboru icons.js. Dědí barvu (currentColor),
   zarovnaná vůči textu jako emoji. Pro vlastní rozměry použijeme
   data-icon-size nebo .icon--lg / .icon--sm / .icon--xl modifikátory.
   Pro samostatné ikony bez textu zachová min-width/height
   pro touch target.
   ────────────────────────────────────────────────────────────── */
.icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;        /* zarovnání s baseline textu */
  flex-shrink: 0;
  color: currentColor;
  stroke: currentColor;
  fill: none;
  pointer-events: none;
}
/* Filled varianta — pro brand symboly jako tlapka, srdce, hvězda */
.icon.icon--filled {
  fill: currentColor;
  stroke: none;
}
.icon--sm { width: 14px; height: 14px; vertical-align: -2px; }
.icon--lg { width: 22px; height: 22px; vertical-align: -4px; }
.icon--xl { width: 28px; height: 28px; vertical-align: -6px; }
.icon--xxl { width: 40px; height: 40px; vertical-align: middle; }

/* Sémantické barevné varianty (volitelné) */
.icon-danger    { color: #c62828; }
.icon-success   { color: #2e7d32; }
.icon-warning   { color: #e65100; }
.icon-info      { color: #1565c0; }
.icon-muted     { color: var(--text-muted); }
.icon-primary   { color: var(--maroon); }
.icon-accent    { color: var(--orange); }

/* Wrapper <i data-icon> nesmí být kurzíva (default <i>) */
i[data-icon] {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

/* Barevné kruhové indikátory stavu (náhrada za 🟢🔴🔵🟡⚫⚪) */
.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: currentColor;
  vertical-align: middle;
}
.status-dot--green  { background: #2e7d32; }
.status-dot--red    { background: #d32f2f; }
.status-dot--blue   { background: #1565c0; }
.status-dot--yellow { background: #f9a825; }
.status-dot--orange { background: #e65100; }
.status-dot--purple { background: #7e57c2; }
.status-dot--grey   { background: #9e9e9e; }
.status-dot--white  { background: #fff; border: 1px solid var(--border); }
.status-dot--black  { background: #212121; }
.status-dot--lg     { width: 14px; height: 14px; }
.status-dot--sm     { width: 8px;  height: 8px;  }

/* Mezera mezi ikonou a textem v tlačítkách */
button .icon + *,
button [data-icon] + *,
.btn .icon + *,
.btn [data-icon] + * {
  margin-left: 6px;
}
button *:not(.icon):not([data-icon]) + .icon,
button *:not(.icon):not([data-icon]) + [data-icon],
.btn *:not(.icon):not([data-icon]) + .icon,
.btn *:not(.icon):not([data-icon]) + [data-icon] {
  margin-left: 6px;
}


:root {
  --maroon:        #3C1A22;
  --maroon-mid:    #5C2C38;
  --maroon-light:  #8B4858;
  --orange:        #D4870A;
  --orange-dark:   #B87208;
  --orange-pale:   #F8E8C0;

  --bg-page:       #F2E9DF;
  --bg-app:        #FFFCF8;
  --bg-surface:    #FAF5EE;
  --bg-surface2:   #F0E8DC;
  --bg-input:      #FFFCF8;

  --text-primary:   #2A1018;
  --text-secondary: #6B3848;
  --text-muted:     #9E7878;
  --text-inverted:  #FFFFFF;

  --border:         #DDD0C0;
  --border-mid:     #C0A898;
  --border-focus:   #D4870A;

  --btn-p-bg:       #3C1A22;
  --btn-p-text:     #FFFFFF;
  --btn-p-hover:    #5C2C38;
  --btn-s-bg:       #D4870A;
  --btn-s-text:     #FFFFFF;
  --btn-s-hover:    #B87208;
  --btn-b-bg:       #5C2C38;
  --btn-b-text:     #FFFFFF;
  --btn-b-hover:    #3C1A22;

  --nav-bg:         #2A1018;
  --nav-text:       rgba(255,255,255,0.68);
  --nav-active:     var(--orange);
  --nav-active-bd:  var(--orange);
  --nav-active-bg:  rgba(212,135,10,0.15);

  --header-bg-from: #3C1A22;
  --header-bg-to:   #5C2C38;
  --header-text:    #FDEEE5;
  --header-sub:     rgba(253,238,229,0.58);

  --overlay-bg:     rgba(20,6,10,0.86);
  --divider:        #EDE4D8;
  --stripe:         #D4870A;

  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;

  --shadow-sm:  0 2px 6px rgba(60,26,34,0.08);
  --shadow-md:  0 4px 14px rgba(60,26,34,0.12);
  --shadow-lg:  0 10px 32px rgba(60,26,34,0.14);

  --transition: 0.2s ease;

  /* Harmoniky / disclosure — jednotná šipka */
  --mm-disclosure-chevron-size: 36px;
  --mm-disclosure-chevron-compact: 30px;
}

[data-theme="dark"] {
  --bg-page:        #080306;
  --bg-app:         #130A0E;
  --bg-surface:     #200E14;
  --bg-surface2:    #3C1A22;
  --bg-input:       #1A0C10;

  --text-primary:   #F8EDE5;
  --text-secondary: #D4B8A8;
  --text-muted:     #907070;
  --text-inverted:  #130A0E;

  --border:         #5C2C38;
  --border-mid:     #8B4858;
  --border-focus:   #D4870A;

  --btn-p-bg:       #D4870A;
  --btn-p-text:     #130A0E;
  --btn-p-hover:    #B87208;
  --btn-s-bg:       #5C2C38;
  --btn-s-text:     #F8EDE5;
  --btn-s-hover:    #6B3848;
  --btn-b-bg:       #3C1A22;
  --btn-b-text:     #F8EDE5;
  --btn-b-hover:    #5C2C38;

  --nav-bg:         #050204;
  --nav-text:       rgba(248,237,229,0.62);
  --nav-active:     var(--orange);
  --nav-active-bd:  var(--orange);
  --nav-active-bg:  rgba(212,135,10,0.18);

  --header-bg-from: #0A0407;
  --header-bg-to:   #200E14;
  --header-text:    #F8EDE5;
  --header-sub:     rgba(248,237,229,0.50);

  --overlay-bg:     rgba(0,0,0,0.92);
  --divider:        #3C1A22;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.35);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:  0 10px 36px rgba(0,0,0,0.55);
}

/* ================================================================
   APP SHELL — CLASSIC FIXED-NAV LAYOUT (bulletproof, no flex/grid hack)
   - Mobile (<800px): bottom-nav fixed dole + body padding-bottom
   - Desktop (>=800px): bottom-nav fixed vlevo + body padding-left
   - Body scrolluje přirozeně, žádné dvojité scrollovací kontejnery
   ================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-page);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: 'Arial', sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Mobil: nech místo nad fixovanou nav lištou */
  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
}

/* App-shell je jen logický wrapper, do layoutu nezasahuje */
.app-shell {
  display: block;
  width: 100%;
}

/* Hlavní app: normální blokový tok, plná šířka */
#mainApp,
#mainApp.container {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg-app);
  border-top: none;
  box-shadow: none;
}

/* Sticky hlavička — drží se nahoře při scrollu body */
/* POZN.: safe-area-inset-top neřešíme zde, ale jen na #authPanel (mobil) — jinak by se zdvojoval */
.sticky-header {
  position: sticky;
  top: 0;
  width: 100%;
  background: linear-gradient(135deg, var(--header-bg-from) 0%, var(--header-bg-to) 100%);
  z-index: 100;
  padding-top: 0;
  border-bottom: 2px solid var(--stripe);
}

/* Obsah aplikace — bez vlastního scrollu, bez horní mezery, bez bočního odsazení */
#appObsah {
  display: block;
  width: 100%;
  padding: 0 0 32px;
}

/* Auth panel default */
#authPanel { display: flex; }
#sidebarAuth { display: none; }

/* ===============================================================
   BOTTOM NAV — fixed (mobil dole, desktop vlevo)
   =============================================================== */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 110;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  background: var(--nav-bg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
}

.bottom-nav .nav-item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 60px;
  padding: 8px 2px;
  color: var(--nav-text);
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  cursor: pointer;
  border-top: 3px solid transparent;
  border-left: 3px solid transparent;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color .2s, background-color .2s;
}

.bottom-nav .nav-item i {
  display: block;
  font-style: normal;
  font-size: 19px;
  margin-bottom: 2px;
}
/* Bottom-nav ikony renderované přes <i data-icon> — SVG ikona musí být
   středově zarovnaná a nesmí dědit display:block (jinak se roztáhne). */
.bottom-nav .nav-item i[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-size: 0;
  margin-bottom: 2px;
}
.bottom-nav .nav-item i[data-icon] .icon {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}

.bottom-nav .nav-item.active {
  color: var(--nav-active);
  background: var(--nav-active-bg);
  border-top-color: var(--nav-active-bd);
}

/* ===============================================================
   DESKTOP (>=800px) — sidebar vlevo, obsah přes celý zbytek
   =============================================================== */
@media (min-width: 800px) {
  body {
    padding-bottom: 0;
    padding-left: 100px;
  }

  .bottom-nav {
    top: 0;
    bottom: 0;
    right: auto;
    width: 100px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border-right: 1px solid rgba(255,255,255,0.08);
    box-shadow: 2px 0 8px rgba(0,0,0,.12);
    overflow-y: auto;
  }

  .bottom-nav .nav-item {
    width: 100%;
    flex: 0 0 auto;
    border-top: none;
    border-left: 3px solid transparent;
    padding: 10px 4px;
  }

  .bottom-nav .nav-item.active {
    border-top: none;
    border-left-color: var(--orange);
  }

  /* Auth: skryj v hlavičce, ukaž v sidebaru */
  #authPanel { display: none; }
  #sidebarAuth {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    margin-top: auto;
    padding: 12px 8px 16px;
    border-top: 1px solid rgba(255,255,255,.08);
  }

  /* Hlavní sloupec: roztažený přes zbytek šířky */
  #mainApp,
  #mainApp.container {
    max-width: 100%;
    width: 100%;
  }

  #appObsah {
    padding: 0 0 40px;
  }

  .sticky-header {
    padding-top: 0;
  }
}

/* ================================================================ TYPOGRAPHY */

h1, h2 {
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 1px;
  margin-top: 0;
  color: var(--text-primary);
}

h1 {
  font-size: 24px;
  color: var(--orange);
  border-bottom: none;
  padding-bottom: 6px;
}

h2 {
  font-size: 17px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--divider);
  margin-bottom: 16px;
}

label {
  font-weight: 800;
  margin-top: 14px;
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

/* ================================================================ FORMS */

input, select, textarea {
  width: 100%;
  padding: 13px 14px;
  margin-top: 6px;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  box-sizing: border-box;
  font-size: 16px; /* iOS Safari zoomuje stránku při focus pokud je < 16px — Project Instructions Pravidlo 2 */
  font-weight: 600;
  background: var(--bg-input);
  color: var(--text-primary);
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
}

input:focus, select:focus, textarea:focus {
  border-color: var(--border-focus);
  outline: none;
  background: var(--bg-app);
  box-shadow: 0 0 0 3px rgba(212,135,10,0.14);
}

/* [FIX 1] Chevron select — dostatečný padding vpravo aby šipka nelícovala s textem */
select {
  cursor: pointer;
  padding-right: 34px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Prohlížeče typicky renderují nativní chevron, padding zajistí vzdálenost od textu */
}
select option { background: var(--bg-app); color: var(--text-primary); }

/* Fáze sezóny: dlouhý text nesmí lézt pod chevron */
#faze {
  padding-right: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* [FIX 2] Sjednocená výška pro inline inputy v řádcích povrchů. */
.teren-row select,
.teren-row input {
  height: 40px;
  padding: 0 10px;
  margin-top: 0;
  font-size: 16px !important;
  box-sizing: border-box;
}

input::placeholder, textarea::placeholder { color: var(--text-muted); font-weight: normal; }

/* ── i18n: Ochrana UI proti dlouhým překladům ────────────────────
   Nav item text: zkrátit s ... pokud se nevejde (sidebar/mobilní bar)  */
.nav-item span[data-i18n] {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Modal nadpisy: zalomit, ne zkrátit — uživatel musí vidět celý text */
.modal-box h2 {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Flex kontejnery s tlačítky — bezpečné zalomení na malých displejích */
.btn-row, [style*="display:flex"][style*="gap"] > button,
[style*="display: flex"][style*="gap"] > button {
  flex-shrink: 1;
  min-width: 0;
}

/* ════════════════════════════════════════════════════════════════
   BUTTON DESIGN SYSTEM v2 — sjednocený, čistý, bez gradientů
   Role:  primary / accent / secondary / danger / ghost
   Sizes: default (44px) / sm (36px) / icon (40×40)
   Tvar:  border-radius 10px, flat, jemný stín jen u plných variant
   ════════════════════════════════════════════════════════════════ */

/* ── Společný základ (globální <button> + .btn / .btn-base) ── */
button,
.btn,
.btn-base {
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.3px;
  padding: 11px 20px;
  min-height: 44px;
  min-width: 0;
  width: 100%;
  margin: 0;
  margin-top: 14px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  text-transform: none;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button:active:not(:disabled) { transform: scale(0.97); }
button:disabled,
.btn:disabled,
.btn-base:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* ── Výjimky: kompaktní / řádkové tlačítka bez horní mezery a často auto-width ── */
.settings-card button,
.settings-hub-actions button,
.settings-toggle-group button,
.btn-theme,
.auth-panel__btn,
.btn-small,
.btn--sm,
.btn-inline,
.btn--icon,
.act-icon-btn {
  margin-top: 0;
}

.btn-inline,
.btn-small,
.btn--sm,
.btn--icon,
.auth-panel__btn,
.act-icon-btn:not(.act-icon-btn--wide) {
  width: auto;
}

/* ──────────────────────────────────────────────────────────────
   ROLE 1 — PRIMARY (hlavní akce: Uložit, Potvrdit, Pokračovat)
   ────────────────────────────────────────────────────────────── */
.btn--primary,
.btn-primary {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
  box-shadow: 0 2px 8px rgba(60, 26, 34, 0.18);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn--primary:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background: var(--maroon-mid);
  border-color: var(--maroon-mid);
  box-shadow: 0 4px 14px rgba(60, 26, 34, 0.28);
}

/* Aktivní (zapnutý) stav — zelená pro toggle-akce (notifikace ZAPNUTO atd.) */
.btn--primary.is-active,
.btn-primary.active,
.settings-action-btn.active {
  background: #2e7d32;
  border-color: #2e7d32;
  color: #fff;
  box-shadow: 0 2px 8px rgba(46, 125, 50, 0.28);
}
.btn--primary.is-active:hover:not(:disabled),
.btn-primary.active:hover:not(:disabled),
.settings-action-btn.active:hover:not(:disabled) {
  background: #388e3c;
  border-color: #388e3c;
}

/* ──────────────────────────────────────────────────────────────
   ROLE 2 — ACCENT (oranžová: PRO upgrade, paywall, FAB CTA)
   Pozn.: stará třída .btn-secondary je alias pro accent (zachová oranžovou).
   ────────────────────────────────────────────────────────────── */
.btn--accent,
.btn-secondary,
.btn-accent {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  box-shadow: 0 2px 8px rgba(212, 135, 10, 0.22);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn--accent:hover:not(:disabled),
.btn-secondary:hover:not(:disabled),
.btn-accent:hover:not(:disabled) {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  box-shadow: 0 4px 14px rgba(212, 135, 10, 0.32);
}

/* ──────────────────────────────────────────────────────────────
   ROLE 3 — DANGER (smazání, zničení dat)
   ────────────────────────────────────────────────────────────── */
.btn--danger,
.btn-danger,
.btn-delete {
  background: #d32f2f;
  color: #fff;
  border-color: #d32f2f;
  box-shadow: 0 2px 8px rgba(211, 47, 47, 0.18);
}
.btn--danger:hover:not(:disabled),
.btn-danger:hover:not(:disabled),
.btn-delete:hover:not(:disabled) {
  background: #b71c1c;
  border-color: #b71c1c;
  box-shadow: 0 4px 14px rgba(211, 47, 47, 0.28);
}

/* ──────────────────────────────────────────────────────────────
   ROLE 4 — SECONDARY (outline, neutrální alternativa)
   = staré .btn-outline, .btn-ghost
   ────────────────────────────────────────────────────────────── */
.btn--secondary,
.btn-outline,
.btn-ghost {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-mid);
  box-shadow: none;
}
.btn--secondary:hover:not(:disabled),
.btn-outline:hover:not(:disabled),
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-surface2);
  border-color: var(--text-secondary);
}
[data-theme="dark"] .btn-outline:hover:not(:disabled),
[data-theme="dark"] .btn-ghost:hover:not(:disabled),
[data-theme="dark"] .btn--secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
}

/* ──────────────────────────────────────────────────────────────
   ROLE 5 — GHOST (text-only akce: Zrušit, Zpět, Zahodit)
   ────────────────────────────────────────────────────────────── */
.btn--ghost,
.btn-cancel {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid transparent;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0.2px;
  margin-top: 10px;
  display: none;            /* .btn-cancel default zachován */
}
.btn--ghost { display: inline-flex; margin-top: 0; }
.btn--ghost:hover:not(:disabled),
.btn-cancel:hover:not(:disabled) {
  background: var(--bg-surface2);
  color: var(--text-primary);
}

/* ──────────────────────────────────────────────────────────────
   LEGACY ALIASY (zpětná kompatibilita pro existující HTML)
   ────────────────────────────────────────────────────────────── */
/* .btn-blue, .btn-edit používané pro maroon — alias na primary */
.btn-blue,
.btn-edit {
  background: var(--maroon);
  color: #fff;
  border-color: var(--maroon);
  box-shadow: 0 2px 8px rgba(60, 26, 34, 0.18);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 0;
}
.btn-blue:hover:not(:disabled),
.btn-edit:hover:not(:disabled) {
  background: var(--maroon-mid);
  border-color: var(--maroon-mid);
}

/* .btn-print-big — alias na accent ve velké podobě */
.btn-print-big {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
  padding: 16px 18px;
  font-size: 14px;
  margin-top: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(212, 135, 10, 0.22);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn-print-big:hover:not(:disabled) {
  background: var(--orange-dark);
  border-color: var(--orange-dark);
  box-shadow: 0 4px 14px rgba(212, 135, 10, 0.32);
}

/* ──────────────────────────────────────────────────────────────
   SIZES
   ────────────────────────────────────────────────────────────── */
/* Small — 36px, kompaktní řádkové akce (žádný uppercase) */
.btn-small,
.btn--sm {
  padding: 7px 14px;
  font-size: 11px;
  min-height: 36px;
  border-radius: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
}

/* Icon — čtvercové (header buttons, theme toggle, copy) */
.btn--icon {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  font-size: 18px;
  border-radius: 10px;
}
.btn--icon.btn-small,
.btn--icon.btn--sm {
  width: 36px;
  height: 36px;
  min-height: 36px;
  font-size: 16px;
  border-radius: 8px;
}

/* Wide — vždy 100 % šířky kontejneru */
.btn--wide { width: 100% !important; }

/* ──────────────────────────────────────────────────────────────
   MODAL CLOSE — jednotná X tlačítka v rohu modalů (9× v aplikaci)
   ────────────────────────────────────────────────────────────── */
.modal-close {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--text-secondary) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 8px !important;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s ease, color .15s ease;
}
.modal-close:hover {
  background: var(--bg-surface2) !important;
  color: var(--text-primary) !important;
}
.modal-close:active { transform: scale(0.92); }

/* ──────────────────────────────────────────────────────────────
   .btn-theme — zachováno, ale konzistentní se SS systémem
   ────────────────────────────────────────────────────────────── */
.btn-theme {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.22) !important;
  color: var(--header-text) !important;
  padding: 5px 9px !important;
  font-size: 17px !important;
  width: auto !important;
  margin: 0 !important;
  min-height: 34px !important;
  min-width: 34px !important;
  letter-spacing: 0 !important;
  border-radius: 8px !important;
}
.btn-theme:hover { background: rgba(255,255,255,0.1) !important; }

/* ──────────────────────────────────────────────────────────────
   Úzké displeje (<600px) — plné role na 100 % šířku
   ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .btn--primary:not(.btn-small):not(.btn--sm):not(.btn-inline):not(.act-icon-btn):not(.btn--icon),
  .btn--accent:not(.btn-small):not(.btn--sm):not(.btn-inline):not(.act-icon-btn):not(.btn--icon),
  .btn--danger:not(.btn-small):not(.btn--sm):not(.btn-inline):not(.act-icon-btn):not(.btn--icon),
  .btn--secondary:not(.btn-small):not(.btn--sm):not(.btn-inline):not(.act-icon-btn):not(.btn--icon),
  .btn-primary:not(.btn-small):not(.btn--sm):not(.btn-inline):not(.act-icon-btn):not(.btn--icon),
  .btn-secondary:not(.btn-small):not(.btn--sm):not(.btn-inline):not(.act-icon-btn):not(.btn--icon),
  .btn-accent:not(.btn-small):not(.btn--sm):not(.btn-inline):not(.act-icon-btn):not(.btn--icon),
  .btn-danger:not(.btn-small):not(.btn--sm):not(.btn-inline):not(.act-icon-btn):not(.btn--icon),
  .btn-outline:not(.btn-small):not(.btn--sm):not(.btn-inline):not(.act-icon-btn):not(.btn--icon),
  .btn-ghost:not(.btn-small):not(.btn--sm):not(.btn-inline):not(.act-icon-btn):not(.btn--icon) {
    width: 100%;
    max-width: 100%;
    padding: 13px 20px;
  }
}

/* ================================================================
   HLAVIČKA — auth pruh + řádek aktivního psa (kompaktní, jeden řádek)
   ================================================================ */

/* Horní auth pruh — co nejnižší výška */
#authPanel.auth-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 8px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--header-bg-from) 0%, var(--header-bg-to) 100%);
  color: var(--header-text);
  font-size: 11px;
  font-weight: 700;
}

#authPanel #userInfo.auth-panel__user,
.auth-panel__user {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--header-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-panel__user .auth-panel__email,
.auth-panel__user strong.auth-panel__email {
  color: var(--header-text);
  font-weight: 800;
}

.auth-panel__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

#authPanel .auth-panel__btn,
.auth-panel__btn {
  margin: 0 !important;
  min-height: 30px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 800;
}

.auth-panel__test-link {
  background: var(--orange);
  color: #fff !important;
  font-size: 11px;
  font-weight: 900;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1.4;
}

/* Badge zobrazující skutečně načtenou verzi aplikace.
   Klik = hard-refresh PWA (smaže cache + odregistruje SW + reload).
   Nutné pro testery iPhonu, kde je iOS PWA cache extrémně tvrdohlavá. */
.app-version-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.12);
  color: var(--header-text, #fff);
  font-size: 10px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  white-space: nowrap;
  line-height: 1.2;
  min-height: 28px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.15);
  touch-action: manipulation;
  transition: background 0.15s ease;
}
.app-version-badge:hover,
.app-version-badge:active {
  background: rgba(255, 255, 255, 0.22);
}

@media (max-width: 520px) {
  .auth-panel__account-label { display: none !important; }
}

/* DARK MODE: PŘIHLÁSIT button má v light módu maroon (#3C1A22), což ale v dark
   módu splývá s velmi tmavou hlavičkou (#0A0407 → #200E14). Použijeme proto
   světlejší maroon variant + viditelný okraj, aby tlačítko bylo jasně oddělené
   od pozadí i při log-off stavu. */
[data-theme="dark"] #authPanel .btn-blue,
[data-theme="dark"] .auth-panel__btn.btn-blue {
  background: var(--maroon-light) !important;
  border-color: rgba(253, 238, 229, 0.35) !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] #authPanel .btn-blue:hover:not(:disabled),
[data-theme="dark"] .auth-panel__btn.btn-blue:hover:not(:disabled) {
  background: #A85B6E !important;
  border-color: rgba(253, 238, 229, 0.55) !important;
}

/* ODHLÁSIT (.btn-cancel) — na hlavičce musí číst na tmavém gradientu */
#authPanel .auth-panel__btn.btn-cancel {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 0 !important;
  color: var(--header-text, #FDEEE5) !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(253, 238, 229, 0.45) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
#authPanel .auth-panel__btn.btn-cancel:hover:not(:disabled),
#authPanel .auth-panel__btn.btn-cancel:active:not(:disabled) {
  background: rgba(253, 238, 229, 0.16) !important;
  border-color: rgba(253, 238, 229, 0.7) !important;
  color: #fff !important;
}

[data-theme="dark"] #authPanel .auth-panel__btn.btn-cancel {
  background: rgba(0, 0, 0, 0.35) !important;
  border-color: rgba(248, 237, 229, 0.4) !important;
}
[data-theme="dark"] #authPanel .auth-panel__btn.btn-cancel:hover:not(:disabled),
[data-theme="dark"] #authPanel .auth-panel__btn.btn-cancel:active:not(:disabled) {
  background: rgba(248, 237, 229, 0.12) !important;
}

/* Desktop: ODHLÁSIT v levém sidebaru (tmavé pozadí jako bottom nav) */
@media (min-width: 800px) {
  #sidebarAuth .btn-cancel,
  #sidebarLogoutBtn.btn-cancel {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 0 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    background: rgba(0, 0, 0, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-sizing: border-box;
  }
  #sidebarAuth .btn-cancel:hover:not(:disabled),
  #sidebarLogoutBtn.btn-cancel:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
    color: #fff !important;
  }
}

/* Řádek s aktivním psem — vše vedle sebe (label + 🐕 + select) */
.sticky-header__row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  padding: 6px 12px;
  background: linear-gradient(135deg, var(--header-bg-from) 0%, var(--header-bg-to) 100%);
}

.label-dog {
  flex: 0 0 auto;
  margin: 0 !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--orange) !important;
  font-size: 11px !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  line-height: 1;
}

.label-dog__text { display: inline; }

#aktivniPes,
.sticky-header__select {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding: 6px 28px 6px 10px;
  font-size: 14px;
  font-weight: 800;
  border: 1.5px solid rgba(255,255,255,0.18) !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(255,255,255,0.10) !important;
  color: var(--header-text) !important;
  height: 36px;
  min-height: 0;
}
#aktivniPes option,
.sticky-header__select option {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.btn-header-profile {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  padding: 0;
  margin: 0 !important;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.12);
  border: 1.5px solid rgba(255,255,255,0.22);
  color: var(--header-text);
  font-size: 18px !important;
  line-height: 1;
  cursor: pointer;
}

.btn-header-profile .btn-header-profile-icon {
  font-size: 0;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-header-profile .btn-header-profile-icon .icon {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

/* Na úzkém mobilu zkrať label na ikonu pro úsporu místa */
@media (max-width: 380px) {
  .label-dog__text { display: none; }
  .label-dog::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M5.5 13c1.1 0 2-1 2-2.2 0-1.3-.9-2.3-2-2.3s-2 1-2 2.3c0 1.2.9 2.2 2 2.2zM9 9.5c1.1 0 2-1.1 2-2.5S10.1 4.5 9 4.5 7 5.6 7 7s.9 2.5 2 2.5zM15 9.5c1.1 0 2-1.1 2-2.5S16.1 4.5 15 4.5 13 5.6 13 7s.9 2.5 2 2.5zM18.5 13c1.1 0 2-1 2-2.2 0-1.3-.9-2.3-2-2.3s-2 1-2 2.3c0 1.2.9 2.2 2 2.2zM12 20c-2.5 0-4.5-1.5-4.5-3.5 0-1.5 1-2.7 2.3-3.5C10.7 12.4 11.3 12 12 12s1.3.4 2.2.9c1.3.9 2.3 2.1 2.3 3.6 0 2-2 3.5-4.5 3.5z'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M5.5 13c1.1 0 2-1 2-2.2 0-1.3-.9-2.3-2-2.3s-2 1-2 2.3c0 1.2.9 2.2 2 2.2zM9 9.5c1.1 0 2-1.1 2-2.5S10.1 4.5 9 4.5 7 5.6 7 7s.9 2.5 2 2.5zM15 9.5c1.1 0 2-1.1 2-2.5S16.1 4.5 15 4.5 13 5.6 13 7s.9 2.5 2 2.5zM18.5 13c1.1 0 2-1 2-2.2 0-1.3-.9-2.3-2-2.3s-2 1-2 2.3c0 1.2.9 2.2 2 2.2zM12 20c-2.5 0-4.5-1.5-4.5-3.5 0-1.5 1-2.7 2.3-3.5C10.7 12.4 11.3 12 12 12s1.3.4 2.2.9c1.3.9 2.3 2.1 2.3 3.6 0 2-2 3.5-4.5 3.5z'/></svg>") center/contain no-repeat;
  }
}

/* Tlačítko "Vytvořit psa" — zobrazí se v hlavičce pouze když uživatel nemá žádného psa */
.btn-create-first-dog {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 36px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--orange);
  background: transparent;
  color: var(--orange);
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.2px;
  transition: background .15s, color .15s;
  touch-action: manipulation;
  min-height: 44px;
}
.btn-create-first-dog:hover,
.btn-create-first-dog:focus-visible {
  background: var(--orange);
  color: #fff;
  outline: none;
}

/* První prvek záložky se přilepí pod hlavičku — žádné prázdné odsazení */
#appObsah > .tab-content > .sekce:first-child,
#appObsah > .tab-content > .plan-layout:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#appObsah > #tab-historie,
#appObsah > #tab-zapis,
#appObsah > #tab-dashboard {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#appObsah > #tab-historie > *:first-child {
  margin-top: 0 !important;
}

/* ================================================================ SECTIONS */

.sekce {
  margin-bottom: 24px;
  padding: 20px;
  background: var(--bg-app);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.35s, border-color 0.3s;
  overflow: visible;
  max-height: none;
}

/* Dashboard — obsah těsně pod hlavičkou, widgety neořezávat */
#tab-dashboard {
  margin: 0;
  padding: 0;
  overflow: visible;
}
.dashboard-sekce {
  padding: 0 10px !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#tab-dashboard > .sekce:first-of-type {
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
#tab-dashboard .dashboard-toolbar {
  margin: 0 0 12px !important;
}
#tab-zapis #modal-zapis.sekce {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
#tab-dashboard #widgetContainer {
  margin-left: 0;
  margin-right: 0;
  padding: 0;
  overflow: visible;
  position: relative;
  z-index: 1;
}

.dash-training-window-loc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.dash-training-window-loc__label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin: 0;
}
.dash-training-window-loc__select {
  flex: 1 1 160px;
  min-width: 0;
  min-height: 44px;
  font-size: 16px !important;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 0 10px;
}
.dash-training-window-loc__manage {
  flex: 0 0 auto;
  min-height: 44px;
}

/* ══════════════════════════════════════════════════════════════════
   DURATION FIELD — H / M / S nativní number inputy
   Standardní, intuitivní vstup. Mobile = native numerická klávesnice
   pro každé pole zvlášť, Desktop = native šipky + Tab/Up/Down.
   ══════════════════════════════════════════════════════════════════ */
.mm-dur-field {
  display: flex;
  align-items: center;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 4px 8px;
  box-sizing: border-box;
  border: 1.5px solid var(--border-mid);
  border-radius: 8px;
  background: var(--bg-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mm-dur-field:focus-within {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(60, 26, 34, .10);
}
.mm-dur-field .mm-dur-cell {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 36px;
  padding: 0 2px;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 16px !important;   /* iOS — bez zoomování */
  font-family: inherit;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  cursor: text;
}
.mm-dur-field .mm-dur-cell::placeholder {
  color: var(--text-muted);
  opacity: 0.5;
  font-weight: 400;
}
.mm-dur-field .mm-dur-cell:focus {
  background: var(--bg-surface2);
  border-radius: 4px;
}
/* Mobile — schovej výchozí spinnery (mají malé touch targety) */
.mm-dur-field .mm-dur-cell::-webkit-outer-spin-button,
.mm-dur-field .mm-dur-cell::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mm-dur-field .mm-dur-cell {
  -moz-appearance: textfield;
}
/* Desktop — zobraz nativní spinner šipky */
@media (hover: hover) and (pointer: fine) {
  .mm-dur-field .mm-dur-cell {
    -moz-appearance: number-input;
    padding-right: 0;
  }
  .mm-dur-field .mm-dur-cell::-webkit-outer-spin-button,
  .mm-dur-field .mm-dur-cell::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    opacity: 1;
    cursor: pointer;
  }
}
.mm-dur-field .mm-dur-sep {
  flex: 0 0 auto;
  padding: 0 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  user-select: none;
  pointer-events: none;
}
/* Kompaktní varianta — pro interval rows / phase boxes */
.mm-dur-field--compact {
  min-height: 36px;
  padding: 2px 6px;
}
.mm-dur-field--compact .mm-dur-cell {
  height: 28px;
  font-size: 14px !important;
}
.mm-dur-field--compact .mm-dur-sep {
  font-size: 10px;
}
[data-theme="dark"] .mm-dur-field {
  background: var(--bg-surface2);
  border-color: var(--border);
}
[data-theme="dark"] .mm-dur-field .mm-dur-cell:focus {
  background: rgba(255,255,255,0.04);
}

/* Legacy class — drum-roll picker byl odstraněn */
.mm-duration-time--picker {
  cursor: pointer;
  caret-color: transparent;
}
.dp-modal-overlay {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.dp-modal-box {
  width: 100%;
  max-width: 480px;
  margin: 0;
  border-radius: 16px 16px 0 0;
  padding: 0;
  overflow: hidden;
}
.dp-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--divider);
  background: var(--bg-surface2);
}
.dp-modal-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-primary);
}
.dp-modal-btn {
  min-height: 44px;
  padding: 0 12px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-secondary);
}
.dp-modal-btn--ok {
  color: var(--maroon);
}
.dp-wheels-wrap {
  display: flex;
  justify-content: center;
  gap: 4px;
  padding: 8px 12px 16px;
  background: var(--bg-surface);
  position: relative;
}
.dp-wheels-wrap::before {
  content: '';
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  border-radius: 8px;
  background: rgba(60, 26, 34, 0.08);
  border: 1px solid var(--border-mid);
  pointer-events: none;
  z-index: 0;
}
.dp-wheel-col {
  flex: 1 1 0;
  min-width: 0;
  max-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.dp-wheel {
  width: 100%;
  height: 220px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.dp-wheel::-webkit-scrollbar {
  display: none;
}
.dp-wheel-pad {
  height: 88px;
  flex-shrink: 0;
}
.dp-wheel-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px !important;
  font-variant-numeric: tabular-nums;
  scroll-snap-align: center;
  color: var(--text-primary);
}
.dp-wheel-unit {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  margin-top: 4px;
}
@media (min-width: 640px) {
  .dp-modal-overlay {
    align-items: center;
    padding: 16px;
  }
  .dp-modal-box {
    border-radius: 12px;
  }
}

/* ── Fullscreen Widget Modal ──────────────────────────────────── */
body.dash-full-modal-open { overflow: hidden; }
#dashFullModal { opacity: 0; }

/* ⤢ tlačítko v hlavičce widgetu = Zvětšit (otevře fullscreen modal).
   Programově injektovaný duplicitní ⛶ skryjeme — funkčně by dělal totéž. */
.dash-fullscreen-btn { display: none !important; }

/* Sidebar filtry v fullscreen modalu — aktivní, bez rámečku */
#fullModalSidebar .widget-settings-panel,
#fullModalSidebar #fullModalSettingsPanel {
  display: block !important;
  opacity: 1 !important;
  max-height: none !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}
#fullModalSidebar {
  overflow-x: hidden !important;
  min-width: 0;
}
#fullModalSidebar,
#fullModalSidebar .widget-settings-panel,
#fullModalSidebar #fullModalSettingsPanel {
  box-sizing: border-box;
}
#fullModalSidebar .wsp-row {
  flex-wrap: wrap;
  gap: 4px;
  min-width: 0;
}
#fullModalSidebar .wsp-chip {
  font-size: 11px;
}
#fullModalSidebar .wsp-compare-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}
#fullModalSidebar .wsp-compare-row > span {
  display: none;
}
#fullModalSidebar .wsp-compare-row input[type="date"] {
  flex: 0 1 auto;
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: 16px !important;
}
#fullModalSidebar .wsp-compare-row .wf-clear-btn {
  align-self: flex-start;
  padding: 2px 6px;
  min-height: 26px;
  font-size: 11px;
  line-height: 1;
}
#fullModalSidebar .wsp-apply-row {
  width: 100%;
  max-width: 100%;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  margin-top: 8px !important;
}
#fullModalSidebar .wsp-apply-btn {
  padding: 8px 10px !important;
  min-height: 40px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#fullModalSidebar .widget-filter {
  width: 100%;
  min-width: 0;
}
#fullModalSidebar .wsp-divider {
  margin: 10px 0;
}
/* Fullscreen modal layout — žádný vnitřní scrollbar */
#fullModalChartArea {
  overflow-x: hidden;
  overflow-y: auto;
  min-width: 0;
  flex: 1;
}
#fullModalChartArea .mm-readiness-chart-wrap {
  overflow-x: hidden !important;
}
/* Vnější kontejner modalu */
#dashFullModal > div {
  overflow: hidden;
}
#dashFullModal > div > div:nth-child(2) {
  display: flex;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Mobile: sidebar se přesune POD chart (kolaps na column), graf dostane plnou šířku.
   Filtry zůstávají dostupné, jen pod grafem. Bez tohoto by sidebar 320px sežral celou obrazovku. */
@media (max-width: 767px) {
  #dashFullModal > div > div:nth-child(2) {
    flex-direction: column;
    overflow-y: auto;
  }
  #fullModalChartArea {
    flex: 0 0 auto !important;
    min-height: 55vh;
    overflow-y: visible !important;
  }
  #fullModalSidebar {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-left: none !important;
    border-top: 1.5px solid var(--divider) !important;
  }
}

/* ── Dashboard Grid (PC ≥ 1024px) ─────────────────────────────── */
#tab-dashboard #widgetContainer.grid-cols-2 {
  display: block; /* fallback mobile */
}
#tab-dashboard #widgetContainer.grid-cols-3 {
  display: block; /* fallback mobile */
}
@media (min-width: 1024px) {
  #tab-dashboard #widgetContainer.grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: start !important;
  }
  #tab-dashboard #widgetContainer.grid-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: start !important;
  }
  #tab-dashboard #widgetContainer.grid-cols-2 .widget-card,
  #tab-dashboard #widgetContainer.grid-cols-3 .widget-card {
    margin-bottom: 0;
  }
  /* Widgety přes celý řádek */
  #tab-dashboard #widgetContainer.grid-cols-2 .widget-card--full,
  #tab-dashboard #widgetContainer.grid-cols-3 .widget-card--full {
    grid-column: 1 / -1;
  }
}
#tab-dashboard .widget-card {
  margin-left: 0;
  margin-right: 0;
}

/* Jednotný barevný akcent (levý pruh 6px) — každý widget má vlastní barvu */
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="plany"] {
  border-left: 6px solid #1565c0;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="trainingWindow"] {
  border-left: 6px solid #2e7d32;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="readiness"] {
  border-left: 6px solid #0d47a1;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="top"] {
  border-left: 6px solid #d32f2f;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="progres"] {
  border-left: 6px solid #7b1fa2;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="load"] {
  border-left: 6px solid #ef6c00;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="peaksCurve"] {
  border-left: 6px solid #0277bd;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="vybaveni"] {
  border-left: 6px solid #ff8f00;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="objem"] {
  border-left: 6px solid #00897b;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="teplota"] {
  border-left: 6px solid #bf360c;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="voda"] {
  border-left: 6px solid #039be5;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="rpe"] {
  border-left: 6px solid #ad1457;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="povrch"] {
  border-left: 6px solid #689f38;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="lokace"] {
  border-left: 6px solid #6d4c41;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="porovnani"] {
  border-left: 6px solid #546e7a;
}
#tab-dashboard #widgetContainer > .widget-card[data-widget-id="metriky"] {
  border-left: 6px solid #3949ab;
}

/* Lišta PRO ANALÝZA — sticky uvnitř scrollovacího #appObsah */
/* === Sjednocená hlavička sekce (Level 1) — ZAPSAT AKTIVITU, PRO ANALÝZA ===
   Používá se pro: .zapis-form-header (Zápis), .dashboard-toolbar (Dashboard).
   Layout: flex se zarovnáním na okraje, kompaktní padding, zlatý pruh dole. */
.mm-section-header,
#tab-dashboard .dashboard-toolbar,
.zapis-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin: 0 0 12px;
  background: var(--bg-app);
  border-bottom: 2px solid var(--stripe);
}

/* Nadpis uvnitř sekce hlavičky (h2 / .zapis-form-title) */
.mm-section-header > h2,
.mm-section-header__title,
#tab-dashboard .dashboard-toolbar > h2,
.zapis-form-title {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--text-primary);
  border-bottom: none !important;
  flex: 0 1 auto;
}

.sub-sekce {
  background: var(--bg-surface);
  padding: 14px 16px;
  border-left: 3px solid var(--orange);
  margin-top: 12px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ================================================================ RESULT BOXES */

.vysledek {
  margin-top: 16px;
  padding: 14px 16px;
  background: #EBF5FB;
  border-left: 5px solid #2980B9;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
  line-height: 1.55;
  font-weight: bold;
}
.varovani { background: #FDEDEC; border-left-color: #C0392B; color: #922B21; }
.zotaveni { background: #EAFAF1; border-left-color: #27AE60; color: #1E8449; }

[data-theme="dark"] .vysledek  { background: #0E1E30; border-left-color: #5DADE2; color: #AED6F1; }
[data-theme="dark"] .varovani  { background: #2A0E0E; border-left-color: #E74C3C; color: #F1948A; }
[data-theme="dark"] .zotaveni  { background: #0E2A18; border-left-color: #2ECC71; color: #82E0AA; }

/* ================================================================ GENDER */
.pes-fena  { color: #C0392B !important; }
.pes-pes   { color: var(--maroon) !important; }
[data-theme="dark"] .pes-pes { color: var(--orange) !important; }
/* Sdílený pes (trenér pracuje s klientovým psem) */
.pes-sdileny { color: #1565c0 !important; font-style: italic; }
[data-theme="dark"] .pes-sdileny { color: #90CAF9 !important; }

/* Shared dog badge — skryto na mobilu, viditelné na desktopu */
#sharedDogBadge { display: none; }
@media (min-width: 700px) {
  #sharedDogBadge { display: flex !important; }
}

/* ================================================================ ACTIVITY LIST */

.tp-day-group {
  margin-bottom: 16px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1.5px solid var(--border);
  background: var(--bg-app);
  box-shadow: var(--shadow-sm);
  transition: background-color 0.3s, border-color 0.3s;
}

.tp-day-header {
  background: var(--bg-surface2);
  padding: 10px 16px;
  font-weight: 900;
  color: var(--text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border);
}

.tp-activity {
  padding: 14px 16px;
  border-top: 1px solid var(--divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.15s;
}
.tp-activity:first-child { border-top: none; }
.tp-activity:hover { background: var(--bg-surface); }
.tp-activity-info  { flex: 1; }
/* ── Ikonová tlačítka akcí u aktivit ─────────────────────────── */
.tp-activity-actions {
  display: flex;
  gap: 4px;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
}

.act-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 17px;
  background: var(--bg-surface2);
  color: var(--text-primary);
  transition: background 0.15s, transform 0.1s;
  padding: 0;
  margin: 0;
  position: relative;
  flex-shrink: 0;
}
/* Široká varianta (řádek akcí v detailu aktivity) — 8px, design system */
.act-icon-btn.act-icon-btn--wide {
  width: auto;
  min-width: 0;
  height: auto;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-radius: 8px;
  display: inline-flex;
  gap: 6px;
}
.act-icon-btn.act-icon-btn--outline {
  background: transparent;
  border: 1.5px solid var(--border-mid);
  color: var(--text-primary);
}
.act-icon-btn.act-icon-btn--outline:hover {
  background: var(--bg-surface2);
  transform: none;
}
.act-icon-btn:hover:not(.act-icon-btn--outline):not(.act-icon-btn--wide) { background: var(--border-mid); transform: scale(1.08); }
.act-icon-btn.act-icon-btn--wide:hover:not(.act-icon-btn--outline) { transform: none; }
.act-icon-btn:active { transform: scale(0.95); }
.act-icon-btn.act-icon-btn--wide:active { transform: scale(0.99); }
.act-icon-btn.act-icon-btn--outline:active { transform: scale(0.98); }

/* Tooltip při hover — jen desktop */
.act-icon-btn::after {
  content: attr(data-tip);
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-surface2);
  color: var(--text-primary);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
  letter-spacing: 0.3px;
}
.act-icon-btn:hover::after { opacity: 1; }

/* Varianty barev */
.act-icon-btn.green  { background: #1b5e20; color: #fff; }
.act-icon-btn.green:hover  { background: #2e7d32; }
.act-icon-btn.blue   { background: #1565c0; color: #fff; }
.act-icon-btn.blue:hover   { background: #1976d2; }
.act-icon-btn.purple { background: #5c6bc0; color: #fff; }
.act-icon-btn.purple:hover { background: #3949ab; }
.act-icon-btn.maroon { background: var(--maroon); color: #F8EDE5; }
.act-icon-btn.maroon:hover { background: #5C2C38; }
.act-icon-btn.red    { background: #b71c1c; color: #fff; }
.act-icon-btn.red:hover    { background: #c62828; }

/* Na mobilu — tooltip se skryje (není hover), tooltip jde doleva) */
@media (max-width: 600px) {
  .act-icon-btn::after { display: none; }
  .tp-activity-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; }
  .act-icon-btn:not(.act-icon-btn--wide) { width: 38px; height: 38px; font-size: 18px; }
}

.rpe-low  { border-left: 5px solid #27AE60; }
.rpe-mid  { border-left: 5px solid #F39C12; }
.rpe-high { border-left: 5px solid #E74C3C; }
.rpe-rest { border-left: 5px solid #95A5A6; background: var(--bg-surface); }
.rpe-sick { border-left: 5px solid #922B21; background: var(--bg-surface); }

/* ================================================================ SMEČKA — výběr psů pro hromadný zápis */

.smecka-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 99px;
  border: 2px solid var(--border-mid);
  background: var(--bg-surface);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  user-select: none;
  max-width: 200px;
  min-width: 0;
  white-space: nowrap;
}
/* Jméno psa uvnitř chipu — zkracuj s … pokud se nevejde */
.smecka-chip > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.smecka-chip input[type="checkbox"] { display: none; }
.smecka-chip:has(input:checked),
.smecka-chip.selected {
  border-color: var(--maroon);
  background: var(--maroon);
  color: #F8EDE5;
}
.smecka-chip:has(input:checked) .smecka-gender-pes  { color: #F8EDE5; }
.smecka-chip:has(input:checked) .smecka-gender-fena { color: #F8EDE5; }
.smecka-gender-pes  { color: var(--maroon); font-size: 16px; }
.smecka-gender-fena { color: #C0392B;       font-size: 16px; }

/* Per-dog RPE v režimu smečky */
.smecka-rpe-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.smecka-rpe-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  background: var(--bg-surface2);
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  min-width: 140px;
}
.smecka-rpe-item__name {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smecka-rpe-item select {
  font-size: 13px !important;
  padding: 5px 8px;
  border-radius: 6px;
  border: 1.5px solid var(--maroon);
  background: var(--bg-surface);
  color: var(--maroon);
  font-weight: 700;
  width: 100%;
  cursor: pointer;
}
#smeckaRpeBlok {
  display: none;
  margin-top: 10px;
}
#smeckaRpeBlok .smecka-rpe-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

/* ================================================================ BADGES */

.badge {
  display: inline-block;
  padding: 3px 9px;
  font-size: 10px;
  font-weight: 900;
  color: white;
  background: var(--maroon);
  margin-bottom: 6px;
  margin-right: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}
.badge-sport { background: var(--maroon-mid); }
.badge-typ   { background: var(--maroon); }
.badge-zavod { background: var(--orange); color: var(--bg-app); }

.badge-adapt {
  background: #007D8A;
  display: block;
  margin-top: 14px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  color: white;
  border-radius: var(--radius-md);
}

.badge-pro {
  background: var(--orange);
  color: white;
  padding: 2px 7px;
  font-size: 9px;
  font-weight: 900;
  vertical-align: middle;
  margin-left: 5px;
  display: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* ================================================================ GRIDS */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.grid-2 > div { min-width: 0; }

/* ================================================================ FILE UPLOAD */

.file-upload-label {
  display: block;
  text-align: center;
  background: var(--btn-b-bg);
  color: white;
  padding: 15px;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition);
  margin-top: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius-md);
}
.file-upload-label:hover { background: var(--btn-b-hover); }

/* ================================================================ OVERLAY */

.overlay-zamek {
  pointer-events: none;
  opacity: 0.36;
  position: relative;
  filter: grayscale(100%);
}

/* ================================================================ MODALS */

.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: var(--overlay-bg);
  z-index: 2000;
  align-items: flex-start;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-box {
  background: var(--bg-app);
  padding: 24px;
  max-width: 450px;
  width: 100%;
  border-top: 5px solid var(--orange);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: popUp 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  color: var(--text-primary);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  transition: background-color 0.35s;
  margin: auto;
}
.modal-box h2 { color: var(--orange); border: none; margin-bottom: 12px; }
.modal-box input, .modal-box select, .modal-box textarea {
  background: var(--bg-input);
  color: var(--text-primary);
  border-color: var(--border);
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes popUp {
  from { transform: scale(0.88) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.tab-content {
  padding-bottom: 0 !important;
  margin: 0;
  margin-top: 0;
  padding-top: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: visible;
  animation: fadeIn 0.22s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Pozn.: .bottom-nav a .nav-item jsou definované nahoře v App Shell sekci. Tady nic nepřidávat. */
.nav-item.active {
  color: var(--nav-active);
  border-top-color: var(--nav-active-bd);
  background: var(--nav-active-bg);
}

/* ================================================================ WIDGET CARDS */

.widget-card {
  background: var(--bg-app);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.35s, border-color 0.3s, box-shadow 0.2s;
}
.widget-card:hover { box-shadow: var(--shadow-md); }

/* === Sjednocená hlavička skupiny / widgetu (Level 2) ===
   Používá se pro: .widget-header (Dashboard), .zapis-step-header (Zápis).
   Tečkovaný oranžový pruh dole — vizuální linka napříč aplikací. */
.mm-group-header,
.widget-header,
.zapis-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--stripe);
  position: relative;
}

.mm-group-header__title,
.widget-title {
  font-size: 12px;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  flex: 1;
}

/* ── Nový TP-style widget toolbar ──────────────────────────────── */
.widget-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* Aktivní perioda — malý badge vedle názvu */
.widget-period-badge {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}

/* Ikony expand a settings */
.widget-icon-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  padding: 3px 6px;
  margin: 0;
  width: auto;
  min-height: 0;
  line-height: 1.2;
  transition: background .15s, color .15s;
}
.widget-icon-btn:hover {
  background: var(--bg-surface2);
  color: var(--text-primary);
}
.widget-icon-btn.active {
  background: var(--maroon);
  color: #F8EDE5;
  border-color: var(--maroon);
}

/* Settings dropdown panel */
.widget-settings-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--bg-app);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  z-index: 200;
  min-width: 260px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
.widget-settings-panel.open { display: block; }

.widget-settings-panel label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  display: block;
  margin: 10px 0 5px;
}
.widget-settings-panel label:first-child { margin-top: 0; }

.wsp-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Period chips — klikatelné */
.wsp-chip {
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 3px 10px;
  cursor: pointer;
  background: var(--bg-surface2);
  color: var(--text-secondary);
  transition: all .15s;
  white-space: nowrap;
}
.wsp-chip:hover  { border-color: var(--orange); color: var(--orange); }
.wsp-chip.active { background: var(--maroon); color: #F8EDE5; border-color: var(--maroon); }
.wsp-chip-locked {
  opacity: 0.65;
  border-style: dashed;
  cursor: not-allowed;
  color: #9e9e9e !important;
  border-color: #bdbdbd !important;
  background: #f1f1f1 !important;
}
.wsp-chip-locked::before {
  content: "🔒 ";
}
.wsp-chip-locked:hover {
  color: #9e9e9e !important;
  border-color: #bdbdbd !important;
}

/* ── Jednotný disclosure systém napříč aplikací ─────────────────── */
.app-disclosure > summary {
  position: relative;
  padding-right: max(48px, calc(var(--mm-disclosure-chevron-size) + 12px)) !important;
  list-style: none;
}
.app-disclosure > summary::-webkit-details-marker {
  display: none;
}
.app-disclosure > summary::marker {
  content: '';
}

.app-disclosure > summary::after {
  content: '▸';
  position: absolute;
  right: 8px;
  top: 50%;
  width: var(--mm-disclosure-chevron-size);
  height: var(--mm-disclosure-chevron-size);
  box-sizing: border-box;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 900;
  line-height: calc(var(--mm-disclosure-chevron-size) - 4px);
  text-align: center;
  color: var(--maroon);
  background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface2) 100%);
  border: 2px solid var(--maroon);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s ease, background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}

.app-disclosure[open] > summary::after {
  transform: translateY(-50%) rotate(90deg);
  background: var(--maroon);
  color: #f8ede5;
  border-color: var(--maroon);
  box-shadow: 0 3px 12px rgba(60, 26, 34, 0.28);
}

.app-disclosure > summary:hover::after {
  border-color: var(--orange);
}

.app-disclosure[open] > summary:hover::after {
  border-color: var(--orange);
  color: #f8ede5;
}

.app-disclosure > summary:focus-visible::after {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Kompaktní šipka v kartách plánovače („Podrobnosti“, datové důvody) */
.plan-proposal-card__details.app-disclosure > summary,
.plan-data-details.app-disclosure > summary {
  padding-right: max(42px, calc(var(--mm-disclosure-chevron-compact) + 12px)) !important;
}
.plan-proposal-card__details.app-disclosure > summary::after,
.plan-data-details.app-disclosure > summary::after {
  width: var(--mm-disclosure-chevron-compact);
  height: var(--mm-disclosure-chevron-compact);
  font-size: 13px;
  line-height: calc(var(--mm-disclosure-chevron-compact) - 4px);
  right: 2px;
}

[data-theme='dark'] .app-disclosure:not([open]) > summary::after {
  background: linear-gradient(180deg, var(--bg-surface2) 0%, var(--bg-surface) 100%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  /* Glyf ▸ byl stejnou barvou jako pozadí (#3C1A22) — výrazná barva */
  color: var(--orange);
  border-color: var(--orange);
}

[data-theme='dark'] .app-disclosure[open] > summary::after {
  background: var(--maroon);
  color: #f8ede5;
  border-color: var(--maroon);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.45);
}

/* ── Jednotný compact design pro volitelné položky (chip volby) ─── */
.ui-option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 10px;
}
.ui-option-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
  padding: 1px 0;
  cursor: pointer;
}
.ui-option-chip input[type="checkbox"],
.ui-option-chip input[type="radio"] {
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
}

.gpx-lock-icon {
  margin-left: auto;
  font-size: 13px;
  line-height: 1;
}

/* Mobilní Safari: skrytý file input (display:none) často neotevře výběr souborů — překryvný vstup */
#gpxLabel.gpx-upload-zone {
  position: relative;
  overflow: hidden;
  min-height: 44px;
}

#gpxLabel .gpx-upload-visual {
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
  flex: 1;
  min-width: 0;
}

#gpxLabel .gpx-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 44px;
  opacity: 0;
  cursor: pointer;
  font-size: 16px !important;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-tap-highlight-color: transparent;
}

#gpxLabel .gpx-file-input:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.wsp-divider {
  border: none;
  border-top: 1px solid var(--divider);
  margin: 10px 0 6px;
}

/* Srovnávací datum řádek */
.wsp-compare-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.wsp-compare-row input[type=date] {
  margin: 0;
  flex: 1;
  min-width: 110px;
}
.wsp-compare-row .wf-clear-btn {
  font-size: 11px;
  padding: 3px 6px;
  min-height: 0;
  width: auto;
  margin: 0;
}

.widget-filter {
  padding: 5px 10px;
  font-size: 11px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: bold;
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  margin: 0;
  width: auto;
  min-height: 28px;
  cursor: pointer;
}

/* ================================================================
   CHART SCROLLBOX — KRITICKY DŮLEŽITÉ PRO GRAFY
   ================================================================ */

.chart-scrollbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  gap: 3px;
  height: 130px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 5px;
  margin-top: 10px;
  border-bottom: 1px solid var(--divider);
  min-width: 0;
  width: 100%;
}

.chart-scrollbox::-webkit-scrollbar { height: 5px; }
.chart-scrollbox::-webkit-scrollbar-track { background: var(--bg-surface); border-radius: 3px; }
.chart-scrollbox::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }

.chart-bar-container {
  flex: 0 0 auto !important;
  min-width: 0;
  max-width: 44px;
  padding: 0 1px;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.chart-bar {
  width: 100%;
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  transition: height 0.3s ease;
  cursor: pointer;
}
.chart-bar:hover { filter: brightness(1.15); }

/* ── Dashboard tooltip ─────────────────────────────────────── */
#dashTooltip {
  position: fixed;
  background: var(--bg-surface2);
  color: var(--text-primary);
  border: 1.5px solid var(--border-mid);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 900;
  pointer-events: none;
  z-index: 9000;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  opacity: 0;
  transition: opacity 0.15s;
}
#dashTooltip.visible { opacity: 1; }

/* ── Vlastní datum u widgetů ───────────────────────────────── */
.widget-custom-date {
  display: none;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.widget-custom-date.visible { display: flex; }
.widget-custom-date input[type="date"] { width: auto; min-width: 120px; }
.widget-custom-date .btn-custom-ok {
  background: var(--maroon);
  color: #F8EDE5;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 900;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  width: auto;
  min-height: 0;
}

/* ================================================================
   WF — UNIFIED WIDGET FILTER PANEL (všechny widgety)
   ================================================================ */

/* Kontejner filtru (nahrazuje .filter-panel) */
.wf-panel {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

/* Každý řádek filtru */
.wf-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Vlastní datum – schovatelná část */
.wf-custom {
  display: none;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.wf-custom.visible { display: flex; }

/* Porovnávací řádek — vždy viditelný, prázdné = bez porovnání */
.wf-compare-row {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  padding: 6px 9px;
  background: var(--bg-surface2);
  border-radius: 7px;
  border-left: 3px solid var(--maroon);
}

.wf-compare-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
  letter-spacing: .3px;
}

/* Sjednocené kompaktní inputy (dashboard / porovnání) */
.date-input--compact,
.filter-date-input,
.widget-custom-date input[type="date"],
.wsp-compare-row input[type=date],
.widget-filter {
  padding: 4px 7px;
  font-size: 11px;
  border: 1.5px solid var(--border-mid);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  min-height: 28px;
  width: auto;
  max-width: 100%;
  cursor: pointer;
  font-weight: 600;
  min-height: 28px;
}
.date-input--compact:focus,
.filter-date-input:focus,
.widget-custom-date input[type="date"]:focus,
.wsp-compare-row input[type=date]:focus,
.widget-filter:focus { border-color: var(--maroon); }

.dash-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.dash-metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}

.dash-metric-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.dash-metric-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-secondary);
  text-transform: uppercase;
}

.dash-metric-value {
  font-size: 20px;
  color: var(--text-primary);
}

.dash-metric-value small {
  font-size: 12px;
  font-weight: 600;
}

.dash-metric-trend {
  font-size: 11px;
  margin-top: 4px;
}

/* OK tlačítko */
.filter-ok-btn {
  background: var(--maroon);
  color: #F8EDE5;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 900;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
  margin: 0;
  width: auto;
  min-height: 28px;
}

/* Zrušit porovnání */
.wf-clear-btn {
  background: none;
  border: 1.5px solid var(--border-mid);
  border-radius: 6px;
  font-size: 12px;
  padding: 3px 8px;
  cursor: pointer;
  color: var(--text-muted);
  min-height: 28px;
}
.wf-clear-btn:hover { color: var(--maroon); border-color: var(--maroon); }

/* Oddělovač – */
.filter-sep {
  color: var(--text-muted);
  font-size: 12px;
  flex-shrink: 0;
}

@media (max-width: 420px) {
  .date-input--compact,
  .filter-date-input,
  .widget-custom-date input[type="date"],
  .wsp-compare-row input[type=date] {
    flex: 1 1 120px;
    min-width: 110px;
  }
}

/* Dark mode */
[data-theme="dark"] .date-input--compact,
[data-theme="dark"] .filter-date-input,
[data-theme="dark"] .widget-custom-date input[type="date"],
[data-theme="dark"] .wsp-compare-row input[type=date],
[data-theme="dark"] .widget-filter {
  background: var(--bg-surface2) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* ── Sekce ve formuláři Zápisu ───────────────────────────────── */
.zapis-sekce {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.zapis-sekce:last-of-type { border-bottom: none; }

.zapis-sekce-label {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* ── Zápis: Step-by-step layout ──────────────────────────────── */
/* .zapis-form-header a .zapis-form-title — styly sjednoceny v sekci
   "Sjednocená hlavička sekce (Level 1)" výše. */
.zapis-form-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.zapis-step {
  background: var(--bg-app);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 0;
}
details.zapis-step {
  /* overflow:hidden + border-radius v Safari/Webkit zakrývá spodní border.
     Řešení: border nahrazen box-shadow, který overflow nezařízne.
     Inset 0 0 0 1px → vypadá jako border, ale renderuje se vně overflow. */
  padding: 0 14px 14px;
  overflow: hidden;
  border: none;
  box-shadow: 0 0 0 1px var(--border);
}
details.zapis-step > summary {
  margin: 0;
}
details.zapis-step > .zapis-accordion-body {
  padding: 0;
}
/* .zapis-step-header — styly sjednoceny v sekci
   "Sjednocená hlavička skupiny / widgetu (Level 2)" výše. */
.zapis-step-num {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  background: var(--maroon);
  color: #F8EDE5;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 900;
  flex: 0 0 auto;
}
.zapis-step-title {
  flex: 1;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.zapis-status-toggle {
  display: inline-flex;
  border-radius: 20px;
  overflow: hidden;
  border: 1.5px solid var(--border);
  margin-top: 12px;
  flex-shrink: 0;
}
.zapis-status-toggle button {
  margin: 0;
  border: none;
  border-radius: 0;
  background: var(--bg-surface2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  padding: 7px 14px;
  min-height: 0;
  white-space: nowrap;
  width: auto;
}
.zapis-status-toggle button + button {
  border-left: 1.5px solid var(--border);
}
.zapis-status-toggle button.is-active {
  background: var(--maroon);
  color: #F8EDE5;
}
.zapis-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

/* ── Zápis: grid výkonu (KROK 5) ─────────────────────────────── */
.zapis-perf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
}
@media (min-width: 560px) {
  .zapis-perf-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
}
@media (min-width: 900px) {
  .zapis-perf-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.zapis-perf-grid > div {
  min-width: 0;
}

/* RPE — na úzké šířce musí být vidět vybraná hodnota (ne jen „RPE“ v řádku 3 sloupců) */
#zapisPerformanceBlock #bunkaRpe select#narocnost {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 48px;
}

.zapis-accordion-doplnujici {
  padding: 0;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.zapis-accordion-doplnujici:last-of-type {
  border-bottom: none;
}
.zapis-accordion-summary {
  list-style: none;
  cursor: pointer;
  /* Stejný vizuál jako .zapis-step-header — flex + tečkovaná linka */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 8px;
  margin: 0 0 12px;
  min-height: 44px;
  border-bottom: 1px dashed var(--stripe);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-primary);
  user-select: none;
}
.zapis-accordion-summary::-webkit-details-marker {
  display: none;
}
.zapis-accordion-doplnujici.app-disclosure > .zapis-accordion-summary::marker {
  content: '';
}
.zapis-accordion-summary-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  font-size: 11px;
  flex: 1;                /* zaplní zbývající šířku, šipka zůstane vpravo */
}
.zapis-accordion-body {
  padding: 0 0 14px;
}

/* ══ ZÁPIS — kompaktní formulář (stejný rytmus jako plánovač) ═════════ */
#tab-zapis #modal-zapis.sekce {
  padding: 0 !important;
  margin-bottom: 0;
  border: none;
  box-shadow: none;
  background: transparent;
}
#tab-zapis .zapis-form-header {
  padding: 8px 12px;
  margin: 0 0 6px;
  gap: 8px;
}
#tab-zapis .zapis-form-title {
  font-size: 12px;
  letter-spacing: 0.4px;
}
#tab-zapis .zapis-form-body {
  padding: 8px 10px;
  gap: 8px;
}
#tab-zapis .zapis-step {
  padding: 8px 10px;
  border-radius: 8px;
}
#tab-zapis details.zapis-step {
  padding: 0 10px 10px;
}
#tab-zapis .zapis-step-header {
  margin: 0 0 6px;
  padding-bottom: 5px;
  gap: 6px;
}
#tab-zapis .zapis-step-num {
  width: 18px;
  height: 18px;
  font-size: 10px;
}
#tab-zapis .zapis-step-title {
  font-size: 10px;
  letter-spacing: 0.03em;
}
#tab-zapis .zapis-sekce-label {
  font-size: 9px;
  letter-spacing: 0.03em;
  margin-bottom: 5px;
}
#tab-zapis .zapis-field-stack {
  margin-top: 6px;
}
#tab-zapis .zapis-field-stack--tight {
  margin-top: 4px;
}
#tab-zapis .zapis-grid-tight {
  gap: 4px 6px !important;
  align-items: end;
}
#tab-zapis .zapis-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
#tab-zapis label {
  margin-top: 5px;
  margin-bottom: 2px;
  font-size: 9px;
  letter-spacing: 0.03em;
  font-weight: 800;
}
#tab-zapis .zapis-step > label:first-of-type,
#tab-zapis .form-group > .label-with-help:first-child,
#tab-zapis .zapis-grid-tight > div > label:first-child,
#tab-zapis .zapis-field-stack > label:first-child {
  margin-top: 0;
}
#tab-zapis .label-with-help {
  margin-top: 5px;
  margin-bottom: 2px;
  gap: 4px;
}
#tab-zapis .label-with-help label {
  margin: 0;
}
#tab-zapis .help-trigger {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  padding: 0;
}
#tab-zapis input:not([type="checkbox"]):not([type="file"]):not([type="hidden"]),
#tab-zapis select,
#tab-zapis textarea {
  margin-top: 0;
  border-radius: 6px;
  border-width: 1px;
}
#tab-zapis .zapis-field-compact,
#tab-zapis select,
#tab-zapis input[type="text"],
#tab-zapis input[type="number"],
#tab-zapis input[type="date"],
#tab-zapis input[type="time"] {
  min-height: 34px !important;
  height: 34px !important;
  max-height: 34px;
  padding: 2px 8px !important;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.2;
  box-sizing: border-box;
}
#tab-zapis select {
  padding-right: 30px !important;
}
#tab-zapis textarea {
  height: auto !important;
  min-height: 52px !important;
  max-height: none;
  padding: 6px 8px !important;
  line-height: 1.35;
}
#tab-zapis .date-input--compact,
#tab-zapis .dt-input {
  width: 100%;
}
#tab-zapis #bunkaRpe select#narocnost {
  min-height: 34px !important;
  height: 34px !important;
}
#tab-zapis .mm-dur-field {
  min-height: 34px;
  padding: 2px 6px;
  border-radius: 6px;
  border-width: 1px;
}
#tab-zapis .mm-dur-field .mm-dur-cell {
  height: 28px;
  font-size: 16px !important;
}
#tab-zapis .mm-dur-field .mm-dur-sep {
  font-size: 10px;
}
#tab-zapis .zapis-status-toggle {
  margin-top: 6px;
  border-width: 1px;
}
#tab-zapis .zapis-status-toggle button {
  padding: 5px 10px;
  font-size: 10px;
  min-height: 32px;
}
#tab-zapis .smecka-chip {
  padding: 5px 10px;
  font-size: 11px;
  gap: 4px;
  border-width: 1.5px;
}
#tab-zapis .smecka-gender-pes,
#tab-zapis .smecka-gender-fena {
  font-size: 14px;
}
#tab-zapis #smeckaRpeBlok {
  margin-top: 6px;
}
#tab-zapis #smeckaRpeBlok .smecka-rpe-header {
  font-size: 9px;
  margin-bottom: 4px;
}
#tab-zapis .smecka-rpe-row {
  gap: 5px;
  margin-top: 5px;
}
#tab-zapis .smecka-rpe-item {
  padding: 5px 8px;
  min-width: 120px;
  gap: 3px;
}
#tab-zapis .smecka-rpe-item__name {
  font-size: 9px;
}
#tab-zapis .smecka-rpe-item select {
  min-height: 30px !important;
  height: 30px !important;
  padding: 2px 6px !important;
  font-size: 13px !important;
}
#tab-zapis .zapis-perf-grid {
  gap: 4px 6px;
}
#tab-zapis #casWeatherHint {
  margin: 0 0 6px !important;
  font-size: 10px !important;
}
#tab-zapis .zapis-perf-grid > div > label {
  margin-bottom: 3px !important;
  font-size: 9px;
}
#tab-zapis .sub-sekce {
  padding: 8px 10px;
  margin-top: 6px;
}
#tab-zapis #sekceZdravi {
  padding: 8px 10px !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}
#tab-zapis #sekceZavod,
#tab-zapis #sekceLokalitaZapis,
#tab-zapis #sekceGpx {
  margin-top: 6px !important;
}
#tab-zapis #sekceLokalitaZapis p {
  margin: 4px 0 0 !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
}
#tab-zapis .gpx-upload-zone {
  padding: 6px 10px !important;
  margin-top: 4px !important;
  font-size: 12px !important;
}
#tab-zapis #faze1Block,
#tab-zapis #faze3Block,
#tab-zapis #sekceIntervaly > div:not(#intervalSouhrn):not(#kontejnerIntervalu) {
  padding: 6px 8px !important;
  margin-bottom: 6px !important;
}
#tab-zapis #sekceIntervaly .input-interval-rpe {
  min-height: 34px !important;
  height: 34px !important;
  padding: 2px 6px !important;
}
#tab-zapis .zapis-accordion-summary {
  padding: 6px 0 4px;
  margin: 0 0 6px;
  min-height: 36px;
  gap: 6px;
  font-size: 10px;
}
#tab-zapis .zapis-accordion-summary-hint {
  font-size: 10px;
}
#tab-zapis .zapis-accordion-body {
  padding: 0 0 8px;
}
#tab-zapis #sekceTeren > div[style*="font-size:11px"] {
  margin-bottom: 5px !important;
  font-size: 10px !important;
}
#tab-zapis #sekceVybaveniZapis {
  margin-top: 6px !important;
  padding: 8px 10px !important;
}
#tab-zapis #sekcePoznamkaSpec {
  margin-top: 6px !important;
  padding: 8px !important;
}
#tab-zapis .zapis-actions {
  gap: 6px;
  padding-top: 2px;
}
#tab-zapis .zapis-actions .btn-secondary,
#tab-zapis .zapis-actions .btn-danger,
#tab-zapis .zapis-actions .btn-cancel {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 12px;
}

/* ──────────────────────────────────────────────────────────────────
   JEDNOTNÝ SYSTÉM POLE PRO DATUM / ČAS / TRVÁNÍ (Unified DT Field)
   ──────────────────────────────────────────────────────────────────
   Pravidla: každé pole (datum, čas dne, délka trvání MM:SS / HH:MM)
   musí mít stejný vizuál — výška 44px, border 1.5px, radius 8px,
   font-size 16px (anti-zoom iOS). Wrapper .date-field / .dt-field
   držeti pohromadě label + input. Pro filtry/kompakt používej
   .date-input--compact (viz výše).
   ────────────────────────────────────────────────────────────────── */
.date-field,
.dt-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.date-row,
.dt-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* Společný vzhled — pokrývá: datum, čas dne, custom „drum roll“ trvání,
   nastavení (čas notifikace) i další explicitně označené vstupy. */
.date-input,
.dt-input,
.phase-date-input,
.settings-time-input,
input[type="date"]:not(.date-input--compact):not(.filter-date-input):not(.widget-filter),
input[type="time"]:not(.date-input--compact):not(.filter-date-input):not(.widget-filter) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 44px;
  padding: 0 10px;
  margin: 0;
  box-sizing: border-box;
  border: 1.5px solid var(--border-mid);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 16px !important;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}

/* Laptop/desktop: kurzor textu = lze psát čas/datum klávesnicí */
@media (hover: hover) and (pointer: fine) {
  .date-input,
  .dt-input,
  .phase-date-input,
  .settings-time-input,
  input[type="date"]:not(.date-input--compact):not(.filter-date-input):not(.widget-filter),
  input[type="time"]:not(.date-input--compact):not(.filter-date-input):not(.widget-filter) {
    cursor: text;
  }
  input[type="time"]::-webkit-calendar-picker-indicator,
  input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
  }
}

.date-input:focus,
.dt-input:focus,
.phase-date-input:focus,
.settings-time-input:focus,
input[type="date"]:focus,
input[type="time"]:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px rgba(60, 26, 34, 0.10);
}

/* Dark mode — jednotné chování */
[data-theme="dark"] .date-input,
[data-theme="dark"] .dt-input,
[data-theme="dark"] .phase-date-input,
[data-theme="dark"] .settings-time-input,
[data-theme="dark"] input[type="date"]:not(.date-input--compact):not(.filter-date-input):not(.widget-filter),
[data-theme="dark"] input[type="time"]:not(.date-input--compact):not(.filter-date-input):not(.widget-filter) {
  background: var(--bg-surface2);
  border-color: var(--border);
}

/* Native chevron/krok šipky u type=time (desktop): drobně potlačit, aby
   pole nepřevyšovalo a vypadalo jako date input. */
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  filter: none;
  margin-left: 4px;
}
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Sjednocený label nad polem (DATUM / ČAS) */
.dt-field > label,
.date-field > label {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ── Profil psa — záložka Sporty ───────────────────────────────── */
.dog-sport-list {
  font-size: 13px;
  background: var(--bg-surface2);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dog-sport-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}
.dog-sport-row:last-child { border-bottom: none; }

.dog-sport-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  cursor: pointer;
  flex: 1;
  min-width: 0;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
}
/* Checkbox uvnitř labelu — zachová nativní vzhled */
.dog-sport-label .dog-sport-cb {
  width: 16px;
  height: 16px;
  min-width: 16px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  accent-color: var(--maroon);
}

/* Aktivní (zaškrtnutý) sport — plný input */
.dog-sport-time {
  width: 60px;
  min-width: 60px;
  padding: 5px 6px;
  margin: 0;
  font-size: 13px;
  text-align: center;
  border-radius: var(--radius-sm);
  transition: opacity 0.15s, background 0.15s;
}

/* Obálka inputu */
.dog-sport-time-wrap {
  width: 60px;
  min-width: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Neaktivní sport — skryj input úplně, zobraz jen pomlčku */
.dog-sport-time-wrap--off .dog-sport-time {
  display: none;
}
.dog-sport-time-wrap--off::after {
  content: '—';
  color: var(--text-muted);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* ── Záložky v Profilu psa (na úzkém displeji horizontální scroll) ─ */
.dog-profile-tabs-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.dog-profile-tabs-scroll::-webkit-scrollbar {
  display: none;
  height: 0;
}
.dog-profile-tab {
  flex: 0 0 auto;
  flex-shrink: 0;
  padding: 10px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color .15s, border-color .15s;
  margin: 0;
  width: auto;
  min-height: 0;
  white-space: nowrap;
}
.dog-profile-tab:hover { color: var(--text-primary); }
.dog-profile-tab.dog-profile-tab-active {
  color: var(--maroon);
  border-bottom-color: var(--maroon);
}

[data-theme="dark"] .dog-profile-tab.dog-profile-tab-active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

/* Profil psa — modál: obsah scrolluje, patička s tlačítky bez „mrtvé“ výšky */
.dog-profile-modal-shell {
  display: flex;
  flex-direction: column;
  max-height: min(92vh, calc(100dvh - 24px));
}
#dogProfileModal.modal-overlay {
  overscroll-behavior: contain;
}

#dogProfileModal .dog-profile-modal-body {
  flex: 1 1 auto;
  /* Pevná výška — modal nemění velikost při přepínání záložek.
     Kratší obsah nechá prázdné místo, delší se scrolluje. */
  height: min(58vh, 480px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ================================================================ EQ CHECKBOXES */

/* ── Záložky v Garáži a Výběru vybavení ────────────────────────── */
.garage-tab {
  flex: 1;
  padding: 8px 10px;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--bg-surface2);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
  margin: 0;
  width: auto;
  min-height: 0;
}
.garage-tab:hover { background: var(--bg-surface); }
.garage-tab.garage-tab-active {
  background: var(--maroon);
  color: #F8EDE5;
  border-color: var(--maroon);
}
.eq-tab-active {
  background: var(--maroon) !important;
  color: #F8EDE5 !important;
  border-color: var(--maroon) !important;
}

.eq-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-surface);
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
  color: var(--text-primary);
}
.eq-checkbox-label:hover { background: var(--bg-surface2); border-color: var(--border-mid); }
.eq-checkbox-label input { width: 18px; height: 18px; margin: 0; cursor: pointer; }

/* ================================================================ DARK MODE WIDGET OVERRIDES */

[data-theme="dark"] .widget-card p { color: var(--text-muted); }

[data-theme="dark"] .widget-card div[style*="background:#f5f5f5"],
[data-theme="dark"] .widget-card div[style*="background: #f5f5f5"],
[data-theme="dark"] .widget-card div[style*="background:#e8f5e9"],
[data-theme="dark"] .widget-card div[style*="background:#e1f5fe"],
[data-theme="dark"] .widget-card div[style*="background:#fff3e0"],
[data-theme="dark"] .widget-card div[style*="background:#ffebee"],
[data-theme="dark"] .widget-card div[style*="background:#fafafa"],
[data-theme="dark"] .widget-card div[style*="background:white"],
[data-theme="dark"] .widget-card div[style*="background: white"],
[data-theme="dark"] .widget-card div[style*="background:#fff"],
[data-theme="dark"] .widget-card div[style*="background: #fff"] { background: var(--bg-surface) !important; }

[data-theme="dark"] .widget-card [style*="color:#555"],
[data-theme="dark"] .widget-card [style*="color: #555"],
[data-theme="dark"] .widget-card [style*="color:#424242"],
[data-theme="dark"] .widget-card [style*="color:#263238"],
[data-theme="dark"] .widget-card [style*="color:#212121"] { color: var(--text-secondary) !important; }

[data-theme="dark"] .widget-card [style*="color:#999"],
[data-theme="dark"] .widget-card [style*="color: #999"],
[data-theme="dark"] .widget-card [style*="color:#757575"] { color: var(--text-muted) !important; }

[data-theme="dark"] .widget-card [style*="background:#eceff1"],
[data-theme="dark"] .widget-card [style*="background: #eceff1"] { background: var(--bg-surface2) !important; }

[data-theme="dark"] table { color: var(--text-primary); }
[data-theme="dark"] td, [data-theme="dark"] th { border-color: var(--border) !important; }

/* Calendar: empty cells and day name headers */
[data-theme="dark"] #historieKalendar table { background: var(--bg-surface); }
[data-theme="dark"] #historieKalendar thead tr { background: var(--bg-surface2) !important; }
[data-theme="dark"] #historieKalendar th { color: var(--text-secondary) !important; background: var(--bg-surface2) !important; }
[data-theme="dark"] #historieKalendar td { background: var(--bg-surface) !important; color: var(--text-primary) !important; }
/* Specific activity-colored cells override the base rule above */
[data-theme="dark"] #historieKalendar td[style*="background:#ffebee"] { background: #2A1010 !important; }
[data-theme="dark"] #historieKalendar td[style*="background:#e8f5e9"]  { background: #0E2A18 !important; }
[data-theme="dark"] #historieKalendar td[style*="background:#fff3e0"]  { background: #2A1A08 !important; }
[data-theme="dark"] #historieKalendar td[style*="background:#f9f9f9"]  { background: var(--bg-surface2) !important; }
[data-theme="dark"] #historieKalendar td[style*="background:#f5f5f5"]  { background: var(--bg-surface2) !important; }
[data-theme="dark"] #historieKalendar td[style*="background:#cfd8dc"]  { background: var(--bg-surface2) !important; }
/* Souhrn column (f9f9f9) */
[data-theme="dark"] td[style*="background:#f9f9f9"] { background: var(--bg-surface) !important; }
[data-theme="dark"] td[style*="background:#ffebee"] { background: #2A1010 !important; }
[data-theme="dark"] td[style*="background:#e8f5e9"] { background: #0E2A18 !important; }
[data-theme="dark"] td[style*="background:#fff3e0"] { background: #2A1A08 !important; }
[data-theme="dark"] td[style*="background:#f5f5f5"] { background: var(--bg-surface) !important; }
[data-theme="dark"] td[style*="background:#cfd8dc"] { background: var(--bg-surface2) !important; }

/* Widget filter selects with hardcoded inline background */
[data-theme="dark"] select.widget-filter,
[data-theme="dark"] .widget-filter { background: var(--bg-surface2) !important; color: var(--text-primary) !important; border-color: var(--border) !important; }
/* Override hardcoded #e3f2fd blue tint on type filters */
[data-theme="dark"] [style*="background:#e3f2fd"] { background: var(--bg-surface2) !important; color: var(--text-primary) !important; }

/* Donut chart white donut hole */
[data-theme="dark"] .widget-card [style*="background: white; border-radius: 50%"],
[data-theme="dark"] .widget-card [style*="background:white; border-radius: 50%"] { background: var(--bg-surface) !important; color: var(--text-primary) !important; }

[data-theme="dark"] #widgetNastaveniList > div {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] span[style*="color:#1976d2"] { color: #82B4E0 !important; }

[data-theme="dark"] div[style*="background: #f5f5f5"],
[data-theme="dark"] div[style*="background:#f5f5f5"] {
  background: var(--bg-surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

/* desktop sidebar layout moved into APP SHELL ARCHITECTURE block above */

/* ================================================================ RESPONSIVE */

@media (max-width: 600px) {
  .sekce { padding: 14px; border-radius: var(--radius-md); }
  .container { padding: 0; padding-top: 0; }
  .sticky-header { margin: 0; }
  button { padding: 13px 10px; font-size: 12px; min-height: 48px; }
  .btn-small { padding: 9px 8px; font-size: 11px; min-height: 40px; }
  h1 { font-size: 20px; }
  h2 { font-size: 15px; }
  .nav-item { padding: 10px 2px; font-size: 9px; }
  .nav-item i { font-size: 17px; }
  .tp-activity { flex-direction: column; align-items: flex-start; gap: 10px; }
  .widget-card { padding: 12px; border-radius: var(--radius-md); }
  .modal-box { padding: 18px; }
}

@media (max-width: 380px) {
  .nav-item { font-size: 8px; }
  .nav-item i { font-size: 15px; }
  button { font-size: 11px; letter-spacing: 0.4px; }
  h1 { font-size: 18px; }
}

/* ================================================================ MĚSÍČNÍ KALENDÁŘ */

#mesicniKalendar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#mesicniKalendar > div:first-child {
  min-width: 480px;
  width: 100%;
}

/* Responzivní výška buněk */
@media (max-width: 500px) {
  #mesicniKalendar [style*="min-height:68px"] { min-height: 56px; }
  #mesicniKalendar [style*="font-size:10px"] { font-size: 9px; }
}

/* ================================================================ TERÉNY — multi-terrain rows */

.teren-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}
.teren-row select { flex: 1; font-size: 16px !important; }
.teren-row input  { width: 58px; text-align: center; }

/* ================================================================ INTERVALY — RPE per segment */

.input-interval-rpe,
.input-pauza-rpe {
  font-size: 16px !important;
  padding: 6px 8px;
  min-height: 0;
}

/* ================================================================ DETAIL MODAL — řádek akcí (viz .act-icon-btn--wide) */

.detail-modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media (max-width: 600px) {
  .detail-modal-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .detail-modal-actions .act-icon-btn--wide {
    width: 100%;
    justify-content: center;
  }
}

/* ================================================================ KALENDÁŘ — stejná šíře sloupců na mobilu */

#mesicniKalendar > div {
  /* grid-template-columns je nastaveno inline — přepíšeme min-width buněk */
  width: 100%;
}

#mesicniKalendar > div > div {
  /* Každá buňka zabírá přesně svůj 1fr — zakázáme min-content rozšiřování */
  min-width: 0;
  overflow: hidden;
}

@media (max-width: 600px) {
  #mesicniKalendar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #mesicniKalendar > div {
    /* Pevná minimální šíře aby byl kalendář scrollovatelný ale sloupce stejné */
    min-width: 380px;
  }
}

/* Plánovač — tlačítko „Zobrazit plán“ (Gut) atd. */
.plan-inline-toggle {
  width: 100%;
  margin: 0 0 8px 0;
  min-height: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.plan-inline-toggle:hover {
  background: var(--bg-surface2);
}

.plan-global-header {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg-surface2) 0%, var(--bg-surface) 100%);
  border-radius: 8px;
  padding: 6px 8px;
  margin-bottom: 0;
}

.plan-global-header__title {
  font-size: 10px;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: 0.03em;
}

/* Kompaktní pole — globální parametry plánu + Gut trénink */
#planGlobalHeader .plan-grid-2--dense,
#planView-gut .plan-gut-panel .plan-grid-2--dense {
  gap: 4px 6px;
  align-items: start;
}
#planGlobalHeader .plan-field-stack--dense,
#planView-gut .plan-gut-panel .plan-field-stack--dense {
  margin-top: 3px;
}
#planGlobalHeader .plan-field-cell,
#planView-gut .plan-gut-panel .plan-field-cell {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
#planGlobalHeader .plan-field-cell > label,
#planGlobalHeader .plan-field-label-row,
#planView-gut .plan-gut-panel .plan-field-cell > label,
#planView-gut .plan-gut-panel .plan-field-label-row {
  margin: 0 0 10px;
  padding: 0;
  min-height: 14px;
  line-height: 1.2;
}
#planGlobalHeader .plan-field-cell > label,
#planView-gut .plan-gut-panel .plan-field-cell > label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 800;
  margin-top: 0 !important;
}
#planGlobalHeader .plan-field-label-row,
#planView-gut .plan-gut-panel .plan-field-label-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}
#planGlobalHeader .plan-field-label-row label,
#planView-gut .plan-gut-panel .plan-field-label-row label {
  margin: 0 !important;
  padding: 0;
  font-size: 9px;
  letter-spacing: 0.03em;
  line-height: 1.2;
  flex: 0 1 auto;
}
#planGlobalHeader .help-trigger--plan-field,
#planView-gut .plan-gut-panel .help-trigger--plan-field {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  align-self: center;
}
#planGlobalHeader .help-trigger--plan-field .icon,
#planView-gut .plan-gut-panel .help-trigger--plan-field .icon {
  display: block;
  vertical-align: middle;
}
#planGlobalHeader .planner-field-compact,
#planGlobalHeader .date-input--compact,
#planGlobalHeader select.planner-field-compact,
#planGlobalHeader input.planner-field-compact,
#planView-gut .plan-gut-panel .planner-field-compact,
#planView-gut .plan-gut-panel .date-input--compact,
#planView-gut .plan-gut-panel select.planner-field-compact,
#planView-gut .plan-gut-panel input.planner-field-compact {
  width: 100%;
  min-height: 34px !important;
  height: 34px !important;
  max-height: 34px;
  padding: 2px 8px !important;
  margin: 0 !important;
  font-size: 16px !important;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 6px;
  border-width: 1px;
  box-sizing: border-box;
}
#planGlobalHeader .plan-place-row {
  gap: 4px;
  align-items: center;
}
#planGlobalHeader .plan-place-manage-btn {
  width: 30px;
  min-width: 30px;
  height: 30px;
  min-height: 30px;
  border-radius: 6px;
  font-size: 14px;
}

/* Gut trénink — stejný kompaktní rytmus jako globální parametry */
#planView-gut .plan-gut-panel.plan-section {
  padding: 6px 8px;
  border-radius: 8px;
}
#planView-gut .plan-gut-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin: 0 0 4px;
  min-height: 14px;
}
#planView-gut .plan-gut-panel__title {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
#planView-gut .plan-gut-harani-note {
  grid-column: 1 / -1;
  background: #ad145718;
  border: 1px solid #ad145744;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 10px;
  line-height: 1.35;
  color: #ad1457;
  margin: 0;
}
#planView-gut .plan-gut-checkbox {
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-secondary);
  cursor: pointer;
}
#planView-gut .plan-gut-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  margin: 0;
  flex-shrink: 0;
}
#planView-gut .plan-gut-manual-block {
  margin-top: 6px;
}
#planView-gut .plan-gut-results {
  margin-top: 8px;
  overflow: visible;
}
/* Gut — rodiče nesmí sežrat horizontální swipe (jako u plan-weather-strip) */
#tab-plan #planView-gut,
#tab-plan #planView-gut .plan-gut-panel,
#tab-plan #gutVysledek,
#tab-plan .gut-rec-host,
#tab-plan .gut-rec-panel,
#tab-plan .gut-rec-stack-wrap {
  overflow-x: visible !important;
  overflow-y: visible;
  max-width: 100%;
  touch-action: pan-y;
}
#planView-gut .plan-gut-results .plan-field-cell > label {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Gut — karty doporučení (karusel jako plánovač) */
.gut-rec-host {
  margin-bottom: 10px;
}
.plan-gut-types-label {
  margin: 0 0 6px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  line-height: 1.3;
}
.gut-rec-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gut-rec-panel > .gut-rec__meta {
  padding: 0 2px;
}
.gut-rec-panel > .gut-rec__rules {
  margin-top: 0;
}
.gut-rec--slide {
  position: relative;
  border: 1.5px solid #0288d1;
  border-radius: 8px;
  background: var(--bg-surface);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 248px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
#tab-plan .gut-rec-stack--infinite .gut-rec--slide {
  min-height: 252px;
}
.plan-unified-stack__item--best .gut-rec--slide {
  border-color: var(--orange);
  box-shadow: 0 4px 14px rgba(239, 108, 0, 0.12);
}
.gut-rec__head {
  position: relative;
  padding-right: 34px;
  min-height: 28px;
  margin-bottom: 2px;
}
.gut-rec__title {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #0288d1;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  word-break: break-word;
}
.gut-rec--slide--tah .gut-rec__title { color: #d32f2f; }
.gut-rec--slide--objem .gut-rec__title { color: #2e7d32; }
.gut-rec--slide--spec .gut-rec__title { color: #7b1fa2; }
.gut-rec--slide--volno .gut-rec__title { color: #546e7a; }
.gut-rec--slide--zavod .gut-rec__title { color: #f57f17; }
.help-trigger--gut-card {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  min-width: 44px;
  min-height: 44px;
  margin: -8px -6px 0 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}
.help-trigger--gut-card:hover,
.help-trigger--gut-card:focus-visible {
  color: var(--orange);
}
.gut-rec__fields {
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.gut-rec__field {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 6px 8px;
  align-items: start;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.gut-rec__field:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.gut-rec__field dt {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  line-height: 1.35;
}
.gut-rec__field dd {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-primary);
}
.gut-rec__field--detail dd {
  font-size: 10px;
  color: var(--text-secondary);
}
.gut-rec__field dd.gut-rec__kolik {
  padding-top: 2px;
}
.gut-rec__dose-line {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.gut-rec__dose-val {
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 900;
  line-height: 1;
}
.gut-rec__dose-line--tah { color: #d32f2f; }
.gut-rec__dose-line--objem { color: #2e7d32; }
.gut-rec__dose-line--spec { color: #7b1fa2; }
.gut-rec__dose-line--volno { color: #546e7a; }
.gut-rec__dose-line--zavod { color: #f57f17; }
.gut-rec__dose-line .gut-rec__unit {
  font-size: clamp(14px, 4vw, 18px);
  font-weight: 800;
  line-height: 1;
  opacity: 1;
}
.gut-rec__detail-sub {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
}
.gut-rec__detail-sub--muted {
  color: var(--text-muted);
  font-size: 9px;
}
.gut-rec {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gut-rec__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gut-rec__week {
  font-size: 11px;
  font-weight: 800;
  color: #0288d1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
}
.gut-rec__dates {
  font-size: 10px;
  color: var(--text-secondary);
  line-height: 1.35;
}
.gut-rec__hero {
  background: var(--bg-app, var(--bg-surface2));
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}
.gut-rec__type {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}
.gut-rec__dose {
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 900;
  line-height: 1.1;
}
.gut-rec__hero--tah .gut-rec__dose { color: #d32f2f; }
.gut-rec__hero--objem .gut-rec__dose { color: #2e7d32; }
.gut-rec__hero--spec .gut-rec__dose { color: #7b1fa2; }
.gut-rec__hero--volno .gut-rec__dose { color: #546e7a; }
.gut-rec__unit {
  font-size: 0.42em;
  font-weight: 800;
}
.gut-rec__time {
  font-size: 10px;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  min-height: 18px;
}
.gut-rec__check {
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.gut-rec__check--ok {
  background: #e8f5e9;
  color: #2e7d32;
}
.gut-rec__check--bad {
  background: #ffebee;
  color: #b71c1c;
}
.gut-rec__rules {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: var(--bg-surface2);
  border-radius: 6px;
  font-size: 10px;
  color: var(--text-muted);
  line-height: 1.35;
}
.gut-rec__race {
  background: #fff8e1;
  border: 1px solid #f9a825;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gut-rec__race-title {
  font-size: 10px;
  font-weight: 800;
  color: #f57f17;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.gut-rec__dose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.gut-rec__dose-card {
  background: var(--bg-app, var(--bg-surface));
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.gut-rec__dose-card--solo {
  margin-bottom: 0;
}
.gut-rec__dose-when {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.gut-rec__dose-val {
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 900;
  line-height: 1.1;
}
.gut-rec__dose-val--hot { color: #d32f2f; }
.gut-rec__dose-val--warm { color: #e65100; }
.gut-rec__dose-sub {
  font-size: 10px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.3;
}
.gut-rec__dose-tag {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 2px;
}
.gut-rec__race-note {
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 10px;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.gut-rec__race-note--warn {
  background: #fff3e0;
  color: #e65100;
}
.gut-rec__race-note--danger {
  background: #ffebee;
  color: #b71c1c;
}
.gut-rec__race-note--tip {
  background: #e8f5e9;
  color: #1b5e20;
}

.plan-weather-manual {
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--bg-secondary, var(--bg-surface2));
  border-radius: 8px;
  border: 1px solid var(--border);
}
#planGlobalHeader .plan-weather-manual {
  margin-top: 3px;
  padding: 4px 6px;
  border-radius: 6px;
}
#planGlobalHeader .plan-weather-manual__head {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.03em;
  margin: 0 0 3px;
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
}
#planGlobalHeader .plan-weather-manual__source {
  font-size: 8px;
}
#planGlobalHeader .plan-weather-manual__grid {
  margin: 0;
  gap: 4px 6px;
}
#planGlobalHeader .plan-weather-manual .plan-field-cell > label {
  margin: 0 0 4px;
}
#planGlobalHeader .plan-weather-manual input.planner-field-compact {
  margin-top: 0;
}
.plan-weather-manual__head {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.plan-weather-manual__source {
  font-size: 9px;
  font-weight: 500;
  color: var(--text-muted);
  flex-shrink: 0;
}

.planner-select-button {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  padding: 7px 10px;
  font-size: 16px;
  font-weight: 700;
  min-height: 40px;
  box-sizing: border-box;
}

.planner-select-button:focus {
  outline: none;
  border-color: var(--maroon);
  box-shadow: 0 0 0 2px rgba(58, 26, 34, 0.14);
}

.plan-place-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.plan-place-manage-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  color: var(--text-primary);
  margin: 0;
  padding: 0;
  font-size: 16px;
}

.full-map-picker {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  height: 70vh;
  min-height: 340px;
  max-height: 720px;
}

@media (max-width: 700px) {
  .full-map-picker {
    min-height: 300px;
  }
}

#smartWeatherPlanner {
  display: grid;
  gap: 10px;
}

#plannerMap {
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: var(--bg-surface2);
}

#plannerMap .leaflet-tile {
  filter: grayscale(0.18) contrast(1.02);
}

[data-theme="dark"] #plannerMap .leaflet-tile {
  filter: grayscale(0.35) brightness(0.82) contrast(1.08);
}

#plannerMap.planner-map-night .leaflet-tile {
  filter: grayscale(0.45) brightness(0.78) contrast(1.1);
}

.planner-coords {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}

.weather-advice-container {
  display: grid;
  gap: 8px;
  padding: 8px 0 2px 0;
}

.weather-advice {
  border-radius: 10px;
  border: 1px solid transparent;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 700;
}

.weather-advice-container .weather-advice:first-child {
  padding: 12px 14px;
  font-size: 13px;
  border-width: 2px;
}

.weather-advice--good {
  background: #e8f5e9;
  border-color: #c8e6c9;
  color: #1b5e20;
}

.weather-advice--warn {
  background: #fff8e1;
  border-color: #ffecb3;
  color: #e65100;
}

.weather-advice--bad {
  background: #ffebee;
  border-color: #ffcdd2;
  color: #b71c1c;
}

[data-theme="dark"] .weather-advice--good {
  background: rgba(56, 142, 60, 0.22);
  border-color: rgba(76, 175, 80, 0.45);
  color: #c8e6c9;
}

[data-theme="dark"] .weather-advice--warn {
  background: rgba(251, 192, 45, 0.18);
  border-color: rgba(255, 213, 79, 0.38);
  color: #ffe082;
}

[data-theme="dark"] .weather-advice--bad {
  background: rgba(229, 57, 53, 0.2);
  border-color: rgba(239, 83, 80, 0.42);
  color: #ffcdd2;
}

/* Badge (číslo výsledku) */
.plan-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--orange);
  color: var(--bg-app);
  border-radius: 99px;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 7px;
  margin-left: 6px;
  vertical-align: middle;
}

/* "číst víc" info blok */
.plan-info-box {
  background: var(--bg-surface2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 10px;
  border-left: 3px solid var(--border-mid);
}
.plan-info-preview {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
}
.plan-read-more {
  background: none;
  border: none;
  color: var(--orange);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0 0;
  margin: 0;
  width: auto;
  min-height: 0;
  display: block;
}
.plan-read-more:hover { text-decoration: underline; }

/* ================================================================ INTERVAL BUILDER */

#intervalBuilder {
  min-height: 0;
}

/* Výjimka: vstup času v interval builderu (kompaktní řádek
   „rozklus / interval / výklus“). Přepisuje unifikovaný DT systém,
   aby se řádek vešel do mřížky. */
.interval-row input.interval-cas[type="time"] {
  width: 100%;
  height: 36px;
  min-height: 36px;
  font-size: 13px !important;
  padding: 0 8px;
}

.interval-row select.interval-rpe {
  font-size: 12px;
  padding: 6px 2px;
}

@media (max-width: 400px) {
  .interval-row {
    grid-template-columns: auto 1fr 60px 28px !important;
  }
}

/* ── Document scroll: scrolluje tělo dokumentu (body) ────────────── */
html {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
/* Vnitřní scrollovací oblasti v modálech — zastaví „propad" kolečka na dokument */
.modal-scroll-region {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Žádná záložka ani její wrapper nesmí blokovat svislý scroll dokumentu —
   overflow-y MUSÍ zůstat 'visible', aby se body mohl roztáhnout do výšky obsahu
   a uživatel mohl scrollovat. (overflow-x:hidden je v pořádku tam, kde je
   potřeba ořez horizontálního přetečení.) */
.tab-content,
#tab-plan,
#tab-zapis,
#tab-historie,
#tab-dashboard,
#tab-nastaveni,
#modal-zapis,
#mainApp,
#appObsah {
  overflow-y: visible;
  max-height: none;
}

/* Detail tréninku musí při kolečku myši scrollovat i uvnitř modálního okna */
#detailModalBox {
  overflow-y: auto;
  max-height: min(90vh, calc(100vh - 32px));
  overscroll-behavior: contain;
}

/* ── PWA: Bezpečná oblast pro iPhone notch a Dynamic Island ──────── */
:root {
  --safe-area-top:    env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* Bottom nav safe-area je řešená v App Shell sekci nahoře (env(safe-area-inset-bottom)). */

/* ═══════════════════════════════════════════════════════════════════
   PLÁNOVAČ — nové card UI
   ═══════════════════════════════════════════════════════════════════ */

/* ── Dvousloupcový layout (desktop: form | results) ─────────────── */
.plan-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

/* Záhlaví záložek plánovače (stejný princip jako profil psa) */
.planner-tabs-header {
  display: flex;
  flex: 0 0 100%;
  width: 100%;
  border-bottom: 2px solid var(--border);
  background: var(--bg-surface2);
  margin: 0 0 8px;
  padding: 0;
  box-sizing: border-box;
}
.planner-tab {
  flex: 1;
  min-height: 40px;
  padding: 8px 8px;
  border: none;
  background: none;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  border-bottom: 3px solid transparent !important;
  border-radius: 0;
  margin: 0;
  box-sizing: border-box;
}
.planner-tab span {
  pointer-events: none;
}
.planner-tab:hover {
  color: var(--text-secondary);
  background: rgba(60, 26, 34, 0.04);
}
.planner-tab:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
  z-index: 1;
}
.planner-tab-active {
  color: var(--maroon) !important;
  border-bottom: 3px solid var(--maroon) !important;
  background: rgba(60, 26, 34, 0.05) !important;
}

@media (max-width: 599px) {
  .planner-tab {
    font-size: 11px;
    padding: 10px 5px;
    line-height: 1.25;
    white-space: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: anywhere;
    text-align: center;
  }
}

/* Mobilní hlavička — auth pruh maximálně kompaktní + safe-area pro iOS notch */
@media (max-width: 799px) {
  #authPanel.auth-panel {
    padding: max(2px, env(safe-area-inset-top, 0px)) 12px 4px;
    font-size: 10px;
  }
  .auth-panel__user { font-size: 10px; }
  #authPanel .auth-panel__btn,
  #authPanel .auth-panel__test-link {
    min-height: 28px;
    padding: 3px 8px;
    font-size: 10px;
  }

  .sticky-header__row { padding: 4px 12px; }

  #aktivniPes,
  .sticky-header__select { height: 34px; font-size: 13px; }
}

.plan-form-panel {
  flex: 0 0 320px;
  min-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-result-panel {
  flex: 1;
  min-width: 0;
}

/* Gut: bez globálních parametrů vlevo — plná šířka pracovní plochy */
#tab-plan .plan-layout.plan-layout--gut-only .plan-form-panel {
  display: none;
}
#tab-plan .plan-layout.plan-layout--gut-only .plan-result-panel {
  flex: 1 1 100%;
  width: 100%;
  max-width: 100%;
}
#tab-plan .plan-layout.plan-layout--gut-only #planView-gut {
  max-width: none;
}

/* ── Sekce formuláře ─────────────────────────────────────────────── */
.plan-section {
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
}
.plan-section-conditions {
  border-color: #0288d1;
  background: #0288d118;
}
.plan-section-title {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.plan-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.plan-grid-2--tight {
  gap: 6px;
}
.plan-grid-2 > div { min-width: 0; }

.plan-field-stack {
  margin-top: 6px;
}
.plan-field-stack:first-child {
  margin-top: 0;
}

#tab-plan label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: .35px;
  margin-bottom: 3px;
  display: block;
}

#tab-plan .plan-form-panel input.date-input,
#tab-plan .plan-form-panel .date-input,
#tab-plan .plan-form-panel .planner-select-button,
#tab-plan .plan-form-panel select,
#tab-plan .plan-form-panel input[type="date"],
#tab-plan .plan-form-panel input[type="time"],
#tab-plan .plan-form-panel input[type="number"] {
  min-height: 40px;
  font-size: 16px !important;
  padding: 7px 10px;
  border-radius: 8px;
  box-sizing: border-box;
}
#tab-plan .plan-form-panel .label-with-help {
  margin-bottom: 3px;
  gap: 4px;
}

/* Ostatní vstupy v plánovači (výsledky, mapy) — mimo kompaktní panel */
#tab-plan input.date-input,
#tab-plan .date-input,
#tab-plan .planner-select-button,
#tab-plan select,
#tab-plan input[type="date"],
#tab-plan input[type="time"] {
  min-height: 48px;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  box-sizing: border-box;
}

/* Date inputy uvnitř dvousloupcových řádků nesmí přetékat */
.grid-2 .date-input,
.plan-grid-2 .date-input {
  width: 100%;
  min-width: 120px;
}

/* Periodizace v profilu psa: datumy vedle sebe jen pokud je místo */
.phase-block .date-input,
.phase-block .phase-date-input {
  flex: 1 1 140px;
  min-width: 120px;
}
.phase-range-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.phase-range-input {
  flex: 1 1 140px;
  min-width: 120px;
}
.form-group {
  min-width: 0;
}

/* ── Sbalitelné karty: vrchol sezóny (1. a 2.) ─────────────────── */
.race-peak-card {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  overflow: hidden;
}
.race-peak-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-surface2);
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  min-height: 48px;
  transition: background 0.15s ease;
}
.race-peak-header:hover {
  background: var(--bg-surface3, var(--bg-surface2));
}
.race-peak-title {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--orange);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.race-peak-summary {
  flex: 1;
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
}
.race-peak-summary:empty::before {
  content: 'Nevyplněno';
  color: var(--text-muted);
  font-style: italic;
  font-weight: 400;
}
.race-peak-remove {
  color: var(--text-muted);
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}
.race-peak-remove:hover {
  background: rgba(220, 53, 69, 0.12);
  color: var(--red, #c62828);
}
.race-peak-chevron {
  color: var(--text-muted);
  font-size: 16px;
  transition: transform 0.2s ease;
  user-select: none;
  display: inline-block;
}
.race-peak-card.is-collapsed .race-peak-chevron {
  transform: rotate(-90deg);
}
.race-peak-body {
  padding: 14px;
  display: block;
}
.race-peak-card.is-collapsed .race-peak-body {
  display: none;
}

/* ── Periodizace: cykly fází (1 nebo 2) ───────────────────────── */
.periodizace-cyklus {
  margin-bottom: 14px;
  padding: 10px 12px 4px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
  border: 1px dashed var(--border);
}
[data-theme="dark"] .periodizace-cyklus,
.dark .periodizace-cyklus {
  background: rgba(255, 255, 255, 0.03);
}
.periodizace-cyklus + .periodizace-cyklus {
  margin-top: 16px;
}
.periodizace-cyklus-title {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-secondary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Deník: horní lišta filtrů — kompaktní, bez zbytečného „bílého pruhu“ */
.denik-toolbar {
  background: var(--bg-surface);
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  box-sizing: border-box;
  margin: 0;
}

/* Deník: month row helpers (nahrazuje inline flex styly) */
.history-filter-row {
  flex: 1 1 100%;
  min-width: 0;
  box-sizing: border-box;
}
.history-month-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}
.history-month-row > .denik-month-nav-btn,
.history-month-row > button {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface2);
  color: var(--text-primary);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
}
.history-month-picker {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface2);
  box-sizing: border-box;
}
.history-month-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  pointer-events: none;
  user-select: none;
  box-sizing: border-box;
}
.history-month-input-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 16px !important;
}
.history-month-row > input[type="month"]:not(.history-month-input-native) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.flex-fill {
  flex: 1 1 auto;
  min-width: 0;
}

/* Profil psa — cílové tempo/rychlost se na úzké šířce nesmí překrývat */
.race-target-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.race-target-input {
  flex: 1 1 74px;
  min-width: 72px;
  max-width: 92px;
  width: 100%;
}
.race-target-speed-input {
  flex: 1 1 110px;
  min-width: 100px;
  max-width: 140px;
  width: 100%;
}

/* Když není místo vedle sebe, musí jít pod sebe (žádné překrývání) */
@media (max-width: 760px) {
  .grid-2,
  .plan-grid-2 {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Velký select záměru */
.plan-intent-select {
  font-weight: 900;
  font-size: 14px;
  border-color: var(--border-mid);
  margin-top: 4px;
}

/* GPS tlačítko inline */
.plan-gps-btn {
  background: none;
  border: 1px solid #0288d1;
  color: #0288d1;
  border-radius: 12px;
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  margin: 0;
  min-height: 0;
  width: auto;
  margin-left: auto;
}

/* ── CTA Tlačítko ────────────────────────────────────────────────── */
.plan-cta-btn {
  width: 100%;
  background: var(--maroon);
  color: #F8EDE5;
  border: none;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .4px;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
  margin: 0;
  min-height: 44px;
}
.plan-cta-btn:hover  { opacity: .88; }
.plan-cta-btn:active { transform: scale(.98); }

/* ── Autopilot banner ────────────────────────────────────────────── */
.plan-autopilot {
  font-size: 12px;
  line-height: 1.5;
  min-height: 0;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.plan-empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════
   VÝSLEDKOVÉ KARTY
   ═══════════════════════════════════════════════════════════════════ */

.plan-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 14px;
  position: relative;
}

/* ── Unified stack: čistý seznam návrhů ────────────────────────── */
.plan-unified-stack-wrap {
  position: relative;
}
.plan-unified-stack-hint {
  display: none;
  margin: 6px 0 0;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--text-muted);
  line-height: 1.35;
}
.plan-unified-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-unified-stack__item {
  min-width: 0;
}
.plan-unified-stack__item--best .plan-proposal-card {
  border: 2px solid var(--orange);
  box-shadow: 0 4px 14px rgba(239, 108, 0, 0.12);
}
.plan-proposal-card--warning {
  border-color: #ef6c00;
}
.plan-proposal-card--rejected {
  border-color: #c62828;
  opacity: 0.92;
}

.plan-rank-badge {
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.25;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--bg-surface2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.plan-rank-badge--best {
  color: var(--orange);
  border-color: var(--orange);
  background: rgba(239, 108, 0, 0.08);
}
.plan-rank-badge--alt {
  color: var(--text-muted);
}
.plan-rank-badge--acwr {
  color: #fff;
  border-color: transparent;
}
.plan-rank-badge--acwr-danger { background: #c62828; }
.plan-rank-badge--acwr-warn   { background: #ef6c00; }
.plan-rank-badge--acwr-ok     { background: #2e7d32; }
.plan-rank-badge--acwr-fresh  { background: #1565c0; }
.plan-rank-badge--acwr .icon,
.plan-rank-badge--acwr svg {
  color: #fff;
}

.plan-proposal-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(60, 26, 34, 0.06);
  overflow: hidden;
}

.plan-proposal-card__top {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 12px;
}
.plan-proposal-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.plan-proposal-card__head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}
.plan-proposal-card__name {
  font-weight: 900;
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.plan-proposal-card__metrics {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.plan-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  padding: 7px 11px;
  border-radius: 999px;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  color: var(--text-primary);
  white-space: nowrap;
}
.plan-pill .icon,
.plan-pill svg {
  flex-shrink: 0;
}
.plan-pill--rpe {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #f8ede5;
}
.plan-proposal-card__cta {
  width: 100%;
}
.plan-proposal-card__btn {
  width: 100%;
  margin: 0;
  min-height: 44px;
  padding: 11px 16px;
  letter-spacing: 0.5px;
  font-size: 13px;
  font-weight: 800;
  border-radius: 10px;
}

.plan-proposal-card__bottom {
  border-top: 1px solid var(--border);
  background: var(--bg-app);
}
.plan-proposal-card__details {
  margin: 0;
}
.plan-proposal-card__details summary {
  list-style: none;
  cursor: pointer;
  border: none;
  padding: 12px 14px;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}
.plan-proposal-card__details summary::-webkit-details-marker {
  display: none;
}
.plan-proposal-card__detailsBody {
  padding: 0 14px 14px;
  color: var(--text-secondary);
  font-size: 13px;
  line-height: 1.65;
}

/* Kompaktní disclosure v kartách — bez „play“ kroužku */
.plan-proposal-card__details.app-disclosure > summary {
  padding-right: 28px !important;
}
.plan-proposal-card__details.app-disclosure > summary::after {
  content: '▼';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  min-width: 0;
  padding: 0;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.plan-proposal-card__details.app-disclosure[open] > summary::after {
  transform: translateY(-50%) rotate(180deg);
  background: transparent;
  color: var(--maroon);
  border: none;
  box-shadow: none;
}

/* Mobil: horizontální karusel + obsah karty na střed */
@media (max-width: 719px) {
  .plan-proposal-card__badges {
    justify-content: center;
  }
  .plan-proposal-card__head {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
  .plan-proposal-card__name {
    width: 100%;
    text-align: center;
  }
  .plan-proposal-card__metrics {
    justify-content: center;
  }
  .plan-proposal-card__details summary {
    justify-content: center;
    text-align: center;
  }

  .plan-unified-stack-hint {
    display: block;
  }
  .plan-unified-stack-wrap {
    margin-left: -10px;
    margin-right: -10px;
  }
  /* Náznak dalších karet po stranách */
  .plan-unified-stack-wrap::before,
  .plan-unified-stack-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 28px;
    width: 24px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.35s ease;
  }
  .plan-unified-stack-wrap::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg-app) 20%, transparent);
  }
  .plan-unified-stack-wrap::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg-app) 20%, transparent);
  }
  .plan-unified-stack-wrap--peek::after {
    opacity: 1;
  }
  .plan-unified-stack {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 12px;
    padding: 2px 12px 10px;
    scrollbar-width: thin;
  }
  .plan-unified-stack.plan-unified-stack--peek-anim {
    scroll-snap-type: none !important;
  }
  .plan-unified-stack.plan-unified-stack--peek-anim .plan-unified-stack__item {
    scroll-snap-align: none !important;
  }
  .plan-unified-stack__item {
    flex: 0 0 min(88vw, 340px);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    max-width: calc(100vw - 48px);
  }
  .plan-unified-stack .plan-empty-note {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
  #tab-plan .plan-unified-stack-wrap,
  #tab-plan .gut-rec-stack-wrap {
    overflow-x: visible !important;
  }
  #tab-plan #gutVysledek {
    overflow-x: visible !important;
    touch-action: pan-y;
  }
  #tab-plan .gut-rec-stack-wrap {
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }
  .plan-unified-stack__item--best .gut-rec--slide {
    border-width: 2px;
  }
}

/* Gut — horizontální nekonečný pás (mobil i desktop) */
.gut-rec-stack-wrap {
  position: relative;
  margin-left: -10px;
  margin-right: -10px;
  overflow: visible !important;
  touch-action: pan-y;
}
.gut-rec-stack-wrap .plan-unified-stack-hint {
  display: block;
}
#tab-plan .gut-rec-stack--infinite.plan-unified-stack {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-x pan-y !important;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 12px;
  padding: 2px 12px 10px;
  scrollbar-width: thin;
  cursor: grab;
}
#tab-plan .gut-rec-stack--infinite.plan-unified-stack.gut-rec-stack--dragging {
  cursor: grabbing;
  scroll-snap-type: none !important;
  user-select: none;
}
#tab-plan .gut-rec-stack--infinite.plan-unified-stack.gut-rec-stack--jump,
#tab-plan .gut-rec-stack--infinite.plan-unified-stack.plan-unified-stack--peek-anim {
  scroll-snap-type: none !important;
}
#tab-plan .gut-rec-stack--infinite .plan-unified-stack__item--clone {
  pointer-events: none;
}
#tab-plan .gut-rec-stack--infinite .plan-unified-stack__item {
  align-self: stretch;
  flex: 0 0 min(88vw, 340px) !important;
  width: min(88vw, 340px) !important;
  min-width: min(88vw, 340px) !important;
  max-width: min(88vw, 340px) !important;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  box-sizing: border-box !important;
}
/* Gut — desktop: statická mřížka (5 karet vedle sebe, bez scrollu) */
@media (min-width: 720px) {
  #tab-plan .gut-rec-stack-wrap--static {
    margin-left: 0;
    margin-right: 0;
    touch-action: pan-y;
  }
  #tab-plan .gut-rec-stack-wrap--static .plan-unified-stack-hint {
    display: none !important;
  }
  #tab-plan .gut-rec-stack--desktop-static.plan-unified-stack {
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    cursor: default;
    touch-action: pan-y !important;
    overscroll-behavior-x: auto;
    padding: 2px 0 8px;
    gap: clamp(6px, 0.75vw, 10px);
  }
  #tab-plan .gut-rec-stack--desktop-static .plan-unified-stack__item--clone,
  #tab-plan .gut-rec-stack--desktop-static .plan-unified-stack__item:not([data-gut-cycle="1"]) {
    display: none !important;
  }
  #tab-plan .gut-rec-stack--desktop-static .plan-unified-stack__item[data-gut-cycle="1"] {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    scroll-snap-align: unset;
    scroll-snap-stop: normal;
  }
  #tab-plan .gut-rec-stack--desktop-static .gut-rec--slide {
    min-height: 200px;
    padding: 6px 8px 8px;
  }
  #tab-plan .gut-rec-stack--desktop-static .gut-rec__title {
    font-size: 10px;
  }
  #tab-plan .gut-rec-stack--desktop-static .gut-rec__field dt {
    font-size: 9px;
  }
  #tab-plan .gut-rec-stack--desktop-static .gut-rec__field dd {
    font-size: 11px;
  }
}

@media (min-width: 720px) {
  .plan-proposal-card__top {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "badges badges"
      "head cta";
    align-items: end;
    gap: 10px 16px;
    padding: 16px 18px 14px;
  }
  .plan-proposal-card__badges {
    grid-area: badges;
    justify-content: flex-start;
  }
  .plan-proposal-card__head {
    grid-area: head;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 12px 16px;
  }
  .plan-proposal-card__name {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
  }
  .plan-proposal-card__metrics {
    flex: 0 0 auto;
    justify-content: flex-end;
  }
  .plan-proposal-card__details summary {
    justify-content: flex-start;
    text-align: left;
  }
  .plan-proposal-card__cta {
    grid-area: cta;
    width: auto;
    min-width: 132px;
    align-self: end;
  }
  .plan-proposal-card__btn {
    width: 100%;
    min-width: 132px;
  }
}

/* Datové důvody (vnořené v details) — podobný minimalistický styl */
.plan-data-details summary {
  list-style: none;
  cursor: pointer;
  border: none;
  padding: 4px 0;
  color: var(--text-muted);
  font-size: 11px;
}
.plan-data-details summary::-webkit-details-marker {
  display: none;
}
.plan-data-details {
  margin-top: 8px;
}
.plan-data-details__body {
  margin-top: 6px;
}

.plan-weather-extremes {
  margin-top: 8px;
  display: grid;
  gap: 6px;
}
.plan-context-card {
  /* ZÁMĚRNĚ bez overflow:hidden — text uvnitř má `overflow-wrap: anywhere`,
     takže nemá co utíkat. Přítomnost `overflow:hidden` na iOS Safari
     zakládala scroll-container, který zachytával touch swipe gesta a blokoval
     skrolování vnořeného horizontálního pásu předpovědi. */
  overflow: visible;
}

/* Wrapper pro horizontální pás 24h předpovědi.
   Strip je SAMOSTATNÝ sourozenec .plan-context-card (ne uvnitř), aby
   nebyl ovlivněn žádným overflow rodiče a touch gesta na iOS fungovala. */
.plan-weather-strip-wrap {
  margin: 4px 0 10px;
  position: relative;
  width: 100%;
  max-width: 100%;
  touch-action: pan-x pan-y;
  /* Padding zleva/zprava aby se vešly šipky a nepřekrývaly karty */
  padding: 0 32px;
  box-sizing: border-box;
}

/* HARD CAP — absolutní pojistka, že nic v plánovači nepřesáhne šířku viewportu.
   Tester reportoval, že i karta Dogfitness s badge ACWR měla useknutý okraj.
   Tato pravidla VŽDY zaříznou cokoli, co se snaží přeteklé. */
#tab-plan,
#tab-plan #planView-training,
#tab-plan #vystupPlanu,
#tab-plan .plan-results-wrap,
#tab-plan .plan-results-wrap > *,
#tab-plan .plan-context-card,
#tab-plan .plan-weather-strip-wrap,
#tab-plan .plan-unified-stack:not(.gut-rec-stack--infinite),
#tab-plan .plan-unified-stack__item,
#tab-plan .plan-proposal-card,
#tab-plan .plan-data-details {
  max-width: 100% !important;
  box-sizing: border-box !important;
}
#tab-plan .plan-results-wrap,
#tab-plan #vystupPlanu {
  overflow-x: hidden;
  overflow-x: clip;
}
/* Karty návrhů — bez rozbití gridu na úzkém plánovači */
#tab-plan .plan-proposal-card__top,
#tab-plan .plan-proposal-card__head,
#tab-plan .plan-proposal-card__metrics {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Šipky pro scrollování pásu předpovědi — fungují vždy, i když selže CSS scroll.
   Vysoká specificita + !important aby žádné jiné pravidlo nemohlo skrýt. */
.plan-weather-strip-wrap > button.plan-weather-strip__nav,
button.plan-weather-strip__nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  width: 28px !important;
  height: 44px !important;
  min-width: 28px !important;
  min-height: 44px !important;
  max-width: 28px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: opacity 0.15s ease, transform 0.1s ease;
  visibility: visible !important;
  opacity: 1;
}
.plan-weather-strip__nav:active {
  transform: translateY(-50%) scale(0.92) !important;
}
.plan-weather-strip__nav--prev {
  left: 0 !important;
  right: auto !important;
}
.plan-weather-strip__nav--next {
  right: 0 !important;
  left: auto !important;
}
.plan-weather-strip__nav[disabled] {
  cursor: default !important;
  pointer-events: none;
}
.plan-weather-strip-wrap::after {
  content: 'Šipkami ‹ › nebo prstem rolujte ostatní hodiny';
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 4px;
  opacity: 0.7;
}
@media (min-width: 700px) {
  .plan-weather-strip-wrap::after {
    display: none;
  }
}
.plan-weather-extreme {
  font-size: 12px;
  border: 1px solid var(--border);
  background: var(--bg-app);
  border-radius: 8px;
  padding: 6px 8px;
  color: var(--text-secondary);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.plan-weather-extreme--cool { border-left: 3px solid #2e7d32; }
.plan-weather-extreme--hot { border-left: 3px solid #c62828; }

.plan-weather-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  padding: 0 12px 6px 0;
  -webkit-overflow-scrolling: touch;
  /* pan-x: horizontální scroll uvnitř stripu
     pan-y: dovol vertikální swipe propustit na stránku (jinak prst na stripu
     "zamrzne" a nelze rolovat stránku nahoru/dolů) */
  touch-action: pan-x pan-y;
  scroll-snap-type: x proximity;
  width: 100%;
  box-sizing: border-box;
}
.plan-weather-strip::-webkit-scrollbar {
  height: 6px;
}
.plan-weather-strip::-webkit-scrollbar-thumb {
  background: var(--border-mid);
  border-radius: 3px;
}
.plan-weather-strip::-webkit-scrollbar-track {
  background: transparent;
}
.plan-weather-strip__item {
  min-width: 58px;
  border: 1px solid var(--border);
  background: var(--bg-app);
  border-radius: 8px;
  padding: 5px 4px;
  text-align: center;
  box-sizing: border-box;
}
.plan-weather-strip__time { font-size: 10px; color: var(--text-muted); }
.plan-weather-strip__icon { font-size: 15px; line-height: 1.1; }
.plan-weather-strip__temp { font-size: 12px; font-weight: 800; color: var(--text-primary); }
.plan-weather-strip__hum { font-size: 10px; color: var(--text-secondary); }

@media (max-width: 600px) {
  .plan-weather-extreme {
    font-size: 11px;
    padding: 5px 7px;
    line-height: 1.35;
  }
  .plan-weather-strip {
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: thin;
    padding-bottom: 6px;
    /* Konec stripu — drobný odsazený padding, aby poslední karta nedoléhala
       k pravému okraji a uživatel viděl, že předpověď opravdu končí. */
    padding-right: 6px;
    scroll-padding-right: 12px;
  }
  .plan-weather-strip__item {
    flex: 0 0 auto;
    min-width: 65px;
    padding: 4px 2px;
    scroll-snap-align: start;
  }
  .plan-weather-strip__time { font-size: 9px; }
  .plan-weather-strip__icon { font-size: 13px; }
  .plan-weather-strip__temp { font-size: 11px; }
  .plan-weather-strip__hum { font-size: 9px; }
}

@media (min-width: 900px) {
  .plan-results-wrap {
    max-width: 980px;
    margin: 0 auto;
  }
  .plan-unified-stack {
    gap: 10px;
  }
  .plan-proposal-card__name {
    font-size: 17px;
  }
}

/* Hero karta — doporučení */
.plan-card--hero {
  border-color: #2e7d32;
  border-width: 2px;
  background: linear-gradient(135deg, var(--bg-surface) 0%, #2e7d3208 100%);
  box-shadow: 0 4px 20px rgba(46,125,50,.12);
  width: 100%;
  box-sizing: border-box;
}
.plan-card--rest {
  border-color: #546e7a;
  background: linear-gradient(135deg, var(--bg-surface) 0%, #546e7a08 100%);
}

/* Zamítnuto karta */
.plan-card--rejected {
  border-color: #b71c1c44;
  opacity: .85;
  background: var(--bg-app);
}

/* Varování karta */
.plan-card--warning {
  border-color: #e65100;
  border-left-width: 4px;
}

/* Badge v rohu karty */
.plan-card__badge {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 12px;
}
.plan-card__badge--hero     { background: #2e7d3220; color: #2e7d32; }
.plan-card__badge--warning  { background: #e6510020; color: #e65100; }
.plan-card__badge--rejected { background: #b71c1c20; color: #b71c1c; }

/* Název tréninku */
.plan-card__title {
  font-size: 16px;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 10px;
}
.plan-card__title--hero { font-size: 20px; }

/* Tělo karty */
.plan-card__body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 14px;
}
.plan-card__body strong { color: var(--text-primary); }

/* Alternativní trénink label */
.plan-card__alt {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.plan-card__alt-label { font-weight: 700; }

/* Akce */
.plan-card__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* Přenést do zápisu tlačítko */
.plan-card-btn {
  background: var(--bg-surface2);
  color: var(--text-primary);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 16px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  margin: 0;
  min-height: 0;
  width: auto;
  white-space: nowrap;
}
.plan-card-btn:hover { background: var(--bg-surface); }
.plan-card-btn--hero {
  background: #2e7d32;
  color: #fff;
  border-color: #2e7d32;
  padding: 12px 20px;
  font-size: 13px;
  width: 100%;
}
.plan-card-btn--hero:hover { background: #1b5e20; }

/* ── Mobilní layout: single column ──────────────────────────────── */
@media (max-width: 799px) {
  .plan-layout {
    flex-direction: column;
    align-items: stretch !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .plan-form-panel,
  .plan-result-panel {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* Result panel a vše uvnitř nesmí překročit šířku rodiče.
     Strip má vlastní overflow-x: auto, takže si poradí sám. */
  #tab-plan .plan-main-view,
  #tab-plan #vystupPlanu,
  #tab-plan .plan-results-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* ── Multi-result layout ──────────────────────────────────────────── */
.plan-section-label {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  margin: 20px 0 8px;
}
.plan-section-label:first-child { margin-top: 0; }

/* Záložní karty — vždy vertikální stack, max 2 položky */
.plan-alts-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.plan-results-wrap {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-surface);
  padding: 10px;
}

.plan-results-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.plan-results-head__title {
  font-size: 13px;
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: .3px;
}

.plan-results-head__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.plan-results-btn {
  margin: 0;
  width: auto;
  min-height: 0;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface2);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.plan-results-btn:hover { background: var(--bg-surface); }

.plan-results-btn--danger {
  border-color: #c62828;
  color: #c62828;
  background: #ffebee;
}

.plan-results-subsection {
  margin-top: 10px;
}

.plan-results-subsection > .plan-results-btn {
  width: 100%;
  text-align: left;
}

[data-theme="dark"] .plan-results-btn--danger {
  background: rgba(198, 40, 40, 0.18);
  color: #ffb3b3;
  border-color: rgba(255, 138, 138, 0.5);
}

/* Týdenní plán odstraněn z UI — skrýt pokud by JS naplnil element */

/* Grid pro alternativní karty — zachován pro zpětnou kompatibilitu */
.plan-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
/* Two columns only when result panel has enough space (wide monitors without sidebar) */
@media (min-width: 1400px) {
  .plan-cards-grid { grid-template-columns: 1fr 1fr; }
}

/* Alternativní (menší) karta */
.plan-card--alt {
  padding: 14px;
}
.plan-card--alt .plan-card__params {
  font-size: 12px;
}
.plan-card--alt .plan-card-btn {
  font-size: 11px;
  padding: 7px 12px;
}

/* Warning v alternativě (menší) */
.plan-card--warning-sm {
  border-left: 3px solid #e65100;
  opacity: .9;
}

/* ── Reasoning panel ─────────────────────────────────────────────── */
.plan-reasoning {
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.plan-reasoning__title {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.plan-reasoning__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 600px) { .plan-reasoning__grid { grid-template-columns: repeat(2, 1fr); } }

.plan-reasoning__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.plan-reasoning__label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.plan-reasoning__val {
  font-size: 13px;
  font-weight: 900;
  color: var(--text-primary);
}

.plan-insight-box {
  margin-top: 10px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-secondary);
}

/* Hero karta - OK result params */
.plan-card--ok .plan-card__params {
  font-size: 14px;
  line-height: 1.7;
}

/* Computing placeholder */
.plan-computing {
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 700;
}

/* Badge pro alt karty */
.plan-card__badge--alt {
  background: var(--bg-surface2);
  color: var(--text-secondary);
}

/* Empty state — vždy vycentrovaný */
.plan-empty-state {
  min-height: 280px;
}

/* ── Compact card params strip ───────────────────────────────────── */
.plan-card__name {
  font-size: 15px;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.plan-card--hero .plan-card__name { font-size: 18px; }
.plan-card--alt  .plan-card__name { font-size: 13px; }

.plan-card__strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.plan-strip__item {
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: normal;       /* allow wrap for long interval descriptions */
  word-break: break-word;
  max-width: 100%;
}
.plan-strip__rpe {
  background: var(--maroon);
  color: #F8EDE5;
  border-color: var(--maroon);
}

/* Footer: buttons row */
.plan-card__footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
}
/* Tlačítka přes celou šířku pokud je jen jedno */
.plan-card__footer .plan-card-btn:only-child,
.plan-card__footer .plan-card-btn--hero {
  grid-column: 1 / -1;
}
/* ℹ️ Proč? a 🔄 Recovery — vždy vedle sebe v druhém řádku */
.plan-card__footer .plan-info-btn {
  grid-column: auto;
}

/* Collapsible theory */
.plan-card__theory {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.7;
  background: var(--bg-surface2);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 8px 0;
}
.plan-card__theory strong { color: var(--text-primary); }

/* ℹ️ Proč? button */
.plan-info-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  margin: 0;
  min-height: 0;
  width: auto;
  transition: all .15s;
  white-space: nowrap;
}
.plan-info-btn:hover, .plan-info-btn.active {
  background: var(--bg-surface2);
  color: var(--text-primary);
  border-color: var(--orange);
}

/* Zapsat tlačítka — uniformní velikost */
.plan-card-btn {
  font-size: 11px;
  padding: 8px 10px;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.plan-card-btn--hero {
  font-size: 13px;
  padding: 12px;
  grid-column: 1 / -1;
}
.plan-info-btn {
  font-size: 11px;
  padding: 8px 10px;
  text-align: center;
  box-sizing: border-box;
}

/* ── Recovery Protocol panel ─────────────────────────────────────── */
.plan-recovery-btn {
  border-color: #0288d1 !important;
  color: #0288d1 !important;
}
.plan-recovery-btn.active,
.plan-recovery-btn:hover {
  background: #0288d118 !important;
}

.plan-recovery {
  background: var(--bg-surface);
  border: 1.5px solid #0288d144;
  border-radius: var(--radius-md);
  padding: 14px;
  margin-top: 10px;
  font-size: 12px;
}

.plan-recovery__title {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #0288d1;
  margin-bottom: 12px;
}

.plan-recovery__timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.plan-recovery__timeline::before {
  content: '';
  position: absolute;
  left: 52px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
}

.plan-recovery__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 8px 0;
}
.plan-recovery__time {
  flex: 0 0 52px;
  font-size: 10px;
  font-weight: 900;
  color: #0288d1;
  text-align: right;
  padding-top: 2px;
  background: var(--bg-surface);
  position: relative;
  z-index: 1;
}
.plan-recovery__desc {
  flex: 1;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.55;
  padding-left: 10px;
  border-left: none;
}
.plan-recovery__desc strong { color: var(--text-primary); }

.plan-recovery__warning {
  background: #b71c1c18;
  border: 1px solid #b71c1c44;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.55;
  margin-bottom: 12px;
}

.plan-recovery__tip {
  background: #f9a82518;
  border: 1px solid #f9a82544;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.55;
  margin-top: 10px;
}

/* ── Doporučení náhrady v kartě ─────────────────────────────────── */
.plan-card__alt-rec {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-surface2);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.plan-card__alt-rec strong { color: var(--text-primary); }

/* ── Kalendář + picker popup ─────────────────────────────────────── */
.kal-picker-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
  text-align: center;
  width: 100%;
  margin: 0;
  min-height: 0;
}
.kal-picker-btn:hover {
  background: var(--bg-surface2);
  border-color: var(--orange);
  transform: translateY(-1px);
}
.kal-picker-btn:active { transform: scale(.97); }

.kal-picker-btn--metrics {
  background: #7b1fa210;
  border-color: #7b1fa244;
  flex-direction: row;
  gap: 12px;
  justify-content: flex-start;
  padding: 14px 16px;
}
.kal-picker-btn--metrics:hover { border-color: #7b1fa2; }

.kal-picker-icon {
  font-size: 28px;
  line-height: 1;
  display: block;
}
.kal-picker-btn--metrics .kal-picker-icon { font-size: 24px; }

.kal-picker-label {
  font-size: 13px;
  font-weight: 900;
  color: var(--text-primary);
  display: block;
}
.kal-picker-sub {
  font-size: 10px;
  color: var(--text-muted);
  display: block;
}
.kal-picker-btn--metrics .kal-picker-label { font-size: 14px; }

/* ── FAB — Floating Action Button ───────────────────────────────── */
#fabZapis {
  position: fixed;
  /* Výchozí pozice — přepsána z localStorage přes JS */
  bottom: calc(80px + var(--safe-area-bottom, 0px));
  right: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--maroon);
  color: #F8EDE5;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.32), 0 1px 4px rgba(0,0,0,.2);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
  /* Transition pouze pro hover/active, NE pro pozici (bylo by pomalé při tažení) */
  transition: box-shadow .15s, background .15s, opacity .15s;
  padding: 0;
  margin: 0;
  min-height: 0;
  touch-action: none;  /* vlastní touch handling */
  user-select: none;
  -webkit-user-select: none;
}
#fabZapis:hover { background: #5C2233; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
#fabZapis.fab-dragging {
  cursor: grabbing;
  opacity: .85;
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  transition: none;  /* žádná animace při tažení */
}
body.tab-active-zapis #fabZapis { display: none; }

/* ══════════════════════════════════════════════════════════════════
   ZÁLOŽKA NASTAVENÍ — layout (spodní odstup jen v #appObsah, ne v .sekce)
   ══════════════════════════════════════════════════════════════════ */

body.tab-active-nastaveni .sticky-header { margin-bottom: 0; }

#tab-nastaveni { padding-top: 0 !important; margin-top: 0 !important; }

/* #tab-nastaveni .sekce layout reset removed; spacing now handled by #appObsah */

#tab-nastaveni .sekce h2 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 15px !important;
}

/* desktop #tab-nastaveni .sekce overrides removed */

@media (min-width: 800px) {
  #fabZapis { width: 60px; height: 60px; }
}

/* ── Zdravotní bandy v kalendáři ────────────────────────────────── */
/* Buňky musí dovolit přesah bandy */
#mesicniKalendar .grid-container > div {
  overflow: visible !important;
}
/* Zdravotní band — přesahuje přes hranice buňky vodorovně */
.zdravi-band-wrap {
  overflow: visible;
  position: relative;
  z-index: 2;
}

/* ── Picker popup: skryj tlačítko Zrušit na mobilu ──────────────── */
@media (max-width: 799px) {
  .kal-picker-close { display: none !important; }
}
/* Na desktopu normálně viditelné */
@media (min-width: 800px) {
  .kal-picker-close { display: block; }
}

/* ══════════════════════════════════════════════════════════════════
   NASTAVENÍ — Settings UI (přidáno, nic jiného nezměněno)
   ══════════════════════════════════════════════════════════════════ */
.settings-section {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  overflow: hidden;
}
/* Harmoniky v Nastavení — skrytý výchozí marker, sjednocení s .app-disclosure */
.settings-section.app-disclosure > summary {
  list-style: none;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.settings-section.app-disclosure > summary::-webkit-details-marker {
  display: none;
}
.settings-section.app-disclosure > summary::marker {
  content: '';
}
.settings-section__title {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--text-muted);
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--divider);
  background: var(--bg-surface2);
}
.settings-section__title--with-pro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}
.badge-pro.badge-pro--settings-inline {
  display: inline-block;
  margin-left: auto;
}
.settings-locations-list {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ════════════════════════════════════════════════════════════════
   UNIVERSAL SETTINGS CARD — sjednocený vzhled karet v Nastavení
   (Správa psů, Správa tréninkových míst, ...)
   - Mobile (default): sloupec, tlačítka v rovnoměrném gridu
   - Desktop (>=720px): řádek, tlačítka kompaktní vpravo
   ════════════════════════════════════════════════════════════════ */
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-surface2);
}
.settings-card__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-card__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}
.settings-card__meta {
  font-size: 11px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.settings-card__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  align-items: stretch;
}
.settings-card__actions > .btn-base,
.settings-card__actions > button {
  margin: 0 !important;
  min-height: 36px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Desktop varianta: karta horizontálně, tlačítka kompaktní */
@media (min-width: 720px) {
  .settings-card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .settings-card__main { flex: 1 1 auto; min-width: 0; }
  .settings-card__actions {
    flex: 0 0 auto;
    grid-auto-columns: minmax(70px, max-content);
  }
  .settings-card__actions > .btn-base,
  .settings-card__actions > button {
    width: auto;
    min-width: 70px;
    padding: 6px 14px;
  }
}

/* Univerzální seznam karet — mezery a okraje konzistentní */
.settings-cards-list {
  padding: 4px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
  flex-wrap: wrap;
}
.settings-row:last-child { border-bottom: none; }
.settings-row--sub { padding-left: 28px; background: var(--bg-surface2); }
.settings-row__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.settings-row__label span { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.settings-row__label small { font-size: 11px; color: var(--text-muted); }
/* Přepínače (Den / Noc / …) — segmentovaný vzhled; alias .btn-toggle */
.settings-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  align-items: stretch;
}
/* Přepínač jazyka — SVG vlajky + kód jazyka (bez uppercase na emoji) */
#langToggleGroup .settings-toggle-btn {
  text-transform: none;
  letter-spacing: 0;
  gap: 6px;
}
.settings-lang-flag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.settings-lang-flag svg {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.settings-lang-code {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.settings-toggle-btn,
.btn-toggle {
  background: var(--bg-surface2);
  border: 1.5px solid var(--border-mid);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--text-secondary);
  margin: 0 0 0 -1.5px;
  border-radius: 0;
  min-height: 40px;
  flex: 1 1 0;
  min-width: 0;
  justify-content: center;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.settings-toggle-btn:first-child,
.btn-toggle:first-child {
  margin-left: 0;
  border-radius: 8px 0 0 8px;
}
.settings-toggle-btn:last-child,
.btn-toggle:last-child {
  border-radius: 0 8px 8px 0;
}
.settings-toggle-btn:only-child,
.btn-toggle:only-child {
  border-radius: 8px;
}
.settings-toggle-btn.active,
.btn-toggle.active {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #f8ede5;
  z-index: 1;
}
.settings-toggle-btn:hover:not(.active):not(:disabled),
.btn-toggle:hover:not(.active):not(:disabled) {
  background: var(--bg-surface);
  color: var(--text-primary);
}
.settings-switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.settings-switch input { opacity: 0; width: 0; height: 0; }
.settings-switch__track {
  position: absolute; inset: 0; background: var(--border);
  border-radius: 14px; transition: background .2s; cursor: pointer;
}
.settings-switch__track::before {
  content: ''; position: absolute; width: 22px; height: 22px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%;
  transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.settings-switch input:checked + .settings-switch__track { background: #2e7d32; }
.settings-switch input:checked + .settings-switch__track::before { transform: translateX(20px); }

/* ── Nastavení: jednotný systém tlačítek (podsekce / disclosures) ───────── */
.tab-content--settings-hub {
  --settings-btn-radius: 8px;
  --settings-btn-min-h: 44px;
  --settings-btn-pad-y: 12px;
  --settings-btn-pad-x: 20px;
  --settings-btn-font: 13px;
  --settings-btn-fw: 700;
  padding-top: 0 !important;
  margin-top: 0 !important;
  overflow: visible;
  max-height: none;
}

.settings-action-btn,
.settings-mini-btn,
.settings-subscription-btn {
  font-family: inherit;
  box-sizing: border-box;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  border-radius: var(--settings-btn-radius, 8px);
  min-height: var(--settings-btn-min-h, 44px);
  padding: var(--settings-btn-pad-y, 12px) var(--settings-btn-pad-x, 20px);
  font-size: var(--settings-btn-font, 13px);
  font-weight: var(--settings-btn-fw, 700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.settings-mini-btn {
  padding: 6px 12px;
  font-size: 11px;
  min-height: 36px;
  width: auto;
  max-width: 100%;
}

/* Hub CTA: kombinuj s .btn-primary / .btn-outline; samostatné .settings-action-btn = legacy primární */
.settings-action-btn:not(.btn-primary):not(.btn-outline):not(.btn-ghost) {
  background: var(--maroon);
  color: #f8ede5;
  border: 1.5px solid var(--maroon);
}
.settings-action-btn.btn-primary {
  border: none;
}
.settings-action-btn:active:not(:disabled) {
  filter: brightness(1.06);
}
.settings-action-btn.active:not(.btn-primary) {
  background: #2e7d32;
  border-color: #2e7d32;
  color: #fff;
}
.settings-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Sekundární řádky — stejné jako .btn-outline.btn-small (kopírovat, řádek psa) */
.settings-mini-btn:not(.settings-mini-btn--danger):not(.btn-danger) {
  background: transparent;
  color: var(--text-primary);
  border: 1.5px solid var(--border-mid);
}
.settings-mini-btn:active:not(:disabled),
.settings-mini-btn.btn-outline:active:not(:disabled) {
  background: var(--bg-surface2);
}
[data-theme="dark"] .settings-mini-btn:not(.settings-mini-btn--danger):not(.btn-danger) {
  color: var(--text-primary) !important;
  border-color: var(--orange);
}
[data-theme="dark"] .settings-mini-btn:not(.settings-mini-btn--danger):not(.btn-danger):active:not(:disabled) {
  background: rgba(212, 135, 10, 0.12);
}
.settings-mini-btn--danger,
.settings-mini-btn.btn-danger {
  background: #d32f2f;
  border-color: #d32f2f;
  color: #fff !important;
}
.settings-mini-btn--danger:active:not(:disabled),
.settings-mini-btn.btn-danger:active:not(:disabled) {
  filter: brightness(1.05);
}

/* Velké CTA (Stripe, výplata ambasadora) — stejná rodina jako primární, jen výraznější typografie */
.settings-subscription-btn {
  width: 100%;
  min-height: 48px;
  padding-top: 13px;
  padding-bottom: 13px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: var(--maroon);
  color: #F8EDE5 !important;
  border: 1.5px solid var(--maroon);
  box-shadow: 0 2px 10px rgba(60, 26, 34, 0.22);
}
.settings-subscription-btn:active:not(:disabled) {
  filter: brightness(1.05);
}
.settings-subscription-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Nastavení — centrální rozcestník ──────────────────────────── */
.tab-content--settings-hub .settings-hub-wrap {
  padding-top: 0;
  padding-bottom: 8px;
  max-width: 720px;
  margin: 0 auto;
  overflow: visible;
  max-height: none;
}
.settings-hub-intro {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 18px;
  line-height: 1.45;
}
.settings-inline-heading {
  padding: 10px 16px 6px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--text-muted);
}
.settings-row--divider-top {
  border-top: 1px solid var(--divider);
}
/* .settings-time-input — vzhled je řešen v sekci
   „JEDNOTNÝ SYSTÉM POLE PRO DATUM / ČAS / TRVÁNÍ“. Zde jen
   omezíme šířku, aby pole vedle popisku nezabralo celý řádek. */
.settings-time-input {
  width: auto;
  max-width: 140px;
  min-width: 110px;
}
.settings-row--theme .settings-toggle-group--stretch {
  flex: 1;
  justify-content: flex-end;
  max-width: 100%;
}
/* Úzký displej / tablet: přepínače vzhledu pod sebou — bez zalamování „Automaticky“ */
@media (max-width: 640px) {
  .settings-row--theme {
    flex-direction: column;
    align-items: stretch !important;
  }
  .settings-row--theme .settings-toggle-group--stretch {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: stretch;
    width: 100%;
    gap: 8px;
  }
  .settings-row--theme .settings-toggle-btn {
    flex: none;
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    margin-left: 0;
    border-radius: 8px;
  }
}
.settings-hub-list {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.settings-hub-list--tight {
  padding-top: 4px;
}
/* .settings-hub-row* odstraněno — nahrazeno univerzální .settings-card */
.settings-hub-actions {
  padding: 4px 12px 14px;
}
.settings-hub-actions--row {
  padding-bottom: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
@media (min-width: 480px) {
  .settings-hub-actions--row {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .settings-hub-actions--row > .settings-action-btn {
    flex: 1 1 calc(50% - 5px);
    min-width: 0;
  }
}
.settings-hub-actions--row > .settings-action-btn--wide {
  flex: 1 1 auto;
  width: 100%;
}
@media (min-width: 480px) {
  .settings-hub-actions--row > .settings-action-btn--wide {
    flex: 1 1 calc(50% - 5px);
    width: auto;
  }
}
.settings-action-btn--wide {
  width: 100%;
}
.settings-action-btn--ghost,
.settings-action-btn.btn-outline {
  background: transparent !important;
  color: var(--text-primary) !important;
  border: 1.5px solid var(--border-mid) !important;
  box-shadow: none;
}
.settings-action-btn--ghost:active:not(:disabled),
.settings-action-btn.btn-outline:active:not(:disabled) {
  background: var(--bg-surface2) !important;
}
.settings-hint--pad {
  margin: 0 12px 8px;
}
.settings-subscription-panel {
  padding: 12px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.settings-hub-footer {
  margin-top: 0;
  padding: 0 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  width: 100%;
}
.settings-hub-bottom {
  margin-top: 28px;
  padding: 20px 4px 28px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.settings-hub-footer-note {
  font-size: 11px;
  color: var(--text-muted);
  display: block;
  max-width: 340px;
  line-height: 1.4;
}

/* Push řádek a patička — na úzkém displeji plná šířka tlačítka */
@media (max-width: 520px) {
  #tab-nastaveni .settings-section .settings-row:has(> .settings-action-btn):not(:has(.settings-switch)) {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  #tab-nastaveni .settings-section .settings-row:has(> .settings-action-btn) .settings-action-btn {
    width: 100%;
    justify-content: center;
  }
}
#tab-nastaveni .settings-hub-footer .settings-action-btn {
  width: 100%;
  max-width: 380px;
}

/* Garáž — přiřazení vybavení psům (profil) */
.garage-modal-box {
  width: calc(100vw - 24px);
}
.garage-modal-subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.35;
}
.garage-assign-hint {
  font-size: 11px !important;
  margin-bottom: 10px !important;
  line-height: 1.45;
  color: var(--text-muted);
}
.garage-eq-scroll {
  margin-bottom: 14px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 4px;
}
.garage-eq-scroll .garage-eq-disclosure.settings-section {
  margin-bottom: 10px;
}
.garage-eq-scroll .garage-eq-disclosure.settings-section:last-child {
  margin-bottom: 0;
}
.garage-eq-empty {
  text-align: center;
  padding: 15px;
  color: var(--text-muted);
  font-size: 13px;
}
/* Harmoniky položek — soulad s Nastavením (.settings-section + .app-disclosure) */
.garage-eq-disclosure.settings-section.app-disclosure > summary.garage-eq-summary {
  align-items: stretch;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
  color: var(--text-primary);
  padding: 12px 16px 12px 16px;
  padding-right: max(48px, calc(var(--mm-disclosure-chevron-size) + 12px)) !important;
  gap: 0;
  border-bottom: none;
}
.garage-eq-disclosure.settings-section.app-disclosure[open] > summary.garage-eq-summary {
  border-bottom: 1px solid var(--divider);
}
.garage-eq-summary__stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  text-align: left;
}
.garage-eq-summary__titles {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.garage-eq-summary .garage-eq-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--orange);
  text-transform: none;
  letter-spacing: normal;
}
.garage-eq-summary .garage-eq-meta {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}
.garage-eq-summary__hint {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
}
.garage-eq-disclosure__panel {
  padding: 12px 16px 14px;
  background: var(--bg-surface);
}
.garage-eq-disclosure__panel .garage-eq-assign {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}
.garage-eq-disclosure__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--divider);
}
.garage-eq-title {
  font-size: 13px;
  color: var(--orange);
  display: block;
}
.garage-eq-meta {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.garage-eq-mini-btn {
  margin: 0 !important;
  min-height: 40px !important;
  padding: 6px 10px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-surface2) !important;
  color: var(--text-primary) !important;
  cursor: pointer;
}
.garage-eq-mini-btn--danger {
  background: #d32f2f !important;
  border-color: #d32f2f !important;
  color: #fff !important;
}
.garage-eq-assign {
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 2px;
}
.garage-eq-assign__lbl {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  display: block;
  margin-bottom: 6px;
}
.garage-eq-dogs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
}
.garage-eq-dog-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-primary);
  min-height: 44px;
}
.garage-eq-dog-label input {
  width: 18px;
  height: 18px;
  accent-color: var(--maroon);
  flex-shrink: 0;
}
.garage-eq-no-dogs {
  font-size: 11px;
  color: var(--text-muted);
}

.settings-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 12px 16px 16px;
}
.settings-form-grid label {
  margin-top: 0;
  margin-bottom: 2px;
}
.notif-dog-list {
  padding: 8px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.notif-dog-head,
.notif-dog-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
}
.notif-dog-head {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.notif-dog-name {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 700;
}
.settings-switch--small {
  width: 42px;
  height: 24px;
}
.settings-switch--small .settings-switch__track::before {
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
}
.settings-switch--small input:checked + .settings-switch__track::before {
  transform: translateX(18px);
}
.settings-hint {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}
.toast-success {
  position: fixed;
  left: 50%;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(18px);
  background: linear-gradient(135deg, #2e7d32, #1b5e20);
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
  max-width: calc(100vw - 24px);
}
.toast-success.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.toast-success__icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toast-success__text {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
.vet-dog-card { border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 12px; background: var(--bg-surface2); }
.vet-dog-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vet-dog-card__name { font-size: 15px; font-weight: 900; color: var(--text-primary); }
.vet-chip-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.vet-chip-input { flex: 1 1 160px; font-family: 'Courier New', Courier, monospace; font-size: 13px; padding: 7px 10px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--bg-surface); color: var(--text-primary); }
.vet-chip-copy-btn { background: none; border: 1.5px solid var(--border); border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; margin: 0; min-height: 0; white-space: nowrap; }
.vet-chip-copy-btn.copied { border-color: #2e7d32; color: #2e7d32; }
.vet-vax-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--divider); flex-wrap: wrap; }
.vet-vax-row:last-child { border-bottom: none; }
.vet-vax-name { flex: 1 1 120px; font-size: 13px; font-weight: 700; }
.vet-vax-date { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.vet-vax-status { font-size: 10px; font-weight: 900; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
.vet-vax-status--ok  { background: #2e7d3218; color: #2e7d32; }
.vet-vax-status--warn{ background: #e6510018; color: #e65100; }
.vet-vax-status--exp { background: #b71c1c18; color: #b71c1c; }

/* ── Veterinární záznamy (nový model) ────────────────────────────── */
.vet-record-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: border-color var(--transition);
}
.vet-record-row:hover { border-color: var(--border-mid); }
.vet-record-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}
.vet-record-status {
  font-size: 10px;
  font-weight: 900;
  padding: 2px 9px;
  border-radius: 10px;
  white-space: nowrap;
}
.vet-status--ok   { background: #2e7d3220; color: #2e7d32; }
.vet-status--warn { background: #e6510020; color: #e65100; }
.vet-status--exp  { background: #b71c1c20; color: #b71c1c; }
.vet-status--none { background: var(--bg-surface2); color: var(--text-muted); }

/* ── Veterina tab — větší rozestupy pro pohodlné ovládání ──────── */
.vet-vax-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
  flex-wrap: wrap;
}
.vet-vax-row:last-child { border-bottom: none; }
.vet-vax-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }

/* Chip input */
.vet-chip-input {
  flex: 1 1 160px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
}
.vet-chip-copy-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  min-height: 0;
  white-space: nowrap;
}
.vet-chip-copy-btn.copied { border-color: #2e7d32; color: #2e7d32; }

/* ── Landscape mód na mobilu — spodní padding řeší #appObsah ─────── */
/* Pokud je sidebar aktivní v landscape (šířka > 800px a výška > 500px),
   obsah se odsune od sidebaru — řeší se přes margin-right na .container v desktop query */

/* ── iOS: date input v Veterina tabu ───────────────────────────── */
#dogPanel_veterina input[type="date"] {
  font-size: 16px !important;   /* iOS Safari blokuje tap při font-size < 16px */
  min-height: 44px !important;  /* Apple HIG: minimální touch target */
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  z-index: 10;
  cursor: pointer;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  color: var(--text-primary);
  box-sizing: border-box;
  touch-action: manipulation;
}

/* Vet vax row na mobilu — sloupec místo řádku pro dostatek prostoru */
@media (max-width: 600px) {
  .vet-vax-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    padding: 14px 0;
  }
  #dogPanel_veterina input[type="date"] {
    width: 100%;
  }
}

/* Spodní „dýchání“ scrollu: padding-bottom na #appObsah (110px), ne na .tab-content / #tab-nastaveni .sekce */

/* iOS Safari: klikatelnost pickeru */
input[type="date"] { touch-action: manipulation; }

/* Planner + Gut mobile optimization (desktop unchanged) */
@media (max-width: 600px) {
  .plan-layout {
    gap: 12px;
  }
  .plan-form-panel {
    gap: 6px;
  }
  #planGlobalHeader.plan-global-header {
    padding: 5px 7px;
  }
  #planGlobalHeader .planner-field-compact,
  #planGlobalHeader .date-input--compact,
  #planGlobalHeader select.planner-field-compact,
  #planGlobalHeader input.planner-field-compact,
  #planView-gut .plan-gut-panel .planner-field-compact,
  #planView-gut .plan-gut-panel .date-input--compact,
  #planView-gut .plan-gut-panel select.planner-field-compact,
  #planView-gut .plan-gut-panel input.planner-field-compact {
    min-height: 34px !important;
    height: 34px !important;
  }
  .plan-place-row { gap: 4px; }
  .plan-cta-btn {
    padding: 11px 12px;
    font-size: 13px;
    min-height: 44px;
  }
  #plannerMap {
    height: 250px !important;
    min-height: 250px;
  }
  #weatherAdviceContainer { padding: 10px; }
  .plan-proposal-card__top { padding: 12px 12px 10px; gap: 10px; }
  .plan-proposal-card__name { font-size: 15px; }
  .plan-pill { font-size: 11px; padding: 6px 10px; }
  #planView-gut .plan-proposal-card,
  #planView-gut .plan-card {
    padding: 12px;
  }
}

/* Planner hardening: prevent any horizontal overflow */
#tab-plan,
#tab-plan * {
  box-sizing: border-box;
}

#tab-plan .plan-results-wrap,
#tab-plan .plan-section:not(.plan-gut-panel),
#tab-plan #weatherAdviceContainer {
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  touch-action: pan-y;
}
#tab-plan #planView-gut .plan-gut-panel {
  overflow-x: visible !important;
  overflow-y: visible;
  touch-action: pan-y;
}

/* .plan-context-card a #smartWeatherPlanner ZÁMĚRNĚ bez overflow constraint —
   uvnitř může žít horizontálně rolovatelný .plan-weather-strip a žádný
   rodič nesmí blokovat jeho touch gesta na iOS Safari. */
#tab-plan .plan-context-card,
#tab-plan #smartWeatherPlanner {
  max-width: 100%;
  touch-action: pan-y;
}

#tab-plan .plan-global-header,
#tab-plan .plan-proposal-card,
#tab-plan .plan-weather-extreme,
#tab-plan .plan-reasoning__item,
#tab-plan .plan-insight-box,
#tab-plan #gutDnesniDavka,
#tab-plan #gutPrazdny {
  min-width: 0;
}

#tab-plan .plan-proposal-card__name,
#tab-plan .plan-proposal-card__detailsBody,
#tab-plan .plan-weather-extreme,
#tab-plan .plan-reasoning__val,
#tab-plan .plan-reasoning__label,
#tab-plan #gutDnesniDavka,
#tab-plan #gutPrazdny,
#tab-plan #weatherAdviceContainer,
#tab-plan .planner-coords {
  overflow-wrap: anywhere;
  word-break: break-word;
}

#tab-plan .plan-context-card {
  max-width: 100%;
  min-width: 0;
}

#tab-plan .plan-context-card > div,
#tab-plan .plan-context-card p,
#tab-plan .plan-context-card span,
#tab-plan .plan-context-card strong {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#tab-plan .plan-weather-strip,
#tab-plan .plan-weather-strip__item,
#tab-plan .plan-weather-strip__time,
#tab-plan .plan-weather-strip__icon,
#tab-plan .plan-weather-strip__temp,
#tab-plan .plan-weather-strip__hum {
  white-space: nowrap !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

#tab-plan .plan-weather-strip__item {
  flex: 0 0 auto;
  min-width: 76px;
}

#tab-plan input,
#tab-plan select,
#tab-plan button {
  max-width: 100%;
}

#tab-plan .plan-weather-strip {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 600px) {
  #tab-plan {
    /* DŮLEŽITÉ: clip místo hidden — clip nezakládá scroll-container,
       takže nepohlcuje horizontální swipe gesta dětských elementů na iOS Safari.
       Fallback `hidden` pro starší prohlížeče (iOS <16). */
    overflow-x: hidden;
    overflow-x: clip;
    /* Pro iOS <16 (kde `clip` spadne na `hidden`) explicitně řekneme touch
       handleru: na #tab-plan zachytávej POUZE vertikální swipe a horizontální
       swipe propusť na děti (např. `.plan-weather-strip`). */
    touch-action: pan-y;
  }
  /* Strip — povol horizontální i vertikální gesta (vertikální projde na stránku) */
  #tab-plan .plan-weather-strip,
  #tab-plan .gut-rec-stack--infinite.plan-unified-stack {
    touch-action: pan-x pan-y !important;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }
  #tab-plan .plan-context-card {
    padding: 9px 10px !important;
  }
  #tab-plan .plan-context-card > div {
    font-size: 12px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  #tab-plan .plan-context-card strong {
    font-size: 11px !important;
  }
  #tab-plan .plan-context-card div > div {
    margin-right: 0;
    padding-right: 0;
  }
  #tab-plan .plan-reasoning__val,
  #tab-plan .plan-reasoning__label {
    font-size: 11px;
  }
  #tab-plan #gutDnesniDavka {
    font-size: 11px;
  }
  #tab-plan .plan-weather-strip__item {
    min-width: 68px;
  }
  #tab-plan .plan-weather-strip__time {
    font-size: 8px;
  }
  #tab-plan .plan-weather-strip__icon {
    font-size: 12px;
  }
  #tab-plan .plan-weather-strip__temp {
    font-size: 10px;
  }
  #tab-plan .plan-weather-strip__hum {
    font-size: 8px;
  }
}

@media (max-width: 380px) {
  #tab-plan .plan-weather-strip__item {
    min-width: 64px;
  }
}

/* Ambasador program (nastavení) */
.ambassador-promo-banner {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: var(--radius-md, 10px);
  border: 1.5px dashed var(--orange);
  background: var(--bg-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.35;
}
.ambassador-promo-banner__link {
  color: var(--orange);
  font-weight: 800;
  white-space: nowrap;
  text-decoration: underline;
    min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.ambassador-stats-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
}
.ambassador-stats-table th,
.ambassador-stats-table td {
  padding: 10px 12px;
  border: 1px solid var(--border);
  text-align: left;
}
.ambassador-stats-table thead th {
  background: var(--bg-surface2);
  font-weight: 700;
}
.ambassador-code-pill {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-surface2);
  font-size: 15px !important;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.ambassador-link-input {
  flex: 1;
  min-width: 0;
  font-size: 16px !important;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: var(--bg-app);
  color: var(--text-primary);
}
.ambassador-link-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
  width: 100%;
}
.ambassador-code-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.ambassador-stats-wrap .settings-subscription-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* iOS Safari: zabrání auto-zoomu formulářů po otočení displeje */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 900px) {
    input,
    select,
    textarea {
      font-size: 16px !important;
    }
  }
}

/* App Shell architektura je definována nahoře — žádné další overrides na konci souboru */

/* ══ GDPR: Login souhlas odkaz ═══════════════════════════════════════ */
.gdpr-link {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.gdpr-link:hover {
  opacity: 0.8;
}

/* ══ GDPR: Danger Zone — Smazání účtu ═══════════════════════════════ */
.settings-delete-account-zone {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.settings-section--danger > summary.settings-section__title--danger {
  color: #c62828;
}
[data-theme="dark"] .settings-section--danger > summary.settings-section__title--danger {
  color: #ef9a9a;
}

.settings-section--danger {
  border: 1.5px solid rgba(211, 47, 47, 0.25);
  border-radius: var(--radius-md, 10px);
  background: rgba(211, 47, 47, 0.03);
}
[data-theme="dark"] .settings-section--danger {
  background: rgba(211, 47, 47, 0.06);
  border-color: rgba(211, 47, 47, 0.35);
}

.settings-delete-account-body {
  padding: 0 0 4px;
}

#btnDeleteAccount,
#btnExport,
#btnExportData {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 14px;
  padding: 10px 18px;
}

/* Položky v danger zone — sdílené */
.danger-zone-item {
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.danger-zone-item:last-child { margin-bottom: 0; }

.danger-zone-item__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.danger-zone-item__header > .icon,
.danger-zone-item__header > svg,
.danger-zone-item__header > i {
  flex-shrink: 0;
  margin-top: 2px;
}

/* Bezpečná akce (export) — neutrální šedý rámeček */
.danger-zone-item--safe {
  background: var(--bg-surface2);
  border: 1px solid var(--border);
}

/* Varování (smazání tréninků) — oranžový nádech */
.danger-zone-item--warn {
  background: rgba(230, 81, 0, 0.04);
  border: 1.5px solid rgba(230, 81, 0, 0.3);
}
[data-theme="dark"] .danger-zone-item--warn {
  background: rgba(230, 81, 0, 0.08);
  border-color: rgba(230, 81, 0, 0.45);
}

/* Smazání účtu (nejnebezpečnější) — červený rámeček */
.danger-zone-item--delete {
  background: rgba(198, 40, 40, 0.04);
  border: 1.5px solid rgba(198, 40, 40, 0.3);
}
[data-theme="dark"] .danger-zone-item--delete {
  background: rgba(198, 40, 40, 0.08);
  border-color: rgba(198, 40, 40, 0.45);
}
/* ══ / GDPR: Danger Zone ═════════════════════════════════════════════ */

/* ══ GDPR MODAL ═══════════════════════════════════════════════════════ */
.gdpr-modal-head {
  background: linear-gradient(135deg, #3C1A22 0%, #5C2A36 100%);
  padding: 18px 20px 16px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.gdpr-modal-head__text {
  min-width: 0;
  flex: 1;
}
.gdpr-modal-head__brand {
  font-size: 9px;
  font-weight: 800;
  color: #D4870A;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.gdpr-modal-head__title {
  margin: 0;
  font-size: 17px;
  font-weight: 900;
  color: #F8EDE5;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gdpr-modal-close.modal-close {
  color: #F8EDE5 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.gdpr-modal-close .modal-close__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 22px;
  line-height: 1;
}
.gdpr-modal-close.modal-close:hover {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
.gdpr-modal-box {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.gdpr-modal-body p { margin: 0 0 10px; }
.gdpr-intro {
  background: var(--bg-surface2);
  border-left: 3px solid var(--orange);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 20px;
  color: var(--text-secondary);
}
.gdpr-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.gdpr-section:last-of-type { border-bottom: none; }
.gdpr-section__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.gdpr-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
.gdpr-badge-safe {
  display: inline-flex;
  align-items: center;
  background: rgba(46,125,50,.12);
  color: #2e7d32;
  border: 1px solid rgba(46,125,50,.3);
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 10px;
  letter-spacing: .2px;
  text-transform: uppercase;
}
[data-theme="dark"] .gdpr-badge-safe {
  background: rgba(46,125,50,.18);
  border-color: rgba(46,125,50,.45);
  color: #81c784;
}
.gdpr-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.gdpr-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--orange);
  margin-top: 1px;
}
.gdpr-item strong { display: block; color: var(--text-primary); margin-bottom: 2px; }
.gdpr-item__desc { margin: 2px 0 0; font-size: 12px; color: var(--text-muted); }
.gdpr-rights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
@media (max-width: 520px) {
  .gdpr-rights-grid { grid-template-columns: 1fr; }
}
.gdpr-right-item {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
}
.gdpr-right-item > i { flex-shrink: 0; margin-top: 2px; }
.gdpr-right-item strong { display: block; color: var(--text-primary); margin-bottom: 3px; font-size: 12px; }
.gdpr-right-item span { color: var(--text-muted); line-height: 1.5; }
.gdpr-footer-note {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
/* ══ DENÍK — floating marquee (fáze + závod) ═════════════════════════ */
.denik-float-ticker {
  position: sticky;
  top: 0;
  z-index: 60;
  margin: 0 0 8px;
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  color: var(--text);
  box-shadow: 0 2px 10px rgba(60, 26, 34, 0.08);
}
.denik-float-ticker__viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.denik-float-ticker__track {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: 2.5rem;
  padding: 0 1rem;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  animation: denik-marquee-scroll 48s linear infinite;
  will-change: transform;
}
.denik-float-ticker__chunk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.denik-float-ticker__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.85;
}
.denik-float-ticker__label {
  flex-shrink: 0;
}
.denik-float-ticker__sep {
  flex-shrink: 0;
  opacity: 0.35;
  font-size: 10px;
  user-select: none;
}
@keyframes denik-marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.denik-float-ticker__track.is-static {
  animation: none;
  justify-content: center;
  width: 100%;
  flex-wrap: wrap;
  white-space: normal;
  text-align: center;
  padding: 6px 10px;
  gap: 0.75rem 1.25rem;
}
/* ══ / GDPR MODAL ═════════════════════════════════════════════════════ */

/* ══ UŽIVATELSKÝ NÁVOD MODAL ══════════════════════════════════════════ */
.user-guide-modal-box {
  max-width: min(680px, 100%);
}
.user-guide-body {
  font-size: 13px;
  line-height: 1.65;
  color: var(--text-secondary);
}
.user-guide-body p { margin: 0 0 10px; }
.user-guide-h1 {
  font-size: 20px;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0 0 14px;
  line-height: 1.25;
}
.user-guide-h2 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 22px 0 10px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 12px;
}
.user-guide-h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.user-guide-h3 {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 16px 0 8px;
  scroll-margin-top: 12px;
}
.user-guide-h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 12px 0 6px;
  scroll-margin-top: 12px;
}
.user-guide-list {
  margin: 0 0 12px;
  padding-left: 1.25rem;
}
.user-guide-list li { margin-bottom: 6px; }
.user-guide-list li:last-child { margin-bottom: 0; }
.user-guide-quote {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: var(--bg-surface2);
  border-left: 3px solid var(--orange);
  border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
}
.user-guide-quote p:last-child { margin-bottom: 0; }
.user-guide-hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 18px 0;
}
.user-guide-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 14px;
}
.user-guide-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 280px;
}
.user-guide-table th,
.user-guide-table td {
  border: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.user-guide-table th {
  background: var(--bg-surface2);
  color: var(--text-primary);
  font-weight: 800;
}
.user-guide-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--bg-surface2);
  padding: 1px 5px;
  border-radius: 4px;
}
.user-guide-link { text-decoration: underline; text-underline-offset: 2px; }
.user-guide-loading,
.user-guide-error {
  text-align: center;
  color: var(--text-muted);
  padding: 24px 8px;
}
.user-guide-error { color: var(--danger, #c0392b); }
.settings-hub-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  max-width: 380px;
}
.settings-hub-legal-link {
  flex: 1 1 calc(50% - 4px);
  min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 36px;
  line-height: 1.25;
  text-align: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.settings-hub-legal-link i {
  flex-shrink: 0;
}
.settings-hub-legal-link span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.settings-hub-legal-link:hover {
  color: var(--text-primary);
  background: var(--bg-surface2);
  border-color: var(--border-mid, var(--border));
}
@media (max-width: 360px) {
  .settings-hub-legal-links {
    flex-direction: column;
  }
  .settings-hub-legal-link {
    flex: 1 1 100%;
    width: 100%;
  }
}
/* ══ / UŽIVATELSKÝ NÁVOD MODAL ════════════════════════════════════════ */

/* ══ LOGIN MODAL ══════════════════════════════════════════════════════ */
#loginModal .login-google-btn {
  transition: background 0.15s, box-shadow 0.15s;
}
#loginModal .login-google-btn:hover {
  background: var(--bg-surface) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
#loginModal .login-google-btn:active {
  background: var(--bg-input) !important;
}
[data-theme="dark"] #loginModal .login-google-btn {
  border-color: rgba(255,255,255,.15) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--text-primary) !important;
}
[data-theme="dark"] #loginModal .login-google-btn:hover {
  background: rgba(255,255,255,.12) !important;
}
[data-theme="dark"] #loginModal #magic-email-input {
  background: var(--bg-surface2) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}
/* ══ / LOGIN MODAL ════════════════════════════════════════════════════ */

/* ══ OFFLINE ONBOARDING SCREEN ════════════════════════════════════════ */
#mm-offline-onboarding {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg-app, #1a0a00);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: mm-offline-in 0.35s ease both;
}

#mm-offline-onboarding.mm-offline-fade-out {
  animation: mm-offline-out 0.4s ease both;
}

@keyframes mm-offline-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes mm-offline-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.97); }
}

.mm-offline-card {
  background: var(--bg-surface, #2a1200);
  border: 1px solid var(--border, rgba(255,255,255,.1));
  border-radius: 20px;
  padding: 40px 32px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.mm-offline-logo {
  color: var(--maroon, #8B1A1A);
  margin-bottom: 4px;
}

.mm-offline-icon {
  color: var(--text-muted, #888);
  margin-top: -8px;
}

.mm-offline-title {
  font-size: 22px;
  font-weight: 900;
  color: var(--text-primary, #F8EDE5);
  margin: 4px 0 0;
  letter-spacing: -.5px;
}

.mm-offline-text {
  font-size: 14px;
  color: var(--text-secondary, #b08060);
  line-height: 1.6;
  margin: 0;
}

.mm-offline-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-muted, #888);
  background: var(--bg-app, #1a0a00);
  border-radius: 999px;
  padding: 8px 16px;
  margin-top: 4px;
}

.mm-offline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange, #e07030);
  flex-shrink: 0;
  animation: mm-dot-pulse 1.4s ease-in-out infinite;
}

.mm-offline-dot--err {
  background: #c0392b;
  animation: none;
}

@keyframes mm-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.75); }
}

.mm-offline-retry {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--maroon, #8B1A1A);
  color: #F8EDE5;
  border: none;
  border-radius: 12px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .3px;
  transition: background .2s, transform .1s;
  min-height: 44px;
  margin-top: 4px;
}

.mm-offline-retry:hover  { background: var(--maroon-light, #a52020); }
.mm-offline-retry:active { transform: scale(.97); }

.mm-offline-hint {
  font-size: 11px;
  color: var(--text-muted, #666);
  line-height: 1.5;
  margin: 0;
  padding: 0 8px;
}

/* Světlý mód */
[data-theme="light"] #mm-offline-onboarding { background: #f5ede5; }
[data-theme="light"] .mm-offline-card        { background: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 8px 32px rgba(0,0,0,.12); }
[data-theme="light"] .mm-offline-title       { color: #1a0a00; }
[data-theme="light"] .mm-offline-status      { background: #f5ede5; }
/* ══ / OFFLINE ONBOARDING SCREEN ══════════════════════════════════════ */

/* ══ INTERAKTIVNÍ NÁPOVĚDA — HELP SYSTEM ══════════════════════════════ */

/* Globální toggle: body.hide-help skryje všechny .help-trigger */
body.hide-help .help-trigger { display: none !important; }

/* Wrapper label + help trigger — pixel-perfect kopie plain labelu */
.label-with-help {
  display: flex;
  align-items: center;
  gap: 4px;
  /* Kopíruje margins z global label (style.css ~ř.426): */
  margin-top: 14px;
  margin-bottom: 0;
  /* Aby výška wrapperu neovlivnila pole pod ním, kompenzujeme 18px ikonu
     proti 12px textu + line-height ~1.5 = 18px → stejná výška jako plain label. */
  min-height: 18px;
  line-height: 1.5;
}
/* První label-with-help v daném kontejneru NEMÁ margin-top — chová se jak label{margin-top:0} */
.label-with-help:first-child,
.form-group > .label-with-help:first-child,
.zapis-perf-grid > div > .label-with-help:first-child,
.grid-2 > div > .label-with-help:first-child,
.plan-grid-2 > div > .label-with-help:first-child {
  margin-top: 0;
}
.label-with-help label,
.label-with-help > span:not(.label-help-push):not([class*="push"]) {
  margin: 0 !important;
  padding: 0;
  line-height: 1.5;
  flex: 0 1 auto;
  display: inline;
}
.label-with-help .help-trigger { flex-shrink: 0; margin-left: 0; }
.label-with-help .label-help-push { margin-left: auto; flex-shrink: 0; }

/* Centrace ikony v toggle tlačítku v hlavičce — fix vertikální zarovnání */
.help-toggle-btn {
  line-height: 1;
  vertical-align: middle;
  align-self: center;
  box-sizing: border-box;
}
.help-toggle-btn > i,
.help-toggle-btn > i[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
/* KRITICKÉ: globální .icon má vertical-align: -3px (kvůli baseline textu),
   uvnitř ikonových tlačítek bez textu to způsobí offset 3px dolů. */
.help-toggle-btn .icon,
.help-trigger .icon {
  display: block;
  vertical-align: middle;
}

/* Inline info trigger — malá ⓘ ikonka vedle labelu metriky */
.help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  cursor: pointer;
  color: var(--text-muted);
  margin-left: 4px;
  border-radius: 50%;
  transition: color 0.2s, background 0.15s, transform 0.15s;
  vertical-align: middle;
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
  line-height: 1;
  min-height: 0;
  min-width: 0;
}
.help-trigger:hover  { color: var(--orange); transform: scale(1.2); }
.help-trigger:active { transform: scale(0.9); }
.help-trigger .icon  { display: block; }

/* Toggle tlačítko v headeru — musí mít stejnou výšku jako auth-panel__btn (30px desktop / 28px mobil) */
.help-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  min-width: 30px;
  border: 1px solid rgba(253, 238, 229, 0.45);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--header-text, #FDEEE5);
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.15s;
  flex-shrink: 0;
  box-sizing: border-box;
  line-height: 1;
  vertical-align: middle;
  align-self: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
@media (max-width: 799px) {
  .help-toggle-btn {
    width: 28px;
    height: 28px;
    min-height: 28px;
    min-width: 28px;
  }
}
.help-toggle-btn:hover {
  background: rgba(253, 238, 229, 0.16);
  border-color: rgba(253, 238, 229, 0.7);
  color: #fff;
}
.help-toggle-btn--active {
  color: var(--orange) !important;
  border-color: var(--orange) !important;
  background: rgba(224,112,48,.18) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(224,112,48,.35);
}
.help-toggle-btn--active:hover { background: rgba(224,112,48,.28) !important; }

/* Bottom Sheet overlay —
   backdrop-filter POUZE když je open; jinak zůstane vrstva zcela průhledná
   a nechytá žádné eventy (opravuje problém se zaseknutým overlayem při DevTools) */
.mm-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0);
  z-index: 6000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s, background 0.3s;
  /* backdrop-filter záměrně NENÍ v základním stavu — přidá se jen při open */
}
.mm-help-overlay--open {
  opacity: 1;
  pointer-events: auto;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Bottom Sheet */
.mm-help-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-surface);
  border-radius: 20px 20px 0 0;
  z-index: 6001;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgba(0,0,0,.35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mm-help-sheet--open { transform: translateY(0); }

.mm-help-sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 12px auto 0;
  flex-shrink: 0;
}

.mm-help-sheet__header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px 10px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.mm-help-sheet__icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.mm-help-sheet__title {
  flex: 1;
  font-size: 16px;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.3;
}

.mm-help-sheet__close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-surface2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  min-height: 0;
  min-width: 0;
  transition: background 0.15s;
}
.mm-help-sheet__close:hover { background: var(--bg-app); }

.mm-help-sheet__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.mm-help-sheet__text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
  white-space: pre-line;
}

.mm-help-sheet__footer {
  padding: 10px 18px 14px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.mm-help-sheet__toggle-off {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 0;
  min-height: 0;
  transition: color 0.2s;
}
.mm-help-sheet__toggle-off:hover { color: var(--text-secondary); }

/* Desktop: omezení šířky sheetu */
@media (min-width: 640px) {
  .mm-help-sheet {
    max-width: 540px;
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
    border-radius: 20px 20px 0 0;
  }
  .mm-help-sheet--open {
    transform: translateX(-50%) translateY(0);
  }
}
/* ══ / INTERAKTIVNÍ NÁPOVĚDA ══════════════════════════════════════════ */

/* ══ DENÍK — Úkolníček (agregace z poznámek) ═══════════════════════════ */
.denik-todos-section {
  margin: 10px 0 6px;
  padding: 10px 10px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.denik-todos-section button,
.denik-todos-inbox button {
  margin-top: 0 !important;
}
.denik-todos-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.denik-todos-title {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.denik-todos-stats {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}
.denik-todos-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.denik-todos-filter {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: auto;
  padding: 5px 8px !important;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-surface2);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  margin: 0;
  width: auto;
  text-transform: none;
}
.denik-todos-filter.active {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #f8ede5;
}
.denik-todos-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.denik-todos-empty {
  margin: 0;
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 4px 2px;
}
.denik-todos-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface2);
  overflow: hidden;
}
.denik-todos-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 5px 8px !important;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  margin: 0;
  min-height: 0 !important;
  text-align: left;
  border-radius: 0;
}
.denik-todos-card__title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.denik-todos-card__date {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.denik-todos-list {
  list-style: none;
  margin: 0;
  padding: 2px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.denik-todos-item__label {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  padding: 2px 2px;
  cursor: pointer;
  min-height: 0;
}
.denik-todos-item__check {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px;
  min-height: 16px;
  margin: 1px 0 0 !important;
  flex-shrink: 0;
}
.denik-todos-item__text {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-primary);
  word-break: break-word;
}
.denik-todos-item--done .denik-todos-item__text {
  text-decoration: line-through;
  color: var(--text-muted);
}
.denik-kal-cell-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  margin-bottom: 3px;
  min-height: 22px;
  max-height: 22px;
  line-height: 22px;
}
.denik-kal-day-row {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 22px;
  max-height: 22px;
  flex: 0 1 auto;
  min-width: 0;
}
.denik-kal-day-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  min-width: 22px;
  max-width: 22px;
  min-height: 22px;
  max-height: 22px;
  box-sizing: border-box;
  flex: 0 0 22px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.denik-kal-day-num--today {
  background: var(--maroon);
  color: #f8ede5;
  border-radius: 50%;
}
.denik-kal-day-num--plain {
  font-weight: 500;
  color: var(--text-primary);
}
.denik-kal-day-num--muted {
  font-weight: 400;
  color: var(--text-muted);
}
.denik-kal-day-num--weekend {
  color: #e53935;
}
.denik-kal-todo-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  min-width: 22px !important;
  max-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  max-height: 22px !important;
  padding: 0 !important;
  margin: 0 !important;
  margin-top: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer;
  flex: 0 0 22px !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1;
  align-self: center;
}
.denik-kal-todo-badge--done {
  background: #2e7d32;
  color: #fff;
}
.denik-kal-todo-badge--open {
  background: #c62828;
  color: #fff;
}
.denik-kal-todo-badge--partial {
  --denik-todo-done-pct: 50;
  background: conic-gradient(
    #2e7d32 0deg,
    #2e7d32 calc(var(--denik-todo-done-pct) * 3.6deg),
    #c62828 calc(var(--denik-todo-done-pct) * 3.6deg),
    #c62828 360deg
  );
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.55);
}
.denik-todos-inbox {
  margin: 8px 0 4px;
  padding: 8px 10px;
  background: var(--bg-surface);
  border: 1px dashed var(--maroon);
  border-radius: var(--radius-md);
}
.denik-todos-inbox__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.denik-todos-inbox__title {
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.35px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.denik-todos-inbox__count {
  font-size: 11px;
  font-weight: 700;
  color: var(--maroon);
}
.denik-todos-inbox-list {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.denik-todos-inbox-item__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  min-height: 0 !important;
  padding: 4px 8px !important;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-surface2);
  cursor: pointer;
  text-align: left;
}
.denik-todos-inbox-item__text {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-primary);
  word-break: break-word;
}
.denik-todos-inbox-item__meta {
  font-size: 10px;
  color: var(--text-muted);
}
.denik-todos-inbox__jump {
  width: 100%;
  min-height: 0 !important;
  padding: 6px 10px !important;
  margin: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--maroon);
  background: transparent;
  color: var(--maroon);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  text-transform: none;
}
.denik-filter-empty {
  margin-bottom: 8px;
  padding: 10px 12px;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-surface2);
  border-radius: var(--radius-sm);
}

.denik-todos-empty-month {
  margin-top: 6px;
  text-align: center;
}
.denik-todos-add-btn {
  width: 100%;
  min-height: 0 !important;
  margin-top: 6px !important;
  padding: 8px 12px !important;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--maroon);
  color: #f8ede5;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  text-transform: none;
}
.denik-todos-sheet-close {
  min-height: 44px;
  background: var(--bg-surface2);
  color: var(--text-secondary);
  border: none;
  border-radius: 10px;
  padding: 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
}
/* ══ / DENÍK — Úkolníček ══════════════════════════════════════════════ */

/* ══ VÝBĚR JAZYKA — uvítací modál ═══════════════════════════════════════ */
.lang-modal-flags {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}
.lang-modal-flags .settings-lang-flag svg {
  width: 36px;
  height: 24px;
  border-radius: 3px;
}

.lang-choice-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 16px;
  background: var(--bg-surface2);
  border: 1.5px solid var(--border-mid);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  text-transform: none;
  transition: background .15s, border-color .15s;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
}
.lang-choice-btn .settings-lang-flag svg {
  width: 28px;
  height: 19px;
}
.lang-choice-btn:hover,
.lang-choice-btn:active {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #f8ede5;
}
/* ══ / VÝBĚR JAZYKA ══════════════════════════════════════════════════════ */