.panel-notification-menu { position: relative; }

.panel-notification-toggle {
    position: relative;
    justify-content: center;
    min-width: 42px;
    padding-right: 10px !important;
    padding-left: 10px !important;
}

.panel-notification-badge {
    position: absolute;
    top: 2px;
    right: 1px;
    display: none;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    border-radius: 999px;
    padding: 0 4px;
    color: #fff;
    background: #e11d48;
    box-shadow: 0 5px 12px rgba(225, 29, 72, .3);
    font-size: .58rem;
    font-weight: 900;
    line-height: 14px;
}

.panel-notification-badge.is-visible { display: inline-flex; animation: order-badge-pop .3s ease both; }

.main-content #navbar-main.panel-topbar .panel-notification-dropdown,
.panel-notification-dropdown {
    width: 370px;
    max-width: calc(100vw - 24px);
    padding: 0 !important;
    overflow: hidden;
}

.panel-notification-dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 15px 16px 13px;
    border-bottom: 1px solid #e8edf5;
    background: #fbfcff;
}

.panel-notification-dropdown-head small,
.panel-notification-dropdown-head strong { display: block; }
.panel-notification-dropdown-head small { color: #8490a7; font-size: .58rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.panel-notification-dropdown-head strong { margin-top: 3px; color: #17233c; font-size: .9rem; }

.panel-notification-count-label {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 5px 8px;
    color: #294b9b;
    background: #eaf0fb;
    font-size: .63rem;
    font-weight: 850;
}

.panel-notification-list { max-height: 360px; overflow-y: auto; }

.panel-notification-item {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 8px;
    align-items: center;
    gap: 10px;
    min-height: 76px;
    padding: 11px 14px;
    border-bottom: 1px solid #edf1f6;
    color: #3f4d68;
    background: #fff;
    text-decoration: none;
}

.panel-notification-item:hover { color: #26334f; background: #f8faff; text-decoration: none; }
.panel-notification-item.is-unread { background: #f3f6ff; }

.panel-notification-item-icon,
.notification-page-item-icon {
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #fff;
}

.panel-notification-item-icon { width: 40px; height: 40px; font-size: .9rem; }
.panel-notification-item-icon.is-waiter,
.notification-page-item-icon.is-waiter { background: linear-gradient(135deg, #e11d48, #f97316); }
.panel-notification-item-icon.is-order,
.notification-page-item-icon.is-order { background: linear-gradient(135deg, #2563eb, #6366f1); }
.panel-notification-item-icon.is-reservation,
.notification-page-item-icon.is-reservation { background: linear-gradient(135deg, #0f9f77, #2563eb); }
.panel-notification-item-icon.is-general,
.notification-page-item-icon.is-general { background: linear-gradient(135deg, #64748b, #94a3b8); }

.panel-notification-item-copy { min-width: 0; }
.panel-notification-item-copy strong,
.panel-notification-item-copy small,
.panel-notification-item-copy time { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panel-notification-item-copy strong { color: #25324d; font-size: .78rem; font-weight: 850; }
.panel-notification-item-copy small { margin-top: 3px; color: #6f7b92; font-size: .7rem; }
.panel-notification-item-copy time { margin-top: 4px; color: #9aa5b8; font-size: .62rem; font-weight: 700; }

.panel-notification-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: #e11d48; box-shadow: 0 0 0 4px rgba(225, 29, 72, .09); }

.panel-notification-empty {
    display: flex;
    min-height: 118px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    color: #8a96aa;
    font-size: .75rem;
}
.panel-notification-empty i { color: #22a06b; font-size: 1.35rem; }

.panel-notification-view-all {
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    color: #294b9b;
    background: #fbfcff;
    font-size: .73rem;
    font-weight: 850;
    text-decoration: none;
}
.panel-notification-view-all:hover { color: #203d82; background: #f1f5ff; text-decoration: none; }

.panel-waiter-toast .panel-order-toast-icon { background: linear-gradient(135deg, #e11d48, #f97316); }
.panel-reservation-toast .panel-order-toast-icon { background: linear-gradient(135deg, #0f9f77, #2563eb); }

.notification-page-hero {
    padding: 3.4rem 0 6.8rem;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.18), transparent 25rem),
        linear-gradient(135deg, #244a9a 0%, #4265bb 58%, #6048c9 100%);
}

.notification-page-hero-inner { display: flex; align-items: center; gap: 15px; color: #fff; }
.notification-page-hero-icon { display: grid; width: 54px; height: 54px; flex: 0 0 54px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 17px; background: rgba(255,255,255,.12); font-size: 1.25rem; }
.notification-page-hero small { display: block; margin-bottom: 3px; color: rgba(255,255,255,.68); font-size: .63rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.notification-page-hero h1 { margin: 0; color: #fff; font-size: 2rem; font-weight: 850; letter-spacing: -.035em; }
.notification-page-hero p { margin: .4rem 0 0; color: rgba(255,255,255,.72); font-size: .82rem; }
.notification-read-all-form { margin-left: auto; }
.notification-read-all-button { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; margin: 0; border: 1px solid rgba(255,255,255,.24); border-radius: 13px; color: #244a9a; background: #fff; font-size: .74rem; font-weight: 850; }

.notification-page-container { margin-top: -4.8rem; }
.notification-page-card { overflow: hidden; border: 1px solid #e5eaf2; border-radius: 24px; background: #fff; box-shadow: 0 22px 58px rgba(26, 43, 78, .12); }
.notification-page-card-head { display: flex; min-height: 68px; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid #e9edf4; background: #fbfcff; }
.notification-page-card-head span,
.notification-page-card-head strong { display: block; }
.notification-page-card-head span { color: #1e2b46; font-size: .9rem; font-weight: 850; }
.notification-page-card-head strong { margin-top: 3px; color: #8a96aa; font-size: .68rem; }

.notification-page-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 108px; padding: 17px 20px; border-bottom: 1px solid #edf1f6; background: #fff; scroll-margin-top: 95px; }
.notification-page-item.is-unread { border-left: 4px solid #e11d48; background: #f7f9ff; }
.notification-page-item-icon { width: 48px; height: 48px; font-size: 1rem; }
.notification-page-item-copy { min-width: 0; }
.notification-page-item-title { display: flex; align-items: center; gap: 8px; }
.notification-page-item-title strong { color: #1f2c47; font-size: .9rem; }
.notification-page-item-title span { border-radius: 999px; padding: 3px 7px; color: #b4233b; background: #ffe9ed; font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.notification-page-item-copy p { margin: .38rem 0 .45rem; color: #68758e; font-size: .8rem; line-height: 1.5; }
.notification-page-item-copy time { color: #98a3b6; font-size: .67rem; font-weight: 700; }
.notification-page-item-copy time i { margin-right: 4px; }
.notification-item-read-button { display: inline-flex; min-height: 38px; align-items: center; gap: 7px; border: 1px solid #dce4f1; border-radius: 11px; padding: 7px 10px; color: #294b9b; background: #fff; font-size: .68rem; font-weight: 850; cursor: pointer; }
.notification-item-read-button:hover { border-color: #b9c8e8; background: #eef3ff; }
.notification-read-state { display: inline-flex; align-items: center; gap: 5px; color: #8290a6; font-size: .67rem; font-weight: 750; }
.notification-read-state i { color: #22a06b; }
.notification-page-empty { display: flex; min-height: 300px; align-items: center; justify-content: center; flex-direction: column; padding: 32px; text-align: center; }
.notification-page-empty > span { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 20px; color: #64748b; background: #edf1f7; font-size: 1.35rem; }
.notification-page-empty strong { margin-top: 14px; color: #25324d; font-size: 1rem; }
.notification-page-empty p { max-width: 360px; margin: 7px 0 0; color: #8894a8; font-size: .78rem; }
.notification-page-pagination { display: flex; justify-content: flex-end; padding: 15px 18px; background: #fbfcff; }

@media (max-width: 767.98px) {
    .mobile-notification-toggle { display: grid; width: 42px; height: 42px; place-items: center; margin: 0 3px 0 0; padding: 0 !important; border-radius: 12px; color: #244a9a; background: #eef3fb; }
    .mobile-notification-toggle i { margin: 0; }
    body #sidenav-main > .container-fluid > .nav .panel-notification-menu-mobile .panel-notification-dropdown { right: -56px !important; width: min(350px, calc(100vw - 20px)); max-height: calc(100vh - 86px); }
    .notification-page-hero { padding: 2.1rem 0 6rem; }
    .notification-page-hero-inner { align-items: flex-start; flex-wrap: wrap; }
    .notification-page-hero h1 { font-size: 1.55rem; }
    .notification-page-hero p { max-width: 270px; }
    .notification-read-all-form { width: 100%; margin: 4px 0 0; }
    .notification-read-all-button { width: 100%; justify-content: center; }
    .notification-page-container { margin-top: -4.3rem; padding-right: 12px; padding-left: 12px; }
    .notification-page-card { border-radius: 19px; }
    .notification-page-item { grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 11px; padding: 15px 13px; }
    .notification-page-item-icon { width: 42px; height: 42px; }
    .notification-page-item > form,
    .notification-read-state { grid-column: 2; justify-self: start; }
    .notification-item-read-button { min-height: 34px; }
}