/* ═══════════════════════════════════════════════════════════════════════
   Kodda Platform — Semantic Theme Variables
   Dark mode is the default. Light mode activates via [data-theme="light"].
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Surfaces ──────────────────────────────────────────────────────── */
    --th-bg-primary:        #1E2327;
    --th-bg-surface:        #22272B;
    --th-bg-card:           #2D333A;
    --th-bg-elevated:       #262B30;
    --th-bg-input:          #22272B;
    --th-bg-input-disabled: #2D333A;
    --th-bg-sidebar:        #1E2327;
    --th-bg-console:        #000000;

    /* ── Interactive surfaces ──────────────────────────────────────────── */
    --th-bg-hover:          rgba(255, 255, 255, 0.05);
    --th-bg-active:         rgba(255, 255, 255, 0.1);
    --th-bg-selected:       #2a4a5e;
    --th-bg-highlight:      #384350;

    /* ── Borders ───────────────────────────────────────────────────────── */
    --th-border:            #4B5563;
    --th-border-subtle:     rgba(255, 255, 255, 0.1);
    --th-border-strong:     #3D444B;
    --th-border-input:      #4B5563;
    --th-border-focus:      #6B7280;
    --th-border-accent:     #80afc3;
    --th-border-accent-alt: #9982c6;

    /* ── Text ──────────────────────────────────────────────────────────── */
    --th-text:              #D1D5DB;
    --th-text-heading:      #E2E8F0;
    --th-text-muted:        #8B9EB3;
    --th-text-dim:          #6C757D;
    --th-text-disabled:     #9CA3AF;
    --th-text-on-accent:    #ffffff;
    --th-text-link:         #58A6FF;
    --th-text-link-hover:   #90BFFF;

    /* ── Accent — Enterprise Green ────────────────────────────────────── */
    --th-accent:            #3CA368;
    --th-accent-hover:      #48B377;
    --th-accent-active:     #348E59;
    --th-accent-text:       #3CA368;
    --th-accent-bg:         #1E3A2A;
    --th-accent-muted:      #2D6B47;

    /* ── Danger ────────────────────────────────────────────────────────── */
    --th-danger:            #E28C7E;
    --th-danger-bg:         rgba(226, 140, 126, 0.1);
    --th-danger-border:     rgba(226, 140, 126, 0.3);
    --th-danger-strong:     #3A2020;

    /* ── Warning ───────────────────────────────────────────────────────── */
    --th-warning:           #F59E0B;
    --th-warning-bg:        rgba(234, 179, 8, 0.1);
    --th-warning-border:    rgba(234, 179, 8, 0.3);

    /* ── Info ──────────────────────────────────────────────────────────── */
    --th-info:              #00b4ff;

    /* ── Shadows ───────────────────────────────────────────────────────── */
    --th-shadow-sm:         0 2px 6px rgba(0, 0, 0, 0.3);
    --th-shadow-md:         0 6px 20px rgba(0, 0, 0, 0.5);
    --th-shadow-lg:         0 16px 32px rgba(0, 0, 0, 0.6);
    --th-shadow-focus:      0 0 0 0.2rem rgba(75, 85, 99, 0.35);

    /* ── CodeMirror ────────────────────────────────────────────────────── */
    --th-cm-bg:             #161A1D;
    --th-cm-gutter:         #161A1D;
    --th-cm-gutter-border:  rgba(255, 255, 255, 0.1);
    --th-cm-linenumber:     #546E7A;

    /* ── Component-specific ────────────────────────────────────────────── */
    --th-table-header-bg:   #262B30;
    --th-table-header-text: #8B9EB3;
    --th-table-row-border:  #525A63;
    --th-table-hover:       rgba(255, 255, 255, 0.05);

    --th-scrollbar-track:   #2D333A;
    --th-scrollbar-thumb:   #555;

    --th-slider-track-off:  #22272B;
    --th-slider-circle-off: #8B9EB3;

    --th-spinner-color:     #6B7785;
    --th-spinner-disabled:  #3E454C;

    --th-resizer:           #4B5563;
    --th-resizer-hover:     #8B9EB3;
    --th-toggler:           #6C757D;

    --th-btn-close-filter:  invert(70%) sepia(10%) saturate(200%) hue-rotate(180deg) brightness(95%);

    --th-page-bg:           #384350;
    --th-page-hover:        #4B5563;
    --th-page-active-bg:    #2D353F;
    --th-page-active-text:  #80afc3;
    --th-page-disabled:     #6B7280;

    --th-intro-bg:          rgb(35, 40, 45);
    --th-intro-text:        #F1F5F9;
    --th-intro-border:      rgba(255, 255, 255, 0.1);
    --th-intro-btn-border:  rgba(255, 255, 255, 0.25);
    --th-intro-btn-hover:   rgba(255, 255, 255, 0.08);
    --th-intro-disabled:    rgba(255, 255, 255, 0.1);
    --th-intro-dot:         rgba(255, 255, 255, 0.2);

    --th-number-border:     rgba(255, 255, 255, 0.2);
    --th-number-bg:         #1A1E22;
    --th-number-divider:    rgba(255, 255, 255, 0.1);

    --th-grip-color:        rgba(255, 255, 255, 0.5);
    --th-slider-glow:       0 0 4px rgba(255, 255, 255, 0.4);

    /* ── Bootstrap Slate overrides — tie BS variables to theme ─────────── */
    --bs-body-bg:           var(--th-bg-primary);
    --bs-body-color:        var(--th-text);
    --bs-card-bg:           var(--th-bg-card);
    --bs-card-border-color: var(--th-border);
    --bs-modal-bg:          var(--th-bg-elevated);
    --bs-modal-border-color:var(--th-border);
    --bs-border-color:      var(--th-border);
    --bs-table-bg:          transparent;
    --bs-table-color:       var(--th-text);
    --bs-table-border-color:var(--th-border);
    --bs-list-group-bg:     var(--th-bg-card);
    --bs-list-group-border-color: var(--th-border);
    --bs-list-group-color:  var(--th-text);
}


/* ═══════════════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
    /* ── Surfaces (Layered Whites) ─────────────────────────────────────── */
    --th-bg-primary:        #EAEEF2;          /* Level 0: Floor */
    --th-bg-surface:        #F8FAFC;          /* Level 1: Card headers / control areas */
    --th-bg-card:           #FFFFFF;          /* Level 2: Pure white data canvas */
    --th-bg-elevated:       #FFFFFF;          /* Level 2: Popovers, modals */
    --th-bg-input:          #FFFFFF;
    --th-bg-input-disabled: #F4F6F8;
    --th-bg-sidebar:        #FFFFFF;
    --th-bg-console:        #F4F6F8;

    /* ── Interactive surfaces ──────────────────────────────────────────── */
    --th-bg-hover:          rgba(30, 35, 39, 0.08);
    --th-bg-active:         rgba(30, 35, 39, 0.12);
    --th-bg-selected:       #EFF6FF;
    --th-bg-highlight:      #F4F6F8;

    /* ── Borders (softened — white cards provide the contrast) ──────── */
    --th-border:            #E2E8F0;
    --th-border-subtle:     rgba(30, 35, 39, 0.08);
    --th-border-strong:     #94A3B8;
    --th-border-input:      #94A3B8;
    --th-border-focus:      #64748B;
    --th-border-accent:     #4A7285;
    --th-border-accent-alt: #7B6BA0;

    /* ── Text (Symmetry Trick: dark bg hex becomes light text) ─────────── */
    --th-text:              #1E2327;
    --th-text-heading:      #1E2327;
    --th-text-muted:        #475569;
    --th-text-dim:          #64748B;
    --th-text-disabled:     #94A3B8;
    --th-text-on-accent:    #ffffff;
    --th-text-link:         #005A8C;
    --th-text-link-hover:   #004068;

    /* ── Accent — Deepened Green (WCAG 5.3:1 with white text) ─────────── */
    --th-accent:            #287A46;
    --th-accent-hover:      #21663A;
    --th-accent-active:     #1A522E;
    --th-accent-text:       #287247;
    --th-accent-bg:         rgba(40, 122, 70, 0.08);
    --th-accent-muted:      #BBF7D0;

    /* ── Danger (Deepened for 4.9:1 contrast) ─────────────────────────── */
    --th-danger:            #C53F2D;
    --th-danger-bg:         rgba(197, 63, 45, 0.10);
    --th-danger-border:     rgba(197, 63, 45, 0.30);
    --th-danger-strong:     #FEE2E2;

    /* ── Warning (Deepened for 4.8:1 contrast) ─────────────────────────── */
    --th-warning:           #AD6800;
    --th-warning-bg:        rgba(173, 104, 0, 0.10);
    --th-warning-border:    rgba(173, 104, 0, 0.30);

    /* ── Info (Deepened for 4.9:1 contrast) ────────────────────────────── */
    --th-info:              #0067A3;

    /* ── Shadows (using dark bg hex for cohesive tint) ─────────────────── */
    --th-shadow-sm:         0 1px 3px rgba(30, 35, 39, 0.08);
    --th-shadow-md:         0 4px 6px -1px rgba(30, 35, 39, 0.05), 0 2px 4px -2px rgba(30, 35, 39, 0.03);
    --th-shadow-lg:         0 10px 15px -3px rgba(30, 35, 39, 0.10), 0 4px 6px -4px rgba(30, 35, 39, 0.05);
    --th-shadow-focus:      0 0 0 0.2rem rgba(40, 122, 70, 0.20);

    /* ── CodeMirror ────────────────────────────────────────────────────── */
    --th-cm-bg:             #FCFDFE;
    --th-cm-gutter:         #F4F6F8;
    --th-cm-gutter-border:  #E2E8F0;
    --th-cm-linenumber:     #9CA3AF;

    /* ── Component-specific ────────────────────────────────────────────── */
    --th-table-header-bg:   #F4F6F8;
    --th-table-header-text: #475569;
    --th-table-row-border:  #CBD5E1;
    --th-table-hover:       rgba(30, 35, 39, 0.02);

    --th-scrollbar-track:   #E2E8F0;
    --th-scrollbar-thumb:   #C0C0C0;

    --th-slider-track-off:  #E2E8F0;
    --th-slider-circle-off: #9CA3AF;

    --th-spinner-color:     #9CA3AF;
    --th-spinner-disabled:  #CBD5E1;

    --th-resizer:           #CBD5E1;
    --th-resizer-hover:     #9CA3AF;
    --th-toggler:           #9CA3AF;

    --th-btn-close-filter:  none;

    --th-page-bg:           #F4F6F8;
    --th-page-hover:        #E2E8F0;
    --th-page-active-bg:    #FFFFFF;
    --th-page-active-text:  #287A46;
    --th-page-disabled:     #D5DDE5;

    --th-intro-bg:          #FFFFFF;
    --th-intro-text:        #1E2327;
    --th-intro-border:      #CBD5E1;
    --th-intro-btn-border:  #CBD5E1;
    --th-intro-btn-hover:   #F4F6F8;
    --th-intro-disabled:    #E2E8F0;
    --th-intro-dot:         #D5DDE5;

    --th-number-border:     #CBD5E1;
    --th-number-bg:         #FFFFFF;
    --th-number-divider:    #E2E8F0;

    --th-grip-color:        rgba(30, 35, 39, 0.3);
    --th-slider-glow:       0 0 4px rgba(30, 35, 39, 0.15);

    /* ── Bootstrap overrides ──────────────────────────────────────────── */
    --bs-body-bg:           var(--th-bg-primary);
    --bs-body-color:        var(--th-text);
    --bs-card-bg:           var(--th-bg-card);
    --bs-card-border-color: var(--th-border);
    --bs-modal-bg:          var(--th-bg-elevated);
    --bs-modal-border-color:var(--th-border);
    --bs-border-color:      var(--th-border);
    --bs-table-bg:          transparent;
    --bs-table-color:       var(--th-text);
    --bs-table-border-color:var(--th-border);
    --bs-list-group-bg:     var(--th-bg-card);
    --bs-list-group-border-color: var(--th-border);
    --bs-list-group-color:  var(--th-text);
    --bs-link-color-rgb:    0, 90, 140;
    --bs-link-hover-color-rgb: 0, 64, 104;
}


/* ═══════════════════════════════════════════════════════════════════════
   Global light-theme component overrides
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Structural Boundaries ──────────────────────────────────────── */

/* Sidebar — crisp white with definitive right border */
[data-theme="light"] .ui-layout-resizer {
    background-color: #CBD5E1 !important;
}

[data-theme="light"] .ui-layout-west {
    border-right: 1px solid var(--th-border);
}

[data-theme="light"] .ui-layout-west .card-body > a:hover {
    background-color: #E2E8F0 !important;
}

/* Center pane floor */
[data-theme="light"] .ui-layout-center {
    background-color: var(--th-bg-primary);
}

/* Kill Slate's text-shadow on headings and navbar in light mode */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] .h1,
[data-theme="light"] .h2,
[data-theme="light"] .h3,
[data-theme="light"] .h4,
[data-theme="light"] .h5,
[data-theme="light"] .h6,
[data-theme="light"] .card-title,
[data-theme="light"] .nav-link,
[data-theme="light"] .btn,
[data-theme="light"] .navbar {
    text-shadow: none !important;
    font-weight: 400;
}

/* Navbar — brand purple */
[data-theme="light"] .navbar {
    background-color: #5c37a4 !important;
    background-image: none !important;
    border-color: #5c37a4 !important;
}

[data-theme="light"] .navbar .nav-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="light"] .navbar .nav-link:hover {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    background-image: none !important;
    border-radius: 4px;
}

[data-theme="light"] .navbar .navbar-brand img {
    opacity: 1;
}

[data-theme="light"] .navbar .dropdown-toggle {
    color: rgba(255, 255, 255, 0.85) !important;
}

[data-theme="light"] .navbar .dropdown-toggle:hover {
    color: #FFFFFF !important;
}

/* ── 2. Card Headers ──────────────────────────────────────────────── */

[data-theme="light"] .card-header,
[data-theme="light"] .card-info > .card-header {
    color: var(--th-text) !important;
    border-bottom: 2px solid #80afc3 !important;
    background-color: var(--th-bg-surface) !important;
}

[data-theme="light"] .card-header .card-title,
[data-theme="light"] .card-header h4,
[data-theme="light"] .card-header h5 {
    color: var(--th-text) !important;
}

[data-theme="light"] .card-header .panel-toggle,
[data-theme="light"] .card-header a {
    color: var(--th-text) !important;
    text-decoration: none;
}

/* ── 3. Typography Contrast ───────────────────────────────────────── */

/* Tabs — sturdy dark slate, not washed-out blue */
[data-theme="light"] .nav-tabs .nav-link {
    color: var(--th-text-muted) !important;
    font-weight: 500;
}

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

[data-theme="light"] .nav-tabs .nav-link.active,
[data-theme="light"] .ui-layout-center .nav-tabs .nav-link.active {
    color: #1E2327 !important;
    background: transparent !important;
    border-bottom: 2px solid #5c37a4 !important;
    font-weight: 600 !important;
}

/* Table headers — uppercase slate with stronger bottom border */
[data-theme="light"] .table > thead > tr > th,
[data-theme="light"] .dataTables_wrapper table.dataTable thead tr th,
[data-theme="light"] .dt-container table.dataTable thead tr th {
    background-color: var(--th-table-header-bg) !important;
    color: var(--th-table-header-text) !important;
    border-bottom: 2px solid var(--th-border) !important;
}

/* Table row borders — lighter, cleaner */
[data-theme="light"] .table > tbody > tr > * {
    border-bottom-color: var(--th-table-row-border) !important;
}

/* Table row borders — more visible in dark mode */
[data-theme="dark"] .table > tbody > tr > *,
[data-theme="dark"] .dataTables_wrapper table.dataTable tbody tr td,
[data-theme="dark"] .dt-container table.dataTable tbody tr td {
    border-bottom-color: var(--th-table-row-border) !important;
}

/* Table row hover */
[data-theme="light"] table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px var(--th-table-hover) !important;
}

/* ── 4. Form Inputs — inset feel with stronger border ─────────────── */

[data-theme="light"] .form-control,
[data-theme="light"] .form-control-sm,
[data-theme="light"] .form-select {
    background-color: #FFFFFF !important;
    border: 1px solid #94A3B8 !important;
    color: #1E2327 !important;
}

[data-theme="light"] .form-control::placeholder,
[data-theme="light"] .form-control-sm::placeholder {
    color: #64748B !important;
}

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-control-sm:focus,
[data-theme="light"] .form-select:focus {
    border-color: #005A8C !important;
    box-shadow: 0 0 0 2px rgba(0, 90, 140, 0.2) !important;
}

/* Select2 inline search — no border, transparent background */
[data-theme="light"] .select2-container .select2-search__field {
    border: none !important;
    background: transparent !important;
    color: #1E2327 !important;
}

[data-theme="light"] .select2-container .select2-search__field::placeholder {
    color: #64748B !important;
}

[data-theme="light"] .form-control:disabled,
[data-theme="light"] .form-control-sm:disabled,
[data-theme="light"] .form-select:disabled {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
    -webkit-text-fill-color: #475569 !important;
}

/* ── 5. Select2 — defined interactive zones ───────────────────────── */

[data-theme="light"] .select2-container--bootstrap-5 .select2-selection {
    background-color: #FFFFFF !important;
    border-color: #94A3B8 !important;
    color: #1E2327 !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-selection:focus {
    border-color: #005A8C !important;
    box-shadow: 0 0 0 2px rgba(0, 90, 140, 0.2) !important;
}

[data-theme="light"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
}

[data-theme="light"] .select2-container--bootstrap-5.select2-container--disabled .select2-selection__rendered {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: #FFFFFF !important;
    border-color: #94A3B8 !important;
    box-shadow: var(--th-shadow-md);
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-results__options .select2-results__option {
    background-color: #FFFFFF !important;
    color: #1E2327 !important;
}

[data-theme="light"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: #BFDBFE !important;
    color: #1E2327 !important;
}


[data-theme="light"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
[data-theme="light"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
    background-color: #DBEAFE !important;
    color: #1E2327 !important;
}

/* ── 5b. Disabled inputs/checkboxes in editMapTable ───────────────── */

[data-theme="light"] input:disabled,
[data-theme="light"] textarea:disabled,
[data-theme="light"] select:disabled {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

[data-theme="light"] .srcedit:disabled {
    background-color: #F1F5F9 !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
    -webkit-text-fill-color: #475569 !important;
    opacity: 1 !important;
}

[data-theme="light"] input[type="checkbox"].srcedit:checked:disabled,
[data-theme="light"] input[type="checkbox"].form-check-input:checked:disabled {
    background-color: #FFFFFF !important;
    border-color: transparent !important;
    opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

/* ── 5c. Checkboxes — clean check on light backgrounds ────────────── */

[data-theme="light"] input[type="checkbox"].srcedit:checked:disabled,
[data-theme="light"] input[type="checkbox"].form-check-input:checked:disabled {
    background-color: #FFFFFF !important;
    border-color: transparent !important;
    opacity: 1 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}


/* ── 5d. Comment bubble buttons ───────────────────────────────────── */

[data-theme="light"] .btn.btn-column-comment,
[data-theme="light"] .btn.btn-table-comment {
    color: #94A3B8;
    background: transparent;
    border-color: transparent;
}

[data-theme="light"] .btn.btn-column-comment:hover,
[data-theme="light"] .btn.btn-table-comment:hover {
    color: #475569;
    background: var(--th-bg-hover);
    border-color: transparent;
}

[data-theme="light"] .btn.btn-column-comment.has-comment,
[data-theme="light"] .btn.btn-table-comment.has-comment {
    color: #005A8C;
    background: transparent;
    border-color: transparent;
}

[data-theme="light"] .btn.btn-column-comment.has-comment:hover,
[data-theme="light"] .btn.btn-table-comment.has-comment:hover {
    color: #004068;
    background: rgba(0, 90, 140, 0.08);
    border-color: transparent;
}

[data-theme="light"] tr:hover .btn.btn-column-comment:not(.has-comment) {
    color: #64748B;
}

/* ── 5e. Viewmap west pane — search card ───────────────────────────── */

[data-theme="light"] .map-sidebar-sticky-header {
    background-color: #EAEEF2;
}

[data-theme="light"] .map-sidebar-sticky-header .card {
    background-color: #EAEEF2 !important;
    box-shadow: none !important;
    border: none !important;
}

/* ── 5f. editMapTable headers ─────────────────────────────────────── */

[data-theme="light"] #editMapTable > thead > tr > th {
    color: #475569 !important;
    font-weight: 600;
    letter-spacing: 0.05em;
}

/* ── 5d. jstree selected node — green tint ────────────────────────── */

[data-theme="light"] .jstree-default .jstree-wholerow-clicked {
    background-color: rgba(60, 163, 104, 0.1) !important;
    border-left: 3px solid #3CA368 !important;
}

[data-theme="light"] .jstree-default .jstree-clicked {
    color: #1E2327 !important;
    font-weight: 600;
}

[data-theme="light"] .jstree-default .jstree-wholerow-hovered {
    background-color: rgba(30, 35, 39, 0.12) !important;
}

/* ── 5f. Context menus (right-click) — light mode ─────────────────── */

[data-theme="light"] .vakata-context {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 4px 12px rgba(30, 35, 39, 0.12) !important;
}

[data-theme="light"] .vakata-context li > a {
    color: #1E2327 !important;
}

[data-theme="light"] .vakata-context li > a:hover {
    background-color: #E2E8F0 !important;
    color: #1E2327 !important;
}

[data-theme="light"] .vakata-context .vakata-context-hover > a {
    background: #E2E8F0 !important;
}

[data-theme="light"] .vakata-context li > a > i {
    color: #64748B !important;
}

[data-theme="light"] .vakata-contextmenu-sep {
    border-left: 1px solid #E2E8F0 !important;
}

/* ── 6. Activity buttons — restore top/bottom borders in light mode ── */

[data-theme="light"] .btn.activity {
    border: 1px solid var(--th-border) !important;
}

/* ── 6b. Buttons — ghost icons need dark fill ─────────────────────── */

[data-theme="light"] .btn-ghost-icon {
    color: var(--th-text-dim) !important;
}

[data-theme="light"] .btn-ghost-icon .fa,
[data-theme="light"] .btn-ghost-icon i {
    color: var(--th-text-dim);
}

[data-theme="light"] .btn-ghost-icon:hover {
    background-color: var(--th-bg-hover) !important;
}

[data-theme="light"] .btn-ghost-icon:hover .fa,
[data-theme="light"] .btn-ghost-icon:hover i {
    color: var(--th-text);
}

/* ── 7. Sliders/Toggles ───────────────────────────────────────────── */

/* Slider labels and list-group text — visible dark text in light mode */
[data-theme="light"] .checkbox-slider--b-flat label,
[data-theme="light"] .checkbox-slider--b-flat label span,
[data-theme="light"] .checkbox-slider--b-flat span,
[data-theme="light"] .checkbox label,
[data-theme="light"] .checkbox span,
[data-theme="light"] .form-label,
[data-theme="light"] .slider-label,
[data-theme="light"] .card-body label,
[data-theme="light"] .card-body span.form-label,
[data-theme="light"] .list-group-item,
[data-theme="light"] .list-group-item span,
[data-theme="light"] .list-group-item label {
    color: #1E2327 !important;
}

/* Track — off */
[data-theme="light"] .checkbox-slider--b-flat input + span:before {
    background: #CBD5E1 !important;
}

/* Track — on */
[data-theme="light"] .checkbox-slider--b-flat input:checked + span:before {
    background: #287A46 !important;
}

/* Knob — off */
[data-theme="light"] .checkbox-slider--b-flat input + span:after {
    background: #FFFFFF !important;
    border: 1px solid #94A3B8 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Knob — on */
[data-theme="light"] .checkbox-slider--b-flat input:checked + span:after {
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(0, 0, 0, 0.1);
}

/* Knob hover */
[data-theme="light"] .checkbox-slider--b-flat input:not(:disabled) + span:hover:after {
    background: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Disabled track — off */
[data-theme="light"] .checkbox-slider--b-flat input:disabled + span:before {
    background: #E2E8F0 !important;
    opacity: 1 !important;
}

/* Disabled knob — visible grey circle */
[data-theme="light"] .checkbox-slider--b-flat input:disabled + span:after {
    background: #94A3B8 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Disabled track — on */
[data-theme="light"] .checkbox-slider--b-flat input:checked:disabled + span:before {
    background: #93C5A4 !important;
    opacity: 1 !important;
}

/* Disabled knob — on */
[data-theme="light"] .checkbox-slider--b-flat input:checked:disabled + span:after {
    background: #94A3B8 !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* ── 7b. Alerts — opaque backgrounds to cover underlying elements ──── */

[data-theme="light"] .alert-success {
    background-color: #ECFDF5 !important;
    border: 1px solid #287A46 !important;
    color: #287A46 !important;
}

[data-theme="light"] .toast-alert-container .alert-success {
    background-color: #ECFDF5 !important;
    border: 1px solid #287A46 !important;
    border-left: 3px solid #287A46 !important;
    color: #1E2327 !important;
}

[data-theme="light"] .alert-danger {
    background-color: #FEF2F2 !important;
    border: 1px solid #C53F2D !important;
    color: #C53F2D !important;
}

[data-theme="light"] .toast-alert-container .alert-danger {
    background-color: #FEF2F2 !important;
    border: 1px solid #C53F2D !important;
    border-left: 3px solid #C53F2D !important;
    color: #C53F2D !important;
}

/* ── 7b2. Multi-select box selected items ──────────────────────────── */

[data-theme="light"] .multi-select-box option:checked,
[data-theme="light"] .multi-select-box option:active,
[data-theme="light"] .multi-select-box option::selection {
    background: #CBD5E1 !important;
    color: #1E2327 !important;
}

/* ── 7b3. Upload/Import page ───────────────────────────────────────── */

[data-theme="light"] .ui-layout-center .text-white,
[data-theme="light"] .ui-layout-north .text-white {
    color: #1E2327 !important;
}

[data-theme="light"] .import-wrapper h3,
[data-theme="light"] .upload h3,
[data-theme="light"] h3 {
    color: var(--th-text) !important;
}

[data-theme="light"] .fileinput-button {
    border: 1px solid #94A3B8 !important;
    color: #475569 !important;
    background-color: #FFFFFF !important;
}

[data-theme="light"] .fileinput-button:hover {
    background-color: #E2E8F0 !important;
    border-color: #64748B !important;
    color: #1E2327 !important;
}

[data-theme="light"] .btn-outline-secondary {
    --bs-btn-color: #475569;
    --bs-btn-border-color: #94A3B8;
    --bs-btn-hover-color: #1E2327;
    --bs-btn-hover-bg: #E2E8F0;
    --bs-btn-hover-border-color: #64748B;
    --bs-btn-active-color: #1E2327;
    --bs-btn-active-bg: #CBD5E1;
    --bs-btn-active-border-color: #64748B;
    background-color: #FFFFFF !important;
}

/* ── 7b4. Add Property button ──────────────────────────────────────── */

[data-theme="light"] #btnAddProp {
    border: 1px solid #94A3B8 !important;
    color: #475569 !important;
    background-color: #FFFFFF !important;
}

[data-theme="light"] #btnAddProp:hover {
    border-color: #64748B !important;
    background-color: #F1F5F9 !important;
    color: #1E2327 !important;
}

/* ── 7b4. Genmap — labelauty toggles, icons, and sections ─────────── */

/* Toggle/slider labels — visible dark text */
[data-theme="light"] input.labelauty + label {
    color: var(--th-text) !important;
}

/* Mapping type — checked state with green tint */
[data-theme="light"] .MapType input.labelauty:checked + label {
    background-color: rgba(40, 122, 70, 0.08) !important;
    color: #1E2327 !important;
    border-left: 3px solid #287A46 !important;
}

/* Mapping type — hover on checked */
[data-theme="light"] .MapType input.labelauty:checked:not([disabled]) + label:hover {
    background-color: rgba(40, 122, 70, 0.12) !important;
}

/* Mapping type — hover on unchecked */
[data-theme="light"] .MapType input.labelauty:not(:checked):not([disabled]) + label:hover {
    background-color: var(--th-bg-hover) !important;
    color: #1E2327 !important;
}

/* Icons — unchecked: dark slate */
[data-theme="light"] input.labelauty + label > span.labelauty-unchecked-image:before {
    color: #64748B !important;
}

/* Icons — checked: enterprise green */
[data-theme="light"] input.labelauty + label > span.labelauty-checked-image:before {
    color: #287A46 !important;
}

/* ── 7b5. Console log — always dark terminal ──────────────────────── */

[data-theme="light"] #console-log {
    background-color: #15181C !important;
    border: 1px solid #32383e !important;
    color: #D1D5DB !important;
    font-family: Consolas, 'Fira Code', 'Courier New', monospace;
}

[data-theme="light"] #console-log .console-line {
    color: #D1D5DB;
}

[data-theme="light"] #console-log .console-line-success {
    color: #48B377;
}

[data-theme="light"] #console-log .console-line-error {
    color: #E28C7E;
}

/* Brighten .text-success inside dark terminals */
[data-theme="light"] #console-log .text-success {
    color: #6DD4A0 !important;
}

[data-theme="light"] #console-log .text-danger {
    color: #E28C7E !important;
}

[data-theme="light"] #console-log .text-info {
    color: #80afc3 !important;
}

[data-theme="light"] #console-log .console-line-odd {
    background-color: rgba(255, 255, 255, 0.03);
}

/* ── 7c. CodeMirror editors — bordered containers in light mode ────── */

[data-theme="light"] .CodeMirror {
    border: 1px solid #CBD5E1 !important;
    border-radius: 4px;
    background-color: #FFFFFF !important;
}

[data-theme="light"] .CodeMirror-gutters {
    background-color: #F8FAFC !important;
    border-right: 1px solid #E2E8F0 !important;
}

[data-theme="light"] .CodeMirror-linenumber {
    color: #94A3B8 !important;
}

/* Disabled CodeMirror — subtle fill */
[data-theme="light"] .CodeMirror.cm-disabled {
    background-color: #F8FAFC !important;
    opacity: 0.7;
}

/* ── 7d. Editor resize handle — visible in light mode ─────────────── */

[data-theme="light"] .editor-handle {
    background-color: #CBD5E1;
}

[data-theme="light"] .editor-handle::after {
    border-top: 1px solid #94A3B8;
    border-bottom: 1px solid #94A3B8;
    opacity: 0.6;
}

[data-theme="light"] .editor-handle:hover,
[data-theme="light"] .editor-handle:active {
    background-color: #94A3B8;
}

[data-theme="light"] .editor-handle:hover::after,
[data-theme="light"] .editor-handle:active::after {
    border-top-color: #475569;
    border-bottom-color: #475569;
    opacity: 1;
}

/* ── 7d. Popovers — light mode ─────────────────────────────────────── */

[data-theme="light"] .popover {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 10px 25px -5px rgba(30, 35, 39, 0.15), 0 4px 10px -3px rgba(30, 35, 39, 0.08) !important;
}

[data-theme="light"] .popover-header {
    background-color: #F1F5F9 !important;
    color: #C53F2D !important;
    border-bottom: 1px solid #E2E8F0 !important;
    font-weight: 600;
}

[data-theme="light"] .popover-body {
    background-color: #FFFFFF !important;
    color: #1E2327 !important;
}

/* Caret — white fill matching popover body, border matching popover border */
[data-theme="light"] .bs-popover-top > .popover-arrow::after,
[data-theme="light"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::after {
    border-top-color: #FFFFFF !important;
}
[data-theme="light"] .bs-popover-top > .popover-arrow::before,
[data-theme="light"] .bs-popover-auto[data-popper-placement^="top"] > .popover-arrow::before {
    border-top-color: #CBD5E1 !important;
}

[data-theme="light"] .bs-popover-bottom > .popover-arrow::after,
[data-theme="light"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::after {
    border-bottom-color: #FFFFFF !important;
}
[data-theme="light"] .bs-popover-bottom > .popover-arrow::before,
[data-theme="light"] .bs-popover-auto[data-popper-placement^="bottom"] > .popover-arrow::before {
    border-bottom-color: #CBD5E1 !important;
}

[data-theme="light"] .bs-popover-start > .popover-arrow::after,
[data-theme="light"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::after {
    border-left-color: #FFFFFF !important;
}
[data-theme="light"] .bs-popover-start > .popover-arrow::before,
[data-theme="light"] .bs-popover-auto[data-popper-placement^="left"] > .popover-arrow::before {
    border-left-color: #CBD5E1 !important;
}

[data-theme="light"] .bs-popover-end > .popover-arrow::after,
[data-theme="light"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::after {
    border-right-color: #FFFFFF !important;
}
[data-theme="light"] .bs-popover-end > .popover-arrow::before,
[data-theme="light"] .bs-popover-auto[data-popper-placement^="right"] > .popover-arrow::before {
    border-right-color: #CBD5E1 !important;
}

/* ── 7e. Unsaved changes modal — light mode ────────────────────────── */

[data-theme="light"] .modal-content {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 6px;
    box-shadow: 0 20px 25px -5px rgba(30, 35, 39, 0.15), 0 10px 10px -5px rgba(30, 35, 39, 0.1) !important;
}

[data-theme="light"] .modal-body .text-warning {
    color: #1E2327 !important;
}

[data-theme="light"] .modal-body {
    color: #1E2327 !important;
}

[data-theme="light"] #unSavedNo {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #1E2327 !important;
}

[data-theme="light"] #unSavedNo:hover {
    background-color: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #1E2327 !important;
}

/* Inline confirmation popovers */
[data-theme="light"] .confirm-yes {
    background-color: #C53F2D !important;
    color: #FFFFFF !important;
}

[data-theme="light"] .confirm-no {
    background-color: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #1E2327 !important;
}

[data-theme="light"] .confirm-no:hover {
    background-color: #F8FAFC !important;
    border-color: #94A3B8 !important;
}

/* ── 7f. Checkboxes — visible border when unchecked in light mode ──── */

[data-theme="light"] .form-check-input:not(:checked) {
    border-color: #94A3B8 !important;
    background-color: #FFFFFF !important;
}

/* ── 8. Misc ──────────────────────────────────────────────────────── */

[data-theme="light"] .btn-close {
    filter: none;
}

[data-theme="light"] .dropdown-menu {
    background-color: var(--th-bg-elevated);
    border-color: var(--th-border);
    box-shadow: var(--th-shadow-md);
}

[data-theme="light"] .dropdown-item {
    color: var(--th-text);
}

[data-theme="light"] .dropdown-item:hover {
    background-color: var(--th-bg-hover);
    color: var(--th-text);
}

/* Tooltips */
[data-theme="light"] .tooltip-inner {
    background-color: var(--th-bg-elevated);
    color: var(--th-text);
    border-color: var(--th-border);
}

/* DataTable pagination */
[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button,
[data-theme="light"] .dt-container .dt-paging .page-link {
    background-color: var(--th-bg-surface) !important;
    color: var(--th-text) !important;
    border: 1px solid var(--th-border) !important;
    text-shadow: none !important;
}

[data-theme="light"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
[data-theme="light"] .dt-container .dt-paging .page-link:hover {
    background-color: var(--th-bg-hover) !important;
}

/* DataTable length select and search input */
[data-theme="light"] .dataTables_wrapper .dataTables_length select,
[data-theme="light"] .dt-container .dt-length select,
[data-theme="light"] .dataTables_wrapper .dataTables_filter input,
[data-theme="light"] .dt-container .dt-search input {
    background-color: var(--th-bg-input) !important;
    border-color: var(--th-border-input) !important;
    color: var(--th-text) !important;
}

/* btn-primary — light mode interactive states */
[data-theme="light"] .btn-primary:hover {
    color: #005A8C !important;
    background-color: #E2E8F0 !important;
    background-image: none !important;
    border-color: #94A3B8 !important;
}

/* Breadcrumbs — transparent, lightweight text links */
[data-theme="light"] .btn-breadcrumb.btn-primary {
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    color: #475569 !important;
    font-weight: 400 !important;
}

[data-theme="light"] .btn-breadcrumb.btn-primary:hover {
    background-color: #F1F5F9 !important;
    background-image: none !important;
    border-color: transparent !important;
    color: #1E2327 !important;
}

[data-theme="light"] .btn-breadcrumb.btn-primary:active,
[data-theme="light"] .btn-breadcrumb.btn-primary.active {
    background-color: #E2E8F0 !important;
    background-image: none !important;
    border-color: #CBD5E1 !important;
    color: #1E2327 !important;
    font-weight: 400 !important;
}

/* Override Bootstrap Slate's component-scoped variables
   Slate hardcodes --bs-*-bg on .card, .modal, .list-group, .dropdown-menu, .popover etc.
   We must override at the same selector level. */
.card {
    --bs-card-bg: var(--th-bg-card);
    --bs-card-border-color: var(--th-border);
    --bs-card-cap-bg: var(--th-bg-elevated);
    --bs-card-color: var(--th-text);
}

.modal {
    --bs-modal-bg: var(--th-bg-elevated);
    --bs-modal-border-color: var(--th-border);
    --bs-modal-color: var(--th-text);
}

[data-theme="light"] .modal-header {
    border-bottom: 2px solid #80afc3 !important;
}

[data-theme="light"] .modal-footer {
    border-top: 2px solid #80afc3 !important;
}

.list-group {
    --bs-list-group-bg: var(--th-bg-card);
    --bs-list-group-border-color: var(--th-border);
    --bs-list-group-color: var(--th-text);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--th-bg-elevated);
    --bs-dropdown-border-color: var(--th-border);
    --bs-dropdown-color: var(--th-text);
    --bs-dropdown-link-color: var(--th-text);
    --bs-dropdown-link-hover-bg: var(--th-bg-hover);
    --bs-dropdown-link-hover-color: var(--th-text);
}

.popover {
    --bs-popover-bg: var(--th-bg-elevated);
    --bs-popover-border-color: var(--th-border);
    --bs-popover-body-color: var(--th-text);
    --bs-popover-header-bg: var(--th-bg-elevated);
}

.table {
    --bs-table-color: var(--th-text);
    --bs-table-border-color: var(--th-border);
}

[data-theme="light"] .table {
    --bs-table-bg: transparent;
}

/* Cards in light mode — subtle border + shadow */
[data-theme="light"] .card {
    border: 1px solid var(--th-border) !important;
    box-shadow: var(--th-shadow-md) !important;
}

/* jstree text — use theme text color (not hardcoded white) */
.jstree-default .jstree-anchor {
    color: var(--th-text) !important;
}

/* jstree chevron — dark for light backgrounds */
[data-theme="light"] .jstree-default .jstree-open > .jstree-ocl {
    filter: none;
}

/* ── Source SQL History modal — pane labels ─────────────────────────── */
#sqlHistPaneLabels {
    color: #64748B;
}
[data-theme="dark"] #sqlHistPaneLabels {
    color: #94a3b8;
}

/* ── Source SQL History modal — make CodeMirror fill the container ───── */
/* merge.css hardcodes .CodeMirror-merge { height: 350px } which leaves empty
   space in our 60vh modal container. Override the wrapper only — the inner
   CodeMirror instances get their height set explicitly via setSize() in JS,
   which gives CodeMirror a numeric value it can compute scroll regions from. */
#sqlHistMergeContainer > .CodeMirror,
#sqlHistMergeContainer > .CodeMirror-merge {
    height: 100% !important;
    border: none !important;
}

/* ── Source SQL History modal — Diff/Plain toggle buttons ───────────── */
/* Explicit colors so the buttons are visible against any modal header bg
   in both light and dark mode. Uses the app's dark-slate primary button
   palette (matches .btn-primary across the rest of the app). */
.sqlHistToggleBtn {
    background-color: #ffffff !important;
    color: #212529 !important;
    border: 1px solid #94A3B8 !important;
}
.sqlHistToggleBtn:hover {
    background-color: #E2E8F0 !important;
    color: #212529 !important;
    border-color: #64748B !important;
}
.btn-check:checked + .sqlHistToggleBtn {
    background-color: #3a3f44 !important;
    color: #ffffff !important;
    border-color: #3a3f44 !important;
}

[data-theme="dark"] .sqlHistToggleBtn {
    background-color: #2c2c34 !important;
    color: #c4c4cc !important;
    border: 1px solid #3e3e48 !important;
}
[data-theme="dark"] .sqlHistToggleBtn:hover {
    background-color: #3e3e48 !important;
    color: #ffffff !important;
    border-color: #4a4a55 !important;
}
[data-theme="dark"] .btn-check:checked + .sqlHistToggleBtn {
    background-color: #4a4a55 !important;
    color: #ffffff !important;
    border-color: #5a5a66 !important;
}

/* ── CodeMirror merge (diff) view — dark mode overrides ──────────────── */
/* Defaults in merge.css use very light pastel backgrounds which blend into
   light text on a dark theme. Use darker, saturated backgrounds so the SQL
   text stays readable. */
[data-theme="dark"] .CodeMirror-merge-r-chunk {
    background: rgba(56, 139, 253, 0.18) !important;
}
[data-theme="dark"] .CodeMirror-merge-r-chunk-start {
    border-top: 1px solid #388bfd !important;
}
[data-theme="dark"] .CodeMirror-merge-r-chunk-end {
    border-bottom: 1px solid #388bfd !important;
}
[data-theme="dark"] .CodeMirror-merge-r-connect {
    fill: rgba(56, 139, 253, 0.25) !important;
    stroke: #388bfd !important;
}

[data-theme="dark"] .CodeMirror-merge-l-chunk {
    background: rgba(248, 81, 73, 0.20) !important;
}
[data-theme="dark"] .CodeMirror-merge-l-chunk-start {
    border-top: 1px solid #f85149 !important;
}
[data-theme="dark"] .CodeMirror-merge-l-chunk-end {
    border-bottom: 1px solid #f85149 !important;
}
[data-theme="dark"] .CodeMirror-merge-l-connect {
    fill: rgba(248, 81, 73, 0.25) !important;
    stroke: #f85149 !important;
}

/* Overlap (identical inside a changed chunk on both sides) */
[data-theme="dark"] .CodeMirror-merge-l-chunk.CodeMirror-merge-r-chunk {
    background: rgba(46, 160, 67, 0.22) !important;
}
[data-theme="dark"] .CodeMirror-merge-l-chunk-start.CodeMirror-merge-r-chunk-start {
    border-top: 1px solid #2ea043 !important;
}
[data-theme="dark"] .CodeMirror-merge-l-chunk-end.CodeMirror-merge-r-chunk-end {
    border-bottom: 1px solid #2ea043 !important;
}

/* The inserted/deleted character-level highlights use pastel-squiggle
   background images which disappear on dark backgrounds, and a solid fill
   stacks with the chunk background and makes the token text unreadable.
   Use a bold inset underline instead — the text stays fully readable while
   the change is still visually marked. */
[data-theme="dark"] .CodeMirror-merge-r-inserted,
[data-theme="dark"] .CodeMirror-merge-l-inserted {
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: inset 0 -2px 0 #2ea043 !important;
}
[data-theme="dark"] .CodeMirror-merge-r-deleted,
[data-theme="dark"] .CodeMirror-merge-l-deleted {
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: inset 0 -2px 0 #f85149 !important;
}

/* Gap between panes — give it a subtle background that matches the theme */
[data-theme="dark"] .CodeMirror-merge-gap {
    background: var(--th-bg-elevated, #1f2428) !important;
    border-left: 1px solid var(--th-border, #30363d) !important;
    border-right: 1px solid var(--th-border, #30363d) !important;
}