/* theme-variables.css - CSS custom properties for theming */

/* Default Theme - Teal/Blue Professional */
:root {
    /* Base colors */
    --primary: #0077b6;
    --secondary: #00b4d8;
    --success: #2ec4b6;
    --info: #90e0ef;
    --warning: #ffb703;
    --danger: #e63946;
    --light: #f8f9fa;
    --dark: #212529;
    
    /* Component specific */
    --body-bg: #f8f9fa;
    --body-color: #212529;
    --card-border: var(--secondary);
    --card-bg: white;
    --navbar-bg: var(--primary);
    --navbar-color: white;
    --navbar-hover: var(--info);
    --table-header-bg: var(--primary);
    --table-header-color: white;
    --table-stripe-bg: rgba(0, 180, 216, 0.1);
    --input-bg: white;
    --input-color: #212529;
    --input-border: #ced4da;
}

/* Purple Accent Theme */
[data-theme="purple"] {
    --primary: #6a0dad;
    --secondary: #9962d5;
    --success: #4caf50;
    --info: #bbdefb;
    --warning: #ff9800;
    --danger: #f44336;
    --light: #f5f5f5;
    --dark: #212121;
    
    --body-bg: #f5f5f5;
    --body-color: #212121;
    --card-border: var(--secondary);
    --card-bg: white;
    --navbar-bg: var(--primary);
    --navbar-color: white;
    --navbar-hover: #d8c2f3;
    --table-header-bg: var(--primary);
    --table-header-color: white;
    --table-stripe-bg: rgba(153, 98, 213, 0.1);
}

/* Green Nature Theme */
[data-theme="green"] {
    --primary: #2d6a4f;
    --secondary: #40916c;
    --success: #74c69d;
    --info: #b7e4c7;
    --warning: #ffbf47;
    --danger: #d62828;
    --light: #f8f9fa;
    --dark: #212529;
    
    --body-bg: #f8f9fa;
    --body-color: #212529;
    --card-border: var(--secondary);
    --card-bg: white;
    --navbar-bg: var(--primary);
    --navbar-color: white;
    --navbar-hover: var(--info);
    --table-header-bg: var(--primary);
    --table-header-color: white;
    --table-stripe-bg: rgba(64, 145, 108, 0.1);
}

/* Warm Sunset Theme */
[data-theme="warm"] {
    --primary: #bc4749;
    --secondary: #ef767a;
    --success: #49a078;
    --info: #ffcdb2;
    --warning: #ffb627;
    --danger: #8b1e3f;
    --light: #fff1e6;
    --dark: #3d405b;
    
    --body-bg: #fff1e6;
    --body-color: #3d405b;
    --card-border: var(--secondary);
    --card-bg: white;
    --navbar-bg: var(--primary);
    --navbar-color: white;
    --navbar-hover: var(--info);
    --table-header-bg: var(--primary);
    --table-header-color: white;
    --table-stripe-bg: rgba(239, 118, 122, 0.1);
}

/* Dark Mode Theme */
[data-theme="dark"] {
    --primary: #3a86ff;
    --secondary: #8338ec;
    --success: #06d6a0;
    --info: #ffd166;
    --warning: #ffbe0b;
    --danger: #ef476f;
    --light: #e0e0e0;
    --dark: #121212;
    
    --body-bg: #121212;
    --body-color: #e0e0e0;
    --card-border: #444;
    --card-bg: #1e1e1e;
    --navbar-bg: #1e1e1e;
    --navbar-color: #e0e0e0;
    --navbar-hover: var(--primary);
    --table-header-bg: #2c2c2c;
    --table-header-color: #e0e0e0;
    --table-stripe-bg: rgba(58, 134, 255, 0.15);
    --table-border-color: #444;
    --input-bg: #333;
    --input-color: #e0e0e0;
    --input-border: #555;
    --input-placeholder-color: #aaa;
    --input-disabled-bg: #222;
    --input-disabled-color: #888;
    --form-check-input-bg: #333;
    --form-check-input-border: #666;
    --form-text-color: #bbb;
    --dropdown-link-hover-bg: #2c2c2c;
    --dropdown-link-hover-color: #fff;
    --breadcrumb-bg: #2c2c2c;
    --breadcrumb-active-color: #ddd;
    --btn-text-color: #fff;
    --card-header-bg: #2c2c2c;
    --card-header-color: #e0e0e0;
    --form-select-bg: #333;
    --form-select-color: #e0e0e0;
    --form-select-border: #555;
    --form-select-indicator-color: #e0e0e0;
    --form-range-thumb-bg: var(--primary);
    --form-range-track-bg: #555;
    --modal-backdrop-bg: rgba(0, 0, 0, 0.8);
    --alert-bg-scale: -80%;
    --alert-color-scale: 40%;
    --alert-border-scale: -70%;
    --btn-close-brightness: 2.5; /* Makes close buttons visible in dark mode */
    --link-color: var(--primary);
    --link-hover-color: #7aaaff;
}

/* Modern Pastel Theme */
[data-theme="pastel"] {
    --primary: #6d6875;
    --secondary: #b5838d;
    --success: #7fb069;
    --info: #a7c6da;
    --warning: #ffcb69;
    --danger: #e56b6f;
    --light: #f8edeb;
    --dark: #22223b;
    
    --body-bg: #f8edeb;
    --body-color: #22223b;
    --card-border: var(--secondary);
    --card-bg: white;
    --navbar-bg: var(--primary);
    --navbar-color: white;
    --navbar-hover: #e8e8e4;
    --table-header-bg: var(--primary);
    --table-header-color: white;
    --table-stripe-bg: rgba(181, 131, 141, 0.1);
}

/* Apply variables to elements */

/* General */
body {
    background-color: var(--body-bg) !important;
    color: var(--body-color) !important;
}

/* Container and content areas */
.container, 
.container-fluid {
    background-color: transparent !important;
}

/* Links */
a {
    color: var(--link-color, var(--primary)) !important;
}
a:hover {
    color: var(--link-hover-color, #0056b3) !important;
}

/* Text and background colors */
.bg-primary {
    background-color: var(--primary) !important;
}
.bg-secondary {
    background-color: var(--secondary) !important;
}
.bg-success {
    background-color: var(--success) !important;
}
.bg-info {
    background-color: var(--info) !important;
}
.bg-warning {
    background-color: var(--warning) !important;
}
.bg-danger {
    background-color: var(--danger) !important;
}
.bg-light {
    background-color: var(--light) !important;
}
.bg-dark {
    background-color: var(--dark) !important;
}

.text-primary {
    color: var(--primary) !important;
}
.text-secondary {
    color: var(--secondary) !important;
}
.text-success {
    color: var(--success) !important;
}
.text-info {
    color: var(--info) !important;
}
.text-warning {
    color: var(--warning) !important;
}
.text-danger {
    color: var(--danger) !important;
}
.text-light {
    color: var(--light) !important;
}
.text-dark {
    color: var(--dark) !important;
}

/* Buttons */
.btn-primary {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--btn-text-color, white) !important;
}
.btn-secondary {
    background-color: var(--secondary) !important;
    border-color: var(--secondary) !important;
    color: var(--btn-text-color, white) !important;
}
.btn-success {
    background-color: var(--success) !important;
    border-color: var(--success) !important;
    color: var(--btn-text-color, white) !important;
}
.btn-info {
    background-color: var(--info) !important;
    border-color: var(--info) !important;
    color: var(--dark) !important;
}
.btn-warning {
    background-color: var(--warning) !important;
    border-color: var(--warning) !important;
    color: var(--dark) !important;
}
.btn-danger {
    background-color: var(--danger) !important;
    border-color: var(--danger) !important;
    color: var(--btn-text-color, white) !important;
}
.btn-light {
    background-color: var(--light) !important;
    border-color: var(--light) !important;
    color: var(--dark) !important;
}
.btn-dark {
    background-color: var(--dark) !important;
    border-color: var(--dark) !important;
    color: var(--light) !important;
}

/* Outlined buttons */
.btn-outline-primary {
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--primary) !important;
    color: white !important;
}

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

/* Badges */
.badge.bg-primary {
    background-color: var(--primary) !important;
}
.badge.bg-secondary {
    background-color: var(--secondary) !important;
}
.badge.bg-success {
    background-color: var(--success) !important;
}
.badge.bg-info {
    background-color: var(--info) !important;
}
.badge.bg-warning {
    background-color: var(--warning) !important;
}
.badge.bg-danger {
    background-color: var(--danger) !important;
}

/* Navbar */
.navbar-light {
    background-color: var(--navbar-bg) !important;
}
.navbar-light .navbar-brand, 
.navbar-light .nav-link {
    color: var(--navbar-color) !important;
}
.navbar-light .nav-link:hover {
    color: var(--navbar-hover) !important;
}
.navbar-light .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.3) !important;
}
.navbar-light .navbar-toggler-icon {
    filter: invert(1);
}

/* Additional Bootstrap background utilities */
.bg-light {
    background-color: var(--light) !important;
}
.bg-dark {
    background-color: var(--dark) !important;
}

/* Cards */
.card {
    border-color: var(--card-border) !important;
    background-color: var(--card-bg) !important;
}
.card-header {
    background-color: var(--card-header-bg, var(--primary)) !important;
    color: var(--card-header-color, white) !important;
}

/* Tables */
.table {
    color: var(--body-color) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--table-stripe-bg) !important;
}
.table thead th {
    background-color: var(--table-header-bg) !important;
    color: var(--table-header-color) !important;
}
.table-bordered {
    border-color: var(--table-border-color, var(--card-border)) !important;
}
.table td, .table th {
    border-color: var(--table-border-color, var(--card-border)) !important;
}

/* Forms */
.form-control {
    background-color: var(--input-bg) !important;
    color: var(--input-color) !important;
    border-color: var(--input-border) !important;
}
.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25) !important;
}
.form-control::placeholder {
    color: var(--input-placeholder-color, #6c757d) !important;
    opacity: 1;
}
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--input-disabled-bg, #e9ecef) !important;
    color: var(--input-disabled-color, #6c757d) !important;
}
.form-text {
    color: var(--form-text-color, #6c757d) !important;
}
.form-check-input {
    background-color: var(--form-check-input-bg, #fff) !important;
    border-color: var(--form-check-input-border, #adb5bd) !important;
}
.form-check-input:checked {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.form-select {
    background-color: var(--form-select-bg, var(--input-bg)) !important;
    color: var(--form-select-color, var(--input-color)) !important;
    border-color: var(--form-select-border, var(--input-border)) !important;
}
.form-select:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(var(--primary-rgb), 0.25) !important;
}
.form-select option {
    background-color: var(--form-select-bg, var(--input-bg)) !important;
    color: var(--form-select-color, var(--input-color)) !important;
}
.form-range::-webkit-slider-thumb {
    background-color: var(--form-range-thumb-bg, var(--primary)) !important;
}
.form-range::-moz-range-thumb {
    background-color: var(--form-range-thumb-bg, var(--primary)) !important;
}
.form-range::-webkit-slider-runnable-track {
    background-color: var(--form-range-track-bg, #dee2e6) !important;
}
.form-range::-moz-range-track {
    background-color: var(--form-range-track-bg, #dee2e6) !important;
}
.invalid-feedback {
    color: var(--danger) !important;
}
.was-validated .form-control:invalid,
.form-control.is-invalid {
    border-color: var(--danger) !important;
}
label {
    color: var(--body-color) !important;
}

/* Breadcrumb */
.breadcrumb {
    background-color: var(--breadcrumb-bg, var(--light)) !important;
}
.breadcrumb-item.active {
    color: var(--breadcrumb-active-color, var(--secondary)) !important;
}
.breadcrumb-item a {
    color: var(--primary) !important;
}

/* Utilities */
.border-primary {
    border-color: var(--primary) !important;
}
.border-secondary {
    border-color: var(--secondary) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--light);
}
::-webkit-scrollbar-thumb {
    background: var(--secondary);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Modal */
.modal-content {
    background-color: var(--card-bg) !important;
    color: var(--body-color) !important;
}
.modal-header {
    border-bottom-color: var(--card-border) !important;
}
.modal-title {
    color: var(--body-color) !important;
}
.modal-footer {
    border-top-color: var(--card-border) !important;
}
.modal-backdrop {
    background-color: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.5)) !important;
}
.btn-close {
    filter: brightness(var(--btn-close-brightness, 1)) !important;
}

/* Dropdown menu */
.dropdown-menu {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}
.dropdown-item {
    color: var(--body-color) !important;
}
.dropdown-item:hover {
    background-color: var(--dropdown-link-hover-bg, var(--table-stripe-bg)) !important;
    color: var(--dropdown-link-hover-color, var(--body-color)) !important;
}
.dropdown-item.active, 
.dropdown-item:active {
    background-color: var(--primary) !important;
    color: white !important;
}
.dropdown-divider {
    border-color: var(--card-border) !important;
}

/* Theme Switcher Specific */
.theme-switcher .btn-outline-secondary {
    color: var(--body-color) !important;
    border-color: var(--input-border) !important;
}
.theme-switcher .btn-outline-secondary:hover {
    background-color: var(--primary) !important;
    color: var(--btn-text-color, white) !important;
    border-color: var(--primary) !important;
}
.theme-item {
    color: var(--body-color) !important;
}
.theme-item span {
    color: var(--body-color) !important;
}
.theme-item:hover {
    background-color: var(--dropdown-link-hover-bg, var(--table-stripe-bg)) !important;
}
.theme-item.active {
    background-color: var(--table-stripe-bg) !important;
}
.active-indicator {
    color: var(--primary) !important;
}