/* ════════════════════════════════════════════════════════════════════════
   CONFIRM / ALERT MODAL  (frontend/style/confirm-modal.css)
   ----------------------------------------------------------------------
   Styles the DOM that pages/confirm-modal.js injects (sysConfirm /
   sysAlert) — .cm-overlay, .cm-box, .cm-head, .cm-icon, .cm-title,
   .cm-msg, .cm-actions, .cm-cancel, .cm-ok.

   Deliberately its OWN file, not folded into style.css: this modal is a
   shared component used across multiple contexts (main dashboard,
   sysadmin console, license page, standalone auth pages), each with
   their own token set. A component this shared shouldn't be owned by
   any one page's monolithic stylesheet — that's exactly the coupling
   this file avoids, and the model for however the rest of the CSS gets
   split up going forward.

   Token contract: this file expects the HOST PAGE to already define, at
   :root (or an equivalent theme scope):
     --primary        (accent / call-to-action color)
     --card           (modal surface / background)
     --border         (default border color)
     --text           (primary text color)
     --text-2         (secondary/body text color)
     --radius         (large corner radius, e.g. modal box)
     --radius-sm      (small corner radius, e.g. buttons)
     --shadow-lg      (drop shadow for elevated surfaces)
   These are the token NAMES used by style.css (the main dashboard).
   sysadmin.css / license.css use a different token vocabulary
   (--ink-900, --line-strong, --brand, --text-1, etc.) for the same
   concepts — if this file is ever loaded on a page using that
   vocabulary instead, add a small alias block there rather than
   duplicating these rules with different var() names.

   Load this AFTER whichever host stylesheet defines the tokens above
   (style.css, sysadmin.css, or license.css) — var() references resolve
   at computed-style time, not parse order, so this isn't a hard
   ordering requirement the way script `defer` order is, but keeping it
   last is the conventional/readable place for an override-style sheet.

   z-index: 100000 — deliberately above this app's toast layer
   (style.css toast container sits at 99999), so a confirm/alert dialog
   is never visually buried under an active toast notification.
   ════════════════════════════════════════════════════════════════════════ */

.cm-overlay {
  display: none; position: fixed; inset: 0; z-index: 100000;
  background: rgba(0,0,0,.6); align-items: center; justify-content: center;
}
.cm-overlay.open { display: flex; }
.cm-overlay.open .cm-box { animation: cm-in .28s cubic-bezier(.2,.8,.3,1); }

@keyframes cm-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cm-box {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 28px; max-width: 440px; width: 90%;
  box-shadow: var(--shadow-lg);
}

.cm-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }

.cm-icon {
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}

.cm-head .cm-title { margin-bottom: 0; }
.cm-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.cm-msg   { font-size: 13.5px; color: var(--text-2); line-height: 1.6; margin-bottom: 24px; }
.cm-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Cancel: neutral/outlined — always the same regardless of confirm type,
   so it never competes visually with the action button. */
.cm-cancel {
  padding: 9px 20px; border: 1px solid var(--border); background: var(--card);
  color: var(--text-2); border-radius: var(--radius-sm); cursor: pointer;
  font-size: 13px; font-weight: 600; font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.cm-cancel:hover   { background: color-mix(in srgb, var(--card) 85%, var(--text) 15%); border-color: color-mix(in srgb, var(--border) 60%, var(--text) 40%); }
.cm-cancel:focus-visible { outline: 2px solid color-mix(in srgb, var(--text) 40%, transparent); outline-offset: 2px; }

/* OK/Confirm: filled with the type color (sysConfirm/sysAlert set
   --cm-ok-color inline per call — success/danger/warning/primary all read
   distinctly different, per-type, rather than every action looking the
   same shade of blue regardless of how destructive it is). */
.cm-ok {
  padding: 9px 20px; border: none; background: var(--cm-ok-color, var(--primary)); color: #fff;
  border-radius: var(--radius-sm); cursor: pointer; font-size: 13px;
  font-weight: 700; font-family: inherit; box-shadow: 0 1px 2px rgba(16,24,40,.08);
  transition: filter .15s ease, transform .05s ease;
}
.cm-ok:hover   { filter: brightness(.92); }
.cm-ok:active  { transform: translateY(1px); }
.cm-ok:focus-visible { outline: 2px solid color-mix(in srgb, var(--cm-ok-color, var(--primary)) 50%, #fff 50%); outline-offset: 2px; }