.header-notifications-link {
    position: relative;
}

.notification-badge {
    position: absolute;
    top: -6px;
    inset-inline-end: -7px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e02424;
    color: #fff;
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .18);
}

.notifications-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.notifications-heading__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
}

.notifications-list {
    display: grid;
    gap: 1rem;
}

.notification-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-inline-start: 4px solid transparent;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.notification-card--unread {
    border-inline-start-color: #e02424;
    background: #fffafb;
    box-shadow: 0 8px 24px rgba(224, 36, 36, .08);
}

.notification-card__icon {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #1a2f7a;
    background: #eaf0ff;
}

.notification-card__body {
    min-width: 0;
    flex: 1;
}

.notification-card__topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.notification-card h2 {
    margin: 0;
    font-size: 1.05rem;
}

.notification-card p {
    margin: .55rem 0;
    color: #4c5568;
    white-space: normal;
}

.notification-card time {
    color: #7a8394;
    font-size: .82rem;
}

.notification-card__state {
    flex: 0 0 auto;
    padding: .2rem .55rem;
    border-radius: 999px;
    background: #e02424;
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
}

.notification-card__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .75rem;
}

.notification-card__actions .btn-link {
    border: 0;
    background: transparent;
    color: #1a2f7a;
    padding: .35rem .5rem;
    cursor: pointer;
}

.notification-card__actions .btn-link:hover {
    text-decoration: underline;
}

@media (max-width: 720px) {
    .notifications-heading {
        display: block;
    }

    .notifications-heading__actions {
        justify-content: flex-start;
        margin-top: 1rem;
    }

    .notification-card {
        gap: .75rem;
    }
}

.notification-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1rem 0 1.25rem;
    padding: .45rem;
    background: #f3f6fb;
    border: 1px solid #e1e7f0;
    border-radius: 14px;
}

.notification-tabs a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .7rem .95rem;
    border-radius: 10px;
    color: #354052;
    text-decoration: none;
    font-weight: 700;
}

.notification-tabs a:hover,
.notification-tabs a.is-active {
    color: #fff;
    background: #1a2f7a;
}

.tab-count {
    min-width: 20px;
    padding: .1rem .35rem;
    border-radius: 999px;
    background: rgba(224, 36, 36, .12);
    color: #c31f2b;
    font-size: .75rem;
    text-align: center;
}

.notification-tabs a.is-active .tab-count {
    background: #fff;
    color: #1a2f7a;
}

.section-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.device-label-form {
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 210px;
}

.device-label-form .btn-link {
    white-space: nowrap;
    color: #1a2f7a;
    border: 0;
    background: transparent;
    padding: .25rem;
    cursor: pointer;
}

.device-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: .2rem .5rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
}

.status-pill--success { background: #e4f7ed; color: #167347; }
.status-pill--danger { background: #fde8eb; color: #b42332; }
.status-pill--muted { background: #eef1f5; color: #697386; }

@media (max-width: 760px) {
    .section-toolbar { display: block; }
    .section-toolbar > form,
    .section-toolbar > a { display: inline-flex; margin-top: .8rem; }
    .device-label-form { min-width: 180px; }
}

.push-diagnostics { margin-bottom: 1.25rem; }
.diagnostic-grid { display: flex; flex-wrap: wrap; gap: .55rem; }
.diagnostic-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .7rem;
    border: 1px solid #dfe5ee;
    border-radius: 999px;
    background: #fff;
    color: #526071;
    font-size: .86rem;
    font-weight: 700;
}
.diagnostic-item.is-ok { border-color: #bfe8d0; background: #effaf3; color: #167347; }
.diagnostic-item.is-failed { border-color: #f1bec5; background: #fff2f3; color: #b42332; }
.diagnostic-item.is-neutral { background: #f7f8fb; }
.push-permission-banner {
    position: fixed;
    z-index: 1050;
    inset-inline: 1rem;
    bottom: 1rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .65rem;
    padding: .8rem 1rem;
    border: 1px solid #c8d4f5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 35px rgba(20, 39, 86, .18);
}
.push-permission-banner strong { color: #1a2f7a; }
.push-permission-banner span { color: #526071; }
.push-permission-banner small { flex-basis: 100%; }

.notification-detail-card { max-width: 900px; margin-inline: auto; }
.notification-detail-card__header { display: flex; align-items: flex-start; gap: .85rem; }
.notification-detail-card__header h2 { margin: .15rem 0 0; }
.notification-detail-card__header .notification-card__state { margin-inline-start: auto; }
.notification-detail-card__type { color: #68758a; font-size: .85rem; font-weight: 700; }
.notification-detail-card__content { margin: 1.5rem 0; padding: 1.25rem; border: 1px solid #e7ebf2; border-radius: 12px; background: #fafbfe; color: #263247; font-size: 1.05rem; line-height: 2; white-space: normal; }
.notification-detail-card__meta { color: #6b778c; font-size: .9rem; margin-bottom: 1rem; }
.notification-detail-card__meta span { margin-inline-start: .5rem; }

/* تحسين تباين مركز الإشعارات */
.notifications-heading .page-intro,
.notifications-list .notification-card p,
.notifications-list .notification-card time,
.notification-detail-card__meta,
.notifications-toolbar .form-help { color: #4b5568; }
.notification-card { background: #ffffff; color: #25314d; border-color: #d9e0eb; }
.notification-card--unread { border-inline-start-color: #b42332; background: #fff8f8; box-shadow: 0 8px 24px rgba(180, 35, 50, .12); }
.notification-card h2, .notification-detail-card h2 { color: #14225a; }
.notification-card__state { background: #b42332; color: #ffffff; }
.notification-card__actions .btn-secondary,
.notifications-heading__actions .btn-secondary { color: #14225a; background: #ffffff; border-color: #aebbd2; }
.notification-card__actions .btn-secondary:hover,
.notifications-heading__actions .btn-secondary:hover { color: #ffffff; background: #14225a; border-color: #14225a; }
.notification-card__actions .btn-link { color: #14225a; font-weight: 800; }
.notification-card__actions .btn-link-danger { color: #a3202f; font-weight: 800; }
.notification-card__actions .btn-link-danger:hover { color: #ffffff; background: #a3202f; border-radius: 7px; padding-inline: .5rem; text-decoration: none; }
.notifications-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.notifications-filter-links, .notifications-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.notifications-filter-links a { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .7rem; border: 1px solid #cdd6e5; border-radius: 9px; color: #25314d; background: #ffffff; font-weight: 800; }
.notifications-filter-links a:hover, .notifications-filter-links a.is-active { color: #ffffff; background: #14225a; border-color: #14225a; }
.notifications-filter-links a span { min-width: 1.25rem; padding: .05rem .3rem; border-radius: 999px; color: #ffffff; background: #b42332; font-size: .75rem; text-align: center; }
.notifications-filter-links a.is-active span { color: #14225a; background: #ffffff; }
.notification-card__image { display: block; width: min(100%, 420px); max-height: 240px; object-fit: cover; margin: .8rem 0; border: 1px solid #d9e0eb; border-radius: 12px; }
.notification-detail-card__image { display: block; width: min(100%, 720px); max-height: 420px; object-fit: contain; margin: 1rem auto; border: 1px solid #d9e0eb; border-radius: 14px; background: #f6f8fc; }
.notification-image-preview { display: block; width: min(100%, 240px); max-height: 140px; object-fit: cover; margin-top: .7rem; border-radius: 10px; border: 1px solid #cdd6e5; }
@media (max-width: 720px) { .notifications-toolbar { display: block; } .notifications-bulk-actions { margin-top: .8rem; } .notifications-filter-links a { flex: 1 1 auto; justify-content: center; } }