.notif-bell-wrap { position: relative; } /* Used where there's no persistent header bar to anchor into (e.g. the admin sidebar layout, whose topbar is mobile-only and whose sidebar header is too narrow when collapsed) — floats independent of layout. */ .notif-bell-wrap.notif-floating { position: fixed; top: 0.9rem; right: 1.1rem; z-index: 60; } .notif-bell-wrap.notif-floating .notif-bell { background: #0a2540; color: #fff; box-shadow: 0 4px 14px rgba(10, 37, 64, 0.35); } .notif-bell-wrap.notif-floating .notif-bell:hover { background: #0c2f52; } .notif-bell { position: relative; background: transparent; border: none; cursor: pointer; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 0.625rem; color: inherit; font-size: 1.05rem; flex-shrink: 0; } .notif-bell:hover { background: #eef1f4; } .notif-badge { position: absolute; top: 1px; right: 1px; min-width: 1.05rem; height: 1.05rem; padding: 0 0.3rem; border-radius: 999px; background: #E2543E; color: #fff; font-size: 0.625rem; font-weight: 700; display: flex; align-items: center; justify-content: center; line-height: 1; box-shadow: 0 0 0 2px var(--surface, #fff); } .notif-badge.hidden { display: none; } .notif-dropdown { position: absolute; top: calc(100% + 0.5rem); right: 0; width: 320px; max-width: calc(100vw - 2rem); background: #fff; border-radius: 14px; box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18); border: 1px solid #e2e8f0; z-index: 200; max-height: 420px; display: flex; flex-direction: column; overflow: hidden; } .notif-dropdown.hidden { display: none; } .notif-dropdown-head { padding: 0.85rem 1rem; font-weight: 700; font-size: 0.85rem; color: #0a2540; border-bottom: 1px solid #f1f5f9; flex-shrink: 0; } .notif-panel-list { overflow-y: auto; } .notif-item { display: block; padding: 0.75rem 1rem; border-bottom: 1px solid #f8fafc; text-decoration: none; color: inherit; cursor: default; } a.notif-item { cursor: pointer; } a.notif-item:hover { background: #f8fafc; } .notif-item.unread { background: #f0fdfa; } .notif-item-title { font-size: 0.825rem; font-weight: 600; color: #0a2540; margin: 0 0 0.15rem; } .notif-item-body { font-size: 0.75rem; color: #64748b; margin: 0 0 0.25rem; } .notif-item-time { font-size: 0.7rem; color: #94a3b8; margin: 0; } .notif-empty { padding: 1.5rem 1rem; text-align: center; color: #94a3b8; font-size: 0.8rem; } /* Day/night toggle dark theme (member-dashboard.html only — gated by the [data-theme="dark"] attribute that page's toggle sets on ). */ :root[data-theme="dark"] .notif-bell:hover { background: #1b2537; } :root[data-theme="dark"] .notif-dropdown { background: #131c2c; border-color: #263248; box-shadow: 0 12px 32px rgba(0, 0, 0, .45); } :root[data-theme="dark"] .notif-dropdown-head { color: #eef2f7; border-bottom-color: #263248; } :root[data-theme="dark"] .notif-item { border-bottom-color: #1b2537; } :root[data-theme="dark"] a.notif-item:hover { background: #1b2537; } :root[data-theme="dark"] .notif-item.unread { background: rgba(193, 68, 14, .1); } :root[data-theme="dark"] .notif-item-title { color: #eef2f7; } :root[data-theme="dark"] .notif-item-body { color: #93a0b4; }