/**
 * IntelliCampus Mobile Responsive Styles
 * Enhances all grading system views for mobile devices
 * Version: 1.0
 * Author: IntelliCampus Development Team
 */

/* =====================================================
   MOBILE-FIRST BREAKPOINTS
   ===================================================== */

/* Extra small devices (phones, 576px and down) */
@media (max-width: 575.98px) {

    /* Typography Adjustments */
    h1 { font-size: 1.75rem !important; }
    h2 { font-size: 1.5rem !important; }
    h3 { font-size: 1.25rem !important; }
    h4 { font-size: 1.1rem !important; }
    h5 { font-size: 1rem !important; }

    /* Container and Spacing */
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .card {
        margin-bottom: 1rem !important;
    }

    .card-body {
        padding: 0.75rem !important;
    }

    /* Tables - Make them scrollable */
    .table-responsive {
        border: 1px solid #dee2e6;
        border-radius: 0.25rem;
    }

    .table {
        font-size: 0.875rem;
        margin-bottom: 0;
    }

    .table thead th {
        white-space: nowrap;
        padding: 0.5rem !important;
    }

    .table tbody td {
        padding: 0.5rem !important;
    }

    /* Gradebook - Stack horizontally scrollable */
    #gradebookTable {
        min-width: 800px; /* Force horizontal scroll */
    }

    .sticky-col {
        position: sticky;
        left: 0;
        background-color: #fff !important;
        z-index: 10;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    }

    .sticky-col-right {
        position: sticky;
        right: 0;
        background-color: #fff !important;
        z-index: 10;
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
    }

    /* Forms - Full width inputs */
    .form-control,
    .form-select {
        font-size: 16px !important; /* Prevents zoom on iOS */
    }

    input[type="number"],
    input[type="text"],
    input[type="email"],
    select,
    textarea {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    /* Buttons - Larger touch targets */
    .btn {
        padding: 0.75rem 1rem !important;
        font-size: 1rem !important;
        min-height: 44px; /* iOS minimum touch target */
    }

    .btn-sm {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        min-height: 38px;
    }

    .btn-group {
        display: flex;
        flex-direction: column;
    }

    .btn-group > .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Statistics Cards - Stack vertically */
    .stat-card,
    .analytics-card,
    .calculator-card {
        margin-bottom: 1rem !important;
    }

    .stat-box {
        padding: 1rem !important;
    }

    .stat-box h3 {
        font-size: 1.75rem !important;
    }

    /* Navigation - Collapsible */
    .navbar-nav {
        padding: 0.5rem 0;
    }

    .nav-link {
        padding: 0.75rem 1rem !important;
        font-size: 1rem;
    }

    /* Modals - Full screen on mobile */
    .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100%;
    }

    .modal-content {
        height: 100%;
        border-radius: 0;
    }

    .modal-body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Charts - Responsive sizing */
    .chart-container {
        height: 250px !important;
        margin-bottom: 1.5rem;
    }

    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Grade Entry - Touch-friendly */
    .grade-input,
    .points-input {
        font-size: 18px !important;
        padding: 0.75rem !important;
        touch-action: manipulation;
    }

    .grade-slider {
        height: 12px !important;
        touch-action: pan-x;
    }

    .grade-slider::-webkit-slider-thumb {
        width: 28px !important;
        height: 28px !important;
    }

    .grade-slider::-moz-range-thumb {
        width: 28px !important;
        height: 28px !important;
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }

    /* Tabs - Scrollable horizontally */
    .nav-tabs,
    .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .nav-tabs .nav-link,
    .filter-tab {
        white-space: nowrap;
        flex: 0 0 auto;
    }

    /* Alerts and Notifications */
    .alert {
        font-size: 0.875rem;
        padding: 0.75rem;
    }

    /* Badges */
    .badge {
        font-size: 0.75rem;
        padding: 0.35em 0.65em;
    }

    /* Dropdown menus */
    .dropdown-menu {
        width: 100%;
        max-width: 300px;
    }

    /* Pagination */
    .pagination {
        flex-wrap: wrap;
    }

    .page-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    /* Grade Item Row - Stack on mobile */
    .grade-item-row .row {
        flex-direction: column;
    }

    .grade-item-row .col-md-5,
    .grade-item-row .col-md-4,
    .grade-item-row .col-md-3 {
        max-width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Student List Items */
    .student-list-item {
        padding: 1rem !important;
    }

    .student-list-item .row {
        flex-direction: column;
    }

    /* Category Section */
    .category-section {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Scenario Presets */
    .scenario-preset {
        margin-bottom: 0.75rem;
        padding: 1rem !important;
    }

    /* Comparison Rows */
    .comparison-row {
        flex-direction: column;
        text-align: center;
        padding: 0.75rem !important;
    }

    .comparison-label,
    .comparison-value {
        margin-bottom: 0.25rem;
    }

    /* Print - Hide on mobile */
    @media print {
        .no-print {
            display: none !important;
        }
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {

    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.75rem !important; }

    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .card-body {
        padding: 1rem !important;
    }

    .btn-group {
        display: inline-flex;
    }

    .btn-group > .btn {
        width: auto;
    }

    .chart-container {
        height: 300px !important;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {

    .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Tables can be full width */
    .table {
        font-size: 0.9rem;
    }

    .chart-container {
        height: 350px !important;
    }

    /* Grid adjustments */
    .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 1rem;
    }
}

/* =====================================================
   TOUCH-SPECIFIC ENHANCEMENTS
   ===================================================== */

/* Increase touch target sizes */
@media (hover: none) and (pointer: coarse) {

    /* Links and buttons */
    a,
    button,
    .btn,
    .nav-link,
    .dropdown-item {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        touch-action: manipulation;
    }

    /* Checkboxes and radios */
    input[type="checkbox"],
    input[type="radio"] {
        width: 24px;
        height: 24px;
        cursor: pointer;
    }

    /* Form switches */
    .form-check-input {
        width: 3em;
        height: 1.5em;
    }

    /* Prevent double-tap zoom */
    * {
        touch-action: manipulation;
    }

    /* Smooth scrolling */
    html {
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ===================================================== */

@media (max-width: 767.98px) and (orientation: landscape) {

    /* Reduce vertical spacing in landscape */
    .card {
        margin-bottom: 0.75rem !important;
    }

    .stat-box {
        padding: 0.75rem !important;
    }

    .stat-box h3 {
        font-size: 1.5rem !important;
    }

    /* Optimize modal height */
    .modal-content {
        max-height: 90vh;
    }

    .modal-body {
        max-height: calc(90vh - 120px);
    }
}

/* =====================================================
   ACCESSIBILITY ENHANCEMENTS
   ===================================================== */

/* Focus indicators for keyboard navigation */
*:focus {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Skip link for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #007bff;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
}

/* Ensure sufficient color contrast */
.text-muted {
    color: #6c757d !important;
}

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

/* Hardware acceleration for animations */
.card,
.btn,
.modal,
.dropdown-menu {
    will-change: transform;
    transform: translateZ(0);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================
   DARK MODE SUPPORT (Optional)
   ===================================================== */

@media (prefers-color-scheme: dark) {
    /* Add dark mode styles if needed */
    /* Example: */
    /*
    body {
        background-color: #1a1a1a;
        color: #f8f9fa;
    }

    .card {
        background-color: #2d2d2d;
        color: #f8f9fa;
    }
    */
}

/* =====================================================
   UTILITY CLASSES
   ===================================================== */

/* Mobile-specific utilities */
.mobile-center {
    text-align: center !important;
}

@media (max-width: 575.98px) {
    .mobile-center {
        text-align: center !important;
    }

    .mobile-stack > * {
        width: 100% !important;
        margin-bottom: 0.5rem;
    }

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

    .mobile-full-width {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Touch-friendly spacing */
.touch-padding {
    padding: 1rem !important;
}

.touch-margin {
    margin: 1rem !important;
}

/* =====================================================
   PRINT STYLES
   ===================================================== */

@media print {

    /* Hide navigation and non-essential elements */
    .navbar,
    .btn,
    .filter-tabs,
    .no-print,
    button {
        display: none !important;
    }

    /* Optimize for printing */
    body {
        font-size: 12pt;
        line-height: 1.5;
        color: #000;
        background: #fff;
    }

    .card {
        page-break-inside: avoid;
        border: 1px solid #000;
    }

    .table {
        border-collapse: collapse;
    }

    .table th,
    .table td {
        border: 1px solid #000;
        padding: 8px;
    }

    /* Ensure links are visible */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }

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

    .page-break {
        page-break-before: always;
    }
}

/* =====================================================
   PWA ENHANCEMENTS
   ===================================================== */

/* Safe area insets for notched devices (iPhone X+) */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Prevent text size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* =====================================================
   LOADING STATES
   ===================================================== */

.loading {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

.loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* =====================================================
   END OF MOBILE RESPONSIVE STYLES
   ===================================================== */