/**
 * Phase 179 — Mobile native (Capacitor APK) UI overrides.
 * Phase 181 — Tablet (Galaxy Tab S9+) detection: 768px+ = sidebar, < 768px = bottom tabs.
 * Phase 219 — Rozšířeno na pure web mobile (Safari iPhone, Chrome mobile, …).
 *
 * Aktivace přes body:where(.is-native-mobile, .is-mobile-web):
 *   - APK Capacitor → NativeBridge.init() přidá `is-native-mobile`
 *   - Pure web mobile (< 768px) → mobile_web_shell.js přidá `is-mobile-web`
 *   `:where()` má 0 specificity ale stejnou selectivitu jako `:is()` —
 *   funguje jako alias group bez kolize s ostatními selektory.
 *
 * Body classes:
 *   .is-native-mobile  — Capacitor APK (Android)
 *   .is-mobile-web     — Pure web < 768px (Safari iPhone, Chrome mobile, …)
 *   .is-native-android — Android Capacitor specific (call log scan, push)
 *   .is-phone          — < 768px (compact phone layout, bottom tabs)
 *   .is-tablet         — >= 768px (tablet, zachovat sidebar layout)
 */

/* Body padding pro Android status bar (dynamic island / notch safe area) */
body:where(.is-native-mobile, .is-mobile-web) {
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ============================================================
   PHONE LAYOUT (< 768px) — bottom tab bar, hidden sidebar
   ============================================================ */
body:where(.is-native-mobile, .is-mobile-web).is-phone .sidebar {
  display: none !important;
}
body:where(.is-native-mobile, .is-mobile-web).is-phone .main-content {
  margin-left: 0 !important;
  padding-bottom: 70px !important;  /* místo pro bottom tab bar */
}

/* Phone: bottom tab bar visible */
body:where(.is-native-mobile, .is-mobile-web).is-phone #mobileTabBar {
  display: flex;
}

/* ============================================================
   TABLET LAYOUT (>= 768px, např. Galaxy Tab S9+ 12.4") —
   zachovat sidebar (web look), žádné bottom tabs
   ============================================================ */
body:where(.is-native-mobile, .is-mobile-web).is-tablet .sidebar {
  display: flex !important;
}
body:where(.is-native-mobile, .is-mobile-web).is-tablet .main-content {
  /* Default desktop margin se zachová — sidebar má svou width */
  padding-bottom: 0 !important;
}
body:where(.is-native-mobile, .is-mobile-web).is-tablet #mobileTabBar {
  display: none !important;
}
/* Tablet stat grid — 4 sloupce jako desktop, ne 2 */
body:where(.is-native-mobile, .is-mobile-web).is-tablet .stats-grid {
  grid-template-columns: repeat(4, 1fr) !important;
}
/* Tablet modaly — větší ale ne fullscreen */
body:where(.is-native-mobile, .is-mobile-web).is-tablet .modal,
body:where(.is-native-mobile, .is-mobile-web).is-tablet #modalContainer > div {
  max-width: 90vw !important;
  max-height: 90vh !important;
  border-radius: 12px !important;
  margin: 5vh auto !important;
}

/* ============================================================
   FALLBACK — pokud detection class chybí (init race), default phone
   ============================================================ */
body:where(.is-native-mobile, .is-mobile-web):not(.is-phone):not(.is-tablet) .sidebar {
  display: none !important;
}
body:where(.is-native-mobile, .is-mobile-web):not(.is-phone):not(.is-tablet) .main-content {
  margin-left: 0 !important;
  padding-bottom: 70px !important;
}

/* Bottom tab bar — fixed, 5 hlavních sekcí */
body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--surface-default);
  border-top: 1px solid var(--border-soft);
  display: flex;
  align-items: stretch;
  z-index: 1000;
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}

body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar .mtab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 500;
  padding: 4px 0;
  transition: color .15s;
}
body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar .mtab .mtab-icon {
  font-size: 22px;
  line-height: 1;
}
body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar .mtab.active {
  color: var(--color-primary);
}
body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar .mtab .mtab-badge {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  background: #dc2626;
  color: white;
  font-size: 10px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* Větší tap targets na mobile (44×44 px Apple HIG / 48×48 Material) */
body:where(.is-native-mobile, .is-mobile-web) button,
body:where(.is-native-mobile, .is-mobile-web) .btn,
body:where(.is-native-mobile, .is-mobile-web) .nav-item,
body:where(.is-native-mobile, .is-mobile-web) a.btn {
  min-height: 44px;
}

/* Phase 183 fix: widget lock + fullscreen visible v tablet (12.4" má dost
   plochy), hide jen v phone (compact). msQuickAssist je Win-only stejně. */
body:where(.is-native-mobile, .is-mobile-web).is-phone #widgetLockBtn,
body:where(.is-native-mobile, .is-mobile-web).is-phone #fullscreenBtn,
body:where(.is-native-mobile, .is-mobile-web) #msQuickAssistBtn {
  display: none !important;
}
/* Tablet: zachovat lock + fullscreen v topbaru (web look) */
body:where(.is-native-mobile, .is-mobile-web).is-tablet #widgetLockBtn,
body:where(.is-native-mobile, .is-mobile-web).is-tablet #fullscreenBtn {
  display: flex !important;
}

/* Phone: stat cards stack 2 columns, tablet má svou rule výše (4 columns) */
body:where(.is-native-mobile, .is-mobile-web).is-phone .stats-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
body:where(.is-native-mobile, .is-mobile-web).is-phone .stat-card {
  padding: 12px !important;
  font-size: 13px !important;
}
body:where(.is-native-mobile, .is-mobile-web).is-phone .stat-card__value {
  font-size: 22px !important;
}

/* Page header simplified */
body:where(.is-native-mobile, .is-mobile-web) .page-header {
  padding: 12px 0 8px !important;
}
body:where(.is-native-mobile, .is-mobile-web) .page-header__title {
  font-size: 18px !important;
}

/* Phone: modaly fullscreen (mála plocha). Tablet má svou rule výše (90vw). */
body:where(.is-native-mobile, .is-mobile-web).is-phone .modal,
body:where(.is-native-mobile, .is-mobile-web).is-phone #modalContainer > div {
  max-width: 100vw !important;
  max-height: 100vh !important;
  border-radius: 0 !important;
  margin: 0 !important;
}

/* Click-to-call hint — link tel: dostane viditelné "📞 Volat" badge */
body:where(.is-native-mobile, .is-mobile-web) a[href^="tel:"] {
  background: rgba(34, 197, 94, .1);
  border: 1px solid rgba(34, 197, 94, .3);
  border-radius: 6px;
  padding: 6px 12px;
  text-decoration: none;
  color: #16a34a;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}

/* Floating helper a Quick FAB drobnější ať nepřekáží bottom tab baru */
body:where(.is-native-mobile, .is-mobile-web) #floatingHelper,
body:where(.is-native-mobile, .is-mobile-web) .quickFabContainer {
  bottom: 80px !important;  /* nad tab barem */
}

/* ============================================================
   PHASE 183 — Layout overrides z admin Mobile config
   body.mc-layout-{sidebar|top-nav|bottom-tabs} class
   ============================================================ */

/* Layout: sidebar (web look) — overrides bottom-tabs default v phone */
body:where(.is-native-mobile, .is-mobile-web).mc-layout-sidebar #mobileTabBar {
  display: none !important;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-sidebar .sidebar {
  display: flex !important;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-sidebar .main-content {
  padding-bottom: 0 !important;
}

/* Phase 185: Layout 'top-nav' — separate <div id="mobileTopNav"> element
   (mobile_topnav.js render). Sidebar zůstane hidden jako v bottom-tabs.
   Top nav bar je horizontální scrollable bar nad topbar. */
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav .sidebar {
  display: none !important;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav #mobileTabBar {
  display: none !important;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav .main-content {
  margin-left: 0 !important;
  padding-bottom: 0 !important;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav #mobileTopNav {
  position: sticky;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  height: 52px;
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-soft);
  display: flex !important;
  flex-direction: row;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  z-index: 1100;
  padding: 6px 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  scrollbar-width: thin;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav #mobileTopNav::-webkit-scrollbar {
  height: 3px;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav #mobileTopNav .mtn-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text-default);
  font-size: 13px;
  font-weight: 500;
  margin-right: 4px;
  min-height: 44px;
  white-space: nowrap;
  transition: background .15s;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav #mobileTopNav .mtn-item:hover,
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav #mobileTopNav .mtn-item:active {
  background: var(--surface-muted);
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav #mobileTopNav .mtn-item.active {
  background: var(--color-primary);
  color: white;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav #mobileTopNav .mtn-icon {
  font-size: 18px;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-top-nav #mobileTopNav .mtn-label {
  font-size: 13px;
}

/* Při top-nav nezobrazuj #mobileTopNav v jiných layoutech */
body:where(.is-native-mobile, .is-mobile-web):not(.mc-layout-top-nav) #mobileTopNav {
  display: none !important;
}

/* ============================================================
   PHASE 186 — User-level scaling + responsive
   --app-font-scale: nastaveno UserPrefs.applyAll() (default 1.0)
   ============================================================ */

:root {
  --app-font-scale: 1.0;
  --app-font-base: 14px;
}

/* Global body scaling — všechen text + UI prvky */
body {
  font-size: calc(var(--app-font-base) * var(--app-font-scale));
}

/* Stat card values škálují */
.stat-card__value {
  font-size: calc(28px * var(--app-font-scale)) !important;
}
.stat-card__label {
  font-size: calc(13px * var(--app-font-scale)) !important;
}

/* Page header titulek */
.page-header__title {
  font-size: calc(24px * var(--app-font-scale)) !important;
}

/* Buttony — větší tap target s scale */
.btn, .nav-item, button {
  font-size: calc(14px * var(--app-font-scale));
}
.btn-sm {
  font-size: calc(12px * var(--app-font-scale));
}

/* Form inputy + select */
.form-control, input, select, textarea {
  font-size: calc(14px * var(--app-font-scale));
}

/* Sidebar nav items */
.nav-item {
  padding: calc(8px * var(--app-font-scale)) calc(12px * var(--app-font-scale));
}

/* ============================================================
   PHASE 186 — Auto-responsive scaling per device size
   ============================================================ */

/* Compact phone — scale UP slightly aby tappable area byla větší */
@media (max-width: 480px) {
  body {
    --app-font-base: 15px;  /* base 15 místo 14 pro malé telefony */
  }
  .btn, .nav-item, button {
    min-height: 44px;
  }
}

/* Large phone / small tablet portrait */
@media (min-width: 481px) and (max-width: 767px) {
  body {
    --app-font-base: 14px;
  }
}

/* Tablet portrait + landscape (Galaxy Tab S9+) */
@media (min-width: 768px) and (max-width: 1199px) {
  body {
    --app-font-base: 15px;  /* tablet má víc místa, lepší čitelnost */
  }
}

/* Desktop */
@media (min-width: 1200px) {
  body {
    --app-font-base: 14px;
  }
}

/* ============================================================
   PHASE 186 — Landscape orientation handling
   ============================================================ */

/* Landscape phone — sidebar je space hog, top-nav lepší volba.
   Ale necháme admin/user volbu — tady jen safety adjustments. */
@media (orientation: landscape) and (max-height: 480px) {
  /* Compact landscape — header menší aby content měl víc místa */
  .page-header {
    padding: 4px 0 4px !important;
  }
  body:where(.is-native-mobile, .is-mobile-web).is-phone #mobileTabBar {
    height: 50px;  /* snižíme z default 60px */
  }
}

/* Landscape tablet — víc obsahu vedle sebe */
@media (orientation: landscape) and (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ============================================================
   PHASE 188 — Mobile Dashboard (native compact layout)
   Tomášův spec: "Dashboard stručnější než web", "nativně udělané"
   ============================================================ */

/* Fix masivní red page header v APK phone — Phase 187 found, ten header
   byl vlastně topbar s primary background. V mobile dashboardu skryjeme
   page-header úplně, máme vlastní md-greeting. */
body:where(.is-native-mobile, .is-mobile-web).is-phone .mobile-dashboard ~ .page-header,
body:where(.is-native-mobile, .is-mobile-web).is-phone .mobile-dashboard .page-header {
  display: none !important;
}

.mobile-dashboard {
  padding: 12px;
  padding-bottom: 80px;  /* nad bottom tab barem */
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 100%;
}

/* 1. Greeting — kompaktní (NE masivní red banner) */
.md-greeting {
  padding: 4px 4px;
}
.md-greeting__title {
  font-size: calc(20px * var(--app-font-scale, 1));
  font-weight: 700;
  font-family: var(--font-display);
  margin-bottom: 2px;
}
.md-greeting__date {
  font-size: calc(13px * var(--app-font-scale, 1));
  color: var(--text-muted);
  text-transform: capitalize;
}

/* 2. Quick actions — 4 buttons row */
.md-quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.md-qa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 4px;
  background: var(--surface-default);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  cursor: pointer;
  min-height: 64px;
  transition: transform .1s, background .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.md-qa:active {
  transform: scale(0.96);
  background: var(--surface-muted);
}
.md-qa__icon {
  font-size: 22px;
  line-height: 1;
}
.md-qa__label {
  font-size: calc(11px * var(--app-font-scale, 1));
  font-weight: 600;
  color: var(--text-default);
}

/* 3. Stats 2×2 grid */
.md-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.md-stat {
  background: var(--surface-default);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  transition: transform .1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.md-stat:active {
  transform: scale(0.97);
}
.md-stat--primary {
  background: linear-gradient(135deg, rgba(227,30,36,0.08), rgba(227,30,36,0.02));
  border-color: rgba(227,30,36,0.2);
}
.md-stat--warning {
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(245,158,11,0.02));
  border-color: rgba(245,158,11,0.2);
}
.md-stat--success {
  background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
  border-color: rgba(34,197,94,0.2);
}
.md-stat__value {
  font-size: calc(28px * var(--app-font-scale, 1));
  font-weight: 800;
  line-height: 1.1;
  font-family: var(--font-display);
}
.md-stat__label {
  font-size: calc(11px * var(--app-font-scale, 1));
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 2px;
}

/* 4-6. Sections (Dnes / Expirující / Recent) */
.md-section {
  background: var(--surface-default);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.md-section--alert {
  background: rgba(245,158,11,0.06);
  border-color: rgba(245,158,11,0.25);
}
.md-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 4px;
}
.md-section__title {
  font-size: calc(14px * var(--app-font-scale, 1));
  font-weight: 700;
}
.md-section__more {
  background: transparent;
  border: none;
  color: var(--color-primary);
  font-size: calc(12px * var(--app-font-scale, 1));
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  -webkit-tap-highlight-color: transparent;
}
.md-empty {
  text-align: center;
  padding: 16px;
  color: var(--text-muted);
  font-size: calc(13px * var(--app-font-scale, 1));
}

/* Item v section (schůzka / klient / úkol) */
.md-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s;
  min-height: 56px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.md-item:active {
  background: var(--surface-muted);
}
.md-item__time {
  font-size: calc(13px * var(--app-font-scale, 1));
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-mono);
  min-width: 44px;
  text-align: center;
}
.md-item__avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.md-item__main {
  flex: 1;
  min-width: 0;
}
.md-item__title {
  font-size: calc(14px * var(--app-font-scale, 1));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.md-item__sub {
  font-size: calc(12px * var(--app-font-scale, 1));
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.md-item__call {
  background: rgba(34,197,94,0.12);
  color: #16a34a;
  border-radius: 8px;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 18px;
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

/* ============================================================
   PHASE 188 — Native UX polish
   ============================================================ */

/* Smooth scroll všude na mobile */
body:where(.is-native-mobile, .is-mobile-web) {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

/* Instant tap (no 300ms delay), no tap highlight (custom feedback) */
body:where(.is-native-mobile, .is-mobile-web) button,
body:where(.is-native-mobile, .is-mobile-web) .nav-item,
body:where(.is-native-mobile, .is-mobile-web) a,
body:where(.is-native-mobile, .is-mobile-web) .stat-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Page transitions (subtle slide-in) */
body:where(.is-native-mobile, .is-mobile-web) .main-content > * {
  animation: md-fadeIn .2s ease-out;
}
@keyframes md-fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Page header v APK je celkem zbytečné (mobile dashboard má vlastní greeting,
   ostatní pages mají v topbar title). Odstraníme red banner appearance. */
body:where(.is-native-mobile, .is-mobile-web).is-phone .page-header {
  padding: 8px 4px !important;
  margin-bottom: 8px !important;
  background: transparent !important;
  border: none !important;
}
body:where(.is-native-mobile, .is-mobile-web).is-phone .page-header__title {
  font-size: calc(18px * var(--app-font-scale, 1)) !important;
  color: var(--text-default) !important;
  background: transparent !important;
}

/* ============================================================
   PHASE 189 — APK simplified UX (Tomáš: "ne web v simulaci aplikace")
   ============================================================ */

/* Tablet APK — stručnější sidebar (méně padding, hide footer info) */
body:where(.is-native-mobile, .is-mobile-web).is-tablet .sidebar {
  /* Slimmer sidebar pro APK tablet */
  width: 240px !important;
}
body:where(.is-native-mobile, .is-mobile-web) .sidebar__user-role {
  display: none;  /* role label v footer není v APK potřeba */
}
body:where(.is-native-mobile, .is-mobile-web) .sidebar__logo {
  /* Logo menší + bez gradient backgrounds */
  padding: 12px 14px !important;
}

/* Section labels — drobné, decentní v APK */
body:where(.is-native-mobile, .is-mobile-web) .nav-section-label {
  font-size: calc(10px * var(--app-font-scale, 1)) !important;
  padding: 8px 14px 4px !important;
  letter-spacing: 0.5px;
  opacity: 0.6;
}

/* APK nav items — větší tap target, méně vizuálního noise */
body:where(.is-native-mobile, .is-mobile-web) .nav-item {
  padding: 12px 14px !important;
  font-size: calc(14px * var(--app-font-scale, 1)) !important;
  border-radius: 8px !important;
  margin: 2px 8px !important;
}
body:where(.is-native-mobile, .is-mobile-web) .nav-item:active {
  background: var(--surface-muted) !important;
}

/* APK topbar — minimal (jen logo + bell + add) */
body:where(.is-native-mobile, .is-mobile-web) .topbar {
  padding: 8px 12px !important;
  min-height: 48px !important;
}
body:where(.is-native-mobile, .is-mobile-web) .topbar__logo,
body:where(.is-native-mobile, .is-mobile-web) .topbar__title {
  font-size: calc(15px * var(--app-font-scale, 1)) !important;
}

/* Hide version "v1.0.0" string z footeru v APK */
body:where(.is-native-mobile, .is-mobile-web) .login-card__subtitle ~ div,
body:where(.is-native-mobile, .is-mobile-web) .sidebar__footer .text-small {
  display: none;
}

/* ============================================================
   PHASE 191/192 — APK Shell (čistá aplikace, žádný flash plného sidebaru)

   Strategie:
   - is-apk-early class na <html>+<body> → CSS preventivně skryje admin
     sidebar items + topbar extras IHNED po DOMContentLoaded (před prvním
     paint). Apply z apk_shell.js DOMContentLoaded handler.
   - apk-shell-active class přidaná po ApkShell.applyShell() → DOM rewrite
     hotov, sidebar má 9 items, můžeme normálně render.
   ============================================================ */

/* Phase 192 — early hide (před applyShell): skryj VŠECHNY items v APK.
   ApkShell.applyShell() je ASAP přepíše a tato pravidla pak nemají efekt
   (HTML obsahuje jen 9 items s nav-allowed class). */
html.is-apk-early body .sidebar__nav .nav-item:not(.nav-allowed) {
  display: none !important;
}
html.is-apk-early body .sidebar__nav .nav-section-label {
  display: none !important;
}

/* Topbar extras hidden by default v APK (early flash prevention) */
html.is-apk-early body #cmdPaletteBtn,
html.is-apk-early body #voiceCmdBtn,
html.is-apk-early body #widgetLockBtn,
html.is-apk-early body #fullscreenBtn,
html.is-apk-early body #msQuickAssistBtn,
html.is-apk-early body #feedbackButton,
html.is-apk-early body #pwaInstallBanner,
html.is-apk-early body #sidebarMobileAppLink {
  display: none !important;
}

/* Phase 191 — apk-shell-active = ApkShell.applyShell() doběhl */
body.apk-shell-active .sidebar__nav .nav-section-label {
  display: none !important;
}

/* Phase 192 — smooth page transitions v APK (žádné flicker) */
body.apk-shell-active .main-content {
  transition: opacity .15s ease-out;
}

/* ============================================================
   PHASE 192 — Mobile UI polish (phone < 768px)
   "aby to dobře vypadalo i na mobilu"
   ============================================================ */

/* Mobile dashboard — extra spacing/sizing finess pro phone */
@media (max-width: 480px) {
  .mobile-dashboard {
    padding: 10px;
    gap: 12px;
  }
  .md-greeting__title { font-size: calc(18px * var(--app-font-scale, 1)); }
  .md-greeting__date { font-size: calc(12px * var(--app-font-scale, 1)); }
  .md-quick-actions { gap: 6px; }
  .md-qa { padding: 10px 4px; min-height: 60px; }
  .md-qa__icon { font-size: 20px; }
  .md-qa__label { font-size: calc(10px * var(--app-font-scale, 1)); }
  .md-stats { gap: 6px; }
  .md-stat { padding: 12px 10px; }
  .md-stat__value { font-size: calc(24px * var(--app-font-scale, 1)); }
  .md-section { padding: 10px; }
  .md-item { padding: 8px 6px; min-height: 52px; }
  .md-item__title { font-size: calc(13px * var(--app-font-scale, 1)); }
  .md-item__sub { font-size: calc(11px * var(--app-font-scale, 1)); }
}

/* Bottom tab bar polish — větší icons, lepší padding pro thumb-reach */
body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar {
  height: 64px;  /* větší než 60px pro thumb-friendly area */
}
body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar .mtab {
  padding: 8px 0;
  gap: 3px;
  position: relative;
  transition: color .12s, background .12s;
}
body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar .mtab:active {
  background: var(--surface-muted);
}
body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar .mtab .mtab-icon {
  font-size: 24px;  /* větší ikon */
}
body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar .mtab .mtab-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
}
body:where(.is-native-mobile, .is-mobile-web) #mobileTabBar .mtab.active::before {
  /* Aktivní tab indicator — small dot nebo pruh */
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 3px;
  background: var(--color-primary);
  border-radius: 0 0 3px 3px;
}

/* Modal v APK phone — fullscreen zachovat ale s respekt safe area */
body:where(.is-native-mobile, .is-mobile-web).is-phone .modal,
body:where(.is-native-mobile, .is-mobile-web).is-phone #modalContainer > div {
  padding-top: calc(12px + env(safe-area-inset-top, 0)) !important;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important;
}

/* Hot section — extra padding bottom v APK aby tab bar nezakrýval poslední item */
body:where(.is-native-mobile, .is-mobile-web).is-phone .main-content {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
}

/* Login form polish v APK — větší inputs, větší button */
body:where(.is-native-mobile, .is-mobile-web) #loginForm input.form-control {
  font-size: 16px;  /* prevent iOS zoom on focus */
  padding: 14px 12px;
  min-height: 48px;
}
body:where(.is-native-mobile, .is-mobile-web) #loginBtn {
  min-height: 52px;
  font-size: 16px;
  font-weight: 700;
}

/* ============================================================
   PHASE 193 — Light theme sidebar fix
   Phase 196 — přesunuto do main.css (univerzální web+APK).
   Zde zůstává jen topbar override pro APK kde topbar nemá vlastní light variant.
   ============================================================ */

/* Topbar light theme — readable v APK i webu (žádný APK prefix, univerzální). */
html[data-theme="light"] body:not(.dark-mode) .topbar {
  background: #ffffff !important;
  color: #1a1a1a !important;
  border-bottom: 1px solid #e5e7eb !important;
}
html[data-theme="light"] body:not(.dark-mode) .page-header__title {
  color: #1a1a1a !important;
}

/* Layout: bottom-tabs — explicit (i v tablet mode) */
body:where(.is-native-mobile, .is-mobile-web).mc-layout-bottom-tabs .sidebar {
  display: none !important;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-bottom-tabs .main-content {
  margin-left: 0 !important;
  padding-bottom: 70px !important;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-bottom-tabs #mobileTabBar {
  display: flex !important;
}

/* Phase 189 — Layout: sidebar-right (vpravo místo vlevo) */
body:where(.is-native-mobile, .is-mobile-web).mc-layout-sidebar-right #mobileTabBar {
  display: none !important;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-sidebar-right .sidebar {
  display: flex !important;
  position: fixed !important;
  right: 0 !important;
  left: auto !important;
  top: 0;
  height: 100%;
  border-left: 1px solid var(--border-soft);
  border-right: none !important;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-sidebar-right .main-content {
  margin-left: 0 !important;
  margin-right: 240px !important;
  padding-bottom: 0 !important;
}
body:where(.is-native-mobile, .is-mobile-web).mc-layout-sidebar-right .topbar {
  margin-right: 240px !important;
  margin-left: 0 !important;
}

/* ============================================================
   PHASE 219.1 — Konsolidace mobile shell pro pure web (Safari iPhone)

   Projekt měl 2 paralelní mobilní systémy:
     1. Legacy (main.css @media max-width:768px) — `.mobile-topbar`,
        `.bottom-nav`, `.fab`. Sidebar přes `transform: translateX(-100%)`
        který kradl flex prostor → main-content squashed na ~135px.
     2. Phase 179+ (mobile_native.css) — `#mobileTabBar`, `.mobile-dashboard`,
        sidebar `display:none` (správně vyřazený z layoutu).

   Phase 219 aktivovala #2 pro pure web. Aby nebyly oba zobrazené najednou,
   skrýváme legacy elementy + force-disable legacy media-query overrides.
   APK Capacitor nezasaženo (NativeBridge přidá `is-native-mobile`, ne
   `is-mobile-web` — tato sekce je `is-mobile-web`-specific).
   ============================================================ */

/* Hide legacy mobile elements v pure web (Safari iPhone, Chrome mobile). */
body.is-mobile-web .mobile-topbar,
body.is-mobile-web .bottom-nav,
body.is-mobile-web #fab,
body.is-mobile-web .fab {
  display: none !important;
}

/* Re-enable Phase 179+ stylizovaný .topbar (legacy media query ho má display:none). */
body.is-mobile-web .topbar {
  display: flex !important;
}

/* Sidebar — legacy main.css používá `transform: translateX(-100%)` který
   zachová flex space (240px). My děláme `display:none` aby se vyřadil
   z `.app-layout` flex layoutu — main-content pak dostane plnou šířku. */
body.is-mobile-web .sidebar {
  display: none !important;
  transform: none !important;  /* zruš legacy transform pro jistotu */
}

/* main-content — legacy media query má `margin-left: 0` ✓, ale main.css
   default má `max-width: calc(100vw - var(--sidebar-width))` který by stále
   omezoval šířku. Force full viewport width v pure web phone. */
body.is-mobile-web .main-content {
  margin-left: 0 !important;
  max-width: 100vw !important;
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
}

/* Floating helper + Quick FAB + Feedback FAB nad bottom tab bar (ne přes content).
   Phase 219.2 fix: dříve `.quickFabContainer` selector neexistuje — quick_fab.js
   přiděluje `id="quickFab"`. Plus přidán `#feedbackFAB`. */
body.is-mobile-web #floatingHelper,
body.is-mobile-web #quickFab,
body.is-mobile-web #feedbackFAB {
  bottom: calc(80px + env(safe-area-inset-bottom, 0)) !important;
}

/* ============================================================
   PHASE 219.2 — Drawer-style sidebar pro pure web mobile + hamburger menu

   Tomáš 2026-05-07: "chybí mi tam menu které by na klik se zobrazilo a mohl
   zavřít". Bottom tab bar (Phase 179) renderuje JS-em a v některých race
   conditions nemusí být k dispozici → hamburger drawer je vždy dostupná
   navigation cesta. Klasický mobile UX pattern.
   ============================================================ */

/* Hamburger menu button — viditelný v pure web mobile, hidden APK + desktop */
#mobileHamburgerBtn { display: none !important; }
body.is-mobile-web #mobileHamburgerBtn {
  display: inline-flex !important;
}

/* Sidebar drawer — Phase 219.1 měla display:none. Tady ji znovu aktivujeme
   ale jako fixed-position drawer který se slide-in zleva po kliknutí.
   Default state: skrytý mimo viewport (translateX -100%).
   .open state: posunut zpět (translateX 0).
   Phase 219.4: zúženo z 280px → 240px (Tomáš: "menu je moc široké"). */
body.is-mobile-web .sidebar {
  display: flex !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  width: 240px !important;
  max-width: 75vw !important;
  z-index: 1500 !important;
  transform: translateX(-100%);
  transition: transform .25s ease-out;
  box-shadow: 2px 0 20px rgba(0,0,0,.4);
  overflow-y: auto;
}
body.is-mobile-web .sidebar.open {
  transform: translateX(0) !important;
}
/* Phase 219.6 fail-safe: explicitní translateX(-100%) když .open class není
   přítomna. Vyšší specificity než `.sidebar` samostatně — chrání proti
   collision s ostatními transform pravidly nebo cache-served starší CSS. */
body.is-mobile-web .sidebar:not(.open) {
  transform: translateX(-100%) !important;
}

/* Overlay — toggleSidebar() v app.js přepíná inline display:none/block.
   Phase 219.3: opacity zvýšena 0.55 → 0.72 aby v dark mode bylo jasné že
   tap zavře drawer (tmavé pozadí přes tmavý content jinak nevidět). */
body.is-mobile-web #sidebarOverlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0.72) !important;
  z-index: 1400 !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  cursor: pointer;
}

/* Phase 219.4: ✕ floating close button — MIMO sidebar (sibling element),
   protože iOS Safari má bug s position:absolute child uvnitř position:fixed
   + transform parent (touch events se ztrácí během animace). Phase 219.3
   původně dával ✕ uvnitř sidebar — Tomáš ohlásil "klik nedělá nic".
   Fix: floating fixed element s vlastním stacking context, klik je
   spolehlivý. Viditelný přes body.sidebar-is-open class kterou
   toggleSidebar() v app.js teď přidává. */
#mobileSidebarClose { display: none; }
/* Phase 219.5: dva selectory — body class (z toggleSidebar()) ale i :has()
   fallback pro případ že SW cache servíruje starší app.js bez body class hook.
   Browsers bez :has() (iOS < 15.4) se spolehnou na body class. */
body.is-mobile-web.sidebar-is-open #mobileSidebarClose,
body.is-mobile-web:has(#sidebar.open) #mobileSidebarClose {
  display: flex !important;
  position: fixed;
  top: calc(12px + env(safe-area-inset-top, 0));
  right: 12px;
  width: 44px;
  height: 44px;
  background: rgba(40, 40, 40, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.20);
  border-radius: 12px;
  color: white;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 1600;  /* nad sidebar (1500) i overlay (1400) */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
  animation: m219FadeIn .2s ease-out;
}
body.is-mobile-web.sidebar-is-open #mobileSidebarClose:active,
body.is-mobile-web:has(#sidebar.open) #mobileSidebarClose:active {
  background: rgba(60, 60, 60, 1);
  transform: scale(0.92);
}
@keyframes m219FadeIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* Hamburger ≡ ↔ ✕ visual cue: když je drawer open, hamburger v topbaru
   se subtle dim (vizuálně signalizuje že stav je "open"). */
body.is-mobile-web.sidebar-is-open #mobileHamburgerBtn,
body.is-mobile-web:has(#sidebar.open) #mobileHamburgerBtn {
  opacity: 0.4;
}

/* Phase 219.5: Skrýt bottom tab bar když je drawer otevřený.
   Tomáš 2026-05-07: "je tam boční menu a dolní menu" — drawer + bottom tab
   bar současně vnímá jako duplicitu. Cleaner UX: oba zachovány, ale ne
   současně viditelní. Drawer = full nav, bottom tabs = quick access. */
body.is-mobile-web.sidebar-is-open #mobileTabBar,
body.is-mobile-web:has(#sidebar.open) #mobileTabBar {
  display: none !important;
}

/* Floating buttons (chat helper, AI sparkle, Quick FAB) taky pryč když
   drawer open — drawer dominuje obrazovce, ostatní rušivé. */
body.is-mobile-web.sidebar-is-open #floatingHelper,
body.is-mobile-web.sidebar-is-open #quickFab,
body.is-mobile-web.sidebar-is-open #feedbackFAB,
body.is-mobile-web:has(#sidebar.open) #floatingHelper,
body.is-mobile-web:has(#sidebar.open) #quickFab,
body.is-mobile-web:has(#sidebar.open) #feedbackFAB {
  display: none !important;
}

/* ============================================================
   PHASE 220.2 — iOS Add-to-Home-Screen banner
   Floating bottom banner s instrukcí pro Safari iOS users.
   Aktivace v ios_add_to_home.js (jen pokud iOS Safari + ne standalone).
   ============================================================ */

#iosAddToHomeBanner {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0));  /* nad bottom tab bar */
  left: 12px;
  right: 12px;
  background: var(--surface-default);
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  z-index: 1100;
  animation: iosaddtohomeSlideUp .35s cubic-bezier(.2,.9,.3,1) both;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.iosaddtohome__icon {
  font-size: 30px;
  line-height: 1;
  flex-shrink: 0;
}

.iosaddtohome__text {
  flex: 1;
  min-width: 0;
}

.iosaddtohome__title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-default);
  line-height: 1.3;
}

.iosaddtohome__sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.35;
}

.iosaddtohome__share {
  display: inline-block;
  background: rgba(0, 122, 255, 0.15);
  border-radius: 4px;
  padding: 1px 4px;
  font-size: 13px;
}

.iosaddtohome__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.iosaddtohome__close:active {
  background: var(--border-soft);
  transform: scale(0.92);
}

@keyframes iosaddtohomeSlideUp {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes iosaddtohomeSlideDown {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(120%); opacity: 0; }
}

/* Skrýt banner když drawer open (visual klid jako ostatní floating elements) */
body.is-mobile-web.sidebar-is-open #iosAddToHomeBanner,
body.is-mobile-web:has(#sidebar.open) #iosAddToHomeBanner {
  display: none !important;
}

/* ============================================================
   PHASE 220.3 — Tabulky jako karty v pure web mobile

   Klient list, Pipeline, Reports, Audit log atd. mají tabulky s 8-12+
   sloupci. Na 375px viewport (iPhone SE 2022) horizontální scroll je
   rušivý, columny příliš úzké pro čitelnost. Transformujeme každý <tr>
   na samostatnou kartu, sloupce stack vertikálně.

   Opt-out: tabulky které mají vlastní mobile layout přidají class
   `table--no-mobile-cards` na .table elementu (stávající selektor pak
   nepřepíše).
   ============================================================ */

/* Vypnout horizontal scroll wrapper v phone — žádný scroll už netřeba */
body.is-mobile-web .table-wrapper {
  overflow-x: visible !important;
  border-radius: 0;
}

/* Table jako block (ne grid table layout) */
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
}

/* Hide thead — column headers jsou pro stack layout zbytečné
   (každá td má svůj inline label fallback nebo jasnou vizuální roli) */
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) thead {
  display: none;
}

body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody {
  display: block;
}

/* Každý <tr> = karta */
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody tr {
  display: block;
  margin-bottom: 10px;
  padding: 12px 14px;
  background: var(--surface-default);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  cursor: pointer;
  position: relative;
  transition: background .15s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody tr:active {
  background: var(--surface-muted);
  transform: scale(0.998);
}

/* Každý <td> = řádek v kartě */
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody td {
  display: block;
  border: none !important;
  padding: 3px 0 !important;
  text-align: left !important;
  font-size: 13px;
  white-space: normal !important;
}

/* První td = title (jméno klienta, větší font) */
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody td:first-of-type {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 4px;
  padding-bottom: 4px !important;
}

/* Bulk select checkbox (první td pokud canBulk) — udělat menší/inline */
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody td:has(input[type="checkbox"]) {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 0 !important;
  margin: 0 !important;
}
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody td:has(input[type="checkbox"]) ~ td:first-of-type,
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody td:has(input[type="checkbox"]) + td {
  font-size: 16px;
  font-weight: 700;
  padding-right: 36px !important;  /* nepřepiš checkbox */
}

/* Empty values — skrýt aby se neprojevovaly jako prázdné řádky */
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody td:empty,
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody td:has(> .text-muted:only-child) {
  display: none;
}

/* Action buttons row — wrap horizontálně, celá šířka karty */
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody td.client-actions,
body.is-mobile-web .table-wrapper > .table:not(.table--no-mobile-cards) tbody td:last-child {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  padding-top: 10px !important;
  margin-top: 8px;
  border-top: 1px solid var(--border-soft) !important;
  padding-bottom: 0 !important;
}
body.is-mobile-web .client-action-btn {
  width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}

/* Pagination — center align, větší tap targets */
body.is-mobile-web .pagination,
body.is-mobile-web .page-btn {
  min-height: 40px;
}
body.is-mobile-web .pagination {
  justify-content: center !important;
  flex-wrap: wrap;
  gap: 4px;
}

/* ============================================================
   PHASE 220.4 — Skrýt floating widgets v pure web mobile

   Tomáš 2026-05-07 (po Phase 220.3): "ve verzi pro mobily odejmout
   červené widgety nepomáhají dobré orientaci a mnoho funkcí je pak
   stejně duplicitně".

   Floating widgets a jejich duplicity:
   - #quickFab (Quick Add +): 🎤/📝/📅/🎙️ — všechno duplicitní
     · 📅 Schůzka → Kalendář tab + drawer
     · 📝 Poznámka → Klient detail (po tap)
     · 🎙️ Voice → topbar 🎙️ ikona
     · + Klient → drawer + bottom "Více"
   - #feedbackFAB (💬 Nahlásit) → přístupné z drawer/Settings
   - #floatingHelper (✨ AI sparkle) → přístupné z drawer/topbar

   V mobile máme: drawer (full nav) + bottom tabs (5 quick) + topbar
   (🔍 🎙️ 🔔). Duplicit floating widgets jen ruší orientaci.

   Phase 219.1 + .5 už hide tyto widgets KDYŽ drawer je open. Phase 220.4
   je hide VŽDY v mobile. APK Capacitor (is-native-mobile) nezasaženo.
   ============================================================ */
body.is-mobile-web #quickFab,
body.is-mobile-web #feedbackFAB,
body.is-mobile-web #floatingHelper {
  display: none !important;
}

/* ============================================================
   PHASE 221 — Bell notifications dropdown jako bottom sheet v mobile

   Default (index.html inline style): position:absolute, top:60px, right:20px,
   width:380px, max-height:520px — vypadá divně na 375px viewport (přilepené
   k pravému horního rohu, výška obrazovky pasuje sotva).

   V pure web mobile transformujeme na bottom sheet (slide-up zespodu, full
   width, ~80vh max výška). iOS/Android native notification panel pattern.
   Inline styly přepíšeme přes !important.
   ============================================================ */

body.is-mobile-web #bellDropdown {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: 80vh !important;
  border-radius: 16px 16px 0 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.25) !important;
  z-index: 1700 !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
  animation: m221BellSheetUp .28s cubic-bezier(.2,.9,.3,1) both;
}

/* Drag handle nahoře (visual hint pro swipe — kosmetický, dnes bez gesture) */
body.is-mobile-web #bellDropdown::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: var(--border-soft);
  border-radius: 2px;
  margin: 8px auto 4px;
  flex-shrink: 0;
}

/* Backdrop overlay — když dropdown open, ztemníme zbytek obrazovky.
   Nesleduje #bellDropdown přímo (window event listener v app.js zavře),
   ale CSS pseudo na body kdy is-mobile-web ho vytváříme přes
   gradient / box-shadow techniku není ideální. Místo toho použijeme
   :has() — body s viditelným bellDropdown dostane backdrop přes
   ::after pseudo. */
body.is-mobile-web:has(#bellDropdown[style*="display: block"])::after,
body.is-mobile-web:has(#bellDropdown[style*="display:block"])::after,
body.is-mobile-web:has(#bellDropdown[style*="display: flex"])::after,
body.is-mobile-web:has(#bellDropdown[style*="display:flex"])::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 1650;
  pointer-events: none;  /* tap se propíše dolů → window listener zavře */
  animation: m221BellBackdropFade .25s ease-out;
}

@keyframes m221BellSheetUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes m221BellBackdropFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Notifikace items uvnitř — větší tap targets, čitelnější text */
body.is-mobile-web #bellDropdown .notification-item,
body.is-mobile-web #bellDropdown [role="listitem"] {
  padding: 14px 16px !important;
  min-height: 52px;
}

/* ============================================================
   PHASE 222 — Command Palette (🔍 search) jako bottom sheet v mobile

   Default: position fixed inset:0 + padding-top:12vh + max-width:620px
   centered top. Pro 375px viewport je top-center divný (klávesnice
   překrývá outputs). Bottom sheet s input nahoře sheetu, results pod.
   ============================================================ */

body.is-mobile-web #cmdPalette {
  align-items: flex-end !important;
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 2000 !important;
}

/* Inner container = bottom sheet */
body.is-mobile-web #cmdPalette > div {
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: 90vh !important;
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.3) !important;
  padding-bottom: env(safe-area-inset-bottom, 0) !important;
  animation: m222CmdSheetUp .25s cubic-bezier(.2,.9,.3,1) both;
}

/* Drag handle nahoře */
body.is-mobile-web #cmdPalette > div::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: var(--border-soft);
  border-radius: 2px;
  margin: 8px auto 0;
  flex-shrink: 0;
}

/* Header (input area) — větší padding, větší font, no Esc badge */
body.is-mobile-web #cmdPalette > div > div:first-of-type {
  padding: 16px 18px !important;
  gap: 10px !important;
}
body.is-mobile-web #cmdPaletteInput {
  font-size: 16px !important;  /* prevent iOS auto-zoom */
}
/* Hide Esc keyboard hint v phone (touch nemá Esc) */
body.is-mobile-web #cmdPalette > div > div:first-of-type > span:last-child {
  display: none !important;
}

/* Results — využít víc vertical space */
body.is-mobile-web #cmdPaletteResults {
  max-height: calc(90vh - 70px - 30px - env(safe-area-inset-bottom, 0)) !important;
  -webkit-overflow-scrolling: touch;
}

/* Result items — větší tap targets */
body.is-mobile-web #cmdPaletteResults > * {
  min-height: 48px;
  padding: 12px 16px !important;
}

/* Footer (↑↓ Enter Esc hints) — hide v phone, irrelevant pro touch */
body.is-mobile-web #cmdPalette > div > div:last-of-type {
  display: none !important;
}

@keyframes m222CmdSheetUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Header (🔔 Notifikace + akce) — bigger v phone */
body.is-mobile-web #bellDropdown > div:first-of-type {
  padding: 14px 18px !important;
  font-size: 15px !important;
}

/* Scrollable content area */
body.is-mobile-web #bellDropdown > div:nth-of-type(2),
body.is-mobile-web #bellDropdown > div[style*="overflow"] {
  max-height: calc(80vh - 60px - env(safe-area-inset-bottom, 0)) !important;
  -webkit-overflow-scrolling: touch;
}