/* ================================================================
   PHASE 9: MOBILE RESPONSIVE CONSOLIDATION
   Sophia College STARS - Reengagement Room System
   Consolidated and optimized media queries - January 2026
   ================================================================ */

/* ================== TABLET & MEDIUM SCREENS (1024px) ================== */
@media (max-width: 1024px) {
  .manage-controls, 
  .master-controls {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .referral-item {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
    text-align: left;
  }
  
  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

/* ================== MOBILE LANDSCAPE (768px) ================== */
@media (max-width: 768px) {
  /* Container & Layout */
  .container {
    margin: var(--spacing-md);
    border-radius: var(--border-radius);
  }
  
  .header-section {
    padding: var(--spacing-lg);
  }
  
  .logo-container {
    flex-direction: column;
    gap: var(--spacing-md);
  }
  
  /* Tab Content */
  .tab-content {
    padding: var(--spacing-lg);
  }
  
  /* Form Layouts */
  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }
  
  .form-section {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .form-section-header {
    font-size: 1rem;
    margin-bottom: var(--spacing-md);
  }

  .form-section-header .emoji {
    font-size: 1.25rem;
  }
  
  /* Dropdowns - Mobile Optimized */
  .student-dropdown,
  .teacher-dropdown {
    max-height: 200px !important;
    font-size: 0.9rem;
  }

  .student-option,
  .teacher-option {
    padding: var(--spacing-md) !important;
  }
  
  /* Type Options */
  .type-options {
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
  }

  .type-option {
    padding: var(--spacing-md);
  }

  .type-option h4 {
    font-size: 1rem;
  }

  .type-option p {
    font-size: 0.875rem;
  }
  
  /* Student Profile Mobile */
  .student-info {
    flex-direction: column;
    text-align: center;
  }

  .student-profile-compact {
    padding: var(--spacing-md);
    margin: var(--spacing-md) 0;
  }

  .profile-name {
    font-size: 1rem !important;
  }

  .profile-info {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  /* Stats & Analytics */
  .stats-overview {
    grid-template-columns: 1fr;
  }
  
  /* Navigation - Hide Staff Name */
  #staffName {
    display: none;
  }

  /* Enhanced Mobile Navigation */
  .tab-navigation {
    flex-wrap: wrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tab-navigation::-webkit-scrollbar {
    display: none;
  }

  .tab-btn {
    min-width: 120px;
    font-size: 0.8rem;
    padding: var(--spacing-sm) var(--spacing-md);
    flex-shrink: 0;
  }

  /* Enhanced Mobile Forms */
  .form-section {
    padding: var(--spacing-lg);
  }

  /* Buttons */
  .btn-primary,
  .btn-secondary {
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 44px;
  }
}

/* ================== MOBILE PORTRAIT (480px) ================== */
@media (max-width: 480px) {
  /* Container & Layout */
  .container {
    margin: var(--spacing-sm);
    border-radius: var(--border-radius);
  }

  .header-section {
    padding: var(--spacing-md);
  }

  .header-title {
    font-size: 1.5rem;
  }

  /* Logos */
  .logo-center,
  .triple-r-logo {
    height: 45px;
    width: 45px;
  }

  /* Content Areas */
  .tab-content {
    padding: var(--spacing-md);
  }

  .form-section {
    padding: var(--spacing-md);
  }

  /* Ultra-Mobile Tab Navigation */
  .tab-btn {
    min-width: 100px;
    font-size: 0.75rem;
    padding: var(--spacing-sm);
  }

  /* Form Elements */
  .form-grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }

  .form-group label {
    font-size: 0.9rem;
    margin-bottom: var(--spacing-xs);
  }

  /* Buttons - Full Width on Mobile */
  .btn {
    width: 100%;
    margin-bottom: var(--spacing-sm);
  }

  /* Tab Navigation */
  .tab-navigation {
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }
  
  .tab-btn {
    font-size: 0.75rem;
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  
  /* Stats Overview */
  .stats-overview {
    grid-template-columns: 1fr 1fr;
  }
  
  /* Analytics Grid */
  .analytics-grid {
    grid-template-columns: 1fr;
  }
}

/* ================== PERFORMANCE OPTIMIZATIONS ================== */
/* Containment for better rendering performance */
.reengagement-container {
  contain: layout;
}

.student-dropdown {
  contain: layout style;
}

.timeline-container {
  contain: layout;
}

.form-grid {
  contain: layout;
}

.chart-container {
  contain: layout;
}