/**
 * Notification stack — the single source of truth for AIM 4 highlight cards and the
 * maintenance notice (ClickUp 86bbgvuja).
 *
 * Loaded by BOTH layouts (`templates/layout/default.php` and `templates/layout/aim-tool.php`
 * — the latter links no `custom.css`, so it cannot be inherited) and used by BOTH stacks:
 * the CakePHP elements and the React `AnnouncementBanner` card variant, which portals into
 * `#lbt-notification-stack` and reuses these class names instead of Tailwind utilities.
 *
 * Rationale for one stylesheet instead of per-stack styling: the predecessor ticket
 * (86bb27h4g) failed QA twice on PHP↔React visual drift — first the body-copy typography,
 * then the card font-family. Two implementations of one palette diverge and get verified
 * once. Change the palette here and both stacks move together.
 */

/* Stack container. Fixed so notices never push page content down (AC 1). The container
   itself is click-through; only the cards inside it take pointer events, otherwise an
   empty stack would swallow clicks across the top-right of every page. */
.lbt-notice-stack {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: 450px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

.lbt-notice-stack > * {
  pointer-events: auto;
}

/* Stack order is declared, not inherited from DOM order. The PHP elements and the React
   portal append into the same container from two different trees, so DOM order differs by
   page — the system notice must sit above product notices everywhere. */
.lbt-notice--system {
  order: 1;
}

.lbt-notice--update {
  order: 2;
}

.lbt-notice {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #181818;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  /* 20px top (Tailwind's pt-5, Angel 86bbgvuja): the badge overhangs the card by ~12px,
     so a symmetric 12px top padding left the first line of copy crowded under it. */
  padding: 20px 34px 12px 14px;
  /* Arial, not the AIM app's Roboto: the two stacks sit side by side and must read
     identically (86bb27h4g QA round 4). The React card additionally keeps its `font-lbt`
     class to escape the `#root { font-family: Roboto }` override in app/assets/css/index.css. */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.25;
  color: #ffffff;
}

.lbt-notice.hidden,
.lbt-notice[hidden] {
  display: none;
}

/* Badge overhangs the card's top-left corner. The bell is a CSS background on ::before so
   the icon has exactly one definition — inlining an <svg> would mean duplicating the markup
   in the PHP element and again in the React component. Decorative: the badge is labelled. */
.lbt-notice__badge {
  position: absolute;
  top: -10px;
  left: -8px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #48a84f;
  color: #ffffff;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Green is reserved for new product capability. A system notice is not new stuff, so it
   carries a neutral grey — `#6f6f6f`, the grey LBT already uses (custom.css `.disabled`).
   White on #6f6f6f is 5.03:1, above the 4.5:1 AA floor for this 12px bold label. */
.lbt-notice--system .lbt-notice__badge {
  background: #6f6f6f;
}

/* The bell has exactly one definition, shared by the card badge and the navbar bell
   (86bbpkaum). Inlining the <svg> would mean the same markup in the PHP element, the React
   component and the navbar — the shape A-BANNER-I3 exists to prevent. */
:root {
  --lbt-bell-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M12 2a1.4 1.4 0 0 1 1.4 1.4v.72A6.3 6.3 0 0 1 18.3 10.3v3.6l1.5 2.6a.9.9 0 0 1-.78 1.35H5a.9.9 0 0 1-.78-1.35l1.5-2.6v-3.6a6.3 6.3 0 0 1 4.9-6.18V3.4A1.4 1.4 0 0 1 12 2Zm0 19.5a2.6 2.6 0 0 1-2.55-2.1h5.1A2.6 2.6 0 0 1 12 21.5Z'/%3E%3C/svg%3E");
}

.lbt-notice__badge::before {
  content: '';
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background: var(--lbt-bell-icon) no-repeat center / contain;
}

/* Navbar bell (86bbpkaum). Lives here rather than in the navbar's own <style> block because
   this stylesheet is the one place the bell icon is defined, and both layouts link it —
   aim-tool.php links no custom.css, which is the trap I3 records. */
.lbt-bell__icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  background: var(--lbt-bell-icon) no-repeat center / contain;
}

.lbt-bell__icon-wrap {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.lbt-bell__new-badge {
  position: absolute;
  top: -8px;
  right: -14px;
  display: inline-block;
  background: #48a84f;
  color: #ffffff;
  font-weight: 700;
  font-size: 9px;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}

/* Author CSS always wins over the UA stylesheet's default `[hidden] { display: none }`, even
   at equal specificity — so the `display: inline-block` above must be explicitly turned back
   off once `.hidden` is set via JS (`initBellBadge`), or the badge stays visually on-screen
   despite the attribute being present. */
.lbt-bell__new-badge[hidden] {
  display: none;
}

.lbt-bell__menu {
  min-width: 320px;
  max-width: 380px;
  max-height: 70vh;
  overflow-y: auto;
}

.lbt-bell__item {
  padding: 10px 14px;
  border-bottom: 1px solid #e6e6e6;
  white-space: normal;
}

.lbt-bell__item:last-child {
  border-bottom: 0;
}

.lbt-bell__item-badge {
  display: inline-block;
  background: #48a84f;
  color: #ffffff;
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  margin-bottom: 6px;
}

/* Same rule as the cards: green is new product capability, grey is a system notice
   (A-BANNER-I3b). */
.lbt-bell__item--system .lbt-bell__item-badge {
  background: #6f6f6f;
}

.lbt-bell__item-title {
  font-weight: 700;
  margin: 0 0 4px;
}

.lbt-bell__item-text {
  margin: 0;
}

.lbt-bell__empty {
  padding: 14px;
  color: #6f6f6f;
  white-space: normal;
}

.lbt-notice__title {
  margin: 0;
  font-weight: 700;
}

.lbt-notice__text {
  margin: 0;
}

.lbt-notice__link {
  color: #48a84f;
  font-weight: 600;
  text-decoration: underline;
}

.lbt-notice__link:hover,
.lbt-notice__link:focus,
.lbt-notice__link:visited {
  color: #48a84f;
  text-decoration: underline;
}

.lbt-notice__small-text {
  margin: 0;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.65);
}

.lbt-notice__close {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  padding: 2px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}

.lbt-notice__close:hover {
  color: #ffffff;
}

.lbt-notice__close:focus {
  outline: 2px solid #48a84f;
  outline-offset: 2px;
}

/* A fixed corner stack covers the content on a phone. Fall back to in-flow, full-width
   cards — the same escape hatch the pre-stack card already had at this breakpoint. */
@media (max-width: 768px) {
  .lbt-notice-stack {
    position: static;
    width: auto;
    max-width: none;
    align-items: stretch;
    margin: 12px 10px 0 10px;
  }

  .lbt-notice {
    font-size: 12px;
  }
}

@media print {
  .lbt-notice-stack {
    display: none !important;
  }
}