/**
 * Frontend styles for Business Central Orders
 */

/* ========================================================================== */
/* Design tokens (scoped to WooCommerce My Account)                            */
/* ========================================================================== */

.woocommerce-account {
    /* Core surfaces / text */
    --bc-header-bg: #222222;
    --bc-header-text: #ffffff;
    --bc-header-text: var(--wp--preset--color--white, #ffffff);
    --bc-row-bg: #ffffff;
    --bc-row-bg: var(--wp--preset--color--white, #ffffff);
    --bc-row-alt-bg: #f2f4f5;
    --bc-row-alt-bg: color-mix(in srgb, var(--wp--preset--color--cyan-bluish-gray, #abb8c3) 15%, var(--wp--preset--color--white, #ffffff));
    --bc-border: #d7dde1;
    --bc-border: color-mix(in srgb, var(--wp--preset--color--cyan-bluish-gray, #abb8c3) 55%, var(--wp--preset--color--white, #ffffff));
    --bc-muted-text: #6b7280;
    --bc-muted-text: color-mix(in srgb, var(--wp--preset--color--black, #000000) 55%, var(--wp--preset--color--white, #ffffff));

    --bc-color-blue: #004e7e;
    --bc-color-grey: #666666;
    --bc-color-green: #4e7e00;

    --bc-header-h1-color: var(--bc-color-blue);
    --bc-header-h2-color: var(--bc-color-grey);

    /* Links */
    --bc-link: #222222;
    --bc-link-hover: #000000;

    /* Buttons */
    --bc-button-text: #ffffff;
    --bc-button-text: var(--wp--preset--color--white, #ffffff);

    /* Status pill colors */
    --bc-status-draft-bg: #f2f4f5;
    --bc-status-draft-bg: color-mix(in srgb, var(--wp--preset--color--cyan-bluish-gray, #abb8c3) 15%, var(--wp--preset--color--white, #ffffff));
    --bc-status-draft-text: #6b7280;
    --bc-status-draft-text: color-mix(in srgb, var(--wp--preset--color--black, #000000) 55%, var(--wp--preset--color--white, #ffffff));
    --bc-status-draft-border: #d7dde1;
    --bc-status-draft-border: color-mix(in srgb, var(--wp--preset--color--cyan-bluish-gray, #abb8c3) 55%, var(--wp--preset--color--white, #ffffff));

    --bc-status-open-bg: var(--bc-color-green);
    --bc-status-open-text: #fff;
    --bc-status-open-text: var(--wp--preset--color--white, #ffffff);
    --bc-status-open-border: var(--bc-color-green);

    --bc-status-confirmed-bg: var(--bc-color-grey);
    --bc-status-confirmed-text: #fff;
    --bc-status-confirmed-text: var(--wp--preset--color--white, #ffffff);
    --bc-status-confirmed-border: var(--bc-color-grey);

    --bc-status-pending-bg: #fff6de;
    --bc-status-pending-bg: color-mix(in srgb, var(--wp--preset--color--luminous-vivid-amber, #fcb900) 35%, var(--wp--preset--color--white, #ffffff));
    --bc-status-pending-text: #000000;
    --bc-status-pending-text: var(--wp--preset--color--black, #000000);
    --bc-status-pending-border: #ffe3a1;
    --bc-status-pending-border: color-mix(in srgb, var(--wp--preset--color--luminous-vivid-amber, #fcb900) 65%, var(--wp--preset--color--white, #ffffff));

    --bc-status-shipped-bg: #444444;
    --bc-status-shipped-text: #ffffff;
    --bc-status-shipped-border: #333333;

    --bc-status-completed-bg: #444444;
    --bc-status-completed-text: #ffffff;
    --bc-status-completed-border: #333333;

    --bc-status-cancelled-bg: #fde7ec;
    --bc-status-cancelled-bg: color-mix(in srgb, var(--wp--preset--color--pale-pink, #f78da7) 35%, var(--wp--preset--color--white, #ffffff));
    --bc-status-cancelled-text: #cf2e2e;
    --bc-status-cancelled-text: var(--wp--preset--color--vivid-red, #cf2e2e);
    --bc-status-cancelled-border: #f6b9c6;
    --bc-status-cancelled-border: color-mix(in srgb, var(--wp--preset--color--vivid-red, #cf2e2e) 55%, var(--wp--preset--color--white, #ffffff));

    /* Loading + error */
    --bc-spinner-track: #eef1f3;
    --bc-spinner-track: color-mix(in srgb, var(--wp--preset--color--cyan-bluish-gray, #abb8c3) 18%, var(--wp--preset--color--white, #ffffff));
    --bc-spinner-accent: #0693e3;
    --bc-spinner-accent: var(--wp--preset--color--vivid-cyan-blue, #0693e3);
    --bc-error-bg: #fde7ec;
    --bc-error-bg: color-mix(in srgb, var(--wp--preset--color--pale-pink, #f78da7) 35%, var(--wp--preset--color--white, #ffffff));
    --bc-error-text: #cf2e2e;
    --bc-error-text: var(--wp--preset--color--vivid-red, #cf2e2e);
    --bc-error-border: #f6b9c6;
    --bc-error-border: color-mix(in srgb, var(--wp--preset--color--vivid-red, #cf2e2e) 55%, var(--wp--preset--color--white, #ffffff));
}

/* ========================================================================== */
/* WooCommerce overrides                                                       */
/* ========================================================================== */

.woocommerce-account h1 {
    color: var(--bc-header-h1-color);
}

.woocommerce-account h2,
.woocommerce-account h3 {
    color: var(--bc-header-h2-color);
}

/* Pagination */
.woocommerce-pagination.bc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.woocommerce-pagination.bc-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.65rem;
    border: 1px solid var(--bc-border);
    border-radius: 6px;
    background: var(--bc-row-bg);
    color: var(--bc-link);
    text-decoration: none;
    line-height: 1;
}

.woocommerce-pagination.bc-pagination .page-numbers:hover {
    color: var(--bc-link-hover);
}

.woocommerce-pagination.bc-pagination .page-numbers.current {
    background: var(--bc-header-bg);
    color: var(--bc-header-text);
    font-weight: 600;
}

.woocommerce-pagination.bc-pagination .page-numbers.disabled {
    opacity: 0.5;
}

/* Notices / messages */
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message {
    background-color: #7ebec5 !important;
    color: #000 !important;
}

/* Form labels */
.woocommerce label {
    font-weight: bold;
    color: var(--bc-color-grey);
}

/* My Account navigation */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation-link {
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation-link a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--bc-color-blue) !important;
    text-decoration: none !important;
    padding: 9px 4px;
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link.is-active a {
    color: var(--bc-color-grey) !important;
    padding-left: 8px;
}

/* Icons */
.woocommerce-MyAccount-navigation-link a::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.woocommerce-MyAccount-navigation-link--dashboard a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--orders a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z'/%3E%3Cline x1='3' y1='6' x2='21' y2='6'/%3E%3Cpath d='M16 10a4 4 0 01-8 0'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--invoices a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z'/%3E%3Cpolyline points='14,2 14,8 20,8'/%3E%3Cline x1='16' y1='13' x2='8' y2='13'/%3E%3Cline x1='16' y1='17' x2='8' y2='17'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--quotes a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z'/%3E%3C/svg%3E");
}

.woocommerce-MyAccount-navigation-link--customer-logout a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d4a80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4'/%3E%3Cpolyline points='16,17 21,12 16,7'/%3E%3Cline x1='21' y1='12' x2='9' y2='12'/%3E%3C/svg%3E");
}

/* ========================================================================== */
/* Animations                                                                  */
/* ========================================================================== */

@keyframes bc-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ========================================================================== */
/* Components                                                                  */
/* ========================================================================== */

/* Order status styling */
.bc-order-status {
    padding: 0.25em 0.75em;
    border-radius: 3px;
    font-size: 0.9em;
    font-weight: 500;
    text-transform: capitalize;
}

.bc-order-status--Draft {
    background-color: var(--bc-status-draft-bg);
    color: var(--bc-status-draft-text);
    border: 1px solid var(--bc-status-draft-border);
}

.bc-order-status--Open {
    background-color: var(--bc-status-open-bg);
    color: var(--bc-status-open-text);
    border: 1px solid var(--bc-status-open-border);
}

.bc-order-status--Confirmed {
    background-color: var(--bc-status-confirmed-bg);
    color: var(--bc-status-confirmed-text);
    border: 1px solid var(--bc-status-confirmed-border);
}

.bc-order-status--Pending {
    background-color: var(--bc-status-pending-bg);
    color: var(--bc-status-pending-text);
    border: 1px solid var(--bc-status-pending-border);
}

.bc-order-status--Shipped {
    background-color: var(--bc-status-shipped-bg);
    color: var(--bc-status-shipped-text);
    border: 1px solid var(--bc-status-shipped-border);
}

.bc-order-status--Completed, .bc-order-status--Paid {
    background-color: var(--bc-status-completed-bg);
    color: var(--bc-status-completed-text);
    border: 1px solid var(--bc-status-completed-border);
}

.bc-order-status--Cancelled {
    background-color: var(--bc-status-cancelled-bg);
    color: var(--bc-status-cancelled-text);
    border: 1px solid var(--bc-status-cancelled-border);
}

/* Currency formatting */
.currency {
    font-size: 0.9em;
    opacity: 0.8;
    margin-left: 0.25em;
}

/* Extra header fields grid */
.bc-order-extra {
    margin: 1em 0;
}

.bc-order-extra__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75em 1.5em;
}

.bc-order-extra__label {
    display: block;
    font-weight: 600;
}

.bc-order-extra__value {
    display: block;
    word-break: break-word;
}

/* Loading state */
.bc-orders-loading {
    text-align: center;
    padding: 2em;
}

.bc-orders-loading::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bc-spinner-track);
    border-top: 2px solid var(--bc-spinner-accent);
    border-radius: 50%;
    animation: bc-spin 1s linear infinite;
    margin-right: 0.5em;
}

/* Error state */
.bc-orders-error {
    background: var(--bc-error-bg);
    color: var(--bc-error-text);
    padding: 1em;
    border: 1px solid var(--bc-error-border);
    border-radius: 4px;
    margin-bottom: 1em;
}

/* Buttons */
.bc-button {
    display: inline-block;
    padding: 0.25em 0.75em;
    background-color: var(--bc-row-bg);
    color: var(--bc-link);
    border: 2px solid var(--bc-link);
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s ease;
    margin: 0 !important;
}

.bc-button:hover,
.bc-button:focus,
.bc-button:active {
    background-color: var(--bc-link);
    color: var(--bc-button-text);
}

.bc-order-dates {
    font-size: var(--wp--preset--font-size--small, 16px);
    font-style: italic;
}

.bc-search-fields {
    font-size: var(--wp--preset--font-size--small, 16px);
    color: var(--bc-muted-text);
}

.bc-order-meta {
    padding-bottom: 1rem;
}

.bc-order-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}


/* ========================================================================== */
/* Layout                                                                      */
/* ========================================================================== */

/* Grid table (desktop) + cards (mobile) */
.bc-grid-table {
    --bc-grid-gap: 0;
    --bc-grid-padding-y: 0.5rem;
    --bc-grid-padding-x: 0.5rem;
    --bc-grid-template: minmax(8rem, 1.5fr) minmax(8rem, 1fr) minmax(7rem, 1fr) minmax(6rem, auto);

    border: 1px solid var(--bc-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bc-row-bg);
}

.bc-grid-table__row {
    display: grid;
    grid-template-columns: var(--bc-grid-template);
    gap: var(--bc-grid-gap);
    align-items: center;
}


.bc-grid-table__row .bc-bottom-left {
    padding-top: 0;
    grid-column: 1 / 3;   /* spans first two columns */
}

.bc-grid-table__row .bc-bottom-right {
    padding-top: 0;
    grid-column: 3 / 5;   /* spans last two columns */
}

.bc-grid-table__row .bc-actions-cell {
    grid-row: 1 / 3; /* spans both rows */
    grid-column: 4; /* stays in the last column */
}


.bc-grid-table__body .bc-grid-table__row {
    border-bottom: 1px solid var(--bc-border);
}

.bc-grid-table__body .bc-grid-table__row:last-child {
    border-bottom-width: 0;
}

.bc-grid-table__body .bc-grid-table__row:nth-child(even) {
    background: var(--bc-row-alt-bg);
}


.bc-grid-table__body .bc-grid-table__row.bc-grid-table__row--header {
    background: var(--bc-header-bg);
    color: var(--bc-header-text);
    font-weight: 600;
    border-bottom: 1px solid var(--bc-border);
}

.bc-grid-table__cell {
    padding: var(--bc-grid-padding-y) var(--bc-grid-padding-x);
    min-width: 0;
}

.bc-grid-table__value {
    display: block;
    min-width: 0;
}

/* Lines grid (view pages) */
.bc-grid-table--lines {
    --bc-grid-template: minmax(12rem, 2.5fr) minmax(4rem, 0.8fr) minmax(7rem, 1fr) minmax(7rem, 1fr);
}

.bc-order-address {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.bc-customer-filter__row {
    max-width: 300px;
}

.bc-customer-filter-container {
    display: flex;
    flex-wrap: wrap;
}

.bc-customer-filter-container form {
    flex: 1;
}


/* Mobile: turn rows into cards */
@media (max-width: 768px) {
    .bc-grid-table {
        border: 0;
        border-radius: 0;
        overflow: visible;
        background: transparent;
    }

    .bc-grid-table__header {
        display: none;
    }

    .bc-grid-table__body .bc-grid-table__row.bc-grid-table__row--header {
        display: none;
    }

    .bc-grid-table__body .bc-grid-table__row {
        grid-template-columns: 1fr;
        border: 1px solid var(--bc-border);
        border-radius: 6px;
        overflow: hidden;
        background: var(--bc-row-bg);
        margin-bottom: 0.75rem;
    }

    .bc-grid-table__body .bc-grid-table__row:nth-child(even) {
        background: var(--bc-row-bg);
    }

    .bc-grid-table__cell {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.65rem 0.75rem;
        border-top: 1px solid var(--bc-border);
    }

    .bc-grid-table__cell:first-child {
        border-top: 0;
    }

    .bc-grid-table__cell::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--bc-muted-text);
        flex: 0 0 auto;
        max-width: 45%;
    }

    .woocommerce-orders-table__cell-order-date::before {
        display: none;
    }

    .woocommerce-orders-table__cell-order-date .bc-grid-table__value {
        text-align: left;
    }

    .bc-grid-table__value {
        text-align: right;
        flex: 1 1 auto;
        min-width: 0;
    }

    .bc-grid-table--lines .bc-grid-table__cell[data-field="product"] {
        flex-direction: column;
        align-items: flex-start;
    }

    .bc-grid-table--lines .bc-grid-table__cell[data-field="product"]::before {
        margin-bottom: 0.25rem;
        max-width: 100%;
    }

    .bc-grid-table--lines .bc-grid-table__cell[data-field="product"] .bc-grid-table__value {
        text-align: left;
        width: 100%;
    }

    .bc-order-address {
        grid-template-columns: 1fr;
    }

    .bc-grid-table__row .bc-bottom-left, .bc-grid-table__row .bc-bottom-right {
        grid-column: 1; /* spans full width in mobile */
    }

    .bc-grid-table__row .bc-actions-cell {
        grid-row: 5; /* no longer spans rows */
        grid-column: 1; /* stays full width */
        margin-top: 0.5rem;
    }
    
    .bc-grid-table__body .bc-grid-table__row:last-child {
        border-bottom-width: 1px;
    }

    .bc-customer-filter-container form {
        flex: 1;
        width: 100%;
    }

}

/* Totals summary under line items */
.bc-grid-summary {
    margin-top: 1rem;
    border: 1px solid var(--bc-border);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bc-row-bg);
    margin-bottom: 1rem;
}

.bc-grid-summary__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--bc-border);
}

.bc-grid-summary__row:last-child {
    border-bottom: 0;
}

.bc-grid-summary__label {
    font-weight: 600;
}