/* Syncfusion theme override (design pass DP-03). The base theme (fluent2.css, loaded first) defines its colours as
   --color-sf-* custom properties on :root; this file points them at our tokens, so grids, dropdowns, calendars,
   dialogs and editors follow the same palette, edges and text colours as the hand-built pages. Only variables are
   set here: no selectors, no !important, no animation overrides. */
:root {
    --color-sf-primary: var(--color-primary);
    --color-sf-primary-text-color: var(--color-on-primary);
    --color-sf-primary-dark: var(--color-primary-hover);
    --color-sf-primary-light: color-mix(in srgb, var(--color-primary) 30%, var(--surface));
    --color-sf-primary-lighter: var(--color-selected);
    --color-sf-primary-bg-color-hover: var(--color-primary-hover);

    --color-sf-success: var(--color-success);
    --color-sf-warning: var(--color-warning);
    --color-sf-danger: var(--color-danger);
    --color-sf-success-light-alt: var(--color-success-bg);
    --color-sf-warning-light-alt: var(--color-warning-bg);
    --color-sf-danger-light-alt: var(--color-danger-bg);

    --color-sf-content-bg-color: var(--surface);
    --color-sf-content-bg-color-alt1: var(--surface);
    --color-sf-content-bg-color-alt2: var(--surface-sunken);
    --color-sf-content-bg-color-hover: color-mix(in srgb, var(--color-text) 6%, var(--surface));
    --color-sf-content-bg-color-focus: color-mix(in srgb, var(--color-text) 6%, var(--surface));
    --color-sf-content-bg-color-selected: var(--color-selected);
    --color-sf-flyout-bg-color: var(--surface);
    --color-sf-table-bg-color-selected: var(--color-selected);
    --color-sf-overlay-bg-color: var(--color-overlay);

    --color-sf-content-text-color: var(--color-text);
    --color-sf-content-text-color-alt1: var(--color-text);
    --color-sf-content-text-color-alt2: var(--color-text-muted);
    --color-sf-content-text-color-alt3: var(--color-text-muted);
    --color-sf-placeholder-text-color: var(--color-text-muted);

    --color-sf-border: var(--line-control);
    --color-sf-border-light: var(--line);
    --color-sf-border-alt: var(--line);
    --color-sf-border-dark: var(--line-strong);
    --color-sf-flyout-border: var(--line);
    --color-sf-secondary-border-color: var(--line-strong);

    --color-sf-shadow-color: rgba(15, 23, 42, 0.14);
}

/* Grids are most of the app's content, so they get the same finish as the hand-built cards: a rounded hairline
   container with a soft shadow, a quiet uppercase header, roomy rows and an orange-tinted hover. Selectors are kept
   to the grid's own classes; the base theme loads first and these follow at equal specificity. */
.e-grid {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.e-grid .e-gridheader {
    border-bottom: 1px solid var(--line);
    background: var(--surface-sunken);
}

.e-grid .e-headercell {
    background: var(--surface-sunken);
}

.e-grid .e-headercell .e-headertext {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.e-grid .e-rowcell {
    border-color: var(--line);
    font-variant-numeric: tabular-nums;
}

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

.e-grid .e-gridpager {
    border-top: 1px solid var(--line);
    background: var(--surface);
}