/* ============================================
   RTRACK THEME SYSTEM
   ============================================ */

/* CSS Custom Properties for theming */
:root {
    /* Default (Light) Theme */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f9fa;
    --theme-bg-tertiary: #e9ecef;
    --theme-text-primary: #212529;
    --theme-text-secondary: #6c757d;
    --theme-text-muted: #adb5bd;
    --theme-border-color: #dee2e6;
    --theme-accent-primary: #0d6efd;
    --theme-accent-secondary: #6c757d;
    --theme-navbar-bg: #ffffff;
    --theme-navbar-text: #212529;
    --theme-card-bg: #ffffff;
    --theme-card-border: #dee2e6;
    --theme-sidebar-bg: #f8f9fa;
    --theme-link-color: #0d6efd;
    --theme-link-hover: #0a58ca;
    --theme-success: #198754;
    --theme-danger: #dc3545;
    --theme-warning: #ffc107;
    --theme-info: #0dcaf0;
    --theme-shadow: rgba(0, 0, 0, 0.1);
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
    --theme-bg-primary: #1a1a2e;
    --theme-bg-secondary: #16213e;
    --theme-bg-tertiary: #0f3460;
    --theme-text-primary: #eaeaea;
    --theme-text-secondary: #b8b8b8;
    --theme-text-muted: #6c757d;
    --theme-border-color: #2d3748;
    --theme-accent-primary: #4da8da;
    --theme-accent-secondary: #a0aec0;
    --theme-navbar-bg: #0f0f23;
    --theme-navbar-text: #eaeaea;
    --theme-card-bg: #1e1e3f;
    --theme-card-border: #2d3748;
    --theme-sidebar-bg: #16213e;
    --theme-link-color: #4da8da;
    --theme-link-hover: #7ec8e3;
    --theme-success: #48bb78;
    --theme-danger: #fc8181;
    --theme-warning: #f6e05e;
    --theme-info: #63b3ed;
    --theme-shadow: rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] body {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

[data-theme="dark"] .navbar {
    background-color: var(--theme-navbar-bg) !important;
    border-bottom: 1px solid var(--theme-border-color);
}

[data-theme="dark"] .navbar .nav-link,
[data-theme="dark"] .navbar .navbar-brand {
    color: var(--theme-navbar-text) !important;
}

[data-theme="dark"] .card {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-card-border);
    color: var(--theme-text-primary);
}

[data-theme="dark"] .card-header {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-card-border);
}

[data-theme="dark"] .table {
    color: var(--theme-text-primary);
    --bs-table-bg: var(--theme-card-bg);
    --bs-table-border-color: var(--theme-border-color);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--theme-bg-secondary);
    color: var(--theme-text-primary);
}

[data-theme="dark"] .dropdown-menu {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-border-color);
}

[data-theme="dark"] .dropdown-item {
    color: var(--theme-text-primary);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--theme-bg-tertiary);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--theme-bg-tertiary);
    border-color: var(--theme-accent-primary);
    color: var(--theme-text-primary);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--theme-text-secondary);
    border-color: var(--theme-border-color);
}

[data-theme="dark"] .text-muted {
    color: var(--theme-text-secondary) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--theme-text-primary) !important;
}

[data-theme="dark"] .bg-light {
    background-color: var(--theme-bg-secondary) !important;
}

[data-theme="dark"] .border {
    border-color: var(--theme-border-color) !important;
}

[data-theme="dark"] .modal-content {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
    border-color: var(--theme-border-color);
}

[data-theme="dark"] .alert {
    border-color: var(--theme-border-color);
}

[data-theme="dark"] .list-group-item {
    background-color: var(--theme-card-bg);
    border-color: var(--theme-border-color);
    color: var(--theme-text-primary);
}

/* ============================================
   OCEAN BLUE THEME
   ============================================ */
[data-theme="blue"] {
    --theme-bg-primary: #f0f7ff;
    --theme-bg-secondary: #e3f2fd;
    --theme-bg-tertiary: #bbdefb;
    --theme-text-primary: #1a365d;
    --theme-text-secondary: #4a5568;
    --theme-border-color: #90caf9;
    --theme-accent-primary: #1976d2;
    --theme-accent-secondary: #42a5f5;
    --theme-navbar-bg: #1565c0;
    --theme-navbar-text: #ffffff;
    --theme-card-bg: #ffffff;
    --theme-card-border: #90caf9;
    --theme-link-color: #1976d2;
    --theme-link-hover: #1565c0;
}

[data-theme="blue"] .navbar {
    background-color: var(--theme-navbar-bg) !important;
}

[data-theme="blue"] .navbar .nav-link,
[data-theme="blue"] .navbar .navbar-brand,
[data-theme="blue"] .navbar .dropdown-toggle {
    color: var(--theme-navbar-text) !important;
}

[data-theme="blue"] body {
    background-color: var(--theme-bg-primary);
}

[data-theme="blue"] .card {
    border-color: var(--theme-card-border);
}

[data-theme="blue"] .card-header {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-card-border);
}

[data-theme="blue"] .btn-primary {
    background-color: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
}

[data-theme="blue"] .text-primary {
    color: var(--theme-accent-primary) !important;
}

/* ============================================
   FOREST GREEN THEME
   ============================================ */
[data-theme="green"] {
    --theme-bg-primary: #f0fff4;
    --theme-bg-secondary: #e8f5e9;
    --theme-bg-tertiary: #c8e6c9;
    --theme-text-primary: #1a4731;
    --theme-text-secondary: #4a5568;
    --theme-border-color: #a5d6a7;
    --theme-accent-primary: #2e7d32;
    --theme-accent-secondary: #66bb6a;
    --theme-navbar-bg: #1b5e20;
    --theme-navbar-text: #ffffff;
    --theme-card-bg: #ffffff;
    --theme-card-border: #a5d6a7;
    --theme-link-color: #2e7d32;
    --theme-link-hover: #1b5e20;
}

[data-theme="green"] .navbar {
    background-color: var(--theme-navbar-bg) !important;
}

[data-theme="green"] .navbar .nav-link,
[data-theme="green"] .navbar .navbar-brand,
[data-theme="green"] .navbar .dropdown-toggle {
    color: var(--theme-navbar-text) !important;
}

[data-theme="green"] body {
    background-color: var(--theme-bg-primary);
}

[data-theme="green"] .card {
    border-color: var(--theme-card-border);
}

[data-theme="green"] .card-header {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-card-border);
}

[data-theme="green"] .btn-primary {
    background-color: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
}

[data-theme="green"] .text-primary {
    color: var(--theme-accent-primary) !important;
}

/* ============================================
   ROYAL PURPLE THEME
   ============================================ */
[data-theme="purple"] {
    --theme-bg-primary: #faf5ff;
    --theme-bg-secondary: #f3e8ff;
    --theme-bg-tertiary: #e9d5ff;
    --theme-text-primary: #3b0764;
    --theme-text-secondary: #6b21a8;
    --theme-border-color: #c4b5fd;
    --theme-accent-primary: #7c3aed;
    --theme-accent-secondary: #a78bfa;
    --theme-navbar-bg: #5b21b6;
    --theme-navbar-text: #ffffff;
    --theme-card-bg: #ffffff;
    --theme-card-border: #c4b5fd;
    --theme-link-color: #7c3aed;
    --theme-link-hover: #5b21b6;
}

[data-theme="purple"] .navbar {
    background-color: var(--theme-navbar-bg) !important;
}

[data-theme="purple"] .navbar .nav-link,
[data-theme="purple"] .navbar .navbar-brand,
[data-theme="purple"] .navbar .dropdown-toggle {
    color: var(--theme-navbar-text) !important;
}

[data-theme="purple"] body {
    background-color: var(--theme-bg-primary);
}

[data-theme="purple"] .card {
    border-color: var(--theme-card-border);
}

[data-theme="purple"] .card-header {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-card-border);
}

[data-theme="purple"] .btn-primary {
    background-color: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
}

[data-theme="purple"] .text-primary {
    color: var(--theme-accent-primary) !important;
}

/* ============================================
   WARM SUNSET THEME
   ============================================ */
[data-theme="warm"] {
    --theme-bg-primary: #fffbeb;
    --theme-bg-secondary: #fef3c7;
    --theme-bg-tertiary: #fde68a;
    --theme-text-primary: #78350f;
    --theme-text-secondary: #92400e;
    --theme-border-color: #fcd34d;
    --theme-accent-primary: #d97706;
    --theme-accent-secondary: #f59e0b;
    --theme-navbar-bg: #b45309;
    --theme-navbar-text: #ffffff;
    --theme-card-bg: #ffffff;
    --theme-card-border: #fcd34d;
    --theme-link-color: #d97706;
    --theme-link-hover: #b45309;
}

[data-theme="warm"] .navbar {
    background-color: var(--theme-navbar-bg) !important;
}

[data-theme="warm"] .navbar .nav-link,
[data-theme="warm"] .navbar .navbar-brand,
[data-theme="warm"] .navbar .dropdown-toggle {
    color: var(--theme-navbar-text) !important;
}

[data-theme="warm"] body {
    background-color: var(--theme-bg-primary);
}

[data-theme="warm"] .card {
    border-color: var(--theme-card-border);
}

[data-theme="warm"] .card-header {
    background-color: var(--theme-bg-secondary);
    border-color: var(--theme-card-border);
}

[data-theme="warm"] .btn-primary {
    background-color: var(--theme-accent-primary);
    border-color: var(--theme-accent-primary);
}

[data-theme="warm"] .text-primary {
    color: var(--theme-accent-primary) !important;
}

/* ============================================
   COMMON THEME TRANSITIONS
   ============================================ */
body,
.navbar,
.card,
.btn,
.form-control,
.form-select,
.dropdown-menu,
.table {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}