/*
 * My Account — Dashboard Polish
 * ─────────────────────────────────────────────────────────────────────────────
 * Enhances the WooCommerce My Account page layout and navigation.
 *
 * Forward-compatibility strategy:
 *   - Selectors target WC's documented, stable class names only
 *   - Layout uses CSS grid with fallback to block flow
 *   - No assumptions about internal element types (<mark>, <span>, etc.)
 *   - All enhancements are additive — if WC changes markup, content
 *     falls back to WC's own default styling gracefully
 *   - No !important
 *
 * Loaded only on account pages via enqueue.php conditional.
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ── Page Layout ───────────────────────────────────────────────────────── */
/* Grid with sidebar nav. Falls back to stacked blocks if WC changes      */
/* the wrapper class in a future version.                                  */

.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: minmax(180px, 240px) 1fr;
    gap: var(--msk-space-8);
    align-items: start;
}

@media (max-width: 782px) {
    .woocommerce-account .woocommerce {
        grid-template-columns: 1fr;
    }
}

/* ── Navigation Sidebar ────────────────────────────────────────────────── */

.woocommerce-MyAccount-navigation {
    background: var(--msk-color-surface);
    border: 1px solid var(--msk-color-border);
    border-radius: var(--msk-radius-xl);
    padding: var(--msk-space-4);
}

@media (min-width: 783px) {
    .woocommerce-MyAccount-navigation {
        position: sticky;
        top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--msk-space-4));
    }
}

.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--msk-space-1);
}

.woocommerce-MyAccount-navigation ul li a {
    display: flex;
    align-items: center;
    gap: var(--msk-space-3);
    padding: var(--msk-space-3) var(--msk-space-4);
    border-radius: var(--msk-radius-md);
    font-weight: 500;
    font-size: var(--msk-font-size-sm);
    color: var(--msk-color-text-muted);
    text-decoration: none;
    transition:
        background-color var(--msk-duration-fast) var(--msk-ease-out),
        color            var(--msk-duration-fast) var(--msk-ease-out);
}

.woocommerce-MyAccount-navigation ul li a:hover {
    background-color: var(--msk-color-surface-alt);
    color: var(--msk-color-text-primary);
}

/* Active state — WC uses both class patterns depending on version */
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li[class*="--active"] a {
    background-color: color-mix(in oklch, var(--msk-color-accent) 10%, transparent);
    color: var(--msk-color-accent);
    font-weight: 600;
}

/* Logout — visually separated */
.woocommerce-MyAccount-navigation ul li[class*="customer-logout"] a {
    color: var(--msk-color-text-muted);
    font-size: var(--msk-font-size-xs);
    margin-block-start: var(--msk-space-4);
    border-block-start: 1px solid var(--msk-color-border);
    padding-block-start: var(--msk-space-4);
    border-radius: 0;
}

/* ── Content Area ──────────────────────────────────────────────────────── */

.woocommerce-MyAccount-content {
    background: var(--msk-color-surface);
    border: 1px solid var(--msk-color-border);
    border-radius: var(--msk-radius-xl);
    padding: var(--msk-space-8) var(--msk-space-10);
}

@media (max-width: 782px) {
    .woocommerce-MyAccount-content {
        padding: var(--msk-space-6);
    }
}

/* Section headings */
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3 {
    font-size: var(--msk-font-size-md);
    font-weight: 700;
    margin-block-end: var(--msk-space-6);
    padding-block-end: var(--msk-space-4);
    border-block-end: 1px solid var(--msk-color-border);
}

/* ── Orders Table ──────────────────────────────────────────────────────── */

.woocommerce-MyAccount-content table[class*="orders"],
.woocommerce-MyAccount-content table.shop_table {
    border-collapse: collapse;
    inline-size: 100%;
    font-size: var(--msk-font-size-sm);
}

.woocommerce-MyAccount-content table[class*="orders"] thead,
.woocommerce-MyAccount-content table.shop_table thead {
    background: var(--msk-color-surface-alt);
}

.woocommerce-MyAccount-content table[class*="orders"] th,
.woocommerce-MyAccount-content table.shop_table th {
    font-size: var(--msk-font-size-xs);
    font-weight: 600;
    letter-spacing: var(--msk-tracking-wider);
    text-transform: uppercase;
    color: var(--msk-color-text-muted);
    padding: var(--msk-space-3) var(--msk-space-4);
}

.woocommerce-MyAccount-content table[class*="orders"] td,
.woocommerce-MyAccount-content table.shop_table td {
    padding: var(--msk-space-4);
    border-block-end: 1px solid var(--msk-color-border);
    vertical-align: middle;
}

.woocommerce-MyAccount-content table[class*="orders"] tr:last-child td,
.woocommerce-MyAccount-content table.shop_table tr:last-child td {
    border-block-end: none;
}

/* ── Order Status Badges ───────────────────────────────────────────────── */
/* Uses attribute selectors so it works whether WC uses <mark>, <span>,   */
/* or any other element for status display.                                */

[class*="order-status"] {
    display: inline-flex;
    align-items: center;
    padding: var(--msk-space-1) var(--msk-space-3);
    border-radius: var(--msk-radius-full);
    font-size: var(--msk-font-size-xs);
    font-weight: 600;
    letter-spacing: var(--msk-tracking-wide);
    text-transform: uppercase;
    background: transparent;
}

[class*="status-completed"] {
    background: color-mix(in oklch, #22c55e 15%, transparent);
    color: #16a34a;
}

[class*="status-processing"] {
    background: color-mix(in oklch, #3b82f6 15%, transparent);
    color: #1d4ed8;
}

[class*="status-on-hold"] {
    background: color-mix(in oklch, #f59e0b 15%, transparent);
    color: #b45309;
}

[class*="status-cancelled"],
[class*="status-refunded"],
[class*="status-failed"] {
    background: color-mix(in oklch, #ef4444 15%, transparent);
    color: #dc2626;
}

[class*="status-pending"] {
    background: color-mix(in oklch, #8b5cf6 15%, transparent);
    color: #6d28d9;
}

/* ── Address Cards ─────────────────────────────────────────────────────── */

.woocommerce-MyAccount-content .woocommerce-Address {
    background: var(--msk-color-surface-alt);
    border-radius: var(--msk-radius-lg);
    padding: var(--msk-space-6);
}

.woocommerce-MyAccount-content .woocommerce-Address-title {
    font-size: var(--msk-font-size-sm);
    font-weight: 600;
    letter-spacing: var(--msk-tracking-wide);
    text-transform: uppercase;
    color: var(--msk-color-text-muted);
    margin-block-end: var(--msk-space-4);
}

/* ── Form Fields ───────────────────────────────────────────────────────── */

.woocommerce-MyAccount-content .form-row input,
.woocommerce-MyAccount-content .form-row select {
    border-radius: var(--msk-radius-md);
    border-color: var(--msk-color-border);
    transition: border-color var(--msk-duration-fast) var(--msk-ease-out),
                box-shadow   var(--msk-duration-fast) var(--msk-ease-out);
}

.woocommerce-MyAccount-content .form-row input:focus,
.woocommerce-MyAccount-content .form-row select:focus {
    border-color: var(--msk-color-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--msk-color-accent) 20%, transparent);
    outline: none;
}