/* ========== Notification center ========== */

/* Bell sits in the sidebar and inherits `.sidebar a` base styling. */
.notif-bell-item {
    position: relative;
}

.notif-badge {
    position: absolute;
    top: 4px;
    left: 24px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--db-danger, #dc3545);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--db-sidebar-bg, rgba(0, 0, 0, 0.25));
}

/* Offcanvas panel — themed via design tokens so dark mode follows automatically. */
.notif-offcanvas {
    background: var(--db-surface, #ffffff);
    color: var(--db-ink, #171717);
    width: min(380px, 90vw);
}

.notif-offcanvas .offcanvas-header {
    border-bottom: 1px solid var(--db-hairline, #e3e3e3);
}

.notif-readall {
    font-size: 0.8rem;
    text-decoration: none;
    color: var(--db-accent, #3ecf8e);
}

.notif-item {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--db-hairline, #e3e3e3);
    border-radius: 10px;
    margin-bottom: 10px;
    background: var(--db-surface, #ffffff);
    text-decoration: none;
    color: inherit;
}

.notif-item.unread {
    border-left: 4px solid var(--db-accent, #3ecf8e);
}

.notif-title {
    font-weight: 700;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.notif-body {
    font-size: 0.875rem;
    color: var(--db-muted, #707070);
    white-space: pre-line;
    line-height: 1.5;
}

.notif-sev-warning .notif-title { color: #e0a800; }
.notif-sev-danger  .notif-title { color: var(--db-danger, #dc3545); }
.notif-sev-success .notif-title { color: #198754; }

.notif-action {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--db-accent, #3ecf8e);
    text-decoration: none;
}

.notif-action:hover { text-decoration: underline; }

.notif-meta {
    font-size: 0.75rem;
    color: var(--db-muted, #909090);
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notif-mark {
    font-size: 0.75rem;
    text-decoration: none;
}

.notif-empty {
    text-align: center;
    color: var(--db-muted, #888888);
    padding: 36px 12px;
}