/* ==========================================================================
   green.control — Layout (lišta, horní pruh) + stránka Přehled  · v3
   ========================================================================== */

/* ---------- Rail (levá navigace) ---------- */
.rail {
  position: fixed; z-index: var(--z-sticky); top: 0; left: 0; bottom: 0; width: var(--rail-width);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-5) 0;
  border-right: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
/* Symbol · g · — přepracované logo Greenu (g s tečkami po stranách) */
.rail__logo {
  display: flex; align-items: baseline; justify-content: center; gap: 5px;
  width: 52px; height: 44px; margin-bottom: var(--space-5);
  font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 44px;
  color: var(--accent-text); border-radius: var(--radius-md);
}
.rail__logo-g { display: block; transform: translateY(-3px); }
/* tečky sedí v ose bříška „g“ */
.rail__logo-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; flex: none; margin-bottom: 2px; transform: translateY(-3px); }
.rail__logo:hover .rail__logo-dot { transform: translateY(-3px) scale(1.25); transition: transform var(--dur-base) var(--ease-spring); }
.rail__nav { display: flex; flex-direction: column; gap: 6px; }
.rail__item {
  position: relative; display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: var(--radius-md); color: var(--text-faint);
  transition: color var(--dur-fast), background-color var(--dur-fast);
}
.rail__item:hover { color: var(--text); background: var(--surface-hover); }
.rail__item.is-active { color: var(--accent-ink); background: var(--accent); box-shadow: 0 8px 24px -8px var(--accent-glow); }
.rail__item .count { position: absolute; top: 4px; right: 2px; transform: scale(.9); }
.rail__item[data-tip]::after {
  content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%;
  padding: 5px 10px; border-radius: var(--radius-xs); white-space: nowrap;
  background: var(--text); color: var(--text-inverse); font-size: var(--text-xs); font-weight: 500;
  opacity: 0; pointer-events: none; transform: translate(-4px, -50%);
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.rail__item:hover::after, .rail__item:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.rail__sep { width: 28px; height: 1px; margin: var(--space-1) auto; background: var(--border-strong); }
.rail__bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

/* ---------- Shell ---------- */
.shell {
  position: relative; z-index: var(--z-base);
  margin-left: var(--rail-width);
  padding: 0 var(--gutter) var(--space-16);
  max-width: none;
}

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  display: grid; grid-template-columns: 1fr minmax(240px, 440px) 1fr; align-items: center; gap: var(--space-4);
  height: 76px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur-base), border-color var(--dur-base);
}
.topbar.is-scrolled {
  background: color-mix(in oklab, var(--bg) 72%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom-color: var(--border);
}
.brand { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.brand__name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.03em; }
.brand__name b { color: var(--accent-text); font-weight: 700; }
.brand__crumb { padding-left: var(--space-3); border-left: 1px solid var(--border-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ask {
  display: flex; align-items: center; gap: var(--space-3);
  height: 42px; padding: 0 8px 0 12px; width: 100%;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: var(--surface-sunken); color: var(--text-faint); font-size: var(--text-sm);
  transition: border-color var(--dur-fast), box-shadow var(--dur-base) var(--ease-out), color var(--dur-fast);
}
.ask:hover { border-color: var(--border-accent); color: var(--text-muted); box-shadow: 0 0 0 4px var(--accent-soft); }
.ask__kbd { margin-left: auto; display: flex; gap: 3px; }

.topbar__end { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--space-8);
  padding: var(--space-16) 0 var(--space-10);
}
.hero__title {
  margin: var(--space-4) 0 var(--space-5);
  font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600;
  line-height: var(--leading-tight); letter-spacing: var(--tracking-display);
  font-variation-settings: "opsz" 96;
}

/* Pozdrav | ranní přehled | hodiny — přehled vyplní volné místo vedle pozdravu */
.hero { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "intro brief clock"; gap: var(--space-10); }
.hero__intro { grid-area: intro; }
.hero .clock { grid-area: clock; }
.hero__title { margin-bottom: 0; }
.briefing {
  grid-area: brief; align-self: end; justify-self: center; width: 100%; max-width: 880px;
  display: flex; gap: var(--space-4); padding-left: var(--space-6); border-left: 1px solid var(--border-strong);
  font-size: var(--text-md); color: var(--text-muted); line-height: 1.6; min-height: 3.2em;
}
.briefing__body { flex: 1; min-width: 0; }
.briefing__who { display: flex; margin-bottom: var(--space-2); }
@media (max-width: 1280px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "intro clock" "brief brief"; gap: var(--space-6) var(--space-8); }
  .briefing { justify-self: start; max-width: none; }
}
.briefing .assistant { margin-top: 2px; }
.briefing p > span { display: inline; }
.briefing strong { color: var(--text); font-weight: 600; }

.clock { text-align: right; }
.clock__time {
  font-family: var(--font-display); font-size: var(--text-clock); font-weight: 500; line-height: 1;
  letter-spacing: -0.04em; font-variant-numeric: tabular-nums;
}
.clock__colon { display: inline-block; animation: colon 1s linear infinite; }
/* přirozené mrknutí jako na digitálkách: 1× za sekundu, krátké měkké přechody */
@keyframes colon { 0%, 45% { opacity: 1; } 55%, 92% { opacity: .2; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .clock__colon { animation: none; } }
.clock__sec { font-size: 0.32em; color: var(--text-faint); letter-spacing: 0; margin-left: 4px; vertical-align: top; }
.clock__meta { margin-top: var(--space-3); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

/* ---------- KPI pulse ---------- */
.pulse { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); margin-bottom: calc(var(--grid-gap) * 1.5); }
.kpi {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-4) var(--space-5); text-align: left;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  background: var(--surface-2);
  transition: border-color var(--dur-base), transform var(--dur-base) var(--ease-out), background-color var(--dur-base);
}
.kpi:hover { border-color: var(--border-accent); transform: translateY(-2px); background: var(--surface); }
/* záře pod kurzorem (pozici nastavuje core.js přes --mx / --my) */
.kpi { --mx: 50%; --my: 50%; isolation: isolate; }
.kpi::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(240px circle at var(--mx) var(--my), var(--accent-soft), transparent 65%);
  opacity: 0; transition: opacity var(--dur-slow) var(--ease-out);
}
.kpi:hover::before { opacity: 1; }
.kpi__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text-muted); flex: none; }
.kpi.is-hot .kpi__icon { background: var(--accent-soft); border-color: transparent; color: var(--accent-text); }
.kpi.is-warn .kpi__icon { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.kpi__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kpi__value small { font-size: .5em; color: var(--text-faint); font-weight: 500; letter-spacing: 0; }
.kpi__value, .kpi__label { display: block; }
.kpi__label { font-size: var(--text-xs); color: var(--text-muted); margin-top: 4px; }
.kpi__arrow { margin-left: auto; color: var(--text-faint); transition: transform var(--dur-base) var(--ease-spring), color var(--dur-fast); }
.kpi:hover .kpi__arrow { transform: translate(2px, -2px); color: var(--accent-text); }

/* ---------- Bento grid ---------- */
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--grid-gap); }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }

/* ---------- Focus mode ---------- */
body.is-focus .card:not([data-focus]),
body.is-focus .kpi { opacity: .14; filter: blur(3px) saturate(.4); pointer-events: none; }
body.is-focus .hero { opacity: .5; }
body.is-focus .card[data-focus] { border-color: var(--border-accent); }

/* ---------- Úkoly ---------- */
.progress-head { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid var(--border); }
.progress-head__title { font-weight: 600; color: var(--accent-text); }
.progress-head__sub { font-size: var(--text-xs); color: var(--text-muted); }
.task { align-items: center; }
.task__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task__title { position: relative; width: fit-content; max-width: 100%; font-weight: 500; transition: color var(--dur-base); }
.task__title::after {
  content: ""; position: absolute; left: 0; top: 52%; height: 1.5px; width: 100%; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out);
}
.task.is-done .task__title { color: var(--text-faint); }
.task.is-done .task__title::after { transform: scaleX(1); }
.task__meta { font-size: var(--text-xs); color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.due { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent-text); }
.due.is-soon { color: var(--warn); }
.due.is-overdue { color: var(--danger); }
.task.is-done .due { color: var(--text-faint); }
.src { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); }
.src .i { width: 13px; height: 13px; opacity: .8; }
.task__del { opacity: 0; transition: opacity var(--dur-fast); }
.task:hover .task__del, .task:focus-within .task__del { opacity: 1; }

.adder {
  display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3);
  padding: 6px 6px 6px 14px; border-radius: var(--radius-md);
  border: 1px dashed var(--border-strong); transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.adder:focus-within { border-style: solid; border-color: var(--border-accent); background: var(--surface-sunken); }
.adder input[type="text"] { flex: 1; min-width: 0; height: 32px; background: none; border: 0; outline: none; font-size: var(--text-sm); }
.adder input::placeholder { color: var(--text-faint); }
.adder .field--time { height: 30px; width: 76px; background: var(--surface-sunken); }

/* ---------- Rytmus dne ---------- */
.dayrail { position: relative; height: 34px; margin: 2px 0 var(--space-4); }
.dayrail__track { position: absolute; left: 0; right: 0; top: 14px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-sunken); border: 1px solid var(--border); overflow: hidden; }
.dayrail__fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, transparent, var(--accent-soft) 30%, var(--accent)); border-radius: inherit; transition: width var(--dur-slower) var(--ease-out); }
.dayrail__mark { position: absolute; top: 12px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--surface-raised); border: 2px solid var(--border-strong); }
.dayrail__mark.is-past { border-color: var(--accent); background: var(--accent); }
.dayrail__now { position: absolute; top: 4px; bottom: 0; width: 2px; margin-left: -1px; background: var(--text); border-radius: 2px; transition: left var(--dur-slower) var(--ease-out); }
.dayrail__now::before { content: ""; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 4px color-mix(in oklab, var(--text) 18%, transparent); }
.dayrail__labels { position: absolute; left: 0; right: 0; top: -6px; display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }

.event { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-2); }
.event__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); padding-top: 2px; }
.event__body { position: relative; padding-left: var(--space-3); border-left: 2px solid var(--border-strong); }
.event__title { font-weight: 500; }
.event__meta { font-size: var(--text-xs); color: var(--text-faint); }
.event.is-past { opacity: .45; }
.event.is-now .event__body { border-left-color: var(--accent); }
.event.is-now .event__time { color: var(--accent-text); }
.event.is-next .event__body { border-left-color: var(--warn); }
.event.is-next .event__time { color: var(--warn); }

/* ---------- Rezervace dnes (karta) ---------- */
.resv-row { display: grid; grid-template-columns: 52px 1fr auto; gap: var(--space-3); align-items: center; }
.resv-row__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.resv-row__name { font-weight: 500; }
.resv-row__meta { font-size: var(--text-xs); color: var(--text-faint); }
.resv-row.is-past { opacity: .5; }
.guests { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.guests .i { width: 14px; height: 14px; }
.cap { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.cap .meter { flex: 1; }

/* ---------- Směna dnes (karta) ---------- */
.crew { display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-3); align-items: center; }
.crew__name { font-weight: 500; }
.crew__role { font-size: var(--text-xs); color: var(--text-faint); }
.crew__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); text-align: right; }
.gap-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--text); font-size: var(--text-sm); }
.gap-alert .i { color: var(--warn); margin-top: 2px; }
.gap-alert b { color: var(--warn); }

.card__link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); padding: 6px 8px; margin: -6px -8px; border-radius: var(--radius-sm); transition: color var(--dur-fast), background-color var(--dur-fast); }
.card__link:hover { color: var(--accent-text); background: var(--surface-hover); }
.card__link .i { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-spring); }
.card__link:hover .i { transform: translate(2px, -2px); }

/* ---------- Menu ---------- */
.menu-hero { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: 1.02; letter-spacing: var(--tracking-display); margin: var(--space-3) 0 var(--space-2); }
.dish { display: flex; align-items: baseline; gap: var(--space-2); padding: 7px 0; font-size: var(--text-sm); }
.dish__cat { width: 34px; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-transform: uppercase; flex: none; }
.dish__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dish__dots { flex: 1; border-bottom: 1px dotted var(--border-strong); transform: translateY(-3px); min-width: 12px; }
.dish__price { white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.dish.is-out .dish__name, .dish.is-out .dish__price { color: var(--text-faint); text-decoration: line-through; }
.dish__tag { font-size: 12px; font-weight: 600; color: var(--accent-text); }

.menu-edit { display: grid; grid-template-columns: 36px 1fr 86px auto; gap: var(--space-2); align-items: center; padding: var(--space-2) 0; }
.menu-edit + .menu-edit { border-top: 1px solid var(--border); }
.menu-edit__cat { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--text-faint); text-transform: uppercase; }
.menu-edit .field { height: 36px; }
.menu-edit__price { font-family: var(--font-mono); text-align: right; }
.menu-edit__out { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.menu-preview { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--surface-sunken); border: 1px solid var(--border); }

/* ---------- Pošta ---------- */
.mail { gap: var(--space-3); }
.mail__body { flex: 1; min-width: 0; }
.mail__top { display: flex; align-items: baseline; gap: var(--space-2); }
.mail__from { font-weight: 600; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail__time { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); flex: none; }
.mail__subject { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail__preview { font-size: var(--text-xs); color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail__tags { display: flex; gap: 6px; margin-top: 6px; }
.mail.is-read .mail__from, .mail.is-read .mail__subject { font-weight: 400; color: var(--text-muted); }
/* tečka nepřečteného e-mailu leží uvnitř řádku – i se zvýrazněním po najetí myší */
.mail { padding-left: var(--space-4); }
.mail__unread { position: absolute; left: 5px; top: 26px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-text); }
.mail.is-read .mail__unread { display: none; }

.mail-detail__meta { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.mail-detail__text { font-size: var(--text-md); line-height: 1.65; white-space: pre-line; }
/* Odpověď na e-mail: pole + výběr šablony (Pošta i drawer z Přehledu) */
.reply { margin-top: var(--space-6); }
.reply__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.reply__label { font-size: var(--text-sm); font-weight: 600; }
.reply__label span { font-weight: 400; color: var(--text-muted); font-size: var(--text-xs); }
.reply__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.reply__tpl { min-width: 200px; }
.reply__modes button { display: inline-flex; align-items: center; gap: 6px; }
.reply__modes .assistant { width: 14px; height: 14px; }
.reply__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.reply__bar .reply__tools { margin-left: auto; }
.reply__state { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.reply__state[hidden] { display: none; }
.reply[data-mode="ai"] textarea { border-color: var(--border-accent); }
.reply__tools .gsel__btn { height: 36px; font-size: var(--text-sm); }
.reply textarea { min-height: 180px; resize: vertical; }
.reply-sent { margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-accent); background: var(--accent-soft); }
.reply-sent__head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--accent-text); }
.reply-sent p { white-space: pre-line; font-size: var(--text-sm); }
.reply-auto { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-6); font-size: var(--text-sm); color: var(--text-muted); }
/* Šablony odpovědí (drawer) */
.tpl-form { display: flex; flex-direction: column; gap: var(--space-4); }
.tpl-list { display: flex; flex-direction: column; gap: var(--space-4); }
.tpl { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.tpl__head { display: flex; align-items: flex-end; gap: var(--space-3); }
.tpl__name { flex: 1; min-width: 0; }
.tpl label { display: flex; flex-direction: column; gap: 6px; }
.tpl .label { margin: 0; }
.tpl textarea { resize: vertical; }
.tpl-form > .btn { align-self: flex-start; }

/* ---------- Objednávky ---------- */
.revenue { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
.revenue__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.order { align-items: center; }
.order__id { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.order__body { flex: 1; min-width: 0; }
.order__name { font-weight: 500; font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.order__meta { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-faint); }
.order__meta .i { width: 12px; height: 12px; }
.order__side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.order__price { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.status-btn { display: inline-flex; align-items: center; gap: 4px; transition: transform var(--dur-fast) var(--ease-out); }
.status-btn:hover { transform: translateX(-2px); }
.status-btn .i { width: 12px; height: 12px; }

/* ---------- Poznámky ---------- */
.handover { position: relative; padding: var(--space-4); border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--border); transition: opacity var(--dur-base); }
.handover__quote { font-size: var(--text-base); line-height: 1.5; }
.handover__quote::before { content: "„"; color: var(--accent-text); }
.handover__quote::after { content: "“"; color: var(--accent-text); }
.handover__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-faint); }
.handover.is-read { opacity: .55; }
.note { align-items: flex-start; }
.note__text { flex: 1; font-size: var(--text-sm); min-width: 0; overflow-wrap: anywhere; }
.note__time { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.note__tools { display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-fast); }
.note:hover .note__tools, .note:focus-within .note__tools { opacity: 1; }
.note.is-pinned .note__text::before { content: "◆ "; color: var(--accent-text); font-size: 12px; }

.empty { padding: var(--space-6) 0; text-align: center; color: var(--text-faint); font-size: var(--text-sm); }

/* ---------- Rozložení Přehledu: bento (masonry) ----------
   Karty mají výšku podle obsahu a skládají se bez děr. Pořadí v HTML zůstává stejné
   (zvyk!), mřížka jen „dosedá“. Výšku řádků dopočítá dashboard.js (grid-row: span N). */
.bento {
  display: grid; align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
  grid-auto-rows: 4px; grid-auto-flow: row dense;
  column-gap: var(--grid-gap); row-gap: 0;
}
.bento > .card { align-self: start; margin-bottom: var(--grid-gap); }
@media (min-width: 2200px) {
  .bento { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
  .hero { padding-top: clamp(64px, 6vh, 104px); padding-bottom: var(--space-12); }
}

/* ---------- Responsivita ---------- */
@media (max-width: 1280px) {
  .pulse { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  :root { --rail-width: 0px; }
  .rail {
    top: auto; right: 0; width: auto; height: 68px; flex-direction: row; justify-content: flex-start;
    padding: 0 var(--space-2); border-right: 0; border-top: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__logo, .rail__bottom, .rail__sep { display: none; }
  .rail__nav { flex-direction: row; gap: 2px; margin: 0 auto; }
  .rail__item { width: 46px; flex: none; }
  .rail__item[data-tip]::after { display: none; }
  .shell { padding-bottom: 100px; }
  .topbar { grid-template-columns: 1fr auto auto; gap: var(--space-2); height: 64px; }
  .topbar .ask { width: 44px; padding: 0; justify-content: center; }
  .topbar .ask > span:not(.assistant) { display: none; }
  .brand__crumb { display: none; }
  .topbar__end .btn--label, #demoPill { display: none; }
  .hero { grid-template-columns: 1fr; grid-template-areas: "clock" "intro" "brief"; padding-top: var(--space-6); gap: var(--space-5); }
  .briefing { padding-left: var(--space-4); }
  .clock { text-align: left; }
  .clock__meta { align-items: flex-start; }
  .pulse { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kpi { padding: var(--space-3); gap: var(--space-3); }
  .kpi__icon, .kpi__arrow { display: none; }
  .toasts { bottom: 88px; }
  html { scroll-padding-bottom: 88px; }
}
@media (hover: none) { .task__del, .note__tools { opacity: 1; } }

/* ---------- Menu (kompaktní karta na Přehledu) ---------- */
.menu-mini__count { margin-top: var(--space-3); font-size: var(--text-md); color: var(--text-muted); }
.menu-mini__count span { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--text); letter-spacing: -0.03em; margin-right: 4px; }
.menu-mini__count b { color: var(--warn); font-weight: 600; }
.menu-mini__cats { margin-top: 4px; font-size: var(--text-sm); color: var(--text-muted); }
.menu-mini .card__foot { padding-top: var(--space-4); }


/* Střední šířky (notebook, úzké okno): horní pruh se nesmí překrývat */
@media (min-width: 861px) and (max-width: 1200px) {
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto; }
  .brand__crumb { display: none; }
  .ask__kbd, .topbar__end .btn--label { display: none; }
}
.task__flag { display: inline-flex; vertical-align: -2px; margin-right: 6px; color: var(--warn); }

/* Směna dnes — bloky ranní / odpolední */
.crew-block { padding: var(--space-3) 0; border-top: 1px solid var(--border); }
.crew-block:first-of-type { border-top: 0; }
.crew-block__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-2); }
.crew-line { display: grid; grid-template-columns: 76px 1fr auto; gap: var(--space-2); align-items: baseline; padding: 4px 0; font-size: var(--text-sm); }
.crew-line__role { font-size: var(--text-xs); color: var(--text-muted); }
.crew-line__n { font-size: var(--text-xs); color: var(--text-muted); }
.crew-pend { white-space: nowrap; }
.crew-pend .pill { min-height: 24px; padding: 0 8px; font-size: 12px; }

/* E-shop přehled (Shoptet) */
.shop-mini { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin: var(--space-2) 0 var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.shop-mini dt { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.shop-mini dd { margin: 2px 0 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; }
.shop-mini .up, .shop-mini .down { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; }
.shop-mini .up { color: var(--accent-text); }
.shop-mini .down { color: var(--danger); }
/* Napojená karta e-shopu (čísla ze Shoptetu) */
.shop-mini dd.shop-mini__cmp { margin-top: 2px; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; }
.shop-cmp { margin: calc(var(--space-2) * -1) 0 var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.shop-cmp .up, .shop-mini__cmp .up { color: var(--accent-text); font-weight: 600; }
.shop-cmp .down, .shop-mini__cmp .down { color: var(--danger); font-weight: 600; }
.shop-cmp .flat, .shop-mini__cmp .flat { color: var(--text-muted); font-weight: 600; }
.shop-state { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-3); font-size: var(--text-sm); }
.shop-state .i { flex: none; margin-top: 2px; color: var(--text-faint); }
.shop-state--err .i { color: var(--danger); }
.shop-note { display: flex; align-items: flex-start; gap: 6px; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-faint); }
.shop-note .i { flex: none; margin-top: 1px; }
.shop-note--warn { color: var(--warn); margin: 0 0 var(--space-2); }
.shop-note--err { color: var(--danger); margin: 0 0 var(--space-2); }
.shop-foot-acts { display: flex; gap: var(--space-1); }
.order.is-muted .order__name, .order.is-muted .order__price { color: var(--text-faint); text-decoration: line-through; }
#orders .skel { display: block; margin-bottom: var(--space-3); border-radius: var(--radius-xs); background: linear-gradient(90deg, var(--surface-sunken) 0%, var(--surface-hover) 50%, var(--surface-sunken) 100%); background-size: 200% 100%; animation: shopSkel 1.4s ease-in-out infinite; }
#orders .skel--lg { width: 60%; height: 38px; }
#orders .skel--md { width: 85%; height: 14px; }
@keyframes shopSkel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { #orders .skel { animation: none; } }
.menu-mini__src { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.rail__item--ext { position: relative; }
.rail__ext { position: absolute; right: 4px; bottom: 2px; font-size: 11px; line-height: 1; opacity: .7; }

/* Menu dnes (kopie ze systému menu) */
.menu-today li { display: grid; grid-template-columns: 84px 1fr auto; gap: var(--space-2); align-items: baseline; padding: 6px 0; font-size: var(--text-sm); border-top: 1px solid var(--border); }
.menu-today li:first-child { border-top: 0; }
.menu-today__cat { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.menu-today__price { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.menu-today li.is-out .menu-today__name { color: var(--text-faint); text-decoration: line-through; }
.menu-mini__warn { display: flex; align-items: center; gap: 6px; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--warn); }
.kpi__value small { font-size: .5em; color: var(--text-muted); font-weight: 500; }

.menu-today__meta { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }

/* ---------- Pokladna (Dotykačka): tržby prodejny + graf ---------- */
.pos__src { margin-left: 6px; font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); vertical-align: middle; }
.pos-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.pos-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; min-height: 44px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); text-align: left;
  background: var(--surface-sunken); border: 1px solid var(--border);
  transition: border-color var(--dur-fast), background-color var(--dur-fast);
}
.pos-tab:hover { background: var(--surface-hover); }
.pos-tab[aria-pressed="true"] { border-color: var(--border-accent); background: var(--accent-soft); }
.pos-tab__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.pos-tab__value { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-tab__sub { display: flex; flex-wrap: wrap; gap: 0 6px; font-size: 12px; line-height: 1.35; }
.pos-tab .up, .pos-cmp .up { color: var(--accent-text); font-weight: 600; }
.pos-tab .down, .pos-cmp .down { color: var(--danger); font-weight: 600; }
.pos-tab .flat, .pos-cmp .flat { color: var(--text-muted); font-weight: 600; }
.pos-cmp { margin-bottom: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }
.pos-cmp strong { color: var(--text); font-variant-numeric: tabular-nums; }

.pos-chart { margin: 0; }
.pos-readout { min-height: 1.4em; margin-bottom: var(--space-2); font-size: var(--text-xs); color: var(--text); font-variant-numeric: tabular-nums; }
.pos-readout b { font-family: var(--font-mono); font-weight: 500; margin-right: 4px; }
.pos-plot { position: relative; height: 128px; margin-left: 44px; border-bottom: 1px solid var(--border-strong); }
.pos-plot__grid { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); }
.pos-plot__grid i { position: absolute; right: calc(100% + 6px); top: -0.7em; font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.pos-bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end; isolation: isolate; }
.pos-bar { position: relative; height: 100%; cursor: default; }
.pos-bar__prev, .pos-bar__val { position: absolute; bottom: 0; border-radius: 4px 4px 0 0; }
.pos-bar__prev { left: 0; right: 0; border: 1.5px solid var(--border-strong); border-bottom: 0; }
.pos-bar__val { left: 22%; right: 22%; background: var(--accent-text); transition: height var(--dur-base) var(--ease-out); }
.pos-chart--month .pos-bar__val { left: 12%; right: 12%; }
.pos-chart--month .pos-bar__prev { border-width: 1px; }
.pos-bar.is-now .pos-bar__val { background: repeating-linear-gradient(135deg, var(--accent-text) 0 3px, color-mix(in oklab, var(--accent-text) 55%, transparent) 3px 6px); }
.pos-bar.is-active::after { content: ""; position: absolute; inset: 0 -1px; border-radius: 4px; background: var(--surface-hover); z-index: -1; }
.pos-x { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; margin: 4px 0 0 44px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); text-align: center; }
.pos-x span { overflow: visible; white-space: nowrap; }
.pos-legend { display: flex; gap: var(--space-4); margin-top: var(--space-2); font-size: 12px; color: var(--text-muted); }
.pos-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pos-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.pos-key--val { background: var(--accent-text); }
.pos-key--prev { border: 1.5px solid var(--border-strong); }
@media (prefers-reduced-motion: reduce) { .pos-bar__val { transition: none; } }
@media (max-width: 520px) {
  .pos-tabs { gap: 6px; }
  .pos-tab { padding: var(--space-2); }
  .pos-tab__value { font-size: var(--text-base); white-space: normal; }
}

/* Pokladna – co se prodává */
.pos-groups { display: flex; flex-wrap: wrap; margin-bottom: var(--space-3); }
.pos-groups button { flex: 1 1 auto; }
.pos-items__title { margin: var(--space-3) 0 var(--space-1); font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.pos-items__title .faint { text-transform: none; letter-spacing: 0; font-family: var(--font-body); font-size: 12px; }
.pos-items { list-style: none; margin: 0; padding: 0; }
.pos-item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; padding: 6px 0; border-top: 1px solid var(--border); }
.pos-item:first-child { border-top: 0; }
.pos-item__rank { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); text-align: right; }
.pos-item__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pos-item__name { font-size: var(--text-sm); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-item__meta { font-size: 12px; color: var(--text-muted); }
.pos-item__bar { display: block; height: 4px; border-radius: 2px; background: var(--surface-sunken); overflow: hidden; }
.pos-item__bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent-text); }
.pos-item__qty { font-family: var(--font-mono); font-size: var(--text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-item__qty small { font-size: 11px; color: var(--text-muted); }
.pos-item.is-low .pos-item__bar i { background: var(--warn); }
.pos-item.is-low .pos-item__rank { color: var(--warn); }

/* ---------- Stránka Pokladna ---------- */
.pos-page { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--grid-gap); align-items: start; }
.pos-page__items { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.pos-page__items .pos-groups { margin: 0; align-self: flex-start; }
.pos-page__ranks { display: grid; gap: var(--grid-gap); }
.pos-chart--tall .pos-plot { height: 240px; }
.pos-item__rev { display: block; font-size: 11px; color: var(--text-muted); text-align: right; }
.pos-rank__src { margin-top: var(--space-3); font-size: var(--text-xs); }
.pos-rank__hint { display: flex; gap: 6px; align-items: flex-start; margin-top: var(--space-3); font-size: var(--text-xs); color: var(--warn); }
.pos-rank__hint .i { flex: none; margin-top: 1px; }
@media (max-width: 1100px) { .pos-page { grid-template-columns: 1fr; } }

/* ---------- Levá lišta: podrobné zobrazení (ikony + názvy, logo v liště) ----------
   Přepínač dole v liště (#railToggle), stav v localStorage 'gc:rail' → <html data-rail="wide|compact"> */
.rail [hidden] { display: none !important; }
.rail, .shell { transition: width var(--dur-base) var(--ease-out), margin-left var(--dur-base) var(--ease-out); }
.rail__label, .rail__word { display: none; }
button.rail__item { border: 0; background: transparent; font: inherit; cursor: pointer; }
.rail__toggle[aria-pressed="true"] .i { transform: scaleX(-1); }
@media (min-width: 861px) {
  :root[data-rail="wide"] { --rail-width: 228px; }
  [data-rail="wide"] .rail { align-items: stretch; padding: var(--space-5) var(--space-3); overflow-y: auto; scrollbar-width: none; }
  [data-rail="wide"] .rail__logo { width: auto; justify-content: flex-start; padding: 0 10px; gap: 5px; }
  [data-rail="wide"] .rail__word { display: inline; margin-left: 10px; font-size: var(--text-lg); line-height: 1; color: var(--text); transform: translateY(-4px); }
  [data-rail="wide"] .rail__nav { gap: 2px; }
  [data-rail="wide"] .rail__item {
    display: flex; align-items: center; justify-content: flex-start; gap: 12px;
    width: auto; height: 42px; padding: 0 12px; text-align: left;
  }
  [data-rail="wide"] .rail__item .i { flex: none; }
  [data-rail="wide"] .rail__label { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: 500; color: inherit; }
  [data-rail="wide"] .rail__item:not(.is-active) .rail__label { color: var(--text-muted); }
  [data-rail="wide"] .rail__item:hover .rail__label { color: var(--text); }
  /* aktivní položka: tmavý text na limetce i při najetí myší */
  [data-rail="wide"] .rail__item.is-active .rail__label { color: var(--accent-ink); }
  [data-rail="wide"] .rail__item .count { position: static; transform: none; }
  [data-rail="wide"] .rail__ext { position: static; font-size: 12px; }
  [data-rail="wide"] .rail__item[data-tip]::after { display: none; }
  [data-rail="wide"] .rail__sep { width: auto; margin: var(--space-2) 12px; }
  [data-rail="wide"] .rail__bottom { align-items: stretch; gap: 2px; }
  /* logo je v liště → v horním pruhu jen drobečková navigace */
  [data-rail="wide"] .topbar .brand__name { display: none; }
  [data-rail="wide"] .topbar .brand__crumb { padding-left: 0; border-left: 0; }
}
@media (max-width: 860px) { .rail__toggle { display: none; } }