/* RoladelNotify - the one shared sitewide toast/notification system
   (js/notify.js). Reuses styles/variables.css's existing black/white/
   gray tokens only - no new colors are introduced; success/error/
   warning/info are distinguished by icon + label text, not by color,
   per this project's own documented decision to keep Roladel Green
   retired as a general UI accent (see styles/variables.css's header
   comment). Respects prefers-reduced-motion via the sitewide guard
   already in styles/mycss.css (targets *, so this file's own
   transitions are covered automatically, no separate media query
   needed here).

   Every rule below is scoped under #roladel-notify-region (an ID, not
   just a class) specifically so it always wins the cascade regardless of
   load order - includes/footer.php re-includes styles/mycss.css AFTER
   this file on every page that uses it (a pre-existing, unrelated
   ordering this file doesn't control), and mycss.css's own broad
   selectors were found, during this feature's own testing, to silently
   override plain-class icon/text styling loaded before it. An ID-scoped
   selector's specificity beats that regardless of which one is
   physically later in the cascade. */

#roladel-notify-region {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10600; /* above Bootstrap's modal backdrop (1050) and modal (1050+) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none; /* clicks pass through the empty region; toasts opt back in below */
}

#roladel-notify-region .roladel-notify-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px;
  background: var(--light-bg);
  color: var(--light-text);
  border: 1px solid var(--light-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

html.dark #roladel-notify-region .roladel-notify-toast {
  background: var(--dark-surface);
  color: var(--dark-text);
  border-color: var(--dark-border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

#roladel-notify-region .roladel-notify-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#roladel-notify-region .roladel-notify-toast.is-leaving {
  opacity: 0;
  transform: translateY(-8px);
}

/* Left accent bar - the only per-type visual differentiator besides the
   icon shape/label text, and it's still black/white/gray (a heavier vs.
   lighter bar + border), never a hue. */
#roladel-notify-region .roladel-notify-success { border-left: 4px solid var(--brand-black); }
#roladel-notify-region .roladel-notify-error { border-left: 4px solid var(--brand-black); }
#roladel-notify-region .roladel-notify-warning { border-left: 4px solid var(--gray-500); }
#roladel-notify-region .roladel-notify-info { border-left: 4px solid var(--gray-300); }

html.dark #roladel-notify-region .roladel-notify-success,
html.dark #roladel-notify-region .roladel-notify-error { border-left-color: var(--brand-white); }
html.dark #roladel-notify-region .roladel-notify-warning { border-left-color: var(--dark-text-muted); }
html.dark #roladel-notify-region .roladel-notify-info { border-left-color: var(--dark-border); }

#roladel-notify-region .roladel-notify-icon {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
  background: var(--brand-black);
  /* !important: styles/dark_mode.css has a broad
     "html.dark span { color: #eaeaea !important; }" text-color reset
     (this icon is a <span>) that otherwise wins regardless of selector
     specificity - confirmed via computed-style inspection during this
     feature's own testing (the icon shape/text was rendering at
     ~92% white-on-white, effectively invisible). Matching its
     !important is the only way to actually win here, same convention
     dark_mode.css itself already uses throughout for exactly this kind
     of override. */
  color: var(--brand-white) !important;
}

html.dark #roladel-notify-region .roladel-notify-icon {
  background: var(--brand-white);
  color: var(--brand-black) !important;
}

/* Success (checkmark) and error (cross) are drawn with pure CSS - no
   font/glyph dependency, so they can never silently fail to render the
   way a Unicode symbol character can on a font stack that's missing it
   (confirmed happening for ✓/⚠/ℹ during this feature's own testing).
   Warning ("!") and info ("i") are plain ASCII text set in js/notify.js -
   always renders, no drawing needed. */
#roladel-notify-region .roladel-notify-icon-success::before {
  content: "";
  display: block;
  width: 7px;
  height: 3px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translate(1px, -1px);
}

#roladel-notify-region .roladel-notify-icon-error::before,
#roladel-notify-region .roladel-notify-icon-error::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 2px;
  background: currentColor;
}

#roladel-notify-region .roladel-notify-icon-error::before { transform: rotate(45deg); }
#roladel-notify-region .roladel-notify-icon-error::after { transform: rotate(-45deg); }

#roladel-notify-region .roladel-notify-body {
  flex: 1 1 auto;
  min-width: 0; /* required for long-word wrapping inside a flex child */
}

#roladel-notify-region .roladel-notify-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* !important - same dark_mode.css "html.dark span" reset noted above;
     this label is also a <span>. */
  color: var(--light-text-muted) !important;
  margin-bottom: 2px;
}

html.dark #roladel-notify-region .roladel-notify-label { color: var(--dark-text-muted) !important; }

#roladel-notify-region .roladel-notify-text {
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-break: break-word;
}

#roladel-notify-region .roladel-notify-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0 2px;
  margin: -2px -2px 0 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--light-text-muted);
  cursor: pointer;
}

html.dark #roladel-notify-region .roladel-notify-close { color: var(--dark-text-muted); }

#roladel-notify-region .roladel-notify-close:hover,
#roladel-notify-region .roladel-notify-close:focus-visible {
  color: var(--light-text);
}

html.dark #roladel-notify-region .roladel-notify-close:hover,
html.dark #roladel-notify-region .roladel-notify-close:focus-visible {
  color: var(--dark-text);
}

#roladel-notify-region .roladel-notify-close:focus-visible {
  outline: 2px solid var(--brand-black);
  outline-offset: 2px;
  border-radius: 3px;
}

html.dark #roladel-notify-region .roladel-notify-close:focus-visible {
  outline-color: var(--brand-white);
}

@media (max-width: 480px) {
  #roladel-notify-region {
    top: 0;
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
    padding: 10px;
    gap: 8px;
  }

  #roladel-notify-region .roladel-notify-toast {
    border-radius: 0 0 8px 8px;
  }
}