/**
 * LAYOUT STABILITY - System-wide layout corrections
 * Phase 4 refactor: single scroll, no horizontal overflow, sidebar/overlay fixes
 * Applied to /dash/* and /admin/* and public pages
 *
 * Z-INDEX LAYER MAP:
 *   sidebar = 1000
 *   overlay (body-overlay) = 900
 *   header = 800
 *   dropdown = 1100
 *   modal/system-overlay = 2000
 */

/* ========== 1. GLOBAL SCROLL POLICY ========== */
/* Body is the ONLY vertical scroll container */
html {
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
body {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100%;
}
/* Prevent horizontal scroll ever */
html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}

/* ========== 2. MOBILE VIEWPORT FIX ========== */
/* Replace height:100vh with min-height for layout containers to avoid double scrollbars */
.dashboard-content-wrap {
  height: auto !important;
  min-height: 100vh;
  min-height: 100dvh; /* Dynamic viewport - avoids mobile browser chrome issues */
}
@media (max-width: 1199px) {
  .dashboard-content-wrap {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* ========== 3. REMOVE NESTED SCROLL CONTAINERS ========== */
/* Wrappers must NOT create their own scroll - let body scroll */
.relative.overflow-x-hidden.exclude,
.dashboard-main-scroll {
  overflow-y: visible !important;
  overflow-x: hidden !important;
  height: auto !important;
  min-height: 0;
}
/* Sidebar: fixed panel can have internal scroll when content overflows - that's OK */
#sidenav-main.client-sidenav {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}
.off-canvas-menu {
  height: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ========== 4. SIDEBAR SYSTEM ========== */
/* Sidebar: fixed, above overlay when open */
#sidenav-main.client-sidenav,
.off-canvas-menu.dashboard-off-canvas-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1000 !important;
  pointer-events: auto !important;
}
#sidenav-main.client-sidenav.active,
.off--canvas-menu.active {
  z-index: 1100 !important; /* Above overlay when open */
  pointer-events: auto !important;
}

/* Body overlay: must NOT block sidebar clicks */
.body-overlay {
  z-index: 900 !important;
  pointer-events: auto !important;
}
/* On mobile: overlay covers only content area (right of sidebar) */
@media (max-width: 1199px) {
  body.has-client-sidebar .body-overlay.active {
    left: 250px !important;
    width: calc(100% - 250px) !important;
  }
}

/* Header below sidebar when sidebar open */
.header-menu-area {
  z-index: 800 !important;
}

/* Dashboard header — flush top + content offset: dashboard-layout.css (loaded last on /dash) */
.header-menu-area .dashboard-menu-content .main-menu-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ========== 5. MEDIA ELEMENT SAFETY ========== */
img {
  max-width: 100%;
  height: auto;
}
video, iframe, canvas {
  max-width: 100%;
}
table {
  max-width: 100%;
}

/* ========== 6. PREVENT HORIZONTAL OVERFLOW ========== */
.dashboard-area,
.dashboard-content-wrap,
.container-fluid,
.main-content {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* ========== 7. CONVERSATION BOX - allowed scroll (small component) ========== */
.conversation-box {
  overflow-y: auto; /* Allowed: small scrollable component */
  -webkit-overflow-scrolling: touch;
}

/* ========== 8. PUBLIC + DASHBOARD HEADER — logo row icon group horizontal ========== */
/* .user-btn-action holds block-level siblings (search, theme, menu); without flex they stack vertically */
.header-menu-area .logo-box .user-btn-action {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-end;
  gap: 0.5rem;
  width: auto;
  min-width: 0;
}
.header-menu-area .logo-box .user-btn-action > * {
  flex-shrink: 0;
}

/* ========== 9. MOBILE HEADER — keep hamburger visible on small devices ========== */
/*
 * At <=575px the logo image (up to 170px) + 60px side padding + icon group
 * (~120px) pushes the hamburger out of the viewport. Tighten spacing,
 * shrink the logo, and let flex-gap handle separation (so legacy mr-*
 * classes on icons don't compound the width).
 */
@media (max-width: 575.98px) {
  /* Reduce huge 30px horizontal padding on the dashboard header row */
  .header-menu-area .header-menu-content.pr-30px {
    padding-right: 12px !important;
  }
  .header-menu-area .header-menu-content.pl-30px {
    padding-left: 12px !important;
  }

  /* Logo shrinks so there's room for the action icons */
  .header-menu-area .logo-box .logo img,
  .header-menu-area .logo-box.logo--box .logo img {
    max-width: 120px;
    height: auto;
  }
  .header-menu-area .logo-box.logo--box .logo {
    max-width: 60%; /* override admin-nav-layer.css 50% so small logos still look right */
    min-width: 0;
  }

  /* Tighten the icon cluster — gap handles spacing, drop stacked mr-* */
  .header-menu-area .logo-box .user-btn-action {
    gap: 0.35rem;
  }
  .header-menu-area .logo-box .user-btn-action > .mr-2,
  .header-menu-area .logo-box .user-btn-action > .mr-3 {
    margin-right: 0 !important;
  }

  /* Icons slightly smaller so three fit comfortably next to the logo */
  .header-menu-area .logo-box .user-btn-action .icon-element-sm {
    width: 34px;
    height: 34px;
    line-height: 34px;
    font-size: 14px;
  }
  .header-menu-area .logo-box .user-btn-action .theme-picker-compact .theme-picker-btn {
    width: 34px;
    height: 34px;
  }
}

/* Very narrow devices (<=360px): drop the search toggle so theme + hamburger
   always stay reachable. Search is still available from inside the menu. */
@media (max-width: 360px) {
  .header-menu-area .logo-box .user-btn-action .search-menu-toggle {
    display: none !important;
  }
  .header-menu-area .logo-box .logo img,
  .header-menu-area .logo-box.logo--box .logo img {
    max-width: 110px;
  }
}