body.notification-center-open{overflow:hidden}
.notification-center-backdrop{position:fixed;inset:0;z-index:1085;background:rgba(15,23,42,.34);opacity:0;visibility:hidden;transition:.2s}
.notification-center-backdrop.is-open{opacity:1;visibility:visible}
.notification-center-drawer{position:fixed;top:0;right:0;z-index:1090;display:flex;flex-direction:column;width:min(470px,100vw);height:100vh;background:#f8fafc;border-left:1px solid #dbe3ee;box-shadow:-16px 0 38px rgba(15,23,42,.18);transform:translateX(102%);transition:transform .24s ease}
.notification-center-drawer.is-open{transform:translateX(0)}
.notification-center-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px;background:#fff;border-bottom:1px solid #e5eaf1}
.notification-center-heading{display:flex;gap:12px;min-width:0}
.notification-center-heading-icon,.notification-center-item-icon,.notification-toast-icon{display:inline-flex;align-items:center;justify-content:center;color:#0d6efd;background:#eaf2ff;border-radius:10px}
.notification-center-heading-icon{flex:0 0 40px;width:40px;height:40px;font-size:18px}
.notification-center-title-row{display:flex;align-items:center;gap:9px}
.notification-center-title-row h5{margin:0;color:#172033;font-size:1.14rem;font-weight:700}
.notification-center-heading p{margin:5px 0 0;color:#64748b;font-size:.84rem;line-height:1.35}
.notification-center-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 7px;color:#fff;background:#dc3545;border-radius:999px;font-size:.76rem;font-weight:700}
.notification-center-close,.notification-center-refresh,.notification-center-action,.notification-center-dismiss,.notification-center-footer button,.notification-toast-action,.notification-toast-close{border:0;background:transparent;cursor:pointer}
.notification-center-close{padding:0 3px;color:#64748b;font-size:1.8rem;line-height:1}
.notification-center-toolbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#fff;border-bottom:1px solid #e5eaf1}
.notification-center-tabs{display:inline-flex;gap:5px;padding:3px;background:#eef2f7;border-radius:9px}
.notification-center-tab{padding:6px 11px;color:#64748b;background:transparent;border:0;border-radius:7px;font-size:.78rem;font-weight:600;cursor:pointer}
.notification-center-tab.is-active{color:#0d6efd;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.1)}
.notification-center-refresh{width:32px;height:32px;color:#64748b;border-radius:8px}
.notification-center-refresh.is-loading i{animation:notification-center-spin .8s linear infinite}
@keyframes notification-center-spin{to{transform:rotate(360deg)}}
.notification-center-body{flex:1;min-height:0;padding:14px;overflow-y:auto}
.notification-center-state,.notification-center-empty{display:flex;align-items:center;justify-content:center;min-height:210px;color:#64748b;text-align:center}
.notification-center-state{gap:10px}
.notification-center-error{margin:12px 0;min-height:0;padding:14px;color:#b42318;background:#fff1f0;border:1px solid #ffccc7;border-radius:10px}
.notification-center-empty{flex-direction:column;padding:28px}
.notification-center-empty-icon{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;margin-bottom:13px;color:#64748b;background:#eef2f7;border-radius:50%;font-size:23px}
.notification-center-empty strong{color:#263247;font-size:.98rem}
.notification-center-empty p{max-width:310px;margin:6px 0 0;font-size:.84rem}
.notification-center-groups{display:flex;flex-direction:column;gap:15px}
.notification-center-group h6{margin:0 0 7px 3px;color:#7a8699;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.notification-center-item{position:relative;display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;padding:12px 38px 12px 12px;background:#fff;border:1px solid #dfe6ef;border-left:4px solid #0d6efd;border-radius:11px;box-shadow:0 3px 10px rgba(15,23,42,.05);transition:.15s}
.notification-center-item.is-read{opacity:.76}
.notification-center-item.severity-success,.notification-toast.severity-success{border-left-color:#198754}
.notification-center-item.severity-warning,.notification-toast.severity-warning{border-left-color:#f59f00}
.notification-center-item.severity-critical,.notification-toast.severity-critical{border-left-color:#dc3545}
.notification-center-item-icon{flex:0 0 32px;width:32px;height:32px}
.notification-center-item.severity-success .notification-center-item-icon,.notification-toast.severity-success .notification-toast-icon{color:#198754;background:#e9f7ef}
.notification-center-item.severity-warning .notification-center-item-icon,.notification-toast.severity-warning .notification-toast-icon{color:#b26a00;background:#fff4d6}
.notification-center-item.severity-critical .notification-center-item-icon,.notification-toast.severity-critical .notification-toast-icon{color:#dc3545;background:#feeeee}
.notification-center-item-content{min-width:0;flex:1;cursor:pointer}
.notification-center-item-title-row{display:flex;align-items:center;gap:8px}
.notification-center-item-title-row strong{overflow:hidden;color:#263247;font-size:.88rem;line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.notification-center-unread-dot{flex:0 0 7px;width:7px;height:7px;background:#0d6efd;border-radius:50%}
.notification-center-item p{display:-webkit-box;overflow:hidden;margin:5px 0 0;color:#536174;font-size:.8rem;line-height:1.42;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.notification-center-item-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;color:#8b96a8;font-size:.7rem}
.notification-center-action{padding:0;color:#0d6efd;font-size:.73rem;font-weight:700}
.notification-center-dismiss{position:absolute;top:9px;right:9px;width:25px;height:25px;color:#9aa4b4;border-radius:7px}
.notification-center-dismiss:hover{color:#dc3545;background:#fff1f0}
.notification-center-footer{display:flex;align-items:center;justify-content:center;min-height:50px;padding:9px 16px;background:#fff;border-top:1px solid #e5eaf1}
.notification-center-footer button{color:#0d6efd;font-size:.8rem;font-weight:600}
.notification-center-footer i{margin-right:6px}
.notification-center-navbar-trigger{position:relative}
.notification-center-navbar-badge{position:absolute;top:1px;right:0;display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;color:#fff;background:#dc3545;border:2px solid #fff;border-radius:999px;font-size:.6rem;font-weight:700;line-height:1}
.notification-toast-stack{position:fixed;right:18px;bottom:18px;z-index:1110;display:flex;flex-direction:column;width:min(380px,calc(100vw - 28px));gap:10px;pointer-events:none}
.notification-toast{position:relative;display:flex;align-items:flex-start;gap:11px;padding:13px 39px 13px 13px;color:#263247;background:rgba(255,255,255,.98);border:1px solid #dfe6ef;border-left:5px solid #0d6efd;border-radius:12px;box-shadow:0 14px 34px rgba(15,23,42,.2);opacity:0;pointer-events:auto;transform:translateY(16px) scale(.98);transition:.18s}
.notification-toast.is-visible{opacity:1;transform:translateY(0) scale(1)}
.notification-toast.is-leaving{opacity:0;transform:translateY(10px) scale(.98)}
.notification-toast-icon{flex:0 0 32px;width:32px;height:32px}
.notification-toast-content{min-width:0;flex:1}
.notification-toast-organization{display:inline-flex;max-width:100%;margin-bottom:4px;padding:2px 7px;overflow:hidden;color:#315a91;background:#edf4ff;border-radius:999px;font-size:.66rem;font-weight:700;letter-spacing:.02em;text-overflow:ellipsis;white-space:nowrap}
.notification-toast-content strong{display:block;color:#263247;font-size:.9rem;line-height:1.3}
.notification-toast-content p{display:-webkit-box;overflow:hidden;margin:4px 0 0;color:#536174;font-size:.8rem;line-height:1.4;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.notification-toast-action{margin-top:7px;padding:0;color:#0d6efd;font-size:.76rem;font-weight:700}
.notification-toast-close{position:absolute;top:6px;right:9px;color:#8b96a8;font-size:1.25rem;line-height:1}
@media(max-width:575.98px){.notification-center-drawer{width:100vw}.notification-center-header{padding:18px 16px}.notification-center-body{padding:10px}.notification-toast-stack{right:14px;bottom:14px;left:14px;width:auto}}
