/* Rhythm Capital Mobile CSS v6 — works with native sidebar.js mobile support */

/* === PUBLIC MOBILE MENU (.mobile-menu) === */
.mobile-menu {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #f5f1e8 !important;
  background-color: #f5f1e8 !important;
  color: #1a0f2e !important;
  z-index: 9999 !important;
  transform: translateX(100%) !important;
  -webkit-transform: translateX(100%) !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  pointer-events: auto !important;
  padding: calc(20px + env(safe-area-inset-top, 0)) 24px calc(20px + env(safe-area-inset-bottom, 0)) 24px !important;
  box-sizing: border-box !important;
}
.mobile-menu.open {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
}
.mobile-menu * { pointer-events: auto !important; }
.mobile-menu .wrap, .mobile-menu > div { width: 100% !important; max-width: 100% !important; }
.mobile-menu .mobile-nav, .mobile-menu nav { display: flex !important; flex-direction: column !important; width: 100% !important; }
.mobile-menu a, .mobile-menu button {
  display: block !important;
  width: 100% !important;
  padding: 16px 0 !important;
  color: #1a0f2e !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(201, 169, 97, 0.15) !important;
  font-size: 22px !important;
  min-height: 44px !important;
  background: transparent !important;
}
.mobile-menu .mobile-close, .mobile-menu-head .close-btn, .mobile-menu-head button {
  background: transparent !important;
  border: 0 !important;
  color: #1a0f2e !important;
  font-size: 28px !important;
  cursor: pointer !important;
  padding: 8px 12px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  width: auto !important;
}
body.mobile-menu-open, body.menu-open { overflow: hidden !important; }

/* === ADMIN SIDEBAR — uses native sidebar.js mobile system === */
@media (max-width: 1024px) {
  /* Force mobile header to be visible (some pages may have it hidden) */
  #rcMobileHeader {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9000 !important;
  }
  
  /* Make sidebar slide in from left when .open is set */
  #rcSidebar {
    transform: translateX(-100%) !important;
    -webkit-transform: translateX(-100%) !important;
    transition: transform 0.25s ease !important;
    -webkit-transition: -webkit-transform 0.25s ease !important;
    z-index: 9999 !important;
  }
  #rcSidebar.open {
    transform: translateX(0) !important;
    -webkit-transform: translateX(0) !important;
  }
  
  /* Show overlay when sidebar is open */
  #rcOverlay {
    z-index: 9998 !important;
  }
  #rcOverlay.open, #rcOverlay.show, #rcOverlay.visible {
    display: block !important;
    background: rgba(0, 0, 0, 0.6) !important;
  }
  
  /* Main content full width on mobile */
  .rc-main-content, main.rc-main-content {
    margin-left: 0 !important;
    padding: 12px !important;
    padding-top: 70px !important; /* leave room for fixed mobile header */
    width: 100% !important;
  }
  
  /* Generic mobile fixes */
  html, body { overflow-x: hidden !important; -webkit-text-size-adjust: 100%; }
  a, button, [role="button"], [onclick] { min-height: 44px; min-width: 44px; }
  p a, span a, td a, .inline-link { min-height: unset; }
  input, select, textarea { font-size: 16px !important; }
  .stats-grid, [class*="grid-cols-5"], [class*="stats"] { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  table:not(.responsive-table) { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .modal, [class*="modal"] { padding: 12px !important; }
  .modal > div, [class*="modal"] > div { max-width: 100vw !important; max-height: 90vh !important; overflow-y: auto !important; }
  body { padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
}