/* DevExpress Blazor 26.1 (Fluent, SizeMode.Small) in the house look of ClienteBlazor: grid headers on the
   #bbc4e0 band, uppercase tabs underlined in the house blue, popups with the blue header and footer, the yellow
   commit action and the success toast. Components keep their own behaviour; only appearance is set here, mostly
   through the components' public CSS variables. Popups render in a portal, so their rules are global. */

/* ---- Buttons ---- */
.dxbl-btn.commit-button {
  --dxbl-btn-bg: var(--house-commit);
  --dxbl-btn-color: var(--house-commit-text);
  --dxbl-btn-border-color: var(--house-commit);
  --dxbl-btn-hover-bg: var(--house-commit-hover);
  --dxbl-btn-hover-color: var(--house-commit-text);
  --dxbl-btn-hover-border-color: var(--house-commit-hover);
  --dxbl-btn-active-bg: #ffcd47;
  --dxbl-btn-active-border-color: #ffcd47;
  --dxbl-btn-active-color: var(--house-commit-text);
  background: var(--house-commit) !important;
  border-color: var(--house-commit) !important;
  color: var(--house-commit-text) !important;
}

.dxbl-btn.commit-button:hover {
  background: var(--house-commit-hover) !important;
}

.dxbl-btn.commit-button:disabled {
  opacity: .55;
}

/* ---- Grids: ClienteBlazor's header band ---- */
.dxbl-grid {
  --dxbl-grid-header-bg: var(--house-band);
  --dxbl-grid-header-color: var(--house-text);
  --dxbl-grid-header-font-weight: 500;
}

.dxbl-grid .dxbl-grid-header-row th {
  background-color: var(--house-band);
  color: var(--house-text);
}

.dxbl-grid-empty-data-area {
  color: var(--house-muted);
}

/* ---- Tabs ---- */
.house-tabs {
  --dxbl-tabs-tab-active-color: var(--house-tab-active);
  --dxbl-tabs-tab-active-hover-color: var(--house-tab-active);
}

.house-tabs .dxbl-tabs-item {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--house-tab);
}

.house-tabs .dxbl-tabs-item.dxbl-active {
  color: var(--house-tab-active);
}

.house-tabs--compact .dxbl-tabs-item {
  font-size: 11px;
}

/* ---- Ribbon ---- */
.house-ribbon {
  flex: none;
  width: 100%;
  background: var(--house-surface);
}

/* Inside the flex workspace the ribbon's tab strip would render at content width and collapse everything into its
   overflow menu (DevExpress 25.2 behaviour, kept as a guard). */
.house-ribbon .dxbl-tabs {
  width: 100%;
}

.house-ribbon .dxbl-tabs-item {
  font-size: 12px;
  text-transform: uppercase;
}

/* Ribbon buttons a size up from the app's small mode (12 px text, 16 px icons, 3 px padding): easier to read and hit. */
.house-ribbon .dxbl-ribbon-button {
  font-size: 13px;
  line-height: 18px;
  padding: 5px 8px;
}

.house-ribbon .dxbl-ribbon-button .dxbl-image {
  width: 20px;
  height: 20px;
}

/* On/off settings of the Vista tab (CssClass="ribbon-switch" on their DxRibbonToggleItem lands on the button): a switch in place of the icon
   and of the pressed box while the item shows its text. When the ribbon's adaptivity reduces an item to its icon it keeps
   the icon and the pressed look: a bare switch would not say what it turns on. */
.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch {
  position: relative;
  padding-left: 44px;
}

.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch .dxbl-image {
  display: none;
}

.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch[aria-pressed="true"] {
  background-color: transparent;
  border-color: transparent;
}

.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 28px;
  height: 16px;
  margin-top: -8px;
  border-radius: 8px;
  background: var(--house-muted);
  transition: background-color .15s;
}

.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch::after {
  content: "";
  position: absolute;
  left: 10px;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
  transition: transform .15s;
}

.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch[aria-pressed="true"]::before {
  background: var(--house-accent);
}

.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch[aria-pressed="true"]::after {
  transform: translateX(12px);
}

.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch:disabled::before,
.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch:disabled::after,
.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch.dxbl-disabled::before,
.house-ribbon :not(.dxbl-adaptive-item-state-no-text) > .dxbl-ribbon-button.ribbon-switch.dxbl-disabled::after {
  opacity: .45;
}

.house-ribbon .dxbl-ribbon-application-tab,
.house-ribbon .dxbl-ribbon-application-tab-button {
  background: var(--house-accent);
  color: #fff;
}

.house-ribbon .dxbl-ribbon-application-tab:hover,
.house-ribbon .dxbl-ribbon-application-tab-button:hover {
  background: var(--house-accent-strong);
  color: #fff;
}

/* ---- Popups: blue header and footer, rounded corners (house popup) ---- */
.house-popup {
  --dxbl-popup-border-radius: 12px;
  --dxbl-popup-header-bg: var(--house-blue);
  --dxbl-popup-header-color: var(--house-title-on-blue);
  --dxbl-popup-header-font-size: 18px;
  --dxbl-popup-header-font-weight: 300;
  --dxbl-popup-header-btn-color: #fff;
  --dxbl-popup-header-btn-hover-color: #fff;
  --dxbl-popup-header-btn-hover-bg: rgba(255, 255, 255, .14);
  --dxbl-popup-footer-bg: var(--house-blue);
  --dxbl-popup-footer-color: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.house-popup .dxbl-modal-header,
.house-popup .dxbl-popup-header {
  background: var(--house-blue) !important;
  color: var(--house-title-on-blue) !important;
}

.house-popup .dxbl-modal-title {
  font-size: 18px;
  font-weight: 300;
}

/* A body taller than the popup's MaxHeight scrolls inside it, so the header and the footer buttons stay
   visible (the flex item would otherwise keep its content height and the rounded frame would clip the footer).
   The content box is a flex item of the dialog's ROW flex box, whose height is only capped (max-height, no height):
   stretched to its content it outgrew the cap and the body never scrolled (BMC canvas, QA 2026-10-12) — it takes the
   dialog's cap itself. A resized popup has a real height and no cap, so this changes nothing there. */
.house-popup > .dxbl-modal-content {
  max-height: inherit;
  min-height: 0;
}

.house-popup .dxbl-modal-body {
  min-height: 0;
  overflow: auto;
}

.house-popup .dxbl-modal-header .dxbl-btn,
.house-popup .dxbl-popup-header-button {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
}

.house-popup .dxbl-modal-footer {
  background: var(--house-blue) !important;
  min-height: 44px;
  gap: 8px;
}

.house-popup .dxbl-modal-footer .dxbl-btn.house-popup__button {
  border: 1px solid #fff !important;
  background: transparent !important;
  color: #fff !important;
}

.house-popup .dxbl-modal-footer .dxbl-btn.house-popup__button:hover {
  background: rgba(255, 255, 255, .12) !important;
}

/* ---- Message boxes (the house confirmations and notices) ---- */
.house-message-box {
  --dxbl-message-box-border-radius: 12px;
  --dxbl-message-box-header-bg: var(--house-blue);
  --dxbl-message-box-header-font-color: var(--house-title-on-blue);
  --dxbl-message-box-header-font-size: 18px;
  --dxbl-message-box-header-font-weight: 300;
  --dxbl-message-box-header-btn-color: #fff;
  --dxbl-message-box-header-btn-hover-color: #fff;
  --dxbl-message-box-header-btn-hover-bg: rgba(255, 255, 255, .14);
  --dxbl-message-box-header-icon-color: var(--house-commit);
  --dxbl-message-box-body-text-font-color: var(--house-body-text);
  border-radius: 12px;
  overflow: hidden;
}

.house-message-box .dxbl-message-box-header {
  background: var(--house-blue) !important;
  color: var(--house-title-on-blue) !important;
}

/* The close button is a secondary text button with its own variables: the header-button tokens above miss it. */
.house-message-box .dxbl-message-box-header-close-button {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
}

.house-message-box .dxbl-message-box-header-close-button:hover {
  background: rgba(255, 255, 255, .14) !important;
}

/* ---- Load panel: a faint shade and the house blue ring ---- */
.app-busy {
  display: contents;
}

.app-busy .dxbl-loading-panel .dxbl-loading-panel-container.dxbl-loading-panel-shading {
  background-color: rgba(0, 0, 0, .05);
}

.app-busy .dxbl-loading-panel .dxbl-loading-panel-indicator-area {
  padding: 13px;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  background: var(--house-surface);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .25);
}

.app-busy .dxbl-loading-panel .dxbl-wait-indicator {
  --dxbl-wait-indicator-color: var(--house-accent);
  --dxbl-wait-indicator-size: 32px;
}

/* ---- Success toast: top centre, pale green with a green tick ---- */
.app-toasts {
  display: contents;
}

.app-toasts .dxbl-toast-portal {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.app-toasts .dxbl-toast-portal .dxbl-toast.dxbl-toast-render-success {
  --dxbl-toast-margin-top: 10px;
  --dxbl-toast-border-radius: 12px;
  --dxbl-toast-box-shadow: 0 4px 16px rgb(36 40 51 / 12%);
  --dxbl-toast-background-color: #d6ede2;
  --dxbl-toast-accent-line-width: 0;
  --dxbl-toast-body-padding: 10px 20px 10px 16px;
  --dxbl-toast-content-gap: 10px;
  --dxbl-toast-text-font-color: #333;
  --dxbl-toast-text-font-size: 13px;
  --dxbl-toast-text-font-weight: 500;
  min-width: 300px;
  max-width: min(568px, calc(100vw - 32px));
  pointer-events: auto;
}

.app-toasts .dxbl-toast-portal .dxbl-toast .dxbl-toast-body::before {
  content: "✓";
  color: #71c19d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.app-toasts .dxbl-toast-portal .dxbl-toast .dxbl-toast-icon-column {
  display: none;
}

/* ---- Dark mode details the Fluent dark theme leaves to the page ---- */
@media screen {
  .yap-dark .dxbl-grid .dxbl-grid-header-row th {
    background-color: var(--house-band);
    color: var(--house-text-strong);
  }
}

/* ---- Rich text and PDF dialogs: the component fills the popup body and scrolls by itself ---- */
.notes-popup .dxbl-modal-body,
.document-popup--fill .dxbl-modal-body {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  overflow: hidden;
}

.notes-popup .notes-editor,
.document-popup--fill .document-view__rich,
.document-popup--fill .document-view__pdf {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Non-modal house windows (the case assistant): the popup's blue header, a body the content fills. */
.house-window {
  --dxbl-window-border-radius: 12px;
  border-radius: 12px;
  overflow: hidden;
}

.house-window .dxbl-window-header {
  background: var(--house-blue) !important;
  color: var(--house-title-on-blue) !important;
}

.house-window .dxbl-window-title {
  font-size: 16px;
  font-weight: 300;
}

.house-window .dxbl-window-header .dxbl-btn,
.house-window .dxbl-window-header-button {
  color: #fff !important;
  background: transparent !important;
  border: 0 !important;
}

.house-window .dxbl-window-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 8px 10px;
}

/* DevExpress aligns the window body's children to the start: the content then took its min-content width (in the
   network window, the strip of eight tabs: 884 px in a 760 px window, editors cut off — QA 2026-10-12). The content
   fills the window instead; wide parts scroll inside it (tabs get their scroll buttons). */
.house-window .dxbl-window-body > * {
  align-self: stretch;
  min-width: 0;
}

/* ---- Drop-down menus: the current choice of a pick list (interface language) ---- */
.house-dropdown__current {
  font-weight: 600;
}