/* =============================================================
   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 {
    margin: 0;
    font-family: inherit;
}

.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);
}

.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 {
    display: none;
}

/* .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: 960px) {
    .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: 960px) {
    .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;
}

.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 {
    display: block;
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.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(12rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.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-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: 1080px) {
    .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: 980px) {
    .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;
    z-index: 1200;
    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: 880px) {
    .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-field span,
.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;
}

.settings-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 1.9rem;
    font-size: 0.9rem;
}

.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: #f8fafc;
    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);
}

.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-kicker {
    margin: 0 0 0.35rem;
    color: var(--text-muted);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.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;
}

.legacy-filter-field span {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.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);
}

.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: #f8fafc;
    font-weight: 700;
}

.footer-negative {
    color: #b42318;
}

.footer-positive {
    color: #0f172a;
}

.labor-block .workspace-footer-rows > div:nth-child(1) {
    background: #f8d8ff;
}

.labor-block .workspace-footer-rows > div:nth-child(2) {
    background: #f4cbfb;
}

.labor-block .workspace-footer-rows > div:nth-child(3) {
    background: #edc0f6;
}

.labor-block .workspace-footer-rows > div:nth-child(4) {
    background: #cff4fa;
}

.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;
}

.btn-copy-ready {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
    border-color: #16a34a;
    color: #052e16;
    font-weight: 700;
}

.btn-copy-ready:hover,
.btn-copy-ready:focus {
    background: linear-gradient(180deg, #64e18d 0%, #22c55e 100%);
    border-color: #15803d;
    color: #052e16;
}

.btn-copy-idle {
    background: linear-gradient(180deg, #fde68a 0%, #facc15 100%);
    border-color: #eab308;
    color: #713f12;
    font-weight: 700;
}

.btn-copy-idle:hover,
.btn-copy-idle:focus {
    background: linear-gradient(180deg, #fef08a 0%, #facc15 100%);
    border-color: #ca8a04;
    color: #713f12;
}

.btn-move-ready {
    background: linear-gradient(180deg, #4ade80 0%, #22c55e 100%);
    border-color: #16a34a;
    color: #052e16;
    font-weight: 700;
}

.btn-move-ready:hover,
.btn-move-ready:focus {
    background: linear-gradient(180deg, #64e18d 0%, #22c55e 100%);
    border-color: #15803d;
    color: #052e16;
}

.btn-move-idle {
    background: linear-gradient(180deg, #fde68a 0%, #facc15 100%);
    border-color: #eab308;
    color: #713f12;
    font-weight: 700;
}

.btn-move-idle:hover,
.btn-move-idle:focus {
    background: linear-gradient(180deg, #fef08a 0%, #facc15 100%);
    border-color: #ca8a04;
    color: #713f12;
}

.grid-edit-hint {
    color: #64748b;
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

@media (max-width: 1120px) {
    .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: #f8fafc;
}

.modal-scrim {
    position: fixed;
    inset: 0;
    z-index: 1200;
    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%);
}

.item-dialog-title-block .legacy-kicker {
    color: #1d4ed8;
}

.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;
}

.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, #f8fafc 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;
}

.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: #f8fafc;
    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;
}

.checkbox-row {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    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: 960px) {
    .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: #fcfaff;
}

.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 {
    background: #fff4df;
}

.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: #fcfaff;  /* very light purple — 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 {
    background: #fff4df;  /* cream — option */
}

.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 {
    min-height: 2rem;
    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: 900px) {
    .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);
}

[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 .legacy-kicker {
    color: var(--brand-glow);
}
[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 {
    background: var(--surface-sunken);
    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);
}

[data-theme="dark"] .footer-readonly,
[data-theme="dark"] .workspace-footer-rows.neutral > div,
[data-theme="dark"] .totals-mini-grid .form-control[readonly] {
    background: var(--surface-sunken);
}

/* 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 {
    background: color-mix(in srgb, #d9b7ff 12%, 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 {
    background: color-mix(in srgb, #fff4df 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. */
[data-theme="dark"] .labor-block .workspace-footer-rows > div:nth-child(1) { background: color-mix(in oklab, #f8d8ff 18%, var(--surface)); }
[data-theme="dark"] .labor-block .workspace-footer-rows > div:nth-child(2) { background: color-mix(in oklab, #f4cbfb 18%, var(--surface)); }
[data-theme="dark"] .labor-block .workspace-footer-rows > div:nth-child(3) { background: color-mix(in oklab, #edc0f6 18%, var(--surface)); }
[data-theme="dark"] .labor-block .workspace-footer-rows > div:nth-child(4) { 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"] .footer-positive { color: var(--text); }
[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: 980px) {
    .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;
}