/* ===== Global dark mode overrides for custom-styled elements ===== */

.logo-dark { display: none; }
[data-bs-theme="dark"] .logo-light { display: none; }
[data-bs-theme="dark"] .logo-dark { display: inline; }

[data-bs-theme="dark"] {
    /* General backgrounds and text */
    --custom-bg: #1a1d21;
    --custom-bg-surface: #212529;
    --custom-bg-surface-alt: #2b3035;
    --custom-border: #495057;
    --custom-text: #dee2e6;
    --custom-text-muted: #adb5bd;
}

/* Body and main containers */
[data-bs-theme="dark"] body {
    background-color: var(--custom-bg) !important;
    color: var(--custom-text) !important;
}

/* Folder tree / sidebar panels */
[data-bs-theme="dark"] .wf-tree,
[data-bs-theme="dark"] .wf-items,
[data-bs-theme="dark"] aside {
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] .wf-tree a,
[data-bs-theme="dark"] .folder-link {
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] .folder-link:hover,
[data-bs-theme="dark"] .wf-tree a:hover {
    color: #fff !important;
}

[data-bs-theme="dark"] .folder-link.active {
    color: #6ea8fe !important;
}

/* Workflow Editor */
[data-bs-theme="dark"] .workflow-root {
    background-color: var(--custom-bg) !important;
}

[data-bs-theme="dark"] .title-bar {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] .left-bar,
[data-bs-theme="dark"] .right-bar,
[data-bs-theme="dark"] .right-panel,
[data-bs-theme="dark"] .sidebar,
[data-bs-theme="dark"] [class*="panel"] {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] #canvas,
[data-bs-theme="dark"] .canvas-container,
[data-bs-theme="dark"] #stage {
    background-color: #1e2227 !important;
}

[data-bs-theme="dark"] .node {
    background-color: var(--custom-bg-surface-alt) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] .node-header {
    background-color: #343a40 !important;
    color: #fff !important;
}

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

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

/* Form controls */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] textarea {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] .form-floating > label {
    color: var(--custom-text-muted) !important;
}

/* Tables */
[data-bs-theme="dark"] .table {
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] .table thead th {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

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

[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--custom-bg-surface-alt) !important;
}

/* DataTables */
[data-bs-theme="dark"] .dataTables_wrapper,
[data-bs-theme="dark"] table.dataTable {
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] table.dataTable thead th,
[data-bs-theme="dark"] table.dataTable thead td {
    background-color: var(--custom-bg-surface) !important;
    color: var(--custom-text) !important;
    border-color: var(--custom-border) !important;
}

[data-bs-theme="dark"] table.dataTable tbody tr {
    background-color: var(--custom-bg) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] table.dataTable tbody tr:hover {
    background-color: var(--custom-bg-surface-alt) !important;
}

[data-bs-theme="dark"] .dataTables_info,
[data-bs-theme="dark"] .dataTables_length,
[data-bs-theme="dark"] .dataTables_filter {
    color: var(--custom-text-muted) !important;
}

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

/* Cards and panels */
[data-bs-theme="dark"] .card {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

/* Dialogs / Modals */
[data-bs-theme="dark"] dialog,
[data-bs-theme="dark"] .modal-content {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

/* Links */
[data-bs-theme="dark"] a {
    color: #6ea8fe;
}

[data-bs-theme="dark"] a:hover {
    color: #9ec5fe;
}

/* Dropdown menus */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
}

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

[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: var(--custom-bg-surface-alt) !important;
    color: #fff !important;
}

/* Misc */
[data-bs-theme="dark"] .container-fluid {
    color: var(--custom-text);
}

[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 {
    color: var(--custom-text) !important;
}

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

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

[data-bs-theme="dark"] pre {
    color: var(--custom-text) !important;
}

/* Breadcrumbs */
[data-bs-theme="dark"] .breadcrumb-item a {
    color: #6ea8fe !important;
}

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

/* Workflow Runs context viewer */
[data-bs-theme="dark"] .ctx-card {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
}

[data-bs-theme="dark"] .ctx-head,
[data-bs-theme="dark"] .ctx-toolbar {
    border-color: var(--custom-border) !important;
}

[data-bs-theme="dark"] .ctx-search input,
[data-bs-theme="dark"] .ctx-jump input {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] .ctx-btn {
    background-color: var(--custom-bg-surface-alt) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] .ctx-gutter {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text-muted) !important;
}

[data-bs-theme="dark"] .ctx-content {
    background-color: var(--custom-bg) !important;
}

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

[data-bs-theme="dark"] .cfg-input {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

/* ApiService / Index pages with inline styles */
[data-bs-theme="dark"] [style*="background-color: #fff"],
[data-bs-theme="dark"] [style*="background-color:#fff"],
[data-bs-theme="dark"] [style*="background:#fff"],
[data-bs-theme="dark"] [style*="background: #fff"],
[data-bs-theme="dark"] [style*="background-color: white"],
[data-bs-theme="dark"] [style*="background: white"] {
    background-color: var(--custom-bg-surface) !important;
    color: var(--custom-text) !important;
}

/* Config / cfg sections in workflow editor */
[data-bs-theme="dark"] .cfg-section {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

/* Buttons - outline variants */
[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--custom-text) !important;
    border-color: var(--custom-border) !important;
}

[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: var(--custom-bg-surface-alt) !important;
    color: #fff !important;
}

/* ===== DataTables Editor (DTE) dark mode ===== */
[data-bs-theme="dark"] div.DTED_Lightbox_Background {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

[data-bs-theme="dark"] div.DTED_Lightbox_Wrapper div.DTED_Lightbox_Content div.DTE {
    background: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
}

[data-bs-theme="dark"] div.DTED_Lightbox_Content div.DTE div.DTE_Header {
    background-color: var(--custom-bg-surface-alt) !important;
    color: var(--custom-text) !important;
    border-color: var(--custom-border) !important;
}

[data-bs-theme="dark"] div.DTED_Lightbox_Content div.DTE div.DTE_Body,
[data-bs-theme="dark"] div.DTED_Lightbox_Content div.DTE div.DTE_Body_Content {
    background: var(--custom-bg-surface) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] div.DTED_Lightbox_Content div.DTE div.DTE_Footer {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
}

[data-bs-theme="dark"] div.DTE label {
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] div.DTE div.DTE_Field input,
[data-bs-theme="dark"] div.DTE div.DTE_Field select,
[data-bs-theme="dark"] div.DTE div.DTE_Field textarea {
    background-color: var(--custom-bg-surface) !important;
    border-color: var(--custom-border) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] div.DTED_Lightbox_Content div.DTED_Lightbox_Close:after {
    color: var(--custom-text-muted) !important;
}

[data-bs-theme="dark"] div.modal .DTE {
    background-color: var(--custom-bg-surface) !important;
    color: var(--custom-text) !important;
}

[data-bs-theme="dark"] .modal-content .DTE_Header,
[data-bs-theme="dark"] .modal-content .DTE_Body,
[data-bs-theme="dark"] .modal-content .DTE_Footer {
    background-color: var(--custom-bg-surface) !important;
    color: var(--custom-text) !important;
}

/* Dark mode: when a DTE Editor field row is highlighted (hover or focused),
   DTE applies a light background to that single row. Force the label text dark
   so it stays readable against that highlight — text-only fix, no background change. */
[data-bs-theme="dark"] div.DTE div.DTE_Field:hover label,
[data-bs-theme="dark"] div.DTE div.DTE_Field:focus-within label {
    color: #212529 !important;
}