/* ============================================================
 *  app.css – základní styly aplikace
 * ------------------------------------------------------------
 *  Utility třídy zajišťuje Tailwind (přes CDN). Tento soubor
 *  drží jen pár věcí navíc: reset, plynulé přechody a animaci
 *  indikátoru připojení. Mobile-first.
 * ============================================================ */

/* ============================================================
 *  DESIGN SYSTÉM „ŠNEČÍ DOUPĚ" — CSS proměnné (design tokeny)
 * ------------------------------------------------------------
 *  Jediný zdroj barev, poloměrů a stínů pro celou aplikaci.
 *  Komponenty NIKDY nepoužívají natvrdo psané barvy — vždy jen
 *  tyto proměnné (var(--surface), var(--accent-finance)…).
 *
 *  Světlý režim je výchozí (:root), tmavý přepisuje html.dark.
 *  Barevný směr: teplé neutrální pozadí, bílé karty s velkým
 *  radiusem, jedna primární lilková, tlumené pastelové akcenty
 *  pro jednotlivé moduly.
 * ============================================================ */
:root {
  /* ---- Plochy a text ---- */
  --bg:          #f8faf7;   /* jemně zelenkavé světlé pozadí stránky */
  --surface:     #ffffff;   /* karty, popupy, header */
  --surface-2:   #f2f5f0;   /* jemně odlišená sekce uvnitř karty */
  --text:        #0f172a;   /* základní text */
  --text-muted:  #64748b;   /* popisky, sekundární text */
  --border:      #e2e8f0;   /* linky a ohraničení */

  /* ---- Primární barva (šalvějová zelená) ---- */
  --primary:          #3b7a57;  /* tlačítka, aktivní prvky, odkazy */
  --primary-hover:    #2d6143;
  --primary-soft:     #e6f4ea;  /* jemné pozadí aktivní položky menu */
  --primary-contrast: #ffffff;  /* text na primární barvě */

  /* ---- Hero banner (tmavě zelený gradient) ---- */
  --hero-start:  #4d7d62;
  --hero-end:    #2d5a43;
  --shadow-hero: rgba(77, 125, 98, 0.3);

  /* ---- Akcenty modulů (tlumené pastely) ---- */
  --accent-freezer:  #5ba3c0;  /* Mrazák – ledová modrá */
  --accent-finance:  #52a06e;  /* Finance – zelená (ladí s primary) */
  --accent-tasks:    #d97706;  /* Úkoly – jantarová */
  --accent-shopping: #d97706;  /* Nákupy – teplá oranžová (dle preview) */
  --accent-rooms:    #b78d6f;  /* Místnosti – terakota */
  --accent-energy:   #d9c26e;  /* Energie (etapa 11) – slunečná žlutá */

  /* ---- Stavové barvy ---- */
  --success: #22c55e;
  --warning: #d97706;
  --danger:  #ef4444;

  /* ---- Tvary a stíny ---- */
  --radius:    24px;                            /* karty, popupy */
  --radius-sm: 14px;                            /* tlačítka, inputy, čipy */
  --shadow:    0 4px 12px rgba(15, 23, 42, 0.03);    /* klidový stín karty */
  --shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.18); /* popupy, vyvýšené prvky */
}

/* ---- Tmavý režim – aktivuje se třídou .dark na <html> ---- */
html.dark {
  --bg:          #090d0b;   /* hluboká zelenočerná */
  --surface:     #141a17;
  --surface-2:   #1a231e;
  --text:        #f1f5f9;
  --text-muted:  #8a948c;
  --border:      #242f29;

  --primary:          #52b788;  /* jasná šalvějová kvůli kontrastu */
  --primary-hover:    #74c69d;
  --primary-soft:     #1b2e24;
  --primary-contrast: #0b1c14;  /* tmavý text na jasně zelené */

  --hero-start:  #1b3a2b;
  --hero-end:    #0b1c14;
  --shadow-hero: rgba(0, 0, 0, 0.5);

  --accent-freezer:  #6cb2cd;
  --accent-finance:  #6dbd8c;
  --accent-tasks:    #f59e0b;
  --accent-shopping: #f59e0b;
  --accent-rooms:    #c49a79;
  --accent-energy:   #d6bf62;

  --success: #4ade80;
  --warning: #f59e0b;
  --danger:  #f87171;

  --shadow:    0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* Tmavý režim řeší tokeny výše (html.dark přepisuje proměnné) */
html.dark body {
  background: var(--bg);
  color: var(--text);
}

/* Plynulé přechody barev při přepnutí světlý/tmavý režim */
body, .widget, header, button, input {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Indikátor připojení – jemné pulzování, ať je stav patrný */
.connection-dot {
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  display: inline-block;
}
.connection-dot.is-online  { background: var(--success); }
.connection-dot.is-offline { background: var(--danger); animation: pulse 1.2s infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ============================================================
 *  Komponenty design systému — sdílené vzory karet a tlačítek.
 *  Vždy jen tokeny (žádné natvrdo psané barvy); Tailwind řeší
 *  pouze layout (padding, flex, text-size).
 * ============================================================ */

/* Karta (widget, sekce stránky) */
.ds-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

/* ---- Dlaždice rychlých akcí (tinted button) ----
 * Celá plocha v jemném tónu modulového akcentu (--qt-accent), ikona
 * přímo v barvě bez vnitřního rámečku, popisek sladěný s akcentem.
 * Tón se míchá do --surface → funguje v light i dark režimu. */
.quick-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 15px 8px;
  border-radius: 16px;
  cursor: pointer;
  color: var(--qt-accent);   /* ikona dědí přes currentColor */
  /* „Šmrnc": jemný diagonální gradient akcentu + tenký akcentový rámeček
   * + horní vnitřní odlesk a měkký barevný stín → decentní 3D dojem,
   * pořád v lineárním designu (žádné těžké plastické tlačítko). */
  border: 1px solid color-mix(in srgb, var(--qt-accent) 30%, transparent);
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--qt-accent) 21%, var(--surface)) 0%,
    color-mix(in srgb, var(--qt-accent) 8%,  var(--surface)) 100%
  );
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    0 3px 8px -2px color-mix(in srgb, var(--qt-accent) 30%, transparent);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.quick-tile:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent),
    0 5px 12px -2px color-mix(in srgb, var(--qt-accent) 40%, transparent);
}
.quick-tile:active {
  /* Stisk: dlaždice „zajede" dolů a stín se schová dovnitř */
  transform: translateY(1px) scale(0.97);
  filter: none;
  box-shadow: inset 0 2px 6px color-mix(in srgb, var(--qt-accent) 25%, transparent);
}
.quick-tile-label {
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  /* Tmavší odstín akcentu — čitelný na tónovaném pozadí v obou režimech */
  color: color-mix(in srgb, var(--qt-accent) 65%, var(--text));
}

/* ---- Ne-hero widgety s modulovým akcentem ----
 * Stabilní identita widgetu bez ohledu na pořadí: tenký barevný proužek
 * nahoře + tónovaný odznak ikony. Barvu nese --w-accent (nastaveno inline
 * na kartě), takže ladí se světlým i tmavým režimem. */
.widget-accent {
  position: relative;
  overflow: hidden;              /* proužek ::before se ořízne do zaoblených rohů */
}
.widget-accent::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--w-accent);
}
.widget-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  font-weight: 600;   /* semibold — bold šetříme na kritické akcenty (manifest §3b/2) */
  margin-bottom: 0.85rem;
}
.widget-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  flex-shrink: 0;
  color: var(--w-accent);
  background: color-mix(in srgb, var(--w-accent) 15%, transparent);
}

/* Klikací widget-karta: jemný hover (stín + akcentový okraj) a šipka prokliku */
.widget-link {
  cursor: pointer;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.widget-link:hover {
  box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.15);
  border-color: color-mix(in srgb, var(--w-accent) 35%, var(--border));
}
.widget-link:active { transform: scale(0.995); }
.widget-chevron {
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.widget-link:hover .widget-chevron {
  opacity: 1;
  transform: translateX(2px);
}

/* ---- Card carousel uvnitř widgetu (nákupní seznamy) ----
 * Viewport: čisté CSS scroll-snap, skrytý scrollbar; overscroll-behavior
 * brání gestu „zpět" v prohlížeči při swipu. min-width:0 drží šířku
 * widgetu — obsah nikdy neroztáhne kartu ani okolní grid. */
.widget-carousel {
  display: flex;
  gap: 16px;                     /* fixní mezera mezi kartami (gap-4) */
  overflow-x: auto;
  min-width: 0;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* starý Edge */
  /* Bleed doprava: záporný okraj ruší pravý padding karty (p-5), takže
   * nakouknutá karta jede až k hraně widgetu. Vnitřní padding-right je
   * součást scrollovací plochy → objeví se až po doscrollování na
   * poslední kartu (tam pak obsah končí zarovnaný s ostatním paddingem). */
  margin-right: -1.25rem;
  padding-right: 1.25rem;
}
.widget-carousel::-webkit-scrollbar { display: none; } /* WebKit */

/* Vnitřní karta jednoho seznamu: přiznané hranice (jemný tón, rámeček,
 * zaoblení, stín, vlastní padding). Šířka 85 % → vpravo kouká kousek
 * další karty (peek effect naznačuje swipování). position:relative +
 * overflow:hidden kvůli vodoznaku v rohu. */
.widget-slide {
  position: relative;
  overflow: hidden;
  flex: 0 0 85%;
  min-width: 0;                  /* truncate uvnitř flex položky */
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 12px 14px;
  cursor: pointer;
}
/* Jediný seznam = statická karta přes celou šířku (bez peeku) */
.widget-slide.is-single { flex-basis: 100%; }

/* Tónové gradienty dle typu seznamu — velmi jemné, sbíhají se do barvy
 * povrchu (v dark režimu tedy do tmavé, ne do bílé → drží kontrast). */
.widget-slide--amber {
  background: linear-gradient(to bottom right,
    color-mix(in srgb, #f59e0b 12%, var(--surface)), var(--surface) 55%);
}
.widget-slide--rose {
  background: linear-gradient(to bottom right,
    color-mix(in srgb, #f43f5e 10%, var(--surface)), var(--surface) 55%);
}
.widget-slide--slate {
  background: linear-gradient(to bottom right,
    color-mix(in srgb, #64748b 10%, var(--surface)), var(--surface) 55%);
}

/* Ikona sekce jako vodoznak v pravém dolním rohu karty — čistě obrysový
 * (outline) styl Lucide: tenký tah, žádné výplně, velmi jemná průhlednost */
.widget-slide-watermark {
  position: absolute;
  right: 8px;
  bottom: 8px;
  transform: rotate(12deg);
  opacity: 0.06;
  pointer-events: none;          /* nesmí blokovat klikání */
  color: var(--text);
}

/* Hlavička vnitřní karty: název seznamu + šipka prokliku */
.widget-slide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.widget-slide-title {
  font-size: 13px;
  font-weight: 600;   /* semibold — viz design manifest §3b/2 */
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Navigační tečky na spodku widgetu: aktivní podlouhlá pilulka
 * v akcentové barvě, neaktivní malé šedé puntíky. Vizuální tečka je
 * vnořená do většího neviditelného tlačítka (pohodlný tap target,
 * manifest §3b/1); záporný svislý okraj drží kompaktní výšku řady. */
.carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
}
.carousel-dots:empty { display: none; }
/* Kompaktní tečky (původní vzhled) — klik zůstává, tap plocha je jen
 * svislý padding kolem tečky; primární gesto přepínání je swipe. */
.carousel-dot-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 8px 3px;
  margin: -8px 0;
  cursor: pointer;
}
.carousel-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--border);
  transition: width 0.25s ease, background-color 0.25s ease;
}
.carousel-dot.active {
  width: 20px;
  background: var(--w-accent, var(--primary));
}

/* Spodní sheet (popup vyjíždějící zdola) */
.ds-sheet {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-lg);
}

/* Plocha (header, sidebar) */
.ds-surface {
  background: var(--surface);
}

/* Primární tlačítko (lilková) */
.btn-primary {
  background: var(--primary);
  color: var(--primary-contrast);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background-color 0.15s ease;
}
.btn-primary:hover { background: var(--primary-hover); }

/* Jemné tlačítko (sekundární akce) */
.btn-soft {
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
}
.btn-soft:hover { filter: brightness(0.97); }
html.dark .btn-soft:hover { filter: brightness(1.15); }

/* Neutrální tlačítko (Zrušit apod.) */
.btn-secondary {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-weight: 500;
}
.btn-secondary:hover { background: var(--border); }

/* Nadpis sekce (RYCHLÝ START, …) */
.section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;   /* semibold — viz design manifest §3b/2 */
  color: var(--text-muted);
}

/* ---- Hero banner (doporučení dne) ---- */
.hero-banner {
  background: linear-gradient(135deg, var(--hero-start) 0%, var(--hero-end) 100%);
  border-radius: var(--radius);
  padding: 20px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 20px -5px var(--shadow-hero);
}
.hero-banner .hero-kicker {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.9;
  margin-bottom: 4px;
}
.hero-banner .hero-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 2px;
}
.hero-banner .hero-desc {
  font-size: 13px;
  opacity: 0.9;
}
/* Velká poloprůhledná Lucide ikona v rohu banneru */
.hero-banner .hero-graphic {
  position: absolute;
  right: -15px;
  bottom: -15px;
  width: 110px;
  height: 110px;
  opacity: 0.15;
  transform: rotate(-15deg);
  color: #fff;
  pointer-events: none;
}

/* ---- Spodní pilulková navigace (jen mobil) ----
 * Tmavá zaoblená lišta. Za aktivní boční ikonou klouže po ose X zelený
 * kruh (`.tab-indicator`); leží pod ikonami i pod středovým tlačítkem,
 * takže při aktivním Dashboardu pod něj „zajede" a skryje se. Lišta je
 * záměrně nezávislá na motivu (vždy tmavá), proto pevné barvy. */
.tab-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 40;
  height: 58px;
  padding: 0 6px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #0f172a;
  border-radius: 20px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
  overflow: visible;      /* stín aktivního středového tlačítka smí vyčnívat */
}

/* Zelený posuvný indikátor (lesní zelená). Vodorovné umístění řídí JS
 * přes translateX, svisle je vystředěný; posun/schování jsou plynulé. */
.tab-indicator {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -22px;      /* -průměr/2 → svislé vystředění */
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #3b7a57;
  z-index: 0;             /* pod ikonami i pod středovým tlačítkem */
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity   0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-indicator.is-visible { opacity: 1; }

.tab-item {
  position: relative;
  z-index: 1;             /* ikona nad indikátorem */
  color: #94a3b8;         /* neaktivní: tlumená šedá */
  cursor: pointer;
  padding: 10px 18px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  transition: color 0.3s ease;
}
/* Aktivní boční ikona: zbělá; zůstává přesně vycentrovaná v zeleném kruhu */
.tab-item.active {
  color: #ffffff;
}

/* Středové tlačítko — Dashboard (bílý kruh s logem šneka, dominantní).
 * Leží nad indikátorem, aby pod něj mohl zajet. Když je aktivní, mírně
 * naroste a získá výraznější stín → vystoupí dopředu. */
.tab-fab {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #f8fafc;
  border: 2px solid #f8faf7;   /* light; dark hodnota v html.dark níže */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transform: scale(1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
html.dark .tab-fab { border-color: #090d0b; }
/* Aktivní Dashboard: vystoupí dopředu (větší měřítko + výraznější jemný stín) */
.tab-fab.active {
  transform: scale(1.12);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.38);
}
.tab-fab-logo {
  width: 30px;
  height: 30px;
  background-color: var(--primary);
  -webkit-mask: url('/icons/logo.svg') no-repeat center / contain;
  mask: url('/icons/logo.svg') no-repeat center / contain;
}
/* Na desktopu lišta není; obsah stránek dostává rezervu na mobilu */
@media (min-width: 768px) {
  .tab-bar { display: none; }
}
@media (max-width: 767px) {
  main { padding-bottom: 96px !important; }
  /* Položky hamburger menu duplikované ve spodní liště se na mobilu skryjí */
  .nav-dup { display: none; }
}

/* ---- Bottom sheet „Další sekce" (z „•••" ve spodní liště) ----
 * Tmavá karta jako lišta, zaoblené horní rohy, výjezd zespodu; pozadí
 * ztmavené a rozostřené. Overlay je flex-end, aby karta seděla dole. */
.more-sheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  background: rgba(15, 23, 42, 0.4);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.2s ease-out;
}
.more-sheet-overlay.is-open { opacity: 1; }
.more-sheet {
  width: 100%;
  max-height: 75vh;
  overflow-y: auto;
  background: #0f172a;
  border-radius: 20px 20px 0 0;
  padding: 12px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow: 0 -12px 28px rgba(0, 0, 0, 0.35);
  transform: translateY(100%);
  transition: transform 0.2s ease-out;
}
.more-sheet.is-open { transform: translateY(0); }
.more-sheet-handle {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  margin: 4px auto 12px;
}
.more-sheet-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 4px 10px;
}
.more-sheet-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 12px;
  border-radius: 14px;
  color: #f1f5f9;
  font-size: 15px;
  font-weight: 600;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}
.more-sheet-item:hover,
.more-sheet-item:active { background: rgba(255, 255, 255, 0.06); }
.more-sheet-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---- Hlasové zadávání (10e) — mikrofonní tlačítko ---- */
.voice-mic.is-listening {
  color: var(--danger);
  animation: mic-pulse 1.1s ease-in-out infinite;
}
@keyframes mic-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ---- Kanban na stránce Úkoly (10f) ----
 * Mobil: horizontální swipe mezi sloupci (scroll-snap, jeden sloupec
 * na obrazovku, nativní plynulý scroll). Desktop (≥768px): tři sloupce
 * vedle sebe bez scrollu. Priorita karty = barevný proužek vlevo. */
.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  min-width: 0;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-bottom: 6px;
  scrollbar-width: none;
}
.kanban-board::-webkit-scrollbar { display: none; }
.kanban-col {
  flex: 0 0 86%;
  min-width: 0;
  scroll-snap-align: start;
  background: var(--surface-2);
  border-radius: 16px;
  padding: 10px;
  transition: box-shadow 0.2s ease;
}
@media (min-width: 768px) {
  .kanban-board { overflow-x: visible; }
  .kanban-col   { flex: 1 1 0; }
}
.kanban-col.is-drop { box-shadow: inset 0 0 0 2px var(--primary); }
.kanban-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 4px 6px 10px;
}
.kanban-count {
  background: var(--surface);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
}
.kanban-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 60px;
}
.kanban-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--k-priority, var(--border));
  border-radius: 12px;
  padding: 10px 12px 6px;
  cursor: pointer;
  transition: box-shadow 0.2s ease, opacity 0.2s ease;
}
.kanban-card:hover { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
.kanban-card.is-done { opacity: 0.65; }
.kanban-card-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
}
/* Šipka přesunu: velký tap target (44×40) přes záporné okraje */
.kanban-move {
  width: 44px;
  height: 40px;
  margin: -6px -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 10px;
  color: var(--text-muted);
  transition: color 0.2s ease, background-color 0.2s ease;
}
.kanban-move:hover {
  color: var(--primary);
  background: var(--primary-soft);
}

/* ---- Logo „Šnečí doupě" ----
 * SVG se vkládá jako CSS maska: značka se obarvuje tokenem
 * --primary (light/dark řeší přepis proměnných), bez vkládání
 * SVG do DOM přes innerHTML. */
.app-logo {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-color: var(--primary);
  -webkit-mask: url('/icons/logo.svg') no-repeat center / contain;
  mask: url('/icons/logo.svg') no-repeat center / contain;
}
.app-logo--lg {
  width: 56px;
  height: 56px;
}

/* Rodinka šneků (easter egg) — login a prázdné stavy.
 * Stejná technika CSS masky jako logo; barva se dědí z color. */
.snail-family {
  display: block;
  width: 198px;
  height: 60px;
  background-color: currentColor;
  -webkit-mask: url('/icons/snails.svg') no-repeat center / contain;
  mask: url('/icons/snails.svg') no-repeat center / contain;
}

/* Bezpečné odsazení kvůli výřezu displeje (notch) u PWA na mobilu */
.safe-area {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Hamburger sidebar – plynulý přechod translateX */
#sidebar {
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#sidebar.is-open {
  transform: translateX(0);
}

/* Overlay za sidebarou – fade in/out místo okamžitého skoku */
#sidebar-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
#sidebar-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* ============================================================
 *  Skeleton karty – placeholder při prvním načítání stránky
 *  (zobrazují se jen při úplně prázdné lokální cache)
 * ============================================================ */
.skeleton-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

/* Jednotlivé "řádky" uvnitř karty – probíhající světelná vlna.
 * Barvy jdou z tokenů, tmavý režim tak funguje automaticky. */
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, var(--border) 25%, var(--surface-2) 45%, var(--border) 65%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-line--title {
  height: 18px;
  margin-bottom: 16px;
}
.skeleton-line:last-child {
  margin-bottom: 0;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ------------------------------------------------------------
 *  Pojistka proti horizontálnímu přetečení stránky (mobil)
 * ------------------------------------------------------------
 *  Obsah širší než viewport na mobilu „oddálí" celou aplikaci
 *  (rozbitý layout, lišta mimo obraz). overflow-x: clip ořízne
 *  přetečení, ale NEvytváří scroll kontejner — position: sticky
 *  uvnitř (hlavička Financí) i vnitřní carouselly fungují dál. */
main { overflow-x: clip; }

/* ------------------------------------------------------------
 *  Overlay aktualizace aplikace (banner → stažení nové verze)
 * ------------------------------------------------------------
 *  Celoobrazovkový mezikrok při instalaci nové verze: průvod
 *  čtyř šnečků (logo aplikace) lezoucích zleva doprava. Reload
 *  proběhne, až nový Service Worker převezme kontrolu. */
.update-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: var(--surface);
  color: var(--text-muted);
}
.update-track {
  position: relative;
  width: 210px;
  height: 44px;
  overflow: hidden;
}
.update-snail {
  position: absolute;
  left: -40px;             /* start za levým okrajem dráhy */
  bottom: 4px;
  width: 34px;
  height: 34px;
  animation: snail-walk 3.2s linear infinite;
}
.update-snail img {
  width: 100%;
  height: 100%;
  animation: snail-bob 0.45s ease-in-out infinite alternate;
}
/* Každý šnek vyráží se zpožděním → souvislý průvod */
.update-snail:nth-child(2) { animation-delay: 0.8s; }
.update-snail:nth-child(3) { animation-delay: 1.6s; }
.update-snail:nth-child(4) { animation-delay: 2.4s; }
/* Před prvním startem (než doběhne delay) šneka schová záporná
 * startovní pozice — stojí mimo viditelnou dráhu (overflow hidden). */
@keyframes snail-walk {
  to { transform: translateX(290px); }   /* 210 + 2×40 přesah */
}
@keyframes snail-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-2px); }
}