/* TABLE cells tighter */
.compact-ui .mud-table .mud-table-cell,
.compact-ui .mud-table .mud-table-head .mud-table-cell {
    padding: 2px 6px !important;
}

/* OUTLINED input container (text, numeric, select) — shorter box */
.compact-ui .mud-input-control .mud-input-root.mud-input-outlined {
    min-height: 26px !important;
    height: 26px !important;
    padding: 0 6px !important;
}

/* Some Mud fields render the real <input> deeper under .mud-input-slot — hit both */
.compact-ui .mud-input-control .mud-input-root .mud-input-input,
.compact-ui .mud-input-control .mud-input-slot .mud-input-input,
.compact-ui .mud-select .mud-input-input {
    font-size: 12px !important; /* change to 11px or 10px if you want smaller */
    line-height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Labels smaller */
.compact-ui .mud-input-control .mud-input-label {
    font-size: 11px !important;
}

/* Icon buttons tighter */
.compact-ui .mud-icon-button {
    padding: 2px !important;
}

/* Helpers if you prefer per-field control */
.tiny-input {
    font-size: 8px !important;
    line-height: 20px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.tiny-label {
    font-size: 8px !important;
}

.tiny-container .mud-input-root.mud-input-outlined {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 6px !important;
}

.percent-adornment {
    background-color: transparent;
    padding-right: 8px;
    padding-left: 2px;
    min-width: 0;
}


.section-header-primary {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    text-align: center;
    padding: 0.5rem; /* like pa-2 */
    margin-bottom: 0.5rem; /* like mb-2 */
    margin-top: 12px;
    font-size:1.7em;
   MF 	Concessions 	Gross Rent 	Income Re
}

.section-header-tertiary {
    background-color: var(--mud-palette-tertiary);
    color: var(--mud-palette-tertiary-text);
    text-align: center;
    font-size: 1.4em;
    margin-bottom: -10px;
}


/* Outer scroll container: this is the ONLY element that scrolls horizontally */
.scroll-x {
    max-width: 100%;
    overflow-x: auto; /* show horizontal scrollbar when needed */
    overflow-y: visible; /* page handles vertical scrolling */
    box-sizing: border-box;
}

/* Content inside scroll-x should size itself to its content */
.scroll-content {
    display: inline-block; /* prevents stretching to full width */
    width: max-content; /* width = sum of columns; scroll as needed */
    min-width: 100%; /* if content is small, fill available width */
}

/* Optional: make the scrollbar easy to grab on WebKit (Chrome/Edge/Safari) */
.scroll-x::-webkit-scrollbar {
    height: 10px;
}

.scroll-x::-webkit-scrollbar-thumb {
    border-radius: 5px;
}

/* If you have any global "hide scrollbars" hacks, override them here */
.scroll-x {
    scrollbar-width: thin; /* Firefox */
    -ms-overflow-style: auto; /* Legacy Edge/IE */
}

/* Make MudDatePicker look like a small caption-style input */
.compact-date-picker .mud-input-root {
    min-height: 32px; /* shrink overall height */
}

.compact-date-picker .mud-input-slot {
    font-size: 0.75rem; /* roughly Typo.caption */
    padding-top: 2px;
    padding-bottom: 2px;
}

/* Shrink the text inside the input */
.compact-date-picker .mud-input-input {
    font-size: 0.75rem;
}

/* Optional: shrink the calendar icon so it doesn't look huge */
.compact-date-picker .mud-input-adornment .mud-icon-button {
    font-size: 18px;
    width: 28px;
    height: 28px;
}

.compact-date-picker .mud-input-root {
    min-height: 32px !important; /* adjust as needed */
}

.compact-date-picker .mud-input-slot {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

/* Highlight selected item using MudBlazor's primary color */
.mud-list-item.picker-active-item,
.mud-list-item.picker-active-item:hover {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
}

    /* Make sure inner text/icons also pick up the selected color */
    .mud-list-item.picker-active-item * {
        color: var(--mud-palette-primary-text) !important;
    }