Notification deleted successfully!<style>
    /* Base table styling */
.table {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 0.95rem;
  border-collapse: collapse;
  background-color: #fff;
  color: #333;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 0 1px #ddd, 0 2px 8px rgba(0, 0, 0, 0.05);

}

/* Header row */
.table thead th {
  background: #4364F7;
  color: white;
  padding: 12px;
  text-align: left;
  font-weight: 700;  border-top: 1px solid #e9ecef;
}

/* Cell padding */
.table td, .table th {
  padding: 12px;
  vertical-align: middle;
  border: 1px solid #003366;

}
.table .dropdown {
 position:absolute!important;
 z-index:1001;
}

/* Zebra striping */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: #ccffff!important;
}

/* Hover effect */
.table-hover tbody tr:hover {
  background-color: #ccffff!important;
  transition: background-color 0.2s ease;
}

/* Color accents based on context (optional) */
.table .status-success {
  background-color: #d4edda;
  color: #155724;
}
.table .status-warning {
  background-color: #fff3cd;
  color: #856404;
}
.table .status-danger {
  background-color: #f8d7da;
  color: #721c24;
}
.table .status-info {
  background-color: #d1ecf1;
  color: #0c5460;
}

/* Optional rounded corners for first/last cells */

.table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
.table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}
/* Base button style inside tables */
.table .btn {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px;
  border: none;
  border-radius: 4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  color: #fff;
  white-space: nowrap;
  margin: 2.5px; 
  min-width: 120px; /* Set desired width */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Primary button */
.table .btn-primary {
  background-color: #0052D4;
}
.table .btn-primary:hover {
  background-color: #0041b3;
}

/* Success */
.table .btn-success {
  background-color: #28a745;
}
.table .btn-success:hover {
  background-color: #218838;
}

/* Warning */
.table .btn-warning {
  background-color: #ffc107;
  color: #212529;
}
.table .btn-warning:hover {
  background-color: #e0a800;
}

/* Danger */
.table .btn-danger {
  background-color: #dc3545;
}
.table .btn-danger:hover {
  background-color: #c82333;
}

/* Info */
.table .btn-info {
  background-color: #17a2b8;
}
.table .btn-info:hover {
  background-color: #138496;
}

/* Optional subtle animation */
.table .btn:active {
  transform: scale(0.96);
}

/* Optional focus outline */
.table .btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 82, 212, 0.3);
}



@media (max-width: 768px) {

  /* Hide table head for card mode */
  .responsive-table thead {
    display: none;
  }
.responsive-table, .container{
    padding:0px;


}

  /* Card-like row style */
  .responsive-table tr {
    display: block;
    margin:1rem 0.2rem;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0.75rem;
    box-shadow: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset; 
   
  }

  /* Cell style inside cards */
  .responsive-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    text-align: right;
    border: none;
    border-bottom: 2px solid #99ccff;
    padding-left: 10px;
    padding-right: 10px;
 
  }

  .responsive-table td:last-child {
    border-bottom: none; 
  }

  /* Label for each field (left side) */
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #0073e6!important;

    text-align: left;
    display: inline-block;
  width: 120px;         /* ✅ fixed width for label */
  min-width: 100px;     /* ensures consistent spacing */
  text-align: left;
  margin-right: 10px;   /* spacing between label and value */
  flex-shrink: 0;       /* prevents label from shrinking */
  }
  /* ✅ Fix for button columns only */
.responsive-table td.action-cell {
  display: flex;
  flex-wrap: wrap;          /* allow multiple buttons to wrap */
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;              /* spacing between buttons */
  text-align: left;
 
}

.responsive-table td.action-cell::before {
  flex: 1 1 100%;           /* label moves to top if needed */
  text-align: left;
  margin-bottom: 0.25rem;
}

  /* Base button style inside tables */
.table .btn {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 6px;
  border: none;
  border-radius: 4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;

  white-space: nowrap;
  margin: .15rem ; 
  width:40%; /* Set desired width */
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
}

.modal-header{
    background: #0099ff;
    color:white;
}
.modal-footer{
    background: #ecf2f9;
    color:white;
}

</style>
<div class="container mt-4">
    <!-- Modal for Creating New Notification -->
    <div id="createModal" class="modal">
        <div class="modal-content">
            <span class="close" id="closeCreateModal">&times;</span>
            <h2>Create Notification</h2>
            <form id="createForm" method="POST" action="Communication/manage_staff_notifications.php">
                <label for="educator_id">Educator ID:</label>
                <input type="number" name="educator_id"><br>

                <label for="staff_id">Staff ID:</label>
                <input type="number" name="staff_id"><br>

                <label for="message">Message:</label>
                <textarea name="message" required></textarea><br>

                <label for="category">Category:</label>
                <select name="category">
                    <option value="general">General</option>
                    <option value="assignment">Assignment</option>
                    <option value="announcement">Announcement</option>
                    <option value="exam">Exam</option>
                    <option value="reminder">Reminder</option>
                    <option value="other">Other</option>
                </select><br>

                <button type="submit" name="create">Create Notification</button>
            </form>
        </div>
    </div>

    <!-- List Notifications with Edit & Delete Links -->
    <h3>Manage Online Staff Notifications</h3><hr>
    <button id="openCreateModal" class="btn btn-success btn-lg my-3">Create New Notification</button><hr>
    No notifications found.
    <!-- Modal for Editing Notification -->
    <div id="editModal" class="modal">
        <div class="modal-content">
            <span class="close" id="closeEditModal">&times;</span>
            <h2>Edit Notification</h2>
            <form id="editForm" method="POST" action="Communication/manage_staff_notifications.php">
                <input type="hidden" name="id" id="editId">
                <label for="educator_id">Educator ID:</label>
                <input type="number" name="educator_id" id="editEducatorId"><br>

                <label for="staff_id">Staff ID:</label>
                <input type="number" name="staff_id" id="editStaffId"><br>

                <label for="message">Message:</label>
                <textarea name="message" id="editMessage" required></textarea><br>

                <label for="category">Category:</label>
                <input type="text" name="category" id="editCategory"><br>

                <label for="is_read">Is Read:</label>
                <input type="checkbox" name="is_read" id="editIsRead" value="1"><br>

                <button type="submit" name="update">Update Notification</button>
            </form>
        </div>
    </div>
</div>

<!-- JavaScript for Modal Handling -->
<script>
    // Open Create Modal
    document.getElementById("openCreateModal").onclick = function() {
        document.getElementById("createModal").style.display = "block";
    };

    // Close Create Modal
    document.getElementById("closeCreateModal").onclick = function() {
        document.getElementById("createModal").style.display = "none";
    };

    // Open Edit Modal
    document.querySelectorAll('.editBtn').forEach(function(btn) {
        btn.onclick = function() {
            // Populate the form fields with the existing data
            document.getElementById("editId").value = this.getAttribute('data-id');
            document.getElementById("editEducatorId").value = this.getAttribute('data-educator_id');
            document.getElementById("editStaffId").value = this.getAttribute('data-staff_id');
            document.getElementById("editMessage").value = this.getAttribute('data-message');
            document.getElementById("editCategory").value = this.getAttribute('data-category');
            document.getElementById("editIsRead").checked = this.getAttribute('data-is_read') == '1';

            // Show the modal
            document.getElementById("editModal").style.display = "block";
        };
    });

    // Close Edit Modal
    document.getElementById("closeEditModal").onclick = function() {
        document.getElementById("editModal").style.display = "none";
    };

    // Close modals when clicked outside
    window.onclick = function(event) {
        if (event.target == document.getElementById("createModal")) {
            document.getElementById("createModal").style.display = "none";
        } else if (event.target == document.getElementById("editModal")) {
            document.getElementById("editModal").style.display = "none";
        }
    };
</script>