/* =====================================================================
   Kiteworks — Dialog system (brand confirm/action + install/success dialogs)
   ---------------------------------------------------------------------
   One base (.dlg) + intents:
     --info      logout / install   (primary confirm)
     --danger    uninstall          (danger confirm + "what happens" list)
     --upgrade   version upgrade    (version chips; breaking → warn + ack)
     --downgrade rollback           (version chips + caution callout + ack, gold)
     --success   install complete   (green orb + numbered "next steps")

   Also carries the install-flow "choice cards" (.dlg__choices/.dlg__choice).

   The shared confirm/action dialog markup lives in
   templates/components/_confirm_modal.html (driven by app.js + data-confirm-*);
   the install dialog is templates/components/_install_modal.html (driven by the
   generic modal opener in app.js). This fully supersedes the old modal.css
   (now removed) — both dialogs are on the .dlg base.

   Token-driven: every structural colour is a --kw-* token (tokens.css); the only
   literals are the same status tints used elsewhere in the rebrand
   (primitives.css .kw-pill / .kw-sev). The orb is self-contained here (there is
   no .icon-orb primitive). The .kw-btn-danger footer variant lives in button.css.
   Themed via html.dark (public) / html.light (admin).
   ===================================================================== */

/* ============================================================
   Backdrop + dialog shell
   ============================================================ */
.dlg-backdrop {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(5, 8, 33, 0.62);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.dlg-backdrop.is-open { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .dlg-backdrop.is-open { animation: dlg-fade 160ms ease-out; }
}
@keyframes dlg-fade { from { opacity: 0; } to { opacity: 1; } }

.dlg {
  position: relative; width: 100%; max-width: 460px;
  border-radius: var(--kw-radius-xl); padding: 26px;
}
/* Entrance animates TRANSFORM only — resting opacity stays 1 so the dialog is
   always visible (print, reduced-motion, and any paused-animation context).
   Same rule as the language picker panel — do NOT animate opacity 0→1 as the
   visibility mechanism. */
@media (prefers-reduced-motion: no-preference) {
  .dlg-backdrop.is-open .dlg { animation: dlg-rise 180ms cubic-bezier(0.2, 0.7, 0.3, 1) both; }
}
@keyframes dlg-rise { from { transform: translateY(10px) scale(0.99); } to { transform: none; } }
.dlg:focus { outline: none; }

html.light .dlg { background: #fff; border: 1px solid var(--kw-border-color); box-shadow: 0 30px 80px rgba(11, 14, 36, 0.30); }
html.dark .dlg {
  background: rgba(13, 15, 49, 0.96);
  border: 1px solid rgba(77, 96, 251, 0.30);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 55px rgba(197, 185, 246, 0.12);
  -webkit-backdrop-filter: blur(34px); backdrop-filter: blur(34px);
}

.dlg__close {
  position: absolute; top: 16px; inset-inline-end: 16px; width: 32px; height: 32px;
  display: grid; place-items: center; border: 0; border-radius: var(--kw-radius-sm);
  background: transparent; color: var(--kw-fg-subtle); cursor: pointer; transition: 150ms;
}
.dlg__close:hover { background: var(--kw-bg-subtle); color: var(--kw-fg); }
html.dark .dlg__close:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.dlg__close [data-lucide], .dlg__close svg { width: 18px; height: 18px; }

/* ============================================================
   Icon orb (self-contained — no .icon-orb primitive exists)
   Orb body stays brand glass/blue; glyph is white (or gold on light) per the
   brand icon rule. Danger/success use a tinted container + tinted glyph (a
   status orb, consistent with the rest of the rebrand's status tints).
   ============================================================ */
.dlg__orb {
  position: relative; width: 52px; height: 52px; margin-bottom: 16px;
  display: grid; place-items: center; overflow: hidden;
  border-radius: var(--kw-radius-md);
  background: var(--kw-glass-fill);
  border: 1px solid var(--kw-glass-stroke);
  color: #fff;
}
.dlg__orb::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, rgba(221, 214, 251, 0.45), rgba(221, 214, 251, 0));
}
.dlg__orb > * { position: relative; }  /* glyph rides above the sheen */
.dlg__orb [data-lucide], .dlg__orb svg { width: 26px; height: 26px; }
html.dark .dlg__orb { box-shadow: var(--kw-glow-glass); }
/* light/admin: solid brand blue with a white glyph (glass is too pale on white) */
html.light .dlg__orb { background: var(--kw-blue); border-color: var(--kw-blue); color: #fff; }
html.light .dlg__orb::before { background: linear-gradient(135deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0)); }

/* danger intent: red-tinted orb + red glyph */
.dlg--danger .dlg__orb { background: rgba(229, 69, 69, 0.16); border-color: rgba(229, 69, 69, 0.40); box-shadow: inset 0 0 22px rgba(229, 69, 69, 0.18); }
.dlg--danger .dlg__orb::before { background: linear-gradient(135deg, rgba(255, 170, 170, 0.5), rgba(255, 170, 170, 0)); }
.dlg--danger .dlg__orb > * { color: #FF8A8A; }
html.light .dlg--danger .dlg__orb { background: #FDECEC; border-color: #F4C4C4; box-shadow: none; }
html.light .dlg--danger .dlg__orb > * { color: #C23434; }

/* success intent: green-tinted orb + green glyph */
.dlg--success .dlg__orb { background: rgba(43, 182, 115, 0.16); border-color: rgba(43, 182, 115, 0.40); box-shadow: inset 0 0 22px rgba(43, 182, 115, 0.18); }
.dlg--success .dlg__orb::before { background: linear-gradient(135deg, rgba(125, 224, 176, 0.5), rgba(125, 224, 176, 0)); }
.dlg--success .dlg__orb > * { color: #43D693; }
html.light .dlg--success .dlg__orb { background: #E6F7EF; border-color: #B6E6CF; box-shadow: none; }
html.light .dlg--success .dlg__orb > * { color: #1B8E5A; }

/* ============================================================
   Title + body
   ============================================================ */
.dlg__title { font-size: 21px; font-weight: 700; line-height: 1.25; color: var(--kw-fg); margin: 0; letter-spacing: -0.015em; }
.dlg__body { font-size: 14px; line-height: 1.6; color: var(--kw-fg-muted); margin: 8px 0 0; }
.dlg__body strong { color: var(--kw-fg); font-weight: 600; }

/* ============================================================
   Version-transition meta (from → to mono chips)
   ============================================================ */
.dlg__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 12px 14px; border-radius: var(--kw-radius-md); background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); }
html.dark .dlg__meta { background: rgba(77, 96, 251, 0.08); border-color: var(--kw-glass-stroke); }
.dlg__ver { font-family: var(--kw-font-mono); font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: var(--kw-radius-sm); background: var(--kw-bg-elevated); border: 1px solid var(--kw-border-color); color: var(--kw-fg-muted); }
html.dark .dlg__ver { background: rgba(255, 255, 255, 0.04); }
.dlg__ver--to { color: var(--kw-fg); border-color: color-mix(in srgb, var(--kw-blue) 45%, var(--kw-border-color)); }
.dlg--upgrade .dlg__ver--to { color: #1B8E5A; border-color: #A9DEC2; background: #EAF8F1; }
html.dark .dlg--upgrade .dlg__ver--to { color: #43D693; background: rgba(43, 182, 115, 0.12); border-color: rgba(43, 182, 115, 0.4); }
.dlg--downgrade .dlg__ver--to { color: var(--kw-yellow-ink); border-color: #F6E0A0; background: #FEF6DC; }
html.dark .dlg--downgrade .dlg__ver--to { color: var(--kw-signal-gold); background: rgba(253, 202, 19, 0.10); border-color: rgba(253, 202, 19, 0.3); }
.dlg__meta [data-lucide], .dlg__meta svg { width: 16px; height: 16px; color: var(--kw-fg-subtle); }
.dlg__meta-label { font-family: var(--kw-font-mono); font-size: 11px; color: var(--kw-fg-subtle); margin-inline-end: auto; }

/* ============================================================
   "What happens" list (check / x bullets)
   ============================================================ */
.dlg__list { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.dlg__list li { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--kw-fg-muted); }
.dlg__list [data-lucide], .dlg__list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--kw-fg-subtle); }
.dlg__list .ok [data-lucide], .dlg__list .ok svg { color: var(--kw-teal); }
.dlg__list .no [data-lucide], .dlg__list .no svg { color: var(--kw-red); }

/* ============================================================
   Breaking-change / caution callout
   ============================================================ */
.dlg__callout { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--kw-radius-md); font-size: 13px; line-height: 1.5; border: 1px solid; }
.dlg__callout [data-lucide], .dlg__callout svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.dlg__callout strong { font-weight: 700; }
.dlg__callout--warn { background: #FEF6DC; border-color: #F6E0A0; color: var(--kw-yellow-ink); }
html.dark .dlg__callout--warn { background: rgba(253, 202, 19, 0.10); border-color: rgba(253, 202, 19, 0.3); color: var(--kw-signal-gold); }
.dlg__callout--warn [data-lucide], .dlg__callout--warn svg { color: var(--kw-signal-gold); }
.dlg__callout--danger { background: #FDECEC; border-color: #F4C4C4; color: #C23434; }
html.dark .dlg__callout--danger { background: rgba(229, 69, 69, 0.12); border-color: rgba(229, 69, 69, 0.34); color: #FF8A8A; }
.dlg__callout--danger [data-lucide], .dlg__callout--danger svg { color: var(--kw-red); }
.dlg__callout a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ============================================================
   Confirm-to-proceed checkbox (breaking upgrade / downgrade)
   ============================================================ */
.dlg__ack { display: flex; align-items: flex-start; gap: 9px; margin-top: 14px; font-size: 13px; color: var(--kw-fg); cursor: pointer; }
.dlg__ack input { margin-top: 2px; width: 16px; height: 16px; accent-color: var(--kw-blue); flex-shrink: 0; }

/* Tailwind's reset defines [hidden] via :where() (0 specificity), so the slot
   display: rules above outrank the hidden="" attribute and unused slots render
   as empty boxes. Force the hidden attribute to win for these optional slots. */
.dlg__meta[hidden],
.dlg__list[hidden],
.dlg__callout[hidden],
.dlg__ack[hidden],
.dlg__choices[hidden] { display: none !important; }

/* ============================================================
   Install: radio "choice cards" (pick visibility)
   ============================================================ */
.dlg__choices { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; border: 0; padding: 0; }
.dlg__choice { display: flex; gap: 11px; align-items: flex-start; padding: 12px 13px; border-radius: var(--kw-radius-md); border: 1px solid var(--kw-border-color); cursor: pointer; transition: 140ms; }
html.dark .dlg__choice { border-color: var(--kw-glass-stroke); }
.dlg__choice:hover { background: var(--kw-bg-subtle); }
html.dark .dlg__choice:hover { background: rgba(77, 96, 251, 0.08); }
.dlg__choice:has(input:checked) { border-color: var(--kw-blue); background: color-mix(in srgb, var(--kw-blue) 7%, transparent); }
html.dark .dlg__choice:has(input:checked) { border-color: rgba(77, 96, 251, 0.6); background: rgba(77, 96, 251, 0.12); }
.dlg__choice input { margin-top: 2px; width: 17px; height: 17px; accent-color: var(--kw-blue); flex-shrink: 0; }
.dlg__choice-ico { width: 34px; height: 34px; border-radius: var(--kw-radius-sm); display: grid; place-items: center; flex-shrink: 0; background: var(--kw-bg-subtle); color: var(--kw-fg-muted); }
html.dark .dlg__choice-ico { background: rgba(77, 96, 251, 0.12); color: var(--kw-soft-lavender); }
.dlg__choice-ico [data-lucide], .dlg__choice-ico svg { width: 17px; height: 17px; }
.dlg__choice-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dlg__choice-title { font-size: 14px; font-weight: 600; color: var(--kw-fg); }
.dlg__choice-hint { font-size: 12.5px; color: var(--kw-fg-subtle); line-height: 1.4; }

/* ============================================================
   "Next steps" rows (install-success dialog)
   ============================================================ */
.dlg__next { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dlg__next li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--kw-radius-md); background: var(--kw-bg-subtle); border: 1px solid var(--kw-border-color); }
html.dark .dlg__next li { background: rgba(77, 96, 251, 0.06); border-color: var(--kw-glass-stroke); }
.dlg__next .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; font-family: var(--kw-font-mono); font-size: 12px; font-weight: 600; background: var(--kw-blue); color: #fff; }
.dlg__next-txt { font-size: 13px; color: var(--kw-fg-muted); line-height: 1.45; }
.dlg__next-txt strong { color: var(--kw-fg); font-weight: 600; }
.dlg__next code { font-family: var(--kw-font-mono); font-size: 12px; background: var(--kw-bg-elevated); border: 1px solid var(--kw-border-color); padding: 1px 6px; border-radius: 4px; color: var(--kw-fg); }
html.dark .dlg__next code { background: var(--kw-deep-space); color: var(--kw-soft-lavender); border-color: var(--kw-glass-stroke); }

/* ============================================================
   Footer — uses the global .kw-btn-* variants (button.css). Override their
   block width so two actions sit inline; collapse to stacked on narrow screens.
   ============================================================ */
.dlg__footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.dlg__footer .kw-btn-primary,
.dlg__footer .kw-btn-secondary,
.dlg__footer .kw-btn-gold,
.dlg__footer .kw-btn-danger {
  width: auto; min-width: 0; font-size: 14px; padding: 10px 16px;
}
.dlg__footer .kw-btn-primary[disabled],
.dlg__footer .kw-btn-gold[disabled],
.dlg__footer .kw-btn-danger[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
@media (max-width: 480px) {
  .dlg__footer { flex-direction: column-reverse; }
  .dlg__footer .kw-btn-primary,
  .dlg__footer .kw-btn-secondary,
  .dlg__footer .kw-btn-gold,
  .dlg__footer .kw-btn-danger { width: 100%; justify-content: center; }
}

/* Clickwrap disclaimer block (LEGAL-DISCLAIMER §4.5). Rendered inside the
   install/deploy modal between the meta row and the footer. */
.dlg__legal {
  margin: 14px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dlg__legal-scroll {
  max-height: 14rem;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--kw-border, rgba(255, 255, 255, 0.16));
  border-radius: 8px;
  background: var(--kw-surface-2, rgba(255, 255, 255, 0.04));
  font-size: 13px;
  line-height: 1.5;
}
.dlg__legal-scroll p { margin: 0 0 8px; }
.dlg__legal-scroll p:last-child { margin-bottom: 0; }
.dlg__legal-scroll:focus-visible { outline: 2px solid var(--kw-blue, #4f7cff); outline-offset: 2px; }
.dlg__legal-meta {
  font-family: var(--kw-font-mono);
  font-size: 11px;
  color: var(--kw-fg-subtle);
}
.dlg__legal-ack {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13px;
  cursor: pointer;
}
.dlg__legal-ack input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  accent-color: var(--kw-blue, #4f7cff);
}
.dlg__legal-submit-pending { opacity: 0.55; }

/* Public read-only disclosure page (/legal/agent-disclaimer). */
.kw-legal-page { max-width: 720px; margin: 0 auto; padding: 8px 0 48px; }
.kw-legal-page__meta {
  font-family: var(--kw-font-mono);
  font-size: 12px;
  color: var(--kw-fg-subtle);
  margin: 4px 0 20px;
}
.kw-legal-page__body p { margin: 0 0 14px; line-height: 1.6; }
.kw-legal-page__ack {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--kw-border, rgba(255, 255, 255, 0.16));
  font-style: italic;
  color: var(--kw-fg-subtle);
}