/* ============================================================
   CAMPISTRY — MOBILE RESPONSIVENESS MASTER OVERRIDE
   mobile-responsive.css v2.0
   ============================================================
   Load this file AFTER all other CSS files in every HTML page.
   ============================================================
   v2.0 FIXES:
   1. Flow + Dashboard header — clean single-row layout
   2. Tile palette — no clipping, professional wrapping
   3. Master Scheduler grid — proper mobile sizing
   4. Drag/drop & resize — touch-friendly targets
   5. Print Center — proper stacking, no overlaps
   6. Report partial cells — z-index fix
   7. Hamburger menu — scroll fix + landing page symbol
   8. Landing page — native app feel
   ============================================================ */

/* ============================================
   0. GLOBAL FOUNDATIONS
   ============================================ */
html, body {
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  button, a, select, .sidebar-item, .da-subtab, .ms-btn {
    min-height: 44px;
  }
  input[type="text"], input[type="time"], input[type="date"],
  input[type="number"], input[type="email"], input[type="password"],
  select, textarea {
    font-size: 16px !important;
  }
  [style*="overflow"], .da-grid-wrapper, .ms-grid-wrapper,
  .da-palette, .ms-palette {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   1. LANDING PAGE — Native App Feel
   ============================================ */
@media (max-width: 768px) {
  /* NAV */
  .nav { padding: 10px 16px !important; }
  .nav.nav-scrolled { padding: 8px 16px !important; }
  .nav-inner { gap: 12px !important; }
  .nav-logo { gap: 8px !important; font-size: 1.1rem !important; }
  .landing-logo-img { height: 32px !important; }

  /* PROMO BANNER — mobile: slim single line */
  .promo-banner {
    font-size: 0.72rem !important;
    padding: 6px 10px !important;
    gap: 6px !important;
    --promo-banner-height: 32px !important;
    height: 32px !important;
  }
  .promo-banner span {
    line-height: 1 !important;
  }
  .promo-banner strong {
    display: none !important;
  }
  .promo-banner code {
    padding: 1px 5px !important;
    font-size: 0.72rem !important;
  }
  .promo-banner-close {
    font-size: 1rem !important;
    padding: 0 2px !important;
  }

  /* FIX: Hamburger symbol — proper 3-line icon */
  .nav-mobile-toggle {
    display: flex !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    background: transparent !important;
    border: 1px solid var(--slate-300, #CBD5E1) !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }
  .nav-mobile-toggle span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    margin: 2.5px 0 !important;
    background: var(--slate-700, #334155) !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
  }

  /* FIX: Mobile drawer — scroll doesn't clip bottom */
 .mobile-drawer {
    height: 100vh !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    padding-top: calc(80px + var(--promo-banner-height, 0px)) !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .mobile-overlay {
    position: fixed !important;
    inset: 0 !important;
  }

  /* HERO — "Camp-Tech, Reimagined" fills the opening screen */
  .hero {
   .hero {
    padding: calc(90px + var(--promo-banner-height, 0px)) 20px 40px !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .hero-content { max-width: 100% !important; }
  .hero-badge { font-size: 0.75rem !important; padding: 6px 12px !important; margin-bottom: 20px !important; }
  .hero-title {
    font-size: clamp(2.8rem, 12vw, 4.5rem) !important;
    line-height: 1.05 !important;
    margin-bottom: 16px !important;
    letter-spacing: -0.04em !important;
  }
  .hero-title-accent { font-size: inherit !important; }
  .hero-sub { font-size: 0.95rem !important; line-height: 1.6 !important; margin-bottom: 24px !important; padding: 0 !important; }
  .hero-cta {
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    margin-bottom: 36px !important;
  }
  .hero-cta .btn-primary, .hero-cta .btn-ghost,
  .hero-cta > a, .hero-cta > button {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    font-size: 0.95rem !important;
    display: flex !important;
  }
  .hero-stats {
    flex-direction: column !important;
    gap: 14px !important;
    align-items: center !important;
    padding: 0 !important;
  }
  .stat { text-align: center !important; align-items: center !important; }
  .stat-value { font-size: 0.95rem !important; }
  .stat-label { font-size: 0.75rem !important; }
  .stat-divider { display: none !important; }

  /* SECTION HEADERS */
  .section-header { margin-bottom: 32px !important; padding: 0 4px !important; }
  .section-eyebrow { font-size: 0.72rem !important; margin-bottom: 10px !important; }
  .section-title { font-size: 1.5rem !important; line-height: 1.2 !important; }
  .section-sub { font-size: 0.9rem !important; }
  .section-header.light .section-title { font-size: 1.5rem !important; }

  /* PRODUCTS — horizontal scroll tabs, not stacked */
  .products-showcase { padding: 48px 16px !important; }
  .product-tabs {
    flex-direction: row !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 0 0 12px !important;
    margin-bottom: 24px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }
  .product-tabs::-webkit-scrollbar { display: none !important; }
  .product-tab { flex-shrink: 0 !important; padding: 10px 18px !important; font-size: 0.85rem !important; border-radius: 999px !important; white-space: nowrap !important; }
  .product-panel { padding: 24px 16px !important; border-radius: 16px !important; }
  .product-panel-content { flex-direction: column !important; gap: 24px !important; }
  .product-info { padding: 0 !important; }
  .product-title { font-size: 1.3rem !important; }
  .product-desc { font-size: 0.9rem !important; }
  .product-features li { font-size: 0.85rem !important; margin-bottom: 8px !important; }
  .product-cta { width: 100% !important; text-align: center !important; justify-content: center !important; display: flex !important; }
  .product-visual, .product-mockup { width: 100% !important; max-width: 100% !important; border-radius: 12px !important; overflow: hidden !important; }

  /* FEATURES */
  .features { padding: 48px 16px !important; }
  .features-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .feature-card { padding: 20px 18px !important; border-radius: 14px !important; }
  .feature-icon { width: 44px !important; height: 44px !important; margin-bottom: 12px !important; }

  /* DEMO */
  .demo { padding: 48px 16px !important; }
  .demo-features { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* PRICING */
  .pricing { padding: 48px 16px !important; }
  .pricing-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .pricing-card { padding: 24px 20px !important; border-radius: 16px !important; }
  .pricing-card.featured { transform: none !important; margin: 0 !important; }
  .price-value { font-size: 2.5rem !important; }
  .pricing-cta { width: 100% !important; padding: 14px !important; }
  .pricing-contact { padding: 20px 16px !important; }

  /* CTA */
  .cta-section { padding: 48px 20px !important; }
  .cta-content h2 { font-size: 1.6rem !important; line-height: 1.2 !important; }
  .cta-content p { font-size: 0.9rem !important; margin-bottom: 24px !important; }
  .cta-buttons { flex-direction: column !important; gap: 10px !important; }
  .btn-cta, .btn-cta-ghost { width: 100% !important; text-align: center !important; padding: 14px 24px !important; }

  /* FOOTER */
  .footer { padding: 48px 20px 32px !important; }
  .footer-main { grid-template-columns: 1fr !important; gap: 28px !important; text-align: center !important; }
  .footer-brand { text-align: center !important; max-width: none !important; }
  .footer-brand p { max-width: none !important; text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
  .footer-logo { justify-content: center !important; margin-bottom: 12px !important; }
  .footer-col { text-align: center !important; }
  .footer-col a { padding: 6px 0 !important; display: block !important; }
  .footer-bottom { padding-top: 20px !important; text-align: center !important; font-size: 0.8rem !important; }

  /* AUTH MODAL */
  .auth-modal-content { width: calc(100% - 32px) !important; max-width: 400px !important; margin: 16px !important; max-height: 88vh !important; overflow-y: auto !important; border-radius: 16px !important; }
}

@media (max-width: 400px) {
  .hero-title { font-size: 1.8rem !important; }
  .section-title { font-size: 1.3rem !important; }
  .price-value { font-size: 2.2rem !important; }
  .nav-logo { font-size: 1rem !important; }
  .landing-logo-img { height: 28px !important; }
}


/* ============================================
   2. DASHBOARD HEADER + LAYOUT
   ============================================ */
@media (max-width: 768px) {
  :root { --promo-banner-height: 32px; }
  /* NAV */
  .dashboard .nav, .dashboard-nav, body > .nav { padding: 10px 12px !important; }
  .nav-inner { position: relative !important; gap: 10px !important; }
  .dash-nav-logo-img { height: 28px !important; }
  .nav-user { display: none !important; }
  .dash-mobile-toggle { order: 3 !important; }
  .dash-mobile-menu { top: calc(100% + 4px) !important; right: 0 !important; border-radius: 12px !important; min-width: 200px !important; }

  .dashboard { padding: 16px 12px 60px !important; }
  .welcome-title { font-size: 1.4rem !important; }
  .welcome-sub { font-size: 0.88rem !important; }
  .dashboard-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .dashboard-card { padding: 14px !important; }
  .card-header { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .stats-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }
  .stat-item { padding: 10px 6px 8px !important; }
  .stat-item .stat-value { font-size: 1.4rem !important; }
  .stat-item .stat-label { font-size: 0.62rem !important; }
  .products-grid { grid-template-columns: 1fr !important; }
  .team-grid { grid-template-columns: 1fr !important; }
  .profile-row { flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
  .form-actions { flex-direction: column !important; gap: 8px !important; }
  .form-actions button { width: 100% !important; }
  .quick-links { flex-direction: column !important; align-items: center !important; gap: 10px !important; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr 1fr !important; }
  .welcome-title { font-size: 1.2rem !important; }
}


/* ============================================
   3. FLOW APP HEADER
   ============================================ */
@media (max-width: 768px) {
  .app-header {
    height: auto !important;
    min-height: 48px !important;
    padding: 8px 10px !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .header-left { gap: 6px !important; flex-shrink: 0 !important; min-width: 0 !important; }
  .header-left > a[href="dashboard.html"] {
    margin-right: 4px !important;
    font-size: 1.1rem !important;
    padding: 6px !important;
    min-height: 36px !important; min-width: 36px !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
  }
  .hamburger-btn {
    width: 36px !important; height: 36px !important;
    min-height: 36px !important; min-width: 36px !important;
    padding: 0 7px !important; flex-shrink: 0 !important;
  }
  .app-logo-flow-img { height: 24px !important; max-height: 26px !important; top: 0 !important; }
  .app-logo-me-img { height: 22px !important; max-height: 24px !important; top: 0 !important; }
  .header-app-switch { margin-left: 4px !important; }
  .header-right { flex: 1 !important; justify-content: flex-end !important; min-width: 0 !important; }
  .header-date-label { display: none !important; }
  .header-date-input { max-width: 140px !important; padding: 4px 6px !important; font-size: 13px !important; min-height: 36px !important; }
  .sidebar { top: 48px !important; }
  .app-content { padding: 0.5rem 0.5rem 1rem !important; }
  .setup-grid { gap: 12px !important; }
  .setup-card { padding: 10px 12px !important; }
  .setup-card-header { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; }
  .master-list { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; }
  .detail-pane { padding: 10px !important; }
  .setup-group { padding: 10px !important; }
  .setup-button-row { flex-wrap: wrap !important; gap: 6px !important; }
  .setup-button-row button { flex: 1 1 auto !important; min-width: 110px !important; }
  #scheduleTable { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  #scheduleTable table { min-width: 600px !important; }
  #report-content { overflow-x: auto !important; }
  .app-page-title { font-size: 1.1rem !important; }
}

@media (max-width: 480px) {
  .app-header { padding: 6px 8px !important; }
  .app-logo-flow-img { height: 22px !important; }
  .app-logo-me-img { height: 20px !important; }
  .header-date-input { max-width: 120px !important; }
  .header-app-switch { display: flex !important; margin-left: 2px !important; }
}


/* ============================================
   4. MASTER SCHEDULER — Palette + Grid
   ============================================ */
@media (max-width: 900px) {
  .ms-container {
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
  }
  /* Sidebar: full-width, NO max-height so tiles never clip */
  .ms-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    flex-direction: column !important;
    overflow: visible !important;
  }
  .ms-sidebar-header {
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-right: none !important;
    white-space: normal !important;
  }
  .ms-sidebar-header h3 { margin: 0 !important; transform: none !important; font-size: 12px !important; }
  .ms-palette {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    align-content: flex-start !important;
    max-height: none !important;
  }
  .ms-tile {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 7px 12px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
    min-height: 32px !important;
    display: flex !important;
    align-items: center !important;
  }
  .ms-tile-divider { display: none !important; }
  .ms-tile-label {
    width: 100% !important;
    padding: 2px 4px !important;
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    margin-top: 2px !important;
  }
  .ms-toolbar { padding: 6px 8px !important; gap: 6px !important; flex-wrap: wrap !important; }
  .ms-toolbar-group { padding: 0 4px !important; gap: 4px !important; flex-wrap: wrap !important; }
  .ms-select { min-width: 90px !important; font-size: 11px !important; }
  .ms-input { width: 90px !important; font-size: 11px !important; }
  .ms-btn { padding: 6px 10px !important; font-size: 11px !important; }
  .ms-grid-wrapper {
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
    min-height: 300px !important;
    max-height: calc(100vh - 280px) !important;
  }
  .ms-grid { min-width: 600px !important; }
  /* Touch-friendly resize handles */
  .grid-event { min-height: 30px !important; }
  .grid-event .resize-handle { height: 8px !important; }
  .grid-event .resize-handle-top { top: -2px !important; }
  .grid-event .resize-handle-bottom { bottom: -2px !important; }
  .ms-modal { min-width: unset !important; max-width: 95vw !important; width: 95vw !important; max-height: 85vh !important; }
  .ms-modal-body { max-height: 60vh !important; overflow-y: auto !important; }
}

@media (max-width: 600px) {
  .ms-toolbar { flex-direction: column !important; align-items: stretch !important; }
  .ms-toolbar-group { width: 100% !important; border-right: none !important; padding: 0 !important; }
}


/* ============================================
   5. DAILY ADJUSTMENTS
   ============================================ */
@media (max-width: 900px) {
  .da-container { flex-direction: column !important; height: auto !important; min-height: auto !important; max-height: none !important; }
  .da-sidebar {
    width: 100% !important; min-width: 0 !important;
    max-height: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--da-border, #e2e8f0) !important;
    flex-direction: column !important;
    overflow: visible !important;
  }
  .da-sidebar-header {
    writing-mode: horizontal-tb !important;
    text-orientation: initial !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--da-border, #e2e8f0) !important;
    border-right: none !important;
  }
  .da-sidebar-header h3 { margin: 0 !important; transform: none !important; font-size: 12px !important; }
  .da-palette {
    flex-direction: row !important; flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 6px !important; padding: 8px 10px !important;
    align-content: flex-start !important;
    max-height: none !important;
  }
  .da-tile {
    white-space: nowrap !important; flex-shrink: 0 !important;
    padding: 6px 10px !important; font-size: 11px !important;
    border-radius: 6px !important; min-height: 30px !important;
    display: flex !important; align-items: center !important;
  }
  .da-tile-divider { display: none !important; }
  .da-tile-label { width: 100% !important; padding: 2px 4px !important; font-size: 9px !important; text-transform: uppercase !important; color: #64748b !important; margin-top: 2px !important; }
  .da-subtabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; flex-wrap: nowrap !important; }
  .da-subtab { white-space: nowrap !important; padding: 10px 14px !important; font-size: 12px !important; flex-shrink: 0 !important; }
  .da-toolbar { flex-wrap: wrap !important; gap: 6px !important; padding: 6px 10px !important; }
  .da-grid-wrapper { overflow: auto !important; -webkit-overflow-scrolling: touch !important; margin: 8px !important; min-height: 250px !important; max-height: calc(100vh - 300px) !important; }
  .da-grid { min-width: 600px !important; }
  .da-event { min-height: 26px !important; }
  .da-resize-handle { height: 8px !important; }
  .da-resource-layout { flex-direction: column !important; gap: 12px !important; }
  .da-resource-list { min-width: 0 !important; }
  .da-resource-detail { min-width: 0 !important; }
  .da-form-grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  .da-modal { width: 95vw !important; max-width: 95vw !important; max-height: 85vh !important; }
  .da-modal-body { max-height: 55vh !important; overflow-y: auto !important; }
  .da-modal-cb-group { grid-template-columns: 1fr !important; }
  .da-section { padding: 10px !important; }
  .da-pane { padding: 8px !important; }
  #da-rainy-panel { overflow-x: auto !important; }
}

@media (max-width: 600px) {
  .da-toolbar { flex-direction: column !important; align-items: stretch !important; }
  .da-toolbar-group { width: 100% !important; }
}


/* ============================================
   6. CAMPISTRY ME
   ============================================ */
@media (max-width: 768px) {
  .main { padding: 14px 10px !important; }
  .action-bar { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .search-input { max-width: none !important; width: 100% !important; }
  .action-spacer { display: none !important; }
  .data-table-wrapper, .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .camper-card { padding: 12px !important; }
  .modal-content, .me-modal { width: 95vw !important; max-width: 95vw !important; max-height: 85vh !important; margin: 8px !important; }
  .camper-detail-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr !important; }
  .stat-card { padding: 10px !important; }
  .nav-back span { display: none !important; }
}

/* --- Campistry Me header — match Flow's compact height --- */
@media (max-width: 768px) {
  /* Me nav: compact like Flow */
  .nav-left { gap: 0.5rem !important; }
  .nav-logo-me { height: 24px !important; max-height: 26px !important; top: 0 !important; }
.nav-logo-flow { height: 22px !important; max-height: 24px !important; top: 0 !important; }
  .nav-app-switch { margin-left: 4px !important; }
  /* Sync badge: don't clip */
  .sync-badge {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.65rem !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    overflow: visible !important;
  }
  .sync-dot { width: 6px !important; height: 6px !important; }
  /* Nav-back: compact */
  .nav-back { font-size: 0.75rem !important; gap: 0.2rem !important; }
  .nav-back svg { width: 14px !important; height: 14px !important; }
}


/* ============================================
   7. PRINT CENTER — Fix overlapping/hidden
   ============================================ */
@media (max-width: 768px) {
  .pc-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: calc(100vh - 120px) !important;
    overflow: visible !important;
  }
  .pc-topbar {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    position: relative !important;
    z-index: 15 !important;
  }
  .pc-topbar-left { width: 100% !important; order: 1 !important; }
  .pc-topbar-center { order: 2 !important; }
  .pc-topbar-right { order: 3 !important; display: flex !important; flex-wrap: wrap !important; gap: 4px !important; }
  .pc-settings-dropdown { width: 100% !important; }
  .pc-settings-panel { max-height: 50vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
  .pc-quick { flex-direction: column !important; gap: 8px !important; padding: 8px !important; }
  .pc-quick-group { width: 100% !important; flex-wrap: wrap !important; gap: 6px !important; }
  .pc-quick-name, .pc-quick-sub { width: 100% !important; min-width: 0 !important; max-width: none !important; }
  .pc-quick-input { width: 100% !important; }
  .pc-quick-toggles { gap: 10px !important; flex-wrap: wrap !important; }
  .pc-quick-tpl { width: 100% !important; min-width: 0 !important; }
  .pc-controls-top { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
  .pc-view-tabs { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; flex-wrap: nowrap !important; gap: 4px !important; }
  .pc-view-tab { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 11px !important; padding: 6px 10px !important; }
  .pc-view-options { flex-wrap: wrap !important; gap: 6px !important; }
  .pc-selector-row { flex-direction: column !important; gap: 4px !important; }
  .pc-selector-box { max-height: 80px !important; overflow-y: auto !important; }
  .pc-workspace { flex: 1 !important; min-height: 250px !important; overflow: hidden !important; position: relative !important; }
  .pc-preview-area { overflow: auto !important; -webkit-overflow-scrolling: touch !important; padding: 8px !important; }
  .pc-scroll-arrow { display: none !important; }
  .pc-advanced-drawer {
    position: fixed !important;
    top: auto !important; bottom: 0 !important;
    left: 0 !important; right: 0 !important;
    width: 100% !important;
    max-height: 70vh !important;
    border-radius: 16px 16px 0 0 !important;
    border-left: none !important;
    border-top: 1px solid #CBD5E1 !important;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.12) !important;
    z-index: 50 !important;
  }
  .pc-advanced-drawer.open { transform: translateY(0) !important; }
  .pc-adv-scroll { max-height: calc(70vh - 50px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; }
  .pc-topbar-right .pc-btn { font-size: 11px !important; padding: 5px 8px !important; }
}


/* ============================================
   8. REPORT — Partial cell z-index fix
   ============================================
   Sticky first column must stay above partial
   cells that have position:relative
   ============================================ */
#report-content table td[style*="position:sticky"],
#report-content table th[style*="position:sticky"],
#report-content td[style*="sticky"],
#report-content th[style*="sticky"],
#avail-grid-wrapper table td:first-child,
#avail-grid-wrapper table th:first-child,
table td[style*="position:sticky"][style*="left:0"],
table th[style*="position:sticky"][style*="left:0"] {
  z-index: 10 !important;
}

#avail-grid-wrapper td[style*="position:relative"],
#report-content td[style*="position:relative"] {
  z-index: 1 !important;
}


/* ============================================
   9. SCHEDULE TABLE VIEW
   ============================================ */
@media (max-width: 768px) {
  .schedule-view-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  #scheduleTable table { min-width: 700px !important; font-size: 0.75rem !important; }
  #scheduleTable th, #scheduleTable td { padding: 6px 8px !important; white-space: nowrap !important; }
}


/* ============================================
   10. SIDEBAR SCROLL FIX
   ============================================
   Body locks when sidebar open so content
   doesn't scroll behind and clip sidebar bottom
   ============================================ */
.sidebar { z-index: 50 !important; }
.sidebar-backdrop { z-index: 49 !important; }

body.sidebar-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 768px) {
  .sidebar {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 80px !important;
  }
}


/* ============================================
   11-18. REMAINING SECTIONS
   ============================================ */
@media (max-width: 768px) {
  /* Config tabs */
  #fields > div, #locations > div, #special_activities > div { overflow-x: auto !important; }
  /* Leagues */
 /* Leagues now uses setup-grid/setup-card pattern - flex wrap handles responsiveness */
  #leagues > div, #specialty-leagues > div { overflow-x: auto !important; }
  /* Locator */
  .locator-controls, .camper-check-controls { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
  .locator-controls input, .locator-controls select { width: 100% !important; }
  /* Helpers */
  #helper-content, #updates-content, #camper-locator { overflow-x: auto !important; }
  .helper-card, .helper-section { padding: 12px !important; }
  /* Modals catchall */
  [style*="position: fixed"][style*="display: flex"][style*="align-items: center"],
  [style*="position:fixed"][style*="display:flex"][style*="align-items:center"] { padding: 8px !important; }
  [style*="position: fixed"] > [style*="background: #fff"],
  [style*="position: fixed"] > [style*="background:#fff"],
  [style*="position:fixed"] > [style*="background:#fff"],
  [style*="position:fixed"] > [style*="background: white"],
  [style*="position: fixed"] > [style*="background: white"] { max-width: 95vw !important; max-height: 85vh !important; overflow-y: auto !important; margin: 8px !important; }
  /* Multi-scheduler */
  .subdivision-status-panel { padding: 10px !important; overflow-x: auto !important; }
  .subdivision-cards { flex-direction: column !important; gap: 8px !important; }
  .subdivision-card { width: 100% !important; }
  /* Toasts */
  .toast, .access-denied-toast { left: 12px !important; right: 12px !important; bottom: 12px !important; max-width: none !important; width: auto !important; }
  /* RBAC overlays */
  .view-only-overlay { top: 4px !important; right: 4px !important; }
  .view-only-badge { font-size: 0.65rem !important; padding: 3px 6px !important; }
  /* Team tables */
  .team-table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .invite-form { flex-direction: column !important; gap: 8px !important; }
  .invite-form input, .invite-form select { width: 100% !important; }
}


/* ============================================
   19. SAFE AREA INSETS
   ============================================ */
@supports (padding: env(safe-area-inset-bottom)) {
  .app-header, .nav { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
  .toast, .access-denied-toast { bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
  .mobile-drawer { padding-bottom: calc(32px + env(safe-area-inset-bottom)); }
}


/* ============================================
   20. LANDSCAPE PHONE
   ============================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .app-header { height: 42px !important; min-height: 42px !important; padding: 4px 10px !important; }
  .sidebar { top: 42px !important; }
  .da-modal, .ms-modal, .auth-modal-content { max-height: 95vh !important; }
}


/* ============================================
   21. SCROLLBAR STYLING
   ============================================ */
@media (max-width: 768px) {
  .ms-grid-wrapper::-webkit-scrollbar, .da-grid-wrapper::-webkit-scrollbar,
  #scheduleTable::-webkit-scrollbar, .pc-workspace::-webkit-scrollbar,
  .pc-preview-area::-webkit-scrollbar { height: 4px; width: 4px; }
  .ms-grid-wrapper::-webkit-scrollbar-thumb, .da-grid-wrapper::-webkit-scrollbar-thumb,
  #scheduleTable::-webkit-scrollbar-thumb, .pc-workspace::-webkit-scrollbar-thumb,
  .pc-preview-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 4px; }
}