/* Hide the 5th (Waivers) and 6th (Driver's License) columns in the student table */
#student-table th:nth-child(5),
#student-table td:nth-child(5),
#student-table th:nth-child(6),
#student-table td:nth-child(6) {
    display: none;
}

/* General Styling */
.wpwrap {
    height: 100%;
}

.wrap h1 {
    font-size: 2.2em;
    margin-bottom: 20px;
    color: #333;
}

.class-container {
    margin-bottom: 30px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    overflow: hidden;
    max-height: 0;
    padding: 0;
    display: none;
}

#student-search-form {
    margin-top: 20px;
}

.tablenav-pages {
    margin-right: 20px;
}

.class-container.open {
    max-height: 1000px;
    padding: 20px;
    display: block;
}

/* Archived Classes Section */
.archive-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.archive-dropdown.open {
    max-height: 1000px;
}

.archive-list {
    list-style-type: none;
    padding-left: 0;
}

.archive-list li {
    margin-bottom: 10px;
}

/* Archive Modal Styles - Using same styling as booking modal */
.archive-month-section {
    margin-bottom: 20px;
}

.toggle-month {
    background-color: #47A6BD;
    color: #fff;
    border: 2px solid transparent;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 1.1em;
    margin-bottom: 10px;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
    border-radius: 4px;
    position: relative;
    z-index: 10;
    user-select: none;
}

.toggle-month:hover {
    background-color: #20879d;
}

.toggle-month.open {
    background-color: #20879d;
}

.toggle-month.open span {
    transform: rotate(180deg);
}

.month-classes {
    padding-left: 20px;
    transition: none !important;
}

.archive-class-date {
    display: block;
    padding: 8px 12px;
    margin: 4px 0;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s;
}

.archive-class-date:hover {
    background: #e9e9e9;
    text-decoration: none;
    color: #333;
}

.pagination {
    margin-top: 20px;
}

.pagination button {
    background-color: #47A6BD;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    margin-right: 5px;
}

.pagination button:hover {
    background-color: #20879d;
}

/* Button Styles */
button.toggle-class, button.toggle-archive {
    background-color: #47A6BD;
    color: #fff;
    border: 2px solid transparent;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 1.3em;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

button.toggle-class:hover, button.toggle-archive:hover {
    background-color: #20879d;
}

button.toggle-class.open, button.toggle-archive.open {
    background-color: #20879d;
    color: #ffffff;
    border: 2px solid #20879d;
}

/* Grayed out buttons for classes with no dates */
button.no-dates-toggle {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border-color: #bbb;
}

button.no-dates-toggle:hover {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border-color: #bbb;
}

/* Class Dashboard Grid */
.class-dashboard-grid {
    display: flex;
    flex-wrap: wrap;
}

.class-dashboard-column {
    flex: 1 1 15%;
    max-width: 100%;
    background: #f9f9f9;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.archive-column {
    flex: 1 1 50%;
}

.class-dashboard-column h2 {
    font-size: 1.5em;
    margin-bottom: 15px;
}

button.toggle-class {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Style for classes that have no upcoming dates */
button.toggle-class.disabled {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border-color: #bbb;
}

button.toggle-class.disabled:hover {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border-color: #bbb;
}

/* Responsive Adjustments for Class Dashboard */
@media (max-width: 768px) {
    .class-dashboard-column, .archive-column {
        flex: 1 1 50%;
    }
}

@media (max-width: 480px) {
    .class-dashboard-column, .archive-column {
        flex: 1 1 100%;
    }
}

/* Button Styles with Icons */
button.toggle-class, button.toggle-date {
    background-color: #47A6BD;
    color: #fff;
    border: 2px solid transparent;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 1.3em;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

button.toggle-class:hover, button.toggle-date:hover {
    background-color: #20879d;
}

button.toggle-class.open, button.toggle-date.open {
    background-color: #20879d;
    color: #ffffff;
    border: 2px solid #20879d;
}

/* Arrow Icon for Visual Indicator */
button.toggle-class::after, button.toggle-date::after {
    content: "▼";
    font-size: 1.1em;
    transition: transform 0.3s ease;
}

button.toggle-class.open::after, button.toggle-date.open::after {
    transform: rotate(-180deg); /* Rotates the arrow when open */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    button.toggle-class, button.toggle-date {
        font-size: 1.1em;
    }

    table.widefat th, table.widefat td {
        font-size: 14px;
        padding: 10px;
    }
    

}

@media (max-width: 480px) {
    button.toggle-class, button.toggle-date {
        font-size: 1em;
        padding: 10px;
    }

    table.widefat th, table.widefat td {
        font-size: 12px;
        padding: 8px;
    }
    

}

/* General Modal Styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 9999;
    left: 60%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 95%; /* Updated width to be 75% of the screen */
    background-color: transparent; /* Removed background color */
}

/* Consistent Modal Content Styling */
.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    width: 100%;
    max-width: 750px;
    border-radius: 10px;
    min-height: 650px;
    position: relative; /* Ensures close button is positioned properly */
}

/* Consistent Close Button Styling */
.close, .close-booking, .close-past-classes {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close:hover,
.close:focus,
.close-booking:hover,
.close-booking:focus,
.close-past-classes:hover,
.close-past-classes:focus {
    color: black;
    text-decoration: none;
}

/* Adjustments for Larger Modals */
#bookingModal .modal-content,
#pastClassesModal .modal-content {
    width: 90%;
    max-width: 1200px;
}

/* Add this section for Class View modal */
#classViewModal .modal-content {
    width: 80%;
    max-width: 1200px; /* Increased by 200px */
}

/* Ensure checkmarks are centered */
td {
    text-align: left;
}

td.center {
    text-align: center;
}

.view-switcher {
    margin-bottom: 20px;
}

.view-switcher button {
    padding: 10px 20px;
    border: 2px solid transparent;
    background-color: #47A6BD;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
    margin-right: 10px;
}

.view-switcher button.active {
    background-color: #fff;
    color: #47A6BD;
    border: 2px solid #47A6BD;
}

.view-switcher button:hover {
    background-color: #fff;
    color: #47A6BD;
    border: 2px solid #47A6BD;
}

/* Student Table Styling */
#student-table {
    border-collapse: collapse;
    width: 100%;
    margin-top: 20px;
}

#student-table th, #student-table td {
    padding: 12px;
    border: 1px solid #ddd;
    font-weight: bold;
}

#student-table th {
    background-color: #f4f4f4;
    text-align: left;
    font-weight: bold;
}

/* Center the enrolled classes icon in the column */
#student-table td {
    text-align: left;
}

#student-table td .view-classes {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Condense the Notes and Student App columns */
#student-table th.notes-column, #student-table th.app-column,
#student-table td.notes-column, #student-table td.app-column {
    padding: 8px 12px;
    width: auto;
    text-align: center;
}

#student-table tbody tr:nth-child(odd) {
    background-color: #f9f9f9;
}

#student-table tbody tr:nth-child(even) {
    background-color: #f1f1f1;
}

#student-table td ul {
    list-style-type: none;
    padding-left: 0;
}

#student-table td ul li {
    margin-bottom: 5px;
}

/* Center the edit icon and adjust column width */
#student-table td:last-child {
    width: 10%;
    text-align: center;
}

/* Modal styling for past classes */
#pastClassesModal .modal-content {
    width: 70%;
    max-width: 600px;
}

/* Responsive adjustments for the new columns */
@media (max-width: 768px) {
    #student-table th, #student-table td {
        font-size: 14px;
    }
    #pastClassesModal .modal-content {
        width: 90%;
    }
    .modal {
        width: 100%;
        left: 50%;
        top: 50%;
    }
    .widefat {
        width: 375px;
    }
}

@media (max-width: 480px) {
    #student-table th, #student-table td {
        font-size: 12px;
    }
}

/* Grayed out style for no scheduled classes */
.no-dates {
    color: #999;
    font-style: italic;
}

/* Updated styling for class date buttons */
.open-booking-modal {
    display: block;
    margin-bottom: 5px;
    background-color: #47A6BD;
    color: white;
    padding: 10px 15px;
    border: none;
    cursor: pointer;
    text-align: left;
    width: 90%;
}

.open-booking-modal:hover {
    background-color: #20879d;
}

/* CSS to adjust column widths */
#bookingDetails table.widefat.fixed {
    width: 100%; /* Ensure table takes full width */
}

#bookingDetails table.widefat.fixed th:nth-child(2),
#bookingDetails table.widefat.fixed td:nth-child(2) {
    width: 35%; /* Widen the Email column */
}

#bookingDetails table.widefat.fixed th:nth-child(4),
#bookingDetails table.widefat.fixed td:nth-child(4),
#bookingDetails table.widefat.fixed th:nth-child(5),
#bookingDetails table.widefat.fixed td:nth-child(5) {
    width: 10%; /* Narrow the Rental and First Time columns */
}

/* CSS for table styling */
#bookingDetails table.widefat.fixed {
    width: 100%; /* Ensure the table takes full width */
    border-collapse: collapse; /* Make borders shared between cells */
}

#bookingDetails table.widefat.fixed tbody tr {
    border-bottom: 0.5px solid #ccc; /* Light grey border between rows */
}

#bookingDetails table.widefat.fixed tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* Very light grey fill for odd rows */
}

#bookingDetails table.widefat.fixed tbody tr:nth-child(even) {
    background-color: #fff; /* White fill for even rows */
}

.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Style for classes with upcoming dates */
button.toggle-class, button.toggle-archive {
    background-color: #47A6BD;
    color: #fff;
    border: 2px solid transparent;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 1.3em;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

/* Disabled button style for classes with no dates */
button.toggle-class.no-dates-toggle {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border: 2px solid #bbb;
    padding: 12px 24px;
    font-size: 1.3em;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    transition: all 0.3s ease;
}

/* Ensure consistent size and look for the disabled state */
button.toggle-class.no-dates-toggle:hover {
    background-color: #ccc;
    color: #666;
    cursor: not-allowed;
    border-color: #bbb;
}

@media print {
    /* hide the 8th column if you want */
    td:nth-child(8), th:nth-child(8) {
        display: none !important;
    }
    /* also wrap text if you prefer, e.g. */
    table {
        white-space: normal !important;
    }
}