/* ============================================================
   RakuOps platform mobile responsiveness
   Loaded LAST in header.php so it overrides theme + custom CSS.
   Everything that changes layout is scoped to <= 991.98px so the
   desktop UI is untouched.
   ============================================================ */

/* Hamburger is desktop-hidden by default */
.rk-sidebar-toggle { display: none; }

@media (max-width: 991.98px) {

  /* ---- Global overflow guard ----
     The old 0.75 viewport hid per-page fixed widths and Bootstrap .row negative
     margins. With a real viewport we stop the page itself from scrolling sideways;
     tables/wide content still scroll inside their own .table-responsive wrappers. */
  html, body { overflow-x: hidden; max-width: 100%; }
  .full-page-wrapper .row { margin-left: 0 !important; margin-right: 0 !important; }
  /* Auth/full-page columns often lack an xs size, so as flex items they size to
     their content (a ~440px card) and overflow. Force them full width on phones. */
  .full-page-wrapper .row > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 14px; padding-right: 14px; }
  .content-wrapper.auth.px-0 { padding-left: 8px !important; padding-right: 8px !important; }
  /* Flex items default to min-width:auto and refuse to shrink below their content
     width (the ~440px card), overflowing narrow screens. Let them shrink. */
  .content-wrapper.d-flex > *,
  .full-page-wrapper .row,
  .full-page-wrapper .row > [class*="col-"] { min-width: 0 !important; }

  /* ---- Topbar: fit on small screens WITHOUT overlap ----
     The desktop topbar packs a lot: hamburger + brand + New on the left, an empty
     150px-min search wrapper in the middle, and a 7-item flex-shrink-0 action group
     on the right. On phones that overflows and the groups overlap (covering the
     hamburger). We collapse the empty search wrapper, trim non-essential actions,
     and keep the layout from squishing items on top of each other. */
  .navbar .navbar-menu-wrapper {
    flex-wrap: nowrap !important;
    gap: .35rem !important;
    padding-left: .5rem !important;
    padding-right: .5rem !important;
    min-width: 0;
  }
  .navbar .navbar-brand { margin-right: .25rem !important; }
  .navbar .navbar-brand svg { height: 30px !important; }

  /* The custom hamburger pointed at #sidebar, which most pages (e.g. /checklist)
     don't include. The real, permission-aware nav is the topbar "Menu" mega
     dropdown, so we use THAT as the mobile nav and hide the custom hamburger. */
  .rk-sidebar-toggle { display: none !important; }

  /* The empty middle search wrapper still reserves min-width:150px -> collapse it */
  .navbar .navbar-menu-wrapper > .flex-grow-1 { display: none !important; }
  #navbar-search-wrap { display: none !important; }

  /* Trim non-essential actions on phones. Keep: Menu (nav), New, alerts bell,
     profile. Credits/settings/help/feedback/dark-mode are reachable inside the
     Menu dropdown and the profile menu. */
  #aiCreditsDisplay,
  #helpBtn,
  #feedbackWrapper,
  #darkModeBtn,
  .navbar a[title="Settings"] { display: none !important; }

  /* Keep the "Menu" nav button compact on phones. */
  #megaDropdown { display: inline-flex !important; align-items: center; padding: .45rem .7rem !important; white-space: nowrap; }

  /* Mega menu = full-width mobile nav panel (override Popper's inline transform). */
  .navbar .mega-menu.dropdown-menu {
    position: fixed !important;
    top: 58px !important; left: 8px !important; right: 8px !important;
    transform: none !important;
    width: auto !important; max-width: none !important; min-width: 0 !important;
    max-height: calc(100vh - 72px); overflow-y: auto;
    padding: 14px !important;
  }
  .navbar .mega-menu .row > [class*="col-"] { margin-bottom: 6px; }
  .navbar .mega-menu .mega-section-heading { margin-top: 6px; }

  /* Groups size to content and lay out with space-between; never overlap. */
  .navbar .navbar-menu-wrapper > .d-flex { min-width: 0; gap: .35rem !important; }
  #newDropdown { padding-left: .6rem; padding-right: .6rem; white-space: nowrap; }

  /* ---- Sidebar as a left-hand drawer (theme defaults to right) ---- */
  .sidebar.sidebar-offcanvas {
    position: fixed !important;
    top: 60px; bottom: 0;
    left: -280px !important; right: auto !important;
    width: 260px !important; max-width: 84vw;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    z-index: 1041 !important;
    box-shadow: 2px 0 28px rgba(15,23,42,.22);
    transition: left .25s ease-out;
  }
  .sidebar.sidebar-offcanvas.active { left: 0 !important; right: auto !important; }
  body.rk-sidebar-open { overflow: hidden; }

  .rk-sidebar-overlay {
    position: fixed; inset: 60px 0 0 0;
    background: rgba(15,23,42,.45);
    z-index: 1040;
    opacity: 0; visibility: hidden; transition: opacity .2s ease;
  }
  body.rk-sidebar-open .rk-sidebar-overlay { opacity: 1; visibility: visible; }

  /* ---- Content takes the full width ---- */
  .main-panel { width: 100% !important; margin-left: 0 !important; padding-left: 0 !important; }
  .content-wrapper { padding: 1rem !important; }

  /* ---- Tables: scroll horizontally instead of breaking layout ---- */
  .content-wrapper .table-responsive,
  .content-wrapper .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .content-wrapper table.table { width: 100%; }

  /* ---- Media + generic overflow guards ---- */
  .content-wrapper img,
  .content-wrapper video,
  .content-wrapper canvas { max-width: 100%; height: auto; }
  .card { border-radius: 12px; }
  .card-body { padding: 1rem; }

  /* Forms: stack and use full width */
  .form-inline .form-control,
  .form-inline .form-group { width: 100%; }
  .content-wrapper .row > [class*="col-"] { margin-bottom: .25rem; }

  /* Modals: comfortable on small screens */
  .modal-dialog { margin: .5rem; max-width: calc(100vw - 1rem); }

  /* ---- Footer: center + stack ---- */
  .footer { padding: 14px 16px; }
  .footer .float-sm-right,
  .footer span { float: none !important; text-align: center !important; }
}

/* ---- AI assistant + slide-over panels (phones/small tablets) ---- */
@media (max-width: 767.98px) {
  /* Agent chat page (/agent): fixed 300px sidebar + flex main -> stack vertically.
     Conversations become a short scrollable strip on top; chat fills the rest. */
  .agent-chat-container { flex-direction: column !important; height: calc(100vh - 60px); }
  .agent-chat-container .chat-sidebar {
    width: 100% !important;
    max-height: 34vh; min-height: 0;
    border-right: none !important;
    border-bottom: 1px solid #e9ecef;
  }
  .agent-chat-container .chat-sidebar .conversations-list { overflow-y: auto; }
  .agent-chat-container .chat-main { flex: 1 1 auto; min-height: 0; width: 100%; }
  .agent-chat-container .chat-messages { min-height: 0; }

  /* Side / slide-over panels (.slide-panel system: AI assistant #panelHelp,
     create checklist/task/folder, work-order/issue, org/user/employee panels)
     become SCREEN-CENTERED MODAL OVERLAYS on mobile instead of right-edge drawers.
     We center the container and turn the tall right panel into a rounded card;
     !important overrides per-panel widths/heights (e.g. #panelHelp 460px/100vh). */
  .slide-panel { justify-content: center !important; align-items: center !important; }
  .slide-panel-content {
    position: relative !important;
    top: auto !important; right: auto !important; left: auto !important; bottom: auto !important;
    z-index: 1 !important;
    box-sizing: border-box !important;
    width: calc(100vw - 32px) !important;   /* 16px gutter each side, no container padding */
    max-width: 440px !important;
    height: auto !important; max-height: 86vh !important;
    border-radius: 16px !important;
    overflow: hidden !important;            /* inner panel body keeps its own scroll */
    box-shadow: 0 24px 60px rgba(15, 23, 42, .30) !important;
    transform: translateY(16px) scale(.98) !important;  /* fade/rise in, not slide from edge */
  }
  .slide-panel.show .slide-panel-content,
  .slide-panel.showing .slide-panel-content { transform: none !important; }

  /* ---- AI assistants -> FULL-SCREEN overlays on mobile ----
     The dedicated AI assistant panels take the whole screen on phones: the floating
     launcher+popup widgets (.X-ai-content on knowledge base / schedule manager /
     my-checklists / checklist view modify/ops/reasoning/guidance) AND the
     #panelHelp slide-panel assistant. Generic side panels stay centered (above). */
  .kb-ai-content, .mc-ai-content, .sm-ai-content,
  .ai-modify-content, .ai-ops-content, .ai-reasoning-content, .ai-guidance-content,
  #panelHelp .slide-panel-content {
    position: fixed !important;
    top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh !important; max-height: 100vh !important;
    height: 100dvh !important; max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;            /* full-screen fade-in (opacity/visibility kept) */
    z-index: 1300 !important;
  }
  /* lift launcher stacking context + hide the corner launcher while open
     (the full-screen panel has its own header close button) */
  .kb-ai-panel.open, .mc-ai-panel.open, .sm-ai-panel.open, .ai-modify-panel.open { z-index: 1300 !important; }
  .kb-ai-panel.open .kb-ai-toggle,
  .mc-ai-panel.open .mc-ai-toggle,
  .sm-ai-panel.open .sm-ai-toggle,
  .ai-modify-panel.open .ai-modify-toggle { display: none !important; }

  /* iOS zooms the page in whenever a focused input/textarea renders below 16px.
     The AI assistants auto-focus their chat box on open (.focus()), which made the
     screen "zoom out of focus". Force >=16px so focusing never triggers a zoom. */
  .kb-ai-content input, .kb-ai-content textarea, .kb-ai-content select,
  .mc-ai-content input, .mc-ai-content textarea, .mc-ai-content select,
  .sm-ai-content input, .sm-ai-content textarea, .sm-ai-content select,
  .ai-modify-content input, .ai-modify-content textarea, .ai-modify-content select,
  .ai-ops-content input, .ai-ops-content textarea,
  .ai-reasoning-content input, .ai-reasoning-content textarea,
  .ai-guidance-content input, .ai-guidance-content textarea,
  #panelHelp input, #panelHelp textarea, #panelHelp select { font-size: 16px !important; }

  /* Lock the page behind an open full-screen assistant / panel so it can't scroll
     or jump behind the overlay (needs :has(), supported on modern mobile browsers). */
  body:has(.kb-ai-panel.open),
  body:has(.mc-ai-panel.open),
  body:has(.sm-ai-panel.open),
  body:has(.ai-modify-panel.open),
  body:has(.slide-panel.show) { overflow: hidden !important; }
}

/* Phones: tighten further */
@media (max-width: 575.98px) {
  .content-wrapper { padding: .75rem !important; }
  .content-wrapper .card + .card { margin-top: .75rem; }
  h1, .h1 { font-size: 1.5rem; }
  h2, .h2 { font-size: 1.3rem; }
  h3, .h3 { font-size: 1.15rem; }
  .btn { white-space: nowrap; }
}