/* Integrated headed cards. Retain the split-card class API for existing views. */
:root {
    --aeyloo-ui-card-panel-gap: 0px;
    --aeyloo-ui-card-panel-header: transparent;
    --aeyloo-ui-card-panel-body: #fcfcfd;
    --aeyloo-ui-card-panel-border: #e0e5df;
    --aeyloo-ui-card-panel-accent-color: #39b035;
    --aeyloo-ui-card-panel-title: #17221b;
    --aeyloo-ui-card-panel-description: #59675f;
    --aeyloo-ui-card-panel-shadow: none;
    --aeyloo-ui-card-panel-body-shadow: none;
    --aeyloo-ui-card-panel-footer-shadow: none;
}

html[data-aeyloo-color-mode="dark"],
html.quote-public-dark-mode,
html[data-widget-theme="dark"] {
    --aeyloo-ui-card-panel-body: #2c2c2c;
    --aeyloo-ui-card-panel-border: #292c32;
    --aeyloo-ui-card-panel-title: #f4f4f7;
    --aeyloo-ui-card-panel-description: #aeb0b9;
    --aeyloo-ui-card-panel-shadow: none;
}

/* Resolve the selected dark shade where the layout emits its brand tokens. */
html[data-aeyloo-color-mode="dark"] body,
html.quote-public-dark-mode body,
html[data-widget-theme="dark"] body {
    --aeyloo-ui-card-panel-body: var(--aeyloo-dark-surface, #2c2c2c);
}

/* Public checkout follows the device theme instead of the portal theme flag. */
@media (prefers-color-scheme: dark) {
    body.aeyloo-commercial-checkout-body {
        --aeyloo-ui-card-panel-body: var(--aeyloo-dark-surface, #2c2c2c);
        --aeyloo-ui-card-panel-shadow: none;
    }
}

@layer aeyloo-card-panels {
    /* Cards share one flat surface; accents belong to icons, links, and controls. */
    :is(
        .aeyloo-ui-split-card, .aeyloo-ui-card, .aeyloo-ui-metric-card,
        .portal-card, .admin-card, .dashboard-card, .dashboard-summary-card,
        .vendor-portal-card, .vendor-portal-auth-card, .documents-card,
        .aeyloo-auth-card, .aeyloo-commercial-checkout-body .checkout-card,
        .public-payment-card, .payments-page .payments-metric-card
    ):not(.procurement-split-card-group) {
        background: var(--aeyloo-ui-card-panel-body) !important;
        box-shadow: var(--aeyloo-ui-card-panel-shadow) !important;
    }

    /* Nested and product cards retain their distinct surfaces without elevation. */
    .portal-affiliate-stat-card,
    .portal-license-summary-item,
    .dashboard-focus-hero,
    .dashboard-focus-metrics,
    .portal-customer-dashboard .dashboard-summary-item,
    .admin-dashboard-refresh .dashboard-summary-item,
    .crm-ring-card,
    .crm-profile-activity-cardlet,
    .portal-page:is(.vendors-page, .purchase-orders-page, .inventory-page) :is(
        [class*="-kpis"], [class*="kpi-grid"], [class*="metric-grid"],
        .vendor-intelligence-summary-grid
    ) > :is(article, a, .portal-card) {
        box-shadow: none !important;
    }

    /* Card perimeters are borderless; keep their reserved space and inner lines. */
    :is(
        .aeyloo-ui-card, .aeyloo-ui-metric-card, .portal-card, .admin-card,
        .dashboard-card, .dashboard-summary-card, .vendor-portal-card,
        .vendor-portal-auth-card, .documents-card, .aeyloo-auth-card,
        .aeyloo-commercial-checkout-body .checkout-card, .public-payment-card,
        .payments-page .payments-metric-card
    ):not(.inventory-kpi-card, .procurement-split-card-group) {
        border-color: transparent !important;
    }

    /* This card family uses its top line to communicate status. */
    .portal-card.inventory-kpi-card {
        border-inline-color: transparent !important;
        border-bottom-color: transparent !important;
    }

    .aeyloo-ui-split-card {
        --aeyloo-dark-brand-icon-color: var(--ax-color-brand, #15b010);
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        isolation: isolate;
        gap: var(--aeyloo-ui-card-panel-gap) !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: var(--aeyloo-ui-radius-card, 28px) !important;
        background: var(--aeyloo-ui-card-panel-body) !important;
        color: var(--aeyloo-ui-card-panel-title);
        box-shadow: var(--aeyloo-ui-card-panel-shadow) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .aeyloo-ui-split-card > .aeyloo-ui-split-card__header {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        flex: 0 0 auto;
        min-width: 0;
        min-height: 50px !important;
        box-sizing: border-box;
        gap: var(--aeyloo-ui-space-3, 12px);
        margin: 0 !important;
        padding: var(--aeyloo-ui-card-panel-header-start, 24px) var(--aeyloo-ui-space-6, 24px) var(--aeyloo-ui-card-panel-header-end, 12px) !important;
        border: 0 !important;
        border-radius: var(--aeyloo-ui-radius-card, 28px) var(--aeyloo-ui-radius-card, 28px) 0 0 !important;
        background: var(--aeyloo-ui-card-panel-header) !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* A short top-edge accent stays attached when titles and actions wrap. */
    .aeyloo-ui-split-card > .aeyloo-ui-split-card__header::after {
        content: "";
        display: var(--aeyloo-ui-card-panel-accent-display, block);
        position: absolute;
        top: 0;
        inset-inline-start: 40px;
        width: 48px;
        max-width: 25%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--aeyloo-ui-card-panel-accent-color, #39b035);
        box-shadow: none;
        transform: none;
        pointer-events: none;
    }

    .aeyloo-ui-split-card > .aeyloo-ui-split-card__header > div {
        min-width: 0;
    }

    /* These existing accent labels must resolve body-level brand selections. */
    .aeyloo-ui-split-card .aeyloo-ui-pagination__link[aria-current="page"],
    .aeyloo-ui-split-card .aeyloo-ui-empty-state__icon {
        --aeyloo-ui-brand: var(--ax-color-brand, #15b010);
        --aeyloo-ui-brand-strong: var(--ax-color-brand, #15b010);
        --aeyloo-ui-brand-soft: color-mix(in srgb, var(--ax-color-brand, #15b010) 10%, var(--aeyloo-ui-card-panel-body));
    }

    /* Collapsed cards retain the compact header that fits their existing caps. */
    .aeyloo-ui-split-card:is(.is-minimized, .is-dashboard-card-minimized) {
        --aeyloo-ui-card-panel-header-start: 6px;
        --aeyloo-ui-card-panel-header-end: 6px;
    }

    .aeyloo-ui-split-card[hidden]:not([hidden="until-found"]),
    .aeyloo-ui-split-card__header[hidden]:not([hidden="until-found"]),
    .aeyloo-ui-split-card__body[hidden]:not([hidden="until-found"]),
    .aeyloo-ui-split-card__footer[hidden]:not([hidden="until-found"]) {
        display: none !important;
    }

    .aeyloo-ui-card.aeyloo-ui-split-card {
        overflow: visible !important;
    }

    .aeyloo-ui-split-card > .aeyloo-ui-split-card__header:is(h1, h2, h3, h4, h5, h6),
    .aeyloo-ui-split-card > .aeyloo-ui-split-card__header :is(h1, h2, h3, h4, h5, h6) {
        margin: 0 !important;
        color: var(--aeyloo-ui-card-panel-title) !important;
    }

    .aeyloo-ui-split-card > .aeyloo-ui-split-card__header > p,
    .aeyloo-ui-split-card > .aeyloo-ui-split-card__header > div > p {
        color: var(--aeyloo-ui-card-panel-description) !important;
    }

    /* The enclosing card owns the surface and edge; contents retain their layout. */
    .aeyloo-ui-split-card > .aeyloo-ui-split-card__body {
        position: relative;
        min-width: 0;
        min-height: 0;
        flex: 1 1 auto;
        padding: var(--aeyloo-ui-space-6, 24px);
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 0 var(--aeyloo-ui-radius-card, 28px) var(--aeyloo-ui-radius-card, 28px) !important;
        background: transparent !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .aeyloo-ui-split-card > .aeyloo-ui-split-card__body:has(+ .aeyloo-ui-split-card__footer) {
        border-end-start-radius: 0 !important;
        border-end-end-radius: 0 !important;
    }

    /* Legacy table and pagination wrappers share their new enclosing panel. */
    .aeyloo-ui-split-card > .aeyloo-ui-split-card__body--stack > .dashboard-summary-card-inner {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .aeyloo-ui-split-card > .aeyloo-ui-split-card__footer {
        padding: 16px var(--aeyloo-ui-space-6, 24px);
        margin: 0 !important;
        border: 0 !important;
        border-top: 1px solid var(--aeyloo-ui-card-panel-border) !important;
        border-radius: 0 0 var(--aeyloo-ui-radius-card, 28px) var(--aeyloo-ui-radius-card, 28px) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    @media (max-width: 600px) {
        .aeyloo-ui-split-card > .aeyloo-ui-split-card__header,
        .aeyloo-ui-split-card > .aeyloo-ui-split-card__footer {
            padding-inline: var(--aeyloo-ui-space-5, 20px) !important;
        }
    }

    @media (forced-colors: active) {
        :is(
            .aeyloo-ui-split-card, .aeyloo-ui-card, .aeyloo-ui-metric-card,
            .portal-card, .admin-card, .dashboard-card, .dashboard-summary-card,
            .vendor-portal-card, .vendor-portal-auth-card, .documents-card,
            .aeyloo-auth-card, .aeyloo-commercial-checkout-body .checkout-card,
            .public-payment-card, .payments-page .payments-metric-card
        ):not(.procurement-split-card-group) {
            background: Canvas !important;
            box-shadow: none !important;
        }

        :is(
            .aeyloo-ui-card, .aeyloo-ui-metric-card, .portal-card, .admin-card,
            .dashboard-card, .dashboard-summary-card, .vendor-portal-card,
            .vendor-portal-auth-card, .documents-card, .aeyloo-auth-card,
            .aeyloo-commercial-checkout-body .checkout-card, .public-payment-card,
            .payments-page .payments-metric-card
        ):not(.inventory-kpi-card, .procurement-split-card-group) {
            border-color: CanvasText !important;
        }

        .aeyloo-ui-split-card {
            border: 1px solid CanvasText !important;
            background: Canvas !important;
            color: CanvasText;
            box-shadow: none !important;
        }

        .aeyloo-ui-split-card > .aeyloo-ui-split-card__header::after {
            background: Highlight;
        }

        .aeyloo-ui-split-card > .aeyloo-ui-split-card__footer {
            border-top-color: CanvasText !important;
        }
    }
}

/* New body containers retain the spacing between their original siblings. */
.aeyloo-ui-split-card > .aeyloo-ui-split-card__body--stack {
    display: grid;
    gap: var(--aeyloo-ui-split-card-body-gap, var(--aeyloo-ui-space-4, 16px));
}