/**
 * Layout Guard — Anti-recouvrement mainContent / sc-btn-inner vs app-sidebar / app-navbar
 * Topstars.io — Cerulean theme (Bootstrap 4.5.0)
 */

:root {
  --sidebar-w: 0px;
  --navbar-h: 0px;
  --navbar-bottom-h: 0px;
  --app-navbar-h: 0px;
}

/* ── Main content dynamic margin & padding ─────────────────────────── */
#mainContent,
.app-content {
  box-sizing: border-box !important;
  padding-left: 0 !important;
  margin-left: var(--sidebar-w, 0px) !important;
  padding-top: calc(var(--navbar-h, 0px) + 20px) !important;
  padding-bottom: calc(var(--navbar-bottom-h, 0px) + 30px + env(safe-area-inset-bottom, 0px)) !important;
  transition: margin-left .2s ease, margin-right .2s ease, padding-top .2s ease !important;
  min-height: 100vh;
}

/* ── RTL mirror for main content ───────────────────────────────────── */
[dir="rtl"] #mainContent,
[dir="rtl"] .app-content {
  margin-left: 0 !important;
  margin-right: var(--sidebar-w, 0px) !important;
  padding-right: 0 !important;
}

/* ── RTL mirror for docked sidebar (>= 768px) ───────────────────────── */
@media (min-width: 768px) {
  html[dir="rtl"] .app-sidebar {
    left: auto !important;
    right: 0 !important;
  }
}

/* ── Top Header follows sidebar width without hardcoded overlap ───── */
.app-header {
  left: var(--sidebar-w, 0px) !important;
  transition: left .2s ease, right .2s ease, top .2s ease !important;
}

[dir="rtl"] .app-header {
  left: 0 !important;
  right: var(--sidebar-w, 0px) !important;
}

/* ── Floating support chat widget (#sc-widget, #sc-btn, #sc-btn-inner) ──
   Elevated above bottom navbar (.app-navbar, z-index: 99999) on mobile & tablet.
   When .app-navbar is absent or hidden, --navbar-bottom-h is 0px and the button
   sits cleanly at bottom: 20px with zero phantom space. */
#sc-widget {
  position: fixed !important;
  bottom: calc(var(--navbar-bottom-h, 0px) + 20px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 100001 !important;
  transition: bottom .2s ease !important;
}

#sc-panel {
  position: fixed !important;
  bottom: calc(var(--navbar-bottom-h, 0px) + 88px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 100002 !important;
  transition: bottom .2s ease !important;
}

/* ── Floating WhatsApp widget (.wa-float) ──────────────────────────── */
.wa-float {
  position: fixed !important;
  bottom: calc(var(--navbar-bottom-h, 0px) + 24px + env(safe-area-inset-bottom, 0px) + var(--wa-lift, 0px)) !important;
  z-index: 100001 !important;
  transition: bottom .35s cubic-bezier(.22,1,.36,1) !important;
}