/* ============================================================
   Syncfusion overrides — pin Syncfusion control surfaces to our
   centralised CSS variables so the dark/light swap reaches every
   grid, dialog, dropdown, accordion, etc.

   Loaded AFTER the Syncfusion theme CSS in App.razor so the
   declarations here win on identical specificity.
   ============================================================ */

/* Common Bootstrap-style CSS variables Syncfusion's themes consume */
:root,
[data-theme="light"],
[data-theme="dark"],
html.dark {
    --bs-body-bg:        var(--color-surface);
    --bs-body-color:     var(--color-text);
    --bs-border-color:   var(--color-border);
    --bs-primary:        var(--color-primary);
    --bs-secondary-bg:   var(--color-surface-2);
}

/* Major Syncfusion surfaces */
.e-grid,
.e-grid .e-headercontent,
.e-grid .e-content,
.e-grid .e-gridheader,
.e-grid .e-gridcontent,
.e-toolbar,
.e-dlg-container,
.e-dialog,
.e-popup,
.e-popup-open,
.e-dropdownbase,
.e-acrdn-root,
.e-acrdn-content,
.e-tab,
.e-tab .e-content,
.e-pager {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Alt row + hover */
.e-grid .e-altrow {
    background: var(--color-surface-2) !important;
}
.e-grid .e-row:hover,
.e-grid .e-row.e-rowselect,
.e-grid .e-row.e-rowselect:hover {
    background: color-mix(in oklab, var(--color-primary) 8%, var(--color-surface)) !important;
}

/* Grid header */
.e-grid .e-headercell,
.e-grid .e-headercelldiv,
.e-grid .e-gridheader .e-headercontent {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Inputs — base wrapper colours (FormField required/error tints win over this) */
.e-input-group:not(.e-error),
.e-input-group.e-outline:not(.e-error),
.e-ddl.e-control-wrapper,
.e-ddl.e-control-wrapper.e-outline,
.e-float-input,
.e-float-input.e-outline {
    background: var(--color-panel) !important;
    border-color: var(--color-border-strong) !important;
    color: var(--color-text) !important;
}
.e-input-group input.e-input,
.e-input-group textarea.e-input,
.e-ddl input.e-input {
    color: var(--color-text) !important;
    background: transparent !important;
}

/* Placeholders + floating labels track the muted text token */
.e-input-group input.e-input::placeholder,
.e-input-group textarea.e-input::placeholder,
.e-ddl input.e-input::placeholder,
.e-input-group.e-outline .e-float-text,
.e-ddl.e-outline .e-float-text,
.e-float-input.e-outline .e-float-text {
    color: var(--color-muted) !important;
}

/* Dropdown popup list */
.e-dropdownbase .e-list-item {
    background: var(--color-panel) !important;
    color: var(--color-text) !important;
}
.e-dropdownbase .e-list-item:hover {
    background: var(--color-surface-2) !important;
}
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-hover.e-active {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

/* Dialog header / footer */
.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header-content {
    background: var(--color-surface-2) !important;
    color: var(--color-text) !important;
    border-bottom: 1px solid var(--color-border) !important;
}
.e-dialog .e-footer-content {
    background: var(--color-surface-2) !important;
    border-top: 1px solid var(--color-border) !important;
}

/* Pager */
.e-pager,
.e-pager .e-pagercontainer,
.e-pager .e-numericitem {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
.e-pager .e-numericitem.e-currentitem,
.e-pager .e-numericitem.e-currentitem:hover {
    background: var(--color-primary) !important;
    color: var(--color-on-primary) !important;
}

/* Toolbar / buttons inside grid toolbar */
.e-toolbar .e-toolbar-items,
.e-toolbar .e-toolbar-item .e-tbar-btn {
    background: transparent !important;
    color: var(--color-text) !important;
}

/* Accordion */
.e-acrdn-root .e-acrdn-item,
.e-acrdn-root .e-acrdn-header,
.e-acrdn-root .e-acrdn-panel {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Tab strip */
.e-tab .e-tab-header,
.e-tab .e-tab-header .e-toolbar-items {
    background: var(--color-surface-2) !important;
}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
    color: var(--color-primary) !important;
}

/* Tooltip */
.e-tooltip-wrap,
.e-tooltip-wrap .e-tip-content {
    background: var(--color-surface-elevated) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}

/* Toast */
.e-toast-container .e-toast {
    background: var(--color-surface-elevated) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}