/* Syncfusion (bootstrap5.3 theme) wears the design tokens. The theme is fully driven by --color-sf-* variables,
   so dark mode needs no second stylesheet: the tokens switch on <html data-theme="dark"> and these follow.
   We do not add Syncfusion's .e-dark-mode class: its variable block would override ours on <body>.
   Component-internal overrides come last, each with a reason. Only tokens here. */

:root {
    --e-font-name: var(--ap-font-body);
    --e-font-family: var(--ap-font-body);

    --color-sf-content-bg-color: var(--ap-surface);
    --color-sf-content-bg-color-alt1: var(--ap-surface-2);
    --color-sf-content-bg-color-alt2: var(--ap-surface-sunken);
    --color-sf-content-bg-color-alt3: var(--ap-line);
    --color-sf-content-bg-color-alt4: var(--ap-line-strong);
    --color-sf-content-bg-color-alt5: var(--ap-ink-subtle);
    --color-sf-content-bg-color-hover: var(--ap-surface-2);
    --color-sf-content-bg-color-pressed: var(--ap-surface-sunken);
    --color-sf-content-bg-color-focus: var(--ap-surface-2);
    --color-sf-content-bg-color-selected: var(--ap-accent);
    --color-sf-content-bg-color-dragged: var(--ap-surface-sunken);
    --color-sf-content-bg-color-disabled: var(--ap-surface-2);
    --color-sf-flyout-bg-color: var(--ap-surface);
    --color-sf-flyout-bg-color-hover: var(--ap-surface-2);
    --color-sf-flyout-bg-color-pressed: var(--ap-accent);
    --color-sf-flyout-bg-color-focus: var(--ap-surface-2);
    --color-sf-overlay-bg-color: var(--ap-overlay);
    --color-sf-table-bg-color-hover: var(--ap-surface-2);
    --color-sf-table-bg-color-pressed: var(--ap-accent-soft);
    --color-sf-table-bg-color-selected: var(--ap-accent-soft);

    --color-sf-content-text-color: var(--ap-ink);
    --color-sf-content-text-color-alt1: var(--ap-ink-muted);
    --color-sf-content-text-color-alt2: var(--ap-ink-subtle);
    --color-sf-content-text-color-alt3: var(--ap-ink-subtle);
    --color-sf-content-text-color-hover: var(--ap-ink);
    --color-sf-content-text-color-focus: var(--ap-ink);
    --color-sf-content-text-color-selected: var(--ap-accent-ink);
    --color-sf-content-text-color-disabled: var(--ap-ink-subtle);
    --color-sf-placeholder-text-color: var(--ap-ink-subtle);
    --color-sf-flyout-text-color: var(--ap-ink);
    --color-sf-flyout-text-color-hover: var(--ap-ink);
    --color-sf-flyout-text-color-pressed: var(--ap-accent-ink);
    --color-sf-flyout-text-color-focus: var(--ap-ink);
    --color-sf-flyout-text-color-disabled: var(--ap-ink-subtle);
    --color-sf-table-text-color-hover: var(--ap-ink);
    --color-sf-table-text-color-pressed: var(--ap-ink);
    --color-sf-table-text-color-selected: var(--ap-ink);

    --color-sf-icon-color: var(--ap-ink-muted);
    --color-sf-icon-color-hover: var(--ap-ink);
    --color-sf-icon-color-pressed: var(--ap-ink);
    --color-sf-icon-color-disabled: var(--ap-ink-subtle);
    --color-sf-close-icon-color: var(--ap-ink-muted);
    --color-sf-close-icon-color-hover: var(--ap-ink);
    --color-sf-close-icon-color-pressed: var(--ap-ink);
    --color-sf-close-icon-color-disabled: var(--ap-ink-subtle);

    --color-sf-border-light: var(--ap-line);
    --color-sf-border: var(--ap-line);
    --color-sf-border-dark: var(--ap-line-strong);
    --color-sf-border-hover: var(--ap-line-strong);
    --color-sf-border-pressed: var(--ap-line-strong);
    --color-sf-border-focus: var(--ap-accent);
    --color-sf-border-selected: var(--ap-accent);
    --color-sf-border-dragged: var(--ap-line-strong);
    --color-sf-border-disabled: var(--ap-line);
    --color-sf-border-warning: var(--ap-warning-fill);
    --color-sf-border-error: var(--ap-danger);
    --color-sf-border-success: var(--ap-success);
    --color-sf-flyout-border: var(--ap-line);
    --color-sf-tab-border: var(--ap-line);

    --color-sf-primary: var(--ap-accent);
    --color-sf-primary-text-color: var(--ap-accent-ink);
    --color-sf-primary-light: var(--ap-accent-soft);
    --color-sf-primary-lighter: var(--ap-accent-soft);
    --color-sf-primary-dark: var(--ap-accent-hover);
    --color-sf-primary-darker: var(--ap-accent-hover);
    --color-sf-primary-shadow: var(--ap-accent-rgb);
    --color-sf-secondary: var(--ap-ink-muted);
    --color-sf-success: var(--ap-success);
    --color-sf-info: var(--ap-info);
    --color-sf-warning: var(--ap-warning);
    --color-sf-danger: var(--ap-danger);
    --color-sf-success-light: var(--ap-success-soft);
    --color-sf-info-light: var(--ap-info-soft);
    --color-sf-warning-light: var(--ap-warning-soft);
    --color-sf-danger-light: var(--ap-danger-soft);
    --color-sf-success-shadow: var(--ap-success-rgb);
    --color-sf-info-shadow: var(--ap-info-rgb);
    --color-sf-warning-shadow: var(--ap-warning-rgb);
    --color-sf-danger-shadow: var(--ap-danger-rgb);

    /* Buttons: same language as Bootstrap .btn-primary (ink fill, brass on hover). */
    --color-sf-primary-bg-color: var(--ap-ink);
    --color-sf-primary-border-color: var(--ap-ink);
    --color-sf-primary-text: var(--ap-ink-inverse);
    --color-sf-primary-bg-color-hover: var(--ap-accent-hover);
    --color-sf-primary-border-color-hover: var(--ap-accent-hover);
    --color-sf-primary-text-hover: var(--ap-accent-ink);
    --color-sf-primary-bg-color-pressed: var(--ap-accent);
    --color-sf-primary-border-color-pressed: var(--ap-accent);
    --color-sf-primary-text-pressed: var(--ap-accent-ink);
    --color-sf-primary-bg-color-focus: var(--ap-ink);
    --color-sf-primary-border-color-focus: var(--ap-ink);
    --color-sf-primary-text-focus: var(--ap-ink-inverse);
    --color-sf-primary-bg-color-disabled: var(--ap-ink-subtle);
    --color-sf-primary-border-color-disabled: var(--ap-ink-subtle);
    --color-sf-primary-text-disabled: var(--ap-ink-inverse);
    --color-sf-secondary-bg-color: var(--ap-surface);
    --color-sf-secondary-border-color: var(--ap-line-strong);
    --color-sf-secondary-text-color: var(--ap-ink);
    --color-sf-secondary-bg-color-hover: var(--ap-surface-2);
    --color-sf-secondary-border-color-hover: var(--ap-ink-subtle);
    --color-sf-secondary-text-color-hover: var(--ap-ink);
    --color-sf-secondary-bg-color-pressed: var(--ap-surface-sunken);
    --color-sf-secondary-border-color-pressed: var(--ap-ink-subtle);
    --color-sf-secondary-text-color-pressed: var(--ap-ink);
    --color-sf-secondary-bg-color-focus: var(--ap-surface-2);
    --color-sf-secondary-border-color-focus: var(--ap-accent);
    --color-sf-secondary-text-color-focus: var(--ap-ink);
    --color-sf-secondary-bg-color-disabled: var(--ap-surface-2);
    --color-sf-secondary-border-color-disabled: var(--ap-line);
    --color-sf-secondary-text-color-disabled: var(--ap-ink-subtle);

    --color-sf-tooltip-bg-color: var(--ap-ink);
    --color-sf-tooltip-border: var(--ap-ink);
    --color-sf-tooltip-text-color: var(--ap-ink-inverse);
    --color-sf-appbar-bg-color-alt1: var(--ap-surface);
    --color-sf-appbar-color-alt1: var(--ap-ink);
    --color-sf-appbar-border-color-alt1: var(--ap-line);
    --color-sf-appbar-hover-bg-color-alt1: var(--ap-surface-2);
    --color-sf-badge-light-bg-color: var(--ap-surface-2);
    --color-sf-badge-light-border-color: var(--ap-line-strong);
    --color-sf-badge-light-text-color: var(--ap-ink);
    --color-sf-badge-dark-bg-color: var(--ap-ink);
    --color-sf-badge-dark-border-color: var(--ap-ink);
    --color-sf-badge-dark-text-color: var(--ap-ink-inverse);
    --color-sf-stepper: var(--ap-accent);
}

/* ---------- Component specifics (last resort; each has a reason) ---------- */

/* Buttons: pills like Bootstrap .btn, otherwise SfButton and .btn look like two products. */
.e-btn, .e-css.e-btn {
    border-radius: var(--ap-radius-pill);
    font-family: var(--ap-font-heading);
    font-weight: var(--ap-weight-strong);
    transition: transform var(--ap-dur) var(--ap-ease), background-color var(--ap-dur-fast) var(--ap-ease),
                border-color var(--ap-dur-fast) var(--ap-ease), color var(--ap-dur-fast) var(--ap-ease);
}
.e-btn.e-flat, .e-btn.e-icon-btn { border-radius: var(--ap-radius-sm); }

/* Grid: card-like frame, quiet uppercase header, warm hover. The theme's header uses the content bg; we want contrast. */
.e-grid {
    border-color: var(--ap-line);
    border-radius: var(--ap-radius);
    overflow: hidden;
    font-family: var(--ap-font-body);
}
.e-grid .e-gridheader,
.e-grid .e-headercontent,
.e-grid .e-headercell,
.e-grid .e-detailheadercell,
.e-grid .e-grouptopleftcell,
.e-grid .e-columnheader {
    background-color: var(--ap-surface-2);
}
.e-grid .e-headercell .e-headertext,
.e-grid .e-headercelldiv {
    color: var(--ap-ink-muted);
    font-size: var(--ap-text-xs);
    font-weight: var(--ap-weight-strong);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.e-grid .e-rowcell { font-size: var(--ap-text-sm); }
.e-grid .e-altrow { background-color: var(--ap-surface-2); }
.e-grid .e-row:hover .e-rowcell:not(.e-cellselectionbackground):not(.e-active) { background-color: var(--ap-accent-soft) !important; }
.e-grid .e-gridpager, .e-pager { background-color: var(--ap-surface); border-color: var(--ap-line); }
.e-pager .e-currentitem, .e-pager .e-currentitem:hover { background: var(--ap-ink); color: var(--ap-ink-inverse); border-radius: var(--ap-radius-pill); }
.e-pager .e-numericitem { border-radius: var(--ap-radius-pill); }

/* Dialog: softer, larger radius, layered shadow. */
.e-dialog {
    border-radius: var(--ap-radius-lg);
    border-color: var(--ap-line);
    box-shadow: var(--ap-shadow-3);
    overflow: hidden;
}
.e-dialog .e-dlg-header-content { border-bottom: 1px solid var(--ap-line); }
.e-dialog .e-dlg-header { font-family: var(--ap-font-heading); font-weight: var(--ap-weight-heading); font-size: var(--ap-text-lg); }
.e-dialog .e-footer-content { border-top: 1px solid var(--ap-line); }
.e-dlg-overlay { background-color: rgb(var(--ap-overlay)); opacity: .45; }

/* Popups (dropdowns, menus, datepicker): match Bootstrap dropdown-menu. */
.e-popup.e-popup-open:not(.e-tooltip-wrap):not(.e-dialog):not(.e-toast-container) {
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow-3);
}
.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover { background-color: var(--ap-accent-soft); color: var(--ap-ink); }

/* Inputs: same radius and focus ring as .form-control. */
.e-input-group:not(.e-float-icon-left):not(.e-float-input),
.e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input) {
    border-radius: var(--ap-radius-sm);
}
.e-input-group.e-input-focus:not(.e-float-icon-left):not(.e-float-input),
.e-input-group.e-control-wrapper.e-input-focus:not(.e-float-icon-left):not(.e-float-input) {
    box-shadow: 0 0 0 .2rem var(--ap-focus);
}

/* Tabs: ink underline for the active tab instead of a boxed tab. */
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text { color: var(--ap-ink); font-weight: var(--ap-weight-strong); }
.e-tab .e-tab-header .e-indicator { background: var(--ap-accent); height: 2px; }

/* Dashboard layout panels: cards. */
.e-dashboardlayout.e-control .e-panel {
    border-color: var(--ap-line);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow-1);
    background: var(--ap-surface);
}
.e-dashboardlayout.e-control .e-panel:hover { box-shadow: var(--ap-shadow-2); }

/* Toasts (MainLayout uses e-toast-success/-warning/-danger/-info). Surface card with a status edge. */
.e-toast-container { z-index: 12000 !important; max-width: 520px; pointer-events: none; }
.e-toast-container:empty,
.e-toast-container:not(:has(.e-toast)) { display: none; }
.e-toast-container .e-toast {
    pointer-events: auto;
    min-width: 300px;
    background: var(--ap-surface);
    color: var(--ap-ink);
    border: 1px solid var(--ap-line);
    border-left: 4px solid var(--ap-accent);
    border-radius: var(--ap-radius);
    box-shadow: var(--ap-shadow-3);
    animation: ap-toast-in var(--ap-dur-slow) var(--ap-ease-out);
}
.e-toast-container .e-toast .e-toast-title { color: var(--ap-ink); font-family: var(--ap-font-heading); font-weight: var(--ap-weight-strong); }
.e-toast-container .e-toast .e-toast-content { color: var(--ap-ink-muted); }
.e-toast-container .e-toast .e-toast-close-icon { color: var(--ap-ink-muted); }
.e-toast-container .e-toast.e-toast-success { border-left-color: var(--ap-success); }
.e-toast-container .e-toast.e-toast-warning { border-left-color: var(--ap-warning-fill); }
.e-toast-container .e-toast.e-toast-danger { border-left-color: var(--ap-danger); }
.e-toast-container .e-toast.e-toast-info { border-left-color: var(--ap-info); }
@keyframes ap-toast-in {
    from { transform: translateX(24px); opacity: 0; }
    to { transform: none; opacity: 1; }
}

/* Spinner follows the accent. */
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5v3,
.e-spinner-pane .e-spinner-inner .e-spin-bootstrap5 { stroke: var(--ap-accent); }

/* ---------- AppGrid (Components/Shared/AppGrid.razor): the one grid look ---------- */
/* Every scrolling part sits on the surface, so no part of a grid can show a light fallback in dark mode. */
.ap-grid.e-grid,
.ap-grid .e-gridcontent,
.ap-grid .e-content,
.ap-grid .e-table,
.ap-grid .e-virtualtable,
.ap-grid .e-emptyrow td,
.ap-grid .e-toolbar,
.ap-grid .e-toolbar .e-toolbar-items {
    background-color: var(--ap-surface);
}
.ap-grid .e-rowcell { border-color: var(--ap-line); }
.ap-grid .e-gridheader { border-bottom: 1px solid var(--ap-line); }
.ap-grid .e-toolbar { border-bottom: 1px solid var(--ap-line); }
.ap-grid-empty {
    padding: var(--ap-space-5) var(--ap-space-4);
    text-align: center;
    color: var(--ap-ink-muted);
    font-size: var(--ap-text-sm);
}
/* Text columns truncate with an ellipsis; numbers never wrap. */
.ap-grid .e-rowcell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A grid that fills a card (the card is the frame): no own border or radius. */
.ap-grid.ap-grid-flush.e-grid { border: 0; border-radius: 0; }
/* Row highlights set from RowDataBound (args.Row.AddClass): the record needing attention, and "this one" rows. */
.ap-grid .e-row.ap-row-warning .e-rowcell { background-color: var(--ap-warning-soft); }
.ap-grid .e-row.ap-row-warning td:first-child { box-shadow: inset 4px 0 0 var(--ap-warning-fill); }
.ap-grid .e-row.ap-row-muted .e-rowcell { background-color: var(--ap-surface-2); }
/* Wrapping grids (AppGrid AllowTextWrap): let text flow over lines instead of the ellipsis above. */
.ap-grid.e-grid.e-wrap .e-rowcell { white-space: normal; overflow: visible; text-overflow: clip; }