/* vp-modal.css — the look of js/vp-modal.js, the site's only confirmation / message box
 * (batch 20260930-175756-f044: "We don't use alerts … We only use modals").
 *
 * Linked by auth/_topbar.php on the shell pages and by tpls/ss.html on the tool pages.
 * Colours come from the page's own theme and are not re-decided here:
 *   - the tool pages define --sippis-modal-bg / --sippis-fg / --sippis-border in
 *     admin/css/theme.css for light, dark and auto;
 *   - the shell pages do not, so the fallbacks below are the dark shell's, and
 *     html[data-vp-theme="light"] (js/vp-theme.js) supplies the light ones.
 * No prefers-color-scheme block, same rule as viber.css / vp-nav.css.
 */
.vp-modal {
  --vpm-bg: var(--sippis-modal-bg, #16303a);
  --vpm-fg: var(--sippis-fg, #eef5f6);
  --vpm-muted: var(--vpm-fg);
  --vpm-line: var(--sippis-border, rgba(255, 255, 255, 0.14));
  --vpm-cancel-bg: rgba(127, 127, 127, 0.14);
  --vpm-danger: #dc2626;
  --vpm-danger-hover: #b91c1c;
  padding: 0;
  border: 1px solid var(--vpm-line);
  border-radius: 14px;
  background: var(--vpm-bg);
  color: var(--vpm-fg);
  width: min(92vw, 440px);
  max-width: 92vw;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
  font: inherit;
  text-align: left;            /* the shell centres its hero text; a dialog reads left */
}
html[data-vp-theme="light"] .vp-modal {
  --vpm-bg: var(--sippis-modal-bg, #ffffff);
  --vpm-fg: var(--sippis-fg, #12262d);
  --vpm-line: var(--sippis-border, rgba(18, 38, 45, 0.14));
}
.vp-modal::backdrop { background: rgba(8, 14, 20, 0.62); }
/* a browser with no <dialog>.showModal(): position it ourselves over a painted backdrop */
.vp-modal.vp-modal-fallback {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000;
  box-shadow: 0 0 0 100vmax rgba(8, 14, 20, 0.62), 0 24px 70px rgba(0, 0, 0, 0.5);
}
html.vp-modal-lock { overflow: hidden; }
.vp-modal-box { padding: 20px 22px 18px; }
.vp-modal-title {
  margin: 0 0 10px; font-size: 1.1rem; font-weight: 700; line-height: 1.3; color: var(--vpm-fg);
}
.vp-modal-msg {
  margin: 0 0 20px; font-size: 0.95rem; line-height: 1.5; color: var(--vpm-muted);
  white-space: pre-line; overflow-wrap: anywhere;
}
.vp-modal-acts { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.vp-modal-btn {
  font: inherit; font-weight: 600; font-size: 0.95rem; border-radius: 8px; padding: 9px 20px;
  cursor: pointer; border: 1px solid transparent; min-width: 88px;
}
.vp-modal-cancel { background: var(--vpm-cancel-bg); color: var(--vpm-fg); border-color: var(--vpm-line); }
.vp-modal-cancel:hover { background: rgba(127, 127, 127, 0.24); }
.vp-modal-ok {
  color: #fff; background: linear-gradient(135deg, #0EADB5 0%, #F26430 100%);
  box-shadow: 0 4px 14px rgba(14, 173, 181, 0.28);
}
/* NOT `.danger`: the shell's viber.css styles `button.danger` (light mode) and would win */
.vp-modal-ok.vp-modal-danger { background: var(--vpm-danger); color: #fff; border-color: transparent; box-shadow: none; }
.vp-modal-ok.vp-modal-danger:hover { background: var(--vpm-danger-hover); }
.vp-modal-btn:focus-visible { outline: 2px solid #0EADB5; outline-offset: 2px; }
@media (max-width: 30rem) {
  .vp-modal-acts { flex-direction: column-reverse; }
  .vp-modal-btn { width: 100%; }
}

/* THE SETTINGS PANELS AS MODALS (js/vp-modal.js openPanel()): the explanation and the real
 * form from a vp_confirm_html() panel, moved in. Its buttons keep the settings page's own
 * cta / danger / ghost look; only the layout is decided here. */
.vp-modal-panel { width: min(92vw, 520px); }
.vp-modal-body { font-size: 0.95rem; line-height: 1.5; color: var(--vpm-fg); }
.vp-modal-body p { margin: 0 0 0.6rem; }
.vp-modal-body ul { margin: 0.2rem 0 0.8rem 1.2rem; padding: 0; }
.vp-modal-body li { margin: 0 0 0.35rem; }
.vp-modal-body .muted { opacity: 0.8; }
.vp-modal-body form { margin: 0; }
.vp-modal-body .btn-row.vp-modal-acts {
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 1.1rem;
}
.vp-modal-body .btn-row.vp-modal-acts > button { margin: 0; }
@media (max-width: 30rem) {
  .vp-modal-body .btn-row.vp-modal-acts { flex-direction: column-reverse; }
  .vp-modal-body .btn-row.vp-modal-acts > button { width: 100%; }
}