:root {
    /*Mudblazor Overrides*/
    --mud-typography-default-font-family: Tahoma, Verdana, Arial, sans-serif !important;
    --mud-typography-default-family: Tahoma, Verdana, Arial, sans-serif !important;
    --mud-typography-button-text-transform: none !important; /* Remove the uppercase on buttons */
    --dialog-toolbar-height: 32px;
    --dialog-xs-width: 30vw;
    --dialog-sm-width: 45vw;
    --dialog-sm-height: 60vh;
    --dialog-md-width: 65vw;
    --dialog-md-height: 60vh;
    --dialog-lg-width: 98vw;
    --dialog-lg-height: 92vh;
}

.dialog-toolbar.mud-toolbar {
    border: none;
    padding: 0;
    height: var(--dialog-toolbar-height);
}

.mud-typography,
.mud-button,
.mud-input,
[class^="mud-"] {
    font-family: Tahoma, Verdana, Arial, sans-serif;
}

.mud-expand-panel.no-gutters .mud-expand-panel-header {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.mud-expand-panel.no-gutters .mud-expand-panel-gutters {
    padding: 0;
}

.mud-expand-panel .mud-expand-panel-content.mud-expand-panel-gutters {
}

.mud-expand-panel-header {
    background-color: var(--header-background-color-lightmode);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.mud-dialog .mud-dialog-title {
    padding-top: 10px;
    padding-bottom: 10px;
}
.mud-dialog {
    border: 1px solid grey;
}

/* Disable MudBlazor's open-dialog scale/fade animation for any dialog that uses
   one of our presets. Without this, the 100ms CSS animation races against MudEx's
   inline style application and produces a visible "blink" (scale 0.5→1). Our
   defaults already set AnimationDurationInMs=0 but that only takes effect AFTER
   the animation has started. Removing the CSS animation entirely is cleaner.
   NOTE: selectors intentionally do NOT use `.mud-dialog-container >` because
   MudEx moves the dialog out of the container at runtime (insertBefore on body),
   and any rule requiring the container as parent would stop matching after that. */
.mud-dialog.mud-dialog-width-sm,
.mud-dialog.mud-dialog-width-md,
.mud-dialog.mud-dialog-width-lg,
.mud-dialog.mud-dialog-width-xl {
    animation: none !important;
    -webkit-animation: none !important;
}

/* Pre-size standardized dialog presets so the first rendered frame matches
   MudGlobals.cs before MudEx applies CustomSize inline styles. MudBlazor's
   width classes map to our preset names as: sm=DialogXS, md=DialogSM,
   lg=DialogMD, xl=DialogLG.
   No !important — snap/resize set inline width/height and must be able to
   override. The .mud-dialog.mud-dialog-width-xx specificity (0,2,0) already
   beats MudBlazor's default (0,1,0) rules without it. */
.mud-dialog.mud-dialog-width-sm {
    width: var(--dialog-xs-width);
    max-width: var(--dialog-xs-width);
}

.mud-dialog.mud-dialog-width-md {
    width: var(--dialog-sm-width);
    max-width: var(--dialog-sm-width);
    height: var(--dialog-sm-height);
    max-height: var(--dialog-sm-height);
}

.mud-dialog.mud-dialog-width-lg {
    width: var(--dialog-md-width);
    max-width: var(--dialog-md-width);
    height: var(--dialog-md-height);
    max-height: var(--dialog-md-height);
}

.mud-dialog.mud-dialog-width-xl {
    width: var(--dialog-lg-width);
    max-width: var(--dialog-lg-width);
    height: var(--dialog-lg-height);
    max-height: var(--dialog-lg-height);
}

.dialog-toolbar {
    display: flex;
    align-items: center;
}

/* Dark mode style when mud-theme-dark is present on body */
body.theme-dark-mode .mud-expand-panel-header {
    background-color: #191a39;
}

.mud-expand-panel-content,
.mud-expand-panel-gutters {
    padding: 0;
}

/* Generic bottom border utility for tables - only when data exists */
.table-border-bottom:has(.mud-table-body .mud-table-row) .mud-table-container {
    border-bottom: 1px solid #B2B2B2;
}

/* Add border to table container when no data */
.table-border-bottom:not(:has(.mud-table-body .mud-table-row)) .mud-table-container {
    border-left: 1px solid #B2B2B2;
    border-right: 1px solid #B2B2B2;
    border-bottom: 1px solid #B2B2B2;
}

.mud-dialog-title {
    background-color: #a7acff;
}

.theme-dark-mode .mud-dialog-title {
    background-color: #121329;
}

.mud-tab {
    text-transform: none;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: 6px 16px;
    padding-inline-start: 16px;
    padding-inline-end: 16px;
}

.mud-input-control.mud-input-required:focus-within .mud-input.mud-input-outlined > .mud-input-outlined-border legend {
    padding: 0 8px;
}

.mud-dialog .mud-dialog-actions {
    background-color: #f5f5f5;
    padding: 8px 24px;
}

.theme-dark-mode .mud-dialog-actions {
    background-color: var(--header-background-color-darkmode);
}

.mud-toolbar:not(.mud-toolbar-appbar) {
    /*causes border inside dialogs
        border: 1px solid #AEB4FF;*/
    background-color: #D2D4FD;
}

.mud-toolbar:not(.mud-toolbar-appbar) h4 {
    margin-left: 0.5em;
    color: #427299;
}

.theme-dark-mode .mud-toolbar:not(.mud-toolbar-appbar) {
    background-color: #191a39;
}

.theme-dark-mode .mud-toolbar:not(.mud-toolbar-appbar) h4 {
    color: #5fb4fa;
}

.mud-table-head .column-header {
    font-weight: bold;
    text-align: center;
    display: block !important;
}

.mud-table-head .mud-table-cell {
    background-color: #CACACA;
}
.mud-table-head th.mud-table-cell {
    border: 1px solid #868686;
}
.theme-dark-mode .mud-table-head .mud-table-cell {
    background-color: #4d4d4d;
}
.theme-dark-mode .mud-table-head th.mud-table-cell {
    border: 1px solid #ffffff;
}

.mud-table .mud-table-cell {
    border-right: 1px solid #B2B2B2;
    border-left: 1px solid #B2B2B2;
}

.button-column-width{
    width: 1px;
}

.numeric-column-width {
    width: 120px;
}

.checkbox-column-width{
    width: 1px;
}

.mud-table-root .mud-checkbox{
    display: inline-block;
}

.mud-drawer.mud-drawer-mini.mud-drawer-pos-left.mud-drawer--closed ~ div:not(.mud-main-content), .mud-drawer.mud-drawer-mini.mud-drawer-pos-left.mud-drawer--open ~ div:not(.mud-main-content), .mud-drawer.mud-drawer-persistent.mud-drawer-pos-left.mud-drawer--open ~ div:not(.mud-main-content) {
    margin-left: 0;
}

.mud-paper-outlined {
    border: 1px solid #000;
}

.theme-dark-mode .mud-paper-outlined {
    border: 1px solid #fff;
}

.mud-toolbar .mud-typography-h4{
    font-weight: bold;
}

.mud-data-grid .mud-table-cell .column-header .column-options {
    flex-direction: column;
    position: absolute;
    right: 0;
    bottom: 0;
}
.mud-data-grid .mud-table-cell .column-header .column-options .filter-button {
    position: absolute;
    top: 0;
}
.mud-data-grid .mud-table-cell .column-header .column-options .sort-direction-icon {
    /*margin: 20px 0 0 0;*/
    margin: 0;
}

.mud-table-head .mud-table-row .mud-table-cell {
    /*vertical-align: top;*/
    padding: 6px;
}

.mud-data-grid .mud-table-cell .column-header {
    align-items: baseline;
    justify-content: center;
}

.mud-expand-panel.no-gutters.sub-panel .mud-expand-panel-header {
    padding: 5px;
}

.mud-data-grid-columns-panel .mud-button-root:disabled {
    display: none;
}

.mud-tabs-tabbar {
    border-bottom: 3px solid #ddd;
    position: relative;
    z-index: 1;
}
.mud-tabs-tabbar .mud-tabs-tabbar-inner {
    min-height: unset;
}
.mud-tab {
    margin-right: 4px;
    border-radius: 8px 8px 0 0;
    border: 2px solid #ddd;
    border-bottom-color: transparent;
    min-height: unset;
}
.mud-tab.mud-tab-active {
    color: #000000;
    background-color: #8FBBE7 !important;
    cursor: default;
}

.equip-detail-header {
    display: flex;
    flex-wrap: wrap;
}
.equip-detail-header .mud-chip b {
    margin-right: 4px;
}
.mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end {
    /*font-size: 0.8em;*/
}
.mud-input-adornment-start.mud-input-root-filled-shrink {
    margin-top: 5px;
}
.mud-input > input.mud-input-root.mud-input-root-filled.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root.mud-input-root-filled.mud-input-root-margin-dense {
    padding: 12px 0;
}
.mud-table-toolbar {
    --mud-internal-toolbar-height: auto;
    padding: 0;
}
.mud-data-grid-columns-panel {
    left: auto !important;
    right: 48px !important;
}

.mud-paperbar {
    border: 1px solid #AEB4FF;
    background-color: #D2D4FD;
}
.mud-paperbar h4 {
    margin-left: 0.5em;
    color: #427299;
}
.theme-dark-mode .mud-paperbar {
    background-color: #191a39;
}
.theme-dark-mode .mud-paperbar h4 {
    color: #5fb4fa;
}

.mud-button-filled-default {
    background-color: #b4b4b4 !important;
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    color: var(--mud-palette-default-text);
}

.theme-dark-mode .mud-button-filled-default {
    background-image: linear-gradient(rgb(125 125 125), rgb(85 85 85));
    color: var(--mud-palette-default-text);
}

/*search*/
.mud-input.mud-input-filled {
    background-color: rgb(255 255 255);
}
@media (hover: hover) and (pointer: fine) {
    .mud-input.mud-input-filled:hover {
        background-color: rgba(255,255,255);
    }
}
.theme-dark-mode .mud-input.mud-input-filled {
    background-color: rgb(255 255 255 / 0.33);
}

.theme-dark-mode .mud-button-filled-default {
    background-color: #585858 !important;
    color: var(--mud-palette-default-text);
}

/* Force all table-related backgrounds to use proper colors */
.table-drilldown-dialog .mud-main-content .mud-toolbar,
.table-drilldown-dialog .mud-toolbar {
    border: 1px solid #AEB4FF !important;
    background-color: #D2D4FD !important;
}

.theme-dark-mode .table-drilldown-dialog .mud-main-content .mud-toolbar,
.theme-dark-mode .table-drilldown-dialog .mud-toolbar {
    background-color: #191a39 !important;
}

body.theme-dark-mode .minmax-expand-panel-header {
    background-color: #191a39;
}

.mud-ex-select .d-flex {
    overflow: auto;
}

.mud-table-paginator {
    border: 1px solid #AEB4FF;
    background-color: #D2D4FD;
}
.theme-dark-mode .mud-table-paginator {
    background-color: #35377b !important;
}

.mud-table-pagination {
    justify-content: flex-end !important;
}
.mud-table-pagination-select .mud-input-adornment-end {
    position: absolute;
    right: 0;
}
.mud-table-pagination-select .mud-input-slot{
    padding: 5px !important;
}
.mud-table-pagination-page-info{
    padding: 0 10px;
}
.mud-table-pagination-select {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Not sure why this was added, can change later with further discussion - doesn't look same as multiselect dropdowns so removed.
.mud-table-pagination-select .mud-select .mud-input-slot {
    text-align: center;
}
Center the dropdown menu items (rendered in popover)
.mud-popover .mud-list-item-text {
    text-align: center;
    width: 100%;
}*/

/* Always show border on the dropdown (matching the page navigation buttons) */
.mud-table-pagination-select .mud-input-outlined .mud-input-outlined-border {
    border: 1px solid rgba(var(--mud-palette-text-primary-rgb), var(--mud-palette-border-opacity)) !important;
}

.mud-table-cell{
    border-bottom: none;
}

/* Always show sort icon on sortable columns (not just on hover) */
.mud-data-grid .mud-table-cell .column-header .sort-direction-icon {
    opacity: 1;
}

/* Change unsorted column icon to double arrow (up/down) instead of single arrow */
.mud-data-grid .mud-table-cell:not(.mud-table-sort-asc):not(.mud-table-sort-desc) .column-header .sort-direction-icon .mud-icon-button-label svg {
    display: none;
}
.mud-data-grid .mud-table-cell:not(.mud-table-sort-asc):not(.mud-table-sort-desc) .column-header .sort-direction-icon .mud-icon-button-label::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
}
.mud-icon-button-size-small {
    padding: 0px;
}

    th.mud-table-sort-asc {
        background-color: lightskyblue !important;
    }

    th.mud-table-sort-desc {
        background-color: lightgreen !important;
    }

    .theme-dark-mode th.mud-table-sort-asc {
        color: #424242 !important;
    }

    .theme-dark-mode th.mud-table-sort-desc {
        color: #424242 !important;
    }

    td.mud-table-sort-asc {
        border-left: 2px solid lightskyblue !important;
        border-right: 2px solid lightskyblue !important;
    }

    td.mud-table-sort-desc {
        border-left: 2px solid lightgreen !important;
        border-right: 2px solid lightgreen !important;
    }
    /* Inspection & Maintenance Timeline row styling */
    /* Complete - Green (Success) */
    .mud-table-container .mud-table-root .mud-table-body .mud-table-row.green-row,
    .mud-table-container .mud-table-root .mud-table-body .mud-table-row.green-row:hover {
        background-color: var(--mud-palette-success, #66bb6a) !important;
    }

        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.green-row > td,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.green-row > .mud-table-cell,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.green-row:hover > td,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.green-row:hover > .mud-table-cell {
            background-color: var(--mud-palette-success, #66bb6a) !important;
            color: white !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
    /* Historical - Gray (Default) */
    .mud-table-container .mud-table-root .mud-table-body .mud-table-row.gray-row,
    .mud-table-container .mud-table-root .mud-table-body .mud-table-row.gray-row:hover {
        background-color: var(--mud-palette-surface, #f5f5f5) !important;
    }

        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.gray-row > td,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.gray-row > .mud-table-cell,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.gray-row:hover > td,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.gray-row:hover > .mud-table-cell {
            background-color: var(--mud-palette-surface, #f5f5f5) !important;
            color: rgba(0, 0, 0, 0.87) !important;
            border-bottom: 1px solid rgba(0, 0, 0, 0.2) !important;
        }
    /* Started - Light Blue (Info) */
    .mud-table-container .mud-table-root .mud-table-body .mud-table-row.lt-blue-row,
    .mud-table-container .mud-table-root .mud-table-body .mud-table-row.lt-blue-row:hover {
        background-color: var(--mud-palette-info, #2196f3) !important;
    }

        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.lt-blue-row > td,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.lt-blue-row > .mud-table-cell,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.lt-blue-row:hover > td,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.lt-blue-row:hover > .mud-table-cell {
            background-color: var(--mud-palette-info, #2196f3) !important;
            color: white !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
    /* Due <7 Days - Blue (Primary) */
    .mud-table-container .mud-table-root .mud-table-body .mud-table-row.blue-row,
    .mud-table-container .mud-table-root .mud-table-body .mud-table-row.blue-row:hover {
        background-color: var(--mud-palette-primary, #594ae2) !important;
    }

        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.blue-row > td,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.blue-row > .mud-table-cell,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.blue-row:hover > td,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.blue-row:hover > .mud-table-cell {
            background-color: var(--mud-palette-primary, #594ae2) !important;
            color: white !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
    /* Over Due - Purple (Secondary) */
    .mud-table-container .mud-table-root .mud-table-body .mud-table-row.purple-row,
    .mud-table-container .mud-table-root .mud-table-body .mud-table-row.purple-row:hover {
        background-color: var(--mud-palette-secondary, #ff4081) !important;
    }

        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.purple-row > td,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.purple-row > .mud-table-cell,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.purple-row:hover > td,
        .mud-table-container .mud-table-root .mud-table-body .mud-table-row.purple-row:hover > .mud-table-cell {
            background-color: var(--mud-palette-secondary, #ff4081) !important;
            color: white !important;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
        }
    /* Dark mode adjustments */
    .mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.green-row {
        background-color: #1b5e20 !important;
    }

        .mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.green-row > td,
        .mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.green-row > .mud-table-cell {
            background-color: #1b5e20 !important;
            color: #66bb6a !important;
        }

    .mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.gray-row {
        background-color: #424242 !important;
    }

        .mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.gray-row > td,
        .mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.gray-row > .mud-table-cell {
            background-color: #424242 !important;
            color: rgba(255, 255, 255, 0.87) !important;
        }

    .mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.lt-blue-row {
        background-color: #0d47a1 !important;
    }

.mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.lt-blue-row > td,
.mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.lt-blue-row > .mud-table-cell {
    background-color: #0d47a1 !important;
    color: #2196f3 !important;
}

.mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.blue-row {
    background-color: #311b92 !important;
}

.mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.blue-row > td,
.mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.blue-row > .mud-table-cell {
    background-color: #311b92 !important;
    color: #b39ddb !important;
}

.mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.purple-row {
    background-color: #880e4f !important;
}

.mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.purple-row > td,
.mud-theme-dark .mud-table-container .mud-table-root .mud-table-body .mud-table-row.purple-row > .mud-table-cell {
    background-color: #880e4f !important;
    color: #ff4081 !important;
}

/* Highlight the selected equipment row and override MudBlazor typography on the descendants */
.mud-table-row.selected-equipment-row,
.mud-table-row.selected-equipment-row > td,
.mud-table-row.selected-equipment-row td,
.mud-table-row.selected-equipment-row .mud-typography {
    font-weight: bold !important;
}

.mud-button-close{
    top: 2px !important;
}
.mud-ex-dialog-header-actions {
    /* top: 2px !important; */
    top: 8px !important;
    right: 8px !important;
    display: flex;
    gap: 2px;
    align-items: center;
}
.mud-ex-dialog-header-actions button {
    touch-action: manipulation;
}
.mud-ex-dialog-header-actions .dialog-header-btn-group {
    gap: 0;
}
.mud-ex-dialog-header-actions .dialog-header-btn-group .mud-button-root.mud-icon-button {
    cursor: pointer;
}
/* Override MudBlazor's absolute positioning on close button once it's inside the group */
.dialog-header-btn-group .mud-button-close {
    position: static !important;
}
/* Maximize toggle: swap to success color when maximized */
.mud-button-group-outlined.mud-button-group-outlined-primary .mud-button-root.dialog-header-btn-toggled {
    color: var(--mud-palette-success);
    border-color: rgba(var(--mud-palette-success-rgb), var(--mud-palette-border-opacity));
}
@media(hover: hover) and (pointer: fine) {
    .mud-button-group-outlined.mud-button-group-outlined-primary .mud-button-root.dialog-header-btn-toggled:hover {
        background-color: var(--mud-palette-success-hover);
    }
}

/* Unified footer / dialog taskbar — must sit above all dialogs */
.dialog-taskbar-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background-color: var(--mud-palette-surface);
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.theme-dark-mode .dialog-taskbar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* Ensure nav drawers and main content clear the fixed footer bar : this is handeled in component*/
/*.mud-drawer-content,
.mud-navmenu {
    padding-bottom: 40px;
}*/

/* Maximized and full-height dialogs must not extend behind the footer bar */
.mud-ex-dialog-height-full {
    height: calc(100vh - 64px - 42px) !important;
}

.mud-ex-dialog-height-full-no-margin {
    height: calc(100vh - 42px) !important;
    max-height: calc(100vh - 42px) !important;
}

/* Non-modal dialogs — fit viewport, ensure room for header buttons.
   position:fixed ensures dialog stays viewport-relative even when page is scrolled.
   max-height uses !important to beat MudEx's inline `max-height: none` that it
   sets during snap — otherwise snap-left/right would extend behind the 42px
   dialog-taskbar-footer at the bottom. */
.mudex-dialog-no-modal {
    position: fixed !important;
    min-width: min(600px, calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 42px) !important;
}

/* Snap preview — same fix as dialogs: viewport-relative so it appears
   at the correct screen position even when the page is scrolled. */
.snap-preview {
    position: fixed !important;
}

/* Disable MudBlazor's scroll-lock so the background always remains scrollable.
   MudExDialog removes the overlay via JS which orphans the lock counter, leaving
   scroll-locked on the body permanently. Override it here so users can always scroll. */
.scroll-locked,
.scroll-locked-no-padding {
    overflow: auto !important;
    padding-right: 0 !important;
}


.dialog-taskbar-copyright {
    margin-left: auto;
    white-space: nowrap;
    padding: 0 12px;
}

.dialog-taskbar-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background-color: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.dialog-taskbar-tab:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.dialog-taskbar-tab-title {
    flex: 1;
}

.dialog-taskbar-close {
    padding: 2px !important;
    min-width: unset !important;
}

.mud-dialog-title .mud-typography-h6 {
    font-weight: bold;
}

.filter-toolbar .mud-input-control.mud-input-control-margin-dense.mud-input-outlined-with-label {
    margin-top: 4px;
}

/* Simple row color selectors (works for both MudTable and MudDataGrid) */
.mud-table-row.purple-row > td,
.mud-table-row.blue-row > td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.mud-table-row.purple-row,
.mud-table-row.purple-row > td {
    background-color: var(--mud-palette-secondary, #ff4081) !important;
    color: white !important;
}

.mud-table-row.blue-row,
.mud-table-row.blue-row > td {
    background-color: var(--mud-palette-primary, #594ae2) !important;
    color: white !important;
}

/* Inspection & Maintenance Timeline column styling */
.insp-col {
    background-color: rgba(135, 206, 235, 0.3) !important;
}

.insp-col-last {
    border-right: 2px solid rgba(0, 0, 0, 0.2) !important;
}

.equip-col {
    background-color: rgba(144, 238, 144, 0.3) !important;
}

.equip-col-last {
    border-right: 2px solid rgba(0, 0, 0, 0.2) !important;
}

/* Group header row styling */
.timeline-group-header {
    background-color: rgba(135, 206, 235, 0.3);
    font-weight: bold !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
}

.timeline-group-header.insp1-background {
    background-color: rgba(135, 206, 235, 0.3) !important;
}

.timeline-group-header.equip-background {
    background-color: rgba(144, 238, 144, 0.3) !important;
}

/* CDF drilldown column group styling */
.cdf-col {
    background-color: rgba(135, 206, 235, 0.3) !important;
}


/* Highlight entire column when sorted */
.mud-table-cell-sorted {
    background-color: rgba(0, 0, 0, 0.08) !important;
}

.white-menu-item .mud-icon {
    color: white !important;
}
.white-menu-item {
    color: white !important;
}
.white-menu-item svg {
    color: white !important;
    fill: currentColor !important;
}

/* Fixed dark text color - prevents dark mode from overriding text on light backgrounds */
.fixed-dark-text {
    color: #333 !important;
}

.fixed-dark-text .mud-button-outlined {
    color: #333 !important;
    border-color: #333 !important;
}

.fixed-dark-text .mud-button-outlined.mud-button-outlined-primary {
    color: #1976d2 !important;
    border-color: #1976d2 !important;
}

/* Chart title - reusable across dashboard charts */
.chart-title {
    font-weight: bold;
    font-size: 14px;
}

.chart-label {
    font-weight: normal;
    font-size: 14px;
    color: #000;
}

.theme-dark-mode .chart-label {
    color: #ccc;
}

/* Full-width gray background bar behind Highcharts title area */
.chart-title-bg {
    background: linear-gradient(to bottom, #d0e8ff 38px, white 38px);
}