.attendance-table {
    width: 100%; /* Full width for mobile */
    border-collapse: collapse; /* Remove gaps between cells */
}

.attendance-table th, .attendance-table td {
    padding: 10px; /* Add padding for touch targets */
    text-align: left; /* Align text to the left */
}

/* Card layout for attendance entries */
.attendance-card {
    background-color: var(--container-bg); /* White background for cards */
    border: 1px solid var(--input-border); /* Light border */
    border-radius: 8px; /* Rounded corners */
    margin: 10px 0; /* Space between cards */
    padding: 15px; /* Padding inside cards */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Responsive adjustments for text */
.attendance-card h3 {
    font-size: 1.5rem; /* Larger font for names */
    margin-bottom: 5px; /* Space below name */
}

.attendance-card p {
    font-size: 1rem; /* Regular font size for details */
    margin: 0; /* Remove default margin */
}

/* Adjust button styles for mobile */
.attendance-card button {
    width: 100%; /* Full width buttons */
    padding: 12px; /* Larger padding for touch targets */
    font-size: 1rem; /* Ensure readability */
    margin-top: 10px; /* Space above buttons */
}

/* Media query for further adjustments if necessary */
@media (max-width: 768px) {
    .attendance-card {
        padding: 10px; /* Adjust padding for smaller screens */
    }
}

/* Styles for the user list */
#users-list table {
    width: 100%; /* Full width for mobile */
    border-collapse: collapse; /* Remove gaps between cells */
    margin: 0; /* Ensure no margin */
    padding: 0; /* Ensure no padding */
}

#users-list th, #users-list td {
    padding: 10px; /* Add padding for touch targets */
    text-align: left; /* Align text to the left */
}

/* Card layout for user entries */
.user-card {
    background-color: var(--container-bg); /* White background for cards */
    border: 1px solid var(--input-border); /* Light border */
    border-radius: 8px; /* Rounded corners */
    margin: 10px 0; /* Space between cards */
    padding: 15px; /* Padding inside cards */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* Responsive adjustments for text */
.user-card h3 {
    font-size: 1.5rem; /* Larger font for names */
    margin-bottom: 5px; /* Space below name */
}

.user-card p {
    font-size: 1rem; /* Regular font size for details */
    margin: 0; /* Remove default margin */
}

/* Adjust button styles for mobile */
.user-card button {
    width: 100%; /* Full width buttons */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    padding: 12px; /* Larger padding for touch targets */
    font-size: 1rem; /* Ensure readability */
    margin-top: 10px; /* Space above buttons */
}

/* Adjust button styles for the users list */
#users-list button {
    width: auto; /* Change to auto width */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    padding: 8px; /* Smaller padding for touch targets */
    font-size: 0.9rem; /* Smaller font size */
    margin-top: 5px; /* Space above buttons */
}

/* New row for buttons */
.user-actions {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack buttons vertically */
    margin-top: 10px; /* Space above button row */
}

/* Styles for the children list */
#children-list table {
    width: 100%; /* Full width for mobile */
    border-collapse: collapse; /* Remove gaps between cells */
    margin: 0; /* Ensure no margin */
    padding: 0; /* Ensure no padding */
}

#children-list th, #children-list td {
    padding: 10px; /* Add padding for touch targets */
    text-align: left; /* Align text to the left */
}

/* Adjust button styles for the children list */
#children-list button {
    width: auto; /* Change to auto width */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    padding: 8px; /* Smaller padding for touch targets */
    font-size: 0.9rem; /* Smaller font size */
    margin-top: 5px; /* Space above buttons */
}

/* New row for buttons */
.child-actions {
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack buttons vertically */
    margin-top: 10px; /* Space above button row */
}

/* Media query for further adjustments if necessary */
@media (max-width: 768px) {
    #users-list table {
        width: 100%; /* Ensure the table is full width */
    }
    .user-card {
        margin: 5px 0; /* Reduce margin for smaller screens */
    }
}