/**
 * @file
 * Bootstrap 5.3-styled chrome for Drupal's jQuery UI dialog.
 *
 * Loaded on frontend pages (lqc_theme active) via libraries-extend on
 * core/drupal.dialog. The default jQuery UI base / Claro / Gin dialog CSS
 * files are dropped via libraries-override in lqc_theme.info.yml; this
 * stylesheet is the sole source of dialog chrome on the frontend.
 *
 * Selector scope: only `.ui-dialog*` and `.ui-widget-overlay`. We do not
 * touch jQuery UI button / checkboxradio / resizable / controlgroup — those
 * may be used by other widgets and Claro's `claro/claro.jquery.ui` styles
 * autocomplete / datepicker / accordion / menu / slider / tooltip that we
 * leave intact.
 */

/* -------------------------------------------------------------------------
 * Bootstrap 5.3 modal tokens — kept as CSS variables so the theme can tune
 * them centrally if needed.
 * ------------------------------------------------------------------------- */
:root {
  --att-modal-backdrop-bg: rgba(0, 0, 0, 0.5);
  --att-modal-bg: #fff;
  --att-modal-border-radius: 0.5rem;
  --att-modal-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --att-modal-header-padding-y: 1rem;
  --att-modal-header-padding-x: 1rem;
  --att-modal-body-padding-y: 1rem;
  --att-modal-body-padding-x: 1rem;
  --att-modal-footer-gap: 0.5rem;
  --att-modal-border-color: #dee2e6;
  --att-modal-title-color: #212529;
  --att-modal-text-color: #212529;
  --att-modal-close-color: #000;
  --att-modal-max-width: 500px;
  --att-modal-header-bg: #fff;
  --att-modal-footer-bg: #fff;
}

/* -------------------------------------------------------------------------
 * Backdrop — full-viewport dim overlay.
 * ------------------------------------------------------------------------- */
.ui-widget-overlay {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: var(--att-modal-backdrop-bg);
  opacity: 1;
}

/* -------------------------------------------------------------------------
 * Dialog container — Bootstrap modal-content equivalent.
 * ------------------------------------------------------------------------- */
.ui-dialog {
  position: fixed;
  z-index: 1055;
  max-width: var(--att-modal-max-width);
  width: calc(100% - 1rem);
  background: var(--att-modal-bg);
  color: var(--att-modal-text-color);
  border: 1px solid var(--att-modal-border-color);
  border-radius: var(--att-modal-border-radius);
  box-shadow: var(--att-modal-shadow);
  padding: 0;
  outline: none;
  font-family: inherit;
}

.ui-dialog:focus,
.ui-dialog:focus-visible {
  outline: none;
}

/* Mobile — full-width-ish, vertical centering preserved by jQuery UI JS. */
@media (max-width: 575.98px) {
  .ui-dialog {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
  }
}

/* -------------------------------------------------------------------------
 * Header / titlebar — Bootstrap modal-header.
 * ------------------------------------------------------------------------- */
.ui-dialog .ui-dialog-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--att-modal-header-padding-y) var(--att-modal-header-padding-x);
  background: var(--att-modal-header-bg);
  border-bottom: 1px solid var(--att-modal-border-color);
  border-top-left-radius: var(--att-modal-border-radius);
  border-top-right-radius: var(--att-modal-border-radius);
  margin: 0;
}

.ui-dialog .ui-dialog-title {
  flex-grow: 1;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--att-modal-title-color);
}

/* Close button — Bootstrap btn-close visual using a CSS-drawn × glyph. */
.ui-dialog .ui-dialog-titlebar-close {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0.375rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--att-modal-close-color);
  opacity: 0.5;
  font-size: 1.5rem;
  line-height: 1;
  transition: opacity 0.15s ease-in-out;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
  opacity: 1;
}

.ui-dialog .ui-dialog-titlebar-close:focus-visible {
  outline: 0;
  opacity: 1;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Replace any jQuery UI icon span with a CSS × glyph. */
.ui-dialog .ui-dialog-titlebar-close .ui-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
  display: none;
}

.ui-dialog .ui-dialog-titlebar-close::before {
  content: "×";
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}

/* -------------------------------------------------------------------------
 * Body / content — Bootstrap modal-body.
 * ------------------------------------------------------------------------- */
.ui-dialog .ui-dialog-content {
  position: relative;
  padding: var(--att-modal-body-padding-y) var(--att-modal-body-padding-x);
  background: var(--att-modal-bg);
  color: var(--att-modal-text-color);
  border: 0;
  overflow-y: auto;
}

/* -------------------------------------------------------------------------
 * Footer / button pane — Bootstrap modal-footer.
 * ------------------------------------------------------------------------- */
.ui-dialog .ui-dialog-buttonpane {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--att-modal-footer-gap);
  padding: calc(var(--att-modal-body-padding-y) - var(--att-modal-footer-gap) / 2) var(--att-modal-body-padding-x);
  background: var(--att-modal-footer-bg);
  border-top: 1px solid var(--att-modal-border-color);
  border-bottom-left-radius: var(--att-modal-border-radius);
  border-bottom-right-radius: var(--att-modal-border-radius);
  margin: 0;
}

[dir="rtl"] .ui-dialog .ui-dialog-buttonpane {
  justify-content: flex-start;
}

.ui-dialog .ui-dialog-buttonset {
  display: flex;
  gap: var(--att-modal-footer-gap);
  margin: 0;
  padding: 0;
}

/* Style buttons inside the dialog footer with the Bootstrap btn aesthetic.
 * We scope this strictly to .ui-dialog so jQuery UI buttons elsewhere on
 * the page (e.g. inside autocomplete dropdowns) keep their default styling. */
.ui-dialog .ui-dialog-buttonpane .ui-button,
.ui-dialog .ui-dialog-buttonpane .button,
.ui-dialog .ui-dialog-buttonpane button {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
  background: #6c757d;
  border-color: #6c757d;
  color: #fff;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:hover,
.ui-dialog .ui-dialog-buttonpane .button:hover,
.ui-dialog .ui-dialog-buttonpane button:hover {
  background: #5c636a;
  border-color: #565e64;
  color: #fff;
}

.ui-dialog .ui-dialog-buttonpane .ui-button:focus-visible,
.ui-dialog .ui-dialog-buttonpane .button:focus-visible,
.ui-dialog .ui-dialog-buttonpane button:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
}

/* Primary / submit button — btn-primary aesthetic. */
.ui-dialog .ui-dialog-buttonpane .button--primary,
.ui-dialog .ui-dialog-buttonpane input[type="submit"],
.ui-dialog .ui-dialog-buttonpane .form-submit {
  background: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}

.ui-dialog .ui-dialog-buttonpane .button--primary:hover,
.ui-dialog .ui-dialog-buttonpane input[type="submit"]:hover,
.ui-dialog .ui-dialog-buttonpane .form-submit:hover {
  background: #0b5ed7;
  border-color: #0a58ca;
}

/* Danger button — btn-danger aesthetic, used by the regenerate / rotate
 * confirms which carry #button_type => 'danger'. */
.ui-dialog .ui-dialog-buttonpane .button--danger,
.ui-dialog .ui-dialog-buttonpane button[data-button-type="danger"],
.ui-dialog .ui-dialog-buttonpane .button.is-danger {
  background: #dc3545;
  border-color: #dc3545;
  color: #fff;
}

.ui-dialog .ui-dialog-buttonpane .button--danger:hover,
.ui-dialog .ui-dialog-buttonpane button[data-button-type="danger"]:hover,
.ui-dialog .ui-dialog-buttonpane .button.is-danger:hover {
  background: #bb2d3b;
  border-color: #b02a37;
}

/* -------------------------------------------------------------------------
 * Form inputs inside the dialog — Bootstrap form-control aesthetic.
 * Keep tight scoping so this doesn't escape the dialog.
 * ------------------------------------------------------------------------- */
.ui-dialog .ui-dialog-content input[type="text"],
.ui-dialog .ui-dialog-content input[type="email"],
.ui-dialog .ui-dialog-content input[type="url"],
.ui-dialog .ui-dialog-content input[type="password"],
.ui-dialog .ui-dialog-content input[type="tel"],
.ui-dialog .ui-dialog-content input[type="search"],
.ui-dialog .ui-dialog-content textarea,
.ui-dialog .ui-dialog-content select {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--att-modal-text-color);
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}

.ui-dialog .ui-dialog-content input:focus,
.ui-dialog .ui-dialog-content textarea:focus,
.ui-dialog .ui-dialog-content select:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.ui-dialog .ui-dialog-content .form-item label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 500;
  color: var(--att-modal-title-color);
}

.ui-dialog .ui-dialog-content .description,
.ui-dialog .ui-dialog-content small.form-text {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: #6c757d;
}

.ui-dialog .ui-dialog-content .form-item--error-message,
.ui-dialog .ui-dialog-content .messages--error {
  color: #dc3545;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

/* -------------------------------------------------------------------------
 * RTL adjustments for the title/close button.
 * ------------------------------------------------------------------------- */
[dir="rtl"] .ui-dialog .ui-dialog-titlebar {
  flex-direction: row-reverse;
}