/* This class creates a scrolling area *inside* the card, 
           preventing the page content from pushing the footer off-screen. */
.scrollable-content-area {
    /* Sets the maximum height relative to the viewport. 
               Adjust '80vh' to leave enough room for your site's header and footer. */
    max-height: 80vh;
    /* Crucial: Enables vertical scrolling only if content exceeds max-height */
    overflow-y: auto;
    /* Prevents accidental horizontal scrolling */
    overflow-x: hidden;
    /* Ensures scrollbar doesn't overlap text content */
    padding-right: 15px;
}

/* Ensures the title section remains visible and does not scroll */
.card-header-fixed {
    position: sticky; /* Keep the header in place */
    top: 0; /* Stick to the top of the parent .card */
    background-color: white; /* Match card background to prevent content bleed */
    z-index: 10; /* Ensure it stays above scrolling content */
    margin-bottom: 0 !important; /* Remove bottom margin from the fixed header */
}