/* =========================================
   BONGO THEME - Dark SaaS Aesthetic
   Based on Inspiration/Home.html & SignIn.html
   ========================================= */

/* --- 1. THEME VARIABLES --- */
:root {
    /* Dark Mode (Default) */
    --bg-dark: #0F0F11;
    --bg-card: #18181B;
    --brand-purple: #7C3AED;
    --brand-blue: #3B82F6;
    --text-main: #FFFFFF;
    --text-muted: #A1A1AA;
    --border-subtle: #27272A;
    --nav-bg: rgba(15, 15, 17, 0.85);
    --stats-bg: #131315;
    --input-bg: #27272A;
}

body.light-mode {
    /* Light Mode Colors */
    --bg-dark: #F9FAFB;
    /* Gray 50 */
    --bg-card: #FFFFFF;
    --text-main: #111827;
    /* Gray 900 */
    --text-muted: #6B7280;
    /* Gray 500 */
    --border-subtle: #E5E7EB;
    /* Gray 200 */
    --nav-bg: rgba(249, 250, 251, 0.85);
    --stats-bg: #F3F4F6;
    --input-bg: #F3F4F6;
    /* Gray 100 - Visible on White Card */
}

/* --- 2. BASE STYLES --- */
* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-main);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

/* --- 3. NAVBAR --- */
.bongo-navbar {
    background-color: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-subtle);
    padding: 1rem 0;
    transition: all 0.3s ease;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
}

.bongo-navbar .navbar-brand {
    font-weight: 300;
    font-size: 1.8rem;
    color: var(--text-main) !important;
}

.theme-toggle-btn {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    cursor: pointer;
}

.theme-toggle-btn:hover {
    color: var(--brand-purple);
    border-color: var(--brand-purple);
}

.btn-auth-link {
    color: var(--text-main) !important;
    text-decoration: none;
    font-weight: 500;
}

.btn-brand-primary {
    background-color: var(--brand-purple) !important;
    border: none !important;
    color: white !important;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.btn-brand-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3);
}

.btn-brand-blue {
    background-color: var(--brand-blue) !important;
    border: none !important;
    color: white !important;
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-brand-blue:hover {
    transform: translateY(-1px);
}

/* --- 4. HERO SECTION --- */
.hero-section {
    padding-top: 9rem;
    padding-bottom: 3rem;
}

.hero-title {
    font-weight: 700;
    font-size: 3.5rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.cursor {
    display: inline-block;
    width: 3px;
    background-color: var(--text-main);
    animation: blink 1s infinite;
    margin-left: 4px;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

.hero-subtitle {
    color: var(--text-muted);
    font-size: 1.15rem;
    max-width: 600px;
    margin: 0 auto 3.5rem auto;
}

/* --- 5. FEATURE CARDS --- */
.feature-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 3.5rem 2.5rem;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    text-decoration: none;
    display: block;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.feature-card:hover {
    transform: translateY(-8px);
    border-color: var(--brand-purple);
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.2);
}

.card-icon-wrapper {
    font-size: 2.5rem;
    color: var(--brand-purple);
    margin-bottom: 1.5rem;
}

.card-icon-wrapper.blue {
    color: var(--brand-blue);
}

.feature-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-main);
}

.feature-card p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- 6. STATS SECTION --- */
.stats-container {
    background-color: var(--stats-bg);
    border-radius: 20px;
    padding: 4.5rem 2.5rem;
    margin-top: 6rem;
    border: 1px solid var(--border-subtle);
    transition: all 0.3s ease;
}

.trusted-text {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    max-width: 750px;
    margin: 0 auto;
}

.stat-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-main);
    display: block;
    margin-bottom: 0.25rem;
}

.stat-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.8rem;
    font-weight: 600;
}

.stat-divider {
    border-right: 1px solid var(--border-subtle);
}

/* --- 7. FOOTER --- */
.bongo-footer {
    border-top: 1px solid var(--border-subtle);
    padding: 2.5rem 0;
    margin-top: 6rem;
    color: var(--text-muted);
    background-color: var(--bg-dark);
}

.bongo-footer a {
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.bongo-footer a:hover {
    color: var(--brand-purple);
}

/* --- 8. FEEDBACK BUTTON --- */
.bongo-feedback-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 100;
    background-color: var(--brand-purple);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bongo-feedback-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 20px -3px rgba(124, 58, 237, 0.4);
}


/* Support Button */
/* Support Button */
.bongo-support-btn {
    position: fixed;
    bottom: 25px;
    right: 175px;
    /* Positioned to the left of the feedback button */
    z-index: 100;
    background-color: var(--brand-purple);
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.bongo-support-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 20px -3px rgba(124, 58, 237, 0.4);
}

/* Feedback Widget */
.feedback-widget {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    width: 360px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    overflow: hidden;
}

.feedback-widget .widget-body {
    max-height: 400px;
    overflow-y: auto;
}

.feedback-options .option-card:hover {
    border-color: var(--brand-purple);
    transform: translateY(-2px);
    transition: all 0.2s ease;
}

/* --- 9. AUTH LAYOUT (Login/Register Split Screen) --- */
.login-wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.form-side {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    padding: 4rem;
    background-color: var(--bg-dark);
    position: relative;
    z-index: 10;
}

.slideshow-side {
    flex: 0 0 60%;
    background-color: #131315;
    position: relative;
    overflow: hidden;
    border-left: 1px solid var(--border-subtle);
}

.login-box {
    max-width: 400px;
    margin: auto;
    width: 100%;
}

.navbar-brand-auth {
    font-weight: 300;
    font-size: 1.8rem;
    color: var(--text-main) !important;
    text-decoration: none;
}

.theme-toggle-login {
    position: absolute;
    top: 40px;
    left: 40px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.2rem;
    z-index: 100;
}

/* Auth Form Styles */
.auth-form .form-control {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    padding: 0.8rem;
    border-radius: 12px;
}

.auth-form .form-control:focus {
    background-color: var(--bg-card);
    border-color: var(--brand-purple);
    color: var(--text-main);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.1);
}

.auth-form .form-control::placeholder {
    color: var(--text-muted);
}

.auth-form .form-label {
    color: var(--text-main);
    font-weight: 500;
    font-size: 0.875rem;
}

.btn-google {
    background-color: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    padding: 0.8rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.btn-google:hover {
    border-color: var(--text-muted);
    color: var(--text-main);
}

/* Carousel */
.auth-carousel,
.auth-carousel .carousel-inner,
.auth-carousel .carousel-item {
    height: 100%;
}

.slide-placeholder {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 15% 4%;
    text-align: center;
    color: white;
    background-size: cover;
    background-position: center;
    position: relative;
}

.slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(124, 58, 237, 0.2) 100%);
}

.slide-content {
    position: relative;
    z-index: 5;
}

.slide-content img {
    width: 100%;
    object-fit: contain;
}

/* --- 10. RESPONSIVE --- */
@media (max-width: 992px) {
    .slideshow-side {
        display: none;
    }

    .form-side {
        flex: 0 0 100%;
        padding: 2rem;
    }
}

@media (max-width: 768px) {
    .stat-divider {
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-section {
        padding-top: 10rem;
    }

    .feature-card {
        padding: 2rem 1.5rem;
    }

    .stats-container {
        padding: 3rem 1.5rem;
        margin-top: 4rem;
    }

    .bongo-footer {
        margin-top: 4rem;
    }

    .bongo-support-btn {
        right: 160px;
    }
}

/* =========================================
   11. DASHBOARD LAYOUT
   ========================================= */

/* --- TOP NAVIGATION --- */
.top-nav {
    height: 70px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: var(--bg-dark);
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1050;
}

.top-nav .navbar-brand {
    font-weight: 300;
    font-size: 1.6rem;
    color: var(--text-main) !important;
    text-decoration: none;
}

.menu-btn {
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-main);
    display: block;
}

@media (min-width: 992px) {
    .menu-btn {
        display: none;
    }
}

/* --- SIDEBAR --- */
.sidebar {
    width: 260px;
    border-right: 1px solid var(--border-subtle);
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: var(--bg-dark);
    position: fixed;
    top: 70px;
    bottom: 0;
    left: 0;
    z-index: 1040;
    transition: transform 0.3s ease;
    overflow-y: auto;
}

.nav-group-spacer {
    height: 20px;
}

.nav-item-bongo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 15px;
    border-radius: 10px;
    color: var(--text-muted);
    text-decoration: none;
    transition: all 0.2s ease;
    font-weight: 500;
    font-size: 0.9rem;
}

.nav-item-bongo:hover {
    background-color: var(--bg-card);
    color: var(--text-main);
}

.nav-item-bongo.active {
    background-color: var(--brand-blue);
    color: white;
}

.nav-item-bongo.text-danger:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

/* --- MAIN VIEWPORT --- */
.main-viewport {
    margin-left: 260px;
    padding: 100px 20px 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}

.content-wrapper {
    width: 100%;
    max-width: 1100px;
    position: relative;
}

/* --- TABLE SUB-NAV --- */
.table-sub-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 10px 20px;
    margin-bottom: 15px;
}

/* --- SEMESTER DROPDOWN --- */
.semester-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--bg-dark);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 8px 32px 8px 14px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A1A1AA' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.semester-dropdown:hover {
    border-color: var(--brand-blue);
    background-color: var(--bg-card);
}

.semester-dropdown:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.semester-dropdown option {
    background-color: var(--bg-card);
    color: var(--text-main);
    padding: 8px;
}

/* Light mode adjustments */
body.light-mode .semester-dropdown {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B7280' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
}

/* --- TIMETABLE CARD --- */
.timetable-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.timetable-card .table {
    color: inherit;
    margin-bottom: 0;
    table-layout: auto;
    width: max-content;
    min-width: 100%;
}

.timetable-card .table thead th {
    background-color: var(--bg-card);
    border-bottom: 2px solid var(--border-subtle);
    color: var(--brand-blue);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 15px;
    text-align: center;
}

.timetable-card .table td {
    border-bottom: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    padding: 0 !important;
    /* Allow module block to fill cell */
    vertical-align: top;
    height: 90px;
}

/* Day Columns (Scrollable) */
.timetable-card .table th:not(.time-col),
.timetable-card .table td:not(.time-col) {
    min-width: 140px;
    /* Force spread */
}

.timetable-card .table td.time-col {
    padding: 8px !important;
    vertical-align: middle;
    /* Sticky Time Column */
    position: sticky;
    left: 0;
    z-index: 20;
    border-right: 2px solid var(--border-subtle) !important;
    /* Visual separator */
}

/* Sticky Header Time */
.timetable-card .table thead th.time-col {
    position: sticky;
    left: 0;
    z-index: 21;
    /* Higher than body sticky */
    border-right: 2px solid var(--border-subtle) !important;
}

.timetable-card .table td.period-add {
    padding: 8px !important;
    /* Keep padding for empty cells to look nice */
}

/* Fix for end time font size */
/*.time-col .endhourtime {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--brand-blue);
    display: inline;*/
/* Keep in one line */
/*}*/

.time-col {
    font-weight: 600;
    color: var(--brand-blue);
    width: 100px;
    text-align: center;
    font-size: 0.8rem;
}

.module-block {
    border-radius: 8px;
    padding: 8px;
    font-weight: 700;
    color: white;
    font-size: 0.75rem;
    text-align: center;
    cursor: pointer;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}

.module-block:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Mobile Toggle Styles */
.btn-group.bg-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    padding: 2px;
}

.btn-group .btn-outline-primary {
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
}

.btn-group .btn-check:checked+.btn-outline-primary {
    background-color: var(--brand-blue);
    color: white;
    border-radius: 4px;
}

.day-navigation .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-main);
    border-color: var(--border-subtle);
    background: transparent;
}

.day-navigation .btn-icon:hover {
    background-color: var(--bg-card);
    color: var(--brand-blue);
}

.btn-add-row {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 45px;
    height: 45px;
    background-color: var(--brand-purple);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
    cursor: pointer;
    border: 4px solid var(--bg-dark);
    text-decoration: none;
    transition: transform 0.2s ease;
    z-index: 10;
}

.btn-add-row:hover {
    transform: scale(1.1);
    color: white;
}

/* =========================================
   12. FORM CARDS (Add Session, etc.)
   ========================================= */
.form-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 24px;
    padding: 32px;
    max-width: 800px;
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);*/
}

.section-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--brand-blue);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

/* =========================================
   13. CLASH LIST STYLES
   ========================================= */
.clash-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 30px;
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);*/
    transition: all 0.3s ease;
}

.clash-title-row {
    margin-bottom: 1.5rem;
}

.day-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--brand-blue);
    background: rgba(59, 130, 246, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.session-container {
    position: relative;
    margin-top: 20px;
}

.session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    /* Auto-fill for responsiveness */
    gap: 15px;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Optional: If we want the specific collapsed/expanded logic from inspiration, we can add it later.
   For now, grid layout is robust. */

.session-box {
    background: var(--bg-dark);
    border: 2px solid var(--border-subtle);
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    flex-direction: column;
}

.session-box:hover {
    border-color: var(--brand-blue);
    transform: scale(1.02);
}

/* We will use a radio-button like logic, so 'active' class mimics checked state */
.session-box.active {
    border-color: var(--brand-blue);
    background: rgba(59, 130, 246, 0.05);
}

.session-box.active::after {
    content: "\F272";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--brand-blue);
    font-size: 1.2rem;
}

.group-tag {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    padding: 2px 8px;
    border-radius: 4px;
}

.session-box.active .group-tag {
    right: 40px;
    /* Make room for checkmark */
    border-color: var(--brand-blue);
    color: var(--brand-blue);
}

.session-time {
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 4px;
    color: var(--text-main);
}

.session-venue {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.btn-more {
    background: var(--border-subtle);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
}

.btn-more:hover {
    background: var(--brand-blue);
    color: white;
}

.skip-container {
    padding-top: 15px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/*.btn-resolve {
    background: var(--brand-blue);
    border: none;
    padding: 14px 60px;
    border-radius: 15px;
    font-weight: 700;
    font-size: 1.1rem;
    color: white;
    transition: all 0.2s ease;
}

.btn-resolve:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(59, 130, 246, 0.5);
    color: white;
}*/


/* Toggle Switcher */
.type-toggle {
    display: flex;
    background: var(--input-bg, #27272A);
    padding: 4px;
    border-radius: 12px;
    margin-bottom: 25px;
}

.type-btn {
    flex: 1;
    padding: 10px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: 8px;
    transition: 0.2s;
    cursor: pointer;
}

.type-btn.active {
    background: var(--brand-blue);
    color: white;
}

/* Custom Inputs */
.custom-input,
.custom-select {
    background: var(--input-bg, #27272A);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    padding: 12px 16px;
    border-radius: 12px;
    width: 100%;
    font-size: 0.95rem;
}

.custom-input:focus,
.custom-select:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.custom-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: block;
}

/* Color Picker */
.color-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.color-opt {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
    transition: 0.2s;
}

.color-opt.selected {
    border-color: white;
    transform: scale(1.3);
    border: 3px solid var(--text-muted);
}

.btn-add {
    background: var(--brand-blue);
    border: none;
    width: 100%;
    padding: 8px 16px;
    border-radius: 14px;
    font-weight: 700;
    color: white;
    margin-top: 10px;
    transition: 0.2s;
    cursor: pointer;
}

.btn-add:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.btn-cancel {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.2s;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cancel:hover {
    border-color: var(--text-muted);
    color: var(--text-main);
    background: var(--input-bg);
}

.btn-move {
    background: transparent;
    border: 1px solid #F59E0B;
    color: #F59E0B;
    padding: 10px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.2s;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.btn-move:hover {
    background: rgba(245, 158, 11, 0.1);
    color: #F59E0B;
    transform: translateY(-2px);
}

/* =========================================
   13. PROFILE DRAWER
   ========================================= */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.drawer-overlay.active {
    display: block;
    opacity: 1;
}

.profile-drawer {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    height: 100vh;
    background: var(--bg-card);
    border-left: 1px solid var(--border-subtle);
    z-index: 2000;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.profile-drawer.open {
    transform: translateX(-420px);
}

@media (max-width: 576px) {
    .profile-drawer {
        width: 100%;
        right: -100%;
    }

    .profile-drawer.open {
        transform: translateX(-100%);
    }
}

.drawer-header {
    padding: 32px;
    border-bottom: 1px solid var(--border-subtle);
}

.drawer-body {
    padding: 32px;
    overflow-y: auto;
    flex-grow: 1;
}

.user-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
}

.hero-avatar {
    width: 64px;
    height: 64px;
    background: var(--brand-blue);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: white;
}

.avatar-circle {
    width: 38px;
    height: 38px;
    background: var(--brand-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.avatar-circle:hover {
    transform: scale(1.05);
}

/* Merge Key Component */
.merge-card {
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.key-text {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Action Links */
.drawer-link {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    color: var(--text-main);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    transition: 0.2s;
}

.drawer-link:hover {
    color: var(--brand-blue);
    padding-left: 5px;
}

.link-icon {
    width: 36px;
    height: 36px;
    background: var(--input-bg, #27272A);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Buttons */
.btn-logout {
    width: 100%;
    padding: 14px;
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    transition: 0.2s;
    margin-top: 20px;
    cursor: pointer;
}

.btn-logout:hover {
    background: #ef4444;
    color: white;
}

.btn-close-drawer {
    background: var(--input-bg, #27272A);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

/* Danger Zone */
.danger-box {
    margin-top: 40px;
    padding: 20px;
    border: 1px dashed rgba(239, 68, 68, 0.3);
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.02);
}

.delete-input {
    background: var(--bg-dark);
    border: 1px solid var(--border-subtle);
    color: white;
    border-radius: 8px;
    padding: 8px 12px;
    width: 100%;
    font-size: 0.9rem;
}

/* Guest Upgrade Card */
.upgrade-card {
    background: var(--bg-card);
    border: 1px solid rgba(59, 130, 246, 0.3);
    border-radius: 24px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.upgrade-icon-box {
    width: 54px;
    height: 54px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--brand-blue);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    font-size: 1.5rem;
}

.btn-convert {
    background: var(--brand-blue);
    color: white !important;
    border: none;
    width: 100%;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    margin-top: 15px;
    transition: 0.2s;
    text-decoration: none !important;
    display: inline-block;
}

.btn-convert:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
    color: white !important;
}

/* Nav Profile Trigger */
.nav-profile-trigger {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.delete-input {
    background: var(--input-bg);
    border: 1px solid var(--border-subtle);
    color: var(--text-main);
    border-radius: 8px;
    padding: 8px 12px;
    width: 100%;
    font-size: 0.9rem;
}

/* =========================================
   15. MERGER PAGE
   ========================================= */
:root {
    --cell-busy: #27272A;
    --cell-free: #FFFFFF;
    --cell-partial: #3f3f46;
}

body.light-mode {
    --cell-busy: #e5e5e5;
    --cell-free: #FFFFFF;
    --cell-partial: #f3f4f6;
}

.merge-container {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    align-items: start;
}

/* Mobile: Controls on top */
@media (max-width: 992px) {
    .merge-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .merge-controls-panel {
        order: -1;
        /* Move to top */
        max-width: 100%;
        /* Prevent controls from forcing page width */
    }
}

.merge-table-wrapper {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 24px;
    overflow-x: auto;
    /* Enable horizontal scroll */
}

.merge-table {
    width: 100%;
    min-width: 600px;
    /* Force horizontal scroll on small screens */
    border-collapse: separate;
    border-spacing: 4px;
}

.merge-table th {
    text-align: center;
    padding: 12px 8px;
    color: var(--brand-blue);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.merge-table td {
    height: 50px;
    border-radius: 6px;
    text-align: center;
    font-size: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    padding: 8px;
}

.merge-table td:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cell-busy {
    background-color: var(--cell-busy);
    color: transparent;
}

.cell-free {
    background-color: var(--cell-free);
    color: var(--bg-dark);
    font-weight: 600;
}

body.light-mode .cell-free {
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

.group-tag {
    background: rgba(59, 130, 246, 0.1);
    color: var(--brand-blue);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    display: inline-block;
}


.expand-trigger-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    z-index: 5;
}

.btn-more {
    background: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-more:hover {
    background: var(--brand-blue);
    color: white;
    border-color: var(--brand-blue);
}

.hidden-card,
.hidden-session {
    display: none !important;
}


.cell-partial {
    background-color: var(--cell-partial);
    color: var(--text-muted);
    font-weight: 600;
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
    margin-right: 8px;
}

/* Merge Controls Panel */
.merge-controls-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 24px;
    height: fit-content;
    position: sticky;
    top: 100px;
}

@media (max-width: 992px) {
    .merge-controls-panel {
        position: static;
    }
}

.user-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-dark);
    padding: 12px 15px;
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px solid var(--border-subtle);
    transition: all 0.2s ease;
}

.user-pill:hover {
    border-color: var(--brand-blue);
    transform: translateX(2px);
}

.merge-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.85rem;
    color: white;
    flex-shrink: 0;
}

.user-list {
    max-height: 400px;
}

/* Light mode adjustments */
body.light-mode .merge-table-wrapper,
body.light-mode .merge-controls-panel {
    background: white;
}

body.light-mode .user-pill {
    background: var(--bg-card);
}

body.light-mode .merge-table td {
    border: 1px solid #f0f0f0;
}

body.light-mode .cell-busy {
    background-color: #e5e5e5;
    border-color: #d4d4d4;
}

/* =========================================
   16. DASHBOARD RESPONSIVE
   ========================================= */
@media (max-width: 991.98px) {
    .sidebar {
        transform: translateX(-100%);
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .main-viewport {
        margin-left: 0;
        padding-top: 90px;
    }

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

    .table-sub-nav {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}

/* =========================================
   15. MODULE PAGE COMPONENTS
   ========================================= */
.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.module-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 20px;
    transition: transform 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}

.module-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-blue);
}

.module-card .color-strip {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 6px;
}

.module-code {
    font-weight: 700;
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.module-info {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 15px;
}

.module-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    padding-top: 15px;
}

.btn-delete {
    color: #EF4444;
    cursor: pointer;
    font-size: 1.1rem;
    transition: opacity 0.2s;
}

.btn-delete:hover {
    opacity: 0.7;
}

/* MAGIC BUTTON STYLE */
/* Stats Badge */
.stats-badge {
    background: rgba(59, 130, 246, 0.1);
    color: var(--brand-blue);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Magic Color Button */
.btn-magic {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    color: white;
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
    text-decoration: none;
}

.btn-magic:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
    filter: brightness(1.1);
    color: white;
}

/* Secondary Magic Style (for Cancel/Move) */
.btn-secondary-magic {
    background: rgba(124, 58, 237, 0.1);
    /* Low opacity purple */
    color: var(--brand-blue);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 12px;
    padding: 8px 16px;
    /* Matched to btn-magic */
    min-height: 40px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.btn-secondary-magic:hover {
    background: rgba(124, 58, 237, 0.15);
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    transform: translateY(-2px);
}

/* Cancel Button - Neutral Ghost Style */
.btn-cancel {
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    border-radius: 12px;
    padding: 8px 16px;
    /* Matched */
    min-height: 40px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.btn-cancel:hover {
    border-color: var(--text-muted);
    color: var(--text-main);
    background: var(--input-bg);
}

/* Move Button - Amber Ghost Style */
.btn-move {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #F59E0B;
    border-radius: 12px;
    padding: 8px 16px;
    /* Matched */
    min-height: 40px;
    font-size: 0.85rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.btn-move:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #F59E0B;
    color: #F59E0B;
    transform: translateY(-2px);
}

/* Save Button */
.btn-save {
    background-color: var(--brand-blue) !important;
    color: white !important;
    border: none;
    border-radius: 12px;
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-save:hover {
    background-color: var(--brand-blue) !important;
    filter: brightness(1.1);
    color: white !important;
}

/* Color Select Dropdown */
.color-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 4px 24px 4px 0;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23A1A1AA' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
}

.color-select:focus {
    color: var(--text-main);
}

.color-select option {
    background-color: var(--bg-card);
    color: var(--text-main);
}

/* Delete Button */
.btn-delete {
    color: #EF4444;
    font-size: 1.1rem;
    transition: opacity 0.2s;
    text-decoration: none;
}

.btn-delete:hover {
    opacity: 0.7;
    color: #EF4444;
}

/* Empty State */
.empty-state {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 60px 20px;
}

/* =========================================
   16. CLASH PAGE COMPONENTS
   ========================================= */
.clash-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 30px;
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);*/
    transition: all 0.3s ease;
    /* Removed overflow: hidden to prevent clipping hover effects */
}

.day-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--brand-blue);
    background: rgba(59, 130, 246, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
}

.session-container {
    position: relative;
    margin-top: 20px;
}

.session-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    /* Removed max-height/overflow hidden to prevent clipping */
}



.session-box {
    background: var(--bg-dark);
    border: 2px solid var(--border-subtle);
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.session-box:hover {
    border-color: var(--brand-blue);
    transform: scale(1.02);
    z-index: 5;
    /* Ensure it stays on top when scaling */
}

.session-box.active {
    border-color: var(--brand-blue);
    background: var(--brand-blue);
    /* Solid blue for contrast */
    color: white !important;
}

.session-box.active .session-time,
.session-box.active .session-venue,
.session-box.active i {
    color: white !important;
}

.session-box.active::after {
    content: "\F272";
    font-family: "bootstrap-icons";
    position: absolute;
    top: 10px;
    right: 10px;
    color: white;
    font-size: 1.2rem;
}

/* Updated Group Tag / Module Code Badge */
.group-tag {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--brand-blue);
    background-color: rgba(59, 130, 246, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 8px;
}

.session-box.active .group-tag {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.text-theme-muted {
    color: var(--text-muted) !important;
}

/* =========================================
   17. UPLOAD PAGE STYLES
   ========================================= */
.semester-card {
    background: var(--input-bg, #27272A);
    border: 1px solid var(--border-subtle);
    padding: 16px;
    border-radius: 16px;
    cursor: pointer;
    transition: 0.2s;
}

.semester-card:hover {
    border-color: var(--brand-blue);
}

.semester-card.active {
    background: rgba(59, 130, 246, 0.05);
    border-color: var(--brand-blue);
}

.semester-period.active small {
    color: ghostwhite !important;
}

.upload-zone {
    border: 2px dashed var(--border-subtle);
    border-radius: 20px;
    padding: 40px 20px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    cursor: pointer;
    transition: 0.3s;
}

.upload-zone:hover {
    background: rgba(59, 130, 246, 0.03);
    border-color: var(--brand-blue);
}

.upload-icon-circle {
    width: 60px;
    height: 60px;
    background: var(--input-bg, #27272A);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    font-size: 1.5rem;
    color: var(--brand-blue);
}

.btn-add {
    background: var(--brand-blue);
    border: none;
    width: 100%;
    padding: 8px 16px;
    border-radius: 14px;
    font-weight: 700;
    color: white;
    margin-top: 10px;
    transition: 0.2s;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn-add:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    color: white;
}

.session-time {
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 4px;
}

.session-venue {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.btn-more {
    background: var(--border-subtle);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
    padding: 6px 18px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-more:hover {
    background: var(--brand-blue);
    color: white;
}

.clash-card.is-expanded .btn-more {
    display: none;
}

.skip-container {
    margin: 15px 0;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
}

/* Matching Magic Button Style */
.btn-resolve {
    background: linear-gradient(135deg, var(--brand-blue), var(--brand-purple));
    color: white;
    border: none;
    padding: 14px 60px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.btn-resolve:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.5);
    filter: brightness(1.1);
    color: white;
}

@media (max-width: 768px) {
    .session-grid {
        grid-template-columns: 1fr;
    }

    .module-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   18. TIMETABLE TABLE DARK MODE FIX
   ========================================= */

/* Default dark mode (when light-mode class is NOT present) */
body:not(.light-mode) .timetable-card {
    background-color: var(--bg-card) !important;
}

body:not(.light-mode) .timetable-card .table {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

body:not(.light-mode) .timetable-card .table thead {
    background-color: var(--bg-card) !important;
}

body:not(.light-mode) .timetable-card .table thead th {
    background-color: var(--bg-card) !important;
    color: var(--brand-blue) !important;
    border-color: var(--border-subtle) !important;
}

body:not(.light-mode) .timetable-card .table tbody {
    background-color: var(--bg-card) !important;
}

body:not(.light-mode) .timetable-card .table tbody tr {
    background-color: var(--bg-card) !important;
}

body:not(.light-mode) .timetable-card .table td {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-subtle) !important;
}

/* Time column dark mode */
body:not(.light-mode) .timetable-card .table .time-col,
body:not(.light-mode) .timetable-card .table td.time-col {
    background-color: var(--bg-dark) !important;
    color: var(--brand-blue) !important;
}

/* Empty cells dark mode */
body:not(.light-mode) .timetable-card .table .period-add,
body:not(.light-mode) .timetable-card .table td.period-add {
    background-color: var(--bg-card) !important;
}

body:not(.light-mode) .timetable-card .table .period-add:hover,
body:not(.light-mode) .timetable-card .table td.period-add:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Light mode - ensure proper colors too */
body.light-mode .timetable-card {
    background-color: var(--bg-card) !important;
}

body.light-mode .timetable-card .table {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
}

body.light-mode .timetable-card .table thead th {
    background-color: var(--bg-card) !important;
    color: var(--brand-blue) !important;
    border-color: var(--border-subtle) !important;
}

body.light-mode .timetable-card .table td {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-subtle) !important;
}

body.light-mode .timetable-card .table .time-col,
body.light-mode .timetable-card .table td.time-col {
    background-color: var(--bg-dark) !important;
    color: var(--brand-blue) !important;
}


/* =========================================
   19. PRINT DESIGNER (Download Page)
   ========================================= */

/* Layout Engine */
.download-container {
    display: flex;
    /* Changed to flex for better control over sticky sidebar */
    align-items: flex-start;
    gap: 0;
    min-height: calc(100vh - 70px);
    overflow: hidden;
    margin-right: -15px;
    margin-left: -15px;
    position: relative;
}

@media (max-width: 992px) {
    .download-container {
        display: block;
        height: auto;
        overflow: visible;
        margin-right: 0;
        margin-left: 0;
    }
}

/* Settings Rail */
.settings-panel {
    background: var(--bg-card);
    border-right: 1px solid var(--border-subtle);
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 70px;
    height: calc(100vh - 70px);
    z-index: 10;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 0.3s ease;
}

.settings-panel.collapsed {
    width: 60px;
}

/* Collapsible Header */
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.settings-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.settings-toggle-icon {
    transition: transform 0.3s ease;
}

.settings-panel.collapsed .settings-header span,
.settings-panel.collapsed .settings-header .settings-toggle-icon {
    display: none;
}

/* Collapsible Content */
.settings-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

@media (max-width: 992px) {
    .settings-panel {
        width: 100%;
        position: static;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-subtle);
    }

    .settings-panel.collapsed {
        width: 100%;
    }

    .settings-panel.collapsed .settings-header span,
    .settings-panel.collapsed .settings-header .settings-toggle-icon {
        display: inline;
    }

    .settings-content {
        padding: 20px;
    }
}

.section-label {
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--brand-blue);
    letter-spacing: 1.2px;
    margin-bottom: 15px;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.custom-label {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 8px;
    display: block;
}

/* Color Inputs */
.color-input-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--input-bg, #27272A);
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-subtle);
}

.color-circle-input {
    -webkit-appearance: none;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    background: none;
    padding: 0;
}

.color-circle-input::-webkit-color-swatch {
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.color-circle-input::-webkit-color-swatch-wrapper {
    padding: 0;
}

/* Live Preview Area */
.preview-area {
    padding: 40px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    flex-grow: 1;
    /* Takes remaining space */
    /* Ensure only this part scrolls if content is large? 
       Actually, if page scrolls, sticky sidebar stays. 
       User said "must not be vertically scrollable same as the preview area".
       If we want independant scroll: */
    height: calc(100vh - 70px);
}

@media (max-width: 992px) {
    .preview-area {
        height: auto;
        /* Allow full height on mobile */
        padding: 20px;
        overflow-x: auto;
        justify-content: flex-start;
    }
}

.preview-paper {
    background: white;
    width: 100%;
    max-width: 1000px;
    min-height: 600px;
    padding: 40px;
    color: #18181B;
    /* Always dark text on white paper initially */
    border-radius: 4px;
    /* PDF Generator constraint alignment:
       The PDF seems to use specific widths. We should enforce min-width 
       to ensure it renders like the PDF A4/Landscape size. */
    min-width: 800px;
    max-width: 1100px;
    /* Cap it */
    margin-bottom: 50px;
    /* Space at bottom */
}

/* Force Table Styles inside Paper to be Print-Ready */
.preview-paper .table {
    width: 100%;
    border-collapse: collapse;
    background-color: transparent !important;
    color: #212529 !important;
    table-layout: fixed;
    border: 2px solid darkgrey;
    /* Match Download.cshtml */
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    /* Match Download.cshtml */
    margin-bottom: 1rem;
}

.preview-paper .table th,
.preview-paper .table td {
    padding: 0.5rem;
    /* Match Download.cshtml */
    vertical-align: middle;
    /* border: 1px solid #dee2e6;  Matched default style in Download.cshtml if borders enabled */
}

.preview-paper .table thead th {
    vertical-align: bottom;
    /* border-bottom: 2px solid #dee2e6; */
}

/* Specific Column Widths matching PDF Generator */
.preview-paper .table .time-col,
.preview-paper .table th:first-child {
    width: 15% !important;
    border-right: 1px solid lightgrey;
    /* Match Download.cshtml time-td */
}

.preview-paper .table th:not(:first-child),
.preview-paper .table td:not(.time-col) {
    width: 17% !important;
}

/* Reset Module Blocks for Print to look like table cells */
.preview-paper .table td.period-button {
    padding: 0 !important;
    position: relative;
    height: 70px;
}

.preview-paper .module-block {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    padding: 4px !important;
    margin: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

/* Hide interactive "Add" buttons */
.preview-paper .period-add {
    background-color: transparent !important;
    cursor: default;
}

.preview-paper .period-add:hover {
    background-color: transparent !important;
}

/* Hide "Add" buttons/empty slots visuals */
.preview-paper .period-add {
    cursor: default !important;
    background-color: transparent !important;
}

.preview-paper .period-add:hover {
    background-color: transparent !important;
}

.preview-paper .period-add div {
    display: none;
    /* Hide the invisible click target div */
}

/* Reset Module Blocks for Print */
.preview-paper .module-block {
    border-radius: 4px;
    /* Slight radius for look */
    padding: 4px;
    box-shadow: none !important;
    min-height: auto !important;
    /* Let content dictate height if possible, or keep partial's logic */
}

/* Striped Rows Override */
.preview-paper .table-striped-custom tbody tr:nth-of-type(odd) td {
    background-color: rgba(0, 0, 0, 0.03) !important;
    /* Important needed to override the th/td transparent rule above */
}

.btn-download-final {
    background: var(--brand-blue);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-weight: 700;
    width: 100%;
    transition: 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.btn-download-final:hover {
    filter: brightness(1.1);
    color: white;
}

/* =========================================
   20. MOBILE OVERRIDES FOR PREVIEW & MERGE TABLES
   Always show full weekdays, maintain 70px cell height
   ========================================= */

@media (max-width: 992px) {

    /* Preview Table - Always show all days */
    .preview-paper .table th,
    .preview-paper .table td {
        display: table-cell !important;
    }

    .preview-paper .table td.period-button,
    .preview-paper .table td.period-add {
        min-height: 70px !important;
        height: 70px !important;
    }

    /* Merger Table - Always show all days */
    .merger-page .table th,
    .merger-page .table td {
        display: table-cell !important;
    }

    .merger-page .table td.period-button,
    .merger-page .table td.period-add {
        min-height: 70px !important;
    }

    /* Override any day-hide classes for these specific tables */
    .preview-paper .hide-day-col,
    .merger-page .hide-day-col {
        display: table-cell !important;
    }

    /* Ensure mobile week toggle doesn't affect these tables */
    .preview-paper .mon-col,
    .preview-paper .tue-col,
    .preview-paper .wed-col,
    .preview-paper .thu-col,
    .preview-paper .fri-col,
    .merger-page .mon-col,
    .merger-page .tue-col,
    .merger-page .wed-col,
    .merger-page .thu-col,
    .merger-page .fri-col {
        display: table-cell !important;
    }
}

/* =========================================
   21. MODAL OVERRIDES
   Ensure modals match the theme (Dark/Light)
   ========================================= */

.modal-content {
    background-color: var(--bg-card);
    color: var(--text-main);
    border: 1px solid var(--border-subtle);
}

.modal-header {
    border-bottom: 1px solid var(--border-subtle);
}

.modal-footer {
    border-top: 1px solid var(--border-subtle);
}

.modal-title {
    color: var(--text-main);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

body.light-mode .btn-close {
    filter: none;
}

/* =========================================
   22. NOTIFICATION PAGES
   Styles for notification list and detail views
   ========================================= */

.notification-page {
    padding: 0;
}

/* Split Panel Container */
.notification-container {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    min-height: calc(100vh - 200px);
}

@media (max-width: 992px) {
    .notification-container {
        grid-template-columns: 1fr;
    }
}

/* Left Panel: Notification List */
.notification-list-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notification-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    gap: 8px;
}

.notification-list {
    flex: 1;
    overflow-y: auto;
    max-height: calc(100vh - 300px);
}

.notification-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 0.2s ease;
    position: relative;
}

.notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.notification-item.unread {
    background: rgba(59, 130, 246, 0.08);
}

.notification-item.unread .notification-title {
    font-weight: 600;
}

.notification-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.15);
    color: var(--brand-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-content {
    flex: 1;
    min-width: 0;
}

.notification-title {
    font-size: 0.9rem;
    color: var(--text-main);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-blue);
    flex-shrink: 0;
}

.notification-checkbox {
    margin-right: 8px;
}

/* Empty State for List */
.notification-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    color: var(--text-muted);
    text-align: center;
    flex: 1;
}

.notification-empty i {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

/* Right Panel: Detail View */
.notification-detail-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 24px;
    min-height: 400px;
}

.notification-detail-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    color: var(--text-muted);
    text-align: center;
}

.notification-detail-empty i {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.4;
}

.notification-detail {
    height: 100%;
}

.notification-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.notification-detail-body {
    color: var(--text-main);
    line-height: 1.7;
}

.notification-detail-body p {
    margin-bottom: 1rem;
}

/* Mobile Responsive */
@media (max-width: 992px) {
    .notification-list-panel {
        max-height: 400px;
    }

    .notification-list {
        max-height: 300px;
    }
}

/* =========================================
   23. ADMIN DASHBOARD
   Styles for the admin panel components
   ========================================= */

.admin-dashboard {
    padding: 0;
}

/* Stat Cards */
.stat-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.stat-label {
    text-transform: uppercase;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-muted);
}

/* Admin Table */
.admin-table-container {
    background-color: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    overflow: hidden;
}

.admin-table-container .table {
    color: var(--text-main);
    margin-bottom: 0;
}

.admin-table-container .table thead th {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 16px 24px;
}

.admin-table-container .table td {
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 24px;
    vertical-align: middle;
    background-color: transparent;
    color: var(--text-main);
}

.admin-table-container .table tbody tr:last-child td {
    border-bottom: none;
}

/* Avatar Circle */
/*.avatar-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.8rem;
    flex-shrink: 0;
}*/

/* Sortable Table Headers */
.admin-table-container .sortable {
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
}

.admin-table-container .sortable:hover {
    color: var(--brand-blue);
}

.admin-table-container .sort-icon {
    font-size: 0.7rem;
    margin-left: 4px;
    opacity: 0.5;
}

.admin-table-container .sortable:hover .sort-icon {
    opacity: 1;
}

/* Pagination Styling */
.pagination-container {
    background-color: var(--bg-card);
}

.pagination .page-link {
    background-color: var(--bg-dark);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

.pagination .page-link:hover {
    background-color: var(--border-subtle);
    border-color: var(--border-subtle);
    color: var(--text-main);
}

.pagination .page-item.active .page-link {
    background-color: var(--brand-blue);
    border-color: var(--brand-blue);
    color: white;
}

.pagination .page-item.disabled .page-link {
    background-color: var(--bg-dark);
    border-color: var(--border-subtle);
    color: var(--text-muted);
    opacity: 0.5;
}

/* =========================================
   24. NOTIFICATION ADMIN UI
   Styles for the new notification management interface
   ========================================= */

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 20px;
}

.dark-mode .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Typography & Utilities */
.ls-1 {
    letter-spacing: 1px;
}

.cursor-pointer {
    cursor: pointer;
}

/* List Group Item Overrides */
.list-group-item {
    background-color: var(--bg-card);
    color: var(--text-main);
    border-color: var(--border-subtle);
}

.list-group-item:hover {
    background-color: var(--bg-dark);
    color: var(--text-main);
}

.list-group-item.active {
    background-color: var(--bg-card);
    border-color: var(--border-subtle);
    border-left-color: var(--brand-blue) !important;
    color: var(--text-main);
}

.list-group-item.active .text-body {
    color: var(--text-main) !important;
}

.list-group-item.active .text-muted {
    color: var(--text-muted) !important;
}

/* Chip Styles */
.chip {
    cursor: pointer;
    border: 1px solid var(--border-subtle);
    transition: 0.2s;
    background-color: var(--bg-card);
    color: var(--text-muted);
}

.chip:hover {
    background-color: var(--brand-blue) !important;
    color: white !important;
    border-color: var(--brand-blue) !important;
}

/* =========================================
       25. LOG VIEWER UI
       Styles for the admin log viewer
       ========================================= */

.log-terminal {
    background-color: #0F0F11;
    /* Very dark background */
    color: #d4d4d4;
    /* Default text color */
    font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
    font-size: 0.85rem;
    border-radius: 8px;
    padding: 1rem;
    height: 600px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    width: 100%;
    line-height: 1.5;
    white-space: pre-wrap;
    /* Wrap long lines */
}

/* Scrollbar for terminal */
.log-terminal::-webkit-scrollbar {
    width: 10px;
}

.log-terminal::-webkit-scrollbar-track {
    background: #18181B;
    border-radius: 0 8px 8px 0;
}

.log-terminal::-webkit-scrollbar-thumb {
    background-color: #3F3F46;
    border-radius: 5px;
    border: 2px solid #18181B;
}

.log-terminal::-webkit-scrollbar-thumb:hover {
    background-color: #52525B;
}

/* Log Levels */
.log-line {
    display: block;
    padding: 0 4px;
    border-radius: 2px;
}

.log-line:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

.log-info {
    color: #60A5FA;
}

/* Blue */
.log-warn {
    color: #FBBF24;
}

/* Amber */
.log-error {
    color: #EF4444;
}

/* Red */
.log-debug {
    color: #A1A1AA;
}

/* Gray */
.log-success {
    color: #34D399;
}

/* Green */

.log-timestamp {
    color: #71717A;
    margin-right: 0.5rem;
    user-select: none;
}