/**
 * 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
 *
 * Nav z-index / overlay stacking: admin-nav-layer.css (single source of truth)
 */

/* ========== 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 (geometry only — z-index in admin-nav-layer.css) ========== */
#sidenav-main.client-sidenav,
.off-canvas-menu.dashboard-off-canvas-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !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;
}

/* ========== 6b. DASHBOARD COPYRIGHT FOOTER ========== */
/*
 * Sticky footer (short pages → viewport bottom; long pages → after content).
 * Works for both nestings:
 *   A) footer inside .dashboard-content-wrap (shell left open)
 *   B) footer orphaned after </section> / under #dashboard-main (common)
 * Body flex + flex-grow on the main column is required for case B.
 */
body.has-client-sidebar,
body.has-admin-dashboard {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body.has-client-sidebar > section.dashboard-area,
body.has-admin-dashboard > #dashboard-main,
body.has-admin-dashboard #dashboard-main.dashboard-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/*
 * Do NOT set width:100% here — client-sidebar / style.css use
 * margin-left + calc(100% - sidebar). width:100% + margin-left clips the right edge.
 */
body.has-client-sidebar > section.dashboard-area > .dashboard-content-wrap,
body.has-admin-dashboard #dashboard-main > section.dashboard-area,
body.has-admin-dashboard #dashboard-main > section.dashboard-area > .dashboard-content-wrap {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
  box-sizing: border-box;
  max-width: 100%;
}

.dashboard-copyright-content {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: auto;
  padding-left: 1rem;
  padding-right: 1rem;
  flex: 0 0 auto;
  text-align: center;
}

.dashboard-copyright-content .copy-desc {
  margin: 0;
  max-width: 100%;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.5;
  text-align: center;
}

/* Nested (shell left open): fill the content column; pin to bottom on short pages */
.dashboard-content-wrap {
  display: flex;
  flex-direction: column;
}

.dashboard-content-wrap > .container-fluid,
.dashboard-content-wrap > .qfactory-page,
.dashboard-content-wrap > #page-wrapper,
.dashboard-content-wrap > main,
.dashboard-content-wrap > .dashboard-main-scroll {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.dashboard-content-wrap > .dashboard-copyright-content {
  margin-top: auto;
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Orphaned under body / admin main — keep at end of flex column */
body.has-client-sidebar > .dashboard-copyright-content,
body.has-admin-dashboard #dashboard-main > .dashboard-copyright-content {
  margin-top: auto;
  flex-shrink: 0;
  /* After scripts/modals that pages often inject between </section> and h_scripts */
  order: 9999;
}

/* Orphaned under admin main — align with content column, clear 325px sidebar */
@media (min-width: 1200px) {
  body.has-admin-dashboard #dashboard-main > .dashboard-copyright-content {
    margin-left: var(--admin-sidebar-width, 325px);
    width: calc(100% - var(--admin-sidebar-width, 325px));
    max-width: calc(100% - var(--admin-sidebar-width, 325px));
    padding-left: 30px;
    padding-right: 30px;
  }

  body.has-client-sidebar > .dashboard-copyright-content {
    margin-left: var(--client-sidebar-width, 250px);
    width: calc(100% - var(--client-sidebar-width, 250px));
    max-width: calc(100% - var(--client-sidebar-width, 250px));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

@media (max-width: 1199.98px) {
  body.has-admin-dashboard #dashboard-main > .dashboard-copyright-content,
  body.has-client-sidebar > .dashboard-copyright-content {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ========== 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;
  }
}

/* ========== 10. DESKTOP HEADER SEARCH — icon centered in input (light + dark) ========== */
.header-menu-area .menu-wrapper .form-group .search-icon {
  top: 50%;
  right: 0;
  padding: 0;
  width: 48px;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: translateY(-50%) rotate(-90deg);
}

.header-menu-area .menu-wrapper .form-group .search-icon:hover {
  transform: translateY(-50%) rotate(-90deg);
}