/* ============================================
   COMPREHENSIVE MOBILE FIXES
   Fixes for coach-admin and all panel pages
   ============================================ */

/* ==============================================
   0. MOBILE-FIRST DESIGN SYSTEM
   - Icon-only buttons
   - Reduced padding (25-30% less)
   - Consistent 8px spacing grid
   - Flattened visual hierarchy
   ============================================== */

:root {
  /* Mobile spacing scale (8px base) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  
  /* Touch target minimum */
  --touch-target: 44px;
  --icon-btn-size: 40px;
}

/* ==============================================
   0.1 ICON-ONLY BUTTONS (Mobile)
   Replace text+icon buttons with icon-only
   ============================================== */

@media (max-width: 768px) {
  /* Hide button text labels on mobile - icon only */
  .btn-text,
  .module-actions .btn-text,
  .card-actions .btn-text,
  .item-actions .btn-text {
    display: none !important;
  }
  
  /* Module action buttons - icon only */
  .module-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
  }
  
  .module-actions button,
  .module-actions .btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .module-actions button i,
  .module-actions .btn i {
    font-size: 16px !important;
    margin: 0 !important;
  }
  
  /* Primary action gets accent color */
  .module-actions .btn-primary {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    border: none !important;
  }
  
  /* Secondary actions */
  .module-actions .btn-secondary {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
  }
  
  /* Delete button - subtle red */
  .module-actions button[onclick*="delete"],
  .module-actions .btn-danger,
  .module-actions .btn-delete {
    background: rgba(239,68,68,0.15) !important;
    border: 1px solid rgba(239,68,68,0.3) !important;
    color: #ef4444 !important;
  }
  
  /* Card action buttons - general */
  .card-actions,
  .item-actions,
  .submission-actions,
  .program-actions {
    display: flex !important;
    gap: 8px !important;
  }
  
  .card-actions button,
  .item-actions button,
  .program-actions button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    font-size: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .card-actions button i,
  .item-actions button i,
  .program-actions button i {
    font-size: 16px !important;
    margin: 0 !important;
  }
  
  /* Submission review buttons */
  .submission-actions {
    margin-top: 12px !important;
  }
  
  .submission-actions .btn-action {
    flex: 0 0 auto !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  
  .submission-actions .btn-action i {
    font-size: 18px !important;
    margin: 0 !important;
  }
  
  /* Approve button */
  .submission-actions .btn-action.approve,
  .submission-actions button[onclick*="approve"] {
    background: rgba(34,197,94,0.2) !important;
    border: 1px solid rgba(34,197,94,0.4) !important;
    color: #22c55e !important;
    flex: 1 !important;
    width: auto !important;
  }
  
  /* Reject button */
  .submission-actions .btn-action.reject,
  .submission-actions button[onclick*="reject"] {
    background: rgba(239,68,68,0.15) !important;
    border: 1px solid rgba(239,68,68,0.3) !important;
    color: #ef4444 !important;
  }
}

/* ==============================================
   0.2 REDUCED PADDING & SPACING (Mobile)
   25-30% reduction across all components
   ============================================== */

@media (max-width: 768px) {
  /* Card padding reduction */
  .card,
  .section-card,
  .content-section,
  .module-card,
  .program-card,
  .submission-card,
  .stat-card {
    padding: 12px !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
  }
  
  /* Inner card content */
  .card-body,
  .card-content,
  .module-content {
    padding: 0 !important;
  }
  
  /* Section headers */
  .section-title,
  .card-title,
  h2, h3 {
    margin-bottom: 12px !important;
  }
  
  /* Reduce gaps in grids */
  .dashboard-grid,
  .modules-grid,
  .programs-grid,
  .stats-grid {
    gap: 12px !important;
  }
  
  /* List items */
  .list-item,
  .elite-member,
  .waitlist-item,
  .user-item {
    padding: 10px !important;
    margin-bottom: 8px !important;
  }
  
  /* Form elements */
  .form-group {
    margin-bottom: 12px !important;
  }
  
  input, textarea, select {
    padding: 10px 12px !important;
  }
  
  /* Buttons */
  .btn {
    padding: 10px 16px !important;
    font-size: 0.85rem !important;
  }
  
  .btn-sm {
    padding: 6px 12px !important;
    font-size: 0.8rem !important;
  }
}

/* ==============================================
   0.3 PREVIEW MODE BANNER (Compact + Dismissible)
   ============================================== */

@media (max-width: 768px) {
  /* Make preview banner much smaller */
  .preview-banner,
  [style*="PREVIEW MODE"],
  .preview-mode-banner {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    line-height: 1.3 !important;
    position: sticky !important;
    top: 60px !important;
    z-index: 100 !important;
    margin: 0 -12px 12px -12px !important;
    border-radius: 0 !important;
  }
  
  .preview-banner h3,
  .preview-banner strong {
    font-size: 0.8rem !important;
    margin: 0 !important;
  }
  
  .preview-banner p,
  .preview-banner span {
    font-size: 0.7rem !important;
    margin: 0 !important;
    opacity: 0.9;
  }
}

/* ==============================================
   0.4 FLATTENED CARD HIERARCHY
   Remove nested card look
   ============================================== */

@media (max-width: 768px) {
  /* Remove excessive borders and shadows */
  .card .card,
  .section-card .card,
  .nested-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Subtle dividers instead of nested cards */
  .card-section,
  .content-block {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    padding-top: 12px !important;
    margin-top: 12px !important;
  }
  
  /* Remove glows on mobile */
  .glow,
  [class*="glow"] {
    box-shadow: none !important;
  }
}

/* ==============================================
   0.5 CONSISTENT VERTICAL RHYTHM
   8px base grid
   ============================================== */

@media (max-width: 768px) {
  /* Consistent section spacing */
  section,
  .section,
  .content-section {
    margin-bottom: 16px !important;
  }
  
  /* Paragraph spacing */
  p {
    margin-bottom: 8px !important;
    line-height: 1.5 !important;
  }
  
  /* List spacing */
  ul, ol {
    margin-bottom: 12px !important;
    padding-left: 20px !important;
  }
  
  li {
    margin-bottom: 4px !important;
  }
}

/* ==============================================
   1. HEADER / TOP BAR FIXES
   - Properly push content below fixed header
   - Smaller icons on mobile
   - Better spacing
   ============================================== */

@media (max-width: 768px) {
  /* Ensure body has proper padding for fixed header */
  body {
    padding-top: 80px !important;
  }
  
  /* Top bar adjustments */
  .top-bar {
    height: 60px !important;
    padding: 0 1rem !important;
    gap: 0.75rem !important;
  }
  
  .top-bar-logo {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
  
  .top-bar-title h1 {
    font-size: 0.95rem !important;
  }
  
  .top-bar-title span {
    font-size: 0.6rem !important;
    display: none; /* Hide subtitle on mobile */
  }
  
  /* Smaller icon buttons in header */
  .top-bar-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 0.9rem !important;
  }
  
  .top-bar-btn i {
    font-size: 1rem !important;
  }
  
  /* Hide center nav on mobile */
  .top-bar-center {
    display: none !important;
  }
  
  .top-bar-right {
    gap: 0.5rem !important;
  }
  
  /* User menu trigger - make it smaller */
  .user-menu-trigger {
    padding: 0.3rem 0.5rem 0.3rem 0.3rem !important;
  }
  
  .user-menu-trigger .user-avatar {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.75rem !important;
  }
  
  .user-menu-trigger .user-info {
    display: none !important; /* Hide name on mobile */
  }
  
  .user-menu-trigger i.fa-chevron-down {
    display: none !important;
  }
  
  /* Mobile header adjustments */
  .mobile-header {
    height: 60px !important;
  }
  
  .mobile-header-inner {
    padding: 0 0.75rem !important;
  }
  
  .mobile-logo-img,
  .mobile-logo {
    width: 38px !important;
    height: 38px !important;
  }
  
  .mobile-logo-title {
    font-size: 0.8rem !important;
  }
  
  .mobile-logo-subtitle {
    font-size: 0.55rem !important;
  }
  
  /* Smaller mobile header icon buttons */
  .mobile-icon-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
  }
  
  .mobile-burger {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
  }
  
  .mobile-burger span {
    width: 18px !important;
  }
  
  /* Adjust drawer position for smaller header */
  .mobile-drawer {
    top: 60px !important;
    height: calc(100vh - 60px) !important;
    width: 260px !important;
  }
}

/* ==============================================
   2. CONTAINER & LAYOUT FIXES
   - Full width on mobile
   - Proper edge-to-edge usage
   ============================================== */

@media (max-width: 768px) {
  .admin-container {
    padding: 0 1rem !important;
    margin: 0.75rem auto !important;
    max-width: 100% !important;
  }
  
  .tab-content {
    padding: 0 0.75rem !important;
  }
  
  /* Make section cards full width */
  .section-card {
    padding: 1.25rem !important;
    border-radius: 14px !important;
    margin-bottom: 1rem !important;
    margin-left: -0.25rem !important;
    margin-right: -0.25rem !important;
  }
}

/* ==============================================
   3. ADMIN HEADER CARD FIXES
   - Stack buttons on mobile
   - Better spacing
   ============================================== */

@media (max-width: 768px) {
  .admin-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 1rem !important;
    padding: 1rem !important;
    border-radius: 14px !important;
    margin-bottom: 1rem !important;
  }
  
  .admin-header h1 {
    font-size: 1.25rem !important;
  }
  
  .admin-header p {
    font-size: 0.8rem !important;
    margin-top: 0.2rem !important;
  }
  
  .admin-header-right {
    display: flex !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
  
  .header-action-btn {
    flex: 1 !important;
    padding: 0.6rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 10px !important;
    justify-content: center !important;
  }
  
  .header-action-btn i {
    font-size: 0.85rem !important;
  }
}

/* ==============================================
   4. STATS GRID FIXES
   - 2x2 grid on mobile
   - Proper card sizes
   ============================================== */

@media (max-width: 768px) {
  .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .stat-card {
    padding: 1rem !important;
    border-radius: 12px !important;
  }
  
  .stat-icon {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 10px !important;
  }
  
  .stat-value {
    font-size: 1.5rem !important;
    margin-bottom: 0.15rem !important;
  }
  
  .stat-label {
    font-size: 0.7rem !important;
    line-height: 1.3 !important;
  }
}

@media (max-width: 400px) {
  .stat-value {
    font-size: 1.25rem !important;
  }
  
  .stat-label {
    font-size: 0.65rem !important;
  }
  
  .stat-icon {
    width: 36px !important;
    height: 36px !important;
    font-size: 1rem !important;
  }
}

/* ==============================================
   5. TABS CONTAINER FIXES
   - Horizontal scrolling tabs
   - Smaller touch targets
   ============================================== */

@media (max-width: 768px) {
  .tabs-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.4rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: none !important;
  }
  
  .tabs-container::-webkit-scrollbar {
    display: none !important;
  }
  
  .tab-btn {
    flex-shrink: 0 !important;
    padding: 0.6rem 0.9rem !important;
    font-size: 0.75rem !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    flex-direction: row !important;
    gap: 0.4rem !important;
  }
  
  .tab-btn i {
    font-size: 0.9rem !important;
  }
  
  /* Hide text for some tabs on very small screens */
  @media (max-width: 480px) {
    .tab-btn span {
      display: none !important;
    }
    
    .tab-btn {
      padding: 0.7rem !important;
      min-width: 42px !important;
    }
    
    .tab-btn i {
      font-size: 1rem !important;
    }
  }
}

/* ==============================================
   6. MODULE CARDS FIXES
   - Full width single column
   - Better spacing and readability
   ============================================== */

@media (max-width: 768px) {
  .modules-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .module-admin-card {
    padding: 1rem !important;
    border-radius: 12px !important;
  }
  
  .module-thumbnail {
    height: 160px !important;
    border-radius: 10px !important;
    margin-bottom: 0.75rem !important;
  }
  
  .module-info {
    margin-bottom: 0.75rem !important;
  }
  
  .module-title-edit {
    font-size: 1rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.4 !important;
  }
  
  .module-meta {
    font-size: 0.8rem !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.5rem !important;
  }
  
  .module-description {
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
    color: #a1a1aa !important;
    /* Limit to 3 lines */
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}

/* ==============================================
   7. ACTION BUTTONS FIXES
   - Horizontal layout
   - Smaller, consistent sizing
   - Better touch targets
   ============================================== */

@media (max-width: 768px) {
  .module-actions,
  .program-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
  }
  
  .module-actions button,
  .module-actions .btn-icon,
  .program-actions button,
  .program-actions .btn-icon {
    flex: 1 !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 0.5rem !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
  }
  
  .module-actions button i,
  .program-actions button i {
    font-size: 0.85rem !important;
  }
  
  /* Hide button text on very small screens */
  @media (max-width: 400px) {
    .module-actions button span,
    .program-actions button span {
      display: none !important;
    }
    
    .module-actions button,
    .program-actions button {
      padding: 0 !important;
      width: 40px !important;
      flex: 0 0 40px !important;
    }
  }
}

/* ==============================================
   8. TEXT & TYPOGRAPHY FIXES
   - Better line heights
   - Consistent hierarchy
   ============================================== */

@media (max-width: 768px) {
  /* Improve line height for readability */
  p, .module-description, .program-description {
    line-height: 1.6 !important;
  }
  
  /* Section headers */
  .section-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .section-title {
    font-size: 1.15rem !important;
    gap: 0.4rem !important;
  }
  
  .section-title i {
    font-size: 1rem !important;
  }
  
  /* Consistent heading hierarchy */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  h3 { font-size: 1.1rem !important; }
  h4 { font-size: 1rem !important; }
}

/* ==============================================
   9. FORM ELEMENTS FIXES
   - Better mobile inputs
   - Prevent iOS zoom
   ============================================== */

@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 0.75rem !important;
    border-radius: 10px !important;
  }
  
  .form-group {
    margin-bottom: 0.875rem !important;
  }
  
  label {
    font-size: 0.85rem !important;
    margin-bottom: 0.4rem !important;
  }
}

/* ==============================================
   10. MODAL FIXES
   - Full width on mobile
   - Better scrolling
   ============================================== */

@media (max-width: 768px) {
  .modal-content,
  .modal-box {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 85vh !important;
    margin: 1rem !important;
    padding: 1.25rem !important;
    border-radius: 16px !important;
  }
  
  .modal-header {
    padding-bottom: 0.75rem !important;
    margin-bottom: 1rem !important;
  }
  
  .modal-header h2,
  .modal-header h3 {
    font-size: 1.15rem !important;
  }
  
  .modal-body {
    padding: 0 !important;
  }
  
  .modal-footer {
    padding-top: 1rem !important;
    margin-top: 1rem !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .modal-footer button {
    width: 100% !important;
  }
}

/* ==============================================
   11. PROGRAMS & BADGES GRID FIXES
   ============================================== */

@media (max-width: 768px) {
  .program-card {
    padding: 1rem !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
  }
  
  .program-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
  
  .program-title {
    font-size: 1.05rem !important;
  }
  
  .program-description {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
  
  .module-list {
    gap: 0.4rem !important;
  }
  
  .module-tag {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.5rem !important;
  }
  
  /* Badges grid */
  #badgesGrid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  /* Role settings grid */
  #roleSettingsGrid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .role-settings-card {
    padding: 1rem !important;
    border-radius: 12px !important;
  }
}

/* ==============================================
   12. VISUAL POLISH FIXES
   - Consistent border radius
   - Softer shadows
   - Better contrast
   ============================================== */

@media (max-width: 768px) {
  /* Consistent border radius */
  .card,
  .stat-card,
  .module-admin-card,
  .program-card,
  .section-card,
  .admin-header,
  .badge-item {
    border-radius: 12px !important;
  }
  
  /* Softer shadows on mobile */
  .stat-card:hover,
  .module-admin-card:hover,
  .program-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25) !important;
  }
  
  /* Better text contrast */
  .module-description,
  .program-description,
  .stat-label {
    color: #9ca3af !important;
  }
  
  /* Reduce heavy shadows */
  .section-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
  }
}

/* ==============================================
   13. CREATE BUTTONS FIXES
   ============================================== */

@media (max-width: 768px) {
  .btn-create-module,
  .btn-create-program {
    min-width: 100% !important;
    padding: 1rem 1.25rem !important;
    gap: 1rem !important;
  }
  
  .btn-icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
  }
  
  .btn-icon-wrapper i {
    font-size: 1.25rem !important;
  }
  
  .btn-title {
    font-size: 1rem !important;
  }
  
  .btn-subtitle {
    font-size: 0.8rem !important;
  }
}

/* ==============================================
   14. BADGE CREATOR FORM FIXES
   ============================================== */

@media (max-width: 768px) {
  #mainBadgeCreatorForm {
    gap: 1rem !important;
  }
  
  #mainBadgeCreatorForm > div {
    grid-template-columns: 1fr !important;
  }
  
  #mainBadgeCreatorForm [style*="grid-template-columns: 2fr 1fr"],
  #mainBadgeCreatorForm [style*="grid-template-columns: 1fr auto"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  #mainBadgePreviewBox {
    padding: 1rem !important;
  }
  
  #mainBadgePreviewCircle {
    width: 80px !important;
    height: 80px !important;
  }
  
  #mainBadgePreviewIcon {
    font-size: 2.5rem !important;
  }
}

/* ==============================================
   15. VIDEO REVIEW FILTERS
   ============================================== */

@media (max-width: 768px) {
  .video-review-filters {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .video-filter-btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    white-space: nowrap !important;
  }
  
  .video-filter-btn i {
    font-size: 0.85rem !important;
  }
}

/* ==============================================
   16. SUBMISSION CARDS
   ============================================== */

@media (max-width: 768px) {
  .submission-card {
    padding: 1rem !important;
    border-radius: 12px !important;
  }
  
  .submissions-list {
    gap: 0.75rem !important;
  }
}

/* ==============================================
   17. PREVENT HORIZONTAL SCROLL
   ============================================== */

html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

* {
  max-width: 100%;
}

/* ==============================================
   18. IMPROVED TOUCH TARGETS
   ============================================== */

@media (max-width: 768px) {
  button,
  a,
  .btn,
  .btn-icon,
  input[type="checkbox"],
  input[type="radio"],
  select {
    min-height: 40px !important;
  }
  
  /* Ensure proper spacing for touch */
  .mobile-drawer-link {
    min-height: 48px !important;
    padding: 0.875rem 1rem !important;
  }
}

/* ==============================================
   19. DROPDOWN MENU FIXES
   ============================================== */

@media (max-width: 768px) {
  .user-dropdown {
    width: 240px !important;
    right: -1rem !important;
  }
  
  .dropdown-link {
    padding: 0.65rem 0.875rem !important;
    font-size: 0.85rem !important;
  }
  
  .dropdown-header {
    padding: 0.875rem !important;
  }
  
  .dropdown-header .user-avatar {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ==============================================
   20. LANDSCAPE MODE OPTIMIZATIONS
   ============================================== */

@media (max-width: 768px) and (orientation: landscape) {
  body {
    padding-top: 55px !important;
  }
  
  .top-bar,
  .mobile-header {
    height: 50px !important;
  }
  
  .mobile-drawer {
    top: 50px !important;
    height: calc(100vh - 50px) !important;
  }
  
  .stats-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  
  .stat-card {
    padding: 0.75rem !important;
  }
  
  .stat-value {
    font-size: 1.25rem !important;
  }
}

/* ==============================================
   21. SAFE AREA INSETS (iPhone X+)
   ============================================== */

@supports (padding: max(0px)) {
  @media (max-width: 768px) {
    body {
      padding-left: max(1rem, env(safe-area-inset-left)) !important;
      padding-right: max(1rem, env(safe-area-inset-right)) !important;
      padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    }
    
    .mobile-drawer {
      padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ==============================================
   22. COACH DASHBOARD SPECIFIC FIXES
   - Text overflow handling
   - Submission cards
   - Feedback sections
   - Elite members list
   ============================================== */

/* Force text wrapping everywhere */
.submission-card,
.student-notes,
.feedback-box,
.elite-member,
.waitlist-item,
.section-card,
.card {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto !important;
}

/* Student notes text overflow fix */
.student-notes {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.student-notes strong {
  display: block !important;
  margin-bottom: 0.25rem !important;
}

/* Feedback section overflow fix */
[style*="Your Feedback"],
.feedback-section,
.submission-card p,
.submission-card div {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* Force all text in submission cards to wrap */
.submission-card * {
  max-width: 100% !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
}

@media (max-width: 768px) {
  /* Submission card mobile styling */
  .submission-card {
    padding: 1rem !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden !important;
  }
  
  .submission-header {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .submission-info {
    width: 100% !important;
  }
  
  .submission-meta {
    text-align: left !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  
  .student-name {
    font-size: 1rem !important;
  }
  
  .module-name {
    font-size: 0.8rem !important;
  }
  
  .submission-status {
    margin-top: 0 !important;
  }
  
  /* Student notes mobile */
  .student-notes {
    font-size: 0.85rem !important;
    padding: 0.75rem !important;
    padding-left: 0.75rem !important;
    border-left-width: 3px !important;
    margin-top: 0.75rem !important;
    background: rgba(100,116,139,0.1) !important;
    border-radius: 0 8px 8px 0 !important;
  }
  
  /* Feedback box mobile */
  .submission-card [style*="background: rgba(59,130,246"] {
    padding: 0.75rem !important;
    margin-top: 0.75rem !important;
    border-radius: 10px !important;
  }
  
  .submission-card [style*="background: rgba(59,130,246"] h4 {
    font-size: 0.8rem !important;
    margin-bottom: 0.35rem !important;
  }
  
  .submission-card [style*="background: rgba(59,130,246"] p {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
  }
  
  /* Video link mobile */
  .video-link {
    display: flex !important;
    padding: 0.6rem 0.75rem !important;
    background: rgba(59,130,246,0.1) !important;
    border-radius: 8px !important;
    font-size: 0.85rem !important;
  }
  
  /* Submission actions buttons */
  .submission-actions {
    flex-direction: row !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
  }
  
  .submission-actions button,
  .submission-actions .btn-action {
    flex: 1 !important;
    padding: 0.6rem 0.5rem !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
  }
  
  /* Elite Members Section */
  .elite-section,
  [style*="Elite Members"] {
    padding: 1rem !important;
  }
  
  .elite-member,
  .waitlist-item {
    padding: 0.75rem !important;
    border-radius: 10px !important;
    margin-bottom: 0.5rem !important;
  }
  
  .elite-member > div,
  .waitlist-item > div {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Dashboard container on coach dashboard */
  .dashboard-container {
    padding: 0 0.75rem !important;
  }
  
  /* Dashboard grid */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  /* Quick actions */
  .quick-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }
  
  .quick-action-btn {
    padding: 0.75rem !important;
    font-size: 0.75rem !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
  }
  
  .quick-action-btn i {
    font-size: 1.1rem !important;
  }
  
  /* Section titles */
  .section-card h3,
  .section-card h2 {
    font-size: 1.1rem !important;
  }
}

/* ==============================================
   23. GLOBAL TEXT OVERFLOW PROTECTION
   ============================================== */

/* Prevent any text from breaking the layout */
p, span, div, h1, h2, h3, h4, h5, h6, a, li, td, th, label {
  max-width: 100%;
}

/* Force word break on very long strings (like test data) */
@media (max-width: 768px) {
  p, span, div {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Truncate very long usernames/emails */
  .user-name,
  .user-email,
  .student-name,
  .member-name,
  .member-email {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
  }
}

/* ==============================================
   24. MESSAGES PAGE MOBILE FIXES
   ============================================== */

@media (max-width: 768px) {
  .message-card,
  .conversation-item {
    padding: 0.75rem !important;
    border-radius: 12px !important;
  }
  
  .message-content {
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }
  
  .message-input-container {
    padding: 0.75rem !important;
  }
  
  .message-input {
    font-size: 16px !important; /* Prevent iOS zoom */
  }
}

/* ==============================================
   25. MODULE VIEWER MOBILE OPTIMIZATIONS
   - Compact phase navigation
   - Reduced content padding
   - Smaller Next Phase button
   ============================================== */

@media (max-width: 768px) {
  /* Phase navigation tabs - more compact */
  .phase-nav,
  .phase-tabs {
    padding: 8px !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  
  .phase-tab,
  .phase-nav-item {
    padding: 8px 12px !important;
    font-size: 0.75rem !important;
    border-radius: 8px !important;
    min-height: 44px !important;
  }
  
  .phase-tab .phase-number,
  .phase-nav-item .phase-number {
    width: 22px !important;
    height: 22px !important;
    font-size: 0.7rem !important;
  }
  
  /* Content sections */
  .content-section,
  #videoSection,
  #quizSection,
  #submissionSection {
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 12px !important;
  }
  
  /* Section titles */
  .section-title,
  .content-section h2 {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
  }
  
  /* Video container */
  #videoContainer,
  .video-container {
    border-radius: 10px !important;
    margin-bottom: 12px !important;
    background: #000 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-height: 200px !important;
  }
  
  /* Video container with video loaded - aspect ratio box */
  #videoContainer.has-video,
  .video-container.has-video {
    padding-bottom: 56.25% !important;
    height: 0 !important;
    position: relative !important;
    overflow: visible !important;
    display: block !important;
    width: 100% !important;
    min-height: 200px !important; /* Fallback if padding doesn't work */
  }
  
  /* Video iframe/video element inside container */
  #videoContainer.has-video iframe,
  #videoContainer.has-video video,
  .video-container.has-video iframe,
  .video-container.has-video video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 200px !important;
    border: none !important;
    display: block !important;
  }
  
  /* Also handle video container WITHOUT has-video class (before video loads) */
  #videoContainer:not(.has-video),
  .video-container:not(.has-video) {
    min-height: 200px !important;
    display: block !important;
  }
  
  /* Ensure video section is visible */
  #videoSection {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* When videoSection has display:block inline style, make sure it shows */
  #videoSection[style*="display: block"],
  #videoSection[style*="display:block"] {
    display: block !important;
  }
  
  /* Next Phase / Continue buttons */
  #nextPhaseBtn,
  #continueBtn,
  .btn-continue {
    padding: 12px 20px !important;
    font-size: 0.9rem !important;
    border-radius: 10px !important;
    width: 100% !important;
  }
  
  /* Phase navigation button row */
  .phase-nav-buttons {
    margin-top: 12px !important;
    gap: 8px !important;
  }
  
  /* Module header */
  .module-header,
  .module-info {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  
  .module-header h1 {
    font-size: 1.25rem !important;
    margin-bottom: 8px !important;
  }
  
  .module-header p,
  .module-description {
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    margin-bottom: 10px !important;
  }
  
  /* Progress bar */
  .progress-bar-container,
  .module-progress {
    margin-bottom: 12px !important;
  }
  
  /* Content blocks - reduce excessive padding */
  .info-card,
  .content-block,
  .lesson-content {
    padding: 12px !important;
    margin-bottom: 10px !important;
  }
  
  /* Infographics and images */
  .content-section img,
  .lesson-content img {
    border-radius: 8px !important;
    margin: 8px 0 !important;
  }
  
  /* Quiz styling - already handled in module-viewer but ensure consistency */
  .quiz-question {
    padding: 12px !important;
    margin-bottom: 0 !important;
  }
  
  .question-text {
    font-size: 0.95rem !important;
    margin-bottom: 10px !important;
  }
  
  .answer-option {
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
  }
  
  /* Quiz nav buttons */
  #quizNavButtons {
    gap: 8px !important;
    padding-top: 10px !important;
  }
  
  #quizNavButtons .btn {
    min-width: 100px !important;
    padding: 10px 16px !important;
  }
}

/* ==============================================
   26. COACH ADMIN MODULE CARDS
   ============================================== */

@media (max-width: 768px) {
  /* Module cards in coach-admin */
  .module-card {
    border-radius: 12px !important;
    overflow: hidden !important;
  }
  
  .module-card .module-thumbnail {
    height: 140px !important;
    object-fit: cover !important;
  }
  
  .module-card .module-content {
    padding: 12px !important;
  }
  
  .module-card .module-title {
    font-size: 1rem !important;
    margin-bottom: 6px !important;
  }
  
  .module-card .module-description {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  
  .module-card .module-meta {
    font-size: 0.7rem !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 10px !important;
  }
  
  .module-card .module-meta span {
    padding: 3px 8px !important;
    border-radius: 6px !important;
    background: rgba(255,255,255,0.05) !important;
  }
  
  .module-card .badge {
    padding: 3px 8px !important;
    font-size: 0.65rem !important;
  }
}

/* ==============================================
   27. DASHBOARD STAT CARDS - COMPACT
   ============================================== */

@media (max-width: 768px) {
  .stats-grid,
  .stat-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  
  .stat-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  
  .stat-value {
    font-size: 1.5rem !important;
    margin-bottom: 2px !important;
  }
  
  .stat-label {
    font-size: 0.7rem !important;
  }
  
  .stat-icon {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
  }
}

/* ==============================================
   28. MODULE VIEWER - COMPREHENSIVE MOBILE FIX
   Phase buttons, content text, infographics
   ============================================== */

@media (max-width: 768px) {
  /* Phase navigation container */
  .phase-nav,
  #phaseNavigation {
    padding: 0.5rem !important;
    gap: 0.4rem !important;
    border-radius: 10px !important;
    margin-bottom: 1rem !important;
  }
  
  /* Phase buttons - compact grid layout */
  .phase-btn,
  #phaseNavigation button {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.6rem !important;
    border-radius: 8px !important;
    gap: 0.25rem !important;
    flex: 1 1 calc(50% - 0.25rem) !important;
    max-width: calc(50% - 0.25rem) !important;
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  
  /* Phase number circle */
  .phase-btn .phase-number,
  #phaseNavigation button .phase-number {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.6rem !important;
    margin-bottom: 0.15rem !important;
  }
  
  /* Phase title text */
  .phase-btn .phase-title,
  #phaseNavigation button .phase-title {
    font-size: 0.55rem !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }
  
  /* Text phase content - reduce everything */
  /* ONLY apply to text phase content (div children), NOT video iframes */
  #videoContainer > div:not(iframe):not(video) {
    border-radius: 16px !important;
  }
  
  /* CRITICAL: Ensure video iframes are NOT hidden by text phase styles */
  #videoContainer > iframe,
  #videoContainer > video {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Header section padding - only for text phases with nested divs */
  #videoContainer > div > div:first-child {
    padding: 1.25rem 1rem 1rem 1rem !important;
  }
  
  /* Emoji size */
  #videoContainer > div > div:first-child > div:first-child {
    font-size: 2.5rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Title text */
  #videoContainer h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Subtitle */
  #videoContainer h3 {
    font-size: 0.9rem !important;
  }
  
  /* Content section padding */
  #videoContainer > div > div:nth-child(3) {
    padding: 1rem !important;
  }
  
  /* HTML Code container - infographic content */
  #videoContainer > div > div:nth-child(3) > div:first-child {
    margin: 0 -1rem 1rem -1rem !important;
    padding: 0 0.5rem !important;
  }
  
  /* Content paragraph text */
  #videoContainer p {
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Buttons in text phase */
  #videoContainer button,
  #textPhaseButton {
    padding: 0.875rem 1.5rem !important;
    font-size: 0.9rem !important;
    width: 100% !important;
  }
  
  /* Decorative divider - smaller margin */
  #videoContainer > div > div:nth-child(3) > div[style*="height: 2px"] {
    margin: 1.5rem 0 1rem 0 !important;
  }
}

/* ==============================================
   29. INFOGRAPHIC HTML CONTENT - MOBILE FIX
   Direct targeting of .boxing-stance-infographic
   ============================================== */

@media (max-width: 768px) {
  /* Target the infographic container directly */
  .boxing-stance-infographic {
    border-radius: 16px !important;
    max-width: 100% !important;
  }
  
  /* Header - reduce padding */
  .boxing-stance-infographic > div:first-child {
    padding: 0.75rem 0.5rem !important;
  }
  
  /* Header title */
  .boxing-stance-infographic h2 {
    font-size: 1.1rem !important;
    margin-bottom: 0.1rem !important;
  }
  
  /* Header subtitle */
  .boxing-stance-infographic > div:first-child > p {
    font-size: 0.6rem !important;
    letter-spacing: 0.1em !important;
  }
  
  /* Grid container - 2 columns on mobile */
  .boxing-stance-infographic > div:nth-child(2) {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0.5rem !important;
  }
  
  /* Individual stance cards */
  .boxing-stance-infographic > div:nth-child(2) > div {
    padding: 0.5rem !important;
    border-radius: 10px !important;
  }
  
  /* Stance card titles (TOO WIDE, etc) */
  .boxing-stance-infographic > div:nth-child(2) > div > div:first-child {
    font-size: 0.6rem !important;
    margin-bottom: 0.4rem !important;
  }
  
  /* Foot diagram containers - MUCH shorter */
  .boxing-stance-infographic > div:nth-child(2) > div > div:nth-child(2) {
    height: 60px !important;
    margin-bottom: 0.4rem !important;
  }
  
  /* SVG foot icons - smaller */
  .boxing-stance-infographic svg {
    width: 20px !important;
    height: 20px !important;
  }
  
  /* Bullet lists */
  .boxing-stance-infographic ul {
    font-size: 0.55rem !important;
    line-height: 1.3 !important;
  }
  
  .boxing-stance-infographic li {
    margin-bottom: 0.1rem !important;
  }
  
  /* Key Takeaway section */
  .boxing-stance-infographic > div:nth-child(3) {
    margin: 0 0.5rem 0.5rem 0.5rem !important;
    padding: 0.5rem !important;
    border-radius: 8px !important;
  }
  
  /* Key Takeaway badge */
  .boxing-stance-infographic > div:nth-child(3) > div:first-child {
    font-size: 0.55rem !important;
    padding: 0.25rem 0.5rem !important;
    margin-bottom: 0.4rem !important;
  }
  
  /* Key Takeaway checkmark items */
  .boxing-stance-infographic > div:nth-child(3) > div:nth-child(2) {
    gap: 0.3rem 0.5rem !important;
  }
  
  .boxing-stance-infographic > div:nth-child(3) > div:nth-child(2) > div {
    font-size: 0.55rem !important;
    gap: 0.3rem !important;
  }
  
  /* Checkmark boxes */
  .boxing-stance-infographic > div:nth-child(3) span {
    width: 14px !important;
    height: 14px !important;
    font-size: 0.5rem !important;
  }
  
  /* Footer */
  .boxing-stance-infographic > div:last-child {
    padding: 0.5rem !important;
  }
  
  /* Footer title */
  .boxing-stance-infographic > div:last-child > div:first-child {
    font-size: 0.85rem !important;
  }
  
  /* Footer quote */
  .boxing-stance-infographic > div:last-child > p {
    font-size: 0.6rem !important;
    margin-top: 0.15rem !important;
  }
  
  /* ALSO apply scale transform as fallback */
  .infographic-content {
    transform: scale(0.75) !important;
    transform-origin: top center !important;
    margin-bottom: -20% !important;
  }
}

@media (max-width: 480px) {
  /* Even smaller on tiny screens */
  .boxing-stance-infographic > div:nth-child(2) > div > div:nth-child(2) {
    height: 50px !important;
  }
  
  .boxing-stance-infographic svg {
    width: 16px !important;
    height: 16px !important;
  }
  
  .boxing-stance-infographic ul {
    font-size: 0.5rem !important;
  }
  
  /* Even smaller phase buttons on tiny screens */
  .phase-btn,
  #phaseNavigation button {
    padding: 0.35rem 0.4rem !important;
    font-size: 0.55rem !important;
  }
  
  .phase-btn .phase-number,
  #phaseNavigation button .phase-number {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.55rem !important;
  }
  
  .phase-btn .phase-title,
  #phaseNavigation button .phase-title {
    font-size: 0.5rem !important;
  }
}

/* ==============================================
   30. COACH MODULES PAGE - MOBILE FIX
   ============================================== */

@media (max-width: 768px) {
  /* Coach modules page container */
  .coach-modules-page .container,
  body[data-page="coach-modules"] .container {
    padding: 0 0.75rem !important;
    margin-top: 1rem !important;
  }
  
  /* Page header */
  .page-header {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
    margin-bottom: 1rem !important;
  }
  
  .page-header h1 {
    font-size: 1.25rem !important;
    text-align: center !important;
  }
  
  .page-header .btn {
    width: 100% !important;
    justify-content: center !important;
  }
  
  /* Module cards in coach view */
  .module-card,
  .modules-list .card {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 12px !important;
    background: rgba(15, 23, 42, 0.8) !important;
  }
  
  /* Module card image */
  .module-card img,
  .module-thumbnail {
    border-radius: 8px !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Module card title */
  .module-card h3,
  .module-card .card-title {
    font-size: 1rem !important;
    margin-bottom: 0.4rem !important;
  }
  
  /* Module card meta info */
  .module-card .meta,
  .module-card .card-meta {
    font-size: 0.75rem !important;
    gap: 0.5rem !important;
  }
  
  /* Module card description */
  .module-card p,
  .module-card .description {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
  }
  
  /* Module action buttons */
  .module-card .actions,
  .module-actions {
    display: flex !important;
    gap: 0.5rem !important;
    margin-top: 0.75rem !important;
  }
  
  .module-card .actions .btn,
  .module-actions .btn {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    flex: 1 !important;
  }
}