/*
 * Horizon visual compatibility layer for Bootstrap 5 + DevExpress Blazor 26.1.
 *
 * Keep brand/theme colors here instead of scattering DevExpress/Bootstrap
 * overrides across individual pages and grids. The v24 grid selection color
 * is #28ACCC (RGB 40, 172, 204), matching the legacy Horizon appearance.
 */

:root {
    --gtc-primary: #28accc;
    --gtc-primary-rgb: 40, 172, 204;
    --gtc-primary-light: #2fe5e0;
    --gtc-primary-accent: #1ab9df;
    --gtc-primary-hover: #159fbe;
    --gtc-primary-active: #128aa5;
    --gtc-primary-contrast: #ffffff;

    --gtc-selection-bg: #28accc;
    --gtc-selection-color: #ffffff;
    --gtc-selection-hover-bg: #159fbe;
    --gtc-selection-indicator-border: #ffffff;
    --gtc-checkbox-bg: #ffffff;
    --gtc-checkbox-border: #919192;
    --gtc-focus-ring: rgba(40, 172, 204, 0.35);
}

/* Bootstrap 5 bridge for the default Horizon theme. */
html[data-gtc-theme="default"] {
    --bs-primary: var(--gtc-primary);
    --bs-primary-rgb: var(--gtc-primary-rgb);
}

html[data-gtc-theme="default"] .btn-primary {
    color: var(--gtc-primary-contrast) !important;
    background-color: var(--gtc-primary) !important;
    border-color: var(--gtc-primary) !important;
}

html[data-gtc-theme="default"] .btn-primary:hover,
html[data-gtc-theme="default"] .btn-primary:focus {
    color: var(--gtc-primary-contrast) !important;
    background-color: var(--gtc-primary-hover) !important;
    border-color: var(--gtc-primary-hover) !important;
}

html[data-gtc-theme="default"] .btn-primary:focus {
    box-shadow: 0 0 0 0.25rem var(--gtc-focus-ring) !important;
}

html[data-gtc-theme="default"] .btn-primary:active,
html[data-gtc-theme="default"] .btn-primary.active {
    color: var(--gtc-primary-contrast) !important;
    background-color: var(--gtc-primary-active) !important;
    border-color: var(--gtc-primary-active) !important;
}

html[data-gtc-theme="default"] .btn-outline-primary {
    color: var(--gtc-primary) !important;
    border-color: var(--gtc-primary) !important;
}

html[data-gtc-theme="default"] .btn-outline-primary:hover,
html[data-gtc-theme="default"] .btn-outline-primary:focus,
html[data-gtc-theme="default"] .btn-outline-primary:active,
html[data-gtc-theme="default"] .btn-outline-primary.active {
    color: var(--gtc-primary-contrast) !important;
    background-color: var(--gtc-primary) !important;
    border-color: var(--gtc-primary) !important;
}

html[data-gtc-theme="default"] .form-check-input:checked {
    background-color: var(--gtc-primary) !important;
    border-color: var(--gtc-primary) !important;
}

/*
 * DevExpress primary buttons, including primary toolbar items.
 *
 * Only bridge the DevExpress theme variables here. Do NOT force direct
 * background/color/border properties on every .dxbl-btn-primary. GTC uses
 * semantic classes such as save-button, cancel-button, menu-app-bar-button,
 * delete-button, etc. Those classes intentionally override the DevExpress
 * render style (for example: dark teal Save, grey Cancel, transparent burger).
 * Keeping this layer variable-only lets generic Primary buttons inherit the
 * Horizon cyan while preserving those established component-specific styles.
 */
html[data-gtc-theme="default"] .dxbl-btn-primary {
    --dxbl-btn-bg: var(--gtc-primary) !important;
    --dxbl-btn-hover-bg: var(--gtc-primary-hover) !important;
    --dxbl-btn-focus-bg: var(--gtc-primary) !important;
    --dxbl-btn-active-bg: var(--gtc-primary-active) !important;
    --dxbl-btn-border-color: var(--gtc-primary) !important;
    --dxbl-btn-hover-border-color: var(--gtc-primary-hover) !important;
    --dxbl-btn-focus-border-color: var(--gtc-primary) !important;
    --dxbl-btn-active-border-color: var(--gtc-primary-active) !important;
}

/*
 * DevExpress grid selection/focus. These internal --dxbl-* variables are
 * intentionally isolated in this compatibility file so a future DevExpress
 * upgrade has one migration point.
 */
html[data-gtc-theme="default"] .dxbl-grid {
    --dxbl-grid-selection-bg: var(--gtc-selection-bg) !important;
    --dxbl-grid-selection-color: var(--gtc-selection-color) !important;
    --dxbl-grid-selection-focus-bg: var(--gtc-selection-bg) !important;
    --dxbl-grid-selection-focus-color: var(--gtc-selection-color) !important;
    --dxbl-grid-focus-bg: var(--gtc-selection-bg) !important;
    --dxbl-grid-focus-color: var(--gtc-selection-color) !important;
    --dxbl-grid-focus-frame-color: var(--gtc-primary) !important;
}

/* DevExpress checkbox theme bridge. */
html[data-gtc-theme="default"] .dxbl-checkbox {
    --dxbl-checkbox-switch-checked-bg: var(--gtc-primary) !important;
    --dxbl-checkbox-check-element-checked-bg: var(--gtc-selection-bg) !important;
    --dxbl-checkbox-check-element-checked-hover-bg: var(--gtc-selection-hover-bg) !important;
    --dxbl-checkbox-check-element-unchecked-bg: var(--gtc-checkbox-bg) !important;
    --dxbl-checkbox-check-element-unchecked-hover-bg: var(--gtc-checkbox-bg) !important;
}

/*
 * Preserve the legacy GTC grid selection indicator: cyan box + white glyph.
 * The explicit fallback is scoped to grid selection cells so other checkbox
 * layouts continue to use the standard DevExpress rendering model.
 */
html[data-gtc-theme="default"] .dxbl-grid-selection-cell .dxbl-checkbox.dxbl-checkbox-checked .dxbl-checkbox-check-element,
html[data-gtc-theme="default"] .dxbl-grid-selection-cell .dxbl-checkbox.dxbl-checkbox-indeterminate .dxbl-checkbox-check-element {
    background-color: var(--gtc-selection-bg) !important;
    border-color: var(--gtc-selection-indicator-border) !important;
    opacity: 1 !important;
}

html[data-gtc-theme="default"] .dxbl-grid-selection-cell .dxbl-checkbox.dxbl-checkbox-checked .dxbl-icon-set-default,
html[data-gtc-theme="default"] .dxbl-grid-selection-cell .dxbl-checkbox.dxbl-checkbox-checked .dxbl-icon-set-default *,
html[data-gtc-theme="default"] .dxbl-grid-selection-cell .dxbl-checkbox.dxbl-checkbox-indeterminate .dxbl-icon-set-default,
html[data-gtc-theme="default"] .dxbl-grid-selection-cell .dxbl-checkbox.dxbl-checkbox-indeterminate .dxbl-icon-set-default * {
    color: var(--gtc-selection-color) !important;
    fill: var(--gtc-selection-color) !important;
    stroke: var(--gtc-selection-color) !important;
}

html[data-gtc-theme="default"] .dxbl-grid-selection-cell .dxbl-checkbox.dxbl-checkbox-unchecked .dxbl-checkbox-check-element {
    background-color: var(--gtc-checkbox-bg) !important;
    border-color: var(--gtc-checkbox-border) !important;
}

/* Keep the compact GTC grid scrollbars on the same Horizon palette. */
.dxbl-scroll-viewer:has(.dxbl-grid-table) .dxbl-scroll-viewer-scroll-thumb {
    background-color: var(--gtc-primary-accent) !important;
}

.dxbl-scroll-viewer:has(.dxbl-grid-table) .dxbl-scroll-viewer-scroll-thumb:hover {
    background-color: var(--gtc-primary-hover) !important;
}