/* ===============================
   Tables
   =============================== */

.responsive-staff-table {
    background: rgba(128, 128, 128, 0.4);
}

body.dark-mode .responsive-staff-table, .admin-table th{
    background: rgba(128, 128, 128, 0.4);
	color: black;
}



/* =============================================
   Staff Table Mobile Responsive
   ============================================= */
@media (max-width: 768px) {
    /* Wrap the table */
    .responsive-staff-table {
        width: 100%;
        overflow: hidden;
    }

    .responsive-staff-table table,
    .responsive-staff-table thead,
    .responsive-staff-table tbody,
    .responsive-staff-table th,
    .responsive-staff-table td,
    .responsive-staff-table tr {
        display: block;
        width: 100%;
    }

    /* Hide the table headers on mobile */
    .responsive-staff-table thead {
        display: none;
    }

    /* Each row as a card */
    .responsive-staff-table tr {
        margin-bottom: 10px;
        padding: 4px;
        /* background: #f9f9f9; */
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
        border-left: 4px solid #0073aa; /* colored edge for emphasis */
    }
	
	body.dark-mode .responsive-staff-table, .admin-table {
		background: rgba(128, 128, 128, 0.4);
	}

    /* Each cell stacked */
    .responsive-staff-table td {
        display: block;
        padding: 6px 0;
        text-align: left;
        font-size: 1rem;
        color: #333;
        border: none;
    }

    /* Alternate shading for better readability */
    .responsive-staff-table tr:nth-child(even) {
        background: rgba(158, 158, 158, 0.4);
    }
}