/* ==========================================================
   GLOBAL DARK MODE COMPLETE SYSTEM
   ========================================================== */
body.dark, body.dark-mode {
    background: #12141D !important; /* Premium dark background */
    color: #F5F5F5 !important;
}

/* Header & Nav */
body.dark header, body.dark-mode header {
    background: rgba(27, 31, 42, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark header nav a, body.dark-mode header nav a {
    color: #B5B7C5 !important;
}

body.dark header nav a.active, body.dark-mode header nav a.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #4f7cff, #2563eb) !important;
    box-shadow: 0 8px 25px rgba(79, 124, 255, 0.45) !important;
    font-weight: 600 !important;
}

/* Cards, Sections, Boxes, Containers across all pages */
body.dark .card, body.dark .stat-card, body.dark .news-box, body.dark .ad-space, body.dark .highlight-box,
body.dark .filter-sidebar, body.dark .note-card, body.dark .filter-bar, body.dark .pack-card,
body.dark .pack-details, body.dark .price-card, body.dark .pdf-preview-section, body.dark .review-card,
body.dark .add-review-section, body.dark .breaking-news, body.dark .tab-content, body.dark .notification-card,
body.dark .link-card, body.dark .viewer-card, body.dark .search-input-wrapper,
body.dark-mode .card, body.dark-mode .stat-card, body.dark-mode .news-box, body.dark-mode .ad-space, body.dark-mode .highlight-box,
body.dark-mode .filter-sidebar, body.dark-mode .note-card, body.dark-mode .filter-bar, body.dark-mode .pack-card,
body.dark-mode .pack-details, body.dark-mode .price-card, body.dark-mode .pdf-preview-section, body.dark-mode .review-card,
body.dark-mode .add-review-section, body.dark-mode .breaking-news, body.dark-mode .tab-content, body.dark-mode .notification-card,
body.dark-mode .link-card, body.dark-mode .viewer-card, body.dark-mode .search-input-wrapper {
    background: #1B1F2A !important;
    border: 1px solid #343A4A !important;
    color: #F5F5F5 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

/* Hover effects on cards in dark mode */
body.dark .card:hover, body.dark .stat-card:hover, body.dark .note-card:hover, body.dark .pack-card:hover,
body.dark .review-card:hover, body.dark .notification-card:hover, body.dark .link-card:hover,
body.dark-mode .card:hover, body.dark-mode .stat-card:hover, body.dark-mode .note-card:hover, body.dark-mode .pack-card:hover,
body.dark-mode .review-card:hover, body.dark-mode .notification-card:hover, body.dark-mode .link-card:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Secondary surface containers (inputs, tabs, sidebar panels) */
body.dark input, body.dark textarea, body.dark select, body.dark .tab-btn,
body.dark-mode input, body.dark-mode textarea, body.dark-mode select, body.dark-mode .tab-btn {
    background: #252A38 !important;
    color: #F5F5F5 !important;
    border: 1px solid #343A4A !important;
}

/* Transparent inputs for search bars with wrappers */
body.dark .hero-search input, body.dark-mode .hero-search input,
body.dark .search-input-wrapper input, body.dark-mode .search-input-wrapper input {
    background: transparent !important;
    border: none !important;
    color: #F5F5F5 !important;
}

/* Specific tabs styling */
body.dark .tab-btn.active, body.dark-mode .tab-btn.active {
    background: #6C63FF !important;
    color: #ffffff !important;
    border-color: #6C63FF !important;
}

/* Text elements */
body.dark p, body.dark span:not(.logo-container span), body.dark li, body.dark label, body.dark time, body.dark .breaking-scroll,
body.dark-mode p, body.dark-mode span:not(.logo-container span), body.dark-mode li, body.dark-mode label, body.dark-mode time, body.dark-mode .breaking-scroll {
    color: #B5B7C5 !important;
}

body.dark h1, body.dark h2, body.dark h3, body.dark h4, body.dark h5, body.dark h6,
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
    color: #F5F5F5 !important;
}

body.dark a, body.dark-mode a {
    color: #F5F5F5 !important;
}

body.dark a:hover, body.dark-mode a:hover {
    color: #6C63FF !important;
}

/* Footer overrides */
body.dark footer, body.dark-mode footer {
    background: #1B1F2A !important;
    border-top: 1px solid #343A4A !important;
}

/* Study note list items / specific page details */
body.dark .note-meta, body.dark .pack-meta, body.dark-mode .note-meta, body.dark-mode .pack-meta {
    color: #B5B7C5 !important;
}

body.dark .news-box a, body.dark-mode .news-box a {
    border-bottom: 1px solid #343A4A !important;
    color: #F5F5F5 !important;
}

body.dark .news-box a:hover, body.dark-mode .news-box a:hover {
    background: #252A38 !important;
}

body.dark .ad-banner, body.dark-mode .ad-banner {
    background: #1B1F2A !important;
    border: 1px solid #343A4A !important;
    color: #B5B7C5 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

body.dark .search-suggestions, body.dark-mode .search-suggestions {
    background: #1B1F2A !important;
    border-color: #343A4A !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

body.dark .suggestion-item, body.dark-mode .suggestion-item {
    color: #F5F5F5 !important;
}

body.dark .suggestion-item:hover, body.dark .suggestion-item.active,
body.dark-mode .suggestion-item:hover, body.dark-mode .suggestion-item.active {
    background: #252A38 !important;
    color: #6C63FF !important;
}

/* ==========================================================
   NOTES VIEWER SPECIFIC DARK MODE OVERRIDES
   ========================================================== */
body.dark .breadcrumb, body.dark-mode .breadcrumb {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-light) !important;
}

body.dark .note-header, body.dark-mode .note-header {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .note-meta, body.dark-mode .note-meta {
    color: var(--text-light) !important;
}

body.dark .note-actions button, body.dark-mode .note-actions button {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

body.dark .note-actions button:hover, body.dark-mode .note-actions button:hover {
    background: var(--primary) !important;
    color: #ffffff !important;
    border-color: var(--primary) !important;
}

body.dark .note-viewer, body.dark-mode .note-viewer {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .viewer-content, body.dark-mode .viewer-content {
    background: transparent !important;
    color: var(--text) !important;
}

body.dark .viewer-content::-webkit-scrollbar-track,
body.dark-mode .viewer-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05) !important;
}

body.dark .viewer-content::-webkit-scrollbar-thumb,
body.dark-mode .viewer-content::-webkit-scrollbar-thumb {
    background: var(--primary, #6366f1) !important;
}

body.dark .premium-card, body.dark-mode .premium-card {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .related-notes, body.dark-mode .related-notes {
    background: transparent !important;
    border: none !important;
    color: var(--text) !important;
}

body.dark .related-card, body.dark-mode .related-card {
    background: #1B1F2A !important;
    border: 1px solid #343A4A !important;
    color: #F5F5F5 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

body.dark .related-card:hover, body.dark-mode .related-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

body.dark .related-card h3, body.dark-mode .related-card h3 {
    color: #FFFFFF !important;
}

body.dark .related-card p, body.dark-mode .related-card p {
    color: #94A3B8 !important;
}

body.dark .related-card a, body.dark-mode .related-card a {
    color: var(--primary, #6366f1) !important;
    border-top: 1px solid #343A4A !important;
    background: transparent !important;
}

body.dark .related-card a:hover, body.dark-mode .related-card a:hover {
    background: rgba(99, 102, 241, 0.1) !important;
    color: #818CF8 !important;
}

body.dark .rating-section, body.dark-mode .rating-section {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .comment-form, body.dark-mode .comment-form {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .popup-content, body.dark-mode .popup-content,
body.dark .report-box, body.dark-mode .report-box {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    box-shadow: 0 15px 50px rgba(0,0,0,0.6) !important;
}

body.dark .plan, body.dark-mode .plan {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

/* Ensure text titles remain light inside comments/popups */
body.dark .popup-content h2, body.dark-mode .popup-content h2,
body.dark .popup-content h3, body.dark-mode .popup-content h3,
body.dark .report-box h2, body.dark-mode .report-box h2,
body.dark .report-box h3, body.dark-mode .report-box h3,
body.dark .comment-form h3, body.dark-mode .comment-form h3 {
    color: var(--text) !important;
}

/* ==========================================================
   CHAPTER PACK (BUY PDF) PAGE SPECIFIC DARK MODE OVERRIDES
   ========================================================== */
body.dark .pack-container, body.dark-mode .pack-container {
    background: var(--background) !important;
}

body.dark .pack-header, body.dark-mode .pack-header {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .info-box, body.dark-mode .info-box {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .included-section, body.dark-mode .included-section,
body.dark .pack-details, body.dark-mode .pack-details,
body.dark .reviews-section, body.dark-mode .reviews-section,
body.dark .related-packs, body.dark-mode .related-packs {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .review-card, body.dark-mode .review-card {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .add-review-section, body.dark-mode .add-review-section {
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .add-review-section input, body.dark-mode .add-review-section input,
body.dark .add-review-section textarea, body.dark-mode .add-review-section textarea {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .locked-overlay, body.dark-mode .locked-overlay {
    background: rgba(30, 41, 59, 0.95) !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
}

body.dark .locked-overlay p, body.dark-mode .locked-overlay p {
    color: var(--text-light) !important;
}

body.dark .lightbox-close, body.dark-mode .lightbox-close,
body.dark .lightbox-nav, body.dark-mode .lightbox-nav {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}

body.dark .section-title h2, body.dark-mode .section-title h2 {
    color: var(--text) !important;
}

body.dark .section-title p, body.dark-mode .section-title p {
    color: var(--text-light) !important;
}

/* ==========================================================
   NOTES VIEWER BUY PDF BUTTON DARK MODE OVERRIDES
   ========================================================== */
body.dark .premium-right, body.dark-mode .premium-right {
    background: var(--surface) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.3) !important;
}

body.dark .premium-right h3, body.dark-mode .premium-right h3 {
    color: var(--text-light) !important;
}

body.dark .premium-right h1, body.dark-mode .premium-right h1 {
    color: var(--text) !important;
}

body.dark .premium-right span, body.dark-mode .premium-right span {
    color: var(--text-light) !important;
}

body.dark .premium-right button, body.dark-mode .premium-right button {
    background: var(--primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--primary) !important;
}

body.dark .premium-right button:hover, body.dark-mode .premium-right button:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* ==========================================================
   ADMIN DASHBOARD DARK MODE INTEGRATION
   ========================================================== */
body.dark, body.dark-mode {
    --bg: #0F0F1A !important;
    --card: #181926 !important;
    --sidebar: #0C0C14 !important;
    --sidebar-light: #18192A !important;
    --text: #F1F5F9 !important;
    --light-text: #94A3B8 !important;
    --border: #232535 !important;
    --shadow: 0 10px 30px rgba(0,0,0,.3) !important;
}

body.dark .topbar, body.dark-mode .topbar {
    background: #181926 !important;
    border-bottom: 2px solid #232535 !important;
}

body.dark .topbar input, body.dark-mode .topbar input {
    background: #0F0F1A !important;
    border-color: #232535 !important;
    color: #F1F5F9 !important;
}

body.dark .stat-card, body.dark-mode .stat-card {
    background: #181926 !important;
    border: 1px solid #232535 !important;
}

body.dark .dashboard-card, body.dark-mode .dashboard-card {
    background: #181926 !important;
    border: 1px solid #232535 !important;
}

body.dark .workspace-card, body.dark-mode .workspace-card {
    background: #1E1F2F !important;
    border: 1px solid #2D2E3F !important;
}

body.dark .workspace-card:hover, body.dark-mode .workspace-card:hover {
    border-color: #6C63FF !important;
}

body.dark .system-box, body.dark-mode .system-box {
    background: #0F0F1A !important;
    border: 1px solid #232535 !important;
}

body.dark .product-table th, body.dark-mode .product-table th {
    background: #0F0F1A !important;
    color: #94A3B8 !important;
    border-bottom: 2px solid #232535 !important;
}

body.dark .product-table td, body.dark-mode .product-table td {
    border-bottom: 1px solid #232535 !important;
    color: #F1F5F9 !important;
}

body.dark .session-item, body.dark-mode .session-item {
    border-bottom: 1px solid #232535 !important;
}

body.dark .score-card, body.dark-mode .score-card {
    background: #0F0F1A !important;
    border: 1px solid #232535 !important;
}

body.dark textarea, body.dark-mode textarea {
    background: #0F0F1A !important;
    border-color: #232535 !important;
    color: #F1F5F9 !important;
}

body.dark .security-alert, body.dark-mode .security-alert {
    background: rgba(245, 158, 11, 0.05) !important;
    border-color: rgba(245, 158, 11, 0.15) !important;
}

/* Theme Toggle Button Styles */
.theme-toggle-btn {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--card);
    border: 2px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 22px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition);
    outline: none;
}

.theme-toggle-btn:hover {
    background: var(--primary);
    color: #fff;
    transform: rotate(20deg);
}

body.dark .theme-toggle-btn, body.dark-mode .theme-toggle-btn {
    background: #181926;
    border-color: #232535;
}

body.dark .revenue-stats div, body.dark-mode .revenue-stats div {
    background: #12121E !important;
    border: 1px solid #232535 !important;
}

body.dark .revenue-stats div:hover, body.dark-mode .revenue-stats div:hover {
    background: #181926 !important;
}

body.dark .chart-placeholder, body.dark-mode .chart-placeholder {
    background: #12121E !important;
    border-color: #232535 !important;
}

body.dark .status-box, body.dark-mode .status-box {
    background: #12121E !important;
    border: 1px solid #232535 !important;
}

body.dark .status-box:hover, body.dark-mode .status-box:hover {
    background: #181926 !important;
}

body.dark .task-item, body.dark-mode .task-item {
    background: #12121E !important;
    border-color: #232535 !important;
}

body.dark .task-item:hover, body.dark-mode .task-item:hover {
    box-shadow: 0 10px 20px rgba(0,0,0,.35) !important;
}

body.dark .ai-card, body.dark-mode .ai-card {
    background: #181926 !important;
    border-color: #232535 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.35) !important;
}

body.dark .session-item, body.dark-mode .session-item {
    background: #12121E !important;
    border-color: #232535 !important;
}

body.dark .session-item:hover, body.dark-mode .session-item:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;
}

/* ==========================================================
   PDF STORE PAGE SPECIFIC DARK MODE OVERRIDES
   ========================================================== */
body.dark .store-search input, body.dark-mode .store-search input {
    background: #1B1F2A !important;
    border-color: #343A4A !important;
    color: #F5F5F5 !important;
}

body.dark .store-search input:focus, body.dark-mode .store-search input:focus {
    border-color: #6C63FF !important;
    box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.2) !important;
}

body.dark select, body.dark-mode select {
    background-color: #1B1F2A !important;
    border-color: #343A4A !important;
    color: #F5F5F5 !important;
}

body.dark .quick-filter button, body.dark-mode .quick-filter button {
    background: #1B1F2A !important;
    color: #B5B7C5 !important;
    border: 1px solid #343A4A !important;
}

body.dark .quick-filter button:hover, body.dark-mode .quick-filter button:hover,
body.dark .quick-filter button.active, body.dark-mode .quick-filter button.active {
    background: #6C63FF !important;
    color: #FFFFFF !important;
    border-color: #6C63FF !important;
}

body.dark .resource-card, body.dark-mode .resource-card {
    background: #1B1F2A !important;
    border: 1px solid #2A3040 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

body.dark .resource-card:hover, body.dark-mode .resource-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45) !important;
    border-color: #3E465A !important;
}

body.dark .card-body h3, body.dark-mode .card-body h3 {
    color: #FFFFFF !important;
}

body.dark .card-info, body.dark-mode .card-info {
    color: #B5B7C5 !important;
}

body.dark .card-rating, body.dark-mode .card-rating {
    color: #FFB800 !important;
}

body.dark .card-rating span, body.dark-mode .card-rating span {
    color: #B5B7C5 !important;
}

body.dark .card-price, body.dark-mode .card-price {
    color: #6C63FF !important;
}

body.dark .empty-state, body.dark-mode .empty-state {
    background: #1B1F2A !important;
    border: 1px solid #343A4A !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

body.dark .empty-state h2, body.dark-mode .empty-state h2 {
    color: #FFFFFF !important;
}

body.dark .empty-state p, body.dark-mode .empty-state p {
    color: #B5B7C5 !important;
}

body.dark .pagination button, body.dark-mode .pagination button {
    background: #1B1F2A !important;
    border-color: #343A4A !important;
    color: #B5B7C5 !important;
}

body.dark .pagination button:hover, body.dark-mode .pagination button:hover {
    background: #6C63FF !important;
    color: #FFFFFF !important;
    border-color: #6C63FF !important;
}

body.dark .pagination button.active, body.dark-mode .pagination button.active {
    background: #6C63FF !important;
    color: #FFFFFF !important;
    border-color: #6C63FF !important;
}

/* ==========================================================
   LOGIN & REGISTER PAGE SPECIFIC DARK MODE OVERRIDES
   ========================================================== */
body.dark, body.dark-mode {
    background: #0F121D !important;
}

body.dark .login-wrapper, body.dark-mode .login-wrapper {
    background: #1B1F2A !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
    border: 1px solid #2A3040 !important;
}

body.dark .login-right, body.dark-mode .login-right {
    background: #1B1F2A !important;
}

body.dark .login-card h2, body.dark-mode .login-card h2 {
    color: #8F85FF !important;
}

body.dark .login-card p, body.dark-mode .login-card p {
    color: #B5B7C5 !important;
}

body.dark .input-group label, body.dark-mode .input-group label {
    color: #E2E8F0 !important;
}

body.dark .input-group input, body.dark-mode .input-group input {
    background: #12121E !important;
    border-color: #2D3748 !important;
    color: #F5F5F5 !important;
}

body.dark .input-group input:focus, body.dark-mode .input-group input:focus {
    border-color: #6C63FF !important;
    box-shadow: 0 0 0 5px rgba(108, 99, 255, 0.2) !important;
}

body.dark .input-group select, body.dark-mode .input-group select {
    background-color: #12121E !important;
    border-color: #2D3748 !important;
    color: #F5F5F5 !important;
}

body.dark .login-options, body.dark-mode .login-options {
    color: #B5B7C5 !important;
}

body.dark .login-options label, body.dark-mode .login-options label {
    color: #B5B7C5 !important;
}

body.dark .security-box, body.dark-mode .security-box {
    background: #12121E !important;
    border-left-color: #6C63FF !important;
    color: #B5B7C5 !important;
}

body.dark .modal-content, body.dark-mode .modal-content {
    background: #1B1F2A !important;
    border: 1px solid #2A3040 !important;
    color: #F5F5F5 !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
}

body.dark .modal-content h3, body.dark-mode .modal-content h3 {
    color: #FFFFFF !important;
}

body.dark .modal-content p, body.dark-mode .modal-content p {
    color: #B5B7C5 !important;
}

body.dark .modal-content input, body.dark-mode .modal-content input {
    background: #12121E !important;
    border-color: #2D3748 !important;
    color: #F5F5F5 !important;
}

body.dark .modal-content button, body.dark-mode .modal-content button {
    background: #6C63FF !important;
    color: #FFFFFF !important;
}

body.dark .modal-content button:hover, body.dark-mode .modal-content button:hover {
    background: #5B52E0 !important;
}

/* ==========================================================
   CHAPTER PACK PAGE IN-DEPTH DARK MODE OVERRIDES
   ========================================================== */
body.dark .pack-hero h1, body.dark-mode .pack-hero h1,
body.dark #packTitle, body.dark-mode #packTitle {
    color: #FFFFFF !important;
}

body.dark .pack-hero p, body.dark-mode .pack-hero p,
body.dark #packDescription, body.dark-mode #packDescription {
    color: #B5B7C5 !important;
}

body.dark .hero-meta span, body.dark-mode .hero-meta span {
    background: #1B1F2A !important;
    color: #E2E8F0 !important;
    border: 1px solid #343A4A !important;
}

body.dark .pack-section, body.dark-mode .pack-section {
    background: #1B1F2A !important;
    border: 1px solid #2A3040 !important;
    color: #F5F5F5 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

body.dark .pack-description, body.dark-mode .pack-description,
body.dark #packDescriptionContent, body.dark-mode #packDescriptionContent {
    color: #B5B7C5 !important;
}

body.dark .description-highlight, body.dark-mode .description-highlight {
    background: #12121E !important;
    color: #22C55E !important;
    border: 1px solid #1E293B !important;
}

body.dark .pack-file-card, body.dark-mode .pack-file-card {
    background: #1B1F2A !important;
    border-color: #343A4A !important;
    color: #FFFFFF !important;
}

body.dark .pack-file-card:hover, body.dark-mode .pack-file-card:hover {
    border-color: #6C63FF !important;
    box-shadow: 0 8px 25px rgba(108, 99, 255, 0.15) !important;
}

body.dark .pack-file-card.active, body.dark-mode .pack-file-card.active {
    background: rgba(108, 99, 255, 0.1) !important;
    border-color: #6C63FF !important;
}

body.dark .pack-file-info h4, body.dark-mode .pack-file-info h4 {
    color: #FFFFFF !important;
}

body.dark .pack-file-info p, body.dark-mode .pack-file-info p {
    color: #B5B7C5 !important;
}

body.dark .pack-file-action-btn.view, body.dark-mode .pack-file-action-btn.view {
    background: #12121E !important;
    border-color: #343A4A !important;
    color: #E2E8F0 !important;
}

body.dark .pack-file-action-btn.view:hover, body.dark-mode .pack-file-action-btn.view:hover {
    background: #6C63FF !important;
    color: #FFFFFF !important;
    border-color: #6C63FF !important;
}

body.dark .pack-file-status-badge, body.dark-mode .pack-file-status-badge {
    background: #12121E !important;
    border-color: #343A4A !important;
    color: #B5B7C5 !important;
}

body.dark .pack-hero, body.dark-mode .pack-hero {
    background: #1B1F2A !important;
    box-shadow: 0 15px 40px rgba(0,0,0,.35) !important;
    border: 1px solid #2A3040 !important;
}

/* ==========================================================
   NOTES SEARCH FILTER PANEL DARK MODE OVERRIDES
   ========================================================== */
body.dark .filter-panel, body.dark-mode .filter-panel {
    background: #1B1F2A !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid #2A3040 !important;
}

body.dark .filter-panel h2, body.dark-mode .filter-panel h2 {
    color: #FFFFFF !important;
}

body.dark .filter-box label, body.dark-mode .filter-box label {
    color: #E2E8F0 !important;
}

body.dark .filter-box input, body.dark-mode .filter-box input,
body.dark .filter-box select, body.dark-mode .filter-box select {
    background-color: #12121E !important;
    border-color: #343A4A !important;
    color: #F5F5F5 !important;
}

body.dark .filter-box input:focus, body.dark-mode .filter-box input:focus,
body.dark .filter-box select:focus, body.dark-mode .filter-box select:focus {
    border-color: #6C63FF !important;
    box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.2) !important;
}

/* ==========================================================
   NOTES SEARCH SIDEBAR BOXES DARK MODE OVERRIDES
   ========================================================== */
body.dark .sidebar-box, body.dark-mode .sidebar-box {
    background: #1B1F2A !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid #2A3040 !important;
}

body.dark .sidebar-box h3, body.dark-mode .sidebar-box h3 {
    color: #FFFFFF !important;
}

body.dark .sidebar-box li, body.dark-mode .sidebar-box li {
    border-bottom: 1px solid #343A4A !important;
    color: #B5B7C5 !important;
}

body.dark .sidebar-box li:last-child, body.dark-mode .sidebar-box li:last-child {
    border-bottom: none !important;
}

body.dark .sidebar-box li:hover, body.dark-mode .sidebar-box li:hover {
    color: #6C63FF !important;
}

/* ==========================================================
   ADMIN DASHBOARD & CONTENT STUDIO DARK CONTRAST FIXES
   ========================================================== */

/* Fix user table / note table rows & alternating white backgrounds in dark mode */
body.dark tr, body.dark-mode tr, body.dark-theme tr,
body.dark tr:nth-child(even), body.dark-mode tr:nth-child(even), body.dark-theme tr:nth-child(even),
body.dark .user-row, body.dark-mode .user-row, body.dark-theme .user-row,
body.dark .table-row, body.dark-mode .table-row, body.dark-theme .table-row {
    background: #1B1F2A !important;
    color: #F8FAFC !important;
    border-color: #343A4A !important;
}

body.dark tr:hover, body.dark-mode tr:hover, body.dark-theme tr:hover,
body.dark .user-row:hover, body.dark-mode .user-row:hover, body.dark-theme .user-row:hover {
    background: #252A38 !important;
}

/* Fix header profile pill, notification button, theme button */
body.dark .profile, body.dark-mode .profile, body.dark-theme .profile,
body.dark .notification-btn, body.dark-mode .notification-btn, body.dark-theme .notification-btn,
body.dark .theme-toggle-btn, body.dark-mode .theme-toggle-btn, body.dark-theme .theme-toggle-btn {
    background: #1B1F2A !important;
    border: 1px solid #343A4A !important;
    color: #F8FAFC !important;
}

body.dark .profile h4, body.dark-mode .profile h4, body.dark-theme .profile h4 {
    color: #F8FAFC !important;
}

/* Fix inputs & text inside table cells */
body.dark td, body.dark-mode td, body.dark-theme td,
body.dark th, body.dark-mode th, body.dark-theme th {
    color: #F8FAFC !important;
    border-color: #343A4A !important;
}

body.dark td span, body.dark-mode td span, body.dark-theme td span,
body.dark td p, body.dark-mode td p, body.dark-theme td p,
body.dark td div, body.dark-mode td div, body.dark-theme td div {
    color: #F8FAFC !important;
}

/* Task items in dark mode */
body.dark .task-item, body.dark-mode .task-item, body.dark-theme .task-item {
    background: #1B1F2A !important;
    border: 1px solid #343A4A !important;
    color: #F8FAFC !important;
}

body.dark .task-item h4, body.dark-mode .task-item h4, body.dark-theme .task-item h4 {
    color: #F8FAFC !important;
}

/* ==========================================================
   UIVERSE.IO DAY/NIGHT SUN-MOON THEME SWITCH COMPONENT
   ========================================================== */
.ui-switch {
  /* switch */
  --switch-bg: rgb(135, 150, 165);
  --switch-width: 48px;
  --switch-height: 20px;
  /* circle */
  --circle-diameter: 32px;
  --circle-bg: rgb(0, 86, 210);
  --circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
  display: inline-flex;
  align-items: center;
  user-select: none;
  z-index: 1001;
  vertical-align: middle;
  margin-left: 12px;
}

.ui-switch input {
  display: none;
}

.ui-switch .slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: var(--switch-width);
  height: var(--switch-height);
  background: var(--switch-bg);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}

/* Light Mode: Sun icon on left circle */
.ui-switch .slider .circle {
  top: calc(var(--circle-inset) * -1);
  left: 0;
  width: var(--circle-diameter);
  height: var(--circle-diameter);
  position: absolute;
  background: var(--circle-bg);
  border-radius: inherit;
  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}

.ui-switch .circle .sun-icon {
  display: block !important;
  width: 18px;
  height: 18px;
}

.ui-switch .circle .moon-icon {
  display: none !important;
  width: 18px;
  height: 18px;
}

.ui-switch .slider .circle::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: inherit;
  transition: all 500ms;
  opacity: 0;
}

/* Dark Mode: Moon icon on right circle */
.ui-switch input:checked+.slider .circle {
  left: calc(100% - var(--circle-diameter));
  background-color: rgb(15, 23, 42);
}

.ui-switch input:checked+.slider .circle .sun-icon {
  display: none !important;
}

.ui-switch input:checked+.slider .circle .moon-icon {
  display: block !important;
}

.ui-switch input:active+.slider .circle::before {
  transition: 0s;
  opacity: 1;
  width: 0;
  height: 0;
}

@media (max-width: 768px) {
  .ui-switch {
    margin-left: auto !important;
    margin-right: 10px !important;
    transform: scale(0.85) !important;
    flex-shrink: 0 !important;
  }
}