/* ============================================================
   CSS CUSTOM PROPERTIES — LIGHT / DARK MODE
   ============================================================ */
:root,
[data-theme="light"] {
    /* Body */
    --body-bg: linear-gradient(145deg, #0f2d52 0%, #1a4a7a 40%, #0d2744 100%);

    /* Glass panels */
    --glass-bg:     rgba(255, 255, 255, 0.86);
    --glass-border: rgba(255, 255, 255, 0.55);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
    --glass-blur:   blur(18px);

    /* Scrollbars (dark thumb for light surfaces) */
    --scrollbar-thumb:       rgba(0, 0, 0, 0.28);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.45);

    /* Navigation / Footer */
    --nav-bg:     rgba(6, 16, 38, 0.55);
    --nav-border: rgba(255, 255, 255, 0.10);
    --nav-text:   #ffffff;
    --nav-muted:  rgba(255, 255, 255, 0.60);

    /* Text */
    --text-primary:   #0c1d36;
    --text-secondary: #1e3a5f;
    --text-muted:     #5a6f82;
    --text-inverse:   #ffffff;

    /* Accent (navy-blue family) */
    --accent:         #1a5fa8;
    --accent-hover:   #134f8e;
    --accent-light:   rgba(26, 95, 168, 0.18);
    --accent-border:  rgba(26, 95, 168, 0.28);

    /* Calendar */
    --cal-header-bg:     #1a5fa8;
    --cal-header-text:   #ffffff;
    /* Frost matches the white .glass-panel siblings exactly (same 0.86 white +
       blur), and empty cells are transparent so the calendar surface reads
       identical to the surrounding panels. Only the time column and drop
       targets carry a subtle tint. */
    --cal-frost:         rgba(255, 255, 255, 0.86);
    --cal-cell-bg:       rgba(255, 255, 255, 0.00);
    --cal-droppable-bg:  rgba(200, 225, 255, 0.22);
    --cal-time-bg:       rgba(235, 244, 255, 0.40);
    --cal-time-text:     #2a4a6e;
    --cal-border:        rgba(0, 0, 0, 0.07);
    --cal-hover-border:  #1a5fa8;
    --cal-highlight:     rgba(26, 95, 168, 0.22);

    /* Inputs */
    --input-bg:           rgba(255, 255, 255, 0.95);
    --input-border:       rgba(0, 0, 0, 0.14);
    --input-text:         #0c1d36;
    --input-focus-border: #1a5fa8;
    --input-focus-glow:   rgba(26, 95, 168, 0.18);

    /* Subject items */
    --subject-item-bg:        rgba(255, 255, 255, 0.98);
    --subject-item-border:    rgba(0, 0, 0, 0.07);
    --subject-accent:         #1a5fa8;
    --subject-completed-bg:   rgba(210, 215, 220, 0.55);
    --subject-mismatch-bg:    rgba(245, 158, 11, 0.07);
    --subject-mismatch-code:  #7c4e00;

    /* Buttons */
    --btn-primary-bg:    #1a5fa8;
    --btn-primary-hover: #134f8e;
    --btn-primary-glow:  rgba(26, 95, 168, 0.30);
    --btn-danger-bg:     #dc3545;
    --btn-success-bg:    #1a8a4a;

    /* Dialogs */
    --dialog-bg:        #ffffff;
    --dialog-header-bg: #1a5fa8;
    --dialog-border:    rgba(0, 0, 0, 0.10);
    --dialog-text:      #1a2f4e;

    /* Footer */
    --footer-bg:   rgba(6, 16, 38, 0.55);
    --footer-text: rgba(255, 255, 255, 0.65);
}

[data-theme="dark"] {
    /* Body */
    --body-bg: linear-gradient(145deg, #040b18 0%, #071525 40%, #050e20 100%);

    /* Glass panels */
    --glass-bg:     rgba(8, 20, 50, 0.78);
    --glass-border: rgba(255, 255, 255, 0.09);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.38), 0 2px 8px rgba(0, 0, 0, 0.22);
    --glass-blur:   blur(18px);

    /* Scrollbars (light thumb for dark surfaces) */
    --scrollbar-thumb:       rgba(255, 255, 255, 0.22);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.40);

    /* Navigation / Footer */
    --nav-bg:     rgba(2, 7, 18, 0.55);
    --nav-border: rgba(255, 255, 255, 0.07);
    --nav-text:   #ffffff;
    --nav-muted:  rgba(255, 255, 255, 0.50);

    /* Text */
    --text-primary:   #dde6f0;
    --text-secondary: #8aaac8;
    --text-muted:     #5a7898;
    --text-inverse:   #0c1d36;

    /* Accent */
    --accent:         #3d8fe0;
    --accent-hover:   #2a7acc;
    --accent-light:   rgba(61, 143, 224, 0.12);
    --accent-border:  rgba(61, 143, 224, 0.28);

    /* Calendar */
    --cal-header-bg:     #163666;
    --cal-header-text:   #dde6f0;
    --cal-frost:         rgba(8, 20, 50, 0.45);
    --cal-cell-bg:       rgba(8, 22, 52, 0.32);
    --cal-droppable-bg:  rgba(12, 30, 68, 0.36);
    --cal-time-bg:       rgba(6, 16, 40, 0.48);
    --cal-time-text:     #8aaac8;
    --cal-border:        rgba(255, 255, 255, 0.06);
    --cal-hover-border:  #3d8fe0;
    --cal-highlight:     rgba(61, 143, 224, 0.13);

    /* Inputs */
    --input-bg:           rgba(10, 24, 58, 0.78);
    --input-border:       rgba(255, 255, 255, 0.11);
    --input-text:         #dde6f0;
    --input-focus-border: #3d8fe0;
    --input-focus-glow:   rgba(61, 143, 224, 0.20);

    /* Subject items */
    --subject-item-bg:        rgba(10, 24, 55, 0.68);
    --subject-item-border:    rgba(255, 255, 255, 0.07);
    --subject-accent:         #3d8fe0;
    --subject-completed-bg:   rgba(25, 35, 55, 0.60);
    --subject-mismatch-bg:    rgba(245, 158, 11, 0.10);
    --subject-mismatch-code:  #fbbf24;

    /* Buttons */
    --btn-primary-bg:    #3d8fe0;
    --btn-primary-hover: #2a7acc;
    --btn-primary-glow:  rgba(61, 143, 224, 0.30);
    --btn-danger-bg:     #ef4444;
    --btn-success-bg:    #22c55e;

    /* Dialogs */
    --dialog-bg:        #0c1e42;
    --dialog-header-bg: #163666;
    --dialog-border:    rgba(255, 255, 255, 0.09);
    --dialog-text:      #dde6f0;

    /* Footer */
    --footer-bg:   rgba(2, 7, 18, 0.55);
    --footer-text: rgba(255, 255, 255, 0.50);
}

/* ============================================================
   GLOBAL RESET & BASE
   ============================================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Selectively reset Bootstrap's border-radius overrides */
.btn,
.form-control,
.form-select,
.input-group,
.input-group-text {
    border-radius: 4px !important;
}

.modal-content,
.alert,
.card {
    border-radius: 6px !important;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--body-bg);
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--text-primary);
    transition: color 0.25s ease;
}

/* ============================================================
   PAGE SYSTEM
   ============================================================ */
#hexBg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.page {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
}

.page.active {
    display: flex;
}

/* Calendar page overrides to block layout */
#calendarPage.active {
    display: block !important;
    align-items: initial;
    justify-content: initial;
}

/* ============================================================
   GLASS PANEL UTILITY CLASS
   ============================================================ */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 6px;
}

/* ============================================================
   TOP NAVIGATION BAR
   ============================================================ */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 62px;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    background: var(--nav-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--nav-border);
    box-shadow: 0 2px 24px rgba(0, 0, 0, 0.28);
    transition: background 0.3s ease;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-icon {
    font-size: 22px;
    color: #5bc0eb;
}

.nav-title {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--nav-text);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.nav-user-info {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--nav-muted);
    font-size: 13px;
}

.nav-user-info i {
    font-size: 18px;
    color: #5bc0eb;
}

/* Theme toggle button */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #f0c848 !important;
    width: 36px;
    height: 36px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.22s ease;
    padding: 0 !important;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    transform: rotate(22deg) scale(1.05);
    color: #ffe066 !important;
}

/* Logout button in nav */
.nav-logout-btn {
    background: rgba(220, 53, 69, 0.12) !important;
    border: 1px solid rgba(220, 53, 69, 0.36) !important;
    color: #ff9090 !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-logout-btn:hover {
    background: rgba(220, 53, 69, 0.28) !important;
    color: #ffffff !important;
    border-color: rgba(220, 53, 69, 0.6) !important;
}

/* ============================================================
   CALENDAR MAIN LAYOUT
   ============================================================ */
.calendar-main {
    padding-top: 78px;
    padding-bottom: 60px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

.calendar-container {
    width: 100%;
    max-width: 1640px;
}

/* ============================================================
   NAVIGATION (SELECTOR) BAR
   ============================================================ */
.navigation-bar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: 16px;
    align-items: end;
    margin-bottom: 14px;
    padding: 20px 24px;
}

.navigation-bar .form-group {
    margin-bottom: 0;
}

.navigation-bar label {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 7px;
    display: block;
}

.load-btn {
    padding: 8px 20px !important;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-weight: 700 !important;
    font-size: 13px !important;
    align-self: end;
}

/* ============================================================
   FILTER SECTION
   ============================================================ */
.filter-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 14px;
    padding: 16px 24px;
}

.filter-section .form-group {
    margin-bottom: 0;
}

.filter-section label {
    color: var(--text-primary) !important;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 7px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ============================================================
   MAIN CONTENT AREA
   ============================================================ */
.main-content {
    display: grid;
    grid-template-columns: 1fr 365px;
    gap: 14px;
    align-items: stretch;
}

/* ============================================================
   CALENDAR WRAPPER & TABLE
   ============================================================ */
.calendar-wrapper {
    overflow-x: auto;
    padding: 0;
    align-self: start;
    position: relative;
    isolation: isolate;
    /* Glass frame stays (border/shadow/radius from .glass-panel), but the blur
       must NOT live on this element: backdrop-filter would composite the table
       onto a GPU layer whose raster snaps 1px grid borders away at fractional
       zoom (lines vanish/thicken and stay broken after a repaint). Instead the
       blur goes on ::before, a sibling layer *behind* the table, so the table
       paints normally and stays crisp while still sitting on frosted glass. */
    background: transparent;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.calendar-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: var(--cal-frost);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    pointer-events: none;
}

/* Calendar scrollbar styled by the unified scrollbar block below. */

#calendar {
    width: 100%;
    /* Sit above the ::before frost layer. */
    position: relative;
    z-index: 1;
    /* "separate" + single-direction cell borders renders crisp 1px grid lines
       at fractional zoom / display scaling (125%, 150%). "collapse" lets the
       browser merge shared borders and round them unevenly, which made some
       lines vanish, double, or shift color. */
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    margin-bottom: 0;
    /* Outer top/left edge; each cell draws its own right/bottom line. */
    border-top: 1px solid var(--cal-border);
    border-left: 1px solid var(--cal-border);
}

#calendar th {
    background: var(--cal-header-bg);
    color: var(--cal-header-text);
    padding: 10px 8px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
    border-right: 1px solid var(--cal-border);
    border-bottom: 1px solid var(--cal-border);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

#calendar td {
    border-right: 1px solid var(--cal-border);
    border-bottom: 1px solid var(--cal-border);
    padding: 2px;
    min-width: 120px;
    height: 30px;
    vertical-align: top;
    position: relative;
    background: var(--cal-cell-bg);
}

#calendar td.time-cell {
    background: var(--cal-time-bg);
    font-weight: 600;
    text-align: center;
    width: 185px;
    min-width: 185px;
    max-width: 185px;
    font-size: 12px;
    vertical-align: middle;
    font-family: 'Cascadia Code', 'Consolas', 'Monaco', 'Menlo', monospace;
    white-space: nowrap;
    color: var(--cal-time-text);
}

#calendar td.droppable {
    background: var(--cal-droppable-bg);
    cursor: default;
}

/* Occupied/unavailable cells are covered by an absolutely-positioned block, but
   a block can start/end on a :15/:45 minute and leave a thin uncovered sliver of
   the anchor cell. Match the droppable background so that sliver blends with the
   empty neighbours instead of showing the page behind (a visible mismatch in dark
   mode), and keep the default cursor so the sliver doesn't flash a stop icon. */
#calendar td.unavailable {
    background: var(--cal-droppable-bg);
    cursor: default;
}

#calendar td.occupied {
    background: var(--cal-droppable-bg);
    cursor: default;
}

#calendar td.ui-droppable-hover {
    background: var(--accent-light) !important;
    border: 2px dashed var(--cal-hover-border) !important;
}

/* Drag highlighting */
#calendar thead th.drag-highlight {
    background: var(--accent) !important;
    color: white !important;
}

[data-theme="light"] #calendar thead th.drag-highlight {
    background: #4da3ff !important;
    color: #ffffff !important;
}

#calendar td.time-cell.drag-highlight {
    background: var(--accent) !important;
    color: white !important;
}

[data-theme="light"] #calendar td.time-cell.drag-highlight {
    background: #4da3ff !important;
    color: #ffffff !important;
}

#calendar td.column-highlight {
    background: var(--cal-highlight) !important;
}

#calendar td.row-highlight {
    background: var(--cal-highlight) !important;
}

/* ============================================================
   SCHEDULED CLASS BLOCKS
   ============================================================ */
.scheduled-class {
    color: white;
    border-radius: 5px !important;
    font-size: 12px;
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    z-index: 5;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Inner scroll area — only the text scrolls; ribbon/delete float on the shell */
.scheduled-class .sc-scroll {
    position: absolute;
    inset: 0;
    overflow: auto;
    padding: 6px 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.scheduled-class .sc-scroll::-webkit-scrollbar {
    display: none;
}

.scheduled-class .class-info {
    margin-bottom: 3px;
    padding-right: 26px;
}

.scheduled-class .delete-btn {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(220, 53, 69, 0.88) !important;
    color: white !important;
    border: none !important;
    border-radius: 4px !important;
    width: 22px;
    height: 22px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
    transition: background 0.18s;
}

.scheduled-class .delete-btn:hover {
    background: #dc3545 !important;
}

/* Session-type ribbon (LEC / LAB) — flat flag banner at the top-right corner */
.scheduled-class .session-ribbon {
    --ribbon: #2563eb;
    position: absolute;
    top: 6px;
    right: 0;
    padding: 2px 8px 2px 15px;
    background: var(--ribbon);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    line-height: 1.3;
    cursor: pointer;
    z-index: 11;
    box-shadow: -1px 2px 4px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    /* fishtail notch cut into the left edge */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 9px 50%);
    transition: filter 0.18s;
}

.scheduled-class .session-ribbon.lab {
    --ribbon: #7c3aed;
}

.scheduled-class .session-ribbon:hover {
    filter: brightness(1.12);
}

/* ============================================================
   UNAVAILABLE BLOCKS
   ============================================================ */
.unavailable-block {
    background: rgba(90, 100, 120, 0.42);
    color: rgba(255, 255, 255, 0.82);
    padding: 8px;
    border-radius: 4px !important;
    font-size: 11px;
    cursor: pointer;
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    z-index: 4;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 500;
    border: 2px dashed rgba(255, 255, 255, 0.30) !important;
    transition: background 0.18s;
}

.unavailable-block:hover {
    background: rgba(90, 100, 120, 0.60);
}

.unavailable-block.unavailable-both {
    background: rgba(70, 80, 100, 0.48);
    border: 2px dashed rgba(255, 100, 100, 0.45) !important;
}

.unavailable-block.unavailable-both:hover {
    background: rgba(70, 80, 100, 0.68);
}

.unavailable-text {
    line-height: 1.3;
}

/* ============================================================
   SUBJECTS PANEL
   ============================================================ */
.subjects-panel {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    /* Height is pinned to the calendar by syncSubjectsPanelHeight(); the panel
       clips and #subjectsList scrolls inside it. */
    overflow: hidden;
    min-height: 0;
    /* backdrop-filter makes this a containing block for absolute children,
       which breaks jQuery UI drag coordinate calculations */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.subjects-title {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--glass-border);
    padding-bottom: 12px;
}

.subjects-title i {
    color: var(--accent);
    font-size: 14px;
}

.subjects-count {
    font-weight: 400;
    font-size: 11px;
    color: var(--text-muted);
    margin-left: 2px;
}

#subjectsList {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-top: 2px;
    padding-right: 2px;
}

/* #subjectsList scrollbar styled by the unified scrollbar block. */

/* Subject items */
.subject-item {
    background: var(--subject-item-bg);
    padding: 11px 14px;
    margin-bottom: 8px;
    border-radius: 4px !important;
    border: 1px solid var(--subject-item-border) !important;
    border-left: 4px solid var(--subject-accent) !important;
    cursor: move;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.subject-item:hover {
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

.subject-item.completed {
    background: var(--subject-completed-bg);
    border-left-color: #8899aa !important;
    cursor: not-allowed;
    opacity: 0.60;
}

.subject-item.instructor-mismatch {
    opacity: 0.78;
    border-left-color: #f59e0b !important;
    background: var(--subject-mismatch-bg);
    cursor: not-allowed;
}

.subject-item.instructor-mismatch .subject-code {
    color: var(--subject-mismatch-code);
}

.subject-item .subject-code {
    font-weight: 700;
    font-size: 12px;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.subject-item.completed .subject-code {
    color: var(--text-muted);
}

.subject-item .subject-name {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 3px;
    line-height: 1.4;
}

.subject-item .subject-hours {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 3px;
}

.subject-item .instructor-name {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 2px;
}

.ui-draggable-dragging {
    opacity: 0.78;
    z-index: 1000;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.30) !important;
}

/* ============================================================
   FORM & INPUT STYLES
   ============================================================ */
.form-group {
    margin-bottom: 18px;
}

.form-group label,
.form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-primary) !important;
    font-weight: 500;
    font-size: 13px;
}

.form-control,
.form-select {
    background: var(--input-bg) !important;
    border: 1px solid var(--input-border) !important;
    color: var(--input-text) !important;
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-radius: 4px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus,
.form-select:focus {
    outline: none !important;
    border-color: var(--input-focus-border) !important;
    box-shadow: 0 0 0 3px var(--input-focus-glow) !important;
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
}

.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 0.75;
}

.form-select option {
    background: var(--input-bg);
    color: var(--input-text);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
    background: var(--btn-primary-bg) !important;
    border-color: var(--btn-primary-bg) !important;
    color: white !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--btn-primary-hover) !important;
    border-color: var(--btn-primary-hover) !important;
    box-shadow: 0 4px 14px var(--btn-primary-glow) !important;
    transform: translateY(-1px);
}

.btn-danger {
    background: var(--btn-danger-bg) !important;
    border-color: var(--btn-danger-bg) !important;
    color: white !important;
    border-radius: 4px !important;
}

/* ============================================================
   ERROR MESSAGE
   ============================================================ */
.error-message {
    color: #dc2626;
    margin-top: 10px;
    font-size: 13px;
    display: none;
    padding: 10px 14px;
    background: rgba(220, 38, 38, 0.07);
    border: 1px solid rgba(220, 38, 38, 0.22);
    border-radius: 4px;
}

.error-message.show {
    display: block;
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */
#loginPage {
    background: transparent;
}

.login-container {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    border-radius: 6px !important;
    padding: 44px 48px 40px;
    width: 100%;
    max-width: 430px;
    position: relative;
}

.login-brand {
    text-align: center;
    margin-bottom: 34px;
}

.login-logo {
    width: 66px;
    height: 66px;
    background: var(--btn-primary-bg);
    border-radius: 4px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    box-shadow: 0 8px 26px var(--btn-primary-glow);
}

.login-logo i {
    font-size: 32px;
    color: white;
}

.login-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.login-subtitle {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 0;
    letter-spacing: 0.2px;
}

.login-btn {
    height: 46px;
    font-size: 14px !important;
    font-weight: 700 !important;
    border-radius: 4px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.2px;
}

/* Floating theme toggle on login card */
.theme-toggle-floating {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--accent-light) !important;
    border: 1px solid var(--accent-border) !important;
    color: var(--accent) !important;
    width: 34px;
    height: 34px;
    border-radius: 50% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 !important;
}

.theme-toggle-floating:hover {
    background: var(--accent) !important;
    color: white !important;
    transform: rotate(20deg);
}

/* ============================================================
   JQUERY UI DIALOG
   ============================================================ */
.ui-widget-overlay {
    background: rgba(0, 0, 0, 0.58) !important;
    opacity: 1 !important;
    backdrop-filter: blur(5px);
}

.ui-dialog {
    z-index: 1001 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.38) !important;
    border-radius: 6px !important;
    overflow: hidden;
    border: none !important;
    background: var(--dialog-bg) !important;
}

.ui-dialog-titlebar {
    background: var(--dialog-header-bg) !important;
    color: white !important;
    border: none !important;
    padding: 16px 22px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    color: white !important;
    opacity: 0.75;
    border-radius: 50% !important;
    transition: all 0.18s;
}

.ui-dialog-titlebar-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    opacity: 1;
}

.ui-dialog-content {
    padding: 20px 22px !important;
    color: var(--dialog-text) !important;
    background: var(--dialog-bg) !important;
}

.ui-dialog-buttonpane {
    padding: 14px 22px !important;
    background: var(--dialog-bg) !important;
    border-top: 1px solid var(--dialog-border) !important;
}

.ui-dialog-buttonset {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.ui-dialog-buttonset button {
    background: var(--btn-primary-bg) !important;
    color: white !important;
    border: none !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    transition: background 0.18s !important;
    box-shadow: none !important;
    width: auto !important;
}

.ui-dialog-buttonset button:hover {
    background: var(--btn-primary-hover) !important;
}

.ui-dialog-buttonset button:last-child {
    background: #5a6472 !important;
}

.ui-dialog-buttonset button:last-child:hover {
    background: #4a545e !important;
}

/* ============================================================
   DIALOG INFO TABLE
   ============================================================ */
.dialog-info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
}

.dialog-info-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--dialog-border);
    color: var(--dialog-text);
    font-size: 13px;
}

.dialog-info-table tr:last-child td {
    border-bottom: none;
}

.dialog-info-table .label-cell {
    text-align: right;
    font-weight: 700;
    color: var(--text-muted);
    width: 32%;
    white-space: nowrap;
    padding-right: 16px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dialog-info-table .value-cell {
    text-align: left;
    color: var(--dialog-text);
}

.dialog-info-table .value-cell input {
    width: 100%;
}

/* ============================================================
   LOADING BACKDROP
   ============================================================ */
#loadingBackdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(7px);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-container {
    text-align: center;
}

.loading-spinner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.spinner-dot {
    width: 14px;
    height: 14px;
    background: #5bc0eb;
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out both;
}

.spinner-dot:nth-child(1) { animation-delay: -0.32s; }
.spinner-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
    40%           { transform: scale(1); opacity: 1.0; }
}

.loading-text {
    color: rgba(255, 255, 255, 0.82);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.4px;
}

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

/* ============================================================
   AUTOCOMPLETE
   ============================================================ */
.ui-autocomplete {
    max-height: 300px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1050 !important;
    font-size: 13px;
    background: var(--dialog-bg) !important;
    border: 1px solid var(--dialog-border) !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
}

/* .ui-autocomplete scrollbar styled by the unified scrollbar block. */

.ui-autocomplete .ui-menu-item { padding: 0; }

.ui-autocomplete .ui-menu-item-wrapper {
    padding: 9px 14px;
    cursor: pointer;
    color: var(--dialog-text);
    font-size: 13px;
}

.ui-autocomplete .ui-state-active {
    background: var(--accent) !important;
    color: white !important;
    border: none !important;
    margin: 0;
    border-radius: 0 !important;
}

/* ============================================================
   POPOVERS
   ============================================================ */
.popover {
    border-radius: 4px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    border: none !important;
}

.popover-header {
    background: var(--dialog-header-bg) !important;
    color: white !important;
    border-radius: 4px 4px 0 0 !important;
    font-weight: 600;
}

.popover-body {
    font-size: 13px;
    line-height: 1.8;
}

/* ============================================================
   FLOATING PRINT BUTTON
   ============================================================ */
.floating-print-btn {
    position: fixed;
    bottom: 62px;
    right: 26px;
    background: var(--btn-success-bg) !important;
    color: white !important;
    border: none !important;
    padding: 12px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    z-index: 150;
    border-radius: 4px !important;
    box-shadow: 0 4px 18px rgba(26, 138, 74, 0.38);
    transition: all 0.22s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.floating-print-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 26px rgba(26, 138, 74, 0.52);
}

/* ============================================================
   PRINT DIALOG
   ============================================================ */
/* Override jQuery UI widget default whites inside the print dialog */
#printDialog.ui-widget-content,
#printDialog .ui-widget-content,
#printDialog .ui-widget,
#printTabs,
#printTabs.ui-tabs,
#printTabs.ui-widget-content,
#printTabs .ui-tabs-panel,
#printTabs .ui-widget-content {
    background: var(--dialog-bg) !important;
    border-color: var(--dialog-border) !important;
    color: var(--dialog-text) !important;
}

#printDialog {
    font-size: 13px;
    padding: 10px !important;
    overflow: hidden !important;
}

#printDialog .ui-tabs {
    border: none !important;
    padding: 0 !important;
}

#printDialog .ui-tabs-nav {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--dialog-border) !important;
    padding: 0 !important;
}

#printDialog .ui-tabs-nav li {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
}

#printDialog .ui-tabs-nav li a {
    padding: 9px 18px !important;
    color: var(--dialog-text) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
}

#printDialog .ui-tabs-nav li.ui-tabs-active a {
    background: var(--accent) !important;
    color: white !important;
    border-radius: 6px 6px 0 0 !important;
}

#printDialog .ui-tabs-panel {
    padding: 14px 8px !important;
    border: none !important;
}

#printDialog h6 {
    color: var(--dialog-text);
    font-weight: 600;
    font-size: 13px;
}

.dialog-count-badge {
    font-weight: 400;
    color: var(--accent);
    cursor: pointer;
}

/* Click popover listing the selected items for a count badge */
.selection-popover {
    max-width: 320px;
}

/* Scroll lives on the inner list, so the scrollbar sits inside the
   popover-body padding and never touches the bubble's rounded corner. */
.selection-popover-list {
    font-size: 13px;
    line-height: 1.7;
    max-height: 260px;
    overflow-y: auto;
}

/* The Bootstrap popover is always white regardless of theme, so force a dark
   thumb here instead of the theme's (possibly light) one. */
.selection-popover {
    --scrollbar-thumb:       rgba(0, 0, 0, 0.28);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.45);
}

/* ============================================================
   UNIFIED CUSTOM SCROLLBAR — shared by all scrollable panels/lists
   ============================================================ */
.checklist-container,
#subjectsList,
.calendar-wrapper,
.ui-autocomplete,
.selection-popover-list {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}

.checklist-container::-webkit-scrollbar,
#subjectsList::-webkit-scrollbar,
.calendar-wrapper::-webkit-scrollbar,
.ui-autocomplete::-webkit-scrollbar,
.selection-popover-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.checklist-container::-webkit-scrollbar-track,
#subjectsList::-webkit-scrollbar-track,
.calendar-wrapper::-webkit-scrollbar-track,
.ui-autocomplete::-webkit-scrollbar-track,
.selection-popover-list::-webkit-scrollbar-track {
    background: transparent;
}

.checklist-container::-webkit-scrollbar-thumb,
#subjectsList::-webkit-scrollbar-thumb,
.calendar-wrapper::-webkit-scrollbar-thumb,
.ui-autocomplete::-webkit-scrollbar-thumb,
.selection-popover-list::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.checklist-container::-webkit-scrollbar-thumb:hover,
#subjectsList::-webkit-scrollbar-thumb:hover,
.calendar-wrapper::-webkit-scrollbar-thumb:hover,
.ui-autocomplete::-webkit-scrollbar-thumb:hover,
.selection-popover-list::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}

.checklist-search {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 10px;
    border: 1px solid var(--dialog-border) !important;
    border-radius: 4px !important;
    font-size: 13px;
    background: var(--input-bg) !important;
    color: var(--input-text) !important;
    box-sizing: border-box;
}

.checklist-search:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 2px var(--input-focus-glow);
}

.checklist-container {
    height: 230px;
    overflow-y: auto;
    border: 1px solid var(--dialog-border);
    border-radius: 4px;
    background: var(--input-bg);
}

.checklist-item {
    padding: 9px 12px;
    border-bottom: 1px solid var(--dialog-border);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.14s;
}

.checklist-item:hover { background: var(--accent-light); }
.checklist-item:last-child { border-bottom: none; }

.checklist-item input[type="checkbox"] {
    margin-right: 10px;
    width: 15px;
    height: 15px;
    cursor: pointer;
    accent-color: var(--accent);
}

.checklist-item label {
    cursor: pointer;
    margin: 0;
    flex: 1;
    user-select: none;
    color: var(--input-text);
    font-size: 13px;
}

/* ============================================================
   PRINT SETTINGS TAB
   ============================================================ */
#print-settings-tab {
    padding: 4px 0;
}

.ps-section {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--dialog-border);
}

.ps-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.ps-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.ps-options {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ps-radio {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--dialog-text);
    cursor: pointer;
    padding: 7px 14px;
    border: 1px solid var(--dialog-border);
    border-radius: 4px;
    transition: all 0.15s ease;
    user-select: none;
}

.ps-radio:hover {
    border-color: var(--accent);
    background: var(--accent-light);
}

.ps-radio input[type="radio"] {
    accent-color: var(--accent);
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

.ps-radio input[type="radio"]:checked ~ span {
    color: var(--accent);
    font-weight: 600;
}

.ps-radio em {
    font-style: normal;
    color: var(--text-muted);
    font-size: 12px;
}

.ps-colors {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--dialog-border);
    border-radius: 4px;
    overflow: hidden;
}

.ps-color-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--input-bg);
    border-bottom: 1px solid var(--dialog-border);
}

.ps-color-row:last-child {
    border-bottom: none;
}

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

.ps-color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.15);
    display: inline-block;
    flex-shrink: 0;
}

.ps-color-name {
    font-size: 13px;
    color: var(--dialog-text);
}

.ps-color-name em {
    font-style: normal;
    color: var(--text-muted);
    font-size: 12px;
}

.ps-color-control {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ps-color-control input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1px solid var(--dialog-border);
    border-radius: 4px !important;
    cursor: pointer;
    padding: 2px 3px;
    background: var(--input-bg);
}

.ps-color-hex {
    font-size: 12px;
    font-family: 'Cascadia Code', 'Consolas', monospace;
    color: var(--text-muted);
    min-width: 58px;
    letter-spacing: 0.5px;
}

.ps-reset-btn {
    background: transparent !important;
    border: 1px solid var(--dialog-border) !important;
    color: var(--text-muted) !important;
    width: 24px;
    height: 24px;
    border-radius: 4px !important;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    transition: all 0.15s ease;
    line-height: 1;
}

.ps-reset-btn:hover {
    border-color: var(--accent) !important;
    color: var(--accent) !important;
    background: var(--accent-light) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 46px;
    background: var(--footer-bg);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-top: 1px solid var(--nav-border);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-content {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--footer-text);
    letter-spacing: 0.2px;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
}

.footer-sep { opacity: 0.35; }
.footer-copy { opacity: 0.45; margin-left: 4px; }

/* ============================================================
   TOASTR — frosted glass, top-right under nav
   ============================================================ */

/* Force top-right position just under the nav bar,
   overriding whatever position class toastr injects */
#toast-container {
    position: fixed !important;
    top: 70px !important;
    right: 20px !important;
    left: auto !important;
    width: auto !important;
}

/* Glass base for every toast */
#toast-container > div,
#toast-container > div:hover {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-left: 4px solid var(--accent) !important;
    box-shadow: var(--glass-shadow) !important;
    border-radius: 6px !important;
    color: var(--text-primary) !important;
    opacity: 1 !important;
    padding: 13px 16px 13px 15px !important;
    min-width: 280px;
    max-width: 360px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image: none !important;
    position: relative !important;
    overflow: hidden;
}

/* Blur layer on pseudo-element so it never intercepts clicks */
#toast-container > div::before {
    content: '';
    position: absolute;
    inset: 0;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Keep all toast children above the blur layer */
#toast-container > div > * {
    position: relative;
    z-index: 1;
}

/* Accent left-bar per type */
#toast-container > div.toast-success { border-left-color: #16a34a !important; }
#toast-container > div.toast-error   { border-left-color: #dc2626 !important; }
#toast-container > div.toast-info    { border-left-color: var(--accent) !important; }
#toast-container > div.toast-warning { border-left-color: #d97706 !important; }

/* Remove solid backgrounds and default icon sprites — glass only */
/* Use same specificity pattern as toastr (ID > child > class) to win */
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-info,
#toast-container > .toast-warning {
    background-image: none !important;
}

/* Toast text */
.toast-title {
    font-weight: 700 !important;
    font-size: 13px !important;
    color: var(--text-primary) !important;
    margin-bottom: 2px !important;
}

.toast-message {
    font-size: 13px !important;
    color: var(--text-secondary) !important;
}

/* Progress bar */
.toast-progress {
    opacity: 1 !important;
    height: 3px !important;
    background: var(--accent-border) !important;
}
#toast-container > div.toast-success .toast-progress { background: rgba(22,  163, 74,  0.45) !important; }
#toast-container > div.toast-error   .toast-progress { background: rgba(220, 38,  38,  0.45) !important; }
#toast-container > div.toast-warning .toast-progress { background: rgba(217, 119, 6,   0.45) !important; }
#toast-container > div.toast-info    .toast-progress { background: var(--accent-border)       !important; }

/* Close button */
#toast-container > div .toast-close-button {
    background: transparent !important;
    color: var(--text-muted) !important;
    text-shadow: none !important;
    opacity: 0.7;
    font-size: 18px !important;
    position: relative !important;
    z-index: 10 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

#toast-container > div .toast-close-button:hover {
    color: var(--text-primary) !important;
    opacity: 1;
}

/* ============================================================
   PRINT CONTAINER
   ============================================================ */
#printContainer { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: 1fr;
    }
    .subjects-panel {
        max-height: 420px;
        min-height: 300px;
    }
}

@media (max-width: 900px) {
    .navigation-bar {
        grid-template-columns: 1fr 1fr;
    }
    .load-btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .navigation-bar,
    .filter-section {
        grid-template-columns: 1fr;
    }
    .calendar-main {
        padding-left: 12px;
        padding-right: 12px;
    }
    .nav-title { font-size: 13px; }
    .footer-content { font-size: 11px; gap: 8px; }
    .login-container { padding: 32px 28px 28px; }
}

/* ============================================================
   PRINT MEDIA STYLES
   ============================================================ */
@media print {
    html, body {
        width: 100%;
        height: 100%;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        background-image: none !important;
    }

    body > *:not(#printContainer) {
        display: none !important;
    }

    #calendarPage,
    #calendarPage.active,
    #loginPage,
    #loginPage.active,
    .top-nav,
    .app-footer,
    .floating-print-btn {
        display: none !important;
    }

    #printContainer {
        display: block !important;
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        overflow: visible !important;
    }

    .print-container {
        visibility: visible !important;
        page-break-after: always !important;
    }

    .print-container:last-child {
        page-break-after: auto !important;
    }

    #printContainer *,
    .print-container * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
        color-adjust: exact !important;
    }

    /* Force light theme on print output regardless of dark mode */
    #printContainer {
        color: #000000 !important;
        background: #ffffff !important;
    }

    #printContainer * {
        color: #000000 !important;
    }

    /* ...but the table header is white-on-black, so keep its text white.
       More specific than "#printContainer *" so it wins the cascade. */
    #printContainer thead th {
        color: #ffffff !important;
    }
}