/* ==========================================
   Global CSS Variables - Dark Theme
   ========================================== */
:root {
    /* App-wide scale control */
    --app-scale: 0.85;
    
    --dark-bg-1: #1a1d24;
    --dark-bg-2: #1e232d;
    --dark-bg-3: #252b38;
    --dark-bg-4: #2d3444;
    --text-primary: #e0e6ed;
    --text-secondary: #a0aab8;
    --text-muted: #6b7280;
    --glow-color: rgba(124, 191, 255, 0.7);
    --glow-color-intense: rgba(124, 191, 255, 1);
    --glow-color-soft: rgba(124, 191, 255, 0.3);
    --accent-green: #34d399;
    --accent-purple: #8b5cf6;
    --accent-red: #ef4444;
    --accent-orange: #f59e0b;
    --accent-blue: #3b82f6;
    --accent-cyan: #00bae9;
    --accent-yellow: #facc15;
    --border-subtle: rgba(124, 191, 255, 0.15);
    --border-medium: rgba(124, 191, 255, 0.3);
    --nav-glow: 0 8px 25px rgba(124, 191, 255, 0.7);
    --nav-glow-hover: 0 8px 35px rgba(124, 191, 255, 1);
    --nav-bg: #212529;
    --nav-link-color: rgba(255, 255, 255, 0.55);
    --nav-link-hover: #0d6efd;
}

/* ==========================================
   App-wide Zoom/Scale
   ========================================== */
body {
    zoom: var(--app-scale);
}

/* Firefox fallback (doesn't support zoom) */
@supports not (zoom: 1) {
    body {
        transform: scale(var(--app-scale));
        transform-origin: top left;
        width: calc(100% / var(--app-scale));
    }
}

/* ==========================================
   Light Theme Variable Overrides
   ========================================== */
.theme-light {
    --dark-bg-1: #f0f2f5;
    --dark-bg-2: #fafafa;
    --dark-bg-3: #fafafa;
    --dark-bg-4: #e4e6ea;
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --glow-color: rgba(59, 130, 246, 0.5);
    --glow-color-intense: rgba(37, 99, 235, 1);
    --glow-color-soft: rgba(59, 130, 246, 0.15);
    --border-subtle: rgba(0, 0, 0, 0.12);
    --border-medium: rgba(0, 0, 0, 0.2);
    --nav-glow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --nav-glow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);
    --nav-bg: #fafafa;
    --nav-link-color: #495057;
    --nav-link-hover: var(--accent-blue);
}

/* ==========================================
   Ocean Theme Variable Overrides
   ========================================== */
.theme-ocean {
    --dark-bg-1: #e0f2fe;
    --dark-bg-2: #f0f9ff;
    --dark-bg-3: #f0f9ff;
    --dark-bg-4: #bae6fd;
    --text-primary: #0c4a6e;
    --text-secondary: #075985;
    --text-muted: #0369a1;
    --glow-color: rgba(0, 150, 199, 0.7);
    --glow-color-intense: rgba(0, 119, 182, 1);
    --glow-color-soft: rgba(0, 150, 199, 0.3);
    --accent-blue: #0096c7;
    --border-subtle: rgba(0, 119, 182, 0.15);
    --border-medium: rgba(0, 119, 182, 0.3);
    --nav-glow: 0 8px 25px rgba(0, 150, 199, 0.5);
    --nav-glow-hover: 0 8px 35px rgba(0, 150, 199, 0.8);
    --nav-bg: #023e8a;
    --nav-link-color: rgba(255, 255, 255, 0.8);
    --nav-link-hover: #90e0ef;
}

/* ==========================================
   Desert Theme Variable Overrides
   ========================================== */
.theme-desert {
    --dark-bg-1: #fffbeb;
    --dark-bg-2: #fef3c7;
    --dark-bg-3: #fef3c7;
    --dark-bg-4: #fde68a;
    --text-primary: #78350f;
    --text-secondary: #92400e;
    --text-muted: #a16207;
    --glow-color: rgba(245, 158, 11, 0.7);
    --glow-color-intense: rgba(217, 119, 6, 1);
    --glow-color-soft: rgba(245, 158, 11, 0.3);
    --accent-blue: #d97706;
    --accent-orange: #f59e0b;
    --border-subtle: rgba(217, 119, 6, 0.15);
    --border-medium: rgba(217, 119, 6, 0.3);
    --nav-glow: 0 8px 25px rgba(245, 158, 11, 0.5);
    --nav-glow-hover: 0 8px 35px rgba(245, 158, 11, 0.8);
    --nav-bg: #92400e;
    --nav-link-color: rgba(255, 255, 255, 0.8);
    --nav-link-hover: #fde68a;
}

/* ==========================================
   Forest Theme Variable Overrides
   ========================================== */
.theme-forest {
    --dark-bg-1: #f0fdf4;
    --dark-bg-2: #dcfce7;
    --dark-bg-3: #dcfce7;
    --dark-bg-4: #bbf7d0;
    --text-primary: #14532d;
    --text-secondary: #166534;
    --text-muted: #15803d;
    --glow-color: rgba(16, 185, 129, 0.7);
    --glow-color-intense: rgba(5, 150, 105, 1);
    --glow-color-soft: rgba(16, 185, 129, 0.3);
    --accent-blue: #059669;
    --accent-green: #10b981;
    --border-subtle: rgba(5, 150, 105, 0.15);
    --border-medium: rgba(5, 150, 105, 0.3);
    --nav-glow: 0 8px 25px rgba(16, 185, 129, 0.5);
    --nav-glow-hover: 0 8px 35px rgba(16, 185, 129, 0.8);
    --nav-bg: #064e3b;
    --nav-link-color: rgba(255, 255, 255, 0.8);
    --nav-link-hover: #6ee7b7;
}

/* ==========================================
   Volcano Theme Variable Overrides
   ========================================== */
.theme-volcano {
    --dark-bg-1: #1c1917;
    --dark-bg-2: #292524;
    --dark-bg-3: #292524;
    --dark-bg-4: #44403c;
    --text-primary: #fef2f2;
    --text-secondary: #fca5a5;
    --text-muted: #f87171;
    --glow-color: rgba(239, 68, 68, 0.7);
    --glow-color-intense: rgba(220, 38, 38, 1);
    --glow-color-soft: rgba(239, 68, 68, 0.3);
    --accent-blue: #ef4444;
    --accent-red: #f87171;
    --accent-orange: #fb923c;
    --border-subtle: rgba(127, 29, 29, 0.4);
    --border-medium: rgba(220, 38, 38, 0.5);
    --nav-glow: 0 8px 25px rgba(239, 68, 68, 0.5);
    --nav-glow-hover: 0 8px 35px rgba(239, 68, 68, 0.8);
    --nav-bg: #7f1d1d;
    --nav-link-color: rgba(255, 255, 255, 0.8);
    --nav-link-hover: #fca5a5;
}

/* ==========================================
   Night Sky Theme Variable Overrides
   ========================================== */
.theme-night-sky {
    --dark-bg-1: #0f172a;
    --dark-bg-2: #1e293b;
    --dark-bg-3: #1e293b;
    --dark-bg-4: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --glow-color: rgba(129, 140, 248, 0.7);
    --glow-color-intense: rgba(99, 102, 241, 1);
    --glow-color-soft: rgba(129, 140, 248, 0.3);
    --accent-blue: #818cf8;
    --accent-purple: #a78bfa;
    --border-subtle: rgba(51, 65, 85, 0.6);
    --border-medium: rgba(71, 85, 105, 0.6);
    --nav-glow: 0 8px 25px rgba(129, 140, 248, 0.4);
    --nav-glow-hover: 0 8px 35px rgba(129, 140, 248, 0.7);
    --nav-bg: #1e1b4b;
    --nav-link-color: rgba(255, 255, 255, 0.7);
    --nav-link-hover: #c7d2fe;
}

/* ==========================================
   Psychedelic Theme Variable Overrides
   ========================================== */
.theme-psychedelic {
    --dark-bg-1: #0a0a0a;
    --dark-bg-2: #1a1a2e;
    --dark-bg-3: #1a1a2e;
    --dark-bg-4: #2d2d44;
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #a0a0a0;
    --glow-color: rgba(168, 85, 247, 0.7);
    --glow-color-intense: rgba(236, 72, 153, 1);
    --glow-color-soft: rgba(168, 85, 247, 0.3);
    --accent-blue: #a855f7;
    --accent-purple: #ec4899;
    --accent-cyan: #06b6d4;
    --border-subtle: rgba(121, 40, 202, 0.3);
    --border-medium: rgba(236, 72, 153, 0.4);
    --nav-glow: 0 8px 25px rgba(168, 85, 247, 0.5);
    --nav-glow-hover: 0 8px 35px rgba(236, 72, 153, 0.7);
    --nav-bg: #1a1a2e;
    --nav-link-color: rgba(255, 255, 255, 0.75);
    --nav-link-hover: #e879f9;
}

/* Light theme base styles */
.theme-light,
.theme-light html,
.theme-light body {
    background-color: var(--dark-bg-1) !important;
    color: var(--text-primary) !important;
}

/* Light theme links */
.theme-light a {
    color: var(--accent-blue);
}

.theme-light a:hover {
    color: #1d4ed8;
    text-shadow: none;
}

/* Light theme sections - force override gradients */
.theme-light .section-dark,
.theme-light .section-darker,
.theme-light .section-darkest {
    background: #f0f2f5 !important;
}

.theme-light .section-darker::before,
.theme-light .section-darkest::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent) !important;
}

/* Light theme cards */
.theme-light .dark-card {
    background: #ffffff;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.theme-light .dark-card:hover {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

/* Light theme modals */
.theme-light .modal-content {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    color: #212529;
}

.theme-light .modal-header {
    border-bottom-color: #dee2e6;
}

.theme-light .modal-header .modal-title {
    color: #212529;
}

.theme-light .modal-header .btn-close {
    filter: none;
}

.theme-light .modal-body {
    color: #212529;
    background-color: #ffffff;
}

.theme-light .modal-footer {
    border-top-color: #dee2e6;
}

/* Light theme forms */
.theme-light .form-control,
.theme-light .form-select {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    color: #212529;
}

.theme-light .form-control:focus,
.theme-light .form-select:focus {
    background-color: #ffffff;
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
    color: #212529;
}

.theme-light .form-control::placeholder {
    color: #6c757d;
}

.theme-light .form-control:disabled,
.theme-light .form-select:disabled {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #6c757d;
}

.theme-light .form-label {
    color: #495057;
}

.theme-light .input-group-text {
    background-color: #e9ecef;
    border-color: #ced4da;
    color: #495057;
}

/* Light theme tables */
.theme-light .table {
    background: #ffffff;
    color: #212529;
    border-color: #dee2e6;
}

.theme-light .table thead th {
    background: #e9ecef;
    color: #212529;
    border-color: #dee2e6;
}

.theme-light .table tbody tr {
    background: #ffffff;
    border-color: #dee2e6;
}

.theme-light .table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.theme-light .table tbody tr:hover {
    background: #e9ecef;
}

.theme-light .table td,
.theme-light .table th {
    border-color: #dee2e6;
    color: #212529;
}

.theme-light .table thead th.sticky-top,
.theme-light .table-container thead th {
    background: #e9ecef;
}

.theme-light .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: #ffffff;
    --bs-table-striped-bg: #ffffff;
    color: #212529;
}

.theme-light .table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: #f8f9fa;
    --bs-table-striped-bg: #f8f9fa;
    color: #212529;
}

.theme-light .table-striped > tbody > tr:hover > * {
    --bs-table-accent-bg: #e9ecef;
    color: #212529;
}

.theme-light .table-light,
.theme-light .table-light > th,
.theme-light .table-light > td,
.theme-light thead.table-light,
.theme-light thead.table-light th,
.theme-light thead.table-light tr {
    background-color: #e9ecef !important;
    color: #212529 !important;
    --bs-table-bg: #e9ecef;
    border-color: #dee2e6 !important;
}

/* Light theme dropdowns */
.theme-light .dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.theme-light .dropdown-item {
    color: #212529;
}

.theme-light .dropdown-item:hover,
.theme-light .dropdown-item:focus {
    background-color: #f8f9fa;
    color: #212529;
}

.theme-light .dropdown-divider {
    border-top-color: #dee2e6;
}

/* Light theme nav tabs */
.theme-light .nav-tabs {
    border-bottom-color: #dee2e6;
}

.theme-light .nav-tabs .nav-link {
    color: #495057;
}

.theme-light .nav-tabs .nav-link:hover {
    border-color: #dee2e6;
    color: #212529;
}

.theme-light .nav-tabs .nav-link.active {
    background-color: #ffffff;
    border-color: #dee2e6 #dee2e6 #ffffff;
    color: var(--accent-blue);
}

/* Light theme list groups */
.theme-light .list-group-item {
    background-color: #ffffff;
    border-color: #dee2e6;
    color: #212529;
}

.theme-light .list-group-item:hover {
    background-color: #f8f9fa;
}

.theme-light .list-group-item.active {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #ffffff;
}

/* Light theme cards (Bootstrap) */
.theme-light .card {
    background-color: #ffffff;
    border-color: #dee2e6;
    color: #212529;
}

.theme-light .card-header {
    background-color: #f8f9fa;
    border-bottom-color: #dee2e6;
    color: #212529;
}

.theme-light .card-footer {
    background-color: #f8f9fa;
    border-top-color: #dee2e6;
}

.theme-light .card-body {
    background-color: #ffffff;
    color: #212529;
}

/* Light theme badges */
.theme-light .badge.bg-light {
    background-color: #e9ecef !important;
    color: #212529 !important;
}

.theme-light .badge.bg-secondary {
    background-color: #6c757d !important;
}

/* Light theme spinner */
.theme-light #spinner-container {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Light theme footer */
.theme-light #main-footer {
    background: #f8f9fa;
    border-top: 1px solid #dee2e6;
}

.theme-light #main-footer p {
    color: #6c757d;
}

/* Light theme navbar */
.theme-light .navbar,
.theme-light .navbar.bg-dark,
.theme-light #nav {
    background-color: var(--nav-bg) !important;
    border-bottom: 1px solid #dee2e6;
    box-shadow: var(--nav-glow) !important;
}

.theme-light .navbar .nav-link,
.theme-light .navbar-dark .nav-link {
    color: var(--nav-link-color) !important;
}

.theme-light .navbar .nav-link:hover,
.theme-light .navbar-dark .nav-link:hover {
    color: var(--nav-link-hover) !important;
    text-shadow: none;
    animation: none !important;
}

.theme-light .navbar .navbar-brand,
.theme-light .navbar-dark .navbar-brand {
    color: #212529 !important;
}

.theme-light #nav-logo {
    filter: none;
}

/* Light theme buttons - keep gradients but adjust shadows */
.theme-light .btn-primary-glow {
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.2);
}

.theme-light .btn-primary-glow:hover {
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.3);
}

.theme-light .btn-secondary-glow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.theme-light .btn-secondary-glow:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* ==========================================
   Shared Light-Background Theme Overrides
   (Ocean, Desert, Forest share the same
   element patterns as .theme-light but use
   variable-driven colors)
   ========================================== */

/* Base */
.theme-ocean,
.theme-ocean html,
.theme-ocean body,
.theme-desert,
.theme-desert html,
.theme-desert body,
.theme-forest,
.theme-forest html,
.theme-forest body {
    background-color: var(--dark-bg-1) !important;
    color: var(--text-primary) !important;
}

/* Links */
.theme-ocean a,
.theme-desert a,
.theme-forest a {
    color: var(--accent-blue);
}

.theme-ocean a:hover,
.theme-desert a:hover,
.theme-forest a:hover {
    color: var(--glow-color-intense);
    text-shadow: none;
}

/* Sections */
.theme-ocean .section-dark,
.theme-ocean .section-darker,
.theme-ocean .section-darkest,
.theme-desert .section-dark,
.theme-desert .section-darker,
.theme-desert .section-darkest,
.theme-forest .section-dark,
.theme-forest .section-darker,
.theme-forest .section-darkest {
    background: var(--dark-bg-1) !important;
}

/* Cards */
.theme-ocean .dark-card,
.theme-desert .dark-card,
.theme-forest .dark-card {
    background: var(--dark-bg-2);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.theme-ocean .card,
.theme-desert .card,
.theme-forest .card {
    background-color: var(--dark-bg-2);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.theme-ocean .card-header,
.theme-desert .card-header,
.theme-forest .card-header {
    background-color: var(--dark-bg-4);
    border-bottom-color: var(--border-subtle);
    color: var(--text-primary);
}

.theme-ocean .card-body,
.theme-desert .card-body,
.theme-forest .card-body {
    background-color: var(--dark-bg-2);
    color: var(--text-primary);
}

/* Modals */
.theme-ocean .modal-content,
.theme-desert .modal-content,
.theme-forest .modal-content {
    background-color: var(--dark-bg-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.theme-ocean .modal-header,
.theme-desert .modal-header,
.theme-forest .modal-header {
    border-bottom-color: var(--border-subtle);
}

.theme-ocean .modal-header .modal-title,
.theme-desert .modal-header .modal-title,
.theme-forest .modal-header .modal-title {
    color: var(--text-primary);
}

.theme-ocean .modal-header .btn-close,
.theme-desert .modal-header .btn-close,
.theme-forest .modal-header .btn-close {
    filter: none;
}

.theme-ocean .modal-body,
.theme-desert .modal-body,
.theme-forest .modal-body {
    color: var(--text-primary);
    background-color: var(--dark-bg-2);
}

.theme-ocean .modal-footer,
.theme-desert .modal-footer,
.theme-forest .modal-footer {
    border-top-color: var(--border-subtle);
}

/* Forms */
.theme-ocean .form-control,
.theme-ocean .form-select,
.theme-desert .form-control,
.theme-desert .form-select,
.theme-forest .form-control,
.theme-forest .form-select {
    background-color: var(--dark-bg-2);
    border: 1px solid var(--border-medium);
    color: var(--text-primary);
}

.theme-ocean .form-control:focus,
.theme-ocean .form-select:focus,
.theme-desert .form-control:focus,
.theme-desert .form-select:focus,
.theme-forest .form-control:focus,
.theme-forest .form-select:focus {
    background-color: var(--dark-bg-2);
    border-color: var(--accent-blue);
    box-shadow: 0 0 0 3px var(--glow-color-soft);
    color: var(--text-primary);
}

.theme-ocean .form-control::placeholder,
.theme-desert .form-control::placeholder,
.theme-forest .form-control::placeholder {
    color: var(--text-muted);
}

.theme-ocean .form-label,
.theme-desert .form-label,
.theme-forest .form-label {
    color: var(--text-secondary);
}

.theme-ocean .input-group-text,
.theme-desert .input-group-text,
.theme-forest .input-group-text {
    background-color: var(--dark-bg-4);
    border-color: var(--border-medium);
    color: var(--text-secondary);
}

/* Tables */
.theme-ocean .table,
.theme-desert .table,
.theme-forest .table {
    background: var(--dark-bg-2);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.theme-ocean .table thead th,
.theme-desert .table thead th,
.theme-forest .table thead th {
    background: var(--dark-bg-4);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.theme-ocean .table tbody tr,
.theme-desert .table tbody tr,
.theme-forest .table tbody tr {
    background: var(--dark-bg-2);
    border-color: var(--border-subtle);
}

.theme-ocean .table tbody tr:nth-child(even),
.theme-desert .table tbody tr:nth-child(even),
.theme-forest .table tbody tr:nth-child(even) {
    background: var(--dark-bg-1);
}

.theme-ocean .table tbody tr:hover,
.theme-desert .table tbody tr:hover,
.theme-forest .table tbody tr:hover {
    background: var(--dark-bg-4);
}

.theme-ocean .table td,
.theme-ocean .table th,
.theme-desert .table td,
.theme-desert .table th,
.theme-forest .table td,
.theme-forest .table th {
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

/* Bootstrap table-striped overrides for light-bg themes */
.theme-ocean .table-striped > tbody > tr:nth-of-type(odd) > *,
.theme-desert .table-striped > tbody > tr:nth-of-type(odd) > *,
.theme-forest .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--dark-bg-2);
    --bs-table-striped-bg: var(--dark-bg-2);
    color: var(--text-primary);
}

.theme-ocean .table-striped > tbody > tr:nth-of-type(even) > *,
.theme-desert .table-striped > tbody > tr:nth-of-type(even) > *,
.theme-forest .table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: var(--dark-bg-1);
    --bs-table-striped-bg: var(--dark-bg-1);
    color: var(--text-primary);
}

.theme-ocean .table-striped > tbody > tr:hover > *,
.theme-desert .table-striped > tbody > tr:hover > *,
.theme-forest .table-striped > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--dark-bg-4);
    color: var(--text-primary);
}

.theme-ocean .table-light,
.theme-ocean .table-light > th,
.theme-ocean .table-light > td,
.theme-ocean thead.table-light,
.theme-ocean thead.table-light th,
.theme-ocean thead.table-light tr,
.theme-desert .table-light,
.theme-desert .table-light > th,
.theme-desert .table-light > td,
.theme-desert thead.table-light,
.theme-desert thead.table-light th,
.theme-desert thead.table-light tr,
.theme-forest .table-light,
.theme-forest .table-light > th,
.theme-forest .table-light > td,
.theme-forest thead.table-light,
.theme-forest thead.table-light th,
.theme-forest thead.table-light tr {
    background-color: var(--dark-bg-4) !important;
    color: var(--text-primary) !important;
    --bs-table-bg: var(--dark-bg-4);
    border-color: var(--border-subtle) !important;
}

/* Dropdowns */
.theme-ocean .dropdown-menu,
.theme-desert .dropdown-menu,
.theme-forest .dropdown-menu {
    background-color: var(--dark-bg-2);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.theme-ocean .dropdown-item,
.theme-desert .dropdown-item,
.theme-forest .dropdown-item {
    color: var(--text-primary);
}

.theme-ocean .dropdown-item:hover,
.theme-ocean .dropdown-item:focus,
.theme-desert .dropdown-item:hover,
.theme-desert .dropdown-item:focus,
.theme-forest .dropdown-item:hover,
.theme-forest .dropdown-item:focus {
    background-color: var(--dark-bg-4);
    color: var(--text-primary);
}

/* Nav tabs */
.theme-ocean .nav-tabs,
.theme-desert .nav-tabs,
.theme-forest .nav-tabs {
    border-bottom-color: var(--border-subtle);
}

.theme-ocean .nav-tabs .nav-link,
.theme-desert .nav-tabs .nav-link,
.theme-forest .nav-tabs .nav-link {
    color: var(--text-secondary);
}

.theme-ocean .nav-tabs .nav-link.active,
.theme-desert .nav-tabs .nav-link.active,
.theme-forest .nav-tabs .nav-link.active {
    background-color: var(--dark-bg-2);
    border-color: var(--border-subtle) var(--border-subtle) var(--dark-bg-2);
    color: var(--accent-blue);
}

/* List groups */
.theme-ocean .list-group-item,
.theme-desert .list-group-item,
.theme-forest .list-group-item {
    background-color: var(--dark-bg-2);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.theme-ocean .list-group-item:hover,
.theme-desert .list-group-item:hover,
.theme-forest .list-group-item:hover {
    background-color: var(--dark-bg-4);
}

.theme-ocean .list-group-item.active,
.theme-desert .list-group-item.active,
.theme-forest .list-group-item.active {
    background-color: var(--accent-blue);
    border-color: var(--accent-blue);
    color: #ffffff;
}

/* Navbar */
.theme-ocean .navbar .nav-link,
.theme-ocean .navbar-dark .nav-link,
.theme-desert .navbar .nav-link,
.theme-desert .navbar-dark .nav-link,
.theme-forest .navbar .nav-link,
.theme-forest .navbar-dark .nav-link {
    color: var(--nav-link-color) !important;
}

.theme-ocean .navbar .nav-link:hover,
.theme-ocean .navbar-dark .nav-link:hover,
.theme-desert .navbar .nav-link:hover,
.theme-desert .navbar-dark .nav-link:hover,
.theme-forest .navbar .nav-link:hover,
.theme-forest .navbar-dark .nav-link:hover {
    color: var(--nav-link-hover) !important;
    text-shadow: none;
    animation: none !important;
}

.theme-ocean .navbar .navbar-brand,
.theme-desert .navbar .navbar-brand,
.theme-forest .navbar .navbar-brand {
    color: #ffffff !important;
}

/* Footer */
.theme-ocean #main-footer,
.theme-desert #main-footer,
.theme-forest #main-footer {
    background: var(--dark-bg-4);
    border-top: 1px solid var(--border-subtle);
}

.theme-ocean #main-footer p,
.theme-desert #main-footer p,
.theme-forest #main-footer p {
    color: var(--text-muted);
}

.theme-ocean #foot,
.theme-desert #foot,
.theme-forest #foot {
    background-color: var(--dark-bg-4) !important;
    color: var(--text-muted) !important;
}

/* Spinner */
.theme-ocean #spinner-container,
.theme-desert #spinner-container,
.theme-forest #spinner-container {
    background-color: rgba(255, 255, 255, 0.9);
}

/* ==========================================
   Shared Dark-Background Theme Overrides
   (Volcano, Night Sky, Psychedelic share the
   same base dark structure — only need
   navbar and accent adjustments)
   ========================================== */

/* Navbar link colors */
.theme-volcano .navbar .nav-link,
.theme-volcano .navbar-dark .nav-link,
.theme-night-sky .navbar .nav-link,
.theme-night-sky .navbar-dark .nav-link,
.theme-psychedelic .navbar .nav-link,
.theme-psychedelic .navbar-dark .nav-link {
    color: var(--nav-link-color) !important;
}

.theme-volcano .navbar .nav-link:hover,
.theme-volcano .navbar-dark .nav-link:hover,
.theme-night-sky .navbar .nav-link:hover,
.theme-night-sky .navbar-dark .nav-link:hover,
.theme-psychedelic .navbar .nav-link:hover,
.theme-psychedelic .navbar-dark .nav-link:hover {
    color: var(--nav-link-hover) !important;
}

/* Links */
.theme-volcano a,
.theme-night-sky a,
.theme-psychedelic a {
    color: var(--glow-color-intense);
}

.theme-volcano a:hover,
.theme-night-sky a:hover,
.theme-psychedelic a:hover {
    color: var(--nav-link-hover);
    text-shadow: 0 0 8px var(--glow-color-soft);
}

/* Footer */
.theme-volcano #foot,
.theme-night-sky #foot,
.theme-psychedelic #foot {
    background-color: var(--dark-bg-4) !important;
    color: var(--text-muted) !important;
}

/* Table overrides for dark-bg themes */
.theme-volcano .table,
.theme-night-sky .table,
.theme-psychedelic .table {
    background: var(--dark-bg-2);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.theme-volcano .table thead th,
.theme-night-sky .table thead th,
.theme-psychedelic .table thead th {
    background: var(--dark-bg-4);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.theme-volcano .table tbody tr,
.theme-night-sky .table tbody tr,
.theme-psychedelic .table tbody tr {
    background: var(--dark-bg-2);
    border-color: var(--border-subtle);
}

.theme-volcano .table tbody tr:nth-child(even),
.theme-night-sky .table tbody tr:nth-child(even),
.theme-psychedelic .table tbody tr:nth-child(even) {
    background: var(--dark-bg-3);
}

.theme-volcano .table tbody tr:hover,
.theme-night-sky .table tbody tr:hover,
.theme-psychedelic .table tbody tr:hover {
    background: var(--dark-bg-4);
}

.theme-volcano .table td,
.theme-volcano .table th,
.theme-night-sky .table td,
.theme-night-sky .table th,
.theme-psychedelic .table td,
.theme-psychedelic .table th {
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.theme-volcano .table-striped > tbody > tr:nth-of-type(odd) > *,
.theme-night-sky .table-striped > tbody > tr:nth-of-type(odd) > *,
.theme-psychedelic .table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--dark-bg-2);
    --bs-table-striped-bg: var(--dark-bg-2);
    color: var(--text-primary);
}

.theme-volcano .table-striped > tbody > tr:nth-of-type(even) > *,
.theme-night-sky .table-striped > tbody > tr:nth-of-type(even) > *,
.theme-psychedelic .table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: var(--dark-bg-3);
    --bs-table-striped-bg: var(--dark-bg-3);
    color: var(--text-primary);
}

.theme-volcano .table-striped > tbody > tr:hover > *,
.theme-night-sky .table-striped > tbody > tr:hover > *,
.theme-psychedelic .table-striped > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--dark-bg-4);
    color: var(--text-primary);
}

.theme-volcano .table-light,
.theme-volcano .table-light > th,
.theme-volcano .table-light > td,
.theme-volcano thead.table-light,
.theme-volcano thead.table-light th,
.theme-volcano thead.table-light tr,
.theme-night-sky .table-light,
.theme-night-sky .table-light > th,
.theme-night-sky .table-light > td,
.theme-night-sky thead.table-light,
.theme-night-sky thead.table-light th,
.theme-night-sky thead.table-light tr,
.theme-psychedelic .table-light,
.theme-psychedelic .table-light > th,
.theme-psychedelic .table-light > td,
.theme-psychedelic thead.table-light,
.theme-psychedelic thead.table-light th,
.theme-psychedelic thead.table-light tr {
    background-color: var(--dark-bg-4) !important;
    color: var(--text-primary) !important;
    --bs-table-bg: var(--dark-bg-4);
    border-color: var(--border-subtle) !important;
}

/* Dropdowns - ensure dark bg themes have proper dropdowns */
.theme-volcano .dropdown-menu,
.theme-night-sky .dropdown-menu,
.theme-psychedelic .dropdown-menu {
    background-color: var(--dark-bg-3);
    border: 1px solid var(--border-subtle);
}

.theme-volcano .dropdown-item,
.theme-night-sky .dropdown-item,
.theme-psychedelic .dropdown-item {
    color: var(--text-primary);
}

.theme-volcano .dropdown-item:hover,
.theme-night-sky .dropdown-item:hover,
.theme-psychedelic .dropdown-item:hover {
    background-color: var(--dark-bg-4);
}

/* ==========================================
   Psychedelic Animation
   ========================================== */
@keyframes subtleColorShift {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(30deg); }
}

.theme-psychedelic {
    animation: subtleColorShift 20s ease-in-out infinite alternate;
}

/* Dark theme applied globally */
html, body {
    background-color: var(--dark-bg-1);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
}

/* Legacy support for .dark-theme class */
body.dark-theme {
    background-color: var(--dark-bg-1);
    color: var(--text-primary);
}

/* Dark theme links */
a {
    color: var(--glow-color-intense);
}

a:hover {
    color: #a3d1ff;
    text-shadow: 0 0 8px var(--glow-color-soft);
}

/* ==========================================
   Shared Page Section Styles
   ========================================== */
.page-section {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}

.section-dark {
    background: linear-gradient(180deg, var(--dark-bg-1) 0%, var(--dark-bg-2) 100%);
}

.section-darker {
    background: linear-gradient(180deg, var(--dark-bg-2) 0%, var(--dark-bg-3) 50%, var(--dark-bg-2) 100%);
    position: relative;
}

.section-darker::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glow-color-soft), transparent);
}

.section-darkest {
    background: linear-gradient(180deg, var(--dark-bg-3) 0%, var(--dark-bg-4) 100%);
    position: relative;
}

.section-darkest::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--glow-color-soft), transparent);
}

.section-content {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

/* ==========================================
   Shared Button Styles with Glow
   ========================================== */
.btn-glow {
    width: 100%;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 12px;
}

.btn-primary-glow {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn-primary-glow:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    box-shadow: 0 6px 25px rgba(59, 130, 246, 0.5),
                0 0 20px var(--glow-color);
    transform: translateY(-2px);
    color: white;
}

.btn-secondary-glow {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    color: #ffffff;
    border: 1px solid rgba(124, 191, 255, 0.5);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.btn-secondary-glow:hover {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
    color: #ffffff;
    border-color: var(--glow-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                0 0 20px var(--glow-color-soft);
    transform: translateY(-2px);
}

.btn-signup {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
}

.btn-signup:hover {
    background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    box-shadow: 0 6px 25px rgba(139, 92, 246, 0.5);
    transform: translateY(-2px);
    color: white;
}

/* ==========================================
   Shared Card Styles
   ========================================== */
.dark-card {
    background: var(--dark-bg-3);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.dark-card:hover {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4),
                0 0 40px var(--glow-color-soft);
}

.dark-card h2, .dark-card h3 {
    color: var(--text-primary);
}

.dark-card p {
    color: var(--text-secondary);
}

/* ==========================================
   Dark Table Styles
   ========================================== */
.table {
    background: var(--dark-bg-3);
    color: var(--text-primary);
    border-color: var(--border-subtle);
}

.table thead th {
    background: var(--dark-bg-4);
    color: var(--text-primary);
    border-color: var(--border-medium);
    font-weight: 600;
}

.table tbody tr {
    background: var(--dark-bg-3);
    border-color: var(--border-subtle);
}

.table tbody tr:nth-child(even) {
    background: var(--dark-bg-2);
}

.table tbody tr:hover {
    background: var(--dark-bg-4);
}

.table td, .table th {
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

/* Sticky table headers */
.table thead th.sticky-top,
.table-container thead th {
    position: sticky;
    top: 0;
    background: var(--dark-bg-4);
    z-index: 10;
}

/* Bootstrap table-striped override */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--dark-bg-3);
    --bs-table-striped-bg: var(--dark-bg-3);
    color: var(--text-primary);
}

.table-striped > tbody > tr:nth-of-type(even) > * {
    --bs-table-accent-bg: var(--dark-bg-2);
    --bs-table-striped-bg: var(--dark-bg-2);
    color: var(--text-primary);
}

.table-striped > tbody > tr:hover > * {
    --bs-table-accent-bg: var(--dark-bg-4);
    color: var(--text-primary);
}

/* Bootstrap table-light override for dark theme */
.table-light,
.table-light > th,
.table-light > td,
thead.table-light,
thead.table-light th,
thead.table-light tr {
    background-color: var(--dark-bg-4) !important;
    color: var(--text-primary) !important;
    --bs-table-bg: var(--dark-bg-4);
    --bs-table-striped-bg: var(--dark-bg-4);
    border-color: var(--border-medium) !important;
}

/* ==========================================
   Dark Form Styles
   ========================================== */
.form-control, .form-select {
    background-color: var(--dark-bg-2);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.form-control:focus, .form-select:focus {
    background-color: var(--dark-bg-2);
    border-color: var(--glow-color);
    box-shadow: 0 0 0 3px var(--glow-color-soft);
    color: var(--text-primary);
}

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

.form-control:disabled, .form-select:disabled {
    background-color: var(--dark-bg-4);
    border-color: var(--border-subtle);
    color: var(--text-muted);
    opacity: 0.6;
    cursor: not-allowed;
}

.form-label {
    color: var(--text-secondary);
}

.input-group-text {
    background-color: var(--dark-bg-4);
    border-color: var(--border-subtle);
    color: var(--text-secondary);
}

/* ==========================================
   Dark Modal Styles
   ========================================== */
.modal-content {
    background-color: var(--dark-bg-3);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.modal-header {
    border-bottom-color: var(--border-subtle);
}

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

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

.modal-body {
    color: var(--text-primary);
}

.modal-footer {
    border-top-color: var(--border-subtle);
}

/* ==========================================
   Dark Dropdown Styles
   ========================================== */
.dropdown-menu {
    background-color: var(--dark-bg-3);
    border: 1px solid var(--border-subtle);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--dark-bg-4);
    color: var(--text-primary);
}

.dropdown-divider {
    border-top-color: var(--border-subtle);
}

/* ==========================================
   Dark Nav Tabs Styles
   ========================================== */
.nav-tabs {
    border-bottom-color: var(--border-subtle);
}

.nav-tabs .nav-link {
    color: var(--text-secondary);
    border-color: transparent;
}

.nav-tabs .nav-link:hover {
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.nav-tabs .nav-link.active {
    background-color: var(--dark-bg-3);
    border-color: var(--border-subtle) var(--border-subtle) var(--dark-bg-3);
    color: var(--glow-color-intense);
}

/* ==========================================
   Dark List Group Styles
   ========================================== */
.list-group-item {
    background-color: var(--dark-bg-3);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

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

.list-group-item.active {
    background-color: var(--dark-bg-4);
    border-color: var(--glow-color);
    color: var(--text-primary);
}

/* ==========================================
   Dark Alert Styles
   ========================================== */
.alert-success {
    background-color: rgba(52, 211, 153, 0.15) !important;
    border-color: var(--accent-green) !important;
    color: var(--accent-green) !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: var(--accent-red) !important;
    color: var(--accent-red) !important;
}

.alert-warning {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: var(--accent-orange) !important;
    color: var(--accent-orange) !important;
}

.alert-info {
    background-color: rgba(124, 191, 255, 0.15) !important;
    border-color: var(--glow-color) !important;
    color: var(--glow-color-intense) !important;
}

/* ==========================================
   Dark Card (Bootstrap) Styles
   ========================================== */
.card {
    background-color: var(--dark-bg-3);
    border-color: var(--border-subtle);
    color: var(--text-primary);
}

.card-header {
    background-color: var(--dark-bg-4);
    border-bottom-color: var(--border-subtle);
    color: var(--text-primary);
}

.card-footer {
    background-color: var(--dark-bg-4);
    border-top-color: var(--border-subtle);
}

.card-body {
    background-color: var(--dark-bg-3);
    color: var(--text-primary);
}

.card .card-title {
    color: var(--text-primary);
}

/* ==========================================
   Dark Badge Styles
   ========================================== */
.badge.bg-light {
    background-color: var(--dark-bg-4) !important;
    color: var(--text-primary) !important;
}

.badge.bg-secondary {
    background-color: var(--dark-bg-4) !important;
}

/* ==========================================
   Dark Spinner Overlay
   ========================================== */
#spinner-container {
    background-color: rgba(26, 29, 36, 0.9);
}

/* ==========================================
   Shared Footer Styles
   ========================================== */
#main-footer {
    background: var(--dark-bg-1);
    border-top: 1px solid var(--border-subtle);
    padding: 24px 0;
}

#main-footer .footer-content {
    text-align: center;
}

#main-footer p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.9rem;
}

/* ==========================================
   Original Styles
   ========================================== */

#nav-logo {
    margin-left: 10px;
}

#page-container {
    min-height: 100vh;
    transition: transform 0.5s;
}
#msgbox {
    position: fixed;
    top: -100px; /* Start off-screen for slide-in effect */
    left: 50%;
    transform: translateX(-50%);
    min-width: 300px;
    max-width: 80%;
    padding: 1rem;
    border-radius: 5px;
    z-index: 4000;
    color: #fff; /* Default white text color for readability */
    font-weight: bold;
    transition: top 0.5s ease;
}
.navbar-right {
    margin-left: auto;
}

.margin-right-10px {
	margin-right: 10px;
}

.status-text {
    font-size: 1.25rem; /* Adjust size as needed */
    font-weight: bold;
    color: white;
}

.theme-light .status-text,
.theme-light .status-text h2,
.theme-light #status-box {
    color: #212529 !important;
}

.theme-ocean .status-text,
.theme-ocean .status-text h2,
.theme-ocean #status-box,
.theme-desert .status-text,
.theme-desert .status-text h2,
.theme-desert #status-box,
.theme-forest .status-text,
.theme-forest .status-text h2,
.theme-forest #status-box {
    color: var(--text-primary) !important;
}

.error-message {
	color: red;
}

/* Default link styles for light theme */
body a {
    color: #0d6efd; /* Bootstrap default blue */
    text-decoration: none;
}

body a:hover {
    color: #084298; /* Darker blue on hover */
}

/* Link styles for dark theme */
body.bg-dark a {
    color: #7cbfff; /* Lighter blue for dark theme */
}

body.bg-dark a:hover {
    color: #a3d1ff; /* Even lighter blue on hover */
}

/* Prevent navbar links from being affected */
#nav {
    background-color: var(--nav-bg) !important;
    box-shadow: var(--nav-glow);
}

#nav a:hover{
    color: var(--nav-link-hover);
    text-shadow: 0 0 12px var(--glow-color);
}

/* Make navbar links bolder */
#nav .nav-link {
    font-weight: 600; /* Adjust as needed */
}

/* Note: Dark alert styles are defined above in the Dark Alert Styles section */

.disabled {
    pointer-events: none;
    opacity: 0.5; /* Optional: to indicate the page is disabled */
}

.modal {
    top: 100px !important; /* Adjust modal vertical position */
    z-index: 9000 !important; /* Ensure modals appear above other elements */
}

/* ========================================
   Task Pane Styling (Global)
   ======================================== */
#task-pane {
    position: fixed;
    top: 75px;
    left: 0;
    width: 300px;
    height: 100%;
    background-color: var(--dark-bg-3);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1100;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
}

#task-pane.visible {
    opacity: 1;
    display: block;
    transform: translateX(0);
}

#close-task-pane {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
}

#close-task-pane:hover {
    color: #dc3545;
}

/* Compact task pane styling */
#task-pane h5 {
    font-size: 1rem;
    margin: 0;
}

#task-pane .list-group-item {
    padding: 0.35rem 0.5rem;
}

#task-pane .list-group-item .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
}

#task-pane .form-group {
    margin-bottom: 0.5rem;
}

#task-pane .form-group label {
    font-size: 0.8rem;
    margin-bottom: 0.1rem;
}

#task-pane .form-control {
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
}

#task-pane .form-control:focus {
    box-shadow: none;
}

/* Mobile responsiveness for task pane */
@media (max-width: 768px) {
    #task-pane .list-group-item .btn {
        font-size: 1rem;
        padding: 0.5rem 0.75rem;
        min-height: 44px;
    }
    
    #task-pane .form-control {
        font-size: 1rem;
        padding: 0.375rem 0.75rem;
        min-height: 44px;
    }
}