/* Core Brand Colors (Constant across themes) */
:root {
    --primary-color: #ff1483;
    --secondary-color: #ff1483;
    --tertiary-color: #4f9df6;
    --success-color: #0abb87;
    --warning-color: #ffb822;
    --danger-color: #fd397a;
    --info-color: #5578eb;
}

/* Light Theme Variables */
:root, :root[data-theme="light"] {
    --bg-body: #f4f6fa;
    --bg-card: #ffffff;
    --bg-card-hover: #f8f9fc;
    --text-main: #2b3445;
    --text-muted-dynamic: #7d879c;
    --border-color: #e3e9ef;
    --input-bg: #ffffff;
    --input-border: #d0d5dd;
    --input-text: #2b3445;
    --sidebar-bg: #ffffff;
    --header-bg: #ffffff;
    --table-header-bg: #f8f9fc;
    --table-border: #e3e9ef;
    --btn-secondary-bg: #f3f4f6;
    --btn-secondary-text: #4b5563;
    --hover-bg: #f3f4f6;
}

/* Dark Theme Variables */
:root[data-theme="dark"] {
    --bg-body: #121A2E;
    --bg-card: #1a2540;
    --bg-card-hover: #223055;
    --text-main: #ffffff;
    --text-muted-dynamic: #a0a9c0;
    --border-color: #2d3b59;
    --input-bg: #1a2540;
    --input-border: #2d3b59;
    --input-text: #ffffff;
    --sidebar-bg: #162036;
    --header-bg: #162036;
    --table-header-bg: #1f2b47;
    --table-border: #2d3b59;
    --btn-secondary-bg: #2d3b59;
    --btn-secondary-text: #a0a9c0;
    --hover-bg: #223055;
}

/* System Theme Fallback */
@media (prefers-color-scheme: dark) {
    :root[data-theme="system"] {
        --bg-body: #121A2E;
        --bg-card: #1a2540;
        --bg-card-hover: #223055;
        --text-main: #ffffff;
        --text-muted-dynamic: #a0a9c0;
        --border-color: #2d3b59;
        --input-bg: #1a2540;
        --input-border: #2d3b59;
        --input-text: #ffffff;
        --sidebar-bg: #162036;
        --header-bg: #162036;
        --table-header-bg: #1f2b47;
        --table-border: #2d3b59;
        --btn-secondary-bg: #2d3b59;
        --btn-secondary-text: #a0a9c0;
        --hover-bg: #223055;
    }
}

/* Base Theme Classes */
body {
    background-color: var(--bg-body) !important;
    color: var(--text-main) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.card {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

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

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

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

.table {
    color: var(--text-main) !important;
    border-color: var(--table-border) !important;
}

.table th {
    background-color: var(--table-header-bg) !important;
    border-color: var(--table-border) !important;
    color: var(--text-main) !important;
}

.table td {
    background-color: var(--bg-card) !important;
    border-color: var(--table-border) !important;
    color: var(--text-main) !important;
}

.modal-content {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important;
}

.modal-header, .modal-footer {
    border-color: var(--border-color) !important;
}

/* Theme Utilities */
.bg-body-theme { background-color: var(--bg-body) !important; }
.bg-card-theme { background-color: var(--bg-card) !important; }
.text-main-theme { color: var(--text-main) !important; }
.border-theme { border-color: var(--border-color) !important; }

/* Dashboard/Sidebar specific overrides */
#sidebar { background-color: var(--sidebar-bg) !important; border-right: 1px solid var(--border-color); }
.top-header { background-color: var(--header-bg) !important; border-bottom: 1px solid var(--border-color); }

.list-group-item {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border-color: var(--border-color) !important;
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}
.dropdown-item {
    color: var(--text-main) !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--hover-bg) !important;
    color: var(--text-main) !important;
}
.dropdown-divider {
    border-top: 1px solid var(--border-color) !important;
}

/* Secondary & Outline Buttons */
.btn-secondary, .btn-light, .btn-outline-secondary {
    background-color: var(--btn-secondary-bg) !important;
    color: var(--btn-secondary-text) !important;
    border: 1px solid var(--border-color) !important;
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover {
    background-color: var(--hover-bg) !important;
    color: var(--text-main) !important;
    border-color: var(--text-muted-dynamic) !important;
}

/* Ensure inputs have visible borders */
.form-control, .form-select {
    border-width: 1px !important;
    border-style: solid !important;
}

/* Fix for native select dropdown options */
select, select.form-control, select.form-select, option {
    background-color: var(--input-bg) !important;
    color: var(--text-main) !important;
}