/* ============================================================
   Button color fix — bridges the legacy fluent.css color rules
   (.rz-button.rz-<color>) onto Radzen's current variant-based
   markup (.rz-button.rz-variant-filled.rz-<color>), which the
   original theme predates. Only affects the "filled" variant;
   outlined/flat/text buttons are unaffected. Excludes the app's
   own custom status-tint classes (redbutton/greenbutton/
   yellowbutton/orderbutton) so their inline/custom colors and
   transparency (e.g. unit-diagram hotspot overlays) still win.
   ============================================================ */
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-primary {
    background-color: var(--rz-primary) !important;
    color: var(--rz-on-primary) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-primary.rz-shade-lighter {
    background-color: var(--rz-primary-lighter) !important;
    color: var(--rz-on-primary-lighter) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-primary.rz-shade-light {
    background-color: var(--rz-primary-light) !important;
    color: var(--rz-on-primary-light) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-primary.rz-shade-dark {
    background-color: var(--rz-primary-dark) !important;
    color: var(--rz-on-primary-dark) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-primary.rz-shade-darker {
    background-color: var(--rz-primary-darker) !important;
    color: var(--rz-on-primary-darker) !important;
}

.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-secondary {
    background-color: var(--rz-secondary) !important;
    color: var(--rz-on-secondary) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-secondary.rz-shade-lighter {
    background-color: var(--rz-secondary-lighter) !important;
    color: var(--rz-on-secondary-lighter) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-secondary.rz-shade-light {
    background-color: var(--rz-secondary-light) !important;
    color: var(--rz-on-secondary-light) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-secondary.rz-shade-dark {
    background-color: var(--rz-secondary-dark) !important;
    color: var(--rz-on-secondary-dark) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-secondary.rz-shade-darker {
    background-color: var(--rz-secondary-darker) !important;
    color: var(--rz-on-secondary-darker) !important;
}

.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-info {
    background-color: var(--rz-info) !important;
    color: var(--rz-on-info) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-info.rz-shade-lighter {
    background-color: var(--rz-info-lighter) !important;
    color: var(--rz-on-info-lighter) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-info.rz-shade-light {
    background-color: var(--rz-info-light) !important;
    color: var(--rz-on-info-light) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-info.rz-shade-dark {
    background-color: var(--rz-info-dark) !important;
    color: var(--rz-on-info-dark) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-info.rz-shade-darker {
    background-color: var(--rz-info-darker) !important;
    color: var(--rz-on-info-darker) !important;
}

.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-warning {
    background-color: var(--rz-warning) !important;
    color: var(--rz-on-warning) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-warning.rz-shade-lighter {
    background-color: var(--rz-warning-lighter) !important;
    color: var(--rz-on-warning-lighter) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-warning.rz-shade-light {
    background-color: var(--rz-warning-light) !important;
    color: var(--rz-on-warning-light) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-warning.rz-shade-dark {
    background-color: var(--rz-warning-dark) !important;
    color: var(--rz-on-warning-dark) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-warning.rz-shade-darker {
    background-color: var(--rz-warning-darker) !important;
    color: var(--rz-on-warning-darker) !important;
}

.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-danger {
    background-color: var(--rz-danger) !important;
    color: var(--rz-on-danger) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-danger.rz-shade-lighter {
    background-color: var(--rz-danger-lighter) !important;
    color: var(--rz-on-danger-lighter) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-danger.rz-shade-light {
    background-color: var(--rz-danger-light) !important;
    color: var(--rz-on-danger-light) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-danger.rz-shade-dark {
    background-color: var(--rz-danger-dark) !important;
    color: var(--rz-on-danger-dark) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-danger.rz-shade-darker {
    background-color: var(--rz-danger-darker) !important;
    color: var(--rz-on-danger-darker) !important;
}

.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-success {
    background-color: var(--rz-success) !important;
    color: var(--rz-on-success) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-success.rz-shade-lighter {
    background-color: var(--rz-success-lighter) !important;
    color: var(--rz-on-success-lighter) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-success.rz-shade-light {
    background-color: var(--rz-success-light) !important;
    color: var(--rz-on-success-light) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-success.rz-shade-dark {
    background-color: var(--rz-success-dark) !important;
    color: var(--rz-on-success-dark) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-success.rz-shade-darker {
    background-color: var(--rz-success-darker) !important;
    color: var(--rz-on-success-darker) !important;
}

.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-base,
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-light {
    background-color: var(--rz-base-200) !important;
    color: var(--rz-text-color) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-base.rz-shade-lighter {
    background-color: var(--rz-base-lighter) !important;
    color: var(--rz-on-base-lighter) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-base.rz-shade-light {
    background-color: var(--rz-base-light) !important;
    color: var(--rz-on-base-light) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-base.rz-shade-default {
    background-color: var(--rz-base) !important;
    color: var(--rz-on-base) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-base.rz-shade-dark {
    background-color: var(--rz-base-dark) !important;
    color: var(--rz-on-base-dark) !important;
}
.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-base.rz-shade-darker {
    background-color: var(--rz-base-darker) !important;
    color: var(--rz-on-base-darker) !important;
}

.rz-button:not(.redbutton):not(.greenbutton):not(.yellowbutton):not(.orderbutton).rz-variant-filled.rz-dark {
    background-color: var(--rz-base-900) !important;
    color: var(--rz-text-contrast-color) !important;
}

/* ============================================================
   RadzenTabs fix — old theme only styled the tab-item's inner
   <a> element; current Radzen renders it as a <button> instead.
   Mirrors the existing "li a" rules onto "li button".
   ============================================================ */
.rz-tabview-nav li button,
.rz-tabview-nav li button:not([href]):not([class]) {
    display: flex;
    align-items: center;
    color: inherit;
    background: none;
    border: none;
    padding-block: var(--rz-tabs-tab-padding-block);
    padding-inline: var(--rz-tabs-tab-padding-inline);
    font-size: var(--rz-tabs-tab-font-size);
    line-height: var(--rz-tabs-tab-line-height);
    font-weight: var(--rz-tabs-tab-font-weight);
    text-transform: var(--rz-tabs-tab-text-transform);
    letter-spacing: var(--rz-tabs-tab-letter-spacing);
    text-decoration: none;
    cursor: pointer;
}
.rz-tabview-nav li button:hover {
    text-decoration: none;
}

/* ============================================================
   DataGrid filter-icon fix — Radzen 11.x renders the per-column
   filter toggle as an actual <button> (for accessibility: it now
   carries aria-haspopup/aria-expanded), where the old theme's
   .rz-grid-filter-icon rule (color/margin/font-weight only)
   predates that change and never resets native button chrome.
   Without a reset, the browser's default button rendering
   (outset border, padding, "-webkit-appearance: button") takes
   over and the Material Symbols ligature glyph fails to render,
   showing as a broken/blank icon instead of the filter icon.
   Mirrors the .rz-sortable-column-icon <span>, which needs no
   such reset and already renders correctly.
   ============================================================ */
button.rz-grid-filter-icon {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* ============================================================
   Scheduler "+N more" fix — same root cause as the filter-icon
   fix above: fluent.css only styles the old <a class="rz-event-
   list-btn"> markup (position/color/font-size, underline on
   hover), but Radzen 11.x renders the month-view overflow badge
   as a <button> instead. With no reset, native button chrome
   (outset border, gray background, default padding) shows
   instead of the intended plain text-link look.
   ============================================================ */
.rz-scheduler button.rz-event-list-btn {
    position: absolute;
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding-inline-start: .25rem;
    padding-block: 0;
    color: var(--rz-scheduler-event-list-button-color);
    font-size: var(--rz-scheduler-event-list-button-font-size);
    font-family: inherit;
    text-align: start;
}
.rz-scheduler button.rz-event-list-btn:hover {
    cursor: pointer;
    color: var(--rz-scheduler-event-list-button-color);
    text-decoration: underline;
}

/* ============================================================
   Same "unstyled native <button>" gap as the two fixes above,
   found via a site-wide sweep after the Radzen 11.x upgrade:
   both are rendered as plain <button> elements and fluent.css
   never resets their native chrome (outset border, gray fill).
   - .rz-dropdown-clear-icon: the "x" clear button inside
     dropdown/date/timespan pickers - fluent.css positions it
     but has no appearance/border/background reset, so its
     "close" ligature glyph was rendering behind native chrome.
   - .rz-multiselect-selectall: the "All" toggle in a multiselect
     dropdown - fluent.css has no rule for this class at all.
   ============================================================ */
button.rz-dropdown-clear-icon,
button.rz-multiselect-selectall {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    cursor: pointer;
}

/* ============================================================
   RadzenAccordion header fix — same <a> to <button> swap as the
   RadzenTabs fix at the top of this file. fluent.css only styles
   ".rz-accordion-header > a" (padding/color/font/etc.), but the
   header toggle is now an unclassed <button> with no "a" tag to
   match, so it fell back to raw native button chrome (outset
   border, gray fill) instead of the intended flat toggle look.
   ============================================================ */
.rz-accordion .rz-accordion-header > button {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    width: 100%;
    text-align: start;
    padding-block: var(--rz-accordion-item-padding-block);
    padding-inline: var(--rz-accordion-item-padding-inline);
    color: var(--rz-accordion-item-color);
    line-height: var(--rz-accordion-item-line-height);
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: var(--rz-accordion-item-font-size);
    font-weight: var(--rz-accordion-item-font-weight);
    cursor: pointer;
}
.rz-accordion .rz-accordion-header > button:hover {
    color: var(--rz-accordion-hover-color);
}
.rz-accordion .rz-accordion-header > button span:not(.rz-accordion-toggle-icon) {
    flex-grow: 1;
}
.rz-accordion .rz-accordion-header > button > .rzi {
    font-size: var(--rz-accordion-icon-font-size);
    margin-inline: var(--rz-accordion-icon-margin-inline);
}

/* ============================================================
   RadzenFieldset legend fix — same <a> to <button> swap. Radzen
   11.2.8's own official theme dropped the "a." tag qualifier for
   .rz-fieldset-legend entirely (confirmed against the shipped
   package CSS), matching the pattern seen in every other fix in
   this file: the collapsible legend toggle is now a <button>.
   fluent.css's ".rz-fieldset-legend a" rule never matches it, so
   it fell back to native button chrome instead of the intended
   plain inline-flex toggle look. Used on ~14 pages.
   ============================================================ */
.rz-fieldset-legend button {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;
    display: inline-flex;
    align-items: center;
    color: inherit;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}
.rz-fieldset-legend button:focus {
    outline: var(--rz-outline-normal);
}

/* ============================================================
   Dialog close ("X") button fix — same missing-reset gap as the
   grid filter icon, dropdown clear icon, and multiselect "All"
   toggle above. fluent.css only styles the .rzi-times glyph
   *inside* .rz-dialog-titlebar-close/.rz-dialog-side-titlebar-
   close, never the <button> wrapper itself, so it fell back to
   native button chrome (outset border, gray fill) - the "X in a
   gray box" seen on popup/dialog forms.
   ============================================================ */
button.rz-dialog-titlebar-close,
button.rz-dialog-side-titlebar-close {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

/* ============================================================
   Icon glyph fix — Radzen 11.x renders some internal icons
   (e.g. certain DataGrid header sort/filter glyphs) via the
   classic .material-icons / .material-symbols-outlined classes
   rather than the app's .rzi ligature markup. fluent.css only
   wires up the "Material Symbols" font-face for .rzi, so any
   icon using those other classes had no font backing and fell
   back to a blank/"broken" glyph. Bind both classes to the same
   ligature fonts already shipped in wwwroot/assets/fonts, with
   Material Symbols preferred and the legacy Material Icons font
   (previously unused) as a fallback for older glyph names.
   ============================================================ */
@font-face {
    font-family: "Material Icons";
    src: url("../fonts/MaterialIcons-Regular.woff") format("woff");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

.material-icons,
.material-symbols-outlined {
    font-family: "Material Symbols", "Material Icons";
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: "liga";
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
}

/* ============================================================
   Pager bullet fix — fluent.css's .rz-pager-pages rule (the
   <ul> wrapping first/prev/page-number/next/last) never resets
   "list-style" or "padding", unlike Radzen's own current theme
   which explicitly sets "list-style:none; padding:0" on this
   same selector. Without it, each <li class="rz-pager-item">
   keeps the browser's default bullet marker even though the
   list is flexed - the stray "." next to every page number.
   ============================================================ */
.rz-pager-pages {
    list-style: none;
    padding: 0;
}