/* public/css/global-header.css */

.pe-global-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-h, 4rem);
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    z-index: 50;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    font-family: "Inter", system-ui, sans-serif;
}

.pe-header-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 0.75rem;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .pe-header-inner {
        padding: 0 1.5rem;
    }
}

/* Mobile Menu Button */
.pe-header-menu-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    flex-shrink: 0;
    transition: background-color 0.2s;
    background: transparent;
    border: none;
    cursor: pointer;
}
.pe-header-menu-btn:hover {
    background-color: #f1f5f9;
}
.pe-header-menu-btn:active {
    background-color: #e2e8f0;
}
.pe-header-menu-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

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

/* Brand Link & Logo */
.pe-header-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    text-decoration: none;
}
.pe-brand-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
}
.pe-brand-text {
    display: none;
    flex-direction: column;
}
@media (min-width: 640px) {
    .pe-brand-text {
        display: flex;
    }
}
.pe-brand-title {
    font-weight: 800;
    font-size: 1rem;
    color: #1f2937;
    letter-spacing: -0.025em;
    line-height: 1;
}
.pe-brand-subtitle {
    font-size: 9px;
    font-weight: 600;
    color: #06bbcc;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    margin-top: 2px;
}

/* Search Bar Wrapper */
.pe-header-search-wrapper {
    flex: 1;
    max-width: 42rem;
    margin: 0 auto;
    position: relative;
}
.pe-header-search-relative {
    position: relative;
    display: flex;
    align-items: center;
}
.pe-search-icon {
    position: absolute;
    left: 0.75rem;
    width: 1rem;
    height: 1rem;
    color: #94a3b8;
    pointer-events: none;
}
.pe-header-search-input {
    width: 100%;
    height: 2.25rem;
    padding: 0 2.25rem;
    border-radius: 0.75rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 0.875rem;
    color: #334155;
    outline: none;
    transition: all 0.2s;
    font-family: inherit;
}
.pe-header-search-input:focus {
    background: white;
    border-color: #06bbcc;
    box-shadow: 0 0 0 2px rgba(6, 187, 204, 0.2);
}
.pe-header-search-input::placeholder {
    color: #94a3b8;
}

/* Desktop Navigation */
.pe-header-nav {
    display: none;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
}
@media (min-width: 1024px) {
    .pe-header-nav {
        display: flex;
    }
}
.pe-nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s;
}
.pe-nav-link svg {
    width: 1rem;
    height: 1rem;
}
.pe-nav-link:hover,
.pe-nav-link.active {
    color: #06bbcc;
    background: rgba(6, 187, 204, 0.05);
}

/* Notifications Bell */
.pe-header-bell-wrapper {
    position: relative;
    flex-shrink: 0;
}
.pe-header-bell-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.pe-header-bell-btn:hover {
    background-color: #f1f5f9;
}
.pe-header-bell-btn svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #64748b;
}
.pe-header-bell-badge {
    position: absolute;
    top: 0.375rem;
    right: 0.375rem;
    width: 0.5rem;
    height: 0.5rem;
    background: #06bbcc;
    border-radius: 50%;
    border: 2px solid white;
}

/* Profile Dropdown */
.pe-header-profile-wrapper {
    position: relative;
    flex-shrink: 0;
    margin-left: 0.25rem;
}
.pe-header-profile-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.75rem;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}
.pe-header-profile-btn:hover {
    background-color: #f1f5f9;
}
.pe-profile-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: linear-gradient(to bottom right, #06bbcc, #0597a7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.pe-profile-name {
    display: none;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pe-profile-chevron {
    display: none;
    width: 0.875rem;
    height: 0.875rem;
    color: #94a3b8;
}
@media (min-width: 640px) {
    .pe-profile-name,
    .pe-profile-chevron {
        display: block;
    }
}
/* --- Dropdown Menus (Profile & Notifications) --- */
.pe-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.5rem;
    background: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    z-index: 50;
    display: none; /* Hidden by default */
}
.pe-dropdown-menu.show {
    display: block;
}

/* Profile Dropdown Specifics */
.pe-dropdown-profile {
    width: 13rem;
    padding: 0.25rem 0;
}
.pe-dropdown-header {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.pe-dropdown-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.pe-dropdown-subtitle {
    font-size: 0.75rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}
.pe-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    color: #334155;
    text-decoration: none;
    transition: all 0.2s;
}
.pe-dropdown-item:hover {
    background-color: rgba(6, 187, 204, 0.05);
    color: #06bbcc;
}
.pe-dropdown-item svg {
    width: 1rem;
    height: 1rem;
}
.pe-dropdown-divider {
    border-top: 1px solid #f1f5f9;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}
.pe-dropdown-item-danger {
    color: #ef4444;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.pe-dropdown-item-danger:hover {
    background-color: #fef2f2;
    color: #ef4444;
}

/* Notifications Dropdown Specifics */
.pe-dropdown-notifications {
    width: 20rem;
}
.pe-notif-header-flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
}
.pe-notif-mark-read {
    font-size: 0.75rem;
    color: #06bbcc;
    font-weight: 600;
    cursor: pointer;
}
.pe-notif-mark-read:hover {
    text-decoration: underline;
}
.pe-notif-list {
    max-height: 18rem;
    overflow-y: auto;
}
.pe-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    transition: background-color 0.2s;
    cursor: pointer;
    border-bottom: 1px solid #f8fafc;
}
.pe-notif-item:hover {
    background-color: #f8fafc;
}
.pe-notif-unread {
    background-color: rgba(6, 187, 204, 0.05);
}
.pe-notif-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background-color: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}
.pe-notif-content {
    flex: 1;
    min-width: 0;
}
.pe-notif-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}
.pe-notif-title.muted {
    color: #64748b;
}
.pe-notif-desc {
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0.125rem 0 0;
    line-height: 1.5;
}
.pe-notif-time {
    font-size: 10px;
    color: #cbd5e1;
    margin-top: 0.25rem;
}
.pe-notif-dot {
    width: 0.5rem;
    height: 0.5rem;
    background-color: #06bbcc;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 0.375rem;
}
.pe-notif-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}
.pe-notif-footer-link {
    font-size: 0.75rem;
    color: #06bbcc;
    font-weight: 600;
    text-decoration: none;
}
.pe-notif-footer-link:hover {
    text-decoration: underline;
}
/* ==========================================================================
   GLOBAL DARK MODE SYSTEM (Apply to global-header.css)
   ========================================================================== */

html.dark-theme body,
html.dark-theme .page-bg,
html.dark-theme .main-content-wrapper {
    background: #0f172a !important; /* Slate 900 - Deep Dark Blue/Gray */
    color: #f8fafc !important;
}

/* --- Headers & Navigations --- */
html.dark-theme .site-header,
html.dark-theme .pe-global-header {
    background: rgba(30, 41, 59, 0.95) !important; /* Slate 800 */
    border-bottom-color: #334155 !important;
}
html.dark-theme .pe-brand-title,
html.dark-theme .nav-link,
html.dark-theme .pe-nav-link {
    color: #f8fafc !important;
}
html.dark-theme .nav-link:hover,
html.dark-theme .pe-nav-link:hover {
    background: rgba(6, 187, 204, 0.15) !important;
    color: #06bbcc !important;
}
html.dark-theme .pe-header-menu-btn:hover,
html.dark-theme .pe-header-bell-btn:hover,
html.dark-theme .pe-header-profile-btn:hover {
    background: #334155 !important;
}

/* --- Search Inputs --- */
html.dark-theme .search-input,
html.dark-theme .pe-header-search-input,
html.dark-theme .hero-search-input {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
html.dark-theme .search-input:focus,
html.dark-theme .pe-header-search-input:focus {
    background: #0f172a !important;
    border-color: #06bbcc !important;
}

/* --- Dropdowns (Notifications & Profile) --- */
html.dark-theme .pe-dropdown-menu,
html.dark-theme .pe-search-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
}
html.dark-theme .pe-dropdown-title,
html.dark-theme .pe-dropdown-item,
html.dark-theme .pe-notif-title,
html.dark-theme .pe-result-title {
    color: #f8fafc !important;
}
html.dark-theme .pe-dropdown-subtitle,
html.dark-theme .pe-notif-desc,
html.dark-theme .pe-notif-time,
html.dark-theme .pe-result-subtitle {
    color: #94a3b8 !important;
}
html.dark-theme .pe-dropdown-item:hover,
html.dark-theme .pe-notif-item:hover,
html.dark-theme .pe-result-item:hover {
    background: #334155 !important;
}
html.dark-theme .pe-dropdown-divider,
html.dark-theme .pe-dropdown-header,
html.dark-theme .pe-notif-header-flex,
html.dark-theme .pe-notif-item,
html.dark-theme .pe-notif-footer {
    border-color: #334155 !important;
}
html.dark-theme .pe-notif-icon {
    background: #0f172a !important;
}

/* --- Left Sidebars (Library & Dashboard) --- */
html.dark-theme .sidebar-inner,
html.dark-theme .dash-sidebar .sidebar-inner {
    background: #1e293b !important;
    border-right-color: #334155 !important;
}
html.dark-theme .all-exams-title,
html.dark-theme .sb-text,
html.dark-theme .cat-name,
html.dark-theme .ql-text {
    color: #f8fafc !important;
}
html.dark-theme .sidebar-menu-btn:hover,
html.dark-theme .cat-btn:hover,
html.dark-theme .quick-link:hover {
    background: #334155 !important;
    color: #f8fafc !important;
}
html.dark-theme .sidebar-sublink,
html.dark-theme .subcat-link {
    color: #cbd5e1 !important;
    border-left-color: #334155 !important;
}
html.dark-theme .sidebar-sublink:hover,
html.dark-theme .subcat-link:hover {
    color: #f8fafc !important;
    background: #334155 !important;
}
html.dark-theme .sidebar-header,
html.dark-theme .sidebar-header-box {
    border-bottom-color: #334155 !important;
}

/* --- Library Category Cards --- */
html.dark-theme .section-title {
    color: #f8fafc !important;
}
html.dark-theme .cat-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-theme .cat-card:hover {
    border-color: #475569 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important;
}
html.dark-theme .cat-title {
    color: #f8fafc !important;
}
html.dark-theme .cat-list-link {
    color: #cbd5e1 !important;
}
html.dark-theme .cat-list-link:hover {
    background: #334155 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
}
html.dark-theme .cat-more-btn {
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
html.dark-theme .cat-more-btn:hover {
    background: #334155 !important;
    color: #f8fafc !important;
}

/* --- Course Hero & Quizzes --- */
html.dark-theme .course-hero-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-theme .course-title,
html.dark-theme .subject-title {
    color: #f8fafc !important;
}
html.dark-theme .course-desc,
html.dark-theme .course-stats {
    color: #94a3b8 !important;
}
html.dark-theme .crumb-text,
html.dark-theme .crumb-separator {
    color: #cbd5e1 !important;
}
html.dark-theme .crumb-current {
    color: #f8fafc !important;
}

/* --- THE FIX: Make Subjects & Quizzes look perfect in Dark Mode --- */
html.dark-theme .subject-group {
    background: transparent !important;
    border-color: #334155 !important;
}
html.dark-theme .subject-header {
    /* Overrides the bright gradients to dark gradients */
    background: linear-gradient(to right, #1e293b, #0f172a) !important; 
    border-bottom-color: #334155 !important;
}
html.dark-theme .subject-body {
    background: rgba(30, 41, 59, 0.5) !important;
}
html.dark-theme .quiz-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-theme .quiz-card:hover {
    background: #334155 !important;
    border-color: #475569 !important;
}
html.dark-theme .quiz-title {
    color: #f8fafc !important;
}

/* --- User Pages (Settings, Profile, Payments) --- */
html.dark-theme .up-card {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-theme .up-page-header h1,
html.dark-theme .up-item-title,
html.dark-theme .up-profile-name,
html.dark-theme .up-plan-title {
    color: #f8fafc !important;
}

html.dark-theme .up-item-desc,
html.dark-theme .up-input-note,
html.dark-theme .up-section-title,
html.dark-theme .up-plan-label,
html.dark-theme .up-profile-email,
html.dark-theme .up-form-label {
    color: #94a3b8 !important;
}

html.dark-theme .up-input {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
html.dark-theme .up-input:disabled {
    background: #1e293b !important;
    color: #64748b !important;
}
html.dark-theme .up-list-item {
    border-color: #334155 !important;
}
html.dark-theme .up-icon-box {
    background: #0f172a !important;
}
html.dark-theme .up-toggle.inactive {
    background: #334155 !important;
}

.pe-profile-avatar,
.pe-profile-avatar span,
html.dark-theme .pe-profile-avatar,
html.dark-theme .pe-profile-avatar span,
.pe-header-profile-btn:hover .pe-profile-avatar,
.pe-header-profile-btn:hover .pe-profile-avatar span,
html.dark-theme .pe-header-profile-btn:hover .pe-profile-avatar,
html.dark-theme .pe-header-profile-btn:hover .pe-profile-avatar span {
    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html.dark-theme .pe-header-profile-btn:hover .pe-profile-name {
    color: #f8fafc !important;
}
html.dark-theme .pe-header-profile-btn:hover .pe-profile-chevron {
    color: #cbd5e1 !important;
}


/* --- Dashboard & My Courses Overrides --- */

/* 1. Main Layout Background */
html.dark-theme .dash-layout {
    background: #0f172a !important; 
}

/* 2. Cards & Containers */
html.dark-theme .stat-card,
html.dark-theme .score-card,
html.dark-theme .recent-results-card,
html.dark-theme .progress-list-item,
html.dark-theme .content-empty-state {
    background: #1e293b !important;
    border-color: #334155 !important;
}

html.dark-theme .content-empty-state:hover {
    background: #334155 !important;
}

/* 3. Primary Text Headings */
html.dark-theme .welcome-title,
html.dark-theme .stat-value,
html.dark-theme .recent-title,
html.dark-theme .result-name,
html.dark-theme .progress-list-title,
html.dark-theme .empty-title {
    color: #f8fafc !important;
}

/* 4. Subtexts & Labels */
html.dark-theme .welcome-subtitle,
html.dark-theme .stat-label,
html.dark-theme .score-label,
html.dark-theme .score-value-label,
html.dark-theme .score-subtext,
html.dark-theme .result-category,
html.dark-theme .progress-list-subtitle,
html.dark-theme .empty-subtitle,
html.dark-theme .empty-state-text {
    color: #94a3b8 !important;
}

/* 5. Tabs */
html.dark-theme .tabs-wrapper {
    background-color: #1e293b !important;
}
html.dark-theme .tab-btn {
    color: #94a3b8 !important;
}
html.dark-theme .tab-btn.active {
    background-color: #334155 !important;
    color: #f8fafc !important;
}

/* 6. List Dividers & Progress Tracks */
html.dark-theme .recent-header {
    border-bottom-color: #334155 !important;
}
html.dark-theme .result-item {
    border-bottom-color: #334155 !important;
}
html.dark-theme .linear-track {
    background-color: #334155 !important;
}