/* CarRider modals.css — idle-timeout warning modal + IP whitelist
 * lockout-prevention modal + shared modal chrome (scrim/card/actions).
 * Extracted from forms.css. Tokens are defined in tokens.css.
 *
 * Used by:
 *   * _base.html — idle-timeout warning modal (#session-timeout-warning)
 *   * _admin_shell.html — shared destructive-action confirm modal
 *     (#admin-confirm-modal) wired by app/static/js/admin-confirms.js
 *   * admin_school_settings.html — IP whitelist lockout-prevention modal
 *     (.ipw-modal-* + .ipw-cidr-* + .ipw-coverage)
 */

/* ── Idle-timeout warning modal ────────────────────────────── */
.modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--fb-scrim);
  z-index: 1099;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(var(--fb-s-6), env(safe-area-inset-top))
           max(var(--fb-s-6), env(safe-area-inset-right))
           max(var(--fb-s-6), env(safe-area-inset-bottom))
           max(var(--fb-s-6), env(safe-area-inset-left));
}
.modal-scrim[hidden] { display: none; }
body.is-modal-open { overflow: hidden; }
.modal-card {
  background: var(--fb-surface);
  border-radius: var(--fb-r-lg);
  /* Spec-sanctioned overlay shadow per parity lock-in §3 — modals
   * carry the discrete drawer/scrim drop, not the flat-card stack. */
  box-shadow: var(--fb-sh-overlay);
  padding: var(--fb-s-6);
  width: 100%;
  max-width: 480px;
  z-index: 1100;
  animation: modal-in 0.15s ease;
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-card { animation: none; }
}
/* GLEAM-101 / GLEAM-114: align modal-card h2 to a documented 18px
 * dialog-title tier — one scale step above body (14px) and below
 * page-h1 (28px).  See tokens.css heading-scale comment for full
 * tier table. */
.modal-card h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--fb-text-heading);
  margin: 0 0 var(--fb-s-3);
}
.modal-body {
  color: var(--fb-text);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 var(--fb-s-5);
}
#stw-countdown {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--fb-danger);
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--fb-s-3);
}

/* ── IP whitelist lockout-prevention modal ─────────────────── */
.ipw-modal-card {
  max-width: 480px;
}
.ipw-modal-detail {
  margin: 0 0 var(--fb-s-3);
}
.ipw-modal-detail code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  background: var(--fb-surface-2);
  padding: 2px 6px;
  border-radius: var(--fb-r-sm);
  color: var(--fb-text-input);
}
.ipw-cidr-list {
  margin: 0 0 var(--fb-s-4);
  padding-left: var(--fb-s-5);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--fb-text-input);
  max-height: 160px;
  overflow-y: auto;
}
.ipw-cidr-list li {
  margin: 2px 0;
}
.ipw-cidr-list .ipw-cidr-empty {
  font-family: inherit;
  color: var(--fb-danger);
}
.ipw-coverage {
  font-size: 13px;
  margin: 0 0 var(--fb-s-4);
  color: var(--fb-text-muted);
}
.ipw-coverage.ipw-covered {
  color: var(--fb-success);
}
.ipw-coverage.ipw-not-covered {
  color: var(--fb-danger);
  font-weight: 600;
}

/* ── iOS Safari + tablet responsive modal sizing ─────────────────
 * Mobile (≤540px): trim padding and clamp width to viewport so a
 * landscape-phone modal doesn't clip its action row.  Tablet
 * (768-1024px): trim padding so a confirmation modal centred on
 * iPad portrait doesn't push CTAs out of the viewport on landscape. */
@media (max-width: 540px) {
  /* GLEAM-098: reduce modal padding on phones and clamp width to viewport
   * so landscape-phone modals don't clip their action row.  Drops from
   * 24px (--fb-s-6) to 16px (--fb-s-4) and subtracts a 24px gutter on
   * each side via calc(100vw - var(--fb-s-6)). */
  .modal-card {
    padding: var(--fb-s-4);
    max-width: calc(100vw - var(--fb-s-6));
  }
}
@media (min-width: 768px) and (max-width: 1024px) {
  /* Modal: trim padding so a confirmation modal centred on iPad
   * portrait doesn't push its CTAs out of the viewport on landscape. */
  .modal-card {
    padding: var(--fb-s-5);
    max-width: 480px;
  }
}