/* ============================================================================================
   Radzen.Blazor (5.5.5, material-base.css) -> Synergy token mapping.
   Loaded after _content/Radzen.Blazor/css/material-base.css and before synergy.css.
   Every value here is a Bootstrap token (--bs-*) or a --sy-* custom property from synergy.css,
   so both themes come for free; the [data-bs-theme=dark] block only carries the few literals
   that have no token. Variable names are the ones declared in material-base.css :root.
   See docs/UIFacelift/CURSOR_TASK.md T6 / T9.
   ============================================================================================ */

:root {
    /* type */
    --rz-root-font-size: 16px;
    --rz-body-font-size: .875rem;
    --rz-body-line-height: 1.5;
    --rz-text-font-family: var(--bs-body-font-family);
    --rz-icon-size: 1rem;

    /* palette: primary; "secondary" is Material pink in the base theme and only ever used as an
       accent (links, calendar selection, column resizer) - point it at primary so it cannot leak */
    --rz-primary: var(--bs-primary);
    --rz-primary-light: #4a92fc;
    --rz-primary-lighter: var(--bs-primary-bg-subtle);
    --rz-primary-dark: #1569e0;
    --rz-primary-darker: #1260cc;
    --rz-on-primary: #ffffff;
    --rz-on-primary-light: #ffffff;
    --rz-on-primary-lighter: var(--bs-primary-text-emphasis);
    --rz-on-primary-dark: #ffffff;
    --rz-on-primary-darker: #ffffff;
    --rz-secondary: var(--bs-primary);
    --rz-secondary-light: #4a92fc;
    --rz-secondary-lighter: var(--bs-primary-bg-subtle);
    --rz-secondary-dark: #1569e0;
    --rz-secondary-darker: #1260cc;
    --rz-on-secondary: #ffffff;
    --rz-on-secondary-light: #ffffff;
    --rz-on-secondary-lighter: var(--bs-primary-text-emphasis);
    --rz-on-secondary-dark: #ffffff;
    --rz-on-secondary-darker: #ffffff;
    --rz-info: var(--bs-info);
    --rz-info-lighter: var(--bs-info-bg-subtle);
    --rz-on-info-lighter: var(--bs-info-text-emphasis);
    --rz-success: var(--bs-success);
    --rz-success-lighter: var(--bs-success-bg-subtle);
    --rz-on-success-lighter: var(--bs-success-text-emphasis);
    --rz-warning: var(--bs-warning);
    --rz-warning-lighter: var(--bs-warning-bg-subtle);
    --rz-on-warning-lighter: var(--bs-warning-text-emphasis);
    --rz-danger: var(--bs-danger);
    --rz-danger-lighter: var(--bs-danger-bg-subtle);
    --rz-on-danger-lighter: var(--bs-danger-text-emphasis);

    /* base scale (grey ramp) -> theme-aware surfaces / text so derived --rz-* values follow the theme */
    --rz-white: var(--bs-secondary-bg);
    --rz-black: var(--bs-emphasis-color);
    --rz-base: var(--bs-tertiary-bg);
    --rz-base-50: var(--bs-tertiary-bg);
    --rz-base-100: var(--bs-tertiary-bg);
    --rz-base-200: var(--bs-border-color);
    --rz-base-300: var(--bs-border-color);
    --rz-base-400: var(--sy-input-border);
    --rz-base-500: var(--bs-tertiary-color);
    --rz-base-600: var(--bs-tertiary-color);
    --rz-base-700: var(--bs-secondary-color);
    --rz-base-800: var(--bs-body-color);
    --rz-base-900: var(--bs-emphasis-color);
    --rz-base-light: var(--bs-tertiary-bg);
    --rz-base-lighter: var(--bs-secondary-bg);
    --rz-base-dark: var(--bs-secondary-color);
    --rz-base-darker: var(--bs-emphasis-color);
    --rz-on-base: var(--bs-body-color);
    --rz-on-base-light: var(--bs-body-color);
    --rz-on-base-lighter: var(--bs-body-color);
    --rz-on-base-dark: var(--bs-body-bg);
    --rz-on-base-darker: var(--bs-body-bg);
    --rz-base-background-color: var(--bs-secondary-bg);
    --rz-body-background-color: var(--bs-body-bg);
    --rz-panel-background-color: var(--bs-secondary-bg);

    /* text */
    --rz-text-title-color: var(--bs-emphasis-color);
    --rz-text-color: var(--bs-body-color);
    --rz-text-secondary-color: var(--bs-secondary-color);
    --rz-text-tertiary-color: var(--bs-tertiary-color);
    --rz-text-disabled-color: var(--bs-tertiary-color);
    --rz-text-contrast-color: #ffffff;
    --rz-text-selection-background-color: rgba(var(--bs-primary-rgb), .25);
    --rz-link-color: var(--bs-link-color);
    --rz-link-hover-color: var(--bs-link-hover-color);

    /* borders, radii, focus, shadows */
    --rz-border-width: 1px;
    --rz-border-radius: .5rem;
    --rz-border-normal: var(--rz-border-width) solid var(--sy-input-border);
    --rz-border-hover: var(--rz-border-width) solid var(--sy-input-border);
    --rz-border-focus: var(--rz-border-width) solid var(--bs-primary);
    --rz-border-disabled: var(--rz-border-width) solid var(--sy-input-border);
    --rz-outline-color: var(--bs-primary);
    --rz-outline-width: 2px;
    --rz-outline-offset: 2px;
    --rz-shadow-1: var(--sy-shadow-sm);
    --rz-shadow-2: var(--sy-shadow-sm);
    --rz-shadow-3: var(--sy-shadow-md);
    --rz-shadow-4: var(--sy-shadow-md);
    --rz-shadow-5: var(--sy-shadow-md);
    --rz-shadow-6: var(--sy-shadow-lg);
    --rz-shadow-7: var(--sy-shadow-lg);
    --rz-shadow-8: var(--sy-shadow-lg);
    --rz-shadow-9: var(--sy-shadow-lg);
    --rz-shadow-10: var(--sy-shadow-lg);

    /* inputs: same box as .form-control (39 px = .875rem x 1.5 + 2 x .5rem + 2 x 1px) */
    --rz-input-height: calc(1.5 * .875rem + 1rem + 2px);
    --rz-input-font-size: .875rem;
    --rz-input-line-height: 1.5;
    --rz-input-padding-block: .5rem;
    --rz-input-padding-inline: .75rem;
    --rz-input-value-color: var(--bs-emphasis-color);
    --rz-input-placeholder-color: var(--bs-tertiary-color);
    --rz-input-background-color: var(--sy-input-bg);
    --rz-input-border: var(--rz-border-normal);
    --rz-input-border-radius: var(--rz-border-radius);
    --rz-input-shadow: none;
    --rz-input-hover-shadow: none;
    --rz-input-hover-border: var(--rz-border-normal);
    --rz-input-focus-shadow: var(--sy-focus-ring);
    --rz-input-focus-border: var(--rz-border-focus);
    --rz-input-focus-outline: none;
    --rz-input-disabled-background-color: var(--sy-input-disabled-bg);
    --rz-input-disabled-color: var(--bs-secondary-color);
    --rz-input-disabled-placeholder-color: var(--bs-tertiary-color);
    --rz-input-disabled-border: var(--rz-border-disabled);
    --rz-input-disabled-shadow: none;
    --rz-input-disabled-opacity: 1;

    /* dropdown (RadzenDropDown) + panel */
    --rz-dropdown-horizontal-padding: .75rem;
    --rz-dropdown-trigger-icon-margin-inline: 0 .5rem;
    --rz-dropdown-open-background-color: var(--sy-input-bg);
    --rz-dropdown-open-border: var(--rz-border-focus);
    --rz-dropdown-panel-background-color: var(--bs-secondary-bg);
    --rz-dropdown-panel-border: var(--rz-border-width) solid var(--bs-border-color);
    --rz-dropdown-panel-shadow: var(--sy-shadow-md);
    --rz-dropdown-panel-padding: 0 .75rem;
    --rz-dropdown-items-margin: 0 -.75rem;
    --rz-dropdown-items-padding: .375rem 0;
    --rz-dropdown-item-padding: .5rem .75rem;
    --rz-dropdown-item-font-size: .875rem;
    --rz-dropdown-item-hover-background-color: var(--bs-tertiary-bg);
    --rz-dropdown-item-hover-color: var(--bs-emphasis-color);
    --rz-dropdown-item-selected-background-color: var(--bs-primary);
    --rz-dropdown-item-selected-color: #ffffff;
    --rz-dropdown-item-selected-hover-background-color: #1569e0;
    --rz-dropdown-item-selected-hover-color: #ffffff;
    --rz-dropdown-filter-border: var(--rz-border-width) solid var(--bs-border-color);
    --rz-dropdown-filter-padding: .5rem 0;
    --rz-dropdown-chips-padding-block: .25rem;
    --rz-dropdown-chips-padding-inline: .25rem .75rem;

    /* date picker */
    --rz-datepicker-trigger-icon-color: var(--bs-secondary-color);
    --rz-datepicker-trigger-icon-hover-color: var(--bs-emphasis-color);
    --rz-datepicker-panel-background-color: var(--bs-secondary-bg);
    --rz-datepicker-panel-shadow: var(--sy-shadow-md);
    --rz-datepicker-header-color: var(--bs-body-color);
    --rz-datepicker-header-background-color: var(--bs-secondary-bg);
    --rz-datepicker-calendar-header-color: var(--bs-tertiary-color);
    --rz-datepicker-calendar-color: var(--bs-body-color);
    --rz-datepicker-calendar-hover-color: var(--bs-emphasis-color);
    --rz-datepicker-calendar-hover-background-color: var(--bs-tertiary-bg);
    --rz-datepicker-calendar-selected-color: #ffffff;
    --rz-datepicker-calendar-selected-background-color: var(--bs-primary);
    --rz-datepicker-calendar-selected-hover-color: #ffffff;
    --rz-datepicker-calendar-selected-hover-background-color: #1569e0;
    --rz-datepicker-calendar-today-color: var(--bs-primary-text-emphasis);
    --rz-datepicker-calendar-today-box-shadow: inset 0 0 0 1px var(--bs-primary);

    /* data grid */
    --rz-grid-background-color: transparent;
    --rz-grid-border: var(--rz-border-width) solid var(--bs-border-color);
    --rz-grid-border-radius: 0;
    --rz-grid-toolbar-background-color: transparent;
    --rz-grid-header-background-color: transparent;
    --rz-grid-header-sorted-background-color: transparent;
    --rz-grid-header-color: var(--bs-secondary-color);
    --rz-grid-header-font-size: .6875rem;
    --rz-grid-header-font-weight: 600;
    --rz-grid-header-text-transform: uppercase;
    --rz-grid-header-line-height: 1rem;
    --rz-grid-header-cell-padding: .625rem 0;
    --rz-grid-header-title-padding-inline: .75rem 0;
    --rz-grid-header-cell-border: none;
    --rz-grid-header-cell-border-bottom: var(--rz-border-width) solid var(--bs-border-color);
    --rz-grid-header-filter-icon-hover-color: var(--bs-emphasis-color);
    --rz-grid-header-filter-icon-active-color: var(--bs-primary);
    --rz-grid-sort-icon-color: var(--bs-secondary-color);
    --rz-grid-cell-color: var(--bs-body-color);
    --rz-grid-cell-font-size: .875rem;
    --rz-grid-cell-line-height: 1.75rem;
    --rz-grid-cell-padding: .5rem .75rem; /* 28 px line + 16 px padding + 1 px rule = 45 px rows (thumbnail tiles are capped at 28 px in synergy.css) */
    --rz-grid-cell-border: var(--rz-border-width) solid var(--bs-border-color);
    --rz-grid-right-cell-border: none;
    --rz-grid-bottom-cell-border: var(--rz-border-width) solid var(--bs-border-color);
    --rz-grid-stripe-background-color: rgba(var(--bs-emphasis-color-rgb), .025);
    --rz-grid-stripe-odd-background-color: transparent;
    --rz-grid-hover-background-color: rgba(var(--bs-emphasis-color-rgb), .04);
    --rz-grid-hover-color: var(--bs-body-color);
    --rz-grid-selected-background-color: var(--bs-primary-bg-subtle);
    --rz-grid-selected-color: var(--bs-body-color);
    --rz-grid-frozen-cell-background-color: var(--bs-secondary-bg);
    --rz-grid-frozen-cell-border: var(--rz-border-width) solid var(--bs-border-color);
    --rz-grid-foot-background-color: transparent;
    --rz-grid-foot-cell-color: var(--bs-body-color);
    --rz-grid-filter-background-color: transparent;
    --rz-grid-filter-color: var(--bs-secondary-color);
    --rz-grid-filter-padding: .375rem .5rem;
    --rz-grid-filter-font-size: .8125rem;
    --rz-grid-filter-icon-font-size: .875rem;
    --rz-grid-filter-buttons-background-color: var(--bs-secondary-bg);
    --rz-grid-clear-filter-button-background-color: transparent;
    --rz-grid-clear-filter-button-color: var(--bs-body-color);
    --rz-grid-apply-filter-button-background-color: transparent;
    --rz-grid-apply-filter-button-color: var(--bs-primary);
    --rz-grid-detail-template-background-color: var(--bs-tertiary-bg);
    --rz-grid-group-header-item-color: var(--bs-body-color);
    --rz-grid-group-header-item-background-color: var(--bs-tertiary-bg);
    --rz-grid-group-header-item-border: var(--rz-border-width) solid var(--bs-border-color);
    --rz-grid-loading-indicator-background-color: var(--sy-overlay-bg);
    --rz-grid-loading-indicator-color: var(--bs-primary);
    --rz-grid-column-resizer-helper-background-color: var(--bs-primary);

    /* pager */
    --rz-pager-background-color: transparent;
    --rz-pager-padding: .5rem .75rem;
    --rz-pager-gap: .25rem;
    --rz-pager-button-border-radius: .375rem;
    --rz-pager-numeric-button-min-width: 2rem;
    --rz-pager-numeric-button-padding: 0 .5rem;
    --rz-pager-numeric-button-selected-padding: 0 .5rem;
    --rz-pager-numeric-button-background-color: transparent;
    --rz-pager-numeric-button-color: var(--bs-body-color);
    --rz-pager-numeric-button-hover-background-color: var(--bs-tertiary-bg);
    --rz-pager-numeric-button-hover-color: var(--bs-emphasis-color);
    --rz-pager-numeric-button-selected-background-color: var(--bs-primary);
    --rz-pager-numeric-button-selected-color: #ffffff;
    --rz-pager-back-button-background-color: transparent;
    --rz-pager-back-button-color: var(--bs-body-color);
    --rz-pager-next-button-background-color: transparent;
    --rz-pager-next-button-color: var(--bs-body-color);
    --rz-pager-summary-color: var(--bs-secondary-color);
    --rz-pager-summary-font-size: .8125rem;
    --rz-pager-summary-padding: .75rem;

    /* checkbox */
    --rz-checkbox-width: 1.125rem;
    --rz-checkbox-height: 1.125rem;
    --rz-checkbox-border-width: 1px;
    --rz-checkbox-border-radius: .25rem;
    --rz-checkbox-checked-background-color: var(--bs-primary);
    --rz-checkbox-checked-hover-background-color: #1569e0;
    --rz-checkbox-checked-border: var(--rz-border-width) solid var(--bs-primary);
    --rz-checkbox-checked-hover-border: var(--rz-border-width) solid #1569e0;
    --rz-checkbox-checked-disabled-background-color: var(--bs-tertiary-color);
    --rz-checkbox-checked-disabled-border: var(--rz-border-width) solid var(--bs-tertiary-color);
    --rz-checkbox-checked-color: #ffffff;

    /* chip, tooltip, buttons */
    --rz-chip-background-color: var(--bs-tertiary-bg);
    --rz-chip-color: var(--bs-body-color);
    --rz-chip-border-radius: 50rem;
    --rz-chip-font-size: .75rem;
    --rz-tooltip-background-color: var(--bs-emphasis-color);
    --rz-tooltip-color: var(--bs-body-bg);
    --rz-tooltip-border-radius: .375rem;
    --rz-tooltip-font-size: .8125rem;
    --rz-button-base-background-color: var(--bs-primary);
    --rz-button-base-color: #ffffff;
    --rz-button-border-radius: var(--rz-border-radius);
    --rz-button-hover-shadow: none;
    /* Material's UPPERCASE badges / tabs would sit next to Bootstrap's sentence-case ones (buttons below). */
    --rz-badge-text-transform: none;
    --rz-badge-letter-spacing: 0;
    --rz-tabs-tab-text-transform: none;
    --rz-tabs-tab-letter-spacing: 0;
    --rz-splitbutton-background-color: var(--bs-primary);
    --rz-splitbutton-border-radius: var(--rz-border-radius);
    --rz-splitbutton-menu-shadow: var(--sy-shadow-md);
}

/* Literals that have no light/dark token. Everything else above follows --bs-* automatically. */
[data-bs-theme=dark] {
    --rz-primary-light: #6ea8fe;
    --rz-secondary-light: #6ea8fe;
    --rz-text-contrast-color: #ffffff;
}

/* --------------------------------------------------------------------------------------------
   Rules material-base.css cannot express through variables.
   -------------------------------------------------------------------------------------------- */

/* Links inside Radzen content use the Bootstrap link colour (calendar days and pager pages are anchors
   too - they keep their own colours). */
.rz-data-grid a:not(.btn):not(.rz-button):not(.rz-pager-page):not(.rz-pager-element),
.rz-dropdown-panel a:not(.btn):not(.rz-button),
.rz-datepicker-panel a:not(.rz-state-default):not(.rz-button) {
    color: var(--bs-link-color);
}

    .rz-data-grid a:not(.btn):not(.rz-button):not(.rz-pager-page):not(.rz-pager-element):hover {
        color: var(--bs-link-hover-color);
    }

/* GridLines="Both" (19 grids): horizontal rules only. Same selectors as material-base.css so this
   wins by order, no markup change. */
.rz-grid-table.rz-grid-gridlines-both > thead > tr > th:not(:last-child),
.rz-grid-table.rz-grid-gridlines-both > thead > tr > th.rz-composite-cell:not(:last-child),
.rz-grid-table.rz-grid-gridlines-both > tbody > tr > td:not(:last-child),
.rz-grid-table.rz-grid-gridlines-both > tfoot > tr > td:not(:last-child) {
    border-inline-end: none;
}

/* Header per §2.4 (letter-spacing has no variable). */
.rz-grid-table thead th .rz-column-title {
    letter-spacing: .06em;
}

.rz-grid-table thead th .rz-column-title-content {
    padding-right: .5rem;
}

/* Leading icon / action columns must not inflate the 45 px row (28 px line box). */
.rz-grid-table td .rz-cell-data > .btn,
.rz-grid-table td .rz-cell-data > a > i,
.rz-grid-table td .rz-cell-data > i {
    vertical-align: middle;
}

.rz-grid-table td .rz-cell-data > .btn-sm {
    margin-block: -.125rem; /* 31.5 px button in a 28 px line */
}

/* Filter row: 32 px controls. */
.rz-cell-filter .rz-dropdown,
.rz-cell-filter .rz-textbox,
.rz-cell-filter .rz-numeric,
.rz-cell-filter .rz-datepicker > .rz-inputtext,
.rz-cell-filter .rz-lookup-search input {
    --rz-input-height: 2rem;
    --rz-input-padding-block: .25rem;
    --rz-input-padding-inline: .5rem;
    --rz-input-font-size: .8125rem;
}

/* Pager: 32 px buttons (material-base sizes them as large uppercase buttons). */
.rz-pager .rz-pager-element,
.rz-pager .rz-pager-page {
    height: 2rem;
    min-height: 2rem;
    min-width: 2rem;
    line-height: 2rem;
    padding: 0 .5rem;
    font-size: .8125rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

    .rz-pager .rz-pager-element .rzi {
        font-size: 1.125rem;
        width: 1.125rem;
        height: 1.125rem;
        line-height: 1.125rem;
    }

.rz-pager .rz-pager-element.rz-state-disabled {
    opacity: .4;
}

/* Radzen buttons (RadzenSplitButton "Options" on the data sheet grids): material-base hard-codes
   UPPERCASE + 1.25px tracking per size class; match Bootstrap's buttons instead. */
.rz-button.rz-button-xs,
.rz-button.rz-button-sm,
.rz-button.rz-button-md,
.rz-button.rz-button-lg,
.rz-splitbutton .rz-button {
    text-transform: none;
    letter-spacing: 0;
}

/* Frozen columns (Frozen="true", 4 grids). material-base paints sticky cells with the frozen-cell colour,
   but its striped-row rule (`.rz-grid-table-striped tbody > tr:nth-child(…) > td`) is more specific and
   our stripe tints are translucent, so scrolled content showed through. Opaque base colour here, with the
   stripe / hover / selected tint layered on top as a background-image so frozen cells still match the row. */
.rz-grid-table.rz-grid-table-fixed > tbody > tr:not(.rz-expanded-row-content) > td.rz-frozen-cell,
.rz-grid-table.rz-grid-table-fixed > thead > tr > th.rz-frozen-cell {
    background-color: var(--rz-grid-frozen-cell-background-color);
}

.rz-grid-table.rz-grid-table-fixed.rz-grid-table-striped > tbody > tr:not(.rz-expanded-row-content):nth-child(even) > td.rz-frozen-cell {
    background-image: linear-gradient(var(--rz-grid-stripe-background-color), var(--rz-grid-stripe-background-color));
}

.rz-grid-table.rz-grid-table-fixed.rz-selectable > tbody > tr.rz-data-row:hover:not(.rz-state-highlight) > td.rz-frozen-cell {
    background-color: var(--rz-grid-frozen-cell-background-color);
    background-image: linear-gradient(var(--rz-grid-hover-background-color), var(--rz-grid-hover-background-color));
}

.rz-grid-table.rz-grid-table-fixed.rz-selectable > tbody > tr.rz-data-row.rz-state-highlight > td.rz-frozen-cell {
    background-color: var(--rz-grid-frozen-cell-background-color);
    background-image: linear-gradient(var(--rz-grid-selected-background-color), var(--rz-grid-selected-background-color));
}

/* Group header strip and loading overlay. */
.rz-group-header {
    border-bottom: var(--rz-border-width) solid var(--bs-border-color);
}

.rz-datatable-loading-content .rzi-circle-o-notch {
    color: var(--bs-primary);
}