/* ========================================
   MOBILE-FIRST RESPONSIVE (Icons & Text)
   ======================================== */

/* Maintain consistent sizing on mobile (match menu button) */
@media (max-width: 768px) {

  /* Menu button - maintain 38px on mobile */
  .menu-button {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 0.5px solid #000 !important;
    /* Match recenter/search */
  }

  /* Map overlay icons - maintain 38px uniform */
  .map-overlay-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 1.5px solid #000 !important;
  }

  .map-overlay-icon svg {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    min-height: 19px !important;
    display: block !important;
  }


  /* Adjust positioning for 32vh content area - ONLY when no drawer is open */
  body:not(.drawer-open) .map-overlay-icon.bottom-left {
    bottom: calc(32vh + 12px) !important;
    /* Updated for 32vh content area */
  }

  /* Map search container - maintain positioning on mobile - ONLY when no drawer is open */
  body:not(.drawer-open) .map-search-container {
    bottom: calc(32vh + 12px) !important;
    z-index: 1005 !important;
  }

  .map-search-container .map-overlay-icon {
    border-width: 0.5px !important;
  }

  .map-search-input {
    border-width: 0.5px !important;
    font-size: 16px !important;
    /* Prevent iOS zoom on focus */
  }

  .map-search-container.expanded .map-search-input {
    width: 260px !important;
  }

  /* Google Places dropdown - maintain z-index on mobile */
  .pac-container {
    z-index: 1006 !important;
  }

  /* Recenter button - maintain positioning and border on mobile - ONLY when no drawer is open */
  body:not(.drawer-open) #recenterBtn {
    bottom: calc(32vh + 12px + 38px + 12px) !important;
    border-width: 0.5px !important;
  }

  .map-overlay-icon.right-stack {
    border-width: 0.5px !important;
    /* Match recenter/search */
  }

  .map-overlay-icon.right-stack-1 {
    top: 64px !important;
    /* Menu(14px) + 38px + 12px gap */
  }

  .map-overlay-icon.right-stack-2 {
    top: 114px !important;
    /* Comments(64px) + 38px + 12px gap */
  }

  .map-overlay-icon.right-stack-3 {
    top: 164px !important;
    /* Share(114px) + 38px + 12px gap */
  }

  /* Action buttons - match tab button width on mobile */
  #reportBtn {
    width: 66px !important;
    height: 62px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    padding: 4px !important;
  }

  #civicBtn {
    width: 66px !important;
    height: 62px !important;
    font-size: 10px !important;
    line-height: 1.2 !important;
    padding: 4px !important;
  }

  /* Tab buttons - ensure readability */
  .tab-btn {
    font-size: 11px !important;
    max-width: 66px !important;
    padding: 6px 3px !important;
  }

  /* My Community tab - slightly wider on mobile */
  .tab-btn[data-tab="groups"] {
    max-width: 70px !important;
  }

  /* Community Tags Container - Mobile Width (300px - 40px) */
  #communityTagsContainer {
    max-width: 260px;
  }
}

/* Prevent text from turning blue on mobile (touch targets) */
.map-overlay-icon,
.action-btn,
.tab-btn,
.wb-footer-nav-item {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Force black text on all interactive elements */
.tab-btn.active {
  color: #000 !important;
}

/* ========================================
   DESKTOP SIDEBAR ADJUSTMENTS (min-width: 768px)
   ======================================== */
@media (min-width: 768px) {

  /* Shift Map Container */
  .nearby-section,
  #map {
    width: 100% !important;
    margin-left: 0 !important;
  }

  /* Shift Action Buttons (Left Stack) */
  body:not(.drawer-open) .action-buttons {
    left: calc(8vw + 16px) !important;
  }

  /* Shift Bottom-Left Map Icon (Search/Filter) */
  body:not(.drawer-open) .map-overlay-icon.bottom-left {
    left: calc(8vw + 12px) !important;
  }

  /* Shift WeeBro Logo */
  #main-logo {
    left: calc(8vw + 8px) !important;
  }

  /* ========================================
     RIGHT SIDEBAR (MENU) ADJUSTMENTS
     ======================================== */

  /* Hide Hamburger Button */
  #main-menu-button,
  .menu-button {
    display: none !important;
  }

  /* Transform Main Menu Drawer to Fixed Right Sidebar (Glassmorphism) */
  #wb-drawer {
    display: flex !important;
    /* Always visible */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: 16vw !important;
    /* Reduced to 16vw */
    height: 100vh !important;
    max-width: none !important;
    transform: none !important;
    /* Remove slide animation */
    z-index: 900 !important;
    /* Below modals but above map */

    /* Glassmorphism Styles */
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    /* Combined Shadow: Drop shadow + Wider inset gradient (4px offset, 7px blur) */
    box-shadow:
      -4px 0 24px rgba(0, 0, 0, 0.06),
      -1px 0 4px rgba(0, 0, 0, 0.04),
      inset 4px 0 7px -1px rgba(0, 0, 0, 0.12) !important;
    border-left: none !important;
    /* Removed stark border */

    /* Rounded Corners & Spacing */
    border-radius: 16px 0 0 16px !important;
    padding-top: 16px !important;
    /* Accommodate top-left corner */
  }

  /* Hide Overlay in Sidebar Mode */
  #wb-overlay {
    display: none !important;
    pointer-events: none !important;
  }

  /* Adjust Map & Content Width */
  /* Map becomes full screen background to fix glass corner artifacts */
  #map {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    /* Behind everything */
    margin: 0 !important;
  }

  /* Nearby Section Container - Allow map to break out */
  .nearby-section {
    width: 100% !important;
    margin: 0 !important;
    position: static !important;
    height: calc(68vh + 50px) !important;
    /* Push content down by extra 50px */
  }

  /* Adjust Body Padding */
  body {
    padding-right: 16vw !important;
    /* Reduced to 16vw */
  }

  /* Shift Right-Aligned Fixed Elements (Search, Recenter, etc.) */
  body:not(.drawer-open) .map-search-container,
  body:not(.drawer-open) #recenterBtn,
  body:not(.drawer-open) #communityMapControl,
  body:not(.drawer-open) .map-overlay-icon.right-stack {
    right: calc(16vw + 12px) !important;
    /* Adjusted for 16vw sidebar */
  }

  /* Shift Overlay Elements Down (Match Lowered Viewport) */
  body:not(.drawer-open) .action-buttons {
    bottom: calc(32vh + 12px - 50px) !important;
  }

  body:not(.drawer-open) .map-search-container {
    bottom: calc(32vh + 12px - 50px) !important;
  }

  /* Community Tags Container - Desktop Width (300px + 120px) */
  #communityTagsContainer {
    max-width: 420px !important;
  }



  body:not(.drawer-open) #recenterBtn {
    bottom: calc(32vh + 12px + 38px + 8px - 50px) !important;
  }

  body:not(.drawer-open) #communityMapControl {
    bottom: calc(32vh + 104px - 50px) !important;
  }

  body:not(.drawer-open) .map-overlay-icon.bottom-left {
    bottom: calc(30vh + 12px - 50px) !important;
  }

  /* Ensure content scrolls OVER map buttons (z-index 1005) */
  body:not(.drawer-open) .content-area {
    z-index: 1010 !important;
  }

  /* Desktop Tab Optimization */
  .tab-overlay {
    gap: 2.5vw !important;
    /* Equal spacing between buttons */
    padding: 10px 2.5vw !important;
    /* Equal spacing on edges, increased vertical padding */
  }

  .tab-overlay .tab-btn {
    width: auto !important;
    /* Allow growing */
    flex: 1 !important;
    /* Fill container evenly */
    max-width: none !important;
    /* Remove 70px limit */
    font-size: 13px !important;
    /* Increase from 11px */
    padding: 8px 4px !important;
    color: #000 !important;
    /* Black text for unselected */
  }

  .tab-overlay .tab-btn.active {
    color: #fff !important;
    /* White text for selected */
  }

  .tab-overlay .tab-btn .mobile-text {
    display: none !important;
  }

  .tab-overlay .tab-btn .desktop-text {
    display: block !important;
    font-weight: 700 !important;
    color: inherit !important;
    /* Inherit white/black from parent */
  }

  /* Reduce Menu Item Size by ~25% & Add Hover Polish */
  #wb-drawer .wb-menu-item {
    font-size: 16px !important;
    /* Reduced from 18px to 16px */
    padding: 11px 12px !important;
    /* Increased padding to 11px */
    gap: 10px !important;

    /* Hover Polish */
    transition: background-color 0.2s ease, color 0.2s ease !important;
    border-radius: 8px !important;
    margin: 0 8px !important;
    /* Add side margin for hover effect */
  }

  #wb-drawer .wb-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    color: #000 !important;
  }

  /* Standard Icons: Reduced proportionally with text */
  #wb-drawer .wb-menu-icon,
  #wb-drawer .wb-menu-icon svg,
  #wb-drawer .wb-menu-icon i {
    width: 18px !important;
    /* Reduced from 20px to 18px */
    height: 18px !important;
    font-size: 18px !important;
    flex: 0 0 18px !important;
  }

  /* Exception: WeeBro Flex Icon (Larger) */
  /* REMOVED: Now using SVG which aligns naturally with standard icons */

  /* Remove Empty Header Space on Desktop */
  #wb-drawer .wb-d-head {
    display: none !important;
  }

  /* Footer Menu Adjustments */
  #wb-drawer .wb-d-footer {
    display: block !important;
    /* Unhide footer */
    margin-top: auto !important;
    /* Push to bottom */
    padding-bottom: 16px !important;
    border-top: none !important;
    /* Remove any border */
  }

  /* Footer Menu Items (Privacy, Terms, Logout) */
  #wb-drawer .wb-d-footer .wb-menu-item {
    font-size: 13px !important;
    /* Reduced to 13px */
    color: #111 !important;
    /* Full black for all footer items */
    padding: 3px 12px !important;
    /* Reduced padding for footer items */
  }

  /* Log Out Item Specifics - heavier font weight */
  #wb-drawer #m-logout {
    color: #111 !important;
    /* Black text for Log Out */
    font-weight: 600 !important;
    /* Heavier font weight for prominence */
  }

  /* Hide Separators */
  .wb-menu-separator,
  #m-privacy::before {
    display: none !important;
  }
}