/* =========================================================
   1. BASE STYLES & RESET
   ========================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background-color: #f4f7f6;
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    width: 92%;
    max-width: 1250px;
    margin: 0 auto;
}

/* =========================================================
   2. NAVBAR & HEADER (Standardized & Ultra-Smooth)
   ========================================================= */
.navbar {
    background-color: #F08700;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    flex-wrap: wrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Slightly deeper shadow */
    position: relative;
    z-index: 1000;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    perspective: 1000px; /* Required for 3D effects */
    gap: 15px;
}

.college-title {
    color: white;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

/* THE SMOOTH LOGO FIX */
.college-logo {
    max-height: 70px;
    width: auto;
    object-fit: contain;
    border-radius: 4px;
    /* This cubic-bezier creates a buttery-smooth, frictionless spin */
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

/* Pure CSS hover spin (No JavaScript required for hovering!) */
.logo-link:hover .college-logo {
    transform: rotateY(360deg);
}

/* If you still use JS for a timed spin, this class ensures it is smooth */
.spin-halfway {
    transform: rotateY(90deg);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1rem;
    align-items: center;
}

    .nav-links a {
        color: white;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
    }

        .nav-links a:hover {
            color: #ffcc00;
        }

/* Hamburger Menu Icon */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        background-color: white;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }

/* Dropdown Menu */
/* 1. Make the text look clickable even without an href */
.nav-dropdown .nav-link {
    cursor: pointer;
}

/* 2. The class JavaScript will use to show the menu on touch */
.nav-dropdown.active .nav-dropdown-content {
    display: block;
}

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
    z-index: 100;
    border-radius: 4px;
    overflow: hidden;
    top: 100%;
    left: 0;
}

    .nav-dropdown-content a {
        color: #003366 !important;
        padding: 12px 20px;
        text-decoration: none;
        display: block;
        font-weight: bold;
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s;
    }

        .nav-dropdown-content a:hover {
            background-color: #f4f7f6;
            color: #003366 !important;
        }

.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}


/* =========================================================
   3. HOMEPAGE GRID & LAYOUT (Cleaned and De-duplicated)
   ========================================================= */
.main-content {
    width: 92%;
    max-width: 1250px;
    margin: 3rem auto;
}

.homepage-top-section {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
    width: 100%;
    align-items: start;
}

/* Clean 30/70 Grid Layout */
.layout-row {
    display: flex;
    flex-direction: row;
    gap: 40px;
    width: 100%;
    align-items: stretch !important;
    margin-bottom: 3rem;
}

.col-notice {
    flex: 0 0 calc(30% - 20px);
    max-width: calc(30% - 20px);
}

.col-desk {
    flex: 0 0 calc(70% - 20px);
    max-width: calc(70% - 20px);
}

.notice-board, .admin-desks-section {
    height: 100%;
    margin: 0;
}

/* =========================================================
   4. NOTICE BOARD & TICKER
   ========================================================= */
.notice-board {
    background: #EFCA08;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

    .notice-board h2 {
        color: #003366;
        border-bottom: 2px solid #eee;
        padding-bottom: 0.8rem;
        margin-bottom: 1.5rem;
    }

.notice-scroll-container {
    height: 350px;
    overflow-y: auto;
    position: relative;
    padding-top: 10px;
    scrollbar-width: none;
}

    .notice-scroll-container::-webkit-scrollbar {
        display: none;
    }

.notice-scroll-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice-board li {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
    margin-bottom: 10px;
    line-height: 2.2;
}

.clickable-notice-text {
    text-decoration: none;
    color: #333;
    display: block;
    transition: all 0.2s ease-in-out;
}

    .clickable-notice-text:hover strong {
        color: #d9534f;
        text-decoration: underline;
    }

/* Horizontal Ticker */
.notice-ticker-container {
    width: 100%;
    background-color: rgba(255, 204, 0, 0.15);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: red;
    padding: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 10;
}

.notice-ticker-content {
    display: inline-block;
    padding-left: 100%;
    animation: tickerScroll 25s linear infinite;
}

.notice-ticker-container:hover .notice-ticker-content {
    animation-play-state: paused;
}

.ticker-item {
    font-size: 1.05rem;
    font-weight: 500;
}

.ticker-separator {
    margin: 0 30px;
    color: red;
    opacity: 0.4;
    font-weight: bold;
}

.clickable-ticker-text {
    text-decoration: none;
    color: darkred;
}

    .clickable-ticker-text:hover {
        color: #d9534f;
        text-decoration: underline;
    }

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* =========================================================
   5. PRESIDENT DESK & SLIDERS
   ========================================================= */
.admin-desks-section {
    display: flex;
    justify-content: center;
    width: 100%;
}

.desk-carousel-container {
    width: 100%;
    background-color: #00A6A6 !important;
    border: none;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.desk-slider-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.desk-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ADD THESE NEW LAYOUT RULES: */
.split-layout {
    display: flex;
    gap: 0 !important;
    align-items: stretch !important;
    background-color: transparent !important; /* Dark Navy Background */
    width: 100%;
    height: 100%;
    min-height: 450px;
}

.desk-image-wrapper {
    flex: 0 0 45%;
    overflow: hidden;
}

.desk-text-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 50px 50px 80px 50px;
}

.desk-content h3 {
    color: white !important;
    font-size: 2.2rem;
    margin-bottom: 20px;
    border-bottom: none !important;
}

.desk-content p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-style: normal !important;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: left !important;
    width: 100%;
    height: auto;
    -webkit-line-clamp: 6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
}

.read-more-btn {
    background-color: #5cb85c;
    color: white !important;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    align-self: flex-start;
    margin: 30px 0 0 0;
}

    .read-more-btn:hover {
        background-color: #4cae4c;
        transform: translateY(-2px);
    }

/* Desk Controls */
.desk-controls {
    position: absolute;
    bottom: 25px;
    right: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 0;
}

.desk-arrow {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 15px;
    margin: 0;
    transition: color 0.3s;
    color: rgba(255, 255, 255, 0.6) !important;
}

    .desk-arrow:hover {
        color: white !important;
    }

.desk-dots {
    display: flex;
    gap: 10px;
}

    .desk-dots .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s;
        background-color: rgba(255, 255, 255, 0.3);
    }

        .desk-dots .dot.active {
            background-color: white;
        }

/* Desk Modal Overlay */
.desk-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 51, 102, 0.8);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
}

    .desk-modal-overlay.active {
        display: flex;
    }

.desk-modal-box {
    background: white;
    width: 90%;
    max-width: 650px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: slideDownFade 0.3s ease-out;
}

.desk-modal-header {
    background: #00A6A6;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
}

    .desk-modal-header h3 {
        margin: 0;
        font-size: 1.4rem;
        color: white;
    }

.desk-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #003366;
}

.desk-modal-body {
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
    line-height: 1.8;
    color: #333;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

/* Image Slider (Full Bleed) */
.full-bleed-slider {
    width: 100%;
    height: 95vh;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow: hidden;
    position: relative;
    background-color: #000;
}

.slider-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}

    .slider-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        flex-shrink: 0;
    }


/* =========================================================
   6. STAFF & STUDENT DIRECTORIES
   ========================================================= */
.staff-container {
    max-width: 1250px;
    margin: 40px auto;
    padding: 0 20px;
}

.staff-section-title {
    color: #003366;
    border-bottom: 3px solid #ffcc00;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 30px;
    margin-top: 40px;
}

.staff-grid, .student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.staff-card, .student-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    padding: 15px;
    text-align: left;
    position: relative;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.student-card {
    text-align: center;
}

    .staff-card:hover, .student-card:hover {
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        border-color: #d0d0d0;
        transform: translateY(-5px);
    }

.staff-photo-container, .student-photo-container {
    border: 1px dashed #cccccc;
    padding: 4px;
    margin-bottom: 15px;
    background-color: #fcfcfc;
}

.staff-photo, .student-photo {
    width: 100%;
    aspect-ratio: 1 / 1.1;
    object-fit: cover;
    object-position: top;
    display: block;
}

.staff-info h3 {
    margin: 0 0 5px 0;
    color: #777777;
    font-size: 14px;
    font-weight: 500;
}

.staff-info h5 {
    margin: 0 0 12px 0;
    color: #222222;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
}

.staff-details, .student-details {
    margin: 4px 0;
    font-size: 12px;
    color: #666;
}

.student-info h3 {
    margin: 0 0 5px 0;
    color: #222;
    font-size: 15px;
    font-weight: bold;
}

.student-info h5 {
    margin: 0 0 10px 0;
    color: #003366;
    font-weight: 600;
    font-size: 13px;
}

.achiever-card {
    border: 2px solid #ffcc00;
    background: #fffdf5;
}

    .achiever-card .student-photo-container {
        border-color: #ffcc00;
    }

.achievement-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffcc00;
    color: #333;
    font-weight: bold;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: nowrap;
    z-index: 10;
}

/* =========================================================
   HOMEPAGE DESK SLIDER
   ========================================================= */
.desk-slider-viewport {
    width: 100%;
    overflow: hidden; /* This hides the other desks that are off-screen */
    position: relative;
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px 0; /* Keeps top/bottom padding, removes left/right so it slides clean */
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.desk-slider-track {
    display: flex;
    /* This transition matches the smooth glide of an image gallery */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.desk-slide {
    min-width: 100%; /* Forces each desk to take up the exact width of the viewport */
    box-sizing: border-box;
    padding: 0 30px; /* Internal padding for the text */
}

    .desk-slide h3 {
        color: #003366;
        border-bottom: 2px solid #ffcc00;
        padding-bottom: 8px;
        margin-top: 0;
        margin-bottom: 15px;
        display: inline-block;
    }

    .desk-slide p {
        color: #444;
        line-height: 1.7;
        text-align: justify;
        font-size: 1rem;
    }

/* =========================================================
   7. OFFICIAL DOCUMENTS (Letters)
   ========================================================= */
.letter-container {
    max-width: 850px;
    margin: 40px auto;
    padding: 50px 60px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.6;
    color: #333;
}

.letter-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
}

    .letter-header h2, .letter-header h3, .letter-header h4 {
        margin: 5px 0;
        color: #000;
    }

.letter-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-weight: bold;
}

.letter-body {
    text-align: justify;
}

.sign-off {
    text-align: right;
    margin-top: 40px;
    font-weight: bold;
}

.memo-section {
    margin-top: 50px;
    border-top: 1px dashed #ccc;
    padding-top: 20px;
    font-size: 0.95em;
}

.college-list {
    margin: 15px 0 15px 40px;
}

.ref-list {
    margin: 5px 0 15px 40px;
    list-style-type: lower-roman;
}

.resolution-box {
    margin-top: 50px;
    padding: 30px;
    border: 2px solid #000;
    background-color: #fcfcfc;
}

    .resolution-box h3 {
        text-align: center;
        margin-top: 0;
        text-decoration: underline;
    }

.ncte-page-header {
    text-align: center;
    margin: 40px 0 20px 0;
    color: #003366;
}

.gazette-badge {
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 20px;
}

@media print {
    .letter-container {
        box-shadow: none;
        margin: 0 0 40px 0;
        padding: 0;
        page-break-after: always;
    }

    header, footer, .navbar, .ncte-page-header {
        display: none !important;
    }

    .resolution-box {
        border: 1px solid #000;
    }
}

/* =========================================================
   8. ADMIN TOGGLE SWITCH
   ========================================================= */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
    vertical-align: middle;
}

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 24px;
}

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

.toggle-switch input:checked + .toggle-slider {
    background-color: #28a745;
}

    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }

/* =========================================================
   9. FOOTER
   ========================================================= */
.footer {
    background-color: #002244;
    color: #ccc;
    padding: 1rem 2rem 0.2rem 2rem;
    margin-top: auto;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: auto;
    text-align: left;
}

.footer-col h4 {
    color: #ffcc00;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    border-bottom: 2px solid #ffcc00;
    display: inline-block;
    padding-bottom: 3px;
}

.footer-col p {
    line-height: 1.4;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

    .footer-col ul li {
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

        .footer-col ul li a {
            color: #ccc;
            text-decoration: none;
            transition: all 0.3s ease;
        }

            .footer-col ul li a:hover {
                color: #ffffff;
                padding-left: 5px;
            }

.social-links {
    margin-top: 10px;
    font-size: 0.9rem;
}

    .social-links a {
        color: #ffcc00;
        text-decoration: none;
        margin-right: 8px;
        font-weight: bold;
    }

.footer-bottom {
    text-align: center;
    border-top: 1px solid #335;
    margin-top: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #888;
}


/* =========================================================
   10. MOBILE RESPONSIVENESS (THE FIX!)
   ========================================================= */

@media (max-width: 850px) {
    /* Navbar Mobile Fix */
    .college-title {
        font-size: 1rem;
        max-width: 200px;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
        gap: 1rem;
        text-align: center;
        background-color: #003366;
        padding-bottom: 1rem;
    }

        .nav-links.active {
            display: flex;
        }

    /* Shrink the Banner slightly on Mobile */
    .full-bleed-slider {
        height: 350px !important;
    }

    /* --- THE GRID FIX (Notice Board & Desk) --- */
    .homepage-top-section {
        grid-template-columns: 1fr;
    }

    .layout-row {
        flex-direction: column; /* Force Stack */
        gap: 20px;
    }

    .col-notice, .col-desk {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    /* Desk Slider Padding on Mobile */
    .desk-slide {
        padding: 0 1rem !important;
    }

    .admin-desks-section {
        padding: 2rem 0 !important;
    }

    /* Directory Grids on Mobile */
    .staff-grid, .student-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .staff-card, .student-card {
        padding: 10px;
    }

    .staff-info h3, .student-info h3 {
        font-size: 12px;
    }

    .staff-info h5, .student-info h5 {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .staff-details, .student-details {
        font-size: 11px;
    }

    /* Official Letters Mobile Fix */
    .letter-container {
        padding: 30px 20px;
        margin: 20px 10px;
    }

    .letter-meta {
        flex-direction: column;
        gap: 10px;
    }

        .letter-meta div {
            word-wrap: break-word;
            overflow-wrap: break-word;
            max-width: 100%;
        }

    /* --- NOTICE BOARD DYNAMIC HEIGHT FIX --- */
    .notice-board {
        height: auto !important;
    }

    .notice-scroll-container {
        height: auto !important;
        max-height: 350px; /* It will shrink if empty, but still scroll if full! */
    }

    /* --- OFFICIAL LETTERS TEXT WRAPPING FIX --- */
    .letter-meta div {
        word-break: break-all !important; /* Forces stubborn, spaceless file numbers to wrap safely */
    }
}

/* =========================================================
   11. INQUIRY POPUP, FLOATING BUTTON & TOASTS (Restored)
   ========================================================= */

/* Draggable Floating Inquiry Button */
.floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #ffcc00;
    color: #003366;
    border: none;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: grab;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    margin-top: 0;
}

    .floating-btn:active {
        cursor: grabbing;
        transform: scale(0.95);
    }

/* Hovering Popup Box - Centered */
.inquiry-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    z-index: 1001;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

    /* JavaScript uses this class to show the popup */
    .inquiry-popup.active {
        display: flex;
    }

.popup-header {
    background-color: #003366;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .popup-header h3 {
        margin: 0;
        padding: 0;
        border: none;
        color: white;
        font-size: 1.2rem;
    }

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
}

    .close-btn:hover {
        background: none;
        color: #ffcc00;
    }

.popup-form {
    padding: 20px;
    gap: 15px;
}

    .popup-form input, .popup-form textarea {
        background-color: #f9f9f9;
        border: 1px solid #ddd;
    }

/* Toast Notification Popup */
.toast-notification {
    position: fixed;
    top: 30px;
    right: 30px;
    padding: 15px 25px;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    z-index: 9999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s ease-in-out;
}

    .toast-notification.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.toast-success {
    background-color: #28a745;
    border-left: 5px solid #1e7e34;
}

.toast-error {
    background-color: #dc3545;
    border-left: 5px solid #b02a37;
}

/* =========================================================
   12. FORMS & BUTTONS (Restored Styles)
   ========================================================= */

/* Stack all form elements cleanly */
form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* Modern, full-width inputs */
input, textarea, select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fafafa;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box; /* Keeps padding inside the box so it doesn't overflow */
}

    /* Highlight the box when typing */
    input:focus, textarea:focus, select:focus {
        outline: none;
        border-color: #003366;
        box-shadow: 0 0 5px rgba(0, 51, 102, 0.2);
    }

/* Base Button Styling */
button {
    background-color: #003366;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

    button:hover {
        background-color: #002244;
    }

/* --- Specific Fixes for the Popup Form --- */
.popup-form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .popup-form button {
        background-color: #ffcc00;
        color: #003366;
        margin-top: 5px;
    }

        .popup-form button:hover {
            background-color: #e6b800;
        }

/* =========================================================
   13. ADMIN DASHBOARD & LIBRARY STYLES
   ========================================================= */

.admin-card {
    max-width: 900px;
    margin: 40px auto;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

.admin-header {
    color: #003366;
    border-bottom: 2px solid #ffcc00;
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        display: block;
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
    }

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 1rem;
}

    .form-control:focus {
        border-color: #003366;
        outline: none;
    }

.btn-upload {
    background-color: #003366;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}

    .btn-upload:hover {
        background-color: #002244;
    }

.btn-delete {
    background-color: #d9534f;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

    .btn-delete:hover {
        background-color: #c9302c;
    }

/* SCROLLING TABLE LOGIC */
.table-scroll-container {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 15px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

    .admin-table th, .admin-table td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
    }

    .admin-table th {
        background-color: #f4f7f6;
        color: #003366;
        position: sticky;
        top: 0;
        z-index: 2;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

/* =========================================================
   14. PUBLIC LIBRARY PAGE
   ========================================================= */

.library-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.library-search {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 2px solid #1a365d;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box; /* Keeps padding perfectly inside the lines */
}

.table-wrapper {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto; /* Pro-tip: Ensures the table is swipeable on mobile! */
    border: 2px solid #ccc;
    border-radius: 6px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}

.library-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* Prevents columns from getting crushed on small screens */
}

    .library-table th, .library-table td {
        border: 1px solid #ddd;
        padding: 14px;
        text-align: left;
    }

    .library-table th {
        background-color: #1a365d;
        color: white;
        position: sticky;
        top: 0;
        z-index: 1;
    }

.sortable-header {
    cursor: pointer;
    user-select: none;
}

    .sortable-header:hover {
        background-color: #2c4f85;
    }

.library-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.library-table tr:hover {
    background-color: #f1f5f9;
}

/* --- LIBRARY BUTTON STYLES --- */
.btn-action-group {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap; /* Allows buttons to stack cleanly if screen is too small */
}

.btn-read {
    padding: 8px 12px;
    background-color: #17a2b8; /* Teal/Blue */
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s;
}

    .btn-read:hover {
        background-color: #138496;
    }

.btn-download {
    padding: 8px 12px;
    background-color: #28a745; /* Green */
    color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s;
}

    .btn-download:hover {
        background-color: #218838;
    }

.sort-icon {
    font-size: 0.85em;
    margin-left: 5px;
}

/* =========================================================
   15. ACADEMIC PROGRAMS & TABS (Restored & Enhanced)
   ========================================================= */

/* The row of buttons */
.tab-container {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 0;
    gap: 5px;
}

/* Individual Tab Buttons */
.tab-link {
    background-color: #f4f7f6;
    color: #555;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 24px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
}

    .tab-link:hover {
        background-color: #e9ecef;
        color: #003366;
    }

    /* The Active Tab Button */
    .tab-link.active {
        background-color: #ffffff;
        color: #003366;
        border: 1px solid #ddd;
        border-bottom: 2px solid #ffffff; /* Blends into the content box below */
        margin-bottom: -2px; /* Pulls it down over the gray line */
    }

/* The Main Content Box */
.tab-content {
    display: none; /* Hides inactive tabs */
    background: #ffffff;
    padding: 40px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 8px 8px 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    animation: fadeIn 0.4s ease-in-out;
}

    .tab-content.active-tab {
        display: block; /* Shows the active tab */
    }

    /* Typography inside the Programs Page */
    .tab-content h2 {
        color: #003366;
        border-bottom: 3px solid #ffcc00;
        display: inline-block;
        padding-bottom: 8px;
        margin-bottom: 25px;
        margin-top: 0;
    }

    .tab-content h3 {
        color: #00509e;
        margin-top: 30px;
        margin-bottom: 15px;
        font-size: 1.3rem;
    }

    .tab-content p {
        line-height: 1.8;
        color: #444;
        margin-bottom: 15px;
        font-size: 1.05rem;
        text-align: justify;
    }

    .tab-content ul {
        list-style-type: disc;
        padding-left: 25px;
        margin-bottom: 20px;
    }

        .tab-content ul li {
            line-height: 1.8;
            color: #444;
            margin-bottom: 10px;
            font-size: 1.05rem;
        }

            .tab-content ul li strong {
                color: #222;
            }

/* Smooth fade transition when clicking between B.Ed and D.El.Ed */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Mobile Responsiveness for Tabs */
@media (max-width: 768px) {
    .tab-container {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
    }

    .tab-link {
        border-radius: 4px;
        margin-bottom: 5px;
        border: 1px solid #ddd;
    }

        .tab-link.active {
            border-bottom: 1px solid #ddd;
            margin-bottom: 5px;
        }

    .tab-content {
        border-top: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
    }
}

/* ========================================= */
/* DESK SPLIT LAYOUT (Photo Left, Text Right) */
/* ========================================= */
.split-layout {
    display: flex;
    gap: 30px; /* Beautiful spacing between photo and text */
    align-items: center; /* Vertically centers the text with the photo */
    text-align: left; /* Forces text to align left instead of center */
}

.desk-image-wrapper {
    flex: 0 0 160px; /* Locks the photo column to exactly 160px wide */
}

.desk-photo-new {
    width: 100%;
    height: 200px; /* Taller, larger photo! */
    object-fit: cover;
    border-radius: 8px;
    border: 3px solid #ffcc00;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: block;
}

.desk-text-wrapper {
    flex: 1; /* Takes up all the remaining empty space */
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligns title and button perfectly to the left */
}

    /* Force the paragraph to align left and use full width */
    .desk-text-wrapper p {
        text-align: left !important;
        margin-bottom: 1.2rem;
        width: 100%;
    }

/* ========================================= */
/* DESK HERO OVERRIDES (FIXES SQUISHED PHOTO & PADDING) */
/* ========================================= */

/* 1. Kills the old white box background and bottom padding */
.desk-carousel-container, .desk-slide {
    background-color: #00A6A6 !important;
    padding: 0 !important;
    border: none !important;
}

/* 2. Forces the image column to stretch top-to-bottom */
.desk-image-wrapper {
    flex: 0 0 45% !important;
    display: flex;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. The brand new Edge-to-Edge Image styling */
.desk-photo-hero {
    width: 100% !important;
    height: 100% !important;
    min-height: 450px; /* Guarantees it matches the blue box height */
    object-fit: cover !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: block;
}

/* ========================================= */
/* FIX FOOTER GAP (REMOVES BOTTOM WHITESPACE)*/
/* ========================================= */
.main-content {
    margin-bottom: 2rem !important; /* Reduces the massive gap above the footer */
    padding-bottom: 0 !important;
}

.layout-row {
    margin-bottom: 0 !important;
}

/* --- MOBILE OVERRIDE: Stacks them vertically on small screens --- */
@media (max-width: 850px) {
    .split-layout {
        flex-direction: column;
        text-align: center;
    }

    .desk-image-wrapper {
        flex: 0 0 auto;
        margin-bottom: 10px;
    }

    .desk-photo-new {
        height: 180px;
        width: 140px;
        margin: 0 auto;
    }

    .desk-text-wrapper {
        align-items: center; /* Re-centers the button on phones */
    }

        .desk-text-wrapper p {
            text-align: justify !important;
        }

    /* --- MOBILE DESK OVERRIDE --- */
    .split-layout {
        flex-direction: column !important;
    }

    .desk-image-wrapper {
        flex: 0 0 250px;
    }

    .desk-text-wrapper {
        padding: 40px 20px 80px 20px;
    }

    .desk-controls {
        right: 50%;
        transform: translateX(50%);
    }
}

/* ========================================= */
/* ADMIN DASHBOARD MOBILE GRID FIX           */
/* ========================================= */
.admin-dashboard-grid {
    max-width: 1200px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

    /* Prevents table blowout */
    .admin-dashboard-grid > div {
        min-width: 0;
    }

@media (max-width: 850px) {
    .admin-dashboard-grid {
        grid-template-columns: 1fr; /* Stack vertically on phones */
    }

    /* Ensures the desk management stretches full width */
    .desk-management {
        grid-column: 1 / -1 !important;
        padding: 1.5rem !important;
    }

    /* Shrinks Hero text on mobile */
    .hero h1 {
        font-size: 2rem;
    }
}

/* ========================================= */
/* UNIVERSAL NAVBAR FIX (HOME, ADMIN, LOGIN) */
/* ========================================= */
.navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 8px 1% !important;
    padding-left: 1.5% !important;
    padding-right: 2% !important;
}

.logo-link {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    /* CRITICAL: Leaves 25% of the screen free for the hamburger icon on mobile! */
    max-width: 75% !important;
}

/* ========================================= */
/* ADMIN DASHBOARD MOBILE GRID FIX           */
/* ========================================= */
.admin-dashboard-grid {
    max-width: 1200px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}

    .admin-dashboard-grid > div {
        min-width: 0; /* Prevents the leads table from breaking the screen width */
    }

/* ========================================= */
/* ALL MOBILE RESPONSIVE OVERRIDES           */
/* ========================================= */
@media (max-width: 850px) {

    /* 1. Navbar Mobile Overrides */
    .college-title {
        font-size: 1.1rem !important; /* Shrinks the giant text */
        white-space: normal !important;
        line-height: 1.2 !important;
    }

    .menu-toggle {
        display: flex !important;
        margin-left: auto !important; /* Forces hamburger perfectly to the right */
        padding: 10px !important; /* Big touch target */
    }

    .nav-links {
        display: none !important;
        width: 100% !important;
        flex-direction: column !important;
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
    }

        .nav-links.active {
            display: flex !important;
        }

        .nav-links li {
            width: 100%;
            text-align: center;
            padding: 10px 0;
        }

    /* 2. Dashboard Mobile Overrides */
    .admin-dashboard-grid {
        grid-template-columns: 1fr !important; /* Stacks Dashboard columns vertically! */
    }

    .desk-management {
        grid-column: 1 / -1 !important;
    }
}

/* ========================================= */
/* SLEDGEHAMMER MOBILE FIXES (OVERRIDES HTML)*/
/* ========================================= */
@media (max-width: 850px) {

    /* 1. FIX THE DASHBOARD GRID BLOWOUT */
    /* Hunts down the exact inline style causing the side-by-side issue */
    .main-content[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
    }

    /* 2. FIX SQUISHED DESK BUTTONS */
    /* Forces the desk text and buttons to stack vertically */
    .desk-management ul li {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: flex-start !important;
    }

        .desk-management ul li > div:last-child {
            margin-left: 0 !important;
            width: 100% !important;
            justify-content: flex-start !important;
        }

    /* 3. FIX ADMIN & LOGIN NAVBARS */
    /* Hunts down the hardcoded header styling */
    header[style*="padding: 15px 40px"] {
        flex-direction: column !important;
        padding: 15px 20px !important;
        gap: 15px !important;
    }

        /* Shrink the massive college title */
        header[style*="padding: 15px 40px"] h1 {
            font-size: 1.15rem !important;
            line-height: 1.3 !important;
            text-align: center !important;
            white-space: normal !important;
        }

        /* Center the logo and title */
        header[style*="padding: 15px 40px"] > div {
            flex-direction: column !important;
            text-align: center !important;
        }

        /* Stack the links neatly */
        header[style*="padding: 15px 40px"] nav {
            flex-direction: column !important;
            width: 100% !important;
            gap: 0 !important;
        }

            header[style*="padding: 15px 40px"] nav a {
                width: 100% !important;
                text-align: center !important;
                border-left: none !important;
                padding: 12px 0 !important;
                margin: 0 !important;
                border-bottom: 1px solid rgba(255,255,255,0.1) !important;
            }
}



===========================================================================================================================================================================



/* =========================================================
   0. COLOR THEME VARIABLES (From User Palette)
   ========================================================= */
/*:root {
    --color-dark-orange: #F08700;
    --color-light-orange: #F49F0A;
    --color-yellow: #EFCA08;
    --color-aqua: #00A6A6;
    --color-pale-blue: #BBDEF0;
}*/

/* =========================================================
   1. BASE STYLES & RESET
   ========================================================= */
/** {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

body {
    color: #333;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
}

.container {
    width: 92%;
    max-width: 1250px;
    margin: 0 auto;
}*/

/* =========================================================
   2. NAVBAR & HEADER (Standardized & Ultra-Smooth)
   ========================================================= */
/*.navbar {
    background-color: #003366;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    flex-wrap: wrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);*/ /* Slightly deeper shadow */
    /*position: relative;
    z-index: 1000;
}

.logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    perspective: 1000px;*/ /* Required for 3D effects */
    /*gap: 15px;
}

.college-title {
    color: white;
    font-size: 1.4rem;
    font-weight: bold;
    letter-spacing: 0.5px;
    line-height: 1.2;
}*/

/* THE SMOOTH LOGO FIX */
/*.college-logo {
    max-height: 95px;
    width: auto;
    object-fit: contain;
    border-radius: 12px;*/
    /* This cubic-bezier creates a buttery-smooth, frictionless spin */
    /*transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}*/

/* Pure CSS hover spin (No JavaScript required for hovering!) */
/*.logo-link:hover .college-logo {
    transform: rotateY(360deg);
}*/

/* If you still use JS for a timed spin, this class ensures it is smooth */
/*.spin-halfway {
    transform: rotateY(90deg);
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

    .nav-links a {
        color: white;
        text-decoration: none;
        font-weight: 500;
        transition: color 0.3s ease;
    }

        .nav-links a:hover {
            color: #ffcc00;
        }*/

/* Hamburger Menu Icon */
/*.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

    .menu-toggle .bar {
        width: 25px;
        height: 3px;
        background-color: white;
        border-radius: 3px;
        transition: all 0.3s ease-in-out;
    }*/

/* Dropdown Menu */
/* 1. Make the text look clickable even without an href */
/*.nav-dropdown .nav-link {
    cursor: pointer;
}*/

/* 2. The class JavaScript will use to show the menu on touch */
/*.nav-dropdown.active .nav-dropdown-content {
    display: block;
}

.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.15);
    z-index: 100;
    border-radius: 4px;
    overflow: hidden;
    top: 100%;
    left: 0;
}

    .nav-dropdown-content a {
        color: #003366 !important;
        padding: 12px 20px;
        text-decoration: none;
        display: block;
        font-weight: bold;
        border-bottom: 1px solid #f0f0f0;
        transition: background-color 0.2s;
    }

        .nav-dropdown-content a:hover {
            background-color: #f4f7f6;
            color: #003366 !important;
        }

.nav-dropdown:hover .nav-dropdown-content {
    display: block;
}*/


/* =========================================================
   3. HOMEPAGE GRID & LAYOUT (Cleaned and De-duplicated)
   ========================================================= */
/*.main-content {
    width: 92%;
    max-width: 1250px;
    margin: 3rem auto;
}

.homepage-top-section {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 2rem;
    width: 100%;
    align-items: start;
}*/

/* Clean 30/70 Grid Layout */
/*.layout-row {
    display: flex;
    flex-direction: row;
    gap: 40px;
    width: 100%;
    align-items: stretch !important;
    margin-bottom: 3rem;
}

.col-notice {
    flex: 0 0 calc(30% - 20px);
    max-width: calc(30% - 20px);
}

.col-desk {
    flex: 0 0 calc(70% - 20px);
    max-width: calc(70% - 20px);
}

.notice-board, .admin-desks-section {
    height: 100%;
    margin: 0;
}*/

/* =========================================================
   4. NOTICE BOARD & TICKER
   ========================================================= */
/*.notice-board {
    background: var(--color-yellow);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

    .notice-board h2 {
        color: #003366;
        border-bottom: 2px solid #eee;
        padding-bottom: 0.8rem;
        margin-bottom: 1.5rem;
    }

.notice-scroll-container {
    height: 350px;
    overflow-y: auto;
    position: relative;
    padding-top: 10px;
    scrollbar-width: none;
}

    .notice-scroll-container::-webkit-scrollbar {
        display: none;
    }

.notice-scroll-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notice-board li {
    border-bottom: 1px dashed #ccc;
    padding-bottom: 5px;
    margin-bottom: 10px;
    line-height: 2.2;
}

.clickable-notice-text {
    text-decoration: none;
    color: #333;
    display: block;
    transition: all 0.2s ease-in-out;
}

    .clickable-notice-text:hover strong {
        color: #d9534f;
        text-decoration: underline;
    }*/

/* Horizontal Ticker */
/*.notice-ticker-container {
    width: 100%;
    background-color: var(--color-light-orange);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    color: #ffffff;
    padding: 10px 0;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 10;
}

.notice-ticker-content {
    display: inline-block;
    padding-left: 100%;
    animation: tickerScroll 25s linear infinite;
}

.notice-ticker-container:hover .notice-ticker-content {
    animation-play-state: paused;
}

.ticker-item {
    font-size: 1.05rem;
    font-weight: 500;
}

.ticker-separator {
    margin: 0 30px;
    color: #ffffff;
    opacity: 0.6;
    font-weight: bold;
}

.clickable-ticker-text {
    text-decoration: none;
    color: #ffffff;
    font-weight: bold;
}

    .clickable-ticker-text:hover {
        color: #003366;
        text-decoration: underline;
    }

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}*/

/* =========================================================
   5. PRESIDENT DESK & SLIDERS
   ========================================================= */
/*.admin-desks-section {
    display: flex;
    justify-content: center;
    width: 100%;
}

.desk-carousel-container {
    width: 100%;
    background-color: var(--color-aqua) !important;
    border: none;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.desk-slider-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.desk-slide {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    height: 100%;
}*/

/* ADD THESE NEW LAYOUT RULES: */
/*.split-layout {
    display: flex;
    gap: 0 !important;
    align-items: stretch !important;
    background-color: transparent !important;*/ /* Dark Navy Background */
    /*width: 100%;
    height: 100%;
    min-height: 450px;
}

.desk-image-wrapper {
    flex: 0 0 45%;
    overflow: hidden;
}

.desk-text-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 50px 50px 80px 50px;
}

.desk-content h3 {
    color: white !important;
    font-size: 2.2rem;
    margin-bottom: 20px;
    border-bottom: none !important;
}

.desk-content p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-style: normal !important;
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: left !important;
    width: 100%;
    height: auto;
    -webkit-line-clamp: 6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: 0;
}

.read-more-btn {
    background-color: #5cb85c;
    color: white !important;
    border: none;
    padding: 12px 25px;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    align-self: center;
    margin: 30px 0 0 0;
}

    .read-more-btn:hover {
        background-color: #4cae4c;
        transform: translateY(-2px);
    }*/

/* Desk Controls */
/*.desk-controls {
    position: absolute;
    bottom: 25px;
    right: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 0;
}

.desk-arrow {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 15px;
    margin: 0;
    transition: color 0.3s;
    color: rgba(255, 255, 255, 0.6) !important;
}

    .desk-arrow:hover {
        color: white !important;
    }

.desk-dots {
    display: flex;
    gap: 10px;
}

    .desk-dots .dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.3s;
        background-color: rgba(255, 255, 255, 0.3);
    }

        .desk-dots .dot.active {
            background-color: white;
        }*/

/* Desk Modal Overlay */
/*.desk-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 51, 102, 0.8);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
}

    .desk-modal-overlay.active {
        display: flex;
    }

.desk-modal-box {
    background: white;
    width: 90%;
    max-width: 650px;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    animation: slideDownFade 0.3s ease-out;
}

.desk-modal-header {
    background: #ffcc00;
    padding: 15px 25px;
    display: flex;
    justify-content: space-between;
}

    .desk-modal-header h3 {
        margin: 0;
        font-size: 1.4rem;
        color: #003366;
    }

.desk-close-btn {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #003366;
}

.desk-modal-body {
    padding: 30px;
    max-height: 70vh;
    overflow-y: auto;
    line-height: 1.8;
    color: #333;
}

@keyframes slideDownFade {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }

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

/* Image Slider (Full Bleed) */
/*.full-bleed-slider {
    width: 100%;
    height: 95vh;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow: hidden;
    position: relative;
    background-color: #000;
}

.slider-wrapper {
    display: flex;
    height: 100%;
    transition: transform 0.6s ease-in-out;
}

    .slider-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        flex-shrink: 0;
    }*/


/* =========================================================
   6. STAFF & STUDENT DIRECTORIES
   ========================================================= */
/*.staff-container {
    max-width: 1250px;
    margin: 40px auto;
    padding: 0 20px;
}

.staff-section-title {
    color: #003366;
    border-bottom: 3px solid #ffcc00;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 30px;
    margin-top: 40px;
}

.staff-grid, .student-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 50px;
}

.staff-card, .student-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    padding: 15px;
    text-align: left;
    position: relative;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.student-card {
    text-align: center;
}

    .staff-card:hover, .student-card:hover {
        box-shadow: 0 8px 25px rgba(0,0,0,0.1);
        border-color: #d0d0d0;
        transform: translateY(-5px);
    }

.staff-photo-container, .student-photo-container {
    border: 1px dashed #cccccc;
    padding: 4px;
    margin-bottom: 15px;
    background-color: #fcfcfc;
}

.staff-photo, .student-photo {
    width: 100%;
    aspect-ratio: 1 / 1.1;
    object-fit: cover;
    object-position: top;
    display: block;
}

.staff-info h3 {
    margin: 0 0 5px 0;
    color: #777777;
    font-size: 14px;
    font-weight: 500;
}

.staff-info h5 {
    margin: 0 0 12px 0;
    color: #222222;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.4;
}

.staff-details, .student-details {
    margin: 4px 0;
    font-size: 12px;
    color: #666;
}

.student-info h3 {
    margin: 0 0 5px 0;
    color: #222;
    font-size: 15px;
    font-weight: bold;
}

.student-info h5 {
    margin: 0 0 10px 0;
    color: #003366;
    font-weight: 600;
    font-size: 13px;
}

.achiever-card {
    border: 2px solid #ffcc00;
    background: #fffdf5;
}

    .achiever-card .student-photo-container {
        border-color: #ffcc00;
    }

.achievement-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ffcc00;
    color: #333;
    font-weight: bold;
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    white-space: nowrap;
    z-index: 10;
}*/

/* =========================================================
   HOMEPAGE DESK SLIDER
   ========================================================= */
/*.desk-slider-viewport {
    width: 100%;
    overflow: hidden;*/ /* This hides the other desks that are off-screen */
    /*position: relative;
    background-color: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 20px 0;*/ /* Keeps top/bottom padding, removes left/right so it slides clean */
    /*box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.desk-slider-track {
    display: flex;*/
    /* This transition matches the smooth glide of an image gallery */
    /*transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.desk-slide {
    min-width: 100%;*/ /* Forces each desk to take up the exact width of the viewport */
    /*box-sizing: border-box;
    padding: 0 30px;*/ /* Internal padding for the text */
/*}

    .desk-slide h3 {
        color: #003366;
        border-bottom: 2px solid #ffcc00;
        padding-bottom: 8px;
        margin-top: 0;
        margin-bottom: 15px;
        display: inline-block;
    }

    .desk-slide p {
        color: #444;
        line-height: 1.7;
        text-align: justify;
        font-size: 1rem;
    }*/

/* =========================================================
   7. OFFICIAL DOCUMENTS (Letters)
   ========================================================= */
/*.letter-container {
    max-width: 850px;
    margin: 40px auto;
    padding: 50px 60px;
    background: #ffffff;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    font-family: 'Times New Roman', Times, serif;
    line-height: 1.6;
    color: #333;
}

.letter-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid #333;
    padding-bottom: 15px;
}

    .letter-header h2, .letter-header h3, .letter-header h4 {
        margin: 5px 0;
        color: #000;
    }

.letter-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    font-weight: bold;
}

.letter-body {
    text-align: justify;
}

.sign-off {
    text-align: right;
    margin-top: 40px;
    font-weight: bold;
}

.memo-section {
    margin-top: 50px;
    border-top: 1px dashed #ccc;
    padding-top: 20px;
    font-size: 0.95em;
}

.college-list {
    margin: 15px 0 15px 40px;
}

.ref-list {
    margin: 5px 0 15px 40px;
    list-style-type: lower-roman;
}

.resolution-box {
    margin-top: 50px;
    padding: 30px;
    border: 2px solid #000;
    background-color: #fcfcfc;
}

    .resolution-box h3 {
        text-align: center;
        margin-top: 0;
        text-decoration: underline;
    }

.ncte-page-header {
    text-align: center;
    margin: 40px 0 20px 0;
    color: #003366;
}

.gazette-badge {
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 20px;
}

@media print {
    .letter-container {
        box-shadow: none;
        margin: 0 0 40px 0;
        padding: 0;
        page-break-after: always;
    }

    header, footer, .navbar, .ncte-page-header {
        display: none !important;
    }

    .resolution-box {
        border: 1px solid #000;
    }
}*/

/* =========================================================
   8. ADMIN TOGGLE SWITCH
   ========================================================= */
/*.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
    vertical-align: middle;
}

    .toggle-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .3s;
    border-radius: 24px;
}

    .toggle-slider:before {
        position: absolute;
        content: "";
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: .3s;
        border-radius: 50%;
    }

.toggle-switch input:checked + .toggle-slider {
    background-color: #28a745;
}

    .toggle-switch input:checked + .toggle-slider:before {
        transform: translateX(20px);
    }*/

/* =========================================================
   9. FOOTER
   ========================================================= */
/*.footer {
    background-color: #002244;
    color: #ccc;
    padding: 1rem 2rem 0.2rem 2rem;
    margin-top: auto;*/ /* Automatically pushes the footer to the bottom of the content */
/*}

.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 2rem;
    max-width: 1200px;
    margin: auto;
    text-align: left;
}

.footer-col h4 {
    color: #ffcc00;
    margin-bottom: 0.8rem;
    font-size: 1.1rem;
    border-bottom: 2px solid #ffcc00;
    display: inline-block;
    padding-bottom: 3px;
}

.footer-col p {
    line-height: 1.4;
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.footer-col ul {
    list-style: none;
    padding: 0;
}

    .footer-col ul li {
        margin-bottom: 5px;
        font-size: 0.9rem;
    }

        .footer-col ul li a {
            color: #ccc;
            text-decoration: none;
            transition: all 0.3s ease;
        }

            .footer-col ul li a:hover {
                color: #ffffff;
                padding-left: 5px;
            }

.social-links {
    margin-top: 10px;
    font-size: 0.9rem;
}

    .social-links a {
        color: #ffcc00;
        text-decoration: none;
        margin-right: 8px;
        font-weight: bold;
    }

.footer-bottom {
    text-align: center;
    border-top: 1px solid #335;
    margin-top: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #888;
}*/


/* =========================================================
   10. MOBILE RESPONSIVENESS (THE FIX!)
   ========================================================= */

/*@media (max-width: 850px) {*/
    /* Navbar Mobile Fix */
    /*.college-title {
        font-size: 1rem;
        max-width: 200px;
    }

    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
        gap: 1rem;
        text-align: center;
        background-color: #003366;
        padding-bottom: 1rem;
    }

        .nav-links.active {
            display: flex;
        }*/

    /* Shrink the Banner slightly on Mobile */
    /*.full-bleed-slider {
        height: 350px !important;
    }*/

    /* --- THE GRID FIX (Notice Board & Desk) --- */
    /*.homepage-top-section {
        grid-template-columns: 1fr;
    }

    .layout-row {
        flex-direction: column;*/ /* Force Stack */
        /*gap: 20px;
    }

    .col-notice, .col-desk {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }*/

    /* Desk Slider Padding on Mobile */
    /*.desk-slide {
        padding: 0 1rem !important;
    }

    .admin-desks-section {
        padding: 2rem 0 !important;
    }*/

    /* Directory Grids on Mobile */
    /*.staff-grid, .student-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .staff-card, .student-card {
        padding: 10px;
    }

    .staff-info h3, .student-info h3 {
        font-size: 12px;
    }

    .staff-info h5, .student-info h5 {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .staff-details, .student-details {
        font-size: 11px;
    }*/

    /* Official Letters Mobile Fix */
    /*.letter-container {
        padding: 30px 20px;
        margin: 20px 10px;
    }

    .letter-meta {
        flex-direction: column;
        gap: 10px;
    }

        .letter-meta div {
            word-wrap: break-word;
            overflow-wrap: break-word;
            max-width: 100%;
        }*/

    /* --- NOTICE BOARD DYNAMIC HEIGHT FIX --- */
    /*.notice-board {
        height: auto !important;
    }

    .notice-scroll-container {
        height: auto !important;
        max-height: 350px;*/ /* It will shrink if empty, but still scroll if full! */
    /*}*/

    /* --- OFFICIAL LETTERS TEXT WRAPPING FIX --- */
    /*.letter-meta div {
        word-break: break-all !important;*/ /* Forces stubborn, spaceless file numbers to wrap safely */
    /*}
}*/

/* =========================================================
   11. INQUIRY POPUP, FLOATING BUTTON & TOASTS (Restored)
   ========================================================= */

/* Draggable Floating Inquiry Button */
/*.floating-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #ffcc00;
    color: #003366;
    border: none;
    padding: 15px 25px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: grab;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    margin-top: 0;
}

    .floating-btn:active {
        cursor: grabbing;
        transform: scale(0.95);
    }*/

/* Hovering Popup Box - Centered */
/*.inquiry-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    z-index: 1001;
    display: none;
    flex-direction: column;
    overflow: hidden;
}*/

    /* JavaScript uses this class to show the popup */
    /*.inquiry-popup.active {
        display: flex;
    }

.popup-header {
    background-color: #003366;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .popup-header h3 {
        margin: 0;
        padding: 0;
        border: none;
        color: white;
        font-size: 1.2rem;
    }

.close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
}

    .close-btn:hover {
        background: none;
        color: #ffcc00;
    }

.popup-form {
    padding: 20px;
    gap: 15px;
}

    .popup-form input, .popup-form textarea {
        background-color: #f9f9f9;
        border: 1px solid #ddd;
    }*/

/* Toast Notification Popup */
/*.toast-notification {
    position: fixed;
    top: 30px;
    right: 30px;
    padding: 15px 25px;
    border-radius: 6px;
    color: white;
    font-weight: bold;
    z-index: 9999;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s ease-in-out;
}

    .toast-notification.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

.toast-success {
    background-color: #28a745;
    border-left: 5px solid #1e7e34;
}

.toast-error {
    background-color: #dc3545;
    border-left: 5px solid #b02a37;
}*/

/* =========================================================
   12. FORMS & BUTTONS (Restored Styles)
   ========================================================= */

/* Stack all form elements cleanly */
/*form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}*/

/* Modern, full-width inputs */
/*input, textarea, select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fafafa;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;*/ /* Keeps padding inside the box so it doesn't overflow */
/*}*/

    /* Highlight the box when typing */
    /*input:focus, textarea:focus, select:focus {
        outline: none;
        border-color: #003366;
        box-shadow: 0 0 5px rgba(0, 51, 102, 0.2);
    }*/

/* Base Button Styling */
/*button {
    background-color: #003366;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.1rem;
    transition: background-color 0.3s ease;
}

    button:hover {
        background-color: #002244;
    }*/

/* --- Specific Fixes for the Popup Form --- */
/*.popup-form {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

    .popup-form button {
        background-color: #ffcc00;
        color: #003366;
        margin-top: 5px;
    }

        .popup-form button:hover {
            background-color: #e6b800;
        }*/

/* =========================================================
   13. ADMIN DASHBOARD & LIBRARY STYLES
   ========================================================= */

/*.admin-card {
    max-width: 900px;
    margin: 40px auto;
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
}

.admin-header {
    color: #003366;
    border-bottom: 2px solid #ffcc00;
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-size: 1.8rem;
}

.form-group {
    margin-bottom: 20px;
}

    .form-group label {
        display: block;
        font-weight: bold;
        color: #333;
        margin-bottom: 8px;
    }

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #f9f9f9;
    font-size: 1rem;
}

    .form-control:focus {
        border-color: #003366;
        outline: none;
    }

.btn-upload {
    background-color: #003366;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    width: 100%;
}

    .btn-upload:hover {
        background-color: #002244;
    }

.btn-delete {
    background-color: #d9534f;
    color: white;
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
}

    .btn-delete:hover {
        background-color: #c9302c;
    }*/

/* SCROLLING TABLE LOGIC */
/*.table-scroll-container {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-top: 15px;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0;
}

    .admin-table th, .admin-table td {
        border: 1px solid #ddd;
        padding: 12px;
        text-align: left;
    }

    .admin-table th {
        background-color: #f4f7f6;
        color: #003366;
        position: sticky;
        top: 0;
        z-index: 2;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }*/

/* =========================================================
   14. PUBLIC LIBRARY PAGE
   ========================================================= */

/*.library-container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.library-search {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 2px solid #1a365d;
    border-radius: 6px;
    font-size: 16px;
    box-sizing: border-box;*/ /* Keeps padding perfectly inside the lines */
/*}

.table-wrapper {
    max-height: 600px;
    overflow-y: auto;
    overflow-x: auto;*/ /* Pro-tip: Ensures the table is swipeable on mobile! */
    /*border: 2px solid #ccc;
    border-radius: 6px;
    box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
}

.library-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px;*/ /* Prevents columns from getting crushed on small screens */
/*}

    .library-table th, .library-table td {
        border: 1px solid #ddd;
        padding: 14px;
        text-align: left;
    }

    .library-table th {
        background-color: #1a365d;
        color: white;
        position: sticky;
        top: 0;
        z-index: 1;
    }

.sortable-header {
    cursor: pointer;
    user-select: none;
}

    .sortable-header:hover {
        background-color: #2c4f85;
    }

.library-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.library-table tr:hover {
    background-color: #f1f5f9;
}*/

/* --- LIBRARY BUTTON STYLES --- */
/*.btn-action-group {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;*/ /* Allows buttons to stack cleanly if screen is too small */
/*}

.btn-read {
    padding: 8px 12px;
    background-color: #17a2b8;*/ /* Teal/Blue */
    /*color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s;
}

    .btn-read:hover {
        background-color: #138496;
    }

.btn-download {
    padding: 8px 12px;
    background-color: #28a745;*/ /* Green */
    /*color: white !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.3s;
}

    .btn-download:hover {
        background-color: #218838;
    }

.sort-icon {
    font-size: 0.85em;
    margin-left: 5px;
}*/

/* =========================================================
   15. ACADEMIC PROGRAMS & TABS (Restored & Enhanced)
   ========================================================= */

/* The row of buttons */
/*.tab-container {
    display: flex;
    border-bottom: 2px solid #ddd;
    margin-bottom: 0;
    gap: 5px;
}*/

/* Individual Tab Buttons */
/*.tab-link {
    background-color: #f4f7f6;
    color: #555;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 24px;
    font-size: 1.1rem;
    font-weight: bold;
    transition: all 0.3s ease;
    border-radius: 8px 8px 0 0;
    border: 1px solid transparent;
    border-bottom: none;
}

    .tab-link:hover {
        background-color: #e9ecef;
        color: #003366;
    }*/

    /* The Active Tab Button */
    /*.tab-link.active {
        background-color: #ffffff;
        color: #003366;
        border: 1px solid #ddd;
        border-bottom: 2px solid #ffffff;*/ /* Blends into the content box below */
        /*margin-bottom: -2px;*/ /* Pulls it down over the gray line */
    /*}*/

/* The Main Content Box */
/*.tab-content {
    display: none;*/ /* Hides inactive tabs */
    /*background: #ffffff;
    padding: 40px;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 8px 8px 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    animation: fadeIn 0.4s ease-in-out;
}

    .tab-content.active-tab {
        display: block;*/ /* Shows the active tab */
    /*}*/

    /* Typography inside the Programs Page */
    /*.tab-content h2 {
        color: #003366;
        border-bottom: 3px solid #ffcc00;
        display: inline-block;
        padding-bottom: 8px;
        margin-bottom: 25px;
        margin-top: 0;
    }

    .tab-content h3 {
        color: #00509e;
        margin-top: 30px;
        margin-bottom: 15px;
        font-size: 1.3rem;
    }

    .tab-content p {
        line-height: 1.8;
        color: #444;
        margin-bottom: 15px;
        font-size: 1.05rem;
        text-align: justify;
    }

    .tab-content ul {
        list-style-type: disc;
        padding-left: 25px;
        margin-bottom: 20px;
    }

        .tab-content ul li {
            line-height: 1.8;
            color: #444;
            margin-bottom: 10px;
            font-size: 1.05rem;
        }

            .tab-content ul li strong {
                color: #222;
            }*/

/* Smooth fade transition when clicking between B.Ed and D.El.Ed */
/*@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

/* Mobile Responsiveness for Tabs */
/*@media (max-width: 768px) {
    .tab-container {
        flex-direction: column;
        gap: 0;
        border-bottom: none;
    }

    .tab-link {
        border-radius: 4px;
        margin-bottom: 5px;
        border: 1px solid #ddd;
    }

        .tab-link.active {
            border-bottom: 1px solid #ddd;
            margin-bottom: 5px;
        }

    .tab-content {
        border-top: 1px solid #ddd;
        border-radius: 8px;
        padding: 20px;
    }
}*/

/* ========================================= */
/* DESK SPLIT LAYOUT (Photo Left, Text Right) */
/* ========================================= */
/*.split-layout {
    display: flex;
    gap: 30px;*/ /* Beautiful spacing between photo and text */
    /*align-items: center;*/ /* Vertically centers the text with the photo */
    /*text-align: left;*/ /* Forces text to align left instead of center */
/*}

.desk-image-wrapper {
    flex: 0 0 160px;*/ /* Locks the photo column to exactly 160px wide */
/*}

.desk-photo-new {
    width: 100%;
    height: 200px;*/ /* Taller, larger photo! */
    /*object-fit: cover;
    border-radius: 8px;
    border: 3px solid #ffcc00;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    display: block;
}

.desk-text-wrapper {
    flex: 1;*/ /* Takes up all the remaining empty space */
    /*display: flex;
    flex-direction: column;
    align-items: flex-start;*/ /* Aligns title and button perfectly to the left */
/*}*/

    /* Force the paragraph to align left and use full width */
    /*.desk-text-wrapper p {
        text-align: left !important;
        margin-bottom: 1.2rem;
        width: 100%;
    }*/

/* ========================================= */
/* DESK HERO OVERRIDES (FIXES SQUISHED PHOTO & PADDING) */
/* ========================================= */

/* 1. Kills the old white box background and bottom padding */
/*.desk-carousel-container, .desk-slide {
    background-color: var(--color-aqua) !important;
    padding: 0 !important;
    border: none !important;
}*/

/* 2. Forces the image column to stretch top-to-bottom */
/*.desk-image-wrapper {
    flex: 0 0 45% !important;
    display: flex;
    padding: 0 !important;
    margin: 0 !important;
}*/

/* 3. The brand new Edge-to-Edge Image styling */
/*.desk-photo-hero {
    width: 100% !important;
    height: 100% !important;
    min-height: 450px;*/ /* Guarantees it matches the blue box height */
    /*object-fit: cover !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    display: block;
}*/

/* ========================================= */
/* FIX FOOTER GAP (REMOVES BOTTOM WHITESPACE)*/
/* ========================================= */
/*.main-content {
    margin-bottom: 2rem !important;*/ /* Reduces the massive gap above the footer */
    /*padding-bottom: 0 !important;
}

.layout-row {
    margin-bottom: 0 !important;
}*/

/* --- MOBILE OVERRIDE: Stacks them vertically on small screens --- */
/*@media (max-width: 850px) {
    .split-layout {
        flex-direction: column;
        text-align: center;
    }

    .desk-image-wrapper {
        flex: 0 0 auto;
        margin-bottom: 10px;
    }

    .desk-photo-new {
        height: 180px;
        width: 140px;
        margin: 0 auto;
    }

    .desk-text-wrapper {
        align-items: center;*/ /* Re-centers the button on phones */
    /*}

        .desk-text-wrapper p {
            text-align: justify !important;
        }*/

    /* --- MOBILE DESK OVERRIDE --- */
    /*.split-layout {
        flex-direction: column !important;
    }

    .desk-image-wrapper {
        flex: 0 0 250px;
    }

    .desk-text-wrapper {
        padding: 40px 20px 80px 20px;
    }

    .desk-controls {
        right: 50%;
        transform: translateX(50%);
    }
}*/

/* ========================================= */
/* ADMIN DASHBOARD MOBILE GRID FIX           */
/* ========================================= */
/*.admin-dashboard-grid {
    max-width: 1200px;
    margin: 2rem auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 2rem;
}*/

    /* Prevents table blowout */
    /*.admin-dashboard-grid > div {
        min-width: 0;
    }

@media (max-width: 850px) {
    .admin-dashboard-grid {
        grid-template-columns: 1fr;*/ /* Stack vertically on phones */
    /*}*/

    /* Ensures the desk management stretches full width */
    /*.desk-management {
        grid-column: 1 / -1 !important;
        padding: 1.5rem !important;
    }*/

    /* Shrinks Hero text on mobile */
    /*.hero h1 {
        font-size: 2rem;
    }
}*/

/* ========================================= */
/* UNIVERSAL NAVBAR FIX (HOME, ADMIN, LOGIN) */
/* ========================================= */
/*.navbar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 15px 5% !important;
    padding-left: 1.5% !important;
    padding-right: 2% !important;
}

.logo-link {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;*/
    /* CRITICAL: Leaves 25% of the screen free for the hamburger icon on mobile! */
    /*max-width: 75% !important;
}*/

/* ========================================= */
/* ALL MOBILE RESPONSIVE OVERRIDES           */
/* ========================================= */
/*@media (max-width: 850px) {*/

    /* 1. Navbar Mobile Overrides */
    /*.college-title {
        font-size: 1.1rem !important;*/ /* Shrinks the giant text */
        /*white-space: normal !important;
        line-height: 1.2 !important;
    }

    .menu-toggle {
        display: flex !important;
        margin-left: auto !important;*/ /* Forces hamburger perfectly to the right */
        /*padding: 10px !important;*/ /* Big touch target */
    /*}

    .nav-links {
        display: none !important;
        width: 100% !important;
        flex-direction: column !important;
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px solid rgba(255,255,255,0.2) !important;
    }

        .nav-links.active {
            display: flex !important;
        }

        .nav-links li {
            width: 100%;
            text-align: center;
            padding: 10px 0;
        }*/

    /* 2. Dashboard Mobile Overrides */
    /*.admin-dashboard-grid {
        grid-template-columns: 1fr !important;*/ /* Stacks Dashboard columns vertically! */
    /*}

    .desk-management {
        grid-column: 1 / -1 !important;
    }
}*/

/* ========================================= */
/* SLEDGEHAMMER MOBILE FIXES (OVERRIDES HTML)*/
/* ========================================= */
/*@media (max-width: 850px) {*/

    /* 1. FIX THE DASHBOARD GRID BLOWOUT */
    /* Hunts down the exact inline style causing the side-by-side issue */
    /*.main-content[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        padding: 10px !important;
    }*/

    /* 2. FIX SQUISHED DESK BUTTONS */
    /* Forces the desk text and buttons to stack vertically */
    /*.desk-management ul li {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: flex-start !important;
    }

        .desk-management ul li > div:last-child {
            margin-left: 0 !important;
            width: 100% !important;
            justify-content: flex-start !important;
        }*/

    /* 3. FIX ADMIN & LOGIN NAVBARS */
    /* Hunts down the hardcoded header styling */
    /*header[style*="padding: 15px 40px"] {
        flex-direction: column !important;
        padding: 15px 20px !important;
        gap: 15px !important;
    }*/

        /* Shrink the massive college title */
        /*header[style*="padding: 15px 40px"] h1 {
            font-size: 1.15rem !important;
            line-height: 1.3 !important;
            text-align: center !important;
            white-space: normal !important;
        }*/

        /* Center the logo and title */
        /*header[style*="padding: 15px 40px"] > div {
            flex-direction: column !important;
            text-align: center !important;
        }*/

        /* Stack the links neatly */
        /*header[style*="padding: 15px 40px"] nav {
            flex-direction: column !important;
            width: 100% !important;
            gap: 0 !important;
        }

            header[style*="padding: 15px 40px"] nav a {
                width: 100% !important;
                text-align: center !important;
                border-left: none !important;
                padding: 12px 0 !important;
                margin: 0 !important;
                border-bottom: 1px solid rgba(255,255,255,0.1) !important;
            }
}*/

/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */
/*a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}*/
/* --- FOOTER GOOGLE MAPS LINK INTERACTION HOVER EFFECTS --- */
/*.maps-footer-link:hover {
    color: #ffffff !important;*/ /* Smoothly changes the text color to bright white upon hover */
    /*text-decoration: underline !important;
}*/