/* Responsive Design */

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
    
    .learning-types {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }
    
    .header-content {
        flex-wrap: wrap;
    }
    
    nav ul {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 15px;
    }
    
    .header-right {
        margin-left: auto;
    }
    
    .dashboard-grid,
    .teachers-grid,
    .assignment-content {
        grid-template-columns: 1fr;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    .container {
        max-width: 540px;
        padding: 0 15px;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    .learning-types {
        grid-template-columns: 1fr;
    }
    
    .test-container {
        padding: 20px;
    }
    
    .options {
        grid-template-columns: 1fr;
    }
    
    .assignment-header {
        flex-direction: column;
        gap: 15px;
    }
    
    .assignment-actions {
        width: 100%;
        justify-content: center;
    }
    
    .content-tabs {
        overflow-x: auto;
        white-space: nowrap;
    }
    
    .content-tab {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .assignments-grid {
        grid-template-columns: 1fr;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .header-right {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        margin-top: 10px;
    }
    
    .language-selector,
    .auth-buttons {
        width: 100%;
    }
    
    .language-btn,
    .btn-plus {
        width: 100%;
        text-align: center;
    }
    
    .btn {
        padding: 10px 15px;
        font-size: 0.9rem;
    }
    
    .user-profile,
    .assignments,
    .create-assignment {
        padding: 15px;
    }
    
    .style-tabs {
        flex-direction: column;
    }
    
    .style-tab {
        width: 100%;
    }
    
    .tools-grid {
        grid-template-columns: 1fr;
    }
    
    .stat-card {
        flex-direction: column;
        text-align: center;
    }
    
    .stat-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .auth-container {
        padding: 20px;
    }
}

/* Print styles */
@media print {
    header,
    footer,
    .assignment-actions,
    .adaptation-tools,
    .assignment-submission {
        display: none !important;
    }
    
    .assignment-content {
        grid-template-columns: 1fr;
    }
    
    .content-box {
        border: none;
        box-shadow: none;
    }
    
    body {
        background-color: white !important;
        color: black !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --navy-blue: #e0e0ff;
        --white: #1a1a1a;
        --light-gray: #2d2d2d;
        --medium-gray: #404040;
        --dark-gray: #cccccc;
    }
    
    body {
        background-color: #121212;
        color: var(--dark-gray);
    }
    
    .learning-type,
    .user-profile,
    .assignments,
    .test-container,
    .content-box,
    .auth-container,
    .create-assignment,
    .teacher-stats {
        background-color: #2d2d2d;
        border-color: #404040;
    }
    
    .btn {
        background-color: #4c51bf;
    }
    
    .btn:hover {
        background-color: #434190;
    }
}