/* H75 Apartmány - Liquid Glass UI v2
 * Paleta: chladná modrosivá + indigo akcent (profi, decentne)
 * Inšpirácia: macOS Sequoia, Linear, Stripe Dashboard
 */

:root {
  /* Base palette */
  --bg-base: #eef1f6;
  --bg-gradient-1: #c7d2e3;
  --bg-gradient-2: #94a3c4;
  --bg-gradient-3: #6b7fa3;

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-bg-hover: rgba(255, 255, 255, 0.78);
  --glass-bg-strong: rgba(255, 255, 255, 0.88);
  --glass-border: rgba(255, 255, 255, 0.55);
  --glass-shadow: 0 8px 32px rgba(30, 41, 82, 0.10);
  --glass-shadow-strong: 0 16px 48px rgba(30, 41, 82, 0.16);

  /* Sidebar - tmavá modrá */
  --sidebar-bg: rgba(24, 31, 56, 0.92);
  --sidebar-text: rgba(255, 255, 255, 0.82);
  --sidebar-text-active: #ffffff;
  --sidebar-item-active: rgba(124, 138, 230, 0.18);

  /* Accent - indigo s mierne fialovým podtonom */
  --accent: #5b6dd8;
  --accent-light: #7c8ae6;
  --accent-dark: #4554b8;
  --accent-glow: rgba(91, 109, 216, 0.32);

  /* Sekundárny akcent (pre niektoré highlights) */
  --accent2: #2dd4bf;
  --accent2-dark: #14b8a6;

  /* Text */
  --text-primary: #1a1f36;
  --text-secondary: #4a5170;
  --text-tertiary: #8088a3;
  --text-on-glass: #1a1f36;

  /* Semantic */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  /* Status colors - decentnejšie */
  --status-cakajuca: #f59e0b;
  --status-potvrdena: #6366f1;
  --status-uhradena: #4f46e5;
  --status-prebiehajuca: #10b981;
  --status-ukoncena: #94a3b8;
  --status-stornovana: #ef4444;
  --status-protinavrh: #a855f7;

  /* Sizing */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Inter", system-ui, sans-serif;
}

/* ===== RESET ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  /* Bránime horizontálnemu odscrolu na iOS Safari */
  position: relative;
  -webkit-text-size-adjust: 100%;  /* Safari nemá meniť veľkosť textu pri rotácii */
}
button { background: none; border: none; cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
ul { list-style: none; }
a { color: inherit; text-decoration: none; }

/* ===== BODY & BACKGROUND ===== */
body {
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(124, 138, 230, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 88% 75%, rgba(45, 212, 191, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 50% 105%, rgba(168, 85, 247, 0.08) 0%, transparent 55%),
    linear-gradient(135deg, #eaf0f9 0%, #dde5f3 35%, #ccd6ea 100%);
  animation: bgShift 28s ease-in-out infinite alternate;
}

@keyframes bgShift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-2%, 2%) scale(1.04); }
  100% { transform: translate(2%, -1%) scale(1.02); }
}

/* ===== LAYOUT ===== */
.app {
  display: grid;
  grid-template-columns: 264px 1fr;
  grid-template-rows: auto 1fr auto;   /* riadok 1: horná lišta, 2: obsah, 3: footer */
  height: 100vh;
  height: 100dvh;            /* iOS Safari: dynamic viewport height bez bottom address bar */
  width: 100%;
  max-width: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.sidebar {
  grid-row: 1 / 4;
  min-width: 0;
  overflow-x: hidden;
}

.desktop-topbar {
  grid-column: 2;
  grid-row: 1;
}

.main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  overflow-x: hidden;
}

.footer {
  grid-column: 2;
  grid-row: 3;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding: 0 24px 16px;
}

/* ===== DESKTOP TOP BAR (jednotná s mobilnou lištou) ===== */
.desktop-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 28px;
  background: rgba(24, 31, 56, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #fff;
  z-index: 50;
}
.desktop-topbar-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.2px;
  margin-right: auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desktop-topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.dt-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  color: #c9cfe6;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dt-search:hover { background: rgba(255, 255, 255, 0.16); }
.dt-search-ic { display: inline-flex; }
.dt-search-label { margin-right: auto; }
.dt-search-kbd {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.14);
  padding: 2px 6px;
  border-radius: 5px;
  color: #dfe3f1;
}
.dt-pr {
  height: 38px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dt-pr:hover { background: rgba(255, 255, 255, 0.18); }
.dt-nova {
  height: 38px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 13px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  border: none;
  border-radius: 9px;
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--accent-glow, rgba(91, 109, 216, 0.4));
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.dt-nova:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-glow, rgba(91, 109, 216, 0.5)); }
.dt-nova-ic { display: inline-flex; }
.dt-icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: transparent;
  border: none;
  color: #dfe3f1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.15s ease;
}
.dt-icon:hover { background: rgba(255, 255, 255, 0.12); }
.dt-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== SIDEBAR ===== */
.sidebar {
  background: var(--sidebar-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  margin: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 22px;
  box-shadow:
    0 16px 48px rgba(20, 25, 50, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sidebar-brand {
  padding: 4px 8px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.sidebar-h75-logo {
  width: 100%;
  max-width: 180px;
  height: auto;
  display: block;
}

.sidebar-by-madapex {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}

.sidebar-by-madapex:hover {
  opacity: 0.85;
}

.sidebar-by-label {
  font-size: 8.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.sidebar-madapex-logo {
  height: 13px;
  width: auto;
  display: block;
  /* Madapex logo je čierne na bielom - invertujeme pre tmavý sidebar */
  filter: invert(1) brightness(1.05);
}

.sidebar-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-top: 4px;
  padding-left: 42px;
}

.sidebar-section-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 12px;
  font-weight: 600;
  margin-top: 8px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--sidebar-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.sidebar-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--sidebar-text-active);
}

.sidebar-item.active {
  background: var(--sidebar-item-active);
  color: var(--sidebar-text-active);
}

.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

.sidebar-item-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 20px;
  opacity: 0.85;
}

.sidebar-item-icon .svg-icon,
.sidebar-item-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.75;
}

.sidebar-item-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-item:hover .sidebar-item-icon,
.sidebar-item.active .sidebar-item-icon {
  opacity: 1;
}

.sidebar-footer {
  margin-top: auto;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
}

/* Klikateľný profil v sidebar footri - zarovnaný s sidebar-item nad ním */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s ease;
  margin-bottom: 6px;
}

.sidebar-user:hover {
  background: rgba(255, 255, 255, 0.06);
}

.sidebar-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-dark) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex: 0 0 28px;
  box-shadow: 0 2px 8px rgba(91, 109, 216, 0.35);
}

.sidebar-user-info {
  min-width: 0;
  flex: 1;
  line-height: 1.2;
}

.sidebar-user-name {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-role {
  margin-top: 2px;
  font-size: 10px;
  color: var(--accent-light);
  font-weight: 500;
}

.sidebar-actions {
  display: flex;
  gap: 6px;
  padding: 0 12px;
}

/* ===== MAIN ===== */
.main {
  overflow-y: auto;
  padding: 24px 32px;
  position: relative;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 4px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-primary);
}

.page-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

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

/* ===== GLASS PANEL ===== */
.glass-panel {
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.glass-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0) 50%);
  pointer-events: none;
  z-index: 0;
}

.glass-panel > * { position: relative; z-index: 1; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  border: 1px solid transparent;
  text-align: center;
}

.btn-primary {
  background: linear-gradient(160deg, rgba(91, 109, 216, 0.22) 0%, rgba(69, 84, 184, 0.15) 100%);
  color: #3b46b8;
  border: 1px solid rgba(91, 109, 216, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 4px 12px -4px rgba(77, 92, 196, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.btn-primary:hover {
  background: linear-gradient(160deg, rgba(91, 109, 216, 0.30) 0%, rgba(69, 84, 184, 0.22) 100%);
  transform: translateY(-1px);
  box-shadow: 0 7px 18px -5px rgba(77, 92, 196, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.btn-secondary {
  /* Zlú miernejšie biele aby presvitalo cez modrastým glass-like, konzistentne
     s ostatnými UI elementami (.report-period-tabs, glass-panel atď.) */
  background: rgba(255, 255, 255, 0.62);
  color: var(--text-primary);
  border: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 2px rgba(30, 41, 82, 0.08), 0 2px 5px rgba(30, 41, 82, 0.06);
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 109, 216, 0.15);
  border-color: rgba(91, 109, 216, 0.25);
}

.btn-secondary:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(30, 41, 82, 0.12);
}

/* Press feedback aj pre primary tlačidlá */
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px -2px rgba(77, 92, 196, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-danger:active {
  transform: translateY(0);
}

html[data-theme="dark"] .btn-secondary {
  background: rgba(40, 50, 80, 0.55);
  color: var(--text-primary);
  border-color: rgba(124, 138, 230, 0.20);
}

html[data-theme="dark"] .btn-secondary:hover {
  background: rgba(60, 70, 100, 0.85);
  border-color: rgba(124, 138, 230, 0.45);
}

.btn-ghost { color: var(--text-secondary); }
.btn-ghost:hover { background: rgba(0, 0, 0, 0.05); }

/* .btn-danger je definovaný nižšie ako plná červená (silný signál pre deštruktívne akcie). */

.btn-warning {
  background: linear-gradient(160deg, rgba(245, 178, 30, 0.22) 0%, rgba(235, 158, 11, 0.14) 100%);
  color: #9a5b08;
  border: 1px solid rgba(235, 170, 20, 0.36);
  box-shadow: 0 4px 12px -4px rgba(232, 160, 18, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-warning:hover {
  background: linear-gradient(160deg, rgba(245, 178, 30, 0.30) 0%, rgba(235, 158, 11, 0.20) 100%);
  transform: translateY(-1px);
  box-shadow: 0 7px 18px -5px rgba(232, 160, 18, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  border-color: rgba(235, 170, 20, 0.5);
}

/* Export / výstupné akcie (CSV, XLSX, tlač) - jemná zelená glass */
.btn-export {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.18) 0%, rgba(22, 163, 74, 0.11) 100%);
  color: #15803d;
  border: 1px solid rgba(34, 197, 94, 0.30);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 4px 12px -4px rgba(34, 160, 90, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.btn-export:hover {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.26) 0%, rgba(22, 163, 74, 0.17) 100%);
  transform: translateY(-1px);
  box-shadow: 0 7px 18px -5px rgba(34, 160, 90, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  border-color: rgba(34, 197, 94, 0.45);
}
.btn-export:active { transform: translateY(0); }
html[data-theme="dark"] .btn-export {
  background: linear-gradient(160deg, rgba(34, 197, 94, 0.24) 0%, rgba(22, 163, 74, 0.16) 100%);
  color: #6ee7a0;
  border-color: rgba(34, 197, 94, 0.40);
}
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(160deg, rgba(124, 138, 230, 0.28) 0%, rgba(91, 109, 216, 0.20) 100%);
  color: #c5cdf5;
  border-color: rgba(124, 138, 230, 0.40);
}
html[data-theme="dark"] .btn-danger {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.26) 0%, rgba(224, 58, 58, 0.18) 100%);
  color: #ffb4b4;
  border-color: rgba(239, 68, 68, 0.40);
}

html[data-theme="dark"] .btn-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.40);
}

html[data-theme="dark"] .btn-warning:hover {
  background: rgba(245, 158, 11, 0.28);
}

/* 1.1.37: btn-soft-primary — jemný variant primary pre sekundárne akcie z rovnakej rodiny
   (napr. "Predbežná rezervácia" vedľa "+ Nová rezervácia") */
.btn-soft-primary {
  background: rgba(91, 109, 216, 0.10);
  color: var(--accent);
  border: 1px solid rgba(91, 109, 216, 0.28);
}

.btn-soft-primary:hover {
  background: rgba(91, 109, 216, 0.18);
  color: var(--accent-dark);
  border-color: rgba(91, 109, 216, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 109, 216, 0.18);
}

.btn-soft-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 3px rgba(91, 109, 216, 0.12);
}

html[data-theme="dark"] .btn-soft-primary {
  background: rgba(124, 138, 230, 0.18);
  color: var(--accent-light);
  border-color: rgba(124, 138, 230, 0.40);
}

html[data-theme="dark"] .btn-soft-primary:hover {
  background: rgba(124, 138, 230, 0.28);
  border-color: rgba(124, 138, 230, 0.60);
}

.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
  border-radius: 8px;
}

/* ===== STATS ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-card { padding: 18px; }

.stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.stat-change {
  font-size: 12px;
  font-weight: 500;
}

.stat-change.up { color: var(--color-success); }
.stat-change.down { color: var(--color-danger); }
.stat-change.neutral { color: var(--text-tertiary); }

.stat-icon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
}

/* ===== TWO COL ===== */
.two-col {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

/* Rovnaké šírky stĺpcov (pre Dashboard Príchody/Odchody dnes) */
.two-col-equal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 1100px) {
  .two-col { grid-template-columns: 1fr; }
  .two-col-equal { grid-template-columns: 1fr; }
}

/* ===== TABLE ===== */
.table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-md);
}

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

thead th {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 2;
}

tbody td {
  padding: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}

tbody tr:hover { background: rgba(255, 255, 255, 0.4); }
tbody tr:last-child td { border-bottom: none; }

.cell-code {
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
}

.cell-actions {
  display: flex;
  gap: 4px;
  justify-content: flex-end;
}

/* ===== STATUS BADGES ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.badge.cakajuca    { background: rgba(245, 158, 11, 0.15);  color: #a16207; }
.badge.potvrdena   { background: rgba(99, 102, 241, 0.15);  color: #4338ca; }
.badge.uhradena    { background: rgba(79, 70, 229, 0.15);   color: #3730a3; }
.badge.prebiehajuca{ background: rgba(16, 185, 129, 0.15);  color: #065f46; }
.badge.ukoncena    { background: rgba(148, 163, 184, 0.20); color: #475569; }
.badge.stornovana  { background: rgba(239, 68, 68, 0.13);   color: #b91c1c; }
.badge.protinavrh  { background: rgba(168, 85, 247, 0.15);  color: #7e22ce; }
.badge.zamietnuta  { background: rgba(239, 68, 68, 0.13);   color: #b91c1c; }
.badge.uvolnena    { background: rgba(148, 163, 184, 0.20); color: #475569; }

/* Priority badges (údržba) */
.badge.nizka       { background: rgba(148, 163, 184, 0.20); color: #475569; }
.badge.stredna     { background: rgba(59, 130, 246, 0.15);  color: #1e40af; }
.badge.vysoka      { background: rgba(245, 158, 11, 0.15);  color: #a16207; }
.badge.kriticka    { background: rgba(239, 68, 68, 0.15);   color: #b91c1c; }

/* Stav údržby */
.badge.nove        { background: rgba(99, 102, 241, 0.15);  color: #4338ca; }
.badge.v-rieseni   { background: rgba(245, 158, 11, 0.15);  color: #a16207; }
.badge.vyriesene   { background: rgba(16, 185, 129, 0.15);  color: #065f46; }
.badge.zrusene     { background: rgba(148, 163, 184, 0.20); color: #475569; }

/* PLATBY - stavy */
.badge.caka        { background: rgba(245, 158, 11, 0.15);  color: #a16207; }
.badge.prijata     { background: rgba(79, 70, 229, 0.15);   color: #3730a3; }
.badge.vratena     { background: rgba(14, 165, 233, 0.15);  color: #075985; }
.badge.zrusena     { background: rgba(148, 163, 184, 0.20); color: #475569; }

/* UPRATOVANIE - stavy */
.badge.cakajuce    { background: rgba(245, 158, 11, 0.15);  color: #a16207; }
.badge.naplanovane { background: rgba(99, 102, 241, 0.15);  color: #4338ca; }
.badge.prebiehajuce{ background: rgba(16, 185, 129, 0.15);  color: #065f46; }
.badge.prebieha    { background: rgba(16, 185, 129, 0.15);  color: #065f46; }
.badge.hotovo      { background: rgba(16, 185, 129, 0.20);  color: #047857; }
.badge.hotove      { background: rgba(16, 185, 129, 0.20);  color: #047857; }
.badge.preskocene  { background: rgba(148, 163, 184, 0.20); color: #475569; }

/* ===== FORMS ===== */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.form-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-control {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-primary);
  transition: all 0.15s ease;
  width: 100%;
  height: 40px;                  /* fixná výška pre konzistentnosť cez všetky typy inputov */
  box-sizing: border-box;
  font-family: inherit;
  -webkit-appearance: none;     /* zhodí natívny vzhľad Safari pre select/number */
  appearance: none;
}

/* Textarea musí mať flexibilnú výšku - prepíše fixnú */
textarea.form-control {
  height: auto;
  min-height: 80px;
  -webkit-appearance: auto;
  appearance: auto;
}

/* Select potrebuje šípku, lebo zrušili sme natívnu */
select.form-control {
  /* Vypnúť natívne dropdown UI v Safari/Chrome aby sa zobrazila naša custom šípka.
     Bez tohto Safari blika medzi natívnou šípkou a CSS background-image. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5170' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
  padding-right: 32px;
  cursor: pointer;
}

html[data-theme="dark"] select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23b8bfd5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Focus state pre select - background-color sa mení ale šípka ostáva.
   Bez tohto by sa background prepísal a šípka zmizla. */
select.form-control:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6dd8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-color: rgba(255, 255, 255, 0.95);
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

html[data-theme="dark"] select.form-control:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237c8ce0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

/* Number input v Safari ukrývame natívne spinner šípky, vykresľujeme vlastný */
input[type="number"].form-control {
  -moz-appearance: textfield;
  appearance: textfield;
}
input[type="number"].form-control::-webkit-outer-spin-button,
input[type="number"].form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Date input v Safari má vlastný štýl, doladíme aby výška sedela */
input[type="date"].form-control,
input[type="time"].form-control,
input[type="datetime-local"].form-control {
  -webkit-appearance: none;
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

/* Explicitne 2-stĺpcový grid (pre formuláre kde chceme presne 2 polia vedľa seba). */
.form-row-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Na úzkych zariadeniach (mobil portrait aj landscape) vždy 1 stĺpec aby sa nič nezalamovalo
   mimo viditeľnej oblasti. */
@media (max-width: 700px) {
  .form-row,
  .form-row-2col {
    grid-template-columns: 1fr;
  }
}

/* iOS Safari default-uje pre input[type="date"] na center alignment, čo robí
   formuláre nekonzistentnými (number inputy vľavo, dátumy v strede).
   Vynútime jednotné ľavé zarovnanie pre všetky form polia. */
.form-control,
input.form-control,
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control,
input[type="number"].form-control,
input[type="text"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control,
input[type="url"].form-control,
input[type="search"].form-control,
select.form-control,
textarea.form-control {
  text-align: left;
}

/* Pre Safari iOS - aby date inputy mali rovnaký vizuálny look ako ostatné */
input[type="date"].form-control,
input[type="datetime-local"].form-control,
input[type="time"].form-control {
  -webkit-min-logical-width: calc(100% - 16px);
  min-height: 40px;
  display: block;
}

/* Pri 100% šírke inputu nech sa placeholder text a vstup od ľavej strany */
input[type="date"].form-control::-webkit-date-and-time-value {
  text-align: left;
  margin: 0;
}

/* Ak je číselný input pravo-zarovnaný (napr. cena, suma), je explicitné CSS */
.form-control.text-right,
input.text-right {
  text-align: right;
}

/* ===== MODAL ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 50, 0.38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  /* Tekuté sklo po vzore macOS: presklený základ + diagonálny lesk + výrazný blur.
     Lesk zaisťuje sklenený dojem aj nad stmaveným overlayom. */
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.12) 45%, rgba(255, 255, 255, 0) 100%),
    rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(48px) saturate(190%);
  -webkit-backdrop-filter: blur(48px) saturate(190%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow:
    var(--glass-shadow-strong),
    0 24px 64px rgba(20, 25, 50, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.70);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: none;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}
.modal::-webkit-scrollbar { width: 0; height: 0; display: none; }

html[data-theme="dark"] .modal {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 45%, rgba(255, 255, 255, 0) 100%),
    rgba(28, 36, 58, 0.62);
  border-color: rgba(124, 138, 230, 0.22);
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.modal-overlay.open .modal { transform: scale(1); }

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: rgba(91, 109, 216, 0.12);
  border-bottom: 1px solid rgba(120, 138, 230, 0.18);
  border-radius: var(--radius-lg, 18px) var(--radius-lg, 18px) 0 0;
}

.modal-title { font-size: 18px; font-weight: 700; color: #3f4684; }

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  backdrop-filter: blur(8px) saturate(150%);
  box-shadow: 0 2px 5px rgba(30, 41, 82, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: all 0.15s ease;
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 5px 12px -2px rgba(30, 41, 82, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.modal-close:active {
  transform: translateY(0) scale(0.94);
  box-shadow: 0 1px 3px rgba(30, 41, 82, 0.12);
}
html[data-theme="dark"] .modal-close {
  background: rgba(60, 70, 100, 0.55);
  border-color: rgba(124, 138, 230, 0.20);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html[data-theme="dark"] .modal-close:hover {
  background: rgba(80, 92, 124, 0.85);
}

.modal-body { padding: 24px; }

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(120, 138, 230, 0.18);
  background: rgba(91, 109, 216, 0.10);
  border-radius: 0 0 var(--radius-lg, 18px) var(--radius-lg, 18px);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

html[data-theme="dark"] .modal-footer {
  border-top-color: rgba(124, 138, 230, 0.16);
  background: rgba(124, 138, 230, 0.10);
}

html[data-theme="dark"] .modal-header {
  border-bottom-color: rgba(124, 138, 230, 0.16);
  background: rgba(124, 138, 230, 0.12);
}
html[data-theme="dark"] .modal-title { color: #aeb8f2; }

/* ===== CALENDAR ===== */
.calendar-wrapper { overflow-x: auto; border-radius: var(--radius-md); }

.calendar-table {
  font-size: 11px;
  table-layout: fixed;
  border-collapse: collapse;
}

.calendar-table th, .calendar-table td {
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0;
  text-align: center;
}

.calendar-table .apt-cell {
  background: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  color: var(--accent-dark);
  padding: 8px 6px;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 60px;
  text-align: center;
}

.calendar-table .day-header {
  background: rgba(24, 31, 56, 0.85);
  color: white;
  padding: 6px 0;
  font-weight: 600;
  min-width: 56px;
}

.calendar-table .day-header.weekend {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
}

.calendar-table .day-header.holiday {
  background: linear-gradient(135deg, #c084fc, #a855f7);
}

.calendar-table .day-header.today {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #1a1f36;
}

.calendar-table .rp-header {
  background: rgba(0, 0, 0, 0.04);
  font-size: 9px;
  color: var(--text-secondary);
  padding: 3px 0;
  min-width: 28px;
  font-weight: 700;
}

.calendar-table .rp-header.p { background: rgba(0, 0, 0, 0.07); }

.calendar-cell {
  height: 30px;
  min-width: 28px;
}

.calendar-cell.p { background: rgba(0, 0, 0, 0.02); }
.calendar-cell.weekend { background: rgba(124, 138, 230, 0.10); }
.calendar-cell.holiday { background: rgba(168, 85, 247, 0.10); }

.calendar-cell.cakajuca    { background: var(--status-cakajuca); }
.calendar-cell.potvrdena   { background: var(--status-potvrdena); }
.calendar-cell.uhradena    { background: var(--status-uhradena); }
.calendar-cell.prebiehajuca{ background: var(--status-prebiehajuca); }
.calendar-cell.ukoncena    { background: var(--status-ukoncena); }
.calendar-cell.stornovana  { background: var(--status-stornovana); }

/* ===== AVAILABILITY ===== */
.availability-card { padding: 20px; margin-bottom: 16px; }

.availability-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 16px;
}

.apt-status {
  padding: 12px 8px;
  border-radius: 10px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.15s ease;
  cursor: pointer;
}

.apt-status:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.apt-status.free {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.3);
  color: #065f46;
}

.apt-status.occupied {
  background: rgba(239, 68, 68, 0.10);
  border-color: rgba(239, 68, 68, 0.3);
  color: #b91c1c;
}

.apt-status-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.apt-status-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }

/* ===== EMPTY STATE ===== */
.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--text-tertiary);
}

.empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.empty-state-illustration {
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  color: var(--accent);
  opacity: 0.55;
}
.empty-state-illustration svg {
  width: 100%;
  height: 100%;
}
/* Menu variant - SVG je 24x24 viewBox so stroke 1.5px, treba lepší vizuál */
.empty-state-illustration-menu {
  opacity: 0.5;
  width: 80px;
  height: 80px;
}
/* Malá verzia pre Dashboard widgety a side panely */
.empty-state-illustration-small {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  opacity: 0.5;
}
.empty-state-title { font-size: 16px; font-weight: 600; color: var(--text-secondary); margin-bottom: 4px; }
.empty-state-text { font-size: 13px; }

/* ===== SCROLLBARS ===== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.25); }

.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ===== LOGIN ===== */
.login-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.login-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(60px) saturate(180%);
  -webkit-backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 64px rgba(20, 25, 50, 0.25);
  padding: 40px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.login-h75-logo {
  width: 100%;
  max-width: 280px;
  height: auto;
  display: block;
  margin: 0 auto 20px;
}
.login-wordmark {
  font-size: 34px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--accent);
  text-align: center;
  margin: 8px auto 20px;
  line-height: 1.1;
}
.sidebar-wordmark {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: #fff;
  line-height: 1.1;
}

.login-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.login-subtitle { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
.login-error { font-size: 12px; color: var(--color-danger); margin-top: 8px; min-height: 16px; }

/* Prihlasovacie tlačidlo – plný sýty akcent (na svetlej karte je sklenený
   btn-primary bledý), bez zásahu do btn-primary inde v aplikácii. */
.login-submit {
  padding: 13px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #6473e0 0%, #4d5abf 100%);
  border: 1px solid rgba(64, 76, 173, 0.55);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 20px -6px rgba(77, 92, 196, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.login-submit:hover {
  color: #fff;
  background: linear-gradient(135deg, #5a6ade 0%, #4654b8 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -6px rgba(77, 92, 196, 0.66), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.login-submit:active { transform: translateY(0); }

.login-madapex {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.login-madapex-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-tertiary);
}

.login-madapex-link {
  display: block;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.login-madapex-link:hover {
  opacity: 1;
}

.login-madapex-logo {
  height: 28px;
  width: auto;
  display: block;
}

/* ===== FOOTER ===== */
.footer {
  justify-self: stretch;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 14px 14px 0;
  padding: 7px 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  font-size: 11px;
  color: var(--text-secondary);
  position: relative;
}
html[data-theme="dark"] .footer {
  background: rgba(28, 36, 58, 0.72);
  border-color: rgba(124, 138, 230, 0.20);
}

.footer-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  width: 100%;
}

.footer-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.footer-made-by {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.footer-madapex-logo {
  height: 18px;
  width: auto;
  opacity: 0.6;
  transition: opacity 0.2s;
  display: block;
}

.footer-madapex-logo:hover { opacity: 0.9; }

.footer-copyright {
  font-size: 11px;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
}

.footer-sep {
  color: var(--text-tertiary);
  opacity: 0.6;
}

.footer-link {
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px dotted var(--text-tertiary);
  transition: color 0.15s, border-color 0.15s;
}

.footer-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.footer-version-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}

.footer-version-btn:hover {
  color: var(--accent);
  background: rgba(91, 109, 216, 0.08);
}

/* ============================================================
   ABOUT MODAL — Otvorí sa kliknutím na (i) v päte (kompaktný)
   ============================================================ */

/* Schovať prázdny modal-footer (about modal nemá Zatvoriť tlačidlo,
   zatvára sa krížikom) */
.modal-footer:empty {
  display: none;
  padding: 0;
}

/* Náznak skrolovania: jemný fade + animovaná šípka na spodku modálu (bod 2) */
.modal-scroll-hint {
  position: sticky;
  bottom: 0;
  height: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.modal-scroll-hint.visible { opacity: 1; }
.msh-fade {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 0;
  height: 76px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, #000 40%, transparent 100%);
}
.msh-arrow {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: var(--accent);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(91, 109, 216, 0.30);
  box-shadow: 0 4px 12px -2px rgba(30, 41, 82, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  pointer-events: auto;
  cursor: pointer;
  animation: msh-bounce 1.5s ease-in-out infinite;
}
.msh-arrow:hover { background: rgba(255, 255, 255, 0.98); }
@keyframes msh-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(4px); }
}
html[data-theme="dark"] .msh-fade {
  background: linear-gradient(to top, rgba(28, 36, 58, 0.95) 0%, rgba(28, 36, 58, 0.55) 42%, rgba(28, 36, 58, 0) 100%);
}
html[data-theme="dark"] .msh-arrow {
  background: rgba(50, 60, 90, 0.9);
  border-color: rgba(124, 138, 230, 0.35);
  color: #a8b4f0;
}
@media (prefers-reduced-motion: reduce) {
  .msh-arrow { animation: none; }
}

.about-modal {
  padding: 0;
}

.about-hero {
  text-align: center;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
}

.about-h75-logo {
  height: 44px;
  width: auto;
  margin: 0 auto 6px;
  display: block;
}

.about-tagline {
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
  font-style: italic;
}

.about-version-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}

.about-version-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 12.5px;
}

.about-version-row + .about-version-row {
  border-top: 1px solid var(--border-light, rgba(0,0,0,0.05));
}

.about-version-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.about-version-value {
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
}

.about-env-badge {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 11px;
  font-size: 10.5px;
  font-weight: 600;
  border: 1px solid;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.about-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-bottom: 14px;
}

.about-tech-chip {
  display: inline-block;
  padding: 3px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 500;
}

.about-madapex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
  color: var(--text-tertiary);
  letter-spacing: 0.2px;
  flex-wrap: wrap;
}

/* 1.1.35: about-footer-links - druhý riadok pätičky v (i) dialógu s odkazmi */
.about-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  flex-wrap: wrap;
}

/* about-footer odstráni vlastný border-top ak používaná spolu s about-footer-links */
.about-footer + .about-footer-links {
  padding-top: 0;
}

.about-madapex-text {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.about-madapex-link {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.2s;
  user-select: none;
  text-decoration: none;
}

.about-madapex-link:hover {
  transform: scale(1.05);
}

.about-madapex-logo {
  height: 16px;
  width: auto;
  display: block;
}

.about-madapex-sep {
  color: var(--text-tertiary);
  opacity: 0.6;
}

.about-copy {
  color: var(--text-tertiary);
}

.about-easter-egg {
  margin-left: 2px;
}

@keyframes about-madapex-wobble {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-8deg) scale(1.15); }
  30% { transform: rotate(8deg) scale(1.15); }
  45% { transform: rotate(-6deg) scale(1.1); }
  60% { transform: rotate(6deg) scale(1.1); }
  75% { transform: rotate(-3deg) scale(1.05); }
  90% { transform: rotate(3deg) scale(1.05); }
}

.about-madapex-wobble {
  animation: about-madapex-wobble 1.5s ease-in-out;
}

/* MOBILE: kompaktnejšia päta, riadky sa zalomia. */
@media (max-width: 700px) {
  .footer {
    padding: 8px 12px;
    font-size: 10px;
  }
  .footer-line {
    gap: 6px;
  }
  .footer-madapex-logo {
    height: 14px;
  }
  .footer-copyright,
  .footer-link {
    font-size: 10px;
    letter-spacing: 0.1px;
  }
}

/* ===== UTILITIES ===== */
.text-mono { font-family: "SF Mono", "Menlo", "Consolas", monospace; }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-right { text-align: right; }
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.hidden { display: none !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-8 { margin-bottom: 8px; }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

/* ===== REPORTS / GRAFY ===== */
.report-section {
  margin-bottom: 16px;
}

.report-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

.report-period-tabs {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 16px;
}

/* V page-actions (Reporty, Financie) sú tabs vedľa tlačidiel exportu,
   takže margin-bottom je nežiaduce - tlačí ich opticky dolu. */
.page-actions .report-period-tabs {
  margin-bottom: 0;
}

.report-period-tab {
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.report-period-tab:hover { color: var(--text-primary); }

.report-period-tab.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 6px var(--accent-glow);
}

.chart-wrapper {
  width: 100%;
  overflow-x: auto;
}

.chart-svg {
  width: 100%;
  height: auto;
  display: block;
}

.chart-bar {
  fill: var(--accent);
  transition: fill 0.15s ease;
}

.chart-bar:hover { fill: var(--accent-dark); }

.chart-bar-label {
  font-size: 10px;
  font-weight: 600;
  fill: var(--text-secondary);
  font-family: var(--font-family);
}

.chart-bar-value {
  font-size: 10px;
  font-weight: 700;
  fill: var(--text-primary);
  font-family: var(--font-family);
}

.chart-axis-line {
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 1;
}

.chart-grid-line {
  stroke: rgba(0, 0, 0, 0.04);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.chart-pie-slice {
  transition: transform 0.15s ease;
  transform-origin: center;
}

.chart-pie-slice:hover { transform: scale(1.04); }

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  justify-content: center;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-secondary);
}

.chart-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.kpi-card {
  padding: 14px 16px;
}

.kpi-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  margin-bottom: 6px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.3px;
}

.kpi-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* ===== FINANCIE - MODERNÉ KPI KARTY ===== */
/* Väčšie, výraznejšie karty s ikonou v kruhu, glassmorphism a farebným
   ladením pozadia. Použité iba v module Financie. */
.fin-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.fin-kpi-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.fin-kpi-card::before {
  /* Subtilný farebný "glow" ako pozadie, zaberá pravú polovicu karty */
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 60%;
  background: linear-gradient(135deg, transparent 0%, var(--kpi-accent, transparent) 100%);
  opacity: 0.07;
  pointer-events: none;
  border-radius: inherit;
}

.fin-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.03);
}

.fin-kpi-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kpi-accent-bg, rgba(91, 109, 216, 0.12));
  color: var(--kpi-accent, #5b6dd8);
  position: relative;
  z-index: 1;
}

.fin-kpi-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}

.fin-kpi-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  font-weight: 600;
  margin-bottom: 4px;
}

.fin-kpi-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.4px;
  line-height: 1.15;
}

.fin-kpi-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.35;
}

/* Farebné varianty - definujú CSS premenné pre ikonu a glow */
.fin-kpi-green {
  --kpi-accent: #10b981;
  --kpi-accent-bg: rgba(16, 185, 129, 0.13);
}
.fin-kpi-red {
  --kpi-accent: #ef4444;
  --kpi-accent-bg: rgba(239, 68, 68, 0.13);
}
.fin-kpi-accent {
  --kpi-accent: var(--accent, #5b6dd8);
  --kpi-accent-bg: rgba(91, 109, 216, 0.13);
}
.fin-kpi-violet {
  --kpi-accent: #a855f7;
  --kpi-accent-bg: rgba(168, 85, 247, 0.13);
}

@media (max-width: 700px) {
  .fin-kpi-card {
    padding: 14px 14px;
    gap: 10px;
  }
  .fin-kpi-icon {
    width: 38px;
    height: 38px;
  }
  .fin-kpi-value {
    font-size: 20px;
  }
}

/* ===== WIZARD (sprievodca rezerváciou) ===== */
.modal.modal-wide {
  max-width: 920px;
}

.wizard-steps {
  display: flex;
  justify-content: space-between;
  padding: 18px 32px 14px;
  background: rgba(255, 255, 255, 0.4);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  gap: 8px;
}

.wizard-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  cursor: default;
}

.wizard-step.clickable { cursor: pointer; }

.wizard-step::after {
  content: '';
  position: absolute;
  top: 14px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: rgba(0, 0, 0, 0.08);
  z-index: 0;
  transition: background 0.2s ease;
}

.wizard-step:last-child::after { display: none; }

.wizard-step.completed::after,
.wizard-step.active::after { background: var(--accent); }

.wizard-step-number {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  position: relative;
  z-index: 1;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.wizard-step.active .wizard-step-number {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.wizard-step.completed .wizard-step-number {
  background: var(--accent-dark);
  color: white;
}

.wizard-step.completed .wizard-step-number::after {
  content: '✓';
  position: absolute;
  font-size: 13px;
}

.wizard-step.completed .wizard-step-number-text { display: none; }

.wizard-step-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-top: 6px;
  text-align: center;
  letter-spacing: 0.2px;
}

.wizard-step.active .wizard-step-label,
.wizard-step.completed .wizard-step-label {
  color: var(--text-primary);
}

.wizard-body {
  padding: 28px 32px;
  min-height: 320px;
}

.wizard-body-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text-primary);
}

.wizard-body-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.wizard-footer {
  padding: 16px 32px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.wizard-footer-info {
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Mriežka apartmánov vo wizarde (Krok 2) */
.apt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}

.apt-grid-item {
  padding: 14px 10px;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid transparent;
  transition: all 0.15s ease;
  position: relative;
}

.apt-grid-item.free {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.25);
  color: #065f46;
}

.apt-grid-item.occupied,
.apt-grid-item.too-small {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.15);
  color: rgba(185, 28, 28, 0.65);
  cursor: not-allowed;
  opacity: 0.65;
}

.apt-grid-item.selected {
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: white;
  border-color: var(--accent-dark);
  box-shadow: 0 6px 18px var(--accent-glow);
  transform: translateY(-2px);
}

.apt-grid-item:not(.occupied):not(.too-small):not(.selected):hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.apt-grid-kod {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 4px;
}

.apt-grid-meta {
  font-size: 10px;
  letter-spacing: 0.3px;
  opacity: 0.85;
}

.apt-grid-price {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

/* Tab switcher pre hosťa v Kroku 3 */
.tab-switcher {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
  margin-bottom: 20px;
}

.tab-switcher-tab {
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.tab-switcher-tab:hover { color: var(--text-primary); }

.tab-switcher-tab.active {
  background: var(--accent);
  color: white;
  box-shadow: 0 2px 6px var(--accent-glow);
}

/* Spoluhostia list */
.coguest-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.coguest-card {
  padding: 14px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  display: grid;
  grid-template-columns: 1fr 1fr 140px 32px;
  gap: 10px;
  align-items: end;
}

.coguest-card .form-group { margin-bottom: 0; }

.coguest-add-btn {
  width: 100%;
  padding: 12px;
  border: 2px dashed rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.3);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  margin-top: 8px;
}

.coguest-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(91, 109, 216, 0.04);
}

/* Súhrn - boxy */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.summary-box {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.summary-box-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  margin-bottom: 4px;
}

.summary-box-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.summary-box-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.summary-pricing {
  background: linear-gradient(135deg, rgba(91, 109, 216, 0.08), rgba(45, 212, 191, 0.05));
  border: 1px solid rgba(91, 109, 216, 0.15);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
}

.summary-row.total {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 10px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
}

.summary-row.commission {
  font-size: 11px;
  color: var(--text-tertiary);
}

/* Klikateľná dlaždica v kontrole dostupnosti */
.apt-status.free.clickable { cursor: pointer; }

.apt-status.free.clickable::after {
  content: '+ rezervácia';
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s ease;
  text-align: center;
}

.apt-status.free.clickable {
  position: relative;
  margin-bottom: 8px;
}

.apt-status.free.clickable:hover::after { opacity: 1; }

/* ===== WIZARD (sprievodca rezervácie) ===== */
.wizard-modal {
  max-width: 920px;
  display: flex;
  flex-direction: column;
  /* Aby vnútorné scroll fungovali správne */
  overflow: hidden;
  max-height: 90vh;
}

.wizard-modal .modal-header,
.wizard-modal .wizard-steps,
.wizard-modal .wizard-footer {
  flex-shrink: 0;
}

.wizard-modal .wizard-body {
  flex: 1 1 auto;
  overflow-y: auto;
}

.wizard-steps {
  display: flex;
  gap: 0;
  /* Dostatok priestoru zhora aby box-shadow okolo aktívneho kruhu nebol urezaný */
  padding: 22px 24px 18px;
  /* Jemné odlíšenie od ostatných častí, nie biely pás */
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 0;
  overflow-x: auto;
  /* Aby box-shadow okolo aktívneho čísla nebol orezaný horizontálne */
  overflow-y: visible;
}

.wizard-step {
  flex: 1;
  min-width: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  cursor: default;
  opacity: 0.4;
  transition: opacity 0.2s ease;
}

.wizard-step.active,
.wizard-step.done {
  opacity: 1;
}

.wizard-step.clickable {
  cursor: pointer;
}

.wizard-step.clickable:hover {
  opacity: 0.85;
}

.wizard-step-circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-secondary);
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.wizard-step.active .wizard-step-circle {
  background: var(--accent);
  color: white;
  border-color: var(--accent-light);
  box-shadow: 0 0 0 4px var(--accent-glow);
}

.wizard-step.done .wizard-step-circle {
  background: var(--color-success);
  color: white;
}

.wizard-step-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  color: var(--text-secondary);
  letter-spacing: 0.3px;
}

.wizard-step.active .wizard-step-label {
  color: var(--accent-dark);
}

/* Connector line between steps */
.wizard-step::before {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(50% + 20px);
  right: calc(-50% + 20px);
  height: 2px;
  background: rgba(0, 0, 0, 0.08);
  z-index: -1;
}

.wizard-step:last-child::before {
  display: none;
}

.wizard-step.done::before {
  background: var(--color-success);
}

.wizard-body {
  padding: 24px;
  min-height: 320px;
}

.wizard-step-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.wizard-step-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.wizard-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.wizard-footer-right {
  display: flex;
  gap: 8px;
}

/* === Krok 2: výber apartmánu === */
.wizard-apt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}

.wizard-apt-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 16px 2px 8px;
}
.wizard-apt-group-title:first-child {
  margin-top: 4px;
}

.wizard-apt-addr {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.apt-name-link {
  cursor: pointer;
  border-bottom: 1px dashed var(--text-tertiary);
}
.apt-name-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.wizard-apt {
  padding: 14px 10px;
  border-radius: 12px;
  text-align: center;
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(0, 0, 0, 0.06);
  transition: all 0.15s ease;
  cursor: pointer;
}

.wizard-apt:hover:not(.unavailable) {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 4px 14px var(--accent-glow);
}

.wizard-apt.selected {
  background: linear-gradient(135deg, var(--accent-light), var(--accent));
  color: white;
  border-color: var(--accent-dark);
  box-shadow: 0 6px 20px var(--accent-glow);
}

/* Pri označenom apartmáne všetok obsah karty musí byť čitateľný na modrom pozadí.
   Bez tohto zostávajú názov, meta a cena v pôvodnej tmavej farbe a stratia sa. */
.wizard-apt.selected .wizard-apt-code,
.wizard-apt.selected .wizard-apt-name,
.wizard-apt.selected .wizard-apt-meta,
.wizard-apt.selected .wizard-apt-price {
  color: white;
}

.wizard-apt.selected .wizard-apt-name {
  color: rgba(255, 255, 255, 0.92);
}

.wizard-apt.selected .wizard-apt-meta,
.wizard-apt.selected .wizard-apt-price {
  color: rgba(255, 255, 255, 0.88);
}

.wizard-apt.unavailable {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.2);
  cursor: not-allowed;
  opacity: 0.55;
}

.wizard-apt-code {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}

.wizard-apt-name {
  font-size: 11px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.wizard-apt-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}

.wizard-apt-price {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-dark);
  margin-top: 4px;
}

.wizard-apt-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-top: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-block;
}

.wizard-apt.unavailable .wizard-apt-status {
  background: rgba(239, 68, 68, 0.15);
  color: #b91c1c;
}

/* === Krok 3: hosť - výber alebo nový === */
.wizard-host-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.wizard-host-option {
  padding: 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}

.wizard-host-option:hover {
  border-color: var(--accent);
}

.wizard-host-option.active {
  background: rgba(91, 109, 216, 0.08);
  border-color: var(--accent);
}

.wizard-host-option-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: rgba(91, 109, 216, 0.08);
  color: var(--accent);
}

.wizard-host-option.active .wizard-host-option-icon {
  background: var(--accent);
  color: white;
  box-shadow: 0 4px 12px var(--accent-glow);
}

.wizard-host-option-icon svg {
  display: block;
}

.wizard-host-option-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}

.wizard-host-option-desc {
  font-size: 11px;
  color: var(--text-tertiary);
}

.wizard-host-search-results {
  max-height: 220px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  margin-top: 8px;
}

.wizard-host-search-item {
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.wizard-host-search-item:last-child {
  border-bottom: none;
}

.wizard-host-search-item:hover {
  background: rgba(91, 109, 216, 0.08);
}

.wizard-host-search-item.selected {
  background: rgba(91, 109, 216, 0.15);
  font-weight: 600;
}

/* === Krok 4: spoluhostia === */
.wizard-coguest-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wizard-coguest-row {
  display: grid;
  grid-template-columns: 32px 1fr 1fr 140px 36px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 10px;
}

.wizard-coguest-number {
  text-align: center;
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}

.wizard-coguest-row .form-control {
  margin-bottom: 0;
}

/* Labely sú skryté na desktope (placeholdery stačia), na mobile sa zobrazia */
.wizard-coguest-field {
  display: contents;
}
.wizard-coguest-label {
  display: none;
}

.wizard-coguest-add {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  background: rgba(91, 109, 216, 0.08);
  color: var(--accent-dark);
  border: 1px dashed var(--accent);
  padding: 10px;
}

.wizard-coguest-add:hover {
  background: rgba(91, 109, 216, 0.15);
}

/* === Krok 5: súhrn === */
.wizard-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.wizard-summary-card {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.wizard-summary-label {
  font-size: 10px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  font-weight: 600;
  margin-bottom: 6px;
}

.wizard-summary-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.wizard-summary-value.large {
  font-size: 22px;
  color: var(--accent-dark);
  letter-spacing: -0.3px;
}

.wizard-summary-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.wizard-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
  font-size: 13px;
}

.wizard-price-row:last-child {
  border-bottom: none;
  padding-top: 12px;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  font-weight: 700;
  font-size: 16px;
}

.wizard-price-label {
  color: var(--text-secondary);
}

.wizard-price-value {
  font-weight: 600;
  color: var(--text-primary);
}

.wizard-final-options {
  margin-top: 20px;
  padding: 16px;
  background: rgba(91, 109, 216, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(91, 109, 216, 0.15);
}

/* ===== RESPONSIVE ===== */

/* === Mobilná horná lišta a backdrop (skryté na desktope) === */
.mobile-topbar { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
  /* App grid - 1 stĺpec, sidebar je absolútne pozícionovaná drawer */
  .app {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100vw !important;
    /* Padding-top zaberie miesto pre fixed topbar + iPhone notch */
    padding-top: calc(56px + env(safe-area-inset-top, 0px));
    /* Padding bottom pre iPhone home indicator */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Desktopová horná lišta sa na mobile skryje - mobil má vlastnú mobile-topbar */
  .desktop-topbar { display: none !important; }

  /* Hlavná oblasť a footer prepneme do stĺpca 1 (predtým bola "2" čo neexistuje v 1fr gride) */
  .main {
    grid-column: 1 !important;
    width: 100%;
    max-width: 100%;
    padding: 16px max(16px, env(safe-area-inset-right, 0px)) 16px max(16px, env(safe-area-inset-left, 0px));
  }
  .footer {
    grid-column: 1 !important;
    grid-template-columns: 1fr !important;
    text-align: center;
    margin: 0;
    border-radius: 0;
    padding: 10px 16px;
  }
  .footer-center { grid-column: 1 !important; }
  .footer-right {
    grid-column: 1 !important;
    justify-self: center;
    align-items: center;
    text-align: center;
    font-size: 10px;
    opacity: 0.8;
  }

  /* Mobilná horná lišta */
  .mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: calc(56px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
    background: rgba(24, 31, 56, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 100vw;
    z-index: 1500;
    color: white;
    box-sizing: border-box;
  }

  .mobile-burger {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: 8px;
    transition: background 0.15s ease;
  }

  .mobile-burger:hover, .mobile-burger:active {
    background: rgba(255, 255, 255, 0.08);
  }

  .mobile-burger span {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  /* Burger sa zmení na X keď je menu otvorené */
  body.sidebar-open .mobile-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.sidebar-open .mobile-burger span:nth-child(2) {
    opacity: 0;
  }
  body.sidebar-open .mobile-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .mobile-topbar-title {
    flex: 1;
    min-width: 0;          /* dôležité aby ellipsis fungovalo a netlačil ostatné prvky */
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-burger {
    flex-shrink: 0;        /* burger sa nezmenšuje pod 40px */
  }

  .mobile-topbar-logout,
  .topbar-theme {
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
  }

  .mobile-topbar-logout:hover, .mobile-topbar-logout:active,
  .topbar-theme:hover, .topbar-theme:active {
    background: rgba(255, 255, 255, 0.08);
  }

  /* 1.1.37: Mobile rýchle tlačidlo pre predbežnú rezerváciu (vedľa zvončeka).
     Kompaktný pill so štítkom "PR" — širší než 40px ikonky, aby sa dva znaky
     zmestili bez tlačenia na názov. */
  .mobile-topbar-rezervacia {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: white;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s ease, transform 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: inherit;
    white-space: nowrap;
  }

  .mobile-topbar-rezervacia:hover,
  .mobile-topbar-rezervacia:active {
    background: rgba(255, 255, 255, 0.20);
    transform: scale(1.05);
  }

  /* V mobilnej topbar má bell tiež biele pozadie - prepíšeme z desktop štýlov */
  .mobile-topbar .topbar-bell {
    background: transparent;
    color: white;
    width: 40px;
    height: 40px;
    margin-right: 0;
  }
  .mobile-topbar .topbar-bell:hover,
  .mobile-topbar .topbar-bell:active {
    background: rgba(255, 255, 255, 0.08);
  }
  .mobile-topbar .topbar-bell-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Backdrop za otvoreným menu */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1400;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Sidebar ako drawer - skrytá za ľavým okrajom */
  .sidebar {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 16px 12px;
    z-index: 1450;
    overflow-y: auto;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
    margin: 0;
    border: none;
    border-radius: 0;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  /* V mobilnej drawer-i sa vždy zobrazí plný text (popis) */
  .sidebar-h75-logo { display: block; max-width: 140px; }
  .sidebar-by-madapex { display: flex; }
  .sidebar-section-label,
  .sidebar-item span:not(.sidebar-item-icon) {
    display: inline;
  }
  .sidebar-item {
    justify-content: flex-start;
    padding: 12px 14px;
    font-size: 14px;
  }
  .sidebar-item-icon {
    margin-right: 12px;
    width: 20px;
    text-align: center;
  }
  .sidebar-footer {
    display: block;
    padding: 12px 0;
  }
}

@media (max-width: 600px) {
  .main { padding: 16px; }
  .footer { padding: 10px 16px; font-size: 10px; }
  .page-title { font-size: 22px; }
  .stats-grid { grid-template-columns: 1fr; }
  .wizard-step-label { display: none; }
  .wizard-summary-grid { grid-template-columns: 1fr; }
  .wizard-host-mode { grid-template-columns: 1fr; }

  /* Modal overlay - bez paddingu na mobile, full screen */
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }

  .modal {
    max-width: 100%;
    /* dvh = dynamic viewport height (iOS Safari berie do úvahy URL bar) */
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* scroll je vnútri jednotlivých sekcií, nie na celom modal-e */
    overflow: hidden;
  }
}

/* iPhone landscape (telefón položený horizontálne) - nízka výška,
   modal musí ostať full-screen aby tlačidlá ostali viditeľné. */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-overlay {
    padding: 0;
    align-items: stretch;
  }
  .modal {
    max-width: 100%;
    width: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .modal-header {
    padding: 10px 16px;
    flex-shrink: 0;
  }
  .modal-body {
    padding: 12px 16px;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .modal-footer {
    padding: 10px 16px;
    flex-shrink: 0;
    background: var(--glass-bg-strong);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0));
  }
  /* V landscape phone tiež 1-stĺpec aby sa nič nevynechalo */
  .form-row,
  .form-row-2col {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

@media (max-width: 600px) {

  /* Header drží navrchu */
  .modal-header {
    padding: 14px 16px;
    flex-shrink: 0;
  }

  /* Body je jedna scrollovateľná oblasť */
  .modal-body {
    padding: 16px;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer drží naspodku, nikam neutečie */
  .modal-footer {
    padding: 12px 16px;
    flex-shrink: 0;
    background: var(--glass-bg-strong);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
    /* iOS safe-area-inset pre zariadenia s notch / home indicator */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  }

  /* Wizard kroky - kompaktnejšie na mobile */
  .wizard-steps {
    padding: 0 12px 12px;
    flex-shrink: 0;
  }
  .wizard-step {
    min-width: 56px;
    font-size: 10px;
  }

  /* Wizard body je jediná scrollovateľná časť (medzi header/steps a footer) */
  .wizard-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Wizard footer drží naspodku, nepláva */
  .wizard-footer {
    padding: 12px 16px;
    flex-shrink: 0;
    background: var(--glass-bg-strong);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.04);
    flex-wrap: wrap;
    gap: 8px;
    /* iOS safe-area-inset pre home indicator na novších iPhonoch */
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0));
  }
  .wizard-footer .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 8px;
    font-size: 13px;
    white-space: nowrap;
  }
  .wizard-footer > div {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
  }
  .wizard-footer-right {
    flex: 1 1 auto;
  }

  /* Spoluhostia na mobile: každý spoluhosť ako karta s polami pod sebou */
  .wizard-coguest-row {
    grid-template-columns: 32px 1fr 32px;
    gap: 8px 10px;
    padding: 12px;
    align-items: start;
  }
  .wizard-coguest-number {
    grid-row: 1;
    grid-column: 1;
    padding-top: 22px;
  }
  .wizard-coguest-remove-btn {
    grid-row: 1;
    grid-column: 3;
    margin-top: 18px;
  }
  .wizard-coguest-field {
    display: flex;
    flex-direction: column;
    grid-column: 2;
  }
  .wizard-coguest-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: 3px;
  }

  /* Krok 2: apartmány do 2 stĺpcov na mobile */
  .wizard-apt-grid {
    grid-template-columns: 1fr 1fr;
  }

  .wizard-price-row {
    font-size: 13px;
  }
}

/* ============================================================
   TIMELINE (detail rezervácie - aktivita)
   ============================================================ */

.timeline {
  position: relative;
  padding-left: 8px;
  margin-top: 8px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(91, 109, 216, 0.25) 0%,
    rgba(91, 109, 216, 0.08) 100%);
  border-radius: 1px;
}

.timeline-item {
  display: flex;
  gap: 14px;
  padding: 8px 0;
  position: relative;
  align-items: start;
}

.timeline-dot {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 1;
}

.timeline-content {
  flex: 1;
  padding-bottom: 4px;
  min-width: 0;
}

.timeline-meta {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}

.timeline-time {
  font-weight: 600;
}

.timeline-user {
  color: var(--text-secondary);
}

.timeline-user::before {
  content: '·';
  margin-right: 6px;
  color: var(--text-tertiary);
}

.timeline-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  word-break: break-word;
}

/* ============================================================
   KPI GRID (detail panely)
   ============================================================ */

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.kpi-card {
  padding: 12px 14px;
  text-align: left;
}

.kpi-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 4px;
}

.kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.kpi-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

@media (max-width: 600px) {
  .kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.text-right { text-align: right; }
.text-tertiary { color: var(--text-tertiary); }

/* Veľký avatar v Profil modále */
.profile-big-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-light) 0%, var(--accent-dark) 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex: 0 0 60px;
  box-shadow: 0 4px 16px rgba(91, 109, 216, 0.4);
}

/* ============================================================
   KALENDÁR - prepínač view, mesiac, rok
   ============================================================ */

.kal-view-switcher {
  display: flex;
  gap: 2px;
  background: rgba(0, 0, 0, 0.04);
  padding: 3px;
  border-radius: 10px;
}

.kal-view-btn {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.15s ease;
  font-family: inherit;
}

.kal-view-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.5);
}

.kal-view-btn.active {
  background: white;
  color: var(--accent-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* === MESAČNÝ GRID === */

.kal-mesiac-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.kal-mesiac-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 4px 0;
}

.kal-mesiac-cell {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 8px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kal-mesiac-cell.other-month {
  background: rgba(0, 0, 0, 0.02);
  opacity: 0.45;
}

.kal-mesiac-cell.today {
  background: linear-gradient(135deg, rgba(91, 109, 216, 0.08), rgba(91, 109, 216, 0.03));
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.kal-mesiac-cell.weekend {
  background: rgba(245, 158, 11, 0.04);
}

.kal-mesiac-cell.holiday {
  background: rgba(168, 85, 247, 0.06);
}

.kal-mesiac-cell-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kal-mesiac-day {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.kal-mesiac-cell.today .kal-mesiac-day {
  color: var(--accent-dark);
}

.kal-mesiac-occ {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 6px;
}

.kal-mesiac-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 2px;
}

.kal-mesiac-item {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter 0.15s ease;
}

.kal-mesiac-item:hover {
  filter: brightness(0.95);
}

.kal-mesiac-item.arrival {
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
}

.kal-mesiac-item.departure {
  background: rgba(245, 158, 11, 0.15);
  color: #a16207;
}

.kal-mesiac-item.ongoing {
  background: rgba(91, 109, 216, 0.12);
  color: var(--accent-dark);
}

.kal-mesiac-item.more {
  background: rgba(0, 0, 0, 0.05);
  color: var(--text-tertiary);
  cursor: default;
  text-align: center;
  font-weight: 500;
}

/* === ROK VIEW === */

.kal-rok-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.kal-rok-mesiac {
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.kal-rok-mesiac:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(91, 109, 216, 0.12);
  transform: translateY(-1px);
}

.kal-rok-mesiac-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

.kal-rok-occ {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-dark);
  background: rgba(91, 109, 216, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
}

.kal-rok-mini-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.kal-rok-mini-day-label {
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  color: var(--text-tertiary);
  padding-bottom: 2px;
}

.kal-rok-mini-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 600;
  border-radius: 3px;
  color: var(--text-secondary);
}

.kal-rok-mini-cell.empty {
  background: transparent;
}

.kal-rok-mini-cell.l0 { background: #f3f4f6; color: var(--text-tertiary); }
.kal-rok-mini-cell.l1 { background: rgba(91, 109, 216, 0.15); color: var(--accent-dark); }
.kal-rok-mini-cell.l2 { background: rgba(91, 109, 216, 0.35); color: white; }
.kal-rok-mini-cell.l3 { background: rgba(91, 109, 216, 0.6); color: white; }
.kal-rok-mini-cell.l4 { background: rgba(91, 109, 216, 0.85); color: white; }

.kal-rok-mini-cell.today {
  box-shadow: inset 0 0 0 2px var(--accent);
}

@media (max-width: 800px) {
  .kal-mesiac-cell { min-height: 70px; padding: 5px; }
  .kal-mesiac-item { font-size: 9px; padding: 1px 4px; }
  .kal-view-btn { padding: 5px 8px; font-size: 11px; }
}

/* ============================================================
   KALENDÁR - PILULKY (gantt-style)
   ============================================================ */

/* Pri pilulkovom view sú stĺpce 2× širšie ako bývalé R/P (lebo je tam 1 stĺpec namiesto 2) */
.calendar-table--pills .day-header {
  min-width: 56px;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.cal-pill-cell {
  height: 36px;
  min-width: 56px;
  padding: 0 !important;
  position: relative;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-top: none !important;
}

/* Pomocná zvislá línia v strede bunky (jemné rozdelenie R/P pre orientáciu) */
.cal-pill-cell::before {
  content: '';
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 50%;
  width: 1px;
  background: rgba(0, 0, 0, 0.04);
  pointer-events: none;
}

.cal-pill-cell.today {
  background: rgba(251, 191, 36, 0.08);
  box-shadow: inset 0 2px 0 rgba(245, 158, 11, 0.4);
}
.cal-pill-cell.weekend { background: rgba(124, 138, 230, 0.06); }
.cal-pill-cell.holiday { background: rgba(168, 85, 247, 0.07); }

/* Vlastná pilulka */
.cal-pill {
  position: absolute;
  top: 7px;
  bottom: 7px;
  background: var(--status-prebiehajuca);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
  z-index: 1;
}

.cal-pill:hover {
  filter: brightness(0.92);
  transform: scaleY(1.05);
}

/* Pilulka cez celý deň (uprostred pobytu) - presahuje cez bordery
   aby pásy susedných buniek splynuli do jedného pásu */
.cal-pill--full {
  left: -1px;
  right: -1px;
  border-radius: 0;
}

/* Pilulka začína (deň príchodu) - pravá polovica, zaoblené vľavo,
   vpravo presahuje cez border a plynie do ďalšej bunky */
.cal-pill--start {
  left: 50%;
  right: -1px;
  border-radius: 14px 0 0 14px;
}

/* Pilulka končí (deň odchodu) - ľavá polovica, zaoblené vpravo,
   vľavo presahuje cez border a nadväzuje na predošlú bunku */
.cal-pill--end {
  left: -1px;
  right: 50%;
  border-radius: 0 14px 14px 0;
}

/* Farby pilulky podľa stavu rezervácie */
.cal-pill.cakajuca     { background: var(--status-cakajuca); }
.cal-pill.potvrdena    { background: var(--status-potvrdena); }
.cal-pill.uhradena     { background: var(--status-uhradena); }
.cal-pill.prebiehajuca { background: var(--status-prebiehajuca); }
.cal-pill.ukoncena     { background: var(--status-ukoncena); }
.cal-pill.stornovana   { background: var(--status-stornovana); }
.cal-pill.protinavrh   { background: var(--status-protinavrh, #a78bfa); }

/* Back-to-back bunka: dve pilulky v jednej bunke s optickou medzerou medzi nimi */
.cal-pill-cell.back-to-back::before {
  display: none;
}
.cal-pill-cell.back-to-back .cal-pill--end {
  right: calc(50% + 3px);
  border-radius: 0 14px 14px 0;
}
.cal-pill-cell.back-to-back .cal-pill--start {
  left: calc(50% + 3px);
  border-radius: 14px 0 0 14px;
}

/* ============================================================
   KALENDÁR - LAYOUT (telo + bočný panel) a Side panel
   ============================================================ */

.kalendar-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

.kalendar-body {
  min-width: 0; /* aby table mohol pretiecť na overflow-x */
}

.kalendar-side-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}

@media (max-width: 1200px) {
  .kalendar-layout {
    grid-template-columns: 1fr;
  }
  .kalendar-side-panel {
    position: static;
    max-height: none;
  }
}

/* === Side panel obsah === */

.kal-side-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.kal-side-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
}

.kal-side-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.kal-side-kpi-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.kal-side-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

.kal-side-kpi-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.kal-side-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.kal-side-section-icon {
  font-size: 18px;
  font-weight: 700;
  width: 22px;
  text-align: center;
}

.kal-side-section-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.kal-side-section-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 6px;
}

.kal-side-empty {
  padding: 12px 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  text-align: center;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
}

.kal-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.kal-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.kal-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: 0 0 auto;
}

.kal-side-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kal-side-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
  background: rgba(255, 255, 255, 0.5);
}

.kal-side-item:hover {
  background: rgba(91, 109, 216, 0.06);
}

.kal-side-item-date {
  text-align: center;
  background: white;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 7px;
  padding: 4px 0;
  min-width: 0;
}

.kal-side-item-day {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent-dark);
  line-height: 1;
}

.kal-side-item-mon {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.kal-side-item-body {
  min-width: 0;
}

.kal-side-item-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.kal-side-item-name {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kal-side-vip {
  font-size: 9px;
  font-weight: 700;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: white;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

.kal-side-item-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.kal-side-more {
  padding: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
}

/* ============================================================
   INACTIVITY WARNING - varovanie pred auto-odhlásením
   ============================================================ */

.inactivity-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999; /* nad všetkými ostatnými modálmi */
  animation: fadeIn 0.2s ease;
}

.inactivity-modal {
  background: white;
  border-radius: 16px;
  padding: 32px 36px;
  width: min(440px, calc(100vw - 32px));
  text-align: center;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.inactivity-icon {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.4));
}

.inactivity-title {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.inactivity-message {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 16px;
}

.inactivity-countdown {
  font-size: 44px;
  font-weight: 700;
  color: var(--color-warning, #f59e0b);
  letter-spacing: 1px;
  margin: 8px 0 14px;
  font-variant-numeric: tabular-nums;
}

.inactivity-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
  margin-bottom: 20px;
}

.inactivity-modal .btn {
  width: 100%;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ============================================================
   PASSWORD STRENGTH METER
   ============================================================ */

.pwd-strength {
  margin-top: 6px;
  font-size: 11px;
}

.pwd-strength-bars {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}

.pwd-strength-bar {
  height: 4px;
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.08);
  transition: background 0.2s ease;
}

.pwd-strength-bar.filled {
  background: #84cc16; /* default, prepisuje sa cez inline style */
}

.pwd-strength-label {
  font-weight: 600;
  font-size: 11px;
  margin-bottom: 2px;
}

.pwd-strength-issues {
  margin-top: 4px;
  font-size: 10.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

.pwd-strength-issue {
  margin: 1px 0;
}

/* ============================================================
   PII (citlivé identifikačné údaje) - maskovaná sekcia
   ============================================================ */

.pii-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px 16px;
}

.pii-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}

.pii-value {
  font-size: 13px;
  color: var(--text-primary);
  font-family: -apple-system, "SF Mono", Consolas, monospace;
  letter-spacing: 0.3px;
}

.pii-value [data-pii-masked] {
  transition: color 0.2s ease;
}

/* ============================================================
   Wizard - veky detí (krok 1)
   ============================================================ */

.wiz-deti-veky-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 6px;
  padding: 12px 14px;
  background: rgba(91, 109, 216, 0.04);
  border: 1px solid rgba(91, 109, 216, 0.12);
  border-radius: 10px;
}

.wiz-deti-vek-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wiz-deti-vek-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
}

/* ============================================================
   NOTIFIKÁCIE - tlačidlo v sidebar + bell v mobilnom topbare
   ============================================================ */

/* Tlačidlo notifikácií v sidebar (vedľa Odhlásiť) - rovnaký dizajn ako ostatné btn-ghost */
.sidebar-notif-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.sidebar-notif-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 4px;
  border-radius: 9px;
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.4);
}

/* Bell v mobilnom topbare (vedľa logout) */
.topbar-bell {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.5);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-right: 8px;
  flex-shrink: 0;
}

.topbar-bell-icon {
  font-size: 16px;
}

.topbar-bell-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Notifikačný zoznam v modali */
.notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease, transform 0.1s ease;
}

.notif-item:hover {
  background: rgba(91, 109, 216, 0.06);
  border-color: rgba(91, 109, 216, 0.15);
  transform: translateX(2px);
}

.notif-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 2px;
}

.notif-subtitle {
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notif-arrow {
  color: var(--text-tertiary);
  font-size: 16px;
  flex-shrink: 0;
}

/* ============================================================
   GLOBÁLNE VYHĽADÁVANIE (Cmd+K)
   ============================================================ */

.global-search-wrapper {
  display: flex;
  flex-direction: column;
}

.global-search-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 16px;
  border: 2px solid rgba(91, 109, 216, 0.25);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  outline: none;
  transition: border-color 0.15s ease;
}

.global-search-input:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.95);
}

.global-search-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--text-tertiary);
}

.global-search-results {
  margin-top: 16px;
  max-height: 50vh;
  overflow-y: auto;
}

.global-search-empty {
  padding: 40px 20px;
  text-align: center;
}

.global-search-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  padding: 8px 4px 4px;
  margin-top: 8px;
}

.global-search-section-label:first-child {
  margin-top: 0;
}

.global-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  transition: background 0.15s ease;
}

.global-search-item:hover,
.global-search-item:focus {
  background: rgba(91, 109, 216, 0.08);
  border-color: rgba(91, 109, 216, 0.2);
  outline: none;
}

.global-search-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.global-search-item-body {
  flex: 1;
  min-width: 0;
}

.global-search-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.global-search-item-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* kbd štýl pre klávesové skratky */
kbd {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(91, 109, 216, 0.1);
  border: 1px solid rgba(91, 109, 216, 0.2);
  border-radius: 5px;
  font-family: -apple-system, "SF Mono", Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-dark);
  box-shadow: 0 1px 0 rgba(91, 109, 216, 0.2);
}

/* ============================================================
   KALENDÁR DRAG & DROP - vizuálne stavy
   ============================================================ */

/* Pilulky majú cursor grab keď sú draggable */
.cal-pill[draggable="true"] {
  cursor: grab;
}

.cal-pill[draggable="true"]:active {
  cursor: grabbing;
}

/* Pilulka počas drag (poloprůsvitná) */
.cal-pill.dragging {
  opacity: 0.4;
  transform: scale(0.95);
}

/* Prázdne bunky pri aktívnom dragu - jemný indikátor že sú drop targets */
.cal-pill-cell.cal-drop-target.drop-active {
  background: rgba(91, 109, 216, 0.04);
  outline: 1px dashed rgba(91, 109, 216, 0.25);
  outline-offset: -2px;
}

/* Bunka nad ktorou je drag (a nie je tam konflikt) - zvýraznená zelená */
.cal-pill-cell.cal-drop-target.drop-hover {
  background: rgba(16, 185, 129, 0.15);
  outline: 2px solid #10b981;
  outline-offset: -2px;
}

/* Bunka nad ktorou je drag ale je tam konflikt - červené varovanie */
.cal-pill-cell.cal-drop-target.drop-conflict {
  background: rgba(239, 68, 68, 0.15);
  outline: 2px solid #ef4444;
  outline-offset: -2px;
  cursor: not-allowed;
}

/* ============================================================
   MODUL FINANCIE
   ============================================================ */

.financie-naklady-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.financie-naklad-item {
  display: grid;
  grid-template-columns: 220px 140px 1fr 60px;
  align-items: center;
  gap: 12px;
}

.financie-naklad-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.financie-naklad-value {
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.financie-naklad-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.05);
}

.financie-naklad-pct {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-align: right;
}

.financie-cost-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 900px) {
  .financie-cost-grid {
    grid-template-columns: 1fr;
  }
  .financie-naklad-item {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .financie-naklad-bar {
    grid-column: 1;
  }
}

/* ============================================================
   BULK OPERÁCIE - checkbox + akčný panel
   ============================================================ */

.bulk-checkbox {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Označený riadok - jemný zvýraznený pruh */
tr.bulk-selected {
  background: rgba(91, 109, 216, 0.06) !important;
}
tr.bulk-selected td {
  border-color: rgba(91, 109, 216, 0.18);
}

/* Akčný panel - zobrazí sa pod headerom keď je niečo vybrané */
.bulk-action-bar {
  position: sticky;
  top: 8px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 16px;
  margin-bottom: 14px;
  background: rgba(91, 109, 216, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 12px;
  color: white;
  box-shadow: 0 8px 24px rgba(91, 109, 216, 0.3);
  animation: slideDown 0.2s ease;
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bulk-action-count {
  font-size: 13px;
}

.bulk-action-count strong {
  font-size: 16px;
  font-weight: 700;
  margin-right: 4px;
}

.bulk-action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.bulk-action-buttons .btn {
  background: rgba(255, 255, 255, 0.18);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 12px;
  padding: 6px 12px;
}

.bulk-action-buttons .btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.bulk-action-buttons .btn-danger {
  background: rgba(239, 68, 68, 0.4);
  border-color: rgba(239, 68, 68, 0.5);
}

.bulk-action-buttons .btn-danger:hover {
  background: rgba(239, 68, 68, 0.6);
}

.bulk-action-buttons .btn-ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Na mobile spraviť bar kompaktnejší */
@media (max-width: 600px) {
  .bulk-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
  }
  .bulk-action-buttons {
    justify-content: stretch;
  }
  .bulk-action-buttons .btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* ============================================================
   DARK MODE
   ============================================================
   Aktivuje sa cez data-theme="dark" na html elemente, alebo automaticky
   ak používateľ nemá nastavený explicit theme a OS hlási prefer-color-scheme: dark.

   Liquid glass v dark mode používa tmavé poloprůsvitné povrchy
   namiesto bielych, akcent ostáva indigo pre rozpoznateľnosť značky.
============================================================ */

html[data-theme="dark"] {
  --bg-base: #0f1422;
  --bg-gradient-1: #1a2138;
  --bg-gradient-2: #232c47;
  --bg-gradient-3: #2d3858;

  --glass-bg: rgba(30, 38, 60, 0.62);
  --glass-bg-hover: rgba(40, 50, 78, 0.78);
  --glass-bg-strong: rgba(45, 56, 88, 0.92);
  --glass-border: rgba(120, 138, 180, 0.18);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  --glass-shadow-strong: 0 16px 48px rgba(0, 0, 0, 0.5);

  --sidebar-bg: rgba(10, 14, 26, 0.95);
  --sidebar-text: rgba(255, 255, 255, 0.78);
  --sidebar-text-active: #ffffff;
  --sidebar-item-active: rgba(124, 138, 230, 0.22);

  --accent: #7c8ae6;
  --accent-light: #9ba6ec;
  --accent-dark: #5b6dd8;
  --accent-glow: rgba(124, 138, 230, 0.4);

  --accent2: #2dd4bf;
  --accent2-dark: #14b8a6;

  --text-primary: #e8eaf2;
  --text-secondary: #b8bfd5;
  --text-tertiary: #7c869f;
  --text-on-glass: #e8eaf2;

  --status-cakajuca: #fbbf24;
  --status-potvrdena: #818cf8;
  --status-uhradena: #6366f1;
  --status-prebiehajuca: #34d399;
  --status-ukoncena: #94a3b8;
  --status-stornovana: #f87171;
  --status-protinavrh: #c084fc;
}

/* Dark mode tweaky pre konkrétne komponenty ktoré používali hardcoded farby */

html[data-theme="dark"] body {
  background: #0a0e1a;
}

/* DARK MODE pozadie - prepíše body::before z light verzie.
   Použité farby: hlboká navy základňa s indigo a fialovou žiarou,
   v rovnakej kompozícii ako svetlá verzia ale tmavo. */
html[data-theme="dark"] body::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(91, 109, 216, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 88% 75%, rgba(45, 212, 191, 0.10) 0%, transparent 50%),
    radial-gradient(circle at 50% 105%, rgba(168, 85, 247, 0.14) 0%, transparent 55%),
    linear-gradient(135deg, #0a0e1a 0%, #131a2e 35%, #1a2240 100%);
}

html[data-theme="dark"] table thead {
  background: rgba(40, 50, 80, 0.85);
}

html[data-theme="dark"] thead th,
html[data-theme="dark"] table th {
  /* Pôvodne var(--text-secondary) (príliš bledé), zvýšený kontrast pre čitateľnosť */
  color: #e2e8f0;
  background: rgba(40, 50, 80, 0.85);
  font-weight: 700;
  letter-spacing: 0.9px;
  border-bottom: 1px solid rgba(124, 138, 230, 0.25);
}

html[data-theme="dark"] .sortable-table th.th-sortable:hover {
  background: rgba(91, 109, 216, 0.25);
  color: #ffffff;
}

html[data-theme="dark"] .sortable-table th.th-sort-active {
  background: rgba(91, 109, 216, 0.30);
  color: #ffffff;
}

html[data-theme="dark"] tbody td {
  border-bottom-color: rgba(124, 138, 230, 0.10);
}

html[data-theme="dark"] table tbody tr:hover {
  background: rgba(124, 138, 230, 0.08);
}

html[data-theme="dark"] table tbody tr.bulk-selected {
  background: rgba(124, 138, 230, 0.12) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(20, 26, 44, 0.6);
  color: var(--text-primary);
  border-color: rgba(120, 138, 180, 0.25);
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
  background: rgba(20, 26, 44, 0.85);
  border-color: var(--accent);
}

html[data-theme="dark"] .form-control::placeholder {
  color: var(--text-tertiary);
}

html[data-theme="dark"] .btn-secondary {
  background: rgba(60, 70, 100, 0.5);
  color: var(--text-primary);
  border-color: rgba(120, 138, 180, 0.25);
}

html[data-theme="dark"] .btn-secondary:hover {
  background: rgba(80, 92, 130, 0.7);
}

html[data-theme="dark"] .btn-ghost {
  color: var(--text-secondary);
}

html[data-theme="dark"] .btn-ghost:hover {
  background: rgba(124, 138, 230, 0.1);
  color: var(--text-primary);
}

html[data-theme="dark"] .modal {
  background: rgba(15, 20, 34, 0.8);
}

html[data-theme="dark"] .modal-content {
  background: rgba(30, 38, 60, 0.95);
  border-color: rgba(120, 138, 180, 0.2);
}

html[data-theme="dark"] .badge {
  background: rgba(120, 138, 180, 0.15);
  color: var(--text-primary);
}

html[data-theme="dark"] .toast {
  background: rgba(30, 38, 60, 0.95);
  color: var(--text-primary);
  border-color: rgba(120, 138, 180, 0.25);
}

html[data-theme="dark"] code {
  background: rgba(120, 138, 180, 0.12);
  color: var(--accent-light);
}

html[data-theme="dark"] .kpi-card {
  border-color: rgba(120, 138, 180, 0.18);
}

/* Status badges v dark mode majú jemnejšie podklady */
html[data-theme="dark"] .badge-warning,
html[data-theme="dark"] .status-cakajuca { background: rgba(251, 191, 36, 0.18); color: #fbbf24; }

html[data-theme="dark"] .badge-info,
html[data-theme="dark"] .status-potvrdena { background: rgba(129, 140, 248, 0.18); color: #a5b4fc; }

html[data-theme="dark"] .status-uhradena { background: rgba(99, 102, 241, 0.2); color: #a5b4fc; }

html[data-theme="dark"] .badge-success,
html[data-theme="dark"] .status-prebiehajuca { background: rgba(52, 211, 153, 0.18); color: #34d399; }

html[data-theme="dark"] .status-ukoncena { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }

html[data-theme="dark"] .badge-danger,
html[data-theme="dark"] .status-stornovana { background: rgba(248, 113, 113, 0.18); color: #fca5a5; }

html[data-theme="dark"] .status-protinavrh { background: rgba(192, 132, 252, 0.18); color: #d8b4fe; }

/* Theme prepínač v sidebar bottom */
.sidebar-theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* Smooth prechod pri prepnutí témy (transition na všetkých background a color) */
html[data-theme="dark"] body,
html[data-theme="dark"] .glass-panel,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .btn,
html[data-theme="dark"] .sidebar {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ===== Refresh button spin animácia ===== */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.sidebar-refresh-btn:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   USER MENU (dropdown popover v sidebar footer-i)
   ============================================================ */

/* Sidebar footer - vyčistený, iba user karta */
.sidebar-footer {
  position: relative;
  padding: 12px 0 8px;
}

/* User card v sidebar-i (trigger pre menu) */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: inherit;
  transition: all 0.15s ease;
  margin-bottom: 0;
}

.sidebar-user:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
}

.sidebar-user.user-menu-trigger-open {
  background: rgba(91, 109, 216, 0.16);
  border-color: rgba(91, 109, 216, 0.32);
}

/* Avatar s prípadným notifikačným bodkou */
.sidebar-user-avatar {
  position: relative;
}

.sidebar-user-notif-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  border: 2px solid var(--sidebar-bg, #181f38);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.3);
}

/* Chevron na pravej strane (indikátor že je to otvárateľné menu) */
.sidebar-user-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.4);
  transition: transform 0.2s ease, color 0.15s ease;
  flex: 0 0 18px;
}

.sidebar-user:hover .sidebar-user-chevron {
  color: rgba(255, 255, 255, 0.7);
}

.user-menu-trigger-open .sidebar-user-chevron {
  transform: rotate(180deg);
  color: rgba(255, 255, 255, 0.9);
}

/* User menu popover - rozbalí sa NAD user kartou (smerom hore) */
.user-menu {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 12px;
  right: 12px;
  background: linear-gradient(180deg, rgba(34, 42, 70, 0.98) 0%, rgba(24, 31, 56, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4), 0 -2px 8px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 6px;
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transform-origin: bottom center;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
}

.user-menu.user-menu-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.1s ease, color 0.1s ease;
}

.user-menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.98);
}

.user-menu-item .svg-icon,
.user-menu-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: 0.75;
}

.user-menu-item:hover .svg-icon,
.user-menu-item:hover svg {
  opacity: 1;
}

.user-menu-item > span:not(.user-menu-badge) {
  flex: 1;
  min-width: 0;
}

.user-menu-badge {
  background: #ef4444;
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
}

.user-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 6px;
}

.user-menu-item-warning {
  color: #f59e0b;
}
.user-menu-item-warning:hover {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
}

.user-menu-item-danger {
  color: #ef4444;
}
.user-menu-item-danger:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

/* SVG icon utility - default štýl */
.svg-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ============================================================
   SORTABLE TABLE HEADERS + PAGINATION
   ============================================================ */

/* Klikateľné sort hlavičky */
.sortable-table th.th-sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background 0.12s ease, color 0.12s ease;
}

.sortable-table th.th-sortable:hover {
  background: rgba(91, 109, 216, 0.08);
  color: var(--accent);
}

.sortable-table th.th-sort-active {
  color: var(--accent);
  background: rgba(91, 109, 216, 0.06);
}

.th-sortable-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.th-sortable-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  opacity: 0.85;
}

.th-sortable-arrow:empty::before {
  /* Subtilný hint na neaktívnom stĺpci, aby používateľ vedel že je sortovateľný */
  content: '↕';
  font-size: 10px;
  opacity: 0.25;
  color: var(--text-tertiary);
}

.sortable-table th.th-sortable:hover .th-sortable-arrow:empty::before {
  opacity: 0.6;
}

/* Pagination kontroly */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.3);
  flex-wrap: wrap;
}

html[data-theme="dark"] .pagination {
  background: rgba(20, 26, 44, 0.4);
  border-top-color: rgba(255, 255, 255, 0.08);
}

.pag-info {
  font-size: 12px;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.pag-buttons {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pag-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.5);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  font-variant-numeric: tabular-nums;
}

.pag-btn:hover:not(:disabled) {
  background: rgba(91, 109, 216, 0.1);
  border-color: var(--accent);
  color: var(--accent);
}

.pag-btn.pag-active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  cursor: default;
}

.pag-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pag-dots {
  padding: 0 4px;
  color: var(--text-tertiary);
  font-size: 13px;
}

html[data-theme="dark"] .pag-btn {
  background: rgba(45, 56, 88, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

html[data-theme="dark"] .pag-btn:hover:not(:disabled) {
  background: rgba(124, 138, 230, 0.18);
  border-color: var(--accent);
}

/* ============================================================
   PASSWORD EXPIRY BANNER (zobrazí sa hore v .main keď je heslo blízko expirácie)
   ============================================================ */
.pwd-expiry-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 16px;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.14), rgba(245, 158, 11, 0.06));
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 10px;
  color: #92400e;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.pwd-expiry-banner:hover {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.1));
}

.pwd-expiry-icon {
  font-size: 16px;
  color: #f59e0b;
}

.pwd-expiry-banner > span:not(.pwd-expiry-icon) {
  flex: 1;
}

.pwd-expiry-close {
  background: transparent;
  border: none;
  color: #92400e;
  font-size: 20px;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

.pwd-expiry-close:hover {
  opacity: 1;
}

html[data-theme="dark"] .pwd-expiry-banner {
  color: #fbbf24;
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0.08));
}
html[data-theme="dark"] .pwd-expiry-close {
  color: #fbbf24;
}

/* ============================================================
   COOKIE INFO NOTICE (essential-only, info ne consent)
   ============================================================ */
.cookie-notice {
  position: fixed;
  bottom: 20px;
  left: 20px;
  right: 20px;
  max-width: 720px;
  margin: 0 auto;
  z-index: 1600;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-strong);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  animation: cookie-slide-up 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cookie-slide-up {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.cookie-notice-hide {
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.cookie-notice-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.cookie-notice-text {
  flex: 1;
  min-width: 240px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-primary);
}

.cookie-notice-text strong {
  color: var(--text-primary);
  font-weight: 700;
}

.cookie-notice-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
  margin-left: 4px;
}

.cookie-notice-link:hover {
  color: var(--accent-dark);
}

.cookie-notice-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .cookie-notice {
    bottom: 12px;
    left: 12px;
    right: 12px;
    padding: 12px 14px;
  }
  .cookie-notice-text {
    font-size: 11px;
  }
}

/* "Vždy aktívne" badge v cookies modále */
.cookie-badge-required {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(91, 109, 216, 0.12);
  color: var(--accent, #5b6dd8);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border: 1px solid rgba(91, 109, 216, 0.25);
  white-space: nowrap;
}

html[data-theme="dark"] .cookie-badge-required {
  background: rgba(124, 138, 230, 0.18);
  color: #a3b1ef;
  border-color: rgba(124, 138, 230, 0.35);
}

/* ============================================================
   OCCUPANCY HEATMAP (Reporty - obsadenosť po dňoch)
   ============================================================ */
:root {
  --heatmap-0: rgba(180, 195, 220, 0.25);   /* voľné */
  --heatmap-1: rgba(91, 109, 216, 0.20);    /* < 25 % */
  --heatmap-2: rgba(91, 109, 216, 0.45);    /* < 50 % */
  --heatmap-3: rgba(91, 109, 216, 0.72);    /* < 75 % */
  --heatmap-4: rgba(67, 80, 200, 0.95);     /* ≥ 75 % - tmavo */
}

html[data-theme="dark"] {
  --heatmap-0: rgba(80, 90, 120, 0.20);
  --heatmap-1: rgba(124, 138, 230, 0.25);
  --heatmap-2: rgba(124, 138, 230, 0.50);
  --heatmap-3: rgba(124, 138, 230, 0.78);
  --heatmap-4: rgba(155, 166, 236, 0.98);
}

.heatmap-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0;
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.heatmap-legend-cell {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  display: inline-block;
}

.heatmap-grid {
  display: grid;
  grid-template-columns: 50px repeat(31, 1fr);
  gap: 3px;
  min-width: 640px;
}

.heatmap-month-label {
  font-size: 11px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  font-variant-numeric: tabular-nums;
}

.heatmap-day-header {
  font-size: 9px;
  color: var(--text-tertiary);
  text-align: center;
  padding-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.heatmap-cell {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: var(--heatmap-0);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  cursor: default;
  min-height: 14px;
}

.heatmap-cell:hover {
  transform: scale(1.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  z-index: 1;
  position: relative;
}

.heatmap-cell.heatmap-empty {
  background: transparent;
}

.heatmap-cell.heatmap-0 { background: var(--heatmap-0); }
.heatmap-cell.heatmap-1 { background: var(--heatmap-1); }
.heatmap-cell.heatmap-2 { background: var(--heatmap-2); }
.heatmap-cell.heatmap-3 { background: var(--heatmap-3); }
.heatmap-cell.heatmap-4 { background: var(--heatmap-4); }

/* ============================================================
   PRIVACY POLICY MODAL + FOOTER LINK
   ============================================================ */
.footer-privacy-link {
  margin-left: 10px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  font-size: 11px;
  letter-spacing: 0.2px;
  transition: color 0.15s ease;
}

.footer-privacy-link:hover {
  color: var(--accent);
}

.privacy-policy {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 8px;
}

.privacy-policy h3 {
  font-size: 14px;
  font-weight: 700;
  margin: 18px 0 8px;
  color: var(--text-primary);
}

.privacy-policy h3:first-child {
  margin-top: 0;
}

.privacy-policy p {
  margin: 8px 0;
}

.privacy-policy ul {
  margin: 8px 0 8px 20px;
  list-style: disc;
}

.privacy-policy li {
  margin: 4px 0;
}

.privacy-policy strong {
  color: var(--text-primary);
  font-weight: 600;
}

.privacy-policy code {
  background: rgba(91, 109, 216, 0.1);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  font-size: 12px;
}

html[data-theme="dark"] .privacy-policy code {
  background: rgba(124, 138, 230, 0.15);
}

/* ============================================================
   ONBOARDING WIZARD (úvodný tour pri prvom prihlásení)
   ============================================================ */
.onboarding-step {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}

.onboarding-step p {
  margin: 8px 0;
}

.onboarding-step ol,
.onboarding-step ul {
  font-size: 13px;
  color: var(--text-secondary);
}

.onboarding-step kbd {
  display: inline-block;
  padding: 2px 6px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 4px;
  font-size: 11px;
  font-family: "SF Mono", "Menlo", "Consolas", monospace;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}

.onboarding-progress {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .onboarding-progress {
  border-top-color: rgba(255, 255, 255, 0.08);
}

.onboarding-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(91, 109, 216, 0.2);
  transition: all 0.2s ease;
}

.onboarding-dot-active {
  background: var(--accent);
  width: 24px;
  border-radius: 4px;
}

.onboarding-dot-done {
  background: var(--accent);
  opacity: 0.5;
}

/* ============================================================
   REPORTS - KPI YoY DELTA, LTV SEGMENTY, PRINT
   ============================================================ */

/* KPI delta (YoY zmena) */
.kpi-delta {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px;
}

.kpi-delta-arrow {
  font-size: 9px;
  position: relative;
  top: -1px;
}

.kpi-delta-label {
  color: var(--text-tertiary);
  font-weight: 400;
  font-size: 11px;
  margin-left: 4px;
}

.kpi-delta-up {
  color: var(--color-success);
}

.kpi-delta-down {
  color: var(--color-danger);
}

/* LTV segmenty - prehľadové karty */
.ltv-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.ltv-segment {
  padding: 12px 14px;
  background: rgba(91, 109, 216, 0.06);
  border-radius: 10px;
  border-left: 3px solid var(--accent);
}

html[data-theme="dark"] .ltv-segment {
  background: rgba(124, 138, 230, 0.10);
}

.ltv-segment-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.ltv-segment-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.ltv-segment-sub {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

/* I5: Print friendly CSS pre Reporty */
@media print {
  /* Vždy hidemax navigačné elementy pri tlači */
  .sidebar, .mobile-topbar, .desktop-topbar, .sidebar-backdrop, .footer,
  .cookie-notice, .pwd-expiry-banner,
  body::before {
    display: none !important;
  }

  /* Plná šírka pre obsah */
  .app {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .main {
    grid-column: 1 !important;
    padding: 16px !important;
    overflow: visible !important;
  }

  /* Page break pred každou veľkou sekciou */
  .glass-panel {
    page-break-inside: avoid;
    background: white !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
  }

  /* Skryj tlačidlá v hlavičke (Tlač, CSV, period tabs) */
  .page-actions {
    display: none !important;
  }

  /* Pri tlači použiť svetlú schému aj v dark mode */
  html[data-theme="dark"] body,
  body {
    background: white !important;
    color: black !important;
  }
  html[data-theme="dark"] .kpi-value,
  html[data-theme="dark"] .kpi-label,
  html[data-theme="dark"] .report-section-title,
  .kpi-value, .kpi-label, .report-section-title {
    color: black !important;
  }

  /* Tabuľky - jednoduché čierne čiary */
  table, table th, table td {
    background: white !important;
    color: black !important;
    border: 1px solid #ccc !important;
  }
  table th {
    background: #f0f0f0 !important;
  }

  /* Heatmap bunky musia ostať farebné aj v tlači */
  .heatmap-cell {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================================
   TOAST QUEUE (max 3 viditeľné, FIFO odchod, J2)
   ============================================================ */
.toast-container {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
  pointer-events: none;
  max-width: 92vw;
}

.toast {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  padding: 12px 20px;
  border-radius: 12px;
  box-shadow: var(--glass-shadow-strong);
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  max-width: 480px;
  word-wrap: break-word;
}

.toast.toast-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast.toast-hidden {
  opacity: 0;
  transform: translateY(20px);
}

.toast-success {
  border-left: 3px solid var(--color-success);
}

.toast-error {
  border-left: 3px solid var(--color-danger);
}

.toast-warning {
  border-left: 3px solid var(--color-warning);
}

html[data-theme="dark"] .toast {
  color: var(--text-primary);
}

/* ============================================================
   CONFIRM DIALOG (vlastný modal, J4)
   ============================================================ */
.confirm-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 4px 8px 16px;
}

.confirm-dialog-icon {
  font-size: 36px;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(91, 109, 216, 0.1);
  color: var(--accent);
  margin-bottom: 16px;
}

.confirm-dialog-icon-danger {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.confirm-dialog-message {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  line-height: 1.5;
}

.confirm-dialog-detail {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-top: 8px;
  white-space: pre-wrap;
  text-align: left;
  max-height: 280px;
  overflow-y: auto;
  width: 100%;
  padding: 10px 14px;
  background: rgba(91, 109, 216, 0.06);
  border-radius: 8px;
}

html[data-theme="dark"] .confirm-dialog-detail {
  background: rgba(124, 138, 230, 0.10);
}

/* Tlačidlo danger pre nebezpečné akcie - plný red fill (silnejší vizuálny signál) */
.btn-danger {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.18) 0%, rgba(224, 58, 58, 0.12) 100%);
  color: #d23a3a;
  border: 1px solid rgba(239, 68, 68, 0.32);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 4px 12px -4px rgba(224, 58, 58, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.btn-danger:hover {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.26) 0%, rgba(224, 58, 58, 0.18) 100%);
  border-color: rgba(224, 58, 58, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 7px 18px -5px rgba(224, 58, 58, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.btn-danger:active {
  background: linear-gradient(160deg, rgba(239, 68, 68, 0.30) 0%, rgba(224, 58, 58, 0.22) 100%);
  transform: translateY(0);
}

/* ============================================================
   SKELETONS (loading state pulzujúce šedé bloky, J1)
   ============================================================ */
.skel-line, .skel-block {
  display: inline-block;
  background: linear-gradient(90deg,
    rgba(91, 109, 216, 0.08) 0%,
    rgba(91, 109, 216, 0.16) 50%,
    rgba(91, 109, 216, 0.08) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: skel-pulse 1.4s ease-in-out infinite;
}

.skel-line {
  height: 14px;
  vertical-align: middle;
  margin: 4px 0;
}

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

html[data-theme="dark"] .skel-line,
html[data-theme="dark"] .skel-block {
  background: linear-gradient(90deg,
    rgba(124, 138, 230, 0.10) 0%,
    rgba(124, 138, 230, 0.22) 50%,
    rgba(124, 138, 230, 0.10) 100%);
  background-size: 200% 100%;
}

/* Skeleton overlay nad celou stránkou počas backendLoading */
.app-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

html[data-theme="dark"] .app-loading-overlay {
  background: rgba(10, 14, 26, 0.4);
}

.app-loading-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(91, 109, 216, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

.app-loading-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ============================================================
   FORM VALIDATION ERRORS (inline, J5)
   ============================================================ */
.form-control.form-control-error {
  border-color: var(--color-danger) !important;
  background: rgba(239, 68, 68, 0.04) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.10);
}

.form-control.form-control-error:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.20);
}

.form-field-error {
  font-size: 12px;
  color: var(--color-danger);
  margin-top: 5px;
  font-weight: 500;
  animation: form-error-slide 0.18s ease;
}

@keyframes form-error-slide {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   MOBILE BOTTOM SHEET (K3)
   ============================================================ */
/* Na mobile sa modal otvorí ako bottom sheet zo spodu, nie center modal.
   Lepší UX pre tap, dostupný pre palec. */
@media (max-width: 600px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh;
    max-height: 92dvh;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    /* Drag handle indikátor hore */
    position: relative;
  }

  .modal::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    z-index: 1;
  }

  html[data-theme="dark"] .modal::before {
    background: rgba(255, 255, 255, 0.2);
  }

  .modal-overlay.open .modal {
    transform: translateY(0);
  }

  .modal-header {
    padding-top: 24px;     /* miesto pre drag handle */
  }

  /* Wizard tiež ako bottom sheet */
  .wizard-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .wizard {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 95vh !important;
    max-height: 95dvh !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
  }
}

/* ============================================================
   PULL-TO-REFRESH INDIKÁTOR (K4)
   ============================================================ */
.ptr-indicator {
  height: 0;
  opacity: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(91, 109, 216, 0.06);
  color: var(--accent);
  border-radius: 0 0 12px 12px;
  margin: 0 -16px 8px;       /* prekrýva padding main */
  transition: height 0.05s linear, opacity 0.05s linear;
}

.ptr-indicator[data-ready="true"] {
  background: rgba(91, 109, 216, 0.14);
}

.ptr-spinner {
  width: 22px;
  height: 22px;
  border: 2.5px solid rgba(91, 109, 216, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.ptr-indicator[data-ready="true"] .ptr-spinner {
  transform: rotate(180deg);
}

.ptr-indicator.ptr-loading .ptr-spinner {
  animation: spin 0.8s linear infinite;
  transform: none;
}

html[data-theme="dark"] .ptr-indicator {
  background: rgba(124, 138, 230, 0.10);
}

html[data-theme="dark"] .ptr-indicator[data-ready="true"] {
  background: rgba(124, 138, 230, 0.20);
}

/* ============================================================
   MOBILE WIZARD LAYOUT (K1)
   ============================================================ */
@media (max-width: 600px) {
  /* Wizard steps - kompaktnejšie, čísla menšie */
  .wizard-steps {
    padding: 12px 8px !important;
    gap: 0 !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .wizard-step {
    flex-shrink: 0;
    min-width: 0;
    padding: 4px 6px !important;
  }

  .wizard-step-label {
    font-size: 11px !important;
    display: none;   /* schovaj texty, len čísla */
  }

  .wizard-step.active .wizard-step-label {
    display: block;  /* aktívny step ukáže label */
    font-size: 12px !important;
  }

  .wizard-step-number {
    width: 28px !important;
    height: 28px !important;
    font-size: 13px !important;
  }

  /* Wizard body - viac priestoru pre obsah, väčšie tap targety */
  .wizard-body {
    padding: 16px !important;
  }

  /* Form polia v wizarde majú väčšiu výšku pre mobile tap */
  .wizard .form-control {
    height: 44px;          /* iOS odporúčaná tap target výška */
    font-size: 16px;       /* zabraň Safari zoom pri focus na input */
  }

  .wizard textarea.form-control {
    height: auto;
    min-height: 88px;
  }

  /* Tlačidlá v ponuke apartmánov - väčšie, ľahšie sa tapuje */
  .wizard-apartman-card {
    padding: 16px !important;
    min-height: 80px;
  }

  /* Sticky footer s navigačnými tlačidlami */
  .wizard-footer {
    position: sticky;
    bottom: 0;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--glass-border);
    padding: 12px 16px !important;
    margin: 0 !important;
    z-index: 5;
  }

  .wizard-footer .btn {
    flex: 1;
    min-height: 44px;      /* tap target */
    padding: 0 16px !important;
  }

  /* Ak je tlačidlo iba jedno (Next bez Back), nech ide celé */
  .wizard-footer-right {
    flex: 1;
    display: flex;
    gap: 8px;
  }

  .wizard-footer-right .btn {
    flex: 1;
  }
}

/* Aj pre štandardný modal s formulárom - väčšie polia v mobile */
@media (max-width: 600px) {
  .modal .form-control {
    height: 44px;
    font-size: 16px;       /* zabraň Safari zoom */
  }

  .modal textarea.form-control {
    height: auto;
    min-height: 80px;
  }

  .modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--glass-bg-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 12px 16px !important;
    z-index: 5;
  }

  .modal-footer .btn {
    flex: 1;
    min-height: 44px;
  }
}

/* ============================================================
   TOUCH DRAG GHOST (H2 mobile)
   ============================================================ */
/* Pluvajúci náhľad rezervácie nasleduje prst pri touch drag.
   Inline styly v app.js prepíšu pozíciu, tu len defaultný look. */
.cal-drag-ghost {
  font-family: var(--font-family);
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

/* Počas touch dragu zabrániť scrollu celej stránky */
body.touch-dragging {
  overflow: hidden;
  touch-action: none;
}

/* ============================================================
   ERROR BOUNDARY OVERLAY (L1)
   ============================================================ */
.error-boundary-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 25, 50, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.error-boundary-panel {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(20, 25, 50, 0.4);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.error-boundary-icon {
  font-size: 48px;
  color: var(--color-danger);
  margin-bottom: 12px;
}

.error-boundary-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.error-boundary-message {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
  word-break: break-word;
}

.error-boundary-detail-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-tertiary);
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  align-self: flex-start;
}

.error-boundary-detail {
  width: 100%;
  height: 140px;
  font-family: "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 10px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
  margin-bottom: 16px;
  resize: vertical;
}

html[data-theme="dark"] .error-boundary-detail {
  background: rgba(0, 0, 0, 0.25);
}

.error-boundary-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================================
   OFFLINE BANNER (L2)
   ============================================================ */
.offline-banner {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px));
  left: 0;
  right: 0;
  z-index: 9500;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: white;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.3);
  transform: translateY(-100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.offline-banner.offline-banner-visible {
  transform: translateY(0);
}

.offline-banner-icon {
  font-size: 18px;
  flex-shrink: 0;
}

.offline-banner-text {
  flex: 1;
  line-height: 1.4;
}

/* Pri zobrazenom offline banner-i posuňem topbar dolu */
.offline-banner.offline-banner-visible ~ * .mobile-topbar {
  top: 38px;
}

/* ============================================================
   G3 - FILTER PANEL V REZERVÁCIÁCH
   ============================================================ */
.rez-filter-bar {
  margin-bottom: 16px;
  background: var(--glass-bg);
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  padding: 12px 14px;
}

.rez-filter-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.rez-filter-badge {
  display: inline-block;
  padding: 1px 6px;
  background: var(--accent);
  color: white;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  margin-left: 4px;
}

.rez-filter-presets {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  flex: 1;
}

.rez-filter-presets-label {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 4px;
}

.rez-filter-preset-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(91, 109, 216, 0.08);
  border: 1px solid rgba(91, 109, 216, 0.2);
  border-radius: 14px;
  padding: 2px;
  font-size: 12px;
  overflow: hidden;
}

.rez-filter-preset-chip button {
  background: transparent;
  border: none;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
}

.rez-filter-preset-chip button:first-child:hover {
  background: rgba(91, 109, 216, 0.15);
  border-radius: 12px 0 0 12px;
}

.rez-filter-preset-chip button:last-child {
  padding: 4px 8px;
  color: var(--text-tertiary);
  border-left: 1px solid rgba(91, 109, 216, 0.2);
}

.rez-filter-preset-chip button:last-child:hover {
  color: var(--color-danger);
  background: rgba(239, 68, 68, 0.1);
}

.rez-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--glass-border);
}

.rez-filter-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .rez-filter-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================
   INFO TIP BADGE (vysvetlivky inline pri labeli)
   ============================================================ */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(91, 109, 216, 0.12);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  cursor: help;
  margin-left: 6px;
  vertical-align: middle;
  font-style: normal;
  position: relative;
}

.info-tip:hover {
  background: rgba(91, 109, 216, 0.22);
}

.info-tip:hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  white-space: normal;
  text-align: left;
  background: #2a3142;
  color: #fff;
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  z-index: 1200;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

/* ============================================================
   PHONE INPUT (bod 4 z v1.0.9 fixov)
   ============================================================ */
/* Predvoľba krajiny vľavo + samotné číslo vpravo. Pri mobile sa stávajú
   plnej šírky a zostávajú na jednom riadku (predvoľba užšia, číslo zaberá zvyšok). */
.phone-input-group {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

.phone-input-prefix {
  flex: 0 0 auto;
  width: 130px;
  min-width: 120px;
}

.phone-input-number {
  flex: 1 1 auto;
  min-width: 0;
}

/* Pri inline form errore má phone-input-group span error class na input
   pre konzistentný vzhľad s ostatnými poliami */
.phone-input-group .form-control-error {
  border-color: var(--color-danger);
}

@media (max-width: 600px) {
  .phone-input-prefix {
    width: 120px;
    min-width: 110px;
    font-size: 13px;
  }
}

/* ============================================================
   UPRATOVANIE SUMMARY CARDS (mesiac štatistika pre admin/manager)
   ============================================================ */
.upr-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.upr-summary-card {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.upr-summary-card-highlight {
  background: linear-gradient(135deg, rgba(91, 109, 216, 0.08), rgba(91, 109, 216, 0.14));
  border-left: 3px solid var(--accent);
}

.upr-summary-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-tertiary);
}

.upr-summary-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
}

.upr-summary-card-highlight .upr-summary-value {
  color: var(--accent-dark);
}

.upr-summary-sub {
  font-size: 11px;
  color: var(--text-secondary);
}

/* ============================================================
   EXPORT BUTTON GROUP (CSV / XLSX vedľa seba)
   ============================================================ */
.export-btn-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.export-btn-group-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0 8px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.export-btn-group .btn {
  padding: 6px 10px;
  font-size: 12px;
}

/* ============================================================
   AUDIT LOG (N1)
   ============================================================ */
.audit-type-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}

.audit-type-success {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.audit-type-info {
  background: rgba(91, 109, 216, 0.12);
  color: var(--accent-dark);
}

.audit-type-warning {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.audit-type-danger {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

html[data-theme="dark"] .audit-type-success { color: #6ee7b7; }
html[data-theme="dark"] .audit-type-info    { color: #a5b4fc; }
html[data-theme="dark"] .audit-type-warning { color: #fcd34d; }
html[data-theme="dark"] .audit-type-danger  { color: #fca5a5; }

.audit-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border-top: 1px solid var(--glass-border);
}

.audit-page-info {
  font-size: 12px;
  color: var(--text-secondary);
}

.audit-log-info {
  margin-top: 12px;
  padding: 12px 14px;
  background: rgba(91, 109, 216, 0.05);
  border: 1px solid rgba(91, 109, 216, 0.15);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ============================================================
   QUICK EDIT STAVU REZERVÁCIE V ZOZNAME (bod 3 z 1.0.9-e)
   ============================================================ */
/* ============================================================
   STATUS PILL — pilulka s custom dropdown menu pre zmenu stavu
   Použité v: rezervácie, platby, údržba, upratovanie
   ============================================================ */

.status-pill {
  position: relative;
  display: inline-block;
}

/* Pilulka ako button - dedí farby z .badge.<status-class> */
.badge.badge-pill {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  font-family: inherit;
  user-select: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.badge.badge-pill:hover {
  box-shadow: 0 0 0 2px rgba(91, 109, 216, 0.25);
  transform: translateY(-1px);
}

.badge.badge-pill[aria-expanded="true"] {
  box-shadow: 0 0 0 2px rgba(91, 109, 216, 0.4);
}

.status-pill-chevron {
  opacity: 0.55;
  transition: opacity 0.15s, transform 0.2s;
  flex-shrink: 0;
}

.badge.badge-pill:hover .status-pill-chevron {
  opacity: 0.9;
}

.badge.badge-pill[aria-expanded="true"] .status-pill-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

/* Dropdown menu */
.status-pill-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 1500;
  min-width: 180px;
  background: var(--bg-elevated, #ffffff);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.10),
    0 2px 6px rgba(0, 0, 0, 0.04);
  padding: 4px;
  animation: status-pill-fade-in 0.12s ease-out;
}

html[data-theme="dark"] .status-pill-menu {
  background: #232733;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Smart placement - keď nie je miesto dolu */
.status-pill-menu.drop-up {
  top: auto;
  bottom: calc(100% + 6px);
  animation: status-pill-fade-in-up 0.12s ease-out;
}

/* Smart placement - keď pretečie vpravo */
.status-pill-menu.align-right {
  left: auto;
  right: 0;
}

@keyframes status-pill-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes status-pill-fade-in-up {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Položka v menu */
.status-pill-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  transition: background 0.1s;
}

.status-pill-option:hover {
  background: var(--bg-secondary);
}

.status-pill-option.is-selected {
  font-weight: 600;
}

.status-pill-option-text {
  flex: 1;
}

.status-pill-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94a3b8; /* fallback */
}

/* Status dot farby (zopakovať palety badge-ov, ale plnofarebné) */
.status-pill-dot.cakajuca,
.status-pill-dot.cakajuce,
.status-pill-dot.caka          { background: #f59e0b; }
.status-pill-dot.potvrdena     { background: #6366f1; }
.status-pill-dot.uhradena,
.status-pill-dot.prijata       { background: #4f46e5; }
.status-pill-dot.prebiehajuca,
.status-pill-dot.prebiehajuce,
.status-pill-dot.prebieha      { background: #10b981; }
.status-pill-dot.ukoncena,
.status-pill-dot.uvolnena,
.status-pill-dot.zrusene,
.status-pill-dot.zrusena,
.status-pill-dot.preskocene    { background: #94a3b8; }
.status-pill-dot.stornovana,
.status-pill-dot.zamietnuta    { background: #ef4444; }
.status-pill-dot.protinavrh    { background: #a855f7; }
.status-pill-dot.vratena       { background: #0ea5e9; }
.status-pill-dot.nove,
.status-pill-dot.naplanovane   { background: #6366f1; }
.status-pill-dot.v-rieseni     { background: #f59e0b; }
.status-pill-dot.vyriesene,
.status-pill-dot.hotovo        { background: #10b981; }

.status-pill-check {
  margin-left: auto;
  color: var(--accent, #5b6dd8);
  font-weight: bold;
  font-size: 14px;
  flex-shrink: 0;
}

/* ============================================================
   TOTALS ROW — riadok SPOLU v tabuľkách (financie, reporty)
   ============================================================ */

.totals-row {
  font-weight: 700;
  background: rgba(91, 109, 216, 0.06);
}

.totals-row td {
  border-top: 2px solid var(--border) !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  font-weight: 700;
}

.totals-row td:first-child {
  letter-spacing: 0.6px;
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ============================================================
   VÝNOSNOSŤ APARTMÁNOV TABUĽKA — konzistentná šírka stĺpcov medzi
   data riadkami a SPOLU
   ============================================================ */

.vynosnost-table {
  table-layout: auto;
  width: 100%;
}

.vynosnost-table th,
.vynosnost-table td {
  vertical-align: middle;
  padding: 10px 12px;
  white-space: nowrap;
}

.vynosnost-table th:first-child,
.vynosnost-table td:first-child {
  text-align: left;
  white-space: normal;
}

/* Obsadenosť - flex layout pre text + progress bar */
.obsadenost-cell {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.obsadenost-bar {
  width: 60px;
  height: 4px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

html[data-theme="dark"] .obsadenost-bar {
  background: rgba(255, 255, 255, 0.08);
}

.obsadenost-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* ============================================================
   KONFLIKTNÉ REZERVÁCIE (bod 2 z 1.0.9-e)
   ============================================================ */
.rez-conflict-row {
  background: rgba(245, 158, 11, 0.06);
  border-left: 3px solid #f59e0b;
}

html[data-theme="dark"] .rez-conflict-row {
  background: rgba(245, 158, 11, 0.10);
}

/* ============================================================
   PREDBEŽNÉ REZERVÁCIE (1.1.33)
   ============================================================ */
.rez-predbezna-row {
  background: rgba(245, 158, 11, 0.08) !important;
  border-left: 3px solid #f59e0b;
}

html[data-theme="dark"] .rez-predbezna-row {
  background: rgba(245, 158, 11, 0.14) !important;
}

.badge-predbezna {
  display: inline-block;
  padding: 2px 7px;
  background: rgba(245, 158, 11, 0.20);
  color: #92400e;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: middle;
  margin-right: 6px;
  border: 1px solid rgba(245, 158, 11, 0.35);
  animation: predbezna-pulse 2.5s ease-in-out infinite;
}

.badge-fa {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(16, 185, 129, 0.18);
  color: #065f46;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: middle;
  border: 1px solid rgba(16, 185, 129, 0.35);
  cursor: help;
}

html[data-theme="dark"] .badge-fa {
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
  border-color: rgba(16, 185, 129, 0.4);
}

.badge-predl {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(91, 109, 216, 0.16);
  color: #3730a3;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  vertical-align: middle;
  border: 1px solid rgba(91, 109, 216, 0.32);
  cursor: help;
}

html[data-theme="dark"] .badge-predl {
  background: rgba(129, 140, 248, 0.22);
  color: #c7d2fe;
  border-color: rgba(129, 140, 248, 0.4);
}

html[data-theme="dark"] .badge-predbezna {
  background: rgba(245, 158, 11, 0.25);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.5);
}

@keyframes predbezna-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18); }
}

.rez-predbezna-counter {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  background: rgba(245, 158, 11, 0.14);
  color: #92400e;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}

html[data-theme="dark"] .rez-predbezna-counter {
  background: rgba(245, 158, 11, 0.22);
  color: #fbbf24;
}

/* ============================================================
   PAGE SIZE SELECTOR (1.1.33)
   ============================================================ */
.pag-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 12px;
  color: var(--text-secondary);
}

.pag-size-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.pag-size-select {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated, #fff);
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
}

.pag-size-select:hover {
  border-color: var(--accent, #5b6dd8);
}

.pag-size-select:focus {
  outline: none;
  border-color: var(--accent, #5b6dd8);
  box-shadow: 0 0 0 2px rgba(91, 109, 216, 0.18);
}

html[data-theme="dark"] .pag-size-select {
  background: #232733;
}

.rez-conflict-icon {
  display: inline-block;
  color: #d97706;
  font-weight: 700;
  font-size: 13px;
  margin-right: 4px;
  cursor: help;
  animation: rez-conflict-pulse 2s ease-in-out infinite;
}

@keyframes rez-conflict-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.rez-conflict-counter {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: help;
}

html[data-theme="dark"] .rez-conflict-counter {
  background: rgba(245, 158, 11, 0.20);
  color: #fcd34d;
}

/* ============================================================
   LAST ACTIVITY BADGE (A2)
   ============================================================ */
.last-activity-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-tertiary);
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  white-space: nowrap;
  cursor: help;
}
html[data-theme="dark"] .last-activity-badge {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================================
   PRINT STYLES (D3 + D4)
   ============================================================ */
@media print {
  /* D4: vždy light theme pri tlači, bez ohľadu na nastavenie */
  html, body, html[data-theme="dark"] {
    background: #ffffff !important;
    color: #000000 !important;
  }

  /* Skry navigáciu, sidebar, footer, header, tlačidlá akcií */
  .sidebar,
  .top-toolbar,
  .footer,
  .page-actions,
  .modal-overlay,
  .toast-container,
  .global-search-modal,
  .onboarding-overlay,
  .bulk-action-bar,
  .rez-filter-bar,
  .upr-summary-cards,
  .audit-log-info,
  .cell-actions,
  .pull-to-refresh-indicator,
  .stav-quick-edit .quick-edit-select,
  button[data-action],
  .btn {
    display: none !important;
  }

  .layout-root,
  .main {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }

  .glass-panel {
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    page-break-inside: avoid;
  }

  table {
    page-break-inside: auto;
    width: 100% !important;
    border-collapse: collapse !important;
    background: #ffffff !important;
  }
  table thead { display: table-header-group; }
  table tr { page-break-inside: avoid; page-break-after: auto; }
  table thead th {
    background: #f0f0f0 !important;
    color: #000000 !important;
    border-bottom: 1px solid #000 !important;
    font-weight: 700 !important;
  }
  table tbody td {
    background: #ffffff !important;
    color: #000000 !important;
    border-bottom: 1px solid #ddd !important;
  }

  .page-title { font-size: 18pt !important; color: #000 !important; }
  .page-subtitle { font-size: 11pt !important; color: #555 !important; }

  .badge {
    border: 1px solid #999 !important;
    background: #f5f5f5 !important;
    color: #000 !important;
  }

  /* Pri tlači zobraz checkbox stĺpce ako prázdny priestor */
  th[style*="width: 32px"],
  td:has(input[type="checkbox"]) {
    display: none !important;
  }

  /* Page break tipy */
  h1, h2, h3 { page-break-after: avoid; }

  /* Hlavička na každej strane (názov zariadenia + dátum tlače) */
  @page {
    margin: 1.5cm;
  }
}

/* ============================================================
   D5: MOBILNÝ KALENDÁR - DENNÝ POHĽAD (kompaktnejšia tabuľka)
   ============================================================ */
@media (max-width: 700px) {
  /* Skry stĺpec "Termín pobytu" v dennom pohľade (málo miesta) */
  .kal-den-table th:nth-child(4),
  .kal-den-table td:nth-child(4) {
    display: none;
  }

  /* Kompaktnejšie texty v dennom pohľade */
  .kal-den-table {
    font-size: 12px;
  }

  .kal-den-table th,
  .kal-den-table td {
    padding: 8px 6px;
  }

  /* Hosť meno na 2 riadky ak treba */
  .kal-den-table td strong {
    display: inline-block;
    max-width: 100%;
    word-break: break-word;
  }

  /* Hint pre swipe na vrchu denného pohľadu */
  .kal-den-swipe-hint {
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 8px;
    margin-bottom: 8px;
    background: rgba(91, 109, 216, 0.06);
    border-radius: 8px;
  }

  /* Switcher view tlačidlá - menšie na mobile */
  .kal-view-switcher .kal-view-btn {
    padding: 6px 10px;
    font-size: 12px;
  }
}

/* Na desktope swipe hint skry */
.kal-den-swipe-hint {
  display: none;
}

/* ============================================================
   B1: EMAIL TEMPLATE EDITOR
   ============================================================ */
.email-template-editor {
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 12px 14px;
}

.email-template-editor summary {
  cursor: pointer;
  font-size: 13px;
  user-select: none;
  outline: none;
  padding: 4px 0;
}

.email-template-editor summary:hover {
  color: var(--accent-dark);
}

.email-template-editor[open] {
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 1px 4px rgba(91, 109, 216, 0.08);
}

html[data-theme="dark"] .email-template-editor {
  background: rgba(40, 50, 80, 0.30);
  border-color: rgba(124, 138, 230, 0.15);
}

html[data-theme="dark"] .email-template-editor[open] {
  background: rgba(40, 50, 80, 0.55);
}

/* ============================================================
   NOTIFIKAČNÝ ZVONČEK V SIDEBAR
   ============================================================ */
.sidebar-notif-bell {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 16px;
  margin: 0 0 8px 0;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-notif-bell:hover {
  background: rgba(91, 109, 216, 0.10);
  color: var(--text-primary);
}

.sidebar-notif-bell-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.sidebar-notif-bell-icon svg {
  width: 18px;
  height: 18px;
}

.sidebar-notif-bell-label {
  flex: 1;
}

.sidebar-notif-bell-count {
  background: var(--color-danger);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
  line-height: 1.2;
  animation: notif-bell-pulse 2s ease-in-out infinite;
}

@keyframes notif-bell-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

html[data-theme="dark"] .sidebar-notif-bell {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="dark"] .sidebar-notif-bell:hover {
  color: white;
}

/* ============================================================
   NOTIFIKAČNÝ PANEL - ZOZNAM
   ============================================================ */
.notif-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.notif-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

.notif-item:hover {
  background: rgba(91, 109, 216, 0.08);
  border-color: rgba(91, 109, 216, 0.20);
  transform: translateY(-1px);
}

.notif-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}

.notif-item-content {
  flex: 1;
  min-width: 0;
}

.notif-item-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.notif-item-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item-count {
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 12px;
  min-width: 26px;
  text-align: center;
}

html[data-theme="dark"] .notif-item {
  background: rgba(40, 50, 80, 0.40);
}

html[data-theme="dark"] .notif-item:hover {
  background: rgba(91, 109, 216, 0.18);
}

/* ============================================================
   B5: KNIHA HOSTÍ CUDZINCOV
   ============================================================ */
.knizka-hosti-table {
  font-size: 13px;
}

.knizka-row-sk {
  opacity: 0.55;
  font-style: italic;
}

html[data-theme="dark"] .knizka-row-sk {
  opacity: 0.5;
}

@media (max-width: 700px) {
  .knizka-hosti-table {
    font-size: 11px;
  }
  /* Skry menej kritické stĺpce na mobile (Účel) */
  .knizka-hosti-table th:nth-child(8),
  .knizka-hosti-table td:nth-child(8) {
    display: none;
  }
}

/* Pulz pri dedup-ovanom toaste (vizuálne potvrdenie že sa toast obnovil) */
@keyframes toast-pulse-anim {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(0) scale(1.05); }
}
.toast.toast-pulse {
  animation: toast-pulse-anim 0.3s ease-out;
}

/* ============================================================
   MODAL COMPACT (pre confirm dialog)
   ============================================================ */
.modal.modal-compact {
  max-width: 460px;
}

.modal.modal-compact .modal-header {
  padding: 16px 20px 12px;
}

.modal.modal-compact .modal-body {
  padding: 12px 20px 16px;
}

.modal.modal-compact .modal-footer {
  padding: 12px 20px 16px;
}

/* V compact móde už ikona + text v confirm-dialog má dosť dýchacieho priestoru,
   netreba ďalšie odsadenie */
.modal.modal-compact .confirm-dialog {
  padding: 8px 0 4px;
}

/* ===========================================================================
   CONFIRM OVERLAY - macOS-style glass dialog
   ===========================================================================
   Confirm dialog má vlastný overlay (.confirm-overlay) aby neprepísal modal
   pod ním. Vďaka tomu môže byť stack-ovaný cez existujúci modal. Štýl je
   intenzívnejší glass aby pôsobil ako dialog vrstva NAD aplikáciou. */
.confirm-overlay {
  z-index: 200;  /* nad bežnými modálmi (z-index 100) */
  background: rgba(20, 25, 50, 0.55);
}

html[data-theme="dark"] .confirm-overlay {
  background: rgba(8, 12, 26, 0.65);
}

.confirm-overlay .modal {
  /* Viac priehľadné + silnejší blur pre macOS-like efekt.
     Inset shadow pridáva subtle vnútorné svetlo (ako keď slnko presvitá cez sklo) */
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(80px) saturate(200%);
  -webkit-backdrop-filter: blur(80px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 30px 80px rgba(20, 25, 50, 0.40),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -1px 1px rgba(255, 255, 255, 0.2);
}

html[data-theme="dark"] .confirm-overlay .modal {
  background: rgba(28, 36, 58, 0.65);
  border-color: rgba(124, 138, 230, 0.30);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.65),
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(0, 0, 0, 0.20);
}

/* Footer v confirm dialogu - viac transparentný aby splynul s telom */
.confirm-overlay .modal-footer {
  background: rgba(255, 255, 255, 0.10);
  border-top-color: rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .confirm-overlay .modal-footer {
  background: rgba(0, 0, 0, 0.08);
  border-top-color: rgba(124, 138, 230, 0.08);
}

/* Header v confirm dialogu - bez výrazného border-bottom (čistejší vzhľad) */
.confirm-overlay .modal-header {
  border-bottom-color: rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .confirm-overlay .modal-header {
  border-bottom-color: rgba(124, 138, 230, 0.08);
}

@media (max-width: 600px) {
  .modal.modal-compact {
    max-width: 100%;
    /* Na mobile celá obrazovka aby tlačidlá boli viditeľné nad klávesnicou */
    width: 100%;
    height: auto;
    max-height: 90vh;
    border-radius: var(--radius-xl);
    align-self: center;
    margin: 0 16px;
  }
}

/* ============================================================
   READONLY FORM FIELDS - vizuálne odlíšiť polia ktoré sa nedajú meniť
   (napr. username pri editácii používateľa)
   ============================================================ */
.form-control[readonly],
.form-control.form-control-readonly {
  background: rgba(0, 0, 0, 0.04);
  color: var(--text-secondary);
  cursor: not-allowed;
  border-style: dashed;
  border-color: rgba(0, 0, 0, 0.10);
}

.form-control[readonly]:focus,
.form-control.form-control-readonly:focus {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: none;
}

html[data-theme="dark"] .form-control[readonly],
html[data-theme="dark"] .form-control.form-control-readonly {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  border-color: rgba(124, 138, 230, 0.15);
}

html[data-theme="dark"] .form-control[readonly]:focus,
html[data-theme="dark"] .form-control.form-control-readonly:focus {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(124, 138, 230, 0.20);
}

/* ============================================================
   GRID: action toolbar (frosted glass) + výber riadku
   ============================================================ */
.grid-action-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  box-shadow: var(--glass-shadow);
}
.grid-action-toolbar .grid-action-label { font-size: 13px; color: var(--text-secondary); }
.grid-action-toolbar .grid-action-buttons { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.grid-action-toolbar .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.grid-action-toolbar:not(.has-selection) { opacity: 0.92; }
.grid-action-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grid-action-right { display: flex; gap: 6px; flex-wrap: wrap; }

tr.grid-row-clickable { cursor: pointer; }
tr.grid-row-clickable:hover > td { background: var(--row-hover, rgba(91, 109, 216, 0.06)); }
tr.grid-row-selected > td { background: rgba(91, 109, 216, 0.12) !important; }
tr.grid-row-selected > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ============================================================
   Predbežná / PR – fialové tekuté sklo (ladí s indigo accentom)
   ============================================================ */
:root {
  --violet: #7c5cf0;
  --violet-dark: #6242cf;
  --violet-glow: rgba(124, 92, 240, 0.30);
}

/* In-page „⏱ Predbežná" (dashboard) – fialové sklo s hover liftom */
.btn-soft-primary {
  background: linear-gradient(135deg, rgba(124, 92, 240, 0.90), rgba(98, 66, 207, 0.92));
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
  color: #fff;
  border: 1px solid rgba(124, 92, 240, 0.55);
  box-shadow: 0 4px 14px rgba(124, 92, 240, 0.26);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.btn-soft-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(124, 92, 240, 0.38); }
.btn-soft-primary:active { transform: translateY(0); }

/* „PR" v topbare (desktop) – plné plastické fialové tlačidlo (viditeľné na tmavom) */
.dt-pr {
  background: linear-gradient(135deg, var(--violet), var(--violet-dark));
  border: none;
  color: #fff;
  box-shadow: 0 4px 14px rgba(124, 92, 240, 0.45);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.dt-pr:hover {
  background: linear-gradient(135deg, var(--violet), var(--violet-dark));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(124, 92, 240, 0.55);
}
.dt-pr:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(124, 92, 240, 0.40);
}

/* „PR" na mobile – plné plastické fialové tlačidlo */
.mobile-topbar-rezervacia {
  background: linear-gradient(135deg, var(--violet), var(--violet-dark)) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(124, 92, 240, 0.42);
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.mobile-topbar-rezervacia:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(124, 92, 240, 0.52); }
.mobile-topbar-rezervacia:active { transform: translateY(1px); box-shadow: 0 2px 6px rgba(124, 92, 240, 0.40); }

/* ============================================================
   Topbar ako sklenená bublina: zaoblená, šírka podľa obsahu,
   zarovnaná vpravo. Popis (názov pohľadu) je preč – nadpis
   nesie hlavička stránky pod barom.
   ============================================================ */
.desktop-topbar {
  justify-self: stretch;
  justify-content: flex-end;
  height: auto;
  gap: 8px;
  margin: 14px 14px 0 0;
  padding: 7px 10px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
}
html[data-theme="dark"] .desktop-topbar {
  background: rgba(28, 36, 58, 0.72);
  border-color: rgba(124, 138, 230, 0.20);
}
.desktop-topbar-actions { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.dt-search {
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-start;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}
.dt-search:hover { background: rgba(255, 255, 255, 0.65); }
.dt-search .dt-search-kbd { margin-left: auto; background: rgba(0, 0, 0, 0.06); color: var(--text-tertiary); }
html[data-theme="dark"] .dt-search { background: rgba(255, 255, 255, 0.06); color: #c9cfe6; }
html[data-theme="dark"] .dt-search:hover { background: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .dt-search .dt-search-kbd { background: rgba(255, 255, 255, 0.14); color: #dfe3f1; }
.dt-icon { color: var(--text-secondary); }
.dt-icon:hover { background: rgba(0, 0, 0, 0.06); }
html[data-theme="dark"] .dt-icon { color: #dfe3f1; }
html[data-theme="dark"] .dt-icon:hover { background: rgba(255, 255, 255, 0.12); }

/* Používateľský chip v hornom bare (desktop) + jeho menu */
.dt-user-wrap { position: relative; display: inline-flex; }
.dt-user {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: linear-gradient(135deg, var(--accent), var(--accent-dark));
  color: #fff;
  font-weight: 700; font-size: 13px; letter-spacing: 0.3px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative;
  box-shadow: 0 2px 8px var(--accent-glow, rgba(91, 109, 216, 0.35));
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.dt-user:hover { transform: translateY(-1px); box-shadow: 0 5px 14px var(--accent-glow, rgba(91, 109, 216, 0.45)); }
.dt-user:active { transform: translateY(0); }
.dt-user-dot {
  position: absolute; top: 1px; right: 1px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #ef4444; border: 2px solid #fff;
}
.dt-user-menu {
  position: absolute;
  top: calc(100% + 10px); right: 0;
  min-width: 220px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow-strong);
  padding: 6px;
  opacity: 0; transform: translateY(-8px) scale(0.97); transform-origin: top right;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 200;
}
.dt-user-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.dt-user-menu-head { padding: 8px 10px 8px; }
.dt-user-menu-name { font-weight: 700; font-size: 13px; color: var(--text-primary); }
.dt-user-menu-role { font-size: 11px; color: var(--text-tertiary); margin-top: 1px; }
.dt-user-menu-divider { height: 1px; background: var(--glass-border); margin: 6px 4px; }
.dt-user-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  background: transparent; border: none; border-radius: 9px;
  color: var(--text-secondary); font-size: 13px; font-family: inherit;
  cursor: pointer; text-align: left;
}
.dt-user-menu-item:hover { background: rgba(0, 0, 0, 0.05); color: var(--text-primary); }
.dt-user-menu-item svg { width: 16px; height: 16px; flex-shrink: 0; }
.dt-user-menu-danger { color: #dc2626; }
.dt-user-menu-danger:hover { background: rgba(220, 38, 38, 0.08); color: #dc2626; }
html[data-theme="dark"] .dt-user-menu { background: rgba(34, 42, 70, 0.96); border-color: rgba(124, 138, 230, 0.20); }
html[data-theme="dark"] .dt-user-menu-item:hover { background: rgba(255, 255, 255, 0.08); }
html[data-theme="dark"] .dt-user-dot { border-color: rgba(28, 36, 58, 0.9); }

/* Na desktope je používateľ v hornom bare, takže blok v sidebare skryjeme.
   Na mobile (drawer) zostáva, lebo desktop bar je tam skrytý. */
@media (min-width: 901px) {
  .sidebar-footer { display: none !important; }
}

/* ============================================================
   Harmonizácia: jednotný radius, frosted tónované,
   sklenený ghost hover, hover lift na ikonách lišty
   ============================================================ */
/* Jednotný radius prvkov hornej lišty (10px ako .btn) */
.dt-search, .dt-pr, .dt-nova { border-radius: 10px; }
.btn-icon { border-radius: 9px; }

/* Tónované „Upozornenie" ako frosted sklo (danger ostáva plná červená zámerne) */
.btn-warning {
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}

/* Ghost: sklenený hover namiesto sivého stmavenia */
.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.50);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html[data-theme="dark"] .btn-ghost:hover {
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Jemné nadvihnutie pri hover na ikonách hornej lišty (zvonček, deň/noc, odhlásenie) */
.dt-icon { transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease; }
.dt-icon:hover { transform: translateY(-1px); }

/* Press-down (stlačenie ako fyzické tlačidlo) pre zvyšné akčné tlačidlá */
.dt-nova:active { transform: translateY(1px); box-shadow: 0 2px 6px var(--accent-glow); }
.btn-primary:active { transform: translateY(1px); }
.btn-warning:active { transform: translateY(1px); }
.btn-soft-primary:active { transform: translateY(1px); }

/* ============================================================
   MOBILNÝ CHROME ZLADENÝ S DESKTOPOM (1.9.0)
   Mobilný horný bar a sidebar používajú rovnaké sklenené tokeny
   ako desktop, takže pôsobia konzistentne a prispôsobia sa téme.
   Override blok zámerne na konci, aby prebil staršie tmavé pravidlá.
   ============================================================ */
@media (max-width: 900px) {
  .mobile-topbar {
    background: var(--glass-bg);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-primary);
  }
  .mobile-topbar-title { color: var(--text-primary); }
  .mobile-burger span { background: var(--text-primary); }
  .mobile-burger:hover, .mobile-burger:active { background: rgba(0, 0, 0, 0.05); }

  .mobile-topbar-logout,
  .topbar-theme,
  .mobile-topbar .topbar-bell {
    color: var(--text-secondary);
    background: transparent;
  }
  .mobile-topbar-logout:hover, .mobile-topbar-logout:active,
  .topbar-theme:hover, .topbar-theme:active,
  .mobile-topbar .topbar-bell:hover, .mobile-topbar .topbar-bell:active {
    background: rgba(0, 0, 0, 0.06);
  }

  /* Rýchle PR tlačidlo ako akčný prvok (akcentová farba, ako "Rezervácia" na desktope) */
  .mobile-topbar-rezervacia {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border: none;
    color: #fff;
    box-shadow: 0 3px 10px var(--accent-glow, rgba(91, 109, 216, 0.35));
  }
  .mobile-topbar-rezervacia:hover,
  .mobile-topbar-rezervacia:active {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    transform: translateY(-1px);
    box-shadow: 0 5px 14px var(--accent-glow, rgba(91, 109, 216, 0.45));
  }

  /* Sidebar drawer ako sklenený panel: zaoblená pravá hrana a hĺbka */
  .sidebar {
    border-top-right-radius: 22px;
    border-bottom-right-radius: 22px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.40);
    overflow: hidden;
  }

  /* Tmavá téma: čitateľný hover na svetlom sklenenom bare */
  html[data-theme="dark"] .mobile-burger:hover,
  html[data-theme="dark"] .mobile-burger:active,
  html[data-theme="dark"] .mobile-topbar-logout:hover,
  html[data-theme="dark"] .topbar-theme:hover,
  html[data-theme="dark"] .mobile-topbar .topbar-bell:hover {
    background: rgba(255, 255, 255, 0.12);
  }
}

/* ============================================================
   MOBILNÝ FLOATING LAYOUT (1.9.0)
   Horný bar, pätička aj sidebar ako sklenené karty odsadené od
   okrajov, s rovnakou výškou barov. Pozadie na mobile bez animácie
   (na Safari sekalo pod sklenenými vrstvami).
   ============================================================ */
@media (max-width: 900px) {
  body::before { animation: none; }

  /* Horný bar floating: odsadený, zaoblený zo všetkých strán, bez čiary */
  .mobile-topbar {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    left: 8px;
    right: 8px;
    width: auto;
    max-width: none;
    height: 56px;
    padding: 0 8px;
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: var(--glass-shadow);
  }
  /* Obsah scrolluje POD floating barom (sklenený efekt), rezerva je v .main-scroll-inner */
  .app { padding-top: 0; }

  /* Pätička floating, rovnaká výška ako horný bar (56px) */
  .footer {
    margin: 8px;
    min-height: 56px;
    border-radius: 18px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    padding: 8px 14px;
    align-items: center;
    justify-content: center;
  }
  .footer-line { flex-wrap: wrap; gap: 6px 8px; font-size: 10px; line-height: 1.3; }

  /* Sidebar floating panel medzi horným barom a spodkom obrazovky */
  .sidebar {
    top: calc(env(safe-area-inset-top, 0px) + 72px);
    bottom: 8px;
    left: 8px;
    border-radius: 22px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.40);
  }

  /* Backdrop kryje celú plochu, bary nad ním plávajú */
  .sidebar-backdrop { inset: 0; }
}

/* ===== Inline vyhľadávanie v desktop bare (1.9.2) ===== */
.dt-search { position: relative; cursor: text; }
.dt-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  outline: none;
  color: var(--text-primary);
  font: inherit;
  font-size: 13px;
  padding: 0;
}
.dt-search-input::placeholder { color: var(--text-tertiary); }
.dt-search:focus-within { background: var(--glass-bg-strong); border-color: var(--accent); }
.dt-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  display: none;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  box-shadow: var(--glass-shadow);
  z-index: 1600;
  text-align: left;
}
.dt-search.open .dt-search-dropdown { display: block; }

/* ===== Jednotné ikonové tlačidlá v mobilnom bare (1.9.2) ===== */
@media (max-width: 900px) {
  .mobile-topbar { gap: 6px; }
  .mobile-topbar-title { font-size: 14px; }
  .mobile-topbar .topbar-search-icon,
  .mobile-topbar-rezervacia,
  .mobile-topbar-nova,
  .mobile-topbar .topbar-bell,
  .mobile-topbar .topbar-theme,
  .mobile-topbar-logout {
    width: 36px;
    min-width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s ease, transform 0.1s ease;
  }
  .mobile-topbar .topbar-search-icon { color: var(--text-secondary); background: transparent; border: none; }
  .mobile-topbar .topbar-search-icon:active,
  .mobile-topbar-rezervacia:active,
  .mobile-topbar-nova:active,
  .mobile-topbar .topbar-bell:active,
  .mobile-topbar .topbar-theme:active,
  .mobile-topbar-logout:active { transform: scale(0.90); }
  /* PR a Nová ako akčné (akcentové), rovnako veľké ako ostatné */
  .mobile-topbar-rezervacia,
  .mobile-topbar-nova {
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    border: none;
    color: #fff;
    font-size: 17px;
    box-shadow: 0 3px 10px var(--accent-glow, rgba(91, 109, 216, 0.35));
  }
}

/* ============================================================
   LIQUID GLASS DOLADENIE (1.9.3)
   - Bary ako frostené sklo (nie fialový podklad)
   - Ikonové tlačidlá s obrysom a odleskom (jednotné, desktop + mobil)
   - Sidebar: zatvorený úplne mimo (žiadny pás) + scrollovateľný
   - Mobilná pätička fixed, obsah pláva pod ňou
   ============================================================ */
.desktop-topbar,
.footer { background: var(--glass-bg-strong); }

.dt-icon,
.mobile-topbar .topbar-search-icon,
.mobile-topbar .topbar-bell,
.mobile-topbar .topbar-theme,
.mobile-topbar-logout {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.dt-icon:hover,
.mobile-topbar .topbar-search-icon:hover,
.mobile-topbar .topbar-bell:hover,
.mobile-topbar .topbar-theme:hover,
.mobile-topbar-logout:hover { background: var(--glass-bg-strong); }

@media (max-width: 900px) {
  .mobile-topbar { background: var(--glass-bg-strong); }

  /* Sidebar: zatvorený úplne mimo obrazovky (žiadny pás) + scroll */
  .sidebar {
    transform: translateX(calc(-100% - 16px));
    overflow: hidden auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Pätička floating ako fixed, obsah pláva pod ňou */
  .footer {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
    top: auto;
    margin: 0;
    z-index: 90;
  }
  .app { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 90px); }
}

/* ============================================================
   DOLADENIE 1.9.4
   - Bary priesvitnejšie (frostené sklo, nie biely panel)
   - Mobilná pätička pevná výška = horný bar, kompaktný obsah
   - Sidebar: skrytý scrollbar + jemný náznak (zoslabenie + šípka)
   ============================================================ */
.desktop-topbar,
.footer,
.mobile-topbar { background: rgba(255, 255, 255, 0.55); }
html[data-theme="dark"] .desktop-topbar,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .mobile-topbar { background: rgba(30, 38, 60, 0.55); }

/* Sidebar: scroll bez viditeľného posúvadla */
.sidebar { scrollbar-width: none; -ms-overflow-style: none; }
.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* Náznak, že je viac obsahu nižšie: zoslabenie spodku + šípka */
.sidebar.has-scroll-more::after {
  content: '⌄';
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 30px;
  margin-top: -30px;
  padding-bottom: 3px;
  font-size: 18px;
  font-weight: 700;
  color: var(--sidebar-text, rgba(255, 255, 255, 0.55));
  background: linear-gradient(to top, var(--sidebar-bg) 25%, transparent);
  pointer-events: none;
}

@media (max-width: 900px) {
  /* Pätička pevná výška = horný bar, kompaktný obsah */
  .footer { height: 56px; min-height: 56px; padding: 0 14px; }
  .footer .footer-made-by,
  .footer .footer-sep { display: none; }
  .footer-line { gap: 8px; font-size: 10px; flex-wrap: wrap; }
}

/* ============================================================
   STICKY BARY — obsah podchádza priesvitné sklo (1.9.5)
   Horná lišta aj pätička sú v tom istom scroll kontajneri (.main)
   ako obsah a sú sticky. Obsah tak fyzicky scrolluje popod ne.
   ============================================================ */
.main {
  grid-column: 2;
  grid-row: 1 / -1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.main-scroll-inner {
  flex: 1 0 auto;
  min-height: 0;
  padding: 58px 4px 58px;   /* rezerva, aby obsah nezačínal pod fixed barmi */
}
/* 1.9.8: bary plávajú fixed nad scrollujúcim obsahom. V Safari tak
   backdrop-filter vzorkuje reálny scrollujúci obsah pod nimi (sklenený
   efekt), nie fixné pozadie ako pri sticky v overflow kontajneri. */
.desktop-topbar {
  position: fixed;
  top: 14px;
  left: 278px;            /* 264px sidebar + 14px medzera */
  right: 14px;
  z-index: 30;
  margin: 0;
  justify-self: auto;
}
.footer {
  position: fixed;
  top: auto;
  bottom: 14px;
  left: 278px;
  right: 14px;
  z-index: 30;
  margin: 0;
  min-height: 52px;
  border-radius: 18px;
}

@media (max-width: 900px) {
  .main {
    grid-column: 1;
    padding: 8px;
  }
  .main-scroll-inner { padding: calc(env(safe-area-inset-top, 0px) + 72px) 2px 8px; }
  /* pätička späť na sticky (zrušenie fixed z 1.9.3) */
  .footer {
    position: sticky;
    left: auto;
    right: auto;
    bottom: 0;
    margin: 4px 0 0 0;
    height: auto;
    min-height: 52px;
  }
  /* .app už nepotrebuje rezervu pre fixed pätičku */
  .app { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* Sidebar náznak: malý centrovaný šíp (nie pruh), jemne pulzuje */
.sidebar { padding-bottom: 10px; }
.sidebar.has-scroll-more::after {
  content: '⌄';
  position: sticky;
  bottom: 6px;
  display: block;
  width: 30px;
  height: 22px;
  margin: -22px auto 0;
  line-height: 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: rgba(60, 72, 110, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 9px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: sidebarHintPulse 1.6s ease-in-out infinite;
}
@keyframes sidebarHintPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ============================================================
   PREHĽADOVÁ TABUĽKA AKO JEDNA BUBLINA (1.9.7)
   Filter/hľadanie, toolbar s akciami, tabuľka (hlavička aj telo)
   a paginácia sú jeden celok. Sekcie delia len jemné čiary.
   Vzor pre všetky prehľadové tabuľky.
   ============================================================ */
.grid-card {
  position: relative;
  background:
    linear-gradient(180deg, rgba(108, 126, 222, 0.10), rgba(108, 126, 222, 0.035)),
    var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow:
    0 22px 54px -16px rgba(30, 41, 82, 0.30),
    0 8px 22px -10px rgba(30, 41, 82, 0.18),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.80),
    inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  overflow: hidden;
  margin-bottom: 16px;
}
/* sklenený odlesk: jemný diagonálny pruh svetla v hornej časti bubliny */
.grid-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.16) 24%, rgba(255, 255, 255, 0) 58%);
  pointer-events: none;
  z-index: 0;
}
.grid-card > * { position: relative; z-index: 1; }
/* tmavšia hlavička tabuľky pre kontrast s telom */
.grid-card thead th {
  background: rgba(91, 109, 216, 0.12);
  color: #3f4684;
  border-bottom: 1px solid rgba(120, 138, 230, 0.18);
}
.grid-card thead th.th-sort-active {
  background: rgba(91, 109, 216, 0.18);
  color: #333a7a;
}
.grid-card > .table-wrapper { background: rgba(255, 255, 255, 0.55); }
.grid-card > .rez-filter-bar {
  margin: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 0;
  padding: 12px 16px;
}
.grid-card > .grid-action-toolbar {
  margin: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--glass-border);
  border-radius: 0;
  box-shadow: none;
  padding: 10px 16px;
}
.grid-card > .table-wrapper { border-radius: 0; }
.grid-card > .pagination {
  margin: 0;
  border-top: 1px solid var(--glass-border);
  background: transparent;
}
.grid-card > .empty-state { margin: 0; }
.grid-card > h3 { padding: 14px 16px 0; }
.grid-card > .report-section-title { padding: 14px 16px 8px; margin: 0; }

/* grid-card: tmavá téma (jemnejší rim a odlesk, tmavšie pruhy) */
html[data-theme="dark"] .grid-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    var(--glass-bg-strong);
  box-shadow:
    0 22px 54px -16px rgba(0, 0, 0, 0.55),
    0 8px 22px -10px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .grid-card::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 26%, rgba(255, 255, 255, 0) 60%);
}
html[data-theme="dark"] .grid-card thead th {
  background: rgba(124, 138, 230, 0.18);
  color: #c5cdf5;
  border-bottom-color: rgba(124, 138, 230, 0.22);
}
html[data-theme="dark"] .grid-card thead th.th-sort-active {
  background: rgba(124, 138, 230, 0.28);
  color: #dde3fb;
}
html[data-theme="dark"] .grid-card > .table-wrapper {
  background: rgba(30, 38, 64, 0.42);
}
html[data-theme="dark"] .grid-card > .pagination {
  background: transparent;
}

/* ============================================================
   KALENDÁR - sklenený vzhľad + plynulý prechod období (1.9.11)
   ============================================================ */
.kalendar-body {
  position: relative;
  overflow-x: clip;
  touch-action: pan-y;
  cursor: grab;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.05)),
    var(--glass-bg-strong);
  box-shadow:
    0 22px 54px -16px rgba(30, 41, 82, 0.28),
    0 8px 22px -10px rgba(30, 41, 82, 0.16),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.78);
}
.kalendar-body.kal-grabbing { cursor: grabbing; }
/* Počas ťahania vypneme sklenený blur (jeho prepočet na každom snímku seká).
   Po pustení (.kal-grabbing zmizne) sa blur vráti. */
.kalendar-body.kal-grabbing,
.kalendar-body.kal-grabbing * {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.kalendar-body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.10) 26%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
  z-index: 4;
}
.kalendar-slide { will-change: transform; }
@keyframes kalInRight {
  from { transform: translateX(46px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes kalInLeft {
  from { transform: translateX(-46px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.kalendar-slide.kal-in-right { animation: kalInRight 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.kalendar-slide.kal-in-left  { animation: kalInLeft 0.3s cubic-bezier(0.22, 1, 0.36, 1); }

html[data-theme="dark"] .kalendar-body {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
    var(--glass-bg-strong);
  box-shadow:
    0 22px 54px -16px rgba(0, 0, 0, 0.55),
    0 8px 22px -10px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}
html[data-theme="dark"] .kalendar-body::before {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 26%, rgba(255, 255, 255, 0) 60%);
}

/* Mini tabuľka cien podľa obsadenosti (konfigurácia apartmánu, 1.9.12) */
.ceny-osoby-table {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  background: rgba(33, 42, 66, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}
.ceny-osoby-row {
  display: grid;
  grid-template-columns: 1fr 130px;
  align-items: center;
  gap: 10px;
}
.ceny-osoby-label { font-size: 13px; color: var(--text-secondary); }
.ceny-osoby-input { text-align: right; }
html[data-theme="dark"] .ceny-osoby-table { background: rgba(14, 19, 36, 0.35); }

/* ============================================================
   iOS prepínače (výbava, pravidlá, vlastnosti apartmánu) 1.9.13
   ============================================================ */
.ios-tog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px 16px;
}
.ios-tog {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.ios-tog input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.ios-tog-track {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 25px;
  border-radius: 999px;
  background: rgba(120, 120, 128, 0.32);
  transition: background 0.22s ease;
}
.ios-tog-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 1px rgba(0, 0, 0, 0.16);
  transition: transform 0.22s cubic-bezier(0.4, 0.2, 0.2, 1);
}
.ios-tog input:checked + .ios-tog-track { background: #34c759; }
.ios-tog input:checked + .ios-tog-track .ios-tog-knob { transform: translateX(17px); }
.ios-tog input:focus-visible + .ios-tog-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.ios-tog-label { font-size: 13px; color: var(--text-primary); line-height: 1.25; }
html[data-theme="dark"] .ios-tog-track { background: rgba(120, 120, 128, 0.45); }