/* ============================================
   COMPREHENSIVE RESPONSIVE DESIGN SYSTEM
   Mobile-First Approach
   ============================================ */

/* ============================================
   BASE STYLES & FLUID TYPOGRAPHY
   ============================================ */
html {
    font-size: 16px;
}

.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   EXTRA SMALL DEVICES (Phones < 375px)
   iPhone SE, old mobile devices
   ============================================ */
@media (max-width: 374px) {
    html {
        font-size: 14px;
    }

    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .auth-container {
        max-width: 100%;
        padding: 0 0.5rem;
    }

    .auth-card {
        padding: 1rem;
    }

    .auth-header h2 {
        font-size: 1.5rem;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
}

/* ============================================
   SMALL DEVICES (Phones 375px - 576px)
   iPhone 12/13/14, Galaxy S21, Pixel
   ============================================ */
@media (min-width: 375px) and (max-width: 576px) {
    html {
        font-size: 15px;
    }

    .container {
        max-width: 100%;
        padding: 0 15px;
    }

    .auth-container {
        max-width: 100%;
        padding: 0 1rem;
    }

    .auth-card {
        padding: 1.5rem;
    }

    .auth-header h2 {
        font-size: 1.75rem;
    }

    .auth-subtitle {
        font-size: 0.875rem;
    }

    .form-group label {
        font-size: 0.85rem;
    }

    .input-wrapper input {
        padding: 0.75rem 1rem 0.75rem 2.5rem;
        font-size: 0.9rem;
    }

    .input-icon {
        left: 0.75rem;
        font-size: 0.9rem;
    }

    .password-toggle {
        right: 0.75rem;
        font-size: 0.9rem;
    }

    .auth-submit-btn {
        padding: 0.875rem;
        font-size: 0.95rem;
    }

    .oauth-buttons {
        flex-direction: column;
        gap: 0.75rem;
    }

    .oauth-btn {
        width: 100%;
    }

    /* Feature Cards */
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .feature-card {
        padding: 1.25rem;
    }

    .feature-icon {
        font-size: 1.75rem;
    }

    /* Challenge Cards */
    .challenges-container,
    .challenges-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .challenge-card {
        padding: 1rem;
    }

    /* Admin Panel */
    .admin-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .admin-panel-header h1 {
        font-size: 1.75rem;
    }

    .admin-nav-tabs {
        flex-direction: column;
        width: 100%;
    }

    .admin-tab {
        width: 100%;
        justify-content: center;
        padding: 0.75rem;
    }

    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    /* User Management */
    .management-controls {
        flex-direction: column;
        gap: 1rem;
    }

    .management-controls .search-box {
        min-width: 100%;
    }

    .users-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .users-table {
        min-width: 700px;
    }

    /* Navbar */
    .navbar {
        padding: 0.75rem 0;
    }

    .nav-container {
        height: auto;
        min-height: 60px;
        flex-wrap: wrap;
    }

    .nav-menu {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .nav-links {
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Hero Section */
    .hero-section {
        padding: 2rem 0;
    }

    .hero-section h1 {
        font-size: 1.75rem;
    }

    .hero-section p {
        font-size: 0.95rem;
    }

    /* Buttons */
    .btn-group {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .btn-group .btn {
        width: 100%;
    }

    /* Practice Page */
    .practice-layout {
        grid-template-columns: 1fr;
    }

    .sidebar-filters {
        position: static;
        margin-bottom: 1rem;
    }

    /* Profile Page */
    .profile-layout {
        grid-template-columns: 1fr;
    }

    .profile-sidebar {
        margin-bottom: 1.5rem;
    }
}

/* ============================================
   MOBILE LANDSCAPE (480px - 640px)
   Phones in landscape mode
   ============================================ */
@media (min-width: 577px) and (max-width: 640px) {
    .container {
        max-width: 95%;
    }

    .auth-container {
        max-width: 540px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .challenges-container,
    .challenges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-menu {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* ============================================
   TABLETS & SMALL iPADS (641px - 768px)
   iPad Mini, small tablets
   ============================================ */
@media (min-width: 641px) and (max-width: 768px) {
    html {
        font-size: 16px;
    }

    .container {
        max-width: 720px;
    }

    .auth-container {
        max-width: 600px;
    }

    .auth-card {
        padding: 2rem;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .challenges-container,
    .challenges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-menu {
        gap: 1.5rem;
    }

    .admin-nav-tabs {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .practice-layout {
        grid-template-columns: 1fr;
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   LARGE TABLETS & iPAD (769px - 1024px)
   iPad Air, iPad Pro 10.5", Surface
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 960px;
    }

    .auth-container {
        max-width: 720px;
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .challenges-container,
    .challenges-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-menu {
        gap: 2rem;
    }

    .practice-layout {
        grid-template-columns: 250px 1fr;
        gap: 1.5rem;
    }

    .profile-layout {
        grid-template-columns: 280px 1fr;
        gap: 1.5rem;
    }

    /* Admin tables */
    .users-table-container {
        overflow-x: auto;
    }
}

/* ============================================
   iPAD PRO & SMALL LAPTOPS (1025px - 1366px)
   iPad Pro 12.9", small laptops (13" typical)
   ============================================ */
@media (min-width: 1025px) and (max-width: 1366px) {
    .container {
        max-width: 1200px;
    }

    .auth-container {
        max-width: 800px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .challenges-container,
    .challenges-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .practice-layout {
        grid-template-columns: 280px 1fr;
        gap: 2rem;
    }

    .profile-layout {
        grid-template-columns: 300px 1fr;
        gap: 2rem;
    }

    .nav-container {
        max-width: 1200px;
    }
}

/* ============================================
   MEDIUM LAPTOPS (1367px - 1600px)
   14" laptops (1920x1080 scaled)
   ============================================ */
@media (min-width: 1367px) and (max-width: 1600px) {
    .container {
        max-width: 1320px;
    }

    .auth-container {
        max-width: 850px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .challenges-container {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 2rem;
    }

    .challenges-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }

    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .practice-layout {
        grid-template-columns: 300px 1fr;
        gap: 2.5rem;
    }

    .profile-layout {
        grid-template-columns: 320px 1fr;
        gap: 2.5rem;
    }
}

/* ============================================
   LARGE LAPTOPS (1601px - 1920px)
   15" & 16" laptops (Full HD)
   ============================================ */
@media (min-width: 1601px) and (max-width: 1920px) {
    .container {
        max-width: 1440px;
    }

    .auth-container {
        max-width: 900px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }

    .challenges-container {
        grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
        gap: 2rem;
    }

    .challenges-grid {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 2rem;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }

    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .practice-layout {
        grid-template-columns: 320px 1fr;
        gap: 3rem;
    }

    .profile-layout {
        grid-template-columns: 340px 1fr;
        gap: 3rem;
    }
}

/* ============================================
   EXTRA LARGE DISPLAYS (1921px - 2560px)
   17" laptops, 2K displays
   ============================================ */
@media (min-width: 1921px) and (max-width: 2560px) {
    html {
        font-size: 17px;
    }

    .container {
        max-width: 1600px;
    }

    .auth-container {
        max-width: 950px;
    }

    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }

    .challenges-container {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 2.5rem;
    }

    .challenges-grid {
        grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
        gap: 2.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2.5rem;
    }

    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }

    .practice-layout {
        grid-template-columns: 350px 1fr;
        gap: 3rem;
    }

    .profile-layout {
        grid-template-columns: 360px 1fr;
        gap: 3rem;
    }
}

/* ============================================
   ULTRA WIDE & 4K DISPLAYS (2561px+)
   4K monitors, ultra-wide displays
   ============================================ */
@media (min-width: 2561px) {
    html {
        font-size: 18px;
    }

    .container {
        max-width: 1920px;
    }

    .auth-container {
        max-width: 1000px;
    }

    .features-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
    }

    .challenges-container {
        grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
        gap: 3rem;
    }

    .challenges-grid {
        grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
        gap: 3rem;
    }

    .stats-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 3rem;
    }

    .dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 3rem;
    }

    .practice-layout {
        grid-template-columns: 400px 1fr;
        gap: 4rem;
    }

    .profile-layout {
        grid-template-columns: 400px 1fr;
        gap: 4rem;
    }
}

/* ============================================
   ORIENTATION SPECIFIC ADJUSTMENTS
   ============================================ */

/* Small device landscape */
@media (max-width: 768px) and (orientation: landscape) {
    .navbar {
        padding: 0.5rem 0;
    }

    .nav-container {
        height: 50px;
        min-height: 50px;
    }

    .hero-section {
        padding: 2rem 0;
        min-height: auto;
    }

    .auth-section {
        padding: 1.5rem 0;
        min-height: auto;
    }

    .auth-card {
        padding: 1.25rem;
    }

    .form-group {
        margin-bottom: 0.75rem;
    }
}

/* Tablet landscape */
@media (min-width: 769px) and (max-width: 1024px) and (orientation: landscape) {
    .container {
        max-width: 90%;
    }

    .practice-layout {
        grid-template-columns: 220px 1fr;
    }

    .profile-layout {
        grid-template-columns: 260px 1fr;
    }
}

/* Low height screens (any width) */
@media (max-height: 600px) and (orientation: landscape) {
    .auth-section {
        padding: 1rem 0;
        min-height: auto;
    }

    .auth-card {
        padding: 1rem;
        margin: 1rem 0;
    }

    .form-group {
        margin-bottom: 0.75rem;
    }

    .hero-section {
        padding: 1.5rem 0;
        min-height: auto;
    }

    .modal-content {
        max-height: 85vh;
        overflow-y: auto;
    }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi),
       (min-resolution: 2dppx) {

    .feature-icon,
    .input-icon,
    .password-toggle,
    .stat-icon {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Sharper borders on high DPI */
    .card,
    .auth-card,
    .challenge-card,
    .feature-card {
        border-width: 0.5px;
    }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets (minimum 44x44px for accessibility) */
    .btn,
    .oauth-btn,
    .admin-tab,
    .action-btn,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
        padding: 0.75rem 1.25rem;
    }

    .checkbox-container .checkmark {
        width: 24px;
        height: 24px;
    }

    .password-toggle,
    .input-icon {
        font-size: 1.1rem;
        padding: 0.75rem;
    }

    /* Remove hover effects on touch devices */
    .btn:hover,
    .card:hover,
    .challenge-card:hover {
        transform: none;
    }

    /* Add active states instead */
    .btn:active {
        transform: scale(0.98);
    }

    /* Larger tap areas for interactive elements */
    .nav-item,
    .admin-tab,
    .filter-option {
        padding: 0.75rem 1rem;
    }

    /* Improve scrolling */
    .users-table-container,
    .modal-content,
    .sidebar-filters {
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================
   ACCESSIBILITY - REDUCED 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;
    }

    /* Remove parallax and transform effects */
    .matrix-background,
    .animated-background {
        animation: none !important;
    }
}

/* ============================================
   COLOR SCHEME PREFERENCES
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Dark mode is default, but ensure consistency */
    :root:not([data-theme="light"]) {
        color-scheme: dark;
    }
}

@media (prefers-color-scheme: light) {
    /* Light mode preferences */
    :root:not([data-theme="dark"]) {
        color-scheme: light;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

    /* Hide non-essential elements */
    .navbar,
    .auth-submit-btn,
    .oauth-container,
    .admin-nav-tabs,
    .action-btn,
    .delete-btn,
    .edit-btn,
    .matrix-background {
        display: none !important;
    }

    /* Optimize for printing */
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    .auth-card,
    .challenge-card,
    .feature-card {
        border: 1px solid #000 !important;
        page-break-inside: avoid;
    }

    body {
        margin: 0;
        padding: 0;
    }

    .container {
        max-width: 100%;
    }

    /* Show URLs after links */
    a[href]:after {
        content: " (" attr(href) ")";
    }

    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }
}

/* ============================================
   CONTRAST PREFERENCES (Accessibility)
   ============================================ */
@media (prefers-contrast: high) {
    
    :root {
        --primary-color: #00ff88;
        --border-color: #ffffff;
    }

    .btn,
    .card,
    .input-wrapper input {
        border-width: 2px !important;
    }

    .nav-link,
    .admin-tab {
        border: 1px solid transparent;
    }

    .nav-link:focus,
    .admin-tab:focus,
    .btn:focus {
        outline: 3px solid var(--primary-color);
        outline-offset: 2px;
    }
}

/* ============================================
   SPECIFIC DEVICE ADJUSTMENTS
   ============================================ */

/* iPhone SE (1st & 2nd gen) */
@media only screen 
    and (device-width: 375px) 
    and (device-height: 667px) 
    and (-webkit-device-pixel-ratio: 2) {
    
    .container {
        padding: 0 12px;
    }

    html {
        font-size: 15px;
    }
}

/* iPhone 12/13/14 Pro Max */
@media only screen 
    and (device-width: 428px) 
    and (device-height: 926px) 
    and (-webkit-device-pixel-ratio: 3) {
    
    html {
        font-size: 16px;
    }

    .container {
        max-width: 95%;
    }
}

/* iPad Mini */
@media only screen 
    and (min-device-width: 768px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 2) {
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .challenges-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* iPad Pro 11" */
@media only screen 
    and (min-device-width: 834px) 
    and (max-device-width: 834px) 
    and (-webkit-min-device-pixel-ratio: 2) {
    
    .container {
        max-width: 780px;
    }
}

/* iPad Pro 12.9" */
@media only screen 
    and (min-device-width: 1024px) 
    and (max-device-width: 1024px) 
    and (-webkit-min-device-pixel-ratio: 2) {
    
    .container {
        max-width: 960px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   UTILITY CLASSES FOR RESPONSIVE DESIGN
   ============================================ */

/* Visibility helpers */
.hide-mobile {
    display: none !important;
}

@media (min-width: 769px) {
    .hide-mobile {
        display: block !important;
    }

    .hide-desktop {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .hide-tablet-down {
        display: none !important;
    }
}

@media (min-width: 1025px) {
    .hide-laptop-up {
        display: none !important;
    }
}

/* Text alignment helpers */
@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center !important;
    }
}

/* Spacing helpers for mobile */
@media (max-width: 576px) {
    .mt-mobile-0 { margin-top: 0 !important; }
    .mb-mobile-0 { margin-bottom: 0 !important; }
    .px-mobile-1 { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce animations on slower devices */
@media (max-width: 768px) {
    .matrix-background canvas {
        will-change: auto;
    }

    * {
        will-change: auto;
    }
}

/* GPU acceleration for smooth animations on capable devices */
@media (min-width: 769px) {
    .card,
    .btn,
    .modal-content {
        will-change: transform;
        transform: translateZ(0);
    }
}

/* ============================================
   COMPONENT-SPECIFIC RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Toast notifications */
@media (max-width: 576px) {
    .toast-container {
        left: 10px;
        right: 10px;
        width: auto;
    }

    .toast {
        width: 100%;
        max-width: none;
    }
}

/* Modals */
@media (max-width: 768px) {
    .modal-content {
        width: 95%;
        max-width: 95%;
        margin: 1rem;
        max-height: 90vh;
        overflow-y: auto;
    }

    .modal-header h3 {
        font-size: 1.25rem;
    }
}

/* Loading spinner */
@media (max-width: 576px) {
    .loading-spinner {
        width: 40px;
        height: 40px;
    }
}

/* Password strength indicator */
@media (max-width: 576px) {
    .password-strength {
        font-size: 0.8rem;
    }

    .strength-bar {
        height: 3px;
    }
}

/* Navbar responsive enhancements */
@media (max-width: 968px) {
    .nav-logo img {
        height: 35px;
    }

    .nav-logo h2 {
        font-size: 1.25rem;
    }
}

/* Footer responsiveness */
@media (max-width: 768px) {
    .footer {
        padding: 2rem 0;
    }

    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
}

/* ============================================
   BROWSER-SPECIFIC FIXES
   ============================================ */

/* Safari iOS specific fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix for Safari's bottom safe area */
    .navbar {
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Fix for iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* Firefox specific */
@-moz-document url-prefix() {
    .input-wrapper input {
        padding: 0.85rem 1rem 0.85rem 2.75rem;
    }
}

/* Edge specific */
@supports (-ms-ime-align: auto) {
    .grid-container {
        display: -ms-grid;
    }
}

/* ============================================
   PROFILE PAGE SPECIFIC RESPONSIVE FIXES
   ============================================ */

/* Ensure profile layouts fit all screens */
@media (max-width: 768px) {
    .profile-container-leetcode {
        grid-template-columns: 1fr !important;
        padding: 0 1rem !important;
    }

    .profile-sidebar-left,
    .profile-main-content {
        width: 100% !important;
        min-width: 0 !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .profile-container-leetcode {
        grid-template-columns: 260px 1fr !important;
    }
}

/* Profile overflow prevention */
.profile-section-redesign {
    overflow-x: hidden !important;
}

.profile-container-leetcode {
    max-width: 100% !important;
}

/* Responsive profile cards */
@media (max-width: 576px) {
    .user-info-card,
    .stats-card,
    .badges-card,
    .progress-overview-card {
        padding: 1rem !important;
    }

    .badges-grid-compact {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .badges-grid-compact {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (min-width: 769px) {
    .badges-grid-compact {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

@media (min-width: 1367px) {
    .badges-grid-compact {
        grid-template-columns: repeat(5, 1fr) !important;
    }
}