/* ════════════════════════════════════════════════════════════════
   DTTASA — NOTIFICATION PREMIUM (shared, 2026-06-13)
   One stylesheet that upgrades the systemNotifications bell + dropdown
   (the shared `.sn-*` / `.sys-notif-*` classes used on index, hr-ops-
   monitor, ops-dashboard, all-org-doc, exec-board) to enterprise premium
   with a STRONG unread-vs-read distinction, click-to-read feedback, a
   per-item delete affordance, and the premium gold motion system.
   Loaded AFTER each page's own CSS so it wins. Styling only.
   --ease: cubic-bezier(.16,1,.3,1)
   ════════════════════════════════════════════════════════════════ */

/* ── Dropdown panel: premium glass + gold top hairline ────────────── */
.sys-notif-panel{
  width:340px !important; border-radius:16px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 44%),rgba(12,17,9,.92) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:0 26px 70px -18px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08),0 0 50px -28px var(--gglow,rgba(240,200,50,.3)) !important;
  -webkit-backdrop-filter:blur(22px) saturate(1.3) !important; backdrop-filter:blur(22px) saturate(1.3) !important;
}
.sys-notif-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent,rgba(240,200,50,.7),transparent);
  background-size:200% 100%;animation:snGoldScan 5s cubic-bezier(.16,1,.3,1) infinite;}
@keyframes snGoldScan{0%{background-position:200% 0}100%{background-position:-200% 0}}
.snp-hdr-title{font-family:var(--disp,'Cinzel',serif) !important;letter-spacing:1.6px !important;}

/* ── Item base ────────────────────────────────────────────────────── */
.sn-item{
  position:relative;border-left:3px solid transparent;padding:11px 14px !important;gap:10px !important;
  transition:background .2s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .25s,border-color .2s !important;
}
.sn-item:hover{background:rgba(240,200,50,.06) !important;}

/* ── UNREAD: bold, gold-edged, solid — impossible to confuse with read ── */
.sn-item.sn-unread{
  background:linear-gradient(90deg,rgba(240,200,50,.10),rgba(240,200,50,.02) 60%) !important;
  border-left-color:var(--gold,#f0c832) !important;opacity:1 !important;
}
.sn-item.sn-unread .sn-title{color:var(--text,#f2f7ee) !important;font-weight:800 !important;}
.sn-item.sn-unread .sn-sub{color:var(--t2,rgba(242,247,238,.88)) !important;}
/* the "NEW" pip — gold chip with a soft pulse */
.s-6prouic, .sn-new-pip{
  display:inline-block;margin-left:7px;font-family:var(--mono,'IBM Plex Mono',monospace);
  font-size:8.5px !important;font-weight:800;letter-spacing:1px;color:#1a1305 !important;
  background:linear-gradient(135deg,var(--gold,#f0c832),var(--gold2,#f7d94e)) !important;
  padding:1px 6px;border-radius:5px;vertical-align:middle;text-transform:uppercase;
  box-shadow:0 0 10px rgba(240,200,50,.5);animation:snNewPulse 2.4s cubic-bezier(.16,1,.3,1) infinite;
}
@keyframes snNewPulse{0%,100%{box-shadow:0 0 8px rgba(240,200,50,.4)}50%{box-shadow:0 0 16px rgba(240,200,50,.75)}}
/* unread trailing dot — solid gold, glowing */
.sn-unread-dot{width:9px !important;height:9px !important;background:var(--gold,#f0c832) !important;
  box-shadow:0 0 9px rgba(240,200,50,.7);align-self:center;margin-left:auto;flex-shrink:0;border-radius:50%;}

/* ── READ: clearly muted but still legible (was opacity .46 = "too greyed") ── */
.sn-item.sn-read{opacity:1 !important;background:transparent !important;border-left-color:transparent !important;}
.sn-item.sn-read .sn-title{color:var(--t3,rgba(242,247,238,.62)) !important;font-weight:600 !important;}
.sn-item.sn-read .sn-sub{color:var(--t3,rgba(242,247,238,.5)) !important;}
.sn-item.sn-read .sn-icon, .sn-item.sn-read [class*="sn-ic"]{filter:grayscale(.55);opacity:.7;}
.sn-read-mark{width:13px !important;height:13px !important;border-radius:50% !important;background:none !important;
  align-self:center;margin-left:auto;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.sn-read-mark::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;font-size:8px;color:var(--green,#4cd657);opacity:.55;}

/* ── Click-to-read feedback: a brief gold ripple when an item is marked read ── */
.sn-item.sn-justread{animation:snJustRead .5s cubic-bezier(.16,1,.3,1);}
@keyframes snJustRead{0%{background:rgba(240,200,50,.22)}100%{background:transparent}}

/* ── Per-item DELETE affordance ───────────────────────────────────── */
.sn-del{
  width:24px;height:24px;border-radius:7px;border:1px solid transparent;background:transparent;
  color:var(--t3,rgba(242,247,238,.55));font-size:11px;cursor:pointer;flex-shrink:0;align-self:center;
  display:flex;align-items:center;justify-content:center;opacity:0;transition:all .2s var(--ease,cubic-bezier(.16,1,.3,1));margin-left:6px;
}
.sn-item:hover .sn-del{opacity:1;}
.sn-del:hover{background:rgba(255,72,72,.14);border-color:rgba(255,72,72,.35);color:var(--red,#ff4848);}
/* slide-out when deleted */
.sn-item.sn-removing{animation:snRemove .32s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes snRemove{to{opacity:0;transform:translateX(28px);max-height:0;padding-top:0;padding-bottom:0;margin:0;}}

/* keep the per-item delete on touch devices (no hover) visible */
@media (hover:none){ .sn-del{opacity:.6;} }

/* ════════════════════════════════════════════════════════════════
   Extend the SAME premium treatment to the OTHER notification rows:
   .hdr-notif-item (dashboard header bell + leave) and .notif-item (EOM).
   Matches the .sn-item language: strong gold unread, muted read, NEW pip.
   ════════════════════════════════════════════════════════════════ */
.hdr-notif-item, .notif-item{
  position:relative;border-left:3px solid transparent !important;
  transition:background .2s var(--ease,cubic-bezier(.16,1,.3,1)),opacity .25s,border-color .2s !important;
}
.hdr-notif-item:hover, .notif-item:hover{ background:rgba(240,200,50,.06) !important; }

/* UNREAD — bold, gold-edged, solid (replaces the faint rgba(...,.04)) */
.hdr-notif-item.unread, .notif-item.unread{
  background:linear-gradient(90deg,rgba(240,200,50,.10),rgba(240,200,50,.02) 60%) !important;
  border-left-color:var(--gold,#f0c832) !important;opacity:1 !important;
}
.hdr-notif-item.unread .hdr-ni-title, .notif-item.unread .ni-title{ color:var(--text,#f2f7ee) !important;font-weight:800 !important; }
.hdr-notif-item.unread .hdr-ni-msg,  .notif-item.unread .ni-msg{ color:var(--t2,rgba(242,247,238,.88)) !important; }

/* READ — clearly muted but legible */
.hdr-notif-item:not(.unread), .notif-item:not(.unread){ background:transparent !important; }
.hdr-notif-item:not(.unread) .hdr-ni-title, .notif-item:not(.unread) .ni-title{ color:var(--t3,rgba(242,247,238,.62)) !important;font-weight:600 !important; }
.hdr-notif-item:not(.unread) .hdr-ni-msg,  .notif-item:not(.unread) .ni-msg{ color:var(--t3,rgba(242,247,238,.5)) !important; }
.hdr-notif-item:not(.unread) .hdr-ni-icon, .notif-item:not(.unread) .ni-icon{ filter:grayscale(.55);opacity:.7; }

/* Chat dropdown rows — premium hover + unread accent to match */
.chat-dd-item{ transition:background .2s var(--ease,cubic-bezier(.16,1,.3,1)) !important; border-left:3px solid transparent; }
.chat-dd-item:hover{ background:rgba(240,200,50,.06) !important; }
.chat-dd-item .chat-dd-unread{ background:linear-gradient(135deg,var(--gold,#f0c832),var(--gold2,#f7d94e)) !important;color:#1a1305 !important;font-weight:800 !important;box-shadow:0 0 10px rgba(240,200,50,.5); }