/* Professional Mobile Schedule Interface */

/* Hide mobile calendar on desktop */
@media (min-width: 769px) {
  .mobile-calendar-header,
  .mobile-view-toggle,
  .mobile-week-grid,
  .mobile-daily-schedule {
    display: none !important;
  }
}

@media (max-width: 768px) {
  /* Hide desktop grid completely */
  .schedule-container > div[style*="grid-template-columns:120px repeat(7,1fr)"] {
    display: none !important;
  }
  
  /* Create modern mobile calendar layout */
  .schedule-container {
    padding: 0 !important;
    background: #f8f9fa !important;
    border-radius: 0 !important;
  }
  
  /* Mobile calendar header */
  .mobile-calendar-header {
    background: linear-gradient(135deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    padding: 1.5rem 1rem !important;
    border-radius: 1rem 1rem 0 0 !important;
    text-align: center !important;
    margin: 0 1rem 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
  }
  
  .mobile-calendar-title {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
    color: white !important;
  }
  
  .mobile-calendar-subtitle {
    font-size: 0.9rem !important;
    opacity: 0.9 !important;
    color: white !important;
  }
  
  /* Week view toggle */
  .mobile-view-toggle {
    display: flex !important;
    background: white !important;
    border-radius: 0.75rem !important;
    margin: 0 1rem 1rem !important;
    padding: 0.25rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  }
  
  .mobile-view-toggle button {
    flex: 1 !important;
    padding: 0.75rem !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0.5rem !important;
    font-weight: 600 !important;
    color: #666 !important;
    transition: all 0.2s ease !important;
  }
  
  .mobile-view-toggle button.active {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  }
  
  /* Weekly calendar grid */
  .mobile-week-grid {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    gap: 1px !important;
    background: #e5e7eb !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    margin: 0 1rem 1rem !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  }
  
  .mobile-day-header {
    background: var(--primary) !important;
    color: white !important;
    padding: 0.75rem 0.25rem !important;
    text-align: center !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
  }
  
  .mobile-day-cell {
    background: white !important;
    min-height: 80px !important;
    padding: 0.5rem 0.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: relative !important;
  }
  
  .mobile-day-cell.today {
    background: #fff7ed !important;
    border: 2px solid var(--primary) !important;
  }
  
  .mobile-day-number {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin-bottom: 0.25rem !important;
  }
  
  .mobile-day-cell.today .mobile-day-number {
    background: var(--primary) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
  }
  
  .mobile-class-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    margin: 1px !important;
  }
  
  /* Color coding for different class types */
  .mobile-class-dot.beginner { background: #22c55e !important; }
  .mobile-class-dot.advanced { background: #ef4444 !important; }
  .mobile-class-dot.kids { background: #3b82f6 !important; }
  .mobile-class-dot.intermediate { background: #8b5cf6 !important; }
  .mobile-class-dot.all-levels { background: #f59e0b !important; }
  
  /* Daily schedule view */
  .mobile-daily-schedule {
    margin: 0 1rem !important;
    background: white !important;
    border-radius: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  }
  
  .mobile-daily-header {
    background: linear-gradient(90deg, var(--primary), var(--secondary)) !important;
    color: white !important;
    padding: 1rem !important;
    text-align: center !important;
  }
  
  .mobile-daily-date {
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 0.25rem !important;
  }
  
  .mobile-daily-day {
    font-size: 0.9rem !important;
    opacity: 0.9 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
  
  .mobile-class-list {
    padding: 0 !important;
  }
  
  .mobile-class-card {
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 1rem !important;
    display: flex !important;
    gap: 1rem !important;
    align-items: center !important;
    transition: all 0.2s ease !important;
  }
  
  .mobile-class-card:hover {
    background: #f8f9fa !important;
    transform: translateX(4px) !important;
  }
  
  .mobile-class-card:last-child {
    border-bottom: none !important;
  }
  
  .mobile-class-time {
    background: var(--primary) !important;
    color: white !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    min-width: 80px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }
  
  .mobile-class-info {
    flex: 1 !important;
  }
  
  .mobile-class-name {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin-bottom: 0.25rem !important;
  }
  
  .mobile-class-instructor {
    font-size: 0.85rem !important;
    color: #666 !important;
    margin-bottom: 0.25rem !important;
  }
  
  .mobile-class-level {
    display: inline-block !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 1rem !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.25px !important;
  }
  
  .mobile-class-level.beginner {
    background: #dcfce7 !important;
    color: #166534 !important;
  }
  
  .mobile-class-level.advanced {
    background: #fef2f2 !important;
    color: #dc2626 !important;
  }
  
  .mobile-class-level.kids {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
  }
  
  .mobile-class-level.intermediate {
    background: #f3e8ff !important;
    color: #7c3aed !important;
  }
  
  .mobile-class-level.all-levels {
    background: #fef3c7 !important;
    color: #d97706 !important;
  }
  
  /* No classes state */
  .mobile-no-classes {
    padding: 3rem 1rem !important;
    text-align: center !important;
    color: #9ca3af !important;
  }
  
  .mobile-no-classes svg {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 1rem !important;
    opacity: 0.5 !important;
  }
  
  /* Navigation improvements */
  #schedule-navigation {
    margin: 0 1rem 1.5rem !important;
    padding: 0 !important;
    background: white !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    overflow: hidden !important;
  }
  
  #schedule-navigation .week-nav-btn {
    padding: 1rem !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border-radius: 0 !important;
    min-width: 80px !important;
  }
  
  #schedule-navigation > div[style*="text-align:center"] {
    background: #f8f9fa !important;
    padding: 1rem !important;
    border: none !important;
  }
  
  /* Week label styling */
  #schedule-navigation div[style*="font-weight:700"] {
    font-size: 1rem !important;
    color: var(--primary) !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* This week button */
  #schedule-navigation .btn[style*="background:#666"] {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
  }
}

@media (max-width: 480px) {
  /* Even more compact on small phones */
  div[style*="grid-template-columns:repeat(auto-fit,minmax(350px,1fr))"] {
    padding: 0 0.5rem !important;
  }
  
  .card-item {
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  .card-item h3 {
    font-size: 1.1rem !important;
  }
  
  /* Week navigation - stack buttons vertically on very small screens */
  div[style*="justify-content:space-between"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }
  
  div[style*="justify-content:space-between"] button {
    width: 100% !important;
    max-width: 200px !important;
  }
}

/* Force card view to be the default on mobile */
@media (max-width: 768px) {
  /* JavaScript override to force card view */
  body::after {
    content: '';
    display: none;
  }
  
  /* Ensure grid view is completely hidden */
  .schedule-container [style*="grid-template-columns:120px"] {
    display: none !important;
  }
  
  /* Show only the card/list view */
  .schedule-container > div:last-child {
    display: block !important;
  }
}