/**
 * WooCommerce Tables
 *
 * Table styles and order status badges
 *
 * @package BadassNetwork
 */

/* ==========================================================================
   TABLES
   ========================================================================== */

.woocommerce table.shop_table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 3px solid var(--color-border);
    box-shadow: var(--shadow);
}

.woocommerce table.shop_table thead {
    background: var(--color-text);
    color: white;
}

/* Header cells in thead - dark background */
.woocommerce table.shop_table thead th {
    padding: 16px 20px;
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    text-align: left;
    border-bottom: 3px solid var(--color-border);
    background: var(--color-text);
    color: white;
}

/* Row header cells in tbody/tfoot (e.g., order number, subtotal labels) - reset to look like td */
.woocommerce table.shop_table tbody th,
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tr th[scope="row"] {
    padding: 20px;
    border-bottom: 3px dashed var(--color-border);
    font-size: 14px;
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}

.woocommerce table.shop_table td {
    padding: 20px;
    border-bottom: 3px dashed var(--color-border);
    font-size: 14px;
}

.woocommerce table.shop_table tbody tr:last-child td,
.woocommerce table.shop_table tbody tr:last-child th[scope="row"],
.woocommerce table.shop_table tfoot tr:last-child td,
.woocommerce table.shop_table tfoot tr:last-child th {
    border-bottom: none;
}

.woocommerce table.shop_table tbody tr:hover td,
.woocommerce table.shop_table tbody tr:hover th[scope="row"],
.woocommerce table.shop_table tfoot tr:hover td,
.woocommerce table.shop_table tfoot tr:hover th {
    background: var(--color-bg);
}

.woocommerce table.shop_table .button {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-xs);
}

/* ==========================================================================
   ORDER STATUS - Manual class usage
   ========================================================================== */

.order-status {
    display: inline-block;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-status.completed,
.order-status.wc-completed {
    background: var(--color-mint);
}

.order-status.processing,
.order-status.wc-processing {
    background: var(--color-sun);
}

.order-status.pending,
.order-status.wc-pending {
    background: var(--color-bg);
}

.order-status.cancelled,
.order-status.wc-cancelled {
    background: var(--color-hot);
    color: white;
}

/* ==========================================================================
   WOOCOMMERCE ORDERS TABLE STATUS CELL
   Style as badge based on row status class
   ========================================================================== */

.woocommerce-orders-table__cell-order-status {
    position: relative;
    color: transparent;
    font-size: 11px;
}

.woocommerce-orders-table__cell-order-status::before {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-text);
}

/* Status variants based on row class */
.woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status::before {
    content: 'Completed';
    background: var(--color-mint);
}

.woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status::before {
    content: 'Processing';
    background: var(--color-sun);
}

.woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status::before,
.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before {
    content: 'Pending';
    background: var(--color-bg);
}

.woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status::before {
    content: 'On Hold';
}

.woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status::before {
    content: 'Cancelled';
    background: var(--color-hot);
    color: white;
}

.woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status::before {
    content: 'Refunded';
    background: var(--color-hot);
    color: white;
}

.woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status::before {
    content: 'Failed';
    background: var(--color-hot);
    color: white;
}

/* Subscription statuses */
.woocommerce-orders-table__row--status-active .woocommerce-orders-table__cell-order-status::before {
    content: 'Active';
    background: var(--color-mint);
}

.woocommerce-orders-table__row--status-expired .woocommerce-orders-table__cell-order-status::before {
    content: 'Expired';
    background: var(--color-bg);
}

.woocommerce-orders-table__row--status-pending-cancel .woocommerce-orders-table__cell-order-status::before {
    content: 'Pending Cancel';
    background: var(--color-sun);
}

.woocommerce-orders-table__row--status-switched .woocommerce-orders-table__cell-order-status::before {
    content: 'Switched';
    background: var(--color-bg);
}