/* Shared modal design tokens. Change this block to restyle every application modal.
 * Keep modal.top's direct-child heading and the native dialog's focus/escape handling.
 */
:root {
  --modal-width: 640px;
  --modal-wide-width: 1000px;
  --modal-viewport-gap: 16px;
  --modal-padding: 24px;
  --modal-radius: 3px;
  --modal-control-radius: 3px;
  --modal-header-height: 58px;
  --modal-close-size: 36px;
  --modal-title-size: 17px;
  --modal-surface: var(--surface);
  --modal-header-surface: color-mix(in srgb, var(--surface) 94%, var(--text));
  --modal-border: color-mix(in srgb, var(--line) 75%, var(--text));
  --modal-edge: color-mix(in srgb, var(--surface) 85%, white);
  --modal-divider: var(--line);
  --modal-shadow: 0 24px 64px #0c181b26, 0 4px 14px #0c181b14;
  --modal-backdrop: #101b2466;
  --modal-backdrop-blur: 2px;
}

:root[data-theme="dark"] {
  --modal-edge: color-mix(in srgb, var(--surface) 80%, white);
  --modal-shadow: 0 24px 64px #00000066, 0 4px 14px #00000033;
  --modal-backdrop: #03080d99;
}

dialog {
  width: min(var(--modal-width), calc(100vw - 2 * var(--modal-viewport-gap)));
  max-width: calc(100vw - 2 * var(--modal-viewport-gap));
  max-height: min(var(--modal-available-height, 100dvh), calc(100dvh - var(--footer-height, 32px) - 2 * var(--modal-viewport-gap)));
  bottom: calc(var(--footer-height, 32px) + var(--modal-viewport-gap));
  padding: var(--modal-padding);
  color: var(--text);
  background: var(--modal-surface);
  border: 1px solid var(--modal-border);
  border-top-color: var(--modal-edge);
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow), inset 0 0 0 1px color-mix(in srgb, var(--modal-edge) 40%, transparent);
  overflow: auto;
  overscroll-behavior: contain;
  scroll-padding-block-start: calc(var(--modal-header-height) + var(--modal-padding));
}

dialog.wide {
  width: min(var(--modal-wide-width), calc(100vw - 2 * var(--modal-viewport-gap)));
}

dialog::backdrop {
  background: var(--modal-backdrop);
  backdrop-filter: blur(var(--modal-backdrop-blur));
}

/* Equal side columns keep the title truly centred, independent of the close button.
 * The sticky bar is flush with the frame and stays available above long forms.
 */
dialog > .dialog-heading {
  position: sticky;
  top: calc(-1 * var(--modal-padding));
  z-index: 10;
  display: grid;
  grid-template-columns: calc(2 * var(--modal-close-size) + 4px) minmax(0, 1fr) calc(2 * var(--modal-close-size) + 4px);
  align-items: center;
  gap: 12px;
  min-height: var(--modal-header-height);
  margin: calc(-1 * var(--modal-padding)) calc(-1 * var(--modal-padding)) var(--modal-padding);
  padding: 10px 12px;
  background: var(--modal-header-surface);
  border-bottom: 1px solid var(--modal-divider);
  box-shadow: inset 0 1px 0 var(--modal-edge);
  cursor: move;
  touch-action: none;
  user-select: none;
}

dialog > .dialog-heading h2 {
  grid-column: 2;
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: var(--modal-title-size);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

dialog > .dialog-heading .dialog-close {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--modal-close-size);
  height: var(--modal-close-size);
  min-width: 0;
  min-height: 0;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: var(--modal-control-radius);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  cursor: pointer;
}

dialog > .dialog-heading .dialog-close:hover {
  background: color-mix(in srgb, var(--text) 8%, var(--modal-header-surface));
  border-color: var(--modal-border);
  color: var(--text);
}

dialog > .dialog-heading .dialog-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

dialog > .dialog-heading .dialog-close svg {
  width: 18px;
  height: 18px;
}

.dialog-heading-actions { grid-column: 3; grid-row: 1; display: flex; justify-content: flex-end; gap: 4px; }
dialog .dialog-heading-actions .dialog-save { width: var(--modal-close-size); height: var(--modal-close-size); min-width: 0; min-height: 0; padding: 8px; color: var(--accent); border: 1px solid var(--modal-border); background: var(--modal-surface); border-radius: var(--modal-control-radius); }
dialog .dialog-heading-actions .dialog-save[hidden] { display: none; }
dialog .dialog-heading-actions .dialog-save:hover { background: var(--tint); }
dialog .dialog-heading-actions .dialog-save svg { width: 18px; height: 18px; }

/* Form controls use the same restrained geometry; switches retain their shape. */
dialog :is(button, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
  border-radius: var(--modal-control-radius);
}

dialog :is(button.technical-action, button.primary:not(.icon-button):not(.sso-login-button), .table-export button) {
  border-radius: var(--modal-control-radius);
  box-shadow: none;
}

dialog :is(button.technical-action, button.primary:not(.icon-button):not(.sso-login-button), .table-export button):not(:disabled):hover {
  box-shadow: none;
}

@media (max-width: 700px) {
  :root {
    --modal-padding: 16px;
    --modal-viewport-gap: 10px;
    --modal-header-height: 60px;
    --modal-close-size: 40px;
    --modal-title-size: 16px;
  }
}