/**
 * modal-dialog.css — FacultyPage Theme
 *
 * Restyles Drupal core's jQuery UI modal dialog (used by
 * core/drupal.dialog.ajax) to match the FacultyPage design system.
 *
 * Drupal core classes targeted (all from jQuery UI's dialog widget):
 *   .ui-widget-overlay        — the dark backdrop behind the modal
 *   .ui-dialog                — the modal container itself
 *   .ui-dialog-titlebar       — header bar with title + close button
 *   .ui-dialog-title          — the title text
 *   .ui-dialog-titlebar-close — the × close button
 *   .ui-dialog-content        — scrollable body where the form renders
 *   .ui-dialog-buttonpane     — footer button row (if using #ajax dialog buttons)
 *
 * !important is required here because jQuery UI injects inline styles
 * and a separate base stylesheet that loads after theme CSS.
 */

/* ════════════════════════════════════════════════════════════
   OVERLAY (backdrop)
   ════════════════════════════════════════════════════════════ */
.ui-widget-overlay {
  background: rgba(28, 28, 30, 0.5) !important;
  opacity: 1 !important;
}

/* ════════════════════════════════════════════════════════════
   DIALOG CONTAINER
   ════════════════════════════════════════════════════════════ */
.ui-dialog {
  border-radius: var(--fp-radius-lg) !important;
  border: 1.5px solid var(--fp-border) !important;
  box-shadow: 0 20px 60px rgba(28, 28, 30, 0.25) !important;
  padding: 0 !important;
  font-family: 'Instrument Sans', sans-serif !important;
  max-width: 92vw;
  background: var(--fp-white) !important;
}

/* ════════════════════════════════════════════════════════════
   TITLEBAR
   ════════════════════════════════════════════════════════════ */
.ui-dialog .ui-dialog-titlebar {
  background: var(--fp-white) !important;
  border-bottom: 1px solid var(--fp-border) !important;
  border-radius: var(--fp-radius-lg) var(--fp-radius-lg) 0 0 !important;
  padding: 1rem 3rem 1rem 1.25rem !important;
  position: relative;
}

.ui-dialog .ui-dialog-title {
  font-family: 'Fraunces', serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--fp-charcoal) !important;
  letter-spacing: -0.02em;
  float: none !important;
}

/* Close button — restyle as a circular icon button */
.ui-dialog .ui-dialog-titlebar-close {
  position: absolute !important;
  top: 0.7rem !important;
  right: 0.85rem !important;
  width: 28px !important;
  height: 28px !important;
  background: var(--fp-off-white) !important;
  border: 1.5px solid var(--fp-border) !important;
  border-radius: 50% !important;
  transition: all 0.15s !important;
}
.ui-dialog .ui-dialog-titlebar-close:hover {
  background: var(--fp-terra-pale) !important;
  border-color: var(--fp-terra) !important;
}
button.ui-button.ui-corner-all.ui-widget.ui-button-icon-only.ui-dialog-titlebar-close {
    margin-top: 4px;
}
/*
.ui-dialog .ui-dialog-titlebar-close .ui-icon {
  background: none !important;
  text-indent: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--fp-mid) !important;
}
  */
.ui-dialog .ui-dialog-titlebar-close::before {
  content: '✕';
  font-size: 0.75rem;
  color: var(--fp-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.ui-dialog .ui-dialog-titlebar-close:hover::before {
  color: var(--fp-terra-dark);
}

/* ════════════════════════════════════════════════════════════
   CONTENT AREA — where the form renders
   ════════════════════════════════════════════════════════════ */
.ui-dialog .ui-dialog-content {
  padding: 1.25rem !important;
}

/* Form elements inside the modal reuse the theme's standard classes
   (.fp-input, .fp-textarea, .fp-btn-cta) so no extra styling is needed —
   they're already defined in components.css. */

/* Drupal's default fieldset/label spacing inside modals */
.ui-dialog .form-item {
  margin-bottom: 1.1rem;
}
.ui-dialog .form-item:last-child {
  margin-bottom: 0;
}
.ui-dialog label {
  display: block;
  font-family: 'Space Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fp-mid);
  margin-bottom: 0.4rem;
}

/* Messages rendered inside the modal (validation errors) */
.ui-dialog .messages {
  margin: 0 0 1rem;
}

/* ════════════════════════════════════════════════════════════
   BUTTON PANE (only present if using Drupal's #ajax dialog buttons
   option instead of an in-form submit button)
   ════════════════════════════════════════════════════════════ */
.ui-dialog .ui-dialog-buttonpane {
  border-top: 1px solid var(--fp-border) !important;
  padding: 0.85rem 1.25rem !important;
  background: var(--fp-off-white) !important;
  border-radius: 0 0 var(--fp-radius-lg) var(--fp-radius-lg) !important;
}
.ui-dialog .ui-dialog-buttonset {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}
.ui-dialog .ui-dialog-buttonpane button {
  font-family: 'Instrument Sans', sans-serif !important;
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — full-width sheet on mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .ui-dialog {
    width: 92vw !important;
    max-height: 85vh;
    overflow-y: auto;
  }
}