:root {
    --header-background-color-lightmode: #d2d4fd;
    --header-background-color-darkmode: #333;
    --cluster-fill: #69dcff;
    --cluster-outline: rgba(0, 139, 174, 0.5);
    --cluster-label-color: #004a5d;
}

/* Opts a parent element into container-query sizing so descendants can */
/* use @container rules (see AddButton.razor.css, TableColumnSetupPanel.razor.css). */
.cq-container {
    container-type: inline-size;
}

/* Container-query-aware responsive utilities.                                  */
/* Use these in place of Mud/Bootstrap viewport utilities when the parent       */
/* toolbar/dialog has .cq-container. They fall back to viewport behavior when   */
/* no .cq-container ancestor exists.                                            */
/* - cq-hide-below-lg: hide until container (or viewport) is >= 900px / 1280px  */
/* - cq-mr-lg-2:       0 margin until container is wide enough, then 8px        */
.cq-hide-below-lg {
    display: none;
}

.cq-mr-lg-2 {
    margin-right: 0;
}

@media (min-width: 1280px) {
    .cq-hide-below-lg {
        display: inline;
    }

    .cq-mr-lg-2 {
        margin-right: 8px;
    }
}

@container (max-width: 899px) {
    .cq-hide-below-lg {
        display: none;
    }

    .cq-mr-lg-2 {
        margin-right: 0;
    }
}

@container (min-width: 900px) {
    .cq-hide-below-lg {
        display: inline;
    }

    .cq-mr-lg-2 {
        margin-right: 8px;
    }
}

/* XL-tier variants: for buttons with longer text ("Upload Doc/Pic", "Enable Edit"). */
/* Viewport fallback kicks in at 1440px; container query switches at 1100px.         */
.cq-hide-below-xl {
    display: none;
}

.cq-mr-xl-2 {
    margin-right: 0;
}

@media (min-width: 1440px) {
    .cq-hide-below-xl {
        display: inline;
    }

    .cq-mr-xl-2 {
        margin-right: 8px;
    }
}

@container (max-width: 1099px) {
    .cq-hide-below-xl {
        display: none;
    }

    .cq-mr-xl-2 {
        margin-right: 0;
    }
}

@container (min-width: 1100px) {
    .cq-hide-below-xl {
        display: inline;
    }

    .cq-mr-xl-2 {
        margin-right: 8px;
    }
}

html, body {
    font-family: Tahoma, Verdana, Arial, sans-serif !important;
}

/* Push snackbar below the app bar */
.mud-snackbar-location-top-left {
    top: 50px !important;
    left: 50px !important;
}


h1 {
    margin-bottom: 30px;
    outline: none !important;
}

.bold {
    font-weight: 500 !important;
}

.text-center {
    text-align: center !important;
}

.text-end {
    text-align: end;
}

.w-100 {
    width: 100%;
}

.bold {
    font-weight: bold !important;
}

.text-lg {
    font-size: 17.5px;
}

.text-md {
    font-size: 14px;
}

.red {
    border: 1px solid red;
}

a,
.btn-link,
.color-secondary {
    color: #427299;
}

table.table th,
table.table td {
    padding: 0.5rem;
}

table.table th {
    font-weight: bold;
    text-align: left;
    vertical-align: top;
}

table.table td {
    vertical-align: top;
}

.table-border {
    border-collapse: collapse;
    width: 100%;
}

    .table-border th,
    .table-border td {
        border: 1px solid #808080;
    }


/* Table Striped Rows */
table.table-striped thead th,
table.table-striped tbody tr:nth-of-type(even) {
    background-color: #f8f9fa; /* Light gray background */
    background-color: rgba(0, 0, 0, 0.05); /* Light gray background */
}


.no-gutters {
    margin: 0;
    padding: 0;
}

.btn-success {
    color: #fff;
    background-color: #26b050;
}

.btn-success:hover {
    color: inherit;
}

/*.btn-info {
    background-color: #ececec;
}

body.theme-dark-mode .btn-info {
    background-color: #999;
}*/

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA9NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjA1ODMgMjYzLjU3NiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Blazor's reconnect modal (#components-reconnect-modal) is rendered inside an
   open shadow root, which blocks ordinary CSS rules from outside. We theme it
   by exposing CSS custom properties on body — properties cross shadow-DOM
   boundaries via inheritance — and an injected <style> inside the shadow root
   (see App.razor's injectReconnectModalStyles) reads them with var(...).
   Toggling body.theme-dark-mode flips the variable values, retheming the
   modal automatically. */
body {
    --mm-reconnect-overlay-bg: rgba(255, 255, 255, 0.7);
    --mm-reconnect-dialog-bg: #ffffff;
    --mm-reconnect-text: #1a1a1a;
    --mm-reconnect-border: #cccccc;
    --mm-reconnect-button-bg: #1976d2;
    --mm-reconnect-button-text: #ffffff;
}
body.theme-dark-mode {
    --mm-reconnect-overlay-bg: rgba(0, 0, 0, 0.6);
    --mm-reconnect-dialog-bg: var(--mud-palette-surface);
    --mm-reconnect-text: var(--mud-palette-text-primary);
    --mm-reconnect-border: var(--mud-palette-lines-default);
    --mm-reconnect-button-bg: var(--mud-palette-primary);
    --mm-reconnect-button-text: var(--mud-palette-primary-text);
}

.help-items {
    margin-left: 2em;
    margin-right: 2em;
}
.quickref {
    background-color: #fbfdc0;
    padding-bottom: 1em;
}
.quickref .mud-grid .mud-grid-item .mud-paper {
    background-color: #fdffb9;
}

/* Dark mode for Quick Reference */
.theme-dark-mode .quickref {
    background-color: #3d3d00;
}
.theme-dark-mode .quickref .mud-grid .mud-grid-item .mud-paper {
    background-color: #4a4a00;
}
.mud-main-content .quickref .mud-toolbar,
.mud-dialog .quickref .mud-toolbar{
    border: none;
    background-color: inherit;
}
.btn-success {
    border-radius: var(--mud-default-borderradius);
}
.btn-success button, button.btn-success {
    background-color: var(--mud-palette-success);
    color: var(--mud-palette-success-text);
}
.btn-error button, button.btn-error {
    background-color: var(--mud-palette-error);
    color: var(--mud-palette-error-text);
}
.btn-purple button, button.btn-purple {
    background-color: #9C27B0;
    color: var(--mud-palette-success-text);
}
.btn-default button, button.btn-default {
    background-color: #b4b4b4;
    color: var(--mud-palette-default-text);
}
.btn-info button, button.btn-info, .mud-menu-item.btn-info {
    background-color: var(--mud-palette-info);
    color: var(--mud-palette-info-text);
}
.theme-dark-mode .btn-default button, .theme-dark-mode button.btn-default {
    background-color: #585858;
}
.filter-toolbar {
    background-color: #e4e4e4 !important;
}
.theme-dark-mode .filter-toolbar {
    background-color: #35377b !important;
}
.custom-select-container {
    position: relative;
}
.floating-label {
    display: flex;
    align-items: center;
    position: absolute;
    top: -10px;
    left: 10px;
    padding: 0 4px;
    background-color: #fff;
    z-index: 1;
    font-size: 0.85em;
    border-radius: 10px;
}

.filter-toolbar .floating-label {
    background-color: #e4e4e4;
}

.theme-dark-mode .floating-label {
    background-color: #373740;
}
.theme-dark-mode .filter-toolbar .floating-label {
    background-color: #35377b;
}

.custom-select-container .floating-label {
    top: -10px;
}
.virtualized-select-container .floating-label {
    top: -10px;
}

/* Badge marking a filter that takes part in a cascade (FilterCascade.IsCascading).
   Scoped under .floating-label so it outranks MudBlazor's own icon-size class.
   Sized in rem, NOT em: em resolves against the icon's own font-size (1.25rem for
   MudBlazor's Size.Small), which rendered it about twice the intended size. */
.floating-label .filter-label-icon {
    font-size: 0.75rem;
    width: 0.75rem;
    height: 0.75rem;
    margin-left: 3px;
    opacity: 0.8;
    flex-shrink: 0;
}
.wo-group-dropdown .floating-label {
    background-color: #fcf0e0;
}

.floating-label .mud-checkbox {
    margin: 0 0 0 5px;
    padding: 0;
}
.floating-label .mud-checkbox-icon {
    font-size: 16px;
}

.highlighted-row-primary td {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.25) !important;
    border-top: 2px solid var(--mud-palette-primary) !important;
    border-bottom: 2px solid var(--mud-palette-primary) !important;
    transition: all 0.3s ease;
}
.highlighted-row-secondary td {
    background-color: rgba(var(--mud-palette-secondary-rgb), 0.25) !important;
    border-top: 2px solid var(--mud-palette-secondary) !important;
    border-bottom: 2px solid var(--mud-palette-secondary) !important;
    transition: all 0.3s ease;
}
.highlighted-row-success td {
    background-color: rgba(var(--mud-palette-success-rgb), 0.25) !important;
    border-top: 2px solid var(--mud-palette-success) !important;
    border-bottom: 2px solid var(--mud-palette-success) !important;
    transition: all 0.3s ease;
}
.highlighted-row-error td {
    background-color: rgba(var(--mud-palette-error-rgb), 0.25) !important;
    border-top: 2px solid var(--mud-palette-error) !important;
    border-bottom: 2px solid var(--mud-palette-error) !important;
    transition: all 0.3s ease;
}
.highlighted-row-info td {
    background-color: rgba(var(--mud-palette-info-rgb), 0.25) !important;
    border-top: 2px solid var(--mud-palette-info) !important;
    border-bottom: 2px solid var(--mud-palette-info) !important;
    transition: all 0.3s ease;
}
.highlighted-row-warning td {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.5) !important;
    border-top: 2px solid var(--mud-palette-warning) !important;
    border-bottom: 2px solid var(--mud-palette-warning) !important;
    transition: all 0.3s ease;
}
.highlighted-row-yellow td {
    background-color: yellow !important;
    color: black !important;
    border-top: 1px solid #c6a85b !important;
    border-bottom: 1px solid #c6a85b !important;
    font-weight: bold;
    font-size: 150%;
    transition: all 0.3s ease;
}
.highlighted-row-yellow .mud-input > input.mud-input-root, .highlighted-row-yellow div.mud-input-slot.mud-input-root {
    color: black !important;
}

.highlighted-row-dark td {
    background-color: rgba(var(--mud-palette-dark-rgb), 0.1) !important;
    border-top: 2px solid var(--mud-palette-dark) !important;
    border-bottom: 2px solid var(--mud-palette-dark) !important;
    transition: all 0.3s ease;
}
.highlighted-row-accent td {
    background-color: color-mix(in srgb, var(--row-accent) 15%, transparent) !important;
    border-top: 1px solid var(--row-accent) !important;
    border-bottom: 1px solid var(--row-accent) !important;
    transition: all 0.3s ease;
}

.highlighted-row-normal td {
    background-color: #5bb75b !important;
    color: white !important;
    border-top: 1px solid #2f682f !important;
    border-bottom: 1px solid #2f682f !important;
    transition: all 0.3s ease;
}
.highlighted-row-normal .mud-input > input.mud-input-root, .highlighted-row-normal div.mud-input-slot.mud-input-root {
    color: white !important;
}
.highlighted-row-abnormal td {
    background-color: #EC9900 !important;
    color: white !important;
    border-top: 1px solid #bd7100 !important;
    border-bottom: 1px solid #bd7100 !important;
    transition: all 0.3s ease;
}
.highlighted-row-abnormal .mud-input > input.mud-input-root, .highlighted-row-abnormal div.mud-input-slot.mud-input-root {
    color: white !important;
}
.highlighted-row-needswork td {
    background-color: #FD4B4B !important;
    color: white !important;
    border-top: 1px solid #85231c !important;
    border-bottom: 1px solid #85231c !important;
    transition: all 0.3s ease;
}
.highlighted-row-needswork .mud-input > input.mud-input-root, .highlighted-row-needswork div.mud-input-slot.mud-input-root {
    color: white !important;
}

/* Needs Work + linked WO is Complete → "completed WO" pink. Legacy used #ff9a9a with
   black text (MasterStylesheet.css:1161-1164 / .pink_row). Lighter border to match. */
.highlighted-row-needswork-complete td {
    background-color: #ff9a9a !important;
    color: black !important;
    border-top: 1px solid #c97070 !important;
    border-bottom: 1px solid #c97070 !important;
    transition: all 0.3s ease;
}
.highlighted-row-needswork-complete .mud-input > input.mud-input-root, .highlighted-row-needswork-complete div.mud-input-slot.mud-input-root {
    color: black !important;
}

/* Workflow Approval History "Approval Keys" — the approval level a row is pending at. Legacy used
   .lt_blue_row / .blue_row / .purple_row (DataTables/custom.css:121-139); completed rows reuse
   .highlighted-row-normal (the legacy green). */
.highlighted-row-level1 td {
    background-color: rgba(68, 117, 255, 0.5) !important;
    /* Dark navy text — the level-1 background is a translucent (light) blue, so white text reads
       poorly. Dark mode blends the same background darker, so keep white there (override below). */
    color: #16255a !important;
    border-top: 1px solid #2c4ba8 !important;
    border-bottom: 1px solid #2c4ba8 !important;
    transition: all 0.3s ease;
}
.theme-dark-mode .highlighted-row-level1 td {
    color: #ffffff !important;
}
.highlighted-row-level1 .mud-input > input.mud-input-root, .highlighted-row-level1 div.mud-input-slot.mud-input-root {
    color: white !important;
}
.highlighted-row-level2 td {
    background-color: rgba(68, 117, 255, 1) !important;
    color: white !important;
    border-top: 1px solid #2c4ba8 !important;
    border-bottom: 1px solid #2c4ba8 !important;
    transition: all 0.3s ease;
}
.highlighted-row-level2 .mud-input > input.mud-input-root, .highlighted-row-level2 div.mud-input-slot.mud-input-root {
    color: white !important;
}
.highlighted-row-level3 td {
    background-color: rgba(209, 75, 253, 0.7) !important;
    color: white !important;
    border-top: 1px solid #9a37bb !important;
    border-bottom: 1px solid #9a37bb !important;
    transition: all 0.3s ease;
}
.highlighted-row-level3 .mud-input > input.mud-input-root, .highlighted-row-level3 div.mud-input-slot.mud-input-root {
    color: white !important;
}

/* Legend chips ("Keys:") painted by the same classes as the rows above, like the Inspections page
   keys (td.complete-row, .mud-chip.complete-row) — kept as separate rules so the chips don't pick
   up the rows' border treatment. */
.mud-chip.highlighted-row-normal {
    background-color: #5bb75b !important;
    color: #ffffff !important;
    font-weight: 500;
}
.mud-chip.highlighted-row-level1 {
    background-color: rgba(68, 117, 255, 0.5) !important;
    /* Match the dark navy row text so the legend/quick-reference key reads like its rows. */
    color: #16255a !important;
    font-weight: 500;
}
.theme-dark-mode .mud-chip.highlighted-row-level1 {
    color: #ffffff !important;
}
.mud-chip.highlighted-row-level2 {
    background-color: rgba(68, 117, 255, 1) !important;
    color: #ffffff !important;
    font-weight: 500;
}
.mud-chip.highlighted-row-level3 {
    background-color: rgba(209, 75, 253, 0.7) !important;
    color: #ffffff !important;
    font-weight: 500;
}

/* Reusable 1px white halo around an icon — same technique as .sev-icon-* in
   Step3Content.razor, but global for any "completed/status" icon that may sit on
   a same-color row background (e.g. ThumbUp Color.Success on the green Normal row,
   so the icon doesn't disappear). */
.icon-halo {
    filter:
        drop-shadow(1px 0 0 #ffffff)
        drop-shadow(-1px 0 0 #ffffff)
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 -1px 0 #ffffff);
}

/* Reusable severity palette — shared between Step 3 inspection table, the Questions
   library table, and the Assign Results pane in EditQuestionDialog so the green/
   orange/red mapping reads consistently across the app. Icons get the white halo
   so they stay visible when laid over a same-color background. Backgrounds match
   the .highlighted-row-* / .cell-* tones already established for inspection rows. */
.sev-icon-normal,
.sev-icon-abnormal,
.sev-icon-needswork {
    filter:
        drop-shadow(1px 0 0 #ffffff)
        drop-shadow(-1px 0 0 #ffffff)
        drop-shadow(0 1px 0 #ffffff)
        drop-shadow(0 -1px 0 #ffffff);
}
.sev-icon-normal { color: #4caf50; }
.sev-icon-abnormal { color: #ff9800; }
.sev-icon-needswork { color: #f44336; }
.mud-chip-content .sev-icon-normal,
.mud-chip-content .sev-icon-abnormal,
.mud-chip-content .sev-icon-needswork { margin-right: 4px; }

.sev-bg-normal {
    background-color: #5bb75b !important;
    color: #ffffff !important;
}
.sev-bg-abnormal {
    background-color: #EC9900 !important;
    color: #ffffff !important;
}
.sev-bg-needswork {
    background-color: #FD4B4B !important;
    color: #ffffff !important;
}

/* MudChip variant of the severity palette — for inline tags inside table cells. */
.mud-chip.sev-chip-normal {
    background-color: #5bb75b !important;
    color: #ffffff !important;
}
.mud-chip.sev-chip-abnormal {
    background-color: #EC9900 !important;
    color: #ffffff !important;
}
.mud-chip.sev-chip-needswork {
    background-color: #FD4B4B !important;
    color: #ffffff !important;
}

/* Non-severity status chips that sit next to the severity legend in inspection
   surfaces. Kept here (not as inline styles in Step3Content) so the Questions
   library and the EditQuestionDialog can drop them in too without duplicating
   the palette. */
.mud-chip.status-chip-complete {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
}
.mud-chip.status-chip-warning {
    background-color: #ffeb3b !important;
    color: #000000 !important;
    font-weight: bold;
}
/* Step 3 legend chip for "Completed WO" — Needs Work answers whose linked WO has
   itself been completed render this color on the row. Color tracks the row CSS
   (#ff9a9a / .highlighted-row-needswork-complete) so the legend matches the rows. */
.mud-chip.status-chip-completed-wo {
    background-color: #ff9a9a !important;
    color: #000000 !important;
}

/* Status cell coloring on the Inspections (Step 1) grid — applied via CellClassFunc
   so only the Status cell takes the color, not the whole row. Selectors are scoped
   to td.<class> so they don't accidentally fire if the same class also appears on a
   <tr> elsewhere via RowClassFunc. Colors mirror the previous chip palette. */
td.complete-row, .mud-chip.complete-row {
    background-color: rgba(50, 205, 50, 0.4) !important;
    font-weight: 500;
}
/* Incomplete sessions (e.g. Schedule Template drill-down) — pink, same as overdue. */
td.incomplete-row, .mud-chip.incomplete-row {
    background-color: rgba(209, 75, 253, 0.7) !important;
    font-weight: 500;
}
td.force-complete-row, .mud-chip.force-complete-row {
    background-color: rgba(144, 238, 143, 0.4) !important;
    font-weight: 500;
}
td.historical-row, .mud-chip.historical-row {
    background-color: rgba(102, 102, 102, 0.6) !important;
    color: #ffffff !important;
    font-weight: 500;
}
td.in-progress-row, .mud-chip.in-progress-row {
    background-color: rgba(68, 117, 255, 0.45) !important;
    font-weight: 500;
}
td.overdue-row, .mud-chip.overdue-row {
    background-color: rgba(209, 75, 253, 0.7) !important;
    font-weight: 500;
}
td.due-soon-row, .mud-chip.due-soon-row {
    background-color: rgba(66, 102, 153, 0.6) !important;
    color: #ffffff !important;
    font-weight: 500;
}
/* "Checked out for offline work" — OVERRIDES every other status color in the Status cell (the label keeps
   the underlying status, e.g. "Overdue (Offline)"). Same class styles the Keys legend chip. The cell is
   clickable: a who-took-it-offline/when dialog with the admin force-clear. */
td.offline-row, .mud-chip.offline-row {
    background-color: rgba(211, 47, 47, 0.75) !important;
    color: #ffffff !important;
    font-weight: 500;
}
td.offline-row { cursor: pointer; }
td.offline-row .offline-status-label { display: block; cursor: pointer; }

/* === App bar height ===
   Both MainLayout and OfflineLayout use a plain <MudAppBar>, which is
   position:fixed and overlays the top of the page. Anything using
   position:sticky with top:0 therefore pins UNDERNEATH it and is invisible, so
   sticky headers must offset by the bar's height.

   MudBlazor sizes the bar with these three rules on .mud-appbar
   .mud-toolbar-appbar, and we mirror that cascade exactly, breakpoint for
   breakpoint — including its shrink factors, so a phone gets 7/8 height in
   portrait and 3/4 in landscape:

       base                     height: appbar - appbar/8   (56px at the default 64)
       (orientation: landscape) height: appbar - appbar/4   (48px)
       (min-width: 600px)       height: appbar             (64px)

   --mud-appbar-height itself is injected into :root at runtime by
   MudThemeProvider from the theme's LayoutProperties.AppbarHeight; the app
   doesn't override it, so it is MudBlazor's default 64px. Deriving from the
   variable rather than hardcoding 56/48/64 means these offsets follow along if
   the theme ever sets a custom bar height. The 64px fallback only applies if the
   provider hasn't rendered yet.

   Note this is the bar's own height, NOT MudMainContent's mt-16 (a flat 64px,
   which over-compensates on phones). */
:root {
    --esmart-appbar-height: calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 8);
}

@media (orientation: landscape) {
    :root {
        --esmart-appbar-height: calc(var(--mud-appbar-height, 64px) - var(--mud-appbar-height, 64px) / 4);
    }
}

@media (min-width: 600px) {
    :root {
        --esmart-appbar-height: var(--mud-appbar-height, 64px);
    }
}

/* === Sticky table headers ===
   js/table-sticky-header.js pins a table's header rows under the app bar
   while the page scrolls through the table, by sliding the header cells
   down. It marks each pinnable table's .mud-table-container (and its top
   scrollbar) with data-sticky-head, then either:
   - where scroll-driven animations exist, writes each table's slide
     keyframes and the scroll offsets where it starts and stops into a
     stylesheet of its own, and lets the animation below run the slide in
     step with the scroll, or
   - elsewhere, sets --sticky-head-offset on every scroll frame.
   Screen only, so a printed page keeps its headers in place.

   The table is the container's child, except in a MudDataGrid, which wraps
   it in a .mud-drop-container for column dragging. The child combinators
   keep the slide off a table nested inside a row, which has a container
   (and slide) of its own. */
@media screen {
    /* A pinned header covers rows, so its fill has to be opaque. A plain
       surface layer would bury the translucent tints some grids put on
       their headers (Schedules, Workflow Approval), so the layer is blended
       with the cell's own color instead: darken over the white surface
       (lighten over the dark one) keeps each cell's color and swaps what
       showed through it for the surface. An opaque header color comes out
       unchanged, and a header with no fill (MudSimpleTable) gets the
       surface. The transform is the scroll-listener slide; where the
       scroll-driven animation below applies, it overrides it. */
    :is(.mud-table-container[data-sticky-head], .mud-table-container[data-sticky-head] > .mud-drop-container) > table > thead > tr > * {
        transform: translateY(var(--sticky-head-offset, 0px));
        z-index: 3;
        background-image: linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface));
        background-blend-mode: darken;
    }

    .theme-dark-mode :is(.mud-table-container[data-sticky-head], .mud-table-container[data-sticky-head] > .mud-drop-container) > table > thead > tr > * {
        background-blend-mode: lighten;
    }

    /* The z-index needs a positioned cell to lift the header over the rows'
       own positioned content (buttons, inputs). MudDataGrid headers are
       already position:relative (and aren't matched here); a FixedHeader
       table's are position:sticky and have to stay that way. */
    .mud-table:not(.mud-table-sticky-header) > .mud-table-container[data-sticky-head] > table > thead > tr > * {
        position: relative;
    }

    /* The mirrored top scrollbar (table-top-scrollbar.js) pins above the
       header. It sits outside the container, so it needs its own lift over
       the container (z-index 2 in mud_custom.css) and a fill. */
    .table-top-scroll.table-top-scroll-stuck {
        z-index: 4;
        background-color: var(--mud-palette-surface);
    }

    /* The scroll-driven slide. The browser runs it on its compositor as the
       page scrolls, so the header can't trail the rows the way a scroll
       listener does. The timeline is the page's scroll, or a dialog body's
       or pane's when that is what scrolls the table (the script marks it).
       The script writes each table's keyframes and scroll range into its own
       stylesheet and names them here through --sticky-head-name/-start/-end.
       Must match the support test in table-sticky-header.js. */
    @supports (animation-timeline: --a) and (animation-range: 0px 1px) {
        html,
        [data-sticky-head-scroller] {
            scroll-timeline: --sticky-head-scroller block;
        }

        :is(.mud-table-container[data-sticky-head], .mud-table-container[data-sticky-head] > .mud-drop-container) > table > thead > tr > *,
        .table-top-scroll[data-sticky-head] {
            animation-name: var(--sticky-head-name, none);
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: --sticky-head-scroller;
            animation-range: var(--sticky-head-start, 0px) var(--sticky-head-end, 0px);
        }
    }
}

/* Mobile-only elements (Inspect Online / Offline duplicate buttons on the
   Inspections page; the duplicate header-checkbox row on Step 3). Hidden by
   default; shown below 700px in the @media block. 700px was picked so that an
   iPad in portrait (768px) stays in the desktop layout — we only collapse to
   the phone layout on actual phones. !important is needed because MudStack /
   MudButton render with their own .mud-stack/.mud-button classes that set
   display:flex/inline-flex and would otherwise beat the cascade. */
.inspections-mobile-only {
    display: none !important;
}

/* Inverse helper — visible by default (uses the element's natural display) and
   hidden below 700px. Use on elements that should only appear on desktop, e.g.
   the in-table header checkboxes on Step 3 that have mobile-only duplicates. */

/* Step 1/2/3 breadcrumb labels. Spelled out ("Step 1") down to 701px; on phone
   portrait (≤700px, see the @media block below) the label is dropped entirely
   and the crumb goes icon-only, with its always-on MudTooltip ("Step 1", …)
   carrying the identity instead. That keeps all three buttons plus the two
   arrows between them on a single row in phone portrait. A phone in LANDSCAPE
   is wider than 700px, so it keeps the spelled-out labels — as does iPad
   portrait. Deliberately NOT reusing .inspections-mobile-only /
   .inspections-desktop-only: those toggle to inline-flex, and this is a plain
   text run that must sit on the text baseline beside the button's icon. */
.step-label-full {
    display: inline;
}

/* SavableDataGrid top pager wrapper — hidden ≤700px. The bottom pager is always
   visible, so we don't lose pagination on phones; we just save vertical space. */
@media (max-width: 700px) {
    .hide-pager-on-mobile {
        display: none !important;
    }
}

/* === Tablet-only breakpoint (701–1100px) ===
   Lives BETWEEN the phone (≤700px) and desktop (≥1101px) layouts. iPad portrait
   (768–820px) lands here. The first toolbar on the Inspections page gets a 10px
   top padding because MudToolBar's default top padding visually collapses when
   the bar wraps to multiple rows (Keys legend + search) at this width range —
   on phone the page header sits flush which looks intentional, on desktop the
   single-row toolbar has its full padding, and only iPad-portrait shows the
   tightness against the page header above. */
@media (min-width: 701px) and (max-width: 1100px) {
    .inspections-first-toolbar {
        padding-top: 10px !important;
    }
}

/* === Tablet-and-down breakpoint (≤1100px) ===
   Catches iPad portrait (768–820px) and phones. Wraps the Keys legend onto its
   own row so the AddButton (+) never wraps off the title row — Keys gets order:99
   + flex-basis:100% which makes it the last flex item AND forces a wrap break,
   leaving [Help][Title][Spacer][AddButton] on the title row. The search field
   also gets wider (50%) since 25% is too cramped at iPad-portrait widths.
   The ≤700px block below layers stronger phone-specific overrides on top
   (search→100%, mobile-only buttons, etc.). */
@media (max-width: 1100px) {
    .inspections-keys-legend {
        order: 99 !important;
        margin: 8px 0 0 0 !important;
        justify-content: flex-start !important;
    }
    .inspections-search-field {
        flex-basis: 50% !important;
        max-width: 50% !important;
    }
}

/* === Phone breakpoint (≤700px) ===
   Full phone layout. iPad portrait at 768–820px does NOT hit this — the user
   asked for phone-mode to stop short of iPad portrait so tablets keep most of
   the desktop UI. */
@media (max-width: 700px) {
    /* Search field collapses onto its own row above the filter/settings buttons.
       order: -1 puts it first in the wrap order; max-width: 100% overrides the
       xs="3" 25% cap; padding-right: 0 strips the right padding meant for inline
       layout. */
    .inspections-search-field {
        flex-basis: 100% !important;
        max-width: 100% !important;
        order: -1 !important;
        padding-right: 0 !important;
    }
    .inspections-search-field .mud-input-control {
        padding-right: 0 !important;
    }

    /* Show the mobile-only Inspect Online / Offline shortcuts (the column-header
       buttons aren't reachable when the table collapses to card layout) and the
       Step 3 header-checkbox duplicates. */
    .inspections-mobile-only {
        display: inline-flex !important;
    }

    /* Inverse — hide desktop-only elements when on mobile. */
    .inspections-desktop-only {
        display: none !important;
    }

    /* Breadcrumb labels drop out entirely so the three step buttons stay on one
       row in phone portrait. Each crumb's always-on MudTooltip ("Step 1", …) is
       what names it once the text is gone. */
    .step-label-full {
        display: none;
    }

    /* With no label left, the icon's own trailing margin (mr-1) would push it
       off-centre inside the button. */
    .step-crumb .mud-icon-root {
        margin-right: 0 !important;
    }

    /* …and the buttons tighten up. This padding trim predates the icon-only
       change — it was measured back when the crumbs still showed S1/S2/S3 and
       three Size.Large buttons (21px side padding each) plus the two arrows came
       to 348px against 339px of usable toolbar, wrapping the third onto its own
       row. Icon-only crumbs are narrower still, so the row now clears a 320px
       screen easily; the trim is kept because it leaves each button ~48px wide,
       which is still above the 44px minimum tap target. */
    .step-crumb {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .step-crumb-arrow {
        margin-left: 4px !important;
        margin-right: 4px !important;
    }
}

/* === Dark-mode contrast for form controls inside bright highlighted rows / cells ===
   The bright fills (#5bb75b / #EC9900 / #FD4B4B) wash out Mud's default theme-driven
   borders, dropdown carets, and checkbox icons — especially in dark mode where they
   default to pale/grey. Force white outlines/icons against the saturated colors and
   dark outlines/icons against yellow. Applies to both row-level (.highlighted-row-*)
   and cell-level (.cell-*) classifiers. */

/* Outlined input <fieldset> border (dropdowns + text fields use this for the box) */
.highlighted-row-normal td .mud-input-outlined-border,
.highlighted-row-abnormal td .mud-input-outlined-border,
.highlighted-row-needswork td .mud-input-outlined-border,
.cell-normal .mud-input-outlined-border,
.cell-abnormal .mud-input-outlined-border,
.cell-needswork .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.75) !important;
}
.highlighted-row-normal td .mud-input-outlined:hover .mud-input-outlined-border,
.highlighted-row-abnormal td .mud-input-outlined:hover .mud-input-outlined-border,
.highlighted-row-needswork td .mud-input-outlined:hover .mud-input-outlined-border,
.cell-normal .mud-input-outlined:hover .mud-input-outlined-border,
.cell-abnormal .mud-input-outlined:hover .mud-input-outlined-border,
.cell-needswork .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #ffffff !important;
}

/* Dropdown caret + adornment icons (svg). Intentionally NOT targeting
   .mud-icon-default — that catches the severity dot/diamond/square icons
   rendered inside the MudSelect's selected-value display, which are colored
   via .sev-icon-normal/abnormal/needswork and need to keep their native green/
   orange/red. */
.highlighted-row-normal td .mud-select-icon,
.highlighted-row-normal td .mud-input-adornment .mud-icon-root,
.highlighted-row-abnormal td .mud-select-icon,
.highlighted-row-abnormal td .mud-input-adornment .mud-icon-root,
.highlighted-row-needswork td .mud-select-icon,
.highlighted-row-needswork td .mud-input-adornment .mud-icon-root,
.cell-normal .mud-select-icon,
.cell-normal .mud-input-adornment .mud-icon-root,
.cell-abnormal .mud-select-icon,
.cell-abnormal .mud-input-adornment .mud-icon-root,
.cell-needswork .mud-select-icon,
.cell-needswork .mud-input-adornment .mud-icon-root {
    color: #ffffff !important;
    fill: currentColor !important;
}

/* Checkbox box outline (the unchecked square / checked tick svg) */
.highlighted-row-normal td .mud-checkbox .mud-icon-root,
.highlighted-row-abnormal td .mud-checkbox .mud-icon-root,
.highlighted-row-needswork td .mud-checkbox .mud-icon-root,
.cell-normal .mud-checkbox .mud-icon-root,
.cell-abnormal .mud-checkbox .mud-icon-root,
.cell-needswork .mud-checkbox .mud-icon-root {
    color: #ffffff !important;
}

/* Placeholder text in numeric / text inputs (range hints, "Comment...", etc.) */
.highlighted-row-normal td input::placeholder,
.highlighted-row-abnormal td input::placeholder,
.highlighted-row-needswork td input::placeholder,
.cell-normal input::placeholder,
.cell-abnormal input::placeholder,
.cell-needswork input::placeholder {
    color: rgba(255, 255, 255, 0.75) !important;
    opacity: 1 !important;
}

/* === Yellow (warning) row: same idea but inverted — dark borders/icons/text on yellow ===
   Yellow is bright enough that white text/borders disappear; everything inside flips dark. */
.highlighted-row-yellow td {
    color: #1a1a1a !important;
}
.highlighted-row-yellow td .mud-input > input.mud-input-root,
.highlighted-row-yellow td div.mud-input-slot.mud-input-root,
.highlighted-row-yellow td input,
.highlighted-row-yellow td .mud-input-slot {
    color: #1a1a1a !important;
}
.highlighted-row-yellow td .mud-input-outlined-border {
    border-color: rgba(0, 0, 0, 0.6) !important;
}
.highlighted-row-yellow td .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #1a1a1a !important;
}
.highlighted-row-yellow td .mud-select-icon,
.highlighted-row-yellow td .mud-input-adornment .mud-icon-root,
.highlighted-row-yellow td .mud-checkbox .mud-icon-root {
    color: #000000 !important;
    fill: currentColor !important;
}
.highlighted-row-yellow td input::placeholder {
    color: rgba(0, 0, 0, 0.55) !important;
    opacity: 1 !important;
}

.district-badge span.mud-badge {
    transform: translateX(-10px) translateY(5px);
}

/* Same nudge as the district badge — an app-bar icon button leaves the badge sitting too far
   out on its own, so pull it back over the icon. */
.message-board-badge span.mud-badge {
    transform: translateX(-10px) translateY(5px);
}

/* Rendered markdown from a message board post. Board content is authored by other customers,
   so the styling deliberately reins in what a post can do to the page: headings are capped at
   roughly body size, images can never overflow their column, and long unbroken strings wrap
   instead of stretching the layout. */
.board-post-body {
    overflow-wrap: anywhere;
}

.board-post-body > *:first-child {
    margin-top: 0;
}

.board-post-body > *:last-child {
    margin-bottom: 0;
}

.board-post-body h1,
.board-post-body h2,
.board-post-body h3,
.board-post-body h4,
.board-post-body h5,
.board-post-body h6 {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0.75em 0 0.35em;
}

.board-post-body p {
    margin: 0 0 0.65em;
}

.board-post-body ul,
.board-post-body ol {
    margin: 0 0 0.65em;
    padding-left: 1.5em;
}

.board-post-body blockquote {
    margin: 0 0 0.65em;
    padding: 0.25em 0 0.25em 0.9em;
    border-left: 3px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.board-post-body pre {
    padding: 0.6em 0.8em;
    border-radius: 4px;
    background-color: var(--mud-palette-background-grey);
    overflow-x: auto;
}

.board-post-body code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.9em;
}

.board-post-body img {
    max-width: 100%;
    height: auto;
}

.board-post-image {
    max-width: 100%;
    max-height: 420px;
    border-radius: 4px;
    cursor: zoom-in;
}

/* Thread titles always read as headings, not as body text. Unread state is signalled by the
   filled dot in the left gutter rather than by weight, so both can be seen at once. */
.board-thread-title {
    font-weight: 700;
}

/* Still used by the direct-message list, where bold does mean unread. */
.board-thread-unread {
    font-weight: 700;
}

.board-hidden-post {
    opacity: 0.6;
}

/* The size on a document download button reads as a detail, not part of the file name. */
.board-attachment-size {
    opacity: 0.7;
    margin-left: 0.35em;
    font-weight: 400;
}

.access-label .mud-typography-body2 {
    font-weight: bold;
}
.district-menu {
    max-height: 320px;
}
.district-menu .mud-list{
    max-height: 300px;
}

/* Inactive row styling — light mode */
.inactive-row {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

.inactive-row .mud-table-cell {
    color: #ffffff !important;
    border-bottom-color: #555555 !important;
}

.inactive-row .mud-button-filled:disabled {
    background-color: #555555 !important;
    color: #ffffff !important;
}

.inactive-row .mud-icon-button-filled:disabled {
    background-color: #555555 !important;
    color: #ffffff !important;
}

/* Inactive row styling — dark mode */
.theme-dark-mode .inactive-row {
    background-color: #e0e0e0 !important;
    color: #212121 !important;
}

.theme-dark-mode .inactive-row .mud-table-cell {
    color: #212121 !important;
    border-bottom-color: #bdbdbd !important;
}

.theme-dark-mode .inactive-row .mud-button-filled:disabled {
    background-color: #bdbdbd !important;
    color: #212121 !important;
}

.theme-dark-mode .inactive-row .mud-icon-button-filled:disabled {
    background-color: #bdbdbd !important;
    color: #212121 !important;
}

/* Workflow Approval — per-question row coloring (port of legacy purple_row / orange_row).
   Overdue: the user has pending approvals whose earliest due date has passed.
   Review-in-progress: no pending approvals for the user, but items are out for review.
   Pending rows keep the default (no class). The .mud-chip variants paint the legend chips. */
.approval-overdue-row td, .mud-chip.approval-overdue-row {
    background-color: #6a84ee !important;
    color: #ffffff !important;
}

/* Rejected and Returned as Work Order — a Level-1 rejection that generated a review work order. Red: the
   hardest negative state on the board, so it outranks the orange re-approval tint below. [07/28/2026] */
.approval-review-row td, .mud-chip.approval-review-row {
    background-color: #d32f2f !important;
    color: #ffffff !important;
}

/* Returned for Re-approval (ActionID 5 — the negative action above Level 1) — the question is back in
   a lower level's queue awaiting re-approval, no work order. Orange (was yellow) to sit between the
   blue overdue rows and the red rejected-for-review rows. [07/28/2026] */
.approval-rejected-row td, .mud-chip.approval-rejected-row {
    background-color: #ec9900 !important;
    color: #ffffff !important;
}

.approval-header-value {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

.ordered-list .mud-list-item {
    padding: 0px;
}
.ordered-list .mud-list-item-icon {
    min-width: 25px;
}

/* Numbered import steps (ImportInstructions.razor): the number and the text are separate flex
   columns, so the wrapped lines of a long step line up under its text, not under the number.
   Baseline alignment keeps the number level with the first line of text even when that line is
   taller (step 1 holds the download button). */
.import-step {
    display: flex;
    align-items: baseline;
}
.import-step-number {
    flex: 0 0 1.25em;
}

.virtualized-select-container {
    position: relative;
    margin: 4px 0 0 0;
}
.virtualized-select-container .mud-checkbox .mud-checkbox-dense {
    padding: 0 5px 0 0;
}

.virtualized-select-container.validation-error .selected-chips {
    border-color: var(--mud-palette-error);
}

.virtualized-select-container .validation-error-message {
    color: var(--mud-palette-error);
    font-size: 0.75rem;
    margin-top: 3px;
    margin-left: 14px;
}

.virtualized-dropdown {
    position: relative;
}

.virtualized-dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid rgba(0, 0, 0, 0.23);
    border-radius: 4px;
    background: var(--mud-palette-surface);
}

.ddl-search-bar {
    position: sticky;
    top: 0;
    background-color: var(--header-background-color-lightmode);
    z-index: 1;
    padding: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.theme-dark-mode .ddl-search-bar {
    background-color: #191a39;
}

/* The search field itself stays white on the purple search-bar header. */
.ddl-search-bar .mud-input.mud-input-outlined {
    background-color: #ffffff;
    border-radius: var(--mud-default-borderradius);
}
.theme-dark-mode .ddl-search-bar .mud-input.mud-input-outlined {
    background-color: rgb(255 255 255 / 0.12);
}

.options-list {
    padding: 8px;
}

.option-item {
    padding: 0px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.option-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.load-more-container {
    text-align: center;
    padding: 8px;
}

.selected-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    /* Right padding keeps long text and chips clear of the absolutely positioned dropdown arrow. */
    padding: 4px 28px 6px 8px;
    height: auto;
    min-height: 40px;
    /* Hover shade by default, matching the MudBlazor inputs (see mud_custom.css). The virtualized
       single/multi-select dropdowns draw their own box instead of a .mud-input-outlined-border,
       so the token has to be applied here; hover deliberately no longer differs. */
    border: 1px solid var(--mud-palette-action-default);
    border-radius: 4px;
    cursor: pointer;
}
.selected-chips p{
    padding: 3px 0 0 5px;
}

.selected-chips .mud-chip {
    z-index: 2;
}

.custom-select-placeholder {
    color: currentColor;
    opacity: 0.5;
    padding: 4px 0 0 5px;
}

.dropdown-actions {
    padding: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
    display: flex;
    justify-content: space-between;
    position: sticky;
    bottom: 0;
    background: var(--mud-palette-surface);
}

.virtualized-dropdown-popover {
    box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
}

.virtualized-dropdown-content {
    background: var(--mud-palette-surface);
}

.filter-btn,
.settings-btn,
.search-button-group {
    align-self: flex-end;
    margin-bottom: 4px;
}

/* Standalone search input (pages without the Go button). */
.search-input .mud-input {
    height: 40px;
    min-height: 40px;
}

.search-input input.mud-input-root {
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.equipment-details .mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label {
    margin-top: 3px;
    margin-bottom: 4px;
}

.equipment-details .equipment-field-search-group,
.search-button-group {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
}

.equipment-details .equipment-field-search-group .equipment-field-search-input,
.search-button-group .search-button-input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

.equipment-details .equipment-field-search-group .equipment-field-search-input .mud-input,
.search-button-group .search-button-input .mud-input {
    height: 40px;
    min-height: 40px;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.equipment-details .equipment-field-search-group .equipment-field-search-input input.mud-input-root,
.search-button-group .search-button-input input.mud-input-root {
    height: 40px;
    line-height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

.equipment-details .equipment-field-search-group .equipment-field-search-button,
.search-button-group .search-button-action {
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.datafield-filter-panel-header {
    background-color: #f5f5f5 !important;
}
.datafield-filter-panel {
    padding: 20px;
    background-color: #f5f5f5;
}

.theme-dark-mode .datafield-filter-panel-header {
    background-color: #5a5ed7 !important;
}

.theme-dark-mode .datafield-filter-panel {
    background-color: #191a39;
}

/* Dialog title highlight for name of edit or view item*/
.dialog-title-highlight {
    color: #427299;
    font-weight: bold;
}

/* Incoming Equipment chrome on Replace/Relocate page — header, pagination footer, and form column header */
.incoming-equipment-section .mud-toolbar:not(.mud-toolbar-appbar),
.incoming-equipment-section .mud-table-pagination,
.incoming-equipment-section .mud-table-pagination-toolbar,
.incoming-equipment-section .mud-table-paginator,
.replace-col-header.incoming-equipment-header {
    background-color: #a7acff !important;
}

.incoming-equipment-section .filter-toolbar,
.incoming-equipment-section .mud-toolbar.filter-toolbar:not(.mud-toolbar-appbar) {
    background-color: #e4e4e4 !important;
}

.incoming-equipment-section .filter-toolbar .floating-label {
    background-color: #e4e4e4;
}

.theme-dark-mode .incoming-equipment-section .filter-toolbar,
.theme-dark-mode .incoming-equipment-section .mud-toolbar.filter-toolbar:not(.mud-toolbar-appbar) {
    background-color: #35377b !important;
}

.theme-dark-mode .incoming-equipment-section .filter-toolbar .floating-label {
    background-color: #35377b;
}

/* Swap Fields header on Replace/Relocate page — uses the system's Material purple (#9C27B0, same as .btn-purple) */
.replace-col-header.swap-fields-header {
    background-color: #9C27B0;
}
.replace-col-header.swap-fields-header .dialog-title-highlight {
    color: #fff;
}

/* ---------- Shared Replace/Relocate column layout ----------
   Used by ReplaceFormPanel (3 columns: Outgoing / Swap / Incoming) and
   RelocateFormPanel (1 column). Both render a MudPaper.replace-col with a
   header strip and a vertical stack of .replace-col-row items. */
.replace-col {
    overflow: hidden;
    height: 100%;
}

.replace-col-header {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background-color: var(--header-background-color-lightmode);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.replace-col-body {
    padding: 0;
}

/* One row = one field; matching min-height keeps all columns aligned row-by-row.
   flex-direction: column stretches children horizontally so dropdowns fill the row. */
.replace-col-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 10px;
    min-height: 72px;
}

/* "In-place context" group (rows 5-14 in Replace, location rows in Relocate) —
   cyan highlight with matching floating-label fill so virtualized dropdown labels blend in. */
.replace-col-row-reset {
    background-color: #c4f4ff;
}

.replace-col-row-reset .floating-label {
    background-color: #c4f4ff;
}

.mud-nav-link {
    position: relative;
    padding-left: 2.5rem !important;
}

.mud-nav-link .mud-nav-link-icon {
    position: absolute;
    left: 1.2rem;
}

.nav-number {
    position: absolute;
    left: 1.4rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: bold;
    opacity: 1;
    min-width: 0.9rem;
    text-align: left;
    top: 0.48rem;
}
.admin-menu .nav-number {
    left: 1.2em;
}
/* Group-heading icons sit in the same column as the .nav-number digits of the
   links underneath them. In the open drawer the number's box starts at 1.08rem
   (the 1.2em above, of the 0.9rem number font) and a digit is ~0.5rem wide, so
   the digit's centre is ~1.33rem from the .mud-nav-link left edge -- which is
   the same edge for the group button and its children, because of the blanket
   padding-left above. Centring the 1.5rem icon on that gives 1.33 - 0.75rem.
   The mini/closed drawer keeps the original 1.2rem: there the number font grows
   to 1rem, so 1.2em resolves to 1.2rem and the two columns already line up. */
.admin-menu .menu-category > button.mud-nav-link .mud-nav-link-icon {
    left: 0.58rem;
}
.mud-drawer--closed .admin-menu .menu-category > button.mud-nav-link .mud-nav-link-icon {
    left: 1.2rem;
}
/* Cascading menu numbering. Every level's number is absolutely positioned into a
   fixed column so that each sub-level's number starts exactly where its parent's
   label starts (I.1 under "Reports, Scheduler, Cover Page", I.3.1 under "Reports
   Cover Page"). Offsets are measured from the .mud-nav-link left edge, which is
   the same at every nesting depth because of the blanket padding-left above:

     level 1   number 1.4rem    label 3.25rem   (2.5rem padding + the 12px .mud-nav-link-text margin)
     level 2   number 3.25rem   label 5.25rem
     level 3   number 5.25rem   label 7.5rem

   The padding-left on .mud-nav-link-text reserves the number's column; without it
   the out-of-flow number would sit on top of the label. Because the columns are
   absolute they land identically in the drawer and in the top-bar popover, so
   neither needs a .mud-popover override any more. */
.nav-number-2 {
    position: absolute;
    left: 3.25rem;
    top: 0.78rem;
    font-size: 0.7rem;
    font-weight: bold;
    opacity: 1;
}
.mud-nav-link-text:has(.nav-number-2) {
    padding-left: 2rem;
}

.nav-number-3 {
    position: absolute;
    left: 5.25rem;
    top: 0.78rem;
    font-size: 0.7rem;
    font-weight: bold;
    opacity: 1;
}
.mud-nav-link-text:has(.nav-number-3) {
    padding-left: 4.25rem;
}

.menu-category > button.mud-nav-link {
    background-color: #d2d4fd;
}
.theme-dark-mode .menu-category > button.mud-nav-link {
    background-color: #191a39;
}
/* 1.1 Insp Activities severity boxes: each box hugs its content and the leftover width becomes
   even gaps between them (none outside); boxes wrap to the next row when four no longer fit. */
.insp-severity-boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
}
.insp-severity-boxes > .mud-paper {
    flex: 0 0 auto;
}
/* Dashboard toolbars: the Filters and Tools buttons never shrink or wrap their text. */
.dashboard-toolbar > .filter-btn,
.dashboard-toolbar > .mud-menu {
    flex: 0 0 auto;
}
.dashboard-toolbar .mud-button-root {
    white-space: nowrap;
}
/* Dashboard drawer groups: the group number takes the icon column (centred on the
   1.1/1.2 digits below it) and the group icon trails the title. In the mini rail the
   title and trailing icon collapse and the number stays, like the child rows. */
.dashboard-menu .nav-group-number {
    position: absolute;
    left: 1.05rem;
    top: 50%;
    transform: translateY(-50%);
    font-weight: bold;
}
.mud-drawer--closed .dashboard-menu .nav-group-title {
    font-size: 0;
}
.mud-drawer--closed .dashboard-menu .nav-group-number {
    left: 1.2rem;
    font-size: 1rem;
}
.mud-drawer--closed .dashboard-menu .nav-group-icon {
    display: none;
}

/* Styles for when nav drawer is closed */
.mud-drawer--closed .mud-nav-link-text {
    font-size: 0;
}
.mud-drawer--closed .mud-nav-link-text .nav-number {
    font-size: 1rem;
}
.mud-drawer--closed.mud-drawer-mini .mud-nav-group * .mud-navmenu .mud-nav-item .mud-nav-link {
    padding: 16px;
}
.mud-drawer--closed .mud-nav-link{
    padding-left: 8px !important;
}
/* Quick Reference Header (full-width) */
.qr-header {
    margin: 0 2em;
}

/* Small bullet points for QR lists */
.qr-bullet {
    font-size: 8px !important;
    width: 8px !important;
    height: 8px !important;
}

/* Indentation for sub-sections */
.qr-indent {
    margin-left: 32px;
}

/* Quick Reference Expansion Panels */
.qr-expansion-panels {
    width: 100%;
}

.qr-expansion-panels .mud-expand-panel {
    margin-bottom: 4px;
    background-color: transparent;
}

.qr-expansion-panels .mud-expand-panel-header {
    padding: 8px 16px;
}

/* Panel header with darker background */
.quickref .qr-panel .mud-expand-panel-header {
    background-color: rgba(0, 0, 0, 0.12);
}

.quickref .qr-expansion-panels .mud-expand-panel {
    background-color: #fdffb9;
}

.quickref .qr-expansion-panels .mud-expand-panel-content {
    background-color: #fdffb9;
    padding: 0;
}

/* Panel content with borders (left, right, bottom only) */
.qr-panel-content {
    padding: 12px 16px;
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-top: none;
}

/* Dark mode adjustments for QR */
.theme-dark-mode .quickref .qr-panel .mud-expand-panel-header {
    background-color: rgba(255, 255, 255, 0.15);
}

.theme-dark-mode .quickref .qr-expansion-panels .mud-expand-panel {
    background-color: #4a4a00;
}

.theme-dark-mode .quickref .qr-expansion-panels .mud-expand-panel-content {
    background-color: #4a4a00;
}

.theme-dark-mode .qr-panel-content {
    border-color: rgba(255, 255, 255, 0.3);
}

.theme-dark-mode .quickref .mud-icon-root.mud-primary-text {
    color: #5fb4fa !important;
}

/* Footer copyright - now part of dialog-taskbar-footer in mud_custom.css */

.mud-input div.mud-input-root:has(.mud-chip-container) {
    padding-bottom: 20px;
}

.text-danger-bold {
    color: var(--mud-palette-error);
    font-weight: bold;
}

/* UserStatusDropdown: the selected "Inactive" value in the same red as .text-danger-bold. */
.user-status-inactive .mud-input-slot {
    color: var(--mud-palette-error);
    font-weight: bold;
}

.bulk-import-help-panel {
    border: 1px solid black;
    background-color: #d9edf7;
}

.theme-dark-mode .bulk-import-help-panel {
    border-color: var(--mud-palette-lines-default);
    background-color: #173745;
}

.numeric-table-field input{
    min-width: 8px !important;
}

/* File drop zone */
.drop-zone {
    border: 2px dashed var(--mud-palette-lines-default);
    transition: border-color 0.15s, background-color 0.15s;
}

.drop-zone.drop-zone-active,
.drop-zone:hover {
    border-color: var(--mud-palette-primary);
    background-color: var(--mud-palette-primary-hover);
}

/* Gantt chart dark-mode color tokens */
body.theme-dark-mode .gantt-chart {
    --gantt-row-complete-bg: #193525;
    --gantt-row-overdue-bg: #3a1f1f;
    --gantt-row-inprogress-bg: #382a17;
    --gantt-row-future-bg: #172d40;
    --gantt-row-project-bg: #2f2038;
    --gantt-year-header-bg: #202542;
    --gantt-weekend-bg: rgba(255, 255, 255, 0.06);
    --gantt-hover-bg: rgba(255, 255, 255, 0.04);
    --gantt-grid-line-soft: rgba(255, 255, 255, 0.07);
    --gantt-grid-line-strong: rgba(255, 255, 255, 0.14);
}

.mud-menu-list {
    background-color: #dcdcdc;
}
.theme-dark-mode .mud-menu-list {
    background-color: #373740;
}

/* Global search results — <mark> comes from MudHighlighter around the typed text */
.global-search-results mark {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.55);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 600;
}

.theme-dark-mode .global-search-results mark {
    background-color: rgba(var(--mud-palette-warning-rgb), 0.40);
}

/* Keyword line, shown only when the term matched a keyword and nothing else */
.global-search-results .search-match-keywords {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-style: italic;
    opacity: 0.85;
}

.global-search-results .search-match-keywords .mud-icon-root {
    font-size: 0.9rem;
}

.alert-outline {
    border: 1px solid currentColor;
}

/* A softer outline for a note that sits inline in a toolbar (the Step 3 preview note),
   so it reads as a callout rather than a button. */
.alert-outline-light {
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
}

/* ---- Main nav drawer: close tab on the drawer's left edge ---- */
/* Fixed to the viewport, so it stays vertically centred no matter how far the
   drawer's own content is scrolled. Faded out while the drawer is closed. */
.nav-drawer-close-tab {
    position: fixed;
    top: 50%;
    right: var(--nav-drawer-width, 350px);
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 64px;
    border: 1px solid var(--mud-palette-lines-default);
    border-right: none;
    border-radius: 8px 0 0 8px;
    background-color: var(--mud-palette-surface);
    box-shadow: -2px 0 6px rgba(0, 0, 0, 0.18);
    transition: opacity 150ms ease-in-out;
}

.mud-drawer--closed .nav-drawer-close-tab {
    opacity: 0;
    pointer-events: none;
}

.nav-drawer-close-tab .mud-button-root.mud-icon-button {
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0;
    border-radius: inherit;
    color: var(--mud-palette-text-secondary);
}

.nav-drawer-close-tab .mud-button-root.mud-icon-button:hover {
    color: var(--mud-palette-primary);
}

/* Narrow screens: the drawer nearly fills the viewport, so tuck the tab just
   inside its left edge rather than letting it hang off-screen. */
@media (max-width: 599px) {
    .nav-drawer-close-tab {
        right: calc(var(--nav-drawer-width, 350px) - 28px);
        border-right: 1px solid var(--mud-palette-lines-default);
        border-radius: 8px;
    }
}