/* ═══════════════════════════════════════════════════════════
   WorkTrack Professional – Design System 1.14.13
   Klidné B2B rozhraní: tmavě modrá · tyrkysová · jantar · červená
   ═══════════════════════════════════════════════════════════ */

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

:root {
  /* Značka a navigace */
  --nav-950: #0A1729;
  --nav-900: #10243E;
  --nav-800: #173452;
  --g-900: #064E42;
  --g-800: #066A59;
  --g-700: #077562;
  --g-600: #087F6A;
  --g-100: #CCEBE3;
  --g-50:  #E8F6F2;
  --brand-link: #066A59;
  /* Aliasy pro starší views/utility (u-bg-gm, u-c-gm, var(--rm)) */
  --gm: var(--g-600);
  --rm: var(--r-600);

  /* Oranžová */
  --o-700: #AA6505;
  --o-600: #D8890E;
  --o-500: #E89A16;
  --o-100: #FBE6BD;
  --o-50:  #FFF7E8;
  --o-text: #744506;

  /* Červená */
  --r-700: #A62D3B;
  --r-600: #C83E4D;
  --r-100: #F4CED3;
  --r-50:  #FFF0F2;
  --r-text: #8B2633;

  /* Neutrální */
  --white:  #FFFFFF;
  --bg:     #F4F7FA;
  --bg-2:   #EEF3F7;
  --border: #DCE4EB;
  --border-2: #C5D0DA;
  --text:   #172235;
  --text-2: #44546A;
  --muted:  #65748B;
  --hint:   #6E7D95; /* AA kontrast na bílé i --bg */
  --shadow-sm: 0 1px 2px rgba(12,29,48,.05);
  --shadow-md: 0 10px 26px rgba(12,29,48,.10);
  --shadow-lg: 0 24px 56px rgba(12,29,48,.20);

  /* Layout */
  --sidebar-w: 256px;
  --radius-sm: 8px;
  --radius:    10px;
  --radius-lg: 16px;

  /* Typography */
  --font: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── Reset ───────────────────────────────────────────────── */
html { min-height: 100%; font-size: 14px; }
body { min-width: 320px; min-height: 100vh; font-family: var(--font); color: var(--text); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a    { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
button { cursor: pointer; border: none; background: none; }
svg { display: block; flex-shrink: 0; }

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--g-600) 38%, transparent);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */

.app-shell {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--g-800);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 0.5px solid rgba(255,255,255,0.1);
}

.logo-mark {
  width: 32px; height: 32px;
  background: var(--o-600);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.logo-name { color: #fff; font-size: 14px; font-weight: 500; line-height: 1.2; }
.logo-sub  { color: rgba(255,255,255,0.4); font-size: 14px; }

/* Nav */
.sidebar-nav {
  padding: 10px 8px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-section {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.3);
  padding: 12px 10px 4px;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: rgba(255,255,255,0.65);
  font-size: 14px;
  transition: background .12s, color .12s;
}

.nav-item:hover  { background: rgba(255,255,255,0.08); color: #fff; }
.nav-item.active { background: rgba(255,255,255,0.15); color: #fff; font-weight: 500; }

.nav-icon { width: 16px; height: 16px; flex-shrink: 0; opacity: .85; }

.nav-badge {
  margin-left: auto;
  background: var(--r-600);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 10px;
  line-height: 1.6;
}

.nav-badge--pulse { background: var(--o-600); animation: badgePulse 2s ease-in-out infinite; }
@keyframes badgePulse { 0%,100%{opacity:1} 50%{opacity:.5} }

/* User pill */
.sidebar-bottom {
  padding: 12px 10px 16px;
  border-top: 0.5px solid rgba(255,255,255,0.1);
}

/* Wrapper kolem user-pill — vlastní řádek s plnou šířkou.
   Předtím byl user-pill ve stejném flex řádku jako theme/logout ikony,
   na úzkém sidebaru (~280px) se jméno zalamovalo na 2 řádky a ikony se
   mačkaly. Teď je user-pill samostatně, action ikony pod ním. */
.sidebar-user-row {
  padding: 0 4px;
  margin-bottom: 8px;
}

.user-pill {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--radius);
  transition: background .12s;
}
.user-pill:hover { background: rgba(255,255,255,0.08); }

.user-info { min-width: 0; flex: 1; }   /* min-width: 0 umožňuje text-overflow */

.avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--o-600);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: #fff;
  flex-shrink: 0;
  letter-spacing: .03em;
}

.user-name {
  color: #fff;
  font-size: 14px;
  font-weight: 600;       /* zvýrazněno proti user-role */
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-role {
  color: rgba(255,255,255,0.45);
  font-size: 14px;
  line-height: 1.25;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Action ikony (theme toggle + logout) — vlastní řádek pod user-pill,
   zarovnané doprava se separator nahoře. Vizuálně oddělené, žádné mačkání. */
.sidebar-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 4px 0;
  border-top: 0.5px solid rgba(255,255,255,0.06);
  margin-top: 4px;
}

/* ── Main wrap ───────────────────────────────────────────── */
.main-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Timer bar ───────────────────────────────────────────── */
.timer-bar {
  background: var(--o-600);
  padding: 0 20px;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 50;
}

.timer-dot {
  width: 8px; height: 8px;
  background: #fff;
  border-radius: 50%;
  animation: timerBlink 1.2s ease-in-out infinite;
  flex-shrink: 0;
}

.timer-dot--paused { animation: none; opacity: .5; }
@keyframes timerBlink { 0%,100%{opacity:1} 50%{opacity:.25} }

.timer-label   { color: rgba(255,255,255,.8); font-size: 14px; }
.timer-client  { color: #fff; font-weight: 500; font-size: 14px; flex: 1; }

.timer-elapsed {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  flex-shrink: 0;
}

.timer-stop-btn {
  background: rgba(255,255,255,.2);
  border: 0.5px solid rgba(255,255,255,.35);
  color: #fff;
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  transition: background .12s;
}
.timer-stop-btn:hover { background: rgba(255,255,255,.3); }

/* ── Flash messages ──────────────────────────────────────── */
.flash {
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 0.5px solid transparent;
}
.flash--success {
  background: var(--g-50);
  color: var(--g-800);
  border-color: var(--g-100);
}
.flash--error {
  background: var(--r-50);
  color: var(--r-600);
  border-color: var(--r-100);
}

/* ── Page header ─────────────────────────────────────────── */
.page-header {
  background: var(--white);
  border-bottom: 0.5px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

.page-header__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
}

.page-title {
  font-size: 16px;
  font-weight: 500;
  flex: 1;
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ═══════════════════════════════════════════════════════════
   KOMPONENTY
   ═══════════════════════════════════════════════════════════ */

/* ── Tlačítka ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  transition: background .12s, opacity .12s;
  white-space: nowrap;
}

.btn--primary {
  background: var(--g-600);
  color: #fff;
  border: none;
}
.btn--primary:hover { background: var(--g-800); }

.btn--danger {
  background: var(--r-600);
  color: #fff;
  border: none;
}
.btn--danger:hover { background: var(--r-700); }

.btn--ghost {
  background: transparent;
  border: 0.5px solid var(--border-2);
  color: var(--muted);
}
.btn--ghost:hover { background: var(--bg); }

.btn--orange {
  background: var(--o-600);
  color: #fff;
  border: none;
}
.btn--orange:hover { background: var(--o-700); }

.btn--sm   { padding: 5px 10px; font-size: 14px; }
.btn--full { width: 100%; justify-content: center; }

/* Disabled state — visual + interactive lock.
   pointer-events: none brání kliknutí i u <a class="btn">
   (HTML disabled atribut funguje jen na <button>, na <a> ne). */
.btn[disabled],
.btn:disabled,
.btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.btn[disabled]:hover,
.btn:disabled:hover {
  background: inherit;   /* zruš hover state */
}

/* ── Karty ───────────────────────────────────────────────── */
.card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card--alert { border-color: var(--r-100); }

.card-header {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 0.5px solid var(--border);
}

.card-title { font-size: 14px; font-weight: 500; flex: 1; }
.card-link  { font-size: 14px; color: var(--g-600); }
.card-link:hover { text-decoration: underline; }

/* ── Stat karty ──────────────────────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.stat-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 15px;
}

.stat-card__label { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.stat-card__value { font-size: 20px; font-weight: 500; line-height: 1.1; }
.stat-card__sub   { font-size: 14px; color: var(--muted); margin-top: 4px; }

.stat-card--green  .stat-card__value { color: var(--g-600); }
.stat-card--orange .stat-card__value { color: var(--o-600); }
.stat-card--red    .stat-card__value { color: var(--r-600); }
.stat-card--red    { border-color: var(--r-100); }

/* ── Quick akce ──────────────────────────────────────────── */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.quick-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: border-color .15s;
}
.quick-card:hover { border-color: var(--g-600); }

.quick-card__icon {
  width: 36px; height: 36px;
  border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.quick-card__icon--green  { background: var(--g-50);  }
.quick-card__icon--orange { background: var(--o-50);  }
.quick-card__icon--red    { background: var(--r-50);  }

.quick-card__title { font-size: 14px; font-weight: 500; }
.quick-card__sub   { font-size: 14px; color: var(--muted); margin-top: 1px; }

/* ── Entry rows ──────────────────────────────────────────── */
.entry-row {
  display: flex;
  align-items: center;
  padding: 9px 16px;
  gap: 10px;
  border-bottom: 0.5px solid var(--border);
  transition: background .1s;
}
.entry-row:last-child { border-bottom: none; }
.entry-row:hover { background: var(--bg); }
.entry-row--active { opacity: .7; }

.entry-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.entry-dot--pulse { animation: timerBlink 1.5s ease-in-out infinite; }

.entry-meta { flex: 1; min-width: 0; }

.entry-client {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-desc {
  font-size: 14px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entry-time { font-size: 14px; color: var(--muted); flex-shrink: 0; text-align: right; }
.entry-dur  { font-size: 14px; font-weight: 500; min-width: 44px; text-align: right; flex-shrink: 0; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
  font-size: 14px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.badge--green  { background: var(--g-50);  color: var(--g-800); }
.badge--orange { background: var(--o-50);  color: var(--o-text); }
.badge--red    { background: var(--r-50);  color: var(--r-text); }
.badge--gray   { background: var(--bg-2);  color: var(--muted);  }

/* ── Status badges ───────────────────────────────────────── */
.status-badge { display: inline-flex; align-items: center; gap: 5px; }
.status-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.status--draft    { color: var(--muted); }
.status--draft::before    { background: var(--muted); }
.status--confirmed { color: var(--g-600); }
.status--confirmed::before { background: var(--g-600); }
.status--invoiced { color: var(--o-600); }
.status--invoiced::before  { background: var(--o-600); }
.status--locked   { color: var(--hint); }
.status--locked::before    { background: var(--hint); }

/* ── View tabs ───────────────────────────────────────────── */
.view-tabs {
  display: flex;
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}

.view-tab {
  padding: 5px 13px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--muted);
  transition: background .12s, color .12s;
  background: none;
  border: none;
}

.view-tab.active, .view-tab:hover {
  background: var(--white);
  color: var(--text);
  font-weight: 500;
  border: 0.5px solid var(--border);
}

/* ── Empty state ─────────────────────────────────────────── */
.empty-state {
  padding: 32px 20px;
  text-align: center;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

/* ═══════════════════════════════════════════════════════════
   FORMULÁŘE
   ═══════════════════════════════════════════════════════════ */
.form-grid    { display: grid; gap: 14px; }
.form-grid-2  { grid-template-columns: 1fr 1fr; }
.form-grid-3  { grid-template-columns: 1fr 1fr 1fr; }
.form-group   { display: flex; flex-direction: column; gap: 5px; }

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .02em;
}

.form-input,
.form-select,
.form-textarea {
  padding: 8px 10px;
  border: 0.5px solid var(--border-2);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  font-size: 14px;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--g-600);
  box-shadow: 0 0 0 3px rgba(46,125,50,.12);
}

.form-textarea { resize: vertical; min-height: 80px; }

.form-error {
  font-size: 14px;
  color: var(--r-600);
  margin-top: 2px;
}

.form-hint {
  font-size: 14px;
  color: var(--muted);
  margin-top: 2px;
}

/* Checkbox & radio */
.form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--g-600);
  cursor: pointer;
}

/* ── Form card ───────────────────────────────────────────── */
.form-card {
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.form-card__header {
  padding: 12px 18px;
  border-bottom: 0.5px solid var(--border);
  font-size: 14px;
  font-weight: 500;
}

.form-card__body { padding: 18px; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 6px;
}

/* ═══════════════════════════════════════════════════════════
   TABULKY
   ═══════════════════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.table th {
  text-align: left;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 0.5px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}

.table td {
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--border);
  vertical-align: middle;
}

.table tr:last-child td { border-bottom: none; }
.table tbody tr:hover td { background: var(--bg); }

.table .td-right { text-align: right; }
.table .td-mono  { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */
.login-body {
  background: var(--g-800);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-wrap {
  width: 100%;
  max-width: 380px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.login-logo-mark {
  width: 40px; height: 40px;
  background: var(--o-600);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}

.login-logo-name { color: #fff; font-size: 20px; font-weight: 500; }
.login-logo-sub  { color: rgba(255,255,255,.5); font-size: 14px; }

.login-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.login-form { display: flex; flex-direction: column; gap: 16px; }

.login-footer {
  text-align: center;
  color: rgba(255,255,255,.3);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════
   TIMER / CREATE ENTRY PAGE
   ═══════════════════════════════════════════════════════════ */
.timer-display {
  text-align: center;
  padding: 28px 20px 20px;
}

.timer-display__time {
  font-size: 52px;
  font-weight: 500;
  color: var(--o-600);
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
  line-height: 1;
}

.timer-display__meta {
  font-size: 14px;
  color: var(--muted);
  margin-top: 6px;
}

.timer-display__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 18px;
}

/* ── Color picker dot ────────────────────────────────────── */
.color-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Project badge ───────────────────────────────────────── */
.project-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Invoice status ──────────────────────────────────────── */
.inv-status {
  font-size: 14px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 10px;
}
.inv-status--draft    { background: var(--bg-2); color: var(--muted); }
.inv-status--issued   { background: var(--o-50); color: var(--o-text); }
.inv-status--paid     { background: var(--g-50); color: var(--g-800);  }
.inv-status--overdue  { background: var(--r-50); color: var(--r-text); }
.inv-status--canceled { background: var(--bg-2); color: var(--hint);   }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVITA — mobile-first layout fixes (v1.8.5)
   Breakpointy: 900px tablet, 640px mobile, 400px malé mobily
   ═══════════════════════════════════════════════════════════ */

/* ── Mobile topbar (hamburger) — viditelný jen pod 900px ──── */
.mobile-topbar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--g-800);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 45;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
}

.mobile-topbar__brand {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background .12s;
  -webkit-tap-highlight-color: transparent;
}
.menu-toggle:hover,
.menu-toggle:focus-visible { background: rgba(255,255,255,.12); outline: none; }
.menu-toggle svg { width: 20px; height: 20px; }

/* ── Sidebar backdrop — při otevřeném drawer ──────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 99;
  opacity: 0;
  transition: opacity .2s ease;
}
.sidebar-backdrop.is-visible { display: block; opacity: 1; }

/* ── Tablet (≤ 900px) ─────────────────────────────────────── */
@media (max-width: 900px) {
  .stats-grid    { grid-template-columns: repeat(2, 1fr); }
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
  .form-grid-3   { grid-template-columns: 1fr 1fr; }

  /* Hamburger + drawer režim sidebaru */
  .mobile-topbar { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 260px;
    max-width: 85vw;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 100;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .sidebar.is-open { transform: translateX(0); }

  /* Main přebírá celou šířku */
  :root { --sidebar-w: 0px; }
  .main-wrap { width: 100%; min-width: 0; }

  /* Jen mobile-topbar zůstává sticky. Timer-bar a page-header na mobilu
     plynou s obsahem — jinak by se prali o top:0 a překryli se. */
  .timer-bar   { position: static; }
  .page-header { position: static; }
}

/* ── Mobile (≤ 640px) ─────────────────────────────────────── */
@media (max-width: 640px) {

  /* Page body — menší padding */
  .page-body { padding: 12px; gap: 12px; }

  /* Stats */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat-card { padding: 11px 12px; }
  .stat-card__value { font-size: 18px; }
  .stat-card__label { font-size: 14px; }
  .stat-card__sub   { font-size: 14px; }

  /* Quick actions — jeden sloupec */
  .quick-actions { grid-template-columns: 1fr; gap: 8px; }

  /* Formuláře — stack */
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }

  /* Timer bar — kompaktní */
  .timer-bar {
    padding: 0 12px;
    height: 40px;
    gap: 8px;
  }
  .timer-label { display: none; }            /* "aktivní:" popisek se nevejde */
  .timer-client {
    font-size: 14px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .timer-elapsed { font-size: 14px; }
  .timer-stop-btn {
    padding: 4px 10px;
    font-size: 14px;
    flex-shrink: 0;
  }

  /* Page header — vertikální stack, actions do vlastního řádku */
  .page-header__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .page-title { font-size: 15px; }
  .page-header__actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  .page-header__actions .view-tabs { flex-shrink: 0; }
  .page-header__actions .btn { flex: 1; justify-content: center; }
  .page-header__actions .btn--ghost {
    flex: 0 0 auto;           /* sekundární tlačítka (filtr, CSV) zůstanou auto */
  }

  /* Quick card — oprava překrývání title/sub */
  .quick-card > :last-child {
    flex: 1;
    min-width: 0;
  }
  .quick-card__title,
  .quick-card__sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
  }

  /* Entry row — kompaktní, bez wrapování časů/durace */
  .entry-row {
    padding: 9px 12px;
    gap: 8px;
  }
  .entry-time {
    /* Při 14px font minimum se entry-row na úzkých displejích plní, takže
       skrýváme méně klíčový sloupec (čas) — entry-dur (trvání) zůstává. */
    display: none;
  }
  .entry-dur {
    white-space: nowrap;
    min-width: 0;
    font-size: 14px;
  }
  .entry-client { font-size: 14px; }
  .entry-desc   { font-size: 14px; }
  .badge { padding: 2px 6px; font-size: 14px; }

  /* Karty hlavičky */
  .card-header { padding: 9px 12px; }
  .card-title  { font-size: 14px; }

  /* Formulářové karty */
  .form-card__header { padding: 10px 14px; }
  .form-card__body   { padding: 14px; }
  .form-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 8px;
  }
  .form-actions .btn { width: 100%; justify-content: center; }

  /* Tabulky — vodorovné scrollování */
  .table { font-size: 14px; }
  .table th, .table td { padding: 8px 10px; }

  /* Timer display (stránka Timer/Create entry) */
  .timer-display__time { font-size: 40px; }
  .timer-display { padding: 20px 14px 14px; }

  /* Inputy — 16px proti iOS auto-zoomu */
  .form-input, .form-select, .form-textarea,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="tel"], input[type="search"],
  input[type="date"], input[type="time"], select, textarea {
    font-size: 16px;
  }

  /* Flash zprávy menší padding */
  .flash { padding: 10px 14px; font-size: 14px; }
}

/* ── Malé mobily (≤ 400px) ────────────────────────────────── */
@media (max-width: 400px) {
  .stats-grid { grid-template-columns: 1fr; }
  .page-body { padding: 10px; gap: 10px; }

  /* Na nejmenších displejích skryjeme popisky času v seznamu záznamů,
     duration zůstává — je to nejdůležitější údaj */
  .entry-time { display: none; }
  .entry-row { gap: 7px; padding: 9px 10px; }
}

/* ═══════════════════════════════════════════════════════════
   PWA & Notifikace
   ═══════════════════════════════════════════════════════════ */

/* Install banner animation */
#install-banner { animation: slideUp .3s ease; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* Offline bar */
#offline-bar { animation: slideUp .3s ease; }

/* Notifikace scroll */
#notif-panel::-webkit-scrollbar { width: 4px; }
#notif-panel::-webkit-scrollbar-track { background: transparent; }
#notif-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 2px; }

/* Toast fade */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* PWA standalone mode – schovat browser chrome indikátory */
@media (display-mode: standalone) {
  .login-body { padding-top: env(safe-area-inset-top); }
  .sidebar { padding-top: env(safe-area-inset-top); }
}

/* Offline badge na nav item */
#offline-queue-badge {
  background: var(--o-600);
  color: #fff;
  font-size: 14px;
  padding: 1px 5px;
  border-radius: 8px;
  margin-left: auto;
  font-weight: 500;
}

/* Mobilní PWA – bottom safe area (pro timer bar a main-wrap) */
@media (max-width: 900px) {
  .main-wrap { padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* ── Sidebar hover (nahrazuje inline onmouseenter/leave) ───────── */
.sidebar-hoverable { transition: background .12s; }
.sidebar-hoverable:hover { background: rgba(255,255,255,.08) !important; }

/* ──────────────────────────────────────────────────────────────
 * Kompatibilní aliasy pro mockup-based views.
 * Některé views (zejména client_portal/*) byly napsané proti
 * CSS třídám z UI mockupu, které nejsou v produkčním designu.
 * Tyto aliasy je namapují na existující styly.
 * ────────────────────────────────────────────────────────────── */

/* layout wrappers (mockup → page layout) */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; background: var(--white);
  border-bottom: 1px solid var(--border);
  min-height: 56px; gap: 12px;
}
.ptitle {
  font-size: 18px; font-weight: 600; color: var(--text);
}
.main {
  padding: 16px 18px; display: flex; flex-direction: column; gap: 14px;
}

/* buttons */
.bprim {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; font-size: 14px; font-weight: 500;
  background: var(--g-600); color: #fff;
  border: none; border-radius: 7px; cursor: pointer;
  text-decoration: none;
}
.bprim:hover { background: var(--g-800); }
.bghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 14px;
  background: transparent; color: var(--text);
  border: 1px solid var(--border); border-radius: 7px; cursor: pointer;
  text-decoration: none;
}
.bghost:hover { background: var(--bg); }

/* section / card */
.sec {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
}
.sh {
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg); display: flex; align-items: center; justify-content: space-between;
}
.st { font-size: 14px; font-weight: 600; color: var(--text); }

/* entry row (list/table-like) */
.er {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.er:last-child { border-bottom: none; }
.em { flex: 1; min-width: 0; }
.ecl { font-size: 14px; font-weight: 500; color: var(--text); }
.edesc { font-size: 14px; color: var(--muted); margin-top: 2px; }

/* stats grid (mockup) */
.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.sc {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px;
}
.sc.green  { border-color: var(--g-100); }
.sc.orange { border-color: var(--o-100); }
.sc.red    { border-color: var(--r-100); }
.slbl { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.sval { font-size: 20px; font-weight: 600; color: var(--text); }
.sc.green  .sval { color: var(--g-800); }
.sc.orange .sval { color: var(--o-text); }
.sc.red    .sval { color: var(--r-text); }
.ssub { font-size: 14px; color: var(--muted); margin-top: 3px; }

/* field wrapper */
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld label {
  font-size: 14px; font-weight: 500; color: var(--text);
}
.fld input, .fld select, .fld textarea {
  padding: 8px 10px; font-size: 14px;
  background: var(--white); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px;
}
.fld input:focus, .fld select:focus, .fld textarea:focus {
  outline: none; border-color: var(--g-600);
  box-shadow: 0 0 0 3px rgba(46,125,50,.15);
}

/* badge legacy short names (br = green, bo = orange, bt = red/gray) */
.badge.br { background: var(--g-50);  color: var(--g-800); }
.badge.bo { background: var(--o-50);  color: var(--o-text); }
.badge.bt { background: var(--r-50);  color: var(--r-text); }

/* ══════════════════════════════════════════════════════════════
   DARK MODE
   Aktivuje se přes class="dark" na <html>.
   JS nastaví class podle: localStorage > prefers-color-scheme.
   Brand barvy (zelená/oranžová/červená) zůstávají —
   mění se jen neutrální paleta (pozadí, text, borders).
   ══════════════════════════════════════════════════════════════ */

html.dark {
  /* Neutrální paleta — tmavá */
  --white:   #1C1F1D;   /* "bílé" karty jsou tmavě šedé */
  --bg:      #14161A;   /* pozadí stránky */
  --bg-2:    #242726;   /* sekundární povrchy */
  --border:  rgba(255,255,255,0.08);
  --border-2: rgba(255,255,255,0.14);
  --text:    #ECEEEF;
  --muted:   #9CA3AF;
  --hint:    #6B7280;

  /* Brand barvy — zachováváme, ale ztlumené odstíny pro backgrounds */
  --g-50:    rgba(46,125,50,0.18);     /* zelené pozadí (badges, success) */
  --g-100:   rgba(46,125,50,0.30);
  --o-50:    rgba(232,114,28,0.18);    /* oranžové pozadí */
  --o-100:   rgba(232,114,28,0.30);
  --r-50:    rgba(192,57,43,0.18);     /* červené pozadí */
  --r-100:   rgba(192,57,43,0.30);

  /* Text na barevných pozadích — v dark módu světlý */
  --g-800:   #81C784;
  --o-text:  #FFB780;
  --r-text:  #F5998B;

  color-scheme: dark;
}

/* Dark mode — specifické dladění komponent, které potřebují extra úpravu */
html.dark body {
  background: var(--bg);
  color: var(--text);
}

/* Inputs v dark — světlejší než karty pro kontrast */
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="tel"],
html.dark input[type="search"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark select,
html.dark textarea {
  background: #0F1113;
  color: var(--text);
  border-color: var(--border-2);
}

html.dark .form-input:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
  border-color: var(--g-600);
  box-shadow: 0 0 0 3px rgba(46,125,50,0.30);
}

/* Browser autofill v dark módu — jinak to malíruje žlutě */
html.dark input:-webkit-autofill,
html.dark input:-webkit-autofill:hover,
html.dark input:-webkit-autofill:focus,
html.dark input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #0F1113 inset !important;
  -webkit-text-fill-color: var(--text) !important;
  caret-color: var(--text) !important;
}

/* Sidebar v dark — o něco tmavší než pozadí stránky, aby zůstala separace */
html.dark .sidebar {
  background: #0A1F10;   /* tmavě zelená, odvozená od --g-900 */
  border-right: 1px solid var(--border);
}

/* Odkazy a interaktivní zelené texty — světlejší v dark */
html.dark a,
html.dark .card-title a,
html.dark td a[style*="g-600"] {
  color: #81C784 !important;
}

/* Ale když je `<a>` zároveň barevné tlačítko, text musí zůstat bílý —
   jinak v dark módu dostane zelený text na zeleném pozadí (neviditelné) */
html.dark a.btn--primary,
html.dark a.btn--danger,
html.dark a.btn--orange {
  color: #fff !important;
}

/* Ghost tlačítko v dark — viditelnější */
html.dark .btn--ghost {
  color: var(--text);
  border-color: var(--border-2);
}
html.dark .btn--ghost:hover { background: var(--bg-2); }

/* Flash zprávy — v dark pozadí transparentnější */
html.dark .flash--success { background: rgba(46,125,50,0.20); color: #A5D6A7; border: 1px solid rgba(46,125,50,0.45); }
html.dark .flash--error   { background: rgba(192,57,43,0.20); color: #F5998B; border: 1px solid rgba(192,57,43,0.45); }

/* Dark toggle tlačítko v sidebaru */
.theme-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 7px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  transition: background .15s;
  padding: 0;
}
.theme-toggle:hover { background: rgba(255,255,255,.1); }
.theme-toggle svg { width: 16px; height: 16px; }

/* Ikona "slunce" vs "měsíc" — ukazuje se jen ta správná */
html.dark .theme-toggle__sun   { display: block; }
html.dark .theme-toggle__moon  { display: none; }
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: block; }

/* Flash banner v dark módu v layoutu */
html.dark .flash { border-radius: 8px; padding: 10px 14px; font-size: 14px; }

/* Stats karty (dashboard) v dark — border-color barevných variant */
html.dark .sc.green  { border-color: rgba(46,125,50,0.50); }
html.dark .sc.orange { border-color: rgba(232,114,28,0.50); }
html.dark .sc.red    { border-color: rgba(192,57,43,0.50); }

/* Timer bar (oranžový) — v dark zesílit kontrast textu */
html.dark .timer-bar { color: #fff; }

/* Scrollbar v dark — jemnější */
html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
html.dark ::-webkit-scrollbar-track { background: var(--bg); }
html.dark ::-webkit-scrollbar-thumb { background: #2C3033; border-radius: 6px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #3D4145; }

/* Dark mode: hover a active musí být vizuálně lépe rozlišitelné.
   Default hodnoty rgba(255,255,255,0.08) vs 0.15 jsou v tmavém prostředí
   příliš blízko u sebe. */
html.dark .nav-item:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
}
html.dark .nav-item.active {
  background: rgba(46,125,50,0.35);
  color: #fff;
  font-weight: 500;
  box-shadow: inset 3px 0 0 var(--o-600);
}

/* ═══════════════════════════════════════════════════════════
   1.9.15 – Layout robustnost na úzkém desktopu / vyšším zoomu
   ───────────────────────────────────────────────────────────
   Audit Bělá 2026-05 odhalil, že několik komponent má správné
   nowrap/ellipsis pravidla v ≤640px media query, ale chybí jim
   na desktopu. V zóně 700-1100px CSS šířky (= cca 1024px viewport
   při browser zoomu 1.125×, což odpovídá uživatelovu screenshotu)
   se rozpadne timer-bar, quick-cards a entry-rows.

   Pravidla níže nepřepisují existující CSS — jen doplňují
   missing white-space / flex / overflow rules. Mobile media
   query je dál přebíjí, takže <640px chování beze změn.
   ═══════════════════════════════════════════════════════════ */

/* Timer bar — dlouhý název klienta nesmí wrapnout a vytlačit
   Stop button mimo bar. */
.timer-client {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.timer-stop-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Page header sticky offset.
   Timer-bar i page-header měly `position: sticky; top: 0`. Při scrollu
   timer-bar (z-index 50) překrýval page-header (z-index 40) → action
   tlačítka mizela. Když je timer-bar přítomný (active session),
   page-header se musí stickovat 42px pod ním.

   :has() — Chrome 105+ (08/2022), Safari 15.4+ (03/2022),
   Firefox 121+ (12/2023). Bez :has() zůstává `top: 0` jako fallback
   (= původní bugové chování pre-1.9.15, ale alespoň nic nerozbije). */
.main-wrap:has(> .timer-bar) .page-header { top: 42px; }

/* Quick action cards — title/sub se nesmějí překrývat ani vytékat.
   Před 1.9.15 byl tento fix jen v ≤640px media query, ale 3-sloupcový
   grid se rozpadá už okolo 800-900px. */
.quick-card > :last-child {
  flex: 1 1 auto;
  min-width: 0;
}
.quick-card__title,
.quick-card__sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Entry rows — čas a doba trvání nesmí wrapnout uprostřed čísla.
   "08:00–10:30" zalomené na "08:00–" + "10:30" je nečitelné.
   "1h 28m" zalomené na "1h" + "28m" rozbíjí výškové zarovnání řádků. */
.entry-time { white-space: nowrap; }
.entry-dur  { white-space: nowrap; min-width: 52px; }

/* ─────────────────────────────────────────────────────────────
   Switch (posuvník) — toggle pro boolean volby ve formulářích.
   Čistě CSS (žádný JS) — checkbox + label, accessible.
   Zaveden v 1.9.22 pro „Skrýt přehled sazeb na PDF" u ruční faktury.
   ───────────────────────────────────────────────────────────── */
.switch-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.switch-field__text { flex: 1; min-width: 0; }
.switch-field__label { font-size: 14px; font-weight: 500; color: var(--text); }
.switch-field__hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__track {
  position: absolute;
  inset: 0;
  cursor: pointer;
  background: #c7ccc9;
  border-radius: 24px;
  transition: background .18s ease;
}
.switch__track::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.switch input:checked + .switch__track { background: var(--g-600); }
.switch input:checked + .switch__track::before { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--g-600); outline-offset: 2px; }

/* ════════════════════════════════════════════════════════════
   Fakturace — finanční kokpit (1.9.30). Token-based → dark mode OK.
   ════════════════════════════════════════════════════════════ */
.inv-cockpit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.fin-card { display: flex; align-items: flex-start; gap: 12px; }
.fin-card--green  { background: var(--g-50); }
.fin-card--orange { background: var(--o-50); }
.fin-card--red    { background: var(--white); }
.fin-card--red.is-active { background: var(--r-50); border-color: var(--r-100); }
.fin-card__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; line-height: 1;
}
.fin-card__icon--green  { background: var(--g-100); color: var(--g-700); }
.fin-card__icon--orange { background: var(--o-100); color: var(--o-700); }
.fin-card__icon--red    { background: var(--r-100); color: var(--r-700); }
.fin-card__body { flex: 1; min-width: 0; }

/* Toolbar: záložky + hledání */
.inv-toolbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: space-between;
}
.inv-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.inv-tab {
  background: transparent; border: 0.5px solid transparent;
  color: var(--muted); padding: 6px 12px; border-radius: 8px;
  font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.inv-tab:hover { background: var(--bg-2); color: var(--text); }
.inv-tab.is-active {
  background: var(--g-600); color: #fff; border-color: var(--g-600);
}
.inv-tab__count {
  font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 10px;
  background: var(--bg-2); color: var(--muted); min-width: 18px; text-align: center;
}
.inv-tab.is-active .inv-tab__count { background: rgba(255,255,255,0.25); color: #fff; }
.inv-search { position: relative; flex: 1; min-width: 220px; max-width: 360px; }
.inv-search__icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 14px; pointer-events: none;
}
.inv-search input {
  width: 100%; padding: 8px 10px 8px 30px; font-size: 13px;
  border: 0.5px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); font-family: inherit;
}

/* Seznam faktur — řádky-karty */
.inv-list-head, .inv-row {
  display: grid;
  grid-template-columns: minmax(0,1.5fr) minmax(0,1.5fr) 1fr 1.2fr 0.9fr 1fr 40px;
  align-items: center; gap: 10px;
}
.inv-list-head {
  padding: 10px 14px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 0.5px solid var(--border);
}
.inv-row {
  padding: 12px 14px; border-bottom: 0.5px solid var(--border);
  position: relative; transition: background .1s;
}
.inv-row:last-child { border-bottom: none; }
.inv-row:hover { background: var(--bg-2); }
.inv-row.is-overdue { background: var(--r-50); border-left: 3px solid var(--r-600); }
.inv-row__num { display: flex; align-items: flex-start; gap: 9px; }
.inv-row__file { color: var(--muted); font-size: 16px; line-height: 1.2; }
.inv-row__numlink { font-weight: 600; color: var(--g-600); font-variant-numeric: tabular-nums; display: block; }
.inv-row__vs { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }
.inv-row__client { display: flex; flex-direction: column; min-width: 0; }
.inv-row__client > span:first-child { font-weight: 500; }
.inv-row__addr { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-row__date, .inv-row__due { font-size: 13px; color: var(--muted); display: flex; flex-direction: column; }
.inv-row__due > span:first-child { color: var(--text); }
.inv-row__rel { font-size: 11px; margin-top: 1px; }
.inv-row__rel--bad { color: var(--r-600); }
.inv-row__rel--ok  { color: var(--g-600); }
.inv-row__amount { font-weight: 600; text-align: right; }
.inv-row__amount.is-bad { color: var(--r-600); }
.inv-row__menu { display: flex; justify-content: flex-end; }
.inv-empty-filter { padding: 28px 14px; text-align: center; color: var(--muted); font-size: 14px; }

/* Kebab přes <details> — bez JS */
.inv-menu { position: relative; }
.inv-menu summary {
  list-style: none; cursor: pointer; width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 7px; color: var(--muted); font-size: 18px; user-select: none;
}
.inv-menu summary::-webkit-details-marker { display: none; }
.inv-menu summary:hover { background: var(--bg-2); color: var(--text); }
.inv-menu__pop {
  position: absolute; right: 0; top: 32px; z-index: 30;
  background: var(--white); border: 0.5px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 200px; padding: 5px; display: flex; flex-direction: column;
}
.inv-menu__pop a, .inv-menu__pop button {
  text-align: left; background: transparent; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--text);
  padding: 8px 10px; border-radius: 7px; text-decoration: none; width: 100%;
}
.inv-menu__pop a:hover, .inv-menu__pop button:hover { background: var(--bg-2); }
.inv-menu__pop form { margin: 0; }
.inv-menu__danger { color: var(--r-600) !important; }

/* Responzivita */
@media (max-width: 1100px) { .inv-cockpit { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) {
  .inv-list-head { display: none; }
  .inv-row {
    grid-template-columns: 1fr auto; grid-auto-rows: min-content;
    row-gap: 4px; padding: 14px;
  }
  .inv-row__num     { grid-column: 1; grid-row: 1; }
  .inv-row__status  { grid-column: 2; grid-row: 1; justify-self: end; }
  .inv-row__client  { grid-column: 1 / -1; grid-row: 2; }
  .inv-row__date    { grid-column: 1; grid-row: 3; flex-direction: row; gap: 6px; }
  .inv-row__date::before { content: "Vystaveno:"; color: var(--muted); }
  .inv-row__due     { grid-column: 1 / -1; grid-row: 4; flex-direction: row; gap: 6px; flex-wrap: wrap; }
  .inv-row__amount  { grid-column: 1; grid-row: 5; text-align: left; font-size: 18px; }
  .inv-row__menu    { grid-column: 2; grid-row: 5; align-items: center; }
  .inv-cockpit { grid-template-columns: 1fr; }
}

/* ── Detail faktury — dokument vlevo, sticky akční panel vpravo (1.9.31) ── */
.inv-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.inv-detail__doc { overflow: hidden; }
.inv-side {
  position: sticky; top: 70px;
  display: flex; flex-direction: column; gap: 12px;
}
.inv-side__card, .inv-side__total, .inv-side__actions, .inv-side__qr {
  background: var(--white); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
}
.inv-side__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inv-side__num { font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-side__label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.inv-side__client { margin-top: 14px; padding-top: 14px; border-top: 0.5px solid var(--border); font-size: 14px; }
.inv-side__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; font-size: 14px; }
.inv-side__total { background: var(--g-50); border-color: var(--g-100); }
.inv-side__total-val { font-size: 24px; font-weight: 600; color: var(--g-600); line-height: 1.1; margin-top: 2px; }
.inv-side__actions { display: flex; flex-direction: column; gap: 8px; }
.inv-side__actions form { margin: 0; }
.inv-side__danger { color: var(--r-600); }
.inv-side__qr { text-align: center; }
.inv-side__qr-img { display: flex; align-items: center; justify-content: center; margin: 8px 0 6px; }
.inv-side__qr-img svg { width: 130px; height: 130px; }

@media (max-width: 980px) {
  .inv-detail { grid-template-columns: 1fr; }
  .inv-side { position: static; top: auto; order: -1; }
}

/* ── Editor ruční faktury — dvousloupcový + živá rekapitulace (1.9.32) ── */
.inv-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px; align-items: start;
}
.inv-editor__main { min-width: 0; }
.inv-editor__side { position: sticky; top: 70px; }

.invoice-items-head, .invoice-item-row {
  display: grid;
  grid-template-columns: 2.2fr 0.8fr 0.7fr 0.9fr 1fr 32px;
  gap: 8px;
}
.invoice-items-head {
  font-size: 11px; color: var(--muted); font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase; margin-bottom: 6px; padding: 0 2px;
}
.invoice-item-row { align-items: center; margin-bottom: 8px; }
.invoice-item-sub {
  display: flex; align-items: center; justify-content: flex-end;
  background: var(--bg); font-weight: 500; color: var(--g-700);
  font-variant-numeric: tabular-nums;
}
.invoice-item-del { padding: 4px 8px; color: var(--r-600); min-width: auto; }

/* Živá rekapitulace */
.inv-recap {
  background: var(--white); border: 0.5px solid var(--border);
  border-radius: var(--radius-lg); padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.inv-recap__title { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.inv-recap__row { display: flex; justify-content: space-between; align-items: baseline; }
.inv-recap__sum { font-size: 24px; font-weight: 600; color: var(--g-600); font-variant-numeric: tabular-nums; }
.inv-recap__note {
  font-size: 13px; color: var(--muted); line-height: 1.5;
  background: var(--bg); border-radius: 8px; padding: 10px 12px;
}
.inv-recap__meta { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.inv-recap__actions { display: flex; flex-direction: column; gap: 8px; }
.inv-recap__actions form { margin: 0; }

@media (max-width: 980px) {
  .inv-editor { grid-template-columns: 1fr; }
  .inv-editor__side { position: static; top: auto; }
}
/* Mobil: položky jako karty (inline grid je teď třída → media query ji přebije) */
@media (max-width: 720px) {
  .invoice-items-head { display: none; }
  .invoice-item-row {
    grid-template-columns: 1fr 1fr 1fr;
    border: 0.5px solid var(--border); border-radius: 10px;
    padding: 10px; gap: 8px; position: relative; margin-bottom: 10px;
  }
  .invoice-item-row > input[name$="[description]"] { grid-column: 1 / -1; }
  .invoice-item-sub { grid-column: 1 / -1; justify-content: flex-start; }
  .invoice-item-del { position: absolute; top: 6px; right: 6px; }
}

/* ── Faktura ze záznamů — průvodce (1.9.33) ── */
.entry-norate { background: var(--o-50); }
.inv-create-foot {
  padding: 14px 16px; border-top: 0.5px solid var(--border); background: var(--bg);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-size: 14px; flex-wrap: wrap;
}

/* ── Fakturace index — 2 sloupce, filtr, stránkování, banner (1.9.35) ── */
.inv-index-grid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; align-items: start; }
.inv-index-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.inv-filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inv-period { width: 140px; font-size: 13px; padding: 7px 8px; }
.inv-row[data-sel-href] { cursor: pointer; }
.inv-row.is-selected { box-shadow: inset 3px 0 0 var(--g-600); background: var(--g-50); }
.inv-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 2px; }
.inv-pagination__links { display: flex; gap: 4px; flex-wrap: wrap; }
.inv-banner {
  display: flex; gap: 12px; align-items: center;
  background: var(--g-50); border: 0.5px solid var(--g-100);
  border-radius: var(--radius-lg); padding: 14px 16px;
}
.inv-banner__icon { font-size: 20px; flex-shrink: 0; }
@media (max-width: 980px) {
  .inv-index-grid { grid-template-columns: 1fr; }
  .inv-index-grid .inv-side { position: static; top: auto; order: 0; }
}

/* ── Dashboard graf „Posledních 7 dní" (1.9.37) ── */
.dash-chart {
  padding: 18px 20px 14px;
  display: flex; align-items: flex-end; gap: 8px;
  height: 140px;
}
.dash-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.dash-chart__cap { font-size: 12px; color: var(--muted); white-space: nowrap; line-height: 1; min-height: 12px; }
.dash-chart__bar {
  width: 100%; max-width: 48px; background: var(--g-600);
  border-radius: 5px 5px 0 0; transition: height .3s ease, opacity .2s;
}
.dash-chart__bar.is-today { background: var(--o-600); }
.dash-chart__bar.is-empty { opacity: .15; }
.dash-chart__bar:hover { opacity: .85; }
.dash-chart__day { font-size: 13px; color: var(--muted); }
.dash-chart__day.is-today { color: var(--o-600); font-weight: 600; }

/* ── Úkoly (1.9.41) ── */
.task-add { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.task-add__row { display: flex; gap: 8px; align-items: center; }
.task-add__row input { flex: 1; }
.task-mic { flex: 0 0 auto; padding: 8px 10px; display: inline-flex; align-items: center; }
.task-mic.is-listening { color: var(--r-600); border-color: var(--r-600); }
.task-add__row2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.task-add__row2 .form-select { max-width: 260px; }
.task-add__more { display: flex; gap: 12px; flex-wrap: wrap; }
.task-add__more .form-group { flex: 0 0 auto; }
.task-list { display: flex; flex-direction: column; }
.task-row { display: flex; gap: 12px; align-items: flex-start; padding: 11px 14px; border-bottom: 0.5px solid var(--border); }
.task-row:last-child { border-bottom: none; }
.task-check { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--border); background: var(--white); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: transparent; padding: 0; transition: background .12s, border-color .12s; }
.task-check:hover { border-color: var(--g-600); }
.task-check.done { background: var(--g-600); border-color: var(--g-600); color: #fff; }
.task-main { flex: 1; min-width: 0; }
.task-title { font-size: 14px; color: var(--text); line-height: 1.4; }
.task-row.is-done .task-title { color: var(--muted); text-decoration: line-through; }
.task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.task-del-form { flex: 0 0 auto; }
.task-del { background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; opacity: .6; }
.task-del:hover { color: var(--r-600); background: var(--r-50); opacity: 1; }
@media (max-width: 640px) { .task-add__row2 .form-select { max-width: none; flex: 1; } }

/* ── Kalendář (1.9.43) ── */
.cal-card { padding: 0; overflow: hidden; }
.cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-bottom: 0.5px solid var(--border); }

/* Filtr klient/projekt v toolbaru (1.9.71) */
.cal-filter { display: flex; gap: 6px; }
.form-select--sm { padding: 5px 26px 5px 9px; font-size: 13px; height: auto; min-height: 32px; max-width: 180px; }

/* FAB — rychlé přidání záznamu (1.9.71) */
.cal-fab {
  position: fixed; right: 22px; bottom: 22px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%; border: none;
  background: var(--g-600); color: #fff; font-size: 28px; line-height: 1;
  cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.28);
  display: none;   /* desktop: skryto, na desktopu je v toolbaru "+ Záznam" */
}
.cal-fab:hover { background: var(--g-700); }
@media (max-width: 900px) {
  .cal-fab { display: flex; align-items: center; justify-content: center; }
}
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-navbtn { width: 30px; height: 30px; border: 0.5px solid var(--border); background: var(--white); border-radius: 8px; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text); }
.cal-navbtn:hover { background: var(--bg); border-color: var(--g-600); }
.cal-period { font-size: 14px; font-weight: 600; margin-left: 8px; text-transform: capitalize; }
.cal-views { margin-left: auto; }
.cal-loading { padding: 40px; text-align: center; color: var(--muted); font-size: 13px; }

/* chip (záznam i úkol) */
.cal-chip { font-size: 11px; line-height: 1.3; padding: 2px 6px; border-radius: 5px; border-left: 3px solid var(--muted); background: var(--bg); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.cal-chip b { font-weight: 600; font-variant-numeric: tabular-nums; }
.cal-chip.is-onsite { background: var(--o-50); border-left-color: var(--o-600); }
.cal-chip.is-remote { background: var(--g-50); border-left-color: var(--g-600); }
.cal-chip.is-travel { background: var(--r-50); border-left-color: var(--r-600); }
.cal-chip.is-hybrid { background: var(--bg); border-left-color: var(--muted); }
.cal-chip--task { border-left-style: dashed; font-style: italic; }
.cal-chip--task.is-prio-high { border-left-color: var(--r-600); }
.cal-chip--task.is-prio-med { border-left-color: var(--o-600); }
.cal-chip--task.is-done { opacity: .5; text-decoration: line-through; }
.cal-more { font-size: 10px; color: var(--muted); padding: 1px 6px; }

/* MĚSÍC */
.cal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 0.5px solid var(--border); }
.cal-dow > div { padding: 6px 8px; font-size: 11px; color: var(--muted); font-weight: 600; text-align: left; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-cell { min-width: 0; min-height: 96px; border-right: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); padding: 4px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; }
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:hover { background: var(--bg); }
.cal-cell.is-other { background: color-mix(in srgb, var(--bg) 60%, transparent); }
.cal-cell.is-other .cal-cell__day { color: var(--muted); opacity: .6; }
.cal-cell.is-today .cal-cell__day { background: var(--g-600); color: #fff; }
.cal-cell__day { font-size: 12px; font-weight: 600; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-cell__items { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* TÝDEN / DEN */
.cal-tg { display: flex; flex-direction: column; }
.cal-tg__head, .cal-tg__allday { display: grid; grid-template-columns: 56px repeat(var(--cal-cols), minmax(0, 1fr)); }
.cal-tg__head { border-bottom: 0.5px solid var(--border); }
.cal-tg__corner, .cal-tg__alllbl { border-right: 0.5px solid var(--border); }
.cal-tg__alllbl { font-size: 10px; color: var(--muted); padding: 4px 6px; display: flex; align-items: center; }
.cal-tg__dayhead { padding: 7px 8px; font-size: 12px; border-right: 0.5px solid var(--border); text-align: center; cursor: pointer; }
.cal-tg__dayhead.is-today { background: var(--g-50); }
.cal-tg__dow { color: var(--muted); }
.cal-tg__date { font-weight: 600; }
.cal-tg__allday { border-bottom: 0.5px solid var(--border); min-height: 26px; }
.cal-tg__allcell { border-right: 0.5px solid var(--border); padding: 3px; display: flex; flex-direction: column; gap: 2px; }
/* Výška mřížky: vejde se celé okno 6:00–22:00 (16 h × 44px = 704px), aby se
   neuřízly večerní záznamy (1.9.75). Na nízkých displejích scroll zůstává. */
.cal-tg__scroll { display: grid; grid-template-columns: 56px minmax(0, 1fr); max-height: min(704px, calc(100vh - 200px)); overflow-y: auto; }
.cal-tg__axis { display: flex; flex-direction: column; }
.cal-tg__hour { font-size: 10px; color: var(--muted); text-align: right; padding: 0 6px; border-right: 0.5px solid var(--border); border-bottom: 0.5px solid var(--border); box-sizing: border-box; }
.cal-tg__cols { display: grid; grid-template-columns: repeat(var(--cal-cols), minmax(0, 1fr)); }
.cal-tg__col { position: relative; border-right: 0.5px solid var(--border); }
.cal-tg__slot { border-bottom: 0.5px solid var(--border); box-sizing: border-box; cursor: pointer; }
.cal-tg__slot:hover { background: var(--bg); }
.cal-block { position: absolute; left: 2px; right: 2px; border-radius: 6px; padding: 3px 5px; overflow: hidden; font-size: 11px; color: var(--text); border-left: 3px solid var(--muted); background: var(--bg); cursor: pointer; }
.cal-block.is-onsite { background: var(--o-50); border-left-color: var(--o-600); }
.cal-block.is-remote { background: var(--g-50); border-left-color: var(--g-600); }
.cal-block.is-travel { background: var(--r-50); border-left-color: var(--r-600); }
.cal-block__t { font-weight: 600; font-size: 10px; font-variant-numeric: tabular-nums; }
.cal-block__c { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* MODAL */
.cal-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.cal-modal[hidden] { display: none; }
.cal-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.cal-modal__panel { position: relative; background: var(--white); border-radius: 14px; width: min(440px, 92vw); max-height: 90vh; overflow: auto; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.cal-modal__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 0.5px solid var(--border); font-weight: 600; }
.cal-modal__x { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--muted); }
.cal-modal__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.cal-modal__row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; }
.cal-modal__err { background: var(--r-50); color: var(--r-600); font-size: 12px; padding: 7px 10px; border-radius: 7px; }
.cal-modal__foot { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 0.5px solid var(--border); }

@media (max-width: 720px) {
  .cal-cell { min-height: 72px; }
  .cal-views { margin-left: 0; }
  .cal-toolbar { gap: 8px; }
}

/* segment Plán / Hotovo v kalendářovém modalu */
.cal-seg { display: inline-flex; border: 0.5px solid var(--border); border-radius: 8px; overflow: hidden; align-self: flex-start; }
.cal-seg__btn { padding: 6px 16px; font-size: 12px; border: none; background: var(--white); color: var(--muted); cursor: pointer; }
.cal-seg__btn + .cal-seg__btn { border-left: 0.5px solid var(--border); }
.cal-seg__btn.is-active { background: var(--g-600); color: #fff; font-weight: 600; }
.cal-seg__btn:disabled { opacity: .5; cursor: not-allowed; }
/* draft = plán: čárkovaně, světlejší */
.cal-chip.is-draft { border-left-style: dashed; font-style: italic; opacity: .8; }
.cal-block.is-draft { border-style: dashed; opacity: .85; }

/* drag & drop kalendáře */
.cal-chip[data-cal-entry], .cal-chip[data-cal-task], .cal-block { touch-action: none; cursor: grab; }
body.cal-dragging { cursor: grabbing; user-select: none; }
.cal-ghost { box-shadow: 0 10px 26px rgba(0,0,0,.45); opacity: .95; outline: 2px solid var(--g-600); }
.is-drag-src { opacity: .35; }

/* Cíl přesunu (1.9.74) — čistě a přesně:
   - měsíc: jen zřetelný rámeček buňky (žádné zaplavení barvou)
   - týden/den: vodicí linka + bublina s časem se kreslí JS elementem .cal-drop-ind */
.cal-cell.is-drop-target {
  outline: 2px solid var(--g-600); outline-offset: -2px;
  background: var(--g-50);
}
.cal-tg__col.is-drop-target { background: color-mix(in srgb, var(--g-600) 8%, transparent); }

/* Plovoucí indikátor místa dropu (JS, position:fixed) */
.cal-drop-ind {
  position: fixed; height: 0; z-index: 2100; pointer-events: none;
  border-top: 3px solid var(--g-600);
  box-shadow: 0 0 0 1px var(--white);
}
.cal-drop-ind__t {
  position: absolute; left: 0; top: -11px;
  background: var(--g-600); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* tlačítko editace úkolu */
.task-edit { flex: 0 0 auto; background: none; border: none; color: var(--muted); cursor: pointer; padding: 4px; border-radius: 6px; opacity: .6; }
.task-edit:hover { color: var(--g-600); background: var(--g-50); opacity: 1; }
/* QR platba v klientském portálu (1.9.60) */
.u-b-0_5px-solid-border { border: 0.5px solid var(--border) !important; }

/* ── Offline stránka (přesunuto z <style> v offline.html, 1.9.62 — CSP) ── */
body.offline-page { background: var(--nav-900, #10243E); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.offline-card { background: var(--white, #fff); border-radius: 16px; padding: 40px 32px; max-width: 400px; width: 100%; text-align: center; }
.offline-icon { width: 64px; height: 64px; background: var(--o-50, #FFF3E8); border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.offline-title { font-size: 20px; font-weight: 500; color: var(--text, #1A1A1A); margin-bottom: 8px; }
.offline-sub { font-size: 14px; color: var(--muted, #6B7280); line-height: 1.6; margin-bottom: 24px; }
.offline-features { background: var(--bg, #F5F6F4); border-radius: 10px; padding: 16px; text-align: left; margin-bottom: 24px; }
.offline-features__label { font-size: 14px; font-weight: 500; color: var(--muted, #6B7280); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; }
.offline-feature { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--text, #1A1A1A); }
.offline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g-600, #087F6A); flex-shrink: 0; }
.btn-retry { background: var(--g-600, #087F6A); color: #fff; border: none; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; cursor: pointer; width: 100%; }
.btn-retry:hover { background: #066A59; }
.offline-add-link { display: block; margin-top: 12px; font-size: 14px; color: var(--g-600, #087F6A); }

/* ── Tisk (přesunuto z <style> v locations/qr.php, 1.9.62 — CSP).
   Globálně: při tisku jakékoliv stránky skrýt navigaci a akční tlačítka. ── */
@media print {
  .page-header__actions, .sidebar { display: none; }
}

/* Součty hodin v hlavičce kalendáře (1.9.60) */
.cal-tg__sum { display: block; font-size: 11px; color: var(--muted); font-weight: 500; }
.cal-tg__corner .cal-tg__sum { padding: 4px 6px; text-align: right; }

/* ── Dashboard widgety (1.9.66) ───────────────────────────────── */
.dash-widgets-menu { position: relative; }
.dash-widgets-menu__panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
  min-width: 230px; background: var(--white); border: 0.5px solid var(--border-2);
  border-radius: var(--radius-lg); box-shadow: 0 8px 24px rgba(0,0,0,.18);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
/* display:flex výše by jinak přebilo UA default pro [hidden] → panel by byl
   vidět trvale (bug 1.9.66) */
.dash-widgets-menu__panel[hidden] { display: none; }
.dash-widgets-menu__title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dash-widgets-menu__panel .form-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }

/* Mini denní kalendář (widget Dnešní den) */
.dash-tl { padding: 4px 0; }
.dash-tl__row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 16px; text-decoration: none; color: var(--text);
  border-bottom: 0.5px solid var(--border);
}
.dash-tl__row:last-child { border-bottom: none; }
.dash-tl__row:hover { background: var(--bg); }
.dash-tl__time { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 88px; }
.dash-tl__bar { width: 4px; height: 22px; border-radius: 2px; flex-shrink: 0; }
.dash-tl__label { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-task .task-check { margin-right: 2px; }

/* Cash-flow widget (1.9.66) */
.cf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); }
.cf-cell { background: var(--white); padding: 14px 16px; }
.cf-cell__label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 6px; }
.cf-cell__val { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cf-cell__val--over { color: var(--r-600); }
.cf-total { padding: 12px 16px; font-size: 13px; color: var(--muted); border-top: 0.5px solid var(--border); }
@media (max-width: 700px) { .cf-grid { grid-template-columns: repeat(2, 1fr); } }

/* One-click potvrzení draftu v kalendáři (1.9.62) */
.cal-confirm { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 3px; border-radius: 4px; background: var(--g-600, #2E7D32); color: #fff; font-size: 10px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.cal-confirm:hover { background: var(--g-800, #1B5E30); }

/* „Spustit timer z úkolu" — <a> varianta .task-edit (1.9.60) */
.task-timer { display: inline-flex; align-items: center; text-decoration: none; }
.task-timer:hover { color: var(--o-600); background: var(--o-50); }

/* resize handle bloku v kalendáři */
.cal-block { padding-bottom: 6px; }
.cal-block__resize { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; touch-action: none; }
.cal-block__resize::after { content: ''; display: block; width: 22px; height: 3px; margin: 2px auto 0; border-radius: 2px; background: currentColor; opacity: .3; }
.cal-block.is-resizing { opacity: .92; box-shadow: 0 4px 12px rgba(0,0,0,.18); }

/* Seznam faktur: nechat kebab nabídku „vykouknout" z karty (jinak ji overflow:hidden ořízne u posledního řádku) */
.inv-list-card { overflow: visible; }
.inv-list-card .inv-list { border-bottom-left-radius: var(--radius-lg); border-bottom-right-radius: var(--radius-lg); }

/* ════════════════════════════════════════════════════════════
   Utility classes — generováno migrací inline stylů (1.9.59).
   !important: nahrazují inline style="" (nejvyšší specificita),
   theme-*.css se načítá PO app.css, takže theme !important pravidla
   vyhrávají stejně jako dřív vyhrávala nad inline styly.
   ════════════════════════════════════════════════════════════ */
.u-ai-baseline { align-items: baseline !important; }
.u-ai-center { align-items: center !important; }
.u-ai-flex-end { align-items: flex-end !important; }
.u-ai-flex-start { align-items: flex-start !important; }
.u-align-self-flex-end { align-self: flex-end !important; }
.u-bg-xc0392b { background: #C0392B !important; }
.u-bg-xe8721c { background: #E8721C !important; }
.u-bg-xfff3e8 { background: #FFF3E8 !important; }
.u-bg-none { background: none !important; }
.u-bg-rgba-0-0-0-_05 { background: rgba(0,0,0,.05) !important; }
.u-bg-rgba-255-255-255-_1 { background: rgba(255,255,255,.1) !important; }
.u-bg-bg { background: var(--bg) !important; }
.u-bg-bg-2 { background: var(--bg-2) !important; }
.u-bg-g-50 { background: var(--g-50) !important; }
.u-bg-g-800 { background: var(--g-800) !important; }
.u-bg-gm { background: var(--gm) !important; }
.u-bg-muted { background: var(--muted) !important; }
.u-bg-o-50 { background: var(--o-50) !important; }
.u-bg-o-600 { background: var(--o-600) !important; }
.u-bg-r-50 { background: var(--r-50) !important; }
.u-bg-white { background: var(--white) !important; }
.u-bb-0_5px-solid-border { border-bottom: 0.5px solid var(--border) !important; }
.u-bb-0_5px-solid-o-100 { border-bottom: 0.5px solid var(--o-100) !important; }
.u-bb-1px-solid-border { border-bottom: 1px solid var(--border) !important; }
.u-bb-3px-solid-g-800 { border-bottom: 3px solid var(--g-800) !important; }
.u-bcol-collapse { border-collapse: collapse !important; }
.u-bc-xffd8b8 { border-color: #FFD8B8 !important; }
.u-bc-g-100 { border-color: var(--g-100) !important; }
.u-bc-o-100 { border-color: var(--o-100) !important; }
.u-bc-r-200 { border-color: var(--r-200) !important; }
.u-bl-3px-solid-muted { border-left: 3px solid var(--muted) !important; }
.u-bl-3px-solid-o-600 { border-left: 3px solid var(--o-600) !important; }
.u-br-10px { border-radius: 10px !important; }
.u-br-12px { border-radius: 12px !important; }
.u-br-14px { border-radius: 14px !important; }
.u-br-16px { border-radius: 16px !important; }
.u-br-18px { border-radius: 18px !important; }
.u-br-3px { border-radius: 3px !important; }
.u-br-4px { border-radius: 4px !important; }
.u-br-50pct { border-radius: 50% !important; }
.u-br-6px { border-radius: 6px !important; }
.u-br-7px { border-radius: 7px !important; }
.u-br-8px { border-radius: 8px !important; }
.u-br-radius { border-radius: var(--radius) !important; }
.u-br-radius-lg { border-radius: var(--radius-lg) !important; }
.u-br2-0_5px-solid-border { border-right: 0.5px solid var(--border) !important; }
.u-bt-0_5px-solid-border { border-top: 0.5px solid var(--border) !important; }
.u-bt-1px-solid-border { border-top: 1px solid var(--border) !important; }
.u-bt-2px-solid-g-800 { border-top: 2px solid var(--g-800) !important; }
.u-b-none { border: none !important; }
.u-c-x7a3a08 { color: #7A3A08 !important; }
.u-c-xc0392b { color: #C0392B !important; }
.u-c-xe8721c { color: #E8721C !important; }
.u-c-xfff { color: #fff !important; }
.u-c-inherit { color: inherit !important; }
.u-c-rgba-255-255-255-_4 { color: rgba(255,255,255,.4) !important; }
.u-c-rgba-255-255-255-_5 { color: rgba(255,255,255,.5) !important; }
.u-c-g-600 { color: var(--g-600) !important; }
.u-c-g-700 { color: var(--g-700) !important; }
.u-c-g-800 { color: var(--g-800) !important; }
.u-c-gm { color: var(--gm) !important; }
.u-c-hint { color: var(--hint) !important; }
.u-c-muted { color: var(--muted) !important; }
.u-c-o-100 { color: var(--o-100) !important; }
.u-c-o-600 { color: var(--o-600) !important; }
.u-c-o-700 { color: var(--o-700) !important; }
.u-c-r-600 { color: var(--r-600) !important; }
.u-c-r-700 { color: var(--r-700) !important; }
.u-c-rm { color: var(--rm) !important; }
.u-c-text { color: var(--text) !important; }
.u-cur-default { cursor: default !important; }
.u-cur-not-allowed { cursor: not-allowed !important; }
.u-cur-pointer { cursor: pointer !important; }
.u-d-block { display: block !important; }
.u-d-flex { display: flex !important; }
.u-d-grid { display: grid !important; }
.u-d-inline { display: inline !important; }
.u-d-inline-flex { display: inline-flex !important; }
.u-d-none { display: none !important; }
.u-fdir-column { flex-direction: column !important; }
.u-fshrink-0 { flex-shrink: 0 !important; }
.u-fwrap-wrap { flex-wrap: wrap !important; }
.u-flex-0-0-110px { flex: 0 0 110px !important; }
.u-flex-0-0-160px { flex: 0 0 160px !important; }
.u-flex-0-0-auto { flex: 0 0 auto !important; }
.u-flex-1 { flex: 1 !important; }
.u-flex-2 { flex: 2 !important; }
.u-ff-monospace { font-family: monospace !important; }
.u-ff-var-font-mono-monospace { font-family: var(--font-mono,monospace) !important; }
.u-fs-12px { font-size: 12px !important; }
.u-fs-13px { font-size: 13px !important; }
.u-fs-14px { font-size: 14px !important; }
.u-fs-15px { font-size: 15px !important; }
.u-fs-17px { font-size: 17px !important; }
.u-fs-18px { font-size: 18px !important; }
.u-fs-20px { font-size: 20px !important; }
.u-fs-28px { font-size: 28px !important; }
.u-fs-32px { font-size: 32px !important; }
.u-fs-64px { font-size: 64px !important; }
.u-fst-italic { font-style: italic !important; }
.u-font-variant-numeric-tabular-nums { font-variant-numeric: tabular-nums !important; }
.u-fw-400 { font-weight: 400 !important; }
.u-fw-500 { font-weight: 500 !important; }
.u-fw-600 { font-weight: 600 !important; }
.u-gap-10px { gap: 10px !important; }
.u-gap-12px { gap: 12px !important; }
.u-gap-14px { gap: 14px !important; }
.u-gap-16px { gap: 16px !important; }
.u-gap-20px { gap: 20px !important; }
.u-gap-3px { gap: 3px !important; }
.u-gap-4px { gap: 4px !important; }
.u-gap-6px { gap: 6px !important; }
.u-gap-7px { gap: 7px !important; }
.u-gap-8px { gap: 8px !important; }
.u-grid-column-1-1 { grid-column: 1/-1 !important; }
.u-grid-column-span-2 { grid-column: span 2 !important; }
.u-gtc-1fr-1fr { grid-template-columns: 1fr 1fr !important; }
.u-gtc-1fr-1fr-1fr { grid-template-columns: 1fr 1fr 1fr !important; }
.u-gtc-repeat-2-1fr { grid-template-columns: repeat(2,1fr) !important; }
.u-gtc-repeat-2-minmax-0-1fr { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
.u-gtc-repeat-3-1fr { grid-template-columns: repeat(3,1fr) !important; }
.u-gtc-repeat-3-minmax-0-1fr { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
.u-gtc-repeat-4-1fr { grid-template-columns: repeat(4,1fr) !important; }
.u-h-10px { height: 10px !important; }
.u-h-32px { height: 32px !important; }
.u-h-38px { height: 38px !important; }
.u-h-40px { height: 40px !important; }
.u-h-44px { height: 44px !important; }
.u-h-48px { height: 48px !important; }
.u-h-56px { height: 56px !important; }
.u-h-72px { height: 72px !important; }
.u-jc-center { justify-content: center !important; }
.u-jc-flex-end { justify-content: flex-end !important; }
.u-jc-space-between { justify-content: space-between !important; }
.u-ls-0_5px { letter-spacing: -0.5px !important; }
.u-ls-_05em { letter-spacing: .05em !important; }
.u-ls-_08em { letter-spacing: .08em !important; }
.u-lh-1 { line-height: 1 !important; }
.u-lh-1_5 { line-height: 1.5 !important; }
.u-lh-1_6 { line-height: 1.6 !important; }
.u-lh-1_7 { line-height: 1.7 !important; }
.u-lh-1_8 { line-height: 1.8 !important; }
.u-lh-32px { line-height: 32px !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-10px { margin-bottom: 10px !important; }
.u-mb-12px { margin-bottom: 12px !important; }
.u-mb-14px { margin-bottom: 14px !important; }
.u-mb-16px { margin-bottom: 16px !important; }
.u-mb-18px { margin-bottom: 18px !important; }
.u-mb-20px { margin-bottom: 20px !important; }
.u-mb-24px { margin-bottom: 24px !important; }
.u-mb-2px { margin-bottom: 2px !important; }
.u-mb-3px { margin-bottom: 3px !important; }
.u-mb-4px { margin-bottom: 4px !important; }
.u-mb-6px { margin-bottom: 6px !important; }
.u-mb-8px { margin-bottom: 8px !important; }
.u-ml-10px { margin-left: 10px !important; }
.u-ml-12px { margin-left: 12px !important; }
.u-ml-4px { margin-left: 4px !important; }
.u-ml-6px { margin-left: 6px !important; }
.u-ml-8px { margin-left: 8px !important; }
.u-ml-auto { margin-left: auto !important; }
.u-mr-6px { margin-right: 6px !important; }
.u-mt-10px { margin-top: 10px !important; }
.u-mt-12px { margin-top: 12px !important; }
.u-mt-14px { margin-top: 14px !important; }
.u-mt-16px { margin-top: 16px !important; }
.u-mt-20px { margin-top: 20px !important; }
.u-mt-2px { margin-top: 2px !important; }
.u-mt-3px { margin-top: 3px !important; }
.u-mt-4px { margin-top: 4px !important; }
.u-mt-6px { margin-top: 6px !important; }
.u-mt-8px { margin-top: 8px !important; }
.u-m-0 { margin: 0 !important; }
.u-m-0-8px-6px { margin: 0 8px 6px !important; }
.u-m-0-auto { margin: 0 auto !important; }
.u-m-0-auto-16px { margin: 0 auto 16px !important; }
.u-m-0-auto-24px { margin: 0 auto 24px !important; }
.u-m-12px-0-8px { margin: 12px 0 8px !important; }
.u-m-12px-14px-0 { margin: 12px 14px 0 !important; }
.u-maxh-240px { max-height: 240px !important; }
.u-maxw-180px { max-width: 180px !important; }
.u-maxw-200px { max-width: 200px !important; }
.u-maxw-240px { max-width: 240px !important; }
.u-maxw-380px { max-width: 380px !important; }
.u-maxw-400px { max-width: 400px !important; }
.u-maxw-480px { max-width: 480px !important; }
.u-maxw-540px { max-width: 540px !important; }
.u-maxw-560px { max-width: 560px !important; }
.u-maxw-600px { max-width: 600px !important; }
.u-maxw-640px { max-width: 640px !important; }
.u-maxw-760px { max-width: 760px !important; }
.u-minh-100vh { min-height: 100vh !important; }
.u-minw-0 { min-width: 0 !important; }
.u-minw-120px { min-width: 120px !important; }
.u-minw-140px { min-width: 140px !important; }
.u-minw-160px { min-width: 160px !important; }
.u-minw-200px { min-width: 200px !important; }
.u-minw-220px { min-width: 220px !important; }
.u-minw-280px { min-width: 280px !important; }
.u-minw-40px { min-width: 40px !important; }
.u-minw-48px { min-width: 48px !important; }
.u-minw-80px { min-width: 80px !important; }
.u-op-_6 { opacity: .6 !important; }
.u-op-_7 { opacity: .7 !important; }
.u-ofy-auto { overflow-y: auto !important; }
.u-of-hidden { overflow: hidden !important; }
.u-pb-10px { padding-bottom: 10px !important; }
.u-pb-14px { padding-bottom: 14px !important; }
.u-pt-14px { padding-top: 14px !important; }
.u-pt-16px { padding-top: 16px !important; }
.u-pt-8px { padding-top: 8px !important; }
.u-p-0 { padding: 0 !important; }
.u-p-0-8px-8px { padding: 0 8px 8px !important; }
.u-p-10px-0 { padding: 10px 0 !important; }
.u-p-10px-0-0 { padding: 10px 0 0 !important; }
.u-p-10px-12px { padding: 10px 12px !important; }
.u-p-10px-14px { padding: 10px 14px !important; }
.u-p-10px-24px { padding: 10px 24px !important; }
.u-p-12px { padding: 12px !important; }
.u-p-12px-14px { padding: 12px 14px !important; }
.u-p-12px-16px { padding: 12px 16px !important; }
.u-p-14px { padding: 14px !important; }
.u-p-14px-16px { padding: 14px 16px !important; }
.u-p-14px-18px { padding: 14px 18px !important; }
.u-p-14px-20px { padding: 14px 20px !important; }
.u-p-14px-32px { padding: 14px 32px !important; }
.u-p-16px { padding: 16px !important; }
.u-p-16px-20px { padding: 16px 20px !important; }
.u-p-16px-32px { padding: 16px 32px !important; }
.u-p-1px-4px { padding: 1px 4px !important; }
.u-p-1px-5px { padding: 1px 5px !important; }
.u-p-20px { padding: 20px !important; }
.u-p-20px-24px { padding: 20px 24px !important; }
.u-p-20px-32px { padding: 20px 32px !important; }
.u-p-24px { padding: 24px !important; }
.u-p-24px-32px { padding: 24px 32px !important; }
.u-p-28px-24px { padding: 28px 24px !important; }
.u-p-2px-0 { padding: 2px 0 !important; }
.u-p-32px { padding: 32px !important; }
.u-p-32px-24px { padding: 32px 24px !important; }
.u-p-3px-0 { padding: 3px 0 !important; }
.u-p-3px-10px { padding: 3px 10px !important; }
.u-p-40px { padding: 40px !important; }
.u-p-4px { padding: 4px !important; }
.u-p-4px-0 { padding: 4px 0 !important; }
.u-p-4px-7px { padding: 4px 7px !important; }
.u-p-6px-13px { padding: 6px 13px !important; }
.u-p-6px-8px { padding: 6px 8px !important; }
.u-p-6px-8px-2px { padding: 6px 8px 2px !important; }
.u-p-8px { padding: 8px !important; }
.u-p-8px-10px { padding: 8px 10px !important; }
.u-p-8px-14px { padding: 8px 14px !important; }
.u-p-9px-16px { padding: 9px 16px !important; }
.u-ta-center { text-align: center !important; }
.u-ta-left { text-align: left !important; }
.u-ta-right { text-align: right !important; }
.u-td-none { text-decoration: none !important; }
.u-td-underline { text-decoration: underline !important; }
.u-text-overflow-ellipsis { text-overflow: ellipsis !important; }
.u-tt-uppercase { text-transform: uppercase !important; }
.u-va-middle { vertical-align: middle !important; }
.u-ws-nowrap { white-space: nowrap !important; }
.u-w-1pct { width: 1% !important; }
.u-w-100pct { width: 100% !important; }
.u-w-10px { width: 10px !important; }
.u-w-130px { width: 130px !important; }
.u-w-200px { width: 200px !important; }
.u-w-32px { width: 32px !important; }
.u-w-40px { width: 40px !important; }
.u-w-44px { width: 44px !important; }
.u-w-48px { width: 48px !important; }
.u-w-56px { width: 56px !important; }
.u-w-60px { width: 60px !important; }
.u-w-72px { width: 72px !important; }
.u-w-80px { width: 80px !important; }
.u-wb-break-all { word-break: break-all !important; }
.u-combo-1 { padding:6px 8px !important; border-radius:7px !important; background:none !important; border:none !important; color:rgba(255,255,255,.4) !important; cursor:pointer !important; }
.u-combo-2 { font-size:14px !important; padding:4px 8px !important; border:0.5px solid var(--border) !important; border-radius:6px !important; background:var(--bg) !important; }
.u-combo-3 { width:56px !important; height:56px !important; margin:0 auto 16px !important; border-radius:14px !important; background:#fff !important; border:0.5px solid var(--border) !important; display:flex !important; align-items:center !important; justify-content:center !important; }
.u-combo-4 { flex:1 !important; display:flex !important; align-items:center !important; gap:7px !important; padding:6px 8px !important; border-radius:7px !important; background:none !important; border:none !important; color:rgba(255,255,255,.6) !important; font-size:14px !important; cursor:pointer !important; position:relative !important; transition:background .12s !important; }
.u-combo-5 { padding:6px 8px !important; border-radius:7px !important; background:none !important; border:none !important; color:rgba(255,255,255,.4) !important; cursor:pointer !important; transition:background .12s !important; }
.u-combo-6 { background:var(--g-50) !important; border:0.5px solid var(--g-100) !important; border-radius:var(--radius-lg) !important; padding:16px !important; margin-bottom:14px !important; }
.u-combo-7 { display:inline-block !important; padding:16px !important; background:white !important; border-radius:12px !important; border:0.5px solid var(--border) !important; }
.u-combo-8 { background:var(--g-50) !important; border:0.5px solid var(--g-100) !important; border-radius:var(--radius-lg) !important; padding:14px 16px !important; font-size:14px !important; color:var(--g-800) !important; margin-bottom:4px !important; }
.u-combo-9 { max-height:90px !important; max-width:180px !important; border:0.5px solid var(--border) !important; border-radius:6px !important; padding:8px !important; background:#fff !important; }
.u-combo-10 { margin:0 !important; margin-left:auto !important; }
.u-combo-11 { background:var(--o-50) !important; border:0.5px solid var(--o-100) !important; border-radius:var(--radius-lg) !important; padding:12px 16px !important; display:flex !important; align-items:center !important; gap:12px !important; }

/* ══════════════════════════════════════════════════════════════
   WorkTrack Professional — sjednocená prezentační vrstva 1.14.13
   Tato vrstva zachovává původní PHP/JS kontrakty a upravuje pouze vzhled.
   ══════════════════════════════════════════════════════════════ */

/* Shell a navigace */
.app-shell,
.app {
  min-width: 0;
  min-height: 100vh;
  background: var(--bg);
}

.app { display: flex; }

.sidebar {
  width: var(--sidebar-w);
  background: var(--nav-900);
  border-right: 1px solid rgba(255,255,255,.06);
  box-shadow: 10px 0 32px rgba(10,23,41,.08);
}

.sidebar-logo {
  min-height: 68px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.09);
}

.logo-mark,
.sidebar-logo-mark,
.login-logo-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--g-600);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.logo-mark,
.sidebar-logo-mark { width: 36px; height: 36px; border-radius: 11px; }
.logo-mark svg,
.sidebar-logo-mark svg,
.login-logo-mark svg { margin: auto; }

.logo-name,
.sidebar-logo-name { color: #fff; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.logo-sub,
.sidebar-logo-sub { color: #8FA6BA; font-size: 11px; }

.sidebar-nav { gap: 2px; padding: 12px 10px 18px; }
.nav-section {
  margin: 15px 10px 5px;
  padding: 0;
  color: #7891A7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
}
.nav-item {
  position: relative;
  min-height: 40px;
  padding: 8px 11px;
  color: #B8C8D5;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  transition: color .16s ease, background .16s ease, transform .16s ease;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); transform: translateX(1px); }
.nav-item.active {
  color: #fff;
  background: rgba(13,153,126,.24);
  box-shadow: inset 3px 0 0 var(--g-600);
  font-weight: 700;
}
.nav-icon { width: 18px; height: 18px; opacity: .9; }
.nav-badge { min-width: 22px; padding: 2px 6px; font-size: 10px; font-weight: 800; text-align: center; }
.sidebar-bottom { padding: 12px; }
.user-pill { min-height: 54px; padding: 9px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; background: var(--g-600); font-size: 11px; }
.user-name { font-size: 12px; }
.user-role { color: #8FA6BA; font-size: 11px; }
.theme-toggle,
.sidebar-hoverable { display: inline-grid; place-items: center; }

.main-wrap,
.content { min-width: 0; flex: 1; background: var(--bg); }

/* Mobilní horní lišta */
.mobile-topbar {
  min-height: 58px;
  padding: 8px 14px;
  background: var(--nav-950);
  border-bottom: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
}
.mobile-topbar__brand { font-weight: 750; letter-spacing: -.01em; }
.menu-toggle { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.mobile-topbar__theme {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-left: auto;
  padding: 0;
  color: #dbe6ee;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
}
.mobile-topbar__theme svg { width: 18px; height: 18px; margin: auto; }

/* Hlavička a obsah stránky */
.page-header,
.topbar {
  background: color-mix(in srgb, var(--white) 96%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(12,29,48,.02);
  backdrop-filter: blur(14px);
}
.page-header__inner,
.topbar {
  width: 100%;
  max-width: none;
  min-height: 68px;
  margin: 0;
  padding: 14px 28px;
}
.page-title,
.ptitle {
  color: var(--text);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 780;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.page-header__actions { flex-wrap: wrap; gap: 8px; }
.page-body,
.main {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 24px 28px 40px;
  gap: 16px;
}

/* Tlačítka a ovládací prvky */
.btn,
.bprim,
.bghost {
  appearance: none;
  min-height: 40px;
  justify-content: center;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 720;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  transition: color .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.btn:hover,
.bprim:hover,
.bghost:hover { transform: translateY(-1px); }
.btn:active,
.bprim:active,
.bghost:active { transform: translateY(0); }
.btn--primary,
.bprim { color: #fff; background: var(--g-600); border: 1px solid var(--g-600); }
.btn--primary:hover,
.bprim:hover { color: #fff; background: var(--g-800); border-color: var(--g-800); box-shadow: var(--shadow-md); }
.btn--ghost,
.bghost { color: var(--text-2); background: var(--white); border: 1px solid var(--border-2); }
.btn--ghost:hover,
.bghost:hover { color: var(--brand-link); background: var(--g-50); border-color: var(--g-100); }
.btn--danger { border: 1px solid var(--r-600); }
.btn--orange { border: 1px solid var(--o-600); }
.btn--sm { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.btn svg { width: 16px; height: 16px; }

/* Karty */
.card,
.form-card,
.sec,
.inv-side__card,
.inv-side__total,
.inv-side__actions,
.inv-side__qr {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.card-header,
.form-card__header,
.sh {
  min-height: 58px;
  padding: 15px 18px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 68%, var(--white)), var(--white));
  border-bottom: 1px solid var(--border);
}
.card-title,
.form-card__header,
.st { color: var(--text); font-size: 14px; font-weight: 750; letter-spacing: -.01em; }
.form-card__body { padding: 20px; }

.card-link {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 7px 12px;
  color: var(--brand-link);
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--g-100) 75%, var(--border));
  border-radius: 9px;
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.card-link:hover { color: var(--brand-link); background: var(--g-50); border-color: var(--g-100); text-decoration: none; transform: translateY(-1px); }

/* KPI */
.stats-grid,
.inv-cockpit { gap: 14px; }
.stat-card,
.sc {
  min-width: 0;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.fin-card,
.fin-card--green,
.fin-card--orange,
.fin-card--red { background: var(--white); }
.fin-card--red.is-active { background: color-mix(in srgb, var(--r-50) 60%, var(--white)); }
.fin-card__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  line-height: 1;
}
.stat-card__label,
.slbl { margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 650; }
.stat-card__value,
.sval { color: var(--text); font-size: 24px; font-weight: 780; line-height: 1.2; letter-spacing: -.025em; }
.stat-card__sub,
.ssub { margin-top: 4px; color: var(--muted); font-size: 11px; }

/* Rychlé akce */
.quick-actions { gap: 14px; }
.quick-card {
  position: relative;
  min-width: 0;
  min-height: 76px;
  padding: 15px 52px 15px 15px;
  gap: 14px;
  overflow: hidden;
  color: var(--text);
  background: linear-gradient(135deg, var(--white), color-mix(in srgb, var(--g-50) 28%, var(--white)));
  border: 1px solid var(--border);
  border-radius: 15px;
  box-shadow: var(--shadow-sm);
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.quick-card::after {
  position: absolute;
  right: 16px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding-bottom: 2px;
  color: var(--brand-link);
  background: color-mix(in srgb, var(--g-50) 66%, var(--bg-2));
  border: 1px solid color-mix(in srgb, var(--g-100) 62%, var(--border));
  border-radius: 9px;
  content: "›";
  font-size: 20px;
  font-weight: 760;
  line-height: 1;
  transform: translateY(-50%);
  transition: transform .16s ease;
}
.quick-card:hover { border-color: var(--g-100); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.quick-card:hover::after { transform: translate(2px,-50%); }
.quick-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  color: var(--brand-link);
  background: var(--g-50);
  border: 1px solid color-mix(in srgb, var(--g-100) 70%, transparent);
  border-radius: 13px;
}
.quick-card__icon--orange,
.quick-card__icon--red { color: var(--brand-link); background: var(--g-50); }
.quick-card__icon svg { width: 20px; height: 20px; margin: auto; }
.quick-card__copy { flex: 1 1 auto; min-width: 0; }
.quick-card__title { color: var(--text); font-size: 12px; font-weight: 760; line-height: 1.35; }
.quick-card__sub { color: var(--muted); font-size: 10px; line-height: 1.4; }

/* Seznamy, stavy a tabulky */
.entry-row,
.er { min-width: 0; min-height: 58px; padding: 11px 18px; gap: 11px; border-bottom: 1px solid var(--border); }
.entry-row:hover,
.er:hover { background: color-mix(in srgb, var(--bg-2) 70%, transparent); }
.entry-client,
.ecl { color: var(--text); font-size: 12px; font-weight: 700; }
.entry-desc,
.edesc,
.entry-time { color: var(--muted); font-size: 10px; }
.entry-dur { font-size: 11px; font-weight: 750; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 780;
}
.badge--green { color: var(--brand-link); border-color: var(--g-100); }
.badge--orange { border-color: var(--o-100); }
.badge--red { border-color: var(--r-100); }
.table-wrap { max-width: 100%; border-radius: inherit; overscroll-behavior-inline: contain; }
.table th { padding: 10px 14px; color: var(--muted); background: var(--bg-2); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 800; letter-spacing: .055em; text-transform: uppercase; }
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 12px; }
.table tbody tr:hover td { background: color-mix(in srgb, var(--bg-2) 72%, transparent); }

/* Formuláře */
.form-grid { gap: 16px; }
.form-label,
.fld label { color: var(--text-2); font-size: 11px; font-weight: 750; letter-spacing: .01em; }
.form-input,
.form-select,
.form-textarea,
.fld input,
.fld select,
.fld textarea {
  min-height: 42px;
  padding: 9px 11px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  font-size: 13px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-textarea,
.fld textarea { min-height: 96px; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus,
.fld input:focus,
.fld select:focus,
.fld textarea:focus {
  border-color: var(--g-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-600) 16%, transparent);
}
.form-hint { color: var(--muted); font-size: 11px; }
.form-error { font-size: 11px; font-weight: 650; }
.form-actions { gap: 10px; padding-top: 10px; }

/* Timer */
.timer-bar {
  min-height: 54px;
  height: auto;
  padding: 8px 24px;
  color: #4D3506;
  background: var(--o-50);
  border-bottom: 1px solid var(--o-100);
  box-shadow: var(--shadow-sm);
}
.timer-dot { background: var(--o-500); box-shadow: 0 0 0 5px color-mix(in srgb, var(--o-500) 17%, transparent); }
.timer-label,
.timer-client { color: var(--text-2); font-size: 11px; }
.timer-client { color: var(--text); font-weight: 700; }
.timer-elapsed { color: var(--text); font-size: 18px; font-weight: 760; }
.timer-stop-btn { min-height: 36px; padding: 7px 12px; color: #fff; background: var(--r-600); border: 1px solid var(--r-600); border-radius: 9px; font-size: 11px; font-weight: 760; }
.timer-stop-btn:hover { background: var(--r-700); }
.main-wrap:has(> .timer-bar) .page-header { top: 54px; }

/* Přihlášení a klientský portál */
.login-body { padding: 28px 16px; background: radial-gradient(circle at 50% -10%, var(--nav-800), var(--nav-950) 58%); }
.login-wrap { max-width: 420px; gap: 22px; }
.login-logo-mark { width: 44px; height: 44px; border-radius: 13px; }
.login-logo-name { font-size: 21px; font-weight: 780; letter-spacing: -.025em; }
.login-logo-sub { color: #9DB0C1; font-size: 11px; }
.login-card { padding: 30px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; box-shadow: var(--shadow-lg); }
.login-footer { color: #8195A8; font-size: 10px; }
.content { display: flex; flex-direction: column; }
.qr-checkin-body { background: var(--nav-900); }

/* Tmavý režim */
html.dark {
  --white: #111F2E;
  --o-text: #F2C077;
  --r-text: #F1A6AE;
  --bg: #0A1420;
  --bg-2: #162638;
  --border: #294056;
  --border-2: #39536A;
  --text: #F1F6FA;
  --text-2: #C8D5DF;
  --muted: #91A5B7;
  --hint: #758A9D;
  --brand-link: #63DDC3;
  --g-50: #12372F;
  --g-100: #1D5A4E;
  --g-700: #4DD4B6;
  --g-800: #63DDC3;
  --o-50: #3A2B14;
  --o-100: #684C1B;
  --r-50: #3E2027;
  --r-100: #6F2E39;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.22);
  --shadow-md: 0 12px 28px rgba(0,0,0,.26);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.42);
}
html.dark .sidebar { background: var(--nav-900); border-right-color: #243B51; }
html.dark .form-input,
html.dark .form-select,
html.dark .form-textarea,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="tel"],
html.dark input[type="search"],
html.dark input[type="date"],
html.dark input[type="time"],
html.dark select,
html.dark textarea { background: #0D1A27; }
html.dark a.quick-card,
html.dark a.entry-row,
html.dark a.btn { color: inherit !important; }
html.dark a { color: var(--brand-link) !important; }
html.dark .sidebar a.nav-item { color: #B8C8D5 !important; }
html.dark .sidebar a.nav-item:hover,
html.dark .sidebar a.nav-item.active { color: #fff !important; }
html.dark .sidebar a.user-pill { color: inherit !important; }
html.dark a.btn--primary,
html.dark a.btn--danger,
html.dark a.btn--orange { color: #fff !important; }
html.dark .card-link { color: var(--brand-link) !important; }
html.dark .nav-item.active { background: rgba(13,153,126,.24); box-shadow: inset 3px 0 0 var(--g-700); }
html.dark .timer-bar { color: var(--text); }

/* Dark: hover primárních tlačítek nesmí jít na --g-800 (to je světlý
   kontrastní token odkazů) — ztmavujeme místo zesvětlení. Funguje i pro
   theme-midnight (fialová), protože vychází z --g-600. */
html.dark .btn--primary:hover,
html.dark .bprim:hover { color: #fff; background: color-mix(in srgb, var(--g-600) 82%, #000); border-color: color-mix(in srgb, var(--g-600) 82%, #000); }

/* Dark: texty ve značkových 600/700 odstínech → světlé kontrastní tokeny */
html.dark .status--confirmed { color: var(--g-800); }
html.dark .status--confirmed::before { background: var(--g-800); }
html.dark .status--invoiced { color: var(--o-text); }
html.dark .status--invoiced::before { background: var(--o-500, #E89A16); }
html.dark .stat-card--green  .stat-card__value { color: var(--g-800); }
html.dark .stat-card--orange .stat-card__value { color: var(--o-text); }
html.dark .stat-card--red    .stat-card__value { color: var(--r-text); }
html.dark .inv-row__rel--ok  { color: var(--g-800); }
html.dark .inv-row__rel--bad { color: var(--r-text); }
html.dark .inv-side__total-val,
html.dark .inv-recap__sum,
html.dark .invoice-item-sub { color: var(--g-800); }
html.dark .timer-display__time { color: var(--o-500, #E89A16); }
html.dark .dash-chart__day.is-today { color: var(--o-text); }
html.dark .u-c-gm { color: var(--g-800) !important; }
html.dark .u-c-g-600 { color: var(--g-800) !important; }
html.dark .u-c-g-700 { color: var(--g-800) !important; }
html.dark .u-c-o-600 { color: var(--o-text) !important; }
html.dark .u-c-o-700 { color: var(--o-text) !important; }
html.dark .u-c-r-600 { color: var(--r-text) !important; }
html.dark .u-c-r-700 { color: var(--r-text) !important; }

/* Responzivní shell */
@media (max-width: 1024px) {
  .mobile-topbar { display: flex; }
  .sidebar {
    position: fixed;
    z-index: 100;
    inset: 0 auto 0 0;
    width: 256px;
    max-width: 86vw;
    height: 100vh;
    height: 100dvh;
    transform: translateX(-103%);
    transition: transform .2s ease;
  }
  .sidebar.is-open { transform: translateX(0); }
  .main-wrap,
  .content { width: 100%; }
  .timer-bar,
  .page-header { position: static; }
  .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .quick-actions[class*="u-gtc"] { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
}

@media (max-width: 640px) {
  .page-header__inner,
  .topbar { min-height: auto; padding: 14px; }
  .page-title,
  .ptitle { font-size: 21px; }
  .page-body,
  .main { padding: 18px 12px 30px; }
  .stats-grid { gap: 10px; }
  .stat-card,
  .sc { padding: 14px; }
  .stat-card__value,
  .sval { font-size: 20px; }
  .quick-card { min-height: 74px; }
  .quick-actions[class*="u-gtc"] { grid-template-columns: 1fr !important; }
  .card-header,
  .form-card__header,
  .sh { min-height: 54px; padding: 10px 12px; }
  .card-link { min-height: 34px; padding: 6px 9px; }
  .entry-row,
  .er { padding: 10px 12px; }
  .timer-bar { min-height: 46px; padding: 7px 12px; }
  .login-card { padding: 24px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media print {
  .card,
  .form-card,
  .sec { box-shadow: none; }
  .card-link,
  .quick-actions { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   WorkTrack Professional — přesná aplikační kostra a dashboard
   ═══════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Horní aplikační lišta */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  flex: 0 0 auto;
  min-height: 68px;
  color: var(--text-2);
  background: color-mix(in srgb, var(--white) 97%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(12,29,48,.03);
  backdrop-filter: blur(16px);
}
.app-topbar__inner {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 68px;
  padding: 11px 20px;
  gap: 12px;
}
.app-topbar__menu,
.app-topbar__icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.app-topbar__menu:hover,
.app-topbar__icon:hover {
  color: var(--brand-link);
  background: var(--g-50);
  border-color: var(--g-100);
}
.app-topbar__menu:active,
.app-topbar__icon:active { transform: translateY(1px); }
.app-topbar__menu svg,
.app-topbar__icon svg { width: 18px; height: 18px; margin: auto; }
.app-breadcrumb {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}
.app-breadcrumb a { color: var(--muted); }
.app-breadcrumb a:hover { color: var(--brand-link); }
.app-breadcrumb svg { width: 12px; height: 12px; opacity: .65; }
.app-breadcrumb span {
  max-width: 220px;
  overflow: hidden;
  color: var(--text);
  font-weight: 720;
  text-overflow: ellipsis;
}
.app-search {
  display: flex;
  align-items: center;
  width: min(360px, 34vw);
  min-height: 40px;
  margin-left: auto;
  padding: 0 10px;
  gap: 8px;
  color: var(--muted);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.app-search:focus-within {
  background: var(--white);
  border-color: var(--g-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-600) 14%, transparent);
}
.app-search > svg { flex: 0 0 auto; width: 17px; height: 17px; }
.app-search input {
  min-width: 0;
  width: 100%;
  height: 36px;
  padding: 0;
  color: var(--text);
  background: transparent !important;
  border: 0 !important;
  border-radius: 0;
  outline: 0;
  box-shadow: none !important;
  font-size: 11px;
}
.app-search input::placeholder { color: var(--hint); }
.app-search kbd {
  flex: 0 0 auto;
  padding: 2px 6px;
  color: var(--muted);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 9px;
  line-height: 1.4;
}
.app-topbar__actions { display: flex; align-items: center; gap: 8px; }
.app-topbar__icon { position: relative; }
.app-topbar__badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--r-600);
  border: 2px solid var(--white);
  border-radius: 99px;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
}
.app-topbar__badge[hidden] { display: none; }
.app-notifications {
  position: absolute;
  top: calc(100% - 5px);
  right: 20px;
  z-index: 75;
  width: min(360px, calc(100vw - 28px));
  max-height: 390px;
  overflow-y: auto;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
}
.app-notifications__loading { padding: 18px; color: var(--muted); font-size: 11px; text-align: center; }

/* Hlavička je obsah stránky; aplikační lišta zůstává jediným sticky headerem. */
.page-header {
  position: static;
  top: auto;
  z-index: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.page-header__inner {
  min-height: auto;
  padding: 24px 28px 0;
}
.timer-bar { top: 68px; }
.main-wrap:has(> .timer-bar) .page-header { top: auto; }

/* Přesný dashboardový rastr */
.dashboard-heading .page-header__inner {
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
}
.dashboard-heading__copy { flex: 1 1 auto; min-width: 0; }
.dashboard-eyebrow {
  margin-bottom: 5px;
  color: var(--brand-link);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.dashboard-heading .page-title {
  flex: none;
  margin: 0;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 800;
  line-height: 1.12;
}
.dashboard-heading__sub { margin-top: 6px; color: var(--muted); font-size: 11px; }
.dashboard-settings { width: 40px; padding: 0; }
.dashboard-settings svg { width: 17px; height: 17px; }

.dashboard-body {
  display: grid;
  grid-template-columns: minmax(0, 2.05fr) minmax(320px, .92fr);
  grid-template-areas:
    "notice notice"
    "stats stats"
    "quick quick"
    "entries tasks"
    "chart cashflow"
    "calendar calendar"
    "overdue overdue";
  align-items: stretch;
  gap: 16px;
  padding-top: 18px;
}
.dashboard-body > * { min-width: 0; }
.dashboard-body > .dashboard-notices { grid-area: notice; }
.dashboard-body > .stats-grid { grid-area: stats; }
.dashboard-body > .quick-actions { grid-area: quick; }
.dashboard-body > [data-widget="today-entries"] { grid-area: entries; }
.dashboard-body > [data-widget="tasks"] { grid-area: tasks; }
.dashboard-body > [data-widget="week-chart"] { grid-area: chart; }
.dashboard-body > [data-widget="cashflow"] { grid-area: cashflow; }
.dashboard-body > [data-widget="today-cal"] { grid-area: calendar; }
.dashboard-body > [data-widget="overdue"] { grid-area: overdue; }
.dashboard-notices { display: flex; flex-direction: column; min-width: 0; gap: 16px; }
.dashboard-notices:empty { min-height: 0; }

.dashboard-body .stats-grid { gap: 14px; }
.dashboard-body .stat-card,
.dashboard-body .fin-card {
  display: block;
  min-height: 154px;
  padding: 17px;
}
.dashboard-body .fin-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 0 15px;
  border-radius: 10px;
  line-height: 1;
}
.dashboard-body .fin-card__icon svg { width: 19px; height: 19px; margin: auto; }
.dashboard-body .stat-card__label { margin: 0 0 4px; font-size: 10px; }
.dashboard-body .stat-card__value { color: var(--text); font-size: 22px; font-weight: 800; }
.dashboard-body .stat-card__sub { margin-top: 4px; font-size: 9px; }

.dashboard-body .quick-actions { gap: 14px; }
.dashboard-body .quick-card { min-height: 74px; padding-top: 12px; padding-bottom: 12px; }
.dashboard-body .quick-card__icon { width: 40px; height: 40px; flex-basis: 40px; }
.dashboard-body .quick-card__icon svg { width: 18px; height: 18px; margin: auto; }

.dashboard-body .card { min-height: 0; }
.dashboard-body [data-widget="today-entries"],
.dashboard-body [data-widget="tasks"],
.dashboard-body [data-widget="cashflow"] {
  display: flex;
  flex-direction: column;
}
.dashboard-body [hidden] { display: none !important; }
.dashboard-body .card-header {
  flex: 0 0 auto;
  min-height: 64px;
  padding: 14px 16px;
  background: transparent;
}
.dashboard-body .card-title { font-size: 13px; font-weight: 780; }
.card-subtitle { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 520; }
.card-footer {
  display: flex;
  justify-content: flex-end;
  min-height: 54px;
  margin-top: auto;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
}
.card-footer .card-link { align-self: center; }

.dashboard-body [data-widget="today-entries"] .entry-row { min-height: 55px; }
.dashboard-body [data-widget="tasks"] .entry-row {
  display: grid;
  grid-template-columns: 20px minmax(0,1fr) auto;
  min-height: 59px;
  padding: 10px 14px;
}
.dashboard-body [data-widget="tasks"] .entry-client {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 1.3;
}
.dashboard-body [data-widget="tasks"] .entry-desc { margin-top: 3px; }
.dashboard-body [data-widget="tasks"] .badge { justify-self: end; }

.dashboard-body [data-widget="week-chart"] .dash-chart { height: 190px; padding: 28px 22px 16px; }
.dashboard-body [data-widget="week-chart"] .dash-chart__bar { max-width: 42px; }
.dashboard-body [data-widget="week-chart"] .dash-chart__bar.is-today { background: var(--g-600); }
.dashboard-body [data-widget="week-chart"] .dash-chart__day.is-today { color: var(--brand-link); }

.dashboard-body [data-widget="cashflow"] .cf-grid {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0;
  padding: 8px 16px;
  background: transparent;
}
.dashboard-body [data-widget="cashflow"] .cf-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 47px;
  padding: 9px 0;
  gap: 16px;
  border-bottom: 1px solid var(--border);
}
.dashboard-body [data-widget="cashflow"] .cf-cell:last-child { border-bottom: 0; }
.dashboard-body [data-widget="cashflow"] .cf-cell__label {
  margin: 0;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0;
  text-transform: none;
}
.dashboard-body [data-widget="cashflow"] .cf-cell__val { font-size: 11px; font-weight: 760; }
.dashboard-body [data-widget="cashflow"] .cf-total { font-size: 9px; }

/* Sbalitelný desktopový sidebar — tlačítko v horní liště není dekorace. */
@media (min-width: 1025px) {
  .app-shell.is-sidebar-collapsed { --sidebar-w: 78px; }
  .app-shell.is-sidebar-collapsed .sidebar-logo { justify-content: center; padding-inline: 10px; }
  .app-shell.is-sidebar-collapsed .sidebar-logo > div:last-child,
  .app-shell.is-sidebar-collapsed .nav-section,
  .app-shell.is-sidebar-collapsed .nav-badge,
  .app-shell.is-sidebar-collapsed .user-info,
  .app-shell.is-sidebar-collapsed .user-pill__chevron,
  .app-shell.is-sidebar-collapsed .sidebar-actions { display: none; }
  /* !important nutné — wrapper má utility .u-d-flex (display:flex !important) */
  .app-shell.is-sidebar-collapsed .sidebar-bottom .u-p-6px-8px-2px { display: none !important; }
  .app-shell.is-sidebar-collapsed .sidebar-user-row { padding: 0; margin-bottom: 0; }
  /* Popisek (tooltip) potřebuje přetéct mimo položku */
  .app-shell.is-sidebar-collapsed .nav-item { overflow: visible; }
  .app-shell.is-sidebar-collapsed .sidebar-nav { padding-inline: 10px; }
  .app-shell.is-sidebar-collapsed .nav-item {
    justify-content: center;
    min-height: 42px;
    padding-inline: 8px;
    gap: 0;
    overflow: hidden;
    font-size: 0;
  }
  .app-shell.is-sidebar-collapsed .nav-icon { width: 19px; height: 19px; }
  .app-shell.is-sidebar-collapsed .sidebar-bottom { padding: 10px; }
  .app-shell.is-sidebar-collapsed .user-pill { justify-content: center; padding: 8px; }
}

@media (max-width: 1180px) and (min-width: 1025px) {
  .dashboard-body { grid-template-columns: minmax(0,1.55fr) minmax(290px,.9fr); }
  .dashboard-body .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 1024px) {
  .app-topbar {
    display: block;
    position: static;
    min-height: 0;
    height: 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  .app-topbar__inner { display: contents; min-height: 0; padding: 0; }
  .app-topbar__inner > :not(.app-notifications) { display: none; }
  .app-notifications { position: fixed; top: 66px; right: 14px; }
  .dashboard-body {
    grid-template-columns: minmax(0,1fr) minmax(280px,.72fr);
    grid-template-areas:
      "notice notice"
      "stats stats"
      "quick quick"
      "entries tasks"
      "chart cashflow"
      "calendar calendar"
      "overdue overdue";
  }
  .timer-bar { top: 0; }
}

@media (max-width: 760px) {
  .dashboard-heading .page-header__inner { align-items: stretch; flex-direction: column; }
  .dashboard-heading .page-header__actions { width: 100%; }
  .dashboard-heading .page-header__actions .view-tabs { flex: 1 1 auto; }
  .dashboard-heading .page-header__actions .btn--primary { flex: 0 0 auto; }
  .dashboard-body {
    grid-template-columns: 1fr;
    grid-template-areas:
      "notice"
      "stats"
      "quick"
      "entries"
      "tasks"
      "chart"
      "cashflow"
      "calendar"
      "overdue";
  }
}

@media (max-width: 640px) {
  .dashboard-heading .page-header__inner { padding: 18px 12px 0; }
  .dashboard-heading .page-title { font-size: 24px; }
  .dashboard-heading__sub { max-width: 36ch; }
  .dashboard-body { padding-top: 14px; }
  .dashboard-body .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-body .stat-card,
  .dashboard-body .fin-card { min-height: 142px; padding: 14px; }
  .dashboard-body .quick-actions { grid-template-columns: 1fr; }
}

@media (max-width: 400px) {
  .dashboard-body .stats-grid { grid-template-columns: 1fr; }
  .dashboard-heading .page-header__actions { display: grid; grid-template-columns: 1fr auto; }
  .dashboard-heading .page-header__actions .view-tabs { grid-column: 1 / -1; }
}

@media print {
  .app-topbar { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   Dashboard 1:1 — hodnoty převzaté přímo z assets/styles.css
   schváleného WorkTrack Professional prototypu.
   ═══════════════════════════════════════════════════════════ */

/* Shell, sidebar a topbar */
.app-shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr); }
.main-wrap { display: block; min-width: 0; }
.sidebar { width: var(--sidebar-w); box-shadow: none; }
.sidebar-logo { min-height: 68px; padding: 12px 18px; gap: 11px; }
.logo-mark { width: 36px; height: 36px; border-radius: 11px; }
.logo-name { font-size: 15px; font-weight: 700; }
.logo-sub { font-size: 11px; }
.sidebar-nav { gap: 0; padding: 12px 10px 18px; }
.nav-section {
  margin: 18px 10px 7px;
  color: #7891a7;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.nav-section--first { margin-top: 3px; }
.nav-item {
  min-height: 40px;
  margin: 2px 0;
  padding: 8px 11px;
  gap: 11px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 580;
}
.nav-item:hover { transform: none; }
.nav-item.active { background: rgba(13,153,126,.24); box-shadow: inset 3px 0 0 #0b9279; }
.nav-icon { width: 18px; height: 18px; }
.nav-badge { min-width: 22px; padding: 2px 6px; font-size: 11px; }
.sidebar-bottom { padding: 12px; border-top: 1px solid rgba(255,255,255,.09); }
/* Desktop: zvonek + push toggle jsou v topbaru a jeho panelu, akce
   (téma, odhlášení) taky → duplicitní řádky sidebaru skryjeme.
   !important nutné (řádek má utility .u-d-flex). Mobil ≤ 1024 px nemá
   topbar — v draweru řádky zůstávají viditelné (notifikace, push,
   téma, odhlášení). */
@media (min-width: 1025px) {
  .sidebar-bottom > .u-p-6px-8px-2px { display: none !important; }
  .sidebar-actions { display: none; }
}
.sidebar-user-row { padding: 0; }
.user-pill {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  padding: 9px;
  gap: 10px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
}
.user-pill__chevron { width: 16px; height: 16px; flex: 0 0 auto; color: #8fa6ba; }

.app-topbar { min-height: 68px; height: 68px; }
.app-topbar__inner { min-height: 68px; height: 68px; padding: 0 24px; gap: 14px; }
.app-topbar__menu,
.app-topbar__icon { width: 40px; height: 40px; border-radius: 10px; }
.app-breadcrumb { gap: 8px; font-size: 12px; }
.app-search { position: relative; width: min(310px,30vw); min-height: 40px; padding: 0 9px 0 12px; }
.app-search input { height: 38px; padding-right: 64px; font-size: 12px; }
.app-search kbd { position: absolute; right: 9px; top: 8px; font-size: 11px; }

/* Dashboard page je ekvivalent .page z prototypu. */
.dashboard-heading .page-header__inner,
.dashboard-body { width: 100%; max-width: none; margin: 0; }
.dashboard-heading .page-header__inner {
  align-items: flex-start;
  padding: 26px 28px 0;
  gap: 18px;
}
.dashboard-eyebrow { margin-bottom: 5px; font-size: 10px; letter-spacing: .10em; }
.dashboard-heading .page-title { font-size: clamp(22px,2vw,30px); line-height: 1.18; letter-spacing: -.028em; }
.dashboard-heading__sub { max-width: 700px; margin-top: 6px; font-size: 13px; }
.dashboard-heading .page-header__actions { justify-content: flex-end; gap: 8px; }
.dashboard-heading .view-tabs {
  display: inline-flex;
  padding: 3px;
  background: var(--bg-2);
  border: 0;
  border-radius: 10px;
}
.dashboard-heading .view-tab {
  min-height: 34px;
  padding: 6px 12px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
}
.dashboard-heading .view-tab.active { color: var(--text); background: var(--white); box-shadow: var(--shadow-sm); }
/* 1.15.0-9: skrytí ozubeného kolečka zrušeno — v7 parity vrstva ho
   schovala (prototyp ho neměl), čímž zmizel JEDINÝ vstup do menu widgetů
   (viditelnost + Upravit rozložení). Stejná rodina chyb jako logout/push. */
.dashboard-settings { display: inline-grid; }

.dashboard-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 22px 28px 40px;
  gap: 0;
}
.dashboard-notices:not(:empty) { margin-bottom: 16px; }
.dashboard-body > .stats-grid { margin-bottom: 16px; }
.dashboard-body > .quick-actions { margin-bottom: 18px; }
.dashboard-columns {
  display: grid;
  grid-template-columns: minmax(0,1.65fr) minmax(260px,.75fr);
  align-items: start;
  gap: 16px;
  min-width: 0;
}
.dashboard-column { display: grid; align-content: start; gap: 16px; min-width: 0; }
.dashboard-body > [data-widget="today-cal"],
.dashboard-body > [data-widget="overdue"] { margin-top: 16px; }

/* KPI — přesná struktura stat-card z prototypu */
.dashboard-body .stats-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
.dashboard-body .stat-card,
.dashboard-body .fin-card {
  position: relative;
  display: block;
  min-height: 0;
  padding: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.dashboard-body .stat-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-body .fin-card__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0;
  border: 0;
  border-radius: 11px;
}
.dashboard-body .fin-card__icon svg { width: 19px; height: 19px; margin: auto; }
.dashboard-body .stat-card__trend { color: var(--brand-link); font-size: 11px; font-weight: 750; }
.dashboard-body .stat-card__label { margin: 15px 0 0; font-size: 11px; font-weight: 650; }
.dashboard-body .stat-card__value { margin-top: 2px; font-size: 24px; font-weight: 780; line-height: 1.22; }
.dashboard-body .stat-card__sub { margin-top: 4px; font-size: 11px; }

/* Rychlé akce — stejné rozměry jako quick-action */
.dashboard-body .quick-actions { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.dashboard-body .quick-card {
  min-height: 76px;
  padding: 15px 52px 15px 15px;
  gap: 14px;
  border-radius: 15px;
}
.dashboard-body .quick-card__icon {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 13px;
}
.dashboard-body .quick-card__icon svg { width: 20px; height: 20px; margin: auto; }
.dashboard-body .quick-card__title { font-size: 12px; font-weight: 760; line-height: 1.35; }
.dashboard-body .quick-card__sub { margin-top: 3px; font-size: 10px; }

/* Widgetové karty — header/body/footer přímo podle card() prototypu */
.dashboard-columns .card { display: block; min-width: 0; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); }
.dashboard-columns .card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 0;
  padding: 18px 20px;
  gap: 12px;
  background: linear-gradient(180deg,color-mix(in srgb,var(--bg-2) 72%,var(--white)),var(--white));
  border-bottom: 1px solid var(--border);
}
.dashboard-columns .card-title { font-size: 15px; font-weight: 750; letter-spacing: -.01em; }
.dashboard-columns .card-subtitle { margin-top: 4px; font-size: 12px; }
.dashboard-card-body { padding: 20px; }
.dashboard-card-body--chart { padding: 20px; }
.dashboard-columns .card-footer {
  min-height: 60px;
  padding: 11px 18px;
  background: color-mix(in srgb,var(--bg-2) 88%,var(--white));
  border-top: 1px solid var(--border);
}
.dashboard-list { display: grid; min-width: 0; }
.dashboard-list .entry-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: 58px;
  padding: 12px 18px;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.dashboard-list .entry-row:last-child { border-bottom: 0; }
.dashboard-list__icon {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  color: var(--brand-link);
  background: var(--g-50);
  border-radius: 10px;
}
.dashboard-list__icon svg { width: 17px; height: 17px; }
.dashboard-list__icon--active { color: var(--o-700); background: var(--o-50); }
.dashboard-list .entry-client { font-size: 12px; font-weight: 730; }
.dashboard-list .entry-desc { margin-top: 2px; font-size: 10px; }
.dashboard-list .badge { flex: 0 0 auto; }
.dashboard-columns .badge::before {
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  background: currentColor;
  border-radius: 50%;
  content: "";
  opacity: .7;
}
.dashboard-list .dash-task {
  display: flex;
  grid-template-columns: none;
  min-height: 58px;
  padding: 12px 18px;
}
.dashboard-list .dash-task .task-check {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
}
.dashboard-list .dash-task .task-check:hover { color: var(--brand-link); background: var(--g-50); border-color: var(--g-100); }

/* Graf a timeline Cash-flow */
.dashboard-columns [data-widget="week-chart"] .dash-chart {
  display: flex;
  align-items: flex-end;
  height: 190px;
  padding: 22px 8px 4px;
  gap: 14px;
}
.dashboard-columns .dash-chart__col { justify-content: flex-end; gap: 7px; height: 100%; }
.dashboard-columns .dash-chart__cap { min-height: 0; font-size: 9px; font-weight: 700; }
.dashboard-columns .dash-chart__bar {
  width: min(42px,68%);
  min-height: 3px;
  background: var(--g-100);
  border-radius: 7px 7px 3px 3px;
}
.dashboard-columns .dash-chart__bar.is-today { background: var(--g-600); }
.dashboard-columns .dash-chart__day { font-size: 10px; }

.dashboard-timeline { position: relative; display: grid; gap: 15px; }
.dashboard-timeline::before { position: absolute; left: 8px; top: 7px; bottom: 8px; width: 1px; background: var(--border); content: ""; }
.dashboard-timeline__item { position: relative; display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 10px; }
.dashboard-timeline__dot { z-index: 1; width: 9px; height: 9px; margin: 4px; background: var(--g-600); border: 2px solid var(--white); border-radius: 50%; box-shadow: 0 0 0 2px var(--g-100); }
.dashboard-timeline__copy strong,
.dashboard-timeline__copy span { display: block; }
.dashboard-timeline__copy strong { color: var(--text); font-size: 11px; }
.dashboard-timeline__copy span,
.dashboard-timeline__value { color: var(--muted); font-size: 10px; }
.dashboard-timeline__value { white-space: nowrap; }
.dashboard-timeline__value--over { color: var(--r-700); }

@media (max-width: 1100px) {
  .dashboard-body .stats-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-columns { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
  .app-shell { grid-template-columns: minmax(0,1fr); }
  .main-wrap { width: 100%; }
  .sidebar {
    width: 256px;
    max-width: 86vw;
    transform: translateX(-103%);
  }
  .sidebar.is-open { transform: translateX(0); }
}

@media (max-width: 760px) {
  .dashboard-heading .page-header__inner { display: grid; padding: 20px 16px 0; }
  .dashboard-heading .page-header__actions { justify-content: flex-start; }
  .dashboard-body { padding: 16px 16px 28px; }
  .dashboard-body .quick-actions { grid-template-columns: 1fr; }
  .dashboard-columns { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .dashboard-body .stats-grid { grid-template-columns: 1fr; }
  .dashboard-heading .page-header__actions { display: flex; }
  .dashboard-heading .page-header__actions .view-tabs { width: 100%; }
  .dashboard-heading .page-header__actions .view-tab { flex: 1; }
  .dashboard-card-body { padding: 12px; }
  .dashboard-list .entry-row { padding: 10px; }
}

/* ═══════════════════════════════════════════════════════════
   Celoprojektová normalizace layoutu — audit 1.14.13

   Interní obrazovky i klientský portál musí začínat vždy přesně
   28 px od hrany hlavního obsahu. Původní max-width:1536px s
   margin:auto na širokých monitorech vytvářel proměnlivou prázdnou
   mezeru mezi sidebarem a stránkou (na každé obrazovce jinou).
   ═══════════════════════════════════════════════════════════ */
.page-header__inner,
.page-body,
.topbar,
.main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.topbar { flex-wrap: wrap; }
.content { width: 100%; }

/* Tabulky zůstávají ovladatelné dotykem a nikdy neroztahují stránku. */
.table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 640px) {
  .page-header:not(.dashboard-heading) .page-header__inner {
    min-height: auto;
    padding: 18px 12px 0;
  }

  .page-body:not(.dashboard-body),
  .main {
    padding: 18px 12px 30px;
  }

  .topbar {
    align-items: stretch;
    padding: 14px 12px;
    gap: 10px;
  }

  .topbar > form,
  .topbar > .u-d-flex,
  .page-header__actions > form {
    width: 100%;
    min-width: 0;
    flex-wrap: wrap;
  }

  .topbar input,
  .topbar select,
  .page-header__actions input,
  .page-header__actions select {
    min-width: 0;
    flex: 1 1 140px;
  }

  .page-header__actions .u-w-200px { width: 100% !important; }

  /* Utility gridy mají !important; bez stejně silného mobilního
     přepisu zůstávaly na telefonu ve 2–4 stísněných sloupcích. */
  .u-gtc-1fr-1fr,
  .u-gtc-1fr-1fr-1fr,
  .u-gtc-repeat-2-1fr,
  .u-gtc-repeat-2-minmax-0-1fr,
  .u-gtc-repeat-3-1fr,
  .u-gtc-repeat-3-minmax-0-1fr,
  .u-gtc-repeat-4-1fr {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Mobilní vertikální rytmus — Professional v8.
   V režimu draweru nesmí zůstat desktopový 24–26px náběh nad titulkem.
   Horní mobilní lišta už sama vytváří jasné oddělení obsahu. */
@media (max-width: 1024px) {
  /* Pozdní desktopová deklarace nastavovala prázdné app-topbar znovu na
     68 px. Lišta musí v mobilním shellu zabírat 0 px, ale zůstává v DOM,
     aby její fixed notifikační panel mohl dál fungovat. */
  .app-topbar {
    display: block !important;
    position: static !important;
    min-height: 0 !important;
    height: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  .app-topbar__inner {
    display: contents !important;
    min-height: 0 !important;
    height: 0 !important;
    padding: 0 !important;
  }

  .app-topbar__inner > :not(.app-notifications) { display: none !important; }

  .page-header:not(.dashboard-heading) .page-header__inner,
  .dashboard-heading .page-header__inner {
    min-height: auto;
    padding: 12px 20px 0;
  }

  .page-body:not(.dashboard-body),
  .dashboard-body,
  .main {
    padding: 12px 20px 32px;
  }

  .topbar { padding: 12px 20px; }
}

@media (max-width: 640px) {
  .page-header:not(.dashboard-heading) .page-header__inner,
  .dashboard-heading .page-header__inner {
    padding: 8px 12px 0;
  }

  .page-body:not(.dashboard-body),
  .dashboard-body,
  .main {
    padding: 10px 12px 26px;
  }

  .topbar { padding: 10px 12px; }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .page-header:not(.dashboard-heading) .page-header__inner {
    align-items: flex-start;
  }
}


/* ── UI tooltip — sbalený sidebar rail + ikonové akce v topbaru ─────────
   Element vytváří a pozicuje layout.js (position:fixed → neořízne ho
   overflow-y sidebar navu). CSP-safe: žádné inline styly v šablonách. */
.ui-tip {
  position: fixed;
  z-index: 1300;
  max-width: 260px;
  padding: 6px 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: var(--nav-950, #0A1729);
  color: #fff;
  font-size: 12px;
  font-weight: 620;
  letter-spacing: 0;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transform: translate(0, -50%);
  transition: opacity .12s ease;
}
.ui-tip--down { transform: translate(-50%, 0); }
.ui-tip.is-on { opacity: 1; }

/* ── Přihlašovací obrazovka — dělený layout dle schváleného návrhu ────── */
.login-body--split { display: block; padding: 0; background: var(--bg); }
.login-split { display: grid; grid-template-columns: 1.05fr .95fr; min-height: 100vh; }
.login-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  padding: 48px;
  overflow: hidden;
  background: radial-gradient(circle at 78% -12%, var(--nav-800), var(--nav-950) 62%);
  color: #fff;
}
.login-visual::before {
  content: ""; position: absolute; right: -150px; top: -150px; width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(11,146,121,.34), transparent 66%);
}
.login-visual::after {
  content: ""; position: absolute; left: -110px; bottom: -170px; width: 410px; height: 410px;
  background: radial-gradient(circle, rgba(232,154,22,.14), transparent 66%);
}
.login-visual > * { position: relative; z-index: 1; }
.login-visual__brand { display: flex; align-items: center; gap: 12px; }
.login-visual__brand strong { font-size: 17px; letter-spacing: -.01em; }
.login-visual__brand small { display: block; color: #9DB0C1; font-size: 11px; }
.login-visual h1 { max-width: 520px; margin: 0; font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -.035em; line-height: 1.07; }
.login-visual__copy { max-width: 460px; margin-top: 16px; color: #A9BDCD; font-size: 14px; line-height: 1.6; }
.login-points { display: flex; gap: 8px; flex-wrap: wrap; }
.login-points span { padding: 7px 11px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; background: rgba(255,255,255,.055); color: #C5D5E2; font-size: 11px; }
.login-panel { display: grid; place-items: center; padding: 34px; background: var(--bg); }
.login-body--split .login-wrap { max-width: 430px; padding: 0; }
.login-body--split .login-card { border-color: var(--border); box-shadow: var(--shadow-md); }
.login-body--split .login-heading { margin: 0 0 4px; font-size: 24px; font-weight: 780; letter-spacing: -.03em; color: var(--text); }
.login-body--split .login-heading + p { margin: 0 0 8px; color: var(--muted); font-size: 13px; }
.login-body--split .login-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; color: var(--muted); font-size: 11px; }
@media (max-width: 900px) {
  .login-split { grid-template-columns: 1fr; }
  .login-visual { min-height: 240px; gap: 22px; padding: 26px 20px; }
  .login-points { display: none; }
  .login-panel { padding: 26px 16px 40px; }
}


/* ── Skeleton loading ──────────────────────────────────────────────────
   Jednotný načítací stav (kalendář, budoucí async obsahy). Respektuje
   prefers-reduced-motion. */
@keyframes skeleton-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skeleton {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-2) 25%, color-mix(in srgb, var(--bg-2) 55%, var(--white)) 37%, var(--bg-2) 55%) 0 0 / 200% 100%;
  animation: skeleton-sheen 1.4s linear infinite;
  color: transparent;
  user-select: none;
}
.cal-loading {
  position: relative;
  min-height: 132px;
  padding: 18px 16px !important;
  color: transparent !important;
  overflow: hidden;
}
.cal-loading::before, .cal-loading::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--bg-2) 25%, color-mix(in srgb, var(--bg-2) 55%, var(--white)) 37%, var(--bg-2) 55%) 0 0 / 200% 100%;
  animation: skeleton-sheen 1.4s linear infinite;
}
.cal-loading::before { top: 18px; }
.cal-loading::after  { top: 64px; right: 30%; }
@media (prefers-reduced-motion: reduce) {
  .skeleton, .cal-loading::before, .cal-loading::after { animation: none; }
}

/* ── Dotykové cíle ≤ 900 px — min. 44 × 44 px pro interaktivní prvky ── */
@media (max-width: 900px) {
  .menu-toggle { width: 44px; height: 44px; }
  .nav-item { min-height: 44px; }
  .btn, .bprim, .bghost { min-height: 44px; }
  .btn--sm { min-height: 40px; }
  .timer-stop-btn { min-height: 40px; }
  .cal-navbtn { width: 40px; height: 40px; }
  .inv-menu summary { width: 40px; height: 40px; }
  .task-check { width: 24px; height: 24px; }
  .task-del, .task-edit, .task-timer { padding: 10px; }
  .theme-toggle { width: 42px; height: 42px; }
}


/* ── Odhlášení (fix v12) ───────────────────────────────────────────────
   v7 skryl .sidebar-actions (theme toggle šel do topbaru), ale odhlášení
   se do topbaru nepřeneslo → nebylo se kde odhlásit. Logout je nyní
   ikona v topbaru; v mobilním draweru se akce sidebaru zase zobrazují
   (topbar je na mobilu skrytý). */
.app-topbar__logout { display: flex; margin: 0; }
@media (max-width: 1024px) {
  .sidebar-actions { display: flex; }
}


/* Nástroje v panelu notifikací (push opt-in přesunut z sidebaru, v13) */
.app-notifications__tools { padding: 10px 12px; border-bottom: 1px solid var(--line, var(--border)); }
.app-notifications__tools .btn { width: 100%; }


/* ── Timer bar v tmavém režimu (1.15.0-1) ──────────────────────────────
   Jantarový tint --o-50 (#3A2B14) působí v dark jako špinavě hnědá plocha
   přes celou šířku. Dark varianta: navy povrch z palety, jantar zůstává
   jen jako akcent — levá linka, pulzující tečka a čas. Světlý režim
   (jemný krémový tint) se nemění. */
html.dark .timer-bar {
  background: linear-gradient(90deg, rgba(232,154,22,.07), rgba(232,154,22,0) 320px), var(--bg-2);
  border-bottom: 1px solid var(--border);
  box-shadow: inset 3px 0 0 var(--o-500, #E89A16);
}
html.dark .timer-label { color: var(--muted); }
html.dark .timer-client { color: var(--text); }
html.dark .timer-elapsed { color: var(--o-500, #E89A16); }
html.dark .timer-dot { background: var(--o-500, #E89A16); box-shadow: 0 0 0 5px rgba(232,154,22,.14); }

/* Midnight má vlastní zlatý tint (rgba na tmavém podkladu) — tam problém
   není; přebije tato pravidla vlastními tokeny až po načtení theme CSS. */
html.theme-midnight .timer-bar { box-shadow: none; }


/* ── Nastavení — profesionální dvousloupcový layout (1.15.0-2) ─────────
   Dřív: úzké karty 600 px pod sebou u levého okraje, zbytek obrazovky
   prázdný. Teď: hlavní formulář vlevo, doplňkové panely (razítko, logo,
   iCal) ve druhém sloupci; pod 1100 px se skládá do jednoho sloupce. */
.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .75fr);
  gap: 16px;
  align-items: start;
  max-width: 1160px;
}
.settings-main { min-width: 0; }
.settings-side { display: grid; gap: 16px; min-width: 0; align-content: start; }
@media (max-width: 1100px) {
  .settings-layout { grid-template-columns: 1fr; max-width: 760px; }
}

/* ── Hlavička stránky s filtry (Výkaz hodin apod.) — zarovnání ────────
   Labely nad datumovými poli dělaly skupinu vyšší než tlačítka → CSV/
   XLSX/Zpět visely nad linkou inputů. Vše se zarovnává na společnou
   spodní linku a filtry mají kompaktní výšku shodnou s tlačítky. */
.page-header__actions { align-items: flex-end; flex-wrap: wrap; row-gap: 8px; }
.page-header__actions .form-group { gap: 3px; }
.page-header__actions .form-label { font-size: 10px; }
.page-header__actions .form-input,
.page-header__actions .form-select { min-height: 38px; padding: 6px 10px; font-size: 13px; }
.page-header__actions form { align-items: flex-end; }

/* ── Stavové pilulky filtru (Záznamy práce) — 1.15.0-4 ─────────────────
   Dřív inline data-css; aktivní text přebíjelo dark pravidlo
   `html.dark a { color: var(--brand-link) !important }` → tyrkysová
   na tyrkysové. Teď řádná komponenta s explicitní dark výjimkou;
   počet má vlastní kontrastní chip. */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: color .13s, background .13s, border-color .13s;
}
.status-pill:hover { color: var(--brand-link); background: var(--g-50); border-color: var(--g-100); }
.status-pill.is-active {
  background: var(--g-600);
  border-color: var(--g-600);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.status-pill__count {
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  font-size: 11px;
  font-weight: 750;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.status-pill.is-active .status-pill__count { background: rgba(255,255,255,.24); color: #fff; }
/* výjimka z globálního dark obarvení odkazů */
html.dark a.status-pill { color: var(--muted) !important; }
html.dark a.status-pill:hover { color: var(--brand-link) !important; }
html.dark a.status-pill.is-active { color: #fff !important; }
@media (max-width: 900px) { .status-pill { min-height: 40px; } }


/* ── Dashboard: režim „Upravit rozložení" (1.15.0-6) ───────────────────
   Widgety lze přeuspořádat jako na telefonu: šipkami nebo přetažením
   za úchyt (Pointer Events — myš i dotyk). Pořadí i sloupec se ukládá
   per zařízení do localStorage vedle stávající viditelnosti. */
.is-dash-edit [data-widget] {
  position: relative;
  outline: 2px dashed color-mix(in srgb, var(--g-600) 45%, transparent);
  outline-offset: 3px;
}
.is-dash-edit [data-widget].is-dragging {
  opacity: .65;
  outline-style: solid;
  box-shadow: var(--shadow-lg);
  z-index: 20;
}
.dash-widget-tools { display: none; }
.is-dash-edit .dash-widget-tools {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 6;
  display: flex;
  gap: 4px;
  padding: 3px;
  background: color-mix(in srgb, var(--white) 90%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(6px);
}
.dash-tool {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}
.dash-tool:hover { background: var(--g-50); color: var(--brand-link); }
.dash-tool--grab { cursor: grab; touch-action: none; font-size: 15px; }
.is-dragging .dash-tool--grab { cursor: grabbing; }
@media (max-width: 900px) {
  .dash-tool { width: 42px; height: 42px; }
}


/* Offline fronta badge — element obnoven (1.15.0-7); prázdný se neukazuje */
#offline-queue-badge:empty { display: none; }


/* ── Dashboard zóny: celá šířka + drop zóny v editaci (1.15.0-11) ──────
   .dashboard-full = widgety přepnuté na plnou šířku (⤢ v editaci).
   V režimu Upravit rozložení mají VŠECHNY zóny viditelnou minimální
   výšku s nápovědou — jinak nešlo přetáhnout/přesunout widget do
   prázdného sloupce (prázdná zóna měla nulovou plochu). */
.dashboard-full { display: grid; gap: 16px; }
.dashboard-full:not(:empty) { margin-bottom: 16px; }
.dashboard-full:empty { display: none; }

.is-dash-edit .dashboard-full { display: grid; }
.is-dash-edit .dashboard-full:empty { display: block; }
.is-dash-edit .dashboard-full,
.is-dash-edit .dashboard-column {
  min-height: 84px;
  border-radius: 14px;
  outline: 2px dashed var(--border-2, var(--border));
  outline-offset: 2px;
}
.is-dash-edit .dashboard-full:empty,
.is-dash-edit .dashboard-column:empty {
  position: relative;
}
.is-dash-edit .dashboard-full:empty::after,
.is-dash-edit .dashboard-column:empty::after {
  content: "Sem přetáhni widget";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 12px;
}
.is-dash-edit .dashboard-full:empty { margin-bottom: 16px; }

/* ── Skener štítků (1.18.0): pole s nízkou jistotou rozpoznání ── */
.input--low-confidence { border-color: var(--o-500, #f59e0b) !important; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }

/* ── Majetek 1.19.0: životní cyklus ── */
.badge--blue { background: color-mix(in srgb, var(--brand-link) 12%, transparent); color: var(--brand-link); }
html.dark .badge--blue { background: color-mix(in srgb, var(--brand-link) 22%, transparent); }
.qr-box { display: inline-flex; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 8px; }
.qr-box svg { width: 120px; height: 120px; display: block; }