/* General table styling */
.widefat {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

.widefat th, .widefat td {
    border: 1px solid #ddd;
    padding: 8px;
}

.widefat th {
    background-color: #f1f1f1;
    text-align: left;
}

/* Form styling */
.mauk-form p {
    margin-bottom: 10px;
}

.mauk-form label {
    display: inline-block;
    width: 150px;
    font-weight: bold;
}

/* Toggle switch styling (for status, attendance etc.) */
.mauk-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.mauk-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mauk-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 24px;
}

.mauk-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.mauk-switch input:checked + .mauk-slider {
    background-color: #4CAF50;
}

.mauk-switch input:checked + .mauk-slider:before {
    transform: translateX(26px);
}

/* Present and AWOL Switch Styling */
.mauk-present-slider {
    background-color: #ccc;
}

.mauk-awol-slider {
    background-color: #ccc;
}

.mauk-present-switch input:checked + .mauk-present-slider {
    background-color: #4CAF50 !important;
}

.mauk-awol-switch input:checked + .mauk-awol-slider {
    background-color: #d63638 !important;
}

/* Ensure sliders stay colored when checked */
.mauk-present-toggle:checked + .mauk-present-slider {
    background-color: #4CAF50 !important;
}

.mauk-awol-toggle:checked + .mauk-awol-slider {
    background-color: #d63638 !important;
}

/* Select2 styling */
.select2-container--default .select2-selection--single {
    height: 34px;
    padding: 3px;
    border: 1px solid #ddd;
    border-radius: 3px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
}

/* Amount field styling */
input[name="amount"] {
    width: 120px !important;
    text-align: right;
}

/* Table amount column styling */
.widefat td:has(.amount-cell) {
    text-align: right;
    width: 100px;
}

/* Payment method dropdown */
select[name="payment_method"] {
    width: 200px !important;
}

/* Pagination styling */
.tablenav {
    height: 30px;
    margin: 6px 0 10px 0;
}

.tablenav-pages {
    float: right;
    margin: 0;
}

.tablenav-pages .displaying-num {
    margin-right: 10px;
    color: #646970;
}

.tablenav-pages .pagination-links {
    display: inline-block;
    vertical-align: middle;
}

.tablenav-pages .button {
    margin: 0 2px;
}

.tablenav-pages .paging-input {
    margin: 0 10px;
}

.tablenav-pages .current-page {
    font-weight: bold;
}

/* Table sorting enhancements */
.mauk-sortable th.sort-date:after {
    content: " 📅";
    font-size: 10px;
    opacity: 0.6;
}

/* New Additions */

/* Table sorting enhancements */
.mauk-sortable th {
    position: relative;
    padding-right: 20px !important;
    cursor: pointer !important;
}

.mauk-sortable th:hover {
    background-color: #e0e0e0 !important;
}

.mauk-sortable th.sort-asc:after {
    content: "▲";
    position: absolute;
    right: 8px;
    font-size: 12px;
    color: #0073aa;
}

.mauk-sortable th.sort-desc:after {
    content: "▼";
    position: absolute;
    right: 8px;
    font-size: 12px;
    color: #0073aa;
}

.mauk-sortable th:not(.sort-asc):not(.sort-desc):after {
    content: "↕";
    position: absolute;
    right: 8px;
    font-size: 10px;
    color: #ccc;
    opacity: 0.5;
}

.mauk-sortable th:hover:not(.sort-asc):not(.sort-desc):after {
    opacity: 0.8;
}