/* Custom styles for Inter font */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f0f4f8; /* Muted light blue-gray background */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 1rem; /* Added padding to body for better spacing on all sides */
    box-sizing: border-box; /* Ensures padding doesn't cause overflow */
}
/* Style for the custom modal */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.6); /* Darker overlay */
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content {
    background-color: #ffffff;
    margin: auto;
    padding: 24px;
    border-radius: 12px; /* Rounded corners */
    box-shadow: 0 6px 20px rgba(0,0,0,0.15); /* More prominent shadow */
    width: 90%;
    max-width: 450px;
    text-align: center;
}
.close-button {
    color: #9ca3af; /* Gray color */
    float: right;
    font-size: 32px; /* Larger close button */
    font-weight: bold;
    cursor: pointer;
}
.close-button:hover,
.close-button:focus {
    color: #1f2937; /* Darker gray on hover */
    text-decoration: none;
}
/* Style for image preview modal */
#imageModal .modal-content {
    max-width: 90%;
    max-height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Prevent modal content from overflowing if image is too large */
}
#imageModal img {
    max-width: 100%;
    max-height: 80vh; /* Limit image height to prevent overflow */
    object-fit: contain; /* Ensure the image fits within the boundaries */
    border-radius: 8px;
}
/* Specific styles for responsive table */
@media (max-width: 768px) {
    /* Ensures main content fills width on small screens */
    #mainContent {
        width: 100%;
        max-width: 100%;
        padding: 1rem; /* Adjust padding for smaller screens */
    }

    table, thead, tbody, th, td, tr {
        display: block;
    }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr {
        border: 1px solid #e5e7eb; /* Light border */
        margin-bottom: 0.75rem; /* More spacing between rows */
        border-radius: 8px;
    }
    td {
        border: none;
        border-bottom: 1px solid #eff6ff; /* Very light blue border */
        position: relative;
        padding-left: 50%; /* Adjusted for better spacing on mobile */
        text-align: right;
    }
    td:before {
        position: absolute;
        top: 8px; /* Adjusted vertical alignment */
        left: 8px; /* Adjusted horizontal alignment */
        width: 45%; /* Adjusted width for label */
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: 600; /* Semibold */
        color: #4b5563; /* Darker gray for labels */
    }
    /* Updated nth-of-type for new column */
    td:nth-of-type(1):before { content: "Name"; }
    td:nth-of-type(2):before { content: "Age"; }
    td:nth-of-type(3):before { content: "Mobile"; }
    td:nth-of-type(4):before { content: "Address"; }
    td:nth-of-type(5):before { content: "Govt ID"; }
    td:nth-of-type(6):before { content: "Fees"; }
    td:nth-of-type(7):before { content: "Due Date"; }
    td:nth-of-type(8):before { content: "Join Date"; }
    td:nth-of-type(9):before { content: "Payment Method"; }
    td:nth-of-type(10):before { content: "Gender"; }
    td:nth-of-type(11):before { content: "Plan"; }
    td:nth-of-type(12):before { content: "Join Weight"; }
    td:nth-of-type(13):before { content: "Govt ID Pic"; }
    td:nth-of-type(14):before { content: "Student Pic"; }
    td:nth-of-type(15):before { content: "Actions"; }
    td:last-child {
        border-bottom: 0;
    }

    /* Adjust button stacking on smaller screens */
    .flex-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    .flex-wrap > button, .flex-wrap > div {
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .flex-wrap > button + button {
        margin-top: 0.5rem;
    }
    /* Adjust search bar for better mobile fit */
    .mb-4.flex-col.sm\:flex-row {
        flex-direction: column;
        align-items: stretch;
    }
    .mb-4.flex-col.sm\:flex-row > * {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .mb-4.flex-col.sm\:flex-row > *:last-child {
        margin-bottom: 0;
    }
}