:root {
    /* Brand Colors */
    --byuiBlue: #006EB6;
    --byuiSoftBlue: #DBF0FD;

    /* Gray Scale */
    --color-gray-50: #f7f8f8;
    --color-gray-100: #edeef1;
    --color-gray-200: #d8dbdf;
    --color-gray-300: #b6bac3;
    --color-gray-400: #8e95a2;
    --color-gray-500: #6b7280;
    --color-gray-600: #5b616e;
    --color-gray-700: #4a4e5a;
    --color-gray-800: #40444c;
    --color-gray-900: #383a42;
    --color-gray-950: #25272c;

    /* State Colors */
    --color-success: #1AA87D;
    --color-success-bg: rgba(26, 168, 125, 0.15);
    --color-success-dark: #d4e9e3;
    --color-warning: #FECE02;
    --color-warning-bg: #ffead9;
    --color-error: #EB4E14;
    --color-error-bg: #ffe3e3;
    --color-ineligible-row: #ffe3e3;

    /* Typography */
    --font-family: 'Inter', 'Open Sans', 'Roboto', 'Helvetica Neue', sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-chip: 40px;

    /* Borders */
    --border-color: var(--color-gray-300);
    --border-input: var(--color-gray-800);

    /* Shadows */
    --shadow-card: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

html, body {
    font-family: var(--font-family);
}

/* Tenant Management — ineligible row tint. Defined globally (not in TenantManagement.razor.css)
   because MudTable renders its <tr>s outside this page's CSS-isolation scope, so a scoped
   selector with the [b-xxxxxxx] attribute would never match. */
.tm-row-ineligible,
.tm-row-ineligible:hover,
.tm-row-ineligible > td,
.tm-row-ineligible.mud-table-row,
.tm-row-ineligible.mud-table-row > td {
    background-color: var(--color-ineligible-row) !important;
}

.grey-background {
    background-color: #F0F0F0;
}

/* BYU-I Logo */
.byui-logo,
img.byui-logo,
header img.byui-logo,
.main-header-div img.byui-logo,
header .byui-logo {
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
    margin-left: 0.5rem !important;
}

@media screen and (max-width: 600px) {
    .byui-logo,
    img.byui-logo,
    header img.byui-logo,
    .main-header-div img.byui-logo,
    header .byui-logo {
        height: 35px !important;
        max-height: 35px !important;
    }
}

/* ===== MudBlazor overrides ===== */

/* Tenant Management page — large bold title rendered through MudSelect (Variant.Text). */
.tm-complex-select .mud-input-slot,
.tm-complex-select .mud-input-root,
.tm-complex-select .mud-select-input,
.tm-complex-select input {
    font-size: 26px !important;
    font-weight: 700 !important;
    color: var(--color-gray-950) !important;
    line-height: 30px !important;
}

.tm-complex-select .mud-input-adornment .mud-icon-root {
    font-size: 28px !important;
}

/* Center the property-name value in a 36px box (the inline-flex .mud-input centers its
   content) so it lines up vertically with the gender/semester selector boxes beside it.
   Variant.Text otherwise reserves underline space below the text, leaving it riding high. */
.tm-complex-select .mud-input {
    height: 36px !important;
}

/* Tenant Management — outlined filter dropdowns (gender + term). */
.tm-filter-select {
    min-width: 180px;
}

.tm-filter-select .mud-input-outlined-border {
    border-color: var(--color-gray-600) !important;
    border-radius: 4px !important;
}

.tm-filter-select .mud-input-slot,
.tm-filter-select input.mud-input-root,
.tm-filter-select .mud-select-input {
    font-size: 14px !important;
    line-height: 20px !important;
    color: var(--color-gray-700) !important;
    font-weight: 400 !important;
}

/* Slim the outlined filter dropdowns (gender + semester) to 36px so they match the
   section-nav button height. The height goes on .mud-input — the inline-flex row that
   holds the value and the dropdown arrow — so its align-items:center keeps the arrow
   centered. */
.tm-filter-select .mud-input {
    height: 36px !important;
}

/* For a MudSelect the displayed value lives in a display:block text node, so a fixed
   box height alone leaves a single line pinned to the top. Center it with a line-height
   equal to the box height (preserves the ellipsis behavior a flex container would lose). */
.tm-filter-select .mud-input-slot {
    height: 36px !important;
    line-height: 36px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.tm-filter-select .mud-input-adornment .mud-icon-root {
    font-size: 20px !important;
}

/* Gender icon tint follows the selected housing type, matching the colors used on the
   Approved Housing search map legend. */
.tm-gender-male .tm-select-icon {
    color: rgb(0, 110, 182) !important;
}

.tm-gender-female .tm-select-icon {
    color: rgb(233, 30, 99) !important;
}

/* Gender/Term selectors: render the start icon as a manual overlay so MudSelect's native
   open-arrow (arrow_drop_down) keeps showing on the right — identical to the chevron on
   the complex-name selector. */
.tm-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 36px;
}

.tm-select-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    /* Nudge the start icon down a touch so it sits visually centered against the label. */
    transform: translateY(calc(-50% + 2px));
    font-size: 20px !important;
    pointer-events: none;
    z-index: 1;
    color: var(--color-gray-700);
}

.tm-select-wrap .mud-input-slot,
.tm-select-wrap input.mud-input-root,
.tm-select-wrap .mud-select-input {
    padding-left: 32px !important;
}

/* When only one option exists, hide the dropdown chevron and soften the outline so the
   control reads as static info rather than a disabled control. The Person/term icon and
   label stay visible. */
.tm-select-locked .mud-input-adornment-end,
.tm-select-locked .mud-select-icon {
    display: none !important;
}

.tm-select-locked .mud-input-outlined-border {
    border-color: var(--color-gray-200) !important;
}

.tm-select-locked .mud-input-slot,
.tm-select-locked input.mud-input-root,
.tm-select-locked .mud-select-input {
    padding-right: 12px !important;
}

/* Seasonal icon tint switches with the selected term. */
.tm-term-fall .tm-select-icon {
    color: #d96b1e !important;
}
.tm-term-winter .tm-select-icon {
    color: #5b8fbd !important;
}
.tm-term-spring .tm-select-icon {
    color: #5e9c5a !important;
}
.tm-term-summer .tm-select-icon {
    color: #e3a93a !important;
}

/* #rpt-print-root holds a JS-made CLONE of the open report overlay during printing (see
   site.js triggerPrint). It is hidden on screen and revealed only in @media print. Cloning into a
   top-level node — rather than the old `body * { visibility: hidden }` trick — is what keeps the
   printout to just the report: visibility:hidden left the whole app's layout in place, so its
   (invisible) height produced blank pages plus leading and trailing whitespace. */
#rpt-print-root {
    display: none;
}

/* ===== Print: report preview only =====
   While printing we hide every top-level node except #rpt-print-root (the cloned report), so the
   rest of the app contributes no height and therefore no blank pages. The .rpt-view-* table rules
   override the SCOPED screen styles in TenantManagement.razor.css; scoped selectors gain a
   [b-xxxxx] attribute (higher specificity), so every override here must carry !important to win. */
@media print {
    /* Landscape with tight margins so wide, many-column reports get the most usable width. */
    @page {
        size: landscape;
        margin: 0.4in;
    }

    /* Show only the cloned report; collapse everything else to zero height (no blank pages). */
    body.rpt-printing > *:not(#rpt-print-root) {
        display: none !important;
    }

    #rpt-print-root {
        display: block !important;
    }

    /* The clone keeps its on-screen modal styling (position: fixed, dim backdrop); reset it so the
       report flows normally from the top of page 1 with no backdrop. */
    .rpt-view-overlay {
        position: static !important;
        padding: 0 !important;
        background: #fff !important;
        display: block !important;
        z-index: auto !important;
    }

    .rpt-view-modal {
        width: 100% !important;
        max-height: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    .rpt-view-modal-body {
        overflow: visible !important;
        padding: 0 !important;
    }

    .rpt-view-modal-header {
        display: none !important;
    }

    /* Start each additional report on a fresh page, and keep a report's heading with its table. */
    .rpt-view-title {
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .rpt-view-title:not(:first-of-type) {
        break-before: page !important;
        page-break-before: always !important;
    }

    /* On screen the over-wide table scrolls inside .rpt-view-table-wrap; paper has no scroll, so
       that overflow simply clips the right-hand columns. Make it visible and let the table fit. */
    .rpt-view-table-wrap {
        overflow: visible !important;
        margin-bottom: 16px !important;
    }

    /* table-layout: fixed turns width:100% from a soft target into a hard cap, forcing the columns
       to share the page width instead of expanding to their (nowrap) content width. */
    .rpt-view-table {
        width: 100% !important;
        table-layout: fixed !important;
        font-size: 8pt !important;
    }

    .rpt-view-table th,
    .rpt-view-table td {
        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        padding: 3px 5px !important;
    }

    /* Repeat the header on every page and avoid slicing a row across a page break. */
    .rpt-view-table thead {
        display: table-header-group !important;
    }

    .rpt-view-table tr,
    .rpt-view-photo {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* Keep the photo compact so it fits the column's fixed share of the page width. */
    .rpt-view-photo {
        width: 32px !important;
        height: 32px !important;
    }

    .rpt-view-table th {
        background: #f7f8f8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Photo directory: keep a building heading with its grid and never split a card across pages. */
    .rpt-photo-group-head {
        break-after: avoid !important;
        page-break-after: avoid !important;
    }

    .rpt-photo-card {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}

/* ===== Dialog caret suppression =====
   When a MudDialog view has no focusable controls (e.g. a success/loading state), focus can land
   on the dialog container or its text, which some browsers render with a blinking text caret as
   if the content were editable. Hide the caret across dialog chrome, but restore it inside real
   text inputs so typing (e.g. the Add Contract search box) still shows a cursor. */
.mud-dialog,
.mud-dialog * {
    caret-color: transparent;
}

.mud-dialog input,
.mud-dialog textarea,
.mud-dialog [contenteditable="true"] {
    caret-color: auto;
}