@import '_content/AuralizeBlazor/AuralizeBlazor.tf5u2o3oxg.bundle.scp.css';
@import '_content/eSmartApp.JobBriefing/eSmartApp.JobBriefing.aqyqxrg00q.bundle.scp.css';
@import '_content/Nextended.Blazor/Nextended.Blazor.tkxqvq0zjw.bundle.scp.css';

/* /Components/AdminData/AssetDataTreeView/TreeView.razor.rz.scp.css */
/* ── [tree panel strip | Equip ID panel] ─────────────────────────────────────────────────────────
   The Equip ID panel sits right after the strip's last panel, with the strip's own 16px panel gap. The
   strip is only as wide as its panels, so the free space falls to the right of the Equip ID panel.
   Open, the Equip ID panel is 5/12 of the row, the width of the old 7:5 MudGrid split, and the strip
   shrinks and scrolls when its panels need more than the other 7/12. Closed, it is only as wide as its header. */
.asset-tree-split[b-cs829zxb44] {
    display: flex;
    gap: 16px;
    width: 100%;
    margin-top: 8px;
    overflow: hidden;
}

.asset-tree-strip[b-cs829zxb44] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.asset-tree-equip[b-cs829zxb44] {
    flex: 0 0 calc((100% - 16px) * 5 / 12);
    min-width: 0;
}

    .asset-tree-equip.collapsed[b-cs829zxb44] {
        flex: 0 0 auto;
    }

/* No width slide for this panel. A closed panel's column sizes itself to its content, and a width sliding
   out of 100% has nothing to take that percentage of, so the column would jump to the grid's full width
   until the slide ended. The panel snaps open or shut instead, and its table still fades in. */
.asset-tree-equip[b-cs829zxb44]  .minmax-expand-panel-content {
    transition: opacity 500ms ease-in-out;
}
/* /Components/DroneInspection/DroneInspectionPage.razor.rz.scp.css */
.mud-paper[b-v69xgfb948] {
    background-color: #e8e8e8;
}

.mud-paper .floating-label[b-v69xgfb948] {
    background-color: #e8e8e8;
}

.theme-dark-mode .mud-paper[b-v69xgfb948] {
    background-color: #27272f;
}

.theme-dark-mode .mud-paper .floating-label[b-v69xgfb948] {
    background-color: #27272f;
}

.drone-page-wrapper[b-v69xgfb948] {
    display: flex;
    min-height: calc(100vh - 64px);
}

.help-diagram-panel[b-v69xgfb948] {
    width: 400px;
    min-width: 300px;
    padding: 8px;
    border-right: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

.help-diagram-image[b-v69xgfb948] {
    width: 100%;
    height: auto;
    display: block;
}

/* Workflow diagram SVG styles */
.workflow-diagram[b-v69xgfb948] {
    width: 100%;
    height: auto;
    display: block;
}

.workflow-diagram .node-terminal[b-v69xgfb948] {
    fill: var(--mud-palette-primary);
    stroke: var(--mud-palette-primary-darken);
    stroke-width: 1.5;
}

.workflow-diagram .node-process[b-v69xgfb948] {
    fill: var(--mud-palette-primary-lighten);
    stroke: var(--mud-palette-primary);
    stroke-width: 1.5;
}

.workflow-diagram .node-decision[b-v69xgfb948] {
    fill: var(--mud-palette-info-lighten);
    stroke: var(--mud-palette-info);
    stroke-width: 1.5;
}

.workflow-diagram .node-text[b-v69xgfb948] {
    fill: white;
    font-size: 11px;
    font-weight: 600;
    text-anchor: middle;
    dominant-baseline: middle;
}

.workflow-diagram .node-text-small[b-v69xgfb948] {
    fill: white;
    font-size: 9px;
    text-anchor: middle;
    dominant-baseline: middle;
}

.workflow-diagram .label-text[b-v69xgfb948] {
    fill: var(--mud-palette-text-secondary);
    font-size: 8px;
    text-anchor: middle;
}

.workflow-diagram .arrow-line[b-v69xgfb948] {
    stroke: var(--mud-palette-text-secondary);
    stroke-width: 1.5;
    fill: none;
}

.workflow-diagram .arrow-head[b-v69xgfb948] {
    fill: var(--mud-palette-text-secondary);
}

.drone-content-area[b-v69xgfb948] {
    flex: 1;
    min-width: 0;
    overflow-x: hidden;
}

.drone-inspection-layout[b-v69xgfb948] {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
}

.video-container[b-v69xgfb948] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: white;
}

.video-wrapper-outer[b-v69xgfb948] {
    display: flex;
    justify-content: center;
}

.video-wrapper[b-v69xgfb948] {
    position: relative;
    width: 50%;
    padding-bottom: 28.125%; /* 16:9 aspect ratio at 50% width (56.25% / 2) */
    background: #000;
    border-radius: 4px;
    overflow: hidden;
}

.video-wrapper video[b-v69xgfb948] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.timeline-container[b-v69xgfb948] {
    display: flex;
    gap: 16px;
}

.timeline-rail[b-v69xgfb948] {
    width: 40px;
    min-height: 200px;
    background: linear-gradient(to bottom, var(--mud-palette-primary-lighten), var(--mud-palette-primary-darken));
    border-radius: 20px;
    position: relative;
    flex-shrink: 0;
}

.timeline-marker[b-v69xgfb948] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    transition: transform 0.2s;
}

.timeline-marker:hover[b-v69xgfb948] {
    transform: translateX(-50%) scale(1.3);
}

.timeline-marker.matched[b-v69xgfb948] {
    color: var(--mud-palette-success);
}

.timeline-marker.unmatched[b-v69xgfb948] {
    color: var(--mud-palette-warning);
}

.image-cards-container[b-v69xgfb948] {
    flex-grow: 1;
    max-height: 70vh;
    overflow-y: auto;
    padding-right: 8px;
}

/* Scrollbar styling */
.image-cards-container[b-v69xgfb948]::-webkit-scrollbar {
    width: 8px;
}

.image-cards-container[b-v69xgfb948]::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.image-cards-container[b-v69xgfb948]::-webkit-scrollbar-thumb {
    background: var(--mud-palette-primary);
    border-radius: 4px;
}

.image-cards-container[b-v69xgfb948]::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-primary-darken);
}

/* /Components/DroneInspection/ImageInspectionCard.razor.rz.scp.css */
.image-inspection-card[b-pauz5o6rxr] {
    border-left: 4px solid var(--mud-palette-primary);
}

.image-inspection-card.severity-normal[b-pauz5o6rxr] {
    border-left: 4px solid #4CAF50;
}

.image-inspection-card.severity-abnormal[b-pauz5o6rxr] {
    border-left: 4px solid #FF9800;
}

.image-inspection-card.severity-needswork[b-pauz5o6rxr] {
    border-left: 4px solid #F44336;
}

.image-thumbnail-container[b-pauz5o6rxr] {
    flex-shrink: 0;
    text-align: center;
}

.cursor-pointer[b-pauz5o6rxr] {
    cursor: pointer;
}

.cursor-pointer:hover[b-pauz5o6rxr] {
    opacity: 0.9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.question-answer-container[b-pauz5o6rxr] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.result-input[b-pauz5o6rxr] {
    min-width: 200px;
}
/* /Components/DroneInspection/ImagePreviewDialog.razor.rz.scp.css */
[b-ujdmqci2oh] .mud-dialog {
    max-width: 95vw;
    max-height: 95vh;
}

[b-ujdmqci2oh] .mud-dialog-content {
    padding: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.preview-image[b-ujdmqci2oh] {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    display: block;
}
/* /Components/Landing/HomePage.razor.rz.scp.css */
/*placeholder for css styles*/
/* /Components/LibraryForms/FAC008TreeView/FAC008EquipmentTable.razor.rz.scp.css */
/* Rating Value column: purple header + cell (legacy .rating-highlight #9370db). */
[b-mldjai5kai] .fac008-rating-header,
[b-mldjai5kai] .fac008-rating-cell {
    background-color: #9370db !important;
    color: #ffffff !important;
}

/* Most-limiting row coloring overrides the rating cell (higher specificity): red = lowest rating
   (legacy .most-limiting-1-highlight #E34233), orange = second-lowest (.most-limiting-2 #ffa500). */
[b-mldjai5kai] tr.fac008-ml1 td {
    background-color: #E34233 !important;
    color: #ffffff !important;
}

[b-mldjai5kai] tr.fac008-ml2 td {
    background-color: #ffa500 !important;
    color: #ffffff !important;
}

/* "Show in Map" button: keep the label beside the icon at normal sizes, but collapse to icon-only
   once this equipment panel (a ~40%-width column) gets narrow. Kept local to this grid's toolbar
   (a .cq-container) rather than a global cq-* utility, so the 480px threshold is scoped here. */
[b-mldjai5kai] .map-btn-icon {
    margin-right: 8px;
}

@container (max-width: 479px) {
    [b-mldjai5kai] .map-btn-label {
        display: none;
    }

    [b-mldjai5kai] .map-btn-icon {
        margin-right: 0;
    }
}
/* /Components/LibraryForms/FAC008TreeView/FAC008TreeTablePane.razor.rz.scp.css */
/* Most-limiting "warning" row — replaces the old ⚠ icon with a red row, matching the equipment
   grid's most-limiting-1 highlight (legacy .most-limiting-1-highlight #E34233). The ::deep rule
   reaches the grid's <tr>/<td> via the raw .fac008-tree-table wrapper's scope id (a MudPaper root
   would carry no scope id). */
[b-1exeo7ozyn] tr.fac008-warning-row td {
    background-color: #E34233 !important;
    color: #ffffff !important;
}

/* Keep the pane search control stable even when the surrounding split area is narrow. */
[b-1exeo7ozyn] .fac008-search-slot {
    flex: 0 1 300px !important;
    max-width: 300px !important;
    min-width: 220px !important;
}
/* /Components/LibraryForms/FAC008TreeView/FAC008TreeViewPage.razor.rz.scp.css */
/* ── Draggable split layout ───────────────────────────────────────────────────────────────────
   [ Facility+CDF strip | Equip ID grid ]  ‖ splitter ‖  [ District+Substation strip ]
   The left region's width is --fac008-left (updated by js/fac008-splitter.js as the handle drags);
   the right region takes the rest. */
.fac008-split-container[b-6acukd105e] {
    display: flex;
    align-items: stretch;
    width: 100%;
    margin-top: 8px;
    overflow: hidden;
    --fac008-left: 62%;
    --fac008-tree-pane-width: 620px;
}

.fac008-split-left[b-6acukd105e] {
    flex: 0 0 var(--fac008-left);
    min-width: 0;
    display: flex;
    gap: 16px;
    overflow: hidden;
}

.fac008-split-right[b-6acukd105e] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

/* Facility/CDF strip vs Equip ID grid inside the left region. The strip is only as wide as its panels, so the
   Equip ID panel sits right after the CDF panel and the free space falls to its right, before the splitter.
   Open, the Equip ID panel keeps its old share of the region (1.35 to the strip's 1), and the strip shrinks
   and scrolls when its panels need more than the rest. */
.fac008-split-left .fac008-strip[b-6acukd105e] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
}

.fac008-split-left .fac008-equip[b-6acukd105e] {
    flex: 0 0 calc((100% - 16px) * 1.35 / 2.35);
    min-width: 0;
}

/* A closed Equip ID panel is only as wide as its header. */
.fac008-split-left .fac008-equip.collapsed[b-6acukd105e] {
    flex: 0 0 auto;
}

/* No width slide for the Equip ID panel. A closed panel's column sizes itself to its content, and a width
   sliding out of 100% has nothing to take that percentage of, so the column would jump to the grid's full
   width until the slide ended. The panel snaps open or shut instead, and its table still fades in. */
.fac008-equip[b-6acukd105e]  .minmax-expand-panel-content {
    transition: opacity 500ms ease-in-out;
}

.fac008-split-right .fac008-strip[b-6acukd105e] {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}

/* The divider handle: a full-height vertical bar with a centered grip, highlighted on hover. */
.fac008-splitter[b-6acukd105e] {
    flex: 0 0 10px;
    align-self: stretch;
    margin: 0 2px;
    border-radius: 5px;
    cursor: col-resize;
    background-color: var(--mud-palette-primary);
    position: relative;
    transition: background-color .15s ease;
    touch-action: none;
}

.fac008-splitter:hover[b-6acukd105e] {
    background-color: var(--mud-palette-success);
}

.fac008-splitter[b-6acukd105e]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 2px;
    background-color: var(--mud-palette-white);
    opacity: 0.75;
}

/* ── Tree panes (fill-or-scroll, like the Equip ID table) ─────────────────────────────────────── */

/* Keep expanded tree panels at the pre-split fixed width. The strip viewport may be narrower,
   but it scrolls horizontally instead of squeezing the panel toolbar and table. */
.fac008-strip[b-6acukd105e]  .minmax-panel-wrapper:has(.minmax-expand-panel-content.expanded) {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
}

.fac008-strip[b-6acukd105e]  .minmax-expand-panel-content.expanded {
    flex: 0 0 var(--fac008-tree-pane-width);
    width: var(--fac008-tree-pane-width);
    max-width: none;
}

.fac008-tree-pane[b-6acukd105e] {
    display: flex;
    flex: 0 0 var(--fac008-tree-pane-width);
    min-width: var(--fac008-tree-pane-width);
    width: var(--fac008-tree-pane-width);
}

.fac008-tree-pane[b-6acukd105e]  .fac008-tree-table,
.fac008-tree-pane[b-6acukd105e]  .fac008-tree-table-paper {
    width: 100%;
    min-width: 0;
}

/* Page through rows instead of scrolling vertically (same as the PRC-005 side panels), but scroll
   horizontally inside the grid when the columns don't fit — like the Equip ID table. */
.fac008-tree-pane[b-6acukd105e]  .mud-table-container {
    overflow-y: hidden;
    overflow-x: auto;
}

/* Fill-or-scroll: the table fills the pane when its columns fit, and overflows into the container's
   horizontal scroll when they don't (rather than squishing/clipping to the pane width). */
.fac008-tree-pane[b-6acukd105e]  .mud-table-root {
    width: max-content;
    min-width: 100%;
}
/* /Components/LibraryForms/LibraryTreeView/LibraryTreeViewPage.razor.rz.scp.css */
[b-wkvzvweiyy] .library-treeview-side-panel {
    min-width: 410px;
}
/* /Components/LibraryForms/PRC005TreeView/PRC005TreeViewPage.razor.rz.scp.css */
/* Floor the silo width (mirrors the Library tree view's min-width approach); panels
   still grow to use available space and animate open/closed correctly. */
[b-s7o12cxyeg] .prc005-side-panel {
    min-width: 460px;
}

/* Keep PRC toolbar search from changing size as a silo expands. AssetDataTreeView
   feels stable because its tree-mode search is not a small grid fraction. */
[b-s7o12cxyeg] .prc005-search-slot {
    flex: 0 1 300px !important;
    max-width: 300px !important;
    min-width: 220px !important;
}

@container (max-width: 520px) {
    [b-s7o12cxyeg] .prc005-search-slot {
        flex-basis: 260px !important;
        max-width: 260px !important;
        min-width: 0 !important;
    }
}

/* Test a PRC-sized threshold for the filter label. The shared XL utility waits
   until 1100px, which keeps these side-panel filter buttons icon-only forever. */
[b-s7o12cxyeg] .prc005-side-panel .filter-btn .cq-hide-below-xl {
    display: inline !important;
}

[b-s7o12cxyeg] .prc005-side-panel .filter-btn .cq-mr-xl-2 {
    margin-right: 8px !important;
}

@container (max-width: 440px) {
    [b-s7o12cxyeg] .prc005-side-panel .filter-btn .cq-hide-below-xl {
        display: none !important;
    }

    [b-s7o12cxyeg] .prc005-side-panel .filter-btn .cq-mr-xl-2 {
        margin-right: 0 !important;
    }
}

/* PRC side panels page through rows instead of vertically scrolling inside the grid. */
[b-s7o12cxyeg] .prc005-side-panel .mud-table-container {
    overflow-y: hidden;
}
/* /Components/LibraryForms/Questions/QuestionsTable.razor.rz.scp.css */
.severity-keys-group[b-ffga53jrdf] {
    display: flex;
    align-items: center;
    margin-left: auto;
}

/* Wide toolbar: pull keys to the left of the AddButton so the inline order is */
/* title … keys, button. Narrower toolbars fall back to natural DOM order      */
/* (button first, keys wraps below), which is what we want on small screens.   */
@container (min-width: 1500px) {
    .severity-keys-group[b-ffga53jrdf] {
        order: -1;
    }
}
/* /Components/Review/Gantt/GanttChartPage.razor.rz.scp.css */
.gantt-chart[b-qp374zx9ab] {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    width: max-content;
    min-width: 100%;
    --gantt-row-complete-bg: #f1f8f1;
    --gantt-row-overdue-bg: #fef1f0;
    --gantt-row-inprogress-bg: #fff7ed;
    --gantt-row-future-bg: #eef6fe;
    --gantt-row-project-bg: #f6eef9;
    --gantt-year-header-bg: #e8eaf6;
    --gantt-weekend-bg: rgba(0, 0, 0, 0.06);
    --gantt-hover-bg: rgba(0, 0, 0, 0.03);
    --gantt-grid-line-soft: rgba(0, 0, 0, 0.06);
    --gantt-grid-line-strong: rgba(0, 0, 0, 0.12);
}

/* ====== Header ====== */
.gantt-header[b-qp374zx9ab] {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--mud-palette-surface);
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.gantt-grid-header[b-qp374zx9ab] {
    display: flex;
    flex-shrink: 0;
    width: 600px;
    min-width: 600px;
    background: var(--mud-palette-background-gray);
    font-weight: bold;
    align-items: stretch;
    position: sticky;
    left: 0;
    z-index: 12;
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

/* ====== Timeline scale ====== */
.gantt-scale[b-qp374zx9ab] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.gantt-scale-row[b-qp374zx9ab] {
    display: flex;
}

.gantt-scale-cell[b-qp374zx9ab] {
    text-align: center;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 4px 0;
    border-right: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--mud-palette-background-gray);
}

/* Year row styling */
.gantt-scale-years .gantt-year-cell[b-qp374zx9ab] {
    font-size: 0.8rem;
    font-weight: bold;
    background: var(--gantt-year-header-bg);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.gantt-scale-days .gantt-scale-cell[b-qp374zx9ab] {
    font-weight: normal;
    font-size: 0.6rem;
    padding: 2px 0;
}

.gantt-scale-quarters .gantt-scale-cell[b-qp374zx9ab] {
    font-size: 0.7rem;
    padding: 3px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.gantt-day[b-qp374zx9ab] {
    display: inline-block;
    text-align: center;
    font-size: 0.6rem;
    box-sizing: border-box;
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    white-space: nowrap;
    background: var(--mud-palette-background-gray);
    padding: 4px 0;
}

.gantt-weekend[b-qp374zx9ab] {
    background-color: var(--gantt-weekend-bg);
}

/* Lazy-render off-screen month day containers */
.gantt-lazy-month[b-qp374zx9ab] {
    content-visibility: auto;
}

/* ====== Grid columns ====== */
.gantt-col[b-qp374zx9ab] {
    padding: 4px 6px;
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.gantt-col-type[b-qp374zx9ab] { width: 55px; min-width: 55px; justify-content: center; }

/* Lightweight type chip (replaces MudChip for perf) */
.gantt-type-chip[b-qp374zx9ab] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

.gantt-folder-icon[b-qp374zx9ab] {
    font-size: 0.85rem;
    margin-right: 3px;
}
.gantt-col-id[b-qp374zx9ab] { width: 180px; min-width: 180px; }
.gantt-col-question[b-qp374zx9ab] { width: 160px; min-width: 160px; }
.gantt-col-resource[b-qp374zx9ab] { width: 120px; min-width: 120px; }
.gantt-col-date[b-qp374zx9ab] { width: 85px; min-width: 85px; }

/* ====== Rows ====== */
.gantt-row[b-qp374zx9ab] {
    display: flex;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    height: 34px;
}

.gantt-row:hover[b-qp374zx9ab] {
    background-color: var(--gantt-hover-bg);
}

.gantt-grid-row[b-qp374zx9ab] {
    display: flex;
    flex-shrink: 0;
    width: 600px;
    min-width: 600px;
    position: sticky;
    left: 0;
    z-index: 5;
    background: var(--mud-palette-surface);
    box-shadow: 2px 0 4px rgba(0,0,0,0.1);
}

.gantt-timeline-row[b-qp374zx9ab] {
    display: flex;
    flex-grow: 1;
    position: relative;
    border-left: 1px solid var(--mud-palette-lines-default);
}

/* Year view: boxed month grid */
.gantt-timeline-year-grid[b-qp374zx9ab] {
    background-image: linear-gradient(to right, transparent 49px, var(--gantt-grid-line-strong) 49px);
    background-size: 50px 100%;
}

/* Month view: boxed day grid + weekend shading */
.gantt-timeline-day-grid[b-qp374zx9ab] {
    --grid-shift: 0px;
    background-image:
        repeating-linear-gradient(to right, transparent 0px, transparent 250px, var(--gantt-grid-line-soft) 250px, var(--gantt-grid-line-soft) 350px),
        linear-gradient(to right, transparent 49px, var(--gantt-grid-line-strong) 49px);
    background-size: 350px 100%, 50px 100%;
    background-position: var(--grid-shift) 0, 0 0;
}

/* Month vertical grid lines in data rows (year view) */
.gantt-month-cell[b-qp374zx9ab] {
    border-right: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
    box-sizing: border-box;
}


/* ====== Bar ====== */
.gantt-bar[b-qp374zx9ab] {
    position: absolute;
    top: 4px;
    height: 26px;
    border-radius: 4px;
    color: white;
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    padding: 0 8px;
    cursor: grab;
    min-width: 12px;
    z-index: 4;
    user-select: none;
}

.gantt-bar-nodrag[b-qp374zx9ab] {
    cursor: default;
}

/* ====== Milestone diamond (projects with no child WOs) ====== */
.gantt-milestone[b-qp374zx9ab] {
    position: absolute;
    top: 4px;
    height: 26px;
    display: flex;
    align-items: center;
    z-index: 4;
    user-select: none;
}

.gantt-milestone-diamond[b-qp374zx9ab] {
    width: 14px;
    height: 14px;
    background-color: #9C27B0;
    transform: rotate(45deg);
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.gantt-milestone-text[b-qp374zx9ab] {
    margin-left: 10px;
    font-size: 0.7rem;
    white-space: nowrap;
    color: #9C27B0;
    font-weight: 600;
}

.gantt-bar:hover[b-qp374zx9ab] {
    opacity: 0.85;
    box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}

.gantt-bar:active[b-qp374zx9ab],
.gantt-bar-dragging[b-qp374zx9ab] {
    cursor: grabbing;
    opacity: 0.7;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}

.gantt-bar-text[b-qp374zx9ab] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    pointer-events: none;
}

/* ====== Resize handles (always-visible circles at bar endpoints) ====== */
.gantt-bar-handle[b-qp374zx9ab] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: inherit;
    border: 2px solid rgba(255,255,255,0.9);
    cursor: ew-resize;
    z-index: 6;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}

.gantt-bar-handle-left[b-qp374zx9ab] {
    left: -5px;
}

.gantt-bar-handle-right[b-qp374zx9ab] {
    right: -5px;
}

.gantt-bar-handle:hover[b-qp374zx9ab] {
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}

/* ====== Clickable ID column ====== */
.gantt-col-clickable[b-qp374zx9ab] {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}

.gantt-col-clickable:hover[b-qp374zx9ab] {
    color: var(--mud-palette-primary);
}

/* ====== Bar highlight on scroll-to ====== */
.gantt-bar-highlight[b-qp374zx9ab] {
    animation: bar-pulse-b-qp374zx9ab 0.75s ease-in-out 2;
}

@keyframes bar-pulse-b-qp374zx9ab {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; box-shadow: 0 0 12px 3px rgba(255,255,255,0.6); }
}

/* ====== Row color coding (opaque for sticky overlap) ====== */
.gantt-row-complete .gantt-grid-row[b-qp374zx9ab] { background-color: var(--gantt-row-complete-bg); }
.gantt-row-overdue .gantt-grid-row[b-qp374zx9ab] { background-color: var(--gantt-row-overdue-bg); }
.gantt-row-inprogress .gantt-grid-row[b-qp374zx9ab] { background-color: var(--gantt-row-inprogress-bg); }
.gantt-row-future .gantt-grid-row[b-qp374zx9ab] { background-color: var(--gantt-row-future-bg); }
.gantt-row-project .gantt-grid-row[b-qp374zx9ab] { background-color: var(--gantt-row-project-bg); }
/* /Components/Review/Gantt/GanttScheduleHistoryDialog.razor.rz.scp.css */
.gsh-chart[b-xi3yhdb497] {
    position: relative;
    display: flex;
    flex-direction: column;
    font-size: 0.75rem;
}

/* Header */
.gsh-header[b-xi3yhdb497] {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--mud-palette-surface);
    border-bottom: 2px solid var(--mud-palette-lines-default);
}

.gsh-grid-header[b-xi3yhdb497] {
    display: flex;
    flex-shrink: 0;
    width: 550px;
    min-width: 550px;
    background: var(--mud-palette-background-gray);
    font-weight: bold;
}

.gsh-timeline-header[b-xi3yhdb497] {
    display: flex;
    flex-grow: 1;
    background: var(--mud-palette-background-gray);
    border-left: 1px solid var(--mud-palette-lines-default);
}

.gsh-period-header[b-xi3yhdb497] {
    width: 60px;
    text-align: center;
    font-size: 0.65rem;
    padding: 6px 1px;
    border-right: 1px solid var(--mud-palette-lines-default);
    white-space: nowrap;
    overflow: hidden;
}

/* Columns */
.gsh-col[b-xi3yhdb497] {
    padding: 4px 6px;
    border-right: 1px solid var(--mud-palette-lines-default);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.gsh-col-event[b-xi3yhdb497]  { width: 200px; min-width: 200px; }
.gsh-col-type[b-xi3yhdb497]   { width: 130px; min-width: 130px; }
.gsh-col-status[b-xi3yhdb497] { width: 80px;  min-width: 80px; }
.gsh-col-date[b-xi3yhdb497]   { width: 70px;  min-width: 70px; }

/* Rows */
.gsh-row[b-xi3yhdb497] {
    display: flex;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-height: 32px;
}

.gsh-row:hover[b-xi3yhdb497] {
    filter: brightness(0.95);
}

.gsh-row-complete .gsh-grid-row[b-xi3yhdb497] {
    background-color: rgba(76, 175, 80, 0.08);
}

.gsh-grid-row[b-xi3yhdb497] {
    display: flex;
    flex-shrink: 0;
    width: 550px;
    min-width: 550px;
}

.gsh-timeline-row[b-xi3yhdb497] {
    display: flex;
    flex-grow: 1;
    position: relative;
    border-left: 1px solid var(--mud-palette-lines-default);
}

.gsh-period-cell[b-xi3yhdb497] {
    width: 60px;
    border-right: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

/* Bar */
.gsh-bar[b-xi3yhdb497] {
    position: absolute;
    top: 4px;
    height: 24px;
    border-radius: 3px;
    color: white;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    padding: 0 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    min-width: 3px;
    z-index: 5;
    cursor: pointer;
}

.gsh-bar:hover[b-xi3yhdb497] {
    opacity: 0.85;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.gsh-bar-text[b-xi3yhdb497] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Review/ReplaceRelocate/ReplaceFormPanel.razor.rz.scp.css */
/* Shared layout classes (.replace-col, .replace-col-header, .replace-col-body,
   .replace-col-row, .replace-col-row-reset, .floating-label override) live in
   wwwroot/css/app.css so ReplaceFormPanel and RelocateFormPanel can reuse them.
   Only ReplaceFormPanel-specific tweaks remain here. */

/* Center the "Swap Fields" header text — Outgoing/Incoming headers are left-aligned. */
.replace-col-header-center[b-7vvevw5fs6] {
    text-align: center;
}

/* Row 23 (Comments) uses Lines=3 on MudTextField, so it's taller in all three columns. */
.replace-col-row-tall[b-7vvevw5fs6] {
    min-height: 120px;
}

/* SwapCell: subtle hover feedback so users know the whole cell is clickable.
   Active/checked state is conveyed by the checkbox color (Color.Primary) only —
   no background/text color change on the cell itself. */
.replace-col-body[b-7vvevw5fs6]  .swap-cell {
    border-radius: 4px;
    transition: background-color 120ms ease;
}

.replace-col-body[b-7vvevw5fs6]  .swap-cell:hover {
    background-color: var(--mud-palette-action-default-hover);
}
/* /Components/Shared/Buttons/AddButton.razor.rz.scp.css */
.add-button-text[b-ptft25ulls] {
    display: none;
}

.add-button-icon[b-ptft25ulls] {
    margin-right: 0;
}

/* Viewport fallback - used when there is no .cq-container ancestor */
@media (min-width: 1280px) {
    .add-button-text[b-ptft25ulls] {
        display: inline;
    }

    .add-button-icon[b-ptft25ulls] {
        margin-right: 8px;
    }
}

/* When an ancestor is marked .cq-container, container width wins over viewport */
@container (max-width: 899px) {
    .add-button-text[b-ptft25ulls] {
        display: none;
    }

    .add-button-icon[b-ptft25ulls] {
        margin-right: 0;
    }
}

@container (min-width: 900px) {
    .add-button-text[b-ptft25ulls] {
        display: inline;
    }

    .add-button-icon[b-ptft25ulls] {
        margin-right: 8px;
    }
}
/* /Components/Shared/Help/Faq/FaqPage.razor.rz.scp.css */
/* Indent all FAQ entry contents */
.faq-content[b-arr9cz46ch] {
    margin-left: 1.5rem;
}

/* Add spacing between introductory text/paragraphs and numbered lists */
.faq-content[b-arr9cz46ch]  ol {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}
/* /Components/Shared/InfoHelperText.razor.rz.scp.css */
/* mud-input-helper-text supplies the font, size and gray color. MudBlazor 8.15 renders HelperText
   inside the field, 3px below the input with 8px sides, and the field's 4px dense bottom margin
   under it. This line sits after the field instead, so the -4px pulls it up over that bottom margin
   and the 4px bottom padding puts the space back underneath. */
.info-helper-text[b-x0yq7rhtcd] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-top: -4px;
    padding: 3px 8px 4px;
}

/* One line tall, so the icon centers on the first line when the text wraps. */
.info-helper-icon[b-x0yq7rhtcd] {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: 1.66em;
}
/* /Components/Shared/SnackbarRecall.razor.rz.scp.css */
.snackbar-recall[b-gb3cep3imd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: fixed;
    top: 65px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 2px 8px;
    color: #fff;
    cursor: pointer;
    opacity: 0.85;
}

.snackbar-recall:hover[b-gb3cep3imd] {
    opacity: 1;
}
/* /Components/Shared/Table/TableColumnSetupPanel.razor.rz.scp.css */
.column-setup-panel[b-7g2ud90la6] {
    width: 100%;
}

.column-setup-header[b-7g2ud90la6] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.column-setup-title[b-7g2ud90la6] {
    align-items: center;
    display: flex;
    gap: 8px;
    margin-right: 24px;
    min-height: 32px;
}

.column-setup-title-icon[b-7g2ud90la6] {
    flex: 0 0 auto;
    transform: translateY(2px);
}

.column-setup-title-text[b-7g2ud90la6] {
    line-height: 1;
}

.column-setup-container[b-7g2ud90la6] {
    container-type: inline-size;
    width: 100%;
}

.column-setup-flow[b-7g2ud90la6] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: repeat(var(--rows-xs, 1), auto);
    gap: 8px 12px;
    width: 100%;
}

@container (min-width: 900px) {
    .column-setup-flow[b-7g2ud90la6] {
        grid-template-rows: repeat(var(--rows-sm, 1), auto);
    }
}

@container (min-width: 1300px) {
    .column-setup-flow[b-7g2ud90la6] {
        grid-template-rows: repeat(var(--rows-md, 1), auto);
    }
}

@container (min-width: 1700px) {
    .column-setup-flow[b-7g2ud90la6] {
        grid-template-rows: repeat(var(--rows-lg, 1), auto);
    }
}
/* /Components/Shared/Table/TableFilterPanel.razor.rz.scp.css */
.filter-panel-container[b-x7ebb6ncy2] {
    container-type: inline-size;
    width: 100%;
}

.filter-panel-flow[b-x7ebb6ncy2] {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    grid-template-rows: repeat(var(--rows-xs, 1), auto);
    gap: 8px 16px;
    width: 100%;
}

@container (min-width: 900px) {
    .filter-panel-flow[b-x7ebb6ncy2] {
        grid-template-rows: repeat(var(--rows-sm, 1), auto);
    }
}

@container (min-width: 1300px) {
    .filter-panel-flow[b-x7ebb6ncy2] {
        grid-template-rows: repeat(var(--rows-md, 1), auto);
    }
}

@container (min-width: 1700px) {
    .filter-panel-flow[b-x7ebb6ncy2] {
        grid-template-rows: repeat(var(--rows-lg, 1), auto);
    }
}
/* /Components/Shared/TreeList/TreeListPane.razor.rz.scp.css */
/* Floor the pane width (mirrors the LibraryTreeView side panels: min-width ~410px, NO max-width so
   the panes fill the available space and the row scrolls horizontally, like PRC-005's 460px). The
   earlier max-width cap made the four panes too small. */
[b-5j7dyuqbfc] .tree-list-pane {
    min-width: 410px;
    display: flex;
    flex-direction: column;
}

[b-5j7dyuqbfc] .tree-list-header {
    height: auto;
    min-height: 0;
    padding: 8px 12px;
}

/* Grow to fit content like the LibraryTreeView side panels (no internal scrollbar). */
[b-5j7dyuqbfc] .tree-list-scroll {
    overflow: visible;
}

[b-5j7dyuqbfc] .tree-list-row {
    cursor: pointer;
    transition: background-color .15s ease;
    /* Match the /AssignBriefingLineItem/View panel item color (info-blue tint). */
    background-color: rgba(var(--mud-palette-info-rgb), 0.12);
    color: var(--mud-palette-text-primary);
}

[b-5j7dyuqbfc] .tree-list-row:hover {
    background-color: rgba(var(--mud-palette-info-rgb), 0.2);
}

/* Selected row turns green (legacy .highlight-green) — overrides the info tint + hover. */
[b-5j7dyuqbfc] .tree-list-selected,
[b-5j7dyuqbfc] .tree-list-selected:hover {
    background-color: #5cb85c !important;
}

[b-5j7dyuqbfc] .tree-list-selected .mud-typography {
    color: #fff !important;
}

/* Legacy most-limiting red (#E34233) for the ⚠ that propagates up to District/Substation. */
[b-5j7dyuqbfc] .tree-list-warning {
    color: #E34233 !important;
}

/* The ⚠ stays red even on a selected (green) row — do NOT recolor it to white. */

/* The [Equip: N] badge matches the row name's font/size/color (Typo.body2 + inherited color);
   only keep it from wrapping. Selected-row white color comes from the .mud-typography rule above. */
[b-5j7dyuqbfc] .tree-list-count {
    white-space: nowrap;
}
/* /Components/Work/Inspect/InspectionsPage.razor.rz.scp.css */
/* Inspect Online / Hard Copy / Offline column widths */
[b-lqdl0mwckd] .inspect-col-width {
    width: 130px;
    min-width: 130px;
}

/* Row color coding for inspection statuses */
[b-lqdl0mwckd] .complete-row {
    background-color: rgba(50, 205, 50, 0.2) !important;
}

[b-lqdl0mwckd] .force-complete-row {
    background-color: rgba(144, 238, 143, 0.2) !important;
}

[b-lqdl0mwckd] .historical-row {
    background-color: rgba(102, 102, 102, 0.2) !important;
}

[b-lqdl0mwckd] .in-progress-row {
    background-color: rgba(68, 117, 255, 0.2) !important;
}

[b-lqdl0mwckd] .due-soon-row {
    background-color: rgba(66, 102, 153, 0.3) !important;
}

[b-lqdl0mwckd] .overdue-row {
    background-color: rgba(209, 75, 253, 0.7) !important
}
/* /Components/Work/Inspect/InspectionStep2Page.razor.rz.scp.css */
/* Styles moved to Step2Content.razor.css */
/* /Components/Work/Inspect/Step2Content.razor.rz.scp.css */
/* Row color coding for Step2 equipment status */
[b-k9gcikueai] .complete-row {
    background-color: rgba(50, 205, 50, 0.15) !important;
}

[b-k9gcikueai] .abnormal-row {
    background-color: rgba(255, 165, 0, 0.2) !important;
}

[b-k9gcikueai] .needs-work-row {
    background-color: rgba(255, 0, 0, 0.15) !important;
}

[b-k9gcikueai] .inactive-row {
    background-color: rgba(102, 102, 102, 0.2) !important;
    opacity: 0.7;
}

/* Compliance keys, painted on the whole row the way legacy's Step2.aspx rowCallback did (.purple_row
   past the compliance date, .blue_row within 7 days). The colours are the app's own Overdue and
   Due <7 Days keys, so the legend chips can keep using the shared .mud-chip rules in app.css.

   These live HERE rather than in app.css on purpose: the Inspections and Service Calls grids hand the
   same two class names to RowClassFunc, where nothing paints them today (their status colour goes on
   the Status cell). A global rule would repaint entire rows on both of those screens. */
[b-k9gcikueai] .overdue-row td {
    background-color: rgba(209, 75, 253, 0.7) !important;
    color: #ffffff !important;
    border-top: 1px solid #9a37bb !important;
    border-bottom: 1px solid #9a37bb !important;
    transition: all 0.3s ease;
}

[b-k9gcikueai] .overdue-row .mud-input > input.mud-input-root,
[b-k9gcikueai] .overdue-row div.mud-input-slot.mud-input-root {
    color: #ffffff !important;
}

[b-k9gcikueai] .due-soon-row td {
    background-color: rgba(66, 102, 153, 0.6) !important;
    color: #ffffff !important;
    border-top: 1px solid #2f4a70 !important;
    border-bottom: 1px solid #2f4a70 !important;
    transition: all 0.3s ease;
}

[b-k9gcikueai] .due-soon-row .mud-input > input.mud-input-root,
[b-k9gcikueai] .due-soon-row div.mud-input-slot.mud-input-root {
    color: #ffffff !important;
}
/* /Components/Work/Schedule/ScheduleTemplateTable.razor.rz.scp.css */
/* Header legend layout. The chip colors live in wwwroot/css/mud_custom.css
   (.schedule-*-key) because MudChip renders outside this component's CSS scope. */
.schedule-color-keys[b-d2kdkso6l5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
/* /Components/Work/WorkOrders/WorkOrdersPage.razor.rz.scp.css */
/* Work Online / Additional Controls column widths */
[b-icq1c6col9] .inspect-col-width {
    width: 130px;
    min-width: 130px;
}

/* Row color coding for work order statuses — mirrors InspectionsPage.razor.css so the
   Keys legend chips and rows match across Step 1 pages. */
[b-icq1c6col9] .complete-row {
    background-color: rgba(50, 205, 50, 0.2) !important;
}

[b-icq1c6col9] .in-progress-row {
    background-color: rgba(68, 117, 255, 0.2) !important;
}

[b-icq1c6col9] .due-soon-row {
    background-color: rgba(66, 102, 153, 0.3) !important;
}

[b-icq1c6col9] .overdue-row {
    background-color: rgba(209, 75, 253, 0.7) !important
}