/* ===========================================================================
   Centrála — layout + komponenty (mobile-first)
   =========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-feature-settings: "calt","kern","liga","tnum";
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
input, textarea, select { font: inherit; color: inherit; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── App shell ───────────────────────────────────────────────────────────── */
.app { min-height: 100dvh; display: flex; flex-direction: column; }

/* Sidebar — skrytý na mobilu */
.sidebar { display: none; }

/* Topbar */
.topbar {
  height: var(--topbar-h); position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4);
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.topbar__greeting { font-weight: 600; font-size: var(--fs-h3); }
.topbar__clock {
  margin-left: auto; display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.topbar__clock .time { color: var(--text); font-size: var(--fs-body); }
.topbar__search {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 32px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--fs-sm);
}
.topbar__search kbd {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 5px;
  border: 1px solid var(--border-strong); border-radius: var(--r-xs); color: var(--text-2);
}

/* Main */
.main { flex: 1; padding: var(--sp-4); padding-bottom: calc(var(--bottomnav-h) + var(--sp-6)); }
.page-title { font-size: var(--fs-h1); font-weight: 600; letter-spacing: -0.01em; margin-bottom: var(--sp-4); }

/* Dashboard grid */
.grid { display: grid; grid-template-columns: 1fr; gap: var(--card-gap); max-width: var(--maxw); margin: 0 auto; }
.col-12{grid-column:auto;} .col-8{grid-column:auto;} .col-6{grid-column:auto;} .col-4{grid-column:auto;}

/* ── Bottom nav (mobil) ──────────────────────────────────────────────────── */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex; justify-content: space-around; align-items: center;
  background: var(--surface-2); border-top: 1px solid var(--border);
}
.bottomnav a, .bottomnav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; color: var(--text-muted); padding: 8px 0; min-height: 48px;
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.bottomnav a.active { color: var(--accent); }
.bottomnav a .ico, .bottomnav button .ico { font-size: 19px; line-height: 1; }
.bottomnav .fab .ico {
  width: 44px; height: 44px; margin-top: -22px; border-radius: var(--r-full);
  background: var(--accent); color: #fff; display: grid; place-items: center;
  box-shadow: var(--shadow-fab); font-size: 22px;
}
.bottomnav .fab { color: var(--accent); }

/* ── Karty ───────────────────────────────────────────────────────────────── */
.card {
  background: var(--surface-1); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--card-pad);
  transition: border-color 120ms ease;
}
.card:hover { border-color: var(--border-strong); }
/* Barevný levý pruh podle typu karty — orientace bez čtení nadpisů.
   `--data` = čísla a přehledy, `--warning` = vyžaduje pozornost. */
.card--data  { border-left: 3px solid var(--data); }
.card--pozor { border-left: 3px solid var(--warning); }
.card__head {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--card-head-mb);
  padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.card__title {
  font-size: var(--fs-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text);
}
/* Počty jsou data, ne akce — proto modrá, ne šalvěj. */
.card__count {
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--data);
  background: var(--data-dim); padding: 1px 7px; border-radius: var(--r-full);
}
.card__action { margin-left: auto; font-size: var(--fs-sm); color: var(--accent); }

/* ── KPI ─────────────────────────────────────────────────────────────────── */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
.kpi { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--sp-4); }
.kpi--accent { border-left: 2px solid var(--accent); }
.kpi--danger { border-left: 2px solid var(--danger); }
.kpi__label { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.kpi__value { font-family: var(--font-mono); font-size: var(--fs-display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: var(--sp-2); }
.kpi__sub { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--sp-1); }
.kpi__value.is-danger { color: var(--danger); }
.kpi__value.is-warning { color: var(--warning); }
.kpi__value.is-ok { color: var(--success); }

/* ── Hero „Dnešní fokus" ─────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--surface-2), var(--surface-1));
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  border-radius: var(--r-lg); padding: var(--sp-5);
  box-shadow: inset 3px 0 16px -10px var(--accent-glow);
}
.hero__head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.hero__label { font-size: var(--fs-label); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-2); }
.hero__date { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); }
.hero__task { font-size: var(--fs-h3); font-weight: 500; padding: var(--sp-2) 0; display: flex; align-items: center; gap: var(--sp-3); }
.hero__task .mark { color: var(--accent); }
.hero__summary { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-2); display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.focus-board {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.focus-slot {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface-1) 72%, transparent);
}
.focus-slot--today {
  border-left: 2px solid var(--accent);
}
.focus-slot__main { min-width: 0; }
.focus-slot__label {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  font-size: var(--fs-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
}
.focus-slot__label span {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: 0;
}
.focus-slot__task {
  margin-top: 2px;
  font-size: var(--fs-body);
  font-weight: 500;
  overflow-wrap: anywhere;
}
.focus-slot--today .focus-slot__task {
  font-size: var(--fs-h3);
}
.focus-slot__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.focus-picker {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2);
  align-items: center;
}
.focus-picker .input {
  min-width: 0;
  height: 32px;
  padding-block: 4px;
  font-size: var(--fs-sm);
}

/* ── Task list ───────────────────────────────────────────────────────────── */
.tasklist { display: flex; flex-direction: column; }
.task {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--row-pad-y) var(--sp-2); border-radius: var(--r-sm);
  min-height: var(--row-h);
  border-left: 2px solid transparent;
}
/* Zebra je v rozvolněném režimu průhledná — projeví se až v kompaktním,
   kde jsou řádky nízko u sebe a oko by jinak přeskakovalo. */
.tasklist .task:nth-child(even) { background: var(--zebra); }
.task:hover { background: var(--surface-2); }
.task--p1 { border-left-color: var(--prio-1); }
.task--p2 { border-left-color: var(--prio-2); }
.task--p3 { border-left-color: var(--prio-3); }
.task--p4 { border-left-color: var(--prio-4); }
.task__check {
  width: 18px; height: 18px; border-radius: var(--r-full); flex-shrink: 0; margin-top: 1px;
  border: 1.5px solid var(--text-muted); background: none; transition: 120ms;
}
.task--p1 .task__check { border-color: var(--prio-1); }
.task--p2 .task__check { border-color: var(--prio-2); }
.task__check:hover { background: var(--surface-hover); }
.task__body { flex: 1; min-width: 0; }
.task__title { font-size: var(--fs-body); }
.task__meta { font-size: var(--fs-sm); color: var(--text-2); margin-top: 2px; display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.task__meta .sep { color: var(--text-faint); }
.task__due { margin-left: auto; font-size: var(--fs-micro); font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; padding-left: var(--sp-2); }
.task__due.is-overdue { color: var(--danger); }
.task__due.is-today { color: var(--warning); }

/* ── Badge / pill ────────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.3px;
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--accent-dim); color: var(--accent);
}
.pill--danger { background: var(--danger-dim); color: var(--danger); }
.pill--warning { background: var(--warning-dim); color: var(--warning); }
.pill--success { background: var(--success-dim); color: var(--success); }
.pill--muted { background: var(--surface-3); color: var(--text-muted); }
.dot { width: 8px; height: 8px; border-radius: var(--r-full); display: inline-block; flex-shrink: 0; }
.dot--active{background:var(--success);} .dot--paused{background:var(--warning);}
.dot--blocked{background:var(--danger);} .dot--idle{background:var(--text-muted);}

/* ── Projektová karta ────────────────────────────────────────────────────── */
.project { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) var(--sp-2); border-radius: var(--r-sm); }
.project:hover { background: var(--surface-2); }
/* Archivní projekt: ztlumený, ale čitelný — je to paměť, ne pracovní seznam. */
.project--archiv { opacity: 0.65; }
.project--archiv:hover { opacity: 1; }
.project__top { display: flex; align-items: center; gap: var(--sp-2); }
.project__name { font-weight: 500; font-size: var(--fs-body); }
.project__name.parked { color: var(--text-muted); }
.project__badge { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }
.project-attention { border-left: 2px solid var(--warning); }
.project-attention .card__title { color: var(--warning); }
.project-metrics { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.project-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.category-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}
.category-strip__item {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  padding: var(--sp-3);
}
.category-strip__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.category-strip__top strong {
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-variant-numeric: tabular-nums;
}

/* ── Finance ─────────────────────────────────────────────────────────────── */
.fin-row { display: flex; align-items: baseline; gap: var(--sp-3); padding: 6px 0; border-top: 1px solid var(--border); }
.fin-row:first-child { border-top: none; }
.fin-row__label { font-size: var(--fs-body); color: var(--text-2); }
.fin-row__val { margin-left: auto; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.fin-row__val.out { color: var(--text); }
.fin-big { font-family: var(--font-mono); font-size: var(--fs-h1); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Mini kalendář ───────────────────────────────────────────────────────── */
.minical { width: 100%; border-collapse: collapse; }
.minical th { font-size: var(--fs-micro); color: var(--text-muted); font-weight: 500; padding: 4px 0; }
.minical td { text-align: center; padding: 0; }
.minical td .day { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--r-sm); font-size: var(--fs-sm); position: relative; }
.minical td.muted .day { color: var(--text-faint); }
.minical td.today .day { background: var(--accent-dim); border: 1px solid var(--accent); color: var(--accent); font-weight: 600; }
.minical td.has-event .day::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }

/* ── Tlačítka ────────────────────────────────────────────────────────────── */
/* Tlačítko je výstupek: světlejší než karta a s výrazným rámečkem.
   Tři úrovně — neutrální / potvrzení / urgentní akce. */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2); justify-content: center;
  height: var(--ctl-h); padding: 0 var(--sp-4); border-radius: var(--r-sm);
  background: var(--surface-3); border: 1px solid var(--ctl-border); color: var(--text);
  font-size: var(--fs-sm); font-weight: 500; transition: 120ms;
}
.btn:hover { background: var(--surface-hover); border-color: var(--accent); }
.btn--primary { background: var(--accent); border-color: var(--accent-hover); color: #fff; font-weight: 600; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--urgent { background: var(--urgent); border-color: var(--urgent); color: var(--urgent-ink); font-weight: 600; }
.btn--urgent:hover { background: var(--urgent-hover); }
.btn--sm { height: calc(var(--ctl-h) - 6px); padding: 0 var(--sp-3); font-size: var(--fs-sm); }

/* ── Form ────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
/* Zapuštěné pole — viz komentář u `--field-bg` v tokens.css. */
.input, .textarea {
  width: 100%; background: var(--field-bg); border: 1px solid var(--field-border);
  border-radius: var(--r-sm); padding: var(--field-pad-y) var(--sp-3); font-size: var(--fs-body);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.30);
}
.input:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow-accent); }
.textarea { resize: vertical; min-height: 90px; }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty { text-align: center; padding: var(--sp-8) var(--sp-4); color: var(--text-muted); }
.empty__title { font-size: var(--fs-h3); color: var(--text-2); margin-bottom: var(--sp-1); }
.empty__nominal { color: var(--success); }

/* Auth */
.login-page { min-height: 100vh; background: var(--bg); }
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
}
.login-panel {
  width: min(100%, 420px);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--sp-6);
  box-shadow: var(--shadow);
}
.login-form { display: grid; gap: var(--sp-4); }
/* Přihlašovací pole používají stejné role jako `.input` — Django je vykresluje
   bez třídy, takže se stylují přes typ. */
.login-form input[type="text"], .login-form input[type="password"] {
  width: 100%;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  border-radius: var(--r-sm);
  padding: var(--field-pad-y) 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.30);
  color: var(--text);
  outline: none;
}
.login-form input[type="text"]:focus, .login-form input[type="password"]:focus {
  border-color: var(--accent);
  box-shadow: var(--glow-accent);
}
.login-error {
  border: 1px solid var(--danger);
  background: var(--danger-dim);
  color: var(--danger);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.nav-form { margin: 0; }
.nav-form button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: var(--text-2);
  border-radius: var(--r-sm);
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
}
.nav-form button:hover { background: var(--surface-2); color: var(--text); }
.topbar__logout button {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-1);
  color: var(--text-2);
  padding: 7px 10px;
  cursor: pointer;
}
.topbar__logout button:hover { border-color: var(--border-strong); color: var(--text); }

/* Skills */
.skill-intro { color: var(--text-2); line-height: 1.5; }
.skill-summary { color: var(--text-2); margin: 0 0 var(--sp-3); line-height: 1.5; }
.skill-meta { display: grid; gap: var(--sp-3); }
.skill-meta > div { display: grid; gap: var(--sp-1); min-width: 0; }
.skill-meta span { overflow-wrap: anywhere; }
.skill-meta__label {
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ── Section title (stránky) ─────────────────────────────────────────────── */
.section-head { display: flex; align-items: baseline; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-3); }
.section-head h2 { font-size: var(--fs-h3); font-weight: 600; }
.section-head .count { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-muted); }

/* ── Responsive: tablet ──────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .category-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .main { padding: var(--sp-6); }
  .focus-slot { grid-template-columns: minmax(0, 1fr) minmax(280px, 36%); align-items: center; }
}

/* ── Responsive: desktop (sidebar, mizí bottom nav) ──────────────────────── */
@media (min-width: 1024px) {
  .app { flex-direction: row; }
  .bottomnav { display: none; }
  .main { padding-bottom: var(--sp-8); }

  .sidebar {
    display: flex; flex-direction: column; width: var(--sidebar-w); flex-shrink: 0;
    height: 100dvh; position: sticky; top: 0;
    background: linear-gradient(180deg, var(--sidebar-bg) 0%, var(--sidebar-bg-deep) 100%);
    border-right: 1px solid var(--border);
    padding: var(--sp-4) var(--sp-3);
  }
  .sidebar__brand { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-h3); padding: var(--sp-2) var(--sp-3); margin-bottom: var(--sp-4); }
  .sidebar__brand .logo { color: var(--accent); }
  .nav { display: flex; flex-direction: column; gap: 2px; }
  .nav a {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 9px var(--sp-3); border-radius: var(--r-sm);
    color: var(--text-2); font-size: var(--fs-body); border-left: 2px solid transparent;
  }
  .nav a .ico { font-size: 17px; width: 20px; text-align: center; }
  .nav a:hover { background: var(--surface-2); color: var(--text); }
  .nav a.active { background: var(--surface-2); color: var(--accent); border-left-color: var(--accent); }
  .nav--bottom { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--border); }

  .topbar { padding: 0 var(--sp-6); }
  .topbar__greeting { display: none; }
  .topbar__brand-min { display: none; }

  .app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }

  .grid { grid-template-columns: repeat(12, 1fr); }
  .col-12 { grid-column: span 12; }
  .col-8 { grid-column: span 8; }
  .col-6 { grid-column: span 6; }
  .col-4 { grid-column: span 4; }
}
@media (min-width: 1280px) {
  .grid { gap: var(--sp-5); }
  .category-strip { grid-template-columns: repeat(4, 1fr); }
}

/* ── Přepínač motivu ── */
.topbar__theme {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 15px;
  color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border);
  transition: 120ms;
}
.topbar__theme:hover { color: var(--text); border-color: var(--border-strong); }

/* ── Mobilní opravy + jádro Centrály (Teď · Oblasti · Projekt) ───────────── */

/* Flexbox min-width:auto bránil položkám spodní navigace zmenšit se pod šířku
   nejdelšího slova → na 375px displeji přetékala o ~76px. */
.bottomnav a, .bottomnav button { min-width: 0; white-space: nowrap; overflow: hidden; }

/* Odškrtávátko mělo 18×18 px — na dotykovém displeji netrefitelné.
   Vizuál zůstává, zvětšuje se jen aktivní plocha. */
@media (pointer: coarse) {
  .task__check { position: relative; }
  .task__check::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* Řádek projektu v přehledu oblastí a v upozornění „projekty stojí" */
.project__top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.project__name { font-weight: 500; }
.project__badge { margin-left: auto; color: var(--text-muted); font-size: var(--fs-label); }

/* Souhrnné dlaždice na obrazovce Teď: na mobilu 2 sloupce, na širším 4 */
.project-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
@media (min-width: 720px) {
  .project-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Dlouhé názvy úkolů nesmí roztáhnout kartu */
.task__title { overflow-wrap: anywhere; }

/* Horní lišta na mobilu: „Hledat" bývalo jen nápovědou pro klávesnici a spolu
   s hodinami + odhlášením roztahovalo stránku na 451px (viewport 375), což pak
   natáhlo i spodní navigaci. Teď je to funkční tlačítko, takže se na mobilu
   nesmí schovat — jen se smrskne na samotnou ikonu. */
@media (max-width: 1023px) {
  .topbar { gap: var(--sp-2); }
  .topbar__search { height: 44px; min-width: 44px; padding: 0 10px; font-size: 0; justify-content: center; }
  .topbar__search .ico { font-size: 16px; }
  .topbar__search kbd { display: none; }
  .topbar__greeting {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}

/* Rychlý zápis „na čem jsem teď pracoval" — na mobilu pod sebou, jinak v řádku */
.zapsat { display: flex; flex-direction: column; gap: var(--sp-2); }
.zapsat__text { width: 100%; }
.zapsat__radek { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.zapsat__kam { flex: 1 1 140px; min-width: 0; }
.zapsat__radek .btn { flex: 0 0 auto; }

/* Procházení dnů */
.den-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* Formulářová pole na dotykových zařízeních: vyšší cíl a písmo 16px,
   jinak iOS Safari při psaní automaticky zoomuje stránku. */
@media (pointer: coarse) {
  .input, .select, .textarea {
    min-height: 44px; font-size: 16px;
  }
}

/* Sidebar má vlastní tmavý šalvějový gradient v obou motivech, takže jeho
   text musí být světlý i ve světlém motivu (jinak by zmizel). */
@media (min-width: 1024px) {
  .sidebar__brand { color: #EEF2EC; }
  .sidebar .nav a { color: rgba(238, 242, 236, 0.82); }
  .sidebar .nav a:hover { background: rgba(255, 255, 255, 0.10); color: #FFFFFF; }
  .sidebar .nav a.active { background: rgba(255, 255, 255, 0.14); color: #FFFFFF; border-left-color: #FFFFFF; }
  .sidebar .nav-form button { color: rgba(238, 242, 236, 0.82); }
  .sidebar .nav-form button:hover { color: #FFFFFF; }
  .sidebar__brand .logo { color: #C3D8C8; }
  .sidebar .nav--bottom { border-top-color: rgba(255, 255, 255, 0.14); }
}

/* ── Rozevírací nabídka ──────────────────────────────────────────────────
   Design systém .select neměl — nativní vzhled nesedí k šalvěji.
   appearance:none + vlastní šipka; barva šipky zvlášť pro každý motiv. */
.select {
  width: 100%; appearance: none; -webkit-appearance: none;
  background-color: var(--field-bg);
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23A3B3A7' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
  border: 1px solid var(--field-border); border-radius: var(--r-sm);
  padding: var(--field-pad-y) 36px var(--field-pad-y) var(--sp-3);
  font-size: var(--fs-body); color: var(--text); cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
:root[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235C6D60' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5l4 4 4-4'/%3E%3C/svg%3E");
}
.select:hover { border-color: var(--accent); }
.select:focus { outline: none; border-color: var(--accent); box-shadow: var(--glow-accent); }
.select option { background: var(--surface-1); color: var(--text); }

/* Vstupní pole: sjednotit výšku se selectem a zjemnit placeholder */
.input { transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease; }
.input:hover { border-color: var(--accent); }
.input::placeholder { color: var(--text-muted); }

/* Rychlý zápis: text přes celou šířku, pod ním zařazení + tlačítko */
.zapsat__text { font-size: var(--fs-h3); padding: 12px var(--sp-3); }

/* ── Vlastní rozevírací seznam ───────────────────────────────────────────
   Nativní <select> vykresluje rozbalený seznam OS (na Windows modré
   zvýraznění), CSS na něj nedosáhne. JS proto nad každý select.select
   postaví tuhle komponentu; nativní select zůstává v DOM kvůli odeslání
   formuláře a jako záloha, když JS neběží. */
.vyber { position: relative; }
.vyber select { position: absolute; opacity: 0; pointer-events: none; width: 100%; height: 100%; }

.vyber__spoust {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px var(--sp-3); font-size: var(--fs-body); color: var(--text);
  text-align: left; cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.vyber__spoust:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.vyber__spoust:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--glow-accent); }
.vyber[data-otevreno="1"] .vyber__spoust { border-color: var(--accent); box-shadow: var(--glow-accent); }
.vyber__hodnota { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vyber__sipka { flex: 0 0 auto; color: var(--text-muted); transition: transform 140ms ease; }
.vyber[data-otevreno="1"] .vyber__sipka { transform: rotate(180deg); }

.vyber__panel {
  position: absolute; z-index: 70; top: calc(100% + 4px); left: 0; right: 0;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-overlay);
  padding: var(--sp-1); max-height: 280px; overflow-y: auto;
}
.vyber[data-otevreno="0"] .vyber__panel { display: none; }

.vyber__moznost {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 9px var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-body); color: var(--text-2); cursor: pointer;
}
.vyber__moznost:hover, .vyber__moznost[data-zvyrazneno="1"] { background: var(--accent-dim); color: var(--text); }
.vyber__moznost[aria-selected="true"] { color: var(--accent); font-weight: 500; }
.vyber__moznost[aria-selected="true"]::before { content: "✓"; margin-right: -2px; }
.vyber__moznost[aria-selected="false"]::before { content: ""; width: 12px; }

/* ══ Fáze 2: kalendář · deník · poznámky vaultu ═══════════════════════════ */

/* Hlášky po POST akcích (validace úkolu, zápis do deníku). */
.hlasky { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.hlaska {
  padding: 10px var(--sp-3); border-radius: var(--r-sm);
  border: 1px solid var(--border); border-left-width: 2px;
  background: var(--surface-2); font-size: var(--fs-sm); color: var(--text-2);
}
.hlaska--success { border-left-color: var(--success); }
.hlaska--error   { border-left-color: var(--danger); color: var(--text); }
.hlaska--info    { border-left-color: var(--accent); }

/* Program z Google Kalendáře — cizí schůzky jen ke čtení, vlastní s akcentem. */
.program { display: flex; flex-direction: column; }
.program__radek {
  display: flex; align-items: baseline; gap: var(--sp-3);
  padding: 9px var(--sp-2); border-bottom: 1px solid var(--border-soft);
  border-left: 2px solid transparent;
}
.program__radek:last-child { border-bottom: none; }
.program__radek--moje { border-left-color: var(--accent); background: var(--accent-dim); }
.program__cas { flex: 0 0 auto; min-width: 52px; font-size: var(--fs-sm); color: var(--text-muted); }
.program__nazev { flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); }
.program__misto { flex: 0 0 auto; font-size: var(--fs-micro); color: var(--text-muted); }
.program__chyba { font-family: var(--font-mono); font-size: var(--fs-micro); }
.card--dnes { border-color: var(--accent); }

/* Formulář nového úkolu. Pole nepatřící k režimu skrývá JS — bez něj zůstanou
   viditelná, takže formulář funguje i tak. */
.novy-ukol { display: flex; flex-direction: column; gap: var(--sp-3); }
.novy-ukol__radek { display: flex; gap: var(--sp-3); flex-wrap: wrap; align-items: flex-end; }
.novy-ukol__radek > .field, .novy-ukol__radek > .select, .novy-ukol__radek > .vyber { flex: 1 1 160px; min-width: 0; }
.novy-ukol__radek--konec { align-items: center; justify-content: flex-end; }
.novy-ukol__pozn { flex: 1 1 auto; font-size: var(--fs-micro); color: var(--text-muted); }
.novy-ukol [hidden] { display: none; }
.field__label { font-size: var(--fs-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
.field__hint { text-transform: none; letter-spacing: 0; color: var(--text-muted); }

/* Zápis dne do vaultu. */
.denik { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.denik__text { min-height: 70px; }
.denik__radek { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.denik__cesta { flex: 1 1 auto; font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted); }

/* Hledání poznámek ve vaultu. */
.hledani { display: flex; gap: var(--sp-2); align-items: center; margin: var(--sp-3) 0; }
.hledani .input { flex: 1 1 auto; min-width: 0; }
.poznamka__telo {
  white-space: pre-wrap; word-break: break-word;
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: 1.6;
  color: var(--text-2); max-height: 70vh; overflow-y: auto;
}
.poznamka__cesta {
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted);
  word-break: break-all; margin-bottom: var(--sp-3);
}

/* Rozbalovací sekce (úpravy, které nemají zabírat místo, dokud je nechceš). */
.rozbal { border-top: 1px solid var(--border-soft); padding-top: var(--sp-3); margin-top: var(--sp-3); }
.rozbal > summary {
  cursor: pointer; list-style: none; user-select: none;
  font-size: var(--fs-sm); color: var(--accent); padding: var(--sp-2) 0;
}
.rozbal > summary::-webkit-details-marker { display: none; }
.rozbal > summary::before { content: "▸ "; }
.rozbal[open] > summary::before { content: "▾ "; }
.rozbal[open] > summary { margin-bottom: var(--sp-2); }
@media (pointer: coarse) { .rozbal > summary { min-height: 44px; display: flex; align-items: center; } }

/* Název úkolu vede na úpravu — bez podtržení, ať seznam zůstane klidný. */
.task__odkaz { color: inherit; text-decoration: none; }
.task__odkaz:hover { color: var(--accent); }

/* ── Univerzální hledání (Ctrl+K) ────────────────────────────────────────
   Overlay nad celou stránkou. Chování v app.js. */
.topbar__search { cursor: pointer; transition: border-color 120ms ease, color 120ms ease; }
.topbar__search:hover { border-color: var(--accent); color: var(--text-2); }

.paleta {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(14, 18, 15, 0.55); backdrop-filter: blur(2px);
  padding: var(--sp-4);
}
.paleta[hidden] { display: none; }

.paleta__okno {
  max-width: 640px; margin: 8vh auto 0;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-overlay); overflow: hidden;
}

.paleta__hlava {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-4); border-bottom: 1px solid var(--border);
}
.paleta__ikona { color: var(--text-muted); font-size: 18px; }
.paleta__vstup {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  padding: var(--sp-4) 0; font-size: 16px; color: var(--text);
}
.paleta__vstup::placeholder { color: var(--text-muted); }
.paleta__kbd {
  font-family: var(--font-mono); font-size: 10px; padding: 1px 5px;
  border: 1px solid var(--border-strong); border-radius: var(--r-xs); color: var(--text-muted);
}

.paleta__vysledky { max-height: 58vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-2); }
.paleta__skupina { margin-bottom: var(--sp-1); }
.paleta__popisek {
  padding: var(--sp-2) var(--sp-3) var(--sp-1);
  font-size: var(--fs-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted);
}

.paleta__polozka {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px var(--sp-3); border-radius: var(--r-sm);
  color: var(--text); text-decoration: none;
}
.paleta__polozka:hover,
.paleta__polozka[aria-selected="true"] { background: var(--accent-dim); }
.paleta__text { flex: 1 1 auto; min-width: 0; }
.paleta__titulek {
  display: block; font-size: var(--fs-body); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paleta__podtitulek {
  display: block; font-size: var(--fs-micro); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.paleta__stitek {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-3); color: var(--text-2);
  font-size: var(--fs-micro); font-weight: 600;
}

.paleta__pata {
  display: flex; gap: var(--sp-4); align-items: center;
  padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: var(--fs-micro); color: var(--text-muted);
}

/* Na mobilu je paleta přes celou šířku a nápověda kláves nedává smysl. */
@media (max-width: 640px) {
  .paleta { padding: 0; }
  .paleta__okno { margin-top: 0; border-radius: 0; border: 0; height: 100%; display: flex; flex-direction: column; }
  .paleta__vysledky { flex: 1 1 auto; max-height: none; }
  .paleta__pata { display: none; }
}

/* Hledání na dotyk: 32px je netrefitelné, cíl musí mít aspoň 44px. */
@media (pointer: coarse) {
  .topbar__search { height: 44px; min-width: 44px; justify-content: center; }
}

/* Události v programu jsou prokliknutelné na úpravu (i cizí schůzky). */
.program__radek { color: inherit; text-decoration: none; }
.program__radek:hover { background: var(--surface-hover); }
.program__radek--moje:hover { background: var(--accent-dim); }
.program__sipka { flex: 0 0 auto; color: var(--text-muted); }

/* Nebezpečná akce — mazání události v kalendáři. */
.btn--danger { border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: var(--danger-dim); }
.potvrzeni {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-2);
}
.potvrzeni input { width: 18px; height: 18px; accent-color: var(--danger); }
@media (pointer: coarse) {
  .potvrzeni input { width: 22px; height: 22px; }
}

/* ── Okno rychlého zápisu úkolu ──────────────────────────────────────────
   Stejná mechanika jako paleta hledání, jen s hlavičkou a scrollovatelným
   tělem — obsah úkolu může být dlouhý. */
.topbar__novy .ico { font-weight: 700; }

.modal {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(14, 18, 15, 0.55); backdrop-filter: blur(2px);
  padding: var(--sp-4);
}
.modal[hidden] { display: none; }

.modal__okno {
  max-width: 640px; margin: 6vh auto 0;
  display: flex; flex-direction: column; max-height: 88vh;
  background: var(--surface-1); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: var(--shadow-overlay); overflow: hidden;
}

.modal__hlava {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
}
.modal__titulek {
  flex: 1 1 auto; font-size: var(--fs-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2);
}
.modal__zavrit {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: var(--r-sm);
  font-size: 20px; line-height: 1; color: var(--text-muted);
}
.modal__zavrit:hover { background: var(--surface-hover); color: var(--text); }

.modal__telo { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-4); }
.modal__telo .textarea { min-height: 120px; }

@media (max-width: 640px) {
  .modal { padding: 0; }
  .modal__okno { margin-top: 0; border-radius: 0; border: 0; max-height: 100%; height: 100%; }
}
@media (pointer: coarse) {
  .modal__zavrit { width: 44px; height: 44px; }
}

/* Náhled obsahu úkolu — vložený text s proklikávacími odkazy. */
.ukol-obsah {
  font-size: var(--fs-sm); line-height: 1.6; color: var(--text-2);
  overflow-wrap: anywhere; max-height: 40vh; overflow-y: auto;
}
.ukol-obsah a { color: var(--accent); text-decoration: underline; }

/* ── Urgentní akce (terakota) ────────────────────────────────────────────
   Pro tlačítka, která mají vytáhnout ruku — zatím „Zadat úkol" v liště.
   Vyplněná, ne jen obtažená: v liště plné tlumených tónů je potřeba, aby
   šlo o zjevný cíl, ne o další štítek. */
.btn--urgent {
  background: var(--urgent); border-color: var(--urgent); color: var(--urgent-ink);
  font-weight: 600;
}
.btn--urgent:hover { background: var(--urgent-hover); border-color: var(--urgent-hover); }

.topbar__novy {
  background: var(--urgent); border-color: var(--urgent); color: var(--urgent-ink);
  font-weight: 600;
}
.topbar__novy:hover { background: var(--urgent-hover); border-color: var(--urgent-hover); color: var(--urgent-ink); }
.topbar__novy kbd { border-color: var(--urgent-ink); color: var(--urgent-ink); opacity: 0.75; }
.topbar__novy .ico { font-weight: 700; }

/* Okno rychlého zápisu drží stejnou signaturu — od tlačítka po odeslání. */
.modal [data-novy-ukol] .btn--primary {
  background: var(--urgent); border-color: var(--urgent); color: var(--urgent-ink);
}
.modal [data-novy-ukol] .btn--primary:hover {
  background: var(--urgent-hover); border-color: var(--urgent-hover);
}
.modal__hlava .modal__titulek { color: var(--urgent); }

/* ── Typ aktivity u události ─────────────────────────────────────────────
   Přepínače stylované do štítků: jedno kliknutí, žádné rozbalování.
   Nativní radio zůstává v DOM (jen vizuálně skryté) kvůli klávesnici,
   čtečkám a odeslání formuláře bez JS. */
.typy { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.typ { position: relative; }
.typ input {
  position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0;
  cursor: pointer;
}
.typ__stitek {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: var(--ctl-h); padding: 0 var(--sp-2); border-radius: var(--r-full);
  background: var(--surface-3); border: 1px solid var(--ctl-border);
  color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap;
  transition: 120ms;
}
.typ input:hover + .typ__stitek { border-color: var(--accent); color: var(--text); }
.typ input:checked + .typ__stitek {
  background: var(--urgent-dim); border-color: var(--urgent); color: var(--text);
  font-weight: 600;
}
.typ input:focus-visible + .typ__stitek { box-shadow: var(--glow-accent); }
.typ__ikona { font-size: 15px; line-height: 1; }

.program__typ { flex: 0 0 auto; font-size: 14px; line-height: 1; }

@media (pointer: coarse) {
  .typ__stitek { min-height: 44px; }
}

/* Řádek programu se rozpadl na dva odkazy: hlavní (úprava) a místo
   (navigace). Odkazy nejdou vnořovat, proto je obal už jen div. */
.program__radek { display: flex; flex-wrap: wrap; align-items: baseline; }
.program__hlavni {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: baseline; gap: var(--sp-3);
  color: inherit; text-decoration: none;
}
.program__misto {
  flex: 0 0 auto; max-width: 100%;
  padding: 2px var(--sp-2); border-radius: var(--r-full);
  background: var(--surface-3); color: var(--accent);
  font-size: var(--fs-micro); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.program__misto:hover { background: var(--accent-dim); text-decoration: underline; }

/* Na dotyk musí být odkaz na navigaci trefitelný — typicky se po něm sahá
   ve spěchu před odjezdem. Pravidlo je i v šířkovém breakpointu, protože
   `pointer: coarse` se v emulaci prohlížeče neprojeví a nešlo by ověřit. */
@media (pointer: coarse), (max-width: 1023px) {
  .program__misto {
    min-height: 40px; display: inline-flex; align-items: center;
    padding: 0 var(--sp-3); font-size: var(--fs-sm);
  }
}

/* Akce vedle popisku pole (např. „Navigovat" u místa). */
.field__akce {
  margin-left: var(--sp-2); text-transform: none; letter-spacing: 0;
  color: var(--accent); font-weight: 600;
}
.field__akce:hover { text-decoration: underline; }

/* ── Odškrtávání událostí v programu ─────────────────────────────────────
   Události z úkolu propisují stav do úkolu, cizí schůzky si ho nesou samy
   (skrytá vlastnost). Hotové se nezahazují — jen ztlumí, ať je vidět,
   co už je za mnou. */
.program__form { display: flex; align-items: center; flex: 0 0 auto; }
.task__check.is-done {
  background: var(--accent); border-color: var(--accent);
  position: relative;
}
.task__check.is-done::before {
  content: "✓"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 11px; line-height: 1; color: var(--surface-1); font-weight: 700;
}
.program__radek--hotovo .program__nazev {
  text-decoration: line-through; color: var(--text-muted);
}
.program__radek--hotovo { opacity: 0.72; }

/* ── Dashboard oblasti ───────────────────────────────────────────────────
   Postup ukazuje, kolik je za mnou — bez celku by procento nic neříkalo,
   proto vedle pruhu vždycky i čísla. */
.postup__pruh {
  height: 8px; border-radius: var(--r-full); overflow: hidden;
  background: var(--surface-3);
}
.postup__pruh--tenky { height: 4px; margin: var(--sp-2) 0; }
.postup__hotovo { display: block; height: 100%; background: var(--accent); transition: width 200ms ease; }
.postup__cisla {
  display: flex; gap: var(--sp-4); align-items: baseline; margin-top: var(--sp-2);
  font-size: var(--fs-sm); color: var(--text-2); flex-wrap: wrap;
}
.postup__procent { margin-left: auto; color: var(--accent); font-weight: 600; }
.project--stoji { border-left: 2px solid var(--warning); padding-left: var(--sp-3); }
.project__postup {
  margin-left: auto; font-size: var(--fs-micro); color: var(--text-muted);
  font-family: var(--font-mono);
}
a.card__title:hover { color: var(--accent); }

/* Oblasti v levém panelu */
.nav__skupina {
  margin: var(--sp-4) 0 var(--sp-1); padding: 0 var(--sp-3);
  font-size: var(--fs-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: rgba(255,255,255,0.45);
}
.nav__oblast { font-size: var(--fs-sm); }
.nav__oblast .ico { font-size: 10px; opacity: 0.6; }

/* ── Návyky (2026-08-02) ──────────────────────────────────────────────────
   Checklist na obrazovce dne. Schválně hustší než zbytek aplikace: řádek má
   30 px místo 44 px, ať se sedm návyků vejde na jednu obrazovku bez rolování.
   Zároveň slouží jako ukázka hustotního režimu — viz návrh v provozním režimu.
   ------------------------------------------------------------------------ */
.card--dense { padding: var(--sp-3); }
.card--dense .card__head { margin-bottom: var(--sp-2); }
.card__count--ok { background: var(--success-dim); color: var(--success); }

.navyky { display: flex; flex-direction: column; gap: 2px; }

.navyk {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 3px var(--sp-2) 3px var(--sp-1);
  border-radius: var(--r-xs); min-height: 30px;
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
}
.navyk:hover { background: var(--surface-hover); }
.navyk--hotovo { border-left-color: var(--success); background: var(--success-dim); }
.navyk--hotovo .navyk__nazev { color: var(--text-2); text-decoration: line-through; }

/* Odškrtávátko je tlačítko, ne checkbox — musí jít trefit i palcem na mobilu. */
.navyk__box {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong); border-radius: var(--r-xs);
  background: var(--surface-1); color: var(--success);
  font-size: 14px; line-height: 1; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  transition: 120ms;
}
.navyk__box:hover { border-color: var(--accent); background: var(--accent-dim); }
.navyk--hotovo .navyk__box { border-color: var(--success); background: var(--success-dim); }

.navyk__nazev { font-size: var(--fs-body); flex-shrink: 0; }
.navyk__popis {
  font-size: var(--fs-micro); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1;
}
.navyk__perioda {
  font-size: var(--fs-micro); color: var(--text-2);
  background: var(--surface-3); padding: 1px 6px; border-radius: var(--r-full);
  white-space: nowrap;
}
.navyk__serie {
  margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-micro);
  color: var(--warning); background: var(--warning-dim);
  padding: 1px 6px; border-radius: var(--r-full); white-space: nowrap;
}

.navyk-novy { margin-top: var(--sp-2); }
.navyk-novy__toggle {
  font-size: var(--fs-sm); color: var(--accent); cursor: pointer;
  padding: var(--sp-1) 0; list-style: none;
}
.navyk-novy__toggle::-webkit-details-marker { display: none; }
.navyk-novy__form { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.navyk-novy__radek { display: flex; gap: var(--sp-2); align-items: center; }
.navyk-novy__radek .input { flex: 1; }
.navyk-dny { display: flex; gap: var(--sp-2); flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.navyk-dny__legenda { font-size: var(--fs-micro); color: var(--text-muted); padding: 0; }
.navyk-dny__den {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-sm); color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 2px var(--sp-2); border-radius: var(--r-full);
}

/* ── Typ a projekt ve výpisu úkolu (2026-08-02) ───────────────────────────
   Ikona říká čím to je (telefon / schůzka / …), závorka za názvem čeho se to
   týká. Obojí tlumeně — název úkolu musí zůstat to hlavní, co oko chytne.
   ------------------------------------------------------------------------ */
.task__typ {
  font-size: 13px; line-height: 1; flex-shrink: 0;
  margin-right: 2px; opacity: 0.9;
}
.task__projekt {
  color: var(--text-muted); font-size: var(--fs-sm); font-weight: 400;
  margin-left: 4px; white-space: nowrap;
}
a.task__projekt:hover { color: var(--data); text-decoration: underline; }
.program__typ + .program__nazev + .task__projekt { margin-left: var(--sp-1); }

/* ── Inbox (2026-08-02) ───────────────────────────────────────────────────
   Zachycení a třídění jsou dvě různé práce. Horní pole je na rychlost —
   velké, zaostřené, bez jediného dalšího vstupu. Spodní seznam je na
   rozhodování a smí být hustý.
   ------------------------------------------------------------------------ */
.inbox-dump { display: flex; flex-direction: column; gap: var(--sp-2); }
.inbox-dump__text { min-height: 150px; font-size: var(--fs-h3); line-height: 1.6; }
.inbox-dump__radek { display: flex; align-items: center; gap: var(--sp-3); }
.inbox-dump__radek .btn { margin-left: auto; }

.inbox-radek {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-2) 0;
  border-left: 3px solid var(--warning);
  border-radius: var(--r-xs);
  background: var(--surface-2);
  margin-top: var(--sp-2);
}
.inbox-radek__text .input { font-size: var(--fs-body); }
.inbox-radek__volby { display: flex; gap: var(--sp-1); flex-wrap: wrap; align-items: center; }
.inbox-radek__volby .select { width: auto; min-width: 130px; flex: 1 1 130px; }
.inbox-radek__datum { width: auto; flex: 0 0 140px; }
.inbox-radek__volby .btn { flex: 0 0 auto; }
/* Vyřízení bez úkolu je vědomě nenápadné — má být po ruce, ne v cestě. */
.inbox-radek__vyridit { padding: 0 var(--sp-2) var(--sp-2); background: var(--surface-2);
  border-left: 3px solid var(--warning); border-radius: 0 0 var(--r-xs) var(--r-xs); }
.inbox-radek__vyridit .btn {
  height: 24px; padding: 0 var(--sp-2); font-size: var(--fs-micro);
  background: none; border-color: transparent; color: var(--text-muted);
}
.inbox-radek__vyridit .btn:hover { color: var(--text); border-color: var(--ctl-border); }

/* Pole na nový projekt je krátké schválně — název projektu bývá jedno dvě
   slova a v hustém řádku inboxu nemá zabírat místo výběrům (3. 8. 2026). */
.inbox-radek__novy { width: auto; flex: 0 1 130px; min-width: 100px; }
.inbox-radek__typ { flex: 0 1 120px; min-width: 110px; }
.novy-ukol__novy-projekt { width: auto; flex: 0 1 150px; min-width: 110px; }