/*
 * Black Dashboard Theme System
 * Based on Creative Tim's Black Dashboard
 * Supports Dark and Light modes
 * Bootstrap 5.3+ Compatible
 */

:root {
    /* Font System */
    --font-family-base: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 0.875rem;
    --font-weight-regular: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    --font-weight-light: 200;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* Border Radius */
    --border-radius-sm: 0.2232rem;
    --border-radius-md: 0.2857rem;
    --border-radius-lg: 0.4285rem;
    --border-radius-xl: 0.625rem;

    /* Transitions */
    --transition-base: all 0.15s ease-in-out;
    --transition-shadow: box-shadow 0.15s ease-in-out;
}

/* Light Theme (Default) */
[data-theme="light"], :root:not([data-theme]) {

    --text-navs: #000;
    --modal-bg: #ffffff50;
    /* Backgrounds */
    --bg-primary: #ffffff;
    --bg-secondary: #f7f8fc;
    --bg-tertiary: #e9ecef;
    --bg-body: #f5f6fa;
    --bg-card: #ffffff;
    --bg-hover: rgba(34, 42, 66, 0.05);

    /* Text Colors */
    --text-primary: #344767;
    --text-secondary: #67748e;
    --text-muted: #8392ab;
    --text-inverse: #ffffff;

    /* Borders */
    --border-color: #e9ecef;
    --border-color-light: #f0f2f5;

    /* Shadows */
    --shadow-sm: 0 2px 9px -5px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 20px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 26px -4px rgba(0, 0, 0, 0.15);
    --shadow-focus: 5px rgba(73, 73, 73, 0.5);

    /* Brand Colors */
    --color-primary: #0076c5;
    --color-primary-hover: #3a44d2;
    --color-primary-light: rgba(225, 78, 202, 0.15);

    --color-secondary: #accadf;
    --color-secondary-hover: #67748e;

    --color-success: #01b574;
    --color-success-hover: #019a61;
    --color-success-light: rgba(1, 181, 116, 0.15);

    --color-danger: #fd5d78;
    --color-danger-hover: #fce93a;
    --color-danger-light: rgba(253, 93, 147, 0.15);

    --color-warning: #fb6340;
    --color-warning-hover: #fa8b24;
    --color-warning-light: rgba(251, 99, 64, 0.15);

    --color-info: #1d8cf8;
    --color-info-hover: #0772db;
    --color-info-light: rgba(29, 140, 248, 0.15);

    /* Bootstrap overrides */
    --bs-body-bg: #f5f6fa;
    --bs-body-color: #67748e;
    --bs-border-color: #e9ecef;
}

/* Dark Theme - Creative Tim Black Dashboard Style */
[data-theme="dark"] {
    /* Backgrounds - Exact Creative Tim Colors */
          

    --text-navs: #fff;
    --modal-bg: #ffffff50;

    --bg-primary: #1e1e2e;
    --bg-secondary: #27293d;
    --bg-tertiary: #2b3553;
    --bg-body: #1e1e2e;
    --bg-card: #27293d;
    --bg-hover: rgba(255, 255, 255, 0.05);

    /* Text Colors */
    --text-primary: rgba(255, 255, 255, 0.87);
    --text-secondary: rgba(255, 255, 255, 0.6);
    --text-muted: rgba(255, 255, 255, 0.4);
    --text-inverse: #1e1e2e;

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.12);
    --border-color-light: rgba(255, 255, 255, 0.06);

    /* Shadows */
    --shadow-sm: 0 2px 12px 0 rgba(0, 0, 0, 0.16);
    --shadow-md: 0 5px 20px 0 rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 30px -5px rgba(0, 0, 0, 0.4);
    --shadow-focus: 5px rgba(56, 56, 56, 0.5);

    /* Brand Colors */
    --color-primary: #004472;
    --color-primary-hover: #3e3bd9;
    --color-primary-light: rgba(225, 78, 202, 0.2);

    --color-secondary: #0076c5;
    --color-secondary-hover: #9aa8bf;

    --color-success: #00f2c3;
    --color-success-hover: #00e4b8;
    --color-success-light: rgba(0, 242, 195, 0.2);

    --color-danger: #fd5d93;
    --color-danger-hover: #fc4082;
    --color-danger-light: rgba(253, 93, 147, 0.2);

    --color-warning: #ff8d72;
    --color-warning-hover: #fffc5e;
    --color-warning-light: rgba(255, 141, 114, 0.2);

    --color-info: #1d8cf8;
    --color-info-hover: #0e7de4;
    --color-info-light: rgba(29, 140, 248, 0.2);

    /* Bootstrap overrides for dark mode */
    --bs-body-bg: #1e1e2e;
    --bs-body-color: rgba(255, 255, 255, 0.6);
    --bs-border-color: rgba(255, 255, 255, 0.12);
}

/* Base Styles - Force Override Bootstrap */
body {
    font-family: var(--font-family-base) !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    color: var(--text-secondary) !important;
    background: var(--bg-body) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Force body background in both themes */
html {
    background: var(--bg-body) !important;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="light"] {
    color-scheme: light;
}

/* Override Bootstrap utility classes */
.bg-light,
.bg-white {
    background: var(--bg-card) !important;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] .bg-white {
    background: var(--bg-card) !important;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: var(--font-weight-medium);
    font-family: var(--font-family-base);
}

h1 { font-size: 1.6875rem; }
h2 { font-size: 1.4375rem; }
h3 { font-size: 1.0625rem; }
h4 { font-size: 0.9375rem; }
h5 { font-size: 0.8125rem; }
h6 { font-size: 0.75rem; }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.15s ease;
}

a:hover {
    color: var(--color-primary-hover);
}

/* Cards - Override Bootstrap */
.card,
.filters-panel,
.table-container,
[class*="card"],
[class*="panel"] {
    background: var(--bg-card) !important;
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color-light) !important;
    transition: var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--border-color-light) !important;
    padding: 15px;
    color: var(--text-primary) !important;
}

.card-body {
    padding: 15px;
    color: var(--text-primary) !important;
}

.card-title {
    color: var(--text-primary) !important;
    font-weight: var(--font-weight-medium);
    margin-bottom: 0.5rem;
}

/* Buttons */
.btn {
    display: inline-block;
    font-weight: var(--font-weight-medium);
    padding: 11px 40px;
    font-size: var(--font-size-base);
    line-height: 1.35em;
    text-align: center;
    vertical-align: middle;
    border-radius: var(--border-radius-md);
    transition: var(--transition-base);
    cursor: pointer;
    border: 1px solid transparent;
}

.btn:focus {
    box-shadow: var(--shadow-focus);
    outline: none;
}

.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--text-inverse);
}

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

.btn-secondary {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--text-inverse);
}

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

.btn-success {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--text-inverse);
}

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

.btn-danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--text-inverse);
}

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

.btn-warning {
    background: var(--color-warning);
    border-color: var(--color-warning);
    color: var(--text-inverse);
}

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

.btn-info {
    background: var(--color-info);
    border-color: var(--color-info);
    color: var(--text-inverse);
}

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

.btn-delete {
    background: var(--color-danger);
    border-color: var(--color-danger);
    color: var(--text-inverse);
}

.btn-delete:hover {
    background: var(--color-danger-hover);
    border-color: var(--color-danger-hover);
}

.btn-cancel {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--text-inverse);
}

.btn-cancel:hover {
    background: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
}

/* Tables - Force Override Bootstrap */
table,
.table {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border-color: var(--border-color-light) !important;
}

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

th,
.table th {
    font-weight: var(--font-weight-medium);
    border-bottom: 2px solid var(--border-color) !important;
    border-color: var(--border-color-light) !important;
    padding: 12px 15px;
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
}

td,
.table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color-light) !important;
    border-color: var(--border-color-light) !important;
    color: var(--text-primary) !important;
}

tr:hover,
.table tr:hover {
    background: var(--bg-hover) !important;
}

tbody,
.table tbody {
    background: var(--bg-card) !important;
}

/* Table striped rows */
.table-striped tbody tr:nth-of-type(odd),
tbody tr:nth-child(odd) {
    background: var(--bg-card) !important;
}

.table-striped tbody tr:nth-of-type(even),
tbody tr:nth-child(even) {
    background: var(--bg-secondary) !important;
}

/* Force override inline styles on table cells */
td[style*="background"],
th[style*="background"] {
    background: var(--bg-card) !important;
}

tr[style*="background"] {
    background: var(--bg-card) !important;
}

tr:hover[style*="background"] {
    background: var(--bg-hover) !important;
}

/* Forms - Force Override Bootstrap */
input,
textarea,
select,
.form-control,
.form-select {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--border-radius-sm);
    padding: 0px 2px;
    font-family: var(--font-family-base);
    transition: var(--transition-base);
}
input:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
    outline: none;
    border-color: var(--color-info) !important;
    background: var(--bg-card) !important;
    box-shadow: 0 0 0 3px var(--color-info-light) !important;
    color: var(--text-primary) !important;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

/* Search inputs */
input[type="search"],
input[type="text"] {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Dark mode specific input overrides */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"] {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--color-info) !important;
}

/* Override any white backgrounds on inputs */
[data-theme="dark"] input[style*="background"],
[data-theme="dark"] textarea[style*="background"],
[data-theme="dark"] select[style*="background"] {
    background: var(--bg-card) !important;
    background-color: var(--bg-card) !important;
}

/* Badges */
.badge {
    display: inline-block;
    padding: 0.35em 0.65em;
    font-size: 0.75rem;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: var(--border-radius-sm);
}

.badge-primary { background: var(--color-primary); color: var(--text-inverse); }
.badge-success { background: var(--color-success); color: var(--text-inverse); }
.badge-danger { background: var(--color-danger); color: var(--text-inverse); }
.badge-warning { background: var(--color-warning); color: var(--text-inverse); }
.badge-info { background: var(--color-info); color: var(--text-inverse); }

/* Modal - Force Override Bootstrap */
.modal-content,
.modal {
    background: var(--modal-bg) !important;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-lg);
    color: var(--text-primary) !important;
}

.modal-header {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color-light) !important;
    border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
}

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

.modal-footer {
    border-top: 1px solid var(--border-color-light) !important;
    background: var(--bg-card) !important;
}

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

/* Dropdown menus */
.dropdown-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--shadow-md);
}

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

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

/* Theme Toggle Button */
.theme-toggle {
    position: fixed;
    top: 100px;
    right: 0px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50% 0% 0% 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: var(--transition-base);
    z-index: 1000;
    color: var(--text-primary);
    font-size: 1.2rem;
}

.theme-toggle:hover {
    box-shadow: var(--shadow-lg);
    transform: scale(1.05);
}

/* Utility Classes */
.text-primary { color: var(--color-primary) !important; }
.text-success { color: var(--color-success) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-info { color: var(--color-info) !important; }
.text-muted { color: var(--text-muted) !important; }

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

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: var(--border-radius-md);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Additional Bootstrap Component Overrides */
.form-label,
label {
    color: var(--text-primary) !important;
}

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

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

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

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

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

/* Alert overrides */
.alert {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* List groups */
.list-group-item {
    background: var(--bg-card) !important;
    border-color: var(--border-color-light) !important;
    color: var(--text-primary) !important;
}

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

/* Pagination */
.pagination .page-link {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.pagination .page-link:hover {
    background: var(--bg-hover) !important;
}

.pagination .page-item.active .page-link {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

/* General text color enforcement */
/* p, span, div {
    color: inherit !important;
} */
[data-theme="dark"] p, [data-theme="dark"] span, [data-theme="dark"] div {
    color: white !important;
}
[data-theme="light"] p, [data-theme="light"] span, [data-theme="light"] div {
    color: black !important;
}
.btn-secondary {
    background: black !important;
    border-color: var(--color-secondary);
    color: white !important;
}
/* Fix span elements in dark mode */
[data-theme="dark"] span:not([class*="badge"]):not([class*="btn"]) {
    color: inherit !important;
}

/* Links should use primary color */
.controls-grid a{
    color: white !important;
}
a {
    color: inherit !important;
}

a:hover {
    color: var(--color-primary-hover);
}

/* Ensure dark mode backgrounds are truly dark */
[data-theme="dark"] *:not(.btn):not([class*="badge"]) {
    border-color: var(--border-color-light);
}

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

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

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

/* Select2 Dropdown Override */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.select2-dropdown {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

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

.select2-results__option--highlighted {
    background: var(--bg-hover) !important;
    color: var(--text-primary) !important;
}

.select2-results__option--selected {
    background: var(--bg-secondary) !important;
}

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

.select2-container--default .select2-selection__rendered {
    color: var(--text-primary) !important;
}

.select2-container--default .select2-selection__placeholder {
    color: var(--text-muted) !important;
}

/* Force all backgrounds in dark mode */
[data-theme="dark"] * {
    scrollbar-color: var(--text-muted) var(--bg-secondary);
}

[data-theme="dark"] *[style*="background: white"],
[data-theme="dark"] *[style*="background:white"],
[data-theme="dark"] *[style*="background: #fff"],
[data-theme="dark"] *[style*="background:#fff"],
[data-theme="dark"] *[style*="background: #ffffff"],
[data-theme="dark"] *[style*="background:#ffffff"] {
    background: var(--bg-card) !important;
}

[data-theme="dark"] *[style*="color: white"],
[data-theme="dark"] *[style*="color:white"],
[data-theme="dark"] *[style*="color: #fff"],
[data-theme="dark"] *[style*="color:#fff"] {
    color: var(--text-primary) !important;
}