.newNot {
    color: #fff !important;
    animation: blinkingBackground 2s infinite !important;
}

@keyframes blinkingBackground {
    0% {
        background-color: #fff0f0;
    }

    25% {
        background-color: #fff0f0;
    }

    50% {
        background-color: var(--red);
    }

    75% {
        background-color: #ff9694;
    }

    100% {
        background-color: #D4F1F4;
    }
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* ── modern alert notification bar ── */
.notBar {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 8px 6px;
    padding: 11px 16px;
    border-radius: 14px;
    background: linear-gradient(135deg, #fff6f1 0%, #ffe8e0 55%, #ffeede 100%);
    background-size: 200% 200%;
    border: 1px solid #ffd2c4;
    border-inline-start: 5px solid #e84118;
    box-shadow: 0 8px 22px rgba(232,65,24,.14), inset 0 1px 0 rgba(255,255,255,.6);
    /* NOT overflow:hidden — that clipped the count badges and the bell chip at
       the bar's rounded edges. The sheen below clips itself instead. */
    overflow: visible;
    flex: 0 0 auto;          /* never squeezed by the layout's column flex */
    animation: notbar-gradient 8s ease infinite, notbar-attention 2.4s ease-in-out infinite;
}
/* soft sheen sweeping across the alert (clipped to the bar's rounded shape) */
.notBar::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0;
    border-radius: 14px;
    overflow: hidden;
    -webkit-mask: linear-gradient(#000 0 0);
    background:
        linear-gradient(100deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%)
        no-repeat;
    background-size: 38% 100%;
    animation: notbar-sheen2 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes notbar-sheen2 {
    0%       { background-position: -45% 0; }
    60%,100% { background-position: 145% 0; }
}

/* pulsing bell chip */
.notBar-lead {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
    background: linear-gradient(135deg, #e84118, #ff6b3d);
    color: #fff; font-size: 15px;
    box-shadow: 0 4px 10px rgba(232,65,24,.35);
    animation: notbar-bell 1.6s ease-in-out infinite;
    transform-origin: top center;
}
.notBar-title {
    font-weight: 800; font-size: .9rem; color: #b3300f;
    margin-inline-end: 4px; white-space: nowrap;
}
.notBar-badge { margin-inline-end: 8px; }

/* action chips (kept as bootstrap buttons for the MDB modal triggers, restyled) */
.notBar .btn-warning {
    background: #fff !important;
    color: #b3300f !important;
    border: 1px solid #ffcdbb !important;
    border-radius: 999px !important;
    font-weight: 800 !important;
    box-shadow: 0 3px 8px rgba(232,65,24,.12) !important;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.notBar .btn-warning:hover {
    background: #fff3ee !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(232,65,24,.22) !important;
}
.notBar .badge-danger {
    background: #e84118 !important;
    box-shadow: 0 0 0 2px #fff;
}

@keyframes notbar-gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes notbar-attention { 0%,100% { box-shadow: 0 8px 22px rgba(232,65,24,.14), inset 0 1px 0 rgba(255,255,255,.6); } 50% { box-shadow: 0 10px 28px rgba(232,65,24,.30), inset 0 1px 0 rgba(255,255,255,.6); } }
@keyframes notbar-sheen { 0% { left: -45%; } 55%,100% { left: 130%; } }
@keyframes notbar-bell { 0%,60%,100% { transform: rotate(0); } 70% { transform: rotate(14deg); } 80% { transform: rotate(-10deg); } 90% { transform: rotate(6deg); } }