/* SuperCala shared modal — the studio-wide replacement for native
 * alert()/confirm()/prompt(). Centered, themed from the shared app tokens
 * (supercala-app-tokens.css) with sensible fallbacks so it still looks right
 * in products that don't load the token sheet.
 *
 * Classes are namespaced `sc-modal-*` so they never collide with a host
 * app's own `.modal` / `.modal-backdrop` system. Paired with
 * /shared/js/supercala-modal.js (window.SupercalaModal).
 */

.sc-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  /* Centering. */
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(2, 6, 23, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sc-modal-backdrop--active { display: flex; }
body:has(.sc-modal-backdrop--active) { overflow: hidden; }

.sc-modal {
  width: 100%;
  max-width: 26rem;
  padding: 1.5rem;
  background: var(--bg-elev, #ffffff);
  color: var(--fg, #1c2430);
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.sc-modal-title { margin: 0 0 0.5rem; font-size: 1.15rem; font-weight: 700; }
.sc-modal-body { margin: 0 0 1.25rem; color: var(--fg-dim, #6b7686); line-height: 1.5; }
.sc-modal-field { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.9rem; }
.sc-modal-field label { font-size: 0.8rem; color: var(--fg-dim, #6b7686); }
.sc-modal-field input,
.sc-modal-field select {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border, #e3e6ea);
  border-radius: 8px;
  background: var(--bg-elev-2, #f1f4f8);
  color: var(--fg, #1c2430);
}
.sc-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }
.sc-modal-btn {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  border: 1px solid var(--border, #e3e6ea);
  background: var(--bg-elev-2, #f1f4f8);
  color: var(--fg, #1c2430);
  transition: filter 0.12s ease, border-color 0.12s ease;
}
.sc-modal-btn:hover { border-color: var(--accent, #00a2e8); }
.sc-modal-btn--primary {
  background: var(--accent, #00a2e8);
  color: var(--accent-fg, #ffffff);
  border-color: var(--accent, #00a2e8);
}
.sc-modal-btn--primary:hover { filter: brightness(1.05); }
.sc-modal-btn--danger {
  background: var(--red, #b91c1c);
  border-color: var(--red, #b91c1c);
  color: #ffffff;
}