/**
 * GameBases modal shared tokens (M1b).
 * Visual tokens only — no alert/confirm-specific components.
 */

:root {
  --gb-modal-z-base: 1999999;
  --gb-modal-z-step: 10;
  /* Canonical production overlay dim — translucent so the page stays visible */
  --gb-modal-backdrop: rgba(6, 8, 12, 0.72);
  --gb-modal-backdrop-blur: 6px;
  --gb-modal-radius: var(--gb-radius-lg, 0.75rem);
  --gb-modal-shadow: 0 16px 64px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.03);
  --gb-modal-surface: #141820;
  --gb-modal-border: 1px solid rgba(var(--gb-primary-rgb, 99, 102, 241), 0.12);
  --gb-modal-pad: 1.25rem 1.5rem;
  --gb-modal-gap: 0.75rem;
  --gb-modal-title-size: 1.15rem;
  --gb-modal-title-weight: 700;
  --gb-modal-body-size: 0.95rem;
  --gb-modal-body-line: 1.55;
  /* Size tokens — use ONLY these (no page-specific max-w-* for shell width) */
  --gb-modal-max-sm: 28rem;       /* SMALL: confirm / short action */
  --gb-modal-max-md: 36rem;       /* MEDIUM: forms, suspension, IP ban, contact reply */
  --gb-modal-max-lg: 56rem;       /* WIDE: order detail, complex review */
  --gb-modal-max-standard: var(--gb-modal-max-sm);
  --gb-modal-max-wide: var(--gb-modal-max-md);
  --gb-modal-max-scroll: var(--gb-modal-max-md);
  --gb-modal-gutter: 1.5rem;
  --gb-modal-gutter-sm: 0.75rem;
  --gb-modal-close-size: 44px; /* fixed touch target — do not use rem (avoids mid-animation mismatch) */
  --gb-modal-close-icon-size: 1.35rem;
  --gb-modal-close-radius: var(--gb-radius-sm, 0.35rem);
  --gb-modal-close-fg: var(--gb-text-muted, rgba(255, 255, 255, 0.65));
  --gb-modal-close-fg-hover: var(--gb-text-primary, #fff);
  --gb-modal-close-bg-hover: rgba(var(--gb-primary-rgb, 99, 102, 241), 0.1);
  --gb-modal-close-bg-active: rgba(var(--gb-primary-rgb, 99, 102, 241), 0.16);
  --gb-modal-focus-ring: 2px solid rgba(var(--gb-primary-rgb, 99, 102, 241), 0.55);
  --gb-modal-safe-bottom: env(safe-area-inset-bottom, 0px);
  --gb-modal-safe-top: env(safe-area-inset-top, 0px);
}

/**
 * Shared purpose-modal close control (Report, Legal, …).
 * One class — do not restyle per-modal close buttons.
 */
.gb-modal-close {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  position: static !important;
  top: auto !important;
  right: auto !important;
  flex: 0 0 auto;
  width: var(--gb-modal-close-size) !important;
  height: var(--gb-modal-close-size) !important;
  min-width: var(--gb-modal-close-size) !important;
  min-height: var(--gb-modal-close-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--gb-modal-close-radius) !important;
  background: transparent !important;
  color: var(--gb-modal-close-fg) !important;
  font-size: var(--gb-modal-close-icon-size) !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 3;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.gb-modal-close:hover {
  color: var(--gb-modal-close-fg-hover) !important;
  background-color: var(--gb-modal-close-bg-hover) !important;
}

.gb-modal-close:active {
  color: var(--gb-modal-close-fg-hover) !important;
  background-color: var(--gb-modal-close-bg-active) !important;
}

.gb-modal-close:focus {
  outline: none;
}

.gb-modal-close:focus-visible {
  outline: var(--gb-modal-focus-ring) !important;
  outline-offset: 2px !important;
  color: var(--gb-modal-close-fg-hover) !important;
}

/*
 * Standard dialog shell: close is a direct child of .modal-content
 * (reaction lists, confirm/alert, simple modals). Flex-header modals
 * (.gb-modal-scroll__header, custom __header rows) keep static placement.
 */
.modal-content > .gb-modal-close {
  position: absolute !important;
  top: 0.65rem !important;
  right: 0.65rem !important;
}

/* Scroll lock without layout jump (scrollbar width set by core JS) */
body.gb-modal-scroll-lock {
  overflow: hidden;
}

body.gb-modal-scroll-lock.gb-modal-scroll-lock--pad {
  padding-right: var(--gb-modal-scrollbar-width, 0px);
}

/* Shared chrome helpers — additive shell class for custom markup */
.gb-modal-shell {
  background: var(--gb-modal-surface) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: var(--gb-modal-border) !important;
  border-radius: var(--gb-modal-radius) !important;
  box-shadow: var(--gb-modal-shadow) !important;
  color: var(--gb-text-primary, #eee);
}

/*
 * Dialog panels must stay opaque.
 * Page shells often set --surface-panel: var(--gb-glass) (alpha ~0.55) and some
 * feature CSS re-applies that to .modal-content — which makes confirm/alert
 * dialogs look washed-out (tower.php = .recruitment-page.matches-page).
 * This file loads from the footer after page CSS, so it wins equal-specificity fights.
 */
.modal .modal-content,
.modal.gb-modal-open .modal-content,
.modal.gb-modal-closing .modal-content {
  background: var(--gb-modal-surface, #141820) !important;
  background-color: var(--gb-modal-surface, #141820) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Canonical size variants (shell width only) */
.modal-content.gb-modal--sm,
.modal-content.gb-modal--standard {
  width: min(var(--gb-modal-max-sm), calc(100vw - var(--gb-modal-gutter)));
  max-width: min(var(--gb-modal-max-sm), calc(100vw - var(--gb-modal-gutter)));
}

.modal-content.gb-modal--md,
.modal-content.gb-modal--wide,
.modal-content.gb-modal-content--wide {
  width: min(var(--gb-modal-max-md), calc(100vw - var(--gb-modal-gutter)));
  max-width: min(var(--gb-modal-max-md), calc(100vw - var(--gb-modal-gutter)));
}

.modal-content.gb-modal--lg {
  width: min(var(--gb-modal-max-lg), calc(100vw - var(--gb-modal-gutter)));
  max-width: min(var(--gb-modal-max-lg), calc(100vw - var(--gb-modal-gutter)));
}

.modal-content.gb-modal--scroll,
.modal-content.gb-modal-content--scroll.gb-modal--scroll {
  width: min(var(--gb-modal-max-md), calc(100vw - var(--gb-modal-gutter)));
  max-width: min(var(--gb-modal-max-md), calc(100vw - var(--gb-modal-gutter)));
}

.modal-content.gb-modal-content--scroll.gb-modal--lg,
.modal-content.gb-modal-content--scroll.gb-modal--lg {
  width: min(var(--gb-modal-max-lg), calc(100vw - var(--gb-modal-gutter)));
  max-width: min(var(--gb-modal-max-lg), calc(100vw - var(--gb-modal-gutter)));
}

/*
 * Canonical DOM contract (aliases share the same chrome):
 *   .modal > .modal-content[.gb-modal--sm|md|lg][.gb-modal-content--scroll]
 *     .gb-modal-header | .gb-admin-modal__header | .gb-modal-scroll__header
 *       [.gb-modal-heading | title cluster]
 *       .gb-modal-close  (always last / right)
 *     .gb-modal-body | .gb-admin-modal__body | .gb-modal-scroll__body
 *     .gb-modal-footer | .gb-admin-modal__footer | .gb-modal-scroll__footer
 *
 * Header is ALWAYS a single horizontal row. Title may wrap; close never drops
 * under the title and never uses page-specific absolute offsets inside headers.
 */
.gb-modal-header,
.gb-admin-modal__header,
.gb-modal-scroll__header,
.modal .gb-modal-header,
.modal .gb-admin-modal__header,
.modal .gb-modal-scroll__header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0.75rem;
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Title / meta cluster takes remaining width; may wrap internally */
.gb-modal-heading,
.gb-modal-title,
.gb-admin-modal__title,
.gb-legal-modal__title,
.modal .gb-modal-heading,
.modal .gb-modal-title,
.modal .gb-admin-modal__title,
.modal .gb-legal-modal__title,
.modal .pa-detail-modal__heading,
.modal .rm-player-modal__header-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100%;
  margin: 0;
}

.modal .gb-admin-modal__title,
.modal .gb-modal-title,
.modal .gb-legal-modal__title {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/*
 * Close in a header row: flex slot on the RIGHT (never absolute, never full-row).
 * Direct-child absolute rule below still applies only when close is NOT in a header.
 */
.gb-modal-header > .gb-modal-close,
.gb-admin-modal__header > .gb-modal-close,
.gb-modal-scroll__header > .gb-modal-close,
.modal .gb-modal-header > .gb-modal-close,
.modal .gb-admin-modal__header > .gb-modal-close,
.modal .gb-modal-scroll__header > .gb-modal-close,
.modal .gb-admin-modal__header .gb-modal-close,
.modal .gb-modal-header .gb-modal-close,
.modal .gb-modal-scroll__header .gb-modal-close,
.modal .rm-player-modal__header-actions .gb-modal-close {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  align-self: flex-start;
  margin: 0 !important;
  order: 100;
}

/* Optional trailing actions cluster (profile link + close) stays on the right */
.modal .gb-admin-modal__header-actions,
.modal .rm-player-modal__header-actions {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto !important;
  margin-left: 0.25rem;
  width: auto !important;
  max-width: none;
}

.gb-modal-body,
.gb-admin-modal__body,
.gb-modal-scroll__body {
  flex: 1 1 auto;
  min-height: 0;
}

.gb-modal-footer,
.gb-admin-modal__footer,
.gb-modal-scroll__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex: 0 0 auto;
}

.gb-modal-footer > :only-child,
.gb-admin-modal__footer > :only-child,
.gb-modal-scroll__footer > :only-child {
  margin-left: auto;
}

.gb-modal-footer-actions,
.gb-admin-modal__footer-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.modal .gb-admin-modal__footer .gb-admin-btn,
.modal .gb-modal-footer .gb-admin-btn,
.modal .gb-modal-scroll__footer .gb-admin-btn {
  min-height: 2.5rem;
  margin: 0;
}


/* Surface must never need positioning transform for centering.
 * Resting pose is transform:none; FLIP open/close may animate transform via WAAPI. */
.modal .modal-content {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none;
}

.modal.gb-modal-animating .modal-content {
  will-change: transform, opacity;
}

/* Let FLIP travel reach off-center triggers without being clipped mid-animation. */
.modal.gb-modal-animating.gb-modal-open,
.modal.gb-modal-animating.gb-modal-closing {
  overflow: visible !important;
}

.modal .close:focus-visible,
.modal [data-action="close-modal"]:focus-visible,
.modal button:focus-visible,
.modal a:focus-visible,
.modal select:focus-visible,
.modal textarea:focus-visible:not(.gb-input) {
  outline: var(--gb-modal-focus-ring);
  outline-offset: 2px;
}

/* .gb-input already has its own hover/focus chrome — do not stack a second ring */
.modal input.gb-input:focus-visible,
.modal textarea.gb-input:focus-visible {
  outline: none;
}

@media (max-width: 480px) {
  .modal-content.gb-modal--sm,
  .modal-content.gb-modal--md,
  .modal-content.gb-modal--lg,
  .modal-content.gb-modal--standard,
  .modal-content.gb-modal--wide,
  .modal-content.gb-modal-content--wide,
  .modal-content.gb-modal--scroll,
  .modal-content.gb-modal-content--scroll {
    width: calc(100vw - var(--gb-modal-gutter-sm)) !important;
    max-width: calc(100vw - var(--gb-modal-gutter-sm)) !important;
    max-height: calc(100dvh - var(--gb-modal-safe-top) - var(--gb-modal-safe-bottom) - var(--gb-modal-gutter-sm));
    margin-bottom: var(--gb-modal-safe-bottom);
  }

  /* Header stays a single row on mobile — title wraps, close stays top-right */
  .gb-modal-header,
  .gb-admin-modal__header,
  .gb-modal-scroll__header,
  .modal .gb-modal-header,
  .modal .gb-admin-modal__header,
  .modal .gb-modal-scroll__header {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  .gb-modal-footer,
  .gb-admin-modal__footer,
  .gb-modal-scroll__footer {
    flex-direction: column;
    align-items: stretch;
  }

  .gb-modal-footer > :only-child,
  .gb-admin-modal__footer > :only-child,
  .gb-modal-scroll__footer > :only-child,
  .gb-modal-footer-actions,
  .gb-admin-modal__footer-actions {
    margin-left: 0;
    width: 100%;
  }

  .gb-modal-footer-actions .gb-admin-btn,
  .gb-admin-modal__footer-actions .gb-admin-btn,
  .gb-modal-footer .gb-admin-btn,
  .gb-admin-modal__footer .gb-admin-btn {
    flex: 1 1 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal.gb-modal-open .modal-content,
  .modal.gb-modal-closing .modal-content {
    transition: none !important;
  }
}