/* ============================================
   ENEM - Comprehensive Mobile Responsiveness
   Prevents ALL overflow from containers
   ============================================ */

/* Global overflow protection */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure all containers respect viewport */
*, *::before, *::after {
    max-width: 100%;
}

/* Images, videos, iframes */
img, video, iframe {
    max-width: 100% !important;
    height: auto !important;
}

/* Tables must scroll horizontally */
table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
}

/* Prevent pre/code overflow */
pre, code {
    overflow-x: auto;
    max-width: 100%;
    word-break: break-all;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Buttons never overflow */
button, .btn, input[type="submit"], input[type="button"] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Form inputs */
input, textarea, select {
    max-width: 100%;
    font-size: 16px;
}

/* Flex containers wrap */
.header-inner, .card, .prova-card, .materia-header,
.question-header, .question-meta, .filters-bar,
.stats-bar, .pagination, .meta, .hero-actions,
.hero-buttons, .features-grid, .stats-grid, .pdf-card,
.material-card, .form-row, .tab-bar, .nav-links {
    flex-wrap: wrap !important;
}

/* Grid containers */
.card-grid, .study-grid, .features-grid, .stats-grid,
.simulado-grid, .materia-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)) !important;
}

@media (max-width: 768px) {
    .header-inner {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 0.6rem 0.75rem !important;
        gap: 0.5rem !important;
    }
    nav {
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.15rem !important;
    }
    nav a {
        padding: 0.3rem 0.45rem !important;
        font-size: 0.73rem !important;
        white-space: nowrap !important;
    }
    .page-header { padding: 1.5rem 0.75rem 1rem !important; }
    .page-header h1 { font-size: 1.3rem !important; }
    .page-header p { font-size: 0.88rem !important; }
    .container { padding: 0 0.75rem 2rem !important; overflow: hidden !important; }
    .card { padding: 1rem !important; overflow: hidden !important; }
    .card-grid { grid-template-columns: 1fr !important; }
    .prova-card { flex-direction: column !important; text-align: center !important; gap: 0.75rem !important; }
    .prova-stats { justify-content: center !important; flex-wrap: wrap !important; gap: 0.5rem !important; }
    .prova-ano { font-size: 1.4rem !important; min-width: auto !important; }
    .materia-detail { padding: 1.25rem !important; overflow: hidden !important; }
    .materia-header { flex-wrap: wrap !important; }
    .materia-header h2 { font-size: 1.15rem !important; }
    .assuntos-table { font-size: 0.78rem !important; min-width: 500px !important; }
    .assuntos-table th, .assuntos-table td { padding: 0.5rem 0.4rem !important; font-size: 0.78rem !important; }
    .btn { padding: 0.5rem 1rem !important; font-size: 0.85rem !important; }
    .btn-sm { padding: 0.35rem 0.6rem !important; font-size: 0.75rem !important; }
    .question-card { padding: 1rem !important; overflow: hidden !important; }
    .question-header { flex-wrap: wrap !important; gap: 0.5rem !important; }
    .filters-bar { flex-direction: column !important; align-items: stretch !important; }
    .filters-bar select, .filters-bar input { min-width: auto !important; width: 100% !important; }
    .stats-bar { flex-wrap: wrap !important; gap: 0.5rem !important; }
    .stat-chip { font-size: 0.78rem !important; padding: 0.3rem 0.6rem !important; }
    .pagination { flex-wrap: wrap !important; gap: 0.3rem !important; }
    .pagination button { padding: 0.35rem 0.6rem !important; font-size: 0.78rem !important; }
    .redacao-card .meta { gap: 0.5rem !important; }
    .redacao-card h3 { font-size: 0.95rem !important; }
    .study-grid { grid-template-columns: 1fr !important; }
    .study-card { padding: 1.25rem !important; }
    .material-content { padding: 1.25rem !important; overflow: hidden !important; }
    .material-content h1 { font-size: 1.3rem !important; }
    .material-content h2 { font-size: 1.1rem !important; }
    .material-content table { font-size: 0.8rem !important; }
    .simulado-card { padding: 1rem !important; }
    .admin-grid, .pdf-list { grid-template-columns: 1fr !important; }
    .admin-table { font-size: 0.78rem !important; }
    .admin-section { padding: 16px !important; overflow: hidden !important; }
    .pdf-card { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; }
    .pdf-card .actions { flex-wrap: wrap !important; gap: 0.5rem !important; }
    .material-card { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; }
    .tab-bar { overflow-x: auto !important; flex-wrap: nowrap !important; -webkit-overflow-scrolling: touch !important; }
    .tab-bar button { padding: 8px 14px !important; font-size: 0.8rem !important; white-space: nowrap !important; }
    .stat-item .num { font-size: 1.25rem !important; }
    .stat-item .label { font-size: 0.7rem !important; }
    nav.nav-links, .nav-links { flex-wrap: wrap !important; gap: 0.25rem !important; }
    nav.nav-links a, .nav-links a { font-size: 0.75rem !important; padding: 0.3rem 0.5rem !important; }
    .hero { padding: 3rem 1rem 2.5rem !important; }
    .hero h1 { font-size: clamp(1.5rem, 6vw, 2.5rem) !important; }
    .hero p { font-size: 1rem !important; }
    .hero-actions, .hero-buttons { flex-direction: column !important; align-items: center !important; }
    .hero-actions .btn, .hero-buttons .btn { width: 100% !important; max-width: 300px !important; justify-content: center !important; }
    .features-grid { grid-template-columns: 1fr !important; }
    .login-container, .auth-container { padding: 1.5rem !important; margin: 1rem !important; }
    .perfil-card { padding: 1.25rem !important; }
    footer { padding: 1.25rem 0.75rem !important; }
}

@media (max-width: 480px) {
    .logo-text { font-size: 1.05rem !important; }
    .logo-icon { width: 32px !important; height: 32px !important; font-size: 0.95rem !important; }
    nav a { padding: 0.25rem 0.3rem !important; font-size: 0.65rem !important; }
    .page-header { padding: 1.25rem 0.6rem 0.75rem !important; }
    .page-header h1 { font-size: 1.1rem !important; }
    .container { padding: 0 0.6rem 1.5rem !important; }
    .card { padding: 0.85rem !important; border-radius: 10px !important; }
    .prova-info h3 { font-size: 0.88rem !important; }
    .prova-info .meta { font-size: 0.75rem !important; }
    .prova-stat-num { font-size: 1rem !important; }
    .prova-stat-label { font-size: 0.65rem !important; }
    .materia-detail { padding: 1rem !important; }
    .materia-header h2 { font-size: 1rem !important; }
    .question-text { font-size: 0.88rem !important; }
    .alternatives-list li { font-size: 0.85rem !important; padding: 0.45rem 0.6rem !important; }
    .hero { padding: 2rem 0.75rem !important; }
    .study-card h3 { font-size: 0.95rem !important; }
}