/**
 * Client St0r Color Themes
 * Each theme defines CSS custom properties for consistent styling
 */

/* ========================================
   THEME: Default Blue (Original)
   ======================================== */
[data-theme="default"] {
    --primary-color: #0d6efd;
    --primary-hover: #0b5ed7;
    --primary-light: #cfe2ff;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --background: #ffffff;
    --background-alt: #f8f9fa;
    --surface: #ffffff;
    --surface-hover: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --text-muted: #adb5bd;
    --border-color: #dee2e6;
    --sidebar-bg: #0d6efd;
    --sidebar-text: #ffffff;
    --sidebar-hover: #0b5ed7;
    --card-bg: #ffffff;
    --card-shadow: rgba(0, 0, 0, 0.1);
}

/* ========================================
   THEME: Dark Mode
   ======================================== */
[data-theme="dark"] {
    --primary-color: #375a7f;
    --primary-hover: #2a4763;
    --primary-light: #1a3a52;
    --secondary-color: #6c757d;
    --success-color: #00bc8c;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --info-color: #3498db;
    --background: #222222;
    --background-alt: #1a1a1a;
    --surface: #2b2b2b;
    --surface-hover: #353535;
    --text-primary: #ffffff;
    --text-secondary: #adb5bd;
    --text-muted: #6c757d;
    --border-color: #444444;
    --sidebar-bg: #1a1a1a;
    --sidebar-text: #ffffff;
    --sidebar-hover: #2b2b2b;
    --card-bg: #2b2b2b;
    --card-shadow: rgba(0, 0, 0, 0.3);
}

/* ========================================
   THEME: Purple Haze
   ======================================== */
[data-theme="purple"] {
    --primary-color: #6f42c1;
    --primary-hover: #5a32a3;
    --primary-light: #e2d9f3;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #9b59b6;
    --background: #faf8fc;
    --background-alt: #f3f0f7;
    --surface: #ffffff;
    --surface-hover: #f8f5fb;
    --text-primary: #2d1b4e;
    --text-secondary: #6c4f9a;
    --text-muted: #9d8fb8;
    --border-color: #e2d9f3;
    --sidebar-bg: #4a2975;
    --sidebar-text: #ffffff;
    --sidebar-hover: #5a3285;
    --card-bg: #ffffff;
    --card-shadow: rgba(111, 66, 193, 0.15);
}

/* ========================================
   THEME: Forest Green
   ======================================== */
[data-theme="green"] {
    --primary-color: #198754;
    --primary-hover: #157347;
    --primary-light: #d1e7dd;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #20c997;
    --background: #f7fcf9;
    --background-alt: #e8f5ee;
    --surface: #ffffff;
    --surface-hover: #f1f9f5;
    --text-primary: #1b4332;
    --text-secondary: #2d6a4f;
    --text-muted: #74c69d;
    --border-color: #d1e7dd;
    --sidebar-bg: #1b4332;
    --sidebar-text: #ffffff;
    --sidebar-hover: #2d6a4f;
    --card-bg: #ffffff;
    --card-shadow: rgba(25, 135, 84, 0.15);
}

/* ========================================
   THEME: Ocean Blue
   ======================================== */
[data-theme="ocean"] {
    --primary-color: #0077be;
    --primary-hover: #005a8f;
    --primary-light: #cce7f5;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;
    --background: #f0f8fc;
    --background-alt: #e1f2fa;
    --surface: #ffffff;
    --surface-hover: #f5fbfe;
    --text-primary: #003d5c;
    --text-secondary: #005a8f;
    --text-muted: #66b2d1;
    --border-color: #b8dff0;
    --sidebar-bg: #003d5c;
    --sidebar-text: #ffffff;
    --sidebar-hover: #005a8f;
    --card-bg: #ffffff;
    --card-shadow: rgba(0, 119, 190, 0.15);
}

/* ========================================
   THEME: Sunset Orange
   ======================================== */
[data-theme="sunset"] {
    --primary-color: #fd7e14;
    --primary-hover: #d66a0f;
    --primary-light: #ffe5cc;
    --secondary-color: #6c757d;
    --success-color: #28a745;
    --danger-color: #e63946;
    --warning-color: #f77f00;
    --info-color: #06aed5;
    --background: #fff9f5;
    --background-alt: #fff3eb;
    --surface: #ffffff;
    --surface-hover: #fffaf7;
    --text-primary: #5c2e00;
    --text-secondary: #9d4e00;
    --text-muted: #d68844;
    --border-color: #fdd5b3;
    --sidebar-bg: #5c2e00;
    --sidebar-text: #ffffff;
    --sidebar-hover: #7d3d00;
    --card-bg: #ffffff;
    --card-shadow: rgba(253, 126, 20, 0.15);
}

/* ========================================
   THEME: Nord (Arctic)
   ======================================== */
[data-theme="nord"] {
    --primary-color: #5e81ac;
    --primary-hover: #4c6a8f;
    --primary-light: #d8dee9;
    --secondary-color: #4c566a;
    --success-color: #a3be8c;
    --danger-color: #bf616a;
    --warning-color: #ebcb8b;
    --info-color: #88c0d0;
    --background: #eceff4;
    --background-alt: #e5e9f0;
    --surface: #ffffff;
    --surface-hover: #f9fafb;
    --text-primary: #2e3440;
    --text-secondary: #3b4252;
    --text-muted: #4c566a;
    --border-color: #d8dee9;
    --sidebar-bg: #2e3440;
    --sidebar-text: #eceff4;
    --sidebar-hover: #3b4252;
    --card-bg: #ffffff;
    --card-shadow: rgba(46, 52, 64, 0.1);
}

/* ========================================
   THEME: Dracula
   ======================================== */
[data-theme="dracula"] {
    --primary-color: #bd93f9;
    --primary-hover: #9d73d9;
    --primary-light: #6272a4;
    --secondary-color: #6272a4;
    --success-color: #50fa7b;
    --danger-color: #ff5555;
    --warning-color: #f1fa8c;
    --info-color: #8be9fd;
    --background: #282a36;
    --background-alt: #21222c;
    --surface: #44475a;
    --surface-hover: #525560;
    --text-primary: #f8f8f2;
    --text-secondary: #bfbfbf;
    --text-muted: #6272a4;
    --border-color: #44475a;
    --sidebar-bg: #21222c;
    --sidebar-text: #f8f8f2;
    --sidebar-hover: #44475a;
    --card-bg: #44475a;
    --card-shadow: rgba(0, 0, 0, 0.4);
}

/* ========================================
   THEME: Solarized Light
   ======================================== */
[data-theme="solarized"] {
    --primary-color: #268bd2;
    --primary-hover: #1f6fa8;
    --primary-light: #eee8d5;
    --secondary-color: #657b83;
    --success-color: #859900;
    --danger-color: #dc322f;
    --warning-color: #b58900;
    --info-color: #2aa198;
    --background: #fdf6e3;
    --background-alt: #eee8d5;
    --surface: #ffffff;
    --surface-hover: #f7f1e0;
    --text-primary: #002b36;
    --text-secondary: #073642;
    --text-muted: #657b83;
    --border-color: #eee8d5;
    --sidebar-bg: #002b36;
    --sidebar-text: #fdf6e3;
    --sidebar-hover: #073642;
    --card-bg: #ffffff;
    --card-shadow: rgba(0, 43, 54, 0.1);
}

/* ========================================
   THEME: Monokai
   ======================================== */
[data-theme="monokai"] {
    --primary-color: #f92672;
    --primary-hover: #c91f5d;
    --primary-light: #75715e;
    --secondary-color: #75715e;
    --success-color: #a6e22e;
    --danger-color: #f92672;
    --warning-color: #e6db74;
    --info-color: #66d9ef;
    --background: #272822;
    --background-alt: #1e1f1c;
    --surface: #3e3d32;
    --surface-hover: #49483e;
    --text-primary: #f8f8f2;
    --text-secondary: #cfcfc2;
    --text-muted: #75715e;
    --border-color: #49483e;
    --sidebar-bg: #1e1f1c;
    --sidebar-text: #f8f8f2;
    --sidebar-hover: #3e3d32;
    --card-bg: #3e3d32;
    --card-shadow: rgba(0, 0, 0, 0.5);
}

/* ========================================
   THEME: Gruvbox
   ======================================== */
[data-theme="gruvbox"] {
    --primary-color: #d79921;
    --primary-hover: #b47c19;
    --primary-light: #fbf1c7;
    --secondary-color: #928374;
    --success-color: #98971a;
    --danger-color: #cc241d;
    --warning-color: #d79921;
    --info-color: #458588;
    --background: #fbf1c7;
    --background-alt: #f2e5bc;
    --surface: #ffffff;
    --surface-hover: #f9f5d7;
    --text-primary: #3c3836;
    --text-secondary: #504945;
    --text-muted: #928374;
    --border-color: #ebdbb2;
    --sidebar-bg: #282828;
    --sidebar-text: #fbf1c7;
    --sidebar-hover: #3c3836;
    --card-bg: #ffffff;
    --card-shadow: rgba(60, 56, 54, 0.1);
}

/* ========================================
   THEME APPLICATION
   ======================================== */

/* Apply theme colors to Bootstrap components */
body {
    background-color: var(--background) !important;
    color: var(--text-primary) !important;
    min-height: 100vh;
}

/* Container backgrounds */
.container,
.container-fluid {
    color: var(--text-primary) !important;
}

/* Cards */
.card {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    box-shadow: 0 0.125rem 0.25rem var(--card-shadow) !important;
    color: var(--text-primary) !important;
    position: relative !important;
    z-index: 1 !important;
}

.card-header {
    background-color: var(--surface) !important;
    border-bottom-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

.card-footer {
    background-color: var(--surface) !important;
    border-top-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-text);
}

.sidebar .nav-link {
    color: var(--sidebar-text);
}

.sidebar .nav-link:hover {
    background-color: var(--sidebar-hover);
}

.table {
    --bs-table-bg: var(--surface) !important;
    --bs-table-hover-bg: var(--surface-hover) !important;
    --bs-table-border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    background-color: var(--surface) !important;
    position: relative !important;
    z-index: 1 !important;
}

.table thead {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
}

.table tbody {
    background-color: var(--surface) !important;
    color: var(--text-primary) !important;
}

.table tr {
    background-color: var(--surface) !important;
    border-color: var(--border-color) !important;
}

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

.form-control, .form-select {
    background-color: var(--surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.form-control:focus, .form-select:focus {
    background-color: var(--surface) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-primary) !important;
}

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

/* Modals - CRITICAL: Must be clickable */
.modal {
    z-index: 99999 !important;
    pointer-events: auto !important;
}

/* Backdrop should NOT block clicks */
.modal-backdrop,
.modal-backdrop.show,
.modal-backdrop.fade {
    z-index: 99998 !important;
    pointer-events: none !important;
}

/* Modal dialog must be on top and clickable */
.modal-dialog {
    z-index: 100000 !important;
    position: relative !important;
    pointer-events: auto !important;
    margin: 1.75rem auto !important;
}

/* Modal content must capture all clicks */
.modal-content {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    position: relative !important;
    z-index: 100001 !important;
    pointer-events: auto !important;
}

.modal-header, .modal-footer {
    border-color: var(--border-color) !important;
    background-color: var(--surface) !important;
    pointer-events: auto !important;
    z-index: 100002 !important;
}

.modal-body {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    pointer-events: auto !important;
    z-index: 100002 !important;
}

/* ALL interactive elements MUST be clickable */
.modal button,
.modal .btn,
.modal input,
.modal select,
.modal textarea,
.modal a,
.modal .btn-close,
.modal label,
.modal .form-check-input {
    position: relative !important;
    z-index: 100003 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure modal is displayed properly */
.modal.show {
    display: block !important;
    pointer-events: auto !important;
}

/* Fix any conflicting overflow issues */
.modal-open {
    overflow: auto !important;
}

.modal-open .modal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    z-index: 9999 !important;
    position: absolute !important;
}

.dropdown-item {
    color: var(--text-primary) !important;
    background-color: transparent !important;
}

.dropdown-item:hover {
    background-color: var(--surface-hover) !important;
}

/* Ensure navbar dropdowns are on top */
.navbar .dropdown-menu {
    z-index: 10000 !important;
}

/* Ensure dropdown toggle doesn't interfere */
.dropdown {
    position: relative !important;
}

.dropdown-item:hover {
    background-color: var(--surface-hover);
}

.alert-info {
    background-color: var(--info-color);
    border-color: var(--info-color);
}

.breadcrumb {
    background-color: var(--surface);
}

.page-link {
    background-color: var(--surface);
    border-color: var(--border-color);
    color: var(--primary-color);
}

.page-link:hover {
    background-color: var(--surface-hover);
}

.badge {
    --bs-badge-color: #fff;
}

.text-muted {
    color: var(--text-muted) !important;
}

hr {
    border-color: var(--border-color) !important;
}

/* Navbar */
.navbar {
    background-color: var(--sidebar-bg) !important;
    position: relative !important;
    z-index: 1000 !important;
}

.navbar-brand, .nav-link {
    color: var(--sidebar-text) !important;
}

.nav-link:hover {
    color: var(--sidebar-text) !important;
    opacity: 0.8;
}

/* Navbar toggler icon - make it visible in all themes */
.navbar-toggler {
    border-color: var(--sidebar-text) !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.95)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Footer */
footer {
    background-color: var(--background-alt) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Code blocks in documentation */
pre, code {
    background-color: var(--surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ========================================
   HEADINGS AND TEXT
   ======================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-primary) !important;
}

p {
    color: var(--text-primary) !important;
}

.lead {
    color: var(--text-secondary) !important;
}

small, .small {
    color: var(--text-secondary) !important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--primary-color) !important;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--primary-hover) !important;
}

/* ========================================
   LISTS AND TABLES
   ======================================== */
.list-group-item {
    background-color: var(--surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.list-group-item:hover {
    background-color: var(--surface-hover) !important;
}

.list-group-item-action:hover {
    background-color: var(--surface-hover) !important;
}

/* ========================================
   BACKGROUNDS AND OVERLAYS
   ======================================== */
/* Background image support with theme-aware overlay */
body.has-background {
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

body.has-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--background);
    opacity: 0.85;
    z-index: -1;
    pointer-events: none;
}

/* Make content stand out over background */
body.has-background .container,
body.has-background .container-fluid {
    position: relative;
    z-index: 1;
}

body.has-background .card {
    opacity: 0.98;
    backdrop-filter: blur(10px);
}

body.has-background .navbar {
    opacity: 0.95;
    backdrop-filter: blur(10px);
}

/* ========================================
   BUTTONS - ALL VARIANTS
   ======================================== */
.btn-secondary {
    background-color: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: #fff !important;
}

.btn-secondary:hover {
    background-color: var(--text-secondary) !important;
    border-color: var(--text-secondary) !important;
}

.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

.btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

.btn-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
}

.btn-info {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
}

/* ========================================
   ALERTS
   ======================================== */
.alert {
    border-color: var(--border-color) !important;
}

.alert-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
    color: #fff !important;
}

.alert-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
    color: #fff !important;
}

.alert-warning {
    background-color: var(--warning-color) !important;
    border-color: var(--warning-color) !important;
    color: #000 !important;
}

.alert-info {
    background-color: var(--info-color) !important;
    border-color: var(--info-color) !important;
}

/* ========================================
   INPUT GROUPS
   ======================================== */
.input-group-text {
    background-color: var(--surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* ========================================
   BREADCRUMBS AND NAV
   ======================================== */
.breadcrumb {
    background-color: var(--surface) !important;
}

.breadcrumb-item {
    color: var(--text-primary) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--text-muted) !important;
}

.breadcrumb-item a {
    color: var(--primary-color) !important;
}

.breadcrumb-item.active {
    color: var(--text-secondary) !important;
}

.nav-tabs {
    border-bottom-color: var(--border-color) !important;
}

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

.nav-tabs .nav-link:hover {
    border-color: var(--border-color) !important;
}

.nav-tabs .nav-link.active {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
    border-bottom-color: transparent !important;
    color: var(--text-primary) !important;
}

/* ========================================
   BADGES
   ======================================== */
.badge.bg-primary {
    background-color: var(--primary-color) !important;
}

.badge.bg-success {
    background-color: var(--success-color) !important;
}

.badge.bg-danger {
    background-color: var(--danger-color) !important;
}

.badge.bg-warning {
    background-color: var(--warning-color) !important;
}

.badge.bg-info {
    background-color: var(--info-color) !important;
}

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

/* Low stock table rows — high contrast in both light and dark mode */
tr.low-stock-row > td {
    background-color: rgba(220, 100, 30, 0.22) !important;
    color: inherit !important;
}
[data-bs-theme="dark"] tr.low-stock-row > td {
    background-color: rgba(255, 120, 40, 0.30) !important;
    color: #fff !important;
}

/* ========================================
   Dark-mode table header / footer override
   ========================================
   Many PSA / portal templates use Bootstrap's `<thead class="table-light">`
   which hard-pins a white background regardless of theme — that produces
   white-on-white text in dark mode. Re-bind the Bootstrap table vars so
   `.table-light` becomes a darker surface with light text in dark themes. */
[data-bs-theme="dark"] .table-light,
[data-bs-theme="dark"] .table-light > th,
[data-bs-theme="dark"] .table-light > td,
[data-bs-theme="dark"] .table > thead.table-light,
[data-bs-theme="dark"] .table > tfoot.table-light,
[data-bs-theme="dark"] .table > thead.table-light > tr > th,
[data-bs-theme="dark"] .table > tfoot.table-light > tr > th,
[data-bs-theme="dark"] .table > thead.table-light > tr > td,
[data-bs-theme="dark"] .table > tfoot.table-light > tr > td {
    --bs-table-color: #f1f3f5;
    --bs-table-bg: #2b2b2b;
    --bs-table-border-color: #444;
    --bs-table-striped-bg: #2f2f2f;
    --bs-table-striped-color: #f1f3f5;
    --bs-table-active-bg: #353535;
    --bs-table-active-color: #f1f3f5;
    --bs-table-hover-bg: #353535;
    --bs-table-hover-color: #f1f3f5;
    color: var(--bs-table-color) !important;
    background-color: var(--bs-table-bg) !important;
    border-color: var(--bs-table-border-color) !important;
}

/* Generic .bg-light is also light-pinned; soften it in dark themes.
   Also handle the .bg-light.text-dark badge combo so the dark text doesn't
   stay locked against the (now-dark) background. */
[data-bs-theme="dark"] .bg-light {
    background-color: #2b2b2b !important;
    color: #f1f3f5 !important;
}
[data-bs-theme="dark"] .bg-light.text-dark,
[data-bs-theme="dark"] .badge.bg-light,
[data-bs-theme="dark"] .badge.bg-light.text-dark {
    background-color: #3a3a3a !important;
    color: #f1f3f5 !important;
}

/* `pre.bg-light` (AI suggestion boxes) — keep monospace readable on dark */
[data-bs-theme="dark"] pre.bg-light,
[data-bs-theme="dark"] .bg-light.rounded {
    background-color: #2b2b2b !important;
    color: #f1f3f5 !important;
    border: 1px solid #444 !important;
}

/* ==== Sentrox brand (fork) — navy #0a0f1a, blue #3b82f6/#2563eb. Overrides the two built-in themes. ==== */
[data-theme="dark"] {
    --primary-color: #3b82f6; --primary-hover: #2563eb; --primary-light: #14284f;
    --secondary-color: #93a0b4; --success-color: #22c55e; --danger-color: #ef4444; --warning-color: #f59e0b; --info-color: #38bdf8;
    --background: #0a0f1a; --background-alt: #0d1424; --surface: #121a2b; --surface-hover: #182238;
    --text-primary: #e6eaf2; --text-secondary: #b5c0d2; --text-muted: #7f8ca3; --border-color: #1f2a3d;
    --sidebar-bg: #070b14; --sidebar-text: #e6eaf2; --sidebar-hover: #121a2b;
    --card-bg: #121a2b; --card-shadow: rgba(0, 0, 0, 0.45);
}
[data-theme="default"] {
    --primary-color: #2563eb; --primary-hover: #1d4ed8; --primary-light: #dbe7ff;
    --secondary-color: #5b6778; --success-color: #1a7f4b; --danger-color: #c8332a; --warning-color: #b0790d; --info-color: #0284c7;
    --background: #f4f6fa; --background-alt: #e9edf5; --surface: #ffffff; --surface-hover: #f7f9fc;
    --text-primary: #121826; --text-secondary: #3b4658; --text-muted: #6b7789; --border-color: #e3e7ee;
    --sidebar-bg: #0a0f1a; --sidebar-text: #ffffff; --sidebar-hover: #16213a;
    --card-bg: #ffffff; --card-shadow: rgba(10, 15, 26, 0.08);
}