/**
 * Admin Styles for Product Edit Page
 */

/* Scheduled Sales Section */
.msps-scheduled-sales-wrapper {
    border-top: 1px solid #ddd;
    padding-top: 20px;
    margin-top: 20px;
}

.msps-scheduled-sales-wrapper > p.form-field {
    margin-bottom: 15px;
}

.msps-toggle-section {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    background: #f0f0f1;
    border: 1px solid #8c8f94;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}

.msps-toggle-section:hover {
    background: #e0e0e1;
}

.msps-toggle-section .dashicons {
    color: #2271b1;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    margin-top: -2px;
}

.msps-content {
    padding: 15px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

/* Import Notice */
.msps-import-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.msps-import-notice p {
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.msps-import-notice .dashicons {
    color: #856404;
}

.msps-import-current-sale {
    margin-top: 10px;
}

/* Preserved Original Sale Notice */
.msps-preserved-notice {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    padding: 12px;
    margin-bottom: 15px;
    border-radius: 4px;
}

.msps-preserved-notice p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0c5460;
}

.msps-preserved-notice .dashicons {
    color: #0c5460;
}

/* Sales Table */
.msps-sales-table {
    margin: 0 0 20px;
}

.msps-sales-table th,
.msps-sales-table td {
    padding: 10px;
    vertical-align: middle;
}

.msps-sales-table tbody td {
    line-height: 1.5;
}

/* Variation sales table - exact same styles as simple products, forced */
.msps-variation-table {
    margin: 0 0 15px !important;
    width: 100% !important;
    border: 1px solid #c3c4c7 !important;
    border-spacing: 0 !important;
    border-collapse: collapse !important;
    background: #fff !important;
}

.msps-variation-table thead {
    background: #f6f7f7 !important;
}

.msps-variation-table thead th {
    padding: 10px !important;
    vertical-align: middle !important;
    text-align: left !important;
    font-weight: 600 !important;
    border-bottom: 1px solid #c3c4c7 !important;
    background: #f6f7f7 !important;
}

.msps-variation-table tbody tr {
    background: #fff !important;
}

.msps-variation-table tbody tr:nth-child(odd) {
    background: #f9f9f9 !important;
}

.msps-variation-table tbody td {
    padding: 10px !important;
    vertical-align: middle !important;
    text-align: left !important;
    line-height: 1.5 !important;
    border-bottom: 1px solid #e1e1e1 !important;
}

.msps-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 600;
}

.msps-status-scheduled {
    background: #e0f2ff;
    color: #0066cc;
}

.msps-status-active {
    background: #d4edda;
    color: #155724;
}

.msps-status-expired {
    background: #f8d7da;
    color: #721c24;
}

/*
 * Add Sale Form, shared by simple products and variations.
 *
 * WooCommerce styles the two panels very differently: the product panel floats
 * every label into a 150px column, while the variation panel stretches fields
 * to full width (partly from an ID selector, #variable_product_options). Left
 * alone, the same form looks like two different plugins. These rules impose one
 * layout on both, which is why they override so insistently.
 */
.msps-sale-form {
    background: #fff;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin: 15px 0;
}

.msps-sale-form h4 {
    margin: 0 0 12px;
    font-size: 13px;
}

.woocommerce_options_panel .msps-sale-form p.form-field,
.msps-variation-wrapper .msps-sale-form p.form-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
    margin: 0 0 12px !important;
    padding: 0 !important;
    float: none !important;
    font-size: 13px;
    line-height: 1.5 !important;
}

.woocommerce_options_panel .msps-sale-form label,
.msps-variation-wrapper .msps-sale-form label {
    display: block !important;
    flex: 0 0 200px;
    width: 200px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    font-weight: 600;
    line-height: 1.4 !important;
}

.woocommerce_options_panel .msps-sale-form input[type="number"],
.woocommerce_options_panel .msps-sale-form input[type="datetime-local"],
.woocommerce_options_panel .msps-sale-form select,
.msps-variation-wrapper .msps-sale-form input[type="number"],
.msps-variation-wrapper .msps-sale-form input[type="datetime-local"],
.msps-variation-wrapper .msps-sale-form select {
    flex: 0 1 300px;
    width: 300px !important;
    max-width: 100% !important;
    min-width: 0;
    margin: 0 !important;
    float: none !important;
}

/*
 * Hints and the price preview sit under the control, not under the label. The
 * basis discounts the indent, because a 100% basis plus the left margin would
 * push the text past the edge of the box instead of wrapping inside it.
 */
.msps-sale-form .description {
    flex: 1 0 calc(100% - 212px);
    box-sizing: border-box;
    margin: 4px 0 0 212px !important;
    padding: 0 !important;
    display: block !important;
    clear: none !important;
    color: #646970;
    font-style: italic;
}

.woocommerce_options_panel .msps-sale-form p.msps-form-actions,
.msps-variation-wrapper .msps-sale-form p.msps-form-actions {
    gap: 0 8px;
    margin-top: 15px !important;
    padding-left: 212px !important;
}

.msps-show-add-form {
    margin-top: 10px;
}

/*
 * Overlap Priority, same block in both panels.
 *
 * It gets the same card as the add form instead of a plain top rule: a bare
 * separator reads as the start of the next section, so in the variation panel
 * it looked like it belonged to the WooCommerce fields underneath.
 */
.msps-overlap-priority,
.msps-variation-priority {
    margin: 15px 0 0;
    padding: 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    clear: both;
}

.msps-overlap-priority .msps-priority-title,
.msps-variation-priority .msps-priority-title {
    margin: 0 0 10px !important;
    font-size: 13px;
    font-weight: 600;
}

.msps-overlap-priority .msps-priority-options,
.msps-variation-priority .msps-priority-options {
    display: flex !important;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0 !important;
    padding: 0 !important;
}

.msps-overlap-priority .msps-priority-label,
.msps-variation-priority .msps-priority-label {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    font-weight: normal;
    cursor: pointer;
    white-space: nowrap;
}

/*
 * Do not touch the radio's box. WordPress draws the selected dot with a floated
 * ::before of 1rem, so forcing a width here (auto included) collapses the box
 * and the dot renders as a half moon, which is what the variation panel did.
 */
.msps-overlap-priority .msps-priority-label input[type="radio"],
.msps-variation-priority .msps-priority-label input[type="radio"] {
    margin: 0 6px 0 0 !important;
    padding: 0 !important;
    float: none !important;
    vertical-align: middle;
}

.msps-overlap-priority .msps-priority-label span,
.msps-variation-priority .msps-priority-label span {
    display: inline !important;
    vertical-align: middle;
}

/* No Sales Message */
.msps-no-sales {
    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic;
}

/*
 * Variations
 *
 * WooCommerce already groups the variation pricing fields in its own container,
 * so a card here would be a box inside a box and our block would be the only
 * one indented. Keep just a separator and let this flow with the native fields.
 * The product data panel has no such container, which is why .msps-content
 * there does keep its card.
 */
.msps-variation-wrapper {
    margin: 15px 0 0;
    padding: 15px 0 0;
    border-top: 1px solid #e0e0e0;
}

.msps-variation-header {
    margin: 0 0 10px;
}

.msps-variation-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    background: #f0f0f1;
    border: 1px solid #8c8f94;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
}

.msps-variation-toggle:hover {
    background: #e0e0e1;
}

.msps-variation-toggle .dashicons {
    color: #2271b1;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
    vertical-align: middle;
    margin-top: -2px;
}

.msps-variation-content {
    padding-top: 10px;
}

/* Loading States */
.msps-loading {
    opacity: 0.6;
    pointer-events: none;
}

/*
 * Discount Types and Price Preview
 *
 * The preview sits right under the field being typed into, before the optional
 * limits, and is styled apart from the italic hints so it does not read as one
 * more note.
 */
.msps-price-preview .description,
.msps-variation-price-preview .description {
    padding: 8px 12px !important;
    background: #f0f6fc;
    border-left: 3px solid #2271b1;
    font-style: normal;
    color: #1d2327;
}

.msps-price-preview .msps-preview-value,
.msps-variation-price-preview .msps-preview-value {
    font-size: 14px;
    color: #1d2327;
}

.msps-price-notice-text {
    color: #856404;
}

.msps-price-unresolved {
    color: #b32d2e;
    font-weight: 600;
    cursor: help;
}

/* Responsive: stack label over control when there is no room for two columns */
@media screen and (max-width: 782px) {
    .msps-toggle-section {
        font-size: 13px;
        padding: 6px 10px;
    }

    .msps-sales-table {
        font-size: 12px;
    }

    .woocommerce_options_panel .msps-sale-form label,
    .msps-variation-wrapper .msps-sale-form label {
        flex: 1 0 100%;
        width: auto !important;
        margin-bottom: 4px !important;
    }

    .woocommerce_options_panel .msps-sale-form input[type="number"],
    .woocommerce_options_panel .msps-sale-form input[type="datetime-local"],
    .woocommerce_options_panel .msps-sale-form select,
    .msps-variation-wrapper .msps-sale-form input[type="number"],
    .msps-variation-wrapper .msps-sale-form input[type="datetime-local"],
    .msps-variation-wrapper .msps-sale-form select {
        flex: 1 0 100%;
        width: 100% !important;
    }

    .msps-sale-form .description {
        flex: 1 0 100%;
        margin-left: 0 !important;
    }

    .woocommerce_options_panel .msps-sale-form p.msps-form-actions,
    .msps-variation-wrapper .msps-sale-form p.msps-form-actions {
        padding-left: 0 !important;
    }
}