/* 右上角消息通知中心：铃铛 + 未读徽标 + 下拉面板（顶栏唯一实例，随 base.html 全站加载） */
.notif-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:inherit;cursor:pointer;font-size:16px}
.notif-bell:hover{background:rgba(120,140,200,.14)}
.notif-badge{position:absolute;top:-2px;right:-4px;min-width:17px;height:17px;border-radius:999px;background:#e2574c;color:#fff;font-size:10px;line-height:17px;text-align:center;padding:0 4px;font-weight:700}
.notif-wrap{position:relative;display:inline-flex;align-items:center}
.notif-panel{position:absolute;top:42px;right:0;width:360px;max-width:calc(100vw - 24px);background:var(--card,#fff);color:var(--text,#222);border:1px solid var(--line,#e3e7ef);border-radius:12px;box-shadow:0 16px 44px rgba(15,25,50,.18);overflow:hidden;z-index:1300}
.notif-panel[hidden]{display:none}
.notif-panel header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line,#eceff5);font-size:13px}
.notif-panel header .notif-read-all-btn{border:none;background:transparent;color:#4a6fd0;font-size:12px;cursor:pointer;padding:2px 4px}
.notif-panel header .notif-read-all-btn:disabled{color:#a8b0bf;cursor:default}
.notif-panel ul{list-style:none;margin:0;padding:0;max-height:380px;overflow-y:auto}
.notif-panel .notif-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line,#f0f2f7);cursor:pointer;align-items:flex-start}
.notif-panel .notif-item:last-child{border-bottom:none}
.notif-panel .notif-item:hover{background:rgba(120,140,200,.08)}
.notif-panel .notif-item.unread{background:rgba(80,120,220,.06)}
.notif-panel .notif-dot{width:7px;height:7px;border-radius:50%;background:#e2574c;margin-top:6px;opacity:0;flex:none}
.notif-panel .notif-item.unread .notif-dot{opacity:1}
.notif-panel .notif-item-title{font-weight:600;font-size:12.5px;overflow-wrap:anywhere}
.notif-panel .notif-item-body-text{font-size:11.5px;color:var(--muted,#7d8698);margin-top:2px;overflow-wrap:anywhere}
.notif-panel .notif-item-meta{font-size:10.5px;color:var(--muted,#98a0b0);margin-top:3px;display:flex;gap:8px;align-items:center}
.notif-kind-tag{border:1px solid currentColor;border-radius:999px;padding:0 7px;font-size:10.5px;line-height:16px}
.notif-kind-production{color:#2f7d4f}
.notif-kind-packaging{color:#8a5fb8}
.notif-kind-chase{color:#c2503c}
.notif-kind-system{color:#5b7bb2}
.notif-panel .notif-empty{padding:26px 14px;text-align:center;color:var(--muted,#98a0b0);font-size:12px}
.notif-panel footer{padding:8px 14px;border-top:1px solid var(--line,#eceff5);text-align:center;font-size:12px}
.notif-panel footer a{color:#4a6fd0;text-decoration:none}

/* Shared ERP notification controls on every normal page. */
.notif-wrap .notif-bell{width:34px;height:34px;border:1px solid var(--c-border);border-radius:7px;background:var(--c-panel);color:var(--c-text-sub);font-size:14px}.notif-wrap .notif-bell:hover{background:var(--c-primary-soft);color:var(--c-primary);border-color:var(--c-primary)}.notif-wrap .notif-bell:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
.notif-wrap .notif-panel{background:var(--c-card);border-color:var(--c-border);color:var(--c-text);border-radius:9px;box-shadow:0 12px 32px #18395f24}.notif-wrap .notif-panel header{background:var(--c-panel);border-color:var(--c-border);padding:12px 14px;color:var(--c-text-strong)}.notif-wrap .notif-panel ul{max-height:min(380px,60vh);overscroll-behavior:contain;scrollbar-width:thin}.notif-wrap .notif-panel .notif-item{padding:12px 14px;border-color:var(--c-border)}.notif-wrap .notif-panel .notif-item.unread{background:var(--c-primary-soft)}.notif-wrap .notif-panel .notif-item-body-text,.notif-wrap .notif-panel .notif-item-meta{color:var(--c-text-sub)}.notif-wrap .notif-panel footer{background:var(--c-panel);border-color:var(--c-border);padding:10px}.notif-wrap .notif-panel footer a,.notif-wrap .notif-read-all-btn{color:var(--c-primary)}.notif-wrap .notif-kind-tag{border-radius:5px;padding:1px 6px}.notif-wrap .notif-kind-packaging{color:#0f766e}.notif-wrap .notif-badge{min-width:17px;box-sizing:border-box;background:var(--c-danger-red)}
@media(max-width:600px){.notif-wrap .notif-panel{position:fixed;top:68px;right:12px;width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 90px);overflow:auto}}