/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* /Components/Pages/Admin/ActivityLog.razor.rz.scp.css */
.act-head[b-f7a0q5z0lw] {
    margin-bottom: 18px;
}

.act-eyebrow[b-f7a0q5z0lw] {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-4);
    margin-bottom: 10px;
}

.act-title[b-f7a0q5z0lw] {
    font-family: 'Helvetica LT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 700;
    font-size: 30px;
    letter-spacing: -0.03em;
    color: var(--ink);
    margin: 0;
}

.act-subtitle[b-f7a0q5z0lw] {
    font-size: 14px;
    color: var(--ink-3);
    margin: 6px 0 0;
}

/* The log rows' own scroll region inside the flush list card: at narrow widths the rows scroll
   sideways here while the filter bar and footer stay put. */
.act-card[b-f7a0q5z0lw] {
    overflow-x: auto;
}

.act-row[b-f7a0q5z0lw] {
    display: grid;
    grid-template-columns: 140px 90px minmax(140px, 0.8fr) minmax(170px, 1fr) minmax(260px, 1.6fr);
    gap: 14px;
    align-items: center;
    min-width: 960px;
    padding: 12px 22px;
    border-bottom: 1px solid var(--line-soft);
}

/* Grid children default to min-width:auto, which lets long keys overflow into the next column. */
.act-row > *[b-f7a0q5z0lw] {
    min-width: 0;
}

.act-row:last-child[b-f7a0q5z0lw] {
    border-bottom: none;
}

/* Header row matches the shared .r360-table header: inset band, 2px brand underline, ink-2
   sentence-case body text. */
.act-row--head[b-f7a0q5z0lw] {
    background: var(--surface-inset);
    border-bottom: 2px solid var(--brand-tile);
    font-family: var(--f-body);
    font-size: var(--fs-th);
    font-weight: 600;
    color: var(--ink-2);
}

.act-when[b-f7a0q5z0lw] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--ink-3);
}

.act-action[b-f7a0q5z0lw] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: var(--r-tag);
}

.act-action--insert[b-f7a0q5z0lw] { background: #d8f1e3; color: var(--success); }
.act-action--update[b-f7a0q5z0lw] { background: #ffeec7; color: #b27300; }
.act-action--delete[b-f7a0q5z0lw] { background: #fbdcd7; color: var(--danger); }
.act-action--select[b-f7a0q5z0lw] { background: #d6efff; color: var(--info); }

.act-table[b-f7a0q5z0lw] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.act-record[b-f7a0q5z0lw] {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--brand-tile);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.act-record[title][b-f7a0q5z0lw] { cursor: help; }

.act-detail[b-f7a0q5z0lw] {
    font-size: 13.5px;
    color: #2c3a4f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.act-user[b-f7a0q5z0lw] {
    color: var(--ink);
    font-weight: 500;
}

.act-empty[b-f7a0q5z0lw] {
    padding: 24px;
    text-align: center;
    color: var(--ink-4);
    font-size: 13.5px;
}

/* ── Sortable header columns ─────────────────────────────────────────────── */
/* act-col-sort is now a real <button> (was a bare <span @onclick>, invisible to keyboard and
   screen-reader users). Reset default button chrome so it still reads as a column header, but
   keep a visible focus ring so keyboard users can see which column has focus. */
.act-col-sort[b-f7a0q5z0lw]{cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px;
    background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;
    text-transform:inherit;letter-spacing:inherit;min-height:28px}
.act-col-sort:hover[b-f7a0q5z0lw]{color:var(--brand)}
.act-col-sort:focus-visible[b-f7a0q5z0lw]{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)}
.act-sort-icon[b-f7a0q5z0lw]{font-size:11px;color:#b0bac8}
.act-sort-active[b-f7a0q5z0lw]{color:var(--brand)}
/* /Components/Pages/Admin/ImportWizard.razor.rz.scp.css */
.import-wizard[b-a6wsz1l3q9] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.import-step[b-a6wsz1l3q9] {
    border: 1px solid #e3e8ef;
    border-radius: var(--r-lg);
    background: #fff;
    padding: 14px 16px;
}

.import-step.is-locked[b-a6wsz1l3q9] {
    background: #f7f9fc;
    opacity: 0.7;
}

.import-step.is-done[b-a6wsz1l3q9] {
    border-color: #2e8b57;
}

.step-header[b-a6wsz1l3q9] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-status[b-a6wsz1l3q9] {
    font-size: 15px;
    width: 20px;
    text-align: center;
}

.step-title[b-a6wsz1l3q9] {
    font-weight: 600;
    font-size: 15px;
    color: var(--ink);
}

.step-lock-note[b-a6wsz1l3q9] {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--ink-4);
}

.step-content[b-a6wsz1l3q9] {
    margin-top: 8px;
}

.cie-upload[b-a6wsz1l3q9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--r-sm);
    border: 1px solid #d7dde6;
    background: #fff;
    cursor: pointer;
    font-size: 13.5px;
    color: var(--ink);
}

.cie-upload input[type="file"][b-a6wsz1l3q9] {
    display: none;
}
/* /Components/Pages/Admin/Settings.razor.rz.scp.css */
.set-subtitle[b-ey9a736lyz] {
    font-size: 15px;
    color: var(--ink-3);
    margin: 0 0 24px;
}

.set-card[b-ey9a736lyz] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 22px 24px;
}

.set-card-head[b-ey9a736lyz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.set-card-title[b-ey9a736lyz] {
    font-weight: 700;
    font-size: 17px;
    color: var(--ink);
}

.set-cardnote[b-ey9a736lyz] {
    font-size: 12.5px;
    color: var(--ink-4);
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

/* Rows */
.set-rows[b-ey9a736lyz] { display: flex; flex-direction: column; }

.set-userinfo[b-ey9a736lyz] { flex: 1; min-width: 0; }
.set-dept[b-ey9a736lyz] { font-family: inherit; font-size: 13px; }

.set-rate[b-ey9a736lyz] { font-weight: 700; font-size: 15px; color: var(--ink); }

.set-rateedit[b-ey9a736lyz] { display: flex; align-items: center; gap: 4px; color: var(--ink-3); font-weight: 600; }
.set-rateinp[b-ey9a736lyz] { width: 80px; text-align: right; }

/* Lookup tables section */
.set-eyebrow[b-ey9a736lyz] {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-4);
    margin-bottom: 14px;
}

/* .set-grid moved to wwwroot/css/app.css: the Settings sub-pages use it, and scoped CSS here
   only reached this hub page. */

.set-warning[b-ey9a736lyz] {
    border: 1px solid #b9770e;
    background: #fff8e6;
    border-radius: var(--r-lg);
    padding: 12px 14px;
    font-size: 13px;
    margin-bottom: 16px;
}

.set-tiles[b-ey9a736lyz] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 26px;
}

/* A real anchor, not a clickable div with a fake arrow -- these tiles navigate, so they are
   links, and they are keyboard-reachable and middle-clickable for free. */
.set-tile[b-ey9a736lyz] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    min-height: 96px;
    background: var(--paper);
    border: 1px solid var(--paper-3);
    border-radius: var(--r-xl);
    text-decoration: none;
    color: inherit;
}

.set-tile:hover[b-ey9a736lyz] {
    border-color: var(--brand-bright);
    box-shadow: 0 4px 14px rgba(14, 23, 38, 0.08);
}

.set-tile:focus-visible[b-ey9a736lyz] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.set-tile-title[b-ey9a736lyz] {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.set-tile-desc[b-ey9a736lyz] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ink-4);
}

.set-tile-count[b-ey9a736lyz] {
    font-size: 12px;
    color: var(--ink-3);
    margin-top: auto;
}
/* /Components/Pages/Admin/SettingsApprovals.razor.rz.scp.css */
/* Copied from Settings.razor.css: scoped CSS only styles the component that owns it, so
   this page's use of .set-cardnote was rendering unstyled. */
.set-cardnote[b-1tauxctajh] {
    font-size: 12.5px;
    color: var(--ink-4);
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}
/* /Components/Pages/Admin/SettingsLabor.razor.rz.scp.css */
/* Clickable rate value — looks like static bold text until hovered, then
   reveals a dashed affordance hinting it's editable in place. */
.set-ratebtn[b-7nj3982vvm] {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink);
    background: none;
    border: 1px dashed transparent;
    border-radius: var(--r-sm);
    padding: 2px 6px;
    cursor: pointer;
}
.set-ratebtn:hover[b-7nj3982vvm] { border-color: #cfe6f7; background: #f3fbff; }

/* Copied from Settings.razor.css and SettingsUsers.razor.css: scoped CSS only styles the component that owns it, so
   this page's use of the note, rate editor and filter-bar classes was rendering unstyled. */
.set-cardnote[b-7nj3982vvm] {
    font-size: 12.5px;
    color: var(--ink-4);
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--line-soft);
}

.set-rateedit__from[b-7nj3982vvm] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.set-rateedit[b-7nj3982vvm] { display: flex; align-items: center; gap: 4px; color: var(--ink-3); font-weight: 600; }

.set-rateinp[b-7nj3982vvm] { width: 80px; text-align: right; }

.su-filters[b-7nj3982vvm] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.su-search[b-7nj3982vvm] { flex: 1; min-width: 200px; }

.su-count[b-7nj3982vvm] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--ink-4);
    white-space: nowrap;
}

.su-empty[b-7nj3982vvm] {
    text-align: center;
    color: var(--ink-4);
    padding: 32px 0;
}
/* /Components/Pages/Admin/SettingsUsers.razor.rz.scp.css */
.su-back[b-tkoza6bnbn] {
    display: inline-block;
    font-size: 13px;
    color: var(--ink-3);
    text-decoration: none;
    margin-bottom: 14px;
}
.su-back:hover[b-tkoza6bnbn] { color: var(--brand); }

.su-head[b-tkoza6bnbn] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

.su-filters[b-tkoza6bnbn] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.su-search[b-tkoza6bnbn] { flex: 1; min-width: 200px; }
.su-count[b-tkoza6bnbn] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--ink-4);
    white-space: nowrap;
}

.su-empty[b-tkoza6bnbn] {
    text-align: center;
    color: var(--ink-4);
    padding: 32px 0;
}

/* Plant-assignment display: a clickable cluster of plant-code pills. */
.su-sitepills[b-tkoza6bnbn] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    background: none;
    border: 1px dashed transparent;
    border-radius: var(--r-sm);
    padding: 2px 4px;
    cursor: pointer;
}
.su-sitepills:hover[b-tkoza6bnbn] { border-color: #cfe6f7; background: #f3fbff; }

.su-sitepill[b-tkoza6bnbn] {
    display: inline-block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 600;
    color: #0a5a8a;
    background: #e6f4fd;
    border: 1px solid #cfe6f7;
    border-radius: var(--r-tag);
    padding: 1px 6px;
}
.su-site-none[b-tkoza6bnbn] { font-size: 12px; color: var(--ink-4); }

/* Inline plant editor: vertical checkbox list + Save/Cancel. */
.su-siteedit[b-tkoza6bnbn] { display: flex; flex-direction: column; gap: 4px; }
.su-sitechk[b-tkoza6bnbn] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--brand-ink);
    cursor: pointer;
}
.su-siteedit-actions[b-tkoza6bnbn] { display: flex; gap: 6px; margin-top: 6px; }
/* /Components/Pages/AssetDetail.razor.rz.scp.css */
/* Phase 6 Task 4: danger zone at the bottom of the (collapsed-by-default) Edit details panel,
   replacing a DELETE button that used to sit next to Back/Print PDF with equal visual weight. */
.ad-danger[b-rdw0dxl7zs] {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #f1cfcf;
}
.ad-danger-title[b-rdw0dxl7zs] {
    font-size: 13px;
    font-weight: 700;
    color: var(--danger);
    margin-bottom: 4px;
}
.ad-danger-body[b-rdw0dxl7zs] {
    font-size: 13px;
    color: #7a1f16;
    margin-bottom: 10px;
}
/* /Components/Pages/Assets.razor.rz.scp.css */
/* ------------------------------------------------------------------
   Table cell treatments. These used to be inline styles on fixed <td>s; they became classes when
   the columns turned into a loop over the user's chosen layout (see AssetColumns) -- a switch
   carrying a style attribute per branch was unreadable.
   ------------------------------------------------------------------ */

/* Asset ID: monospaced and link-coloured, since the row is click-to-open. */
.asset-cell-id[b-8xg63jra13]{font-family:var(--f-mono);font-size:var(--fs-id-cell);color:var(--text-id)}

/* Asset name: the row's primary identifier, bold (700) per the design system. */
.asset-cell-name[b-8xg63jra13]{font-weight:700;color:var(--ink)}

/* Model / serial numbers: monospaced so a transposed character is visible when comparing a cell
   against the nameplate on the machine. */
.asset-cell-mono[b-8xg63jra13]{font-family:var(--f-mono);font-size:var(--fs-id-cell);color:var(--ink)}

/* Numeric column (Open work orders), header and body alike. */
.asset-cell-num[b-8xg63jra13]{text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px;
  font-weight:600;color:var(--ink);white-space:nowrap}

/* ------------------------------------------------------------------
   P5-01/P5-02/P5-03 (UX Phase 5, 2026-09-23): the flat asset table used to force the whole page
   wider at common desktop widths (1366x768) instead of scrolling on its own, names wrapped to
   three lines pushing rows tall, and the search placeholder text got clipped by the box's fixed
   width. Verified live against the pre-fix build (docs/superpowers/logs/2026-09-23-ux-phase5-
   verdicts.md) before making this change.
   ------------------------------------------------------------------ */

/* Media query only: app.css turns .r360-table into stacked labelled cards inside its own
   "@media (max-width: 1200px)" block, so the sticky/pinned-column treatment below must stay
   confined to widths above that (1201px+) desktop table layout -- applying it under the card
   layout would sticky-position a card row's already-stacked cells, which makes no visual sense. */
@media (min-width: 1201px) {
    /* The table scrolls inside its own card instead of pushing the page wider; the checkbox and
       first data column (ID) stay pinned to the left so a horizontally-scrolled row is still
       identifiable without scrolling back. */
    .asset-table-wrap[b-8xg63jra13] { overflow-x: auto; max-width: 100%; }
    .asset-table th:nth-child(1)[b-8xg63jra13], .asset-table td:nth-child(1)[b-8xg63jra13] {
        position: sticky; left: 0; z-index: 2; background: #fff; width: 44px;
    }
    .asset-table th:nth-child(2)[b-8xg63jra13], .asset-table td:nth-child(2)[b-8xg63jra13] {
        position: sticky; left: 44px; z-index: 2; background: #fff; box-shadow: 1px 0 0 var(--line-soft);
    }
    /* Pinned cells are opaque (so scrolled cells pass under them), which means they must repeat
       every row fill the shared table rules give the other cells, or they look detached: the
       header band, the hover fill and the selected wash (all from app.css's .r360-table rules). */
    .asset-table th:nth-child(1)[b-8xg63jra13], .asset-table th:nth-child(2)[b-8xg63jra13] { background: var(--surface-inset); }
    .asset-table tbody tr.is-click:hover td:nth-child(1)[b-8xg63jra13],
    .asset-table tbody tr.is-click:hover td:nth-child(2)[b-8xg63jra13] { background: var(--paper-2); }
    .asset-table tbody tr.is-selected td:nth-child(1)[b-8xg63jra13],
    .asset-table tbody tr.is-selected td:nth-child(2)[b-8xg63jra13] { background: color-mix(in srgb, var(--brand-bright) 6%, var(--paper)); }
}

/* P5-02: IDs never wrap (they're short and monospaced); names wrap to at most two lines with the
   full name still reachable via the title tooltip set in the markup. */
.asset-cell-id[b-8xg63jra13] { white-space: nowrap; }
.asset-cell-name[b-8xg63jra13] {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; max-width: 220px;
}
.asset-cell-mono[b-8xg63jra13] { white-space: nowrap; }

/* Description already truncates to 60 chars server-side (see the "description" case in
   Assets.razor); this keeps the cell itself from stretching taller than a row even if a shorter
   language's 60 characters still wrap given the column's width. */
.asset-table td[data-label="Description"][b-8xg63jra13] {
    max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Thumbnail + name side by side in the Asset cell; the name keeps its two-line clamp. */
.asset-cell-namewrap[b-8xg63jra13] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
/* /Components/Pages/CustomReportBuilder.razor.rz.scp.css */
/* The source control opens a dialog, so it is a button and looks like one. */
.builder__source[b-nmqtk4etdf] {
    width: 100%;
    min-height: var(--hit-min);
    padding: 0 12px;
    text-align: left;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--r-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.builder__source:hover[b-nmqtk4etdf] { border-color: var(--mud-palette-primary); }

/* The grand total reads as a summary of the rows above it, not as one of them. */
.builder__total-row[b-nmqtk4etdf] { font-weight: 600; border-top: 2px solid var(--mud-palette-lines-default); }

/* Preview table: one line per row, scrolling inside a window no taller than the screen. A report
   with many columns is far wider than the preview column, and the sideways scrollbar used to sit
   below the last of 50 rows where nobody found it; capping the height keeps it on screen, and the
   sticky header keeps the column names visible while scrolling down. ::deep because the
   container, th and td are rendered by MudSimpleTable, outside this component's scope. */
.builder__preview[b-nmqtk4etdf]  .mud-table-container {
    max-height: calc(100vh - 260px);
    overflow: auto;
}
.builder__preview[b-nmqtk4etdf]  th,
.builder__preview[b-nmqtk4etdf]  td { white-space: nowrap; }
.builder__preview[b-nmqtk4etdf]  thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface);
}
/* /Components/Pages/CustomReport/ReportFilterPanel.razor.rz.scp.css */
/* Both controls here are actions, so both carry a visible border and a 44px hit area -- users
   with poor eyesight were reading bare coloured words as decoration and missing them entirely. */
.filter-panel__add[b-ti7uajghbp],
.filter-panel__remove[b-ti7uajghbp] {
    min-height: var(--hit-min);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--r-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.filter-panel__add[b-ti7uajghbp] { padding: 0 14px; margin-top: 4px; }

.filter-panel__remove[b-ti7uajghbp] { min-width: var(--hit-min); font-size: 1.1rem; line-height: 1; }

.filter-panel__add:hover[b-ti7uajghbp],
.filter-panel__remove:hover[b-ti7uajghbp] { border-color: var(--mud-palette-primary); }
/* /Components/Pages/CustomReport/ReportGroupPanel.razor.rz.scp.css */
/* Action controls carry a visible border and a 44px hit area (project button convention). */
.group-panel__add[b-12l3un79ts],
.group-panel__remove[b-12l3un79ts] {
    min-height: var(--hit-min);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--r-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.group-panel__add[b-12l3un79ts] { padding: 0 14px; margin-top: 4px; }

.group-panel__remove[b-12l3un79ts] { min-width: var(--hit-min); font-size: 1.1rem; line-height: 1; }

.group-panel__add:hover[b-12l3un79ts],
.group-panel__remove:hover[b-12l3un79ts] { border-color: var(--mud-palette-primary); }
/* /Components/Pages/CustomReport/ReportSourceDialog.razor.rz.scp.css */
/* Tile grid for the source picker. Two columns on a desktop dialog, one on a narrow screen. */
.report-source__grid[b-i478e3mhre] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 8px;
}

/* Each tile is an action control, so it carries a visible border and a comfortable hit area
   rather than reading as decoration (project button convention). */
.report-source__tile[b-i478e3mhre] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 64px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--r-sm);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
}

.report-source__tile:hover[b-i478e3mhre] {
    border-color: var(--mud-palette-primary);
}

.report-source__tile--selected[b-i478e3mhre] {
    border-color: var(--mud-palette-primary);
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.report-source__name[b-i478e3mhre] { font-weight: 600; }

.report-source__desc[b-i478e3mhre] {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

.report-source__note[b-i478e3mhre] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Plant selector in the dashboard header. */
.dash-plant[b-hyd7p2kgwf] {
    height: 40px;
    padding: 0 34px 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    cursor: pointer;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6878' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
}
.dash-plant:focus[b-hyd7p2kgwf] { border-color: var(--brand); }

/* KPI strip (design system, Sep 28, 2026): the five tiles share one frame, divided by 1px
   hairlines -- the 1px grid gap shows the frame's --line background between tiles. Same
   treatment as the StatStrip component on the Assets page. Tiles wrap at 200px each, so the strip
   becomes several rows on narrow screens without a media query. No bottom margin: the content
   column's 18px gap spaces it. */
.dash-kpis[b-hyd7p2kgwf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    overflow: hidden;
}

/* The frame draws the border and corners, so each tile drops its own. The tiles open a filtered
   list, so they get the list rows' hover fill and an inset focus ring (an outward ring would be
   clipped by the frame's overflow:hidden). */
.dash-kpis .statcard[b-hyd7p2kgwf] {
    border: none;
    border-radius: 0;
    background: var(--paper);
}
.dash-kpis .statcard:hover[b-hyd7p2kgwf] {
    background: var(--paper-2);
}
.dash-kpis .statcard:focus-visible[b-hyd7p2kgwf] {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

.dash-cols[b-hyd7p2kgwf] {
    display: grid;
    grid-template-columns: 1.55fr 1fr;
    gap: 18px;
}

/* Grid items default to min-width:auto, i.e. never narrower than their widest unbreakable line
   (a work-order row's title, a reorder row). On a phone that pushed the widget cards past the
   screen edge. min-width:0 lets them shrink so their own ellipsis/wrapping rules take over. */
.dash-cols > *[b-hyd7p2kgwf] {
    min-width: 0;
}

/* Stack the two-column body on mobile so it doesn't overflow 375px (the KPI strip wraps on its own). */
@media (max-width: 900px) {
    .dash-cols[b-hyd7p2kgwf] {
        grid-template-columns: 1fr;
    }
}

/* Tablet tier: the Active Work Orders widget renders each populated row as a .datarow button
   (a 3-column CSS grid defined in app.css -- 96px id / 1fr title+meta / auto pills), not as an
   .r360-table, so it does not inherit the card-stacking layout a prior task added to
   .r360-table's tablet breakpoint. At 1024px the fixed grid squeezed the middle column so hard
   that the asset text wrapped across four lines and the description lost its text entirely --
   unreadable on the plant-floor tablet form factor this widget is meant to be read on. Switch
   the row from a 3-column grid to an explicit 2-row grid instead: line 1 is the WO number +
   description, line 2 is the asset + status/priority pills. Uses the same 1200px breakpoint as
   the .r360-table tablet tier in app.css (see that file's "Viewport tiers" comment) so the
   chassis stays consistent across pages. These selectors are component-scoped
   (Dashboard.razor.css), so they only affect this page's .datarow elements, not any other page.
   Grid-area placement (rather than flex-wrap's "flex-basis:100% forces a break" trick) is used
   deliberately: with flex-wrap, a meta item wide enough to force its own line break also fills
   that entire line, leaving no room for the pills next to it and pushing them onto an
   unwanted third line. Grid areas place each of the four pieces in a fixed cell regardless of
   its content width, so line 2 reliably holds both meta and pills together.
   The empty-state row ("No active work orders") also carries the base .datarow class for its
   background/border/padding, but it is a plain <div> with a single text node -- none of the
   datarow__id/__body/__title/__pills children this rule depends on. :not(.datarow--empty)
   excludes it so it keeps its own centered single-line layout instead of being pulled into
   this rule's grid-template-areas, where its lone text node would otherwise auto-place into
   the "id" cell (a shrink-to-fit column) and be squeezed/left-aligned instead of centered. */
@media (max-width: 1200px) {
    .datarow:not(.datarow--empty)[b-hyd7p2kgwf] {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-areas:
            "id    title title"
            "meta  meta  pills";
        column-gap: 10px;
        row-gap: 4px;
        align-items: center;
        padding: 10px 16px;
    }

    /* Unwraps the title+meta grouping span so its children (.datarow__title and .meta) become
       direct grid items of .datarow above, placeable into their own grid areas instead of
       staying confined to this wrapper's single "title-column" grid cell. */
    .datarow__body[b-hyd7p2kgwf] {
        display: contents;
    }

    /* Line 1, left: WO number. */
    .datarow__id[b-hyd7p2kgwf] {
        grid-area: id;
    }

    /* Line 1, right: description: fills the rest of row 1 and keeps its existing ellipsis
       truncation (min-width:0 lets a grid item shrink below its content size, which
       overflow/ellipsis needs to kick in). */
    .datarow__title[b-hyd7p2kgwf] {
        grid-area: title;
        min-width: 0;
    }

    /* Line 2, left: asset id + name, spanning most of row 2's width; truncates with an
       ellipsis instead of wrapping onto a third line if the asset name is long. */
    .meta[b-hyd7p2kgwf] {
        grid-area: meta;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Line 2, right: priority/status pills, right-aligned in their own column so they don't
       get squeezed by (or squeeze) the asset text next to them. */
    .datarow__pills[b-hyd7p2kgwf] {
        grid-area: pills;
        justify-self: end;
    }
}
/* /Components/Pages/DataModel.razor.rz.scp.css */
/* DataModel.razor scoped styles */

.dm-title[b-2mhon0xgfc] {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 4px;
}

.dm-subtitle[b-2mhon0xgfc] {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 16px;
}

.dm-scaffold[b-2mhon0xgfc] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.8rem;
    background: #0f2137;
    color: #a8d8ea;
    padding: 14px 18px;
    border-radius: var(--r-lg);
    margin: 0 0 28px;
    overflow-x: auto;
    white-space: nowrap;
}

/* Grouped table grid */
.dm-groups[b-2mhon0xgfc] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
    /* Size each group to its own tables. The default (stretch) made every group in a row as
       tall as the longest one, leaving ~6,600px of empty card under Inventory and Lookups. */
    align-items: start;
}

.dm-group[b-2mhon0xgfc] {
    background: #fff;
    border-radius: var(--r-xl);
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.dm-group-title[b-2mhon0xgfc] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a2e;
    padding: 2px 0 12px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 6px;
}

.dm-group-title[b-2mhon0xgfc]::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-primary, #1976d2);
    flex-shrink: 0;
}

/* Table cards */
.dm-table-card[b-2mhon0xgfc] {
    background: #f8f9fb;
    border-radius: var(--r-lg);
    padding: 10px 12px;
    margin-top: 10px;
    transition: box-shadow 0.15s ease;
}

.dm-table-card:hover[b-2mhon0xgfc] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.dm-table-head[b-2mhon0xgfc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.dm-table-name[b-2mhon0xgfc] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1a1a2e;
    font-family: 'Consolas', 'Courier New', monospace;
}

.dm-badge[b-2mhon0xgfc] {
    font-size: 0.72rem;
    background: #e8eaed;
    color: #5f6368;
    padding: 2px 8px;
    border-radius: var(--r-tag);
    font-family: 'Consolas', 'Courier New', monospace;
}

/* Column chips */
.dm-cols[b-2mhon0xgfc] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.dm-col[b-2mhon0xgfc] {
    font-size: 0.75rem;
    font-family: 'Consolas', 'Courier New', monospace;
    background: #eef0f4;
    color: #4a5568;
    padding: 2px 7px;
    border-radius: var(--r-tag);
    border: 1px solid #e2e5ea;
}

.dm-col.pk[b-2mhon0xgfc] {
    background: #e3f0ff;
    color: #1565c0;
    border-color: #b8d8f7;
    font-weight: 600;
}

/* Foreign keys */
.dm-fk[b-2mhon0xgfc] {
    background: #fff;
    border-radius: var(--r-xl);
    padding: 16px 20px;
    margin-top: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.dm-fk-row[b-2mhon0xgfc] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.82rem;
    color: #4a5568;
    padding: 3px 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.dm-fk-row:hover[b-2mhon0xgfc] {
    color: #1976d2;
}

.dm-fk-from[b-2mhon0xgfc] {
    font-weight: 500;
}

.dm-fk-to[b-2mhon0xgfc] {
    color: #1976d2;
    font-weight: 500;
}
/* /Components/Pages/Inventory.razor.rz.scp.css */
/* P6-01: hint line under the ActionBar explaining what "Classify inventory" does before it's clicked. */
.inv-hint[b-lcoktoub25] {
    font-size: 13px;
    color: var(--ink-3);
    /* Pulled up under the ActionBar it explains, against the column's 18px gap. */
    margin: -10px 0 0;
}

.inv-stock[b-lcoktoub25] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}

.inv-bar[b-lcoktoub25] {
    height: 8px;
    background: #eaeef6;
    border-radius: 999px;
    overflow: hidden;
}

.inv-bar-fill[b-lcoktoub25] {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.inv-bar-fill.success[b-lcoktoub25] {
    background: var(--success);
}

.inv-bar-fill.warning[b-lcoktoub25] {
    background: #e6a700;
}

.inv-bar-fill.danger[b-lcoktoub25] {
    background: #e05353;
}

.inv-scale[b-lcoktoub25] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10px;
    color: var(--text-meta);
}

/* Thumbnail + description (with its critical dot / Obsolete pill) side by side. */
.inv-desc-wrap[b-lcoktoub25] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
/* /Components/Pages/InventoryDetail.razor.rz.scp.css */
/* Branded photo-upload button for the Photos card. Mirrors AttachmentPanel.razor.css: the real
   <input type=file> (rendered by InputFile as .ap-input) is hidden and the styled label opens the
   file picker. Scoped CSS is per-component, so these rules must live here even though they duplicate
   AttachmentPanel's  -  they can't cross the component-scope boundary. */
.ap-upload[b-q4i6kpfvdb] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--r-sm);
    cursor: pointer;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-bright) 30%, transparent);
    transition: background 0.15s, box-shadow 0.15s;
}
/* Hover darkens the customer's brand by 15% (the base fill is already --brand, so the old
   literal #047ab5 hover would have been the same colour). color-mix keeps it per-customer. */
.ap-upload:hover[b-q4i6kpfvdb] {
    background: color-mix(in srgb, var(--brand-deep) 85%, #000);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-bright) 40%, transparent);
}
.ap-upload-icon[b-q4i6kpfvdb] { font-size: 16px; line-height: 1; font-weight: 400; }

/* Hide the native file input but keep it operable via the wrapping label. InputFile renders its own
   <input>, which does NOT receive this component's scope attribute, so `::deep` is required to match
   the rendered input (same reasoning as AttachmentPanel.razor.css). */
.ap-upload[b-q4i6kpfvdb]  input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.ap-hint[b-q4i6kpfvdb] {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    color: var(--ink-4);
    vertical-align: middle;
}
/* /Components/Pages/Preventive.razor.rz.scp.css */
.pm-title[b-4w75xrdiw6] {
    font-size: 34px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
}

.pm-subtitle[b-4w75xrdiw6] {
    font-size: 15px;
    color: var(--ink-3);
    margin: 0 0 24px;
}

/* P5-12: hint line under the header's two "Create due work orders" buttons, explaining what
   "due" means for each trigger type in plain language. */
.pm-gen-hint[b-4w75xrdiw6] {
    font-size: 12.5px;
    color: var(--ink-4);
    /* Pulled up under the ActionBar it explains; the column's 18px gap handles the space below. */
    margin: -10px 0 0;
}

/* P5-14: PM id/name cell. The id keeps the mono id-style font used elsewhere in the app for
   record ids; the name is deliberately NOT mono -- it used to inherit the anchor's monospace
   font by accident (the whole link shared one inline style), which made a plain English PM
   title read like a code/id string. */
.pm-name-link[b-4w75xrdiw6] {
    text-decoration: none;
    color: var(--brand);
}
.pm-id[b-4w75xrdiw6] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11.5px;
}
.pm-name[b-4w75xrdiw6] {
    font-weight: 600;
    color: var(--ink);
}
/* P5-15/P5-R7: shown only when a PM covers more than one asset, so two rows for the same PM_ID
   read as "one PM, two assets" instead of looking like duplicated data. */
.pm-asset-count[b-4w75xrdiw6] {
    font-size: 11.5px;
    color: var(--ink-4);
    margin-left: 6px;
}

/* ── New PM task form ─────────────────────────────────────────────
   Self-contained card + fields. The page previously borrowed req-*
   classes scoped to the Requests page, so the inputs rendered with
   bare browser defaults; these pm-form-* rules style it properly. */
.pm-form-card[b-4w75xrdiw6] {
    background: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
    border: 1px solid #e3eaf2;
    border-radius: var(--r-xl);
    padding: 20px 22px;
    box-shadow: 0 1px 2px rgba(14, 23, 38, 0.04);
}

/* Header: square brand icon + kicker + subtitle. */
.pm-form-head[b-4w75xrdiw6] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}
.pm-form-icon[b-4w75xrdiw6] {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--brand-bright);
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-bright) 35%, transparent);
}
.pm-form-kicker[b-4w75xrdiw6] {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
}
.pm-form-sub[b-4w75xrdiw6] {
    font-size: 12.5px;
    color: var(--ink-4);
    margin-top: 2px;
}

/* Responsive field row: fields flow and wrap, button sticks to the end. */
.pm-form-grid[b-4w75xrdiw6] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-end;
}
.pm-field[b-4w75xrdiw6] {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}
.pm-field--sm[b-4w75xrdiw6] { min-width: 120px; max-width: 150px; }
/* A date input needs room for "mm/dd/yyyy" plus the calendar glyph. */
.pm-field--date[b-4w75xrdiw6] { min-width: 160px; max-width: 170px; }
.pm-field--grow[b-4w75xrdiw6] { flex: 1; min-width: 200px; }

.pm-label[b-4w75xrdiw6] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 6px;
}

.pm-input[b-4w75xrdiw6] {
    width: 100%;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 0 12px;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.pm-input[b-4w75xrdiw6]::placeholder { color: #aab3c0; }
.pm-input:hover[b-4w75xrdiw6] { border-color: #b9c5d6; }
.pm-input:focus[b-4w75xrdiw6] {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--focus-halo);
}

/* Select gets a chevron and room for it. */
.pm-select[b-4w75xrdiw6] {
    appearance: none;
    padding-right: 32px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a6878' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Primary action: prominent, with disabled + hover states. */
.pm-submit[b-4w75xrdiw6] {
    height: 40px;
    padding: 0 22px;
    background: var(--brand);
    color: #fff;
    border: none;
    border-radius: var(--r-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-bright) 30%, transparent);
    transition: background 0.15s, box-shadow 0.15s;
}
/* Hover darkens the customer's brand by 15% (the base fill is already --brand, so the old
   literal #047ab5 hover would have been the same colour). color-mix keeps it per-customer. */
.pm-submit:hover:not(:disabled)[b-4w75xrdiw6] {
    background: color-mix(in srgb, var(--brand-deep) 85%, #000);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-bright) 40%, transparent);
}
.pm-submit:disabled[b-4w75xrdiw6] {
    background: #c3ced9;
    box-shadow: none;
    cursor: not-allowed;
}

/* ── Table toolbar: tabs / search / filter / sort / pager ─────────
   Mirrors the Work Orders + Inventory table controls. */
/* No bottom margin: the content column's 18px gap spaces the chips from the card. */
.pm-tabs[b-4w75xrdiw6] { display: flex; flex-wrap: wrap; gap: 8px; }
.pm-tab[b-4w75xrdiw6] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--ink-3);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-tag);
    padding: 6px 16px;
    cursor: pointer;
    transition: all 0.15s;
}
.pm-tab:hover[b-4w75xrdiw6] { color: var(--ink); border-color: #b0bdd0; }
.pm-tab.active[b-4w75xrdiw6] { color: #fff; background: var(--brand); border-color: var(--brand); }

/* /Components/Pages/PreventiveDetail.razor.rz.scp.css */
/* Copied from Preventive.razor.css: scoped CSS only styles the component that owns it, so
   this page's use of .pm-field/.pm-label was rendering unstyled. */
.pm-field[b-4oaxcijl6o] {
    display: flex;
    flex-direction: column;
    min-width: 150px;
}

.pm-field--grow[b-4oaxcijl6o] { flex: 1; min-width: 200px; }

.pm-label[b-4oaxcijl6o] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    margin-bottom: 6px;
}
/* /Components/Pages/Purchasing/Purchasing.razor.rz.scp.css */
/* Page head: title block on the left, spend figure + "New PO" on the right.
   gap + flex-wrap keep the two groups from colliding (and the button from being
   pushed off-screen) once the title and the spend figure no longer fit on one row. */
.purch-head[b-7be2jb0ryq]{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:18px}
.purch-head-title[b-7be2jb0ryq]{min-width:0}
.purch-head-actions[b-7be2jb0ryq]{display:flex;align-items:center;gap:16px}
.purch-title[b-7be2jb0ryq]{font-family:'Helvetica LT','Helvetica Neue',sans-serif;font-weight:700;font-size:34px;
  letter-spacing:-0.03em;color:var(--ink);margin:0}
.purch-subtitle[b-7be2jb0ryq]{font-size:15px;color:var(--ink-3);margin:6px 0 0}
.purch-spend[b-7be2jb0ryq]{display:flex;flex-direction:column;align-items:flex-end}
.purch-spend-label[b-7be2jb0ryq]{font-family:var(--f-body);font-size:12px;font-weight:600;color:var(--text-meta)}
.purch-spend-val[b-7be2jb0ryq]{font-family:'Helvetica LT','Helvetica Neue',sans-serif;font-weight:700;font-size:30px;
  letter-spacing:-0.03em;color:var(--ink)}

/* Mobile (matches the 700px breakpoint used on the sibling Suppliers page): stack the
   spend figure and the action button in a full-width row under the title, left-aligned,
   so nothing overlaps the h1 or clips past the right edge at ~390px wide. */
@media (max-width:700px){
  .purch-head[b-7be2jb0ryq]{flex-direction:column;align-items:stretch;gap:12px}
  .purch-title[b-7be2jb0ryq]{font-size:26px}
  .purch-subtitle[b-7be2jb0ryq]{font-size:14px}
  .purch-head-actions[b-7be2jb0ryq]{width:100%;justify-content:space-between;gap:12px}
  /* Left-align the spend block once it sits under the title rather than at the far right. */
  .purch-spend[b-7be2jb0ryq]{align-items:flex-start}
  .purch-spend-val[b-7be2jb0ryq]{font-size:22px}
}
/* /Components/Pages/Purchasing/Suppliers.razor.rz.scp.css */
.ven-title[b-0p0uluev5x] {
    font-size: 34px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
}

.ven-subtitle[b-0p0uluev5x] {
    font-size: 15px;
    color: var(--ink-3);
    margin: 0 0 24px;
}

/* Needs-review KPI cell (P2-08): the StatCard plus its "Show them"/"Show all" filter toggle,
   stacked so the button sits directly under the count it filters. align-self keeps the Btn from
   stretching to the grid cell's full width. Inside the StatStrip this cell is the tile, so it
   carries the tile's white fill and bottom padding; the StatCard in it stretches to fill. */
.ven-kpi-review[b-0p0uluev5x] {
    display: flex;
    flex-direction: column;
    background: var(--paper);
    padding-bottom: 18px;
}
.ven-kpi-review[b-0p0uluev5x]  .statcard {
    flex: 1;
}

/* Needs-review toggle (final-review fix wave, finding U1): <Btn> is a CHILD COMPONENT, so its
   rendered <button class="r360-btn"> carries Btn.razor's OWN scope attribute, not Suppliers's --
   a plain ".ven-kpi-review .r360-btn" rule here compiles to
   ".ven-kpi-review .r360-btn[b-<suppliers's-id>]", which can never match an element stamped with
   Btn's scope id instead, so both this align-self and the intended 44px hit area silently never
   applied (measured 36px tall / 259px wide live -- same scoped-CSS problem Task 13 hit on the
   Scheduler's "Show more" button; see that page's .sch-backlog ::deep .r360-btn rule below).
   "::deep" tells the compiler to scope only the ANCESTOR (.ven-kpi-review) and leave the
   descendant selector unscoped, which is Blazor's supported way to reach into a child
   component's markup. Btn.razor.css's own .r360-btn rule sets height: 36px !important, which is
   below this phase's 44x44px minimum hit-area rule for any non-navigation action control --
   overridden here (not in the shared Btn component, since other Btn call sites elsewhere in the
   app are out of this task's scope) with a higher-specificity, scoped-to-this-page rule. */
.ven-kpi-review[b-0p0uluev5x]  .r360-btn {
    align-self: flex-start;
    /* Lines the button up with the tile's 22px text inset. */
    margin-left: 22px;
    height: var(--hit-min) !important;
    min-height: var(--hit-min) !important;
    min-width: var(--hit-min) !important;
}

/* Card grid inside the flush list card: the padding puts the cards back off the card's edges. */
.ven-grid[b-0p0uluev5x] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 16px;
}

@media (max-width: 1100px) {
    .ven-grid[b-0p0uluev5x] { grid-template-columns: 1fr; }
}

.ven-card[b-0p0uluev5x] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 20px;
}

.ven-card-head[b-0p0uluev5x] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
}

.ven-score[b-0p0uluev5x] {
    width: 52px;
    height: 52px;
    border-radius: var(--r-sm);
    background: var(--brand-ink);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.ven-name[b-0p0uluev5x] {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    margin: 0 0 6px;
}

.ven-subtitle[b-0p0uluev5x] {
    font-size: 12px;
    color: var(--ink-4);
    margin-bottom: 14px;
}

.ven-bar-block[b-0p0uluev5x] {
    margin-bottom: 14px;
}

.ven-bar-label[b-0p0uluev5x] {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.ven-bar[b-0p0uluev5x] {
    height: 8px;
    background: #eaeef6;
    border-radius: 999px;
    overflow: hidden;
}

.ven-bar-fill[b-0p0uluev5x] {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s;
}

.ven-bar-fill.good[b-0p0uluev5x] {
    background: var(--success);
}

.ven-bar-fill.bad[b-0p0uluev5x] {
    background: #e05353;
}

.ven-stats[b-0p0uluev5x] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.ven-stat[b-0p0uluev5x] {
    text-align: center;
    padding: 8px 4px;
    background: #f8f9fb;
    border-radius: var(--r-lg);
}

.ven-stat-label[b-0p0uluev5x] {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-4);
    margin-bottom: 4px;
}

.ven-stat-val[b-0p0uluev5x] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

/* Card subtitle (renamed from .ven-subtitle to avoid clashing with the page subtitle). */
.ven-card-sub[b-0p0uluev5x] { font-size: 12px; color: var(--ink-4); margin-bottom: 14px; }

/* Cards / Table segmented toggle. */
.ven-viewtoggle[b-0p0uluev5x] { display: inline-flex; background: #eef1f6; border-radius: var(--r-sm); padding: 3px; }
.ven-toggle-btn[b-0p0uluev5x] {
    border: none; background: transparent; padding: 6px 14px; font-size: 13px; font-weight: 600;
    color: var(--ink-3); border-radius: var(--r-xs); cursor: pointer; transition: background .15s, color .15s;
}
.ven-toggle-btn.active[b-0p0uluev5x] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(14,23,38,.1); }

/* ── Add-vendor inline form ──────────────────────────────────────────────── */
.ven-addform[b-0p0uluev5x] { padding: 18px; }
.ven-addform-row[b-0p0uluev5x] { display: flex; gap: 14px; align-items: flex-end; }
.ven-addform-field[b-0p0uluev5x] { flex: 1; }
.ven-addform-field .req-label[b-0p0uluev5x] { margin-top: 0; }
/* Override the global .req-submit full-width/top-margin for this inline button. */
.ven-addform-submit[b-0p0uluev5x] { width: auto; margin-top: 0; padding: 10px 20px; white-space: nowrap; }

/* ── Table view: shared .r360-table styling; only these extras are page-specific ── */
.ven-table th.num[b-0p0uluev5x], .ven-table td.num[b-0p0uluev5x] { text-align: right; }
.ven-td-name[b-0p0uluev5x] { font-weight: 700; }

/* ── Empty state: inside the flush card, same look as the shared .r360-empty cell ── */
.ven-empty[b-0p0uluev5x] { padding: 24px; text-align: center; color: var(--ink-4); }

@media (max-width: 700px) {
    .ven-addform-row[b-0p0uluev5x] { flex-direction: column; align-items: stretch; }
    .ven-addform-submit[b-0p0uluev5x] { width: 100%; }
}

/* Shown on a vendor card when there are no received POs yet (no real metrics to display). */
.ven-nodata[b-0p0uluev5x] {
    font-size: 12.5px; color: var(--ink-4); background: #f8f9fb; border: 1px dashed #e3eaf2;
    border-radius: var(--r-lg); padding: 12px 14px; text-align: center;
}

/* Late-outstanding warning (card view): a PO past its Expected_Date that still hasn't been
   received. Sits above the on-time bar so it reads as an immediate flag, not a buried stat. */
.ven-late-warning[b-0p0uluev5x] { margin-bottom: 10px; }

/* Monthly on-time% trend strip (card view): a compact "Jun 65% · Jul 92%" list built from
   VendorPerformanceSnapshot rows, most-recent month last so it reads left-to-right as a timeline. */
.ven-trend[b-0p0uluev5x] {
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed #e3eaf2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: var(--ink-3);
}
.ven-trend-label[b-0p0uluev5x] {
    font-size: 12px;
    font-weight: 600; color: var(--ink-4);
    margin-right: 2px;
}
.ven-trend-point[b-0p0uluev5x] { white-space: nowrap; }
.ven-trend-sep[b-0p0uluev5x] { color: #c7cfda; }

/* Table view: trend rendered inline in its own column, same compact dot-separated format. */
.ven-td-trend[b-0p0uluev5x] {
    font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--ink-3);
    white-space: nowrap;
}

/* ── D-C7: deactivate/delete (Show inactive toggle, action buttons, inactive dimming) ────── */

.ven-card-inactive[b-0p0uluev5x] { opacity: .6; }
.ven-row-inactive[b-0p0uluev5x] { opacity: .6; }

.ven-card-actions[b-0p0uluev5x] {
    display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed #e3eaf2;
}
.ven-td-actions[b-0p0uluev5x] { white-space: nowrap; }

.ven-action-btn[b-0p0uluev5x] {
    border: 1px solid var(--line); background: #fff; border-radius: var(--r-sm); padding: 6px 12px;
    font-size: 12px; font-weight: 600; color: var(--ink-3); cursor: pointer; transition: background .15s;
    /* Phase 6 P6-21: hand-styled action control minimum 44px hit area (CLAUDE.md button
       convention) -- the visible border above already existed, but height did not. */
    min-height: var(--hit-min); display: inline-flex; align-items: center; justify-content: center;
}

/* Phase 6 P6-20: combined Contact cell (name/email/phone stacked; address moved to a tooltip)
   replacing the four separate name/email/phone/address columns the table used to render. A phone
   number must not wrap mid-string in the narrower column this cell now shares with name+email. */
.ven-td-contact[b-0p0uluev5x] { min-width: 180px; }
.ven-phone[b-0p0uluev5x] { white-space: nowrap; }
.ven-action-btn:hover[b-0p0uluev5x] { background: #f5f9ff; }
.ven-action-btn.ven-action-danger[b-0p0uluev5x] { color: var(--danger); border-color: #f0d3ce; }
.ven-action-btn.ven-action-danger:hover[b-0p0uluev5x] { background: #fdf2f0; }
/* /Components/Pages/RCADetail.razor.rz.scp.css */
/* Why-Why Analysis layout on RCADetail: each why level is a question line with its answer
   indented beneath it, mirroring how teams write a why chain on paper. */

.rca-hint[b-593dxxaj9i] {
    font-size: 12px;
    color: var(--text-help);
    margin: 6px 0 10px;
}

.rca-why[b-593dxxaj9i] {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 11px;
    margin-top: 8px;
}

.rca-why-q[b-593dxxaj9i] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rca-why-question[b-593dxxaj9i] {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.rca-why-a[b-593dxxaj9i] {
    font-size: 13px;
    color: var(--ink);
    margin: 6px 0 0 24px;
}

.rca-why-label[b-593dxxaj9i] {
    font-weight: 600;
    color: var(--text-label);
}

.rca-why-add[b-593dxxaj9i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 12px;
    align-items: stretch;
}

.rca-why-add .req-submit[b-593dxxaj9i] {
    align-self: flex-start;
}

/* A why in edit mode: question and answer inputs stacked, Save/Cancel beneath. */
.rca-why-edit[b-593dxxaj9i] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rca-edit-actions[b-593dxxaj9i] {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
/* /Components/Pages/Reliability.razor.rz.scp.css */
.rel-title[b-zmdtpm9p52] {
    font-size: 34px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
}

.rel-subtitle[b-zmdtpm9p52] {
    font-size: 15px;
    color: var(--ink-3);
    margin: 0 0 24px;
}

/* ── KPI cards ───────────────────────────────────────────────── */
.rel-kpis[b-zmdtpm9p52] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

.rel-stat[b-zmdtpm9p52] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 118px;
}

.rel-stat-eyebrow[b-zmdtpm9p52] {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
}

.rel-stat-val[b-zmdtpm9p52] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: auto;
}

.rel-stat-num[b-zmdtpm9p52] {
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ink);
}

.rel-stat-unit[b-zmdtpm9p52] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--ink-4);
}

.rel-stat-sub[b-zmdtpm9p52] {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-3);
}

/* ── Three-card analytics grid ───────────────────────────────── */
.rel-grid[b-zmdtpm9p52] {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 18px;
    align-items: start;
}

@media (max-width: 1100px) {
    .rel-kpis[b-zmdtpm9p52] { grid-template-columns: repeat(2, 1fr); }
    .rel-grid[b-zmdtpm9p52] { grid-template-columns: 1fr; }
}

.rel-card[b-zmdtpm9p52] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
}

.rel-pareto[b-zmdtpm9p52], .rel-failcodes[b-zmdtpm9p52], .rel-trend[b-zmdtpm9p52] {
    padding: 22px;
}

.rel-failcodes[b-zmdtpm9p52] {
    margin-top: 18px;
}

.rel-card-title[b-zmdtpm9p52] {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0;
}

.rel-card-sub[b-zmdtpm9p52] {
    font-size: 12.5px;
    color: var(--ink-4);
    margin-top: 2px;
}

.rel-card-sub--mb[b-zmdtpm9p52] {
    margin-top: 4px;
    margin-bottom: 16px;
}

.rel-card-head[b-zmdtpm9p52] {
    padding: 18px 22px 6px;
}

.rel-card-head--row[b-zmdtpm9p52] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    margin-bottom: 4px;
}

/* ── Bad actors table ────────────────────────────────────────── */
.rel-ba-row[b-zmdtpm9p52] {
    display: grid;
    grid-template-columns: 1.4fr 70px 90px 70px 90px;
    gap: 10px;
    align-items: center;
    padding: 13px 22px;
}

.rel-ba-head[b-zmdtpm9p52] {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    padding: 12px 22px;
}

.rel-ba-data[b-zmdtpm9p52] {
    border-top: 1px solid var(--line-soft);
}

.rel-num[b-zmdtpm9p52] { text-align: right; }

.rel-ba-asset[b-zmdtpm9p52] { min-width: 0; }

.rel-ba-id-line[b-zmdtpm9p52] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rel-ba-id[b-zmdtpm9p52] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12.5px;
    color: var(--brand-tile);
    font-weight: 600;
}

.rel-ba-name[b-zmdtpm9p52] {
    display: block;
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    margin-top: 2px;
}

.rel-ba-faults[b-zmdtpm9p52] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.rel-ba-dt[b-zmdtpm9p52] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--danger);
    font-weight: 600;
}

.rel-ba-mttr[b-zmdtpm9p52] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: var(--ink-3);
}

.rel-ba-avail[b-zmdtpm9p52] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    color: #2c3a4f;
    font-weight: 600;
}

/* ── Pareto / failure bars ───────────────────────────────────── */
.rel-bar-block[b-zmdtpm9p52] { margin-bottom: 14px; }
.rel-failcodes .rel-bar-block[b-zmdtpm9p52] { margin-bottom: 13px; }

.rel-bar-label[b-zmdtpm9p52] {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 5px;
}

.rel-bar-name[b-zmdtpm9p52] { color: #2c3a4f; font-weight: 500; }

.rel-bar-meta[b-zmdtpm9p52] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--ink-4);
}

.rel-bar-count[b-zmdtpm9p52] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    color: var(--ink);
    font-weight: 600;
}

.rel-bar-track[b-zmdtpm9p52] {
    height: 10px;
    background: #eaeef6;
    border-radius: 999px;
    overflow: hidden;
}

.rel-bar-fill[b-zmdtpm9p52] {
    display: block;
    height: 100%;
    border-radius: 999px;
}

.rel-bar-fill--dark[b-zmdtpm9p52] { background: var(--brand-ink); }
.rel-bar-fill--red[b-zmdtpm9p52] { background: var(--danger); }

.rel-fc-coded[b-zmdtpm9p52] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--ink-4);
}

.rel-fc-warn[b-zmdtpm9p52] {
    font-size: 12.5px;
    color: #b27300;
    margin-top: 10px;
    background: #fffaf0;
    border-radius: var(--r-lg);
    padding: 9px 12px;
}
/* /Components/Pages/ReportPage.razor.rz.scp.css */
.report-crumb[b-oxdaguklxk] { font-size: 12px; color: var(--ink-4); margin-bottom: 6px; }
.report-crumb a[b-oxdaguklxk] { color: var(--ink-4); text-decoration: none; }
.report-crumb a:hover[b-oxdaguklxk] { color: var(--brand); }

.report-head[b-oxdaguklxk] { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.report-head__title[b-oxdaguklxk] { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0; }
.report-head__question[b-oxdaguklxk] { font-size: 13.5px; color: #5a6a7e; margin: 3px 0 0; }
.report-head__actions[b-oxdaguklxk] { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }

.report-switch[b-oxdaguklxk], .report-print[b-oxdaguklxk] {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: var(--r-sm);
    padding: 7px 12px;
    font-size: 13px;
    color: var(--ink);
    cursor: pointer;
}
.report-switch:hover[b-oxdaguklxk], .report-print:hover[b-oxdaguklxk] { border-color: var(--brand-bright); }

.report-filters[b-oxdaguklxk] { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 16px 0 4px; }
.report-filters__label[b-oxdaguklxk] { font-size: 13px; font-weight: 600; color: var(--ink-4); }
.report-filters__select[b-oxdaguklxk] { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 12px; font-size: 13px; background: #fff; color: var(--ink); }
.report-filters__date[b-oxdaguklxk] { display: flex; align-items: center; gap: 10px; }

.report-body[b-oxdaguklxk] { margin-top: 14px; }

.report-missing[b-oxdaguklxk] { padding: 60px 24px; text-align: center; color: #5a6a7e; }
.report-missing a[b-oxdaguklxk] { color: var(--brand); text-decoration: none; font-weight: 600; }

/* Phone: header stacks and the actions sit under the title rather than squeezing it. */
@media (max-width: 680px) {
    .report-head[b-oxdaguklxk] { flex-direction: column; }
    .report-head__title[b-oxdaguklxk] { font-size: 22px; }
    .report-head__actions[b-oxdaguklxk] { width: 100%; }
    .report-switch[b-oxdaguklxk] { flex: 1; }
}
/* /Components/Pages/ReportsHub.razor.rz.scp.css */
/* Hub page shell. Scoped CSS only reaches markup this file renders -- the cards style themselves
   from ReportCard.razor.css. */

.hub-scope[b-lpv0lqcqfy] { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hub-scope__label[b-lpv0lqcqfy] { font-size: 13px; font-weight: 600; color: var(--ink-3, #8b97a8); }
.hub-scope__select[b-lpv0lqcqfy] {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 7px 12px;
    font-size: 13px;
    background: var(--paper, #fff);
    color: var(--ink);
}

/* Briefing strip: four tiles, each a link into the report behind the number. */
.hub-kpis[b-lpv0lqcqfy] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 26px; }

.hub-kpi[b-lpv0lqcqfy] {
    display: block;
    text-decoration: none;
    background: var(--paper, #fff);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 16px 18px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.hub-kpi:hover[b-lpv0lqcqfy] { border-color: var(--brand-bright); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-ink) 8%, transparent); }
.hub-kpi:focus-visible[b-lpv0lqcqfy] { outline: 2px solid var(--brand); outline-offset: 2px; }

.hub-kpi__label[b-lpv0lqcqfy] { display: block; font-size: 12px; font-weight: 600; color: var(--ink-4); }
.hub-kpi__value[b-lpv0lqcqfy] { display: block; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--brand-ink); margin: 2px 0; }
.hub-kpi__unit[b-lpv0lqcqfy] { font-size: 14px; font-weight: 600; color: var(--ink-4); margin-left: 4px; }
.hub-kpi__sub[b-lpv0lqcqfy] { display: block; font-size: 11.5px; color: var(--ink-4); min-height: 14px; }

.hub-section[b-lpv0lqcqfy] { font-size: 12px; font-weight: 600; color: var(--ink-4); margin: 26px 0 10px; }
.hub-group[b-lpv0lqcqfy] { margin-bottom: 22px; }
.hub-group__heading[b-lpv0lqcqfy] { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 8px; }

.hub-grid[b-lpv0lqcqfy] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* Tablet: tiles two-up, cards two-up. */
@media (max-width: 1100px) {
    .hub-kpis[b-lpv0lqcqfy] { grid-template-columns: repeat(2, 1fr); }
    .hub-grid[b-lpv0lqcqfy] { grid-template-columns: repeat(2, 1fr); }
}

/* Phone: everything stacks. */
@media (max-width: 680px) {
    .hub-kpis[b-lpv0lqcqfy] { grid-template-columns: 1fr; }
    .hub-grid[b-lpv0lqcqfy] { grid-template-columns: 1fr; }
}

/* Custom report cards: copied from ReportCard.razor.css's .report-card rules rather than shared,
   because scoped CSS only reaches markup the owning component renders and these anchors are
   rendered by this page, not by <ReportCard>. Keep the two in sync by eye if either changes. */
.custom-report-card[b-lpv0lqcqfy] {
    display: block;
    text-decoration: none;
    background: var(--paper, #fff);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 18px;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.custom-report-card:hover[b-lpv0lqcqfy] {
    transform: translateY(-2px);
    border-color: var(--brand-bright);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-ink) 8%, transparent);
}

.custom-report-card:focus-visible[b-lpv0lqcqfy] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.custom-report-card__title[b-lpv0lqcqfy] { font-weight: 700; font-size: 15.5px; color: var(--ink); margin-bottom: 4px; }
.custom-report-card__question[b-lpv0lqcqfy] { font-size: 12.5px; color: var(--ink-4); line-height: 1.4; }
/* /Components/Pages/Reports/EmailLogReport.razor.rz.scp.css */
/* UX 2026-09-23 P5-16: the filter bar's "Clear" button used the global ".elf-clear" class
   defined in wwwroot/css/reports.css. That file IS actually loaded globally (unlike a scoped
   .razor.css) so the button was never literally unstyled in the browser -- but the button-
   convention guard test only checks app.css and this file's own .razor.css, since a component
   file referencing a class from an arbitrary third global stylesheet is exactly the kind of
   drift (see PreventiveDetail's "pm-gen") the test exists to catch centrally. Rather than special-
   case reports.css in the test, the rule is copied here so this file is self-contained and the
   guard passes without weakening what it checks. Bumped the height slightly over the
   reports.css original (38px) to meet the 44x44px minimum hit-area convention. */
.elf-clear[b-wmk51qtyuk] {
    height: var(--hit-min);
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: #fff;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}

.elf-clear:hover[b-wmk51qtyuk] {
    border-color: var(--brand);
    color: var(--brand);
    background: #f7fbff;
}
/* /Components/Pages/Requests.razor.rz.scp.css */
/* Form primitives (.req-title/.req-subtitle/.req-kicker/.req-label/.req-input/.req-textarea/
   .req-submit) now live GLOBALLY in app.css so every page shares them. This file keeps only
   the layout that's specific to the Requests page (two-column grid, dark explainer, history). */
.req-cols[b-izs1bcyd8n]{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}
.req-form[b-izs1bcyd8n]{padding:22px}
/* UX 2026-09-23 P4-18: bottom Submit copy of the ActionBar's top button, so a long form on a
   phone doesn't force a scroll back to the top bar once the last field is filled. */
/* ::deep because the button element belongs to the Btn component, not this page, so a plain
   scoped selector never matched it; .req-form is this page's own element, so the rule stays local. */
.req-form[b-izs1bcyd8n]  .req-submit-bottom{margin-top:18px;width:100%}
.req-explainer[b-izs1bcyd8n]{background:var(--ink);border-radius:var(--r-xl);padding:22px;color:#fff}
.req-exp-kicker[b-izs1bcyd8n]{font-family:var(--f-body);font-size:12px;font-weight:600;
  color:rgba(255,255,255,.55);margin-bottom:14px}
.req-exp-step[b-izs1bcyd8n]{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.85);margin-bottom:12px}
.req-exp-num[b-izs1bcyd8n]{flex-shrink:0;width:20px;height:20px;border-radius:var(--r-tag);background:var(--brand);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:1px}
@media (max-width:900px){.req-cols[b-izs1bcyd8n]{grid-template-columns:1fr}}

/* "Your requests" history table — lets a submitter confirm and track their requests. */
/* No top margin: the content column's 18px gap spaces it from the form above. */
.req-history[b-izs1bcyd8n]{margin-top:0}
.req-hist-head[b-izs1bcyd8n]{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
.req-hist-title[b-izs1bcyd8n]{font-family:'Helvetica LT','Helvetica Neue',sans-serif;font-weight:700;font-size:20px;
  letter-spacing:-0.02em;color:var(--ink);margin:0}
.req-hist-count[b-izs1bcyd8n]{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-meta)}
.req-empty[b-izs1bcyd8n]{border:1px dashed var(--line);border-radius:var(--r-lg);padding:18px;font-size:13px;color:#7a8696;
  background:#fbfdff;text-align:center}

/* /Components/Pages/Scan.razor.rz.scp.css */
.scan-video[b-zpnjgmg7m0]{width:100%;border-radius:var(--r-lg);margin-top:10px;background:#000}
.hidden[b-zpnjgmg7m0]{display:none}
/* /Components/Pages/Scheduler.razor.rz.scp.css */
.sch-title[b-nski6xuh2s] {
    font-size: 34px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
}

.sch-subtitle[b-nski6xuh2s] {
    font-size: 15px;
    color: var(--ink-3);
    margin: 0 0 18px;
}

.sch-weeknav[b-nski6xuh2s] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

/* Push "Assign range…" to the right of the Prev/Today/Next cluster. ::deep is required here:
   Btn.razor is a separate component, so its rendered <button> does NOT carry this page's scoped
   CSS attribute — a plain (non-::deep) selector would silently never match, per the project's
   documented "scoped CSS misses child MudComponents" gotcha. */
[b-nski6xuh2s] .sch-weeknav .r360-btn--primary {
    margin-left: auto;
}

.sch-legend[b-nski6xuh2s] {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.sch-legend-item[b-nski6xuh2s] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ink-3);
}

.sch-legend-swatch[b-nski6xuh2s] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: var(--r-xs);
}

.sch-crit[b-nski6xuh2s] { background: var(--pri-critical); }
.sch-high[b-nski6xuh2s] { background: #e6a700; }
.sch-med[b-nski6xuh2s] { background: var(--pri-medium); }
/* P2-15: Low priority never had a colour of its own -- the legend and cards both silently
   folded it into Medium. Green matches the "Low" tone used everywhere else (PillTone.Success). */
.sch-low[b-nski6xuh2s] { background: #0f9d58; }

.sch-grid-wrap[b-nski6xuh2s] {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: #fff;
    margin-bottom: 16px;
}

.sch-grid[b-nski6xuh2s] {
    display: grid;
    grid-template-columns: 160px repeat(7, 1fr);
    min-width: 900px;
}

/* 5-day modifier (Task 5, tablet responsive chassis): applied alongside .sch-grid when the
   weekend toggle is off. Weekend columns are removed from the DOM entirely (not just hidden),
   so the column-count/min-width here must match what's actually rendered or the grid would
   leave two empty tracks. Mirrors the existing sch-today/sch-today-col conditional-class
   pattern already used in this file rather than an inline computed style attribute. */
.sch-grid.sch-grid--5day[b-nski6xuh2s] {
    grid-template-columns: 160px repeat(5, 1fr);
    min-width: 700px;
}

.sch-corner[b-nski6xuh2s] {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    padding: 14px 16px;
    border-bottom: 1px solid var(--line-soft);
    background: #f8f9fb;
}

.sch-grid-header[b-nski6xuh2s] {
    display: contents;
}

.sch-col-head[b-nski6xuh2s] {
    text-align: center;
    padding: 14px 8px;
    border-bottom: 1px solid var(--line-soft);
    background: #f8f9fb;
    font-size: 12px;
}

.sch-col-head.sch-today[b-nski6xuh2s] {
    background: #e8f4fd;
    color: var(--brand);
    font-weight: 600;
}

.sch-col-day[b-nski6xuh2s] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-4);
    margin-bottom: 2px;
}

.sch-col-date[b-nski6xuh2s] {
    display: block;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}

.sch-today-col[b-nski6xuh2s] {
    background: #f0f8ff;
}

.sch-row[b-nski6xuh2s] {
    display: contents;
}

.sch-tech[b-nski6xuh2s] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
}

/* Sticky technician names (Task 5): when the grid is wider than the viewport (overflow-x:auto on
   .sch-grid-wrap already handles this), scroll it horizontally with the technician names pinned --
   otherwise you scroll right and can no longer see whose row it is. .sch-corner already carries
   its own opaque background (#f8f9fb, set above) so it is left alone here; .sch-tech had no
   background set before, so scrolled cards would show through underneath it -- this rule fixes
   that too, not just position. */
.sch-corner[b-nski6xuh2s],
.sch-tech[b-nski6xuh2s] {
    position: sticky;
    left: 0;
    z-index: 2;
}

.sch-tech[b-nski6xuh2s] {
    background: #fff;
}

.sch-avatar[b-nski6xuh2s] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #eaeef6;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex-shrink: 0;
}

.sch-tech-name[b-nski6xuh2s] {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sch-cell[b-nski6xuh2s] {
    min-height: 64px;
    border-right: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sch-wo[b-nski6xuh2s] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--r-sm);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

/* Multi-day visual cue (Task 27): small "day X of Y" pill on a card whose work order has more
   than one labor entry visible in the current week — signals at a glance that dragging just
   this one card only moves one day of a longer job. */
.sch-wo-badge[b-nski6xuh2s] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: var(--r-tag);
    background: rgba(14, 23, 38, 0.08);
    color: inherit;
    flex-shrink: 0;
}

/* Click/keyboard alternative to dragging a card to a new technician/day (WCAG 2.5.7). Sized to
   the 24x24 CSS px minimum target (WCAG 2.5.8) even inside the compact scheduler card. */
.sch-wo-reassign[b-nski6xuh2s] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: none;
    border-radius: var(--r-sm);
    background: rgba(14, 23, 38, 0.08);
    color: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
}

.sch-wo-reassign:hover[b-nski6xuh2s],
.sch-wo-reassign:focus-visible[b-nski6xuh2s] {
    background: rgba(14, 23, 38, 0.18);
}

.sch-wo.sch-crit[b-nski6xuh2s] {
    background: #fde8e8;
    color: var(--danger);
}

.sch-wo.sch-high[b-nski6xuh2s] {
    background: #fff8e1;
    color: #b8860b;
}

.sch-wo.sch-med[b-nski6xuh2s] {
    background: #e8f4fd;
    color: var(--brand-tile);
}

/* P2-15: Low priority card colour, copied from .sch-wo.sch-med's shape with the green accent
   (#0f9d58) that matches the .sch-low legend swatch above, so a Low-priority card is finally
   visually distinct from a Medium one instead of both rendering identically blue. */
.sch-wo.sch-low[b-nski6xuh2s] {
    background: #e7f6ee;
    color: #0f9d58;
}

/* Now a real <button> (was a bare <div @onclick>). The explicit resets below strip the browser's
   default button chrome (background, padding, font) so the circle still looks identical to the
   old div -- only border/width/height/color below were ever meant to be visible. */
.sch-empty-wo[b-nski6xuh2s] {
    position: relative;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px dashed var(--line);
    background: none;
    padding: 0;
    font: inherit;
    color: #b0bdd0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    margin: auto;
    transition: all 0.15s;
}

.sch-empty-wo:hover[b-nski6xuh2s] {
    border-color: var(--brand);
    color: var(--brand);
}

.sch-empty-wo:focus-visible[b-nski6xuh2s] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* The visible dot stays small; the TOUCHABLE area does not. 24px targets with many of them on
   screen means mis-taps, and a mis-tap here assigns work to the wrong technician on the wrong
   day -- a data-integrity problem, not just an ergonomic one. The ::before expands the hit area
   without changing the visual design. */
.sch-empty-wo[b-nski6xuh2s]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--hit-min);
    height: var(--hit-min);
    transform: translate(-50%, -50%);
}

/* Day-range toggle (5-day / 7-day). Placed near the week-nav row; styled as a small segmented
   control so it reads as a view option, not a primary action competing with Prev/Today/Next. */
.sch-dayrange[b-nski6xuh2s] {
    display: flex;
    gap: 2px;
    margin-left: 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    padding: 2px;
    background: #f8f9fb;
}

.sch-dayrange button[b-nski6xuh2s] {
    border: none;
    background: transparent;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
    border-radius: var(--r-xs);
    cursor: pointer;
    transition: all 0.15s;
}

.sch-dayrange button.is-active[b-nski6xuh2s] {
    background: #fff;
    color: var(--brand);
    box-shadow: 0 1px 2px rgba(14, 23, 38, 0.12);
}

.sch-dayrange button:hover:not(.is-active)[b-nski6xuh2s] {
    color: var(--ink);
}

/* First-empty-cell-of-the-week hint (Task 5): a small inline nudge next to the "+" control so a
   first-time user doesn't have to find the instruction in the page subtitle. Kept visually quiet
   -- same size/color family as .sch-col-day -- so it doesn't compete with the dot itself. */
.sch-hint[b-nski6xuh2s] {
    font-size: 10px;
    color: var(--ink-4);
    margin-top: 2px;
    text-align: center;
    line-height: 1.2;
}

.sch-backlog[b-nski6xuh2s] {
    margin-bottom: 24px;
}

.sch-backlog strong[b-nski6xuh2s] {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
}

/* "Showing 20 of 94" / "All 94 unscheduled" / "Backlog is empty" (UX 2026-09-23 P2-11) -- replaces
   the old bare @backlogTotal that sat next to the header with no explanation of what it counted
   against the five rows actually rendered below it. */
.sch-backlog-count[b-nski6xuh2s] {
    font-size: 12px;
    color: var(--ink-4);
    margin-left: 6px;
}

.sch-backlog-item[b-nski6xuh2s] {
    font-size: 13px;
    color: var(--ink);
    padding: 4px 0;
}

/* "Show more" (UX 2026-09-23 P2-11 fix round 1): <Btn> is a CHILD COMPONENT, so its rendered
   <button class="r360-btn"> carries Btn.razor's OWN scope attribute, not Scheduler's -- a plain
   ".sch-backlog .r360-btn" rule here compiles to ".sch-backlog .r360-btn[b-<scheduler's-id>]",
   which can never match an element stamped with Btn's scope id instead, so it silently never
   applied (proved via the compiled obj/ scoped-css bundle; see task-13-report.md fix round 1).
   "::deep" tells the compiler to scope only the ANCESTOR (.sch-backlog) and leave the descendant
   selector unscoped, which is Blazor's supported way to reach into a child component's markup.
   Btn.razor.css's own .r360-btn rule sets height: 36px !important, which is below this phase's
   44x44px minimum hit-area rule for any non-navigation action control -- overridden here (not in
   the shared Btn component, since other Btn call sites elsewhere in the app are out of this task's
   scope) with a higher-specificity, scoped-to-this-page rule. Compiled selector has three
   class/attribute-level components (.sch-backlog[scope] .r360-btn) vs Btn's own rule's two
   (.r360-btn[scope]), so this always wins regardless of !important/source-order tie-breaking. */
.sch-backlog[b-nski6xuh2s]  .r360-btn {
    height: var(--hit-min) !important;
    min-height: var(--hit-min) !important;
    min-width: var(--hit-min) !important;
    margin-top: 8px;
}

/* Backlog search + "showing N of M" hint inside the assign dialog. The dialog only ever holds one
   page of the backlog, so these two are how a planner reaches the rest of it. */
.sch-backlog-search[b-nski6xuh2s] {
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 8px;
    border: 1px solid #d7dee7;
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--ink);
}

.sch-backlog-search:focus[b-nski6xuh2s] {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--focus-halo);
}

.sch-backlog-hint[b-nski6xuh2s] {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--ink-4);
}

/* Description is free text and must stay fully readable -- wrap onto multiple lines instead of
   truncating (the dialog itself is wide enough now; see _assignDlgOptions in Scheduler.razor). */
.sch-backlog-desc[b-nski6xuh2s] {
    white-space: normal;
    word-break: break-word;
}

/* Classes SortableJs applies to the dragged card during a drag (see scheduler-dnd.js). */
.sch-wo.sortable-ghost[b-nski6xuh2s] {
    opacity: 0.35;
}

.sch-wo.sortable-chosen[b-nski6xuh2s] {
    box-shadow: 0 0 0 2px var(--brand-bright);
}
/* /Components/Pages/TechnicianDetail.razor.rz.scp.css */
/* UX 2026-09-23 P5-16: TechnicianDetail's work-order pager reused WorkOrders.razor's
   ".wo-pager*" classes, but Blazor scoped CSS only reaches the page that owns the .razor.css
   file it's declared in -- WorkOrders.razor.css never applied here, so the Prev/Next buttons
   rendered as bare browser-default buttons. Copied verbatim from WorkOrders.razor.css rather
   than moved to app.css, since only these two pages use the pager today; if a third page needs
   it, promote both copies to app.css instead of a third copy. */
.wo-pager[b-mz8zm3w6c8]{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px 4px;font-size:13px;color:var(--ink-3);
  border-top:1px solid var(--line-soft);
}
.wo-pager-info[b-mz8zm3w6c8]{display:flex;align-items:center;gap:6px}
.wo-pager-size[b-mz8zm3w6c8]{
  height:28px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  font-size:13px;color:var(--ink);background:#fff;cursor:pointer;outline:none;
}
.wo-pager-btn[b-mz8zm3w6c8]{
  height:28px;min-width:28px;padding:0 8px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;font-size:14px;color:var(--ink);line-height:1;
}
.wo-pager-btn:disabled[b-mz8zm3w6c8]{opacity:0.35;cursor:default}
.wo-pager-btn:not(:disabled):hover[b-mz8zm3w6c8]{border-color:var(--brand);color:var(--brand)}
.wo-pager > .wo-pager-btn:first-of-type[b-mz8zm3w6c8]{margin-left:auto}
/* /Components/Pages/Technicians.razor.rz.scp.css */
/* Card grid inside the flush list card: the padding puts the cards back off the card's edges. */
.tech-grid[b-hn51m6cm4u] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 16px;
}

/* Now a real <a> (was a bare <div @onclick>) so the roster card is a genuine navigation link --
   reachable by keyboard tab order, readable by a screen reader as a link, and openable in a new
   tab. display:block + the color/decoration reset keep it visually identical to the old div. */
.tech-card[b-hn51m6cm4u] {
    display: block;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 20px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.tech-card:focus-visible[b-hn51m6cm4u] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.tech-card:hover[b-hn51m6cm4u] {
    border-color: var(--brand-bright);
    box-shadow: 0 2px 12px color-mix(in srgb, var(--brand-bright) 10%, transparent);
}

.tech-card-head[b-hn51m6cm4u] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.tech-avatar[b-hn51m6cm4u] {
    width: var(--hit-min);
    height: var(--hit-min);
    border-radius: 50%;
    background: #eaeef6;
    color: var(--ink-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    flex-shrink: 0;
}

.tech-name[b-hn51m6cm4u] {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    margin: 0;
}

.tech-dept[b-hn51m6cm4u] {
    font-size: 12.5px;
    color: var(--ink-3);
    margin-top: 2px;
}

.tech-stats[b-hn51m6cm4u] {
    display: flex;
    gap: 12px;
}

.tech-stat[b-hn51m6cm4u] {
    flex: 1;
    text-align: center;
    padding: 10px 8px;
    background: #f8f9fb;
    border-radius: var(--r-lg);
}

.tech-stat-label[b-hn51m6cm4u] {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-4);
    margin-bottom: 4px;
}

.tech-stat-val[b-hn51m6cm4u] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}

.tech-booked[b-hn51m6cm4u]{display:flex;align-items:baseline;justify-content:space-between;margin-top:14px}
.tech-booked-label[b-hn51m6cm4u]{font-family:var(--f-body);font-size:12px;font-weight:600;color:var(--text-meta)}
.tech-booked-val[b-hn51m6cm4u]{font-family:'Helvetica LT','Helvetica Neue',sans-serif;font-weight:700;font-size:26px;
  letter-spacing:-0.02em;color:var(--ink)}
.tech-booked-unit[b-hn51m6cm4u]{font-size:13px;color:var(--text-meta);font-weight:600}
.tech-bar[b-hn51m6cm4u]{height:8px;background:#eaeef6;border-radius:999px;overflow:hidden;margin-top:8px}
.tech-bar-fill[b-hn51m6cm4u]{display:block;height:100%;background:var(--brand-bright);border-radius:999px}
.tech-foot[b-hn51m6cm4u]{font-size:12.5px;color:var(--ink-4);margin-top:10px}

/* View toggle (Cards / Table) */
.tech-viewtoggle[b-hn51m6cm4u]{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff;height:36px}
.tech-toggle-btn[b-hn51m6cm4u]{
  height:36px;padding:0 16px;border:none;background:transparent;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--ink-3);transition:background .15s,color .15s}
.tech-toggle-btn.active[b-hn51m6cm4u]{background:var(--brand);color:#fff}

/* ── Plant tag + skill chips on the card ─────────────────────────────────── */
.tech-plant[b-hn51m6cm4u]{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.04em;color:var(--ink-3);background:#eef2f8;border-radius:var(--r-tag);
  padding:3px 8px;margin-bottom:10px}
.tech-chips[b-hn51m6cm4u]{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:4px;min-height:22px}
.tech-chip[b-hn51m6cm4u]{
  font-size:11px;color:#3a6ea5;background:#eaf3fb;border-radius:var(--r-tag);padding:2px 9px;
  white-space:nowrap}
.tech-chip-cert[b-hn51m6cm4u]{color:#1f7a4d;background:#e6f6ee}   /* certifications stand out green */
.tech-chip-more[b-hn51m6cm4u]{color:var(--ink-4);background:#f1f3f7}

/* ── Table view: shared .r360-table styling; only these extras are page-specific ── */
.tech-table th.num[b-hn51m6cm4u],.tech-table td.num[b-hn51m6cm4u]{text-align:right;font-family:var(--f-mono)}
.tech-td-name[b-hn51m6cm4u]{font-weight:700;color:var(--ink)}

/* Empty result inside the flush card, same look as the shared .r360-empty table cell. */
.tech-empty[b-hn51m6cm4u]{padding:24px;text-align:center;color:var(--ink-4)}

/* Card-view "No rate set" warning: sits above the booked-hours block so a missing
   Labor_Rate (which silently zeroes this tech's WO labor cost) reads as an immediate flag. */
.tech-rate-warning[b-hn51m6cm4u]{margin-top:10px}

/* Deliberately warning-toned: an unlinked technician silently receives nothing (Phase 3). */
.tech-login--none[b-hn51m6cm4u] { font-size: 11.5px; font-weight: 600; color: #b9770e; margin-top: 2px; }
.tech-login--linked[b-hn51m6cm4u] { font-size: 12px; color: var(--ink-3); }
/* /Components/Pages/WorkOrderNew.razor.rz.scp.css */
/* Copied from Requests.razor.css: scoped CSS only styles the component that owns it, so
   this page's use of .req-form was rendering unstyled. */
.req-form[b-9uom75r5lg] { padding: 22px; }
/* /Components/Pages/WorkOrders.razor.rz.scp.css */
/* Quick-filter chips above the list card. No bottom margin: the content column's 18px gap
   spaces it from the next block (design system, Sep 28, 2026). */
.wo-tabs[b-yr1kfurxib] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.wo-tab[b-yr1kfurxib] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--ink-3);
    background: transparent;
    border: 1px solid var(--line);
    border-radius: var(--r-tag);
    padding: 6px 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.wo-tab:hover[b-yr1kfurxib] {
    color: var(--ink);
    border-color: #b0bdd0;
}

.wo-tab.active[b-yr1kfurxib] {
    color: #fff;
    background: var(--brand);
    border-color: var(--brand);
}

/* P4-07: legend under the chip row spelling out "Draft"/"Pending", which read as generic jargon
   without a hover on the chip itself. */
.wo-legend[b-yr1kfurxib] {
    font-size: 12.5px;
    color: var(--ink-4);
    /* Pulled up under the chips it explains, against the column's 18px gap. */
    margin: -10px 0 0;
}

/* Due-date cell. Colour is a secondary signal only -- the title attribute states the
   same thing in words, because colour alone fails for colour-blind users and in print. */
.wo-due[b-yr1kfurxib] { font-size: 12px; color: var(--ink-3); }
.wo-due--overdue[b-yr1kfurxib] { color: var(--danger); font-weight: 700; }
.wo-due--today[b-yr1kfurxib] { color: #b9770e; font-weight: 600; }

/* /Components/Pages/WorkOrdersDetail.razor.rz.scp.css */
/* Header row under the title: status pill, priority mark and the Assigned-to picker. Wraps so on
   a phone the picker drops to its own line instead of running off the right edge. */
.wod-head-meta[b-jf635o5o5d] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-bottom: 12px;
}
/* "Assigned to" label + picker kept together as one unit when the row wraps. */
.wod-assign[b-jf635o5o5d] { display: flex; align-items: center; gap: 6px; min-width: 0; }

/* Phase 6 Task 1: WO number + description leads the page; asset name moved to a subtitle line. */
.wod-title[b-jf635o5o5d] {
    font-size: 22px;
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    display: flex;
    gap: 8px;
    align-items: baseline;
    min-width: 0;
}
.wod-title__no[b-jf635o5o5d] { font-family: 'JetBrains Mono', monospace; font-size: 15px; color: var(--brand-tile); flex-shrink: 0; }
.wod-title__sep[b-jf635o5o5d] { color: #c3ccd6; flex-shrink: 0; }
/* Truncate rather than wrap: a multi-line header pushes the tabs below the fold. */
.wod-title__desc[b-jf635o5o5d] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wod-subtitle[b-jf635o5o5d] { font-size: 13px; color: var(--ink-3); margin-top: 4px; margin-bottom: 12px; }
/* P4-10 removed the standalone .wod-problem read-only restatement of the description that used to
   sit above the tabs -- it duplicated the Info tab's own editable Description field (and the
   Requester read-only panel's separate Description block, which is untouched) with no added
   value, so its rule is retired along with the markup. */
/* Failure Start / Reported Time: single datetime-local input + Now button, side by side. */
.wod-datetime[b-jf635o5o5d] { display: flex; align-items: center; gap: 8px; }
.wod-datetime .r360-input[b-jf635o5o5d] { flex: 1; }

/* Task 3: expired-permit safety banner -- deliberately louder than .wod-problem (red, bordered,
   bold) since this is a "work must not proceed" state, not informational context. */
.wod-permit-alert[b-jf635o5o5d] {
    background: #fdeaea;
    border: 1px solid var(--danger);
    color: #7a1f16;
    border-radius: var(--r-lg);
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 16px;
}

/* The read-only facts strip (.wod-meta and friends) moved to
   Components/Shared/WorkOrderMetaPanel.razor.css along with its markup -- scoped CSS only tags
   the declaring component's own elements, so the rules could not stay behind here. */

/* Editable Info fields: responsive grid, each with a small label above the control. */
.wod-fields[b-jf635o5o5d] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.wod-field[b-jf635o5o5d] { display: flex; flex-direction: column; }
/* P4-11: the Asset field opts out of the shared minmax(180px, 1fr) grid cell and spans the full row
   instead, so its Combo (and the full-name link below it) get the whole card's width rather than a
   fifth of it -- the narrow shared cell was why a long asset name was clipped in the first place. */
.wod-field--wide[b-jf635o5o5d] { grid-column: 1 / -1; }
/* The full, never-truncated asset name and its link moved to the summary strip above the tabs
   (WorkOrderMetaPanel.razor.css, .wod-meta-asset) on 2026-10-01; the old link rule here is retired. */
.wod-field-label[b-jf635o5o5d] {
    font-size: 12px;
    color: var(--ink-4);
    margin-bottom: 4px;
}

/* Muted helper text under an editable field (e.g. the Asset selector's "Plant follows the asset"
   note). Small and low-contrast so it reads as guidance, not a validation error. */
.wod-field-hint[b-jf635o5o5d] {
    font-size: 11.5px;
    color: var(--ink-4);
    margin-top: 4px;
    line-height: 1.35;
}

/* Read-only Cause/Remedy preview under the Failure Code selector (Task 15 — structured
   failure-code taxonomy). Muted/small so it reads as reference info, not an editable field. */
.wod-failurecode-detail[b-jf635o5o5d] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 4px;
    font-size: 11px;
    color: var(--ink-4);
}
.wod-failurecode-detail strong[b-jf635o5o5d] {
    color: var(--ink-3);
    font-weight: 600;
}

/* Collapsible secondary section, styled to match .r360-card. */
.wod-collapse[b-jf635o5o5d] {
    margin-top: 16px;
    background: #fff;
    border: 1px solid #e6eaf0;
    border-radius: var(--r-xl);
    padding: 4px 18px;
}
.wod-collapse-head[b-jf635o5o5d] {
    list-style: none;
    cursor: pointer;
    font-weight: 600;
    color: var(--ink);
    padding: 12px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
.wod-collapse-head[b-jf635o5o5d]::-webkit-details-marker { display: none; }
/* Chevron that rotates when the panel is open. */
.wod-collapse-head[b-jf635o5o5d]::before {
    content: "▸";
    font-size: 12px;
    color: var(--ink-4);
    transition: transform 0.15s;
}
.wod-collapse[open] .wod-collapse-head[b-jf635o5o5d]::before { transform: rotate(90deg); }
.wod-collapse-body[b-jf635o5o5d] { padding: 0 0 14px; }

@media (max-width: 900px){
  .wod-head[b-jf635o5o5d]{flex-wrap:wrap;gap:8px}
  .wod-head .mud-tabs[b-jf635o5o5d]{--mud-tabs-min-width:auto}
  .r360-card[b-jf635o5o5d]{padding:12px}
}
/* /Components/Shared/ActionBar.razor.rz.scp.css */
/* Sticky so page actions stay reachable on a long page -- the reported defect was an Edit
   control below the fold, and layout alone does not fix that once the user scrolls. */
.ab[b-au58xju8uh] {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 12px 0;
    /* No bottom margin: .main-body's 18px flex gap spaces the bar from the next block. */
    margin-bottom: 0;
    background: var(--surface-canvas);
}

/* min-width:0 lets a long title wrap instead of pushing the action buttons off the row. */
.ab-left[b-au58xju8uh] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.ab-heading[b-au58xju8uh] {
    min-width: 0;
}

/* Picture (or other aside) beside the title; never shrinks so the thumbnail keeps its size. */
.ab-title-aside[b-au58xju8uh] {
    flex: none;
    margin-left: 12px;
}

/* 44x44 minimum hit area, matching .ab-more-trigger. */
.ab-back[b-au58xju8uh] {
    flex: none;
    width: var(--hit-min);
    height: var(--hit-min);
    display: grid;
    place-items: center;
    background: var(--paper);
    border: 1px solid var(--paper-3);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    cursor: pointer;
}

.ab-back:hover[b-au58xju8uh] {
    background: var(--paper-3);
}

.ab-title[b-au58xju8uh] {
    font-family: var(--f-display);
    font-size: var(--fs-ab-title);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--ink);
    margin: 0 0 4px;
}

.ab-subtitle[b-au58xju8uh] {
    color: var(--ink-4);
    font-size: var(--fs-sub);
    margin: 0;
}

.ab-actions[b-au58xju8uh] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ab-secondary[b-au58xju8uh],
.ab-primary[b-au58xju8uh] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ab-more[b-au58xju8uh] {
    position: relative;
}

/* 44x44 minimum hit area, per the A1-A10 accessibility pass. */
.ab-more-trigger[b-au58xju8uh] {
    width: var(--hit-min);
    height: var(--hit-min);
    display: grid;
    place-items: center;
    background: var(--paper);
    border: 1px solid var(--paper-3);
    border-radius: var(--r-sm);
    color: var(--ink-2);
    cursor: pointer;
}

.ab-more-trigger:hover[b-au58xju8uh] {
    background: var(--paper-3);
}

.ab-more-panel[b-au58xju8uh] {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 20;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--paper);
    border: 1px solid var(--paper-3);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-menu);
}

/* The panel's display:flex would otherwise override the browser's [hidden] { display: none }. */
.ab-more-panel[hidden][b-au58xju8uh] {
    display: none;
}

/* Menu items (Btn, CsvImportExportBar pieces) stretch to the panel width so they line up as a
   list. ::deep because the items are child components' elements, outside this scope. */
.ab-more-panel[b-au58xju8uh]  > * {
    width: 100%;
}

/* Why this lives inside .ab-more, not as a sibling of .ab: .ab is "position: sticky" AND
   has its own z-index (5), so it establishes a stacking context. Anything inside .ab -- such
   as .ab-more-panel (z-index: 20) -- can only be compared against other content inside that
   same context; its z-index cannot escape upward to outrank a sibling of .ab in the root
   stacking context. The backdrop used to be that sibling at z-index: 10, so at the root level
   it out-ranked the whole .ab box (z-index: 5) and painted over the open panel, swallowing
   every click meant for a menu item -- Delete became unreachable via mouse or keyboard. Moving
   the backdrop inside .ab-more puts it in the SAME local stacking context as the panel, where
   20 legitimately beats 15. Do not move this back out to a sibling of .ab. */
.ab-more-backdrop[b-au58xju8uh] {
    position: fixed;
    inset: 0;
    z-index: 15;
}

/* Stack the bar on a phone so a long title never squeezes the actions off-screen. */
@media (max-width: 640px) {
    .ab[b-au58xju8uh] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Shared/AssetBreadcrumb.razor.rz.scp.css */
.asset-breadcrumb[b-8xpuwaaxt6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
    font-size: 13px;
}

.asset-breadcrumb a[b-8xpuwaaxt6] {
    color: var(--brand);
    text-decoration: none;
}

.bc-sep[b-8xpuwaaxt6] {
    color: var(--ink-4);
}

.bc-current[b-8xpuwaaxt6] {
    color: var(--ink);
    font-weight: 600;
}
/* /Components/Shared/AttachmentPanel.razor.rz.scp.css */
/* Branded upload button. The real <input type=file> (rendered by InputFile as .ap-input)
   is hidden; clicking the styled label opens the file picker. */
.ap-upload[b-ql45p3e0zd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: var(--brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--r-sm);
    cursor: pointer;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--brand-bright) 30%, transparent);
    transition: background 0.15s, box-shadow 0.15s;
}
/* Hover darkens the customer's brand by 15% (the base fill is already --brand, so the old
   literal #047ab5 hover would have been the same colour). color-mix keeps it per-customer. */
.ap-upload:hover[b-ql45p3e0zd] {
    background: color-mix(in srgb, var(--brand-deep) 85%, #000);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-bright) 40%, transparent);
}
.ap-upload-icon[b-ql45p3e0zd] { font-size: 16px; line-height: 1; font-weight: 400; }

/* Hide the native file input but keep it operable via the wrapping label.
   InputFile renders its own <input> (a framework component), so its element does NOT
   receive this component's scope attribute — a plain `.ap-input` selector misses it.
   `::deep` pierces into child-component output to match the rendered input. */
.ap-upload[b-ql45p3e0zd]  input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

.ap-hint[b-ql45p3e0zd] {
    display: inline-block;
    margin-left: 10px;
    font-size: 12px;
    color: var(--ink-4);
    vertical-align: middle;
}
/* /Components/Shared/AutoIdField.razor.rz.scp.css */
/* Copied from Field.razor.css: scoped CSS only styles the component that owns it, so
   this component's use of .r360-field/.r360-field__label was rendering unstyled. */
.r360-field[b-i5h576g7e1] {
    margin-bottom: 12px;
}

.r360-field__label[b-i5h576g7e1] {
    display: block;
    font-family: 'Helvetica LT', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}
/* /Components/Shared/Btn.razor.rz.scp.css */
.r360-btn[b-xhmdvlae2c] {
    border-radius: var(--r-sm) !important;
    border: none;
    cursor: pointer;
    font-family: 'Helvetica LT', 'Helvetica Neue', Helvetica, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    min-width: 60px !important;
    height: var(--btn-h) !important;
    padding: 9px 16px !important;
    line-height: 1;
}

/* Primary fill uses --brand, not the vivid --brand-bright: white text on #0599E1 is only 3.16:1
   (fails WCAG AA) and a literal would ignore the customer's Branding:BrandColor. BrandColorDerivation
   guarantees --brand reaches 4.5:1 against white for any configured hue. */
.r360-btn--primary[b-xhmdvlae2c] {
    background: var(--brand) !important;
    color: #fff !important;
}

.r360-btn--ghost[b-xhmdvlae2c] {
    background: #fff !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
}

/* Danger shares the app's single red token (--danger #BB3320, 5.8:1 with white text) instead of
   its own #c0392b, so destructive buttons, validation text and status pills all match. */
.r360-btn--danger[b-xhmdvlae2c] {
    background: var(--danger) !important;
    color: #fff !important;
}
.r360-btn--danger:disabled[b-xhmdvlae2c] {
    background: #e3b3ac !important;
    cursor: not-allowed;
}
/* /Components/Shared/Card.razor.rz.scp.css */
.r360-card[b-3u3vtofrvy] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 24px;
}

.r360-card--dark[b-3u3vtofrvy] {
    background: var(--brand-ink);
    border-color: transparent;
    color: #fff;
}

.r360-card--flush[b-3u3vtofrvy] {
    border-radius: 0;
    padding: 12px 16px;
}

.r360-card--flush + .r360-card--flush[b-3u3vtofrvy] {
    border-top: 1px solid var(--line-soft);
}

/* Clickable cards render with role="button" (see Card.razor)  -  give them a pointer cursor and a
   visible focus ring so keyboard users can see which card has focus, matching the focus-visible
   treatment used across the other shared admin cards in this task. */
.r360-card--clickable[b-3u3vtofrvy] {
    cursor: pointer;
}

.r360-card--clickable:focus-visible[b-3u3vtofrvy] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
/* /Components/Shared/ColumnPickerDialog.razor.rz.scp.css */
/* Column picker dialog. Scoped to this component; every element styled here is authored in
   ColumnPickerDialog.razor, so the "scoped CSS misses child MudComponents" gotcha does not bite
   (the MudButtons in DialogActions are styled by MudBlazor, not here). */

.r360-colpick-hint[b-0haucb0g6u]{
  margin:0 0 12px;font-size:13px;color:var(--ink-3);line-height:1.45;
}

/* The list scrolls internally rather than growing the dialog past a short viewport. The min-height
   keeps at least three rows visible on a short window, where a pure vh cap left the list showing
   two rows and reading as broken. */
.r360-colpick-list[b-0haucb0g6u]{
  list-style:none;margin:0;padding:0;
  max-height:58vh;min-height:160px;overflow-y:auto;
  border:1px solid var(--line-soft);border-radius:var(--r-lg);
}

.r360-colpick-row[b-0haucb0g6u]{
  display:flex;align-items:center;gap:8px;
  padding:4px 8px;
  border-bottom:1px solid var(--paper-2);
  background:var(--paper);
}
.r360-colpick-row:last-child[b-0haucb0g6u]{border-bottom:none}

/* Grip: the only part of the row that starts a drag (see column-picker-dnd.js `handle`), so the
   checkbox and arrow buttons stay clickable. */
.r360-colpick-grip[b-0haucb0g6u]{
  flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:var(--hit-min);
  color:var(--line-strong);font-size:16px;line-height:1;
  cursor:grab;user-select:none;
}
.r360-colpick-grip:active[b-0haucb0g6u]{cursor:grabbing}

/* Label fills the row so the whole strip is a checkbox target, not just the box itself. */
.r360-colpick-label[b-0haucb0g6u]{
  flex:1 1 auto;
  display:flex;align-items:center;gap:10px;
  min-height:var(--hit-min);
  font-size:14px;color:var(--ink);cursor:pointer;
}
.r360-colpick-label input[type=checkbox][b-0haucb0g6u]{
  width:18px;height:18px;cursor:pointer;
}
.r360-colpick-label input[type=checkbox]:disabled[b-0haucb0g6u]{cursor:not-allowed}
/* Literal on purpose: no token is close (--ink-4 #647285 reads as enabled, --ink-5 #B9C3D1 is
   too faint to read the locked column's name). */
.r360-colpick-label input[type=checkbox]:disabled + span[b-0haucb0g6u]{color:#8b96a5}

.r360-colpick-moves[b-0haucb0g6u]{flex:0 0 auto;display:flex;gap:4px}

/* 44x44 minimum hit area, matching the project's touch-target rule for action controls. */
.r360-colpick-move[b-0haucb0g6u]{
  width:var(--hit-min);height:var(--hit-min);
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--paper);color:var(--ink);font-size:14px;line-height:1;cursor:pointer;
}
.r360-colpick-move:not(:disabled):hover[b-0haucb0g6u]{border-color:var(--brand);color:var(--brand)}
.r360-colpick-move:disabled[b-0haucb0g6u]{opacity:0.3;cursor:default}
.r360-colpick-move:focus-visible[b-0haucb0g6u]{outline:2px solid var(--brand);outline-offset:2px}

/* SortableJs' placeholder showing where the row will land. */
.r360-colpick-row.sortable-ghost[b-0haucb0g6u]{opacity:0.4;background:color-mix(in srgb, var(--brand-bright) 8%, var(--paper))}

/* The clone that follows the pointer in fallback mode. Sortable moves it to <body>, outside the
   dialog -- this still matches because scoped CSS selects on an attribute the clone inherits, not
   on where the element sits in the tree. Needs its own border and shadow for that reason: it is no
   longer inside the bordered list. */
.r360-colpick-row.r360-colpick-dragging[b-0haucb0g6u]{
  border:1px solid var(--brand-bright);border-radius:var(--r-sm);
  box-shadow:0 6px 16px color-mix(in srgb, var(--ink) 18%, transparent);
  cursor:grabbing;
}

@media (prefers-reduced-motion: reduce){
  .r360-colpick-row[b-0haucb0g6u]{transition:none !important}
}
/* /Components/Shared/CsvImportExportBar.razor.rz.scp.css */
/* Compact (top-bar) wrapper (P5-04): an inline-flex span with a small gap and no row margin, so
   Export/Import sit flush among ActionBar's other Secondary buttons instead of dropping to their
   own full-width row. */
.cie-bar--compact[b-arh21ve9ef] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

/* Branded "Import CSV" upload button — visually matches Btn's Ghost variant (white background,
   light border) but defined here rather than reusing Btn.razor.css's .r360-btn--ghost class,
   because Blazor scoped CSS only applies within the component that declares it; a raw <label>
   in this component would not pick up Btn.razor's scope attribute. Same approach as
   AttachmentPanel.razor.css's .ap-upload. */
.cie-upload[b-arh21ve9ef] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--f-display);
    font-weight: 600;
    font-size: var(--fs-button);
    border-radius: var(--r-sm);
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s;
}
.cie-upload:hover[b-arh21ve9ef] {
    background: var(--paper-2);
}

/* Hide the native file input but keep it operable via the wrapping label. InputFile renders its
   own <input> (a framework component), so its element does NOT receive this component's scope
   attribute — a plain `input[type=file]` selector misses it. `::deep` pierces into
   child-component output to match the rendered input. */
.cie-upload[b-arh21ve9ef]  input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Inside the ActionBar's More (⋮) panel the import control is one menu row: full width, text
   centred like the panel's other buttons. The panel sets width:100% on its direct children (the
   compact span); these two rules carry that down to the label. */
.cie-bar--compact:only-child[b-arh21ve9ef] {
    display: flex;
}
.cie-bar--compact .cie-upload:only-child[b-arh21ve9ef] {
    flex: 1;
    justify-content: center;
}
/* /Components/Shared/DataRow.razor.rz.scp.css */
.r360-datarow[b-o9sbddx4rk] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 11px 22px;
    align-items: center;
    border-top: 1px solid var(--line-soft);
}

.r360-datarow:first-child[b-o9sbddx4rk] {
    border-top: none;
}

.r360-datarow__label[b-o9sbddx4rk] {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-4);
    letter-spacing: 0.01em;
}

.r360-datarow__value[b-o9sbddx4rk] {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
/* /Components/Shared/Drawer.razor.rz.scp.css */
/* Design system Drawer (Sep 28, 2026). Values from the reference Drawer.jsx: 520px panel, navy
   header 18px 20px, 20px body padding, --shadow-drawer, 0.25s --ease-house open and close. */

/* Scrim: navy at 50%, covers the page; fades in on open, out on close. z-index keeps the drawer
   above the sticky ActionBar and the tablet sidebar. pointer-events:none while closing so a click
   during the fade reaches the page instead of a vanishing overlay. */
.dw-scrim[b-dhnlhg1hfh] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    overflow: hidden;
    background: var(--scrim);
    animation: dw-fade-in-b-dhnlhg1hfh var(--tr-enter) var(--ease-house) forwards;
}
.dw-scrim.is-closing[b-dhnlhg1hfh] {
    pointer-events: none;
    animation: dw-fade-out-b-dhnlhg1hfh var(--tr-enter) var(--ease-house) forwards;
}

/* Panel: slides in from the right edge; the close plays the exact reverse. */
.dw-panel[b-dhnlhg1hfh] {
    width: min(var(--drawer-w), 100%);
    height: 100%;
    margin-left: auto;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    box-shadow: var(--shadow-drawer);
    animation: dw-slide-in-b-dhnlhg1hfh var(--tr-enter) var(--ease-house) forwards;
}
.dw-panel.is-closing[b-dhnlhg1hfh] {
    animation: dw-slide-out-b-dhnlhg1hfh var(--tr-enter) var(--ease-house) forwards;
}

/* Navy header: eyebrow + title on the left, round close button on the right. */
.dw-head[b-dhnlhg1hfh] {
    position: sticky;
    top: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 20px;
    background: var(--brand-ink);
    color: #fff;
}
.dw-head__text[b-dhnlhg1hfh] {
    flex: 1;
    min-width: 0;
}
.dw-eyebrow[b-dhnlhg1hfh] {
    margin-bottom: 4px;
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}
.dw-title[b-dhnlhg1hfh] {
    font-family: var(--f-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Round 44x44 close button (the design keeps this one round, not squared). */
.dw-close[b-dhnlhg1hfh] {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: var(--hit-min);
    height: var(--hit-min);
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    cursor: pointer;
}
.dw-close:hover[b-dhnlhg1hfh] {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.dw-close:focus-visible[b-dhnlhg1hfh] {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.dw-body[b-dhnlhg1hfh] {
    flex: 1;
    overflow: auto;
    padding: 20px;
}

.dw-foot[b-dhnlhg1hfh] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--line);
}

@keyframes dw-fade-in-b-dhnlhg1hfh { from { opacity: 0; } to { opacity: 1; } }
@keyframes dw-fade-out-b-dhnlhg1hfh { from { opacity: 1; } to { opacity: 0; } }
@keyframes dw-slide-in-b-dhnlhg1hfh { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes dw-slide-out-b-dhnlhg1hfh { from { transform: translateX(0); } to { transform: translateX(100%); } }

/* Less motion: finish each animation almost at once (the end state still applies, and the
   component's close timer still unmounts the drawer). */
@media (prefers-reduced-motion: reduce) {
    .dw-scrim[b-dhnlhg1hfh], .dw-scrim.is-closing[b-dhnlhg1hfh], .dw-panel[b-dhnlhg1hfh], .dw-panel.is-closing[b-dhnlhg1hfh] {
        animation-duration: 1ms;
    }
}
/* /Components/Shared/EstimatedCostNote.razor.rz.scp.css */
/* Muted, small: qualifies a figure without competing with it. Tokens only (design system). */
.r360-estimate-note[b-tpzpf4jjp4] {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ink-4);
}
/* /Components/Shared/FailureCodeCard.razor.rz.scp.css */
/* src/Reliability360.Web/Components/Shared/FailureCodeCard.razor.css */
.fcc-card[b-qhtrppw5gn] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 20px 22px 22px;
}

.fcc-head[b-qhtrppw5gn] { margin-bottom: 12px; }

.fcc-title[b-qhtrppw5gn] { font-weight: 700; font-size: 16px; color: var(--ink); }

.fcc-sub[b-qhtrppw5gn] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 3px;
}

.fcc-rowgroup[b-qhtrppw5gn] {
    border-bottom: 1px solid var(--line-soft);
}

.fcc-rowgroup .fcc-row[b-qhtrppw5gn] {
    border-bottom: none;
}

.fcc-row[b-qhtrppw5gn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--line-soft);
}

/* Cause/Remedy inputs shown under the main row while adding/editing a code. */
.fcc-detailrow[b-qhtrppw5gn] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 9px;
}

.fcc-input-detail[b-qhtrppw5gn] {
    flex: 1;
    font-size: 12px;
}

/* Read-only Cause/Remedy preview shown under a code's row when it has either set. */
.fcc-detailpreview[b-qhtrppw5gn] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding: 0 2px 9px 82px;
    font-size: 12px;
    color: var(--ink-4);
    cursor: text;
}

.fcc-detailpreview strong[b-qhtrppw5gn] {
    color: var(--ink-3);
    font-weight: 600;
}

.fcc-code[b-qhtrppw5gn] {
    flex: 0 0 70px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    cursor: text;
}

.fcc-desc[b-qhtrppw5gn] {
    flex: 1;
    font-size: 13px;
    color: var(--ink-4);
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fcc-input[b-qhtrppw5gn] {
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    outline: none;
}

.fcc-input-code[b-qhtrppw5gn] { flex: 0 0 70px; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.fcc-input-desc[b-qhtrppw5gn] { flex: 1; }

.fcc-addrow[b-qhtrppw5gn] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
/* /Components/Shared/Field.razor.rz.scp.css */
.r360-field[b-0omftlb909] {
    margin-bottom: 12px;
}

.r360-field__label[b-0omftlb909] {
    display: block;
    font-family: 'Helvetica LT', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
}

.r360-field__input[b-0omftlb909] {
    width: 100%;
    padding: 11px 13px;
    border: 1.5px solid var(--line);
    border-radius: var(--r-sm);
    font-family: inherit;
    font-size: 14px;
    color: var(--ink);
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.r360-field__input:focus[b-0omftlb909] {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px var(--focus-halo);
}
/* /Components/Shared/GlobalSearch.razor.rz.scp.css */
/* Global jump-to search, embedded in PageHeader.razor between the mobile menu button and the
   right-side actions. flex:1 lets it absorb the empty middle space in the header's flex row (the
   header is display:flex + justify-content:space-between -- an auto-growing middle child eats the
   leftover width instead of leaving separated gaps). */
.gs[b-ys07c1jbtr]{position:relative;flex:1 1 auto;display:flex;justify-content:center;min-width:0;margin:0 24px}

.gs-input[b-ys07c1jbtr]{width:100%;max-width:420px;height:34px;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:0 12px;font-size:13px;font-family:var(--f-body);color:var(--ink);background:#f7f8fa}
.gs-input[b-ys07c1jbtr]::placeholder{color:var(--ink-4)}
/* box-shadow:none opts the search box out of the global 4px input halo: it sits in the thin top
   bar, where the halo would spill over the bar's bottom border. */
.gs-input:focus[b-ys07c1jbtr]{outline:none;border-color:var(--brand);background:#fff;box-shadow:none}

.gs-results[b-ys07c1jbtr]{position:absolute;top:40px;left:50%;transform:translateX(-50%);width:100%;
  max-width:420px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:0 8px 24px rgba(0,0,0,.08);max-height:320px;overflow-y:auto;z-index:40}
.gs-result[b-ys07c1jbtr]{display:flex;align-items:center;gap:10px;padding:8px 12px;text-decoration:none;
  color:var(--ink);font-size:13px;border-bottom:1px solid var(--line-soft)}
.gs-result:last-child[b-ys07c1jbtr]{border-bottom:none}
.gs-result:hover[b-ys07c1jbtr]{background:#f0f4fa}
.gs-result__kind[b-ys07c1jbtr]{flex:0 0 auto;font-family:var(--f-body);font-size:12px;font-weight:600;
  color:var(--text-meta);min-width:64px}
.gs-result__label[b-ys07c1jbtr]{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Tablet tier (<= 1200px, see app.css's "Viewport tiers" comment): the sidebar becomes a drawer
   and the hamburger appears, so give the search box back some of the room it took at desktop
   width instead of forcing the header to overflow or the actions to wrap. */
@media (max-width:1200px){
  .gs[b-ys07c1jbtr]{margin:0 12px}
  .gs-input[b-ys07c1jbtr]{max-width:220px}
}

/* Phone tier (<= 900px, matches PageHeader.razor.css's own phone
   breakpoint): shrink further rather than hide outright -- jump-to search is
   still a useful affordance on a narrow desktop-chassis
   browser window (the dedicated field-tech mobile flow uses its own Today/Job/MyAssets/Me
   layout, not this header, so this rule is really about a narrow desktop window, not a phone). */
@media (max-width:900px){
  .gs[b-ys07c1jbtr]{margin:0 8px}
  .gs-input[b-ys07c1jbtr]{max-width:140px;font-size:12px}
  .gs-results[b-ys07c1jbtr]{max-width:260px}
}
/* /Components/Shared/LookupTableCard.razor.rz.scp.css */
.lk-card[b-o4ejboxget] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    /* No height: 100%. It stretched a short list to the full height of whatever contained it:
       outside a grid that meant the whole page, so four priorities scrolled for ~7,000px. The
       card sizes to its rows. */
}

.lk-head[b-o4ejboxget] {
    margin-bottom: 12px;
}

.lk-title[b-o4ejboxget] {
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
}

.lk-sub[b-o4ejboxget] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 3px;
}

.lk-rows[b-o4ejboxget] {
    flex: 1;
}

.lk-row[b-o4ejboxget] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--line-soft);
}

.lk-num[b-o4ejboxget] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--ink-5);
    width: 16px;
    flex-shrink: 0;
}

.lk-name[b-o4ejboxget] {
    flex: 1;
    font-size: 14px;
    color: var(--ink);
    cursor: text;
    border-radius: var(--r-sm);
    padding: 2px 4px;
    margin: -2px -4px;
}

.lk-name:hover[b-o4ejboxget] {
    background: var(--paper-2);
}

.lk-input[b-o4ejboxget] {
    flex: 1;
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    outline: none;
}

.lk-addrow[b-o4ejboxget] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.lk-lock[b-o4ejboxget] {
    font-size: 12px;
    color: var(--ink-5);
    padding: 4px 6px;
    line-height: 1;
}

.lk-intro[b-o4ejboxget] {
    font-size: 13px;
    color: var(--ink-4);
    margin: 0 0 12px;
    line-height: 1.5;
}

.lk-search[b-o4ejboxget] {
    width: 100%;
    padding: 9px 12px;
    margin-bottom: 12px;
    font-size: 13.5px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--paper-3);
    border-radius: var(--r-sm);
}

/* Visible button chrome: the rename control used to be bare text with no affordance. */
.lk-edit[b-o4ejboxget] {
    color: var(--ink-2);
}

.lk-edit:hover[b-o4ejboxget] {
    background: var(--paper-3);
}

.lk-empty[b-o4ejboxget] {
    font-size: 13px;
    color: var(--ink-4);
    padding: 12px 0;
}
/* /Components/Shared/MobileJobCard.razor.rz.scp.css */
/* Tappable work-order card. The left rail color is set inline (border-left-color) from the
   priority; here we only set width/style and the rest of the card chrome. */
.mjc[b-3lb4dnrwh9] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 4px solid var(--pri-medium);
    border-radius: var(--r-lg);
    padding: 12px 14px;
    cursor: pointer;
}

/* role="button" div (not a native button), so the focus ring has to be added by hand -- native
   buttons/links get one from the browser for free. */
.mjc:focus-visible[b-3lb4dnrwh9] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.mjc-top[b-3lb4dnrwh9] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mjc-no[b-3lb4dnrwh9] {
    font-family: var(--f-mono);
    font-size: 12px;
    color: var(--brand);
}

/* Pushes the priority pill to the right edge. */
.mjc-spacer[b-3lb4dnrwh9] { flex: 1; }

.mjc-title[b-3lb4dnrwh9] {
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
    margin-top: 6px;
}

.mjc-asset[b-3lb4dnrwh9] {
    font-size: 12px;
    color: var(--ink-4);
    margin-top: 2px;
    font-family: var(--f-mono);
}
/* /Components/Shared/MobilePhotoPanel.razor.rz.scp.css */
.mpp[b-oyeh4okjmk] { display: flex; flex-direction: column; gap: 10px; }

.mpp-grid[b-oyeh4okjmk] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}

.mpp-thumb[b-oyeh4okjmk] {
    aspect-ratio: 1 / 1;
    border-radius: var(--r-sm);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--line);
    display: block;
}

/* The real <input> is hidden; the label is the styled "Take photo" button. */
.mpp-input[b-oyeh4okjmk] { display: none; }

.mpp-take[b-oyeh4okjmk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px;
    border: 1.5px dashed var(--line-strong);
    border-radius: var(--r-md);
    color: var(--brand);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.mpp-take-ico[b-oyeh4okjmk] { font-size: 16px; }
/* /Components/Shared/NotificationItem.razor.rz.scp.css */
/* Values from the reference NotificationItem.jsx: flex row, 10px gap, at least 44px tall, 11px
   padding, 1px --line border, --r-md corners, paper fill that turns --paper-2 on hover. */
.ni[b-54mn0ryork] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: var(--hit-min);
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--paper);
    cursor: pointer;
    box-sizing: border-box;
}
.ni:hover[b-54mn0ryork] {
    background: var(--paper-2);
}
.ni:focus-visible[b-54mn0ryork] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}
.ni.is-read[b-54mn0ryork] {
    opacity: 0.6;
}
.ni__title[b-54mn0ryork] {
    flex: 1;
    min-width: 0;
    font-family: var(--f-body);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ink);
}
.ni__when[b-54mn0ryork] {
    font-family: var(--f-mono);
    font-size: 11px;
    color: var(--ink-4);
    white-space: nowrap;
}
/* /Components/Shared/NotificationsDrawer.razor.rz.scp.css */
/* Rows 10px apart, buttons below with a little extra space (reference AssetsList drawer). */
.nd-list[b-4r1j7xu61o] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.nd-empty[b-4r1j7xu61o] {
    margin: 0;
    padding: 24px 0;
    text-align: center;
    color: var(--ink-4);
    font-size: 13px;
}
.nd-actions[b-4r1j7xu61o] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
.r360-pageheader[b-rq7yza5evt]{height:var(--pageheader-h);gap:12px;display:flex;align-items:center;justify-content:space-between;
  padding:0 26px;border-bottom:1px solid var(--line);background:var(--paper);flex-shrink:0}
.ph-actions[b-rq7yza5evt]{display:flex;align-items:center;gap:14px}

/* "+ New work order" quick-create link: the header's one blue pill. It's a plain <a>
   (not a <button>) since it just navigates and needs no interactivity of its own. */
.ph-newwo[b-rq7yza5evt]{display:inline-flex;align-items:center;gap:7px;min-height:36px;background:var(--brand);color:#fff;border:none;
  border-radius:var(--r-sm);padding:7px 13px;font-size:12.5px;font-weight:600;font-family:var(--f-body);cursor:pointer;
  text-decoration:none;white-space:nowrap}
.ph-newwo:hover[b-rq7yza5evt]{background:color-mix(in srgb, var(--brand-deep) 85%, #000);text-decoration:none}

/* Mobile: tighten the bar so it doesn't crowd. The bell stays. */
@media (max-width:900px){
  .r360-pageheader[b-rq7yza5evt]{padding:0 14px;gap:10px}
  .ph-actions[b-rq7yza5evt]{gap:10px;margin-left:auto}
}
/* /Components/Shared/PartCompatibleAssetsPanel.razor.rz.scp.css */
.pca-add-row[b-6aczoq2fda] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pca-asset[b-6aczoq2fda] {
    min-width: 240px;
}

.pca-notes[b-6aczoq2fda] {
    flex: 1 1 200px;
}

/* 44px minimum hit area with a visible fill, per the project's button convention. */
.pca-add[b-6aczoq2fda],
.pca-remove[b-6aczoq2fda] {
    min-height: var(--hit-min);
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-family: var(--f-body);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.pca-add[b-6aczoq2fda] {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.pca-add:disabled[b-6aczoq2fda] {
    border-color: var(--line);
    background: var(--line-soft);
    color: var(--ink-4);
    cursor: not-allowed;
}

.pca-remove[b-6aczoq2fda] {
    border-color: var(--danger);
    color: var(--danger);
}

.pca-actions[b-6aczoq2fda] {
    text-align: right;
}

.pca-link[b-6aczoq2fda] {
    color: var(--brand);
    font-weight: 600;
}

.pca-empty[b-6aczoq2fda] {
    text-align: center;
    color: var(--ink-4);
    padding: 20px;
}
/* /Components/Shared/PartCrossReferencePanel.razor.rz.scp.css */
.pcr-add-row[b-z7jnlttwti] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.pcr-part[b-z7jnlttwti] {
    min-width: 240px;
}

.pcr-type[b-z7jnlttwti] {
    min-width: 140px;
}

.pcr-notes[b-z7jnlttwti] {
    flex: 1 1 200px;
}

/* 44px minimum hit area with a visible fill, per the project's button convention. */
.pcr-add[b-z7jnlttwti],
.pcr-remove[b-z7jnlttwti] {
    min-height: var(--hit-min);
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-family: var(--f-body);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.pcr-add[b-z7jnlttwti] {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.pcr-add:disabled[b-z7jnlttwti] {
    border-color: var(--line);
    background: var(--line-soft);
    color: var(--ink-4);
    cursor: not-allowed;
}

.pcr-remove[b-z7jnlttwti] {
    border-color: var(--danger);
    color: var(--danger);
}

.pcr-actions[b-z7jnlttwti] {
    text-align: right;
}

.pcr-link[b-z7jnlttwti] {
    color: var(--brand);
    font-weight: 600;
}

.pcr-empty[b-z7jnlttwti] {
    text-align: center;
    color: var(--ink-4);
    padding: 20px;
}
/* /Components/Shared/PartPurchaseHistoryPanel.razor.rz.scp.css */
.pph-note[b-je7hg6pt7x] {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--ink-4);
}

.pph-empty[b-je7hg6pt7x] {
    margin: 6px 0;
    font-size: 13px;
    color: var(--ink-4);
}

.pph-headline[b-je7hg6pt7x] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

.pph-label[b-je7hg6pt7x] {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-3);
}

.pph-value[b-je7hg6pt7x] {
    font-family: var(--f-mono);
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
}

.pph-sub[b-je7hg6pt7x] {
    font-size: 11px;
    color: var(--ink-4);
}

.pph-num[b-je7hg6pt7x] {
    font-family: var(--f-mono);
    font-size: 12px;
}

.pph-po[b-je7hg6pt7x] {
    color: var(--brand);
    font-weight: 600;
}
/* /Components/Shared/PartStockByPlantPanel.razor.rz.scp.css */
.psp-head[b-pen20cm6ly] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

/* 44px minimum hit area per the project's button convention, with a visible border so neither
   control reads as decoration. */
.psp-add[b-pen20cm6ly],
.psp-edit[b-pen20cm6ly],
.psp-save[b-pen20cm6ly],
.psp-cancel[b-pen20cm6ly],
.psp-remove[b-pen20cm6ly] {
    min-height: var(--hit-min);
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-family: var(--f-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
    cursor: pointer;
}

.psp-add[b-pen20cm6ly],
.psp-save[b-pen20cm6ly] {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

.psp-remove[b-pen20cm6ly] {
    border-color: var(--danger);
    color: var(--danger);
}

.psp-actions[b-pen20cm6ly] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
}

.psp-num[b-pen20cm6ly] {
    font-family: var(--f-mono);
    font-size: 12px;
    font-weight: 600;
}

.psp-available[b-pen20cm6ly] {
    font-size: 10.5px;
    font-weight: 400;
    color: var(--ink-4);
}

.psp-editing[b-pen20cm6ly] {
    background: var(--wash, #f7fafc);
}

.psp-empty[b-pen20cm6ly] {
    text-align: center;
    color: var(--ink-4);
    padding: 20px;
}
/* /Components/Shared/PercentBar.razor.rz.scp.css */
/* src/Reliability360.Web/Components/Shared/PercentBar.razor.css */
/* Track and label on one row; the label is outside the fill so it is always ink on paper. */
.pctbar[b-7a1zdhzlbb] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pctbar__track[b-7a1zdhzlbb] {
    position: relative;
    flex: 1 1 auto;
    min-width: 48px;
    height: 10px;
    border-radius: var(--r-pill);
    background: var(--paper-3);
    overflow: hidden;
}

.pctbar__fill[b-7a1zdhzlbb] {
    height: 100%;
    border-radius: var(--r-pill);
}

/* Fixed width + tabular figures so a column of bars lines up whatever the percent. */
.pctbar__label[b-7a1zdhzlbb] {
    flex: 0 0 auto;
    min-width: 4ch;
    text-align: right;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.pctbar--success .pctbar__fill[b-7a1zdhzlbb] { background: var(--success); }
.pctbar--warning .pctbar__fill[b-7a1zdhzlbb] { background: var(--warning); }
.pctbar--danger .pctbar__fill[b-7a1zdhzlbb]  { background: var(--danger); }
.pctbar--info .pctbar__fill[b-7a1zdhzlbb]    { background: var(--info); }
.pctbar--neutral .pctbar__fill[b-7a1zdhzlbb] { background: var(--neutral); }
/* /Components/Shared/Pill.razor.rz.scp.css */
/* Status / priority tag (design system, Sep 28, 2026): 12px/600 text, 4px 8px padding,
   line-height 1.3, so a pill is 23.6px tall. Squared 3px corners (--r-tag), not a capsule.
   Tone by MEANING -- success done, warning due soon, danger overdue/failed, info in progress,
   neutral inactive -- using the status token pairs, each of which keeps its text at 4.5:1 on its
   own background. */
.pill[b-mizvkqqg9z] {
    display: inline-flex;
    /* Without this, an inline-flex element defaults to baseline vertical alignment. Inside a
       table cell (r360-table), a baseline-aligned pill taller than the cell's own line-height
       forces the whole line box -- and therefore the table row -- to grow to fit it, silently
       inflating row height on every row that carries a Status/Criticality pill (found via live
       browser verification, _qa/verify-list-density.mjs). middle-aligning the pill with the
       surrounding text keeps it from stretching the row. */
    vertical-align: middle;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--r-tag);
    font-family: var(--f-body);
    font-size: var(--fs-pill);
    font-weight: 600;
    /* Explicit, so the pill doesn't inherit the body's 1.55 leading: 12px x 1.3 + 8px padding =
       23.6px. A row carrying a pill is therefore about 39px (23.6 + 14 cell padding + 1 border). */
    line-height: 1.3;
    white-space: nowrap;
}

.pill--success[b-mizvkqqg9z] { background: var(--success-bg); color: var(--success); }
.pill--warning[b-mizvkqqg9z] { background: var(--warning-bg); color: var(--warning); }
.pill--danger[b-mizvkqqg9z]  { background: var(--danger-bg);  color: var(--danger); }
.pill--info[b-mizvkqqg9z]    { background: var(--info-bg);    color: var(--info); }
.pill--neutral[b-mizvkqqg9z] { background: var(--neutral-bg); color: var(--neutral); }

/* Square status marker in the pill's own text colour, with the design system's 1px corner
   (as in the reference Pill.jsx) -- squared to match the machined look, not a round dot. */
.pill__dot[b-mizvkqqg9z] {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: currentColor;
    flex-shrink: 0;
}
/* /Components/Shared/RecordNav.razor.rz.scp.css */
/* Previous / Next record navigation, sitting beside Back above a detail page's ActionBar. Styled
   as links rather than buttons because that is what they are -- each one navigates to a URL. The
   44px minimum height matches the project's touch-target rule so they stay usable on a tablet on
   the plant floor, where these pages are often read. */
.r360-recnav-bar[b-mccxsznxfm] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.r360-recnav[b-mccxsznxfm] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.r360-recnav-link[b-mccxsznxfm] {
    display: inline-flex;
    align-items: center;
    min-height: var(--hit-min);
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--brand);
    cursor: pointer;
}

.r360-recnav-link:hover:not(.r360-recnav-disabled)[b-mccxsznxfm] {
    text-decoration: underline;
}

/* End of the sequence: kept in place but visibly inert, so the row does not reflow when the user
   reaches the first or last record. */
.r360-recnav-disabled[b-mccxsznxfm] {
    color: var(--ink-4);
    cursor: default;
    opacity: 0.55;
}

/* "12 of 240" -- monospaced so the width does not jitter as the user pages through records. */
.r360-recnav-pos[b-mccxsznxfm] {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--ink-4);
    white-space: nowrap;
}
/* /Components/Shared/RecordPicture.razor.rz.scp.css */
/* Stacked layout (Overview card): thumbnail, buttons underneath. */
.rp[b-r94bfgwnqp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

/* Compact layout (beside the page title): thumbnail, buttons stacked to its right. */
.rp--compact[b-r94bfgwnqp] {
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

/* Square frame; size comes from the Size parameter as an inline width/height. */
.rp-frame[b-r94bfgwnqp] {
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
}

/* contain, not cover: a nameplate or a long shaft must not be cropped out of the thumbnail. */
.rp-img[b-r94bfgwnqp] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.rp-frame--empty[b-r94bfgwnqp] {
    color: var(--ink-4);
    gap: 2px;
    align-content: center;
    border-style: dashed;
}

.rp-empty-text[b-r94bfgwnqp] {
    font-size: 11px;
}

.rp-actions[b-r94bfgwnqp] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rp--compact .rp-actions[b-r94bfgwnqp] {
    flex-direction: column;
}

/* Bordered secondary button with the project's 44px minimum hit area. Shared by the file-picker
   label and the Remove button so both read as the same kind of control. */
.rp-btn[b-r94bfgwnqp] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--hit-min);
    padding: 0 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

.rp-btn:hover[b-r94bfgwnqp] {
    background: var(--paper-3);
}

.rp-btn:disabled[b-r94bfgwnqp],
.rp-btn--busy[b-r94bfgwnqp] {
    opacity: 0.6;
    cursor: progress;
}

/* Keyboard users tab onto the hidden file input; show the focus ring on its visible label. */
.rp-btn:focus-within[b-r94bfgwnqp] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Hide the native file input but keep it operable through the wrapping label. InputFile renders
   its own <input> (a child component), which doesn't carry this component's scope attribute,
   hence ::deep. */
.rp-btn[b-r94bfgwnqp]  input[type=file] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
}
/* /Components/Shared/RecordThumb.razor.rz.scp.css */
/* Square frame; never shrinks, so a long name wraps beside it instead of squeezing it. */
.rt[b-wvap5svpbz] {
    flex: none;
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper-2);
    color: var(--ink-4);
}

/* cover (unlike the detail page's contain): at 40px a cropped edge doesn't matter, and a filled
   square reads as a tidy column down the list. */
.rt-img[b-wvap5svpbz] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* /Components/Shared/ReportCard.razor.rz.scp.css */
/* Report catalog card. Rendered as an anchor, so link defaults are reset explicitly. */
.report-card[b-5n1z3m3n5l] {
    display: block;
    text-decoration: none;
    background: var(--paper, #fff);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 18px;
    transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}

.report-card:hover[b-5n1z3m3n5l] {
    transform: translateY(-2px);
    border-color: var(--brand-bright);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-ink) 8%, transparent);
}

/* Keyboard users get the same affordance as the hover state. */
.report-card:focus-visible[b-5n1z3m3n5l] {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.report-card__title[b-5n1z3m3n5l] {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--ink);
    margin-bottom: 4px;
}

.report-card__question[b-5n1z3m3n5l] {
    font-size: 12.5px;
    /* Accessibility audit [A3]: was hardcoded #8b97a8 (2.96:1 on white) instead of referencing the
       app-wide --ink-4 token -- real content (report subtext), needs 4.5:1. */
    color: var(--ink-4);
    line-height: 1.4;
}

/* Live figure. Reserves its line whether or not a number is present yet. */
.report-card__headline[b-5n1z3m3n5l] {
    display: inline-block;
    margin-top: 12px;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--brand-ink);
    background: #eef2f8;
    border-radius: var(--r-tag);
    padding: 3px 10px;
    min-width: 90px;
}

/* Pending: same box, shimmering, no text. */
.report-card__headline--pending[b-5n1z3m3n5l] {
    color: transparent;
    background: linear-gradient(90deg, #eef2f8 25%, #e3e9f2 37%, #eef2f8 63%);
    background-size: 400% 100%;
    animation: report-card-shimmer-b-5n1z3m3n5l 1.4s ease infinite;
}

@keyframes report-card-shimmer-b-5n1z3m3n5l {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* Users who ask for less motion get a static placeholder. */
@media (prefers-reduced-motion: reduce) {
    .report-card__headline--pending[b-5n1z3m3n5l] { animation: none; }
}
/* /Components/Shared/ReportShell.razor.rz.scp.css */
.report-shell[b-en46jwpuai] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 22px;
    margin-top: 18px;
}

.report-shell-title[b-en46jwpuai] {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 14px;
}

.report-msg[b-en46jwpuai] {
    font-size: 13px;
    color: var(--ink-4);
    padding: 24px 0;
    text-align: center;
}

.report-alert[b-en46jwpuai] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: var(--danger);
    border-radius: var(--r-lg);
    padding: 14px 16px;
    font-size: 13px;
}

.report-retry[b-en46jwpuai] {
    border: 1px solid var(--danger);
    background: #fff;
    color: var(--danger);
    border-radius: var(--r-sm);
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.report-retry:hover[b-en46jwpuai] {
    background: var(--danger);
    color: #fff;
}

/* Empty state: what there isn't, why, and where to go. Centred and quiet -- it is information,
   not an error. */
.report-empty[b-en46jwpuai] {
    text-align: center;
    padding: 44px 24px;
    color: #5a6a7e;
}

.report-empty__msg[b-en46jwpuai] { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.report-empty__action[b-en46jwpuai] { font-size: 13px; color: var(--ink-4); margin: 0 0 14px; max-width: 46ch; display: inline-block; }

.report-empty__link[b-en46jwpuai] {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    border: 1px solid #cfe4f5;
    border-radius: var(--r-sm);
    padding: 6px 16px;
}
.report-empty__link:hover[b-en46jwpuai] { background: #f2f9fe; }
/* /Components/Shared/SaveGuardButton.razor.rz.scp.css */
/* SaveGuardButton renders its own <button class="r360-btn r360-btn--primary"> rather than wrapping
   Btn.razor (see the component's header comment for why). Those class names are real, but the rules
   behind them live in Btn.razor.css -- and Blazor scoped CSS rewrites every selector in that file
   with Btn.razor's own scope attribute, which is never emitted onto markup rendered by a different
   component. The result was a Save button that carried the right classes and none of the styling:
   it rendered as a bare browser default control, which users reported as "the Save button does not
   look like a button".

   Duplicating the rules here (rather than moving them to a global stylesheet) keeps Btn.razor.css
   authoritative for Btn and keeps this file's scope limited to the one button that needs it. Values
   are copied verbatim from Btn.razor.css's .r360-btn / .r360-btn--primary -- if the brand blue
   changes, both files change together. */
.r360-btn[b-mkdbac59ch] {
    border-radius: var(--r-sm) !important;
    border: none;
    cursor: pointer;
    font-family: 'Helvetica LT', 'Helvetica Neue', Helvetica, sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    min-width: 60px !important;
    /* 44px, not Btn's 36px: this is a primary Save action and the project's touch-target rule asks
       for a 44x44 minimum hit area on controls a technician taps on a tablet. */
    height: var(--hit-min) !important;
    padding: 9px 16px !important;
    line-height: 1;
}

/* Same AA-safe, per-customer fill as Btn's primary variant (see Btn.razor.css). */
.r360-btn--primary[b-mkdbac59ch] {
    background: var(--brand) !important;
    color: #fff !important;
}

/* While the guarded click is in flight the button disables itself; make that visible rather than
   leaving a full-strength blue button that appears to have ignored the click. */
.r360-btn:disabled[b-mkdbac59ch] {
    opacity: 0.6;
    cursor: progress;
}
/* /Components/Shared/StatCard.razor.rz.scp.css */
/* KPI tile (design system, Sep 28, 2026): at least 118px tall, mono eyebrow on top, 38px display
   value pinned to the bottom (the value row in StatCard.razor has margin-top:auto), optional sub
   line under it. Inside a StatStrip the frame supplies the border and corners instead (see
   StatStrip.razor.css). */
.statcard[b-47qyr27zu3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 118px;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 22px;
}

.statcard__eyebrow[b-47qyr27zu3] {
    font-family: var(--f-body);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    color: var(--ink-3);
}

/* tabular-nums keeps digits the same width, so tiles side by side line their numbers up. */
.statcard__value[b-47qyr27zu3] {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: var(--fs-stat);
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.statcard__unit[b-47qyr27zu3] {
    font-family: var(--f-mono);
    font-size: 13px;
    color: var(--ink-4);
}

.statcard__sub[b-47qyr27zu3] {
    font-size: var(--fs-sub);
    line-height: 18px;
    color: var(--ink-3);
}
/* /Components/Shared/StatStrip.razor.rz.scp.css */
/* One frame, tiles separated by 1px hairlines: the grid gap shows the frame's --line background
   between tiles. overflow:hidden clips the square tile corners to the frame's rounded ones. */
.statstrip[b-893jz34wwl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    overflow: hidden;
}

/* The frame draws the border and corners, so each tile drops its own. ::deep reaches the
   StatCard's root element, which belongs to that child component's CSS scope. */
.statstrip[b-893jz34wwl]  .statcard {
    border: none;
    border-radius: 0;
    background: var(--paper);
}
/* /Components/Shared/TreeTable.razor.rz.scp.css */
/* Indentation is a CSS custom property set per row, so depth stays out of the markup's inline
   styling and the step size is tunable in one place. */
.tt-name[b-5kclmh3w6v] {
    padding-left: calc(14px + var(--tt-depth, 0) * 20px) !important;
    white-space: nowrap;
}

.tt-label[b-5kclmh3w6v] {
    font-weight: 600;
    color: var(--ink);
}

/* Expander: a button drawn small (18px glyph) so it does not inflate the row height the density
   pass reduced, but padded out into a bigger invisible hit box via negative margins so it still
   clears the touch-target minimum.

   The padding/negative-margin values below are sized against the CURRENT row height, not an
   arbitrary 44x44: a row is ~34px tall net (app.css's shared ".r360-table th, .r360-table td"
   rule's 7px top+bottom cell padding, plus the row's own ~20.4px content line height -- see
   TableDensityTests.Table_cells_use_the_compact_padding). Because the negative margin only
   repositions the button within the line, not shrink its own border box, this button's rendered
   border-box height is content(18) + padding*2 + border*2 -- and that whole box paints/hit-tests
   even where the negative margin has pulled it outside the line. It only stays inside THIS row
   (rather than bleeding into the row above/below) as long as that border-box height is no taller
   than the row's own padding-inclusive height (~34px): the row's 7px top/bottom cell padding is
   exactly the slack available around the button before it crosses into a neighboring row.

   Padding of 6px keeps this comfortably inside that budget: border-box height =
   18 + 2*6 (padding) + 2*1 (border) = 32px, under the ~34px row height, and the hit box is a
   32x32 square -- above WCAG 2.2 SC 2.5.8's 24x24 minimum but no longer bigger than the row that
   contains it. (A previous 13px padding produced a 46px border box against a 34px row, so the
   excess ~12px split ~6px over the top and ~6px under the bottom into whichever row was painted
   later -- that row's expander won hit-testing in the overlap band. Do not raise this back
   toward 13px without re-checking it against the row height in app.css.) */
.tt-expander[b-5kclmh3w6v] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: -6px 8px -6px 0;
    padding: 6px;
    box-sizing: content-box;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--paper);
    font-family: var(--f-mono);
    font-size: 13px;
    line-height: 1;
    color: var(--ink-3);
    cursor: pointer;
}

.tt-expander:hover[b-5kclmh3w6v] {
    border-color: var(--brand);
    color: var(--brand);
}

.tt-expander:focus-visible[b-5kclmh3w6v] {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

/* Leaves get the same horizontal space the expander occupies, so labels at one depth align. */
.tt-expander-spacer[b-5kclmh3w6v] {
    display: inline-block;
    width: 20px;
    margin-right: 8px;
}

.tt-navigable[b-5kclmh3w6v] {
    cursor: pointer;
}

.tt-empty[b-5kclmh3w6v] {
    text-align: center;
    color: var(--ink-4);
    padding: 24px;
}
/* /Components/Shared/TypeBadge.razor.rz.scp.css */
/* src/Reliability360.Web/Components/Shared/TypeBadge.razor.css */
.type-badge[b-matcymrw3v] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--r-tag);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* /Components/Shared/ViewModeToggle.razor.rz.scp.css */
.vm-group[b-dlw1a9g77j] {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    overflow: hidden;
}

/* Minimum 44px hit area per the project's button convention, and a visible fill on the active
   side so neither option reads as decoration. */
.vm-btn[b-dlw1a9g77j] {
    min-width: 64px;
    min-height: var(--hit-min);
    padding: 0 14px;
    border: none;
    background: var(--paper);
    font-family: var(--f-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-3);
    cursor: pointer;
}

.vm-btn + .vm-btn[b-dlw1a9g77j] {
    border-left: 1px solid var(--line);
}

.vm-btn-active[b-dlw1a9g77j] {
    background: var(--brand);
    color: #fff;
}

.vm-btn:focus-visible[b-dlw1a9g77j] {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}
/* /Components/Shared/WorkOrderMetaPanel.razor.rz.scp.css */
/* Read-only facts strip: a wrap row of label/value pairs in one tidy card.
   Moved verbatim from WorkOrdersDetail.razor.css when the markup moved here -- Blazor's scoped
   CSS attribute is only applied to the declaring component's own elements, so these rules had to
   travel with the strip or it would have lost its styling entirely. */
.wod-meta[b-1t0n4op3n6] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 32px;
    background: linear-gradient(180deg, #fbfdff 0%, #fff 100%);
    border: 1px solid #e3eaf2;
    border-radius: var(--r-lg);
    padding: 14px 18px;
    margin-bottom: 16px;
}
.wod-meta-item[b-1t0n4op3n6] { display: flex; flex-direction: column; gap: 2px; }
.wod-meta-label[b-1t0n4op3n6] {
    font-family: var(--f-body);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-4);
}
.wod-meta-value[b-1t0n4op3n6] { font-size: 14px; font-weight: 600; color: var(--ink); }
.wod-mono[b-1t0n4op3n6] { font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* Asset id + full name. The item may grow wider than its neighbours (a long name is the point),
   but never past the strip: max-width keeps it inside the card and overflow-wrap:anywhere breaks
   an unusually long unspaced name instead of letting it overflow. */
.wod-meta-item--asset[b-1t0n4op3n6] { min-width: 0; max-width: 100%; }
.wod-meta-asset[b-1t0n4op3n6] { overflow-wrap: anywhere; }
a.wod-meta-asset[b-1t0n4op3n6] { color: var(--text-link); text-decoration: none; }
a.wod-meta-asset:hover[b-1t0n4op3n6], a.wod-meta-asset:focus-visible[b-1t0n4op3n6] { text-decoration: underline; }
/* Note that a manager corrected a closed job's costs; muted like the other cost qualifiers. */
.wod-meta-correction[b-1t0n4op3n6] { margin: 4px 0 0; font-size: 12px; color: var(--ink-3); }
/* /Components/Shared/WorkOrderStatusCard.razor.rz.scp.css */
/* src/Reliability360.Web/Components/Shared/WorkOrderStatusCard.razor.css */
.wsc-card[b-b2npgs292h] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 20px 22px 22px;
}

.wsc-head[b-b2npgs292h] { margin-bottom: 12px; }

.wsc-title[b-b2npgs292h] { font-weight: 700; font-size: 16px; color: var(--ink); }

.wsc-sub[b-b2npgs292h] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 3px;
}

.wsc-intro[b-b2npgs292h] {
    font-size: 13px;
    color: var(--ink-4);
    margin: 0 0 14px;
    line-height: 1.5;
}

.wsc-row[b-b2npgs292h] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--line-soft);
}

.wsc-name[b-b2npgs292h] {
    flex: 0 0 160px;
    font-size: 14px;
    color: var(--ink);
    cursor: text;
}

.wsc-control[b-b2npgs292h] {
    flex: 1;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 12px;
    color: var(--ink-4);
    cursor: help;
}

.wsc-lock[b-b2npgs292h] {
    opacity: .55;
    flex-shrink: 0;
}

.wsc-input[b-b2npgs292h], .wsc-select[b-b2npgs292h] {
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    outline: none;
}

.wsc-input-name[b-b2npgs292h] { flex: 0 0 160px; }
.wsc-select[b-b2npgs292h] { flex: 0 0 120px; }

.wsc-addrow[b-b2npgs292h] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}
/* /Components/Shared/WorkOrderTypeCard.razor.rz.scp.css */
/* src/Reliability360.Web/Components/Shared/WorkOrderTypeCard.razor.css */
.wtc-card[b-yzgqad0h2r] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: 20px 22px 22px;
}

.wtc-head[b-yzgqad0h2r] { margin-bottom: 12px; }

.wtc-title[b-yzgqad0h2r] { font-weight: 700; font-size: 16px; color: var(--ink); }

.wtc-sub[b-yzgqad0h2r] {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--ink-4);
    margin-top: 3px;
}

.wtc-row[b-yzgqad0h2r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 2px;
    border-bottom: 1px solid var(--line-soft);
}

.wtc-swatch[b-yzgqad0h2r] {
    width: 18px;
    height: 18px;
    border-radius: var(--r-xs);
    border: 1px solid var(--line);
    flex-shrink: 0;
}

.wtc-name[b-yzgqad0h2r] {
    flex: 0 0 160px;
    font-size: 14px;
    color: var(--ink);
    cursor: text;
}

.wtc-desc[b-yzgqad0h2r] {
    flex: 1;
    font-size: 13px;
    color: var(--ink-4);
    cursor: text;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wtc-lock[b-yzgqad0h2r] {
    opacity: .55;
    flex-shrink: 0;
}

.wtc-input[b-yzgqad0h2r] {
    font-size: 14px;
    font-family: inherit;
    color: var(--ink);
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    padding: 6px 10px;
    outline: none;
}

/*
 * Fixed-width slot for the colour picker's input. The width lives here, not on the
 * MudColorPicker's Style, because MudPicker copies Style onto its popover paper as well and
 * would shrink the dropdown to the same 52px (see the note atop WorkOrderTypeCard.razor).
 */
.wtc-picker[b-yzgqad0h2r] {
    flex: 0 0 52px;
    width: 52px;
}

.wtc-input-name[b-yzgqad0h2r] { flex: 0 0 160px; }
.wtc-input-desc[b-yzgqad0h2r] { flex: 1; }

.wtc-addrow[b-yzgqad0h2r] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}