/* Shared visual-system compatibility for third-party and legacy admin surfaces. */

/* Keep every TreeGrid toolbar on the same 46px rhythm. EJ2 adds an HScroll
   layer when the actions overflow; constrain that generated path as well as
   the regular toolbar so the navigation arrows cannot increase its height. */
.e-treegrid .e-toolbar.e-control {
    box-sizing: border-box;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
}

.e-treegrid .e-toolbar .e-toolbar-items,
.e-treegrid .e-toolbar .e-toolbar-items.e-hscroll,
.e-treegrid .e-toolbar .e-hscroll-bar,
.e-treegrid .e-toolbar .e-hscroll-content,
.e-treegrid .e-toolbar .e-toolbar-left,
.e-treegrid .e-toolbar .e-toolbar-center,
.e-treegrid .e-toolbar .e-toolbar-right {
    box-sizing: border-box;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
}

.e-treegrid .e-toolbar .e-toolbar-item:not(.e-separator),
.e-treegrid .e-toolbar .e-hor-nav,
.e-treegrid .e-toolbar .e-hscroll .e-scroll-nav {
    box-sizing: border-box;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
}

/* The larger-density grid rule otherwise gives Search 5px vertical padding,
   making its 40px control taller than the normalized toolbar. */
.e-treegrid .e-toolbar .e-toolbar-item.e-search-wrapper {
    padding-block: 3px;
}

/* HScroll changes the toolbar content from a flex row to an inline block.
   Its baseline then sits at the bottom of the fixed-height bar and pushes the
   buttons below the visible area. Retain shrink-to-content width while using
   flex alignment so scrollable and non-scrollable toolbars share one rhythm. */
.e-treegrid .e-toolbar .e-hscroll-bar {
    line-height: 0;
}

.e-treegrid .e-toolbar .e-hscroll-content {
    display: inline-flex;
    align-items: center;
    vertical-align: top;
    white-space: nowrap;
    line-height: normal;
}

/* Keep shared Syncfusion search fields and dropdowns on the same 40px control
   rhythm as the surrounding Bootstrap controls. The stock theme leaves the
   input at its content height, which makes its text sit high in taller shells. */
.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-input-group,
.e-input-group.e-control-wrapper.e-ddl:not(.e-small) {
    min-height: 40px;
    align-items: stretch;
}

/* File Manager's address row is 35px high and its stock search control is
   29px high. The global 40px input rhythm otherwise pushes Search through the
   grid header below it. Keep the compact control dimensions supplied by EJ2. */
.e-filemanager .e-address .e-search-wrap .e-input-group {
    height: 29px;
    min-height: 29px;
}

.e-bigger .e-filemanager .e-address .e-search-wrap .e-input-group,
.e-filemanager.e-bigger .e-address .e-search-wrap .e-input-group {
    height: 30px;
    min-height: 30px;
}

/* TreeGrid toolbars render Search as a plain e-search input group rather than
   an EJ2 control wrapper. Give that variant the same complete control shell. */
.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-input-group.e-search {
    overflow: hidden;
    color: var(--ct-text, #172033);
    background: var(--ct-surface, #fff);
    border: 1px solid var(--ct-border-strong, #d0d5dd);
    border-radius: var(--ct-radius-control, 0.5rem);
    opacity: 1;
}

.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper input.e-input,
.e-input-group.e-control-wrapper.e-ddl:not(.e-small) > input.e-input.e-dropdownlist {
    box-sizing: border-box;
    height: 38px;
    min-height: 38px;
    line-height: 38px;
    padding-block: 0;
}

.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-input-group.e-search > input.e-input {
    color: inherit;
    background: transparent;
    border: 0;
}

.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-input-group-icon,
.e-input-group.e-control-wrapper.e-ddl:not(.e-small) > .e-input-group-icon {
    min-height: 38px;
    align-self: stretch;
}

.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-input-group.e-search > .e-input-group-icon {
    min-width: 38px;
    color: var(--ct-text-muted, #667085);
    background: transparent;
    border-color: var(--ct-border-strong, #d0d5dd);
}

/* The bundled dark EJ2 stylesheet otherwise wins on specificity and applies
   its legacy orange focus treatment to Flowz search fields. */
.e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-input-group.e-search.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--ct-focus, #7181cf);
    border-radius: var(--ct-radius-control, 0.5rem);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ct-focus, #7181cf) 20%, transparent);
}

/* Search and dropdown affordances belong to the input surface. In particular,
   do not give the search icon its own light background in dark mode. */
:root[data-theme="galaxy"][data-bs-theme="dark"] .e-grid .e-toolbar .e-toolbar-item.e-search-wrapper .e-input-group-icon,
:root[data-theme="galaxy"][data-bs-theme="dark"] .e-input-group.e-control-wrapper.e-ddl > .e-input-group-icon {
    color: var(--ct-text-muted, #a7b0c0);
    background: transparent;
    border-color: var(--ct-border-strong, #3e4654);
    opacity: 1;
}

/* Keep every Syncfusion dialog centered within the viewport. */
.e-dlg-container.e-dlg-center-center {
    align-items: center !important;
    justify-content: center !important;
}

.e-dlg-container.e-dlg-center-center > .e-dialog:not(.cloudtoolz-dialog-position-manual),
.e-dialog.cloudtoolz-centered-dialog {
    margin: 0 !important;
}

.e-dialog.e-popup.detailOfCell:not(.cloudtoolz-dialog-position-manual) {
    width: 98% !important;
    height: 95% !important;
    min-height: 0 !important;
    max-height: 95% !important;
    max-width: 98% !important;
}

:root[data-bs-theme="dark"] {
    color-scheme: dark;
}

:root[data-theme="galaxy"] elsa-studio-root,
:root[data-theme="galaxy"] elsa-workflow-definition-editor-screen,
:root[data-theme="galaxy"] elsa-workflow-instance-viewer-screen {
    color: var(--ct-text, #172033);
    background-color: var(--ct-canvas, #f6f7fb);
    font-family: var(--ct-font-sans, Inter, ui-sans-serif, sans-serif);
}

/* Elsa Studio uses prefixed Tailwind palette utilities. Translate the neutral
   and action colours to the same Galaxy tokens used by Bootstrap and EJ2. */
:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-white {
    background-color: var(--ct-surface, #fff) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-gray-50,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-bg-gray-50:hover {
    background-color: var(--ct-surface-muted, #f9fafb) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-gray-100,
:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-gray-200,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-bg-gray-100:hover,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-bg-gray-200:hover,
:root[data-theme="galaxy"] elsa-studio-root .focus\:elsa-bg-gray-100:focus,
:root[data-theme="galaxy"] elsa-studio-root .active\:elsa-bg-gray-100:active {
    background-color: var(--ct-surface-muted, #f9fafb) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-gray-300 {
    background-color: var(--ct-border-strong, #d0d5dd) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-gray-800 {
    background-color: var(--ct-sidebar, #41519e) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-bg-gray-700:hover {
    background-color: var(--ct-sidebar-hover, rgb(255 255 255 / 0.07)) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-gray-900 {
    background-color: var(--ct-sidebar-active, rgb(255 255 255 / 0.14)) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-text-black,
:root[data-theme="galaxy"] elsa-studio-root .elsa-text-gray-900,
:root[data-theme="galaxy"] elsa-studio-root .elsa-text-gray-800,
:root[data-theme="galaxy"] elsa-studio-root .elsa-text-gray-700,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-text-gray-900:hover,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-text-gray-700:hover,
:root[data-theme="galaxy"] elsa-studio-root .focus\:elsa-text-gray-900:focus {
    color: var(--ct-text, #172033) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-text-gray-600,
:root[data-theme="galaxy"] elsa-studio-root .elsa-text-gray-500,
:root[data-theme="galaxy"] elsa-studio-root .elsa-text-gray-400,
:root[data-theme="galaxy"] elsa-studio-root .elsa-text-gray-300,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-text-gray-600:hover,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-text-gray-500:hover,
:root[data-theme="galaxy"] elsa-studio-root .focus-within\:elsa-text-gray-600:focus-within {
    color: var(--ct-text-muted, #667085) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-gray-800.elsa-text-gray-300,
:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-gray-800 .elsa-text-gray-300 {
    color: var(--ct-sidebar-text, #f5f6ff) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-border-gray-100,
:root[data-theme="galaxy"] elsa-studio-root .elsa-border-gray-200,
:root[data-theme="galaxy"] elsa-studio-root .elsa-border-gray-300,
:root[data-theme="galaxy"] elsa-studio-root .elsa-border-gray-400,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-border-gray-300:hover {
    border-color: var(--ct-border, #e4e7ec) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-divide-gray-100 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="galaxy"] elsa-studio-root .elsa-divide-gray-200 > :not([hidden]) ~ :not([hidden]),
:root[data-theme="galaxy"] elsa-studio-root .elsa-divide-gray-300 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--ct-border, #e4e7ec) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-blue-50,
:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-blue-100 {
    background-color: var(--ct-brand-soft, #eef0fa) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-blue-400,
:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-blue-500,
:root[data-theme="galaxy"] elsa-studio-root .elsa-bg-blue-600 {
    background-color: var(--ct-action, #41519e) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-bg-blue-600:hover,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-bg-blue-700:hover,
:root[data-theme="galaxy"] elsa-studio-root .active\:elsa-bg-blue-700:active {
    background-color: var(--ct-action-hover, #354483) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-text-blue-300,
:root[data-theme="galaxy"] elsa-studio-root .elsa-text-blue-400,
:root[data-theme="galaxy"] elsa-studio-root .elsa-text-blue-500,
:root[data-theme="galaxy"] elsa-studio-root .elsa-text-blue-600,
:root[data-theme="galaxy"] elsa-studio-root .elsa-text-blue-700,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-text-blue-500:hover,
:root[data-theme="galaxy"] elsa-studio-root .focus\:elsa-text-blue-500:focus {
    color: var(--ct-brand, #41519e) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-border-blue-300,
:root[data-theme="galaxy"] elsa-studio-root .elsa-border-blue-500,
:root[data-theme="galaxy"] elsa-studio-root .elsa-border-blue-600,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-border-blue-500:hover,
:root[data-theme="galaxy"] elsa-studio-root .focus\:elsa-border-blue-300:focus,
:root[data-theme="galaxy"] elsa-studio-root .focus\:elsa-border-blue-500:focus {
    border-color: var(--ct-action, #41519e) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-ring-blue-500,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-ring-blue-500:hover,
:root[data-theme="galaxy"] elsa-studio-root .focus\:elsa-ring-blue-500:focus,
:root[data-theme="galaxy"] elsa-studio-root .focus-within\:elsa-ring-blue-500:focus-within {
    --tw-ring-color: var(--ct-focus, #7181cf) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-ring-offset-2,
:root[data-theme="galaxy"] elsa-studio-root .focus\:elsa-ring-offset-2:focus,
:root[data-theme="galaxy"] elsa-studio-root .hover\:elsa-ring-offset-2:hover {
    --tw-ring-offset-color: var(--ct-canvas, #f6f7fb) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-rounded-md {
    border-radius: var(--ct-radius-control, 0.5rem) !important;
}

:root[data-theme="galaxy"] elsa-studio-root .elsa-rounded-lg {
    border-radius: var(--ct-radius-card, 0.75rem) !important;
}

:root[data-theme="galaxy"] elsa-studio-root input:not([type="checkbox"]):not([type="radio"]),
:root[data-theme="galaxy"] elsa-studio-root select,
:root[data-theme="galaxy"] elsa-studio-root textarea {
    color: var(--ct-text, #172033);
    background-color: var(--ct-surface, #fff);
    border-color: var(--ct-border-strong, #d0d5dd);
    border-radius: var(--ct-radius-control, 0.5rem);
}

:root[data-theme="galaxy"] elsa-studio-root input:not([type="checkbox"]):not([type="radio"]):focus,
:root[data-theme="galaxy"] elsa-studio-root select:focus,
:root[data-theme="galaxy"] elsa-studio-root textarea:focus {
    border-color: var(--ct-focus, #7181cf);
    box-shadow: 0 0 0 3px var(--ct-action-ring, rgb(65 81 158 / 0.24));
    outline: 0;
}

:root[data-theme="galaxy"] elsa-studio-root input[type="checkbox"],
:root[data-theme="galaxy"] elsa-studio-root input[type="radio"] {
    color: var(--ct-action, #41519e);
    accent-color: var(--ct-action, #41519e);
    border-color: var(--ct-border-strong, #d0d5dd);
}

:root[data-theme="galaxy"] elsa-studio-root input::placeholder,
:root[data-theme="galaxy"] elsa-studio-root textarea::placeholder {
    color: var(--ct-text-muted, #667085);
}

/* X6 defines its own component palette. Keep its canvas and activity cards on
   the same surface, border, brand, radius and shadow system as the app shell. */
:root[data-theme="galaxy"] elsa-studio-root x6-designer {
    --elsa-x6-canvas: var(--ct-canvas, #f6f7fb);
    --elsa-x6-grid: var(--ct-border-strong, #d0d5dd);
    --elsa-x6-card: var(--ct-surface, #fff);
    --elsa-x6-card-muted: var(--ct-surface-muted, #f9fafb);
    --elsa-x6-border: var(--ct-border, #e4e7ec);
    --elsa-x6-text: var(--ct-text, #172033);
    --elsa-x6-text-muted: var(--ct-text-muted, #667085);
    --elsa-x6-chip-text: var(--ct-text-muted, #667085);
    --elsa-x6-action: var(--ct-brand, #41519e);
    --elsa-x6-start-bg: var(--ct-brand-soft, #eef0fa);
    --elsa-x6-start-border: var(--ct-brand, #41519e);
    --elsa-x6-start-text: var(--ct-brand, #41519e);
    --elsa-x6-activity-icon-bg: var(--ct-brand-soft, #eef0fa);
    --elsa-x6-activity-icon: var(--ct-brand, #41519e);
    --elsa-x6-card-shadow: inset 0 0 0 1px var(--ct-border, #e4e7ec), var(--ct-shadow-sm, 0 1px 2px rgb(16 24 40 / 0.04));
}

:root[data-theme="galaxy"] elsa-studio-root .x6-node-selected [data-activity-card] {
    outline-color: var(--ct-focus, #7181cf);
}

/* Newer Elsa panels still emit a few inline palette values. Translate them in
   both themes so compiled bundles follow the CloudToolz visual system too. */
:root[data-theme="galaxy"] elsa-studio-root [style*="background: #ffffff"],
:root[data-theme="galaxy"] elsa-studio-root [style*="background:#ffffff"],
:root[data-theme="galaxy"] elsa-studio-root [style*="background: rgb(255, 255, 255)"],
:root[data-theme="galaxy"] elsa-studio-root .activity-editor-form {
    color: var(--ct-text, #172033) !important;
    background-color: var(--ct-surface, #fff) !important;
}

:root[data-theme="galaxy"] elsa-studio-root [style*="color: #111827"],
:root[data-theme="galaxy"] elsa-studio-root [style*="color:#111827"],
:root[data-theme="galaxy"] elsa-studio-root [style*="color: rgb(17, 24, 39)"],
:root[data-theme="galaxy"] elsa-studio-root .activity-editor-form h3 {
    color: var(--ct-text, #172033) !important;
}

:root[data-theme="galaxy"] elsa-studio-root [style*="color: #6b7280"],
:root[data-theme="galaxy"] elsa-studio-root [style*="color:#6b7280"],
:root[data-theme="galaxy"] elsa-studio-root [style*="color: rgb(107, 114, 128)"],
:root[data-theme="galaxy"] elsa-studio-root [style*="color: #9ca3af"],
:root[data-theme="galaxy"] elsa-studio-root [style*="color:#9ca3af"] {
    color: var(--ct-text-muted, #667085) !important;
}

:root[data-theme="galaxy"] elsa-studio-root [style*="background: #f3f4f6"],
:root[data-theme="galaxy"] elsa-studio-root [style*="background:#f3f4f6"],
:root[data-theme="galaxy"] elsa-studio-root [style*="background: rgb(243, 244, 246)"],
:root[data-theme="galaxy"] elsa-studio-root [style*="background: #f9fafb"],
:root[data-theme="galaxy"] elsa-studio-root [style*="background:#f9fafb"],
:root[data-theme="galaxy"] elsa-studio-root [style*="background: rgb(249, 250, 251)"] {
    background-color: var(--ct-surface-muted, #f9fafb) !important;
}

:root[data-theme="galaxy"] elsa-studio-root [style*="background: #dbeafe"],
:root[data-theme="galaxy"] elsa-studio-root [style*="background:#dbeafe"],
:root[data-theme="galaxy"] elsa-studio-root [style*="background: rgb(219, 234, 254)"] {
    background-color: var(--ct-brand-soft, #eef0fa) !important;
}

:root[data-theme="galaxy"] elsa-studio-root [style*="color: #1d4ed8"],
:root[data-theme="galaxy"] elsa-studio-root [style*="color:#1d4ed8"],
:root[data-theme="galaxy"] elsa-studio-root [style*="color: rgb(29, 78, 216)"] {
    color: var(--ct-brand, #41519e) !important;
}

/* Workflow journal rows and value blocks are rendered with inline light
   colours. Keep the selectors as a compatibility layer for existing compiled
   Elsa bundles; current source also emits semantic classes and theme tokens. */
:root[data-theme="galaxy"] elsa-workflow-instance-journal .elsa-workflow-journal-value,
:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="background: #f9fafb"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="background:#f9fafb"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="background: rgb(249, 250, 251)"] {
    color: var(--ct-text, #172033) !important;
    background-color: var(--ct-surface-muted, #f9fafb) !important;
    border-color: var(--ct-border, #e4e7ec) !important;
}

:root[data-theme="galaxy"] elsa-workflow-instance-journal .elsa-workflow-journal-record-selected,
:root[data-theme="galaxy"] elsa-workflow-instance-journal [data-record-id][style*="background: #eff6ff"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [data-record-id][style*="background:#eff6ff"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [data-record-id][style*="background: rgb(239, 246, 255)"] {
    background-color: var(--ct-brand-soft, #eef0fa) !important;
}

:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="color: #374151"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="color:#374151"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="color: rgb(55, 65, 81)"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="--ct-text, #374151"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="--ct-text,#374151"] {
    color: var(--ct-text, #172033) !important;
}

:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="color: #4b5563"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="color:#4b5563"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="color: rgb(75, 85, 99)"],
:root[data-theme="galaxy"] elsa-workflow-instance-journal [style*="color: rgb(156, 163, 175)"] {
    color: var(--ct-text-muted, #667085) !important;
}

:root[data-theme="galaxy"] elsa-studio-root [style*="border-bottom: 1px solid #f3f4f6"],
:root[data-theme="galaxy"] elsa-studio-root [style*="border-bottom: 1px solid #f9fafb"],
:root[data-theme="galaxy"] elsa-studio-root [style*="border-top: 1px solid #f3f4f6"],
:root[data-theme="galaxy"] elsa-studio-root [style*="border-left: 1px solid #e5e7eb"],
:root[data-theme="galaxy"] elsa-studio-root [style*="border: 1px solid #e5e7eb"] {
    border-color: var(--ct-border, #e4e7ec) !important;
}

/* Legacy page CSS and inline styles that otherwise force light surfaces. */
:root[data-theme="galaxy"][data-bs-theme="dark"] [style*="background:white"],
:root[data-theme="galaxy"][data-bs-theme="dark"] [style*="background: white"],
:root[data-theme="galaxy"][data-bs-theme="dark"] [style*="background-color:white"],
:root[data-theme="galaxy"][data-bs-theme="dark"] [style*="background-color: white"],
:root[data-theme="galaxy"][data-bs-theme="dark"] #marginMessages,
:root[data-theme="galaxy"][data-bs-theme="dark"] button.clipboard,
:root[data-theme="galaxy"][data-bs-theme="dark"] .formbuilder,
:root[data-theme="galaxy"][data-bs-theme="dark"] .ui-datepicker,
:root[data-theme="galaxy"][data-bs-theme="dark"] .context-menu-list {
    color: var(--ct-text) !important;
    background-color: var(--ct-surface) !important;
    border-color: var(--ct-border) !important;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .ui-datepicker-title,
:root[data-theme="galaxy"][data-bs-theme="dark"] .context-menu-item,
:root[data-theme="galaxy"][data-bs-theme="dark"] .zen-export-submessage {
    color: var(--ct-text-muted) !important;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .flowz-continue-banner {
    color: var(--ct-text);
    background: var(--ct-brand-soft);
    border-color: var(--ct-border-strong);
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .flowz-continue-dismiss {
    color: var(--ct-text-muted);
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .flowz-continue-dismiss:hover {
    color: var(--ct-text);
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .appstore-filterbar {
    color: var(--ct-text) !important;
    background: var(--ct-surface) !important;
    border-color: var(--ct-border) !important;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .appstore-filterbar .filter-label {
    color: var(--ct-text-muted) !important;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .app-tag {
    color: #fec84b !important;
    background: rgb(181 71 8 / 0.18) !important;
}

/* CodeMirror 5 is still used by Active Query Builder. */
:root[data-theme="galaxy"][data-bs-theme="dark"] .CodeMirror,
:root[data-theme="galaxy"][data-bs-theme="dark"] .CodeMirror-gutters {
    color: var(--ct-text) !important;
    background: var(--ct-surface) !important;
    border-color: var(--ct-border) !important;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .CodeMirror-linenumber {
    color: var(--ct-text-muted) !important;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .CodeMirror-cursor {
    border-left-color: var(--ct-text) !important;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .CodeMirror-selected {
    background: rgb(113 129 207 / 0.3) !important;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .cm-s-default .cm-keyword,
:root[data-theme="galaxy"][data-bs-theme="dark"] .cm-s-default .cm-operator {
    color: #c4b5fd;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .cm-s-default .cm-number,
:root[data-theme="galaxy"][data-bs-theme="dark"] .cm-s-default .cm-atom {
    color: #fdb022;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .cm-s-default .cm-string {
    color: #6ce9a6;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .cm-s-default .cm-comment {
    color: #98a2b3;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .cm-s-default .cm-variable,
:root[data-theme="galaxy"][data-bs-theme="dark"] .cm-s-default .cm-property,
:root[data-theme="galaxy"][data-bs-theme="dark"] .cm-s-default .cm-def {
    color: #84caff;
}

/* Keep Syncfusion MultiSelect pills readable across every Galaxy form. */
:root[data-theme="galaxy"] .e-multi-select-wrapper .e-chips {
    border: 1px solid #9fbcf5 !important;
    border-radius: 999px !important;
    background: #dce8ff !important;
    box-shadow: none !important;
}

:root[data-theme="galaxy"] .e-multi-select-wrapper .e-chips .e-chipcontent,
:root[data-theme="galaxy"] .e-multi-select-wrapper .e-chips .e-chips-close,
:root[data-theme="galaxy"] .e-multi-select-wrapper .e-chips .e-chips-close::before {
    -webkit-text-fill-color: #173f82 !important;
    color: #173f82 !important;
}

:root[data-theme="galaxy"] .e-multi-select-wrapper .e-chips:hover,
:root[data-theme="galaxy"] .e-multi-select-wrapper .e-chips.e-chip-selected {
    border-color: #638fdf !important;
    background: #c9dbff !important;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .e-multi-select-wrapper .e-chips {
    border-color: #5877b3 !important;
    background: #263f70 !important;
}

:root[data-theme="galaxy"][data-bs-theme="dark"] .e-multi-select-wrapper .e-chips .e-chipcontent,
:root[data-theme="galaxy"][data-bs-theme="dark"] .e-multi-select-wrapper .e-chips .e-chips-close,
:root[data-theme="galaxy"][data-bs-theme="dark"] .e-multi-select-wrapper .e-chips .e-chips-close::before {
    -webkit-text-fill-color: #f0f5ff !important;
    color: #f0f5ff !important;
}