/* 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;
    -webkit-overflow-scrolling: touch;
}

    .scroll-x table {
        width: max-content; /* key */
        min-width: 100%; /* keeps it normal if it fits */
        table-layout: fixed; /* optional but usually helps widths behave */
    }
/* 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 */
}
.scroll-x th,
.scroll-x td {
    white-space: nowrap;
}

/* 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;
    }

.compact-table .mud-input-control,
.compact-table .mud-select,
.compact-table .mud-autocomplete {
    min-width: 150px;
}


/* Round colored pin "dot" */
.leaflet-colored-pin .pin-body {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: 2px;
    margin-top: 2px;
    border: 2px solid #ffffff;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

/* Draggable label box */
.leaflet-draggable-label .label-box {
    display: inline-block;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #333;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    color: #000;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transform: translate(-50%, -5px); /* center under marker by default */
}

.leaflet-draggable-label {
    cursor: grab !important;
}

    .leaflet-draggable-label:active {
        cursor: grabbing !important;
    }

.map-screen-height-dialog .mud-dialog-content {
    max-height: calc(100vh - 92px);
}

.cma-viewport-popover {
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
}

    .cma-viewport-popover .mud-paper {
        max-width: inherit !important;
        box-sizing: border-box !important;
    }



.toolbar-button {
    min-height: 32px !important; /* match MudSelect height */
    height: 32px !important;
    padding: 0 12px !important;
    font-size: 0.75rem;
    line-height: 32px !important;
}

    .toolbar-button .mud-button-start-icon,
    .toolbar-button .mud-button-end-icon {
        margin-right: 6px;
        font-size: 18px; /* scale icon down if needed */
    }

    .toolbar-button svg {
        width: 18px !important;
        height: 18px !important;
    }

.smallPhotoDisplay{
    max-width:250px;
    max-height:250px;
}

.app-telerik-dark,
body.apponecomp-dark {
    --kendo-color-app-surface: var(--mud-palette-surface, #1e1e2d);
    --kendo-color-on-app-surface: var(--mud-palette-text-primary, #b2b0bf);
    --kendo-color-subtle: var(--mud-palette-text-secondary, #92929f);
    --kendo-color-surface: var(--mud-palette-background, #1a1a27);
    --kendo-color-surface-alt: var(--mud-palette-surface, #1e1e2d);
    --kendo-color-border: var(--mud-palette-lines-default, #33323e);
    --kendo-color-border-alt: var(--mud-palette-divider, #292838);
    --kendo-color-base: var(--mud-palette-gray-light, #2a2833);
    --kendo-color-base-hover: var(--mud-palette-action-default, #74718e);
    --kendo-color-base-active: var(--mud-palette-action-disabled-background, #605f6d4d);
    --kendo-color-primary: var(--mud-palette-primary, #7e6fff);
    --kendo-color-primary-hover: var(--mud-palette-primary-darken, var(--mud-palette-primary, #7e6fff));
    --kendo-color-primary-active: var(--mud-palette-primary-darken, var(--mud-palette-primary, #7e6fff));
    --kendo-color-on-primary: var(--mud-palette-primary-text, #ffffff);
}

.app-telerik-dark .k-grid,
body.apponecomp-dark .k-popup,
body.apponecomp-dark .k-animation-container .k-popup,
body.apponecomp-dark .k-window {
    border-color: var(--mud-palette-lines-default, #33323e);
    color: var(--mud-palette-text-primary, #b2b0bf);
    background-color: var(--mud-palette-surface, #1e1e2d);
}

.app-telerik-dark .k-grid-header,
.app-telerik-dark .k-grid-header-wrap,
.app-telerik-dark .k-grouping-header,
.app-telerik-dark .k-grid-footer,
.app-telerik-dark .k-grid-pager,
.app-telerik-dark .k-pager,
.app-telerik-dark .k-toolbar,
body.apponecomp-dark .k-popup,
body.apponecomp-dark .k-menu-popup,
body.apponecomp-dark .k-column-menu,
body.apponecomp-dark .k-grid-filter-menu {
    border-color: var(--mud-palette-lines-default, #33323e);
    color: var(--mud-palette-text-primary, #b2b0bf);
    background-color: var(--mud-palette-background-gray, #151521);
}

.app-telerik-dark .k-grid-content,
.app-telerik-dark .k-table,
.app-telerik-dark .k-table-tbody,
.app-telerik-dark .k-table-row,
.app-telerik-dark .k-table-td,
.app-telerik-dark .k-table-th,
body.apponecomp-dark .k-list,
body.apponecomp-dark .k-list-content,
body.apponecomp-dark .k-list-ul,
body.apponecomp-dark .k-list-item {
    border-color: var(--mud-palette-lines-default, #33323e);
    color: var(--mud-palette-text-primary, #b2b0bf);
    background-color: var(--mud-palette-surface, #1e1e2d);
}

.app-telerik-dark .k-grid .k-alt,
.app-telerik-dark .k-grid .k-table-alt-row {
    background-color: var(--mud-palette-gray-lighter, #1e1e2d);
}

.app-telerik-dark .k-grid .k-table-row:hover,
.app-telerik-dark .k-grid .k-table-row.k-hover,
body.apponecomp-dark .k-list-item:hover,
body.apponecomp-dark .k-list-item.k-hover {
    color: var(--mud-palette-text-primary, #b2b0bf);
    background-color: var(--mud-palette-action-default-hover, rgba(255, 255, 255, 0.08));
}

.app-telerik-dark .k-grid .k-selected,
.app-telerik-dark .k-grid .k-table-row.k-selected,
body.apponecomp-dark .k-list-item.k-selected {
    color: var(--mud-palette-primary-text, #ffffff);
    background-color: var(--mud-palette-primary, #7e6fff);
}

.app-telerik-dark .k-grid .k-link,
.app-telerik-dark .k-grid .k-icon,
.app-telerik-dark .k-grid .k-svg-icon,
body.apponecomp-dark .k-popup .k-link,
body.apponecomp-dark .k-popup .k-icon,
body.apponecomp-dark .k-popup .k-svg-icon {
    color: inherit;
}

.app-telerik-dark .k-grid .k-button,
.app-telerik-dark .k-grid .k-input,
.app-telerik-dark .k-grid .k-picker,
body.apponecomp-dark .k-popup .k-button,
body.apponecomp-dark .k-popup .k-input,
body.apponecomp-dark .k-popup .k-picker {
    border-color: var(--mud-palette-lines-default, #33323e);
    color: var(--mud-palette-text-primary, #b2b0bf);
    background-color: var(--mud-palette-surface, #1e1e2d);
}

.app-telerik-dark .k-grid .k-button:hover,
body.apponecomp-dark .k-popup .k-button:hover {
    background-color: var(--mud-palette-action-default-hover, rgba(255, 255, 255, 0.08));
}

.app-telerik-dark .k-grid a,
body.apponecomp-dark .k-popup a {
    color: var(--mud-palette-primary, #7e6fff);
}

.property-type-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.property-type-selector-title {
    font-weight: 600;
    color: var(--mud-palette-text-primary, inherit);
}

.property-type-selector-list {
    border: 1px solid var(--mud-palette-lines-inputs, var(--mud-palette-lines-default, #bdbdbd));
    border-radius: 4px;
    color: var(--mud-palette-text-primary, #424242);
    background-color: var(--mud-palette-surface, #ffffff);
    outline: none;
}

.property-type-selector-list:focus {
    border-color: var(--mud-palette-primary, #594ae2);
    box-shadow: 0 0 0 1px var(--mud-palette-primary, #594ae2);
}

.property-type-selector-option {
    color: var(--mud-palette-text-primary, #424242);
    background-color: var(--mud-palette-surface, #ffffff);
}

.property-type-selector-header {
    font-weight: 700;
    font-size: 15px;
    color: var(--mud-palette-primary, #594ae2);
    background-color: var(--mud-palette-background-gray, var(--mud-palette-gray-lighter, #f5f5f5));
}

.property-type-selector-option:checked {
    color: var(--mud-palette-primary-text, #ffffff);
    background-color: var(--mud-palette-primary, #594ae2);
}

.property-type-selector-list:disabled,
.property-type-selector-option:disabled {
    color: var(--mud-palette-text-disabled, rgba(0, 0, 0, 0.38));
}

.property-type-selector-header:disabled {
    color: var(--mud-palette-primary, #594ae2);
    background-color: var(--mud-palette-background-gray, var(--mud-palette-gray-lighter, #f5f5f5));
    opacity: 1;
}

.property-type-selector-actions {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.property-type-selector-count {
    font-size: 0.9rem;
    color: var(--mud-palette-text-secondary, #666666);
}

.property-type-selector-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.photo-tile {
    width: 100%;
}

.thumb-slot {
    height: 500px; /* total tile inner height (adjust as you like) */
    display: flex;
    flex-direction: column;
}
.thumb-250 {
    width: 250px;
    
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto; /* centers the 250x250 block inside the tile */
}