.admin-notif-wrapper {
        position: relative;
        display: inline-block;
    }

    .admin-portal-notifications {
        position: fixed;
        top: 20px;
        right: 28px;
        z-index: 1100;
    }

    .admin-portal-notifications.is-in-topbar {
        position: relative;
        inset: auto;
        z-index: 1100;
        margin-left: auto;
        margin-right: 12px;
        flex: 0 0 auto;
    }

    /* The profile link on older admin pages still carries Bootstrap's ms-auto.
       Once the sidebar bell is moved into the topbar, only the bell should
       consume the available space so both controls stay grouped at the right. */
    .admin-portal-notifications.is-in-topbar + .profile-pill {
        margin-left: 0 !important;
    }

    /* Legacy admin topbars also apply ms-auto directly to the profile link.
       The heading already provides the flexible space, so the account control
       must not create a second auto margin. */
    .app-surface > .topbar > .profile-pill.ms-auto {
        margin-left: 0 !important;
    }

    .admin-portal-notifications .admin-notif-bell-btn {
        width: 46px;
        height: 46px;
        border-width: 2px;
        font-size: 1.15rem;
        color: #0a4174;
        background: linear-gradient(145deg, #ffffff, #edf6fc);
        border-color: rgba(10, 65, 116, 0.42);
        box-shadow: 0 7px 18px rgba(10, 65, 116, 0.16);
    }

    .admin-portal-notifications .admin-notif-bell-btn.has-unread {
        animation: admin-bell-pulse 1.8s ease-in-out infinite;
    }

    @keyframes admin-bell-pulse {
        0%, 100% { box-shadow: 0 5px 16px rgba(10, 65, 116, 0.2); }
        50% { box-shadow: 0 5px 22px rgba(10, 65, 116, 0.48); }
    }

    @media (max-width: 640px) {
        .admin-portal-notifications { top: 12px; right: 68px; }
        .admin-portal-notifications.is-in-topbar {
            inset: auto;
            margin-left: auto;
            margin-right: 10px;
        }
    }

    .admin-notif-bell-btn {
        background: #FFFFFF;
        border: 1px solid var(--c-6EA2B3);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        position: relative;
        color: var(--c-001D39);
        transition: all 0.2s ease;
        box-shadow: 0 4px 16px rgba(0, 29, 57, 0.05);
    }

    .admin-notif-bell-btn:hover {
        border-color: var(--c-0A4174);
        transform: translateY(-2px);
        color: var(--c-0A4174);
    }

    .admin-notif-bell-btn.has-unread::after {
        content: "";
        position: absolute;
        inset: -4px;
        border: 1px solid rgba(220, 38, 38, 0.22);
        border-radius: 50%;
    }

    .admin-notif-badge {
        position: absolute;
        top: -3px;
        right: -3px;
        background: #dc2626;
        color: #ffffff;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 6px;
        border-radius: 9999px;
        border: 2px solid #ffffff;
        line-height: 1;
        display: none;
    }

    .admin-notif-badge.show {
        display: inline-block;
    }

    .admin-notif-panel {
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        width: min(340px, calc(100vw - 24px));
        background: #ffffff;
        border: 1px solid rgba(78, 142, 162, 0.25);
        border-radius: 14px;
        box-shadow: 0 12px 30px rgba(0, 29, 57, 0.15);
        display: none;
        flex-direction: column;
        z-index: 1060;
        overflow: hidden;
    }

    .admin-notif-panel.active {
        display: flex;
    }

    .admin-notif-header {
        padding: 12px 16px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .admin-notif-header h6 {
        font-size: 13px;
        font-weight: 700;
        color: var(--c-001D39);
        margin: 0;
    }

    .admin-notif-header small {
        display: block;
        margin-top: 2px;
        color: #64748b;
        font-size: 10.5px;
    }

    .notif-mark-all {
        border: 0;
        background: transparent;
        color: var(--c-0A4174);
        font-size: 11px;
        font-weight: 700;
        padding: 4px;
        cursor: pointer;
    }

    .admin-notif-list {
        max-height: 320px;
        overflow-y: auto;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .admin-notif-item {
        padding: 12px 16px;
        border-bottom: 1px solid #f1f5f9;
        transition: background 0.15s ease;
        cursor: pointer;
        text-decoration: none;
        display: flex;
        gap: 10px;
        position: relative;
    }

    .admin-notif-item.is-unread { background: #f0f7ff; }
    .notif-item-content { min-width: 0; flex: 1; }
    .notif-item-dot {
        width: 8px;
        height: 8px;
        margin-top: 5px;
        border-radius: 50%;
        background: transparent;
        flex: 0 0 auto;
    }
    .admin-notif-item.is-unread .notif-item-dot { background: #dc2626; box-shadow: 0 0 0 3px #fee2e2; }
    .admin-notif-title { color: #0f172a; font-size: 12.5px; font-weight: 750; line-height: 1.3; }

    .admin-notif-item:hover {
        background: #f8fafc;
    }

    .admin-notif-reg {
        font-family: 'JetBrains Mono', monospace;
        font-size: 11.5px;
        font-weight: 700;
        color: var(--c-0A4174);
    }

    .admin-notif-msg {
        font-size: 12px;
        color: #334155;
        line-height: 1.4;
        margin: 3px 0;
    }

    .admin-notif-time {
        font-size: 10.5px;
        color: #94a3b8;
        font-family: 'JetBrains Mono', monospace;
    }

    .admin-notif-empty {
        padding: 24px 16px;
        text-align: center;
        font-size: 12.5px;
        color: #64748b;
    }

    .admin-notif-empty i { display: block; font-size: 22px; margin-bottom: 6px; color: #94a3b8; }
    .admin-notif-empty span { display: block; }

    .activity-row-dot {
        display: inline-block;
        width: 8px;
        height: 8px;
        margin-right: 8px;
        border-radius: 50%;
        background: #dc2626;
        box-shadow: 0 0 0 3px #fee2e2;
        vertical-align: middle;
    }
    tr.has-unread-activity > td { background-color: rgba(239, 246, 255, 0.72); }