/*------------------------------------*/
/*           DARK THEME STYLES        */
/*------------------------------------*/

/* CSS Variables for Dark Theme */
:root {
    --light-bg-primary: #ffffff;
    --light-bg-secondary: #F2F4F7;
    --light-text-primary: #212529;
    --light-text-secondary: #666666;
    --light-border-color: #ccc;
    --light-card-bg: #ffffff;
    --light-header-bg: #ffffff;
    --light-footer-bg: #ffffff;
    --light-input-bg: #ffffff;
    --light-sidebar-gradient-start: #3a84ba;
    --light-sidebar-gradient-end: #8cbee2;
}

[data-theme="dark"] {
    --bg-primary: #1f1f3d;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #2a2a4a;
    --text-primary: #ced1de;
    --text-secondary: #ced1de;
    --border-color: #3a3a5c;
    --card-header: #2a2a4a;
    --card-bg: #1f1f3d;
    --header-bg: #1f1f3d;
    --footer-bg: #1f1f3d;
    --input-bg: #2a2a4a;
    --input-border: #4a4a6a;
    --link-color: #6db3f2;
    --link-hover: #8dc5f7;
    --primary-color: #013378;
    --primary-hover: #0247a6;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --highlight-bg: #2a3a5a;
    --table-stripe-bg: #252545;
    --popup-bg: #2a2a4a;
    --dropdown-bg: #2a2a4a;
    --dropdown-hover: #3a4a6a;
    --dropdown-selected-item: #4a4a6a;
    --scrollbar-track: #1a1a2e;
    --scrollbar-thumb: #3a3a5c;
    --scrollbar-thumb-hover: #4a4a6a;
}

/* Scrollbar Styling for Dark Theme */
/* Webkit browsers (Chrome, Safari, Edge) */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 6px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 6px;
    border: 2px solid var(--scrollbar-track);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

[data-theme="dark"] ::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/* Firefox scrollbar styling */
[data-theme="dark"] * {
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

[data-theme="dark"] .intro {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: #5ca6dc;
    background-image: linear-gradient(to right, #35355C, #1f1f3d);
}

/* Specific scrollable elements */
[data-theme="dark"] .card,
[data-theme="dark"] .tui-select-box-dropdown,
[data-theme="dark"] .searchBox-items,
[data-theme="dark"] .ol-popup,
[data-theme="dark"] #divIntelligencePromptResponse,
[data-theme="dark"] .grid-stack-item-content,
[data-theme="dark"] .navbar-collapse {
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

[data-theme="dark"] .card::-webkit-scrollbar,
[data-theme="dark"] .tui-select-box-dropdown::-webkit-scrollbar,
[data-theme="dark"] .searchBox-items::-webkit-scrollbar,
[data-theme="dark"] .ol-popup::-webkit-scrollbar,
[data-theme="dark"] #divIntelligencePromptResponse::-webkit-scrollbar,
[data-theme="dark"] .grid-stack-item-content::-webkit-scrollbar,
[data-theme="dark"] .navbar-collapse::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] .card::-webkit-scrollbar-track,
[data-theme="dark"] .tui-select-box-dropdown::-webkit-scrollbar-track,
[data-theme="dark"] .searchBox-items::-webkit-scrollbar-track,
[data-theme="dark"] .ol-popup::-webkit-scrollbar-track,
[data-theme="dark"] #divIntelligencePromptResponse::-webkit-scrollbar-track,
[data-theme="dark"] .grid-stack-item-content::-webkit-scrollbar-track,
[data-theme="dark"] .navbar-collapse::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 5px;
}

[data-theme="dark"] .card::-webkit-scrollbar-thumb,
[data-theme="dark"] .tui-select-box-dropdown::-webkit-scrollbar-thumb,
[data-theme="dark"] .searchBox-items::-webkit-scrollbar-thumb,
[data-theme="dark"] .ol-popup::-webkit-scrollbar-thumb,
[data-theme="dark"] #divIntelligencePromptResponse::-webkit-scrollbar-thumb,
[data-theme="dark"] .grid-stack-item-content::-webkit-scrollbar-thumb,
[data-theme="dark"] .navbar-collapse::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

[data-theme="dark"] .card::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .tui-select-box-dropdown::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .searchBox-items::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .ol-popup::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] #divIntelligencePromptResponse::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .grid-stack-item-content::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .navbar-collapse::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* TUI Grid scrollbar */
[data-theme="dark"] .tui-grid-body-area::-webkit-scrollbar,
[data-theme="dark"] .tui-grid-rside-area::-webkit-scrollbar,
[data-theme="dark"] .tui-grid-lside-area::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

[data-theme="dark"] .tui-grid-body-area::-webkit-scrollbar-track,
[data-theme="dark"] .tui-grid-rside-area::-webkit-scrollbar-track,
[data-theme="dark"] .tui-grid-lside-area::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

[data-theme="dark"] .tui-grid-body-area::-webkit-scrollbar-thumb,
[data-theme="dark"] .tui-grid-rside-area::-webkit-scrollbar-thumb,
[data-theme="dark"] .tui-grid-lside-area::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 5px;
}

[data-theme="dark"] .tui-grid-body-area::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .tui-grid-rside-area::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] .tui-grid-lside-area::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

[data-theme="dark"] .tui-grid-body-area,
[data-theme="dark"] .tui-grid-rside-area,
[data-theme="dark"] .tui-grid-lside-area {
    scrollbar-width: auto;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

[data-theme="dark"] .tui-grid-scrollbar-frozen-border {
    background-color: var(--border-color);
    border-color: var(--border-color);
}

.tui-grid-layer-state {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

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

/* Header and Navigation */
[data-theme="dark"] header nav.navbar {
    background-color: var(--header-bg) !important;
    border-bottom-color: var(--border-color) !important;
}

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

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

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

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

[data-theme="dark"] .navbar-toggler-icon {
    filter: invert(1);
}

/* Footer */
[data-theme="dark"] footer {
    background-color: var(--footer-bg) !important;
    color: var(--text-secondary);
}

/* Main Container */
[data-theme="dark"] .container {
    background-color: var(--bg-primary);
}

[data-theme="dark"] #divMainContent {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .container-landing-page {
    background-image: url('/img/fs-bg-sm-dark.png');
}

[data-theme="dark"] .container-auth {
    background-image: url('/img/fs-bg-sm-dark.png');
}

/* Links */
[data-theme="dark"] a {
    color: var(--link-color);
}

[data-theme="dark"] a:hover {
    color: var(--link-hover);
}

/* Forms and Inputs */
[data-theme="dark"] input,
[data-theme="dark"] .form-control {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

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

[data-theme="dark"] input[readonly] {
    background-color: var(--bg-tertiary) !important;
}

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

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

[data-theme="dark"] select {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

[data-theme="dark"] .form-floating > label {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 10px!important;
}

[data-theme="dark"] .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-select ~ label::after {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

[data-theme="dark"] .form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    color: var(--text-primary);
}

[data-theme="dark"] .form-floating > .form-control:disabled ~ label::after,
[data-theme="dark"] .form-floating > :disabled ~ label::after {
    background-color: transparent !important;
}

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

/* Buttons */
[data-theme="dark"] .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-hover);
    color: #eee;
}

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

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

[data-theme="dark"] .btn-link:hover {
    color: var(--link-hover);
}

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

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

/* Tables */
[data-theme="dark"] #tblDetailView {
    color: var(--text-primary);
}

[data-theme="dark"] #tblDetailView th,
[data-theme="dark"] #tblDetailView td {
    border-color: var(--border-color);
}

[data-theme="dark"] #tblDetailView tr:nth-child(even) {
    background-color: var(--table-stripe-bg);
}

[data-theme="dark"] #tblDetailView tr:nth-child(odd) {
    background-color: var(--card-bg);
}

[data-theme="dark"] #tblDetailView th {
    background-color: var(--bg-tertiary);
}

/* Sidebar */
[data-theme="dark"] #divSidebar {
    background: linear-gradient(to right, #35355C, #1f1f3d);
}

[data-theme="dark"] .sidebarIcon {
    color: #eee;
}

[data-theme="dark"] .sidebarMenuItem {
    color: #eee;
}

[data-theme="dark"] .sidebarMenuItemSelected .sidebarLabel {
    color: #eee;
}

[data-theme="dark"] .sidebarMenuItemSelected:hover .sidebarLabel {
    color: #eee;
}

/* Grid Stack Panels */
[data-theme="dark"] .grid-stack,
[data-theme="dark"] .grid-stack.grid-stack-static {
    background: var(--bg-secondary);
}

[data-theme="dark"] .sidebar > .grid-stack-item,
[data-theme="dark"] .grid-stack-item-content {
    background-color: var(--card-bg);
    box-shadow: 10px 10px 15px 0px var(--shadow-color);
}

/* Popups */
[data-theme="dark"] .ol-popup {
    background-color: var(--popup-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .ol-popup:after {
    border-top-color: var(--popup-bg);
}

[data-theme="dark"] .ol-popup:before {
    border-top-color: var(--border-color);
}

/* Dropdowns */
[data-theme="dark"] .tui-select-box-input {
    background-color: var(--input-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--input-border) !important;
}

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

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

[data-theme="dark"] .tui-select-box-item:hover,
[data-theme="dark"] .tui-select-box-highlight {
    background-color: var(--dropdown-hover) !important;
}

[data-theme="dark"] .tui-select-box-selected {
    background: var(--dropdown-selected-item);
}

[data-theme="dark"] .tui-select-box-icon {
    display: block;
    float: right;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAECAYAAACHtL/sAAAAAXNSR0IB2cksfwAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB+kMGxAHFhjEXZMAAABDSURBVBjTlY7BCcAgEATn0oB2OTVdl1pB8lEJgYDOb5cd2MjMmx/U+HZjX9UOEK9yV55UtV8zHMoAbT0YgwK0TXnxAF6oHdAU6FUVAAAAAElFTkSuQmCC) left center no-repeat;
    width: 7px;
    overflow: hidden;
    text-indent: 100%;
}

/* Search Box */
[data-theme="dark"] .searchBox-items {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
}

[data-theme="dark"] .searchBox-items div {
    background-color: var(--dropdown-bg);
    border-bottom-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .searchBox-items div:hover {
    background-color: var(--dropdown-hover);
}

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

/* Action Icons */
[data-theme="dark"] .action-icon:hover {
    background-color: var(--highlight-bg);
}

[data-theme="dark"] .action-icon-lt-wide:hover {
    background-color: var(--highlight-bg);
}

[data-theme="dark"] .action-icon-text {
    color: var(--text-secondary);
}

/* Filter Tags */
[data-theme="dark"] .filter-tag {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .filter-search-item-field-tag {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    color: #eee;
    font-weight: bold;
    padding: 5px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 10px;
    margin-right: 10px;
}

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

/* Skeleton Loaders */
[data-theme="dark"] .skeleton-single-block {
    --c-bg: #2a2a4a !important;
    --bg: #3a3a5a !important;
    --shine: #4a4a6a !important;
}

[data-theme="dark"] .skeleton-image-block {
    --c-bg: #2a2a4a !important;
    --bg: #3a3a5a !important;
    --shine: #4a4a6a !important;
}

[data-theme="dark"] .skeleton-list-block {
    --c-bg: #2a2a4a !important;
    --bg: #3a3a5a !important;
    --shine: #4a4a6a !important;
}

/* Auth Containers */
[data-theme="dark"] .container-auth {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .inner-container-auth {
    background-color: var(--card-bg);
    box-shadow: 20px 40px 40px 0px var(--shadow-color);
}

[data-theme="dark"] .container-landing-page {
    background-color: var(--bg-secondary);
}

/* Admin Content */
[data-theme="dark"] #divAdminMainContent {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .content-pane-shaded {
    background-color: var(--bg-secondary);
}

/* Tabs */
[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-primary);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    color: white!important;
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--border-color);
}

/* Disabled nav-link styling (dark theme) */
[data-theme="dark"] .nav-link.disabled,
[data-theme="dark"] .nav-pills .nav-link.disabled,
[data-theme="dark"] .nav-tabs .nav-link.disabled {
    color: #5a5a7a !important;
    background-color: #2a2a4a !important;
    cursor: not-allowed !important;
    opacity: 0.5;
    pointer-events: none;
}

[data-theme="dark"] .nav-link.disabled:hover,
[data-theme="dark"] .nav-pills .nav-link.disabled:hover,
[data-theme="dark"] .nav-tabs .nav-link.disabled:hover {
    color: #5a5a7a !important;
    background-color: #2a2a4a !important;
}

[data-theme="dark"] .nav-pills .nav-link {
    color: var(--text-primary);
}

/* Alerts */
[data-theme="dark"] .alert-primary {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Map Controls */
[data-theme="dark"] #divMapLegendContent,
[data-theme="dark"] #divMapLayersContent {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Intelligence Panel */
[data-theme="dark"] #divIntelligencePromptResponse {
    color: var(--text-primary);
}

[data-theme="dark"] #divIntelligencePromptResponse table,
[data-theme="dark"] #divIntelligencePromptResponse th,
[data-theme="dark"] #divIntelligencePromptResponse td {
    border-color: var(--border-color);
}

[data-theme="dark"] #divIntelligencePromptResponse table {
    background-color: var(--card-bg);
}

[data-theme="dark"] #divIntelligencePromptResponse th {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .divIntelligencePromptResponseContent {
    background-color: var(--bg-tertiary);
    border: 2px solid var(--border-color);
}

/* Data Grid */
[data-theme="dark"] .tui-grid-container {
    background-color: var(--card-bg);
}

[data-theme="dark"] .tui-grid-border-line-top,
[data-theme="dark"] .tui-grid-border-line-bottom,
[data-theme="dark"] .tui-grid-border-line-left,
[data-theme="dark"] .tui-grid-border-line-right {
    background-color: var(--border-color);
}

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

[data-theme="dark"] .tui-grid-row-even > td {
    background-color: var(--bg-primary);
}

[data-theme="dark"] .tui-grid-cell-header {
    background-color: var(--bg-tertiary);
}

[data-theme="dark"] .tui-grid-header-area {
    border-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-content-area {
    border-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-scrollbar-right-top {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-scrollbar-right-bottom {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-border-line-top {
    border-top-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-border-line-bottom {
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-scrollbar-y-inner-border {
    background-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-body-area {
    background-color: var(--bg-secondary);
}

[data-theme="dark"] .tui-grid-scrollbar-left-bottom {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .tui-grid-filter-container {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-filter-dropdown {
    border-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-cell-header.tui-grid-cell-selected {
    background-color: var(--border-color);
}

[data-theme="dark"] .tui-grid-cell-row-header.tui-grid-cell-selected {
    background-color: var(--bg-tertiary);
}

/* Toast Notifications - keep distinct colors for visibility */
[data-theme="dark"] .toast-success {
    background: #1e4620;
    color: #90ee90;
}

[data-theme="dark"] .toast-error {
    background: #4a1e1e;
    color: #ff9090;
}

[data-theme="dark"] .toast-close {
    color: #eee;
}

/* Bootstrap Overrides for Dark Theme */
[data-theme="dark"] .bg-white {
    background-color: var(--header-bg) !important;
}

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

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

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

[data-theme="dark"] .box-shadow {
    box-shadow: 0 .25rem .75rem var(--shadow-color) !important;
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover i {
    transform: rotate(15deg);
}

/* Sun icon for dark mode */
.theme-icon-sun {
    color: #ffc107;
}

/* Moon icon for light mode */
.theme-icon-moon {
    color: #6c757d;
}

[data-theme="dark"] .theme-icon-moon {
    color: #a0a0a0;
}

/* Smooth transition for theme change */
body,
.navbar,
.container,
.card,
input,
.form-control,
.form-select,
footer,
.tui-select-box-input,
.tui-select-box-dropdown,
#divChart {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ECharts Dark Theme Styles */
[data-theme="dark"] #divChart {
    background-color: var(--card-bg);
}

/* Toast UI Chart Dark Theme Styles (if used) */
[data-theme="dark"] .toastui-chart-wrapper {
    background-color: var(--card-bg);
}

[data-theme="dark"] .toastui-chart-export-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

[data-theme="dark"] .toastui-chart-export-menu-title {
    color: var(--text-primary);
}

[data-theme="dark"] .toastui-chart-export-menu-btn {
    color: var(--text-primary);
}

[data-theme="dark"] .toastui-chart-export-menu-btn:hover {
    background-color: var(--dropdown-hover);
}

[data-theme="dark"] .toastui-chart-tooltip {
    background-color: var(--popup-bg) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .toastui-chart-tooltip-category {
    color: var(--text-primary);
    border-bottom-color: var(--border-color);
}

[data-theme="dark"] .toastui-chart-series-name,
[data-theme="dark"] .toastui-chart-series-value,
[data-theme="dark"] .toastui-chart-name {
    color: var(--text-primary);
}

/* OpenLayers Map Dark Theme - Base Layer Only */
[data-theme="dark"] .ol-layer-dark-theme {
    filter: brightness(0.9) invert(1) hue-rotate(220deg);
}

/* Toast UI datagrid Dark Theme Styles */
[data-theme="dark"] .datagrid-cell-edited {
    background-color: #692333 !important;
}

[data-theme="dark"] .datagrid-highlight-row {
    background-color: #3a3a5c !important;
}

[data-theme="dark"] .tui-grid-cell-editable {
    color: green !important;
    font-weight: 500 !important;
}

[data-theme="dark"] .datagrid-cell-updated {
    background-color: #203b29 !important;
}

[data-theme="dark"] .tui-grid-layer-editing {
    background-color: #3a3a5c !important;
}

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

/* AI Chat Modal Dark Theme */
[data-theme="dark"] .ai-chat-modal-header {
    background-color: var(--card-header);
}

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

[data-theme="dark"] .ai-chat-resize-se::after {
    border-color: transparent transparent var(--border-color) transparent;
}

[data-theme="dark"] .ai-chat-modal-btn {
    color: var(--text-primary);
}

[data-theme="dark"] .ai-chat-modal-header .btn-close {
    filter: brightness(0) invert(0.7);
}