/* ===============================
   SYNCFUSION THEME VARIABLE MAP
   =============================== */

:root {
    /* Base surfaces & text */
    --color-sf-content-bg-color: var(--color-white);
    --color-sf-content-bg-color-alt1: var(--color-neutral-100);
    --color-sf-content-bg-color-alt2: var(--color-neutral-200);
    --color-sf-content-bg-color-alt3: var(--color-neutral-300);
    --color-sf-content-bg-color-alt4: var(--color-neutral-400);
    --color-sf-content-bg-color-alt5: var(--color-neutral-500);
    --color-sf-content-bg-color-hover: var(--color-neutral-100);
    --color-sf-content-bg-color-pressed: var(--color-neutral-200);
    --color-sf-content-bg-color-focus: var(--color-neutral-200);
    --color-sf-content-bg-color-selected: var(--color-primary-400);
    --color-sf-content-bg-color-disabled: var(--color-neutral-200);
    --color-sf-content-text-color: var(--color-neutral-900);
    --color-sf-content-text-color-alt1: color-mix(in srgb, var(--color-neutral-900) 75%, transparent);
    --color-sf-content-text-color-alt2: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
    --color-sf-content-text-color-alt3: color-mix(in srgb, var(--color-neutral-900) 25%, transparent);
    --color-sf-content-text-color-hover: var(--color-neutral-900);
    --color-sf-content-text-color-selected: var(--color-white);
    --color-sf-content-text-color-disabled: var(--color-neutral-600);
    --color-sf-placeholder-text-color: var(--color-neutral-600);
    /* Icons */
    --color-sf-icon-color: var(--color-neutral-600);
    --color-sf-icon-color-hover: var(--color-neutral-700);
    --color-sf-icon-color-pressed: var(--color-neutral-900);
    --color-sf-icon-color-disabled: var(--color-neutral-400);
    /* Borders & focus */
    --color-sf-border-light: var(--color-neutral-300);
    --color-sf-border: var(--color-neutral-300);
    --color-sf-border-dark: var(--color-neutral-400);
    --color-sf-border-hover: var(--color-neutral-300);
    --color-sf-border-pressed: var(--color-neutral-300);
    --color-sf-border-focus: var(--color-primary-300);
    --color-sf-border-selected: var(--color-primary-300);
    --color-sf-border-disabled: var(--color-neutral-300);
    --color-sf-overlay-bg-color: var(--color-black);
    /* Brand / Status */
    --color-sf-primary: var(--color-primary-400);
    --color-sf-primary-text-color: var(--color-white);
    --color-sf-primary-light: var(--color-primary-200);
    --color-sf-primary-lighter: var(--color-primary-100);
    --color-sf-primary-dark: var(--color-primary-600);
    --color-sf-primary-darker: var(--color-primary-700);
    --color-sf-success: var(--color-success-400);
    --color-sf-info: var(--color-info-400);
    --color-sf-warning: var(--color-warning-400);
    --color-sf-danger: var(--color-danger-400);
    --color-sf-success-light: var(--color-success-200);
    --color-sf-info-light: var(--color-info-200);
    --color-sf-warning-light: var(--color-warning-200);
    --color-sf-danger-light: var(--color-danger-200);
    --color-sf-success-dark: var(--color-success-600);
    --color-sf-info-dark: var(--color-info-600);
    --color-sf-warning-dark: var(--color-warning-600);
    --color-sf-danger-dark: var(--color-danger-600);
    /* Primary interactive states */
    --color-sf-primary-bg-color: var(--color-sf-primary);
    --color-sf-primary-border-color: var(--color-sf-primary);
    --color-sf-primary-text: var(--color-sf-primary-text-color);
    --color-sf-primary-bg-color-hover: var(--color-primary-500);
    --color-sf-primary-border-color-hover: var(--color-primary-500);
    --color-sf-primary-text-hover: var(--color-sf-primary-text-color);
    --color-sf-primary-bg-color-pressed: var(--color-primary-600);
    --color-sf-primary-border-color-pressed: var(--color-primary-600);
    --color-sf-primary-text-pressed: var(--color-sf-primary-text-color);
    --color-sf-primary-bg-color-focus: var(--color-primary-500);
    --color-sf-primary-border-color-focus: var(--color-primary-500);
    --color-sf-primary-text-focus: var(--color-sf-primary-text-color);
    --color-sf-primary-bg-color-disabled: color-mix(in srgb, var(--color-primary-400) 65%, white 35%);
    --color-sf-primary-border-color-disabled: var(--color-sf-primary-bg-color-disabled);
    --color-sf-primary-text-disabled: color-mix(in srgb, var(--color-white) 65%, transparent);
    /* Table interactions */
    --color-sf-table-bg-color-hover: color-mix(in srgb, var(--color-neutral-900) 7%, transparent);
    --color-sf-table-bg-color-pressed: var(--color-neutral-300);
    --color-sf-table-bg-color-selected: color-mix(in srgb, var(--color-neutral-900) 10%, transparent);
    --color-sf-table-text-color-hover: var(--color-neutral-900);
    /* Flyouts, tooltips, appbar */
    --color-sf-flyout-bg-color: var(--color-white);
    --color-sf-flyout-bg-color-hover: var(--color-neutral-100);
    --color-sf-flyout-bg-color-pressed: var(--color-primary-400);
    --color-sf-flyout-text-color: var(--color-neutral-900);
    --color-sf-flyout-text-color-pressed: var(--color-white);
    --color-sf-flyout-border: color-mix(in srgb, var(--color-black) 17.5%, transparent);
    --color-sf-tooltip-bg-color: rgba(0,0,0,.9);
    --color-sf-tooltip-text-color: var(--color-white);
    /* Shadows use brand/neutral */
    --color-sf-primary-shadow: 138, 80, 226; /* primary-400 RGB */
    --color-sf-secondary-shadow: 47, 147, 145; /* aux-500 RGB */
    --color-sf-success-shadow: 71, 184, 129;
    --color-sf-info-shadow: 59, 130, 246;
    --color-sf-warning-shadow: 255, 198, 43;
    --color-sf-danger-shadow: 246, 76, 76;
    /* Typography scale for SF */
    --sf-font-size: var(--fs-body-sm);
    --sf-line-height: var(--lh-body-sm);
}

/* Dark mode mapping (Syncfusion toggles this on the container) */
.e-dark-mode {
    --color-sf-content-bg-color: var(--color-neutral-900);
    --color-sf-content-bg-color-alt1: #1b1e22;
    --color-sf-content-bg-color-alt2: var(--color-neutral-800);
    --color-sf-content-bg-color-alt3: var(--color-neutral-700);
    --color-sf-content-bg-color-alt4: #0f1216;
    --color-sf-content-text-color: var(--color-neutral-300);
    --color-sf-content-text-color-alt1: color-mix(in srgb, var(--color-neutral-300) 75%, transparent);
    --color-sf-content-text-color-alt2: color-mix(in srgb, var(--color-neutral-300) 50%, transparent);
    --color-sf-content-text-color-alt3: color-mix(in srgb, var(--color-neutral-300) 25%, transparent);
    --color-sf-content-text-color-selected: var(--color-white);
    --color-sf-placeholder-text-color: var(--color-neutral-600);
    --color-sf-icon-color: var(--color-neutral-500);
    --color-sf-icon-color-hover: var(--color-neutral-300);
    --color-sf-border: var(--color-neutral-700);
    --color-sf-border-hover: var(--color-neutral-700);
    --color-sf-border-focus: var(--color-primary-300);
    --color-sf-table-bg-color-hover: color-mix(in srgb, var(--color-white) 7%, transparent);
    --color-sf-table-bg-color-selected: color-mix(in srgb, var(--color-white) 10%, transparent);
    /* Brand keeps identity in dark */
    --color-sf-primary: var(--color-primary-400);
    --color-sf-primary-bg-color-hover: var(--color-primary-500);
    --color-sf-primary-bg-color-pressed: var(--color-primary-600);
    --color-sf-flyout-bg-color: var(--color-neutral-800);
    --color-sf-flyout-bg-color-hover: var(--color-neutral-700);
    --color-sf-flyout-text-color: var(--color-neutral-300);
    --color-sf-tooltip-bg-color: rgba(255,255,255,.9);
    --color-sf-tooltip-text-color: var(--color-neutral-900);
}

/* Make SF controls inherit your typography */
.e-control,
.e-css {
    font-family: inherit;
    font-size: var(--sf-font-size);
    line-height: var(--sf-line-height);
}


    /* Buttons */
    .e-btn,
    .e-css .e-btn {
        border-radius: var(--radius-sm);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 4px 8px;
        box-shadow: none;
        transition: background-color .15s, border-color .15s, color .15s;
    }

        .e-btn.e-primary {
            background-color: var(--color-sf-primary-bg-color);
            border-color: var(--color-sf-primary-border-color);
            color: var(--color-sf-primary-text);
            border-radius: var(--radius-sm);
        }

            .e-btn.e-primary:hover {
                background-color: var(--color-sf-primary-bg-color-hover);
                border-color: var(--color-sf-primary-border-color-hover);
            }

            .e-btn.e-primary:active,
            .e-btn.e-primary.e-active {
                background-color: var(--color-sf-primary-bg-color-pressed);
                border-color: var(--color-sf-primary-border-color-pressed);
            }

        .e-btn.e-flat, .e-btn.e-outline {
            border-color: var(--color-sf-border);
        }

/* Inputs / Input groups / DropDowns */
.e-input-group, .e-float-input, .e-input, .e-ddl, .e-multiselect, .e-combobox, .e-autocomplete {
    --_radius: var(--radius-md);
    --_bd: var(--color-sf-border);
    --_bg: var(--color-sf-content-bg-color);
    --_tx: var(--color-sf-content-text-color);
    border-radius: var(--_radius);
    background: var(--_bg);
    color: var(--_tx);
    border-color: var(--_bd);
}

    .e-input-group:not(.e-disabled):hover {
        border-color: var(--color-sf-border-hover);
    }

    .e-input-group.e-input-focus, .e-input-group.e-input-focus .e-input, .e-float-input.e-input-focus {
        border-color: var(--color-sf-border-focus);
        box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color-primary-400) 25%, transparent);
    }

    .e-input-group .e-input, .e-input-group input.e-input,
    .e-float-input input {
        height: var(--ctrl-h-md);
        border-radius: var(--radius-sm);
    }

/* Grid */
.e-grid {
    --_row-h: 40px;
    --_bd: var(--color-sf-border);
    --_bg: var(--color-sf-content-bg-color);
    --_bg-alt: var(--gray-200);
}

    .e-grid .e-headercell,
    .e-grid .e-gridheader {
        background: var(--_bg-alt);
        color: var(--color-sf-content-text-color);
        border-color: var(--_bd);
    }

    .e-grid .e-rowcell,
    .e-grid .e-groupcaption,
    .e-grid .e-summarycell {
        border-color: var(--_bd);
        color: var(--color-sf-content-text-color);
        height: var(--_row-h);
    }

    .e-grid .e-row:hover .e-rowcell {
        background: var(--color-sf-table-bg-color-hover);
    }

    .e-grid .e-row.e-selectionbackground .e-rowcell,
    .e-grid .e-selectionbackground .e-rowcell {
        background: var(--color-sf-content-bg-color-selected);
        color: var(--color-sf-content-text-color-selected);
    }

    .e-grid .e-gridpager, .e-pager {
        background: var(--color-sf-content-bg-color);
        border-color: var(--_bd);
    }

        .e-pager .e-numericitem.e-active,
        .e-pager .e-numericitem.e-currentitem {
            background: var(--color-sf-primary-bg-color);
            color: var(--color-sf-primary-text);
            border-color: var(--color-sf-primary-border-color);
            border-radius: var(--radius-md);
        }

        .e-pager .e-currentitem.e-numericitem.e-focused {
            background: var(--color-sf-primary-bg-color);
        }


/* Dialog / Popup */
.e-dialog,
.e-popup,
.e-dropdown-popup,
.e-tooltip-wrap {
    background: var(--color-sf-flyout-bg-color);
    color: var(--color-sf-flyout-text-color);
    border-color: var(--color-sf-flyout-border);
    box-shadow: var(--elev-2);
    border-radius: var(--radius-xlg);
}

/* Tooltip (uses variables already; ensure radius) */
.e-tooltip-wrap {
    border-radius: var(--radius-md);
}

/* Badges / Chips */
.e-badge, .e-chip {
    background: var(--color-primary-100);
    color: var(--color-primary-600);
    border-color: transparent;
    border-radius: var(--radius-full);
}

/* Checkboxes / Radios (SF native) */
.e-checkbox-wrapper .e-frame,
.e-radio + .e-ripple-container .e-ripple-element {
    border-color: var(--color-sf-border);
}

    .e-checkbox-wrapper .e-frame.e-check,
    .e-checkbox-wrapper .e-check::before,
    .e-radio:checked + label .e-ripple-container + .e-frame,
    .e-radio:checked + .e-label .e-frame {
        background: var(--color-sf-primary-bg-color);
        border-color: var(--color-sf-primary-border-color);
    }

/* Focus outlines (generic) */
.e-control:focus-visible,
.e-control *:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--color-primary-400) 25%, transparent);
}

:root {
    /* Syncfusion typographic hints driven by your scale */
    --sf-fs-xs: var(--fs-body-xs);
    --sf-fs-sm: var(--fs-body-sm);
    --sf-fs-md: var(--fs-body);
    --sf-fs-lg: var(--fs-body-lg);
    --sf-subtitle-sm-fs: var(--fs-subtitle-sm);
    --sf-subtitle-sm-lh: var(--lh-subtitle-sm);
    --sf-subtitle-md-fs: var(--fs-subtitle-md);
    --sf-subtitle-md-lh: var(--lh-subtitle-md);
    --sf-heading-color: var(--tx-heading);
    --sf-body-color: var(--tx-body);
    --sf-secondary-color: var(--tx-body-2);
    --sf-fw-regular: var(--fw-regular, 400);
    --sf-fw-medium: var(--fw-medium, 500);
    --sf-fw-semibold: var(--fw-semibold, 600);
    --sf-fw-bold: var(--fw-bold, 700);
}

/* Make SF nodes inherit your base typography */
.e-control, .e-css {
    font-family: inherit;
    color: var(--sf-body-color);
    font-size: var(--sf-fs-sm); /* gently smaller base to match SF density */
    line-height: var(--lh-body-sm);
}

/* Secondary text */
.e-grid .e-row .e-rowcell .e-badge,
.e-listview .e-list-text,
.e-dropdownbase .e-list-item,
.e-treeview .e-list-text,
.e-calendar .e-title,
.e-datepicker .e-title {
    color: var(--sf-body-color);
    font-size: var(--sf-fs-sm);
}

/* ---------- 2) Buttons: size parity with your system ---------- */
.e-btn {
    min-height: var(--btn-h-md);
    border-radius: 4px;
    font-size: var(--fs-btn-md);
    line-height: var(--lh-btn-md);
    font-weight: var(--sf-fw-regular);
}

    .e-small .e-btn,
    .e-btn.e-small {
        min-height: var(--btn-h-sm);
        font-size: var(--fs-btn-sm);
        line-height: var(--lh-btn-sm);
    }

    .e-bigger .e-btn,
    .e-btn.e-bigger {
        min-height: var(--btn-h-lg);
        font-size: var(--fs-btn-lg);
        line-height: var(--lh-btn-lg);
    }

    /* Icon-only syncs to .btn-icon feel */
    .e-btn.e-icon-btn {
        width: var(--btn-h-md);
        padding: 0;
        aspect-ratio: 1/1;
    }

.e-small .e-btn.e-icon-btn {
    width: var(--btn-h-sm);
}

.e-bigger .e-btn.e-icon-btn {
    width: var(--btn-h-lg);
}

/* ---------- 3) Inputs / dropdowns: heights + focus ---------- */
.e-input-group input,
.e-float-input input,
.e-dropdownbase .e-input,
.e-ddl .e-input,
.e-multiselect .e-input,
.e-combobox .e-input,
.e-autocomplete .e-input {
    font-size: var(--sf-fs-sm);
    border-radius: var(--radius-lg);
}

.e-small .e-input-group input,
.e-small .e-float-input input {
    height: var(--ctrl-h-sm);
}

.e-bigger .e-input-group input,
.e-bigger .e-float-input input {
    height: var(--ctrl-h-lg);
}

/* Popup lists (DDL, MultiSelect, AutoComplete, Menu, ContextMenu) */
.e-popup, .e-dropdown-popup, .e-menu-wrapper, .e-contextmenu-wrapper {
    border-radius: var(--radius-md);
    box-shadow: var(--elev-3);
    border-color: var(--bd-primary);
    background: var(--surface-primary);
}

        .e-dropdownbase .e-list-item.e-hover,
        .e-listview .e-list-item.e-hover,
        .e-menu-wrapper .e-menu-item.e-selected,
        .e-menu-wrapper .e-menu-item.e-focused,
        .e-contextmenu-wrapper .e-menu-item.e-focused {
            background: var(--gray-200);
            color: var(--tx-body);
        }

        .e-dropdownbase .e-list-item.e-active,
        .e-listview .e-list-item.e-active,
        .e-menu-wrapper .e-menu-item.e-active {
            background: var(--surface-action-primary);
            color: var(--tx-on-action);
        }

/* Searchbox in popups */
.e-filter-parent, .e-ddl-header {
    padding: var(--space-2) var(--space-2) 0;
    border-bottom: 1px solid var(--bd-primary);
}

/* ---------- 4) Tabs / Accordion / Breadcrumb ---------- */
.e-tab .e-tab-header {
    border-color: var(--bd-primary);
}

    .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
        padding: var(--space-2) var(--space-4);
        border-radius: var(--radius-lg);
    }

    .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
        background: var(--surface-action-primary);
        color: var(--tx-on-action);
    }

.e-accordion .e-acrdn-header {
    border-radius: var(--radius-md);
}

.e-accordion .e-acrdn-item.e-selected > .e-acrdn-header {
    background: var(--gray-200);
}

.e-breadcrumb {
    background: transparent;
}

    .e-breadcrumb .e-breadcrumb-separator {
        color: var(--tx-body-2);
    }

/* ---------- 5) Switch / Checkbox / Radio / Slider ---------- */
.e-switch .e-switch-inner {
    border-radius: var(--radius-full);
}

.e-switch.e-switch-checked .e-switch-inner {
    background: var(--surface-action-primary);
}

.e-switch.e-switch-checked .e-switch-handle {
    background: var(--tx-on-action);
}

.e-checkbox-wrapper .e-frame,
.e-radio + .e-ripple-container + .e-frame {
    border-color: var(--bd-primary);
}

    .e-checkbox-wrapper .e-frame.e-check,
    .e-radio:checked + label .e-frame {
        background: var(--surface-action-primary);
        border-color: var(--surface-action-primary);
    }

.e-slider .e-range {
    background: var(--surface-action-primary);
}

.e-slider .e-handle {
    background: var(--surface-action-primary);
    border-color: var(--surface-action-primary);
}

/* ---------- 6) Calendar / Date & Color pickers ---------- */
.e-calendar, .e-datepicker, .e-datetimepicker, .e-timepicker, .e-colorpicker {
    --_radius: var(--radius-lg);
    border-radius: var(--_radius);
    box-shadow: var(--elev-3);
    border-color: var(--bd-primary);
    background: var(--surface-primary);
}

    .e-calendar .e-content td.e-selected span,
    .e-datepicker .e-content td.e-selected span,
    .e-datetimepicker .e-content td.e-selected span {
        background: var(--surface-action-primary);
        color: var(--tx-on-action);
        border-radius: var(--radius-md);
    }

    .e-calendar .e-content td.e-today span {
        outline: 2px solid var(--bd-action);
    }

/* ---------- 7) Grid polish (add-on to your earlier block) ---------- */
.e-grid {
    --_row-h: 40px;
}

    .e-grid .e-rowcell {
        height: var(--_row-h);
    }


    .e-grid .e-cloneproperties {
        border-color: var(--bd-primary);
        background: var(--surface-primary);
    }

    .e-grid .e-toolbar {
        border-color: var(--bd-primary);
        background: var(--surface-primary);
        padding-bottom: 20px;
    }

/* ---------- 8) Dialog / Tooltip / Toast / Message ---------- */
.e-dialog {
    border-radius: var(--radius-xlg);
    box-shadow: var(--elev-4);
}

.e-tooltip-wrap {
    border-radius: var(--radius-md);
}

.e-toast {
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-3);
    background: var(--surface-primary);
    border-color: var(--bd-primary);
}

    .e-toast .e-toast-message {
        color: var(--tx-body);
    }

.e-toast-info {
    border-inline-start: 4px solid var(--info-200);
}

.e-toast-success {
    border-inline-start: 4px solid var(--success-200);
}

.e-toast-warning {
    border-inline-start: 4px solid var(--warning-200);
}

.e-toast-danger {
    border-inline-start: 4px solid var(--danger-200);
}

/* Syncfusion Message (Alert) */
.e-msg, .e-message {
    border-radius: var(--radius-md);
    border-width: var(--border-width-md);
    font-size: var(--sf-fs-sm);
}

.e-msg-success, .e-message-success {
    background: var(--surface-success);
    color: var(--tx-success);
    border-color: var(--bd-success);
}

.e-msg-info, .e-message-info {
    background: var(--surface-info);
    color: var(--tx-info);
    border-color: var(--bd-info);
}

.e-msg-warning, .e-message-warning {
    background: var(--surface-warning);
    color: var(--tx-warning);
    border-color: var(--bd-warning);
}

.e-msg-danger, .e-message-danger {
    background: var(--surface-error);
    color: var(--tx-error);
    border-color: var(--bd-error);
}

/* ---------- 9) Progress / Spinner / Skeleton / Card ---------- */
.e-progressbar, .e-progressbar .e-progressbar-track {
    border-radius: var(--radius-full);
}

    .e-progressbar .e-progressbar-progress {
        background: var(--surface-action-primary);
    }

.e-spinner-pane .e-spinner-inner .e-spin-material {
    color: var(--surface-action-primary);
}

.e-skeleton {
    border-radius: var(--radius-md);
    background: var(--gray-200);
}

.e-card {
    border-radius: var(--radius-xlg);
    box-shadow: var(--elev-2);
    border-color: var(--bd-primary);
    background: var(--surface-primary);
}

/* ---------- 10) Badges / Chips (states) ---------- */
.e-badge {
    border-radius: var(--radius-full);
}

    .e-badge.e-badge-primary {
        background: var(--primary-50);
        color: var(--primary-400);
    }

    .e-badge.e-badge-secondery {
        background: var(--secondery-50);
        color: var(--secondery-400);
    }

    .e-badge.e-badge-success {
        background: var(--success-50);
        color: var(--success-400);
    }

    .e-badge.e-badge-warning {
        background: var(--warning-50);
        color: var(--warning-400);
    }

    .e-badge.e-badge-danger {
        background: var(--danger-50);
        color: var(--danger-400);
    }

.e-chip {
    border-radius: var(--radius-full);
}

    .e-chip.e-primary {
        background: var(--primary-50);
        color: var(--primary-400);
    }

    .e-chip.e-success {
        background: var(--success-50);
        color: var(--success-400);
    }

    .e-chip.e-warning {
        background: var(--warning-50);
        color: var(--warning-400);
    }

    .e-chip.e-danger {
        background: var(--danger-50);
        color: var(--danger-400);
    }

/* ---------- 11) Focus (unified across widgets) ---------- */
.e-control:focus-visible,
.e-control *:focus-visible,
.e-input-group.e-input-focus,
.e-ddl .e-input-focus {
    outline: 0;
    box-shadow: var(--focus-ring);
    border-color: var(--bd-focus);
}

/* ---------- 12) Dark mode alignment ---------- */
.e-dark-mode .e-popup,
.e-dark-mode .e-dropdown-popup,
.e-dark-mode .e-menu-wrapper,
.e-dark-mode .e-contextmenu-wrapper {
    background: var(--color-sf-flyout-bg-color);
    border-color: var(--color-sf-border);
    box-shadow: var(--elev-2);
}

    .e-dark-mode .e-dropdownbase .e-list-item.e-hover,
    .e-dark-mode .e-menu-wrapper .e-menu-item.e-focused {
        background: var(--color-sf-content-bg-color-hover);
    }

    .e-dark-mode .e-dropdownbase .e-list-item.e-active,
    .e-dark-mode .e-menu-wrapper .e-menu-item.e-active {
        background: var(--color-sf-primary-bg-color);
        color: var(--color-sf-primary-text);
    }

.e-grid {
    --_grid-hdr-bg: var(--color-sf-content-bg-color-alt1); /* light gray */
    --_grid-hdr-tx: var(--tx-body); /* muted text */
    --_grid-hdr-bd: var(--color-sf-border);
}



        /* Text size/weight of header like the screenshot */
        .e-grid .e-headercell .e-headertext {
            font-size: var(--fs-body-sm);
            line-height: 1.2;
            font-weight: var(--fw-medium);
            color: var(--_grid-hdr-tx);
        }

    /* Sort icons subtle */
    .e-grid .e-headercelldiv .e-sortdirection,
    .e-grid .e-headercelldiv .e-icon-ascending,
    .e-grid .e-headercelldiv .e-icon-descending {
        color: var(--color-neutral-400);
    }

    /* Row separators lighter */
    .e-grid .e-rowcell,
    .e-grid .e-groupcaption,
    .e-grid .e-summarycell {
        border-color: var(--color-neutral-300);
    }


/* Pager pills keep your look */
.e-pager .e-numericitem.e-active,
.e-pager .e-numericitem.e-currentitem {
    border-radius: var(--radius-sm);
}


.e-input-group,
.e-float-input,
.e-input,
.e-ddl,
.e-multiselect,
.e-combobox,
.e-autocomplete {
    border-radius: var(--radius-sm); /* was lg */
}

    .e-input-group .e-input,
    .e-float-input input {
        border-radius: var(--radius-sm); /* was lg */
    }

/* ===== Toolbar button: base ===== */
.e-toolbar .e-tbar-btn,
.e-toolbar .e-btn.e-tbar-btn {
    display: inline-flex;
    align-items: center;
    background: var(--surface-primary);
    color: var(--tx-on-outline, #667085); /* calm neutral text */
    border: 1px solid var(--bd-disabled);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: background-color .15s, border-color .15s, color .15s;
}

.e-grid .e-toolbar {
    background-color: var(--surface-page) !important;
}

.e-grid .e-header{

}

/* Base (md) */
.e-input-group,
.e-float-input,
.e-dropdownlist,
.e-combobox,
.e-autocomplete,
.e-datepicker,
.e-datetimepicker,
.e-timepicker,
.e-multiselect .e-multi-select-wrapper {
    min-height: var(--ctrl-h-md);
}

/* ---------- Sizes ---------- */
.e-small .e-input-group,
.e-small .e-float-input,
.e-small .e-dropdownlist,
.e-small .e-combobox,
.e-small .e-autocomplete,
.e-small .e-datepicker,
.e-small .e-datetimepicker,
.e-small .e-timepicker,
.e-small .e-multiselect .e-multi-select-wrapper {
    min-height: var(--ctrl-h-sm);
}

.e-bigger .e-input-group,
.e-bigger .e-float-input,
.e-bigger .e-dropdownlist,
.e-bigger .e-combobox,
.e-bigger .e-autocomplete,
.e-bigger .e-datepicker,
.e-bigger .e-datetimepicker,
.e-bigger .e-timepicker,
.e-bigger .e-multiselect .e-multi-select-wrapper {
    min-height: var(--ctrl-h-lg);
}

/* Syncfusion secondary (neutral) button */
.e-grid .e-btn.e-secondary,
.e-grid .e-btn:not(.e-primary):not(.e-success):not(.e-info):not(.e-warning):not(.e-danger):not(.e-link) {
    gap: 4px;
    padding: 4px 8px;
    border: 1px solid var(--bd-disabled);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

/* ========= Grid header background ========= */
.e-grid .e-gridheader,
.e-grid .e-headercontent {
    background: var(--gray-200);
}

.e-grid {
    border-color: var(--gray-100);
    border-left-style: none !important;
    border-right-style: none !important;
}

/* ========= Remove vertical borders (header + body) ========= */
.e-grid .e-headercell,
.e-grid .e-stackedheadercell,
.e-grid .e-rowcell,
.e-grid .e-summarycell,
.e-grid .e-groupcaption,
.e-grid .e-detailrowcollapse,
.e-grid .e-detailrowexpand {
}

/* Keep horizontal lines if you want them */
.e-grid .e-rowcell,
.e-grid .e-summarycell,
.e-grid .e-groupcaption {
    border-top-color: var(--bd-primary);
    border-bottom-color: var(--bd-primary);

}

/* ========= Remove toolbar border/shadow ========= */
.e-grid .e-toolbar,
.e-toolbar {
    border-color: var(--gray-100);
    box-shadow: none !important;
}

.e-grid .e-gridheader {
    border-bottom: 1px solid var(--bd-primary);
    height:44px;
    padding-top:4px;
}

/* Pager dropdowns keep fixed input height (no jump) */
.e-pager .e-input-group,
.e-pager .e-dropdownlist,
.e-pager .e-combobox,
.e-pager .e-autocomplete {
    min-height: var(--ctrl-h-sm) !important;
    align-items: center;
}

/* ===== Uniform header background (incl. checkbox / detail / drag-drop) ===== */
.e-grid .e-gridheader,
.e-grid .e-headercontent,
.e-grid .e-gridheader .e-table thead tr th {
    background: var(--gray-200) !important;
}

    /* Also hit stacked/frozen header tables explicitly (safety for complex layouts) */
    .e-grid .e-gridheader .e-stackedheadercell,
    .e-grid .e-gridheader .e-detailheadercell,
    .e-grid .e-gridheader .e-dragheadercell,
    .e-grid .e-gridheader .e-grouptopleftcell,
    .e-grid .e-gridheader .e-indentcell {
        background: var(--gray-200) !important;
    }



/* ---------- LAYOUT / PANES ---------- */

.e-filemanager {
    border: 0;
    border-radius: 0px;
    gap: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
    align-self: stretch;
}

    /* ---------- TOOLBAR ---------- */
    .e-filemanager .e-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        background: var(--surface-primary);
        border-radius: 4px;
        border: 0;
    }

        .e-filemanager .e-toolbar .e-toolbar-items {
            background: var(--surface-primary);
        }
        .e-filemanager .e-toolbar .e-tbar-btn {
            height:40px;
            display: flex;
            align-items: center;
            gap: var(--Spacing-2xs, 8px);
            color: var(--tx-on-outline);
            font-size: 14px;
            font-weight: 500;
            line-height: 24px;
            border:0px;
        }

.e-filemanager .e-toolbar .e-toolbar-items .e-toolbar-item .e-dropdown-btn.e-btn.e-tbar-btn {
    height: 40px;
    font-weight: 500;
}

.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer){
    min-width:12px;
}
.e-filemanager .e-toolbar .e-tbar-btn:hover {
}

.e-toolbar .e-toolbar-items .e-toolbar-left .e-toolbar-item:first-child, .e-toolbar .e-toolbar-items:not(.e-tbar-pos):not(.e-toolbar-multirow) .e-toolbar-item:first-child {
    margin-left: 0px;
}
.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) {
    min-width: 12px;
    padding:0px;
    padding-inline:2px;
}
/* Right content as a card */
.e-filemanager .e-layout {
    background: var(--gray-200);
    border: 0;
    border-radius: 0px;
    overflow: hidden;
}
/* Make sure the dropdown button has enough width & padding */
.e-filemanager .e-toolbar .e-toolbar-item #drop-Button.e-dropdown-btn.e-btn.e-tbar-btn {
    min-width: max-content; /* let the content decide width */
    padding-inline: 8px 12px; /* space around icon + text */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* In RTL, keep icon + text ordering natural */
[dir="rtl"] .e-filemanager .e-toolbar .e-toolbar-item #drop-Button.e-dropdown-btn.e-btn.e-tbar-btn {
    flex-direction: row-reverse; /* icon on the left, text on the right for Arabic */
}

/* Don’t let the generic 12px min-width rule shrink this particular item */
.e-toolbar .e-toolbar-item:not(.e-separator):not(.e-spacer) #drop-Button {
    min-width: max-content;
}

/* ---------- NAV TREE (LEFT) ---------- */
.e-filemanager .e-navigation {
    background: var(--gray-100);
    border: 0;
    border-radius: 0px;
    overflow: hidden;
}
.e-filemanager .e-navigationpane {
    border: 0;
}

.e-filemanager .e-treeview .e-active > .e-fullrow,
.e-filemanager .e-treeview .e-list-item:hover > .e-fullrow {
    background: var(--gray-200);
    color: var(--primary-400);
}
.e-treeview .e-list-item.e-active > .e-text-content {
    color: var(--primary-400);
}

.e-filemanager .e-treeview .e-list-icon,
.e-filemanager .e-treeview .e-icons {
    color: var(--primary-400);
}
.e-treeview .e-list-item.e-active.e-hover > .e-fullrow, .e-treeview .e-list-item.e-active.e-node-focus > .e-fullrow {
    background: var(--gray-300);
}
.e-treeview .e-list-item.e-active.e-hover > .e-text-content, .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content {
    color: var(--gray-900);
}
    .e-treeview .e-list-item.e-active.e-hover > .e-text-content .e-list-text, .e-treeview .e-list-item.e-active.e-node-focus > .e-text-content .e-list-text {
        color: var(--gray-900);
    }
.e-treeview .e-list-item.e-active > .e-text-content .e-list-text {
    color: var(--gray-900);
}
.e-filemanager .e-fe-folder {
    /*background-image: url()*/
}

.e-splitter .e-split-bar.e-split-bar-horizontal{
    background: none;
}

.e-filemanager .e-layout .e-layout-content {
    background: var(--surface-primary);
    border: 0;
    border-radius: 0px;
    overflow: hidden;
}

/* ---------- BREADCRUMB / ADDRESS BAR ---------- */
.e-filemanager .e-address {
    background: transparent;
    border: 0;
    height:auto;
}

.e-filemanager .e-address .e-addressbar-ul {
    background: transparent;
    border: 0;
    padding: 8px 12px;
    color: var(--tx-body);
    border-radius: 8px 8px 0 0;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
}
    .e-filemanager .e-address .e-search-wrap .e-input-group{
        min-height:36px;
    }

    .e-filemanager .e-address .e-address-list-item:not(:last-child) .e-list-text{
        text-decoration:none;
    }
    .e-filemanager .e-address .e-address-list-item a {
        color: var(--gray-600);
    }
    .e-filemanager .e-address .e-address-list-item:last-child .e-list-text {
        color: var(--gray-500);
    }


/*     ---------- DETAILS VIEW (GRID) ---------- */
.e-filemanager .e-grid {
    border: 0;
}

.e-filemanager .e-gridheader {
    border-bottom: var(--border-width-md) solid var(--bd-primary);
}

.e-filemanager .e-large-icons .e-list-item{
    padding:0px;
}
.e-filemanager .e-large-icons .e-large-icon.e-active.e-hover, .e-filemanager .e-large-icons .e-large-icon.e-active:hover {
    background: var(--gray-300);
    color: var(--gray-900);
    border-color: var(--gray-300);
}
.e-filemanager .e-large-icons .e-large-icon.e-active {
    background: var(--gray-300);
    color: var(--gray-900);
    border-color: var(--gray-300);
}
.e-filemanager .e-large-icons .e-active {
    color: var(--gray-900);
}
.e-filemanager .e-large-icons .e-text-content{

}

.e-multiselect .e-chips {
    background: var(--gray-600);
    border-radius: var(--radius-lg);
}

/* Compact dropdown arrow color */
.e-input-group .e-input-group-icon,
.e-multiselect .e-down-icon {
    color: var(--icn-primary);
}