/* =============================================================
   app.css
   -------------------------------------------------------------
   Component styles — tokens live in wwwroot/css/theme.css and are
   imported below. Every color on this page is expected to flow
   from a var(--token). Hard-coded hex values that remain are
   either (a) locked status colors (mapped via tokens), or
   (b) known pre-theme holdovers being swept incrementally.
   ============================================================= */
@import url("css/theme.css");

html, body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
}

a, .btn-link {
    color: var(--accent-strong);
}

code {
    background: rgba(19, 29, 48, 0.06);
    border-radius: 0.5rem;
    padding: 0.15rem 0.4rem;
    color: #253349;
}

.top-row {
    display: flex;
    min-height: 4.5rem;
    background: rgba(255, 249, 241, 0.66);
    border-bottom: 1px solid rgba(12, 21, 36, 0.06);
    backdrop-filter: blur(18px);
}

.content {
    padding: 2rem 0 3rem;
}

.page-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.bid-workspace-page {
    gap: 0.75rem;
}

.hero-panel,
.surface-card,
.metric-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.hero-panel {
    display: grid;
    gap: 1.25rem;
    padding: 1.2rem;
    background: var(--surface);
    color: var(--text);
}

.hero-panel.compact {
    background: var(--surface);
}

.hero-panel::after {
    display: none;
}

.eyebrow {
    margin: 0 0 0.65rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-strong);
}

.hero-panel h1,
.surface-card h2,
.surface-card h3 {
    margin: 0;
    font-family: inherit;
}

/* PBI #15260 — bare h2/h3 inside .surface-card had no explicit
   font-size so they inherited Bootstrap's defaults (h2 = 2rem,
   h3 = 1.75rem), which read as page-headline weight against the
   card's body copy. Lock card-internal headings to a uniform
   1rem so the visual hierarchy is "card title sits at body
   weight, +bold" — consistent with the rest of the design
   system (cf. .purchase-orders-detail-header h2 / .linked-products-header h2).
   Pages that want a louder card heading already opt into
   .app-headline explicitly. */
.surface-card h2,
.surface-card h3 {
    font-size: 1rem;
    line-height: 1.25;
}

.hero-copy {
    max-width: 56rem;
    margin: 1rem 0 0;
    line-height: 1.6;
    color: var(--text-muted);
}

.hero-meta,
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border-radius: 999px;
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.1;
}

.status-pill.success {
    background: var(--status-success-soft);
    color: var(--status-success);
    border: 1px solid color-mix(in oklab, var(--status-success) 22%, transparent);
}

.status-pill.warning {
    background: var(--status-warning-soft);
    color: var(--status-warning);
    border: 1px solid color-mix(in oklab, var(--status-warning) 25%, transparent);
}

.status-pill.danger,
.status-pill.error {
    background: var(--status-danger-soft);
    color: var(--status-danger);
    border: 1px solid color-mix(in oklab, var(--status-danger) 25%, transparent);
}

.status-pill.neutral {
    background: var(--surface-sunken);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

/* PBI #15271 — every page-level "_statusMessage" surface migrated to
   the app-wide ToastService (<AppToast /> in MainLayout). What's left
   that still uses .status-banner is inline contextual alerts tied to
   a specific UI section: paste-import errors, AI-enrich errors, share
   errors, payment-plan errors, the BidDiagram RoomRig empty-state,
   the auth-state messages on Login/LoginReset/Contact/AboutEula, and
   the Bids access-denied chip. Those are persistent panel-level
   indicators (not transient one-off events), so they kept the class.
   Don't reach for .status-banner from new code — use ToastService for
   transient feedback. */
.status-banner {
    border-radius: var(--radius-md);
    padding: 0.9rem 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    border: 1px solid transparent;
}

/* Helper / instructional prose — annotated with .app-help-text to
   opt into the global hide/show toggle. The gear-menu "Hide helper
   text" option stamps data-help="hide" on <html> (via
   wwwroot/js/help-visibility.js); pros get a quieter UI, newbies
   keep the guide rails. The rule is display:none rather than
   visibility:hidden so layout reclaims the space. */
html[data-help="hide"] .app-help-text {
    display: none !important;
}


.status-banner.success {
    background: var(--status-success-soft);
    color: var(--status-success);
    border-color: color-mix(in oklab, var(--status-success) 25%, transparent);
}

/* .inventory-page no longer overrides the page-stack gap — that
   half-rem shrink caused the tab-strip around the Products-area
   sub-nav to jump when navigating from Products (1.5rem) to
   Inventory (was 1rem). Inventory now uses the default 1.5rem so
   the visual rhythm matches Products / Manufacturers / Suppliers.
   Exports keeps its override because it has its own (tighter) flow. */
.export-page {
    gap: 1rem;
}

/* Preview page Option-C quick-controls card — the compact top row of
   the six knobs users actually change per bid (Style · Phase ·
   Selection · Opening · Closing · Include cover). Everything else
   lives in the Advanced options <details> near the bottom of the
   page. Grid auto-fits so it wraps nicely on narrower viewports. */
.preview-quick-controls-card {
    padding: 0.75rem 1rem;
}

.preview-quick-grid {
    display: grid;
    /* Six-column base so each cell gets a predictable slice — Style
       and Phase were hogging space before because auto-fit let them
       expand to fill, which squeezed the 3-button Selection control
       into a wrapped mess. Explicit columns keep widths balanced. */
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: end;
}

/* Selection (3 segmented buttons) needs enough width for all three
   labels — let it take 2 columns so "Client bids + summary" doesn't
   wrap. */
.preview-quick-grid .preview-scope-strip {
    grid-column: span 2;
}

/* On narrower viewports (below ~960px) collapse to 2 columns so the
   dropdowns don't go microscopic. Selection stretches full-row on
   phone-ish widths. */
@media (max-width: 1024px) {
    .preview-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .preview-quick-grid .preview-scope-strip {
        grid-column: 1 / -1;
    }
}

.preview-quick-grid > label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0; /* lets <select> shrink instead of overflowing the cell */
}

.preview-quick-grid .preview-inline-choice {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.inventory-toolbar-card,
.export-setup-card {
    padding: 0.9rem 1rem;
}

.inventory-toolbar-strip {
    align-items: end;
}

.inventory-tab-strip {
    margin-top: 0.8rem;
}

.inventory-editor-card {
    display: grid;
    gap: 1rem;
}

.inventory-editor-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.inventory-editor-header h2,
.export-setup-card h2 {
    margin: 0.15rem 0 0;
    font-size: 1.15rem;
    letter-spacing: -0.02em;
}

.inventory-editor-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.inventory-editor-grid > label {
    display: grid;
    gap: 0.35rem;
}

.inventory-editor-grid__wide {
    grid-column: span 2;
}

.inventory-grid .e-gridcontent td,
.inventory-grid .e-headercell {
    font-size: 0.83rem;
}

.inventory-grid .e-rowcell,
.inventory-grid .e-headercell {
    padding-block: 0.55rem;
}

.export-columns-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.55rem 1rem;
}

.export-preview-table-wrap {
    overflow: auto;
}

.export-preview-table th,
.export-preview-table td {
    white-space: nowrap;
}

@media (max-width: 1024px) {
    .inventory-editor-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .inventory-editor-grid__wide {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .inventory-editor-grid {
        grid-template-columns: 1fr;
    }

    .inventory-editor-grid__wide {
        grid-column: span 1;
    }

    .inventory-editor-header {
        flex-direction: column;
    }
}

.status-banner.warning {
    background: var(--status-warning-soft);
    color: var(--status-warning);
    border-color: color-mix(in oklab, var(--status-warning) 25%, transparent);
}

.status-banner.error,
.status-banner.danger {
    background: var(--status-danger-soft);
    color: var(--status-danger);
    border-color: color-mix(in oklab, var(--status-danger) 25%, transparent);
}

.toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.45rem 0 0.7rem;
}

.toolbar-row--tight {
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.workspace-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    margin: 0 0 0.6rem;
}

.workspace-filter-search {
    min-width: 22rem;
    flex: 1 1 28rem;
}

.compact-toolbar {
    margin: 0;
}

.metric-grid,
.surface-grid,
.queue-list {
    display: grid;
    gap: 1rem;
}

.metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.metric-card {
    padding: 1.2rem;
    background: var(--surface);
}

.metric-label,
.flag-label,
.settings-field > span,
.legacy-filter-field > span {
    display: block;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* PBI #15241 — required-field indicator. Renders a red asterisk
   after the label text so the operator knows a field is required
   BEFORE submit. Pair with aria-required="true" on the input. */
.flag-label--required::after {
    content: " *";
    color: var(--status-danger);
    font-weight: 700;
}

/* PBI #15241 — inline per-field error message. Replaces the
   post-submit-only banner pattern for required-field failures so
   the error renders next to the offending input, not only at the
   top of the page. */
.field-error {
    display: block;
    margin-top: 0.3rem;
    color: var(--status-danger);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.metric-card strong {
    display: block;
    margin: 0.55rem 0 0.45rem;
    font-size: 2rem;
    color: var(--text);
}

.metric-card p,
.surface-card li,
.surface-card td,
.surface-card th,
.surface-card span,
.surface-card p {
    line-height: 1.6;
}

.surface-grid {
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-top: 1rem;
}

.filter-chip {
    border: 1px solid rgba(12, 21, 36, 0.12);
    background: rgba(255, 250, 244, 0.88);
    color: var(--text);
    border-radius: 999px;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    font: inherit;
}

.filter-chip.active {
    background: rgba(216, 136, 54, 0.12);
    border-color: rgba(216, 136, 54, 0.38);
    color: var(--accent-strong);
}

.surface-card {
    padding: 1rem;
}

.legacy-page-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.legacy-action-btn {
    min-height: 2.5rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid #d0d5dd;
    border-radius: 0.75rem;
    background: #ffffff;
    color: #344054;
    font: inherit;
    font-weight: 600;
}

.legacy-action-btn.green {
    background: #eff8ff;
    color: #175cd3;
}

.legacy-action-btn.red {
    background: #fef3f2;
    color: #b42318;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--field-min-md), 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* PBI #15247 — records variant for Address/City/State/Zip-style
   forms that live inside narrower wrapper panels (legacy
   two-up / three-up). Using a smaller floor keeps the column
   count consistent (~2 columns) across Client, Company, and
   BidDetail Jobsite instead of collapsing to 1 column at 220 px
   or stretching to 1 at 180 px. */
.form-grid--records {
    grid-template-columns: repeat(auto-fit, minmax(var(--field-min-sm), 1fr));
}

.compact-form-grid {
    gap: 0.72rem 0.85rem;
    margin-top: 0.75rem;
}

.compact-form-grid .form-control {
    min-height: 2.05rem;
    padding-top: 0.38rem;
    padding-bottom: 0.38rem;
}

.compact-form-grid .form-dropdown {
    width: 100%;
}

.compact-form-grid .form-dropdown.e-control-wrapper,
.compact-form-grid .form-dropdown.e-multicolumn-list {
    width: 100%;
}

.compact-form-grid .form-dropdown .e-input-group,
.compact-form-grid .form-dropdown .e-ddl,
.compact-form-grid .form-dropdown .e-control.e-dropdownlist,
.compact-form-grid .form-dropdown .e-control.e-combobox {
    min-height: 2.05rem;
}

.compact-form-grid .form-dropdown input {
    min-height: 2.05rem;
}

.notes-block {
    display: block;
    margin-top: 1rem;
}

.legacy-shell-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
}

.catalog-header-card {
    padding: 0.55rem 0.75rem 0.6rem;
}

.catalog-header-card .workspace-title-row {
    gap: 0.45rem;
}

.catalog-header-card h1 {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.05;
}

.catalog-header-card .workspace-meta {
    gap: 0.35rem;
}

.catalog-header-card .workspace-meta-pill {
    padding: 0.15rem 0.42rem;
    font-size: 0.7rem;
}

.catalog-header-card .workspace-client-inline {
    font-size: 0.75rem;
}

.compact-workspace-actions {
    align-items: flex-start;
    gap: 0.4rem;
}

.compact-workspace-actions .btn {
    min-height: 1.95rem;
    padding: 0.3rem 0.7rem;
    font-size: 0.78rem;
}

.catalog-input-warning {
    background: #fef2f2;
    border-color: rgba(220, 38, 38, 0.25);
}

.workspace-header-card {
    padding: 0.6rem 0.8rem 0.55rem;
}

.company-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(20rem, 0.9fr);
    gap: 1rem;
}

.company-form-panel,
.company-side-panel {
    padding: 1rem;
}

.company-form-panel h2,
.company-side-panel h2 {
    margin: 0;
}

.company-form-grid,
.preview-summary-grid {
    margin-top: 1rem;
}

.company-form-grid__wide {
    grid-column: 1 / -1;
}

.company-image-shell {
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--surface-sunken);
    padding: 0.85rem;
    box-shadow: var(--shadow-sm);
}

.company-image {
    width: 100%;
    max-height: 14rem;
    object-fit: contain;
    display: block;
}

.company-preview-stack {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.company-preview-stack p,
.preview-summary-grid p,
.preview-room-header span {
    margin: 0.15rem 0 0;
    color: var(--text-muted);
}

.rooms-layout {
    align-items: start;
}

.room-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.room-stat-grid .metric-card {
    padding: 0.9rem;
}

.preview-layout {
    align-items: start;
}

.preview-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}

.preview-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preview-room-section {
    display: grid;
    gap: 0.65rem;
    margin-top: 1rem;
}

.preview-room-section:first-of-type {
    margin-top: 0.75rem;
}

.preview-room-header {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: center;
}

.preview-room-header strong {
    font-size: 0.98rem;
    color: var(--text);
}

.preview-table td.numeric,
.preview-table th.numeric {
    text-align: right;
}

.purchase-orders-page {
    gap: 0.85rem;
}

.purchase-orders-toolbar-card,
.purchase-orders-grid-card,
.purchase-orders-detail-card {
    padding: 0.8rem;
}

.purchase-orders-command-strip {
    display: grid;
    gap: 0.7rem;
}

.purchase-orders-quick-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.purchase-orders-filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: end;
}

.purchase-orders-filter-field--search {
    min-width: 20rem;
    flex: 1 1 24rem;
}

.purchase-orders-go {
    min-width: 3.3rem;
}

.purchase-orders-view-toggle {
    display: inline-flex;
    gap: 0.4rem;
}

.purchase-orders-headline-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.purchase-orders-headline-row .app-headline {
    margin: 0;
}

.purchase-orders-row-menu {
    position: relative;
    display: inline-block;
}

.purchase-orders-row-menu > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    min-width: 1.8rem;
    text-align: center;
}

.purchase-orders-row-menu > summary::-webkit-details-marker {
    display: none;
}

.purchase-orders-row-menu__panel {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 20;
    min-width: 12rem;
    background: var(--surface, #fff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
    border-radius: 0.35rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.purchase-orders-row-menu__item {
    background: transparent;
    border: 0;
    text-align: left;
    padding: 0.4rem 0.65rem;
    font: inherit;
    color: inherit;
    border-radius: 0.25rem;
    cursor: pointer;
}

.purchase-orders-row-menu__item:hover,
.purchase-orders-row-menu__item:focus-visible {
    background: var(--surface-hover, rgba(0, 0, 0, 0.06));
}

.purchase-orders-grid-shell {
    padding-top: 0.75rem;
}

.purchase-orders-grid .e-gridcontent,
.purchase-orders-grid .e-headercontent {
    font-size: 0.83rem;
}

.purchase-orders-grid .e-rowcell,
.purchase-orders-grid .e-headercell {
    padding-top: 0.34rem;
    padding-bottom: 0.34rem;
}

.purchase-orders-primary-cell {
    display: grid;
    gap: 0.08rem;
}

.purchase-orders-primary-cell strong {
    font-size: 0.83rem;
    color: var(--text);
}

.purchase-orders-subline {
    font-size: 0.68rem;
    color: var(--text-muted);
}

.purchase-order-detail-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 1rem;
}

.purchase-order-detail-grid strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
    color: var(--text);
}

.purchase-order-summary-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.detail-inline-card {
    margin-top: 1rem;
    padding: 1rem;
}

.purchase-orders-row-actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.purchase-orders-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: start;
    margin-bottom: 0.75rem;
}

.purchase-orders-detail-header h2 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
}

.purchase-orders-detail-copy {
    margin: 0.22rem 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.purchase-orders-detail-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.purchase-orders-notes {
    margin: 0.8rem 0;
}

.po-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4rem;
    border-radius: 999px;
    padding: 0.14rem 0.46rem;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--surface-sunken);
    color: var(--text-muted);
}

.po-status-badge.is-open {
    background: color-mix(in oklab, #d7e2ef 55%, var(--surface));
    color: var(--text);
}

.po-status-badge.is-issued {
    background: color-mix(in oklab, #e5cc78 38%, var(--surface));
    color: var(--text);
}

.po-status-badge.is-received {
    background: color-mix(in oklab, #89a35f 34%, var(--surface));
    color: var(--text);
}

.po-status-badge.is-closed {
    background: color-mix(in oklab, #b8bec8 42%, var(--surface));
    color: var(--text);
}

.po-status-badge.is-cancelled {
    background: color-mix(in oklab, #cf7a6e 42%, var(--surface));
    color: var(--text);
}

@media (max-width: 1280px) {
    .purchase-orders-detail-header,
    .purchase-orders-detail-toolbar {
        display: grid;
    }

    .purchase-orders-filter-field--search {
        min-width: 100%;
    }
}

.workspace-header-main {
    display: grid;
    gap: 0.35rem;
}

.workspace-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.55rem;
}

.workspace-header-card h1 {
    margin: 0;
    font-size: clamp(1rem, 1.05vw, 1.18rem);
    line-height: 1.05;
}

.workspace-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.workspace-client-inline {
    font-size: 0.8rem;
    font-weight: 700;
    color: #0f172a;
}

.workspace-meta-pill {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(12, 21, 36, 0.1);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-muted);
    border-radius: 999px;
    padding: 0.2rem 0.48rem;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
}

.workspace-switcher-grid {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 1.2fr);
    gap: 0.5rem;
    margin-top: 0.45rem;
    padding: 0.55rem 0.6rem 0.65rem;
    border: 1px solid rgba(23, 92, 211, 0.14);
    border-radius: 0.95rem;
    background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.workspace-switcher-grid > label,
.workspace-dropdown-shell {
    display: grid;
    gap: 0.22rem;
    position: relative;
}

.workspace-switcher-grid .flag-label {
    color: #1d4ed8;
    font-size: 0.62rem;
    letter-spacing: 0.14em;
}

.workspace-picker-button {
    width: 100%;
    display: grid;
    gap: 0.12rem;
    text-align: left;
    border-radius: 0.85rem;
    border: 1px solid rgba(23, 92, 211, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 4px 14px rgba(23, 92, 211, 0.08);
    padding: 0.58rem 0.8rem;
    color: #0f172a;
}

.workspace-dropdown-shell:first-child .workspace-picker-button {
    border-color: rgba(16, 185, 129, 0.32);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.1);
}

.workspace-dropdown-shell:last-child .workspace-picker-button {
    border-color: rgba(245, 158, 11, 0.34);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.12);
}

.workspace-picker-primary {
    font-weight: 700;
    font-size: 0.96rem;
}

.workspace-picker-meta {
    color: var(--text-muted);
    font-size: 0.73rem;
}

.workspace-picker-panel {
    position: absolute;
    z-index: 18;
    top: calc(100% + 0.35rem);
    left: 0;
    right: 0;
    min-width: 0;
    border-radius: 0.9rem;
    border: 1px solid rgba(23, 92, 211, 0.18);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
    padding: 0.55rem;
}

.workspace-picker-toolbar,
.workspace-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
}

.workspace-picker-count {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.74rem;
    font-weight: 600;
}

.workspace-picker-table-wrap {
    max-height: 18rem;
    overflow: auto;
    margin: 0.45rem 0;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 0.7rem;
}

.workspace-picker-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.workspace-picker-table thead th {
    position: sticky;
    top: 0;
    background: #eef5ff;
    color: #47607f;
    font-size: 0.69rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.workspace-picker-table tbody td {
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid rgba(226, 232, 240, 0.75);
}

.workspace-picker-row-button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.workspace-picker-row-button:hover,
.workspace-picker-row-button:focus-visible {
    text-decoration: underline;
    outline: none;
}

.workspace-picker-table tbody tr {
    cursor: pointer;
}

.workspace-picker-table tbody tr:hover {
    background: rgba(23, 92, 211, 0.06);
}

.workspace-picker-table tbody tr.selected {
    background: rgba(23, 92, 211, 0.1);
}

.auth-shell {
    display: grid;
    place-items: center;
    padding: 2rem 1rem 3rem;
}

.auth-panel {
    width: min(38rem, 100%);
    display: grid;
    gap: 1rem;
}

.auth-panel--wide {
    width: min(68rem, 100%);
}

.auth-panel__intro {
    display: grid;
    gap: 0.35rem;
}

.auth-form-grid {
    display: grid;
    gap: 0.85rem;
}

.auth-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
}

.auth-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
    color: var(--text-muted);
}

.auth-state-card,
.auth-helper-panel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-state-card__actions {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.auth-state-card__actions form {
    margin: 0;
}

.auth-reset-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.auth-section {
    display: grid;
    gap: 0.85rem;
}

.auth-helper-copy {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
}

@media (max-width: 1024px) {
    .auth-reset-grid {
        grid-template-columns: 1fr;
    }

    .auth-state-card,
    .auth-helper-panel {
        display: grid;
    }
}

.workspace-header-card .workspace-picker.e-multicolumncombobox,
.workspace-header-card .workspace-picker .e-multicolumncombobox,
.workspace-header-card .workspace-picker.e-control-wrapper,
.workspace-header-card .workspace-picker .e-control-wrapper,
.workspace-header-card .workspace-picker.e-input-group,
.workspace-header-card .workspace-picker .e-input-group {
    border-radius: 0.85rem;
    border: 1px solid rgba(23, 92, 211, 0.28);
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    box-shadow: 0 4px 14px rgba(23, 92, 211, 0.08);
}

.workspace-header-card .workspace-picker .e-input,
.workspace-header-card .workspace-picker input {
    font-weight: 700;
    color: #0f172a;
}

.workspace-header-card .workspace-picker .e-input-group-icon,
.workspace-header-card .workspace-picker .e-ddl-icon,
.workspace-header-card .workspace-picker .e-multicolumn-list-icon {
    color: #1d4ed8;
}

.workspace-header-card .workspace-picker:hover .e-control-wrapper,
.workspace-header-card .workspace-picker:hover.e-control-wrapper,
.workspace-header-card .workspace-picker:hover .e-input-group,
.workspace-header-card .workspace-picker:hover.e-input-group {
    border-color: rgba(23, 92, 211, 0.45);
    box-shadow: 0 8px 18px rgba(23, 92, 211, 0.12);
}

.workspace-switcher-grid > label:first-child .workspace-picker.e-control-wrapper,
.workspace-switcher-grid > label:first-child .workspace-picker .e-control-wrapper,
.workspace-switcher-grid > label:first-child .workspace-picker.e-input-group,
.workspace-switcher-grid > label:first-child .workspace-picker .e-input-group {
    border-color: rgba(16, 185, 129, 0.32);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.1);
}

.workspace-switcher-grid > label:last-child .workspace-picker.e-control-wrapper,
.workspace-switcher-grid > label:last-child .workspace-picker .e-control-wrapper,
.workspace-switcher-grid > label:last-child .workspace-picker.e-input-group,
.workspace-switcher-grid > label:last-child .workspace-picker .e-input-group {
    border-color: rgba(245, 158, 11, 0.34);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.12);
}

.app-cta--icon {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.overlay-dialog-backdrop {
    position: fixed;
    inset: 0;
    /* PBI #15254 — base modal layer; see --z-dialog in theme.css. */
    z-index: var(--z-dialog);
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: color-mix(in oklab, var(--bg-strong) 42%, transparent);
    backdrop-filter: blur(6px);
}

.duplicate-dialog-shell {
    width: min(60rem, calc(100vw - 2.5rem));
    max-height: calc(100vh - 2.5rem);
    overflow: auto;
}

/*
 * Product-Picker modal (pivot mid-session): reinstates the legacy
 * category-tree affordance the compact-toolbar redesign dropped.
 * Two-pane: tree on the left, filtered product list on the right.
 * Theme-token colors only.
 */
.product-picker-shell {
    width: min(78rem, calc(100vw - 2rem));
    height: min(80vh, calc(100vh - 2rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.product-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.product-picker-body {
    display: grid;
    grid-template-columns: 18rem 1fr;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0; /* allow inner scrollers */
}

.product-picker-tree {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface-sunken);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.product-picker-search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.product-picker-tree__list {
    list-style: none;
    margin: 0;
    padding: 0.35rem;
    overflow: auto;
    flex: 1 1 auto;
}

.product-picker-tree__item {
    margin: 0;
}

.product-picker-tree__row,
.product-picker-tree__sub {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    text-align: left;
    border-radius: 0.35rem;
    cursor: pointer;
}

.product-picker-tree__row:hover,
.product-picker-tree__sub:hover {
    background: var(--brand-sea-soft);
}

.product-picker-tree__row.is-active,
.product-picker-tree__sub.is-active {
    background: var(--brand-sea);
    color: var(--text-inverse);
    font-weight: 600;
}

.product-picker-tree__sublist {
    list-style: none;
    margin: 0.15rem 0 0.35rem 0.85rem;
    padding: 0;
    border-left: 1px solid var(--border);
}

.product-picker-list {
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--surface);
    overflow: auto;
    min-height: 0;
}

.product-picker-empty {
    padding: 1.5rem;
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
}

.product-picker-products {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-picker-product {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.product-picker-product:hover {
    background: var(--brand-sea-soft);
}

.product-picker-product:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.product-picker-product__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.product-picker-product__model {
    font-weight: 600;
    color: var(--text);
}

.product-picker-product__price {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.product-picker-product__meta {
    margin-top: 0.15rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.product-picker-product__desc {
    margin: 0.25rem 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    /* Two-line clamp so the list scans cleanly. */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

@media (max-width: 1024px) {
    .product-picker-body {
        grid-template-columns: 1fr;
    }
    .product-picker-tree {
        max-height: 14rem;
    }
}

.duplicate-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.duplicate-dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}

.duplicate-dialog-grid > label,
.duplicate-dialog-choice-group {
    display: grid;
    gap: 0.35rem;
}

.duplicate-dialog-span-2 {
    grid-column: span 2;
}

.duplicate-dialog-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.duplicate-dialog-choice-group {
    padding: 0.9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-sunken);
}

.duplicate-dialog-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.products-alpha-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.7rem 0 0.75rem;
}

.products-alpha-button {
    min-width: 2.6rem;
    min-height: 1.8rem;
    padding: 0.18rem 0.52rem;
    border-radius: 0.55rem;
    border: 1px solid rgba(12, 21, 36, 0.14);
    background: #fffdf8;
    color: #475467;
    font-size: 0.76rem;
    font-weight: 700;
}

.products-alpha-button.active {
    background: linear-gradient(180deg, #eaffcf 0%, #d9ff96 100%);
    border-color: rgba(90, 151, 25, 0.42);
    color: #2b4d08;
}

.catalog-grid.e-grid .e-filterbarcell,
.linked-picker-grid.e-grid .e-filterbarcell {
    background: #dcfce7;
}

.catalog-grid.e-grid .e-row:hover .e-rowcell,
.linked-picker-grid.e-grid .e-row:hover .e-rowcell {
    background: rgba(14, 116, 144, 0.07);
}

.linked-picker-panel {
    padding: 0.8rem;
}

.linked-picker-toolbar {
    margin: 0.65rem 0 0.8rem;
}

.product-detail-page .legacy-panel-grid.two-up {
    align-items: start;
}

.product-photo-card {
    margin-top: 0.9rem;
}

.linked-products-shell {
    display: grid;
    gap: 0.85rem;
}

.linked-products-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.linked-products-header h2 {
    margin: 0.15rem 0 0.2rem;
    font-size: 1rem;
}

.linked-products-header p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.linked-products-table-wrap {
    overflow-x: auto;
}

.linked-products-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.linked-products-table th,
.linked-products-table td {
    padding: 0.5rem 0.55rem;
    border-bottom: 1px solid rgba(12, 21, 36, 0.08);
    vertical-align: middle;
}

.linked-products-table thead th {
    background: #eef6ff;
    color: #334155;
    font-size: 0.71rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.linked-model-link {
    padding: 0;
    border: 0;
    background: transparent;
    color: #175cd3;
    font-weight: 700;
    text-align: left;
}

.linked-subcopy {
    color: var(--text-muted);
    font-size: 0.74rem;
}

.linked-qty-input {
    min-width: 4.8rem;
    max-width: 5.5rem;
}

.linked-hide-toggle {
    margin: 0;
}

.linked-row-actions {
    display: flex;
    gap: 0.35rem;
    justify-content: flex-end;
}

.settings-shell {
    display: grid;
    gap: 0.9rem;
    padding: 0.9rem;
}

.settings-header-copy {
    margin: 0.1rem 0 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.settings-tab-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding-bottom: 0.2rem;
}

.settings-tab-button {
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgba(12, 21, 36, 0.14);
    border-radius: 999px;
    background: #fffdf8;
    color: #475467;
    font-size: 0.78rem;
    font-weight: 700;
}

.settings-tab-button.active {
    background: linear-gradient(180deg, #eef5ff 0%, #dbeafe 100%);
    border-color: rgba(23, 92, 211, 0.28);
    color: #175cd3;
}

.settings-panel-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
}

.settings-panel-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.settings-page .legacy-form-panel {
    display: grid;
    gap: 0.8rem;
}

.settings-page .legacy-form-panel h2 {
    margin: 0;
    font-size: 0.96rem;
}

.settings-field-grid {
    display: grid;
    gap: 0.68rem;
}

.settings-field {
    display: grid;
    gap: 0.25rem;
}

.settings-rate-grid-head,
.settings-event-head {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.settings-field--inline {
    max-width: 13rem;
}

/* PBI #15248 — unified checkbox-row primitive. .checkbox-row +
   .settings-check predated this and styled inline-checkbox labels
   three different ways (different paddings/min-heights); JobDetail's
   status row also reached for .legacy-filter-field which is a
   label-over-field shape, not a toggle, so the row of 5 status
   checkboxes rendered tighter than the same shape on Settings.
   .form-toggle is the canonical class going forward; the two legacy
   aliases share its base rules so existing markup keeps working. */
.form-toggle,
.checkbox-row,
.settings-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.9rem;
    font-size: 0.9rem;
}

.form-toggle--compact,
.settings-check--compact {
    justify-content: flex-start;
    min-height: 2.3rem;
}

.settings-inline-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.settings-rate-grid {
    display: grid;
    grid-template-columns: minmax(6.4rem, 1fr) repeat(2, minmax(5.2rem, 7rem));
    gap: 0.55rem;
    align-items: center;
}

.settings-rate-label,
.settings-event-label {
    font-size: 0.86rem;
    font-weight: 700;
    color: #0f172a;
}

.settings-event-table {
    display: grid;
    grid-template-columns: minmax(9rem, 1.35fr) minmax(12rem, 1fr) minmax(5.25rem, 0.45fr);
    gap: 0.55rem 0.7rem;
    align-items: center;
}

.settings-helper-copy {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.88rem;
}

.settings-note-stack {
    display: grid;
    gap: 0.7rem;
}

.settings-note-card {
    border: 1px solid rgba(12, 21, 36, 0.08);
    border-radius: 0.9rem;
    background: var(--surface-sunken);
    padding: 0.8rem 0.9rem;
}

.settings-note-card strong {
    display: block;
    margin-bottom: 0.3rem;
}

.settings-note-card p {
    margin: 0;
    color: var(--text-muted);
}

.empty-state-panel {
    display: grid;
    gap: 0.2rem;
    padding: 0.9rem 1rem;
    border: 1px dashed rgba(12, 21, 36, 0.14);
    border-radius: 0.85rem;
    background: #fbfcfe;
    color: var(--text-muted);
}

/* PBI #15278 — empty-state Inline variant. The Card variant
   (.empty-state-panel, rendered by <EmptyState>) gives a full
   dashed-border panel for system/filter empty list pages. The
   Inline variant is the lighter prose-style affordance for
   "this slot has no data yet" copy that lives BETWEEN other
   panel chrome (search row → editor side-panel, sub-section
   inside a card). Pre-#15278 the codebase had two parallel
   unstyled idioms for this — `.empty-state-copy` had no rule
   at all so it rendered as a default paragraph, and
   `.portal-empty` was scoped only inside Dashboard.razor.css
   so CommentThread + PortalBidDetail rendered bare text. Both
   are now aliases of the canonical `.empty-state-inline` so
   existing markup keeps working without churn. */
.empty-state-inline,
.empty-state-copy,
.portal-empty {
    margin: 0.35rem 0;
    padding: 0.75rem 0.9rem;
    border: 1px dashed var(--border);
    border-radius: 0.55rem;
    background: var(--surface-sunken, transparent);
    color: var(--text-muted);
    font-style: italic;
    text-align: center;
    line-height: 1.45;
}

.e-popup .e-multicolumn-list .e-gridheader {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-bottom: 1px solid rgba(23, 92, 211, 0.12);
}

.e-popup .e-multicolumn-list .e-row {
    font-size: 0.82rem;
}

.e-popup .e-multicolumn-list .e-row.e-active,
.e-popup .e-multicolumn-list .e-row:hover {
    background: #eff6ff;
}

.workspace-switcher-actions {
    margin: 0.3rem 0 0;
}

.workspace-rule-pills {
    margin-top: 0.3rem;
}

.workspace-rule-pills--subtle {
    margin-top: 0.1rem;
    opacity: 0.78;
}

.workspace-rule-pills--subtle .status-pill {
    padding: 0.18rem 0.46rem;
    font-size: 0.64rem;
}

.legacy-caption {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.35;
}

.legacy-list-shell,
.legacy-form-panel {
    background: rgba(255, 253, 250, 0.96);
}

.legacy-list-shell {
    padding: 0.8rem;
}

.workspace-operations-rail {
    margin-bottom: 0.4rem;
    border: 1px solid rgba(23, 92, 211, 0.12);
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #f9fcff 0%, #f4f8ff 100%);
    padding: 0.45rem 0.55rem;
}

.workspace-operations-row {
    margin-top: 0;
}

.workspace-operations-row > label,
.workspace-operations-row > .workspace-product-search {
    min-width: 10rem;
    flex: 1 1 10rem;
}

.workspace-operations-row--split {
    display: grid;
    grid-template-columns: minmax(14rem, 1.35fr) auto minmax(10rem, 1fr);
    gap: 0.45rem;
    align-items: end;
}

.workspace-operations-row--secondary {
    grid-template-columns: minmax(20rem, 1fr) auto;
}

.workspace-inline-actions {
    display: inline-flex;
    align-items: end;
    gap: 0.35rem;
    white-space: nowrap;
}

.workspace-inline-actions .btn {
    min-width: auto;
}

.workspace-inline-actions--secondary {
    justify-self: end;
}

.workspace-move-pair {
    display: inline-flex;
    align-items: stretch;
    gap: 0.2rem;
}

.workspace-move-pair .btn {
    min-width: auto;
}

.workspace-operations-row > .workspace-product-query {
    min-width: 12rem;
    flex: 1 1 12rem;
}

.workspace-product-search {
    min-width: 18rem;
    flex: 1.5 1 18rem;
}

.legacy-filter-row,
.legacy-workspace-toolbar,
.legacy-tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: end;
    /* margin-top removed 2026-04-23 — was 0.45rem, but combined with
       the parent .page-stack { gap: 1.5rem } it produced a gap size
       that varied by page because the content panel BELOW the strip
       also contributes its own top padding (legacy-list-shell vs
       app-panel vs company-layout). Letting page-stack's gap do all
       the vertical rhythm keeps the strip spacing identical across
       Products / Inventory / Manufacturers / Suppliers. */
}

.legacy-filter-row {
    margin-bottom: 1rem;
}

.legacy-list-shell .toolbar-row {
    margin-bottom: 1rem;
}

.room-summary-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.55rem;
}

.room-summary-copy h2 {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.1;
}

.room-summary-copy .legacy-caption {
    margin-top: 0.15rem;
}

.legacy-filter-cluster {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dashboard-filter-grid {
    display: grid;
    grid-template-columns: minmax(12rem, 0.9fr) minmax(18rem, 1.55fr) repeat(3, minmax(12rem, 0.85fr));
    gap: 0.7rem;
    align-items: end;
    margin-bottom: 0.85rem;
}

.legacy-filter-field {
    display: grid;
    gap: 0.25rem;
}

.dashboard-filter-field--wide {
    min-width: 0;
}

.legacy-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(12rem, 0.6fr) auto;
    gap: 0.75rem;
    align-items: center;
}

.legacy-filter-button,
.legacy-tab {
    border: 1px solid rgba(12, 21, 36, 0.12);
    background: #fff;
    color: var(--text);
    border-radius: 0.6rem;
    padding: 0.42rem 0.7rem;
    font: inherit;
    font-weight: 600;
    font-size: 0.82rem;
    line-height: 1.05;
    cursor: pointer;
}

.legacy-filter-button.active,
.legacy-tab.active {
    background: rgba(216, 136, 54, 0.14);
    border-color: rgba(216, 136, 54, 0.45);
    color: var(--accent-strong);
}

/* PBI #15216 — bid-workspace tab strip distinguishes in-page tab
   switching (plain buttons) from full-page nav-out (glyph + dashed
   separator) so the same .legacy-tab base style no longer reads as
   "same action" when half the buttons swap a panel and half navigate
   to a different page. */
.bid-workspace-tabs .legacy-tab--nav-out {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-style: dashed;
    color: var(--muted, #4a5468);
}

.bid-workspace-tabs .legacy-tab--nav-out .legacy-tab__nav-glyph {
    font-size: 0.78rem;
    line-height: 1;
    opacity: 0.75;
}

.bid-workspace-tabs .visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.legacy-select,
.legacy-search {
    min-width: 9rem;
    width: 100%;
}

.quick-add-panel {
    margin-top: 1rem;
}

.quick-add-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.room-editor-grid {
    align-items: start;
}

.room-summary-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.room-summary-panel h2 {
    margin: 0;
}

.workspace-footer-panel {
    margin-top: 0.85rem;
    padding: 0.62rem 0.72rem;
    overflow-x: auto;
}

.workspace-footer-grid {
    display: grid;
    grid-template-columns: minmax(9.4rem, 0.58fr) minmax(16.1rem, 1.04fr) minmax(13.95rem, 0.92fr) minmax(20.9rem, 1.34fr);
    gap: 0.5rem;
    align-items: start;
    min-width: 62rem;
}

.workspace-footer-block {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: 0.8rem;
    background: var(--surface);
    overflow: hidden;
    min-height: 100%;
}

.workspace-footer-title {
    padding: 0.38rem 0.52rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    /* Was a hardcoded slate-600 (#344054) that vanished in dark.
       Use --text so the "LABOR / ADJUST / EQUIPMENT / TAX" titles
       stay legible against whatever surface the block paints. */
    color: var(--text);
    min-height: 1.95rem;
    display: flex;
    align-items: center;
}

.workspace-footer-rows {
    display: grid;
    flex: 1 1 auto;
    grid-auto-rows: minmax(2rem, auto);
}

.workspace-footer-rows > div {
    display: flex;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.26rem 0.42rem;
    font-size: 0.77rem;
    border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

.workspace-footer-rows > div:last-child {
    border-bottom: 0;
}

.workspace-footer-rows > div strong {
    font-size: 0.84rem;
    color: var(--text);
}

.workspace-footer-rows.neutral > div {
    background: var(--surface-sunken);
}

.workspace-footer-rows--editable > div {
    align-items: center;
}

.workspace-footer-rows--editable .form-control {
    min-width: 0;
    height: 1.66rem;
    padding: 0.12rem 0.28rem;
    font-size: 0.7rem;
    line-height: 1.15;
    width: 100%;
    margin: 0;
}

.workspace-footer-metric-row {
    display: grid !important;
    grid-template-columns: 4.15rem minmax(0, 1fr);
    gap: 0.28rem;
    align-items: center;
}

.labor-block .workspace-footer-metric-row {
    grid-template-columns: 3.15rem minmax(0, 1fr);
}

.labor-block .footer-field-label {
    font-size: 0.67rem;
}

.workspace-footer-edit-row {
    display: grid !important;
    grid-template-columns: 5.15rem minmax(3.8rem, 0.92fr) minmax(4rem, 0.98fr) 3rem;
    gap: 0.28rem;
    align-items: center;
}

.workspace-footer-status-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.28rem;
    align-items: center;
}

.tax-block .workspace-footer-edit-row {
    grid-template-columns: 4.75rem minmax(3.5rem, 0.88fr) minmax(3.85rem, 0.96fr) 4rem;
}

.tax-block .workspace-footer-total {
    grid-template-columns: 4.35rem minmax(0, 1fr);
}

.tax-block .footer-tax-toggle {
    min-width: 3.9rem;
}

.workspace-footer-metric-row,
.workspace-footer-edit-row,
.workspace-footer-status-row {
    min-height: 2rem;
}

.workspace-footer-status-row .form-control {
    width: 100%;
}

.footer-status-group {
    display: grid;
    grid-template-columns: 4.9rem minmax(0, 1fr);
    gap: 0.28rem;
    align-items: center;
    min-width: 0;
}

.footer-field-label {
    /* PBI #13434-ish — labels sit on code-driven row colors
       (labor block pastels, totals blues, neutral sunken). Use
       --text so the contrast reads on every tint. In dark mode
       the override below swaps to the dark text token. */
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    font-size: 0.71rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: right;
}

.footer-field-label::after {
    content: ":";
    margin-left: 0.08rem;
}

.footer-money {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.footer-date {
    min-width: 0;
    font-variant-numeric: tabular-nums;
    max-width: 8.1rem;
}

.footer-tax-toggle {
    display: grid;
    grid-template-columns: 0.78rem auto;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
    margin: 0;
    gap: 0.22rem;
    font-size: 0.68rem;
    min-width: 0;
    height: 1.72rem;
    width: 100%;
    align-self: center;
    box-sizing: border-box;
}

.footer-tax-toggle input,
.footer-status-toggle input {
    margin: 0;
}

.footer-tax-toggle input {
    width: 0.78rem;
    height: 0.78rem;
    justify-self: center;
    align-self: center;
}

.footer-tax-toggle span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    min-width: 0;
    height: 1.72rem;
}

.footer-status-toggle {
    display: grid;
    grid-template-columns: 0.82rem auto;
    align-items: center;
    justify-content: flex-start;
    gap: 0.22rem;
    min-width: 0;
    min-height: 1.72rem;
    margin: 0;
}

.footer-status-toggle span {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.footer-status-toggle input {
    width: 0.78rem;
    height: 0.78rem;
    justify-self: center;
    align-self: center;
}

.footer-readonly {
    background: var(--surface-sunken);
    font-weight: 700;
}

.footer-negative {
    color: var(--status-danger);
}

/* PBI #15210 — labor-phase tone restores the legacy "used vs unused"
   cue from the Win-Forms frmBidView.vb (SetNoLaborBackColor): violet
   when the phase has no value, light cyan when it has. The old
   nth-child pastel descent rendered identically either way and lost
   the signal. Install is exempt (no class applied) and keeps its
   neutral row, matching the legacy code that skipped Install. */
.labor-block .workspace-footer-rows > .labor-phase-unused {
    background: color-mix(in oklab, #ee82ee 28%, var(--surface));
}

.labor-block .workspace-footer-rows > .labor-phase-used {
    background: color-mix(in oklab, #cff4fa 70%, var(--surface));
}

/* PBI #15213 — tax-basis field pattern restores the legacy frmBidItemEdit
   cue that visually distinguished which money field the sales tax was
   charged against. IsTaxSellPrice=true means tax basis = Sell Price
   (Sell Price active, Unit Cost passive); IsTaxSellPrice=false means
   tax basis = Unit Cost (Unit Cost active, Sell Price passive). Without
   the tint, Unit Cost and Sell Price look identical in the editor and
   the operator can't tell at a glance which one the tax engine will use.
   Applied to the wrapper <label> so the .flag-label + .form-control both
   sit inside the tinted band. */
.tax-basis-active {
    background: var(--status-info-soft);
    border-left: 3px solid var(--status-info);
    padding-left: 0.5rem;
    border-radius: 6px;
}

.tax-basis-active .flag-label {
    color: var(--status-info-ink);
    font-weight: 600;
}

.tax-basis-passive {
    background: color-mix(in oklab, var(--surface-muted, var(--surface)) 60%, transparent);
    border-left: 3px solid color-mix(in oklab, var(--border, #cbd5e1) 70%, transparent);
    padding-left: 0.5rem;
    border-radius: 6px;
    opacity: 0.85;
}

.workspace-footer-total {
    background: #eef6ff !important;
    font-weight: 700;
}

.workspace-footer-total .footer-field-label {
    color: #0f172a;
}

.workspace-grand-total {
    background: #dbeafe !important;
}

.workspace-footer-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-top: 0.65rem;
}

.grid-edit-hint {
    color: #64748b;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

@media (max-width: 1280px) {
    .workspace-operations-row--split,
    .workspace-operations-row--secondary {
        grid-template-columns: 1fr;
    }

    .workspace-inline-actions--secondary {
        justify-self: start;
        flex-wrap: wrap;
    }
}

.totals-mini-grid .form-control[readonly] {
    background: var(--surface-sunken);
}

.modal-scrim {
    position: fixed;
    inset: 0;
    /* PBI #15254 — base modal layer; see --z-dialog in theme.css. */
    z-index: var(--z-dialog);
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding: 1.5rem;
}

.item-dialog {
    width: min(1420px, 100%);
    max-height: calc(100vh - 3rem);
    overflow: auto;
    border-radius: 1.2rem;
    background: #fffdfa;
    border: 1px solid rgba(12, 21, 36, 0.12);
    box-shadow: 0 30px 90px rgba(15, 23, 42, 0.25);
    padding: 1.15rem;
}

.item-dialog-title-block {
    padding: 0.8rem 1rem 0.9rem;
    border-radius: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.16);
    background:
        linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(255, 255, 255, 0.94)),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.14), transparent 45%);
}

/* PBI #15257 — title-block selectors track the canonical
   app-eyebrow / app-headline classes (was legacy-kicker / bare h2).
   PBI #15262 — dialog-scoped .app-eyebrow color override removed so
   the eyebrow inherits the canonical --brand-sea everywhere. */
.item-dialog-title-block h2 {
    font-size: 2.1rem;
    line-height: 1.04;
    color: #0f172a;
    letter-spacing: -0.03em;
}

.item-dialog-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid rgba(12, 21, 36, 0.08);
}

.item-dialog-header h2,
.item-dialog-panel h3,
.item-dialog-side h3 {
    margin: 0;
}

.item-dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: end;
    justify-content: flex-end;
}

.item-qty-inline {
    min-width: 8rem;
}

.item-dialog-tabs {
    margin-top: 1rem;
}

.item-dialog-body {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(21rem, 0.85fr);
    gap: 1rem;
    margin-top: 1rem;
}

.item-dialog-main {
    display: grid;
    gap: 1rem;
}

.item-dialog-panel,
.item-dialog-side {
    padding: 1rem;
}

/* PBI #15264 — modal size scale. Before this scale, each .item-dialog-panel
   on BidDetail/Products/ProductDetail set its own raw px max-width (720/820/
   880/960) so the same panel role rendered at four different widths. The
   --sm/--md/--lg modifiers collapse that to a 3-step rem scale; consumers
   pick a tier on the panel element and the inline max-width goes away.
   Bespoke per-dialog modifiers (copy-items-dialog, share-bid-dialog,
   payment-plan-dialog) that existed only to carry width hooks are
   retired in the same pass — they had no CSS rules backing them. */
.item-dialog-panel--sm { max-width: 45rem; }
.item-dialog-panel--md { max-width: 52rem; }
.item-dialog-panel--lg { max-width: 60rem; }

.item-dialog-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.item-dialog-search-panel {
    position: relative;
    overflow: visible;
    background:
        linear-gradient(180deg, rgba(255, 250, 240, 0.96), rgba(255, 255, 255, 0.98)),
        radial-gradient(circle at top right, rgba(250, 204, 21, 0.18), transparent 42%);
    border-color: rgba(194, 106, 0, 0.18);
}

.item-dialog-search-header {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    align-items: flex-start;
    margin-bottom: 0.8rem;
}

.item-dialog-search-header h3 {
    margin-top: 0.15rem;
}

.item-search-grid-shell {
    margin-top: 0.2rem;
}

.item-dialog-picker-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: end;
}

.item-dialog-dropdown-trigger {
    width: 100%;
    min-height: 2.25rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.48rem 0.72rem;
    border: 1px solid rgba(148, 163, 184, 0.45);
    border-radius: 0.8rem;
    background: #fff;
    color: #0f172a;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.item-dialog-dropdown-trigger:hover,
.item-dialog-dropdown-trigger:focus {
    border-color: rgba(59, 130, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.item-dialog-dropdown-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    font-weight: 600;
}

.item-dialog-dropdown-icon {
    color: #64748b;
    font-size: 0.9rem;
}

.item-dialog-picker-button {
    min-width: 5.25rem;
}

.item-search-grid-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.45rem;
}

.item-search-grid-shell--dropdown {
    position: relative;
    z-index: 6;
    margin-top: -0.15rem;
    padding: 0.75rem;
    min-width: min(1080px, calc(100vw - 7rem));
    width: min(1080px, calc(100vw - 7rem));
    max-width: calc(100vw - 7rem);
    border: 1px solid rgba(194, 106, 0, 0.18);
    border-radius: 0.95rem;
    background: #fffdfa;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}

.dialog-product-grid {
    min-width: 1010px;
    border: 1px solid rgba(194, 106, 0, 0.15);
    border-radius: 0.9rem;
    overflow: hidden;
    background: #fff;
}

.dialog-product-grid .e-gridheader {
    background: linear-gradient(180deg, var(--surface-sunken) 0%, #eef4ff 100%);
}

.dialog-product-grid .e-headercell {
    font-weight: 700;
}

.dialog-product-grid .e-filterbarcell {
    background: #d9f99d;
}

.dialog-product-grid .e-filterbarcell input {
    background: #faffec;
    font-weight: 600;
}

.dialog-product-grid .e-row:hover .e-rowcell {
    background: #fff7ed;
}

.dialog-product-grid .e-gridpager {
    border-top: 1px solid rgba(12, 21, 36, 0.08);
}

.btn-product-use {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
    border-color: #16a34a;
    color: #052e16;
    font-weight: 700;
}

.btn-product-use:hover,
.btn-product-use:focus {
    background: linear-gradient(180deg, #64e18d 0%, #22c55e 100%);
    border-color: #15803d;
    color: #052e16;
}

.item-dialog-core-grid,
.item-dialog-side-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-top: 1rem;
}

.item-dialog-side-grid {
    grid-template-columns: 1fr;
}

.item-dialog-span-2 {
    grid-column: span 2;
}

.item-dialog-photo-block {
    margin-top: 0.9rem;
}

.item-dialog-photo {
    width: 100%;
    min-height: 13rem;
    max-height: 18rem;
    object-fit: contain;
    display: grid;
    place-items: center;
    border-radius: 0.95rem;
    border: 1px solid rgba(12, 21, 36, 0.08);
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.98)),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 45%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.item-dialog-photo--empty {
    color: #64748b;
    font-size: 0.86rem;
    font-weight: 600;
}

.item-dialog-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.item-dialog-side {
    align-self: start;
    position: sticky;
    top: 0;
}

/* PBI #15252 — shared dialog-footer primitive. Every dialog footer
   used to mix two button systems (bootstrap .btn-outline-secondary
   for Cancel + .btn-primary for the action vs the design-token
   .app-cta / .app-cta--ghost trio); the primary action also drifted
   left/right across dialogs because each footer reinvented its own
   flex container. .dialog-footer is the single primitive:

     .dialog-footer            flex row, right-aligned, top border
     .dialog-footer__meta      margin-right:auto — left-edge slot for
                               status pills, summaries, or hints
     .dialog-footer__back      margin-right:auto — left-edge slot for
                               Back/secondary-nav (when paired with
                               Cancel + primary on the right)

   Combine with .app-cta / .app-cta--ghost / .app-cta--danger /
   .app-cta--ghost-danger for the buttons themselves. Order in markup
   is: Back/Meta → Cancel → primary action, so the primary always
   lands in the right-most position regardless of which optional
   slots are present. */
/* PBI #15257 — shared header for overlay dialogs. Mirrors the
   eyebrow + headline + subline + Close layout the Duplicate and
   Product-Picker dialogs already used; gives the bare-h2 dialogs
   (share, copy items, delete, payment plan, option group, AI
   alternatives, AI combos, phone link) the same canonical shape
   without coupling each to a per-dialog grid. Caller still owns
   the inner panel; this only governs the title row. */
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.dialog-header__text {
    min-width: 0;
}

.dialog-header__text .app-headline,
.dialog-header__text .app-subline {
    margin: 0.15rem 0 0;
}

.dialog-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: center;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
}

.dialog-footer__meta,
.dialog-footer__back {
    margin-right: auto;
}

.item-dialog-footer {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1rem;
}

.item-dialog-package-block {
    margin-top: 1rem;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 1rem;
    background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(255, 255, 255, 0.96)),
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.08), transparent 45%);
    padding: 1rem;
}

.item-dialog-link-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(12, 21, 36, 0.08);
}

.item-dialog-link-block a {
    display: block;
    margin-top: 0.3rem;
    word-break: break-word;
}

.item-dialog-package-header {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: start;
}

.item-dialog-package-header strong {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.92rem;
    color: #0f172a;
}

.item-dialog-package-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(12, 21, 36, 0.12);
    font-size: 0.78rem;
    font-weight: 700;
}

.item-dialog-package-toggle.is-on {
    background: #dcfce7;
    border-color: #86efac;
    color: #166534;
}

.item-dialog-package-toggle.is-off {
    background: #fee2e2;
    border-color: #fecaca;
    color: #991b1b;
}

.item-dialog-package-total {
    margin-top: 0.75rem;
}

.item-dialog-package-total strong {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
}

.item-dialog-package-list {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.75rem;
    max-height: 19rem;
    overflow: auto;
    padding-right: 0.2rem;
}

.item-dialog-package-row {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.35fr) minmax(4.9rem, 5.2rem) minmax(5.4rem, 6.2rem);
    gap: 0.75rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid rgba(12, 21, 36, 0.08);
    border-radius: 0.75rem;
    background: var(--surface-sunken);
    align-items: start;
}

.item-dialog-package-row.selected {
    border-color: rgba(34, 197, 94, 0.3);
    background: #f0fdf4;
}

.item-dialog-package-row.muted {
    opacity: 0.62;
}

.item-dialog-package-row strong,
.item-dialog-package-row span {
    display: block;
    line-height: 1.25;
}

.item-dialog-package-row span {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.item-dialog-package-include {
    display: grid;
    grid-template-columns: 0.95rem minmax(0, 1fr);
    gap: 0.5rem;
    margin: 0;
    align-items: start;
}

.item-dialog-package-include input {
    margin-top: 0.18rem;
}

.item-dialog-package-copy small {
    display: block;
    margin-top: 0.22rem;
    color: #64748b;
    font-size: 0.75rem;
    line-height: 1.25;
}

.item-dialog-package-amount {
    text-align: right;
}

.item-dialog-package-amount strong {
    font-size: 0.95rem;
    color: #0f172a;
}

.compact-check {
    margin-top: 1.55rem;
}

.legacy-panel-grid {
    display: grid;
    gap: 1rem;
}

.legacy-panel-grid.two-up {
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
}

.legacy-panel-grid.three-up {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.legacy-form-panel h2 {
    margin-bottom: 0.45rem;
    font-size: 1rem;
}

.legacy-fieldset {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(12, 21, 36, 0.08);
}

.legacy-fieldset h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
}

.legacy-summary-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.metric-card.compact strong {
    font-size: 1.15rem;
}

/* PBI #15248 — base flex/gap/align rules moved to the shared
   .form-toggle selector list above; .checkbox-row keeps only its
   ClientDetail-specific top-margin (the SameAsClient toggle sits in
   a form-grid--records row where neighbour fields carry a
   .flag-label span above the input, so the checkbox-only label
   needs a manual nudge to align its baseline). */
.checkbox-row {
    margin-top: 1.8rem;
}

.flow-list,
.queue-items {
    margin: 1rem 0 0;
    padding-left: 1.15rem;
}

.flow-list li + li,
.queue-items li + li {
    margin-top: 0.6rem;
}

.flag-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.data-table th {
    text-align: left;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.data-table th,
.data-table td {
    padding: 0.8rem 0.5rem;
    border-bottom: 1px solid rgba(12, 21, 36, 0.08);
}

.queue-list {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    margin-top: 1rem;
}

.queue-card {
    border-radius: 1.15rem;
    border: 1px solid rgba(12, 21, 36, 0.08);
    background: rgba(255, 252, 247, 0.88);
    padding: 1rem;
}

.queue-title {
    margin: 0;
    font-weight: 700;
    color: var(--text);
}

.queue-meta,
.queue-hidden,
.room-detail-header p {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
}

.selected-card {
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}

.bid-workspace-page .e-grid .e-headercontent,
.bid-workspace-page .e-grid .e-gridheader {
    border-top-left-radius: 0.9rem;
    border-top-right-radius: 0.9rem;
}

.bid-workspace-page .e-grid .e-gridheader {
    border-bottom: 1px solid rgba(12, 21, 36, 0.08);
}

.bid-workspace-page .e-grid .e-headercell,
.bid-workspace-page .e-grid .e-rowcell {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.bid-workspace-page .e-grid .e-row:nth-child(even) .e-rowcell {
    background: rgba(23, 92, 211, 0.02);
}

.bid-workspace-page .e-grid .e-sortfilterdiv,
.bid-workspace-page .e-grid .e-filtermenudiv,
.bid-workspace-page .e-grid .e-headercelldiv .e-headertext + span[title="Press Enter to sort"] {
    display: none !important;
}

@media (max-width: 1024px) {
    .legacy-shell-header,
    .room-summary-bar,
    .quick-add-header,
    .room-summary-panel-head,
    .item-dialog-header {
        flex-direction: column;
        align-items: stretch;
    }

    .workspace-switcher-grid {
        grid-template-columns: 1fr;
    }

    .item-dialog-body {
        grid-template-columns: 1fr;
    }

    .item-dialog-core-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .workspace-footer-grid,
    .item-dialog-search-row {
        grid-template-columns: 1fr;
    }

    .item-dialog-side {
        position: static;
    }
}

@media (max-width: 640px) {
    .item-dialog-core-grid {
        grid-template-columns: 1fr;
    }

    .item-dialog-span-2 {
        grid-column: span 1;
    }
}

.selected-card:hover {
    transform: translateY(-1px);
    border-color: rgba(216, 136, 54, 0.28);
}

.selected-card.active {
    border-color: rgba(216, 136, 54, 0.45);
    box-shadow: 0 14px 34px rgba(17, 26, 43, 0.12);
}

.room-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: start;
}

.queue-items {
    color: var(--text-muted);
}

.queue-items strong,
.timeline strong {
    display: block;
    color: var(--text);
}

.timeline {
    margin: 1rem 0 0;
    padding-left: 1.15rem;
}

.timeline li + li {
    margin-top: 0.9rem;
}

.ingestion-grid {
    align-items: start;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid,
.validation-message {
    color: #b42318;
}

.blazor-error-boundary {
    background: #b42318;
    color: white;
    padding: 1rem;
    border-radius: 1rem;
}

@media (max-width: 640px) {
    .content {
        padding-top: 1.25rem;
    }

    .hero-panel,
    .surface-card,
    .metric-card {
        border-radius: 1.2rem;
    }
}

.legacy-filter-chip {
    border: 1px solid #d0d5dd;
    background: #ffffff;
    color: #344054;
    border-radius: 999px;
    padding: 0.45rem 0.75rem;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.bidglory-grid.e-grid {
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.bidglory-grid.e-grid .e-gridheader {
    border-bottom: 1px solid var(--border);
    background: var(--surface-sunken);
}

.bidglory-grid.e-grid .e-headercell {
    background: var(--surface-sunken);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border);
}

.bidglory-grid.e-grid .e-rowcell {
    color: var(--text);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    border-color: var(--border);
    line-height: 1.25;
    background: var(--surface);
}

.bidglory-grid.e-grid .e-altrow .e-rowcell {
    background: var(--surface-sunken);
}

.bidglory-grid.e-grid .e-row:hover .e-rowcell {
    background: color-mix(in oklab, var(--brand-sea) 8%, var(--surface));
}

.bidglory-grid.e-grid .e-row.e-selectionbackground .e-rowcell,
.bidglory-grid.e-grid .e-row[aria-selected="true"] .e-rowcell {
    background: var(--brand-sea) !important;
    color: #ffffff;
}

/* Same row-status tints for the Syncfusion grid flavor. Keep
   identical to the plain-table rules so the two render paths
   carry the same color language. */
.bidglory-grid.e-grid .bid-row-labor .e-rowcell {
    background: #dff3fb;
}

.bidglory-grid.e-grid .bid-row-linked .e-rowcell {
    background: var(--brand-sea-soft);
}

.bidglory-grid.e-grid .bid-row-hidden .e-rowcell {
    background: var(--surface-sunken);
    color: var(--text-subtle);
    opacity: 0.72;
}

.bidglory-grid.e-grid .bid-row-option .e-rowcell {
    /* Purple tint — gives option rows a distinct semantic hue
       that won't collide with --status-warning-soft (yellow)
       used by warning pills on this screen. */
    background: color-mix(in oklab, #d9b7ff 22%, var(--surface));
}

.bidglory-grid.e-grid .bid-row-zero .e-rowcell {
    color: var(--status-danger);
}

.bidglory-grid.e-grid .e-gridcontent {
    background: var(--surface);
}

.bid-workspace-grid-shell {
    margin-top: 0.55rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    overflow: auto;
    background: var(--surface);
}

.bid-workspace-table {
    width: 100%;
    min-width: 1320px;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.bid-workspace-table th,
.bid-workspace-table td {
    padding: 0.42rem 0.55rem;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
    line-height: 1.25;
}

.bid-workspace-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-sunken);
    color: var(--text-muted);
    text-align: left;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bid-workspace-table td {
    color: var(--text);
    background: var(--surface);
}

.bid-workspace-table tr:nth-child(even) td {
    background: var(--surface-sunken);
}

.bid-workspace-table tr:hover td,
.bid-workspace-table tr.selected td {
    background: var(--brand-sea);
    color: #fff;
}

.bid-workspace-table .num {
    text-align: right;
}

.bid-workspace-table .center {
    text-align: center;
}

/* Code-driven row status colors. GetRowClass(item) in
   BidDetail.razor stamps one (or a combination) of these classes
   on each <tr>. The light-mode colors are the ORIGINAL pastels
   from before the theme pass — they read at a glance and
   distinguish each labor/linked/option/hidden row from the alt
   stripe. Dark overrides live below and mix the same pastel
   into the dark surface so identity survives into dark mode. */
.bid-workspace-table tr.bid-row-labor td {
    background: #dff3fb;  /* light cyan — labor */
}

.bid-workspace-table tr.bid-row-linked td {
    background: var(--brand-sea-soft);  /* brand-blue tint — linked package */
}

.bid-workspace-table tr.bid-row-hidden td {
    background: var(--surface-sunken);
    color: var(--text-subtle);
}

.bid-workspace-table tr.bid-row-option td {
    /* Purple tint — distinct semantic hue for option rows that
       avoids clashing with --status-warning-soft (yellow) used
       by warning pills on the same screen. */
    background: color-mix(in oklab, #d9b7ff 22%, var(--surface));
}

.bid-workspace-table tr.bid-row-zero td {
    color: var(--status-danger);
}

.bid-workspace-table tr.selected.bid-row-labor td,
.bid-workspace-table tr.selected.bid-row-linked td,
.bid-workspace-table tr.selected.bid-row-hidden td,
.bid-workspace-table tr.selected.bid-row-option td,
.bid-workspace-table tr.selected.bid-row-zero td {
    background: var(--brand-sea);
    color: #fff;
}

.bidglory-grid.e-grid .e-headertext {
    white-space: nowrap;
}

.room-cell {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    line-height: 1.15;
}

.room-cell-top {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.room-cell strong {
    font-size: 0.83rem;
}

.room-phase-pill,
.room-linked-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.room-phase-pill {
    padding: 0.18rem 0.42rem;
    background: #eef3fb;
    color: #516074;
    border: 1px solid #d5dfec;
}

.room-linked-pill {
    padding: 0.16rem 0.38rem;
    background: #f7efff;
    color: #6b31ce;
    border: 1px solid #e8d8ff;
}

.workspace-description-cell {
    display: inline-block;
    max-width: 34rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.bidglory-grid.e-grid .e-headercell .e-sortfilterdiv {
    margin-left: 0.35rem;
}

.bidglory-grid.e-grid .btn.btn-sm {
    border-radius: 0.65rem;
    padding: 0.22rem 0.55rem;
    font-size: 0.74rem;
    font-weight: 600;
}

.grid-link-button {
    border: 0;
    padding: 0;
    background: transparent;
    color: #1d4ed8;
    font: inherit;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
}

.grid-link-button:hover,
.grid-link-button:focus-visible {
    color: #0f3d9e;
    text-decoration: underline;
}

.grid-action-pair {
    display: flex;
    gap: 0.35rem;
    align-items: center;
}

.bid-list-page .legacy-list-shell {
    padding-top: 0.75rem;
}

.bid-list-page .legacy-filter-row {
    margin-top: 0;
    margin-bottom: 0.65rem;
}

.bid-list-page .pill-row {
    margin: 0 0 0.7rem;
}

.bid-workspace-page .btn,
.bid-workspace-page .form-control,
.bid-workspace-page .form-select {
    /* --control-h-sm is 2rem under a mouse — identical to the literal
       this replaces — and 2.4rem under `pointer: coarse`. The bid
       workspace is the densest screen in the app and the one most
       likely to be driven from an iPad, so it gets the smaller of the
       two touch sizes rather than the full 44px. */
    min-height: var(--control-h-sm);
    font-size: 0.88rem;
}

.bid-workspace-page .form-control,
.bid-workspace-page .form-select {
    padding: 0.3rem 0.55rem;
}

.bid-workspace-page .btn {
    padding: 0.28rem 0.6rem;
}

.e-hide,
.bidglory-grid.e-grid caption.e-hide,
.bidglory-grid.e-grid .e-hide {
    display: none !important;
}

@media (max-width: 1024px) {
    .legacy-filter-cluster,
    .legacy-search-row,
    .dashboard-filter-grid,
    .settings-panel-grid,
    .settings-panel-grid--two {
        grid-template-columns: 1fr;
    }

    .legacy-shell-header {
        flex-direction: column;
    }

    .workspace-switcher-grid {
        grid-template-columns: 1fr;
    }

    .settings-event-table {
        grid-template-columns: 1fr;
    }

    .duplicate-dialog-grid,
    .duplicate-dialog-options {
        grid-template-columns: 1fr;
    }

    .duplicate-dialog-span-2 {
        grid-column: auto;
    }

    .duplicate-dialog-actions,
    .duplicate-dialog-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =============================================================
   Dark-mode compatibility layer
   -------------------------------------------------------------
   Rules above this point were originally authored against a
   light-only palette and still contain hard-coded hex values in
   spots. This layer reaches into those spots in dark mode so
   they don't light up like headlights on a night drive.
   The long-term plan is to fold each of these into the rule it
   overrides; for now this is the safety net so nothing looks
   broken when a user flips the theme toggle.
   ============================================================= */

[data-theme="dark"] .legacy-action-btn,
[data-theme="dark"] .legacy-filter-button,
[data-theme="dark"] .legacy-tab,
[data-theme="dark"] .legacy-filter-chip {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

[data-theme="dark"] .legacy-action-btn.green,
[data-theme="dark"] .legacy-filter-button.active,
[data-theme="dark"] .legacy-tab.active {
    background: color-mix(in oklab, var(--brand-sea) 28%, var(--surface));
    color: var(--brand-glow);
    border-color: color-mix(in oklab, var(--brand-sea) 45%, transparent);
}

[data-theme="dark"] .legacy-action-btn.red {
    background: color-mix(in oklab, var(--status-danger) 22%, var(--surface));
    color: var(--status-danger);
}

[data-theme="dark"] .filter-chip {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}
[data-theme="dark"] .filter-chip.active {
    background: color-mix(in oklab, var(--brand-sea) 22%, var(--surface));
    border-color: color-mix(in oklab, var(--brand-sea) 45%, transparent);
    color: var(--brand-glow);
}

[data-theme="dark"] .workspace-switcher-grid {
    background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
    border-color: color-mix(in oklab, var(--brand-sea) 25%, var(--border));
}

[data-theme="dark"] .settings-tab-button,
[data-theme="dark"] .products-alpha-button {
    background: var(--surface);
    color: var(--text-muted);
    border-color: var(--border);
}
[data-theme="dark"] .settings-tab-button.active {
    background: color-mix(in oklab, var(--brand-sea) 28%, var(--surface));
    color: var(--brand-glow);
    border-color: color-mix(in oklab, var(--brand-sea) 45%, transparent);
}
[data-theme="dark"] .products-alpha-button.active {
    background: color-mix(in oklab, var(--status-success) 28%, var(--surface));
    border-color: color-mix(in oklab, var(--status-success) 45%, transparent);
    color: var(--status-success);
}

[data-theme="dark"] .settings-note-card,
[data-theme="dark"] .empty-state-panel,
[data-theme="dark"] .queue-card,
[data-theme="dark"] .legacy-list-shell,
[data-theme="dark"] .legacy-form-panel,
[data-theme="dark"] .workspace-footer-block {
    background: var(--surface-raised);
    border-color: var(--border);
}

[data-theme="dark"] .empty-state-panel {
    border-style: dashed;
    color: var(--text-muted);
}

/* PBI #15278 — dark-theme parity for the inline variant + aliases. */
[data-theme="dark"] .empty-state-inline,
[data-theme="dark"] .empty-state-copy,
[data-theme="dark"] .portal-empty {
    background: var(--surface-sunken);
    border-color: var(--border);
    color: var(--text-muted);
}

[data-theme="dark"] .workspace-operations-rail {
    background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface) 100%);
    border-color: color-mix(in oklab, var(--brand-sea) 25%, var(--border));
}

[data-theme="dark"] .item-dialog,
[data-theme="dark"] .item-search-grid-shell--dropdown {
    background: var(--surface-raised);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="dark"] .item-dialog-title-block {
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--brand-sea-soft) 60%, var(--surface-raised)), var(--surface-raised));
    border-color: color-mix(in oklab, var(--brand-sea) 30%, var(--border));
}
[data-theme="dark"] .item-dialog-title-block h2 {
    color: var(--text);
}

[data-theme="dark"] .item-dialog-search-panel {
    background:
        linear-gradient(180deg, color-mix(in oklab, var(--brand-cream) 20%, var(--surface-raised)), var(--surface-raised));
    border-color: color-mix(in oklab, var(--status-warning) 30%, var(--border));
}

[data-theme="dark"] .item-dialog-dropdown-trigger {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border-strong);
}
[data-theme="dark"] .item-dialog-dropdown-icon { color: var(--text-muted); }

[data-theme="dark"] .item-dialog-package-block,
[data-theme="dark"] .item-dialog-photo {
    background: var(--surface-raised);
    border-color: var(--border);
}

[data-theme="dark"] .item-dialog-package-row {
    border-color: var(--border);
}
[data-theme="dark"] .item-dialog-package-row.selected {
    background: color-mix(in oklab, var(--status-success) 18%, var(--surface-sunken));
    border-color: color-mix(in oklab, var(--status-success) 35%, transparent);
}

[data-theme="dark"] .item-dialog-package-toggle.is-on {
    background: color-mix(in oklab, var(--status-success) 22%, var(--surface));
    border-color: color-mix(in oklab, var(--status-success) 45%, transparent);
    color: var(--status-success);
}
[data-theme="dark"] .item-dialog-package-toggle.is-off {
    background: color-mix(in oklab, var(--status-danger) 22%, var(--surface));
    border-color: color-mix(in oklab, var(--status-danger) 45%, transparent);
    color: var(--status-danger);
}

[data-theme="dark"] .linked-products-table thead th {
    background: color-mix(in oklab, var(--brand-sea) 16%, var(--surface));
    color: var(--text-muted);
}

[data-theme="dark"] .linked-model-link,
[data-theme="dark"] .grid-link-button {
    color: var(--brand-glow);
}
[data-theme="dark"] .grid-link-button:hover,
[data-theme="dark"] .grid-link-button:focus-visible {
    color: var(--brand-sea);
}

/* Dark-mode row-status tints. Mix the ORIGINAL light pastels
   into the dark surface so each status keeps a distinguishable
   hue against the navy theme. Pairs with the .bid-row-* rules
   in the light section above — edit in lockstep. */
[data-theme="dark"] .bid-workspace-table tr.bid-row-labor td,
[data-theme="dark"] .bidglory-grid.e-grid .bid-row-labor .e-rowcell {
    background: color-mix(in srgb, #dff3fb 16%, var(--surface));
}
[data-theme="dark"] .bid-workspace-table tr.bid-row-linked td,
[data-theme="dark"] .bidglory-grid.e-grid .bid-row-linked .e-rowcell {
    /* Brand-sea bed in dark, mirrors the light --brand-sea-soft anchor. */
    background: color-mix(in srgb, var(--brand-sea) 22%, var(--surface));
}
[data-theme="dark"] .bid-workspace-table tr.bid-row-option td,
[data-theme="dark"] .bidglory-grid.e-grid .bid-row-option .e-rowcell {
    /* Purple bed — matches the light-mode option-row hue rather
       than re-using the cream that clashed with warning pills. */
    background: color-mix(in srgb, #d9b7ff 16%, var(--surface));
}
[data-theme="dark"] .bid-workspace-table tr.bid-row-hidden td,
[data-theme="dark"] .bidglory-grid.e-grid .bid-row-hidden .e-rowcell {
    background: var(--surface-sunken);
    color: var(--text-subtle);
    opacity: 0.72;
}

/* Dark-mode labor + totals rows — preserve the code-driven hue
   identity. The light-mode CSS gives each labor row a distinct
   pastel (pink / lavender / mauve / cyan) that carries semantic
   meaning (different labor kinds), and the totals rows use a
   blue bed. Mixing those originals into the dark surface at a
   low ratio keeps the tint readable without clashing with the
   navy theme. Labels bump to --text via the rule above so the
   text pops on every tinted row. */
/* PBI #15210 — dark-theme labor-phase tone. Mirrors the violet/cyan
   "unused vs used" cue restored on the light theme, at lower opacity
   so the navy surface still reads. */
[data-theme="dark"] .labor-block .workspace-footer-rows > .labor-phase-unused { background: color-mix(in oklab, #ee82ee 18%, var(--surface)); }
[data-theme="dark"] .labor-block .workspace-footer-rows > .labor-phase-used { background: color-mix(in oklab, #cff4fa 22%, var(--surface)); }

[data-theme="dark"] .workspace-footer-total {
    background: color-mix(in oklab, #dbeafe 22%, var(--surface)) !important;
}
[data-theme="dark"] .workspace-footer-total .footer-field-label {
    color: var(--text);
}
[data-theme="dark"] .workspace-grand-total {
    background: color-mix(in oklab, #93c5fd 30%, var(--surface)) !important;
}

[data-theme="dark"] .dialog-product-grid {
    background: var(--surface);
    border-color: color-mix(in oklab, var(--status-warning) 25%, var(--border));
}
[data-theme="dark"] .dialog-product-grid .e-gridheader {
    background: linear-gradient(180deg, var(--surface-sunken) 0%, color-mix(in oklab, var(--brand-sea) 12%, var(--surface)) 100%);
}
[data-theme="dark"] .dialog-product-grid .e-filterbarcell {
    background: color-mix(in oklab, var(--status-success) 22%, var(--surface));
}
[data-theme="dark"] .dialog-product-grid .e-filterbarcell input {
    background: color-mix(in oklab, var(--status-success) 12%, var(--surface));
    color: var(--text);
}
[data-theme="dark"] .dialog-product-grid .e-row:hover .e-rowcell {
    background: color-mix(in oklab, var(--brand-sea) 14%, var(--surface));
}

[data-theme="dark"] .e-popup .e-multicolumn-list .e-gridheader {
    background: linear-gradient(180deg, var(--surface-sunken) 0%, color-mix(in oklab, var(--brand-sea) 14%, var(--surface)) 100%);
    border-bottom: 1px solid color-mix(in oklab, var(--brand-sea) 24%, var(--border));
}
[data-theme="dark"] .e-popup .e-multicolumn-list .e-row.e-active,
[data-theme="dark"] .e-popup .e-multicolumn-list .e-row:hover {
    background: color-mix(in oklab, var(--brand-sea) 14%, var(--surface));
}

[data-theme="dark"] .room-phase-pill {
    background: color-mix(in oklab, var(--brand-sea) 16%, var(--surface));
    color: var(--text-muted);
    border-color: color-mix(in oklab, var(--brand-sea) 30%, var(--border));
}
[data-theme="dark"] .room-linked-pill {
    background: color-mix(in oklab, var(--brand-glow) 22%, var(--surface));
    color: var(--brand-glow);
    border-color: color-mix(in oklab, var(--brand-glow) 35%, transparent);
}

[data-theme="dark"] .workspace-meta-pill,
[data-theme="dark"] .workspace-client-inline {
    background: var(--surface-raised);
    color: var(--text-muted);
    border-color: var(--border);
}

[data-theme="dark"] .footer-negative { color: var(--status-danger); }
[data-theme="dark"] .validation-message,
[data-theme="dark"] .invalid { color: var(--status-danger); }

[data-theme="dark"] .settings-rate-label,
[data-theme="dark"] .settings-event-label,
[data-theme="dark"] .workspace-client-inline {
    color: var(--text);
}

[data-theme="dark"] .catalog-input-warning {
    background: color-mix(in oklab, var(--status-danger) 16%, var(--surface));
    border-color: color-mix(in oklab, var(--status-danger) 35%, transparent);
}

[data-theme="dark"] .footer-field-label {
    color: var(--text-muted);
}

[data-theme="dark"] code {
    background: var(--surface-sunken);
    color: var(--text);
}

[data-theme="dark"] .top-row {
    background: color-mix(in oklab, var(--brand-sea-soft) 60%, var(--surface));
    border-bottom-color: var(--border);
}

[data-theme="dark"] .blazor-error-boundary {
    background: var(--status-danger);
    color: var(--text-inverse);
}

[data-theme="dark"] #blazor-error-ui {
    background: color-mix(in oklab, var(--status-warning) 28%, var(--surface));
    color: var(--status-warning-ink);
}

.preview-options-card,
.preview-side-card {
    align-self: start;
}

.preview-settings-grid {
    display: grid;
    gap: 0.38rem 0.5rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.preview-settings-grid > label {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.preview-settings-grid__wide {
    grid-column: 1 / -1;
}

.preview-settings-grid__span2 {
    grid-column: span 2;
}

.preview-settings-grid .checkbox-row {
    min-height: 1.36rem;
    border: 1px solid var(--border);
    border-radius: 0.56rem;
    padding: 0.12rem 0.34rem;
    background: var(--surface);
    font-size: 0.78rem;
    line-height: 1.18;
}

.preview-toggle-bank {
    display: grid;
    gap: 0.22rem;
}

.preview-toggle-bank .flag-label {
    margin: 0;
}

.preview-toggle-grid {
    display: grid;
    gap: 0.24rem 0.3rem;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.preview-scope-strip {
    display: grid;
    gap: 0.3rem;
}

.preview-scope-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.32rem;
}

.preview-scope-button {
    min-height: 1.72rem;
    border: 1px solid var(--border);
    border-radius: 0.58rem;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    padding: 0.3rem 0.45rem;
    text-align: center;
    font-size: 0.8rem;
}

.preview-scope-button.active {
    background: color-mix(in oklab, var(--accent) 12%, var(--surface));
    border-color: color-mix(in oklab, var(--accent) 24%, var(--border));
    color: var(--accent-strong);
}

.preview-inline-choice {
    display: grid;
    grid-template-columns: max-content minmax(7rem, 0.85fr);
    gap: 0.35rem;
    align-items: center;
}

.preview-header-card .app-headline {
    font-size: clamp(1.08rem, 1.5vw, 1.32rem);
}

.preview-header-card .app-subline {
    max-width: 42rem;
    line-height: 1.24;
}

.app-panel--compact {
    padding-top: 0.48rem;
    padding-bottom: 0.52rem;
}

.app-panel--compact .app-panel__body,
.app-panel--compact .legacy-shell-header {
    gap: 0.52rem;
}

.app-panel--compact .app-headline {
    font-size: clamp(0.98rem, 1.28vw, 1.16rem);
    line-height: 1.04;
}

.app-panel--compact .app-subline {
    font-size: 0.8rem;
    line-height: 1.2;
    margin-top: 0.28rem;
}

.app-panel--compact .workspace-meta {
    gap: 0.22rem;
}

.app-panel--compact .app-chip {
    padding: 0.12rem 0.36rem;
    font-size: 0.62rem;
}

.preview-url {
    max-width: 20rem;
    word-break: break-word;
}

.project-manager-page {
    gap: 0.85rem;
}

.project-manager-toolbar-card,
.project-manager-grid-card,
.project-manager-detail-card {
    padding: 0.8rem;
}

.project-manager-command-strip {
    display: grid;
    gap: 0.7rem;
}

.project-manager-command-strip--workspace {
    gap: 0.52rem;
}

.project-manager-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.project-manager-bid-title {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 18rem;
}

.project-manager-quick-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.project-manager-filter-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    align-items: end;
}

.project-manager-filter-strip--workspace .legacy-filter-field {
    min-width: 11rem;
}

.project-manager-filter-field--search {
    min-width: 18rem;
    flex: 1 1 22rem;
}

.project-manager-go {
    min-width: 3.3rem;
}

.project-manager-color-strip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.16rem 0.2rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
}

.project-manager-color-toggle {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 999px;
    border: 1px solid transparent;
    opacity: 0.42;
    cursor: pointer;
}

.project-manager-color-toggle.active {
    opacity: 1;
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--text) 12%, transparent);
}

.project-manager-color-toggle--gold {
    background: #e5cc78;
}

.project-manager-color-toggle--olive {
    background: #89a35f;
}

.project-manager-color-toggle--gray {
    background: #b8bec8;
}

.project-manager-view-toggle {
    display: inline-flex;
    gap: 0.4rem;
}

.project-manager-grid .e-gridcontent,
.project-manager-grid .e-headercontent {
    font-size: 0.83rem;
}

.project-manager-workspace-page {
    gap: 0.8rem;
}

.project-manager-grid--workspace .e-rowcell,
.project-manager-grid--workspace .e-headercell {
    padding-top: 0.34rem;
    padding-bottom: 0.34rem;
}

.pm-state-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.65rem;
    border-radius: 999px;
    padding: 0.14rem 0.42rem;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid var(--border);
    background: var(--surface-sunken);
    color: var(--text-muted);
}

.pm-state-badge.is-on.is-ordered {
    background: color-mix(in oklab, #e5cc78 38%, var(--surface));
    color: var(--text);
}

.pm-state-badge.is-on.is-received {
    background: color-mix(in oklab, #89a35f 34%, var(--surface));
    color: var(--text);
}

.pm-state-badge.is-on.is-installed {
    background: color-mix(in oklab, #b8bec8 42%, var(--surface));
    color: var(--text);
}

.project-manager-detail-copy {
    display: grid;
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.project-manager-detail-copy p {
    margin: 0;
}

.project-manager-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: start;
    margin-bottom: 0.75rem;
}

.project-manager-detail-header h2 {
    margin: 0.1rem 0 0;
    font-size: 1rem;
}

.project-manager-notes {
    margin: 0.8rem 0;
}

@media (max-width: 1024px) {
    .preview-settings-grid {
        grid-template-columns: 1fr;
    }

    .preview-settings-grid__wide {
        grid-column: auto;
    }

    .preview-settings-grid__span2 {
        grid-column: auto;
    }

    .preview-toggle-grid {
        grid-template-columns: 1fr;
    }

    .preview-scope-buttons,
    .preview-inline-choice {
        grid-template-columns: 1fr;
    }
}

[data-theme="dark"] .preview-settings-grid .checkbox-row {
    background: var(--surface-raised);
    border-color: var(--border);
}

.reports-page {
    gap: 0.85rem;
}

.reports-filter-card {
    padding: 0.95rem 1rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
}

.stats-card {
    padding: 0.85rem 0.95rem;
}

.stats-card strong {
    display: block;
    margin-top: 0.3rem;
    font-size: 1.35rem;
    line-height: 1.1;
}

.reports-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    align-items: end;
}

.reports-filter-actions {
    display: flex;
    align-items: end;
    justify-content: flex-start;
    min-height: 100%;
}

.reports-pipeline-grid,
.reports-template-grid {
    display: grid;
    gap: 0.85rem;
}

.reports-pipeline-grid {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.reports-template-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.7rem;
    margin-bottom: 0.9rem;
}

.reports-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.reports-table th,
.reports-table td {
    white-space: nowrap;
}

.reports-table td:nth-child(2),
.reports-table td:nth-child(3) {
    white-space: normal;
    min-width: 12rem;
}

.table-scroll {
    overflow-x: auto;
}

.maintenance-layout {
    align-items: start;
}

.maintenance-table tbody tr {
    cursor: pointer;
}

.maintenance-table tbody tr.selected {
    background: color-mix(in srgb, var(--panel-accent) 12%, var(--panel-bg));
}

.table-subline {
    color: var(--text-muted);
    font-size: 0.82rem;
}

.maintenance-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem 1rem;
    margin-top: 1rem;
}

.taxonomy-tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.catalog-grid-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.8rem;
}

.table-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 0.45rem;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-accent) 16%, var(--panel-bg));
    color: var(--text);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

.table-action {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 999px;
    padding: 0.28rem 0.65rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.table-action--danger {
    color: var(--status-danger);
}

.table-wrap {
    white-space: normal;
    word-break: break-word;
}

.selected-row {
    background: color-mix(in srgb, var(--panel-accent) 12%, var(--panel-bg));
}

.company-portal-editor {
    min-height: 24rem;
    font-family: "SFMono-Regular", ui-monospace, Menlo, Monaco, Consolas, monospace;
    font-size: 0.9rem;
    line-height: 1.45;
}

.utility-progress {
    width: 100%;
    height: 0.75rem;
    margin: 0.55rem 0 0.8rem;
}

[data-theme="dark"] .table-badge {
    background: color-mix(in srgb, var(--panel-accent) 20%, var(--panel-bg));
}

/* =============================================================
   First-run welcome dialog (PBI #13647 / Task #13758)
   ============================================================= */

.bidglory-welcome-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--text, #1a1a1a) 56%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 5000;
    animation: bidglory-welcome-fade-in 0.18s ease-out;
}

.bidglory-welcome-backdrop[hidden] {
    display: none;
}

.bidglory-welcome-panel {
    max-width: 540px;
    width: 100%;
    margin: 0;
    box-shadow: 0 24px 80px -20px rgba(0, 0, 0, 0.45),
                0 0 0 4px color-mix(in oklab, var(--brand-glow) 22%, transparent);
}

.bidglory-welcome-list {
    margin: 0.85rem 0 1rem;
    padding-left: 1.2rem;
    line-height: 1.55;
}

.bidglory-welcome-list li + li {
    margin-top: 0.5rem;
}

.bidglory-welcome-tip {
    font-size: 0.8rem;
    color: var(--text-muted, #777);
    margin: 0.6rem 0 0.9rem;
}

.bidglory-welcome-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

/* Body lock while modal is open — prevents scroll-bleed under the
   backdrop. Removed by welcome-dialog.js on dismiss. */
body.bidglory-welcome-open {
    overflow: hidden;
}

@keyframes bidglory-welcome-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =============================================================
   Version-features carousel (PBI #13647 / Task #13759)
   ============================================================= */

.bidglory-features-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--text, #1a1a1a) 56%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    z-index: 4900; /* below the welcome dialog (5000) */
    animation: bidglory-welcome-fade-in 0.18s ease-out;
}

.bidglory-features-backdrop[hidden] {
    display: none;
}

.bidglory-features-panel {
    width: 100%;
    max-width: 620px;
    margin: 0;
    box-shadow: 0 24px 80px -20px rgba(0, 0, 0, 0.45),
                0 0 0 4px color-mix(in oklab, var(--brand-glow) 22%, transparent);
}

.bidglory-features-header {
    margin-bottom: 0.85rem;
}

/* Track + slides — flex row of fixed-width slides; JS translates the
   track to bring the active slide into view. */
.bidglory-features-viewport {
    overflow: hidden;
    border-radius: 6px;
}

.bidglory-features-track {
    display: flex;
    transition: transform 0.25s ease-out;
    width: 100%;
}

.bidglory-features-slide {
    flex: 0 0 100%;
    width: 100%;
    padding: 0.4rem 0.2rem 0.6rem;
}

.bidglory-features-slide__heading {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.bidglory-features-footer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.1rem;
}

.bidglory-features-nav {
    appearance: none;
    border: 1px solid var(--border, #d0d7de);
    background: var(--surface, #fff);
    color: var(--text, #1a1a1a);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.bidglory-features-nav:hover:not(:disabled) {
    background: var(--surface-sunken, #f5f8fb);
    border-color: var(--brand-sea, #2563eb);
}

.bidglory-features-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.bidglory-features-pos {
    font-size: 0.8rem;
    color: var(--text-muted, #777);
    font-variant-numeric: tabular-nums;
}

.bidglory-features-spacer {
    flex: 1;
}

body.bidglory-features-open {
    overflow: hidden;
}

/* ============================================================
   PBI #15274 — LoadingPanel + GridSkeleton (shared loading state)

   Sibling chrome to .empty-state-panel; deliberately reuses the
   .app-panel surface so a page's loading state and its loaded
   state share visual weight (no layout shift when data arrives).
   .grid-skeleton renders a pulse-animated row/cell grid for
   list/table pages where a layout-shaped placeholder reduces
   perceived latency over a bare "Loading…" line.
   ============================================================ */

.loading-panel {
    display: grid;
    gap: 0.75rem;
}

.loading-panel__message {
    margin: 0;
}

.grid-skeleton {
    display: grid;
    gap: 0.45rem;
}

.grid-skeleton__head,
.grid-skeleton__row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.6rem;
    align-items: center;
}

.grid-skeleton__cell {
    display: block;
    height: 0.85rem;
    border-radius: 0.4rem;
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--border) 55%, transparent) 0%,
        color-mix(in oklab, var(--border) 25%, transparent) 50%,
        color-mix(in oklab, var(--border) 55%, transparent) 100%);
    background-size: 200% 100%;
    animation: grid-skeleton-pulse 1.4s ease-in-out infinite;
}

.grid-skeleton__cell--head {
    height: 1.05rem;
    background: linear-gradient(
        90deg,
        color-mix(in oklab, var(--brand-sea) 28%, transparent) 0%,
        color-mix(in oklab, var(--brand-sea) 12%, transparent) 50%,
        color-mix(in oklab, var(--brand-sea) 28%, transparent) 100%);
    background-size: 200% 100%;
}

/* Pseudo-random cell widths so the bars don't read as a mechanical
   8-column ruler. Each cell rides at a different fraction of the
   1fr track and aligns to the start so the trailing whitespace
   reads as "this column is shorter than that one". */
.grid-skeleton__row .grid-skeleton__cell {
    justify-self: start;
    width: 90%;
}
.grid-skeleton__row .grid-skeleton__cell:nth-child(2) { width: 65%; }
.grid-skeleton__row .grid-skeleton__cell:nth-child(3) { width: 80%; }
.grid-skeleton__row .grid-skeleton__cell:nth-child(4) { width: 55%; }
.grid-skeleton__row .grid-skeleton__cell:nth-child(5) { width: 75%; }
.grid-skeleton__row .grid-skeleton__cell:nth-child(6) { width: 50%; }

@keyframes grid-skeleton-pulse {
    0%   { background-position: 100% 0; opacity: 0.85; }
    50%  { background-position: 0    0; opacity: 1; }
    100% { background-position: -100% 0; opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
    .grid-skeleton__cell {
        animation: none;
    }
}

/* =============================================================
   Tablet + touch layer
   -------------------------------------------------------------
   Everything below is layout and hit-area at the four --bp-*
   stops from theme.css. The carves above this point handle the
   grids that already had a breakpoint; this section covers the
   ones that never had one and the surfaces (Syncfusion grids,
   modals, raw tables) that need device-shape treatment rather
   than a column count.

   No colors, no --status-* tokens, no behavior.
   ============================================================= */

/* --- tablet landscape and below (1024px) ------------------------ */
@media (max-width: 1024px) {
    /* Company screen is a 1.6fr / 20rem split with no carve at all,
       so the side panel squeezed the form to ~26rem on an iPad. */
    .company-layout {
        grid-template-columns: 1fr;
    }

    /* The bid-workspace tab strip is the same problem NavMenu had:
       enough tabs to wrap, and wrapping costs a whole row above the
       grid. Swipe instead. */
    .legacy-tab-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .legacy-tab-strip::-webkit-scrollbar {
        display: none;
    }

    .legacy-tab-strip > * {
        flex: 0 0 auto;
    }

    /* A 22rem floor on the search box forces the whole filter row to
       overflow before its siblings get a chance to wrap. */
    .workspace-filter-search {
        min-width: 0;
        flex: 1 1 100%;
    }

    /* Four fixed-min columns need ~52rem; an iPad in landscape has
       about 60rem of content width once the shell padding is off, so
       this is right at the edge. Two columns is comfortable. */
    .item-dialog-package-row,
    .settings-rate-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The 1.5rem scrim padding costs 3rem of width that a 1420px
       dialog on a 1024px tablet does not have to spare. Trim it, but
       keep enough that the dialog still reads as a layer above the
       page rather than a new screen. */
    .modal-scrim {
        padding: 0.85rem;
    }

    .item-dialog {
        max-height: calc(100dvh - 1.7rem);
    }
}

/* --- tablet portrait and below (768px) -------------------------- */
@media (max-width: 768px) {
    /* Dense BidDetail footer rows: label + field side by side needs a
       label column wide enough to read, which at 768 leaves the field
       under 4rem. Let the label size to its text and give the rest to
       the input; the 4-up edit row folds to two rows of two. */
    .workspace-footer-metric-row,
    .labor-block .workspace-footer-metric-row,
    .tax-block .workspace-footer-total {
        grid-template-columns: minmax(3.5rem, auto) minmax(0, 1fr);
    }

    .workspace-footer-edit-row,
    .tax-block .workspace-footer-edit-row {
        grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr);
    }

    .footer-status-group {
        grid-template-columns: minmax(4rem, auto) minmax(0, 1fr);
    }

    /* Raw <table> markup has no wrapper to hang a scroller on, so the
       table itself becomes the scroll container. `display: block` on a
       table is the standard responsive-table escape hatch — the rows
       keep their own layout, the element just stops forcing the page
       wider than the viewport. */
    .data-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        white-space: nowrap;
    }

    .settings-rate-grid,
    .item-dialog-package-row,
    .maintenance-checkbox-grid,
    .export-columns-grid {
        grid-template-columns: 1fr;
    }

    /* Toolbars stop being a row of equals and start being a wrapped
       cluster with the primary action first. */
    .toolbar-row,
    .compact-toolbar,
    .compact-workspace-actions {
        gap: 0.4rem;
    }

    .toolbar-divider {
        display: none;
    }

    /* Right-aligned dialog footers push the primary button off the
       edge once three actions wrap. Full-width stack instead, in DOM
       order — the primary action is last in every footer in this
       codebase, so it lands at the bottom, nearest the thumb, and the
       visual order still matches the tab order. */
    .dialog-footer,
    .item-dialog-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .dialog-footer > *,
    .item-dialog-footer > * {
        width: 100%;
        justify-content: center;
    }

    .dialog-footer__meta,
    .dialog-footer__back {
        margin-right: 0;
    }
}

/* --- phone (640px) ---------------------------------------------- */
@media (max-width: 640px) {
    /* Near-full-bleed — a hairline of scrim is all that is left, just
       enough to keep the dialog reading as a layer over the page. */
    .modal-scrim {
        padding: 0.4rem;
        /* Top-aligned rather than centered: a tall dialog that grows
           past the viewport would otherwise centre itself and clip
           equally off the top and the bottom, hiding its own header. */
        align-items: start;
    }

    .item-dialog {
        max-height: calc(100dvh - 0.8rem);
        padding: 0.9rem 0.85rem calc(0.9rem + var(--safe-b));
    }

    .preview-quick-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Syncfusion grids on touch ---------------------------------- */
/* Keyed on the pointer, not the width: the grid is the same size
   problem on a 1024px iPad and a 1440px touch laptop. */
@media (pointer: coarse) {
    /* Syncfusion scrolls the grid body horizontally itself; these
       only make that scroll feel native and stop a horizontal swipe
       that runs off the last column from dragging the page with it. */
    .bidglory-grid.e-grid .e-gridcontent {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* A 0.5rem row cell is a ~30px tap target and these rows are the
       primary way a user opens a bid. Taller rows, and the header
       filter/sort affordances get room to be hit accurately. */
    .bidglory-grid.e-grid .e-rowcell {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    .bidglory-grid.e-grid .e-headercell {
        padding-top: 0.7rem;
        padding-bottom: 0.7rem;
    }

    /* The densest inputs in the app: the BidDetail footer edit rows pin
       `height: 1.66rem` with 0.7rem text — a 27px box with 11px type,
       which is not hittable or readable on a tablet. `height` (not
       min-height) is what's set, so min-height alone would do nothing;
       release it to auto and let the touch token drive the box. Kept at
       0.82rem rather than the 16px anti-zoom size because this grid is
       still four columns wide in landscape — the ≤768 rule below takes
       it the rest of the way once the row has stacked. */
    .workspace-footer-rows--editable .form-control {
        height: auto;
        min-height: var(--control-h-sm);
        font-size: 0.82rem;
        padding: 0.25rem 0.4rem;
    }
}

@media (pointer: coarse) and (max-width: 768px) {
    .workspace-footer-rows--editable .form-control {
        font-size: 16px;
    }
}