/**
 * Helpdesk mobile layout — stacked header, readable filters, safe areas.
 * Loaded on all pages that use helpdesk-session-nav.js.
 */

@media (max-width: 900px) {
  .helpdesk-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) 10px max(10px, env(safe-area-inset-left, 0px));
  }

  .helpdesk-bar .hd-nav {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }

  /* Brand + Menu button share the first row; each revealed nav link wraps onto its own
     full-width row. (Previously every link was placed in the same named grid area, so they
     stacked on top of each other and the menu looked like it did nothing.) */
  .helpdesk-bar .hd-nav-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    width: 100%;
    overflow: visible;
  }

  .helpdesk-bar .hd-brand {
    flex: 1 1 auto;
    margin-right: 0;
    min-width: 0;
  }

  .helpdesk-bar .hd-mobile-menu-btn {
    flex: 0 0 auto;
  }

  .helpdesk-bar .hd-nav-start > .hd-btn {
    flex: 1 1 100%;
    display: none;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .helpdesk-bar.hd-mobile-nav-open .hd-nav-start > .hd-btn {
    display: inline-flex;
  }

  .helpdesk-bar .hd-logo {
    height: 30px;
    max-width: min(110px, 32vw);
  }

  .helpdesk-bar .hd-title {
    font-size: 15px;
    letter-spacing: 0.02em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(52vw, 220px);
  }

  .helpdesk-bar .hd-nav-search {
    flex: none;
    width: 100%;
    padding-left: 0;
  }

  .helpdesk-bar .hd-nav .hd-nav-search .hd-search-wrap.hd-search-main {
    max-width: none;
  }

  .helpdesk-bar .hd-right-group {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
  }

  .helpdesk-bar .hd-user-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .helpdesk-bar #signinTroubleLink {
    display: none !important;
  }

  .helpdesk-bar .hd-my-presence-select {
    max-width: min(140px, 42vw);
    min-height: 36px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .helpdesk-bar .hd-user-btn-labelcol {
    max-width: min(160px, 46vw);
  }

  .helpdesk-bar .hd-user-btn-labelcol span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: 100%;
  }

  /* Submit / topbar variant */
  .topbar {
    flex-direction: column;
    align-items: stretch;
    padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
    gap: 10px;
  }

  .topbar-links {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 8px;
  }

  .topbar-links-start {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
  }

  .topbar-brand,
  .topbar-links-start > .topbar-title {
    flex: 1 1 auto;
    margin-right: 0;
    min-width: 0;
  }

  .topbar .hd-mobile-menu-btn {
    flex: 0 0 auto;
  }

  .topbar-links-start > a:not(.hd-mobile-menu-btn):not(.topbar-brand):not(.topbar-title) {
    flex: 1 1 100%;
    display: none;
    width: 100%;
    justify-content: center;
    text-align: center;
  }

  .topbar.hd-mobile-nav-open .topbar-links-start > a:not(.hd-mobile-menu-btn):not(.topbar-brand):not(.topbar-title) {
    display: inline-flex;
  }

  .topbar-links-search {
    width: 100%;
    padding-left: 0;
    min-width: 0;
  }

  .topbar-right {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .topbar-title {
    font-size: 15px;
    max-width: min(52vw, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 900px) {
  /* Admin ticket filters — override inline nowrap + horizontal scroll */
  #filtersRow.filters,
  .filters.helpdesk-filters-row {
    flex-wrap: wrap !important;
    flex-direction: column !important;
    align-items: stretch !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    gap: 10px !important;
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  #filtersRow .filters-chain-sep {
    display: none !important;
  }

  #filtersRow select,
  #filtersRow .filters-sort-group {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #filtersRow .filters-sort-group {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  #filtersRow .filters-row-end {
    margin-left: 0 !important;
    width: 100%;
  }

  #filtersRow .filters-row-end .btn {
    width: 100%;
  }

  #filtersRow #filterRequestCategoryWrap,
  #filtersRow #includeFutureScheduledWrap {
    display: block !important;
    width: 100%;
  }

  .main {
    padding-top: 12px !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
  }

  .helpdesk-my-submissions-banner {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  .ticket-nav-sidebar {
    top: 0 !important;
  }

  #scheduleToastHost {
    left: 12px;
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 900px) {
  /* Header dropdowns (Reports ▾, Admin ▾, user menu) are absolutely positioned with
     right:0 on desktop; on a stacked mobile bar that anchor sits near the left edge, so the
     panel spilled off the left of the screen and was unreachable. Expand them inline (full
     width, in normal flow) below their button instead — never clipped, always tappable. */
  .helpdesk-bar .hd-reports-wrap,
  .helpdesk-bar .hd-settings-wrap,
  .helpdesk-bar .hd-signin-wrap,
  .helpdesk-bar #userMenu,
  .helpdesk-bar #userMenuWrap {
    width: 100%;
    min-width: 0;
  }

  .helpdesk-bar .hd-reports-dropdown,
  .helpdesk-bar .hd-settings-dropdown,
  .helpdesk-bar .hd-dropdown {
    position: static;
    top: auto;
    left: auto;
    right: auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 6px;
    box-shadow: none;
  }

  .helpdesk-bar .hd-reports-wrap,
  .helpdesk-bar .hd-settings-wrap {
    display: block;
  }
}

/* Shared menu button */
.hd-mobile-menu-btn {
  display: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  font-family: inherit;
  line-height: 1.2;
  min-height: 40px;
}

@media (max-width: 900px) {
  .hd-mobile-menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
}

body.dark .hd-mobile-menu-btn {
  background: #30363d;
  color: #e6edf3;
  border-color: #444c56;
}

body.light .hd-mobile-menu-btn {
  background: #f6f8fa;
  color: #24292f;
  border-color: #d0d7de;
}

.hd-mobile-menu-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 1px #58a6ff;
}

body.light .hd-mobile-menu-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 1px #0969da;
}

/* Native Android app (WebView) — extra safe area + hide install prompts */
html.hd-native-app body {
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
}

html.hd-native-app [data-hd-app-download] {
  display: none !important;
}

@media (max-width: 900px) {
  /* Ticket modal (admin): full-screen with ONE scrolling region (the body). Defined here, in the
     versioned/cache-busted stylesheet, and marked !important so it (a) reliably reaches devices and
     (b) overrides the top-level .modal-main { overflow-y:auto; overscroll-behavior:contain } rule
     that otherwise traps touch scrolling inside the conversation column on phones. */
  #modal.modal-overlay {
    padding: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  #modal.modal-overlay .modal {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #modal.modal-overlay .modal-header {
    flex: 0 0 auto !important;
  }
  #modal.modal-overlay .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
  }
  #modal.modal-overlay .modal-main {
    overflow: visible !important;
    overscroll-behavior: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #modal.modal-overlay #agentSidebar,
  #modal.modal-overlay #agentSidebar .modal-sidebar-scroll {
    overflow: visible !important;
    max-height: none !important;
  }
}