/* ============================================================================
   smer.css — VELÍN · VARIANTA 2 „Široký split".
   Sourozenec směru B (Velín). Barvy/fonty/primitiva bere z ../spolecne/brand.css,
   sdílí Linear-dark ducha, kompaktní rádius a zlatý akcent. Tady je jen layout
   téhle varianty: úzký ikonový rail + TRVALÝ dvoupanel (seznam vlevo, VELKÝ
   náhled vpravo) jako u mailových klientů Missive / Superhuman.
   ========================================================================== */

:root {
  --v-r: 8px;              /* kompaktní rádius */
  --v-r-mala: 6px;
  --v-rail: 76px;         /* úzký ikonový sidebar */
  --v-list: 400px;        /* prostřední seznam 360–420px */
  --v-mez: 13.5px;        /* základní hustý font */
  --v-cteni: 720px;       /* šířka čtecího sloupce v náhledu */
  --v-hover: color-mix(in srgb, var(--text) 6%, transparent);
  --v-vyber: color-mix(in srgb, var(--zlata) 14%, transparent);
  /* stavové barvy odvozené z tokenů → adaptují se light/dark samy */
  --stav-napad: var(--slaby-2);
  --stav-ve-vyrobe: var(--zlata-svetla);
  --stav-ke-schvaleni: var(--zlata);
  --stav-schvaleno: var(--zelena-text);
  --stav-naplanovano: var(--navy);
  --stav-publikovano: var(--slaby);
}
:root.tema-dark { --stav-naplanovano: var(--holotropni-dychani); }

/* ── shell ───────────────────────────────────────────────────────────── */
html, body { height: 100%; }
body {
  display: flex; flex-direction: column; min-height: 100vh;
  overflow: hidden;              /* velín = fixní plocha, scroll uvnitř panelů */
  font-size: var(--v-mez);
}
.velin-split { flex: 1 1 auto; min-height: 0; display: flex; }

/* ══ RAIL (úzký ikonový sidebar) ═══════════════════════════════════════ */
.v-rail {
  flex: 0 0 var(--v-rail); width: var(--v-rail);
  background: var(--podklad-2); border-right: 1px solid var(--cara);
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 8px 12px; gap: 6px; min-height: 0; overflow: auto;
}
.v-rail-brand { display: flex; flex-direction: column; align-items: center; gap: 4px; padding-bottom: 8px; text-decoration: none; }
.v-mono {
  position: relative; width: 42px; height: 42px; border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, var(--navy), var(--primar-tmavy));
  color: var(--zlata-svetla); font-family: var(--font-nadpis); font-weight: 600; font-size: 21px;
  border: 1px solid color-mix(in srgb, var(--zlata) 30%, transparent);
}
.v-mono .v-signal {
  position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 999px;
  background: var(--zlata); border: 2px solid var(--podklad-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--zlata) 20%, transparent);
}
.v-rail-nav { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: stretch; }
.v-rail-i {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; border: 0; color: var(--slaby); padding: 8px 2px; border-radius: var(--v-r);
  font-size: 10.5px; font-weight: 500; min-height: 52px; line-height: 1.1;
}
.v-rail-ik { font-size: 17px; line-height: 1; color: var(--slaby-2); }
.v-rail-i:hover { background: var(--v-hover); color: var(--text); }
.v-rail-i.je-aktivni { background: color-mix(in srgb, var(--zlata) 12%, transparent); color: var(--text); }
.v-rail-i.je-aktivni .v-rail-ik { color: var(--zlata); }
.v-rail-b {
  position: absolute; top: 3px; right: 10px; min-width: 17px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: var(--zlata); color: var(--navy);
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}
:root.tema-dark .v-rail-b { color: #14181f; }
.v-rail-pata { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8px; }
.v-rail-admin {
  width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--zlata) 16%, transparent); color: var(--zlata);
  font-size: 12px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--zlata) 30%, transparent);
}

/* ══ MAIN ══════════════════════════════════════════════════════════════ */
.v-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--podklad); overflow: hidden; }

/* přepínač variant velínu (tenký pruh nahoře v obsahu) */
.v-varianta {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px; border-bottom: 1px solid var(--cara); background: var(--podklad-2); font-size: 12px;
}
.v-varianta-l { color: var(--slaby-2); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; font-weight: 700; }
.v-varianta-odkazy { display: flex; gap: 5px; flex-wrap: wrap; }
.v-varianta a {
  text-decoration: none; color: var(--slaby); padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--karta-okraj); background: var(--karta); font-size: 12px; font-weight: 500; white-space: nowrap;
}
.v-varianta a:hover { border-color: var(--okraj-pole); color: var(--text); }
.v-varianta a.je-tady { background: var(--zlata); border-color: var(--zlata); color: var(--navy); font-weight: 700; }
:root.tema-dark .v-varianta a.je-tady { color: #14181f; }

/* plocha panelů / obrazovek */
.v-panels { flex: 1 1 auto; min-height: 0; position: relative; }
.v-screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.v-screen[hidden] { display: none; }

/* ══ SPLIT (seznam | velký náhled) ═════════════════════════════════════ */
.v-split { flex: 1 1 auto; min-height: 0; display: flex; }

/* ── PROSTŘEDNÍ SEZNAM ───────────────────────────────────────────────── */
.v-list {
  flex: 0 0 var(--v-list); width: var(--v-list); min-height: 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--cara); background: var(--podklad);
}
.v-list-hlava { flex: 0 0 auto; padding: 12px 14px 10px; border-bottom: 1px solid var(--cara); display: flex; flex-direction: column; gap: 10px; }

/* tenant přepínač (má v seznamu dost místa na název) */
.v-tenant { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--karta); border: 1px solid var(--karta-okraj); color: var(--text); border-radius: var(--v-r); padding: 8px 10px; text-align: left; }
.v-tenant:hover { border-color: var(--okraj-pole); }
.v-tenant-in { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.v-tenant-l { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--slaby-2); }
.v-tenant-n { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-tenant-r { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.v-tenant-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--zlata); color: var(--navy); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
:root.tema-dark .v-tenant-badge { color: #14181f; }
.v-caret { color: var(--slaby-2); font-size: 11px; }

/* hledání */
.v-hledani { display: flex; align-items: center; gap: 6px; background: var(--pole-pozadi); border: 1px solid var(--okraj-pole); border-radius: var(--v-r); padding: 0 10px; }
.v-hledani-ik { color: var(--slaby-2); font-size: 14px; }
.v-hledani input { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 13.5px; padding: 8px 2px; }
.v-hledani input::placeholder { color: var(--slaby-2); }

/* filtry (obor / typ / stav) */
.v-filtry-blok { display: flex; flex-direction: column; gap: 7px; }
.v-fg { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.v-fg-l { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--slaby-2); flex: 0 0 30px; }
.v-list .chip { cursor: pointer; padding: 3px 9px; font-size: 12px; }
.v-list .chip:hover { border-color: var(--okraj-pole); }
.v-chip-ik { font-size: 12px; color: var(--slaby-2); }
.v-chip-dot { width: 7px; height: 7px; border-radius: 999px; display: inline-block; }
.v-filtr-reset { align-self: flex-start; background: transparent; border: 0; color: var(--slaby); font-size: 12px; padding: 2px 4px; border-radius: 6px; }
.v-filtr-reset:hover { color: var(--text); text-decoration: underline; }

/* tělo seznamu + řádky */
.v-list-telo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px; }
.v-skupina { padding: 12px 8px 5px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--slaby-2); font-weight: 700; display: flex; align-items: center; gap: 8px; }
.v-skupina::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--cara); }
.v-skupina:first-child { padding-top: 4px; }

.v-row {
  display: flex; gap: 9px; width: 100%; text-align: left;
  background: transparent; border: 0; border-left: 2px solid transparent;
  padding: 9px 10px 10px; border-radius: var(--v-r-mala); position: relative;
}
.v-row + .v-row { margin-top: 1px; }
.v-row:hover { background: var(--v-hover); }
.v-row.je-vyber { background: var(--v-vyber); border-left-color: var(--zlata); }
.v-row:focus-visible { outline: none; background: var(--v-vyber); border-left-color: var(--zlata); }
.v-row-l { flex: 0 0 auto; padding-top: 6px; }
.v-row-l .obor-tecka { width: 9px; height: 9px; }
.v-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.v-row-r1 { display: flex; align-items: flex-start; gap: 7px; }
.v-row-r1 .typ-ikona { width: 22px; height: 22px; font-size: 12px; flex: 0 0 auto; margin-top: 1px; }
.v-row-naz {
  flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.32;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal;
}
.v-row-kritik { flex: 0 0 auto; margin-top: 2px; }
.v-row-r2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.v-row-r2 .stav-pill { flex: 0 0 auto; font-size: 11px; }
.v-row-tema { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--slaby-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-sit { flex: 0 0 auto; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; color: var(--slaby); background: var(--pilulka); border-radius: 4px; padding: 2px 4px; line-height: 1; margin-top: 3px; }
.v-list-prazdno { padding: 34px 16px; text-align: center; color: var(--slaby); font-size: 13px; line-height: 1.7; }

/* ── PRAVÝ VELKÝ NÁHLED ──────────────────────────────────────────────── */
.v-preview { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--podklad); position: relative; }
.v-pv { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.v-pv-hlava { flex: 0 0 auto; padding: 16px 26px 12px; border-bottom: 1px solid var(--cara); background: var(--podklad); }
.v-pv-zpet { display: none; }  /* jen mobil */
.v-pv-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 9px; }
.v-pv-meta .kritik, .v-pv-meta .stav-pill { font-size: 12px; }
.v-pv-typ { color: var(--slaby); font-size: 12.5px; }
.v-pv-nazev { font-size: 25px; line-height: 1.16; max-width: 940px; }

.v-pv-taby { flex: 0 0 auto; display: flex; gap: 2px; padding: 0 26px; border-bottom: 1px solid var(--cara); background: var(--podklad); overflow-x: auto; }
.v-tab-b { position: relative; background: transparent; border: 0; color: var(--slaby); font-size: 13px; font-weight: 600; padding: 11px 12px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.v-tab-b:hover { color: var(--text); }
.v-tab-b.je-aktivni { color: var(--zlata); border-bottom-color: var(--zlata); }
.v-tab-poc { font-size: 10.5px; color: var(--slaby-2); font-weight: 700; margin-left: 4px; font-variant-numeric: tabular-nums; }

.v-pv-telo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 26px; }

.v-pv-akce { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 26px; border-top: 1px solid var(--cara); background: var(--karta); }
.v-pv-akce-hl { display: flex; gap: 8px; flex: 1 1 auto; }
.v-pv-akce-hl .btn { min-width: 118px; }
.v-btn-zamit { color: var(--nebezpeci); }
.v-btn-zamit:hover { background: color-mix(in srgb, var(--nebezpeci) 12%, transparent); }
.v-pv-navig { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; color: var(--slaby-2); font-size: 12px; }
.v-pv-poz { font-variant-numeric: tabular-nums; }
.v-ic { width: 34px; height: 34px; border-radius: var(--v-r-mala); background: transparent; border: 1px solid var(--cara); color: var(--slaby); font-size: 13px; display: inline-flex; align-items: center; justify-content: center; }
.v-ic:hover { background: var(--v-hover); color: var(--text); border-color: var(--okraj-pole); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* prázdný náhled */
.v-pv-prazdno { flex: 1 1 auto; display: grid; place-items: center; padding: 40px; text-align: center; }
.v-pv-prazdno-in { max-width: 340px; color: var(--slaby); line-height: 1.6; font-size: 14px; }
.v-pv-prazdno-ik { font-size: 44px; color: var(--slaby-2); opacity: .45; margin-bottom: 12px; }

/* ── NÁHLED (velký čtecí render) ─────────────────────────────────────── */
.v-cteni { max-width: var(--v-cteni); margin: 0 auto; }
.v-lead { font-family: var(--font-nadpis); font-weight: 400; font-size: 21px; line-height: 1.45; color: var(--text); margin: 0 0 20px; }
.v-hero { width: 100%; aspect-ratio: 16 / 9; margin: 0 0 24px; }
.v-cteni p { font-size: 16.5px; line-height: 1.75; margin: 0 0 18px; color: var(--text); }
.v-cteni p:last-child { margin-bottom: 0; }
.v-cteni p.jemny { color: var(--slaby); }
.v-gen-info {
  display: flex; gap: 9px; align-items: flex-start;
  background: color-mix(in srgb, var(--zlata-svetla) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--zlata-svetla) 30%, transparent);
  color: var(--jantar-text); font-size: 13.5px; line-height: 1.5; padding: 12px 14px; border-radius: 10px; margin-bottom: 20px;
}

/* e-mail hlavička */
.v-mail-h { border: 1px solid var(--cara); border-radius: 12px; overflow: hidden; margin: 0 0 24px; background: var(--karta-2); }
.v-mail-r { display: flex; gap: 12px; padding: 11px 15px; font-size: 14.5px; align-items: baseline; }
.v-mail-r + .v-mail-r { border-top: 1px solid var(--cara); }
.v-mail-l { flex: 0 0 66px; color: var(--slaby-2); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-weight: 600; }
.v-mail-v { flex: 1 1 auto; min-width: 0; color: var(--text); word-break: break-word; }
.v-mail-r.je-predmet .v-mail-v { font-weight: 600; font-size: 16px; }

/* ── GRAFIKY ─────────────────────────────────────────────────────────── */
.v-graf-velky { max-width: 760px; margin: 0 auto 22px; }
.v-graf-velky .nahled-placeholder { width: 100%; max-height: 440px; }
.v-graf-velky-popis { margin-top: 9px; font-size: 13px; color: var(--slaby); text-align: center; }
.v-graf-mrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.v-graf { border: 1px solid var(--karta-okraj); background: var(--karta); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.v-graf.je-aktivni { border-color: var(--zlata); box-shadow: 0 0 0 1px var(--zlata); }
.v-graf.je-ok { border-color: color-mix(in srgb, var(--zelena) 55%, transparent); }
.v-graf.je-ne { opacity: .5; }
.v-graf-nahled { width: 100%; cursor: pointer; font-size: 11px; }
.v-graf-popis { font-size: 12px; color: var(--slaby); line-height: 1.35; }
.v-graf-akce { display: flex; gap: 6px; margin-top: auto; }
.v-graf-b { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--okraj-pole); background: var(--pole-pozadi); color: var(--slaby); border-radius: 8px; padding: 6px 4px; font-size: 12px; font-weight: 600; }
.v-graf-b:hover { border-color: var(--okraj-pole); color: var(--text); }
.v-graf-b.je-ok { background: color-mix(in srgb, var(--zelena) 16%, transparent); border-color: color-mix(in srgb, var(--zelena) 45%, transparent); color: var(--zelena-text); }
.v-graf-b.je-ne { background: color-mix(in srgb, var(--nebezpeci) 14%, transparent); border-color: color-mix(in srgb, var(--nebezpeci) 40%, transparent); color: var(--nebezpeci); }

/* ── VIDEO ───────────────────────────────────────────────────────────── */
.v-video { max-width: 820px; margin: 0 auto; }
.v-video-prehravac { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.v-video-play { position: absolute; inset: 0; margin: auto; width: 66px; height: 66px; border-radius: 999px; display: grid; place-items: center; background: color-mix(in srgb, var(--navy) 82%, transparent); color: #fff; font-size: 23px; border: 1px solid rgba(255,255,255,.28); padding-left: 4px; }
.v-video-delka { position: absolute; right: 12px; bottom: 12px; background: rgba(0,0,0,.62); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.v-video-popis { margin-top: 14px; font-size: 14.5px; color: var(--slaby); line-height: 1.6; }

/* ── NAPLÁNOVAT ──────────────────────────────────────────────────────── */
.v-napl { max-width: 520px; }
.v-napl-radek { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.v-pole-sk { display: flex; flex-direction: column; gap: 6px; }
.v-pole-l { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--slaby-2); font-weight: 600; }
.v-pole { background: var(--pole-pozadi); border: 1px solid var(--okraj-pole); border-radius: var(--v-r); color: var(--text); padding: 10px 12px; font-family: inherit; font-size: 14px; }
.v-napl-stav { margin-top: 18px; padding: 12px 14px; border: 1px dashed var(--okraj-pole); border-radius: 10px; background: var(--karta-2); font-size: 13.5px; color: var(--slaby); line-height: 1.55; }
.v-napl-stav strong { color: var(--text); }

/* ── PŘIPOMÍNKY ──────────────────────────────────────────────────────── */
.v-prip { max-width: 640px; }
.v-prip > .v-pole-l { display: block; margin-bottom: 6px; }
.v-textarea { width: 100%; min-height: 96px; resize: vertical; font-family: inherit; font-size: 14px; color: var(--text); background: var(--pole-pozadi); border: 1px solid var(--okraj-pole); border-radius: 10px; padding: 11px 13px; line-height: 1.55; }
.v-textarea::placeholder { color: var(--slaby-2); }
.v-prip-odeslat { margin-top: 10px; }
.v-prip-historie { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.v-prip-h-l { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--slaby-2); font-weight: 700; margin-bottom: 2px; }
.v-prip-i { border: 1px solid var(--cara); border-radius: 10px; padding: 10px 13px; background: var(--karta); }
.v-prip-i-hl { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.v-prip-kdo { font-weight: 600; font-size: 13px; }
.v-prip-kdy { font-size: 11.5px; color: var(--slaby-2); margin-left: auto; }
.v-prip-text { font-size: 13.5px; color: var(--text); line-height: 1.5; }
.v-prip-prazdno { font-size: 13px; color: var(--slaby-2); }

/* ══ OSTATNÍ OBRAZOVKY (jako u B — stručné) ════════════════════════════ */
.v-hlavicka { flex: 0 0 auto; padding: 14px 22px 12px; border-bottom: 1px solid var(--cara); background: var(--podklad); }
.v-hl-r1 { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.v-titul { font-size: 19px; font-weight: 600; }
.v-titul-2 { color: var(--slaby-2); font-weight: 500; font-family: var(--font-text); font-size: 14px; }
.v-telo { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 16px 22px 44px; }
.v-kal-legenda { margin-left: auto; display: flex; gap: 14px; font-size: 12px; }
.v-leg { display: inline-flex; align-items: center; gap: 6px; }
.v-leg-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--zlata); border-left: 3px solid var(--zlata); }
.v-leg-dot.je-pub { opacity: .5; background: var(--slaby); border-left-color: var(--slaby); }

/* kalendář */
.v-kal { border: 1px solid var(--cara); border-radius: 10px; overflow: hidden; }
.v-kal-hlavy, .v-kal-mrizka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.v-kal-hlav { display: flex; align-items: baseline; gap: 6px; padding: 8px 10px; border-bottom: 1px solid var(--cara); border-right: 1px solid var(--cara); background: var(--podklad-2); }
.v-kal-hlav:last-child { border-right: 0; }
.v-kal-hlav.je-dnes { background: color-mix(in srgb, var(--zlata) 12%, transparent); }
.v-kal-den { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--slaby-2); font-weight: 600; }
.v-kal-hlav.je-dnes .v-kal-den { color: var(--zlata); }
.v-kal-datum { font-size: 12px; color: var(--slaby); }
.v-kal-bunka { min-height: 220px; padding: 6px; border-right: 1px solid var(--cara); display: flex; flex-direction: column; gap: 6px; }
.v-kal-bunka:last-child { border-right: 0; }
.v-kal-bunka.je-dnes { background: color-mix(in srgb, var(--zlata) 5%, transparent); }
.v-kal-chip { display: flex; align-items: center; gap: 5px; text-align: left; width: 100%; background: color-mix(in srgb, var(--o) 14%, var(--karta)); border: 1px solid color-mix(in srgb, var(--o) 40%, transparent); border-left: 3px solid var(--o); color: var(--text); border-radius: 6px; padding: 5px 7px; font-size: 11.5px; line-height: 1.25; }
.v-kal-chip:hover { background: color-mix(in srgb, var(--o) 22%, var(--karta)); }
.v-kal-cas { font-weight: 700; color: var(--slaby); flex: 0 0 auto; }
.v-kal-typ { color: var(--o); flex: 0 0 auto; }
.v-kal-naz { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-kal-ok { color: var(--zelena-text); flex: 0 0 auto; }
.v-kal-chip.je-pub { opacity: .62; }
.v-kal-prazdno { color: var(--slaby-2); font-size: 12px; padding: 4px 3px; }

/* nápady */
.v-napady { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.v-napad { padding: 14px; display: flex; flex-direction: column; gap: 7px; transition: opacity .25s ease; }
.v-napad-tema { font-family: var(--font-nadpis); font-size: 16px; font-weight: 600; line-height: 1.2; }
.v-napad-uhel { font-size: 13px; }
.v-napad-proc { font-size: 12.5px; color: var(--slaby); line-height: 1.45; }
.v-napad-lab { font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--zlata); font-weight: 700; display: block; margin-bottom: 2px; }
.v-napad-akce { margin-top: auto; padding-top: 4px; }
.v-napad.je-hotovo { opacity: .55; }

/* podklady */
.v-podklady { max-width: 620px; display: flex; flex-direction: column; gap: 8px; }
.v-podklady-uvod { margin: 0 0 6px; font-size: 13px; }
.v-podklad-radek { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--karta); border: 1px solid var(--karta-okraj); border-radius: 10px; }
.v-podklad-ik { width: 34px; height: 34px; border-radius: 8px; background: var(--pilulka); color: var(--slaby); display: flex; align-items: center; justify-content: center; font-size: 15px; flex: 0 0 auto; }
.v-podklad-n { font-weight: 600; font-size: 13.5px; }
.v-podklad-stav { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--zelena-text); background: color-mix(in srgb, var(--zelena) 14%, transparent); padding: 3px 9px; border-radius: 999px; }
.v-podklad-radek.je-vypnuto { border-style: dashed; opacity: .8; }

/* nastavení */
.v-nast-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; max-width: 900px; }
.v-nast-blok { background: var(--karta); border: 1px solid var(--karta-okraj); border-radius: 12px; padding: 14px 16px; }
.v-nast-h { font-family: var(--font-nadpis); font-size: 15px; font-weight: 600; }
.v-nast-p { font-size: 12.5px; margin: 3px 0 12px; line-height: 1.45; }
.v-nast-tab { width: 100%; border-collapse: collapse; }
.v-nast-tab th { text-align: center; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--slaby-2); font-weight: 600; padding: 4px 6px; }
.v-nast-tab th:first-child { text-align: left; }
.v-nast-tab td { padding: 7px 6px; border-top: 1px solid var(--cara); text-align: center; }
.v-nast-obor { text-align: left !important; font-size: 13px; white-space: nowrap; }
.v-nast-obor .obor-tecka { margin-right: 7px; }
.v-step { display: inline-flex; align-items: center; gap: 2px; background: var(--pole-pozadi); border: 1px solid var(--okraj-pole); border-radius: var(--v-r); }
.v-step-b { width: 30px; height: 30px; background: transparent; border: 0; color: var(--slaby); font-size: 16px; line-height: 1; }
.v-step-b:hover { background: var(--v-hover); color: var(--text); }
.v-step-v { min-width: 26px; text-align: center; font-size: 13.5px; font-weight: 600; }
.v-prep-radek { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--cara); }
.v-prep-radek:first-child { border-top: 0; }
.v-prep-l { font-size: 13px; }
.v-switch { margin-left: auto; width: 42px; height: 24px; border-radius: 999px; border: 1px solid var(--okraj-pole); background: var(--pilulka); position: relative; padding: 0; flex: 0 0 auto; transition: background .15s ease; }
.v-switch-kn { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 999px; background: var(--slaby-2); transition: transform .15s ease, background .15s ease; }
.v-switch[aria-checked="true"] { background: color-mix(in srgb, var(--zelena) 55%, transparent); border-color: color-mix(in srgb, var(--zelena) 55%, transparent); }
.v-switch[aria-checked="true"] .v-switch-kn { transform: translateX(18px); background: #fff; }

/* ── POPOVERY ─────────────────────────────────────────────────────────── */
.v-pop { position: fixed; z-index: 950; min-width: 190px; background: var(--karta); border: 1px solid var(--karta-okraj); border-radius: 10px; box-shadow: var(--stin-vyrazny); padding: 5px; display: flex; flex-direction: column; gap: 1px; }
.v-pop button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: transparent; border: 0; color: var(--text); text-align: left; padding: 8px 10px; border-radius: 6px; font-size: 13px; }
.v-pop button:hover { background: var(--v-hover); }
.v-pop-tenant button.je-akt { background: color-mix(in srgb, var(--zlata) 12%, transparent); font-weight: 600; }
.v-pop-badge { min-width: 20px; height: 19px; padding: 0 6px; border-radius: 999px; background: var(--pilulka); color: var(--slaby); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; }

/* ── TOASTY ───────────────────────────────────────────────────────────── */
.v-toasty { position: fixed; right: 16px; bottom: 16px; z-index: 980; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.v-toast { background: var(--navy); color: #fff; font-size: 13px; font-weight: 500; padding: 10px 14px; border-radius: 10px; box-shadow: var(--stin-vyrazny); border-left: 3px solid var(--zlata); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; max-width: 320px; }
:root.tema-dark .v-toast { background: var(--karta-2); border: 1px solid var(--karta-okraj); border-left: 3px solid var(--zlata); }
.v-toast.je-videt { opacity: 1; transform: none; }
.v-toast.je-ok { border-left-color: var(--zelena); }
.v-toast.je-info { border-left-color: var(--zlata); }
.v-toast.je-warn { border-left-color: var(--nebezpeci); }

/* ── SCROLLBARY (jemné) ───────────────────────────────────────────────── */
.v-list-telo::-webkit-scrollbar, .v-pv-telo::-webkit-scrollbar, .v-telo::-webkit-scrollbar, .v-rail::-webkit-scrollbar { width: 10px; height: 10px; }
.v-list-telo::-webkit-scrollbar-thumb, .v-pv-telo::-webkit-scrollbar-thumb, .v-telo::-webkit-scrollbar-thumb, .v-rail::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--slaby-2) 40%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.v-pv-telo::-webkit-scrollbar-thumb:hover, .v-list-telo::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--slaby-2) 60%, transparent); background-clip: padding-box; }

/* ══ RESPONZIVNÍ ═══════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  :root { --v-list: 344px; }
  .v-pv-hlava, .v-pv-taby, .v-pv-telo, .v-pv-akce { padding-left: 20px; padding-right: 20px; }
}
@media (max-width: 980px) {
  :root { --v-list: 300px; }
  .v-pv-nazev { font-size: 22px; }
  .v-pv-akce-hl .btn { min-width: 0; }
}

/* MOBIL ≤640px — rail do horní lišty, seznam přes celé, náhled = fullscreen overlay */
@media (max-width: 640px) {
  body { overflow: auto; height: auto; }
  .velin-split { flex-direction: column; }

  .v-rail { flex: none; width: auto; height: auto; flex-direction: row; align-items: center; gap: 4px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--cara); overflow-x: auto; }
  .v-rail-brand { flex-direction: row; padding: 0 6px 0 0; flex: 0 0 auto; }
  .v-mono { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; }
  .v-rail-nav { flex-direction: row; width: auto; gap: 3px; flex: 0 0 auto; }
  .v-rail-i { flex-direction: row; gap: 7px; min-height: 44px; padding: 8px 12px; }
  .v-rail-ik { font-size: 15px; }
  .v-rail-b { position: static; margin-left: 2px; }
  .v-rail-pata { margin-top: 0; margin-left: auto; padding-top: 0; }

  .v-main { overflow: visible; }
  .v-panels { position: static; }
  .v-screen { position: static; }
  .v-screen[hidden] { display: none; }

  .v-split { flex-direction: column; min-height: 0; }
  .v-list { flex: 1 1 auto; width: auto; border-right: 0; }
  .v-list-telo { overflow: visible; }

  /* náhled přes celou obrazovku + „‹ zpět" */
  .v-preview { position: fixed; inset: 0; z-index: 940; transform: translateX(100%); transition: transform .24s cubic-bezier(.4,0,.2,1); }
  .v-split.je-detail .v-preview { transform: none; }
  .v-pv-zpet { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; color: var(--zlata); font-size: 14px; font-weight: 600; padding: 4px 0 8px; }
  .v-pv-hlava, .v-pv-taby, .v-pv-telo, .v-pv-akce { padding-left: 16px; padding-right: 16px; }
  .v-pv-telo { padding-top: 18px; padding-bottom: 18px; }
  .v-pv-nazev { font-size: 21px; }
  .v-cteni p { font-size: 16px; }
  .v-pv-akce { flex-wrap: wrap; }
  .v-pv-navig { order: 1; width: 100%; justify-content: space-between; }
  .v-pv-akce-hl { order: 2; width: 100%; }
  .v-pv-akce-hl .btn { flex: 1 1 auto; min-width: 0; }

  /* tap-cíle ≥44px */
  .v-tab-b { padding: 12px 12px; min-height: 44px; }
  .v-ic { width: 42px; height: 42px; }
  .v-row { padding: 11px 12px; }
  .v-step-b { width: 40px; height: 40px; }

  /* ostatní obrazovky */
  .v-telo { padding: 14px 14px 40px; }
  .v-kal-hlavy, .v-kal-mrizka { grid-template-columns: 1fr; }
  .v-kal-bunka { min-height: 0; border-right: 0; border-bottom: 1px solid var(--cara); }
  .v-kal-hlav { border-right: 0; }
  .v-kal-bunka:has(.v-kal-prazdno) { display: none; }
  .v-nast-grid { grid-template-columns: 1fr; }
  .v-kal-legenda { margin-left: 0; width: 100%; }

  .v-toasty { left: 12px; right: 12px; align-items: stretch; }
  .v-toast { max-width: none; }
}