/* Solis.BackOffice.Portal — shared confirm/alert modal ("SolisDialog"). Pairs 1:1 with
   ts/widgets/solisDialog.ts, which creates/removes this markup at runtime — same lazy-init
   pattern as solis-loader-overlay.css/loaderOverlay.ts. Depends on solis-tokens.css being loaded
   first.

   Buttons reuse .solis-btn/.solis-btn--primary/.solis-btn--ghost, currently only defined in
   solis-auth.css: fine while every SolisDialog call site is an auth screen, but the day a
   non-auth screen calls SolisDialog first, those button classes need to move somewhere both
   layouts load — flagging now so it isn't a surprise later, not fixing it speculatively today. */

/* The backdrop every modal here sits on — this dialog, and the QR viewer. Defined in this sheet
   because both layouts load it on every page; the two modals share the look, not the behaviour. */
.solis-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--solis-scrim);
  padding: var(--solis-space-4xl);
  box-sizing: border-box;
}

.solis-modal-overlay--visible {
  display: flex;
  animation: solis-modal-fade-in 0.15s ease;
}

@keyframes solis-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.solis-dialog {
  width: 100%;
  max-width: 400px;
  background: var(--solis-surface);
  border: 1px solid var(--solis-border);
  border-radius: var(--solis-radius-lg, var(--solis-radius-md));
  box-shadow: var(--solis-shadow-modal);
  overflow: hidden;
  animation: solis-dialog-slide-up 0.18s ease;
}

@keyframes solis-dialog-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Backdrop click doesn't dismiss (see solisDialog.ts's top comment — button-only, deliberately) —
   this is the "still there, pick an option" nudge instead of the click silently doing nothing.
   See docs/decisions/ui-feedback-animations.md. */
.solis-dialog--shake {
  animation: solis-dialog-shake 0.35s ease;
}

@keyframes solis-dialog-shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.solis-dialog__header {
  padding: var(--solis-space-4xl) var(--solis-space-4xl) 0;
  display: flex;
  gap: var(--solis-space-xl);
  align-items: flex-start;
}

.solis-dialog__icon-wrap {
  width: 40px;
  height: 40px;
  border-radius: var(--solis-radius-md);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--solis-fs-3xl);
}

.solis-dialog__icon-wrap--info {
  background: var(--solis-surface-muted);
  color: var(--solis-accent-500);
  border: 1px solid var(--solis-accent-400);
}

.solis-dialog__icon-wrap--success {
  background: var(--solis-success-bg);
  color: var(--solis-success-500);
  border: 1px solid var(--solis-success-border);
}

.solis-dialog__icon-wrap--error {
  background: var(--solis-danger-bg);
  color: var(--solis-danger-500);
  border: 1px solid var(--solis-danger-border);
}

/* A confirm's icon wears its button's tint: Reject Request rose, Return Request violet. */
.solis-dialog__icon-wrap--rose {
  background: var(--solis-ic-rose-bg);
  color: var(--solis-rose-ink);
  border: 1px solid var(--solis-ic-rose);
}

.solis-dialog__icon-wrap--violet {
  background: var(--solis-ic-violet-bg);
  color: var(--solis-violet-ink);
  border: 1px solid var(--solis-ic-violet);
}

.solis-dialog__heading {
  flex: 1;
  min-width: 0;
}

.solis-dialog__title {
  font-size: var(--solis-fs-xl);
  font-weight: 700;
  color: var(--solis-text-primary);
  margin: 0;
  line-height: 1.3;
}

.solis-dialog__message {
  font-size: var(--solis-fs-md);
  color: var(--solis-text-secondary);
  margin-top: var(--solis-space-2xs);
  line-height: 1.55;

  /* A confirmation that names accounts and amounts needs them on their own lines; prose is
     unaffected, since a message with no newline wraps exactly as before. */
  white-space: pre-line;
}

/* Values the dialog hands over (a secret shown once): label over the value, Copy at the end. */
.solis-dialog__fields {
  display: grid;
  gap: var(--solis-space-md);
  margin-top: var(--solis-space-xl);
}

.solis-dialog__field {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--solis-space-2xs) var(--solis-space-md);
}

.solis-dialog__field-label {
  grid-column: 1 / -1;
  font-size: var(--solis-fs-xs);
  font-weight: 600;
  color: var(--solis-text-muted);
}

.solis-dialog__field-value {
  min-width: 0;
  padding: var(--solis-space-sm) var(--solis-space-md);
  border: 1px solid var(--solis-border);
  border-radius: var(--solis-radius-sm);
  background: var(--solis-surface-muted);
  font-family: var(--solis-mono);
  font-size: var(--solis-fs-sm);
  color: var(--solis-text-primary);
  overflow-wrap: anywhere;
  user-select: all;
}

.solis-dialog__actions {
  padding: var(--solis-space-2xl) var(--solis-space-4xl) var(--solis-space-4xl);
  display: flex;
  gap: var(--solis-space-md);
}

/* confirm() has two buttons that should split the row evenly; alert()'s lone "Ok" stretching to
   the same full width reads oddly (nothing to balance against) — cap and center it instead. */
.solis-dialog__actions .solis-btn:not(:only-child) {
  flex: 1;
}

.solis-dialog__actions .solis-btn:only-child {
  flex: none;
  min-width: 120px;
  margin: 0 auto;
}

@media (prefers-reduced-motion: reduce) {
  .solis-modal-overlay,
  .solis-dialog,
  .solis-dialog--shake { animation: none; }
}