<div id="notifPanel" class="notification-panel card shadow-lg border-0 rounded-4"
    style="display:none; position:fixed; top:70px; right:20px; width:400px; max-height:550px; z-index:9999; animation: slideIn 0.3s ease-out;">
    <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
        <h6 class="mb-0 fw-bold"><i class="bi bi-bell me-2 text-primary"></i> Notifications</h6>
        <div class="d-flex gap-2">
            <button id="markAllRead"
                class="btn btn-link btn-sm text-primary p-0 text-decoration-none small fw-medium">Mark all as
                read</button>
            <button id="closeNotif" class="btn btn-light btn-sm rounded-circle p-1" style="line-height: 1;"><i
                    class="bi bi-x fs-5"></i></button>
        </div>
    </div>
    <div class="card-body p-0 overflow-auto" id="notifListContainer" style="max-height: 400px;">
        <div id="notifList" class="list-group list-group-flush">
            <!-- Loading State -->
            <div class="p-4 text-center" id="notifLoading">
                <div class="spinner-border spinner-border-sm text-primary" role="status"></div>
                <p class="text-muted small mt-2 mb-0">Fetching notifications...</p>
            </div>
            <!-- Empty State -->
            <div class="p-5 text-center d-none" id="notifEmpty">
                <i class="bi bi-chat-square-dots fs-1 text-light"></i>
                <p class="text-muted small mt-3">No new notifications</p>
            </div>
        </div>
    </div>
    <div class="card-footer bg-light border-top text-center py-2 rounded-bottom-4">
        <a href="#" class="text-primary text-decoration-none small fw-semibold">View all notifications</a>
    </div>
</div>

<style>
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .notif-item {
        padding: 1rem 1.25rem;
        transition: all 0.2s;
        border-left: 3px solid transparent;
    }

    .notif-item.unread {
        background-color: #f0f7ff;
        border-left-color: #0d6efd;
    }

    .notif-item:hover {
        background-color: #f8f9fa;
    }

    .notif-icon {
        width: 35px;
        height: 35px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
</style>
<?php /**PATH G:\wamp64\www\projects\attendance\resources\views/partials/_notifications-panel.blade.php ENDPATH**/ ?>