/**
 * customConfirmAlert — styles
 * -----------------------------------------------------------------------------
 * Every meaningful value is a CSS custom property so projects can theme without
 * touching JS. Override on :root, a wrapper, or per-dialog via `className`.
 * No dependency on Bootstrap / Tailwind / Material / any design system.
 */

:root {
  --custom-dialog-font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --custom-dialog-backdrop: rgb(0 0 0 / 0.5);
  --custom-dialog-background: #ffffff;
  --custom-dialog-text: #172033;
  --custom-dialog-muted-text: #667085;
  --custom-dialog-border: #e4e7ec;
  --custom-dialog-border-radius: 14px;
  --custom-dialog-shadow: 0 24px 70px rgb(0 0 0 / 0.25);
  --custom-dialog-primary: #2563eb;
  --custom-dialog-primary-text: #ffffff;
  --custom-dialog-danger: #dc2626;
  --custom-dialog-warning: #d97706;
  --custom-dialog-success: #15803d;
  --custom-dialog-info: #2563eb;
  --custom-dialog-focus-ring: #3b82f6;
  --custom-dialog-max-width: 32rem;
  --custom-dialog-z-index: 10000;

  --custom-dialog-padding: 1.5rem;
  --custom-dialog-gap: 0.75rem;
  --custom-dialog-btn-radius: 9px;
  --custom-dialog-input-bg: #ffffff;
  --custom-dialog-input-border: #cbd2dc;
  --custom-dialog-error-text: #b42318;
  --custom-dialog-neutral-btn-bg: #f2f4f7;
  --custom-dialog-neutral-btn-text: #344054;
  --custom-dialog-anim-duration: 160ms;
}

/* Automatic dark mode (only when a project hasn't forced a scheme). */
@media (prefers-color-scheme: dark) {
  :root {
    --custom-dialog-backdrop: rgb(0 0 0 / 0.65);
    --custom-dialog-background: #1d2433;
    --custom-dialog-text: #f3f6fb;
    --custom-dialog-muted-text: #98a2b3;
    --custom-dialog-border: #344054;
    --custom-dialog-shadow: 0 24px 70px rgb(0 0 0 / 0.55);
    --custom-dialog-input-bg: #141a26;
    --custom-dialog-input-border: #475467;
    --custom-dialog-neutral-btn-bg: #2a3344;
    --custom-dialog-neutral-btn-text: #e4e7ec;
    --custom-dialog-error-text: #fda29b;
  }
}

/* Opt-in explicit themes (override prefers-color-scheme). */
[data-cd-theme='light'] {
  --custom-dialog-background: #ffffff;
  --custom-dialog-text: #172033;
  --custom-dialog-muted-text: #667085;
  --custom-dialog-border: #e4e7ec;
  --custom-dialog-input-bg: #ffffff;
  --custom-dialog-input-border: #cbd2dc;
  --custom-dialog-neutral-btn-bg: #f2f4f7;
  --custom-dialog-neutral-btn-text: #344054;
  --custom-dialog-error-text: #b42318;
}
[data-cd-theme='dark'] {
  --custom-dialog-backdrop: rgb(0 0 0 / 0.65);
  --custom-dialog-background: #1d2433;
  --custom-dialog-text: #f3f6fb;
  --custom-dialog-muted-text: #98a2b3;
  --custom-dialog-border: #344054;
  --custom-dialog-shadow: 0 24px 70px rgb(0 0 0 / 0.55);
  --custom-dialog-input-bg: #141a26;
  --custom-dialog-input-border: #475467;
  --custom-dialog-neutral-btn-bg: #2a3344;
  --custom-dialog-neutral-btn-text: #e4e7ec;
  --custom-dialog-error-text: #fda29b;
}

/* --- Root / backdrop -------------------------------------------------------- */
.cd-root {
  position: fixed;
  inset: 0;
  z-index: var(--custom-dialog-z-index);
  font-family: var(--custom-dialog-font-family);
}
.cd-root[hidden] {
  display: none;
}

.cd-backdrop {
  position: fixed;
  inset: 0;
  background: var(--custom-dialog-backdrop);
  animation: cd-fade var(--custom-dialog-anim-duration) ease-out;
}

.cd-viewport {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Keep clear of the on-screen keyboard / notches on mobile. */
  padding: max(1rem, env(safe-area-inset-top))
           max(1rem, env(safe-area-inset-right))
           max(1rem, env(safe-area-inset-bottom))
           max(1rem, env(safe-area-inset-left));
  overflow-y: auto;
}

/* --- Dialog ----------------------------------------------------------------- */
.cd-dialog {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 1rem;
  width: 100%;
  max-width: var(--custom-dialog-max-width);
  margin: auto;
  padding: var(--custom-dialog-padding);
  background: var(--custom-dialog-background);
  color: var(--custom-dialog-text);
  border-radius: var(--custom-dialog-border-radius);
  box-shadow: var(--custom-dialog-shadow);
  box-sizing: border-box;
  animation: cd-pop var(--custom-dialog-anim-duration) cubic-bezier(0.16, 1, 0.3, 1);
}
.cd-dialog:focus {
  outline: none;
}

.cd-icon {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: var(--custom-dialog-info);
}
.cd-icon > svg {
  width: 1.75rem;
  height: 1.75rem;
}
.cd-variant-success .cd-icon { color: var(--custom-dialog-success); }
.cd-variant-warning .cd-icon { color: var(--custom-dialog-warning); }
.cd-variant-danger  .cd-icon { color: var(--custom-dialog-danger); }
.cd-variant-info    .cd-icon { color: var(--custom-dialog-info); }

/* When the icon is hidden, let content span the full width. */
.cd-dialog > .cd-content:first-child,
.cd-dialog > .cd-content:nth-child(1):last-of-type {
  grid-column: 1 / -1;
}
.cd-dialog:not(:has(.cd-icon)) .cd-content {
  grid-column: 1 / -1;
}

.cd-content {
  grid-column: 2;
  min-width: 0; /* allow text to wrap inside the grid */
}

.cd-title {
  margin: 0 0 0.35rem;
  font-size: 1.125rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--custom-dialog-text);
  overflow-wrap: anywhere;
}

.cd-message {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--custom-dialog-muted-text);
  overflow-wrap: anywhere;
}
.cd-message p { margin: 0 0 0.5rem; }
.cd-message p:last-child { margin-bottom: 0; }

/* --- Prompt input ----------------------------------------------------------- */
.cd-field {
  margin-top: 1rem;
}
.cd-input-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.85rem;
  font-weight: 550;
  color: var(--custom-dialog-text);
}
.cd-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 0.7rem;
  font: inherit;
  font-size: 1rem; /* >=16px avoids iOS zoom-on-focus */
  color: var(--custom-dialog-text);
  background: var(--custom-dialog-input-bg);
  border: 1px solid var(--custom-dialog-input-border);
  border-radius: var(--custom-dialog-btn-radius);
}
.cd-input:focus-visible {
  outline: 2px solid var(--custom-dialog-focus-ring);
  outline-offset: 1px;
  border-color: var(--custom-dialog-focus-ring);
}

/* --- Error ------------------------------------------------------------------ */
.cd-error {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--custom-dialog-error-text);
  overflow-wrap: anywhere;
}
.cd-error[hidden] { display: none; }

/* --- Close (x) -------------------------------------------------------------- */
.cd-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--custom-dialog-muted-text);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.cd-close:hover { background: var(--custom-dialog-neutral-btn-bg); }
.cd-close:focus-visible {
  outline: 2px solid var(--custom-dialog-focus-ring);
  outline-offset: 1px;
}
.cd-close[disabled] { opacity: 0.5; cursor: default; }

/* --- Footer / buttons ------------------------------------------------------- */
.cd-footer {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--custom-dialog-gap);
  margin-top: 1.5rem;
}

.cd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 5.5rem;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  border-radius: var(--custom-dialog-btn-radius);
  cursor: pointer;
  transition: filter var(--custom-dialog-anim-duration) ease,
              background-color var(--custom-dialog-anim-duration) ease;
}
.cd-btn:focus-visible {
  outline: 2px solid var(--custom-dialog-focus-ring);
  outline-offset: 2px;
}
.cd-btn[disabled] {
  cursor: default;
  opacity: 0.7;
}

.cd-btn-cancel {
  background: var(--custom-dialog-neutral-btn-bg);
  color: var(--custom-dialog-neutral-btn-text);
}
.cd-btn-cancel:not([disabled]):hover { filter: brightness(0.96); }

.cd-btn-confirm { color: var(--custom-dialog-primary-text); }
.cd-btn-confirm:not([disabled]):hover { filter: brightness(1.06); }

.cd-btn-info,
.cd-btn-confirm { background: var(--custom-dialog-primary); }
.cd-btn-success { background: var(--custom-dialog-success); }
.cd-btn-warning { background: var(--custom-dialog-warning); }
.cd-btn-danger  { background: var(--custom-dialog-danger); }

/* --- Choice (customChoice) button variants ---------------------------------
   Multi-button dialogs reuse the dialog tokens. primary → filled accent,
   danger → filled danger, neutral/secondary → the muted (cancel-like) style. */
.cd-btn-primary {
  color: var(--custom-dialog-primary-text);
  background: var(--custom-dialog-primary);
}
.cd-btn-primary:not([disabled]):hover { filter: brightness(1.06); }

/* Choice danger buttons are filled, so they need light text (the confirm
   variant gets this via .cd-btn-confirm; standalone .cd-btn-danger needs it). */
.cd-btn-danger { color: var(--custom-dialog-primary-text); }
.cd-btn-danger:not([disabled]):hover { filter: brightness(1.06); }

.cd-btn-neutral,
.cd-btn-secondary {
  background: var(--custom-dialog-neutral-btn-bg);
  color: var(--custom-dialog-neutral-btn-text);
}
.cd-btn-neutral:not([disabled]):hover,
.cd-btn-secondary:not([disabled]):hover { filter: brightness(0.96); }

/* --- Spinner / loading ------------------------------------------------------ */
.cd-spinner {
  animation: cd-spin 0.7s linear infinite;
}
.cd-spinner circle {
  stroke: currentColor;
  stroke-dasharray: 42;
  stroke-dashoffset: 14;
  stroke-linecap: round;
  opacity: 0.85;
}
.cd-is-loading { cursor: progress; }

/* --- Utilities -------------------------------------------------------------- */
.cd-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* --- Animations ------------------------------------------------------------- */
@keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cd-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes cd-spin { to { transform: rotate(360deg); } }

/* Respect reduced-motion: no entrance animation or spinner rotation. */
@media (prefers-reduced-motion: reduce) {
  .cd-backdrop,
  .cd-dialog,
  .cd-spinner {
    animation: none !important;
  }
  .cd-btn { transition: none; }
}

/* High-contrast / forced-colors: ensure visible structure and focus. */
@media (forced-colors: active) {
  .cd-dialog {
    border: 1px solid CanvasText;
  }
  .cd-btn {
    border: 1px solid ButtonText;
  }
  .cd-btn:focus-visible,
  .cd-input:focus-visible,
  .cd-close:focus-visible {
    outline: 2px solid Highlight;
  }
}

/* --- Small screens ---------------------------------------------------------- */
@media (max-width: 480px) {
  .cd-viewport {
    align-items: flex-end;
  }
  .cd-dialog {
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .cd-footer {
    flex-direction: column-reverse;
  }
  .cd-btn {
    width: 100%;
  }
}

/* ===========================================================================
   TOAST NOTIFICATIONS
   Non-modal, non-blocking feedback. Shares the dialog design tokens; adds
   toast-specific tokens. Containers are click-through (pointer-events: none);
   individual cards are interactive (pointer-events: auto).
   =========================================================================== */

:root {
  --custom-toast-width: 22rem;
  --custom-toast-max-width: calc(100vw - 2rem);
  --custom-toast-gap: 0.75rem;
  --custom-toast-edge-offset: 1rem;
  --custom-toast-padding: 1rem;
  --custom-toast-border-radius: 12px;
  --custom-toast-background: var(--custom-dialog-background);
  --custom-toast-text: var(--custom-dialog-text);
  --custom-toast-muted-text: var(--custom-dialog-muted-text);
  --custom-toast-border: var(--custom-dialog-border);
  --custom-toast-shadow: var(--custom-dialog-shadow);
  --custom-toast-z-index: 11000;
  --custom-toast-close-size: 2rem;
  --custom-toast-animation-duration: 220ms;
  --custom-toast-progress-height: 3px;
  --custom-toast-error-text: var(--custom-dialog-error-text);
}

/* --- Containers (one per active position, created lazily) ------------------ */
.ct-container {
  position: fixed;
  z-index: var(--custom-toast-z-index);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(var(--custom-toast-width), var(--custom-toast-max-width));
  max-width: var(--custom-toast-max-width);
  /* Empty areas must not block the page. */
  pointer-events: none;
  font-family: var(--custom-dialog-font-family);
}

/* Position anchors honour mobile safe-area insets (notches, home indicator). */
.ct-pos-top-left {
  top: calc(env(safe-area-inset-top) + var(--custom-toast-edge-offset));
  left: calc(env(safe-area-inset-left) + var(--custom-toast-edge-offset));
  align-items: flex-start;
}
.ct-pos-top-right {
  top: calc(env(safe-area-inset-top) + var(--custom-toast-edge-offset));
  right: calc(env(safe-area-inset-right) + var(--custom-toast-edge-offset));
  align-items: flex-end;
}
.ct-pos-top-center {
  top: calc(env(safe-area-inset-top) + var(--custom-toast-edge-offset));
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.ct-pos-bottom-left {
  bottom: calc(env(safe-area-inset-bottom) + var(--custom-toast-edge-offset));
  left: calc(env(safe-area-inset-left) + var(--custom-toast-edge-offset));
  align-items: flex-start;
}
.ct-pos-bottom-right {
  bottom: calc(env(safe-area-inset-bottom) + var(--custom-toast-edge-offset));
  right: calc(env(safe-area-inset-right) + var(--custom-toast-edge-offset));
  align-items: flex-end;
}
.ct-pos-bottom-center {
  bottom: calc(env(safe-area-inset-bottom) + var(--custom-toast-edge-offset));
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

/* --- Toast card ------------------------------------------------------------ */
.ct-toast {
  pointer-events: auto;
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 0.75rem;
  width: 100%;
  max-height: min(calc(100vh - 2rem), 80vh);
  margin-bottom: var(--custom-toast-gap);
  padding: var(--custom-toast-padding);
  background: var(--custom-toast-background);
  color: var(--custom-toast-text);
  border: 1px solid var(--custom-toast-border);
  border-left: 4px solid var(--ct-accent, var(--custom-dialog-primary));
  border-radius: var(--custom-toast-border-radius);
  box-shadow: var(--custom-toast-shadow);
  /* Animate only transform/opacity (+ collapse on exit) — no layout thrash. */
  transition:
    transform var(--custom-toast-animation-duration) cubic-bezier(0.16, 1, 0.3, 1),
    opacity var(--custom-toast-animation-duration) ease,
    max-height var(--custom-toast-animation-duration) ease,
    margin var(--custom-toast-animation-duration) ease;
  will-change: transform, opacity;
  /* Let the browser keep vertical scrolling; we own horizontal swipes. */
  touch-action: pan-y;
}

/* Variant accents reuse the shared dialog colours. */
.ct-variant-info    { --ct-accent: var(--custom-dialog-info, var(--custom-dialog-primary)); }
.ct-variant-success { --ct-accent: var(--custom-dialog-success); }
.ct-variant-warning { --ct-accent: var(--custom-dialog-warning); }
.ct-variant-danger  { --ct-accent: var(--custom-dialog-danger); }
.ct-variant-neutral { --ct-accent: var(--custom-toast-muted-text); }

.ct-icon {
  display: flex;
  color: var(--ct-accent, var(--custom-dialog-primary));
}
.ct-icon > svg { width: 1.4rem; height: 1.4rem; }

.ct-content {
  grid-column: 2;
  min-width: 0;
  overflow-y: auto;
}
.ct-title {
  font-size: 0.95rem;
  font-weight: 650;
  line-height: 1.35;
  color: var(--custom-toast-text);
  overflow-wrap: anywhere;
}
.ct-title[hidden] { display: none; }
.ct-message {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--custom-toast-muted-text);
  overflow-wrap: anywhere;
}
.ct-message[hidden] { display: none; }
.ct-title + .ct-message { margin-top: 0.15rem; }

.ct-error {
  margin-top: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--custom-toast-error-text);
  overflow-wrap: anywhere;
}
.ct-error[hidden] { display: none; }

/* --- Action button --------------------------------------------------------- */
.ct-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.ct-actions[hidden] { display: none; }
.ct-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  color: var(--ct-accent, var(--custom-dialog-primary));
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 8px;
  cursor: pointer;
  min-height: 2rem;
}
.ct-action:not([disabled]):hover { filter: brightness(1.1); background: color-mix(in srgb, var(--ct-accent) 10%, transparent); }
.ct-action[disabled] { opacity: 0.7; cursor: default; }
.ct-action:focus-visible {
  outline: 2px solid var(--custom-dialog-focus-ring);
  outline-offset: 2px;
}

/* --- Close button ---------------------------------------------------------- */
.ct-close {
  grid-column: 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  min-width: 1.9rem;
  margin: -0.25rem -0.25rem 0 0;
  padding: 0;
  color: var(--custom-toast-muted-text);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
}
.ct-close[hidden] { display: none; }
.ct-close:hover { background: color-mix(in srgb, var(--custom-toast-muted-text) 15%, transparent); }
.ct-close:focus-visible {
  outline: 2px solid var(--custom-dialog-focus-ring);
  outline-offset: 1px;
}
.ct-close[disabled] { opacity: 0.5; cursor: default; }

/* --- Progress indicator ---------------------------------------------------- */
.ct-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--custom-toast-progress-height);
  border-bottom-left-radius: var(--custom-toast-border-radius);
  border-bottom-right-radius: var(--custom-toast-border-radius);
  overflow: hidden;
  pointer-events: none;
}
.ct-progress[hidden] { display: none; }
.ct-progress-bar {
  width: 100%;
  height: 100%;
  background: var(--ct-accent, var(--custom-dialog-primary));
  transform-origin: left center;
  transform: scaleX(1);
}

/* --- Spinner (reuses the dialog spinner animation) ------------------------- */
.ct-action .cd-spinner circle {
  stroke: currentColor;
  stroke-dasharray: 42;
  stroke-dashoffset: 14;
  stroke-linecap: round;
}

/* --- Enter / exit animation states ---------------------------------------- */
.ct-from-slide-down  { transform: translateY(-24px); opacity: 0; }
.ct-from-slide-up    { transform: translateY(24px);  opacity: 0; }
.ct-from-slide-left  { transform: translateX(24px);  opacity: 0; } /* enters from the right */
.ct-from-slide-right { transform: translateX(-24px); opacity: 0; } /* enters from the left */
.ct-from-fade        { opacity: 0; }
.ct-from-scale       { transform: scale(0.9); opacity: 0; }

.ct-leaving { overflow: hidden; }
.ct-out-slide-up    { transform: translateY(-24px) !important; opacity: 0 !important; }
.ct-out-slide-down  { transform: translateY(24px)  !important; opacity: 0 !important; }
.ct-out-slide-left  { transform: translateX(-110%) !important; opacity: 0 !important; }
.ct-out-slide-right { transform: translateX(110%)  !important; opacity: 0 !important; }
.ct-out-fade        { opacity: 0 !important; }
.ct-out-scale       { transform: scale(0.9) !important; opacity: 0 !important; }

/* --- Swipe interaction states --------------------------------------------- */
.ct-toast.ct-swiping { transition: none; cursor: grabbing; user-select: none; }
.ct-toast.ct-snap-back { transition: transform 180ms ease, opacity 180ms ease; }

/* --- Reduced motion: opacity-only, no movement ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ct-toast {
    transition: opacity 1ms linear, max-height 1ms linear, margin 1ms linear !important;
  }
  .ct-from-slide-down, .ct-from-slide-up, .ct-from-slide-left, .ct-from-slide-right,
  .ct-out-slide-up, .ct-out-slide-down, .ct-out-slide-left, .ct-out-slide-right,
  .ct-from-scale, .ct-out-scale {
    transform: none !important;
  }
  .ct-progress-bar { transition: none !important; }
  .ct-toast.ct-snap-back { transition: none; }
}

/* --- High-contrast / forced-colors ---------------------------------------- */
@media (forced-colors: active) {
  .ct-toast { border: 1px solid CanvasText; }
  .ct-action, .ct-close { border: 1px solid ButtonText; }
  .ct-action:focus-visible, .ct-close:focus-visible { outline: 2px solid Highlight; }
  .ct-progress-bar { background: Highlight; }
}

/* --- Mobile: comfortable full-width sheets --------------------------------- */
@media (max-width: 480px) {
  .ct-container {
    width: auto;
    max-width: none;
    left: calc(env(safe-area-inset-left) + 0.5rem) !important;
    right: calc(env(safe-area-inset-right) + 0.5rem) !important;
    transform: none !important;
    align-items: stretch;
  }
  .ct-toast { max-height: min(calc(100vh - 1.5rem), 70vh); }
}