/* modals.css — overlay + modal base
 * Pattern compartit entre Denunciem, Ciutadata i Transitem (quasi byte-identical).
 *
 * Markup esperat:
 *   <div id="overlay-X" class="overlay">
 *     <div class="modal">
 *       <button class="modal-close" data-close="overlay-X">…</button>
 *       <h2>Títol</h2>
 *       …
 *       <div class="modal-footer"><small>Territori · vX.Y · Any</small></div>
 *     </div>
 *   </div>
 *
 * Comportament: shared/js/overlay.js munta els listeners (data-close, ESC,
 * backdrop click) i exposa window.SharedOverlay.{open,close}.
 *
 * Variables esperades a tokens.css / inline:
 *   --bg, --ink, --ink-2, --ink-4, --border
 */

.overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(10, 10, 15, 0.55);
  backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

.overlay.open {
  opacity: 1; pointer-events: auto; visibility: visible;
}

.overlay .modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);   /* invisible en light, subtil en dark */
  border-radius: 14px;
  width: min(680px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.6rem 1.8rem 1.4rem;
  position: relative;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);
  transform: translateY(14px);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.overlay.open .modal {
  transform: translateY(0);
}

.overlay .modal h2 {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

/* ── Capçalera enganxada (norma compartida) ─────────────────────────────
 * Norma UX: en qualsevol modal amb contingut llarg que fa scroll, el títol
 * i els botons de capçalera s'han de quedar visibles tot el temps. Així
 * l'usuari sempre pot tancar la finestra (X) o tornar enrere (←) sense
 * haver de fer scroll fins a dalt.
 *
 * Markup esperat (recomanat):
 *   <div class="modal">
 *     <div class="modal-head">
 *       <button class="btn-modal-back" …>← Enrere</button>   (opcional)
 *       <h2>Títol</h2>
 *       <button class="modal-close" …>×</button>
 *     </div>
 *     …contingut llarg…
 *     <div class="modal-footer">…</div>
 *   </div>
 *
 * Si el modal no fa servir .modal-head (markup antic amb títol+botons
 * solts), funciona igual gràcies al fallback més avall que fa sticky el
 * .modal-close i la primera h2 directament. */
.modal-head {
  position: sticky;
  top: -1.6rem;                       /* anul·la el padding-top de .modal */
  z-index: 5;
  background: var(--bg-elevated);     /* coherent amb el fons del modal */
  margin: -1.6rem -1.8rem 0.8rem;     /* compensa el padding lateral del modal */
  padding: 1.2rem 1.8rem 0.8rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.modal-head h2 { margin: 0; flex: 1; }
.modal-head .modal-close,
.modal-head .btn-modal-back {
  position: static;                   /* dins .modal-head queden en flux */
  flex-shrink: 0;
}
html.dark .modal-head { background: var(--bg); border-bottom-color: rgba(255,255,255,0.08); }

/* Per a modals que encara no usen .modal-head, els botons no estan dins
 * d'una capçalera. La norma del projecte és refactoritzar-los progressivament
 * a usar .modal-head. Mentrestant, segueixen amb position:absolute (no
 * sticky) per evitar trencar el layout dels modals existents. */

.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.04);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  transition: background 0.15s, color 0.15s;
  border: 0; cursor: pointer;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--ink);
}

.modal-footer {
  margin-top: 1.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  color: var(--ink-4);
  font-size: 0.74rem;
  text-align: center;
}

/* ── Dark mode ─────────────────────────────────────── */
html.dark .overlay {
  background: rgba(10, 10, 11, 0.65);
}

html.dark .modal-close {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.65);
}

html.dark .modal-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}