/* ============================================================================
 * QCU Notify — unified notification (toast) system
 * Loaded on every page via includes/brand-head.php.
 * Namespace `qcu-nt` is intentionally distinct from the retired `.qcu-toast`
 * (brand.js) and `.qct-*` (member) systems so nothing collides during rollout.
 * Behaviour + JS API: assets/js/qcu-notify.js · docs: docs/NOTIFICATIONS.md
 *
 * Visual language: crisp white card + a SOLID filled icon badge (the strong
 * color anchor) + a colored title. No left-edge stripe. Layered shadow gives a
 * premium, elevated feel. Badge colors are chosen for >=4.5:1 white-on-color.
 * ========================================================================== */

:root {
  /* Notification-specific solid accents — picked so a white glyph on the badge
   * and the title text on white both clear WCAG AA. Independent of the lighter
   * Tier-2 brand semantics so badges never wash out. */
  --qcu-nt-success: #1E7A4B;   /* deep emerald-forest */
  --qcu-nt-error:   #C5283D;   /* confident red */
  --qcu-nt-warning: #B45309;   /* deep amber/terracotta */
  --qcu-nt-info:    #2563EB;   /* royal blue */
}

#qcu-notify-stack {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 2147483000;            /* above modals, sidebars, chat FAB, everything */
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;          /* let clicks fall through the gaps */
  max-width: min(420px, calc(100vw - 40px));
}

.qcu-nt {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 15px 16px;
  background: var(--qcu-white, #fff);
  color: var(--qcu-ink, #1F2A23);
  border: 1px solid rgba(31, 42, 35, .08);
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .04),
    0 12px 24px -8px rgba(16, 24, 40, .16),
    0 24px 48px -16px rgba(16, 24, 40, .14);
  font-family: var(--qcu-font-body, "Hanken Grotesk", system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.45;
  /* entrance origin — JS toggles .qcu-nt--in / .qcu-nt--out */
  transform: translateX(120%) scale(.98);
  opacity: 0;
  transition: transform .34s cubic-bezier(.22,.61,.36,1), opacity .34s ease, box-shadow .2s ease;
  will-change: transform, opacity;
}
.qcu-nt:hover {
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .05),
    0 16px 30px -8px rgba(16, 24, 40, .22),
    0 30px 56px -18px rgba(16, 24, 40, .18);
}

.qcu-nt--in  { transform: translateX(0) scale(1);    opacity: 1; }
.qcu-nt--out { transform: translateX(120%) scale(.98); opacity: 0; }

/* SOLID filled icon badge — the primary color carrier. */
.qcu-nt__ico {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;                 /* glyph (SVG uses currentColor) */
  background: var(--qcu-ink, #1F2A23);
}
.qcu-nt__ico svg { width: 17px; height: 17px; }

.qcu-nt__msg {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 1px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  color: var(--qcu-gray-warm, #5b6660);   /* body text slightly muted */
}
.qcu-nt__title {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 2px;
  color: var(--qcu-ink, #1F2A23);          /* default; level rules recolor it */
}

.qcu-nt__x {
  flex: 0 0 auto;
  margin: -4px -6px 0 2px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--qcu-gray-warm, #98a29c);
  font-size: 18px;
  line-height: 1;
  border-radius: 8px;
  transition: color .15s ease, background .15s ease;
}
.qcu-nt__x:hover { color: var(--qcu-ink, #1F2A23); background: rgba(31,42,35,.07); }

/* Level treatments — filled badge + colored title. No stripe. */
.qcu-nt--success .qcu-nt__ico   { background: var(--qcu-nt-success); }
.qcu-nt--success .qcu-nt__title { color: var(--qcu-nt-success); }
.qcu-nt--error   .qcu-nt__ico   { background: var(--qcu-nt-error); }
.qcu-nt--error   .qcu-nt__title { color: var(--qcu-nt-error); }
.qcu-nt--warning .qcu-nt__ico   { background: var(--qcu-nt-warning); }
.qcu-nt--warning .qcu-nt__title { color: var(--qcu-nt-warning); }
.qcu-nt--info    .qcu-nt__ico   { background: var(--qcu-nt-info); }
.qcu-nt--info    .qcu-nt__title { color: var(--qcu-nt-info); }

/* Dark mode (member portal uses [data-theme="dark"]). */
[data-theme="dark"] .qcu-nt {
  background: var(--paper, #1b2420);
  color: var(--ink, #e7ece8);
  border-color: rgba(255, 255, 255, .08);
  box-shadow:
    0 1px 2px rgba(0,0,0,.4),
    0 16px 34px -10px rgba(0,0,0,.6),
    0 30px 56px -18px rgba(0,0,0,.5);
}
[data-theme="dark"] .qcu-nt__msg   { color: #aab4ae; }
[data-theme="dark"] .qcu-nt__title { color: var(--ink, #e7ece8); }
[data-theme="dark"] .qcu-nt--success .qcu-nt__title { color: #5fd49a; }
[data-theme="dark"] .qcu-nt--error   .qcu-nt__title { color: #ff8a96; }
[data-theme="dark"] .qcu-nt--warning .qcu-nt__title { color: #f0b36b; }
[data-theme="dark"] .qcu-nt--info    .qcu-nt__title { color: #8fb4ff; }

/* Mobile: full-width banner at the top. */
@media (max-width: 540px) {
  #qcu-notify-stack { top: 10px; right: 10px; left: 10px; max-width: none; }
  .qcu-nt { font-size: 13.5px; padding: 13px 14px; border-radius: 14px; }
}

/* Respect reduced-motion — no slide/scale, just opacity (still visible). */
@media (prefers-reduced-motion: reduce) {
  .qcu-nt { transition: opacity .2s ease; transform: none; }
  .qcu-nt--in  { transform: none; opacity: 1; }
  .qcu-nt--out { transform: none; opacity: 0; }
}