/**
 * Multi-variation cart - Table styles
 *
 * @package fc-propella
 * @since   1.1.0
 */

/* -------------------------------------------------------------------
 * Design tokens
 * ------------------------------------------------------------------- */

.propella-mvc-wrap {
    --mvc-border:        #e5e5e5;
    --mvc-border-strong: #cccccc;
    --mvc-bg-head:       #fafafa;
    --mvc-bg-row:        #ffffff;
    --mvc-bg-row-hover:  #f7f7f7;
    --mvc-bg-row-active: #f0f7ff;
    --mvc-bg-disabled:   #f5f5f5;
    --mvc-bg-status:     #fafbfc;
    --mvc-text:          #333333;
    --mvc-text-muted:    #888888;
    --mvc-text-disabled: #aaaaaa;
    --mvc-error:         #c0392b;
    --mvc-error-bg:      #fdecea;
    --mvc-success:       #2e7d32;
    --mvc-success-bg:    #e8f5e9;
    --mvc-accent:        #890457;
    --mvc-info:          #856404;
    --mvc-info-bg:       #fff8e1;
    --mvc-info-border:   #ffd54f;
    --mvc-radius:        4px;
    --mvc-scroll-max:    500px;
}

/* -------------------------------------------------------------------
 * Wrapper
 * ------------------------------------------------------------------- */

.propella-mvc-wrap {
    /* margin: 24px 0; */
    color: var(--mvc-text);
}

/* -------------------------------------------------------------------
 * Logged-out notice
 * ------------------------------------------------------------------- */

.propella-mvc-login-notice {
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--mvc-info-bg);
    border: 1px solid var(--mvc-info-border);
    border-radius: var(--mvc-radius);
    text-align: center;
    font-size: 15px;
}

.propella-mvc-login-notice a {
    color: var(--mvc-accent);
    font-weight: 600;
    text-decoration: underline;
}

/* -------------------------------------------------------------------
 * Scrollable table container
 * ------------------------------------------------------------------- */

.propella-mvc-table-scroll {
    max-height: var(--mvc-scroll-max);
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--mvc-border);
    border-radius: var(--mvc-radius);
    background: var(--mvc-bg-row);
    scrollbar-width: thin;
    scrollbar-color: var(--mvc-border-strong) transparent;
}

.propella-mvc-table-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.propella-mvc-table-scroll::-webkit-scrollbar-thumb {
    background: var(--mvc-border-strong);
    border-radius: 4px;
}

.propella-mvc-table-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--mvc-text-muted);
}

/* -------------------------------------------------------------------
 * Table structure
 * ------------------------------------------------------------------- */

.propella-mvc-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--mvc-bg-row);
    margin: 0;
}

.propella-mvc-table thead th {
    background: var(--mvc-bg-head);
    padding: 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: var(--mvc-text);
    border-bottom: 2px solid var(--mvc-border-strong);
    position: sticky;
    top: 0;
    z-index: 2;
}

.propella-mvc-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mvc-border);
    vertical-align: middle;
    font-size: 14px;
}

/* Row states */
.propella-mvc-row:hover {
    background: var(--mvc-bg-row-hover);
}

.propella-mvc-row.is-selected,
.propella-mvc-row.is-selected:hover {
    background: var(--mvc-bg-row-active);
}

.propella-mvc-row.is-disabled {
    background: var(--mvc-bg-disabled);
    color: var(--mvc-text-disabled);
}

.propella-mvc-row.is-disabled:hover {
    background: var(--mvc-bg-disabled);
}

.propella-mvc-row.is-disabled .propella-mvc-name,
.propella-mvc-row.is-disabled .propella-mvc-sku,
.propella-mvc-row.is-disabled .propella-mvc-min-qty {
    color: var(--mvc-text-disabled);
}

.propella-mvc-row-has-error,
.propella-mvc-row-has-error:hover {
    background: var(--mvc-error-bg);
}

/* -------------------------------------------------------------------
 * Status row - holds stock messages and errors below each variation
 * ------------------------------------------------------------------- */

.propella-mvc-status-row td {
    padding: 0;
    background: var(--mvc-bg-status);
    border-bottom: 1px solid var(--mvc-border);
    border-top: none;
}

/* When the row above has an error, tint the status row too */
.propella-mvc-row-has-error + .propella-mvc-status-row td {
    background: var(--mvc-error-bg);
}

.propella-mvc-status-content {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.propella-mvc-status-content:empty {
    display: none;
}

/* Stock availability message */
.propella-mvc-stock-status {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--mvc-error);
}

.propella-mvc-stock-status:empty {
    display: none;
}

/* Validation error */
.propella-mvc-row-error {
    font-size: 13px;
    line-height: 1.4;
    color: var(--mvc-error);
    font-weight: 500;
}

.propella-mvc-row-error:empty {
    display: none;
}

/* -------------------------------------------------------------------
 * Column widths
 * ------------------------------------------------------------------- */

.col-select {
    width: 50px;
    text-align: center;
}

.col-image {
    width: 80px;
}

.col-name {
    min-width: 180px;
}

.col-sku {
    width: 130px;
}

.col-min-qty {
    width: 100px;
}

.col-price {
    width: 130px;
}

.col-qty {
    width: 100px;
}

.propella-mvc-table td.col-select,
.propella-mvc-table td.col-image {
    text-align: center;
}

/* -------------------------------------------------------------------
 * Cell-specific styles
 * ------------------------------------------------------------------- */

.propella-mvc-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    background-color: var(--mvc-accent);
}

.propella-mvc-checkbox:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.propella-mvc-image {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--mvc-radius);
    border: 1px solid var(--mvc-border);
    display: block;
    margin: 0 auto;
}

.propella-mvc-image-placeholder {
    width: 60px;
    height: 60px;
    border-radius: var(--mvc-radius);
    background: var(--mvc-bg-disabled);
    border: 1px dashed var(--mvc-border-strong);
    margin: 0 auto;
}

.propella-mvc-name {
    font-weight: 500;
}

.propella-mvc-sku {
    color: var(--mvc-text-muted);
    font-size: 13px;
    font-family: 'Courier New', Courier, monospace;
}

.propella-mvc-min-qty {
    color: var(--mvc-text-muted);
    font-size: 13px;
}

/* Price cell — clean, no inline stock status anymore */
.propella-mvc-price {
    position: relative;
}

.propella-mvc-price-value {
    font-weight: 700;
    font-size: 15px;
    color: var(--mvc-text);
}

.propella-mvc-price-placeholder {
    color: var(--mvc-text-muted);
    font-style: italic;
    font-size: 13px;
}

/* Quantity input */
.propella-mvc-qty {
    width: 80px;
    padding: 6px 8px;
    border: 1px solid var(--mvc-border-strong);
    border-radius: var(--mvc-radius);
    text-align: center;
    font-size: 14px;
}

.propella-mvc-qty:focus {
    outline: none;
    border-color: var(--mvc-accent);
}

.propella-mvc-qty:disabled {
    background: var(--mvc-bg-disabled);
    cursor: not-allowed;
}

.propella-mvc-row-has-error .propella-mvc-qty {
    border-color: var(--mvc-error);
}

/* -------------------------------------------------------------------
 * Loader (GIF)
 * ------------------------------------------------------------------- */

.propella-mvc-spinner {
    display: none;
    width: 80px;
    height: 16px;
    background-image: url('../images/preloader.gif');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    vertical-align: middle;
}

/* -------------------------------------------------------------------
 * Bulk actions
 * ------------------------------------------------------------------- */

.propella-mvc-bulk-actions {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.propella-mvc-bulk-add {
    padding: 12px 28px;
    border: none;
    border-radius: var(--mvc-radius);
    background: var(--mvc-accent);
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.05s;
}

.propella-mvc-bulk-add:hover:not(:disabled) {
    opacity: 0.9;
}

.propella-mvc-bulk-add:active:not(:disabled) {
    transform: translateY(1px);
}

.propella-mvc-bulk-add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.propella-mvc-bulk-message {
    display: none;
    flex: 1;
    min-width: 200px;
    padding: 10px 14px;
    border-radius: var(--mvc-radius);
    font-size: 14px;
    font-weight: 500;
}

.propella-mvc-bulk-message.is-success {
    background: var(--mvc-success-bg);
    color: var(--mvc-success);
    border: 1px solid var(--mvc-success);
}

.propella-mvc-bulk-message.is-error {
    background: var(--mvc-error-bg);
    color: var(--mvc-error);
    border: 1px solid var(--mvc-error);
}

/* -------------------------------------------------------------------
 * No variations / empty state
 * ------------------------------------------------------------------- */

.propella-mvc-no-variations {
    padding: 16px;
    background: var(--mvc-bg-head);
    border: 1px solid var(--mvc-border);
    border-radius: var(--mvc-radius);
    color: var(--mvc-text-muted);
    text-align: center;
    font-style: italic;
}

/* -------------------------------------------------------------------
 * Logged-out state
 * ------------------------------------------------------------------- */

.propella-mvc-wrap.is-logged-out .propella-mvc-checkbox,
.propella-mvc-wrap.is-logged-out .propella-mvc-qty {
    opacity: 0.6;
    cursor: not-allowed;
}

/* -------------------------------------------------------------------
 * Mobile responsive
 * ------------------------------------------------------------------- */

@media (max-width: 768px) {

    .propella-mvc-table-scroll {
        max-height: none;
        overflow: visible;
        border: none;
        border-radius: 0;
        background: transparent;
    }

    .propella-mvc-table thead {
        display: none;
    }

    .propella-mvc-table,
    .propella-mvc-table tbody {
        display: block;
        width: 100%;
    }

    .propella-mvc-row {
        display: block;
        border: 1px solid var(--mvc-border);
        border-radius: var(--mvc-radius);
        margin-bottom: 0;
        padding: 12px;
        background: var(--mvc-bg-row);
    }

    .propella-mvc-row.is-selected {
        border-color: var(--mvc-accent);
        border-width: 2px;
    }

    .propella-mvc-table tbody td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px dashed var(--mvc-border);
        text-align: left;
        width: auto;
    }

    .propella-mvc-table tbody td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--mvc-text-muted);
        font-size: 13px;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .propella-mvc-row td:last-child {
        border-bottom: none;
    }

    .propella-mvc-table td.col-image {
        justify-content: flex-start;
    }

    .propella-mvc-image,
    .propella-mvc-image-placeholder {
        width: 80px;
        height: 80px;
    }

    /* Status row on mobile - attached to row above as a panel */
    .propella-mvc-status-row {
        display: block;
        margin-bottom: 12px;
    }

    .propella-mvc-status-row td {
        display: block;
        border-left: 1px solid var(--mvc-border);
        border-right: 1px solid var(--mvc-border);
        border-bottom: 1px solid var(--mvc-border);
        border-bottom-left-radius: var(--mvc-radius);
        border-bottom-right-radius: var(--mvc-radius);
        margin-top: -1px;
    }

    .propella-mvc-status-row td::before {
        display: none;
    }

    /* Spacing — main row + status row form a unit */
    .propella-mvc-row {
        margin-bottom: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Standalone row when no status row visible */
    .propella-mvc-status-row[style*="display: none"] + .propella-mvc-row,
    .propella-mvc-row:not(:has(+ .propella-mvc-status-row:not([style*="display: none"]))) {
        margin-bottom: 12px;
        border-bottom-left-radius: var(--mvc-radius);
        border-bottom-right-radius: var(--mvc-radius);
    }

    .propella-mvc-qty {
        width: 80px;
    }

    .propella-mvc-bulk-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .propella-mvc-bulk-add {
        width: 100%;
    }
}

/* Clickable thumbnails in the variation table */
.propella-mvc-image {
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.propella-mvc-image:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}