:root {
    --bg-body: #1a1a2e;
    --bg-card: #16213e;
    --border-color: #0f3460;
    --text-main: #e2e2e2;
    --text-muted: #a0a0a0;
    --navbar-bg: #16213e;
    --table-color: #e2e2e2;
    --input-bg: #0f3460;
    --input-border: #2a2c45;
    --dropdown-bg: #16213e;
    --dropdown-hover: #0f3460;
}

/* Base Styles for Parameter Table (Moved from inline) */
.parameter-table {
    width: 100%;
    border-collapse: collapse;
}

.parameter-table th,
.parameter-table td {
    border: 1px solid #dee2e6;
    padding: 8px;
    text-align: left;
}

.parameter-table th {
    background-color: #e9ecef;
    /* Light mode default */
    color: #5a5c69;
}

body.light-mode {
    --bg-body: #f8f9fc;
    --bg-card: #fff;
    --border-color: #e3e6f0;
    --text-main: #5a5c69;
    --text-muted: #858796;
    --navbar-bg: #fff;
    --table-color: #5a5c69;
    --input-bg: #fff;
    --input-border: #d1d3e2;
    --dropdown-bg: #fff;
    --dropdown-hover: #eaecf4;
}

body {
    background-color: var(--bg-body);
    color: var(--text-main);
    transition: background-color 0.3s, color 0.3s;
}

body:not(.light-mode) {
    color-scheme: dark;
}

body.light-mode {
    color-scheme: light;
}

#content-wrapper {
    background-color: var(--bg-body) !important;
    transition: background-color 0.3s;
}

.card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    transition: all 0.3s;
}

.card-header {
    background-color: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: all 0.3s;
}

.sticky-footer {
    background-color: var(--navbar-bg) !important;
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    transition: all 0.3s;
}

/* Text Utilities */
.text-gray-800 {
    color: var(--text-main) !important;
}

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

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

/* Dynamic Text Colors */
.text-gray-300 {
    color: var(--text-muted) !important;
}

/* Overrides for Light Mode */
body.light-mode .text-white {
    color: var(--text-main) !important;
}

body.light-mode .navbar-nav .btn-outline-light {
    color: #3a3b45;
    border-color: #3a3b45;
}

body.light-mode .navbar-nav .btn-outline-light:hover {
    background-color: #3a3b45;
    color: #fff;
}

/* Table Overrides */
.table {
    color: var(--table-color);
}

.table thead th {
    border-bottom: 2px solid var(--border-color);
    color: #4e73df;
}

.table td,
.table th {
    border-top: 1px solid var(--border-color);
}

body:not(.light-mode) .table-bordered {
    border-color: var(--border-color);
}

body:not(.light-mode) .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.05);
}

body:not(.light-mode) .table-hover tbody tr:hover {
    color: var(--text-main);
    background-color: rgba(255, 255, 255, 0.075);
}

.navbar {
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s;
}

/* Dark Mode Overrides for Specific Elements */
body:not(.light-mode) .bg-white {
    background-color: var(--bg-card) !important;
}

body:not(.light-mode) .dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
    color: var(--text-main);
}

body:not(.light-mode) .dropdown-item {
    color: var(--text-main);
}

body:not(.light-mode) .dropdown-item:hover,
body:not(.light-mode) .dropdown-item:focus {
    background-color: var(--dropdown-hover);
    color: var(--text-main);
}

body:not(.light-mode) .modal-content {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

body:not(.light-mode) .close {
    color: var(--text-main);
    text-shadow: none;
    opacity: 0.7;
}

body:not(.light-mode) .close:hover {
    opacity: 1;
}

/* Modal Body & Footer Overrides */
body:not(.light-mode) .modal-body,
body:not(.light-mode) .modal-footer {
    background-color: var(--bg-card);
    color: var(--text-main);
}

body:not(.light-mode) .modal-body strong,
body:not(.light-mode) .modal-body label {
    color: var(--text-main);
}

body:not(.light-mode) .modal-body p {
    color: var(--text-muted);
}

/* Fix Table inside Modal */
body:not(.light-mode) .parameter-table th {
    background-color: var(--dropdown-hover);
    color: var(--text-main);
    border-color: var(--border-color);
}

body:not(.light-mode) .parameter-table td {
    color: var(--text-main);
    border-color: var(--border-color);
}

/* Modal Header Override */
body:not(.light-mode) .modal-header {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-color);
    color: var(--text-main);
}

/* Forms */
body:not(.light-mode) .form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-main);
}

body:not(.light-mode) .form-control:focus {
    background-color: var(--input-bg);
    color: var(--text-main);
    border-color: #4e73df;
}

body:not(.light-mode) .form-control[readonly],
body:not(.light-mode) .form-control[disabled] {
    background-color: var(--bg-body);
    /* Darker for readonly */
    color: var(--text-muted);
    opacity: 1;
}

body:not(.light-mode) select.form-control option {
    background-color: var(--input-bg);
    color: var(--text-main);
}

body:not(.light-mode) .input-group-text {
    background-color: var(--bg-card);
    border-color: var(--input-border);
    color: var(--text-main);
}

/* Sidebar Dark Mode Override */
body:not(.light-mode) .sidebar.bg-gradient-primary {
    background-color: var(--navbar-bg);
    background-image: none;
    border-right: 1px solid var(--border-color);
}

/* DataTables Specifics */
body:not(.light-mode) .dataTables_wrapper .dataTables_length select,
body:not(.light-mode) .dataTables_wrapper .dataTables_filter input {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-main);
}

body:not(.light-mode) .page-item .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-main);
}

body:not(.light-mode) .page-item.disabled .page-link {
    background-color: var(--bg-body);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Sidebar Sub-menu Contrast Fix */
body:not(.light-mode) .collapse-inner {
    background-color: var(--bg-card) !important;
}

body:not(.light-mode) .collapse-item {
    color: var(--text-main) !important;
}

body:not(.light-mode) .collapse-item:hover {
    background-color: var(--dropdown-hover) !important;
    color: #fff !important;
}

body:not(.light-mode) .collapse-header {
    color: var(--text-muted) !important;
}

/* Nav Tabs Contrast Fix */
body:not(.light-mode) .nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

body:not(.light-mode) .nav-tabs .nav-link {
    color: var(--text-muted);
}

body:not(.light-mode) .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
    background-color: var(--dropdown-hover);
    color: var(--text-main);
}

body:not(.light-mode) .nav-tabs .nav-link.active {
    color: var(--text-main);
    background-color: var(--bg-card);
    border-color: var(--border-color) var(--border-color) var(--bg-card);
}

/* Force override for cff-user.php specific inline styles */
body:not(.light-mode) .feedback-form,
body:not(.light-mode) .filter-section {
    background-color: var(--bg-card) !important;
    color: var(--text-main) !important;
    border: 1px solid var(--border-color);
}

body:not(.light-mode) .date-range {
    background: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-main) !important;
}

/* Global bg-light override for Dark Mode */
body:not(.light-mode) .bg-light {
    background-color: var(--dropdown-hover) !important;
    color: var(--text-main) !important;
}

/* Override bg-light for form controls in dark mode */
body:not(.light-mode) .form-control.bg-light {
    background-color: var(--bg-body) !important;
    color: var(--text-muted) !important;
    border-color: var(--input-border) !important;
}

body.dark-mode {
    background-color: #121212;
    color: #e0e0e0;
}