:root {
            --primary-color: #3949ab;
            --primary-dark: #1a237e;
            --primary-light: #7986cb;
            --secondary-color: #f68c4e;
            --background-color: #f4f4f4;
            --card-background: #ffffff;
            --text-color: #333333;
            --text-light: #ffffff;
            --success-color: #43a047;
            --warning-color: #fb8c00;
            --info-color: #2196F3;
            --danger-color: #f44336;
            --success-color-light: #66bb6a;
            --warning-color-light: #ffb74d;
            --info-color-light: #64b5f6;
            --danger-color-light: #ef5350;
            --purple-color: #9c27b0;
            --purple-color-light: #ba68c8;

            /* Spacing & Layout */
            --spacing-unit: 4px;
            --border-radius: 12px;
            --border-radius-sm: 8px;

            /* Shadows & Depth */
            --shadow-sm: 0 2px 5px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.15);

            /* Transitions */
            --transition-speed: 0.2s;
            --transition-curve: ease-out;
        }

        /* --- Settings & Admin Profile Styles --- */
        .settings-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
            margin-top: 15px;
        }

        .settings-tabs-container {
            display: flex;
            gap: 10px;
            padding: 10px 20px 0 20px;
            border-bottom: 1px solid #e0e0e0;
            background-color: var(--card-background);
            flex-shrink: 0;
        }

        .settings-tab-btn {
            /* Reset generic button styles */
            background: transparent;
            border: none;
            box-shadow: none !important;
            transform: none !important;

            /* Tab specific styles */
            border-bottom: 3px solid transparent;
            padding: 12px 16px;
            cursor: pointer;
            font-size: 0.95em;

            /* Use explicit gray color instead of opacity to prevent font thinning */
            color: #757575;

            transition: color 0.2s, background-color 0.2s;
            border-radius: 8px 8px 0 0;
            display: flex;
            align-items: center;
            gap: 8px;

            /* Enforce stable font rendering */
            font-weight: 600;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;

            margin-bottom: -1px;
        }

        /* Hover State */
        .settings-tab-btn:hover {
            background-color: rgba(0, 0, 0, 0.04);
            color: var(--primary-color);
            border-bottom-color: transparent;
            font-weight: 600;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* Active State */
        .settings-tab-btn.active {
            color: var(--primary-color);
            border-bottom-color: var(--primary-color);
            background-color: transparent;
        }

        /* Active + Hover */
        .settings-tab-btn.active:hover {
            background-color: rgba(57, 73, 171, 0.04);
            font-weight: 600;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            border-bottom-color: var(--primary-color);
        }

        .dark-mode .settings-tabs-container {
            border-bottom-color: #444;
        }

        .dark-mode .settings-tab-btn {
            color: #aaa;
            /* Dark mode inactive color */
        }

        .dark-mode .settings-tab-btn:hover {
            background-color: rgba(255, 255, 255, 0.05);
            color: #fff;
            font-weight: 600;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .dark-mode .settings-tab-btn.active {
            color: var(--primary-light);
            border-bottom-color: var(--primary-light);
        }

        .settings-section {
            width: 100%;
            box-sizing: border-box;
        }

        .settings-section .table-container {
            width: 100%;
            overflow-x: auto;
        }

        .settings-section .database-table {
            width: 100%;
            /* Force full width */
            min-width: 600px;
            /* Ensure scroll triggers on small screens */
        }

        .settings-loader-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 255, 255, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;
            backdrop-filter: blur(2px);
        }

        .dark-mode .settings-loader-overlay {
            background: rgba(0, 0, 0, 0.6);
        }


        /* --- Modern Global Settings Revamp --- */
        .settings-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* Match standard dialog title spacing */
            padding: 20px 24px;
            margin: 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            background-color: rgba(0, 0, 0, 0.02);
        }

        .settings-controls-bar {
            display: flex;
            gap: 10px;
            margin-bottom: 5px;
            position: sticky;
            top: 0;
            background: var(--card-background);
            z-index: 10;
            padding: 10px 0;
        }

        .settings-search-input {
            flex-grow: 1;
            padding: 10px 15px;
            border-radius: 8px;
            border: 1px solid #e0e0e0;
            font-size: 0.95em;
            background-color: #f9f9f9;
            transition: all 0.2s;
        }

        .settings-search-input:focus {
            background-color: var(--card-background);
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(57, 73, 171, 0.1);
            outline: none;
        }

        .modern-course-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 12px;
            /* Reduced gap */
            padding-bottom: 10px;
            margin-top: 10px;
        }

        .modern-course-card {
            background: var(--card-background);
            border: 1px solid #eee;
            border-radius: var(--border-radius);
            padding: 0;
            cursor: pointer;
            transition: all var(--transition-speed) var(--transition-curve);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: var(--shadow-sm);
            margin-bottom: 0;
        }

        .modern-course-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-light);
        }

        .card-color-strip {
            height: 6px;
            width: 100%;
        }

        /* Category Colors */
        .strip-theory {
            background: linear-gradient(90deg, #3949ab, #64b5f6);
        }

        .strip-lab {
            background: linear-gradient(90deg, #fb8c00, #ffb74d);
        }

        .strip-practice {
            background: linear-gradient(90deg, #43a047, #81c784);
        }

        .strip-default {
            background: linear-gradient(90deg, #757575, #bdbdbd);
        }

        .card-body {
            padding: 15px;
            flex-grow: 1;
        }

        .card-title-row {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 8px;
        }

        .card-course-name {
            font-weight: 700;
            font-size: 1.1em;
            color: var(--text-color);
        }

        .card-eis-badge {
            font-size: 0.7em;
            background: #f0f0f0;
            padding: 2px 6px;
            border-radius: 4px;
            color: #666;
            font-family: monospace;
        }

        .card-meta-row {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 0.85em;
            color: #666;
            margin-bottom: 5px;
        }

        .card-meta-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .card-footer {
            padding: 10px 15px;
            background: rgba(0, 0, 0, 0.02);
            border-top: 1px solid #f5f5f5;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.8em;
            color: #888;
        }

        /* 1. Container for "Add Admin/Section" Input */
        .admin-tool-bar {
            background: rgba(0, 0, 0, 0.03);
            border: 1px solid rgba(0, 0, 0, 0.05);
            padding: 6px;
            border-radius: 10px;
            width: 100%;
            box-sizing: border-box;
            display: flex;
            gap: 10px;
            align-items: center;
        }

        .dark-mode .admin-tool-bar {
            background: rgba(255, 255, 255, 0.05);
            border-color: #444;
        }

        /* 2. The Input inside the toolbar */
        .admin-tool-bar input.form-control {
            background-color: white !important;
            font-size: 0.85em;
        }

        .dark-mode .admin-tool-bar input.form-control {
            background-color: #2c2c2e !important;
            color: white !important;
            border-color: #555 !important;
        }

        .admin-input-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            margin-bottom: 5px;
        }

        .admin-input-wrapper .input-with-icon {
            flex-grow: 1;
            position: relative;
        }

        .admin-pills-list:not(:empty) {
            border-color: #e0e0e0;
            border-radius: 8px;
            background-color: #fafafa;
        }

        /* The individual email chip */
        .admin-pill-item {
            background-color: #e3f2fd;
            color: var(--primary-color);
            border: 1px solid #bbdefb;
            padding: 6px 12px;
            border-radius: 50px;
            font-size: 0.9em;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s;
        }

        .admin-pill-item .remove-pill {
            cursor: pointer;
            opacity: 0.6;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            transition: all 0.2s;
        }

        .admin-pills-list {
            background-color: #fafafa;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 5px;
            padding: 5px;
            min-height: 0;
            border: 1px solid #eee;
            /* Invisible border to prevent jump */
            transition: border-color 0.2s;
        }

        .dark-mode .admin-pills-list {
            background-color: #2c2c2e !important;
            /* Overrides inline #fafafa if present */
            border-color: #444 !important;
        }

        /* Dark Mode for Admin UI */
        .dark-mode .admin-pills-list:not(:empty) {
            background-color: rgba(255, 255, 255, 0.05);
            border-color: #444;
        }

        .dark-mode .admin-pill-item {
            background-color: rgba(57, 73, 171, 0.2);
            border-color: var(--primary-color);
            color: #c5cae9;
        }

        /* --- Admin Action Bar (The Fix for Layout Shift) --- */
        .admin-action-bar {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 5px;
            width: 100%;
        }

        .action-chip,
        .action-chip.has-items {
            flex-grow: 1;
            min-width: 140px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 8px;

            background-color: #fff8e1;
            /* Very light orange tint */
            color: #e65100;

            border: 1px solid #ffb74d;
            padding: 8px 16px;
            border-radius: 12px;

            margin-bottom: 10px;

            font-size: 0.95em;
            font-weight: 600;

            cursor: pointer;
            user-select: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            /* Default Raised Shadow */

            /* Smooth transition for colors, NO transform to avoid jumping */
            transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
            transform: scale(1);
        }

        /* Hover: Highlight only, NO movement */
        .action-chip:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
        }

        /* Hovering a chip with items */
        .action-chip.has-items:hover {
            background-color: #fff3e0;
            /* Light orange tint on hover */
            border-color: #f57c00;
            color: #e65100;
            box-shadow: 0 4px 8px rgba(255, 183, 77, 0.2);
            transform: none;
        }

        .action-chip.has-items:active {
            transform: scale(0.96);
            background-color: #ffcc80;
        }

        /* ACTIVE: This is the ONLY "Pressed" state */
        .action-chip.active,
        .action-chip.active:hover {
            background-color: #fff3e0 !important;
            /* Light Orange Background */
            color: #e65100 !important;
            border-color: #ffb74d;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
            /* Inner Shadow = Pressed Look */
            transform: scale(0.98);
            /* Subtle shrink */
        }

        /* Badges */
        .action-chip .badge {
            background: #e65100;
            color: white;
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.8em;
        }

        .action-chip.active .badge {
            background: white;
            color: #e65100;
        }

        /* Loading State */
        .action-chip.loading {
            background: #f5f5f5;
            color: #666;
            cursor: wait;
            border-style: dashed;
            box-shadow: none;
        }

        /* Clean State */
        .action-chip.clean {
            background: #e8f5e9;
            color: #2e7d32;
            border-color: #a5d6a7;
            cursor: default;
            box-shadow: none;
        }

        .action-chip.clean:hover {
            transform: none;
            box-shadow: none;
            background: #e8f5e9;
            color: #2e7d32;
            border-color: #a5d6a7;
        }

        /* --- Collapsible Module (Clean container) --- */
        .collapsible-module {
            background: var(--card-background);
            border-radius: 12px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            overflow: hidden;

            /* Hidden State */
            max-height: 0;
            opacity: 0;
            margin-bottom: 0;
            /* Collapsed margin is 0 */
            border: 0;
            visibility: hidden;

            /* Performance Optimization */
            will-change: max-height, opacity, margin-bottom;

            /* Smooth Transition */
            transition:
                max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                /* Decelerate curve */
                opacity 0.4s ease-in-out,
                margin-bottom 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                visibility 0.4s;
        }

        .collapsible-module.expanded {
            /* Visible State */
            max-height: 2000px;
            opacity: 1;
            margin-bottom: 20px;
            /* Expand to 20px */
            border: 1px solid #e0e0e0;
            visibility: visible;
        }

        .action-chip.fading-out {
            animation: fadeOutAndSlide 0.5s ease-out forwards;
        }

        @keyframes floatOnWater {
            0% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-8px);
            }

            /* Moves up slightly */
            100% {
                transform: translateY(0);
            }

            /* Comes back down */
        }

        .floating-logo {
            /* 4s = speed (slow), ease-in-out = smooth turning points */
            animation: floatOnWater 4s ease-in-out infinite;
        }


        @keyframes fadeOutAndSlide {
            0% {
                opacity: 1;
                transform: translateY(0);
            }

            100% {
                opacity: 0;
                transform: translateY(-10px);
            }
        }

        .collapsible-module .module-content {
            padding: 15px;
        }

        .collapsible-module .table-container {
            max-height: 400px;
            overflow-y: auto;
        }

        /* Empty table containers should collapse */
        .collapsible-module .table-container:has(tbody:empty) {
            display: none;
        }

        /* Also hide the table if tbody has no content */
        .table-container:has(tbody:empty),
        .table-container:has(table:empty) {
            display: none;
        }


        .floating-history-btn {
            float: right;
            margin-bottom: 10px;
            margin-left: 10px;
        }

        #non-admin-profile-pic-container,
        #admin-profile-pic-container {
            cursor: default !important;
            /* Forces default cursor */
        }

        /* Dark Mode adjustments */
        .dark-mode .collapsible-module {
            background: #1e1e1e;
            border-color: #444;
        }

        .dark-mode .collapsible-module.expanded {
            border-color: #444;
        }

        .dark-mode .action-chip {
            background: #2c2c2e;
            border-color: #444;
            color: #e0e0e0;
        }

        .dark-mode .action-chip:hover {
            background: #333;
            border-color: var(--primary-light);
        }

        .dark-mode .action-chip.has-items {
            background: #4a2c0f;
            /* Dark Orange */
            color: #ffcc80;
            border-color: #ffb74d;
        }

        .dark-mode .action-chip.active {
            background: #3e2723;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        .email-pill {
            background-color: #e3f2fd;
            color: var(--primary-color);
            border: 1px solid #bbdefb;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 0.85em;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            animation: fadeIn 0.2s ease-out;
        }

        .email-pill i {
            cursor: pointer;
            opacity: 0.6;
            transition: opacity 0.2s;
        }

        .email-pill i:hover {
            opacity: 1;
            color: var(--danger-color);
        }

        .dark-mode .email-pill {
            background-color: rgba(57, 73, 171, 0.2);
            border-color: var(--primary-color);
            color: #c5cae9;
        }

        /* --- Modern Course Editor Inputs --- */
        .input-with-icon {
            position: relative;
            flex: 1;
            /* Allow flex to control width */
            min-width: 0;
            /* Prevent overflow in flex containers */
        }

        .input-with-icon i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            pointer-events: none;
            z-index: 2;
        }

        .input-with-icon input {
            padding-left: 35px !important;
            width: 100%;
            box-sizing: border-box;
        }

        .admin-input-wrapper {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            margin-bottom: 10px;
        }

        .admin-pill {
            background: #e8eaf6;
            color: var(--primary-color);
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 600;
        }

        .dark-mode .settings-modal-header {
            border-bottom-color: rgba(255, 255, 255, 0.1);
            background-color: rgba(255, 255, 255, 0.03);
        }

        .dark-mode .settings-search-input {
            background-color: #2c2c2e;
            border-color: #444;
            color: white;
        }

        .dark-mode .settings-search-input:focus {
            border-color: var(--primary-color);
        }

        .dark-mode .modern-course-card {
            border-color: #444;
            background: #252525;
        }

        .dark-mode .card-footer {
            background: rgba(255, 255, 255, 0.03);
            border-top-color: #444;
        }

        .dark-mode .card-eis-badge {
            background: #333;
            color: #aaa;
        }

        .dark-mode .card-course-name {
            color: #fff;
        }

        .dark-mode .admin-pill {
            background: rgba(57, 73, 171, 0.3);
            color: #9fa8da;
        }

        .course-card {
            background: var(--background-color);
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 15px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
        }

        .course-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
            border-color: var(--primary-color);
        }

        .course-card-header {
            font-weight: 700;
            color: var(--primary-color);
            margin-bottom: 5px;
            display: flex;
            justify-content: space-between;
        }

        .course-card-detail {
            font-size: 0.85em;
            color: var(--text-color);
            opacity: 0.8;
            margin-bottom: 2px;
        }

        .course-card-admins {
            margin-top: 10px;
            font-size: 0.75em;
            background: rgba(0, 0, 0, 0.05);
            padding: 5px;
            border-radius: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .add-course-card {
            border: 2px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #888;
            font-weight: 600;
            min-height: 120px;
        }

        .add-course-card:hover {
            border-color: var(--success-color);
            color: var(--success-color);
            background-color: #f0fdf4;
        }

        /* Dark Mode */
        .dark-mode .course-card {
            background: #2c2c2e;
            border-color: #444;
        }

        .dark-mode .course-card:hover {
            border-color: var(--primary-light);
        }

        .dark-mode .course-card-admins {
            background: rgba(255, 255, 255, 0.1);
        }

        .dark-mode .add-course-card {
            border-color: #555;
            color: #aaa;
        }

        .dark-mode .add-course-card:hover {
            background-color: rgba(27, 94, 32, 0.2);
        }

        .admin-only {
            display: none !important;
        }

        #user-avatar {
            cursor: default;
        }

        body.is-admin .admin-only {
            display: block !important;
        }

        body.is-admin .admin-only.inline-block {
            display: inline-block !important;
        }

        body.is-admin th.admin-only,
        body.is-admin td.admin-only {
            display: table-cell !important;
        }

        .content-hidden {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease-in;
            /* Add a fade-in transition */
        }

        .app-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f4f4f4;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 9999;
        }

        .loading-spinner {
            border: 5px solid rgba(57, 73, 171, 0.2);
            border-top: 5px solid #3949ab;
            border-radius: 50%;
            width: 50px;
            height: 50px;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }

        /* Sync status styles */
        .sync-status {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 0.9em;
            padding: 5px 10px;
            border-radius: 15px;
            background-color: rgba(0, 0, 0, 0.05);
            /* Roundness 50 makes corners soft, Width 90 saves space */
            font-variation-settings: "ROND" 50, "wdth" 90, "wght" 500;
        }

        .sync-status.online i {
            color: var(--success-color);
        }

        .sync-status.offline i {
            color: var(--warning-color);
        }

        .sync-status.syncing i {
            color: var(--info-color);
        }

        .sync-status.error i {
            color: var(--danger-color);
        }

        .sync-status.waiting i {
            color: var(--secondary-color);
        }

        .sync-status.success i {
            color: var(--success-color);
        }

        @keyframes dialog-fade-out {
            from {
                transform: scale(1);
                opacity: 1;
            }

            to {
                transform: scale(0.95);
                opacity: 0;
            }
        }

        .dialog.dialog-fade-out {
            animation: dialog-fade-out 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
        }

        .dialog-backdrop.backdrop-fade-out {
            animation: backdrop-fade-out 0.3s ease forwards;
        }

        /* --- Center Loader in Global Settings --- */
        .dialog-loader-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
            width: 100%;
            grid-column: 1 / -1;
        }


        .dialog-disclaimer {
            font-size: 0.9em;
            padding: 10px 12px;
            background-color: rgba(251, 140, 0, 0.1);
            /* Light orange */
            border-left: 3px solid var(--warning-color);
            color: var(--text-color);
            opacity: 0.9;
            margin-bottom: 20px;
            line-height: 1.5;
            border-radius: 0 4px 4px 0;
            /* Slant -10 (Max italic), slightly narrower */
            font-variation-settings: "slnt" -10, "wdth" 95, "wght" 450;
        }

        /* Container for time pills in dialogs */
        .dialog-time-pill-container {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
            padding: 10px;
            background-color: var(--background-color);
            border: 1px solid #ccc;
            border-radius: 8px;
            min-height: 40px;
        }

        .dark-mode .dialog-time-pill-container {
            background-color: #333;
            border-color: #555;
        }

        @keyframes backdrop-fade-out {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        @keyframes backdrop-fade-in {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .spin-animation {
            animation: spin 1s linear infinite;
        }

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

            100% {
                transform: rotate(360deg);
            }
        }

        html,
        body {
            height: 100%;
            /* ADD THIS */
        }

        html {
            background-color: var(--background-color);
            transition: background-color 0.4s ease;
        }

        body {
            margin: 0;
            padding: 0;
            font-family: 'Google Sans Flex', sans-serif;
            /* Enable automatic optical sizing (optimises for text vs display) */
            font-optical-sizing: auto;
            /* Base Settings: Standard Width (100), No Slant (0), Normal Grade (0), No Rounding (0) */
            font-variation-settings: "wdth" 100, "slnt" 0, "GRAD" 0, "ROND" 0;

            background-color: transparent;
            /* Make it transparent */
            color: var(--text-color);
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-family: 'Google Sans Flex', sans-serif;
            font-variation-settings: "wdth" 90, "slnt" 0, "GRAD" 0, "ROND" 0;
            letter-spacing: normal;
        }

        body,
        .module,
        .app-header,
        .dialog,
        .filter-input,
        .sort-dropdown,
        .form-control,
        .logs-table th,
        .database-table th,
        .course-button,
        .not-signed-in-message {
            transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
        }

        .clickable-request-row {
            cursor: pointer;
            transition: background-color 0.2s ease-out;
        }

        .clickable-request-row:hover {
            background-color: #f5f5f5;
        }

        .dark-mode .clickable-request-row:hover {
            background-color: #333;
        }

        /* For links acting as buttons */
        a.btn-icon,
        a.btn-sm {
            text-decoration: none !important;
            /* Remove underline */
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        /* "File Chip" style for Dialogs */
        .btn-attachment {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background-color: var(--background-color);
            color: var(--text-color);
            border: 1px solid #ccc;
            border-radius: 50px;
            /* Pill shape */
            text-decoration: none !important;
            font-size: 0.9em;
            font-weight: 500;
            transition: all 0.2s ease;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .btn-attachment:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
            background-color: rgba(57, 73, 171, 0.05);
            transform: translateY(-1px);
        }

        .dark-mode .btn-attachment {
            background-color: #2c2c2e;
            border-color: #555;
            color: #e0e0e0;
        }

        .container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            perspective: 800px;
        }

        .app-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 30px;
            border-radius: 20px;
            margin-bottom: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            -webkit-user-select: none;
            /* Safari, Chrome, Opera, Edge */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* Internet Explorer/Edge */
            user-select: none;
            /* Standard property */
        }

        h1 {
            margin: 0 0 10px 0;
            font-weight: 700;
            font-size: 2.0em;
            display: flex;
            align-items: center;
        }

        h1 i {
            margin-right: 10px;
        }

        h2 {
            margin: 0 0 2px 0;
            font-weight: 400;
            font-size: 1.0em;
        }

        .app-info {
            display: flex;
            justify-content: left;
            flex-wrap: wrap;
            margin-top: 15px;
            margin-bottom: 5px;
            gap: 3px;
        }

        .info-item {
            background-color: rgba(255, 255, 255, 0.1);
            padding: 7px 15px;
            border-radius: 4px;
            font-size: 0.9em;
            vertical-align: middle;
            line-height: 30px;
            /* Adjust this to match your text height */
        }

        .info-item:first-child {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
        }

        .info-item:last-child {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
        }

        .tabs {
            display: none;
            /* Hidden by default */
            margin-top: 20px;
        }

        .tabs.tabs-ready {
            display: flex;
            margin-top: 20px;
            gap: 1px;
            /* Add this to create space between the tabs */
        }

        .tab {
            flex-grow: 1;
            padding: 17px 20px;
            text-align: center;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease-out;
            user-select: none;
            /* Standard property */
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid transparent;
            background: transparent;
            color: #eff2ff;
            border-radius: 8px;
        }

        /* Hover state for an INACTIVE tab */
        .tab:hover:not(.active),
        .tab.active:hover {
            border-color: var(--primary-color);
            font-variation-settings: "wdth" 100, "GRAD" 100, "ROND" 0, "slnt" 0;
            font-weight: 500;
        }

        /* "Pushed-in" state while being clicked */
        .tab:active:not(.active) {
            transform: scale(0.96);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
            background-color: #000c503b;
        }

        .tab.active {
            background-color: #000c503b;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
            transform: scale(0.96);
        }

        .tab:first-child {
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }

        .tab:last-child {
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }

        .tab-content {
            /* Don't use display: none, we'll control visibility with opacity */
            opacity: 0;
            visibility: hidden;
            height: 0;
            overflow: hidden;
            transition: opacity 0.3s ease-in-out;
        }

        .tab-content.active {
            opacity: 1;
            visibility: visible;
            height: auto;
            overflow: visible;
        }

        .actions-cell-content {
            display: flex;
            /* This will now work correctly */
            justify-content: flex-end;
            /* Align buttons to the right */
            align-items: center;
            gap: 2px;
        }

        /* Use a lighter neutral grey for icons in dark mode */
        .dark-mode .actions-cell .btn-icon i {
            color: var(--primary-light);
        }

        /* Add the background highlight for dark mode hover */
        .dark-mode .actions-cell .btn-icon:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        /* Use lighter theme colours for the icon hover in dark mode */
        .dark-mode .actions-cell .btn-icon.btn-green:hover i {
            color: var(--success-color-light);
        }

        .dark-mode .actions-cell .btn-icon.btn-red:hover i {
            color: var(--danger-color-light);
        }

        .dark-mode .actions-cell .btn-icon.btn-blue:hover i {
            color: var(--info-color-light);
        }

        /* Style for disabled/uneditable fields */
        input:disabled,
        select:disabled {
            background-color: #e9ecef !important;
            opacity: 0.7;
            cursor: not-allowed;
        }

        .dark-mode input:disabled,
        .dark-mode select:disabled {
            background-color: #3a3a3c !important;
        }

        .uid-button-group:empty {
            display: none;
        }

        .uid-badge {
            background-color: #e0e0e042;
            color: #333;
            border-radius: 4px;
            padding: 8px 5px;
            font-family: monospace;
            font-size: 0.9em;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            line-height: 1;
            min-width: 80px;
            user-select: none;
            /* Width 75 (Condensed), Weight 600 (SemiBold) */
            font-variation-settings: "wdth" 75, "wght" 600, "GRAD" 0;
            letter-spacing: 0.02em;
            /* Add slight spacing for legibility */
        }

        .dark-mode .uid-badge {
            background-color: #55555569;
            color: #f0f0f0;
        }

        .uid-button-group {
            display: flex;
            gap: 5px;
            flex-shrink: 0;
        }

        .dialog .form-group.uid-edit-row {
            flex-wrap: nowrap;
        }

        .form-row {
            display: flex;
            flex-wrap: wrap;
            /* Allow wrapping */
            gap: 12px;
            /* Spacing between items */
            margin-bottom: 12px;
        }

        .form-row .form-group {
            /* Flex Shorthand: grow | shrink | basis 
               1 = Grow to fill space
               1 = Shrink if needed
               0 = Start calculation from 0 width
            */
            flex: 1 1 0;

            /* The "Break Point": If item gets smaller than this, it wraps */
            min-width: 160px;

            margin-bottom: 0;
            /* Handled by row gap */
        }

        .form-group.full-width {
            flex: 1 1 100%;
            min-width: 100%;
        }

        /* Make labels inside the row simpler */
        .form-row .form-group label {
            flex-basis: auto;
            text-align: left;
            display: block;
            margin-bottom: 5px;
        }

        /* ===== Course button styles ===== */
        .course-buttons-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: 6px 4px;
            overflow-x: visible;
            margin-bottom: 20px;
        }

        .course-button {
            display: flex;
            background-color: var(--card-background);
            color: var(--primary-color);
            padding: 15px 20px;
            border-radius: var(--border-radius-sm);
            text-decoration: none;
            font-size: 0.95em;
            font-weight: 600;
            transition: all var(--transition-speed) var(--transition-curve);
            box-shadow: var(--shadow-sm);
            border: 1px solid transparent;
            /* Changed to 1px for subtler look */
            cursor: pointer;
            flex-shrink: 0;
            flex-grow: 1;
            align-items: center;
            justify-content: center;
            text-align: center;
            user-select: none;
            position: relative;
            overflow: hidden;
        }

        .course-button:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
            border-color: var(--primary-light);
        }

        /* --- Bulk Select Mode --- */
        .bulk-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--primary-color);
            vertical-align: middle;
        }

        .select-column {
            display: none;
            width: 40px;
            text-align: center;
        }

        .logs-table.bulk-mode .select-column {
            display: table-cell;
        }

        .logs-table.bulk-mode .uid-column {
            display: none !important;
        }

        /* --- Floating Bulk Actions Bar --- */
        .bulk-actions-bar {
            display: none;
            position: fixed;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(150%);

            background: var(--primary-color);
            color: white;
            border-radius: 50px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            align-items: center;
            gap: 20px;
            z-index: 2147483647;
            min-width: 300px;
            max-width: 90%;
            /* Prevent hitting edges */
            border: 1px solid rgba(255, 255, 255, 0.2);
            transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
            width: auto;
            padding: 10px 20px;
            /* Reduce padding slightly */
            justify-content: space-between;
        }

        .bulk-actions-bar.visible {
            display: flex;
            /* Slide up into view */
            transform: translateX(-50%) translateY(0) !important;
        }

        .bulk-actions-group {
            display: flex;
            gap: 10px;
        }

        .bulk-actions-bar .btn-icon {
            background-color: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            cursor: pointer;
        }

        .bulk-actions-bar .btn-icon:hover {
            background-color: white;
            color: var(--primary-color);
            transform: scale(1.1);
        }

        .bulk-count-badge {
            background: white;
            color: var(--primary-color);
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 0.9em;
            font-weight: 800;
        }

        /* Checkbox inside Date Separator */
        .day-separator-checkbox {
            margin-right: 10px;
            width: 18px;
            height: 18px;
            cursor: pointer;
            vertical-align: middle;
            accent-color: #fff;
            /* White check on the blue background */
        }

        .eis-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-bottom: 15px;
        }

        .eis-section-label {
            grid-column: 1 / -1;
            font-size: 0.75em;
            text-transform: uppercase;
            color: var(--primary-color);
            letter-spacing: 1px;
            font-weight: 700;
            border-bottom: 1px solid #e0e0e0;
            padding-bottom: 4px;
            margin-top: 10px;
            margin-bottom: 5px;
        }

        .eis-full-width {
            grid-column: 1 / -1;
        }

        /* Stepper for Hours */
        .stepper-wrapper {
            display: flex;
            align-items: center;
            border: 1px solid #ccc;
            border-radius: 8px;
            overflow: hidden;
        }

        .stepper-btn {
            background: #f5f5f5;
            border: none;
            width: 40px;
            height: 42px;
            font-size: 1.2em;
            cursor: pointer;
            color: var(--primary-color);
        }

        .stepper-btn:hover {
            background: #e0e0e0;
        }

        .stepper-input {
            flex: 1;
            text-align: center;
            border: none;
            border-left: 1px solid #e0e0e0;
            border-right: 1px solid #e0e0e0;
            font-size: 1.1em;
            font-weight: bold;
            height: 42px;
        }

        /* --- Feature 4: Skeleton Loading --- */
        .skeleton-row td {
            padding: 15px;
            border-top: 1px solid #eee;
        }

        .skeleton-bar {
            height: 12px;
            background: #e0e0e0;
            border-radius: 4px;
            width: 100%;
            display: block;
            animation: shimmer 1.5s infinite linear;
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
        }

        .skeleton-bar.short {
            width: 40%;
        }

        .skeleton-bar.medium {
            width: 70%;
        }

        /* --- Feature 5: Form Sections & Required Fields --- */
        .form-section-title {
            font-size: 0.85em;
            text-transform: uppercase;
            color: var(--primary-color);
            font-weight: 700;
            letter-spacing: 1px;
            margin-top: 20px;
            margin-bottom: 15px;
            border-bottom: 2px solid rgba(0, 0, 0, 0.05);
            padding-bottom: 5px;
            width: 100%;
        }

        .form-group.required label::after {
            content: " *";
            color: var(--danger-color);
            font-weight: bold;
        }

        .course-button:first-child {
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }

        .course-button:last-child {
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }

        .course-button:hover {
            transform: none;
            /* Remove scale */
            border-color: var(--primary-color);
            /* Add a subtle border */
            font-variation-settings: "wdth" 100, "GRAD" 100, "ROND" 0, "slnt" 0;
            font-weight: 500;
        }

        .course-button:active {
            background-color: #e8eaf6;
            color: #2c3a8e;
            box-shadow:
                inset 0 3px 5px rgba(0, 0, 0, 0.3),
                /* inside top shadow */
                inset 0 -1px 2px rgba(255, 255, 255, 0.25);
            /* bottom light rim */
            transform: scale(0.96);
            border-color: var(--primary-color);
        }

        .course-button.active {
            background-color: #e8eaf6;
            color: #2c3a8e;
            transform: scale(0.98);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
            border-color: transparent;
        }

        .course-button.active:hover {
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
            border-color: var(--primary-dark);
        }

        .dark-mode .course-button.active,
        .dark-mode .course-button.active:hover {
            background-color: #2c3e50;
            /* A matching dark "pressed-in" background */
            color: #e0e0e0;
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
        }

        .module {
            background-color: #fff;
            border-radius: 20px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
        }

        .module-header {
            background-color: var(--primary-color);
            color: white;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-right: 20px;
            padding-left: 20px;
            font-weight: 500;
            display: flex;
            justify-content: space-between;
            align-items: center;
            -webkit-user-select: none;
            /* Safari, Chrome, Opera, Edge */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* Internet Explorer/Edge */
            user-select: none;
            /* Standard property */
            flex-wrap: wrap;
            position: relative;
        }

        .module-title {
            font-size: 1.1em;
            display: flex;
            align-items: center;
        }

        .module-title i {
            margin-right: 10px;
        }

        .module-content {
            padding: 15px;
        }

        .module-header-actions {
            margin-left: auto;
            /* This pushes it to the right */
            display: flex;
            align-items: center;
        }

        .refresh-btn {
            width: 30px;
            height: 30px;
            background-color: transparent;
            border-color: transparent;
            box-shadow: none;
            color: white;
        }

        .refresh-btn:hover {
            border-color: var(--info-color);
            box-shadow: none;
        }

        .refresh-btn i.fa-spin {
            animation: spin 1s linear infinite;
        }

        #absences-tbody tr {
            cursor: pointer;
            transition: background-color 0.2s ease-out;
        }

        #absences-tbody tr:hover {
            background-color: #f5f5f5;
        }

        .dark-mode #absences-tbody tr:hover {
            background-color: #333;
        }

        .dark-mode .refresh-btn {
            color: white;
        }

        .not-signed-in-message {
            text-align: center;
            padding: 20px;
            margin-top: 15px;
            border-radius: 15px;
            background-color: rgba(57, 73, 171, 0.1);
            color: #333;
        }

        .scan-buttons {
            display: flex;
            justify-content: center;
            margin-top: 15px;
            margin-bottom: 25px;
            width: 100%;
            padding: 0 15px;
            box-sizing: border-box;
        }

        #scanner-module {
            display: none;
        }

        .big-scan-button {
            display: inline-flex;
            gap: 10px;
            background-color: var(--primary-color);
            color: var(--text-light);
            padding: 26px 32px;
            border-radius: 16px;
            text-decoration: none;
            font-size: 1.1em;
            transition: all 0.2s ease-out;
            text-align: center;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 12px rgba(92, 107, 192, 0.3);
            border: 0;
            cursor: pointer;
            user-select: none;
            font-weight: 600;
            letter-spacing: 0.02em;
            width: 100%;
        }

        .big-scan-button i {
            font-size: 1.5em;
        }

        /* Pushed-down effect when ANY state is clicked */
        .big-scan-button:active {
            transform: scale(0.96);
            background-color: var(--primary-dark);
            box-shadow: 0 2px 6px rgba(92, 107, 192, 0.2);
        }

        .big-scan-button:hover {
            box-shadow: 0 6px 16px rgba(92, 107, 192, 0.4);
            transform: translateY(-1px);
        }

        /* The "Stop Scanning" state */
        .big-scan-button.is-scanning {
            background-color: var(--success-color);
            box-shadow: 0 4px 12px rgba(76, 175, 80, 0.35);
            animation: pulse-green 2s infinite;
        }

        .big-scan-button.is-scanning:hover {
            box-shadow: 0 6px 16px rgba(76, 175, 80, 0.45);
        }

        @keyframes pulse-green {
            0% {
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(76, 175, 80, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
            }
        }

        /* Keep the click effect even when in the "Stop" state */
        .big-scan-button.is-scanning:active {
            background-color: var(--warning-color);
            transform: scale(0.96);
            filter: brightness(90%);
            animation: none;
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        button {
            display: inline-block;
            background-color: var(--primary-color);
            color: var(--text-light);
            padding: 12px 16px;
            border-radius: 18px;
            text-decoration: none;
            font-size: 0.9em;
            text-align: center;
            cursor: pointer;
            user-select: none;
            border: 2px solid transparent;
            /* Prevents layout shift on hover */
            box-shadow: 0 3px 5px rgba(0, 0, 0, 0.12);
            /* Standard shadow */
            transition: background-color 0.25s ease-out,
                box-shadow 0.3s ease-out,
                border-color 0.3s ease-out,
                transform 0.15s ease-out;
            /* Keep transform snappy */
        }

        button,
        .course-button,
        .tab {
            -webkit-tap-highlight-color: transparent;
        }

        button:hover {
            border-color: var(--primary-light);
            /* Glowing border effect */
            background-color: var(--primary-color);
            /* Keep background color the same */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            /* Slightly lift the button */
            transform: none;
            /* REMOVE the old scale effect */
            font-variation-settings: "wdth" 100, "GRAD" 100, "ROND" 0, "slnt" 0;
            font-weight: 500;
        }

        button:active {
            transform: scale(0.96);
            box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
            filter: brightness(90%);
        }

        button.active {
            background-color: var(--primary-dark);
            /* Make it slightly darker */
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
            /* Pushed-in shadow */
            transform: scale(0.96);
            /* Keep it slightly pushed in */
            border-color: transparent;
            /* Ensure no hover border shows */
        }

        /* Make sure the active state doesn't change on hover */
        button.active:hover {
            background-color: var(--primary-dark);
            border-color: transparent;
        }

        .btn-icon {
            width: 44px;
            /* Fixed width */
            height: 44px;
            /* Fixed height, making it a square */
            padding: 0;
            /* Remove all padding */
            border-radius: 50%;
            /* This makes the square a perfect circle */
            /* Use flexbox to perfectly center the icon inside */
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .btn-green {
            background-color: #43a047;
        }

        .btn-green:hover {
            background-color: #43a047;
            /* Keep original color */
            border-color: var(--success-color-light);
            /* Add this */
        }


        .btn-orange {
            background-color: #fb8c00;
        }

        .btn-orange:hover {
            background-color: #fb8c00;
            border-color: var(--warning-color-light);
            /* Add this */
        }

        .btn-blue {
            background-color: #2196F3;
        }

        .btn-blue:hover {
            background-color: #2196F3;
            border-color: var(--info-color-light);
            /* Add this */
        }

        .btn-red {
            background-color: #f44336;
        }

        .btn-red:hover {
            background-color: #f44336;
            border-color: var(--danger-color-light);
            /* Add this */
        }

        .btn-purple {
            background-color: #9c27b0;
        }

        .btn-purple:hover {
            background-color: var(--purple-color);
            border-color: var(--purple-color-light);
            /* Add this */
        }

        .btn-sm {
            padding: 8px 10px 8px 10px;
            font-size: 0.85em;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
                transform: translateY(0);
            }

            to {
                opacity: 0;
                transform: translateY(-20px);
            }
        }

        /* --- Themed Scrollbar Styles --- */
        ::-webkit-scrollbar {
            width: 10px;
        }

        ::-webkit-scrollbar-track {
            background: var(--background-color);
        }

        ::-webkit-scrollbar-thumb {
            background-color: #ccc;
            border-radius: 10px;
            border: 2px solid var(--background-color);
        }

        ::-webkit-scrollbar-thumb:hover {
            background-color: #aaa;
        }

        .dark-mode ::-webkit-scrollbar-thumb {
            background-color: #444;
        }

        .dark-mode ::-webkit-scrollbar-thumb:hover {
            background-color: #666;
        }

        .dark-mode body {
            /* Base Grade of 25 adds just a hint of thickness */
            font-variation-settings: "wdth" 100, "GRAD" 25, "slnt" 0;
        }

        /* Increase heading grade in dark mode too */
        .dark-mode h1,
        .dark-mode h2 {
            font-variation-settings: "wdth" 100, "GRAD" 50, "slnt" 0;
        }

        #admin-welcome-message {
            text-align: center;
            padding: 20px;
            margin: 20px 0;
            border-radius: 15px;
            background-color: rgba(57, 73, 171, 0.1);
            color: #333;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            animation: fadeIn 0.5s ease-in-out;
        }

        #admin-welcome-message h2 {
            font-size: 1.8em;
            margin-bottom: 10px;
        }

        #admin-welcome-message h3 {
            font-size: 1.3em;
            margin-top: 5px;
        }

        /* --- Admin View Grid Layout --- */
        #admin-views-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
            gap: 20px;
            margin-bottom: 0px;
            width: 100%;
        }

        /* Fix for when only one item is visible to prevent it stretching strangely */
        #admin-views-container:has(> .collapsible-module.expanded:only-child),
        #admin-views-container:has(> .collapsible-module:only-child) {
            grid-template-columns: 1fr;
        }

        .comparison-grid {
            display: grid;
            grid-template-columns: 1fr auto;
            /* Column for data, column for action */
            gap: 15px;
            align-items: center;
        }

        /* --- Student Profile Revamp --- */
        .profile-header-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        .profile-avatar-large {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border: 3px solid var(--card-background);
        }

        .profile-name-large {
            margin: 0;
            font-size: 1.3em;
            font-weight: 700;
            color: var(--text-color);
        }

        .profile-email-large {
            margin: 0;
            font-size: 0.9em;
            opacity: 0.7;
            color: var(--text-color);
        }

        /* UID List styling */
        .profile-uid-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            justify-content: center;
            margin-bottom: 20px;
            list-style: none;
            padding: 0;
        }

        .profile-uid-badge {
            font-family: monospace;
            background-color: #e8eaf6;
            color: var(--primary-color);
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 1em;
            border: 1px solid #c5cae9;
            letter-spacing: 1px;
        }

        /* --- EIS Export Custom Hours Toggle --- */
        .custom-hours-container {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 10px;
            background: #fff;
            padding: 8px;
            border-radius: 6px;
            border: 1px solid #ddd;
            transition: background-color 0.3s, border-color 0.3s;
        }

        .dark-mode .custom-hours-container {
            background: #2c2c2e;
            /* Dark grey */
            border-color: #444;
            color: #e0e0e0;
        }

        /* Request Cards */
        .req-card {
            background-color: var(--card-background);
            border: 1px solid #eee;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;
            position: relative;
            transition: transform 0.2s, box-shadow 0.2s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
            border-left: 4px solid transparent;
            /* Color indicator */
        }

        .req-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
        }

        /* Status Colors */
        .req-card.status-approved {
            border-left-color: var(--success-color);
        }

        .req-card.status-rejected {
            border-left-color: var(--danger-color);
        }

        .req-card.status-pending {
            border-left-color: var(--warning-color);
        }

        .req-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .req-course {
            font-weight: 700;
            font-size: 1em;
            color: var(--text-color);
        }

        .req-status-pill {
            font-size: 0.75em;
            font-weight: 700;
            text-transform: uppercase;
            padding: 2px 8px;
            border-radius: 4px;
        }

        .status-approved .req-status-pill {
            color: var(--success-color);
            background: #e8f5e9;
        }

        .status-rejected .req-status-pill {
            color: var(--danger-color);
            background: #ffebee;
        }

        .status-pending .req-status-pill {
            color: var(--warning-color);
            background: #fff3e0;
        }

        .req-details {
            display: flex;
            gap: 15px;
            font-size: 0.9em;
            opacity: 0.8;
            margin-bottom: 8px;
        }

        .req-note {
            font-size: 0.85em;
            background: #f5f5f5;
            padding: 8px;
            border-radius: 6px;
            color: var(--text-color);
            margin-top: 8px;
        }

        /* Dark Mode Overrides */
        .dark-mode .profile-header-section {
            border-bottom-color: #444;
        }

        .dark-mode .profile-uid-badge {
            background-color: #2c2c2e;
            border-color: #444;
            color: #fff;
        }

        .dark-mode .req-card {
            border-color: #444;
            background-color: #252525;
        }

        .dark-mode .req-note {
            background-color: #333;
        }

        .dark-mode .status-approved .req-status-pill {
            background: #1b5e20;
            color: #a5d6a7;
        }

        .dark-mode .status-rejected .req-status-pill {
            background: #b71c1c;
            color: #ef9a9a;
        }

        .dark-mode .status-pending .req-status-pill {
            background: #e65100;
            color: #ffcc80;
        }

        .field-action {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 5px;
            font-size: 0.9em;
        }

        .field-action label {
            font-weight: 500;
            cursor: pointer;
        }

        .field-action input[type="checkbox"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .field-action select {
            padding: 5px 8px;
            border-radius: 6px;
            border: 1px solid #ccc;
        }

        .dark-mode .field-action select {
            background-color: #333;
            border-color: #555;
            color: #f0f0f0;
        }

        /* This hides the new button by default */
        #request-permission-btn {
            display: none !important;
        }

        /* This shows it ONLY for signed-in non-admins */
        body:not(.is-admin) #user-container #request-permission-btn {
            display: inline-flex !important;
            /* Shown only for non-admins */
            align-items: center;
            gap: 8px;
            padding-left: 14px;
            padding-right: 14px;
        }

        body:not(.is-admin) #session-controls {
            display: none !important;
        }

        .in-page-notifications {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 20000;
            width: 350px;
            max-width: 70%;
            pointer-events: none;
            /* This allows clicks to pass through */
        }

        .in-page-notification {
            background-color: white;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            animation: slide-in 0.3s ease-out forwards;
            overflow: hidden;
            display: flex;
            align-items: center;
            opacity: 1;
            transition: transform 0.3s ease-in, opacity 0.3s ease-in;
            pointer-events: none;
            /* Allow clicks to pass through notification body */
        }

        .in-page-notification.removing {
            opacity: 0;
            transform: translateX(100%);
        }

        @keyframes slide-in {
            from {
                transform: translateX(100%);
                opacity: 0;
            }

            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .in-page-notification i {
            margin-right: 10px;
            font-size: 1.2em;
        }

        /* Make icon properly aligned */
        .in-page-notification i:first-child {
            margin-top: 1px;
            /* Fine-tune vertical alignment */
        }

        .in-page-notification-info {
            background-color: #e3f2fd;
            color: #0d47a1;
        }

        .in-page-notification-warning {
            background-color: #fff3e0;
            color: #e65100;
        }

        .in-page-notification-error {
            background-color: #ffebee;
            color: #b71c1c;
        }

        .in-page-notification-success {
            background-color: #e8f5e9;
            color: #1b5e20;
        }

        .in-page-notification-delete {
            background-color: #fbe9e7;
            /* soft salmon */
            color: #bf360c;
            /* muted deep red-orange */
        }

        .filter-container {
            display: flex;
            gap: 5px;
            align-items: center;
            flex-wrap: nowrap;
            margin-bottom: 10px;
        }

        .filter-input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 18px 8px 8px 18px;
            font-size: 0.9em;
            box-sizing: border-box;
            min-width: 200px;
        }

        .filter-input,
        .sort-dropdown {
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .filter-input:hover,
        .sort-dropdown:hover,
        .filter-input:focus,
        .sort-dropdown:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(57, 73, 171, 0.1);
            outline: none;
        }

        body:not(.is-admin) .sync-auth-container {
            justify-content: flex-end;
        }

        .sort-dropdown {
            padding: 10px 15px;
            border: 1px solid #e0e0e0;
            border-radius: 8px 18px 18px 8px;
            font-size: 0.9em;
            background-color: white;
            cursor: pointer;
        }

        .logs-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
            gap: 15px;
            margin-bottom: 15px;
        }

        .logs-count {
            font-size: 0.9em;
            /* Make text smaller */
            white-space: nowrap;
            /* Prevent wrapping */
            flex-shrink: 0;
            /* Don't let it shrink */
        }

        .logs-actions {
            flex-basis: auto;
            /* Allow it to take only the space it needs */
            justify-content: flex-end;
        }

        .logs-actions,
        .database-actions {
            display: flex;
            flex-wrap: nowrap;
            /* Forces buttons into a single row */
            gap: 2px;
        }

        .logs-actions .btn-icon,
        .database-actions .btn-icon,
        .logs-actions .btn,
        .database-actions .btn,
        .logs-table .day-separator .btn-icon {
            border-radius: 4px;
            /* Make them square by default */
            width: 32px;
            height: 32px;
            padding: 0;
            font-size: 0.85em;
        }

        .logs-table tr.day-separator .btn-icon:active {
            transform: scale(0.96);
            /* We remove translateY because the button is no longer absolutely positioned */
            filter: brightness(90%);
        }

        .logs-table tr.day-separator .btn-icon.active {
            transform: translateY(-50%) scale(0.90);
        }

        /* Round the LEFT corners of the FIRST button in each group */
        .logs-actions .btn-icon:first-child,
        .database-actions .btn-icon:first-child,
        .logs-actions .btn:first-child,
        .database-actions .btn:first-child {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
        }

        /* Round the RIGHT corners of the LAST button in each group */
        .logs-actions .btn-icon:last-child,
        .database-actions .btn-icon:last-child,
        .logs-actions .btn:last-child,
        .database-actions .btn:last-child {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
        }

        .logs-table tr.day-separator .btn-icon:first-of-type {
            /* Use first-of-type for robustness */
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
        }

        /* 4. Round the RIGHT corners of the LAST button */
        .logs-table tr.day-separator .btn-icon:last-of-type {
            /* Use last-of-type for robustness */
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
        }

        /* Modern Table responsiveness fixes */
        .table-container {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .logs-table,
        .database-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            min-width: 600px;
            font-family: 'Google Sans Flex', sans-serif;
        }

        /* Modern Day Separator Row */
        .logs-table tr.day-separator td {
            position: relative;
            padding: 12px 16px;
            background: linear-gradient(to right, rgba(92, 107, 192, 0.06), rgba(92, 107, 192, 0.02));
            border-top: none;
            border-bottom: none;
        }

        .dark-mode .logs-table tr.day-separator td {
            background: linear-gradient(to right, rgba(92, 107, 192, 0.12), rgba(92, 107, 192, 0.04));
        }

        /* The wrapper div that was missing its style */
        .day-separator-content {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            gap: 12px;
            position: relative;
        }

        .day-separator-actions {
            display: flex;
            align-items: center;
            gap: 4px;
            position: absolute;
            right: 0;
        }

        .day-separator-date {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 14px;
            background: var(--primary-color);
            color: white;
            border-radius: 20px;
            font-size: 0.85em;
            font-weight: 600;
            letter-spacing: 0.02em;
            box-shadow: 0 2px 6px rgba(92, 107, 192, 0.25);
        }

        .day-separator-date i {
            font-size: 0.9em;
        }

        .day-separator-checkbox {
            width: 18px;
            height: 18px;
            accent-color: var(--primary-color);
            position: absolute;
            left: 0;
        }

        /* Style ALL buttons inside the container */
        .day-separator-actions button {
            border-radius: 4px;
            /* Default to square corners */
        }

        /* Round the LEFT corners of the FIRST button */
        .day-separator-actions button:first-child {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
        }

        /* Round the RIGHT corners of the LAST button */
        .day-separator-actions button:last-child {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
        }

        .day-separator-actions .eis-day-btn {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
        }

        /* The click effect now works correctly without "flying away" */
        .logs-table tr.day-separator .btn-icon:active {
            transform: scale(0.96);
            filter: brightness(90%);
        }

        .logs-table tr.day-separator button:hover {
            z-index: 2;
            /* Lifts the button and its shadow above other rows */
        }

        /* Add this rule to hide the date column when sorting by date */
        body.is-admin .logs-table.sorting-by-date .date-column {
            display: none !important;
        }

        body:not(.is-admin) .app-info {
            display: none;
        }

        /* Center the UID and Date column titles */
        .logs-table thead .uid-column,
        .logs-table thead .date-column {
            text-align: center;
        }

        .logs-table td.uid-column,
        .logs-table td.date-column {
            text-align: center;
        }

        /* Right-align the Actions column title */
        .logs-table thead .actions-header {
            text-align: right;
        }

        .logs-table th,
        .database-table th {
            text-align: left;
            padding: 14px 16px;
            background-color: transparent;
            font-weight: 600;
            font-size: 0.85em;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            color: var(--text-secondary, #666);
            white-space: nowrap;
            position: relative;
            cursor: pointer;
            line-height: 1.4;
            border-bottom: 2px solid rgba(0, 0, 0, 0.06);
        }

        /* Round top corners of first/last header cells */
        .logs-table th:first-child,
        .database-table th:first-child {
            border-top-left-radius: 15px;
        }

        .logs-table th:last-child,
        .database-table th:last-child {
            border-top-right-radius: 15px;
        }

        .logs-table th.sortable:hover,
        .database-table th.sortable:hover {
            color: var(--primary-color);
            background-color: rgba(92, 107, 192, 0.04);
        }

        .logs-table th i.sort-icon,
        .database-table th i.sort-icon {
            margin-left: 6px;
            font-size: 0.75em;
            opacity: 0.6;
        }

        .logs-table td,
        .database-table td {
            padding: 14px 16px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            vertical-align: middle;
            line-height: 1.5;
            transition: background-color 0.15s ease-out;
            font-variation-settings: "wdth" 95, "GRAD" 0;
        }

        .dark-mode .logs-table td,
        .dark-mode .database-table td {
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        }

        /* Last row - remove bottom border and add radius */
        .logs-table tbody tr:last-child td,
        .database-table tbody tr:last-child td {
            border-bottom: none;
        }

        .logs-table tbody tr:last-child td:first-child,
        .database-table tbody tr:last-child td:first-child {
            border-bottom-left-radius: 15px;
        }

        .logs-table tbody tr:last-child td:last-child,
        .database-table tbody tr:last-child td:last-child {
            border-bottom-right-radius: 15px;
        }

        .logs-table tr:hover td,
        .database-table tr:hover td {
            background-color: rgba(92, 107, 192, 0.04);
        }

        .database-table td.uid-cell {
            text-align: left;
            /* Align badges to the left */
            gap: 2px;
            /* This adds space between badges */
        }

        .uid-badge:first-child {
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }

        .uid-badge:last-child {
            border-top-right-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .name-cell {
            font-weight: 500;
        }

        .manual-timestamp-input {
            border-color: #fb8c00 !important;
            /* Orange border */
            box-shadow: 0 0 0 3px rgba(251, 140, 0, 0.1) !important;
        }

        .manual-timestamp-input:hover,
        .manual-timestamp-input:focus {
            border-color: #e65100 !important;
            /* Darker orange on hover/focus */
            box-shadow: 0 0 0 3px rgba(251, 140, 0, 0.2) !important;
        }

        .time-tag .date-cell {
            white-space: nowrap;
            font-size: 0.85em;
        }

        .time-tag.manual.excused {
            background-color: #fff3e0;
            /* Light orange */
            color: #e65100;
            /* Dark orange text */
            border-style: dashed;
        }

        .time-tag.manual.excused:hover {
            border-color: #e65100;
            /* Orange border on hover */
        }

        .dark-mode .time-tag.manual.excused {
            background-color: #4a2c0f;
            /* Dark mode orange */
            color: #ffcc80;
        }

        .times-cell-stacked {
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            /* Space between "Theory" row and "Lab" row */
            height: 100%;
        }

        .time-row {
            display: flex;
            align-items: center;
            gap: 0;
            /* Remove gap here, we handle it in the wrapper */
            width: 100%;
        }

        .cat-label {
            font-size: 0.7em;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--primary-color);
            width: 60px;
            /* Fixed width */
            text-align: left;
            flex-shrink: 0;
            margin-right: 6px;
            /* Tighter distance to pills */
        }

        /* Wrapper for the pills to isolate them from the label */
        .pills-wrapper {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 2px;
            /* Tighter gap between time pills */
        }

        /* Fix rounding: Now targets the first TAG inside the WRAPPER */
        .pills-wrapper .time-tag:first-child {
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        }

        .pills-wrapper .time-tag:last-child {
            border-top-right-radius: 12px;
            border-bottom-right-radius: 12px;
        }

        .times-cell {
            white-space: nowrap;
        }

        /* Inner content wrapper for times-cell */
        .times-cell .pills-wrapper,
        .times-cell .time-tag {
            display: inline-flex;
            align-items: center;
        }



        .time-tag {
            background-color: #e3f2fd;
            border-radius: 4px;
            padding: 8px 5px;
            font-size: 0.9em;
            white-space: nowrap;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            /* Centers text inside the tag */
            line-height: 1;
            min-width: 40px;
            /* Ensures all tags have the same width */
            border: 1px solid transparent;
            /* Placeholder for smooth transition */
            color: var(--primary-color);
            transition: all 0.2s ease-out;
            /* Smoother transition */
            user-select: none;
            /* Standard property */
            /* Roundness 100 for rounder look, Weight 700 for bolder */
            font-family: 'Google Sans Flex', sans-serif;
            font-variation-settings: "ROND" 100, "wdth" 95, "wght" 500;
        }


        .time-tag:hover {
            border: 1px solid var(--primary-color);
        }

        .time-tag:first-child {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
        }

        .time-tag:last-child {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
        }

        .logs-table .actions-cell,
        .database-table .actions-cell {
            white-space: nowrap;
            text-align: right;
        }

        /* Inner wrapper for flex layout in actions cell */
        .actions-cell-content {
            display: inline-flex;
            justify-content: flex-end;
            align-items: center;
            gap: 3px;
        }

        /* Prevent course/category text from wrapping */
        td:has(.cat-label),
        td span[style*="text-transform:uppercase"] {
            white-space: nowrap;
        }


        /* Fixes for Absence Request Dialog */
        #request-hours-group {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 6px !important;
        }

        #request-hours-group .toggle-button {
            flex-grow: 1;
            flex-basis: 15%;
            /* Allow more buttons per row */
            padding-left: 3px;
            /* Make buttons thinner */
            padding-right: 3px;
            /* Make buttons thinner */
            padding-top: 10px;
            /* Keep a good tap height */
            padding-bottom: 10px;
            /* Keep a good tap height */
            min-width: 45px;
            /* Set a smaller minimum width */
            font-size: 0.85em;
            /* Slightly smaller font */
        }

        .actions-cell .btn-icon {
            width: 30px;
            height: 30px;
            border-radius: 4px;
            background-color: transparent;
            border-color: transparent;
            box-shadow: none;
        }

        /* Round the LEFT corners of the FIRST button */
        .actions-cell .btn-icon:first-child {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
        }

        /* Round the RIGHT corners of the LAST button */
        .actions-cell .btn-icon:last-child {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
        }

        .actions-cell .btn-icon i {
            color: var(--primary-color);
            /* A standard, medium-grey for icons */
            transition: color 0.2s ease-out;
            /* Smoothly animate the color change */
        }

        .actions-cell .btn-icon:hover {
            border-color: transparent;
            background-color: #5252521c
                /* Prevent the default glowing border */
        }

        /* Green border for the green button */
        .actions-cell .btn-icon.btn-green:hover {
            border-color: var(--success-color);
        }

        /* Red border for the red button */
        .actions-cell .btn-icon.btn-red:hover {
            border-color: var(--danger-color);
        }

        /* Blue border for the blue button */
        .actions-cell .btn-icon.btn-blue:hover {
            border-color: var(--info-color);
        }

        .dark-mode .actions-cell .btn-icon {
            background-color: transparent;
        }

        .dark-mode .actions-cell-content .btn-icon:hover {
            background-color: transparent;
            /* Ensures background stays transparent */
        }

        .dark-mode .actions-cell-content .btn-icon i {
            color: #bdbdbd;
        }

        .dark-mode .actions-cell-content .btn-icon.btn-green:hover i {
            color: var(--success-color-light);
        }

        .dark-mode .actions-cell-content .btn-icon.btn-red:hover i {
            color: var(--danger-color-light);
        }

        .dark-mode .actions-cell-content .btn-icon.btn-blue:hover i {
            color: var(--info-color-light);
        }

        .dark-mode .actions-cell .btn-icon.btn-green:hover {
            border-color: var(--success-color-light);
        }

        .dark-mode .actions-cell .btn-icon.btn-red:hover {
            border-color: var(--danger-color-light);
        }

        .dark-mode .actions-cell .btn-icon.btn-blue:hover {
            border-color: var(--info-color-light);
        }

        /* Change the ICON color to green on hover */
        .actions-cell .btn-icon.btn-green:hover i {
            color: var(--success-color);
        }

        /* Change the ICON color to red on hover */
        .actions-cell .btn-icon.btn-red:hover i {
            color: var(--danger-color);
        }

        /* Change the ICON color to blue on hover */
        .actions-cell .btn-icon.btn-blue:hover i {
            color: var(--info-color);
        }

        .logs-table .day-separator .btn-icon,
        .delete-time-btn.btn-icon,
        #sync-btn.btn-icon,
        #logout-btn.btn-icon {
            width: 30px;
            height: 30px;
        }

        /* This makes the icon inside the smaller button fit properly */
        .actions-cell .btn-icon i,
        .logs-table .day-separator .btn-icon i,
        .delete-time-btn.btn-icon i,
        #sync-btn.btn-icon i {
            font-size: 0.85em;
            /* Slightly reduce the icon size */
        }

        .empty-logs {
            text-align: center;
            padding: 20px;
            color: #757575;
            font-style: italic;
        }

        .filter-input:disabled,
        .sort-dropdown:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: #f0f0f0;
        }

        .dark-mode .filter-input:disabled,
        .dark-mode .sort-dropdown:disabled {
            background-color: #2a2a2a;
        }


        #notification-container {
            position: fixed;
            top: 10px;
            right: 10px;
            z-index: 10000;
            max-width: 300px;
        }

        .notification {
            margin-bottom: 10px;
            /* Reduced margin so new notifications don’t push content far down */
        }

        .notification-close {
            background: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
            cursor: pointer;
            font-size: 18px;
            color: inherit;
            opacity: 0.7;
            padding: 0;
            margin-left: 8px;
            transition: none;
            width: auto;
            height: auto;
            display: inline-block;
            pointer-events: auto;
            /* Make only the close button clickable */
        }

        .notification-close:hover {
            opacity: 1;
            background: none;
            color: inherit;
            box-shadow: none;
        }


        .notification {
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

        .notification i {
            margin-right: 10px;
            font-size: 1.2em;
        }

        .notification-info {
            background-color: #e3f2fd;
            color: #0d47a1;
        }

        .notification-warning {
            background-color: #fff3e0;
            color: #e65100;
        }

        .notification-error {
            background-color: #ffebee;
            color: #b71c1c;
        }

        .notification-success {
            background-color: #e8f5e9;
            color: #1b5e20;
        }

        /* Database UI Styles */
        .database-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            flex-wrap: nowrap;
            /* Keep on one line */
            gap: 15px;
        }

        /* Center the UID column title */
        .database-table thead .uid-column {
            text-align: center;
        }

        /* Right-align the Actions column title */
        .database-table thead .actions-header {
            text-align: right;
        }

        .add-entry-btn {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .database-actions {
            flex-basis: auto;
            justify-content: flex-end;
        }

        .database-table {
            width: 100%;
            border-collapse: collapse;
            min-width: 500px;
        }

        .database-table th {
            text-align: left;
            padding: 12px 15px;
            background-color: #f5f5f5;
            font-weight: 500;
        }

        .database-table td {
            padding: 12px 15px;
            border-top: 1px solid #e0e0e0;
            font-variation-settings: "wdth" 95, "GRAD" 0;
        }

        .database-table tr:hover {
            background-color: #f9f9f9;
        }

        .entry-count {
            font-size: 0.9em;
            /* Match logs-count */
            white-space: nowrap;
        }

        /* Dialog styles */

        /* When a dialog is open, prevent body scroll */
        body.dialog-open {
            overflow: hidden;
        }



        .dialog-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0 15px;
            box-sizing: border-box;
            opacity: 0;
            backdrop-filter: blur(0px);
            animation: backdrop-flow 0.4s ease forwards;
            overscroll-behavior: contain;
            touch-action: none;
        }



        /* Flowing backdrop with blur */
        @keyframes backdrop-flow {
            0% {
                opacity: 0;
                backdrop-filter: blur(0px);
            }

            100% {
                opacity: 1;
                backdrop-filter: blur(8px);
            }
        }

        /* BOUNCY dialog entrance */
        .dialog {
            background-color: var(--card-background);
            color: var(--text-color);
            width: 95%;
            max-width: 550px;
            max-height: 85vh;
            margin: auto;
            display: flex;
            flex-direction: column;
            border-radius: 24px;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            border: 1px solid rgba(0, 0, 0, 0.05);
            overflow: hidden;
            /* BOUNCY entrance - starts small, overshoots, settles */
            transform: scale(0.8) translateY(40px);
            opacity: 0;
            animation: dialog-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
            touch-action: auto;
            overscroll-behavior: contain;
        }


        /* BOUNCY dialog animation - elastic overshoot */
        @keyframes dialog-bounce {
            0% {
                transform: scale(0.8) translateY(40px);
                opacity: 0;
            }

            60% {
                transform: scale(1.03) translateY(-5px);
                opacity: 1;
            }

            80% {
                transform: scale(0.99) translateY(2px);
            }

            100% {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }

        /* Ensure content has breathing room */
        .dialog-content {
            padding: 24px;
            overflow-y: auto;
            flex-grow: 1;
        }

        .dialog-loader,
        .dialog-main-content {
            transition: opacity 0.25s ease-out;
        }

        .dialog-main-content.fade-in {
            opacity: 1;
            visibility: visible;
        }

        .dialog-loader.fade-out {
            opacity: 0;
        }

        @keyframes dialog-fade-in {
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .dialog-title {
            padding: 20px 24px;
            margin: 0;
            font-size: 1.25em;
            font-weight: 600;
            background-color: rgba(0, 0, 0, 0.02);
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }

        .dark-mode .dialog-title {
            border-bottom-color: #444;
        }

        .dialog p {
            margin-bottom: 20px;
            line-height: 1.5;
            color: var(--text-color);
            opacity: 0.8;
        }

        .dialog .form-row {
            display: block;
            /* Stacks vertically */
            margin: 0;
        }

        .dialog .form-group {
            display: flex;
            flex-direction: row;
            /* Keep label and input side-by-side */
            align-items: center;
            /* Vertically center them */
            margin-bottom: 15px;
            gap: 15px;
        }

        .dialog-label-fixed {
            width: 100px;
            /* Fixed width like the screenshot */
            min-width: 100px;
            font-weight: 700;
            color: var(--primary-color);
            text-align: left;
            margin-bottom: 0;
            /* Override default */
            flex-shrink: 0;
            /* Prevent label from squishing */
        }

        .dialog .form-group label {
            display: block;
            margin-bottom: 6px;
            font-size: 0.85em;
            font-weight: 600;
            color: var(--primary-color);
            text-align: left;
            /* Reset alignment */
            flex-basis: auto;
            /* Reset flex basis from old styles */
        }

        /* New style for the "Student Activity" explanation box */
        .dialog .form-group textarea.info-box {
            background-color: #e3f2fd;
            /* Light blue */
            color: #0d47a1;
            /* Dark blue text */
            border-color: #64b5f6;
            font-weight: 500;
            opacity: 1;
            cursor: default;
        }

        .dark-mode .dialog .form-group textarea.info-box {
            background-color: #202c68e5;
            color: #c0c8ff;
            border-color: var(--primary-color);
        }

        /* This class makes all controls take the remaining space */
        .form-group-control {
            flex-grow: 1;
            flex-basis: 0;
            min-width: 150px;
            /* Prevents controls from getting too squished */
        }

        /* Aligns the hour buttons correctly */
        .form-group-control.toggle-button-group {
            margin-top: 0;
            padding: 0;
        }

        /* Ensure textareas use the full space */
        .form-group-control.form-control {
            width: 100%;
        }

        .reason-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            /* 3 Columns */
            gap: 5px;
            /* Tiny gap */
            margin-bottom: 8px;
        }

        .reason-card {
            background: var(--card-background);
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            /* Slightly sharper corners */
            padding: 6px 8px;
            /* Very minimal padding */
            cursor: pointer;
            transition: all 0.2s ease;

            /* Horizontal Layout */
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 8px;

            color: var(--text-color);
            user-select: none;
            min-height: 36px;
            /* Ultra slim height */
        }

        .reason-card i {
            font-size: 1em;
            /* Small Icon */
            color: #999;
            transition: color 0.2s;
            flex-shrink: 0;
        }

        .reason-card span {
            font-size: 0.7em;
            /* Small font to fit 3 cols */
            font-weight: 700;
            line-height: 1;
            text-align: left;

            /* Allow wrapping for long words like "Conference" */
            white-space: normal;
            word-break: break-word;
        }

        /* --- Hover/Active States --- */
        .reason-card:hover:not(.active) {
            background-color: #f9f9f9;
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .reason-card:hover:not(.active) i {
            color: var(--primary-color);
        }

        .reason-card.active,
        .reason-card:active {
            background-color: #e8eaf6;
            color: #2c3a8e;
            border-color: var(--primary-color);
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
            transform: scale(0.98);
        }

        .reason-card.active i {
            color: var(--primary-color);
        }

        /* Dark Mode */
        .dark-mode .reason-card {
            background: #2c2c2e;
            border-color: #444;
            color: #e0e0e0;
        }

        .dark-mode .reason-card:hover:not(.active) {
            background-color: #333;
            border-color: var(--primary-light);
            color: var(--primary-light);
        }

        .dark-mode .reason-card:hover:not(.active) i {
            color: var(--primary-light);
        }

        .dark-mode .reason-card.active {
            background-color: #3949ab;
            color: white;
            border-color: transparent;
        }

        .dark-mode .reason-card.active i {
            color: white;
        }

        .dialog .form-control {
            background-color: #f0f0f0;
            /* Light gray background like screenshot */
            border: 1px solid transparent;
            /* Cleaner look */
            border-radius: 8px;
            padding: 10px 12px;
        }

        .form-control.is-invalid {
            border-color: var(--danger-color) !important;
            box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.2) !important;
        }

        .error-message {
            color: var(--danger-color);
            font-size: 0.85em;
            margin-top: -7px;
            margin-bottom: 10px;
            flex-basis: 100%;
            text-align: left;
            padding-left: 95px;
            box-sizing: border-box;
        }

        .dialog .form-group .form-control {
            flex-grow: 1;
            margin-top: 0;
            flex-shrink: 1;
            /* ADD THIS: Explicitly allow the input to shrink */
            min-width: 0;
            /* ADD THIS: Override the browser's default minimum width */
        }

        .dialog .form-control:focus {
            background-color: #fff;
            border-color: var(--primary-color);
        }

        .dialog-actions {
            padding: 16px 24px;
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            border-top: 1px solid rgba(0, 0, 0, 0.06);
            background-color: var(--card-background);
        }

        /* --- Collapsible Section for Dialogs --- */
        .collapsible-trigger {
            cursor: pointer;
            color: var(--primary-color);
            font-weight: 500;
            margin-left: 5%;
            padding: 5px;
            display: inline-block;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .collapsible-trigger:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .collapsible-trigger i {
            margin-left: 5px;
            transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .collapsible-content {
            background-color: #f0f0f0;
            border-radius: 8px;
            max-height: 0;
            overflow: hidden;
            padding: 0 15px;
            margin-top: 10px;
            transition: max-height 0.4s ease-out, padding 0.4s ease-out;
        }

        .collapsible-content.is-open {
            max-height: 500px;
            /* Should be larger than the content's height */
            padding: 15px;
            transition: max-height 0.5s ease-in, padding 0.5s ease-in;
        }

        .collapsible-content hr {
            border: none;
            border-top: 1px solid #ddd;
            margin: 15px 0;
        }

        .collapsible-content label {
            display: block;
            /* Ensures checkboxes stack vertically */
            margin-bottom: 10px;
        }

        .collapsible-content p {
            margin: 0 0 10px 0;
            opacity: 1.0;
        }

        /* Dark Mode Styles */
        .dark-mode .collapsible-trigger:hover {
            background-color: rgba(255, 255, 255, 0.1);
        }

        .dark-mode .collapsible-content {
            background-color: #333;
        }

        .dark-mode .collapsible-content hr {
            border-top-color: #555;
        }

        /* ===== Group layout ===== */
        .toggle-button-group {
            display: flex;
            flex-wrap: nowrap;
            /* Force single line */
            gap: 8px;
            width: 100%;
        }

        @keyframes dialog-enter {
            from {
                transform: scale(0.96);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        /* --- Session Layout (Desktop: Single Row) --- */
        #session-controls {
            display: flex;
            flex-direction: row !important;
            /* Desktop: Side-by-side */
            flex-wrap: nowrap;
            align-items: stretch;
            gap: 10px;
        }

        /* 1. Category Container (Left Side) */
        #session-category-group {
            flex: 1;
            /* Grow to fill space */
            display: flex;
            gap: 3px;
            margin-bottom: 0 !important;
        }

        #session-category-group .course-button {
            flex: 1;
            /* Grow equally */
            text-align: center;
            justify-content: center;
            white-space: nowrap;
            padding: 12px 5px;
            border-radius: 6px;
        }

        /* 2. Group Container (Right Side) */
        #session-group-container {
            flex: 0 0 auto;
            /* Shrink to fit content */
            display: flex;
            gap: 3px;
            margin-bottom: 0 !important;
        }

        #session-group-container .course-button {
            flex: 0 0 40px !important;
            /* Fixed width (Square-ish) */
            width: 40px !important;
            padding: 12px 5px;
            justify-content: center;
            text-align: center;
            border-radius: 6px;
        }

        #session-category-group .course-button:first-child {
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }

        #session-category-group .course-button:last-child {
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }

        #session-group-container .course-button:first-child {
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }

        #session-group-container .course-button:last-child {
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }

        /* ===== Base button (global) ===== */
        .toggle-button {
            flex: 1;
            min-width: 20px;
            padding: 12px 5px;
            text-align: center;
            justify-content: center;
            font-size: 0.9em;
            font-weight: 500;
            background-color: var(--card-background);
            color: var(--text-color);
            border: 1px solid #e0e0e0;
            border-radius: 8px !important;
            cursor: pointer;
            user-select: none;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transform: scale(1);
            transition: background-color 0.2s, color 0.2s, border-color 0.2s;
        }

        /* ===== Hover (non-active) ===== */
        .toggle-button:hover:not(.active) {
            background-color: #f9f9f9 !important;
            /* Keep it light */
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: none;
        }

        .toggle-button.active {
            background-color: #e8eaf6 !important;
            color: #2c3a8e !important;
            border-color: var(--primary-color);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
            transform: scale(0.96);
        }

        /* ===== Press (non-active): tactile push ===== */
        .toggle-button:active:not(.active) {
            background-color: #e8eaf6;
            /* subtle tint */
            color: #2c3a8e;
            border-color: var(--primary-color);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
            transform: scale(0.96);
            /* quick compression */
        }

        /* ===== Active (toggled on): stable, pushed-in ===== */
        .toggle-button.active {
            background-color: #e8eaf6;
            color: #2c3a8e;
            border-color: #c5cae9;
            /* softer than hover */
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
            transform: none;
            /* no shrink while active */
            transform: scale(0.96);
        }

        /* Active + hover: slight emphasis, no layout shift */
        .toggle-button.active:hover {
            background-color: #e8eaf6 !important;
            color: #2c3a8e !important;
            border-color: var(--primary-color);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
            transform: scale(0.96) !important;
            /* KEEP it pressed */
        }

        .toggle-button[disabled],
        .toggle-button.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }


        .dark-mode .toggle-button {
            background-color: #2c2c2e;
            border-color: #444;
            color: #e0e0e0;
        }

        .dark-mode .toggle-button:hover:not(.active) {
            background-color: #333 !important;
            border-color: var(--primary-light);
            color: var(--primary-light);
        }

        .dark-mode .toggle-button.active {
            background-color: #3949ab !important;
            color: white !important;
        }

        .dark-mode .toggle-button:disabled {
            background-color: #222;
            color: #666;
            border-color: #444;
        }

        /* Smaller buttons for Section letters */
        .toggle-button.btn-char {
            flex-grow: 1;
            padding: 12px 15px;
        }

        /* This is the main container for the new hours counter */
        .number-input-container {
            display: flex;
            align-items: center;
            flex-grow: 1;
        }

        .number-input-container .number-input-field {
            flex-grow: 1;
            border-radius: 8px 0 0 8px;
            height: 40px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-right: none;
            -moz-appearance: textfield;
            appearance: none;
            transition: all 0.2s ease-in-out;
            /* Defines the border to be rounded */
            border-right: none;
            /* Keeps the seamless connection to the buttons */
        }

        .number-input-container .number-input-btn {
            height: 40px;
            width: 40px;
            padding: 0;
            box-sizing: border-box;
            box-shadow: none;
            border-radius: 0;
            border: 1px solid #ccc;
            background-color: #f0f0f0;
            color: #333;
            transition: all 0.2s ease-in-out;
            cursor: pointer;
        }

        .number-input-container .number-input-btn:hover {
            z-index: 1;
            background-color: #e9ecef;
            /* Match toggle button hover */
            border-color: var(--primary-color);
            color: var(--primary-color);
            transform: none;
        }

        .number-input-container .number-input-btn:active {
            transform: scale(0.96);
        }

        .number-input-container .number-input-btn:last-child {
            border-radius: 0 8px 8px 0;
        }

        .dark-mode .number-input-container .number-input-field {
            background-color: #333;
            border-color: #555;
            color: #f0f0f0;
        }

        .dark-mode .number-input-container .number-input-btn {
            background-color: #444;
            color: #f0f0f0;
            border-color: #555;
        }

        .dark-mode .number-input-container .number-input-btn:hover {
            background-color: #3a3a3c;
            border-color: var(--primary-color);
            color: #f0f0f0;
        }

        /* Dark Mode Dialogs */
        .dark-mode .dialog .form-control {
            background-color: #333;
            border-color: transparent;
            color: #f0f0f0;
        }

        .dark-mode .dialog .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.3);
        }

        .dark-mode .dialog .form-group label {
            color: var(--primary-light);
        }

        .dark-mode .dialog-label-fixed {
            color: var(--primary-light);
        }

        .dark-mode .dialog textarea,
        .dark-mode .dialog input[type="text"],
        .dark-mode .dialog input[type="date"],
        .dark-mode .dialog input[type="time"],
        .dark-mode .dialog input[type="number"],
        .dark-mode .dialog select {
            background-color: #333;
            color: #f0f0f0;
            border-color: #555;
        }

        .dark-mode .dialog textarea::placeholder,
        .dark-mode .dialog input::placeholder {
            color: #888;
        }

        .dark-mode .dialog hr {
            border-color: #444;
        }

        .dark-mode .dialog p {
            color: #e0e0e0;
        }

        .unknown-row {
            background-color: rgba(251, 140, 0, 0.1) !important;
            border-left: 3px solid var(--warning-color);
        }

        .dark-mode .unknown-row {
            background-color: rgba(251, 140, 0, 0.2) !important;
        }

        .footer {
            max-width: 1000px;
            text-align: center;
            padding: 20px 0;
            color: var(--primary-dark);
            border-radius: 20px;
            margin-left: auto;
            margin-right: auto;
            -webkit-user-select: none;
            /* Safari, Chrome, Opera, Edge */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* Internet Explorer/Edge */
            user-select: none;
            /* Standard property */
        }

        .social-links {
            display: flex;
            /* Treat the container as a flexbox */
            justify-content: center;
            /* Keep the icons centered horizontally */
            align-items: center;
            /* Vertically align all items to the middle */
            gap: 20px;
            /* Replaces margin for consistent spacing */
        }

        .social-links a {
            color: var(--primary-dark);
            font-size: 1.0em;
            margin: 0;
            /* Remove old margin, gap now handles spacing */
            transition: color 0.3s;
        }

        .social-links a:hover {
            color: var(--secondary-color);
        }

        /* ADD THIS CSS */
        #register-uid-btn {
            display: none;
            /* Hidden by default */
        }

        body:not(.is-admin) #register-uid-btn {
            display: inline-flex;
            /* Shown only for non-admins */
            align-items: center;
            gap: 8px;
            padding-left: 14px;
            padding-right: 14px;
        }

        /* Auth styles */
        .auth-container {
            display: flex;
            justify-content: flex-end;
            /* Align to right */
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .user-avatar {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .user-avatar:active {
            transform: scale(0.95);
        }

        /* Style for when avatar transforms into button */
        .user-avatar-button {
            width: 30px !important;
            height: 30px !important;
            border-radius: 50% !important;
            padding: 0 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            font-size: 14px !important;
            min-width: unset !important;
        }


        .student-profile-chip #user-avatar,
        .student-profile-chip #user-name {
            cursor: pointer;
        }

        /* --- Student Picker Styles --- */
        .student-list-container {
            max-height: 240px;
            overflow-y: auto;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            margin-top: 10px;
            background: var(--card-background);
            margin-left: 115px;
        }

        .student-item {
            padding: 12px 15px;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: background 0.2s;
        }

        .student-item:last-child {
            border-bottom: none;
        }

        .student-item:hover {
            background-color: #f5f5f5;
        }

        .student-item.selected {
            background-color: #e8eaf6;
            border-left: 4px solid var(--primary-color);
        }

        .student-avatar-placeholder {
            width: 32px;
            height: 32px;
            background: #e0e0e0;
            color: #757575;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8em;
            font-weight: bold;
        }

        .student-info {
            display: flex;
            flex-direction: column;
        }

        .student-name {
            font-weight: 500;
            color: var(--text-color);
        }

        .student-uid {
            font-size: 0.85em;
            color: #888;
        }

        /* Dark Mode */
        .dark-mode .student-list-container {
            border-color: #444;
            background: #2c2c2e;
        }

        .dark-mode .student-item {
            border-bottom-color: #444;
        }

        .dark-mode .student-item:hover {
            background-color: #3a3a3c;
        }

        .dark-mode .student-item.selected {
            background-color: #3949ab40;
        }

        .dark-mode .student-avatar-placeholder {
            background: #444;
            color: #ccc;
        }

        /* Dark Mode - Modern Tables */
        .dark-mode .table-container {
            border-color: rgba(255, 255, 255, 0.08);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .dark-mode .logs-table th,
        .dark-mode .database-table th {
            color: #aaa;
            border-bottom-color: rgba(255, 255, 255, 0.08);
        }

        .dark-mode .logs-table th.sortable:hover,
        .dark-mode .database-table th.sortable:hover {
            color: var(--primary-color-light, #9fa8da);
            background-color: rgba(92, 107, 192, 0.08);
        }

        .dark-mode .logs-table td,
        .dark-mode .database-table td {
            border-bottom-color: rgba(255, 255, 255, 0.04);
        }

        .dark-mode .logs-table tr:hover td,
        .dark-mode .database-table tr:hover td {
            background-color: rgba(92, 107, 192, 0.08);
        }

        /* Styles for the student profile chip */
        .student-profile-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            /* Space between avatar and name */
            padding: 4px 12px 4px 4px;
            /* T-R-B-L padding */
            background-color: var(--card-background);
            border: 1px solid #e0e0e0;
            /* Light border */
            border-radius: 20px;
            /* Fully rounded pill shape */
            cursor: pointer;
            transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out, transform 0.1s ease-out;
            user-select: none;
            /* This ensures it sits correctly with the other buttons */
            vertical-align: middle;
        }

        .student-profile-chip:hover {
            background-color: #f5f5f5;
            /* Light grey hover */
            border-color: var(--primary-color);
        }

        .student-profile-chip:active {
            background-color: #e0e0e0;
            /* Darker grey active */
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
            transform: scale(0.98);
        }

        /* Make the avatar inside the chip fit */
        .student-profile-chip .user-avatar {
            width: 28px;
            /* Slightly smaller avatar */
            height: 28px;
        }

        /* Make the name inside the chip look right */
        .student-profile-chip #user-name {
            font-weight: 500;
            color: var(--text-color);
            /* Use standard text color */
            text-decoration: none !important;
            /* Remove any underline */
            padding-right: 4px;
            /* Add a little space at the end */
        }

        .student-profile-header {
            margin-top: 15px;
            margin-bottom: 10px;
            font-family: 'Google Sans Flex', sans-serif;
            font-weight: 500;
            /* Use 500 weight */
            border-bottom: 1px solid var(--primary-dark);
            padding-bottom: 5px;
            color: var(--text-color);
        }

        .dark-mode .student-profile-header {
            border-bottom-color: var(--primary-color);
        }

        /* Compact Form Spacing for Dialogs */
        .dialog-content .form-group {
            margin-bottom: 8px;
            /* Was 15px */
        }

        .dialog-content .form-section-title {
            margin-top: 10px;
            /* Was 20px */
            margin-bottom: 8px;
            /* Was 15px */
            font-size: 0.8em;
        }

        .dialog-disclaimer {
            padding: 8px 12px;
            margin-bottom: 10px;
            font-size: 0.85em;
        }

        .request-list-container {
            max-height: 180px;
            /* Set max height for scrolling */
            overflow-y: auto;
            padding-right: 5px;
            /* Space for scrollbar */
        }

        .request-list-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 5px;
            background-color: var(--background-color);
        }

        .dark-mode .request-list-item {
            background-color: #333;
        }

        .request-list-status {
            flex-shrink: 0;
            font-size: 0.8em;
            font-weight: 500;
            padding: 4px 10px;
            border-radius: 12px;
            color: white;
            width: 80px;
            /* Give a fixed width */
            text-align: center;
        }

        /* Status Pill Colors */
        .request-list-status.status-approved {
            background-color: var(--success-color);
        }

        .request-list-status.status-rejected {
            background-color: var(--danger-color);
        }

        .request-list-status.status-pending {
            background-color: var(--warning-color);
            color: #333;
        }

        .request-list-details {
            flex-grow: 1;
            min-width: 0;
            /* Allow text to wrap */
        }

        .request-list-details strong {
            display: block;
            /* Make course name the "title" */
            font-size: 0.95em;
            color: var(--text-color);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .dark-mode .request-list-details strong {
            color: var(--text-light);
        }

        .request-list-details small {
            font-size: 0.85em;
            opacity: 0.8;
        }

        /* Dark mode styles for the chip */
        .dark-mode .student-profile-chip {
            background-color: var(--card-background);
            border-color: #555;
        }

        .dark-mode .student-profile-chip:hover {
            background-color: #333;
            /* Dark hover */
            border-color: #777;
        }

        .dark-mode .student-profile-chip:active {
            background-color: #444;
            /* Darker active */
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        .dark-mode .student-profile-chip #user-name {
            color: var(--text-color);
        }

        .sync-auth-container {
            display: flex;
            justify-content: space-between;
            /* Puts first child to left, second to right */
            align-items: center;
            padding: 10px 0;
            /* Adjust as needed */
        }

        .sync-container {
            display: flex;
            justify-content: flex-start;
            /* Align to left */
            align-items: center;
            gap: 10px;
            margin-bottom: 15px;
        }

        .auto-sync-enabled {
            background-color: #4caf50 !important;
            /* Green color for auto-sync enabled */
        }

        .sync-btn-text {
            margin-left: 5px;
        }

        /* Add a subtle pulse animation when auto-sync is enabled */
        @keyframes subtle-pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4);
            }

            70% {
                box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
            }
        }

        .auto-sync-enabled {
            animation: subtle-pulse 2s infinite;
        }

        .course-button.disabled {
            opacity: 0.3;
            pointer-events: none;
            background-color: #f0f0f0 !important;
            border-color: #e0e0e0 !important;
            color: #999 !important;
            box-shadow: none !important;
        }

        .course-button.btn-orange {
            color: var(--warning-color);
            border-color: transparent;
            background-color: var(--card-background);
        }

        .course-button.btn-orange.active,
        .course-button.btn-orange:active {
            background-color: #fff3e0;
            /* Light orange */
            color: #e65100;
            /* Dark orange text */
            transform: scale(0.95);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
            border-color: var(--warning-color);
        }

        .course-button.btn-orange:hover:not(.active) {
            border-color: var(--warning-color);
        }

        /* ===== Theme Toggle & Dark Mode Styles ===== */
        .theme-toggle {
            background: none;
            border: none;
            box-shadow: none;
            color: var(--primary-dark);
            font-size: 1.0em;
            cursor: pointer;
            padding: 0;
            margin: 0;
            line-height: 1;
            transition: color 0.3s, transform 0.2s;
        }

        .theme-toggle:hover {
            color: var(--secondary-color);
            background: none;
            box-shadow: none;
        }

        .dark-mode {
            --background-color: transparent;
            --card-background: #1c1c1e;
            --text-color: #e0e0e0;
            --primary-color: #5c6bc0;
            --primary-dark: #3949ab;
            --color: var(--text-color);
        }

        .dark-mode .not-signed-in-message {
            background-color: rgba(92, 107, 192, 0.15);
            color: #e0e0e0;
        }

        .dark-mode .logs-table tr.day-separator {
            background-color: #2c3e50;
        }

        /* Set base background for elastic scroll */
        html.dark-mode {
            /* This overrides the default light background with the dark one */
            --background-color: #000000;
        }

        .dark-mode {
            background-color: var(--background-color);
            color: var(--text-color);
        }

        /* Dark Mode Theming for Coloured Elements */
        .dark-mode .module-header {
            background-color: #2c3e50;
            /* Dark blue-grey header */
        }

        .dark-mode .info-item {
            background-color: rgba(255, 255, 255, 0.08);
        }

        /* Make timestamp tags a muted blue instead of grey */
        .dark-mode .time-tag {
            background-color: #202c68e5;
            color: #c0c8ff;
        }

        /* --- Muted Button Colours for Dark Mode --- */
        .dark-mode .btn-green {
            background-color: #388e3c;
            /* Darker Green */
        }

        .dark-mode .btn-green:hover {
            background-color: #2e7d32;
        }

        .dark-mode .btn-blue {
            background-color: #1976d2;
            /* Darker Blue */
        }

        .dark-mode .btn-blue:hover {
            background-color: #1565c0;
        }

        .dark-mode .btn-red {
            background-color: #d32f2f;
            /* Darker Red */
        }

        .dark-mode .btn-red:hover {
            background-color: #c62828;
        }

        .dark-mode .btn-orange {
            background-color: #f57c00;
            /* Darker Orange */
        }

        .dark-mode .btn-orange:hover {
            background-color: #ef6c00;
        }

        .dark-mode .btn-purple {
            background-color: #7b1fa2;
            /* Darker Purple */
        }

        .dark-mode .btn-purple:hover {
            background-color: #6a1b9a;
        }

        /* Fix unknown row highlight in dark mode */
        .dark-mode .unknown-row {
            background-color: rgba(251, 140, 0, 0.2) !important;
            border-left: 3px solid var(--warning-color);
        }

        .dark-mode .app-header {
            background: linear-gradient(135deg, #2c3e50, #1a237e);
        }

        .dark-mode .module {
            background-color: var(--card-background);
            color: var(--text-color);
        }

        .dark-mode .dialog {
            border-color: rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
        }

        .dark-mode .dialog-title,
        .dark-mode .dialog-actions {
            border-color: rgba(255, 255, 255, 0.1);
            background: rgba(255, 255, 255, 0.03);
        }

        .dark-mode .logs-table th,
        .dark-mode .database-table th {
            background-color: #333;
            color: #f0f0f0;
        }

        .dark-mode .logs-table tr:hover,
        .dark-mode .database-table tr:hover {
            background-color: #383838;
        }

        .dark-mode .logs-table td,
        .dark-mode .database-table td {
            border-top: 1px solid #444;
        }

        .dark-mode .logs-table tr.day-separator {
            background-color: #2a3a8a;
            color: #e0e0e0;
            border-top: 2px solid #5c6bc0;
        }

        .dark-mode .logs-table tr.day-separator td {
            color: #e0e0e0;
        }

        .dark-mode .filter-input,
        .dark-mode .sort-dropdown,
        .dark-mode .form-control {
            background-color: #333;
            color: #f0f0f0;
            border: 1px solid #555;
        }

        .dark-mode .course-button {
            background-color: #444;
            color: #f0f0f0;
        }

        .dark-mode .course-button.active {
            background-color: var(--primary-color);
            color: white;
        }

        .dark-mode .footer,
        .dark-mode .social-links a,
        .dark-mode .theme-toggle {
            color: #a9a9a9;
        }

        .dark-mode .social-links a:hover,
        .dark-mode .theme-toggle:hover {
            color: var(--secondary-color);
        }

        /* Full Screen Scan Announcement */
        #scan-announcement-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(255, 255, 255, 0.95);
            z-index: 10001;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            text-align: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.15s ease-out;
            will-change: opacity;
            /* Allow scrolling underneath even when visible */
            touch-action: auto;
        }

        #scan-announcement-overlay.visible {
            opacity: 1;
            /* Only capture clicks on the content, not the whole overlay */
            pointer-events: none;
        }

        /* Make only the content area clickable to dismiss */
        #scan-announcement-overlay.visible .scan-announcement-content {
            pointer-events: auto;
            cursor: pointer;
        }

        .scan-announcement-content {
            transform: scale(0.9);
            transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        #scan-announcement-overlay.visible .scan-announcement-content {
            transform: scale(1);
        }

        #scan-announcement-overlay::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 1px;
            height: 1px;
            border-radius: 50%;
            /* 1. Stronger gradient for more visibility and a sharper edge */
            background: radial-gradient(circle, rgba(92, 107, 192, 0.7) 0%, rgba(92, 107, 192, 0.4) 30%, rgba(92, 107, 192, 0) 60%);
            /* 2. Faster animation that plays ONLY ONCE */
            animation: nfc-pulse 1.5s ease-out;
            z-index: 1;
        }

        /* Add this to your CSS */
        .dialog-label-fixed,
        .form-group label,
        .dialog-title,
        .course-button,
        .toggle-button {
            -webkit-user-select: none;
            /* Safari */
            -moz-user-select: none;
            /* Firefox */
            -ms-user-select: none;
            /* IE10+/Edge */
            user-select: none;
            /* Standard */
        }

        @keyframes nfc-pulse {
            0% {
                width: 1px;
                height: 1px;
                opacity: 0.7;
                /* Increased starting opacity */
                transform: translate(-50%, -50%);
            }

            100% {
                width: 1000px;
                /* Increased final size */
                height: 1000px;
                /* Increased final size */
                opacity: 0;
                transform: translate(-50%, -50%);
            }
        }

        @keyframes glow-amber {
            0% {
                box-shadow:
                    0 4px 8px rgba(0, 0, 0, 0.2),
                    0 0 5px rgba(255, 230, 180, 0.4),
                    0 0 10px #FFC107;
            }

            50% {
                box-shadow:
                    0 6px 12px rgba(0, 0, 0, 0.3),
                    0 0 15px rgba(255, 230, 180, 0.7),
                    0 0 25px #FFC107;
            }

            100% {
                box-shadow:
                    0 4px 8px rgba(0, 0, 0, 0.2),
                    0 0 5px rgba(255, 230, 180, 0.4),
                    0 0 10px #FFC107;
            }
        }

        @keyframes glow-red {
            0% {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px var(--danger-color);
            }

            50% {
                box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 0 15px rgba(255, 255, 255, 0.8), 0 0 25px var(--danger-color);
            }

            100% {
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 0 5px rgba(255, 255, 255, 0.5), 0 0 10px var(--danger-color);
            }
        }

        .scan-announcement-icon {
            font-size: 5em;
            color: #43a047;
            margin-bottom: 20px;
        }

        .scan-announcement-title {
            font-size: 2em;
            font-weight: 300;
        }

        .scan-announcement-name {
            font-family: 'Google Sans Flex', sans-serif;
            font-size: 2.5em;
            /* Slightly smaller for better fit */
            font-weight: 700;
            margin: 10px 0;
            padding: 0 20px;
            word-break: break-word;
            /* Prevent overflow */
        }

        .scan-announcement-subtitle {
            font-size: 1.2em;
            opacity: 0.8;
        }

        /* Dark mode for overlay */
        .dark-mode #scan-announcement-overlay {
            background-color: rgba(18, 18, 18, 0.95);
            color: #e0e0e0;
        }

        #logout-btn {
            background-color: var(--danger-color);
            color: white;
        }

        #logout-btn:hover {
            background-color: #d32f2f;
        }

        /* Hide sync status when signed out */
        body:not(.is-admin) .sync-container {
            display: none;
        }

        /* Hide course tabs when database view is active */
        body:has(#database-view.active) #course-tabs {
            display: none !important;
        }

        #database-view.active~#course-tabs {
            display: none !important;
        }

        @keyframes scaleIn {
            from {
                transform: scale(0.7);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .scan-time-display {
            display: flex;
            flex-direction: column;
            align-items: center;
            line-height: 1.4;
        }

        .scan-time-text {
            font-size: 1.0em;
            font-weight: 500;
            opacity: 0.9;
            margin-bottom: 2px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .scan-time-digits {
            font-size: 2.5em;
            font-weight: 800;
            font-variant-numeric: tabular-nums;
            color: white;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .modern-course-grid {
                grid-template-columns: 1fr;
            }

            #session-controls {
                flex-direction: column !important;
                /* Stack vertically */
                gap: 8px;
                /* Gap between rows */
                margin-bottom: 35px;
            }

            /* Full width table on mobile (Bleed edges) */
            .collapsible-module {
                overflow-x: clip;
            }

            .collapsible-module .table-container {
                width: 100%;
                border-radius: 0;
                border-left: 0;
                border-right: 0;
            }

            #session-category-group,
            #session-group-container {
                flex: none;
                /* Reset flex */
                width: 100%;
                /* Full width */
                justify-content: center;
                /* Center buttons */
            }

            #session-controls .course-button {
                padding-top: 4px;
                /* Taller padding */
                padding-bottom: 4px;
                /* Taller padding */
                min-height: 35px;
                /* Enforce taller height */
            }

            #session-group-container .course-button {
                /* Keep square-ish look but allow slight flex if needed, or keep rigid */
                flex: 1 !important;
                /* Slightly larger for touch */
                width: 50px !important;
            }

            #admin-views-container {
                grid-template-columns: 1fr !important;
            }

            /* Smaller action-chip buttons on mobile */
            .action-chip,
            .action-chip.has-items {
                padding: 6px 6px;
                font-size: 0.8em;
                min-width: auto;
            }

            /* Fix table horizontal scroll - ensure last column fills remaining space */
            .logs-table,
            .database-table {
                min-width: 100%;
                width: 100%;
                table-layout: auto;
            }

            /* Make actions column stretch to fill remaining space */
            .logs-table .actions-cell,
            .database-table .actions-cell,
            .logs-table th.actions-header,
            .database-table th:last-child {
                width: auto;
            }

            .logs-table th:last-child,
            .logs-table td:last-child,
            .database-table th:last-child,
            .database-table td:last-child {
                padding-right: 16px;
            }

            .settings-controls-bar {
                flex-direction: row;
                gap: 8px;
            }

            .settings-search-input {
                font-size: 0.9em;
            }

            #add-new-course-btn span {
                display: none;
            }

            #add-new-course-btn {
                padding: 0 12px;
            }

            .admin-input-wrapper {
                display: flex;
                align-items: center;
                gap: 10px;
                width: 100%;
                margin-bottom: 10px;
            }

            .admin-input-wrapper .input-with-icon {
                flex-grow: 1;
            }

            .admin-input-wrapper .btn-icon {
                flex-shrink: 0;
                width: 42px;
                height: 42px;
            }

            .admin-pills-list {
                display: flex;
                flex-wrap: wrap;
                gap: 8px;
                margin-top: 10px;
                padding: 5px;
                border: 1px dashed #ccc;
                /* Visual container */
                border-radius: 8px;
                min-height: 45px;
            }

            .admin-pill-item {
                background-color: #e3f2fd;
                color: var(--primary-color);
                border: 1px solid #bbdefb;
                padding: 6px 12px;
                border-radius: 50px;
                /* Fully rounded pill */
                font-size: 0.9em;
                font-weight: 500;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                transition: all 0.2s;
            }

            .admin-pill-item:hover {
                background-color: #bbdefb;
            }

            .admin-pill-item .remove-pill {
                cursor: pointer;
                opacity: 0.6;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                transition: all 0.2s;
            }

            .admin-pill-item .remove-pill:hover {
                opacity: 1;
                background-color: rgba(255, 255, 255, 0.5);
                color: var(--danger-color);
            }

            .dark-mode .admin-pill-item {
                background-color: rgba(57, 73, 171, 0.2);
                border-color: var(--primary-color);
                color: #c5cae9;
            }

            .comparison-grid {
                grid-template-columns: 1fr;
                /* Stack columns vertically */
                gap: 5px;
                /* Reduce gap */
            }

            .eis-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .bulk-actions-bar {
                width: 90%;
                /* Fit screen better */
                min-width: unset;
                bottom: 20px;
                padding: 10px 15px;
                gap: 10px;
                border-radius: 16px;
                /* Less rounded on mobile saves space */
            }

            .bulk-count-badge {
                font-size: 0.8em;
            }

            .bulk-actions-bar .btn-icon {
                width: 36px;
                height: 36px;
            }

            .comparison-grid .form-group {
                margin-bottom: 0;
                /* Remove bottom margin from inner form group */
            }

            .dialog {
                width: 95%;
                /* Use almost full width */
                border-radius: 24px;
                /* Keep it rounded */
                max-height: 80vh;
                /* Avoid covering top/bottom bars */
            }

            .dialog-backdrop {
                align-items: center;
                /* Ensure vertical centering */
                padding: 0;
            }

            .dialog-title {
                padding: 20px 20px 15px 20px;
                margin: 0;
                font-size: 1.2em;
            }

            /* Adjust negative margins to match reduced mobile padding */
            .dialog-content {
                padding: 15px 20px;
            }

            /* Stack buttons on very small screens if needed */
            .dialog-actions {
                padding: 15px 20px 20px 20px;
            }

            .dialog-content table {
                display: block;
                width: 100%;
            }

            .comparison-grid .field-action {
                justify-content: flex-start;
                /* Align checkbox/select to the left */
                margin-top: 5px;
                /* Add space above the action */
                margin-bottom: 10px;
                /* Add space below the action */
                padding-left: 95px;
                /* Indent action to align below input */
            }

            /* Ensure labels inside the grid align left */
            .comparison-grid .form-group label {
                text-align: left;
                flex-basis: auto;
                /* Allow label width to be natural */
                margin-right: 10px;
                /* Add some space between label and input */
            }

            /* Adjust input alignment if needed */
            .comparison-grid .form-group input {
                flex-grow: 1;
            }


            .day-separator-actions .eis-day-btn,
            .day-separator-actions .btn-green {
                display: none !important;
            }

            /* 3. Revert the date alignment to the left for mobile */
            .day-separator-date {
                flex-grow: 0;
                /* Stop it from expanding */
                text-align: left;
                /* Remove the desktop padding */
            }

            .course-buttons-container {
                margin-bottom: 20px;
                gap: 8px 4px;
            }

            .logs-table tr.day-separator td {
                text-align: left;
                /* On mobile, align the date to the left */
            }

            #not-signed-in-message p {
                font-size: 1.1em;
            }

            #not-signed-in-message h2 {
                font-size: 1.8em;
            }

            .logs-count {
                margin-bottom: 10px;
            }

            .logs-table td:not(.times-cell) {
                white-space: nowrap;
            }

            #direct-eis-export-btn {
                display: none !important;
            }

            .logs-table th,
            .logs-table td {
                padding: 8px 10px;
            }

            .time-tag {
                font-size: 0.85em;
                padding: 7px 3px;
            }

            .logs-header,
            .database-controls {
                display: flex;
                justify-content: space-between;
                /* Pushes items to edges */
                align-items: center;
                flex-wrap: wrap;
            }

            .logs-actions,
            .database-actions {
                display: flex;
                justify-content: flex-end;
                /* Align buttons to the right */
            }

            /* 1. Reposition and center the notification container */
            .in-page-notifications {
                width: 90%;
                /* Make it responsive */
                max-width: 400px;
                /* Set a max-width for small tablets */
                bottom: 20px;
                /* Position from the bottom */
                right: auto;
                /* Unset the right positioning */
                left: 50%;
                /* Position the left edge at the center */
                transform: translateX(-50%);
                /* Pull it back by half its width to truly center it */
            }

            /* 2. Apply the vertical slide-up animation on entrance */
            .in-page-notification {
                animation: slide-in-mobile 0.3s ease-out forwards;
            }

            /* 3. Make the notification slide down on exit */
            .in-page-notification.removing {
                opacity: 0;
                transform: translateY(100%);
                /* Slide it down */
                transition: opacity 0.3s ease, transform 0.3s ease;
            }

            .container {
                padding: 20px;
            }

            /* Compact Header */
            .app-header {
                padding: 20px;
                border-radius: 15px;
            }

            .app-header h1 {
                font-size: 1.6em;
            }

            .app-header h2 {
                font-size: 0.9em;
                margin-bottom: 10px;
            }

            .app-info {
                gap: 5px;
            }

            .info-item {
                padding: 6px 10px;
                font-size: 0.8em;
                line-height: normal;
                height: auto;
            }

            /* Better Table View */
            .logs-table {
                font-size: 1em;
                /* Make text readable */
            }

            /* Smaller Notifications */
            .in-page-notifications {
                width: 90%;
                max-width: 350px;
                /* Set a max-width */
            }

            .actions-cell {
                text-align: right;
                /* Align icons to the right */
            }


            /* Hide Desktop-focused elements */
            .app-header .info-item:nth-child(2) {
                display: none !important;
            }


            /* Main focus is on scanning */
            #scanner-tab .module {
                margin-top: -10px;
                /* Close the gap from hidden header items */
            }

            #scanner-tab .table-container {
                transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
                opacity: 1;
                transform: translateY(0);
            }

            /* Define the 'reloading' state */
            #scanner-tab .table-container.reloading {
                opacity: 0;
                transform: translateY(15px);
            }

            /* --- Animation Definitions --- */

            /* Animation for Light Mode */
            @keyframes highlight-fade {
                from {
                    background-color: rgba(92, 107, 192, 0.2);
                }

                to {
                    background-color: transparent;
                }
            }

            /* A separate animation for Dark Mode with different colours */
            @keyframes highlight-fade-dark {
                from {
                    background-color: rgba(92, 107, 192, 0.4);
                }

                to {
                    background-color: transparent;
                }
            }

            /* --- Animation Application --- */

            /* Apply the correct animation based on the theme */
            .new-item-flash {
                animation: highlight-fade 1.5s ease-out;
            }

            .dark-mode .new-item-flash {
                animation-name: highlight-fade-dark;
                /* Just change the name here */
            }

            .sync-auth-container {
                display: flex;
                flex-direction: row;
                /* Ensure it's a row */
                justify-content: space-between;
                align-items: center;
                gap: 10px;
                margin-bottom: 10px;
            }

            .sync-container,
            .auth-container {
                margin-bottom: 0;
            }

            .user-info {
                flex-wrap: wrap;
                /* This will make the buttons wrap to the next line */
                justify-content: flex-end;
                /* Keep items aligned to the right */
            }

            /* Hide user name on mobile */
            .user-info #user-name {
                display: none;
            }

            .student-profile-chip {
                padding-right: 4px;
                /* Match the left padding (was 12px) */
                gap: 0;
                /* Remove the gap */
            }

            #login-btn {
                padding: 12px 25px;
                font-size: 1.0em;
                width: 100%;
            }

            .logs-table,
            .database-table {
                font-size: 0.9em;
                /* Make font slightly smaller */
            }

            .logs-table th,
            .logs-table td,
            .database-table th,
            .database-table td {
                padding: 8px;
                /* Reduce padding */
            }

            @keyframes slide-in-mobile {
                from {
                    transform: translateY(100%);
                    opacity: 0;
                }

                to {
                    transform: translateY(0);
                    opacity: 1;
                }
            }
        }

        body.is-loading {
            overflow: hidden;
        }

        /* --- Button Loading States (QoL Improvement) --- */
        #login-btn.loading,
        #logout-btn.loading {
            pointer-events: none;
            opacity: 0.8;
            cursor: wait;
        }

        #login-btn.loading {
            background-color: #9e9e9e;
        }

        .course-button.loading {
            pointer-events: none;
            opacity: 0.7;
        }

        /* Smooth selection feedback for course buttons */
        .course-button {
            transition: all 0.15s ease-out, transform 0.1s ease-out;
        }

        .course-button.selecting {
            transform: scale(0.95);
            opacity: 0.8;
        }

        /* --- Pagination Controls (QoL Improvement) --- */
        .pagination-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            padding: 15px 0;
            margin-top: 10px;
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            font-family: 'Google Sans Flex', sans-serif;
        }

        .page-numbers {
            display: flex;
            gap: 4px;
            align-items: center;
        }

        .page-btn {
            min-width: 36px;
            height: 36px;
            padding: 0 10px;
            border: 1px solid #e0e0e0;
            background: var(--card-background);
            color: var(--text-color);
            border-radius: 8px;
            cursor: pointer;
            font-family: 'Google Sans Flex', sans-serif;
            font-weight: 500;
            font-size: 0.9em;
            transition: all 0.15s ease-out;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            box-shadow: none;
        }

        .page-btn:hover {
            border-color: var(--primary-color);
            background: rgba(92, 107, 192, 0.1);
            box-shadow: none;
            transform: none;
        }

        .page-btn.active {
            background: var(--primary-color);
            color: white;
            border-color: var(--primary-color);
        }

        .page-btn.ellipsis {
            border: none;
            background: transparent;
            cursor: default;
            pointer-events: none;
            min-width: 24px;
        }

        .pagination-btn {
            width: 36px;
            height: 36px;
            border-radius: 8px;
            background: var(--card-background);
            border: 1px solid #e0e0e0;
            box-shadow: none;
        }

        /* Fix icon color - arrows should be visible */
        .pagination-btn i {
            color: var(--primary-color);
        }

        .pagination-btn:hover {
            border-color: var(--primary-color);
            background: rgba(92, 107, 192, 0.1);
            box-shadow: none;
            transform: none;
        }

        .pagination-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .pagination-btn:disabled i {
            color: #999;
        }

        .dark-mode .pagination-controls {
            border-top-color: rgba(255, 255, 255, 0.08);
        }

        .dark-mode .page-btn {
            border-color: #444;
        }

        .dark-mode .page-btn:hover {
            background: rgba(92, 107, 192, 0.2);
        }

        .dark-mode .pagination-btn {
            border-color: #444;
        }

        .dark-mode .pagination-btn i {
            color: #aaa;
        }

        /* Stable table container height to prevent jumping */
        .module-content .table-container {
            min-height: 200px;
        }

        /* --- Mobile Breakpoint 500px (QoL Improvement) --- */
        @media (max-width: 500px) {

            /* Ensure minimum tap target sizes on small screens */
            .user-info .btn-icon,
            .user-info .btn-sm {
                min-width: 44px;
                min-height: 44px;
            }

            .user-info #register-uid-btn .btn-text,
            .user-info #request-permission-btn .btn-text {
                display: none;
            }

            /* User avatar sizing */
            .user-info .user-avatar {
                width: 36px;
                height: 36px;
            }

            /* Prevent info-item overflow */
            .info-item {
                flex-shrink: 1;
                min-width: 0;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            /* App info should wrap properly */
            .app-info {
                flex-wrap: wrap;
                gap: 4px;
            }

            /* Mobile day separator - left align */
            .day-separator-content {
                justify-content: flex-start;
                padding-right: 90px;
            }

            .day-separator-date {
                padding: 5px 10px;
                font-size: 0.8em;
            }

            .day-separator-actions {
                gap: 2px;
            }

            .day-separator-actions .eis-day-btn {
                padding: 6px 8px;
                font-size: 0.75em;
            }

            .day-separator-actions .eis-day-btn i {
                display: none;
            }
        }


        @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;
            }
        }

        /* --- Skeleton Loader Styles --- */
        .skeleton-loader-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10000;
            background-color: var(--background-color);
            opacity: 1;
            transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
        }

        .skeleton-loader-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }

        .skeleton-loader.hidden {
            opacity: 0;
            pointer-events: none;
        }

        @keyframes shimmer {
            0% {
                background-position: -200% 0;
            }

            100% {
                background-position: 200% 0;
            }
        }

        /* --- Cat Companion Styles --- */
        #cat-companion {
            position: fixed;
            bottom: 20px;
            right: 60px;
            z-index: 999;
            /* Below dialogs (1000+) but above page content */
            cursor: pointer;
            transition: transform 0.2s ease;
            width: 100px;
            /* Adjust based on your image size */
        }

        #cat-companion img {
            width: 150%;
            height: auto;
            display: block;
            /* Optional: Add a drop shadow to the cat */
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        #cat-companion:active {
            transform: translateY(0) scale(0.95);
        }

        /* Speech Bubble */
        .cat-speech-bubble {
            position: absolute;
            bottom: 100%;
            /* Position above the cat */
            right: -20px;
            background-color: var(--card-background);
            color: var(--text-color);
            padding: 12px 16px;
            border-radius: 18px;
            border-bottom-right-radius: 2px;
            /* Tail effect */
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            border: 1px solid #e0e0e0;
            font-size: 0.85em;
            font-weight: 500;
            margin-bottom: 8px;
            line-height: 1.5;
            width: 170px;

            /* --- JUSTIFICATION SETTINGS --- */
            text-align: justify;
            -webkit-hyphens: auto;
            -moz-hyphens: auto;
            hyphens: auto;
            word-break: break-word;

            /* Hidden State */
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px) scale(0.9);
            transform-origin: bottom right;
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.3s;
            pointer-events: none;
            z-index: 1000;
        }

        /* Visible State */
        .cat-speech-bubble.visible {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        /* Dark Mode Adjustments */
        .dark-mode .cat-speech-bubble {
            background-color: #2c2c2e;
            border-color: #444;
            color: #e0e0e0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
        }

        /* Hide on Mobile (As requested) */
        @media (max-width: 768px) {
            #cat-companion {
                display: none !important;
            }
        }

        .skeleton-line,
        .skeleton-info-item,
        .skeleton-course-btn,
        .skeleton-module-header,
        .skeleton-module-content {
            background-color: #e0e0e0;
            /* Use background-color instead of background */
            border-radius: 8px;

            /* Add the shimmer gradient */
            background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
            background-size: 200% 100%;
            background-repeat: no-repeat;

            /* Apply the animation */
            animation: shimmer 2s linear infinite;
        }

        /* Style for the first info card */
        .skeleton-info-item:first-child {
            border-top-left-radius: 14px;
            border-bottom-left-radius: 14px;
        }

        /* Style for the last info card */
        .skeleton-info-item:last-child {
            border-top-right-radius: 14px;
            border-bottom-right-radius: 14px;
        }

        /* Style for the first course button skeleton */
        .skeleton-course-btn:first-child {
            border-top-left-radius: 18px;
            border-bottom-left-radius: 18px;
        }

        /* Style for the last course button skeleton */
        .skeleton-course-btn:last-child {
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
        }

        .skeleton-header {
            background-color: #e0e0e0;
            padding: 30px;
            border-radius: 20px;
            margin-top: 50px;
            margin-bottom: 20px;

            /* Add the same shimmer properties */
            background-image: linear-gradient(90deg, #e0e0e0, #f5f5f5, #e0e0e0);
            background-size: 200% 100%;
            background-repeat: no-repeat;
            animation: shimmer 2s linear infinite;
        }

        .skeleton-line {
            height: 20px;
            margin-bottom: 10px;
        }

        .skeleton-line.title {
            height: 40px;
            width: 60%;
        }

        .skeleton-line.subtitle {
            height: 24px;
            width: 40%;
        }

        .skeleton-info-bar {
            display: flex;
            gap: 5px;
            margin-top: 20px;
        }

        .skeleton-info-item {
            flex: 1;
            height: 50px;
        }

        .skeleton-courses {
            display: flex;
            gap: 5px;
            margin-bottom: 20px;
        }

        .skeleton-course-btn {
            height: 45px;
            width: 120px;
        }

        .skeleton-module {
            border-radius: 20px;
            overflow: hidden;
        }

        .skeleton-module-header {
            height: 50px;
        }

        .skeleton-module-content {
            margin-top: 2px;
            height: 200px;
        }

        .dark-mode .skeleton-header,
        .dark-mode .skeleton-line,
        .dark-mode .skeleton-info-item,
        .dark-mode .skeleton-course-btn,
        .dark-mode .skeleton-module-header,
        .dark-mode .skeleton-module-content {
            background-color: #2c2c2e;
            /* Add the dark mode shimmer gradient */
            background-image: linear-gradient(90deg, #2c2c2e, #3a3a3c, #2c2c2e);
        }

        .cat-companion {
            display: none;
            opacity: 0;
            transform: scale(0) translateY(20px);
            transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            pointer-events: none;
        }

        .cat-companion.visible {
            opacity: 1;
            transform: scale(1) translateY(0);
            pointer-events: auto;
            animation: catPopUp 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        @keyframes catPopUp {
            0% {
                transform: scale(0) translateY(20px);
                opacity: 0;
            }

            60% {
                transform: scale(1.1) translateY(-5px);
                opacity: 1;
            }

            100% {
                transform: scale(1) translateY(0);
                opacity: 1;
            }
        }