/* High-priority notification and toast layer shared by patient/cashier pages. */
:root {
    --agraan-notification-z: 2147483000;
    --agraan-notification-primary: #0ea5e9;
    --agraan-notification-dark: #0f172a;
    --agraan-notification-muted: #64748b;
    --agraan-notification-border: #e2e8f0;
}

.notification-btn,
.notif-btn {
    position: relative !important;
    z-index: calc(var(--agraan-notification-z) + 1) !important;
}

.notification-dropdown,
.notif-dropdown {
    position: fixed !important;
    top: 4.75rem !important;
    right: 1rem !important;
    left: auto !important;
    width: min(380px, calc(100vw - 2rem)) !important;
    max-height: min(70vh, 480px) !important;
    overflow-y: auto !important;
    display: none !important;
    z-index: calc(var(--agraan-notification-z) + 2) !important;
    background: #ffffff !important;
    border: 1px solid var(--agraan-notification-border) !important;
    border-radius: 14px !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24) !important;
}

.notification-dropdown.show,
.notif-dropdown.show {
    display: block !important;
    animation: agraanNotifyIn 0.12s ease-out;
}

.notification-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #ffffff;
}

.notification-item {
    cursor: pointer;
}

.notification-item:hover {
    background: #f8fafc !important;
}

.notification-badge,
.notif-badge {
    z-index: calc(var(--agraan-notification-z) + 3) !important;
}

.toast-container {
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    bottom: auto !important;
    left: auto !important;
    width: min(380px, calc(100vw - 2rem)) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    z-index: var(--agraan-notification-z) !important;
    pointer-events: none !important;
}

.toast {
    pointer-events: auto !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.2) !important;
}

.toast.clickable {
    cursor: pointer !important;
}

@keyframes agraanNotifyIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@media print {
    .notification-dropdown,
    .notif-dropdown,
    .toast-container {
        display: none !important;
    }
}