/**
 * @file
 * Keeps jQuery UI modal dialogs - and their close button - usable everywhere.
 *
 * Two problems this addresses, in any theme (front-end skvr_zp or admin Gin):
 *
 * 1. Dialogs open at a fixed width from their data-dialog-options. On viewports
 *    narrower than that width the dialog overflowed horizontally, pushing the
 *    close button off-screen. Capping the width and centring the dialog keeps
 *    it within the viewport.
 *
 * 2. The close (x) button was collapsing to a thin sliver. Claro sizes it with
 *    CSS custom properties (--jui-dialog-close-button-size, --space-l) whose
 *    definitions are not present on these pages, so its size/offset resolved to
 *    nothing. Pinning concrete !important values makes the button a fixed,
 *    reachable size regardless of which stylesheet wins the cascade. This was
 *    blocking: the concept-invoice Accept button only unlocks on the dialog's
 *    `dialog:afterclose` event, so a teacher who could not reach the close
 *    button could never accept their hours.
 */
.ui-dialog {
  max-width: 95vw !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box;
  overflow: visible !important;
}

.ui-dialog .ui-dialog-content {
  box-sizing: border-box;
  max-width: 100%;
}

.ui-dialog iframe {
  max-width: 100%;
}

.ui-dialog .ui-dialog-titlebar {
  position: relative;
}

.ui-dialog .ui-dialog-titlebar-close {
  position: absolute !important;
  inset-block-start: 15px !important;
  top: 15px !important;
  inset-inline-end: 15px !important;
  right: 15px !important;
  inset-inline-start: auto !important;
  left: auto !important;
  inline-size: 2rem !important;
  block-size: 2rem !important;
  width: 2rem !important;
  height: 2rem !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  z-index: 1001 !important;
}

.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-icon-closethick {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  transform: none !important;
  text-indent: -9999px;
  background: url("data:image/svg+xml,%3csvg width='14' height='14' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M13 1L1 13M13 13L1 1' stroke='%23333333' stroke-width='1.5'/%3e%3c/svg%3e") no-repeat center !important;
  background-size: 16px 16px !important;
}