/* 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. The first block sets
   only variables; the table block after it styles the grids (phase 12). 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) 4%, 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);
}


/* Tables, the Apple list (phase 12, UX-03; DESIGN-SYSTEM.md section 5.3). Finder's list view, Mail's message list: a white
   header in sentence case with no dividers, 40px rows split by hairlines, a neutral hover, the selection marked by a tint and
   an orange inner edge, an always-visible focus ring, funnels only on hover or while filtering, a one-line pager. Implemented
   once here so pages only declare columns. Selectors follow the base theme's at equal or higher specificity. */
.e-grid {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    font-family: inherit;
}

/* No box in a box: inside a card, a panel or a dialog the grid keeps its hairline but drops its shadow. */
.card .e-grid, .wizard-panel .e-grid, .modal .e-grid {
    box-shadow: none;
}

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

.e-grid .e-headercell, .e-grid .e-detailheadercell {
    height: var(--row-height);
    padding: 0 var(--space-3);
    background: var(--surface);
}

.e-grid .e-headercell .e-headertext, .e-grid .e-headercelldiv {
    color: var(--color-text-muted);
    font-size: var(--font-size-caption);
    font-weight: 600;
    letter-spacing: var(--tracking-small);
    text-transform: none;
}

.e-grid .e-headercell:hover .e-headertext, .e-grid .e-headercell[aria-sort="ascending"] .e-headertext, .e-grid .e-headercell[aria-sort="descending"] .e-headertext {
    color: var(--color-text);
}

/* Column dividers only where a column is being resized (the handle shows on header hover). */
.e-grid.e-resize-lines .e-headercell .e-rhandler, .e-grid.e-resize-lines .e-headercell.e-lastcell .e-rhandler {
    border-right-color: transparent;
}

.e-grid.e-resize-lines .e-headercell:hover .e-rhandler {
    border-right: 1px solid var(--line-strong);
}

/* Funnels (decision D-1): hidden until the header is hovered or focused; a filtered column keeps its funnel, filled orange. */
.e-grid .e-filtermenudiv {
    opacity: 0;
    transition: opacity var(--press-duration) ease-out;
}

.e-grid .e-headercell:hover .e-filtermenudiv, .e-grid .e-headercell:focus-within .e-filtermenudiv, .e-grid .e-headercell.e-focused .e-filtermenudiv,
.e-grid .e-filtermenudiv.e-filtered {
    opacity: 1;
}

.e-grid .e-filtermenudiv.e-filtered, .e-grid .e-filtermenudiv.e-filtered::before {
    color: var(--color-primary);
}

@media (pointer: coarse) {
    .e-grid .e-filtermenudiv {
        opacity: 1;
    }
}

/* Rows: 40px, hairlines between them and none after the last, numbers in tabular figures, no zebra. */
.e-grid .e-rowcell {
    height: var(--row-height);
    padding: 0 var(--space-3);
    border-color: var(--line);
    font-size: var(--font-size-base);
    line-height: var(--leading-dense);
    font-variant-numeric: tabular-nums;
}

/* Grids that wrap long text (logs, comments) keep the row rhythm as padding instead of a fixed height. */
.e-grid.e-wrap .e-rowcell, .e-grid .e-rowcell.e-wrap {
    height: auto;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
    white-space: normal;
}

.e-grid .e-row:first-child .e-rowcell {
    border-top-color: transparent;
}

.e-grid.e-default .e-rowcell.e-lastrowcell:not(.e-xlsel-bottom-border), .e-grid.e-default .e-detailrowcollapse.e-lastrowcell {
    border-bottom-width: 0;
}

.e-grid .e-altrow {
    background: transparent;
}

/* Dense lists (price list, codes, logs): <SfGrid class="grid-dense">. Lists whose rows open a record: class="grid-open-rows". */
.e-grid.grid-dense .e-rowcell {
    height: var(--row-height-dense);
}

/* The record's name is text, not an orange link: the row opens it, the anchor stays for the keyboard and a middle click. */
.e-grid .e-rowcell a:not(.btn) {
    color: var(--color-text);
    font-weight: var(--weight-emph);
    text-decoration: none;
}

.e-grid .e-rowcell a:not(.btn):hover {
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
}

.e-grid.grid-open-rows .e-row {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* Selection: a tint plus an orange inner edge on the first visible cell, so it never reads like the hover. */
.e-grid td.e-active, .e-grid .e-rowcell.e-selectionbackground {
    background: var(--color-selected);
    color: var(--color-text);
}

.e-grid .e-row[aria-selected="true"] > td:nth-child(1 of :not(.e-hide)) {
    box-shadow: inset 3px 0 0 var(--color-primary);
}

/* Keyboard focus on a cell or a header: a 2px inset orange ring, always visible. */
.e-grid .e-focused:not(.e-menu-item):not(.e-editedbatchcell) {
    box-shadow: inset 0 0 0 2px var(--color-focus);
}

.e-grid .e-row[aria-selected="true"] > td.e-focused:nth-child(1 of :not(.e-hide)) {
    box-shadow: inset 3px 0 0 var(--color-primary), inset 0 0 0 2px var(--color-focus);
}

/* Totals in the footer: right-aligned figures, set off by a stronger rule. */
.e-grid .e-gridfooter, .e-grid .e-summarycontent, .e-grid .e-summaryrow .e-summarycell {
    background: var(--surface);
}

.e-grid .e-summaryrow .e-summarycell {
    border-top: 1px solid var(--line-strong);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.e-grid .e-emptyrow td {
    height: auto;
    padding: var(--space-6) var(--space-4);
    color: var(--color-text-muted);
    text-align: center;
}

/* The default pager (grids without GridDefaults) made quieter: no boxes, the current page as a neutral pill. */
.e-grid .e-gridpager {
    border-top: 1px solid var(--line);
    background: var(--surface);
}

.e-pager .e-numericitem, .e-pager .e-pagercontainer, .e-pager .e-first, .e-pager .e-prev, .e-pager .e-next, .e-pager .e-last {
    border: 0;
    background: transparent;
}

.e-pager .e-numericitem {
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
}

.e-pager .e-currentitem, .e-pager .e-currentitem:hover {
    background: var(--surface-sunken);
    color: var(--color-text);
    font-weight: 600;
}

/* GridDefaults' pager: one quiet line at the card's foot; hidden when everything fits on one page. */
.e-grid .e-gridpager:has(.grid-pager) {
    padding: var(--space-1) var(--space-3);
}

.e-grid .e-gridpager:has(.grid-pager) > div {
    display: block;
}

.e-grid .e-gridpager:has(.grid-pager-single) {
    display: none;
}

.e-pager .grid-pager {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    min-height: var(--control-height-sm);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.grid-pager-range {
    margin-right: auto;
}

.grid-pager-size {
    height: var(--control-height-sm);
    padding: 0 var(--space-2);
    font-size: var(--font-size-sm);
}

/* A grid in a .fill takes its height from the page: header, rows (scrolling) and pager as a column. */
.fill > .e-grid {
    display: flex;
    flex-direction: column;
}

.fill > .e-grid > .e-gridcontent {
    flex: 1 1 0;
    min-height: 0;
}

.fill > .e-grid > .e-gridcontent > .e-content {
    height: 100% !important;
}

/* Controls (phase 12, UX-04; DESIGN-SYSTEM.md section 5.2): Syncfusion inputs, comboboxes, drop-downs and date pickers take
   the same height, edge, radius, font and focus ring as the native controls in app.css, so a form has one control language.
   The base theme's selectors are long, hence the few !important on the focus state. */
.e-input-group, .e-input-group.e-control-wrapper, .e-float-input, .e-float-input.e-control-wrapper {
    min-height: var(--control-height);
    border: 1px solid var(--line-control);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-family: inherit;
}

.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 textarea.e-input {
    min-height: calc(var(--control-height) - 2px);
    padding: 0 var(--space-3);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--font-size-base);
}

.e-input-group.e-input-focus, .e-input-group.e-control-wrapper.e-input-focus, .e-input-group:focus-within {
    border-color: var(--color-focus) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 28%, transparent) !important;
}

.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
    min-width: 2rem;
    color: var(--color-text-muted);
}

.e-input-group.e-disabled, .e-input-group.e-control-wrapper.e-disabled {
    background: var(--surface-sunken);
}

/* Popups of comboboxes and date pickers: a card with the menu shadow. */
.e-ddl.e-popup, .e-datepicker.e-popup-wrapper, .e-popup.e-popup-open.e-ddl {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

.e-dropdownbase .e-list-item {
    font-family: inherit;
    font-size: var(--font-size-base);
}

.e-dropdownbase .e-list-item.e-hover, .e-dropdownbase .e-list-item:hover {
    background: var(--hover-tint);
}

.e-dropdownbase .e-list-item.e-active, .e-dropdownbase .e-list-item.e-active.e-hover {
    background: var(--color-selected);
    color: var(--color-text);
}