/* Responsive Design */

/* Tablet View */
@media (max-width: 768px) {
    /* App Container */
    .app-container {
        padding: 5px;
    }
    
    body {
        padding: 5px;
    }
    
    /* Header */
    .header {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    .header h1 {
        font-size: 1.5rem;
        margin-bottom: 8px;
    }
    
    .school-name {
        font-size: 1rem;
    }
    
    .header-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 10px;
    }
    
    .school-logo {
        grid-column: 1;
        justify-self: center;
        max-height: 35px;
    }
    
    .header-text {
        grid-column: 1;
        min-width: auto;
    }
    
    /* Navigation */
    .nav-tab {
        min-width: 100px;
        padding: 12px 15px;
        font-size: 0.9rem;
    }
    
    /* Content */
    .tab-content {
        padding: 15px;
    }
    
    /* Stats Grid */
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* Tables */
    .table {
        font-size: 0.85rem;
    }
    
    .table th,
    .table td {
        padding: 8px;
    }
    
    /* Action Buttons */
    .action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
    
    .action-btn {
        width: 100%;
    }
    
    /* Login Container */
    .login-container {
        max-width: calc(100vw - 20px);
        margin: 10px auto;
        padding: 20px 15px;
        width: 100%;
    }
    
    .login-header h2 {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }
    
    .login-header p {
        font-size: 0.9rem;
        margin-bottom: 20px;
    }
    
    /* Forms */
    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 14px;
    }
    
    /* Buttons */
    .btn {
        min-height: 52px;
        font-size: 1rem;
        padding: 15px 20px;
    }
    
    /* Cards */
    .card-body {
        padding: 15px;
    }
    
    .card-header {
        padding: 15px;
        font-size: 1rem;
    }
}

/* Small Mobile View */
@media (max-width: 480px) {
    /* Very small screens */
    .login-container {
        margin: 5px auto;
        padding: 15px 10px;
        max-width: calc(100vw - 10px);
    }
    
    .header {
        padding: 10px;
        margin-bottom: 10px;
    }
    
    .header h1 {
        font-size: 1.3rem;
        margin-bottom: 5px;
    }
    
    .form-group input {
        padding: 14px;
    }
    
    .btn {
        min-height: 52px;
        font-size: 1rem;
    }
    
    /* Table responsive scroll */
    .table-responsive {
        margin: 0 -5px;
    }
    
    /* Modal full screen on mobile */
    .modal-content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
        border-radius: 0;
    }
    
    /* Improve readability */
    body {
        font-size: 15px;
        line-height: 1.5;
    }
}

/* Landscape Phone */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .login-container {
        margin: 5px auto;
        padding: 15px;
    }
    
    .header {
        padding: 8px;
        margin-bottom: 8px;
    }
    
    .header h1 {
        font-size: 1.3rem;
        margin-bottom: 5px;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Better touch targets */
    button, .btn, .nav-tab, .stat-card {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Remove hover effects on touch devices */
    .btn:hover,
    .stat-card:hover,
    .nav-tab:hover {
        transform: none !important;
    }
    
    /* Add touch feedback */
    .btn:active,
    .stat-card:active,
    .nav-tab:active {
        transform: scale(0.95) !important;
        transition: transform 0.1s ease !important;
    }
    
    /* Disable hover animations */
    .table tbody tr:hover {
        background: inherit;
    }
}

/* iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
    /* Prevent zoom on form focus */
    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 16px !important;
    }
    
    /* Fix iOS button styling */
    input[type="submit"],
    input[type="button"],
    button {
        -webkit-appearance: none;
        appearance: none;
    }
}

/* Android Specific */
@media screen and (max-width: 768px) {
    /* Ensure buttons are large enough */
    .btn, button {
        min-height: 48px;
    }
    
    /* Better spacing for touch */
    .form-group {
        margin-bottom: 24px;
    }
}

/* Print Styles */
@media print {
    body {
        background: white;
    }
    
    .header,
    .user-info,
    .nav-container,
    .btn,
    .action-buttons,
    .modal {
        display: none !important;
    }
    
    .content-container {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .table {
        page-break-inside: avoid;
    }
    
    .card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .btn {
        border: 2px solid currentColor;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
        border-width: 2px;
    }
    
    .table th,
    .table td {
        border-width: 2px;
    }
}

/* Dark Mode Support (if you want to add it later) */
@media (prefers-color-scheme: dark) {
    /* You can add dark mode styles here if needed */
}

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