/*
 * modern-sdialog.css — GLOBAL chrome for the canonical SDialog shell.
 *
 * Why this is global and not in SDialog.razor.css: MudBlazor renders the outer
 * `.mud-dialog` element into a PORTAL that is an ANCESTOR of the content SDialog
 * emits. Blazor scoped CSS (`::deep`) can only reach DESCENDANTS of the component's
 * own elements, so a scoped rule like `[b-hash] .mud-dialog.s-dialog { … }` never
 * matches the portal wrapper. These outer-shell rules therefore have to be plain
 * global CSS keyed off the `.s-dialog` class that SDialog puts on the MudDialog.
 *
 * The dialog HEADER vocabulary (.scale-modern-dialog-titlebar and friends) is the
 * SINGLE, shared header style used by BOTH SDialog and the raw Bootstrap modals
 * (PaymentConfirm, VoidDialog, PaymentSelection, AddFeedback, …). It lives here,
 * global, so every dialog — Blazor component or Bootstrap markup — renders an
 * identical [ Cancel · Title · Submit ] bar. The body padding stays scoped in
 * SDialog.razor.css (.s-dialog__body), which only SDialog needs.
 *
 * Loaded after MudBlazor.min.css so it wins over MudBlazor's default dialog chrome.
 */

.mud-dialog.s-dialog {
  background-color: var(--scale-panel);
  border-radius: var(--scale-radius-sheet);
  box-shadow: var(--scale-shadow-sheet);
  overflow: hidden;
  font-family: var(--scale-font-sans);
  color: var(--scale-text);
}

/* Responsive-width dialogs (wide report tables — VoidItems, ItemRefunds,
   PrintBackupHistory). The dialog sizes to its content instead of a fixed narrow
   width, so the table fits WITHOUT an inner horizontal scrollbar. Capped at 95vw so
   it stays on-screen; only a genuinely huge table would then scroll. Add
   Class="dialog-dynamic-width" to any dialog whose body is a wide table. */
.mud-dialog.dialog-dynamic-width {
  width: fit-content !important;
  min-width: 300px;
  max-width: 95vw !important;
}

/* Title bar: strip MudBlazor's default padding so .s-dialog__titlebar owns the spacing;
   a hairline under the titlebar separates the actions row from the body. */
.mud-dialog.s-dialog .mud-dialog-title {
  padding: 0;
  border-bottom: var(--scale-hairline) solid var(--scale-separator);
}

/* Card dialogs (message / confirmation via ShowTitlebar=false) carry their title in the
   body, so the empty MudBlazor title bar must be hidden — otherwise it leaves a blank
   strip above the card. */
.mud-dialog.s-dialog--no-titlebar .mud-dialog-title {
  display: none !important;
}

/* Body + action padding come from .s-dialog__body / .s-dialog__actions, not MudBlazor. */
.mud-dialog.s-dialog .mud-dialog-content {
  padding: 0;
}

/* Actions live in the header titlebar now, so MudBlazor's actions region is empty and
   must collapse — otherwise it leaves a blank padded strip at the bottom of the card. */
.mud-dialog.s-dialog .mud-dialog-actions {
  padding: 0;
  display: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   Canonical dialog titlebar — the ONE header vocabulary for every dialog.

   Markup (3 grid cells):
     <div class="scale-modern-dialog-titlebar">
       <button class="scale-modern-dialog-title-action">Cancel</button>   ← left, quiet
       <div class="scale-modern-dialog-title">
         <span class="scale-modern-dialog-title-main">Title</span>
         <span class="scale-modern-dialog-title-sub">optional subtitle</span>
       </div>
       <button class="scale-modern-dialog-title-action is-primary">Apply</button> ← right, SOLID
     </div>
   Use .scale-modern-dialog-title-action-placeholder for an absent Cancel/Submit so the
   title stays centered. .is-danger is the destructive solid variant (e.g. Void).
   ══════════════════════════════════════════════════════════════════════════ */
.scale-modern-dialog-titlebar {
  width: 100%;
  min-height: 56px;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
  align-items: center;
  gap: var(--scale-space-4);
  padding: var(--scale-space-4) var(--scale-space-5);
  border-bottom: var(--scale-hairline) solid var(--scale-separator);
  background: transparent;
  color: var(--scale-text);
  font-family: var(--scale-font-sans);
}

/* Title cell — centered; stacks an optional subtitle under the main line. */
.scale-modern-dialog-title {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  font-size: var(--scale-type-headline-size);
  font-weight: var(--scale-type-headline-weight);
  line-height: var(--scale-leading-snug);
  color: var(--scale-text);
}

.scale-modern-dialog-title-main {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--scale-type-headline-size);
  font-weight: var(--scale-type-headline-weight);
}

.scale-modern-dialog-title-sub {
  font-size: var(--scale-type-footnote-size);
  font-weight: var(--scale-type-footnote-weight);
  color: var(--scale-text-soft);
}

/* Base action = the left-hand CANCEL: a quiet, text-style control. */
.scale-modern-dialog-title-action,
.scale-modern-dialog-title-action-placeholder {
  justify-self: start;
  min-width: 72px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--scale-space-5);
  border: 1px solid transparent;
  border-radius: var(--scale-radius-cta);
  background: transparent;
  color: var(--scale-primary);
  font-family: var(--scale-font-sans);
  font-size: var(--scale-type-callout-size);
  font-weight: var(--scale-type-callout-weight);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.scale-modern-dialog-title-action-placeholder {
  visibility: hidden;
}

.scale-modern-dialog-title-action:hover:not(:disabled) {
  background: var(--scale-primary-soft);
}

/* SUBMIT = the right-hand action, rendered as a REAL solid button, not a text link. */
.scale-modern-dialog-title-action.is-primary,
.scale-modern-dialog-title-action.is-danger {
  justify-self: end;
  color: var(--scale-text-on-primary);
  font-weight: 600;
}

.scale-modern-dialog-title-action.is-primary {
  background: var(--scale-primary);
  border-color: var(--scale-primary);
}

.scale-modern-dialog-title-action.is-primary:hover:not(:disabled) {
  background: var(--scale-primary-hover);
  border-color: var(--scale-primary-hover);
}

.scale-modern-dialog-title-action.is-danger {
  background: var(--scale-danger);
  border-color: var(--scale-danger);
}

.scale-modern-dialog-title-action.is-danger:hover:not(:disabled) {
  filter: brightness(0.94);
}

.scale-modern-dialog-title-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Right cell holding more than one action (SDialog Footer slot, e.g. Clear + Save). */
.scale-modern-dialog-titlebar-actions {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: var(--scale-space-3);
}