/* ============================================================
   LEARNCORE NOTIFY — shared styled confirm modal + toast notices
   Replaces native alert()/confirm() across the tutor site.
   Namespaced `.lcn-` so nothing leaks into the theme. Every token
   has a literal fallback so the component renders on-brand even on
   pages that don't enqueue tokens.css (e.g. Events Calendar views).
   ============================================================ */

/* ---- Confirm modal ---- */
.lcn-backdrop {
  position: fixed; inset: 0; z-index: var(--z-modal, 100000);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(26, 34, 51, 0.45);
  opacity: 0;
  transition: opacity 150ms ease;
  -webkit-font-smoothing: antialiased;
}
.lcn-backdrop.lcn-in { opacity: 1; }

.lcn-modal {
  width: 100%; max-width: 440px;
  background: var(--color-surface, #ffffff);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-lg, 0 12px 28px rgba(26,34,51,0.12), 0 4px 8px rgba(26,34,51,0.06));
  color: var(--color-text-primary, #111827);
  font-family: var(--font-ui, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  transform: translateY(8px) scale(0.98);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
.lcn-backdrop.lcn-in .lcn-modal { transform: translateY(0) scale(1); }

.lcn-modal__body { padding: 24px 24px 20px; }
.lcn-modal__icon {
  width: 44px; height: 44px; margin-bottom: 12px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--color-accent-pale, #eef2fb);
  color: var(--color-ink, #1a2233);
}
.lcn-modal--danger .lcn-modal__icon { background: #fee2e2; color: var(--color-danger, #dc2626); }
.lcn-modal__icon svg { width: 22px; height: 22px; }
.lcn-modal__title {
  margin: 0 0 8px;
  font-family: var(--font-display, 'Lora', Georgia, serif);
  font-size: var(--text-xl, 20px); font-weight: 600; line-height: 1.25;
  color: var(--color-ink, #1a2233);
}
.lcn-modal__text {
  margin: 0;
  font-size: var(--text-sm, 14px); line-height: 1.6;
  color: var(--color-text-muted, #6b7280);
}
.lcn-modal__foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  background: var(--color-surface-warm, #faf9f7);
}

/* ---- Buttons (mirror .lcl-btn) ---- */
.lcn-btn {
  --b-bg: var(--color-surface, #fff);
  --b-fg: var(--color-text-primary, #111827);
  --b-bd: var(--color-border, #e5e7eb);
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-family: inherit; font-size: var(--text-sm, 14px); font-weight: 600; line-height: 1;
  padding: 9px 15px; border-radius: var(--radius-md, 8px);
  border: 1px solid var(--b-bd); background: var(--b-bg); color: var(--b-fg);
  cursor: pointer; white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}
.lcn-btn:hover { box-shadow: var(--shadow-sm, 0 1px 3px rgba(26,34,51,0.08)); }
.lcn-btn:active { transform: translateY(1px); }
.lcn-btn:focus-visible { outline: 2px solid var(--color-accent, #3d6fd4); outline-offset: 2px; }
.lcn-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.lcn-btn--ghost:hover { background: var(--color-bg-subtle, #f3f4f6); }
.lcn-btn--brand {
  --b-bg: var(--color-brand, #4a9f5c); --b-fg: #fff; --b-bd: var(--color-brand, #4a9f5c);
}
.lcn-btn--brand:hover { background: var(--color-brand-dark, #357a42); border-color: var(--color-brand-dark, #357a42); }
/* Destructive confirm — red ghost, matching the house .lcl-btn--danger-ghost. */
.lcn-btn--danger {
  --b-fg: var(--color-danger, #dc2626); --b-bd: #f3c9c9;
}
.lcn-btn--danger:hover { background: #fef2f2; border-color: #ec9a9a; }

/* ---- Toasts ---- */
.lcn-toasts {
  position: fixed; z-index: var(--z-toast, 100001);
  top: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
/* Nudge below the WP admin bar when present. */
.admin-bar .lcn-toasts { top: 52px; }

/* Severity is carried by a pale tinted ground + matching border + the
   full-strength icon colour — no side-stripe (a flagged anti-pattern). */
.lcn-toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 14px;
  background: var(--lcn-bg, var(--color-surface, #ffffff));
  border: 1px solid var(--lcn-bd, var(--color-border, #e5e7eb));
  border-radius: var(--radius-md, 8px);
  box-shadow: var(--shadow-md, 0 4px 12px rgba(26,34,51,0.08), 0 2px 4px rgba(26,34,51,0.05));
  font-family: var(--font-ui, 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif);
  color: var(--color-text-primary, #111827);
  opacity: 0; transform: translateX(12px);
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lcn-toast.lcn-in { opacity: 1; transform: translateX(0); }
.lcn-toast.lcn-out { opacity: 0; transform: translateX(12px); }
.lcn-toast--success { --lcn-accent: var(--color-success, #16a34a); --lcn-bg: #ecf7ef; --lcn-bd: #bfe6c8; }
.lcn-toast--error   { --lcn-accent: var(--color-danger,  #dc2626); --lcn-bg: #fdecec; --lcn-bd: #f4c9c9; }
.lcn-toast--warning { --lcn-accent: var(--color-warning, #d97706); --lcn-bg: #fdf2e3; --lcn-bd: #f0dca6; }
.lcn-toast--info    { --lcn-accent: var(--color-accent,  #3d6fd4); --lcn-bg: #eef2fb; --lcn-bd: #cdd9f4; }

.lcn-toast__icon { flex-shrink: 0; color: var(--lcn-accent, #6b7280); margin-top: 1px; }
.lcn-toast__icon svg { width: 18px; height: 18px; display: block; }
.lcn-toast__msg { flex: 1; font-size: var(--text-sm, 14px); line-height: 1.45; }
.lcn-toast__close {
  flex-shrink: 0; margin: -2px -2px 0 0;
  width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center;
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted, #6b7280);
  font-size: 18px; line-height: 1; border-radius: 4px;
}
.lcn-toast__close:hover { background: var(--color-bg-subtle, #f3f4f6); color: var(--color-text-primary, #111827); }

@media (max-width: 480px) {
  .lcn-toasts { left: 16px; right: 16px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lcn-backdrop, .lcn-modal, .lcn-toast { transition-duration: 0.01ms !important; }
}