/* ====================================================
   MOBILE & RESPONSIVE STYLES - OFFMETA
   ====================================================
   
   This file contains all mobile and responsive styles
   extracted from the main style.css for better performance
   and maintainability.
   
   Breakpoints:
   - Tablet: max-width: 768px
   - Mobile: max-width: 480px
   - Desktop Only: min-width: 769px
   
   ==================================================== */

/* ====================================================
   TABLET STYLES (max-width: 768px)
   ==================================================== */

@media (max-width: 768px) {

    /* ===== NAVIGATION ===== */
    .hamburger-menu { display: flex; }
    .desktop-menu { display: none; }
    .mobile-menu { top: 56px; height: calc(100vh - 56px); }
    .navbar { height: 56px; }
    .nav-container { padding: 0 1rem; }
    .logo { height: 32px; }

    /* PHASE 1: CRITICAL - Hide nav logo BETA text */
    .nav-logo span { display: none; }

    /* PHASE 1: CRITICAL - Profile section compact */
    .profile-link {
        font-size: 0.8rem;
    }

    .nav-avatar {
        width: 18px;
        height: 18px;
    }
    
    /* ===== TYPOGRAPHY & CONTENT ===== */
    .hero-title { font-size: 2.5rem; }
    .hero-subtitle { font-size: 1.2rem; }
    .llm-title { font-size: 2rem; }
    .ai-title { font-size: 2.25rem; }
    .section-header { font-size: 1.5rem; }
    
    /* ===== LAYOUT & GRIDS ===== */
    .profile-header { flex-direction: column; text-align: center; }
    .events-grid, .leagues-grid { grid-template-columns: 1fr; }
    .achievements-grid, .badges-grid, .connections-grid { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .events-list.compact { grid-template-columns: 1fr; }
    .events-grid-dark.normal {
        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    /* PHASE 1: CRITICAL - Admin/Settings Sidebar Fix */
    .admin-layout {
        flex-direction: column;
        gap: 1rem;
    }

    .admin-nav {
        width: 100%;
        position: static;
        max-height: none;
    }

    .admin-content {
        width: 100%;
    }

    /* PHASE 1: CRITICAL - Section Header Filters Fix */
    .header-content-wrapper {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .header-left {
        text-align: center;
    }

    .header-filters {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* ===== LEAGUE/EVENT CARDS ===== */
    .league-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        min-height: auto;
    }

    .league-title-section { width: 100%; }
    .league-badges { justify-content: flex-start; }
    .league-info-grid { grid-template-columns: 1fr; gap: 0.75rem; }
    .detail-item { font-size: 0.85rem; }
    .league-actions {
        width: 100%;
        justify-content: flex-end;
        padding-left: 0;
        gap: 0.5rem;
    }

    .event-actions { width: 100%; justify-content: space-between; }

    .league-content { padding: 1rem; }
    .league-title { font-size: 1.1rem; }

    .league-btn {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }

    /* PHASE 2: MAJOR UX - Event Badge Wrapping */
    .event-badges-dark {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .event-header-dark {
        gap: 0.75rem;
    }

    /* PHASE 2: MAJOR UX - Admin Title Row Fix */
    .admin-title-row {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }

    .admin-title-row .event-name-dark {
        text-align: left;
    }
    
    /* ===== FOOTER ===== */
    .footer-container { 
        flex-direction: column; 
        gap: 1rem; 
        text-align: center; 
    }
    .footer-left { order: 2; }
    .footer-right { order: 1; }
    .footer-links { 
        flex-wrap: wrap; 
        justify-content: center; 
        gap: 1rem; 
    }
    .footer-copyright { 
        justify-content: center; 
        flex-wrap: wrap; 
    }
    
    /* ===== FILTER BARS ===== */
    .leagues-filter-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem;
    }
    
    .leagues-title {
        text-align: center;
        margin-bottom: 1rem;
        font-size: 1.5rem;
    }
    
    .filter-controls {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }
    
    /* ===== STREAM SECTION ===== */
    .stream-header {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 1rem 1.5rem;
    }
    
    .stream-info {
        min-width: auto;
        margin-bottom: 1rem;
    }
    
    .stream-title {
        font-size: 1.3rem;
        justify-content: center;
    }
    
    .stream-meta {
        justify-content: center;
        gap: 1rem;
    }
    
    .stream-actions {
        justify-content: center;
        flex-wrap: wrap;
    }
    
    .stream-btn {
        flex: 1;
        min-width: 120px;
    }
    
    .stream-header-dark {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .stream-actions-dark {
        width: 100%;
    }
    
    .action-btn-dark {
        flex: 1;
        justify-content: center;
    }
    
    /* ===== HOMEPAGE SPECIFIC ===== */
    .event-bar-content {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .event-bar-meta {
        gap: 1rem;
    }
    
    .meta-item {
        font-size: 0.8rem;
    }
    
    .event-bar-actions {
        justify-content: stretch;
    }
    
    .action-btn {
        flex: 1;
        justify-content: center;
    }
    
    /* ===== MODAL & FORMS ===== */
    .edit-league-content {
        width: 95%;
        padding: 1.5rem;
        max-height: 95vh;
    }
    
    .edit-form-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .edit-league-header h2 {
        font-size: 1.5rem;
    }
    
    .edit-form-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .btn-cancel,
    .btn-save {
        width: 100%;
    }
    
    .edit-form-actions button {
        width: 100%;
    }
    
    
    /* ===== LLM INTERFACE ===== */
    .prompt-input-wrapper {
        flex-direction: column;
        gap: 1rem;
    }
    
    .prompt-actions {
        justify-content: center;
        order: -1;
    }
    
    .suggestions-list {
        justify-content: center;
    }
    
    .event-card-header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .event-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    /* ===== AI SEARCH ===== */
    .ai-search-box {
        padding: 1.25rem;
    }
    
    .quick-prompts {
        justify-content: center;
    }
    
    
    /* ===== ADMIN SPECIFIC ===== */
    .admin-event-row {
        flex-direction: column;
        gap: 1rem;
    }

    .admin-event-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .admin-event-details {
        flex-direction: column;
        gap: 0.5rem;
    }

    .admin-event-actions {
        width: 100%;
    }

    /* PHASE 3: MODERATE - Container Padding Reduction */
    .container {
        padding: 0 1rem;
    }

    .landing, .admin-page {
        padding: 1rem;
    }

    /* PHASE 3: MODERATE - Info Row Spacing */
    .info-row {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .info-label {
        font-size: 0.7rem;
    }

    .info-value {
        font-size: 0.85rem;
    }

    /* PHASE 3: MODERATE - Announcement Banner */
    .announcement-minimal {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }

    .announcement-text {
        font-size: 0.85rem;
    }

    /* PHASE 3: MODERATE - AI Esports Daily */
    .ai-esports-daily-list {
        padding: 0.5rem 0;
    }

    .ai-daily-icon {
        width: 16px;
        height: 16px;
    }

    .ai-daily-game-tag {
        font-size: 0.6rem;
    }

    .ai-daily-title {
        font-size: 0.8rem;
    }

    .ai-daily-body {
        font-size: 0.7rem;
    }

    /* PHASE 3: MODERATE - Section Title Sizes */
    .section-title-dark {
        font-size: 1rem;
    }

    .title-subtitle {
        font-size: 0.65rem;
    }

    /* PHASE 3: MODERATE - Admin Actions */
    .admin-card .admin-actions {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .admin-btn {
        flex: 1;
        min-width: 80px;
    }

    /* PHASE 3: MODERATE - Sidebar Navigation */
    .sidebar-nav {
        gap: 0.25rem;
    }

    .sidebar-link {
        padding: 1rem 0.75rem;
        font-size: 0.95rem;
    }

    .nav-icon {
        font-size: 1rem;
    }
}

/* ====================================================
   MOBILE STYLES (max-width: 480px) 
   ==================================================== */

@media (max-width: 480px) {
    
    /* ===== NAVIGATION ===== */
    .mobile-menu { top: 52px; height: calc(100vh - 52px); }
    .navbar { height: 52px; }
    .logo { height: 28px; }
    .mobile-menu-content { padding: 1.5rem; }
    .mobile-nav-link { font-size: 1.1rem; }
    
    /* ===== TYPOGRAPHY ===== */
    .hero-title { font-size: 2rem; }
    .llm-title { font-size: 1.75rem; }
    .ai-title { font-size: 1.75rem; }
    .ai-subtitle { font-size: 0.95rem; }
    .section-header { font-size: 1.3rem; }
    .event-bar-title { font-size: 1.1rem; }
    
    /* ===== FOOTER ===== */
    .footer-links { flex-direction: column; gap: 0.5rem; }
    .footer-copyright { flex-direction: column; gap: 0.25rem; }
    .footer-separator { display: none; }
    
    /* ===== FORMS & ACCORDION ===== */
    .form-grid { gap: 0.75rem; }
    
    /* ===== FILTER CONTROLS ===== */
    .filter-controls {
        grid-template-columns: 1fr;
    }
    
    /* ===== LEAGUES ===== */
    .league-content {
        padding: 0.75rem;
    }
    
    .league-title {
        font-size: 1.1rem;
    }
    
    .league-btn {
        font-size: 0.8rem;
        padding: 0.6rem 0.75rem;
    }
    
    .viewer-count {
        font-size: 0.7rem;
    }
    
    /* ===== STREAM SECTION ===== */
    .stream-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .stream-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .stream-btn {
        width: 100%;
    }
    
    .stream-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    /* ===== HOMEPAGE ===== */
    .event-bar-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .hero-auth-btn {
        font-size: 1rem;
        padding: 0.8rem 1.5rem;
    }
    
    /* ===== MODALS ===== */
    .edit-league-header {
        margin-bottom: 1rem;
    }
    
    .edit-form-group label {
        font-size: 0.85rem;
    }
    
    .edit-form-group input,
    .edit-form-group select {
        font-size: 0.9rem;
        padding: 0.5rem;
    }
    
    
    /* ===== LLM INTERFACE ===== */
    .prompt-container {
        padding: 1rem;
    }
    
    .events-list.compact {
        grid-template-columns: 1fr;
    }
    
    .event-card.compact {
        padding: 1rem;
    }
    
    .more-events-btn {
        padding: 0.875rem 1.5rem;
        font-size: 0.9rem;
    }
    
    /* ===== AI SEARCH ===== */
    .suggestion-item {
        font-size: 0.85rem;
        padding: 0.35rem 0.85rem;
    }
    
    .suggestion-item:hover {
        padding-left: 1rem;
    }
    
    .ai-search-box {
        padding: 1rem;
    }
    
    .quick-prompts {
        gap: 0.4rem;
    }
    
    .prompt-chip {
        font-size: 0.7rem;
        padding: 0.4rem 0.8rem;
    }

    /* PHASE 4: MINOR POLISH - Event Card Padding Reduction */
    .event-card-dark {
        padding: 0.85rem;
    }

    /* PHASE 4: MINOR POLISH - Loading Indicators */
    .loading-more {
        padding: 1.5rem;
    }

    .loading-spinner {
        width: 32px;
        height: 32px;
    }

    /* PHASE 4: MINOR POLISH - Modal Improvements */
    .edit-league-content {
        width: 98%;
        padding: 1rem 0.75rem;
    }

    /* PHASE 4: MINOR POLISH - Accordion Padding */
    .accordion-body {
        padding: 0.75rem !important;
    }
}

/* ====================================================
   DESKTOP ONLY STYLES (min-width: 769px)
   ==================================================== */

@media (min-width: 769px) {
    .desktop-menu { display: flex; }
    .hamburger-menu { display: none; }
    .mobile-menu { display: none !important; }
}