/* Extracted from teacher.html inline style blocks (Pass T9+ shell split). */
        .grecaptcha-badge {
            visibility: hidden !important;
        }
        /* Time-of-day heatmap markers (Class Insights) */
        .tod-marker {
            display: inline-block;
            width: 14px;
            height: 14px;
        }
        .tod-marker.tod-circle {
            border-radius: 50%;
            border: 1px solid rgba(0, 0, 0, 0.25);
        }
        .tod-marker.tod-square {
            border-radius: 2px;
            border: 1px solid rgba(0, 0, 0, 0.4);
        }
        /* Time-of-Day table grid: slightly lighter borders so colours stand out */
        #time-of-day-heatmap-table th,
        #time-of-day-heatmap-table td {
            border-color: #e9ecef;
        }
        /* CSS Variables */
        :root {
            --primary-color: #2C3E50;
            --secondary-color: #18BC9C;
            --accent-color: #E74C3C;
            --success-color: #27AE60;
            --warning-color: #F39C12;
            --info-color: #3498DB;
            --background-color: #ECF0F1;
            /* Default page background */
            --text-color: #2C3E50;
            /* Default dark text for light backgrounds */
            --light-text-color: #7F8C8D;
            /* Muted text */
            --border-color: #BDC3C7;
            --box-shadow: rgba(0, 0, 0, 0.1);
            --font-family: 'Roboto', sans-serif;
            --amber-color: #FFC107;
            /* Accent for login button & other highlights */
        }
        /* General Reset / Base */
        html,
        body {
            overflow-x: hidden !important;
            height: 100%;
            /* Ensure body and html take full viewport height */
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
        }
        body {
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            font-family: var(--font-family);
            color: var(--text-color);
            position: relative;
            min-height: 100vh;
        }
        .hidden {
            display: none !important;
        }
        /* --- Core Page Layout --- */
        #teacher-login-section,
        #dashboard-main {
            transition: opacity 0.3s ease-in-out;
        }
        /* Ensure Bootstrap modals sit above the full-screen login overlay */
        .modal {
            z-index: 4000;
        }
        .modal-backdrop {
            z-index: 3990;
        }
        /* Make the login page a fixed overlay that covers the entire screen. It is taken OUT of the normal document flow. */
        #teacher-login-section {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2000;
            /* Ensure it's on top of everything else */
        }
        /* All other "page" divs no longer need absolute positioning */
        .modes-page,
        .mode-page,
        .question-page,
        .completion-page,
        .progress-page,
        .interim-feedback-page,
        .final-feedback-page {
            width: 100%;
            overflow-y: auto;
            box-sizing: border-box;
        }
        /* === TEACHER LOGIN PAGE SPECIFIC STYLES === */
        #teacher-login-section.main-page {
            background-image: url('/Images/Login.teacher.webp');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            min-height: 100vh;
            overflow: hidden;
        }
        #teacher-login-section #login-input-group {
            position: absolute;
            bottom: 3vh;
            left: 5vw;
            width: 320px;
            max-width: 90vw;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            z-index: 10;
            opacity: 0;
            animation-name: slideInFromLeftInputs;
            animation-duration: 0.7s;
            animation-delay: 0.5s;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;
        }
        #teacher-login-section .login-field-wrapper {
            width: 100%;
        }
        #teacher-login-section .login-input.form-control {
            background-color: rgba(255, 255, 255, 0.9);
            border: 1px solid var(--border-color, #BDC3C7);
            color: var(--text-color);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            width: 100%;
            box-sizing: border-box;
            transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
        }
        #teacher-login-section .login-input.form-control::placeholder {
            color: var(--light-text-color);
            opacity: 1;
        }
        #teacher-login-section .login-input.form-control:focus {
            background-color: #ffffff;
            border-color: var(--amber-color);
            color: var(--text-color);
            box-shadow: 0 0 0 0.25rem rgba(255, 193, 7, 0.35);
            outline: none;
        }
        #teacher-login-section #login-button-group-wrapper {
            position: absolute;
            bottom: 3vh;
            right: 3vw;
            z-index: 10;
        }
        #teacher-login-section #login-button-group {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 0.5rem;
            opacity: 0;
            transform: translateY(50px);
            animation-name: slideUpAndFadeButtonGroupNoInitialTransform;
            animation-duration: 0.7s;
            animation-delay: 0.7s;
            animation-timing-function: ease-out;
            animation-fill-mode: forwards;
        }
        #teacher-login-section #teacher-login-button.btn {
            background-color: var(--amber-color) !important;
            border: none !important;
            color: var(--primary-color) !important;
            padding: 0.70rem 1.2rem;
            font-size: 1.1rem;
            font-weight: bold;
            border-radius: 8px;
            width: auto;
            min-width: 140px;
            transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
            cursor: pointer;
            text-transform: uppercase;
        }
        #teacher-login-section #teacher-login-button.btn:hover {
            background-color: #e0a800 !important;
            color: var(--primary-color) !important;
        }
        #teacher-login-section #login-links {
            font-size: 0.9rem;
            text-align: right;
        }
        #teacher-login-section #login-links a {
            color: var(--amber-color) !important;
            text-decoration: underline !important;
            transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.7) !important;
            font-weight: 500 !important;
        }
        #teacher-login-section #login-links a:hover {
            color: #e0a800 !important;
        }
        /* Ensure inline signup panel is interactive and above background */
        #teacher-signup-panel {
            position: relative;
            z-index: 2000;
            pointer-events: auto;
            background: #fff;
            border-radius: 16px !important;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.95) !important;
            border: 1px solid rgba(255, 255, 255, 0.2) !important;
        }
        /* Teacher signup modal specific styles */
        #teacher-signup-modal #teacher-signup-message.alert-info {
            background: linear-gradient(135deg, rgba(13, 202, 240, 0.1), rgba(24, 188, 156, 0.1));
            border: 1px solid rgba(13, 202, 240, 0.3);
            color: var(--primary-color);
        }
        #teacher-signup-modal #teacher-signup-message .fa-check-circle {
            animation: checkmarkPulse 0.6s ease-in-out;
        }
        /* Success button styling for modal */
        #teacher-signup-modal .btn-success {
            background: linear-gradient(135deg, var(--success-color), #28a745);
            border: none;
            position: relative;
            overflow: hidden;
        }
        #teacher-signup-modal .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
        }
        #teacher-signup-panel .card-body {
            padding: 2.5rem !important;
        }
        #teacher-signup-panel .card-title {
            color: var(--primary-color);
            font-weight: 700;
            font-size: 1.75rem;
            text-align: center;
            margin-bottom: 1.5rem;
            position: relative;
        }
        #teacher-signup-panel .card-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, var(--secondary-color), var(--info-color));
            border-radius: 2px;
        }
        #teacher-signup-panel .form-label {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
        }
        #teacher-signup-panel .form-control,
        #teacher-signup-panel .form-select {
            border: 2px solid #e3e6f0;
            border-radius: 10px;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.9);
        }
        #teacher-signup-panel .form-control:focus,
        #teacher-signup-panel .form-select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 0.2rem rgba(24, 188, 156, 0.25);
            background: #fff;
        }
        #teacher-signup-panel .btn {
            border-radius: 10px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        #teacher-signup-panel .btn-primary {
            background: linear-gradient(135deg, var(--secondary-color), var(--info-color));
            border: none;
            position: relative;
            overflow: hidden;
        }
        #teacher-signup-panel .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(24, 188, 156, 0.4);
        }
        #teacher-signup-panel .btn-outline-secondary {
            border: 2px solid #6c757d;
            color: #6c757d;
        }
        #teacher-signup-panel .btn-outline-secondary:hover {
            background: #6c757d;
            border-color: #6c757d;
            transform: translateY(-2px);
        }
        #teacher-signup-panel .btn-success {
            background: linear-gradient(135deg, var(--success-color), #28a745);
            border: none;
            position: relative;
            overflow: hidden;
        }
        #teacher-signup-panel .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
        }
        #teacher-signup-panel #teacher-signup-message {
            border-radius: 8px;
            padding: 0.75rem;
            font-weight: 500;
        }
        #teacher-signup-panel #teacher-signup-message.alert-info {
            background: linear-gradient(135deg, rgba(13, 202, 240, 0.1), rgba(24, 188, 156, 0.1));
            border: 1px solid rgba(13, 202, 240, 0.3);
            color: var(--primary-color);
        }
        #teacher-signup-panel #teacher-signup-message .fa-check-circle {
            animation: checkmarkPulse 0.6s ease-in-out;
        }
        @keyframes checkmarkPulse {
            0% {
                transform: scale(0.8);
                opacity: 0;
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }
        #teacher-signup-panel .row {
            margin-bottom: 0.5rem;
        }
        #teacher-signup-panel .col-4,
        #teacher-signup-panel .col-8,
        #teacher-signup-panel .col-12,
        #teacher-signup-panel .col-6 {
            padding: 0.25rem;
        }
        #teacher-login-section #teacher-login-error-top.login-error-message,
        #teacher-login-section #teacher-login-error-bottom.login-error-message {
            font-size: 0.9rem;
            min-height: 1.2em;
            color: #ffdddd;
            background-color: rgba(100, 0, 0, 0.4);
            padding: 5px 8px;
            border-radius: 4px;
            text-shadow: 1px 1px 1px #000;
        }
        #teacher-login-section #teacher-login-error-top.login-error-message {
            text-align: left;
        }
        #teacher-login-section #teacher-login-error-bottom.login-error-message {
            text-align: right;
            width: 100%;
        }
        @media (max-width: 768px) {
            #teacher-login-section #login-input-group {
                bottom: 10vh;
                gap: 0.8rem;
                left: 4vw;
                max-width: 92vw;
            }
            #teacher-login-section #login-button-group-wrapper {
                bottom: 4vh;
                right: 4vw;
            }
            #teacher-login-section #login-button-group {
                gap: 0.4rem;
            }
            #teacher-login-section #teacher-login-button.btn {
                padding: 0.65rem 1.1rem;
                font-size: 1.05rem;
                min-width: 120px;
            }
            #teacher-login-section #login-links {
                font-size: 0.85rem;
            }
            #teacher-login-section .login-input.form-control {
                padding: 0.65rem 1rem;
                font-size: 0.95rem;
            }
        }
        @media (max-width: 480px) {
            #teacher-login-section #login-input-group {
                bottom: 18vh;
                gap: 0.6rem;
                left: 3vw;
                max-width: 94vw;
            }
            #teacher-login-section #login-button-group-wrapper {
                bottom: 3vh;
                right: 3vw;
            }
            #teacher-login-section #teacher-login-button.btn {
                padding: 0.6rem 1rem;
                font-size: 1rem;
                min-width: 100px;
            }
            #teacher-login-section #login-links {
                font-size: 0.8rem;
            }
            #teacher-login-section .login-input.form-control {
                padding: 0.6rem 0.9rem;
                font-size: 0.9rem;
            }
        }
        @keyframes slideInFromLeftInputs {
            0% {
                transform: translateX(-60px);
                opacity: 0;
            }
            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }
        @keyframes slideUpAndFadeButtonGroupNoInitialTransform {
            0% {
                opacity: 0;
                transform: translateY(50px);
            }
            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }
        /* === END OF LOGIN PAGE SPECIFIC STYLES === */
        #dashboard-main.page-container {
            /* Or your .page-container rule */
            background-color: white !important;
            padding: 20px !important;
            /* SLIGHTLY REDUCED PADDING from 25px if it was too much */
            margin: 20px auto !important;
            /* Reduced top/bottom margin if it was larger */
            border-radius: 10px !important;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.12) !important;
            min-height: auto !important;
            /* Allow it to shrink to content, REMOVE 85vh if it causes too much empty space */
            display: block !important;
            overflow-x: hidden !important;
        }
        /* The container for the whole Live Dashboard section */
        #live-dashboard-page {
            /* Remove any default large top margin/padding if .teacher-section had it */
            /* We'll control spacing with elements inside or with #live-dashboard-content-area's margin-top */
            padding-top: 0;
            margin-top: 0;
        }
        /* Back to Teacher Hub button - reduce its bottom margin if it's too large */
        #live-dashboard-page>.btn-outline-secondary {
            /* More specific selector */
            margin-bottom: 1rem !important;
            /* Was mb-3 (1rem), try mb-2 (0.5rem) or less if needed */
        }
        /* The inner panel for the Live Dashboard content */
        #live-dashboard-content-area {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            border: 1px solid #dee2e6;
            margin-top: 1rem;
            /* REDUCED from 15px or 20px to pull it up closer to elements above (like the "Back" button) */
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        /* The H4 title now inside #live-dashboard-content-area */
        #live-dashboard-content-area>h4 {
            margin-top: 0;
            /* Remove default top margin of h4 if it's the first child */
            margin-bottom: 0.5rem;
        }
        /* The "Selected Class..." paragraph, now inside */
        #live-dashboard-content-area>.text-muted {
            margin-bottom: 1rem;
            /* Control space before HR */
        }
        /* The HR, now inside */
        #live-dashboard-content-area>hr {
            margin-top: 0.5rem;
            margin-bottom: 1.5rem;
            /* Space between HR and the "Start Session" card */
        }
        #live-question-details-panel-wrapper .card-header h5 {
            font-size: 1.1rem;
            /* Adjust title size if needed */
        }
        .live-q-header.active-q-header {
            /* Style for highlighted question header */
            background-color: var(--amber-color) !important;
            /* Use your amber color variable */
            color: var(--primary-color) !important;
            /* Dark text on amber */
            font-weight: bold;
        }
        .sort-icon {
            margin-left: 5px;
            color: #adb5bd;
            /* Muted color for default sort icon */
            font-size: 0.8em;
            /* Make it a bit smaller */
        }
        .sort-icon.active-sort {
            /* This class will be toggled by JS */
            color: #007bff;
            /* Or your primary color for active sort */
        }
        th[data-sort-direction="asc"] .sort-icon::before {
            content: "\f0de";
            /* FontAwesome sort-up */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
        }
        th[data-sort-direction="desc"] .sort-icon::before {
            content: "\f0dd";
            /* FontAwesome sort-down */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
        }
        th:not([data-sort-direction]) .sort-icon::before,
        th[data-sort-direction="none"] .sort-icon::before {
            content: "\f0dc";
            /* FontAwesome sort (both up/down) */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
        }
        .q-details-icon {
            cursor: pointer;
            margin-left: 4px;
            /* Space between sort icon and details icon */
        }
        /* Custom Tab Styling */
        .nav-tabs {
            border-bottom: 2px solid #adb5bd;
        }
        .nav-tabs .nav-link {
            color: #212529;
            background-color: transparent;
            border: 1px solid transparent;
            border-bottom: none;
            margin-bottom: -2px;
            padding: 0.5rem 1rem;
        }
        .nav-tabs .nav-link:hover:not(.active) {
            background-color: #f8f9fa;
            border-color: #dee2e6 #dee2e6 transparent;
            color: #000;
        }
        .nav-tabs .nav-link.active {
            background-color: #FF0800;
            color: white;
            font-weight: bold;
            border-color: #FF0800 #FF0800 #FF0800;
            border-bottom: 2px solid #FF0800;
            /* Corrected color code from ff0800 to #FF0800 */
        }
        .tab-content {
            border: 1px solid #adb5bd;
            border-top: none;
            padding: 1rem;
            background-color: #fff;
            /* Default white background for tab panes */
        }
        .landing-nav-card {
            cursor: pointer;
            transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
            border: 1px solid #e0e0e0;
        }
        .landing-nav-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
            border-color: #007bff;
        }
        .landing-nav-card .card-body i {
            transition: transform 0.3s ease;
        }
        .landing-nav-card:hover .card-body i {
            transform: scale(1.1);
        }
        .disabled-until-class-selected {
            opacity: 0.5;
            cursor: not-allowed !important;
        }
        .disabled-until-class-selected:hover {
            transform: none !important;
            box-shadow: none !important;
            border-color: #e0e0e0 !important;
        }
        .disabled-until-class-selected:hover .card-body i {
            transform: none !important;
        }
        .main-loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(236, 240, 241, 0.85);
            /* Match page background with opacity */
            z-index: 3000;
            /* Highest z-index */
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s ease-in-out;
        }
        .main-loader-overlay.hidden {
            display: none;
        }
        .main-loader-content {
            text-align: center;
            color: var(--primary-color);
            background-color: #fff;
            padding: 30px 40px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        .analysis-result-title {
            font-size: 1.1rem;
            /* A bit larger */
            font-weight: 600;
            /* Bolder */
            color: #2C3E50;
            /* Darker, more prominent color */
            display: flex;
            align-items: center;
            margin-bottom: 0.75rem !important;
            /* Add some space below the title */
        }
        .analysis-result-title i {
            font-size: 1.2rem;
            margin-right: 0.6rem;
            /* Space between icon and text */
            width: 20px;
            /* Ensures consistent alignment */
            text-align: center;
        }
        /* This rule was intended to style the landing page card itself, if needed. */
        /* However, #dashboard-main.page-container now provides the main white card. */
        /* So, this rule for #teacher-landing-page might make it a "card within a card". */
        /* Consider if you want #teacher-landing-page to have its own distinct background/padding, */
        /* or if it should just be a transparent container for its children on the main .page-container background. */
        /* For now, I'll keep it as you provided it, but ensure it doesn't conflict with .page-container logic. */
        #teacher-landing-page {
            margin-top: 20px;
            /* background-color: #ffffff; /* This would be white on white if .page-container is also white */
            /* color: var(--text-color); */
            /* padding: 30px; /* This padding would be *inside* any padding from .page-container on #dashboard-main */
            /* margin: 30px auto; /* This margin might be undesirable if it's already centered by .page-container */
            /* border-radius: 12px; */
            /* max-width: 1300px; /* This could constrain it further within .page-container */
            /* box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
        }
        /* Styles for Bootstrap .container-fluid if you are using it as the main wrapper */
        /* This is often provided by Bootstrap's CSS itself. */
        /* If you have <div class="container-fluid"> wrapping your #dashboard-main, */
        /* Bootstrap handles its width and padding. */
        /* This custom rule might be redundant or slightly override Bootstrap if you're not careful. */
        /*
    .container-fluid {
        width: 100%;
        padding-right: var(--bs-gutter-x, 0.75rem); 
        padding-left: var(--bs-gutter-x, 0.75rem);  
        margin-right: auto;
        margin-left: auto;
    }
    */
        /* This is the primary rule for the main white card background of the dashboard area */
        /* Applied to <div id="dashboard-main" class="page-container"> */
        .page-container {
            background-color: #fff;
            color: var(--text-color);
            padding: 25px;
            border-radius: 10px;
            margin: 25px auto;
            max-width: 98%;
            /* Takes up most of .container-fluid width */
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
            min-height: 85vh;
            position: relative;
            overflow-x: hidden;
            /* Prevent children from causing horizontal scroll on this container */
        }
        /* Floating Action Button for Feedback */
        .feedback-fab {
            position: fixed;
            bottom: 25px;
            right: 25px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            z-index: 1050;
            transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out;
        }
        .feedback-fab:hover {
            transform: scale(1.1);
            background-color: #1a2531;
        }
        /* Thank You Card Modal Styling */
        #thank-you-modal .modal-content {
            border-radius: 15px;
            border: 2px solid var(--amber-color);
            background-color: #fdfaf3;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }
        #thank-you-modal .modal-body {
            padding: 2rem;
            text-align: center;
        }
        #thank-you-modal .thank-you-card-image {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 1rem;
        }
        #thank-you-modal .thank-you-card-message {
            font-family: 'Georgia', serif;
            font-size: 1.1rem;
            color: #5c5c5c;
            line-height: 1.6;
        }
        #thank-you-modal .thank-you-card-signature {
            font-family: 'Brush Script MT', cursive;
            font-size: 2rem;
            color: var(--primary-color);
            margin-top: 1rem;
        }
        /* Feedback Popover */
        .feedback-popover {
            position: absolute;
            bottom: 80px;
            /* Position above the FAB */
            right: 10px;
            width: 250px;
            background-color: #fff;
            color: var(--text-color);
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            z-index: 1049;
            /* Below the FAB's z-index */
            opacity: 0;
            transform: translateY(10px);
            transition: opacity 0.4s ease-out, transform 0.4s ease-out;
            pointer-events: none;
            /* Can't be clicked */
        }
        /* The speech bubble tail */
        .feedback-popover::after {
            content: '';
            position: absolute;
            bottom: -10px;
            right: 25px;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid #fff;
        }
        .feedback-popover.show-popover {
            opacity: 1;
            transform: translateY(0);
        }
        /* Pulse animation for the FAB */
        .pulse-attention {
            animation: pulseFab 2s infinite;
        }
        @keyframes pulseFab {
            0% {
                box-shadow: 0 0 0 0 rgba(44, 62, 80, 0.7);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(44, 62, 80, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(44, 62, 80, 0);
            }
        }
        /* Sortable table column styling */
        .sortable {
            user-select: none;
            transition: background-color 0.2s ease;
        }
        .sortable:hover {
            background-color: #f8f9fa;
        }
        .sortable:active {
            background-color: #e9ecef;
        }
        /* 3D Red Button for Advanced Analysis */
        #analysis-reset-btn {
            background: linear-gradient(145deg, #dc3545, #c82333) !important;
            border: none !important;
            color: white !important;
            font-weight: 600 !important;
            box-shadow:
                0 4px 8px rgba(0, 0, 0, 0.2),
                0 2px 4px rgba(0, 0, 0, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.2),
                inset 0 -1px 0 rgba(0, 0, 0, 0.1) !important;
            transform: translateY(0);
            transition: all 0.2s ease;
            position: relative;
            overflow: hidden;
            cursor: not-allowed !important;
        }
        #analysis-reset-btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
            pointer-events: none;
            z-index: 1;
        }
        #analysis-reset-btn:hover {
            background: linear-gradient(145deg, #e63946, #d62839) !important;
            box-shadow:
                0 6px 12px rgba(220, 53, 69, 0.4),
                0 3px 6px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.25),
                inset 0 -1px 0 rgba(0, 0, 0, 0.15) !important;
            transform: translateY(-2px);
            opacity: 1 !important;
        }
        #analysis-reset-btn:active {
            background: linear-gradient(145deg, #c82333, #bd2130) !important;
            box-shadow:
                0 2px 4px rgba(0, 0, 0, 0.2),
                inset 0 2px 4px rgba(0, 0, 0, 0.2),
                inset 0 -1px 0 rgba(255, 255, 255, 0.1) !important;
            transform: translateY(1px);
        }
        #analysis-reset-btn .badge {
            background: rgba(255, 255, 255, 0.25) !important;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
        }
        /* Homework Report Clinic Fields - Default Value Styling */
        #clinic-room.default-value,
        #clinic-time.default-value,
        #clinic-day.default-value,
        #clinic-teacher.default-value {
            color: #999999;
            font-style: italic;
        }
        #clinic-room:not(.default-value),
        #clinic-time:not(.default-value),
        #clinic-day:not(.default-value),
        #clinic-teacher:not(.default-value) {
            color: #333333;
            font-style: normal;
        }
        /* Placeholder styling for when fields are empty */
        #clinic-room::placeholder,
        #clinic-time::placeholder,
        #clinic-day::placeholder,
        #clinic-teacher::placeholder {
            color: #999999;
            font-style: italic;
            opacity: 1;
        }
                        /* Custom tab styling for Activity Monitoring */
                        #activity-monitor-tabs .nav-link {
                            border-radius: 0.375rem 0.375rem 0 0;
                            font-weight: 500;
                        }
                        #activity-monitor-tabs .nav-link.active {
                            border-bottom: 2px solid white;
                        }
                        #activity-monitor-tabs .nav-link:not(.active) {
                            background-color: #f8f9fa !important;
                            color: #6c757d !important;
                            border-color: #dee2e6 !important;
                        }