/* Dialogues / toasts modernes (remplace alert & confirm navigateur) */

.app-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: none;
  place-items: center;
  padding: 1rem;
  background:
    radial-gradient(120% 80% at 10% 0%, rgba(15, 118, 110, 0.18), transparent 50%),
    rgba(8, 16, 24, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: app-dialog-fade .18s ease both;
}

.app-dialog-backdrop.open {
  display: grid;
}

.app-dialog {
  width: min(420px, 100%);
  border-radius: 20px;
  overflow: hidden;
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--surface, #fff) 92%, #0f766e 8%), var(--surface, #fff));
  border: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 80%, #0f766e 20%);
  box-shadow:
    0 24px 60px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  animation: app-dialog-pop .22s cubic-bezier(.2, .9, .25, 1) both;
}

.app-dialog-head {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: 1.15rem 1.2rem .85rem;
}

.app-dialog-badge {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: #fff;
  flex: 0 0 auto;
  background: linear-gradient(145deg, #0f766e, #115e59);
  box-shadow: 0 10px 22px rgba(15, 118, 110, 0.35);
}

.app-dialog-backdrop[data-dialog-type="success"] .app-dialog-badge {
  background: linear-gradient(145deg, #059669, #047857);
  box-shadow: 0 10px 22px rgba(5, 150, 105, 0.35);
}

.app-dialog-backdrop[data-dialog-type="error"] .app-dialog-badge {
  background: linear-gradient(145deg, #dc2626, #b91c1c);
  box-shadow: 0 10px 22px rgba(220, 38, 38, 0.35);
}

.app-dialog-backdrop[data-dialog-type="warning"],
.app-dialog-backdrop[data-dialog-type="confirm"] {
  /* keep teal/amber accents */
}

.app-dialog-backdrop[data-dialog-type="warning"] .app-dialog-badge,
.app-dialog-backdrop[data-dialog-type="confirm"] .app-dialog-badge {
  background: linear-gradient(145deg, #d97706, #b45309);
  box-shadow: 0 10px 22px rgba(217, 119, 6, 0.35);
}

.app-dialog-titles h2 {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text, #0f172a);
}

.app-dialog-body {
  padding: 0 1.2rem 1rem;
}

.app-dialog-body p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text-muted, #475569);
  white-space: pre-wrap;
  word-break: break-word;
}

.app-dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  padding: .85rem 1.2rem 1.15rem;
  border-top: 1px solid color-mix(in srgb, var(--border, #e2e8f0) 85%, transparent);
  background: color-mix(in srgb, var(--surface, #fff) 88%, #0f172a 4%);
}

.app-dialog-foot .btn {
  min-width: 5.5rem;
}

/* Toasts */
.app-toast-host {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 12100;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  width: min(380px, calc(100vw - 1.5rem));
  pointer-events: none;
}

.app-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .7rem;
  align-items: start;
  padding: .85rem .9rem;
  border-radius: 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  transition: opacity .22s ease, transform .22s ease;
}

.app-toast.is-in {
  opacity: 1;
  transform: none;
}

.app-toast.is-out {
  opacity: 0;
  transform: translateY(-6px) scale(.98);
}

.app-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #0f766e, #115e59);
}

.app-toast-success .app-toast-icon {
  background: linear-gradient(145deg, #059669, #047857);
}

.app-toast-error .app-toast-icon {
  background: linear-gradient(145deg, #dc2626, #b91c1c);
}

.app-toast-warning .app-toast-icon {
  background: linear-gradient(145deg, #d97706, #b45309);
}

.app-toast-body strong {
  display: block;
  font-size: .82rem;
  margin-bottom: .15rem;
}

.app-toast-body p {
  margin: 0;
  font-size: .86rem;
  line-height: 1.4;
  color: var(--text-muted, #475569);
  white-space: pre-wrap;
  word-break: break-word;
}

.app-toast-close {
  border: 0;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 .15rem;
}

.app-toast-close:hover {
  color: var(--text, #0f172a);
}

@keyframes app-dialog-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes app-dialog-pop {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to { opacity: 1; transform: none; }
}

html[data-theme-mode="dark"] .app-dialog,
[data-theme="dark"] .app-dialog,
html[data-theme-mode="dark"] .app-toast,
[data-theme="dark"] .app-toast {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.22);
}

html[data-theme-mode="dark"] .app-dialog-titles h2,
[data-theme="dark"] .app-dialog-titles h2 {
  color: #e2e8f0;
}

html[data-theme-mode="dark"] .app-dialog-body p,
html[data-theme-mode="dark"] .app-toast-body p,
[data-theme="dark"] .app-dialog-body p,
[data-theme="dark"] .app-toast-body p {
  color: #94a3b8;
}

html[data-theme-mode="dark"] .app-dialog-foot,
[data-theme="dark"] .app-dialog-foot {
  background: rgba(15, 23, 42, 0.65);
  border-top-color: rgba(148, 163, 184, 0.15);
}

@media (max-width: 520px) {
  .app-toast-host {
    left: .75rem;
    right: .75rem;
    width: auto;
  }
}