/* Custom DataTables Pagination using your color variables */
            .page-item.active .page-link {
                background-color: var(--primary-grey);
                border-color: var(--primary-grey);
                color: white;
            }
            
            .page-link {
                color: var(--primary-grey);
                border: 1px solid #dee2e6;
                padding: 0.375rem 0.75rem;
            }
            
            .page-link:hover {
                color: var(--dark-grey);
                background-color: var(--light-grey);
                border-color: #dee2e6;
            }
            
            .page-item.disabled .page-link {
                color: #6c757d;
            }
            
            /* Search box styling */
            div.dataTables_wrapper div.dataTables_filter input {
                border: 1px solid #ced4da;
                border-radius: 0.25rem;
                padding: 0.375rem 0.75rem;
                color: var(--primary-black);
            }
            
            /* Show entries dropdown */
            div.dataTables_wrapper div.dataTables_length select {
                border: 1px solid #ced4da;
                border-radius: 0.25rem;
                padding: 0.375rem 0.rem;
                color: var(--primary-black);
            }
        
                .department-staff-section {
                    padding: 40px 0;
                    background-color: white;
                }
        
                .department-staff-card {
                    background-color: white;
                    border-radius: 8px;
                    padding: 30px;
                    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
                    margin-bottom: 40px;
                }
        
                .card-header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    cursor: pointer;
                }
        
                .department-name {
                    color: var(--primary-black);
                    font-weight: 700;
                    margin-bottom: 15px;
                    position: relative;
                    padding-bottom: 10px;
                    flex-grow: 1;
                }
        
                .department-name:after {
                    content: '';
                    position: absolute;
                    width: 50px;
                    height: 3px;
                    background-color: var(--primary-yellow);
                    bottom: 0;
                    left: 0;
                }
        
                .department-head {
                    color: var(--dark-grey);
                    font-size: 18px;
                    margin-bottom: 25px;
                }
        
                .toggle-btn {
                    background: none;
                    border: none;
                    font-size: 20px;
                    color: var(--primary-black);
                    cursor: pointer;
                    transition: transform 0.3s ease;
                    padding: 5px 10px;
                }
        
                .toggle-btn.active {
                    transform: rotate(180deg);
                }
        
                .table-responsive {
                    transition: all 0.3s ease;
                    overflow: hidden;
                }
        
                .department-staff-table {
                    width: 100%;
                    border-collapse: separate;
                    border-spacing: 0;
                    border-radius: 8px;
                    overflow: hidden;
                }
        
                .department-staff-table thead {
                    background-color: var(--primary-black);
                    color: white;
                }
        
                .department-staff-table th {
                    border-bottom: none;
                    font-weight: 600;
                    text-transform: uppercase;
                    font-size: 14px;
                    padding: 15px;
                }
        
                .department-staff-table td {
                    padding: 12px 15px;
                    vertical-align: middle;
                    border-top: 1px solid #eee;
                }
        
                .department-staff-table tbody tr:last-child td {
                    border-bottom: none;
                }
        
                .department-staff-table tbody tr:hover {
                    background-color: rgba(232, 215, 184, 0.1);
                }