/* =========================================================
   DevExpress palette bridge

   Loaded AFTER the blazing-berry theme and after platform-design.css.

   The decision this file encodes: DevExpress components keep their own
   structure — grid rows, dialog chrome, toast layout — and are retinted to the
   template palette. It changes colour and typeface, not geometry. A rule here
   reaching for border-radius or box-shadow on a DevExpress internal class is
   the signal that decision is being quietly reversed.

   HOW THIS WORKS, and why the first attempt did not
   -------------------------------------------------
   The first version of this file set Bootstrap variables (--bs-body-bg and
   friends) and plain properties like `.dxbl-toast { background-color: … }`.
   Neither did anything, and the toast came through white.

   blazing-berry does not read --bs-* for these surfaces. It defines its own
   custom properties — --dxbl-toast-background-color, --dxbl-popup-bg,
   --dxbl-grid-header-bg — and sets them on the component's own element through
   selectors like:

       .dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-auto.dxbl-toast-render-success

   Two consequences, both of which the first attempt fell foul of:

   1. Overriding --bs-* is pointless here. The right lever is the --dxbl-* token.
   2. Declaring the token on :root does not work either. A custom property
      resolves from the most specific rule matching THAT element, and the theme
      sets these on the element itself. So the override has to match the same
      element with at least the same specificity — hence the long selectors
      below. They look heavy-handed; they are the minimum that wins.
   ========================================================= */

/* ------------------------------------------------------------------ toasts */

/* Every render style, including the theme-auto and dark variants, so a toast
   raised as Success or Danger is tinted rather than reverting to near-black. */
.dxbl-toast-portal .dxbl-toast,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-auto,
.dxbl-toast-portal .dxbl-toast[class*="dxbl-toast-render-"],
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-auto[class*="dxbl-toast-render-"] {
  --dxbl-toast-background-color: var(--cream-50);
  --dxbl-toast-front-color: var(--ink-900);
  --dxbl-toast-header-font-color: var(--ink-900);
  --dxbl-toast-text-font-color: var(--ink-700);
  --dxbl-toast-close-button-color: var(--ink-700);
  --dxbl-toast-border-radius: 0;
  --dxbl-toast-accent-line-width: 0.35rem;

  /* The hard offset shadow and ink border of the paper surfaces, so a toast
     reads as part of the same world as the cards behind it. */
  border: 2.5px solid var(--ink-900);
  box-shadow: 5px 5px 0 var(--ink-900);
  font-family: var(--font-data);
}

.dxbl-toast-portal .dxbl-toast .dxbl-toast-header {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
}

/* The accent line is the one place colour alone carries meaning, so each state
   keeps a distinct, legible hue rather than all becoming gold. */
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-auto.dxbl-toast-render-success,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-render-success {
  --dxbl-toast-accent-line-color: var(--blue-dark);
  --dxbl-toast-icon-color: var(--blue-dark);
}

.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-auto.dxbl-toast-render-danger,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-render-danger {
  --dxbl-toast-accent-line-color: var(--hot-red-ink);
  --dxbl-toast-icon-color: var(--hot-red-ink);
}

.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-auto.dxbl-toast-render-primary,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-render-primary,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-theme-auto.dxbl-toast-render-info,
.dxbl-toast-portal .dxbl-toast.dxbl-toast-render-info {
  --dxbl-toast-accent-line-color: var(--gold);
  --dxbl-toast-icon-color: var(--orange);
}

/* --------------------------------------------------- popups and message box */

.dxbl-popup-root .dxbl-popup,
.dxbl-popup,
.dxbl-window {
  --dxbl-popup-bg: var(--cream-50);
  --dxbl-popup-color: var(--ink-900);
  --dxbl-popup-border-color: var(--ink-900);
  --dxbl-popup-header-bg: var(--cream-200);
  --dxbl-popup-header-color: var(--ink-900);
  --dxbl-popup-footer-bg: var(--cream-100);
  --dxbl-popup-footer-color: var(--ink-900);
  --dxbl-popup-font-family: var(--font-data);

  /* The confirmation dialog derives its surface from this one. */
  --dxbl-message-box-background-color: var(--cream-50);
  --dxbl-message-box-body-text-font-color: var(--ink-900);
}

.dxbl-popup-root .dxbl-popup {
  border: 2.5px solid var(--ink-900);
  box-shadow: 6px 6px 0 var(--ink-900);
}

.dxbl-popup-root .dxbl-popup .dxbl-popup-header {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
}

/* ------------------------------------------------------------------- grids */

.dxbl-grid {
  --dxbl-grid-bg: var(--cream-50);
  --dxbl-grid-color: var(--ink-900);
  --dxbl-grid-border-color: var(--ink-700);
  --dxbl-grid-header-bg: var(--cream-200);
  --dxbl-grid-header-color: var(--ink-900);
}

/* Data, not prose: grids and editors carry identifiers, codes and amounts, and
   stay in the legible sans even though the chrome around them is handwritten.
   This is the whole reason --font-data exists. */
.dxbl-grid,
.dxbl-grid input,
.dxbl-text-edit,
.dxbl-combobox,
.dxbl-combo-box,
.dxbl-date-edit,
.dxbl-spin-edit,
.dxbl-memo,
.dxbl-popup-content {
  font-family: var(--font-data);
}

.dxbl-grid .dxbl-grid-header-content {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

/* ----------------------------------------------------------------- buttons */

.dxbl-btn-primary {
  background-color: var(--gold);
  border-color: var(--ink-900);
  color: var(--ink-900);
}

.dxbl-btn-primary:hover {
  background-color: var(--gold-soft);
  border-color: var(--ink-900);
  color: var(--ink-900);
}

.dxbl-btn-danger {
  background-color: var(--hot-red-ink);
  border-color: var(--ink-900);
  color: var(--cream-50);
}

/* ------------------------------------------------------------------- focus */

/* Focus inside DevExpress must be as visible as focus anywhere else. The theme
   uses a soft glow that all but disappears against cream. */
.dxbl-grid :focus-visible,
.dxbl-popup :focus-visible,
.dxbl-toast :focus-visible,
.dxbl-text-edit :focus-visible {
  outline: 3px solid var(--hot-red);
  outline-offset: 2px;
}