/* ===================================================================
   WCI: Modal dialog paint for Radzen DialogService dialogs, INTEL-388
   -------------------------------------------------------------------
   The ip-b2b "Modal dialog" module (pages/wise.css 890-1122, revision
   served by the prototype host on 2026-09-25) is ONE overlay language for
   every dialog. The app opens most of its dialogs through Radzen's
   DialogService (about 150 OpenAsync / Confirm calls), whose chrome is
   Radzen's own markup: .rz-dialog-mask, .rz-dialog, .rz-dialog-titlebar,
   .rz-dialog-title, .rz-dialog-titlebar-close, .rz-dialog-content, and
   for Confirm .rz-dialog-confirm-message / -buttons.

   This sheet puts the design's values on those selectors, so every
   DialogService dialog paints as a .wise-modal card with no change at the
   call sites. The values are the design's, line for line:
     .rz-dialog-mask            = .wise-modal-scrim   (896-913)
     .rz-dialog                 = .wise-modal, --panel card (925-948, 984-994)
     .rz-dialog-titlebar        = .wise-modal-head    (1002-1011)
     .rz-dialog-title           = .wise-modal-title   (1027-1037)
     .rz-dialog-titlebar-close  = .wise-modal-close   (1054-1083)
     .rz-dialog-content         = .wise-modal-body    (1084-1094)
     .rz-dialog-confirm-buttons = .wise-modal-foot-right, with the
                                  .wise-btn primary / ghost paint
                                  (wise.css 426-702, as WciButton ports it)
   The selectors are Radzen's, so this is not a verbatim port; it is the
   one other global component sheet (wci-tooltip.css is the first) and for
   the same reason: the markup is not rendered by any Wci component, so
   there is no scope attribute for it to belong to.

   It replaces the .rz-dialog block that radzen-overrides.css carried.
   Pages that own their open state use WciModal, which ports the rules
   verbatim under the design's own class names.
   =================================================================== */

/* Stacking: see WciModal.razor.css. Radzen dialogs sit just above the WCI overlays (10100), so a
   DialogService.Confirm raised from inside a WciModal lands on top, and above the app's drawers
   and the Food Browser fly-out (10060). */
body.wci {
  --rz-dialog-mask-zindex: 10200;
  --rz-dialog-zindex: 10201;
}

/* Radzen portals every popup (dropdown, multiselect, autocomplete, lookup, date picker, overlay
   panel) and tooltip to <body> and writes z-index: 2000 inline. Above both dialog layers, so a
   dropdown inside either kind of dialog opens over it. !important is the only thing that outranks
   an inline style; wise-browser.css already does the same for the fly-out at 10070. */
body.wci .rz-popup,
body.wci .rz-multiselect-panel,
body.wci .rz-autocomplete-panel,
body.wci .rz-lookup-panel,
body.wci .rz-overlaypanel,
body.wci .rz-tooltip {
  z-index: 10300 !important;
}

/* ---- Scrim (.wise-modal-scrim, 896-913) ---- */
body.wci .rz-dialog-mask {
  background: rgba(15, 26, 33, 0.48);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 1;
}

/* ---- Card (.wise-modal 925-948, the --panel card 984-994) ---- */
body.wci .rz-dialog {
  max-height: calc(100vh - 48px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  box-shadow: var(--shadow-card, 0 24px 60px rgba(0, 0, 0, 0.28));
  overflow: hidden;
}
html.dark body.wci .rz-dialog {
  background: #14242f;
  border-color: rgba(255, 255, 255, 0.08);
}

/* ---- Head (.wise-modal-head 1002-1011) ---- */
body.wci .rz-dialog-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 20px 22px 0;
  background: transparent;
  border: 0;
}

/* ---- Serif title (.wise-modal-title 1027-1037) ---- */
body.wci .rz-dialog-title {
  margin: 4px 0 0;
  font-family: 'WISE Digits', 'Noto Serif', serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text);
  user-select: text;
}

/* ---- Close (.wise-modal-close 1054-1083) ---- */
body.wci .rz-dialog-titlebar-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-subtle);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
body.wci .rz-dialog-titlebar-close:hover { background: var(--surface-2); color: var(--text); }
html.dark body.wci .rz-dialog-titlebar-close:hover { background: rgba(255, 255, 255, 0.06); }
body.wci .rz-dialog-titlebar-close .rzi-times { font-size: 20px; color: inherit; }
body.wci .rz-dialog-titlebar-close:hover .rzi-times { color: inherit; }
body.wci .rz-dialog-titlebar-close:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- Body (.wise-modal-body 1084-1094) ----
   Only the padding and scroll: the design's flex column with a 14px gap would re-lay-out the
   content of every existing dialog, each of which already arranges its own body. */
body.wci .rz-dialog-content {
  padding: 18px 22px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* A dialog opened with ShowTitle = false (a progress card) has no head, so the body keeps the head's
   top padding too. */
body.wci .rz-dialog > .rz-dialog-content:first-child { padding-top: 22px; }

/* ---- Confirm (the foot's right-hand group of .wise-btns) ---- */
body.wci .rz-dialog-confirm-message {
  margin: 0 0 18px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-muted);
}
body.wci .rz-dialog-confirm-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
body.wci .rz-dialog-confirm-buttons .rz-button {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--primary);
  background: transparent;
  color: var(--text-muted);
  box-shadow: none;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  transition: filter 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.wci .rz-dialog-confirm-buttons .rz-button:hover { color: var(--text); background: var(--surface-2); }
body.wci .rz-dialog-confirm-buttons .rz-button.rz-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
body.wci .rz-dialog-confirm-buttons .rz-button.rz-primary:hover { filter: brightness(1.08); color: #fff; }
body.wci .rz-dialog-confirm-buttons .rz-button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* The design puts the primary action last (Cancel, then Delete). Radzen renders OK first. */
body.wci .rz-dialog-confirm-buttons .rz-button.rz-primary { order: 1; }
/* Radzen's material ripple is not the design's. */
body.wci .rz-dialog-confirm-buttons .rz-button::before { display: none; }