/*
 * ORAGO — Syncfusion Blazor theme overrides
 *
 * Syncfusion ships with bootstrap5.css (loaded in App.razor). Its default
 * palette, typography, borders, and row paddings do NOT match our
 * `.grid` / `.matrix` tables (see Roles & Permissions page) or the
 * one-colour-one-meaning rule in UI_HANDOVER §2.
 *
 * This file brings every Syncfusion surface we use — SfGrid, SfTreeGrid,
 * SfTab, SfDialog, SfToolbar, SfDropDownList, SfTextBox — into token
 * alignment so the distinction between native and Syncfusion tables
 * disappears visually. Load order: Syncfusion theme → our tokens/layout
 * → this file (last wins at equal specificity).
 *
 * Scope:
 *   1. Typography (Barlow, fs-small, fs-micro header)
 *   2. Colour (tokens only — never raw hex)
 *   3. Borders (flat, our --orago-border)
 *   4. Padding (6px 10px to match table.grid)
 *   5. Zebra striping + hover + selection parity
 *   6. Dark-mode parity (inherits via data-theme="dark")
 */

/* =====================================================================
 * Icon font guard — Syncfusion's bootstrap5 theme ships an icon font named
 * "e-icons" used by every glyph (pager arrows, dialog close, calendar
 * prev/next, dropdown carets, etc.). Any rule that overrides font-family on
 * a parent of the .e-icons span will turn the glyph into a tofu box. Pin
 * the font globally so the rest of this file (and app.css) can safely apply
 * Barlow to Syncfusion containers without breaking icons.
 * ===================================================================== */
.e-icons,
.e-icons::before,
.e-btn-icon,
[class*="e-icon-"]::before {
    font-family: 'e-icons' !important;
}

/* =====================================================================
 * SfGrid / SfTreeGrid — data tables
 * ===================================================================== */

.e-grid,
.e-treegrid {
    font-family: var(--ds-font-sans);
    font-size: var(--fs-small);
    color: var(--orago-text);
    background: transparent;
    border: 1px solid var(--orago-border);
    border-radius: var(--radius-lg);
    box-shadow: none;
}

/* Header row — matches table.grid th: uppercase, muted, micro font, surface-alt bg. */
.e-grid .e-gridheader,
.e-treegrid .e-gridheader {
    background: var(--orago-surface-alt);
    border-bottom: 1px solid var(--orago-border);
    padding: 0;
}
.e-grid .e-headercell,
.e-grid .e-detailheadercell,
.e-treegrid .e-headercell {
    background: var(--orago-surface-alt);
    color: var(--orago-text-muted);
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 10px;
    border-color: var(--orago-border);
    border-bottom: 1px solid var(--orago-border);
    height: auto;
    line-height: 14px;
}
.e-grid .e-headercelldiv,
.e-treegrid .e-headercelldiv {
    color: inherit;
    font: inherit;
    padding: 0;
    height: auto;
    line-height: inherit;
}
.e-grid .e-sortfilterdiv,
.e-grid .e-sortnumber {
    color: var(--orago-text-soft);
}

/* Body cells — matches table.grid td padding + border + colour. */
.e-grid,
.e-grid > div,
.e-grid .e-gridcontent,
.e-grid .e-content,
.e-grid .e-table,
.e-grid .e-gridheader,
.e-grid .e-gridheader .e-table,
.e-grid .e-frozencontent,
.e-grid .e-frozenheader,
.e-treegrid,
.e-treegrid > div,
.e-treegrid .e-gridcontent,
.e-treegrid .e-content,
.e-treegrid .e-table,
.e-treegrid .e-gridheader,
.e-treegrid .e-gridheader .e-table {
    background: var(--orago-surface) !important;
}
.e-grid .e-row,
.e-treegrid .e-row {
    background: transparent;
}
/* Empty state row — the big visible white area on pages with no data. */
.e-grid .e-emptyrow,
.e-grid .e-emptyrow td,
.e-treegrid .e-emptyrow,
.e-treegrid .e-emptyrow td {
    background: var(--orago-surface) !important;
    color: var(--orago-text-muted) !important;
}
.e-grid .e-rowcell,
.e-grid .e-row .e-rowcell,
.e-grid tr.e-row td.e-rowcell,
.e-treegrid .e-rowcell,
.e-treegrid .e-row .e-rowcell,
.e-treegrid tr.e-row td.e-rowcell {
    background: transparent !important;
    color: var(--orago-text) !important;
    font-size: var(--fs-small);
    line-height: 20px;
    padding: 6px 10px;
    border-color: var(--orago-border);
    border-bottom: 1px solid var(--orago-border);
    border-top: 0;
    vertical-align: middle;
    opacity: 1;
}
/* Some Syncfusion templates stamp a nested span/link with its own color — drag
   those back to our text token too. */
.e-grid .e-rowcell *:not(.btn):not(button):not(a.btn):not(.chip),
.e-treegrid .e-rowcell *:not(.btn):not(button):not(a.btn):not(.chip) {
    color: inherit;
}

/* Dark-mode weight boost — mirror the layout.css rule for native table.grid
   so Syncfusion row cells match the optical density of hand-authored tables.
   Barlow 400 renders thin against deep surfaces; 500 restores legibility. */
[data-theme="dark"] .e-grid .e-rowcell,
[data-theme="dark"] .e-treegrid .e-rowcell {
    font-weight: 500;
}

/* Right-align numeric columns — consumers opt in with `e-rightalign`. */
.e-grid .e-rowcell.e-rightalign,
.e-grid .e-headercell.e-rightalign {
    font-family: var(--ds-font-mono);
    font-feature-settings: "tnum";
    text-align: right;
}

/* Zebra striping — mirror table.grid tbody tr:nth-child(even). Uses
   surface-alt at 50% opacity so light + dark themes both land on the same
   ratio against --orago-surface. */
.e-grid .e-row.e-altrow,
.e-grid .e-row.e-altrow > .e-rowcell,
.e-treegrid .e-row.e-altrow,
.e-treegrid .e-row.e-altrow > .e-rowcell {
    background: color-mix(in srgb, var(--orago-surface-alt) 50%, transparent);
}

/* Hover — mirror table.grid tbody tr:hover. */
.e-grid .e-row:hover > .e-rowcell,
.e-grid .e-row.e-altrow:hover > .e-rowcell,
.e-treegrid .e-row:hover > .e-rowcell,
.e-treegrid .e-row.e-altrow:hover > .e-rowcell {
    background: var(--orago-surface-alt);
}

/* Selection — mirror .row-selected from layout.css. Syncfusion applies
   `.e-selectionbackground` + `.e-active`; flatten both to our token. */
.e-grid .e-row.e-selectionbackground > .e-rowcell,
.e-grid .e-row .e-rowcell.e-active,
.e-grid .e-row.e-active > .e-rowcell,
.e-treegrid .e-row.e-selectionbackground > .e-rowcell,
.e-treegrid .e-row.e-active > .e-rowcell {
    background: var(--orago-primary-soft);
    color: var(--orago-primary);
    border-color: var(--orago-primary);
}

/* Focused cell outline — keep the 2px focus ring from UI_HANDOVER §12. */
.e-grid .e-rowcell.e-focus,
.e-grid .e-rowcell.e-focused,
.e-treegrid .e-rowcell.e-focus {
    box-shadow: inset 0 0 0 2px var(--orago-primary);
    background: var(--orago-primary-soft);
}

/* Grouping / drop area — match filter-rail muted styling. */
.e-grid .e-groupdroparea,
.e-treegrid .e-groupdroparea {
    background: var(--orago-surface-alt);
    color: var(--orago-text-soft);
    font-size: var(--fs-small);
    border-bottom: 1px solid var(--orago-border);
}

/* Filter bar cells — use our input-wrap look without the wrap. */
.e-grid .e-filterbarcell,
.e-grid .e-filterbarcell input {
    background: transparent;
    color: var(--orago-text);
    font-size: var(--fs-small);
    border-color: var(--orago-border);
}

/* =====================================================================
 * Pager — flat chrome matching our .btn sm surfaces.
 * Syncfusion stamps a lot of nested divs (e-first/prev/next/last, e-pp/np,
 * e-icons, e-nextpagedisabled, etc.) with their own backgrounds. Cover
 * every surface so NO pager button renders white on dark.
 * ===================================================================== */
.e-grid .e-gridpager,
.e-pager,
.e-pager .e-pagercontainer,
.e-pager .e-parentmsgbar,
.e-pager .e-pagesizes,
.e-pager .e-pagerexternalmsg {
    background: transparent !important;
    color: var(--orago-text);
    font-family: var(--ds-font-sans);
    font-size: var(--fs-small);
}
/* Backgrounds-only universal kill — Syncfusion paints small bg fills on many
   nested wrappers (e-pp/e-np/e-firstpagedisabled etc.) that we want flattened.
   Crucially: NO font-family here. The first/prev/next/last buttons embed
   <span class="e-icons"> children whose glyphs come from the 'e-icons' icon
   font shipped with the Syncfusion theme; overriding font-family on every
   descendant turned every nav arrow into a U+E7xx tofu glyph. */
.e-pager *,
.e-grid .e-gridpager * {
    background-color: transparent !important;
}
.e-grid .e-gridpager,
.e-pager {
    border-top: 1px solid var(--orago-border);
    padding: 6px 10px;
}
.e-pager .e-pagercontainer {
    border: 0;
    border-radius: 0;
    margin: 0;
}
/* Belt-and-braces: re-anchor the icon font in case any other rule (in this
   file, in app.css, or in dark-mode overrides) snags the descendant span. */
.e-pager .e-icons,
.e-pager .e-icons::before,
.e-pager [class*="e-icon-"]::before {
    font-family: 'e-icons' !important;
}

/* Every clickable pager cell — page numbers + the four nav arrows (first /
   prev / next / last). `inline-flex` is required to centre the e-icons
   ::before glyph; without it the codepoint sits at baseline (bottom-left)
   of the 28px box. PP/NP and mobile twins are explicitly forced hidden
   below so this flex display can't re-show them. */
.e-pager .e-link,
.e-pager .e-numericitem,
.e-pager .e-firstpage,
.e-pager .e-prevpage,
.e-pager .e-nextpage,
.e-pager .e-lastpage,
.e-pager .e-firstpagedisabled,
.e-pager .e-prevpagedisabled,
.e-pager .e-nextpagedisabled,
.e-pager .e-lastpagedisabled,
.e-pager .e-pagerbutton {
    background: var(--orago-surface) !important;
    color: var(--orago-text) !important;
    border: 1px solid var(--orago-border) !important;
    border-radius: var(--radius);
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    margin: 0 2px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}
/* Hide the elements Syncfusion ships for layouts we never use:
     – mobile-only nav twins (.e-mfirst etc.) — desktop ignores them;
     – PreviousPagerSet / NextPagerSet chevrons (.e-pp / .e-np) — they only
       matter on grids with more numeric pages than fit in the strip, which
       isn't a configuration we currently use. If we ever need them, drop
       this rule and add a style block matching the nav-arrow chrome. */
.e-pager .e-mfirst,
.e-pager .e-mprev,
.e-pager .e-mnext,
.e-pager .e-mlast,
.e-pager div.e-pp,
.e-pager div.e-np {
    display: none !important;
}
.e-pager .e-link:hover,
.e-pager .e-numericitem:hover,
.e-pager .e-firstpage:hover,
.e-pager .e-prevpage:hover,
.e-pager .e-nextpage:hover,
.e-pager .e-lastpage:hover,
.e-pager .e-pagerbutton:hover {
    background: var(--orago-surface-alt) !important;
    color: var(--orago-text) !important;
    border-color: var(--orago-primary) !important;
}

/* Current (selected) page pill. */
.e-pager .e-currentitem,
.e-pager .e-numericitem.e-currentitem,
.e-pager .e-active,
.e-pager .e-numericitem.e-currentitem.e-active {
    background: var(--orago-primary) !important;
    color: var(--neutral-0) !important;
    border-color: var(--orago-primary) !important;
}

/* Disabled first/prev/next/last — muted, still on our surface. */
.e-pager .e-firstpagedisabled,
.e-pager .e-prevpagedisabled,
.e-pager .e-nextpagedisabled,
.e-pager .e-lastpagedisabled,
.e-pager .e-disable {
    background: var(--orago-surface) !important;
    color: var(--orago-text-soft) !important;
    border-color: var(--orago-border) !important;
    opacity: 0.6;
    cursor: not-allowed;
}

/* Pager icons themselves (font-based glyphs). */
.e-pager .e-icons,
.e-pager .e-icon-first,
.e-pager .e-icon-prev,
.e-pager .e-icon-next,
.e-pager .e-icon-last {
    color: inherit !important;
    background: transparent !important;
}

/* "1 of N pages (X items)" message on the right. */
.e-pager .e-parentmsgbar,
.e-pager .e-pagenomsg,
.e-pager .e-pagecountmsg {
    color: var(--orago-text-muted);
    background: transparent !important;
}

/* Empty-state placeholder — keep it muted, not dramatic. */
.e-grid .e-emptyrow,
.e-treegrid .e-emptyrow {
    color: var(--orago-text-muted);
    font-size: var(--fs-small);
    text-align: center;
    padding: 24px 10px;
}

/* Checkbox column — lightweight chrome. */
.e-grid .e-gridchkbox,
.e-treegrid .e-gridchkbox {
    width: 28px;
    padding: 0 10px;
}

/* TreeGrid expand/collapse icons inherit our primary colour. */
.e-treegrid .e-treegridexpand::before,
.e-treegrid .e-treegridcollapse::before {
    color: var(--orago-text-muted);
}
.e-treegrid .e-row:hover .e-treegridexpand::before,
.e-treegrid .e-row:hover .e-treegridcollapse::before {
    color: var(--orago-primary);
}

/* =====================================================================
 * SfToolbar (used above grids)
 * ===================================================================== */
.e-toolbar {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    min-height: 0;
}
.e-toolbar .e-toolbar-items,
.e-toolbar .e-toolbar-item {
    background: transparent;
}
.e-toolbar .e-tbar-btn {
    background: var(--orago-surface);
    color: var(--orago-text);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius);
    font-size: var(--fs-small);
    font-family: inherit;
    padding: 4px 10px;
}
.e-toolbar .e-tbar-btn:hover {
    background: var(--orago-surface-alt);
    border-color: var(--orago-primary);
}

/* =====================================================================
 * SfDialog / SfTooltip — card-like surfaces
 * ===================================================================== */
.e-dialog {
    background: var(--orago-surface);
    color: var(--orago-text);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 40px rgba(15, 20, 27, 0.25);
    font-family: var(--ds-font-sans);
    font-size: var(--fs-body);
}
.e-dialog .e-dlg-header,
.e-dialog .e-dlg-header-content {
    background: transparent;
    color: var(--orago-text);
    border-bottom: 1px solid var(--orago-border);
    font-size: var(--fs-h1);
    font-weight: 600;
}
.e-dialog .e-dlg-content {
    background: var(--orago-surface);
    color: var(--orago-text);
    font-size: var(--fs-body);
}
.e-dialog .e-footer-content {
    background: transparent;
    border-top: 1px solid var(--orago-border);
}
.e-dlg-overlay {
    background: rgba(15, 20, 27, 0.35);
}
.e-tooltip-wrap .e-tip-content {
    background: var(--orago-text);
    color: var(--orago-surface);
    font-family: var(--ds-font-sans);
    font-size: var(--fs-micro);
    padding: 4px 8px;
    border-radius: var(--radius);
}

/* =====================================================================
 * SfTab — strip tabs (costing workspace owns a custom TabStrip already,
 * but Syncfusion tabs show up in a handful of detail surfaces)
 * ===================================================================== */
.e-tab > .e-tab-header {
    background: transparent;
    border-bottom: 1px solid var(--orago-border);
}
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    color: var(--orago-text-muted);
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: 500;
    padding: 6px 14px;
}
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    color: var(--orago-primary);
}
.e-tab .e-tab-header .e-indicator {
    background: var(--orago-primary);
    height: 2px;
}

/* =====================================================================
 * Inputs — SfTextBox / SfDropDownList / SfNumericTextBox / SfDatePicker
 * ===================================================================== */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-float-input,
.e-float-input.e-control-wrapper,
.e-ddl.e-input-group {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius);
    box-shadow: none;
    font-size: var(--fs-small);
    color: var(--orago-text);
}
.e-input-group::before,
.e-input-group::after,
.e-input-group.e-control-wrapper::before,
.e-input-group.e-control-wrapper::after {
    display: none;
}
.e-input-group input.e-input,
.e-input-group.e-control-wrapper input.e-input,
.e-input-group .e-input,
input.e-input {
    background: transparent;
    color: var(--orago-text);
    font-family: inherit;
    font-size: var(--fs-small);
    padding: 6px 8px;
}
.e-input-group:not(.e-success):not(.e-warning):not(.e-error):focus-within,
.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):focus-within {
    border-color: var(--orago-primary);
    box-shadow: 0 0 0 2px var(--orago-primary-soft);
}
.e-ddl .e-input-group-icon.e-ddl-icon::before {
    color: var(--orago-text-soft);
}

/* Dropdown popup list — align with filter-rail surfaces. */
.e-popup.e-ddl.e-popup-open,
.e-popup.e-dropdownbase {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 20, 27, 0.18);
}
.e-dropdownbase .e-list-item {
    color: var(--orago-text);
    font-size: var(--fs-small);
    padding: 6px 10px;
    line-height: 18px;
}
.e-dropdownbase .e-list-item.e-item-focus,
.e-dropdownbase .e-list-item:hover {
    background: var(--orago-surface-alt);
    color: var(--orago-text);
}
.e-dropdownbase .e-list-item.e-active {
    background: var(--orago-primary-soft);
    color: var(--orago-primary);
}

/* =====================================================================
 * SfButton (when used) — match our .btn token set
 * ===================================================================== */
.e-btn,
.e-css.e-btn {
    background: var(--orago-surface);
    color: var(--orago-text);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius);
    font-family: var(--ds-font-sans);
    font-size: var(--fs-small);
    font-weight: 500;
    padding: 5px 12px;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
}
.e-btn:hover,
.e-css.e-btn:hover {
    background: var(--orago-surface-alt);
    border-color: var(--orago-primary);
    color: var(--orago-text);
}
.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background: var(--orago-primary);
    color: var(--neutral-0);
    border-color: var(--orago-primary);
}
.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover {
    background: var(--orago-primary-hover);
    border-color: var(--orago-primary-hover);
}

/* =====================================================================
 * SfChart — tokenised viz palette
 * ===================================================================== */
.e-chart {
    font-family: var(--ds-font-sans);
    background: transparent;
}
.e-chart text { fill: var(--orago-text-muted); }
.e-chart .e-chart-tooltip {
    background: var(--orago-text);
    color: var(--orago-surface);
    border-radius: var(--radius);
    font-size: var(--fs-micro);
}

/* =====================================================================
 * SfDatePicker / SfDateTimePicker / SfCalendar
 * Flat against our surfaces; calendar popup matches dropdown popup.
 * ===================================================================== */
.e-datepicker.e-input-group,
.e-datetimepicker.e-input-group,
.e-timepicker.e-input-group,
.e-daterangepicker.e-input-group {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    color: var(--orago-text);
}
.e-datepicker .e-input-group-icon,
.e-datetimepicker .e-input-group-icon,
.e-timepicker .e-input-group-icon {
    color: var(--orago-text-soft);
    background: transparent;
    border: 0;
}
.e-datepicker .e-input-group-icon:hover,
.e-datetimepicker .e-input-group-icon:hover {
    background: var(--orago-surface-alt);
    color: var(--orago-primary);
}

.e-calendar,
.e-calendar.e-device {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius-lg);
    color: var(--orago-text);
    font-family: var(--ds-font-sans);
    box-shadow: 0 8px 24px rgba(15, 20, 27, 0.18);
}
.e-calendar .e-header,
.e-calendar .e-week-header {
    background: transparent;
    color: var(--orago-text-muted);
    border-bottom: 1px solid var(--orago-border);
}
.e-calendar .e-header .e-title,
.e-calendar .e-header .e-icon-container .e-btn {
    color: var(--orago-text);
    background: transparent;
}
.e-calendar .e-content td,
.e-calendar .e-content td span {
    color: var(--orago-text);
    font-size: var(--fs-small);
}
.e-calendar .e-content td.e-other-month,
.e-calendar .e-content td.e-other-month span {
    color: var(--orago-text-soft);
}
.e-calendar .e-content td:hover span.e-day {
    background: var(--orago-surface-alt);
    color: var(--orago-text);
}
.e-calendar .e-content td.e-today span.e-day {
    border: 1px solid var(--orago-primary);
    color: var(--orago-primary);
}
.e-calendar .e-content td.e-selected span.e-day,
.e-calendar .e-content td.e-focused-date.e-selected span.e-day {
    background: var(--orago-primary);
    color: var(--neutral-0);
    border-color: var(--orago-primary);
}

/* Date range popup shares the calendar chrome. */
.e-daterangepicker.e-popup,
.e-daterange-presets {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    color: var(--orago-text);
}

/* =====================================================================
 * SfCheckBox / SfRadioButton / SfSwitch
 * ===================================================================== */
.e-checkbox-wrapper .e-frame,
.e-css.e-checkbox-wrapper .e-frame {
    background: var(--orago-surface);
    border-color: var(--orago-border-strong);
    border-radius: 2px;
}
.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background: var(--orago-primary);
    border-color: var(--orago-primary);
    color: var(--neutral-0);
}
.e-checkbox-wrapper .e-label,
.e-css.e-checkbox-wrapper .e-label {
    color: var(--orago-text);
    font-family: inherit;
    font-size: var(--fs-small);
}
.e-radio + label::before,
.e-radio:checked + label::before {
    background: var(--orago-surface);
    border-color: var(--orago-border-strong);
}
.e-radio:checked + label::after {
    background: var(--orago-primary);
}

.e-switch-wrapper .e-switch-inner,
.e-switch-wrapper.e-switch-active .e-switch-inner {
    background: var(--orago-surface-alt);
    border-color: var(--orago-border);
}
.e-switch-wrapper.e-switch-active .e-switch-inner {
    background: var(--orago-primary);
    border-color: var(--orago-primary);
}

/* =====================================================================
 * Context menus (grid column chooser, filter menu, etc.)
 * ===================================================================== */
.e-contextmenu-wrapper ul.e-contextmenu,
.e-menu-wrapper ul.e-menu {
    background: var(--orago-surface);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(15, 20, 27, 0.18);
    font-family: var(--ds-font-sans);
    font-size: var(--fs-small);
    color: var(--orago-text);
}
.e-contextmenu-wrapper ul.e-contextmenu li.e-menu-item,
.e-menu-wrapper ul.e-menu li.e-menu-item {
    color: var(--orago-text);
}
.e-contextmenu-wrapper ul.e-contextmenu li.e-menu-item.e-focused,
.e-menu-wrapper ul.e-menu li.e-menu-item:hover {
    background: var(--orago-surface-alt);
    color: var(--orago-text);
}

/* =====================================================================
 * SfUploader / SfFileManager
 * ===================================================================== */
.e-upload {
    background: var(--orago-surface);
    border: 1px dashed var(--orago-border-strong);
    border-radius: var(--radius-lg);
    color: var(--orago-text);
    font-size: var(--fs-small);
}
.e-upload .e-file-select-wrap,
.e-upload .e-upload-files {
    background: transparent;
    color: var(--orago-text);
}

/* =====================================================================
 * SfToast / SfSpinner
 * ===================================================================== */
.e-toast-container .e-toast {
    background: var(--orago-surface);
    color: var(--orago-text);
    border: 1px solid var(--orago-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(15, 20, 27, 0.2);
    font-family: var(--ds-font-sans);
    font-size: var(--fs-small);
}
.e-toast-container .e-toast.e-toast-success { border-left: 3px solid var(--state-ok-fg); }
.e-toast-container .e-toast.e-toast-warning { border-left: 3px solid var(--state-warn-fg); }
.e-toast-container .e-toast.e-toast-danger  { border-left: 3px solid var(--state-danger-fg); }
.e-toast-container .e-toast.e-toast-info    { border-left: 3px solid var(--orago-primary); }

.e-spinner-inner circle { stroke: var(--orago-primary); }

/* =====================================================================
 * Scrollbars inside Syncfusion containers (grid content, popups)
 * Hook color-scheme so dark mode renders dark scrollbars.
 * ===================================================================== */
.e-grid .e-gridcontent,
.e-treegrid .e-gridcontent,
.e-dialog .e-dlg-content,
.e-popup {
    color-scheme: light dark;
}
[data-theme="dark"] .e-grid .e-gridcontent,
[data-theme="dark"] .e-treegrid .e-gridcontent,
[data-theme="dark"] .e-dialog .e-dlg-content,
[data-theme="dark"] .e-popup {
    color-scheme: dark;
}

/* =====================================================================
 * Final belt-and-braces: any Syncfusion element that falls back to
 * Bootstrap's --bs-body-bg / --bs-body-color will now pick up our tokens
 * via the remap in tokens.extended.css, so nothing should render white
 * against our dark surfaces. This block catches a handful of classes
 * that hardcode #fff regardless.
 * ===================================================================== */
.e-control,
.e-control-container {
    color: var(--orago-text);
}
[data-theme="dark"] .e-control[style*="background: rgb(255"],
[data-theme="dark"] .e-control[style*="background-color: rgb(255"],
[data-theme="dark"] .e-popup[style*="background: rgb(255"],
[data-theme="dark"] .e-popup[style*="background-color: rgb(255"] {
    background: var(--orago-surface) !important;
    color: var(--orago-text) !important;
}