/* modal.css — restyles jquery-confirm (v3.3.4) to the theme. Load AFTER jquery-confirm.css.
   No JS changes: every existing $.confirm({...}) call renders through this.
   Button classes used in the codebase: btn-default (default), 'delete', 'primary'. */

.jconfirm { font-family: var(--font-family); }
.jconfirm .jconfirm-bg, .jconfirm.jconfirm-light .jconfirm-bg, .jconfirm.jconfirm-dark .jconfirm-bg { background-color: var(--overlay-bg); opacity: 1; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.jconfirm .jconfirm-holder { padding: 24px 16px; }
/* site.css forced .jconfirm-box-container to 50% with 25% margins — release it. */
.jconfirm div.jconfirm-box-container { width: auto; margin: 0 auto; }
.jconfirm .jconfirm-box, .jconfirm.jconfirm-light .jconfirm-box, .jconfirm.jconfirm-dark .jconfirm-box {
  width: min(440px, 100%) !important;
  padding: 0; overflow: hidden;
  background: var(--surface-bg-raised); color: var(--text-primary);
  border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg);
  box-shadow: 0 20px 50px rgba(16, 20, 28, 0.25), 0 2px 8px rgba(16, 20, 28, 0.08);
}
html[data-theme="dark"] .jconfirm .jconfirm-box { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
.jconfirm .jconfirm-box.jconfirm-type-default, .jconfirm .jconfirm-box.jconfirm-type-blue, .jconfirm .jconfirm-box.jconfirm-type-red, .jconfirm .jconfirm-box.jconfirm-type-green, .jconfirm .jconfirm-box.jconfirm-type-orange, .jconfirm .jconfirm-box.jconfirm-type-purple, .jconfirm .jconfirm-box.jconfirm-type-dark { border-top-width: var(--border-width); border-top-color: var(--border-color); animation: none; }
.jconfirm .jconfirm-box.jconfirm-type-red .jconfirm-title-c .jconfirm-icon-c { color: var(--status-error-main) !important; }

.jconfirm .jconfirm-box div.jconfirm-title-c { padding: 16px 20px 0; font-size: var(--font-size-lg); line-height: 1.3; font-weight: 600; color: var(--text-primary); }
.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title { font-size: inherit; }
.jconfirm .jconfirm-box div.jconfirm-content-pane { margin: 0; display: block; }
.jconfirm .jconfirm-box div.jconfirm-content { padding: 8px 20px 20px; color: var(--text-secondary); font-size: var(--font-size-base); line-height: 1.5; }
.jconfirm .jconfirm-box div.jconfirm-content p { margin: 0 0 8px; } .jconfirm .jconfirm-box div.jconfirm-content p:last-child { margin: 0; }
.jconfirm .jconfirm-box div.jconfirm-content label { margin-top: 8px; }
.jconfirm .jconfirm-box div.jconfirm-content input[type="text"], .jconfirm .jconfirm-box div.jconfirm-content input[type="password"], .jconfirm .jconfirm-box div.jconfirm-content select, .jconfirm .jconfirm-box div.jconfirm-content textarea { margin-top: 4px; }
.jconfirm .jconfirm-box div.jconfirm-content strong, .jconfirm .jconfirm-box div.jconfirm-content b { color: var(--text-primary); }
.jconfirm .jconfirm-box div.jconfirm-content code { font-family: var(--font-mono); background: var(--surface-bg-sunken); padding: 1px 6px; border-radius: 4px; color: var(--text-primary); }

.jconfirm .jconfirm-box div.jconfirm-closeIcon { top: 12px; right: 12px; width: 28px; height: 28px; border-radius: var(--radius); opacity: 1; color: var(--text-muted); font-size: 20px !important; line-height: 28px !important; }
.jconfirm .jconfirm-box div.jconfirm-closeIcon:hover { background: var(--interactive-bg-hover); color: var(--text-primary); }

.jconfirm .jconfirm-box .jconfirm-buttons, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons, .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons {
  float: none; display: flex; flex-direction: row-reverse; justify-content: flex-start; gap: 8px;
  padding: 12px 20px; margin: 0; background: var(--surface-bg-alt); border-top: var(--border-width) solid var(--border-color-light);
}
.jconfirm .jconfirm-box .jconfirm-buttons > button, .jconfirm .jconfirm-box .jconfirm-buttons button, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button, .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button, .jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button {
  margin: 0; height: 32px; padding: 0 14px; border-radius: var(--radius); font-size: var(--font-size-sm); font-weight: 500; line-height: 1; text-transform: none; text-shadow: none;
  background: var(--interactive-bg); color: var(--text-primary); border: var(--border-width) solid var(--interactive-border);
}
.jconfirm .jconfirm-box .jconfirm-buttons button:hover { background: var(--interactive-bg-hover); }
.jconfirm .jconfirm-box .jconfirm-buttons button:focus-visible { outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--interactive-focus-ring) 30%, transparent); }
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default, .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default, .jconfirm.jconfirm-dark .jconfirm-box .jconfirm-buttons button.btn-default { background: transparent; border-color: transparent; color: var(--text-secondary); }
.jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover { background: var(--interactive-bg-hover); color: var(--text-primary); }
.jconfirm .jconfirm-box .jconfirm-buttons button.primary, .jconfirm .jconfirm-box .jconfirm-buttons button.btn-blue { background: var(--control-fill); color: var(--control-fill-text); border-color: var(--control-fill); }
.jconfirm .jconfirm-box .jconfirm-buttons button.delete, .jconfirm .jconfirm-box .jconfirm-buttons button.btn-red { background: var(--status-error-main); color: #fff; border-color: var(--status-error-main); }
.jconfirm .jconfirm-box .jconfirm-buttons button.delete:hover, .jconfirm .jconfirm-box .jconfirm-buttons button.btn-red:hover { background: color-mix(in srgb, var(--status-error-main) 85%, #000); }
/* The buttons are appended in declaration order; the first declared (the action) should sit right. row-reverse does that. */

.jconfirm .jconfirm-box.loading { height: 120px; }
.jconfirm .jconfirm-box.loading:before { background: var(--surface-bg-raised); }
.jconfirm .jconfirm-box.loading:after { border-bottom-color: var(--text-secondary); border-radius: 50%; }
.jconfirm .jconfirm-box.hilight.jconfirm-hilight-shake { animation-duration: 0.4s; }

/* Wide variant — set theme: "light wide" (or "light scorecard-result-modal") on the call.
   jquery-confirm prefixes only the FIRST theme token with "jconfirm-"; every further token
   lands on the wrapper verbatim, so the extra theme is matched as a bare class here. */
.jconfirm.wide .jconfirm-box, .jconfirm.jconfirm-wide .jconfirm-box,
.jconfirm.scorecard-result-modal .jconfirm-box, .jconfirm.jconfirm-scorecard-result-modal .jconfirm-box { width: min(96vw, 1340px) !important; }
.jconfirm.scorecard-result-modal .jconfirm-box div.jconfirm-content, .jconfirm.jconfirm-scorecard-result-modal .jconfirm-box div.jconfirm-content { padding: 0; }
.jconfirm.scorecard-result-modal .jconfirm-box div.jconfirm-title-c, .jconfirm.jconfirm-scorecard-result-modal .jconfirm-box div.jconfirm-title-c { padding-bottom: 12px; }
.jconfirm.scorecard-result-modal .scorecard-modal-status, .jconfirm.jconfirm-scorecard-result-modal .scorecard-modal-status { padding: 0 20px 12px; margin: 0; }

@media (prefers-reduced-motion: reduce) { .jconfirm .jconfirm-box, .jconfirm .jconfirm-bg { transition: none !important; } }