/**
 * SunMonitor — Modal component CSS (Fase 4.2)
 *
 * Geëxtraheerd uit style.css regels 128-140 (base) + responsive blocks
 * uit @media-queries op 236-240 (768px) en 307 (480px).
 *
 * Selectors: .modal-ov, .modal, .modal-hd, .modal-bd, .modal-ft, .modal-t, .modal-x
 *
 * #engineerScreen .modal* overrides blijven in style.css (page-specifiek,
 * komen later in Fase 4.6 naar pages/admin-*.css).
 *
 * JS counterpart: /js/components/modal-shell.js + components/modal-*.html partials
 */

/* ─── Base ───────────────────────────────────────────────────────────── */
.modal-ov {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(24, 22, 15, .45);
  z-index: 1100;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(4px);
}
.modal-ov.show { display: flex; }

.modal {
  background: var(--bg2);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, .18),
    0 4px 16px rgba(0, 0, 0, .08);
}

.modal-hd {
  padding: 20px 26px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal-t {
  font-size: 16px;
  font-weight: 800;
}

.modal-x {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--ink3);
  padding: 3px 7px;
  border-radius: 6px;
  transition: .15s;
}
.modal-x:hover {
  background: var(--bg3);
  color: var(--ink);
}

.modal-bd { padding: 22px 26px; }

.modal-ft {
  padding: 16px 26px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* ─── Responsive — tablet (≤768px): bottom-sheet stijl ──────────────── */
@media (max-width: 768px) {
  .modal {
    max-width: 100%;
    margin: 0;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .modal-ov {
    align-items: flex-end;
    padding: 0;
  }
  .modal-bd { padding: 18px 20px; }
  .modal-hd { padding: 16px 20px; }
  .modal-ft { padding: 14px 20px; }
}

/* ─── Responsive — mobile (≤480px): kleinere body padding ───────────── */
@media (max-width: 480px) {
  .modal-bd { padding: 14px 16px; }
}

/* ─── Brede modal voor uitgebreide edit-formulieren ──────────────────── */
#editSiteModal .modal,
#addSiteModal .modal {
  max-width: 720px;
}
@media (max-width: 760px) {
  #editSiteModal .modal,
  #addSiteModal .modal { max-width: 100%; }
}