/* GLOBAL RESET */

:root {
    --primary: #D4AF37;
    --primary-dark: #B8860B;
    --primary-accent: #DAA520;
    --primary-glow: rgba(212, 175, 55, 0.1);
    --bg-main: #0B0B0B;
    --bg-surface: #111111;
    --bg-elevated: #1a1a1a;
    --text-main: #F5F5F5;
    --text-muted: #A1A1A1;
    --danger: #ef4444;
    --success: #D4AF37;
    --main-color: #D4AF37;

    /* Theme-specific variables - Premium Gold Edition */
    --bg-body-grad: radial-gradient(circle at center, #1a1a1a 0%, #0B0B0B 100%);
    --bg-theme-main: #0B0B0B;
    --card-bg: #111111;
    --card-text: #F5F5F5;
    --card-sub-text: #A1A1A1;
    --text-theme-main: #F5F5F5;
    --lower-region-bg: #0B0B0B;
    --particles-clip: none;

    /* Glow Variables - Sophisticated & Subtle */
    --pro-glow-core: rgba(212, 175, 55, 0.2);
    --pro-glow-wide: rgba(212, 175, 55, 0.05);

    /* UI Components */
    --navbar-bg: rgba(17, 17, 17, 0.85);
    --navbar-text: #D4AF37;
    --btn-primary-bg: linear-gradient(135deg, #D4AF37, #B8860B);
    --btn-primary-text: #0B0B0B;
    --navbar-border: #2A2A2A;
}

.dark-theme {
    /* Same as root for now as we are going for a unified Dark + Gold theme */
    --bg-body-grad: radial-gradient(circle at center, #1a1a1a 0%, #0B0B0B 100%);
    --bg-theme-main: #0B0B0B;
    --card-bg: #111111;
    --card-text: #F5F5F5;
    --card-sub-text: #A1A1A1;
    --text-theme-main: #D4AF37;
    --lower-region-bg: #0B0B0B;

    --pro-glow-core: rgba(212, 175, 55, 0.3);
    --pro-glow-wide: rgba(212, 175, 55, 0.08);

    --navbar-bg: rgba(17, 17, 17, 0.9);
    --navbar-text: #F5F5F5;
    --btn-primary-bg: #D4AF37;
    --btn-primary-text: #0B0B0B;
    --navbar-border: #2A2A2A;
}

/* ===================================================
   CUSTOM SCROLLBARS — Premium Gold Theme
   =================================================== */

/* Global Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: rgba(11, 11, 11, 0.8);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #D4AF37, #B8860B);
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    box-shadow: 0 0 6px rgba(212, 175, 55, 0.3);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #F0C842, #D4AF37);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
}

::-webkit-scrollbar-corner {
    background: transparent;
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: #D4AF37 #111111;
}

/* About Modal — Custom Scroll body */
.about-scroll-body::-webkit-scrollbar {
    width: 5px;
}

/* GLOBAL ENTRANCE ANIMATION */
@keyframes page-reveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

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

.main-content {
    opacity: 0;
}

body.page-ready .main-content {
    animation: page-reveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    overflow-x: hidden;
    margin: 0;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.about-scroll-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}

.about-scroll-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #D4AF37 0%, #B8860B 100%);
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(212, 175, 55, 0.5), 0 0 4px rgba(212, 175, 55, 0.25);
}

.about-scroll-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #F5CC42 0%, #D4AF37 100%);
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.7);
}

/* PLACEMENT INSIGHTS COMPONENT */
.placement-highlights {
    margin-top: 50px;
    background: rgba(10, 10, 10, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 24px;
    padding: 35px;
    backdrop-filter: blur(20px);
}


.insights-heading {
    color: var(--primary);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 25px 0;
    letter-spacing: -0.02em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.insight-card-mini {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    padding: 22px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    position: relative;
    overflow: hidden;
}

.insight-card-mini::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--primary);
    transition: height 0.3s ease;
}

.insight-card-mini:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-4px) scale(1.01);
}

.insight-card-mini:hover::before {
    height: 100%;
}

.insight-icon-box {
    font-size: 22px;
    width: 48px;
    height: 48px;
    background: rgba(212, 175, 55, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.insight-content {
    flex: 1;
}

.insight-title {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 6px 0;
    opacity: 0.9;
}

.insight-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.insight-text strong {
    color: #fff;
    font-weight: 600;
}

.insight-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    opacity: 0.4;
    font-style: italic;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bg-theme-main);
    color: var(--text-theme-main);
    animation: fadeIn 0.6s ease;
    margin: 0;
    background: var(--bg-body-grad);
    position: relative;
}


/* NAVBAR */

.navbar-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 30px 0 30px;
    position: relative;
    z-index: 99;
    pointer-events: none;
}

.navbar-right-group {
    display: flex;
    gap: 15px;
    pointer-events: auto;
}

/* NAV BTN WRAPPER */
.nav-btn {
    /* Variables */
    --button_radius: 12px;
    --button_color: var(--navbar-bg);
    --button_outline_color: var(--navbar-text);
    font-size: 17px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    border-radius: var(--button_radius);
    background: var(--button_outline_color);
    padding: 0;
    pointer-events: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    margin: 0;
}

.nav-btn:hover {
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.2);
}

.nav-btn-top {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid var(--button_outline_color);
    border-radius: var(--button_radius);
    padding: 0 25px;
    height: 60px;
    background: var(--button_color);
    color: var(--button_outline_color);
    transform: translateY(-0.2em);
    transition: transform 0.1s ease;
    backdrop-filter: blur(12px);
}

.nav-btn:hover .nav-btn-top {
    /* Pull the button upwards when hovered */
    transform: translateY(-0.35em);
}

.nav-btn:active .nav-btn-top {
    /* Push the button downwards when pressed */
    transform: translateY(0);
}

/* CONTEXT INDICATOR ENHANCEMENT */
.college-display {
    font-size: 11px;
    background: rgba(212, 175, 55, 0.1);
    color: var(--primary);
    padding: 2px 10px;
    border-radius: 50px;
    margin-left: 12px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: var(--transition-smooth);
}

.college-display.switching {
    opacity: 0;
    transform: translateY(-5px);
}

.context-indicator-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 5px;
    font-weight: 500;
    opacity: 0.8;
}

.context-indicator-bar span {
    color: var(--primary);
    font-weight: 700;
}

.logo {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    font-weight: 600;
    /* Semibold */
    font-size: 28px;
    color: var(--text-theme-main);
    letter-spacing: 1.5px;
    transition: letter-spacing 0.4s ease;
    pointer-events: auto;
}

.logo:hover {
    letter-spacing: 3.5px;
}

/* Glow PRO text only */
.logo:hover .pro-text {
    color: var(--text-theme-main);
    text-shadow:
        0 4px 10px var(--pro-glow-core),
        0 0 25px var(--pro-glow-wide);
}

.logo:hover .place-text {
    transform: translateY(4px);
    margin-right: 4px;
}

.logo:hover .pro-text {
    transform: scale(1.05) translateY(-4px);
    margin-left: 4px;
}

.place-text,
.pro-text {
    position: relative;
    display: inline-block;
    color: var(--primary);
    /* Logo is now Gold */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.pro-text {
    margin-left: 0;
}

.place-text {
    margin-right: 0;
}

/* Tracing border spans */
.logo span[class^="box-"] {
    position: absolute;
    background: var(--text-theme-main);
}

/* Base states (unhovered retraction sequence) */
.box-top {
    top: -4px;
    right: -6px;
    width: 0;
    height: 2px;
    transition: width 0.15s linear 0.45s;
}

.box-left {
    top: -4px;
    left: -6px;
    width: 2px;
    height: 0;
    transition: height 0.15s linear 0.3s;
}

.box-bottom {
    bottom: -2px;
    left: -6px;
    width: 0;
    height: 2px;
    transition: width 0.15s linear 0.15s;
}

.box-right {
    bottom: -2px;
    right: -6px;
    width: 2px;
    height: 0;
    transition: height 0.15s linear 0s;
}

/* Hover states (forward drawing sequence) */
.logo:hover .box-top {
    width: calc(100% + 12px);
    transition: width 0.15s linear 0s;
}

.logo:hover .box-left {
    height: calc(100% + 6px);
    transition: height 0.15s linear 0.15s;
}

.logo:hover .box-bottom {
    width: calc(100% + 12px);
    transition: width 0.15s linear 0.3s;
}

.logo:hover .box-right {
    height: calc(100% + 6px);
    transition: height 0.15s linear 0.45s;
}

.logo-tagline {
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%) translateY(-5px);
    width: 100%;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-theme-main);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    white-space: nowrap;
    text-align: center;
}

.logo:hover .logo-tagline {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.navbar-right-group {
    position: fixed;
    top: 25px;
    right: 30px;
    display: flex;
    align-items: center;
    gap: 35px;
    pointer-events: auto;
    z-index: 1000;
}

.user-profile {
    position: relative;
    z-index: 100;
}

.profile-trigger {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--navbar-bg);
    border: 2px solid var(--navbar-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px var(--pro-glow-wide);
    color: var(--navbar-text);
}

.profile-trigger:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 20px var(--pro-glow-core);
    color: var(--primary);
}

.user-icon {
    width: 24px;
    height: 24px;
}

.profile-dropdown {
    position: absolute;
    top: calc(100% + 15px);
    right: 0;
    width: 440px;
    background: linear-gradient(165deg, rgba(28, 28, 28, 0.98), rgba(10, 10, 10, 1));
    backdrop-filter: blur(30px);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 20px;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px) scale(0.98);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(212, 175, 55, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.05);
    pointer-events: auto;
    overflow: hidden;
}

.profile-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

#loggedInContent {
    padding: 30px 28px 24px 28px;
    /* More compact top/bottom */
}

.dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 25px;
    width: 100%;
}

.user-details {
    flex: 1;
    min-width: 0;
}

.user-name-title {
    color: #fff;
    font-size: 21px;
    margin-bottom: 5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: -0.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-badge {
    display: inline-block;
    font-size: 9px;
    background: rgba(212, 175, 55, 0.08);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid rgba(212, 175, 55, 0.2);
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.user-info-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Tighter grouping */
}

.info-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 13px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.info-label {
    color: #888;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.info-value {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 500;
    letter-spacing: 0.2px;
    font-size: 14px;
    /* Slightly smaller for full view */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
    display: block;
    cursor: default;
}

.user-visual-area {
    flex-shrink: 0;
    width: 90px;
    height: 90px;
}

@keyframes profile-float {

    0%,
    100% {
        transform: translateY(0);
    }

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

.profile-avatar-wrapper {
    position: relative;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: profile-float 3s ease-in-out infinite;
    filter: drop-shadow(0 10px 15px rgba(212, 175, 55, 0.25));
}

.profile-avatar {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    /* Circular shape */
    background: #000;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    font-weight: 800;
    border: 3px solid var(--primary);
    /* Luxury Gold Border */
    transition: all 0.3s ease;
    line-height: 1;
    overflow: hidden;
    position: relative;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.admin-border {
    border: 3px solid var(--primary) !important;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
}

.admin-star {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 24px;
    height: 24px;
    background: var(--primary);
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    border: 2px solid #1c1c1c;
}

/* Guest State Styling */
.guest-container {
    padding: 55px 35px;
    text-align: center;
}

.guest-info-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
}

.guest-icon-circle {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
}

.guest-icon-circle svg {
    width: 30px;
    height: 30px;
}

.guest-message h4 {
    color: #fff;
    font-size: 20px;
    margin-bottom: 8px;
    font-weight: 600;
}

.guest-message p {
    color: #888;
    font-size: 14px;
    line-height: 1.6;
    max-width: 280px;
}

.guest-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    margin: 15px 0;
}

.guest-support-text {
    color: #666;
    font-size: 13px;
    font-style: italic;
    line-height: 1.6;
    margin-top: 10px;
}

.dropdown-footer {
    padding: 18px 28px;
    background: rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.panel-tag {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 12px;
    letter-spacing: 1px;
}

.apps-mini-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    padding-right: 5px;
}

.loading-mini {
    color: #666;
    font-size: 12px;
}

.logout-btn {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.logout-btn:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.logout-btn::after {
    content: '→';
    font-size: 16px;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.logout-btn:hover::after {
    transform: translateX(4px);
}

.guest-actions {
    margin-top: 5px;
}


/* Trust Signal Styling */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 25px;
    gap: 20px;
    flex-wrap: wrap;
}

.title-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trust-signal {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.45);
    font-size: 12.5px;
    font-weight: 500;
    background: rgba(212, 175, 55, 0.04);
    padding: 8px 18px;
    border-radius: 100px;
    border: 1px solid rgba(212, 175, 55, 0.12);
    width: fit-content;
    margin-top: 5px;
    backdrop-filter: blur(8px);
    transition: all 0.4s ease;
    cursor: default;
}

.trust-signal:hover {
    background: rgba(212, 175, 55, 0.07);
    border-color: rgba(212, 175, 55, 0.2);
    color: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.trust-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(212, 175, 55, 0.12);
    border-radius: 50%;
    color: var(--primary);
}

.trust-badge-icon svg {
    width: 14px;
    height: 14px;
}

/* Batch Switch Tabs */
.batch-switch-tabs {
    display: flex;
    gap: 8px;
    background: rgba(212, 175, 55, 0.04);
    padding: 5px;
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    height: 50px;
    align-items: center;
}

/* UNIVERSAL PREMIUM DROPDOWN STYLING (Elite Pill Edition) */
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(5, 5, 5, 0.95));
    border: 2px solid rgba(212, 175, 55, 0.15);
    border-radius: 50px;
    /* Pill Shape to match Sidebar/Logo curves */
    padding: 12px 55px 12px 25px;
    color: var(--primary);
    /* Gold Text */
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    backdrop-filter: blur(25px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(212, 175, 55, 0.1);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23D4AF37' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
    background-size: 14px;
    width: auto;
    min-width: 180px;
    outline: none;
    text-transform: uppercase;
    /* Professional flair */
}

select:hover {
    border-color: var(--primary);
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.9), rgba(10, 10, 10, 0.95));
    box-shadow:
        0 15px 45px rgba(0, 0, 0, 0.7),
        0 0 20px rgba(212, 175, 55, 0.2);
    transform: translateY(-4px) scale(1.04);
}

/* ELITE INPUT STYLING (Matching Dropdowns) */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"] {
    appearance: none;
    background: linear-gradient(145deg, rgba(20, 20, 20, 0.9), rgba(5, 5, 5, 0.95));
    border: 2px solid rgba(212, 175, 55, 0.15);
    border-radius: 50px;
    padding: 12px 25px;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    cursor: text;
    backdrop-filter: blur(25px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.6),
        inset 0 1px 2px rgba(212, 175, 55, 0.1);
    outline: none;
    width: 100%;
}

input:hover {
    border-color: var(--primary);
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.15);
}

input:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px rgba(212, 175, 55, 0.1),
        0 10px 40px rgba(0, 0, 0, 0.8);
    transform: translateY(-2px);
}

select:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 4px rgba(212, 175, 55, 0.15),
        0 20px 50px rgba(0, 0, 0, 0.8),
        0 0 30px rgba(212, 175, 55, 0.3);
    transform: translateY(-4px) scale(1.04);
}

/* SKELETON LOADERS */
.card.skeleton-active {
    position: relative;
    overflow: hidden;
    pointer-events: none;
    border-color: rgba(255, 255, 255, 0.05);
}

.card.skeleton-active * {
    opacity: 0 !important;
}

.card.skeleton-active::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 600%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 175, 55, 0.03) 25%,
            rgba(212, 175, 55, 0.08) 50%,
            rgba(212, 175, 55, 0.03) 75%,
            transparent 100%);
    animation: shimmer-premium 2s infinite linear;
}

@keyframes shimmer-premium {
    0% {
        transform: translateX(-100%);
    }

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

.empty-state-message {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-muted);
    font-style: italic;
    font-size: 15px;
    border: 1px dashed rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    margin: 20px 0;
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    width: 80%;
}

.skeleton-title {
    height: 24px;
    margin-bottom: 15px;
    width: 60%;
}

.skeleton-card {
    height: 140px;
    border-radius: 12px;
    margin-bottom: 20px;
}

.skeleton-chart {
    height: 300px;
    border-radius: 12px;
    width: 100%;
}

/* SMOOTH TRANSITIONS */
.fade-out {
    opacity: 0 !important;
    transform: translateY(10px);
    pointer-events: none;
}

.fade-in {
    opacity: 1 !important;
    transform: translateY(0);
}

.main-content {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.main-content.context-switching {
    opacity: 0.3;
    filter: blur(2px);
    pointer-events: none;
}

/* DATA HIERARCHY & EMPHASIS */
.number {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: #fff;
    line-height: 1;
    margin: 10px 0;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.card h3 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary);
    font-weight: 800;
    margin: 0;
    opacity: 0.9;
}

.card span {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* MICRO-INTERACTIONS */
.card {
    transition: var(--transition-smooth);
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 175, 55, 0.1);
}

.card:active {
    transform: translateY(-4px) scale(0.98);
}

/* RESPONSIVENESS FIXES */
@media (max-width: 1024px) {
    .stats-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-dropdown {
        width: 380px;
        right: -20px;
    }
}

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

    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .batch-dropdown-container {
        width: 100%;
    }

    select {
        width: 100% !important;
    }

    .table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .logo {
        font-size: 22px;
    }

    .navbar-wrapper {
        margin: 15px 20px;
    }

    .semi-sidebar {
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* PREVENT UI JITTER */
.section {
    backface-visibility: hidden;
    will-change: opacity, transform;
}

select option:checked {
    background: var(--primary);
    color: #000;
}

/* Dashboard Specific Dropdown Scaling */
.batch-dropdown-container select {
    width: 100%;
}

/* ELITE VERTICAL PILL DROPDOWN (CUSTOM OPTIONS) */
.custom-dropdown-container {
    position: relative;
    width: 100%;
}

.custom-dropdown-options {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 2000;
    display: none;
    flex-direction: column;
    gap: 8px;
    /* Slightly larger gap for alarm roller effect */
    padding: 30px 5px;
    /* Extra padding at top/bottom for scrolling endpoints */
    max-height: 190px;
    /* Restrict height for roller effect */
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    overscroll-behavior: contain;
    pointer-events: none;
    scrollbar-width: none;
    /* Hide scrollbar for clean roller */
    /* Roller fade effect (alarm clock style) */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);

    /* Animation for the whole container */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.custom-dropdown-options::-webkit-scrollbar {
    display: none;
}

.custom-dropdown-options.active {
    display: flex;
    pointer-events: auto;
    opacity: 1;
    transform: translateY(0);
}

.dropdown-pill-option {
    background: linear-gradient(145deg, rgba(30, 30, 30, 0.8), rgba(10, 10, 10, 0.9));
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 12px;
    /* Less rounded for roller digits */
    padding: 12px 20px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    backdrop-filter: blur(20px);
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1px;
    scroll-snap-align: center;
    /* Snap to center of the roller */
    flex-shrink: 0;
    opacity: 0.5;
    /* Default inactive state for roller effect */
    transform: scale(0.9);
}

.dropdown-pill-option:hover {
    background: rgba(212, 175, 55, 0.1);
    color: var(--primary);
    border-color: rgba(212, 175, 55, 0.3);
    opacity: 0.8;
}



.dropdown-pill-option.selected {
    border-color: var(--primary);
    background: linear-gradient(145deg, rgba(212, 175, 55, 0.2), rgba(212, 175, 55, 0.05));
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
    color: var(--primary);
    opacity: 1;
    transform: scale(1.05);
    font-weight: 800;
}

/* Specific overrides for existing containers to ensure perfect alignment */
.batch-dropdown-container {
    position: relative;
    z-index: 100;
    display: flex;
    align-items: center;
}

.batch-select-icon {
    display: none;
    /* Hide old icon as it's now bundled in the background-image */
}

/* Transitions */
.fade-out {
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
}

.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Skeleton Loading Shimmer */
@keyframes shimmer {
    0% {
        background-position: -468px 0
    }

    100% {
        background-position: 468px 0
    }
}

.stat-card-loading {
    position: relative;
    overflow: hidden;
}

.stat-card-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(212, 175, 55, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
    background-size: 800px 104px;
    animation: shimmer 1.5s infinite linear;
    z-index: 2;
}

.stat-card-loading .number,
.stat-card-loading .caption,
.stat-card-loading .icon {
    visibility: hidden;
}

.skeleton-text {
    height: 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    margin-bottom: 8px;
    animation: shimmer 2s infinite linear;
    background: linear-gradient(to right, #222 8%, #333 18%, #222 33%);
    background-size: 800px 104px;
}

@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .batch-switch-tabs {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 10px;
        /* Space for scroll */
        height: auto;
    }
}


/* CONTAINER */

.container {
    margin-left: 0;
    margin: 0;
    padding: 0;
}


/* ===================================================
/* ===================================================
   DYNAMIC ISLAND SIDEBAR STYLES (PREMIUM ELITE)
   =================================================== */

.dynamic-island-sidebar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);

    /* GLASSMORPHIC BACKGROUND (SUBTLE) */
    background: rgba(20, 20, 20, 0.55) !important;
    backdrop-filter: blur(14px) saturate(120%);
    -webkit-backdrop-filter: blur(14px);

    /* BORDER GRADIENT (PREMIUM TOUCH) */
    border: 1px solid transparent;
    background-clip: padding-box;
    border-radius: 16px;

    height: 40px;
    width: 110px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    z-index: 9999;

    /* SOFT GLOW (NOT HARSH) */
    box-shadow:
        0 0 10px rgba(255, 180, 50, 0.15),
        0 0 30px rgba(255, 180, 50, 0.05),
        inset 0 0 8px rgba(255, 200, 100, 0.05);

    /* MICRO ANIMATION ON LOAD */
    animation: fadeSlide 0.6s ease;

    transition: width 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

.dynamic-island-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg,
            rgba(255, 200, 100, 0.4),
            transparent,
            rgba(255, 200, 100, 0.2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.dynamic-island-sidebar.expanded {
    width: 290px;
    background: rgba(20, 20, 20, 0.85) !important;
}

/* ── Text label ── */
.dynamic-island-text {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    color: var(--primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 1;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.35s ease;
}

.dynamic-island-sidebar.expanded .dynamic-island-text {
    opacity: 0;
    transform: translate(-50%, -10px);
}

/* ── Icon list ── */
.dynamic-icons {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 15px);
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 22px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dynamic-island-sidebar.expanded .dynamic-icons {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0.1s;
}

.dynamic-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);

    /* ICON HOVER INTERACTION */
    transition: all 0.25s ease;

    position: relative;
    background: transparent;
}

.dynamic-item:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.1);
}

/* ACTIVE ICON INDICATOR (VERY CLEAN) */
.dynamic-item.active {
    color: #ffca28;
    /* Vivid Gold */
    filter: drop-shadow(0 0 10px rgba(255, 202, 40, 0.25));
}

.dynamic-item.active::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ffc85c;
    box-shadow: 0 0 8px #ffc85c;
}

/* CLICK FEEDBACK */
.dynamic-item:active {
    transform: scale(0.95);
}

.dynamic-item svg {
    width: 16px;
    height: 16px;
    transition: all 0.25s ease;
}

.dynamic-item:hover svg {
    color: #ffca28;
    /* MULTI-LAYERED SOURCE BLOOM (PROFESSIONAL SOFT GLOW) */
    filter:
        drop-shadow(0 0 2px rgba(255, 200, 100, 0.8)) drop-shadow(0 0 12px rgba(255, 200, 100, 0.35)) drop-shadow(0 0 25px rgba(255, 180, 50, 0.15));
}

.dynamic-item[data-label]::after {
    content: attr(data-label);
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: #111;
    /* Solid dark background */
    color: #ffca28;
    padding: 5px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(255, 202, 40, 0.3);
    /* Defined thin gold border */
    pointer-events: none;
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    /* Shadow instead of Glow */
}

.dynamic-item:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* SEMICIRCLE SIDEBAR BASE */

.semi-sidebar {
    position: fixed;
    left: 0;
    top: calc(50vh - 32px);
    /* initial state: hidden with scale and rotation */
    transform: translateX(-100%) scale(0.9) rotate(-15deg);
    transform-origin: left center;
    opacity: 0;
    width: 270px;
    height: 270px;
    overflow: hidden;
    z-index: 1000;
    pointer-events: auto;
    transition:
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 1.2s ease;
    will-change: transform, opacity;
}

.semi-sidebar.visible {
    transform: translateX(0) scale(1) rotate(0deg);
    opacity: 1;
}

.semi-base {
    position: absolute;
    width: 270px;
    height: 270px;
    left: -135px;
    /* hide left half off-screen for 270px circle */
    top: 0;
    background: #000000;
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    box-shadow:
        0 8px 32px 0 rgba(0, 0, 0, 0.6),
        inset 0 0 10px rgba(255, 255, 255, 0.05),
        inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}


/* icon list inside semicircle */

.semi-icons {
    list-style: none;
    position: absolute;
    width: 270px;
    height: 270px;
    left: 0;
    top: 0;
}

.semi-item {
    position: absolute;
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 10px;
    border: none;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #D4AF37;
    cursor: pointer;
    opacity: 0;
    /* Starting point for the 'train' animation (top of the arc) */
    top: -40px !important;
    left: 40px !important;
    transform: scale(0.5);
    transition:
        top 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        left 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.8s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
    overflow: visible;
    z-index: 1;
}



.semi-sidebar.visible .semi-item {
    opacity: 1;
    transform: scale(1);
}

/* Staggered entry for icons */
.semi-sidebar.visible .semi-item:nth-child(1) {
    transition-delay: 0.1s;
}

.semi-sidebar.visible .semi-item:nth-child(2) {
    transition-delay: 0.15s;
}

.semi-sidebar.visible .semi-item:nth-child(3) {
    transition-delay: 0.2s;
}

.semi-sidebar.visible .semi-item:nth-child(4) {
    transition-delay: 0.25s;
}

.semi-sidebar.visible .semi-item:nth-child(5) {
    transition-delay: 0.3s;
}

.semi-sidebar.visible .semi-item:nth-child(6) {
    transition-delay: 0.6s;
}

.semi-item svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    opacity: 0.7;
    transition: all 0.3s ease;
}


/* Press-in inset button effect — dark sunken pit with golden rim, crescent shaped */

.semi-item::before {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.25s ease;
    pointer-events: none;
    z-index: -1;
    /* Dark sunken pit — same press-in effect but on a circle */
    background: radial-gradient(ellipse at 50% 40%, rgba(5, 5, 5, 0.98) 0%, rgba(10, 8, 0, 0.95) 40%, rgba(20, 15, 0, 0.9) 70%, rgba(35, 25, 0, 0.85) 100%);
    box-shadow: inset 0px 6px 12px 4px rgba(0, 0, 0, 1.0), inset 0px -4px 8px 3px rgba(0, 0, 0, 0.9), inset 5px 0px 10px 3px rgba(0, 0, 0, 0.9), inset -5px 0px 10px 3px rgba(0, 0, 0, 0.8), inset 0px 0px 20px 8px rgba(0, 0, 0, 0.95), 0px 0px 0px 1.5px rgba(4, 120, 87, 0.9), 0px 0px 6px 2px rgba(0, 150, 255, 0.6), 0px 0px 12px 3px rgba(0, 110, 255, 0.3), inset 0px 1px 0px 0px rgba(0, 160, 255, 0.3);
    /* CRESCENT MASK — fat middle, sharp pointy tips top and bottom */
    -webkit-mask-image: conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(0, 0, 0, 0.0) 40deg, rgba(0, 0, 0, 0.5) 70deg, black 110deg, black 250deg, rgba(0, 0, 0, 0.5) 290deg, rgba(0, 0, 0, 0.0) 320deg, transparent 360deg);
    mask-image: conic-gradient(from 90deg at 50% 50%, transparent 0deg, rgba(0, 0, 0, 0.0) 40deg, rgba(0, 0, 0, 0.5) 70deg, black 110deg, black 250deg, rgba(0, 0, 0, 0.5) 290deg, rgba(0, 0, 0, 0.0) 320deg, transparent 360deg);
}

.semi-item:hover svg {
    filter: brightness(1.2) drop-shadow(0 0 8px #D4AF37) drop-shadow(0 0 12px rgba(212, 175, 55, 0.4));
    opacity: 1;
    position: relative;
    z-index: 1;
}

.semi-item.active svg {
    filter: brightness(1.2) drop-shadow(0 0 5px #D4AF37);
    opacity: 1;
}

.semi-item.active::before {
    opacity: 1;
}

.semi-item.active svg {
    filter: brightness(0.65) drop-shadow(0px 2px 3px rgba(0, 0, 0, 1.0));
}

.semi-item::after {
    content: attr(data-label);
    position: absolute;
    left: 60px;
    /* Position to the right of the icon */
    background: var(--bg-surface);
    color: var(--primary);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    border: 1px solid rgba(212, 175, 55, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    z-index: 10;
}

.semi-item:hover::after {
    opacity: 1;
    transform: translateX(0);
}

.semi-icons {
    overflow: visible;
}

.semi-sidebar {
    overflow: visible;
}

.semi-sidebar.visible .semi-item:nth-child(1) {
    top: 34px !important;
    left: 39px !important;
}

.semi-sidebar.visible .semi-item:nth-child(2) {
    top: 74px !important;
    left: 75px !important;
}

.semi-sidebar.visible .semi-item:nth-child(3) {
    top: 156px !important;
    left: 75px !important;
}

.semi-sidebar.visible .semi-item:nth-child(4) {
    top: 115px !important;
    left: 39px !important;
}

.semi-sidebar.visible .semi-item:nth-child(5) {
    top: 196px !important;
    left: 39px !important;
}

/* COLLEGE SELECTOR STYLES */
.college-selector-panel {
    position: absolute;
    left: 50%;
    top: 55px;
    /* Sit closely underneath the island */
    transform: translateX(-50%) translateY(-10px) scale(0.95);
    width: 120px;
    background: rgba(15, 15, 15, 0.95);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 175, 55, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Snappy bouncy entrance */
    z-index: 10001;
}

.college-selector-panel.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
}

.panel-title {
    display: none;
    /* Hide title to make dropdown sleek */
}

.college-option {
    padding: 10px 14px;
    margin-bottom: 4px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: 1px solid transparent;
}

.college-option:last-child {
    margin-bottom: 0;
}

.college-option:hover {
    background: rgba(212, 175, 55, 0.08);
    color: #fff;
    border-color: rgba(212, 175, 55, 0.2);
    transform: translateY(-1px);
}

.college-option:active {
    transform: scale(0.97);
}

.college-option.active {
    background: rgba(212, 175, 55, 0.15);
    color: var(--primary, #D4AF37);
    border-color: rgba(212, 175, 55, 0.4);
    font-weight: 700;
}

/* Use a true CSS shape dot to prevent utf-8 corruption issues across browsers */
.college-option.active::after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: var(--primary, #D4AF37);
    border-radius: 50%;
    box-shadow: 0 0 5px var(--primary, #D4AF37);
}

/* TRANSITION OVERLAY */
.context-fade-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Low opacity dark layer */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    /* Above all */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;
    backdrop-filter: blur(8px);
}

.context-fade-overlay.visible {
    opacity: 1;
}

.main-content {
    transition: opacity 0.3s ease-in-out, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-content.context-switching {
    opacity: 0.2;
    /* Fade out main content */
    transform: scale(0.99);
}

/* Switching Indicator Text */
.switching-indicator {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }
}

/* NAVBAR COLLEGE PILL/BADGE */
.college-display {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(212, 175, 55, 0.12);
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid rgba(212, 175, 55, 0.3);
    margin-left: 18px;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: default;
    position: relative;
    overflow: hidden;
}

.college-display::before {
    content: "🎓";
    font-size: 14px;
}

.college-display:hover {
    background: rgba(212, 175, 55, 0.18);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 10px rgba(212, 175, 55, 0.1);
}

/* Smooth change animation */
.college-display.switching {
    transform: scale(0.9);
    opacity: 0.5;
    filter: blur(2px);
}


/* MAIN CONTENT */

.main-content {
    position: relative;
    z-index: 20;
    padding: 0 60px 0 60px;
    /* Dashboard stays high */
    transition:
        padding-left 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        padding-right 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: padding-left;
}

body.sidebar-open .main-content {
    /* Shift content right to avoid sidebar overlap while maintaining right breathing room */
    padding-left: 220px;
    padding-right: 60px;
}

.main-content::after {
    content: "";
    position: absolute;
    top: 380px;
    left: 0;
    width: 100%;
    height: 120px;
    pointer-events: none;
    background: transparent;
    filter: blur(40px);
}


/* SECTIONS */

.section {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding-top: 0;
    /* Default top padding for sections */
}

/* Page-specific Surgery: Lowering sub-pages specifically as requested */
.companies-page-layout,
.students-page-layout,
.analytics-page-layout,
#companies.active,
#students.active,
#analytics.active {
    padding-top: 150px !important;
}

#dashboard {
    padding-top: 0 !important;
    /* Dashboard highlights stay up */
}

.section.active {
    display: block;
    opacity: 1;
    animation: fadeInSection 0.3s ease;
}

@keyframes fadeInSection {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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


/* MID SHADOW TRANSITION */

.main-content h1 {
    font-size: 28px;
    /* Slightly larger */
    margin-bottom: 40px;
    /* More space below */
    font-weight: 700;
    margin-top: 10px;
    color: var(--text-theme-main);
    letter-spacing: -0.5px;
}


/* CARDS */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 25px;
}

.card {
    position: relative;
    background-color: var(--card-bg);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 25px;
    gap: 12px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--card-text);
    /* Base color yellow */
    z-index: 1;
    overflow: visible;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transform-style: preserve-3d;
}

.card::before {
    content: '';
    position: absolute;
    inset: -2px;
    margin: auto;
    border-radius: 14px;
    background: linear-gradient(-45deg, #D4AF37 0%, #B8860B 100%);
    z-index: -2;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0.3;
}

.card::after {
    content: "";
    z-index: -1;
    position: absolute;
    inset: 0;
    background: linear-gradient(-45deg, #D4AF37 0%, #D4AF37 100%);
    transform: translate3d(0, 0, 0) scale(0.95);
    filter: blur(20px);
    opacity: 0;
    transition: opacity 0.3s ease, filter 0.3s ease;
}

.card h3 {
    font-size: 16px;
    text-transform: capitalize;
    font-weight: 700;
    color: var(--card-text);
    /* Base color yellow */
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.card .number {
    font-size: 36px;
    font-weight: 800;
    color: var(--card-text);
    /* Base color yellow */
    margin: 10px 0;
    transition: color 0.3s ease;
}

.card span {
    font-size: 13px;
    color: var(--card-sub-text);
    /* Translucent yellow */
    font-weight: 500;
    transition: color 0.3s ease;
}

.card:hover {
    transform: translateY(-10px) rotateX(10deg) rotateY(-5deg);
    background-color: var(--card-text);
    /* Surface turns yellow */
}

.card:hover h3,
.card:hover .number,
.card:hover span {
    color: #1a1a1a;
    /* Explicitly dark text on hover */
}

.card:hover::after {
    opacity: 1;
    filter: blur(40px);
}

.card:hover::before {
    opacity: 1;
    transform: translateZ(-20px) scale(1.1);
}

.card span {
    font-size: 13px;
    font-weight: 500;
}

.card:hover {
    transform: translateY(-5px);
}

.card:hover::after {
    opacity: 0.8;
    filter: blur(30px);
}

.card:hover::before {
    opacity: 1;
    transform: rotate(2deg) scale(1.05);
    /* Adjusted from -90deg for a cleaner UI look */
}

.card .card-hint {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(212, 175, 55, 0.12);
    border: 1px solid rgba(212, 175, 55, 0.35);
    padding: 4px 10px;
    border-radius: 6px;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    backdrop-filter: blur(8px);
}

.card:hover .card-hint {
    opacity: 1;
    transform: translateX(0);
}

.card-hint span {
    color: var(--primary);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: block;
}

/* Sub-text styles */
.sub-text {
    color: var(--primary);
    margin-top: 10px;
    font-size: 13px;
}

.card h3 {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
}

.card .number {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 6px;
}

.card span {
    font-size: 12px;
}


/* TOP CONTROLS */

.top-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding: 10px 0;
}

.control-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

.top-controls input,
.top-controls select {
    padding: 10px 14px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 8px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    background: linear-gradient(145deg, #252525, #1f1f1f);
    color: var(--primary);
}

.top-controls input:focus,
.top-controls select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.15);
}

.primary-btn {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text);
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}

.primary-btn:hover {
    background: linear-gradient(145deg, #D4AF37, #B8860B);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.35);
}

/* TABLE REFINEMENT */
.table-container {
    background: rgba(10, 10, 10, 0.4);
    border-radius: 16px;
    border: 1px solid rgba(212, 175, 55, 0.15);
    overflow: hidden;
    margin-top: 25px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
}

table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

thead {
    background: rgba(0, 0, 0, 0.6);
}

th {
    text-align: left;
    padding: 20px 24px;
    background: rgba(212, 175, 55, 0.04);
    color: var(--primary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 700;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    cursor: default;
}

td {
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    font-weight: 400;
    vertical-align: middle;
}

tbody tr {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
}

/* Zebra Striping */
tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

/* Hover Interaction */
tbody tr:hover {
    background: rgba(212, 175, 55, 0.06) !important;
    transform: scale(1.002);
    box-shadow: inset 4px 0 0 var(--primary);
}

tbody tr:hover td {
    color: #fff;
}

/* Cell Specific Styles */
td:first-child {
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
    font-size: 15px;
}

/* ACTION BUTTONS */
.edit-btn,
.delete-btn,
.apply-btn-inline {
    padding: 8px 16px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.edit-btn {
    background: rgba(212, 175, 55, 0.1) !important;
    color: var(--primary) !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

.edit-btn:hover {
    background: var(--primary) !important;
    color: #000 !important;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

.delete-btn {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.delete-btn:hover {
    background: #ef4444 !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    transform: translateY(-2px);
}

/* Status Pill Styling */
.status-pill {
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    display: inline-block;
}

.status-active {
    background: rgba(212, 175, 55, 0.1);
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.05);
}

.status-upcoming {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-closed {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

/* Responsive Table Styling */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary) rgba(0, 0, 0, 0.3);
}

.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
    background: var(--primary);
    border-radius: 4px;
}

@media (max-width: 1024px) {

    th,
    td {
        padding: 15px 18px;
        font-size: 13px;
    }
}


/* MODAL */

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.modal-content {
    background: linear-gradient(145deg, #252525, #1f1f1f);
    padding: 30px;
    width: 350px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transform: scale(0.95);
    transition: all 0.25s ease;
    border: 1px solid rgba(212, 175, 55, 0.25);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 175, 55, 0.1);
}

.modal-content input {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(212, 175, 55, 0.25);
    background: linear-gradient(145deg, #1f1f1f, #1a1a1a);
    color: var(--primary);
    transition: all 0.2s ease;
}

.modal-content input::placeholder {
    color: rgba(212, 175, 55, 0.4);
}

.modal-content label {
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* AUTH MODAL & FLIP CARD */
.auth-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-modal.show {
    display: flex;
    opacity: 1;
}

.auth-modal .wrapper {
    position: relative;
    --input-focus: #D4AF37;
    --font-color: #323232;
    --font-color-sub: #666;
    --bg-color: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 330px;
}

.switch {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: 50px;
    height: 20px;
    margin-bottom: 430px;
}

.card-side::before {
    position: absolute;
    content: 'Log in';
    left: -70px;
    top: 0;
    width: 60px;
    text-decoration: underline;
    color: var(--main-color);
    font-weight: 600;
}

.card-side::after {
    position: absolute;
    content: 'Sign up';
    left: 70px;
    top: 0;
    width: 60px;
    text-decoration: none;
    color: var(--main-color);
    font-weight: 600;
}

.toggle {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    box-sizing: border-box;
    border-radius: 5px;
    border: 2px solid var(--main-color);
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #1a1a1a;
    transition: 0.3s;
}

.slider:before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    border: 2px solid var(--main-color);
    border-radius: 3px;
    left: 2px;
    bottom: 0px;
    background-color: var(--main-color);
    transition: 0.3s;
}

.toggle:checked+.slider {
    background-color: #1a1a1a;
}

.toggle:checked+.slider:before {
    transform: translateX(26px);
}

.toggle:checked~.card-side:before {
    text-decoration: none;
}

.toggle:checked~.card-side:after {
    text-decoration: underline;
}

.flip-card__inner {
    width: 330px;
    height: 530px;
    position: absolute;
    top: 60px;
    background-color: transparent;
    perspective: 1000px;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

.toggle:checked~.flip-card__inner {
    transform: rotateY(180deg);
}

.flip-card__front,
.flip-card__back {
    padding: 30px;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backface-visibility: hidden;
    background: #0a0a0a;
    gap: 20px;
    border-radius: 12px;
    border: 2px solid var(--main-color);
    box-shadow: 8px 8px 0px var(--main-color);
}

.flip-card__back {
    transform: rotateY(180deg);
}

.flip-card__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.title {
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: 900;
    text-align: center;
    color: var(--main-color);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.flip-card__input {
    width: 100%;
    height: 45px;
    border-radius: 8px;
    border: 2px solid var(--main-color);
    background-color: #111;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.5);
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    padding: 5px 15px;
    outline: none;
    transition: all 0.3s ease;
}

.flip-card__input::placeholder {
    color: rgba(212, 175, 55, 0.5);
}

.flip-card__input:focus {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px var(--main-color);
    background-color: #1a1a1a;
}

/* Override browser autofill white background */
.flip-card__input:-webkit-autofill,
.flip-card__input:-webkit-autofill:hover,
.flip-card__input:-webkit-autofill:focus,
.flip-card__input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 9999px #111 inset !important;
    box-shadow: 0 0 0 9999px #111 inset !important;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
    border: 2px solid var(--main-color) !important;
    border-radius: 8px;
}

/* Password wrapper + eye toggle */
.pw-wrapper {
    position: relative;
    width: 100%;
}

.pw-wrapper .flip-card__input {
    padding-right: 44px;
    /* room for eye icon */
}

.pw-eye {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(212, 175, 55, 0.5);
    transition: color 0.2s ease, filter 0.2s ease;
    outline: none;
    border-radius: 4px;
}

.pw-eye:hover {
    color: var(--main-color);
    filter: drop-shadow(0 0 6px rgba(212, 175, 55, 0.7));
}

.pw-eye svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    pointer-events: none;
}

/* Pulse ring while password is revealed */
.pw-eye.revealing {
    color: var(--main-color);
    animation: eyePulse 2s linear forwards;
}

@keyframes eyePulse {
    0% {
        filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.9));
    }

    80% {
        filter: drop-shadow(0 0 4px rgba(212, 175, 55, 0.9));
    }

    100% {
        filter: none;
        color: rgba(212, 175, 55, 0.5);
    }
}

.flip-card__btn {
    margin-top: 20px;
    width: 160px;
    height: 45px;
    border-radius: 8px;
    border: 2px solid var(--main-color);
    background-color: var(--main-color);
    box-shadow: 5px 5px 0px #000;
    font-size: 17px;
    font-weight: 700;
    color: #000;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.flip-card__btn:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0px #000;
    background-color: #D4AF37;
}

.flip-card__btn:active {
    transform: translate(5px, 5px);
    box-shadow: 0px 0px #000;
}

.modal-close {
    position: absolute;
    top: -20px;
    right: -40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--main-color);
    border: 2px solid #000;
    color: #000;
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 4px 4px 0px #000;
    transition: all 0.2s ease;
    z-index: 10001;
}

.modal-close:hover {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}


.modal.show .modal-content {
    transform: scale(1);
}

/* CIRCULAR LOGO FOR NON-HOME PAGES */
.circular-logo {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    background: #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    z-index: 1000;
    border: 2px solid var(--navbar-text);
    box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.4), 0 0 10px rgba(212, 175, 55, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    overflow: visible;
}

.circular-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s ease;
}

.circular-logo:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.4), 6px 6px 20px rgba(0, 0, 0, 0.5);
    border-color: #fff;
}

.circular-logo:hover img {
    transform: scale(1.1);
}

.circular-logo:active {
    transform: scale(0.95);
    box-shadow: 2px 2px 0px #000;
}

.circular-logo:hover .logo-tagline {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    /* Same uniform animation */
}

.logo-inner {
    display: none;
    /* Hidden as we now use images */
}

/* HAMBURGER MENU & DROPDOWN */
.hamburger-container {
    pointer-events: auto;
    position: relative;
}

.hamburger {
    cursor: pointer;
}

.hamburger input {
    display: none;
}

.hamburger svg {
    height: 3em;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.line {
    fill: none;
    stroke: var(--text-theme-main);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke 0.3s ease;
}

.line-top-bottom {
    stroke-dasharray: 12 63;
}

.hamburger input:checked+svg {
    transform: rotate(-45deg);
}

.hamburger input:checked+svg .line-top-bottom {
    stroke-dasharray: 20 300;
    stroke-dashoffset: -32.42;
}

/* Dropdown Menu styling */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    background: linear-gradient(145deg, #1c1c1c, #161616);
    border: 2px solid var(--primary);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 175, 55, 0.2);
    min-width: 180px;
}

.dropdown-menu .neon-btn {
    width: 100%;
    text-align: center;
}

.dropdown-menu .theme-switch-container {
    margin-left: 0;
    justify-content: center;
    padding-top: 10px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

/* Show dropdown when hamburger toggle is checked */
.hamburger-container:has(.hamburger input:checked) .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.neon-btn {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    border: 2px solid var(--navbar-text);
    cursor: pointer;
    position: relative;
    background: var(--navbar-bg);
    color: var(--navbar-text);
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 6px 6px 0px #000, 0 0 15px rgba(212, 175, 55, 0.1);
    border-radius: 4px;
    overflow: hidden;
    letter-spacing: 1px;
}

.neon-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg,
            transparent,
            rgba(212, 175, 55, 0.3),
            transparent);
    transition: all 0.6s;
}

.neon-btn:hover {
    background: var(--navbar-text);
    color: var(--navbar-bg);
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0px #000, 0 0 25px rgba(212, 175, 55, 0.5);
    border-color: #fff;
}

.neon-btn:hover::before {
    left: 100%;
}


.neon-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px #000;
}




/* HERO SECTION */

.hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 100px;
    background: transparent;
}

.hero-left h1 {
    font-size: 32px;
    margin-bottom: 15px;
    color: var(--text-main);
}

.hero-sub {
    color: var(--text-muted);
    margin-bottom: 25px;
}

.highlight {
    background: linear-gradient(145deg, #252525, #1f1f1f);
    border: 1px solid rgba(212, 175, 55, 0.25);
    padding: 20px 25px;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), 0 0 15px rgba(212, 175, 55, 0.1);
}

.highlight-label {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 8px;
    font-weight: 500;
}

.highlight h2 {
    font-size: 28px;
    color: var(--primary);
    margin-bottom: 5px;
    font-weight: 600;
}


/* Student Image */

.hero-right img {
    width: 180px;
    height: 180px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15), 0 4px 12px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(212, 175, 55, 0.3);
}


/* STATS SECTION */

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    /* Reduced top margin to bring cards closer to the heading */
    margin: 10px 0 60px 0;
    /* More breathing room */
    perspective: 1200px;
    /* Enable 3D perspective */
}

.stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    margin-top: 80px;
    position: relative;
    padding-top: 80px;
    padding-bottom: 60px;
    background: linear-gradient(135deg, #E6C866 0%, #D4AF37 35%, #D4AF37 70%, #B8860B 100%);
    padding: 120px 60px;
}

html {
    scroll-behavior: smooth;
}

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

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

.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    /* Unified starry background distribution */
    clip-path: none;
}

.particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #000000;
    border-radius: 50%;
    animation: depthFloat linear infinite;
    opacity: 0.9;
    box-shadow: 0 0 5px #ffffff, 0 0 10px rgba(255, 255, 255, 0.4), 0 0 15px rgba(255, 255, 255, 0.2);
    will-change: transform, opacity;
    transition: none !important;
}

/* Dark theme: particles glow yellow */
.dark-theme .particles span {
    background: #D4AF37 !important;
    box-shadow: 0 0 5px #D4AF37, 0 0 10px rgba(212, 175, 55, 0.6), 0 0 20px rgba(212, 175, 55, 0.3) !important;
}

@keyframes depthFloat {
    0% {
        transform: translateY(0) scale(0.4);
        opacity: 0.3;
    }

    30% {
        opacity: 0.85;
    }

    70% {
        opacity: 0.9;
    }

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

@keyframes starFloat {
    0% {
        transform: translateY(0) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0.8;
    }

    100% {
        transform: translateY(-85vh) scale(1.2);
        opacity: 0;
    }
}

.star {
    position: absolute;
    background: #000000;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 8px #ffffff, 0 0 15px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.3);
    animation: starFloat linear infinite, twinkle 3s ease-in-out infinite alternate;
    z-index: 1;
    will-change: transform, opacity;
    transition: none !important;
}

/* Dark theme: stars glow emerald */
.dark-theme .star {
    background: #D4AF37 !important;
    box-shadow: 0 0 8px #D4AF37, 0 0 15px rgba(212, 175, 55, 0.6), 0 0 25px rgba(212, 175, 55, 0.3) !important;
}

@keyframes twinkle {
    0% {
        transform: scale(1);
        opacity: 0.8;
        filter: brightness(1);
    }

    100% {
        transform: scale(1.3);
        opacity: 1;
        filter: brightness(1.5);
    }
}

.separation-line {
    position: absolute;
    display: none;
    top: calc(50vh + 105px);
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(212, 175, 55, 0.3);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    pointer-events: none;
    z-index: 25;
}

.lower-region-layer {
    position: absolute;
    display: none;
    top: calc(50vh + 105px);
    left: 0;
    width: 100%;
    min-height: 100vh;
    background: var(--lower-region-bg);
    box-shadow: 0 -15px 40px rgba(0, 0, 0, 0.2), inset 0 20px 30px rgba(255, 255, 255, 0.1);
    z-index: 15;
    pointer-events: none;
    transition: background 0.3s ease;
}

body.fade-out {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3D CUBE LOADER */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(11, 11, 11, 0.85);
    /* Increased opacity for smoother bridge */
    backdrop-filter: blur(15px);
    /* Increased blur for premium feel */
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s ease;
}

.loader-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader {
    perspective: 600px;
    width: 60px;
    height: 60px;
}

.cube {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate-cube 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.95;
    border: 2px solid #D4AF37;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Intense golden outer glow and premium inner shadow */
    box-shadow:
        0 0 25px rgba(212, 175, 55, 0.8),
        0 0 45px rgba(212, 175, 55, 0.15),
        inset 0 0 25px rgba(212, 175, 55, 0.5);
    backface-visibility: visible;
}

.face:nth-child(1) {
    transform: rotateX(90deg) translateZ(30px);
}

.face:nth-child(2) {
    transform: rotateX(-90deg) translateZ(30px);
}

.face:nth-child(3) {
    transform: translateZ(30px);
}

.face:nth-child(4) {
    transform: rotateY(90deg) translateZ(30px);
}

.face:nth-child(5) {
    transform: rotateY(-90deg) translateZ(30px);
}

.face:nth-child(6) {
    transform: rotateY(180deg) translateZ(30px);
}

@keyframes rotate-cube {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    33% {
        transform: rotateX(180deg) rotateY(90deg) rotateZ(45deg);
    }

    66% {
        transform: rotateX(360deg) rotateY(270deg) rotateZ(135deg);
    }

    100% {
        transform: rotateX(720deg) rotateY(720deg) rotateZ(360deg);
    }
}

.loader-text {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90vw;
    text-align: center;
    color: var(--main-color);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    animation: pulse-text 1.5s infinite ease-in-out;
}

@keyframes pulse-text {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* THEME TOGGLE SWITCH */
.theme-switch-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-switch {
    /* Variables */
    --switch_width: 2.2em;
    --switch_height: 1.1em;
    --thumb_color: #000;
    --track_color: #000;
    --track_active_color: #D4AF37;
    --outline_color: #D4AF37;
    font-size: 15px;
    position: relative;
    display: inline-block;
    width: var(--switch_width);
    height: var(--switch_height);
}

.dark-theme .theme-switch {
    --thumb_color: #000;
    --track_color: #D4AF37;
    --track_active_color: #D4AF37;
    --outline_color: #D4AF37;
}

/* Hide default HTML checkbox */
.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.theme-switch .slider-switch {
    box-sizing: border-box;
    border: 2px solid var(--outline_color);
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--track_color);
    transition: .3s;
    border-radius: var(--switch_height);
}

.theme-switch .slider-switch:before {
    box-sizing: border-box;
    position: absolute;
    content: "";
    height: var(--switch_height);
    width: var(--switch_height);
    border: 2px solid var(--outline_color);
    border-radius: 100%;
    left: -2px;
    bottom: -2px;
    background-color: var(--thumb_color);
    transform: translateY(-0.15em);
    box-shadow: 0 0.15em 0 var(--outline_color);
    transition: .3s;
}

.theme-switch input:checked+.slider-switch {
    background-color: var(--track_active_color);
}

.theme-switch input:checked+.slider-switch:before {
    transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.15em);
    background-color: var(--thumb_color);
}

/* Raise thumb when hovered */
.theme-switch input:hover+.slider-switch:before {
    transform: translateY(-0.25em);
    box-shadow: 0 0.25em 0 var(--outline_color);
}

.theme-switch input:checked:hover+.slider-switch:before {
    transform: translateX(calc(var(--switch_width) - var(--switch_height))) translateY(-0.25em);
}

/* SOCIAL LINKS IN DROPDOWN */
.social-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.social-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #D4AF37;
    color: #D4AF37;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.1);
    text-decoration: none;
}

.social-btn:hover {
    background: #D4AF37;
    color: #000;
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
}

.social-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    transition: transform 0.3s ease;
}

.social-btn:hover svg {
    transform: rotate(360deg);
}

/* Clean Radial UI (Hero Slide) - No Central Button */
.avg-container {
    position: absolute;
    top: 50%;
    right: 64%;
    transform: translateY(-50%);
    width: 300px;
    height: 280px;
    z-index: 100;
}

.branch {
    position: absolute;
    opacity: 0;
    transform: scale(0.85) translate(10px, 0);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    cursor: default;
    filter: drop-shadow(0 0 5px rgba(212, 175, 55, 0));
}

.avg-container:hover .branch {
    opacity: 1;
    transform: scale(1) translate(0, 0);
    color: #fff;
    text-shadow: 0 0 12px rgba(212, 175, 55, 0.5), 0 0 25px rgba(212, 175, 55, 0.2);
}

.branch:hover {
    color: var(--primary) !important;
    transform: scale(1.05) translate(5px, 0) !important;
    text-shadow: 0 0 15px rgba(212, 175, 55, 0.8), 0 0 30px rgba(212, 175, 55, 0.4) !important;
}

.branch::after {
    content: attr(data-value) " LPA";
    display: block;
    font-size: 11px;
    color: var(--primary);
    font-weight: 700;
    margin-top: 4px;
    opacity: 0.85;
}

/* Premium Trace Lines (Centered Radial Path) */
.branch::before {
    content: "";
    position: absolute;
    width: 45px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6));
    top: 50%;
    right: 100%;
    margin-right: 12px;
    pointer-events: none;
    opacity: 0.3;
    transition: opacity 0.4s ease;
}

.avg-container:hover .branch::before {
    opacity: 1;
}

/* Branch Positions (Elite Fan Arcing Right) */
.branch:nth-child(1) {
    top: 0;
    left: 65%;
    transition-delay: 0.05s;
}

.branch:nth-child(2) {
    top: 28%;
    left: 88%;
    transition-delay: 0.1s;
}

.branch:nth-child(3) {
    top: 62%;
    left: 88%;
    transition-delay: 0.15s;
}

.branch:nth-child(4) {
    bottom: 0;
    left: 65%;
    transition-delay: 0.2s;
}

/* Dots Navigation */
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 40px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.dot {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dot.active {
    background: var(--primary);
    border-color: var(--primary);
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

/* Glass Popup for Analytics (Same as Student Modal) */
.glass-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.glass-popup-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.glass-popup-content {
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.8), rgba(0, 0, 0, 0.9));
    border: 1px solid rgba(212, 175, 55, 0.4);
    box-shadow:
        0 0 30px rgba(212, 175, 55, 0.15),
        inset 0 0 20px rgba(212, 175, 55, 0.05);
    border-radius: 16px;
    padding: 30px;
    width: 500px;
    max-width: 90%;
    transform: scale(0.8) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    color: #fff;
    font-family: 'Poppins', sans-serif;
}

.glass-popup-overlay.show .glass-popup-content {
    transform: scale(1) translateY(0);
}

.glass-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: var(--primary);
    font-size: 28px;
    cursor: pointer;
    transition: transform 0.3s, text-shadow 0.3s;
    line-height: 1;
}

.glass-popup-close:hover {
    transform: rotate(90deg) scale(1.1);
    text-shadow: 0 0 10px var(--primary);
}

.popup-title {
    color: var(--primary);
    font-size: 22px;
    margin-bottom: 20px;
    border-bottom: 1px dashed rgba(212, 175, 55, 0.3);
    padding-bottom: 12px;
    font-weight: 600;
}

.popup-body {
    font-size: 15px;
    line-height: 1.7;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 5px;
}

.popup-body::-webkit-scrollbar {
    width: 6px;
}

.popup-body::-webkit-scrollbar-track {
    background: transparent;
}

.popup-body::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 4px;
}

/* Responsive Overrides */
@media (max-width: 992px) {
    .carousel-item {
        grid-template-columns: 1fr;
        padding: 40px;
        text-align: center;
        gap: 30px;
    }

    .slide-content {
        align-items: center;
    }

    .slide-data-visual {
        align-items: center;
    }

    .slide-value {
        font-size: 72px;
    }

    .semi-circle-reveal {
        display: none;
        /* Hide on mobile for better UX */
    }
}

/* SMOOTH TRANSITIONS FOR FILTERS */
.fade-out {
    opacity: 0 !important;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.fade-in {
    opacity: 1 !important;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

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

.animate-slide-up {
    animation: slideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stat Card Loading State */
.stat-card-loading {
    position: relative;
    overflow: hidden;
}

.stat-card-loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(212, 175, 55, 0.05) 50%,
            transparent 100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    to {
        left: 100%;
    }
}

/* Batch Year Select Dropdown - Professional Theme */
.batch-year-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: rgba(20, 20, 20, 0.95);
    color: var(--primary);
    border: 1.5px solid rgba(212, 175, 55, 0.3);
    border-radius: 8px;
    padding: 8px 35px 8px 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 10px rgba(212, 175, 55, 0.05);
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23facc15" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>');
    background-repeat: no-repeat;
    background-position-x: calc(100% - 10px);
    background-position-y: center;
    backdrop-filter: blur(10px);
}

.batch-year-select:hover {
    border-color: var(--primary);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(212, 175, 55, 0.2);
    transform: translateY(-2px);
    background-color: rgba(25, 25, 25, 0.95);
}

.batch-year-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.3);
}

.batch-year-select option {
    background-color: #111;
    color: var(--primary);
    font-weight: 500;
    padding: 10px;
    border: none;
}

/* Circular PP Logo Styles */
.pp-logo-circle {
    fill: #111;
    transition: fill 0.3s ease;
}

.pp-logo-path {
    stroke: var(--primary);
    transition: stroke 0.3s ease;
}

body.dark-theme .pp-logo-circle {
    fill: var(--primary);
}

body.dark-theme .pp-logo-path {
    stroke: #111;
}

/* EXPANDABLE RECRUITMENT TABLE */
.recruitment-section {
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border: 1px solid rgba(212, 175, 55, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.expandable-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.expandable-table th {
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid var(--primary);
    color: var(--primary);
    font-weight: 600;
}

.main-row {
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
    position: relative;
    user-select: none;
}

.main-row td {
    padding: 15px 12px;
    color: var(--text-theme-main);
}

.main-row:hover {
    background: rgba(212, 175, 55, 0.08);
}

/* Expansion Icon & Hint */
.expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    transition: transform 0.3s ease;
    color: var(--primary);
}

.main-row.active .expand-icon {
    transform: rotate(180deg);
}

.click-hint {
    font-size: 0.75rem;
    color: var(--primary);
    opacity: 0.6;
    margin-left: 10px;
    font-weight: 400;
    font-style: italic;
}

.details-row {
    display: none;
    background: rgba(0, 0, 0, 0.45);
    border-bottom: 2px solid var(--primary);
    overflow: hidden;
}

.details-row.show {
    display: table-row;
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.details-container {
    padding: 30px 35px;
    background: linear-gradient(180deg, rgba(212, 175, 55, 0.04) 0%, transparent 100%);
}

.expanded-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    gap: 20px;
    flex-wrap: wrap;
}

.expanded-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.expanded-title {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: 0.5px;
}

.expanded-subtitle {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.expanded-count {
    color: var(--primary);
    font-weight: 600;
}

.expanded-search-wrapper {
    position: relative;
    width: 320px;
}

.search-icon-small {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--primary);
    opacity: 0.7;
    pointer-events: none;
}

.expanded-student-search {
    width: 100%;
    padding: 10px 15px 10px 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 10px;
    color: #fff;
    font-size: 14.5px;
    outline: none;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

.expanded-student-search:focus {
    border-color: var(--primary);
    background: rgba(212, 175, 55, 0.08);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.15);
}

.student-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    list-style: none;
    padding: 0;
}

.student-item {
    position: relative;
    padding: 18px 22px;
    background: rgba(30, 30, 30, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--primary);
    border-radius: 15px;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(12px);
    cursor: default;
}

.student-item:hover {
    transform: translateY(-4px) scale(1.02);
    background: rgba(212, 175, 55, 0.08);
    border-color: rgba(212, 175, 55, 0.4);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}

.student-item .name {
    display: block;
    font-weight: 700;
    color: #fff;
    font-size: 1.05rem;
    line-height: 1.25;
}

.student-item .branch {
    font-size: 0.85rem;
    color: rgba(212, 175, 55, 0.8);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dark-theme .student-item {
    background: rgba(20, 20, 20, 0.6);
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        max-height: 2000px;
        transform: translateY(0);
    }
}

@media (max-width: 600px) {
    .expanded-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .expanded-search-wrapper {
        width: 100%;
    }

    .details-container {
        padding: 20px 15px;
    }

    .student-list {
        grid-template-columns: 1fr;
    }
}

/* Analytics Chart Enhancements */
.chart-view-mode {
    display: flex;
    gap: 5px;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px;
    border-radius: 10px;
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.chart-pill {
    padding: 6px 14px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.4);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    border-radius: 7px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-pill:hover {
    color: #fff;
}

.chart-pill.active {
    background: var(--primary);
    color: #1a1a1a;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.glass-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(212, 175, 55, 0.05);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 8px;
    color: var(--primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.glass-btn:hover {
    background: rgba(212, 175, 55, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.glass-btn.secondary {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
}

.glass-btn.secondary:hover {
    background: rgba(212, 175, 55, 0.05);
    border-color: var(--primary);
    color: var(--primary);
}

.mini-table {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.1);
}

.mini-table table thead th {
    background: rgba(212, 175, 55, 0.1);
    padding: 10px 15px;
    text-align: left;
}

.mini-table table tbody td {
    padding: 8px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

.recruitment-scroll-wrapper::-webkit-scrollbar {
    width: 6px;
}

.recruitment-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.2);
    border-radius: 10px;
}

.recruitment-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* FOOTER NOTE */
.footer-note {
    text-align: center;
    padding: 60px 20px;
    font-size: 0.85rem;
    color: var(--card-sub-text);
    opacity: 0.6;
    letter-spacing: 0.8px;
    border-top: 1px solid rgba(212, 175, 55, 0.08);
    margin-top: 100px;
    width: 100%;
}

.footer-note a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    margin-left: 4px;
    transition: all 0.2s ease;
}

.footer-note a:hover {
    opacity: 1;
    text-shadow: 0 0 8px var(--primary);
}

/* HERO CAROUSEL STYLES - HUMAN REFINED */
.hero-carousel {
    position: relative;
    width: 100%;
    height: 400px;
    margin-bottom: 20px;
    overflow: hidden;
    background: transparent;
    border: none;
}

.carousel-inner {
    width: 100%;
    height: 100%;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.carousel-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    padding: 0 40px;
    gap: 60px;
    transform: scale(0.98) translateY(15px) translateZ(0);
}

.carousel-item.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0) translateZ(0);
}

.carousel-item.active:hover {
    transform: scale(1.02) translateY(-5px) translateZ(0);
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}

.slide-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    transition: transform 0.4s ease;
}

.carousel-item:hover .slide-content {
    transform: translateX(5px);
}

.slide-tag {
    background: rgba(212, 175, 55, 0.08);
    color: var(--primary);
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid rgba(212, 175, 55, 0.15);
    margin-bottom: 8px;
    backdrop-filter: blur(4px);
    transition: all 0.4s ease;
}

.slide-title {
    font-size: 42px;
    color: #fff;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin: 0;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    transition: transform 0.4s ease;
}

.carousel-item:hover .slide-title {
    transform: translateY(-2px);
    text-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

.slide-subtitle {
    font-size: 19px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 400;
    line-height: 1.5;
    max-width: 90%;
    transition: color 0.4s ease;
}

.carousel-item:hover .slide-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.company-highlight {
    color: #fff;
    font-weight: 700;
    border-bottom: 2px solid var(--primary);
    padding-bottom: 1px;
    transition: all 0.3s ease;
    display: inline-block;
}

.company-highlight:hover {
    color: var(--primary);
    transform: scale(1.05);
    cursor: pointer;
}

.slide-data-visual {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slide-logo-group {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
}

.slide-logo {
    width: auto;
    height: 80px;
    opacity: 0.4;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    object-fit: contain;
    background: transparent !important;
}

.slide-logo-group .slide-logo {
    height: 60px;
}

.carousel-item:hover .slide-logo {
    opacity: 1;
    transform: translateY(-8px);
    filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.4));
}

.carousel-item:hover .slide-logo-group .slide-logo {
    transform: translateY(-5px) scale(1.05);
}

.carousel-item:hover .slide-data-visual {
    transform: scale(1.02) translateX(-5px);
}

.slide-value {
    font-size: 96px;
    font-weight: 900;
    color: var(--primary);
    line-height: 0.9;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    text-align: right;
    letter-spacing: -2px;
    pointer-events: none;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    text-shadow: 0 0 20px rgba(212, 175, 55, 0);
}

.carousel-item:hover .slide-value {
    text-shadow: 0 0 35px rgba(212, 175, 55, 0.4);
    transform: scale(1.03);
}

/* Compact Centered Branch Tree - Nudged Left */
.branch-tree {
    position: absolute;
    top: 50%;
    right: 70%;
    /* Nudged further left to avoid overlapping the large 6.11 number */
    transform: translateY(-50%);
    width: 220px;
    height: 220px;
    pointer-events: none;
    z-index: 100;
}

.branch-item {
    position: absolute;
    right: 0;
    opacity: 0;
    transform: translateX(15px) scale(0.8);
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.is-avg-slide:hover .branch-item {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.4));
}

/* Tight Fan Cluster */
.is-avg-slide:hover .branch-1 {
    transition-delay: 0.1s;
    top: 0%;
    right: 20px;
}

.is-avg-slide:hover .branch-2 {
    transition-delay: 0.2s;
    top: 30%;
    right: 0px;
}

.is-avg-slide:hover .branch-3 {
    transition-delay: 0.3s;
    top: 60%;
    right: 0px;
}

.is-avg-slide:hover .branch-4 {
    transition-delay: 0.4s;
    top: 90%;
    right: 20px;
}

/* Initial positions to burst from center */
.branch-1 {
    top: 40%;
    right: 0;
}

.branch-2 {
    top: 45%;
    right: 0;
}

.branch-3 {
    top: 50%;
    right: 0;
}

.branch-4 {
    top: 55%;
    right: 0;
}

.branch-line {
    width: 30px;
    height: 1px;
    background: linear-gradient(to left, var(--primary), transparent);
    box-shadow: 0 0 8px var(--primary);
    position: relative;
    opacity: 0.6;
}

/* Angles for tight bloom */
.branch-1 .branch-line {
    transform: rotate(20deg);
}

.branch-2 .branch-line {
    transform: rotate(5deg);
}

.branch-3 .branch-line {
    transform: rotate(-5deg);
}

.branch-4 .branch-line {
    transform: rotate(-20deg);
}

.branch-node {
    background: rgba(212, 175, 55, 0.08);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(212, 175, 55, 0.4);
    padding: 6px 12px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.branch-item:hover .branch-node {
    background: rgba(212, 175, 55, 0.2);
    transform: scale(1.05);
}

.branch-name {
    font-size: 8px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.branch-val {
    font-size: 14px;
    font-weight: 950;
    color: var(--primary);
}

.slide-value .unit {
    font-size: 28px;
    font-weight: 500;
    margin-left: -5px;
    opacity: 0.6;
    vertical-align: top;
    margin-top: 15px;
    display: inline-block;
}

.carousel-dots {
    position: absolute;
    bottom: 30px;
    left: 40px;
    display: flex;
    gap: 10px;
    z-index: 30;
}

.dot {
    position: relative;
    width: 12px;
    height: 6px;
    border-radius: 10px;
    background: rgba(212, 175, 55, 0.15);
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: none;
    outline: none;
    overflow: hidden;
}

.dot.active {
    background: var(--primary);
    width: 48px;
    box-shadow: 0 0 25px rgba(212, 175, 55, 0.5);
}

.dot.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    background: rgba(255, 255, 255, 0.5);
    animation: slideProgress 5s linear forwards;
}

@keyframes slideProgress {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.hero-carousel:hover .dot.active::before {
    animation-play-state: paused;
}

.dot:hover:not(.active) {
    background: rgba(212, 175, 55, 0.4);
    transform: scale(1.2);
}

/* ===================================================
   PREMIUM CUSTOM CURSOR (GOLD THEME)
   =================================================== */

@media (pointer: fine) {
    body.custom-cursor-enabled * {
        cursor: none !important;
    }
}

.custom-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    background-color: #ffc85c;
    border-radius: 50%;
    pointer-events: none;
    z-index: 100000;
    transition: transform 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 0 8px rgba(255, 200, 92, 0.8);
}

.custom-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255, 200, 92, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    box-sizing: border-box;
    transition: background-color 0.25s ease-out, border-color 0.25s ease-out, box-shadow 0.25s ease-out, backdrop-filter 0.25s ease-out;
}

/* Glass edge layer (hidden by default, fades in on hover) */
.custom-cursor-ring::before {
    content: '';
    position: absolute;
    inset: -1px; /* Slightly over border */
    border-radius: 50%;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    -webkit-mask-image: radial-gradient(circle at center, transparent 40%, black 85%);
    mask-image: radial-gradient(circle at center, transparent 40%, black 85%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease-out;
    z-index: -1;
}

.custom-cursor-ring.hover {
    border-color: rgba(255, 200, 92, 0.85);
    /* Subtle 3D lens highlight over the element */
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.08), transparent 60%), rgba(255, 200, 92, 0.03);
    box-shadow: 
        0 0 20px rgba(255, 200, 92, 0.35), 
        inset 0 0 15px rgba(255, 200, 92, 0.25),
        inset 0 0 4px rgba(255, 255, 255, 0.2); /* Specular inner rim */
    /* Center clarity and slight magnification illusion via brightness/contrast */
    backdrop-filter: brightness(1.08) contrast(1.03);
    -webkit-backdrop-filter: brightness(1.08) contrast(1.03);
}

.custom-cursor-ring.hover::before {
    opacity: 1;
}

.custom-cursor-ring.click {
    border-color: #ffc85c;
    background-color: rgba(255, 200, 92, 0.3);
    box-shadow: 0 0 20px rgba(255, 200, 92, 0.6);
    transition: border-color 0.1s ease, background-color 0.1s ease;
}

.cursor-particle {
    position: fixed;
    width: 3px;
    height: 3px;
    background-color: #ffc85c;
    border-radius: 50%;
    pointer-events: none;
    z-index: 99998;
    box-shadow: 0 0 6px #ffc85c;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease;
}