/* ==================== CRITICAL MOBILE FIXES ==================== */
/* IMPORTANT: These styles use !important to override desktop styles */

/* ==================== FORCE MOBILE LAYOUT ==================== */
@media (max-width: 1023px) {

    /* CRITICAL: Override grid layout */
    .layout {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
        gap: 16px !important;
        margin-top: 8px !important;
    }

    /* Force chat column to stack below */
    .chatColumn {
        width: 100% !important;
        max-width: 100% !important;
        order: 2 !important;
        margin: 0 !important;
    }

    /* Force content to full width */
    .content {
        width: 100% !important;
        max-width: 100% !important;
        order: 1 !important;
    }

    /* Fix panel sizing */
    .panel {
        width: 100% !important;
        max-width: 100vw !important;
        min-width: 320px !important;
        padding: 12px !important;
        margin: 0 !important;
        border-radius: 0 !important;
        min-height: 100vh !important;
    }

    /* Remove body padding */
    body {
        padding: 0 !important;
    }

    /* Hide decorative elements */
    .panel::before,
    .panel::after,
    body::before {
        display: none !important;
    }
}

/* ==================== HEADER MOBILE FIX ==================== */
@media (max-width: 1023px) {
    .header {
        flex-wrap: wrap !important;
        gap: 12px !important;
    }

    .global-search-wrap {
        flex: 1 1 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        order: 3 !important;
    }

    .brand {
        flex-shrink: 0 !important;
    }

    .account {
        display: flex !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
    }
}

/* ==================== TABS MOBILE FIX ==================== */
@media (max-width: 1023px) {
    .tabs {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
        padding-bottom: 8px !important;
    }

    .tabs::-webkit-scrollbar {
        display: none !important;
    }

    .tab {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        font-size: 13px !important;
        padding: 10px 14px !important;
        min-height: 44px !important;
    }
}

/* ==================== TOUCH TARGETS ==================== */
@media (max-width: 1023px) {

    button,
    .tab,
    .authToggleBtn,
    .logoutBtn,
    a {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    input,
    select,
    textarea {
        min-height: 44px !important;
        font-size: 16px !important;
    }
}

/* ==================== CHAT MOBILE FIX ==================== */
@media (max-width: 1023px) {
    .chatBox {
        max-height: 300px !important;
        min-height: 200px !important;
    }

    .chatInput {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .chatInput input {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    .chatInput button {
        flex: 1 1 auto !important;
    }
}

/* ==================== AUTH SCREEN MOBILE ==================== */
@media (max-width: 1023px) {
    .authContainer {
        padding: 16px !important;
    }

    .authCard {
        width: 100% !important;
        max-width: 100% !important;
        padding: 24px 16px !important;
        border-radius: 12px !important;
    }

    .authBgGlow {
        display: none !important;
    }
}

/* ==================== PERFORMANCE: DISABLE ANIMATIONS ==================== */
@media (max-width: 1023px) {

    .rankBadge,
    .rankBadge::before,
    .chatMessage {
        animation: none !important;
    }

    .panel,
    .authCard,
    .chatColumn {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
    }
}

/* ==================== RESPONSIVE TYPOGRAPHY ==================== */
@media (max-width: 1023px) {
    .title {
        font-size: 20px !important;
    }

    .authBrandTitle {
        font-size: 24px !important;
    }

    .authTitle {
        font-size: 22px !important;
    }

    .small {
        font-size: 12px !important;
    }
}

/* ==================== STATS CONTROLS MOBILE ==================== */
@media (max-width: 1023px) {
    .statsControls {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .toggle-group,
    .filter-group {
        flex-wrap: wrap !important;
        width: 100% !important;
    }

    .toggle-btn,
    .filter-btn {
        flex: 1 1 auto !important;
        min-width: 80px !important;
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
}

/* ==================== SCROLLBAR MOBILE ==================== */
@media (max-width: 1023px) {
    *::-webkit-scrollbar {
        width: 6px !important;
        height: 6px !important;
    }

    * {
        scrollbar-width: thin !important;
    }
}

/* ==================== SAFE AREA INSETS ==================== */
@supports (padding: max(0px)) {
    @media (max-width: 1023px) {

        .panel,
        .authContainer {
            padding-left: max(12px, env(safe-area-inset-left)) !important;
            padding-right: max(12px, env(safe-area-inset-right)) !important;
            padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ==================== LANDSCAPE MOBILE ==================== */
@media (max-width: 1023px) and (orientation: landscape) {
    .panel {
        min-height: auto !important;
    }

    .chatBox {
        max-height: 200px !important;
    }
}

/* ==================== ACCESSIBILITY ==================== */
@media (max-width: 1023px) {
    *:focus-visible {
        outline: 3px solid var(--accent) !important;
        outline-offset: 2px !important;
    }
}

/* ==================== PREVENT TEXT SELECTION ON BUTTONS ==================== */
button,
.tab,
.toggle-btn,
.filter-btn {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* ==================== REDUCE MOTION ==================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==================== TABLET OPTIMIZATIONS ==================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .panel {
        width: 95vw !important;
        max-width: 900px !important;
        padding: 20px !important;
        border-radius: 16px !important;
    }

    body {
        padding: 24px !important;
    }

    .tab {
        font-size: 14px !important;
        padding: 12px 18px !important;
    }
}

/* ==================== DESKTOP (RESTORE NORMAL) ==================== */
@media (min-width: 1024px) {
    .layout {
        display: grid !important;
        grid-template-columns: 1fr 380px !important;
        gap: 24px !important;
    }

    .chatColumn {
        max-width: 380px !important;
        order: 0 !important;
    }

    .panel {
        max-width: 1400px !important;
        padding: 28px !important;
        border-radius: 24px !important;
    }
}

/* ==================== STATS GRID MOBILE FIX ==================== */
@media (max-width: 1023px) {

    .stats-top-grid,
    .stats-bottom-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: none !important;
    }

    .stats-right-col {
        flex-direction: row !important;
        gap: 12px !important;
    }

    .stats-right-col .stat-card-mini {
        padding: 16px !important;
    }
}