/* Payout Dashboard Styles */
.lms-sm-payout-table {
    width: 100%;
    border-collapse: collapse;
}

.lms-sm-payout-table thead tr {
    background: #d2dae2;
}

.lms-sm-payout-table th,
.lms-sm-payout-table td {
    padding: 10px; 
    border: 1px solid #D2DAE2;
    vertical-align: middle;
}

.lms-sm-payout-table th {
    color: #333;
}

/* --- Column Specific Styles --- */

/* Center align headers for specific columns */
.lms-sm-payout-table th.lms-sm-col-status,
.lms-sm-payout-table th.lms-sm-col-actions {
    text-align: center;
}

/* Period Column */
.lms-sm-payout-table .lms-sm-col-period {
    width: 50%;
}

/* Amount Column */
.lms-sm-payout-table .lms-sm-col-amount {
    width: 15%;
    text-align: right;
}

/* Status Column */
.lms-sm-payout-table .lms-sm-col-status {
    width: 15%;
    text-align: center;
}

/* Actions Column */
.lms-sm-payout-table .lms-sm-col-actions {
    width: 20%;
    text-align: center;
}

.lms-sm-payout-table .lms-sm-col-actions .button {
    display: inline-block; 
}

/* Custom WooCommerce Price Color */
.lms-sm-frontend-wrap .woocommerce-Price-amount {
    color: #f5f5f5; 
}

/* Modal Styles */
.lms-sm-modal-backdrop { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 999990; }
.lms-sm-modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; padding: 25px; border-radius: 8px; z-index: 999999; width: 90%; max-width: 600px; max-height: 80vh; overflow-y: auto; box-shadow: 0 4px 20px rgba(0,0,0,0.2); }
.lms-sm-modal h2,
.lms-sm-modal h3 { 
    margin-top: 0; margin-bottom: 20px; border-bottom: 1px solid #eee; padding-bottom: 10px; font-size: 20px; 
    padding-right: 30px; /* Add space for the close button */
}
.lms-sm-modal-close-x { position: absolute; top: 10px; right: 20px; font-size: 28px; cursor: pointer; border: none; background: none; line-height: 1; color: #666; }
.lms-sm-modal-close-x:hover { color: #000; }

/* Details Table Styles */
.lms-sm-details-table { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.lms-sm-details-table th, .lms-sm-details-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid #eee; font-size: 14px; }
.lms-sm-details-table tfoot th, .lms-sm-details-table tfoot td { font-weight: bold; background-color: #f9f9f9; border-top: 2px solid #ddd; }

.lms-sm-details-table th.lms-sm-align-right,
.lms-sm-details-table td.lms-sm-align-right {
    text-align: right;
}

/* Hidden Content */
.lms-sm-hidden-content {
    display: none;
}

/* Modal Footer */
.lms-sm-modal-footer {border-top: 1px solid #c3c4c7; text-align: right;}

/* Responsive Styles for Tables */
@media screen and (max-width: 768px) {
    .lms-sm-payout-table thead,
    .lms-sm-details-table thead {
        display: none; /* Hide table headers on mobile */
    }

    .lms-sm-payout-table tr,
    .lms-sm-details-table tr {
        display: block;
        border: 1px solid #ddd;
        margin-bottom: 15px;
        border-radius: 4px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .lms-sm-payout-table td,
    .lms-sm-details-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: right;
        padding: 10px;
        border-bottom: 1px solid #eee;
    }

    .lms-sm-payout-table td:last-child,
    .lms-sm-details-table td:last-child {
        border-bottom: none;
    }

    .lms-sm-payout-table td::before,
    .lms-sm-details-table td::before {
        content: attr(data-label);
        font-weight: bold;
        text-align: left;
        padding-right: 15px;
    }

    /* On mobile, ensure specific column alignments are overridden for the flex layout */
    .lms-sm-payout-table .lms-sm-col-period,
    .lms-sm-payout-table .lms-sm-col-amount,
    .lms-sm-payout-table .lms-sm-col-status,
    .lms-sm-payout-table .lms-sm-col-actions {
        width: 100%; /* Override desktop widths */
    }

    /* Center the button in the Actions column on mobile */
    .lms-sm-payout-table td.lms-sm-col-actions {
        justify-content: center;
    }

    /* Fix for modal footer alignment on mobile */
    .lms-sm-details-table tfoot tr {
        display: flex;
        justify-content: space-between;
    }
}