: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;
}
.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;
}

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

/* 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. */

/* 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 {
        flex-basis: 100% !important;
        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;
    }
}

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

.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;
}

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

.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;
}

.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;
    padding: 4px 0 6px 8px;
    height: auto;
    min-height: 40px;
    border: 1px solid rgba(155, 155, 155, 0.5);
    border-radius: 4px;
    cursor: pointer;
}
.selected-chips p{
    padding: 3px 0 0 5px;
}
.selected-chips:hover {
    border: 1px solid rgba(155, 155, 155, 1);
}

.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;
}

.settings-btn {
    top: -1px;
}

.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;
}
.mud-popover .nav-number {
    left: 0.5rem;
}

.nav-number-2 {
    position: relative;
    left: -0.6rem;
    font-size: 0.7rem;
    font-weight: bold;
    opacity: 1;
    top: -0.1rem;
}
.mud-popover .nav-number-2 {
    left: -1rem;
}

.nav-number-3 {
    position: relative;
    left: 0rem;
    font-size: 0.7rem;
    font-weight: bold;
    opacity: 1;
    top: -0.1rem;
}
.mud-popover .nav-number-3 {
    left: 0rem;
}

.menu-category > button.mud-nav-link {
    background-color: #d2d4fd;
}
.theme-dark-mode .menu-category > button.mud-nav-link {
    background-color: #191a39;
}

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

.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;
}