/**
 * ClearPro mobile menu — simple full-screen drawer
 * Desktop dropdowns are handled in layout + admin-mobile-menu.js
 *
 * The open/closed state is driven entirely by the #mobile-menu-check
 * checkbox (see includes/layout.php) via plain :checked selectors below -
 * no JavaScript required. This was rewritten because on some cheap
 * entry-level Android phones the old JS-built button/drawer either ran
 * late or never ran at all (slow CPU, data-saver browser mode), leaving
 * the raw unstyled <details> markup dumped under the header. A checkbox
 * toggle works instantly in every browser regardless of JS. Javascript
 * (admin-mobile-menu.js) now only adds nice-to-haves on top: body scroll
 * lock while open, and closing on Escape.
 */

/* Hide Menu button and its checkbox on desktop */
html body .mobile-menu-check,
html body .mobile-menu-toggle {
  display: none !important;
}
.mobile-menu-check {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

.header-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.header-signout {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 36px !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 13px !important;
  text-decoration: none !important;
  background: #c62828 !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  white-space: nowrap !important;
  transform: none !important;
  overflow: hidden !important;
  max-width: 100% !important;
}

@media (min-width: 781px) {
  .site-header {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .site-header nav {
    flex: 1;
    margin-left: 8px;
  }
  .header-top-actions {
    order: 3;
    margin-left: 8px;
  }
}

/* ===================== MOBILE ===================== */
@media (max-width: 780px) {
  /* Top bar: simple white sticky strip */
  .admin-mode .site-header,
  .staff-mode .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 10050 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 56px !important;
    height: 56px !important;
    padding: 0 12px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #d5e4ec !important;
    box-shadow: 0 2px 10px rgba(12, 63, 89, 0.08) !important;
  }

  .admin-mode .brand,
  .staff-mode .brand {
    order: 1 !important;
    max-width: calc(100% - 170px) !important;
    overflow: visible !important;
  }
  .admin-mode .brand-logo img,
  .staff-mode .brand-logo img {
    height: 48px !important;
    max-height: 48px !important;
    width: auto !important;
  }
  .admin-mode .brand-logo span,
  .staff-mode .brand-logo span {
    display: none !important;
  }

  .header-top-actions {
    order: 2 !important;
    margin-left: auto !important;
    gap: 8px !important;
  }

  .header-signout {
    min-height: 38px !important;
    padding: 8px 12px !important;
    font-size: 13px !important;
  }

  /* Menu button (a <label for="mobile-menu-check">, not a JS-created <button>) */
  html body.admin-mode .mobile-menu-toggle,
  html body.staff-mode .mobile-menu-toggle,
  html body .mobile-menu-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    min-height: 38px !important;
    min-width: 70px !important;
    padding: 8px 14px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #0a5f93 !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: none !important;
    transform: none !important;
    clip: auto !important;
    overflow: visible !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .mobile-menu-check:checked ~ .site-header .mobile-menu-toggle {
    background: #08496f !important;
  }

  /* Hide native nav until open - then full-screen drawer UNDER sticky bar.
     Unconditional (no JS-added class required) so this works even if
     JavaScript never runs on a given phone. */
  .admin-mode .site-header nav,
  .staff-mode .site-header nav {
    display: none !important;
  }

  .mobile-menu-check:checked ~ .site-header nav {
    display: block !important;
    position: fixed !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px 12px 28px !important;
    background: #f4f8fb !important;
    border: 0 !important;
    border-top: 1px solid #d5e4ec !important;
    box-shadow: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    z-index: 10040 !important;
    /* No transforms/filters — smooth scroll */
    transform: none !important;
    animation: none !important;
    /* Staff: never show as wrapping pill row on mobile */
    flex-wrap: nowrap !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Staff mobile drawer links — full-width rows (same as manager list style) */
  .staff-mode .mobile-menu-check:checked ~ .site-header nav > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 8px !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid #d5e4ec !important;
    background: #ffffff !important;
    color: #0a5f93 !important;
    font-size: 16px !important;
    font-weight: 750 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
  .staff-mode .mobile-menu-check:checked ~ .site-header nav > a:active {
    background: #e8f2f8 !important;
  }

  /* Dim page content while menu open (checkbox and main are both direct
     children of body, so the sibling selector reaches straight through).
     Works with zero JS. Background-scroll lock below is JS-enhanced only
     (admin-mobile-menu.js toggles body.mobile-menu-open) since body can't
     be reached from its own child via a sibling selector - if JS doesn't
     run, the menu still opens/closes fine, the page just isn't scroll-locked
     behind it. */
  .mobile-menu-check:checked ~ main.app-main {
    visibility: hidden;
  }
  body.mobile-menu-open {
    overflow: hidden !important;
  }

  /* Top-level links */
  .admin-mode .site-header nav > a,
  .staff-mode .site-header nav > a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 8px !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
    border-radius: 12px !important;
    border: 1px solid #d5e4ec !important;
    background: #ffffff !important;
    color: #142833 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }
  .admin-mode .site-header nav > a:active,
  .staff-mode .site-header nav > a:active {
    background: #e8f2f8 !important;
  }

  /* Department groups */
  .admin-mode .site-header nav > details.sales-menu,
  .admin-mode .site-header nav > details {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    border: 1px solid #d5e4ec !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    box-shadow: none !important;
    position: static !important;
    height: auto !important;
  }

  .admin-mode .site-header nav details > summary {
    list-style: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 48px !important;
    padding: 14px 16px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #0a5f93 !important;
    cursor: pointer !important;
    background: #ffffff !important;
  }
  .admin-mode .site-header nav details > summary::-webkit-details-marker {
    display: none !important;
  }
  .admin-mode .site-header nav details > summary::after {
    content: "+" !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #5b6f7b !important;
    line-height: 1 !important;
  }
  .admin-mode .site-header nav details[open] > summary {
    background: #0a5f93 !important;
    color: #ffffff !important;
    border-bottom: 1px solid #08496f !important;
  }
  .admin-mode .site-header nav details[open] > summary::after {
    content: "−" !important;
    color: #ffffff !important;
  }

  /* Closed: hide children hard */
  .admin-mode .site-header nav details:not([open]) > .sales-menu-links {
    display: none !important;
  }

  /* Open: simple list of options */
  .admin-mode .site-header nav details[open] > .sales-menu-links {
    display: block !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px !important;
    background: #eef5f9 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    animation: none !important;
    transform: none !important;
  }

  .admin-mode .site-header nav details[open] .sales-menu-links a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 0 6px !important;
    padding: 13px 14px !important;
    min-height: 46px !important;
    border-radius: 10px !important;
    border: 1px solid #c5d9e4 !important;
    background: #ffffff !important;
    color: #142833 !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }
  .admin-mode .site-header nav details[open] .sales-menu-links a:last-child {
    margin-bottom: 0 !important;
  }
  .admin-mode .site-header nav details[open] .sales-menu-links a:active {
    background: #dff0ff !important;
  }

  /* Kill old fancy dropdown decorations on mobile */
  .admin-mode .site-header .sales-menu-links::before {
    display: none !important;
  }
}