/* CraftX — Syncfusion Fluent2 overrides. Loaded after fluent2.css.
   All colors use design tokens from app.css — no raw hex.

   Strategy: rebrand Fluent2's :root primary palette to CraftX copper. Fluent2
   defines its theme tokens as CSS custom properties at :root (verified in
   _content/Syncfusion.Blazor.Themes/fluent2.css 33.1.44). Components such as
   SfTab indicator, SfButton e-primary, SfButtonGroup checked/active, SfGrid
   pager, SfCalendar selected day, SfSwitch on, SfChip active, SfScheduler
   appointments etc. all reference these tokens via var(--color-sf-primary…).
   Overriding the tokens at :root cascades the rebrand to every component
   automatically — no per-selector !important hacks required.

   Selector-level overrides below remain only for the residual cases where
   Fluent2 paints something with a non-primary token (e.g. blue hover tints
   driven by --color-sf-content-bg-color-hover) or where we want a different
   visual than Fluent2's default (e.g. softer hover background on tabs).

   Theming reference:
   https://blazor.syncfusion.com/documentation/appearance/themes
   https://blazor.syncfusion.com/documentation/appearance/theme-studio
*/

:root {
    /* Primary palette — drives indicator bars, primary buttons, selected pager
       cells, calendar selected day, switch on state, scheduler appointments,
       chip active state, button-group checked state, etc. */
    --color-sf-primary: var(--cx-primary);
    --color-sf-primary-text-color: #fff;
    --color-sf-primary-text: #fff;
    --color-sf-primary-light: var(--cx-primary-soft);
    --color-sf-primary-lighter: var(--cx-primary-soft);
    --color-sf-primary-dark: var(--cx-primary-hover);
    --color-sf-primary-darker: var(--cx-primary-hover);

    /* Stateful primary tokens — hover/pressed/focus/selected on primary
       buttons and primary-flavoured controls. */
    --color-sf-primary-bg-color: var(--cx-primary);
    --color-sf-primary-border-color: var(--cx-primary);
    --color-sf-primary-outline: var(--cx-primary);
    --color-sf-primary-bg-color-hover: var(--cx-primary-hover);
    --color-sf-primary-border-color-hover: var(--cx-primary-hover);
    --color-sf-primary-bg-color-pressed: var(--cx-primary-hover);
    --color-sf-primary-border-color-pressed: var(--cx-primary-hover);
    --color-sf-primary-bg-color-focus: var(--cx-primary-hover);
    --color-sf-primary-border-color-focus: var(--cx-primary-hover);
    --color-sf-primary-bg-color-selected: var(--cx-primary-hover);
    --color-sf-primary-border-color-selected: var(--cx-primary-hover);
    --color-sf-primary-text-hover: #fff;
    --color-sf-primary-text-pressed: #fff;
    --color-sf-primary-text-focus: #fff;
    --color-sf-primary-text-selected: #fff;

    /* Cell-selection tints (grid row selection, dropdown popup highlight) */
    --color-sf-primary-cell-selection: var(--cx-primary-soft);
    --color-sf-primary-label-color: var(--cx-primary);

    /* Neutral Fluent2 surfaces — default Fluent2 keeps many controls on
       #fafafa / #fff. Map those shared surface tokens to CraftX's warmer
       paper/card palette so tabs, inputs, popups, pagers and non-primary
       buttons stop reading as disconnected white islands. */
    --color-sf-content-bg-color: var(--paper);
    --color-sf-content-bg-color-alt1: var(--cx-card-bg);
    --color-sf-content-bg-color-alt2: var(--paper-2);
    --color-sf-content-bg-color-alt3: var(--sand-2);
    --color-sf-content-bg-color-alt4: var(--light-gray);
    --color-sf-content-bg-color-alt5: var(--sand-2);
    --color-sf-content-bg-color-alt6: var(--sand-2);
    --color-sf-content-bg-color-hover: var(--light-gray);
    --color-sf-content-bg-color-pressed: var(--sand-2);
    --color-sf-content-bg-color-focus: var(--light-gray);
    --color-sf-content-bg-color-selected: var(--cx-primary-soft);
    --color-sf-content-bg-color-dragged: var(--cx-primary-soft);
    --color-sf-content-bg-color-disabled: var(--paper-2);

    --color-sf-flyout-bg-color: var(--cx-card-bg);
    --color-sf-flyout-bg-color-hover: var(--paper-2);
    --color-sf-flyout-bg-color-pressed: var(--light-gray);
    --color-sf-flyout-bg-color-selected: var(--cx-primary-soft);
    --color-sf-flyout-bg-color-focus: var(--paper-2);

    --color-sf-table-bg-color-hover: var(--paper-2);
    --color-sf-table-bg-color-pressed: var(--light-gray);
    --color-sf-table-bg-color-selected: var(--cx-primary-soft);

    --color-sf-content-text-color: var(--cx-text-primary);
    --color-sf-content-text-color-alt1: var(--cx-text-secondary);
    --color-sf-content-text-color-alt2: var(--cx-text-secondary);
    --color-sf-content-text-color-alt3: var(--cx-text-muted);
    --color-sf-content-text-color-hover: var(--cx-text-primary);
    --color-sf-content-text-color-pressed: var(--cx-text-primary);
    --color-sf-content-text-color-focus: var(--cx-text-primary);
    --color-sf-content-text-color-selected: var(--cx-text-primary);
    --color-sf-content-text-color-dragged: var(--cx-text-primary);
    --color-sf-content-text-color-disabled: var(--cx-text-muted);
    --color-sf-placeholder-text-color: var(--cx-text-muted);
    --color-sf-flyout-text-color: var(--cx-text-primary);
    --color-sf-flyout-text-color-hover: var(--cx-text-primary);
    --color-sf-flyout-text-color-pressed: var(--cx-text-primary);
    --color-sf-flyout-text-color-selected: var(--cx-text-primary);
    --color-sf-flyout-text-color-focus: var(--cx-text-primary);
    --color-sf-flyout-text-color-disabled: var(--cx-text-muted);
    --color-sf-table-text-color-hover: var(--cx-text-primary);
    --color-sf-table-text-color-pressed: var(--cx-text-primary);
    --color-sf-table-text-color-selected: var(--cx-text-primary);
    --color-sf-icon-color: var(--cx-text-secondary);
    --color-sf-icon-color-hover: var(--cx-text-primary);
    --color-sf-icon-color-hover-alt: var(--cx-text-primary);
    --color-sf-icon-color-pressed: var(--cx-text-primary);
    --color-sf-icon-color-disabled: var(--cx-text-muted);

    --color-sf-border-light: var(--cx-hairline-soft);
    --color-sf-border: var(--cx-border);
    --color-sf-border-dark: var(--cx-hairline);
    --color-sf-border-hover: var(--cx-text-secondary);
    --color-sf-border-focus: var(--cx-primary);
    --color-sf-border-selected: var(--cx-primary);
    --color-sf-border-disabled: var(--cx-hairline-soft);
}

/* =============== Buttons =============== */

/* Primary button colours come from the :root --color-sf-primary-* rebrand
   above. Only the brand-specific border-radius and focus ring need explicit
   selector-level overrides, since Fluent2 doesn't expose CSS variables for
   border-radius or focus-ring. */
.e-btn {
    border-radius: var(--cx-border-radius) !important;
}

.e-btn.e-primary:focus-visible,
.e-btn.e-primary.e-input-focus {
    box-shadow: var(--cx-focus-ring) !important;
}

/* =============== Input / Forms =============== */

.e-input-group,
.e-input-group.e-control-wrapper {
    border-radius: var(--cx-border-radius) !important;
}

/* Input focus ring — copper, not blue */
.e-input-group:not(.e-success):not(.e-warning):not(.e-error).e-input-focus,
.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error).e-input-focus {
    border-color: var(--cx-primary) !important;
    box-shadow: var(--cx-focus-ring) !important;
}

/* Plain focus class emitted by some Syncfusion widgets */
.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--cx-primary) !important;
    box-shadow: var(--cx-focus-ring) !important;
}

/* =============== Dropdown List =============== */

.e-dropdownlist,
.e-ddl {
    border-radius: var(--cx-border-radius) !important;
}

.e-ddl.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-ddl.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--cx-primary) !important;
    box-shadow: var(--cx-focus-ring) !important;
}

/* Dropdown popup list items */
.e-dropdownlist.e-popup .e-list-item.e-hover,
.e-dropdownlist.e-popup .e-list-item.e-active.e-hover,
.e-ddl.e-popup .e-list-item.e-hover,
.e-ddl.e-popup .e-list-item.e-active.e-hover {
    background-color: var(--cx-primary-soft) !important;
    color: var(--cx-primary) !important;
}

.e-dropdownlist.e-popup .e-list-item.e-active,
.e-ddl.e-popup .e-list-item.e-active {
    background-color: var(--cx-primary-soft) !important;
    color: var(--cx-primary) !important;
}

/* =============== AutoComplete / ComboBox =============== */

.e-autocomplete.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-combobox.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--cx-primary) !important;
    box-shadow: var(--cx-focus-ring) !important;
}

/* =============== Grid =============== */

.e-grid {
    border-radius: var(--cx-border-radius) !important;
}

/* Header row */
.e-grid .e-gridheader,
.e-grid .e-headercontent {
    background-color: var(--light-gray) !important;
    border-bottom: 1px solid var(--cx-hairline) !important;
}

.e-grid .e-headercell,
.e-grid .e-headercelldiv {
    background-color: var(--light-gray) !important;
    color: var(--cx-text-secondary) !important;
    border-color: var(--cx-hairline) !important;
}

/* Column header sort/filter icon — warm */
.e-grid .e-headercell .e-sortfilterdiv,
.e-grid .e-headercell .e-ascending,
.e-grid .e-headercell .e-descending {
    color: var(--cx-primary) !important;
}

/* Row hover */
.e-grid .e-row:hover,
.e-grid .e-gridhover tr.e-row:hover {
    background-color: rgba(184, 96, 31, 0.04) !important;
}

.e-grid .e-row:hover .e-rowcell,
.e-grid .e-gridhover tr.e-row:hover .e-rowcell {
    background-color: rgba(184, 96, 31, 0.04) !important;
    border-color: var(--cx-hairline) !important;
}

/* Selected row */
.e-grid .e-row.e-selectionbackground .e-rowcell,
.e-grid .e-row.e-selectionbackground {
    background-color: var(--cx-primary-soft) !important;
}

/* Pager active page — ink instead of copper so paginated grids don't turn
   the page footer into yet another copper hotspot competing with the page
   header CTA and topbar. */
.e-grid .e-pagercontainer .e-active {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #fff !important;
}

/* =============== Dialog =============== */

.e-dialog {
    border-radius: var(--cx-card-radius) !important;
}

.e-dialog .e-dlg-header-content,
.e-dialog .e-dlg-header-content .e-dlg-header {
    background-color: var(--cx-card-bg) !important;
    color: var(--cx-text-primary) !important;
    border-bottom: 1px solid var(--cx-hairline) !important;
}

.e-dialog .e-dlg-header {
    color: var(--cx-text-primary) !important;
}

/* Dialog close button */
.e-dialog .e-dlg-closeicon-btn:hover .e-icon,
.e-dialog .e-dlg-closeicon-btn:hover .e-dlg-closeicon {
    color: var(--cx-primary) !important;
}

/* Dialog footer */
.e-dialog .e-footer-content {
    border-top: 1px solid var(--cx-hairline) !important;
    background-color: var(--cx-card-bg) !important;
}

/* =============== Tab =============== */
/* Indicator bar — Fluent2 already paints this with var(--color-sf-primary),
   which is now copper via the :root override above. Nothing to do here.

   Active tab text colour — Fluent2 default is var(--color-sf-content-text-color)
   (i.e. neutral ink, not primary). CraftX brand opts for copper-on-active to
   reinforce the indicator pairing. The selector below matches Fluent2's chain
   exactly so no !important is needed. */
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-icon {
    color: var(--cx-primary);
}

/* Tab hover — Fluent2 default uses content-bg-color-hover (light grey) which
   is fine, but we tint it copper-soft for a warmer feel that pairs with the
   indicator. */
.e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover {
    color: var(--cx-primary-hover);
    background-color: var(--cx-primary-soft);
}

/* =============== Checkbox =============== */

.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
    background-color: var(--cx-primary) !important;
    border-color: var(--cx-primary) !important;
}

.e-checkbox-wrapper .e-frame:hover,
.e-css.e-checkbox-wrapper .e-frame:hover {
    border-color: var(--cx-primary) !important;
}

/* Checkbox focus ring */
.e-checkbox-wrapper:focus .e-frame {
    box-shadow: var(--cx-focus-ring) !important;
}

/* =============== Radio Button =============== */

.e-radio:checked + label::after,
.e-radio:checked + .e-label::after {
    background-color: var(--cx-primary) !important;
}

.e-radio:checked + label::before,
.e-radio:checked + .e-label::before {
    border-color: var(--cx-primary) !important;
}

/* =============== Toast =============== */

.e-toast-container .e-toast-success {
    background-color: var(--success-50) !important;
    border-left: 4px solid var(--cx-success) !important;
}

.e-toast-container .e-toast-success .e-toast-icon,
.e-toast-container .e-toast-success .e-toast-title,
.e-toast-container .e-toast-success .e-toast-content {
    color: var(--cx-success) !important;
}

.e-toast-container .e-toast-info {
    background-color: var(--info-50) !important;
    border-left: 4px solid var(--cx-info) !important;
}

.e-toast-container .e-toast-info .e-toast-icon,
.e-toast-container .e-toast-info .e-toast-title,
.e-toast-container .e-toast-info .e-toast-content {
    color: var(--cx-info) !important;
}

.e-toast-container .e-toast-warning {
    background-color: var(--warning-50) !important;
    border-left: 4px solid var(--cx-warning) !important;
}

.e-toast-container .e-toast-warning .e-toast-icon,
.e-toast-container .e-toast-warning .e-toast-title,
.e-toast-container .e-toast-warning .e-toast-content {
    color: var(--cx-warning) !important;
}

.e-toast-container .e-toast-danger {
    background-color: var(--danger-50) !important;
    border-left: 4px solid var(--cx-danger) !important;
}

.e-toast-container .e-toast-danger .e-toast-icon,
.e-toast-container .e-toast-danger .e-toast-title,
.e-toast-container .e-toast-danger .e-toast-content {
    color: var(--cx-danger) !important;
}

/* =============== Spinner =============== */

.e-spinner-pane .e-spinner-inner .e-spin-material {
    stroke: var(--cx-primary) !important;
}

.e-spinner-pane .e-spinner-inner .e-spin-material2 {
    stroke: var(--cx-primary) !important;
}

/* =============== Sidebar (SfSidebar) =============== */

/* Neutralize Fluent2 blue accent on non-contact sidebar chrome */
.e-sidebar.e-left:not(.contact-sidebar),
.e-sidebar.e-right:not(.contact-sidebar) {
    background-color: var(--cx-card-bg) !important;
    border-color: var(--cx-hairline) !important;
}

/* =============== AppBar (SfAppBar — residual uses) =============== */

.e-appbar {
    background-color: var(--cx-card-bg) !important;
    color: var(--cx-text-primary) !important;
    border-bottom: 1px solid var(--cx-hairline) !important;
}

/* =============== DatePicker / TimePicker / DateTimePicker =============== */

.e-datepicker.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-timepicker.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
.e-datetimepicker.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--cx-primary) !important;
    box-shadow: var(--cx-focus-ring) !important;
}

/* Calendar today / selected day */
.e-calendar .e-today span.e-day,
.e-calendar .e-today:hover span.e-day {
    border-color: var(--cx-primary) !important;
    color: var(--cx-primary) !important;
}

.e-calendar .e-selected span.e-day,
.e-calendar .e-selected:hover span.e-day {
    background-color: var(--cx-primary) !important;
    border-color: var(--cx-primary) !important;
    color: #fff !important;
}

.e-calendar .e-start-date span.e-day,
.e-calendar .e-end-date span.e-day {
    background-color: var(--cx-primary) !important;
    color: #fff !important;
}

.e-calendar .e-in-range span.e-day {
    background-color: var(--cx-primary-soft) !important;
}

/* =============== Numeric TextBox =============== */

.e-numerictextbox.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
    border-color: var(--cx-primary) !important;
    box-shadow: var(--cx-focus-ring) !important;
}

/* =============== Switch / Toggle =============== */

.e-switch-wrapper .e-switch-on,
.e-switch-wrapper.e-switch-active .e-switch-inner {
    background-color: var(--cx-primary) !important;
    border-color: var(--cx-primary) !important;
}

/* =============== Chip / Badge =============== */

.e-chip.e-active,
.e-chip-list .e-chip.e-active {
    background-color: var(--cx-primary) !important;
    border-color: var(--cx-primary) !important;
    color: #fff !important;
}

/* =============== Scheduler =============== */
/* Reference: Syncfusion Blazor Scheduler — appointments.md.
   Per-appointment styling is applied via the CssClass field on the
   data model (CraftX → SchedulerAppointmentDto.CssClass) plus the
   EventRendered hook (args.CssClasses). Selectors below mirror the
   official chains used in Sf docs:
     .e-schedule .e-vertical-view .e-day-wrapper .e-appointment
     .e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment
     .e-schedule .e-month-view .e-appointment
*/

/* Today cell highlight */
.e-schedule .e-current-day,
.e-schedule .e-current-date .e-date-header {
    color: var(--cx-primary) !important;
    font-weight: 600;
}

/* Currently-selected cell tint — warm copper wash, not Fluent2 grey */
.e-schedule .e-vertical-view .e-work-cells.e-selected-cell,
.e-schedule .e-month-view .e-work-cells.e-selected-cell {
    background-color: var(--cx-primary-soft) !important;
}

/* Schedule chrome — header date, navigation, view toolbar */
.e-schedule .e-schedule-toolbar {
    background-color: var(--cx-card-bg) !important;
    border-bottom: 1px solid var(--cx-hairline) !important;
}

.e-schedule .e-table-wrap,
.e-schedule .e-content-wrap {
    background-color: var(--cx-card-bg) !important;
}

/* Hairlines on grid */
.e-schedule .e-vertical-view .e-time-cells-wrap table td,
.e-schedule .e-vertical-view .e-content-wrap table td,
.e-schedule .e-month-view .e-content-wrap table td {
    border-color: var(--cx-hairline-soft) !important;
}

/* Appointment default color (used when no CssClass tone is supplied) */
.e-schedule .e-appointment,
.e-schedule .e-appointment.e-lib {
    background-color: var(--cx-primary) !important;
    border-color: var(--cx-primary-hover) !important;
    border-radius: 6px !important;
}

/* Active / focused appointment */
.e-schedule .e-appointment.e-appointment-active,
.e-schedule .e-appointment:focus {
    box-shadow: var(--cx-focus-ring) !important;
}

/* Per-tone CssClass variants — applied via SchedulerAppointmentDto.CssClass
   or args.CssClasses in the EventRendered hook. Each variant paints the
   appointment background and a slightly darker top/left status bar so the
   carpenter palette comes through without raw hex per-event. */
.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.cx-event-copper,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.cx-event-copper,
.e-schedule .e-month-view .e-appointment.cx-event-copper {
    background-color: var(--copper) !important;
    border-color: var(--copper-dark) !important;
}

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.cx-event-blue,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.cx-event-blue,
.e-schedule .e-month-view .e-appointment.cx-event-blue {
    background-color: var(--cx-info) !important;
    border-color: var(--cx-info) !important;
}

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.cx-event-patina,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.cx-event-patina,
.e-schedule .e-month-view .e-appointment.cx-event-patina {
    background-color: var(--cx-success) !important;
    border-color: var(--cx-success) !important;
}

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.cx-event-violet,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.cx-event-violet,
.e-schedule .e-month-view .e-appointment.cx-event-violet {
    background-color: var(--ai) !important;
    border-color: var(--ai) !important;
}

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.cx-event-warning,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.cx-event-warning,
.e-schedule .e-month-view .e-appointment.cx-event-warning {
    background-color: var(--cx-warning) !important;
    border-color: var(--cx-warning) !important;
}

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.cx-event-danger,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.cx-event-danger,
.e-schedule .e-month-view .e-appointment.cx-event-danger {
    background-color: var(--cx-danger) !important;
    border-color: var(--cx-danger) !important;
}

.e-schedule .e-vertical-view .e-day-wrapper .e-appointment.cx-event-stone,
.e-schedule .e-vertical-view .e-all-day-appointment-wrapper .e-appointment.cx-event-stone,
.e-schedule .e-month-view .e-appointment.cx-event-stone {
    background-color: var(--stone) !important;
    border-color: var(--walnut) !important;
}

/* Past appointments — dimmed via class produced in EventRendered */
.e-schedule .e-appointment.cx-event-past {
    opacity: 0.6;
}

/* Scheduler QuickInfo popup chrome */
.e-schedule .e-quick-popup-wrapper,
.scheduler-quickinfo .e-quick-popup-wrapper {
    border: 1px solid var(--cx-hairline) !important;
    border-radius: var(--cx-card-radius) !important;
    box-shadow: var(--shadow-lg) !important;
    background-color: var(--cx-card-bg) !important;
}

/* =============== Tooltip =============== */

.e-tooltip-wrap.e-popup {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
    border-radius: var(--cx-border-radius) !important;
}

.e-tooltip-wrap .e-tip-content {
    color: var(--ink-on-dark) !important;
}

/* =============== Progress Bar =============== */

.e-progressbar .e-progressbar-value {
    background-color: var(--cx-primary) !important;
}

/* =============== Uploader =============== */

.e-upload .e-file-select-wrap .e-btn {
    background-color: var(--cx-primary) !important;
    border-color: var(--cx-primary) !important;
    color: #fff !important;
    border-radius: var(--cx-border-radius) !important;
}

.e-upload .e-file-select-wrap .e-btn:hover {
    background-color: var(--cx-primary-hover) !important;
    border-color: var(--cx-primary-hover) !important;
}

/* =============== Button tone variants =============== */
/* Reference: Syncfusion Blazor Button styling docs.
   Sf doesn't ship semantic tone classes for SfButton — tones are layered on
   via CssClass. We expose .e-btn.cx-tone-{success|warning|danger|info} so
   Scheduler/AppointmentEditor can use them on SfButton without resorting to
   Bootstrap btn-* classes that don't fit the warm palette. */
.e-btn.cx-tone-success,
.e-btn.cx-tone-success:not(:disabled):not(.disabled) {
    background-color: var(--cx-success) !important;
    border-color: var(--cx-success) !important;
    color: #fff !important;
}

.e-btn.cx-tone-success:hover,
.e-btn.cx-tone-success:focus-visible {
    background-color: var(--cx-success) !important;
    border-color: var(--cx-success) !important;
    filter: brightness(0.92);
}

.e-btn.cx-tone-warning {
    background-color: var(--cx-warning) !important;
    border-color: var(--cx-warning) !important;
    color: #fff !important;
}

.e-btn.cx-tone-danger {
    background-color: var(--cx-danger) !important;
    border-color: var(--cx-danger) !important;
    color: #fff !important;
}

.e-btn.cx-tone-info {
    background-color: var(--cx-info) !important;
    border-color: var(--cx-info) !important;
    color: #fff !important;
}

/* =============== Dialog footer flat buttons =============== */
/* Reference: Sf docs — Customize Blazor Dialog Footer Button CSS.
   Default Fluent2 e-flat in dialogs is grey-on-white. CraftX paints the
   primary action copper, the dismiss action neutral ink. */
.e-dialog .e-footer-content .e-btn.e-flat:not(.e-primary) {
    color: var(--cx-text-secondary) !important;
}

.e-dialog .e-footer-content .e-btn.e-flat:not(.e-primary):hover {
    background-color: var(--cx-hairline-soft) !important;
    color: var(--cx-text-primary) !important;
}

.e-dialog .e-footer-content .e-btn.e-flat.e-primary {
    color: var(--cx-primary) !important;
}

.e-dialog .e-footer-content .e-btn.e-flat.e-primary:hover {
    background-color: var(--cx-primary-soft) !important;
    color: var(--cx-primary-hover) !important;
}

/* Scheduler recurrence / quick-alert dialog ("Diese Veranstaltung" / "Ganze Serie").
   Syncfusion renders the confirm action here as a FILLED copper primary, so the generic
   flat-primary rule above (copper text on a transparent fill) leaves it copper-on-copper
   and the label vanishes. Force a readable white label on the copper fill. The dismiss /
   "Ganze Serie" button stays neutral via the :not(.e-primary) rule above. */
.e-quick-dialog .e-footer-content .e-btn.e-primary,
.e-quick-dialog .e-footer-content .e-btn.e-flat.e-primary {
    background-color: var(--cx-primary) !important;
    border-color: var(--cx-primary) !important;
    color: #fff !important;
}

.e-quick-dialog .e-footer-content .e-btn.e-primary:hover,
.e-quick-dialog .e-footer-content .e-btn.e-primary:focus-visible,
.e-quick-dialog .e-footer-content .e-btn.e-flat.e-primary:hover,
.e-quick-dialog .e-footer-content .e-btn.e-flat.e-primary:focus-visible {
    background-color: var(--cx-primary-hover) !important;
    border-color: var(--cx-primary-hover) !important;
    color: #fff !important;
}

/* Quote cancellation is destructive; keep the label readable even when the
   Syncfusion footer applies its global flat primary dialog styling. */
.quote-cancel-dialog .e-footer-content .e-btn.cx-tone-danger,
.quote-cancel-dialog .e-footer-content .e-btn.e-flat.e-primary.cx-tone-danger {
    background-color: var(--cx-danger) !important;
    border-color: var(--cx-danger) !important;
    color: #fff !important;
    min-width: 128px;
}

.quote-cancel-dialog .e-footer-content .e-btn.cx-tone-danger:hover,
.quote-cancel-dialog .e-footer-content .e-btn.cx-tone-danger:focus-visible,
.quote-cancel-dialog .e-footer-content .e-btn.e-flat.e-primary.cx-tone-danger:hover,
.quote-cancel-dialog .e-footer-content .e-btn.e-flat.e-primary.cx-tone-danger:focus-visible {
    background-color: #7d2f29 !important;
    border-color: #7d2f29 !important;
    color: #fff !important;
}

/* ── Dialog-Stapelung (D4, Demo-Breaker 08/2026) ─────────────────────────────
   Syncfusion berechnet den Dialog-z-Index dynamisch aus max(body-Kinder,
   Vorfahren, Floor 999)+1 und sieht dabei KEINE Overlays, die innerhalb von
   .erp-shell gerendert werden (position:static -> kein Stacking Context).
   Ergebnis: Standard-SfDialogs (1000) landeten hinter eigenen Overlays wie
   .cx-users .drawer (1150), .erp-topbar (1100), .cxt-overlay (1200) usw. —
   "Dialog öffnet im Hintergrund". Deshalb hier ein deterministischer Sockel
   über allen App-Overlays (die liegen <= 3000). Gleicher Wert + DOM-Reihenfolge
   halten Dialog-über-Dialog weiterhin korrekt gestapelt. Bewusst darüber:
   Toasts, MaintenanceBanner, Dropdown-Popups (müssen auch in Dialogen aufgehen)
   und portalisiertes PDF-Preview-Overlay (10000). */
.e-dlg-container { z-index: 5000 !important; }
.e-dlg-container .e-dlg-overlay,
.e-dlg-overlay { z-index: 4999 !important; }
/* Der Dialog selbst MUSS über seinem Overlay liegen: Syncfusion setzt den
   z-Index des .e-dialog inline (berechnet, teils < 4999) — das
   !important-Overlay oben würde ihn sonst überdecken (Blur über dem
   Inhalt, nichts klickbar; Kassenbeleg-Prüfen + InvoiceReview, 31.08.).
   Innerhalb des Container-Stacking-Kontexts ist 5000 > 4999 immer korrekt,
   egal was Syncfusion inline berechnet. */
.e-dlg-container .e-dialog { z-index: 5000 !important; }