:root {
    --app-topbar-h: 64px;
    --page-gap-top: 14px; /* tweak to 12–20px as you like */
    --appbar-bg: #0B5FA5; /* ← set this to EXACT app bar color */
    --appbar-bg-hover: #094F8A;
    --appbar-bg-active: #073F6E;
    /* NEW: tweak these to your theme */
    --btn-secondary-bg: #6C757D;
    --btn-secondary-hover: #5B636A;
    --btn-secondary-active: #4E545A;
    --btn-info-bg: #33B6CC; /* teal-ish to match your UI */
    --btn-info-hover: #2EA6BD;
    --btn-info-active: #2893A7;
    --btn-danger-bg: #DC3545;
    --btn-danger-hover: #C42E3C;
    --btn-danger-active: #A92833;
}

/* outer frame 
.main-container {
    height: calc(100vh - var(--app-topbar-h));
    overflow: hidden;
    display: flex;
    min-width: 0;
    box-sizing: border-box;
}*/
/* outer frame */
.main-container {
    /* subtract the gap so layout still fits exactly in the viewport */
    height: calc(100vh - var(--app-topbar-h) - var(--page-gap-top));
    padding-top: var(--page-gap-top); /* pushes the SfCard down a bit */
    overflow: hidden;
    display: flex;
    min-width: 0;
    box-sizing: border-box;
}
    /* stretch the card */
    .main-container .e-card {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    /* stretch inner content (account for padding in height calc) */
    .main-container .e-card-content {
        padding: 0 16px 16px;
        flex: 1 1 auto;
        display: flex;
        min-height: 0;
        box-sizing: border-box;
    }

/* filters + grid */
/* make wrapper fill the available height inside CardContent */
/* Default: one filter row + grid */
.main-wrapper {
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 100%;
    min-height: 0;
    align-items: start;
    justify-content: stretch;
    min-width: 0;
}

    /* Only when a page actually has two filter rows */
    .main-wrapper.two-filter-rows {
        grid-template-rows: auto auto 1fr;
    }

    .main-wrapper .row {
        align-items: stretch !important;
    }

/* grid fills rest */
.grid-shell {
    height: 100%;
    min-height: 0;
    display: flex;
    min-width: 0;
}

    .grid-shell > .e-grid {
        width: 100%;
        height: 100%;
    }

/* PRIMARY (kept for context) */
.e-btn.e-primary,
.e-btn.e-primary:focus {
    background-color: var(--appbar-bg) !important;
    border-color: var(--appbar-bg) !important;
    color: #fff !important;
}

    .e-btn.e-primary:hover {
        background-color: var(--appbar-bg-hover) !important;
        border-color: var(--appbar-bg-hover) !important;
    }

    .e-btn.e-primary:active,
    .e-btn.e-primary:active:focus {
        background-color: var(--appbar-bg-active) !important;
        border-color: var(--appbar-bg-active) !important;
    }

/* SECONDARY */
.e-btn.e-secondary,
.e-btn.e-secondary:focus {
    background-color: var(--btn-secondary-bg) !important;
    border-color: var(--btn-secondary-bg) !important;
    color: #fff !important;
}

    .e-btn.e-secondary:hover {
        background-color: var(--btn-secondary-hover) !important;
        border-color: var(--btn-secondary-hover) !important;
    }

    .e-btn.e-secondary:active,
    .e-btn.e-secondary:active:focus {
        background-color: var(--btn-secondary-active) !important;
        border-color: var(--btn-secondary-active) !important;
    }

/* INFO */
.e-btn.e-info,
.e-btn.e-info:focus {
    background-color: var(--btn-info-bg) !important;
    border-color: var(--btn-info-bg) !important;
    color: #08343A !important; /* dark text for better contrast on light-teal; switch to #fff if needed */
}

    .e-btn.e-info:hover {
        background-color: var(--btn-info-hover) !important;
        border-color: var(--btn-info-hover) !important;
    }

    .e-btn.e-info:active,
    .e-btn.e-info:active:focus {
        background-color: var(--btn-info-active) !important;
        border-color: var(--btn-info-active) !important;
    }

/* DANGER */
.e-btn.e-danger,
.e-btn.e-danger:focus {
    background-color: var(--btn-danger-bg) !important;
    border-color: var(--btn-danger-bg) !important;
    color: #fff !important;
}

    .e-btn.e-danger:hover {
        background-color: var(--btn-danger-hover) !important;
        border-color: var(--btn-danger-hover) !important;
    }

    .e-btn.e-danger:active,
    .e-btn.e-danger:active:focus {
        background-color: var(--btn-danger-active) !important;
        border-color: var(--btn-danger-active) !important;
    }