.gridTable table thead tr th {
    background-color: rgb(89, 74, 226, 0.85) !important; /* Dark blue-gray (common for headers) */
    color: white !important; /* White text for contrast */
    font-weight: bold !important; /* Bold text */
    text-align: left !important; /* Align text to left (common for tables) */
    border-bottom: 1px solid #ddd !important; /* Optional separator line */
}

.column-header .mud-icon-root.mud-svg-icon {
    fill: white;
}

.gridTable table td {
    padding: 8px !important;
}

.gridTable {
    padding: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.grid-filter-box {
    padding: 16px 16px !important;
    background: #f8f9fa !important; /* Light Gray Background */
    border-radius: 2px !important; /* Rounded Corners */
    margin-bottom: 20px !important;
}

.formtextbox {
    margin-right: 50px !important;
}

.background-color-transparent.mud-input-disabled {
    background-color: transparent !important;
}

.background-color-transparent.mud-input-disabled .mud-input-root {
    color: var(--mud-palette-text-primary) !important;
}


.fixed-appbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1100;
    height: 64px; /* Default MudAppBar height */
}

@media (max-width: 600px) {
    .fixed-appbar {
        height: 56px;
    }

    .mud-main-content, .content-container {
        height: calc(100vh - 56px); /* mobile header height */
    }
}

.content-container {
    flex: 1 1 auto;
    height: calc(100vh - 64px); /* 64px = header height */
    overflow: auto;
}

@media (max-width: 600px) {
    .mud-main-content, .content-container {
        height: calc(100vh - 56px);
        mobile header height
    }
}

/* Make the entire grid a flexible column layout */
.gridTable {
    display: flex !important;
    padding: 10px !important;
    flex-direction: column !important;
    flex-direction: column;
    height: 80vh; /* Adjust as needed */
}

/* Allow the table body to grow, but scroll only when needed */
.gridTable .mud-table-container {
    flex-grow: 1;
    overflow-y: auto; /* Enables scrolling only in table body */
    /*min-height: 200px;*/ /* Ensures table doesn’t collapse */
    max-height: calc(80vh - 60px); /* Adjust based on footer height */
}

/* Ensure footer stays fixed at the bottom */
.gridTable .mud-table-footer {
    position: sticky;
    bottom: 0;
    background: white;
    z-index: 10;
    padding: 10px 0; /* Prevents overlap */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional: Adds a shadow for clarity */
    }

.scrollable-div {
    max-height: 79vh; /* 80% of the viewport height (you can adjust this value) */
    overflow-y: auto; /* Enables vertical scrolling */
    overflow-x: hidden; /* Prevents horizontal scrolling */
    border: 1px solid #ccc; /* Optional: Adds a border for visibility */
    padding: 10px; /* Optional: Adds spacing inside */
    background: #f9f9f9; /* Optional: Background color */
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding-inline-start: 8px !important;
}

.date-range-popover .mud-picker-calendar-container {
    min-width: 600px !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 16px !important;
}

.date-range-popover .mud-picker-calendar-content {
    min-width: 280px !important;
}

.radio-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* exactly two columns */
    column-gap: 24px !important; /* between columns */
}

.radio-grid-2 .mud-radio {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
}

.detail-row {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    align-items: baseline;
}

    /* Optional: ensure long values wrap nicely without breaking layout */
    .detail-row .mud-typography {
        word-break: break-word;
    }

/* Smaller icons to align visually with body text */
.inline-icon {
    font-size: 18px; /* close to body2 text height */
    line-height: 1;
}


.gridTable-no-elevation {
    padding: 0px !important;
}