/* NOVA Beauty OS — global card spacing polish v22.4
   Loaded after page-level styles so card gutters remain consistent.
*/

:root {
    --nova-card-padding: clamp(20px, 1.8vw, 26px);
    --nova-card-padding-compact: clamp(16px, 1.35vw, 20px);
}

/*
 * Plain content panels previously inherited only border/background and had
 * no inner gutter. Keep table, form and purpose-built cards untouched.
 */
.panel:not(.table-panel):not(.modern-form):not(.form-panel):not(.profile-hero):not(.launch-card):not(.empty-state):not(.subscription-status):not(.no-card-padding) {
    padding: var(--nova-card-padding);
}

/* Existing dashboard panels already had spacing; this normalizes it. */
.dashboard-grid > .panel {
    padding: var(--nova-card-padding);
}

/* Table cards stay edge-to-edge, but their custom heading must not touch the border. */
.table-panel > .panel-title-row {
    margin: 0;
    padding: var(--nova-card-padding-compact) var(--nova-card-padding) 16px;
}

/* Finance: the product-order block shown in the report needs an outer gutter. */
.finance-orders-panel {
    padding: clamp(22px, 2vw, 28px);
}

.finance-orders-panel > .panel-title-row {
    margin: 0;
    padding: 0 0 20px;
}

.finance-orders-panel > .finance-order-list {
    margin-top: 2px;
}

.finance-orders-panel .finance-order-card {
    min-height: 128px;
    padding: 18px 20px;
    gap: 20px;
}

.finance-orders-panel > .nova-pagination {
    padding-inline: 0;
    padding-bottom: 0;
}

/* Product-order management cards. */
.product-order-card > header {
    padding: 18px 20px;
}

.product-order-items {
    padding: 17px 20px;
}

.product-order-note {
    margin-inline: 20px;
}

.product-order-card > footer {
    padding: 16px 20px;
}

/* Customer product-order cards also receive a more comfortable gutter. */
.portal-order-card {
    padding: 18px 20px;
}

@media (max-width: 700px) {
    :root {
        --nova-card-padding: 16px;
        --nova-card-padding-compact: 14px;
    }

    .finance-orders-panel {
        padding: 16px;
    }

    .finance-orders-panel > .panel-title-row {
        padding-bottom: 16px;
    }

    .finance-orders-panel .finance-order-card {
        min-height: 0;
        padding: 15px;
        gap: 14px;
    }

    .table-panel > .panel-title-row {
        padding: 16px 16px 13px;
    }

    .product-order-card > header,
    .product-order-items,
    .product-order-card > footer {
        padding-inline: 16px;
    }

    .product-order-note {
        margin-inline: 16px;
    }

    .portal-order-card {
        padding: 15px 16px;
    }
}