/* ═══════════════════════════════════════════════════════════
   SYNCFUSION BOOTSTRAP5-DARK BASE OVERRIDES
   -------------------------------------------------------
   Strategy: Syncfusion's Bootstrap5 Dark theme uses CSS
   custom properties prefixed with --color-sf-* and maps
   many values to Bootstrap variables. Override them here
   AFTER importing:
     @import '_content/Syncfusion.Blazor.Themes/bootstrap5-dark.css';

   Paste this entire block in your site.css after that import.
═══════════════════════════════════════════════════════════ */

/* ── 1. Core Syncfusion colour remap ── */
:root {
    /* Primary action colour → Gold */
    --color-sf-primary: var(--gold-bright);
    --color-sf-primary-darker: var(--gold-mid);
    --color-sf-primary-lighter: var(--gold-light);
    --color-sf-primary-shadow: var(--accent-soft-35);
    /* Content / surface */
    --color-sf-content-bg: var(--surface-card);
    --color-sf-base-bg: var(--surface-base);
    --color-sf-overlay-bg: var(--surface-overlay);
    --color-sf-border-color: var(--border-mid);
    --color-sf-border-light: var(--border-faint);
    /* Text */
    --color-sf-black: var(--text-primary);
    --color-sf-secondary-text: var(--text-secondary);
    --color-sf-disabled-text: var(--text-disabled);
    --color-sf-placeholder: var(--text-secondary);
    /* Focus ring */
    --color-sf-focus-ring: var(--accent-soft-40);
    /* Hover / selected states */
    --color-sf-hover-bg: var(--accent-soft-08);
    --color-sf-selected-bg: var(--accent-soft-16);
    --color-sf-active-bg: var(--accent-soft-22);
    /* Semantic */
    --color-sf-success: var(--color-success);
    --color-sf-danger: var(--color-danger);
    --color-sf-warning: var(--gold-bright);
    --color-sf-info: var(--color-info);
}

/* ── 2. Global Syncfusion element resets ── */
.e-control,
.e-lib {
    font-family: var(--font-ui) !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}

    /* Scrollbars inside SF components */
    .e-control ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .e-control ::-webkit-scrollbar-track {
        background: var(--surface-base);
    }

    .e-control ::-webkit-scrollbar-thumb {
        background: var(--gold-faint);
        border-radius: 3px;
    }

        .e-control ::-webkit-scrollbar-thumb:hover {
            background: var(--gold-deep);
        }


/* ═══════════════════════════════════════════════════════════
   CARD  (SfCard)
═══════════════════════════════════════════════════════════ */
.e-card {
    -webkit-tap-highlight-color: transparent !important;
}

.e-card:hover,
.e-card:focus,
.e-card:focus-visible,
.e-card:focus-within,
.e-card:active,
.e-card.e-card-selected,
.e-card.e-focused,
.e-card.e-active {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--border-mid) !important;
}


/* ═══════════════════════════════════════════════════════════
   GRID  (SfGrid)
═══════════════════════════════════════════════════════════ */
.e-grid {
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-lg) !important;
    overflow: visible;
    background: var(--surface-card) !important;
    box-shadow: var(--shadow-gold-sm);
}

    /* Header row */
    .e-grid .e-headercell,
    .e-grid .e-detailheadercell {
        background: linear-gradient(135deg, var(--accent-soft-12), rgba(184,134,11,0.06)) !important;
        border-bottom: 1px solid var(--border-strong) !important;
        border-right: 1px solid var(--border-faint) !important;
        color: var(--gold-bright) !important;
        font-family: var(--font-ui) !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.3em !important;
        text-transform: uppercase !important;
        padding: 1rem 1.1rem !important;
    }

        .e-grid .e-headercell:hover {
            background: var(--accent-soft-18) !important;
            color: var(--gold-light) !important;
        }

    /* Focused / selected header cell — override default blue border */
    .e-grid .e-headercell.e-focus,
    .e-grid .e-headercell:focus,
    .e-grid .e-headercell.e-focused,
    .e-grid .e-headercell[aria-selected="true"],
    .e-grid th.e-headercell.e-focus,
    .e-grid th.e-headercell:focus-visible {
        outline: none !important;
        border-color: var(--gold-bright) !important;
        box-shadow: inset 0 0 0 1px var(--gold-bright) !important;
    }

    /* Grid focus on any cell — kill the default blue ring everywhere */
    .e-grid .e-focused,
    .e-grid *:focus,
    .e-grid *:focus-visible {
        outline: none !important;
    }

    .e-grid .e-rowcell.e-focus,
    .e-grid .e-rowcell:focus,
    .e-grid td.e-rowcell.e-focused,
    .e-grid td.e-rowcell:focus-visible {
        outline: none !important;
        box-shadow: inset 0 0 0 1px var(--accent-soft-40) !important;
    }

    /* Sort icon colour */
    .e-grid .e-sortnumber,
    .e-grid .e-icon-ascending::before,
    .e-grid .e-icon-descending::before {
        color: var(--gold-bright) !important;
    }

    /* Data rows */
    .e-grid .e-row {
        border-bottom: 1px solid var(--border-faint) !important;
        transition: background var(--duration) var(--ease-out);
    }

        .e-grid .e-row:hover .e-rowcell {
            background: var(--accent-soft-05) !important;
        }

    .e-grid .e-rowcell {
        background: transparent !important;
        border-right: 1px solid var(--border-faint) !important;
        color: var(--text-primary) !important;
        font-family: var(--font-ui) !important;
        padding: 0.75rem 1.1rem !important;
    }

    /* Alternating rows */
    .e-grid .e-altrow .e-rowcell {
        background: var(--accent-soft-025) !important;
    }

    /* Selected row */
    .e-grid .e-selectionbackground,
    .e-grid tr.e-selectionbackground .e-rowcell {
        background: var(--accent-soft-14) !important;
        border-color: var(--border-mid) !important;
    }

    /* Pager */
    .e-grid .e-gridpager {
        background: var(--surface-elevated) !important;
        border-top: 1px solid var(--border-mid) !important;
        padding: 0.6rem 1rem !important;
    }

    .e-grid .e-pager .e-currentitem {
        background: var(--gold-bright) !important;
        color: var(--text-on-gold) !important;
        border-radius: var(--radius-xs) !important;
        font-weight: 700 !important;
    }

    .e-grid .e-pager .e-numericitem:hover {
        background: var(--accent-soft-12) !important;
        color: var(--gold-bright) !important;
        border-radius: var(--radius-xs) !important;
    }

    .e-grid .e-pager .e-icons {
        color: var(--text-secondary) !important;
    }

        .e-grid .e-pager .e-icons:hover {
            color: var(--gold-bright) !important;
        }

    /* Toolbar */
    .e-grid .e-toolbar {
        background: var(--surface-elevated) !important;
        border-bottom: 1px solid var(--border-mid) !important;
    }

/* Mobile: allow horizontal grid scrolling */
@media (max-width: 767.98px) {
    .e-grid {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch;
    }

    .e-grid .e-gridheader,
    .e-grid .e-gridcontent,
    .e-grid .e-gridpager,
    .e-grid .e-summarycontent {
        min-width: max-content;
    }

    .e-grid .e-gridheader table,
    .e-grid .e-gridcontent table {
        min-width: 720px;
        width: max-content;
    }
}


/* ═══════════════════════════════════════════════════════════
   CHART  (SfChart)
═══════════════════════════════════════════════════════════ */
.e-chart {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-gold-sm);
}

/* Chart background area */
.e-chart-svg text,
.e-chart-svg .e-chart-label {
    fill: var(--text-secondary) !important;
    font-family: var(--font-ui) !important;
    font-size: 11px !important;
}

/* Axis lines */
.e-chart-svg .e-axis-line {
    stroke: var(--border-mid) !important;
}

.e-chart-svg .e-major-gridline {
    stroke: var(--border-faint) !important;
    stroke-dasharray: 4 4;
}

.e-chart-svg .e-minor-gridline {
    stroke: var(--accent-soft-04) !important;
}

/* Tick marks */
.e-chart-svg .e-major-tick,
.e-chart-svg .e-minor-tick {
    stroke: var(--border-mid) !important;
}

/* Tooltip */
.e-chart-tooltip-wrap,
.e-tooltip-wrap {
    background: var(--surface-overlay) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-gold-md) !important;
    font-family: var(--font-ui) !important;
    color: var(--text-primary) !important;
    padding: 0.6rem 1rem !important;
}

    .e-tooltip-wrap .e-tip-content {
        color: var(--text-primary) !important;
    }

/* Legend */
.e-chart-legend-text {
    fill: var(--text-secondary) !important;
    font-family: var(--font-ui) !important;
}

/* Series colour palette — map to gold spectrum + accents */
/* Override via Blazor @Palette in component, but CSS fallback: */
.e-chart-svg .e-series-0 {
    fill: var(--gold-bright) !important;
    stroke: var(--gold-bright) !important;
}

.e-chart-svg .e-series-1 {
    fill: var(--gold-mid) !important;
    stroke: var(--gold-mid) !important;
}

.e-chart-svg .e-series-2 {
    fill: var(--color-success) !important;
    stroke: var(--color-success) !important;
}

.e-chart-svg .e-series-3 {
    fill: var(--color-info) !important;
    stroke: var(--color-info) !important;
}

.e-chart-svg .e-series-4 {
    fill: var(--color-danger) !important;
    stroke: var(--color-danger) !important;
}


/* ═══════════════════════════════════════════════════════════
   DROPDOWN / COMBOBOX / MULTISELECT  (SfDropDownList etc.)
═══════════════════════════════════════════════════════════ */
.e-dropdownlist.e-input-group,
.e-combobox.e-input-group,
.e-multiselect.e-input-group,
.e-autocomplete.e-input-group {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: none !important;
    transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out) !important;
}

    .e-dropdownlist.e-input-group:hover,
    .e-combobox.e-input-group:hover {
        border-color: var(--border-strong) !important;
    }

    .e-dropdownlist.e-input-group.e-input-focus,
    .e-combobox.e-input-group.e-input-focus {
        border-color: var(--gold-bright) !important;
        box-shadow: 0 0 0 3px var(--color-sf-focus-ring) !important;
    }

.e-dropdownlist .e-input,
.e-combobox .e-input {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
}

.e-dropdownlist .e-input-value,
.e-multiselect .e-delim-values {
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
}

/* Popup */
.e-dropdownbase.e-popup,
.e-ddl.e-popup,
.e-popup.e-ddl {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-gold-md) !important;
}

.e-dropdownbase .e-list-item,
.e-ddl .e-list-item {
    color: var(--gold-light) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.92rem !important;
    padding: 0.55rem 1rem !important;
    background: transparent !important;
    transition: background var(--duration) var(--ease-out) !important;
}

    .e-dropdownbase .e-list-item:hover,
    .e-dropdownbase .e-list-item.e-hover,
    .e-ddl .e-list-item:hover,
    .e-ddl .e-list-item.e-hover {
        background: var(--accent-soft-12) !important;
        color: var(--gold-light) !important;
    }

    .e-dropdownbase .e-list-item.e-item-focus,
    .e-ddl .e-list-item.e-item-focus {
        background: var(--accent-soft-12) !important;
        color: var(--gold-light) !important;
    }

    .e-dropdownbase .e-list-item.e-active,
    .e-ddl .e-list-item.e-active {
        background: var(--accent-soft-22) !important;
        color: var(--gold-bright) !important;
        font-weight: 700 !important;
    }

    .e-dropdownbase .e-list-item.e-active.e-hover,
    .e-dropdownbase .e-list-item.e-active.e-item-focus,
    .e-ddl .e-list-item.e-active.e-hover,
    .e-ddl .e-list-item.e-active.e-item-focus {
        background: var(--accent-soft-28) !important;
        color: var(--gold-light) !important;
    }

/* Ensure the no-records and action-failure text is visible */
.e-dropdownbase .e-list-nrt,
.e-dropdownbase .e-nodata {
    color: var(--text-secondary) !important;
}

/* Chip (multiselect tags) */
.e-multiselect .e-chips {
    background: var(--accent-soft-14) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-xs) !important;
}

    .e-multiselect .e-chips .e-chipcontent {
        color: var(--gold-bright) !important;
        font-family: var(--font-ui) !important;
        font-size: 0.75rem !important;
        letter-spacing: 0.05em !important;
    }

    .e-multiselect .e-chips .e-chips-close::before {
        color: var(--gold-mid) !important;
    }


/* ═══════════════════════════════════════════════════════════
   DATE / TIME PICKERS
═══════════════════════════════════════════════════════════ */
.e-datepicker.e-input-group,
.e-timepicker.e-input-group,
.e-datetimepicker.e-input-group,
.e-daterangepicker.e-input-group {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-sm) !important;
    width: 100% !important;
}

    .e-datepicker.e-input-group.e-input-focus,
    .e-timepicker.e-input-group.e-input-focus {
        border-color: var(--gold-bright) !important;
        box-shadow: 0 0 0 3px var(--color-sf-focus-ring) !important;
    }

/* Calendar popup */
.e-calendar,
.e-bigger.e-small .e-calendar {
    background: var(--surface-overlay) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-gold-md) !important;
}

    .e-calendar .e-header {
        background: var(--accent-soft-08) !important;
        border-bottom: 1px solid var(--border-mid) !important;
    }

    .e-calendar .e-title {
        color: var(--gold-bright) !important;
        font-family: var(--font-display) !important;
        font-size: 1.3rem !important;
        letter-spacing: 0.1em !important;
    }

    .e-calendar .e-day {
        color: var(--text-secondary) !important;
        font-family: var(--font-ui) !important;
        border-radius: var(--radius-xs) !important;
        transition: background var(--duration) !important;
    }

        .e-calendar .e-day:hover {
            background: var(--accent-soft-10) !important;
            color: var(--gold-bright) !important;
        }

    .e-calendar .e-selected span.e-day {
        background: var(--gold-bright) !important;
        color: var(--text-on-gold) !important;
        font-weight: 700 !important;
    }

    /* Today (not selected) — gold border, readable text on dark bg */
    .e-calendar .e-today span.e-day,
    .e-calendar td.e-today span.e-day {
        background: transparent !important;
        border: 1px solid var(--gold-mid) !important;
        color: var(--gold-bright) !important;
        box-shadow: none !important;
        outline: none !important;
    }

    /* Focused date — single gold border, no blue ring */
    .e-calendar td.e-today:focus span.e-day,
    .e-calendar td.e-focused-date span.e-day,
    .e-calendar td.e-today.e-focused-date span.e-day {
        background: transparent !important;
        border: 1px solid var(--gold-bright) !important;
        box-shadow: none !important;
        outline: none !important;
        color: var(--gold-bright) !important;
    }

    /* When today is also selected, gold fill wins */
    .e-calendar td.e-today.e-selected span.e-day {
        background: var(--gold-bright) !important;
        color: var(--text-on-gold) !important;
        border-color: var(--gold-bright) !important;
    }

    .e-calendar .e-week-header th {
        color: var(--text-muted) !important;
        font-size: 0.65rem !important;
        letter-spacing: 0.2em !important;
        text-transform: uppercase !important;
        font-family: var(--font-ui) !important;
    }


/* ═══════════════════════════════════════════════════════════
   TABS  (SfTab)
═══════════════════════════════════════════════════════════ */
.e-tab {
    background: transparent !important;
    border-bottom: 1px solid var(--border-mid) !important;
}

    .e-tab .e-tab-header {
        background: var(--surface-card) !important;
        border-bottom: 2px solid var(--border-mid) !important;
    }

        .e-tab .e-tab-header .e-toolbar-item .e-tab-text {
            font-family: var(--font-ui) !important;
            font-size: 0.78rem !important;
            font-weight: 600 !important;
            letter-spacing: 0.2em !important;
            text-transform: uppercase !important;
            color: var(--text-muted) !important;
            transition: color var(--duration) !important;
        }

        .e-tab .e-tab-header .e-toolbar-item:hover .e-tab-text {
            color: var(--text-secondary) !important;
        }

        .e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text {
            color: var(--gold-bright) !important;
        }

        .e-tab .e-tab-header .e-indicator {
            background: var(--gold-bright) !important;
            height: 2px !important;
            box-shadow: 0 0 8px var(--accent-soft-50) !important;
        }

    .e-tab .e-content {
        background: var(--surface-card) !important;
        border: 1px solid var(--border-mid) !important;
        border-top: none !important;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
        padding: 1.5rem !important;
    }


/* ═══════════════════════════════════════════════════════════
   DIALOG  (SfDialog)
═══════════════════════════════════════════════════════════ */
.e-dialog {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-strong) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-gold-lg) !important;
}

    .e-dialog .e-dlg-header-content {
        background: linear-gradient(135deg, var(--accent-soft-10), rgba(184,134,11,0.05)) !important;
        border-bottom: 1px solid var(--border-mid) !important;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
        padding: 1.25rem 1.5rem !important;
    }

    .e-dialog .e-dlg-header {
        font-family: var(--font-display) !important;
        font-size: 1.5rem !important;
        letter-spacing: 0.08em !important;
        color: var(--gold-bright) !important;
    }

    .e-dialog .e-dlg-content {
        background: transparent !important;
        color: var(--text-secondary) !important;
        font-family: var(--font-body) !important;
        padding: 1.5rem !important;
    }

    .e-dialog .e-footer-content {
        background: var(--accent-soft-04) !important;
        border-top: 1px solid var(--border-mid) !important;
        padding: 1rem 1.5rem !important;
        border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
    }

    .e-dialog .e-dlg-closeicon-btn {
        color: var(--text-muted) !important;
        transition: color var(--duration) !important;
    }

        .e-dialog .e-dlg-closeicon-btn:hover {
            color: var(--gold-bright) !important;
            background: var(--accent-soft-08) !important;
        }
/* Overlay */
.e-dlg-overlay {
    background: rgba(0,0,0,0.75) !important;
    backdrop-filter: blur(4px) !important;
}


/* ═══════════════════════════════════════════════════════════
   BUTTONS  (SfButton)
═══════════════════════════════════════════════════════════ */
/* Primary */
.e-btn.e-primary,
.e-css.e-btn.e-primary {
    background: linear-gradient(135deg, var(--gold-mid), var(--gold-bright)) !important;
    border-color: transparent !important;
    color: var(--text-on-gold) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    border-radius: var(--radius-xs) !important;
    box-shadow: 0 3px 14px var(--accent-soft-25) !important;
    transition: all var(--duration) var(--ease-out) !important;
}

    .e-btn.e-primary:hover {
        background: linear-gradient(135deg, var(--gold-bright), var(--gold-light)) !important;
        box-shadow: 0 5px 24px var(--accent-soft-45) !important;
        transform: translateY(-2px) !important;
    }

    .e-btn.e-primary:active {
        transform: translateY(0) !important;
        box-shadow: 0 2px 8px var(--accent-soft-30) !important;
    }

/* Outline */
.e-btn.e-outline,
.e-css.e-btn.e-outline {
    background: transparent !important;
    border: 1px solid var(--border-strong) !important;
    color: var(--gold-bright) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    border-radius: var(--radius-xs) !important;
    transition: all var(--duration) var(--ease-out) !important;
}

    .e-btn.e-outline:hover {
        background: var(--accent-soft-10) !important;
        border-color: var(--gold-bright) !important;
        color: var(--gold-light) !important;
    }

/* Flat / ghost */
.e-btn.e-flat,
.e-css.e-btn.e-flat {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border-color: transparent !important;
    font-family: var(--font-ui) !important;
    letter-spacing: 0.1em !important;
}

    .e-btn.e-flat:hover {
        background: var(--accent-soft-07) !important;
        color: var(--gold-bright) !important;
    }

/* Danger */
.e-btn.e-danger,
.e-css.e-btn.e-danger {
    background: var(--color-danger) !important;
    border-color: transparent !important;
    color: #fff !important;
}

    .e-btn.e-danger:hover {
        background: #e03535 !important;
        box-shadow: 0 4px 18px rgba(201,48,48,0.35) !important;
    }

/* Success */
.e-btn.e-success,
.e-css.e-btn.e-success {
    background: var(--color-success) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* Disabled state — all variants */
.e-btn[disabled],
.e-btn.e-disabled {
    opacity: 0.38 !important;
    pointer-events: none !important;
}


/* ═══════════════════════════════════════════════════════════
   INPUT / TEXTBOX  (SfTextBox, SfNumericTextBox)
═══════════════════════════════════════════════════════════ */
.e-input-group,
.e-input-group.e-control-wrapper {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-sm) !important;
    transition: border-color var(--duration), box-shadow var(--duration) !important;
}

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

    .e-input-group.e-input-focus,
    .e-input-group.e-control-wrapper.e-input-focus {
        border-color: var(--gold-bright) !important;
        box-shadow: 0 0 0 3px var(--accent-soft-25) !important;
    }

    .e-input-group input.e-input,
    .e-input-group textarea.e-input {
        background: transparent !important;
        color: var(--text-primary) !important;
        font-family: var(--font-ui) !important;
    }

        .e-input-group input.e-input::placeholder {
            color: var(--text-secondary) !important;
        }

    .e-input-group .e-input-group-icon {
        color: var(--text-secondary) !important;
        transition: color var(--duration) !important;
    }

    .e-input-group:hover .e-input-group-icon,
    .e-input-group.e-input-focus .e-input-group-icon {
        color: var(--gold-bright) !important;
    }
/* Float label */
.e-float-input label.e-float-text,
.e-float-input.e-control-wrapper label.e-float-text {
    color: var(--text-secondary) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.12em !important;
}

    .e-float-input.e-input-focus label.e-float-text,
    .e-float-input label.e-float-text.e-label-top {
        color: var(--gold-bright) !important;
    }


/* ═══════════════════════════════════════════════════════════
   SIDEBAR / NAVIGATION DRAWER  (SfSidebar)
═══════════════════════════════════════════════════════════ */
.e-sidebar {
    background: var(--surface-card) !important;
    border-right: 1px solid var(--border-mid) !important;
    box-shadow: 4px 0 30px rgba(0,0,0,0.5) !important;
}

    .e-sidebar .e-nav-item {
        font-family: var(--font-ui) !important;
        font-size: 0.82rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.15em !important;
        text-transform: uppercase !important;
        color: var(--text-muted) !important;
        border-radius: var(--radius-sm) !important;
        margin: 2px 8px !important;
        transition: all var(--duration) !important;
    }

        .e-sidebar .e-nav-item:hover {
            background: var(--accent-soft-08) !important;
            color: var(--text-secondary) !important;
        }

        .e-sidebar .e-nav-item.e-active {
            background: var(--accent-soft-14) !important;
            color: var(--gold-bright) !important;
            border-left: 2px solid var(--gold-bright) !important;
        }


/* ═══════════════════════════════════════════════════════════
   TOAST / NOTIFICATION  (SfToast)
═══════════════════════════════════════════════════════════ */
.e-toast {
    padding-top: 5px !important;
    background: var(--surface-overlay) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-gold-md) !important;
    font-family: var(--font-ui) !important;
}

    .e-toast.e-toast-success {
        border-left: 25px solid var(--color-success) !important;
    }

    .e-toast.e-toast-danger,
    .e-toast.e-toast-error {
        border-left: 25px solid var(--color-danger) !important;
    }

    .e-toast.e-toast-warning {
        border-left: 25px solid var(--gold-bright) !important;
    }

    .e-toast.e-toast-info {
        border-left: 25px solid var(--color-info) !important;
    }

    .e-toast .e-toast-title {
        color: var(--text-primary) !important;
        font-weight: 900 !important;
        letter-spacing: 0.08em !important;
    }

    .e-toast .e-toast-content {
        color: var(--text-secondary) !important;
    }

    .e-toast .e-toast-close-icon {
        color: var(--text-muted) !important;
    }

            .e-toast .e-toast-close-icon:hover {
                    color: var(--gold-bright) !important;
                }

        /* Hide the empty container so it doesn't flash as a second layer */
        .e-toast-container:empty {
            display: none !important;
        }


/* ═══════════════════════════════════════════════════════════
   SWITCH / TOGGLE  (SfSwitch)
═══════════════════════════════════════════════════════════ */

/* Track — off state */
.e-switch-wrapper .e-switch-inner,
.e-css.e-switch-wrapper .e-switch-inner {
    background: var(--surface-elevated) !important;
    border: 1px solid var(--border-mid) !important;
}

/* Track — on state */
.e-switch-wrapper .e-switch-inner.e-switch-active,
.e-css.e-switch-wrapper .e-switch-inner.e-switch-active {
    background: var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
}

/* Handle — off state */
.e-switch-wrapper .e-switch-handle,
.e-css.e-switch-wrapper .e-switch-handle {
    background: var(--text-secondary) !important;
}

/* Handle — on state */
.e-switch-wrapper .e-switch-handle.e-switch-active,
.e-css.e-switch-wrapper .e-switch-handle.e-switch-active {
    background: var(--text-on-gold) !important;
}

/* On label */
.e-switch-wrapper .e-switch-on,
.e-css.e-switch-wrapper .e-switch-on {
    background: var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
    color: var(--text-on-gold) !important;
}

/* Off label */
.e-switch-wrapper .e-switch-off,
.e-css.e-switch-wrapper .e-switch-off {
    background: var(--surface-elevated) !important;
    border-color: var(--border-mid) !important;
    color: var(--text-muted) !important;
}

/* Focus ring */
.e-switch-wrapper:hover .e-switch-inner,
.e-switch-wrapper .e-switch-inner:focus-within {
    box-shadow: 0 0 0 3px var(--accent-soft-20) !important;
}


/* ═══════════════════════════════════════════════════════════
   SPINNER / LOADER  (SfSpinner)
═══════════════════════════════════════════════════════════ */
.e-spinner-pane .e-spinner-inner .e-spin-material {
    stroke: var(--gold-bright) !important;
}

.e-spinner-pane .e-spinner-inner .e-spin-label {
    color: var(--text-secondary) !important;
    font-family: var(--font-ui) !important;
}


/* ═══════════════════════════════════════════════════════════
   TOOLTIP  (SfTooltip)
═══════════════════════════════════════════════════════════ */
.e-tooltip-wrap.e-popup {
    background: var(--surface-overlay) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-gold-sm) !important;
}

.e-tooltip-wrap .e-tip-content {
    color: var(--text-secondary) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.8rem !important;
}

.e-tooltip-wrap .e-arrow-tip-outer {
    border-bottom-color: var(--border-mid) !important;
}

.e-tooltip-wrap .e-arrow-tip-inner {
    border-bottom-color: var(--surface-overlay) !important;
}


/* ═══════════════════════════════════════════════════════════
   BADGE / CHIP  (SfChip)
═══════════════════════════════════════════════════════════ */
.e-chip-list .e-chip {
    background: var(--accent-soft-10) !important;
    border: 1px solid var(--border-mid) !important;
    border-radius: var(--radius-xs) !important;
    color: var(--gold-bright) !important;
    font-family: var(--font-ui) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
}

    .e-chip-list .e-chip:hover,
    .e-chip-list .e-chip.e-active {
        background: var(--accent-soft-20) !important;
        border-color: var(--gold-bright) !important;
    }

    .e-chip-list .e-chip .e-chip-delete {
        color: var(--gold-mid) !important;
    }


/* ═══════════════════════════════════════════════════════════
   PROGRESS BAR  (SfProgressBar)
═══════════════════════════════════════════════════════════ */
.e-progressbar .e-progressbar-track {
    background: var(--surface-overlay) !important;
    border-radius: 99px !important;
}

.e-progressbar .e-progressbar-value {
    background: linear-gradient(90deg, var(--gold-mid), var(--gold-bright)) !important;
    border-radius: 99px !important;
    box-shadow: 0 0 8px var(--accent-soft-40) !important;
}

.e-progressbar .e-progressbar-label {
    color: var(--text-secondary) !important;
    font-family: var(--font-ui) !important;
}