/* ══════════════════════════════════════════════════════════════
   RESPONSIVE.CSS — Mobile-first responsive rules for all pages
   Breakpoints: 1200px (laptop), 1024px (tablet-landscape),
                768px (tablet), 480px (phone)
   ══════════════════════════════════════════════════════════════ */

/* ── MOBILE NAV: Hamburger toggle ── */
.mobile-menu-btn {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10001;
  background: var(--card-bg, #1e1b2e);
  border: 1px solid var(--border, #2d2a3e);
  color: var(--text, #e2e0f0);
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ── 1200px: Large laptops ── */
@media (max-width: 1200px) {
  .creator-grid, .discover-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .collection-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── 1024px: Tablets landscape ── */
@media (max-width: 1024px) {
  /* Nav collapses to icon-only */
  #_nav, ._nav, [class*="sidebar-nav"] {
    width: 52px !important;
  }
  #_nav ._n span, ._nav ._n span,
  #_nav .nav-label, ._nav .nav-label,
  #_nav ._hd, ._nav ._hd,
  #_nav ._ft, ._nav ._ft { display: none !important; }
  
  body { padding-left: 52px !important; }
  
  /* Grids reduce */
  .grid-3, .creator-grid, .discover-grid,
  .product-grid, .store-grid, .badge-grid,
  .template-grid, .file-grid { grid-template-columns: repeat(2, 1fr) !important; }
  
  .stat-cards, .stats-row, .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  
  /* Right sidebar hides */
  .right-sidebar, .sidebar-right, .feed-sidebar,
  [class*="right-panel"] { display: none !important; }
  
  /* Feed goes full width */
  .feed-layout, .three-col, .main-layout {
    grid-template-columns: 1fr !important;
  }
  
  /* Settings inner sidebar narrows */
  .settings-nav, .settings-sidebar {
    width: 160px !important;
    min-width: 160px !important;
  }
  
  /* Tables scroll horizontally */
  .table-wrapper, .data-table { overflow-x: auto; }
  table { min-width: 600px; }
}

/* ── 768px: Tablets portrait / large phones ── */
@media (max-width: 768px) {
  /* Nav becomes hidden overlay */
  .mobile-menu-btn { display: flex !important; }
  
  #_nav, ._nav, [class*="sidebar-nav"] {
    width: 240px !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 10000;
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
  }
  #_nav.open, ._nav.open { transform: translateX(0); }
  #_nav.open ._n span, ._nav.open .nav-label,
  #_nav.open ._hd, ._nav.open ._ft { display: block !important; }
  
  /* Mobile overlay backdrop */
  .nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
  }
  .nav-overlay.open { display: block; }
  
  body { padding-left: 0 !important; padding-top: 56px !important; }
  
  /* All grids single column */
  .grid-2, .grid-3, .creator-grid, .discover-grid,
  .product-grid, .store-grid, .badge-grid, .achievements-grid,
  .template-grid, .campaign-grid, .collection-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Stat cards: 2-col on tablet */
  .stat-cards, .stats-row, .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .stat-card { padding: 12px !important; }
  .stat-card .stat-value, .stat-number { font-size: 20px !important; }
  .stat-card .stat-label { font-size: 11px !important; }
  
  /* Settings: stack sidebar above content */
  .settings-layout, .settings-container {
    flex-direction: column !important;
    display: flex !important;
  }
  .settings-nav, .settings-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #2d2a3e) !important;
    padding: 8px !important;
    gap: 4px !important;
  }
  .settings-nav a, .settings-sidebar a,
  .settings-nav button, .settings-sidebar button {
    white-space: nowrap !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  
  /* Booking/performer tabs scroll horizontally */
  .tabs, .tab-bar, .booking-tabs, .performer-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar, .tab-bar::-webkit-scrollbar { display: none; }
  .tabs button, .tab-bar button, .tab-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  
  /* Category pills scroll */
  .category-pills, .tag-pills, .filter-pills {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    padding-bottom: 8px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .category-pills::-webkit-scrollbar { display: none; }
  .category-pill { white-space: nowrap !important; flex-shrink: 0 !important; }
  
  /* Headings */
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }
  
  /* Profile page */
  .profile-cover { height: 140px !important; }
  .profile-info { flex-direction: column !important; align-items: center !important; text-align: center !important; }
  .profile-avatar { width: 80px !important; height: 80px !important; margin-top: -40px !important; }
  .profile-stats { justify-content: center !important; gap: 24px !important; }
  
  /* Post cards full-width */
  .post-card { border-radius: 0 !important; border-left: none !important; border-right: none !important; margin: 0 -12px !important; }
  
  /* Earnings balance */
  .earnings-balance .amount, .balance-amount { font-size: 26px !important; }
  .earnings-nav, .earnings-sidebar {
    width: 100% !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #2d2a3e) !important;
  }
  
  /* Booking cards */
  .booking-card { flex-direction: column !important; }
  .booking-card .booking-actions { margin-top: 8px !important; }
  
  /* Calendar grid */
  .calendar-grid, .cal-grid { font-size: 12px !important; }
  .cal-day, .calendar-day { min-height: 40px !important; padding: 2px !important; }
  .cal-event { font-size: 9px !important; }
  
  /* Performer page tabs */
  .performer-tabs { gap: 0 !important; }
  
  /* Modal / form adjustments */
  .modal, .dialog { width: 95vw !important; max-width: 95vw !important; margin: 16px auto !important; }
  
  /* Messages layout */
  .messages-layout, .chat-layout {
    flex-direction: column !important;
  }
  .conversation-list, .chat-list {
    max-height: 200px !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #2d2a3e) !important;
  }
  
  /* Container padding */
  .container, .page-content, .main-content { padding: 0 12px !important; }
  
  /* Onboarding wizard */
  .onboarding-steps, .step-list {
    flex-direction: column !important;
  }
}

/* ── 480px: Small phones ── */
@media (max-width: 480px) {
  body { font-size: 13px !important; }
  
  /* Stat cards stack to 1 col */
  .stat-cards, .stats-row, .stats-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Even smaller text */
  .stat-card .stat-value, .stat-number { font-size: 18px !important; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 16px !important; }
  
  /* Card padding tighter */
  .card, .post-card, .booking-card { padding: 12px !important; }
  
  /* Tabs even more compact */
  .tabs button, .tab-bar button, .tab-btn { padding: 8px 10px !important; font-size: 12px !important; }
  
  /* Pricing cards stack */
  .pricing-cards, .tier-cards { grid-template-columns: 1fr !important; }
  
  /* Progress bars */
  .progress-bar { height: 6px !important; }
  
  /* Creator cards */
  .creator-card .creator-cover { height: 80px !important; }
  .creator-card .creator-avatar { width: 48px !important; height: 48px !important; }
  
  /* Fundraiser */
  .campaign-card .campaign-header { height: 80px !important; }
  
  /* Badge grid */
  .badge-card { padding: 12px !important; }
  .badge-icon { font-size: 28px !important; }
  
  /* File items compact */
  .file-item, .vault-item { font-size: 12px !important; }
  
  /* Login page */
  .login-container, .login-card { padding: 20px !important; }
  .login-hero { display: none !important; }
  
  /* Hide non-essential on tiny screens */
  .hide-mobile, .desktop-only { display: none !important; }
}

/* ── 360px: Very small phones ── */
@media (max-width: 360px) {
  body { padding-top: 48px !important; }
  .mobile-menu-btn { width: 36px; height: 36px; font-size: 18px; top: 8px; left: 8px; }
  .container, .page-content { padding: 0 8px !important; }
  .card { padding: 10px !important; }
}

/* ── UTILITY: Touch-friendly tap targets ── */
@media (pointer: coarse) {
  button, a, .tab-btn, .category-pill, .nav-link {
    min-height: 44px;
  }
  input[type="checkbox"], input[type="radio"] {
    min-height: 20px;
    min-width: 20px;
    width: 20px;
    height: 20px;
  }
  input, textarea, select {
    font-size: 16px !important; /* Prevents iOS zoom on focus */
  }
}

/* ── PRINT ── */
@media print {
  #_nav, ._nav, .mobile-menu-btn, .nav-overlay { display: none !important; }
  body { padding: 0 !important; background: #fff !important; color: #000 !important; }
  .card { border: 1px solid #ccc !important; box-shadow: none !important; }
}

/* Fix: Ensure mobile nav has solid background */
@media (max-width: 768px) {
  #_nav.open {
    background: #12121a !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important;
  }
}

/* ── ORDER FORM MOBILE ── */
@media (max-width: 768px) {
  .order-container, .order-form { padding: 12px !important; }
  .chip-group, .chips, .chip-container, [class*="chip-select"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .chip, [class*="chip-btn"], .option-chip {
    font-size: 13px !important;
    padding: 8px 12px !important;
    min-height: 36px !important;
  }
  .order-section { margin-bottom: 16px !important; }
  textarea { width: 100% !important; min-height: 80px !important; font-size: 16px !important; }
  .file-upload-area, .drop-zone { padding: 24px 12px !important; }
  .order-summary { position: static !important; width: 100% !important; }
  .price-breakdown { font-size: 14px !important; }
  
  /* Two-column form fields → single column */
  .form-row, .form-grid, .input-row {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  .form-group, .input-group { width: 100% !important; }
  
  /* Select/dropdown full width */
  select, input[type="text"], input[type="email"], input[type="number"] {
    width: 100% !important;
    font-size: 16px !important; /* prevents iOS zoom */
    padding: 12px !important;
  }
}

/* ── MESSAGES MOBILE (toggle view) ── */
@media (max-width: 768px) {
  .messages-layout, .chat-layout, .inbox-layout {
    display: block !important;
  }
  .conversation-list, .chat-list, .inbox-sidebar {
    width: 100% !important;
    max-height: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border, #2d2a3e) !important;
  }
  .messages-layout.chat-active .conversation-list,
  .chat-layout.chat-active .chat-list,
  .inbox-layout.chat-active .inbox-sidebar {
    display: none !important;
  }
  .messages-layout.chat-active .chat-panel,
  .chat-layout.chat-active .message-panel,
  .inbox-layout.chat-active .inbox-detail {
    display: block !important;
    width: 100% !important;
  }
  .back-to-list {
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    margin-bottom: 8px;
    cursor: pointer;
    color: var(--accent, var(--text));
    font-size: 14px;
  }
}
@media (min-width: 769px) {
  .back-to-list { display: none !important; }
}

/* ── FAB BAR MOBILE ── */
@media (max-width: 768px) {
  #fab-bar {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
  #fab-menu-panel {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    max-width: calc(100vw - 32px) !important;
  }
  .fab-container, .fab-trigger, [class*="fab-"] {
    bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
  }
  .fab-popup, .fab-grid {
    right: 0 !important;
    bottom: 52px !important;
    width: calc(100vw - 32px) !important;
    max-width: 280px !important;
  }
}

/* ── REQUEST INBOX MOBILE ── */
@media (max-width: 768px) {
  .inbox-filters, .filter-sidebar {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 8px !important;
  }
  .request-list { padding: 8px !important; }
  .request-card { padding: 12px !important; }
  .request-card .request-meta { flex-direction: column !important; gap: 4px !important; }
}

/* ── SIGNUP / LOGIN MOBILE ── */
@media (max-width: 768px) {
  .auth-layout, .login-layout, .signup-layout {
    flex-direction: column !important;
  }
  .auth-hero, .login-hero, .signup-hero {
    min-height: 120px !important;
    padding: 20px !important;
  }
  .auth-form, .login-form, .signup-form {
    padding: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .role-chips, .signup-roles {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
}

/* ── TUTORIAL / SETUP GUIDE MOBILE ── */
@media (max-width: 768px) {
  .tutorial-step, .guide-section { padding: 16px !important; }
  .step-number { font-size: 14px !important; width: 32px !important; height: 32px !important; }
  .guide-nav, .toc-sidebar { display: none !important; }
}

/* ── TAX CALCULATOR MOBILE ── */
@media (max-width: 768px) {
  .tax-summary { flex-direction: column !important; }
  .tax-card { width: 100% !important; }
  .tax-table { font-size: 12px !important; }
}

/* ── CONNECTIONS PAGE MOBILE ── */
@media (max-width: 768px) {
  .connection-card, .platform-card {
    padding: 12px !important;
  }
  .platform-grid, .connection-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── FILMOGRAPHY MOBILE ── */
@media (max-width: 768px) {
  .scene-card { flex-direction: column !important; }
  .scene-poster { width: 100% !important; height: 160px !important; }
}

/* ── CONTENT GALLERY MOBILE ── */
@media (max-width: 768px) {
  .gallery-grid, .photo-grid, .timeline-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }
  .gallery-item img, .photo-item img { border-radius: 4px !important; }
}
@media (max-width: 480px) {
  .gallery-grid, .photo-grid, .timeline-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── ADMIN PAGE MOBILE ── */
@media (max-width: 768px) {
  .admin-grid { grid-template-columns: 1fr !important; }
  .admin-card { padding: 12px !important; }
  .user-table { font-size: 12px !important; }
}

/* ── TEMPLATES PAGE MOBILE ── */
@media (max-width: 768px) {
  .template-preview { height: 200px !important; }
  .template-grid { grid-template-columns: 1fr !important; }
}

/* ── UNDO BAR MOBILE ── */
@media (max-width: 768px) {
  .undo-bar, [class*="undo-float"] {
    left: 12px !important;
    right: 12px !important;
    bottom: 70px !important;
    width: auto !important;
  }
}