/**
 * Desafios de Aprendizagem - Responsive Stylesheet
 * Desenvolvido por B20 Conteúdo Digital
 * https://www.b20.com.br
 */

/* ===== TABLET (768px+) ===== */
@media (min-width: 768px) {
    /* Container */
    .container {
        padding: 24px;
        max-width: 720px;
        margin: 0 auto;
    }

    /* Desktop Navigation - Show */
    .desktop-nav {
        display: flex;
        gap: 4px;
        align-items: center;
    }

    .desktop-nav .nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        border-radius: var(--border-radius-small);
        color: var(--text-color);
        text-decoration: none;
        transition: var(--transition);
        font-size: 0.9rem;
        font-weight: 500;
    }

    .desktop-nav .nav-link i {
        font-size: 1.1rem;
    }

    .desktop-nav .nav-link:hover,
    .desktop-nav .nav-link.active {
        background: var(--primary-color);
        color: white;
        text-decoration: none;
        box-shadow: var(--shadow-sm);
    }

    /* Bottom Navigation - Hide */
    .bottom-nav {
        display: none !important;
    }

    /* Adjust body padding */
    body {
        padding-bottom: 0;
    }

    /* Categories Grid */
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .categories-grid-full {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* User Stats Grid */
    .user-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    /* Stats Overview Grid */
    .stats-overview-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    /* Achievements Grid */
    .achievements-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }

    /* Results Actions */
    .results-actions {
        justify-content: center;
    }

    .results-actions .btn {
        flex: 0 1 auto;
        min-width: 180px;
    }

    /* Data Actions */
    .data-actions {
        justify-content: flex-start;
    }

    .data-actions .btn {
        flex: 0 1 auto;
        min-width: 180px;
    }

    /* Toast Position */
    .toast {
        bottom: 24px;
    }

    /* Quiz Container */
    .quiz-container {
        padding: 24px;
    }

    /* Results Container */
    .results-container {
        padding: 40px;
    }

    /* FAQ Container */
    .faq-container {
        max-width: 800px;
        margin: 0 auto;
    }
}

/* ===== DESKTOP (1024px+) ===== */
@media (min-width: 1024px) {
    /* Container */
    .container {
        max-width: 960px;
        padding: 32px;
    }

    /* Header */
    .app-header {
        padding: 0 40px;
    }

    .desktop-nav {
        gap: 16px;
    }

    .desktop-nav .nav-link {
        padding: 8px 16px;
        font-size: 1rem;
    }

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.4rem; }

    /* Categories Grid */
    .categories-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .categories-grid-full {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    .category-card {
        padding: 24px;
        min-height: 140px;
    }

    .category-icon {
        font-size: 3rem;
    }

    /* Welcome Card */
    .welcome-card {
        padding: 32px;
    }

    .user-avatar {
        width: 80px;
        height: 80px;
        font-size: 3rem;
    }

    /* Stats Grid */
    .user-stats-grid {
        gap: 20px;
    }

    .stat-item {
        padding: 20px;
    }

    /* Achievements Grid */
    .achievements-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    /* Quiz Options */
    .quiz-option {
        padding: 20px 24px;
        font-size: 1.05rem;
    }

    /* Results */
    .score-circle {
        width: 240px;
        height: 240px;
    }

    .score-value {
        font-size: 3.5rem;
    }

    /* Profile Avatar */
    .profile-avatar-large {
        width: 120px;
        height: 120px;
        font-size: 5rem;
    }

    /* Cards Hover Effects Enhanced */
    .category-card:hover {
        transform: translateY(-6px);
    }

    .stat-card:hover {
        transform: translateY(-4px);
    }

    .achievement-card:hover {
        transform: translateY(-4px);
    }
}

/* ===== LARGE DESKTOP (1440px+) ===== */
@media (min-width: 1440px) {
    /* Container */
    .container {
        max-width: 1200px;
        padding: 40px;
    }

    /* Categories Grid */
    .categories-grid-full {
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
    }

    /* Achievements Grid */
    .achievements-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 24px;
    }

    /* Stats Overview Grid */
    .stats-overview-grid {
        gap: 24px;
    }

    /* Chart Card */
    .chart-card {
        padding: 32px;
    }

    #performance-chart {
        max-height: 400px;
    }
}

/* ===== SMALL MOBILE (max 375px) ===== */
@media (max-width: 375px) {
    /* Typography */
    h1 { font-size: 1.5rem; }
    h2 { font-size: 1.3rem; }
    h3 { font-size: 1.1rem; }

    /* Header */
    .header-logo h1 {
        font-size: 1.1rem;
    }

    .header-logo i {
        font-size: 1.3rem;
    }

    /* User Stats Grid */
    .user-stats-grid {
        gap: 8px;
    }

    .stat-item {
        padding: 8px;
    }

    .stat-icon {
        width: 32px;
        height: 32px;
        font-size: 1rem;
    }

    .stat-value {
        font-size: 1.2rem;
    }

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

    /* Categories Grid */
    .categories-grid,
    .categories-grid-full {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .category-card {
        padding: 16px;
        min-height: 100px;
    }

    .category-icon {
        font-size: 2rem;
    }

    /* Stats Overview Grid */
    .stats-overview-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Achievements Grid */
    .achievements-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Results */
    .score-circle {
        width: 160px;
        height: 160px;
    }

    .score-value {
        font-size: 2.5rem;
    }

    .results-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Buttons */
    .btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    .btn-large {
        padding: 14px 24px;
        font-size: 1rem;
    }

    /* Quiz Options */
    .quiz-option {
        padding: 12px 16px;
        font-size: 0.95rem;
    }

    /* Bottom Nav */
    .nav-item {
        padding: 6px 8px;
        font-size: 0.65rem;
        min-width: 56px;
    }

    .nav-item i {
        font-size: 1.1rem;
    }
}

/* ===== LANDSCAPE MODE (Mobile) ===== */
@media (max-height: 500px) and (orientation: landscape) {
    /* Reduce vertical spacing */
    .container {
        padding: 12px 16px;
    }

    .welcome-card,
    .daily-challenge-card,
    .profile-card,
    .settings-card {
        padding: 16px;
        margin-bottom: 12px;
    }

    .section-header {
        margin-bottom: 16px;
    }

    /* Compact user stats */
    .user-stats-grid {
        gap: 8px;
    }

    .stat-item {
        padding: 8px;
    }

    /* Compact categories */
    .categories-grid,
    .categories-grid-full {
        gap: 8px;
    }

    .category-card {
        padding: 12px;
        min-height: 80px;
    }

    .category-icon {
        font-size: 1.8rem;
        margin-bottom: 4px;
    }

    /* Compact quiz */
    .quiz-question {
        padding: 16px;
        font-size: 1rem;
    }

    .quiz-option {
        padding: 10px 16px;
        min-height: 44px;
    }

    /* Hide some decorative elements */
    .micro-lesson-icon {
        width: 60px;
        height: 60px;
        font-size: 2rem;
        margin-bottom: 12px;
    }

    .results-icon,
    .feedback-icon {
        width: 70px;
        height: 70px;
        font-size: 2.5rem;
        margin-bottom: 12px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    /* Hide navigation and interactive elements */
    .app-header,
    .bottom-nav,
    .btn,
    .toast,
    .loading-overlay {
        display: none !important;
    }

    /* Reset body padding */
    body {
        padding: 0;
        background: white;
        color: black;
    }

    /* Show all sections */
    .section {
        display: block !important;
        page-break-after: always;
    }

    /* Optimize for print */
    .container {
        max-width: 100%;
        padding: 20px;
    }

    /* Remove shadows and transitions */
    * {
        box-shadow: none !important;
        transition: none !important;
    }

    /* Ensure readable text */
    body,
    .text-color {
        color: black !important;
    }

    /* Simplify backgrounds */
    .welcome-card,
    .daily-challenge-card,
    .category-card,
    .stat-card,
    .achievement-card {
        background: white !important;
        border: 1px solid #ccc !important;
    }
}

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

    .xp-progress-fill::after {
        animation: none;
    }

    .loading-spinner {
        animation: none;
        border-top-color: transparent;
    }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
    :root {
        --primary-color: #0052A3;
        --text-color: #000000;
        --bg-color: #FFFFFF;
        --surface-color: #F0F0F0;
    }

    body.dark-mode {
        --primary-color: #4A9EFF;
        --text-color: #FFFFFF;
        --bg-color: #000000;
        --surface-color: #1A1A1A;
    }

    /* Increase border visibility */
    .category-card,
    .stat-card,
    .achievement-card,
    .quiz-option {
        border: 2px solid currentColor;
    }

    /* Ensure focus is visible */
    *:focus {
        outline: 3px solid var(--primary-color);
        outline-offset: 2px;
    }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    .btn,
    .nav-item,
    .category-card,
    .quiz-option,
    .faq-question {
        min-height: 48px;
        min-width: 48px;
    }

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

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

    .category-card:active,
    .quiz-option:active {
        transform: scale(0.98);
    }
}