:root {
    --fr-surface-1: #f4f9fa;
    --fr-surface-2: #ffffff;
    --fr-surface-3: #fafafa;
    --fr-surface-4: #ffffff;
    /* Outer card, panel, modal, and popover shells; matches the default slds-card radius. */
    --fr-card-border-radius: var(--slds-g-radius-border-3, 0.5rem);
    /* Nested content, controls, chips that are not pills, and inset surfaces. */
    --fr-inner-border-radius: var(--slds-g-radius-border-2, 0.25rem);
    --slds-c-card-radius-border: var(--fr-card-border-radius);
}

html,
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    background: var(--fr-surface-1);
}

/* Keep extra viewport space consistent with the portal shell when the footer is pinned to the bottom. */
main[role='main'] {
    background: var(--fr-surface-1);
}

/* Salesforce's runtime CSS puts the sticky theme header at z-index 100001, above
 * the entire SLDS scale (backdrop 9000, modal 9001, toast container 10000 inline),
 * which forced portal modals into an escalating-z-index fight. Lower the header
 * below the SLDS scale instead so standard values stack correctly everywhere; it
 * still clears ordinary page content. !important is needed to beat the runtime
 * rule of equal specificity. */
header.sticky-header {
    z-index: 8000 !important;
}

.input-icon-container {
    display: none !important;
}

.light-background {
    background-color: var(--fr-surface-3);
}

.footer {
    background-color: #1f2a44;
    background-image:
        repeating-linear-gradient(60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 27px),
        repeating-linear-gradient(-60deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 27px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 47px);
}

.max-height-80vh {
    max-height: 80vh;
}

/* ================================================================
 * Home dashboard: equal-height cards per row
 *
 * dxp_layout:columns creates a flex row; all column divs stretch to
 * the tallest card via align-items:stretch. Height propagation breaks
 * at the intermediate .dxp-region div (height:auto), so height:100%
 * on LWC host elements inside does not resolve to the column height.
 *
 * Fix: turn the region div into a flex column so each LWC card host
 * can use flex:1 to fill the stretched column height correctly.
 * ================================================================ */
.light-background .dxp-region {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.light-background .dxp-region > * {
    flex: 1;
    min-height: 0;
}