: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;
    --app-scrollbar-thumb: #5A87EE;
    --app-scrollbar-thumb-hover: #3D71EB;
    --app-scrollbar-track: rgba(90, 135, 238, 0.16);
}

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

/* The unsaved-changes confirmation carries two wordy buttons ("Discard and
   Proceed" / "Stay and Complete") that need ~455px of dialog to sit on one row.
   Its MaxWidth.Small maps to --dialog-xs-width (30vw), which only clears that on
   a screen wider than ~1520px — on a 1280px laptop it renders 384px and wraps
   both labels onto two lines. A floor fixes it without disturbing the shared
   preset. min() keeps the floor from overflowing a phone, where 96vw is smaller
   than 480px and the buttons stack anyway; per spec min-width beats the preset's
   max-width, which is what lets this win. */
.mud-dialog.unsaved-changes-dialog {
    min-width: min(480px, 96vw);
}

/* === Compact viewports: dialogs stop being a fraction of the screen ===
   Every preset above is a viewport-WIDTH fraction, which reads fine on a desktop
   and collapses on a phone. MaxWidth.Small maps to --dialog-xs-width (30vw), so
   a 390px-wide phone rendered a 117px-wide dialog — narrow enough that a title
   wrapped to one character per line. A landscape phone is no better: 30vw of
   844px is only 253px.

   Below, each preset gets a floor of ~96% of the screen and a sensible px cap so
   a small confirmation doesn't stretch edge-to-edge on a wide landscape phone.
   Heights are deliberately left alone — they are already vh-based, so they
   scale, and several dialogs rely on their fixed height for internal scrolling.

   Matches the (max-width: 700px), (max-height: 500px) condition Step 3 uses for
   its compact layout: the width arm catches phone portrait, the height arm
   catches phone landscape (~390px tall) while leaving iPad landscape (768px
   tall) and desktop on the normal presets.

   !important is needed here, unlike the rules above: MudBlazor.Extensions writes
   its CustomSize as an INLINE width/height on preset dialogs, and inline styles
   beat classes. That inline size exists to support drag-snap/resize, which has
   no affordance on a touch phone, so overriding it here costs nothing. */
@media (max-width: 700px), (max-height: 500px) {
    .mud-dialog.mud-dialog-width-sm {
        width: min(96vw, 520px) !important;
        max-width: 96vw !important;
    }

    .mud-dialog.mud-dialog-width-md {
        width: min(96vw, 640px) !important;
        max-width: 96vw !important;
    }

    .mud-dialog.mud-dialog-width-lg,
    .mud-dialog.mud-dialog-width-xl {
        width: 96vw !important;
        max-width: 96vw !important;
    }

}

/* Footer buttons stack only when the dialog is NARROW — deliberately width-only,
   not the compact condition above. A landscape phone gets a 520px-wide dialog
   where two wordy buttons sit side by side comfortably, and vertical space is the
   scarce dimension there, so stacking would cost ~50px of a ~390px-tall screen
   for nothing. In portrait the row squeezes the same two labels onto three lines
   each, so there we stack full width: one tap target per row, nothing wrapped.
   Source order is kept, which puts the destructive Discard on top and leaves the
   safe default at the bottom, nearest the thumb. */
@media (max-width: 700px) {
    .mud-dialog .mud-dialog-actions.dialog-actions-stack-on-compact {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .mud-dialog .mud-dialog-actions.dialog-actions-stack-on-compact > .mud-button-root {
        width: 100%;
        margin: 0;
    }

    /* MudSpacer only makes sense splitting a row; in column flow it would just
       add dead vertical space between the two buttons. */
    .mud-dialog .mud-dialog-actions.dialog-actions-stack-on-compact > .mud-spacer {
        display: none;
    }
}

.dialog-toolbar {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.dialog-toolbar > .cq-container {
    flex: 1 1 auto;
    min-width: 0;
}

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

/* Custom card headers meant to mirror the expansion-panel headers (e.g. the Job Briefing
   recipients box) — flip to the same dark color so they don't stay light in dark mode. */
.jb-recipients-header {
    background-color: var(--header-background-color-lightmode);
}

body.theme-dark-mode .jb-recipients-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;
}

/* Home Page tables: the dark 1px grid of the (1) Company table (.table-border in app.css) in place
   of the lighter MudTable lines. Use it instead of .table-border-bottom, whose container border
   would double the outline.
   - Each cell draws its own lines: every cell its right and bottom sides, only the first column a
     left side and only the header a top side, so each line stays 1px where two cells meet. Not
     border-collapse: a collapsed border belongs to the table rather than the cell, so when
     table-sticky-header.js slid a pinned header's cells down, the header's top line stayed
     behind, and the opaque header fill that script lifts over the rows covered half of the line,
     so it faded or vanished at some zoom levels.
   - The first rule replaces the lighter four-sided border the app-wide MudTable rules further
     down give every cell. The white dark-mode header border outranks it, as it always has, so the
     last two rules only trim widths and leave each side's color alone.
   - The long selectors outrank MudBlazor's own: the white --mud-palette-table-lines it paints
     between bordered body cells, and the border-bottom: none it puts on the last row.
   - The empty row (NoRecordsContent) has no .mud-table-cell; its lone th.mud-table-empty-row
     takes the lines instead. */
.mud-table.table-grid-dark .mud-table-cell,
.mud-table.table-grid-dark .mud-table-empty-row {
    border: 1px solid #808080;
}

.mud-table.table-grid-dark.mud-table-bordered .mud-table-container .mud-table-root .mud-table-body .mud-table-row .mud-table-cell:not(:last-child),
.mud-table.table-grid-dark .mud-table-root > .mud-table-body:last-child > .mud-table-row:last-child > .mud-table-cell {
    border-right: 1px solid #808080;
    border-bottom: 1px solid #808080;
}

.mud-table.table-grid-dark .mud-table-cell:not(:first-child) {
    border-left-width: 0;
}

.mud-table.table-grid-dark .mud-table-body .mud-table-cell,
.mud-table.table-grid-dark .mud-table-empty-row {
    border-top-width: 0;
}

.mud-dialog-title,
.equipment-details-page-title {
    background-color: #a7acff;
}

.theme-dark-mode .mud-dialog-title,
.theme-dark-mode .equipment-details-page-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;
}
.help-btn{
    margin-right: 1.5em;
}
.mud-toolbar:not(.mud-toolbar-appbar) h4 {
    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;
}

/* Training environment: recolor the top app bar orange so it's obvious this is
   not production. Mirrors the legacy .navbar-inner-training treatment. */
.mud-appbar.appbar-training {
    background-color: #c2410c !important;
}

.theme-dark-mode .mud-appbar.appbar-training {
    background-color: #9a3412 !important;
}

/* The DB name is normally MMT-orange text; make it white so it stays legible on the orange bar. */
.appbar-training .db-name {
    color: #ffffff !important;
}

.appbar-training-warning {
    color: #ffe08a !important;
}

.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: 1px solid #B2B2B2;
    /*border-left: 1px solid #B2B2B2;*/
}

/* Job Briefing form — the Information-group response tables (MudSimpleTable) mirror the main
   /JobBriefing/View grid's header + cell styling (header fill/border, full cell borders) without
   the grid chrome. Values match .mud-table-head .mud-table-cell and .mud-table .mud-table-cell.
   Selectors carry BOTH .jb-info-table and .mud-simple-table so they outrank MudBlazor's own
   `.mud-simple-table table * tr>td { border-bottom: 1px solid var(--mud-palette-table-lines) }`
   (specificity 0,1,3), which otherwise hides the row separators. */
.jb-info-table.mud-simple-table table thead th {
    background-color: #CACACA;
    border: 1px solid #868686;
    font-weight: bold;
    text-align: center;
    padding: 6px;
}
.jb-info-table.mud-simple-table table tbody td {
    border: 1px solid #B2B2B2;
    padding: 6px;
    vertical-align: middle;
}
/* MudBlazor strips the last row's border-bottom; restore it so the table is fully boxed. */
.jb-info-table.mud-simple-table table tbody tr:last-child td {
    border-bottom: 1px solid #B2B2B2;
}
.theme-dark-mode .jb-info-table.mud-simple-table table thead th {
    background-color: #4d4d4d;
    border: 1px solid #ffffff;
}
/* Let the multiline Response (text) and Additional Comments boxes be dragged taller by the
   bottom-right grip, like the Briefing Instructions field on /BriefingType/View. Only the
   multiline fields render a <textarea>; single-line response inputs are unaffected. */
.jb-info-table textarea {
    resize: vertical !important;
}

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

/* The sort arrows are pinned to the th's bottom-right corner (.column-options above), out of
   flow, so a wrapped title in a narrow column runs underneath them. Reserve the arrow's 20px
   height (plus 2px of air) at the bottom of every sortable header so the text stops above it. */
.mud-data-grid .mud-table-head th.mud-table-cell:has(.sort-direction-icon) {
    padding-bottom: 22px;
}

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

/* Outlined expansion panels, opt-in with Class="outlined-panel": the standard for every page and
   dialog built from a list of expansion panels (the Home Page, Global Preferences, FAQ, Bulk Data
   Import/Export and its import dialogs, API Management, the Edit Inspection, Edit Schedule Template,
   Edit Formula, Edit Substation, Edit User Group and Job Briefing dialogs, Equipment Details). The
   Quick Reference help panels keep their own .qr-expansion-panels look. The whole panel, header
   included, is in the thin #808080 line of the Home Page tables (.table-grid-dark above), in both
   themes. Sibling panels need a gap between them (a wrapper's padding, or mb-2), or two outlines
   touch and read as one thick line.
   - 7px puts the border's inner edge on the header's own 6px top corners
     (.mud-expand-panel-header above), so the header fills the outline with no gap.
   - overflow: hidden clips the header's background to the rounded outline: collapsed, the header
     is the panel's last visible child and its square bottom corners would otherwise paint over
     the border's bottom curves. It hides nothing in the content, which MudBlazor's collapse
     wrapper already clips, and dropdown lists open in a popover outside the panel.
   - The second selector matches MudBlazor's rule for a panel that follows an expanded one, which
     resets the top radius at that higher specificity. MudBlazor's other panel rules (the radius
     of a first, last or expanded panel, and the bottom border it drops) tie with the first
     selector and lose to this file loading later. */
.mud-expand-panel.outlined-panel,
.mud-expand-panel.mud-panel-expanded + .mud-expand-panel.outlined-panel {
    border: 1px solid #808080;
    border-radius: 7px;
    overflow: hidden;
}

/* Outlined panels whose content opens with a table flush under the header (a no-gutters panel),
   opt-in by adding outlined-table-panel (Home Page (1), (3), (4), (5), (6) and (8)): expanded, the
   outline wraps the header only. The table draws its own #808080 grid, and an outline around it
   would double the table's edges. Instead the header's sides run straight into the table's outer
   lines and the table's top line closes the header off. Collapsed, the panel is all header and
   keeps the full outline above. overflow: visible stops the panel's rounded bottom corners
   clipping the table's square ones; the header rounds its own top corners. Keep this below the
   rule above: it ties that rule's second selector and wins by coming later. */
.mud-expand-panel.outlined-panel.outlined-table-panel.mud-panel-expanded {
    border: none;
    overflow: visible;
}

.mud-expand-panel.outlined-panel.outlined-table-panel.mud-panel-expanded > .mud-expand-panel-header {
    border: 1px solid #808080;
    border-bottom: none;
    border-radius: 7px 7px 0 0;
}

/* A TableFilterPanel opened between that header and the table (Home Page (3) and (4)) would leave
   a gap in the outline, so its toolbars carry the header's sides down to the table's. !important
   because both toolbars clear their borders with an inline border: none. */
.mud-expand-panel.outlined-panel.outlined-table-panel.mud-panel-expanded .filter-toolbar {
    border-left: 1px solid #808080 !important;
    border-right: 1px solid #808080 !important;
}

/* Landing page (7.X) sub-panels: two expanded panels side by side end on the same line.
   The MudGrid row already stretches both .sub-panel-item cells to the taller one; this chain
   of flex columns passes that height down through MudBlazor's wrappers to the panel content,
   where an mt-auto element (see ActivityDatabaseStatisticsPanel.razor) takes up the slack.
   A collapsed panel keeps its header height (flex: 0 0 auto also overrides MudBlazor's
   flex-basis: 100%, which would overflow the stretched cell by the panel's margins). */
.sub-panel-item {
    display: flex;
    flex-direction: column;
}

.sub-panel-item > .mud-expansion-panels {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.sub-panel-item .mud-expand-panel.sub-panel {
    flex: 0 0 auto;
}

.sub-panel-item .mud-expand-panel.sub-panel.mud-panel-expanded {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.sub-panel-item .sub-panel.mud-panel-expanded > .mud-collapse-container {
    flex: 1 1 auto;
}

.sub-panel-item .sub-panel.mud-panel-expanded .mud-collapse-wrapper-inner,
.sub-panel-item .sub-panel.mud-panel-expanded .mud-expand-panel-content {
    display: flex;
    flex-direction: column;
}

/* LoadingContent's wrapper div, when it is the panel content's only child. */
.sub-panel-fill {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Landing page (7.2): panel (7.1) beside it has a tab strip, whose bottom border (.mud-tabs-tabbar,
   below) runs just above its button. (7.2) has no tabs, so it draws the same 3px line on its own. */
.sub-panel-tab-rule {
    border-bottom: 3px solid #ddd;
}

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

/* Dashboard chart tabs (1.1.1, 2.1.2, ...) stay bold whether active or not */
.dashboard-tabs .mud-tab {
    font-weight: bold;
}

.equip-detail-header {
    display: flex;
    flex-wrap: wrap;
    border-radius: 3px;
}
.equip-detail-header .mud-chip b {
    margin-right: 4px;
}

/* Equipment Details hosted as a page (/Equipment/Details/{id}, EquipDetailsDialog Embedded="true")
   instead of a dialog. The title strip and content padding mirror .mud-dialog-title /
   .mud-dialog-content (title colors are shared with .mud-dialog-title above) so the embedded view
   matches the dialog, minus the window buttons. The 24px content padding is what the
   EquipDetailHeader band bleeds into with its -24px margins. */
.equipment-details-page-title {
    padding: 10px 24px;
    border-top-left-radius: var(--mud-default-borderradius);
    border-top-right-radius: var(--mud-default-borderradius);
}

.equipment-details-page-content {
    padding: 8px 24px;
}
.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;
}

/* App-wide scrollbars. scrollbar-color on html inherits everywhere; the webkit rules are Safari-only. */
html {
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

*::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--app-scrollbar-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: var(--app-scrollbar-thumb-hover);
}

*::-webkit-scrollbar-track {
    background-color: var(--app-scrollbar-track);
}

/* Table horizontal scrollbars - .table-top-scroll is the mirrored bar injected above the
   header row by table-top-scrollbar.js. Both bars share one look. */
.mud-data-grid[class*="savable-grid-"] .mud-table-container,
.table-top-scroll {
    position: relative;
    z-index: 2;
    scrollbar-width: auto;
    scrollbar-color: var(--app-scrollbar-thumb) var(--app-scrollbar-track);
}

.table-top-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.table-top-scroll-inner {
    height: 1px;
}

/* Tree-view scroll strips (DualScrollPane) carry a horizontal scrollbar on both edges: .dual-scroll-body
   is the real scroller, flipped so its native bar sits above the content, and .dual-scroll-mirror is the
   bottom bar dual-scrollbar.js keeps in sync with it. */
.dual-scroll-body {
    overflow-x: auto;
    transform: rotateX(180deg);
}

.dual-scroll-flip {
    transform: rotateX(180deg);
}

.dual-scroll-mirror {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.dual-scroll-mirror-inner {
    height: 1px;
}


.mud-table-paginator {
    position: relative;
    z-index: 1;
    border: 1px solid #AEB4FF;
    background-color: #D2D4FD;
}
.theme-dark-mode .mud-table-paginator {
    background-color: #35377b !important;
}
/* The top pager's upper border is the rule under the search / Filter / Tools row.
   Thickened there only; the bottom pager keeps its 1px border. */
.mud-table-toolbar .mud-table-paginator {
    border-top-width: 2px;
}

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

/*this was added on Dr. Singh request.*/
.mud-table-pagination-select .mud-select .mud-input-slot {
    text-align: center;
}
/* Dropdown menu items (rendered in a popover) are left-aligned so an open menu matches the
   left-aligned value the closed input shows after you pick one — single- and multi-select alike.
   The rows-per-page pager input above keeps its centered value (Dr. Singh request). */
.mud-popover .mud-list-item-text {
    text-align: left;
    width: 100%;
}

/* Universal red clear ✕ on all clearable inputs (selects, date pickers, text fields) —
   matches the TableDeleteButton ✕, per 2026-07-28 request. */
.mud-input-clear-button {
    color: var(--mud-palette-error);
}

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

/* === Dialog title vs. the header button cluster ===
   .mud-ex-dialog-header-actions is position:absolute (above), so it is OUT of
   the title's flow: the title text cannot see it and simply runs underneath.
   That is what puts a long record ID on top of the minimize/maximize/close
   buttons once a dialog gets narrow. Reserve the cluster as right padding so
   the text can never reach it.

   Measured: three buttons at 54px + the 8px inset + an 8px gap = 178px. They
   are 54px rather than square because the button-group styling pads them like
   text buttons (5px 15px) rather than icon buttons.

   :has() scopes this to dialogs that actually carry the MudEx chrome — a plain
   MudDialog has only the close button and needs far less, and padding all of
   them would squeeze those titles for nothing. Where :has() is unsupported the
   rule is skipped and the title behaves exactly as it does today, so this
   degrades rather than breaks. */
.mud-dialog:has(.mud-ex-dialog-header-actions) .mud-dialog-title {
    padding-right: var(--dialog-header-actions-reserve, 178px);
}

/* A title assembled from several <MudText> parts — typically a label plus the
   highlighted record ID — renders as a MudStack, i.e. d-flex flex-row, which
   does NOT wrap. Let it wrap so a long ID drops onto its own line instead of
   both parts breaking mid-word against the reserved strip. min-width:0 is what
   allows the parts to shrink at all: a flex item otherwise refuses to go
   narrower than its longest word. */
.mud-dialog .mud-dialog-title > .d-flex,
.mud-dialog .mud-dialog-title > .dialog-toolbar {
    flex-wrap: wrap;
    min-width: 0;
}

.mud-dialog .mud-dialog-title > .d-flex > *,
.mud-dialog .mud-dialog-title > .dialog-toolbar > * {
    min-width: 0;
}

@media (max-width: 700px), (max-height: 500px) {
    /* Square the header icon buttons up on a small screen. The group pads them
       like text buttons, which spends 60px of header width that a phone does
       not have — squaring them cuts the reserved strip from 178px to 118px and
       hands that back to the title. Desktop keeps the roomier hit targets. */
    .mud-ex-dialog-header-actions .dialog-header-btn-group .mud-button-root.mud-icon-button {
        padding-left: 5px;
        padding-right: 5px;
    }

    .mud-dialog:has(.mud-ex-dialog-header-actions) .mud-dialog-title {
        --dialog-header-actions-reserve: 118px;
    }
}
/* Maximize toggle: swap to darker green when maximized */
.mud-button-group-outlined.mud-button-group-outlined-primary .mud-button-root.dialog-header-btn-toggled {
    color: #00ff6be3;
    border-color: rgba(0, 255, 107, 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: rgba(0, 255, 107, 0.08);
    }
}

/* Backdrop for dialogs that must be resolved before the page is usable again - delete
   confirmations mark themselves [data-blocks-background]. The dialog stays non-modal so it keeps
   the custom header button group; this scrim supplies the modal half: it grays the page and
   swallows background clicks, so a second delete dialog cannot be opened from the grid behind the
   first. dialog-taskbar.js creates it and sets its z-index just under the blocking dialog. */
.dialog-modal-scrim {
    position: fixed;
    inset: 0;
    background-color: var(--mud-palette-overlay-dark, rgba(33, 33, 33, 0.5));
}

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

.admin-menu {
    padding-bottom: 48px;
}

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

/* Release banner: cap at 850px so the fixed-height carousel, slide chips and support note fit without scrolling
   but the dialog does not stretch to the LG preset's full 92vh on a tall monitor.
   An inline max-height on the dialog cannot do this: the no-modal rule above is
   !important, and dialog-taskbar.js strips inline max-height from every
   non-maximized dialog. Higher specificity beats the no-modal rule; the :not()
   lets Maximize still fill the viewport. */
.mud-dialog.release-banner-dialog:not([data-dialog-maximized]) {
    max-height: min(850px, 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,
.equipment-details-page-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;
}

/* Schedule Template Builder color keys. Colors match the /Inspections Step 1 status keys:
   Reminded = In Progress (rgba(68,117,255,0.45)), Over Due = Overdue (rgba(209,75,253,0.7)),
   Due for Manual Generation = solid blue.

   Table rows use white text on every colored row for readability. */
.mud-table-row.schedule-reminded-row,
.mud-table-row.schedule-reminded-row > td {
    background-color: rgba(68, 117, 255, 0.45) !important;
    color: #fff !important;
}

.mud-table-row.schedule-due-row,
.mud-table-row.schedule-due-row > td {
    background-color: rgba(68, 117, 255, 1) !important;
    color: #fff !important;
}

.mud-table-row.schedule-overdue-row,
.mud-table-row.schedule-overdue-row > td {
    background-color: rgba(209, 75, 253, 0.7) !important;
    color: #fff !important;
}

/* Schedule Template Section-6 route drag-drop: the dragged row dims, the hovered
   drop-target row highlights across its ENTIRE width. */
.mud-table-row.schedule-route-dragging > td {
    opacity: 0.45;
}

.mud-table-row.schedule-route-drop-target > td {
    background-color: rgba(0, 200, 83, 0.14) !important;
    box-shadow: inset 0 2px 0 var(--mud-palette-success), inset 0 -2px 0 var(--mud-palette-success);
}

/* Legend chips: white text on all three (matches the Due chip and the table rows). */
.mud-chip.schedule-reminded-key {
    background-color: rgba(68, 117, 255, 0.45) !important;
    color: #fff !important;
    font-weight: 500;
}

.mud-chip.schedule-due-key {
    background-color: rgba(68, 117, 255, 1) !important;
    color: #fff !important;
    font-weight: 500;
}

.mud-chip.schedule-overdue-key {
    background-color: rgba(209, 75, 253, 0.7) !important;
    color: #fff !important;
    font-weight: 500;
}

/* Schedule Template dialog (EditScheduleTemplateDialog) — legacy Section layout. */

/* Breathing room between each panel header and its first field. */
.schedule-template-panels .mud-expand-panel-content {
    padding-top: 10px;
}

.schedule-frequency-row {
    align-items: flex-end;
}

.schedule-cycle-row {
    align-items: flex-start;
}

.schedule-cycle-due-row {
    align-items: center;
}

.schedule-selection-mode .mud-radio {
    align-items: center;
}

.schedule-selection-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.25;
    transform: none;
}

/* New/Edit Formula type picker: a clear gap after Conditional, and a whole radio
   wraps at a time when too narrow. MudRadioGroup puts Class on its outer input
   control, not on the .mud-radio-group that holds the radios (already a wrapping
   flex row), so the gap has to be set on that inner element. */
.formula-type-mode .mud-radio-group {
    column-gap: 32px;
    row-gap: 4px;
}

.formula-type-mode .mud-radio {
    align-items: center;
}

.formula-type-label {
    line-height: 1.25;
    transform: none;
}

/* New/Edit Formula, section 2 (Formula Variables): one row per variable a-j.
   The controls are all Margin.Dense outlined inputs (40px) except the question /
   data-field picker, which draws its own 40px .selected-chips box. Matching the
   heights is enough — centering the row then lines every control up. Do NOT also
   zero .virtualized-select-container's own 4px top margin: measured against the
   real stylesheets, that leaves the picker 2px high rather than flush. */
.formula-variable-row {
    align-items: center;
}

/* Side by side (sm and up), the variable letter takes only its own width and
   drops its right gutter so it sits next to Variable Type; the question /
   data-field / nameplate picker grows into the rest of the letter's old 1/12.
   Two classes outrank MudBlazor's single-class .mud-grid-item-sm-N widths. */
@media (min-width: 600px) {
    .formula-variable-row > .formula-variable-letter {
        flex: 0 0 auto;
        max-width: none;
        padding-right: 0;
    }

    .formula-variable-row > .formula-variable-source {
        flex: 1 1 0;
        max-width: none;
    }
}

/* New/Edit Facility: the Facility Compliance cluster (picker + add + CDF-count
   buttons) sits beside a dense outlined Facility Name field, which carries a 4px
   top margin from .mud-input-control-margin-dense. The picker draws its own 40px
   .selected-chips box below a 4px top margin instead, so the stack needs the same
   4px to line the two boxes up, and the tooltip-wrapped buttons need it too or
   they centre on the stack's 44px line rather than on the 40px box. */
.facility-compliance-row {
    margin-top: 4px;
}

.facility-compliance-row > .mud-tooltip-root {
    margin-top: 4px;
}

.schedule-preview-content {
    border-radius: 4px;
}

.schedule-equipment-preview-shell {
    overflow: hidden;
}

.schedule-filter-toolbar,
.schedule-filter-counts {
    flex-wrap: wrap;
}

.schedule-filter-preview-bar {
    margin: 0 !important;
    padding: 12px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background-color: #D2D4FD;
}

.theme-dark-mode .schedule-filter-preview-bar {
    background-color: #191a39;
}

.schedule-filter-count {
    margin: 0;
    align-self: center;
}

.schedule-equipment-id-summary {
    flex-wrap: wrap;
}

.schedule-equipment-id-count {
    margin-left: 16px;
}

.schedule-equipment-id-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.schedule-filter-count-value {
    color: var(--mud-palette-primary);
    font-weight: 600;
}

/* Legacy divFromLastInspection: blue border + blue accents (rgb(33,39,230)). */
.schedule-lastinsp-box {
    border: 1px solid #2127e6;
    border-radius: 4px;
    padding: 16px;
}

.schedule-lastinsp-accent {
    color: #2127e6;
}

.theme-dark-mode .schedule-lastinsp-box {
    border-color: #8a90ff;
}

.theme-dark-mode .schedule-lastinsp-accent {
    color: #8a90ff;
}

/* Legacy "OR" between paired options (Auto OR Manual, Scheduled Dates OR Last
   Inspection Date, Calendar Month OR Calendar Year). */
.schedule-or-separator {
    display: inline-flex;
    align-items: center;
    margin: 0 8px;
    vertical-align: middle;
}

/* Past next-cycle date: red-highlight the field while keeping the floating
   label readable. The field renders disabled (legacy computed inputs), so
   force readable text. */
.schedule-past-date-input .mud-input {
    background-color: #ff8484;
}

.schedule-past-date-input .mud-input input.mud-input-slot {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

.schedule-past-date-input .mud-input-label {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary) !important;
    padding-inline: 4px;
    z-index: 1;
}

.schedule-past-date-warning {
    align-self: center;
    padding-top: 12px !important;
}

.schedule-past-date-warning-text {
    display: block;
}

/* 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 — overlay mode (matches /BriefingType/View): the
   "Values for this Equip" label floats above the grouped columns only, via a ::before overlay on
   the first grouped header, so there is NO extra spacer row and no divider lines above the other
   (non-grouped) columns. */
.cdf-col {
    /* Opaque (not rgba) so the column divider borders behind the floating label can't bleed through
       and look like stray lines — same reason BriefingType's overlay label uses an opaque fill. */
    background-color: #cde8f6 !important;
    position: relative;
    padding-top: 34px !important;
    text-align: center !important;
    overflow: visible !important;
    z-index: 1;
}

.cdf-col.cgh-overlay-start {
    z-index: 2;
}

.cdf-col.cgh-overlay-start::before {
    content: attr(data-cgh-overlay-label);
    position: absolute;
    top: 0;
    left: 0;
    width: var(--cgh-overlay-width);
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background-color: #cde8f6;
    border-bottom: 2px solid #868686;
    border-left: 1px solid #868686;
    border-right: 2px solid #868686;
    font-weight: bold;
    z-index: 1;
    pointer-events: none;
}

.cdf-col.cgh-overlay-end {
    border-right-width: 2px !important;
}

.theme-dark-mode .cdf-col.cgh-overlay-start::before {
    background-color: #4d4d4d;
    border-color: #ffffff;
}


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

/* Dashboard local filters: an item with a zero count reads in the palette red */
.chart-label.zero-count {
    color: var(--mud-palette-error);
}

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

/* Two-row title band, toggled by attachRightLabel (HighchartsScripts.razor) when the Total and
   legend labels no longer fit beside the chart title */
.chart-title-bg-two-line {
    background: linear-gradient(to bottom, #d0e8ff 58px, white 58px);
}

.tight-radio-gap .mud-radio > .mud-button-root {
    padding-right: 4px !important;
}

.checkbox-flush-left .mud-checkbox > .mud-button-root {
    padding-left: 0 !important;
}

/* Lets the user grow a multiline MudTextField vertically by dragging the
   bottom-right grip. MudBlazor disables textarea resize by default. */
.resizable-textarea textarea {
    resize: vertical !important;
    min-height: 6em;
}

/* Toolbar utility: groups right-aligned buttons that wrap onto a new line on narrow toolbars */
.toolbar-right-group {
    margin-left: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

/* Preview-briefing button: always renders after New Line Item in the toolbar-right-group, */
/* so on narrow screens it wraps onto the row below the AddButton instead of leapfrogging it. */
.preview-briefing-group {
    display: flex;
    align-items: center;
}



.mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    content: " *";
    color: red;
    font-weight: bold;
}
.mud-input-required > .floating-label > span::after {
    content: " *";
    color: red;
    font-weight: bold;
}

.mud-input-required .mud-input-outlined-border > legend::after {
    content: " *";
}

/* Same required cue for a plain label that is NOT a Mud input control — put it directly on the label
   element (e.g. the Workflow Approval approver signature pad header, which is a MudText, not a field). */
.mud-input-required-label::after {
    content: " *";
    color: red;
    font-weight: bold;
}

/* Schedule Template dialog "(Equipment ID: N)" title badge — legacy .yellow-bg colors */
.dialog-title-equipment-badge {
    background-color: #FBFDC0;
    border: 1px solid #FAC905;
    border-radius: 10px;
    padding: 0 8px;
}

.theme-dark-mode .dialog-title-equipment-badge {
    background-color: #8e913b;
}

.mud-snackbar-location-top-center{
    top: -8px;
}

/* Input borders sit at the hover shade by default, so fields (text fields, selects, autocompletes,
   date/time pickers, numeric inputs) read as clearly outlined at rest and hovering no longer darkens
   them. These mirror MudBlazor's own hover rules with the :hover dropped, so focus (2px primary),
   disabled and error states are untouched. */
.mud-input.mud-input-outlined:not(.mud-disabled):not(:focus-within) .mud-input-outlined-border {
    border-color: var(--mud-palette-action-default);
}

/* Same for the underline variants (Variant.Text / Variant.Filled inputs). */
.mud-input.mud-input-underline:not(.mud-disabled):before,
.mud-input.mud-input-filled.mud-input-underline:not(.mud-disabled):before {
    border-bottom-color: var(--mud-palette-action-default);
}