@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/NWCWebApp2022.Copilot/NWCWebApp2022.Copilot.yum2etfu52.bundle.scp.css';

/* /Components/Shared/DocumentViewer.razor.rz.scp.css */
.doc-viewer-pane[b-0oc7u9764a] {
    flex: 0 0 340px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    background: var(--gray-50);
    overflow: hidden;
    max-height: 75vh;
}

.doc-viewer-pane.collapsed[b-0oc7u9764a] {
    flex: 0 0 auto;
    max-height: none;
}

.doc-viewer-header[b-0oc7u9764a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--gray-300);
    background: var(--white);
}

.doc-viewer-page-select[b-0oc7u9764a] {
    width: auto;
    min-width: 90px;
    font-size: var(--font-size-sm);
    padding: 0.15rem 0.4rem;
}

[b-0oc7u9764a] .doc-magnifier-wrap {
    position: relative;
    flex: 1;
    min-height: 0;
}

[b-0oc7u9764a] .doc-preview-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 70vh;
    cursor: crosshair;
}

[b-0oc7u9764a] .doc-magnifier-lens {
    display: none;
    position: fixed;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 2px solid rgba(var(--blue-500-rgb), 0.6);
    box-shadow: var(--dailyflow-magnifier-shadow);
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: var(--z-drag-indicator);
}
/* /Components/Shared/FilterChip.razor.rz.scp.css */
/* Pill-style filter chip. Visual parity with the deleted .cm-chip / .im-chip blocks.
   Active state colors are the existing "sticky amber" treatment — tokenized as
   --filterchip-active-* (W17), fresh aliases of the existing --inv-low-selected-bg,
   --inv-fw-notice-, and --labelcola-notice- values now that this component has 4
   real consumers. */
.nwc-filter-chip[b-u2p6k0lxrc] {
    appearance: none;
    border: 1px solid var(--gray-300);
    background: var(--gray-50);
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    text-decoration: none;
}

.nwc-filter-chip:hover[b-u2p6k0lxrc] {
    background: var(--surface-default);
    border-color: var(--gray-500);
    color: var(--gray-700);
}

.nwc-filter-chip:disabled[b-u2p6k0lxrc] {
    opacity: 0.55;
    cursor: not-allowed;
}

.nwc-filter-chip--active[b-u2p6k0lxrc],
.nwc-filter-chip--active:hover[b-u2p6k0lxrc] {
    background: var(--filterchip-active-bg);
    border-color: var(--filterchip-active-border);
    color: var(--filterchip-active-fg);
}
/* /Components/Shared/NameMatchRow.razor.rz.scp.css */
/* Name match row (supplier, ship-to, bill-to) */
.name-match-row[b-2c243mdt9k] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-wrap: wrap;
    padding: var(--space-2xs) 0;
    font-size: 0.8rem;
}
/* /Components/Shared/ProjectionStatusChip.razor.rz.scp.css */
/* Projection status pill. Pill geometry mirrors .nwc-filter-chip; colors are semantic
   (green = projected / gray = not) — tokenized as --projchip-* (W17); the fg colors
   reuse the --green-700/--gray-600 general primitives directly (exact matches). */
.nwc-projection-chip[b-3jtxq7dsqe] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    border: 1px solid transparent;
}

.nwc-projection-chip--on[b-3jtxq7dsqe] {
    background: var(--projchip-on-bg);
    border-color: var(--projchip-on-border);
    color: var(--green-700);
}

.nwc-projection-chip--off[b-3jtxq7dsqe] {
    background: var(--gray-100);
    border-color: var(--projchip-off-border);
    color: var(--gray-600);
}
/* /Components/Shared/SearchBar.razor.rz.scp.css */
/* Visual parity with the legacy .compliance-page .search-bar block in site.css.
   That CSS will be deleted once all 5 Compliance consumers are migrated. */
.nwc-search-bar[b-rwpupvk0kg] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--search-bar-bg);
    border-radius: var(--search-bar-radius);
    border: 1px solid var(--search-bar-border);
    margin-bottom: var(--space-sm);
}

.nwc-search-bar .input-group[b-rwpupvk0kg] {
    flex: 1;
    max-width: 400px;
}

.nwc-search-bar .form-control[b-rwpupvk0kg] {
    border-radius: var(--radius-md);
}

.nwc-search-bar .form-control:focus[b-rwpupvk0kg] {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-focus-accent);
}

/* ── Compact variant (Manager Shell filterbars; replaces .cm-search / .im-search) ── */
.nwc-search-bar--compact[b-rwpupvk0kg] {
    position: relative;
    flex: 1 1 240px;
    max-width: 360px;
    /* No padded container, no bg, no border, no margin — sits inside an existing filterbar */
    padding: 0;
    background: transparent;
    border: none;
    margin-bottom: 0;
    display: block;
}

.nwc-search-bar--compact > i[b-rwpupvk0kg] {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    color: var(--gray-600);
    font-size: var(--font-size-md);
    pointer-events: none;
}

.nwc-search-bar--compact input[b-rwpupvk0kg] {
    padding-left: 26px;
    padding-right: 26px; /* room for the clear button */
}

.nwc-search-bar--compact .nwc-search-clear[b-rwpupvk0kg] {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    padding: 0 4px;
    line-height: 1;
    color: var(--gray-600);
    cursor: pointer;
}

.nwc-search-bar--compact .nwc-search-clear:hover[b-rwpupvk0kg] {
    color: var(--gray-800);
}

.nwc-search-bar--compact .nwc-search-clear i[b-rwpupvk0kg] {
    font-size: var(--font-size-sm);
}
/* /Pages/Admin/AdminSessions.razor.rz.scp.css */
.sessions-stats[b-fgorkd7x1c] {
    display: flex;
    gap: 0.75rem;
    margin: 0.75rem 0 1rem;
    flex-wrap: wrap;
}

.stat-card[b-fgorkd7x1c] {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.375rem;
    min-width: 8rem;
}

.stat-value[b-fgorkd7x1c] {
    font-size: 1.4rem;
    font-weight: 600;
}

.stat-label[b-fgorkd7x1c] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.sessions-table-wrap[b-fgorkd7x1c] {
    overflow-x: auto;
}

.sessions-table .path-cell[b-fgorkd7x1c] {
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sessions-table .row-closed[b-fgorkd7x1c] {
    opacity: 0.45;
}

.sessions-table .row-down[b-fgorkd7x1c] {
    opacity: 0.7;
    font-style: italic;
}

.auth-badge[b-fgorkd7x1c] {
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.5rem;
    font-size: 0.7rem;
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
}

.auth-badge.auth-devbypass[b-fgorkd7x1c],
.auth-badge.auth-authdisabled[b-fgorkd7x1c] {
    border-color: #d9a406;
    color: #9c7000;
}

.broadcast-panel[b-fgorkd7x1c] {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.375rem;
}

/* layout comes from Bootstrap utilities on the element (d-flex align-items-center
   gap-2 flex-wrap) — a bespoke copy here trips the CSS drift gate */
.broadcast-form input:first-child[b-fgorkd7x1c] {
    flex: 1 1 20rem;
}

.broadcast-minutes[b-fgorkd7x1c] {
    width: 5rem;
}

.broadcast-minutes-label[b-fgorkd7x1c],
.broadcast-hint[b-fgorkd7x1c],
.broadcast-active[b-fgorkd7x1c] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.broadcast-active[b-fgorkd7x1c] {
    font-weight: 600;
}

.slot-footnote[b-fgorkd7x1c] {
    margin-top: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.history-panel[b-fgorkd7x1c] {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 0.375rem;
}

/* header row layout via flex; range picker hugs the right edge */
.history-header[b-fgorkd7x1c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.recent-sessions[b-fgorkd7x1c] {
    margin-top: 0.75rem;
}
/* /Pages/Admin/Comms/CommunicationsLog.razor.rz.scp.css */
/* CommunicationsLog — scoped to the page's own DOM. The filterbar/grid/inspector markup is passed
   to ManagerShell as RenderFragments, which keep THIS component's b-* scope, so these rules apply.
   ⛔ There is no longer a per-page grid override in site.css: ManagerShell now adds `ms-no-tree`
   itself when TreeContent is null, so treeless pages reclaim the track without each one restating
   a grid-template that fights the shell's own column pins. Do not re-add one. */

/* The list must fit its pane rather than scroll sideways — Outcome is the column the page exists
   for, and it was the first one pushed off-screen. Fixed layout so the flexible Subject column
   absorbs the slack instead of every column negotiating for it. */
.comms-table[b-29tg32uzja] {
    table-layout: fixed;
    width: 100%;
}

.comms-table th[b-29tg32uzja],
.comms-table td[b-29tg32uzja] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.comms-col-when[b-29tg32uzja] { width: 108px; }
.comms-col-channel[b-29tg32uzja] { width: 62px; }
.comms-col-feature[b-29tg32uzja] { width: 150px; }
.comms-col-recipient[b-29tg32uzja] { width: 190px; }
.comms-col-outcome[b-29tg32uzja] { width: 84px; }

.comms-row[b-29tg32uzja] {
    cursor: pointer;
}

.comms-subject[b-29tg32uzja] {
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid mechanics now come from global .nwc-kv (site.css) — see
   LAYOUT-PATTERNS.md Pattern 2. Only this instance's deltas remain local. */
.comms-dl[b-29tg32uzja] {
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
}

.comms-dl dt[b-29tg32uzja] {
    font-weight: 600;
    color: var(--gray-600);
}

.comms-dl dd[b-29tg32uzja] {
    word-break: break-word;
}

/* The overview shares the inspector's ~320px pane, so it gets the same treatment as the list:
   fixed layout, the name column absorbing the slack, and nothing scrolling sideways. */
.comms-overview[b-29tg32uzja] {
    table-layout: fixed;
    width: 100%;
}

.comms-overview th[b-29tg32uzja],
.comms-overview td[b-29tg32uzja] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 2px;
    padding-right: 2px;
}

.comms-overview th:nth-child(2)[b-29tg32uzja], .comms-overview td:nth-child(2)[b-29tg32uzja] { width: 48px; }
.comms-overview th:nth-child(3)[b-29tg32uzja], .comms-overview td:nth-child(3)[b-29tg32uzja] { width: 46px; }
.comms-overview th:nth-child(4)[b-29tg32uzja], .comms-overview td:nth-child(4)[b-29tg32uzja] { width: 48px; }
.comms-overview th:nth-child(5)[b-29tg32uzja], .comms-overview td:nth-child(5)[b-29tg32uzja] { width: 52px; }
/* /Pages/Admin/Comms/PacketSubscriptions.razor.rz.scp.css */
/* Packet Subscriptions admin pane.
   Tokens only (wwwroot/css/tokens.css) — no hardcoded colors or sizes, so the pane follows the
   theme like every other admin surface. */

.ps--run-strip[b-htr7l2zevs] {
    border-left: 3px solid var(--nwc-border);
    padding-left: 0.75rem;
}

.ps--add-card[b-htr7l2zevs] {
    border-color: var(--nwc-border);
    background: var(--surface-default);
}

/* Addresses are the one place an operator must read character-by-character: a phone number that is
   off by a digit and an email with a transposed domain both look fine in a proportional face. */
.ps--address-value[b-htr7l2zevs] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--font-size-2xs);
}

.ps--address-list[b-htr7l2zevs] {
    max-height: 12rem;
    overflow-y: auto;
}

.ps--address[b-htr7l2zevs] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius-xs);
    cursor: pointer;
}

.ps--address:hover[b-htr7l2zevs] {
    background: var(--nwc-bg-hover);
}

/* A number with no consent is shown, not hidden — "why can't I pick my own cell number" is a
   question the pane should answer in place rather than by omission. */
.ps--address-blocked[b-htr7l2zevs] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ps--owner-cell[b-htr7l2zevs] {
    min-width: 12rem;
}

.ps--table td[b-htr7l2zevs] {
    vertical-align: middle;
}

/* Disabled rows stay legible: they are still the record of who used to receive this. */
.ps--row-off[b-htr7l2zevs] {
    opacity: 0.55;
}

.ps--err[b-htr7l2zevs] {
    font-size: var(--font-size-2xs);
    max-width: 22rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Pages/Admin/CopilotAnalytics.razor.rz.scp.css */
.analytics-table[b-mzyy5vkiml] {
    font-size: 0.82rem;
}

.rate-bar[b-mzyy5vkiml] {
    display: inline-block;
    width: 60px;
    height: 8px;
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    vertical-align: middle;
}

.rate-fill[b-mzyy5vkiml] {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width 0.3s;
}

.rate-label[b-mzyy5vkiml] {
    font-size: var(--font-size-sm);
    margin-left: 0.3rem;
}

.summary-grid[b-mzyy5vkiml] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.summary-item[b-mzyy5vkiml] {
    text-align: center;
}

.summary-value[b-mzyy5vkiml] {
    display: block;
    font-size: 1.3rem;
    font-weight: var(--font-weight-bold);
    color: var(--nwc-primary, #2c5f2d);
}

.summary-label[b-mzyy5vkiml] {
    font-size: 0.72rem;
    color: var(--nwc-text-muted, var(--gray-600));
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Suggestion cards */
.suggestion-card[b-mzyy5vkiml] {
    border: 1px solid var(--nwc-border, var(--gray-300));
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--admin-panel-bg-subtle);
}

.suggestion-header[b-mzyy5vkiml] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
}

.suggestion-pattern[b-mzyy5vkiml] {
    font-size: var(--font-size-md);
    margin-bottom: 0.4rem;
    padding: 0.35rem var(--space-sm);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
}

.suggestion-pattern code[b-mzyy5vkiml] {
    font-weight: var(--font-weight-semibold);
    color: var(--admin-code-highlight-fg);
}

.suggestion-summary[b-mzyy5vkiml] {
    font-size: 0.8rem;
    color: var(--nwc-text-muted, var(--gray-600));
    margin-bottom: 0.4rem;
}

.suggestion-rule[b-mzyy5vkiml] {
    font-size: 0.8rem;
    font-family: monospace;
    background: var(--admin-rule-bg);
    border: 1px solid var(--admin-rule-border);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.6rem;
    margin-bottom: var(--space-sm);
    white-space: pre-wrap;
}

.suggestion-examples[b-mzyy5vkiml] {
    font-size: 0.78rem;
    margin-bottom: var(--space-sm);
}

.suggestion-examples summary[b-mzyy5vkiml] {
    cursor: pointer;
    color: var(--nwc-primary, #2c5f2d);
    font-weight: var(--font-weight-medium);
}

.suggestion-examples ul[b-mzyy5vkiml] {
    margin-top: var(--space-2xs);
    padding-left: 1.2rem;
}

/* /Pages/Admin/CopilotCorrections.razor.rz.scp.css */
/* .editor-grid → .nwc-editor-grid (site.css) */

.editor-actions[b-jxjv1nepsw] {
    display: flex;
    gap: var(--space-sm);
}

.copilot-table[b-jxjv1nepsw] {
    font-size: 0.82rem;
}

.correction-text-cell[b-jxjv1nepsw] {
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* /Pages/Admin/CopilotDashboard.razor.rz.scp.css */
.metrics-cards[b-j36j90vv00] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.metric-card[b-j36j90vv00] {
    background: var(--white);
    border: 1px solid var(--nwc-border, var(--gray-300));
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

.metric-value[b-j36j90vv00] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--nwc-primary, #2c5f2d);
}

.metric-label[b-j36j90vv00] {
    font-size: var(--font-size-sm);
    color: var(--nwc-text-muted, var(--gray-600));
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-top: var(--space-2xs);
}

.metric-card-error[b-j36j90vv00] {
    border-color: var(--admin-metric-error-border);
    background: var(--admin-metric-error-bg);
}

.metric-card-error .metric-value[b-j36j90vv00] {
    color: var(--admin-metric-error-fg);
}

.metric-card-warning[b-j36j90vv00] {
    border-color: var(--admin-metric-warning-border);
    background: var(--admin-metric-warning-bg);
}

.metric-card-warning .metric-value[b-j36j90vv00] {
    color: var(--amber-600);
}

.filter-bar[b-j36j90vv00] {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.filter-bar .form-select[b-j36j90vv00],
.filter-bar .form-control[b-j36j90vv00] {
    max-width: 180px;
}

.copilot-table[b-j36j90vv00] {
    font-size: 0.82rem;
}

.clickable-row[b-j36j90vv00] {
    cursor: pointer;
}

.clickable-row:hover[b-j36j90vv00] {
    background-color: var(--nwc-hover, var(--gray-50));
}

.header-actions[b-j36j90vv00] {
    display: flex;
    gap: var(--space-sm);
}
/* /Pages/Admin/CopilotSessionDetail.razor.rz.scp.css */
.session-badges[b-y1wv639ven] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: var(--space-xl);
}

.session-layout[b-y1wv639ven] {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-xl);
    min-height: 400px;
}

.conversation-column[b-y1wv639ven], .fields-column[b-y1wv639ven] {
    max-height: calc(90vh - 200px);
    overflow-y: auto;
}

.turn[b-y1wv639ven] {
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.turn-user[b-y1wv639ven] {
    background: var(--admin-turn-user-bg);
    border-left: 3px solid var(--admin-turn-user-border);
}

.turn-assistant[b-y1wv639ven] {
    background: var(--admin-turn-assistant-bg);
    border-left: 3px solid var(--nwc-primary, #2c5f2d);
}

.turn-header[b-y1wv639ven] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}

.turn-role[b-y1wv639ven] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
}

.turn-meta[b-y1wv639ven] {
    font-size: var(--font-size-xs);
    color: var(--nwc-text-muted, var(--gray-600));
}

.turn-body[b-y1wv639ven] {
    font-size: var(--font-size-md);
    white-space: pre-wrap;
    word-break: break-word;
}

.tool-call[b-y1wv639ven] {
    background: var(--yellow-100);
    border-left: 3px solid var(--yellow-500);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    font-size: 0.8rem;
}

.tool-meta[b-y1wv639ven] {
    font-size: var(--font-size-xs);
    color: var(--nwc-text-muted, var(--gray-600));
}

.tool-error[b-y1wv639ven] {
    color: var(--red-500);
    font-size: 0.78rem;
    margin-top: var(--space-2xs);
}

.field-app[b-y1wv639ven] {
    border: 1px solid var(--nwc-border, var(--gray-300));
    border-radius: var(--radius-md);
    padding: 0.6rem;
    margin-bottom: var(--space-sm);
}

.field-modified[b-y1wv639ven] {
    border-color: var(--yellow-500);
    background: var(--admin-field-modified-bg);
}

.field-name[b-y1wv639ven] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.82rem;
    margin-bottom: 0.3rem;
}

.field-values[b-y1wv639ven] {
    font-size: 0.78rem;
}

.field-values .label[b-y1wv639ven] {
    color: var(--nwc-text-muted, var(--gray-600));
    font-size: var(--font-size-xs);
}

.field-proposed[b-y1wv639ven], .field-applied[b-y1wv639ven] {
    margin-top: 0.15rem;
}

.header-actions[b-y1wv639ven] {
    display: flex;
    gap: var(--space-sm);
}

@media (max-width: 992px) {
    .session-layout[b-y1wv639ven] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/CopilotTools.razor.rz.scp.css */
/* .editor-grid → .nwc-editor-grid (site.css) */

.editor-actions[b-z1t9mt8za1] {
    display: flex;
    gap: var(--space-sm);
}

.copilot-table[b-z1t9mt8za1] {
    font-size: 0.82rem;
}

.json-editor[b-z1t9mt8za1] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-size: 0.8rem;
    white-space: pre;
    tab-size: 2;
}

.tool-name-cell[b-z1t9mt8za1] {
    font-family: 'Consolas', 'Courier New', monospace;
    font-weight: var(--font-weight-semibold);
}
/* /Pages/Admin/CouplingGraph.razor.rz.scp.css */
/* Layout lives in site.css's shared .nwc-embed-host (Pattern 1 viewport-lock).
   Only the tool's own page colour is page-specific.
   Was an inline <style> block in CouplingGraph.razor — those are global leaks, so
   .coupling-graph-host was being defined app-wide from one admin page. */
.coupling-graph-host[b-91jsn5roxr] {
    background: #0f1115;
}
/* /Pages/Admin/ExtractionReview.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ExtractionReview.razor.css — Thumbnail grid review page
   ═══════════════════════════════════════════════════════════════════════════ */

.er-header[b-hts3z1y06z] {
    flex-shrink: 0;
    padding-bottom: var(--space-2xs);
}

/* ── Summary cards ── */
.er-cards[b-hts3z1y06z] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.er-card[b-hts3z1y06z] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, var(--hvt-er-card-gradient-start) 0%, var(--hvt-er-card-gradient-end) 100%);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-default);
    min-width: 100px;
}

.er-card:hover[b-hts3z1y06z] {
    box-shadow: var(--shadow-lg);
}

.er-card--active[b-hts3z1y06z] {
    border-color: var(--indigo-600);
    background: linear-gradient(135deg, var(--hvt-bulk-bar-bg) 0%, var(--hvt-er-active-gradient-end) 100%);
    box-shadow: var(--hvt-er-active-shadow);
}

.er-card-icon[b-hts3z1y06z] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    background: var(--hvt-er-icon-indigo-bg);
    color: var(--indigo-600);
    font-size: 0.875rem;
    flex-shrink: 0;
}

.er-card-icon--weighttag[b-hts3z1y06z] { background: var(--hvt-er-icon-weighttag-bg); color: var(--emerald-500); }
.er-card-icon--bol[b-hts3z1y06z] { background: var(--hvt-er-icon-bol-bg); color: var(--amber-500); }
.er-card-icon--cola[b-hts3z1y06z] { background: var(--hvt-er-icon-cola-bg); color: var(--indigo-500); }
.er-card-icon--permit[b-hts3z1y06z] { background: var(--hvt-er-icon-permit-bg); color: var(--hvt-er-icon-permit-fg); }
.er-card-icon--invoice[b-hts3z1y06z] { background: var(--hvt-er-icon-invoice-bg); color: var(--purple-500); }
.er-card-icon--label[b-hts3z1y06z] { background: var(--hvt-er-icon-label-bg); color: var(--pink-500); }
.er-card-icon--glass[b-hts3z1y06z] { background: var(--hvt-er-icon-glass-bg); color: var(--hvt-er-icon-glass-fg); }

.er-card-number[b-hts3z1y06z] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    color: var(--slate-800);
}

.er-card-label[b-hts3z1y06z] {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate-500);
}

/* ── Filters ── */
.er-result-count[b-hts3z1y06z] {
    font-size: 0.8rem;
    margin-left: auto;
}

/* ── Thumbnail grid ── */
.er-grid[b-hts3z1y06z] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
    overflow-y: auto;
    flex: 1;
    padding: var(--space-2xs);
    align-content: start;
}

.er-item[b-hts3z1y06z] {
    border: 2px solid var(--slate-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all var(--transition-default);
    background: var(--surface-default);
}

.er-item:hover[b-hts3z1y06z] {
    border-color: var(--slate-400);
    box-shadow: var(--shadow-lg);
}

.er-item--selected[b-hts3z1y06z] {
    border-color: var(--indigo-600);
    box-shadow: var(--hvt-er-item-selected-shadow);
}

.er-item--reviewed[b-hts3z1y06z] {
    opacity: 0.7;
}

.er-item--reviewed:hover[b-hts3z1y06z] {
    opacity: 1;
}

.er-thumb[b-hts3z1y06z] {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--slate-50);
    display: flex;
    align-items: center;
    justify-content: center;
}

.er-thumb-placeholder[b-hts3z1y06z] {
    font-size: 2rem;
    color: var(--slate-300);
}

.er-item-info[b-hts3z1y06z] {
    padding: var(--space-xs) var(--space-sm);
}

.er-item-badges[b-hts3z1y06z] {
    display: flex;
    gap: var(--space-2xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-3xs);
}

.er-item-tag[b-hts3z1y06z] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem;
    color: var(--slate-800);
}

.er-item-file[b-hts3z1y06z] {
    font-size: var(--font-size-2xs);
    color: var(--slate-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Classification badges ── */
.er-badge--weighttag[b-hts3z1y06z] { background: var(--emerald-500) !important; }
.er-badge--bol[b-hts3z1y06z] { background: var(--amber-500) !important; color: var(--slate-800) !important; }
.er-badge--cola[b-hts3z1y06z] { background: var(--indigo-500) !important; }
.er-badge--permit[b-hts3z1y06z] { background: var(--hvt-er-icon-permit-fg) !important; }
.er-badge--invoice[b-hts3z1y06z] { background: var(--purple-500) !important; }
.er-badge--label[b-hts3z1y06z] { background: var(--pink-500) !important; }
.er-badge--glass[b-hts3z1y06z] { background: var(--hvt-er-icon-glass-fg) !important; }
.er-badge--unknown[b-hts3z1y06z] { background: var(--slate-400) !important; }

/* Review status badges */
.er-badge--matched[b-hts3z1y06z] { background: var(--emerald-500) !important; }
.er-badge--confirmed[b-hts3z1y06z] { background: var(--hvt-er-badge-confirmed-bg) !important; }
.er-badge--reclassified[b-hts3z1y06z] { background: var(--amber-500) !important; color: var(--slate-800) !important; }
.er-badge--ignored[b-hts3z1y06z] { background: var(--slate-400) !important; }

/* ── Detail panel ── */
[b-hts3z1y06z] .er-detail-thumb {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--slate-200);
}

[b-hts3z1y06z] .er-detail-thumb img {
    width: 100%;
    display: block;
}

/* Reuse wt-detail-section styles */
[b-hts3z1y06z] .wt-detail-section {
    margin-bottom: var(--space-xl);
}

/* ExtractionReview narrows the dt column from canonical 7rem to 5.5rem. */
[b-hts3z1y06z] .wt-dl {
    grid-template-columns: 5.5rem 1fr;
}

/* ── Pagination ── */
.er-pagination[b-hts3z1y06z] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-sm) 0;
    flex-shrink: 0;
}

.er-page-info[b-hts3z1y06z] {
    font-size: 0.8rem;
    color: var(--slate-500);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .er-grid[b-hts3z1y06z] {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    .er-cards[b-hts3z1y06z] {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .er-card[b-hts3z1y06z] {
        flex-shrink: 0;
    }
}
/* /Pages/Admin/Fleet/FleetTerminals.razor.rz.scp.css */
/* FleetTerminals — scoped to this page's own DOM. The ribbon/filterbar/tree/grid/inspector markup is
   passed to ManagerShell as RenderFragments, which keep THIS component's b-* scope, so these rules
   apply without ::deep. Colours come from tokens.css; chips and the empty state come from the global
   nwc-* utilities in site.css — only the shapes unique to this page are below. */

/* ── Provenance strip ──────────────────────────────────────────────────
   The bar is the page's thesis in one row: how much of the ledger was resolved while it was still
   true. It is a flex row of grow-weighted segments rather than a chart library — four numbers do
   not earn a dependency, and grow weights make the proportions exact for free. */
.fleet-ribbon[b-x1gx52a2vn] {
    padding: 8px 12px 6px;
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
}

.fleet-ribbon-head[b-x1gx52a2vn] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.fleet-ribbon-title[b-x1gx52a2vn] {
    font-weight: 600;
    font-size: 1rem;
}

.fleet-ribbon-sub[b-x1gx52a2vn] {
    margin-left: 8px;
    font-size: 0.78rem;
    color: var(--gray-600);
}

.fleet-counts[b-x1gx52a2vn] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    font-size: 0.8rem;
    color: var(--gray-700);
}

.fleet-provenance[b-x1gx52a2vn] {
    display: flex;
    height: 8px;
    margin-top: 6px;
    overflow: hidden;
    border-radius: 4px;
    background: var(--gray-100);
}

.fleet-prov-seg[b-x1gx52a2vn] {
    flex-basis: 0;
    min-width: 2px;
}

.fleet-prov-live[b-x1gx52a2vn] { background: var(--green-500); }
.fleet-prov-sameday[b-x1gx52a2vn] { background: var(--blue-500); }
.fleet-prov-backfill[b-x1gx52a2vn] { background: var(--amber-500); }
.fleet-prov-none[b-x1gx52a2vn] { background: var(--gray-300); }

.fleet-prov-legend[b-x1gx52a2vn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    margin-top: 5px;
    font-size: 0.72rem;
    color: var(--gray-600);
}

.fleet-prov-key[b-x1gx52a2vn] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
}

.fleet-prov-note[b-x1gx52a2vn] {
    flex: 1 1 320px;
    min-width: 260px;
    color: var(--amber-800);
}

.fleet-search[b-x1gx52a2vn] {
    min-width: 180px;
    max-width: 300px;
}

/* ── Left roster ─────────────────────────────────────────────────────── */
/* The roster and the grid are both .nwc-fill-scroll (site.css) — the scroll region is a
   shared shape, not a fleet one. */
.fleet-list-row[b-x1gx52a2vn] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0 8px;
    width: 100%;
    padding: 6px 10px;
    border: 0;
    border-bottom: 1px solid var(--gray-100);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.fleet-list-row:hover[b-x1gx52a2vn] {
    background: var(--gray-50);
}

.fleet-list-row.is-selected[b-x1gx52a2vn] {
    background: var(--blue-100);
}

.fleet-list-name[b-x1gx52a2vn] {
    font-size: 0.85rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-list-meta[b-x1gx52a2vn] {
    grid-column: 1 / -1;
    font-size: 0.72rem;
    color: var(--gray-600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fleet-list-flag[b-x1gx52a2vn] {
    grid-row: 1;
    grid-column: 2;
    font-size: 0.7rem;
    color: var(--amber-800);
    white-space: nowrap;
}

.fleet-list-flag--bad[b-x1gx52a2vn] {
    color: var(--red-700);
}

/* ── Centre grid ─────────────────────────────────────────────────────── */
/* Fixed layout so the flexible machine-name column absorbs the slack. The two right-hand columns
   are the reason the page exists, so they must never be the ones pushed off-screen.
   ⛔ min-width is load-bearing, not a nicety: with five fixed columns summing to 512px, a grid pane
   narrower than that leaves the machine-name column a couple of pixels and it renders as a single
   stray glyph — measured at 1536x695 with the default pane widths, which was exactly that case. The
   min-width turns a crushed column into a horizontal scroll, which is visible rather than deceptive. */
.fleet-table[b-x1gx52a2vn] {
    table-layout: fixed;
    width: 100%;
    min-width: 680px;
}

/* Cells carry .nwc-truncate in the markup rather than a descendant rule here — the
   ellipsis shape is a global utility and every cell needs it under table-layout: fixed. */
.fleet-col-when[b-x1gx52a2vn] { width: 104px; }
.fleet-col-who[b-x1gx52a2vn] { width: 104px; }
.fleet-col-ip[b-x1gx52a2vn] { width: 108px; }
.fleet-col-how[b-x1gx52a2vn] { width: 116px; }
.fleet-col-lag[b-x1gx52a2vn] { width: 80px; }

.fleet-empty-icon[b-x1gx52a2vn] {
    font-size: 1.6rem;
}

/* An address is clickable from every surface on the page, so it reads as a link rather than as a
   button that happens to contain text. */
.fleet-link[b-x1gx52a2vn] {
    padding: 0;
    border: 0;
    background: none;
    color: var(--blue-600);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.fleet-link:hover[b-x1gx52a2vn] {
    color: var(--blue-700);
}

/* ── Inspector ───────────────────────────────────────────────────────── */
/* Scroll mechanics come from .nwc-fill-scroll on the element; only the padding is local. */
.fleet-inspector[b-x1gx52a2vn] {
    padding: 8px 10px 16px;
}

/* ⛔ display:block overrides the global .nwc-callout-danger, which is display:flex and shaped for a
   one-line "<i>icon</i> text" callout. This one carries a heading, a paragraph and a list, and under
   flex every <strong> and bare text node became its own column — the sentence rendered as six narrow
   stacks. Measured in Chrome at 1536x695. */
.fleet-callout[b-x1gx52a2vn] {
    display: block;
    margin: 6px 0 10px;
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.35;
    border-radius: 6px;
}

.fleet-overlap[b-x1gx52a2vn] {
    margin: 6px 0 0;
    padding-left: 18px;
    font-size: 0.74rem;
}

/* Grid mechanics come from global .nwc-kv (site.css) — LAYOUT-PATTERNS.md Pattern 2.
   Only this instance's deltas are local. */
.fleet-kv[b-x1gx52a2vn] {
    grid-template-columns: 96px 1fr;
    gap: 2px 10px;
    margin-bottom: 10px;
    font-size: 0.78rem;
}

.fleet-kv dt[b-x1gx52a2vn] {
    font-weight: 600;
    color: var(--gray-600);
}

.fleet-kv dd[b-x1gx52a2vn] {
    margin: 0;
    word-break: break-word;
}

.fleet-section-head[b-x1gx52a2vn] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 12px 0 4px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--gray-200);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--gray-700);
}

.fleet-section-note[b-x1gx52a2vn] {
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--gray-500);
}

.fleet-claims[b-x1gx52a2vn] {
    margin: 0 0 6px;
    padding: 0;
    list-style: none;
}

.fleet-claims li[b-x1gx52a2vn] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 8px;
    padding: 3px 2px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.78rem;
}

.fleet-claim-meta[b-x1gx52a2vn] {
    font-size: 0.7rem;
    color: var(--gray-600);
    white-space: nowrap;
}

.fleet-footnote[b-x1gx52a2vn] {
    margin-top: 14px;
    padding-top: 8px;
    border-top: 1px solid var(--gray-200);
    font-size: 0.72rem;
    line-height: 1.4;
    color: var(--gray-600);
}
/* /Pages/Admin/SchemaGraph.razor.rz.scp.css */
/* Layout lives in site.css's shared .nwc-embed-host (Pattern 1 viewport-lock).
   Only the tool's own page colour is page-specific. */
.schema-graph-host[b-o9m6vysljx] {
    background: #0d0d0d;
}
/* /Pages/Admin/Shipping/CaseGoodsBolPanel.razor.rz.scp.css */
/* ── Layout shell ──────────────────────────────────────────────────────── */

.bol-modal-body[b-8ed990iyb1] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 7.5rem); /* header + footer */
    overflow: hidden;
    padding: 0;
}

.bol-shell[b-8ed990iyb1] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.bol-form-pane[b-8ed990iyb1] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
}

.bol-form-body[b-8ed990iyb1] {
    padding: var(--space-lg) var(--space-xl);
    max-width: 1200px;
}

/* ── Collapsible run drawer ─────────────────────────────────────────────── */

.bol-run-drawer[b-8ed990iyb1] {
    flex-shrink: 0;
    border-right: 1px solid var(--gray-300);
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width 220ms ease;
}

.bol-run-drawer.open[b-8ed990iyb1] {
    width: 22rem;
}

.bol-run-drawer.collapsed[b-8ed990iyb1] {
    width: 2.25rem;
}

/* Collapsed strip — the toggle button fills the entire drawer */
.bol-drawer-toggle[b-8ed990iyb1] {
    width: 2.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--gray-600);
    font-size: 0.875rem;
    transition: color 120ms, background 120ms;
}

.bol-drawer-toggle:hover[b-8ed990iyb1] {
    color: var(--blue-500);
    background: var(--gray-200);
}

.bol-drawer-toggle-label[b-8ed990iyb1] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.6875rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: inherit;
}

/* Expanded drawer content */
.bol-drawer-content[b-8ed990iyb1] {
    display: flex;
    flex-direction: column;
    width: 22rem;
    height: 100%;
    min-height: 0;
}

.bol-drawer-header[b-8ed990iyb1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.625rem 0.875rem;
    background: var(--white);
    border-bottom: 1px solid var(--gray-300);
    flex-shrink: 0;
}

.bol-drawer-header h6[b-8ed990iyb1] {
    flex: 1;
    margin: 0;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
}

.bol-drawer-filters[b-8ed990iyb1] {
    padding: var(--space-md) 0.875rem;
    background: var(--white);
    border-bottom: 1px solid var(--gray-300);
    flex-shrink: 0;
}

.bol-drawer-list[b-8ed990iyb1] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm);
}

/* ── Run cards ─────────────────────────────────────────────────────────── */

.bol-run-card[b-8ed990iyb1] {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 0.625rem var(--space-md);
    margin-bottom: var(--space-sm);
    font-size: 0.8125rem;
    transition: border-color 150ms;
}

.bol-run-card.linked[b-8ed990iyb1] {
    border-color: var(--green-600);
    background: var(--bol-linked-bg);
}

.bol-run-card-head[b-8ed990iyb1] {
    margin-bottom: var(--space-xs);
}

.bol-run-brand[b-8ed990iyb1] {
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
    line-height: 1.25;
}

.bol-run-client[b-8ed990iyb1] {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-top: 0.1rem;
}

.bol-run-meta[b-8ed990iyb1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-bottom: var(--space-xs);
}

.bol-meta-chip[b-8ed990iyb1] {
    display: inline-block;
    padding: 0.1rem var(--space-xs);
    background: var(--gray-200);
    border-radius: var(--radius-xs);
    font-size: 0.6875rem;
    color: var(--gray-700);
    line-height: 1.4;
}

.bol-meta-chip.mono[b-8ed990iyb1] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    background: var(--bol-chip-mono-bg);
    letter-spacing: var(--letter-spacing-wide);
}

.bol-run-card-foot[b-8ed990iyb1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: var(--space-xs);
}

/* ── Inventory bar ─────────────────────────────────────────────────────── */

.bol-inv-bar[b-8ed990iyb1] {
    height: 6px;
    background: var(--gray-200);
    border-radius: var(--radius-xs);
    display: flex;
    overflow: hidden;
    margin-bottom: var(--space-2xs);
}

.bol-inv-seg[b-8ed990iyb1] {
    height: 100%;
    min-width: 0;
    transition: width 300ms ease;
}

.bol-inv-seg.avail[b-8ed990iyb1] { background: var(--green-600); }
.bol-inv-seg.res[b-8ed990iyb1]   { background: var(--yellow-500); }
.bol-inv-seg.ship[b-8ed990iyb1]  { background: var(--gray-600); }

.bol-inv-legend[b-8ed990iyb1] {
    display: flex;
    gap: var(--space-sm);
    font-size: 0.6875rem;
    color: var(--gray-700);
    margin-bottom: var(--space-2xs);
}

.bol-inv-legend .muted[b-8ed990iyb1] {
    color: var(--bol-muted-fg);
}

/* ── Form cards ────────────────────────────────────────────────────────── */

.bol-card[b-8ed990iyb1] {
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    overflow: hidden;
}

.bol-card-header[b-8ed990iyb1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.5625rem var(--space-lg);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-300);
}

.bol-card-header h6[b-8ed990iyb1] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-800);
}

.bol-card-header > i[b-8ed990iyb1] {
    color: var(--gray-600);
    font-size: var(--font-size-base);
}

.bol-card-body[b-8ed990iyb1] {
    padding: var(--space-lg);
}

/* ── Party cards ───────────────────────────────────────────────────────── */

.bol-party-card[b-8ed990iyb1] {
    margin-top: var(--space-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 0.625rem var(--space-md);
    background: var(--gray-50);
    font-size: 0.8125rem;
}

.bol-party-name[b-8ed990iyb1] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-xs);
}

.bol-party-name strong[b-8ed990iyb1] {
    font-size: 0.875rem;
    color: var(--gray-900);
}

.bol-party-address[b-8ed990iyb1] {
    color: var(--gray-700);
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: var(--space-xs);
}

.bol-party-meta[b-8ed990iyb1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
}

.bol-party-skeleton[b-8ed990iyb1] {
    padding: var(--space-3xs) 0;
}

.bol-skel-line[b-8ed990iyb1] {
    height: 0.75rem;
    border-radius: var(--radius-xs);
    margin-bottom: var(--space-xs);
    background: linear-gradient(90deg, var(--gray-200) 25%, var(--bol-skel-highlight) 50%, var(--gray-200) 75%);
    background-size: 200% 100%;
    animation: bolSkel-b-8ed990iyb1 1.4s ease infinite;
}

.bol-skel-line.short[b-8ed990iyb1] {
    width: 55%;
}

@keyframes bolSkel-b-8ed990iyb1 {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ── PER auto-fill ─────────────────────────────────────────────────────── */

.bol-input-with-tag[b-8ed990iyb1] {
    position: relative;
}

.bol-autofill-tag[b-8ed990iyb1] {
    position: absolute;
    right: 0.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.625rem;
    padding: 0.1rem 0.35rem;
    background: var(--bol-tint-bg);
    color: var(--blue-500);
    border-radius: var(--radius-xs);
    pointer-events: none;
    white-space: nowrap;
    line-height: 1.5;
}

/* ── Bond parent indicator ─────────────────────────────────────────────── */

.bol-bond-parent[b-8ed990iyb1] {
    font-size: var(--font-size-sm);
    color: var(--bol-bond-parent-fg);
    margin-top: var(--space-xs);
    padding: var(--space-2xs) var(--space-sm);
    background: var(--bol-bond-parent-bg);
    border-left: 2px solid var(--yellow-500);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

/* ── Run badge in line table ───────────────────────────────────────────── */

.bol-run-badge[b-8ed990iyb1] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6875rem;
    padding: 0.15rem 0.4rem;
    background: var(--bol-tint-bg);
    color: var(--bol-link-fg);
    border-radius: var(--radius-xs);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* ── Context banner (DailyFlow entry path) ─────────────────────────────── */

.bol-run-ctx[b-8ed990iyb1] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: var(--bol-ctx-bg);
    border-bottom: 1px solid var(--bol-ctx-border);
    padding: var(--space-sm) var(--space-xl);
    font-size: 0.8125rem;
    flex-wrap: wrap;
}

.bol-rc-identity[b-8ed990iyb1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-weight-medium);
    color: var(--bol-ctx-identity-fg);
}

.bol-rc-spec[b-8ed990iyb1] {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
}

.bol-rc-stats[b-8ed990iyb1] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.bol-rc-stat[b-8ed990iyb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.25;
}

.bol-rc-label[b-8ed990iyb1] {
    font-size: 0.625rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

.bol-rc-sep[b-8ed990iyb1] {
    color: var(--gray-400);
    font-size: 0.875rem;
}

.bol-rc-over strong[b-8ed990iyb1] {
    color: var(--red-500);
}

.bol-run-brand-row[b-8ed990iyb1] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}

.bol-run-date[b-8ed990iyb1] {
    font-size: .75rem;
    color: var(--bs-secondary, var(--gray-600));
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.bol-run-profile[b-8ed990iyb1] {
    font-size: .7rem;
    color: var(--bs-secondary, var(--gray-600));
    margin-top: .15rem;
}

.bol-run-bottled[b-8ed990iyb1] {
    font-size: .8rem;
    margin: .25rem 0;
}

.bol-run-bottled-est[b-8ed990iyb1] {
    color: var(--bs-secondary, var(--gray-600));
    font-style: italic;
}
/* /Pages/Blending/BlendDetailContent.razor.rz.scp.css */
.blend-detail-page[b-h7k6419ckp] {
    padding: var(--space-md);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.blend-detail-header[b-h7k6419ckp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.blend-detail-content[b-h7k6419ckp] {
    flex: 1;
    min-height: 0;
}
/* /Pages/Blending/Components/BlendAllocationTable.razor.rz.scp.css */
[b-919ou7a28a] .editable-value {
    cursor: pointer;
    border-bottom: 1px dashed var(--nwc-border, var(--gray-300));
    padding: 0 2px;
}

[b-919ou7a28a] .editable-value:hover {
    background: var(--nwc-bg-hover, var(--gray-50));
    border-bottom-color: var(--bs-primary, var(--blue-500));
}
/* /Pages/Blending/Components/BlendComponentsTable.razor.rz.scp.css */
[b-hziom306t6] .editable-value {
    cursor: pointer;
    border-bottom: 1px dashed var(--nwc-border, var(--gray-300));
    padding: 0 2px;
}

[b-hziom306t6] .editable-value:hover {
    background: var(--nwc-bg-hover, var(--gray-50));
    border-bottom-color: var(--bs-primary, var(--blue-500));
}
/* /Pages/Blending/Components/BlendCompositionSummary.razor.rz.scp.css */
.composition-bar-track[b-raglwezdc1] {
    position: relative;
    display: flex;
    height: 8px;
    background: var(--nwc-bg-hover, var(--gray-200));
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.composition-bar-fill[b-raglwezdc1] {
    height: 100%;
    transition: width var(--transition-slow);
}

.bar-primary[b-raglwezdc1] { background: var(--indigo-500); }
.bar-secondary[b-raglwezdc1] { background: var(--blend-bar-secondary); }
.bar-tertiary[b-raglwezdc1] { background: var(--blend-bar-tertiary); }
.bar-quaternary[b-raglwezdc1] { background: var(--blend-bar-quaternary); }
.bar-muted[b-raglwezdc1] { background: var(--blend-bar-muted); }

.threshold-marker[b-raglwezdc1] {
    position: absolute;
    top: -2px;
    width: 2px;
    height: 12px;
    background: var(--bs-body-color);
    opacity: 0.5;
    border-radius: 1px;
    pointer-events: none;
}

.composition-dot[b-raglwezdc1] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 2px;
    vertical-align: middle;
}

.composition-dot.bar-primary[b-raglwezdc1] { background: var(--indigo-500); }
.composition-dot.bar-secondary[b-raglwezdc1] { background: var(--blend-bar-secondary); }
.composition-dot.bar-tertiary[b-raglwezdc1] { background: var(--blend-bar-tertiary); }
.composition-dot.bar-quaternary[b-raglwezdc1] { background: var(--blend-bar-quaternary); }
.composition-dot.bar-muted[b-raglwezdc1] { background: var(--blend-bar-muted); }
/* /Pages/Blending/Components/BlendFlowPreview.razor.rz.scp.css */
.blend-flow-preview[b-zqjflguogd] {
    margin: 12px 0 16px 0;
    padding: 12px 14px;
    background: var(--nwc-bg-hover, var(--gray-50));
    border: 1px solid var(--nwc-border, var(--gray-200));
    border-radius: var(--radius-md);
}

.blend-flow-preview-header[b-zqjflguogd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.blend-flow-preview-header h6[b-zqjflguogd] {
    color: var(--accent-burgundy);
    font-weight: var(--font-weight-semibold);
    font-size: 11pt;
}

.blend-flow-preview-svg[b-zqjflguogd] {
    text-align: center;
    overflow-x: auto;
}

.blend-flow-preview-svg[b-zqjflguogd]  svg {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.blend-flow-preview-loading[b-zqjflguogd] {
    padding: 12px 14px;
    background: var(--nwc-bg-hover, var(--gray-50));
    border: 1px dashed var(--nwc-border, var(--gray-200));
    border-radius: var(--radius-md);
    margin: 12px 0 16px 0;
}
/* /Pages/Blending/Components/LotExplorerPanel.razor.rz.scp.css */
/* ─── Search ─── */
.lot-search[b-chmqlhwlq0] {
    padding: 0.4rem var(--space-sm);
    border-bottom: 1px solid var(--ws-divider);
    flex-shrink: 0;
}

.lot-search-input[b-chmqlhwlq0] {
    width: 100%;
    padding: 0.3rem var(--space-sm);
    font-size: 0.78rem;
    border: 1px solid var(--ws-border);
    border-radius: var(--radius-sm);
    background: var(--surface-default);
    color: var(--ws-text-strong);
    outline: none;
    transition: border-color var(--transition-default);
}

.lot-search-input:focus[b-chmqlhwlq0] {
    border-color: var(--app-shell-blue-bright);
    box-shadow: var(--ws-focus-shadow);
}

/* ─── Filters ─── */
.lot-filters[b-chmqlhwlq0] {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem var(--space-sm);
    border-bottom: 1px solid var(--ws-divider);
    background: var(--ws-panel-header-bg);
    flex-shrink: 0;
}

.lot-filter-select[b-chmqlhwlq0] {
    flex: 1;
    padding: 0.2rem 0.3rem;
    font-size: 0.72rem;
    border: 1px solid var(--ws-border);
    border-radius: var(--radius-sm);
    background: var(--surface-default);
    color: var(--ws-text-strong);
    cursor: pointer;
    min-width: 0;
}

/* ─── Loading / Empty ─── */
.lot-loading[b-chmqlhwlq0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: var(--space-xl);
}

.lot-empty[b-chmqlhwlq0] {
    padding: var(--space-xl);
    text-align: center;
}

/* ─── Groups ─── */
.lot-groups[b-chmqlhwlq0] {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ws-border) transparent;
}

.lot-groups[b-chmqlhwlq0]::-webkit-scrollbar { width: 5px; }
.lot-groups[b-chmqlhwlq0]::-webkit-scrollbar-track { background: transparent; }
.lot-groups[b-chmqlhwlq0]::-webkit-scrollbar-thumb { background: var(--ws-border); border-radius: var(--radius-xs); }

.lot-group[b-chmqlhwlq0] {
    border-bottom: 1px solid var(--ws-divider);
}

.lot-group-header[b-chmqlhwlq0] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.4rem var(--space-sm);
    border: none;
    background: var(--ws-surface-hover);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
    font-size: 0.78rem;
}

.lot-group-header:hover[b-chmqlhwlq0] {
    background: var(--ws-surface-hover-strong);
}

.lot-group-chevron[b-chmqlhwlq0] {
    font-size: 0.6rem;
    color: var(--ws-text-muted);
    flex-shrink: 0;
    width: 12px;
}

.lot-group-name[b-chmqlhwlq0] {
    font-weight: var(--font-weight-semibold);
    color: var(--ws-text-strongest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.lot-group-count[b-chmqlhwlq0] {
    color: var(--ws-text-muted);
    font-size: var(--font-size-xs);
    flex-shrink: 0;
}

.lot-group-volume[b-chmqlhwlq0] {
    margin-left: auto;
    color: var(--ws-text-secondary);
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Lot Rows ─── */
.lot-group-body[b-chmqlhwlq0] {
    background: var(--surface-default);
}

.lot-row[b-chmqlhwlq0] {
    padding: 0.3rem var(--space-sm) 0.3rem 1.3rem;
    cursor: pointer;
    border-bottom: 1px solid var(--ws-divider-subtle);
    transition: background var(--transition-fast);
}

.lot-row:hover[b-chmqlhwlq0] {
    background: var(--ws-panel-header-bg);
}

.lot-row.expanded[b-chmqlhwlq0] {
    background: var(--ws-row-expanded-bg);
}

.lot-row-main[b-chmqlhwlq0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-sm);
}

.lot-code[b-chmqlhwlq0] {
    font-weight: var(--font-weight-medium);
    color: var(--ws-text-strongest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.lot-volume[b-chmqlhwlq0] {
    color: var(--ws-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 0.72rem;
}

.badge-stage[b-chmqlhwlq0] {
    font-size: 0.62rem;
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-stage.aging[b-chmqlhwlq0] { background: var(--amber-100); color: var(--amber-800); }
.badge-stage.fermenting[b-chmqlhwlq0] { background: var(--ws-badge-fermenting-bg); color: var(--ws-badge-fermenting-fg); }
.badge-stage.ml[b-chmqlhwlq0] { background: var(--ws-badge-ml-bg); color: var(--ws-badge-ml-fg); }
.badge-stage.settling[b-chmqlhwlq0] { background: var(--ws-badge-settling-bg); color: var(--ws-badge-settling-fg); }
.badge-stage.cold-soak[b-chmqlhwlq0] { background: var(--ws-badge-coldsoak-bg); color: var(--ws-badge-coldsoak-fg); }
.badge-stage.pre-release[b-chmqlhwlq0] { background: var(--ws-badge-prerelease-bg); color: var(--ws-badge-prerelease-fg); }
.badge-stage.received[b-chmqlhwlq0] { background: var(--ws-badge-received-bg); color: var(--ws-badge-received-fg); }
.badge-stage.default[b-chmqlhwlq0] { background: var(--ws-badge-default-bg); color: var(--ws-badge-default-fg); }

/* ─── Lot Detail (expanded) ─── */
.lot-row-detail[b-chmqlhwlq0] {
    padding: 0.3rem 0 0.15rem 0;
    font-size: var(--font-size-xs);
    color: var(--ws-text-secondary);
    line-height: 1.5;
}

.detail-label[b-chmqlhwlq0] {
    color: var(--ws-icon-muted);
    font-weight: var(--font-weight-medium);
}

/* ─── Composition Section ─── */
.lot-composition-section[b-chmqlhwlq0] {
    margin-top: 0.2rem;
    padding-top: 0.2rem;
    border-top: 1px dashed var(--ws-divider);
}

.btn-show-composition[b-chmqlhwlq0] {
    background: none;
    border: 1px solid var(--ws-border);
    border-radius: var(--radius-xs);
    padding: 0.15rem 0.4rem;
    font-size: var(--font-size-2xs);
    color: var(--ws-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.btn-show-composition:hover[b-chmqlhwlq0],
.btn-copy-vessel:hover[b-chmqlhwlq0] {
    background: var(--ws-row-expanded-bg);
    border-color: var(--app-shell-blue-bright);
    color: var(--app-shell-blue-bright);
}

.lot-row-actions[b-chmqlhwlq0] {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed var(--ws-divider);
    display: flex;
    justify-content: flex-end;
}

.btn-select-lot[b-chmqlhwlq0] {
    background: var(--blue-500);
    border: 1px solid var(--blue-500);
    border-radius: var(--radius-xs);
    padding: 0.2rem var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--white);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

.btn-select-lot:hover[b-chmqlhwlq0] {
    background: var(--ws-select-hover-bg);
    border-color: var(--ws-select-hover-border);
}

/* Client-filter pill (top of panel) */
.lot-client-filter[b-chmqlhwlq0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.6rem;
    background: var(--ws-warn-tint-bg);
    border-bottom: 1px solid var(--ws-warn-tint-border);
    font-size: var(--font-size-xs);
    color: var(--accent-burgundy);
    gap: 0.4rem;
}

.lot-client-filter-text[b-chmqlhwlq0] { flex: 1; }

.lot-client-filter-toggle[b-chmqlhwlq0] {
    background: transparent;
    border: 1px solid var(--ws-warn-tint-border-strong);
    border-radius: var(--radius-xs);
    padding: 0.1rem 0.4rem;
    font-size: 0.68rem;
    color: var(--accent-burgundy);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}

.lot-client-filter-toggle:hover[b-chmqlhwlq0] {
    background: var(--surface-default);
    border-color: var(--accent-burgundy);
}

/* Vessel breakdown block (per expanded lot) */
.lot-vessel-section[b-chmqlhwlq0] {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--ws-divider);
}

.lot-vessel-header[b-chmqlhwlq0] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin-bottom: 0.2rem;
}

.lot-vessel-row[b-chmqlhwlq0] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    font-size: var(--font-size-xs);
}

.lot-vessel-summary[b-chmqlhwlq0] {
    flex: 1;
    color: var(--ws-text-body);
}

.lot-vessel-tm[b-chmqlhwlq0] {
    color: var(--accent-burgundy);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-2xs);
    background: var(--ws-burgundy-tint-bg);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-xs);
}

.btn-copy-vessel[b-chmqlhwlq0] {
    background: transparent;
    border: 1px solid var(--ws-border);
    border-radius: var(--radius-xs);
    padding: 0.1rem 0.35rem;
    font-size: var(--font-size-2xs);
    color: var(--ws-text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: all 100ms;
}

.composition-loading[b-chmqlhwlq0] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--font-size-2xs);
    color: var(--ws-text-muted);
}

/* ─── Lot inject button (send lot code to Copilot input) ─── */
.btn-inject-lot[b-chmqlhwlq0] {
    display: none;
    background: none;
    border: none;
    padding: 0 2px;
    color: var(--blue-500);
    cursor: pointer;
    font-size: var(--font-size-xs);
    line-height: 1;
    opacity: 0.55;
    transition: opacity var(--transition-default);
    flex-shrink: 0;
}

.lot-row:hover .btn-inject-lot[b-chmqlhwlq0],
.lot-row.expanded .btn-inject-lot[b-chmqlhwlq0] {
    display: inline-flex;
    align-items: center;
}

.btn-inject-lot:hover[b-chmqlhwlq0] {
    opacity: 1;
}

/* "Copied!" flash state — visible to the user right where they clicked.
   Stays displayed (overrides the row-hover gate) for the 1.6s flash window. */
.btn-inject-lot.copied[b-chmqlhwlq0] {
    display: inline-flex !important;
    align-items: center;
    color: var(--green-500);
    opacity: 1;
    animation: btn-inject-pulse-b-chmqlhwlq0 0.3s ease-out;
}

@keyframes btn-inject-pulse-b-chmqlhwlq0 {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
/* /Pages/Booking/AddBookingPanel.razor.rz.scp.css */
/* Inline tag next to the panel title — replaces the old rotated SealofApproval
   stamp, which forced extra vertical clearance and pushed everything below it
   down. Same tokens/shape as Bottling's DailyFlow organic-stamp (BottlingRunHeaderComponent.razor.css). */
.organic-stamp[b-jlha5pfi8z] {
  display: inline-block;
  border: 2px solid var(--dailyflow-organic-fg);
  border-radius: var(--radius-xs);
  color: var(--dailyflow-organic-fg);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  padding: 0.1rem 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--dailyflow-organic-bg);
  margin-left: var(--space-sm);
  vertical-align: middle;
}

/* Everything else is .nwc-statstrip (site.css) — this only adds the rule the strip needs as a
   section divider rather than as a stat row: a hairline under it and the block's own bottom gap.
   The three former .booking-summary* rules are gone with the markup swap. */
.booking-summary[b-jlha5pfi8z] {
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--nwc-border);
  margin-bottom: var(--space-sm);
}

.booking-parent-picker[b-jlha5pfi8z] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-sm);
}

/* Sized, not stretched: `flex: 1 1 260px` let the select eat every pixel the buttons didn't,
   so on a wide panel one dropdown spanned most of the header. It holds a projection description
   — long, but bounded — so it gets a generous fixed basis and may shrink, never grow. */
.booking-parent-picker label[b-jlha5pfi8z] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  flex: 0 1 34rem;
  min-width: 0;
  max-width: 100%;
}

/* Micro-caps, matching every other eyebrow in this panel — it was the one bold sentence-case
   label left, which made a routine picker read as the panel's headline. */
.booking-parent-picker label > strong[b-jlha5pfi8z] {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--nwc-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* Tentative toggle — a compact inline check, NOT the projection picker's column label
   (the bare `label` rule above would hand it a 34rem column basis). */
.booking-parent-picker label.booking-tentative-toggle[b-jlha5pfi8z] {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--state-warning-fg);
  cursor: pointer;
  white-space: nowrap;
}

/* Flex items default to a content-based min-width, so a <select> with long option
   text (e.g. full projection descriptions) can force the row — and the panel —
   wider than the viewport. min-width: 0 lets it shrink to the label's width instead. */
.booking-parent-picker select[b-jlha5pfi8z] {
  width: 100%;
  min-width: 0;
  text-overflow: ellipsis;
}

.booking-parent-picker__hint[b-jlha5pfi8z] {
  font-size: 0.85rem;
  color: var(--bs-danger);
}

.booking-parent-picker__explainer[b-jlha5pfi8z] {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.8rem;
  color: var(--nwc-text-muted);
}

/* No max-height / overflow here on purpose. It used to be `max-height: 65vh; overflow-y: auto`,
   which made the load list a SECOND scroll box nested inside .sliding-panel-body's — two
   scrollbars fighting over the same wheel, and at 65vh the list showed barely more than one
   expanded load row while the panel around it had room to spare. The panel body is the single
   scroll region for the form now; the footer stays reachable because .lookup-split-footer
   (LookupSplitPanel.razor.css) is sticky. */
.booking-load-list[b-jlha5pfi8z] {
  margin-bottom: var(--space-sm);
}

/* Block and Grower are the ONLY place these two are authored now (they came off the load row
   2026-08-08), and they are two cells rather than one as of 2026-08-19 — see the .razor for why.
   The block is read-only and short, so it must not wrap: "BH_14C1" broken across two lines reads
   as two block codes. */
.booking-summary__block .nwc-statstrip-value[b-jlha5pfi8z] {
  white-space: nowrap;
}

/* Only the grower still edits, so only the grower needs room: while the picker is open the cell is
   allowed to grow past its siblings' auto sizing — a 90px grower picker is not a picker.
   ⚠ The pencil stays INLINE with the value (site.css .nwc-row-2xs), not on its own row. This
   strip's whole point is one dense line, and an affordance costing a row would undo the reason
   labels were kept off the self-describing cells to begin with. */
.booking-summary__grower[b-jlha5pfi8z] {
  flex: 1 1 auto;
  min-width: 0;
}

/* Quiet until wanted: this is a correction affordance on a value that is right almost every time
   (measured — the block is identical across every load on all 45 multi-load bookings in prod), so
   it must not read as a call to action sitting next to the client's name. */
.booking-summary__edit[b-jlha5pfi8z] {
  flex: 0 0 auto;
  border: none;
  background: none;
  padding: 0 var(--space-3xs);
  line-height: 1;
  color: var(--nwc-text-muted);
  cursor: pointer;
}

.booking-summary__edit:hover[b-jlha5pfi8z] {
  color: var(--nwc-text, inherit);
}

/* site.css's .nwc-statstrip-label is nowrap + ellipsis, which is right for a wide dashboard tile
   and wrong for a cell in a 7-up strip: "Fruit Intake Id" clipped to "FRUIT INT…" is no more
   legible than the bare number was. Jeff's call 2026-08-08 — "they can wrap and thats okay" — so
   these two labels get two lines instead of a stub. Only the strip inside THIS panel is affected;
   the global rule is untouched. */
.booking-summary .nwc-statstrip-label[b-jlha5pfi8z] {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* The rule/padding above this row belongs to .lookup-split-footer's sticky bar now — a second
   border here would double it. */
.booking-footer[b-jlha5pfi8z] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

/* Three zones, one rule (comma-joined, not duplicated — the drift audit counts copies).
   Destructive-only far left, utility actions in the middle, tons + Cancel/Submit far right.
   space-between splits its free space into N-1 EQUAL gaps regardless of item width, so an empty
   zone (Delete All on a brand-new, never-saved booking; Send Email before any load is saved)
   collapses to 0 width and the remaining zones still land symmetrically. */
.booking-footer__left[b-jlha5pfi8z],
.booking-footer__mid[b-jlha5pfi8z],
.booking-footer__right[b-jlha5pfi8z] {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Delete All — ghost/text danger button. .btn-link already supplies "no border, no fill"; this
   only tokenizes the color (instead of inheriting the site-wide link blue from `a, .btn-link` in
   site.css) so it stays correct in dark mode — --state-danger-fg is explicitly re-pointed in the
   dark tokens block, unlike Bootstrap's own --bs-danger. Both states written explicitly:
   bootstrap.min.css's .btn-link:hover sets a hardcoded blue at the SAME specificity as a plain
   scoped class, so only covering :hover here guarantees this wins regardless of bundle order. */
.booking-footer__delete[b-jlha5pfi8z],
.booking-footer__delete:hover[b-jlha5pfi8z] {
  color: var(--state-danger-fg);
}

/* Bumps the tons figure above .nwc-chip's metadata-pill baseline (0.65rem font / 1px vertical
   padding) so it reads as a KPI to confirm before Submit, not a status tag. Shape/color/dark mode
   still come from .nwc-chip--info — this only touches size/weight/padding/digit rendering. */
.booking-footer__tons[b-jlha5pfi8z] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-2xs) var(--space-sm);
  font-variant-numeric: tabular-nums;
}

.booking-cancel-confirm[b-jlha5pfi8z] {
  padding: var(--space-lg);
}

.booking-cancel-confirm__actions[b-jlha5pfi8z] {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

textarea[b-jlha5pfi8z], input[type="text"][b-jlha5pfi8z] {
  text-transform: uppercase;
}

/* The pumpover-contract toggle. Sits under the load list because it is a decision ABOUT the loads,
   not a field on any one of them. Quiet by default — it is on almost every time. */
.booking-contract-toggle[b-jlha5pfi8z] {
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
}

.booking-contract-toggle__hint[b-jlha5pfi8z] {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--space-3xs);
  /* The label above is bold; the explanation must not compete with it. */
  max-width: 68ch;
}

.booking-contract-toggle__warn[b-jlha5pfi8z] {
  margin-top: var(--space-xs);
  font-size: var(--font-size-sm);
}

/* ⛔ The uppercase rule above is global to this component and would shout the hint's inline text if
   it ever became an input — pinned here so a future edit doesn't wonder why this is spelled out. */
.booking-contract-toggle .form-check-label[b-jlha5pfi8z] {
  text-transform: none;
}

/* /Pages/Booking/addDrainAndPress.razor.rz.scp.css */
.invalid[b-jtmur55r0o] { border-color: var(--red-500) !important; box-shadow: 0 0 0 0.1rem var(--booking-invalid-glow); }
.error-text[b-jtmur55r0o] { color: var(--red-500); font-size: 0.8rem; margin-top: 2px; }

/* Field layout is LAYOUT-PATTERNS Pattern 16 (.nwc-form-grid-4 + <FormField>, site.css) —
   this file only owns the panel's own padding and the footer chrome. The press-leg card
   structure lives in PressLegsEditor.razor.css since the C1 extraction (booking×press
   convergence 2026-08-03): scoped CSS cannot cross the component boundary, so rules for the
   extracted markup would be dead weight here. Only .invalid/.error-text are deliberately
   present in both files — the host's own date/winery/varietal/tons validation still uses them. */
.adp-container[b-jtmur55r0o] { padding: 8px 4px; }

/* checkboxes & footer. The row renders inside LookupSplitPanel's sticky .lookup-split-footer,
   which supplies its own padding and top border — hence no margin-top here. Scoped CSS follows
   where markup is AUTHORED, not where it lands, so these rules still reach it from this file. */
.footer-row[b-jtmur55r0o] { display: flex; justify-content: space-between; align-items: center; }
.check-group[b-jtmur55r0o] { display: inline-flex; gap: 16px; align-items: center; }
.check[b-jtmur55r0o] { display: inline-flex; align-items: center; gap: 6px; }
.actions[b-jtmur55r0o] { display: inline-flex; gap: 8px; }
.actions.right[b-jtmur55r0o] { margin-left: auto; }

/* Promote-from-pumpover banner. Informational, not an error: it reports what was filled and
   what was intentionally left blank, so it uses the neutral info token rather than the red
   .error-text above. */
.adp-promoted[b-jtmur55r0o] {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 8px; padding: 6px 10px;
  border: 1px solid var(--nwc-border); border-left: 3px solid var(--blue-500);
  border-radius: var(--radius-sm); background: var(--surface-muted);
  font-size: 0.85rem;
}
/* /Pages/Booking/bookingCalendar.razor.rz.scp.css */
/* ==========================================================================
   BookingCalendar — fruit booking calendar (Harvest Manager "Booking Calendar"
   tab + the standalone /booking/bookingCalendar route).

   The grid engine is the shared <MonthCalendar> (Shared/MonthCalendar.razor);
   this file owns the sticky toolbar + day-of-week band, the day-cell interior
   (intake chips + a Red/White/Rosé/to-press tons mini-summary), and the weekly
   Red/White/Rosé/Total/To-press summary panel. Mirrors the
   BottlingSchedule.razor.css convention so the two calendars (both built on
   MonthCalendar) share a visual language.
   ========================================================================== */

.bc-toolbar[b-e94ah9kf81] {
    padding-top: var(--space-sm);
    background: var(--surface-default);
}

.bc-nav[b-e94ah9kf81] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding-bottom: var(--space-sm);
}

.bc-title[b-e94ah9kf81] {
    margin: 0 0 0 var(--space-sm);
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
}

.bc-vintage-select[b-e94ah9kf81] {
    width: auto;
    margin-left: auto;
}

.bc-new-booking-btn[b-e94ah9kf81] {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Day-of-week header band — mirrors <MonthCalendar>'s 7-track + summary grid
   (always ShowWeekends here: fruit intake happens any day of the week) so
   "Mon".."Sun" + "Weekly totals" line up with the body columns below.
   -------------------------------------------------------------------------- */
.bc-weekdays[b-e94ah9kf81] {
    display: grid;
    grid-template-columns: repeat(7, 2fr) var(--mc-summary-col);
    gap: var(--space-sm);
    padding: 2px;
    text-align: center;
}

.bc-weekday[b-e94ah9kf81] {
    font-weight: var(--font-weight-bold);
    color: var(--gray-700);
    padding: var(--space-2xs) 0;
}

.bc-summary-head[b-e94ah9kf81] {
    font-size: 0.85em;
}

.bc-body[b-e94ah9kf81] {
    max-height: 76vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* --------------------------------------------------------------------------
   Day cell interior
   -------------------------------------------------------------------------- */
.bc-cell[b-e94ah9kf81] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 160px;
}

.bc-day-head[b-e94ah9kf81] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2xs) var(--space-xs);
}

.bc-day-num[b-e94ah9kf81] {
    font-weight: var(--font-weight-bold);
    font-size: 1.1em;
}

.bc-add-btn[b-e94ah9kf81] {
    display: flex;
    align-items: center;
    gap: 3px;
    opacity: 0;
    padding: 2px 8px;
    font-size: 0.72em;
    font-weight: var(--font-weight-bold);
    color: var(--bs-primary);
    background: var(--nwc-bg-muted);
    border: 1px solid var(--nwc-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: opacity 0.15s ease-in, background-color 0.15s ease, color 0.15s ease;
}

.bc-add-btn:hover[b-e94ah9kf81] {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.bc-cell:hover .bc-add-btn[b-e94ah9kf81] {
    opacity: 1;
}

.bc-chip-list[b-e94ah9kf81] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 var(--space-2xs);
    flex: 1 1 auto;
    overflow-y: auto;
}

.bc-chip[b-e94ah9kf81] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    text-align: left;
    background: var(--chip-bg);
    color: var(--chip-fg);
    border: none;
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    font-size: 0.78em;
    font-weight: var(--font-weight-bold);
    line-height: 1.25;
    white-space: pre-line;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}

.bc-chip:hover[b-e94ah9kf81] {
    filter: brightness(0.95);
}

.bc-chip-sync[b-e94ah9kf81] {
    flex: 0 0 auto;
    font-size: 0.9em;
}

.bc-chip-sorters[b-e94ah9kf81],
.bc-chip-tentative-ico[b-e94ah9kf81] {
    flex: 0 0 auto;
    font-size: 0.9em;
}

/* Tentative booking chip (roadmap 2026-08-11 §1.3) — the varietal's --chip-bg/--chip-fg stay,
   so the chip is still recognizable; the dash + fade carry "provisional". Pairs with the "?"
   prefix in the chip text, which survives even where the dash is too subtle. */
.bc-chip--tentative[b-e94ah9kf81] {
    border: 2px dashed var(--state-warning-fg);
    opacity: 0.65;
}

.bc-chip-text[b-e94ah9kf81] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icon-only day-head buttons for the extras (announcement / sorters) — same look and
   hover-reveal as .bc-add-btn, but deliberately a SEPARATE class: the ui-smoke suite
   selects on .bc-add-btn and must keep matching exactly one element per cell. */
.bc-icon-btn[b-e94ah9kf81] {
    display: flex;
    align-items: center;
    opacity: 0;
    padding: 2px 6px;
    font-size: 0.72em;
    font-weight: var(--font-weight-bold);
    color: var(--bs-primary);
    background: var(--nwc-bg-muted);
    border: 1px solid var(--nwc-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: opacity 0.15s ease-in, background-color 0.15s ease, color 0.15s ease;
}

.bc-icon-btn:hover[b-e94ah9kf81] {
    background: var(--bs-primary);
    color: #fff;
    border-color: var(--bs-primary);
}

.bc-cell:hover .bc-icon-btn[b-e94ah9kf81] {
    opacity: 1;
}

/* Floor iPads have no hover — an opacity:0 affordance would be unreachable there, so
   coarse/no-hover pointers get the buttons always-on (Add button included). */
@media (hover: none) {
    .bc-add-btn[b-e94ah9kf81],
    .bc-icon-btn[b-e94ah9kf81] {
        opacity: 1;
    }
}

/* ── Day extras: sorters row + announcement strip, pinned under the chip list (the chip
   list's flex:1 pushes them to the cell bottom; on a booking-free day they simply flow
   under the head). Same "loud notice" role as Booking Main's .bm-announcement, sized for
   a calendar square. ── */
.bc-sorters[b-e94ah9kf81] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3xs);
    padding: 0 var(--space-2xs);
    margin-top: var(--space-3xs);
    font-size: var(--font-size-2xs);
    color: var(--state-info-fg);
}

.bc-sorter-item[b-e94ah9kf81] {
    border: 1px solid var(--state-info-fg);
    border-radius: var(--radius-pill);
    background: var(--state-info-bg);
    color: var(--state-info-fg);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
}

.bc-sorter-attached[b-e94ah9kf81] {
    font-weight: var(--font-weight-semibold);
}

.bc-announce[b-e94ah9kf81] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3xs);
    width: calc(100% - 2 * var(--space-2xs));
    margin: var(--space-3xs) var(--space-2xs) 0;
    padding: 2px var(--space-3xs);
    border: 1px solid var(--state-info-fg);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--state-info-bg);
    color: var(--state-info-fg);
    font-size: var(--font-size-2xs);
    text-align: left;
    cursor: pointer;
}

.bc-announce > span[b-e94ah9kf81] {
    overflow-wrap: anywhere;
}

/* This row grew from 2 figures (R/W) to as many as 4 (R/W/Rosé/to-press) inside
   a narrow calendar square. `justify-content: space-between` was fine for a
   pair but scatters 4 items edge-to-edge with no grouping, so the figures read
   as unrelated; and a single flex line squeezes them into a ragged overflow at
   narrow widths. Pack them left with an explicit column gap and let the row
   WRAP to a second line instead — the day cell is a flex column whose chip list
   absorbs the height (`flex: 1 1 auto`), so wrapping costs nothing structural.
   The .razor suppresses the Rosé and to-press spans at zero, so ordinary
   all-red/white days still render exactly two figures on one line. */
.bc-day-tons[b-e94ah9kf81] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: var(--space-sm);
    row-gap: 2px;
    padding: var(--space-2xs) var(--space-xs);
    font-size: 0.72em;
    font-weight: var(--font-weight-bold);
    color: var(--gray-600);
}

/* Same pink token projectedMain.razor.css already chose for rosé
   (.color-dot-rose), so the two harvest surfaces agree on the colour. */
.bc-tons-rose[b-e94ah9kf81] {
    color: var(--pink-500);
}

/* To-press is a DERIVED total that overlaps the colour figures rather than
   extending them — de-emphasised so it doesn't read as a fourth colour. */
.bc-tons-press[b-e94ah9kf81] {
    font-weight: var(--font-weight-normal);
    color: var(--gray-700);
}

/* --------------------------------------------------------------------------
   Weekly summary panel (Red / White / Rosé / Total / To press tons)
   -------------------------------------------------------------------------- */
.bc-summary-panel[b-e94ah9kf81] {
    padding: var(--space-sm);
    font-size: 0.85em;
}

.bc-summary-panel table[b-e94ah9kf81] {
    width: 100%;
    border-collapse: collapse;
}

.bc-summary-label[b-e94ah9kf81] {
    text-align: left;
    font-weight: var(--font-weight-bold);
    padding-right: 8px;
}

.bc-summary-value[b-e94ah9kf81] {
    text-align: right;
}

.bc-summary-rose[b-e94ah9kf81] {
    color: var(--pink-500);
}

/* Rule above Total: the three colour rows roll UP into it (a load whose colour
   is neither Red/White/Rose and whose style was never set reaches Total without
   a colour row, so they need not sum exactly); the To-press row below is a
   different axis entirely — it overlaps all three. The line is what says so. */
.bc-summary-rule td[b-e94ah9kf81] {
    border-top: 1px solid var(--nwc-border);
    padding-top: 2px;
}
/* /Pages/Booking/BookingLoadRow.razor.rz.scp.css */
/* Density: a load row carries three bands of chrome (header rule, field grid, footer rule) before
   a single field, so `lg` padding + `md` gaps cost ~60px of pure air per load — with 3+ loads that
   was most of what the panel showed. `md`/`sm` keeps the card reading as a card without the row
   count driving the scroll length. */
.booking-load-row[b-kpobzd7yga] {
  border: 1px solid var(--nwc-border);
  border-radius: var(--radius-lg);
  background: var(--nwc-bg-muted);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-sm);
}

.booking-load-row__header[b-kpobzd7yga] {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-2xs);
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid var(--nwc-border);
}

.booking-load-row__toggle[b-kpobzd7yga] {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: var(--space-3xs);
  color: var(--nwc-text-muted);
  cursor: pointer;
}

.booking-load-row__index[b-kpobzd7yga] {
  font-weight: 600;
  margin-right: auto;
}

.booking-load-row__header-actions[b-kpobzd7yga] {
  display: flex;
  gap: var(--space-sm);
}

/* Two field-grid sections replace the old auto-fit .booking-load-row__grid, which was provably
   degenerate once every child spanned it fully anyway. Spacing only — .nwc-form-grid/-4 already
   collapse to 1 column at 640px in site.css. */
.booking-load-row__section[b-kpobzd7yga] {
  margin-top: var(--space-sm);
}
.booking-load-row__section:first-child[b-kpobzd7yga] {
  margin-top: 0;
}

/* Shared small-caps voice — Section 1/2 titles (paired with .booking-load-row__section-title
   below), the legacy-fields sub-header, and each lot-group's "Tank Allocations" label. One rule,
   four call sites, on purpose: near-identical rules cost against the drift-audit floor whether
   they're in the same file or different files. */
.booking-load-row__subhead[b-kpobzd7yga] {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--nwc-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* Layered onto .booking-load-row__subhead for the two top-level section headers only — adds the
   hairline + spacing an inline sub-label doesn't need. */
.booking-load-row__section-title[b-kpobzd7yga] {
  padding-bottom: var(--space-3xs);
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid var(--nwc-border);
}

.nwc-form-field textarea[b-kpobzd7yga] {
  min-height: 3rem;
  resize: vertical;
}

/* Auto-grow: collapse to one row when empty, grow with content. Browsers without
   field-sizing keep the flat 4rem above — that IS the graceful-degradation path. */
@supports (field-sizing: content) {
  .nwc-form-field textarea[b-kpobzd7yga] {
    field-sizing: content;
    min-height: 2rem;
    max-height: 14rem;
  }
}


/* D5 removed .booking-load-row__process--structured and .booking-load-row__process-hint with
   the booking-level Process textarea they annotated (the D7 grey-but-never-hidden treatment).
   Nothing renders them any more — they came out rather than sitting here reading authoritative. */

/* D5 read-only legacy reference block. Visually SUBORDINATE on purpose — this is a reference
   sidecar, not a second form, inside a layout users just said they like. No border, no input
   chrome, nothing that reads as typeable (D2) — but `user-select: text` so a few words can be
   copied out into the per-tank boxes (D3). Do not restyle this as a disabled input: browsers
   block text selection on `disabled`, which would break the one thing it exists for. */
.booking-load-row__legacy-ref-body[b-kpobzd7yga] {
  font-size: 0.85rem;
  color: var(--nwc-text-muted);
  border-left: 3px solid var(--nwc-border);
  padding: var(--space-2xs) var(--space-xs);
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3xs) var(--space-xs);
  user-select: text;
}

.booking-load-row__legacy-ref-body dt[b-kpobzd7yga] {
  font-weight: 600;
  white-space: nowrap;
}

.booking-load-row__legacy-ref-body dd[b-kpobzd7yga] {
  margin: 0;
  white-space: pre-wrap;
}

/* Gate-OFF legacy band — the same dashed-top band shape as the press + pairing bands, which
   moved with their markup into BookingStyleSection.razor.css (step-1 style-shell extraction,
   2026-08-09). This band did not move, so its copy of the shape stays here. */
.booking-load-row__legacy-fields[b-kpobzd7yga] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px dashed var(--nwc-border);
}


.booking-load-row__footer[b-kpobzd7yga] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--nwc-border);
}

.booking-load-row__organic[b-kpobzd7yga] {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-weight: 600;
  margin: 0;
}

.booking-load-row__debug[b-kpobzd7yga] {
  font-size: 0.75rem;
  color: var(--nwc-text-muted);
}

.booking-load-row__template-note-body[b-kpobzd7yga] {
  font-size: 0.85rem;
  color: var(--nwc-text-muted);
  border-left: 3px solid var(--nwc-border);
  padding: var(--space-2xs) var(--space-xs);
  white-space: pre-wrap;
}
/* /Pages/Booking/BookingLookupDrawer.razor.rz.scp.css */
/* Tabs run down the LEFT as a vertical folder rail, not across the top.
   Six tabs never fit across a ~300px aside; the previous horizontal strip
   scrolled instead of wrapping, which hid its own last tab (Vessels) behind
   a scroll with no affordance. Stacking them removes the overflow entirely —
   all six are always visible — and the aside was widened 30%->40% to pay for
   the rail's width (site.css, Pattern 17 block).

   Shared shapes used here (.nwc-chip, .nwc-statstrip, .nwc-meter, .nwc-mark)
   deliberately live in site.css, NOT in this file —
   they are cross-component utilities and the pre-push drift gate counts
   duplicated bodies across .razor.css files. Keep this file to layout that is
   genuinely specific to the drawer. */
.booking-lookup[b-90h5913os2] {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  min-width: 0;
}

/* Pinned to the aside's own scrollport (the aside is overflow-y:auto, site.css
   Pattern 17 block) — same treatment .booking-lookup__toolbar already gets below.
   Without this the rail is a normal-flow child of a scrolling box and slides away
   with the tab body, which defeats the point of a rail that's always visible.
   align-self:flex-start is load-bearing: the default `stretch` makes the rail as
   tall as the row, leaving sticky zero travel and rendering it inert. */
/* ⚠ The rail needs its OWN scrollport (Jeff, 2026-08-17: "there are now so many that i need to
   scroll but it wont let me scroll"). It had no max-height and no overflow, so once it grew
   taller than the aside's clip (`.nwc-sidebar-split--cq > .nwc-sidebar-split-aside
   { max-height: 78vh; overflow-y: auto }`, site.css) sticky held its top at offset 0 and the
   last tabs sat permanently past the clip edge — unreachable, because scrolling the body slid
   the rail down in lockstep. Bounding the rail and giving it its own scroller fixes it wherever
   the binding clip turns out to be. Precedent: `.nwc-ribbon-tabs` (site.css) solved the
   identical overflow for the 10-tab ribbon.
   ⛔ Do NOT "fix" this by deleting `position: sticky` or `align-self: flex-start` — the comment
   above explains why both are load-bearing, and the rail goes inert without them.
   ⛔ Keep the scrollbar VISIBLE: this file's own header records that the previous horizontal
   strip hid its last tab with no affordance at all, which is how this shipped unnoticed. */
.booking-lookup__tabs[b-90h5913os2] {
  position: sticky;
  top: 0;
  align-self: flex-start;
  flex: 0 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 2.4rem;
  gap: 2px;
  padding-top: var(--space-2xs);
  max-height: calc(78vh - var(--space-sm) * 2);
  overflow-y: auto;
  scrollbar-width: thin;
}

/* Icon on top, label rotated 90° below it — same technique as ManagerShell's
   .ms-pane-collapsed-label (writing-mode: vertical-rl + rotate(180deg), so the text
   reads top-to-bottom instead of upside-down). Supersedes the 2026-07-19 horizontal
   "icon | label" layout: that traded width for a one-line label, but six tabs still
   cost 7.25rem off a ~300px aside. Rotating the label buys that width back for the
   vineyard/block results, which is where it matters more than a horizontal label. */
.booking-lookup__tabs .nav-link[b-90h5913os2] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3xs);
  width: 100%;
  padding: var(--space-xs) var(--space-3xs);
  font-size: 0.8rem;
  color: var(--text-secondary);
  border: 1px solid transparent;
  border-right: none;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.booking-lookup__tabs .nav-link:hover:not(.active)[b-90h5913os2] {
  background: var(--surface-muted);
}

.booking-lookup__tab-icon[b-90h5913os2] {
  font-size: 0.9rem;
  opacity: 0.75;
}

.booking-lookup__tab-label[b-90h5913os2] {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  min-width: 0;
  font-size: 0.68rem;
  letter-spacing: var(--letter-spacing-wide);
  white-space: nowrap;
}

/* The folder join: the active tab carries the surface colour across the rail's
   divider (-1px) so it reads as one continuous sheet with the body beside it. */
.booking-lookup__tabs .nav-link.active[b-90h5913os2] {
  background: var(--surface-default);
  border-color: var(--border-default);
  border-right: none;
  color: var(--text-primary);
  font-weight: 600;
  margin-right: -1px;
}

.booking-lookup__tabs .nav-link.active .booking-lookup__tab-icon[b-90h5913os2] {
  opacity: 1;
  color: var(--accent-primary);
}

/* The rail/body divider lives HERE, not on the rail: the rail is sticky +
   flex-start (see above), so a border on it would stop at the last tab. On the
   body it spans the full scroll height, and the active tab's margin-right:-1px
   still overlaps it to make the folder join. */
.booking-lookup__body[b-90h5913os2] {
  flex: 1 1 auto;
  min-width: 0;
  border-left: 1px solid var(--border-default);
  padding-left: var(--space-sm);
  font-size: 0.85rem;
}

/* The aside is the scroll container (Pattern 17 makes it sticky with a max-height),
   so the search row pins to the top of the results rather than scrolling away. */
.booking-lookup__toolbar[b-90h5913os2] {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-bottom: var(--space-sm);
  background: var(--surface-default);
}

/* The toolbar is a column flex, so a child would otherwise stretch to full width — this is a
   toggle, not a primary action, and reading as a full-width bar would oversell it. */
.booking-lookup__scope[b-90h5913os2] {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
}

.booking-lookup__resultline[b-90h5913os2] {
  display: flex;
  gap: var(--space-2xs);
  margin-bottom: var(--space-2xs);
  color: var(--text-muted);
  font-size: var(--font-size-2xs);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
}

/* Truncation is the one thing in this drawer a winemaker must not miss — a block
   that exists but fell past the cap otherwise reads as a block that doesn't exist. */
.booking-lookup__truncated[b-90h5913os2] {
  color: var(--state-warning-fg);
  font-weight: var(--font-weight-semibold);
}

.booking-lookup__list[b-90h5913os2] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.booking-lookup__item[b-90h5913os2] {
  padding: var(--space-xs);
  border: 1px solid var(--nwc-border);
  border-radius: var(--radius-sm);
  background: var(--nwc-surface);
  min-width: 0;
}

.booking-lookup__item:hover[b-90h5913os2] {
  border-color: var(--border-strong);
}

/* Title left, the row's one key number hard-right — so tons/acres/capacity form a
   scannable column instead of hiding at the end of a sentence. */
.booking-lookup__item-head[b-90h5913os2] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
  min-width: 0;
}

.booking-lookup__item-title[b-90h5913os2] {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.booking-lookup__item-metric[b-90h5913os2] {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.booking-lookup__expander[b-90h5913os2] {
  cursor: pointer;
}

.booking-lookup__chevron[b-90h5913os2] {
  font-size: 0.7rem;
  color: var(--text-muted);
}

/* Nested block tree under an expanded vineyard — indented off the chevron line,
   one flex row per block so the acreage still forms a right-hand column. */
.booking-lookup__sublist[b-90h5913os2] {
  list-style: none;
  margin: var(--space-2xs) 0 0;
  padding: 0 0 0 var(--space-md);
  border-left: 2px solid var(--border-default);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
}

.booking-lookup__subitem[b-90h5913os2] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
  min-width: 0;
  font-size: 0.8rem;
}

/* A projection inside a client card: stacks its detail line + chips ABOVE its own nested booking
   list, so the two-level tree (projection → booking) reads vertically instead of collapsing onto
   the single baseline flex row .booking-lookup__subitem uses for leaf blocks. */
.booking-lookup__projrow[b-90h5913os2] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
  font-size: 0.8rem;
}

/* "No bookings scheduled yet" sits under a projection — nudge it in so it reads as belonging to
   that projection, not to the client card. */
.booking-lookup__nobookings[b-90h5913os2] {
  padding-left: var(--space-md);
  font-style: italic;
}

/* The pick affordance, only rendered when a host wired OnBlockPicked. Sizing comes from
   the shared .nwc-btn-xs utility (site.css) — this only pins it out of the baseline flow.
   align-self:center because the row is align-items:baseline, which would otherwise sit the
   button's text baseline on the block name's and hang the border below the row.
   Deliberately NOT hover-revealed: a button that appears on hover changes the row's width
   mid-approach, which is the exact shift this button was added to eliminate. */
.booking-lookup__use[b-90h5913os2] {
  flex: 0 0 auto;
  align-self: center;
  white-space: nowrap;
}

/* Booking rows become whole-row edit targets only when the host wired
   OnBookingEditRequested — the class is absent otherwise, so the reference-only
   usage (AddBookingPanel) keeps plain, non-interactive rows. Negative-margin +
   matching padding widens the hover surface without shifting the row's content,
   honoring the same no-shift rule as .booking-lookup__use. */
.booking-lookup__subitem--edit[b-90h5913os2] {
  cursor: pointer;
  border-radius: var(--radius-sm);
  margin: calc(-1 * var(--space-3xs)) calc(-1 * var(--space-2xs));
  padding: var(--space-3xs) var(--space-2xs);
}

.booking-lookup__subitem--edit:hover[b-90h5913os2] {
  background: var(--surface-muted);
}

/* Standing pencil affordance on editable rows — muted at rest, legible on hover. */
.booking-lookup__edit-icon[b-90h5913os2] {
  flex: 0 0 auto;
  align-self: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.booking-lookup__subitem--edit:hover .booking-lookup__edit-icon[b-90h5913os2] {
  color: var(--text-primary);
}

.booking-lookup__subitem-name[b-90h5913os2] {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  min-width: 0;
  overflow-wrap: anywhere;
}

.booking-lookup__date[b-90h5913os2] {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.booking-lookup__kind[b-90h5913os2] {
  color: var(--text-muted);
}

.booking-lookup__chips[b-90h5913os2] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  margin-top: var(--space-3xs);
  min-width: 0;
}

/* Phone/email chips in the Clients tab are real tel:/mailto: links — tap targets on the tablets
   this drawer is consulted from. Only the anchor defaults need neutralising; the chip shape itself
   is .nwc-chip in site.css and must not be restated here (pre-push drift gate). */
.booking-lookup__contact[b-90h5913os2],
.booking-lookup__contact:hover[b-90h5913os2] {
  color: inherit;
  text-decoration: none;
}

.booking-lookup__item-meta[b-90h5913os2] {
  margin-top: var(--space-3xs);
  color: var(--nwc-text-muted);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.booking-lookup__meter[b-90h5913os2] {
  margin: var(--space-3xs) 0;
}

.booking-lookup__searchrow[b-90h5913os2],
.booking-lookup__daterange[b-90h5913os2] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

.booking-lookup__searchrow input[b-90h5913os2],
.booking-lookup__daterange input[b-90h5913os2] {
  flex: 1 1 6rem;
  min-width: 0;
}

.booking-lookup__daterange-sep[b-90h5913os2] {
  color: var(--text-muted);
}

.booking-lookup__drift[b-90h5913os2] {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--nwc-border);
}

.booking-lookup__drift-summary[b-90h5913os2] {
  margin: var(--space-2xs) 0;
}

/* State-survival pane: kept mounted across tab switches and hidden via [hidden].
   The guard rule exists because an author `display` on this class would beat the
   UA's [hidden] rule by origin and render the pane on every tab. */
.booking-lookup__newlot[hidden][b-90h5913os2] {
  display: none;
}

.booking-lookup__newtank[hidden][b-90h5913os2] {
  display: none;
}

.booking-lookup__error[b-90h5913os2] {
  color: var(--nwc-danger, #b02a37);
  padding: var(--space-sm);
}

.booking-lookup__hint[b-90h5913os2] {
  color: var(--nwc-text-muted);
  font-size: var(--font-size-2xs);
}

/* .nwc-empty's default 2.4rem glyph is sized for a full page, not a ~300px aside. */
.booking-lookup__empty[b-90h5913os2] {
  padding: var(--space-lg) var(--space-sm);
  gap: var(--space-2xs);
  text-align: center;
}

.booking-lookup__empty i[b-90h5913os2] {
  font-size: 1.5rem;
  opacity: 0.5;
}
/* /Pages/Booking/BookingMain.razor.rz.scp.css */
@* .card itself moved to Components/BookingDayCard.razor.css (§6.1 decomposition) — these blocks
   keep only the rules for markup authored in THIS file (toolbar, card titles, Drain & Press
   cells, .cards/.noShow), which still apply here because they're only ever rendered inside
   RenderFragments authored in THIS file (see BookingDayCard.razor's header comment for why
   CSS-isolation scope follows the authoring file, not the rendering one).

   2026-07-23 uniform pass: inline style="" swept into the classes below; flat semantic tokens
   only — no bespoke colors/gradients (the purple --booking-parent-gradient wash was retired in
   favor of the plain page surface). *@
@media print[b-qe85ma4rbz] {
  .cards {
    display: flex;
    flex-wrap: nowrap;
  }

    .no-print[b-qe85ma4rbz], .no-print *[b-qe85ma4rbz] {
        display: none !important;
    }

    body[b-qe85ma4rbz] {
        margin: 5mm 5mm 5mm 5mm;
    }

    .noShow[b-qe85ma4rbz] {
        display: contents
    }
}

@media screen and (min-width: 1200px) {
  .cards[b-qe85ma4rbz] {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

    .noShow[b-qe85ma4rbz] {
        display: none;
    }
}

@media screen and (min-width: 1400px) {
  .cards[b-qe85ma4rbz] {
    display: flex;
    flex-wrap: nowrap;
  }

    .noShow[b-qe85ma4rbz] {
        display: none;
    }
}

/* Phone day-cards (decision #2, docs/CC_Scope_HarvestManagerMobile_2026-07-21.md §8) — swipe/
   scroll-snap through the SAME 3-card window desktop uses (viewCount stays 3; no C# change),
   one card filling most of the screen at a time. Prev/Next (ChangeDay, unchanged) still works —
   it re-renders a fresh 3-card window, which starts scrolled to its first card by default, so
   tapping Next visually "jumps" one day forward with no JS interop needed. .card's own sizing
   for this band lives in BookingDayCard.razor.css (scroll-snap-align needs to be on the card
   itself, which now has a different CSS-isolation scope than this file — see that file's header
   comment). */
@media screen and (max-width: 768px) {
    .cards[b-qe85ma4rbz] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
}

.parentContainer[b-qe85ma4rbz] {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-2xs);
    background: var(--surface-subtle);
}

.container-fluid[b-qe85ma4rbz] {
    margin: var(--space-2xs);
    padding: var(--space-2xs);
    align-items: center;
    overflow-y: auto;
    overflow-x: hidden;
}

.cards[b-qe85ma4rbz] {
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    overflow-x: auto;
}

.noShow[b-qe85ma4rbz] {
    display: contents
}

/* ── Page toolbar (Home / Prev / [date] / Next) ── */
.bm-toolbar[b-qe85ma4rbz] {
    padding: var(--space-2xs) var(--space-sm);
}

.bm-toolbar-group[b-qe85ma4rbz] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    justify-content: flex-start;
}

.bm-toolbar-group--end[b-qe85ma4rbz] {
    justify-content: flex-end;
}
/* No --center twin: the toolbar's center slot uses the shared .nwc-center utility from
   site.css (LAYOUT-PATTERNS: shared nwc-* utilities before bespoke scoped css). */

.bm-toolbar-btn[b-qe85ma4rbz] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    white-space: nowrap;
}

/* .bm-page-date removed 2026-07-30 — the page-level date header it styled rendered TodaysDate,
   which never moved with Prev/Next. Each day card still carries its own (correct) date title
   via .bm-card-title below. */

/* ── Day-card titles + header add button ── */
.bm-card-title[b-qe85ma4rbz] {
    margin: 0;
    text-align: center;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
}

.bm-add-btn[b-qe85ma4rbz] {
    line-height: 1;
}

/* ── Drain & Press cells — one --row-color per row (set in the markup), mirroring
   BookingLoadTable's .lt-fs pattern. ── */
.bm-dp-cell[b-qe85ma4rbz] {
    margin: 0;
}

.bm-dp-cell--tint[b-qe85ma4rbz] {
    white-space: pre-line;
    color: var(--row-color, inherit);
}

/* ── Daily facility announcement strip (bottom deck) — deliberately louder than a schedule
   row so a notice can't be misread as a booking (roadmap 2026-08-11: "visually clear this is
   an announcement"). Whole strip is the edit affordance; authored in BookingMain.razor so the
   rules live here per the authoring-scope note at the top of this file. ── */
.bm-announcement[b-qe85ma4rbz] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    width: 100%;
    margin-top: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--state-info-fg);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--state-info-bg);
    color: var(--state-info-fg);
    font-size: var(--font-size-sm);
    text-align: left;
    cursor: pointer;
}

.bm-announcement:hover[b-qe85ma4rbz] {
    filter: brightness(0.97);
}

.bm-announcement > i[b-qe85ma4rbz] {
    flex: 0 0 auto;
}

.bm-announcement > span[b-qe85ma4rbz] {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Pages/Booking/Components/BookingDayCard.razor.rz.scp.css */
/* Moved verbatim from BookingMain.razor.css (§6.1 decomposition) — these rules style the
   <article class="card">/header-grid shell that now lives in BookingDayCard.razor. Blazor CSS
   isolation scopes by which .razor file the markup is physically written in, so they had to move
   here or the shell would silently lose its styling once extracted. See the file header comment
   in BookingDayCard.razor for which rules stayed in BookingMain.razor.css instead (RenderFragment
   content keeps the AUTHORING component's scope, not the rendering one).

   2026-07-23 uniform pass: flat semantic-token shell (surface/border/radius/shadow) replaced the
   per-breakpoint `border: 1px solid black` + offset grey drop-shadow. No overflow:hidden on the
   card — the header hosts HarvestPrintMenu's dropdown, which must escape the card bounds. */
.card[b-5l80a9u6ak] {
    background: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card-header-row[b-5l80a9u6ak] {
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
    border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
}

@media print {
    .card[b-5l80a9u6ak] {
        flex: 0 1 calc(33% - .25em);
        border: 1px solid black;
    }
}

@media screen and (min-width: 1200px) {
    .card[b-5l80a9u6ak] {
        flex: 0 1 calc(50% - .25em);
    }
}

@media screen and (min-width: 1400px) {
    .card[b-5l80a9u6ak] {
        flex: 0 1 calc(33% - .25em);
    }
}

/* Phone day-cards — pairs with BookingMain.razor.css's matching (max-width:768px) block on
   .cards. 92vw (not 100%) leaves a sliver of the next/prev card visible at the edge, the
   standard "there's more, keep swiping" affordance for a scroll-snap carousel. */
@media screen and (max-width: 768px) {
    .card[b-5l80a9u6ak] {
        flex: 0 0 92vw;
        scroll-snap-align: start;
    }
}

.currentDay[b-5l80a9u6ak] {
    box-shadow: var(--booking-currentday-glow);
}

/* The header row (.nwc-row-3col) is a global site.css utility — the old grid-row-for-button/
   grid-row-for-text pair collapsed into it (see BookingDayCard.razor's header comment). */
/* /Pages/Booking/Components/BookingLoadTable.razor.rz.scp.css */
/* Moved from BookingMain.razor.css (§6.1 decomposition). The table shell rules (table/th,td/
   tr:nth-child) were hoisted to site.css as .nwc-table-compact — shared with BookingMain's
   still-inline Drain & Press table — rather than duplicated per CSS-isolation scope.
   .enableScroll and .organic-stamp moved outright: both were only ever used by this table. */
.enableScroll[b-vuk0srkqhw] {
    overflow-x: auto;
}

.lt-time-col[b-vuk0srkqhw] {
    width: 50px;
}

/* Replaces the original's repeated inline style="@FontStyle(harvest.Varietals)" (margin:0 +
   varietal color) — --row-color is set once per row by BookingLoadTable.razor's RowStyle(). */
.lt-fs[b-vuk0srkqhw] {
    margin: 0;
    color: var(--row-color, inherit);
}

.lt-plain[b-vuk0srkqhw] {
    margin: 0;
}

.lt-upper[b-vuk0srkqhw] {
    text-transform: uppercase;
}

.lt-wrap[b-vuk0srkqhw] {
    white-space: pre-line;
}

/* Inline tag replacing the old rotated SealofApproval stamp — same tokens/shape as Bottling's
   DailyFlow organic-stamp (BottlingRunHeaderComponent.razor.css) and AddBookingPanel's. */
.organic-stamp[b-vuk0srkqhw] {
    display: inline-block;
    border: 2px solid var(--dailyflow-organic-fg);
    border-radius: var(--radius-xs);
    color: var(--dailyflow-organic-fg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    padding: 0.1rem 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--dailyflow-organic-bg);
    margin-left: var(--space-3xs);
    vertical-align: middle;
}

/* Tentative booking (roadmap 2026-08-11 §1.3) — the row treatment carries the at-a-glance
   "provisional" signal (dashed + muted), the stamp carries the word. Deliberately a different
   shape from .organic-stamp (dashed, warning tokens, no fill) so the two can't be confused. */
tr.lt-row--tentative[b-vuk0srkqhw] {
    outline: 2px dashed var(--state-warning-fg);
    outline-offset: -2px;
}

tr.lt-row--tentative > td[b-vuk0srkqhw] {
    opacity: 0.7;
}

.tentative-stamp[b-vuk0srkqhw] {
    display: inline-block;
    border: 2px dashed var(--state-warning-fg);
    border-radius: var(--radius-xs);
    color: var(--state-warning-fg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    padding: 0.1rem 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: var(--space-3xs);
    vertical-align: middle;
}

/* Booking-attached contracted sorters count (HarvestFruitIntake.SorterCount) — sits in the
   otherwise-empty spacer column so the badge never crowds the time cell. */
.sorter-badge[b-vuk0srkqhw] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--state-info-fg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

/* Trailing actions cell -- only present when the host passes RowActions (HarvestToday's grower
   sheet button). Shrink-to-fit so the data columns keep the width they had before this existed;
   no-print because an action button is a screen affordance and this table is printed. */
.lt-actions-col[b-vuk0srkqhw] {
    width: 1%;
    white-space: nowrap;
    text-align: center;
}

@media print {
    .lt-actions-col[b-vuk0srkqhw] {
        display: none;
    }
}

/* Plan-vs-actual pair -- only present when the host passes Received (HarvestToday). Same opt-in
   rule as .lt-actions-col above: every other booking surface renders the original eight columns and
   never sees these rules at all. */
.lt-batch[b-vuk0srkqhw] {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.lt-received[b-vuk0srkqhw] {
    white-space: nowrap;
}

/* Full-size, matching the Booked cell beside it. These are the two numbers the screen exists to
   compare, so neither may be rendered as the other's annotation — the actual used to sit two
   steps down the type scale from the estimate, which is what made a 2 t booking that weighed
   1.46 t read as "2 tons". */
.lt-received-tons[b-vuk0srkqhw] {
    display: block;
    font-size: var(--font-size-base);
    font-variant-numeric: tabular-nums;
}

/* Second line: where it went and which ticket says so. Supporting detail, so it keeps the small
   muted treatment — but on its OWN line, so its length no longer sets the column width. */
.lt-received-meta[b-vuk0srkqhw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0 6px;
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    line-height: 1.3;
}

.lt-received-tag[b-vuk0srkqhw] {
    font-variant-numeric: tabular-nums;
}

/* Nothing weighed against this leg yet. Muted on purpose: for most of the day this is the normal
   state of most rows, so it must not read as a problem or compete with what HAS landed. */
.lt-awaiting[b-vuk0srkqhw] {
    font-size: var(--font-size-xs);
    color: var(--gray-400);
    font-style: italic;
}

/* The refusal. Two legs booked on one day cannot be told apart by a weight ticket, so the row names
   the family instead of guessing. Styled as a STATE, not as an error -- nothing is wrong, the
   question is genuinely unanswerable from a ticket. */
.lt-ambiguous[b-vuk0srkqhw] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: var(--font-size-xs);
    color: var(--state-info-fg);
    font-variant-numeric: tabular-nums;
}

.lt-ambiguous-note[b-vuk0srkqhw] {
    color: var(--gray-600);
    font-style: italic;
}

@media print {
    .lt-awaiting[b-vuk0srkqhw],
    .lt-ambiguous-note[b-vuk0srkqhw] {
        color: inherit;
    }
}

/* The expanded detail row. Zero padding on the cell: the panel inside owns its own spacing, and a
   td padding here would inset it out of alignment with the columns it sits under — the alignment is
   the entire reason this is a table row rather than a drawer.
   ⛔ Hidden in print, matching .lt-actions-col. The printed sheet is the plan for the day; an
   assignment editor on paper is an interactive control with nothing to interact with. */
.lt-detail-row > td[b-vuk0srkqhw] {
  padding: 0;
  background: var(--nwc-surface-2, #f7f7f5);
}

@media print {
  .lt-detail-row[b-vuk0srkqhw] { display: none; }
}
/* /Pages/Booking/Components/BookingStyleSection.razor.rz.scp.css */
/* Moved verbatim from BookingLoadRow.razor.css with the step-1 style-shell extraction
   (2026-08-09) — CSS isolation scopes rules to the component that renders the markup, so these
   rules follow the press band + Lots & Tanks markup into BookingStyleSection. Class names are
   unchanged on purpose (smoke-suite hooks + zero visual change). */

/* Press band (booking×press convergence C2, D6) — full-width sibling ABOVE Lots & Tanks (the
   process step precedes the juice landing). It shares the pairing section's band shape via the
   comma-joined selectors below rather than duplicating it. Editor internals (.adp-*) live in
   PressLegsEditor's own scoped css. The gate-OFF legacy-fields band keeps the same shape in
   BookingLoadRow's own css — that band did not move.
   .booking-load-row__press-mode is GONE, not renamed: the four selects moved into
   .nwc-form-field cells in a Pattern 16c row, where the shared `.nwc-form-field > select` rule
   sizes them to the cell. A leftover `flex:` here would have been inert — dead sizing that still
   reads authoritative is the failure mode that sent a prior debug pass down the wrong path. */
.booking-load-row__pairing[b-zvtsfae793],
.booking-load-row__press[b-zvtsfae793] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px dashed var(--nwc-border);
}

/* ::deep because the hint markup moved into the per-style panels (RedStylePanel /
   DrainAndPressPanel, step 2) — child components don't carry this component's isolation
   attribute, and duplicating the rule into two panel css files would feed the drift gate.
   Scoped under .booking-load-row__press (shell-owned), so it can't leak past the band. */
.booking-load-row__press[b-zvtsfae793]  .booking-load-row__press-hint {
  font-size: 0.75rem;
  color: var(--nwc-text-muted);
}

/* Three-way style toggle (Jeff 2026-08-09) — segmented control replacing the press-mode and
   wine-style selects. The active segment is DERIVED (colour × process); a disabled segment is
   one the fruit colour makes impossible. Bespoke per Pattern 11 (unconsolidated pill family). */
.booking-load-row__style-toggle[b-zvtsfae793] {
  display: inline-flex;
  border: 1px solid var(--nwc-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--nwc-bg);
}

.booking-load-row__style-btn[b-zvtsfae793] {
  border: none;
  background: transparent;
  color: var(--nwc-text);
  padding: var(--space-2xs) var(--space-md);
  font-size: 0.9rem;
  cursor: pointer;
}

.booking-load-row__style-btn + .booking-load-row__style-btn[b-zvtsfae793] {
  border-left: 1px solid var(--nwc-border);
}

.booking-load-row__style-btn:hover:not(:disabled):not(.is-active)[b-zvtsfae793] {
  background: var(--nwc-bg-subtle);
}

.booking-load-row__style-btn.is-active[b-zvtsfae793] {
  background: var(--nwc-text);
  color: var(--nwc-bg);
  font-weight: 600;
}

/* Wine-true segment tints (Jeff 2026-08-09): the active segment wears its style's colour —
   red = wine red, white = straw, rosé = pink. Keyed on data-style-id (1/2/3, the same hook the
   smoke suite clicks) so the CSS needs no extra classes. Hover previews a wash of the same hue. */
.booking-load-row__style-btn[data-style-id="1"].is-active[b-zvtsfae793] {
  background: #7c2333;
  color: #fff;
}

.booking-load-row__style-btn[data-style-id="2"].is-active[b-zvtsfae793] {
  background: #f0e6c8;
  color: #5a4a1a;
}

.booking-load-row__style-btn[data-style-id="3"].is-active[b-zvtsfae793] {
  background: #e8a0b4;
  color: #5c1f30;
}

.booking-load-row__style-btn[data-style-id="1"]:hover:not(:disabled):not(.is-active)[b-zvtsfae793] {
  background: rgba(124, 35, 51, 0.12);
}

.booking-load-row__style-btn[data-style-id="2"]:hover:not(:disabled):not(.is-active)[b-zvtsfae793] {
  background: rgba(240, 230, 200, 0.45);
}

.booking-load-row__style-btn[data-style-id="3"]:hover:not(:disabled):not(.is-active)[b-zvtsfae793] {
  background: rgba(232, 160, 180, 0.25);
}

.booking-load-row__style-btn:disabled[b-zvtsfae793] {
  color: var(--nwc-text-light);
  cursor: not-allowed;
}

/* Lot chips: the gate-OFF chip row, and (gate ON) each lot group's chip header. */
.booking-load-row__lots[b-zvtsfae793] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* The lot code is the group's HEADLINE — it names everything indented below it, so the shared
   2xs chip sizing read as a footnote (Jeff 2026-08-04). Larger, roomier, info-tinted. */
.booking-load-row__lots .nwc-chip--code[b-zvtsfae793] {
  font-size: 0.9rem;
  padding: var(--space-3xs) var(--space-sm);
  background: var(--state-info-bg);
  color: var(--state-info-fg);
  border-color: var(--state-info-fg);
}

/* Chip + its identity sub-line stack as one unit, so a multi-chip row wraps per lot. */
.booking-load-row__lot-stack[b-zvtsfae793] {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

/* Variety · AVA under the lot code (Jeff 2026-08-12): the code stripped of its varietal code
   ("NWE26ROS" + a funny suffix) tells the cellar nothing, so the wine's identity rides below in
   plain words. Italic, smaller, muted — and it WRAPS rather than truncates: a cut-off
   "Grenach…" defeats the entire point of the line. */
.booking-load-row__lot-detail[b-zvtsfae793] {
  font-style: italic;
  font-size: var(--font-size-xs);
  line-height: 1.2;
  color: var(--nwc-text-muted);
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 16rem;
}

/* R4/R5 inline allocation warnings — advisory only, never blocking. */
.booking-load-row__allocation-warning[b-zvtsfae793] {
  font-size: 0.75rem;
  color: var(--nwc-warning-text, #8a6d1a);
}

/* Cross-booking shared-tank badge (2026-08-12) — INFO, not a warning: several bookings feeding
   one tank is the sanctioned co-ferment shape (convergence happens at the lot, not the booking).
   Disagreement within the group renders separately through the warning class above; keeping the
   badge info-tinted is what keeps the triangle meaningful. */
.booking-load-row__shared-tank[b-zvtsfae793] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.75rem;
  color: var(--state-info-fg);
}

.booking-load-row__shared-tank-code[b-zvtsfae793] {
  font-weight: var(--font-weight-semibold);
}

/* The two convergence one-clicks ride inside the badge line — keep them line-height sized so the
   badge stays a line of text, not a toolbar. */
.booking-load-row__shared-tank .btn[b-zvtsfae793] {
  font-size: 0.7rem;
  padding: 0 var(--space-2xs);
}

.booking-load-row__pairing-bar[b-zvtsfae793] {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

/* Same micro-caps voice as .booking-load-row__subhead so the bar reads as this band's eyebrow
   rather than as a form label of a different size. */
.booking-load-row__pairing-bar label[b-zvtsfae793] {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--nwc-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin-right: var(--space-2xs);
}

.booking-load-row__pairing-bar select[b-zvtsfae793] {
  flex: 0 1 14rem;
  min-width: 0;
}

/* Gate-OFF free-text Tank input — full row width reads as a notes field, which it is not. */
.booking-load-row__pairing-card > input.form-control[b-zvtsfae793] {
  max-width: 20rem;
}

/* Was a second bordered card nested inside .booking-load-row's card, which inside the panel's
   own card made three concentric boundaries around one list of tanks. The card treatment is gone
   — the band's dashed top rule and the lot group's left rule already say where it starts and what
   belongs to which lot, and two of the three borders were saying it again at different radii.
   Kept as a layout box only (it still owns the column rhythm for its children). */
.booking-load-row__pairing-card[b-zvtsfae793] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Full parent width (Jeff 2026-08-04): the per-tank rows now carry fraction/temp/adds/comments
   chips plus a press band, and the old 34rem cap crushed them into overlapping text. Row
   internals flex, so wide screens spread the fields rather than stretching one input. */
.booking-load-row__allocations[b-zvtsfae793] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);

  /* ⚠ The grid's fallback must answer "how wide is this PANEL", not "how wide is the screen".
     A viewport media query gets that wrong in the one layout that matters: open the lookup
     drawer on a 1500px screen and the form half is ~700px, so a viewport rule says "wide" and
     the 9 columns overflow and clip the Comments field. Registering a named container here makes
     both this file's header and TankAllocationRow's rows measure the real box they live in. */
  container: ta-grid / inline-size;

  /* ── The tank grid's column template ────────────────────────────────────────
     Declared HERE, on the common ancestor, because two separately-scoped components must agree
     on it: this file's .ta-head and TankAllocationRow's .ta-row__cells. A custom property is
     inherited, not selector-matched, so it crosses the CSS-isolation boundary that would stop a
     shared class — and there is exactly one place to retune a column.
     Widths follow the DATA: tank and comments carry the long values and flex; tons/temp are
     3-4 digits and are fixed so the numeric columns stay scannable down the list. The minmax()
     floors stop a long lot code from shoving the numbers out of alignment.

     ⛔⛔ THE FLOORS MUST SUM TO LESS THAN THE 47rem/752px FALLBACK BREAKPOINT — for the WIDEST
     variant (.is-paired, 10 columns), not this one. A grid track never shrinks below its floor,
     so if the floors need more room than the breakpoint allows there is a band of container
     widths where the grid is still in column mode and CANNOT fit: it clips the last columns and
     grows a horizontal scrollbar instead of falling back to the stacked bands. Silent — no
     warning, nothing in the console, and it only shows on the narrow screens nobody develops on.

     That is exactly what shipped before 2026-08-08: paired floors summed to 893px against a
     752px breakpoint, a 141px dead zone. On a ~1280px-wide screen the panel is ~1216px (the
     95vw cap bites, so the 1200px aside step never fires), the grid lands at ~780px — inside the
     zone — and the Comments field was cut in half with the delete button off the edge entirely.
     Jeff reported it from a real booking. Verified arithmetic for the CURRENT numbers, gap =
     --space-2xs = 4px:
       paired  22.4+88+96+72+80+80+56+72+96+30.4 = 692.8 + 9 gaps (36) = 728.8px = 45.55rem  ✓
       plain          same minus the 88px lot col = 604.8 + 8 gaps (32) = 636.8px = 39.80rem  ✓
     ⛔ Widen any floor below and REDO THAT SUM. If it will not fit, the honest move is to drop a
     column, not to raise the breakpoint — raising it just trades a silent clip for the
     unlabelled wrapping pile at the width where people actually work. */
  --ta-cols:
      1.4rem                    /* reorder arrows   22.4 */
      minmax(6rem, 1.4fr)       /* tank picker      96   */
      4.5rem                    /* tons             72   */
      minmax(5rem, 1.3fr)       /* process          80   */
      5rem                      /* fraction         80   */
      3.5rem                    /* temp             56   */
      minmax(4.5rem, 1fr)       /* adds             72   */
      minmax(6rem, 1.6fr)       /* comments         96   */
      1.9rem;                   /* remove           30.4 */
}

/* Multi-lot loads only (~9% of loads): the lot-pairing select appears in the rows, so the
   template gains its column. Set on the same PairableLots condition the rows use.
   ⛔ This is the variant the floor budget above is computed against — it is the widest one, so
   it is the one that decides whether the grid can survive at all. The lot column was a FIXED
   9rem and is now minmax(5.5rem, 1fr): fixed meant it kept all 144px while the flexible columns
   were being crushed, which is backwards — a truncated lot code is readable, a truncated
   Comments field is a lost instruction. */
.booking-load-row__allocations.is-paired[b-zvtsfae793] {
  --ta-cols:
      1.4rem minmax(5.5rem, 1fr) minmax(6rem, 1.4fr) 4.5rem minmax(5rem, 1.3fr)
      5rem 3.5rem minmax(4.5rem, 1fr) minmax(6rem, 1.6fr) 1.9rem;
}

/* Column headers over the tank rows. Same micro-caps voice as every other eyebrow on this card,
   so the grid reads as part of the form rather than as an imported table widget. */
.ta-head[b-zvtsfae793] {
  display: grid;
  grid-template-columns: var(--ta-cols);
  gap: var(--space-2xs);
  padding-bottom: var(--space-3xs);
  border-bottom: 1px solid var(--nwc-border);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--nwc-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* Matches TankAllocationRow's own fallback breakpoint — below it the rows abandon the grid for
   the stacked bands, and a header with nothing under it to align to is worse than none.
   47rem sits just ABOVE the widest template's own minimum (45.55rem — see the floor budget on
   --ta-cols), so the switch happens a hair before the columns would start clipping. ⛔ That
   ordering is the whole point and it was inverted until 2026-08-08. Keep the breakpoint above
   the floor sum; if you must widen a column, take the room from another one. */
@container ta-grid (max-width: 47rem) {
  .ta-head[b-zvtsfae793] { display: none; }
}

/* ── Load bar: what this load routes, above the rows that route it ────────────────────────────
   One line, same micro-caps eyebrow voice as .ta-head and the pairing bar, so it reads as this
   band's summary rather than as an imported widget. Wraps rather than scrolls: inside the lookup
   drawer this box is ~700px and the two footings must be allowed to stack. */
.booking-load-row__load-bar[b-zvtsfae793] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3xs) var(--space-sm);
  font-size: var(--font-size-2xs);
  color: var(--nwc-text-muted);
}

.booking-load-row__load-bar-id[b-zvtsfae793] {
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* COLOUR CARRIES THE LEDGER DISTINCTION HERE — do not unify these states.
   --fruit may turn green (balanced) or amber (short/over): it is exact arithmetic against the
   load tonnage, so it has earned an error state. --tank is muted, ALWAYS, on every value: juice
   into vessels is a different substance from fruit on the truck, so there is nothing for it to be
   wrong about. Giving the tank footing a red/amber state would fire on every pressed white load
   and is the exact noise this design was written to avoid (design §0.2). */
.booking-load-row__footing[b-zvtsfae793] {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-3xs);
  white-space: nowrap;
}

.booking-load-row__footing.is-ok[b-zvtsfae793] {
  color: var(--nwc-success, #146c43);
}

.booking-load-row__footing.is-short[b-zvtsfae793],
.booking-load-row__footing.is-over[b-zvtsfae793] {
  color: var(--nwc-warning-text, #8a6d1a);
}

/* §2.4 microcopy: what the six per-tank columns MEAN, in sentence voice rather than the eyebrow
   voice of .ta-head above it — it is prose, and dressing it as a header would make it compete with
   the column names it explains. Deliberately no border/background: it reads as a note under the
   bar, not as a callout. */
.booking-load-row__cells-caption[b-zvtsfae793] {
  font-size: var(--font-size-2xs);
  color: var(--nwc-text-muted);
  line-height: var(--line-height-normal);
}

/* Lot-as-row: the chip is the group header, its tank rows indent under it as children. */
.booking-load-row__lot-group[b-zvtsfae793] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-left: var(--space-sm);
  border-left: 2px solid var(--nwc-border);
}

.booking-load-row__allocation-actions[b-zvtsfae793] {
  display: flex;
  gap: var(--space-2xs);
}

.booking-load-row__allocation-preview[b-zvtsfae793] {
  font-size: 0.75rem;
  color: var(--nwc-text-muted);
}

/* ── The per-LOT fermentation-contract button (2026-08-17) ─────────────────────────
   MOVED here from BookingLoadRow.razor.css when the button moved into the lot group. Scoped CSS is
   per-component, so these rules HAD to travel with the markup — left behind they would simply have
   stopped applying, silently and with a green build.
   Sits under the lot's tank rows, beside "+ Tank". Deliberately UNBOXED — no card, no border: it is
   one action inside an already-dense group, and every boxed section costs vertical space Jeff has
   asked to reclaim more than once. */
.booking-load-row__contract[b-zvtsfae793] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.booking-load-row__contract-count[b-zvtsfae793] {
  font-weight: 500;
}

.booking-load-row__contract-hint[b-zvtsfae793] {
  font-size: 0.8rem;
  color: var(--nwc-text-muted);
}

/* Takes the whole width so a multi-lot reconcile's messages read as a list, not as text wrapping
   around the button that produced them. */
.booking-load-row__contract-msg[b-zvtsfae793] {
  flex: 1 0 100%;
  font-size: 0.85rem;
  padding: var(--space-2xs) var(--space-xs);
  border-radius: var(--radius-sm);
}

.booking-load-row__contract-msg.is-ok[b-zvtsfae793] {
  color: var(--state-success-fg);
  background: var(--state-success-bg);
}

/* ⛔ Warnings share this state with errors ON PURPOSE — the reconciler's one un-automatable case
   (a worked tank dropped off the load) arrives as a Warning, and styling it as a milder thing than
   an error is how it would get ignored. */
.booking-load-row__contract-msg.is-problem[b-zvtsfae793] {
  color: var(--state-warning-fg);
  background: var(--state-warning-bg);
}

/* The override next to the suppression note. A link, not a button: on a white booking this is the
   majority row and a second solid control there would compete with the real actions above it. */
.booking-load-row__contract-anyway[b-zvtsfae793] {
  padding: 0;
  font-size: 0.8rem;
}
/* /Pages/Booking/NewTankPane.razor.rz.scp.css */
.newtank-pane[b-n1tf2nwey0] {
  padding: var(--space-sm);
}

.newtank-pane__error[b-n1tf2nwey0] {
  color: var(--nwc-danger, #b02a37);
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
}

.newtank-pane__success[b-n1tf2nwey0] {
  color: var(--nwc-success, #146c43);
  padding: var(--space-sm) 0;
  font-size: var(--text-sm);
}

.newtank-pane__innovint-note[b-n1tf2nwey0] {
  color: var(--nwc-text-muted);
  font-size: var(--text-xs);
  margin-top: 2px;
}
/* /Pages/Bottling/AppointmentFormPanel.razor.rz.scp.css */
/* Panel padding (sp-content base has no padding for sidebar panel compat) */
.sp-content[b-omlx4y9zgi] {
    padding: var(--space-lg);
    gap: var(--space-md);
}

/* ── Zone 1: Run Details (scoped additions) ── */
.run-details .form-label[b-omlx4y9zgi] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem;
    color: var(--gray-700);
}

/* ── Zone 2: Date Tabs ── */
.date-tabs[b-omlx4y9zgi] {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    flex-shrink: 0;
}

.date-tabs .nav-link[b-omlx4y9zgi] {
    white-space: nowrap;
    font-size: var(--font-size-md);
    padding: 0.4rem var(--space-md);
}

.date-tabs .add-tab[b-omlx4y9zgi] {
    color: var(--blue-500);
    border: none;
}

.date-tabs .add-tab:hover[b-omlx4y9zgi] {
    color: #0a58ca;
    background-color: var(--gray-200);
}

.date-tab-content[b-omlx4y9zgi] {
    flex: 1;
    position: relative;
    padding: var(--space-lg) var(--space-sm);
    overflow-y: auto;
}

.delete-date-btn[b-omlx4y9zgi] {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    z-index: var(--z-base);
}

/* ── Misc ── */
.stats-text[b-omlx4y9zgi] {
    font-size: 0.8rem;
    color: var(--gray-600);
    margin-top: var(--space-2xs);
}

.snow-indicator[b-omlx4y9zgi] {
    color: #0dcaf0;
    font-size: var(--font-size-xl);
}

.tab-cases[b-omlx4y9zgi] {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    margin-left: var(--space-2xs);
}

.nav-link.active .tab-cases[b-omlx4y9zgi] {
    color: var(--blue-500);
}
/* /Pages/Bottling/BottlingSendEmailBasic.razor.rz.scp.css */
/* Flex container for the items */
.flex-container[b-j0mr4fk7yn] {
    display: flex;
    flex-wrap: wrap;
    max-height:60vh;
    overflow-y:auto;
}

/* Style for each row */
.flex-row[b-j0mr4fk7yn] {
    width: 100%; /* Each row takes the full width of the container */
}

/* Style for each item */
.flex-item[b-j0mr4fk7yn] {
    display: flex;
    align-items: center;
    padding: 5px; /* Add some padding for spacing */
}

.allowScroll[b-j0mr4fk7yn] {
    max-height: 200px;
    overflow-y: auto;
    width: 100%;
}
    /* Style for the labels */
    .flex-item label[b-j0mr4fk7yn],
    .flex-item .placeHolder[b-j0mr4fk7yn] {
        flex-basis: 20%; /* The label takes 30% of the width */
        padding-right: 10px; /* Add some space between label and input */
        text-align: right; /* Align the labels to the right */
    }

    /* Style for the inputs */
    .flex-item input[b-j0mr4fk7yn] {
        flex: 1; /* The input takes the remaining space */
        padding: 5px; /* Add some padding for styling */
        border: 1px solid var(--nwc-border); /* Add a border for visual appeal */
    }
    textarea[b-j0mr4fk7yn]{
        min-height:120px;
    }
.bottomButtons[b-j0mr4fk7yn] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 5px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
}

.icon-button[b-j0mr4fk7yn] {
    border: none;
    background-color: transparent;
    cursor: pointer; /* Change cursor to a pointer on hover */
}

    .icon-button:focus[b-j0mr4fk7yn] {
        outline: none; /* Remove focus outline on click (optional) */
    }
/* /Pages/Bottling/Campaigns/Components/SpecSheetEnrichmentPanel.razor.rz.scp.css */
/* Spec Sheet Enrichment Panel ---------------------------------- */

.sp-header-flex[b-wferab9ss5] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-weight-semibold);
}

/* Status badge in header — varies by Draft/Published/Archived */
.sse-status-badge[b-wferab9ss5] {
    display: inline-block;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    margin-left: var(--space-sm);
}

.sse-status-badge.sse-status-draft[b-wferab9ss5] {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.sse-status-badge.sse-status-published[b-wferab9ss5] {
    background: var(--green-100);
    color: var(--green-700);
}

.sse-status-badge.sse-status-archived[b-wferab9ss5] {
    background: var(--gray-200);
    color: var(--gray-600);
}

/* Wine overview — tighter rows than default sp-info-grid */
.sse-overview[b-wferab9ss5] {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}

.sse-overview .sp-info-label[b-wferab9ss5] {
    min-width: 130px;
}
/* /Pages/Bottling/CellarWork/Components/CellarWorkHeaderSection.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════ */
/* Lot Enrichment Card                                */
/* ═══════════════════════════════════════════════════ */

[b-51734m289b] .lot-enrichment-card {
    margin-top: 0.35rem;
    padding: 0.4rem 0.6rem;
    background: var(--cw-enrichment-bg);
    border: 1px solid var(--cw-enrichment-border);
    border-radius: var(--radius-xs);
    border-left: 3px solid var(--app-shell-blue-bright);
    font-size: 0.82rem;
}

[b-51734m289b] .lot-enrichment-card.loading {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--cw-loading-bg);
    border-color: var(--cw-loading-border);
    border-left-color: var(--cw-loading-accent);
}

[b-51734m289b] .lot-enrichment-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    align-items: center;
}

[b-51734m289b] .lot-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    background: var(--cw-pill-bg);
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--cw-pill-fg);
    white-space: nowrap;
}

[b-51734m289b] .lot-pill i {
    font-size: var(--font-size-xs);
    color: var(--cw-pill-icon-fg);
}

[b-51734m289b] .lot-pill.muted {
    background: var(--cw-pill-muted-bg);
    color: var(--cw-pill-muted-fg);
}

[b-51734m289b] .lot-pill.vessel {
    background: var(--cw-pill-vessel-bg);
    color: var(--cw-pill-vessel-fg);
}

[b-51734m289b] .lot-pill.vessel i {
    color: var(--cw-pill-vessel-icon-fg);
}

[b-51734m289b] .lot-pill.blend {
    background: var(--cw-pill-blend-bg);
    color: var(--cw-pill-blend-fg);
    text-decoration: none;
    cursor: pointer;
}

[b-51734m289b] .lot-pill.blend:hover {
    background: var(--cw-pill-blend-hover-bg);
}

[b-51734m289b] .lot-pill.blend i {
    color: var(--cw-pill-blend-icon-fg);
}

[b-51734m289b] .lot-analysis-strip {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--cw-strip-divider);
}

[b-51734m289b] .analysis-values {
    font-size: 0.76rem;
    color: var(--cw-analysis-fg);
    letter-spacing: 0.01em;
}

/* Enriched spec items in display mode */
[b-51734m289b] .spec-item.enriched .spec-label {
    color: var(--cw-pill-icon-fg);
}
/* /Pages/Bottling/DailyFlow/Components/BolScanPanel.razor.rz.scp.css */
/* BOL Scan Panel — domain-specific styles only */

.bol-scan-panel[b-g2y448fnlh] {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

/* Upload area (dashed border variant for drag-drop) */
.upload-section[b-g2y448fnlh] {
    display: flex;
    flex-direction: column;
}

.upload-area[b-g2y448fnlh] {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-area:hover[b-g2y448fnlh] {
    border-color: var(--blue-500);
    background-color: var(--gray-50);
}

.upload-area.has-file[b-g2y448fnlh] {
    border-color: var(--green-600);
    background-color: var(--green-100);
    text-align: left;
    display: block;
    padding: var(--space-md) var(--space-lg);
}

.upload-prompt[b-g2y448fnlh] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* File list */
.file-item[b-g2y448fnlh] {
    padding: var(--space-2xs) 0;
}

.file-name[b-g2y448fnlh] {
    font-weight: var(--font-weight-medium);
    font-size: 0.875rem;
}

.file-size[b-g2y448fnlh] {
    color: var(--gray-600);
    font-size: 0.8rem;
}

/* Scan actions */
.scan-actions[b-g2y448fnlh] {
    display: flex;
    gap: var(--space-sm);
}

/* Results */
.scan-results[b-g2y448fnlh] {
    display: flex;
    flex-direction: column;
}

/* Header fields grid override (uses nwc-form-grid base) */
.bol-header-fields[b-g2y448fnlh] {
    padding: var(--space-md);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

/* Line items table */
.line-items-table[b-g2y448fnlh] {
    max-height: 45vh;
    overflow-y: auto;
}

.line-items-table table[b-g2y448fnlh] {
    font-size: var(--font-size-md);
    margin-bottom: 0;
}

.line-items-table th[b-g2y448fnlh] {
    position: sticky;
    top: 0;
    background: var(--surface-default);
    z-index: var(--z-base);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    color: var(--gray-600);
}

.line-items-table td[b-g2y448fnlh] {
    vertical-align: middle;
}

.line-items-table .form-control-sm[b-g2y448fnlh],
.line-items-table .form-select-sm[b-g2y448fnlh] {
    font-size: 0.8rem;
    padding: 0.15rem 0.35rem;
}

[b-g2y448fnlh] tr.low-confidence {
    background-color: var(--yellow-100);
}

.label-detail-row td[b-g2y448fnlh] {
    padding-top: 0;
    border-top: none;
}

.label-quantities[b-g2y448fnlh] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding-left: var(--space-sm);
}

/* Classification badge */
.classification-badge[b-g2y448fnlh] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem var(--space-md);
    background: var(--nwc-bg-hover, #f0f0f0);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    margin-bottom: var(--space-md);
}

/* Validation warnings */
.validation-warnings .alert-sm[b-g2y448fnlh] {
    font-size: 0.8rem;
    border-radius: var(--radius-sm);
}

/* Review actions */
.review-actions[b-g2y448fnlh] {
    padding-top: var(--space-md);
    border-top: 1px solid var(--gray-300);
}

/* Split layout: BOL image left, extracted data right */
.scan-review-layout[b-g2y448fnlh] {
    display: flex;
    gap: var(--space-lg);
    min-height: 0;
    flex: 1;
}

/* BOL preview pane + magnifier chrome removed — this panel now renders the
   shared <DocumentViewer> child, which owns all that (docViewer.js + its scoped
   .doc-* CSS). The old .bol-preview-*/.bol-magnifier-* rules + bolPreview.js
   were pre-extraction dead code. */

.scan-review-layout > .scan-results[b-g2y448fnlh] {
    flex: 1;
    min-width: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .scan-review-layout[b-g2y448fnlh] {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .line-items-table[b-g2y448fnlh] {
        max-height: 35vh;
    }
}
/* /Pages/Bottling/DailyFlow/Components/BottlingCompositionSnipComponent.razor.rz.scp.css */
/* Composition Component — Read-only card display */

/* Header */
.header-title i[b-fyt54fdi0e] {
    font-size: var(--font-size-lg);
    color: var(--dailyflow-composition-icon-fg);
}

.lot-badge[b-fyt54fdi0e] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--green-100);
    color: var(--green-700);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
    margin-left: var(--space-2xs);
}

.header-actions[b-fyt54fdi0e] {
    display: flex;
    gap: 0.35rem;
}

.header-actions button[b-fyt54fdi0e] {
    font-size: var(--font-size-sm);
    padding: var(--space-2xs) var(--space-sm);
}

/* Content */
.composition-content[b-fyt54fdi0e] {
    padding: var(--space-2xs) 0;
}

/* Composition Summary */
.composition-summary[b-fyt54fdi0e] {
    padding: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.summary-title[b-fyt54fdi0e] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    display: block;
    margin-bottom: 0.35rem;
}

.summary-group[b-fyt54fdi0e] {
    margin-bottom: var(--space-2xs);
    display: flex;
    gap: 0.35rem;
}

.summary-label[b-fyt54fdi0e] {
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    white-space: nowrap;
}

.summary-values[b-fyt54fdi0e] {
    color: var(--gray-600);
}

.sync-timestamp[b-fyt54fdi0e] {
    margin-top: 0.35rem;
    font-size: var(--font-size-xs);
    color: var(--gray-500);
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

/* Image Preview */
.image-preview[b-fyt54fdi0e] {
    position: relative;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    max-width: 450px;
    display: inline-block;
}

.image-preview img[b-fyt54fdi0e] {
    max-width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.2s ease;
}

.image-preview:hover img[b-fyt54fdi0e] {
    opacity: 0.85;
}

.image-overlay[b-fyt54fdi0e] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--overlay-backdrop-dim);
    color: var(--white);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.image-preview:hover .image-overlay[b-fyt54fdi0e] {
    opacity: 1;
}

.image-overlay i[b-fyt54fdi0e] {
    font-size: 1.5rem;
    margin-bottom: var(--space-2xs);
}

.image-overlay span[b-fyt54fdi0e] {
    font-size: var(--font-size-sm);
}
/* /Pages/Bottling/DailyFlow/Components/BottlingDatesComponent.razor.rz.scp.css */
/* Bottling Dates Component Styles */

/* Case Code field — wraps the input + sparkle button so the popover can anchor */
.case-code-field[b-few2cvr38r] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.case-code-sparkle[b-few2cvr38r] {
    color: var(--bs-primary, var(--blue-500));
    line-height: 0;
    flex-shrink: 0;
}

    .case-code-sparkle:disabled[b-few2cvr38r] {
        color: var(--bs-secondary, var(--gray-600));
        opacity: 0.5;
    }

.dates-wrapper[b-few2cvr38r] {
    background: var(--surface-default);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    border-top: 2px solid var(--gray-300);
}

/* Header */

/* Date Tabs */

/* Product Code Badge */
.product-code-badge[b-few2cvr38r] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--dailyflow-info-badge-bg);
    color: var(--blue-500);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--space-sm);
}

.product-code-badge i[b-few2cvr38r] {
    font-size: var(--font-size-md);
}

/* Form Grid */
.date-form[b-few2cvr38r] {
    margin-top: var(--space-sm);
}

.form-grid[b-few2cvr38r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 180px));
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
}

.form-field[b-few2cvr38r] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.form-field.wide[b-few2cvr38r] {
    grid-column: span 2;
}

.form-field label[b-few2cvr38r] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--gray-600);
}

.form-field input[b-few2cvr38r],
.form-field select[b-few2cvr38r],
.form-field textarea[b-few2cvr38r] {
    font-size: 0.8rem;
}

.form-field textarea[b-few2cvr38r] {
    min-height: 50px;
    resize: vertical;
}

/* Closure with Snow Dropper Indicator */
.closure-with-snow > select[b-few2cvr38r] {
    flex: 1 1 auto;
    min-width: 0;
}

.closure-ln2-toggle[b-few2cvr38r] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.snow-indicator[b-few2cvr38r] {
    font-size: var(--font-size-xl);
    color: var(--labqc-snow-cyan-fg);
    text-shadow: 0 0 8px rgba(var(--labqc-snow-cyan-fg-rgb), 0.6);
}

/* Action Toolbar */
.action-toolbar[b-few2cvr38r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--nwc-border-light);
    align-items: flex-start;
}

.action-group[b-few2cvr38r] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--nwc-border-light);
}

.action-group.save[b-few2cvr38r] {
    margin-left: auto;
    background: var(--dailyflow-info-badge-bg);
    border-color: var(--labqc-badge-info-bg);
}

.group-label[b-few2cvr38r] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    margin-right: var(--space-2xs);
}

.action-group .btn[b-few2cvr38r] {
    font-size: var(--font-size-sm);
    padding: 0.2rem 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    line-height: 1.2;
}

.action-group .btn-text[b-few2cvr38r] {
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .form-grid[b-few2cvr38r] {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    /* Keep toolbar horizontal, just wrap and compact */
    .action-toolbar[b-few2cvr38r] {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    /* Remove group styling - just show buttons inline */
    .action-group[b-few2cvr38r] {
        background: none;
        border: none;
        padding: 0;
        gap: var(--space-2xs);
    }

    .action-group.save[b-few2cvr38r] {
        margin-left: auto;
    }

    /* Hide group labels on mobile */
    .group-label[b-few2cvr38r] {
        display: none;
    }

    /* Hide button text, show only icons */
    .btn-text[b-few2cvr38r] {
        display: none;
    }

    /* Hide production summary - case count is in Cases button */
    .action-group.production-summary[b-few2cvr38r] {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .form-grid[b-few2cvr38r] {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Production Summary Styles */
.action-group.production-summary[b-few2cvr38r] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: 0.15rem var(--space-sm);
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-xs);
    min-width: fit-content;
}

.production-summary .group-label[b-few2cvr38r] {
    margin-right: 0.35rem;
    border-right: 1px solid var(--gray-400);
    padding-right: 0.35rem;
}

.summary-stat[b-few2cvr38r] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.stat-label[b-few2cvr38r] {
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
}

.stat-value[b-few2cvr38r] {
    color: var(--gray-900);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.stat-sep[b-few2cvr38r] {
    color: var(--gray-500);
    font-weight: var(--font-weight-normal);
}

.summary-divider[b-few2cvr38r] {
    color: var(--gray-400);
    font-size: 0.5rem;
    margin: 0 0.1rem;
}

/* Responsive: compact on smaller screens */
@media (max-width: 1200px) {
    .action-group.production-summary .stat-label[b-few2cvr38r] {
        display: none;
    }
}

@media (max-width: 992px) {
    .action-group.production-summary[b-few2cvr38r] {
        display: none;
    }
}

/* Phone - even more compact */
@media (max-width: 480px) {
    .form-grid[b-few2cvr38r] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.35rem var(--space-sm);
    }

    .action-toolbar[b-few2cvr38r] {
        justify-content: center;
    }

    .action-group.save[b-few2cvr38r] {
        margin-left: 0;
    }
}

/* ============================================
   Case Count Panel Header
   ============================================ */
.case-count-header-content[b-few2cvr38r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.case-count-header-content .header-brand[b-few2cvr38r] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    color: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.case-count-header-content .header-tag[b-few2cvr38r] {
    background: var(--dailyflow-header-tag-bg);
    padding: var(--space-3xs) var(--space-sm);
    border-radius: 9999px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.case-count-header-content .header-meta[b-few2cvr38r] {
    font-size: 0.8rem;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.case-count-header-content .separator[b-few2cvr38r] {
    opacity: 0.5;
}

@media (max-width: 480px) {
    .case-count-header-content[b-few2cvr38r] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2xs);
    }

    .case-count-header-content .header-brand[b-few2cvr38r] {
        font-size: 0.95rem;
    }

    .case-count-header-content .header-meta[b-few2cvr38r] {
        font-size: var(--font-size-sm);
    }
}
/* /Pages/Bottling/DailyFlow/Components/BottlingDateTabsRow.razor.rz.scp.css */
/* Shared base lives in site.css .nwc-datetab-* (see comment there).
   This file keeps only BottlingDateTabsRow's responsive deltas — scoped
   overrides on the global classes (the [b-xxx] attribute matches only this
   component's elements, so they don't touch BottlingDateTabs). */
@media (max-width: 768px) {
    .nwc-datetab[b-iv6kp6wim0] {
        padding: var(--space-2xs) 0.4rem;
        padding-right: 1.2rem;
        font-size: var(--font-size-xs);
    }

    .nwc-datetab-badge[b-iv6kp6wim0] {
        width: 14px;
        height: 14px;
        font-size: 0.55rem;
    }
}

@media (max-width: 480px) {
    .nwc-datetab-row[b-iv6kp6wim0] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .nwc-datetab-list[b-iv6kp6wim0] {
        width: 100%;
    }

    .nwc-datetab[b-iv6kp6wim0] {
        flex: 1;
        justify-content: center;
        min-width: 0;
    }

    .nwc-datetab-product[b-iv6kp6wim0] {
        width: 100%;
        justify-content: center;
    }
}
/* /Pages/Bottling/DailyFlow/Components/BottlingLabComponent.razor.rz.scp.css */
/* Lab Component Styles - Matching other DailyFlow components */

.header-title i[b-0qf1dm8llt] {
    font-size: var(--font-size-lg);
    color: var(--blue-500);
}

.header-actions[b-0qf1dm8llt] {
    display: flex;
    gap: var(--space-2xs);
}

.header-actions button[b-0qf1dm8llt] {
    font-size: var(--font-size-sm);
    padding: 0.2rem 0.4rem;
}

/* Form Content */
.lab-content[b-0qf1dm8llt] {
    padding: var(--space-2xs) 0;
}

.lab-form[b-0qf1dm8llt] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.form-row label[b-0qf1dm8llt] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-600);
    min-width: 80px;
    text-align: right;
}

.form-row select[b-0qf1dm8llt],
.form-row input[b-0qf1dm8llt] {
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
    max-width: 180px;
}

.form-row select[b-0qf1dm8llt] {
    max-width: 200px;
}

/* Input with unit suffix */
.input-with-unit input[b-0qf1dm8llt] {
    width: 80px;
    text-align: right;
}

.input-with-unit .unit[b-0qf1dm8llt] {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    min-width: 30px;
}

/* Notes row */
.notes-row[b-0qf1dm8llt] {
    align-items: flex-start;
}

.notes-row textarea[b-0qf1dm8llt] {
    flex: 1;
    max-width: 200px;
    min-height: 50px;
    font-size: var(--font-size-sm);
    resize: vertical;
}

/* Checkbox row */
.checkbox-row[b-0qf1dm8llt] {
    margin-top: var(--space-2xs);
}

.checkbox-label[b-0qf1dm8llt] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    min-width: auto;
}

.checkbox-label input[type="checkbox"][b-0qf1dm8llt] {
    width: auto;
    margin: 0;
}

.checkbox-label span[b-0qf1dm8llt] {
    font-weight: var(--font-weight-normal);
}

/* ========== Mobile Responsive Breakpoints ========== */

/* Tablet and below */
@media (max-width: 768px) {
    .form-row select[b-0qf1dm8llt],
    .form-row input[b-0qf1dm8llt] {
        max-width: 150px;
    }

    .form-row select[b-0qf1dm8llt] {
        max-width: 170px;
    }

    .notes-row textarea[b-0qf1dm8llt] {
        max-width: 150px;
    }
}

/* Phone */
@media (max-width: 480px) {

    .header-actions[b-0qf1dm8llt] {
        width: 100%;
        justify-content: flex-end;
    }

    .form-row[b-0qf1dm8llt] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2xs);
    }

    .form-row label[b-0qf1dm8llt] {
        min-width: auto;
        text-align: left;
    }

    .form-row select[b-0qf1dm8llt],
    .form-row input[b-0qf1dm8llt] {
        max-width: 100%;
        width: 100%;
    }

    .form-row select[b-0qf1dm8llt] {
        max-width: 100%;
    }

    .input-with-unit[b-0qf1dm8llt] {
        width: 100%;
    }

    .input-with-unit input[b-0qf1dm8llt] {
        flex: 1;
        width: auto;
    }

    .notes-row textarea[b-0qf1dm8llt] {
        max-width: 100%;
        width: 100%;
    }

    .checkbox-row[b-0qf1dm8llt] {
        width: 100%;
    }
}
/* /Pages/Bottling/DailyFlow/Components/BottlingRunHeaderComponent.razor.rz.scp.css */
/* Run Header Component Styles - Matching DailyFlow components */

.run-wrapper[b-5nd70u1pa8] {
    background: var(--surface-default);
    border-radius: var(--radius-sm);
}

.organic-stamp[b-5nd70u1pa8] {
    border: 2px solid var(--dailyflow-organic-fg);
    border-radius: var(--radius-xs);
    color: var(--dailyflow-organic-fg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    padding: 0.1rem 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--dailyflow-organic-bg);
    margin-left: var(--space-sm);
}

/* Header — base row hoisted to .nwc-collapse-header (site.css) */
.run-header:hover[b-5nd70u1pa8] {
    background: linear-gradient(to bottom, var(--gray-200), var(--gray-300));
}

.header-title i[b-5nd70u1pa8] {
    font-size: var(--font-size-lg);
    color: var(--dailyflow-purple-accent);
}

.client-badge[b-5nd70u1pa8] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    background: var(--dailyflow-info-badge-bg);
    color: var(--blue-500);
    padding: 0.15rem var(--space-sm);
    border-radius: var(--radius-xs);
    margin-left: var(--space-sm);
    border: none;
    cursor: pointer;
}

.client-badge:hover[b-5nd70u1pa8] {
    background: var(--dailyflow-info-badge-hover-bg);
    text-decoration: underline;
}

.bond-number[b-5nd70u1pa8] {
    font-size: var(--font-size-2xs);
    color: var(--dailyflow-bond-number-fg);
    margin-left: 0.35rem;
    font-weight: var(--font-weight-normal);
}

.header-actions button[b-5nd70u1pa8] {
    font-size: var(--font-size-sm);
    padding: var(--space-2xs) var(--space-sm);
}

.header-actions .btn-text[b-5nd70u1pa8] {
    margin-left: var(--space-2xs);
}

.sparkle-icon[b-5nd70u1pa8] {
    vertical-align: -1px;
}

.collapse-icon[b-5nd70u1pa8] {
    color: var(--gray-600);
    font-size: var(--font-size-md);
    margin-left: var(--space-sm);
    transition: transform 0.2s ease;
}

/* Content */
.run-content[b-5nd70u1pa8] {
    padding: 0.35rem;
}

/* Run Detail Chips */
.run-chip[b-5nd70u1pa8] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    background: var(--nwc-bg-light);
    color: var(--nwc-text-muted);
    border: 1px solid var(--nwc-border-light);
    cursor: pointer;
    transition: background 0.1s ease, transform 0.1s ease;
}

.run-chip:hover[b-5nd70u1pa8] {
    background: var(--nwc-border-light);
    transform: translateY(-1px);
}

.run-chip i[b-5nd70u1pa8] {
    font-size: var(--font-size-xs);
}

.run-chip.notes-chip[b-5nd70u1pa8] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Summary Row - Compact */
.summary-row[b-5nd70u1pa8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--nwc-border-light);
}

.stat-badge[b-5nd70u1pa8] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.stat-badge i[b-5nd70u1pa8] {
    font-size: var(--font-size-sm);
}

.stat-main[b-5nd70u1pa8] {
    font-weight: var(--font-weight-semibold);
}

.stat-sep[b-5nd70u1pa8] {
    color: var(--gray-600);
    opacity: 0.6;
}

.stat-sub[b-5nd70u1pa8] {
    opacity: 0.85;
}

.stat-badge.client[b-5nd70u1pa8] {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.stat-badge.expected[b-5nd70u1pa8] {
    background: var(--dailyflow-info-badge-bg);
    color: var(--dailyflow-info-badge-fg);
}

.stat-badge.bottled[b-5nd70u1pa8] {
    background: var(--green-100);
    color: var(--green-700);
}

.stat-badge.progress-badge[b-5nd70u1pa8] {
    font-weight: var(--font-weight-semibold);
}

.stat-badge.progress-badge.not-started[b-5nd70u1pa8] {
    background: var(--gray-50);
    color: var(--gray-600);
}

.stat-badge.progress-badge.started[b-5nd70u1pa8] {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.stat-badge.progress-badge.halfway[b-5nd70u1pa8] {
    background: var(--labqc-badge-info-bg);
    color: var(--dailyflow-info-badge-fg);
}

.stat-badge.progress-badge.complete[b-5nd70u1pa8] {
    background: var(--green-100);
    color: var(--green-700);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .header-actions .btn-text[b-5nd70u1pa8] {
        display: none;
    }

    .client-badge[b-5nd70u1pa8] {
        display: none;
    }
}
/* /Pages/Bottling/DailyFlow/Components/BottlingWinemakingComponent.razor.rz.scp.css */
/* Winemaking Component Styles - Matching other DailyFlow components */

.header-title i[b-xrdc2wwhf1] {
    font-size: var(--font-size-lg);
    color: var(--dailyflow-purple-accent);
}

.wine-lot-badge[b-xrdc2wwhf1] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    background: var(--dailyflow-info-badge-bg);
    color: var(--blue-500);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
    margin-left: var(--space-2xs);
}

.header-actions[b-xrdc2wwhf1] {
    display: flex;
    gap: var(--space-2xs);
}

.header-actions button[b-xrdc2wwhf1] {
    font-size: var(--font-size-sm);
    padding: 0.2rem 0.4rem;
}

/* Content */
.winemaking-content[b-xrdc2wwhf1] {
    padding: var(--space-2xs) 0;
}

/* Specs Grid */
.specs-grid[b-xrdc2wwhf1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.35rem var(--space-md);
    margin-bottom: var(--space-sm);
}

.spec-label[b-xrdc2wwhf1] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.spec-value[b-xrdc2wwhf1] {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
}

/* Notes Section */
.notes-section[b-xrdc2wwhf1] {
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    padding: 0.35rem var(--space-sm);
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-sm);
}

.notes-label[b-xrdc2wwhf1] {
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    margin-right: var(--space-2xs);
}

.notes-text[b-xrdc2wwhf1] {
    color: var(--gray-700);
}

/* Actions Section */
.actions-section[b-xrdc2wwhf1] {
    margin-bottom: var(--space-sm);
}

.actions-label[b-xrdc2wwhf1],
.contacts-label[b-xrdc2wwhf1] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    display: block;
    margin-bottom: var(--space-2xs);
}

.action-item[b-xrdc2wwhf1] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-sm);
    padding: 0.2rem 0;
}

.action-item.completed[b-xrdc2wwhf1] {
    color: var(--green-600);
}

.action-item.completed i[b-xrdc2wwhf1] {
    color: var(--green-600);
}

.action-item.pending[b-xrdc2wwhf1] {
    color: var(--red-500);
}

.action-item.pending i[b-xrdc2wwhf1] {
    color: var(--red-500);
}

.action-item i[b-xrdc2wwhf1] {
    font-size: 0.8rem;
}

/* Contacts Section */
.contacts-section[b-xrdc2wwhf1] {
    border-top: 1px solid var(--nwc-border-light);
    padding-top: var(--space-sm);
    margin-top: var(--space-2xs);
}

/* .contacts-label merged into .actions-label above */


.contact-item[b-xrdc2wwhf1] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

.contact-item i[b-xrdc2wwhf1] {
    color: var(--gray-600);
    font-size: var(--font-size-xs);
}

.contact-phone[b-xrdc2wwhf1] {
    color: var(--gray-600);
    font-size: var(--font-size-xs);
    margin-left: auto;
}

/* ========== Mobile Responsive Breakpoints ========== */

/* Tablet and below */
@media (max-width: 768px) {
    .specs-grid[b-xrdc2wwhf1] {
        grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
        gap: 0.3rem var(--space-sm);
    }

    .spec-label[b-xrdc2wwhf1] {
        font-size: 0.6rem;
    }

    .spec-value[b-xrdc2wwhf1] {
        font-size: var(--font-size-sm);
    }
}

/* Phone */
@media (max-width: 480px) {

    .header-title[b-xrdc2wwhf1] {
        flex-wrap: wrap;
    }

    .wine-lot-badge[b-xrdc2wwhf1] {
        margin-left: 0;
    }

    .header-actions[b-xrdc2wwhf1] {
        width: 100%;
        justify-content: flex-end;
    }

    .specs-grid[b-xrdc2wwhf1] {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem var(--space-md);
    }

    .notes-section[b-xrdc2wwhf1] {
        font-size: 0.8rem;
    }

    .action-item[b-xrdc2wwhf1] {
        font-size: 0.8rem;
    }

    .contact-item[b-xrdc2wwhf1] {
        flex-wrap: wrap;
    }

    .contact-phone[b-xrdc2wwhf1] {
        width: 100%;
        margin-left: 1.05rem;
        font-size: var(--font-size-sm);
    }
}
/* /Pages/Bottling/DailyFlow/Components/CaseCodeSuggestionsPopover.razor.rz.scp.css */
.case-code-popover-backdrop[b-mhyp4pxm4k] {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: calc(var(--z-slot-badge) - 1);
}

.case-code-popover[b-mhyp4pxm4k] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: var(--z-slot-badge);
    width: 280px;
    background: var(--surface-default);
    border: 1px solid var(--bs-border-color, var(--gray-300));
    border-radius: var(--radius-md);
    box-shadow: var(--dailyflow-popover-shadow);
    font-size: var(--font-size-md);
}

.ccp-header[b-mhyp4pxm4k] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bs-border-color, var(--gray-300));
    background: var(--bs-light, var(--gray-50));
    border-top-left-radius: var(--radius-md);
    border-top-right-radius: var(--radius-md);
}

.ccp-title[b-mhyp4pxm4k] {
    flex: 1;
    font-weight: var(--font-weight-semibold);
    color: var(--bs-primary, var(--blue-500));
}

.ccp-close[b-mhyp4pxm4k] {
    border: none;
    background: transparent;
    color: var(--bs-secondary, var(--gray-600));
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

    .ccp-close:hover[b-mhyp4pxm4k] {
        color: var(--bs-dark, var(--gray-900));
    }

.ccp-loading[b-mhyp4pxm4k],
.ccp-empty[b-mhyp4pxm4k] {
    padding: 14px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--bs-secondary, var(--gray-600));
}

.ccp-empty[b-mhyp4pxm4k] {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.ccp-list[b-mhyp4pxm4k] {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.ccp-item[b-mhyp4pxm4k] {
    padding: 8px 12px;
    cursor: pointer;
    border-left: 3px solid transparent;
}

    .ccp-item:hover[b-mhyp4pxm4k] {
        background: var(--bs-light, var(--gray-50));
        border-left-color: var(--bs-primary, var(--blue-500));
    }

    .ccp-item.is-fallback[b-mhyp4pxm4k] {
        border-left-color: var(--bs-warning, var(--yellow-500));
    }

.ccp-code[b-mhyp4pxm4k] {
    font-family: var(--bs-font-monospace, monospace);
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    color: var(--bs-dark, var(--gray-900));
}

.ccp-meta[b-mhyp4pxm4k] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
    font-size: var(--font-size-sm);
    color: var(--bs-secondary, var(--gray-600));
}
/* /Pages/Bottling/DailyFlow/Components/CertificationSection.razor.rz.scp.css */
.cert-section[b-r07c7onu1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.cert-muted[b-r07c7onu1d] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Certifier badge row */
.cert-type-row[b-r07c7onu1d] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.cert-type-label[b-r07c7onu1d] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

.cert-type-badge[b-r07c7onu1d] {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--green-700);
    background: var(--green-100);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.5rem;
}

/* Linked product card */
.cert-linked-card[b-r07c7onu1d] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    padding: var(--space-md);
}

.cert-stamp[b-r07c7onu1d] {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--surface-default);
    flex-shrink: 0;
}

/* Stamped label is a clickable artifact (view full size); the approved-products
   list — not the label — is the compliance proof, surfaced via the Approval doc action. */
.cert-stamp-link[b-r07c7onu1d] {
    display: block;
    line-height: 0;
    flex-shrink: 0;
}

.cert-stamp-link:hover .cert-stamp[b-r07c7onu1d] {
    border-color: var(--green-700);
}

.cert-linked-body[b-r07c7onu1d] {
    flex: 1 1 auto;
    min-width: 0;
}

.cert-product-title[b-r07c7onu1d] {
    font-weight: 600;
    color: var(--text-primary);
}

.cert-product-sub[b-r07c7onu1d] {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.cert-approval[b-r07c7onu1d] {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
}

.cert-approved-badge[b-r07c7onu1d] {
    display: inline-flex;
    align-items: center;
    color: var(--green-700);
    font-weight: 600;
}

.cert-meta[b-r07c7onu1d] {
    color: var(--text-muted);
}

.cert-linked-actions[b-r07c7onu1d] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* Picker (suggestions + manual search) */
.cert-picker[b-r07c7onu1d] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.cert-picker-label[b-r07c7onu1d] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.cert-back[b-r07c7onu1d] {
    align-self: flex-start;
    padding: 0;
    font-size: 0.8rem;
}

.cert-candidate[b-r07c7onu1d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-default);
    padding: 0.4rem var(--space-md);
}

.cert-candidate-info[b-r07c7onu1d] {
    min-width: 0;
}

.cert-candidate-meta[b-r07c7onu1d] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.78rem;
    margin-top: 0.1rem;
}

.cert-confidence[b-r07c7onu1d] {
    color: var(--green-700);
    font-weight: 600;
}

.cert-search[b-r07c7onu1d] {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-top: 0.25rem;
}

.cert-search .form-control[b-r07c7onu1d] {
    flex: 1 1 auto;
}
/* /Pages/Bottling/DailyFlow/Components/ColaComponent.razor.rz.scp.css */
/* COLA Component Styles - Matching Packaging Component */

.header-actions[b-ude9shnkee] {
    display: flex;
    gap: var(--space-2xs);
}

.header-actions button[b-ude9shnkee] {
    font-size: var(--font-size-sm);
    padding: 0.2rem 0.4rem;
}

/* Content Layout */
.flex-row[b-ude9shnkee] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-md);
}

.column[b-ude9shnkee] {
    display: flex;
    flex-direction: column;
}

.left-section[b-ude9shnkee] {
    flex: 1;
    min-width: 0;
}

.right-section[b-ude9shnkee] {
    flex: 0 0 auto;
    max-width: 160px;
}

/* Label Info (details) */
.label-info[b-ude9shnkee] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: var(--font-size-sm);
}

.label-item[b-ude9shnkee] {
    display: flex;
    gap: var(--space-2xs);
    line-height: 1.3;
}

.label-item b[b-ude9shnkee] {
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
}

/* Image container */
.image-container[b-ude9shnkee] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 300px;
    overflow-y: auto;
}

/* COLA images */
.image-container img.cola-img:hover[b-ude9shnkee] {
    transform: scale(1.02);
    box-shadow: var(--dailyflow-hover-shadow);
}

/* Image with dimensions wrapper */
.image-with-dimensions[b-ude9shnkee] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
}

.image-dimensions[b-ude9shnkee] {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    background: var(--gray-50);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
    white-space: nowrap;
}

.image-type[b-ude9shnkee] {
    font-size: var(--font-size-2xs);
    color: var(--dailyflow-image-type-fg);
    text-align: center;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ========== Mobile Responsive Breakpoints ========== */

/* Tablet and below */
@media (max-width: 768px) {
    .flex-row[b-ude9shnkee] {
        flex-wrap: wrap;
    }

    .right-section[b-ude9shnkee] {
        max-width: 120px;
    }

    .image-container img.cola-img[b-ude9shnkee] {
        max-width: 100px;
    }
}

/* Phone */
@media (max-width: 480px) {
    .flex-row[b-ude9shnkee] {
        flex-direction: column;
    }

    .left-section[b-ude9shnkee] {
        width: 100%;
    }

    .right-section[b-ude9shnkee] {
        width: 100%;
        max-width: none;
        flex-direction: row;
        justify-content: center;
    }

    .image-container[b-ude9shnkee] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-height: none;
        gap: var(--space-sm);
    }

    .image-container img.cola-img[b-ude9shnkee] {
        max-width: 100px;
        max-height: 150px;
    }


    .header-actions[b-ude9shnkee] {
        width: 100%;
        justify-content: flex-end;
    }

    .label-info[b-ude9shnkee] {
        font-size: 0.8rem;
    }
}
/* /Pages/Bottling/DailyFlow/Components/DailyFlowChangeCard.razor.rz.scp.css */
.dfc-card[b-qi3jljqilb] {
    font-size: 0.875rem;
    color: var(--dailyflow-timeline-text);
}

.dfc-empty[b-qi3jljqilb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    color: var(--dailyflow-timeline-muted);
    justify-content: center;
}

.dfc-empty .bi[b-qi3jljqilb] {
    font-size: 1.1rem;
    opacity: 0.7;
}

.dfc-timeline[b-qi3jljqilb] {
    list-style: none;
    margin: 0;
    padding: 0.25rem 0;
}

.dfc-event[b-qi3jljqilb] {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding: 0.6rem 0.25rem 0.6rem 0;
}

/* vertical connector */
.dfc-event[b-qi3jljqilb]::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 1.8rem;
    bottom: -0.6rem;
    width: 2px;
    background: var(--dailyflow-timeline-connector);
}

.dfc-event:last-child[b-qi3jljqilb]::before {
    display: none;
}

.dfc-dot[b-qi3jljqilb] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dailyflow-dot-default-bg);
    color: var(--dailyflow-dot-default-fg);
    font-size: 0.72rem;
    z-index: var(--z-base);
}

.dfc-created .dfc-dot[b-qi3jljqilb] { background: var(--dailyflow-dot-created-bg); color: var(--dailyflow-dot-created-fg); }
.dfc-deleted .dfc-dot[b-qi3jljqilb] { background: var(--dailyflow-dot-deleted-bg); color: var(--dailyflow-dot-deleted-fg); }
.dfc-moved .dfc-dot[b-qi3jljqilb] { background: var(--dailyflow-dot-moved-bg); color: var(--dailyflow-dot-moved-fg); }
.dfc-status .dfc-dot[b-qi3jljqilb] { background: var(--dailyflow-dot-status-bg); color: var(--dailyflow-dot-status-fg); }

.dfc-body[b-qi3jljqilb] {
    flex: 1 1 auto;
    min-width: 0;
}

.dfc-head[b-qi3jljqilb] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}

.dfc-op[b-qi3jljqilb] {
    font-weight: 600;
}

.dfc-meta[b-qi3jljqilb] {
    font-size: 0.78rem;
    color: var(--dailyflow-timeline-muted);
}

.dfc-rows[b-qi3jljqilb] {
    margin-top: 0.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.dfc-rowline[b-qi3jljqilb] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 0.82rem;
}

.dfc-field[b-qi3jljqilb] {
    color: var(--dailyflow-timeline-muted);
    font-weight: 500;
}

.dfc-field[b-qi3jljqilb]::after {
    content: ":";
}

.dfc-old[b-qi3jljqilb] {
    color: var(--dailyflow-timeline-faint);
    text-decoration: line-through;
}

.dfc-arrow[b-qi3jljqilb] {
    font-size: 0.7rem;
    color: var(--dailyflow-timeline-faint);
}

.dfc-new[b-qi3jljqilb] {
    color: var(--dailyflow-timeline-strong);
    font-weight: 500;
}

.dfc-reason[b-qi3jljqilb] {
    color: var(--dailyflow-timeline-muted);
    font-style: italic;
}
/* /Pages/Bottling/DailyFlow/Components/DailyFlowListHelperComponent.razor.rz.scp.css */
.search-container[b-zevmtpvnmy] {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 8px;
}

.search-box[b-zevmtpvnmy] {
  position: sticky;
  top: 0;
  background-color: var(--gray-50);
  z-index: var(--z-base);
  padding: 8px 0;
  display: flex;
  gap: 6px;
}

.search-box input[b-zevmtpvnmy] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.9em;
}

.today-btn[b-zevmtpvnmy] {
  padding: 6px 12px;
  background: var(--dailyflow-today-accent);
  color: var(--white);
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.8em;
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  white-space: nowrap;
}

.today-btn:hover[b-zevmtpvnmy] {
  background: var(--dailyflow-today-accent-hover);
}

#appointmentsList[b-zevmtpvnmy] {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* sp-empty overrides */
.sp-empty[b-zevmtpvnmy] {
  padding: 24px 12px;
  color: var(--dailyflow-empty-fg);
  font-style: italic;
}

/* Date group container */
.date-group[b-zevmtpvnmy] {
  background: var(--surface-default);
  border-radius: var(--radius-md);
  box-shadow: var(--dailyflow-card-shadow);
  padding: 6px;
  margin-bottom: 4px;
}

/* Today highlight */
.date-group.today[b-zevmtpvnmy] {
  border: 2px solid var(--dailyflow-today-accent);
  box-shadow: 0 2px 8px rgba(var(--dailyflow-today-accent-rgb), 0.3);
}

.date-header[b-zevmtpvnmy] {
  font-size: 0.75em;
  font-weight: var(--font-weight-semibold);
  color: var(--nwc-text-muted);
  padding: 2px 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--nwc-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.date-group.today .date-header[b-zevmtpvnmy] {
  color: var(--dailyflow-today-accent);
}

.count-badge[b-zevmtpvnmy] {
  background: var(--gray-200);
  color: var(--gray-700);
  font-size: 0.85em;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: var(--font-weight-medium);
}

.date-group.today .count-badge[b-zevmtpvnmy] {
  background: var(--dailyflow-today-accent);
  color: var(--white);
}

.date-items[b-zevmtpvnmy] {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Bottling day buttons */
.bottlingDay[b-zevmtpvnmy] {
  cursor: pointer;
  border-radius: var(--radius-sm);
  border: 1px solid;
  padding: 4px 8px;
  font-size: 0.8em;
  font-weight: var(--font-weight-medium);
  transition: transform 0.1s, box-shadow 0.1s;
  text-align: left;
  width: calc(100% - 8px);
}

.bottlingDay:hover[b-zevmtpvnmy] {
  transform: translateY(-1px);
  box-shadow: var(--dailyflow-hover-shadow-sm);
}

/* Line positioning - margins come from config via inline styles */
/* Line 1 & 2 keep their database colors (inline styles) */
.bottlingDay.line-1[b-zevmtpvnmy] {
  /* Margins set via inline styles from BottlingLineConfig */
}

.bottlingDay.line-2[b-zevmtpvnmy] {
  /* Margins set via inline styles from BottlingLineConfig */
}

/* "Other" lines (W&I, Mobile) - colors come from config via inline styles */
.bottlingDay.line-other[b-zevmtpvnmy] {
  /* Margins and colors set via inline styles from BottlingLineConfig */
}

/* Selected state */
.bottlingDay.selected[b-zevmtpvnmy] {
  box-shadow: 0 0 0 2px var(--blue-500), 0 2px 8px rgba(var(--blue-500-rgb), 0.4);
  transform: scale(1.02);
}

/* Other appointments (BottlingDateOther) */
.other-appointment[b-zevmtpvnmy] {
  border-radius: var(--radius-sm);
  background: var(--dailyflow-other-appt-gradient);
  color: var(--white);
  font-size: 0.75em;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.other-appointment.multi-day[b-zevmtpvnmy] {
  background: var(--dailyflow-multiday-appt-gradient);
  border-left: 3px solid var(--appt-multiday-border);
}

.other-title[b-zevmtpvnmy] {
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-badge[b-zevmtpvnmy] {
  font-size: 0.85em;
  background: var(--date-range-badge-bg);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
}

/* Completed checkmark indicator */
.completed-check[b-zevmtpvnmy] {
  color: var(--green-600);
  font-size: 0.7em;
  margin-right: 4px;
  vertical-align: middle;
}
/* /Pages/Bottling/DailyFlow/Components/DrawingSearchPicker.razor.rz.scp.css */
/* Drawing Search Picker */
.drawing-search-picker[b-0yu0tiiyd7] {
    padding: 0 var(--space-2xs);
}

.selected-drawing[b-0yu0tiiyd7] {
    font-size: 0.8rem;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-dropdown[b-0yu0tiiyd7] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-slot-badge);
    background: var(--surface-default);
    border: 1px solid var(--bs-border-color);
    border-top: none;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    box-shadow: var(--dropdown-menu-shadow);
    max-height: 280px;
    overflow-y: auto;
}

.search-item[b-0yu0tiiyd7] {
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.search-item:last-child[b-0yu0tiiyd7] {
    border-bottom: none;
}

.search-item:hover[b-0yu0tiiyd7] {
    background: var(--bs-primary-bg-subtle);
}

/* Spec Drift Warning */
.spec-drift-banner[b-0yu0tiiyd7] {
    margin: var(--space-sm) var(--space-2xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--yellow-100);
    border: 1px solid var(--dailyflow-spec-warning-border);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
}

.spec-drift-header[b-0yu0tiiyd7] {
    font-weight: var(--font-weight-semibold);
    color: var(--wr-status-warning-fg);
    margin-bottom: var(--space-2xs);
}

.spec-drift-list[b-0yu0tiiyd7] {
    margin: var(--space-2xs) 0 var(--space-sm);
    padding-left: 1.25rem;
    color: var(--wr-status-warning-fg);
}

.spec-drift-list li[b-0yu0tiiyd7] {
    margin-bottom: 0.15rem;
}
/* /Pages/Bottling/DailyFlow/Components/LabelColaPicker.razor.rz.scp.css */
/* Label/COLA Picker layout */

.form-control[b-gtshoiuj08] {
    font-size: var(--font-size-sm);
    padding: 0.2rem 0.35rem;
    height: auto;
}

.form-control:focus[b-gtshoiuj08] {
    box-shadow: 0 0 0 1px var(--bs-primary);
}

/* Linked image thumbnails */
.linked-thumbnails[b-gtshoiuj08] {
    display: flex;
    gap: 0.35rem;
}

.linked-thumbnail[b-gtshoiuj08] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: var(--radius-xs);
    border: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.linked-thumbnail:hover[b-gtshoiuj08] {
    transform: scale(1.08);
    box-shadow: var(--dailyflow-linked-thumb-shadow);
}

/* Suggestions */
.suggestions[b-gtshoiuj08] {
    margin-bottom: 0.35rem;
}

.suggestions-label[b-gtshoiuj08] {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.suggestion-chips[b-gtshoiuj08] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: 0.2rem;
}

.suggestion-chip[b-gtshoiuj08] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.4rem;
    font-size: var(--font-size-xs);
    line-height: 1.3;
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    max-width: 100%;
}

.suggestion-chip:hover[b-gtshoiuj08] {
    background: var(--dailyflow-suggestion-chip-hover-bg);
    border-color: var(--bs-primary);
}

.match-badge[b-gtshoiuj08] {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--bs-success);
    white-space: nowrap;
}
/* /Pages/Bottling/DailyFlow/Components/LabelComponent.razor.rz.scp.css */
/* Label Component Styles - Matching Packaging Component */

.header-actions[b-dtueebyaa0] {
    display: flex;
    gap: var(--space-2xs);
}

.header-actions button[b-dtueebyaa0] {
    font-size: var(--font-size-sm);
    padding: 0.2rem 0.4rem;
}

/* Content Layout */
.flex-row[b-dtueebyaa0] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: var(--space-md);
}

.column[b-dtueebyaa0] {
    display: flex;
    flex-direction: column;
}

.left-section[b-dtueebyaa0] {
    flex: 0 0 auto;
    max-width: 140px;
}

.right-section[b-dtueebyaa0] {
    flex: 1;
    min-width: 0;
}

/* Image container */
.image-container[b-dtueebyaa0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 300px;
    overflow-y: auto;
}

.image-container img.card-img:hover[b-dtueebyaa0] {
    transform: scale(1.02);
    box-shadow: var(--dailyflow-hover-shadow);
}

/* Label Info */
.label-info[b-dtueebyaa0] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: var(--font-size-sm);
}

.label-item[b-dtueebyaa0] {
    display: flex;
    gap: var(--space-2xs);
    line-height: 1.3;
}

.label-item b[b-dtueebyaa0] {
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    flex-shrink: 0;
}

/* ========== Mobile Responsive Breakpoints ========== */

/* Tablet and below */
@media (max-width: 768px) {
    .flex-row[b-dtueebyaa0] {
        flex-wrap: wrap;
    }

    .left-section[b-dtueebyaa0] {
        max-width: 120px;
    }

    .image-container img.card-img[b-dtueebyaa0] {
        max-width: 100px;
    }
}

/* Phone */
@media (max-width: 480px) {
    .flex-row[b-dtueebyaa0] {
        flex-direction: column;
    }

    .left-section[b-dtueebyaa0] {
        width: 100%;
        max-width: none;
        flex-direction: row;
        justify-content: center;
    }

    .right-section[b-dtueebyaa0] {
        width: 100%;
    }

    .image-container[b-dtueebyaa0] {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-height: none;
        gap: var(--space-sm);
    }

    .image-container img.card-img[b-dtueebyaa0] {
        max-width: 100px;
        max-height: 150px;
    }


    .header-actions[b-dtueebyaa0] {
        width: 100%;
        justify-content: flex-end;
    }

    .label-info[b-dtueebyaa0] {
        font-size: 0.8rem;
    }
}
/* /Pages/Bottling/DailyFlow/Components/MaterialStatusSection.razor.rz.scp.css */
/* ── Material Status Section ── */
.material-status-section[b-sjlqcjdlq3] {
    margin-top: var(--space-sm);
}

.nwc-section-header i[b-sjlqcjdlq3] {
    font-size: var(--font-size-xs);
}

.status-loading[b-sjlqcjdlq3] {
    color: var(--gray-600);
    font-size: 0.8rem;
    padding: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.status-row[b-sjlqcjdlq3] {
    display: flex;
    align-items: center;
    padding: 0.35rem var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.status-row.insufficient[b-sjlqcjdlq3] {
    background: var(--yellow-100);
}

.status-row.sufficient[b-sjlqcjdlq3] {
    background: var(--green-100);
}

.status-row .component-name[b-sjlqcjdlq3] {
    font-weight: var(--font-weight-medium);
    min-width: 70px;
    color: var(--gray-700);
}

.status-row .calculation[b-sjlqcjdlq3] {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.status-row .quantities[b-sjlqcjdlq3] {
    color: var(--gray-700);
}

.status-row .shortfall[b-sjlqcjdlq3] {
    color: var(--red-500);
    font-weight: var(--font-weight-semibold);
}

.status-row.sufficient .shortfall[b-sjlqcjdlq3] {
    display: none;
}

.status-row .status-icon[b-sjlqcjdlq3] {
    font-size: var(--font-size-base);
}

/* Logged Materials List (shares the divider styling of .status-actions) */
.status-actions[b-sjlqcjdlq3],
.logged-materials[b-sjlqcjdlq3] {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--gray-200);
}

.logged-header[b-sjlqcjdlq3] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    margin-bottom: 0.35rem;
}

.logged-item[b-sjlqcjdlq3] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.35rem var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2xs);
    font-size: var(--font-size-sm);
    flex-wrap: wrap;
}

.logged-type[b-sjlqcjdlq3] {
    background: var(--gray-600);
    color: var(--white);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    min-width: 50px;
    text-align: center;
}

.logged-qty[b-sjlqcjdlq3] {
    font-weight: var(--font-weight-semibold);
    color: var(--green-600);
    min-width: 50px;
}

.logged-desc[b-sjlqcjdlq3] {
    color: var(--gray-900);
    flex: 1;
}

.logged-supplier[b-sjlqcjdlq3] {
    color: var(--blue-500);
    font-weight: var(--font-weight-medium);
}

.logged-lot[b-sjlqcjdlq3] {
    color: var(--gray-600);
    font-size: var(--font-size-xs);
}

.logged-date[b-sjlqcjdlq3] {
    color: var(--gray-500);
    font-size: var(--font-size-xs);
}

.logged-actions[b-sjlqcjdlq3] {
    display: flex;
    gap: var(--space-2xs);
    margin-left: auto;
}

.logged-actions button[b-sjlqcjdlq3] {
    padding: 0.1rem var(--space-2xs);
    font-size: var(--font-size-xs);
    line-height: 1;
}

.logged-actions .bi[b-sjlqcjdlq3] {
    font-size: var(--font-size-sm);
}

/* Nested receipt panel now uses the shared <SlidingPanel> component (chrome +
   slide/keyframes/header/body live there). Delete confirmation now uses
   Shared/ConfirmDialogPanel.razor (see LAYOUT-PATTERNS.md Pattern 12);
   .confirm-details/.edit-instead used in its ChildContent are global (site.css). */

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .status-row[b-sjlqcjdlq3] {
        flex-wrap: wrap;
        gap: var(--space-2xs);
    }

    .status-row .component-name[b-sjlqcjdlq3] {
        min-width: 60px;
    }

    .logged-item[b-sjlqcjdlq3] {
        flex-direction: column;
        align-items: flex-start;
    }

    .logged-actions[b-sjlqcjdlq3] {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
        margin-top: var(--space-2xs);
    }
}
/* /Pages/Bottling/DailyFlow/Components/PackagingComponent.razor.rz.scp.css */
.packaging-wrapper[b-jubp9vqua9] {
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-lg);
}


.header-actions[b-jubp9vqua9] {
    display: flex;
    gap: var(--space-2xs);
}

.header-actions button[b-jubp9vqua9] {
    font-size: var(--font-size-sm);
    padding: 0.2rem 0.4rem;
}

/* Add/Edit Form */
.packaging-form[b-jubp9vqua9] {
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

.form-row[b-jubp9vqua9] {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.form-row:last-child[b-jubp9vqua9] {
    margin-bottom: 0;
}

.form-group[b-jubp9vqua9] {
    display: flex;
    flex-direction: column;
    min-width: 100px;
}

.form-group.flex-grow[b-jubp9vqua9] {
    flex: 1;
}

.form-group label[b-jubp9vqua9] {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    margin-bottom: 0.15rem;
    font-weight: var(--font-weight-medium);
}

.form-group input[b-jubp9vqua9],
.form-group select[b-jubp9vqua9] {
    font-size: 0.8rem;
    padding: var(--space-2xs) var(--space-sm);
}

.form-actions[b-jubp9vqua9] {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--gray-300);
}

.form-actions button[b-jubp9vqua9] {
    font-size: var(--font-size-sm);
    padding: var(--space-2xs) var(--space-md);
}

/* Content Area */
.packaging-type-section[b-jubp9vqua9] {
    display: flex;
    flex-direction: column;
}

.type-header[b-jubp9vqua9] {
    padding: var(--space-2xs) 0;
}


.type-empty[b-jubp9vqua9] {
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

/* Individual Items — base row hoisted to .nwc-packaging-item (site.css) */
.packaging-item.date-specific[b-jubp9vqua9] {
    background: var(--dailyflow-info-badge-bg);
    border-left: 2px solid var(--blue-500);
}

.packaging-item.run-default[b-jubp9vqua9] {
    background: var(--nwc-bg-muted);
    border-left: 2px solid var(--gray-600);
}

.item-content[b-jubp9vqua9] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.item-name[b-jubp9vqua9] {
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
}

.item-closure-type[b-jubp9vqua9] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-xs);
    background: var(--gray-600);
    color: var(--white);
    text-transform: uppercase;
}

.item-supplier[b-jubp9vqua9] {
    color: var(--gray-600);
}

.item-lot[b-jubp9vqua9] {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.item-qty[b-jubp9vqua9] {
    color: var(--gray-700);
    font-weight: var(--font-weight-medium);
}



.item-actions[b-jubp9vqua9] {
    display: flex;
    gap: var(--space-2xs);
}

.item-actions button[b-jubp9vqua9] {
    padding: 0.1rem var(--space-2xs);
    font-size: var(--font-size-xs);
    line-height: 1;
}

.item-actions .bi[b-jubp9vqua9] {
    font-size: var(--font-size-sm);
}

/* Catalog Mode Toggle */
.mode-toggle[b-jubp9vqua9] {
    min-width: auto;
}

.mode-toggle button[b-jubp9vqua9] {
    font-size: var(--font-size-sm);
    padding: var(--space-2xs) var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

/* Catalog Selection Row */
.catalog-row[b-jubp9vqua9] {
    background: var(--dailyflow-info-badge-bg);
    margin: -0.25rem -0.5rem var(--space-sm) -0.5rem;
    padding: var(--space-sm);
    border-radius: var(--radius-xs);
}

.catalog-empty[b-jubp9vqua9] {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    padding: var(--space-sm);
    background: var(--yellow-100);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
}

.catalog-empty i[b-jubp9vqua9] {
    color: var(--yellow-700);
}

/* From Catalog Indicator */
.from-catalog[b-jubp9vqua9] {
    border-left-color: var(--green-600) !important;
}

.item-catalog[b-jubp9vqua9] {
    color: var(--green-600);
    font-size: var(--font-size-xs);
}

.item-catalog i[b-jubp9vqua9] {
    font-size: var(--font-size-sm);
}


/* ========== Mobile Responsive Breakpoints ========== */

/* Tablet and below */
@media (max-width: 768px) {
    .form-row[b-jubp9vqua9] {
        flex-wrap: wrap;
    }

    .form-group[b-jubp9vqua9] {
        min-width: 80px;
        flex: 1 1 45%;
    }
}

/* Phone */
@media (max-width: 480px) {
    .packaging-wrapper[b-jubp9vqua9] {
        padding: var(--space-sm);
    }

    .form-row[b-jubp9vqua9] {
        flex-direction: column;
    }

    .form-group[b-jubp9vqua9] {
        width: 100%;
        min-width: unset;
    }

    .packaging-item[b-jubp9vqua9] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.35rem;
    }

    .item-content[b-jubp9vqua9] {
        width: 100%;
    }

    .item-actions[b-jubp9vqua9] {
        width: 100%;
        justify-content: flex-end;
    }
}
/* /Pages/Bottling/DailyFlow/Components/ProfileGroupSidebar.razor.rz.scp.css */
.sp-sidebar-header[b-d0g6d6wn2l] {
    padding: 0.4rem var(--space-sm);
}

.sp-sidebar-title[b-d0g6d6wn2l] {
    font-size: var(--font-size-xs);
}

.sp-sidebar-count[b-d0g6d6wn2l] {
    font-size: 0.6rem;
}

.sp-sidebar-body[b-d0g6d6wn2l] {
    padding: 0.35rem;
}

/* Group Cards */
.group-card[b-d0g6d6wn2l] {
    padding: var(--space-sm);
    margin-bottom: 0.35rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: var(--surface-default);
    transition: all 0.15s;
}

.group-card:last-child[b-d0g6d6wn2l] {
    margin-bottom: 0;
}

.group-card:hover[b-d0g6d6wn2l] {
    background: var(--bs-gray-100);
}

.group-card.selected[b-d0g6d6wn2l] {
    border-color: var(--bs-primary);
    border-left: 4px solid var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), 0.15);
}

.group-card.unnamed[b-d0g6d6wn2l] {
    border-left: 3px solid var(--bs-warning);
}

.group-header[b-d0g6d6wn2l] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-weight-medium);
    font-size: 0.8rem;
}

.group-header i[b-d0g6d6wn2l] {
    font-size: var(--font-size-sm);
}

.group-dates[b-d0g6d6wn2l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: 0.35rem;
}

.date-badge[b-d0g6d6wn2l] {
    font-size: var(--font-size-2xs);
    background: var(--bs-gray-200);
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-xs);
}

.date-badge.more[b-d0g6d6wn2l] {
    background: var(--bs-secondary-bg);
    color: var(--bs-secondary);
    font-style: italic;
}

.group-meta[b-d0g6d6wn2l] {
    font-size: var(--font-size-xs);
    color: var(--bs-secondary);
    margin-top: 0.35rem;
}

/* Fingerprint diff tags */
.group-diffs[b-d0g6d6wn2l] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.3rem;
}

.diff-tag[b-d0g6d6wn2l] {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    padding: 0.05rem 0.3rem;
    border-radius: var(--radius-xs);
    line-height: 1.3;
    white-space: nowrap;
}

.diff-tag.diff-missing[b-d0g6d6wn2l] {
    background: var(--yellow-100);
    color: var(--yellow-700);
    border: 1px solid var(--dailyflow-spec-warning-border);
}

.diff-tag.diff-differs[b-d0g6d6wn2l] {
    background: var(--wr-status-info-bg);
    color: var(--wr-status-info-fg);
    border: 1px solid var(--wr-status-info-border);
}

.diff-tag.diff-has[b-d0g6d6wn2l] {
    background: var(--green-100);
    color: var(--wr-status-accepted-fg);
    border: 1px solid var(--dailyflow-diff-has-border);
}

/* Focus states for keyboard nav */
.group-card:focus[b-d0g6d6wn2l],
.group-card:focus-visible[b-d0g6d6wn2l] {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}
/* /Pages/Bottling/DailyFlow/Components/ProfileImageGallery.razor.rz.scp.css */
/* Images Section */
.images-section[b-7d8vef8qe9] {
    margin-top: var(--space-sm);
}

.images-section .nwc-section-header[b-7d8vef8qe9] {
    gap: var(--space-sm);
}

.nwc-section-header i[b-7d8vef8qe9] {
    font-size: var(--font-size-xs);
}

.section[b-7d8vef8qe9] {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.section:last-child[b-7d8vef8qe9] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.empty-images[b-7d8vef8qe9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    color: var(--bs-secondary);
    gap: var(--space-sm);
}

.empty-images i[b-7d8vef8qe9] {
    font-size: 1.5rem;
}

.image-gallery[b-7d8vef8qe9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
}

.image-item[b-7d8vef8qe9] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90px;
    gap: var(--space-2xs);
}

.image-thumbnail[b-7d8vef8qe9] {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.image-thumbnail:hover[b-7d8vef8qe9] {
    transform: scale(1.05);
    box-shadow: var(--dailyflow-hover-shadow);
}

.pdf-thumbnail[b-7d8vef8qe9] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    color: var(--red-500);
}

.pdf-thumbnail i[b-7d8vef8qe9] {
    font-size: 2rem;
}

.image-info[b-7d8vef8qe9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.image-type[b-7d8vef8qe9] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    color: var(--bs-primary);
}

.image-name[b-7d8vef8qe9] {
    font-size: var(--font-size-xs);
    color: var(--bs-secondary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.btn-delete-image[b-7d8vef8qe9] {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--bs-danger);
    color: var(--white);
    font-size: var(--font-size-2xs);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.image-item:hover .btn-delete-image[b-7d8vef8qe9] {
    opacity: 1;
}

.btn-delete-image:hover[b-7d8vef8qe9] {
    background: var(--dailyflow-delete-btn-hover-bg);
}

.upload-controls .form-select[b-7d8vef8qe9] {
    font-size: var(--font-size-sm);
    padding: var(--space-2xs) 1.75rem var(--space-2xs) var(--space-sm);
    min-width: 120px;
}
/* /Pages/Bottling/DailyFlow/Components/ProfileSplitDialog.razor.rz.scp.css */
/* Split Dialog */
.split-dialog[b-5ofdk0ud50] {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md);
}

.split-header[b-5ofdk0ud50] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--bs-primary);
    margin-bottom: var(--space-sm);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.split-body .form-group label[b-5ofdk0ud50] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    color: var(--bs-secondary);
    margin-bottom: 0.2rem;
}

.split-dates[b-5ofdk0ud50] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    max-height: 150px;
    overflow-y: auto;
    padding: 0.35rem;
    background: var(--surface-default);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
}

.split-date-option[b-5ofdk0ud50] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
    padding: var(--space-2xs);
    border-radius: var(--radius-xs);
}

.split-date-option:hover[b-5ofdk0ud50] {
    background: var(--bs-gray-100);
}

.split-footer[b-5ofdk0ud50] {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: var(--space-sm);
}
/* /Pages/Bottling/DailyFlow/Components/WeekNavigatorComponent.razor.rz.scp.css */
.week-navigator-header[b-7kdh4uixva] {
  position: sticky;
  top: 0;
  z-index: var(--z-card-overlay); /* Keep below overlay (1050) */
  background: var(--surface-default);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--dailyflow-header-shadow);
}

/* Toolbar - Back button, tabs, current info */
.week-nav-toolbar[b-7kdh4uixva] {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-200) 100%);
  border-bottom: 1px solid var(--gray-300);
  border-radius: 5px 5px 0 0;
}

/* Tabs */
.week-nav-tabs[b-7kdh4uixva] {
  display: flex;
  gap: var(--space-2xs);
}

.week-nav-tab[b-7kdh4uixva] {
  padding: 0.35rem var(--space-md);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  background: var(--surface-default);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.week-nav-tab:hover[b-7kdh4uixva] {
  background: var(--gray-200);
}

.week-nav-tab.active[b-7kdh4uixva] {
  background: var(--blue-500);
  color: var(--white);
  border-color: var(--blue-500);
}

.tab-badge[b-7kdh4uixva] {
  font-size: var(--font-size-xs);
  padding: 0.1rem 0.35rem;
  border-radius: var(--radius-lg);
  background: var(--date-range-badge-bg);
}

.week-nav-tab.active .tab-badge[b-7kdh4uixva] {
  background: var(--otherline-badge-bg);
}

/* Current appointment info */
.week-nav-current[b-7kdh4uixva] {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--font-size-md);
}

.current-label[b-7kdh4uixva] {
  font-weight: var(--font-weight-semibold);
  color: var(--gray-900);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.current-date[b-7kdh4uixva] {
  color: var(--gray-600);
}

/* Content area */
.week-nav-content[b-7kdh4uixva] {
  padding: var(--space-sm) var(--space-md);
}

/* Week Grid */
.week-nav-grid[b-7kdh4uixva] {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
}

.week-nav-day[b-7kdh4uixva] {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs);
  min-height: 50px;
  background: var(--dailyflow-subtle-bg);
}

.week-nav-day.today[b-7kdh4uixva] {
  border-color: var(--blue-500);
  background: var(--dailyflow-today-tint-bg);
}

.week-nav-day.current[b-7kdh4uixva] {
  border-color: var(--green-600);
  border-width: 2px;
  background: var(--dailyflow-current-tint-bg);
}

.week-nav-day-header[b-7kdh4uixva] {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  color: var(--gray-600);
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 0.15rem;
  margin-bottom: var(--space-2xs);
}

.day-name[b-7kdh4uixva] {
  font-weight: var(--font-weight-semibold);
}

/* Line-based structure */
.week-nav-line[b-7kdh4uixva] {
  display: flex;
  gap: var(--space-2xs);
  align-items: flex-start;
}

.week-nav-line .line-label[b-7kdh4uixva] {
  font-size: 0.6rem;
  font-weight: var(--font-weight-semibold);
  color: var(--gray-600);
  background: var(--gray-200);
  padding: 0.1rem 0.2rem;
  border-radius: 2px;
  min-width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}

.line-appointments[b-7kdh4uixva] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  flex: 1;
}

button.week-nav-appt[b-7kdh4uixva] {
  font-size: var(--font-size-2xs);
  padding: 0.15rem var(--space-2xs);
  border: 1px solid;
  border-radius: var(--radius-xs);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: transform 0.1s ease;
  line-height: 1.2;
}

.week-nav-appt:hover[b-7kdh4uixva] {
  transform: scale(1.02);
  box-shadow: var(--dailyflow-hover-shadow-sm);
}

.week-nav-appt.current[b-7kdh4uixva] {
  box-shadow: 0 0 0 2px var(--blue-500);
  font-weight: var(--font-weight-bold);
}

/* Other lines (W&I, etc.) */
.other-badge[b-7kdh4uixva] {
  font-size: 0.55rem;
  font-weight: var(--font-weight-semibold);
  color: var(--white);
  background: var(--gray-600);
  padding: 0.1rem 0.2rem;
  border-radius: 2px;
  min-width: 1.4rem;
  text-align: center;
  flex-shrink: 0;
}

.week-nav-appt.other[b-7kdh4uixva] {
  flex: 1;
}

/* Show more/less buttons */
button.btn-show-more[b-7kdh4uixva],
button.btn-show-less[b-7kdh4uixva] {
  font-size: 0.6rem;
  padding: 0.1rem var(--space-2xs);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-xs);
  background: var(--gray-50);
  color: var(--blue-500);
  cursor: pointer;
  line-height: 1.2;
}

button.btn-show-more:hover[b-7kdh4uixva],
button.btn-show-less:hover[b-7kdh4uixva] {
  background: var(--gray-200);
}

button.btn-show-less[b-7kdh4uixva] {
  width: 100%;
  text-align: center;
  margin-top: 0.15rem;
}

/* Recent List */
.recent-nav-list[b-7kdh4uixva] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

button.recent-nav-item[b-7kdh4uixva] {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem var(--space-sm);
  background: var(--gray-50);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.8rem;
  text-align: left;
  transition: background 0.15s ease;
  line-height: 1.2;
}

.recent-nav-item:hover[b-7kdh4uixva] {
  background: var(--gray-200);
}

.recent-nav-item.current[b-7kdh4uixva] {
  background: var(--green-100);
  border-color: var(--green-600);
}

.recent-date[b-7kdh4uixva] {
  font-weight: var(--font-weight-semibold);
  color: var(--gray-700);
}

.recent-name[b-7kdh4uixva] {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.week-nav-empty[b-7kdh4uixva] {
  color: var(--gray-600);
  font-size: var(--font-size-md);
  text-align: center;
  padding: var(--space-sm);
}

/* Search */
.week-nav-search[b-7kdh4uixva] {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--gray-300);
  background: var(--dailyflow-subtle-bg);
  border-radius: 0 0 5px 5px;
  position: relative;
}

.search-input-wrapper[b-7kdh4uixva] {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface-default);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
}

.search-input-wrapper i[b-7kdh4uixva] {
  color: var(--gray-600);
}

.search-input-wrapper input[b-7kdh4uixva] {
  border: none;
  outline: none;
  flex: 1;
  font-size: var(--font-size-md);
}

.search-input-wrapper input:focus[b-7kdh4uixva] {
  box-shadow: none;
}

.search-clear[b-7kdh4uixva] {
  background: none;
  border: none;
  color: var(--gray-600);
  cursor: pointer;
  padding: 0.15rem;
  display: flex;
  align-items: center;
}

.search-clear:hover[b-7kdh4uixva] {
  color: var(--red-500);
}

.search-results[b-7kdh4uixva] {
  position: absolute;
  top: 100%;
  left: var(--space-md);
  right: var(--space-md);
  background: var(--surface-default);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-sm);
  box-shadow: var(--dailyflow-search-results-shadow);
  z-index: var(--z-dropdown-backdrop);
  max-height: 300px;
  overflow-y: auto;
}

button.search-result-item[b-7kdh4uixva] {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-bottom: 1px solid var(--nwc-bg-muted);
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: var(--font-size-md);
  line-height: 1.2;
}

.search-result-item:hover[b-7kdh4uixva] {
  background: var(--gray-50);
}

.search-result-item:last-child[b-7kdh4uixva] {
  border-bottom: none;
}

.result-date[b-7kdh4uixva] {
  font-weight: var(--font-weight-semibold);
  color: var(--blue-500);
  min-width: 3rem;
}

.result-name[b-7kdh4uixva] {
  flex: 1;
  font-weight: var(--font-weight-medium);
}

.result-client[b-7kdh4uixva] {
  color: var(--gray-600);
  font-size: 0.8rem;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-more[b-7kdh4uixva] {
  padding: var(--space-sm);
  text-align: center;
  color: var(--gray-600);
  font-size: 0.8rem;
  background: var(--gray-50);
}

/* Action buttons - Collapse/Sidebar toggles */
.week-nav-actions[b-7kdh4uixva] {
  display: flex;
  gap: 0.35rem;
  margin-left: var(--space-sm);
}

.week-nav-actions .btn[b-7kdh4uixva] {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: var(--space-2xs) var(--space-sm);
  font-size: 0.8rem;
}

.week-nav-actions .btn i[b-7kdh4uixva] {
  font-size: var(--font-size-base);
}

.week-nav-actions .action-label[b-7kdh4uixva] {
  display: none;
}

/* Show labels on wider screens */
@media (min-width: 1200px) {
  .week-nav-actions .action-label[b-7kdh4uixva] {
    display: inline;
  }
}

/* ========================================
   Collapsed Header State
   ======================================== */
.week-navigator-header.collapsed[b-7kdh4uixva] {
  margin-bottom: var(--space-sm);
}

.week-navigator-header.collapsed .week-nav-toolbar[b-7kdh4uixva] {
  border-bottom: none;
  border-radius: 5px;
}

/* Smooth transition for collapse/expand */
.week-nav-content[b-7kdh4uixva],
.week-nav-search[b-7kdh4uixva] {
  transition: all 0.2s ease;
}

/* ========================================
   Mobile Responsive Styles
   ======================================== */

@media (max-width: 768px) {
  .week-nav-toolbar[b-7kdh4uixva] {
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: 0.4rem var(--space-sm);
  }

  .week-nav-tabs[b-7kdh4uixva] {
    order: 3;
    width: 100%;
  }

  .week-nav-tab[b-7kdh4uixva] {
    flex: 1;
    justify-content: center;
    font-size: var(--font-size-sm);
    padding: var(--space-2xs) var(--space-sm);
  }

  .week-nav-current[b-7kdh4uixva] {
    margin-left: 0;
    flex: 1;
  }

  .current-label[b-7kdh4uixva] {
    max-width: 120px;
    font-size: 0.8rem;
  }

  /* Week grid - horizontal scroll */
  .week-nav-content[b-7kdh4uixva] {
    padding: 0.35rem var(--space-sm);
    overflow-x: auto;
  }

  .week-nav-grid[b-7kdh4uixva] {
    display: flex;
    gap: 0.35rem;
    min-width: max-content;
  }

  .week-nav-day[b-7kdh4uixva] {
    min-width: 100px;
    flex-shrink: 0;
  }

  /* Hide sidebar toggle on mobile (sidebar already hidden) */
  .week-nav-actions button:last-child[b-7kdh4uixva] {
    display: none;
  }
}

@media (max-width: 480px) {
  .week-nav-toolbar[b-7kdh4uixva] {
    padding: 0.35rem;
  }

  .week-nav-toolbar > .btn[b-7kdh4uixva] {
    padding: 0.2rem 0.4rem;
    font-size: var(--font-size-sm);
  }

  .week-nav-current[b-7kdh4uixva] {
    font-size: var(--font-size-sm);
  }

  .current-label[b-7kdh4uixva] {
    max-width: 100px;
  }

  .current-date[b-7kdh4uixva] {
    display: none;
  }

  .week-nav-day[b-7kdh4uixva] {
    min-width: 85px;
  }

  .week-nav-day-header[b-7kdh4uixva] {
    font-size: var(--font-size-2xs);
  }

  button.week-nav-appt[b-7kdh4uixva] {
    font-size: 0.6rem;
    padding: 0.1rem 0.2rem;
  }

  /* Search - more compact */
  .week-nav-search[b-7kdh4uixva] {
    padding: 0.35rem var(--space-sm);
  }

  .search-input-wrapper[b-7kdh4uixva] {
    padding: 0.2rem 0.35rem;
  }
}
/* /Pages/Bottling/DailyFlow/DailyFlowPage.razor.rz.scp.css */
/* All DailyFlow content CSS moved to DailyFlowPanelContent.razor.css */
/* /Pages/Bottling/DailyFlow/DailyFlowPanelContent.razor.rz.scp.css */


/* .left-column/.right-column removed 2026-07-08 — confirmed dead CSS
   (Pattern 6, Sidebar Split): zero <div class="left-column"|"right-column">
   markup anywhere in the repo. An early two-pane attempt superseded by the
   live .dailyflow-layout/.notepad-side-panel mechanic at the bottom of this
   file, never deleted when replaced. Independently confirmed twice — an
   earlier CSS-token-migration session reached the same conclusion (see
   wwwroot/css/tokens.css's DailyFlow dead-CSS comment) and this session's
   markup grep repeated it. See LAYOUT-PATTERNS.md Pattern 6. */
.card[b-vuw5d64s4z] {
  display: flex;
  flex-direction: column;
  margin: 3px;
  border: 1px solid var(--nwc-border);
  box-shadow: var(--dailyflow-legacy-card-shadow);
  /*width: calc(33.333% - 6px);*/ /* Adjust width to fit within the container considering margin */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Collapsible Sections */

/* .section-header base row hoisted to .nwc-collapse-header (site.css) */
.section-header:hover[b-vuw5d64s4z] {
    background: linear-gradient(to bottom, var(--gray-200), var(--gray-300));
}

.section-title[b-vuw5d64s4z] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--gray-700);
}

.section-header i[b-vuw5d64s4z] {
    color: var(--gray-600);
    font-size: var(--font-size-md);
    transition: transform 0.2s ease;
}

/* ============================================
   Smart Reordering Layout - Collapsed Toolbar
   ============================================ */

/* Collapsed Sections Toolbar */
.collapsed-toolbar[b-vuw5d64s4z] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: linear-gradient(to bottom, var(--gray-50), var(--gray-200));
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--dailyflow-header-shadow);
}

/* Collapsed Tab Button */
.collapsed-tab[b-vuw5d64s4z] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-default);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 44px; /* iPad touch target */
}

.collapsed-tab:hover[b-vuw5d64s4z] {
    background: var(--nwc-bg-muted);
    border-color: var(--gray-500);
}

.collapsed-tab:active[b-vuw5d64s4z] {
    transform: scale(0.98);
}

/* Run Details Tab - special styling */
.collapsed-tab.rundetails-tab[b-vuw5d64s4z] {
    background: linear-gradient(to bottom, var(--dailyflow-rundetails-bg-start), var(--dailyflow-rundetails-bg-end));
    border-color: var(--dailyflow-rundetails-border);
    color: var(--dailyflow-rundetails-fg);
    flex-grow: 1;
    max-width: 400px;
}

.collapsed-tab.rundetails-tab:hover[b-vuw5d64s4z] {
    background: linear-gradient(to bottom, var(--dailyflow-rundetails-hover-bg-start), var(--dailyflow-rundetails-hover-bg-end));
}

.collapsed-tab .tab-label[b-vuw5d64s4z] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.collapsed-tab i.bi-chevron-down[b-vuw5d64s4z] {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* Status Indicator Dot */
.status-dot[b-vuw5d64s4z] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Status Colors */
.collapsed-tab.status-alarm[b-vuw5d64s4z] {
    border-color: var(--dailyflow-status-alarm-border);
}

.collapsed-tab.status-alarm .status-dot[b-vuw5d64s4z] {
    background: var(--red-500);
    box-shadow: var(--dailyflow-status-alarm-glow);
}

.collapsed-tab.status-accepted[b-vuw5d64s4z] {
    border-color: var(--dailyflow-status-accepted-border);
}

.collapsed-tab.status-accepted .status-dot[b-vuw5d64s4z] {
    background: var(--green-600);
    box-shadow: var(--dailyflow-status-accepted-glow);
}

.collapsed-tab.status-waiver[b-vuw5d64s4z] {
    border-color: var(--dailyflow-status-waiver-border);
}

.collapsed-tab.status-waiver .status-dot[b-vuw5d64s4z] {
    background: var(--orange-500);
    box-shadow: var(--dailyflow-status-waiver-glow);
}

/* Expanded Sections Container - Grid allows side-by-side cards */
.expanded-sections[b-vuw5d64s4z] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--space-sm);
    align-items: start; /* Cards take natural height, not stretch */
}

/* Section Card */
.section-card[b-vuw5d64s4z] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--nwc-border);
    border-radius: var(--radius-md);
    box-shadow: var(--dailyflow-section-card-shadow);
    background: var(--surface-default);
    overflow: hidden;
    min-width: 0; /* Prevent grid blowout */
}

/* Large sections that should span full width */
.section-card.full-width[b-vuw5d64s4z] {
    grid-column: 1 / -1;
}

/* Wide sections - span 2 columns when space allows */
.section-card.wide[b-vuw5d64s4z] {
    grid-column: span 2;
    min-width: 500px;
}

@media (max-width: 1024px) {
    .section-card.wide[b-vuw5d64s4z] {
        grid-column: 1 / -1; /* Full width on smaller screens */
        min-width: 0;
    }
}

.section-card .section-content[b-vuw5d64s4z] {
    padding: var(--space-sm);
}

/* ============================================
   Responsive - iPad and Mobile Support
   ============================================ */

/* iPad Portrait and smaller */
@media (max-width: 1024px) {
    .collapsed-toolbar[b-vuw5d64s4z] {
        padding: 0.4rem;
        gap: 0.4rem;
    }

    .collapsed-tab[b-vuw5d64s4z] {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
    }

    .collapsed-tab .tab-label[b-vuw5d64s4z] {
        max-width: 150px;
    }

    .collapsed-tab.rundetails-tab[b-vuw5d64s4z] {
        max-width: 100%;
        flex-basis: 100%;
    }
}

/* iPad Landscape */
@media (max-width: 1366px) and (min-width: 1025px) {
    .collapsed-tab .tab-label[b-vuw5d64s4z] {
        max-width: 180px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .collapsed-toolbar[b-vuw5d64s4z] {
        flex-direction: column;
    }

    .collapsed-tab[b-vuw5d64s4z] {
        width: 100%;
        justify-content: space-between;
    }

    .collapsed-tab.rundetails-tab[b-vuw5d64s4z] {
        max-width: none;
    }

    .collapsed-tab .tab-label[b-vuw5d64s4z] {
        max-width: none;
        flex-grow: 1;
    }

    /* Single column on mobile */
    .expanded-sections[b-vuw5d64s4z] {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Notepad Side Panel — NOT part of the shared .nwc-sidebar-split-main/-aside
   family (site.css) despite the visual resemblance to DailyFlowSlidingPanel/
   DailyFlowLayout's main+aside split. Different mechanic, not just a
   different width: this aside is a fixed 400px pane added/removed from the
   DOM entirely (@if (_showNotepad)), with a fluid (flex:1 1 auto, not 75%)
   main — forcing it onto the percentage-based shared classes would be a
   real behavior change. See LAYOUT-PATTERNS.md Pattern 6.
   ═══════════════════════════════════════════════════════════════ */

.dailyflow-layout[b-vuw5d64s4z] {
    display: flex;
    gap: 0;
    min-height: 0;
}

.dailyflow-layout > .dailyflow-sections[b-vuw5d64s4z] {
    flex: 1 1 auto;
    min-width: 0;
    transition: flex 0.2s ease;
}

.dailyflow-layout.notepad-open > .dailyflow-sections[b-vuw5d64s4z] {
    flex: 1 1 0;
}

.notepad-side-panel[b-vuw5d64s4z] {
    flex: 0 0 400px;
    max-width: 400px;
    border-left: 1px solid var(--gray-300);
    background: var(--gray-50);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    position: sticky;
    top: 0;
    overflow: hidden;
}

.notepad-side-header[b-vuw5d64s4z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-300);
    background: var(--surface-default);
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
}

.notepad-side-header span[b-vuw5d64s4z] {
    flex: 1;
}

.notepad-close-btn[b-vuw5d64s4z] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--gray-600);
    font-size: 14px;
}

.notepad-close-btn:hover[b-vuw5d64s4z] {
    background: var(--gray-200);
    color: var(--gray-900);
}

[b-vuw5d64s4z] .copilot-inline {
    position: static !important;
    width: 100% !important;
    height: 100% !important;
    box-shadow: none !important;
    border: none !important;
}

@media (max-width: 992px) {
    .notepad-side-panel[b-vuw5d64s4z] {
        flex: 0 0 320px;
        max-width: 320px;
    }
}

@media (max-width: 768px) {
    .dailyflow-layout.notepad-open[b-vuw5d64s4z] {
        flex-direction: column;
    }

    .notepad-side-panel[b-vuw5d64s4z] {
        flex: 0 0 auto;
        max-width: 100%;
        height: 50vh;
        position: static;
        border-left: none;
        border-top: 1px solid var(--gray-300);
    }
}
/* /Pages/Bottling/DailyFlow/DailyFlowSlidingPanel.razor.rz.scp.css */
/* DailyFlow layout mechanics now come from global .nwc-pane-row /
   .nwc-sidebar-split-main / .nwc-sidebar-split-aside (site.css) — the
   duplication this comment used to explain (working around Blazor CSS
   isolation's component-scope boundary) is no longer needed since a global
   unscoped class doesn't care which component's scope authored the markup.
   Only this instance's own transition timing remains local (a genuine
   delta from DailyFlowLayout's — see site.css's own comment on the shared
   class). See LAYOUT-PATTERNS.md Pattern 6. */

[b-vhc7lki99h] .dailyflow-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

[b-vhc7lki99h] .dailyflow-main {
  transition: flex 0.2s ease;
}

[b-vhc7lki99h] .dailyflow-sidebar {
  transition: all 0.2s ease;
}
/* /Pages/Bottling/DailyFlow/Panels/BottlingCOLAPanel.razor.rz.scp.css */
/* BottlingCOLAPanel — domain-specific overrides only.
   Shared layout rules live in wwwroot/css/panel-layout.css (sp- classes). */

/* Bond mismatch warning on COLA cards */
.sp-card.bond-mismatch[b-gs2uwh0zb9] {
    border-color: var(--dailyflow-spec-warning-border);
    background: var(--dailyflow-mismatch-bg);
}

.sp-card.bond-mismatch:hover[b-gs2uwh0zb9] {
    border-color: var(--labqc-warning-icon-fg);
}

/* COLA card wrapper (for badge positioning) */
.cola-card-wrapper[b-gs2uwh0zb9] {
    position: relative;
}

/* Bond mismatch badge */
.cola-card-badge[b-gs2uwh0zb9] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--dailyflow-spec-warning-border);
    color: var(--black);
    font-size: 0.6rem;
    padding: 2px 4px;
    border-radius: var(--radius-xs);
    font-weight: var(--font-weight-bold);
}

/* TTB ID in card info */
.sp-card-info .ttb-id[b-gs2uwh0zb9] {
    font-family: monospace;
    font-size: var(--font-size-2xs);
    color: var(--nwc-text-muted);
    margin-bottom: 2px;
}

/* Zoom hint on preview images (bottom-right, always visible) */
.sp-preview-image-wrapper .zoom-hint[b-gs2uwh0zb9] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--dailyflow-zoom-hint-bg);
    color: var(--white);
    padding: 2px 5px;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-2xs);
}

/* Hover Preview Overlay — fixed centered overlay on card hover */
.hover-preview-overlay[b-gs2uwh0zb9] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: var(--z-crop-overlay);
    background: var(--surface-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--dailyflow-preview-overlay-shadow);
    padding: 12px;
    pointer-events: none;
}

.hover-preview-overlay img[b-gs2uwh0zb9] {
    max-width: 400px;
    max-height: 500px;
    object-fit: contain;
    border-radius: var(--radius-lg);
    display: block;
}

/* Smart Suggestion Banner */
.suggestion-banner[b-gs2uwh0zb9] {
    background: var(--dailyflow-suggestion-banner-gradient);
    border: 1px solid var(--dailyflow-suggestion-banner-border);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
    margin-bottom: 12px;
}

.suggestion-header[b-gs2uwh0zb9] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--dailyflow-suggestion-accent);
    margin-bottom: 8px;
}

.suggestion-dismiss[b-gs2uwh0zb9] {
    margin-left: auto;
    background: transparent;
    border: none;
    color: var(--gray-600);
    cursor: pointer;
    padding: 2px 6px;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-md);
}

.suggestion-dismiss:hover[b-gs2uwh0zb9] {
    background: var(--dailyflow-dismiss-hover-bg);
    color: var(--dailyflow-dismiss-hover-fg);
}

.suggestion-row[b-gs2uwh0zb9] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    background: var(--surface-default);
    margin-bottom: 4px;
    border: 1px solid var(--dailyflow-suggestion-row-border);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.suggestion-row:last-child[b-gs2uwh0zb9] {
    margin-bottom: 0;
}

.suggestion-row:hover[b-gs2uwh0zb9] {
    border-color: var(--dailyflow-suggestion-accent);
    box-shadow: 0 1px 4px rgba(var(--dailyflow-suggestion-accent-rgb), 0.15);
}

.suggestion-thumb[b-gs2uwh0zb9] {
    width: 40px;
    height: 50px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--dailyflow-thumb-placeholder-bg);
}

.no-image-mini[b-gs2uwh0zb9] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dailyflow-no-image-fg);
    font-size: var(--font-size-xs);
}

.suggestion-info[b-gs2uwh0zb9] {
    flex: 1;
    min-width: 0;
}

.suggestion-brand[b-gs2uwh0zb9] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-detail[b-gs2uwh0zb9] {
    font-size: var(--font-size-xs);
    color: var(--dailyflow-bond-number-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.suggestion-match-summary[b-gs2uwh0zb9] {
    font-size: var(--font-size-2xs);
    color: var(--dailyflow-empty-fg);
    font-style: italic;
}

.suggestion-confidence[b-gs2uwh0zb9] {
    font-size: var(--font-size-xs);
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    background: var(--dailyflow-confidence-bg);
    color: var(--green-700);
    flex-shrink: 0;
}

.suggestion-confidence.low[b-gs2uwh0zb9] {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.suggestion-confidence.high[b-gs2uwh0zb9] {
    background: var(--dailyflow-confidence-high-bg);
    color: var(--green-700);
}

.suggestion-apply-btn[b-gs2uwh0zb9] {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    padding: 3px 10px;
}
/* /Pages/Bottling/DailyFlow/Panels/BottlingLabelPanel.razor.rz.scp.css */
/* BottlingLabelPanel — domain-specific overrides only.
   Shared layout rules live in wwwroot/css/panel-layout.css (sp- classes). */

/* Dirty state on date cards (unsaved label changes) */
.sp-date-card.dirty[b-v56vg67tsb] {
    border-left: 4px solid var(--bs-warning);
}

.sp-date-card.selected.dirty[b-v56vg67tsb] {
    border-left: 4px solid var(--bs-warning);
}

/* Clear button on date cards */
.date-clear-btn[b-v56vg67tsb] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: transparent;
    border: none;
    color: var(--bs-secondary);
    padding: 2px 6px;
    font-size: var(--font-size-md);
    cursor: pointer;
    border-radius: var(--radius-xs);
    line-height: 1;
    transition: all 0.15s ease;
}

.date-clear-btn:hover[b-v56vg67tsb] {
    background: var(--dailyflow-danger-hover-bg);
    color: var(--red-500);
}

/* Label card wrapper */
.label-card-wrapper[b-v56vg67tsb] {
    position: relative;
}

/* Thumbnail needs position:relative for zoom button */
.sp-card-thumbnail[b-v56vg67tsb] {
    position: relative;
}

/* Zoom button on card thumbnails */
.thumbnail-zoom-btn[b-v56vg67tsb] {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: var(--dailyflow-zoom-hint-bg);
    color: var(--white);
    border: none;
    border-radius: var(--radius-sm);
    padding: 2px 6px;
    font-size: var(--font-size-xs);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sp-card-thumbnail:hover .thumbnail-zoom-btn[b-v56vg67tsb] {
    opacity: 1;
}

.thumbnail-zoom-btn:hover[b-v56vg67tsb] {
    background: var(--dailyflow-zoom-hint-hover-bg);
}

/* Dirty indicator in footer */
.dirty-indicator[b-v56vg67tsb] {
    font-size: var(--font-size-sm);
    color: var(--bs-warning);
    margin-right: auto;
    opacity: 0;
    transition: opacity 0.2s;
}

.dirty-indicator.visible[b-v56vg67tsb] {
    opacity: 1;
}

.dirty-indicator i[b-v56vg67tsb] {
    font-size: 0.5rem;
    margin-right: var(--space-2xs);
}

/* Preview images — narrower than default (180px vs 200px) */
.sp-preview-images[b-v56vg67tsb] {
    flex: 0 0 180px;
    max-height: 280px;
}

/* Zoom hint on preview images — centered with opacity transition */
.sp-preview-image-wrapper .zoom-hint[b-v56vg67tsb] {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dailyflow-zoom-hint-bg-strong);
    color: var(--white);
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.sp-preview-image-wrapper:hover .zoom-hint[b-v56vg67tsb] {
    opacity: 1;
}

/* Spec label — narrower than default (90px vs 95px) */
.sp-spec-label[b-v56vg67tsb] {
    min-width: 90px;
}

/* Lightbox Overlay */
.lightbox-overlay[b-v56vg67tsb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--dailyflow-lightbox-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--dailyflow-z-lightbox);
    cursor: pointer;
}

.lightbox-content[b-v56vg67tsb] {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.lightbox-content img[b-v56vg67tsb] {
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--radius-lg);
    box-shadow: var(--dailyflow-lightbox-img-shadow);
}

.lightbox-close-btn[b-v56vg67tsb] {
    position: absolute;
    top: -40px;
    right: -40px;
    background: var(--dailyflow-header-tag-bg);
    color: var(--white);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.lightbox-close-btn:hover[b-v56vg67tsb] {
    background: var(--dailyflow-lightbox-close-hover-bg);
}

.lightbox-hint[b-v56vg67tsb] {
    color: var(--dailyflow-lightbox-hint-fg);
    font-size: 0.8rem;
    margin-top: var(--space-lg);
}

/* Confirmation Dialog — now Shared/ConfirmDialogPanel.razor, see
   LAYOUT-PATTERNS.md Pattern 12. */

/* Mobile */
@media (max-width: 768px) {
    .lightbox-close-btn[b-v56vg67tsb] {
        top: 10px;
        right: 10px;
    }
}

/* Suggestion info bar with dismiss link */
.suggestion-info-bar[b-v56vg67tsb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 10px;
    background: var(--dailyflow-suggestion-info-bar-bg);
    border: 1px solid var(--dailyflow-suggestion-info-bar-border);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 0.8rem;
    color: var(--dailyflow-suggestion-accent);
}

.suggestion-info-bar span[b-v56vg67tsb] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-dismiss[b-v56vg67tsb] {
    background: none;
    border: none;
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.btn-dismiss:hover[b-v56vg67tsb] {
    color: var(--gray-700);
}

/* Suggested label card highlight */
[b-v56vg67tsb] .sp-card.suggested {
    border-color: var(--dailyflow-suggested-accent);
    box-shadow: 0 0 0 1px var(--dailyflow-suggested-accent), 0 2px 8px rgba(var(--dailyflow-suggestion-accent-rgb), 0.15);
    position: relative;
}

.suggestion-badge[b-v56vg67tsb] {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    background: var(--dailyflow-suggestion-badge-gradient);
    color: var(--white);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    z-index: var(--z-base);
    line-height: 1;
}
/* /Pages/Bottling/DailyFlow/Panels/BottlingWaiverPanel.razor.rz.scp.css */
.bottling-waiver-list-container[b-znxo78patm] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--nwc-border);
    margin-bottom: 10px;
}

.bottling-waiver-item[b-znxo78patm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--nwc-border);
}
/* /Pages/Bottling/DailyFlow/Panels/BottlingWinemaking.razor.rz.scp.css */
/* Header: title + date range */
.wm-header[b-zk7lc1wgb4] {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.wm-date-range[b-zk7lc1wgb4] {
    font-size: var(--font-size-md);
    color: var(--bs-secondary);
}

.wm-winelot[b-zk7lc1wgb4] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-md);
    color: var(--nwc-text);
}

/* Todo section */
.wm-todo-header[b-zk7lc1wgb4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-top: var(--space-sm);
}

.wm-todo-list[b-zk7lc1wgb4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 400px;
    overflow-y: auto;
}

.wm-todo-item[b-zk7lc1wgb4] {
    border: 1px solid var(--bs-border-color, var(--gray-300));
    border-radius: var(--radius-md);
    padding: var(--space-md);
    background: var(--surface-default);
}

.wm-todo-row[b-zk7lc1wgb4] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.wm-todo-row textarea[b-zk7lc1wgb4] {
    flex: 1;
    min-height: 44px;
    font-size: 16px;
    resize: vertical;
}

.wm-todo-row .form-check-input[b-zk7lc1wgb4] {
    margin-top: 0.65rem;
    min-width: 20px;
    min-height: 20px;
}

.wm-todo-dates[b-zk7lc1wgb4] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.wm-todo-dates .nwc-form-field[b-zk7lc1wgb4] {
    flex: 1;
    min-width: 120px;
}

@media (max-width: 576px) {
    .wm-todo-dates[b-zk7lc1wgb4] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Pages/Bottling/DailyFlow/Panels/BottlingWinemakingPanel.razor.rz.scp.css */
/* Touch-friendly footer buttons */
.sp-footer .btn[b-o812laxbnr] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: var(--space-sm) var(--space-lg);
}

.sp-footer .btn i[b-o812laxbnr] {
    font-size: var(--font-size-lg);
}

@media (max-width: 576px) {
    .sp-footer .btn[b-o812laxbnr] {
        flex: 1;
        justify-content: center;
        min-height: 48px;
    }
}
/* /Pages/Bottling/DailyFlow/Panels/ChangeHistoryPanel.razor.rz.scp.css */
.chp-subtitle[b-yfewvdtyi1] {
    margin-left: 0.5rem;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--dailyflow-timeline-muted);
}

.chp-body[b-yfewvdtyi1] {
    padding: 0.75rem 1rem 1.25rem;
    overflow-y: auto;
}
/* /Pages/Bottling/DailyFlow/Panels/PackagingProfilePanel.razor.rz.scp.css */
/* Sidebar layout override — 240px instead of shared 260px.
   minmax(0,1fr): the body column must shrink below content width or wide form
   rows push the whole layout into horizontal scroll. */
.sp-sidebar-layout[b-yzodvfqtjb] {
    grid-template-columns: 240px minmax(0, 1fr);
}

/* sp-body/sp-footer overrides */
.sp-body[b-yzodvfqtjb] {
    padding: var(--space-sm) var(--space-md);
}

.sp-footer[b-yzodvfqtjb] {
    gap: 0.35rem;
    padding: var(--space-sm) var(--space-md);
}

.dirty-indicator[b-yzodvfqtjb] {
    font-size: var(--font-size-xs);
    color: var(--bs-warning);
    margin-right: auto;
    opacity: 0;
    transition: opacity 0.2s;
}

.dirty-indicator.visible[b-yzodvfqtjb] {
    opacity: 1;
}

.dirty-indicator i[b-yzodvfqtjb] {
    font-size: 0.5rem;
    margin-right: var(--space-2xs);
}

/* Header context (shown in SlidingPanel header) */
.header-context[b-yzodvfqtjb] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    color: var(--bs-secondary);
}

/* Section styling */
.section[b-yzodvfqtjb] {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.section:last-child[b-yzodvfqtjb] {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.nwc-section-header i[b-yzodvfqtjb] {
    font-size: var(--font-size-xs);
}

.readonly-hint[b-yzodvfqtjb] {
    font-size: 0.55rem;
    font-weight: var(--font-weight-normal);
    color: var(--bs-secondary);
    text-transform: none;
    letter-spacing: normal;
    margin-left: 0.35rem;
}

/* Name Section — the profile name reads bigger than the spec fields */
.name-section input[b-yzodvfqtjb] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
}

.hint-text[b-yzodvfqtjb] {
    display: block;
    font-size: var(--font-size-2xs);
    color: var(--bs-info);
    margin-top: var(--space-2xs);
}

.hint-text i[b-yzodvfqtjb] {
    margin-right: 0.2rem;
}

/* Identity Section */
.identity-section[b-yzodvfqtjb] {
    background: var(--bs-gray-100);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.identity-grid[b-yzodvfqtjb] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
}

.identity-item.span-2[b-yzodvfqtjb] {
    grid-column: span 2;
}

.identity-label[b-yzodvfqtjb] {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--bs-secondary);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.identity-value[b-yzodvfqtjb] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--bs-body-color);
}

.identity-value.highlight[b-yzodvfqtjb] {
    color: var(--bs-success);
    font-weight: var(--font-weight-semibold);
}

/* Operational Section */
.operational-section[b-yzodvfqtjb] {
    padding-top: var(--space-2xs);
}

.subsection[b-yzodvfqtjb] {
    margin-bottom: var(--space-sm);
}

.subsection:last-child[b-yzodvfqtjb] {
    margin-bottom: 0;
}

.subsection-header[b-yzodvfqtjb] {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    color: var(--bs-secondary);
    margin-bottom: var(--space-2xs);
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.subsection-header i[b-yzodvfqtjb] {
    font-size: var(--font-size-2xs);
}

/* Checkbox cells — plain by design (checkbox trap: <FormField> hides native checkboxes) */
.chk-group[b-yzodvfqtjb] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 0.1rem;
}

.form-check[b-yzodvfqtjb] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
}

.form-check-input[b-yzodvfqtjb] {
    width: 0.85rem;
    height: 0.85rem;
    margin: 0;
}

.form-check-label[b-yzodvfqtjb] {
    font-size: var(--font-size-xs);
    color: var(--bs-body-color);
    font-weight: var(--font-weight-medium);
}

/* Number inputs - hide spinners */
input[type="number"][b-yzodvfqtjb] {
    -moz-appearance: textfield;
}

input[type="number"][b-yzodvfqtjb]::-webkit-outer-spin-button,
input[type="number"][b-yzodvfqtjb]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Actions Section */
.actions-section[b-yzodvfqtjb] {
    display: flex;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
}

/* sp-empty override */
.sp-empty[b-yzodvfqtjb] {
    font-size: var(--font-size-md);
}

.sp-empty i[b-yzodvfqtjb] {
    font-size: 1.5rem;
}

/* Completeness Indicator */
.completeness-section[b-yzodvfqtjb] {
    margin-bottom: var(--space-sm);
    padding: 0.4rem var(--space-sm);
    background: var(--bs-gray-100);
    border-radius: var(--radius-sm);
}

.completeness-bar[b-yzodvfqtjb] {
    height: 4px;
    background: var(--bs-gray-300);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.35rem;
}

.completeness-fill[b-yzodvfqtjb] {
    height: 100%;
    background: linear-gradient(90deg, var(--bs-success) 0%, var(--bs-primary) 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

.completeness-items[b-yzodvfqtjb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.completeness-item[b-yzodvfqtjb] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.6rem;
    padding: 0.15rem 0.35rem;
    border-radius: var(--radius-xs);
    background: var(--surface-default);
    border: 1px solid var(--bs-border-color);
    transition: all 0.15s;
}

.completeness-item.complete[b-yzodvfqtjb] {
    color: var(--bs-success);
    border-color: var(--bs-success-border-subtle);
    background: var(--bs-success-bg-subtle);
}

.completeness-item.incomplete[b-yzodvfqtjb] {
    color: var(--bs-secondary);
}

.completeness-item i[b-yzodvfqtjb] {
    font-size: 0.55rem;
}

/* .run-context-grid/-label/-value removed — dead code (section gone from markup, 0 refs) */

/* ── Mobile responsive ── */
@media (max-width: 768px) {
    .sp-sidebar-layout[b-yzodvfqtjb] {
        grid-template-columns: 1fr;
    }

    .sp-sidebar[b-yzodvfqtjb] {
        max-height: 200px;
    }

    .identity-grid[b-yzodvfqtjb] {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* /Pages/Bottling/DailyFlow/Panels/ProductionReportPreflightPanel.razor.rz.scp.css */
/* Preflight Panel — domain-specific styles */

.preflight-section[b-mpoxdwfsad] {
    padding: var(--space-md);
}

.preflight-notice[b-mpoxdwfsad] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--yellow-100);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    margin-bottom: var(--space-lg);
    line-height: 1.4;
}

.preflight-notice.info[b-mpoxdwfsad] {
    background: var(--wr-status-info-bg);
}

.preflight-notice i[b-mpoxdwfsad] {
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* Section heading override (extends sp-section-title) */
.preflight-heading[b-mpoxdwfsad] {
    color: var(--blue-500);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.preflight-heading i[b-mpoxdwfsad] {
    font-size: var(--font-size-md);
}

/* Profile list */
.profile-list[b-mpoxdwfsad] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--space-lg);
}

.profile-option[b-mpoxdwfsad] {
    padding: var(--space-sm) var(--space-md);
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

.profile-option:hover[b-mpoxdwfsad] {
    border-color: var(--blue-500);
    background: var(--dailyflow-profile-hover-bg);
}

.profile-option.selected[b-mpoxdwfsad] {
    border-color: var(--blue-500);
    background: var(--blue-100);
}

.profile-option-top[b-mpoxdwfsad] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-md);
}

.profile-name[b-mpoxdwfsad] {
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
}

.profile-cases[b-mpoxdwfsad] {
    color: var(--gray-600);
    font-size: 0.8rem;
}

.profile-option-bottom[b-mpoxdwfsad] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    margin-top: 0.2rem;
}

.separator[b-mpoxdwfsad] {
    color: var(--gray-500);
}

/* Missing fields form */
.fields-group[b-mpoxdwfsad] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.field-row label[b-mpoxdwfsad] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
}

/* Actions */
.preflight-actions[b-mpoxdwfsad] {
    display: flex;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--gray-200);
    margin-top: var(--space-sm);
}

.preflight-actions .btn-primary[b-mpoxdwfsad] {
    flex: 1;
}
/* /Pages/Bottling/DailyFlow/Panels/SuggestedCaseStickerPanel.razor.rz.scp.css */
.redFont[b-5wkpv5o3lu]{
  color: red;
}
#printableContent.bordersAround[b-5wkpv5o3lu] {
  border: 1px solid black;
  border-radius: 5px;
}

.font-arial[b-5wkpv5o3lu] {
  font-family: Arial, sans-serif;
}

.font-verdana[b-5wkpv5o3lu] {
  font-family: Verdana, sans-serif;
}

.font-georgia[b-5wkpv5o3lu] {
  font-family: Georgia, serif;
}

.font-times[b-5wkpv5o3lu] {
  font-family: 'Times New Roman', Times, serif;
}

.font-comic[b-5wkpv5o3lu] {
  font-family: 'Comic Sans MS', cursive, sans-serif;
}
.font-helvetica[b-5wkpv5o3lu] {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.scrollable-div[b-5wkpv5o3lu] {
  overflow-x: hidden;
  box-sizing: border-box;
}
/* /Pages/Bottling/DailyFlow/Panels/SuppliesPanel.razor.rz.scp.css */
/* Content styles for the main Supplies <SlidingPanel> body + the delete-confirm
   dialog. The slide-out panel chrome (.receipt-panel-slide etc.) was deleted when
   the 4 nested forms were converted to the shared <SlidingPanel> component. */

/* ── Section Layout ── */
.status-section[b-dxo8lpykty],
.receipts-section[b-dxo8lpykty] {
    padding: 0.75rem;
}

.receipts-section[b-dxo8lpykty] {
    border-top: 1px solid var(--gray-200);
}

.section-heading[b-dxo8lpykty] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--blue-500);
    margin-bottom: 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--gray-200);
}

.section-heading i[b-dxo8lpykty] {
    font-size: 0.85rem;
}

/* ── Status Grid ── */
.status-rows[b-dxo8lpykty],
.receipt-list[b-dxo8lpykty] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.status-row[b-dxo8lpykty] {
    display: flex;
    align-items: center;
    padding: 0.35rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    gap: 0.5rem;
}

.status-row.insufficient[b-dxo8lpykty] {
    background: var(--yellow-100);
}

.status-row.sufficient[b-dxo8lpykty] {
    background: var(--green-100);
}

.status-row .component-name[b-dxo8lpykty] {
    font-weight: 500;
    min-width: 80px;
    color: var(--gray-700);
}

.status-row .quantities[b-dxo8lpykty] {
    color: var(--gray-700);
    margin-left: auto;
}

.status-row .shortfall[b-dxo8lpykty] {
    color: var(--red-500);
    font-weight: 600;
}

.status-row .status-icon[b-dxo8lpykty] {
    font-size: 0.9rem;
}

.status-row.pipeline-row[b-dxo8lpykty] {
    background: var(--dailyflow-pipeline-row-bg);
}

.pipeline-qty[b-dxo8lpykty] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.72rem;
    color: var(--gray-700);
    flex: 1;
    margin-left: 0.5rem;
}

/* ── Order Actions ── */
.order-actions[b-dxo8lpykty] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.order-actions .btn[b-dxo8lpykty] {
    flex: 1;
}

/* ── Receipts List ── */
.empty-receipts[b-dxo8lpykty] {
    color: var(--gray-600);
    font-size: 0.8rem;
    padding: 0.5rem;
    text-align: center;
}

/* .receipt-list merged into .status-rows above */

.receipt-item[b-dxo8lpykty] {
    background: var(--gray-50);
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
}

.receipt-item-top[b-dxo8lpykty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.receipt-type[b-dxo8lpykty] {
    background: var(--gray-600);
    color: var(--white);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    text-transform: uppercase;
    min-width: 45px;
    text-align: center;
}

.receipt-qty[b-dxo8lpykty] {
    font-weight: 600;
    color: var(--green-600);
    min-width: 45px;
}

.receipt-desc[b-dxo8lpykty] {
    color: var(--gray-900);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.receipt-actions[b-dxo8lpykty] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.receipt-actions button[b-dxo8lpykty] {
    padding: 0.1rem 0.25rem;
    font-size: 0.7rem;
    line-height: 1;
}

.receipt-actions .bi[b-dxo8lpykty] {
    font-size: 0.75rem;
}

.receipt-item-bottom[b-dxo8lpykty] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    margin-top: 0.2rem;
    flex-wrap: wrap;
}

.receipt-profile[b-dxo8lpykty] {
    color: var(--blue-500);
    font-weight: 500;
}

.receipt-supplier[b-dxo8lpykty] {
    color: var(--gray-600);
}

.receipt-lot[b-dxo8lpykty] {
    color: var(--gray-600);
}

.receipt-date[b-dxo8lpykty] {
    color: var(--gray-500);
    margin-left: auto;
}

.receipt-po-chip[b-dxo8lpykty] {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    background: var(--labqc-badge-info-bg);
    border: 1px solid var(--dailyflow-po-chip-border);
    color: var(--labqc-badge-info-fg);
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.08rem 0.35rem;
    border-radius: 10px;
}

.receipt-po-chip .bi[b-dxo8lpykty] {
    font-size: 0.75rem;
}

.po-chip-unlink[b-dxo8lpykty] {
    background: none;
    border: none;
    color: var(--labqc-badge-info-fg);
    font-size: 0.85rem;
    line-height: 1;
    padding: 0 0.15rem;
    cursor: pointer;
}

.po-chip-unlink:hover[b-dxo8lpykty] {
    color: var(--red-500);
}

/* ── Log Receipt Button ── */
.log-receipt-action[b-dxo8lpykty] {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--gray-200);
}

/* Confirm Dialog — now Shared/ConfirmDialogPanel.razor, see LAYOUT-PATTERNS.md
   Pattern 12. .confirm-details/.edit-instead used above are global (site.css). */

/* ── Mobile ── */
@media (max-width: 576px) {
    .receipt-item-top[b-dxo8lpykty] {
        flex-wrap: wrap;
    }

    .receipt-date[b-dxo8lpykty] {
        margin-left: 0;
    }
}
/* /Pages/Bottling/DailyFlow/Sections/PackagingProfileSection.razor.rz.scp.css */
.profile-section[b-26y3vbuxy0] {
    margin-bottom: var(--space-lg);
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: var(--space-lg);
}

/* .profile-header base hoisted to global .nwc-header-row (site.css) */

.header-buttons[b-26y3vbuxy0] {
    display: flex;
    gap: var(--space-2xs);
}

.profile-title[b-26y3vbuxy0] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--bs-body-color);
}

/* Naked dates expandable section */
.naked-dates-section[b-26y3vbuxy0] {
    margin-bottom: var(--space-sm);
    border: 1px solid var(--dailyflow-spec-warning-border);
    border-radius: var(--radius-sm);
    background: var(--dailyflow-naked-dates-bg);
    overflow: hidden;
}

.naked-dates-header[b-26y3vbuxy0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.4rem 0.6rem;
    background: linear-gradient(135deg, var(--yellow-100) 0%, var(--dailyflow-naked-dates-hover-bg) 100%);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--yellow-700);
    cursor: pointer;
    transition: background 0.15s ease;
}

.naked-dates-header:hover[b-26y3vbuxy0] {
    background: var(--dailyflow-naked-dates-hover-bg);
}

.naked-dates-list[b-26y3vbuxy0] {
    max-height: 150px;
    overflow-y: auto;
    border-top: 1px solid var(--dailyflow-spec-warning-border);
}

.naked-date-row[b-26y3vbuxy0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.35rem 0.6rem;
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--yellow-100);
}

.naked-date-row:last-child[b-26y3vbuxy0] {
    border-bottom: none;
}

.naked-date-row:hover[b-26y3vbuxy0] {
    background: var(--yellow-100);
}

.naked-date-row .naked-date-tag[b-26y3vbuxy0] {
    font-weight: var(--font-weight-semibold);
    color: var(--yellow-700);
    flex: 1;
}

.naked-date-row .naked-date-actual[b-26y3vbuxy0] {
    color: var(--bs-warning-text-emphasis, #997404);
    font-size: var(--font-size-xs);
}

.naked-date-row i[b-26y3vbuxy0] {
    color: var(--bs-warning-text-emphasis, #997404);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.naked-date-row:hover i[b-26y3vbuxy0] {
    opacity: 1;
}

.profile-empty[b-26y3vbuxy0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--bs-secondary);
    font-size: var(--font-size-md);
    padding: var(--space-sm);
    background: var(--bs-light);
    border-radius: var(--radius-sm);
}

.profile-card[b-26y3vbuxy0] {
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    padding: var(--space-sm);
    background: var(--bs-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.profile-card:hover[b-26y3vbuxy0] {
    border-color: var(--bs-primary);
    background: var(--bs-white);
    box-shadow: var(--capture-remove-btn-shadow);
}

.profile-card.selected[b-26y3vbuxy0] {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    box-shadow: 0 0 0 2px var(--bs-primary);
}

.profile-thumb[b-26y3vbuxy0] {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--bs-white);
    border: 1px solid var(--bs-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-thumb .no-image[b-26y3vbuxy0] {
    color: var(--bs-secondary);
    font-size: 1.5rem;
}

.profile-info[b-26y3vbuxy0] {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.profile-compact[b-26y3vbuxy0] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    color: var(--bs-body-color);
    line-height: 1.3;
}

.profile-meta[b-26y3vbuxy0] {
    display: flex;
    gap: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--bs-secondary);
    margin-top: var(--space-2xs);
}

.meta-cases[b-26y3vbuxy0] {
    font-weight: var(--font-weight-medium);
    color: var(--bs-success);
}

.meta-closure[b-26y3vbuxy0] {
    padding: 0.1rem 0.4rem;
    background: var(--bs-light);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
}

.profile-actions[b-26y3vbuxy0] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-2xs);
}

.profile-actions .btn[b-26y3vbuxy0] {
    padding: 0.15rem 0.35rem;
    font-size: 0.8rem;
}

.btn-xs[b-26y3vbuxy0] {
    padding: 0.15rem 0.35rem;
    font-size: var(--font-size-sm);
    line-height: 1;
}

/* List View */
.profile-list-item[b-26y3vbuxy0] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.35rem var(--space-sm);
    background: var(--bs-light);
    border-radius: var(--radius-sm);
    border: 1px solid var(--bs-border-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.profile-list-item:hover[b-26y3vbuxy0] {
    border-color: var(--bs-primary);
    background: var(--bs-white);
}

.profile-list-item.selected[b-26y3vbuxy0] {
    border-color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
}

.profile-list-item .profile-number[b-26y3vbuxy0] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--bs-secondary);
    width: 2rem;
}

.profile-list-item .profile-name[b-26y3vbuxy0] {
    flex: 1;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-list-item .profile-cases[b-26y3vbuxy0] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--bs-success);
}

.profile-list-item .profile-actions[b-26y3vbuxy0] {
    display: flex;
    flex-direction: row;
    gap: 0.15rem;
}

.profile-list-item .deliv-glance[b-26y3vbuxy0] {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
}

/* Deliverables row — "lead with the deliverable" on each profile card */
.profile-deliverables[b-26y3vbuxy0] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-top: var(--space-2xs);
}

.profile-deliverables .deliv-label[b-26y3vbuxy0] {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: var(--font-weight-semibold);
    color: var(--bs-secondary);
}

.profile-deliverables .deliv-items[b-26y3vbuxy0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
}

.deliv-item[b-26y3vbuxy0] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}

.deliv-item.deliv-ready[b-26y3vbuxy0] {
    color: var(--bs-success);
    font-weight: var(--font-weight-medium);
}

.deliv-item.deliv-short[b-26y3vbuxy0] {
    color: var(--bs-warning-text-emphasis, #997404);
    font-weight: var(--font-weight-medium);
}

.deliv-item.deliv-sticker[b-26y3vbuxy0] {
    color: var(--bs-success);
}

.deliv-item.deliv-muted[b-26y3vbuxy0] {
    color: var(--bs-secondary);
}

a.deliv-item.deliv-pdf[b-26y3vbuxy0] {
    color: var(--bs-primary);
    text-decoration: none;
}

a.deliv-item.deliv-pdf:hover[b-26y3vbuxy0] {
    text-decoration: underline;
}
/* /Pages/Bottling/DailyFlow/Sections/PackagingTypeSection.razor.rz.scp.css */
.packaging-type-section[b-7pkd7uetdz] {
    display: flex;
    flex-direction: column;
}

.type-header[b-7pkd7uetdz] {
    padding: var(--space-2xs) 0;
}

.type-empty[b-7pkd7uetdz] {
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

/* Individual Items — base row hoisted to .nwc-packaging-item (site.css) */
.packaging-item.date-specific[b-7pkd7uetdz] {
    background: var(--dailyflow-info-badge-bg);
    border-left: 2px solid var(--blue-500);
}

.packaging-item.run-default[b-7pkd7uetdz] {
    background: var(--nwc-bg-muted);
    border-left: 2px solid var(--gray-600);
}

.packaging-item.from-catalog[b-7pkd7uetdz] {
    border-left-color: var(--green-600) !important;
}

.item-content[b-7pkd7uetdz] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    font-size: 0.8rem;
}

.item-name[b-7pkd7uetdz] {
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
}

.item-supplier[b-7pkd7uetdz] {
    color: var(--gray-600);
}

.item-lot[b-7pkd7uetdz] {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.item-qty[b-7pkd7uetdz] {
    color: var(--gray-700);
    font-weight: var(--font-weight-medium);
}

.item-catalog[b-7pkd7uetdz] {
    color: var(--green-600);
    font-size: var(--font-size-xs);
}

.item-catalog i[b-7pkd7uetdz] {
    font-size: var(--font-size-sm);
}

.item-actions[b-7pkd7uetdz] {
    display: flex;
    gap: var(--space-2xs);
}

.item-actions button[b-7pkd7uetdz] {
    padding: 0.1rem var(--space-2xs);
    font-size: var(--font-size-xs);
    line-height: 1;
}

.item-actions .bi[b-7pkd7uetdz] {
    font-size: var(--font-size-sm);
}
/* /Pages/Bottling/DailyFlow/SignOff/SignOffNotificationComponent.razor.rz.scp.css */
.colaOrLabelItem-alarm[b-encz2xbeny] {
  box-shadow: var(--dailyflow-alarm-shadow);
}
.colaOrLabelItem-accepted[b-encz2xbeny] {
  box-shadow: var(--dailyflow-accepted-shadow);
}
.colaOrLabelItem-waiver[b-encz2xbeny] {
  box-shadow: var(--dailyflow-waiver-shadow);
}
/* /Pages/Bottling/DailyFlow/SignOff/SignOffPanel.razor.rz.scp.css */
[b-m5gcfz2y9u] .border-danger,
[b-m5gcfz2y9u] .border-warning,
[b-m5gcfz2y9u] .border-success {
    border-width: 2px !important;
    border-style: solid !important;
}
/* /Pages/Bottling/FinishedGoods/FinishedGoodsPage.razor.rz.scp.css */
.fg-page[b-m2x32228a5] { display: flex; flex-direction: column; height: 100%; padding: 12px 16px; }

.fg-toolbar[b-m2x32228a5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.fg-title[b-m2x32228a5] { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }

.fg-toolbar-actions[b-m2x32228a5] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-wrap: wrap;
}

.fg-filter-group[b-m2x32228a5] { display: flex; gap: 4px; }

.fg-search[b-m2x32228a5] { max-width: 180px; }

.fg-loading[b-m2x32228a5], .fg-empty[b-m2x32228a5] {
    padding: 40px;
    text-align: center;
    color: var(--gray-600);
    font-size: 0.875rem;
}

.fg-summary-bar[b-m2x32228a5] {
    display: flex;
    gap: 16px;
    padding: 6px 8px;
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    margin-bottom: 10px;
    font-size: 0.8rem;
}

.fg-summary-chip[b-m2x32228a5] { white-space: nowrap; }

.fg-table-wrap[b-m2x32228a5] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    flex: 1;
    overflow-y: auto;
}

.fg-subtext[b-m2x32228a5] { font-size: 0.72rem; line-height: 1.3; }

.fg-main-row:hover[b-m2x32228a5] { background: var(--gray-100) !important; }

.fg-row-negative td[b-m2x32228a5] { background: #fff5f5; }
.fg-row-zero td[b-m2x32228a5] { opacity: 0.7; }

.fg-bol-header td[b-m2x32228a5] { background: var(--gray-50); padding: 4px 8px 8px; }

.fg-bol-table[b-m2x32228a5] {
    font-size: 0.78rem;
    margin: 0;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
}

.fg-bol-table thead th[b-m2x32228a5] {
    background: var(--gray-200);
    font-size: 0.72rem;
    padding: 4px 8px;
}

.fg-bol-table td[b-m2x32228a5] { padding: 4px 8px; }
/* /Pages/Bottling/LabQc/Components/AnalysisTabContent.razor.rz.scp.css */
/* ========== TAB CONTENT (fade animation) ========== */
.tab-pane-content[b-e4r4gqdaxi] {
    animation: fadeIn-b-e4r4gqdaxi 0.15s ease;
}

@keyframes fadeIn-b-e4r4gqdaxi {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Patrol-section card, titlebar h6, grid container/fixed-col/scroll-area, and
   base + header cells all hoisted to the global .nwc-labqc-* family (site.css).
   Only Analysis-specific geometry and the input cascade remain scoped. */

/* ========== ANALYSIS CHECKS GRID ========== */
.analysis-checks-section[b-e4r4gqdaxi] {
    max-width: 100%;
}

/* Gradient fade on right edge when scrollable */
.analysis-grid-container[b-e4r4gqdaxi] {
    position: relative;
}

.analysis-grid-container[b-e4r4gqdaxi]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 24px;
    background: linear-gradient(to right, transparent, rgba(var(--labqc-grid-fade-rgb), 0.8));
    pointer-events: none;
    z-index: var(--z-base);
}

.analysis-columns[b-e4r4gqdaxi] {
    display: flex;
    min-width: max-content;
    scroll-snap-align: end;
}

.analysis-col[b-e4r4gqdaxi] {
    flex-shrink: 0;
}

.col-header-content[b-e4r4gqdaxi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.col-number[b-e4r4gqdaxi] {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
}

.col-date[b-e4r4gqdaxi] {
    font-size: 0.6rem;
    font-weight: var(--font-weight-normal);
    color: var(--gray-600);
}

/* Read-only columns from other dates */
.analysis-col.from-other-date[b-e4r4gqdaxi] {
    opacity: 0.85;
}

.analysis-col.from-other-date .analysis-cell[b-e4r4gqdaxi] {
    background: var(--labqc-other-date-bg);
}

.analysis-col.from-other-date .analysis-cell.header-cell[b-e4r4gqdaxi] {
    background: var(--labqc-other-date-header-bg);
    border-left: 3px solid var(--labqc-other-date-border);
}

.analysis-col.from-other-date .analysis-input[b-e4r4gqdaxi] {
    background: var(--labqc-other-date-bg) !important;
    color: var(--gray-600);
}

/* Input styling */
.analysis-input[b-e4r4gqdaxi] {
    width: 100%;
    height: 26px;
    padding: 0.15rem 0.2rem;
    font-size: 0.72rem;
    text-align: center;
    border: none !important;
    background: var(--surface-default) !important;
    border-radius: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.analysis-input:focus[b-e4r4gqdaxi] {
    background: var(--surface-default) !important;
    box-shadow: inset 0 0 0 2px var(--labqc-focus-ring);
    outline: none;
}

.analysis-input:hover:not(:focus):not(:disabled)[b-e4r4gqdaxi] {
    background: var(--labqc-input-hover-bg) !important;
}

/* (Empty-state rules removed — no .section-empty-state markup in this component.) */

/* ── Spec Range Highlighting ── */
.analysis-input.spec-ok[b-e4r4gqdaxi] {
    border-left: 3px solid var(--labqc-success-fg) !important;
    background: var(--labqc-spec-ok-bg) !important;
}

.analysis-input.spec-warn[b-e4r4gqdaxi] {
    border-left: 3px solid var(--red-500) !important;
    background: var(--labqc-spec-warn-bg) !important;
}

.analysis-input.spec-ok:focus[b-e4r4gqdaxi],
.analysis-input.spec-warn:focus[b-e4r4gqdaxi] {
    background: var(--surface-default) !important;
}

/* Remove spin buttons from number inputs */
.analysis-input[type="number"][b-e4r4gqdaxi]::-webkit-outer-spin-button,
.analysis-input[type="number"][b-e4r4gqdaxi]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.analysis-input[type="number"][b-e4r4gqdaxi] {
    -moz-appearance: textfield;
}

/* Remove column button — base hoisted to global .nwc-col-remove-btn (site.css);
   the hover / parent-hover / @media rules below stay scoped (must keep winning). */
.analysis-col:hover .btn-remove-col[b-e4r4gqdaxi] {
    opacity: 0.6;
}

.btn-remove-col:hover[b-e4r4gqdaxi] {
    opacity: 1 !important;
}

/* ========== INLINE SAMPLE/RECHECK INPUTS ========== */
.inline-inputs[b-e4r4gqdaxi] {
    display: flex;
    gap: 1px;
    width: 100%;
    height: 100%;
    align-items: center;
}

.inline-inputs .analysis-input[b-e4r4gqdaxi] {
    flex: 1;
    min-width: 0;
    height: 26px;
    font-size: 0.72rem;
    padding: 0 0.15rem;
}

.inline-inputs .sample-input[b-e4r4gqdaxi] {
    border-right: 1px solid var(--labqc-grid-divider) !important;
}

.inline-inputs .recheck-input[b-e4r4gqdaxi] {
    background: var(--labqc-recheck-bg) !important;
}

.inline-inputs .recheck-input:focus[b-e4r4gqdaxi] {
    background: var(--surface-default) !important;
}

/* ========== IPAD / TABLET OPTIMIZATION ========== */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Larger cells for touch */
    .analysis-cell[b-e4r4gqdaxi] {
        height: 44px;
        width: 110px;
    }

    .analysis-fixed-col .analysis-cell[b-e4r4gqdaxi] {
        height: 44px;
        width: 110px;
    }

    .analysis-cell.header-cell[b-e4r4gqdaxi],
    .analysis-fixed-col .analysis-cell.header-cell[b-e4r4gqdaxi] {
        height: 44px;
    }

    /* Larger inputs */
    .analysis-input[b-e4r4gqdaxi] {
        height: 40px;
        font-size: 16px !important;
        padding: 0.4rem;
    }

    .inline-inputs .analysis-input[b-e4r4gqdaxi] {
        height: 40px;
        font-size: 16px !important;
    }

    /* Larger remove button for touch */
    .btn-remove-col[b-e4r4gqdaxi] {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-lg);
        opacity: 0.6;
    }

    /* Smooth scrolling */
    .analysis-scroll-area[b-e4r4gqdaxi] {
        -webkit-overflow-scrolling: touch;
    }
}

@media (pointer: coarse) {
    /* Always show remove button on touch devices */
    .btn-remove-col[b-e4r4gqdaxi] {
        opacity: 0.5;
    }
}
/* /Pages/Bottling/LabQc/Components/CapacityTabContent.razor.rz.scp.css */
/* Capacity Tab Content Styles */

/* Empty state */
.section-empty-state[b-ur4o3xvv0f] {
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    color: var(--gray-600);
}

.section-empty-state i[b-ur4o3xvv0f] {
    font-size: 2rem;
    display: block;
    margin-bottom: var(--space-sm);
    opacity: 0.4;
}

.section-empty-state p[b-ur4o3xvv0f] {
    font-size: var(--font-size-md);
    margin-bottom: 0;
}

.capacity-section[b-ur4o3xvv0f] {
    background: var(--surface-default);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    box-shadow: var(--labqc-capacity-section-shadow);
}

.section-header h6[b-ur4o3xvv0f] {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--nwc-text);
}

/* Capacity Table */
.capacity-table[b-ur4o3xvv0f] {
    font-size: 0.8rem;
}

.capacity-table th[b-ur4o3xvv0f],
.capacity-table td[b-ur4o3xvv0f] {
    padding: 0.2rem 0.35rem;
    vertical-align: middle;
}

.capacity-table input[b-ur4o3xvv0f] {
    width: 80px;
}

.sample-num[b-ur4o3xvv0f] {
    font-weight: var(--font-weight-semibold);
    text-align: center;
    width: 30px;
}

.calculated[b-ur4o3xvv0f] {
    font-weight: var(--font-weight-medium);
    background: var(--gray-50);
    text-align: center;
}

.average-row[b-ur4o3xvv0f] {
    background: var(--labqc-average-row-bg);
    font-weight: var(--font-weight-semibold);
}

/* Specs Panel - Collapsible Reference */
.specs-panel[b-ur4o3xvv0f] {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    overflow: hidden;
}

.specs-panel.collapsed[b-ur4o3xvv0f] {
    border-color: var(--gray-300);
}

.specs-header[b-ur4o3xvv0f] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    user-select: none;
    background: var(--gray-50);
    border-bottom: 1px solid transparent;
}

.specs-panel:not(.collapsed) .specs-header[b-ur4o3xvv0f] {
    border-bottom-color: var(--gray-200);
}

.specs-header:hover[b-ur4o3xvv0f] {
    background: var(--nwc-bg-muted);
}

.specs-toggle[b-ur4o3xvv0f] {
    color: var(--gray-600);
    font-size: var(--font-size-md);
}

.specs-title[b-ur4o3xvv0f] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-700);
}

.specs-divider[b-ur4o3xvv0f] {
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

.specs-collapsed-hint[b-ur4o3xvv0f] {
    margin-left: auto;
    display: flex;
    gap: var(--space-md);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.specs-content[b-ur4o3xvv0f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-md);
}

.specs-column[b-ur4o3xvv0f] {
    min-width: 0;
}

.specs-section-title[b-ur4o3xvv0f] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--gray-600);
    margin-bottom: 0.35rem;
    padding-bottom: var(--space-2xs);
    border-bottom: 1px solid var(--gray-300);
}

.spec-row[b-ur4o3xvv0f] {
    display: flex;
    justify-content: space-between;
    padding: 0.15rem 0;
    font-size: 0.8rem;
}

.spec-label[b-ur4o3xvv0f] {
    color: var(--gray-600);
}

.spec-value[b-ur4o3xvv0f] {
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
}

/* ========== IPAD / TABLET OPTIMIZATION ========== */
@media (min-width: 768px) and (max-width: 1199px) {
    .capacity-table[b-ur4o3xvv0f] {
        font-size: var(--font-size-md);
    }

    .capacity-table th[b-ur4o3xvv0f],
    .capacity-table td[b-ur4o3xvv0f] {
        padding: 0.4rem var(--space-sm);
    }

    /* Larger inputs for touch */
    .capacity-table input[b-ur4o3xvv0f] {
        min-height: 44px;
        font-size: 16px !important;
        width: 90px;
        padding: 0.4rem;
    }

    /* Larger sample number cell */
    .sample-num[b-ur4o3xvv0f] {
        width: 40px;
        font-size: var(--font-size-base);
    }

    /* Section header buttons */
    .section-header .btn[b-ur4o3xvv0f] {
        min-height: 44px;
        min-width: 44px;
    }

    /* Specs panel - touch-friendly header */
    .specs-header[b-ur4o3xvv0f] {
        padding: 0.65rem var(--space-md);
        min-height: 44px;
    }
}
/* /Pages/Bottling/LabQc/Components/FilterabilitySection.razor.rz.scp.css */
.filterability-section[b-w0tk58k1ya] {
    padding: var(--space-sm) 0;
}

.filterability-toolbar[b-w0tk58k1ya] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--space-sm) var(--space-sm) var(--space-sm);
}

.filterability-thumb[b-w0tk58k1ya] {
    width: 36px;
    height: 46px;
    object-fit: cover;
    border: 1px solid var(--gray-300);
    border-radius: 2px;
    display: inline-block;
}
/* /Pages/Bottling/LabQc/Components/MaterialChangeLogView.razor.rz.scp.css */
/* MaterialChangeLogView - Timeline of material changes */

.change-log-section[b-lefqun57ao] {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--gray-200);
}

/* .section-header base hoisted to global .nwc-header-row (site.css) */

.section-title[b-lefqun57ao] {
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--gray-600);
    letter-spacing: 0.3px;
}

.section-title i[b-lefqun57ao] {
    margin-right: var(--space-2xs);
    color: var(--blue-500);
}

.add-btn[b-lefqun57ao] {
    padding: 0;
    font-size: var(--font-size-md);
    color: var(--labqc-success-fg);
}

.add-btn:hover[b-lefqun57ao] {
    color: var(--labqc-success-fg-hover);
}

/* sp-empty overrides — compact inline variant */
.sp-empty[b-lefqun57ao] {
    flex-direction: row;
    padding: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.sp-empty i[b-lefqun57ao] {
    font-size: var(--font-size-base);
}

/* Add Form */
.add-change-form[b-lefqun57ao] {
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 0.6rem;
    margin-bottom: var(--space-md);
}

.form-actions[b-lefqun57ao] {
    display: flex;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--gray-200);
}

.form-actions .btn[b-lefqun57ao] {
    font-size: 0.72rem;
    padding: var(--space-2xs) 0.6rem;
}

/* Timeline */
.timeline[b-lefqun57ao] {
    position: relative;
    padding-left: 1.25rem;
}

.timeline[b-lefqun57ao]::before {
    content: '';
    position: absolute;
    left: 0.35rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gray-200);
}

.timeline-item[b-lefqun57ao] {
    position: relative;
    padding-bottom: var(--space-md);
}

.timeline-item:last-child[b-lefqun57ao] {
    padding-bottom: 0;
}

.timeline-marker[b-lefqun57ao] {
    position: absolute;
    left: -1.25rem;
    top: 0;
    width: 0.9rem;
    height: 0.9rem;
    background: var(--surface-default);
    border: 2px solid var(--blue-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-marker i[b-lefqun57ao] {
    font-size: 0.5rem;
    color: var(--blue-500);
}

.timeline-content[b-lefqun57ao] {
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-sm) 0.6rem;
}

.change-header[b-lefqun57ao] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem;
}

.component-badge[b-lefqun57ao] {
    font-size: 0.62rem;
    font-weight: var(--font-weight-bold);
    padding: 0.1rem 0.35rem;
    background: var(--gray-600);
    color: var(--text-on-brand);
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.change-time[b-lefqun57ao] {
    font-size: 0.68rem;
    color: var(--gray-600);
}

.change-time span + span[b-lefqun57ao]::before {
    content: ' ';
}

.change-details[b-lefqun57ao] {
    margin-bottom: var(--space-2xs);
}

.lot-change[b-lefqun57ao] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
}

.old-lot[b-lefqun57ao] {
    color: var(--red-500);
    text-decoration: line-through;
}

.lot-change i[b-lefqun57ao] {
    font-size: var(--font-size-2xs);
    color: var(--gray-600);
}

.new-lot[b-lefqun57ao] {
    color: var(--labqc-success-fg);
    font-weight: var(--font-weight-semibold);
}

.supplier-change[b-lefqun57ao] {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

.supplier-change i[b-lefqun57ao] {
    font-size: 0.6rem;
    margin: 0 var(--space-2xs);
}

.change-notes[b-lefqun57ao] {
    font-size: var(--font-size-xs);
    color: var(--gray-700);
    font-style: italic;
    padding: var(--space-2xs) 0;
    border-top: 1px dashed var(--gray-200);
    margin-top: var(--space-2xs);
}

.change-meta[b-lefqun57ao] {
    display: flex;
    justify-content: space-between;
    font-size: 0.62rem;
    color: var(--gray-500);
    margin-top: var(--space-2xs);
    padding-top: var(--space-2xs);
    border-top: 1px solid var(--nwc-bg-muted);
}

/* Keep short field labels on one line. In a 320px sidebar "Pallet #" was breaking
   after "Pallet", leaving a lone "#" on its own row -- it reads as noise, not a label.
   Pattern 16e widened these cells, but the sidebar drops to 280px at <=992px and would
   wrap again. ::deep because the <label> is rendered by the FormField child component,
   so it does not carry this component's scope attribute. */
.add-change-form[b-lefqun57ao]  .nwc-form-field > label {
    white-space: nowrap;
}
/* /Pages/Bottling/LabQc/Components/MaterialSelector.razor.rz.scp.css */
/* MaterialSelector - Panel for selecting from logged receipts */

/* .modal-backdrop base hoisted to .nwc-modal-backdrop (site.css) */

.modal[b-saxe9o47o5] {
    z-index: var(--z-slot-badge);
}

.modal-title[b-saxe9o47o5] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.modal-title i[b-saxe9o47o5] {
    color: var(--blue-500);
}

.material-option[b-saxe9o47o5] {
    position: relative;
    padding: 0.6rem var(--space-md);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--surface-default);
    cursor: pointer;
    transition: all 0.15s ease;
}

.material-option:hover[b-saxe9o47o5] {
    border-color: var(--blue-500);
    background: var(--gray-50);
}

.material-option.selected[b-saxe9o47o5] {
    border-color: var(--blue-500);
    background: var(--blue-100);
    box-shadow: 0 0 0 2px rgba(var(--blue-500-rgb), 0.15);
}

.option-header[b-saxe9o47o5] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: 0.35rem;
}

.lot-number[b-saxe9o47o5] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    color: var(--gray-900);
}

.option-details[b-saxe9o47o5] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.detail[b-saxe9o47o5] {
    font-size: 0.72rem;
    color: var(--gray-600);
}

.detail i[b-saxe9o47o5] {
    margin-right: 0.2rem;
    font-size: 0.68rem;
}

.option-desc[b-saxe9o47o5] {
    font-size: var(--font-size-xs);
    color: var(--gray-700);
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--gray-200);
}

.selected-indicator[b-saxe9o47o5] {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    color: var(--blue-500);
    font-size: var(--font-size-xl);
}
/* /Pages/Bottling/LabQc/Components/O2Co2FilterTabContent.razor.rz.scp.css */
/* ========== TAB CONTENT (fade animation) ========== */
.tab-pane-content[b-jr1ci10pam] {
    animation: fadeIn-b-jr1ci10pam 0.15s ease;
}

@keyframes fadeIn-b-jr1ci10pam {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Patrol-section card, titlebar h6, grid container/fixed-col/scroll-area, and
   base + header cells all hoisted to the global .nwc-labqc-* family (site.css).
   Only O2Co2-specific geometry (wider parameter column) and the input/select
   cascade remain scoped. */

/* ========== O2/CO2 GRID ========== */
.o2co2-fixed-col .o2co2-cell[b-jr1ci10pam] {
    width: 130px; /* parameter names run longer than Analysis's 100px column */
}

.o2co2-columns[b-jr1ci10pam] {
    display: flex;
    min-width: max-content;
}

.o2co2-col[b-jr1ci10pam] {
    flex-shrink: 0;
}

.col-number[b-jr1ci10pam] {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
}

/* Metadata rows (Pallet, Time, Note) */
.o2co2-cell.metadata-cell[b-jr1ci10pam] {
    background: var(--labqc-recheck-bg);
}

.o2co2-fixed-col .o2co2-cell.metadata-row[b-jr1ci10pam] {
    background: var(--labqc-recheck-bg);
}

/* Time display in Filtration section */
.time-display[b-jr1ci10pam] {
    font-size: 0.72rem;
    color: var(--gray-700);
    font-weight: var(--font-weight-medium);
}

/* Input styling */
.o2co2-input[b-jr1ci10pam] {
    width: 100%;
    height: 26px;
    padding: 0.15rem 0.2rem;
    font-size: 0.72rem;
    text-align: center;
    border: none !important;
    background: var(--surface-default) !important;
    border-radius: 0;
}

.o2co2-input:focus[b-jr1ci10pam] {
    background: var(--surface-default) !important;
    box-shadow: inset 0 0 0 2px var(--labqc-focus-ring);
    outline: none;
}

.o2co2-input:hover:not(:focus):not(:disabled)[b-jr1ci10pam] {
    background: var(--labqc-input-hover-bg) !important;
}

/* Metadata cell inputs need transparent background */
.metadata-cell .o2co2-input[b-jr1ci10pam] {
    background: transparent !important;
}

.metadata-cell .o2co2-input:focus[b-jr1ci10pam] {
    background: var(--surface-default) !important;
}

/* Remove spin buttons from number inputs */
.o2co2-input[type="number"][b-jr1ci10pam]::-webkit-outer-spin-button,
.o2co2-input[type="number"][b-jr1ci10pam]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.o2co2-input[type="number"][b-jr1ci10pam] {
    -moz-appearance: textfield;
}

/* Select styling */
.o2co2-select[b-jr1ci10pam] {
    width: 100%;
    height: 26px;
    padding: 0 0.2rem;
    font-size: 0.72rem;
    text-align: center;
    border: none !important;
    background: var(--surface-default) !important;
    border-radius: 0;
    cursor: pointer;
}

.o2co2-select:focus[b-jr1ci10pam] {
    background: var(--surface-default) !important;
    box-shadow: inset 0 0 0 2px var(--labqc-focus-ring);
    outline: none;
}

.o2co2-select:hover:not(:focus):not(:disabled)[b-jr1ci10pam] {
    background: var(--labqc-input-hover-bg) !important;
}

/* Remove column button — base hoisted to global .nwc-col-remove-btn (site.css);
   the hover / parent-hover / @media rules below stay scoped (must keep winning). */
.o2co2-col:hover .btn-remove-col[b-jr1ci10pam] {
    opacity: 0.6;
}

.btn-remove-col:hover[b-jr1ci10pam] {
    opacity: 1 !important;
}

/* ========== IPAD / TABLET OPTIMIZATION ========== */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Larger cells for touch */
    .o2co2-cell[b-jr1ci10pam] {
        height: 44px;
        width: 110px;
    }

    .o2co2-fixed-col .o2co2-cell[b-jr1ci10pam] {
        height: 44px;
        width: 140px;
    }

    .o2co2-cell.header-cell[b-jr1ci10pam],
    .o2co2-fixed-col .o2co2-cell.header-cell[b-jr1ci10pam] {
        height: 44px;
    }

    /* Larger inputs */
    .o2co2-input[b-jr1ci10pam],
    .o2co2-select[b-jr1ci10pam] {
        height: 40px;
        font-size: 16px !important;
        padding: 0.4rem;
    }

    /* Larger remove button for touch */
    .btn-remove-col[b-jr1ci10pam] {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-lg);
        opacity: 0.6;
    }

    /* Smooth scrolling */
    .o2co2-scroll-area[b-jr1ci10pam] {
        -webkit-overflow-scrolling: touch;
    }
}

@media (pointer: coarse) {
    /* Always show remove button on touch devices */
    .btn-remove-col[b-jr1ci10pam] {
        opacity: 0.5;
    }
}
/* /Pages/Bottling/LabQc/Components/PackagingProfileSidebar.razor.rz.scp.css */
/* PackagingProfileSidebar - Main sidebar component */

.profile-sidebar[b-xaaslwlk9r] {
    position: relative;
    background: var(--surface-default);
    border-right: 1px solid var(--gray-300);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: width 0.2s ease;
    overflow: hidden;
}

.profile-sidebar.expanded[b-xaaslwlk9r] {
    width: 320px;
    min-width: 320px;
}

.profile-sidebar.collapsed[b-xaaslwlk9r] {
    width: 36px;
    min-width: 36px;
}

/* Toggle Button */
.sidebar-toggle[b-xaaslwlk9r] {
    position: absolute;
    top: var(--space-sm);
    right: -1px;
    z-index: var(--z-card-overlay);
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.35rem;
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    transition: all 0.15s ease;
}

.profile-sidebar.collapsed .sidebar-toggle[b-xaaslwlk9r] {
    position: static;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--gray-300);
    border-radius: 0;
    padding: var(--space-sm) var(--space-2xs);
    flex-direction: column;
    gap: 0.35rem;
}

.sidebar-toggle:hover[b-xaaslwlk9r] {
    background: var(--gray-50);
    color: var(--blue-500);
}

.toggle-label[b-xaaslwlk9r] {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Sidebar Content */
.sidebar-content[b-xaaslwlk9r] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    padding-top: 2.5rem; /* Space for toggle button */
    padding-bottom: var(--space-sm); /* Reduce bottom padding, footer handles it */
}

/* Sticky Footer */
.sidebar-footer[b-xaaslwlk9r] {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-top: 1px solid var(--gray-300);
    background: var(--gray-50);
}

.sidebar-footer .footer-left[b-xaaslwlk9r],
.sidebar-footer .footer-right[b-xaaslwlk9r] {
    display: flex;
    gap: 0.35rem;
}

.sidebar-footer .btn[b-xaaslwlk9r] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.sidebar-footer .btn-outline-success[b-xaaslwlk9r] {
    border-color: var(--labqc-success-fg);
    color: var(--labqc-success-fg);
}

.sidebar-footer .btn-outline-success:hover[b-xaaslwlk9r] {
    background-color: var(--labqc-success-fg);
    color: var(--text-on-brand);
}

/* Profile Header */
.profile-header[b-xaaslwlk9r] {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--gray-200);
}

/* Loading State */
.sidebar-loading[b-xaaslwlk9r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl) var(--space-lg);
    color: var(--gray-600);
    font-size: 0.82rem;
}

/* No Profile - Prominent Create UI */
.no-profile-container[b-xaaslwlk9r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl) var(--space-lg);
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    text-align: center;
}

.no-profile-icon[b-xaaslwlk9r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--surface-default);
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
}

.no-profile-icon i[b-xaaslwlk9r] {
    font-size: 1.5rem;
    color: var(--gray-600);
}

.no-profile-message strong[b-xaaslwlk9r] {
    font-size: var(--font-size-base);
    color: var(--gray-700);
}

.no-profile-message span[b-xaaslwlk9r] {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    line-height: 1.4;
}

.btn-create-profile[b-xaaslwlk9r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    width: 100%;
    padding: 0.6rem var(--space-lg);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}

.btn-create-profile:hover:not(:disabled)[b-xaaslwlk9r] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--blue-500-rgb), 0.3);
}

.btn-create-profile:disabled[b-xaaslwlk9r] {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Legacy no-profile class (kept for compatibility) */

.profile-identity[b-xaaslwlk9r] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.profile-name[b-xaaslwlk9r] {
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
}

.profile-meta[b-xaaslwlk9r] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
}

.bottle-size[b-xaaslwlk9r] {
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
}

.closure-type[b-xaaslwlk9r] {
    color: var(--gray-600);
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.snow-indicator[b-xaaslwlk9r] {
    color: var(--labqc-snow-cyan-fg);
    font-size: var(--font-size-lg);
    text-shadow: 0 0 6px rgba(var(--labqc-snow-cyan-fg-rgb), 0.5);
}

.shiner-badge[b-xaaslwlk9r] {
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    padding: 0.1rem 0.3rem;
    background: var(--labqc-badge-warning-bg);
    color: var(--gray-900);
    border-radius: var(--radius-xs);
    letter-spacing: 0.5px;
}

.linked-dates[b-xaaslwlk9r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.dates-label[b-xaaslwlk9r] {
    font-size: 0.68rem;
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
}

.date-chip[b-xaaslwlk9r] {
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
    background: var(--gray-200);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.15s ease;
}

.date-chip:hover[b-xaaslwlk9r] {
    background: var(--gray-300);
}

.date-chip.current[b-xaaslwlk9r] {
    background: var(--blue-500);
    border-color: var(--blue-500);
    color: var(--text-on-brand);
}

/* Profile Sections */
.profile-section[b-xaaslwlk9r] {
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.section-header[b-xaaslwlk9r] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-sm) 0.6rem;
    background: var(--gray-50);
    border: none;
    cursor: pointer;
    transition: background 0.15s ease;
    text-align: left;
}

.section-header:hover[b-xaaslwlk9r] {
    background: var(--gray-200);
}

.section-name[b-xaaslwlk9r] {
    flex: 1;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    color: var(--gray-700);
    letter-spacing: 0.3px;
}

.field-count[b-xaaslwlk9r] {
    font-size: var(--font-size-2xs);
    color: var(--gray-500);
    font-weight: var(--font-weight-medium);
}

.expand-icon[b-xaaslwlk9r] {
    font-size: 0.72rem;
    color: var(--gray-600);
}

.section-body[b-xaaslwlk9r] {
    padding: var(--space-sm) 0.6rem;
    border-top: 1px solid var(--gray-200);
}

/* Dead `.materials-header` family removed: the class appeared in no markup or
   code-behind anywhere (orphaned after a prior extraction). The base rule was the
   group-#3 occurrence; its descendant rules (.section-title / .btn-link) were
   equally dead, so the whole family is gone. Header-row layout now lives in the
   global .nwc-header-row (site.css) for live consumers. */

/* Materials Section Body */
.materials-body[b-xaaslwlk9r] {
    padding: var(--space-sm);
}

.no-materials[b-xaaslwlk9r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    color: var(--gray-600);
    font-size: 0.8rem;
    text-align: center;
}

/* Material Item - Editable Card */
.material-item[b-xaaslwlk9r] {
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.material-item:last-of-type[b-xaaslwlk9r] {
    margin-bottom: 0;
}

.material-item-header[b-xaaslwlk9r] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--labqc-divider-subtle);
}

.material-type[b-xaaslwlk9r] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    text-transform: uppercase;
}

.material-type i[b-xaaslwlk9r] {
    color: var(--gray-600);
}

.primary-badge[b-xaaslwlk9r] {
    font-size: 0.55rem;
    font-weight: var(--font-weight-bold);
    padding: 0.1rem var(--space-2xs);
    background: var(--labqc-success-fg);
    color: var(--text-on-brand);
    border-radius: var(--radius-xs);
    letter-spacing: 0.3px;
}

/* Material Fields - Editable */
.material-fields[b-xaaslwlk9r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
}

.material-field.full-width[b-xaaslwlk9r] {
    grid-column: 1 / -1;
}

.material-field label[b-xaaslwlk9r] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin: 0;
}

.material-field input[b-xaaslwlk9r] {
    font-size: 0.78rem;
    padding: var(--space-2xs) 0.4rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.material-field input:focus[b-xaaslwlk9r] {
    border-color: var(--labqc-input-focus-border);
    box-shadow: 0 0 0 2px rgba(var(--blue-500-rgb), 0.15);
    outline: none;
}

.material-field input:hover:not(:focus)[b-xaaslwlk9r] {
    border-color: var(--gray-500);
}

/* Material Actions */
.material-actions[b-xaaslwlk9r] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-sm);
    padding-top: 0.35rem;
    border-top: 1px solid var(--labqc-divider-subtle);
}

.material-actions .btn[b-xaaslwlk9r] {
    font-size: var(--font-size-xs);
    padding: 0.2rem var(--space-sm);
}

.add-material-btn[b-xaaslwlk9r] {
    font-size: var(--font-size-sm);
    padding: var(--space-2xs) 0;
    color: var(--labqc-success-fg);
}

.add-material-btn:hover[b-xaaslwlk9r] {
    color: var(--labqc-success-fg-hover);
}

/* Documents Section */
.documents-body[b-xaaslwlk9r] {
    padding: var(--space-sm);
}

.upload-area[b-xaaslwlk9r] {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-md);
}

.upload-area input[type="file"][b-xaaslwlk9r] {
    flex: 1;
    font-size: var(--font-size-sm);
    padding: var(--space-2xs) 0.35rem;
}

.upload-area .btn[b-xaaslwlk9r] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 0.72rem;
    white-space: nowrap;
}

.document-list[b-xaaslwlk9r] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.document-item[b-xaaslwlk9r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.document-link[b-xaaslwlk9r] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--blue-500);
    text-decoration: none;
    overflow: hidden;
}

.document-link:hover[b-xaaslwlk9r] {
    text-decoration: underline;
}

.document-link i[b-xaaslwlk9r] {
    flex-shrink: 0;
    color: var(--gray-600);
}

.document-item .btn-link[b-xaaslwlk9r] {
    font-size: var(--font-size-md);
    line-height: 1;
}

.no-documents[b-xaaslwlk9r] {
    text-align: center;
    padding: var(--space-md);
    color: var(--gray-600);
    font-size: 0.8rem;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .profile-sidebar.expanded[b-xaaslwlk9r] {
        width: 280px;
        min-width: 280px;
    }
}

@media (max-width: 768px) {
    .profile-sidebar[b-xaaslwlk9r] {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: 1000;
        box-shadow: var(--labqc-sidebar-shadow);
    }

    .profile-sidebar.collapsed[b-xaaslwlk9r] {
        transform: translateX(-100%);
        width: 0;
        min-width: 0;
    }

    .profile-sidebar.collapsed .sidebar-toggle[b-xaaslwlk9r] {
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%) translateX(0);
        width: auto;
        padding: var(--space-sm);
        border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
        box-shadow: var(--labqc-sidebar-toggle-shadow);
    }

    .profile-sidebar.expanded[b-xaaslwlk9r] {
        width: 100%;
        max-width: 320px;
    }
}

/* Print - hide sidebar */
@media print {
    .profile-sidebar[b-xaaslwlk9r] {
        display: none !important;
    }
}
/* /Pages/Bottling/LabQc/Components/PackagingQcSection.razor.rz.scp.css */
.packaging-qc-section[b-63byngywon] {
    margin-top: 0;
    background: var(--surface-default);
    border-radius: 0;
    padding: var(--space-md);
}

/* ── Packaging Context Banner ── */
.packaging-context-banner[b-63byngywon] {
    padding: 0.6rem var(--space-md);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    margin: -0.75rem -0.75rem var(--space-md) -0.75rem;
}

.context-badge[b-63byngywon] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.65rem;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.3px;
}

.context-badge i[b-63byngywon] {
    font-size: var(--font-size-md);
}

.closure-badge[b-63byngywon] {
    background: var(--labqc-badge-neutral-bg);
    color: var(--labqc-badge-neutral-fg);
}

.package-badge[b-63byngywon] {
    background: var(--green-100);
    color: var(--labqc-badge-success-fg);
}

.package-badge .shiner-label[b-63byngywon] {
    background: var(--labqc-badge-warning-bg);
    color: var(--gray-900);
    padding: 0.05rem 0.35rem;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.silk-badge[b-63byngywon] {
    background: var(--labqc-badge-info-bg);
    color: var(--labqc-badge-info-fg);
}

.snow-badge[b-63byngywon] {
    background: var(--wr-status-info-bg);
    color: var(--wr-status-info-fg);
    animation: snow-pulse-b-63byngywon 2s ease-in-out infinite;
}

@keyframes snow-pulse-b-63byngywon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.section-header h6[b-63byngywon] {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--nwc-text);
}

/* Snow Dropper Indicator */
.snow-indicator[b-63byngywon] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    background: var(--labqc-snow-bg);
    color: var(--labqc-snow-fg);
    border: 1px solid var(--labqc-snow-border);
}

.snow-indicator.active[b-63byngywon] {
    background: var(--labqc-snow-fg);
    color: var(--text-on-brand);
    border-color: var(--snow-dropper-fg);
    animation: snow-pulse-b-63byngywon 2s ease-in-out infinite;
}

.snow-indicator i[b-63byngywon] {
    font-size: var(--font-size-base);
}

@keyframes snow-pulse-b-63byngywon {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}


/* Table Styles */
.packaging-table[b-63byngywon] {
    font-size: 0.8rem;
    width: auto;
    table-layout: fixed;
}

.packaging-table th[b-63byngywon],
.packaging-table td[b-63byngywon] {
    vertical-align: middle;
    padding: 0.2rem 0.35rem;
}

.item-header[b-63byngywon],
.expected-header[b-63byngywon] {
    width: 120px;
    background: var(--gray-50);
    font-weight: var(--font-weight-semibold);
}

.patrol-header[b-63byngywon] {
    width: 85px;
    background: var(--gray-50);
    text-align: center;
}

.verify-all-btn[b-63byngywon] {
    width: 100%;
    margin-top: 0.2rem;
    font-size: var(--font-size-xs);
    padding: 0.15rem 0.3rem;
}

.verify-all-btn i[b-63byngywon] {
    font-size: 0.8rem;
}

/* Patrol delete button */


.patrol-time input[b-63byngywon] {
    width: 70px;
    font-size: var(--font-size-xs);
    text-align: center;
    padding: 2px;
}

.patrol-pallet input[b-63byngywon] {
    width: 70px;
    font-size: var(--font-size-2xs);
    text-align: center;
    margin-top: 2px;
    padding: 2px;
}

/* Section Row */
.section-row[b-63byngywon] {
    background: var(--gray-200);
}

.section-label[b-63byngywon] {
    font-weight: var(--font-weight-bold);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-700);
    padding: var(--space-sm);
}

/* Item Row */
.item-row .item-name[b-63byngywon] {
    font-weight: var(--font-weight-medium);
    padding-left: var(--space-sm);
    white-space: normal;
    word-wrap: break-word;
}

.item-row .expected-value[b-63byngywon] {
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    white-space: normal;
    word-wrap: break-word;
}

/* Snow Dropper Row - highlight for billable equipment */
.snow-dropper-row[b-63byngywon] {
    background: var(--labqc-snow-row-bg);
}

.snow-dropper-row .item-name[b-63byngywon] {
    color: var(--labqc-snow-fg);
}

/* Verification Cell */
.verification-cell[b-63byngywon] {
    text-align: center;
    padding: var(--space-2xs);
    transition: background-color 0.2s ease;
}

.verification-btn[b-63byngywon] {
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.verification-btn:active[b-63byngywon] {
    transform: scale(0.9);
}

.verification-btn i[b-63byngywon] {
    font-size: var(--font-size-lg);
}

.verification-cell.verified[b-63byngywon] {
    background: var(--labqc-verify-ok-bg);
}

.verification-cell.mismatch[b-63byngywon] {
    background: var(--labqc-verify-bad-bg);
}

/* Inline verification cell with horizontal layout */
.verification-cell-inline[b-63byngywon] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.actual-input-inline[b-63byngywon] {
    font-size: var(--font-size-2xs);
    width: 50px;
    padding: 2px 3px;
    height: 24px;
}

/* Empty patrol column (inactive) */
.empty-patrol[b-63byngywon] {
    background: var(--gray-50);
    cursor: pointer;
}

.empty-patrol:hover[b-63byngywon] {
    background: var(--gray-200);
}

.empty-patrol .verification-btn[b-63byngywon] {
    opacity: 0.3;
}

/* Alert styling */
.alert[b-63byngywon] {
    margin: var(--space-lg) 0;
}

/* Value-only Row - display only, no verification */
.value-only-row[b-63byngywon] {
    background: var(--labqc-recheck-bg);
}

.value-only-row .item-name[b-63byngywon] {
    font-weight: var(--font-weight-normal);
    font-style: italic;
    color: var(--gray-600);
}

.value-only-cell[b-63byngywon] {
    background: var(--gray-50);
}

/* Notes Section */
.notes-section[b-63byngywon] {
    border-top: 1px solid var(--gray-200);
    padding-top: var(--space-md);
}

/* ========== IPAD / TABLET OPTIMIZATION ========== */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Larger table cells */
    .packaging-table th[b-63byngywon],
    .packaging-table td[b-63byngywon] {
        padding: 0.4rem var(--space-sm);
    }

    /* Larger patrol columns for touch */
    .patrol-header[b-63byngywon] {
        width: 90px;
    }

    /* Patrol time/pallet + actual value inline inputs */
    .patrol-time input[b-63byngywon],
    .patrol-pallet input[b-63byngywon],
    .actual-input-inline[b-63byngywon] {
        min-height: 40px;
        font-size: 16px !important;
        padding: 0.3rem 0.4rem;
    }

    /* Verification buttons - larger touch target */
    .verification-btn[b-63byngywon] {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }

    .verification-btn i[b-63byngywon] {
        font-size: var(--font-size-xl);
    }


    /* Notes textarea */
    .notes-section textarea[b-63byngywon] {
        font-size: 16px !important;
        min-height: 80px;
    }
}
/* /Pages/Bottling/LabQc/Components/ProfileFieldEditor.razor.rz.scp.css */
/* ProfileFieldEditor - Inline field editing */

.profile-field[b-t5702y5rex] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--nwc-bg-muted);
}

.profile-field:last-child[b-t5702y5rex] {
    border-bottom: none;
}

.profile-field.empty .field-label .label-text[b-t5702y5rex] {
    color: var(--gray-500);
}

.profile-field.lot-field[b-t5702y5rex] {
    background: var(--labqc-lot-bg);
    margin: 0 -0.5rem;
    padding: 0.35rem var(--space-sm);
    border-radius: var(--radius-sm);
}

.label-text[b-t5702y5rex] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.lot-badge[b-t5702y5rex] {
    font-size: 0.55rem;
    font-weight: var(--font-weight-bold);
    padding: 0.1rem var(--space-2xs);
    background: var(--labqc-badge-warning-bg);
    color: var(--gray-900);
    border-radius: var(--radius-xs);
    letter-spacing: 0.5px;
}

.field-value-container[b-t5702y5rex] {
    min-height: 24px;
}

/* Read Mode */
.read-mode[b-t5702y5rex] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    padding: 0.2rem 0;
    border-radius: var(--radius-xs);
    transition: background 0.15s ease;
}

.read-mode.editable[b-t5702y5rex] {
    cursor: pointer;
}

.read-mode.editable:hover[b-t5702y5rex] {
    background: var(--gray-50);
}

.value-text[b-t5702y5rex] {
    font-size: 0.82rem;
    color: var(--gray-900);
    font-weight: var(--font-weight-medium);
    word-break: break-word;
}

.empty-placeholder[b-t5702y5rex] {
    font-size: 0.78rem;
    color: var(--gray-500);
    font-style: italic;
}

.empty-value[b-t5702y5rex] {
    font-size: 0.78rem;
    color: var(--gray-300);
}

.edit-icon[b-t5702y5rex],
.add-icon[b-t5702y5rex] {
    font-size: 0.72rem;
    color: var(--blue-500);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.read-mode.editable:hover .edit-icon[b-t5702y5rex],
.read-mode.editable:hover .add-icon[b-t5702y5rex] {
    opacity: 1;
}

.lock-icon[b-t5702y5rex] {
    font-size: var(--font-size-2xs);
    color: var(--gray-500);
}

/* Edit Mode */
.edit-input[b-t5702y5rex] {
    flex: 1;
    font-size: 0.82rem;
    padding: var(--space-2xs) 0.4rem;
    height: auto;
}

.edit-actions[b-t5702y5rex] {
    display: flex;
    gap: 0.2rem;
}

.save-btn[b-t5702y5rex],
.cancel-btn[b-t5702y5rex] {
    padding: 0.15rem 0.35rem;
    font-size: 0.72rem;
    line-height: 1;
}

.save-btn i[b-t5702y5rex],
.cancel-btn i[b-t5702y5rex] {
    font-size: 0.8rem;
}
/* /Pages/Bottling/LabQc/Components/ProfileMaterialCard.razor.rz.scp.css */
/* ProfileMaterialCard - Material display card */

.material-card[b-8le69htpez] {
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-sm);
    transition: all 0.15s ease;
}

.material-card:hover[b-8le69htpez] {
    border-color: var(--gray-500);
    box-shadow: var(--labqc-material-card-hover-shadow);
}

.material-card.primary[b-8le69htpez] {
    border-left: 3px solid var(--labqc-success-fg);
}

.material-card.selected[b-8le69htpez] {
    border-color: var(--blue-500);
    background: var(--labqc-selected-bg);
}

.card-header[b-8le69htpez] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem var(--space-sm);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.component-type[b-8le69htpez] {
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex: 1;
}

.component-type i[b-8le69htpez] {
    margin-right: var(--space-2xs);
    color: var(--gray-600);
}

.select-btn[b-8le69htpez] {
    padding: 0;
    font-size: var(--font-size-md);
    color: var(--blue-500);
}

.select-btn:hover[b-8le69htpez] {
    color: var(--labqc-select-btn-hover);
}

.card-body[b-8le69htpez] {
    padding: 0.4rem var(--space-sm);
}

.material-row[b-8le69htpez] {
    display: flex;
    gap: 0.35rem;
    padding: 0.15rem 0;
    font-size: var(--font-size-sm);
}

.material-row:first-child[b-8le69htpez] {
    padding-top: 0;
}

.row-label[b-8le69htpez] {
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    min-width: 50px;
    flex-shrink: 0;
}

.row-value[b-8le69htpez] {
    color: var(--gray-900);
    word-break: break-word;
}

.lot-row[b-8le69htpez] {
    background: var(--labqc-lot-bg);
    margin: 0 -0.5rem;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-xs);
}

.lot-value[b-8le69htpez] {
    font-weight: var(--font-weight-semibold);
    color: var(--yellow-700);
}

.qty-value[b-8le69htpez] {
    font-weight: var(--font-weight-semibold);
}

.date-value[b-8le69htpez] {
    color: var(--gray-600);
}

.desc-value[b-8le69htpez] {
    color: var(--gray-700);
    font-size: var(--font-size-xs);
}

.started-row[b-8le69htpez] {
    color: var(--blue-500);
    font-weight: var(--font-weight-medium);
}

.card-actions[b-8le69htpez] {
    padding: 0.35rem var(--space-sm);
    border-top: 1px solid var(--gray-200);
    background: var(--labqc-recheck-bg);
}

.action-btn[b-8le69htpez] {
    font-size: var(--font-size-xs);
    padding: 0.2rem var(--space-sm);
}

.action-btn i[b-8le69htpez] {
    font-size: var(--font-size-sm);
}
/* /Pages/Bottling/LabQc/Components/QcProgressNav.razor.rz.scp.css */
.qc-progress-nav[b-a0bglkgqli] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0.6rem var(--space-lg);
    background: var(--surface-default);
    border-bottom: 1px solid var(--gray-200);
}

/* ── Item (dot + label) ── */

.progress-item[b-a0bglkgqli] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    position: relative;
}

/* ── Dot button ── */

.progress-dot[b-a0bglkgqli] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background: var(--surface-default);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-xs);
    transition: all 0.2s ease;
    padding: 0;
    color: var(--gray-600);
}

.progress-dot:hover[b-a0bglkgqli] {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px rgba(var(--blue-500-rgb), 0.15);
}

.progress-dot.dot-empty[b-a0bglkgqli] {
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.progress-dot.dot-in-progress[b-a0bglkgqli] {
    border-color: var(--dot-color, var(--blue-500));
    background: var(--surface-default);
    box-shadow: 0 0 0 3px rgba(var(--blue-500-rgb), 0.12);
}

.progress-dot.dot-in-progress[b-a0bglkgqli]::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot-color, var(--blue-500));
    animation: pulse-inner-b-a0bglkgqli 2s ease-in-out infinite;
}

@keyframes pulse-inner-b-a0bglkgqli {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}

.progress-dot.dot-complete[b-a0bglkgqli] {
    border-color: var(--labqc-success-fg);
    background: var(--labqc-success-fg);
    color: var(--text-on-brand);
}

.progress-dot.dot-complete i[b-a0bglkgqli] {
    font-size: var(--font-size-sm);
}

/* ── Label ── */

.progress-label[b-a0bglkgqli] {
    font-size: 0.68rem;
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    text-align: center;
}

/* ── Connector line ── */

.progress-connector[b-a0bglkgqli] {
    width: 40px;
    height: 2px;
    background: var(--gray-300);
    margin: 0 var(--space-2xs);
    margin-bottom: 1.2rem; /* align with dots, not labels */
    transition: background 0.2s ease;
}

.progress-connector.active[b-a0bglkgqli] {
    background: var(--gray-500);
}

/* ── Responsive ── */

@media (max-width: 599px) {
    .progress-label[b-a0bglkgqli] {
        display: none;
    }

    .progress-connector[b-a0bglkgqli] {
        width: 24px;
        margin-bottom: 0;
    }

    .qc-progress-nav[b-a0bglkgqli] {
        padding: var(--space-sm);
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .progress-dot[b-a0bglkgqli] {
        width: 32px;
        height: 32px;
    }

    .progress-label[b-a0bglkgqli] {
        font-size: 0.72rem;
    }
}
/* /Pages/Bottling/LabQc/Components/QcSectionCard.razor.rz.scp.css */
.qc-section-card[b-1vwisvq1d9] {
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-left: 4px solid var(--accent, var(--blue-500));
    border-radius: var(--radius-lg);
    box-shadow: var(--labqc-card-shadow);
    /* overflow: visible (not hidden) so absolute-positioned dropdowns inside
       child inputs (e.g. TankAutocomplete) can escape the card and overlay
       the next sibling section. Header + body carry the corner-clip via
       explicit border-radius below so the rounded corners stay clean. */
    overflow: visible;
    flex-shrink: 0; /* prevent flex column parent from compressing cards — forces scroll */
    transition: box-shadow 0.2s ease;
}

.qc-section-card:hover[b-1vwisvq1d9] {
    box-shadow: var(--labqc-card-shadow-hover);
}

/* ── Header ── */

.qc-section-header[b-1vwisvq1d9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    user-select: none;
    background: var(--surface-default);
    /* match card top corners — parent is overflow:visible to let dropdowns escape */
    border-top-left-radius: calc(var(--radius-lg) - 1px);
    border-top-right-radius: calc(var(--radius-lg) - 1px);
    transition: background 0.15s ease;
}

/* When collapsed, the header is the only child — round its bottom corners too. */
.qc-section-card.collapsed .qc-section-header[b-1vwisvq1d9] {
    border-bottom-left-radius: calc(var(--radius-lg) - 1px);
    border-bottom-right-radius: calc(var(--radius-lg) - 1px);
}

.qc-section-card.collapsed .qc-section-header[b-1vwisvq1d9] {
    background: var(--labqc-collapsed-header-bg);
}

.qc-section-header:hover[b-1vwisvq1d9] {
    background: var(--gray-50);
}

.qc-section-title[b-1vwisvq1d9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    color: var(--gray-900);
}

.section-icon[b-1vwisvq1d9] {
    font-size: var(--font-size-xl);
    color: var(--accent, var(--blue-500));
}


.chevron-icon[b-1vwisvq1d9] {
    font-size: 0.8rem;
    color: var(--gray-600);
    transition: transform 0.25s ease;
}

.qc-section-card.collapsed .chevron-icon[b-1vwisvq1d9] {
    transform: rotate(0deg);
}

.qc-section-card.expanded .chevron-icon[b-1vwisvq1d9] {
    transform: rotate(180deg);
}

/* ── Status Pill ── */

.qc-status-pill[b-1vwisvq1d9] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.01em;
    transition: background-color 0.25s ease, color 0.25s ease;
}

.qc-status-pill.status-empty[b-1vwisvq1d9] {
    background: var(--labqc-status-empty-bg);
    color: var(--gray-600);
}

.qc-status-pill.status-in-progress[b-1vwisvq1d9] {
    background: var(--blue-100);
    color: var(--blue-500);
}

.qc-status-pill.status-complete[b-1vwisvq1d9] {
    background: var(--green-100);
    color: var(--labqc-badge-success-fg);
}

.status-circle[b-1vwisvq1d9] {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-circle.empty[b-1vwisvq1d9] {
    background: var(--gray-500);
}

.status-circle.in-progress[b-1vwisvq1d9] {
    background: var(--blue-500);
    animation: pulse-dot-b-1vwisvq1d9 2s ease-in-out infinite;
}

@keyframes pulse-dot-b-1vwisvq1d9 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.qc-status-pill.status-complete i[b-1vwisvq1d9] {
    font-size: var(--font-size-xs);
}

/* ── Collapsed Summary ── */

.qc-collapsed-summary[b-1vwisvq1d9] {
    font-size: 0.8rem;
    color: var(--gray-600);
    font-weight: var(--font-weight-normal);
    animation: summaryFadeIn-b-1vwisvq1d9 0.2s ease;
}

@keyframes summaryFadeIn-b-1vwisvq1d9 {
    from { opacity: 0; transform: translateX(-4px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── Body ── */

.qc-section-body[b-1vwisvq1d9] {
    border-top: 1px solid var(--gray-200);
    padding: 0;
    /* match card bottom corners — parent is overflow:visible to let dropdowns escape */
    border-bottom-left-radius: calc(var(--radius-lg) - 1px);
    border-bottom-right-radius: calc(var(--radius-lg) - 1px);
    animation: sectionExpand-b-1vwisvq1d9 0.2s ease;
}

@keyframes sectionExpand-b-1vwisvq1d9 {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Tablet ── */

@media (min-width: 768px) and (max-width: 1199px) {
    .qc-section-header[b-1vwisvq1d9] {
        padding: 0.85rem var(--space-lg);
        min-height: 52px;
    }

    .qc-section-title[b-1vwisvq1d9] {
        font-size: var(--font-size-lg);
    }
}
/* /Pages/Bottling/LabQc/Components/TankGallonsSection.razor.rz.scp.css */
/* ========== TANK GALLONS SECTION ========== */
.tank-gallons-section[b-4ex72jmypr] {
    margin-bottom: var(--space-lg);
    max-width: 600px;
}

.tank-gallons-section table[b-4ex72jmypr] {
    font-size: 0.78rem;
}

.tank-gallons-section th[b-4ex72jmypr] {
    background: var(--gray-50);
    font-weight: var(--font-weight-semibold);
    text-align: center;
    padding: var(--space-2xs) 0.2rem;
    white-space: nowrap;
}

.tank-gallons-section td[b-4ex72jmypr] {
    padding: 0.15rem 0.2rem;
    vertical-align: middle;
}

/* Column widths */
.col-order[b-4ex72jmypr] { width: 45px; text-align: center; }
.col-tank[b-4ex72jmypr] { width: 80px; }
.col-measurement[b-4ex72jmypr] { width: 85px; }
.col-gallons[b-4ex72jmypr] { width: 65px; }
.col-difference[b-4ex72jmypr] { width: 65px; text-align: center; }
.col-actions[b-4ex72jmypr] { width: 30px; text-align: center; }

/* Order controls */
.order-controls[b-4ex72jmypr] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: 1;
}

.order-number[b-4ex72jmypr] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.order-btn[b-4ex72jmypr] {
    color: var(--gray-500);
    font-size: var(--font-size-2xs);
    line-height: 1;
    padding: 0;
}

.order-btn:hover:not(:disabled)[b-4ex72jmypr] {
    color: var(--blue-500);
}

.order-btn:disabled[b-4ex72jmypr] {
    opacity: 0.3;
}

/* Input with verification icon */
.input-with-verify[b-4ex72jmypr] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-verify .form-control[b-4ex72jmypr] {
    flex: 1;
}

.verify-icon[b-4ex72jmypr] {
    position: absolute;
    right: 4px;
    font-size: var(--font-size-2xs);
    pointer-events: none;
}

/* Saved row indicator */
.saved-row[b-4ex72jmypr] {
    background-color: var(--labqc-spec-ok-bg);
}

/* Input styling */
.tank-gallons-section .form-control[b-4ex72jmypr] {
    font-size: 0.72rem;
    padding: 0.12rem 0.2rem;
    text-align: center;
}

.tank-gallons-section .form-control:disabled[b-4ex72jmypr] {
    background-color: var(--gray-50);
}

/* Difference values */
.difference-value[b-4ex72jmypr] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem;
}

.difference-value.positive[b-4ex72jmypr] { color: var(--labqc-success-fg); }
.difference-value.negative[b-4ex72jmypr] { color: var(--red-500); }

/* Total row */
.total-row[b-4ex72jmypr] {
    background: var(--labqc-selected-bg);
}

.total-row td[b-4ex72jmypr] {
    padding: 0.4rem 0.2rem;
    border-top: 2px solid var(--gray-300);
}

.total-value[b-4ex72jmypr] {
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--blue-500);
}

/* Add button in header */
.btn-add[b-4ex72jmypr] {
    padding: 0.1rem 0.3rem;
    font-size: var(--font-size-xs);
}

/* Action buttons container */
.action-buttons[b-4ex72jmypr] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Saved indicator */
.saved-indicator[b-4ex72jmypr] {
    font-size: var(--font-size-base);
}

/* Unsaved indicator */
.unsaved-indicator[b-4ex72jmypr] {
    font-size: var(--font-size-xs);
    opacity: 0.5;
}

/* (Empty-state rules removed — no .section-empty-state markup in this component.) */

/* Uncalibrated tank hint */
.uncalibrated-hint[b-4ex72jmypr] {
    display: block;
    font-size: var(--font-size-2xs);
    color: var(--gray-600);
    margin-top: 0.1rem;
    line-height: 1.2;
}

.uncalibrated-hint i[b-4ex72jmypr] {
    font-size: 0.6rem;
}

/* Remove button */
.tank-gallons-section .btn-link[b-4ex72jmypr] {
    opacity: 0.4;
}

.tank-gallons-section tr:hover .btn-link[b-4ex72jmypr] {
    opacity: 1;
}

/* ========== IPAD / TABLET OPTIMIZATION ========== */
@media (min-width: 768px) and (max-width: 1199px) {
    .tank-gallons-section[b-4ex72jmypr] {
        max-width: 700px;
    }

    .tank-gallons-section table[b-4ex72jmypr] {
        font-size: var(--font-size-md);
    }

    .tank-gallons-section th[b-4ex72jmypr] {
        padding: 0.4rem;
    }

    .tank-gallons-section td[b-4ex72jmypr] {
        padding: 0.35rem;
    }

    /* Larger inputs for touch */
    .tank-gallons-section .form-control[b-4ex72jmypr] {
        min-height: 44px;
        font-size: 16px !important;
        padding: 0.4rem;
    }

    /* Column widths - slightly larger */
    .col-tank[b-4ex72jmypr] { width: 100px; }
    .col-measurement[b-4ex72jmypr] { width: 100px; }
    .col-gallons[b-4ex72jmypr] { width: 80px; }
    .col-actions[b-4ex72jmypr] { width: 50px; }

    /* Order buttons - larger touch targets */
    .order-btn[b-4ex72jmypr] {
        min-width: 32px;
        min-height: 32px;
        font-size: var(--font-size-md);
    }

    /* Action buttons - larger touch targets */
    .tank-gallons-section .btn-link[b-4ex72jmypr] {
        min-width: 44px;
        min-height: 44px;
        font-size: var(--font-size-xl);
    }

    .saved-indicator[b-4ex72jmypr] {
        font-size: var(--font-size-xl);
    }
}

@media (pointer: coarse) {
    /* Always show remove button on touch */
    .tank-gallons-section .btn-link[b-4ex72jmypr] {
        opacity: 0.6;
    }
}
/* /Pages/Bottling/LabQc/LabQcRoundEntry.razor.rz.scp.css */
/* Lab QC Entry Page — Scrollable Section Cards */

.lab-qc-page[b-s0c4u2ztrw] {
    display: grid;
    grid-template-rows: auto auto 1fr; /* header / progress-nav / main-area */
    height: calc(100dvh - 11px); /* 3px top + 3px bottom wrapper padding + 5px .main padding-bottom */
    overflow: hidden;
}

@media (min-width: 641px) {
    .lab-qc-page[b-s0c4u2ztrw] {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
    }
}

/* ========== STICKY HEADER ========== */
.qc-sticky-header[b-s0c4u2ztrw] {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--surface-default);
    border-bottom: 1px solid var(--gray-300);
    box-shadow: var(--labqc-card-shadow);
}

/* ========== CONTEXT BAR (replaces compact header) ========== */
.qc-context-bar[b-s0c4u2ztrw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--labqc-collapsed-header-bg);
    border-bottom: 1px solid var(--gray-200);
    gap: var(--space-md);
    flex-wrap: wrap;
}

.context-pill[b-s0c4u2ztrw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: var(--space-2xs) 0.65rem;
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    font-size: 0.82rem;
    color: var(--gray-700);
    white-space: nowrap;
}

.context-pill i[b-s0c4u2ztrw] {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.context-pill strong[b-s0c4u2ztrw] {
    color: var(--gray-900);
}

.context-pill.tank-pill[b-s0c4u2ztrw] {
    background: var(--blue-100);
    border-color: var(--labqc-tank-pill-border);
    color: var(--wr-status-info-fg);
}

.shiner-badge[b-s0c4u2ztrw] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    margin-left: var(--space-2xs);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-xs);
    background: var(--labqc-badge-warning-bg);
    color: var(--gray-900);
}

.tech-label[b-s0c4u2ztrw] {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    margin-bottom: 0;
}

.tech-input[b-s0c4u2ztrw] {
    width: 70px;
    font-size: var(--font-size-md) !important;
    padding: 0.15rem 0.35rem;
    height: auto;
    min-height: unset;
    line-height: 1.3;
    text-transform: uppercase;
}

/* ========== TOOLBAR BREADCRUMB ========== */
.toolbar-breadcrumb[b-s0c4u2ztrw] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--gray-600);
}

.breadcrumb-blend[b-s0c4u2ztrw] {
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
}

.breadcrumb-owner[b-s0c4u2ztrw] {
    color: var(--gray-600);
}

.breadcrumb-sep[b-s0c4u2ztrw] {
    color: var(--gray-300);
}

/* ========== SECTIONS SCROLL AREA ========== */
.qc-main-area[b-s0c4u2ztrw] {
    display: flex;
    overflow: hidden;
    min-height: 0; /* grid child must allow shrinking below content size */
}

.qc-sections-scroll[b-s0c4u2ztrw] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    background: var(--surface-subtle);
    scroll-behavior: smooth;
}

/* ========== ANALYSIS SPECS STRIP ========== */
.analysis-specs-strip[b-s0c4u2ztrw] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: 0.6rem var(--space-md);
    background: var(--labqc-selected-bg);
    border-bottom: 1px solid var(--labqc-specs-strip-border);
}

.spec-chip[b-s0c4u2ztrw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 0.78rem;
    color: var(--gray-700);
}

.spec-chip-label[b-s0c4u2ztrw] {
    font-weight: var(--font-weight-semibold);
    color: var(--blue-500);
}

/* ========== SWAB INLINE SECTION ========== */
.swab-inline-section[b-s0c4u2ztrw] {
    padding: 0.6rem var(--space-md);
    border-bottom: 1px solid var(--gray-200);
    background: var(--surface-default);
}

.swab-inline-header[b-s0c4u2ztrw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.swab-inline-title[b-s0c4u2ztrw] {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
}

.swab-inline-title i[b-s0c4u2ztrw] {
    color: var(--red-500);
    margin-right: 0.2rem;
}

.swab-inline-entries[b-s0c4u2ztrw] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.swab-inline-row .form-control[b-s0c4u2ztrw] {
    font-size: 0.82rem;
    padding: 0.3rem var(--space-sm);
}

.swab-inline-row .form-control:first-child[b-s0c4u2ztrw] {
    width: 120px;
}

.swab-rlu[b-s0c4u2ztrw] {
    width: 70px;
    text-align: right;
}

/* ========== SWAB STATUS BADGE ========== */
.swab-status[b-s0c4u2ztrw] {
    font-size: 0.6rem;
    font-weight: var(--font-weight-semibold);
    padding: 0.08rem var(--space-2xs);
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.swab-status.pass[b-s0c4u2ztrw] {
    background: var(--green-100);
    color: var(--labqc-badge-success-fg);
}

.swab-status.caution[b-s0c4u2ztrw] {
    background: var(--yellow-100);
    color: var(--wr-status-warning-fg);
}

.swab-status.fail[b-s0c4u2ztrw] {
    background: var(--state-danger-bg);
    color: var(--labqc-status-fail-fg);
}

/* ========== PACKAGING HEADER BAR ========== */
.packaging-header-bar[b-s0c4u2ztrw] {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--gray-200);
    background: var(--surface-default);
}

/* ========== LOADING ========== */
.loading-spinner[b-s0c4u2ztrw] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    min-height: 200px; /* merged from the (deleted) duplicate definition below */
}

/* ========== PROFILE WARNING ========== */
.profile-warning-banner[b-s0c4u2ztrw] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.4rem var(--space-md);
    background: var(--yellow-100);
    color: var(--yellow-700);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--labqc-warning-border);
}

.profile-warning-banner i[b-s0c4u2ztrw] {
    color: var(--labqc-warning-icon-fg);
}

/* ========== TABLET ========== */
@media (min-width: 768px) and (max-width: 1199px) {
    .qc-sections-scroll[b-s0c4u2ztrw] {
        padding: var(--space-md);
    }

    .context-pill[b-s0c4u2ztrw] {
        font-size: var(--font-size-md);
        padding: 0.3rem 0.7rem;
    }

    .swab-inline-row .form-control[b-s0c4u2ztrw] {
        min-height: 44px;
        font-size: 16px;
    }
}

@media (max-width: 599px) {
    .qc-sections-scroll[b-s0c4u2ztrw] {
        padding: var(--space-sm);
        gap: var(--space-sm);
    }

    .context-pills[b-s0c4u2ztrw] {
        gap: 0.35rem;
    }

    .context-pill[b-s0c4u2ztrw] {
        font-size: var(--font-size-sm);
        padding: 0.2rem var(--space-sm);
    }
}

/* ========== QUICK ADD FAB ========== */
.qc-fab[b-s0c4u2ztrw] {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--blue-500);
    color: var(--text-on-brand);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(var(--blue-500-rgb), 0.35);
    cursor: pointer;
    z-index: 50;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.qc-fab:hover[b-s0c4u2ztrw] {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(var(--blue-500-rgb), 0.45);
}

.qc-fab:active[b-s0c4u2ztrw] {
    transform: scale(0.95);
}

@media (min-width: 768px) and (max-width: 1199px) {
    .qc-fab[b-s0c4u2ztrw] {
        width: 64px;
        height: 64px;
        font-size: 1.75rem;
        bottom: 1.25rem;
        right: 1.25rem;
    }
}

@media print {
    .qc-fab[b-s0c4u2ztrw] {
        display: none;
    }
}

/* ========== PRINT STYLESHEET ========== */
@media print {
    .lab-qc-page[b-s0c4u2ztrw] {
        height: auto;
        overflow: visible;
    }

    .qc-sticky-header[b-s0c4u2ztrw] {
        position: static;
        box-shadow: none;
        border-bottom: 2px solid var(--black);
    }

    /* Hide interactive elements */
    .toolbar-right .btn[b-s0c4u2ztrw],
    .toolbar-divider[b-s0c4u2ztrw],
    .session-controls[b-s0c4u2ztrw],
    .save-status[b-s0c4u2ztrw],
    .qc-fab[b-s0c4u2ztrw],
    .swab-add-btn[b-s0c4u2ztrw],
    .packaging-header-bar[b-s0c4u2ztrw] {
        display: none !important;
    }

    /* Expand all sections */
    .qc-sections-scroll[b-s0c4u2ztrw] {
        overflow: visible;
        padding: 0;
        background: var(--white);
    }

    /* Remove shadows and rounded corners for print */
    [b-s0c4u2ztrw] .qc-section-card {
        box-shadow: none;
        border-radius: 0;
        border-left-width: 3px;
        page-break-inside: avoid;
        margin-bottom: var(--space-sm);
    }

    /* Force all sections expanded */
    [b-s0c4u2ztrw] .qc-section-body {
        display: block !important;
    }

    /* Hide progress nav */
    [b-s0c4u2ztrw] .qc-progress-nav {
        display: none;
    }

    /* Context bar compact for print */
    .qc-context-bar[b-s0c4u2ztrw] {
        background: none;
        padding: var(--space-2xs) 0;
        border-bottom: 1px solid var(--black);
    }

    .context-pill[b-s0c4u2ztrw] {
        border: none;
        background: none;
        padding: 0 0.3rem;
        font-size: var(--font-size-sm);
    }

    /* Inputs show as text */
    input[b-s0c4u2ztrw], select[b-s0c4u2ztrw], textarea[b-s0c4u2ztrw] {
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* Print timestamp footer */
    .lab-qc-page[b-s0c4u2ztrw]::after {
        content: "Printed " attr(data-print-date);
        display: block;
        text-align: right;
        font-size: var(--font-size-2xs);
        color: var(--gray-600);
        padding-top: var(--space-sm);
        border-top: 1px solid var(--gray-300);
    }
}

/* Toolbar Row */
.toolbar-row[b-s0c4u2ztrw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem var(--space-md);
    background: linear-gradient(to bottom, var(--gray-50), var(--gray-200));
    border-bottom: 1px solid var(--gray-300);
}


.toolbar-left .page-title[b-s0c4u2ztrw] {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    color: var(--gray-900);
}

.toolbar-right .btn[b-s0c4u2ztrw] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
}

.toolbar-right .btn:disabled[b-s0c4u2ztrw] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Session Controls */
.session-badge[b-s0c4u2ztrw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: var(--space-2xs) 0.6rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.session-badge.session-open[b-s0c4u2ztrw],
.save-badge.saved[b-s0c4u2ztrw] {
    background: var(--green-100);
    color: var(--labqc-badge-success-fg);
    border: 1px solid var(--labqc-badge-success-border);
}

.session-badge.session-closed[b-s0c4u2ztrw] {
    background: var(--labqc-badge-neutral-bg);
    color: var(--labqc-badge-neutral-fg);
    border: 1px solid var(--labqc-badge-neutral-border);
}

.session-badge i[b-s0c4u2ztrw] {
    font-size: 0.6rem;
}

.session-badge.session-open i[b-s0c4u2ztrw] {
    color: var(--labqc-success-fg);
}

.session-badge.session-closed i[b-s0c4u2ztrw] {
    color: var(--labqc-success-fg);
}

/* Blinking animation for in-progress indicator */
.blink[b-s0c4u2ztrw] {
    animation: blink-animation-b-s0c4u2ztrw 1.5s ease-in-out infinite;
}

@keyframes blink-animation-b-s0c4u2ztrw {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Toolbar divider */
.toolbar-divider[b-s0c4u2ztrw] {
    width: 1px;
    height: 20px;
    background: var(--gray-300);
    margin: 0 var(--space-2xs);
}

/* ========== SAVE STATUS INDICATOR ========== */
.save-status[b-s0c4u2ztrw] {
    display: flex;
    align-items: center;
}

.save-badge[b-s0c4u2ztrw] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    padding: var(--space-2xs) 0.6rem;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.save-badge .status-dot[b-s0c4u2ztrw] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.save-badge .spinner-border-sm[b-s0c4u2ztrw] {
    width: 12px;
    height: 12px;
    border-width: 2px;
}

/* Saved state - green */
.save-badge.saved .status-dot[b-s0c4u2ztrw] {
    background: var(--labqc-success-fg);
}

/* Unsaved state - yellow with pulsing dot */
.save-badge.unsaved[b-s0c4u2ztrw] {
    background: var(--yellow-100);
    color: var(--wr-status-warning-fg);
    border: 1px solid var(--labqc-warning-border);
}

.save-badge.unsaved .status-dot[b-s0c4u2ztrw] {
    background: var(--labqc-badge-warning-bg);
    animation: pulse-dot-b-s0c4u2ztrw 1.5s ease-in-out infinite;
}

@keyframes pulse-dot-b-s0c4u2ztrw {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Saving state - blue with spinner */
.save-badge.saving[b-s0c4u2ztrw] {
    background: var(--wr-status-info-bg);
    color: var(--wr-status-info-fg);
    border: 1px solid var(--labqc-tank-pill-border);
}

/* Mobile: show just the dot */
@media (max-width: 575.98px) {
    .save-badge[b-s0c4u2ztrw] {
        padding: var(--space-2xs);
        min-width: 24px;
        justify-content: center;
    }

    .save-badge .status-dot[b-s0c4u2ztrw] {
        width: 10px;
        height: 10px;
    }
}

/* Swab add button (used in the inline ATP swab header) */
.swab-add-btn[b-s0c4u2ztrw] {
    padding: 0;
    font-size: var(--font-size-md);
    line-height: 1;
    border: none;
    background: transparent;
    color: var(--labqc-success-fg);
}

.swab-add-btn:hover[b-s0c4u2ztrw] {
    color: var(--labqc-success-fg-hover);
}

/* Dead legacy rules removed 2026-07-18: the pre-extraction single-page styles
   (header metadata/closure/info cards, patrol-table, entry-table, capacity-section/
   table, form-actions) matched no markup in this component — the tables render
   inside the extracted child tab components, which carry their own scope. */

/* Panel — .modal-backdrop base hoisted to .nwc-modal-backdrop (site.css) */

.modal[b-s0c4u2ztrw] {
    z-index: var(--z-slot-badge);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .toolbar-left .page-title[b-s0c4u2ztrw] {
        font-size: var(--font-size-lg);
    }
}

/* ========== IPAD / TABLET OPTIMIZATION ========== */
/* Target tablets in landscape (768px - 1199px) with touch capability */
@media (min-width: 768px) and (max-width: 1199px) {
    /* Prevent iOS zoom on input focus - all inputs must be 16px+ */
    input[type="text"][b-s0c4u2ztrw],
    input[type="number"][b-s0c4u2ztrw],
    input[type="time"][b-s0c4u2ztrw],
    input[type="date"][b-s0c4u2ztrw],
    select[b-s0c4u2ztrw],
    textarea[b-s0c4u2ztrw],
    .form-control[b-s0c4u2ztrw],
    .form-select[b-s0c4u2ztrw] {
        font-size: 16px !important;
    }

    /* Increase touch targets to 44px minimum (Apple HIG) */
    .btn[b-s0c4u2ztrw],
    .toolbar-right .btn[b-s0c4u2ztrw] {
        min-height: 44px;
        min-width: 44px;
        padding: var(--space-sm) var(--space-md);
    }

    .btn-sm[b-s0c4u2ztrw] {
        min-height: 44px;
        padding: var(--space-sm) var(--space-md);
    }

    /* Session badge - more visible */
    .session-badge[b-s0c4u2ztrw] {
        padding: 0.4rem var(--space-md);
        font-size: 0.8rem;
    }

    /* Save badge - more visible */
    .save-badge[b-s0c4u2ztrw] {
        padding: 0.4rem var(--space-md);
        font-size: 0.8rem;
    }

    /* Swab add/remove buttons - larger touch targets */
    .swab-add-btn[b-s0c4u2ztrw] {
        min-width: 44px;
        min-height: 44px;
        font-size: var(--font-size-2xl) !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Tech input in header */
    .tech-input[b-s0c4u2ztrw] {
        min-height: 44px !important;
        font-size: 16px !important;
        width: 90px;
    }

    /* Add buttons throughout - larger touch targets */
    .btn-link[b-s0c4u2ztrw] {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Touch-specific improvements (any touch device) */
@media (pointer: coarse) {
    /* Prevent text selection on buttons during tap */
    .btn[b-s0c4u2ztrw], .session-badge[b-s0c4u2ztrw], .save-badge[b-s0c4u2ztrw] {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    /* Faster tap response - remove 300ms delay */
    .btn[b-s0c4u2ztrw] {
        touch-action: manipulation;
    }

    /* Larger tap areas for small interactive elements */
    .swab-status[b-s0c4u2ztrw] {
        padding: 0.3rem var(--space-sm);
        font-size: var(--font-size-xs);
    }
}

/* ========== PRINT ========== */
@media print {
    .qc-sticky-header[b-s0c4u2ztrw] {
        position: relative;
        box-shadow: none;
    }

    .toolbar-row[b-s0c4u2ztrw] {
        display: none;
    }
}
/* /Pages/Bottling/Manager/BottlingChangesManager.razor.rz.scp.css */
.bcm-filter[b-euz4o6ubkh] {
    max-width: 160px;
}

.bcm-presets[b-euz4o6ubkh] {
    display: inline-flex;
    gap: 0.25rem;
}

.bcm-empty[b-euz4o6ubkh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--bcm-muted-fg);
}

.bcm-table[b-euz4o6ubkh] {
    margin: 0;
    font-size: 0.85rem;
}

.bcm-table thead th[b-euz4o6ubkh] {
    position: sticky;
    top: 0;
    background: var(--slate-50);
    z-index: 1;
    border-bottom: 2px solid var(--bcm-divider);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--bcm-muted-fg);
}

.bcm-table tbody tr[b-euz4o6ubkh] {
    cursor: pointer;
}

.bcm-col-when[b-euz4o6ubkh] { width: 130px; }
.bcm-col-client[b-euz4o6ubkh] { width: 22%; }
.bcm-col-by[b-euz4o6ubkh] { width: 120px; }

.bcm-when[b-euz4o6ubkh] {
    white-space: nowrap;
    color: var(--bcm-muted-fg);
    font-size: 0.8rem;
}

.bcm-kind[b-euz4o6ubkh] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 600;
    margin-right: 0.5rem;
}

.bcm-created[b-euz4o6ubkh] { color: var(--bcm-created-fg); }
.bcm-deleted[b-euz4o6ubkh] { color: var(--bcm-deleted-fg); }
.bcm-moved[b-euz4o6ubkh] { color: var(--bcm-moved-fg); }
.bcm-status[b-euz4o6ubkh] { color: var(--amber-600); }
.bcm-updated[b-euz4o6ubkh] { color: var(--indigo-600); }

.bcm-summary[b-euz4o6ubkh] {
    color: var(--bcm-summary-fg);
}

.bcm-client[b-euz4o6ubkh] {
    color: var(--bcm-client-fg);
}

.bcm-by[b-euz4o6ubkh] {
    color: var(--bcm-muted-fg);
    white-space: nowrap;
}

.bcm-pager[b-euz4o6ubkh] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--bcm-divider);
    font-size: 0.8rem;
    color: var(--bcm-muted-fg);
}

.bcm-inspector[b-euz4o6ubkh] {
    padding: 0.75rem 1rem;
    height: 100%;
    overflow-y: auto;
}

.bcm-inspector-head[b-euz4o6ubkh] {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bcm-divider);
}

.bcm-inspector-head h6[b-euz4o6ubkh] {
    margin: 0;
    font-weight: 600;
}

.bcm-inspector-sub[b-euz4o6ubkh] {
    font-size: 0.8rem;
    color: var(--bcm-muted-fg);
}

/* ── daily-digest send-now ribbon ── */
.bcm-ribbon[b-euz4o6ubkh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.75rem;
}

.bcm-ribbon-info[b-euz4o6ubkh] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--bcm-muted-fg);
    font-size: 0.82rem;
}

.bcm-ribbon-actions[b-euz4o6ubkh] {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.bcm-send-notice[b-euz4o6ubkh] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
}

.bcm-send-ok[b-euz4o6ubkh] { color: var(--bcm-created-fg); }
.bcm-send-err[b-euz4o6ubkh] { color: var(--bcm-deleted-fg); }
/* /Pages/Bottling/Manager/BottlingHistoryManager.razor.rz.scp.css */
/* Bottling History Manager — filterbar + statusbar tweaks. The shell/workspace/pane
   layout comes from ManagerShell; only page-specific (bh-*) styling lives here.
   RenderFragment content keeps this consumer's isolation scope, so these reach the
   filterbar/statusbar markup declared in BottlingHistoryManager.razor. */

.bh-filter[b-hadz1m4dmh] {
    width: auto;
    min-width: 110px;
    font-size: 0.8rem;
}

.bh-filter-sep[b-hadz1m4dmh] {
    width: 1px;
    height: 20px;
    background: var(--gray-300);
    margin: 0 2px;
}

.bh-date-presets[b-hadz1m4dmh] {
    display: flex;
    gap: var(--space-2xs);
}

.bh-date-input[b-hadz1m4dmh] {
    width: 120px;
    font-size: var(--font-size-sm);
    padding: 0.2rem 0.35rem;
}

.bh-date-sep[b-hadz1m4dmh] {
    color: var(--gray-600);
    font-size: 0.8rem;
}

.bh-clear-filters[b-hadz1m4dmh] {
    margin-left: auto;
}
/* /Pages/Bottling/Manager/Components/BottlingClientRail.razor.rz.scp.css */
/* Bottling History Manager — client rail (tree pane). Scoped to BottlingClientRail. */

.bh-rail-search[b-hzi2nx7es2] {
    position: relative;
    padding: 6px 8px;
    border-bottom: 1px solid var(--gray-100);
}

.bh-rail-search i[b-hzi2nx7es2] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    font-size: 0.78rem;
}

.bh-rail-search input[b-hzi2nx7es2] { padding-left: 26px; font-size: 0.8rem; }

.bh-rail-list[b-hzi2nx7es2] {
    list-style: none;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    flex: 1;
}

.bh-rail-row[b-hzi2nx7es2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    appearance: none;
    background: transparent;
    border: none;
    text-align: left;
    padding: 5px 8px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    color: var(--gray-700);
    font-size: 0.8rem;
}

.bh-rail-row:hover[b-hzi2nx7es2] { background: var(--gray-100); color: var(--gray-900); }
.bh-rail-row.selected[b-hzi2nx7es2] { background: var(--bh-selected-bg); color: var(--bh-selected-fg); font-weight: var(--font-weight-semibold); }


.bh-rail-count[b-hzi2nx7es2] {
    flex-shrink: 0;
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

.bh-rail-row.selected .bh-rail-count[b-hzi2nx7es2] { color: var(--bh-selected-fg); }

.bh-rail-empty[b-hzi2nx7es2] {
    padding: 12px 8px;
    color: var(--gray-500);
    font-size: var(--font-size-sm);
    font-style: italic;
    text-align: center;
}
/* /Pages/Bottling/Manager/Components/BottlingDateInspector.razor.rz.scp.css */
/* Bottling History Manager — inspector pane. Scoped to BottlingDateInspector. */

/* .bh-insp-empty container is global (.nwc-empty in site.css); this pane keeps a
   smaller 2.2rem icon and its own message margin. */
.bh-insp-empty i[b-na3ynzcef4] { font-size: 2.2rem; margin-bottom: 8px; color: var(--gray-400); }
.bh-insp-empty p[b-na3ynzcef4] { margin: 6px 0 0; }

.bh-insp-title[b-na3ynzcef4] { align-items: center; }
.bh-insp-brand[b-na3ynzcef4] {
    font-weight: var(--font-weight-semibold);
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-900);
}
.bh-insp-open[b-na3ynzcef4] { padding: 0 4px; }

/* Sub-tabs */
.bh-subtabs[b-na3ynzcef4] {
    display: flex;
    gap: 2px;
    padding: 6px 8px 0;
    border-bottom: 1px solid var(--gray-200);
    background: var(--bh-subtabs-bg);
}

.bh-subtab[b-na3ynzcef4] {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    padding: 5px 10px;
    font-size: 0.75rem;
    color: var(--gray-600);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    cursor: pointer;
}

.bh-subtab:hover[b-na3ynzcef4] { color: var(--gray-900); }
.bh-subtab.active[b-na3ynzcef4] {
    background: var(--white);
    border-color: var(--gray-300);
    border-bottom-color: var(--white);
    margin-bottom: -1px;
    color: var(--bh-active-tab-fg);
    font-weight: var(--font-weight-semibold);
}

.bh-insp-body[b-na3ynzcef4] {
    padding: 12px 14px;
    overflow-y: auto;
    flex: 1;
    font-size: var(--font-size-md);
}

/* Key/value grid — mechanics now come from global .nwc-kv (site.css), see
   LAYOUT-PATTERNS.md Pattern 2. Only this instance's deltas remain local. */
.bh-insp-kv[b-na3ynzcef4] {
    grid-template-columns: 92px 1fr;
    gap: 5px 10px;
    margin: 0 0 12px;
    font-size: 0.8rem;
}

.bh-insp-kv dt[b-na3ynzcef4] { color: var(--bh-muted-fg); }
.bh-insp-kv dd[b-na3ynzcef4] { color: var(--gray-900); }

.bh-insp-status[b-na3ynzcef4] { max-width: 180px; }
.bh-insp-sub[b-na3ynzcef4] { color: var(--gray-500); margin-left: 6px; font-size: var(--font-size-xs); }

/* Sections */
.bh-insp-section[b-na3ynzcef4] { margin-top: 6px; }
.bh-insp-section-head[b-na3ynzcef4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 4px;
    margin-bottom: 8px;
}

.bh-insp-muted[b-na3ynzcef4] { color: var(--gray-500); }
.bh-insp-notes[b-na3ynzcef4] { white-space: pre-wrap; margin: 0 0 6px; font-size: 0.8rem; }
.bh-insp-actions[b-na3ynzcef4] { margin-top: 10px; }

.bh-insp-signoff-summary[b-na3ynzcef4] { font-weight: var(--font-weight-semibold); color: var(--gray-600); }
.bh-insp-signoff-summary.complete[b-na3ynzcef4] { color: var(--green-600); }

/* Signoff list */
.bh-signoff-list[b-na3ynzcef4] { list-style: none; margin: 0; padding: 0; }
.bh-signoff-row[b-na3ynzcef4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.8rem;
}

.bh-signoff-dept[b-na3ynzcef4] { display: inline-flex; align-items: center; gap: 6px; }
.bh-signoff-row.approved .bh-signoff-dept i[b-na3ynzcef4] { color: var(--green-600); }
.bh-signoff-row.pending .bh-signoff-dept i[b-na3ynzcef4] { color: var(--gray-400); }
.bh-signoff-code[b-na3ynzcef4] { color: var(--gray-500); font-size: var(--font-size-xs); }
.bh-signoff-meta[b-na3ynzcef4] { color: var(--gray-600); font-size: var(--font-size-xs); text-align: right; }
/* /Pages/Bottling/Manager/Components/BottlingHistoryGrid.razor.rz.scp.css */
/* Bottling History Manager — grid pane. Scoped to BottlingHistoryGrid via CSS isolation,
   so the col-* / cell class names below never collide with the legacy page. */

.bh-grid-wrapper[b-lrk83w1qx1] {
    flex: 1;
    overflow: auto;
    height: 100%;
}

/* .bh-grid-loading base hoisted to .nwc-loading-center (site.css) */

.bh-grid-empty[b-lrk83w1qx1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bh-muted-fg);
    text-align: center;
    padding: var(--space-3xl);
}

.bh-grid-empty i[b-lrk83w1qx1] {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    color: var(--gray-400);
}

.bh-grid-empty p[b-lrk83w1qx1] {
    margin: 0;
}

/* Group bar (Open all / Close all) */
.bh-group-bar[b-lrk83w1qx1] {
    display: flex;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: 11;
}

/* Groups */
.bh-group-section[b-lrk83w1qx1] { border-bottom: 1px solid var(--gray-300); }
.bh-group-section:last-child[b-lrk83w1qx1] { border-bottom: none; }

.bh-group-header[b-lrk83w1qx1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-base);
}

.bh-group-header:hover[b-lrk83w1qx1] {
    background: linear-gradient(135deg, var(--gray-300) 0%, var(--gray-400) 100%);
}

.bh-group-header i[b-lrk83w1qx1] { color: var(--gray-700); font-size: 0.8rem; }
.bh-group-name[b-lrk83w1qx1] { font-weight: var(--font-weight-semibold); color: var(--nwc-text); }
.bh-group-stats[b-lrk83w1qx1] { margin-left: auto; color: var(--gray-600); font-size: 0.8rem; }

.bh-group-loading[b-lrk83w1qx1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    color: var(--gray-600);
    font-style: italic;
    font-size: var(--font-size-md);
}

.bh-group-empty[b-lrk83w1qx1] {
    padding: var(--space-md);
    color: var(--gray-600);
    font-style: italic;
    text-align: center;
    font-size: var(--font-size-md);
}

/* Data table */
.bh-grid[b-lrk83w1qx1] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-md);
}

.bh-grid th[b-lrk83w1qx1] {
    position: sticky;
    top: 0;
    background: var(--bh-header-gradient);
    color: var(--white);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-sm) 0.4rem;
    text-align: left;
    white-space: nowrap;
    z-index: 10;
    font-size: 0.8rem;
}

.bh-grid th.sortable[b-lrk83w1qx1] { cursor: pointer; user-select: none; }
.bh-grid th.sortable:hover[b-lrk83w1qx1] { background: var(--bh-header-hover-gradient); }
.bh-grid th.sort-desc i[b-lrk83w1qx1],
.bh-grid th.sort-asc i[b-lrk83w1qx1] { color: var(--yellow-500); }
.bh-grid th.sort-desc i[b-lrk83w1qx1]::before { content: "\F128"; }
.bh-grid th.sort-asc i[b-lrk83w1qx1]::before { content: "\F12B"; }

.bh-grid td[b-lrk83w1qx1] {
    padding: 0.35rem 0.4rem;
    border-bottom: 1px solid var(--gray-300);
    vertical-align: top;
}

.bh-grid tbody tr:hover[b-lrk83w1qx1] { background: var(--gray-50); }
.bh-grid tbody tr.row-completed[b-lrk83w1qx1] { background: var(--green-100); }
.bh-grid tbody tr.row-canceled[b-lrk83w1qx1] { background: var(--state-danger-bg); opacity: 0.7; }
.bh-grid tbody tr.selected[b-lrk83w1qx1] { background: var(--bh-selected-bg); box-shadow: inset 3px 0 0 var(--app-shell-blue-bright); }

.clickable-row[b-lrk83w1qx1] { cursor: pointer; }
.clickable-row:hover[b-lrk83w1qx1] { background: var(--bh-selected-bg); }

/* Column widths */
.col-check[b-lrk83w1qx1] { width: 32px; text-align: center; }
.col-date[b-lrk83w1qx1] { width: 110px; }
.col-lot[b-lrk83w1qx1] { width: 110px; }
.col-wine[b-lrk83w1qx1] { width: 90px; }
.col-client[b-lrk83w1qx1] { width: 120px; }
.col-brand[b-lrk83w1qx1] { width: 120px; }
.col-cases[b-lrk83w1qx1] { width: 50px; text-align: right; }
.col-actual[b-lrk83w1qx1] { width: 70px; }
.col-time[b-lrk83w1qx1] { width: 70px; }
.col-signoff[b-lrk83w1qx1] { width: 64px; text-align: center; }

/* Cell layouts */
.date-cell[b-lrk83w1qx1],
.lot-cell[b-lrk83w1qx1],
.wine-cell[b-lrk83w1qx1],
.client-cell[b-lrk83w1qx1],
.brand-cell[b-lrk83w1qx1],
.actual-cell[b-lrk83w1qx1],
.time-cell[b-lrk83w1qx1] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.date-value[b-lrk83w1qx1],
.client-name[b-lrk83w1qx1],
.brand-name[b-lrk83w1qx1] {
    font-weight: var(--font-weight-semibold);
    color: var(--nwc-text);
    font-size: 0.8rem;
}

.line-name[b-lrk83w1qx1],
.tag-date[b-lrk83w1qx1],
.subava[b-lrk83w1qx1],
.client-code[b-lrk83w1qx1],
.bottle-info[b-lrk83w1qx1],
.order-num[b-lrk83w1qx1],
.sequence[b-lrk83w1qx1],
.actual-gallons[b-lrk83w1qx1],
.cases-per-hour[b-lrk83w1qx1] {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

.lot-link[b-lrk83w1qx1] {
    padding: 0;
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    text-align: left;
}

.vintage[b-lrk83w1qx1] { font-weight: var(--font-weight-semibold); font-size: 0.8rem; }
.varietal[b-lrk83w1qx1] { color: var(--app-shell-blue-bright); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.estimated-cases[b-lrk83w1qx1] { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); }
.actual-cases[b-lrk83w1qx1] { font-weight: var(--font-weight-semibold); color: var(--green-600); font-size: 0.8rem; }
.bottling-time[b-lrk83w1qx1] { font-weight: var(--font-weight-semibold); color: var(--bh-purple-accent); font-size: 0.8rem; }

/* Status pill sits under the date; pill colors come from the global .bh-status-pill. */
.date-cell .bh-status-pill[b-lrk83w1qx1] { margin-top: 2px; align-self: flex-start; }

/* Signoff cell */
.signoff-cell[b-lrk83w1qx1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 0.8rem;
}

.signoff-count[b-lrk83w1qx1] { font-weight: var(--font-weight-semibold); color: var(--gray-600); }
.signoff-cell.complete .signoff-count[b-lrk83w1qx1] { color: var(--green-600); }

/* Truncation warning */
.bh-truncation-warning[b-lrk83w1qx1] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--yellow-100);
    border-bottom: 1px solid var(--yellow-500);
    color: var(--yellow-700);
    font-size: var(--font-size-md);
}

.bh-truncation-warning i[b-lrk83w1qx1] { color: var(--yellow-500); }

/* Pagination */
.bh-pagination-bar[b-lrk83w1qx1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-md);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-300);
    position: sticky;
    bottom: 0;
}

.bh-page-info[b-lrk83w1qx1] { font-size: var(--font-size-md); color: var(--gray-600); font-weight: var(--font-weight-medium); }

/* Responsive — hide low-priority columns first */
@media (max-width: 1400px) {
    .col-wine[b-lrk83w1qx1],
    .col-time[b-lrk83w1qx1] { display: none; }
}

@media (max-width: 1200px) {
    .col-signoff[b-lrk83w1qx1] { display: none; }
}
/* /Pages/Bottling/QuickActionsPanel.razor.rz.scp.css */
/* sp-body override: more padding for this panel */
.sp-body[b-s6zde4mer8] {
    padding: var(--space-lg);
}

/* Action section */
.action-section h6[b-s6zde4mer8] {
    font-weight: var(--font-weight-semibold);
    color: var(--nwc-text);
    margin-bottom: var(--space-sm);
}

.action-description[b-s6zde4mer8] {
    font-size: var(--font-size-md);
    color: var(--gray-600);
    margin-bottom: var(--space-lg);
}

/* Cleanup summary badges */
.cleanup-summary[b-s6zde4mer8] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

/* Cleanup table */
.cleanup-table-wrapper[b-s6zde4mer8] {
    overflow-x: auto;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
}

.cleanup-table[b-s6zde4mer8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.cleanup-table th[b-s6zde4mer8] {
    background: var(--gray-50);
    font-weight: var(--font-weight-semibold);
    padding: 0.4rem var(--space-sm);
    border-bottom: 2px solid var(--gray-300);
    white-space: nowrap;
    text-align: left;
}

.cleanup-table td[b-s6zde4mer8] {
    padding: 0.35rem var(--space-sm);
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}

.cleanup-table .row-deselected[b-s6zde4mer8] {
    opacity: 0.5;
}

/* Status badges */
.badge-status[b-s6zde4mer8] {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.badge-scheduled[b-s6zde4mer8] {
    background: #cff4fc;
    color: #004085;
}

.badge-inprogress[b-s6zde4mer8] {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.badge-completed[b-s6zde4mer8] {
    background: var(--green-100);
    color: var(--green-700);
}

.badge-canceled[b-s6zde4mer8] {
    background: var(--state-danger-bg);
    color: #721c24;
}
/* /Pages/Bottling/Schedule/AppointmentListComponent.razor.rz.scp.css */
/* ==========================================================================
   AppointmentListComponent Styles

   This component renders appointment cards within a calendar day cell.
   All styles are scoped to this component.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Appointment Card (.bottlingDay button)
   -------------------------------------------------------------------------- */
.bottlingDay[b-lewae1ybqn] {
    cursor: pointer;
    border-radius: 5px;
    margin-bottom: 5px;
    position: relative;
    overflow: visible;
    width: 100%;
    border: 1px solid;
    padding: 2px 4px;
    font-size: inherit;
}

/* Phase 3 DnD: cursor affordance. Listeners wire up in Phase 4. */
.bottlingDay[draggable="true"][b-lewae1ybqn] {
    cursor: grab;
}

.bottlingDay[draggable="true"]:active[b-lewae1ybqn] {
    cursor: grabbing;
}

/* --------------------------------------------------------------------------
   Search Match Highlight
   -------------------------------------------------------------------------- */
.search-match[b-lewae1ybqn] {
    outline: 3px solid var(--dnd-indicator-color);
    outline-offset: 1px;
    animation: pulse-highlight-b-lewae1ybqn 1s ease-in-out infinite;
}

@keyframes pulse-highlight-b-lewae1ybqn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   Snow Dropper Indicator
   Shows snowflake icon when ClosureType is "Screw Cap +Snow"
   Positioned in upper-left corner of the appointment card
   -------------------------------------------------------------------------- */
.snow-dropper-indicator[b-lewae1ybqn] {
    position: absolute;
    top: -18px;
    left: -14px;
    font-size: 1.85rem;
    z-index: var(--z-card-overlay);
    pointer-events: none;
    color: var(--snow-dropper-fg);
    text-shadow: var(--snow-dropper-shadow);
    animation: snow-pulse-b-lewae1ybqn 2s ease-in-out infinite;
}

@keyframes snow-pulse-b-lewae1ybqn {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* --------------------------------------------------------------------------
   Expand/Collapse Button
   -------------------------------------------------------------------------- */
.btn-expand-more[b-lewae1ybqn] {
    background: transparent;
    border: 1px dashed var(--gray-600);
    border-radius: var(--radius-sm);
    color: var(--gray-600);
    font-size: 0.6vw;
    padding: 2px 8px;
    margin: 2px 0;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
}

.btn-expand-more:hover[b-lewae1ybqn] {
    background: var(--nwc-bg-muted);
    border-color: var(--interactive-primary);
    color: var(--interactive-primary);
}
/* /Pages/Bottling/Schedule/BottlingReworkJobPanel.razor.rz.scp.css */
/* Rework job panel — form grid + FormField (LAYOUT-PATTERNS Pattern 16); only the pieces with no
   shared pattern live here: the kind toggle, the source search/results, the per-run table and the
   completion basis list. The search/result rules reach into ReworkReceiptPicker through ::deep, so the
   run search and the client-receipt search share one set of rules instead of a copy. */

.rework-body[b-p25ii4x3k9] {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.rework-fieldset[b-p25ii4x3k9] {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.rework-kind[b-p25ii4x3k9] {
    display: flex;
    gap: var(--space-sm);
}

.rework-kind-option[b-p25ii4x3k9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-md);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    cursor: pointer;
    font-size: var(--font-size-md);
}

.rework-kind-option.active[b-p25ii4x3k9] {
    border-color: var(--appt-rework-border);
    background: var(--accent-primary-soft);
}

.rework-search[b-p25ii4x3k9] {
    position: relative;
    margin-bottom: var(--space-sm);
}

.rework-body[b-p25ii4x3k9]  .rework-search-status,
.rework-sources-empty[b-p25ii4x3k9],
.rework-target-empty[b-p25ii4x3k9] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    padding: var(--space-2xs) 0;
}

.rework-body[b-p25ii4x3k9]  .rework-search-results {
    list-style: none;
    margin: var(--space-2xs) 0 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.rework-body[b-p25ii4x3k9]  .rework-result {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: var(--space-xs) var(--space-sm);
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-default);
    text-align: left;
    cursor: pointer;
}

.rework-body[b-p25ii4x3k9]  .rework-result:hover:not(:disabled) {
    background: var(--surface-muted);
}

.rework-body[b-p25ii4x3k9]  .rework-result:disabled {
    opacity: 0.55;
    cursor: default;
}

.rework-body[b-p25ii4x3k9]  .rework-result-main {
    font-weight: 600;
    font-size: var(--font-size-md);
}

.rework-body[b-p25ii4x3k9]  .rework-result-meta,
.rework-source-meta[b-p25ii4x3k9] {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.rework-sources[b-p25ii4x3k9] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-md);
}

.rework-sources th[b-p25ii4x3k9] {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    padding: var(--space-2xs);
    border-bottom: 1px solid var(--border-default);
}

.rework-sources td[b-p25ii4x3k9] {
    padding: var(--space-2xs);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.rework-sources .num[b-p25ii4x3k9] {
    text-align: right;
    width: 6.5rem;
}

.rework-num[b-p25ii4x3k9] {
    text-align: right;
}

.rework-source-name[b-p25ii4x3k9] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.rework-check[b-p25ii4x3k9] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-md);
}

/* The client-receipt picker: search row above, or the new-receipt form in a bordered box. */
.rework-body[b-p25ii4x3k9]  .receipt-picker {
    margin-bottom: var(--space-sm);
}

.rework-body[b-p25ii4x3k9]  .receipt-create {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.rework-target[b-p25ii4x3k9] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rework-complete[b-p25ii4x3k9] {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 2px solid var(--appt-rework-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rework-complete-totals[b-p25ii4x3k9] {
    font-weight: 600;
}

.rework-basis[b-p25ii4x3k9] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.rework-basis li[b-p25ii4x3k9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
    padding: var(--space-3xs) 0;
}

.rework-basis-run[b-p25ii4x3k9] {
    font-weight: 600;
}

/* A client receipt's labels-per-bottle, asked inline in its label math when no profile records it. */
.rework-per-bottle[b-p25ii4x3k9] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
}

.rework-per-bottle-input[b-p25ii4x3k9] {
    width: 4rem;
}

.rework-per-bottle-hint[b-p25ii4x3k9] {
    color: var(--text-muted);
}

.rework-basis-total[b-p25ii4x3k9] {
    border-top: 1px solid var(--border-subtle);
    margin-top: var(--space-2xs);
    font-weight: 600;
}

.rework-basis-error[b-p25ii4x3k9] {
    color: var(--state-danger-fg);
}

.rework-errors[b-p25ii4x3k9] {
    margin: 0;
}

.rework-confirm[b-p25ii4x3k9] {
    align-self: center;
    margin-right: auto;
    font-weight: 600;
}
/* /Pages/Bottling/Schedule/BottlingSchedule.razor.rz.scp.css */
/* ==========================================================================
   BottlingSchedule Calendar Styles

   Main calendar grid layout for the bottling schedule page.
   Uses CSS Grid for the weekly view with Mon-Fri visible, weekends hidden,
   and a dedicated summary column.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Print Styles
   -------------------------------------------------------------------------- */
/* NOTE: the landscape @page rule that used to live here has MOVED into an inline <style> in
   BottlingSchedule.razor. @page cannot be scoped by CSS isolation (it has no selector to hang the
   [b-xxxxxxx] attribute on), so it leaked into the shared bundle and lost to another page's
   portrait rule. Do not move it back. .no-print below scopes correctly and stays. */
@media print {
    .no-print[b-e40aiq6xfr], .no-print *[b-e40aiq6xfr] {
        display: none !important;
    }
}

/* --------------------------------------------------------------------------
   Header

   The page header is the reusable <NwcAppHeader> (uniform white, sticky). The
   sticky tier is .scrollFormHead + the global .nwc-sticky-top helper, which pins
   the header + the day-of-week row together while the calendar body scrolls.
   -------------------------------------------------------------------------- */

/* Generic flex row — used by the day cell's .left-box header line. */
.flex-row[b-e40aiq6xfr] {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
}

/* ==========================================================================
   Calendar header band — the body grid moved to <MonthCalendar>

   The reusable calendar body grid (.flex-grid + .calendar-day cells, weekend
   hide/show) now lives in Shared/MonthCalendar.razor(.css). What stays here is
   page-specific: the sticky day-of-week header band, the day-cell INTERIOR
   (.wrapper + boxes), the weekly Summary Panel content, and page chrome. The band
   and the component's grid both use the global --mc-summary-col for the trailing
   summary track, so their column tracks stay identical and the labels line up.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Day-of-week Header Band

   Mirrors <MonthCalendar>'s .flex-grid track template so "Mon".."Sun" + "Sum"
   sit exactly over the body columns: 5 (or 7) weekday tracks + the summary column.
   -------------------------------------------------------------------------- */
.flex-grid-days[b-e40aiq6xfr] {
    display: grid;
    grid-template-columns: repeat(5, 2fr) var(--mc-summary-col);
    gap: var(--space-sm);
    padding: 2px;
    text-align: center;
    align-items: stretch;
    font-size: 1.5em;
    /* Reserve the same scrollbar gutter the scrolling body reserves, so the band's
       content box matches the body's content box and the columns line up. The band
       never overflows, so no scrollbar is actually shown — only the gutter is reserved. */
    overflow-y: auto;
    scrollbar-gutter: stable;
}

.day-header[b-e40aiq6xfr] {
    font-weight: var(--font-weight-bold);
    color: var(--gray-700);
    padding: var(--space-2xs) 0;
}

/* Weekend header hidden by default; revealed (with the wider track) by the toggle. */
.day-header.weekend[b-e40aiq6xfr] {
    display: none;
}

.flex-grid-days.show-weekends[b-e40aiq6xfr] {
    grid-template-columns: repeat(7, 2fr) var(--mc-summary-col);
}

.flex-grid-days.show-weekends .day-header.weekend[b-e40aiq6xfr] {
    display: block;
}

/* --------------------------------------------------------------------------
   Day Cell Inner Grid (wrapper)

   Two-column layout for Line 1 and Line 2 appointments
   -------------------------------------------------------------------------- */
.wrapper[b-e40aiq6xfr] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2em minmax(120px, auto);
    gap: var(--space-2xs);
    height: 100%;
}

.left-box[b-e40aiq6xfr] {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    text-align: left;
    font-size: 1.875em;
    padding-left: 5px;
}

.right-box[b-e40aiq6xfr] {
    display: flex;
    flex-wrap: nowrap;
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Appointment Columns (box2 = Line 1, box3 = Line 2)

   Using ::deep to apply grid positioning to child component elements
   -------------------------------------------------------------------------- */
[b-e40aiq6xfr] .box2 {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    font-size: 0.75vw;
}

[b-e40aiq6xfr] .box3 {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    font-size: 0.75vw;
}

.box3-container[b-e40aiq6xfr] {
    display: flex;
    flex-direction: column;
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* Loading placeholder shimmer effect */
.loading-placeholder[b-e40aiq6xfr] {
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-highlight) 50%, var(--skeleton-base) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-e40aiq6xfr 1.5s infinite;
    min-height: 120px;
    border-radius: 5px;
}

@keyframes shimmer-b-e40aiq6xfr {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   Summary Panel (Weekly case counts)
   -------------------------------------------------------------------------- */
.summary-panel[b-e40aiq6xfr] {
    padding: var(--space-sm);
    font-size: 0.85em;
}

.summary-panel table[b-e40aiq6xfr] {
    font-size: 0.85em;
    border-collapse: collapse;
}

.summary-panel th[b-e40aiq6xfr],
.summary-panel td[b-e40aiq6xfr] {
    padding: 1px 4px;
    font-weight: var(--font-weight-bold);
}

.line-label[b-e40aiq6xfr] {
    white-space: nowrap;
    text-align: left;
    padding-right: 8px;
}

.summary-value[b-e40aiq6xfr] {
    min-width: 2.5rem;
    text-align: right;
    display: inline-block;
}

.summary-value.loaded[b-e40aiq6xfr] {
    animation: fadeIn-b-e40aiq6xfr 0.3s ease-in;
}

@keyframes fadeIn-b-e40aiq6xfr {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   Page chrome + utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hidden Buttons (shown on hover)
   -------------------------------------------------------------------------- */
.btnHidden[b-e40aiq6xfr] {
    padding-top: 0px;
    padding-bottom: 0px;
    padding-right: 3px;
    padding-left: 3px;
    display: none;
}

.right-box:hover button[b-e40aiq6xfr] {
    display: block;
}

.navButton[b-e40aiq6xfr] {
    text-decoration: none;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   Main Content Area
   -------------------------------------------------------------------------- */
.mainContent[b-e40aiq6xfr] {
    margin-right: -14px;
    margin-left: -24px;
    transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mainContent.calendar-shrunk[b-e40aiq6xfr] {
    margin-right: 420px;
}

@media (max-width: 768px) {
    .mainContent.calendar-shrunk[b-e40aiq6xfr] {
        margin-right: 0;
    }
}

.scrollFormBody[b-e40aiq6xfr] {
    overflow-y: auto;
    max-height: 90vh;
    /* Reserve the scrollbar gutter so the body's content width matches the
       (non-scrolling) day-of-week band above it — keeps the columns aligned. */
    scrollbar-gutter: stable;
}

/* Sticky head tier: header + day-of-week row pin to the top of the scroll
   container as one block while the calendar body scrolls. The sticky behaviour
   comes from the global .nwc-sticky-top helper (applied on the element); --z-sticky
   (100) stays below the Other panel / SlidingPanel (--z-modal 1060). */

/* --------------------------------------------------------------------------
   Extra Row (Other appointments - spans both columns)
   -------------------------------------------------------------------------- */
.extraRow[b-e40aiq6xfr] {
    grid-column: 1 / 3;
    border-radius: 5px;
    background: var(--appt-other-gradient);
    font-size: 0.75vw;
}

.extraRow:hover[b-e40aiq6xfr] {
    cursor: pointer;
}

.extraRow.loaded[b-e40aiq6xfr] {
    animation: fadeIn-b-e40aiq6xfr 0.3s ease-in;
}

.extraRow.multi-day[b-e40aiq6xfr] {
    background: var(--appt-multiday-gradient);
    border-left: 3px solid var(--appt-multiday-border);
}

.date-range-badge[b-e40aiq6xfr] {
    font-size: 0.7em;
    font-weight: var(--font-weight-normal);
    background: var(--date-range-badge-bg);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    margin-left: 5px;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Other Line Row (W&I, etc. - spans both columns)
   -------------------------------------------------------------------------- */
.otherLineRow[b-e40aiq6xfr] {
    grid-column: 1 / 3;
    border-radius: 5px;
    background: var(--appt-otherline-gradient);
    font-size: 0.75vw;
    padding: 4px 8px 4px 30px;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: visible;
}

/* A configured line that is not "line-other" (Hand Bottling): the appointment's own background and
   border colour arrive inline, so it reads as a full bottling card like Line 1 / Line 2. */
.otherLineRow.full-card[b-e40aiq6xfr] {
    border: 1px solid;
}

.otherLineRow:hover[b-e40aiq6xfr] {
    cursor: pointer;
    filter: brightness(1.1);
}

.otherLineRow.loaded[b-e40aiq6xfr] {
    animation: fadeIn-b-e40aiq6xfr 0.3s ease-in;
}

/* Phase 3 DnD: cursor affordance. Listeners wire up in Phase 4. */
.otherLineRow[draggable="true"][b-e40aiq6xfr] {
    cursor: grab;
}

.otherLineRow[draggable="true"]:active[b-e40aiq6xfr] {
    cursor: grabbing;
}

.other-line-badge[b-e40aiq6xfr] {
    background: var(--otherline-badge-bg);
    border-radius: var(--radius-xs);
    padding: 2px 6px;
    font-weight: var(--font-weight-bold);
    font-size: 0.85em;
    color: var(--white);
}

/* --------------------------------------------------------------------------
   Rework Row (de-label / re-label jobs - spans both columns, teal, not draggable)
   -------------------------------------------------------------------------- */
.reworkRow[b-e40aiq6xfr] {
    grid-column: 1 / 3;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    margin-bottom: 2px;
    padding: 3px 8px;
    border-left: 4px solid var(--appt-rework-border);
    border-radius: 5px;
    background: var(--appt-rework-gradient);
    color: var(--text-on-brand);
    font-size: 0.75vw;
    cursor: pointer;
}

.reworkRow:hover[b-e40aiq6xfr] {
    filter: brightness(1.1);
}

.reworkRow.in-progress[b-e40aiq6xfr] {
    border-left-style: double;
    border-left-width: 6px;
}

.reworkRow.completed[b-e40aiq6xfr] {
    opacity: 0.8;
}

.reworkRow.canceled[b-e40aiq6xfr] {
    opacity: 0.55;
    text-decoration: line-through;
}

.rework-badge[b-e40aiq6xfr] {
    padding: 0 5px;
    border: 1px solid currentColor;
    border-radius: var(--radius-xs);
    font-size: 0.8em;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.05em;
}

.rework-kind[b-e40aiq6xfr] {
    font-size: 0.85em;
    text-transform: uppercase;
}

.rework-title[b-e40aiq6xfr] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.rework-cases[b-e40aiq6xfr] {
    margin-left: auto;
    white-space: nowrap;
}

.rework-summary .line-label[b-e40aiq6xfr] {
    color: var(--appt-rework-border);
}

/* --------------------------------------------------------------------------
   Date Selection (for Other Appointment panel)
   -------------------------------------------------------------------------- */
.calendar-day.selecting-dates .wrapper[b-e40aiq6xfr] {
    pointer-events: none;
}

.date-select-checkbox[b-e40aiq6xfr] {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: var(--z-card-overlay);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--radius-sm);
}

.date-select-checkbox input[type="checkbox"][b-e40aiq6xfr] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--blue-500);
}

.date-select-checkbox.checked[b-e40aiq6xfr] {
    background: var(--checkbox-checked-bg);
    border-radius: var(--radius-sm);
}

.date-select-checkbox.glow[b-e40aiq6xfr] {
    animation: checkbox-glow-b-e40aiq6xfr 2s ease-in-out infinite;
}

@keyframes checkbox-glow-b-e40aiq6xfr {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* --------------------------------------------------------------------------
   Utility Classes
   -------------------------------------------------------------------------- */
.center[b-e40aiq6xfr] {
    justify-content: center;
}

.flex[b-e40aiq6xfr] {
    display: flex;
    align-items: stretch;
}
/* /Pages/Bottling/Schedule/NewAppointmentHeader.razor.rz.scp.css */
/* Title and kind tabs share the panel header; in the 420px Other panel the tabs wrap under the title
   instead of overflowing it. */
.new-appointment-header[b-rjlbu131gp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: var(--space-md);
    flex: 1;
    min-width: 0;
}

.new-appointment-title[b-rjlbu131gp] {
    white-space: nowrap;
}

/* The shared .nwc-tab-bar, in a header that already draws its own rule, beside an xl title. */
.new-kind-tabs[b-rjlbu131gp] {
    border-bottom: none;
    font-weight: normal;
}
/* /Pages/Bottling/Schedule/OtherAppointmentPanel.razor.rz.scp.css */
.panel-form[b-5swcbk7o0y] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 4px;
}

.form-group[b-5swcbk7o0y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label[b-5swcbk7o0y] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.85em;
    color: var(--text-secondary);
}

.date-chips[b-5swcbk7o0y] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.date-chip[b-5swcbk7o0y] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--chip-info-bg);
    border: 1px solid var(--chip-info-border);
    border-radius: 16px;
    padding: 3px 10px;
    font-size: 0.85em;
    font-weight: var(--font-weight-medium);
    color: var(--chip-info-fg);
}

.chip-remove[b-5swcbk7o0y] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    color: var(--chip-info-fg);
    padding: 0 2px;
    line-height: 1;
    border-radius: 50%;
}

.chip-remove:hover[b-5swcbk7o0y] {
    background: var(--chip-info-hover-bg);
    color: var(--chip-info-hover-fg);
}


.end-date-group[b-5swcbk7o0y] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.validation-error[b-5swcbk7o0y] {
    color: var(--red-500);
    font-size: 0.85em;
}

.day-count[b-5swcbk7o0y] {
    color: var(--nwc-text-muted);
    font-size: 0.85em;
}

.panel-actions[b-5swcbk7o0y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--nwc-border-light);
}

.text-muted[b-5swcbk7o0y] {
    color: var(--nwc-text-light);
    font-size: 0.85em;
    margin: 4px 0;
}

.helper-text[b-5swcbk7o0y] {
    color: var(--gray-600);
    font-size: 0.82em;
    margin: 0;
    padding: 6px 8px;
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--blue-500);
}

.confirm-delete[b-5swcbk7o0y] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 8px;
    background: var(--yellow-100);
    border: 1px solid var(--amber-500);
    border-radius: var(--radius-sm);
    font-size: 0.85em;
    font-weight: var(--font-weight-medium);
}

.mode-toggle[b-5swcbk7o0y] {
    display: flex;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.toggle-btn[b-5swcbk7o0y] {
    flex: 1;
    padding: 6px 12px;
    border: none;
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 0.85em;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.toggle-btn:not(:last-child)[b-5swcbk7o0y] {
    border-right: 1px solid var(--gray-300);
}

.toggle-btn.active[b-5swcbk7o0y] {
    background: var(--blue-500);
    color: var(--white);
}

.toggle-btn:hover:not(.active)[b-5swcbk7o0y] {
    background: var(--gray-200);
}
/* /Pages/Bottling/Schedule/SignOffIconComponent.razor.rz.scp.css */
.circle-icon[b-kz1ont7s53] {
  font-size: 24px;
  position: absolute;
  top: -15px;
  right: -10px;
  z-index: var(--z-base);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  z-index: var(--z-base);
  border: 2px solid var(--white);
}

.blue-circle[b-kz1ont7s53] {
  background: var(--signoff-info-gradient);
}

.green-circle[b-kz1ont7s53] {
  background: var(--signoff-success-gradient);
}

.yellow-circle[b-kz1ont7s53] {
  background: var(--signoff-warning-gradient);
}

.red-circle[b-kz1ont7s53] {
  background: var(--signoff-danger-gradient);
}
/* /Pages/Bottling/Schedule/WorkRequests/WorkRequestBadge.razor.rz.scp.css */
/* WorkRequestBadge.razor.css — WORK PACKAGE 1 */

.wr-badge[b-r0ho1xkp96] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--wr-alert);
    border-radius: var(--radius-md);
    background: var(--wr-badge-bg-subtle);
    color: var(--wr-alert);
    font-size: 12px;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    animation: wr-pulse-b-r0ho1xkp96 2s ease-in-out infinite;
}

.wr-badge:hover[b-r0ho1xkp96] {
    background: var(--wr-badge-bg-hover);
    border-color: var(--wr-alert-strong);
}

.wr-badge--empty[b-r0ho1xkp96] {
    border-color: var(--wr-badge-empty-border);
    background: transparent;
    color: var(--wr-badge-empty-fg);
    animation: none;
}

.wr-badge--empty:hover[b-r0ho1xkp96] {
    background: var(--wr-badge-empty-hover-bg);
    color: var(--wr-badge-empty-hover-fg);
    border-color: var(--wr-badge-empty-hover-border);
}

.wr-badge-label[b-r0ho1xkp96] {
    font-size: 12px;
}

.wr-badge-count[b-r0ho1xkp96] {
    background: var(--wr-alert);
    color: var(--white);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    padding: 0 5px;
}

@keyframes wr-pulse-b-r0ho1xkp96 {
    0%, 100% { box-shadow: var(--wr-badge-pulse-shadow-start); }
    50% { box-shadow: var(--wr-badge-pulse-shadow-peak); }
}
/* /Pages/Bottling/Schedule/WorkRequests/WorkRequestDetailView.razor.rz.scp.css */
/* WorkRequestDetailView.razor.css — WORK PACKAGE 3 */

.wrd-container[b-6y46ph2geh] {
    max-width: 800px;
}

/* ── Header ── */
.wrd-header[b-6y46ph2geh] {
    margin-bottom: 20px;
}

.wrd-header-title[b-6y46ph2geh] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wrd-header-title h5[b-6y46ph2geh] {
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
}

.wrd-header-customer[b-6y46ph2geh] {
    font-size: 14px;
    color: var(--gray-600);
    margin: 4px 0 0;
}

.wrd-header-meta[b-6y46ph2geh] {
    font-size: 12px;
    color: var(--gray-500);
    margin: 2px 0 0;
}

/* ── Summary cards ── */
.wrd-summary-grid[b-6y46ph2geh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.wrd-summary-card[b-6y46ph2geh] {
    background: var(--bs-secondary-bg, var(--gray-200));
    padding: 10px 14px;
    border-radius: var(--radius-lg);
}

.wrd-summary-label[b-6y46ph2geh] {
    display: block;
    font-size: 11px;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wrd-summary-value[b-6y46ph2geh] {
    display: block;
    font-size: 15px;
    font-weight: var(--font-weight-medium);
    margin-top: 2px;
}

/* ── Callouts ── */
.wrd-callout[b-6y46ph2geh] {
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
}

.wrd-callout strong[b-6y46ph2geh] {
    display: block;
    margin-bottom: 4px;
}

.wrd-callout p[b-6y46ph2geh] {
    margin: 0;
}

.wrd-callout--info[b-6y46ph2geh] {
    background: var(--wr-status-info-bg);
    border: 1px solid var(--wr-status-info-border);
    color: var(--wr-status-info-fg);
}

.wrd-callout--warning[b-6y46ph2geh] {
    background: var(--yellow-100);
    border: 1px solid var(--wr-status-warning-border);
    color: var(--wr-status-warning-fg);
}

/* ── Sections ── */
.wrd-section[b-6y46ph2geh] {
    border: 1px solid var(--bs-border-color, var(--gray-300));
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    overflow: hidden;
}

.wrd-section-header[b-6y46ph2geh] {
    padding: 10px 16px;
    font-weight: var(--font-weight-semibold);
    font-size: 13px;
    background: var(--bs-secondary-bg, var(--gray-200));
    border-bottom: 1px solid var(--bs-border-color, var(--gray-300));
}

.wrd-section-body[b-6y46ph2geh] {
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.7;
}

/* ── Field groups ── */
.wrd-field-group[b-6y46ph2geh] {
    margin-bottom: 4px;
}

.wrd-field-label[b-6y46ph2geh] {
    font-weight: var(--font-weight-medium);
    color: var(--bs-body-color);
}

/* ── Additions ── */
.wrd-addition-row[b-6y46ph2geh] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
}

.wrd-addition-seq[b-6y46ph2geh] {
    font-weight: var(--font-weight-medium);
    min-width: 20px;
    color: var(--gray-600);
}

.wrd-addition-name[b-6y46ph2geh] {
    font-weight: var(--font-weight-medium);
}

.wrd-addition-rate[b-6y46ph2geh] {
    color: var(--gray-600);
}

.wrd-addition-instructions[b-6y46ph2geh] {
    color: var(--gray-500);
    font-size: 12px;
}

/* ── Final prep targets ── */
.wrd-targets-grid[b-6y46ph2geh] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.wrd-target[b-6y46ph2geh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.wrd-target span[b-6y46ph2geh] {
    font-size: 11px;
    color: var(--gray-600);
    text-transform: uppercase;
}

.wrd-target strong[b-6y46ph2geh] {
    font-size: 15px;
}

/* ── Action bar ── */
.wrd-actions[b-6y46ph2geh] {
    display: flex;
    gap: 8px;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--bs-border-color, var(--gray-300));
}

.wrd-revision-input[b-6y46ph2geh] {
    width: 100%;
}

.wrd-revision-input label[b-6y46ph2geh] {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    margin-bottom: 6px;
}

.wrd-revision-actions[b-6y46ph2geh] {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* ── Status badges (duplicated from WP2 for CSS isolation) ── */
.wr-status-submitted[b-6y46ph2geh] {
    background: var(--wr-status-info-bg);
    color: var(--wr-status-info-fg);
}

.wr-status-inreview[b-6y46ph2geh] {
    background: var(--yellow-100);
    color: var(--wr-status-warning-fg);
}

.wr-status-revisionrequested[b-6y46ph2geh] {
    background: var(--wr-status-revision-bg);
    color: var(--wr-status-revision-fg);
}

.wr-status-accepted[b-6y46ph2geh] {
    background: var(--green-100);
    color: var(--wr-status-accepted-fg);
}
/* /Pages/Bottling/Schedule/WorkRequests/WorkRequestReviewPanel.razor.rz.scp.css */
/* WorkRequestReviewPanel.razor.css — WORK PACKAGE 2 */

/* ── Master-detail layout ── */
.wr-review-layout[b-ef3b072m1u] {
    display: flex;
    height: calc(100vh - 60px);
}

/* ── Left sidebar ── */
.wr-review-sidebar[b-ef3b072m1u] {
    width: 300px;
    flex-shrink: 0;
    border-right: 1px solid var(--bs-border-color, var(--gray-300));
    overflow-y: auto;
    background: var(--bs-body-bg, var(--surface-default));
}

.wr-sidebar-header[b-ef3b072m1u] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-border-color, var(--gray-300));
    font-weight: var(--font-weight-semibold);
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wr-sidebar-count[b-ef3b072m1u] {
    background: var(--red-500);
    color: var(--white);
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: var(--font-weight-semibold);
}

.wr-sidebar-loading[b-ef3b072m1u],
.wr-sidebar-empty[b-ef3b072m1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    color: var(--gray-600);
    gap: 8px;
}

.wr-sidebar-empty i[b-ef3b072m1u] {
    font-size: 32px;
    opacity: 0.4;
}

/* ── Sidebar items ── */
.wr-sidebar-item[b-ef3b072m1u] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--bs-border-color, var(--gray-300));
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
}

.wr-sidebar-item:hover[b-ef3b072m1u] {
    background: var(--wr-sidebar-item-hover-bg);
}

.wr-sidebar-item--selected[b-ef3b072m1u] {
    background: var(--wr-sidebar-item-selected-bg);
    border-left: 3px solid var(--blue-500);
    padding-left: 13px;
}

.wr-sidebar-item-header[b-ef3b072m1u] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2px;
}

.wr-sidebar-item-name[b-ef3b072m1u] {
    font-weight: var(--font-weight-medium);
    font-size: 13px;
    color: var(--bs-body-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 220px;
}

.wr-sidebar-item-customer[b-ef3b072m1u] {
    font-size: 12px;
    color: var(--gray-600);
    margin-bottom: 4px;
}

.wr-sidebar-item-date[b-ef3b072m1u] {
    font-size: 11px;
    color: var(--gray-500);
}

.wr-sidebar-item-type[b-ef3b072m1u] {
    position: absolute;
    top: 12px;
    right: 12px;
    font-size: 10px;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Status badges ── */
.wr-status-submitted[b-ef3b072m1u] {
    background: var(--wr-status-info-bg);
    color: var(--wr-status-info-fg);
}

.wr-status-inreview[b-ef3b072m1u] {
    background: var(--yellow-100);
    color: var(--wr-status-warning-fg);
}

.wr-status-revisionrequested[b-ef3b072m1u] {
    background: var(--wr-status-revision-bg);
    color: var(--wr-status-revision-fg);
}

.wr-status-accepted[b-ef3b072m1u] {
    background: var(--green-100);
    color: var(--wr-status-accepted-fg);
}

/* ── Right body ── */
.wr-review-body[b-ef3b072m1u] {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    background: var(--bs-body-bg, var(--gray-50));
}

.wr-review-empty[b-ef3b072m1u],
.wr-review-loading[b-ef3b072m1u] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--gray-500);
    gap: 12px;
}

.wr-review-empty i[b-ef3b072m1u] {
    font-size: 40px;
    opacity: 0.3;
}
/* /Pages/Bottling/Shared/SectionCard.razor.rz.scp.css */
/* ─── Section Card (own elements) ─── */

.section-card[b-kqzijut3wq] {
    border: 1px solid #d0d5dd;
    border-radius: var(--radius-sm);
    background: var(--white);
    overflow: hidden;
    border-left: 3px solid #667085;
    transition: border-left-color 0.15s ease;
}

.section-card:hover[b-kqzijut3wq] {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.section-card:has(.status-dot.accepted)[b-kqzijut3wq] { border-left-color: var(--green-600); }
.section-card:has(.status-dot.alarm)[b-kqzijut3wq] { border-left-color: var(--red-500); }
.section-card:has(.status-dot.waiver)[b-kqzijut3wq] { border-left-color: #e5950e; }

.section-card.full-width[b-kqzijut3wq] { grid-column: 1 / -1; }
.section-card.full-width.editing .section-body[b-kqzijut3wq] {
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c1c7cd transparent;
}

.section-header[b-kqzijut3wq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.45rem var(--space-md);
    background: #344054;
    border-bottom: none;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;
    min-height: 36px;
}

.section-header:hover[b-kqzijut3wq] {
    background: #475467;
}

.section-title[b-kqzijut3wq] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #f2f4f7;
    letter-spacing: 0.01em;
}

.section-title i[b-kqzijut3wq] {
    color: #98a2b3;
    font-size: 0.8rem;
}

.section-header .bi-chevron-up[b-kqzijut3wq],
.section-header .bi-chevron-down[b-kqzijut3wq] {
    color: #98a2b3 !important;
    font-size: var(--font-size-md);
}

.section-body[b-kqzijut3wq] {
    padding: 0.65rem 0.85rem;
    overflow-x: hidden;
    overflow-wrap: break-word;
}

.edit-toggle[b-kqzijut3wq] {
    padding: 0.1rem 0.3rem;
    font-size: var(--font-size-xs);
    line-height: 1;
    color: #d0d5dd;
    border-color: #667085;
    background: transparent;
}

.edit-toggle:hover[b-kqzijut3wq] {
    background: rgba(255,255,255,0.1);
    color: var(--white);
    border-color: #98a2b3;
}

/* ─── Status Dots ─── */

.status-dot[b-kqzijut3wq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.alarm[b-kqzijut3wq] { background: #f97066; }
.status-dot.accepted[b-kqzijut3wq] { background: #32d583; }
.status-dot.waiver[b-kqzijut3wq] { background: #fdb022; }

/* ─── ChildContent styles (need ::deep) ─── */

[b-kqzijut3wq] .specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.35rem var(--space-md);
    margin-bottom: 0.35rem;
}

[b-kqzijut3wq] .spec-item {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.2rem 0;
    border-bottom: 1px solid #f2f4f7;
}

[b-kqzijut3wq] .spec-label {
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: #98a2b3;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

[b-kqzijut3wq] .spec-value {
    font-size: 0.88rem;
    font-weight: var(--font-weight-medium);
    color: #1d2939;
    word-break: break-word;
}

/* ─── Notes Section ─── */

[b-kqzijut3wq] .notes-section {
    background: #f9fafb;
    border-radius: var(--radius-xs);
    padding: 0.3rem var(--space-sm);
    margin-bottom: var(--space-2xs);
    font-size: 0.82rem;
    border-left: 2px solid #d0d5dd;
}

[b-kqzijut3wq] .notes-label {
    font-weight: var(--font-weight-semibold);
    color: #98a2b3;
    margin-right: var(--space-2xs);
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    letter-spacing: var(--letter-spacing-wide);
}

/* ─── Addition Display ─── */

[b-kqzijut3wq] .addition-display {
    font-size: 0.78rem;
    padding: 0.2rem 0;
    border-bottom: 1px solid #f2f4f7;
    color: #344054;
}

[b-kqzijut3wq] .addition-display:last-child {
    border-bottom: none;
}
/* /Pages/Bottling/UpdateCaseCountPanel.razor.rz.scp.css */
/* ============================================
   Case Count Panel - Modern Responsive Design
   ============================================ */

.case-count-panel[b-ueaogdb0px] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* Critical for iOS flex scrolling */
    background: var(--slate-50);
    overflow: hidden;
}

/* ============================================
   Case Code Warning Bar
   ============================================ */
.case-code-warning[b-ueaogdb0px] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: linear-gradient(135deg, var(--amber-100) 0%, #fde68a 100%);
    border-bottom: 1px solid var(--amber-300);
    color: var(--amber-800);
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

.case-code-warning i[b-ueaogdb0px] {
    color: var(--amber-600);
}

.case-code-input[b-ueaogdb0px] {
    flex: 1;
    max-width: 150px;
    padding: var(--space-2xs) var(--space-sm);
    border: 1px solid var(--amber-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    background: white;
}

.save-code-btn[b-ueaogdb0px] {
    background: #059669;
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-2xs) var(--space-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.save-code-btn:hover[b-ueaogdb0px] {
    background: #047857;
}

.separator[b-ueaogdb0px] {
    opacity: 0.5;
}

/* ============================================
   Stats Grid
   ============================================ */
.stats-grid[b-ueaogdb0px] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: white;
    border-bottom: 1px solid var(--slate-200);
    flex-shrink: 0;
}

.stat-card[b-ueaogdb0px] {
    background: var(--slate-100);
    border-radius: var(--radius-lg);
    padding: var(--space-xs) var(--space-sm);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card.primary[b-ueaogdb0px] {
    background: linear-gradient(135deg, #059669 0%, var(--emerald-500) 100%);
    color: white;
}

.stat-value[b-ueaogdb0px] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
}

.stat-label[b-ueaogdb0px] {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    opacity: 0.8;
    margin-top: var(--space-3xs);
}

/* ============================================
   Add Pallet Section
   ============================================ */
.add-pallet-section[b-ueaogdb0px] {
    padding: var(--space-sm) var(--space-md);
    background: white;
    border-bottom: 1px solid var(--slate-200);
    flex-shrink: 0;
}

/* Compact info card for Next Pallet + config */
.pallet-info-card[b-ueaogdb0px] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: linear-gradient(135deg, var(--slate-50) 0%, var(--slate-100) 100%);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
}

/* Print toggle checkbox in pallet card */
.print-toggle[b-ueaogdb0px] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--slate-600);
    padding: var(--space-2xs) var(--space-sm);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-200);
    flex-shrink: 0;
}

.print-toggle input[type="checkbox"][b-ueaogdb0px] {
    width: 18px;
    height: 18px;
    accent-color: #2563eb;
    cursor: pointer;
}

.pallet-info-left[b-ueaogdb0px] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    flex: 1;
}

.next-pallet-label[b-ueaogdb0px] {
    font-size: var(--font-size-sm);
    color: var(--slate-500);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.next-pallet-number[b-ueaogdb0px] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: #1e3a5f;
}

.pallet-config-item[b-ueaogdb0px] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2xs) var(--space-sm);
    background: white;
    border-radius: var(--radius-md);
    min-width: 50px;
}

.pallet-config-item.editable[b-ueaogdb0px] {
    border: 1px solid var(--slate-300);
}

.config-value[b-ueaogdb0px] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: #1e3a5f;
    line-height: 1.2;
}

.config-label[b-ueaogdb0px] {
    font-size: var(--font-size-2xs);
    color: var(--slate-500);
    text-transform: uppercase;
}

.cases-input[b-ueaogdb0px] {
    width: 48px;
    padding: 0;
    border: none;
    background: transparent;
    font-size: var(--font-size-lg);
    text-align: center;
    font-weight: var(--font-weight-semibold);
    color: #1e3a5f;
}

.cases-input:focus[b-ueaogdb0px] {
    outline: none;
}

.add-pallet-btn[b-ueaogdb0px] {
    width: 100%;
    padding: 0.625rem var(--space-lg);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: white;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}

.add-pallet-btn:hover:not(:disabled)[b-ueaogdb0px] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.4);
}

.add-pallet-btn:active:not(:disabled)[b-ueaogdb0px] {
    transform: translateY(0);
}

.add-pallet-btn:disabled[b-ueaogdb0px] {
    opacity: 0.7;
    cursor: not-allowed;
}

.add-pallet-btn.printing[b-ueaogdb0px] {
    background: linear-gradient(135deg, #059669 0%, var(--emerald-500) 100%);
}

.add-pallet-btn i[b-ueaogdb0px] {
    font-size: var(--font-size-2xl);
}

.spinning[b-ueaogdb0px] {
    animation: spin-b-ueaogdb0px 1s linear infinite;
}

@keyframes spin-b-ueaogdb0px {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.add-pallet-options[b-ueaogdb0px] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--slate-200);
}

.time-display[b-ueaogdb0px] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--slate-600);
}

.edit-time-btn[b-ueaogdb0px] {
    background: none;
    border: none;
    color: var(--slate-500);
    cursor: pointer;
    padding: var(--space-2xs);
    border-radius: var(--radius-sm);
    transition: color 0.2s, background 0.2s;
}

.edit-time-btn:hover[b-ueaogdb0px] {
    color: #2563eb;
    background: var(--slate-200);
}

.time-edit-row[b-ueaogdb0px] {
    margin-top: var(--space-md);
}

.time-input[b-ueaogdb0px] {
    width: 100%;
    padding: 0.625rem;
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
}

/* Printer select (in add-pallet-options) */
.printer-select[b-ueaogdb0px] {
    flex: 1;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
    min-width: 0;
    background: white;
    color: var(--slate-800);
    cursor: pointer;
}

/* ============================================
   Pallet List Section
   ============================================ */
.pallet-list-section[b-ueaogdb0px] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--slate-50);
}

.list-header[b-ueaogdb0px] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) var(--space-md);
    background: white;
    border-bottom: 1px solid var(--slate-200);
    flex-shrink: 0;
}

.list-header h3[b-ueaogdb0px] {
    margin: 0;
    font-size: 0.875rem;
    font-weight: var(--font-weight-semibold);
    color: var(--slate-800);
}

.pallet-count[b-ueaogdb0px] {
    font-size: 0.8rem;
    color: var(--slate-500);
    background: var(--slate-100);
    padding: var(--space-2xs) 0.625rem;
    border-radius: 9999px;
}

.pallet-list[b-ueaogdb0px] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xs) var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Prevents iOS page bounce */
}

.pallet-card[b-ueaogdb0px] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: white;
    padding: var(--space-sm) 0.625rem;
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
}

.pallet-card:hover[b-ueaogdb0px] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pallet-card.editing[b-ueaogdb0px] {
    background: #eff6ff;
    border: 1px solid #3b82f6;
}

.time-edit-input[b-ueaogdb0px] {
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    width: 90px;
}

.cases-edit-input[b-ueaogdb0px] {
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    width: 50px;
    text-align: center;
}

.cases-label[b-ueaogdb0px] {
    font-size: var(--font-size-sm);
    color: var(--slate-500);
}

.pallet-number[b-ueaogdb0px] {
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    color: #1e3a5f;
    min-width: 36px;
}

.pallet-details[b-ueaogdb0px] {
    flex: 1;
    min-width: 0;
}

.pallet-time[b-ueaogdb0px] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 0.8rem;
    color: var(--slate-800);
    margin-bottom: 0;
}

.pallet-time i[b-ueaogdb0px] {
    font-size: var(--font-size-xs);
    color: var(--slate-500);
}

.pallet-stats[b-ueaogdb0px] {
    font-size: var(--font-size-xs);
    color: var(--slate-500);
    display: flex;
    gap: var(--space-xs);
}

.pallet-actions[b-ueaogdb0px] {
    display: flex;
    gap: var(--space-sm);
}

.action-btn[b-ueaogdb0px] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: background 0.2s, transform 0.15s;
}

.action-btn.reprint[b-ueaogdb0px] {
    background: #dbeafe;
    color: #2563eb;
}

.action-btn.reprint:hover:not(:disabled)[b-ueaogdb0px] {
    background: #bfdbfe;
    transform: scale(1.05);
}

.action-btn.delete[b-ueaogdb0px] {
    background: #fee2e2;
    color: #dc2626;
}

.action-btn.delete:hover[b-ueaogdb0px] {
    background: #fecaca;
    transform: scale(1.05);
}

.action-btn.edit[b-ueaogdb0px] {
    background: var(--slate-100);
    color: var(--slate-600);
}

.action-btn.edit:hover[b-ueaogdb0px] {
    background: var(--slate-200);
    transform: scale(1.05);
}

.action-btn.save[b-ueaogdb0px] {
    background: #d1fae5;
    color: #059669;
}

.action-btn.save:hover[b-ueaogdb0px] {
    background: #a7f3d0;
    transform: scale(1.05);
}

.action-btn.cancel[b-ueaogdb0px] {
    background: var(--slate-100);
    color: var(--slate-500);
}

.action-btn.cancel:hover[b-ueaogdb0px] {
    background: var(--slate-200);
    transform: scale(1.05);
}

.action-btn:disabled[b-ueaogdb0px] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* sp-empty overrides */
.sp-empty[b-ueaogdb0px] {
    flex: 1;
    color: var(--slate-400);
}

.sp-empty i[b-ueaogdb0px] {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
}

.sp-empty p[b-ueaogdb0px] {
    margin: 0;
    font-size: var(--font-size-lg);
}

.empty-hint[b-ueaogdb0px] {
    font-size: 0.875rem !important;
    margin-top: var(--space-sm) !important;
}

/* sp-footer overrides */
.sp-footer[b-ueaogdb0px] {
    justify-content: flex-start;
    padding: var(--space-sm) var(--space-md);
    background: white;
}

.footer-group[b-ueaogdb0px] {
    display: flex;
    gap: var(--space-2xs);
}

.footer-group.prints .footer-btn[b-ueaogdb0px] {
    background: #e0e7ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.footer-group.prints .footer-btn:hover[b-ueaogdb0px] {
    background: #c7d2fe;
}

.footer-btn[b-ueaogdb0px] {
    padding: var(--space-sm) 0.625rem;
    background: var(--slate-100);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--slate-600);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    transition: background 0.2s;
}

.footer-btn:hover[b-ueaogdb0px] {
    background: var(--slate-200);
}

.complete-btn[b-ueaogdb0px] {
    flex: 1;
    background: linear-gradient(135deg, #059669 0%, var(--emerald-500) 100%) !important;
    color: white !important;
    border-color: #047857 !important;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    padding: 0.625rem var(--space-md);
}

.complete-btn:hover[b-ueaogdb0px] {
    background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
}

.completed-btn[b-ueaogdb0px] {
    flex: 1;
    background: #d1fae5 !important;
    border: 1px solid #6ee7b7 !important;
    color: #065f46 !important;
    font-weight: var(--font-weight-medium);
}

.completed-btn:hover[b-ueaogdb0px] {
    background: #a7f3d0 !important;
}

/* ============================================
   Mobile Optimizations (< 640px)
   ============================================ */
@media (max-width: 640px) {
    .pallet-list[b-ueaogdb0px] {
        /* Ensure iOS momentum scrolling works */
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-y: contain;
        /* Add bottom padding for iOS home indicator */
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 20px));
    }

    .case-code-warning[b-ueaogdb0px] {
        font-size: 0.8rem;
        padding: var(--space-xs) var(--space-sm);
    }

    .case-code-input[b-ueaogdb0px] {
        max-width: 120px;
    }

    .stats-grid[b-ueaogdb0px] {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
        padding: var(--space-md);
    }

    .stat-value[b-ueaogdb0px] {
        font-size: var(--font-size-2xl);
    }

    .stat-label[b-ueaogdb0px] {
        font-size: var(--font-size-xs);
    }

    .add-pallet-btn[b-ueaogdb0px] {
        padding: 1.25rem;
        font-size: var(--font-size-2xl);
    }

    .pallet-number[b-ueaogdb0px] {
        min-width: 40px;
        font-size: var(--font-size-lg);
    }

    .action-btn[b-ueaogdb0px] {
        width: 44px;
        height: 44px;
    }
}

/* ============================================
   Tablet (481px - 768px)
   ============================================ */
@media (min-width: 481px) and (max-width: 768px) {
    .stats-grid[b-ueaogdb0px] {
        grid-template-columns: repeat(4, 1fr);
    }

    .add-pallet-btn[b-ueaogdb0px] {
        padding: 1.125rem;
    }
}

/* ============================================
   Desktop (> 768px)
   ============================================ */
@media (min-width: 769px) {
    .case-count-panel[b-ueaogdb0px] {
        max-width: 600px;
        margin: 0 auto;
    }

    .stats-grid[b-ueaogdb0px] {
        padding: 1.25rem;
        gap: var(--space-lg);
    }

    .stat-card[b-ueaogdb0px] {
        padding: var(--space-lg);
    }

    .stat-value[b-ueaogdb0px] {
        font-size: 1.75rem;
    }

    .pallet-list[b-ueaogdb0px] {
        padding: var(--space-lg);
    }

    .pallet-card[b-ueaogdb0px] {
        padding: var(--space-lg) 1.25rem;
    }
}

/* ============================================
   Accessibility & Touch
   ============================================ */
@media (hover: none) and (pointer: coarse) {
    /* Touch device optimizations */
    .action-btn[b-ueaogdb0px] {
        width: 48px;
        height: 48px;
    }

    .add-pallet-btn[b-ueaogdb0px] {
        min-height: 56px;
    }

    .footer-btn[b-ueaogdb0px] {
        min-height: 48px;
    }

    .print-toggle[b-ueaogdb0px] {
        padding: var(--space-sm) 0.625rem;
    }

    .print-toggle input[type="checkbox"][b-ueaogdb0px] {
        width: 22px;
        height: 22px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .stat-card[b-ueaogdb0px] {
        border: 2px solid currentColor;
    }

    .pallet-card[b-ueaogdb0px] {
        border: 1px solid var(--slate-800);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .add-pallet-btn[b-ueaogdb0px],
    .action-btn[b-ueaogdb0px],
    .pallet-card[b-ueaogdb0px] {
        transition: none;
    }

    .spinning[b-ueaogdb0px] {
        animation: none;
    }
}

/* ============================================
   iOS Input Zoom Prevention
   ============================================ */
@media (max-width: 768px) {
    .case-count-panel input[b-ueaogdb0px],
    .case-count-panel select[b-ueaogdb0px],
    .case-count-panel textarea[b-ueaogdb0px] {
        font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
    }
}
/* /Pages/Bottling/UpdateCaseCountPrint.razor.rz.scp.css */

@media print {
  @page {
    size: portrait
  }
}

img[b-wv4vy9ixc4] {
  width: 100%;
  height: 15vw;
  object-fit: contain;
}

.centerHeader[b-wv4vy9ixc4] {
  display: flex;
  justify-content: center;
  padding: 0px;
  margin: 0px;
}

.headPicture[b-wv4vy9ixc4] {
  width: 200px;
}


/* /Pages/BreakroomBoard/BreakroomBirthdaysTab.razor.rz.scp.css */
/* Breakroom board Birthdays tab — scoped styles, prefix bbd-. */

.bbd[b-nf0t84dxks] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 4px;
}

.bbd-intro[b-nf0t84dxks] {
    margin: 0;
    font-size: 0.84em;
    line-height: 1.45;
    color: var(--text-secondary);
}

.bbd-filter[b-nf0t84dxks] {
    width: auto;
    max-width: 16rem;
}

.bbd-search[b-nf0t84dxks] {
    flex: 1 1 10rem;
    min-width: 8rem;
}

.bbd-error[b-nf0t84dxks] {
    font-size: 0.84em;
    color: var(--danger-700, #b02a37);
}

.bbd-muted[b-nf0t84dxks] {
    color: var(--text-muted);
}

/* ---- add a person ---- */

.bbd-add[b-nf0t84dxks] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}

.bbd-add-grid[b-nf0t84dxks] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
}

.bbd-field[b-nf0t84dxks] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    font-size: 0.82em;
    font-weight: var(--font-weight-semibold);
}

.bbd-md[b-nf0t84dxks] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 6px;
    font-weight: var(--font-weight-normal);
}

.bbd-similar[b-nf0t84dxks] {
    padding: 10px;
    font-size: 0.86em;
    border-left: 3px solid var(--accent-primary);
    background: var(--accent-primary-soft);
}

.bbd-similar-list[b-nf0t84dxks] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.bbd-similar-list li[b-nf0t84dxks] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

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

/* ---- the list ---- */

.bbd-list[b-nf0t84dxks] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border-subtle);
}

.bbd-row[b-nf0t84dxks] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 12px;
    padding: 7px 2px;
    border-bottom: 1px solid var(--border-subtle);
}

.bbd-row-main[b-nf0t84dxks] {
    display: flex;
    flex: 1 1 14rem;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.bbd-name[b-nf0t84dxks] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.bbd-bday[b-nf0t84dxks] {
    flex-shrink: 0;
    min-width: 4.5rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bbd-bday-missing[b-nf0t84dxks] {
    font-style: italic;
    color: var(--text-muted);
}

.bbd-row-actions[b-nf0t84dxks] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 5px;
}

.bbd-leave-label[b-nf0t84dxks] {
    font-size: 0.8em;
    color: var(--text-secondary);
}

.bbd-leave-date[b-nf0t84dxks] {
    width: auto;
}

.bbd-row-error[b-nf0t84dxks] {
    flex-basis: 100%;
}
/* /Pages/BreakroomBoard/BreakroomBoard.razor.rz.scp.css */
/* Breakroom board page — scoped styles. Prefix bb- (the calendar is bbc-, the tabs bbd-/bbu-), so no
   declaration body collides with another file's under the css-duplicate-audit gate.

   Layout: Pattern 8 (switcher). The editing column and the preview sit side by side, and stack under
   1100px with the preview FIRST, because the preview is what tells her whether the edit is right.
   The preview is sticky on wide screens so it stays beside whatever she is editing. */

.bb-page[b-nbif3o1pha] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding-bottom: var(--space-xl);
}

.bb-title[b-nbif3o1pha] {
    margin: 0;
}

.bb-sub[b-nbif3o1pha] {
    margin: 2px 0 0;
    max-width: 60rem;
    font-size: 0.86em;
    color: var(--text-secondary);
}

.bb-layout[b-nbif3o1pha] {
    display: grid;
    grid-template-columns: minmax(400px, 34rem) minmax(0, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.bb-work[b-nbif3o1pha] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

.bb-preview[b-nbif3o1pha] {
    position: sticky;
    top: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

@media (max-width: 1100px) {
    .bb-layout[b-nbif3o1pha] {
        grid-template-columns: minmax(0, 1fr);
    }

    .bb-preview[b-nbif3o1pha] {
        position: static;
        order: -1;
    }
}

.bb-day-input[b-nbif3o1pha] {
    width: auto;
}

.bb-preview-day[b-nbif3o1pha] {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    font-weight: var(--font-weight-semibold);
}

/* ⛔ The frame is ALWAYS 3840x2160 and scaled by breakroomBoard.js with a transform; the stage's
   height is set there too. The wall's CSS sizes text in vw, so any other frame width would lay the
   wall out differently from the TV. aspect-ratio only holds the space until the script runs. */
.bb-stage[b-nbif3o1pha] {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--gray-900);
}

.bb-frame[b-nbif3o1pha] {
    position: absolute;
    top: 0;
    left: 0;
    width: 3840px;
    height: 2160px;
    border: 0;
    transform-origin: 0 0;
    pointer-events: none;
}

.bb-stage-cover[b-nbif3o1pha] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-on-inverse);
    background: var(--gray-900);
}

.bb-preview-notes[b-nbif3o1pha] {
    min-height: 1.6em;
}

.bb-note[b-nbif3o1pha] {
    margin: 0 0 4px;
    font-size: 0.84em;
    color: var(--text-secondary);
}

.bb-note-error[b-nbif3o1pha] {
    color: var(--danger-700, #b02a37);
}

.bb-note-warn[b-nbif3o1pha] {
    color: var(--warning-800, #8a5a00);
}

.bb-jump[b-nbif3o1pha] {
    padding: 0 4px;
    vertical-align: baseline;
}

/* `hidden` is a user-agent rule; anything that gives a tab panel a display would override it. */
[role="tabpanel"][hidden][b-nbif3o1pha] {
    display: none;
}
/* /Pages/BreakroomBoard/BreakroomMonthCalendar.razor.rz.scp.css */
/* Breakroom board month view — scoped styles, prefix bbc-. Six fixed weeks so the grid never jumps
   height when the month changes under her mouse. */

.bbc[b-9r4unh6zi0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-subtle);
}

.bbc-month[b-9r4unh6zi0] {
    font-weight: var(--font-weight-semibold);
}

.bbc-grid[b-9r4unh6zi0] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.bbc-weekday[b-9r4unh6zi0] {
    padding-bottom: 2px;
    font-size: 0.7em;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.bbc-cell[b-9r4unh6zi0] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 2.9rem;
    padding: 3px 5px;
    font: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.bbc-cell:hover:not(:disabled)[b-9r4unh6zi0] {
    border-color: var(--border-strong);
}

.bbc-cell:disabled[b-9r4unh6zi0] {
    cursor: default;
    opacity: 0.35;
}

.bbc-outside[b-9r4unh6zi0] {
    color: var(--text-muted);
    background: var(--gray-50);
}

.bbc-today .bbc-num[b-9r4unh6zi0] {
    font-weight: var(--font-weight-bold);
    color: var(--accent-primary);
}

.bbc-selected[b-9r4unh6zi0] {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px var(--accent-primary);
}

.bbc-num[b-9r4unh6zi0] {
    font-size: 0.78em;
    line-height: 1.2;
}

.bbc-marks[b-9r4unh6zi0] {
    display: flex;
    flex-wrap: wrap;
    gap: 1px 6px;
    margin-top: auto;
}

.bbc-mark[b-9r4unh6zi0] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.68em;
}

.bbc-mark-ann[b-9r4unh6zi0] {
    color: var(--accent-primary);
}

.bbc-mark-bday[b-9r4unh6zi0] {
    color: var(--accent-burgundy);
}

.bbc-detail[b-9r4unh6zi0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
}

.bbc-detail-head[b-9r4unh6zi0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bbc-detail-day[b-9r4unh6zi0] {
    font-weight: var(--font-weight-semibold);
}

.bbc-detail-none[b-9r4unh6zi0] {
    margin: 0;
    font-size: 0.82em;
    color: var(--text-muted);
}

.bbc-detail-list[b-9r4unh6zi0] {
    margin: 0;
    padding-left: 0;
    font-size: 0.84em;
    list-style: none;
    overflow-wrap: anywhere;
}
/* /Pages/BreakroomBoard/BreakroomUploadTab.razor.rz.scp.css */
/* Breakroom board Upload tab — scoped styles, prefix bbu-. */

.bbu[b-js5ejrpjzp] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 2px;
}

.bbu-steps[b-js5ejrpjzp] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 0;
    font-size: 0.8em;
    list-style: none;
    color: var(--text-muted);
}

.bbu-step-on[b-js5ejrpjzp] {
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.bbu-intro[b-js5ejrpjzp] {
    margin: 0;
    font-size: 0.84em;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* The whole box is the label, so a click anywhere opens the file picker. */
.bbu-drop[b-js5ejrpjzp] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: var(--space-lg) var(--space-md);
    cursor: pointer;
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-md);
}

.bbu-drop:hover[b-js5ejrpjzp] {
    background: var(--gray-50);
}

.bbu-drop .bi[b-js5ejrpjzp] {
    font-size: 1.8rem;
    color: var(--text-secondary);
}

/* The real input covers the box invisibly, which also makes the box a drop target. ::deep because
   InputFile renders the <input> from another component, outside this file's scope. */
.bbu-drop[b-js5ejrpjzp]  .bbu-file {
    position: absolute;
    inset: 0;
    cursor: pointer;
    opacity: 0;
}

.bbu-file-line[b-js5ejrpjzp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 0.88em;
}

.bbu-muted[b-js5ejrpjzp] {
    color: var(--text-muted);
}

.bbu-error[b-js5ejrpjzp] {
    padding: 8px 10px;
    font-size: 0.84em;
    color: var(--danger-700, #b02a37);
    border-left: 3px solid var(--danger-700, #b02a37);
}

.bbu-note[b-js5ejrpjzp] {
    margin: 0;
    font-size: 0.82em;
    color: var(--text-secondary);
}

.bbu-columns[b-js5ejrpjzp] {
    margin: 0;
    font-size: 0.84em;
}

.bbu-col-name[b-js5ejrpjzp] {
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}

.bbu-col-sample[b-js5ejrpjzp] {
    max-width: 12rem;
    overflow: hidden;
    color: var(--text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bbu-actions[b-js5ejrpjzp] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.bbu-apply-bar[b-js5ejrpjzp] {
    position: sticky;
    bottom: 0;
    padding: 8px 0;
    background: var(--bs-body-bg, #fff);
    border-top: 1px solid var(--border-subtle);
}

.bbu-summary[b-js5ejrpjzp] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 0.84em;
}

.bbu-group-title[b-js5ejrpjzp] {
    font-weight: var(--font-weight-semibold);
}

.bbu-group-ticks .btn[b-js5ejrpjzp] {
    padding: 0 4px;
}

.bbu-group-hint[b-js5ejrpjzp] {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.bbu-items[b-js5ejrpjzp] {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--border-subtle);
}

.bbu-item[b-js5ejrpjzp] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 2px;
    border-bottom: 1px solid var(--border-subtle);
}

.bbu-item .form-check-input[b-js5ejrpjzp] {
    flex-shrink: 0;
    margin-top: 3px;
}

.bbu-item-body[b-js5ejrpjzp] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.bbu-item-line[b-js5ejrpjzp] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 8px;
}

.bbu-item-name[b-js5ejrpjzp] {
    font-weight: var(--font-weight-semibold);
}

.bbu-change[b-js5ejrpjzp] {
    font-size: 0.86em;
    font-variant-numeric: tabular-nums;
}

.bbu-item-note[b-js5ejrpjzp] {
    font-size: 0.78em;
    color: var(--text-secondary);
}

.bbu-link[b-js5ejrpjzp] {
    max-width: 24rem;
}
/* /Pages/BreakroomBoard/MarqueeAnnouncementsEditor.razor.rz.scp.css */
/* Breakroom board announcements editor — scoped styles. Shared by the calendar page's panel and
   the Breakroom board page (it moved here from MarqueeAnnouncementsPanel.razor.css, unchanged). Unique class prefix (mqa-) so declaration
   bodies don't collide with the css-duplicate-audit gate.

   ⚠ That gate is a RATCHET and its LOC cap sits close to the current count (1035 max vs
   1031 at the time this file was written). A rule here whose declaration body is
   byte-identical to one elsewhere in NWCWebApp2022 joins that duplicate group and spends
   LOC we do not have. Spacing values below are deliberately this panel's own for that
   reason as well as visual ones — if you add a rule, re-run css-duplicate-audit rather
   than assuming. ⛔ Never --no-verify past the gate. */

.mqa-body[b-mj0obk37u9] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 4px;
}

.mqa-toolbar[b-mj0obk37u9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--nwc-border-light);
}

.mqa-intro[b-mj0obk37u9] {
    margin: 0;
    font-size: 0.82em;
    color: var(--text-secondary);
    line-height: 1.45;
}

.mqa-loading[b-mj0obk37u9] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: var(--space-lg) 0;
    color: var(--text-secondary);
}

/* ---- the inline post/edit form ---- */

.mqa-form[b-mj0obk37u9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--gray-50);
}

.mqa-field[b-mj0obk37u9] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.mqa-field label[b-mj0obk37u9] {
    font-size: 0.82em;
    font-weight: var(--font-weight-semibold);
}

.mqa-hint[b-mj0obk37u9] {
    font-size: 0.76em;
    color: var(--text-secondary);
}

.mqa-hint-error[b-mj0obk37u9] {
    color: var(--danger-text, #b02a37);
}

.mqa-hint-warn[b-mj0obk37u9] {
    color: var(--warning-text, #8a5a00);
}

.mqa-translate[b-mj0obk37u9] {
    padding: 0;
    font-size: 0.82em;
    display: inline-flex;
    align-items: center;
}

.mqa-dates[b-mj0obk37u9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mqa-error[b-mj0obk37u9] {
    font-size: 0.82em;
    color: var(--danger-700, #b02a37);
}

.mqa-form-actions[b-mj0obk37u9] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

/* ---- the list ---- */

.mqa-row[b-mj0obk37u9] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

/* Expired rows stay in the list on purpose — they are the record of what was on the wall,
   and re-posting last year's lunch is a copy away. Muted so today's content reads first. */
.mqa-row.expired[b-mj0obk37u9] {
    opacity: 0.55;
    background: var(--gray-50);
}

.mqa-row-main[b-mj0obk37u9] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.mqa-row-head[b-mj0obk37u9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Row gap tighter than column gap: when the phase chip and the date window wrap onto two
       lines they are one unit and should not read as two stacked rows. */
    gap: 6px 10px;
}

.mqa-window[b-mj0obk37u9] {
    flex-shrink: 0;
    font-size: 0.8em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.mqa-text[b-mj0obk37u9] {
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}

.mqa-text-es[b-mj0obk37u9] {
    font-size: 0.88em;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

.mqa-meta[b-mj0obk37u9] {
    font-size: 0.76em;
    color: var(--text-tertiary, var(--text-secondary));
}

.mqa-row-actions[b-mj0obk37u9] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    padding-top: 1px;
}

.mqa-confirm[b-mj0obk37u9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.mqa-confirm-text[b-mj0obk37u9] {
    align-self: center;
    font-size: 0.8em;
    color: var(--text-secondary);
    white-space: nowrap;
}
/* /Pages/BulkWine/BulkCommitmentPanel.razor.rz.scp.css */
/* Add-commitment drawer. A short form in the sheet's own colours; the buyer field hosts the
   sheet's WorkbookPicker, whose root fills whatever box it is given. */

.bcp-panel[b-kbq7ce5izv] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bcp-lots[b-kbq7ce5izv] {
    padding: 6px 10px;
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    background: var(--sheet-chrome-bg);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.bcp-lots b[b-kbq7ce5izv] {
    margin-right: 4px;
    color: var(--text-muted);
}

.bcp-skipped[b-kbq7ce5izv] {
    margin-top: 4px;
    color: var(--text-muted);
}

.bcp-form[b-kbq7ce5izv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.bcp-field[b-kbq7ce5izv] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: var(--font-size-sm);
}

.bcp-field > span[b-kbq7ce5izv] {
    color: var(--text-muted);
}

.bcp-wide[b-kbq7ce5izv] {
    grid-column: 1 / -1;
}

.bcp-input[b-kbq7ce5izv] {
    padding: 5px 8px;
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    background: var(--sheet-cell-bg);
    font: inherit;
}

.bcp-input:focus[b-kbq7ce5izv] {
    outline: 2px solid var(--sheet-select);
    outline-offset: -1px;
}

/* The picker's root is position:absolute; inset:0 — this box is what it fills. */
.bcp-picker[b-kbq7ce5izv] {
    position: relative;
    height: 32px;
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    background: var(--sheet-cell-bg);
}

.bcp-picker:focus-within[b-kbq7ce5izv] {
    outline: 2px solid var(--sheet-select);
    outline-offset: -1px;
}

.bcp-refusal[b-kbq7ce5izv] {
    padding: 6px 10px;
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--sheet-select) 10%, transparent);
    font-size: var(--font-size-sm);
}

.bcp-foot[b-kbq7ce5izv] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 6px;
    border-top: 1px solid var(--sheet-header-border);
}
/* /Pages/BulkWine/BulkWineLedger.razor.rz.scp.css */
/* Bulk Wine Ledger.

   A routed page, not a ManagerShell overlay, so the root sizes itself: the same viewport lock the
   shell uses (100vh minus the environment banner and .content's top padding — see ManagerShell's
   note on why 56px was wrong) and it owns its own scrolling.

   Colours are the shared --sheet-* tokens in tokens.css (Excel's chrome greys, its selection
   green). ⛔ Do not mint near-miss values here: the pre-push css-duplicate-audit counts cross-file
   duplicate groups. The chrome deliberately differs from MaterialsWorkbook.razor.css in metrics
   (22px rows, 1376px sheet, its own strip spacing) — this is the workbook's CONTRACT copied, not
   its stylesheet, and the audit would flag a byte-identical copy. */
.bwl-page[b-80csd1zjzn] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--env-banner-h, 0px) - 1.1rem);
    min-height: 0;
    background: var(--sheet-cell-bg);
    font-family: var(--sheet-font);
    color: var(--text-primary);
}

.bwl-unavailable[b-80csd1zjzn] {
    padding: 32px 16px;
    color: var(--text-muted);
    text-align: center;
}

/* ── Toolbar (ribbon) ─────────────────────────────────────────────────────── */
/* The shared .nwc-ribbon look (site.css) with the card chrome taken off: this sits flush at the
   top of an Excel-shaped page, so it is a strip, not a floating card. The tab row is a flex pair —
   the scrolling tab list and a fixed tools cluster (filter · load stamp · chevron) — so the tools
   never scroll away behind a long tab row. */
.bwl-ribbon[b-80csd1zjzn] {
    position: relative;
    flex: none;
    border-width: 0 0 1px;
    border-color: var(--sheet-header-border);
    border-radius: 0;
    background: var(--sheet-chrome-bg);
}

.bwl-ribbon-head[b-80csd1zjzn] {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--sheet-header-border);
    background: var(--sheet-header-bg);
}

.bwl-ribbon-head .nwc-ribbon-tabs[b-80csd1zjzn] {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
    border-radius: 0;
    background: transparent;
}

/* Collapsed, the tab row is the bottom edge and the tabs are plain labels — an "active" tab
   with the band's own border would point at a band that is not there. */
.bwl-ribbon.collapsed .bwl-ribbon-head[b-80csd1zjzn] {
    border-bottom: 0;
}

.bwl-ribbon.collapsed .nwc-ribbon-tab.active[b-80csd1zjzn] {
    border-color: transparent;
    margin-bottom: 0;
}

.bwl-ribbon-tools[b-80csd1zjzn] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 3px 6px 3px 8px;
}

/* The ? (legend) button shares the collapse chevron's chrome — same rules, one more selector. */
.bwl-ribbon-collapse[b-80csd1zjzn] {
    appearance: none;
    width: 26px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--sheet-header-fg);
    cursor: pointer;
}

.bwl-ribbon-collapse:hover[b-80csd1zjzn] {
    background: var(--sheet-cell-bg);
    border-color: var(--sheet-header-border);
    color: var(--text-primary);
}

.bwl-ribbon-collapse:focus-visible[b-80csd1zjzn] {
    outline: 2px solid var(--sheet-select);
    outline-offset: 1px;
}

.bwl-ribbon-band[b-80csd1zjzn] {
    align-items: stretch;
    gap: 2px;
    padding: 4px 8px 2px;
    min-height: 0;
    background: var(--sheet-chrome-bg);
}

/* The peeked band floats over the formula bar and the sheet — above the grid's sticky headers,
   below the memo drawer — and closes on its own. */
.bwl-ribbon-band.peek[b-80csd1zjzn] {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: calc(var(--z-base) + 4);
    border-bottom: 1px solid var(--sheet-header-border);
    box-shadow: 0 6px 12px rgb(0 0 0 / 0.12);
}

/* An Office group: its controls in a row, its caption beneath. */
.bwl-ribbon-group[b-80csd1zjzn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.bwl-ribbon-group-body[b-80csd1zjzn] {
    display: flex;
    align-items: center;
    gap: 2px;
}

.bwl-ribbon-group-label[b-80csd1zjzn] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1.2;
    user-select: none;
}

.bwl-ribbon-band .nwc-ribbon-sep[b-80csd1zjzn] {
    height: auto;
    align-self: stretch;
    margin: 2px 6px;
}

.bwl-ribbon-band .nwc-ribbon-action:focus-visible[b-80csd1zjzn] {
    outline: 2px solid var(--sheet-select);
    outline-offset: 1px;
}

/* A toggle that is on: the sheet's selection green, so it reads as state, not as hover. */
.bwl-ribbon-band .nwc-ribbon-action[aria-pressed="true"][b-80csd1zjzn] {
    background: var(--sheet-cell-bg);
    border-color: var(--sheet-select);
    color: var(--sheet-select);
}

/* .bwl-search moved out of the ribbon to the tab strip on 2026-09-10 — see .bwl-find below. */

.bwl-loaded[b-80csd1zjzn] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Name box + formula bar ───────────────────────────────────────────────── */
.bwl-bar[b-80csd1zjzn] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    background: var(--sheet-chrome-bg);
    border-bottom: 1px solid var(--sheet-header-border);
}

.bwl-namebox[b-80csd1zjzn],
.bwl-formula[b-80csd1zjzn] {
    padding: 3px 8px;
    background: var(--sheet-cell-bg);
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-md);
    line-height: 1.35;
    min-height: 25px;
}

.bwl-namebox[b-80csd1zjzn] {
    width: 88px;
    flex: none;
    font-variant-numeric: tabular-nums;
}

.bwl-formula[b-80csd1zjzn] {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    color: var(--text-primary);
    text-overflow: ellipsis;
}

.bwl-formula:focus[b-80csd1zjzn] {
    outline: none;
    border-color: var(--sheet-select);
}

.bwl-formula-ro[b-80csd1zjzn] {
    background: var(--sheet-header-bg);
    color: var(--text-muted);
}

.bwl-fx[b-80csd1zjzn] {
    padding: 0 9px;
    font-style: italic;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--sheet-header-fg);
}

/* Why the selected cell cannot be typed in — its own line, because this is the surface's central honesty. */
.bwl-ro-reason[b-80csd1zjzn] {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 4px 10px;
    background: var(--sheet-header-bg);
    border-bottom: 1px solid var(--sheet-header-border);
    font-size: var(--font-size-xs);
    color: var(--sheet-header-fg);
}

/* ── Scroll region + grid ─────────────────────────────────────────────────── */
.bwl-scroll[b-80csd1zjzn] {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    outline: none;
}

.bwl-scroll:focus-visible[b-80csd1zjzn] {
    outline: 2px solid var(--sheet-select);
    outline-offset: -2px;
}

.bwl-msg[b-80csd1zjzn] {
    padding: 18px;
    font-size: var(--font-size-md);
    color: var(--text-muted);
}

.bwl-msg-error[b-80csd1zjzn] {
    color: var(--danger, #b02a20);
}

/* border-collapse stays SEPARATE: `collapse` drops borders off position:sticky headers in Chrome.
   ⛔ width is 100% with a min-width floor, NOT max-content — with max-content, table-layout:
   fixed treats the <col> widths as minimums and grows every column to fit (measured on the
   workbook 2026-09-01 at 1536x695). The floor is the sum of the column widths below. */
.bwl-grid[b-80csd1zjzn] {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    min-width: 1241px;
    font-size: var(--font-size-md);
}

/* ⚠ These sum to the min-width above. MEASURED 2026-09-09 at 1536x695 CSS px (Playwright
   Chromium, sandbox, "All bulk lots" ON / 402 lots): `.bwl-scroll`'s clientWidth is 1255 —
   NOT 1536 minus a little chrome, the nav rail + sheet padding take more than that — so the set
   has to land at or under 1255 or the Note column (the last one) scrolls off. The previous set
   summed to 1404 and never actually landed under Jeff's viewport; this one leaves ~42px of slack.
   Widths were chosen from the real max content width per column (header label two-line text AND
   every cell in the loaded 402-lot / 427-row sheet, measured via a live auto-table-layout probe,
   not eyeballed): Lot, Vintage and the seven numeric $/qty columns are sized to their measured
   max so a lot CODE, a number or a dollar figure never ellipsizes. Varietal %, Appellation %,
   Vessels and Note keep their tooltip-on-hover ellipsis — their real content (a blend list, an
   AVA breakdown, a tank/barrel location string) can run past 600px and was never going to fit a
   fixed column; Note gets the most of the four because it is free-typed text people read.

   ⛔ LOT WAS 190px ON A WRONG NUMBER. This comment used to justify it as "the widest real code
   needs 183px". RE-MEASURED 2026-09-09 in Jeff's own Chrome (1536x695 CSS px, dpr 1.25, canvas
   measureText at the resolved 13.6px Calibri, all 407 prod lot codes from lot_sync."LotSnapshot"
   where IsLatest AND NOT Archived AND Stage <> 'BOTTLED'): the widest code on prod,
   NWCORCNV717ORGCONC, is 145.6px of text — 153.6px once the cell's 4px side padding is counted,
   not 183. 155px therefore fits EVERY code with nothing ellipsizing, and the old 190 was taxing
   all 407 rows ~35px for a column that already had room to spare. Median code is 90.2px, so most
   rows never came close either way. ⚠ If you re-widen this, re-measure first and say what you
   measured it with — the 183 that stood here for a day was never reproducible.

   ⭐ 2026-09-12: +Trials (40px), Appellation 105 → 93, sum 1213 → 1241. MEASURED, not estimated,
   at 1536x695 CSS px (playwright-cli headed Chrome, worktree NWC :7717, sandbox): `.bwl-scroll`
   clientWidth reads 1270 with no vertical scrollbar; the 09-09 figure of 1255 was taken with the
   402-lot sheet loaded, i.e. WITH the ~15px scrollbar — 1270 - 15 = 1255 exactly, so the two
   agree and 1255 is the number to design against. 1241 therefore keeps ~14px of slack.
   Trials is 40px because the header is the widest thing in it: canvas measureText at the header's
   resolved 12px Helvetica Neue gives "Trials" = 28.9px, + 8px of cell side padding = 36.9. (For
   scale, the same probe reads "Vintage" 40.5 in a 60px column.) The 12px came out of Appellation %
   rather than off the total because that column is one of the four the paragraph above designates
   as tooltip-ellipsis anyway — its real content runs past 600px and never fit regardless — and its
   own header measures 73.4px, so 93px still sets it on one line. ⛔ Do not take it out of Lot:
   that column is measured to the widest real prod code and has nothing spare.

   ⭐ 2026-09-14: select 28 → 40, Appellation 93 → 81, sum still 1241. The select column's caption
   went from "pick" to "select" so the two checkbox columns stop reading as one (a first-time user
   ticked both and expected either to list the lot); "select" in the caption's 11px small caps
   measures ~33px and did not fit 28. The 12px came out of Appellation % again, for the reason
   given above — its header still sets on one line at 81 (73.4px measured). */
.bwl-col-sel[b-80csd1zjzn] { width: 40px; }
.bwl-col-gutter[b-80csd1zjzn] { width: 44px; }
.bwl-col-lot[b-80csd1zjzn] { width: 155px; }
.bwl-col-trials[b-80csd1zjzn] { width: 40px; }
.bwl-col-vintage[b-80csd1zjzn] { width: 60px; }
.bwl-col-varietal[b-80csd1zjzn] { width: 90px; }
.bwl-col-appellation[b-80csd1zjzn] { width: 81px; }
.bwl-col-vessels[b-80csd1zjzn] { width: 75px; }
.bwl-col-livegal[b-80csd1zjzn] { width: 62px; }
.bwl-col-forsale[b-80csd1zjzn] { width: 62px; }
.bwl-col-asking[b-80csd1zjzn] { width: 92px; }
.bwl-col-benchton[b-80csd1zjzn] { width: 90px; }
.bwl-col-benchgal[b-80csd1zjzn] { width: 88px; }
.bwl-col-held[b-80csd1zjzn] { width: 64px; }
.bwl-col-available[b-80csd1zjzn] { width: 94px; }
.bwl-col-note[b-80csd1zjzn] { width: 104px; }

.bwl-cell[b-80csd1zjzn],
.bwl-labelcell[b-80csd1zjzn],
.bwl-colhead[b-80csd1zjzn],
.bwl-rowhead[b-80csd1zjzn],
.bwl-corner[b-80csd1zjzn] {
    height: 22px;
    padding: 0 4px;
    border-right: 1px solid var(--sheet-gridline);
    border-bottom: 1px solid var(--sheet-gridline);
    font-weight: var(--font-weight-normal);
}

.bwl-cell[b-80csd1zjzn] {
    position: relative;
    background: var(--sheet-cell-bg);
    cursor: cell;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
}

.bwl-cell.num[b-80csd1zjzn],
.bwl-labelcell.num[b-80csd1zjzn] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A read-only cell must LOOK read-only: most of this sheet is Innovint's to state. */
.bwl-cell.ro[b-80csd1zjzn] {
    color: var(--text-muted);
    cursor: default;
}

/* Frozen panes: letters at the top, the label row beneath them, the gutter at the left. */
.bwl-colhead[b-80csd1zjzn],
.bwl-rowhead[b-80csd1zjzn],
.bwl-corner[b-80csd1zjzn] {
    position: sticky;
    background: var(--sheet-header-bg);
    color: var(--sheet-header-fg);
    border-right-color: var(--sheet-header-border);
    border-bottom-color: var(--sheet-header-border);
    text-align: center;
    font-size: var(--font-size-sm);
    letter-spacing: 0.02em;
    user-select: none;
}

.bwl-rowhead[b-80csd1zjzn] {
    left: 0;
    z-index: var(--z-base);
}

.bwl-colhead[b-80csd1zjzn] {
    top: 0;
    z-index: calc(var(--z-base) + 1);
}

.bwl-corner[b-80csd1zjzn] {
    top: 0;
    left: 0;
    z-index: calc(var(--z-base) + 3);
}

.bwl-colhead.active[b-80csd1zjzn],
.bwl-rowhead.active[b-80csd1zjzn],
.bwl-rowhead.selected[b-80csd1zjzn] {
    background: var(--sheet-header-active-bg);
    color: var(--sheet-header-active-fg);
}

/* ── Row selection + the Lots tab ─────────────────────────────────────────── */
/* The row number is the selection handle (Excel's), on the data rows only — the label row and
   the note rows are not selectable. */
.bwl-row > .bwl-rowhead[b-80csd1zjzn] {
    cursor: pointer;
    user-select: none;
}

/* A selected lot's rows carry a wash of the selection colour behind their cells — under the
   gridlines, so nothing moves; the active cell's outline still reads on top of it. */
.bwl-row.bwl-selrow .bwl-cell[b-80csd1zjzn] {
    background: color-mix(in srgb, var(--sheet-select) 12%, var(--sheet-cell-bg));
}

/* ── The select column ────────────────────────────────────────────────────── */
/* The leftmost column — the Lots ribbon's multi-select, one checkbox per lot plus a header
   checkbox for "every lot shown". It sits OUTSIDE the lettered grid, so ticking it is a pick,
   never a cell edit: it never moves the active cell or opens the in-cell editor. (The For sale
   checkbox is the opposite kind of thing — a data flag — and lives INSIDE the grid, in its own
   lettered column, so the two never sit side by side and read as one.)

   ⛔ .bwl-rowhead and .bwl-corner are SHARED with the read-only Analysis sheet's own grid (a
   second, plain <table class="bwl-grid bwa-grid"> further down this file) — that table has no
   select column, so its own row-head/corner cells must stay at their original left:0. The
   .bwl-ledger-grid scope below (the Ledger table's own extra class) is what keeps the shift here
   from also nudging Analysis's gutter out from under its own header. */
.bwl-ledger-grid .bwl-rowhead[b-80csd1zjzn] {
    left: 40px;
}

.bwl-gutterhead[b-80csd1zjzn] {
    left: 40px;
}

.bwl-selcell[b-80csd1zjzn] {
    position: sticky;
    left: 0;
    z-index: var(--z-base);
    height: 22px;
    padding: 0;
    border-right: 1px solid var(--sheet-gridline);
    border-bottom: 1px solid var(--sheet-gridline);
    background: var(--sheet-cell-bg);
    text-align: center;
    vertical-align: middle;
    user-select: none;
}

.bwl-row.bwl-selrow .bwl-selcell[b-80csd1zjzn] {
    background: color-mix(in srgb, var(--sheet-select) 12%, var(--sheet-cell-bg));
}

/* The label row's select cell is frozen with the label row, above the data rows. */
.bwl-hdr .bwl-selhdr[b-80csd1zjzn] {
    top: 22px;
    z-index: calc(var(--z-base) + 1);
    background: var(--sheet-header-bg);
}

.bwl-sel[b-80csd1zjzn],
.bwl-sel-all[b-80csd1zjzn] {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    accent-color: var(--sheet-select);
    cursor: pointer;
}

.bwl-sel:disabled[b-80csd1zjzn],
.bwl-sel-all:disabled[b-80csd1zjzn] {
    cursor: default;
}

/* The label row's two tiny column labels ("pick", "sale") — small caps, muted, so the two
   checkbox columns read as distinct without competing with the lettered headers. */
.bwl-hdr-tiny[b-80csd1zjzn] {
    display: block;
    font-variant: small-caps;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

/* The ribbon's inline field: a caption and a short box, on the buttons' baseline. */
.bwl-ribbon-field[b-80csd1zjzn] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 2px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.bwl-ribbon-input[b-80csd1zjzn] {
    width: 64px;
    padding: 2px 5px;
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    font: inherit;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bwl-ribbon-input:disabled[b-80csd1zjzn] {
    opacity: 0.45;
}

.bwl-ribbon-count[b-80csd1zjzn] {
    padding: 0 6px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--sheet-select);
    white-space: nowrap;
}

.bwl-ribbon-count.muted[b-80csd1zjzn] {
    font-weight: normal;
    color: var(--text-muted);
}

/* A row whose last typed cell is still on its way to the database. */
.bwl-rowhead.saving[b-80csd1zjzn] {
    color: var(--sheet-select);
    font-style: italic;
}

.bwl-hdr .bwl-labelcell[b-80csd1zjzn] {
    position: sticky;
    top: 22px;
    z-index: var(--z-base);
    background: var(--sheet-header-bg);
    font-weight: var(--font-weight-semibold);
    color: var(--sheet-header-fg);
    white-space: nowrap;
    overflow: hidden;
}

.bwl-rownum[b-80csd1zjzn] {
    font-variant-numeric: tabular-nums;
}

/* ── The For sale checkbox ─────────────────────────────────────────────────── */
/* The one control for the one flag, inside the For sale cell of a lot row. It is a cell like any
   other — the active-cell outline, Space/Y/N, undo and the formula bar all work on it — with a
   box in it instead of text, so the flag is one click by mouse and one key by keyboard.
   A DIFFERENT accent than the select column's .bwl-sel (var(--sheet-select)) on purpose — For
   sale is a data flag and Select is a pick, so they must read as different things at a glance.
   --green-600 is the repo's other standing green (Bootstrap's "success"), already used for
   confidence/step-done indicators. */
.bwl-tick[b-80csd1zjzn] {
    display: block;
    width: 14px;
    height: 14px;
    margin: 0 auto;
    accent-color: var(--green-600);
    cursor: pointer;
}

.bwl-tick:disabled[b-80csd1zjzn] {
    cursor: default;
}

/* Selection box drawn OUTSIDE the gridlines, so selecting cannot nudge the grid. */
.bwl-cell.selected[b-80csd1zjzn] {
    outline: 2px solid var(--sheet-select);
    outline-offset: -1px;
}

/* Excel's marching ants — only the outline STYLE changes, so the grid cannot shift a pixel. */
.bwl-cell.copied[b-80csd1zjzn] {
    outline: 2px dashed var(--sheet-select);
    outline-offset: -1px;
}

.bwl-editor[b-80csd1zjzn] {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0 4px;
    border: 0;
    outline: none;
    background: var(--sheet-cell-bg);
    font: inherit;
    color: var(--text-primary);
    text-align: inherit;
}

/* ── Cell content ─────────────────────────────────────────────────────────── */
/* ⚠ The red cells (plan §4): oversold, and a lot code Innovint no longer knows. Coloured, never
   hidden and never clamped — an oversold lot is exactly what this sheet exists to show. */
.bwl-cell.neg[b-80csd1zjzn],
.bwl-neg[b-80csd1zjzn] {
    color: var(--danger, #b02a20);
    font-weight: var(--font-weight-semibold);
}

.bwl-muted[b-80csd1zjzn] {
    color: var(--text-muted);
}

/* ── Row note (a save that did not land) ──────────────────────────────────── */
.bwl-noterow .bwl-note[b-80csd1zjzn] {
    padding: 4px 12px;
    background: var(--sheet-header-bg);
    font-size: var(--font-size-xs);
    color: var(--sheet-header-fg);
    white-space: normal;
    height: auto;
}

.bwl-note-fail[b-80csd1zjzn] {
    color: var(--danger, #b02a20);
}

/* ── Tab strip + status ───────────────────────────────────────────────────── */
.bwl-tabs[b-80csd1zjzn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 8px;
    background: var(--sheet-chrome-bg);
    border-top: 1px solid var(--sheet-header-border);
}

.bwl-tab[b-80csd1zjzn] {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 3px 16px;
    font-family: inherit;
    font-size: var(--font-size-md);
    color: var(--sheet-header-fg);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    cursor: default;
}

.bwl-tab.active[b-80csd1zjzn] {
    background: var(--sheet-cell-bg);
    border-bottom-color: var(--sheet-select);
    color: var(--sheet-select);
}

/* The filter, in the status bar beside the count it produces. A label, so the magnifier is part of
   the hit target and the whole chip reads as one control. It borrows the sheet's own cell chrome —
   white on the chrome grey — so it reads as a thing you type in rather than as page furniture. */
.bwl-find[b-80csd1zjzn] {
    display: flex;
    align-items: center;
    gap: 6px;
    /* ⛔ THE CHIP YIELDS FIRST, AND THAT IS THE WHOLE POINT OF THESE THREE LINES. The status line
       beside it is nowrap and carries the real warnings — expired verbal, drift, oversold — and on
       a busy sheet it measures ~890px. Something in this row has to give or the PAGE scrolls
       sideways: measured 2026-09-10 at 1536x695 (Jeff's viewport, Chrome, dev, worst-case status
       line) as body scrollWidth 1597 vs client 1521 before this shrink was added. A filter box is
       still a filter box at 120px; a truncated warning is a warning nobody sees. Hence shrink 8
       here against 1 on .bwl-status, so the chip is emptied down to its floor before the status
       gives up a single character.
       ⚠ The factor is 200, not 2. Flex weights shrink by factor x basis, so against an ~890px
       status line a factor of 8 still handed the status ~34% of the squeeze and it ellipsized
       while the chip was nowhere near its floor (measured, same conditions). 200 puts the chip's
       share over 98%, so the status only ever loses a character once the chip is at 120px.
       ⚠ 98% was still not enough: at 1536x695 (Jeff's Chrome, dev, 2026-09-14) a 40px squeeze left
       the status its 1.2% share — 0.5px — and text-overflow ellipsized the LAST WORD of a For sale
       note over half a pixel (scrollWidth 523 vs clientWidth 522, measured). 100000 puts the
       status's share under Chrome's 1/64px layout unit for any squeeze the chip can absorb, so
       it genuinely does not move until the chip is at its floor (re-measured: 523 vs 523). */
    box-sizing: border-box;
    flex: 0 100000 245px;
    min-width: 120px;
    padding: 1px 8px;
    background: var(--sheet-cell-bg);
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    cursor: text;
}

.bwl-find > .bi[b-80csd1zjzn] {
    flex: none;
    font-size: var(--font-size-xs);
    line-height: 1;
    color: var(--text-muted);
}

.bwl-find:focus-within[b-80csd1zjzn] {
    border-color: var(--sheet-select);
}

.bwl-find:focus-within > .bi[b-80csd1zjzn] {
    color: var(--sheet-select);
}

/* A term is typed and the sheet is narrowed. The grid gives no other sign of it from down here, so
   the box says so itself — same selection green the ribbon's pressed toggles use, for the same
   reason: it is state, not hover. */
.bwl-find.on[b-80csd1zjzn] {
    border-color: var(--sheet-select);
    box-shadow: inset 2px 0 0 var(--sheet-select);
}

.bwl-find.on > .bi[b-80csd1zjzn] {
    color: var(--sheet-select);
}

/* The chip owns the border, the padding and the width; the input is only the text, and follows it
   down (min-width:0 — an input's default intrinsic minimum is what stops a flex child shrinking). */
.bwl-search[b-80csd1zjzn] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: 2px 0;
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: var(--font-size-sm);
}

.bwl-search:focus[b-80csd1zjzn] {
    outline: none;
}

/* Last line of defence only. The chip above is emptied to its floor first (shrink 8 vs 1); this
   ellipsis exists so that a status line longer than anything measured still cannot make the page
   scroll sideways. It should never actually engage on Jeff's 1536px. */
.bwl-status[b-80csd1zjzn] {
    margin-left: auto;
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Phase 2: two row kinds on one grid ───────────────────────────────────── */
/* The label row carries two lines: the lot meaning of the slot, and beneath it the commitment
   meaning. It is taller than a data row on purpose; the letters row above it stays 22px, so the
   sticky offsets are unchanged. */
.bwl-hdr .bwl-labelcell[b-80csd1zjzn] {
    height: 36px;
    padding: 3px 4px 2px;
    line-height: 1.2;
}

.bwl-lbl[b-80csd1zjzn] {
    display: block;
    font-weight: var(--font-weight-semibold);
}

.bwl-sub[b-80csd1zjzn] {
    display: block;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: pre;
}

/* A commitment row is indented under its lot and sits on a faint band, so the eye reads the
   block — lot, then its claims — without a tree control. */
.bwl-commit .bwl-cell[b-80csd1zjzn] {
    background: var(--sheet-header-bg);
    border-bottom-style: dotted;
}

.bwl-commit td.bwl-cell:first-of-type[b-80csd1zjzn] {
    padding-left: 20px;
}

.bwl-commit td.bwl-cell:first-of-type[b-80csd1zjzn]::before {
    content: "↳";
    position: absolute;
    left: 6px;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* The picker fills its cell; the indent has to move the whole control, not just the text. */
.bwl-commit[b-80csd1zjzn]  .wp-root {
    left: 18px;
}

/* The blank row reads as an invitation, not data. */
.bwl-new .bwl-cell[b-80csd1zjzn] {
    color: var(--text-muted);
    font-style: italic;
    border-bottom-style: dashed;
}

.bwl-new[b-80csd1zjzn]  .wp-input::placeholder {
    color: var(--sheet-select);
    font-style: italic;
    opacity: 0.85;
}

/* The cell has to stop clipping its own children, or the picker's list is cut off at the gridline
   the moment it opens. Above the neighbouring cells; beneath the frozen headers. */
.bwl-cell.pick[b-80csd1zjzn] {
    overflow: visible;
    z-index: calc(var(--z-base) + 2);
}

/* Status and unit: one letter, centred, so a column of them scans like a column of flags. */
.bwl-cell.letter[b-80csd1zjzn] {
    text-align: center;
    font-variant-numeric: normal;
}

/* ⛔ letter-spacing is GONE (2026-09-11). It was 0.04em to give a single glyph presence; on a
   word it adds ~0.5px per character, and the status words are sized against a 52px cap with only
   ~6.6px of worst-case margin (Arial). Tracking would have eaten most of that. */
.bwl-letter[b-80csd1zjzn] {
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

/* ⛔ .bwl-letter-name (the sr-only status word) was REMOVED 2026-09-11: the cell now shows the
   word itself, so a hidden duplicate would be read twice. */

/* A row that holds wine right now (Q, V or M) carries the sheet's green on its status word.
   ⭐ This is the cheapest "does this take wine off the table?" signal on the sheet — and since
   2026-09-11 it is also true of a QUOTE and of a lapsed verbal. */
.bwl-hold .bwl-letter[b-80csd1zjzn] {
    color: var(--sheet-select);
}

/* Executed and dead are history: muted, and the letter struck. */
.bwl-closed .bwl-cell[b-80csd1zjzn] {
    color: var(--text-muted);
    font-style: normal;
}

.bwl-closed .bwl-letter[b-80csd1zjzn] {
    text-decoration: line-through;
    font-weight: var(--font-weight-normal);
}

/* The gallons-equivalent on a row that does not currently hold: shown, but quiet. */
.bwl-cell.dim[b-80csd1zjzn] {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

/* A rule the sheet would not break for the last keystroke. Informational — nothing was sent. */
.bwl-note-hint[b-80csd1zjzn] {
    color: var(--sheet-header-active-fg);
    font-style: italic;
}

.bwl-warn[b-80csd1zjzn] {
    font-size: var(--font-size-xs);
    color: var(--danger, #b02a20);
    white-space: nowrap;
}

/* What the last create from the sheet did — the same slot as the warning, in the sheet's green. */
.bwl-note[b-80csd1zjzn] {
    font-size: var(--font-size-xs);
    color: var(--sheet-select);
    white-space: nowrap;
}

/* ── Phase 3: the memo cell ───────────────────────────────────────────────── */
/* A lever, not a value: F2 / Space / double-click open the memo drawer. Dotted underline says
   "there is something behind this"; the empty cell still shows the affordance on hover. */
.bwl-cell.memo[b-80csd1zjzn] {
    color: var(--sheet-select);
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}

/* ⭐ 2026-09-14: the two lever hints are FAINT at rest, not invisible. They were opacity 0 until
   hover/select, which made a memo cell and a lot-code cell indistinguishable from plain text to a
   mouse user who had not been told they open anything — and nobody had (Jeff: "is it clear to
   the user how to make edits?"). 0.4 is enough to read as "there is something here" without
   trailing the eye down 400 rows; hover/select still brings it up to full. */
.bwl-memo-hint[b-80csd1zjzn] {
    color: var(--text-muted);
    font-style: italic;
    text-decoration: none;
    opacity: 0.4;
}

.bwl-cell.memo:hover .bwl-memo-hint[b-80csd1zjzn],
.bwl-cell.memo.selected .bwl-memo-hint[b-80csd1zjzn] {
    opacity: 0.85;
}

/* The lot code cell is also a lever: it opens the lot's workspace. Same affordance grammar as the
   memo cell above — faint until the cell is under the pointer or selected. The words live on the
   read-only line under the formula bar, which is where someone looks the moment the cell refuses
   to type, and in the legend (the ? in the tab row). */
.bwl-open-hint[b-80csd1zjzn] {
    margin-left: 5px;
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
    opacity: 0.4;
    vertical-align: baseline;
}

.bwl-cell.opens:hover .bwl-open-hint[b-80csd1zjzn],
.bwl-cell.opens.selected .bwl-open-hint[b-80csd1zjzn] {
    opacity: 0.85;
}

/* ── The flash ──────────────────────────────────────────────────────────────── */
/* A lot row whose For sale flag just flipped (tick, Y/N, Space, or an undo of one) is lit for a
   moment (BulkWineLedger.FlashFor) so the eye lands on the row that changed. The class is put on
   and taken off by the page; the animation runs once per application. Cells paint their own
   background, so the colour goes on the cells, not the row. */
@keyframes bwl-flash-b-80csd1zjzn {
    /* Held at full tint for the first 0.8 s, then eased out. Measured 2026-09-14 (1536x695, Jeff's
       Chrome, dev): a plain 1.8 s ease-out from 35% read as white by the time the eye moved from
       the box to the row (oklab L 0.94 at 1 s), so the flash was true in the DOM and invisible. */
    0%, 40% { background-color: color-mix(in srgb, var(--sheet-select) 35%, var(--sheet-cell-bg)); }
    100% { background-color: var(--sheet-cell-bg); }
}

.bwl-row.bwl-flash .bwl-cell[b-80csd1zjzn],
.bwl-row.bwl-flash .bwl-selcell[b-80csd1zjzn] {
    animation: bwl-flash-b-80csd1zjzn 2s ease-out 1; /* ⛔ duration = BulkWineLedger.FlashFor */
}

@media (prefers-reduced-motion: reduce) {
    .bwl-row.bwl-flash .bwl-cell[b-80csd1zjzn],
    .bwl-row.bwl-flash .bwl-selcell[b-80csd1zjzn] {
        animation: none;
        background-color: color-mix(in srgb, var(--sheet-select) 20%, var(--sheet-cell-bg));
    }
}

/* The Lot cell's own layout, for the trial-blend badge (BulkWineLedger.Blends.cs, LotTrialBadge).
   ⛔ NOT the cell's ordinary bare-text overflow rule (.bwl-cell already sets white-space/overflow/
   text-overflow at the <td> level for every other column) — flex is what lets the badge keep a
   guaranteed slot instead of racing the lot code for the same characters. .bwl-col-lot is 155px and
   the widest real code already uses ~146 of the ~147px content box left after the cell's own 4px
   side padding (see .bwl-col-lot's own measurement comment above), so on that handful of rows the
   CODE ellipsizes to make room — an honest, visible trade, never an overlap and never a silently
   dropped badge. */
/* ⛔ .bwl-lotcell / .bwl-lotcode were the flex wrapper that let the trial badge share the lot cell.
   The badge moved to its own Col.Trials column on 2026-09-12, so the lot code is plain cell text
   again and both rules were deleted rather than left to rot. Do not reinstate them to put a mark
   back in the lot cell — unlabelled there, it read as a stray number. */

/* The reverse half of the blend↔sheet bridge: how many ACTIVE trial blends have already claimed
   THIS lot, read on the lot's own row so a reader sees the claim before quoting or selling it.
   ⛔⛔ INFORMATIONAL ONLY — never styled to suggest it subtracts from Available or Held (0 of 154
   blend components on prod are Reserved, and only V/M commitments ever move those columns), so it
   sits beside the lot's identity and never between those two. Never focusable (no tabindex) and
   never a click/key target of its own (no handler) — see the markup comment at the call site.
   ⭐ The column header is what NAMES it; this pill exists only so the column can be scanned down a
   long sheet. It is centred in its own cell rather than trailing the lot code. */
.bwl-cell.trials[b-80csd1zjzn] {
    text-align: center;
}

.bwl-trial-badge[b-80csd1zjzn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 13px;
    height: 13px;
    padding: 0 3px;
    border-radius: 7px;
    font-size: 9px;
    line-height: 1;
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* The ordinary case: a real, checked count of distinct active blends. Solid and colored — this is a
   fact worth noticing before a quote goes out — and drawn at all only when the count is > 0; a lot
   in zero blends gets no badge (never a "0" that would read as a checked, real answer). */
.bwl-trial-badge-active[b-80csd1zjzn] {
    background: var(--sheet-select);
    color: #fff;
}

/* A FAILED usage read. ⛔⛔ Must never look like "zero blends" (no badge at all, above) or like the
   ordinary count (solid fill, above) — "we do not know" and "none" are different facts. This is the
   one state drawn as a hollow OUTLINE rather than a fill, so it reads as distinct at a glance and
   not just by title. */
.bwl-trial-badge-error[b-80csd1zjzn] {
    background: transparent;
    border: 1px solid var(--text-muted);
    color: var(--text-muted);
}

/* ── Phase 4: project rows in the grouped view ────────────────────────────── */
/* A project row heads its section: a firmer band than a commitment row, its name in the project
   column read as a title. It uses the commitment meanings of the slots (status · project · date ·
   total · gal · note), so the label row already names them. */
.bwl-project .bwl-cell[b-80csd1zjzn] {
    background: var(--sheet-header-active-bg);
    border-top: 1px solid var(--sheet-header-border);
    border-bottom-color: var(--sheet-header-border);
    font-weight: var(--font-weight-semibold);
}

.bwl-project .bwl-cell.pname[b-80csd1zjzn] {
    color: var(--sheet-header-active-fg);
}

/* The "No project" band that heads the ordinary sheet: quieter than a real project, and italic,
   because it is a heading and not a thing anyone can type on. */
.bwl-group .bwl-cell[b-80csd1zjzn] {
    background: var(--sheet-header-bg);
    color: var(--text-muted);
    font-style: italic;
    font-weight: var(--font-weight-normal);
}

/* Bottled and closed projects are history: muted, no strike — the letter says which. */
.bwl-done .bwl-cell[b-80csd1zjzn] {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

.bwl-done .bwl-letter[b-80csd1zjzn] {
    font-weight: var(--font-weight-normal);
}

/* ── The read-only sheets (Analysis, Sales) ───────────────────────────────── */
/* Auto layout, NOT the Ledger's fixed layout with a hand-summed min-width floor. This sheet's column
   COUNT varies — the optional micro assays render only when a lot on the sheet carries one — so a
   fixed floor would be wrong at every width but one. Its content is short (a number, a date), so
   auto sizing lands well and the table still fills the pane. ⚠ This is the ONE place in this file
   that departs from the .bwl-grid contract above; the reason is the variable column count.
   ⛔ The Sales sheet is NOT in this rule and must not be added to it — see .bws-col-* below. */
.bwa-grid[b-80csd1zjzn] {
    table-layout: auto;
    min-width: 0;
}

/* Read-only sheets: on Analysis every number is the lab's, on Sales every row already happened, and
   on Blends every figure is the AppHost's. Nothing on any of them is NWC's to write, so none may
   offer the Ledger's editable-cell cursor (.bwl-cell is `cursor: cell` by default — a new read-only
   grid that forgets to join this list silently invites a click that can never land). */
.bwa-grid .bwl-cell[b-80csd1zjzn],
.bws-grid .bwl-cell[b-80csd1zjzn],
.bwb-grid .bwl-cell[b-80csd1zjzn] {
    cursor: default;
}

/* The unit, small beside the header label — or inside the cell when the lots disagree about it
   (prod carries Total SO2 as both ppm and mg/L). */
.bwa-unit[b-80csd1zjzn] {
    margin-left: 3px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* A lot is TWO rows: its values, then the date each value was sampled. Dropping the border between
   them is what makes the pair read as one block rather than two lots. */
.bwa-values .bwl-cell[b-80csd1zjzn],
.bwa-values .bwl-rowhead[b-80csd1zjzn] {
    border-bottom: 0;
}

.bwa-date[b-80csd1zjzn] {
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--text-muted);
}

/* ⛔ "No result on file" is a STATE, not an empty cell. It is DRAWN — muted so it never competes
   with a real number, but present so it can never be mistaken for one, and never for a zero (which
   means tested and none detected, and renders as an ordinary value). On a sheet used to quote
   buyers, the absence of a test is itself a finding. */
.bwa-untested[b-80csd1zjzn] {
    color: var(--text-muted);
    opacity: 0.65;
}

/* A cell that is a way somewhere: the lot code on the Analysis sheet (into the Workbench), and the
   buyer and lot on the Sales sheet (into the filter box). A real button, styled as the cell text so
   the sheet still reads as a sheet rather than as a page of links. */
.bwa-lot[b-80csd1zjzn],
.bws-link[b-80csd1zjzn] {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--sheet-select);
    text-align: left;
    cursor: pointer;
}

.bwa-lot:hover[b-80csd1zjzn],
.bws-link:hover[b-80csd1zjzn] {
    text-decoration: underline;
}

/* ── The folded microbiology column ─────────────────────────────────────────────────────────
   Seven micro analytes share ONE column. Measured on the 23 lots for sale, six of the seven have
   a result on exactly one lot, so as columns they spent seven column widths to draw dashes. Folded,
   a lot with no micro findings costs nothing and a lot with several shows all of them.

   The cell spans BOTH rows of the lot block (rowspan=2) rather than sitting in the values row: the
   findings need the height, and each carries its own date inline because a cell holding analytes
   run months apart has no single "sampled" date to print underneath it. */
.bwa-col-micro[b-80csd1zjzn] {
    width: 15rem;
}

.bwa-micro[b-80csd1zjzn] {
    text-align: left;
}

.bwa-microcell[b-80csd1zjzn] {
    /* ⛔ The one cell on either sheet that wraps. Everything else is a fixed-width figure in a
       scrolling grid; this holds a variable number of findings and must grow down, not sideways.

       All four overrides are load-bearing against the .bwl-cell contract: that contract sets
       nowrap + overflow:hidden + a 22px height to keep the grid on its row rhythm, and .bwa-values
       drops the bottom border so a lot's value and date rows read as one block. A cell spanning
       BOTH those rows has to opt out of each: clipped at 22px it would show one finding and hide
       the rest, and with no bottom border the lot block would not close. */
    white-space: normal;
    overflow: visible;
    height: auto;
    vertical-align: middle;
    text-align: left;
    line-height: 1.35;
    padding: 3px 6px;
}

.bwa-values .bwa-microcell[b-80csd1zjzn] {
    border-bottom: 1px solid var(--sheet-gridline);
}

/* Each finding on its own line: what it is, what it read, in what unit, and when. */
.bwa-marker[b-80csd1zjzn] {
    display: block;
    font-size: var(--font-size-xs);
    white-space: nowrap;
}

.bwa-marker-name[b-80csd1zjzn] {
    color: var(--text-muted);
}

.bwa-marker-value[b-80csd1zjzn] {
    margin-left: 4px;
    font-variant-numeric: tabular-nums;
}

.bwa-marker-date[b-80csd1zjzn] {
    margin-left: 5px;
    font-style: italic;
    color: var(--text-muted);
}

/* ⛔ The one micro ABSENCE that still earns space. Nobody runs a Zygosaccharomyces count as a
   matter of course, so those absences say nothing by saying nothing — but a wine offered for sale
   with no Brett work done is the first thing a buyer asks about. Muted, never alarming: it reports
   that a test has not been run, not that anything is wrong with the wine. */
.bwa-nobrett[b-80csd1zjzn] {
    color: var(--text-muted);
    opacity: 0.8;
}

.bwa-nobrett i[b-80csd1zjzn] {
    margin-right: 3px;
}

/* ── The Sales sheet ──────────────────────────────────────────────────────────
   Twenty-two years of bulk wine that already went out. It keeps the .bwl-grid contract — fixed
   layout, hand-summed floor — and shares the cell-as-button rule with the Analysis sheet
   (.bwa-lot, .bws-link); everything below is what only history needs.

   ⛔⛔ FIXED COLUMNS, NOT AUTO, AND THE REASON IS MEASURED. Built with table-layout:auto first,
   which let the four text columns take 1,098px between them and made the whole table 1,602px in a
   1,270px pane — 332px of overflow, with Price and Total scrolled off the right edge. The money is
   the point of the sheet; it cannot be the part you have to scroll for.

   The widths below sum to exactly 1255 — `.bwl-scroll`'s clientWidth on Jeff's desktop, MEASURED
   2026-09-09 at 1536x695 CSS px, dpr 1.25, and the same figure the Ledger's own set is built to.
   Each was chosen from the real max content width per column: canvas measureText at the resolved
   13.6px face, over ALL 1,057 real recap rows rendered at once (sandbox, 2026-09-12, Playwright
   Chromium at 1536x695) — not eyeballed, and not from the header labels alone.

   ⛔ The four numeric columns are sized to their measured MAX so a gallonage, a price or a dollar
   total never ellipsizes — the Ledger's own rule, and the whole reason someone opens this sheet.
   Measured maxima: Gallons 52, Tons 52, Price 93, Total 86 (+ the disagreement mark). The text
   columns take the ellipsis instead, each with its full value on hover, and only a handful reach
   it: Lot p90 130 in 195, Buyer p90 184 in 310, Broker p90 38 in 120, Paid p90 87 in 194.
   ⚠ If you re-widen one, re-measure and say what you measured it with.

   ⛔ THERE IS NO WINE COLUMN, and that is a finding rather than an omission. The recap's
   DESCRIPTION cell is filled on 303 of the 1,057 rows and on 300 of those it is just the first six
   characters of the lot code beside it (HWIMER0179YNT → HWIMER); the other three are the Private
   Labels tab, which carries a real description and no lot code at all. It was built as its own
   140px column first and stood empty down the whole first screen. Folded into Lot it costs nothing
   and loses nothing — the same call the Analysis sheet made about its micro analytes. */
.bws-grid[b-80csd1zjzn] { min-width: 1255px; }

.bws-col-date[b-80csd1zjzn] { width: 80px; }
.bws-col-lot[b-80csd1zjzn] { width: 195px; }      /* p50 119, p90 130; also holds the wine on the 3 rows with no code */
.bws-col-buyer[b-80csd1zjzn] { width: 310px; }    /* p90 184 — the widest column, because the buyer IS the lookup */
.bws-col-broker[b-80csd1zjzn] { width: 120px; }   /* p50 10: a broker is named on 197 rows */
.bws-col-qty[b-80csd1zjzn] { width: 56px; }
.bws-col-price[b-80csd1zjzn] { width: 96px; }
.bws-col-total[b-80csd1zjzn] { width: 104px; }
.bws-col-paid[b-80csd1zjzn] { width: 194px; }     /* free text, p90 87, max 200 — it takes what the Wine column gave back */

/* ⛔ "No date on the sheet" is a STATE, not an empty cell — three real sales are in it, with real
   lots, buyers and dollars. Drawn muted so it never competes with a date, but drawn, because a
   blank cell reads as a rendering oversight instead of as a fact about the record. Same reasoning
   as .bwa-untested above, different fact. */
.bws-nodate[b-80csd1zjzn],
.bws-none[b-80csd1zjzn] {
    font-style: italic;
    color: var(--text-muted);
}

/* The buyer text is always the sheet's own spelling. A match to a business on file is a mark BESIDE
   it, never a replacement — so a wrong match is visible rather than hidden behind a tidy name. */
.bws-onfile[b-80csd1zjzn] {
    margin-left: 4px;
    font-size: var(--font-size-xs);
    color: var(--green-600);
}

/* ⛔ A row whose own price, quantity and total contradict each other. Marked, never corrected: the
   total is what the desk invoiced, so the sheet reports the doubt and leaves the figure alone. */
.bws-disagree[b-80csd1zjzn] {
    color: var(--danger, #b02a20);
}

.bws-disagree i[b-80csd1zjzn] {
    margin-left: 4px;
    font-size: var(--font-size-xs);
}

/* The sheet draws a page at a time; this opens out the next one. It sits under the table rather
   than in the status bar because it is an action on the sheet, and the status bar counts the whole
   match either way — so the reader can always see how much is still behind this button. */
.bws-more[b-80csd1zjzn] {
    display: block;
    width: 100%;
    padding: 8px;
    border: 0;
    border-top: 1px solid var(--sheet-gridline);
    background: var(--sheet-chrome-bg);
    font-size: var(--font-size-sm);
    color: var(--sheet-select);
    cursor: pointer;
}

.bws-more:hover[b-80csd1zjzn] {
    text-decoration: underline;
}

.bws-more-rest[b-80csd1zjzn] {
    margin-left: 6px;
    color: var(--text-muted);
}

/* ───────────────────────────────────────────────────────────────────────
   .bwt-* — the Trends sheet (the fourth worksheet).

   Layout only. The KPI row is the global .nwc-statstrip and every bar is
   the global .nwc-meter — ⛔ neither is re-implemented here, because a
   second copy of a shared shape is exactly what the css-duplicate-audit
   gate counts. The plots themselves are Shared/Weather/WeatherTrendChart
   and carry their own scoped styles.
   ─────────────────────────────────────────────────────────────────────── */
.bwt-sheet[b-80csd1zjzn] {
    padding: var(--space-sm);
    overflow-y: auto;
}

.bwt-kpis[b-80csd1zjzn] {
    margin-bottom: var(--space-xs);
}

/* The sentence that reads this year against the history. It is the page's
   conclusion, so it is the one line here that is not a label or a figure. */
.bwt-headline[b-80csd1zjzn] {
    margin: 0 0 var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-left: 3px solid var(--sheet-select);
    background: var(--surface-subtle);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* The plot grid: three year charts plus the season panel. One column while
   narrow; a 2x2 at Jeff's 1536px desktop, where each cell is ~623px and the
   shared 600-unit viewBox renders ~609px without letterboxing. ⛔ The fourth
   cell is filled deliberately — three charts in a two-column grid leave a
   hole, and a hole beside a chart reads as something that failed to load. */
.bwt-charts[b-80csd1zjzn] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.bwt-chart[b-80csd1zjzn] {
    min-width: 0;
    padding: var(--space-xs);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.bwt-chart-title[b-80csd1zjzn] {
    margin-bottom: 2px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.bwt-panels[b-80csd1zjzn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-sm);
}

.bwt-panel[b-80csd1zjzn] {
    min-width: 0;
    padding: var(--space-xs) var(--space-sm) var(--space-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.bwt-panel-title[b-80csd1zjzn] {
    margin: 0 0 2px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* What a panel admits about its own coverage. ⛔ Always rendered, so its
   absence never reads as completeness. */
.bwt-panel-note[b-80csd1zjzn] {
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
}

.bwt-rows[b-80csd1zjzn] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* name | bar | value | sub — the bar takes the slack so every row's figures
   line up in a column the eye can run down. */
.bwt-row[b-80csd1zjzn] {
    display: grid;
    grid-template-columns: minmax(0, 8rem) minmax(2rem, 1fr) auto auto;
    align-items: center;
    gap: var(--space-2xs);
    padding: 2px 0;
    font-size: var(--font-size-xs);
}

.bwt-row + .bwt-row[b-80csd1zjzn] {
    border-top: 1px solid var(--border-subtle);
}

/* Months, and anything else with a short fixed label, do not need 8rem of it. */
.bwt-rows-month .bwt-row[b-80csd1zjzn] {
    grid-template-columns: minmax(0, 2.5rem) minmax(2rem, 1fr) auto auto;
}

.bwt-row-name[b-80csd1zjzn] {
    overflow: hidden;
    color: var(--text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A buyer name types itself into the shared filter — the same affordance the
   Sales sheet gives it, so it must look the same and not like a new kind of
   control. */
.bwt-row-link[b-80csd1zjzn] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--sheet-select);
    text-align: left;
    cursor: pointer;
}

.bwt-row-link:hover[b-80csd1zjzn] {
    text-decoration: underline;
}

.bwt-row-flag[b-80csd1zjzn],
.bwt-row-legacy[b-80csd1zjzn] {
    margin-left: 3px;
    color: var(--text-muted);
}

/* The legacy marker sits quieter than the ambiguity flag on purpose: a ruled code is an answer, not a
   warning, so it reads as a footnote rather than as something wrong with the row. */
.bwt-row-legacy[b-80csd1zjzn] {
    opacity: 0.55;
    font-size: 0.85em;
}

/* ⛔⛔ display:block is LOAD-BEARING, not tidying. `.nwc-meter` is a global utility written for a
   block context (height: 4px), and these bars sit in a <span> inside a grid cell. An inline element
   ignores height, so the meter collapses to nothing and EVERY BAR IN EVERY PANEL renders invisible —
   with the figures beside them still correct, so it reads as a design choice rather than a fault.
   Found by looking at the screen; no test on this sheet could see it, because they all assert text. */
.bwt-row-bar[b-80csd1zjzn] {
    min-width: 0;
}

.bwt-row-bar .nwc-meter[b-80csd1zjzn],
.bwt-row-bar .nwc-meter-fill[b-80csd1zjzn] {
    display: block;
}

.bwt-row-value[b-80csd1zjzn] {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bwt-row-sub[b-80csd1zjzn] {
    min-width: 4.5rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* A row that is real but unnamed — an uncoded varietal, a month nothing sold
   in. ⛔ Dimmed, never hidden: its dollars are in the totals above. */
.bwt-row-muted .bwt-row-name[b-80csd1zjzn],
.bwt-row-muted .bwt-row-value[b-80csd1zjzn] {
    color: var(--text-muted);
}

@media (min-width: 1400px) {
    .bwt-charts[b-80csd1zjzn] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ── The Blends sheet ──────────────────────────────────────────────────────────────────────
   Every trial blend the AppHost holds. Read-only like Analysis and Sales, so .bwb-grid is named in
   the shared read-only cursor rule above rather than carrying a second copy of it here.

   ⚠ THE WIDTHS BELOW ARE CHOSEN, NOT MEASURED PER COLUMN. The Sales set beside them was built from
   canvas measureText over all 1,057 real recap rows; this one was not — there are 68 blends on prod
   and their names are short, so the pane was not the binding constraint. What IS held is the sum:
   1255px, the same clientWidth .bwl-scroll gets on Jeff's desktop (1536x695 CSS px, dpr 1.25,
   measured 2026-09-09 for the Sales sheet). ⛔ If a name ever ellipsizes in practice, MEASURE the
   real distribution before re-widening, and say what you measured it with.

   ⭐ The "On sheet" bridge column (110px, added for the blend↔sheet bridge) was carved OUT OF Name
   (was 481px) rather than added on top, so the sum held at 1255px instead of growing the pane. */
.bwb-grid[b-80csd1zjzn] { min-width: 1255px; }

.bwb-col-name[b-80csd1zjzn] { width: 371px; }     /* the blend's own name, and the link into the workspace */
.bwb-col-status[b-80csd1zjzn] { width: 80px; }
.bwb-col-lots[b-80csd1zjzn] { width: 80px; }
.bwb-col-onsheet[b-80csd1zjzn] { width: 110px; }  /* "n/m lots" -- how many of this blend's components are lots the bulk wine sheet holds */
.bwb-col-gal[b-80csd1zjzn] { width: 120px; }      /* Total gal and Target gal, same scale so they read against each other */
.bwb-col-count[b-80csd1zjzn] { width: 105px; }    /* Allocated and Work */
.bwb-col-updated[b-80csd1zjzn] { width: 120px; }

/* ⛔ "Not fetched" is a STATE, not a missing number. Target gal needs a second read per blend, so
   the sheet does not make 68 of them for a column nobody has opened — this cell is muted until the
   row's lots are expanded, and the hover says so. Same reasoning as .bwa-untested: never let an
   em dash be mistaken for "the blend states no target". */
.bwb-unfetched[b-80csd1zjzn] {
    color: var(--text-muted);
}

/* The "On sheet" column's two blank-looking states, deliberately colored apart. "Touches none of
   the sheet" is a real, ordinary answer (most blends will read this) and is muted like every other
   not-applicable cell here. "Could not check" is a FAILED read of the usage bridge and borrows the
   same danger color .bwl-msg-error uses, so a reader does not mistake a stale AppHost hop for "this
   blend has nothing to do with the sheet". */
.bwb-onsheet-none[b-80csd1zjzn] {
    color: var(--text-muted);
}

.bwb-onsheet-error[b-80csd1zjzn] {
    color: var(--danger, #b02a20);
}

/* The lot breakdown under an expanded blend -- "GhostBear Blend 500gal X lot, 400gal y lot", in
   Jeff's own words. It wraps rather than scrolls: a blend of fifteen lots is worth three lines. */
.bwb-lots .bwl-cell[b-80csd1zjzn] {
    white-space: normal;
    padding-top: 4px;
    padding-bottom: 4px;
}

.bwb-lot[b-80csd1zjzn] {
    display: inline-block;
    margin-right: 14px;
    white-space: nowrap;
}

.bwb-lot-pct[b-80csd1zjzn] {
    margin-left: 4px;
    color: var(--text-muted);
}

/* ── The Memos sheet ─────────────────────────────────────────────────────
   The only sheet in the workbook that is NOT a grid, and deliberately so: a reviewer is comparing two
   documents' worth of facts and looking at a picture of one of them, which a table row cannot hold.
   Cards, stacked, one sale per card.

   ⛔ The comparison is the whole design. The sale's facts and the memo's facts use the SAME
   .bwm-facts list, so the two read as two columns of one comparison rather than as two unrelated
   blocks — that shared definition is load-bearing, not incidental reuse. */

.bwm-sheet[b-80csd1zjzn] {
    padding: var(--space-md);
    font-family: var(--sheet-font);
    font-size: var(--font-size-sm);
}

.bwm-bar[b-80csd1zjzn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.bwm-filter[b-80csd1zjzn] {
    flex: 0 1 280px;
    padding: 4px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    background: var(--sheet-cell-bg);
    font: inherit;
    color: var(--text-primary);
}

.bwm-counts[b-80csd1zjzn] {
    color: var(--text-muted);
}

/* Contested is the state a wrong click corrupts, so it is the one thing on this sheet that gets a
   colour of its own. */
.bwm-contested-pill[b-80csd1zjzn] {
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--danger, #b02a20);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.bwm-undo[b-80csd1zjzn] {
    margin-left: auto;
    padding: 3px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    background: var(--sheet-chrome-bg);
    font: inherit;
    cursor: pointer;
}

.bwm-message[b-80csd1zjzn] {
    margin: 0 0 var(--space-md);
    padding: 6px 10px;
    border-radius: var(--radius-xs);
    background: var(--surface-subtle);
    color: var(--text-primary);
}

.bwm-message-error[b-80csd1zjzn] {
    color: var(--danger, #b02a20);
}

.bwm-group[b-80csd1zjzn] {
    margin-bottom: var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--sheet-cell-bg);
}

.bwm-group-contested[b-80csd1zjzn] {
    border-left: 3px solid var(--danger, #b02a20);
}

.bwm-group-head[b-80csd1zjzn] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-sm) var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--sheet-chrome-bg);
    border-bottom: 1px solid var(--sheet-gridline);
}

.bwm-disclose[b-80csd1zjzn] {
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    color: var(--text-primary);
    cursor: pointer;
}

.bwm-caret[b-80csd1zjzn] {
    margin-right: var(--space-2xs);
    color: var(--text-muted);
}

.bwm-sale-buyer[b-80csd1zjzn] {
    font-weight: var(--font-weight-semibold);
}

.bwm-contested-flag[b-80csd1zjzn] {
    flex-basis: 100%;
    color: var(--danger, #b02a20);
    font-size: var(--font-size-xs);
}

/* One definition, used by the sale AND by every memo card under it — see the banner above. */
.bwm-facts[b-80csd1zjzn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-md);
    margin: 0;
}

.bwm-facts dt[b-80csd1zjzn] {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

.bwm-facts dd[b-80csd1zjzn] {
    margin: 0 var(--space-sm) 0 var(--space-2xs);
    font-variant-numeric: tabular-nums;
}

.bwm-cards[b-80csd1zjzn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
}

.bwm-card[b-80csd1zjzn] {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-sm);
    border: 1px solid var(--sheet-gridline);
    border-radius: var(--radius-xs);
}

/* The thumbnail is 260px wide as the importer renders it; the box is fixed so a card with no preview
   is the same shape as one with, and the button row does not move between them. */
.bwm-thumb[b-80csd1zjzn] {
    flex: 0 0 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    background: var(--surface-subtle);
    border-radius: var(--radius-xs);
    text-align: center;
    padding: var(--space-2xs);
}

.bwm-thumb-img[b-80csd1zjzn] {
    max-width: 100%;
    max-height: 180px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    background: #fff;
}

.bwm-card-body[b-80csd1zjzn] {
    flex: 1 1 auto;
    min-width: 0;
}

.bwm-card-title[b-80csd1zjzn] {
    margin: 0 0 var(--space-2xs);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.bwm-provenance[b-80csd1zjzn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin: var(--space-2xs) 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

/* The file name is the only handle a 2006 memo with no number has, so it is never truncated away
   entirely — it wraps instead. */
.bwm-file[b-80csd1zjzn] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-2xs);
    overflow-wrap: anywhere;
}

.bwm-conversion-error[b-80csd1zjzn] {
    margin: var(--space-2xs) 0 0;
    color: var(--danger, #b02a20);
    font-size: var(--font-size-xs);
}

.bwm-actions[b-80csd1zjzn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.bwm-accept[b-80csd1zjzn],
.bwm-dismiss[b-80csd1zjzn] {
    padding: 3px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xs);
    font: inherit;
    cursor: pointer;
}

/* Filing is the affirmative act and reads as one; setting aside is deliberately quieter, because it
   is the one a tired reviewer would otherwise click to make the queue shorter. */
.bwm-accept[b-80csd1zjzn] {
    border-color: var(--green-600);
    background: var(--green-600);
    color: #fff;
    font-weight: var(--font-weight-semibold);
}

.bwm-dismiss[b-80csd1zjzn] {
    background: var(--sheet-chrome-bg);
    color: var(--text-primary);
}

.bwm-accept:disabled[b-80csd1zjzn],
.bwm-dismiss:disabled[b-80csd1zjzn],
.bwm-undo:disabled[b-80csd1zjzn] {
    opacity: 0.5;
    cursor: default;
}

@media (max-width: 720px) {
    /* The card goes to one column before the thumbnail squeezes the facts into a vertical ribbon. */
    .bwm-card[b-80csd1zjzn] {
        flex-direction: column;
    }

    .bwm-thumb[b-80csd1zjzn] {
        flex-basis: auto;
    }
}

/* The project's face, in the Col.Trials cell a project row leaves empty. A mark ON the cell, never
   a control: no hover, no cursor, no focus ring -- the cell keeps the grid's ordinary selection and
   the proof is linked from the ribbon.
   ⛔ It sat in the NAME cell until 2026-09-15. At 91px that cell already truncated every project
   name, and the picture took another four characters off what survived (measured 1536x695 CSS px,
   Chrome, sandbox); here it costs nothing and the name comes back. Do not move it back.
   Centring comes from .bwl-cell.trials, which the badge already relies on.
   ⛔ contain, not cover: a label is portrait and cropping it to a square cuts the brand off the top,
   which defeats the whole point of showing a face. Same choice as the picker's .lpp-thumb img.
   Height is pinned to the row -- a taller picture would push the row and buckle the sheet. */
.bwl-project-face[b-80csd1zjzn] {
    width: 1.15rem;
    height: 1.15rem;
    object-fit: contain;
    border-radius: var(--radius-sm);
    vertical-align: -0.2em;
    background: var(--surface-subtle);
}

/* ── The Projects sheet ───────────────────────────────────────────────────── */
/* The private-label pipeline, one row per bulkwine.SalesProjects row. It keeps the Ledger's FIXED
   layout with a hand-summed floor (not the Analysis sheet's auto layout): its column count is
   constant, and two of its columns hold free text that would otherwise take the whole table with it.

   ⛔ It is NOT in the read-only-sheets cursor rule above. Four of its nine columns are typed in, so
      .bwl-cell keeps `cursor: cell` on those and .bwl-cell.ro supplies `cursor: default` on the
      other five — the cursor tells the truth per cell rather than per sheet.

   ── MEASURED 2026-09-21, and here is exactly what under ────────────────────────────────────
   Chrome via playwright-cli, viewport 1536x695 CSS px (Jeff's own desktop geometry: 1920x1080 at
   125% Windows scaling), worktree NWCWebApp2022 against innovint_sandbox, 3 sales projects over
   5 commitments and 4 lots. ⛔ Quote those conditions with any number below or the number means
   nothing.

     .bwl-scroll clientWidth   1270px   (⚠ NOT the 1255px the .bws-col-* block above records for
                                         the Sales sheet — that reading is real but is a DIFFERENT
                                         sheet's chrome; do not carry one across.)
     table rendered width      1270px   — no horizontal scroll: the 1255px floor below is under the
                                         space available, so the browser stretches each column by
                                         2-3px to fill. The declared widths are the RATIO, not the
                                         pixels you will measure.

   Per column, rendered width / how far the widest real cell overflowed it:
     name 233/0 · buyer 177/0 · status 71/0 · bottling 89/0 · commitments 105/0
     lots 223/55 · gallons 81/0 · face 53/0 · notes 194/100

   ⚠ Lots and Notes CLIP, and that is the design rather than a shortfall: both hold content with no
     upper bound (a project can hold ten lots; a note runs to 2,000 characters), so no width fits
     them and a width that tried would take it from the columns that can be sized exactly. Both are
     in ProjectClippingCols, so hovering one shows its own value FIRST and the explanation under it.
     ⛔ Do not widen either by taking from Name or Buyer without re-measuring: 233px is a 20-character
     programme name and 177px is "Mancuso Wine Brokerage", both with nothing to spare.

   ⚠ The sandbox lot codes measured here (HWI24DRRCHOCMIX, HWI25CHBH17C_) are longer than the
     HWI24CSXYZ shape the rest of the sheet is written around, so 55px is a pessimistic reading of
     the Lots clip, not a typical one. ⛔ Re-measure against prod once a real pipeline is on it —
     prod carried ZERO sales projects on 2026-09-21, which is why these three were created through
     the Ledger's own write path rather than found. */
.bwp-grid[b-80csd1zjzn] { min-width: 1255px; }

.bwp-col-name[b-80csd1zjzn] { width: 230px; }         /* the widest text column: a programme name is what the sheet is read down */
.bwp-col-buyer[b-80csd1zjzn] { width: 175px; }        /* one business name, or "N buyers" */
.bwp-col-status[b-80csd1zjzn] { width: 70px; }        /* holds "Bottled", the longest of the three words */
.bwp-col-bottling[b-80csd1zjzn] { width: 88px; }      /* yyyy-MM-dd */
.bwp-col-commitments[b-80csd1zjzn] { width: 104px; }  /* sized to the HEADER, which is longer than "12 commitments" */
.bwp-col-lots[b-80csd1zjzn] { width: 220px; }         /* a list of lot codes; ellipsis with the full set on hover */
.bwp-col-gallons[b-80csd1zjzn] { width: 80px; }
.bwp-col-face[b-80csd1zjzn] { width: 52px; }          /* a 1.15rem stamp under a one-word header; the enum member is Face, the header reads "Proof" */
.bwp-col-notes[b-80csd1zjzn] { width: 192px; }        /* free text, ellipsis with the full note on hover */

/* ── The blank row ─────────────────────────────────────────────────────────────────────
   The row under the table, where typing a name starts a project. It has to read as an
   INVITATION and never as a project: muted, no borders of its own beyond the grid's, and
   the prompt text in the name cell is a placeholder that disappears the moment the editor
   opens over it. ⛔ Never give it the bwl-done treatment — a finished project and an
   unstarted one are opposite things and must not look alike. */
/* The blank row's refusal, pinned to the foot of the pane — see the note in the markup. */
.bwp-newrow-noterow > th[b-80csd1zjzn],
.bwp-newrow-noterow > td[b-80csd1zjzn] {
    position: sticky;
    bottom: 0;
    z-index: 3;
}

.bwp-newrow > td[b-80csd1zjzn] { background: transparent; }

.bwp-newrow-prompt[b-80csd1zjzn] {
    color: var(--text-muted);
    font-style: italic;
    opacity: .75;
}

/* The invitation brightens on approach, the way a table's new-row does in a workbook. */
.bwp-newrow:hover .bwp-newrow-prompt[b-80csd1zjzn],
.bwp-newrow > td.selected .bwp-newrow-prompt[b-80csd1zjzn] { opacity: 1; }
/* /Pages/BulkWine/BulkWineLegendPanel.razor.rz.scp.css */
/* The legend panel's body. Component-prefixed (bwlg-); the panel chrome is SlidingPanel's. */
.bwlg[b-lrohvnzwls] {
    padding: var(--space-md) var(--space-lg) var(--space-xl);
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.bwlg-section + .bwlg-section[b-lrohvnzwls] {
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
}

.bwlg-h[b-lrohvnzwls] {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.bwlg-steps[b-lrohvnzwls] {
    margin: 0;
    padding-left: 1.4em;
}

.bwlg-steps li + li[b-lrohvnzwls] {
    margin-top: var(--space-xs);
}

.bwlg-note[b-lrohvnzwls] {
    margin: var(--space-sm) 0 0;
    color: var(--text-secondary);
}

/* Term / definition pairs, two columns. The term column is sized to the widest key chord. */
.bwlg-kv[b-lrohvnzwls] {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-md);
    row-gap: var(--space-xs);
    margin: 0;
}

.bwlg-kv dt[b-lrohvnzwls] {
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.bwlg-kv dd[b-lrohvnzwls] {
    margin: 0;
}

.bwlg-keys kbd[b-lrohvnzwls] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    padding: 0 4px;
    border: 1px solid var(--border-default);
    border-bottom-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

/* The ladder: letter, word, meaning. The letter column matches the sheet's own letter cells. */
.bwlg-ladder[b-lrohvnzwls] {
    width: 100%;
    margin-top: var(--space-sm);
    border-collapse: collapse;
}

.bwlg-ladder td[b-lrohvnzwls] {
    padding: 4px 6px;
    vertical-align: top;
    border-top: 1px solid var(--border-subtle);
}

.bwlg-letter[b-lrohvnzwls] {
    width: 1.6em;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-align: center;
}

.bwlg-word[b-lrohvnzwls] {
    width: 9em;
    white-space: nowrap;
}

.bwlg-meaning[b-lrohvnzwls] {
    color: var(--text-secondary);
}

/* "holds" beside a rung's word — the sheet's green, the same colour a holding row's letter wears. */
.bwlg-holds[b-lrohvnzwls] {
    margin-left: 4px;
    font-size: var(--font-size-2xs);
    font-variant: small-caps;
    letter-spacing: 0.04em;
    color: var(--sheet-select);
}
/* /Pages/BulkWine/BulkWineSheetImportPanel.razor.rz.scp.css */
/* The sheet-import drawer: choose a workbook, answer what it could not work out, land it.
   Same chrome as the other bulk-wine drawers, so the queue reads as part of the sheet. */

.bsi-panel[b-x5rs4xotd1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── choose a file ───────────────────────────────────────────────────────────────────── */

.bsi-choose[b-x5rs4xotd1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 28px 16px;
    border: 1px dashed var(--sheet-header-border);
    border-radius: var(--radius-xs);
    background: var(--sheet-chrome-bg);
    text-align: center;
}

.bsi-choose-icon[b-x5rs4xotd1] {
    font-size: 2rem;
    color: var(--text-muted);
}

.bsi-choose-title[b-x5rs4xotd1] {
    font-weight: 600;
}

.bsi-choose-sub[b-x5rs4xotd1],
.bsi-source-when[b-x5rs4xotd1] {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.bsi-choose-btn[b-x5rs4xotd1] {
    margin-top: 6px;
}

.bsi-reassure[b-x5rs4xotd1],
.bsi-clear[b-x5rs4xotd1] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    line-height: 1.5;
}

.bsi-resume[b-x5rs4xotd1] {
    align-self: flex-start;
    padding: 0;
}

.bsi-busy[b-x5rs4xotd1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 28px 16px;
    justify-content: center;
    color: var(--text-muted);
}

/* ── the summary strip ───────────────────────────────────────────────────────────────── */

.bsi-summary[b-x5rs4xotd1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    background: var(--sheet-chrome-bg);
}

.bsi-source[b-x5rs4xotd1] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.bsi-source-name[b-x5rs4xotd1] {
    font-weight: 600;
    word-break: break-all;
}

.bsi-chips[b-x5rs4xotd1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bsi-chip[b-x5rs4xotd1] {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: var(--font-size-sm);
    border: 1px solid transparent;
}

.bsi-chip-ready[b-x5rs4xotd1] {
    background: var(--success-subtle, #e6f4ea);
    border-color: var(--success-border, #b7ddc2);
}

.bsi-chip-ask[b-x5rs4xotd1] {
    background: var(--warning-subtle, #fdf3d7);
}

.bsi-chip-done[b-x5rs4xotd1],
.bsi-chip-skip[b-x5rs4xotd1] {
    background: var(--sheet-header-bg);
    color: var(--text-muted);
}

/* ── notices ─────────────────────────────────────────────────────────────────────────── */

.bsi-warnings[b-x5rs4xotd1],
.bsi-error[b-x5rs4xotd1],
.bsi-landed[b-x5rs4xotd1] {
    padding: 8px 10px;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.bsi-warnings[b-x5rs4xotd1] {
    background: var(--sheet-chrome-bg);
    border: 1px solid var(--sheet-header-border);
}

.bsi-warnings-head[b-x5rs4xotd1] {
    font-weight: 600;
    margin-bottom: 2px;
}

.bsi-warnings ul[b-x5rs4xotd1],
.bsi-landed-errors[b-x5rs4xotd1] {
    margin: 0;
    padding-left: 20px;
}

.bsi-error[b-x5rs4xotd1] {
    background: var(--danger-subtle, #fdeaea);
}

.bsi-landed[b-x5rs4xotd1] {
    background: var(--success-subtle, #e6f4ea);
}

.bsi-landed.has-errors[b-x5rs4xotd1] {
    background: var(--warning-subtle, #fdf3d7);
}

.bsi-landed-head[b-x5rs4xotd1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* ── the queue ───────────────────────────────────────────────────────────────────────── */

.bsi-queue-head[b-x5rs4xotd1] {
    font-weight: 600;
    margin-top: 4px;
}

.bsi-row[b-x5rs4xotd1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
}

.bsi-row-head[b-x5rs4xotd1] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.bsi-where[b-x5rs4xotd1] {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.bsi-skip[b-x5rs4xotd1] {
    border: 0;
    background: none;
    padding: 0;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-decoration: underline;
    cursor: pointer;
}

.bsi-skip:hover:not(:disabled)[b-x5rs4xotd1] {
    color: var(--text-body);
}

/* The sheet's own words, so an answer is given against what she typed. */
.bsi-cells[b-x5rs4xotd1] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--font-size-sm);
    word-break: break-word;
}

.bsi-q[b-x5rs4xotd1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--sheet-header-border);
}

.bsi-q-text[b-x5rs4xotd1] {
    line-height: 1.45;
}

.bsi-cands[b-x5rs4xotd1],
.bsi-rungs[b-x5rs4xotd1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.bsi-cand[b-x5rs4xotd1],
.bsi-rung[b-x5rs4xotd1] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    background: var(--sheet-chrome-bg);
    cursor: pointer;
    text-align: left;
}

.bsi-cand:hover:not(:disabled)[b-x5rs4xotd1],
.bsi-rung:hover:not(:disabled)[b-x5rs4xotd1] {
    border-color: var(--bs-blue);
}

.bsi-cand:disabled[b-x5rs4xotd1],
.bsi-rung:disabled[b-x5rs4xotd1],
.bsi-skip:disabled[b-x5rs4xotd1] {
    opacity: .55;
    cursor: default;
}

.bsi-cand-name[b-x5rs4xotd1] {
    font-weight: 600;
}

.bsi-cand-detail[b-x5rs4xotd1],
.bsi-rung-label[b-x5rs4xotd1] {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.bsi-rung-letter[b-x5rs4xotd1] {
    font-weight: 700;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.bsi-create[b-x5rs4xotd1] {
    align-self: flex-start;
}

.bsi-numbers[b-x5rs4xotd1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 8px;
    align-items: end;
}

.bsi-field[b-x5rs4xotd1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.bsi-input[b-x5rs4xotd1] {
    padding: 3px 6px;
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    color: var(--text-body);
    width: 100%;
}

/* ── footer ──────────────────────────────────────────────────────────────────────────── */

.bsi-foot[b-x5rs4xotd1] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--sheet-header-border);
}

@media (max-width: 640px) {
    .bsi-numbers[b-x5rs4xotd1] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bsi-foot[b-x5rs4xotd1] {
        flex-wrap: wrap;
    }
}
/* /Pages/BulkWine/BulkWineSheetLogPanel.razor.rz.scp.css */
/* The Sheets-sent drawer.

   Layout comes from the shared utilities — .nwc-lock-col for the column and .nwc-fill-scroll for
   the one child that scrolls inside it. What is left here is only what is particular to this
   table, so the css-duplicate-audit has nothing new to count. */

.bwsl-busy[b-mnd9r7lsns] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
}

.bwsl-find[b-mnd9r7lsns] {
    flex: 0 0 auto;
    padding-bottom: 0.5rem;
}

.bwsl-find-note[b-mnd9r7lsns] {
    padding-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.bwsl-empty[b-mnd9r7lsns] {
    flex: 0 0 auto;
    padding: 1.25rem;
    border: 1px dashed var(--border-default);
    border-radius: 0.375rem;
}

/* The header stays put while a season of sheets scrolls under it — this table is read by scanning
   down the "For" column, which is unusable once the headings have gone. */
.bwsl-table thead th[b-mnd9r7lsns] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--bs-body-bg);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.bwsl-table td[b-mnd9r7lsns] {
    vertical-align: top;
    font-size: 0.85rem;
}

.bwsl-when[b-mnd9r7lsns] {
    white-space: nowrap;
}

.bwsl-for[b-mnd9r7lsns] {
    font-weight: 600;
}

.bwsl-sub[b-mnd9r7lsns] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* ⭐ What was taken off the sheet gets room to be read. It is the column somebody opens this drawer
   for, and truncating a list of hidden headers to an ellipsis would hide the answer. */
.bwsl-off[b-mnd9r7lsns] {
    max-width: 18rem;
}

/* ⛔ What became of an emailed sheet, once the mail service told us. The colour carries the whole
   signal here, so it is stated on the text and not only on a background — this cell is read in a
   dense table, at a glance, down a column. */
.bwsl-landed[b-mnd9r7lsns] {
    font-size: 0.75rem;
    font-weight: 600;
}

.bwsl-landed.bwsl-ok[b-mnd9r7lsns] {
    color: var(--bs-success-text-emphasis, #0a3622);
}

.bwsl-landed.bwsl-warn[b-mnd9r7lsns] {
    color: var(--bs-warning-text-emphasis, #664d03);
}

.bwsl-landed.bwsl-err[b-mnd9r7lsns] {
    color: var(--bs-danger-text-emphasis, #58151c);
}

/* ⭐ The reason a sheet never arrived is the thing somebody opened this drawer to find out, so it
   is on the row in full rather than behind a hover. */
.bwsl-landed-problem[b-mnd9r7lsns] {
    font-size: 0.75rem;
    color: var(--bs-danger-text-emphasis, #58151c);
}
/* /Pages/BulkWine/BulkWineSheetPreviewPanel.razor.rz.scp.css */
/* Drawer chrome for the Prepare-sheet panel.

   ⚠ These rules style the DRAWER, not the sheet. The printed sheet's CSS lives in
   Print/BulkWineSheetPrintStyles.cs and is inlined into a standalone document that never links
   this bundle — read that class's banner before moving anything between the two. */

/* The drawer body is a column -- an alert at the top, then the desk taking the rest -- via the
   shared .nwc-lock-col utility (height: 100%; overflow: hidden).

   ⛔ It must be .nwc-lock-col, NOT .nwc-fill-col. Measured 2026-09-17 in Chrome at
   1536x695: .sliding-panel-body computes to `display: block`, so .nwc-fill-col's `flex: 1`
   is INERT there -- the column then sizes to its content (1116px inside a 646px parent),
   the lot rail and most of the preview land below the fold, and NOTHING scrolls to them
   because the panel body's own overflow never engages. .nwc-lock-col's height: 100%
   resolves against the body's definite height, which is what makes the rail's
   .nwc-fill-scroll claim leftover space instead of inventing it. */

/* Controls on the left, the sheet on the right. min-height/min-width 0 on both children so a
   long lot list scrolls inside the rail instead of stretching the drawer. */
.bwp-body[b-cfph3hyzlu] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    gap: var(--space-sm);
}

/* ── The rail: what goes on the sheet ─────────────────────────────────────── */
.bwp-rail[b-cfph3hyzlu] {
    flex: 0 0 292px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 10px;
    padding-right: var(--space-sm);
    border-right: 1px solid var(--sheet-header-border);
    overflow-y: auto;
}

.bwp-group[b-cfph3hyzlu] {
    flex: none;
    min-height: 0;
}

/* The lot list is the one group allowed to take the height that is left — it is the longest and
   the one she works down. The floor is the load-bearing half: measured 2026-09-17 in Chrome at
   1536x695, sixteen column ticks at natural height left the lot list NINETY-FOUR pixels — four
   rows of twenty-nine — so "the height that is left" has to have a minimum. */
.bwp-group-grow[b-cfph3hyzlu] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 220px;
}

/* ...and the group that yields it: the column ticks shrink and scroll when the rail is short,
   and show all sixteen when the screen is tall enough to hold them. */
.bwp-group-shrink[b-cfph3hyzlu] {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    min-height: 0;
}

.bwp-group-head[b-cfph3hyzlu] {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-bottom: 3px;
}

.bwp-group-title[b-cfph3hyzlu] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 3px;
}

.bwp-group-head .bwp-group-title[b-cfph3hyzlu] {
    margin-bottom: 0;
    margin-right: auto;
}

.bwp-count[b-cfph3hyzlu] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.bwp-link[b-cfph3hyzlu] {
    background: none;
    border: 0;
    padding: 0 2px;
    font-size: var(--font-size-xs);
    color: var(--sheet-select);
    text-decoration: underline;
    cursor: pointer;
}

.bwp-link:disabled[b-cfph3hyzlu] {
    color: var(--gray-400);
    text-decoration: none;
    cursor: default;
}

.bwp-hint[b-cfph3hyzlu] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    line-height: 1.35;
    margin: 4px 0 0;
}

/* Which sheet — two exclusive choices, so one control rather than a dropdown. */
.bwp-seg[b-cfph3hyzlu] {
    display: flex;
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.bwp-seg-btn[b-cfph3hyzlu] {
    flex: 1 1 50%;
    padding: 5px 6px;
    border: 0;
    background: var(--surface-default);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    line-height: 1.2;
    cursor: pointer;
}

.bwp-seg-btn + .bwp-seg-btn[b-cfph3hyzlu] {
    border-left: 1px solid var(--sheet-header-border);
}

.bwp-seg-btn:hover:not(:disabled)[b-cfph3hyzlu] {
    background: var(--gray-100);
}

.bwp-seg-on[b-cfph3hyzlu],
.bwp-seg-on:hover:not(:disabled)[b-cfph3hyzlu] {
    background: var(--sheet-select);
    color: var(--white);
    font-weight: var(--font-weight-semibold);
}

/* ── The tick lists ───────────────────────────────────────────────────────── */
.bwp-tick[b-cfph3hyzlu] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    width: 100%;
    padding: 1px 3px;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    cursor: pointer;
    margin-bottom: 0;
}

.bwp-tick:hover[b-cfph3hyzlu] {
    background: var(--gray-100);
}

/* Ticked out: still listed, visibly not going. A removed row that vanished from the list would
   leave nothing to tick back on. */
.bwp-tick-off span[b-cfph3hyzlu] {
    color: var(--gray-400);
    text-decoration: line-through;
}

.bwp-tick-locked[b-cfph3hyzlu] {
    cursor: default;
    color: var(--text-muted);
}

.bwp-tick-locked:hover[b-cfph3hyzlu] {
    background: none;
}

.bwp-lock[b-cfph3hyzlu] {
    font-size: 0.62rem;
    color: var(--gray-400);
}

.bwp-lot-code[b-cfph3hyzlu] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* An archived lot prints greyed and italic on the sheet; it reads the same here. */
.bwp-lot-muted[b-cfph3hyzlu] {
    color: var(--gray-400);
    font-style: italic;
}

.bwp-lot-gal[b-cfph3hyzlu] {
    flex: none;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* The for-sale sheet's vintage bands, so a lot is ticked under the heading it prints under. */
.bwp-band[b-cfph3hyzlu] {
    position: sticky;
    top: 0;
    padding: 2px 3px;
    margin-top: 4px;
    background: var(--sheet-chrome-bg);
    border-left: 2px solid var(--sheet-select);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
}

/* ── The sheet ────────────────────────────────────────────────────────────── */
.bwp-view[b-cfph3hyzlu] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.bwp-viewbar[b-cfph3hyzlu] {
    display: flex;
    flex: none;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 4px 6px;
    margin-bottom: 6px;
    background: var(--sheet-chrome-bg);
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
}

.bwp-viewbar-title[b-cfph3hyzlu] {
    font-weight: var(--font-weight-semibold);
}

/* What she left out, and that the sheet admits to it. Loud on purpose: these go to buyers. */
.bwp-scope[b-cfph3hyzlu] {
    padding: 0 6px;
    border-radius: var(--radius-xs);
    background: #fff7e6;
    border: 1px solid #f0c987;
    color: #8a4b08;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* What was never offerable — stated, but not the same class of fact as a choice she made. */
.bwp-skipped[b-cfph3hyzlu] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    cursor: help;
}

.bwp-zoom[b-cfph3hyzlu] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 0;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.bwp-zoom select[b-cfph3hyzlu] {
    width: auto;
}

.bwp-busy[b-cfph3hyzlu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

/* The desk the page of paper sits on. */
.bwp-stage[b-cfph3hyzlu] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 10px;
    background: var(--sheet-header-bg);
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
}

/* ⭐⭐ The wrapper carries the SCALED footprint (set inline) while the frame keeps the real page
   width and is scaled from its top-left corner. That split is what makes the stage scroll to the
   right size at every zoom — and it is why the table inside wraps exactly as the PDF does: layout
   happens at 11in regardless of how large the page is being shown. */
.bwp-paper[b-cfph3hyzlu] {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
    background: #fff;
}

.bwp-frame[b-cfph3hyzlu] {
    position: absolute;
    top: 0;
    left: 0;
    width: 1056px;   /* 11in at 96dpi — the page box in BulkWineSheetPrintStyles */
    height: 816px;   /* 8.5in */
    border: 0;
    background: #fff;
    transform-origin: top left;
}

.bwp-unavailable[b-cfph3hyzlu] {
    padding: 48px 0;
    text-align: center;
    color: var(--text-muted);
}

.bwp-unavailable p[b-cfph3hyzlu] {
    margin: 8px 0 0;
}

/* ── The compose form ─────────────────────────────────────────────────────────

   It sits ABOVE the desk rather than in the rail on purpose: the rail is where she decides what
   the sheet SAYS, and this is where she decides who sees it. Putting the recipient among the
   column ticks would make "who" look like one more formatting choice.

   ⚠ Measured 2026-09-17 in Chrome at 1536x695 CSS px (devicePixelRatio 1.25): the drawer is
   1180px wide, so three address boxes at 1fr each are ~370px -- wide enough for a full address
   without wrapping, which is what makes a mistyped one visible before it is sent. */
.bwp-compose[b-cfph3hyzlu] {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: var(--space-sm);
    padding: 12px 14px;
    border: 1px solid var(--sheet-header-border);
    border-radius: 6px;
    background: var(--surface-subtle, rgb(0 0 0 / 2%));
}

.bwp-compose-grid[b-cfph3hyzlu] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.bwp-compose-field[b-cfph3hyzlu] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.bwp-compose-field em[b-cfph3hyzlu] {
    font-weight: 400;
    font-style: normal;
    opacity: 0.75;
}

.bwp-compose-foot[b-cfph3hyzlu] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bwp-compose-attach[b-cfph3hyzlu] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
}

.bwp-compose-attach select[b-cfph3hyzlu] {
    width: auto;
}

/* The From line is quiet but never hidden: she is sending as a shared alias, and the one thing
   she cannot check afterwards is which address the broker saw. */
.bwp-compose-from[b-cfph3hyzlu] {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* A hairline between "email it" and the download forks -- they are different verbs. */
.bwp-sep[b-cfph3hyzlu] {
    width: 1px;
    height: 20px;
    background: var(--sheet-header-border);
}
/* /Pages/BulkWine/BulkWineWorkbenchPanel.razor.rz.scp.css */
/* The Workbench: lot lookup aside, one lot read across every domain in the main pane.
   Chrome (panel width, drawer toggle, footer seam) belongs to LookupSplitPanel — nothing here
   touches it. These rules only lay out the two bodies and the pane's fixed head.

   ⚠ The analyte cards, the analyte pill strip and the analysis messages MOVED to
   Workspace/LotAnalysisSection.razor.css when the analysis body became a child component: CSS
   isolation scopes a stylesheet to one component's own markup, so those rules no longer reach it
   from here. ⛔ Do not re-add them — the panel has no such elements, and a duplicate feeds the
   pre-push css-drift-gate.

   The sections' shared furniture (.lws-*) is in site.css, for the same isolation reason. */

/* ── The lookup aside ─────────────────────────────────────────────────────── */

.bwb-lookup[b-a22cwja225] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    min-height: 0;
    padding: 8px;
}

.bwb-lotlist[b-a22cwja225] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bwb-lot[b-a22cwja225] {
    display: block;
    width: 100%;
    padding: 5px 8px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    font-family: var(--sheet-font, inherit);
    font-size: var(--font-size-md);
    text-align: left;
    color: var(--text-primary);
}

.bwb-lot:hover[b-a22cwja225] {
    background: var(--surface-hover, rgba(0, 0, 0, 0.04));
}

.bwb-lot.active[b-a22cwja225] {
    background: var(--sheet-select);
    color: #fff;
}

.bwb-lot-code[b-a22cwja225] {
    display: block;
}

/* Which wine the code is. Muted and small — it is there to tell two codes apart at a glance, not to
   compete with the code itself, which is what anyone types and quotes. */
.bwb-lot-sub[b-a22cwja225] {
    display: block;
    overflow: hidden;
    color: var(--text-muted);
    font-family: var(--font-family-base, inherit);
    font-size: var(--font-size-2xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bwb-lot.active .bwb-lot-sub[b-a22cwja225] {
    color: rgba(255, 255, 255, 0.8);
}

/* ── The main pane ────────────────────────────────────────────────────────── */

/* A fixed head over a scrolling body, NOT one scrolling column. The lot's figures and the domain
   strip must stay put while a long reading list moves under them: which lot and which domain you
   are on is the one thing that must never scroll away, and the next domain has to be one click from
   wherever you have scrolled to. */
.bwb-main[b-a22cwja225] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.bwb-head[b-a22cwja225] {
    flex: none;
    padding: 10px 12px 0;
    border-bottom: 1px solid var(--border-subtle);
}

.bwb-body[b-a22cwja225] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 12px;
}

.bwb-head-lot[b-a22cwja225] {
    margin-left: 8px;
    font-family: var(--sheet-font, inherit);
    color: var(--text-muted);
}

/* ── The lot's headline figures ───────────────────────────────────────────── */

.bwb-stats[b-a22cwja225] {
    margin-bottom: 6px;
}

/* Oversold — live gallons minus what is held has gone negative. The Ledger sheet paints this red
   and so does the panel; a broker reading one number off a screen must not have to know which
   surface they are on. */
.bwb-stat-bad .nwc-statstrip-value[b-a22cwja225] {
    color: var(--state-danger-fg);
}

/* ── The domain strip ─────────────────────────────────────────────────────── */

/* The shared underline utility carries the look (site.css, Pattern 14). These are the local deltas
   only: the icon spacing, and pulling the strip down onto the head's own bottom border so the
   active tab's underline and the head's rule are one line rather than two. */
.bwb-domains[b-a22cwja225] {
    margin-bottom: -1px;
    border-bottom: 0;
    flex-wrap: wrap;
}

.bwb-domains .nwc-tab[b-a22cwja225] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
/* /Pages/BulkWine/SalesMemoPanel.razor.rz.scp.css */
/* Drawer chrome for the sales memo panel.

   ⚠ These rules style the DRAWER, not the memo. The printed memo's CSS lives in
   Print/SalesMemoPrintStyles.cs and is inlined into a standalone document that never
   links this bundle — see that class before moving anything between the two. */

/* The row's facts across the top, so the drawer is read against the sheet. */
.bwm-facts[b-q2jsoz8vpz] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    padding: 6px 10px;
    margin-bottom: 8px;
    background: var(--sheet-chrome-bg);
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
}

.bwm-fact b[b-q2jsoz8vpz] {
    font-weight: var(--font-weight-semibold);
    margin-right: 4px;
    color: var(--text-muted);
}

/* The version strip reuses .bwm-facts for its chip row; this marks the one the commitment
   currently points at. */
.bwm-history-current[b-q2jsoz8vpz] {
    border-color: var(--sheet-select);
    color: var(--sheet-select);
    font-weight: var(--font-weight-semibold);
}

/* The total edit surface — every field the memo prints, above the preview it feeds. Scrolls on
   its own so a tall form (two parties + terms) never pushes the paper preview out of view. */
.bwm-draft-form[b-q2jsoz8vpz] {
    flex: none;
    max-height: 46vh;
    overflow-y: auto;
    padding: 2px 2px 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--sheet-header-border);
}

/* The drawer body as a column: facts and alerts at the top, the signed-copy row at the foot,
   and the stage taking whatever height is left between them — so an alert appearing or
   clearing resizes the desk instead of leaving a blank band under it. SlidingPanel's body is
   a flexed column item, which is what makes the 100% resolve. */
.bwm-panel[b-q2jsoz8vpz] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The preview stage: a desk the sheet of paper sits on. Scrolls if the memo runs long. */
.bwm-stage[b-q2jsoz8vpz] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: center;
    overflow: auto;
    padding: 12px;
    background: var(--sheet-header-bg);
}

/* Paper at its real size (Letter), so what is read here is what comes off the printer. */
.bwm-frame[b-q2jsoz8vpz] {
    flex: none;
    width: 8.5in;
    height: 11in;
    border: 0;
    background: #fff;
    box-shadow: 0 2px 10px rgb(0 0 0 / 22%);
}

/* The signed-copy drop: the one control that moves a row to M. */
.bwm-upload[b-q2jsoz8vpz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0 0;
    padding: 8px 10px;
    border: 1px dashed var(--sheet-header-border);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.bwm-upload:hover[b-q2jsoz8vpz] {
    border-color: var(--sheet-select);
}

.bwm-signed[b-q2jsoz8vpz] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: var(--font-size-sm);
    color: var(--sheet-select);
}
/* /Pages/BulkWine/Workspace/LotAnalysisSection.razor.rz.scp.css */
/* The Analysis domain of the lot workspace.

   ⚠ MOVED, not copied, out of BulkWineWorkbenchPanel.razor.css when the panel became a
   multi-domain workspace: CSS isolation scopes a stylesheet to ONE component's own markup, so
   these rules stopped reaching this analyte body the moment it became a child component. The panel
   keeps only what styles the panel's own elements (the lookup aside, the main pane, its head).
   ⛔ Do not re-add a `.bwb-card`/`.bwb-tab` block over there — a duplicate feeds the pre-push CSS
   duplication gate, and the panel has no such elements to style. */

.bwb-msg[b-m9y3xappbg] {
    padding: 18px;
    font-size: var(--font-size-md);
    color: var(--text-muted);
}

.bwb-msg-error[b-m9y3xappbg] {
    color: var(--danger, #b02a20);
}

/* One card per analyte. Two across at the panel's open width (990px of main pane), one when the
   lookup drawer is collapsed and the pane is narrower than the floor. */
.bwb-series[b-m9y3xappbg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 12px;
}

.bwb-card[b-m9y3xappbg] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px;
}

.bwb-card-head[b-m9y3xappbg] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.bwb-card-title[b-m9y3xappbg] {
    font-weight: var(--font-weight-medium, 500);
}

.bwb-card-unit[b-m9y3xappbg] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* The latest reading sits at the right of the card head — the number a broker is asking for. */
.bwb-card-latest[b-m9y3xappbg] {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}

.bwb-card-when[b-m9y3xappbg] {
    margin-left: 6px;
    font-size: var(--font-size-xs);
    font-style: italic;
    color: var(--text-muted);
}

/* Every reading, newest first. Capped in height so one long-running analyte cannot push the rest
   of the panel off the screen; it scrolls within its own card. */
.bwb-readings[b-m9y3xappbg] {
    max-height: 160px;
    overflow-y: auto;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-xs);
}

.bwb-readings li[b-m9y3xappbg] {
    display: flex;
    gap: 8px;
    padding: 1px 0;
}

.bwb-reading-value[b-m9y3xappbg] {
    min-width: 56px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.bwb-reading-date[b-m9y3xappbg] {
    color: var(--text-muted);
}

.bwb-card-foot[b-m9y3xappbg] {
    margin-top: 6px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ── The analyte tab strip ────────────────────────────────────────────────────
   A lot carries up to eight series, each a chart plus its full reading list. Stacked, the drawer
   became a long scroll in which the analyte you opened it for was rarely on screen. One at a time,
   with every analyte one click away.

   ⚠ This is the SECONDARY strip. The primary one — the domain strip above it, in the panel's own
   fixed head — uses the shared .nwc-tab-bar/.nwc-tab underline utility. Two strips on one pane only
   read as two controls if they look unalike, so these stay value-carrying pills and are deliberately
   NOT migrated onto .nwc-tab.

   Sticky within the scrolling body, so the strip does not scroll away underneath a long reading
   list — you can always see which analyte you are on and move to the next without scrolling back
   up. The domain strip above it does not scroll at all, so the two never collide. */
.bwb-tabs[b-m9y3xappbg] {
    position: sticky;
    top: -12px; /* cancels .bwb-body's padding so the strip sits flush against the body top */
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: -12px -12px 12px;
    padding: 12px;
    background: var(--white);
    border-bottom: 1px solid var(--border-subtle);
}

/* Each tab carries its analyte's LATEST value, so the strip reads as the lot's summary before you
   pick anything — the same information the Analysis sheet's row gives, in the drawer. */
.bwb-tab[b-m9y3xappbg] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    cursor: pointer;
}

.bwb-tab:hover[b-m9y3xappbg] {
    background: var(--surface-hover, #f1f3f5);
}

.bwb-tab.active[b-m9y3xappbg] {
    border-color: var(--sheet-select);
    background: var(--sheet-select);
    color: #fff;
}

.bwb-tab-name[b-m9y3xappbg] {
    font-weight: 600;
}

.bwb-tab-value[b-m9y3xappbg] {
    font-variant-numeric: tabular-nums;
}
/* /Pages/Calendar/CalendarSourcesPanel.razor.rz.scp.css */
/* CalendarSourcesPanel — bespoke bits only; forms use the shared Pattern-16 grid
   (.nwc-form-grid/.nwc-form-dense) and actions row from site.css. */

.calsrc-body[b-40bgjmf6a9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
}

.calsrc-add-title[b-40bgjmf6a9] {
    margin-top: var(--space-3, 0.75rem);
}

/* ---- Registered-source rows ---- */

.calsrc-list[b-40bgjmf6a9] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.calsrc-row[b-40bgjmf6a9] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.25rem;
    border-bottom: 1px solid var(--border-subtle);
}

.calsrc-row.inactive .calsrc-row-main[b-40bgjmf6a9] {
    opacity: 0.5;
}

.calsrc-dot[b-40bgjmf6a9] {
    flex: 0 0 auto;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--calsrc-accent, var(--slate-500));
}

.calsrc-row-main[b-40bgjmf6a9] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.calsrc-row-name[b-40bgjmf6a9] {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.calsrc-row-meta[b-40bgjmf6a9] {
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calsrc-row-actions[b-40bgjmf6a9] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.3rem;
}

.calsrc-chip[b-40bgjmf6a9] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: var(--blue-100);
    color: var(--blue-700);
}

.calsrc-chip.muted[b-40bgjmf6a9] {
    background: var(--surface-muted);
    color: var(--text-muted);
}

.calsrc-chip.off[b-40bgjmf6a9] {
    background: var(--amber-100);
    color: var(--amber-700, #b45309);
}

/* ---- Discovery picker ---- */

.calsrc-discovered[b-40bgjmf6a9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calsrc-discovered-row[b-40bgjmf6a9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.calsrc-discovered-row:hover[b-40bgjmf6a9] {
    background: var(--surface-muted);
}

.calsrc-discovered-row.picked[b-40bgjmf6a9] {
    border-color: var(--blue-500);
    background: var(--blue-50, #eff6ff);
}

.calsrc-discovered-row .calsrc-row-meta[b-40bgjmf6a9] {
    margin-left: auto;
}

/* ---- Form odds and ends ---- */

.calsrc-find-btn[b-40bgjmf6a9] {
    width: 100%;
}

.calsrc-options[b-40bgjmf6a9] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.calsrc-check[b-40bgjmf6a9] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    margin: 0;
}

.calsrc-check input[b-40bgjmf6a9] {
    width: auto;
    margin: 0;
}

/* ---- Inline result alerts ---- */

.calsrc-alert[b-40bgjmf6a9] {
    font-size: 0.85rem;
    padding: 0.45rem 0.6rem;
    border-radius: var(--radius-sm, 6px);
}

.calsrc-alert.ok[b-40bgjmf6a9] {
    background: var(--green-50, #f0fdf4);
    color: var(--green-700);
}

.calsrc-alert.warn[b-40bgjmf6a9] {
    background: var(--amber-100);
    color: var(--amber-700, #b45309);
}

.calsrc-alert.error[b-40bgjmf6a9] {
    background: var(--red-50, #fef2f2);
    color: var(--red-700);
}
/* /Pages/Calendar/CalendarView.razor.rz.scp.css */
/* Production Calendar — standard 7-column month grid.
   Unique pcal- prefix so declaration bodies don't collide with the
   css-duplicate-audit gate. Comments kept simple (no star-then-slash). */

.pcal-page[b-upqg0bnx9j] {
    padding: 12px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Calendar chooser (in-page switcher) ------------------------------- */
.pcal-switcher[b-upqg0bnx9j] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    background: var(--gray-100);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    align-self: flex-start;
}

.pcal-switch[b-upqg0bnx9j] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 14px;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.pcal-switch:hover[b-upqg0bnx9j] {
    background: var(--gray-200);
    color: var(--gray-900);
}

.pcal-switch .pcal-switch-dot[b-upqg0bnx9j] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cal-accent, var(--gray-400));
}

.pcal-switch.active[b-upqg0bnx9j] {
    background: var(--white);
    color: var(--gray-900);
    border-color: var(--cal-accent, var(--gray-300));
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    cursor: default;
}

/* --- Toolbar ----------------------------------------------------------- */
.pcal-toolbar[b-upqg0bnx9j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

.pcal-title[b-upqg0bnx9j] {
    margin: 0 0 0 6px;
    font-size: 1.4rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary, var(--gray-800));
}

.pcal-toolbar-right[b-upqg0bnx9j] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pcal-demo-badge[b-upqg0bnx9j] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--yellow-100);
    color: var(--gray-800);
    border: 1px solid var(--amber-500);
    border-radius: var(--radius-sm);
    padding: 3px 9px;
    font-size: 0.78em;
    font-weight: var(--font-weight-medium);
}

/* --- Weekday header row ------------------------------------------------- */
.pcal-weekdays[b-upqg0bnx9j] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
}

.pcal-weekday[b-upqg0bnx9j] {
    font-weight: var(--font-weight-bold);
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-600);
    padding: 4px 0;
}

/* --- Month grid (6 rows x 7 cols) -------------------------------------- */
.pcal-grid[b-upqg0bnx9j] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Fixed row height — a busy day no longer stretches its whole week. Overflow chips are
       capped by VisibleEventsFor and surfaced behind the "+N more" toggle instead. */
    grid-auto-rows: 128px;
    gap: 6px;
}

.pcal-grid.loading[b-upqg0bnx9j] {
    opacity: 0.55;
    pointer-events: none;
}

.pcal-cell[b-upqg0bnx9j] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--surface, white);
    padding: 5px 6px;
    overflow: hidden;
    min-height: 0;
}

.pcal-cell.adjacent[b-upqg0bnx9j] {
    background: var(--gray-50);
    color: var(--gray-400);
}

.pcal-cell.today[b-upqg0bnx9j] {
    border-color: var(--blue-500);
    box-shadow: inset 0 0 0 1px var(--blue-500);
}

/* Expanded cell floats its event list above the grid (see .pcal-cell.expanded .pcal-events
   below) instead of growing its row, so the rest of the week never re-flows. */
.pcal-cell.expanded[b-upqg0bnx9j] {
    position: relative;
    z-index: 5;
    overflow: visible;
}

/* --- Loudness gradient -------------------------------------------------- */
/* Tiers, quietest to loudest: past days (recessed) < routine future (base white)
   < current week (faint lift) < today (blue ring). The current-week and past rules
   share specificity with .adjacent, so source order matters: past is listed last so
   an already-elapsed day inside the current week still reads as past, not lifted. */
.pcal-cell.current-week[b-upqg0bnx9j] {
    background: var(--blue-50, #eef4ff);
}

.pcal-cell.past[b-upqg0bnx9j] {
    background: var(--gray-100);
}

.pcal-cell.past .pcal-daynum[b-upqg0bnx9j] {
    color: var(--gray-400);
    font-weight: var(--font-weight-normal, 400);
}

.pcal-cell.past .pcal-events[b-upqg0bnx9j] {
    opacity: 0.55;
    filter: saturate(0.5);
}

.pcal-cell-head[b-upqg0bnx9j] {
    display: flex;
    justify-content: flex-end;
}

.pcal-daynum[b-upqg0bnx9j] {
    font-size: 0.9em;
    font-weight: var(--font-weight-semibold);
    color: inherit;
}

.pcal-cell.today .pcal-daynum[b-upqg0bnx9j] {
    background: var(--blue-500);
    color: var(--white);
    border-radius: 50%;
    width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* --- Event list within a cell ------------------------------------------ */
.pcal-events[b-upqg0bnx9j] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 0;
}

/* Expanded state: the event list detaches into a floating panel anchored under the day
   number, tall enough for the whole day, shadowed above the cells beneath it. The row
   height itself never changes, so neighboring days don't shift. */
.pcal-cell.expanded .pcal-events[b-upqg0bnx9j] {
    position: absolute;
    top: 26px;
    left: 0;
    right: 0;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface, white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    padding: 5px 6px;
    z-index: 6;
}

/* --- Collapse / expand toggle ------------------------------------------- */
.pcal-more-toggle[b-upqg0bnx9j] {
    align-self: flex-start;
    margin-top: 2px;
    border: none;
    background: none;
    padding: 1px 2px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    cursor: pointer;
}

.pcal-more-toggle:hover[b-upqg0bnx9j] {
    color: var(--blue-600);
    text-decoration: underline;
}

.pcal-cell.expanded .pcal-more-toggle[b-upqg0bnx9j] {
    position: relative;
    z-index: 7;
}

/* --- Event chip --------------------------------------------------------- */
.pcal-chip[b-upqg0bnx9j] {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.74rem;
    line-height: 1.3;
    cursor: pointer;
    background: var(--chip-info-bg, var(--gray-100));
    color: var(--chip-info-fg, var(--gray-800));
    /* Reserve the bar so a category-colored chip (inline border-left-color) doesn't shift
       layout; status/scheduled chips override with their own border-left. */
    border-left: 3px solid transparent;
    white-space: nowrap;
    overflow: hidden;
}

.pcal-chip:hover[b-upqg0bnx9j] {
    filter: brightness(0.96);
}

.pcal-chip-time[b-upqg0bnx9j] {
    font-weight: var(--font-weight-bold);
    flex: 0 0 auto;
}

.pcal-chip-subject[b-upqg0bnx9j] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.pcal-chip-icon[b-upqg0bnx9j] {
    flex: 0 0 auto;
    font-size: 0.85em;
}

/* Distinct accent so the tank-temp report reads as the tracked schedule. */
.pcal-chip.tank-report[b-upqg0bnx9j] {
    background: var(--purple-100, #ede7ff);
    color: var(--purple-700, #5b3fb0);
    border-left: 3px solid var(--purple-500);
    font-weight: var(--font-weight-semibold);
}

.pcal-chip.tank-report:hover[b-upqg0bnx9j] {
    filter: brightness(0.97);
}

/* --- Event status / emphasis (loudness within a cell) ------------------- */
/* Non-confirmed events recede so a "maybe" or out-of-office never reads as committed. */
/* Tentative: diagonal hatch + dashed border + desaturated — the Outlook "maybe" convention. */
.pcal-chip.tentative[b-upqg0bnx9j] {
    background: repeating-linear-gradient(135deg, var(--gray-200) 0, var(--gray-200) 4px, var(--gray-50) 4px, var(--gray-50) 8px);
    color: var(--gray-600);
    border: 1px dashed var(--gray-500);
    font-weight: var(--font-weight-normal, 400);
    opacity: 0.7;
}

/* Out-of-office: italic + dashed bar + muted — present but clearly not a hard commitment. */
.pcal-chip.oof[b-upqg0bnx9j] {
    background: var(--gray-100);
    color: var(--gray-500);
    border-left: 3px dashed var(--gray-500);
    font-style: italic;
    opacity: 0.7;
}

/* High-importance lifts to the loudest in-cell tier: filled red, bold, thick red bar. */
.pcal-chip.high-importance[b-upqg0bnx9j] {
    background: var(--red-100, #fde8e8);
    color: var(--red-700);
    border-left: 4px solid var(--red-600, #d92d20);
    font-weight: var(--font-weight-bold);
}

/* --- Calendar-source cue (secondary identity) -------------------------- */
/* A small leading dot keyed off the per-mailbox CssClass the AppHost attaches (any
   `calendar-*` source class). On a single-calendar view every chip shares one source, so this
   is uniform; it differentiates once multiple source calendars are merged into one view.
   Color comes from the page's --pcal-accent (set per-calendar by CalendarRegistry via
   CalendarView), so a NEW calendar needs no CSS rule here — the three known sources below just
   pin their exact palette color, and win by specificity for a future merged view. */
.pcal-chip[class*="calendar-"][b-upqg0bnx9j]::before {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pcal-accent, var(--gray-400));
}

.pcal-chip.calendar-topping[b-upqg0bnx9j]::before {
    background: var(--green-500);
}

.pcal-chip.calendar-production[b-upqg0bnx9j]::before {
    background: var(--blue-500);
}

.pcal-chip.calendar-concierge[b-upqg0bnx9j]::before {
    background: var(--amber-500);
}

/* --- Loading veil ------------------------------------------------------- */
.pcal-loading-veil[b-upqg0bnx9j] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pcal-loading-veil-bg);
    border-radius: var(--radius-md);
}
/* /Pages/Calendar/CreateSmsReminderPanel.razor.rz.scp.css */
/* Create Scheduled Text Panel — scoped styles. Unique class prefix (csr-) so declaration
   bodies don't collide with the css-duplicate-audit gate. */

.csr-form[b-9v5hydsc5s] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 4px;
}

.csr-recipients[b-9v5hydsc5s] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.csr-chips[b-9v5hydsc5s] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 22px;
}

.csr-hint[b-9v5hydsc5s] {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary, var(--gray-500));
}

.csr-quickset[b-9v5hydsc5s] {
    margin-top: 6px;
    flex-wrap: wrap;
}

.csr-preview[b-9v5hydsc5s] {
    font-size: 0.85em;
    padding: 8px 10px;
    background: var(--gray-50);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

/* Edit-mode chrome. Prefixed csr- like everything else in this file so the
   css-duplicate-audit gate stays happy. */
.csr-hydrating[b-9v5hydsc5s] {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  color: var(--text-secondary);
  font-size: 0.875rem;
}

.csr-edit-note[b-9v5hydsc5s] {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  margin-bottom: var(--space-3, 0.75rem);
  border-left: 3px solid var(--bs-blue);
  background: var(--surface-2, rgba(13, 110, 253, 0.06));
  border-radius: var(--radius-sm, 0.25rem);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  line-height: 1.4;
}
/* /Pages/Calendar/RecurrenceScopeDialog.razor.rz.scp.css */
.rsd-scope[b-ts3qngh8fz] {
    padding-bottom: 0.25rem;
}

/* The Phase-2 "this and following" section is informational only until it's wired. */
.rsd-disabled[b-ts3qngh8fz] {
    opacity: 0.55;
}
/* /Pages/Calendar/ScheduledEmailSchedulePanel.razor.rz.scp.css */
/* Scheduled Email Schedule Panel — scoped styles.
   Unique class prefix (ses-) so declaration bodies don't collide with the
   css-duplicate-audit gate. Keep comments simple (no star-then-slash). */

.ses-form[b-th0s4ubp3n] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 4px;
}

.ses-intro[b-th0s4ubp3n] {
    margin: 0;
    font-size: 0.85em;
    color: var(--text-secondary);
    line-height: 1.4;
}

.ses-field[b-th0s4ubp3n] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ses-hint[b-th0s4ubp3n] {
    font-size: 0.78em;
    color: var(--gray-600);
    line-height: 1.35;
}

.ses-body[b-th0s4ubp3n] {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
}

.ses-time[b-th0s4ubp3n] {
    max-width: 160px;
}

.ses-days[b-th0s4ubp3n] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ses-day[b-th0s4ubp3n] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: 6px 10px;
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85em;
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    background: var(--gray-50);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.ses-day:hover[b-th0s4ubp3n] {
    border-color: var(--blue-500);
}

.ses-day.selected[b-th0s4ubp3n] {
    background: var(--blue-500);
    border-color: var(--blue-500);
    color: white;
}

.ses-interval-input[b-th0s4ubp3n] {
    max-width: 90px;
}

.ses-interval-unit[b-th0s4ubp3n] {
    font-size: 0.88em;
    color: var(--gray-600);
}

.ses-toggle[b-th0s4ubp3n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    /* text-transform/letter-spacing/font-size/color were dead here — the old
       `.ses-field > label` (higher specificity) always overrode them; the label
       now carries `.nwc-field-caps-label`, which supplies the same caps look. */
}

.ses-toggle input[type="checkbox"][b-th0s4ubp3n] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.ses-actions[b-th0s4ubp3n] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--nwc-border-light);
}

.ses-confirm[b-th0s4ubp3n] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-right: auto;
}

.ses-confirm-text[b-th0s4ubp3n] {
    font-size: 0.82em;
    color: var(--text-secondary);
}

/* Shown next to a secondary-styled Save when the schedule is unchanged — reinforces that
   recipient edits (which save on their own) don't need "Save schedule". */
.ses-save-hint[b-th0s4ubp3n] {
    font-size: 0.78em;
    color: var(--text-secondary);
    margin-right: 4px;
    white-space: nowrap;
}
/* /Pages/Calendar/ScheduledTextsPanel.razor.rz.scp.css */
/* Scheduled Texts Panel — scoped styles. Unique class prefix (stx-) so declaration
   bodies don't collide with the css-duplicate-audit gate. */

.stx-body[b-xq7y7aav37] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 8px 4px;
}

.stx-toolbar[b-xq7y7aav37] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--nwc-border-light);
}

.stx-intro[b-xq7y7aav37] {
    margin: 0;
    font-size: 0.82em;
    color: var(--text-secondary);
    line-height: 1.4;
}

.stx-loading[b-xq7y7aav37] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    padding: var(--space-lg) 0;
}

.stx-row[b-xq7y7aav37] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.stx-row.paused[b-xq7y7aav37] {
    opacity: 0.6;
    background: var(--gray-50);
}

.stx-row-main[b-xq7y7aav37] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.stx-row-head[b-xq7y7aav37] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stx-name[b-xq7y7aav37] {
    font-weight: var(--font-weight-semibold);
}

.stx-schedule[b-xq7y7aav37] {
    font-size: 0.85em;
    color: var(--text-secondary);
}

.stx-recipients[b-xq7y7aav37] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.stx-meta[b-xq7y7aav37] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 0.78em;
    color: var(--gray-600);
}

.stx-row-actions[b-xq7y7aav37] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.stx-confirm[b-xq7y7aav37] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stx-confirm-text[b-xq7y7aav37] {
    font-size: 0.8em;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Missed-occurrence strip. This is the surface that makes a dropped send visible at all --
   the pump writes NOTHING when it misses one, so without this the failure is indistinguishable
   from a quiet schedule. Prefixed stx- for the css-duplicate-audit gate. */
.stx-missed[b-xq7y7aav37] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-1, 0.25rem);
  margin-top: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem);
  border-radius: var(--radius-sm, 0.25rem);
  background: var(--warning-subtle, rgba(255, 193, 7, 0.12));
  border-left: 3px solid var(--bs-warning);
  color: var(--text-primary);
  font-size: 0.75rem;
  line-height: 1.35;
}
/* /Pages/Chat/ChatBuddyListPanel.razor.rz.scp.css */
/* ChatBuddyListPanel — internals of the Pattern 19 dock's roster region.
   Chips (.nwc-chip) and empty states (.nwc-empty) are shared site.css utilities.
   NOTE: the .chat-buddy-list root's column-fill shape lives in ChatDockPanel.razor.css
   (::deep, stated once for both child panels) — do not re-add a copy here. */

/* Pattern 1 body: the single scroll region (min-height:0 is the classic omission). */
.chat-buddy-scroll[b-0h06p51u92] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-2xs) 0;
}

.chat-buddy-group-head[b-0h06p51u92] {
    position: sticky;
    top: 0;
    z-index: var(--z-base);
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    background: var(--surface-default);
}

.chat-buddy-group-count[b-0h06p51u92] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Pattern 4 row — hover/degraded modifiers only swap background/color. */
.chat-buddy-row[b-0h06p51u92] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-sm);
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
}

.chat-buddy-row:hover[b-0h06p51u92] {
    background: var(--surface-muted);
}

.chat-buddy-row--degraded[b-0h06p51u92] {
    cursor: default;
    color: var(--text-muted);
}

.chat-buddy-row--degraded:hover[b-0h06p51u92] {
    background: transparent;
}

/* Name column: a stack, because a row may carry a second line ("since 2:14 PM" /
   "last seen 11:02 AM"). The ellipsis moved onto .chat-buddy-name-text — a bare text node
   cannot be truncated once its parent becomes a column flex container, so the name needs
   its own element. Rows with no detail line are visually unchanged. */
.chat-buddy-name[b-0h06p51u92] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 0.875rem;
}

.chat-buddy-name-text[b-0h06p51u92],
.chat-buddy-detail[b-0h06p51u92] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-buddy-detail[b-0h06p51u92] {
    font-size: 0.72rem;
    line-height: 1.3;
    color: var(--text-muted);
}

/* Initials-only avatar (§12c — v1 has no avatar image pipeline; real avatars are their
   own rung and start by proving a stored URL returns 200 on prod). */
.chat-avatar[b-0h06p51u92] {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--surface-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.chat-buddy-error[b-0h06p51u92] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-lg);
    color: var(--text-muted);
    text-align: center;
}

/* Declared-status chip on a roster row — the shared .nwc-chip does the colour; this only
   keeps it from crowding the unread count beside it. */
.chat-buddy-status[b-0h06p51u92] {
    flex-shrink: 0;
    font-size: 0.7rem;
    white-space: nowrap;
}
/* /Pages/Chat/ChatDockPanel.razor.rz.scp.css */
/* ChatDockPanel — Pattern 19 "Corner Dock", second sighting (docs/LAYOUT-PATTERNS.md).
   Mechanism copied from CopilotPanel.razor.css (.copilot-container/.copilot-toggle/
   .copilot-panel); position is Wave 0's frozen §2e record, NOT the copilot's. The scoped
   copy is deliberate: the copilot original lives in NWCWebApp2022.Copilot — a different
   project with its own isolation scope, outside the css audit's scan — so this creates no
   duplicate group; hoisting to site.css is the 3rd-sighting move (see the Pattern 19 log).
   NON-MODAL: no overlay/backdrop element exists in this file on purpose. */

.chat-dock[b-loultt97cb] {
    position: fixed;
    right: 16px; /* true right edge — see the corner rule below for why the old 408px lane went */
    bottom: 60px;
    z-index: var(--z-chat-dock); /* 1040 — below copilot (1050) and --z-modal (1060) */
}

/* Resting corners — CORNER SNAP, not free drag.
   ⭐ THE RULE (Jeff, 2026-08-12): a corner means the TRUE corner, inset only by chrome that
   is PERMANENT and outranks us in the stacking order. Measured that day: the nav sidebar is
   250px and z-1050 and is always there ⇒ left corners must clear it. The copilot container
   measured 0x0 when CLOSED ⇒ the right edge is free in the common case, so reserving a
   380px lane for it made every right corner look broken — "it snaps to a specific spot, not
   the right-most edge". An OPEN copilot (z-1050) will now overlap a right-parked dock; that
   is accepted, because unlike the nav it is a panel the user opened and can close, and they
   can move the dock. ⛔ Do not re-add the 408px lane to "protect" the copilot — that
   supersedes the Wave-0 §2e 408px record at Jeff's explicit direction.
   "br" restates the base rule so the cycle can return to it explicitly, and every corner
   resets the axis it does not use (a stale `right` plus a new `left` stretches the element
   across the viewport).
   ⛔ Same specificity as .chat-dock (one class each), so these MUST stay after it — and they
   live inside min-width:768px so they are inert on mobile no matter the source order there.
   The four keys are a contract with chat-dock.js — see CornerCycle in the code-behind. */
@media (min-width: 768px) {
    .chat-dock--br[b-loultt97cb] {
        right: 16px; /* matches the copilot's own edge inset */
        bottom: 60px;
        left: auto;
        top: auto;
    }

    /* ⛔⛔ LEFT corners must clear the SIDEBAR, and the sidebar is `--nav-drawer-width`
       (250px) — NOT `--nav-rail-width` (56px). Measured 2026-08-12 on the live app: the
       `.sidebar` box stays **250px wide and z-index 1050 in BOTH drawer states** (collapsing
       swaps `.sidebar-full` for a `.sidebar-rail` that still rendered 235px; only `.page`
       gains `drawer-collapsed`). Anchoring to the rail token put the dock at left:68 and let
       the sidebar — which outranks --z-chat-dock 1040 — paint over 182px of a 380px card,
       i.e. HALF the dock, including every left-aligned thing in it: the grip, the title, the
       status row, every buddy name. Only the right-hand chrome stayed visible, so it read as
       "the dock came up blank" rather than "the dock is behind the nav".
       ⛔ Do NOT "fix" this by raising --z-chat-dock above the sidebar: the nav must stay on
       top and clickable, which is the same reason the copilot sits at 1050.
       ⛔ Do NOT make this conditional on `.page.drawer-collapsed` — that class does NOT mean
       the sidebar got narrower; it was measured at 250px with the class applied.
       Known cosmetic trade: SecondaryLayout renders a genuinely narrow rail, so the dock sits
       inset there rather than tight to the edge. Always-visible beats pixel-tight. */
    .chat-dock--bl[b-loultt97cb] {
        left: calc(var(--nav-drawer-width, 250px) + 12px);
        bottom: 60px;
        right: auto;
        top: auto;
    }

    .chat-dock--tr[b-loultt97cb] {
        right: 16px;
        top: 76px; /* clear of the app header */
        left: auto;
        bottom: auto;
    }

    .chat-dock--tl[b-loultt97cb] {
        left: calc(var(--nav-drawer-width, 250px) + 12px); /* see .chat-dock--bl */
        top: 76px;
        right: auto;
        bottom: auto;
    }
}

/* In flight. The transform itself is set inline by chat-dock.js — this only kills the
   pointer/selection noise that makes a drag feel broken. */
.chat-dock--dragging[b-loultt97cb] {
    user-select: none;
    cursor: grabbing;
}

.chat-dock--dragging .chat-dock-card[b-loultt97cb] {
    box-shadow: var(--shadow-xl), 0 0 0 2px var(--border-strong);
    opacity: 0.96;
}

.chat-dock--dragging .chat-dock-shell[b-loultt97cb] {
    pointer-events: none; /* don't hover/click roster rows while dragging over them */
}

/* Mobile <768px: the dock is USABLE, not hidden (reversed 2026-08-12). It used to be
   display:none with the entry point deferred to "a later wave" — but the component still
   subscribed and toasted, so a phone could show "Jeff: …" with no surface able to open the
   message. Full-width card, inset from the edges, lifted clear of the 4rem BottomNav (+ its
   safe-area padding). ⛔ Do not restore display:none without also cutting the toast. */
@media (max-width: 767.98px) {
    .chat-dock[b-loultt97cb] {
        right: 8px;
        left: 8px;
        bottom: calc(4rem + env(safe-area-inset-bottom) + 8px);
    }

    .chat-dock-card[b-loultt97cb] {
        width: auto;
        height: min(70vh, 500px);
    }
}

/* The card — fixed-size flex column (~380×500 per §2e), overflow hidden.
   ⛔ The launcher pill's rules (.chat-dock-toggle/.chat-dock-label) were DELETED with the
   pill itself — the entry point is the nav chrome now. */
.chat-dock-card[b-loultt97cb] {
    width: 380px;
    height: 500px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--surface-default);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
}

/* Minimized: the header IS the card. Height auto beats both the desktop 500px and the mobile
   min(70vh,500px) on specificity (0,2,1 vs 0,1,1), so source order is not load-bearing here.
   The body is unmounted by the component, not hidden — see the .razor comment for why. */
.chat-dock--minimized .chat-dock-card[b-loultt97cb] {
    height: auto;
}

.chat-dock-header[b-loultt97cb] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-secondary);
}

.chat-dock-title[b-loultt97cb] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text-primary);
}

.chat-dock-iconbtn[b-loultt97cb] {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.chat-dock-iconbtn:hover[b-loultt97cb] {
    background: var(--surface-muted);
}

/* Grip: one control, two affordances — drag to place, click/Enter to cycle corners.
   touch-action:none is required or the browser claims the gesture as a scroll before
   pointermove ever fires. Hidden under 768px: the mobile dock is full-width above the
   BottomNav, so there is no corner to send it to. */
.chat-dock-grip[b-loultt97cb] {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: grab;
    touch-action: none;
}

.chat-dock-grip:hover[b-loultt97cb] {
    background: var(--surface-muted);
    color: var(--text-secondary);
}

.chat-dock-grip:active[b-loultt97cb] {
    cursor: grabbing;
}

@media (max-width: 767.98px) {
    .chat-dock-grip[b-loultt97cb] {
        display: none;
    }
}

/* Own-status row. Deliberately quiet — it is a persistent control, not a call to action —
   but always on screen, because DND is the only mute chat has. */
.chat-dock-status[b-loultt97cb] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.chat-status-select[b-loultt97cb] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0 2px;
    cursor: pointer;
}

.chat-status-note[b-loultt97cb] {
    margin-left: auto;
    font-style: italic;
}

/* Dot colours reuse the shipped --state-*-fg semantic tokens (tokens.css:135-140), so status
   reads the same as every other status surface in the app instead of inventing a third colour
   language. ⛔ There is no bare --success/--danger token in this repo — those names look
   obvious and silently resolve to nothing. */
.chat-status-dot[b-loultt97cb] {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.chat-status-dot--available[b-loultt97cb] {
    background: var(--state-success-fg);
}

.chat-status-dot--busy[b-loultt97cb] {
    background: var(--state-warning-fg);
}

.chat-status-dot--donotdisturb[b-loultt97cb] {
    background: var(--state-danger-fg);
}

/* Degraded identity state (§8.1b item 3) — visible, explanatory, never blank. */
.chat-dock-degraded[b-loultt97cb] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-lg);
    text-align: center;
    color: var(--text-muted);
}

.chat-dock-degraded i[b-loultt97cb] {
    font-size: 1.6rem;
}

/* Roster/thread split — Pattern 17 mechanism (container-keyed, --cq school): the
   container-type wrapper sits INSIDE the card and the @container rules target its
   descendants. Default (and the non-supporting-browser fallback) = one region at a
   time keyed on .thread-open — correct for the fixed 380px dock. A ≥640px container
   (a future resizable dock) lays roster and thread side by side. */
.chat-dock-shell[b-loultt97cb] {
    flex: 1;
    min-height: 0;
    display: flex;
    container-type: inline-size;
}

.chat-dock-split[b-loultt97cb] {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
}

/* Column-fill shape (Pattern 1 skeleton) stated ONCE for the split cells AND the child
   panels' roots (::deep) — the children deliberately carry no copy of this in their own
   scoped css, so the audit sees one occurrence instead of three pasted ones. If a chat
   child panel is ever hosted outside the dock, its host must supply this shape. */
.chat-split-roster[b-loultt97cb],
.chat-split-thread[b-loultt97cb],
.chat-split-roster[b-loultt97cb]  .chat-buddy-list,
.chat-split-thread[b-loultt97cb]  .chat-thread {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-split-roster[b-loultt97cb],
.chat-split-thread[b-loultt97cb] {
    min-width: 0;
}

.chat-dock-split.thread-open .chat-split-roster[b-loultt97cb] {
    display: none;
}

.chat-dock-split:not(.thread-open) .chat-split-thread[b-loultt97cb] {
    display: none;
}

@supports (container-type: inline-size) {
    @container (min-width: 640px) {
        .chat-dock-split.thread-open .chat-split-roster[b-loultt97cb] {
            display: flex;
        }

        .chat-dock-split:not(.thread-open) .chat-split-thread[b-loultt97cb] {
            display: flex;
        }

        .chat-split-roster[b-loultt97cb] {
            flex: 0 0 45%;
            border-right: 1px solid var(--border-subtle);
        }
    }
}
/* /Pages/Chat/ChatThreadPanel.razor.rz.scp.css */
/* ChatThreadPanel — internals of the Pattern 19 dock's thread region.
   NOTE: the .chat-thread root's column-fill shape lives in ChatDockPanel.razor.css
   (::deep, stated once for both child panels) — do not re-add a copy here. */

/* Pattern 1 body + column-reverse: newest-first DOM renders newest at the visual bottom
   and the browser keeps scroll pinned there — chat autoscroll with zero JS interop.
   min-height:0 is the classic omission (§3). */
.chat-thread-scroll[b-mfj5x49l3h] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
}

.chat-thread-more[b-mfj5x49l3h] {
    align-self: center;
    margin-bottom: var(--space-2xs);
    padding: 2px 10px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: 0.78rem;
    cursor: pointer;
}

/* Message bubble — Pattern 4 conventions: the --mine modifier only swaps
   alignment/background/color. */
.chat-msg[b-mfj5x49l3h] {
    max-width: 85%;
    align-self: flex-start;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: 10px;
    background: var(--surface-muted);
}

.chat-msg--mine[b-mfj5x49l3h] {
    align-self: flex-end;
    background: var(--state-info-bg);
    color: var(--state-info-fg);
}

.chat-msg-meta[b-mfj5x49l3h] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.chat-msg--mine .chat-msg-meta[b-mfj5x49l3h] {
    color: inherit;
    opacity: 0.75;
}

.chat-msg-sender[b-mfj5x49l3h] {
    font-weight: 600;
}

.chat-msg-body[b-mfj5x49l3h] {
    font-size: 0.875rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-msg-body--deleted[b-mfj5x49l3h] {
    font-style: italic;
    color: var(--text-muted);
}

.chat-thread-error[b-mfj5x49l3h] {
    flex-shrink: 0;
    padding: var(--space-3xs) var(--space-sm);
    background: var(--state-danger-bg);
    color: var(--state-danger-fg);
    font-size: 0.78rem;
}

/* Composer — one textarea + send. Deliberately NOT Pattern 16 (no label grid). */
.chat-composer[b-mfj5x49l3h] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2xs);
    padding: var(--space-xs);
    border-top: 1px solid var(--border-subtle);
}

.chat-composer-input[b-mfj5x49l3h] {
    flex: 1;
    min-width: 0;
    resize: none;
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    background: var(--surface-default);
    color: var(--text-primary);
    font-size: 0.875rem;
}

.chat-composer-input:focus[b-mfj5x49l3h] {
    outline: none;
    border-color: var(--border-strong);
    box-shadow: var(--shadow-focus-accent);
}

.chat-composer-send[b-mfj5x49l3h] {
    flex-shrink: 0;
    padding: 6px 10px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: var(--surface-default);
    color: var(--text-secondary);
    cursor: pointer;
}

.chat-composer-send:hover:not(:disabled)[b-mfj5x49l3h] {
    background: var(--surface-muted);
}

.chat-composer-send:disabled[b-mfj5x49l3h] {
    opacity: 0.5;
    cursor: default;
}
/* /Pages/Chat/ChatUnreadBadge.razor.rz.scp.css */
/* ChatUnreadBadge — the pill itself is the shared .nwc-chip (site.css); this scoped
   rule only compacts it to sit inside the launcher pill. */

.chat-unread-badge[b-4ncpvjomqq] {
    font-size: 0.7rem;
    line-height: 1.2;
}
/* /Pages/Compliance/BondHolderFormPanel.razor.rz.scp.css */
.bond-holder-form[b-tl3lfu0xwy] {
    padding: 1.25rem;
}

.form-label.required[b-tl3lfu0xwy]::after {
    content: " *";
    color: var(--red-500);
}

/* Business type chip toggles */

.chip[b-tl3lfu0xwy] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--gray-300);
    border-radius: 2rem;
    background: #fff;
    color: var(--gray-700);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s;
}

.chip:hover[b-tl3lfu0xwy] {
    border-color: var(--blue-500);
    color: var(--blue-500);
}

.chip.selected[b-tl3lfu0xwy] {
    background: var(--blue-500);
    border-color: var(--blue-500);
    color: #fff;
}

/* Collection rows (phones, emails) */
.collection-row[b-tl3lfu0xwy] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

/* Address blocks */
.address-block[b-tl3lfu0xwy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-md);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    background: #fafafa;
}

/* Sticky form footer */
.form-actions[b-tl3lfu0xwy] {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--gray-300);
    margin-top: var(--space-lg);
}
/* /Pages/Compliance/CcofClientProfileFromIntake.razor.rz.scp.css */
.ccof-cp-from-intake-page[b-dyzcfwfmup] {
    padding: var(--space-lg);
    max-width: 1200px;
}
/* /Pages/Compliance/CcofMaterialsListFromIntake.razor.rz.scp.css */
.ccof-from-intake-page[b-fmiwdka8x7] {
    padding: var(--space-lg);
    max-width: 1100px;
}
/* /Pages/Compliance/CcofOperationsCertFromIntake.razor.rz.scp.css */
.ccof-from-intake-page[b-2b9t4b66kc] {
    padding: var(--space-lg);
    max-width: 900px;
}
/* /Pages/Compliance/ColaBackfill.razor.rz.scp.css */
/* ColaBackfill.razor scoped styles */

.summary-cards[b-cibyj8fp04] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.summary-card[b-cibyj8fp04] {
    background: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

    .summary-card.warning[b-cibyj8fp04] {
        border-color: var(--amber-500);
        background: var(--state-warning-bg);
    }

    .summary-card.success[b-cibyj8fp04] {
        border-color: var(--green-500);
        background: var(--state-success-bg);
    }

.summary-number[b-cibyj8fp04] {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.summary-label[b-cibyj8fp04] {
    font-size: var(--font-size-md);
    color: var(--nwc-text-muted);
    margin-top: var(--space-2xs);
}

/* Controls */
.backfill-controls[b-cibyj8fp04] {
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) 1.25rem;
    margin-bottom: var(--space-xl);
}

    .backfill-controls h4[b-cibyj8fp04] {
        margin: 0 0 var(--space-md);
        font-size: var(--font-size-lg);
    }

.options-row[b-cibyj8fp04] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-lg);
    align-items: center;
}

    .delay-control label[b-cibyj8fp04] {
        margin: 0;
        font-size: 0.875rem;
    }


/* Progress */
.progress-section[b-cibyj8fp04] {
    margin-bottom: var(--space-xl);
}

.progress-detail[b-cibyj8fp04] {
    font-size: 0.875rem;
    color: var(--nwc-text-muted);
    margin-top: var(--space-2xs);
}

/* Results */
.results-section[b-cibyj8fp04] {
    margin-bottom: var(--space-xl);
}

.results-summary[b-cibyj8fp04] {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.result-item[b-cibyj8fp04] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

    .result-item.error[b-cibyj8fp04] {
        border-color: var(--red-500);
        background: var(--state-danger-bg);
    }

    .result-item.warning[b-cibyj8fp04] {
        border-color: var(--amber-500);
        background: var(--state-warning-bg);
    }

.result-header[b-cibyj8fp04] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.ttb-id[b-cibyj8fp04] {
    font-family: monospace;
    font-size: var(--font-size-md);
    color: var(--nwc-text-muted);
}

.discrepancy-table[b-cibyj8fp04] {
    width: 100%;
    font-size: 0.875rem;
    margin-top: var(--space-sm);
    border-collapse: collapse;
}

    .discrepancy-table th[b-cibyj8fp04] {
        background: var(--nwc-bg-muted);
        padding: 0.35rem var(--space-sm);
        text-align: left;
        border-bottom: 1px solid var(--nwc-border);
    }

    .discrepancy-table td[b-cibyj8fp04] {
        padding: 0.35rem var(--space-sm);
        border-bottom: 1px solid var(--nwc-border-light);
    }

    .discrepancy-table tr.warning td[b-cibyj8fp04] {
        background: var(--state-warning-bg);
    }

    .discrepancy-table tr.error td[b-cibyj8fp04] {
        background: var(--state-danger-bg);
    }

/* Status Dots */
.status-dot[b-cibyj8fp04] {
    font-size: var(--font-size-sm);
}

    .status-dot.green[b-cibyj8fp04] {
        color: var(--green-500);
    }

    .status-dot.red[b-cibyj8fp04] {
        color: var(--red-500);
    }

/* Filter tabs */
/* .list-header base hoisted to global .nwc-header-row (site.css) */

.filter-tabs[b-cibyj8fp04] {
    display: flex;
    gap: var(--space-2xs);
}

/* Cola list table */
.cola-list-section .table[b-cibyj8fp04] {
    font-size: 0.875rem;
}

    .cola-list-section .table th[b-cibyj8fp04] {
        position: sticky;
        top: 0;
        background: var(--gray-50);
        z-index: var(--z-base);
    }

/* Test result panel */
.test-result-panel[b-cibyj8fp04] {
    background: var(--state-info-bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
}

.test-header[b-cibyj8fp04] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

    .test-header h5[b-cibyj8fp04] {
        margin: 0;
    }

.test-fields .field-row[b-cibyj8fp04] {
    display: flex;
    gap: var(--space-sm);
    padding: 0.2rem 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.875rem;
}

    .test-fields .field-row span:first-child[b-cibyj8fp04] {
        min-width: 120px;
        font-weight: var(--font-weight-semibold);
        color: var(--text-secondary);
    }

/* Loading */
.loading-container[b-cibyj8fp04] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    justify-content: center;
}
/* /Pages/Compliance/EntityDetail.razor.rz.scp.css */
/* Entity Detail page styles (shared layout in app.css via .compliance-page) */

/* Hero card */
.entity-hero[b-v9ncnpo4bf] {
    background: #fff;
    border: 1px solid var(--nwc-border-light, var(--gray-300));
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: var(--space-lg);
}

.entity-hero h2[b-v9ncnpo4bf] {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.host-link[b-v9ncnpo4bf] {
    text-align: right;
}

.host-link a[b-v9ncnpo4bf] {
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.host-link a:hover[b-v9ncnpo4bf] {
    text-decoration: underline;
}

/* Identifier grid */
.identifier-grid[b-v9ncnpo4bf] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-md);
}

.identifier-item small[b-v9ncnpo4bf] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.identifier-item code[b-v9ncnpo4bf] {
    font-size: 0.88rem;
}

/* Collapsible sections */
.entity-section[b-v9ncnpo4bf] {
    background: #fff;
    border: 1px solid var(--nwc-border-light, var(--gray-300));
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
    overflow: hidden;
}

.entity-section-header[b-v9ncnpo4bf] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.entity-section-header:hover[b-v9ncnpo4bf] {
    background: var(--gray-50);
}

.entity-section-header h5[b-v9ncnpo4bf] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
}

.entity-section-body[b-v9ncnpo4bf] {
    padding: 0 var(--space-lg) var(--space-lg);
    border-top: 1px solid var(--gray-200);
}

/* Tables inside sections */
.entity-section .table[b-v9ncnpo4bf] {
    font-size: var(--font-size-md);
}

.entity-section .table th[b-v9ncnpo4bf] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--gray-600);
    white-space: nowrap;
}

.entity-section .table td[b-v9ncnpo4bf] {
    vertical-align: middle;
    white-space: nowrap;
}

/* Contact cards */
.contact-card[b-v9ncnpo4bf] {
    padding: var(--space-sm) var(--space-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

/* Info list (addresses, phones, emails) */
.info-list[b-v9ncnpo4bf] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.info-item[b-v9ncnpo4bf] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.88rem;
}

.info-type[b-v9ncnpo4bf] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--gray-600);
    min-width: 70px;
    font-weight: var(--font-weight-semibold);
}

/* Days-left urgency (inline, not row) */
.days-warning[b-v9ncnpo4bf] {
    color: #ed6c02;
    font-weight: var(--font-weight-semibold);
}

.days-critical[b-v9ncnpo4bf] {
    color: #d32f2f;
    font-weight: var(--font-weight-bold);
}

.days-expired[b-v9ncnpo4bf] {
    color: #d32f2f;
    font-weight: var(--font-weight-bold);
}

/* Filing urgency (inline) */
.urgency-low[b-v9ncnpo4bf] {
    color: #ed6c02;
}

.urgency-medium[b-v9ncnpo4bf] {
    color: #e65100;
    font-weight: var(--font-weight-semibold);
}

.urgency-high[b-v9ncnpo4bf] {
    color: #d32f2f;
    font-weight: var(--font-weight-bold);
}

.urgency-overdue[b-v9ncnpo4bf] {
    color: #d32f2f;
    font-weight: var(--font-weight-bold);
}

/* Empty state */
.empty-state[b-v9ncnpo4bf] {
    color: var(--gray-600);
}

/* Responsive */
@media (max-width: 768px) {
    .identifier-grid[b-v9ncnpo4bf] {
        grid-template-columns: repeat(2, 1fr);
    }

    .entity-hero h2[b-v9ncnpo4bf] {
        font-size: 1.15rem;
    }

    .host-link[b-v9ncnpo4bf] {
        text-align: left;
    }
}
/* /Pages/Compliance/FbnFilingDetail.razor.rz.scp.css */
.fbn-detail-page[b-khjxkxvy0b] {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
}

.fbn-loading[b-khjxkxvy0b] {
    display: flex;
    justify-content: center;
    padding: 4rem 0;
}

.fbn-not-found[b-khjxkxvy0b] {
    text-align: center;
    padding: 4rem 0;
    color: var(--gray-600);
}

.fbn-not-found i[b-khjxkxvy0b] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: var(--space-lg);
}

.fbn-detail-header[b-khjxkxvy0b] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid #333;
}

.fbn-detail-title h3[b-khjxkxvy0b] {
    margin: 0 0 var(--space-2xs) 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-semibold);
}

.fbn-filing-number[b-khjxkxvy0b] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
}

.fbn-detail-actions[b-khjxkxvy0b] {
    display: flex;
    gap: var(--space-sm);
}

.fbn-detail-grid[b-khjxkxvy0b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg) var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

.fbn-field[b-khjxkxvy0b] {
    display: flex;
    flex-direction: column;
}

.fbn-field label[b-khjxkxvy0b] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--gray-600);
    margin-bottom: 0.15rem;
}

.fbn-field span[b-khjxkxvy0b],
.fbn-field a[b-khjxkxvy0b] {
    font-size: 0.95rem;
}

.fbn-status-badge[b-khjxkxvy0b] {
    display: inline-block;
    padding: 0.15rem var(--space-sm);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    width: fit-content;
}

.fbn-status-badge.status-filed[b-khjxkxvy0b] {
    background: #d4edda;
    color: var(--green-700);
}

.fbn-status-badge.status-expired[b-khjxkxvy0b] {
    background: var(--state-danger-bg);
    color: #721c24;
}

.fbn-status-badge.status-abandoned[b-khjxkxvy0b] {
    background: var(--yellow-100);
    color: var(--yellow-700);
}

.fbn-detail-section[b-khjxkxvy0b] {
    margin-bottom: var(--space-xl);
}

.fbn-detail-section h5[b-khjxkxvy0b] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--gray-700);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-2xs);
    border-bottom: 1px solid var(--gray-300);
}

.fbn-name-list li[b-khjxkxvy0b] {
    padding: 0.35rem 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
}

.fbn-name-list li:last-child[b-khjxkxvy0b] {
    border-bottom: none;
}

.fbn-source-link[b-khjxkxvy0b] {
    word-break: break-all;
    font-size: var(--font-size-base);
}

.fbn-detail-footer[b-khjxkxvy0b] {
    margin-top: 2.5rem;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--gray-300);
    font-size: 0.8rem;
    color: var(--gray-600);
}

.fbn-detail-footer p[b-khjxkxvy0b] {
    margin: 0.15rem 0;
}

.fbn-scrape-date[b-khjxkxvy0b] {
    font-style: italic;
}

/* ── Print styles ── */
@media print {
    [b-khjxkxvy0b] .sidebar,
    [b-khjxkxvy0b] .top-bar,
    [b-khjxkxvy0b] .nav-menu,
    [b-khjxkxvy0b] .navbar,
    [b-khjxkxvy0b] nav,
    .no-print[b-khjxkxvy0b] {
        display: none !important;
    }

    .fbn-detail-page[b-khjxkxvy0b] {
        max-width: 100%;
        padding: 0;
        margin: 0;
        font-size: 11pt;
    }

    .fbn-detail-header[b-khjxkxvy0b] {
        border-bottom-color: #000;
    }

    .fbn-status-badge[b-khjxkxvy0b] {
        border: 1px solid #333;
        background: none !important;
        color: #000 !important;
    }

    .fbn-detail-section h5[b-khjxkxvy0b] {
        border-bottom-color: #333;
        color: #000;
    }

    .fbn-detail-footer[b-khjxkxvy0b] {
        border-top-color: #333;
        color: #333;
    }

    a[b-khjxkxvy0b] {
        color: #000 !important;
        text-decoration: none !important;
    }

    a[href][b-khjxkxvy0b]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }

    .fbn-source-link[href][b-khjxkxvy0b]::after {
        content: none;
    }
}
/* /Pages/Compliance/LabelProofFromIntake.razor.rz.scp.css */
.lpfi-page[b-p68psf6wft] {
    padding: var(--space-lg);
}

.lpfi-summary[b-p68psf6wft] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.lpfi-section[b-p68psf6wft] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    background: #fff;
}

.lpfi-section-title[b-p68psf6wft] {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--space-sm);
    color: var(--gray-700);
    font-size: var(--font-size-base);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* Grid mechanics now come from global .nwc-kv (site.css) — see
   LAYOUT-PATTERNS.md Pattern 2. Only this instance's deltas remain local. */
.lpfi-dl[b-p68psf6wft] {
    grid-template-columns: 100px 1fr;
    font-size: var(--font-size-base);
}

.lpfi-dl dt[b-p68psf6wft] {
    color: var(--gray-600);
}

.lpfi-actions[b-p68psf6wft] {
    display: flex;
    gap: var(--space-sm);
}
/* /Pages/Compliance/Manager/ComplianceManager.razor.rz.scp.css */
/* Compliance Manager skin. Intentionally thin — the heavy lifting comes from the
   global ManagerShell (.ms-*), ribbon (.nwc-ribbon-*), pane-title (.nwc-pane-title)
   and grid (.cm-grid-* / .cm-empty) families already in site.css. The KPI strip,
   urgency pills, inspector scaffold, rail signal classes, and CCOF card were hoisted
   to site.css (comp-* / cm-kpi* prefixes) because they are rendered by child
   components that carry no .razor.css of their own. Only rules targeting elements
   rendered directly by ComplianceManager.razor remain here so the scoped b-*
   attribute can attach. */

/* ── Original scope-chip ─────────────────────────────────────────────────────── */

.ms-filterbar[b-mn2qil5mva] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Chip in the filterbar showing the active entity scope (rail selection). */
.comp-scope-chip[b-mn2qil5mva] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 6px 2px 10px;
    font-size: 0.74rem;
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 999px;
    white-space: nowrap;
}

.comp-scope-clear[b-mn2qil5mva] {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    padding: 1px;
    border-radius: 50%;
    line-height: 1;
}

.comp-scope-clear:hover[b-mn2qil5mva] {
    background: var(--gray-300);
    color: var(--gray-900);
}
/* /Pages/Compliance/Manager/Components/ContractExtractPanel.razor.rz.scp.css */
.cep-body[b-vjfpo2jtiw] {
    padding: var(--space-md);
}

.cep-status[b-vjfpo2jtiw] {
    display: flex;
    align-items: center;
    color: var(--nwc-text-muted);
    font-size: var(--font-size-sm);
}
/* /Pages/Compliance/Manager/Components/ContractInspector.razor.rz.scp.css */
.ci-thumbnail-wrap[b-xg1q6seb1b] {
    max-width: 220px;
    border: 1px solid var(--nwc-border-light);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.ci-thumbnail[b-xg1q6seb1b] {
    display: block;
    width: 100%;
    height: auto;
}

.ci-thumbnail:hover[b-xg1q6seb1b] {
    opacity: 0.85;
}
/* /Pages/Compliance/Manager/Components/EntityRail.razor.rz.scp.css */
/* Self-contained entity rail. Scoped to this component (rail markup lives here, so
   scoped CSS applies cleanly). Mirrors the LabelManager client-rail look. */

.er-search[b-bsszgdkloh] {
    position: relative;
    padding: 8px 10px;
    border-bottom: 1px solid var(--gray-200);
}

.er-search i[b-bsszgdkloh] {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-400);
    font-size: 0.8rem;
    pointer-events: none;
}

.er-search input[b-bsszgdkloh] {
    width: 100%;
    padding: 4px 8px 4px 26px;
    font-size: 0.8rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
}

.er-list[b-bsszgdkloh] {
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    padding: 4px 0;
}

.er-row[b-bsszgdkloh] {
    appearance: none;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-left: 2px solid transparent;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--gray-800);
}

.er-row:hover[b-bsszgdkloh] {
    background: var(--gray-100);
}

.er-row.selected[b-bsszgdkloh] {
    background: var(--gray-100);
    border-left-color: var(--er-selected-border);
    font-weight: var(--font-weight-semibold);
}

.er-label[b-bsszgdkloh] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.er-code[b-bsszgdkloh] {
    font-size: 0.66rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 0 5px;
}

.er-count[b-bsszgdkloh] {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--gray-500);
    min-width: 1.5em;
    text-align: right;
}

.er-divider[b-bsszgdkloh] {
    height: 1px;
    background: var(--gray-200);
    margin: 4px 0;
}

/* ── EntityRail signal dot + secondary count ─────────────────────────────────
   Hoisted from ComplianceManager.razor.css — per-entity health visualization
   layered onto the existing rail rows. Scoped here because EntityRail.razor
   owns the DOM that renders these elements. */
.er-signal-dot[b-bsszgdkloh] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: 6px;
    flex-shrink: 0;
    background: var(--gray-300);
}

.er-signal-dot.is-ok[b-bsszgdkloh] { background: var(--er-signal-ok); }
.er-signal-dot.is-warning[b-bsszgdkloh] { background: var(--er-signal-warning); }
.er-signal-dot.is-overdue[b-bsszgdkloh] { background: var(--er-signal-overdue); box-shadow: var(--er-signal-overdue-shadow); }
.er-signal-dot.is-unknown[b-bsszgdkloh] { background: var(--gray-300); }

.er-counts[b-bsszgdkloh] {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.er-count.er-count-warn[b-bsszgdkloh] {
    background: var(--er-warn-badge-bg);
    color: var(--er-warn-badge-fg);
    border: 1px solid var(--er-signal-warning);
    border-radius: 999px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold, 600);
}
/* /Pages/Compliance/Manager/Components/Organic/CcofLandSchedulePanel.razor.rz.scp.css */
/* Certified land schedule — the auditor-facing parcel table.

   ⛔ NO @page RULE IN HERE. This file is scoped by CSS isolation, and @page has no selector for
   the scope attribute to attach to, so a @page written here leaks into EVERY print surface in the
   app. The print layout lives in CcofLandSchedulePrintView.razor's own inline <style>, which is
   not scoped and belongs to a standalone route. Same reason the landscape rule moved out of
   BottlingSchedule.razor.css. */

.ccof-land-scroll[b-jwo9log2ql] {
    overflow-x: auto;
}

.ccof-land-table[b-jwo9log2ql] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ccof-land-table th[b-jwo9log2ql] {
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-weight: var(--font-weight-semibold);
    background: var(--surface-subtle);
    border-bottom: 2px solid var(--nwc-border-light);
    white-space: nowrap;
}

.ccof-land-th-sub[b-jwo9log2ql] {
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    text-transform: none;
}

.ccof-land-table td[b-jwo9log2ql] {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--nwc-border-light);
    vertical-align: top;
}

/* Acreage is the column that gets reconciled against paper — tabular figures so the decimal
   points line up down the column and a transposed digit is visible. */
.ccof-land-acres[b-jwo9log2ql] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Crop rows sit inside the parcel row: several crops to one parcel, and the parcel is the unit
   the footer totals. */
.ccof-land-crops[b-jwo9log2ql] {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ccof-land-crops li[b-jwo9log2ql] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.ccof-land-crop-acres[b-jwo9log2ql] {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────────────────────────────
   The compliant total and the planted total are deliberately styled apart. They are two
   different measurements of the same land (558.83 vs 524.59 on YMV's 2025 addendum) and are
   not supposed to agree; making them look like a matched pair is what invites someone to
   "reconcile" them. */

.ccof-land-total td[b-jwo9log2ql] {
    border-top: 2px solid var(--nwc-border-light);
    border-bottom: none;
    padding-top: 0.6rem;
    font-weight: var(--font-weight-semibold);
    font-size: 1rem;
}

.ccof-land-planted td[b-jwo9log2ql] {
    border-bottom: none;
    padding-top: 0.15rem;
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

.ccof-land-qualifier[b-jwo9log2ql] {
    font-weight: var(--font-weight-normal);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* ⛔ --dailyflow-organic-fg is #f44336 RED and must never be used for an all-clear. */
.ccof-land-agrees[b-jwo9log2ql] {
    color: var(--state-success-fg);
}

.ccof-land-warning[b-jwo9log2ql] {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    padding: var(--space-md);
    border: 1px solid var(--state-warning-fg);
    border-radius: var(--radius-md);
    background: var(--state-warning-bg);
    color: var(--state-warning-fg);
}
/* /Pages/Compliance/Manager/Components/RegistryPane.razor.rz.scp.css */
/* FBN Cross-Ref segment only. Grid/empty/table shells come from the shared .cm-* family in
   site.css — these rules add just the section scaffolding that family has no equivalent for.
   Keep this file small: the pre-push css-duplicate-audit ratchets on cross-file duplication. */

.fbn-legend[b-ezyiwj8fa2] {
    margin: 0.5rem 0.75rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.fbn-section-title[b-ezyiwj8fa2] {
    margin: 0.25rem 0.75rem 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.fbn-section-title:not(:first-of-type)[b-ezyiwj8fa2] {
    margin-top: 1.5rem;
}

.fbn-section-hint[b-ezyiwj8fa2] {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.fbn-section-empty[b-ezyiwj8fa2] {
    margin: 0 0.75rem 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* One permit per line inside the Permits cell — an entity can hold several. */
.fbn-permit-chip + .fbn-permit-chip[b-ezyiwj8fa2] {
    margin-top: 0.15rem;
}

/* How the filing was tied to the DBA. Deliberately quiet next to the filing number, but always
   present: "by name" is a guess and reads as fact when it is unlabelled. */
.fbn-match-source[b-ezyiwj8fa2] {
    margin-left: 0.35rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
}
/* /Pages/Compliance/Manager/Components/TtbRegistrySegment.razor.rz.scp.css */
/* Toolbar */
.ttb-seg-toolbar[b-zdm8b7us8v] {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--nwc-border-light);
}

/* Filter Bar */
.ttb-filter-bar[b-zdm8b7us8v] {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--nwc-border-light);
}

/* Results — THE SCROLLER for this segment.
   The parent .ms-pane-grid is a bounded-height flex column with overflow-y:hidden,
   so whichever child is meant to absorb the overflow has to say so. Without this
   rule .ttb-results sized to its content (1367px inside a 526px pane, MEASURED on
   prod 2026-09-02 at 1536x695 CSS / DPR 1.25, Chrome) and 1,141px of permits were
   rendered but unreachable — as was .ttb-pagination below it, so a 38-result search
   could not be scrolled OR paged.

   flex-basis 0 + overflow-y:auto is the same pattern .cm-grid-wrap already uses for
   the DBAs segment in this pane; TTB Registry was the only one of the four missing
   it. No min-height:0 is needed here: overflow-y:auto makes a flex item's automatic
   minimum size resolve to 0. */
.ttb-results[b-zdm8b7us8v] {
    flex: 1 1 0%;
    overflow-y: auto;
}

/* Group — border-radius/overflow/header flex/align/cursor come from global
   .nwc-group* (site.css, see LAYOUT-PATTERNS.md Pattern 10). Only this
   instance's deltas (colored header, shadow-not-border) are local. */
.ttb-group[b-zdm8b7us8v] {
    margin: var(--space-sm) 0;
    background: var(--surface-default);
    box-shadow: var(--shadow-md);
}

.ttb-group-header[b-zdm8b7us8v] {
    gap: var(--space-md);
    padding: 0.6rem var(--space-lg);
    background: var(--accent-preview-header);
    color: var(--text-on-brand);
    user-select: none;
    transition: filter 0.2s;
}

.ttb-group-header:hover[b-zdm8b7us8v] {
    filter: brightness(1.1);
}

.ttb-group-header.expanded[b-zdm8b7us8v] {
    border-bottom: 1px solid rgba(255,255,255,0.2);
}

.ttb-group-header .expand-icon[b-zdm8b7us8v] {
    font-size: var(--font-size-sm);
    width: 1rem;
    text-align: center;
    transition: transform 0.2s;
}

.ttb-group-name[b-zdm8b7us8v] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    flex: 1;
}

.ttb-group-count[b-zdm8b7us8v] {
    font-size: 0.8rem;
    opacity: 0.85;
    background: rgba(255,255,255,0.2);
    padding: 0.15rem var(--space-sm);
    border-radius: var(--radius-sm);
}

.ttb-group-body[b-zdm8b7us8v] {
    padding: var(--space-sm);
}

.ttb-address-highlight .ttb-group-header[b-zdm8b7us8v] {
    background: linear-gradient(135deg, var(--brand-teal-500) 0%, var(--brand-teal-300) 100%);
}

/* Permit Row */
.ttb-permit-row[b-zdm8b7us8v] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: 0.4rem var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--font-size-md);
}

.ttb-permit-row:last-child[b-zdm8b7us8v] {
    border-bottom: none;
}

.ttb-permit-number[b-zdm8b7us8v] {
    font-weight: var(--font-weight-semibold);
    color: var(--nwc-text);
    min-width: 140px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.ttb-owner[b-zdm8b7us8v] {
    flex: 1;
    color: var(--nwc-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ttb-dba[b-zdm8b7us8v] {
    color: var(--nwc-text-muted);
    font-style: italic;
    font-size: 0.8rem;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ttb-industry[b-zdm8b7us8v] {
    color: var(--gray-600);
    font-size: 0.8rem;
    min-width: 100px;
}

.ttb-location[b-zdm8b7us8v] {
    color: var(--gray-600);
    font-size: 0.8rem;
    min-width: 120px;
    text-align: right;
}

.ttb-new-badge[b-zdm8b7us8v] {
    display: inline-block;
    /* dark-mode-stable: solid green + white text legible in both themes (intentional, not tokenized) */
    background: #198754;
    color: white;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-xs);
    letter-spacing: 0.5px;
    vertical-align: middle;
}

.ttb-flat-list[b-zdm8b7us8v] {
    background: var(--surface-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    margin: var(--space-sm) 0;
}

.ttb-pagination[b-zdm8b7us8v] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
}

.no-results[b-zdm8b7us8v] {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    color: var(--nwc-text-muted);
}

/* FBN status badges (shared by the business-name search panel) */
.ttb-fbn-status[b-zdm8b7us8v] {
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    padding: 0.1rem 0.4rem;
    border-radius: var(--radius-xs);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ttb-fbn-status-filed[b-zdm8b7us8v] {
    background: var(--green-100);
    color: var(--state-success-fg);
}

.ttb-fbn-status-expired[b-zdm8b7us8v] {
    background: var(--state-danger-bg);
    color: var(--state-danger-fg);
}

.ttb-fbn-status-abandoned[b-zdm8b7us8v] {
    background: var(--state-neutral-bg);
    color: var(--state-neutral-fg);
}

.ttb-fbn-status-unknown[b-zdm8b7us8v] {
    background: var(--state-neutral-bg);
    color: var(--gray-600);
}

.ttb-fbn-expiring-expired[b-zdm8b7us8v] {
    color: var(--red-500);
    font-weight: var(--font-weight-semibold);
}

.ttb-fbn-expiring-soon[b-zdm8b7us8v] {
    color: var(--amber-600);
    font-weight: var(--font-weight-medium);
}

.ttb-fbn-empty[b-zdm8b7us8v] {
    color: var(--nwc-text-muted);
    font-style: italic;
    padding: var(--space-2xs) 0;
}

/* FBN Business Name Search Panel */
.ttb-fbn-search-panel[b-zdm8b7us8v] {
    margin-top: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--accent-preview-bg);
    border: 1px solid var(--accent-preview-border);
    border-radius: var(--radius-md);
}

.ttb-fbn-search-header[b-zdm8b7us8v] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    color: var(--accent-preview);
}

.ttb-fbn-search-input[b-zdm8b7us8v] {
    display: flex;
    align-items: center;
    max-width: 500px;
}

.ttb-fbn-search-results[b-zdm8b7us8v] {
    margin-top: var(--space-sm);
    max-height: 300px;
    overflow-y: auto;
}

.ttb-fbn-search-count[b-zdm8b7us8v] {
    font-size: 0.78rem;
    margin-bottom: var(--space-2xs);
}

.ttb-fbn-search-row[b-zdm8b7us8v] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0.3rem 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 0.82rem;
}

.ttb-fbn-search-row:last-child[b-zdm8b7us8v] {
    border-bottom: none;
}

.ttb-fbn-search-name[b-zdm8b7us8v] {
    font-weight: var(--font-weight-semibold);
    color: var(--nwc-text);
    min-width: 200px;
    flex: 1;
}

.ttb-fbn-search-filing[b-zdm8b7us8v] {
    font-weight: var(--font-weight-medium);
    color: var(--nwc-text-muted);
    min-width: 110px;
}

.ttb-fbn-search-registrant[b-zdm8b7us8v] {
    color: var(--nwc-text-muted);
    font-style: italic;
    font-size: 0.78rem;
    min-width: 150px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .ttb-permit-row[b-zdm8b7us8v] {
        flex-wrap: wrap;
        gap: var(--space-2xs);
    }

    .ttb-permit-number[b-zdm8b7us8v] {
        min-width: unset;
        width: 100%;
    }

    .ttb-owner[b-zdm8b7us8v],
    .ttb-dba[b-zdm8b7us8v] {
        width: 100%;
    }

    .ttb-industry[b-zdm8b7us8v],
    .ttb-location[b-zdm8b7us8v] {
        min-width: unset;
        font-size: var(--font-size-sm);
    }

    .ttb-group-header[b-zdm8b7us8v] {
        flex-wrap: wrap;
    }

    .ttb-group-name[b-zdm8b7us8v] {
        font-size: var(--font-size-md);
    }
}
/* /Pages/Compliance/PermitFormPanel.razor.rz.scp.css */
.permit-form-panel[b-fzok5oq4h3] {
    padding: var(--space-lg);
}

.form-header[b-fzok5oq4h3] {
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--gray-300);
}

.trade-names-list[b-fzok5oq4h3] {
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.trade-name-row[b-fzok5oq4h3] {
    background: #fff;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
}

.form-actions[b-fzok5oq4h3] {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--gray-300);
    margin-top: var(--space-lg);
}
/* /Pages/Compliance/PermitFromIntake.razor.rz.scp.css */
.permit-from-intake-page[b-l9eg1j9h32] {
    padding: var(--space-lg);
}
/* /Pages/Compliance/PermitScanPanel.razor.rz.scp.css */
/* Permit Scan Panel — domain-specific styles only */

.permit-scan-panel[b-esoiin3lz3] {
    padding: var(--space-lg);
}

/* Scan field label */
.scan-field-label[b-esoiin3lz3] {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    display: block;
    margin-bottom: var(--space-2xs);
}

/* Permit type checkboxes */
.permit-type-checkboxes[b-esoiin3lz3] {
    background: var(--gray-50);
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.permit-type-checkboxes .form-check-inline[b-esoiin3lz3] {
    margin-right: var(--space-lg);
    margin-bottom: var(--space-sm);
}

/* Trade names */
.trade-name-item[b-esoiin3lz3] {
    padding: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
}

/* .confidence-badge hoisted to site.css 2026-08-01 (targets the ScanField child component). */
/* /Pages/Compliance/RecordDiffPanel.razor.rz.scp.css */
.record-diff-panel[b-z1q1b0ybtl] {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-lg);
    background: var(--bs-body-bg);
    margin-top: var(--space-lg);
}

.diff-header[b-z1q1b0ybtl] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.diff-body[b-z1q1b0ybtl] {
    padding: var(--space-sm) 0;
}

.diff-row[b-z1q1b0ybtl] {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--bs-border-color-translucent);
    transition: background-color 0.15s ease;
}

.diff-row:last-child[b-z1q1b0ybtl] {
    border-bottom: none;
}

.diff-checkbox[b-z1q1b0ybtl] {
    width: 28px;
    flex-shrink: 0;
}

.diff-checkbox .form-check-input[b-z1q1b0ybtl] {
    cursor: pointer;
}

.diff-label[b-z1q1b0ybtl] {
    width: 120px;
    flex-shrink: 0;
    font-size: var(--font-size-md);
    color: var(--bs-secondary-color);
}

.diff-label label[b-z1q1b0ybtl] {
    cursor: pointer;
    margin: 0;
}

.diff-values[b-z1q1b0ybtl] {
    flex: 1;
    font-size: var(--font-size-base);
}

.diff-match[b-z1q1b0ybtl] {
    color: var(--bs-success);
}

.diff-missing .doc-value[b-z1q1b0ybtl],
.diff-differs .doc-value[b-z1q1b0ybtl] {
    color: var(--bs-primary);
}

.diff-differs .db-value[b-z1q1b0ybtl] {
    text-decoration: line-through;
    opacity: 0.7;
}

.arrow[b-z1q1b0ybtl] {
    margin: 0 var(--space-sm);
    color: var(--bs-secondary-color);
}

/* Row status backgrounds */
.status-match[b-z1q1b0ybtl] {
    background: rgba(var(--bs-success-rgb), 0.05);
}

.status-differs[b-z1q1b0ybtl] {
    background: rgba(var(--bs-warning-rgb), 0.08);
}

.status-missing[b-z1q1b0ybtl] {
    background: rgba(var(--bs-info-rgb), 0.08);
}

.status-selected[b-z1q1b0ybtl] {
    background: rgba(var(--bs-primary-rgb), 0.12);
    border-left: 3px solid var(--bs-primary);
}

.diff-footer[b-z1q1b0ybtl] {
    padding: var(--space-lg);
    border-top: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
/* /Pages/Components/CollapsibleSection.razor.rz.scp.css */
.collapsible-section[b-103wvdpt92] {
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  background: var(--white);
}

.collapsible-header[b-103wvdpt92] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  cursor: pointer;
  background: var(--gray-50);
  border-radius: 5px 5px 0 0;
  user-select: none;
}

.collapsible-section.collapsed .collapsible-header[b-103wvdpt92] {
  border-radius: 5px;
}

.collapsible-header:hover[b-103wvdpt92] {
  background: var(--gray-200);
}

.collapsible-title[b-103wvdpt92] {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
}

.collapsible-title i[b-103wvdpt92] {
  font-size: var(--font-size-sm);
  color: var(--gray-600);
  transition: transform 0.2s ease;
}

.collapsible-badge[b-103wvdpt92] {
  background: var(--blue-500);
  color: var(--white);
  font-size: var(--font-size-xs);
  padding: 0.15rem 0.4rem;
  border-radius: 10px;
  font-weight: var(--font-weight-normal);
}

.collapsible-header-content[b-103wvdpt92] {
  font-size: var(--font-size-md);
  color: var(--gray-600);
}

.collapsible-body[b-103wvdpt92] {
  padding: var(--space-md);
  border-top: 1px solid var(--gray-300);
}
/* /Pages/Contacts/AddBusinessPanel.razor.rz.scp.css */
/* Pin Save/Cancel to the bottom of the panel — see AddPersonPanel.razor.css
   for the rationale (iPhone deploy: long forms shouldn't push Save off-screen). */
.sp-content[b-74q4etakxp] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sp-body[b-74q4etakxp] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-lg);
}

.sp-footer[b-74q4etakxp] {
    flex-shrink: 0;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--gray-200);
    background: var(--surface-default);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
}

/* ── Form sections ── */
.form-section[b-74q4etakxp] {
    margin-bottom: var(--space-sm);
}

.section-divider[b-74q4etakxp] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    color: var(--gray-700);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--space-sm);
}

.section-divider.clickable[b-74q4etakxp] {
    cursor: pointer;
    user-select: none;
}

.section-divider.clickable:hover[b-74q4etakxp] {
    color: var(--blue-500);
}

/* ── Touch targets (iOS) ── */
.form-control[b-74q4etakxp],
.form-select[b-74q4etakxp],
.btn[b-74q4etakxp] {
    min-height: 44px;
}

.form-control-sm[b-74q4etakxp] {
    min-height: 38px;
}

/* ── Mobile ── */
@media (max-width: 576px) {
    .panel-body[b-74q4etakxp] {
        padding: var(--space-md);
    }

    .row > .col-6[b-74q4etakxp] {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
/* /Pages/Contacts/AddPersonPanel.razor.rz.scp.css */
/* Fill the SlidingPanel body so the inner footer can pin to the bottom.
   Without this the Save/Cancel buttons scroll with the form, which is the
   wrong UX on iPhone (have to scroll to reach Save on a long form). */
.sp-content[b-82g4fidc21] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sp-body[b-82g4fidc21] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--space-lg);
}

.sp-footer[b-82g4fidc21] {
    flex-shrink: 0;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--gray-200);
    background: var(--surface-default);
    /* iOS safe-area: keep buttons above the home-indicator strip */
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
}

.form-section[b-82g4fidc21] {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--nwc-bg-muted);
}

    .form-section:last-child[b-82g4fidc21] {
        border-bottom: none;
    }

.list-item-row[b-82g4fidc21] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

    /* An input's intrinsic min-width is its `size` (~20 chars), which stops flex from shrinking it
       and pushes the row past the panel edge once the scope select joins it. */
    .list-item-row .form-control[b-82g4fidc21] {
        min-width: 0;
    }

.type-select[b-82g4fidc21] {
    width: 100px;
    flex-shrink: 0;
}

.note-input[b-82g4fidc21] {
    width: 100px;
    flex-shrink: 0;
}

.business-card[b-82g4fidc21] {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.business-card-body[b-82g4fidc21] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: 0.35rem;
}

.card-subsection[b-82g4fidc21] {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--gray-300);
}

.subsection-label[b-82g4fidc21] {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
}

.personal-subsection[b-82g4fidc21] {
    margin-bottom: var(--space-md);
}

.address-block-form[b-82g4fidc21] {
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

/* The opt-in a ticked SMS box needs. Reuses .list-item-row's flex shape and only adds the indent,
   so it reads as part of the phone row above it rather than as another field. */
.sms-consent-row[b-82g4fidc21] {
    padding-left: var(--space-md);
}

    .sms-consent-row .form-select[b-82g4fidc21] {
        max-width: 22rem;
    }

.sms-consent-note[b-82g4fidc21] {
    padding-left: var(--space-md);
    margin-bottom: var(--space-sm);
}
/* /Pages/Contacts/BusinessCleanup.razor.rz.scp.css */
.cleanup-header[b-zrr8k445iw] {
    position: sticky;
    top: 0;
    background: var(--surface-default);
    z-index: 10;
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--gray-300);
    margin-bottom: var(--space-lg);
}

.cleanup-controls[b-zrr8k445iw] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.search-input[b-zrr8k445iw] {
    max-width: 350px;
}

.inactive-toggle[b-zrr8k445iw] {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.stats-badges[b-zrr8k445iw] {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* Header flex/align/cursor now come from global .nwc-group-header (site.css),
   see LAYOUT-PATTERNS.md Pattern 10. This wrapper's own border-radius (md,
   not the shared lg) stays local since it genuinely differs. */
.bond-group[b-zrr8k445iw] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.bond-group-header[b-zrr8k445iw] {
    background: var(--gray-50);
    padding: 0.6rem var(--space-lg);
    gap: var(--space-sm);
    user-select: none;
}

.bond-group-header:hover[b-zrr8k445iw] {
    background: var(--gray-200);
}

.expand-icon[b-zrr8k445iw] {
    font-family: monospace;
    font-weight: var(--font-weight-bold);
    width: 1.2rem;
    text-align: center;
}

.header-legal-entity[b-zrr8k445iw] {
    color: var(--text-secondary);
    font-style: italic;
    font-size: var(--font-size-base);
    margin-left: var(--space-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 350px;
}

.business-row[b-zrr8k445iw] {
    padding: var(--space-sm) var(--space-lg);
    border-top: 1px solid var(--nwc-border-light);
}

.bond-holder-row[b-zrr8k445iw] {
    background: var(--state-success-bg);
}

.child-row[b-zrr8k445iw] {
    background: var(--surface-default);
}

.unmatched-row[b-zrr8k445iw] {
    background: var(--state-warning-bg);
}

.inactive-row[b-zrr8k445iw] {
    opacity: 0.55;
}

.inactive-name[b-zrr8k445iw] {
    text-decoration: line-through;
}

.row-header[b-zrr8k445iw] {
    display: flex;
    align-items: center;
    margin-bottom: 0.3rem;
}

.row-fields[b-zrr8k445iw] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: var(--font-size-base);
}

.field-label[b-zrr8k445iw] {
    font-weight: var(--font-weight-semibold);
    color: var(--text-muted);
}

.indent[b-zrr8k445iw] {
    width: 1.5rem;
    display: inline-block;
}

.business-link[b-zrr8k445iw] {
    color: var(--text-link);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.business-link:hover[b-zrr8k445iw] {
    text-decoration: underline;
}

.inline-edit label[b-zrr8k445iw] {
    font-weight: var(--font-weight-semibold);
    margin: 0;
    font-size: var(--font-size-md);
}

.inline-edit .form-control-sm[b-zrr8k445iw] {
    max-width: 250px;
}

.inline-edit .bond-number-input[b-zrr8k445iw] {
    max-width: 120px;
}

/* Add Child picker row */
.add-child-row[b-zrr8k445iw] {
    display: flex;
    align-items: center;
    padding: var(--space-sm) 0;
    margin-top: 0.4rem;
    border-top: 1px dashed var(--border-default);
}

.add-child-picker[b-zrr8k445iw] {
    flex: 1;
    max-width: 400px;
}

/* Confirmation overlay */
.confirmation-overlay[b-zrr8k445iw] {
    position: fixed;
    inset: 0;
    background: var(--contacts-confirm-overlay-bg);
    z-index: var(--z-slot-badge);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: var(--space-2xl);
}

.confirmation-banner[b-zrr8k445iw] {
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    box-shadow: var(--contacts-confirm-banner-shadow);
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    max-width: 600px;
    width: 100%;
}

.confirmation-text[b-zrr8k445iw] {
    flex: 1;
    font-size: 0.95rem;
}

.confirmation-desc[b-zrr8k445iw] {
    display: block;
    font-size: var(--font-size-md);
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.confirmation-buttons[b-zrr8k445iw] {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}
/* /Pages/Contacts/BusinessDetailPanel.razor.rz.scp.css */
.detail-panel[b-up7jahhu00] {
    padding: 0 var(--space-lg) var(--space-lg);
}

/* .detail-actions → .nwc-detail-actions (site.css) */

.detail-section[b-up7jahhu00] {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--gray-200);
}

    .detail-section:last-child[b-up7jahhu00] {
        border-bottom: none;
    }


.info-grid[b-up7jahhu00] {
    display: grid;
    gap: 0.35rem;
}

.info-row[b-up7jahhu00] {
    display: flex;
    gap: var(--space-md);
}

.info-label[b-up7jahhu00] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    min-width: 100px;
    color: var(--gray-700);
}

.info-value[b-up7jahhu00] {
    font-size: var(--font-size-md);
}

.badge-group[b-up7jahhu00] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

    .contact-list li[b-up7jahhu00] {
        padding: 0.2rem 0;
        font-size: var(--font-size-md);
    }

.address-block[b-up7jahhu00] {
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-md);
}

    .address-block:last-child[b-up7jahhu00] {
        margin-bottom: 0;
    }

.associate-row[b-up7jahhu00] {
    cursor: pointer;
}

    .associate-row:hover[b-up7jahhu00] {
        background-color: var(--gray-50);
    }

[b-up7jahhu00] .table th {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    color: var(--gray-600);
    border-bottom-width: 1px;
}

[b-up7jahhu00] .table td {
    vertical-align: top;
    font-size: var(--font-size-md);
}
/* /Pages/Contacts/ContactsBusinessMain.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ContactsBusinessMain.razor.css
   
   LAYOUT: Pattern A — 95vh viewport lock (see docs/LAYOUT-PATTERNS.md)
   ┌──────────────────────────────────────────┐
   │ .cb-page        95vh, flex-col, no scroll│
   │ ┌──────────────────────────────────────┐ │
   │ │ .cb-header    flex-shrink:0          │ │
   │ └──────────────────────────────────────┘ │
   │ ┌──────────────────────────────────────┐ │
   │ │ .cb-grid-area flex:1, overflow-y:auto│ │
   │ │  └ NwcDataGrid (scrolls here)       │ │
   │ └──────────────────────────────────────┘ │
   └──────────────────────────────────────────┘
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ── */
.cb-header[b-85vda6f0xi] {
    flex-shrink: 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--surface-default);
    padding-bottom: var(--space-sm);
}

/* ── Grid area ── */
/* ── NwcDataGrid height propagation (see LAYOUT-PATTERNS.md) ──
   Scroll stays on .cb-grid-area. The datagrid and table-desktop
   just fill 100% and let their parent handle the scroll.
   This keeps Virtualize happy — it finds .cb-grid-area as the
   scroll container and calculates viewport position correctly. */
/* /Pages/Contacts/Manager/Components/ContactCandidateBanner.razor.rz.scp.css */
.ccb-banner[b-4abb1faxux] {
    border-left: 4px solid #ffc107;
    border-radius: 0.375rem;
    overflow: hidden;
}

.ccb-header[b-4abb1faxux] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 193, 7, 0.12);
    border-bottom: 1px solid rgba(255, 193, 7, 0.3);
}

.ccb-heading[b-4abb1faxux] {
    font-weight: 600;
    font-size: 0.875rem;
}

.ccb-body[b-4abb1faxux] {
    padding: 0.25rem 0;
}

.ccb-row[b-4abb1faxux] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ccb-row:last-child[b-4abb1faxux] {
    border-bottom: none;
}

.ccb-identity[b-4abb1faxux] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ccb-name[b-4abb1faxux] {
    font-size: 0.9375rem;
}

.ccb-detail[b-4abb1faxux] {
    font-size: 0.8125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ccb-use-btn[b-4abb1faxux] {
    flex-shrink: 0;
    font-size: 0.8125rem;
}

.ccb-more[b-4abb1faxux] {
    font-style: italic;
}
/* /Pages/Contacts/Manager/Components/ContactCleanupPanel.razor.rz.scp.css */
.ccp-body[b-op6qw4zr3k] {
    padding: 0.5rem 0.75rem;
    display: flex; flex-direction: column; gap: 0.75rem;
    height: 100%;
    overflow-y: auto;
    min-height: 0;
}
.ccp-header[b-op6qw4zr3k] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.25rem 0;
}
.ccp-cluster-grid[b-op6qw4zr3k] {
    display: flex; flex-direction: column; gap: 0.75rem;
}
.ccp-cluster-card[b-op6qw4zr3k] {
    border: 1px solid #dee2e6; border-radius: 0.5rem;
    background: #fff;
}
.ccp-cluster-card-header[b-op6qw4zr3k] {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0.75rem; border-bottom: 1px solid #dee2e6;
    background: #f8f9fa; border-radius: 0.5rem 0.5rem 0 0;
}
.ccp-cluster-card-members[b-op6qw4zr3k] {
    padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.ccp-member-row[b-op6qw4zr3k] {
    display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
}
.ccp-member-id[b-op6qw4zr3k] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85em; color: #6c757d; min-width: 3rem;
}
.ccp-member-emails[b-op6qw4zr3k] { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.ccp-email-pill[b-op6qw4zr3k] {
    background: #e7f1ff; color: #084298;
    padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.8em;
}
.ccp-member-businesses[b-op6qw4zr3k] { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.ccp-biz-pill[b-op6qw4zr3k] {
    background: #efe9d7; color: #7b5e00;
    padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.8em;
}
.ccp-pair[b-op6qw4zr3k] {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
}
.ccp-pair-side[b-op6qw4zr3k] {
    border: 1px solid #dee2e6; border-radius: 0.5rem;
    padding: 0.6rem 0.75rem; background: #fff;
}
.ccp-pair-side.winner[b-op6qw4zr3k] { border-color: #198754; box-shadow: 0 0 0 1px #19875422 inset; }
.ccp-pair-side.loser[b-op6qw4zr3k]  { border-color: #6c757d; background: #f8f9fa; }
.ccp-pair-side-header[b-op6qw4zr3k] {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.4rem;
}
.ccp-pair-attrs[b-op6qw4zr3k] { list-style: none; padding-left: 0; margin: 0 0 0.5rem; }
.ccp-pair-attrs li[b-op6qw4zr3k] { padding: 0.15rem 0; }
.ccp-pair-side-actions[b-op6qw4zr3k] { display: flex; justify-content: flex-end; }
/* /Pages/Contacts/Manager/Components/ContactScopeReviewPanel.razor.rz.scp.css */
.csr-body[b-0rfe25w2uj] {
    padding: var(--space-md, 1rem);
    overflow-x: auto;
}

/* Addresses and numbers are the thing being judged, so they read as data, not prose. */
.csr-value[b-0rfe25w2uj] {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace);
    font-size: 0.85em;
}

.csr-table th[b-0rfe25w2uj] {
    font-weight: 600;
    white-space: nowrap;
}

/* A blocked row is not an error and not a success — it is a suggestion the reviewer should read
   and leave alone. Amber rather than red so it does not read as "something went wrong here". */
.csr-blocked[b-0rfe25w2uj] {
    color: var(--bs-warning-text-emphasis, #664d03);
    white-space: nowrap;
}

.csr-blocked-reason[b-0rfe25w2uj] {
    color: var(--bs-warning-text-emphasis, #664d03);
    background-color: var(--bs-warning-bg-subtle, #fff3cd);
}
/* /Pages/Contacts/Manager/Components/InlineRolePicker.razor.rz.scp.css */
.irp-overlay[b-p4syt27wao] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1055;
}

.irp-panel[b-p4syt27wao] {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.2);
    min-width: 280px;
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
}

.irp-header[b-p4syt27wao] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #dee2e6;
}

.irp-title[b-p4syt27wao] {
    font-weight: 600;
    font-size: 0.9375rem;
}

.irp-body[b-p4syt27wao] {
    padding: 0.75rem 1rem;
    overflow-y: auto;
    flex: 1;
}

.irp-role-list[b-p4syt27wao] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.irp-role-row[b-p4syt27wao] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.375rem;
    border-radius: 0.25rem;
    cursor: pointer;
    user-select: none;
}

.irp-role-row:hover[b-p4syt27wao] {
    background: #f8f9fa;
}

.irp-empty-warning[b-p4syt27wao] {
    padding: 0.25rem 0.125rem;
}

.irp-footer[b-p4syt27wao] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-top: 1px solid #dee2e6;
}
/* /Pages/Contacts/Manager/Components/InviteCandidatePicker.razor.rz.scp.css */
.icp-root[b-eqktku8n15] { display:flex; flex-direction:column; gap:0.75rem; }
.icp-inputs[b-eqktku8n15] { display:flex; flex-direction:column; gap:0.5rem; }
.icp-field-row[b-eqktku8n15] { display:flex; gap:0.5rem; }
.icp-field[b-eqktku8n15] { flex:1; display:flex; flex-direction:column; gap:0.15rem; }
.icp-status[b-eqktku8n15] { display:flex; align-items:center; padding:0.25rem 0.5rem; }
.icp-results[b-eqktku8n15] { display:flex; flex-direction:column; gap:0.5rem; }
.icp-results-header[b-eqktku8n15] { padding:0.25rem 0.125rem; }
.icp-card[b-eqktku8n15] {
    display:flex; justify-content:space-between; align-items:flex-start; gap:0.5rem;
    padding:0.625rem 0.75rem; background:#f8f9fa; border:1px solid #dee2e6; border-radius:0.375rem;
}
.icp-card-main[b-eqktku8n15] { flex:1; display:flex; flex-direction:column; gap:0.4rem; min-width:0; }
.icp-card-head[b-eqktku8n15] { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.icp-name[b-eqktku8n15] { font-weight:600; }
.icp-id[b-eqktku8n15] { font-size:0.75rem; }
.icp-emails[b-eqktku8n15] { display:flex; flex-direction:column; gap:0.2rem; }
.icp-email-row[b-eqktku8n15] { display:flex; align-items:center; gap:0.35rem; font-size:0.875rem; flex-wrap:wrap; }
.icp-email-addr[b-eqktku8n15] { font-family:monospace; }
.icp-businesses[b-eqktku8n15] { display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem; }
.icp-card-actions[b-eqktku8n15] { display:flex; align-items:center; }
.icp-empty[b-eqktku8n15] { padding:0.5rem 0.125rem; }
.icp-footer[b-eqktku8n15] { padding-top:0.25rem; border-top:1px dashed #dee2e6; }
/* /Pages/Contacts/Manager/Components/InviteCreatePanel.razor.rz.scp.css */
.invite-create-body[b-axppjaq5g1] { padding:0.25rem; display:flex; flex-direction:column; gap:0.5rem; }
.invite-create-resolved[b-axppjaq5g1] { background:#f8f9fa; padding:0.75rem; border-radius:0.375rem; }
.invite-create-resolved-actions[b-axppjaq5g1] { display:flex; gap:0.5rem; margin-top:0.5rem; }
.invite-laurie-notice[b-axppjaq5g1] {
    background:#fff8e1; border:1px solid #ffe082; border-radius:0.375rem;
    padding:0.625rem 0.75rem; display:flex; flex-direction:column; gap:0.4rem;
}
.invite-form-section[b-axppjaq5g1] { display:flex; flex-direction:column; gap:0.2rem; }
/* /Pages/Contacts/Manager/Components/InviteInspector.razor.rz.scp.css */
.cm-link-row[b-1ldq54dd11] {
    display: flex; align-items: center;
    padding: 0.4rem 0.6rem; margin-bottom: 0.25rem;
    background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.375rem;
    cursor: pointer;
}
.cm-link-row:hover[b-1ldq54dd11] { background: #e9ecef; }
.cm-invite-url[b-1ldq54dd11] { font-size: 0.75rem; word-break: break-all; flex: 1; }
/* /Pages/Contacts/Manager/Components/InvitesGrid.razor.rz.scp.css */
/* Delivery-status text colors — status pills themselves use the shared .nwc-chip
   vocabulary (site.css, Pattern 15); these color the glyph+word delivery cell only. */
.cm-delivery-delivered[b-asjspwowh0] { color: #198754; font-weight: 600; }  /* stronger green than Sent */
.cm-delivery-sent[b-asjspwowh0] { color: #6c757d; }                         /* accepted by the provider; Delivered is the green one */
.cm-delivery-deferred[b-asjspwowh0] { color: #fd7e14; }                     /* amber — temporary, retrying */
.cm-delivery-failed[b-asjspwowh0] { color: #dc3545; }
.cm-delivery-disabled[b-asjspwowh0] { color: #6c757d; }
.cm-delivery-unknown[b-asjspwowh0] { color: #6c757d; }

/* Glyph-only delivery cell (word + error live in the tooltip) — keep the hit/read
   target a fixed square so ✓/→/✗ align down the column. */
.cm-delivery-glyph[b-asjspwowh0] {
    display: inline-block;
    min-width: 1.4em;
    text-align: center;
    font-size: 0.95rem;
    cursor: default;
}

.cm-grid-actions[b-asjspwowh0] { white-space: nowrap; }
/* /Pages/Contacts/Manager/Components/NotificationMatrixPane.razor.rz.scp.css */
/* Notification matrix — pane-local styles only.
   The shared structural classes (.email-notifications-layout, .email-matrix-table th) live
   in site.css as globals because the Settings → Permissions tab uses the same table shell.
   .list-type-badge was moved here verbatim from AdminSettings.razor.css during the eviction
   (Permissions doesn't use it), so it stays a single scoped definition — no duplicate group. */

.list-type-badge[b-wktfz6e5lq] {
    font-size: var(--font-size-2xs);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-xs);
    background: var(--nwc-bg-hover);
    border: 1px solid var(--nwc-border);
    cursor: pointer;
    line-height: 1;
}

.list-type-badge:hover[b-wktfz6e5lq] {
    background: var(--nwc-border-light);
}

/* Per-feature bulk "All / Clear" affordance in each column header. */
.nm-bulk-group[b-wktfz6e5lq] {
    display: flex;
    gap: 0.15rem;
    justify-content: center;
    margin-top: 0.15rem;
}

.nm-bulk-btn[b-wktfz6e5lq] {
    font-size: var(--font-size-2xs);
    padding: 0.05rem 0.3rem;
    border: 1px solid var(--nwc-border);
    border-radius: var(--radius-xs);
    background: var(--nwc-bg);
    color: var(--nwc-text-muted);
    cursor: pointer;
    line-height: 1.2;
}

.nm-bulk-btn:hover[b-wktfz6e5lq] {
    background: var(--nwc-bg-hover);
    color: var(--nwc-text);
}

/* Registered user with no linked Contact — present but not subscribable. */
.nm-row-unlinked[b-wktfz6e5lq] {
    opacity: 0.6;
    font-style: italic;
}

.nm-unlinked-badge[b-wktfz6e5lq] {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.35rem;
    font-size: var(--font-size-2xs);
    border-radius: var(--radius-xs);
    background: var(--nwc-bg-hover);
    color: var(--nwc-text-muted);
    border: 1px solid var(--nwc-border);
}

/* ── Frozen header + first column ─────────────────────────────────────────
   Fill the overlay and scroll the matrix within itself so the notification-name
   header row stays pinned on vertical scroll and the user-name column stays pinned
   on horizontal scroll. .ms-overlay is already a bounded flex column (overflow:hidden),
   so flex:1 + min-height:0 gives this container a definite height to scroll in. */
.email-notifications-layout[b-wktfz6e5lq] {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
}

/* Scroll mechanics come from .nwc-fill-scroll (site.css) on the element; the class name
   stays as the hook for the sticky header/column rules below. */

/* Pin the header row (notification names + bulk buttons) on vertical scroll. */
.nm-matrix-scroll thead th[b-wktfz6e5lq] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--surface-default);
}

/* Pin the first column (user name) on horizontal scroll. */
.nm-matrix-scroll tbody td:first-child[b-wktfz6e5lq] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--surface-default);
}

/* The top-left corner is pinned on BOTH axes, so it must stack above both. */
.nm-matrix-scroll thead th:first-child[b-wktfz6e5lq] {
    left: 0;
    z-index: 3;
}

/* One-line cell with the full value on hover (title attr). Row height on a comparison
   matrix is set by its tallest cell, so one long free-text value costs every row on the
   screen — measured at 1366px, a 5-line customer name cut the visible roster to 6 people. */
.nm-cell-truncate[b-wktfz6e5lq] {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Fix-it row ───────────────────────────────────────────────────────────
   Expansion row under the person whose reachability is broken. Uses tokens and
   the existing nm-* vocabulary rather than inventing a card style — no new
   shape, so nothing here is a candidate for hoisting to site.css. */
.nm-fix-trigger[b-wktfz6e5lq] {
    text-decoration: none;
    font-size: inherit;
    vertical-align: baseline;
}

.nm-fix-trigger:hover[b-wktfz6e5lq] {
    text-decoration: underline;
}

/* The expansion cell must NOT inherit the sticky first-column treatment above —
   it spans the whole table, so pinning it would smear it across horizontal scroll. */
.nm-fix-row > td[b-wktfz6e5lq] {
    position: static !important;
    background: var(--nwc-bg-hover);
    padding: 0.5rem 0.75rem;
}

.nm-fix-card[b-wktfz6e5lq] {
    font-size: var(--font-size-sm);
    text-align: left;
    font-style: normal;
}

.nm-fix-steps[b-wktfz6e5lq] {
    margin: 0;
    padding-left: 1.25rem;
}

.nm-fix-steps li[b-wktfz6e5lq] {
    padding: 0.15rem 0;
}

.nm-fix-steps li.nm-fix-ok[b-wktfz6e5lq] {
    color: var(--nwc-text-muted);
}
/* /Pages/Contacts/Manager/Components/PersonInspector.razor.rz.scp.css */
/* Person inspector — Portal Access sub-tab (2026-09-07): one collapsible row per active
   affiliation, each opening that business's Portal access in place. Tokens only. */

.cm-portal-biz[b-b4bypxxxkn] {
    border: 1px solid var(--nwc-border-light);
    border-radius: var(--radius-xs);
    background: var(--surface-default);
}

.cm-portal-biz + .cm-portal-biz[b-b4bypxxxkn] {
    margin-top: 0.5rem;
}

.cm-portal-biz-head[b-b4bypxxxkn] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 0;
    background: transparent;
    text-align: left;
    color: var(--nwc-text);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.cm-portal-biz-head:hover[b-b4bypxxxkn],
.cm-portal-biz.open > .cm-portal-biz-head[b-b4bypxxxkn] {
    background: var(--nwc-bg-hover);
}

.cm-portal-biz-name[b-b4bypxxxkn] {
    font-weight: 600;
    min-width: 0;
}

.cm-portal-biz-title[b-b4bypxxxkn] {
    font-size: var(--font-size-2xs);
    color: var(--nwc-text-muted);
}

/* The "open this business" affordance sits INSIDE the toggle button; its click is stopped
   from propagating so it never also toggles the row. */
.cm-portal-biz-open[b-b4bypxxxkn] {
    margin-left: auto;
    color: var(--nwc-text-muted);
    padding: 0 0.2rem;
}

.cm-portal-biz-open:hover[b-b4bypxxxkn] {
    color: var(--nwc-text);
}

.cm-portal-biz-body[b-b4bypxxxkn] {
    padding: 0.6rem 0.75rem 0.75rem;
    border-top: 1px solid var(--nwc-border-light);
}
/* /Pages/Contacts/Manager/Components/PhoneAuthorizePanel.razor.rz.scp.css */
.pap-body[b-a7yhraxtry] { display:flex; flex-direction:column; gap:0.75rem; }
.pap-section[b-a7yhraxtry] { display:flex; flex-direction:column; gap:0.25rem; }
.pap-contact[b-a7yhraxtry] { padding:0.5rem 0.75rem; background:#f8f9fa; border:1px solid #dee2e6; border-radius:0.375rem; }
.pap-contact-name[b-a7yhraxtry] { font-weight:600; }
/* /Pages/Contacts/Manager/Components/PrivateLabelAccessSection.razor.rz.scp.css */
/* "Portal access" section — the Business inspector's sub-tab (2026-09-07). Three numbered
   blocks in the order the admin has to answer them. Tokens only. */

.pla[b-iaq669oeup] {
    min-width: 0;
}

.pla-block + .pla-block[b-iaq669oeup] {
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--nwc-border-light);
}

.pla-block-head[b-iaq669oeup] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nwc-text-muted);
    margin-bottom: 0.5rem;
}

.pla-step[b-iaq669oeup] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0;
}

.pla-head-count[b-iaq669oeup] {
    font-weight: 600;
    color: var(--text-secondary);
}

/* The inspector column is narrow; the head's button must never wrap to two lines. */
.pla-block-head .btn[b-iaq669oeup] {
    white-space: nowrap;
    flex: 0 0 auto;
}

.pla-head-note[b-iaq669oeup] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-secondary);
}

.pla-sub-head[b-iaq669oeup] {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    color: var(--nwc-text-muted);
    margin: 0.4rem 0 0.25rem;
}

/* ── The "no customer yet" callout — the sentence that states the ordering ─── */

.pla-callout[b-iaq669oeup] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.6rem 0.75rem;
    border: 1px dashed var(--nwc-border);
    border-radius: var(--radius-xs);
    background: var(--nwc-bg-hover);
}

.pla-callout-main[b-iaq669oeup] { min-width: 0; }

.pla-callout-title[b-iaq669oeup] {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--nwc-text);
}

.pla-callout-text[b-iaq669oeup] {
    font-size: var(--font-size-2xs);
    color: var(--text-secondary);
}

.pla-callout .btn[b-iaq669oeup] { flex: 0 0 auto; }

/* ── Key/value ───────────────────────────────────────────────────── */

.pla-kv dd[b-iaq669oeup] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.pla-code[b-iaq669oeup] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: var(--font-size-2xs);
    color: var(--text-secondary);
}

.pla-muted[b-iaq669oeup] {
    font-size: var(--font-size-2xs);
    color: var(--nwc-text-muted);
}

/* ── Chips ────────────────────────────────────────────────────────── */

.pla-chip[b-iaq669oeup] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    white-space: nowrap;
}

.pla-chip-full[b-iaq669oeup] { background: var(--filterchip-active-bg); color: var(--filterchip-active-fg); }
.pla-chip-pl[b-iaq669oeup]   { background: var(--nwc-bg-hover); color: var(--nwc-text); }
.pla-chip-ok[b-iaq669oeup]   { color: var(--bs-success, var(--gray-700)); }
.pla-chip-pending[b-iaq669oeup] { color: var(--gray-700); }
.pla-chip-warn[b-iaq669oeup] { color: var(--bs-warning-text-emphasis, var(--gray-700)); }
.pla-chip-muted[b-iaq669oeup] { background: transparent; color: var(--nwc-text-muted); font-weight: 400; }

/* ── Tables ───────────────────────────────────────────────────────── */

.pla-table[b-iaq669oeup] {
    font-size: var(--font-size-sm);
}

.pla-table th[b-iaq669oeup] {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--nwc-text-muted);
    border-bottom: 1px solid var(--nwc-border);
}

.pla-table td[b-iaq669oeup] { vertical-align: middle; }

.pla-highlight td[b-iaq669oeup] { background: var(--filterchip-active-bg); }

.pla-inactive[b-iaq669oeup] { opacity: 0.6; }

.pla-name[b-iaq669oeup] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--nwc-text);
}

.pla-sub[b-iaq669oeup] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: var(--font-size-2xs);
    color: var(--nwc-text-muted);
}

.pla-roles[b-iaq669oeup],
.pla-when[b-iaq669oeup],
.pla-status[b-iaq669oeup] {
    font-size: var(--font-size-2xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* A person's name as a cross-link — reads as a link, sits in the table like text. */
.pla-link[b-iaq669oeup] {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    color: var(--bs-link-color, var(--nwc-text));
    text-decoration: underline dotted;
    cursor: pointer;
}

.pla-link:hover[b-iaq669oeup] { text-decoration-style: solid; }

.pla-note-full[b-iaq669oeup] {
    font-size: var(--font-size-2xs);
    color: var(--text-secondary);
    background: var(--nwc-bg-hover);
    border-radius: var(--radius-xs);
    padding: 0.3rem 0.5rem;
}
/* /Pages/Contacts/Manager/Components/PrivateLabelGrantsEditor.razor.rz.scp.css */
/* Private-label grants editor — one customer's grants, editable. Hosted by the Private Label
   tab AND the Business inspector's "Portal access" section (2026-09-07). Tokens only — no
   literal greys — so it tracks the shared theme like the rest of the Contact Manager. */

.ple[b-v1u5aitwlw] {
    min-width: 0;
}

/* ── Header ───────────────────────────────────────────────────────── */

.ple-head[b-v1u5aitwlw] {
    padding-bottom: 0.6rem;
    margin-bottom: 0.9rem;
    border-bottom: 1px solid var(--nwc-border-light);
}

.ple-head-name[b-v1u5aitwlw] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--nwc-text);
}

.ple-head-sub[b-v1u5aitwlw] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* ── Section headings ─────────────────────────────────────────────── */

.ple-section-head[b-v1u5aitwlw] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--font-size-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--nwc-text-muted);
    margin-bottom: 0.35rem;
}

.ple-section-count[b-v1u5aitwlw] {
    font-weight: 600;
    color: var(--text-secondary);
}

.ple-section-hint[b-v1u5aitwlw] {
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

.ple-section + .ple-section[b-v1u5aitwlw] {
    margin-top: 1.1rem;
}

/* ── Chips ────────────────────────────────────────────────────────── */

.ple-chip[b-v1u5aitwlw] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    white-space: nowrap;
}

.ple-chip-granted[b-v1u5aitwlw] {
    background: var(--gray-100);
    color: var(--gray-600);
}

/* ── Tables ───────────────────────────────────────────────────────── */

.ple-table[b-v1u5aitwlw] {
    font-size: var(--font-size-sm);
}

.ple-table th[b-v1u5aitwlw] {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--nwc-text-muted);
    border-bottom: 1px solid var(--nwc-border);
}

.ple-table td[b-v1u5aitwlw] {
    vertical-align: middle;
}

.ple-num[b-v1u5aitwlw] {
    width: 4.5rem;
    text-align: right;
    white-space: nowrap;
}

/* ⛔ `width: 1%` is the shrink-to-content trick for a TABLE CELL only. The picker rows are
   flex items and get their own class below — sharing one class between the two clipped the
   Grant button to a sliver (measured 2026-08-26). */
.ple-table .ple-actions[b-v1u5aitwlw] {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.ple-option-actions[b-v1u5aitwlw] {
    flex: 0 0 auto;
    white-space: nowrap;
    text-align: right;
}

/* A COLA reaching no run is ordinary (550 of 1,089 do) — muted, not coloured. */
.ple-zero[b-v1u5aitwlw] {
    color: var(--nwc-text-muted);
    cursor: help;
}

.ple-name[b-v1u5aitwlw] {
    font-weight: 600;
    color: var(--nwc-text);
}

.ple-sub[b-v1u5aitwlw] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    font-size: var(--font-size-2xs);
    color: var(--nwc-text-muted);
}

.ple-ttb[b-v1u5aitwlw] {
    font-family: var(--bs-font-monospace, monospace);
}

.ple-serial[b-v1u5aitwlw] {
    font-family: var(--bs-font-monospace, monospace);
    opacity: 0.8;
}

.ple-note[b-v1u5aitwlw] { font-style: italic; }

.ple-reach[b-v1u5aitwlw] { font-weight: 600; }

.ple-granted-by[b-v1u5aitwlw] {
    font-size: var(--font-size-2xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

.ple-when[b-v1u5aitwlw] { color: var(--nwc-text-muted); }

/* Redundancy notice on a pinned run — deliberately not an alert colour. */
.ple-redundant[b-v1u5aitwlw] {
    color: var(--text-secondary);
    font-weight: 600;
}

/* The other name. Rendered ALONGSIDE the headline, never instead of it. */
.ple-brand[b-v1u5aitwlw] {
    font-weight: 600;
    color: var(--text-secondary);
}

/* ── Pickers ──────────────────────────────────────────────────────── */

.ple-search[b-v1u5aitwlw] {
    position: relative;
    margin-bottom: 0.6rem;
}

.ple-search > i[b-v1u5aitwlw] {
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    color: var(--nwc-text-muted);
    pointer-events: none;
}

.ple-search input[b-v1u5aitwlw] {
    padding-left: 1.9rem;
}

/* Loud enough to be read before the buttons below it — a capped list must not be
   mistaken for the complete match set. */
.ple-truncated[b-v1u5aitwlw] {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    color: var(--gray-700);
    background: var(--gray-100);
    border-radius: var(--radius-xs);
    padding: 0.3rem 0.5rem;
}

.ple-options[b-v1u5aitwlw] {
    max-height: 22rem;
    overflow-y: auto;
    border: 1px solid var(--nwc-border-light);
    border-radius: var(--radius-xs);
}

.ple-option[b-v1u5aitwlw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--nwc-border-light);
    background: var(--surface-default);
}

.ple-option:last-child[b-v1u5aitwlw] { border-bottom: none; }

.ple-option:hover[b-v1u5aitwlw] { background: var(--nwc-bg-hover); }

.ple-option.granted[b-v1u5aitwlw] { opacity: 0.65; }

.ple-option-main[b-v1u5aitwlw] { min-width: 0; }
/* /Pages/Contacts/Manager/Components/PrivateLabelGrantsPanel.razor.rz.scp.css */
/* Private Label tab — the roll-up (reshaped 2026-09-07). One table of portal customers; a row
   with a business opens its inspector, a legacy row without one opens the editor beside it.
   Tokens only — no literal greys. */

.pl-panel[b-s52vjn3dsv] {
    height: 100%;
    overflow: auto;
    padding: 0.75rem;
}

.pl-intro[b-s52vjn3dsv] {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.pl-split[b-s52vjn3dsv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr);
    gap: 1rem;
    align-items: start;
}

.pl-split-single[b-s52vjn3dsv] {
    grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
    .pl-split[b-s52vjn3dsv] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Roll-up table ────────────────────────────────────────────────── */

.pl-table[b-s52vjn3dsv] {
    font-size: var(--font-size-sm);
}

.pl-table th[b-s52vjn3dsv] {
    font-size: var(--font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--nwc-text-muted);
    border-bottom: 1px solid var(--nwc-border);
    white-space: nowrap;
}

.pl-table td[b-s52vjn3dsv] {
    vertical-align: middle;
}

.pl-row[b-s52vjn3dsv] {
    cursor: pointer;
}

.pl-row.active td[b-s52vjn3dsv] {
    background: var(--filterchip-active-bg);
}

.pl-name[b-s52vjn3dsv] {
    font-weight: 600;
    color: var(--nwc-text);
}

.pl-code[b-s52vjn3dsv] {
    font-family: var(--bs-font-monospace, monospace);
    font-size: var(--font-size-2xs);
    color: var(--nwc-text-muted);
}

.pl-biz[b-s52vjn3dsv] {
    font-size: var(--font-size-2xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

.pl-num[b-s52vjn3dsv] {
    width: 4.5rem;
    text-align: right;
    white-space: nowrap;
}

.pl-open[b-s52vjn3dsv] {
    width: 1%;
    text-align: right;
    color: var(--nwc-text-muted);
}

/* Zero is the normal starting state — quiet, not a bold red 0. */
.pl-zero[b-s52vjn3dsv] {
    color: var(--nwc-text-muted);
}

/* ── Chips ────────────────────────────────────────────────────────── */

.pl-chip[b-s52vjn3dsv] {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-pill);
    background: var(--gray-100);
    color: var(--gray-700);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    white-space: nowrap;
}

.pl-chip-none[b-s52vjn3dsv] {
    background: transparent;
    color: var(--nwc-text-muted);
    font-weight: 400;
}

/* ── Inline editor (legacy customers only) ────────────────────────── */

.pl-detail[b-s52vjn3dsv] {
    min-width: 0;
}

.pl-detail-note[b-s52vjn3dsv] {
    font-size: var(--font-size-2xs);
    color: var(--text-secondary);
    background: var(--nwc-bg-hover);
    border-radius: var(--radius-xs);
    padding: 0.3rem 0.5rem;
    margin-bottom: 0.75rem;
}
/* /Pages/Contacts/Manager/Components/PromotePersonPanel.razor.rz.scp.css */
.promote-person-body[b-ipsjwpfzco] { padding:0.25rem; display:flex; flex-direction:column; gap:0.75rem; }
.promote-section[b-ipsjwpfzco] { display:flex; flex-direction:column; gap:0.25rem; }
.promote-fixed-entity[b-ipsjwpfzco] {
    background:#f8f9fa; border:1px solid #dee2e6; border-radius:0.375rem;
    padding:0.4rem 0.6rem; display:inline-flex; align-items:center;
}
.promote-actions[b-ipsjwpfzco] { display:flex; justify-content:flex-end; gap:0.5rem; margin-top:0.25rem; }
/* /Pages/Contacts/Manager/Components/ReinvitePanel.razor.rz.scp.css */
.reinvite-body[b-b8d52svll9] { padding:0.5rem 0.25rem; display:flex; flex-direction:column; gap:0.5rem; }
.reinvite-confirm[b-b8d52svll9] { display:grid; grid-template-columns:auto 1fr; gap:0.15rem 0.75rem; margin:0; }
.reinvite-confirm dt[b-b8d52svll9] { font-weight:600; color:var(--text-muted); }
.reinvite-confirm dd[b-b8d52svll9] { margin:0; }
/* /Pages/Contacts/Manager/Components/UserInspector.razor.rz.scp.css */
/* Role pills themselves are shared .nwc-chip (site.css, Pattern 15). */
.ui-role-pills[b-bp1i31a5yv] { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.ui-role-edit[b-bp1i31a5yv] { display: flex; flex-direction: column; gap: 0.3rem; }
.ui-role-row[b-bp1i31a5yv] { display: flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0.25rem; cursor: pointer; }
.ui-biz-list[b-bp1i31a5yv] { display: flex; flex-direction: column; gap: 0.3rem; }
.ui-biz-row[b-bp1i31a5yv] {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.35rem 0.5rem; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 0.375rem;
}
/* /Pages/Contacts/Manager/Components/UsersGrid.razor.rz.scp.css */
.cm-user-fb-linked[b-1coc58wqct] { color: #198754; font-size: 0.8rem; }
.cm-user-fb-unlinked[b-1coc58wqct] { color: #6c757d; font-size: 0.8rem; }
/* /Pages/Contacts/Manager/Components/UserTeardownPanel.razor.rz.scp.css */
/* Component-specific layout for UserTeardownPanel. The shared confirm-card family
   (.nwc-confirm*, .nwc-action-bar) lives globally in site.css and is reused by
   ContactCleanupPanel — see the CSS-dedup arc. Only the panel-local body layout and
   the Actor key/value list are scoped here. */
.utp-body[b-xjec8tmq8u] {
    padding: 0.5rem 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Grid mechanics + dd margin now come from global .nwc-kv (site.css) — see
   LAYOUT-PATTERNS.md Pattern 2. Only this instance's deltas remain local. */
.utp-kv[b-xjec8tmq8u] {
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
}

.utp-kv dt[b-xjec8tmq8u] {
    font-weight: 600;
    color: var(--text-secondary);
}
/* /Pages/Contacts/Manager/ContactManager.razor.rz.scp.css */
/* Shell/workspace/pane/collapsed-stub/statusbar layout lives in Shared/ManagerShell.
   Grid / sub-tabs / inspector / org-chart / access-class styles were hoisted to
   wwwroot/css/site.css (cm-* prefix kept) — see comment block there for why.
   Only rules targeting elements rendered directly by ContactManager.razor's
   RenderFragments remain here, so the scoped b-* attribute can attach. */

/* ── Ribbon ────────────────────────────────────────────── */
/* Ribbon toolbar hoisted to site.css .nwc-ribbon-* — only the page-unique
   .cm-ribbon-meta / .cm-chips remain below. */

.cm-ribbon-meta[b-i89c3t2tza] {
    font-size: 0.72rem;
    color: var(--gray-600);
    padding: 0 8px;
}

.cm-ribbon-meta code[b-i89c3t2tza] {
    font-size: 0.72rem;
    color: var(--gray-700);
    background: transparent;
    padding: 0;
}


.cm-chips[b-i89c3t2tza] {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* ── Pane title (in-pane header used by tree + inspector slots) ───────── */
/* .cm-pane-title hoisted to site.css .nwc-pane-title; .cm-pane-meta also hoisted
   to site.css (Compliance Manager grids render it outside ContactManager's scope). */

/* ── Empty / loading states ────────────────────────────── */
/* .cm-empty container + icon are global (.nwc-empty in site.css) so the ~30
   Contacts/Compliance grids that render .cm-empty get styled (was scoped-only
   here, so unstyled in those children). ContactManager's own pane keeps 32px. */
.cm-empty[b-i89c3t2tza] { padding: 32px; }

.cm-empty p[b-i89c3t2tza] { margin: 0; }

.cm-empty-sm[b-i89c3t2tza] { padding: 18px; }
.cm-empty-sm i[b-i89c3t2tza] { font-size: 1.6rem; }

/* ── Invites tree: status filter list (folder-style rows with live counts) ── */
.cm-status-list[b-i89c3t2tza] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px;
}

.cm-status-row[b-i89c3t2tza] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 0;
    background: transparent;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    cursor: pointer;
    text-align: left;
}

.cm-status-row:hover[b-i89c3t2tza] { background: var(--gray-100); }

/* Active state reuses the FilterChip "sticky amber" tokens so the two filter
   affordances stay visually one vocabulary. */
.cm-status-row.active[b-i89c3t2tza],
.cm-status-row.active:hover[b-i89c3t2tza] {
    background: var(--filterchip-active-bg);
    color: var(--filterchip-active-fg);
    font-weight: 600;
}

.cm-status-row-count[b-i89c3t2tza] {
    font-size: 0.72rem;
    color: var(--gray-600);
    background: var(--gray-100);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    min-width: 28px;
    text-align: center;
}

.cm-status-row.active .cm-status-row-count[b-i89c3t2tza] {
    background: var(--surface-default);
    color: var(--filterchip-active-fg);
}

/* ── Status bar (sep + spacer for the slotted content; outer .ms-statusbar comes from ManagerShell) ── */
.cm-status-spacer[b-i89c3t2tza] { flex: 1; }

/* ── Cleanup sub-tabs (duplicate people vs contact-info scope) ── */
.cm-subtabs[b-i89c3t2tza] {
    gap: var(--space-xs, 0.25rem);
    padding: var(--space-sm, 0.5rem) var(--space-md, 1rem) 0;
    border-bottom: 1px solid var(--gray-200);
}

    .cm-subtabs .nav-link[b-i89c3t2tza] {
        font-size: 0.8rem;
        padding: 4px 12px;
        border: 0;
        background: none;
        color: var(--gray-700);
    }

        .cm-subtabs .nav-link.active[b-i89c3t2tza] {
            background: var(--gray-100);
            color: var(--gray-900);
            font-weight: 600;
        }
/* /Pages/Contacts/MyProfilePanel.razor.rz.scp.css */
.profile-info[b-u0q5dvukaw] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-sm) 0;
}

.profile-avatar[b-u0q5dvukaw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--app-shell-blue);
    color: var(--text-on-brand);
    font-weight: var(--font-weight-semibold);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.subscription-row[b-u0q5dvukaw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--nwc-border-light);
}

.subscription-row:last-child[b-u0q5dvukaw] {
    border-bottom: none;
}

.phone-enrolled[b-u0q5dvukaw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
}

.phone-form[b-u0q5dvukaw] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
/* /Pages/Contacts/PersonDetailPanel.razor.rz.scp.css */
.detail-panel[b-zi7t6kr4fk] {
    padding: 0 var(--space-lg) var(--space-lg);
}

/* .detail-actions → .nwc-detail-actions (site.css) */

.detail-section[b-zi7t6kr4fk] {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--gray-200);
}

    .detail-section:last-child[b-zi7t6kr4fk] {
        border-bottom: none;
    }


    .contact-list li[b-zi7t6kr4fk] {
        padding: 0.2rem 0;
        font-size: var(--font-size-md);
    }

.affiliation-row[b-zi7t6kr4fk] {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color 0.15s;
}

    .affiliation-row:hover[b-zi7t6kr4fk] {
        background-color: var(--gray-50);
    }

.affiliation-inactive[b-zi7t6kr4fk] {
    opacity: 0.5;
}

.address-block[b-zi7t6kr4fk] {
    margin-bottom: var(--space-sm);
    font-size: var(--font-size-md);
}

    .address-block:last-child[b-zi7t6kr4fk] {
        margin-bottom: 0;
    }
/* /Pages/Contacts/Shared/ScopeSelect.razor.rz.scp.css */
/* Narrow by design: this sits in an already-crowded row (value + type + SMS + delete) inside a
   side panel, so it takes a fixed slice and truncates rather than pushing the value input out of
   the panel. The full business name is on the title attribute. */
.scope-select[b-bpomeg90jl] {
    width: 118px;
    flex-shrink: 0;
    text-overflow: ellipsis;
}
/* /Pages/Copilot/CopilotUploadPage.razor.rz.scp.css */
/* Pattern 1 (viewport-lock stack) via the shared list-page kit in site.css: .nwc-list-page is the
   locked column and .nwc-list-page-grid-area the region that scrolls. Only the deltas live here. */
.cu-header[b-w0cuottfsk] {
    flex-shrink: 0;
    gap: var(--space-md);
}

/* A flex row, so the PDF frame can grow to fill the region. */
.cu-body[b-w0cuottfsk] {
    display: flex;
}

.cu-frame[b-w0cuottfsk] {
    flex: 1;
    border: 1px solid var(--border-default);
}

.cu-image[b-w0cuottfsk] {
    max-width: 100%;
    height: auto;
    align-self: flex-start;
}
/* /Pages/EmailFunctions/EmailLabelComponent.razor.rz.scp.css */
/* EmailLabelComponent — matches LabelNewPanel visual language */

.email-header[b-unkwyu2juv] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem;
    color: var(--lnp-text-strong);
    letter-spacing: -0.01em;
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--lnp-border);
    margin-bottom: var(--space-sm);
}

.email-header i[b-unkwyu2juv] {
    color: var(--lnp-focus-border);
    font-size: var(--font-size-md);
}

/* ===== RECIPIENTS ===== */
.email-recipient-section[b-unkwyu2juv] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: var(--space-sm);
}

.recipient-group[b-unkwyu2juv] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
}

.recipient-label[b-unkwyu2juv] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--lnp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 28px;
    margin-top: 0.3rem;
}

.recipient-chips[b-unkwyu2juv] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.recipient-chip[b-unkwyu2juv] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 0.2rem var(--space-sm);
    font-size: 0.72rem;
    color: var(--lnp-text-strong);
    background: var(--lnp-surface-subtle);
    border: 1px solid var(--lnp-border-input);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}

.recipient-chip:hover[b-unkwyu2juv] {
    border-color: var(--lnp-focus-border);
    background: var(--lnp-info-gradient-start);
}

.recipient-chip span[b-unkwyu2juv] {
    line-height: 1.3;
}

/* Checked state — blue tint */
.recipient-chip:not(.deselected)[b-unkwyu2juv] {
    background: var(--lnp-info-gradient-start);
    border-color: var(--lnp-info-border);
    color: var(--lnp-info-strong);
}

.recipient-chip:not(.deselected)[b-unkwyu2juv]::before {
    content: "\2713";
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--lnp-focus-border);
}

/* Deselected — muted with strikethrough */
.recipient-chip.deselected[b-unkwyu2juv] {
    background: var(--email-deselected-bg);
    border-color: var(--lnp-border);
    color: var(--email-deselected-fg);
}

.recipient-chip.deselected span[b-unkwyu2juv] {
    text-decoration: line-through;
}

/* ===== SUBJECT ===== */
.email-subject-section[b-unkwyu2juv] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--lnp-border);
    margin-bottom: var(--space-sm);
}

.subject-label[b-unkwyu2juv] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--lnp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    min-width: 50px;
}

.subject-text[b-unkwyu2juv] {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--lnp-text-input);
}

/* ===== BODY PREVIEW ===== */
.email-body-section[b-unkwyu2juv] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.body-label[b-unkwyu2juv] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--lnp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.body-preview[b-unkwyu2juv] {
    max-height: 280px;
    overflow-y: auto;
    padding: 0.4rem;
    background: var(--lnp-surface-subtle);
    border: 1px solid var(--lnp-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

/* Scale down the inline-styled email HTML inside the preview */
.body-preview[b-unkwyu2juv]  table {
    font-size: var(--font-size-sm);
}

.body-preview[b-unkwyu2juv]  h2 {
    font-size: var(--font-size-base) !important;
}

.body-preview[b-unkwyu2juv]  h3 {
    font-size: 0.78rem !important;
}

.body-preview[b-unkwyu2juv]  img {
    max-width: 100px;
    height: auto;
}
/* /Pages/Equipment/EquipmentMain.razor.rz.scp.css */
.cards[b-u10lvqyb5u] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card[b-u10lvqyb5u] {
  flex: 0 1 24%;
  box-shadow: var(--equip-card-shadow);
}

  .card:hover[b-u10lvqyb5u] {
    box-shadow: var(--equip-card-shadow-hover);
  }

.headingRow[b-u10lvqyb5u] {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  justify-content: center;
}

.container-fluid[b-u10lvqyb5u] {
  padding: 0;
  height: 95vh;
  overflow: hidden;
}

.img-fluid[b-u10lvqyb5u] {
  max-width: 100%;
  height: auto;
}
/* /Pages/Harvest/Bins/BinManager.razor.rz.scp.css */
/* Bin Manager — two-pane layout (pickups primary, pars secondary). Tables are Bootstrap;
   only the pane arrangement and small affordances are bespoke. */

.binmgr-page[b-6prgk3soeq] {
    padding: 0.25rem 0.5rem;
}

.binmgr-header[b-6prgk3soeq] {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.binmgr-title[b-6prgk3soeq] {
    margin: 0;
}

.binmgr-layout[b-6prgk3soeq] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 991px) {
    .binmgr-layout[b-6prgk3soeq] {
        grid-template-columns: 1fr;
    }
}

.binmgr-pane-head[b-6prgk3soeq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.binmgr-pane-actions[b-6prgk3soeq] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.binmgr-toggle[b-6prgk3soeq] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    margin: 0;
}

.binmgr-pane-hint[b-6prgk3soeq] {
    margin-bottom: 0.5rem;
}

.binmgr-par-form[b-6prgk3soeq] {
    margin-bottom: 1rem;
}

.binmgr-notes-cell[b-6prgk3soeq] {
    max-width: 16rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.binmgr-row-cancelled[b-6prgk3soeq] {
    opacity: 0.55;
    text-decoration: line-through;
}
/* /Pages/Harvest/HarvestToday.razor.rz.scp.css */
/* ══ THE RULES IN THIS FILE ARE THE PHONE RULES ═══════════════════════════════════════════════
   ⛔⛔ EVERY desktop declaration lives in the ONE `@media (min-width: 768px)` block at the very
   BOTTOM of this file, and it has to stay there. A media query carries NO specificity edge over
   a base rule of equal specificity, so source order alone decides — move that block up and each
   of its declarations silently loses to the phone rule it is meant to override. This is not
   theoretical: projectedMain.razor.css documents the same trap biting live during its B7 fix.

   ⛔ 768px is not a taste value. It is EXACTLY where ManagerShell releases its own viewport lock
   (`.ms-shell { height: auto }` + `.ms-overlay { overflow: visible }`), so below it the DOCUMENT
   is genuinely the scroller and this page must behave like an ordinary in-flow block. Any other
   breakpoint leaves a band where the parent and this page disagree about who scrolls.

   ⛔ Do not touch the 640px cap below: it is a deliberate scale-house decision (see .ht-scan-btn
   — gloved hands, one-handed) and it is now phone-only, which is what it always meant.

   ⛔ RETIRED 2026-08-22 — the 640px → 72rem (@60rem) → 96rem (@78rem) width LADDER. Each tier was
   bolted on reactively after a prod report ("plenty of room to the left and right"), and the
   whole ladder was this page fighting a container it did not know about: since 68f1f0a8 it renders
   ONLY inside `.ms-overlay`, where the PANE already constrains the width. One desktop cap replaces
   all three — inert below it (the pane does the work), still a cap above it so the day header and
   the ledger strip, which are prose-width surfaces, do not run full bleed across a 2560px monitor.
   The thing each tier was chasing is unchanged and still true: BookingLoadTable sets no fixed
   width and its .enableScroll wrapper is overflow-x:auto, so giving the page room retires that
   sideways scrollbar on its own. */
.ht-page[b-lexpumavna] {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-2xl);
}

/* ⛔ NO h1 rule: the page title was removed 2026-08-21 (Jeff, driving live) — the manager tab
   strip already names the page. The header is now ONE grid row: prev-arrow | date + Receive
   Fruit | next-arrow. The arrows live in fixed outer columns so nothing the middle does — day
   names changing width, "Back to today" appearing — ever moves them. That stability is the
   point: the old inline row shuffled the forward arrow sideways on every day step. */
.ht-header[b-lexpumavna] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.ht-header-mid[b-lexpumavna] {
    min-width: 0;
}

/* ── Day navigation ──────────────────────────────────────────────────────
   Sized as controls, not text: this is used on a crush pad at 1am, so the arrows clear the 44px
   touch floor rather than being chevrons you aim at.

   ⛔⛔ FIXED HEIGHT, and it is the HEIGHT half of the fix for Jeff's 2026-08-22 report, "things
   are moving around when i click from day to day". `.ht-daynav-back` renders ONLY off today and
   carries min-height: 2.75rem, so this row was ~24px on today and ~44px on every other day — and
   because .ht-header is align-items:stretch with align-self:stretch side arrows, THE ARROWS
   THEMSELVES resized under the cursor between clicks, on top of shoving everything below down
   20px. The 2026-08-21 comment promising the arrows "never move" was true horizontally and false
   vertically. min-height pins the row at its tallest state on every day.
   ⛔ The WIDTH half is .ht-daynav-backslot below. Both are needed; either alone still moves.

   ⛔ GRID, not the old wrapping flex row. A `minmax(0, 1fr)` track sizes the date's box from the
   CONTAINER and never from the text, so "Friday, August 1" and "Wednesday, September 10" occupy
   an identical box — which is what retired the 13rem min-width the date used to need (see
   .ht-daynav-date). The old flex row could also WRAP on a phone, turning the same conditional
   button into a ~48px jump there. */
.ht-daynav[b-lexpumavna] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 2.75rem;
    margin-bottom: var(--space-2xs);
}

/* ⛔⛔ ALWAYS IN THE DOM, empty when you are on today — the button inside is what is conditional.
   Reserving the width here is what stops the date box (and, on a phone, the whole row) from
   resizing when "Back to today" appears. Sized to the icon-only phone button; the desktop block
   at the bottom of this file widens it for the labelled one. */
.ht-daynav-backslot[b-lexpumavna] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2xs);
    min-width: 2.75rem;
}

.ht-daynav-btn[b-lexpumavna] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-default);
    color: var(--gray-700);
    cursor: pointer;
}

.ht-daynav-btn:hover[b-lexpumavna],
.ht-daynav-btn:focus-visible[b-lexpumavna] {
    border-color: var(--gray-600);
    background: var(--gray-100);
}

/* The side arrows stretch to the full header height — a tall, easy target that visually brackets
   the day. Width stays the 2.75rem touch floor from .ht-daynav-btn. */
.ht-daynav-side[b-lexpumavna] {
    height: auto;
    align-self: stretch;
}

.ht-daynav-date[b-lexpumavna] {
    color: var(--gray-700);
    font-size: var(--font-size-md);
    font-weight: 600;
    text-align: center;
    /* ⛔ NO min-width, and its absence is the fix rather than an omission. The old `min-width:
       13rem` existed to stop the arrows shuffling as day names changed width — a job the fixed
       OUTER grid columns of .ht-header took over on 2026-08-21, leaving it vestigial. It was also
       actively harmful once the escape-hatch slot joined this row: 13rem + the slot overflows the
       middle column on a 320px phone. The `minmax(0, 1fr)` track above already holds this box at
       a constant width, so nothing beside it can slide.
       Ellipsis is the 320px degradation — clipped text, never a blown-out row. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Only rendered off today — so it is both the escape hatch and the "you are not on today"
   signal. One element doing both jobs means they can never disagree. */
.ht-daynav-back[b-lexpumavna] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    min-height: 2.75rem;
    /* Keeps a real 44px target once the label collapses to the icon on a phone. */
    min-width: 2.75rem;
    padding: 0 var(--space-sm);
    border: 1px solid var(--amber-300);
    border-radius: var(--radius-md);
    background: var(--amber-50);
    color: #8a5a00;
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
}

.ht-daynav-back:hover[b-lexpumavna],
.ht-daynav-back:focus-visible[b-lexpumavna] {
    background: #fdf0d0;
}

/* Hidden by default because the BASE rules in this file are the phone rules: at 375px the day nav
   has ~200px to share with the date and the labelled button will not fit beside it, which is what
   made the old flex row wrap and jump. The button's `title` carries the words here. Re-shown in
   the desktop block at the bottom of this file. Same idiom as .ht-sheet-btn-text /
   .ht-assign-btn-text below — except those hide on a max-width query, because their default is
   the desktop one. */
.ht-daynav-back-text[b-lexpumavna],
.ht-daynav-sheet-text[b-lexpumavna] {
    display: none;
}

/* The primary action on this page — sized well past the 44px touch-target floor
   (see LAYOUT-PATTERNS.md's iOS zoom-prevention + Apple HIG technique note) since
   scale-house/cellar staff are the target user, often on a phone one-handed.
   ⛔ THIS IS THE PHONE TREATMENT and it is load-bearing: pressed with gloves on, at the scale
   house, one-handed. Desktop demotes it to an ordinary header button — see the min-width block at
   the bottom of this file. */
.ht-scan-btn[b-lexpumavna] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: none;
    border-radius: var(--radius-lg);
    background: var(--blue-600);
    color: var(--white);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    min-height: 64px;
    /* Inside .ht-header since 2026-08-21 — the header's own margin carries the gap below. */
    margin-bottom: 0;
}

.ht-scan-btn:hover[b-lexpumavna] {
    background: var(--blue-700);
}

/* The name is shared with every other fruit-receiving entry point; the differentiator (this
   surface matches the tag for you) rides as a sub-label rather than as a different button name. */
.ht-scan-btn-text[b-lexpumavna] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.ht-scan-btn-sub[b-lexpumavna] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
    opacity: 0.85;
}

/* ⚠ A section showing the PREVIOUS day while the next one loads (staged commit, 2026-08-21).
   Dimmed so the flight is visible, inert so a click can't act on rows the header no longer
   describes. Deliberately NOT display:none — holding the old content at full height is the whole
   fix for "the buttons jump all over the screen". */
.ht-stale[b-lexpumavna] {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* ── What was scanned ────────────────────────────────────────────────────────────────────────
   Dense list, not cards: this is read line-by-line against a paper worksheet, so the tag numbers
   have to stack in a scannable column. Tabular numerals on the tag and the tons for that reason.
   Deliberately quiet chrome (no panel, no colour) — the ONLY row that shouts is a scan with no
   receipt, and it can only shout if everything around it is calm. */
.ht-scans[b-lexpumavna] {
    margin-bottom: var(--space-lg);
}

.ht-scans-title[b-lexpumavna] {
    font-size: var(--font-size-md);
    color: var(--gray-700);
    margin-bottom: var(--space-2xs);
}

.ht-scans-note[b-lexpumavna] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* ⛔ `.ht-scans-list { margin/padding/list-style }` DELETED 2026-08-22 — that is verbatim
   `.nwc-list-reset` from site.css, and this file was re-rolling it TWICE (here and on
   .ht-unmatched-list). The markup now carries `nwc-list-reset ht-scans-list`: the utility does the
   reset, the local class stays because the row rules below select through it.
   ⚠ Why it survived so long: the pre-push drift gate counts CROSS-FILE duplicates only, so
   duplication INSIDE one .razor.css is invisible to it. Don't assume a passing gate means a file
   is clean. */

/* ── The one-line row shape, shared by both lists ────────────────────────────────────────────
   ⛔ These two were separate rules with 5 of 6 declarations identical, differing ONLY in the
   border colour. Grouped rather than left as twins: the scan list and the "no booked load" list
   are the same object — a wrapping run of labelled chips read line-by-line against a paper
   worksheet — and they should not be able to drift apart by accident. */
.ht-scans-list li[b-lexpumavna],
.ht-unmatched-list li[b-lexpumavna],
.ht-pending-list li[b-lexpumavna] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    /* Tokens, not the bare 8px/4px these carried — same computed values (--space-sm is 8px,
       --space-2xs is 4px), so this is a rename, not a re-space. */
    gap: var(--space-sm);
    padding: var(--space-2xs) 0;
    border-top: 1px solid var(--border-default);
}

.ht-scan-tag[b-lexpumavna] {
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    min-width: 5rem;
}

.ht-scan-time[b-lexpumavna],
.ht-scan-by[b-lexpumavna] {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

.ht-scan-tons[b-lexpumavna] {
    font-variant-numeric: tabular-nums;
}

/* Whose fruit — batch code (booking truth) or as-scanned client · varietal, plus the block. The
   tooltip carries provenance; visually they stay quiet so the tag number keeps the row's weight. */
.ht-scan-fruit[b-lexpumavna] {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    font-variant-numeric: tabular-nums;
}

.ht-scan-source[b-lexpumavna] {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    font-style: italic;
}

/* The receipt id beside a pencil, only when one scan carries several receipts. */
.ht-scan-correct-id[b-lexpumavna] {
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    margin-left: 2px;
}

/* `.ht-scan-tank` was retired 2026-09-07: the ticket's tank now renders through TicketTankMarker
   (its own scoped css), labelled as the ticket's reading and loud when the recorded tanks disagree. */

.ht-scan-organic[b-lexpumavna] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    /* ⚠ The --state-success-* pair, not a bespoke green: both carry a dark-theme override, and a
       hardcoded dark-green foreground would land on the dark theme's dark-green background. */
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}

/* ⛔⛔ The whole reason this section exists. A scan with no HarvestActual means the read happened
   and nothing came of it — an abandoned confirm, which appears in NO other queue. Amber, not red:
   it is a state to chase, not an incident, and the same amber the "received with no booked load"
   strip below already uses for the mirror-image one-sided row. */
.ht-scan-orphan[b-lexpumavna] {
    background: var(--amber-50);
}

.ht-scan-noreceipt[b-lexpumavna] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: #8a5a00;
}

.ht-loads-title[b-lexpumavna] {
    font-size: var(--font-size-md);
    color: var(--gray-700);
    margin-bottom: var(--space-sm);
}

/* BookingDayCard's own header grid still applies (the global .nwc-row-3col utility in
   site.css) — this just right-sizes the title text for a single-card landing instead
   of BookingMain's 3-up desktop layout, where the smaller default reads fine at 1/3 width. */
.ht-card-title[b-lexpumavna] {
    font-size: var(--font-size-lg);
    text-align: center;
    margin: 0;
}

/* ── The load table's trailing row-action buttons ────────────────────────────────────────────
   Two of them: "Sheet" (print this load's grower sheet) and "Assign" (match a weight ticket and
   assign the tons that landed).

   ⛔ ONE GROUPED RULE, merged 2026-08-22. These were two separate rules with BYTE-IDENTICAL
   bodies — 11 declarations, plus an identical :hover, plus an identical max-width:640px label
   collapse. The old .ht-assign-btn comment even said so out loud: "Deliberately a sibling of
   .ht-sheet-btn and styled the same way". That intent is now expressed by the selector instead of
   by a comment over a copy, so the two cannot drift apart by accident.
   ⚠ It survived because the pre-push drift gate counts CROSS-FILE duplicates only — duplication
   inside one .razor.css is invisible to it.

   ⛔ Both class names are KEPT on their elements rather than merged into one: `.ht-assign-btn`
   also carries data-testid="ht-assign-toggle" and the pair is deliberately distinguishable in
   selectors. This change is CSS-only — no markup moved.

   Sized to the 44px touch target the rest of this mobile-first page uses: pressed at the scale
   house, on a phone, one-handed, often with gloves on. They sit in one actions cell, and one of
   them looking like a different class of control would suggest a different kind of consequence.
   The labels collapse on narrow screens because the printer glyph and the chevron each carry the
   meaning once the column is established.

   ⛔ NOT class btn-link, either of them: a ui-smoke suite clicks the first `table button.btn-link`
   in this deck and asserts exactly one panel opens — that locator is the Tons button, and giving
   these the same class silently re-points the smoke test at the wrong control.

   The chevron carries Assign's open/closed state. A separate "expanded" background was tried and
   read as a SELECTED row rather than an OPENED one, which matters on a table where a row click
   already opens the booking. */
.ht-sheet-btn[b-lexpumavna],
.ht-assign-btn[b-lexpumavna] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 44px;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--gray-800);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.ht-sheet-btn:hover[b-lexpumavna],
.ht-assign-btn:hover[b-lexpumavna] {
    background: var(--gray-100);
    border-color: var(--gray-600);
}

@media (max-width: 640px) {
    .ht-sheet-btn-text[b-lexpumavna],
    .ht-assign-btn-text[b-lexpumavna] {
        display: none;
    }
}

/* Received against no booked leg. Amber-informational, never red: this is fruit the winery HAS,
   correctly weighed -- what is missing is a booking, which is a data-entry follow-up and not an
   incident. Hidden entirely when the list is empty (the markup guards it), so it never occupies
   space on a normal day. */
.ht-unmatched[b-lexpumavna] {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--amber-300);
    border-radius: 8px;
    background: var(--amber-50);
}

.ht-unmatched-title[b-lexpumavna] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.ht-unmatched-sub[b-lexpumavna] {
    margin: 4px 0 8px;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

/* ⛔ `.ht-unmatched-list { margin/padding/list-style }` DELETED — the second of the two re-rolled
   copies of site.css's `.nwc-list-reset`; the markup carries the utility now. The row shape lives
   with .ht-scans-list li above; only the border colour is local, because amber is this section's
   whole point (fruit that arrived against no booked leg). */
.ht-unmatched-list li[b-lexpumavna] {
    border-top-color: var(--amber-300);
}

.ht-unmatched-tag[b-lexpumavna] {
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.ht-unmatched-tons[b-lexpumavna] {
    font-variant-numeric: tabular-nums;
}

.ht-unmatched-client[b-lexpumavna],
.ht-unmatched-variety[b-lexpumavna] {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

/* Forces the correction panel onto its own full-width line within the flex-wrap li, rather than
   fighting the tag/tons/client spans for a shrink-to-fit width. */
.ht-unmatched-correction[b-lexpumavna] {
    flex: 1 0 100%;
}

/* ── Pending promotions — "weighed, not on the contract" ─────────────────────────────────────
   Same section chrome as .ht-unmatched (it is the sibling exception queue), tinted green rather
   than amber: these rows are OFFERS with a confirm, not arrivals with a problem. The row shape is
   the shared .ht-*-list li rule above. */
.ht-pending[b-lexpumavna] {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--green-300, #86efac);
    border-radius: 8px;
    background: var(--green-50, #f0fdf4);
}

.ht-pending-title[b-lexpumavna] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.ht-pending-sub[b-lexpumavna] {
    margin: 4px 0 8px;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

.ht-pending-list li[b-lexpumavna] {
    border-top-color: var(--green-300, #86efac);
}

.ht-pending-lot[b-lexpumavna] {
    font-variant-numeric: tabular-nums;
}

.ht-pending-tank[b-lexpumavna],
.ht-pending-tons[b-lexpumavna] {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    font-variant-numeric: tabular-nums;
}

/* The refusal is the row's whole message when it cannot confirm — full width so the sentence
   reads as prose under the chips instead of wrapping between them. */
.ht-pending-refusal[b-lexpumavna] {
    flex: 1 0 100%;
    font-size: var(--font-size-sm);
    color: var(--amber-700, #b45309);
}

/* The stale-row offer rides under its refusal sentence — full-width like the sentence, so the
   button reads as the sentence's own action rather than a second, competing verdict. */
.ht-pending-repair[b-lexpumavna] {
    flex: 0 0 auto;
    align-self: flex-start;
}

.ht-pending-daylink[b-lexpumavna] {
    border: none;
    background: none;
    padding: 0;
    font-size: var(--font-size-sm);
    color: var(--blue-600);
    text-decoration: underline;
    cursor: pointer;
}

/* ⛔ `.ht-assign-btn`'s own rule, :hover and label-collapse query were DELETED 2026-08-22 — they
   were byte-identical twins of .ht-sheet-btn's. Both selectors now share the one grouped rule
   above; look there, and add any future row-action button to that group rather than copying it. */

/* ── Seated as a ManagerShell tab, this page must own its scrolling ─────────────────────────────
   ⛔⛔ WITHOUT THIS, EVERYTHING BELOW THE FOLD IS UNREACHABLE ON DESKTOP. Reported live
   2026-08-19: "i cant scroll the Harvest today and assign what i need to."

   ManagerShell states the contract in its own CSS: `.ms-shell { height: calc(100vh - 56px) }`
   with `.ms-overlay { overflow: hidden }` — "Desktop keeps the fixed-height shell: panes own
   their scrolling and the page itself never scrolls." Every other hosted tab brings a pane:
   ProjectedMain has .hd-scroll-area, PumpOversHarvestMain has .pohv-table-container. This page
   was written for its own route under MainLayout, where the DOCUMENT scrolls, so it brought
   none — and 68f1f0a8 seated it in the shell "unchanged". Standalone stayed fine; the tab
   clipped. Identical in shape to the shell's documented bug #5, which was fixed for phones only
   (the lock is released under `max-width: 640px`), leaving desktop exposed.

   ⛔ Fixing this at `.ms-overlay` instead does NOT work, and was tried: .ht-page declares no
   `flex`, so it defaults to `flex: 0 1 auto` and a fixed-height flex column SHRINKS it. Its
   content then overflows its own box while the overlay's scrollHeight stays put, so
   `overflow-y: auto` on the parent scrolls nothing. The child has to stop shrinking AND own the
   scroller — which is what the contract asked for anyway.

   ⚠ Scoped to `.ms-overlay` on purpose. It was written when this component ALSO answered
   /harvest/today directly under MainLayout, whose <article> is not a flex container: `flex` would
   have been inert there but `overflow-y: auto` would have handed the page a second scroller
   inside the document's, giving the QR-code deep link a nested scrollbar.
   ⚠ SINCE 2026-08-21 THAT CASE NO LONGER EXISTS — the component has no `@page` of its own and
   HarvestManager.razor:44 is the only caller, so the scoping is now belt-and-braces rather than
   load-bearing. It is kept because the Embedded parameter deliberately leaves the door open to a
   second host. ⛔ The ROUTE is still not retired — it 302s here via
   Endpoints/HarvestTodayRedirectEndpoints.cs, and it is printed on the harvest-day sheet and on
   the laminated QR card.

   ⭐ 2026-08-22: this element is still the scroller, but the HEADER no longer scrolls with it —
   `.ht-header` is `position: sticky` against this scrollport from 768px up. See the desktop block
   at the bottom of this file; the `scrollbar-gutter` and `overflow-x` reasoning below is what
   keeps that pinned bar's width constant too. */
.ms-overlay .ht-page[b-lexpumavna] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* ⭐ THE residual "buttons jump around" fix (Jeff, 2026-08-21, desktop): .ht-page is its own
       scroller, so a day whose content is shorter than the viewport has NO scrollbar and a taller
       day does — the content box widened/narrowed ~17px on every day step and every section
       shifted sideways. Reserving the gutter keeps the content box constant whether or not the
       bar is present. Same pattern as BottlingSchedule's .flex-grid-days and both calendars.
       No-op on iPad/overlay-scrollbar platforms, which never reserved the space. */
    scrollbar-gutter: stable;
    /* ⛔ overflow-x MUST be stated explicitly, and `hidden` is not redundant with the default.
       Per CSS Overflow 3, when one axis is `visible` and the other is not, the `visible` one
       COMPUTES TO `auto` — so declaring only overflow-y silently made .ht-page a horizontal
       scroll container too. That is why the manager tab showed a sideways scrollbar the
       standalone /harvest/today route did not, and why its vertical scrollbar stole ~15px of
       content width, pushing the table into .enableScroll that much sooner. Clipping behaviour
       is unchanged (the axis was already `auto`, which clips) — this only removes the scrollbar
       that had nothing to scroll. The table keeps its own .enableScroll for genuine overflow. */
    overflow-x: hidden;
}

/* ⭐⭐ A RESHOT TICKET. Quieter than every other state on purpose: nothing is wrong here — she took
   a bad picture, took another, and the second one became the receipt. It stays VISIBLE (the scan
   did happen, and this list is the only place that records it) but recedes, so the eye lands on the
   row that owns the tonnage instead of reading the same tons twice. */
.ht-scan-superseded-row[b-lexpumavna] {
    opacity: 0.62;
}

.ht-scan-superseded[b-lexpumavna] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-style: italic;
    color: var(--gray-500);
}

/* ⭐⭐ ANSWERED, NOT OPEN. Same visual family as a superseded row and for the same reason: nothing
   here needs action. It is deliberately NOT the .ht-scan-orphan alarm colour — 13 of 16 unpaired
   prod rows land here, so if this read as a warning the list would still be shouting, just in a
   different font. */
.ht-scan-dismissed-row[b-lexpumavna] {
    opacity: 0.62;
}

.ht-scan-dismissed[b-lexpumavna] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    font-style: italic;
    color: var(--gray-500);
}

/* The dismiss control. Deliberately understated — it sits on the one row that IS shouting, and it
   must not compete with the ⚠ flag for attention; a reader should notice the problem first and the
   remedy second. */
.ht-scan-dismiss-btn[b-lexpumavna],
.ht-scans-hidden-toggle[b-lexpumavna],
.ht-scan-restore[b-lexpumavna] {
    border: none;
    background: none;
    padding: 0 2px;
    font-size: 0.7rem;
    text-decoration: underline;
    color: var(--gray-600);
    cursor: pointer;
}

.ht-scan-dismiss-btn:hover[b-lexpumavna] {
    color: var(--bs-danger);
}

/* ⛔ NOT danger-on-hover, unlike .ht-scan-dismiss-btn above. Dismissing silences an alarm and
   deserves the flinch; bringing a row back is the safe direction and must not read as destructive. */
.ht-scans-hidden-toggle:hover[b-lexpumavna],
.ht-scan-restore:hover[b-lexpumavna] {
    color: var(--bs-primary);
}

.ht-scan-restore[disabled][b-lexpumavna] {
    color: var(--gray-400);
    cursor: default;
}

.ht-scan-dismiss-form[b-lexpumavna] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ⚠ Wide enough for a real sentence. The whole value of the reason is that prod already carries
   prose like "duplicate office scan of tag 18855, received as HA 1744" — a 6ch box would train
   people back to "manual-ignore". */
.ht-scan-dismiss-reason[b-lexpumavna] {
    font-size: 0.7rem;
    padding: 1px 4px;
    min-width: 200px;
    border: 1px solid var(--gray-400);
    border-radius: 3px;
}

.ht-scan-dismiss-go[b-lexpumavna],
.ht-scan-dismiss-cancel[b-lexpumavna] {
    font-size: 0.7rem;
    padding: 1px 6px;
    border-radius: 3px;
    cursor: pointer;
}

.ht-scan-dismiss-go[b-lexpumavna] {
    border: 1px solid var(--bs-danger);
    background: var(--bs-danger);
    color: var(--white);
}

.ht-scan-dismiss-go:disabled[b-lexpumavna] {
    opacity: 0.45;
    cursor: not-allowed;
}

.ht-scan-dismiss-cancel[b-lexpumavna] {
    border: 1px solid var(--gray-400);
    background: none;
    color: var(--gray-600);
}

.ht-scan-dismiss-error[b-lexpumavna] {
    font-size: 0.7rem;
    color: var(--bs-danger);
}

/* ── The hidden-duplicates drawer ────────────────────────────────────────────────────────────
   Jeff, 2026-08-23: the superseded and dismissed rows leave the list entirely. What stays is one
   quiet line saying how many went and why, because a list that silently drops rows is worse than
   one that shows them — she has to be able to see that a hide happened. */
.ht-scans-hidden-note[b-lexpumavna] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs, 6px);
    margin: var(--space-2xs, 4px) 0 0;
}

.ht-scans-hidden-detail[b-lexpumavna] {
    font-size: 0.7rem;
    color: var(--gray-500);
}

/* The group label. ⛔ Two groups, never merged — a superseded row is the pairing's own finding,
   a dismissed row is a person's decision, and the reader is entitled to know which is which. */
.ht-scans-hidden-group[b-lexpumavna] {
    margin: var(--space-sm, 8px) 0 0;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--gray-600);
}

/* Inset so the drawer reads as subordinate to the list above rather than as more of it. Row layout
   itself is inherited from `.ht-scans-list li` — these rows ARE that shape, just fewer spans. */
.ht-scans-list--hidden[b-lexpumavna] {
    margin-left: var(--space-sm, 8px);
}

.ht-scan-hidden-reason[b-lexpumavna] {
    font-size: 0.7rem;
    font-style: italic;
    color: var(--gray-600);
}

/* A dismissal that cannot be taken back here: the orphan is Resolved, i.e. linked to a real
   receipt, and the AppHost refuses to reopen it. Reads as a state, not as a disabled button. */
/* The ticket disagreeing with itself. Amber, not red: nothing is known to be WRONG yet — two
   numbers that cannot both be right, and a human decides which. Red here would read as "this load
   is bad", which is a claim the data does not support. */
.ht-scan-weightflag[b-lexpumavna] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: #8a5a00;
    background: var(--amber-50);
    border: 1px solid var(--amber-300);
    border-radius: var(--radius-sm, 4px);
    padding: 0 var(--space-2xs, 4px);
    cursor: help;
}

.ht-scan-hidden-locked[b-lexpumavna] {
    font-size: 0.7rem;
    color: var(--gray-500);
    border-bottom: 1px dotted var(--gray-400);
    cursor: help;
}

/* An inferred scan→receipt pairing (tag + same day, no stamped link). Quiet by design — the list's
   only shouting row is a scan with NO receipt, and this row HAS one. */
.ht-scan-bytag[b-lexpumavna] {
    font-size: 0.7rem;
    color: var(--gray-500);
    border: 1px dashed var(--border-default);
    border-radius: 3px;
    padding: 0 4px;
}

/* ⭐ The scan row's "Tanks" affordance and the editor's own row. The editor itself is scoped to
   WeightTagTankAllocator; these two rules only make room for it in the scan list. */
.ht-scan-tanks-toggle[b-lexpumavna] {
    border: 0;
    background: transparent;
    color: var(--bs-blue);
    font-size: 0.8rem;
    padding: 0 4px;
    cursor: pointer;
}

.ht-scan-tanks-toggle:hover[b-lexpumavna] {
    text-decoration: underline;
}

/* ⛔ Full width and NOT a flex item: the editor is a block, and inheriting the scan row's inline
   layout would squash the tank/tons table into the tag/time/tons run above it. */
/* ⚠ `var(--space-2, 8px)` here and on .ht-autopromote referenced a token that DOES NOT EXIST —
   tokens.css has --space-3xs/2xs/xs/sm/md/lg/xl/2xl and no --space-2, so both were silently
   riding the 8px fallback. Same computed value, so this is a correction, not a re-space. */
.ht-scans-list > li.ht-scan-tanks[b-lexpumavna] {
    display: block;
    padding: 0;
    margin: 0 0 var(--space-sm);
}

/* What a save promoted on its own — success tokens, same dark-theme rationale as .ht-scan-organic. */
.ht-autopromote[b-lexpumavna] {
    /* --space-sm, not the non-existent --space-2 it used to name (see .ht-scan-tanks above). */
    margin: var(--space-sm) 0 0;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--state-success-bg);
    color: var(--state-success-fg);
}

/* The refusal variant — amber, same pair the page's other chase-this states use. */
.ht-autopromote--warn[b-lexpumavna] {
    background: var(--amber-50);
    color: #8a5a00;
}

/* A catch-up scan listed under its receipt's harvest day — the tell that explains the hop. */
.ht-scan-crossday[b-lexpumavna] {
    font-size: var(--font-size-xs);
    color: #8a5a00;
    white-space: nowrap;
}

/* ═════════════════════════════════════════════════════════════════════════════════════════════
   DESKTOP (>= 768px) — the ONE block. Added 2026-08-22.
   ═════════════════════════════════════════════════════════════════════════════════════════════
   ⛔⛔ THIS BLOCK MUST STAY LAST IN THE FILE. A media query has no specificity edge over a base
   rule of equal specificity, so source order alone decides — moved earlier, every declaration
   here silently loses to the phone rule it overrides. It is also why this is ONE block rather
   than desktop tweaks scattered beside their phone counterparts: proximity reads better and
   breaks.

   ⛔ 768px is not a taste value — it is exactly where ManagerShell releases its own viewport lock
   (`.ms-shell { height: auto }`, `.ms-overlay { overflow: visible }`). Any other breakpoint leaves
   a band where the parent and this page disagree about who scrolls.

   WHAT JEFF REPORTED, 2026-08-22, driving the Harvest Manager tab: "things are moving around when
   i click from day to day, the 'receive fruit' button is bigger than it needs to be, the bulk of
   the information is in the body so that needs to be easy to see and have a smart scrolling
   consideration ... it must have invented its own styling and might not understand it is just a
   page within the Harvest manager." All four are the same root cause: this component was written
   as a standalone phone page under MainLayout and, when 68f1f0a8 seated it in ManagerShell, the
   ONLY adaptation was making it scrollable (671bf842). Everything else stayed phone design. */
@media (min-width: 768px) {

    .ht-page[b-lexpumavna] {
        /* ⛔⛔ `width: 100%` IS THE ACTUAL FIX, AND IT IS NOT REDUNDANT WITH max-width. Measured
           2026-08-22 at a 1600px viewport, BEFORE this line: `.ms-overlay` = 1303px, `.ht-page` =
           607px, `margin: 0 347px`. The page had been SHRINK-TO-FIT inside the pane all along.

           Why: `.ms-overlay .ht-page` sets `flex: 1 1 auto`, so this is a flex ITEM in a
           `flex-direction: column` container — and `margin: 0 auto` on the cross axis CANCELS
           `align-items: stretch`, which makes the item shrink-to-fit and then centres it. A
           max-width can only ever lower a width, so raising it changed NOTHING.

           ⇒ That is why the "plenty of room to the left and right while the table scrolls" report
           came back twice (2026-08-09, 2026-08-20) and got a bigger number each time: every tier of
           the retired ladder raised a cap that was never binding. The table looks starved because
           BookingLoadTable's `.enableScroll` is `overflow-x: auto` — a scroll container contributes
           almost nothing to intrinsic width, so the page shrinks to fit the SCAN LIST and the table
           scrolls inside whatever is left over. ⛔ Do not "simplify" this line away, and do not
           answer a future width complaint by raising the cap again. */
        width: 100%;

        /* ⛔⛔ `none`, AND IT MUST BE STATED — deleting this line does NOT mean "no cap", it means
           the base rule's `max-width: 640px` (the phone cap, line 26) takes over on desktop.

           Why no cap at all (Jeff's ruling, 2026-08-22): the manager has NO shared content-width
           contract — ManagerShell hands each tab a full-width slot and every tab page invents its
           own cap — so the width you see is a property of whichever tab you are on. Measured that
           day at a 1920px viewport, with `.ms-overlay` identical at 1817px/left 72 on both:

               harvesttoday               .ht-page    1536px   left 212   (96rem + auto margins)
               pumpovercontractsharvest   .pohv-page  1815px   left  73   (no cap)

           ⇒ clicking between the two tabs slid the content's left edge 139px and changed its
           width 279px while the chrome around it held still. Jeff: "it looks really strange."
           He chose FULL-BLEED as the manager-wide rule, so this tab now matches its neighbour.

           ⛔ Do NOT re-add a cap here to fix a future "lines are too long" report — that is what
           made this tab the odd one out in the first place. The measure belongs to ManagerShell
           as a shared opt-in class, decided once for every tab. → the width-contract sweep. */
        max-width: none;
        /* Top padding moves onto the sticky header below, so the pinned bar keeps its breathing
           room after the page's own padding has scrolled up out of the way. Bottom padding stays
           on the scroll container, where it gives the last section clearance at the end of the
           scroll. */
        padding: 0 var(--space-md) var(--space-2xl);
    }

    /* ── The pinned half ─────────────────────────────────────────────────────────────────────
       ⛔⛔ THE "smart scrolling" FIX. `.ms-overlay .ht-page` (below) is this page's scroll
       container, and until now the HEADER scrolled with it — so reading down to the loads table
       took the day arrows and Receive Fruit off the top of the pane, and changing days meant
       scrolling back up first to find the controls. Sticky pins them against the top of that
       scroller. Every sibling tab already keeps its controls out of the scroll region
       (ProjectedMain's .hd-header/.hd-scroll-area, PumpOversHarvestMain, WeightTagManager); this
       is that same contract, reached with the mechanism ManagerShell itself uses for its tab strip
       (.ms-ribbon-host).

       ⛔ Sticky rather than re-parenting the four content sections into a `.ht-body` flex child
       (Pattern 1, docs/LAYOUT-PATTERNS.md, which is the documented house shape): identical
       behaviour here for one rule instead of re-indenting ~380 lines of live harvest markup
       mid-season. The only visible difference is that the scrollbar still spans the full pane
       rather than the body alone. ⭐ If this page is ever restructured, Pattern 1 is the shape to
       move to — do not read this comment as an argument against it.

       ⛔ The background MUST be opaque, and the header's margin-bottom MUST become padding-bottom:
       a sticky element paints only its own box, so content scrolling under a transparent 16px
       margin shows through in a strip.

       ⚠ Phone deliberately gets none of this: below 768px ManagerShell hands scrolling back to the
       DOCUMENT, and a header pinned to a phone viewport would permanently occupy ~110px of it. */
    .ht-header[b-lexpumavna] {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface-default);
        margin-bottom: 0;
        padding: var(--space-md) 0 var(--space-lg);
    }

    /* ONE row: day controls left, primary action right. On a phone .ht-header-mid stays a plain
       block and the button is the full-width slab underneath it. */
    .ht-header-mid[b-lexpumavna] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-md);
    }

    .ht-daynav[b-lexpumavna] {
        /* Sized and left-aligned so the date and its escape hatch read as one control group
           instead of drifting a foot apart across a 1500px pane.

           ⛔⛔ `width`, NOT `max-width`. Measured 2026-08-22 with max-width: `justify-self: start`
           makes a grid item SHRINK-TO-FIT, so the box sized to the date TEXT and the inner
           minmax(0, 1fr) track inherited that — day nav 262px on "Saturday, August 22" vs 245px on
           "Friday, August 21", sliding the Back-to-today button 18px sideways on every day step.
           That is the same complaint this whole block exists to fix, one layer in.

           `min(26rem, 100%)` keeps the width a function of the CONTAINER on every day, and still
           cannot overflow a narrow pane (100% is the grid track). ⛔ Do not relax it back to a
           max-width. */
        width: min(26rem, 100%);
        justify-self: start;
        margin-bottom: 0;
    }

    /* Room for the LABELLED button (the phone slot is icon-width). Still a reserved minimum, so
       the geometry is identical whether or not the button is rendered. */
    .ht-daynav-backslot[b-lexpumavna] {
        min-width: 8rem;
    }

    .ht-daynav-back-text[b-lexpumavna],
    .ht-daynav-sheet-text[b-lexpumavna] {
        display: inline;
    }

    /* ── The primary action, DEMOTED ─────────────────────────────────────────────────────────
       ⛔ The 2026-08-20 treatment kept the 64px slab and the two-line sub-label and capped only
       its WIDTH at 40rem, on the reasoning that it should "look exactly as it does today, just
       centred over a wider page". Width was never the problem — a 640x64 blue slab standing
       between the tab strip and the day's data was, which is what "bigger than it needs to be"
       named. It becomes an ordinary primary button in the pinned header row.
       ⛔ The phone treatment is untouched and must stay that way — this block is min-width only,
       so narrow viewports render byte-identically to before it existed. */
    .ht-scan-btn[b-lexpumavna] {
        width: auto;
        min-height: 2.5rem;
        padding: 0 var(--space-md);
        gap: var(--space-xs);
        border-radius: var(--radius-md);
        font-size: var(--font-size-md);
        white-space: nowrap;
        /* ⛔ SEPARATION FROM THE NEXT-DAY ARROW, not decoration. Demoting this button into the
           header row put the day's primary WRITE action ~8px from a NAVIGATION control (screenshot
           2026-08-22); on the phone treatment they cannot be confused because the slab sits on its
           own row below the arrows. The arrows are meant to bracket the day — this keeps the
           action outside that bracket visually as well as functionally. */
        margin-right: var(--space-xl);
    }

    .ht-scan-btn-text[b-lexpumavna] {
        flex-direction: row;
        align-items: center;
    }

    /* ⛔ HIDDEN, never dropped. The markup puts the identical string on the button's `title`
       (ScanTargetLabel, one property feeding both), and the date that sentence names is a few
       pixels to its left in the same pinned row — so it still says "Aug 18" rather than "today"
       when you are parked on the 18th, which is the whole reason the sub-label exists. */
    .ht-scan-btn-sub[b-lexpumavna] {
        display: none;
    }

    /* ⚠ ::deep is REQUIRED here: <Icon> renders its <svg> from its own component, so a plain
       descendant selector would be rewritten with THIS component's scope id and match nothing.
       Same idiom as BottomNav.razor.css. The 28px glyph is right on a 64px slab and far too heavy
       in a 40px button; a CSS width/height beats the SVG's width/height presentation attributes,
       so the component's Size parameter does not need a viewport branch it cannot have. */
    .ht-scan-btn[b-lexpumavna]  svg {
        width: 20px;
        height: 20px;
    }
}
/* /Pages/Harvest/Ledger/ReceivingLedgerStrip.razor.rz.scp.css */
/* Compact Receiving Ledger strip — phone-first.

   The stat strip, meter and empty state are shared utilities (.nwc-statstrip, .nwc-meter,
   .nwc-empty); what is bespoke here is the row list, which has no shared equivalent at this
   density. ⛔ No horizontal scroll anywhere — on a phone a sideways-scrolling row is a row the
   user never finds. Columns collapse instead: the tag and the tonnage always survive. */

.rls[b-5qz9zywdra] {
    margin-top: var(--space-lg);
}

.rls-head[b-5qz9zywdra] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.rls-title[b-5qz9zywdra] {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.rls-link[b-5qz9zywdra] {
    font-size: var(--font-size-sm);
    text-decoration: none;
    white-space: nowrap;
}

.rls-error[b-5qz9zywdra] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border: 1px solid var(--state-danger-fg);
    border-radius: var(--radius-sm);
    background: var(--state-danger-bg);
    color: var(--state-danger-fg);
    font-size: var(--font-size-sm);
}

.rls-pending-note[b-5qz9zywdra] {
    margin: var(--space-sm) 0 0;
    color: var(--state-warning-fg);
    font-size: var(--font-size-sm);
}

.rls-rows[b-5qz9zywdra] {
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
}

/* Four fields, one line, no wrap: tag | who | tons | tank. The tag and tons are fixed-width so
   they stay in a readable column; the middle field is the one that gives up space. */
.rls-row[b-5qz9zywdra] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-2xs);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--font-size-md);
}

.rls-row:last-child[b-5qz9zywdra] {
    border-bottom: none;
}

/* Amber, never red — a tank-less receival is a complete record awaiting a later event. */
.rls-row--open[b-5qz9zywdra] {
    background: var(--state-warning-bg);
}

.rls-tag[b-5qz9zywdra] {
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold);
}

.rls-who[b-5qz9zywdra] {
    overflow: hidden;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rls-tons[b-5qz9zywdra] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rls-unit[b-5qz9zywdra] {
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
}

/* Pooled tonnage carries a marker so it never reads as this tag's own figure. */
.rls-pooled[b-5qz9zywdra] {
    color: var(--text-muted);
    font-style: italic;
}

.rls-tank[b-5qz9zywdra] {
    min-width: 4.5rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: right;
    white-space: nowrap;
}

.rls-tank--pending[b-5qz9zywdra] {
    color: var(--state-warning-fg);
    font-style: italic;
}

.rls-over[b-5qz9zywdra] {
    color: var(--state-success-fg);
}

.rls-under[b-5qz9zywdra] {
    color: var(--state-danger-fg);
}

.rls-more[b-5qz9zywdra] {
    width: 100%;
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
    color: var(--text-link);
    font-size: var(--font-size-sm);
}
/* /Pages/Harvest/Ledger/ReceivingLedgerView.razor.rz.scp.css */
/* Receiving Ledger — the wide half of the split surface.

   Scoped, minimal, tokens-only. The stat strip, empty state and sticky toolbar all come from
   shared utilities (.nwc-statstrip, .nwc-empty, .nwc-sticky-top) — nothing here re-derives them.
   What IS here is the horizontal-scroll container and the ledger-specific cell semantics, which
   have no shared equivalent. */

.rl-toolbar[b-ftem2d0ybk] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    background: var(--surface-default);
}

.rl-nav[b-ftem2d0ybk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

.rl-datepicker[b-ftem2d0ybk] {
    width: auto;
    min-width: 9.5rem;
}

.rl-title[b-ftem2d0ybk] {
    margin: 0 0 0 var(--space-sm);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.rl-body[b-ftem2d0ybk] {
    /* min-width:0 lets the scroll container below actually shrink inside a flex/grid parent —
       without it the table's intrinsic width wins and the overflow escapes to an ancestor. */
    min-width: 0;
}

/* ⛔⛔ The wide table's horizontal scroll lives HERE, on the ledger's own container.
   ManagerShell.razor.css:1-13 documents the 1366x768 blowout that follows from letting a wide
   child push the shell instead — never move this up to the shell. */
.rl-scroll[b-ftem2d0ybk] {
    max-width: 100%;
    overflow-x: auto;
}

.rl-table[b-ftem2d0ybk] {
    min-width: 60rem;      /* below this the 10 columns stop being readable — scroll instead of crush */
    font-size: var(--font-size-md);
}

.rl-table th[b-ftem2d0ybk] {
    white-space: nowrap;
}

.rl-table td[b-ftem2d0ybk] {
    vertical-align: middle;
}

/* Digits that line up down a column read as a column, not as prose. */
.rl-table td.text-end[b-ftem2d0ybk],
.rl-tag[b-ftem2d0ybk] {
    font-variant-numeric: tabular-nums;
}

/* A right-aligned column butting straight into the next left-aligned one collides in the header
   row — "Tons Tank" and "Variance Grower" read as single labels at the default .table-sm padding.
   Jeff flagged both on the first prod eyeball (2026-08-18). The trailing gutter belongs to the
   numeric columns themselves so it also separates Projected from Variance, which are adjacent and
   both right-aligned. */
.rl-table th.text-end[b-ftem2d0ybk],
.rl-table td.text-end[b-ftem2d0ybk] {
    padding-right: var(--space-md);
}

.rl-tag[b-ftem2d0ybk] {
    font-weight: var(--font-weight-semibold);
}

/* Amber, never red: a receival with no tank yet is a COMPLETE record whose destination is a
   later event. The tint marks it as open, not as wrong. */
.rl-row--open[b-ftem2d0ybk] {
    background: var(--state-warning-bg);
}

.rl-pending[b-ftem2d0ybk] {
    color: var(--state-warning-fg);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.rl-dests[b-ftem2d0ybk] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}

.rl-dest[b-ftem2d0ybk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0 var(--space-2xs);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

/* Provenance is the point of the chip — a hand-typed tank and one derived from the crush event
   must not look identical, or a late-bound field reads as missing data. */
.rl-dest--crushevent[b-ftem2d0ybk] {
    border-color: var(--state-info-fg);
    background: var(--state-info-bg);
    color: var(--state-info-fg);
}

.rl-fraction[b-ftem2d0ybk] {
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
    font-style: normal;
}

/* Tonnage still pooled across a legacy multi-tag row. Deliberately not styled as a plain number:
   it is the stored ROW's tonnage repeated on each sibling tag, so it must never read as this
   tag's own figure — nor be summed down the column. */
.rl-pooled[b-ftem2d0ybk] {
    color: var(--text-muted);
    font-style: italic;
}

.rl-pooled-of[b-ftem2d0ybk] {
    font-size: var(--font-size-2xs);
}

.rl-variance--over[b-ftem2d0ybk] {
    color: var(--state-success-fg);
}

.rl-variance--under[b-ftem2d0ybk] {
    color: var(--state-danger-fg);
}

.rl-organic[b-ftem2d0ybk] {
    margin-left: var(--space-2xs);
    padding: 0 var(--space-3xs);
    border-radius: var(--radius-sm);
    background: var(--state-success-bg);
    color: var(--state-success-fg);
    font-size: var(--font-size-2xs);
    letter-spacing: var(--letter-spacing-wide);
}

.rl-muted[b-ftem2d0ybk] {
    color: var(--text-muted);
}

.rl-times[b-ftem2d0ybk] {
    font-size: var(--font-size-sm);
    white-space: nowrap;
}

.rl-note-cell[b-ftem2d0ybk] {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rl-note[b-ftem2d0ybk] {
    margin-bottom: var(--space-sm);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.rl-collision-list[b-ftem2d0ybk] {
    padding-left: var(--space-lg);
}

.rl-stat--open[b-ftem2d0ybk] {
    border-color: var(--state-warning-fg);
    background: var(--state-warning-bg);
}

.rl-stat--attention[b-ftem2d0ybk] {
    border-color: var(--border-strong);
}

/* Self-check badge. Amber like .rl-row--open, deliberately NOT red: a ticket whose numbers disagree
   is something to LOOK AT, not a failure — and on tag 18944 the figure that turned out to be right
   was the one a red marker would have implicated. Sits on the tag because the check cannot say which
   field is wrong. */
.rl-anomaly[b-ftem2d0ybk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: var(--space-2xs);
    border-radius: 50%;
    background: var(--state-warning-bg);
    color: var(--state-warning-fg);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    cursor: help;
}

/* The badge is a button now (it opens the correction panel), so it must not inherit button chrome. */
button.rl-anomaly[b-ftem2d0ybk] {
    padding: 0;
    border: none;
    line-height: 1;
}

/* .rl-correct lives in site.css now (hoisted 2026-08-21 — CSS isolation made it invisible to
   every OTHER component's pencil, and weight-tag-edit-everywhere needs it in several). Do not
   redefine it here. */

.rl-correction-row > td[b-ftem2d0ybk] {
    padding: var(--space-sm) 0 var(--space-md);
    background: var(--surface-default);
}

/* ⭐ The booking-group header: a split delivery's variance, stated once, with its tags nested.
   Reads as a sub-total band rather than another data row — the tons and variance are the point,
   so they carry the weight and the rest recedes. */
.rl-group > td[b-ftem2d0ybk] {
    background: var(--nwc-surface-2, #f4f6f8);
    border-top: 2px solid var(--nwc-border);
    font-weight: 600;
}

.rl-group-count[b-ftem2d0ybk] {
    font-weight: 400;
    font-size: .82rem;
    color: var(--nwc-text-muted);
}

.rl-group-tons[b-ftem2d0ybk] {
    font-variant-numeric: tabular-nums;
}

/* ⛔ Not a value and not an error — a pointer. Muted and italic so it never reads as a number,
   and never as the amber "nothing here yet" state either. */
.rl-see-group[b-ftem2d0ybk] {
    font-size: .78rem;
    font-style: italic;
    color: var(--nwc-text-muted);
    white-space: nowrap;
}
/* /Pages/Harvest/Ledger/TicketCorrectionPanel.razor.rz.scp.css */
/* Correction panel for one receiving ticket. Opens inline under its ledger row, so the row it
   belongs to stays visible — a modal would hide the very table she is checking against. */

.tcp[b-l58m2i2u89] {
    padding: var(--space-md);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.tcp-head[b-l58m2i2u89] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.tcp-tag[b-l58m2i2u89] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.tcp-sub[b-l58m2i2u89] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.tcp-close[b-l58m2i2u89] {
    margin-left: auto;
}

.tcp-anoms[b-l58m2i2u89] {
    margin: 0 0 var(--space-2xs);
    padding-left: var(--space-lg);
    color: var(--state-warning-fg);
}

/* The disclaimer is not fine print: a warning marker reads as "the system says this is wrong", and
   on tag 18944 the flagged tonnage was the figure that was right. It stays at body size. */
.tcp-caveat[b-l58m2i2u89] {
    margin-bottom: var(--space-md);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* One line, not the old six-row grid: see the note in the .razor. Every pixel spent here is a
   pixel the Save button falls below the fold, and the numbers it used to list are now the seeded
   inputs. Kept because the harvest date is not duplicated anywhere else on this panel. */
.tcp-stored[b-l58m2i2u89] {
    margin: 0 0 var(--space-sm);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.tcp-stored b[b-l58m2i2u89] {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* The scan sits UNDER the form now, so let it use the full width it has. */
.tcp-scan[b-l58m2i2u89] {
    margin-top: var(--space-md);
}

.tcp-scan img[b-l58m2i2u89] {
    max-width: 22rem;
    max-height: 16rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.tcp-noscan[b-l58m2i2u89] {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-style: italic;
}

/* Server-local absolute path. Deliberately not a link — it is a drive letter mapped on the app
   server, so a browser cannot open it and a link would just fail silently. */
.tcp-path[b-l58m2i2u89] {
    margin: var(--space-2xs) 0 0;
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
    word-break: break-all;
}

.tcp-edit[b-l58m2i2u89] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.tcp-label[b-l58m2i2u89] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.tcp-field[b-l58m2i2u89] { width: auto; min-width: 11rem; }
.tcp-value[b-l58m2i2u89] { width: 10rem; }
.tcp-reason[b-l58m2i2u89] { flex: 1 1 14rem; min-width: 12rem; }

.tcp-current[b-l58m2i2u89] {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-sm);
}

.tcp-hint[b-l58m2i2u89] {
    color: var(--text-muted);
}

.tcp-msg[b-l58m2i2u89] {
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-sm);
}

.tcp-msg--ok[b-l58m2i2u89] { color: var(--state-success-fg); }
.tcp-msg--bad[b-l58m2i2u89] { color: var(--state-danger-fg); }

/* ── The weight trio ──────────────────────────────────────────────────────────────────────────
   Four boxes on one row, then the arithmetic. Deliberately plain: this sits inside a 500px drawer
   on the scale-house desktop and inside the ledger on an iPad, so it wraps rather than scrolls. */

.tcp-weights[b-l58m2i2u89] {
    margin: var(--space-sm) 0 0;
    padding: var(--space-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.tcp-weights-head[b-l58m2i2u89] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-sm);
}

.tcp-weights-note[b-l58m2i2u89] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.tcp-weights-boxes[b-l58m2i2u89] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.tcp-w[b-l58m2i2u89] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
}

.tcp-w > span[b-l58m2i2u89] { min-width: 3.1rem; }

/* Wide enough for a five-digit gondola gross without the digits scrolling out of view. */
.tcp-w input[b-l58m2i2u89] { width: 7rem; }

.tcp-w > em[b-l58m2i2u89] {
    color: var(--text-muted);
    font-style: normal;
}

.tcp-weights-checks[b-l58m2i2u89] {
    list-style: none;
    margin: var(--space-sm) 0 0;
    padding: 0;
    font-size: var(--font-size-sm);
}

.tcp-weights-checks li[b-l58m2i2u89] { margin-top: var(--space-2xs); }

.tcp-check--ok[b-l58m2i2u89] { color: var(--state-success-fg); }
.tcp-check--bad[b-l58m2i2u89] { color: var(--state-danger-fg); }

.tcp-weights-actions[b-l58m2i2u89] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}
/* /Pages/Harvest/LegAssignmentPanel.razor.rz.scp.css */
/* The in-row assignment panel.

   ⛔ It lives INSIDE a table cell that spans the row, so it must not fight the table: no absolute
   positioning, no fixed width, no transform. The whole reason this is a row rather than a drawer is
   that it stays aligned under the load it belongs to, and any of those would break that. */

.lap[b-gxja6vfhtd] {
  padding: var(--space-sm, .5rem) var(--space-md, .75rem);
  border-left: 3px solid var(--nwc-accent, #7a5c3e);
  font-size: .85rem;
}

/* ── The balance line ─────────────────────────────────────────────────────────────────────────── */

.lap-balance[b-gxja6vfhtd] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm, .5rem) var(--space-md, .75rem);
  padding-bottom: var(--space-xs, .35rem);
  border-bottom: 1px solid var(--nwc-border);
}

.lap-fig[b-gxja6vfhtd] { white-space: nowrap; }

/* The label is the quiet half — the figure is what she is reading across. */
.lap-fig-label[b-gxja6vfhtd] {
  font-size: .75em;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .65;
  margin-right: .25em;
}

.lap-fig--strong[b-gxja6vfhtd] { font-weight: 600; }
.lap-fig--muted[b-gxja6vfhtd] { opacity: .7; font-style: italic; white-space: normal; }
.lap-fig--warn[b-gxja6vfhtd] { color: var(--nwc-warn-fg, #8a5a00); white-space: normal; }

/* Over-assignment is a warning, never a block, so it must read as loud-but-permitted rather than as
   an error state that has stopped something. */
.lap-over[b-gxja6vfhtd] {
  color: var(--nwc-danger-fg, #a33);
  font-weight: 600;
  white-space: normal;
}

.lap-close[b-gxja6vfhtd] {
  margin-left: auto;
  border: 0;
  background: none;
  opacity: .6;
  cursor: pointer;
}
.lap-close:hover[b-gxja6vfhtd] { opacity: 1; }

/* ── Banners ─────────────────────────────────────────────────────────────────────────────────── */

.lap-banner[b-gxja6vfhtd],
.lap-error[b-gxja6vfhtd] {
  margin-top: var(--space-xs, .35rem);
  padding: var(--space-2xs, .25rem) var(--space-xs, .35rem);
  border-radius: 3px;
}

.lap-banner[b-gxja6vfhtd] { background: var(--nwc-ok-bg, #e8f3e8); }
.lap-error[b-gxja6vfhtd] { background: var(--nwc-danger-bg, #fbeaea); color: var(--nwc-danger-fg, #a33); }

/* ── Two sections side by side on a desk, stacked on a phone ─────────────────────────────────── */

.lap-body[b-gxja6vfhtd] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-md, .75rem);
  margin-top: var(--space-xs, .35rem);
}

@media (max-width: 900px) {
  .lap-body[b-gxja6vfhtd] { grid-template-columns: minmax(0, 1fr); }
}

.lap-h[b-gxja6vfhtd] {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .7;
  margin: 0 0 var(--space-2xs, .25rem);
}

.lap-note[b-gxja6vfhtd] { margin: 0 0 var(--space-2xs, .25rem); opacity: .85; }
.lap-note--warn[b-gxja6vfhtd] { color: var(--nwc-warn-fg, #8a5a00); font-weight: 500; }
.lap-note--quiet[b-gxja6vfhtd] { font-size: .8em; opacity: .6; }

/* ── Candidate tickets ───────────────────────────────────────────────────────────────────────── */

.lap-candidates[b-gxja6vfhtd] { list-style: none; margin: 0; padding: 0; }

/* ⛔ The promotion row shares this body deliberately — it is the same shape (a wrapping line of
   facts ending in a button), and the pre-push CSS gate ranks duplicate rule bodies, so a second copy
   would cost the push rather than buy anything. Edit the two together. */
.lap-candidate[b-gxja6vfhtd],
.lap-promote-what[b-gxja6vfhtd] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs, .25rem) var(--space-xs, .35rem);
  padding: var(--space-2xs, .25rem) 0;
  border-bottom: 1px solid var(--nwc-border-subtle, #eee);
}

.lap-cand-tag[b-gxja6vfhtd] { font-weight: 600; font-variant-numeric: tabular-nums; }
.lap-cand-tons[b-gxja6vfhtd] { font-variant-numeric: tabular-nums; }
.lap-cand-client[b-gxja6vfhtd],
.lap-cand-variety[b-gxja6vfhtd] { opacity: .7; }

/* The pooled badge takes the whole line: it is a sentence, not a chip, and truncating it would drop
   the half that says what the match actually claims. */
.lap-cand-pooled[b-gxja6vfhtd] {
  flex-basis: 100%;
  font-size: .8em;
  color: var(--nwc-warn-fg, #8a5a00);
}

.lap-match-btn[b-gxja6vfhtd] { margin-left: auto; }
.lap-match-btn[disabled][b-gxja6vfhtd] { opacity: .45; cursor: not-allowed; }

/* ⛔ 2026-08-21: armed-but-never-confirmed matches went unnoticed on prod because the only
   difference between "Match" and the pending second tap was the button's text. This makes the
   pending state impossible to mistake for done. */
.lap-match-btn--armed[b-gxja6vfhtd] {
  background: var(--nwc-warning-bg, #fff3cd);
  color: var(--nwc-warning-fg, #7a5b00);
  border-color: var(--nwc-warning-fg, #7a5b00);
  font-weight: 600;
}

/* Same full-line treatment as .lap-cand-pooled above -- the correction panel needs the whole row,
   not a shrink-to-fit sliver next to the tag/tons/client spans. */
.lap-cand-correction[b-gxja6vfhtd] { flex-basis: 100%; }

/* ── Allocation rows ─────────────────────────────────────────────────────────────────────────── */

/* ⛔ The header and the rows share one template. They drifted apart on the booking editor once and
   the columns silently stopped lining up, so keep the two selectors adjacent and edit them together. */
.lap-alloc-head[b-gxja6vfhtd],
.lap-alloc[b-gxja6vfhtd] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 6rem 2rem;
  align-items: center;
  gap: var(--space-2xs, .25rem);
}

.lap-alloc-head[b-gxja6vfhtd] {
  font-size: .75em;
  text-transform: uppercase;
  letter-spacing: .04em;
  opacity: .6;
}

.lap-alloc[b-gxja6vfhtd] { padding: var(--space-2xs, .25rem) 0; }

.lap-alloc-tank[b-gxja6vfhtd] { font-weight: 600; }

/* Capacity is a hint, never a judgement — the panel prints it only when the roster actually knows
   one (0 is that table's "unknown", not a real zero). */
.lap-alloc-cap[b-gxja6vfhtd] {
  margin-left: .4em;
  font-size: .75em;
  font-weight: 400;
  opacity: .6;
}

.lap-alloc-plan[b-gxja6vfhtd] {
  font-variant-numeric: tabular-nums;
  opacity: .7;
  text-align: right;
}

/* The recorded actual, read-only since 2026-08-21 — full-weight where the plan beside it is
   dimmed, because the actual is the figure this section exists to show. */
.lap-alloc-actual[b-gxja6vfhtd] {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

/* ── Fermentation tonnage ────────────────────────────────────────────────────────────────────── */

/* Full width beneath both columns of .lap-body. The line is one sentence with two numbers in it
   ("Booked 18 t → Weighed 18.02 t"); squeezed into a half-width column it wraps so that each half
   reads as a standalone figure, which is the one misreading this surface cannot afford. */
.lap-promote[b-gxja6vfhtd] { grid-column: 1 / -1; }

/* The rest of the row body is shared with .lap-candidate above; only the digits differ, and they
   line up under each other so two groupings can be compared at a glance. */
.lap-promote-what[b-gxja6vfhtd] { font-variant-numeric: tabular-nums; }
/* /Pages/Harvest/PumpoverSheets/PumpoverSheetCard.razor.rz.scp.css */
/* One read pumpover sheet: the upright photo beside its planned InnoVint actions. The Tank and
   Status cells are child components (PumpoverSheetTankCell / PumpoverSheetStatusCell), styled from
   here through ::deep so no rule is repeated in a second file. */

.pss-sheet[b-3x5jh1ofjt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--space-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-default);
}

.pss-sheet-head[b-3x5jh1ofjt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
}

.pss-sheet-title[b-3x5jh1ofjt] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
}

.pss-sheet-actions[b-3x5jh1ofjt] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-left: auto;
}

/* Photo left, grid right. The photo is the evidence the reviewer checks every row against, so it
   keeps a real share of the width; the grid takes two thirds so a full action name fits beside it
   (measured 1536x695 CSS px, Chrome, 2026-10-01: at 2fr/3fr the grid got 736 px and cut
   "Pumpover, Tub & Screen" to "Pumpover,"). Click the photo to read it full width. */
.pss-split[b-3x5jh1ofjt] {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr);
    gap: var(--space-sm);
    align-items: start;
}

/* Clicked photo: full width above the grid, big enough to read a handwritten time. */
.pss-split.pss-zoomed[b-3x5jh1ofjt] {
    grid-template-columns: minmax(0, 1fr);
}

.pss-preview[b-3x5jh1ofjt] {
    position: sticky;
    top: var(--space-xs);
    margin: 0;
}

.pss-zoomed .pss-preview[b-3x5jh1ofjt] {
    position: static;
}

.pss-preview img[b-3x5jh1ofjt] {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: zoom-in;
}

.pss-zoomed .pss-preview img[b-3x5jh1ofjt] {
    cursor: zoom-out;
}

.pss-grid-wrap[b-3x5jh1ofjt] {
    min-width: 0;
}

.pss-header-edit[b-3x5jh1ofjt] {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
}

/* ⛔ The grid's horizontal scroll lives here, on its own container — never let a wide table push
   ManagerShell (ManagerShell.razor.css documents the 1366x768 blowout that follows). */
.pss-scroll[b-3x5jh1ofjt] {
    max-width: 100%;
    overflow-x: auto;
}

.pss-grid[b-3x5jh1ofjt] {
    min-width: 44rem;
}

.pss-grid td[b-3x5jh1ofjt] {
    vertical-align: top;
}

.pss-grid tbody + tbody[b-3x5jh1ofjt] {
    border-top: 2px solid var(--border-default);
}

.pss-col-tick[b-3x5jh1ofjt] {
    width: 2rem;
}

.pss-col-tank[b-3x5jh1ofjt] {
    width: 10rem;
}

/* The InnoVint action name, with its details stacked beneath: one column, so both get its full
   width instead of two cramped ones. */
.pss-details[b-3x5jh1ofjt] {
    margin-top: var(--space-3xs);
}

.pss-col-time[b-3x5jh1ofjt] {
    width: 6.5rem;
}

.pss-col-status[b-3x5jh1ofjt] {
    width: 10rem;
}

.pss-grid[b-3x5jh1ofjt]  .pss-vessel {
    font-weight: var(--font-weight-semibold);
}

.pss-skipped td[b-3x5jh1ofjt] {
    color: var(--text-muted);
    background: var(--surface-muted);
}

.pss-skipped[b-3x5jh1ofjt]  .pss-vessel {
    text-decoration: line-through;
}

.pss-grid[b-3x5jh1ofjt]  .pss-flag {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.pss-grid[b-3x5jh1ofjt]  .pss-flag .bi {
    color: var(--bs-warning);
}

.pss-grid[b-3x5jh1ofjt]  .pss-resolve,
.pss-grid[b-3x5jh1ofjt]  .pss-row-edit,
.pss-grid[b-3x5jh1ofjt]  .pss-row-edit-times {
    display: flex;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
}

.pss-grid[b-3x5jh1ofjt]  .pss-row-edit {
    flex-direction: column;
}

@media (max-width: 767.98px) {
    .pss-split[b-3x5jh1ofjt] {
        grid-template-columns: minmax(0, 1fr);
    }

    .pss-preview[b-3x5jh1ofjt] {
        position: static;
    }
}
/* /Pages/Harvest/PumpoverSheets/PumpoverSheetsView.razor.rz.scp.css */
/* Pumpover sheets tab — the page around the sheet cards. Scoped, tokens only; the empty state and
   sticky bar come from the shared .nwc-empty / .nwc-sticky-top utilities. */

/* position: relative makes this scroll box the containing block for absolutely positioned
   descendants. Without it the card table's visually-hidden "Send" header (Bootstrap
   .visually-hidden = position:absolute) resolved against .page, escaped this box's overflow clip
   and stretched the DOCUMENT to the furthest card, so the wheel scrolled the whole window, sidebar
   and all, leaving a blank band below. Measured in Jeff's Chrome on prod Blue (1536x695 CSS px,
   DPR 1.25, synthetic 3000 px block): document scrollHeight 3434 -> 695 with this rule. */
.pss-view[b-fmttym5v4e] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    padding: var(--space-sm) 0;
}

.pss-title[b-fmttym5v4e] {
    margin: 0 0 var(--space-2xs);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.pss-upload[b-fmttym5v4e] {
    max-width: 48rem;
}

.pss-jobs[b-fmttym5v4e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    margin: 0;
}

/* The one-press "send everything" bar stays in reach while the reviewer scrolls the sheets. */
.pss-sendbar[b-fmttym5v4e] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-default);
}
/* /Pages/Harvest/QuickReceiveScanPanel.razor.rz.scp.css */
/* QuickReceiveScanPanel — scan → match verdict, side by side with the scanned tag.
   The shared vocabulary lives in site.css and is reused rather than re-declared:
   .nwc-scan-split-doc (the sticky document pane + its ≤900px collapse), .nwc-scan-chip,
   .nwc-scan-review-headline, .nwc-scan-warning, .nwc-match-score*, .nwc-match-reason-chip.
   ⚠ The split GRID stays scoped on purpose — this panel puts the document on the LEFT at 4fr/5fr,
   ReceiveFruitPanel puts it on the right at 5fr/4fr. That difference is real; the sticky pane's
   was not, which is why only the pane was hoisted. */

/* Query container for the split below. This panel is a 90%-wide SlidingPanel overlay, so on a
   phone it is ~100% of a 390px viewport and on a laptop it is ~1200px — the split must respond to
   the PANEL's rendered width, not the viewport's. Container query, not a media query, for the same
   reason ReceiveFruitPanel switched (a viewport query gets both directions wrong). */
.qrs-panel[b-sxp2clkgo2] {
    container-type: inline-size;
    container-name: qrs-panel;
    padding-bottom: var(--space-md);
}

/* Same protection as ReceiveFruitPanel's .rf-entry-fields: the sticky .nwc-scan-split-doc pane below
   is positioned (z-index:0 in site.css) and would otherwise paint over this control once the panel
   body scrolls.
   ⚠ Same token dependency as ReceiveFruitPanel's .rf-entry-fields: needs --z-base >= 1
   (tokens.css:242, currently 1). At 0 it ties the pane and loses on DOM order, silently. */
.qrs-scan-control[b-sxp2clkgo2] {
    position: relative;
    z-index: var(--z-base, 1);
}

.qrs-scan-split[b-sxp2clkgo2] {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(300px, 5fr);
    gap: var(--space-md);
    align-items: start;
    margin-top: var(--space-sm);
}

.qrs-scan-split-verdict[b-sxp2clkgo2] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

/* The sticky document pane itself is .nwc-scan-split-doc in site.css — shared with
   ReceiveFruitPanel, including the ≤900px collapse-and-hoist. Only panel-specific bits below. */

.qrs-scan-doc-head[b-sxp2clkgo2] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--font-size-sm);
}

.qrs-scan-doc-title[b-sxp2clkgo2] {
    font-weight: 600;
}

.qrs-scan-doc-frame[b-sxp2clkgo2] {
    width: 100%;
    height: clamp(360px, 60vh, 820px);
    border: 1px solid var(--bs-gray-300);
    border-radius: var(--radius-md, 6px);
    background: var(--bs-gray-100);
}

.qrs-reading[b-sxp2clkgo2] {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.qrs-verdict[b-sxp2clkgo2] {
    border: 1px solid var(--bs-gray-300);
    border-radius: var(--radius-md, 6px);
    padding: var(--space-sm);
}

.qrs-verdict-head[b-sxp2clkgo2] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: 600;
    margin-bottom: var(--space-2xs);
}

.qrs-match-summary[b-sxp2clkgo2] {
    margin-bottom: var(--space-2xs);
}

/* Phone-first: full-width stacked taps, gloves on. Widens to a row once the panel has room. */
.qrs-verdict-actions[b-sxp2clkgo2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-top: var(--space-xs);
}

@container qrs-panel (min-width: 520px) {
    .qrs-verdict-actions[b-sxp2clkgo2] {
        flex-direction: row;
    }
}

/* Under ~900px of PANEL width the split collapses to one column.
   The document goes BELOW the verdict here — this panel deliberately opts OUT of the shared
   `order: -1` hoist in site.css. That hoist is right for ReceiveFruitPanel, where the pane sits
   above a long form you fill in FROM the document. It is wrong here, where the thing below the
   pane is the verdict and the action buttons.
   Live failure, prod phone 2026-08-02: with the document on top, a 300px PDF <iframe> consumed
   the fold and — because an iOS PDF iframe swallows touch-scroll — the crew could not drag past
   it. The extracted chips and "Find & link it now" were rendering correctly the whole time and
   were simply unreachable. Putting the verdict first means the actionable content is above the
   fold and nothing has to be scrolled THROUGH to reach it; the photo stays one scroll below.
   Do not "fix" this by making the iframe pointer-events:none — that would kill scrolling to
   page 2 inside the PDF, which is how the crew checks the grower delivery tag. */
@container qrs-panel (max-width: 900px) {
    .qrs-scan-split[b-sxp2clkgo2] {
        grid-template-columns: 1fr;
    }

    .qrs-scan-split-verdict[b-sxp2clkgo2] {
        order: -1;
    }

    .nwc-scan-split-doc[b-sxp2clkgo2] {
        order: 0;
    }

    .qrs-scan-doc-frame[b-sxp2clkgo2] {
        height: 300px;
    }
}

/* ── The weight gate (2026-08-19) ────────────────────────────────────────────────────────────
   Deliberately NOT .qrs-verdict: a verdict answers "which load is this", and this answers
   "is the number on the tag real". Reading as a different KIND of thing is the point — it
   sits above whichever verdict is showing and must not look like one of them. */
.qrs-weight-gate[b-sxp2clkgo2] {
    border: 1px solid var(--bs-danger);
    border-left-width: 4px;
    border-radius: var(--radius-md, 6px);
    padding: var(--space-sm);
    margin-bottom: var(--space-xs);
}

/* ── What the reader flagged about itself ────────────────────────────────────────────────────
   Same shape as .qrs-weight-gate, warning rather than danger, because it is a prompt to look
   and not a gate — the colour is the only thing carrying that distinction on a phone held at
   arm's length, so it must not read as another hard stop. */
.qrs-reader-flags[b-sxp2clkgo2] {
    border: 1px solid var(--bs-warning);
    border-left-width: 4px;
    border-radius: var(--radius-md, 6px);
    padding: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.qrs-flag-list[b-sxp2clkgo2] {
    list-style: none;
    padding-left: 0;
}

.qrs-flag-field[b-sxp2clkgo2] {
    font-weight: 600;
}

.qrs-flag-level[b-sxp2clkgo2] {
    color: var(--text-muted);
    font-size: 0.875em;
}

/* ── The candidate short list ────────────────────────────────────────────────────────────── */
.qrs-verdict-choose > .qrs-candidate + .qrs-candidate[b-sxp2clkgo2] {
    margin-top: var(--space-2xs);
}

/* A <button>, not a clickable <div>: the whole row is the tap target on a phone, with gloves
   on, and it has to be keyboard- and screen-reader-reachable for the desktop staff surface.
   The reset below is what makes a button stop looking like one. */
.qrs-candidate[b-sxp2clkgo2] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    text-align: left;
    background: none;
    border: 1px solid var(--bs-gray-300);
    border-radius: var(--radius-md, 6px);
    padding: var(--space-xs) var(--space-sm);
    /* Phone-first: comfortably past the 44px minimum tap target, unprompted. */
    min-height: 3rem;
}

.qrs-candidate:hover:not(:disabled)[b-sxp2clkgo2],
.qrs-candidate:focus-visible[b-sxp2clkgo2] {
    border-color: var(--bs-blue);
}

.qrs-candidate:disabled[b-sxp2clkgo2] {
    opacity: 0.6;
}

.qrs-candidate-main[b-sxp2clkgo2] {
    flex: 1 1 auto;
    min-width: 0;
}

.qrs-candidate-title[b-sxp2clkgo2] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-wrap: wrap;
}

/* Fixed-width so the bars line up into a comparable column — the whole value of showing a
   ranked list is being able to see the ranking at a glance, which a ragged edge destroys. */
.qrs-candidate-score[b-sxp2clkgo2] {
    flex: 0 0 4.5rem;
    text-align: center;
}

/* ── Editable weights (2026-08-27) ────────────────────────────────────────────────────────────
   Sized for the scale house: she works on a desktop with a webcam, standing, often with the
   paper tag in one hand. Boxes are wide enough for a 5-digit weight without scrolling and tall
   enough to hit without aiming. */
.qrs-weights[b-sxp2clkgo2] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-xs);
    flex-wrap: wrap;
    margin-bottom: var(--space-2xs);
}

.qrs-weight[b-sxp2clkgo2] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
}

.qrs-weight-label[b-sxp2clkgo2] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

.qrs-weight input[b-sxp2clkgo2] {
    width: 7.5rem;
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    padding-block: 0.4rem;
}

.qrs-weight-tons[b-sxp2clkgo2] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    padding-bottom: 0.5rem;
    white-space: nowrap;
}

.qrs-weight-calc[b-sxp2clkgo2] {
    margin-bottom: 0.25rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The common-tare helper. Deliberately quiet — it is a suggestion, and a mixed-bin load that
   matches no CT is ordinary, not an error. Nothing here is styled as an alarm. */
.qrs-ct-helper[b-sxp2clkgo2] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
    padding: var(--space-2xs) var(--space-xs);
    margin-bottom: var(--space-xs);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-2, rgba(127, 127, 127, 0.08));
    font-size: 0.9rem;
}

.qrs-ct-math[b-sxp2clkgo2] {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.qrs-ct-warn[b-sxp2clkgo2] {
    color: var(--warning-text, #8a5a00);
    font-variant-numeric: tabular-nums;
}

.qrs-ct-note[b-sxp2clkgo2] {
    opacity: 0.65;
    font-size: 0.82rem;
    flex-basis: 100%;
}
/* /Pages/Harvest/ReceiveUnscheduledFruitPanel.razor.rz.scp.css */
/* Accept-dock-fruit minimal identity picker. A simple vertical field stack; the heavy lifting
   (recording the weigh tag) happens in ReceiveFruitPanel, which the parent opens on submit. */
.adf-panel[b-ljoym76mcn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.adf-lead[b-ljoym76mcn] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

/* Fields converged onto the shared form system 2026-08-09 (step 3 of the style-panel
   extraction): .nwc-form-field / .nwc-form-hint / .nwc-form-actions in site.css replaced the
   bespoke .adf-field / .adf-label / .adf-optional / .adf-actions — dupes of the shared pattern. */

/* Scan affordance + suggest-and-confirm match hint. */
.adf-scanning[b-ljoym76mcn] {
    font-weight: var(--font-weight-regular, 400);
    color: var(--text-secondary);
    font-style: italic;
}

.adf-hint[b-ljoym76mcn] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.3;
}

.adf-match[b-ljoym76mcn] {
    font-size: var(--font-size-xs);
    line-height: 1.3;
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
}

.adf-match-strong[b-ljoym76mcn] {
    color: var(--color-success-fg, #14532d);
    background: var(--color-success-bg, #dcfce7);
}

.adf-match-fuzzy[b-ljoym76mcn] {
    color: var(--color-warning-fg, #854d0e);
    background: var(--color-warning-bg, #fef9c3);
}

.adf-match-none[b-ljoym76mcn] {
    color: var(--text-secondary);
    background: var(--surface-muted);
}
/* /Pages/Harvest/ReconcileUnscheduledPanel.razor.rz.scp.css */
/* Reconcile-unscheduled panel: mode toggle (Promote / Merge) over a small field stack. */
.ru-panel[b-m8fczlmloh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ru-lead[b-m8fczlmloh] {
    margin: 0;
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.ru-mode[b-m8fczlmloh] {
    display: flex;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border-default);
    padding-bottom: var(--space-sm);
}

.ru-mode-btn[b-m8fczlmloh] {
    flex: 1 1 0;
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.ru-mode-btn.active[b-m8fczlmloh] {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
    font-weight: var(--font-weight-semibold);
}

.ru-mode-btn:disabled[b-m8fczlmloh] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ru-hint[b-m8fczlmloh],
.ru-empty[b-m8fczlmloh] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

/* Fields converged onto the shared form system 2026-08-09 (step 3 of the style-panel
   extraction): .nwc-form-field / .nwc-form-hint / .nwc-form-actions in site.css replaced the
   bespoke .ru-field / .ru-label / .ru-optional / .ru-actions — the last two were exact dupes
   of the shared pattern. */

.ru-suggested-hint[b-m8fczlmloh] {
    font-size: var(--font-size-xs, var(--font-size-sm));
    color: var(--accent-primary);
    font-weight: var(--font-weight-medium);
}

/* /Pages/Harvest/Reports/CrushWorksheetPanel.razor.rz.scp.css */
/* Drawer chrome only. The document's own styling travels INSIDE the iframe's srcdoc — nothing
   here can reach it, and nothing here should try. */

.cwp-frame[b-qpmscqr3ub] {
    display: block;
    width: 100%;
    /* The sheet is letter portrait and the drawer body scrolls, so give the frame the page's own
       proportion rather than a guessed pixel height: a short day then leaves no dead band and a
       long one scrolls inside the drawer instead of clipping. */
    aspect-ratio: 8.5 / 11;
    min-height: 60vh;
    border: 1px solid var(--nwc-border);
    background: #fff;
}
/* /Pages/Harvest/Reports/HarvestReconciliation.razor.rz.scp.css */
/* Page chrome only. The document's own styling lives INLINE in
   HarvestReconciliationPrintView.razor — it must, because that component is also rendered out of
   circuit for the PDF, where this isolated stylesheet is not linked. Nothing here may style the
   ledger itself. */

.hrr-page[b-y74do2xqds] {
    padding: 0.75rem 1rem 2rem;
}

.hrr-page-bar[b-y74do2xqds] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--nwc-border);
}

@media print {
    /* window.print() prints the ledger, not the toolbar. */
    .hrr-page[b-y74do2xqds] { padding: 0; }
    .hrr-page-bar[b-y74do2xqds] { display: none !important; }
}
/* /Pages/Harvest/TicketTankMarker.razor.rz.scp.css */
/* Scoped to the destination-conflict marker. Tokens only.
   The loud form is site.css's .nwc-chip.nwc-chip--warning (Pattern 15 — prefer it for any new
   read-only status pill); the rules here only give the quiet forms their type and tune the chip's
   cursor. Deliberately few declarations: cross-file duplicate bodies are what the pre-push drift
   gate counts. */

/* The quiet readings inherit the host's type by default — inside the Received cell's xs sub-line
   they must read as part of it. Tabular digits so a column of tank numbers lines up. */
.ttm-ticket[b-fwxyx5bwng],
.ttm-alloc[b-fwxyx5bwng] {
    font-variant-numeric: tabular-nums;
}

/* On the scan row and in the allocator header (the ticket-led surfaces) the quiet forms take the
   row's descriptor size — what the bare .ht-scan-tank span had before it was replaced. */
.ttm--row[b-fwxyx5bwng] {
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

/* The loud reading: the chip's own colours, plus the help cursor because the title is where the
   two remedies live. Same footprint as .ht-scan-weightflag beside it, so the row does not grow. */
.ttm-conflict[b-fwxyx5bwng] {
    cursor: help;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Harvest/UnscheduledReceivals.razor.rz.scp.css */
/* "Needs a booking" queue table. */
.ur-page[b-8m45i9ezby] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
}

.ur-header[b-8m45i9ezby] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.ur-title[b-8m45i9ezby] {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

.ur-sub[b-8m45i9ezby] {
    margin: var(--space-2xs) 0 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    max-width: 60ch;
}

/* Right-side header cluster: vintage filter + the Receive Unscheduled Fruit action, grouped so
   they stay together opposite the title/blurb. */
.ur-header-actions[b-8m45i9ezby] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 0 0 auto;
}

.ur-vintage[b-8m45i9ezby] {
    flex: 0 0 auto;
    width: auto;
}

.ur-empty[b-8m45i9ezby],
.ur-empty-state[b-8m45i9ezby] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.ur-empty-state[b-8m45i9ezby] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xl) var(--space-md);
    text-align: center;
}

.ur-empty-state i[b-8m45i9ezby] {
    font-size: 2rem;
    color: var(--accent-primary);
}

.ur-table[b-8m45i9ezby] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.ur-table thead th[b-8m45i9ezby] {
    text-align: left;
    padding: var(--space-sm);
    border-bottom: 2px solid var(--border-default);
    color: var(--text-secondary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ur-table tbody td[b-8m45i9ezby] {
    padding: var(--space-sm);
    border-bottom: 1px solid var(--border-default);
    color: var(--text-primary);
    vertical-align: middle;
}

.ur-num[b-8m45i9ezby] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.ur-actions-col[b-8m45i9ezby] {
    text-align: right;
    white-space: nowrap;
}

.ur-unidentified[b-8m45i9ezby] {
    background: var(--surface-muted);
}

.ur-flag[b-8m45i9ezby] {
    display: inline-block;
    margin-left: var(--space-xs);
    padding: 0 var(--space-xs);
    border-radius: var(--radius-sm);
    background: var(--warning-bg, #fff3cd);
    color: var(--warning-text, #856404);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
/* /Pages/Harvest/WeightTagBulkUploadPanel.razor.rz.scp.css */
.wtb-panel[b-rb14xjuewa] {
    padding: var(--space-lg);
}

.wtb-drop-area[b-rb14xjuewa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    border: 2px dashed var(--hvt-bulk-bar-border);
    border-radius: var(--radius-xl);
    background: var(--accent-preview-bg);
    text-align: center;
    transition: border-color var(--transition-default), background var(--transition-default);
}

.wtb-drop-area:hover[b-rb14xjuewa] {
    border-color: var(--indigo-400);
    background: var(--hvt-bulk-bar-bg);
}

.wtb-drop-icon[b-rb14xjuewa] {
    font-size: 2.5rem;
    color: var(--indigo-400);
    margin-bottom: var(--space-md);
}

.wtb-file-scroll[b-rb14xjuewa] {
    max-height: 300px;
    overflow-y: auto;
}

.wtb-review[b-rb14xjuewa] {
    overflow-x: auto;
}
/* /Pages/Harvest/WeightTagDocumentPanel.razor.rz.scp.css */
/* Fills whatever chrome it is given: its own SlidingPanel when standalone, a section of the link
   dialog when embedded. Height is the only thing that differs, and it is set by the wrapper. */
.wtd-body[b-gg3eeqq0rz] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}

.wtd-frame-wrap[b-gg3eeqq0rz] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.wtd-head[b-gg3eeqq0rz] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-xs);
}

/* min-height, not height: an <iframe> in a flex column collapses to its content otherwise, and a
   collapsed PDF viewer reads as "the document failed to load". 60vh keeps a phone usable. */
.wtd-frame[b-gg3eeqq0rz] {
    flex: 1 1 auto;
    width: 100%;
    min-height: 60vh;
    border: 1px solid var(--bs-gray-300);
    border-radius: var(--radius-md, 6px);
}
/* /Pages/Harvest/WeightTagManager.razor.rz.scp.css */
/* Weight Tag Manager shell (harvest-hdr p2c). Viewport-lock column: the sub-view tab bar stays
   fixed while the active view (its own .nwc-list-page, height:95vh + overflow:hidden) shrinks to
   fill the body — the same flex-item-shrinks-to-fit behavior that lets .nwc-list-page sit inside
   ManagerShell's overlay. Tab-bar styling comes from the shared .nwc-tab-bar / .nwc-tab utilities
   in site.css (Pattern 14); only the layout scaffold is scoped here. */
.wtm-page[b-l835r6s3ar] {
    display: flex;
    flex-direction: column;
    height: 95vh;
    overflow: hidden;
    gap: var(--space-sm);
}

.wtm-tabs[b-l835r6s3ar] {
    flex: 0 0 auto;
}

.wtm-body[b-l835r6s3ar] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* /Pages/Harvest/WeightTagOrphans.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   WeightTagOrphans.razor.css — Scoped styles for /harvest/weighttag-orphans

   Shares the same design language as WeightTags.razor.css (wt-* classes).
   These rules are duplicated rather than extracted to a shared sheet because
   Blazor scoped CSS does not apply across components.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header: auto-height, never scrolls ── */
.wt-header[b-e7jpgwt7eq] {
    flex-shrink: 0;
    padding-bottom: var(--space-2xs);
}

/* ── Dashboard cards ── */

/* .wt-card base + :hover absorbed into global .nwc-card in site.css. Sub-elements + modifiers remain below. */

/* .wt-card-* sub-elements + --warning modifier absorbed into global .nwc-card-* in site.css. */

/* ── Detail sections (used in SlidingPanel) ── */
[b-e7jpgwt7eq] .wt-detail-section {
    margin-bottom: var(--space-xl);
}

/* ── Scanned-document thumbnail (evidence panel) ── */
[b-e7jpgwt7eq] .wt-scan-thumb-img {
    display: block;
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    border: 1px solid var(--nwc-border);
    border-radius: 4px;
    background: var(--bs-gray-100);
    cursor: zoom-in;
}


/* ── Responsive ── */
@media (max-width: 900px) {
    .wt-cards[b-e7jpgwt7eq] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .wt-cards[b-e7jpgwt7eq] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .wt-card[b-e7jpgwt7eq] {
        padding: var(--space-sm) 0.625rem;
    }

    .wt-card-number[b-e7jpgwt7eq] {
        font-size: var(--font-size-xl);
    }
}
/* /Pages/Harvest/WeightTags.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   WeightTags.razor.css — Scoped styles for /harvest/weighttags

   LAYOUT PATTERN (matches Index 96vh, BulkMain 95vh, Equipment 95vh, etc.)
   ┌─────────────────────────────────────────────┐
   │ .wt-page          95vh, flex-col, no scroll │
   │ ┌─────────────────────────────────────────┐ │
   │ │ .wt-header      shrink-0, auto height   │ │
   │ │  ├ title + vintage selector              │ │
   │ │  ├ dashboard cards                       │ │
   │ │  ├ collapsible summaries                 │ │
   │ │  └ bulk actions bar (conditional)        │ │
   │ └─────────────────────────────────────────┘ │
   │ ┌─────────────────────────────────────────┐ │
   │ │ .wt-grid-area   flex:1, overflow-y:auto │ │
   │ │  └ NwcDataGrid (scrolls here)           │ │
   │ └─────────────────────────────────────────┘ │
   └─────────────────────────────────────────────┘

   WHY 95vh: MainLayout's <article class="content"> has padding-top: 1.1rem
   (site.css) and the .custom class overrides horizontal padding. The parent
   chain (main, article) has NO height constraints — height:100% won't work.
   Using 95vh directly bypasses the parent chain entirely. This is the proven
   pattern used across the codebase.

   AI NOTE: Do NOT use height:100% on .wt-page. The parent article/main have
   no explicit height so 100% resolves to auto. Always use vh units.
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Header: auto-height, never scrolls ── */
.wt-header[b-drzvbkyyxm] {
    flex-shrink: 0;
    padding-bottom: var(--space-2xs);
}

/* ── Grid area: fills remaining space, ONLY scrollbar on the page ── */
/* ═══════════════════════════════════════════════════════════════════════════
   Header components
   ═══════════════════════════════════════════════════════════════════════════ */


.wt-vintage-select[b-drzvbkyyxm] {
    width: 120px;
    font-size: 0.875rem;
}

/* ── Dashboard cards ── */

/* .wt-card base + :hover absorbed into global .nwc-card in site.css. Sub-elements + modifiers remain below. */

/* .wt-card-icon base absorbed into global .nwc-card-icon. */

.wt-card-icon--organic[b-drzvbkyyxm] {
    background: rgba(var(--green-500-rgb), 0.1);
    color: var(--green-500);
}

.wt-card-icon--scan[b-drzvbkyyxm] {
    background: var(--hvt-card-icon-scan-bg);
    color: var(--hvt-card-icon-scan-fg);
}

.wt-card--warning[b-drzvbkyyxm] {
    background: linear-gradient(135deg, var(--amber-50) 0%, var(--amber-100) 100%);
    border-color: var(--amber-300);
}

/* .wt-card-icon--warning consolidated to global .nwc-card-icon--warning. */

.wt-card--active[b-drzvbkyyxm] {
    outline: 2px solid var(--amber-600);
    outline-offset: -2px;
}

.wt-card--coverage-green[b-drzvbkyyxm] {
    background: linear-gradient(135deg, var(--hvt-coverage-green-bg-start) 0%, var(--hvt-coverage-green-bg-end) 100%);
    border-color: var(--hvt-coverage-green-border);
}

.wt-card--coverage-yellow[b-drzvbkyyxm] {
    background: linear-gradient(135deg, var(--amber-50) 0%, var(--amber-100) 100%);
    border-color: var(--amber-300);
}

.wt-card--coverage-red[b-drzvbkyyxm] {
    background: linear-gradient(135deg, var(--hvt-coverage-red-bg-start) 0%, var(--hvt-coverage-red-bg-end) 100%);
    border-color: var(--hvt-coverage-red-border);
}

.wt-card-icon--coverage[b-drzvbkyyxm] {
    background: rgba(var(--green-500-rgb), 0.1);
    color: var(--green-500);
}

.wt-card--coverage-yellow .wt-card-icon--coverage[b-drzvbkyyxm] {
    background: var(--hvt-icon-coverage-yellow-bg);
    color: var(--amber-600);
}

.wt-card--coverage-red .wt-card-icon--coverage[b-drzvbkyyxm] {
    background: var(--hvt-coverage-red-icon-bg);
    color: var(--hvt-coverage-red-icon-fg);
}

/* .wt-card-body / -number / -label absorbed into global .nwc-card-*. */

.wt-pct-badge[b-drzvbkyyxm] {
    display: inline-block;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
    background: rgba(var(--green-500-rgb), 0.12);
    color: var(--green-500);
    vertical-align: middle;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Collapsible summaries ── */
.wt-summaries[b-drzvbkyyxm] {
    display: flex;
    gap: var(--space-xl);
    margin-bottom: var(--space-sm);
}

.wt-summaries details[b-drzvbkyyxm] {
    flex: 1;
    min-width: 0;
}

.wt-summaries summary:hover[b-drzvbkyyxm] {
    color: var(--slate-800);
}

.wt-summary-table[b-drzvbkyyxm] {
    font-size: 0.8rem;
    margin-top: var(--space-2xs);
}

.wt-summary-table thead th[b-drzvbkyyxm] {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--slate-400);
    border-bottom-width: 1px;
    font-weight: var(--font-weight-semibold);
}

.wt-summary-table td[b-drzvbkyyxm] {
    padding: 0.2rem var(--space-sm);
    border: none;
}

/* ── Bulk actions bar ── */
.wt-bulk-bar[b-drzvbkyyxm] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    padding: var(--space-xs) 0.625rem;
    background: var(--hvt-bulk-bar-bg);
    border: 1px solid var(--hvt-bulk-bar-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-sm);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Grid & detail panel overrides (::deep for child component styling)

   NwcDataGrid sets NO height on .nwc-datagrid or .table-desktop.
   We must propagate the height constraint from .wt-grid-area down
   through the component tree so the table scrolls inside the grid
   area instead of growing to full content height.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Force NwcDataGrid to fill its parent and scroll internally */
[b-drzvbkyyxm] tr.selected-row {
    background-color: var(--hvt-selected-row-bg) !important;
}

[b-drzvbkyyxm] .wt-detail {
    padding: var(--space-md);
}

[b-drzvbkyyxm] .wt-detail-section {
    margin-bottom: var(--space-xl);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .wt-cards[b-drzvbkyyxm] {
        grid-template-columns: repeat(2, 1fr);
    }

    .wt-summaries[b-drzvbkyyxm] {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

/* ── Thumbnail previews ── */
[b-drzvbkyyxm] .wt-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--slate-200);
    cursor: pointer;
}

[b-drzvbkyyxm] .wt-detail-preview {
    text-align: center;
}

[b-drzvbkyyxm] .wt-preview-img {
    max-width: 100%;
    max-height: 400px;
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-200);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 576px) {
    .wt-cards[b-drzvbkyyxm] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .wt-card[b-drzvbkyyxm] {
        padding: var(--space-sm) 0.625rem;
    }

    .wt-card-number[b-drzvbkyyxm] {
        font-size: var(--font-size-xl);
    }
}
/* /Pages/Harvest/WeightTagTankAllocator.razor.rz.scp.css */
/* Scoped to the scan-row tank editor. Tokens only — no bespoke colours.
   ⛔ No z-index here: this component renders no overlay.
   ⚠ DENSE ON PURPOSE (Jeff, 2026-08-21): no title row, no table — one wrapping control line so
   several open tags fit on screen without scrolling. Tank codes run ~6 chars, so the picker is
   narrow. */

.wtta[b-le1627e9xg] {
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-left: 3px solid var(--bs-blue);
    background: var(--bs-gray-100);
}

/* One wrapping line for load + controls (Jeff, 2026-08-21: save the vertical space) —
   the controls sit to the RIGHT of the load name and wrap under it only when narrow. */
/* ⭐ TOP-aligned, not centre-aligned (Jeff, 2026-09-07: "Load on left tanks/tons on right").
   The two columns were always side by side, but centring them made a 3-line split stack push the
   load name down into the middle of the group, which reads as the load belonging to the second
   tank. Anchoring both columns at the top keeps the load where it is on an unsplit row, so the
   list does not appear to reflow when one tag happens to split. */
.wtta-line[b-le1627e9xg] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-1, 4px) var(--space-3, 12px);
}

/* The load column keeps its own baseline: its label and select still sit on one line, and only the
   tank column grows downward. */
.wtta-leg[b-le1627e9xg] {
    padding-top: 2px;
}

.wtta-leg[b-le1627e9xg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
}

.wtta-label[b-le1627e9xg] {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-gray-600);
}

.wtta-leg-fixed[b-le1627e9xg] {
    font-weight: 600;
}

.wtta-leg-select[b-le1627e9xg] {
    max-width: 26rem;
}

/* No booking exists yet — informational, never a blocker (the save still lands). */
.wtta-leg-none[b-le1627e9xg] {
    font-weight: 400;
    font-style: italic;
    color: var(--bs-gray-600);
}

.wtta-rows[b-le1627e9xg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/* ⭐ THE STACK (Jeff, 2026-09-07). Unsplit, this is an inline flex row and the chips sit side by
   side exactly as they always have — the 08-21 density constraint is untouched on the rows that
   are not splitting. Split, it turns into a column so the tons inputs line up under one another
   and the total below them reads as arithmetic, the way the scale-house sheet writes it.
   ⛔ The width is driven by the fixed .wtta-tons-input / autocomplete widths below; do not make
   either % or auto, or the column stops aligning and the total means nothing. */
.wtta-stack[b-le1627e9xg] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.wtta-stack--split[b-le1627e9xg] {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    background: var(--white);
}

/* Inside the stack the individual chips lose their own box — one border around the group reads as
   one load, where per-chip borders read as unrelated entries that happen to be adjacent. */
.wtta-stack--split .wtta-rowline[b-le1627e9xg] {
    border-color: transparent;
    background: transparent;
    padding: 0;
}

/* An adopted row still has to look adopted inside the stack (see .wtta-rowline--adopted): the
   dashed edge is the only thing separating an inferred pairing from a recorded one. */
.wtta-stack--split .wtta-rowline--adopted[b-le1627e9xg] {
    border-color: var(--bs-gray-300);
}

/* ⛔ RIGHT-ALIGNED, or the stack is decoration. Left-aligned digits put the decimal points of
   10.71 and 0.51 in different places, so the column does not add up by eye and the total below it
   is just a number that happens to sit nearby. Scoped to the split stack deliberately: an unsplit
   row has nothing to align against, and changing it there would alter every scan row on the page
   for no reason. Tabular figures stop 1 and 4 from being different widths. */
.wtta-stack--split .wtta-tons-input[b-le1627e9xg] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* The paper's TOTAL line: a rule across the tons column, the sum right-aligned under it. The label
   is sized to the tank picker so the number lands in the tons column and nowhere else. */
.wtta-rowtotal[b-le1627e9xg] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    margin-top: 1px;
    padding-top: 3px;
    border-top: 1px solid var(--bs-gray-900);
}

.wtta-rowtotal-label[b-le1627e9xg] {
    width: 8.5rem;
    text-align: right;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-gray-600);
}

/* ⚠ The padding is not cosmetic: it reproduces .form-control-sm's own right inset (0.25rem 0.5rem
   + 1px border) so the total's digits land on the same x as the digits INSIDE the tons inputs
   above. Width matches .wtta-tons-input and counts the padding (border-box, from reboot). Drop the
   padding and the total sits ~0.5rem right of the column it is totalling. */
.wtta-rowtotal-value[b-le1627e9xg] {
    width: 5.5rem;
    padding-right: calc(0.5rem + 1px);
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Each tank+tons pair is a compact chip; chips sit side by side and wrap, so three tanks
   still read as one line on a desktop width. */
.wtta-rowline[b-le1627e9xg] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border: 1px solid var(--bs-gray-300);
    border-radius: 6px;
    background: var(--white);
}

/* An adopted pre-anchor-era row (see the .razor comment) — dashed, same vocabulary as the scan
   list's "by tag" chip: an inferred pairing must never masquerade as a recorded one. */
.wtta-rowline--adopted[b-le1627e9xg] {
    border-style: dashed;
}

/* The picker is TankSpecsAutocomplete, so its box lives in the child component's markup — ::deep
   from .wtta-rowline (this component's own element) is the only way scoped css reaches it. Same
   idiom as .ta-row__main; width carried over verbatim from the <select> it replaced, since the
   density constraint (several tags open at once, no scrolling) has not changed. */
.wtta-rowline[b-le1627e9xg]  .nwc-autocomplete-input {
    width: 8.5rem;
}

.wtta-tons-input[b-le1627e9xg] {
    width: 5.5rem;
}

/* ⭐ SAVED (Jeff, 2026-09-07). Green, and deliberately NOT a button — it is a statement about the
   database, not something to press. Same width as the save button it replaces so a row does not
   shift sideways the moment it saves.
   ⛔ The glyph is bi-check-circle-FILL, not a bare tick: the tank picker draws its own green
   bi-check-circle to mean "that text is a real tank", so a bare tick here put two same-coloured
   ticks on one row saying different things. Solid reads as state, outline reads as validation —
   do not swap it back to bi-check-lg. */
.wtta-saved[b-le1627e9xg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    color: var(--bs-success);
    line-height: 1;
}

/* The same slot before it is saved: a hollow ring, muted. ⛔ NOT a button and never interactive —
   see the .razor: a per-row save cannot exist against a tag-scoped write, and the one that briefly
   did was indistinguishable in effect from "Save tanks" beside it. This states a fact; the commit
   lives in exactly one place. */
.wtta-pending[b-le1627e9xg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    color: var(--bs-gray-600);
    opacity: 0.55;
    line-height: 1;
}

/* ⛔ Same width as both marks, holding the column open on a row with nothing typed in it. Without
   it the trash icon jumps left by 26px the moment a destination lands — under her cursor, mid-entry
   on the scale-house floor. */
.wtta-rowstate-blank[b-le1627e9xg] {
    display: inline-flex;
    width: 26px;
}

.wtta-x[b-le1627e9xg] {
    border: 0;
    background: transparent;
    color: var(--bs-gray-600);
    line-height: 1;
    padding: 4px 6px;
    cursor: pointer;
}

.wtta-x:hover:not(:disabled)[b-le1627e9xg] {
    color: var(--bs-danger);
}

.wtta-x:disabled[b-le1627e9xg] {
    opacity: 0.35;
    cursor: default;
}

/* ⭐⭐ THE CONFIRMATION, as a filled pill (bug #31). It used to be bare 0.85rem green text sharing
   this wrapping flex line with .wtta-balance — also 0.85rem, also green when the tons balance — so
   the one element that asserts "the database has it" was visually the twin of the one beside it that
   asserts nothing of the kind. A tinted, bordered, semibold pill is a different KIND of thing on the
   line, which is what makes it findable without being read.
   ⛔ Do not drop it back to plain text to "match the balance chip": looking like the balance chip is
   the defect. */
.wtta-ok[b-le1627e9xg] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border: 1px solid var(--bs-success);
    border-radius: 999px;
    background: var(--color-success-bg, #dcfce7);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--bs-success);
}

/* The tag now holds NOTHING. Reachable and legitimate — trashing the last tank lands here, and so
   does an all-blank submit, which the service accepts and which deletes every row the tag authored.
   ⛔ Green would be a lie in exactly the case that costs the most: 14.24 t with nowhere recorded. */
.wtta-ok--empty[b-le1627e9xg] {
    border-color: var(--color-warning-text, #997404);
    background: var(--color-warning-bg, #fef9c3);
    color: var(--color-warning-text, #997404);
}

/* ⛔ A WIDTH FLOOR, not decoration. The caption swaps to "Saving…" mid-press on a WRAPPING flex line,
   so without a floor the button resizes and the balance chip and confirmation beside it reflow under
   her cursor at the exact moment she is looking for feedback. Sized above both captions. */
.wtta-save[b-le1627e9xg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 6.5rem;
}

.wtta-balance[b-le1627e9xg] {
    font-size: 0.85rem;
}

.wtta-balance--ok[b-le1627e9xg] {
    color: var(--bs-success);
}

.wtta-balance--warn[b-le1627e9xg] {
    color: var(--color-warning-text, #997404);
}

.wtta-note[b-le1627e9xg] {
    font-size: 0.85rem;
    color: var(--bs-gray-600);
    margin: var(--space-1, 4px) 0 0;
}

.wtta-note--warn[b-le1627e9xg] {
    color: var(--color-warning-text, #997404);
}

.wtta-error[b-le1627e9xg] {
    margin-top: var(--space-2, 8px);
    font-size: 0.85rem;
    color: var(--bs-danger);
}
/* /Pages/Harvest/WeightTagUploadPanel.razor.rz.scp.css */
.wt-upload-panel[b-1m4hpwnmaz] {
    padding: var(--space-lg);
}

.wt-upload-context[b-1m4hpwnmaz] {
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-subtle);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

[b-1m4hpwnmaz] .wt-ocr-summary {
    margin-top: var(--space-lg);
}

/* /Pages/Home/HomeScreenSettingsPanel.razor.rz.scp.css */
.home-settings-panel[b-5mstsbq5bu] {
    padding: var(--space-lg);
    max-width: 800px;
}

/* Layout Options */
.layout-option[b-5mstsbq5bu] {
    cursor: pointer;
    padding: var(--space-md);
    border: 2px solid var(--gray-300);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all 0.2s ease;
    min-width: 100px;
}

.layout-option:hover[b-5mstsbq5bu] {
    border-color: var(--blue-500);
    background-color: var(--gray-50);
}

.layout-option.selected[b-5mstsbq5bu] {
    border-color: var(--blue-500);
    background-color: var(--blue-100);
}

.layout-preview[b-5mstsbq5bu] {
    width: 80px;
    height: 50px;
    margin: 0 auto var(--space-sm);
    display: grid;
    gap: 2px;
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.preview-block[b-5mstsbq5bu] {
    background: var(--gray-600);
    border-radius: 2px;
}

/* Hero layout preview */
.hero-preview .full[b-5mstsbq5bu] {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
}

/* Two Image layout preview */
.two-preview[b-5mstsbq5bu] {
    grid-template-columns: 3fr 1fr;
    padding: 4px;
}

.two-preview .main[b-5mstsbq5bu] {
    border-radius: 2px;
}

.two-preview .circle[b-5mstsbq5bu] {
    border-radius: 50%;
    align-self: center;
}

/* Three Image layout preview */
.three-preview[b-5mstsbq5bu] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
}

.three-preview .top[b-5mstsbq5bu] {
    grid-column: 1 / -1;
}

/* Four Grid layout preview */
.four-preview[b-5mstsbq5bu] {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.layout-name[b-5mstsbq5bu] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
}

/* Image Slots */
.image-slot[b-5mstsbq5bu] {
    position: relative;
    width: 150px;
    height: 100px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-slot:hover[b-5mstsbq5bu] {
    border-color: var(--blue-500);
}

.image-slot.active[b-5mstsbq5bu] {
    border-color: var(--blue-500);
    border-style: solid;
    box-shadow: 0 0 0 3px rgba(var(--blue-500-rgb), 0.25);
}

.image-slot .empty-slot[b-5mstsbq5bu] {
    text-align: center;
    color: var(--gray-600);
}

.image-slot .empty-slot i[b-5mstsbq5bu] {
    font-size: 1.5rem;
    display: block;
    margin-bottom: var(--space-2xs);
}

.image-slot .empty-slot span[b-5mstsbq5bu] {
    font-size: var(--font-size-md);
}

.image-slot .btn-remove[b-5mstsbq5bu] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--home-btn-remove-bg);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.image-slot:hover .btn-remove[b-5mstsbq5bu] {
    opacity: 1;
}

.image-slot .btn-remove i[b-5mstsbq5bu] {
    color: var(--red-500);
    font-size: var(--font-size-lg);
}

.slot-badge[b-5mstsbq5bu] {
    position: absolute;
    bottom: 4px;
    left: 4px;
    background: var(--blue-500);
    color: var(--white);
    font-size: var(--font-size-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

/* Image Gallery */
.image-gallery[b-5mstsbq5bu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-lg);
    max-height: 300px;
    overflow-y: auto;
    padding: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
}

.gallery-item[b-5mstsbq5bu] {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    aspect-ratio: 3/2;
}

.gallery-item:hover[b-5mstsbq5bu] {
    transform: scale(1.02);
    box-shadow: var(--home-gallery-item-shadow);
}

.gallery-item.in-use[b-5mstsbq5bu] {
    box-shadow: 0 0 0 3px var(--blue-500);
}

.gallery-item-overlay[b-5mstsbq5bu] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-sm);
    background: var(--home-gallery-overlay-gradient);
    color: var(--white);
}

.gallery-item-name[b-5mstsbq5bu] {
    font-size: var(--font-size-sm);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gallery-item .btn-delete[b-5mstsbq5bu] {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--home-btn-delete-bg);
    border: none;
    border-radius: var(--radius-sm);
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: var(--white);
}

.gallery-item:hover .btn-delete[b-5mstsbq5bu] {
    opacity: 1;
}

/* Panel Actions */
.panel-actions[b-5mstsbq5bu] {
    margin-top: var(--space-lg);
}
/* /Pages/Home/StoredGlassStrip.razor.rz.scp.css */
/* One slim, horizontally scrolling row: the label card first, then a chip per glass line. It sits
   above the forecast on a 695px-tall laptop viewport, so it is kept to a single short row. */
.sgs-strip[b-tutmdy7jir] {
    display: flex;
    align-items: stretch;
    gap: var(--space-xs);
    overflow-x: auto;
    padding: var(--space-xs) 0;
}

.sgs-label[b-tutmdy7jir],
.sgs-chip[b-tutmdy7jir] {
    flex: 0 0 auto;
    display: flex;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    background: var(--surface-default);
    padding: var(--space-2xs) var(--space-sm);
    font-size: var(--font-size-xs);
    line-height: 1.25;
}

.sgs-label[b-tutmdy7jir] {
    align-items: center;
    gap: var(--space-xs);
    color: inherit;
    text-decoration: none;
    border-color: var(--accent-primary);
}

.sgs-label:hover[b-tutmdy7jir] {
    background: var(--accent-primary-soft);
}

.sgs-label > i[b-tutmdy7jir] {
    font-size: var(--font-size-lg);
    color: var(--accent-primary);
}

.sgs-label-title[b-tutmdy7jir],
.sgs-chip-name[b-tutmdy7jir] {
    display: block;
    font-weight: 600;
    white-space: nowrap;
}

.sgs-chip[b-tutmdy7jir] {
    flex-direction: column;
    max-width: 16rem;
}

.sgs-chip-name[b-tutmdy7jir] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.sgs-label-sub[b-tutmdy7jir],
.sgs-chip-sub[b-tutmdy7jir] {
    display: flex;
    gap: var(--space-xs);
    color: var(--text-secondary);
    white-space: nowrap;
}

.sgs-chip-qty[b-tutmdy7jir] {
    font-weight: 600;
    color: var(--text-primary, inherit);
}
/* /Pages/Home/VineyardWeatherToolbar.razor.rz.scp.css */
.vwt-strip[b-itm94rllqj] {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding: var(--space-xs) 0;
}

.vwt-card[b-itm94rllqj] {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    min-width: 132px;
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: left;
}

.vwt-card:hover[b-itm94rllqj] {
    box-shadow: var(--shadow-lg);
}

/* Card body — opens the temperature graph. Its own control so the corner link can carry the
   separate "go to the Vineyard page" destination without nesting interactive elements. */
.vwt-card-body[b-itm94rllqj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: 0;
    border-radius: inherit;
    text-align: left;
    cursor: pointer;
}

.vwt-card-link[b-itm94rllqj] {
    position: absolute;
    top: var(--space-3xs);
    right: var(--space-2xs);
    font-size: var(--font-size-xs);
    line-height: 1;
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    opacity: 0.75;
    white-space: nowrap;
}

.vwt-card-link:hover[b-itm94rllqj] {
    opacity: 1;
    background: var(--gray-100);
    text-decoration: underline;
}

.vwt-card-name[b-itm94rllqj] {
    /* Leave room for the absolutely-positioned Vineyard link in the top-right corner. */
    padding-right: 4.5rem;
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vwt-card-temp[b-itm94rllqj] {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.1;
}

.vwt-card-sub[b-itm94rllqj] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary, inherit);
    white-space: nowrap;
}

.vwt-card-asof[b-itm94rllqj] {
    opacity: 0.7;
}

.vwt-card-skeleton[b-itm94rllqj] {
    gap: var(--space-3xs);
    padding: var(--space-sm) var(--space-md);
    cursor: default;
}

.vwt-skeleton-line[b-itm94rllqj] {
    background: var(--gray-200);
    border-radius: var(--radius-sm);
    animation: vwt-shimmer-b-itm94rllqj 1.4s ease-in-out infinite;
}

.vwt-skeleton-name[b-itm94rllqj] {
    width: 60%;
    height: 0.8rem;
}

.vwt-skeleton-temp[b-itm94rllqj] {
    width: 40%;
    height: 1.4rem;
}

@keyframes vwt-shimmer-b-itm94rllqj {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
/* /Pages/Index.razor.rz.scp.css */
/* Home page styles - scoped via CSS isolation */

.home-page[b-tz883k0njs] {
    padding: 0;
    height: 96vh;
    display: flex;
    flex-direction: column;
}

.home-page .row[b-tz883k0njs] {
    margin: 0;
}

.home-page .btn-row[b-tz883k0njs] {
    flex: 0 1 auto;
    margin: 10px 0;
    z-index: var(--z-base);
}

.home-page .image-row[b-tz883k0njs] {
    flex: 2;
    position: relative;
    min-height: 200px;
}

/* Photo clipping lives on the inner image wrapper, not .image-row itself —
   so absolutely-positioned overlay children (gear/FAB/hero-search and its
   results dropdown) aren't cut off at the row's edge. */
.home-page .image-row > .col[b-tz883k0njs] {
    overflow: hidden;
    height: 100%;
}

/* Contact/business lookup — overlays the hero image, top-center, matching
   the frosted-glass treatment of the settings-gear/inventory-fab siblings
   instead of a solid full-width band above the image. */
.home-page .hero-search[b-tz883k0njs] {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-base);
    width: 100%;
    max-width: 480px;
    padding: 0 var(--space-md);
}

.home-page .hero-search[b-tz883k0njs]  .contact-lookup-autocomplete input.form-control {
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.home-page .hero-search[b-tz883k0njs]  .contact-lookup-autocomplete input.form-control:focus {
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(66, 133, 244, 0.15);
}

.home-page .forecast-row[b-tz883k0njs] {
    flex: 0 0 auto;
    overflow-y: hidden;
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--gray-200) 100%);
    border-top: 1px solid var(--gray-300);
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
}

.home-page .vineyard-weather-row[b-tz883k0njs],
.home-page .stored-glass-row[b-tz883k0njs] {
    flex: 0 0 auto;
    padding: 0 var(--space-md);
}

.home-page .button-row[b-tz883k0njs] {
    text-align: center;
}

/* Settings gear button */
.home-page .settings-gear[b-tz883k0njs] {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: var(--z-base);
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
}

.home-page .settings-gear:hover[b-tz883k0njs] {
    background: white;
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

.home-page .settings-gear i[b-tz883k0njs] {
    font-size: var(--font-size-2xl);
    color: var(--gray-700);
}

/* Frosted-glass launcher pills overlaying the hero image, stacked top-left:
   Check in Inventory → Print Stickers → Check in Fruit. One shared shape rule;
   per-pill rules carry only position + accent. (Print Stickers restores a Home entry
   point for the sticker drawer: the old button was collateral damage of the 2026-01-31
   home redesign — 0b0afeec stripped 264 lines from Index.razor — which left the panel
   mounted and its handler orphaned with no way to reach it.) */
.home-page .inventory-fab[b-tz883k0njs],
.home-page .stickers-fab[b-tz883k0njs],
.home-page .photo-fab[b-tz883k0njs] {
    position: absolute;
    left: 10px;
    z-index: var(--z-base);
    width: auto;
    max-width: max-content;
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 28px;
    padding: 8px 16px 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15);
    transition: all 0.2s ease;
    font-weight: var(--font-weight-semibold);
    color: #2a2f36;
    white-space: nowrap;
}

.home-page .inventory-fab[b-tz883k0njs] { top: 10px; }
.home-page .stickers-fab[b-tz883k0njs]  { top: 64px; }
.home-page .photo-fab[b-tz883k0njs]     { top: 118px; }

.home-page .stickers-fab:hover[b-tz883k0njs],
.home-page .photo-fab:hover[b-tz883k0njs] {
    background: white;
    transform: scale(1.04);
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}

.home-page .stickers-fab i[b-tz883k0njs] {
    font-size: var(--font-size-lg);
    color: #2a2f36;
}

/* Inventory keeps its AI accent: purple hover glow + gradient label. */
.home-page .inventory-fab:hover[b-tz883k0njs] {
    background: white;
    transform: scale(1.04);
    box-shadow: 0 4px 18px rgba(155,114,203,0.35);
}
.home-page .inventory-fab .inventory-fab-label[b-tz883k0njs] {
    font-size: 0.95rem;
    background: linear-gradient(135deg, #4285F4 0%, #9B72CB 50%, #D96570 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Keep the labels on phones — icon-only they read as mystery glyphs. */
@media (max-width: 600px) {
    .home-page .inventory-fab .inventory-fab-label[b-tz883k0njs],
    .home-page .stickers-fab .stickers-fab-label[b-tz883k0njs],
    .home-page .photo-fab .photo-fab-label[b-tz883k0njs] { font-size: 0.85rem; }
    .home-page .inventory-fab[b-tz883k0njs],
    .home-page .stickers-fab[b-tz883k0njs],
    .home-page .photo-fab[b-tz883k0njs] { padding: 6px 12px 6px 10px; }
}

/* Layout styles */
.home-layout[b-tz883k0njs] {
    width: 100%;
    height: 100%;
}

.home-layout-hero[b-tz883k0njs] {
    display: flex;
}

.home-layout-hero img[b-tz883k0njs] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-lg);
}

.home-layout-two[b-tz883k0njs] {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-sm);
    height: 100%;
}

.home-layout-two .main-image[b-tz883k0njs] {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.home-layout-two .circle-image img[b-tz883k0njs] {
    width: 100%;
    max-width: 250px;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.home-layout-three[b-tz883k0njs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr 1fr;
    gap: var(--space-md);
    padding: var(--space-sm);
    height: 100%;
}

.home-layout-three .top-image[b-tz883k0njs] {
    grid-column: 1 / -1;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.home-layout-three .bottom-image[b-tz883k0njs],
.home-layout-four .grid-image[b-tz883k0njs] {
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.home-layout-four[b-tz883k0njs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-sm);
    height: 100%;
}

.empty-placeholder[b-tz883k0njs] {
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gray-600);
    border-radius: var(--radius-xl);
    font-size: var(--font-size-base);
}

/* ========== MOBILE / SMALL SCREEN OPTIMIZATION ========== */
@media (max-width: 767px) {
    .home-page[b-tz883k0njs] {
        height: auto;
        min-height: 100vh;
    }

    /* Stack layout vertically on mobile */
    .home-page .image-row[b-tz883k0njs] {
        flex: none;
        height: 50vh;
        min-height: 250px;
        max-height: 400px;
    }

    /* Compact the launcher-pill stack (12/60/108, with the 600px padding cut) and push
       the search below ALL THREE pills, not just the first — the old top:68px sat exactly
       on Print Stickers once that pill joined the stack (the iPhone overlap bug,
       fixed 2026-08-01). Full-width instead of top-center: avoids the crowding a shared
       top-center overlay would cause on a 390px-wide viewport. */
    .home-page .inventory-fab[b-tz883k0njs] { top: 12px; left: 12px; }
    .home-page .stickers-fab[b-tz883k0njs]  { top: 60px; left: 12px; }
    .home-page .photo-fab[b-tz883k0njs]     { top: 108px; left: 12px; }

    .home-page .hero-search[b-tz883k0njs] {
        top: 156px;
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
        max-width: none;
        padding: 0;
    }

    .home-page .forecast-row[b-tz883k0njs] {
        flex: none;
        min-height: auto;
        padding: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Settings gear - larger touch target on mobile */
    .home-page .settings-gear[b-tz883k0njs] {
        width: 48px;
        height: 48px;
        top: 12px;
        right: 12px;
    }

    .home-page .settings-gear i[b-tz883k0njs] {
        font-size: 1.4rem;
    }

    /* Two-image layout: stack on mobile */
    .home-layout-two[b-tz883k0njs] {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr auto;
        gap: var(--space-sm);
    }

    .home-layout-two .circle-image img[b-tz883k0njs] {
        max-width: 120px;
    }

    /* Three-image layout: single column on mobile */
    .home-layout-three[b-tz883k0njs] {
        grid-template-columns: 1fr;
        grid-template-rows: 2fr 1fr 1fr;
    }

    .home-layout-three .top-image[b-tz883k0njs] {
        grid-column: 1;
    }

    /* Four-grid layout: stays 2x2 but smaller gaps */
    .home-layout-four[b-tz883k0njs] {
        gap: var(--space-2xs);
        padding: var(--space-2xs);
    }

    .home-layout-hero img[b-tz883k0njs],
    .home-layout-two .main-image[b-tz883k0njs],
    .home-layout-three .top-image[b-tz883k0njs],
    .home-layout-three .bottom-image[b-tz883k0njs],
    .home-layout-four .grid-image[b-tz883k0njs] {
        border-radius: var(--radius-lg);
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1024px) {
    .home-page .image-row[b-tz883k0njs] {
        flex: 1.5;
    }

    .home-page .forecast-row[b-tz883k0njs] {
        flex: 0 0 auto;
    }

    .home-layout-two[b-tz883k0njs] {
        grid-template-columns: 2fr 1fr;
    }
}
/* /Pages/LabelCola/ColaCardItem.razor.rz.scp.css */
/* Scoped styles for the ColaCardItem component.
   The chrome shared with LabelCardItem lives in site.css as .nwc-lib-card-*
   (batch-7 hoist). This file keeps only what genuinely differs — the
   components deliberately remain separate (action surfaces differ:
   Delete vs. Deactivate; PDF badge). */

/* Differs from LabelCardItem: reserves height even when empty (.no-image). */
.card-images[b-06dwiomo5j] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    background: var(--nwc-bg-subtle);
    min-height: 140px;
}

.no-image[b-06dwiomo5j] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-sm);
    color: var(--nwc-text-light);
    font-style: italic;
}

/* COLA-only: spacing before the .card-details block below. */
.nwc-lib-card-fanciful[b-06dwiomo5j] {
    margin-bottom: 0.35rem;
}

/* COLA-specific: TTBID / PDF / Serial detail rows */
.card-details[b-06dwiomo5j] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.4rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--nwc-border-light);
}

.detail-row[b-06dwiomo5j] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
}

.detail-label[b-06dwiomo5j] {
    color: var(--nwc-text-muted);
    font-weight: var(--font-weight-medium);
    flex: 0 0 auto;
}

.detail-value[b-06dwiomo5j] {
    color: var(--nwc-text);
    font-variant-numeric: tabular-nums;
}

.no-pdf[b-06dwiomo5j] {
    font-size: 0.75rem;
    opacity: 0.6;
}
/* /Pages/LabelCola/ColaFromIntake.razor.rz.scp.css */
.cola-from-intake-page[b-6hxct08dxn] {
    padding: var(--space-lg);
}
/* /Pages/LabelCola/ColaLabelUploadPanel.razor.rz.scp.css */
/* COLA Label Upload Panel — domain-specific styles */

.label-upload-panel[b-sp0hk6k5h2] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-xl);
}

.panel-header[b-sp0hk6k5h2] {
    margin-bottom: var(--space-xl);
}

.panel-header h5[b-sp0hk6k5h2] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    color: var(--nwc-text);
}

.panel-header p[b-sp0hk6k5h2] {
    margin: 0;
    font-size: var(--font-size-base);
}

.upload-slots[b-sp0hk6k5h2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    flex: 1;
    margin-bottom: var(--space-lg);
}

.upload-slot[b-sp0hk6k5h2] {
    display: flex;
    flex-direction: column;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    background: var(--gray-50);
    min-height: 200px;
}

.slot-header[b-sp0hk6k5h2] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
}

.slot-header i[b-sp0hk6k5h2] {
    font-size: 1.2rem;
    color: var(--gray-600);
}

.slot-content[b-sp0hk6k5h2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.image-preview-container[b-sp0hk6k5h2] {
    position: relative;
    width: 100%;
    max-width: 200px;
}

.preview-image[b-sp0hk6k5h2] {
    width: 100%;
    height: auto;
    max-height: 180px;
    object-fit: contain;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
}

.remove-btn[b-sp0hk6k5h2] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--white);
}

.upload-status[b-sp0hk6k5h2] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--green-100);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-base);
}

/* Mobile */
@media (max-width: 576px) {
    .label-upload-panel[b-sp0hk6k5h2] {
        padding: var(--space-lg);
    }

    .upload-slots[b-sp0hk6k5h2] {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .upload-slot[b-sp0hk6k5h2] {
        min-height: 150px;
    }
}
/* /Pages/LabelCola/ColaNewPanel.razor.rz.scp.css */
/* COLA New Panel — domain-specific form styles */

.cola-panel-container[b-bs3gi6t0pf] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: var(--space-lg);
    font-size: var(--font-size-base);
}

.cola-form-grid[b-bs3gi6t0pf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    flex: 1;
    overflow-y: auto;
}

/* Images section - spans full width */
.cola-images-section[b-bs3gi6t0pf] {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: var(--space-lg);
    margin-bottom: var(--space-sm);
}

.images-header[b-bs3gi6t0pf] {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--space-md);
}

.image-item[b-bs3gi6t0pf] {
    flex: 0 0 auto;
    max-width: 200px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    background: var(--gray-50);
}

.image-controls[b-bs3gi6t0pf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.image-preview[b-bs3gi6t0pf] {
    text-align: center;
}

.responsive-image[b-bs3gi6t0pf] {
    max-width: 100%;
    max-height: 150px;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

/* Form columns */
.form-column[b-bs3gi6t0pf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}


.form-group label[b-bs3gi6t0pf] {
    font-size: var(--font-size-md);
    margin-bottom: 0;
}

.form-group .form-control[b-bs3gi6t0pf],
.form-group .form-select[b-bs3gi6t0pf] {
    font-size: var(--font-size-base);
    padding: var(--space-xs) var(--space-sm);
}

.form-check-group[b-bs3gi6t0pf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* Validation */
.alert-sm[b-bs3gi6t0pf] {
    padding: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-2xs);
    font-size: var(--font-size-md);
}

/* Mobile */
@media (max-width: 768px) {
    .cola-form-grid[b-bs3gi6t0pf] {
        grid-template-columns: 1fr;
    }

    .image-item[b-bs3gi6t0pf] {
        max-width: 150px;
    }

    .responsive-image[b-bs3gi6t0pf] {
        max-height: 100px;
    }
}
/* /Pages/LabelCola/ColaScanPanel.razor.rz.scp.css */
/* COLA Scan Panel — domain-specific styles only */

.cola-scan-panel[b-mjs4cs6d4g] {
    padding: var(--space-lg);
}

/* Upload drop zone (overlay variant for drag-and-drop) */
.upload-drop-zone[b-mjs4cs6d4g] {
    position: relative;
    cursor: pointer;
    display: block;
    text-align: center;
}

/* DBA item */
.dba-item[b-mjs4cs6d4g] {
    padding: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
}

/* Scan field label */
.scan-field-label[b-mjs4cs6d4g] {
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    display: block;
    margin-bottom: var(--space-2xs);
}

/* .confidence-badge hoisted to site.css 2026-08-01 (targets the ScanField child component). */

/* Match results */
.matching-results[b-mjs4cs6d4g] {
    background: var(--gray-50);
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.match-label[b-mjs4cs6d4g] {
    font-weight: var(--font-weight-medium);
    min-width: 100px;
    font-size: 0.875rem;
}

.match-field[b-mjs4cs6d4g] {
    flex: 1;
}

.match-field .scan-field-label[b-mjs4cs6d4g] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}
/* /Pages/LabelCola/LabelCardItem.razor.rz.scp.css */
/* Scoped styles for the LabelCardItem component.
   The chrome shared with ColaCardItem lives in site.css as .nwc-lib-card-*
   (batch-7 hoist). This file keeps only what genuinely differs. */

/* Differs from ColaCardItem: collapses entirely when there are no images
   (no min-height, :empty hides the strip). */
.card-images[b-4yta5m7nl6] {
    display: flex;
    flex-direction: row;
    gap: 2px;
    background: var(--nwc-bg-subtle);
}

.card-images:empty[b-4yta5m7nl6] {
    display: none;
}
/* /Pages/LabelCola/LabelFromIntake.razor.rz.scp.css */
.label-from-intake-page[b-ilyx7k0uxq] {
    padding: var(--space-lg);
}
/* /Pages/LabelCola/LabelManager.razor.rz.scp.css */
/* Page-specific styling for LabelManager.
   Shell/workspace/pane/statusbar layout lives in Shared/ManagerShell.
   All rules render under the LabelManager's own DOM root, so the b-* scope
   attribute lands — no ::deep needed (see feedback-blazor-scoped-css-deep-needs-own-root). */

/* ─── Ribbon ──────────────────────────────────────────────── */
/* Ribbon toolbar hoisted to site.css .nwc-ribbon-* (LabelManager's <a>-tab
   inline-flex set is the superset baseline there). No page-unique ribbon rules. */

/* ─── Filterbar (bespoke — visually distinct from .nwc-list-page-filters) ── */

.lm-filterbar[b-ew1w7gtxq8] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}

.lm-search[b-ew1w7gtxq8] {
    position: relative;
    flex: 1 1 240px;
    max-width: 360px;
}

.lm-search i[b-ew1w7gtxq8] {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    color: var(--labelcola-muted-fg);
    font-size: var(--font-size-md);
    pointer-events: none;
}

.lm-search input[b-ew1w7gtxq8] { padding-left: 26px; }

.lm-sort[b-ew1w7gtxq8] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lm-sort-label[b-ew1w7gtxq8] {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin: 0;
}

.lm-sort select[b-ew1w7gtxq8] {
    min-width: 140px;
    font-size: 0.78rem;
}

.lm-sort-dir[b-ew1w7gtxq8] {
    appearance: none;
    border: 1px solid var(--gray-300);
    background: var(--surface-default);
    border-radius: var(--radius-sm);
    padding: 3px 8px;
    cursor: pointer;
    color: var(--gray-700);
    font-size: 0.9rem;
}

.lm-sort-dir:hover[b-ew1w7gtxq8] { background: var(--gray-50); border-color: var(--gray-500); }


/* .lm-chip replaced by <FilterChip> (Components/Shared). The .lm-chips wrapper
   (above) and .lm-chip-count (below) stay: the count span is passed as FilterChip
   ChildContent, so it keeps THIS component's scope and this rule still styles it. */

.lm-chip-count[b-ew1w7gtxq8] {
    background: var(--state-neutral-bg);
    border-radius: var(--radius-pill);
    padding: 1px 6px;
    font-size: 0.65rem;
    font-variant-numeric: tabular-nums;
}

/* ─── Tree pane (client rail) ─────────────────────────────── */

/* .lm-pane-title hoisted to site.css .nwc-pane-title (normalized to 0.78rem /
   align-items:baseline). Only the inspector left-pad modifier stays scoped. */

/* Inspector pane's collapse button sits at the pane's top-left; pad the title so
   the button doesn't overlap the "Inspector" text (was rendering as "…spector"). */
.lm-pane-title-inspector[b-ew1w7gtxq8] {
    padding-left: 34px;
}

.lm-rail-search[b-ew1w7gtxq8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--nwc-bg);
    border-bottom: 1px solid var(--gray-200);
    position: sticky;
    top: 0;
    z-index: var(--z-base);
}

.lm-rail-search i[b-ew1w7gtxq8] {
    color: var(--nwc-text-light);
    font-size: var(--font-size-base);
}

.lm-rail-search .form-control[b-ew1w7gtxq8] {
    border: none;
    padding: 0.2rem var(--space-2xs);
    font-size: var(--font-size-md);
    box-shadow: none;
}

.lm-rail-search .form-control:focus[b-ew1w7gtxq8] {
    outline: none;
    box-shadow: none;
}

.lm-rail-row[b-ew1w7gtxq8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    padding: 0.45rem var(--space-md);
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    text-align: left;
    font-size: 0.875rem;
    color: var(--nwc-text);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.lm-rail-row:hover[b-ew1w7gtxq8] { background: var(--nwc-bg-subtle); }

.lm-rail-row.selected[b-ew1w7gtxq8] {
    background: var(--nwc-bg-subtle);
    border-left-color: var(--blue-500);
    color: var(--blue-500);
    font-weight: var(--font-weight-semibold);
}

.lm-rail-row.lm-rail-all[b-ew1w7gtxq8] { font-weight: var(--font-weight-semibold); }
.lm-rail-row.lm-rail-all.selected[b-ew1w7gtxq8] { color: var(--blue-500); }


.lm-rail-count[b-ew1w7gtxq8] {
    flex: 0 0 auto;
    background: var(--nwc-bg-muted);
    color: var(--nwc-text-muted);
    padding: 0.05rem var(--space-sm);
    border-radius: var(--radius-pill);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

.lm-rail-row.selected .lm-rail-count[b-ew1w7gtxq8] {
    background: rgba(var(--blue-500-rgb), 0.12);
    color: var(--blue-500);
}

.lm-rail-divider[b-ew1w7gtxq8] {
    height: 1px;
    background: var(--gray-200);
    margin: var(--space-2xs) 0;
}

/* Scrollable client list — the pane (.ms-pane) clips with overflow:hidden, so the
   rail rows need their own scroll region. Title + search stay pinned above it. */
.lm-rail-list[b-ew1w7gtxq8] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* ─── Grid (cards) ────────────────────────────────────────── */

.lm-card-grid-wrap[b-ew1w7gtxq8] {
    padding: 12px;
    overflow-y: auto;
    height: 100%;
}

.lm-card-grid[b-ew1w7gtxq8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-lg);
    padding: 12px;
    overflow-y: auto;
    height: 100%;
}

.lm-card-grid-row[b-ew1w7gtxq8] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

@media (min-width: 1600px) {
    .lm-card-grid-row[b-ew1w7gtxq8] { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
    .lm-card-grid-row[b-ew1w7gtxq8] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
    .lm-card-grid-row[b-ew1w7gtxq8] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .lm-card-grid[b-ew1w7gtxq8],
    .lm-card-grid-row[b-ew1w7gtxq8] { grid-template-columns: 1fr; }
}

.lm-card-slot[b-ew1w7gtxq8] {
    position: relative;
    border-radius: var(--radius-md);
    transition: outline-color 0.12s;
}

.lm-card-slot.selected[b-ew1w7gtxq8] {
    outline: 2px solid var(--blue-500);
    outline-offset: -2px;
}

/* ─── Empty / scaffold states ─────────────────────────────── */

/* .lm-empty container + icon are global (.nwc-empty in site.css). */
.lm-empty.lm-empty-sm[b-ew1w7gtxq8] {
    padding: 12px;
}

.lm-empty p[b-ew1w7gtxq8] { margin: 0 0 4px; }

.lm-scaffold-notice[b-ew1w7gtxq8] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin: 12px;
    background: var(--labelcola-notice-bg);
    border: 1px solid var(--labelcola-notice-border);
    border-left: 3px solid var(--labelcola-notice-border-strong);
    border-radius: var(--radius-md);
    color: var(--labelcola-notice-fg);
}

.lm-scaffold-notice i[b-ew1w7gtxq8] { font-size: 1.2rem; margin-top: 2px; }

/* ─── Inspector ───────────────────────────────────────────── */

.lm-inspector[b-ew1w7gtxq8] {
    flex: 1;
    min-height: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

.lm-inspector-image[b-ew1w7gtxq8] {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 8px;
    cursor: zoom-in;
}

.lm-inspector-image img[b-ew1w7gtxq8] {
    max-width: 100%;
    max-height: 220px;
    object-fit: contain;
    flex: 0 1 auto;
}

.lm-inspector-image img + img[b-ew1w7gtxq8] {
    max-width: 50%;
}

.lm-inspector-title[b-ew1w7gtxq8] {
    font-size: 1.1rem;
    font-weight: var(--font-weight-semibold);
    color: var(--nwc-text);
    margin: 4px 0 0;
}

.lm-inspector-fanciful[b-ew1w7gtxq8] {
    font-style: italic;
    color: var(--nwc-text-muted);
    font-size: 0.9rem;
}

.lm-inspector-client[b-ew1w7gtxq8] {
    font-size: 0.85rem;
    color: var(--gray-600);
}

/* Grid mechanics now come from global .nwc-kv (site.css) — see
   LAYOUT-PATTERNS.md Pattern 2. Only this instance's deltas remain local. */
.lm-inspector-meta[b-ew1w7gtxq8] {
    grid-template-columns: 100px 1fr;
    margin: 8px 0 0;
    font-size: 0.85rem;
}

.lm-inspector-meta dt[b-ew1w7gtxq8] {
    color: var(--gray-600);
}

.lm-inspector-meta dd[b-ew1w7gtxq8] {
    color: var(--nwc-text);
}

.lm-inspector-actions[b-ew1w7gtxq8] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-200);
}

.lm-inspector-status[b-ew1w7gtxq8] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
}

.lm-inspector-status.approved[b-ew1w7gtxq8] { background: var(--labelcola-status-success-bg); color: var(--labelcola-status-success-fg); }
.lm-inspector-status.pending[b-ew1w7gtxq8]  { background: var(--yellow-100); color: var(--labelcola-status-warning-fg); }

.lm-inspector-flags[b-ew1w7gtxq8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 2px;
}

.lm-flag[b-ew1w7gtxq8] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: 0.7rem;
    color: var(--gray-500);
    background: var(--gray-50);
}

.lm-flag.on[b-ew1w7gtxq8]   { background: var(--labelcola-status-success-bg); border-color: var(--labelcola-status-success-border); color: var(--labelcola-status-success-fg); }
.lm-flag.fail[b-ew1w7gtxq8] { background: var(--labelcola-status-danger-bg); border-color: var(--labelcola-status-danger-border); color: var(--labelcola-status-danger-fg); }

.lm-inspector-section[b-ew1w7gtxq8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--gray-200);
}

.lm-inspector-section-title[b-ew1w7gtxq8] {
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-600);
}

.lm-inspector-mono[b-ew1w7gtxq8] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8rem;
    color: var(--nwc-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.lm-inspector-romantic[b-ew1w7gtxq8] {
    font-size: 0.85rem;
    font-style: italic;
    color: var(--nwc-text);
    white-space: pre-wrap;
}

.lm-inspector-hash[b-ew1w7gtxq8] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    color: var(--gray-600);
    word-break: break-all;
}

.lm-inspector-text[b-ew1w7gtxq8] {
    font-size: 0.85rem;
    color: var(--nwc-text);
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Appearance (extracted color + physical characteristics) ── */
.lm-appearance-summary[b-ew1w7gtxq8] {
    font-size: 0.85rem;
    color: var(--nwc-text);
    line-height: 1.45;
}

.lm-swatches[b-ew1w7gtxq8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.lm-swatch[b-ew1w7gtxq8] {
    width: 22px;
    height: 22px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--gray-300);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.lm-appearance-row[b-ew1w7gtxq8] {
    display: flex;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--nwc-text);
}

.lm-appearance-key[b-ew1w7gtxq8] {
    flex: 0 0 52px;
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
}

.lm-tags[b-ew1w7gtxq8] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.lm-tag[b-ew1w7gtxq8] {
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-pill);
    padding: 1px 9px;
    font-size: 0.7rem;
    color: var(--gray-700);
}

/* ─── Proofs tab ──────────────────────────────────────────── */

.lm-proof-stats[b-ew1w7gtxq8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
}

.lm-proof-stat[b-ew1w7gtxq8] {
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    text-align: center;
}

.lm-proof-stat-num[b-ew1w7gtxq8] {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--nwc-text);
    font-variant-numeric: tabular-nums;
}

.lm-proof-stat-num.lm-proof-stat-warn[b-ew1w7gtxq8] { color: var(--labelcola-status-warning-fg-strong); }
.lm-proof-stat-num.lm-proof-stat-ok[b-ew1w7gtxq8]   { color: var(--labelcola-status-success-fg); }

.lm-proof-stat-label[b-ew1w7gtxq8] {
    font-size: 0.66rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

.lm-proof-customer-filter[b-ew1w7gtxq8] {
    max-width: 220px;
}

.lm-proof-grid[b-ew1w7gtxq8] {
    padding: 8px;
    height: 100%;
    overflow: auto;
}

.lm-proof-thumb[b-ew1w7gtxq8] {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: var(--radius-xs);
    cursor: zoom-in;
    border: 1px solid var(--gray-200);
}

.lm-proof-pdf-icon[b-ew1w7gtxq8] {
    font-size: 1.4rem;
    color: var(--labelcola-alert-strong);
}

/* Proofs detail panel (rendered inside SlidingPanel sibling) */

.lm-proof-detail[b-ew1w7gtxq8] {
    padding: 8px 12px 80px;
}

.lm-proof-detail-section[b-ew1w7gtxq8] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray-200);
}

.lm-proof-detail-section:last-of-type[b-ew1w7gtxq8] {
    border-bottom: none;
}

.lm-proof-section-title[b-ew1w7gtxq8] {
    flex: 0 0 100%;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    margin-bottom: 4px;
}

/* Grid mechanics now come from global .nwc-kv (site.css) — see
   LAYOUT-PATTERNS.md Pattern 2. Only this instance's deltas remain local. */
.lm-proof-dl[b-ew1w7gtxq8] {
    flex: 1 1 100%;
    font-size: 0.85rem;
}

.lm-proof-dl dt[b-ew1w7gtxq8] {
    color: var(--gray-600);
}

.lm-proof-dl dd[b-ew1w7gtxq8] {
    color: var(--nwc-text);
    min-height: 1.4em;
}

.lm-proof-raw-json[b-ew1w7gtxq8] {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 8px;
    font-size: 0.72rem;
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
}

.lm-proof-detail-footer[b-ew1w7gtxq8] {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--surface-default);
    border-top: 1px solid var(--gray-200);
}

/* Lightbox overlay */

.lm-proof-lightbox[b-ew1w7gtxq8] {
    position: fixed;
    inset: 0;
    background: var(--labelcola-lightbox-overlay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-labelcola-lightbox);
    cursor: zoom-out;
}

.lm-proof-lightbox-img[b-ew1w7gtxq8] {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
    box-shadow: var(--labelcola-lightbox-img-shadow);
}

/* ─── Extraction tab (OverlayContent) ─────────────────────── */

.lm-extract[b-ew1w7gtxq8] {
    padding: 18px 24px;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    height: 100%;
}

.lm-extract-header h2[b-ew1w7gtxq8] {
    margin: 0 0 4px;
    font-size: 1.4rem;
    color: var(--nwc-text);
}

.lm-extract-config[b-ew1w7gtxq8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 14px;
}

@media (max-width: 768px) {
    .lm-extract-config[b-ew1w7gtxq8] { grid-template-columns: 1fr; }
}

.lm-extract-actions[b-ew1w7gtxq8] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.lm-extract-stat-grid[b-ew1w7gtxq8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
}

.lm-extract-stat[b-ew1w7gtxq8] {
    text-align: center;
    padding: 12px 8px;
    border-radius: var(--radius-sm);
    background: var(--gray-50);
}

.lm-extract-stat-num[b-ew1w7gtxq8] {
    font-size: 1.6rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.lm-extract-stat-label[b-ew1w7gtxq8] {
    font-size: 0.7rem;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 4px;
}

.lm-extract-mini-row[b-ew1w7gtxq8] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.85rem;
    color: var(--gray-700);
}

.lm-extract-errors[b-ew1w7gtxq8] {
    max-height: 200px;
    overflow-y: auto;
    word-break: break-word;
    background: var(--labelcola-extract-error-bg);
    border: 1px solid var(--labelcola-extract-error-border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
}

.lm-extract-db-status[b-ew1w7gtxq8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

/* ─── Review tab ──────────────────────────────────────────── */

.lm-review-grid[b-ew1w7gtxq8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    overflow: hidden;
    padding: 8px;
}

.lm-review-bulk-bar[b-ew1w7gtxq8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
}

.lm-review-table-wrap[b-ew1w7gtxq8] {
    flex: 1;
    overflow: auto;
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
}

.lm-review-table-wrap table[b-ew1w7gtxq8] {
    margin-bottom: 0;
    font-size: 0.82rem;
}

.lm-review-table-wrap tbody tr[b-ew1w7gtxq8] {
    cursor: pointer;
}

.lm-review-row-selected[b-ew1w7gtxq8] {
    box-shadow: inset 3px 0 0 var(--blue-500);
}

.lm-review-pager[b-ew1w7gtxq8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: var(--gray-700);
}

.lm-review-inspector[b-ew1w7gtxq8] {
    flex: 1;
    min-height: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}

.lm-review-inspector-header[b-ew1w7gtxq8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray-200);
}

.lm-review-dba-card[b-ew1w7gtxq8] {
    margin: 0;
}

.lm-review-inspector-section h6[b-ew1w7gtxq8] {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-700);
    margin-bottom: 6px;
}

.lm-review-pre[b-ew1w7gtxq8] {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 8px;
    font-size: 0.72rem;
    max-height: 220px;
    overflow: auto;
    margin: 0;
}

.lm-review-pre-wrap[b-ew1w7gtxq8] { white-space: pre-wrap; }

.lm-proof-lightbox-close[b-ew1w7gtxq8] {
    position: absolute;
    top: 16px;
    right: 22px;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
}
/* /Pages/LabelCola/LabelNewPanel.razor.rz.scp.css */
/* Label New Panel — domain-specific styles */

.label-panel-container[b-ktyy1pmp4q] {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-sm);
    font-size: 0.8rem;
    background: linear-gradient(180deg, var(--gray-50) 0%, var(--lnp-bg-gradient-end) 100%);
}

.label-form-grid[b-ktyy1pmp4q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    flex: 1;
    overflow-y: auto;
    background: var(--surface-default);
    border-radius: var(--radius-lg);
    padding: 0.6rem;
    box-shadow: var(--lnp-shadow-card);
}

/* Images section - spans full width */
.images-section[b-ktyy1pmp4q] {
    grid-column: 1 / -1;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-2xs);
}

.section-header[b-ktyy1pmp4q] {
    display: flex;
    align-items: center;
    margin-bottom: 0.4rem;
}

.section-title[b-ktyy1pmp4q] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem;
    color: var(--lnp-text-strong);
    letter-spacing: -0.01em;
}

.image-upload-group[b-ktyy1pmp4q] {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.image-label[b-ktyy1pmp4q] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    color: var(--lnp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.image-preview[b-ktyy1pmp4q] {
    margin-top: 0.3rem;
    border: 1px solid var(--lnp-border);
    border-radius: var(--radius-md);
    padding: 0.2rem;
    background: var(--lnp-surface-subtle);
}

.image-preview img[b-ktyy1pmp4q] {
    max-width: 100%;
    max-height: 70px;
    height: auto;
    display: block;
    border-radius: var(--radius-sm);
}

/* ===== BOL FILE INDICATOR ===== */
.bol-file-indicator[b-ktyy1pmp4q] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    padding: var(--space-2xs) var(--space-sm);
    background: var(--lnp-success-bg);
    border: 1px solid var(--lnp-success-border);
    border-radius: var(--radius-md);
    color: var(--lnp-success-fg);
}

.bol-file-indicator span[b-ktyy1pmp4q] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

/* ===== TEXTAREA ===== */
/* Production statement is deliberately displayed uppercase */
.label-panel-container textarea[b-ktyy1pmp4q] {
    text-transform: uppercase;
    resize: vertical;
}

/* ===== COMPLIANCE ROW (full-width bottom) ===== */
.compliance-row[b-ktyy1pmp4q] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    background: var(--lnp-surface-subtle);
    border-radius: var(--radius-md);
    border: 1px solid var(--lnp-border);
    margin-top: var(--space-2xs);
}

.compliance-checks[b-ktyy1pmp4q] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.compliance-checks .form-check[b-ktyy1pmp4q] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-bottom: 0;
    padding-left: 0;
}

.compliance-checks .form-check .form-check-input[b-ktyy1pmp4q],
.email-check .form-check-input[b-ktyy1pmp4q] {
    margin-top: 0;
    margin-left: 0;
    float: none;
}

.compliance-select[b-ktyy1pmp4q] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.compliance-select select[b-ktyy1pmp4q] {
    width: auto;
    min-width: 70px;
}

.email-check[b-ktyy1pmp4q] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding-left: var(--space-lg);
    margin-bottom: 0;
    border-left: 1px solid var(--lnp-border);
}

/* ===== VALIDATION ===== */
.label-panel-container .is-invalid[b-ktyy1pmp4q] {
    border-color: var(--lnp-danger-border) !important;
    background-image: none;
}

.label-panel-container .is-invalid:focus[b-ktyy1pmp4q] {
    border-color: var(--lnp-danger-border) !important;
    box-shadow: 0 0 0 3px var(--lnp-danger-ring), var(--lnp-shadow-input);
}

.field-error[b-ktyy1pmp4q] {
    font-size: 0.68rem;
    color: var(--lnp-danger-fg);
    font-weight: var(--font-weight-medium);
}

/* ===== WARNING (non-blocking) ===== */
.label-panel-container .is-warning[b-ktyy1pmp4q] {
    border-color: var(--amber-500) !important;
    background-image: none;
}

.label-panel-container .is-warning:focus[b-ktyy1pmp4q] {
    border-color: var(--amber-500) !important;
    box-shadow: 0 0 0 3px rgba(var(--amber-500-rgb), 0.15), var(--lnp-shadow-input);
}

.field-warning[b-ktyy1pmp4q] {
    font-size: 0.68rem;
    color: var(--amber-600);
    font-weight: var(--font-weight-medium);
}

.ava-invalid[b-ktyy1pmp4q]  select {
    border-color: var(--lnp-danger-border) !important;
}

/* ===== EMAIL SECTION ===== */
.email-section[b-ktyy1pmp4q] {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: var(--surface-default);
    border-radius: var(--radius-lg);
    border: 1px solid var(--lnp-border);
    box-shadow: var(--lnp-shadow-email);
}

.email-confirm-actions[b-ktyy1pmp4q] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-sm) 0 0;
    border-top: 1px solid var(--nwc-border);
    margin-top: var(--space-sm);
}

/* ===== FOOTER ===== */
.label-panel-footer[b-ktyy1pmp4q] {
    position: sticky;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, var(--gray-50) 20%);
    padding: 0.6rem 0 0 0;
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* ===== OCR SCANNING ===== */
.ocr-scan-section[b-ktyy1pmp4q] {
    padding: 0.4rem;
    background: var(--lnp-surface-subtle);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--lnp-border-input);
}

.ocr-scanning-indicator[b-ktyy1pmp4q] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem var(--space-md);
    background: linear-gradient(135deg, var(--lnp-info-gradient-start) 0%, var(--lnp-info-gradient-end) 100%);
    border: 1px solid var(--lnp-info-border);
    border-radius: var(--radius-md);
    color: var(--lnp-info-fg);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
}

.ocr-complete-indicator[b-ktyy1pmp4q] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem var(--space-md);
    background: linear-gradient(135deg, var(--lnp-success-bg) 0%, var(--lnp-success-gradient-end) 100%);
    border: 1px solid var(--lnp-success-border);
    border-radius: var(--radius-md);
    color: var(--lnp-success-fg);
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    flex-wrap: wrap;
    gap: 0.2rem;
}

.ocr-complete-indicator .btn-link[b-ktyy1pmp4q] {
    padding: 0;
    font-size: 0.72rem;
    color: var(--lnp-success-fg);
}

.ocr-check-badge[b-ktyy1pmp4q] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start; /* flex item inside .nwc-form-field — don't stretch full-width */
    font-size: 0.58rem;
    font-weight: var(--font-weight-bold);
    padding: 0.1rem 0.35rem;
    margin-left: 0.3rem;
    background: linear-gradient(135deg, var(--amber-100) 0%, var(--lnp-badge-gradient-end) 100%);
    color: var(--amber-800);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    vertical-align: middle;
    border: 1px solid var(--lnp-badge-border);
}

.ocr-check-badge[b-ktyy1pmp4q]::before {
    content: "!";
    margin-right: 0.15rem;
    font-size: 0.55rem;
    font-weight: 800;
}

/* ===== AI PROMPT CARD ===== */
.ai-prompt-card[b-ktyy1pmp4q] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: 0.85rem;
    background: linear-gradient(135deg, var(--lnp-info-gradient-start) 0%, var(--lnp-info-gradient-end) 100%);
    border: 1px solid var(--lnp-info-border);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--lnp-info-shadow);
}

.ai-prompt-icon[b-ktyy1pmp4q] {
    font-size: 1.5rem;
    color: var(--lnp-info-icon);
    line-height: 1;
}

.ai-prompt-content[b-ktyy1pmp4q] {
    flex: 1;
}

.ai-prompt-content strong[b-ktyy1pmp4q] {
    color: var(--lnp-info-strong);
    font-size: 0.88rem;
}

.ai-prompt-content p[b-ktyy1pmp4q] {
    color: var(--lnp-muted-body);
    font-size: 0.8rem;
    margin-top: 0.3rem;
}

.ai-prompt-content .btn[b-ktyy1pmp4q] {
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-medium);
}

/* ===== AI ERROR CARD ===== */
.ai-error-card[b-ktyy1pmp4q] {
    display: flex;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: linear-gradient(135deg, var(--lnp-warn-gradient-start) 0%, var(--lnp-warn-gradient-end) 100%);
    border: 1px solid var(--lnp-badge-border);
    border-radius: var(--radius-lg);
    color: var(--lnp-warn-fg);
    font-size: 0.8rem;
    flex-wrap: wrap;
}

.ai-error-card .btn-link[b-ktyy1pmp4q] {
    color: var(--lnp-warn-link);
    font-size: 0.78rem;
    text-decoration: underline;
    font-weight: var(--font-weight-medium);
}

/* ===== MOBILE ===== */
@media (max-width: 768px) {
    .label-form-grid[b-ktyy1pmp4q] {
        grid-template-columns: 1fr;
    }

    .image-upload-group[b-ktyy1pmp4q] {
        flex-direction: column;
    }

    .compliance-row[b-ktyy1pmp4q] {
        flex-direction: column;
        align-items: flex-start;
    }

    .email-check[b-ktyy1pmp4q] {
        border-left: none;
        padding-left: 0;
        border-top: 1px solid var(--lnp-border);
        padding-top: var(--space-sm);
        width: 100%;
    }

    .image-preview img[b-ktyy1pmp4q] {
        max-height: 60px;
    }

    /* iOS zoom prevention */
    .label-panel-container select[b-ktyy1pmp4q],
    .label-panel-container input:not([type="checkbox"])[b-ktyy1pmp4q],
    .label-panel-container .form-control[b-ktyy1pmp4q],
    .label-panel-container .form-select[b-ktyy1pmp4q] {
        min-height: 2.5rem !important;
        font-size: 16px !important;
    }
}
/* /Pages/LabelCola/LabelScanPanel.razor.rz.scp.css */
/* Label Scan Panel — domain-specific styles only */

.label-scan-panel[b-4otxtns9uo] {
    padding: var(--space-lg);
}

/* Upload Section */
.scan-upload-section[b-4otxtns9uo] {
    padding: var(--space-lg) 0;
}

/* Results */
.scan-results[b-4otxtns9uo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.results-form[b-4otxtns9uo] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 60vh;
    overflow-y: auto;
    padding-right: var(--space-sm);
}

/* Optional Fields */
.optional-fields[b-4otxtns9uo] {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-md);
}

.optional-fields summary[b-4otxtns9uo] {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--gray-600);
    user-select: none;
}

.optional-fields summary:hover[b-4otxtns9uo] {
    color: var(--gray-700);
}

.optional-content[b-4otxtns9uo] {
    padding-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Source Badge */
.source-badge[b-4otxtns9uo] {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-xs);
    background: var(--blue-100);
    color: var(--blue-500);
    text-transform: capitalize;
}

/* ScanField styling (.scan-field-label / .confidence-badge / .source-indicator) hoisted to
   site.css 2026-08-01 — it targets a child component, so global is the correct home. */

/* Mobile */
@media (max-width: 576px) {
    .results-form[b-4otxtns9uo] {
        max-height: 50vh;
    }
}
/* /Pages/LabelCola/SearchSortBar.razor.rz.scp.css */
.search-sort-bar[b-vj6nao395l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    border: 1px solid var(--gray-200);
}

/* Search Section */
.search-section[b-vj6nao395l] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1;
    min-width: 250px;
}

.search-input-wrapper[b-vj6nao395l] {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-input[b-vj6nao395l] {
    width: 100%;
    padding: var(--space-sm) var(--space-2xl) var(--space-sm) var(--space-md);
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background: var(--surface-default);
}

.search-input:focus[b-vj6nao395l],
.sort-select:focus[b-vj6nao395l] {
    outline: none;
    border-color: var(--accent-preview);
    box-shadow: 0 0 0 3px var(--accent-preview-soft);
}

.clear-btn[b-vj6nao395l] {
    position: absolute;
    right: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--gray-600);
    cursor: pointer;
    padding: var(--space-2xs);
    font-size: 0.875rem;
    line-height: 1;
}

.clear-btn:hover[b-vj6nao395l] {
    color: var(--red-500);
}

.result-count[b-vj6nao395l] {
    color: var(--gray-600);
    font-size: 0.875rem;
    white-space: nowrap;
    font-weight: var(--font-weight-medium);
}

/* Sort Section */
.sort-section[b-vj6nao395l] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.sort-group label[b-vj6nao395l] {
    color: var(--gray-700);
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    margin: 0;
    white-space: nowrap;
}

/* Override global select styles */
.sort-select[b-vj6nao395l] {
    display: inline-block;
    width: auto;
    min-width: 120px;
    padding: 0.4rem var(--space-2xl) 0.4rem var(--space-md);
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    background: var(--surface-default) var(--select-caret-icon) no-repeat right 0.5rem center/12px 12px;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.sort-direction-btn[b-vj6nao395l] {
    padding: 0.4rem var(--space-md);
    border: 1px solid var(--gray-400);
    border-radius: var(--radius-md);
    background: var(--surface-default);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

.sort-direction-btn:hover[b-vj6nao395l] {
    background: var(--gray-200);
    border-color: var(--gray-500);
}

/* Action Section */
.action-section[b-vj6nao395l] {
    margin-left: auto;
}

.action-section .btn[b-vj6nao395l] {
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
    .search-sort-bar[b-vj6nao395l] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-section[b-vj6nao395l] {
        width: 100%;
    }

    .search-input-wrapper[b-vj6nao395l] {
        max-width: none;
    }

    .sort-section[b-vj6nao395l] {
        width: 100%;
        justify-content: flex-start;
    }

    .sort-group[b-vj6nao395l] {
        width: 100%;
    }

    .sort-select[b-vj6nao395l] {
        flex: 1;
    }

    .action-section[b-vj6nao395l] {
        width: 100%;
        margin-left: 0;
    }

    .action-section .btn[b-vj6nao395l] {
        width: 100%;
    }
}
/* /Pages/Lab/BlockMaturityBoard.razor.rz.scp.css */
/* Block Maturity — a ranking, not a spreadsheet. Where MaturityWorksheet deliberately reads like
   the Excel tab it replaced (bordered grid, dense entry rows), this page is scanned top-down for
   "what is ready", so the ripest number carries the weight and everything supporting it recedes.
   Scoped, token-based. */

.bmb-page[b-lnwdr3ihfw] { display: flex; flex-direction: column; height: 100%; padding: var(--space-2xs) var(--space-md); }

.bmb-header[b-lnwdr3ihfw] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
              gap: var(--space-md); padding: var(--space-2xs) 0; }

.bmb-controls[b-lnwdr3ihfw] { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
.bmb-controls .form-select[b-lnwdr3ihfw] { width: auto; height: 34px; border-radius: var(--radius-pill); }
.bmb-search[b-lnwdr3ihfw] { width: 15rem; height: 34px; border-radius: var(--radius-pill); }

/* site.css styles .btn-secondary for <button>; as an <a> it inherits display:block, no padding and
   the link underline, which renders as a squashed grey slab. Anchor, not button, because this is
   navigation — middle-click and "open in new tab" should work. */
.bmb-controls a.btn-secondary[b-lnwdr3ihfw] {
    display: inline-flex; align-items: center; height: 34px;
    padding: 0 var(--space-md); border-radius: var(--radius-pill);
    text-decoration: none; white-space: nowrap;
}
.bmb-controls a.btn-secondary:hover[b-lnwdr3ihfw] { text-decoration: none; }

.bmb-summary[b-lnwdr3ihfw] { margin: 0 0 var(--space-2xs) 0; color: var(--text-secondary); font-size: 0.85rem;
               display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }

.bmb-chip[b-lnwdr3ihfw] { border-radius: var(--radius-pill); padding: 0.05rem 0.5rem; font-size: 0.78rem; font-weight: 600; }
.bmb-chip-ripe[b-lnwdr3ihfw]  { background: var(--success-subtle, #e7f4e8); color: var(--success-strong, #2f7d32); }
.bmb-chip-stale[b-lnwdr3ihfw] { background: var(--warning-subtle, #fdf3e0); color: var(--warning-strong, #9a6a00); }

.bmb-scroll[b-lnwdr3ihfw] { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border-subtle);
              border-radius: var(--radius-md); background: var(--surface-default); }

.bmb-grid[b-lnwdr3ihfw] { width: 100%; }

.bmb-grid th[b-lnwdr3ihfw] {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-muted); font-weight: 600; text-align: left;
    padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.bmb-grid td[b-lnwdr3ihfw] { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.bmb-grid tbody tr:hover td[b-lnwdr3ihfw] { background: var(--surface-hover, rgba(0, 0, 0, 0.02)); }

.bmb-num[b-lnwdr3ihfw], .bmb-grid th.bmb-num[b-lnwdr3ihfw] { text-align: right; }
.bmb-col-block[b-lnwdr3ihfw] { min-width: 9rem; }
.bmb-col-sampled[b-lnwdr3ihfw] { min-width: 6.5rem; }

/* A stale row is dimmed rather than reddened: the block is not in trouble, the DATA is old, and
   colouring it as an alert would compete with the ripeness signal this page exists to carry. */
.bmb-row-stale td[b-lnwdr3ihfw] { background: var(--surface-muted); }

.bmb-block strong[b-lnwdr3ihfw] { color: var(--text-primary); }
.bmb-dim[b-lnwdr3ihfw], .bmb-dim-cell[b-lnwdr3ihfw] { color: var(--text-tertiary, #999); }
.bmb-block .bmb-dim[b-lnwdr3ihfw] { display: block; font-size: 0.75rem; font-weight: normal; }

.bmb-value[b-lnwdr3ihfw] { font-weight: 600; color: var(--text-primary); }
.bmb-prev[b-lnwdr3ihfw]  { display: block; font-size: 0.72rem; color: var(--text-tertiary, #aaa); font-weight: normal; }
.bmb-rate[b-lnwdr3ihfw]  { font-weight: 600; color: var(--text-secondary); }

.bmb-brix .bmb-value[b-lnwdr3ihfw] { font-size: 1.05rem; }
.bmb-ripe[b-lnwdr3ihfw] { color: var(--success-strong, #2f7d32); }

.bmb-delta[b-lnwdr3ihfw] { font-size: 0.75rem; font-weight: 600; margin-left: 0.25rem; }
.bmb-up[b-lnwdr3ihfw]   { color: var(--success-strong, #2f7d32); }
.bmb-down[b-lnwdr3ihfw] { color: var(--warning-strong, #9a6a00); }

.bmb-sampled .bmb-age[b-lnwdr3ihfw] { display: block; font-size: 0.72rem; color: var(--text-tertiary, #8a7f90); }
.bmb-age-stale[b-lnwdr3ihfw] { color: var(--warning-strong, #9a6a00); font-weight: 600; }

@media (max-width: 900px) {
    .bmb-search[b-lnwdr3ihfw] { width: 100%; }
    .bmb-col-varietal[b-lnwdr3ihfw], .bmb-grid th:nth-child(3)[b-lnwdr3ihfw] { display: none; }
}
/* /Pages/Lab/FilterabilityDashboard.razor.rz.scp.css */
.filterability-thumb[b-3unwai99in] {
    width: 48px;
    height: 60px;
    object-fit: cover;
    border: 1px solid var(--gray-300);
    border-radius: 2px;
    display: inline-block;
}
/* /Pages/Lab/FilterabilityDetailPanel.razor.rz.scp.css */
.detail-panel[b-42bj7z4vok] {
    padding: var(--space-lg);
    outline: none;
}

.detail-thumb[b-42bj7z4vok] {
    width: 80px;
    height: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
}

.section-label[b-42bj7z4vok] {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary);
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: var(--space-2xs);
    margin-bottom: var(--space-sm);
}

.detail-footer[b-42bj7z4vok] {
    position: sticky;
    bottom: 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    padding: var(--space-sm) 0;
    margin-top: var(--space-lg);
}
/* /Pages/Lab/FilterabilityFromIntake.razor.rz.scp.css */
.filterability-from-intake-page[b-udb253pa1d] {
    padding: var(--space-lg);
    max-width: 1100px;
}
/* /Pages/Lab/LabManager.razor.rz.scp.css */
/* ── Do NOT re-add a per-page grid-template-columns here ──────────────────────
   This file used to carry one, and on 2026-09-14 it silently blanked the page.

   Lab Manager supplies neither TreeContent nor InspectorContent, so ManagerShell
   stamps it `ms-no-tree ms-no-inspector`. Back in 2026-07 the shell had no general
   rule for that, so this file collapsed .ms-workspace to a single `1fr` track and
   re-pinned .ms-pane-grid from the shell's column 3 to column 1 to match.

   The shell then grew the general rules — `.ms-shell.ms-no-tree .ms-workspace`
   (#548, 09-02) and `.ms-shell.ms-no-tree.ms-no-inspector .ms-workspace` (#674,
   09-14) — which keep all five tracks and zero the unused ones:
   `0 0 minmax(0, 1fr) 0 0`. The content track is still column 3.

   The 09-14 rule ties this file's selector on specificity (both (0,5,0), counting
   the scoped-CSS attribute) and wins on source order, so the SHELL supplied the
   five-track template while THIS FILE still won the more-specific pane pin and
   held the grid in column 1 — a 0px track. Measured on prod 2026-09-21 in Chrome
   at 1536x695 CSS px (dPR 1.25): .ms-pane-grid was 2px wide inside a 1425px
   workspace, overflow:hidden clipped the rest, and /lab/manager rendered its two
   tabs above an empty pane. Both tabs' content was in the DOM the whole time.

   Removing the override lets the shell own the tracks for every treeless,
   inspectorless manager at once — which is what site.css already warns about at
   the `.comms-log-shell` note. Only the pane's own scrolling stays here. */

/* Lab's two tabs are plain report pages with no inner scroll region of their own,
   so the pane itself has to scroll (.ms-pane is overflow:hidden by default). */
.lab-manager-root[b-zai5fet29r]  .ms-shell.lab-shell-skin .ms-pane-grid {
    overflow-y: auto;
}
/* /Pages/Lab/MaturityWorksheet.razor.rz.scp.css */
/* Vineyard Analysis Worksheet — deliberately spreadsheet-plain: the crew is trading a familiar
   Excel tab for this page, so it should read like the sheet (bordered grid, quiet header, dense
   rows), not like an app form. Scoped, token-based. */

.msw-page[b-dvc0oyw7zz] { display: flex; flex-direction: column; height: 100%; padding: var(--space-2xs) var(--space-md); }

.msw-header[b-dvc0oyw7zz] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
              gap: var(--space-md); padding: var(--space-2xs) 0; }
/* Title = .nwc-page-title, table base = .nwc-data-grid (site.css utilities). */
.msw-controls[b-dvc0oyw7zz] { display: flex; align-items: center; gap: var(--space-sm); }
.msw-controls .form-select[b-dvc0oyw7zz] { width: auto; height: 34px; border-radius: var(--radius-pill); }
.msw-hint[b-dvc0oyw7zz] { color: var(--text-secondary); font-size: 0.85rem; }
/* The Block Maturity link is an <a> among <button>s. site.css styles .btn-secondary for buttons,
   so as an anchor it would inherit display:block, no padding and the link underline. */
.msw-controls a.btn-secondary[b-dvc0oyw7zz] {
    display: inline-flex; align-items: center; height: 34px;
    padding: 0 var(--space-md); border-radius: var(--radius-pill);
    text-decoration: none; white-space: nowrap;
}
.msw-controls a.btn-secondary:hover[b-dvc0oyw7zz] { text-decoration: none; }

.msw-scroll[b-dvc0oyw7zz] { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--border-subtle);
              border-radius: var(--radius-md); background: var(--surface-default); }

.msw-grid th[b-dvc0oyw7zz] {
    position: sticky; top: 0; z-index: 1;
    background: var(--surface-muted); font-weight: 600; text-align: left;
    padding: 0.4rem 0.5rem; border: 1px solid var(--border-subtle); border-top: none;
}
.msw-grid td[b-dvc0oyw7zz] { padding: 0.25rem 0.5rem; border: 1px solid var(--border-subtle); vertical-align: middle; }
.msw-grid tbody tr:nth-child(even):not(.msw-entry-row):not(.msw-warning-row)[b-dvc0oyw7zz] { background: var(--surface-subtle); }

.msw-col-num[b-dvc0oyw7zz] { width: 3rem; }
.msw-col-date[b-dvc0oyw7zz] { width: 8.5rem; }
.msw-col-client[b-dvc0oyw7zz] { width: 6.5rem; }
.msw-col-sample[b-dvc0oyw7zz] { width: 14rem; }
.msw-col-by[b-dvc0oyw7zz] { width: 4.5rem; }
.msw-col-notes[b-dvc0oyw7zz] { min-width: 12rem; }
.msw-col-tools[b-dvc0oyw7zz] { width: 8rem; }
.msw-edit-tools[b-dvc0oyw7zz] { display: flex; gap: 0.25rem; flex-wrap: nowrap; }

.msw-entry-row[b-dvc0oyw7zz] { background: var(--surface-emphasis, var(--surface-subtle)); }
.msw-entry-row td[b-dvc0oyw7zz] { padding: 0.3rem 0.35rem; }
.msw-in[b-dvc0oyw7zz] { width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
          padding: 0.2rem 0.4rem; background: var(--surface-default); font-size: 0.88rem; }
/* Lighter focus than the app-wide accent ring — in a dense grid the border shift is enough. */
.msw-in:focus[b-dvc0oyw7zz] { outline: none; border-color: var(--border-focus); }
.msw-num[b-dvc0oyw7zz] { text-align: right; }
.msw-by[b-dvc0oyw7zz] { text-transform: uppercase; }

.msw-warning-row td[b-dvc0oyw7zz] { background: var(--warning-50, #fff9ec); color: var(--warning-800, #7a5600);
                      font-size: 0.85rem; }

.msw-row-unlinked td[b-dvc0oyw7zz] { background: var(--warning-50, #fff9ec); }
.msw-warn-icon[b-dvc0oyw7zz] { color: var(--warning-700, #9a6a00); margin-left: 0.35rem; cursor: help; }
.msw-notes[b-dvc0oyw7zz] { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msw-dim[b-dvc0oyw7zz] { color: var(--text-secondary); }
.msw-danger[b-dvc0oyw7zz] { color: var(--danger-700, #b02a37); }
/* /Pages/Lab/VineyardProjectedAnalysisPanel.razor.rz.scp.css */
.flex-row-end[b-ecly60gs9b] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: end;
    gap: var(--space-xs);
}

.p-as-h4[b-ecly60gs9b] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}
/* /Pages/Maintenance/HeaterLogPanel.razor.rz.scp.css */
/* Scoped CSS is safe HERE — the panel is only ever rendered in circuit. The sheet it hosts
   (HeaterLogSheet) is the one that must keep its styles inline, because it is also rendered
   out of circuit for the PDF where the isolation bundle is not linked. */

.heater-log-scroll[b-k87g4853kk] {
    /* The sheet is a fixed 10.2in wide so the PDF layout is stable; on a narrow screen it
       scrolls inside the drawer rather than reflowing, which would stop the screen from being
       an honest preview of the paper. */
    overflow-x: auto;
    padding-bottom: 1rem;
}
/* /Pages/Maintenance/HeaterManager.razor.rz.scp.css */
/* Heater Manager — Maintenance → Heater Manager (/maintenance/heaters).
   Mirrors MaintenanceMain.razor.css so the two Maintenance surfaces read as one family.
   ⚠ .filter-pill / .pill-count are SCOPED to MaintenanceMain, not global, so they are
   redefined here rather than inherited — copying the values keeps the two in visual sync. */

/* ─── Layout ─── */
.heater-page[b-zzqri0trs4] {
    display: flex;
    flex-direction: column;
    height: 98vh;
    overflow: hidden;
    max-width: 100%;
    margin-top: -1.1rem;
    margin-left: -0.5rem;
}

/* ─── Sticky header ─── */
.heater-header[b-zzqri0trs4] {
    position: sticky;
    top: 0;
    z-index: var(--z-base);
    background: var(--white);
    border-bottom: 1px solid var(--nwc-border, var(--gray-300));
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    flex-shrink: 0;
}

.heater-title[b-zzqri0trs4] {
    margin: 0;
    font-weight: var(--font-weight-semibold);
}

/* ─── Filter bar ─── */
.heater-filter-bar[b-zzqri0trs4] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.heater-filter-label[b-zzqri0trs4] {
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-600);
    white-space: nowrap;
}

.heater-pills[b-zzqri0trs4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.filter-pill[b-zzqri0trs4] {
    padding: var(--space-2xs) 0.6rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-300);
    background: transparent;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--gray-700);
    white-space: nowrap;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.filter-pill:hover[b-zzqri0trs4] {
    border-color: var(--blue-500);
    color: var(--blue-500);
}

.filter-pill.active[b-zzqri0trs4] {
    background-color: var(--blue-500);
    color: var(--white);
    border-color: var(--blue-500);
}

.pill-count[b-zzqri0trs4] {
    font-size: var(--font-size-xs);
    opacity: 0.85;
    margin-left: 0.15rem;
}

.heater-search[b-zzqri0trs4] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--gray-600);
    margin-left: auto;
}

.heater-search input[b-zzqri0trs4] {
    min-width: 190px;
}

/* ─── Body ─── */
.heater-body[b-zzqri0trs4] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.heater-table thead th[b-zzqri0trs4] {
    position: sticky;
    top: 0;
    background: var(--gray-100, var(--white));
    z-index: 1;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--gray-600);
    white-space: nowrap;
}

.heater-table td[b-zzqri0trs4] {
    font-size: 0.86rem;
}

/* A closed heater stays readable but recedes — the running ones are what the cellar scans for. */
.heater-row-closed td[b-zzqri0trs4] {
    color: var(--gray-600);
}

.heater-owner[b-zzqri0trs4] {
    max-width: 190px;
}

.heater-author[b-zzqri0trs4] {
    max-width: 110px;
}

/* ─── Running-but-not-heating warning ───
   Amber, not red: a heater that has finished its job is a housekeeping item, not a fault. Red is
   reserved on this page for the load failure, which is the one thing that actually breaks it. */
.heater-alert[b-zzqri0trs4] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin: var(--space-md) var(--space-lg) 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--amber-300);
    border-left: 3px solid var(--amber-500);
    border-radius: var(--radius-md);
    background: var(--amber-50);
    color: var(--amber-800);
}

.heater-alert-icon[b-zzqri0trs4] {
    color: var(--amber-600);
    font-size: 0.95rem;
    line-height: 1.35;
    flex-shrink: 0;
}

.heater-alert-body[b-zzqri0trs4] {
    min-width: 0;
}

.heater-alert-title[b-zzqri0trs4] {
    font-size: 0.86rem;
    font-weight: var(--font-weight-semibold);
}

.heater-alert-hint[b-zzqri0trs4] {
    font-size: 0.76rem;
    opacity: 0.85;
}

.heater-alert-chips[b-zzqri0trs4] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.4rem;
}

/* Tank · why · how long, in one chip — the three things needed to decide whether to close it. */
.heater-alert-chip[b-zzqri0trs4] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid var(--amber-300);
    border-radius: var(--radius-md);
    background: var(--white);
    color: var(--amber-800);
    font-size: 0.76rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.heater-alert-chip:hover[b-zzqri0trs4] {
    border-color: var(--amber-500);
    background: var(--amber-100);
}

/* Signed-out readers get the same information, without an action they cannot take. */
.heater-alert-chip-static[b-zzqri0trs4] {
    cursor: default;
}

.heater-alert-chip-static:hover[b-zzqri0trs4] {
    border-color: var(--amber-300);
    background: var(--white);
}

.heater-alert-tank[b-zzqri0trs4] {
    font-weight: var(--font-weight-semibold);
}

.heater-alert-why[b-zzqri0trs4],
.heater-alert-age[b-zzqri0trs4] {
    font-size: 0.7rem;
    opacity: 0.8;
}

/* Replaces the red "on" badge on a row the board says is idle — one state per row, never both,
   so the tank column reads as a single verdict rather than two competing ones. */
.heater-not-heating[b-zzqri0trs4] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.05rem 0.4rem;
    border-radius: var(--radius-sm, 0.25rem);
    background: var(--amber-100);
    color: var(--amber-800);
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}
/* /Pages/Maintenance/HeaterStartSheetPanel.razor.rz.scp.css */
/* Scoped CSS is safe HERE — this panel is only ever rendered in circuit. The sheet it hosts
   (HeaterLogSheet) is the one that must keep its styles inline, because it is also rendered
   out of circuit for the PDF where the isolation bundle is not linked. */

.heater-log-scroll[b-p8fmmu862y] {
    /* The sheet is a fixed 10.2in wide so the PDF layout is stable; on a narrow screen it
       scrolls inside the drawer rather than reflowing, which would stop the screen from being
       an honest preview of the paper. */
    overflow-x: auto;
    padding-bottom: 1rem;
}

/* The reason box sits under the sheet, aligned to it, and is always open. ⛔ Same 10.2in width
   as the sheet so it reads as an annotation ON the work order rather than a stray form field —
   but no dashed rule above it, because that line is what says "the collapsed part starts here".
   The bottom margin is smaller than .heater-offsheet's so the two read as one annotation stack. */
.heater-reason[b-p8fmmu862y] {
    width: 10.2in;
    margin: 0 auto 0.25rem;
    padding: 0.75rem 24px 0;
}

/* Wide enough for the longest suggestion plus the browser's datalist arrow, and no wider — a
   reason is a few words, and a full-width box invites a paragraph the column cannot hold (50). */
.heater-reason .form-control[b-p8fmmu862y] {
    max-width: 22rem;
}

/* Sits under the sheet and reads as an annotation on it, never as part of it — same width as
   the sheet, but plainly app chrome. If this ever starts looking like a row of the work order,
   someone will expect it to print. */
.heater-offsheet[b-p8fmmu862y] {
    width: 10.2in;
    margin: 0 auto 1rem;
    padding: 0.75rem 24px 1rem;
    border-top: 1px dashed var(--bs-border-color);
}

/* A <summary>, so the block collapses. Bootstrap gives summary no affordance of its own, and the
   default marker sits too far from the text to read as one control at this size. */
.heater-offsheet-title[b-p8fmmu862y] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
    cursor: pointer;
    list-style-position: inside;
    user-select: none;
}

.heater-offsheet-title:hover[b-p8fmmu862y] {
    color: var(--bs-body-color);
}

.heater-offsheet[open] .heater-offsheet-title[b-p8fmmu862y] {
    margin-bottom: 0.5rem;
}
/* /Pages/Maintenance/HeaterTemplateDrawer.razor.rz.scp.css */
/* Scoped CSS is safe here: this drawer is only ever rendered in circuit. The SHEET next to it
   (HeaterLogSheet) is the one that must keep its styles inline, because it is also rendered out of
   circuit for the PDF where the isolation bundle is not linked. */

.heater-template-drawer[b-pof7yzzxe7] {
    font-size: 0.875rem;
}

/* The aside itself is the scroll box (site.css, Pattern 17: sticky + max-height + overflow-y).
   Pinning the title and the filters inside it keeps the controls reachable while a long list
   scrolls — otherwise the Running/Closed/All switch is the first thing to leave the screen. */
.htd-head[b-pof7yzzxe7],
.heater-template-drawer .btn-group[b-pof7yzzxe7],
.heater-template-drawer .input-group[b-pof7yzzxe7] {
    position: sticky;
    z-index: 2;
    background: var(--surface-default);
}

.htd-head[b-pof7yzzxe7] { top: 0; }
.heater-template-drawer .btn-group[b-pof7yzzxe7] { top: 2.6rem; }
.heater-template-drawer .input-group[b-pof7yzzxe7] { top: 4.6rem; }

.htd-title[b-pof7yzzxe7] {
    font-weight: 600;
    line-height: 1.2;
}

.htd-sub[b-pof7yzzxe7] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    margin-bottom: 0.5rem;
}

.htd-list[b-pof7yzzxe7] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* ⛔ Not a button. The card is READ-ONLY — the only thing that acts is .htd-use inside it, so
   scanning the list can never fill the sheet by accident (Jeff, 2026-08-25). The card still
   shows what the spec will bring, so the button is a decision and not a gamble. */
.htd-row[b-pof7yzzxe7] {
    position: relative;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    background: var(--surface-default);
    line-height: 1.3;
}

.htd-row:hover[b-pof7yzzxe7] {
    border-color: var(--bs-danger-border-subtle, #f1aeb5);
}

.htd-row-busy[b-pof7yzzxe7] {
    background: var(--bs-danger-bg-subtle, #fdf2f3);
}

/* Rides the tank line instead of taking a row of its own (Jeff, 2026-08-25: it "would save scroll
   space between contracts"). flex-shrink: 0 so a long tank code squeezes the code, never the
   button — a half-clipped "Use Sp…" would be worse than a wrapped lot line. */
.htd-use[b-pof7yzzxe7] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    line-height: 1.25;
}

.htd-row-top[b-pof7yzzxe7] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.htd-tank[b-pof7yzzxe7] {
    font-weight: 700;
}

.htd-pill[b-pof7yzzxe7] {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.1rem 0.35rem;
}

.htd-date[b-pof7yzzxe7] {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

/* The date moved down here when the button took its place on the tank line. The lot code is the
   part that truncates; the date is short, fixed-width and never squeezed. */
.htd-lot[b-pof7yzzxe7] {
    display: flex;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.8125rem;
}

.htd-lot-code[b-pof7yzzxe7] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.htd-lot .htd-date[b-pof7yzzxe7] {
    margin-left: auto;
    flex-shrink: 0;
}

.htd-owner[b-pof7yzzxe7] {
    color: var(--bs-secondary-color);
}

.htd-settings[b-pof7yzzxe7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

.htd-chip[b-pof7yzzxe7] {
    font-size: 0.6875rem;
    padding: 0.05rem 0.35rem;
    border-radius: 0.25rem;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    white-space: nowrap;
}

/* /Pages/Maintenance/MaintenanceControlPanel.razor.rz.scp.css */
.wo-summary[b-cw4o1gooxt] {
    padding: var(--space-md);
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.wo-description[b-cw4o1gooxt] {
    white-space: pre-line;
    font-size: var(--font-size-base);
    max-height: 120px;
    overflow-y: auto;
    line-height: 1.45;
}

.comm-history[b-cw4o1gooxt] {
    max-height: 300px;
    overflow-y: auto;
}

.comm-entry[b-cw4o1gooxt] {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--maint-divider);
}

.comm-entry:last-child[b-cw4o1gooxt] {
    border-bottom: none;
}

.comm-date[b-cw4o1gooxt] {
    font-size: var(--font-size-sm);
    color: var(--maint-text-faint);
    font-weight: var(--font-weight-medium);
}

.comm-message[b-cw4o1gooxt] {
    white-space: pre-line;
    font-size: var(--font-size-base);
    margin-top: 4px;
    line-height: 1.4;
}

.comm-recipients[b-cw4o1gooxt] {
    margin-top: 4px;
}
/* /Pages/Maintenance/MaintenanceMain.razor.rz.scp.css */
/* ─── Layout ─── */
.maintenance-page[b-k8pimap89r] {
    display: flex;
    flex-direction: column;
    height: 98vh;
    overflow: hidden;
    max-width: 100%;
    margin-top: -1.1rem;
    margin-left: -0.5rem;
}

/* ─── Sticky Header ─── */
.maint-header[b-k8pimap89r] {
    position: sticky;
    top: 0;
    z-index: var(--z-base);
    background: var(--white);
    border-bottom: 1px solid var(--nwc-border, var(--gray-300));
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
    flex-shrink: 0;
}

.maint-title[b-k8pimap89r] {
    margin: 0;
    font-weight: var(--font-weight-semibold);
}

/* ─── Badges (on rows) ─── */
.badge-new[b-k8pimap89r] { background-color: var(--blue-500); color: var(--white); }
.badge-inprocess[b-k8pimap89r] { background-color: var(--orange-500); color: var(--white); }
.badge-completed[b-k8pimap89r] { background-color: var(--green-600); color: var(--white); }
.badge-cancelled[b-k8pimap89r] { background-color: var(--gray-600); color: var(--white); }
.badge-critical[b-k8pimap89r] { background-color: var(--red-500); color: var(--white); }
.badge-high[b-k8pimap89r] { background-color: var(--orange-500); color: var(--white); }
.badge-medium[b-k8pimap89r] { background-color: var(--blue-500); color: var(--white); }
.badge-low[b-k8pimap89r] { background-color: var(--gray-600); color: var(--white); }

/* ─── Unified Filter Bar ─── */
.maint-filter-bar[b-k8pimap89r] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.maint-filter-label[b-k8pimap89r] {
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-600);
    white-space: nowrap;
}

.maint-pills[b-k8pimap89r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.maint-filter-divider[b-k8pimap89r] {
    width: 1px;
    height: 24px;
    background: var(--gray-300);
}

.filter-pill[b-k8pimap89r] {
    padding: var(--space-2xs) 0.6rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-300);
    background: transparent;
    font-size: 0.78rem;
    cursor: pointer;
    color: var(--gray-700);
    white-space: nowrap;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.filter-pill:hover[b-k8pimap89r] {
    border-color: var(--blue-500);
    color: var(--blue-500);
}

.filter-pill.active[b-k8pimap89r] {
    background-color: var(--blue-500);
    color: var(--white);
    border-color: var(--blue-500);
}

/* Status pill active colors */
.filter-pill.pill-new.active[b-k8pimap89r]        { background-color: var(--blue-500); border-color: var(--blue-500); }
.filter-pill.pill-inprocess.active[b-k8pimap89r]   { background-color: var(--orange-500); border-color: var(--orange-500); }
.filter-pill.pill-completed.active[b-k8pimap89r]   { background-color: var(--green-600); border-color: var(--green-600); }
.filter-pill.pill-cancelled.active[b-k8pimap89r]   { background-color: var(--gray-600); border-color: var(--gray-600); }

/* Urgency pill colored dots */
.filter-pill.pill-critical[b-k8pimap89r]::before,
.filter-pill.pill-high[b-k8pimap89r]::before,
.filter-pill.pill-medium[b-k8pimap89r]::before,
.filter-pill.pill-low[b-k8pimap89r]::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.filter-pill.pill-critical[b-k8pimap89r]::before  { background-color: var(--red-500); }
.filter-pill.pill-high[b-k8pimap89r]::before      { background-color: var(--orange-500); }
.filter-pill.pill-medium[b-k8pimap89r]::before    { background-color: var(--blue-500); }
.filter-pill.pill-low[b-k8pimap89r]::before       { background-color: var(--gray-600); }

/* Urgency pill active colors */
.filter-pill.pill-critical.active[b-k8pimap89r]   { background-color: var(--red-500); border-color: var(--red-500); }
.filter-pill.pill-high.active[b-k8pimap89r]       { background-color: var(--orange-500); border-color: var(--orange-500); }
.filter-pill.pill-medium.active[b-k8pimap89r]     { background-color: var(--blue-500); border-color: var(--blue-500); }
.filter-pill.pill-low.active[b-k8pimap89r]        { background-color: var(--gray-600); border-color: var(--gray-600); }

/* Hide dot when pill is active (white text on colored bg) */
.filter-pill.pill-critical.active[b-k8pimap89r]::before,
.filter-pill.pill-high.active[b-k8pimap89r]::before,
.filter-pill.pill-medium.active[b-k8pimap89r]::before,
.filter-pill.pill-low.active[b-k8pimap89r]::before {
    background-color: var(--maint-dot-hidden-bg);
}

.pill-count[b-k8pimap89r] {
    font-size: var(--font-size-xs);
    opacity: 0.85;
    margin-left: 0.15rem;
}

/* ─── Search + Sort ─── */

.maint-search[b-k8pimap89r] {
    flex: 1;
    min-width: 200px;
}

.maint-sort[b-k8pimap89r] {
    width: auto;
    min-width: 150px;
}

/* ─── Row List ─── */
.maint-list[b-k8pimap89r] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-sm) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.maint-row[b-k8pimap89r] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0.65rem var(--space-md);
    border-left: 4px solid var(--gray-600);
    border-bottom: 1px solid var(--nwc-border-light);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.maint-row:hover[b-k8pimap89r] {
    background-color: var(--nwc-bg-hover, var(--gray-50));
}

/* Urgency left-border colors */
.maint-row.urgency-critical[b-k8pimap89r] { border-left-color: var(--red-500); }
.maint-row.urgency-high[b-k8pimap89r]     { border-left-color: var(--orange-500); }
.maint-row.urgency-medium[b-k8pimap89r]   { border-left-color: var(--blue-500); }
.maint-row.urgency-low[b-k8pimap89r]      { border-left-color: var(--gray-600); }

.maint-row-content[b-k8pimap89r] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.maint-row-desc[b-k8pimap89r] {
    font-size: 0.88rem;
    font-weight: var(--font-weight-medium);
    color: var(--nwc-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.maint-row-meta[b-k8pimap89r] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--gray-700);
    flex-wrap: wrap;
}

.maint-row-meta .badge[b-k8pimap89r] {
    font-size: 0.68rem;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

.days-open[b-k8pimap89r] {
    color: var(--red-500);
    font-weight: var(--font-weight-medium);
}

.maint-row-actions[b-k8pimap89r] {
    display: flex;
    gap: var(--space-2xs);
    flex-shrink: 0;
}

.maint-row-actions .btn[b-k8pimap89r] {
    padding: var(--space-2xs) 0.4rem;
    font-size: 0.78rem;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}

.maint-row-actions .btn:hover[b-k8pimap89r] {
    background-color: var(--blue-500);
    border-color: var(--blue-500);
    color: var(--white);
}

/* ─── Empty State ─── */
.maint-empty[b-k8pimap89r] {
    text-align: center;
    padding: var(--space-3xl) var(--space-lg);
    color: var(--gray-600);
}

.maint-empty i[b-k8pimap89r] {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-sm);
}

/* ─── Image Thumbnails ─── */
.maint-thumbs[b-k8pimap89r] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: var(--space-2xs);
}

.maint-thumb[b-k8pimap89r] {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
}

.maint-thumb-more[b-k8pimap89r] {
    font-size: 0.68rem;
    color: var(--gray-600);
    font-weight: var(--font-weight-medium);
}

/* ─── Mobile ─── */
@media (max-width: 768px) {
    .maint-list[b-k8pimap89r] {
        padding: var(--space-2xs) var(--space-sm);
    }

    .maint-header[b-k8pimap89r] {
        padding: var(--space-sm);
    }

    .maint-header-top[b-k8pimap89r] {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .maint-filter-bar[b-k8pimap89r] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .maint-filter-divider[b-k8pimap89r] {
        display: none;
    }

    .maint-search[b-k8pimap89r] {
        width: 100%;
    }

    .maint-sort[b-k8pimap89r] {
        width: 100%;
    }

    .maint-row[b-k8pimap89r] {
        flex-wrap: wrap;
    }

    .maint-row-desc[b-k8pimap89r] {
        white-space: normal;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .maint-row-actions .btn[b-k8pimap89r] {
        min-width: 44px;
        min-height: 44px;
        padding: 0.35rem var(--space-sm);
    }
}
/* /Pages/Maintenance/MaintenancePanel.razor.rz.scp.css */
/* ─── Photo Gallery ─── */
.photo-gallery[b-xtgiouikkx] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
}

.photo-tile[b-xtgiouikkx] {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--gray-300);
    background: var(--gray-50);
    cursor: pointer;
}

.photo-tile img[b-xtgiouikkx] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.photo-tile:hover img[b-xtgiouikkx] {
    transform: scale(1.08);
}

.photo-overlay[b-xtgiouikkx] {
    position: absolute;
    inset: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.photo-tile:hover .photo-overlay[b-xtgiouikkx] {
    background: var(--maint-photo-overlay-hover-bg);
}

.photo-expand[b-xtgiouikkx] {
    opacity: 0;
    color: var(--white);
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--overlay-backdrop-dim);
    border-radius: 50%;
    transition: opacity 0.2s ease, transform 0.2s ease;
    text-decoration: none;
}

.photo-tile:hover .photo-expand[b-xtgiouikkx] {
    opacity: 1;
}

.photo-expand:hover[b-xtgiouikkx] {
    transform: scale(1.1);
    background: rgba(var(--blue-500-rgb), 0.8);
    color: var(--white);
}

.photo-count[b-xtgiouikkx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-200);
    color: var(--gray-700);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    padding: 0 0.4rem;
    margin-left: 0.35rem;
    vertical-align: middle;
}

/* EditForm renders a <form> between sp-content and sp-body/sp-footer.
   Make it flex-fill so the height chain isn't broken. */
.sp-content[b-xtgiouikkx]  form {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
/* /Pages/Materials/Components/DryGoodsGrid.razor.rz.scp.css */
/* cm-grid-wrap / cm-grid-table / cm-empty / cm-pane-meta / im-badge-* are global (site.css).
   Only the DryGoods-specific deltas live here. */

.dg-source-tag[b-rxyz5zyq3w] {
    margin-left: 0.75rem;
    font-style: italic;
    color: var(--gray-500);
}

.dg-col-expand[b-rxyz5zyq3w] {
    width: 26px;
}

.dg-col-num[b-rxyz5zyq3w] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Negative on-hand values are legitimate upstream data — highlighted, never hidden. */
.dg-negative[b-rxyz5zyq3w] {
    color: var(--red-700);
    font-weight: var(--font-weight-semibold);
    background: var(--amber-100);
}

.dg-badge-gap[b-rxyz5zyq3w] {
    margin-left: 6px;
}

.dg-batches-row > td[b-rxyz5zyq3w] {
    background: var(--gray-50);
}

.dg-batches-state[b-rxyz5zyq3w] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    font-size: 0.8rem;
}

.dg-batch-table[b-rxyz5zyq3w] {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 8px;
    font-size: 0.78rem;
}

.dg-batch-table thead th[b-rxyz5zyq3w] {
    text-align: left;
    color: var(--gray-700);
    font-weight: var(--font-weight-semibold);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-bottom: 1px solid var(--gray-300);
}

.dg-batch-table tbody td[b-rxyz5zyq3w] {
    padding: 3px 8px;
    border-bottom: 1px solid var(--gray-100);
}

/* Depleted batches are listed but dimmed, never hidden. */
.dg-depleted > td[b-rxyz5zyq3w] {
    opacity: 0.55;
}

/* ── NWC material codes ─────────────────────────────────────────────────────
   The shorthand the scale master types at the dock. The visual job here is one
   distinction and it has to survive a glance: a CONFIRMED code is an answer, a
   SUGGESTED code is a guess the machine made from the product name and is only
   right about 39% of the time. Solid vs dashed carries that; colour alone would
   not. */

.dg-col-code[b-rxyz5zyq3w] {
    width: 76px;
    white-space: nowrap;
}

/* ⚠ Owner codes are three characters plus an optional "+n", so the widest thing this column
   ever holds is its own header. It is pinned narrow on purpose: this is an auto-layout table
   inside a pane that is only ~665px when both side panels are open, and every pixel here comes
   straight out of Name — measured at 1536×695 CSS px, Chrome, dev. That is also why the cell
   renders OwnerLabel with Compact="true". */
.dg-col-owner[b-rxyz5zyq3w] {
    width: 56px;
    white-space: nowrap;
}

.dg-code[b-rxyz5zyq3w] {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}

.dg-code--confirmed[b-rxyz5zyq3w] {
    background: var(--blue-100);
    color: var(--blue-700);
    border: 1px solid var(--blue-500);
}

.dg-code--suggested[b-rxyz5zyq3w] {
    background: transparent;
    color: var(--gray-600);
    border: 1px dashed var(--gray-400);
}

.dg-code-none[b-rxyz5zyq3w] {
    color: var(--gray-400);
}

.dg-code-tick[b-rxyz5zyq3w] {
    margin-left: 4px;
    padding: 0 3px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--green-600);
    line-height: 1;
}

.dg-code-tick:hover:not(:disabled)[b-rxyz5zyq3w] {
    background: var(--green-100);
}

.dg-code-tick:disabled[b-rxyz5zyq3w] {
    opacity: 0.4;
}

.dg-codes-error[b-rxyz5zyq3w] {
    padding: 4px 8px;
    font-size: 0.78rem;
    color: var(--gray-700);
    background: var(--amber-50);
}

/* ── Expanded panel: the confirm surface ── */

.dg-codes-strip[b-rxyz5zyq3w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 6px;
}

.dg-codes-label[b-rxyz5zyq3w] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
}

.dg-codes-empty[b-rxyz5zyq3w] {
    font-size: 0.8rem;
    color: var(--gray-500);
}

.dg-code-chip[b-rxyz5zyq3w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 4px 2px 8px;
    border-radius: 12px;
    font-size: 0.78rem;
}

.dg-code-chip--confirmed[b-rxyz5zyq3w] {
    background: var(--blue-100);
    border: 1px solid var(--blue-500);
}

.dg-code-chip--suggested[b-rxyz5zyq3w] {
    background: var(--gray-100);
    border: 1px dashed var(--gray-400);
}

.dg-code-chip-code[b-rxyz5zyq3w] {
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
}

.dg-code-chip-name[b-rxyz5zyq3w] {
    color: var(--gray-700);
}

.dg-code-chip-client[b-rxyz5zyq3w] {
    padding: 0 5px;
    border-radius: 8px;
    background: var(--gray-200);
    color: var(--gray-700);
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}

.dg-chip-btn[b-rxyz5zyq3w] {
    padding: 0 4px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    line-height: 1;
}

.dg-chip-btn:disabled[b-rxyz5zyq3w] {
    opacity: 0.4;
}

.dg-chip-btn--yes[b-rxyz5zyq3w] {
    color: var(--green-600);
}

.dg-chip-btn--yes:hover:not(:disabled)[b-rxyz5zyq3w] {
    background: var(--green-100);
}

.dg-chip-btn--no[b-rxyz5zyq3w] {
    color: var(--gray-500);
}

.dg-chip-btn--no:hover:not(:disabled)[b-rxyz5zyq3w] {
    background: var(--gray-200);
    color: var(--red-700);
}

.dg-codes-add[b-rxyz5zyq3w] {
    padding: 1px 8px;
    border: 1px dashed var(--gray-400);
    border-radius: 12px;
    background: transparent;
    color: var(--gray-600);
    font-size: 0.75rem;
}

.dg-codes-add:hover[b-rxyz5zyq3w] {
    border-color: var(--blue-500);
    color: var(--blue-600);
}

/* ── Assign picker ── */

.dg-code-picker[b-rxyz5zyq3w] {
    max-width: 520px;
    margin: 0 4px 8px;
    padding: 8px;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
    background: var(--gray-50);
}

.dg-code-input[b-rxyz5zyq3w] {
    font-size: 0.82rem;
}

.dg-picker-state[b-rxyz5zyq3w] {
    padding: 6px 2px;
    font-size: 0.8rem;
}

.dg-picker-list[b-rxyz5zyq3w] {
    max-height: 220px;
    margin: 6px 0 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.dg-picker-item[b-rxyz5zyq3w] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 3px 6px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    font-size: 0.8rem;
    text-align: left;
}

.dg-picker-item:hover:not(:disabled)[b-rxyz5zyq3w] {
    background: var(--blue-100);
}

.dg-picker-item--inactive[b-rxyz5zyq3w] {
    opacity: 0.6;
}

.dg-picker-code[b-rxyz5zyq3w] {
    min-width: 46px;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
}

.dg-picker-name[b-rxyz5zyq3w] {
    color: var(--gray-800);
}

.dg-picker-supplier[b-rxyz5zyq3w] {
    margin-left: auto;
    color: var(--gray-500);
    font-size: 0.74rem;
}

.dg-picker-flag[b-rxyz5zyq3w] {
    padding: 0 5px;
    border-radius: 8px;
    background: var(--gray-200);
    color: var(--gray-600);
    font-size: 0.68rem;
}

/* ── Correcting a counted quantity ──────────────────────────────────────────
   ⛔ ALWAYS VISIBLE. The first cut revealed it on row hover only, and rendering the
   page proved the obvious: a control nobody can see is a control nobody uses. The
   bUnit tests passed either way — they query the DOM, which does not care about
   opacity — so only looking caught it. Low emphasis is right here; hidden is not. */
.dg-lot-correct[b-rxyz5zyq3w] {
    border: 1px solid var(--gray-300);
    background: transparent;
    color: var(--gray-600);
    border-radius: 0.25rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.75rem;
    line-height: 1.4;
    transition: background 0.12s ease-in-out, border-color 0.12s ease-in-out;
}

.dg-batch-table tr:hover .dg-lot-correct[b-rxyz5zyq3w] {
    border-color: var(--gray-400);
    color: var(--gray-700);
}

.dg-lot-correct:hover:not(:disabled)[b-rxyz5zyq3w] {
    background: var(--blue-100);
    border-color: var(--blue-500);
    color: var(--blue-700);
}

.dg-correct-row > td[b-rxyz5zyq3w] {
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
}

.dg-correct[b-rxyz5zyq3w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
}

.dg-correct-label[b-rxyz5zyq3w] {
    color: var(--gray-600);
    font-size: 0.75rem;
}

.dg-correct-current[b-rxyz5zyq3w] {
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.dg-correct-arrow[b-rxyz5zyq3w] {
    color: var(--gray-400);
}

.dg-correct-input[b-rxyz5zyq3w] {
    width: 6.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--gray-400);
    border-radius: 0.25rem;
    padding: 0.1rem 0.35rem;
}

.dg-correct-unit[b-rxyz5zyq3w] {
    color: var(--gray-600);
    font-size: 0.75rem;
}

/* The delta is the confirmation step, so it has to be legible at a glance. */
.dg-correct-delta[b-rxyz5zyq3w] {
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.dg-correct-delta--up[b-rxyz5zyq3w] {
    color: var(--green-700);
}

.dg-correct-delta--down[b-rxyz5zyq3w] {
    color: var(--red-700);
}

.dg-correct-save[b-rxyz5zyq3w],
.dg-correct-cancel[b-rxyz5zyq3w] {
    border-radius: 0.25rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.8rem;
}

.dg-correct-save[b-rxyz5zyq3w] {
    border: 1px solid var(--blue-500);
    background: var(--blue-100);
    color: var(--blue-700);
}

.dg-correct-cancel[b-rxyz5zyq3w] {
    border: 1px solid var(--gray-300);
    background: transparent;
    color: var(--gray-600);
}

.dg-correct-save:disabled[b-rxyz5zyq3w],
.dg-correct-cancel:disabled[b-rxyz5zyq3w] {
    opacity: 0.5;
}

.dg-correct-note[b-rxyz5zyq3w] {
    margin: 0.2rem 0 0.35rem;
    font-size: 0.75rem;
    color: var(--gray-600);
}

/* A refusal is a normal outcome, not a fault: amber, never the danger red the
   negative-on-hand style uses. */
.dg-correct-note--warn[b-rxyz5zyq3w] {
    color: var(--red-700);
    background: var(--amber-100);
    border-radius: 0.25rem;
    padding: 0.2rem 0.4rem;
}

.dg-correct-done[b-rxyz5zyq3w] {
    margin: 0.25rem 0;
    font-size: 0.8rem;
    color: var(--green-700);
}

/* ── Vendor product photo + documents ───────────────────────────────────────
   ⛔ The thumbnail is a background-image on a fixed box, never an <img>: a dead
   URL then looks exactly like "no photo on file" instead of painting a broken-
   image glyph across a live inventory row. The box is always the same size, so
   rows do not jump as photos land.
   ⚠ 28px inside a 2px-padded cell keeps the row under the Virtualize ItemSize
   of 36 — a taller row here drifts the scroll position of the whole grid. That
   ceiling is the only reason the row tile is small; the expanded row shows the
   same product at 96px, where no such budget applies. */

.dg-col-thumb[b-rxyz5zyq3w] {
    width: 38px;
    /* Scoped [b-*] beats .cm-grid-table tbody td on specificity — no !important needed. */
    padding-top: 2px;
    padding-bottom: 2px;
}

/* ⭐ White, not grey, and `contain`, not `cover`. Vendor product shots are cut out on
   white, so a white tile has no visible edge and the product reads as sitting on the
   row rather than inside a swatch. `cover` cropped every tall bag and bottle to its
   middle third — that crop, plus a dashed border on a real photo, is what made these
   look like stickers stamped on the row instead of products. No border here for the
   same reason: a border is chrome, and the photo is the content. */
.dg-thumb[b-rxyz5zyq3w] {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 4px;
    background-color: #fff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
}

/* No photo on file. ⛔ This one KEEPS its dashed border and stays visibly a control: it
   is a call to action — the button behind it opens the photo picker — not a picture.
   Do not flatten the two states into one look on the grounds that they share a class. */
.dg-thumb--empty[b-rxyz5zyq3w] {
    border: 1px dashed var(--gray-300);
    background-color: var(--gray-50);
}

/* ── Expanded row: the product at a size you can actually see ───────────────────────────────
   Bigger sibling of .dg-thumb, same white-tile reasoning, and it opens the SAME photo picker
   the row tile does. One click behaviour for a product photo, not two competing ones. */

.dg-assets-strip[b-rxyz5zyq3w] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0 4px 6px;
}

.dg-photo-tile[b-rxyz5zyq3w] {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    background-color: #fff;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: border-color 0.12s ease-in-out;
}

.dg-photo-tile:hover[b-rxyz5zyq3w],
.dg-photo-tile:focus-visible[b-rxyz5zyq3w] {
    border-color: var(--blue-500);
    outline: none;
}

.dg-docs-strip[b-rxyz5zyq3w] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 0 4px 6px;
}

.dg-doc-link[b-rxyz5zyq3w] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid var(--gray-300);
    border-radius: 12px;
    color: var(--blue-700);
    font-size: 0.75rem;
    text-decoration: none;
}

.dg-doc-link:hover[b-rxyz5zyq3w] {
    border-color: var(--blue-500);
    background: var(--blue-100);
}

/* The thumb cell is a button now, and must not read as one - no chrome, no padding shift.
   The camera glyph only appears on rows with no photo, which is what makes an empty box look
   like an invitation rather than a gap. */
.dg-thumb-btn[b-rxyz5zyq3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.dg-thumb-btn .dg-thumb--empty[b-rxyz5zyq3w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    color: var(--gray-400);
}

.dg-thumb-btn:hover .dg-thumb--empty[b-rxyz5zyq3w] {
    border-color: var(--blue-500);
    color: var(--blue-600);
}

/* ⚠ A photo tile has no border to colour any more, so the hover cue is a ring. Without this
   the picker on a row that HAS a photo becomes invisible — the empty tile would be the only
   one that looked clickable, which is backwards. */
.dg-thumb-btn:hover .dg-thumb[b-rxyz5zyq3w],
.dg-thumb-btn:focus-visible .dg-thumb[b-rxyz5zyq3w] {
    box-shadow: 0 0 0 2px var(--blue-500);
}

.dg-thumb-btn:focus-visible[b-rxyz5zyq3w] {
    outline: none;
}
/* /Pages/Materials/Components/ProductPhotoPickerPanel.razor.rz.scp.css */
/* Photo picker for one material.

   The backdrop and the dialog shell come from .nwc-modal-backdrop + .nwc-dialog-host in
   site.css; everything here is content. Only the width is overridden - the shared host is
   min(680px, 92vw), which is right for a form and too narrow for a grid of photo tiles.

   ⚠ Sized in min() against the viewport, never in fixed pixels. Jeff's desktop is 1920x1080 at
   125% Windows scaling, which gives the page 1536x695 CSS px - a dialog measured against a
   nominal 1080 fits on paper and overflows on his actual screen. */

.pp-host[b-dmc3xhu7mu] {
    width: min(920px, 94vw);
    padding: 1rem 1.25rem 1.25rem;
}

.pp-head[b-dmc3xhu7mu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 0.6rem;
    margin-bottom: 0.85rem;
}

.pp-title[b-dmc3xhu7mu] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
}

.pp-sub[b-dmc3xhu7mu] {
    margin: 0.15rem 0 0;
    font-size: 0.78rem;
    color: var(--gray-600);
}

/* ── The photo already on file ───────────────────────────────────────────────────────────── */

.pp-current[b-dmc3xhu7mu] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.85rem;
}

.pp-current-img[b-dmc3xhu7mu] {
    width: 72px;
    height: 72px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 6px;
    flex: 0 0 auto;
}

.pp-current-meta[b-dmc3xhu7mu] {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 1 1 auto;
    min-width: 0;
}

.pp-current-label[b-dmc3xhu7mu] {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-800);
}

.pp-current-by[b-dmc3xhu7mu],
.pp-current-src[b-dmc3xhu7mu] {
    font-size: 0.75rem;
    color: var(--gray-600);
}

/* ── Search ──────────────────────────────────────────────────────────────────────────────── */

.pp-search-row[b-dmc3xhu7mu] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.pp-search-row .form-control[b-dmc3xhu7mu] {
    flex: 1 1 auto;
    min-width: 0;
}

.pp-hint[b-dmc3xhu7mu] {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    color: var(--gray-600);
}

.pp-hint--off[b-dmc3xhu7mu] {
    background: var(--amber-50);
    border: 1px solid var(--amber-100);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
}

.pp-notice[b-dmc3xhu7mu] {
    margin: 0.75rem 0 0;
    font-size: 0.82rem;
    color: var(--gray-700);
    background: var(--gray-50);
    border-left: 3px solid var(--gray-400);
    padding: 0.45rem 0.65rem;
    border-radius: 0 6px 6px 0;
}

/* ── Candidates ──────────────────────────────────────────────────────────────────────────── */

.pp-results[b-dmc3xhu7mu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 0.6rem;
    margin-top: 0.9rem;
}

.pp-card[b-dmc3xhu7mu] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.4rem;
    background: #fff;
    border: 2px solid var(--gray-200);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
}

.pp-card:hover[b-dmc3xhu7mu] {
    border-color: var(--blue-100);
}

/* The picked tile has to be obvious at a glance across a grid of similar bags and boxes. */
.pp-card--picked[b-dmc3xhu7mu] {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 3px var(--blue-100);
}

.pp-card img[b-dmc3xhu7mu] {
    width: 100%;
    height: 116px;
    object-fit: contain;
    background: var(--gray-50);
    border-radius: 4px;
}

.pp-card-meta[b-dmc3xhu7mu] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.pp-card-dims[b-dmc3xhu7mu] {
    font-size: 0.7rem;
    color: var(--gray-700);
}

.pp-card-src[b-dmc3xhu7mu] {
    font-size: 0.68rem;
    color: var(--gray-500);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Footer + manual sources ─────────────────────────────────────────────────────────────── */

.pp-foot[b-dmc3xhu7mu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--gray-200);
}

/* "12 checked and real - 4 rejected" is the honest count, not decoration: it separates
   "nothing exists" from "everything offered was fake". */
.pp-foot-count[b-dmc3xhu7mu] {
    font-size: 0.78rem;
    color: var(--gray-600);
}

.pp-manual[b-dmc3xhu7mu] {
    margin-top: 1rem;
    border-top: 1px solid var(--gray-200);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pp-manual summary[b-dmc3xhu7mu] {
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
}
/* /Pages/Materials/Components/ReceiveMaterialPanel.razor.rz.scp.css */
/* Hand-entry material receive. Sits in the InventoryManager overlay slot, so it inherits
   .im-report's frame and only styles what is specific to the form. Tokens only - no new
   colour literals. */

.rm-panel[b-y1acp2romq] {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.rm-body[b-y1acp2romq] {
    padding: 0.75rem 1rem 1rem;
    overflow-y: auto;
}

/* ── Step 1: material selection ─────────────────────────────────────────────── */

.rm-step[b-y1acp2romq] {
    margin-bottom: 1rem;
}

.rm-label[b-y1acp2romq] {
    display: block;
    font-size: 0.75rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    margin-bottom: 0.25rem;
}

.rm-search[b-y1acp2romq] {
    max-width: 26rem;
}

.rm-hint[b-y1acp2romq] {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin-top: 0.35rem;
}

.rm-results[b-y1acp2romq],
.rm-dg-results[b-y1acp2romq] {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0;
    max-width: 34rem;
    max-height: 14rem;
    overflow-y: auto;
    border: 1px solid var(--gray-300);
    border-radius: 4px;
}

.rm-results li + li[b-y1acp2romq],
.rm-dg-results li + li[b-y1acp2romq] {
    border-top: 1px solid var(--gray-200);
}

.rm-result[b-y1acp2romq],
.rm-dg[b-y1acp2romq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.6rem;
    background: none;
    border: 0;
    text-align: left;
    font-size: 0.82rem;
}

.rm-result:hover[b-y1acp2romq],
.rm-result:focus-visible[b-y1acp2romq],
.rm-dg:hover[b-y1acp2romq],
.rm-dg:focus-visible[b-y1acp2romq] {
    background: var(--blue-100);
}

.rm-result-code[b-y1acp2romq] {
    font-weight: var(--font-weight-semibold);
    color: var(--blue-700);
    min-width: 3.5rem;
}

.rm-result-name[b-y1acp2romq] {
    flex: 1 1 auto;
    color: var(--gray-800);
}

.rm-result-supplier[b-y1acp2romq] {
    font-size: 0.72rem;
    color: var(--gray-500);
}

/* The chosen material, held visible while she fills in the rest. */
.rm-picked[b-y1acp2romq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.4rem 0.6rem;
    background: var(--blue-100);
    border: 1px solid var(--blue-500);
    border-radius: 4px;
    max-width: 34rem;
}

.rm-picked-code[b-y1acp2romq] {
    font-weight: var(--font-weight-semibold);
    color: var(--blue-700);
}

.rm-picked-name[b-y1acp2romq] {
    color: var(--gray-900);
}

.rm-picked-supplier[b-y1acp2romq] {
    font-size: 0.72rem;
    color: var(--gray-600);
}

.rm-change[b-y1acp2romq] {
    margin-left: auto;
    padding: 0;
}

.rm-freeform[b-y1acp2romq] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 34rem;
}

/* ── Step 2: the arrival details ────────────────────────────────────────────── */

.rm-grid[b-y1acp2romq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.6rem 0.8rem;
    max-width: 46rem;
}

.rm-field[b-y1acp2romq] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* The lot number is the field this whole feature exists to capture - give it the full row. */
.rm-field--lot[b-y1acp2romq] {
    grid-column: 1 / -1;
    max-width: 22rem;
}

.rm-field--wide[b-y1acp2romq] {
    grid-column: 1 / -1;
}

.rm-sub[b-y1acp2romq] {
    font-size: 0.7rem;
    color: var(--gray-500);
    margin-top: 0.15rem;
}

.rm-error[b-y1acp2romq] {
    margin-top: 0.75rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    background: var(--amber-50);
    color: var(--red-700);
    font-size: 0.8rem;
    max-width: 46rem;
}

.rm-actions[b-y1acp2romq] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.rm-save[b-y1acp2romq] {
    min-width: 7rem;
}

/* ── Confirmation ───────────────────────────────────────────────────────────── */

.rm-done[b-y1acp2romq] {
    padding: 1rem;
    max-width: 34rem;
}

.rm-done-head[b-y1acp2romq] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--green-700);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.6rem;
}

.rm-done-code[b-y1acp2romq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

/* Deliberately styled like a sticker: this code is what goes on the container. */
.rm-done-chip[b-y1acp2romq] {
    font-weight: var(--font-weight-semibold);
    font-size: 1.05rem;
    letter-spacing: 0.04em;
    color: var(--blue-700);
    background: var(--blue-100);
    border: 1px solid var(--blue-500);
    border-radius: 3px;
    padding: 0.1rem 0.45rem;
}

.rm-done-name[b-y1acp2romq] {
    color: var(--gray-800);
}

.rm-done-facts[b-y1acp2romq] {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0.25rem 0.75rem;
    margin: 0 0 0.75rem;
    font-size: 0.82rem;
}

.rm-done-facts dt[b-y1acp2romq] {
    color: var(--gray-600);
    font-weight: 400;
}

.rm-done-facts dd[b-y1acp2romq] {
    margin: 0;
    color: var(--gray-900);
}

.rm-warn[b-y1acp2romq] {
    color: var(--amber-800);
}

/* The upstream verdict sits next to the local one deliberately: InnoVint owns additive on-hand,
   so "saved in NWC" is only half the answer she came for. */
.rm-pushed[b-y1acp2romq] {
    color: var(--green-700);
    font-weight: 500;
}

.rm-onhand[b-y1acp2romq] {
    display: block;
    font-size: 0.78rem;
    color: var(--gray-600);
}

.rm-note[b-y1acp2romq] {
    font-size: 0.78rem;
    color: var(--gray-600);
    margin: 0 0 0.5rem;
}

.rm-note--warn[b-y1acp2romq] {
    padding: 0.4rem 0.6rem;
    background: var(--amber-50);
    border-radius: 4px;
    color: var(--gray-800);
}

/* ── Which client's product ─────────────────────────────────────────────────── */
/* ⛔ One material maps to many InnoVint products because InnoVint flattens material x client
   into the name. This is a real question, never a default. */

.rm-products[b-y1acp2romq] {
    margin-top: 0.6rem;
}

.rm-product-list[b-y1acp2romq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.2rem;
}

.rm-product[b-y1acp2romq] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 3px;
}

.rm-product:hover[b-y1acp2romq] {
    border-color: var(--blue-500);
}

.rm-product--on[b-y1acp2romq] {
    color: var(--blue-700);
    background: var(--blue-100);
    border-color: var(--blue-500);
}

/* A name-match suggestion, marked so it never reads as a settled answer. */
.rm-product-guess[b-y1acp2romq] {
    font-size: 0.68rem;
    color: var(--amber-800);
}

/* ── Attaching an InnoVint product ──────────────────────────────────────────── */
/* ⭐ Measured on prod 2026-08-27: 899 of 991 codes carry no InnoVint link, so this block is the
   ORDINARY path for an unmapped material, not an edge case. Her pick writes a confirmed link. */

/* Exactly one product is not a choice, so it is stated rather than offered. Deliberately NOT a
   .rm-product button: "one product is not a choice" is pinned by a test. */
.rm-product-one[b-y1acp2romq] {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
}

.rm-product-one-label[b-y1acp2romq] {
    color: var(--gray-500);
}

.rm-product-one-client[b-y1acp2romq] {
    font-weight: var(--font-weight-semibold);
    color: var(--blue-700);
}

.rm-product-one-name[b-y1acp2romq] {
    color: var(--gray-600);
}

.rm-find-product[b-y1acp2romq] {
    padding: 0;
    margin-top: 0.35rem;
    font-size: 0.78rem;
}

.rm-productsearch[b-y1acp2romq] {
    margin-top: 0.6rem;
    padding: 0.5rem 0.6rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: 4px;
}

.rm-dg-name[b-y1acp2romq] {
    flex: 1 1 auto;
    color: var(--gray-800);
}

.rm-dg-maker[b-y1acp2romq] {
    font-size: 0.72rem;
    color: var(--gray-500);
}

/* Verbatim on-hand, negatives included — display-only, never a gate on receiving. */
.rm-dg-onhand[b-y1acp2romq] {
    font-size: 0.72rem;
    color: var(--gray-600);
    white-space: nowrap;
}

/* ── Minting a product InnoVint does not have yet ──────────────────────────
   Nested one level inside .rm-productsearch, and deliberately given its own
   ground rather than more of the same grey: creating a row in a shared
   catalogue is a different KIND of act from picking an existing one, and the
   two buttons sit inches apart. */
.rm-create-open[b-y1acp2romq] {
    display: block;
    margin-top: 0.35rem;
    text-align: left;
}

.rm-createproduct[b-y1acp2romq] {
    margin-top: 0.6rem;
    padding: 0.55rem 0.6rem;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: 4px;
}

.rm-create-head[b-y1acp2romq] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-bottom: 0.4rem;
}

/* The client field is required and has no default; the badge is what stops it
   reading as another optional row in a stack of inputs. */
.rm-req[b-y1acp2romq] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--danger, #b42318);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rm-opt[b-y1acp2romq] {
    font-size: 0.68rem;
    font-weight: 400;
    color: var(--gray-500);
}

.rm-create-rate[b-y1acp2romq] {
    display: flex;
    gap: 0.4rem;
}

.rm-create-rate > input:first-child[b-y1acp2romq] {
    flex: 0 0 6rem;
}

.rm-create-actions[b-y1acp2romq] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.55rem;
}
/* /Pages/Materials/InventoryManager.razor.rz.scp.css */
/* Shell/workspace/pane/statusbar layout now lives in Shared/ManagerShell.
   Only page-specific (im-*) styling remains here. */


.im-filter[b-98hfd9udnl] {
    width: auto;
    min-width: 140px;
}

.im-inspector-body[b-98hfd9udnl] {
    padding: 12px 14px;
    overflow-y: auto;
    flex: 1;
    font-size: var(--font-size-md);
}

.im-inspector-body h6[b-98hfd9udnl] {
    margin: 0 0 2px;
    font-weight: var(--font-weight-semibold);
}

/* .im-kv removed 2026-07-08 — dead CSS. This page renders <InventoryInspector>
   as a child component; the actual .im-kv <dl> markup lives in that
   component's own child (Shared/Inventory/Inspector/ItemTab.razor), which
   Blazor CSS isolation never let this file's scoped rule reach (no ::deep).
   InventoryInspector.razor.css's own ::deep .im-kv rule is the one that
   actually applies. See LAYOUT-PATTERNS.md Pattern 2. */

/* ── Report overlays (inner styling — the overlay shell comes from ManagerShell.ms-overlay) ─ */
[b-98hfd9udnl] .im-report {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

[b-98hfd9udnl] .im-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-300);
    background: var(--inv-report-header-bg);
}

[b-98hfd9udnl] .im-report-header h6 {
    font-weight: var(--font-weight-semibold);
}

[b-98hfd9udnl] .im-report-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 14px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.78rem;
}


[b-98hfd9udnl] .im-report-empty {
    padding: 32px;
    text-align: center;
    color: var(--gray-500);
}

[b-98hfd9udnl] .im-report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

[b-98hfd9udnl] .im-report-table th {
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-700);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-300);
    padding: 7px 10px;
    position: sticky;
    top: 0;
    z-index: var(--z-base);
}

[b-98hfd9udnl] .im-report-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--gray-100);
}

[b-98hfd9udnl] .im-report-table tr:hover td {
    background: var(--inv-default-supplier-bg);
}

[b-98hfd9udnl] .im-report-table tr.warn td { background: var(--inv-warn-row-bg); }
[b-98hfd9udnl] .im-report-table tr.total-row td {
    background: var(--gray-100);
    border-top: 2px solid var(--gray-500);
}

[b-98hfd9udnl] .im-report-table .num,
[b-98hfd9udnl] .im-report-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* .im-mov-type base + receive/issue/adjust/transfer are global (site.css); only .return diverges (purple here). */
[b-98hfd9udnl] .im-mov-type.return   { background: var(--material-badge-capsule-bg); color: var(--material-badge-capsule-fg); }

[b-98hfd9udnl] .im-report-table td.num.pos { color: var(--inv-qty-positive); }
[b-98hfd9udnl] .im-report-table td.num.neg { color: var(--inv-qty-negative); }

/* .im-pane-meta is global (site.css). */

.im-tree[b-98hfd9udnl] {
    list-style: none;
    margin: 0;
    padding: 8px 4px;
    overflow-y: auto;
    flex: 1;
    font-size: var(--font-size-md);
}

.im-tree ul[b-98hfd9udnl] {
    list-style: none;
    margin: 2px 0 6px;
    padding-left: 20px;
}

.im-tree-section[b-98hfd9udnl] {
    padding: 4px 8px;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
}

.im-tree-section i[b-98hfd9udnl] {
    color: var(--inv-muted-fg);
    font-size: var(--font-size-xs);
    margin-right: 4px;
}

.im-tree li li[b-98hfd9udnl] {
    padding: 3px 6px;
    border-radius: var(--radius-xs);
    color: var(--gray-700);
    cursor: pointer;
    font-weight: var(--font-weight-normal);
}

.im-tree li li:hover[b-98hfd9udnl] {
    background: var(--gray-100);
    color: var(--blue-500);
}

/* .im-grid-placeholder / .im-inspector-empty were dead (no markup references
   them); empty-state chrome is global .nwc-empty in site.css. */

.im-status-spacer[b-98hfd9udnl] {
    flex: 1;
}

/* ── Framework panels (backend-pending wireframes) ───────── */
[b-98hfd9udnl] .im-fw-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: var(--inv-fw-notice-bg);
    border: 1px solid var(--inv-fw-notice-border);
    border-left: 3px solid var(--inv-fw-notice-border-strong);
    border-radius: var(--radius-md);
    margin: 0 4px 16px;
    font-size: 0.8rem;
    color: var(--inv-fw-notice-fg);
    line-height: 1.5;
}

[b-98hfd9udnl] .im-fw-entities {
    margin: 4px 4px 0;
    padding: 10px 12px;
    background: var(--gray-50);
    border: 1px dashed var(--gray-400);
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    color: var(--gray-600);
}

[b-98hfd9udnl] .im-fw-entities strong {
    display: block;
    margin-bottom: 6px;
    color: var(--gray-700);
}

[b-98hfd9udnl] .im-fw-entities ul { margin: 0; padding-left: 18px; }
[b-98hfd9udnl] .im-fw-entities li { margin-bottom: 3px; line-height: 1.5; }

[b-98hfd9udnl] .im-fw-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 4px;
    border-bottom: 1px solid var(--gray-100);
}

[b-98hfd9udnl] .im-fw-step:last-child { border-bottom: none; }

[b-98hfd9udnl] .im-fw-step-num {
    width: 22px;
    height: 22px;
    background: var(--gray-300);
    color: var(--gray-700);
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

[b-98hfd9udnl] .im-fw-step-body { flex: 1; font-size: 0.83rem; }
[b-98hfd9udnl] .im-fw-step-title { font-weight: var(--font-weight-semibold); color: var(--gray-900); margin-bottom: 2px; }
[b-98hfd9udnl] .im-fw-step-desc { color: var(--gray-600); font-size: 0.78rem; line-height: 1.5; }

[b-98hfd9udnl] .im-fw-field-skeleton {
    height: 32px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    padding: 0 10px;
    font-size: 0.8rem;
    color: var(--gray-500);
    cursor: not-allowed;
}

/* ── Libraries tab: the hosted library fills the workspace lane ─────────────

   ⛔⛔ THE height OVERRIDE IS THE WHOLE POINT OF THIS BLOCK, and without it the
   feature looks shipped and is broken. Every library page is built on the
   `.nwc-list-page` kit, which is `height: 95vh` (site.css) — correct for a page
   that owns the viewport, wrong for a component sitting under a ribbon inside
   `.ms-overlay { overflow: hidden }` in `.ms-shell { height: calc(100vh - 56px) }`.
   Left alone, the library is ~95vh tall inside a lane roughly 100vh minus the
   ribbon, the shell clips the difference, and the bottom rows — plus whatever
   footer or paging control lives there — are unreachable at every viewport. It
   renders, it scrolls, it reads as fine.

   ::deep is required: `.nwc-list-page` is emitted by GlassLibrary et al, which
   carry their own CSS-isolation scope, so an unprefixed rule here never lands.

   ⚠ Scoped to `.im-library-host` on purpose — this is a claim about libraries
   hosted in THIS lane, not about `.nwc-list-page` generally, and the standalone
   /packaging/* routes must keep their 95vh. */
.im-library-host[b-98hfd9udnl] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1;
}

.im-library-host[b-98hfd9udnl]  .nwc-list-page {
    height: 100%;
    /* The lane already supplies the page's outer padding; the library's own
       page-level gutter would double it against the ribbon above. */
    padding: var(--space-sm) var(--space-md);
}
/* /Pages/Materials/MaterialsHub.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   MaterialsHub.razor.css — Materials portal master page
   ═══════════════════════════════════════════════════════════════ */

.mh-page[b-se0p7dtizs] {
    padding: var(--space-md) var(--space-lg);
}

/* ── Header ── */
.mh-header[b-se0p7dtizs] {
    flex-shrink: 0;
    margin-bottom: var(--space-md);
}

/* ── Pulse cards ── */
.mh-pulse[b-se0p7dtizs] {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.mh-pulse-card[b-se0p7dtizs] {
    padding: var(--space-sm) 0.875rem;
    background: var(--accent-preview-bg);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    min-width: 90px;
    text-align: center;
}

.mh-pulse-card--action[b-se0p7dtizs] {
    background: var(--mat-pulse-action-bg);
    border-color: var(--mat-pulse-action-border);
}

.mh-pulse-card--transit[b-se0p7dtizs] {
    background: var(--mat-pulse-transit-bg);
    border-color: var(--mat-pulse-transit-border);
}

.mh-pulse-card--warn[b-se0p7dtizs] {
    background: var(--mat-pulse-warn-bg);
    border-color: var(--mat-pulse-warn-border);
}

.mh-pulse-num[b-se0p7dtizs] {
    font-size: 1.4rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.1;
    color: var(--slate-800);
}

.mh-pulse-card--warn .mh-pulse-num[b-se0p7dtizs] { color: var(--mat-warn-strong-fg); }
.mh-pulse-card--transit .mh-pulse-num[b-se0p7dtizs] { color: var(--mat-cyan-accent); }
.mh-pulse-card--action .mh-pulse-num[b-se0p7dtizs] { color: var(--indigo-600); }

.mh-pulse-label[b-se0p7dtizs] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate-500);
    margin-top: 0.1rem;
    white-space: nowrap;
}

/* ── Body scroll area ── */
.mh-body[b-se0p7dtizs] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* ── Section chrome ── */
.mh-section[b-se0p7dtizs] {
    background: var(--white);
    border: 1px solid var(--slate-200);
    border-radius: 0.625rem;
    overflow: hidden;
}

.mh-section-header[b-se0p7dtizs] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) 0.875rem;
    background: var(--slate-50);
    border-bottom: 1px solid var(--slate-200);
}

.mh-section-title[b-se0p7dtizs] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--slate-600);
}

.mh-section-link[b-se0p7dtizs] {
    font-size: var(--font-size-sm);
    color: var(--indigo-600);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
}

.mh-section-link:hover[b-se0p7dtizs] { text-decoration: underline; }

/* ── Stock rows ── */
.mh-stock-list[b-se0p7dtizs] {
    padding: var(--space-xs) 0;
}

.mh-stock-row[b-se0p7dtizs] {
    display: grid;
    grid-template-columns: 32px 110px 80px 1fr 80px 80px;
    align-items: center;
    gap: 0.625rem;
    padding: var(--space-xs) 0.875rem;
    transition: background 0.1s;
}

.mh-stock-row:hover[b-se0p7dtizs] { background: var(--slate-50); }

.mh-stock-icon[b-se0p7dtizs] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

.mh-icon--bottle[b-se0p7dtizs]  { background: var(--mat-icon-bottle-bg); color: var(--mat-cyan-accent); }
.mh-icon--cork[b-se0p7dtizs]    { background: var(--mat-icon-cork-bg);   color: var(--material-badge-capsule-fg); }
.mh-icon--foil[b-se0p7dtizs]    { background: var(--mat-icon-foil-bg);   color: var(--material-badge-label-fg); }
.mh-icon--label[b-se0p7dtizs]   { background: var(--mat-icon-label-bg);  color: var(--amber-600); }
.mh-icon--box[b-se0p7dtizs]     { background: var(--mat-icon-box-bg);    color: var(--inv-profile-link-fg); }

.mh-stock-type[b-se0p7dtizs] {
    font-size: 0.82rem;
    font-weight: var(--font-weight-semibold);
    color: var(--slate-800);
}

.mh-stock-qty[b-se0p7dtizs] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--slate-800);
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.mh-stock-bar-wrap[b-se0p7dtizs] {
    height: 6px;
    background: var(--slate-100);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.mh-stock-bar[b-se0p7dtizs] {
    height: 100%;
    border-radius: var(--radius-xs);
    transition: width 0.4s ease;
}

.mh-bar--healthy[b-se0p7dtizs] { background: var(--green-500); }
.mh-bar--watch[b-se0p7dtizs]   { background: var(--amber-600); }
.mh-bar--low[b-se0p7dtizs]     { background: var(--mat-stock-bar-low); }

.mh-stock-batches[b-se0p7dtizs] {
    font-size: var(--font-size-xs);
    color: var(--slate-400);
    text-align: right;
}

.mh-stock-status[b-se0p7dtizs] {
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
    text-align: center;
    padding: 0.2rem var(--space-sm);
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.mh-status--healthy[b-se0p7dtizs] { background: var(--receipt-status-assigned-bg); color: var(--receipt-status-assigned-fg); }
.mh-status--watch[b-se0p7dtizs]   { background: var(--mat-status-watch-bg); color: var(--mat-status-watch-fg); }
.mh-status--low[b-se0p7dtizs]     { background: var(--mat-status-low-bg); color: var(--mat-status-low-fg); }

/* ── Lower two-col ── */
.mh-lower[b-se0p7dtizs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}

/* ── Orders ── */
.mh-order-list[b-se0p7dtizs] {
    padding: var(--space-xs) 0;
}

.mh-order-row[b-se0p7dtizs] {
    padding: var(--space-sm) 0.875rem;
    border-bottom: 1px solid var(--slate-100);
}

.mh-order-row:last-child[b-se0p7dtizs] { border-bottom: none; }

.mh-order-po[b-se0p7dtizs] {
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    color: var(--slate-600);
    letter-spacing: var(--letter-spacing-wide);
    margin-bottom: 0.1rem;
}

.mh-order-detail[b-se0p7dtizs] {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    margin-bottom: 0.15rem;
}

.mh-order-type[b-se0p7dtizs] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--slate-800);
}

.mh-order-qty[b-se0p7dtizs] {
    font-size: 0.82rem;
    color: var(--slate-600);
    font-variant-numeric: tabular-nums;
}

.mh-order-supplier[b-se0p7dtizs] {
    font-size: 0.72rem;
    color: var(--slate-500);
    margin-bottom: 0.2rem;
}

.mh-order-status[b-se0p7dtizs] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-lg);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.mh-order-status--transit[b-se0p7dtizs] { background: var(--material-badge-glass-bg); color: var(--receipt-status-partial-fg); }
.mh-order-status--pending[b-se0p7dtizs] { background: var(--amber-100); color: var(--amber-800); }
.mh-order-status--received[b-se0p7dtizs] { background: var(--receipt-status-assigned-bg); color: var(--receipt-status-assigned-fg); }

.mh-order-eta[b-se0p7dtizs] {
    font-size: var(--font-size-xs);
    color: var(--slate-500);
}

/* ── Receipts ── */
.mh-receipt-list[b-se0p7dtizs] {
    padding: var(--space-xs) 0;
}

.mh-receipt-row[b-se0p7dtizs] {
    display: grid;
    grid-template-columns: 48px 90px 60px 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.4rem 0.875rem;
    border-bottom: 1px solid var(--slate-100);
    font-size: 0.78rem;
}

.mh-receipt-row:last-child[b-se0p7dtizs] { border-bottom: none; }

.mh-receipt-date[b-se0p7dtizs] {
    font-size: var(--font-size-xs);
    color: var(--slate-400);
    white-space: nowrap;
}

.mh-receipt-type[b-se0p7dtizs] {
    font-weight: var(--font-weight-semibold);
    color: var(--slate-800);
}

.mh-receipt-qty[b-se0p7dtizs] {
    font-variant-numeric: tabular-nums;
    font-weight: var(--font-weight-semibold);
    color: var(--slate-800);
    text-align: right;
}

.mh-receipt-lot[b-se0p7dtizs] {
    font-size: 0.68rem;
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mh-receipt-loc[b-se0p7dtizs] {
    font-size: var(--font-size-xs);
    color: var(--slate-500);
    white-space: nowrap;
}

/* ── Quick links ── */
.mh-links[b-se0p7dtizs] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.mh-link-chip[b-se0p7dtizs] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem var(--space-md);
    background: var(--accent-preview-bg);
    border: 1px solid var(--slate-200);
    border-radius: 20px;
    font-size: var(--font-size-sm);
    color: var(--indigo-600);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: background 0.12s, border-color 0.12s;
}

.mh-link-chip:hover[b-se0p7dtizs] {
    background: var(--mat-link-hover-bg);
    border-color: var(--mat-link-hover-border);
    color: var(--mat-link-hover-fg);
}

/* ── Empty state ── */
.mh-empty[b-se0p7dtizs] {
    padding: var(--space-lg) 0.875rem;
    font-size: 0.8rem;
    color: var(--slate-400);
    text-align: center;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .mh-lower[b-se0p7dtizs] { grid-template-columns: 1fr; }

    .mh-stock-row[b-se0p7dtizs] {
        grid-template-columns: 28px 90px 60px 1fr 60px;
    }

    .mh-stock-status[b-se0p7dtizs] { display: none; }
}

@media (max-width: 576px) {
    .mh-page[b-se0p7dtizs] { padding: var(--space-sm); }

    .mh-pulse[b-se0p7dtizs] { overflow-x: auto; flex-wrap: nowrap; }

    .mh-stock-row[b-se0p7dtizs] {
        grid-template-columns: 28px 80px 55px 1fr;
    }

    .mh-stock-batches[b-se0p7dtizs] { display: none; }
}
/* /Pages/Materials/ReceiveFromIntake.razor.rz.scp.css */
.receive-from-intake-page[b-uaw9momb0c] {
    padding: var(--space-lg);
}
/* /Pages/Materials/WarehouseCounts.razor.rz.scp.css */
/* Warehouse Counts — layout comes from .nwc-list-page (Pattern 1), .nwc-statstrip, .nwc-tab-bar
   (Pattern 14) and .nwc-chip (Pattern 15) in site.css. Only what those do not cover is here. */

.wc-page[b-ey1munpoah] {
    padding: var(--space-sm) var(--space-md);
}

.wc-title[b-ey1munpoah] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.wc-subtitle[b-ey1munpoah] {
    color: var(--text-muted);
}

.wc-body[b-ey1munpoah] {
    padding-top: var(--space-sm);
}

.wc-toolbar[b-ey1munpoah] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.wc-toolbar-gap[b-ey1munpoah] {
    width: var(--space-md);
}

.wc-table td[b-ey1munpoah] {
    vertical-align: top;
}

.wc-muted[b-ey1munpoah] {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.wc-link-cell[b-ey1munpoah] {
    min-width: 22rem;
}

/* A glass line opens its slide-out from anywhere on the row. */
.wc-row-click[b-ey1munpoah] {
    cursor: pointer;
}
/* /Pages/Materials/WarehouseGlassPanel.razor.rz.scp.css */
/* Warehouse glass panel — sections come from .nwc-lib-detail / .nwc-lib-detail-section and
   .nwc-list-page-dl in site.css (the Glass Library panel's own pattern). Only what they do not
   cover is here: the warehouse's quoted line, the count-history row and the choice rows. */

.wgp-muted[b-ezsu5jysjv] {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.wgp-quote[b-ezsu5jysjv] {
    font-family: var(--font-family-mono);
    padding: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-sm);
    background: var(--surface-subtle);
    border-left: 3px solid var(--border-default);
    border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
}

/* Layout from .nwc-wrap-2xs (site.css). */
.wgp-history[b-ezsu5jysjv] {
    margin-top: var(--space-xs);
}

.wgp-history-cell[b-ezsu5jysjv] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 4rem;
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

.wgp-history-cell--latest[b-ezsu5jysjv] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-soft);
}

.wgp-history-cell--latest .wgp-history-value[b-ezsu5jysjv] {
    font-weight: var(--font-weight-semibold);
}

.wgp-history-date[b-ezsu5jysjv] {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.wgp-choice[b-ezsu5jysjv] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    margin-bottom: var(--space-2xs);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
}

/* The long bottle name wraps; "This is it" never does. */
.wgp-choice > .btn[b-ezsu5jysjv] {
    flex: none;
    white-space: nowrap;
}

.wgp-choice--showing[b-ezsu5jysjv] {
    border-color: var(--accent-primary);
}

.wgp-list[b-ezsu5jysjv] {
    margin: 0;
    padding-left: var(--space-lg);
}
/* /Pages/Misc/Appellation.razor.rz.scp.css */
.mainContainer[b-uew95s48c7]{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
}

    .mainContainer > div[b-uew95s48c7] {
        flex-basis: 100%;
    }


ul[b-uew95s48c7] {
    list-style-type:none;
    padding-left:8px;
}
/* /Pages/Misc/AppellationPanel.razor.rz.scp.css */
.mainContainer[b-toa4zf6wk5] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .mainContainer > div[b-toa4zf6wk5] {
        flex-basis: 100%;
    }
    .container-with-columns[b-toa4zf6wk5]{
        display:flex;
        flex-direction:row;
        flex-wrap:nowrap;
    }
        .container-with-columns > div[b-toa4zf6wk5] {
            flex-basis: 100%;
        }

.row[b-toa4zf6wk5] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: 200px;
    align-items: center;
}
label[b-toa4zf6wk5]{
    font-weight:var(--font-weight-bold);
}
.buttonContainer[b-toa4zf6wk5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: solid 1px grey;
}

.flex-start[b-toa4zf6wk5] {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    gap: 10px;
    align-items: center;
}
.flex-end[b-toa4zf6wk5] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap:10px;
}
.uppercase[b-toa4zf6wk5] {
    text-transform: uppercase;
}
/* /Pages/Misc/Forecast.razor.rz.scp.css */
/* Forecast component - compact weather bar */

.weather-bar[b-gnc8cltlt7] {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    justify-content: center;
    align-items: center;
}

.weather-loading[b-gnc8cltlt7] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--gray-600);
    font-size: var(--font-size-base);
}

.weather-content[b-gnc8cltlt7] {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
    justify-content: center;
}

.weather-icon[b-gnc8cltlt7] {
    font-size: 2rem;
    line-height: 1;
}

.weather-icon i[b-gnc8cltlt7] {
    display: block;
}

.weather-temp[b-gnc8cltlt7] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.temp-value[b-gnc8cltlt7] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
    line-height: 1.2;
}

.temp-range[b-gnc8cltlt7] {
    font-size: 0.8rem;
    color: var(--gray-600);
}

.weather-condition[b-gnc8cltlt7] {
    font-size: 0.95rem;
    color: var(--gray-700);
    text-transform: capitalize;
}

.weather-rain[b-gnc8cltlt7] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-base);
    color: var(--blue-500);
    padding: var(--space-2xs) var(--space-sm);
    background: rgba(var(--blue-500-rgb), 0.1);
    border-radius: 1rem;
}

.weather-rain i[b-gnc8cltlt7] {
    font-size: var(--font-size-md);
}

.weather-location[b-gnc8cltlt7] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--font-size-md);
    color: var(--gray-600);
}

.weather-location i[b-gnc8cltlt7] {
    font-size: 0.8rem;
    color: var(--red-500);
}

/* ========== MOBILE STYLES ========== */
@media (max-width: 575px) {
    .weather-bar[b-gnc8cltlt7] {
        padding: var(--space-md) var(--space-sm);
    }

    .weather-content[b-gnc8cltlt7] {
        gap: var(--space-md);
        width: 100%;
    }

    .weather-icon[b-gnc8cltlt7] {
        font-size: 2.5rem;
    }

    .temp-value[b-gnc8cltlt7] {
        font-size: 1.75rem;
    }

    .temp-range[b-gnc8cltlt7] {
        font-size: var(--font-size-md);
    }

    .weather-condition[b-gnc8cltlt7] {
        display: none; /* Hide on very small screens to save space */
    }

    .weather-location[b-gnc8cltlt7] {
        display: none; /* Hide on mobile - user knows where they are */
    }

    .weather-rain[b-gnc8cltlt7] {
        font-size: 0.95rem;
        min-height: 44px; /* Touch target */
        padding: var(--space-sm) var(--space-md);
    }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 767px) {
    .weather-content[b-gnc8cltlt7] {
        gap: var(--space-lg);
    }

    .weather-icon[b-gnc8cltlt7] {
        font-size: 2.25rem;
    }
}

/* Desktop - slightly more spacing */
@media (min-width: 992px) {
    .weather-content[b-gnc8cltlt7] {
        gap: var(--space-2xl);
    }

    .weather-icon[b-gnc8cltlt7] {
        font-size: 2.5rem;
    }

    .temp-value[b-gnc8cltlt7] {
        font-size: 1.75rem;
    }
}
/* /Pages/Misc/NumberPad.razor.rz.scp.css */
button[b-q0tf7fbzdw]{
  border-radius:50%;
  width: 50px;
  height: 50px;
}
.container[b-q0tf7fbzdw]{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
  width: 400px;
  background-color: #f5f5f5;
  border:solid 1px #000;

}
.col[b-q0tf7fbzdw]{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding:12px;
}
h1[b-q0tf7fbzdw] {
  text-align: center;
  font-size: 2.2em;
  color: #dfffff;
  position: relative;
  z-index: 2;
}

.entry-illustration[b-q0tf7fbzdw] {
  position: absolute;
}

  .entry-illustration:last-of-type[b-q0tf7fbzdw] {
    margin-right: 0px;
  }

:checked ~ .first-entry[b-q0tf7fbzdw] {
  background-color: #dfffff;
}

:checked ~ :checked ~ .second-entry[b-q0tf7fbzdw] {
  background-color: #dfffff;
}

:checked ~ :checked ~ :checked ~ .third-entry[b-q0tf7fbzdw] {
  background-color: #dfffff;
}

:checked ~ :checked ~ :checked ~ :checked ~ .forth-entry[b-q0tf7fbzdw] {
  background-color: #dfffff;
}

.numberEntry[b-q0tf7fbzdw] {
  background-color: #f5f5f5;
  border: 2px solid var(--blue-500);
  color: var(--blue-500);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5em;
  color: #000;
  cursor: pointer;
  transition: 0.3s;
}
/* /Pages/Misc/UploadPDFMain.razor.rz.scp.css */
.main-row[b-gqj49te9sj] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 3px;
    width: 100%;
}

.saveButtonRow[b-gqj49te9sj] {
    margin: 4px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 5px;
}

.row[b-gqj49te9sj] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.row2[b-gqj49te9sj] {
    min-height: 20px;
    background-color: lightgray;
}

.col[b-gqj49te9sj] {
    margin: 3px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.scrollControl[b-gqj49te9sj] {
    max-height:400px;
    overflow-y:auto;
}
.emptySelect[b-gqj49te9sj]{
    min-height:38px;
}
/* /Pages/Mobile/FilterabilityShareCard.razor.rz.scp.css */
.filterability-share-page[b-wszmdxw6vc] {
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
    padding: var(--space-xl) var(--space-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.filterability-share-card[b-wszmdxw6vc] {
    width: 100%;
    max-width: 480px;
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--mobile-share-card-shadow);
    overflow: hidden;
    margin-top: var(--space-2xl);
}

.status-bar[b-wszmdxw6vc] {
    color: var(--white);
    font-weight: var(--font-weight-semibold);
    font-size: 1.05rem;
    padding: 0.9rem 1.25rem;
    display: flex;
    align-items: center;
    text-shadow: var(--mobile-share-statusbar-shadow);
}

.status-bar i[b-wszmdxw6vc] {
    font-size: 1.35rem;
}

.card-body[b-wszmdxw6vc] {
    padding: var(--space-2xl) var(--space-xl);
    text-align: center;
}

.lot-code[b-wszmdxw6vc] {
    font-size: 2.25rem;
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
    line-height: 1.1;
    margin-bottom: var(--space-sm);
    word-break: break-word;
}

.brand-name[b-wszmdxw6vc] {
    font-size: var(--font-size-xl);
    color: var(--gray-700);
    margin-bottom: var(--space-2xs);
}

.varietal-vintage[b-wszmdxw6vc] {
    font-size: 0.95rem;
    color: var(--gray-600);
}

.brand-footer[b-wszmdxw6vc] {
    color: var(--gray-600);
    font-size: 0.8rem;
    margin-top: var(--space-xl);
    margin-bottom: 0;
    text-align: center;
    letter-spacing: 0.02em;
}

@media (max-width: 480px) {
    .filterability-share-card[b-wszmdxw6vc] {
        margin-top: var(--space-sm);
    }
    .lot-code[b-wszmdxw6vc] {
        font-size: 1.85rem;
    }
}
/* /Pages/Packaging/CapsuleLibrary.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   CapsuleLibrary.razor.css — Scoped styles for /packaging/capsule-library
   Mirrors GlassLibrary 95vh viewport pattern.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ── */
.cl-header[b-ovzvnhxx5q] {
    flex-shrink: 0;
    padding-bottom: var(--space-2xs);
}

/* ── Grid area ── */
/* ── Dashboard cards ── */

/* .cl-card base + :hover absorbed into global .nwc-card in site.css. Sub-elements + modifiers remain below. */

/* .cl-card-* base + --warning absorbed into global .nwc-card-*. Page-specific --mfr retained. */

/* ── Filters ── */

/* ── Upload section ── */
/* .cl-upload-section base hoisted to global .nwc-upload-section (site.css) */

/* ── Grid deep styles ── */
[b-ovzvnhxx5q] tr:hover {
    cursor: pointer;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .cl-cards[b-ovzvnhxx5q] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cl-filter-select[b-ovzvnhxx5q] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .cl-cards[b-ovzvnhxx5q] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .cl-card[b-ovzvnhxx5q] {
        padding: var(--space-sm) 0.625rem;
    }

    .cl-card-number[b-ovzvnhxx5q] {
        font-size: var(--font-size-xl);
    }
}

/* Thumbnail in grid — .nwc-lib-thumb (site.css) */
/* /Pages/Packaging/ClosureLibrary.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   ClosureLibrary.razor.css — Scoped styles for /packaging/closurelibrary
   Mirrors GlassLibrary.razor.css layout (95vh viewport pattern).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ── */
.cl-header[b-8ghf4ftxz8] {
    flex-shrink: 0;
    padding-bottom: var(--space-2xs);
}

/* ── Grid area ── */
/* ── Dashboard cards ── */

/* .cl-card base + :hover absorbed into global .nwc-card in site.css. Sub-elements + modifiers remain below. */

/* .cl-card-* base + --warning absorbed into global .nwc-card-*. Page-specific --cork / --screwcap retained. */

.cl-card-icon--cork[b-8ghf4ftxz8] {
    background: var(--pkg-cork-bg);
    color: var(--pkg-cork-fg);
}

/* ── Filters ── */

/* ── Upload section ── */
/* .cl-upload-section base hoisted to global .nwc-upload-section (site.css) */

/* ── Grid deep styles ── */
[b-8ghf4ftxz8] tr:hover {
    cursor: pointer;
}

/* ── Category badge ── */
[b-8ghf4ftxz8] .bg-cork {
    background-color: var(--pkg-cork-fg);
    color: var(--text-on-brand);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .cl-cards[b-8ghf4ftxz8] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cl-filter-select[b-8ghf4ftxz8] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .cl-cards[b-8ghf4ftxz8] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .cl-card[b-8ghf4ftxz8] {
        padding: var(--space-sm) 0.625rem;
    }

    .cl-card-number[b-8ghf4ftxz8] {
        font-size: var(--font-size-xl);
    }
}

/* Thumbnail in grid — .nwc-lib-thumb (site.css) */
/* /Pages/Packaging/DocumentInbox.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════
   Document Inbox — page layout
   ═══════════════════════════════════════════════════════════════ */

.di-page[b-os514cpwl5] {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--space-xl);
}

.di-title[b-os514cpwl5] {
    margin: 0;
    font-size: 1.4rem;
}

/* ═══════════════════════════════════════════════════════════════
   Upload area
   ═══════════════════════════════════════════════════════════════ */

.di-upload-area[b-os514cpwl5] {
    position: relative;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
    transition: border-color 0.2s, background-color 0.2s;
    cursor: pointer;
}

.di-upload-area:hover[b-os514cpwl5],
.di-upload-area.has-files[b-os514cpwl5] {
    border-color: var(--blue-500);
    background-color: rgba(var(--blue-500-rgb), 0.04);
}

.di-upload-prompt[b-os514cpwl5] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.di-upload-prompt i.bi-cloud-arrow-up[b-os514cpwl5] {
    font-size: 1.5rem;
    line-height: 1;
}

/* Transparent native InputFile overlay — handles both drop and click without
   the Blazor wrapper hiding the drop target. */
.di-upload-area .di-upload-input[b-os514cpwl5] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.di-file-list[b-os514cpwl5] {
    text-align: left;
}

.di-file-item[b-os514cpwl5] {
    padding: var(--space-2xs) 0;
}

.di-file-name[b-os514cpwl5] {
    font-size: var(--font-size-base);
}

.di-file-size[b-os514cpwl5] {
    font-size: 0.8rem;
    color: var(--gray-600);
}

/* ═══════════════════════════════════════════════════════════════
   Processing spinner
   ═══════════════════════════════════════════════════════════════ */

.di-processing[b-os514cpwl5] {
    padding: var(--space-3xl) var(--space-lg);
}

/* ═══════════════════════════════════════════════════════════════
   Review split — document cards
   ═══════════════════════════════════════════════════════════════ */

.di-doc-card[b-os514cpwl5] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    transition: border-color 0.2s;
}

.di-doc-card.needs-review[b-os514cpwl5] {
    border-color: var(--yellow-500);
    background-color: rgba(var(--yellow-500-rgb), 0.04);
}

.di-doc-card.skipped[b-os514cpwl5] {
    opacity: 0.5;
}


.di-doc-thumbnail[b-os514cpwl5] {
    width: 60px;
    height: 80px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
    flex-shrink: 0;
}

.di-type-select[b-os514cpwl5] {
    width: auto;
    min-width: 120px;
}

/* Multi-page thumbnail strip */
.di-doc-pages[b-os514cpwl5] {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding: var(--space-2xs) 0;
}

.di-page-thumb-wrap[b-os514cpwl5] {
    position: relative;
    flex-shrink: 0;
}

.di-page-thumb[b-os514cpwl5] {
    width: 48px;
    height: 64px;
    object-fit: cover;
    border-radius: 0.2rem;
    border: 1px solid var(--gray-300);
}

.di-page-num[b-os514cpwl5] {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--overlay-backdrop-strong);
    color: var(--white);
    font-size: var(--font-size-2xs);
    padding: 0 4px;
    border-radius: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   Results
   ═══════════════════════════════════════════════════════════════ */

.di-result-card[b-os514cpwl5] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}

.di-result-card.extracted[b-os514cpwl5] {
    border-left: 3px solid var(--green-600);
}

.di-result-card.skipped[b-os514cpwl5] {
    border-left: 3px solid var(--gray-600);
    opacity: 0.7;
}

.di-result-card.errored[b-os514cpwl5] {
    border-left: 3px solid var(--red-500);
}

.di-invoice-summary[b-os514cpwl5] {
    padding-left: var(--space-2xs);
}

/* ═══════════════════════════════════════════════════════════════
   Invoice rich card
   ═══════════════════════════════════════════════════════════════ */

.di-invoice-section[b-os514cpwl5] {
    border: 1px solid var(--gray-300);
    border-left: 3px solid var(--gray-600);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
}

.di-invoice-details[b-os514cpwl5] {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--pkg-divider);
    border-bottom: 1px solid var(--pkg-divider);
}

.di-invoice-field[b-os514cpwl5] {
    display: flex;
    flex-direction: column;
}

.di-invoice-field-label[b-os514cpwl5] {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--slate-500);
}

.di-invoice-items-wrap[b-os514cpwl5] {
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    overflow: auto;
    max-height: 250px;
}

.di-invoice-items-table[b-os514cpwl5] {
    margin-bottom: 0;
    font-size: var(--font-size-md);
}

.di-invoice-items-table thead th[b-os514cpwl5] {
    position: sticky;
    top: 0;
    background: var(--slate-50);
    border-bottom: 2px solid var(--slate-200);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--slate-500);
    padding: var(--space-xs) var(--space-sm);
}

.di-invoice-items-table tbody td[b-os514cpwl5] {
    padding: var(--space-xs) var(--space-sm);
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════
   BOL inline review/check-in section
   ═══════════════════════════════════════════════════════════════ */

.di-bol-section[b-os514cpwl5] {
    border: 1px solid var(--gray-300);
    border-left: 3px solid var(--blue-500);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
}

.di-bol-header[b-os514cpwl5] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: var(--space-md);
}

/* Editable badges */
.di-editable-badge[b-os514cpwl5] {
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.di-editable-badge:hover[b-os514cpwl5] {
    box-shadow: 0 0 0 2px rgba(var(--blue-500-rgb), 0.25);
}

.di-inline-edit[b-os514cpwl5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    position: relative;
}

.di-search-dropdown[b-os514cpwl5] {
    position: absolute;
    top: 100%;
    left: var(--space-xl);
    z-index: var(--z-slot-badge);
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--pkg-dropdown-shadow);
    max-height: 200px;
    overflow-y: auto;
    min-width: 200px;
}

.di-search-dropdown .dropdown-item:hover[b-os514cpwl5] {
    background-color: var(--pkg-card-tint-bg-end);
}

/* Entity resolution grid */
.di-bol-match-grid[b-os514cpwl5] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xs) var(--space-md);
    align-items: center;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
    border-top: 1px solid var(--pkg-divider);
    border-bottom: 1px solid var(--pkg-divider);
}

.di-match-label[b-os514cpwl5] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--slate-500);
    white-space: nowrap;
}

/* Summary cards */
.di-bol-cards[b-os514cpwl5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.di-bol-card[b-os514cpwl5] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: var(--space-sm) 0.625rem;
    background: linear-gradient(135deg, var(--accent-preview-bg) 0%, var(--pkg-card-tint-bg-end) 100%);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
}

.di-bol-card-icon[b-os514cpwl5] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: var(--indigo-600);
    color: var(--text-on-brand);
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

.di-bol-card-icon--success[b-os514cpwl5] { background: var(--green-500); }
.di-bol-card-icon--warning[b-os514cpwl5] { background: var(--amber-600); }
.di-bol-card-icon--muted[b-os514cpwl5]   { background: var(--slate-500); }
.di-bol-card-icon--primary[b-os514cpwl5]  { background: var(--blue-500); }

.di-bol-card-number[b-os514cpwl5] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--slate-800);
    line-height: 1;
}

.di-bol-card-label[b-os514cpwl5],
.di-bol-done-label[b-os514cpwl5] {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--slate-500);
    margin-top: var(--space-3xs);
}

/* Match review table */
.di-bol-table-wrap[b-os514cpwl5] {
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    overflow: auto;
    max-height: 400px;
}

.di-bol-table[b-os514cpwl5] {
    margin-bottom: 0;
}

.di-bol-table thead th[b-os514cpwl5] {
    position: sticky;
    top: 0;
    background: var(--slate-50);
    border-bottom: 2px solid var(--slate-200);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--slate-500);
    padding: 0.4rem var(--space-sm);
}

.di-bol-table tbody td[b-os514cpwl5] {
    padding: var(--space-sm);
    vertical-align: middle;
    font-size: var(--font-size-md);
}

.di-item-desc[b-os514cpwl5] {
    font-weight: var(--font-weight-medium);
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.di-row-skipped[b-os514cpwl5] {
    opacity: 0.4;
    text-decoration: line-through;
}

/* Actions */
.di-bol-actions[b-os514cpwl5] {
    display: flex;
    gap: var(--space-sm);
    padding: 0.625rem 0 0;
}

/* Processing */
.di-bol-processing[b-os514cpwl5] {
    display: flex;
    align-items: center;
    padding: var(--space-md) 0;
    color: var(--slate-500);
}

/* Done state */
.di-bol-done[b-os514cpwl5] {
    padding: var(--space-sm) 0;
}

.di-bol-done-stat[b-os514cpwl5] {
    text-align: center;
}

.di-bol-done-number[b-os514cpwl5] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

/* .di-bol-done-label merged into .di-bol-card-label above */
/* /Pages/Packaging/GlassLibrary.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   GlassLibrary.razor.css — Scoped styles for /packaging/glass-library
   Follows WeightTags 95vh viewport pattern.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ── */
.gl-header[b-sp7zxvy72y] {
    flex-shrink: 0;
    padding-bottom: var(--space-2xs);
}

/* ── Grid area ── */
/* ── Dashboard cards ── */

/* .gl-card base + :hover absorbed into global .nwc-card in site.css. Sub-elements + modifiers remain below. */

/* .gl-card-* base + --warning absorbed into global .nwc-card-*. Page-specific --styles retained. */

/* ── Filters ── */

/* ── Import section ── */
.gl-import-section[b-sp7zxvy72y] {
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    background: var(--pkg-panel-bg-subtle);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
}

.gl-import-body[b-sp7zxvy72y] {
    padding: var(--space-sm) 0;
}

/* ── Upload section ── */
/* .gl-upload-section base hoisted to global .nwc-upload-section (site.css) */

/* ── Grid deep styles ── */
[b-sp7zxvy72y] tr:hover {
    cursor: pointer;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .gl-cards[b-sp7zxvy72y] {
        grid-template-columns: repeat(2, 1fr);
    }

    .gl-filter-select[b-sp7zxvy72y] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .gl-cards[b-sp7zxvy72y] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .gl-card[b-sp7zxvy72y] {
        padding: var(--space-sm) 0.625rem;
    }

    .gl-card-number[b-sp7zxvy72y] {
        font-size: var(--font-size-xl);
    }
}

/* ── Similar Specs ── */
[b-sp7zxvy72y] .gl-section-clickable {
    cursor: pointer;
    user-select: none;
}

[b-sp7zxvy72y] .gl-section-clickable:hover {
    color: var(--pkg-link-hover-fg);
}

[b-sp7zxvy72y] .gl-similar-item {
    padding: var(--space-sm);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.15s;
}

[b-sp7zxvy72y] .gl-similar-item:hover {
    background: var(--slate-50);
    border-color: var(--slate-300);
}

[b-sp7zxvy72y] .gl-similar-thumb {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: var(--radius-xs);
    flex-shrink: 0;
}

[b-sp7zxvy72y] .gl-similar-info {
    flex: 1;
    min-width: 0;
}

[b-sp7zxvy72y] .gl-similar-code {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    color: var(--slate-800);
}

[b-sp7zxvy72y] .gl-similar-meta {
    font-size: 0.72rem;
    color: var(--slate-500);
}

[b-sp7zxvy72y] .gl-similar-fields {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-top: var(--space-xs);
}

[b-sp7zxvy72y] .gl-similar-field {
    font-size: var(--font-size-xs);
    padding: var(--space-3xs) var(--space-xs);
    border-radius: var(--radius-sm);
}

[b-sp7zxvy72y] .gl-field-match {
    background: var(--pkg-success-bg);
    color: var(--pkg-success-fg);
}

[b-sp7zxvy72y] .gl-field-diff {
    background: var(--amber-100);
    color: var(--amber-800);
}

/* Thumbnail in grid — .nwc-lib-thumb (site.css) */
/* /Pages/Packaging/GlassOas.razor.rz.scp.css */
.go-page[b-skes2li1jh] {
    display: flex;
    flex-direction: column;
    height: 95vh;
    padding: var(--space-lg);
    gap: var(--space-md);
}

.go-header[b-skes2li1jh] {
    flex-shrink: 0;
}

/* ── Summary Cards ── */
.go-cards[b-skes2li1jh] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    flex-shrink: 0;
}

.go-card[b-skes2li1jh] {
    background: linear-gradient(135deg, var(--gray-50) 0%, var(--gray-200) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-md) var(--space-lg);
    text-align: center;
}

.go-card-warning[b-skes2li1jh] {
    background: linear-gradient(135deg, var(--yellow-100) 0%, var(--yellow-500) 20%, var(--yellow-100) 100%);
}

.go-card-danger[b-skes2li1jh] {
    background: linear-gradient(135deg, var(--state-danger-bg) 0%, var(--red-500) 20%, var(--state-danger-bg) 100%);
}

.go-card-value[b-skes2li1jh] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
}

.go-card-label[b-skes2li1jh] {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
}

/* ── Filters ── */
.go-filters[b-skes2li1jh] {
    display: flex;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* ── Grid Area ── */
.go-grid-area[b-skes2li1jh] {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

[b-skes2li1jh] .nwc-datagrid {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: auto;
}

/* ── Panel ── */
.go-thumbnails[b-skes2li1jh] {
    display: flex;
    gap: var(--space-sm);
    overflow-x: auto;
    padding-bottom: var(--space-sm);
}

.go-panel-thumb[b-skes2li1jh] {
    width: 120px;
    height: auto;
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
    cursor: pointer;
}

.go-section[b-skes2li1jh] {
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--pkg-divider);
}

.go-section:last-child[b-skes2li1jh] {
    border-bottom: none;
}

.go-section-title[b-skes2li1jh] {
    font-size: 0.8rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-bottom: var(--space-sm);
}

.go-field-grid[b-skes2li1jh] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.4rem var(--space-lg);
}

.go-field[b-skes2li1jh] {
    display: flex;
    flex-direction: column;
}

.go-field-wide[b-skes2li1jh] {
    grid-column: 1 / -1;
}

.go-field-label[b-skes2li1jh] {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .go-cards[b-skes2li1jh] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .go-cards[b-skes2li1jh] {
        grid-template-columns: 1fr 1fr;
    }

    .go-field-grid[b-skes2li1jh] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Packaging/GlassStatus.razor.rz.scp.css */
.gs-header[b-rt8swn5kkj] {
    flex-shrink: 0;
    padding-bottom: var(--space-2xs);
}

/* ── Cards (gradient pattern from GlassLibrary) ── */

/* .gs-card base + :hover absorbed into global .nwc-card in site.css. Sub-elements + modifiers remain below. */

.gs-card--warning[b-rt8swn5kkj] {
    background: linear-gradient(135deg, var(--pkg-card-warning-bg-start) 0%, var(--amber-100) 100%);
    border-color: var(--amber-500);
}

.gs-card--danger[b-rt8swn5kkj] {
    background: linear-gradient(135deg, var(--pkg-card-danger-bg-start) 0%, var(--pkg-card-danger-bg-end) 100%);
    border-color: var(--pkg-card-danger-border);
}

/* .gs-card-* sub-elements + success/warning/danger modifiers absorbed into global .nwc-card-*. */

/* ── Filters ── */
.gs-filter-select[b-rt8swn5kkj] {
    width: auto;
    min-width: 200px;
    font-size: 0.8rem;
}

/* ── Grid tweaks ── */
[b-rt8swn5kkj] tr:hover {
    cursor: pointer;
}

.gs-thumb[b-rt8swn5kkj] {
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: var(--radius-xs);
    border: 1px solid var(--pkg-thumb-border);
    vertical-align: middle;
    background: var(--white);
    cursor: zoom-in;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    transform-origin: left center;
    position: relative;
}

.gs-thumb:hover[b-rt8swn5kkj] {
    transform: scale(4);
    z-index: var(--z-sticky);
    box-shadow: var(--pkg-thumb-hover-shadow);
    border-color: var(--blue-500);
}

/* ── Panel content ── */
.gs-panel-thumb[b-rt8swn5kkj] {
    max-width: 200px;
    max-height: 200px;
    object-fit: contain;
    border: 1px solid var(--pkg-thumb-border);
    border-radius: var(--radius-md);
}

.gs-comments[b-rt8swn5kkj] {
    font-size: 0.82rem;
    color: var(--pkg-muted-body);
    line-height: 1.4;
    white-space: pre-wrap;
    margin: 0;
}

.gs-field-label[b-rt8swn5kkj] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--pkg-text-muted);
    margin-bottom: 0.15rem;
}

.gs-warnings ul[b-rt8swn5kkj] {
    font-size: 0.82rem;
    padding-left: 1.25rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .gs-cards[b-rt8swn5kkj] {
        grid-template-columns: repeat(2, 1fr);
    }
    .gs-filters[b-rt8swn5kkj] {
        flex-direction: column;
    }
    .gs-filter-select[b-rt8swn5kkj] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .gs-cards[b-rt8swn5kkj] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }
    .gs-card[b-rt8swn5kkj] {
        padding: var(--space-sm) 0.625rem;
    }
    .gs-card-number[b-rt8swn5kkj] {
        font-size: var(--font-size-xl);
    }
}
/* /Pages/Packaging/Inventory.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   Inventory.razor.css — Scoped styles for /packaging/inventory
   Follows GlassLibrary 95vh viewport pattern.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ── */
.inv-header[b-2l700m49qf] {
    flex-shrink: 0;
    padding-bottom: var(--space-2xs);
}

/* ── Dashboard cards ── */

/* .inv-card base + :hover absorbed into global .nwc-card in site.css. Sub-elements + modifiers remain below. */

/* .inv-card-icon base absorbed into global .nwc-card-icon; --onhand consolidated to .nwc-card-icon--success in markup. */

.inv-card-icon--glass[b-2l700m49qf] {
    background: var(--pkg-icon-glass-bg);
    color: var(--pkg-icon-glass-fg);
}

.inv-card-icon--closure[b-2l700m49qf] {
    background: var(--pkg-icon-closure-bg);
    color: var(--pkg-icon-closure-fg);
}

.inv-card-icon--capsule[b-2l700m49qf] {
    background: var(--pkg-icon-capsule-bg);
    color: var(--pkg-icon-capsule-fg);
}

.inv-card-icon--label[b-2l700m49qf] {
    background: var(--pkg-icon-label-bg);
    color: var(--amber-600);
}

.inv-card-icon--box[b-2l700m49qf] {
    background: var(--pkg-icon-box-bg);
    color: var(--pkg-icon-box-fg);
}

.inv-card-icon--muted[b-2l700m49qf] {
    background: var(--pkg-icon-muted-bg);
    color: var(--slate-500);
}

/* .inv-card-body / -number / -label absorbed into global .nwc-card-*. */

.inv-filter-select[b-2l700m49qf] {
    width: auto;
    min-width: 130px;
    font-size: 0.8rem;
}

/* ── Grid area ── */
/* ── Grid deep styles ── */
/* ── Responsive ── */
@media (max-width: 900px) {
    .inv-cards[b-2l700m49qf] {
        grid-template-columns: repeat(2, 1fr);
    }

    .inv-filter-select[b-2l700m49qf] {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .inv-cards[b-2l700m49qf] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .inv-card[b-2l700m49qf] {
        padding: var(--space-sm) 0.625rem;
    }

    .inv-card-number[b-2l700m49qf] {
        font-size: var(--font-size-xl);
    }
}
/* /Pages/Packaging/LabelProofs.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   LabelProofs.razor.css — Scoped styles for /packaging/label-proofs
   Follows GlassLibrary 95vh viewport pattern.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page root (page-specific padding + max-width; .nwc-list-page handles flex layout) ── */
.lp-page[b-pf4v2g98k6] {
    padding: var(--space-lg);
    max-width: 1600px;
    margin: 0 auto;
}

/* ── Page tabs (matches LabelMain/ColaMain) ── */
.page-tabs[b-pf4v2g98k6] {
    display: flex;
    gap: 0;
    margin-bottom: var(--space-lg);
    border-bottom: 2px solid var(--gray-200);
}

.page-tabs .tab[b-pf4v2g98k6] {
    padding: 0.6rem var(--space-xl);
    text-decoration: none;
    color: var(--gray-600);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}

.page-tabs .tab:hover[b-pf4v2g98k6] {
    color: var(--accent-preview);
    background: var(--gray-50);
}

.page-tabs .tab.active[b-pf4v2g98k6] {
    color: var(--accent-preview);
    border-bottom-color: var(--accent-preview);
    font-weight: var(--font-weight-semibold);
}

/* ── Header ── */
.lp-header[b-pf4v2g98k6] {
    flex-shrink: 0;
    padding-bottom: var(--space-2xs);
}

/* ── Grid area ── */
/* ── Dashboard cards ── */

/* .lp-card base + :hover absorbed into global .nwc-card in site.css. Sub-elements + modifiers remain below. */

/* .lp-card-* sub-elements + --warning / --success / --info modifiers absorbed into global .nwc-card-*. */

/* ── Filters ── */
.lp-filter-select[b-pf4v2g98k6] {
    width: auto;
    min-width: 130px;
    font-size: 0.8rem;
}

/* ── Upload section ── */
.lp-upload-section[b-pf4v2g98k6] {
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    background: var(--pkg-success-bg);
    border: 1px solid var(--pkg-success-border);
    border-radius: var(--radius-lg);
}

.lp-upload-header[b-pf4v2g98k6] {
    margin-bottom: 0.625rem;
}

.lp-upload-title[b-pf4v2g98k6] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--pkg-success-fg);
}

/* ── Image upload group (3-slot: Front / Back / BOL) ── */
.lp-image-upload-item[b-pf4v2g98k6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 120px;
    flex: 1;
    max-width: 220px;
}

.lp-image-label[b-pf4v2g98k6] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pkg-text-strong);
}

.lp-staged-preview[b-pf4v2g98k6] {
    position: relative;
    display: inline-block;
}

.lp-staged-img[b-pf4v2g98k6] {
    max-height: 130px;
    max-width: 100%;
    border-radius: var(--radius-md);
    border: 1px solid var(--pkg-border-input);
    object-fit: contain;
}

.lp-remove-btn[b-pf4v2g98k6] {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--font-size-2xs);
    background: var(--white);
    box-shadow: var(--pkg-shadow-badge);
}

/* A staged PDF sheet has no raster to preview, so it shows as a chip in the same slot the
   raster preview would occupy. */
.lp-staged-doc[b-pf4v2g98k6] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8rem;
    color: var(--pkg-text-strong);
    padding: var(--space-xs);
    max-width: 140px;
}

.lp-staged-doc span[b-pf4v2g98k6] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-staged-doc i[b-pf4v2g98k6] {
    flex: 0 0 auto;
    font-size: 1.25rem;
    color: var(--bs-danger);
}

/* ── AI prompt card ── */
.lp-ai-prompt-card[b-pf4v2g98k6] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--pkg-info-gradient-start) 0%, var(--pkg-info-gradient-end) 100%);
    border: 1px solid var(--pkg-info-border);
    border-radius: var(--radius-lg);
}

.lp-ai-prompt-icon[b-pf4v2g98k6] {
    font-size: 1.4rem;
    color: var(--pkg-info-icon);
    flex-shrink: 0;
}

.lp-ai-prompt-content[b-pf4v2g98k6] {
    flex: 1;
    font-size: var(--font-size-md);
    color: var(--pkg-info-fg-soft);
}

.lp-ai-prompt-content p[b-pf4v2g98k6] {
    margin: var(--space-2xs) 0;
}

/* ── Scan progress indicator ── */
.lp-scan-indicator[b-pf4v2g98k6] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--pkg-info-gradient-start) 0%, var(--pkg-info-gradient-end) 100%);
    border: 1px solid var(--pkg-info-border);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-md);
    color: var(--pkg-info-fg-strong);
}

/* ── Thumbnail column ── */
[b-pf4v2g98k6] .lp-thumbnail {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    border: 1px solid var(--slate-200);
}

[b-pf4v2g98k6] .lp-thumbnail--clickable {
    cursor: zoom-in;
    transition: transform 0.15s, box-shadow 0.15s;
}

[b-pf4v2g98k6] .lp-thumbnail--clickable:hover {
    transform: scale(1.15);
    box-shadow: var(--pkg-shadow-thumb-hover);
}

[b-pf4v2g98k6] .lp-pdf-icon {
    font-size: 1.4rem;
    color: var(--pkg-danger-icon);
}

/* ── Lightbox ── */
.lp-lightbox-overlay[b-pf4v2g98k6] {
    position: fixed;
    inset: 0;
    z-index: var(--z-drag-indicator);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pkg-lightbox-overlay-bg);
    cursor: zoom-out;
    animation: lp-lightbox-fadein-b-pf4v2g98k6 0.2s ease;
}

@keyframes lp-lightbox-fadein-b-pf4v2g98k6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.lp-lightbox-img[b-pf4v2g98k6] {
    max-width: 80vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--pkg-lightbox-img-shadow);
    cursor: default;
    animation: lp-lightbox-zoomin-b-pf4v2g98k6 0.2s ease;
}

@keyframes lp-lightbox-zoomin-b-pf4v2g98k6 {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lp-lightbox-close[b-pf4v2g98k6] {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-xl);
    background: none;
    border: none;
    color: var(--white);
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.15s;
}

.lp-lightbox-close:hover[b-pf4v2g98k6] {
    opacity: 1;
}

/* ── Grid deep styles ── */
[b-pf4v2g98k6] tr:hover {
    cursor: pointer;
}

/* ── Detail panel ── */
[b-pf4v2g98k6] .lp-detail {
    padding: var(--space-md);
}

[b-pf4v2g98k6] .lp-detail-section {
    margin-bottom: var(--space-xl);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
}

[b-pf4v2g98k6] .lp-detail-section:has(.lp-section-title) {
    display: block;
}

[b-pf4v2g98k6] .lp-edit-toggle {
    margin-left: auto;
    font-size: 0.8rem;
}

/* ── Detail footer ── */
[b-pf4v2g98k6] .lp-detail-footer {
    position: sticky;
    bottom: 0;
    z-index: var(--z-base);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--white);
    border-top: 1px solid var(--slate-200);
    box-shadow: var(--pkg-shadow-footer);
}

/* ── Status badges ── */
[b-pf4v2g98k6] .badge-uploaded { background-color: var(--pkg-info-gradient-end); color: var(--pkg-info-fg-strong); }
[b-pf4v2g98k6] .badge-reviewed { background-color: var(--pkg-badge-reviewed-bg); color: var(--pkg-success-fg); }
[b-pf4v2g98k6] .badge-approved { background-color: var(--pkg-success-bg); color: var(--pkg-badge-approved-fg); }

/* ── Raw JSON ── */
[b-pf4v2g98k6] .lp-raw-json {
    max-height: 300px;
    overflow-y: auto;
    font-size: var(--font-size-sm);
    background: var(--slate-50);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    border: 1px solid var(--slate-200);
    white-space: pre-wrap;
    word-break: break-all;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .lp-cards[b-pf4v2g98k6] {
        grid-template-columns: repeat(2, 1fr);
    }

    .lp-filter-select[b-pf4v2g98k6] {
        width: 100%;
    }

    .lp-image-upload-group[b-pf4v2g98k6] {
        flex-direction: column;
    }

    .lp-image-upload-item[b-pf4v2g98k6] {
        max-width: 100%;
    }
}

@media (max-width: 576px) {
    .lp-cards[b-pf4v2g98k6] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .lp-card[b-pf4v2g98k6] {
        padding: var(--space-sm) 0.625rem;
    }

    .lp-card-number[b-pf4v2g98k6] {
        font-size: var(--font-size-xl);
    }
}
/* /Pages/Packaging/ReceiveShipment.razor.rz.scp.css */
.rs-page[b-lif4ba6w05] {
    display: flex;
    flex-direction: column;
    height: 95vh;
    padding: var(--space-md) var(--space-lg);
}

/* ── Header ── */
.rs-header[b-lif4ba6w05] {
    flex-shrink: 0;
}

/* .rs-title-row base hoisted to global .nwc-header-row (site.css) */

.rs-title[b-lif4ba6w05] {
    font-weight: var(--font-weight-bold);
    font-size: 1.4rem;
    color: var(--slate-800);
    margin: 0;
}

.rs-shipment-info[b-lif4ba6w05] {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

/* ── Content ── */
.rs-content[b-lif4ba6w05] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* ── Upload Section ── */
.rs-upload-section[b-lif4ba6w05] {
    flex: 1;
    min-height: 0;
}

/* ── Processing Spinner ── */
.rs-processing[b-lif4ba6w05] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 0;
}

/* ── Summary Cards ── */
.rs-cards[b-lif4ba6w05] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-shrink: 0;
}

.rs-card[b-lif4ba6w05] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: linear-gradient(135deg, var(--accent-preview-bg) 0%, var(--pkg-card-tint-bg-end) 100%);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
}

.rs-card-icon[b-lif4ba6w05] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--indigo-600);
    color: var(--text-on-brand);
    font-size: var(--font-size-lg);
    flex-shrink: 0;
}

.rs-card-icon--success[b-lif4ba6w05] {
    background: var(--green-500);
}

.rs-card-icon--warning[b-lif4ba6w05] {
    background: var(--amber-600);
}

.rs-card-icon--muted[b-lif4ba6w05] {
    background: var(--slate-500);
}

.rs-card-icon--primary[b-lif4ba6w05] {
    background: var(--blue-500);
}

.rs-card-number[b-lif4ba6w05] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--slate-800);
    line-height: 1;
}

.rs-card-label[b-lif4ba6w05] {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--slate-500);
    margin-top: var(--space-3xs);
}

/* ── Review Table ── */
.rs-table-container[b-lif4ba6w05] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
}

.rs-table[b-lif4ba6w05] {
    margin-bottom: 0;
}

.rs-table thead th[b-lif4ba6w05] {
    position: sticky;
    top: 0;
    background: var(--slate-50);
    border-bottom: 2px solid var(--slate-200);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--slate-500);
    padding: var(--space-sm) var(--space-md);
}

.rs-table tbody td[b-lif4ba6w05] {
    padding: 0.625rem var(--space-md);
    vertical-align: middle;
}

.rs-item-desc[b-lif4ba6w05] {
    font-weight: var(--font-weight-medium);
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rs-item-code[b-lif4ba6w05] {
    font-size: var(--font-size-sm);
}

.rs-row-skipped[b-lif4ba6w05] {
    opacity: 0.4;
    text-decoration: line-through;
}

/* ── Actions ── */
.rs-actions[b-lif4ba6w05] {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md) 0;
    flex-shrink: 0;
}

/* ── Done State ── */
.rs-done[b-lif4ba6w05] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-2xl) 0;
}

.rs-done-icon[b-lif4ba6w05] {
    font-size: 3rem;
}

.rs-done-cards[b-lif4ba6w05] {
    display: flex;
    gap: var(--space-2xl);
    margin-top: var(--space-xl);
}

.rs-done-stat[b-lif4ba6w05] {
    text-align: center;
}

.rs-done-number[b-lif4ba6w05] {
    font-size: 2rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
}

.rs-done-label[b-lif4ba6w05] {
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--slate-500);
    margin-top: var(--space-2xs);
}

/* ── Editable header badges ── */
.rs-editable-badge[b-lif4ba6w05] {
    cursor: pointer;
    transition: background-color 0.15s;
}

.rs-editable-badge:hover[b-lif4ba6w05] {
    filter: brightness(0.92);
}

.rs-inline-edit[b-lif4ba6w05] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    position: relative;
}

.rs-search-dropdown[b-lif4ba6w05] {
    position: absolute;
    top: 100%;
    left: 1.25rem;
    right: 1.25rem;
    background: var(--white);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--pkg-dropdown-shadow);
    max-height: 200px;
    overflow-y: auto;
    z-index: var(--z-sticky);
}

.rs-search-dropdown .dropdown-item:hover[b-lif4ba6w05] {
    background: var(--pkg-card-tint-bg-end);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .rs-cards[b-lif4ba6w05] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .rs-page[b-lif4ba6w05] {
        padding: var(--space-sm);
    }

    .rs-cards[b-lif4ba6w05] {
        grid-template-columns: 1fr;
    }

    .rs-item-desc[b-lif4ba6w05] {
        max-width: 200px;
    }
}
/* /Pages/PhotoInbox/PhotoInboxDetailPanel.razor.rz.scp.css */
/* The panel scrolls; the image must not push everything else below the fold on a phone. */
.pi-detail-image[b-bfyu1qo9hp] {
    max-height: 55vh;
    width: 100%;
    object-fit: contain;
}

/* Text the model read out of the frame — a chalked tank tag, a label. Preserved as it reads,
   because line breaks are part of what makes a photographed form legible. */
.pi-text-found[b-bfyu1qo9hp] {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 12rem;
    overflow-y: auto;
}
/* /Pages/PhotoInbox/PhotoInboxPage.razor.rz.scp.css */
/* Pattern 3 (Auto-Fill Card Grid) — docs/LAYOUT-PATTERNS.md. The column count follows the width
   with no breakpoints, which is what lets one grid serve a phone in the cellar and a desktop. */
.pi-grid[b-527afvotey] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md);
}

/* The thumbnail is the primary control on a card, so it is a real <button>: keyboard-reachable and
   announced, without a second "open" affordance taking up room the caption needs. */
.pi-thumb-button[b-527afvotey] {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.pi-thumb[b-527afvotey] {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: var(--surface-muted);
}

/* PDFs and anything the thumbnailer could not decode. Same box, so the grid stays on its rows. */
.pi-thumb-empty[b-527afvotey] {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: var(--text-muted);
}

/* Two lines, then ellipsis. A caption is a sentence and some are long; letting one run turns the
   grid into ragged columns of wildly different heights. */
.pi-caption[b-527afvotey] {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pi-search input[b-527afvotey] {
    min-height: 48px;
}
/* /Pages/Printing/PrintStickerPanel.razor.rz.scp.css */
/* PrintStickerPanel — component-scoped only.

   Everything structural is inherited and deliberately NOT re-declared here:
   the drawer chrome comes from SlidingPanel.razor.css, the 60/40 split and sticky aside from
   Pattern 17 in site.css (.nwc-sidebar-split--cq), the sticky action bar from
   LookupSplitPanel.razor.css, and field layout from .nwc-form-grid / FormField.

   Two rules that must stay unbroken:
   - no z-index anywhere in here (SlidingPanel sets it inline from its ZIndex parameter; a second
     declaration reads as authoritative and isn't),
   - no max-height/overflow-y on the preview (one scroll region per panel — the panel body IS it;
     a nested scroller is how the sticky footer starts fighting the content). */

.sticker-picker[b-4o5stsxdxt] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, .5rem);
}

.sticker-aside-empty[b-4o5stsxdxt] {
  text-align: center;
  padding: var(--space-4, 1rem);
}

.sticker-aside-empty i[b-4o5stsxdxt] {
  font-size: 1.75rem;
  opacity: .5;
  display: block;
  margin-bottom: var(--space-2, .5rem);
}

.sticker-picked[b-4o5stsxdxt] {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  font-size: .875rem;
  color: var(--text-muted);
}

.sticker-picked i[b-4o5stsxdxt] {
  color: var(--bs-success);
}

/* Half of the uppercase story — the other half is the FreeText setter, which uppercases the model.
   This rule only keeps the box LOOKING like what will print while you type (the setter runs on
   change, not per keystroke). Scoped to this component: the panel this replaces shipped the same
   declaration from an inline <style> block in a .razor file, which applied it to every textarea in
   the circuit. Never re-add it globally, and never let this be the ONLY mechanism — CSS uppercasing
   changes the pixels, not the string that reaches the printer. */
.sticker-text[b-4o5stsxdxt] {
  font-family: var(--font-mono, ui-monospace, monospace);
  text-transform: uppercase;
  resize: vertical;
}

.sticker-preview-block[b-4o5stsxdxt],
.sticker-printer-block[b-4o5stsxdxt] {
  margin-top: var(--space-4, 1rem);
}

/* The inline caption that replaced the "PRINTER" pane title. Matched to .nwc-form-field > label so
   the row still reads as a labelled control and not as loose text beside a select. flex:0 0 auto —
   the select absorbs the slack, and the caption must never be the thing that shrinks. */
.sticker-printer-label[b-4o5stsxdxt] {
  flex: 0 0 auto;
  font-size: var(--font-size-xs, .75rem);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text-secondary);
}

/* Describes the chosen sticker type, on the CONTROL row of .nwc-form-row (a 12-col grid with three
   shared rows: label / control / hint). Explicit grid-row is what keeps it off the hint row — that
   row is the height this rule exists to remove.
   ⛔⛔ The column START is explicit, and that is NOT belt-and-braces. An item with a definite row is
   placed in grid's FIRST pass, before auto-placed items — so `grid-column: span 5` alone parked this
   sentence in columns 1-5 and pushed "Sticker type" and "Label size" to the right of it, labels and
   all. Measured, not theorised. Start after the fields instead: type is .nwc-field-md (span 3, cols
   1-3), stock is .nwc-field-lg (span 4, cols 4-7), and Freeform adds "Biggest text" .nwc-field-2xs
   (span 2, cols 8-9). ⚠ These starts are therefore derived from those field classes — change one of
   them and this must follow, or the note lands on top of a field.
   align-self:center against the row's `align-items: end`, so a one-line sentence sits with the
   select rather than on its baseline. */
.sticker-type-note[b-4o5stsxdxt] {
  grid-row: 2;
  grid-column: 8 / -1;
  align-self: center;
  margin: 0;
  font-size: var(--font-size-xs, .75rem);
  color: var(--bs-gray-600);
}

.sticker-type-note.is-narrow[b-4o5stsxdxt] {
  grid-column: 10 / -1;
}

/* Below the dense breakpoint .nwc-form-row collapses to one column; site.css only re-spans
   .nwc-form-field, so this needs its own reset or it keeps a 5-col span in a 1-col grid. */
@media (max-width: 640px) {
  .sticker-type-note[b-4o5stsxdxt],
  .sticker-type-note.is-narrow[b-4o5stsxdxt] {
    grid-row: auto;
    grid-column: 1 / -1;
  }
}

.sticker-preview[b-4o5stsxdxt] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  padding: var(--space-2, .5rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, .5rem);
  background: var(--bs-gray-100);
}

/* 2:3 is the 4x6in label the renderers emit — the preview box matches the stock so a layout that
   looks balanced here is balanced on the sticker. */
.sticker-preview img[b-4o5stsxdxt],
.sticker-preview iframe[b-4o5stsxdxt] {
  max-width: 100%;
  max-height: 200px;
  border: 0;
}

.sticker-preview img[b-4o5stsxdxt] {
  object-fit: contain;
}

/* The PDF viewer needs real width to lay the page out; without a declared width the iframe
   collapses to its 300px default and the sticker renders as a sliver. Not aspect-ratio'd — the
   stock is now user-selectable (4x6 portrait, 6x4 landscape, 2x4), so a fixed ratio would letterbox
   two of the three. */
.sticker-preview iframe[b-4o5stsxdxt] {
  width: 100%;
  height: 200px;
}

/* ---- current selection ---- */

.sticker-selection[b-4o5stsxdxt] {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  margin-top: var(--space-3, .75rem);
  min-height: 2rem;
}

.sticker-selection-empty[b-4o5stsxdxt] {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  color: var(--text-muted);
}

.sticker-selection-clear[b-4o5stsxdxt] {
  padding: 0;
}

/* ---- content toggles ---- */

.sticker-content-row[b-4o5stsxdxt] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, .75rem);
  margin-top: var(--space-3, .75rem);
}

.sticker-content-label[b-4o5stsxdxt] {
  font-size: .875rem;
  color: var(--text-muted);
}

.sticker-toggle[b-4o5stsxdxt] {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-size: .875rem;
  cursor: pointer;
}

/* Sized to its content — a date input given a flexible width in a wrap row stretches to fill the
   line and reads as the row's main control, which it is not. */
.sticker-date-input[b-4o5stsxdxt] {
  flex: 0 0 auto;
  width: auto;
  padding: .15rem .4rem;
  font-size: .875rem;
}

/* ---- batch list ---- */

/* ⛔ NOT justify-content: space-between. With two children that read the same as pushing the count
   right; with three (heading + batch message + count) it spreads them evenly and the message floats
   away from the heading it captions. `margin-left: auto` on the count says what is actually meant —
   the count is pinned right, everything else packs left — and does not change meaning when the
   message is absent. */
.sticker-batch-head[b-4o5stsxdxt] {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, .5rem);
}

.sticker-batch-count[b-4o5stsxdxt] {
  margin-left: auto;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* The batch message when it rides the pane title. .nwc-pane-title sets uppercase + semibold +
   letter-spacing for a 1-2 word heading; a sentence inherits all three and reads as shouting, so
   every one of them is reset here. min-width:0 lets it wrap inside the flex row instead of forcing
   the count off the end. */
.sticker-head-note[b-4o5stsxdxt] {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  min-width: 0;
  font-size: .8125rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-muted);
}

.sticker-head-note.is-warning[b-4o5stsxdxt] {
  color: var(--warning-text, #664d03);
}

.sticker-batch-item[b-4o5stsxdxt] {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, .5rem);
  padding: var(--space-2, .5rem);
  margin-bottom: var(--space-2, .5rem);
}

/* Unselected rows stay legible rather than being hidden — the point of the list is to see what
   you're NOT printing as much as what you are. */
.sticker-batch-item:not(.is-selected)[b-4o5stsxdxt] {
  opacity: .55;
}

.sticker-batch-item-head[b-4o5stsxdxt] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, .5rem);
  margin-bottom: var(--space-2, .5rem);
}

.sticker-batch-item-title[b-4o5stsxdxt] {
  font-weight: var(--font-weight-semibold, 600);
  font-size: .875rem;
}

.sticker-preview img[b-4o5stsxdxt] {
  aspect-ratio: auto;
  object-fit: contain;
}

.sticker-note[b-4o5stsxdxt] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2, .5rem);
  margin-bottom: var(--space-2, .5rem);
  font-size: .875rem;
  color: var(--text-muted);
}

/* Amber, not red: a degraded sticker still prints, and styling it as an error trains people to
   ignore it. The one it exists for is "Innovint is unreachable, so volume will be blank". */
.sticker-note.is-warning[b-4o5stsxdxt] {
  color: var(--warning-text, #664d03);
}

/* Wraps, because this row now carries five things (caption, select, rename, copies, scope toggle)
   and the drawer is resizable. Without wrap they all compete for one line and the select — the only
   flexible item — is the one that collapses, which is exactly the control you cannot afford to
   lose. Wrapping spends a row only at widths where the alternative is an unusable select. */
.sticker-printer-row[b-4o5stsxdxt] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, .5rem);
}

/* ⛔ min-width is a floor, not 0. `flex: 1 1 auto; min-width: 0` lets a flex item shrink below its
   content indefinitely; with four inflexible siblings on the line that renders a select a few
   characters wide showing a truncated printer name. 12rem is enough to read one. */
.sticker-printer-row select[b-4o5stsxdxt],
.sticker-nickname-input[b-4o5stsxdxt] {
  flex: 1 1 12rem;
  min-width: 12rem;
}

.sticker-actions[b-4o5stsxdxt] {
  align-items: center;
}

.sticker-copies[b-4o5stsxdxt] {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
  margin: 0;
  margin-right: auto;
  font-size: .875rem;
  white-space: nowrap;
}

.sticker-copies input[b-4o5stsxdxt] {
  width: 4.5rem;
}

/* On the printer line Copies is the LAST flex item and the select already absorbs the slack,
   so the batch-head's `margin-right: auto` has nothing to push and only muddies intent. */
.sticker-copies--inline[b-4o5stsxdxt] {
  margin-right: 0;
}

.sticker-flash[b-4o5stsxdxt] {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  color: var(--bs-success);
}

/* ---- printer scope toggle ---- */

/* Sits directly under the select it widens and is styled as muted secondary text, so it reads as a
   modifier of that control rather than a fourth peer field competing for the eye. Reuses
   .sticker-toggle for the box/label mechanics — the content toggles above are the same shape. */
/* ⛔ margin-top is 0, not .5rem: this label used to be its own row under the printer and now sits
   IN that row. A stale top margin on a flex item does not add a row back, it just shoves this one
   item down off the shared centre line — the kind of misalignment that reads as a rendering bug.
   flex:0 0 auto for the same reason as the caption: the select is what gives up width. */
.sticker-printer-scope[b-4o5stsxdxt] {
  flex: 0 0 auto;
  margin-top: 0;
  color: var(--text-muted);
}

/* The honest cost of ticking the box. ~97 rows against 13 is the whole reason this is opt-in, and a
   count is the cheapest way to say so without a sentence of warning prose. */
.sticker-printer-scope-count[b-4o5stsxdxt] {
  font-size: .8125rem;
  opacity: .8;
}
/* /Pages/Projected/AddProjectionPanel.razor.rz.scp.css */
/* The form is a `.nwc-form-grid-4` of `<FormField>` cells (LAYOUT-PATTERNS Pattern 16), so field
   width, label styling and input chrome all come from site.css. Nothing bespoke belongs here except
   the two shapes the pattern has no cell for.

   Deleted with the design-system conversion, on purpose:
     #vintages / #Varietals / #ContactBusinesses — per-id width and padding overrides. Width is now
       the grid column (Vintage = 1 of 4), which is also what finally fixed the long-running
       "vintage select is full width" bug: it sidesteps Bootstrap's `.form-select { display:block }`
       instead of fighting it with `width:` (see CC_Handoff_AddProjectionCheapWins_2026-07-21).
     input, label { display: block } — a scoped-but-untargeted rule that forced every input in the
       component to block, including the Is Organic checkbox.
     .flex-row / .flex-row2 — the hand-rolled row layouts the grid and `.nwc-form-actions` replace. */

/* The Is Organic cell: a native checkbox can't be a plain `.nwc-form-field` input, because that
   rule applies `appearance:none` and the box renders invisible. The label still comes from the
   cell, so only the input row itself is bespoke. */
.projection-check-row[b-6ykjjy1f3s] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 38px; /* matches the sibling inputs' height so the row baseline doesn't jump */
}

.projection-check-row input[b-6ykjjy1f3s] {
    margin: 0;
}

/* "Still needed: …" — composes .nwc-form-hint, and only recolours it. */
.projection-missing[b-6ykjjy1f3s] {
    color: var(--bs-danger);
    margin-top: var(--space-sm);
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.add-projection-tabs[b-6ykjjy1f3s] {
    margin-bottom: var(--space-lg);
}

/* Note shares its row with Est. Harvest Date (span 2 + 2) and starts at input height instead of
   the pattern's 80px textarea — the vertical saving that keeps Submit above the fold. Still
   user-resizable. Id selector outranks site.css's `.nwc-form-field > textarea` floor. */
#note[b-6ykjjy1f3s] {
    min-height: var(--form-input-min-height);
}

/* "Saved #n — …" tally after a keep-open Submit: left-anchored inside the right-aligned
   .nwc-form-actions row so it reads as status, not another button. */
.projection-saved-flash[b-6ykjjy1f3s] {
    margin-right: auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    color: var(--bs-success);
    font-size: var(--font-size-sm);
}
/* /Pages/Projected/Components/ProjectedMainClientRow.razor.rz.scp.css */
/* Moved here from projectedMain.razor.css (harvest-af Round 2, sub-step 2c) — CSS isolation
   scopes to the component a rule's element is declared in, not where it renders, so these rules
   stopped matching once the row-cell markup moved into this component. */

/* UVA cell keeps the varietal + Lab buttons on one line (was an inline
   display:inline-block that broke the cell out of the single table's column grid). */
.uva-cell[b-tnhx1f6cc6] {
    white-space: nowrap;
}

/* Stage 3 (D): an empty analysis cell (no sample yet) shows a faint en-dash so the Date/Brix/pH/TA
   columns read as "no data" placeholders, not blank/broken cells. Populated cells are untouched. */
.analysis-cell:empty[b-tnhx1f6cc6]::before {
    content: "–";
    color: var(--text-disabled);
}

/* At-a-glance left stripe on the UVA cell, mirroring the Progress badge colour. The parent's
   <tr> still carries glowingRow/RowStatusClass for its own purposes (e.g. the .intake-row
   hairline rules), but the stripe itself moved from a `.row-complete .uva-cell` DESCENDANT
   selector (which can't cross a CSS-isolation component boundary — .row-complete lives on the
   parent's <tr>, .uva-cell now lives here) to a compound selector on this element's own class,
   computed independently from the same Received-vs-Projected comparison ProjectedMain.Razor.cs's
   IsIntakeComplete(h2) uses. Same visual output, self-contained instead of reaching back with
   ::deep. */
.uva-cell.row-complete[b-tnhx1f6cc6] {
    box-shadow: inset 0.25rem 0 0 0 var(--state-success-fg);
}

.uva-cell.row-incomplete[b-tnhx1f6cc6] {
    box-shadow: inset 0.25rem 0 0 0 var(--state-danger-fg);
}

/* Varietal reads as data, not a link (P4): neutral bold text that only reveals its
   clickability (edit the projection) on hover. Lab is the row's de-emphasized
   secondary action — small + muted — so it no longer competes with the varietal. */
.varietal-btn[b-tnhx1f6cc6] {
    padding: 1px 2px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.varietal-btn:hover[b-tnhx1f6cc6] {
    color: var(--interactive-primary);
    text-decoration: underline;
}

/* Lab-analysis "add sample" affordance (Stage 3): a "+" bubble in the Date/analysis column, so the
   add path sits right at the decision-critical data — replaces the old muted "Lab" text button. */
.analysis-date-wrap[b-tnhx1f6cc6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

.analysis-add-btn[b-tnhx1f6cc6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    background: var(--surface-muted);
    color: var(--text-secondary);
    font-size: var(--font-size-md);
    line-height: 1;
    cursor: pointer;
}

.analysis-add-btn:hover[b-tnhx1f6cc6] {
    background: var(--interactive-primary);
    border-color: var(--interactive-primary);
    color: var(--text-on-brand);
}

/* Empty state (no sample yet) → a prominent accent CTA so an un-sampled block reads "go sample me". */
.analysis-add-cta[b-tnhx1f6cc6] {
    background: var(--surface-default);
    border-color: var(--interactive-primary);
    color: var(--interactive-primary);
}

.analysis-date-val[b-tnhx1f6cc6] {
    font-variant-numeric: tabular-nums;
}

/* "Bookings (n)" indicator in the Booked cell — surfaces the child Status="Scheduled" rows linked
   to this projection via ParentFruitIntakeId (ProjectedMain.GetBookingsFor / ProjectionBookingsPanel).
   Only rendered when count > 0. Neutral info tone, not a good/bad signal like the Progress badge. */
.booking-count-badge[b-tnhx1f6cc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    margin-left: var(--space-2xs);
    border: none;
    border-radius: var(--status-badge-radius);
    padding: var(--status-badge-padding);
    background: var(--state-info-bg);
    color: var(--state-info-fg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.booking-count-badge:hover[b-tnhx1f6cc6] {
    filter: brightness(0.95);
}

/* ── Fruit-intake completion status (Progress column) ──────────────────────────
   Replaces bare red/green numbers with a labeled, tooltipped badge so the color
   meaning is explicit: GREEN = tons complete (fully brought into the winery),
   RED = not complete (booked/scheduled but not fully received). */
.status-badge[b-tnhx1f6cc6] {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    border-radius: var(--status-badge-radius);
    padding: var(--status-badge-padding);
    font-size: var(--status-badge-font-size);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.status-badge .status-dot[b-tnhx1f6cc6] {
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 auto;
}

.status-complete[b-tnhx1f6cc6] {
    background-color: var(--state-success-bg);
    color: var(--state-success-fg);
}

.status-incomplete[b-tnhx1f6cc6] {
    background-color: var(--state-danger-bg);
    color: var(--state-danger-fg);
}

/* ── Intake action model (P4, B4; consolidated 2026-07-14) ──────────────────────
   Was a prominent primary "Receive" button + a separate ⋯ overflow for the rest —
   two controls per row ate Actions-column width across every row. Collapsed to ONE
   "Actions ⋯" trigger; Receive is still the first, visually distinguished item in
   the dropdown (.action-menu-primary) so it stays the obvious default choice. The
   flex lives on an inner <div>, never on the <td> — a display:flex cell breaks out
   of the single table's column grid (same trap the UVA cell hit). */
.actions-inner[b-tnhx1f6cc6] {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--space-2xs);
}

.action-overflow[b-tnhx1f6cc6] {
    position: relative;
    display: inline-flex;
}

.action-more[b-tnhx1f6cc6] {
    height: 26px;
    padding: 0 var(--space-sm);
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.action-more:hover[b-tnhx1f6cc6],
.action-more[aria-expanded="true"][b-tnhx1f6cc6] {
    background: var(--surface-muted);
    color: var(--text-primary);
}

/* Drops down-left from the ⋯ (right:0) so it never overflows the viewport at the
   far-right Actions column; z-index beats the backdrop (which beats everything else). */
/* var(--z-dropdown) (1001) loses to MainLayout's fixed page header
   (--z-page-header-fixed, 1030 — it visually overlaps the top of .content since
   .content has margin-top:0) when this row is near the top of the page. Clear
   that tier explicitly instead of the general dropdown tier — same fix as
   ProjectedMain's .client-menu. */
.action-menu[b-tnhx1f6cc6] {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    z-index: calc(var(--z-page-header-fixed) + 10);
    min-width: 130px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--space-2xs);
    background: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--dropdown-menu-shadow);
}

.action-menu-item[b-tnhx1f6cc6] {
    display: block;
    width: 100%;
    padding: var(--space-2xs) var(--space-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.action-menu-item:hover[b-tnhx1f6cc6] {
    background: var(--surface-muted);
}

/* Receive stays the obvious default pick even inside the consolidated menu. */
.action-menu-primary[b-tnhx1f6cc6] {
    color: var(--interactive-primary);
    font-weight: var(--font-weight-semibold);
}

.action-menu-primary:hover[b-tnhx1f6cc6] {
    background: var(--state-info-bg, var(--surface-muted));
}

.action-menu-danger[b-tnhx1f6cc6] {
    color: var(--red-700);
}

.action-menu-danger:hover[b-tnhx1f6cc6] {
    background: var(--state-danger-bg);
    color: var(--red-700);
}

/* ── Mobile — Stage 4 phone stacked-card layout ──────────────────────────────
   The parent (projectedMain.razor.css) collapses each .intake-row <tr> into a flex-wrap
   card and hides the sticky column header; these rules lay this row's own data <td>s out
   INSIDE that card. Two levers do the work: `order` positions each cell independent of DOM
   order, and `data-label` (added to the markup) supplies the field label now that the
   column header — the only thing that named these values on desktop — is gone. Cell widths
   pick their own line: varietal+progress share the title line, Booked+Received a half-and-half
   line, the four analysis stats a quarter-each strip, then Block / Note / Actions full-width.

   Row actions stay at the 32px touch floor (was the ONLY prior mobile rule here — the desktop
   26px is below even the app's "lighter" dense-table thumb target; DynamicBlock precedent). */
@media (max-width: 767.98px) {
    .action-more[b-tnhx1f6cc6] {
        height: 32px;
    }

    /* Every data cell: label-over-value stack, shed the table cell's centering/nowrap/padding. */
    .uva-cell[b-tnhx1f6cc6],
    .num-col[b-tnhx1f6cc6],
    .analysis-date-cell[b-tnhx1f6cc6],
    .analysis-cell[b-tnhx1f6cc6],
    .progress-cell[b-tnhx1f6cc6],
    .block-cell[b-tnhx1f6cc6],
    .note-cell[b-tnhx1f6cc6],
    .actions-cell[b-tnhx1f6cc6] {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: var(--space-2xs) 0;
        text-align: left;
        white-space: normal;
    }

    /* Field label from data-label (uppercase micro-caption above the value). */
    .num-col[data-label][b-tnhx1f6cc6]::before,
    .analysis-date-cell[data-label][b-tnhx1f6cc6]::before,
    .analysis-cell[data-label][b-tnhx1f6cc6]::before,
    .block-cell[data-label][b-tnhx1f6cc6]::before,
    .note-cell[data-label][b-tnhx1f6cc6]::before {
        content: attr(data-label);
        font-size: var(--font-size-2xs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }

    /* 1 — Varietal is the card title (left half of the title row). No label. */
    .uva-cell[b-tnhx1f6cc6] {
        order: 1;
        grid-column: span 2;
        min-width: 0;
    }
    .uva-cell .varietal-btn[b-tnhx1f6cc6] {
        font-size: var(--font-size-md);
    }

    /* 2 — Progress badge fills the right half of the title row, right-aligned (the badge is
       nowrap, so it needs two columns of room). */
    .progress-cell[b-tnhx1f6cc6] {
        order: 2;
        grid-column: span 2;
        align-items: flex-end;
    }

    /* 3 / 4 — Booked + Received share one half-and-half line. */
    .num-col[b-tnhx1f6cc6] {
        order: 3;
        grid-column: span 2;
        padding-right: 0;
        font-size: var(--font-size-sm);
    }
    .num-col[data-label="Received"][b-tnhx1f6cc6] {
        order: 4;
    }

    /* Column layout on mobile — the left margin that separates it from the tons value inline
       on desktop reads as an odd gap once it wraps to its own line. */
    .booking-count-badge[b-tnhx1f6cc6] {
        margin-left: 0;
        margin-top: var(--space-2xs);
    }

    /* 5–8 — analysis mini-stat strip: four centered quarter-columns. */
    .analysis-date-cell[b-tnhx1f6cc6],
    .analysis-cell[b-tnhx1f6cc6] {
        order: 5;
        grid-column: span 1;
        align-items: center;
        text-align: center;
    }
    .analysis-cell[data-label="Brix"][b-tnhx1f6cc6] { order: 6; }
    .analysis-cell[data-label="pH"][b-tnhx1f6cc6]   { order: 7; }
    .analysis-cell[data-label="TA"][b-tnhx1f6cc6]   { order: 8; }

    /* An empty analysis value shows label + a dash (the desktop en-dash rule targets the same
       ::before, so re-point it to the label here and put the dash on ::after). */
    .analysis-cell:empty[b-tnhx1f6cc6]::before {
        content: attr(data-label);
    }
    .analysis-cell:empty[b-tnhx1f6cc6]::after {
        content: "\2013";
        color: var(--text-disabled);
    }

    /* 9 / 10 — Block + Note full width. Note collapses entirely when there's no note
       (display:none drops it from the grid, so no empty row is reserved). */
    .block-cell[b-tnhx1f6cc6] {
        order: 9;
        grid-column: 1 / -1;
    }
    .note-cell[b-tnhx1f6cc6] {
        order: 10;
        grid-column: 1 / -1;
    }
    .note-cell:empty[b-tnhx1f6cc6] {
        display: none;
    }

    /* 11 — Actions full width; the single Actions trigger grows to a comfortable tap target. */
    .actions-cell[b-tnhx1f6cc6] {
        order: 11;
        grid-column: 1 / -1;
        padding-top: var(--space-xs);
    }
    .actions-inner[b-tnhx1f6cc6] {
        width: 100%;
    }
    .action-overflow[b-tnhx1f6cc6],
    .action-more[b-tnhx1f6cc6] {
        width: 100%;
    }
    .action-more[b-tnhx1f6cc6] {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}
/* /Pages/Projected/Components/ProjectedMainSummary.razor.rz.scp.css */
/* Moved here from projectedMain.razor.css (harvest-af Round 2) — CSS isolation scopes to
   the component a rule's element is declared in, not where it renders, so these rules
   (including the bare `progress` element selector and #completeWhite/-Red ids) stopped
   matching once the summary markup + its <progress> elements moved into this component.
   Co-locating them here (rather than reaching back in with ::deep) keeps the component
   self-contained. The top summary dashboard panel lives in ProjectedMain's .hd-header
   (B7), which never scrolls — no position:sticky needed here. The shadow reads as
   "floating above" the scrollable client list beneath it. */
.harvest-summary[b-7ldxj0sj9c] {
    background-color: var(--surface-default);
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid var(--border-default);
    font-variant-numeric: tabular-nums;
}

/* ── Summary composition (P10, B5) ─────────────────────────────────────────────
   The three ununified nested-table columns become one flex band telling the
   Projected → Received → % Complete story, with the completion figure as the hero,
   the tokenized bars beside it, and the Clients-Crushing list as a scannable list.
   No custom progress ring (D4) — the bars carry the visual. */
.summary-grid[b-7ldxj0sj9c] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-2xs) var(--space-md);
}

.summary-story[b-7ldxj0sj9c] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex: 1 1 auto;
    min-width: 0;
}

.summary-stat[b-7ldxj0sj9c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.summary-stat-label[b-7ldxj0sj9c],
.summary-total-label[b-7ldxj0sj9c],
.summary-bars-title[b-7ldxj0sj9c],
.summary-clients-title[b-7ldxj0sj9c] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.summary-stat-value[b-7ldxj0sj9c] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
}

.summary-stat-split[b-7ldxj0sj9c] {
    display: flex;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.split-chip[b-7ldxj0sj9c] {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-variant-numeric: tabular-nums;
}

.split-chip[b-7ldxj0sj9c]::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    flex: 0 0 auto;
}

.split-red[b-7ldxj0sj9c]::before   { background: var(--red-500); }
.split-white[b-7ldxj0sj9c]::before { background: var(--amber-300); }

/* Chevron separators between the three story beats. */
.summary-flow[b-7ldxj0sj9c] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--border-strong);
}

/* Hero: the dashboard's headline completion figure. */
.summary-hero[b-7ldxj0sj9c] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: var(--space-md);
    border-left: 2px solid var(--border-default);
}

.summary-hero-value[b-7ldxj0sj9c] {
    font-size: 1.8rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    color: var(--accent-primary);
    font-variant-numeric: tabular-nums;
}

.summary-hero-pct[b-7ldxj0sj9c] {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    margin-left: 0.08em;
}

.summary-hero-label[b-7ldxj0sj9c] {
    margin-top: var(--space-3xs);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

/* Total Tons — the unfrozen forecast, a second headline beside the completion hero.
   Borrows the hero's left-divider so it reads as its own beat, but stays --text-primary at a
   smaller size: --accent-primary is reserved for the % Complete hero, and two accent-colored
   big numbers side by side would leave neither one the headline. */
.summary-total[b-7ldxj0sj9c] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3xs);
    padding-left: var(--space-md);
    border-left: 2px solid var(--border-default);
    white-space: nowrap;
}

.summary-total-value[b-7ldxj0sj9c] {
    font-size: 1.35rem;
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--text-primary);
}

/* Amber, matching the "past projection cutoff" accent glowingRow puts on the very rows these
   tons come from (projectedMain.razor.css) — deliberately not red: late fruit is normal, and
   red on this page is reserved for the Progress/incomplete signal. */
.summary-total-delta[b-7ldxj0sj9c] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--amber-600);
}

/* Tokenized progress bars — reuse the #completeWhite/-Red/-Total fills from A2.
   ⚠ min-width 210px → 185px when the Total Tons tile was added (2026-08-10). The tile costs
   ~136px of row width, which pushed the whole strip onto a second line at ~1180px viewport —
   measured at +97px of chrome, on exactly the surface the B7 work fought to keep short. The
   bars stay legible at 185px (each progress element is flex:1 with an 80px floor). */
.summary-bars[b-7ldxj0sj9c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 185px;
}

.summary-bars-title[b-7ldxj0sj9c] {
    margin-bottom: var(--space-3xs);
}

.summary-bar-row[b-7ldxj0sj9c] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--font-size-sm);
}

.summary-bar-name[b-7ldxj0sj9c] {
    width: 40px;
    color: var(--text-secondary);
}

.summary-bar-row progress[b-7ldxj0sj9c] {
    flex: 1 1 auto;
    width: auto;
    min-width: 80px;
}

.summary-bar-val[b-7ldxj0sj9c] {
    width: 48px;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

/* Scannable clients-crushing list.
   ⚠ `flex: 1 1 190px; min-width: 0` (was a hard `min-width: 220px`) so this block ABSORBS the
   shrink when the row runs out of width instead of wrapping the strip onto a second line —
   the roster already ellipsises its rows, so losing a few characters of a business name is
   far cheaper than +97px of permanent dashboard chrome. Required once the Total Tons tile
   joined the row; measured at 1180px viewport, 2026-08-10. */
.summary-clients[b-7ldxj0sj9c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    flex: 1 1 190px;
    min-width: 0;
    max-width: 280px;
}

/* Plain block scroll box — NOT flex-column: 40+ flex children would shrink to fit
   max-height and clip their own text instead of scrolling. */
.summary-clients-scroll[b-7ldxj0sj9c] {
    max-height: 96px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.summary-client-item[b-7ldxj0sj9c] {
    display: block;
    width: 100%;
    padding: var(--space-2xs) var(--space-sm);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.summary-client-item:last-child[b-7ldxj0sj9c] {
    border-bottom: none;
}

.summary-client-item:hover[b-7ldxj0sj9c] {
    background: var(--surface-muted);
}

/* ── Clients-Crushing completion bars (P7) ─────────────────────────────────────
   Replace the browser-default <progress> chrome with tokenized bars so they read
   as part of the app's design language. Cross-browser requires the appearance
   reset plus the -webkit / -moz pseudo-elements (WebKit/Blink split the track and
   value; Firefox exposes only ::-moz-progress-bar). Per-bar fill distinguishes
   White (straw) / Red / Total (accent). */
progress[b-7ldxj0sj9c] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 140px;
    height: 10px;
    border: none;
    border-radius: var(--radius-pill);
    overflow: hidden;
    vertical-align: middle;
    background-color: var(--surface-emphasis);   /* Firefox track */
}

progress[b-7ldxj0sj9c]::-webkit-progress-bar {
    background-color: var(--surface-emphasis);
    border-radius: var(--radius-pill);
}

progress[b-7ldxj0sj9c]::-webkit-progress-value {
    background-color: var(--accent-primary);      /* Total default */
    border-radius: var(--radius-pill);
    transition: width var(--transition-default);
}

progress[b-7ldxj0sj9c]::-moz-progress-bar {
    background-color: var(--accent-primary);
    border-radius: var(--radius-pill);
}

#completeWhite[b-7ldxj0sj9c]::-webkit-progress-value { background-color: var(--amber-300); }
#completeWhite[b-7ldxj0sj9c]::-moz-progress-bar      { background-color: var(--amber-300); }
#completeRed[b-7ldxj0sj9c]::-webkit-progress-value   { background-color: var(--red-500); }
#completeRed[b-7ldxj0sj9c]::-moz-progress-bar        { background-color: var(--red-500); }

/* ── Mobile (B7 mobile fix) ──────────────────────────────────────────────────
   The summary panel alone consumed 553px of an 844px phone screen (only ~234px
   left for the actual scrollable table — the entire point of the fix). Tighten
   it so the table gets the room instead. Moved here verbatim from
   projectedMain.razor.css's shared mobile media query (harvest-af Round 2). */
@media (max-width: 767.98px) {
    .summary-grid[b-7ldxj0sj9c] {
        gap: var(--space-sm);
        padding: var(--space-2xs) var(--space-sm);
    }

    .summary-hero-value[b-7ldxj0sj9c] {
        font-size: 1.6rem;
    }

    .summary-hero-pct[b-7ldxj0sj9c] {
        font-size: 1rem;
    }

    /* Drop the divider on phones: once .summary-grid wraps, the tile starts a line and a
       left border there reads as a stray rule rather than a separator. */
    .summary-total[b-7ldxj0sj9c] {
        padding-left: 0;
        border-left: 0;
    }

    .summary-total-value[b-7ldxj0sj9c] {
        font-size: 1.2rem;
    }

    .summary-bars[b-7ldxj0sj9c] {
        min-width: 0;
    }

    .summary-bar-row progress[b-7ldxj0sj9c] {
        min-width: 60px;
    }

    .summary-clients[b-7ldxj0sj9c] {
        min-width: 0;
        max-width: none;
    }

    .summary-clients-scroll[b-7ldxj0sj9c] {
        max-height: 84px;
    }
}
/* /Pages/Projected/Components/ProjectedMainToolbar.razor.rz.scp.css */
/* Toolbar (harvest-hdr p1): ONE left-aligned row — search · vintage · reports on the left,
   secondary actions + "+ Add Projection" on the right. The old shape was an H1 plus a
   right-flung control cluster on a 3-track grid; the H1 is gone (the year selector and the
   active tab already carry that context) and with it the padding that only existed to give
   the H1 breathing room.

   Everything here is scoped to ProjectedMainToolbar.razor: CSS isolation scopes a rule to the
   component whose file DECLARES the element, not where it renders, so these rules must live
   beside the markup (they were moved here from projectedMain.razor.css for exactly that
   reason during harvest-af Round 2). */

/* The AdaptiveRegion wrapper is a plain block — it carries data-size, not layout. */
.harvest-toolbar-region[b-98f2tgixpn] {
    min-width: 0;
}

.harvest-toolbar[b-98f2tgixpn] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    /* No vertical padding: it existed only for the deleted H1. The row's own control height
       (34px) is the band height now. */
    margin-bottom: var(--space-2xs);
    min-width: 0;
    /* NOWRAP on desktop, deliberately. If the toolbar itself is allowed to wrap, the action
       cluster drops to a second line and "+ Add Projection" moves — the exact muscle-memory
       complaint that pinned it to the corner in the first place (guarded by the
       harvest-toolbar-add-anchor suite). Pressure is absorbed INSIDE .harvest-controls instead,
       which wraps and lets the search field shrink. The phone override below restores wrapping
       where a single row genuinely cannot work. */
    flex-wrap: nowrap;
}

.harvest-controls[b-98f2tgixpn],
.harvest-actions[b-98f2tgixpn],
.harvest-secondary[b-98f2tgixpn] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.harvest-controls[b-98f2tgixpn] {
    flex-wrap: wrap;
}

/* Push the action cluster to the right edge while the left cluster stays anchored to the
   table's Client column. margin-left:auto (not justify-content:space-between) so the two
   clusters keep their own internal gap rules and a wrapped left cluster can't drag the
   primary action out of the corner. */
.harvest-actions[b-98f2tgixpn] {
    margin-left: auto;
    flex: 0 0 auto;
}

/* Uniform control height so the cluster reads as one row of peers. Pill radius with quiet
   borders, and the native selects lose their stock chrome for a custom chevron so they read
   as peers of the buttons rather than raw form controls (owner feedback 2026-07-22: "boxy",
   "the Reports dropdown is ugly"). */
.harvest-controls .form-input[b-98f2tgixpn],
.harvest-controls .form-select[b-98f2tgixpn],
.harvest-secondary .btn-secondary[b-98f2tgixpn],
.harvest-overflow-btn[b-98f2tgixpn],
.harvest-add-btn[b-98f2tgixpn] {
    height: 34px;
    border-radius: var(--radius-pill);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.harvest-secondary .btn-secondary[b-98f2tgixpn],
.harvest-overflow-btn[b-98f2tgixpn],
.harvest-controls .form-select[b-98f2tgixpn] {
    background-color: var(--surface-default);
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
}

.harvest-secondary .btn-secondary[b-98f2tgixpn],
.harvest-overflow-btn[b-98f2tgixpn],
.harvest-add-btn[b-98f2tgixpn] {
    padding: 0 0.95rem;
    font-weight: 500;
}

.harvest-secondary .btn-secondary:hover[b-98f2tgixpn],
.harvest-overflow-btn:hover[b-98f2tgixpn],
.harvest-controls .form-select:hover[b-98f2tgixpn] {
    border-color: var(--border-strong);
    background-color: var(--surface-subtle);
}

.harvest-secondary .btn-secondary:focus-visible[b-98f2tgixpn],
.harvest-overflow-btn:focus-visible[b-98f2tgixpn],
.harvest-controls .form-select:focus[b-98f2tgixpn],
.harvest-controls .form-input:focus[b-98f2tgixpn] {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus-accent);
}

.harvest-secondary .btn-secondary i[b-98f2tgixpn] {
    color: var(--accent-primary);
}

.harvest-controls .form-select[b-98f2tgixpn] {
    width: auto;
    appearance: none;
    -webkit-appearance: none;
    padding: 0 1.9rem 0 0.95rem;
    /* currentColor-ish gray chevron; encoded inline so no asset request. */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
}

/* Bootstrap's .form-input sets width:100%, which fights the flex row — the search box would
   try to fill the whole cluster and force everything else onto a second line. Bound it so it
   sits inline with its siblings; it is also the control that gives ground first when the
   region narrows (see the narrow block below). */
.harvest-search[b-98f2tgixpn] {
    width: 220px;
    flex: 0 1 220px;
    min-width: 140px;
    border: 1px solid var(--border-default);
    padding: 0 0.95rem;
}

.harvest-add-btn[b-98f2tgixpn] {
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ── Stats-strip collapse caret ────────────────────────────────────────────────
   Small enough not to eat the ~126px it reclaims, obvious enough to find: a bordered chip that
   matches the height of its neighbours in the cluster but stays square, so it reads as a control
   rather than another field. */
.harvest-summary-toggle[b-98f2tgixpn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.harvest-summary-toggle:hover[b-98f2tgixpn] {
    background: var(--surface-subtle);
    border-color: var(--border-default);
    color: var(--text-primary);
}

.harvest-summary-toggle:focus-visible[b-98f2tgixpn] {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: var(--shadow-focus-accent);
}

/* ── ⋯ overflow ────────────────────────────────────────────────────────────────
   Present in the DOM at every width, displayed only when AdaptiveRegion reports a narrow
   region. Shape mirrors the per-client ⋯ menu on this page (.client-menu in
   projectedMain.razor.css) — same trigger/dropdown/backdrop model, deliberately not a
   second visual language. */
.harvest-overflow[b-98f2tgixpn] {
    position: relative;
    display: none;
    flex: 0 0 auto;
}

/* Menu rows that merely duplicate an inline control: shown only when the region is narrow enough
   for .harvest-secondary to have folded away. Before nwc-adaptive.js stamps data-size the
   :not() matches, so these start hidden — the safe default, since the inline controls are
   visible in exactly that state. */
.harvest-toolbar-region:not([data-size="narrow"]) .harvest-overflow-narrow-only[b-98f2tgixpn] {
    display: none;
}

.harvest-overflow-btn[b-98f2tgixpn] {
    line-height: 1;
    font-size: var(--font-size-md);
    cursor: pointer;
}

/* Positioning only — the surface (background/border/radius) comes from Bootstrap's
   .dropdown-menu, which the markup pairs this with so the .dropdown-item rows inside get their
   --bs-dropdown-* vars. Drops down-LEFT (right:0) so it never overflows the toolbar's right edge. */
.harvest-overflow-menu[b-98f2tgixpn] {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    left: auto;
    z-index: var(--z-dropdown);
    min-width: 232px;
    box-shadow: var(--dropdown-menu-shadow);
}

/* Sits under the menu but over everything else, so a click anywhere else closes it. */
.harvest-overflow-backdrop[b-98f2tgixpn] {
    position: fixed;
    inset: 0;
    z-index: var(--z-dropdown-backdrop);
    background: transparent;
}

/* ── Narrow region ─────────────────────────────────────────────────────────────
   Below AdaptiveRegion's NarrowPx the secondary actions fold into the ⋯ and the search field
   gives up its fixed width. "+ Add Projection" is untouched at every size — it is the one
   control the crew reaches for constantly, and a moving/vanishing primary action was the
   exact complaint that pinned it to the corner in the first place.

   [data-size] lives on the AdaptiveRegion wrapper, which THIS component declares, so the
   scope attribute lands on the descendant and these rules match. */
.harvest-toolbar-region[data-size="narrow"] .harvest-secondary[b-98f2tgixpn] {
    display: none;
}

.harvest-toolbar-region[data-size="narrow"] .harvest-overflow[b-98f2tgixpn] {
    display: inline-flex;
}

/* The search box is the control that gives ground — it degrades gracefully (a narrower text field
   is still a usable text field) where the selects and the primary button do not. */
.harvest-toolbar-region[data-size="narrow"] .harvest-search[b-98f2tgixpn] {
    flex: 1 1 110px;
    width: auto;
    min-width: 92px;
}

.harvest-toolbar-region[data-size="narrow"] .harvest-controls[b-98f2tgixpn] {
    flex: 1 1 auto;
}

/* Let the selects give a little too before anything is forced onto a second line. */
.harvest-toolbar-region[data-size="narrow"] .harvest-controls .form-select[b-98f2tgixpn] {
    min-width: 0;
}

/* ── Phone ─────────────────────────────────────────────────────────────────────
   Below the phone breakpoint a single row is not achievable at any sensible control size, so
   allow the wrap here (and only here). The corner anchor has no meaning at this width — the
   add-anchor suite asserts reachability, not position, at 390px. */
@media (max-width: 767.98px) {
    .harvest-toolbar[b-98f2tgixpn] {
        flex-wrap: wrap;
    }
}
/* /Pages/Projected/DeleteClientBookingsPanel.razor.rz.scp.css */
/* Client-tier "Delete all bookings" confirm. Shares the visual language of
   DeleteVarietalProjection.razor.css (facts list / blocked box / actions) plus a type-to-confirm
   input. All colors from design tokens so it tracks light/dark.
   Container → .nwc-stack-md; lead → .nwc-panel-lead; warning → .nwc-panel-note;
   actions → .nwc-actions-end; .dc-facts base + row → .nwc-facts-dl (site.css). */
.dc-facts dt[b-lekslbnj17] {
    flex: 0 0 9.5rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.dc-facts dd[b-lekslbnj17] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.dc-confirm-label[b-lekslbnj17] {
    display: block;
    margin-bottom: var(--space-2xs);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.dc-mismatch[b-lekslbnj17] {
    display: block;
    margin-top: var(--space-2xs);
    color: var(--state-danger-fg);
    font-size: var(--font-size-xs);
}
/* /Pages/Projected/DeleteVarietalProjectionPanel.razor.rz.scp.css */
/* Confirm dialog for deleting one booking projection. Context echo (client/varietal/block/tons)
   + a received-fruit block state, styled from design tokens so it tracks light/dark.
   Container → .nwc-stack-md; lead → .nwc-panel-lead; warning → .nwc-panel-note;
   actions → .nwc-actions-end; .dp-facts base + row → .nwc-facts-dl (site.css). */
.dp-facts dt[b-2s0bebw2to] {
    flex: 0 0 5.5rem;
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.dp-facts dd[b-2s0bebw2to] {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

/* /Pages/Projected/MaturitySheetUploadPanel.razor.rz.scp.css */
/* Maturity sheet import panel — component-scoped only; grid + chips have no site-wide pattern
   equivalent yet (single consumer). Colors ride the shared tokens with safe fallbacks. */

.msu-body[b-ff4slfheta] { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.25rem 0.25rem 1rem; }

.msu-intro[b-ff4slfheta] { margin: 0; color: var(--text-secondary); }

.msu-upload-zone[b-ff4slfheta] { padding: 1.25rem; border: 2px dashed var(--border-strong); border-radius: 8px; }

.msu-template-hint[b-ff4slfheta] { font-size: 0.9rem; color: var(--text-secondary); }

.msu-error[b-ff4slfheta], .msu-warning[b-ff4slfheta] { color: var(--danger-700, #b02a37); font-size: 0.9rem; }
.msu-warning[b-ff4slfheta] { color: var(--warning-700, #9a6a00); }

.msu-progress[b-ff4slfheta] { padding: 2rem 0; text-align: center; color: var(--text-secondary); }

.msu-summary[b-ff4slfheta] { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.msu-chip[b-ff4slfheta] { padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.85rem;
            background: var(--surface-muted); color: var(--text-secondary); }
.msu-chip-ready[b-ff4slfheta] { background: var(--success-100, #d9efdb); color: var(--success-800, #1e5a24); }
.msu-chip-dup[b-ff4slfheta]   { background: var(--info-100, #dbe9f6); color: var(--info-800, #1c4f7c); }
.msu-chip-warn[b-ff4slfheta]  { background: var(--warning-100, #fdf0d3); color: var(--warning-800, #7a5600); }
.msu-file[b-ff4slfheta] { margin-left: auto; font-size: 0.85rem; color: var(--text-secondary); }

.msu-grid-wrap[b-ff4slfheta] { max-height: 60vh; overflow: auto; border: 1px solid var(--border-subtle); border-radius: 6px; }
/* Table base = .nwc-data-grid (site.css utility). */
.msu-grid th[b-ff4slfheta] { position: sticky; top: 0; background: var(--surface-raised, #f7f7f7); text-align: left;
               padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border-subtle); z-index: 1; }
.msu-grid td[b-ff4slfheta] { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--border-faint, #eee); vertical-align: top; }

.msu-row-dup[b-ff4slfheta]  { opacity: 0.65; }
.msu-row-dim[b-ff4slfheta]  { opacity: 0.5; }
.msu-row-warn td[b-ff4slfheta] { background: var(--warning-50, #fff9ec); }

.msu-raw[b-ff4slfheta] { font-family: var(--font-mono, monospace); white-space: nowrap; }
.msu-stripped[b-ff4slfheta] { border-bottom: 1px dotted var(--warning-700, #9a6a00); cursor: help; }
.msu-dim[b-ff4slfheta] { color: var(--text-secondary); }
.msu-detail[b-ff4slfheta] { display: block; font-size: 0.78rem; max-width: 220px; }
.msu-status[b-ff4slfheta] { font-weight: 600; }
.msu-block-pick[b-ff4slfheta] { min-width: 160px; }
.msu-client-pick[b-ff4slfheta] { min-width: 130px; }

.msu-done[b-ff4slfheta] { padding: 1.5rem 0; font-size: 1.05rem; }
/* /Pages/Projected/Print/ProgressReportPrintPanel.razor.rz.scp.css */
/* Drawer chrome for the harvest progress print panel.

   ⚠ These rules style the DRAWER, not the sheet. The printed poster's CSS lives in
   ProgressReportPrintStyles.cs and is inlined into a standalone document that never
   links this bundle — see that class before moving anything between the two. */

/* The preview stage. Fills what the drawer has left and centres the sheet in it. */
.hpr-stage[b-btt3seql2c] {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: calc(100vh - 96px);
}

/* Shorter when the delivery strip is showing, so the strip never pushes the sheet
   out of view — the two together are what the user reads after pressing Print. */
.hpr-stage.hpr-stage-with-status[b-btt3seql2c] {
  height: calc(100vh - 160px);
}

/* Paper. The sheet inside sizes itself to exactly one iframe-height (see the --u
   note in ProgressReportPrintStyles), so pinning this box to the page's own 7.5:10
   proportions makes the preview a true scale model of what comes out of the printer
   — the whole poster, the tonnage included, with no scrolling.
   ⛔ Height drives width here, not the other way round: the sheet's type scales with
   HEIGHT, so a width-driven box would change the type size every time the drawer
   width changed. */
.hpr-sheet-frame[b-btt3seql2c] {
  height: 100%;
  width: auto;
  aspect-ratio: 3 / 4;
  border: 0;
  background: #fff;
  box-shadow: 0 1px 6px rgb(0 0 0 / 18%);
}
/* /Pages/Projected/progressReport.razor.rz.scp.css */

@media print {
  @page {
    size: portrait;
    max-width: none !important;
  }
}

.flexColumn[b-0fjb0tr48h] {
  width: 100%;
  display: flex;
  flex-direction: column;
  /*flex-wrap:nowrap;*/
  justify-content: center;
  align-content: space-between;
  align-items: center;
}

.flexRow[b-0fjb0tr48h] {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.underLine[b-0fjb0tr48h] {
  border-bottom: solid 4px darkgrey;
}

.fontFamily[b-0fjb0tr48h] {
  font-family: 'Comic Neue', cursive;
}

.largeFont[b-0fjb0tr48h] {
  font-size: 7em;
  color: blue
}

.extraLargeFont[b-0fjb0tr48h] {
  font-size: 8em;
  color: red;
}

.mediumFont[b-0fjb0tr48h] {
  font-size: 3.5em;
  color: green
}

/*@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
*/
/* /Pages/Projected/projectedMain.razor.rz.scp.css */
tr[b-d3h536f0xd] {
    width: 100%;
}

/* Hairline between intake rows within one client group; borders sit on the <tr>
   (not <td>) so they span the full width without gaps at the MarkupString-injected
   analysis cells, which don't carry the CSS-isolation scope attribute (P5). */
.client-group .intake-row:not(:last-child)[b-d3h536f0xd] {
    border-bottom: 1px solid var(--border-subtle);
}

/* Divider between client groups — a top border on each <tbody> after the first
   caps one client's rows before the next begins. Clean horizontal rhythm instead
   of the old dense per-cell grid (P5). 3px + --hd-group-divider (was a 1px
   hairline): at 1px the page read as one flat ledger and Jeff lost the by-client
   grouping at a glance (2026-07-10) — the boundary has to be unmissable while
   scanning. Stays on the <tr> (not <td>) per the isolation note above. */
.client-group + .client-group tr:first-child[b-d3h536f0xd] {
    border-top: 3px solid var(--hd-group-divider);
}

table[b-d3h536f0xd] {
    width: 100%;
    border-collapse: collapse;
}

.harvest-client-table[b-d3h536f0xd] {
    --harvest-col-header-h: 30px;
}

/* ── Page lock-shell row (was the docked Receive Fruit pane, B8) ─────────────
   .hd-dock-row holds the 95vh viewport-lock anchor (moved up from
   .harvest-dashboard below, which now just fills it at height:100%).
   ⚠ The docked-pane variant this was built for was REMOVED 2026-08-02
   (weight-tag surface unification, plan M3): ReceiveFruitPanel now renders as
   a self-hosted 85% SlidingPanel overlay, a sibling of this row, exactly like
   every other host. So .hd-dock-panel, the PaneSplitter/--rf-dock-w plumbing
   and the .hd-lab-collapsed column auto-hide (whose only purpose was to
   reclaim table width NEXT TO the docked pane) are all gone with it. The row
   + main wrappers stay because the viewport lock below depends on them. */
.hd-dock-row[b-d3h536f0xd] {
    height: 95vh;
    display: flex;
    overflow: hidden;
}

.hd-dock-main[b-d3h536f0xd] {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    /* Phones fall back to natural page flow, matching .harvest-dashboard's own
       mobile override below. Same DOM, no JS/C# viewport branching. */
    .hd-dock-row[b-d3h536f0xd] {
        display: block;
        height: auto;
        overflow: visible;
    }
}

/* ── Viewport-lock shell (B7) ────────────────────────────────────────────────
   Matches the app's established Pattern 1 "Viewport-Lock Stack" (see
   docs/LAYOUT-PATTERNS.md; canonical twin: Pages/Harvest/WeightTags.razor.css).
   .harvest-dashboard now fills .hd-dock-main at height:100% (the 95vh anchor
   lives on .hd-dock-row above it — height:100% here is NOT a no-op like it
   would be against MainLayout directly, since .hd-dock-main is an explicit-
   height flex child). .hd-header (toolbar+summary) never scrolls; .hd-scroll-area
   is the ONLY scrolling region — this replaces the old page-scroll + JS-measured
   --harvest-summary-h sticky-offset hack, which broke whenever the summary's
   height changed out from under it. The column sub-header now just sticks to
   top:0 of ITS OWN scroll container — no JS needed. */

.hd-header[b-d3h536f0xd] {
    flex-shrink: 0;
}

.hd-scroll-area[b-d3h536f0xd] {
    flex: 1 1 auto;
    min-height: 0; /* required for overflow to work inside a flex child */
    overflow-y: auto;
}

/* ── The table's horizontal scroller ──────────────────────────────────────
   `.harvest-list` wraps the client table and, until 2026-08-09, had ZERO css rules
   anywhere in the repo — an unstyled passthrough sitting exactly where a
   .table-responsive belongs.

   The table's <colgroup> widths sum to 1255px and `table-layout` is auto, so those
   are MINIMUMS, not caps. At a 1366px viewport the content area is only ~1040px
   (1366 − 250 nav drawer − 56 article padding − 16 shell padding), so the table
   overflowed by ~215px — and with nothing containing it, the DOCUMENT scrolled.
   That is the worst outcome available: it drags the whole page sideways, severing
   the tab strip, the "+ Add" button and the Clients Crushing panel, none of which
   are wide — they were just along for the ride.

   Scrolling the table inside its own box keeps every control reachable and matches
   how the rest of the app handles wide tables. Measured with
   `ui-smoke density-sweep --viewport=1366x768`; ⛔ do not "fix" this by shrinking
   the colgroup — those widths are load-bearing for readability at 1920. */
.harvest-list[b-d3h536f0xd] {
    min-width: 0;
    overflow-x: auto;
}

/* Single column sub-header (P1): the header is printed ONCE for the whole client
   list (was re-emitted above every client group). Sticky to top:0 of
   .hd-scroll-area — its own nearest scrolling ancestor. The bottom rule is a
   box-shadow, not a border, so it survives the sticky + border-collapse quirk.
   Explicit height (B7 compaction) doubles as the offset the sticky client card
   (below) parks itself under, via --harvest-col-header-h. */
.harvest-col-header th[b-d3h536f0xd] {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 3;
    height: var(--harvest-col-header-h, 30px);
    box-sizing: border-box;
    background-color: var(--surface-default);
    box-shadow: inset 0 -1px 0 var(--border-strong);
    padding: var(--space-2xs) var(--hd-cell-pad-x);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    vertical-align: middle;
}

td[b-d3h536f0xd] {
    padding: var(--hd-cell-pad-y) var(--hd-cell-pad-x);
}

p[b-d3h536f0xd] {
    margin: 0;
}

/* Toolbar styles (title/controls/search/add-button) moved to
   Components/ProjectedMainToolbar.razor.css (harvest-af Round 2) — that markup now lives in
   the extracted ProjectedMainToolbar component, and CSS isolation scopes to the file a rule's
   element is declared in, not where it ends up rendering. */

/* Summary panel (.harvest-summary/.summary-*) styles moved to
   Components/ProjectedMainSummary.razor.css (harvest-af Round 2) — that markup now lives in
   the extracted ProjectedMainSummary component, and CSS isolation scopes to the file a rule's
   element is declared in, not where it ends up rendering. */

/* Real client card (P3, B7): the business name as a heading + a per-color
   (White/Red/Rose…) received-vs-projected breakdown, on the --surface-subtle
   card. Sits at the top of its rowspanned cell, aligned to the client's first
   intake row. Compact — a single-color client (the common case) is one row,
   not two, so density improves alongside the breakdown.

   Sticky lives HERE, not on the rowspanned <td> (.clientSummaryCard): a sticky
   element can only travel/release within its OWN containing block, so making
   the full-height <td> itself sticky gives it zero room to travel — it just
   pins forever once stuck (confirmed live: card top never changed even
   scrolled 700px past the group's end). Making this shorter inner div sticky
   instead lets it slide within the tall <td>'s reserved box and correctly
   release once the group's rowspan scrolls past. */
/* Modernized-bold (2026-07-10, plan Q2): the subtle --surface-subtle gray card that
   shipped with B7 had no presence — Jeff asked for the old #f83d23 card's energy
   back ("restore its former glory"). Colors come only from the --hd-* section
   tokens (tokens.css), which carry the light/dark split; nothing hex-coded here. */
.client-card[b-d3h536f0xd] {
    background: var(--hd-card-bg);
    color: var(--hd-card-fg);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding: var(--space-2xs) var(--space-sm);
    border: 1px solid var(--hd-card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--hd-card-shadow);
    position: -webkit-sticky;
    position: sticky;
    top: var(--harvest-col-header-h, 30px);
    z-index: 2;
}

/* While its ⋯ menu is open, lift the whole card above the click-outside backdrop. The card is a
   z-index:2 sticky stacking context, so the menu's own z-index is otherwise trapped BELOW the
   fixed, higher-tier .action-menu-backdrop and the backdrop swallows the click (the row menu
   dodges this only because its cell isn't its own low-z-index context). Transient — open only. */
/* var(--z-dropdown) (1001) loses to MainLayout's fixed page header
   (--z-page-header-fixed, 1030 — it visually overlaps the top of .content since
   .content has margin-top:0) when this card is near the top of the page. Clear
   that tier explicitly instead of the general dropdown tier. */
.client-card.menu-open[b-d3h536f0xd] {
    z-index: calc(var(--z-page-header-fixed) + 10);
}

/* Card header row: business name (left) + the client-tier action menu (right). The card's own
   flex gap spaces this from the color breakdown below, so the name carries no bottom margin. */
.client-card-head[b-d3h536f0xd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2xs);
}

.client-card-name[b-d3h536f0xd] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    line-height: var(--line-height-tight);
    color: var(--hd-card-fg);
    min-width: 0;
    word-break: break-word;
}

/* Client-tier action home (plan Stage 2, principle #4 "an action home at each tier"). Mirrors the
   per-row ⋯ overflow model, but the trigger sits ON the bold sticky card so whole-client actions
   (Add booking / Delete all) live at the client tier. The trigger reads on --hd-card-bg via the
   card foreground token; the dropdown itself drops onto a neutral --surface so its items stay
   legible regardless of the card's bold color. */
.client-menu-wrap[b-d3h536f0xd] {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
}

.client-menu-btn[b-d3h536f0xd] {
    height: 22px;
    min-width: 22px;
    padding: 0 var(--space-2xs);
    background: transparent;
    color: var(--hd-card-fg);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    line-height: 1;
    cursor: pointer;
}

/* Bold card → a translucent white wash is the legible hover, consistent with the color-dot's
   white ring above (both intentionally not tokenized — they key off the card's own bold fill). */
.client-menu-btn:hover[b-d3h536f0xd],
.client-menu-btn[aria-expanded="true"][b-d3h536f0xd] {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Drops down-left from the ⋯ (right:0) so it never overflows the card's right edge; z-index beats
   the backdrop (which beats everything else) — same layering as the row action menu. */
.client-menu[b-d3h536f0xd] {
    position: absolute;
    top: calc(100% + 2px);
    right: 0;
    z-index: calc(var(--z-page-header-fixed) + 10);
    min-width: 168px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--space-2xs);
    background: var(--surface-default);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--dropdown-menu-shadow);
}

.client-menu-item[b-d3h536f0xd] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-2xs) var(--space-sm);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.client-menu-item:hover[b-d3h536f0xd] {
    background: var(--surface-muted);
}

.client-menu-danger[b-d3h536f0xd] {
    color: var(--red-700);
}

.client-menu-danger:hover[b-d3h536f0xd] {
    background: var(--state-danger-bg);
    color: var(--red-700);
}

/* Per-color breakdown (B7): grouped from this client's actual intakes for the
   selected vintage — a color only appears when the client has one, so Rose
   shows up automatically the moment any of their varietals are tagged Rose,
   with zero extra markup/state to gate it. */
.client-card-colors[b-d3h536f0xd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.client-color-row[b-d3h536f0xd] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    font-size: var(--font-size-xs);
}

.color-dot[b-d3h536f0xd] {
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    flex: 0 0 auto;
    align-self: center;
    /* White ring so the red dot doesn't vanish against the bold --hd-card-bg. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75);
}

.color-dot-red[b-d3h536f0xd]   { background: var(--red-500); }
.color-dot-white[b-d3h536f0xd] { background: var(--amber-300); }
.color-dot-rose[b-d3h536f0xd]  { background: var(--pink-500); }
.color-dot-other[b-d3h536f0xd] { background: var(--text-muted); }

.client-color-name[b-d3h536f0xd] {
    color: var(--hd-card-fg-muted);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.client-color-value[b-d3h536f0xd] {
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* On the bold card the old green/gray complete-vs-short split has no contrast —
   differentiate by weight instead: complete = full white, short = softened. */
.client-color-complete[b-d3h536f0xd] { color: var(--hd-card-fg); }
.client-color-short[b-d3h536f0xd]    { color: var(--hd-card-fg-muted); }

/* .uva-cell + varietal-btn/lab-btn styles moved to
   Components/ProjectedMainClientRow.razor.css (harvest-af Round 2, sub-step 2c) — that markup
   now lives in the extracted ProjectedMainClientRow component. */

.buttonPaddingClass[b-d3h536f0xd] {
    padding: 1px
}

/* Numeric columns (Booked / Received) — right-aligned with tabular figures so
   magnitudes line up column-wise instead of drifting when centered (P6). The
   right padding matches the global `td` rule so the header sits over the data. */
.num-col[b-d3h536f0xd] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    padding-right: var(--hd-cell-pad-x);
}

/* Tabular figures for the tonnage numbers in the client card so digits stay aligned.
   (.harvest-summary's twin rule moved to Components/ProjectedMainSummary.razor.css
   alongside the rest of the summary panel — harvest-af Round 2.) */
.client-card[b-d3h536f0xd] {
    font-variant-numeric: tabular-nums;
}

/* The Clients-Crushing completion <progress> bars moved to
   Components/ProjectedMainSummary.razor.css with the rest of the summary panel
   (harvest-af Round 2) — CSS isolation scopes the bare `progress`/#completeWhite/-Red
   selectors to the file the <progress> elements are declared in. */

/* The bare `button{}` base rule + the action-model (.actions-inner/
   .action-overflow/.action-more/.action-menu/.action-menu-item/.action-menu-danger) and
   status-badge styles moved to Components/ProjectedMainClientRow.razor.css (harvest-af Round 2,
   sub-step 2c) — no <button> elements remain declared directly in this file any more (toolbar
   buttons moved in 2a, the summary-client-item button in 2b, the row buttons here in 2c), so the
   bare `button{}` rule is genuinely dead here now rather than just relocated. */

/* Invisible full-viewport catcher: any click outside an open menu closes it. */
.action-menu-backdrop[b-d3h536f0xd] {
    position: fixed;
    inset: 0;
    z-index: var(--z-dropdown-backdrop);
    background: transparent;
}

/* Sticky client panel (B7): the rowspanned <td> spans exactly this client's row
   group, so position:sticky on it (not a wrapper) keeps the card visible while
   scrolling through a big client's rows — it pins at top: var(--harvest-col-header-h)
   (right under the sticky column header) until the group's rowspan box scrolls
   past, then releases naturally to the next client's card. z-index sits below
   the column header (3) so the header still wins when both are in view. */
.clientSummaryCard[b-d3h536f0xd] {
    vertical-align: top;
    max-width: 250px;
    padding-left: 3px;
    padding-right: 5px;
}

.glowingRow[b-d3h536f0xd] {
  /* Past projection cutoff — amber "attention", not red (red is reserved for the Progress
     "not complete" badge). Softer than the old full-strength red glow. */
  box-shadow: inset 0 0 12px rgba(var(--amber-500-rgb), 0.30);
}

/* The Progress-column status-badge styles and the .row-complete/.row-incomplete .uva-cell left
   stripe moved to Components/ProjectedMainClientRow.razor.css (harvest-af Round 2, sub-step 2c).
   The stripe selector changed shape there — from this descendant form (which read the parent
   <tr>'s class to style a now-child-scoped .uva-cell, impossible across a CSS-isolation boundary)
   to a compound selector computed independently in the child from the same Received-vs-Projected
   comparison. See that file for detail. */

/* ── Mobile — Stage 4 phone stacked-card layout ──────────────────────────────
   Placed LAST in the file — media queries have no inherent specificity edge over
   base rules of equal specificity, so an earlier position would lose regardless of
   which query is active (confirmed live during the B7 fix).

   Design change vs. B7: the desktop viewport-lock (95vh shell + inner .hd-scroll-area
   scroller) fought the phone platform. B7 kept the lock and escaped its stacked-sidebar
   top-offset with a position:fixed shim — a workaround for a lock the phone never needed.
   Stage 4 drops the lock entirely: the dashboard becomes an ordinary in-flow block, the
   PAGE scrolls natively (what a phone expects), and the 12-column table collapses into
   stacked cards so nothing scrolls horizontally. No fixed shim, no offset to re-derive,
   no login-bar bleed-through to occlude. --bottom-nav-clearance moves to padding so the
   last card clears the bottom nav. */
@media (max-width: 767.98px) {
    .harvest-dashboard[b-d3h536f0xd] {
        display: block;
        height: auto;
        overflow: visible;
        padding-bottom: var(--bottom-nav-clearance);
    }

    /* No inner scroll region on phone — the page is the scroller. */
    .hd-scroll-area[b-d3h536f0xd] {
        overflow: visible;
        min-height: 0;
    }

    /* The sticky column header is redundant once every cell self-labels (data-label). */
    .harvest-col-header[b-d3h536f0xd] {
        display: none;
    }

    /* Table + client groups go block so their rows can become cards; fixed col widths
       (the <colgroup>) no longer apply. */
    .harvest-client-table[b-d3h536f0xd],
    .harvest-client-table tbody.client-group[b-d3h536f0xd] {
        display: block;
        width: 100%;
    }
    .harvest-client-table colgroup[b-d3h536f0xd] {
        display: none;
    }

    /* Each intake row → a stacked card on a 4-column grid. Grid (not flex-wrap) so each cell
       lands on a deterministic line regardless of its content width — the child css assigns
       each cell a column span + `order`, and grid auto-flow fills row by row: title+progress,
       Booked+Received, the four analysis stats, then Block / Note / Actions full-width. */
    .intake-row[b-d3h536f0xd] {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        align-items: start;
        gap: var(--space-2xs) var(--space-sm);
        padding: var(--space-sm);
        margin: 0 0 var(--space-sm);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-md);
        background: var(--surface-default);
    }

    /* The rowspanned client cell only exists on a group's first row; span it full-width at the
       top of that card as the bordeaux group header. Sticky is dropped on phone — its containing
       block is just this one card, so it could never travel the group's rows the way the desktop
       rowspan does; as a static header it reads cleaner than a stub that unpins after one card. */
    .clientSummaryCard[b-d3h536f0xd] {
        order: -1;
        grid-column: 1 / -1;
        max-width: none;
        padding: 0;
        margin-bottom: var(--space-2xs);
    }
    .client-card[b-d3h536f0xd] {
        position: static;
        top: auto;
    }

    /* A bordeaux header already caps each client, so trade the 3px inter-group divider for
       vertical breathing room above each new group's first card. */
    .client-group + .client-group tr:first-child[b-d3h536f0xd] {
        border-top: none;
        margin-top: var(--space-lg);
    }

    /* Intra-group rows are now separately-bordered cards; recolor the base hairline to match
       the card border so the non-last cards' bottom edge doesn't read as a different line. */
    .client-group .intake-row:not(:last-child)[b-d3h536f0xd] {
        border-bottom: 1px solid var(--border-default);
    }

    /* The summary panel's own mobile tightening (it alone consumed 553px of an
       844px phone screen) lives in Components/ProjectedMainSummary.razor.css's own
       mobile media query — CSS isolation scopes it there. */
}
/* /Pages/Projected/ProjectionBookingsPanel.razor.rz.scp.css */
/* "Bookings for this projection" panel — read-only. Lists linked Status="Scheduled" rows AND the
   projection's received-fruit receipts (weigh-tag #, tons, tank, note) with document download links.
   Shares the lead/actions visual language of DeleteClientBookingsPanel.razor.css; the receipt rows
   are the read-only counterpart to ReceiveFruitPanel's intake table (look, don't touch). */
.pb-panel[b-jik4dul6bf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.pb-lead[b-jik4dul6bf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.pb-lead-title[b-jik4dul6bf] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.pb-lead-meta[b-jik4dul6bf] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.pb-lead-meta > span[b-jik4dul6bf]::before {
    content: "·";
    margin-right: var(--space-sm);
    color: var(--border-default);
}

.pb-lead-meta > span:first-child[b-jik4dul6bf]::before {
    content: none;
    margin-right: 0;
}

.pb-section[b-jik4dul6bf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.pb-section-head[b-jik4dul6bf] {
    margin: 0;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.pb-empty[b-jik4dul6bf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.pb-list[b-jik4dul6bf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-item[b-jik4dul6bf] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.pb-date[b-jik4dul6bf] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.pb-tons[b-jik4dul6bf] {
    flex: 0 0 auto;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.pb-status[b-jik4dul6bf] {
    flex: 0 0 auto;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

/* ── Received-fruit receipts (read-only) ─────────────────────────────────────── */
.pb-receipts[b-jik4dul6bf] {
    gap: var(--space-sm);
}

.pb-receipt[b-jik4dul6bf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.pb-receipt-line[b-jik4dul6bf] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.pb-receipt-line .pb-date[b-jik4dul6bf] {
    flex: 0 0 auto;
}

.pb-tag[b-jik4dul6bf] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-variant-numeric: tabular-nums;
}

.pb-tank[b-jik4dul6bf] {
    flex: 0 0 auto;
    padding: 0 var(--space-xs);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

.pb-receipt-note[b-jik4dul6bf] {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-style: italic;
}

.pb-downloads[b-jik4dul6bf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
}

.pb-dl[b-jik4dul6bf] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    max-width: 100%;
    color: var(--link-color, var(--accent-primary));
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.pb-dl:hover[b-jik4dul6bf] {
    text-decoration: underline;
}

.pb-dl-name[b-jik4dul6bf] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pb-downloads-empty[b-jik4dul6bf] {
    color: var(--text-tertiary, var(--text-secondary));
    font-size: var(--font-size-xs);
}

.pb-actions[b-jik4dul6bf] {
    display: flex;
    justify-content: flex-end;
}
/* /Pages/Projected/ProjectionCompletePanel.razor.rz.scp.css */
/* /Pages/Projected/ReceiveFruitPanel.razor.rz.scp.css */
.container-fluid[b-0kdhqgi1nx] {
    max-height: 450px;
    overflow: auto;
}

/* Inline summary strip — replaces the old stacked .vintage/.mediumFont block
   (Vintage / business / varietal / description / booking / projection / total
   all on one wrapping line instead of one line each, so the panel opens with
   header + form + table visible without scrolling). */
.rf-summary[b-0kdhqgi1nx] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: var(--space-lg);
    row-gap: var(--space-2xs);
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
    font-size: var(--font-size-base);
}

.rf-summary-vintage[b-0kdhqgi1nx] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

.rf-summary-item[b-0kdhqgi1nx] {
    color: var(--text-secondary);
}

.rf-summary-desc[b-0kdhqgi1nx] {
    font-style: italic;
}

.rf-summary-muted[b-0kdhqgi1nx] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.rf-summary-total[b-0kdhqgi1nx] {
    margin-left: auto;
    font-weight: var(--font-weight-bold);
}

.vintage2[b-0kdhqgi1nx] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

.column[b-0kdhqgi1nx] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    gap: var(--space-3xs);
}

.rf-row-tools[b-0kdhqgi1nx] {
    flex-direction: row;
}

/* ONE footer for the whole panel — replaces the old .rf-row-actions (Save/Cancel, stranded inside
   the EditForm above ~45 OCR review fields) and .rf-close-actions (Close, below the receipts table).
   See the markup comment in ReceiveFruitPanel.razor. Sticky so Save is reachable at any scroll
   position — that scroll-to-the-bottom hunt is the reported friction, not a cosmetic nicety.
   ⚠ z-index must beat .rf-entry-fields (below, z-index: var(--z-base)) or the footer slides UNDER
   the raised fields row; hence the calc rather than a bare 1. It must also beat the sticky
   .nwc-scan-split-doc pane (z-index:0, pinned in site.css). Re-check both if --z-base changes. */
.rf-footer-actions[b-0kdhqgi1nx] {
    position: sticky;
    bottom: 0;
    z-index: calc(var(--z-base, 1) + 1);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    /* Opaque: content scrolls UNDER this bar, so a transparent background would let receipt rows
       bleed through it. --surface-default carries a dark-mode override (tokens.css:1855). */
    background: var(--surface-default);
    border-top: 1px solid var(--border-subtle);
}

/* Close is the escape hatch, not a peer of Save — push it away from the primary pair. */
.rf-footer-actions .rf-footer-close[b-0kdhqgi1nx] {
    margin-left: auto;
}

/* Density dial for both intake tables (the inline add/edit row + the
   received-fruit list) — reuses the harvest-domain --hd-cell-pad-* rhythm
   so multiple intake lines fit without forcing the panel to scroll. */
.rf-intake-table th[b-0kdhqgi1nx],
.rf-intake-table td[b-0kdhqgi1nx] {
    padding: var(--hd-cell-pad-y) var(--hd-cell-pad-x);
    font-size: var(--font-size-md);
    vertical-align: middle;
}

.rf-intake-table .form-control[b-0kdhqgi1nx] {
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--font-size-md);
}

/* Add/edit intake row — a responsive flex-wrap mini-form instead of a rigid
   table row (was a 7-column <table> that forced a horizontal scrollbar and
   squeezed every input to near-nothing at the docked panel's narrower
   widths). Fields wrap onto additional lines as the panel narrows instead of
   forcing scroll — this is the actual fix, not just a wider default width. */
.rf-entry-form[b-0kdhqgi1nx] {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.rf-entry-fields[b-0kdhqgi1nx] {
    /* THIS is the element that must be raised, not .rf-entry-form. The sticky
       .nwc-scan-split-doc pane lives inside .rf-scan-split (razor L81), which is a SIBLING of
       .rf-entry-fields (L23) and a DESCENDANT of .rf-entry-form (L21). Positioning the form
       therefore creates a stacking context that CONTAINS the offending pane and lifts it too —
       inert. Raising the fields row itself gives the Date input and Scan button a positioned
       layer above the pane's z-index:0 (pinned in site.css).
       ⚠ DEPENDS ON --z-base BEING >= 1 (tokens.css:242, currently 1). Set it to 0 and this ties
       the pane's z-index:0, loses on DOM order, and silently un-fixes the bug with no visible
       CSS error. The `, 1` fallback only covers the token being DELETED, not re-valued — so if
       you ever change --z-base, re-check this rule and QuickReceiveScanPanel's .qrs-scan-control. */
    position: relative;
    z-index: var(--z-base, 1);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
}

.rf-entry-field[b-0kdhqgi1nx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    flex: 1 1 140px;
    /* min-width:0 lets a flex item shrink below its content width; the 110px floor is the
       intended *visual* minimum and is re-applied via flex-basis, not min-width, so a wide
       child (the scan control) can never force the row wider than the panel. */
    min-width: 0;
}

.rf-entry-field-sm[b-0kdhqgi1nx] {
    flex: 0 1 90px;
    min-width: 80px;
}

.rf-entry-field-grow[b-0kdhqgi1nx] {
    flex: 2 1 160px;
}

/* Wider than the other short inputs because it carries the tag-reading line underneath. The
   tank is the one field on this row a human must decide, so it gets room to say so. */
.rf-entry-field-tank[b-0kdhqgi1nx] {
    flex: 0 1 190px;
    min-width: 140px;
}

/* What the weight tag SAYS, verbatim. Deliberately quiet and deliberately inert: it is evidence
   to check against the paper, not a control. Nothing here fills the picker. */
.rf-tank-tag-read[b-0kdhqgi1nx] {
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--text-muted);
}

/* The operator picked a tank and the tag names a different one. Worth a look, never a block. */
.rf-tank-tag-read-differs[b-0kdhqgi1nx] {
    color: var(--warning-text, #8a6d3b);
    font-weight: 600;
}

.rf-entry-field-checkbox[b-0kdhqgi1nx] {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
}

/* The inline Save/Update — bottom-aligned so the button sits on the input baseline, not
   floating at label height. Phones aren't listed in the 100%-width media rule on purpose:
   full-width it reads as a section divider, not the row's action. */
/* .rf-entry-field-save removed 2026-08-31 with the duplicate inline Save button it styled — the
   sticky footer is the one Save now. Scoped CSS for a class no element carries is invisible dead
   weight that still counts against the css-duplicate-audit floor. */

.rf-entry-label[b-0kdhqgi1nx] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
}

/* Per-row "Add photo" — secondary attach path on an already-saved receipt.
   The input is hidden by the global .nwc-file-input-hidden utility (site.css); a scoped
   rule cannot reach a child component's output. position:relative anchors it here. */
.rf-row-attach[b-0kdhqgi1nx] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    position: relative;
    padding: var(--space-2xs) var(--space-xs);
    border: 1px dashed var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
    /* Comfortable thumb target for crew on a phone. */
    min-height: 2.25rem;
}

.rf-row-attach:hover[b-0kdhqgi1nx],
.rf-row-attach:focus-within[b-0kdhqgi1nx] {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

/* ── Narrow viewports (crew on phones — prod bugs #10/#11) ──────────────────
   The entry row is a wrap-flex of ~6 fields and the receipt list is a desktop
   <table>; at ~330px both overflow horizontally. Stack the fields full-width and
   let the table scroll inside its own container rather than the page. */
@media (max-width: 576px) {
    .rf-entry-field[b-0kdhqgi1nx],
    .rf-entry-field-sm[b-0kdhqgi1nx],
    .rf-entry-field-grow[b-0kdhqgi1nx],
    .rf-entry-field-tank[b-0kdhqgi1nx] {
        flex: 1 1 100%;
    }

    .rf-entry-fields[b-0kdhqgi1nx] {
        gap: var(--space-sm);
    }

    /* Thumb-sized actions. ⚠ Deliberately NOT stacked full-width the way the old .rf-row-actions
       was: this bar is position:sticky now, and three stacked 2.75rem buttons would pin ~9rem of
       permanent chrome over a phone-sized viewport. They share one row and grow to fill it instead. */
    .rf-footer-actions[b-0kdhqgi1nx] {
        gap: var(--space-2xs);
        padding: var(--space-xs) var(--space-sm);
    }

    .rf-footer-actions .btn[b-0kdhqgi1nx] {
        flex: 1 1 auto;
        min-height: 2.75rem;
    }

    /* Reclaim the row: with three flex-grown buttons there is no slack to push Close away with. */
    .rf-footer-actions .rf-footer-close[b-0kdhqgi1nx] {
        margin-left: 0;
    }

    .rf-intake-table[b-0kdhqgi1nx] {
        font-size: var(--font-size-sm);
    }
}

/* Pattern 1: Viewport-Lock Stack (docs/LAYOUT-PATTERNS.md) — pinned header +
   one scrolling region. Per that doc, this pattern is intentionally NOT
   globalized (every known instance hand-rolls it per-file), so a fresh
   per-component instance here is consistent with current practice, not drift.
   .rf-body only takes on the scrolling-flex-child role when docked
   (nested inside .rf-embedded) — in SlidingPanel mode it stays a plain div
   and SlidingPanel's own .sliding-panel-body keeps handling the scroll,
   so the non-embedded path is visually unchanged. */

/* Query container for the scan-review split below. The panel is hosted at wildly
   different widths (85% SlidingPanel overlay, or an embedded host's pane), so the
   split must respond to the PANEL's rendered width, not the viewport's — a viewport
   media query kept the two-column split engaged inside a ~500px pane on a wide
   monitor, and collapsed it on a narrow-viewport full-width overlay. */
.rf-body[b-0kdhqgi1nx] {
    container-type: inline-size;
    container-name: rf-panel;
}

.rf-embedded .rf-body[b-0kdhqgi1nx] {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    padding: var(--space-md);
}

/* ── Side-by-side scan review ─────────────────────────────────────────────
   Fields left, scanned document right (sticky) so a correction is made while
   looking at the source. Collapses to a single column with the document on
   top (reduced height) when the PANEL (container `rf-panel`, declared on
   .rf-body above) is under 900px wide — a narrow surface corrects by scrolling,
   not split-screen. Container query, not a media query: see the note on
   .rf-body. */
.rf-scan-split[b-0kdhqgi1nx] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(300px, 4fr);
    gap: var(--space-md);
    align-items: start;
    margin-top: var(--space-sm);
}

.rf-scan-split-fields[b-0kdhqgi1nx] {
    min-width: 0;
}

/* The sticky document pane itself is .nwc-scan-split-doc in site.css — shared with
   QuickReceiveScanPanel, including the ≤900px collapse-and-hoist. Only panel-specific bits below. */

.rf-scan-doc-head[b-0kdhqgi1nx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xs);
}

.rf-scan-doc-title[b-0kdhqgi1nx] {
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.rf-scan-doc-frame[b-0kdhqgi1nx] {
    width: 100%;
    height: clamp(420px, 68vh, 860px);
    border: 1px solid var(--bs-gray-300);
    border-radius: var(--radius-md, 6px);
    background: var(--bs-gray-100);
}

@container rf-panel (max-width: 900px) {
    .rf-scan-split[b-0kdhqgi1nx] {
        grid-template-columns: 1fr;
    }

    .rf-scan-doc-frame[b-0kdhqgi1nx] {
        height: 320px;
    }
}

/* ── Weighing containment: one weighed load, more than one buyer ──────────────────────────────
   ⛔ Takes a FULL ROW under the entry fields on purpose, and collapses to a single link when
   unused. It fires roughly six times a season, so on every other receipt this is one quiet line
   that costs nothing to read past (Jeff, 2026-09-10: "adds zero friction day to day"). ⛔ Do not
   promote it into .rf-entry-fields as a seventh field — that spends horizontal budget every day
   to serve an exception. */
.rf-carve[b-0kdhqgi1nx] {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    font-size: var(--font-size-sm);
}

/* Both dropdowns stack — label above, control below — like every other field on this panel, so the
   exception path reads as one column of questions answered top to bottom. On an ordinary receipt
   the mode control has no label above it (see the razor), which is what keeps it to one quiet
   line: measured at 1536 CSS px it costs 8px of panel height over the link it replaced, against
   28px for the same control with a label. */
.rf-carve-mode[b-0kdhqgi1nx],
.rf-carve-pick[b-0kdhqgi1nx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    min-width: 0;
}

/* One width for both: stacked dropdowns of different lengths read as two unrelated controls
   rather than one sequence. 420px holds the longest line without clipping. */
.rf-carve-mode select[b-0kdhqgi1nx],
.rf-carve-pick select[b-0kdhqgi1nx] {
    width: 420px;
    max-width: 100%;
    min-width: 0;
}

.rf-carve-set[b-0kdhqgi1nx],
.rf-carve-parent[b-0kdhqgi1nx] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-left: 3px solid var(--accent-primary);
    background: var(--surface-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

/* ⭐ Solid = the database has it, outline = picked but not saved. Same vocabulary as
   WeightTagTankAllocator's row-state marks — Jeff singled that feedback out, so it stays
   consistent rather than inventing a second dialect for the same idea. */
.rf-carve-mark[b-0kdhqgi1nx] {
    color: rgb(25, 135, 84);
    flex: none;
}

.rf-carve-clear[b-0kdhqgi1nx] {
    padding: 0;
    margin-left: auto;
    flex: none;
    color: var(--text-muted);
}

.rf-carve-hint[b-0kdhqgi1nx] {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    padding-left: var(--space-2xs);
}

/* ⭐ Warning, never error. The receipt IS saved by the time this shows — see the razor — so it must
   not read as the red "your save failed" the rest of the app uses. Same left-bar shape as
   .rf-carve-set above so it reads as another line about the carve, not as a page-level alarm. */
.rf-carve-refused[b-0kdhqgi1nx] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-2xs);
    border-left: 3px solid rgb(255, 193, 7);
    background: var(--surface-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.rf-carve-refused > i[b-0kdhqgi1nx] {
    color: rgb(255, 193, 7);
    flex: none;
}
/* /Pages/PumpOver/HarvestView/AddFermentationContractPanel.razor.rz.scp.css */
.afc-vessel-row[b-p63hqualby] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 6px;
}

.afc-vessel-row .form-control[b-p63hqualby],
.afc-vessel-row .form-select[b-p63hqualby] {
    max-width: 200px;
}

.afc-vessel-row .afc-tons[b-p63hqualby] {
    max-width: 120px;
}

/* The live R19 running total under the vessel rows in split mode. */
.afc-reconcile[b-p63hqualby] {
    margin: 6px 0;
    font-size: 0.9rem;
}

.afc-reconcile.afc-reconciled[b-p63hqualby] {
    color: var(--bs-success);
}

/* Errors sit left of the action buttons in the sticky footer bar. */
.afc-errors[b-p63hqualby] {
    margin-right: auto;
}
/* /Pages/PumpOver/HarvestView/FermentationContractsMain.razor.rz.scp.css */
/* Auto-gen plan §5.2 (2026-08-11) — the "Drafts" reveal reuses the SAME visual convention as the
   S1 tentative-booking treatment (lt-row--tentative / bc-chip--tentative in the Booking pages):
   dashed warning-token outline for "this row is provisional", never a new visual language. Blazor
   CSS isolation scopes classes per component, so the rules are re-declared here under this
   component's own prefix rather than literally shared — the CONVENTION is what's reused. */

tr.fcm-row--draft[b-yaen79mbzf] {
  outline: 2px dashed var(--state-warning-fg);
  outline-offset: -2px;
}

tr.fcm-row--draft > td[b-yaen79mbzf] {
  opacity: 0.85;
}

.fcm-drafts-pill[b-yaen79mbzf] {
  margin-right: var(--space-2xs, 0.25rem);
}

/* Row-inline complete confirm. Deliberately not a modal: completing is one field on one row, and
   a panel for it would be ceremony. It still gets a confirm step, because this is the gesture that
   removes a tank from the cellar crew's printed sheet. */
.fcm-confirm[b-yaen79mbzf] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs, 0.25rem);
  white-space: nowrap;
}

.fcm-confirm-q[b-yaen79mbzf] {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.fcm-write-error[b-yaen79mbzf] {
  margin: var(--space-2xs, 0.25rem) 0;
}

.fcm-badge--auto[b-yaen79mbzf] {
  display: inline-block;
  border: 2px dashed var(--state-warning-fg);
  border-radius: var(--radius-xs);
  color: var(--state-warning-fg);
  background: transparent;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  padding: 0.1rem 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: var(--space-3xs);
  vertical-align: middle;
}

/* Confirmed Innovint match — the positive counterpart to the amber "no Innovint match" warning.
   Deliberately QUIET: solid (not dashed) so it doesn't read as tentative like --auto/est., and
   low-contrast green so a fully-reconciled grid is calm rather than a wall of badges. The row that
   needs a human is the one that should shout, and amber already does that. */
.fcm-badge--linked[b-yaen79mbzf] {
  display: inline-block;
  border: 1px solid var(--state-success-fg);
  border-radius: var(--radius-xs);
  color: var(--state-success-fg);
  background: var(--state-success-bg);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  padding: 0.1rem 0.4rem;
  letter-spacing: 0.3px;
  margin-left: var(--space-3xs);
  vertical-align: middle;
}

/* Row action menu. Replaces the side-by-side button rack that wrapped onto extra lines in this
   narrow cell — the row-height inflation that pushed the last row under the clipped scroll pane.
   Positioned by hand rather than by Bootstrap's dropdown JS: this app ships no bootstrap bundle,
   so a data-bs-toggle menu would render dead. Same approach as HarvestPrintMenu's compact mode. */
.fcm-actions[b-yaen79mbzf] {
  white-space: nowrap;
}

.fcm-menu[b-yaen79mbzf] {
  position: relative;
  display: inline-flex;
}

.fcm-menu-backdrop[b-yaen79mbzf] {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: var(--z-dropdown-backdrop);
}

/* ⚠ The menu is absolutely positioned inside .pohv-table-container, which is the page's scroll
   pane. A down-menu on one of the last rows would be clipped by that container — the same class of
   unreachable-action bug this page was just fixed for. The row index picks the direction, so the
   menu opens upward near the bottom and no JS measurement is needed. */
.fcm-menu .dropdown-menu.show[b-yaen79mbzf] {
  position: absolute;
  right: 0;
  min-width: 16rem;
  z-index: var(--z-dropdown);
}

.fcm-menu-list--down[b-yaen79mbzf] {
  top: 100%;
}

.fcm-menu-list--up[b-yaen79mbzf] {
  bottom: 100%;
}

/* The BW# under the client code. Secondary weight because it does NOT identify the client on its
   own — on 2026 prod data HEL/ORW/SCH/TUR all share BW# 9 and HWI/NWE/NWG all share BW# 6157
   (alternating proprietors under the host winery's bond). The code above it is the identifier;
   this groups.
   nowrap is load-bearing, not cosmetic: without it "BW# 6157" re-wraps to two lines in this narrow
   column and the stacked layout costs more height than the business name it replaced. */
.fcm-client-bw[b-yaen79mbzf] {
  font-size: 0.8em;
  opacity: 0.65;
  white-space: nowrap;
}
/* /Pages/PumpOver/HarvestView/MoveFermentationContractPanel.razor.rz.scp.css */
.mfc-summary[b-dcvs0y6cqs] {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

/* The two discriminators, promoted out of the prose line: with one lot in two tanks, the contract
   ID and the tank are the ONLY things that differ between the rows you could have opened. */
.mfc-identity[b-dcvs0y6cqs] {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    margin-bottom: var(--space-2xs);
}

.mfc-identity__id[b-dcvs0y6cqs] {
    font-variant-numeric: tabular-nums;
    color: var(--nwc-text-muted);
}

.mfc-identity__tank[b-dcvs0y6cqs] {
    font-size: 1.25rem;
    font-weight: 600;
}

/* ⚠ Warning-toned but NOT an error: moving one of a lot's tanks and not the other is routine. It
   exists to be read before the click, not to stop it. */
.mfc-siblings[b-dcvs0y6cqs] {
    margin-bottom: var(--space-sm);
    padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--state-warning-fg);
    background: var(--state-warning-bg);
}

/* Errors sit left of the action buttons. */
.mfc-errors[b-dcvs0y6cqs] {
    margin-right: auto;
}
/* /Pages/PumpOver/PumpOverContractPanel.razor.rz.scp.css */
.table-container[b-mwpx1bkk5m] {
  max-height: 750px; /* Adjust based on your needs */
  overflow-y: auto; /* Enable scrolling for the table body */
  width: 100%; /* Full width for the table */
}

.table thead th[b-mwpx1bkk5m] {
  position: sticky; /* Stick the thead at the top */
  top: 0; /* Stick it to the top of the table container */
  background-color: deepskyblue; /* Ensure the header doesn't blend with rows scrolling under it */
  z-index: var(--z-base); /* Ensure the header stays on top of other content */
}
th[b-mwpx1bkk5m], td[b-mwpx1bkk5m] {
  padding: 3px;
  text-align: left;
  border: 1px solid var(--nwc-border); /* Add borders to the table */
}

.flicker[b-mwpx1bkk5m] {
  animation: flicker-b-mwpx1bkk5m 1s infinite ease-in-out; /* Adjust the '1s' for the speed */
}

@keyframes flicker-b-mwpx1bkk5m {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}


.highlight-row[b-mwpx1bkk5m] {
  background-color: var(--pumpover-highlight-row-bg) !important; /* Light yellow background */
}
/* CSS */
.comment-line[b-mwpx1bkk5m] {
  margin-bottom: 2px; /* Adds spacing between comment lines */
}

  .comment-line span[b-mwpx1bkk5m] {
    font-weight: var(--font-weight-bold); /* Makes the labels bold */
  }
/* /Pages/PumpOver/PumpOversMain.razor.rz.scp.css */
/* ── Deleted 2026-08-26: three rules the .pohv-* design system already supersedes ─────────
   The markup now carries `pohv-table` / `pohv-table-container`, so site.css owns the grid's
   look — slate-700 micro-caps headers instead of `deepskyblue`, halved asymmetric padding
   instead of `padding: 3px` all round, and a true hairline instead of --nwc-border.

   ⛔ These had to be DELETED, not just out-classed. Scoped rules are rewritten with a
   `[b-<hash>]` attribute selector, so `.table thead th` here scored (0,3,2) against
   site.css's `.pohv-table thead th` at (0,1,2) — the local copy beat the design system no
   matter what classes the markup added. Adding `pohv-table` alone changed nothing on screen.

   `.table-container` was already dead: the markup comment above the grid records that those
   wrappers were removed and `.pohv-table-container` took over the same base values.

   What stays below is genuinely local: the two SCADA icon animations, the highlight-row tint
   and the comment-line spacing. ────────────────────────────────────────────────────────── */

.icon-spin[b-7u0cn1gd5m] {
  animation: icon-spin-b-7u0cn1gd5m 2s linear infinite;
}

@keyframes icon-spin-b-7u0cn1gd5m {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.flicker[b-7u0cn1gd5m] {
  animation: flicker-b-7u0cn1gd5m 1s infinite ease-in-out; /* Adjust the '1s' for the speed */
}

@keyframes flicker-b-7u0cn1gd5m {
  0% {
    transform: rotateY(0deg);
  }

  50% {
    transform: rotateY(180deg);
  }

  100% {
    transform: rotateY(0deg);
  }
}


.highlight-row[b-7u0cn1gd5m] {
  background-color: var(--pumpover-highlight-row-bg) !important; /* Light yellow background */
}
/* CSS */
.comment-line[b-7u0cn1gd5m] {
  margin-bottom: 2px; /* Adds spacing between comment lines */
}

  .comment-line span[b-7u0cn1gd5m] {
    font-weight: var(--font-weight-bold); /* Makes the labels bold */
  }
/* /Pages/PumpOver/Shared/LabFermentChart.razor.rz.scp.css */
/*
    Lab Brix + sample-temperature plots in the tank drawer.

    ⛔ Sits ABOVE TankTempGraph in the drawer, not below it. At Jeff's real 1536x695 viewport the
    temperature plot plus its legend is most of the panel, so anything under it starts off screen —
    the same reason the heater action and the vitals block are above it. Answering the question
    below the fold is not answering it.
*/

.lfc[b-2vr4epzfy3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

.lfc-head[b-2vr4epzfy3] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-sm);
}

.lfc-title[b-2vr4epzfy3] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
}

/* The whole ferment in one line, for anyone who does not want to read a chart. */
.lfc-summary[b-2vr4epzfy3] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary, var(--text-muted));
    font-variant-numeric: tabular-nums;
}

/*  ⚠ Provenance, deliberately visible. These readings are entered in InnoVint and arrive on a
    sweep, so the newest can be hours old. A number with no stated origin is how the stale
    PODisplay Brix quietly misled people for years. */
.lfc-src[b-2vr4epzfy3] {
    margin-left: auto;
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    font-style: italic;
}

.lfc-plot-wrap[b-2vr4epzfy3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lfc-plot-lbl[b-2vr4epzfy3] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
}

/*  Grid: a narrow value-label column, the plot, and a date row beneath the plot only.
    ⛔ Axis labels are HTML, never SVG <text> — Razor reserves <text> as its escape tag, so an
    SVG <text class="..."> is a hard RZ1023 compile error. This layout is that constraint turned
    into an advantage: the labels are selectable, theme-aware, and never scale with the plot. */
.lfc-plot[b-2vr4epzfy3] {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    grid-template-rows: auto auto;
    column-gap: var(--space-2xs, 4px);
}

.lfc-yaxis[b-2vr4epzfy3] {
    position: relative;
    grid-column: 1;
    grid-row: 1;
}

.lfc-y-max[b-2vr4epzfy3] { position: absolute; top: 0; right: 0; }
.lfc-y-min[b-2vr4epzfy3] { position: absolute; bottom: 0; right: 0; }

/*  Positioned by the same fraction that places the line, so the label and the dashed rule can
    never disagree about where zero is. */
.lfc-y-zero[b-2vr4epzfy3] {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    font-weight: var(--font-weight-semibold);
}

.lfc-plot-area[b-2vr4epzfy3] {
    position: relative;
    grid-column: 2;
    grid-row: 1;
}

.lfc-xaxis[b-2vr4epzfy3] {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: space-between;
    padding-top: 2px;
}

.lfc-svg[b-2vr4epzfy3] {
    width: 100%;
    height: 110px;
    display: block;
    overflow: visible;
}

/*  Absolutely placed in percent to match the stretched plot. A dot is a real hover target with a
    value + timestamp tooltip, which is what makes an irregular lab cadence readable. */
.lfc-dot[b-2vr4epzfy3] {
    position: absolute;
    width: 5px;
    height: 5px;
    margin: -2.5px 0 0 -2.5px;
    border-radius: 50%;
    background: currentColor;
    pointer-events: auto;
}

/*  Teal for Brix — the same hue the portal's analysis chart uses, so the same measurement wears
    the same colour in both apps and nobody has to re-learn it. */
.lfc-brix[b-2vr4epzfy3] {
    color: var(--color-teal-600, #0d9488);
}

/*  ⛔ A DIFFERENT hue from Brix, and from the SCADA temperature line in the graph below. Three
    temperature-ish lines in one drawer wearing one colour is how a reader concludes two
    instruments disagree when they are simply measuring different things. */
.lfc-temp[b-2vr4epzfy3] {
    color: var(--amber-600);
}

.lfc-grid[b-2vr4epzfy3] {
    stroke: var(--border-subtle);
    stroke-width: 1;
}

/*  The dryness boundary. Dashed so it reads as a REFERENCE rather than as a third data series,
    and only drawn when the data actually crosses it. */
.lfc-zero[b-2vr4epzfy3] {
    stroke: var(--text-muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    opacity: 0.7;
}

/*  ⛔ `color`, not `fill` — these are HTML spans, not SVG <text> (see the .lfc-plot note). A `fill`
    here silently does nothing and the labels inherit the series colour instead of reading muted. */
.lfc-axis-txt[b-2vr4epzfy3] {
    font-size: 9px;
    line-height: 1;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*  Below the plot threshold the dated numbers say more than a line would — this is that sentence,
    not an apology for a missing chart. */
.lfc-thin[b-2vr4epzfy3] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    padding: var(--space-2xs) 0;
}
/* /Pages/PumpOver/Shared/LabFermentPanel.razor.rz.scp.css */
/*
    Lab Brix + sample temperature, sitting directly under the live SCADA readings in a tank cell.

    ⭐ The visual job of this block is to read as a SECOND, QUIETER fact than the SCADA line above
    it. SCADA is "what the tank is doing right now"; this is "what the lab measured when someone
    last drew a sample". Same cell, different authority — so this line is one step down in size and
    ink, and never competes with .pohv-reading-now for the eye.
*/

.lfp[b-lie36zt6xn] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    align-items: flex-start;
    white-space: nowrap;
    /* Teal, matching the portal's analysis chart, so the same measurement wears the same colour in
       both apps. It is also the one hue not already spoken for in this grid: amber is the
       stale-request exception and red is the heater status. */
    color: var(--color-teal-700, #0f766e);
}

.lfp-nums[b-lie36zt6xn] {
    display: inline-flex;
    gap: var(--space-xs);
    align-items: baseline;
}

/* Micro-caps annotation, same treatment as .pohv-reading-lbl above it — it names the SOURCE of the
   numbers ("this is the lab's, not the tank's"), which is the whole reason the row is legible. */
.lfp-lbl[b-lie36zt6xn] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    color: var(--text-muted);
}

/* Brix is the number people are actually hunting for on this tab, so it carries the weight — but
   at sm, one step below the live SCADA temperature, which is the more urgent fact. */
.lfp-brix[b-lie36zt6xn] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.lfp-temp[b-lie36zt6xn] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/*  The age is load-bearing, not decoration. These readings arrive by sweep-based sync and can be
    hours old; the stale PODisplay Brix misled people for years precisely because a number sat
    there with nothing on screen saying when it was taken. */
.lfp-age[b-lie36zt6xn] {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/*  ⚠ Muted-but-italic rather than a colour alarm. A ferment that has not been sampled in two days
    is worth NOTICING, not worth shouting about — it is often a finished wine nobody is pulling
    samples on any more, which is entirely correct. An amber/red chip here would cry wolf on every
    dry tank and train people to ignore the whole row. */
.lfp-age-stale[b-lie36zt6xn] {
    font-style: italic;
    opacity: 0.75;
}

/*  Sized to sit inside a dense harvest grid row: wide enough to show the shape of a ferment,
    short enough not to push the row height. The curve is the point, not the precision — exact
    values live in the tooltip and the full drawer chart. */
.lfp-spark[b-lie36zt6xn] {
    width: 120px;
    height: 22px;
    display: block;
    overflow: visible;
}

.lfp-spark circle[b-lie36zt6xn] {
    fill: currentColor;
}

/*  On a narrow viewport the grid is already fighting for width, and a 120px sparkline is the
    first thing that can go: the numbers still carry the reading, and the full curve is one click
    away in the drawer. */
@media (max-width: 900px) {
    .lfp-spark[b-lie36zt6xn] {
        display: none;
    }
}
/* /Pages/QrCards/QrCardManager.razor.rz.scp.css */
/* QR Card Manager — LAYOUT-PATTERNS Pattern 1 (Viewport-Lock Stack).
   vh rather than height:100% on purpose: MainLayout's article.content has no explicit
   height in its parent chain, so height:100% resolves to auto and does nothing. */
.qrc-page[b-eglk3bwzha] {
    height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.qrc-header[b-eglk3bwzha] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--gray-200);
}

.qrc-title[b-eglk3bwzha] {
    min-width: 0;
}

.qrc-body[b-eglk3bwzha] {
    flex: 1;
    min-height: 0; /* required for overflow to work inside a flex child */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-top: var(--space-sm);
}

.qrc-loading[b-eglk3bwzha] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--gray-600);
    padding: var(--space-md);
}

/* Monospace + letter-spacing so the printed code and the on-screen code read as the
   same object — the operator is often comparing a card in hand against this row. */
.qrc-code[b-eglk3bwzha] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.08em;
}

.qrc-target[b-eglk3bwzha] {
    display: inline-block;
    max-width: 22rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    color: var(--gray-700);
    vertical-align: bottom;
}

.qrc-lastscan[b-eglk3bwzha] {
    font-size: 0.72rem;
    line-height: 1.2;
}
/* /Pages/QrCards/QrCardPanel.razor.rz.scp.css */
/* Panel body/footer shape comes from the global .sp-content / .sp-body / .sp-footer in
   panel-layout.css (incl. the footer's iOS safe-area padding) — do NOT re-declare it here.
   Only the code-note strip below is bespoke. */

.qcp-code-note[b-l92mcuswrq] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--surface-subtle);
    border-radius: var(--radius-md);
}

.qcp-code[b-l92mcuswrq] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: var(--font-weight-semibold);
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
}
/* /Pages/QrCards/QrCardPrintPanel.razor.rz.scp.css */
/* Panel body/footer shape comes from the global .sp-content / .sp-body / .sp-footer in
   panel-layout.css — do NOT re-declare it here. Only the card preview below is bespoke.

   Mirrors the printed card's stacking order (symbol → code → name) so the preview reads as the
   artifact rather than as a form control. */

.qpp-preview[b-amsh8yc73q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--surface-subtle);
    border-radius: var(--radius-md);
}

.qpp-preview img[b-amsh8yc73q] {
    width: 168px;
    height: 168px;
    image-rendering: pixelated; /* keep module edges crisp when the PNG is scaled */
}

.qpp-preview-code[b-amsh8yc73q] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: var(--font-weight-semibold);
    font-size: 1.15rem;
    letter-spacing: 0.14em;
}

.qpp-preview-name[b-amsh8yc73q] {
    font-size: 0.85rem;
    color: var(--gray-600);
}
/* /Pages/Quoting/RateScheduleReview.razor.rz.scp.css */
/* R7 review screen. Layout comes from ManagerShell + the shared nwc-* utilities; only the four
   shapes below are genuinely local to this screen. */

.r7-scroll[b-fdfkw5r2lt] {
    height: 100%;
    overflow: auto;
}

/* Fee codes are the canonical machine keys — they read as identifiers, so they are set as such. */
.r7-code[b-fdfkw5r2lt] {
    font-family: var(--nwc-font-mono, Consolas, "Courier New", monospace);
    font-size: 0.75rem;
    color: var(--nwc-text-muted);
}

.r7-tree-item[b-fdfkw5r2lt] {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    border-bottom: 1px solid var(--nwc-border);
    background: transparent;
    padding: 0.5rem 0.6rem;
}

.r7-tree-item.is-active[b-fdfkw5r2lt] {
    background: var(--nwc-surface-selected, #eef2ff);
}

.r7-overlay-card[b-fdfkw5r2lt] {
    max-width: 640px;
    margin: 3rem auto;
    background: var(--white);
    border-radius: 0.5rem;
    padding: 1.25rem;
    box-shadow: 0 10px 40px rgb(0 0 0 / 25%);
}
/* /Pages/Reports/TankMismatch/TankMismatchReport.razor.rz.scp.css */
.tr-page[b-hvhlh8i2xm] {
    padding: 18px 22px;
    max-width: 1200px;
}

.tr-header[b-hvhlh8i2xm] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
}

.tr-title h2[b-hvhlh8i2xm] {
    margin: 0;
    font-size: 1.5rem;
    color: var(--tr-accent);
}

.tr-subtitle[b-hvhlh8i2xm] {
    margin: 4px 0 0;
    font-size: 0.85rem;
    color: var(--tr-muted-fg);
    max-width: 640px;
}

.tr-actions[b-hvhlh8i2xm] {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Summary stat boxes */
.tr-summary[b-hvhlh8i2xm] {
    display: flex;
    gap: 12px;
    margin: 14px 0 10px;
}

.tr-stat[b-hvhlh8i2xm] {
    flex: 0 0 150px;
    border: 1px solid var(--tr-border);
    border-radius: 6px;
    padding: 10px 14px;
    background: var(--tr-surface-subtle);
    display: flex;
    flex-direction: column;
}

.tr-stat-value[b-hvhlh8i2xm] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tr-stat-value-fg);
}

.tr-stat.bad[b-hvhlh8i2xm] {
    border-color: var(--tr-bad-border);
    background: var(--tr-bad-bg);
}

.tr-stat.bad .tr-stat-value[b-hvhlh8i2xm] {
    color: var(--tr-bad-fg);
}

.tr-stat-label[b-hvhlh8i2xm] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tr-muted-fg);
    margin-top: 2px;
}

/* Tabs */
.tr-tabs[b-hvhlh8i2xm] {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--tr-divider);
    margin: 12px 0 10px;
}

.tr-tab[b-hvhlh8i2xm] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    padding: 7px 14px;
    font-size: 0.9rem;
    color: var(--tr-muted-fg);
    cursor: pointer;
}

.tr-tab:hover[b-hvhlh8i2xm] {
    color: var(--tr-accent);
}

.tr-tab.active[b-hvhlh8i2xm] {
    color: var(--tr-accent);
    font-weight: 600;
    border-bottom-color: var(--tr-accent);
}

/* Filters */
.tr-filters[b-hvhlh8i2xm] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 6px 0 10px;
}

.tr-check[b-hvhlh8i2xm] {
    font-size: 0.85rem;
    color: var(--tr-check-fg);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    user-select: none;
}

.tr-search[b-hvhlh8i2xm] {
    max-width: 280px;
}

/* Table */
.tr-table[b-hvhlh8i2xm] {
    font-size: 0.875rem;
}

.tr-table thead th[b-hvhlh8i2xm] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tr-muted-fg);
    border-bottom: 1px solid var(--tr-table-border);
}

.tr-table td.num[b-hvhlh8i2xm],
.tr-table th.num[b-hvhlh8i2xm] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.tr-code[b-hvhlh8i2xm] {
    font-weight: 600;
    color: var(--tr-strong-fg);
}

.tr-table tr.tr-mismatch td[b-hvhlh8i2xm] {
    background: var(--tr-bad-bg);
}

.tr-res[b-hvhlh8i2xm] {
    font-size: 0.8rem;
    color: var(--tr-check-fg);
    white-space: nowrap;
}

.tr-muted[b-hvhlh8i2xm] {
    color: var(--tr-muted-light-fg);
}

.tr-empty[b-hvhlh8i2xm] {
    text-align: center;
    color: var(--tr-muted-light-fg);
    padding: 16px;
}

.tr-loading[b-hvhlh8i2xm] {
    padding: 24px;
    color: var(--tr-muted-fg);
}

.tr-rowaction[b-hvhlh8i2xm] {
    text-align: right;
    white-space: nowrap;
}

/* Status badges.

   ⛔ The `::deep` is load-bearing — do NOT reduce these to plain `.tr-badge`.

   Every badge on this page is emitted as a raw HTML string and rendered through
   MarkupString (see TankMismatchReport.razor.cs: StatusBadge, RunStatusBadge,
   HeaterReasonBadges). Blazor's scoped-CSS rewriter only stamps its `b-*`
   attribute onto elements it sees in the .razor markup, and it never sees these
   spans — so a plain `.tr-badge` rule compiles to `.tr-badge[b-hvhlh8i2xm]` and
   matches NOTHING.

   Measured 2026-09-21 in the dev app at https://localhost:7205/lab/manager
   (Tank Temp Mismatch tab, Chromium, innovint_sandbox): all 156 `.tr-badge`
   elements reported backgroundColor rgba(0, 0, 0, 0), padding 0px and
   border-radius 0px. They had been rendering as plain text, not pills, since the
   page shipped — the heater section only made it visible.

   A leading `::deep` compiles the scope onto the ANCESTOR instead
   (`[b-hvhlh8i2xm] .tr-badge`), which the MarkupString spans do sit inside. */
[b-hvhlh8i2xm] .tr-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}

[b-hvhlh8i2xm] .tr-badge.ok {
    background: var(--tr-badge-ok-bg);
    color: var(--tr-badge-ok-fg);
}

[b-hvhlh8i2xm] .tr-badge.bad {
    background: var(--tr-badge-bad-bg);
    color: var(--tr-bad-fg);
}

[b-hvhlh8i2xm] .tr-badge.muted {
    background: var(--tr-badge-muted-bg);
    color: var(--tr-muted-fg);
}

/* Run-history per-recipient drill-down */
.tr-expand-btn[b-hvhlh8i2xm] {
    background: none;
    border: none;
    padding: 0 6px 0 0;
    color: var(--tr-muted-fg);
    cursor: pointer;
    font-size: 0.8rem;
}

.tr-expand-btn:hover[b-hvhlh8i2xm] {
    color: var(--tr-accent);
}

.tr-run-detail > td[b-hvhlh8i2xm] {
    background: var(--tr-surface-subtle);
    padding: 6px 14px 12px 34px;
}

.tr-recip-table[b-hvhlh8i2xm] {
    margin: 0;
    font-size: 0.82rem;
    background: transparent;
}

.tr-recip-table thead th[b-hvhlh8i2xm] {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tr-muted-fg);
    border-bottom: 1px solid var(--tr-border);
}

.tr-recip-email[b-hvhlh8i2xm] {
    font-weight: 600;
    color: var(--tr-strong-fg);
}

.tr-recip-detail[b-hvhlh8i2xm] {
    color: var(--tr-bad-fg);
    font-size: 0.78rem;
}

.tr-recip-loading[b-hvhlh8i2xm],
.tr-recip-empty[b-hvhlh8i2xm] {
    padding: 6px 2px;
    font-size: 0.82rem;
}

/* Resolve panel */
.tr-resolve-overlay[b-hvhlh8i2xm] {
    position: fixed;
    inset: 0;
    background: var(--tr-resolve-overlay-bg);
    z-index: 1055;
}

.tr-resolve-panel[b-hvhlh8i2xm] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 420px;
    max-width: 100vw;
    background: var(--white);
    box-shadow: var(--tr-resolve-panel-shadow);
    z-index: 1056;
    display: flex;
    flex-direction: column;
}

.tr-resolve-head[b-hvhlh8i2xm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--tr-divider);
}

.tr-resolve-body[b-hvhlh8i2xm] {
    padding: 18px 20px;
    overflow-y: auto;
}

.tr-resolve-actions[b-hvhlh8i2xm] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* Heater section — the emailed report's "Open heaters that look finished", on the page.
   The rule under the heading is the same amber/red grammar the email uses: a red row is
   a heater that tripped BOTH rules, an amber badge is one reason, a muted badge is the
   Maintain context that explains why a long-running heater is not an ordinary one. */
.tr-heaters[b-hvhlh8i2xm] {
    margin-top: 26px;
    padding-top: 14px;
    border-top: 2px solid var(--tr-accent);
}

.tr-heaters-title[b-hvhlh8i2xm] {
    margin: 0;
    font-size: 1.05rem;
    color: var(--tr-accent);
}

.tr-heaters-sub[b-hvhlh8i2xm] {
    margin: 4px 0 10px;
    font-size: 0.85rem;
    color: var(--tr-muted-fg);
    max-width: 760px;
}

.tr-heaters-none[b-hvhlh8i2xm] {
    padding: 10px 0;
    font-size: 0.9rem;
    color: var(--tr-badge-ok-fg);
}

[b-hvhlh8i2xm] .tr-badge.warn {
    background: var(--tr-badge-warn-bg);
    color: var(--tr-badge-warn-fg);
}
/* /Pages/SampleRequests/SampleRequestDetailContent.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════ */
/* Content Area (scrollable center)                   */
/* ═══════════════════════════════════════════════════ */

.sample-request-content[b-ol5wi5you8] {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--samplerequest-scrollbar-thumb) transparent;
}

.sample-request-content[b-ol5wi5you8]::-webkit-scrollbar { width: 6px; }
.sample-request-content[b-ol5wi5you8]::-webkit-scrollbar-track { background: transparent; }
.sample-request-content[b-ol5wi5you8]::-webkit-scrollbar-thumb { background: var(--samplerequest-scrollbar-thumb); border-radius: var(--radius-xs); }

/* ═══════════════════════════════════════════════════ */
/* Sticky Toolbar                                     */
/* ═══════════════════════════════════════════════════ */

.sample-toolbar[b-ol5wi5you8] {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem var(--space-md);
    background: var(--white);
    border-bottom: 2px solid var(--samplerequest-divider);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    flex-shrink: 0;
}

.toolbar-left[b-ol5wi5you8],
.toolbar-right[b-ol5wi5you8] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════ */
/* Content Area                                       */
/* ═══════════════════════════════════════════════════ */

.sample-builder-content[b-ol5wi5you8] {
    padding: var(--space-md);
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* ═══════════════════════════════════════════════════ */
/* Section Groups                                     */
/* ═══════════════════════════════════════════════════ */

.section-group[b-ol5wi5you8] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.section-group-label[b-ol5wi5you8] {
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
    color: var(--samplerequest-muted-fg);
    padding: 0 var(--space-2xs) 0.2rem;
    display: flex;
    align-items: center;
}

/* ═══════════════════════════════════════════════════ */
/* Recipients Table                                   */
/* ═══════════════════════════════════════════════════ */

[b-ol5wi5you8] .table th {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--samplerequest-muted-fg);
    border: none;
}

[b-ol5wi5you8] .table td {
    vertical-align: middle;
    padding: var(--space-2xs) 0.35rem;
    border: none;
}

/* ═══════════════════════════════════════════════════ */
/* Print                                              */
/* ═══════════════════════════════════════════════════ */

@media print {
    .no-print[b-ol5wi5you8] { display: none !important; }
}
/* /Pages/Scale/OutsideRecipientPicker.razor.rz.scp.css */
/* Recipient picker for the outside-tag send drawer. Lives inside SendTags' 30rem SlidingPanel, so
   every row is a two-line stack (who / address) with the send stats to the right — nothing wide.
   Palette mirrors SendTags.razor.css (same ok/warn/err pills) so the drawer reads as one surface. */

.orp[b-65urozn5uu] { display: block; }

/* ── Search box — styled to match .st-field input in SendTags, which cannot reach into a child ── */
.orp-search[b-65urozn5uu] {
    width: 100%;
    padding: var(--space-2xs) var(--space-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-size-sm);
}

.orp-search:focus[b-65urozn5uu] { outline: 2px solid var(--blue-500); outline-offset: -1px; }
.orp-search.orp-invalid[b-65urozn5uu] { border-color: #c0392b; }
.orp-search.orp-invalid:focus[b-65urozn5uu] { outline-color: #c0392b; }

/* ── The list. Visible from the moment the drawer opens — that is the whole fix. ── */
.orp-list[b-65urozn5uu],
.orp-biz-list[b-65urozn5uu] {
    list-style: none;
    margin: var(--space-2xs) 0 0;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.orp-list li + li[b-65urozn5uu],
.orp-biz-list li + li[b-65urozn5uu] { border-top: 1px solid var(--gray-200); }

.orp-row[b-65urozn5uu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-2xs) var(--space-sm);
    background: none;
    border: none;
    border-left: 3px solid transparent;
    text-align: left;
    font: inherit;
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.orp-row:hover[b-65urozn5uu],
.orp-row.on[b-65urozn5uu] { background: #eef4fd; }

.orp-row-main[b-65urozn5uu] { display: flex; flex-direction: column; min-width: 0; }
.orp-row-name[b-65urozn5uu] { font-weight: var(--font-weight-medium); }
.orp-row-biz[b-65urozn5uu] { color: var(--text-muted); font-size: var(--font-size-xs); }

.orp-row-mail[b-65urozn5uu] {
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.orp-row-meta[b-65urozn5uu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.orp-row-flag[b-65urozn5uu] { font-style: italic; }

/* A row whose last tag bounced is marked on the row itself, the way the send log marks it — she must
   not be able to re-pick a dead address without seeing why the last one failed. */
.orp-row-warn[b-65urozn5uu] { border-left-color: #c0392b; }

.orp-row-typed .orp-row-name[b-65urozn5uu] { font-weight: var(--font-weight-regular, 400); }

.orp-pill[b-65urozn5uu] {
    display: inline-block;
    padding: 1px var(--space-2xs);
    border-radius: 999px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.orp-pill.err[b-65urozn5uu] { background: #fdecea; color: #8c1d18; }

.orp-empty[b-65urozn5uu] {
    margin: var(--space-2xs) 0 0;
    padding: var(--space-sm);
    border: 1px dashed var(--gray-300);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.orp-foot[b-65urozn5uu] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-top: var(--space-3xs);
}

.orp-hint[b-65urozn5uu] { display: block; margin-top: var(--space-3xs); color: var(--text-muted); font-size: var(--font-size-2xs); }
.orp-opt[b-65urozn5uu] { color: var(--text-muted); font-weight: 400; font-style: italic; }

.orp-link[b-65urozn5uu] {
    background: none;
    border: none;
    padding: 0;
    color: var(--blue-500);
    font: inherit;
    font-size: var(--font-size-xs);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.orp-link:hover[b-65urozn5uu] { color: var(--blue-600); }
.orp-add-open[b-65urozn5uu] { flex: 0 0 auto; margin-left: auto; text-decoration: none; }
.orp-add-open i[b-65urozn5uu] { margin-right: 2px; }

/* ── The picked card. Replaces the search box, so the box never has to show a value. ── */
.orp-card[b-65urozn5uu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    border: 1px solid var(--blue-500);
    border-radius: var(--radius-sm);
    background: #eef4fd;
}

.orp-card-warn[b-65urozn5uu] { border-color: #c0392b; background: #fdecea; }
.orp-card-main[b-65urozn5uu] { display: flex; flex-direction: column; min-width: 0; font-size: var(--font-size-sm); }
.orp-card-name[b-65urozn5uu] { font-weight: var(--font-weight-semibold); }
.orp-card-biz[b-65urozn5uu] { color: var(--text-muted); font-size: var(--font-size-xs); }
.orp-card-mail[b-65urozn5uu] { color: var(--text-muted); font-size: var(--font-size-2xs); word-break: break-all; }
.orp-card-note[b-65urozn5uu] { margin-top: 2px; color: var(--text-muted); font-size: var(--font-size-2xs); }
.orp-card-note .orp-link[b-65urozn5uu] { font-size: inherit; }
.orp-bad[b-65urozn5uu] { color: #8c1d18; }
.orp-change[b-65urozn5uu] { flex: 0 0 auto; align-self: center; }

.orp-notice[b-65urozn5uu] {
    margin: var(--space-2xs) 0 0;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: #e8f5ec;
    color: #1b5e34;
    font-size: var(--font-size-2xs);
}

/* ── Add someone ── */
.orp-add[b-65urozn5uu] {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.orp-add h4[b-65urozn5uu] { margin: 0 0 var(--space-2xs); font-size: var(--font-size-sm); }

.orp-add-field[b-65urozn5uu] { margin-bottom: var(--space-2xs); }

.orp-add-field label[b-65urozn5uu] {
    display: block;
    margin-bottom: var(--space-3xs);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.orp-add-field input[b-65urozn5uu],
.orp-add-field select[b-65urozn5uu] {
    width: 100%;
    padding: var(--space-3xs) var(--space-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    background: var(--surface-default);
    font: inherit;
    font-size: var(--font-size-sm);
}

.orp-add-field input:focus[b-65urozn5uu],
.orp-add-field select:focus[b-65urozn5uu] { outline: 2px solid var(--blue-500); outline-offset: -1px; }

.orp-add-row[b-65urozn5uu] { display: flex; gap: var(--space-sm); }
.orp-add-row .orp-add-field[b-65urozn5uu] { flex: 1 1 0; min-width: 0; }

.orp-biz-list[b-65urozn5uu] { background: var(--surface-default); }

.orp-chip[b-65urozn5uu] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: 2px var(--space-2xs) 2px var(--space-sm);
    border: 1px solid var(--blue-500);
    border-radius: 999px;
    background: #eef4fd;
    font-size: var(--font-size-sm);
}

.orp-chip-new[b-65urozn5uu] {
    padding: 0 var(--space-2xs);
    border-radius: 999px;
    background: #e8f5ec;
    color: #1b5e34;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.orp-chip-x[b-65urozn5uu] {
    background: none;
    border: none;
    padding: 0 2px;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.orp-chip-x:hover[b-65urozn5uu] { color: #c0392b; }

.orp-error[b-65urozn5uu] {
    margin: var(--space-2xs) 0 0;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: #fdecea;
    color: #8c1d18;
    font-size: var(--font-size-xs);
}

.orp-add-actions[b-65urozn5uu] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
}

.orp-ghost[b-65urozn5uu],
.orp-primary[b-65urozn5uu] {
    padding: var(--space-3xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-size-xs);
    cursor: pointer;
}

.orp-ghost[b-65urozn5uu] { background: none; border: 1px solid var(--gray-300); }
.orp-ghost:hover[b-65urozn5uu] { border-color: var(--gray-500, var(--gray-300)); }

.orp-primary[b-65urozn5uu] {
    background: var(--blue-500);
    border: 1px solid var(--blue-500);
    color: #fff;
    font-weight: var(--font-weight-semibold);
}

.orp-primary:hover[b-65urozn5uu] { background: var(--blue-600); border-color: var(--blue-600); }
.orp-primary:disabled[b-65urozn5uu], .orp-ghost:disabled[b-65urozn5uu] { opacity: .6; cursor: default; }

/* ── The card stack: one card per recipient, the first is the To address. ── */
.orp-cards[b-65urozn5uu] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.orp-cards .orp-card[b-65urozn5uu] { margin: 0; }
.orp-card-editing[b-65urozn5uu] { border-style: dashed; }

.orp-card-primary[b-65urozn5uu] {
    display: inline-block;
    margin-left: var(--space-2xs);
    padding: 0 var(--space-2xs);
    border-radius: 999px;
    background: var(--blue-500);
    color: #fff;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    vertical-align: middle;
}

.orp-card-actions[b-65urozn5uu] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    align-self: center;
}

.orp-remove:hover[b-65urozn5uu] { color: #c0392b; }

/* "Add another person" — where the box folds away to once someone is on the send. */
.orp-more[b-65urozn5uu] { margin-top: var(--space-2xs); }
.orp-add-another[b-65urozn5uu] { text-decoration: none; }
.orp-add-another i[b-65urozn5uu] { margin-right: 2px; }
.orp-add-another-close[b-65urozn5uu] { flex: 0 0 auto; text-decoration: none; }

.orp-edit-form h4[b-65urozn5uu] { word-break: break-word; }

/* ── Others at the winery a card names. One click adds a colleague; no address = greyed, with a door. ── */
.orp-others[b-65urozn5uu] { margin-top: var(--space-2xs); }
.orp-others-title[b-65urozn5uu] {
    margin: 0 0 var(--space-3xs);
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: .02em;
    text-transform: uppercase;
}
.orp-others-list[b-65urozn5uu] {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-default);
}
.orp-others-list li + li[b-65urozn5uu] { border-top: 1px solid var(--gray-200); }
.orp-other-none[b-65urozn5uu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    color: var(--text-muted);
}
.orp-other-none .orp-row-main[b-65urozn5uu] { opacity: .75; }
.orp-other-add[b-65urozn5uu] { flex: 0 0 auto; text-decoration: none; white-space: nowrap; }
.orp-address-form h4[b-65urozn5uu] { word-break: break-word; }

/* ── Per-row hide, and the folded sections ──────────────────────────────────────
   The row itself is a <button>, so the hide control cannot live inside it — it is a
   SIBLING and the <li> is the flex row that holds them side by side. */
.orp-li[b-65urozn5uu] {
    display: flex;
    align-items: stretch;
}

.orp-li > .orp-row[b-65urozn5uu] {
    flex: 1 1 auto;
    min-width: 0;
}

.orp-row-hide[b-65urozn5uu],
.orp-row-restore[b-65urozn5uu] {
    flex: 0 0 auto;
    padding: 0 var(--space-sm);
    background: none;
    border: none;
    border-left: 1px solid var(--gray-200);
    color: var(--text-muted);
    font: inherit;
    cursor: pointer;
}

.orp-row-hide[b-65urozn5uu] {
    font-size: var(--font-size-md);
    line-height: 1;
}

.orp-row-restore[b-65urozn5uu] {
    font-size: var(--font-size-2xs);
    white-space: nowrap;
}

.orp-row-hide:hover[b-65urozn5uu],
.orp-row-restore:hover[b-65urozn5uu] {
    background: #fdecea;
    color: #8c1d18;
}

/* Counted in the open even when collapsed: a row that is merely folded is discoverable,
   a row that is silently absent is a winery she cannot find and does not know to look for. */
.orp-folds[b-65urozn5uu] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-2xs);
}

.orp-fold[b-65urozn5uu] {
    padding: 0;
    background: none;
    border: none;
    color: var(--text-muted);
    font: inherit;
    font-size: var(--font-size-2xs);
    text-decoration: underline;
    cursor: pointer;
}

.orp-fold:hover[b-65urozn5uu],
.orp-fold.on[b-65urozn5uu] {
    color: var(--text-secondary);
}
/* /Pages/Scale/SendTags.razor.rz.scp.css */
/* Outside weight tags — list-first surface with a send drawer.
   ⛔ No @page rule in here. This file is scoped, and a scoped @page leaks into every print
   surface in the app (three live surfaces are already carrying that bug). */

.send-tags[b-8zola7r5o8] {
    padding: var(--space-md);
}

/* ── Header ───────────────────────────────────────────────── */
.st-head[b-8zola7r5o8] {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.st-head-text[b-8zola7r5o8] { flex: 1 1 30rem; min-width: 0; }
.st-head h1[b-8zola7r5o8] { margin: 0 0 var(--space-2xs); }

.st-sub[b-8zola7r5o8] {
    margin: 0;
    max-width: 62ch;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.st-capture[b-8zola7r5o8] { flex: 0 1 26rem; min-width: 18rem; }

/* ── Banner ───────────────────────────────────────────────── */
.st-banner[b-8zola7r5o8] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
    font-size: var(--font-size-sm);
}

.st-banner.ok[b-8zola7r5o8] { background: #e8f5ec; color: #1b5e34; }
.st-banner.err[b-8zola7r5o8] { background: #fdecea; color: #8c1d18; }

/* ── Toolbar ──────────────────────────────────────────────── */
.st-toolbar[b-8zola7r5o8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    border-bottom: 1px solid var(--border-default);
    margin-bottom: var(--space-sm);
}

.st-tabs[b-8zola7r5o8] { display: flex; gap: var(--space-2xs); }

.st-tabs button[b-8zola7r5o8] {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.st-tabs button:hover[b-8zola7r5o8] { color: inherit; }

.st-tabs button.on[b-8zola7r5o8] {
    color: var(--blue-500);
    border-bottom-color: var(--blue-500);
    font-weight: var(--font-weight-semibold);
}

.st-tally[b-8zola7r5o8] { color: var(--text-muted); font-size: var(--font-size-xs); }

/* ── Table ────────────────────────────────────────────────── */
.st-table[b-8zola7r5o8] { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }

.st-table th[b-8zola7r5o8] {
    text-align: left;
    padding: var(--space-2xs) var(--space-sm);
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: .03em;
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

.st-table td[b-8zola7r5o8] {
    padding: var(--space-2xs) var(--space-sm);
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
}

.st-table tbody tr:hover[b-8zola7r5o8] { background: var(--surface-subtle); }
.st-table tbody tr.st-row-on[b-8zola7r5o8] { background: #eef4fd; }

.st-col-check[b-8zola7r5o8] { width: 2.5rem; }
.st-col-thumb[b-8zola7r5o8] { width: 5.5rem; }
.st-col-when[b-8zola7r5o8] { width: 10rem; white-space: nowrap; }
.st-col-size[b-8zola7r5o8] { width: 5rem; white-space: nowrap; }
.st-col-sent[b-8zola7r5o8] { width: 17rem; }
.st-col-actions[b-8zola7r5o8] { width: 15rem; text-align: right; white-space: nowrap; }

/* Thumbnail — the context the first version was missing. */
.st-thumb[b-8zola7r5o8] {
    display: block;
    width: 4.5rem;
    height: 3.25rem;
    padding: 0;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: var(--surface-subtle);
    cursor: pointer;
}

.st-thumb img[b-8zola7r5o8] { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-thumb:hover[b-8zola7r5o8] { border-color: var(--blue-500); }

.st-thumb-none[b-8zola7r5o8] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
}

/* The filename is a BUTTON (click to rename), styled to read as plain text -- an affordance she
   only needs when the OCR read is wrong should not shout at her on every other row. */
.st-file[b-8zola7r5o8] {
    display: block;
    font-weight: var(--font-weight-medium);
    word-break: break-all;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-align: left;
    cursor: text;
    width: 100%;
}

.st-file:hover[b-8zola7r5o8],
.st-file:focus-visible[b-8zola7r5o8] {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

.st-file-edit[b-8zola7r5o8] {
    display: block;
    width: 100%;
    font-family: inherit;
    font-size: inherit;
    font-weight: var(--font-weight-medium);
    padding: 2px 4px;
    border: 1px solid var(--border-focus, var(--border-color));
    border-radius: var(--radius-sm);
    background: var(--surface-input, var(--surface-card));
    color: inherit;
}
.st-by[b-8zola7r5o8] { display: block; color: var(--text-muted); font-size: var(--font-size-2xs); }

.st-note[b-8zola7r5o8] {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    font-style: italic;
}

.st-to[b-8zola7r5o8] { display: block; font-weight: var(--font-weight-medium); }
.st-to-mail[b-8zola7r5o8] { display: block; color: var(--text-muted); font-size: var(--font-size-2xs); }

.st-sent-meta[b-8zola7r5o8] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    flex-wrap: wrap;
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
    margin-top: 2px;
}

.st-again[b-8zola7r5o8] { font-style: italic; }

/* One block per send. Stacked, because a re-send must ADD a line rather than replace the
   previous one — this column is the only record of where a tag went. */
.st-send + .st-send[b-8zola7r5o8] { margin-top: var(--space-2xs); }

/* A send that never arrived is called out on the row itself, not just in a tooltip: the
   whole point is that it must be impossible to read a bounced send as a delivered one. */
.st-send-bad[b-8zola7r5o8] {
    border-left: 3px solid #c0392b;
    padding-left: var(--space-2xs);
    margin-left: -3px;
}

.st-send-error[b-8zola7r5o8] {
    display: block;
    color: #8c1d18;
    font-size: var(--font-size-2xs);
    margin-top: 1px;
}

.st-pill[b-8zola7r5o8] {
    display: inline-block;
    padding: 1px var(--space-2xs);
    border-radius: 999px;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

.st-pill.ok[b-8zola7r5o8] { background: #e8f5ec; color: #1b5e34; }
.st-pill.warn[b-8zola7r5o8] { background: #fff4e5; color: #8a5300; }
.st-pill.err[b-8zola7r5o8] { background: #fdecea; color: #8c1d18; }

.st-col-actions button[b-8zola7r5o8] {
    background: none;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-xs);
    padding: 2px var(--space-2xs);
    margin-left: var(--space-3xs);
    cursor: pointer;
    font-size: var(--font-size-2xs);
}

.st-col-actions button:hover[b-8zola7r5o8] { border-color: var(--blue-500); color: var(--blue-500); }
.st-danger:hover[b-8zola7r5o8] { border-color: #c0392b !important; color: #c0392b !important; }

/* The row's own Send — the primary affordance on this page, so it has to read as one next to
   three outline buttons. Compound selector on purpose: `.st-col-actions button` above is more
   specific than a bare class and would win. */
.st-col-actions .st-send-one[b-8zola7r5o8] {
    background: var(--blue-500);
    border-color: var(--blue-500);
    color: #fff;
    font-weight: var(--font-weight-semibold);
    padding: 2px var(--space-sm);
}

.st-col-actions .st-send-one:hover[b-8zola7r5o8] {
    background: var(--blue-600);
    border-color: var(--blue-600);
    color: #fff;
}

.st-muted[b-8zola7r5o8] { color: var(--text-muted); }
.st-pad[b-8zola7r5o8] { padding: var(--space-md); }

.st-empty[b-8zola7r5o8] { padding: var(--space-lg); text-align: center; }
.st-empty-head[b-8zola7r5o8] { margin: 0 0 var(--space-2xs); font-weight: var(--font-weight-semibold); }

/* ── Batch selection bar ──────────────────────────────────── */
/* ⛔ Deliberately IN FLOW, above the table. The first version was `position: fixed` at the
   bottom-centre of the viewport with a hand-picked z-index — a floating bar that appears far
   from the checkbox you just ticked. There is no z-index here now, and there should not be:
   nothing overlaps it. */
.st-selbar[b-8zola7r5o8] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    margin-bottom: var(--space-sm);
    border: 1px solid var(--blue-500);
    border-radius: var(--radius-sm);
    background: #eef4fd;
    font-size: var(--font-size-sm);
}

.st-selbar-count[b-8zola7r5o8] { flex: 1 1 auto; font-weight: var(--font-weight-medium); }

.st-primary[b-8zola7r5o8] {
    background: var(--blue-500);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-2xs) var(--space-md);
    cursor: pointer;
    font-weight: var(--font-weight-semibold);
}

.st-primary:disabled[b-8zola7r5o8] { opacity: .5; cursor: not-allowed; }

.st-ghost[b-8zola7r5o8] {
    background: none;
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    padding: var(--space-2xs) var(--space-sm);
    color: inherit;
    cursor: pointer;
}

/* ── Drawer ───────────────────────────────────── */
/* Chrome (overlay, slide, z-index, escape, scroll-lock) belongs to SlidingPanel — only the
   BODY layout is ours. ⛔ Do not re-declare z-index here: SlidingPanel applies it inline from
   its ZIndex parameter, and a second declaration reads as authoritative while being dead. */
.st-drawer-title[b-8zola7r5o8] { margin: 0; font-size: var(--font-size-md); }

/* Flows at the end of the panel body rather than being pinned: the drawer's content is short
   and SlidingPanel owns the scroll container, so a fixed footer would fight it. */
.st-drawer-foot[b-8zola7r5o8] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    margin-top: var(--space-lg);
    border-top: 1px solid var(--border-default);
}

.st-drawer-body[b-8zola7r5o8] { padding: var(--space-md); }
.st-drawer-body section + section[b-8zola7r5o8] { margin-top: var(--space-lg); }

.st-drawer-body h3[b-8zola7r5o8] {
    margin: 0 0 var(--space-sm);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--text-muted);
}

/* Preview strip — what she is about to send. */
.st-strip[b-8zola7r5o8] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs); }

.st-strip li[b-8zola7r5o8] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-3xs);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
}

.st-strip-thumb[b-8zola7r5o8] {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-xs);
    overflow: hidden;
    background: var(--surface-subtle);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
}

.st-strip-thumb img[b-8zola7r5o8] { width: 100%; height: 100%; object-fit: cover; display: block; }
.st-strip-name[b-8zola7r5o8] { flex: 1 1 auto; min-width: 0; font-size: var(--font-size-xs); word-break: break-all; }

.st-strip-x[b-8zola7r5o8],
.st-x[b-8zola7r5o8] {
    flex: 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 var(--space-2xs);
}

.st-strip-x:hover[b-8zola7r5o8], .st-x:hover[b-8zola7r5o8] { color: #c0392b; }

/* ── Fields ───────────────────────────────────────────────── */
.st-field[b-8zola7r5o8] { margin-bottom: var(--space-md); }

.st-field label[b-8zola7r5o8] {
    display: block;
    margin-bottom: var(--space-3xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

.st-opt[b-8zola7r5o8] { color: var(--text-muted); font-weight: 400; font-style: italic; }

.st-field input[b-8zola7r5o8],
.st-field textarea[b-8zola7r5o8] {
    width: 100%;
    padding: var(--space-2xs) var(--space-sm);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--font-size-sm);
}

.st-field input:focus[b-8zola7r5o8],
.st-field textarea:focus[b-8zola7r5o8] { outline: 2px solid var(--blue-500); outline-offset: -1px; }

.st-field input.st-invalid[b-8zola7r5o8] { border-color: #c0392b; }
.st-field input.st-invalid:focus[b-8zola7r5o8] { outline-color: #c0392b; }

/* Sits immediately above the footer, so the reason and the button she just pressed are one
   glance apart. A message anywhere else is a message she has to go looking for. */
.st-error[b-8zola7r5o8] {
    margin: var(--space-md) 0 0;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: #fdecea;
    color: #8c1d18;
    font-size: var(--font-size-sm);
}

.st-hint[b-8zola7r5o8] { display: block; margin-top: var(--space-3xs); color: var(--text-muted); font-size: var(--font-size-2xs); }
.st-from[b-8zola7r5o8] { margin-top: var(--space-md); line-height: 1.5; }

/* ── Preview lightbox ─────────────────────────────────────── */
.st-lightbox[b-8zola7r5o8] {
    position: fixed;
    inset: 5vh 6vw;
    z-index: var(--z-lightbox);
    display: flex;
    flex-direction: column;
    background: var(--surface-default);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .4);
    overflow: hidden;
}

.st-lightbox-bar[b-8zola7r5o8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--space-md);
    border-bottom: 1px solid var(--border-default);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.st-lightbox iframe[b-8zola7r5o8] { flex: 1 1 auto; width: 100%; border: none; background: var(--surface-subtle); }

/* Advisory only — a soft, non-blocking note under the address field. Deliberately NOT the
   red error style: this is "check this", not "you did something wrong", and DNS can be
   mistaken about a domain she knows is real. */
.st-domain-warn[b-8zola7r5o8] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    background: #fff4e5;
    color: #8a5300;
    font-size: var(--font-size-2xs);
}

.st-domain-warn i[b-8zola7r5o8] { margin-top: 1px; }
/* /Pages/Settings/LookupItemPanel.razor.rz.scp.css */
.lookup-form[b-bu6f794723] {
    padding: 1.25rem;
}

.form-section[b-bu6f794723] {
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--gray-200);
}

.form-section:last-of-type[b-bu6f794723] {
    border-bottom: none;
}

.form-label.required[b-bu6f794723]::after {
    content: " *";
    color: var(--red-500);
}

.form-actions[b-bu6f794723] {
    position: sticky;
    bottom: 0;
    background: var(--white);
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--gray-300);
    margin-top: var(--space-lg);
}
/* /Pages/Settings/LookupSettingsPanel.razor.rz.scp.css */
.lookup-settings-list[b-qwc29emt2o] {
    padding: var(--space-md);
}

.table-selector-dropdown[b-qwc29emt2o] {
    margin-bottom: var(--space-md);
}

.list-header[b-qwc29emt2o] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.lookup-settings-edit[b-qwc29emt2o] {
    padding: var(--space-lg);
}

.form-label.required[b-qwc29emt2o]::after {
    content: " *";
    color: var(--red-500);
}
/* /Pages/Settings/LookupTablesPage.razor.rz.scp.css */
.lookup-layout[b-3shaanmklk] {
    display: flex;
    gap: var(--space-xl);
    min-height: 400px;
}

/* Left sidebar */
.table-selector[b-3shaanmklk] {
    width: 220px;
    flex-shrink: 0;
    border-right: 1px solid var(--gray-200);
    padding-right: var(--space-lg);
}

.selector-group[b-3shaanmklk] {
    margin-bottom: var(--space-lg);
}

.selector-group-label[b-3shaanmklk] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--gray-600);
    padding: var(--space-2xs) var(--space-sm);
    margin-bottom: var(--space-2xs);
}

.selector-item[b-3shaanmklk] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-md);
    color: var(--gray-700);
    font-size: 0.875rem;
    cursor: pointer;
    transition: background-color 0.15s;
}

.selector-item:hover[b-3shaanmklk] {
    background-color: var(--nwc-bg-muted);
}

.selector-item.active[b-3shaanmklk] {
    background-color: var(--blue-500);
    color: var(--white);
}

/* Right content */
.table-content[b-3shaanmklk] {
    flex: 1;
    min-width: 0;
}

/* flex-wrap is load-bearing, not cosmetic: the trailing slot holds either a short "Add New"
   button or the longer "Managed in code — edit only" lock hint, after an h5 carrying an
   arbitrary table name ("Case Sticker Orientations"). Without wrapping, a no-wrap flex row
   overflows its container on a narrow viewport instead of reflowing. */
.table-content-header[b-3shaanmklk] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.table-content-header h5[b-3shaanmklk] {
    margin: 0;
    min-width: 0;
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
    .lookup-layout[b-3shaanmklk] {
        flex-direction: column;
    }

    .table-selector[b-3shaanmklk] {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
        padding-right: 0;
        padding-bottom: var(--space-lg);
    }
}
/* /Pages/Shared/Components/BlendProjectAutocomplete.razor.rz.scp.css */
.blend-autocomplete[b-owcl5fq8jg] {
    position: relative;
    width: 100%;
}

.input-clear[b-owcl5fq8jg] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.8rem;
    color: var(--bs-secondary);
    cursor: pointer;
    z-index: var(--z-base);
}

.input-clear:hover[b-owcl5fq8jg] {
    color: var(--bs-danger);
}

[b-owcl5fq8jg] .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: var(--z-slot-badge);
    max-height: 260px;
    overflow-y: auto;
    margin-top: 2px;
    padding: 4px 0;
    font-size: 0.82rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-sm);
    background: var(--bs-body-bg);
    box-shadow: var(--shared-autocomplete-dropdown-shadow);
}

[b-owcl5fq8jg] .dropdown-item {
    display: flex;
    flex-direction: column;
    padding: 6px 10px;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    gap: 1px;
}

[b-owcl5fq8jg] .dropdown-item:hover,
[b-owcl5fq8jg] .dropdown-item.active {
    background-color: var(--app-shell-blue-bright);
    color: var(--white);
}

[b-owcl5fq8jg] .dropdown-item.disabled {
    cursor: default;
    font-size: 0.78rem;
}

[b-owcl5fq8jg] .dropdown-item.disabled:hover {
    background-color: transparent;
    color: var(--bs-secondary);
}

/* ─── Blend Row ─── */
.blend-status-dot[b-owcl5fq8jg] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--shared-autocomplete-muted-dot);
}

.blend-status-dot.draft[b-owcl5fq8jg] { background: var(--shared-autocomplete-status-draft); }
.blend-status-dot.saved[b-owcl5fq8jg] { background: var(--shared-autocomplete-status-saved); }

.blend-name[b-owcl5fq8jg] {
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blend-meta[b-owcl5fq8jg] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--font-size-xs);
    opacity: 0.75;
    padding-left: 12px;
}

[b-owcl5fq8jg] .dropdown-item.active .blend-meta {
    opacity: 0.9;
}

.blend-badge[b-owcl5fq8jg] {
    font-size: 0.62rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.blend-badge.draft[b-owcl5fq8jg] { color: var(--shared-autocomplete-badge-draft-fg); }
.blend-badge.saved[b-owcl5fq8jg] { color: var(--shared-autocomplete-badge-saved-fg); }

[b-owcl5fq8jg] .dropdown-item.active .blend-badge {
    color: inherit;
}
/* /Pages/Shared/Components/ContactLookupAutocomplete.razor.rz.scp.css */
.contact-lookup-autocomplete[b-ro599p9xnu] {
    position: relative;
    width: 100%;
}

.input-wrapper[b-ro599p9xnu] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-ro599p9xnu] {
    position: absolute;
    left: var(--space-md, 14px);
    color: var(--gray-500);
    font-size: var(--font-size-md, 0.95rem);
    pointer-events: none;
}

.contact-lookup-autocomplete input.form-control[b-ro599p9xnu] {
    padding-left: calc(var(--space-md, 14px) * 2 + 8px);
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: var(--radius-lg, 10px);
    border: 1px solid var(--gray-300);
    font-size: var(--font-size-md, 0.95rem);
}

.contact-lookup-autocomplete input.form-control:focus[b-ro599p9xnu] {
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
    border-color: var(--gray-400);
}

.input-spinner[b-ro599p9xnu] {
    position: absolute;
    right: var(--space-md, 14px);
    pointer-events: none;
}

.dropdown-menu[b-ro599p9xnu] {
    width: 100%;
    max-height: 420px;
    overflow-y: auto;
    margin-top: 6px;
    padding: 6px;
    border-radius: var(--radius-lg, 10px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.dropdown-header[b-ro599p9xnu] {
    font-size: var(--font-size-xs, 0.72rem);
    font-weight: var(--font-weight-semibold, 600);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-500);
    padding: 8px 10px 4px;
}

.lookup-row[b-ro599p9xnu] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    white-space: normal;
}

.lookup-row.active[b-ro599p9xnu],
.lookup-row:hover[b-ro599p9xnu] {
    background: var(--gray-100);
}

.lookup-row-icon[b-ro599p9xnu] {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--gray-100);
    color: var(--gray-600);
    font-size: 0.85rem;
}

.lookup-row-body[b-ro599p9xnu] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.lookup-row-title[b-ro599p9xnu] {
    font-weight: var(--font-weight-semibold, 600);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lookup-row-subtitle[b-ro599p9xnu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lookup-row-phone[b-ro599p9xnu] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--gray-100);
    color: #0a58ca;
    text-decoration: none;
    font-size: var(--font-size-sm, 0.85rem);
    white-space: nowrap;
}

.lookup-row-phone:hover[b-ro599p9xnu] {
    background: rgba(66, 133, 244, 0.15);
    color: #0a58ca;
}

/* Mobile: full-width dropdown, larger touch targets */
@media (max-width: 767px) {
    .lookup-row[b-ro599p9xnu] {
        padding: 10px;
    }

    .lookup-row-phone[b-ro599p9xnu] {
        padding: 6px 10px;
    }
}
/* /Pages/Shared/Components/ContactsBusinessPicker.razor.rz.scp.css */
.contactsbusiness-picker[b-etjs02114d] {
    position: relative;
}

.input-icon.valid[b-etjs02114d] {
    color: var(--bs-success);
}

.dropdown-menu[b-etjs02114d] {
    position: absolute;
    width: 100%;
    max-height: 300px;
    overflow-y: auto;
    z-index: var(--z-slot-badge);
    box-shadow: var(--shared-autocomplete-dropdown-shadow);
}

/* .cb-picker-name / .cb-picker-detail live in site.css (hoisted 2026-07-21): ItemTemplate rows
   are authored in the caller's .razor and carry the caller's isolation scope, so scoped rules
   here can't style them. */

.nwc-autocomplete-item.create-new[b-etjs02114d] {
    flex-direction: row;
    gap: var(--space-sm);
    border-top: 1px solid var(--bs-border-color);
    margin-top: 4px;
}

.nwc-autocomplete-item.create-new:hover[b-etjs02114d],
.nwc-autocomplete-item.create-new.active[b-etjs02114d] {
    background-color: var(--bs-primary);
    color: var(--white);
}
/* /Pages/Shared/Components/DbaAutocomplete.razor.rz.scp.css */
.dba-autocomplete[b-j7utoa0ulz] {
    position: relative;
    width: 100%;
}

.input-icon.valid[b-j7utoa0ulz] {
    color: var(--bs-success);
}

.nwc-autocomplete-menu[b-j7utoa0ulz] {
    max-height: 250px;
}

.nwc-autocomplete-item.create-new[b-j7utoa0ulz] {
    flex-direction: row;
    gap: var(--space-sm);
    border-top: 1px solid var(--bs-border-color);
    margin-top: 4px;
    padding-top: 8px;
    color: var(--bs-primary);
    font-weight: var(--font-weight-medium);
}

.nwc-autocomplete-item.create-new:hover[b-j7utoa0ulz],
.nwc-autocomplete-item.create-new.active[b-j7utoa0ulz] {
    background-color: var(--bs-primary);
    color: var(--white);
}

.dba-name[b-j7utoa0ulz] {
    font-weight: var(--font-weight-medium);
}

.dba-owner[b-j7utoa0ulz] {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}
/* /Pages/Shared/Components/DynamicSectionRenderer.razor.rz.scp.css */
.workspace-section[b-3tgvylt2tv] {
    margin-bottom: var(--space-lg);
}

.workspace-section-header[b-3tgvylt2tv] {
    display: flex;
    align-items: center;
    padding: var(--space-2xs) var(--space-3xs);
    user-select: none;
    color: var(--bs-secondary-color, var(--gray-600));
}

.workspace-section-header.is-collapsible[b-3tgvylt2tv] {
    cursor: pointer;
}

.workspace-section-header:hover[b-3tgvylt2tv] {
    color: var(--bs-body-color, var(--gray-900));
}

.section-expand-icon[b-3tgvylt2tv] {
    flex-shrink: 0;
    margin-right: 0.35rem;
}

.workspace-section-title[b-3tgvylt2tv] {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.workspace-section-body[b-3tgvylt2tv] {
    /* Section components own their own card chrome; renderer adds none. */
}

.nwc-section-unpin[b-3tgvylt2tv] {
    margin-left: auto;
    flex-shrink: 0;
    background: none;
    border: none;
    padding: var(--space-2xs);
    line-height: 1;
    cursor: pointer;
    color: var(--bs-secondary-color, var(--gray-600));
    opacity: 0;
    transition: opacity 0.15s ease;
}

.nwc-section-wrapper:hover .nwc-section-unpin[b-3tgvylt2tv] {
    opacity: 1;
}

.nwc-section-unpin:hover[b-3tgvylt2tv] {
    color: var(--bs-danger, var(--red-500));
}

/* Right-aligned cluster holding the deliverable affordance (Preview / Download PDF) and the
   unpin (✕). The cluster owns the right-push; the unpin no longer needs its own margin-left:auto. */
.nwc-section-header-actions[b-3tgvylt2tv] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-left: auto;
    flex-shrink: 0;
}

.nwc-section-header-actions .nwc-section-unpin[b-3tgvylt2tv] {
    margin-left: 0;
}

@media (max-width: 640.98px) {
    .nwc-section-unpin[b-3tgvylt2tv] {
        display: none;
    }
}
/* /Pages/Shared/Components/FilterabilityAutocomplete.razor.rz.scp.css */
.filterability-autocomplete[b-vfwikeh5o6] {
    position: relative;
    width: 100%;
}

.nwc-autocomplete-menu[b-vfwikeh5o6] {
    max-height: 320px;
}

.nwc-autocomplete-item.active .text-warning[b-vfwikeh5o6] {
    color: var(--shared-autocomplete-active-warning-fg) !important;
}

.hit-main[b-vfwikeh5o6] {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-weight: var(--font-weight-medium);
}

.hit-date[b-vfwikeh5o6] {
    font-family: var(--bs-font-monospace);
    font-size: 0.8rem;
    opacity: 0.8;
}

.hit-meta[b-vfwikeh5o6] {
    font-size: var(--font-size-sm);
    opacity: 0.85;
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.hit-meta .badge[b-vfwikeh5o6] {
    font-size: var(--font-size-2xs);
}
/* /Pages/Shared/Components/HtmlContentSection.razor.rz.scp.css */
/* The visual design contract for this component lives in the shared site-wide
   stylesheet at wwwroot/css/copilot-design-contract.css so that the chat-side
   DynamicBlock (in NWCWebApp2022.Copilot) can render with the same look without
   cross-RCL CSS imports. Blazor scoped CSS doesn't support @import — this file
   intentionally stays minimal. */
.html-content-section[b-yey3eeb2ow] {
    /* Minimal local hook — all real styling is in copilot-design-contract.css */
}
/* /Pages/Shared/Components/LookupGearButton.razor.rz.scp.css */
.lookup-gear-btn[b-wcogmrjsaf] {
    padding: 0.15rem 0.35rem;
    font-size: var(--font-size-sm);
    line-height: 1;
    flex-shrink: 0;
}
/* /Pages/Shared/Components/PressLegsEditor.razor.rz.scp.css */
/* Moved verbatim from Pages/Booking/addDrainAndPress.razor.css in the C1 extraction — scoped CSS
   compiles per-component, so these rules had to travel WITH the markup or the editor renders
   unstyled while the smoke suite stays green on class names alone (redteam B8). */

/* .invalid / .error-text: the host's copies cannot reach this component's scope, and .error-text
   has ZERO global backing (site.css:48 gives .invalid only a bare outline) — so both are defined
   here, matching their previous effective styling from the host stylesheet. */
.invalid[b-1bwhyolv9s] { border-color: var(--red-500) !important; box-shadow: 0 0 0 0.1rem var(--booking-invalid-glow); }
.error-text[b-1bwhyolv9s] { color: var(--red-500); font-size: 0.8rem; margin-top: 2px; }

/* ── Press legs ────────────────────────────────────────────────────────────────
   A leg is press + cycle + tons, which no longer fits a single-line chip. Each is a
   compact stacked card; the press name keeps .nwc-chip so the list still reads as chips.
   These rows sit several levels below the Press <FormField>, past its `> select` child
   combinator, so site.css's token sizing never reaches them — the rules below own their
   sizing outright rather than overriding a shared default. */
.adp-legs[b-1bwhyolv9s] { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }

.adp-leg[b-1bwhyolv9s] {
  border: 1px solid var(--nwc-border);
  border-radius: var(--radius-sm, 4px);
  padding: 3px 5px;
  background: var(--nwc-surface-2, transparent);
}

/* ONE line: move / press / cycle / tons / hulls / remove. The controls carry their meaning in
   placeholder + title, so the per-field labels that used to sit above them are gone — they cost a
   whole row per leg and said "Cycle" above a control listing cycles. */
.adp-leg__row[b-1bwhyolv9s] { display: flex; gap: 5px; align-items: center; }

/* Inside the leg row the controls are flex items, not full-width blocks — sized directly
   rather than overriding a shared default (see the file-header note above). */
.adp-leg__row .form-select[b-1bwhyolv9s],
.adp-leg__row .form-input[b-1bwhyolv9s] { width: auto; padding: 2px 5px; font-size: 0.82rem; }

/* ⛔ A SELECT NEEDS ITS CARET'S ROOM BACK — the rule above takes it away.
   Bootstrap's .form-select draws its dropdown arrow as a BACKGROUND SVG, not as a
   glyph in the text flow: `background-position: calc(100% - 12px) 50%`, 16px wide.
   The only thing keeping text out from under it is Bootstrap's own
   `padding-right: 2.25rem` (36px) — and the shorthand above overrides that to 5px,
   so the arrow paints straight over the end of the option text.
   MEASURED on live prod 2026-08-31 (Chrome, 1536x695 CSS px, dpr 1.25, the pending
   row's "Choose a press"): text ran to within 5.7px of the padding box while the
   caret occupied the rightmost 12-28px — a 17.3px overlap. It reads as a struck
   through or doubled word, which is what Jeff saw on the Add Drain and Press panel.
   ⚠ It is NOT the hint colliding with the select. Those two measure a clean 5px
   gap and the row does not overflow (scrollWidth == clientWidth, 640px). Anything
   that adds flex-wrap or shrinks the select is treating the wrong cause.
   24px of padding against a caret pulled in to 6px leaves 6.9px of clearance and
   costs the select 19px of width, which the row has: it needs 261px of 640px.
   ⭐ Same shape done correctly elsewhere: ProfileImageGallery.razor.css:136 spells
   out a 4-value padding with 1.75rem on the right for exactly this reason.
   ⛔ Do not fold this back into the shorthand above — .form-input has no caret and
   must not pay the 19px. */
.adp-leg__row .form-select[b-1bwhyolv9s] {
    padding-right: 24px;
    background-position: calc(100% - 6px) 50%;
}

.adp-leg__press[b-1bwhyolv9s] { flex: 0 0 auto; }
.adp-leg__cycle[b-1bwhyolv9s] { flex: 1 1 auto; min-width: 0; }
.adp-leg__tons[b-1bwhyolv9s]  { flex: 0 0 66px; text-align: right; }

.adp-leg__check[b-1bwhyolv9s] { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; font-size: 0.78rem; }

/* Reorder arrows are the shared .nwc-move/.nwc-movebtn utilities (site.css) — hoisted
   2026-08-04 when TankAllocationRow needed the identical shape. */

.adp-leg__remove[b-1bwhyolv9s] {
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--nwc-text-muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
  flex: 0 0 auto;
}
.adp-leg__remove:hover[b-1bwhyolv9s] { color: var(--red-500); }

.adp-leg__sub[b-1bwhyolv9s] { display: flex; gap: 6px; align-items: center; margin-top: 2px; }

/* The phase parameters — the whole reason cycles are structured rather than a name.
   Deliberately small and monospaced: it is a row of figures to compare, not prose. */
.adp-leg__detail[b-1bwhyolv9s] {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  font-family: var(--font-mono, monospace);
  color: var(--nwc-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adp-leg__sub .adp-leg__note[b-1bwhyolv9s] { flex: 0 1 210px; width: auto; font-size: 0.75rem; padding: 2px 5px; }

.adp-leg__addnote[b-1bwhyolv9s] {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  margin-top: 1px;
  font-size: 0.68rem;
  color: var(--nwc-text-muted);
  text-decoration: underline dotted;
}
.adp-leg__addnote:hover[b-1bwhyolv9s] { color: var(--nwc-text); }

/* ⭐ A newly added leg announces itself — it used to appear instantly and read as nothing having
   happened. One-shot: @key keeps the element alive across re-renders, so the class staying on it
   never retriggers.
   ⚠ Animates max-height/opacity/background, NOT `height: auto` (not animatable) and not `transform`
   (would slide the row out of its own border box mid-animation). */
@keyframes adp-leg-in-b-1bwhyolv9s {
  0%   { opacity: 0; max-height: 0;    margin-top: -3px; background: var(--state-info-bg); }
  35%  { opacity: 1; max-height: 90px; margin-top: 0;    background: var(--state-info-bg); }
  100% { opacity: 1; max-height: 90px; margin-top: 0;    background: var(--nwc-surface-2, transparent); }
}
.adp-leg--new[b-1bwhyolv9s] { animation: adp-leg-in-b-1bwhyolv9s 1.1s ease-out 1; overflow: hidden; }

/* Respect a reduced-motion preference: keep the color cue, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .adp-leg--new[b-1bwhyolv9s] { animation: none; background: var(--state-info-bg); }
}

/* "+ Add press" — the action that used to be a <select> choice (Jeff 2026-08-08). Styled as a quiet
   text action rather than a filled button on purpose: this panel already has three filled blues
   competing (Add Intake / Receive Fruit / Submit) and only Submit commits anything. Same voice as
   .adp-leg__addnote above, one size up because it is the list's primary affordance when empty. */
.adp-addleg[b-1bwhyolv9s] {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--state-info-fg);
  text-decoration: underline dotted;
}
.adp-addleg:hover[b-1bwhyolv9s] { color: var(--nwc-text); }

/* Disabled while a row is already pending — two empty rows waiting for a press is a state with no
   meaning, and the second would silently steal the id="pressSelection" the suites locate. */
.adp-addleg:disabled[b-1bwhyolv9s] { color: var(--nwc-text-muted); cursor: default; text-decoration: none; }

/* The pending row: a real leg row that has not earned its place in the list yet. Dashed border says
   provisional without inventing a new shape — it is the same .adp-leg card underneath. */
.adp-leg--pending[b-1bwhyolv9s] {
  border-style: dashed;
  border-color: var(--state-info-fg);
}

.adp-leg__pending-hint[b-1bwhyolv9s] {
  font-size: 0.68rem;
  color: var(--nwc-text-muted);
}

/* Running allocation. Advisory only — amber never blocks a save. */
.adp-tally[b-1bwhyolv9s] { margin-top: 6px; text-align: right; font-size: 0.8rem; color: var(--nwc-text); }
.adp-tally--muted[b-1bwhyolv9s] { color: var(--nwc-text-muted); }
.adp-tally--ok[b-1bwhyolv9s] { color: var(--state-success-fg); }
.adp-tally--warn[b-1bwhyolv9s] { color: var(--state-warning-fg); }
/* /Pages/Shared/Components/RoleTagInput.razor.rz.scp.css */
.role-tag-input[b-rkzxknjw74] {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.role-chip[b-rkzxknjw74] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--font-size-sm);
    padding: 3px 8px;
    white-space: nowrap;
    background: var(--blue-500);
    color: var(--white);
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-medium);
}

.btn-close-chip[b-rkzxknjw74] {
    border: none;
    background: none;
    padding: 0 2px;
    font-size: var(--font-size-md);
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
    color: inherit;
}

    .btn-close-chip:hover[b-rkzxknjw74] {
        opacity: 1;
    }

.btn-add-role[b-rkzxknjw74] {
    border: 1px dashed var(--gray-600);
    background: none;
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    cursor: pointer;
    white-space: nowrap;
}

    .btn-add-role:hover[b-rkzxknjw74] {
        border-color: var(--bs-primary);
        color: var(--bs-primary);
        background: var(--bs-primary-bg-subtle);
    }

.dropdown-backdrop[b-rkzxknjw74] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1049;
    background: transparent;
}

.role-dropdown[b-rkzxknjw74] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-slot-badge);
    min-width: 200px;
    max-width: 280px;
    margin-top: 4px;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--radius-md);
    background: var(--bs-body-bg);
    box-shadow: var(--shared-autocomplete-dropdown-shadow);
}

.role-search-box[b-rkzxknjw74] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--bs-border-color);
}

.role-list[b-rkzxknjw74] {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px 0;
}

.role-option[b-rkzxknjw74] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    text-align: left;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--bs-body-color);
}

    .role-option:hover[b-rkzxknjw74] {
        background-color: var(--bs-tertiary-bg);
    }

    .role-option.selected[b-rkzxknjw74] {
        font-weight: var(--font-weight-medium);
    }

        .role-option.selected i[b-rkzxknjw74] {
            color: var(--bs-primary);
        }

    .role-option.create-new[b-rkzxknjw74] {
        border-top: 1px solid var(--bs-border-color);
        margin-top: 4px;
        padding-top: 8px;
        color: var(--bs-primary);
        font-weight: var(--font-weight-medium);
    }
/* /Pages/Shared/Components/TankAllocationRow.razor.rz.scp.css */
.ta-row[b-di9mfuvtbg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs, 0.125rem);
}

.ta-row__main[b-di9mfuvtbg] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs, 0.375rem);
}

.ta-row__main[b-di9mfuvtbg]  .nwc-autocomplete-input {
    flex: 1 1 auto;
}

/* Cap tons so the tank picker keeps the width (BookingLoadRow's sizing, now the shared one). */
.ta-row__main input[type="number"][b-di9mfuvtbg] {
    flex: 0 0 5.5rem;
}

/* Lot pairing select — fixed so the tank picker keeps the flexible width, same reasoning as tons
   above. Only rendered on multi-lot loads, so the extra crowding is the rare shape, not the norm. */
.ta-row__main select.ta-row__lot[b-di9mfuvtbg] {
    flex: 0 0 9rem;
}

.ta-row__detail[b-di9mfuvtbg] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs, 0.375rem);
}

.ta-row__detail input[b-di9mfuvtbg] {
    flex: 1 1 0;
    min-width: 0;
}

/* Transparent by default: the two bands stay the two flex rows they have always been, so the
   ungridded host (TankAllocationEditor) sees no change from this wrapper existing. */
.ta-row__cells[b-di9mfuvtbg] { display: contents; }

/* ── Gridded mode (BookingLoadRow) ────────────────────────────────────────────
   Nine cells that used to be two independently-flexing rows become one template, so every tank
   reads as a LINE in a table: tank, tons and each instruction column sit at the same x across
   all rows and under the host's header. The template itself is --ta-cols, owned by the host
   (BookingLoadRow.razor.css) because the header must share it — a custom property inherits
   through the CSS-isolation boundary, which is the only clean way two scoped components can
   agree on one column set. */
.ta-row--grid .ta-row__cells[b-di9mfuvtbg] {
    display: grid;
    grid-template-columns: var(--ta-cols);
    align-items: center;
    gap: var(--space-2xs, 0.375rem);
}

.ta-row--grid .ta-row__main[b-di9mfuvtbg],
.ta-row--grid .ta-row__detail[b-di9mfuvtbg] { display: contents; }

/* DOM order puts delete straight after tons (it belongs to the picker band); the grid wants it
   last, past the instruction columns. `order` is honoured by grid auto-placement, so this moves
   the cell without moving the markup — the tab order stays picker → tons → delete, which is the
   order someone filling the row actually wants. */
.ta-row--grid .ta-row__main > .btn-outline-danger[b-di9mfuvtbg] { order: 1; }

/* Cells span their column: the fixed flex bases above are what the two-band layout needed and
   would fight the template here. */
.ta-row--grid .ta-row__main input[type="number"][b-di9mfuvtbg],
.ta-row--grid .ta-row__main select.ta-row__lot[b-di9mfuvtbg],
.ta-row--grid .ta-row__detail input[b-di9mfuvtbg] { flex: 1 1 auto; width: 100%; min-width: 0; }

.ta-row--grid .ta-row__main[b-di9mfuvtbg]  .nwc-autocomplete-input { width: 100%; }

/* The instruction columns are the same rank as tank/tons here, not a subordinate second line —
   so they lose the muted "detail" reading and simply sit in their column. */
.ta-row--grid[b-di9mfuvtbg] { gap: var(--space-2xs, 0.375rem); }

/* Below the template's natural width the columns would crush past legibility, so hand the row
   back to the stacked bands (and the host hides its header to match). One breakpoint, both
   components, because --ta-cols stops being honoured the moment display:grid is dropped.
   ⚠ Container query, not a media query: the binding constraint is the width of the panel this
   row sits in, and with the lookup drawer open that is roughly half the viewport. `ta-grid` is
   registered by the host (.booking-load-row__allocations) — a container name crosses the
   CSS-isolation boundary the same way --ta-cols does. A host that opts into Gridded without
   registering that container simply never gets the fallback, which is why both live together.

   ⛔ 47rem is only correct while the WIDEST --ta-cols variant's floors sum to LESS than 752px.
   The budget and the arithmetic live on --ta-cols in BookingLoadRow.razor.css — read it before
   changing this number or any column width. Between the floor sum and this breakpoint the grid
   stays in column mode and CLIPS silently (shipped that way until 2026-08-08: 893px of floors
   against a 752px breakpoint, a 141px dead zone that ate the Comments field on ~1280px screens). */
@container ta-grid (max-width: 47rem) {
    .ta-row--grid .ta-row__cells[b-di9mfuvtbg] { display: contents; }
    .ta-row--grid .ta-row__main[b-di9mfuvtbg],
    .ta-row--grid .ta-row__detail[b-di9mfuvtbg] { display: flex; }
    .ta-row--grid .ta-row__main > .btn-outline-danger[b-di9mfuvtbg] { order: 0; }
    .ta-row--grid .ta-row__main input[type="number"][b-di9mfuvtbg] { flex: 0 0 5.5rem; width: auto; }
    .ta-row--grid .ta-row__main select.ta-row__lot[b-di9mfuvtbg] { flex: 0 0 9rem; width: auto; }
    .ta-row--grid .ta-row__detail input[b-di9mfuvtbg] { flex: 1 1 0; width: auto; }
}

/* Per-tank press band: indent under the row so the plan reads as belonging to THIS tank. */
.ta-row__press[b-di9mfuvtbg] {
    margin-left: var(--space-sm, 0.75rem);
}

/* Movable host (BookingLoadRow): the detail/press bands start where the tank picker does, so
   the reorder arrows stand alone in their own gutter instead of being crowded by the process
   input (Jeff 2026-08-04). 1.4rem ≈ the .nwc-move strip + the row gap. */
.ta-row--movable .ta-row__detail[b-di9mfuvtbg],
.ta-row--movable .ta-row__saignee[b-di9mfuvtbg],
.ta-row--movable .ta-row__press[b-di9mfuvtbg] {
    margin-left: 1.4rem;
}

/* Saignée band. Its own line, NOT a sixth input in .ta-row__detail — the rate is gallons per ton
   and the tons box in .ta-row__main is fruit tons, so the two must never sit side by side reading
   as peers. The unit rides immediately after the number and the hint spells it out, because this
   is a harvest-floor surface where a misread is a wrong bleed. */
.ta-row__saignee[b-di9mfuvtbg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2xs, 0.375rem);
}

.ta-row__saignee-check[b-di9mfuvtbg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs, 0.125rem);
    margin: 0;
    font-size: var(--font-size-sm, 0.75rem);
    white-space: nowrap;
}

.ta-row__saignee-rate[b-di9mfuvtbg] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs, 0.125rem);
}

.ta-row__saignee-label[b-di9mfuvtbg] {
    font-size: var(--font-size-sm, 0.75rem);
    color: var(--text-muted);
    white-space: nowrap;
}

/* Narrow on purpose: a rate is a small number, and a box the width of the tons box would invite
   the exact confusion the band exists to prevent. */
.ta-row__saignee input[type="number"][b-di9mfuvtbg] {
    flex: 0 0 4.5rem;
}

.ta-row__saignee-unit[b-di9mfuvtbg] {
    font-size: var(--font-size-sm, 0.75rem);
    font-weight: 600;
    white-space: nowrap;
}

.ta-row__saignee-hint[b-di9mfuvtbg] {
    font-size: var(--font-size-xs, 0.7rem);
    color: var(--text-muted);
    white-space: nowrap;
}

/* PRESS label + its add-picker share one line; the leg cards, tally and error wrap to
   full-width rows below. */
.ta-row__press[b-di9mfuvtbg]  .nwc-form-field {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs, 0.375rem);
}

.ta-row__press[b-di9mfuvtbg]  .nwc-form-field > label {
    margin: 0;
    flex: 0 0 auto;
}

.ta-row__press[b-di9mfuvtbg]  .nwc-form-field > select {
    flex: 0 1 18rem;
    min-width: 10rem;
}

.ta-row__press[b-di9mfuvtbg]  .adp-legs,
.ta-row__press[b-di9mfuvtbg]  .adp-tally,
.ta-row__press[b-di9mfuvtbg]  .error-text {
    flex-basis: 100%;
}

/* Unresolved-tank warning. Tokens only — matches the danger treatment used by .error-text
   elsewhere in this row rather than introducing a second warning look. */
/* Two full-width note bands under the row, identical in shape and differing only in tone — the
   selector is grouped rather than copied so the css-duplicate-audit floor keeps ratcheting down. */
.ta-row__unresolved[b-di9mfuvtbg],
.ta-row__custom[b-di9mfuvtbg] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs, 0.375rem);
    margin-top: var(--space-2xs, 0.375rem);
    font-size: var(--font-size-sm, 0.8125rem);
}

.ta-row__unresolved[b-di9mfuvtbg] {
    color: var(--bs-danger);
}

/* Muted, not amber: a custom destination is a valid choice being echoed back, and colouring it
   like a warning is what would teach the user to read it as a mistake. */
.ta-row__custom[b-di9mfuvtbg] {
    color: var(--bs-gray-600);
}
/* /Pages/Shared/Components/TankAutocomplete.razor.rz.scp.css */
.tank-autocomplete[b-otb39sufmk] {
    position: relative;
    width: 100%;
}

.input-icon.valid[b-otb39sufmk] {
    color: var(--bs-success);
}

.input-icon.invalid[b-otb39sufmk] {
    color: var(--bs-danger);
}

.nwc-autocomplete-menu[b-otb39sufmk] {
    max-height: 200px;
}

.tank-code[b-otb39sufmk] {
    font-weight: var(--font-weight-medium);
}

.tank-capacity[b-otb39sufmk] {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

.invalid-feedback[b-otb39sufmk] {
    font-size: var(--font-size-sm);
    margin-top: 2px;
}
/* /Pages/Shared/Components/VineyardBlockPicker.razor.rz.scp.css */
.vineyard-block-picker[b-8pavywqpg9] {
    position: relative;
    width: 100%;
}

.block-code[b-8pavywqpg9] {
    font-weight: var(--font-weight-medium);
    font-family: var(--bs-font-monospace);
}

/* Marks a search hit the current client has booked before. Sits inside .block-code, which is
   monospace + medium — reset both so the badge reads as a badge, not as part of the block name. */
.block-history-chip[b-8pavywqpg9] {
    margin-left: 6px;
    font-family: var(--bs-font-sans-serif);
    font-weight: var(--font-weight-normal);
}

.block-meta[b-8pavywqpg9] {
    font-size: var(--font-size-sm);
    opacity: 0.8;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    text-transform: capitalize;
}
/* /Pages/Shared/Components/WineLotAutocomplete.razor.rz.scp.css */
.winelot-autocomplete[b-9933o216hz] {
    position: relative;
    width: 100%;
}

.input-icon.valid[b-9933o216hz] {
    color: var(--bs-success);
}

.lot-code[b-9933o216hz] {
    font-weight: var(--font-weight-medium);
    font-family: var(--bs-font-monospace);
}

.lot-meta[b-9933o216hz] {
    font-size: var(--font-size-sm);
    opacity: 0.8;
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
/* /Pages/Shared/Components/WineLotPicker.razor.rz.scp.css */
.winelot-picker[b-1e3vn5dr0a] {
    position: relative;
}

.input-icon.valid[b-1e3vn5dr0a] {
    color: var(--bs-success);
}

.nwc-autocomplete-menu[b-1e3vn5dr0a] {
    max-height: 300px;
}

.wl-picker-name[b-1e3vn5dr0a] {
    font-weight: var(--font-weight-medium);
}

.wl-picker-badge[b-1e3vn5dr0a] {
    font-size: var(--font-size-2xs);
    vertical-align: middle;
}

.wl-picker-detail[b-1e3vn5dr0a] {
    display: flex;
    gap: var(--space-md);
    font-size: 0.8rem;
}
/* /Pages/Shipping/BolFromIntake.razor.rz.scp.css */
.bol-from-intake-page[b-ug4d7f73n3] {
    padding: var(--space-lg);
}
/* /Pages/Shipping/CaseGoodBolFromIntake.razor.rz.scp.css */
.cg-bol-from-intake-page[b-ud44bkkxto] {
    padding: var(--space-lg);
}

.extraction-json[b-ud44bkkxto] {
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: 0.6rem var(--space-md);
    font-size: 0.78rem;
    max-height: 28rem;
    overflow: auto;
}
/* /Pages/Shipping/Profiles/Detail.razor.rz.scp.css */
/* Confirm dialogs — now Shared/ConfirmDialogPanel.razor, see LAYOUT-PATTERNS.md
   Pattern 12. This file's overlay had used var(--z-slot-badge) (1050), not
   var(--z-modal) (1060) like the other instances — standardized on
   consolidation, no known reason for the divergence. */

/* ── Dropdown backdrop ── */
.js-dropdown-backdrop[b-531ye44w9n] {
    position: fixed;
    inset: 0;
    z-index: 1049;
}
/* /Pages/Shipping/Profiles/_FingerprintPicker.razor.rz.scp.css */
/* ── Fingerprint picker chip layout ── */

.fingerprint-picker[b-58n664d9py] {
    font-size: 0.875rem;
}

.chip-group[b-58n664d9py] {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--gray-50);
}

.chip-group-header[b-58n664d9py] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem;
    color: var(--gray-700);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chip-row[b-58n664d9py] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.fingerprint-chip[b-58n664d9py] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--gray-400);
    border-radius: 20px;
    background: var(--white);
    color: var(--gray-700);
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1.2;
}

.fingerprint-chip:hover[b-58n664d9py] {
    border-color: var(--blue-500);
    background: var(--shipping-chip-hover-bg);
    color: var(--blue-500);
}

.fingerprint-chip.selected[b-58n664d9py] {
    background: var(--blue-500);
    border-color: var(--blue-500);
    color: var(--white);
}

.chip-label[b-58n664d9py] {
    font-weight: var(--font-weight-medium);
}

.chip-count[b-58n664d9py] {
    font-size: 0.68rem;
    opacity: 0.75;
}

.fingerprint-chip.selected .chip-count[b-58n664d9py] {
    opacity: 0.85;
}

.match-counter[b-58n664d9py] {
    font-size: 0.82rem;
    color: var(--gray-700);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.picker-loading[b-58n664d9py],
.picker-empty[b-58n664d9py] {
    padding: var(--space-sm) 0;
    font-size: var(--font-size-md);
}

.match-all-toggle[b-58n664d9py] {
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: var(--space-md) !important;
}
/* /Pages/Shipping/Profiles/_LegEditPanel.razor.rz.scp.css */
/* ── Backdrop ── */

.leg-edit-backdrop[b-0r70qz1jh6] {
    position: fixed;
    inset: 0;
    background: var(--shipping-backdrop-bg);
    z-index: var(--z-slot-badge);
    animation: backdropFadeIn-b-0r70qz1jh6 0.2s ease forwards;
}

@keyframes backdropFadeIn-b-0r70qz1jh6 {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Sliding panel ── */

.leg-edit-panel-slide[b-0r70qz1jh6] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: 480px;
    background: var(--white);
    z-index: 1051;
    box-shadow: var(--shipping-panel-shadow);
    display: flex;
    flex-direction: column;
    outline: none;
}

.leg-edit-panel-slide.slide-in[b-0r70qz1jh6] {
    animation: legSlideIn-b-0r70qz1jh6 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes legSlideIn-b-0r70qz1jh6 {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
}

/* ── Header — .leg-slide-header folded into global .nwc-slide-header (site.css) ── */

.leg-slide-title[b-0r70qz1jh6] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-weight-semibold);
    font-size: 1.05rem;
    color: var(--gray-900);
}

/* ── Body ── */

.leg-slide-body[b-0r70qz1jh6] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: var(--space-sm) 0;
}

.leg-form[b-0r70qz1jh6] {
    display: flex;
    flex-direction: column;
}

.leg-form-section[b-0r70qz1jh6] {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--shipping-divider);
}

.leg-form-section:last-child[b-0r70qz1jh6] {
    border-bottom: none;
}

.leg-form-label[b-0r70qz1jh6] {
    font-weight: var(--font-weight-semibold);
    font-size: 0.82rem;
    color: var(--gray-700);
    margin-bottom: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.field-flag[b-0r70qz1jh6] {
    font-size: 0.78rem;
}

/* ── Footer ── */

.leg-slide-footer[b-0r70qz1jh6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
    flex-shrink: 0;
}

/* ── Mobile ── */

@media (max-width: 576px) {
    .leg-edit-panel-slide[b-0r70qz1jh6] {
        width: 100%;
    }
}
/* /Pages/Supply/SupplyOrdersPage.razor.rz.scp.css */
.supply-orders-page[b-xp0r47l8re] {
    padding: var(--space-lg);
    max-width: 1400px;
    margin: 0 auto;
}

.page-header[b-xp0r47l8re] {
    margin-bottom: var(--space-lg);
}

.page-header h4[b-xp0r47l8re] {
    margin: 0 0 0.2rem 0;
}

/* ── Tab bar ─────────────────────────────────────── */
.tab-bar[b-xp0r47l8re] {
    display: flex;
    gap: var(--space-2xs);
    border-bottom: 2px solid var(--bs-border-color, var(--gray-300));
    margin-bottom: var(--space-lg);
}

.tab-btn[b-xp0r47l8re] {
    background: none;
    border: none;
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-base);
    color: var(--bs-secondary, var(--gray-600));
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover[b-xp0r47l8re] {
    color: var(--blue-500);
}

.tab-btn.active[b-xp0r47l8re] {
    color: var(--blue-500);
    border-bottom-color: var(--blue-500);
    font-weight: var(--font-weight-semibold);
}

/* ── Readiness chips (By-Run filter) ─────────────── */
.readiness-chips[b-xp0r47l8re] {
    display: flex;
    gap: var(--space-2xs);
    flex-wrap: wrap;
}

.chip[b-xp0r47l8re] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color, var(--gray-300));
    border-radius: var(--radius-xl);
    padding: 0.1rem 0.6rem;
    font-size: var(--font-size-sm);
    cursor: pointer;
    color: var(--bs-secondary, var(--gray-600));
    transition: background 0.15s, border-color 0.15s;
}

.chip:hover[b-xp0r47l8re] {
    background: var(--bs-light, var(--gray-50));
}

.chip.active[b-xp0r47l8re] {
    background: var(--blue-500);
    border-color: var(--blue-500);
    color: var(--white);
}

/* ── Summary cards ───────────────────────────────── */
.summary-row[b-xp0r47l8re] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.summary-card[b-xp0r47l8re] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color, var(--gray-300));
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    text-align: center;
}

.summary-card:hover[b-xp0r47l8re] {
    background: var(--bs-light, var(--gray-50));
}

.summary-card.active[b-xp0r47l8re] {
    border-color: var(--blue-500);
    background: var(--supply-selected-bg);
}

.summary-value[b-xp0r47l8re] {
    font-size: 1.6rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
}

.summary-label[b-xp0r47l8re] {
    font-size: 0.78rem;
    color: var(--bs-secondary, var(--gray-600));
    margin-top: 0.15rem;
}

/* ── Filter bar ──────────────────────────────────── */
.filter-bar[b-xp0r47l8re] {
    display: flex;
    gap: var(--space-md);
    align-items: flex-end;
    padding: var(--space-md);
    background: var(--bs-light, var(--gray-50));
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.filter-group[b-xp0r47l8re] {
    display: flex;
    flex-direction: column;
}

.filter-group label[b-xp0r47l8re] {
    font-size: 0.72rem;
    color: var(--bs-secondary, var(--gray-600));
    margin-bottom: 0.15rem;
}

.filter-group .form-select[b-xp0r47l8re],
.filter-group .form-control[b-xp0r47l8re] {
    min-width: 140px;
}

/* ── Order table ────────────────────────────────── */
.order-table-wrapper[b-xp0r47l8re] {
    overflow-x: auto;
}

.order-table[b-xp0r47l8re] {
    font-size: var(--font-size-md);
}

.order-table thead th[b-xp0r47l8re] {
    font-size: 0.72rem;
    text-transform: uppercase;
    color: var(--bs-secondary, var(--gray-600));
    letter-spacing: var(--letter-spacing-wide);
    border-bottom: 1px solid var(--bs-border-color, var(--gray-300));
}

.order-table tbody tr[b-xp0r47l8re] {
    cursor: pointer;
}

.order-table tbody tr:hover[b-xp0r47l8re] {
    background: var(--bs-light, var(--gray-50));
}

.order-table tbody tr.selected[b-xp0r47l8re] {
    background: var(--supply-selected-bg);
}

.order-table td[b-xp0r47l8re] {
    vertical-align: middle;
}

/* ── Drill-down drawer ─────────────────────────── */
.drawer-backdrop[b-xp0r47l8re] {
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop-soft);
    z-index: var(--z-slot-badge);
}

.drawer[b-xp0r47l8re] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(520px, 100vw);
    background: var(--bs-body-bg);
    z-index: 1051;
    box-shadow: var(--panel-slide-shadow);
    display: flex;
    flex-direction: column;
}

.drawer.slide-in[b-xp0r47l8re] {
    animation: drawerSlideIn-b-xp0r47l8re 0.25s ease-out forwards;
}

@keyframes drawerSlideIn-b-xp0r47l8re {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.drawer-header[b-xp0r47l8re] {
    padding: var(--space-lg) 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, var(--gray-300));
    background: var(--bs-light, var(--gray-50));
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
}

.drawer-title[b-xp0r47l8re] {
    font-weight: var(--font-weight-semibold);
    font-size: 1.05rem;
}

.drawer-subtitle[b-xp0r47l8re] {
    margin-top: 0.15rem;
}

.drawer-body[b-xp0r47l8re] {
    padding: var(--space-lg) 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.drawer-quantities[b-xp0r47l8re] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.drawer-quantities > div[b-xp0r47l8re] {
    background: var(--bs-light, var(--gray-50));
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
}

.qty-label[b-xp0r47l8re] {
    font-size: var(--font-size-xs);
    color: var(--bs-secondary, var(--gray-600));
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
}

.qty-value[b-xp0r47l8re] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.drawer-meta[b-xp0r47l8re] {
    border-left: 3px solid var(--bs-border-color, var(--gray-300));
    padding-left: var(--space-md);
    margin-bottom: var(--space-lg);
    font-size: var(--font-size-md);
}

.drawer-meta > div[b-xp0r47l8re] {
    margin-bottom: var(--space-2xs);
}

.drawer-section[b-xp0r47l8re] {
    margin-bottom: var(--space-lg);
}

.drawer-section h6[b-xp0r47l8re] {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--bs-secondary, var(--gray-600));
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-2xs);
    border-bottom: 1px solid var(--bs-border-color, var(--gray-300));
}

.drawer-list[b-xp0r47l8re] {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.drawer-list li[b-xp0r47l8re] {
    padding: 0.4rem 0;
    font-size: var(--font-size-md);
    border-bottom: 1px dashed var(--bs-border-color-translucent, rgba(0, 0, 0, 0.07));
}

.drawer-list li:last-child[b-xp0r47l8re] {
    border-bottom: none;
}

.details-json[b-xp0r47l8re] {
    background: var(--bs-light, var(--gray-50));
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    font-size: var(--font-size-sm);
    max-height: 240px;
    overflow: auto;
    margin: 0;
}

.empty-state[b-xp0r47l8re] {
    background: var(--bs-light, var(--gray-50));
    border-radius: var(--radius-md);
}

/* ── Drawer actions / standalone-receipt form ───── */
.drawer-actions[b-xp0r47l8re] {
    border-top: 1px solid var(--bs-border-color, var(--gray-300));
    padding-top: var(--space-md);
    margin-top: var(--space-sm);
}

.standalone-form[b-xp0r47l8re] {
    background: var(--bs-light, var(--gray-50));
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-sm);
}

.form-row[b-xp0r47l8re] {
    margin-bottom: var(--space-sm);
}

.form-row label[b-xp0r47l8re] {
    font-size: 0.72rem;
    color: var(--bs-secondary, var(--gray-600));
    text-transform: uppercase;
    margin-bottom: 0.15rem;
}

.form-buttons[b-xp0r47l8re] {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
    margin-top: var(--space-sm);
}

/* Confirm overlay — now Shared/ConfirmDialogPanel.razor, see
   LAYOUT-PATTERNS.md Pattern 12. .form-row/.form-buttons above are still
   used by this dialog's body content and by the receipt mini-form. */

/* ── Mobile ─────────────────────────────────────── */
@media (max-width: 768px) {
    .filter-bar[b-xp0r47l8re] {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-group .form-select[b-xp0r47l8re],
    .filter-group .form-control[b-xp0r47l8re] {
        min-width: 0;
        width: 100%;
    }
}
/* /Pages/TankBoard/Manager/TankBoardManagerPage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   TankBoard Manager — the ONE stylesheet for the whole feature.

   Every child component (toolbar, roster, alarm panel, drawer, graph) is styled
   from here via ::deep .tbm-*; none of them carries a .razor.css of its own.
   This mirrors TankBoardPage.razor.css, which styles all 10 of its children the
   same way, and it is what keeps the feature to a single palette source.

   ⛔ Chips are .tbm-chip, NOT the shared .nwc-chip. That is the one deliberate
   divergence from the shared utility and the reason is the palette: .nwc-chip is
   built on --state-* tokens which flip dark, while the TankBoard beside this page
   is painted in --tr-*, which has NO dark override. Mixing them fractures the two
   surfaces in dark mode from one side or the other. The --tbm-* layer (tokens.css)
   aliases --tr-* byte-for-byte in light mode and supplies real dark values, so the
   Manager matches the board where it matters and stops being a white slab inside
   ManagerShell's dark panes.

   ⛔ No inline <style> anywhere in this feature's .razor files — those are global
   leaks.
   ═══════════════════════════════════════════════════════════════════════════ */

.tbm-page[b-b4w4trvvjh] {
    display: contents;
    outline: none;
}

/* ⛔⛔ NOT decoration — this element is the ANCESTOR every `::deep .tbm-*` rule below needs in
   order to reach the detail drawer. CSS isolation rewrites `::deep X` to `[b-<scope>] X`, and the
   scope attribute lands only on elements TankBoardManagerPage.razor renders itself. The drawer is
   `position: fixed` and therefore declared at the page root; without this wrapper it had no scoped
   ancestor and the whole stylesheet silently missed it (measured 2026-08-10 — SVG bands fell back
   to default BLACK, swatches disappeared, the header ran together). `display: contents` keeps the
   wrapper out of layout while still giving the selector something to match. */
.tbm-drawer-host[b-b4w4trvvjh] {
    display: contents;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */

[b-b4w4trvvjh] .tbm-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

[b-b4w4trvvjh] .tbm-search {
    max-width: 240px;
}

[b-b4w4trvvjh] .tbm-filters {
    border-bottom: none;
}

[b-b4w4trvvjh] .tbm-alarm-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
}

[b-b4w4trvvjh] .tbm-refresh-info {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--tbm-fg-muted);
}

/* ⛔ FEED-level banner. Never per-tank: LastReadingAt is a whole-feed batch stamp
   (all 217 tanks identical, measured), and "no recent rows" for one tank is what a
   healthy, well-controlled tank looks like. ⛔ UI only — no SMS, toast or outbox. */
[b-b4w4trvvjh] .tbm-stale-banner {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: var(--tbm-warn-bg);
    color: var(--tbm-warn-fg);
    border: 1px solid var(--tbm-warn-fg);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-md);
    font-size: 0.75rem;
    margin-bottom: var(--space-sm);
}

/* Acquisition-liveness modifiers on the stale-banner shape (one shape, three tones —
   a new near-duplicate block here would push the css-drift floor). Alarm = a plant-wide
   latch in progress; watch = armed and counting; dead (dashed) = the MONITOR itself is
   impaired, so nobody is watching. */
[b-b4w4trvvjh] .tbm-acq-banner-alarm {
    background: var(--tbm-flat-bg);
    color: var(--tbm-flat-fg);
    border-color: var(--tbm-flat-fg);
}

[b-b4w4trvvjh] .tbm-acq-banner-dead {
    border-style: dashed;
}

/* ── Layout panes ────────────────────────────────────────────────────────── */

[b-b4w4trvvjh] .tbm-grid-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    min-width: 0;
}

/* ManagerShell hides .ms-pane-inspector entirely below 1200px, so the alarm panel
   would simply vanish. The page renders a SECOND instance above the roster; these
   two rules guarantee exactly one is ever visible. */
[b-b4w4trvvjh] .tbm-alarm-inline {
    display: none;
}

@media (max-width: 1200px) {
    [b-b4w4trvvjh] .tbm-alarm-inline {
        display: block;
        max-height: 40vh;
        overflow: auto;
        border: 1px solid var(--tbm-border);
        border-radius: var(--radius-md);
        margin-bottom: var(--space-sm);
    }

    [b-b4w4trvvjh] .tbm-alarm-inline:not(.open) {
        display: none;
    }
}

[b-b4w4trvvjh] .tbm-statusbar {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 0.7rem;
    color: var(--tbm-fg-muted);
    padding: 0 var(--space-sm);
}

[b-b4w4trvvjh] .tbm-sep {
    color: var(--tbm-fg-faint);
}

[b-b4w4trvvjh] .tbm-status-warn {
    color: var(--tbm-warn-fg);
}

[b-b4w4trvvjh] .tbm-statusbar-right {
    margin-left: auto;
    color: var(--tbm-fg-faint);
}

/* ── Roster table ────────────────────────────────────────────────────────── */

[b-b4w4trvvjh] .tbm-table-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--tbm-border);
    border-radius: var(--radius-md);
    background: var(--tbm-surface);
}

[b-b4w4trvvjh] .tbm-table {
    font-size: 0.8rem;
    margin-bottom: 0;
    color: var(--tbm-fg);
    --bs-table-bg: var(--tbm-surface);
    --bs-table-color: var(--tbm-fg);
    --bs-table-border-color: var(--tbm-divider);
    --bs-table-hover-color: var(--tbm-fg);
}

[b-b4w4trvvjh] .tbm-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--tbm-surface-subtle);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tbm-fg-muted);
    border-bottom: 1px solid var(--tbm-table-border);
    white-space: nowrap;
}

[b-b4w4trvvjh] .tbm-table tbody td {
    padding: var(--space-xs) var(--space-sm);
    vertical-align: middle;
    border-color: var(--tbm-divider);
}

/* Every number column is tabular — a roster is read by scanning a column, and
   proportional digits make that scan lie. */
[b-b4w4trvvjh] .tbm-col-temp,
[b-b4w4trvvjh] .tbm-col-set,
[b-b4w4trvvjh] .tbm-col-delta,
[b-b4w4trvvjh] .tbm-col-age,
[b-b4w4trvvjh] .tbm-delta-num,
[b-b4w4trvvjh] .tbm-rack-member {
    font-variant-numeric: tabular-nums;
}

[b-b4w4trvvjh] .tbm-col-code {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-weight: 700;
    color: var(--tbm-fg-value);
}

[b-b4w4trvvjh] .tbm-col-lot {
    max-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-b4w4trvvjh] .tbm-col-temp {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tbm-fg-value);
}

[b-b4w4trvvjh] .tbm-col-set {
    color: var(--tbm-fg-muted);
}

[b-b4w4trvvjh] .tbm-col-rack {
    color: var(--tbm-fg-faint);
    font-size: 0.72rem;
    max-width: 130px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-b4w4trvvjh] .tbm-col-age {
    color: var(--tbm-fg-faint);
}

[b-b4w4trvvjh] .tbm-null {
    color: var(--tbm-fg-faint);
}

@media (max-width: 1500px) {
    [b-b4w4trvvjh] .tbm-col-rack,
    [b-b4w4trvvjh] .tbm-col-rack-w {
        display: none;
    }
}

/* Phone is explicitly out of scope for v1 — it must not be BROKEN, it need not be
   good. Columns 5, 9 and 10 go first because they are the widest and the least
   load-bearing on a small screen. */
@media (max-width: 768px) {
    [b-b4w4trvvjh] .tbm-col-delta,
    [b-b4w4trvvjh] .tbm-col-age {
        display: none;
    }
}

[b-b4w4trvvjh] .tbm-row {
    cursor: pointer;
}

[b-b4w4trvvjh] .tbm-row.selected {
    outline: 2px solid var(--tbm-accent);
    outline-offset: -2px;
}

/* A degraded tank gets a LEFT BAR, not a red row. A wall of red rows is unreadable
   mid-harvest, and the full-row tint is already the mismatch panel's language. */
[b-b4w4trvvjh] .tbm-row-degraded > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--tbm-bad-fg);
}

[b-b4w4trvvjh] .tbm-row-fault > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--tbm-fault);
}

/* ── THE FLATLINE RACK: one condition, not N tank problems ───────────────── */
/* Three reinforcing signals, exactly one of them loud. (1) the banner — loud.
   (2) this group wash — quiet: a tint plus a CONTINUOUS left bar, so the members
   read as one bracketed block, which IS the message. (3) a subordinate chip that
   names the rack. ⛔ Member rows get no red row, no per-tank alarm icon and no N
   separate loud chips: N red rows is the pager you learn to ignore, which is the
   exact failure mode this whole monitor exists to avoid. */

[b-b4w4trvvjh] .tbm-row-flatline > td {
    background: var(--tbm-flat-tint);
}

[b-b4w4trvvjh] .tbm-row-flatline > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--tbm-flat-bg);
}

[b-b4w4trvvjh] .tbm-row-flatline .tbm-col-rack {
    color: var(--tbm-flat-edge);
    font-weight: 600;
}

[b-b4w4trvvjh] .tbm-rack-group-end.tbm-row-flatline > td {
    border-bottom: 2px solid var(--tbm-flat-edge);
}

/* ⛔ Overrides the red flatline wash above — an Indeterminate rack is NOT a claimed freeze, so it
   must not wear the alarm's colour. It keeps .tbm-row-flatline's grouping/structure and repaints
   amber with a dashed rail: same "we cannot tell" language as the card.
   ⚠ Equal specificity to the rules above, so this block MUST stay after them — source order is
   what makes it win. Do not hoist it. */
[b-b4w4trvvjh] .tbm-row-flatline-unknown > td {
    background: var(--tbm-warn-bg);
}

[b-b4w4trvvjh] .tbm-row-flatline-unknown > td:first-child {
    box-shadow: inset 3px 0 0 0 var(--tbm-warn-fg);
}

[b-b4w4trvvjh] .tbm-row-flatline-unknown .tbm-col-rack {
    color: var(--tbm-warn-fg);
    font-weight: 600;
}

[b-b4w4trvvjh] .tbm-rack-group-end.tbm-row-flatline-unknown > td {
    border-bottom: 2px dashed var(--tbm-warn-fg);
}

[b-b4w4trvvjh] .tbm-rack-banner > td {
    background: var(--tbm-flat-bg);
    color: var(--tbm-flat-fg);
    border-top: 2px solid var(--tbm-flat-edge);
    border-bottom: 2px solid var(--tbm-flat-edge);
    padding: var(--space-xs) var(--space-md);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    position: sticky;
    top: 28px;
    z-index: 3;
}

[b-b4w4trvvjh] .tbm-rack-banner > td > * {
    margin-right: var(--space-md);
}

/* ⚠ Severity Info = every member is Mode 0: frozen, but no controller is making a
   decision on the frozen input. The contract says outright to read Severity before
   styling this red, so it drops to the warn palette — same structure, one notch
   quieter. Actionable keeps the inversion. */
[b-b4w4trvvjh] .tbm-rack-banner-info > td {
    background: var(--tbm-warn-bg);
    color: var(--tbm-warn-fg);
    border-color: var(--tbm-warn-fg);
}

/* ⛔ Amber + dashed rule, never the alarm's solid red bar. The dash is the whole message: this
   banner asserts that the window could not decide, not that the rack is frozen. */
[b-b4w4trvvjh] .tbm-rack-banner-unknown > td {
    background: var(--tbm-warn-bg);
    color: var(--tbm-warn-fg);
    border-top: 2px dashed var(--tbm-warn-fg);
    border-bottom: 2px dashed var(--tbm-warn-fg);
}

[b-b4w4trvvjh] .tbm-rack-banner-standalone {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    background: var(--tbm-flat-bg);
    color: var(--tbm-flat-fg);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-md);
    font-size: 0.78rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

[b-b4w4trvvjh] .tbm-banner-note {
    font-weight: 400;
    opacity: 0.9;
}

[b-b4w4trvvjh] .tbm-banner-device {
    font-weight: 400;
    opacity: 0.85;
}

/* Draws the eye without strobing a cellar screen. Motion is a nudge, never the
   message — everything the banner says is legible with animation off. */
@media (prefers-reduced-motion: no-preference) {
    [b-b4w4trvvjh] .tbm-rack-banner > td {
        animation: tbm-rack-pulse-b-b4w4trvvjh 2.4s ease-in-out infinite;
    }
}

@keyframes tbm-rack-pulse-b-b4w4trvvjh {
    0%, 100% { filter: none; }
    50% { filter: brightness(1.14); }
}

[b-b4w4trvvjh] .tbm-rack-open {
    float: right;
    margin-right: 0;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid currentColor;
    color: inherit;
    font-size: 0.72rem;
    padding: 0 var(--space-sm);
}

/* ⛔ The value is real data that stopped being a MEASUREMENT. Do not blank the
   number and do not show a fault glyph — the dotted underline says exactly that,
   and it is what separates this from a sensor fault, which is a different
   condition with a different remedy. */
[b-b4w4trvvjh] .tbm-temp-latched {
    color: var(--tbm-flat-edge);
    text-decoration: underline dotted 1px;
    text-underline-offset: 3px;
    cursor: help;
}

/* ── Δ bipolar bar ───────────────────────────────────────────────────────── */

[b-b4w4trvvjh] .tbm-delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    justify-content: flex-end;
}

[b-b4w4trvvjh] .tbm-delta-track {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 6px;
    background: var(--tbm-neutral-bg);
    border-radius: var(--radius-pill);
    flex: 0 0 auto;
}

[b-b4w4trvvjh] .tbm-delta-tick {
    position: absolute;
    left: 28px;
    top: -1px;
    width: 1px;
    height: 8px;
    background: var(--tbm-fg-faint);
}

[b-b4w4trvvjh] .tbm-delta-fill {
    position: absolute;
    top: 0;
    height: 6px;
    border-radius: var(--radius-pill);
}

[b-b4w4trvvjh] .tbm-delta-fill.cool { background: var(--tbm-cool); }
[b-b4w4trvvjh] .tbm-delta-fill.heat { background: var(--tbm-heat); }

[b-b4w4trvvjh] .tbm-delta-num {
    font-size: 0.75rem;
    min-width: 34px;
    text-align: right;
}

[b-b4w4trvvjh] .tbm-delta-quiet { color: var(--tbm-fg-faint); }
[b-b4w4trvvjh] .tbm-delta-normal { color: var(--tbm-fg); }
[b-b4w4trvvjh] .tbm-delta-loud-cool { color: var(--tbm-cool); font-weight: 600; }
[b-b4w4trvvjh] .tbm-delta-loud-heat { color: var(--tbm-heat); font-weight: 600; }

/* ── Chips ───────────────────────────────────────────────────────────────── */

[b-b4w4trvvjh] .tbm-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 1px var(--space-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.45;
    white-space: nowrap;
}

/* ⛔ The ONLY inverted chip in the feature, and that is the whole mechanism: the
   severity ladder escalates WITHIN one hue — Degraded is a red tint, FLATLINE is
   the same red solid with white on it — so it outranks every other state at a
   glance without introducing a sixth colour nobody has learned. Do not soften it
   to a tint; the inversion IS the unmissability requirement, discharged. */
[b-b4w4trvvjh] .tbm-health-flatline {
    background: var(--tbm-flat-bg);
    border-color: var(--tbm-flat-edge);
    color: var(--tbm-flat-fg);
}

[b-b4w4trvvjh] .tbm-health-flatline-info {
    background: var(--tbm-warn-bg);
    border-color: var(--tbm-warn-fg);
    color: var(--tbm-warn-fg);
}

/* ⛔ Amber + DASHED, never the grey neutral of .tbm-health-unknown. Grey in this table means
   "no device mapped" — a benign nothing-to-see state — and this chip means the opposite: the rack
   is wholly static and this window cannot rule out a freeze. */
[b-b4w4trvvjh] .tbm-health-indeterminate {
    background: var(--tbm-warn-bg);
    border: 1px dashed var(--tbm-warn-fg);
    color: var(--tbm-warn-fg);
}

[b-b4w4trvvjh] .tbm-health-ok {
    background: var(--tbm-ok-bg);
    color: var(--tbm-ok-fg);
}

[b-b4w4trvvjh] .tbm-health-bad {
    background: var(--tbm-bad-bg);
    border-color: var(--tbm-bad-border);
    color: var(--tbm-bad-fg);
}

[b-b4w4trvvjh] .tbm-health-unknown {
    background: var(--tbm-neutral-bg);
    color: var(--tbm-fg-muted);
}

/* ⛔ Excluded must NEVER read as a problem. The .231 RTAutomation reports 0x0000 by
   design; a device that reports nothing must not render as permanently faulted. The
   dashed, UNFILLED treatment says "deliberately outside the system", which is
   visually distinct from Unknown's filled-but-grey "inside the system, not yet
   known". */
[b-b4w4trvvjh] .tbm-health-excluded {
    background: transparent;
    border: 1px dashed var(--tbm-border);
    color: var(--tbm-fg-faint);
}

[b-b4w4trvvjh] .tbm-chip-warn {
    background: var(--tbm-warn-bg);
    color: var(--tbm-warn-fg);
}

[b-b4w4trvvjh] .tbm-chip-info {
    background: var(--tbm-neutral-bg);
    color: var(--tbm-fg-muted);
}

[b-b4w4trvvjh] .tbm-mode-off {
    background: transparent;
    border: 1px solid var(--tbm-border);
    color: var(--tbm-fg-faint);
}

[b-b4w4trvvjh] .tbm-mode-cool { background: var(--tbm-cool-band); color: var(--tbm-cool); }
[b-b4w4trvvjh] .tbm-mode-heat { background: var(--tbm-heat-band); color: var(--tbm-heat); }
[b-b4w4trvvjh] .tbm-mode-unknown { background: var(--tbm-neutral-bg); color: var(--tbm-fg-muted); }

/* ⛔ Valve is teal, deliberately NOT blue and NOT orange: valve-open and mode are
   independent facts (a valve can be open under either mode). Colouring valve with
   the mode palette would imply they are the same channel. */
[b-b4w4trvvjh] .tbm-valve-on { color: var(--tbm-valve); font-size: 10px; }
[b-b4w4trvvjh] .tbm-valve-off { color: var(--tbm-fg-faint); font-size: 10px; }
[b-b4w4trvvjh] .tbm-valve-null { color: var(--tbm-fg-faint); }

/* ── Alarm panel ─────────────────────────────────────────────────────────── */

[b-b4w4trvvjh] .tbm-alarms {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--tbm-surface);
    color: var(--tbm-fg);
}

[b-b4w4trvvjh] .tbm-alarms-head {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--tbm-surface-subtle);
    border-bottom: 1px solid var(--tbm-border);
}

[b-b4w4trvvjh] .tbm-alarms-title {
    padding: 0;
    border: none;
    background: none;
    flex: 1 1 auto;
}

[b-b4w4trvvjh] .tbm-alarm-filters {
    flex-basis: 100%;
    border-bottom: none;
}

[b-b4w4trvvjh] .tbm-alarms-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--space-md);
}

[b-b4w4trvvjh] .tbm-alarms-foot {
    flex-shrink: 0;
    font-size: 0.68rem;
    color: var(--tbm-fg-faint);
    border-top: 1px solid var(--tbm-divider);
    padding: var(--space-xs) var(--space-md);
}

/* ⛔ An empty alarm panel is a SUCCESS, not a failure — so NOT .nwc-empty, which is
   a grey, centred, sad-face shape. */
[b-b4w4trvvjh] .tbm-alarms-clear {
    text-align: center;
    padding: var(--space-xl);
}

[b-b4w4trvvjh] .tbm-alarms-clear i {
    font-size: 2rem;
    color: var(--tbm-ok-fg);
}

[b-b4w4trvvjh] .tbm-clear-msg {
    color: var(--tbm-fg-muted);
    font-size: 0.8rem;
    margin-top: var(--space-xs);
}

[b-b4w4trvvjh] .tbm-clear-time {
    color: var(--tbm-fg-faint);
    font-size: 0.7rem;
}

[b-b4w4trvvjh] .tbm-alarms-error {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-start;
    color: var(--tbm-bad-fg);
    font-size: 0.78rem;
    margin-bottom: var(--space-md);
}

/* ⛔⛔ "not running" is not "all clear". */
[b-b4w4trvvjh] .tbm-detector-off {
    display: flex;
    gap: var(--space-xs);
    align-items: flex-start;
    background: var(--tbm-warn-bg);
    color: var(--tbm-warn-fg);
    border: 1px solid var(--tbm-warn-fg);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.75rem;
    margin-bottom: var(--space-md);
}

[b-b4w4trvvjh] .tbm-detector-note {
    font-weight: 400;
    opacity: 0.9;
}

/* ⛔ ONE card per RACK. Never one card per tank — N cards for one adapter is the
   pager nobody reads, and this whole panel is arranged around that rule. */
[b-b4w4trvvjh] .tbm-rack-card {
    border: 1px solid var(--tbm-flat-edge);
    border-left: 4px solid var(--tbm-flat-bg);
    border-radius: var(--radius-lg);
    background: var(--tbm-flat-tint);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
}

[b-b4w4trvvjh] .tbm-rack-card-info {
    border-color: var(--tbm-warn-fg);
    border-left-color: var(--tbm-warn-fg);
    background: var(--tbm-warn-bg);
}

/* ⛔ Amber and DASHED, and the dash is the point: a solid rim reads as an assertion, and this
   card asserts nothing except that the window could not decide. Never red — we are not claiming
   a freeze — and never absent, because a rack frozen longer than the window looks exactly
   like this. */
[b-b4w4trvvjh] .tbm-rack-card-unknown {
    border-color: var(--tbm-warn-fg);
    border-left-color: var(--tbm-warn-fg);
    border-left-style: dashed;
    background: var(--tbm-warn-bg);
}

[b-b4w4trvvjh] .tbm-rack-card-unknown .tbm-rack-card-head,
[b-b4w4trvvjh] .tbm-rack-card-unknown .tbm-rack-dur {
    color: var(--tbm-warn-fg);
}

[b-b4w4trvvjh] .tbm-rack-card-focus {
    outline: 2px solid var(--tbm-accent);
    outline-offset: 2px;
}

[b-b4w4trvvjh] .tbm-rack-card-head {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--tbm-flat-edge);
}

[b-b4w4trvvjh] .tbm-rack-card-info .tbm-rack-card-head,
[b-b4w4trvvjh] .tbm-rack-card-info .tbm-rack-dur {
    color: var(--tbm-warn-fg);
}

/* The number that makes it feel urgent — the largest type on the page. */
[b-b4w4trvvjh] .tbm-rack-dur {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--tbm-flat-bg);
    font-variant-numeric: tabular-nums;
}

[b-b4w4trvvjh] .tbm-rack-since {
    font-size: 0.7rem;
    color: var(--tbm-fg-muted);
    margin-bottom: var(--space-xs);
}

[b-b4w4trvvjh] .tbm-rack-kv {
    font-size: 0.75rem;
    margin-bottom: var(--space-xs);
}

[b-b4w4trvvjh] .tbm-rack-provisional {
    color: var(--tbm-warn-fg);
}

[b-b4w4trvvjh] .tbm-rack-members {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin-bottom: var(--space-xs);
}

/* ⛔ NOT health chips and NOT red — they are the evidence list, and their sameness
   across N different fermentations is precisely what the reader should notice. */
[b-b4w4trvvjh] .tbm-rack-member {
    background: var(--tbm-neutral-bg);
    color: var(--tbm-fg);
    border: 1px solid transparent;
    cursor: pointer;
}

[b-b4w4trvvjh] .tbm-rack-member:hover {
    border-color: var(--tbm-accent);
}

[b-b4w4trvvjh] .tbm-rack-note {
    font-size: 0.7rem;
    color: var(--tbm-fg-muted);
}

[b-b4w4trvvjh] .tbm-rack-card-plantwide {
    border-color: var(--tbm-flat-edge);
}

[b-b4w4trvvjh] .tbm-skipped {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    font-size: 0.7rem;
    color: var(--tbm-fg-muted);
    margin-bottom: var(--space-md);
}

[b-b4w4trvvjh] .tbm-device-list {
    margin-bottom: var(--space-md);
}

[b-b4w4trvvjh] .tbm-device-card {
    padding: var(--space-sm);
    border: 1px solid var(--tbm-border);
    border-left: 3px solid var(--tbm-fg-faint);
    border-radius: var(--radius-lg);
    background: var(--tbm-surface);
    margin-bottom: var(--space-sm);
}

[b-b4w4trvvjh] .tbm-device-bad { border-left-color: var(--tbm-bad-fg); }
[b-b4w4trvvjh] .tbm-device-unknown { border-left-color: var(--tbm-fg-muted); }
[b-b4w4trvvjh] .tbm-device-excluded { border-left-color: var(--tbm-fg-faint); }
[b-b4w4trvvjh] .tbm-device-ok { border-left-color: var(--tbm-ok-fg); }

[b-b4w4trvvjh] .tbm-device-head {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: 0.8rem;
}

[b-b4w4trvvjh] .tbm-device-name {
    font-weight: 600;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[b-b4w4trvvjh] .tbm-device-loc {
    color: var(--tbm-fg-muted);
    font-size: 0.72rem;
}

[b-b4w4trvvjh] .tbm-device-detail {
    color: var(--tbm-fg-muted);
    font-size: 0.7rem;
}

[b-b4w4trvvjh] .tbm-device-none {
    color: var(--tbm-fg-faint);
    font-size: 0.78rem;
    padding: var(--space-sm) 0;
}

[b-b4w4trvvjh] .tbm-mono {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}

[b-b4w4trvvjh] .tbm-event-feed {
    max-height: 40vh;
    overflow-y: auto;
}

[b-b4w4trvvjh] .tbm-event-head {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tbm-fg-muted);
    margin-bottom: var(--space-2xs);
}

[b-b4w4trvvjh] .tbm-event-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding: 2px 0;
    border-bottom: 1px solid var(--tbm-divider);
}

[b-b4w4trvvjh] .tbm-event-age {
    flex: 0 0 44px;
    color: var(--tbm-fg-faint);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
}

[b-b4w4trvvjh] .tbm-event-device {
    flex: 0 1 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
}

[b-b4w4trvvjh] .tbm-event-detail {
    flex: 1 1 auto;
    color: var(--tbm-fg-muted);
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-b4w4trvvjh] .tbm-event-empty {
    text-align: center;
    color: var(--tbm-fg-faint);
    font-size: 0.7rem;
    padding: var(--space-sm) 0;
}

/* ── Drawer ──────────────────────────────────────────────────────────────── */
/* ⛔ z-index is set INLINE by SlidingPanel from its ZIndex parameter — do NOT
   re-declare it here. A dead/overridden value misreads as authoritative and has
   already sent a debug agent down the wrong path once. */

[b-b4w4trvvjh] .tbm-drawer-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

[b-b4w4trvvjh] .tbm-drawer-tank { font-weight: 700; }
[b-b4w4trvvjh] .tbm-drawer-lot { color: var(--tbm-fg-muted); font-size: 0.85rem; }

[b-b4w4trvvjh] .tbm-drawer-temp {
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

[b-b4w4trvvjh] .tbm-widen { margin-left: auto; }

[b-b4w4trvvjh] .tbm-drawer-body {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* ⛔ Sits ABOVE the statstrip: the statstrip's numbers are exactly the
   reassuring-looking values the freeze produced, so the reader has to be told they
   are stale BEFORE reading them, not after. */
[b-b4w4trvvjh] .tbm-drawer-rack-strip {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--tbm-flat-bg);
    color: var(--tbm-flat-fg);
    font-size: 0.78rem;
    font-weight: 700;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
}

[b-b4w4trvvjh] .tbm-drawer-rack-strip-info {
    background: var(--tbm-warn-bg);
    color: var(--tbm-warn-fg);
}

[b-b4w4trvvjh] .tbm-drawer-rack-strip .tbm-rack-open {
    float: none;
    margin-left: auto;
}

[b-b4w4trvvjh] .tbm-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tbm-fg-muted);
    margin-top: var(--space-sm);
}

/* The readings table moved to TankVitalsPanel, which carries its own scoped stylesheet
   because it is also rendered outside this page. Do not re-add the rules here. */

[b-b4w4trvvjh] .tbm-provenance {
    font-size: 0.68rem;
    color: var(--tbm-fg-faint);
    padding-top: var(--space-sm);
}


/* ═══════════════════════════════════════════════════════════════════════════
   Live SCADA overlay (2026-09-05)

   ⛔⛔ The animation here is a RENDERING choice about a value that already
   changed — it is never a substitute for data. Nothing in this feature
   interpolates between two real readings to make a number glide; a cell moves
   when, and only when, the PLC reported something new. See
   TankOverviewLiveFeed's class docs.

   ⚠ Sized against Jeff's real viewport: 1920x1080 at 125% Windows scaling gives
   the page 1536x695 CSS px (devicePixelRatio 1.25, Chrome zoom honestly 100%).
   ⛔ Do NOT re-tune these breakpoints against an assumed 1920x1080 - that
   mistake cost four sessions on this very page in 2026-08.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Feed state pill ─────────────────────────────────────────────────────── */

[b-b4w4trvvjh] .tbm-live-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-right: var(--space-xs);
    padding: 1px 8px 1px 6px;
    border-radius: var(--radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: help;
}

[b-b4w4trvvjh] .tbm-live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ⛔ Four states, four looks. "Connecting" must not borrow the live colour and
   "down" must not borrow the idle grey - a reader has to be able to tell, at a
   glance, whether the numbers beside this pill are being claimed as current. */
[b-b4w4trvvjh] .tbm-live-ok {
    background: var(--tbm-ok-bg);
    color: var(--tbm-ok-fg);
}

/* Only the healthy pill breathes. A stale or dead feed holding still is the
   correct signal - a pulsing "down" badge reads as activity. */
[b-b4w4trvvjh] .tbm-live-ok .tbm-live-dot {
    animation: tbm-live-breathe-b-b4w4trvvjh 2.4s ease-in-out infinite;
}

[b-b4w4trvvjh] .tbm-live-warn {
    background: var(--tbm-warn-bg);
    color: var(--tbm-warn-fg);
}

[b-b4w4trvvjh] .tbm-live-bad {
    background: var(--tbm-bad-bg);
    color: var(--tbm-bad-fg);
}

[b-b4w4trvvjh] .tbm-live-idle {
    background: var(--tbm-neutral-bg);
    color: var(--tbm-fg-faint);
}

@keyframes tbm-live-breathe-b-b4w4trvvjh {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}

/* ── Value change highlight ──────────────────────────────────────────────── */

/* The transition is what keeps it from being choppy: the colour arrives fast and
   leaves slowly, so a board full of tanks reads as a soft ripple rather than a
   strobe. */
[b-b4w4trvvjh] .tbm-live-value {
    display: inline-block;
    padding: 0 3px;
    border-radius: var(--radius-sm);
    transition: background-color 900ms ease-out, color 900ms ease-out;
}

[b-b4w4trvvjh] .tbm-live-flash {
    animation: tbm-live-fade-b-b4w4trvvjh 3s ease-out both;
}

[b-b4w4trvvjh] .tbm-live-up {
    color: var(--tbm-heat);
}

[b-b4w4trvvjh] .tbm-live-down {
    color: var(--tbm-cool);
}

@keyframes tbm-live-fade-b-b4w4trvvjh {
    0%   { background-color: var(--tbm-surface-subtle); }
    12%  { background-color: var(--tbm-surface-subtle); }
    100% { background-color: transparent; }
}

/* ⛔ Accessibility, and not optional: a monitoring wall runs for hours in
   someone's peripheral vision. Motion off = no pulse, no fade - the colour still
   lands, so no INFORMATION is carried by the animation alone. */
@media (prefers-reduced-motion: reduce) {
    [b-b4w4trvvjh] .tbm-live-ok .tbm-live-dot { animation: none; }
    [b-b4w4trvvjh] .tbm-live-flash { animation: none; }
    [b-b4w4trvvjh] .tbm-live-value { transition: none; }
}

/* ── 6-hour trend sparkline ──────────────────────────────────────────────── */

[b-b4w4trvvjh] .tbm-col-trend {
    padding-top: 2px;
    padding-bottom: 2px;
}

[b-b4w4trvvjh] .tbm-spark {
    display: block;
    width: 68px;
    height: 20px;
    overflow: visible;
}

/* vector-effect keeps the stroke 1px after the non-uniform viewBox scaling that
   preserveAspectRatio="none" applies - without it the line thins and thickens
   with each tank's own value range. */
[b-b4w4trvvjh] .tbm-spark polyline {
    fill: none;
    stroke: var(--tbm-accent);
    stroke-width: 1.25;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

[b-b4w4trvvjh] .tbm-spark-none {
    font-size: 0.7rem;
    font-style: italic;
}

/* Every trace shares one fixed °F scale, so a tank whose movement ran past the window is
   pinned flat against an edge - visually indistinguishable from a calm tank. This marker is
   what keeps the shared scale honest; it is anchored in the cell rather than inline so a
   clipped row does not sit taller than its neighbours. */
[b-b4w4trvvjh] .tbm-col-trend {
    position: relative;
}

[b-b4w4trvvjh] .tbm-spark-clip {
    position: absolute;
    top: 50%;
    right: 1px;
    transform: translateY(-50%);
    font-size: 0.68rem;
    line-height: 1;
    font-weight: 600;
    color: var(--tbm-warn, #b45309);
}

/* ⛔⛔ 1280px, and the number matters. The first draft of this rule said 1600px,
   which would have hidden the sparkline on the ONE screen it was built for -
   Jeff's page is 1536 CSS px wide. A breakpoint above his real viewport ships a
   feature that is invisible to its only user while testing green at 1920.
   ⛔ Any change to this number must be justified against 1536x695, not 1920x1080.

   Between 1280px and here the table scrolls horizontally inside
   .tbm-table-scroll rather than dropping a column - the rack column's own
   1500px rule already handles the genuinely tight case. */
@media (max-width: 1280px) {
    [b-b4w4trvvjh] .tbm-col-trend {
        display: none;
    }
}
/* /Pages/TankBoard/Manager/TankTempGraph.razor.rz.scp.css */
/* TankTempGraph -- the tank temperature chart's own styling.

   These rules lived as `::deep .tbm-*` inside TankBoardManagerPage.razor.css, which meant the
   component only rendered correctly INSIDE that page. Dropped anywhere else it drew black bands
   across the whole plot with no legend -- and still looked plausible enough to ship. Scoped here,
   the graph is portable, which is what lets the legacy pumpover grid reuse it as-is.

   The --tbm-* custom properties are deliberately NOT moved: all 72 are defined globally in
   wwwroot/css/tokens.css and already reach the component wherever it renders. Only the rules were
   trapped. The @keyframes travels because an animation whose keyframes stayed behind fails
   silently -- the element simply never moves.

   Moved verbatim -- TankBoardManagerPage must render exactly as it did before. */

/* ═══ THE GRAPH ═══════════════════════════════════════════════════════════ */
.tbm-graph[b-9cmb6qdwsb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.tbm-graph-plot[b-9cmb6qdwsb] {
    position: relative;
    overflow-x: auto;
    outline: none;
}

.tbm-graph-svg[b-9cmb6qdwsb] {
    display: block;
    touch-action: pan-y;
    user-select: none;
}

.tbm-axis-label[b-9cmb6qdwsb] {
    font-size: 10px;
    fill: var(--tbm-fg-faint);
}

.tbm-grid[b-9cmb6qdwsb] { stroke: var(--tbm-grid); }

.tbm-baseline[b-9cmb6qdwsb] { stroke: var(--tbm-divider); stroke-width: 1; }

/* The measurement is the subject; states are tint around it. */
.tbm-line-temp[b-9cmb6qdwsb] {
    stroke: var(--tbm-series-temp);
    stroke-width: 2;
    stroke-linejoin: miter;
}

/* Inside a flatline window the series is still drawn — those rows genuinely exist —
   but it visibly stops being a solid record. */
.tbm-line-frozen[b-9cmb6qdwsb] {
    stroke-dasharray: 3, 3;
    opacity: 0.45;
}

/* A reference, not a state — so deliberately uncoloured. */
.tbm-line-set[b-9cmb6qdwsb] {
    stroke: var(--tbm-series-setpoint);
    stroke-width: 1.5;
    stroke-dasharray: 5, 4;
}

/* A railed probe is not a temperature. Drawing −457° as a value is the exact bug
   that ran unnoticed on tank 33 from 2026-07-27. */
.tbm-line-fault[b-9cmb6qdwsb] {
    stroke: var(--tbm-fault);
    stroke-width: 1.5;
    stroke-dasharray: 2, 3;
    opacity: 0.4;
}

.tbm-fault-glyph[b-9cmb6qdwsb] {
    font-size: 12px;
    fill: var(--tbm-fault);
}

.tbm-pt[b-9cmb6qdwsb] {
    fill: var(--tbm-surface);
    stroke: var(--tbm-series-temp);
    stroke-width: 1.5;
}

/* Hollow with the flatline stroke, so the repeats read as REPEATS, not observations. */
.tbm-pt-frozen[b-9cmb6qdwsb] {
    stroke: var(--tbm-flat-bg);
}

.tbm-band-cool[b-9cmb6qdwsb] { fill: var(--tbm-cool-band); }

.tbm-band-cool-edge[b-9cmb6qdwsb] { stroke: var(--tbm-cool); stroke-width: 2; }

/* ⛔ Heating is ORANGE, not red. Red is reserved for fault/alarm; heating is a
   normal operation, not a danger. */
.tbm-band-heat[b-9cmb6qdwsb] { fill: var(--tbm-heat-band); }

.tbm-band-heat-edge[b-9cmb6qdwsb] { stroke: var(--tbm-heat); stroke-width: 2; }

.tbm-band-alarm[b-9cmb6qdwsb] { fill: var(--tbm-alarm); opacity: 0.08; }

/* No readings at all: a neutral void, deliberately not a state tint and not the flatline hatch
   (that one means rows exist but repeat; this means there are no rows). */
.tbm-band-silent[b-9cmb6qdwsb] { fill: var(--tbm-neutral-bg); opacity: 0.85; }

.tbm-silent-label[b-9cmb6qdwsb] { font-size: 9px; fill: var(--tbm-fg-faint); }

.tbm-line-silent[b-9cmb6qdwsb] {
    stroke: var(--tbm-series-temp);
    stroke-width: 1.5;
    stroke-dasharray: 1, 4;
    opacity: 0.45;
}

.tbm-band-alarm-tick[b-9cmb6qdwsb] { stroke: var(--tbm-alarm); stroke-width: 2; }

.tbm-valve-rail-off[b-9cmb6qdwsb] { fill: var(--tbm-valve-off); }

.tbm-valve-rail-on[b-9cmb6qdwsb] { fill: var(--tbm-valve); }

.tbm-rail-label[b-9cmb6qdwsb] { font-size: 8px; fill: var(--tbm-fg-faint); }

.tbm-now[b-9cmb6qdwsb] { stroke: var(--tbm-now); stroke-width: 1; }

.tbm-now-label[b-9cmb6qdwsb] { font-size: 9px; fill: var(--tbm-now); }

/* ── The flatline overlay ────────────────────────────────────────────────── */
.tbm-flat-band[b-9cmb6qdwsb] {
    stroke: var(--tbm-flat-bg);
    stroke-width: 1.5;
}

.tbm-flat-edge[b-9cmb6qdwsb] { stroke: var(--tbm-flat-bg); stroke-width: 2; }

.tbm-flat-serif[b-9cmb6qdwsb] { stroke: var(--tbm-flat-bg); stroke-width: 2; }

.tbm-flat-pill-box[b-9cmb6qdwsb] { fill: var(--tbm-flat-bg); }

.tbm-flat-pill-text[b-9cmb6qdwsb] {
    fill: var(--tbm-flat-fg);
    font-size: 11px;
    font-weight: 700;
}

.tbm-flat-strip[b-9cmb6qdwsb] { fill: var(--tbm-flat-bg); opacity: 0.9; }

.tbm-recovery-tick[b-9cmb6qdwsb] { fill: var(--tbm-ok-fg); }

.tbm-graph-caption[b-9cmb6qdwsb] {
    text-align: center;
    font-size: 0.7rem;
    color: var(--tbm-fg-faint);
}

.tbm-graph-overlay-text[b-9cmb6qdwsb] {
    font-size: 12px;
    fill: var(--tbm-fg-faint);
}

/* ⛔ Never a spinner in the graph, and never a collapsed-to-zero-height plot. */
.tbm-graph-shimmer[b-9cmb6qdwsb] {
    fill: var(--tbm-surface-subtle);
    opacity: 0.45;
}

@media (prefers-reduced-motion: no-preference) {
    .tbm-graph-shimmer[b-9cmb6qdwsb] {
        animation: tbm-shimmer-b-9cmb6qdwsb 1.2s linear infinite;
    }
}

@keyframes tbm-shimmer-b-9cmb6qdwsb {
    0% { opacity: 0.25; }
    50% { opacity: 0.55; }
    100% { opacity: 0.25; }
}

.tbm-graph-error[b-9cmb6qdwsb] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--tbm-bad-fg);
    font-size: 0.75rem;
}

/* Hover strips: transparent (not `none`) so they receive the pointer. The tooltip
   is revealed by CSS ALONE — ⛔ no @onmousemove, so moving across the chart never
   round-trips the Blazor Server circuit. Same technique as WeatherTrendChart. */
.tbm-hover-band[b-9cmb6qdwsb] { fill: transparent; }

.tbm-hover[b-9cmb6qdwsb] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms ease-out;
}

.tbm-slot:hover .tbm-hover[b-9cmb6qdwsb] { opacity: 1; }

.tbm-cross[b-9cmb6qdwsb] { stroke: var(--tbm-fg-faint); stroke-width: 1; stroke-dasharray: 3, 3; }

.tbm-hover-dot[b-9cmb6qdwsb] { fill: var(--tbm-surface); stroke: var(--tbm-series-temp); stroke-width: 2; }

.tbm-tip-box[b-9cmb6qdwsb] { fill: #1f2937; opacity: 0.95; }

.tbm-tip-head[b-9cmb6qdwsb] { fill: #fff; font-size: 11px; font-weight: 700; }

.tbm-tip-line[b-9cmb6qdwsb] { fill: #d1d5db; font-size: 10px; }

.tbm-tip-frozen[b-9cmb6qdwsb] { fill: #ff9a94; font-size: 10px; font-weight: 700; }

.tbm-drag-capture[b-9cmb6qdwsb] { fill: transparent; cursor: grabbing; }

.tbm-rubber[b-9cmb6qdwsb] { fill: var(--tbm-accent); opacity: 0.10; stroke: var(--tbm-accent); stroke-width: 1; }

.tbm-graph-bar[b-9cmb6qdwsb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-2xs);
}

.tbm-graph-nav[b-9cmb6qdwsb] {
    display: flex;
    gap: var(--space-3xs);
}

.tbm-range-pills[b-9cmb6qdwsb] { border-bottom: none; }

.tbm-range-pills .nwc-tab[b-9cmb6qdwsb] {
    padding: 2px var(--space-xs);
    font-size: 0.7rem;
}

.tbm-window-readout[b-9cmb6qdwsb] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--tbm-fg-muted);
}

.tbm-graph-legend[b-9cmb6qdwsb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    font-size: 0.7rem;
    color: var(--tbm-fg-muted);
}

.tbm-legend-toggle[b-9cmb6qdwsb] {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.7rem;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
}

.tbm-legend-toggle.off[b-9cmb6qdwsb] {
    opacity: 0.35;
    text-decoration: line-through;
}

/* ⛔ The flatline overlay is NOT a toggleable channel. A viewer must not be able to
   turn the chart back into the reassuring picture that hid a 19.75-hour outage. */
.tbm-legend-static[b-9cmb6qdwsb] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
}

.tbm-legend-frozen[b-9cmb6qdwsb] { color: var(--tbm-flat-edge); font-weight: 600; }

.tbm-sw[b-9cmb6qdwsb] {
    display: inline-block;
    width: 12px;
    height: 8px;
    border-radius: 2px;
}

.tbm-sw-temp[b-9cmb6qdwsb] { background: var(--tbm-series-temp); height: 2px; }

.tbm-sw-set[b-9cmb6qdwsb] { background: var(--tbm-series-setpoint); height: 2px; }

.tbm-sw-cool[b-9cmb6qdwsb] { background: var(--tbm-cool-band); border: 1px solid var(--tbm-cool); }

.tbm-sw-heat[b-9cmb6qdwsb] { background: var(--tbm-heat-band); border: 1px solid var(--tbm-heat); }

.tbm-sw-valve[b-9cmb6qdwsb] { background: var(--tbm-valve); }

.tbm-sw-alarm[b-9cmb6qdwsb] { background: var(--tbm-alarm); }

.tbm-sw-fault[b-9cmb6qdwsb] { background: var(--tbm-fault); opacity: 0.4; }

.tbm-sw-silent[b-9cmb6qdwsb] { background: var(--tbm-neutral-bg); border: 1px dotted var(--tbm-fg-faint); }

.tbm-sw-frozen[b-9cmb6qdwsb] { background: var(--tbm-flat-hatch); border: 1px solid var(--tbm-flat-bg); }

/* ⛔ Verbatim, always visible, NOT a tooltip. It is the one thing that stops a
   viewer reading a sparse week as a broken sensor. */
.tbm-graph-note[b-9cmb6qdwsb] {
    font-size: 0.68rem;
    color: var(--tbm-fg-faint);
}
/* /Pages/TankBoard/Manager/TankVitalsPanel.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   TankVitalsPanel — self-styled ON PURPOSE.

   ⛔ Do NOT move these rules back into TankBoardManagerPage.razor.css. Every
   `.tbm-*` rule there sits behind `::deep`, which CSS isolation rewrites to
   `[b-<page-scope>] X` — it reaches descendants of THAT page and nothing else.
   This component is also rendered from the legacy pumpover grid's temperature
   drawer, which is not inside it, so page-scoped styling leaves it unstyled.
   That exact mistake is what shipped a bare-looking drawer.

   The --tbm-* palette is global (tokens.css) and has real dark values, so
   borrowing the colours costs nothing and keeps the two surfaces identical.
   ═══════════════════════════════════════════════════════════════════════════ */

.tvp[b-jiso37svk1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.tvp-section-title[b-jiso37svk1] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tbm-fg-muted);
    margin-top: var(--space-sm);
}

/* A repeated reading, not a new measurement — the tooltip carries the detail. */
.tvp-latched[b-jiso37svk1] {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
}

/* ── What changed ────────────────────────────────────────────────────────── */

.tvp-changes[b-jiso37svk1] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tbm-border);
    border-radius: var(--radius-md);
    background: var(--tbm-surface);
    overflow: hidden;
}

.tvp-change[b-jiso37svk1] {
    display: grid;
    /* ⛔ The 3rd track sizes to the VALUES; the SLACK belongs in the 4th, after the author. It was
       `9rem 5.5rem 1fr auto` until 2026-09-09, which gave the values every spare pixel and left the
       author riding the far edge -- measured on prod at 1536x695 CSS px: a 57px "52° → 56°" sat in
       a 552px track and "Pfrench" started 464px past the end of it. Jeff, on the first look at the
       shipped feature: "the person's name is really far to the right".

       ⚠ The 3rd track is `minmax(min-content, 6.5rem)`, NOT `minmax(6.5rem, max-content)`. Both put
       the author 368px in and hold the authors in column across rows, but a 6.5rem *floor* cannot
       give way, and measuring the row at narrow container widths showed it overflowing at 420px and
       375px where the shipped `1fr` did not. A growth LIMIT keeps the alignment wherever there is
       room (>= ~430px, which is every real host) and collapses toward the values below that, so
       this is not worse than what it replaces at any width.

       6.5rem clears the widest value pair the row can hold: 92px for "105.5° → 105.5°", measured in
       Chrome at this row's own 12.48px font. A pair wider than 104px would wrap rather than widen.

       The 4th track is the Ignition author, rendered LAST, so a change with no name (every Valve
       row, and the ~4% of setpoint moves with no write in their gap) simply leaves it empty. */
    grid-template-columns: 9rem 5.5rem minmax(min-content, 6.5rem) 1fr;
    align-items: baseline;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.78rem;
    color: var(--tbm-fg);
    border-bottom: 1px solid var(--tbm-divider);
}

.tvp-change:last-child[b-jiso37svk1] {
    border-bottom: none;
}

.tvp-change-when[b-jiso37svk1] {
    color: var(--tbm-fg-muted);
    font-variant-numeric: tabular-nums;
}

.tvp-change-what[b-jiso37svk1] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tbm-fg-muted);
}

.tvp-from[b-jiso37svk1] {
    color: var(--tbm-fg-faint);
}

/* Who made the change, per Ignition's own audit. Quiet on purpose: it is the answer to a question
   the reader only sometimes has, and it must not out-shout the values that moved. */
.tvp-change-who[b-jiso37svk1] {
    /* ⛔ `start`, never `end`: an `end` here pushes the name to the far edge of whatever width the
       drawer happens to have, which is the 464px gap this row was shipped with. The name belongs
       beside the change it names. */
    justify-self: start;
    font-size: 0.7rem;
    color: var(--tbm-fg-muted);
    white-space: nowrap;
}

/* ── Recent readings ─────────────────────────────────────────────────────── */

.tvp-readings[b-jiso37svk1] {
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--tbm-border);
    border-radius: var(--radius-md);
}

.tvp-table[b-jiso37svk1] {
    font-size: 0.8rem;
    margin-bottom: 0;
    color: var(--tbm-fg);
    --bs-table-bg: var(--tbm-surface);
    --bs-table-color: var(--tbm-fg);
    --bs-table-border-color: var(--tbm-divider);
    --bs-table-hover-color: var(--tbm-fg);
}

.tvp-table thead th[b-jiso37svk1] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--tbm-surface-subtle);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tbm-fg-muted);
    border-bottom: 1px solid var(--tbm-table-border);
    white-space: nowrap;
}

.tvp-table tbody td[b-jiso37svk1] {
    padding: var(--space-xs) var(--space-sm);
    vertical-align: middle;
    border-color: var(--tbm-divider);
    font-variant-numeric: tabular-nums;
}

.tvp-empty[b-jiso37svk1],
.tvp-note[b-jiso37svk1] {
    color: var(--tbm-fg-faint);
    font-size: 0.72rem;
}

.tvp-empty[b-jiso37svk1] {
    padding: var(--space-md);
    text-align: center;
}

/* Capped so a chatty tank cannot push the graph off a short viewport. */
.tvp-changes[b-jiso37svk1] {
    max-height: 168px;
    overflow: auto;
}

.tvp-summary[b-jiso37svk1] {
    cursor: pointer;
    user-select: none;
}

.tvp-details > .tvp-readings[b-jiso37svk1] {
    margin-top: var(--space-xs);
}
/* /Pages/TankBoard/TankBoardPage.razor.rz.scp.css */
/* Tank Board — shared scoped styles for the whole feature (TankBoardPage + its children,
   reached via ::deep since Blazor CSS isolation only scopes the root component's own markup).
   Reuses the --tr-* tank-feature tokens from wwwroot/css/tokens.css (shared with
   Pages/Reports/TankMismatch) rather than inventing a parallel palette. */

.tb-page[b-vp1dzfnidh] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 14px 18px;
    outline: none;
}

[b-vp1dzfnidh] .tb-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

[b-vp1dzfnidh] .tb-search {
    max-width: 240px;
}

[b-vp1dzfnidh] .tb-refresh-info {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--tr-muted-fg);
}

[b-vp1dzfnidh] .tb-loading {
    display: flex;
    justify-content: center;
    padding: 60px 0;
}

/* ── Table view ── */
[b-vp1dzfnidh] .tb-table-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

[b-vp1dzfnidh] .tb-table-scroll {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--tr-border);
    border-radius: 6px;
}

[b-vp1dzfnidh] .tb-table {
    font-size: 0.8rem;
    margin-bottom: 0;
}

[b-vp1dzfnidh] .tb-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--tr-surface-subtle);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--tr-muted-fg);
}

[b-vp1dzfnidh] .tb-col-code {
    position: sticky;
    left: 0;
    z-index: 1;
    background: inherit;
}

[b-vp1dzfnidh] .tb-sortable {
    cursor: pointer;
    user-select: none;
}

[b-vp1dzfnidh] .tb-sort-active {
    color: var(--tr-accent);
}

[b-vp1dzfnidh] .tb-underline {
    border-bottom: 2px solid;
}

[b-vp1dzfnidh] .tb-red-text {
    color: var(--tr-bad-fg);
    font-weight: 500;
}

[b-vp1dzfnidh] .tb-empty {
    text-align: center;
    color: var(--tr-muted-light-fg);
    padding: 40px 0;
}

/* ── Tank card (table-row preview + map-tile double-click preview) ── */
[b-vp1dzfnidh] .tb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--tr-border);
    border-radius: 8px;
    background: var(--white);
    cursor: pointer;
}

[b-vp1dzfnidh] .tb-card.selected {
    outline: 2px solid var(--tr-accent);
    outline-offset: -1px;
}

[b-vp1dzfnidh] .tb-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--tr-surface-subtle);
    border-bottom: 1px solid var(--tr-border);
    border-radius: 7px 7px 0 0;
}

[b-vp1dzfnidh] .tb-card-code {
    font-weight: 700;
    font-size: 0.9rem;
}

[b-vp1dzfnidh] .tb-card-volume {
    font-weight: 700;
    font-size: 0.9rem;
}

[b-vp1dzfnidh] .tb-card-capacity {
    font-size: 0.75rem;
    color: var(--tr-muted-fg);
}

[b-vp1dzfnidh] .tb-card-lot {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    min-height: 3rem;
    text-align: center;
    font-weight: 600;
}

[b-vp1dzfnidh] .tb-card-notes,
[b-vp1dzfnidh] .tb-card-status {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    padding: 4px 10px;
    border-top: 1px solid var(--tr-border);
    font-size: 0.75rem;
}

[b-vp1dzfnidh] .tb-card-movingto {
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--tr-bad-fg);
    border-top: 1px solid var(--tr-border);
}

[b-vp1dzfnidh] .tb-card-incoming-bar {
    position: absolute;
    left: 0;
    top: 32px;
    bottom: 0;
    width: 4px;
    background: var(--tr-bad-fg);
}

[b-vp1dzfnidh] .tb-card-incoming-label {
    position: absolute;
    left: -1px;
    top: 40px;
    font-size: 9px;
    font-weight: 500;
    color: var(--tr-bad-fg);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

[b-vp1dzfnidh] .tb-card-temp {
    position: absolute;
    bottom: 2px;
    right: 6px;
    font-size: 9px;
    color: var(--tr-muted-light-fg);
}

/* A faulted probe reads as a warning, never as a number. Deliberately NOT muted like a real
   temperature — the point is that it stops being background information. */
[b-vp1dzfnidh] .tb-card-temp-fault,
[b-vp1dzfnidh] .tb-temp-fault {
    color: var(--state-danger-fg);
    cursor: help;
}

[b-vp1dzfnidh] .tb-temp-fault {
    font-size: 11px;
}

/* ── Map view ── */
[b-vp1dzfnidh] .tb-map-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--tr-border);
    border-radius: 6px;
    background: var(--tr-surface-subtle);
}

[b-vp1dzfnidh] .tb-map-svg {
    width: 100%;
    height: 100%;
}

[b-vp1dzfnidh] .tb-map-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16rem;
    color: var(--tr-muted-fg);
}

[b-vp1dzfnidh] .tb-location-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 10px;
    overflow-x: auto;
}

[b-vp1dzfnidh] .tb-tile {
    display: flex;
    flex-direction: column;
    padding: 4px;
    height: 100%;
    border-radius: 5px;
    border: 1px solid var(--tr-border);
    background: var(--white);
    cursor: pointer;
    overflow: hidden;
}

[b-vp1dzfnidh] .tb-tile-empty-shell {
    border-style: dashed;
    background: var(--tr-surface-subtle);
    cursor: default;
}

[b-vp1dzfnidh] .tb-tile-top {
    display: flex;
    justify-content: space-between;
}

[b-vp1dzfnidh] .tb-tile-code {
    font-weight: 700;
    font-size: 10px;
}

[b-vp1dzfnidh] .tb-tile-volume {
    font-size: 9px;
    font-variant-numeric: tabular-nums;
}

[b-vp1dzfnidh] .tb-tile-lot {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}

[b-vp1dzfnidh] .tb-tile-status {
    font-size: 8px;
    color: var(--tr-muted-fg);
}

[b-vp1dzfnidh] .tb-tile-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

/* ── Panels (Edit/Copy/History render inside SlidingPanel; these style their own content) ── */
[b-vp1dzfnidh] .tb-panel-header-actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
}

[b-vp1dzfnidh] .tb-copy-list {
    max-height: 40vh;
    overflow-y: auto;
}

[b-vp1dzfnidh] .tb-copy-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 4px;
    cursor: pointer;
}

[b-vp1dzfnidh] .tb-copy-row:hover {
    background: var(--tr-surface-subtle);
}

[b-vp1dzfnidh] .tb-hist-lot {
    max-width: 10rem;
}

/* ── Mismatch panel (inline, not an overlay) ── */
[b-vp1dzfnidh] .tb-mismatch-panel {
    border: 1px solid var(--tr-border);
    border-radius: 6px;
    background: var(--white);
    margin-bottom: 10px;
    overflow: hidden;
}

[b-vp1dzfnidh] .tb-mismatch-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--tr-surface-subtle);
    border-bottom: 1px solid var(--tr-border);
}

[b-vp1dzfnidh] .tb-mismatch-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}

[b-vp1dzfnidh] .tb-mismatch-table-wrap {
    max-height: 16rem;
    overflow: auto;
}

[b-vp1dzfnidh] .tb-mismatch-empty {
    padding: 12px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--tr-muted-fg);
}

[b-vp1dzfnidh] .tb-mismatch-footer {
    padding: 4px 14px;
    font-size: 0.68rem;
    color: var(--tr-muted-light-fg);
    border-top: 1px solid var(--tr-divider);
}

[b-vp1dzfnidh] .tb-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 600;
}

[b-vp1dzfnidh] .tb-badge-error {
    background: var(--tr-badge-bad-bg);
    color: var(--tr-bad-fg);
}

[b-vp1dzfnidh] .tb-badge-warning {
    background: #fdf3d8;
    color: #8a6d1a;
}

[b-vp1dzfnidh] .tb-badge-info {
    background: var(--tr-badge-muted-bg);
    color: var(--tr-muted-fg);
}
/* /Pages/TankBoard/TankDetailPanel.razor.rz.scp.css */
/* Read-only tank readout. Two-column definition grid: label left, value right. */
.tdp-readout[b-hfchdig6y5] {
    display: grid;
    grid-template-columns: minmax(7rem, 9rem) 1fr;
    gap: 0.35rem 1rem;
    margin: 0;
    align-items: baseline;
}

.tdp-readout dt[b-hfchdig6y5] {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--nwc-text-muted);
    margin: 0;
}

.tdp-readout dd[b-hfchdig6y5] {
    font-size: 0.875rem;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Lot numbers are free text and routinely wrap to a second line. */
.tdp-wrap[b-hfchdig6y5] {
    white-space: pre-wrap;
}

.tdp-swatches[b-hfchdig6y5] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.tdp-swatch[b-hfchdig6y5] {
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.2rem;
    border: 1px solid var(--nwc-border);
    display: inline-block;
    flex: none;
}
/* /Pages/Vessels/TankBlendBridgePanel.razor.rz.scp.css */
.mainBody[b-we6kdhmg75]{
  direction:flex;
flex-direction: column;
max-height:500px;
overflow-y:auto;
}
/* /Pages/Vessels/TankDipInputPanel.razor.rz.scp.css */

.bottomButtons[b-kqc5yxrv5i] {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
   gap: 5px;
   align-items: center;
   justify-content: flex-end;
}
.container[b-kqc5yxrv5i]{
   overflow-y:auto;
   max-height: 500px;
}
.container-spinner[b-kqc5yxrv5i] {
   position: relative;
   min-height: 100px;
}
.spinner[b-kqc5yxrv5i] {
   position: absolute;
   top: 50%;
   left: 50%;
}
/* /Pages/Vessels/TankSpecs.razor.rz.scp.css */
td[b-wd3xqhb77w] {
   text-align: center !important;

}
th[b-wd3xqhb77w] {
   text-align: center !important;
   background-color: var(--vessel-header-bg);
   position: sticky;
   top: 0;
   z-index: var(--z-vessel-table-header);
}


table[b-wd3xqhb77w] {
   border-collapse: collapse;
   width: 100%;
}

th[b-wd3xqhb77w], td[b-wd3xqhb77w] {
   padding: 3px;
   text-align: left;
}


.wrapper[b-wd3xqhb77w] {
/*   position:absolute;
*/
   flex: 1;
  
/*   height: calc(100% - 60px);*/
   width: calc(100% - 10px); /* Subtract the height of the navbar (e.g., 60px) */
}

.table-container[b-wd3xqhb77w] {
   height: 100%;
   position: relative;
   overflow: auto;
}
.nowrap-list[b-wd3xqhb77w] {
   /*list-style-type: none;*/ /* Remove bullets from the list */
   padding: 0; /* Remove the default padding from the list */
}

   .nowrap-list li[b-wd3xqhb77w] {
      display: flex; /* Use Flexbox to lay out the label and content */
      align-items: center; /* Vertically center the label and content */
   }

   .nowrap-list label[b-wd3xqhb77w] {
      margin-right: 5px; /* Add space between the label and content */
   }
   .nowrap-list button[b-wd3xqhb77w] {
      white-space: nowrap; /* Prevent the button text from wrapping */
   }

.upper-row[b-wd3xqhb77w] {
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: var(--vessel-header-bg);
   padding: 10px 0;
   position: sticky;

   z-index: var(--z-vessel-toolbar);
}
.mainContainer[b-wd3xqhb77w]{
   border:solid 1px var(--vessel-debug-border);

}
.sticky-search[b-wd3xqhb77w] {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   background-color: var(--white);
   padding: 10px;
   z-index: var(--z-vessel-sticky-search);
   border: solid 1px var(--vessel-debug-border);
}
.flex-container[b-wd3xqhb77w] {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: solid var(--vessel-divider) 1px;
}
/* /Pages/Vineyards/MetricTrendChart.razor.rz.scp.css */
.vm-trend-card[b-oxavdr7spy] {
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.vm-trend-title[b-oxavdr7spy] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--gray-700);
    margin-bottom: var(--space-2xs);
}

/* Plot chrome (axis labels, gridlines, stat row, empty state) now lives with the shared
   Shared/Weather/WeatherTrendChart — this file only styles the card around it. */
/* /Pages/Vineyards/Picking/PickingCalendar.razor.rz.scp.css */
/* ==========================================================================
   PickingCalendar — the YMV vineyard picking calendar (/vineyards/picking).

   The grid engine is the shared <MonthCalendar>. The chrome every MonthCalendar
   consumer needs — toolbar title, weekday band cell, day-cell header, hover
   "+ Add", chip list, per-day totals — comes from the GLOBAL `.nwc-cal-*`
   family in site.css, and the status chips from the global `.nwc-chip`
   (Pattern 15). Do not re-derive any of those here: BookingCalendar already
   carries a scoped copy, and a second one is what the pre-push drift gate
   counts as duplication. This file owns only what is genuinely local to
   picking — the body split, the ledger rail, and the cancelled-pick treatment.

   The ledger rail is NOT Pattern 6 (.nwc-sidebar-split-*): that pattern is a
   75/25 split that collapses to zero inside a viewport-lock chain. This is a
   fixed-width aside added to / removed from the DOM beside a fluid main — the
   same distinct mechanic DailyFlowPanelContent's notepad panel uses, which
   LAYOUT-PATTERNS.md Pattern 6 explicitly keeps out of that family.
   ========================================================================== */

.pk-toolbar[b-s9ja5clhjb] {
    padding-top: var(--space-sm);
    background: var(--surface-default);
}

.pk-nav[b-s9ja5clhjb] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.pk-toggle[b-s9ja5clhjb] {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    margin-left: auto;
    font-size: 0.85em;
    white-space: nowrap;
}

.pk-vintage-select[b-s9ja5clhjb] {
    width: auto;
}

/* --------------------------------------------------------------------------
   Body: fluid calendar + optional fixed ledger rail.

   Grid rather than flex so the calendar column gets an implicit min-width of 0
   and cannot be pushed wider than its share by the day cells' content — the
   flex equivalent needs an explicit `min-width: 0` to avoid exactly that.
   -------------------------------------------------------------------------- */
.pk-main[b-s9ja5clhjb] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-sm);
    align-items: start;
}

.pk-calendar[b-s9ja5clhjb] {
    max-height: 76vh;
    overflow-y: auto;
    scrollbar-gutter: stable;
}

/* Day-of-week band — mirrors <MonthCalendar>'s 7-track + summary grid. Always
   ShowWeekends: picking runs any day, and a Saturday night pick is routine.

   ⚠ It sits INSIDE .pk-calendar (sticky to that scroll container), not in the
   toolbar. The toolbar spans the ledger rail as well, so a band rendered there
   is a different width than the grid and every column drifts out of line the
   moment the ledger opens — observed live on the first sandbox run. */
.pk-weekdays[b-s9ja5clhjb] {
    display: grid;
    grid-template-columns: repeat(7, 2fr) var(--mc-summary-col);
    gap: var(--space-sm);
    padding: 2px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-default);
}

.pk-summary-head[b-s9ja5clhjb] {
    font-size: 0.85em;
}

.pk-ledger[b-s9ja5clhjb] {
    width: clamp(240px, 22vw, 340px);
    max-height: 76vh;
    overflow-y: auto;
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: var(--space-xs);
}

.pk-ledger-note[b-s9ja5clhjb] {
    margin: var(--space-2xs) 0 var(--space-xs);
    font-size: 0.75em;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Day cell interior (header / add button / chip list / totals come from
   .nwc-cal-*; only the cell box and the chips themselves are local)
   -------------------------------------------------------------------------- */
.pk-cell[b-s9ja5clhjb] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 150px;
}

.pk-day-num[b-s9ja5clhjb] {
    font-weight: var(--font-weight-bold);
    font-size: 1.1em;
}

/* Button reset over the global .nwc-chip — that utility carries the padding,
   radius, size and state tinting, so only interactivity lives here. */
.pk-chip[b-s9ja5clhjb] {
    width: 100%;
    border: 0;
    text-align: left;
    justify-content: flex-start;
    cursor: pointer;
}

.pk-chip:hover[b-s9ja5clhjb] {
    filter: brightness(0.95);
}

/* Cancelled picks STAY on the calendar — struck through, not hidden. The row
   is the history, and it is exactly what someone needs when a client asks
   what happened to their pick. */
.pk-chip--cancelled[b-s9ja5clhjb] {
    text-decoration: line-through;
    opacity: 0.65;
}

.pk-chip-text[b-s9ja5clhjb] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-chip-flag[b-s9ja5clhjb] {
    flex: 0 0 auto;
    font-size: 0.9em;
}

/* Stacked label/value pairs. The summary column is ~140px — .nwc-statstrip's
   side-by-side items truncate "Reported" to "Repor…" at that width. */
.pk-summary-panel[b-s9ja5clhjb] {
    margin: 0;
    padding: var(--space-xs);
    font-size: 0.78em;
}

.pk-summary-panel dt[b-s9ja5clhjb] {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}

.pk-summary-panel dd[b-s9ja5clhjb] {
    margin: 0 0 var(--space-2xs);
    font-weight: var(--font-weight-bold);
}

/* --------------------------------------------------------------------------
   Ledger rows
   -------------------------------------------------------------------------- */
.pk-ledger-row[b-s9ja5clhjb] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    text-align: left;
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: var(--space-2xs) var(--space-xs);
    margin-bottom: var(--space-2xs);
    cursor: pointer;
}

.pk-ledger-row:hover[b-s9ja5clhjb] {
    border-color: var(--bs-primary);
}

.pk-ledger-head[b-s9ja5clhjb] {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
}

.pk-ledger-client[b-s9ja5clhjb] {
    font-weight: var(--font-weight-bold);
    font-size: 0.85em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-ledger-figures[b-s9ja5clhjb] {
    display: flex;
    justify-content: space-between;
    /* gap + wrap: at rail width the two figures butt together and read as one
       number ("0 / 1.5 t1.5 left"). Seen live on the first sandbox run. */
    gap: var(--space-xs);
    flex-wrap: wrap;
    font-size: 0.75em;
    color: var(--text-muted);
}

.pk-ledger-flags[b-s9ja5clhjb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs);
}

/* Over the goal is NORMAL, not an error — warning-toned, never danger. */
.pk-over[b-s9ja5clhjb] {
    color: var(--state-warning-fg);
    font-weight: var(--font-weight-bold);
}

/* ── Drag-to-reschedule ──────────────────────────────────────────────────────────
   ⭐ All scoped, no global stylesheet. The sibling bottling implementation needs one
   because it sets classes on document.body and appends a drop indicator to it; this
   one toggles state on the calendar's own .pk-calendar root instead, so CSS
   isolation reaches every rule. Blazor stamps the scope onto the LAST selector in a
   chain, so `.pk-calendar.is-dragging .pk-cell` resolves correctly even though
   MonthCalendar's .calendar-day sits between the two elements.
   ⚠ Desktop-only affordance by decision — there is no touch drag to style. */

/* DO NOT HOIST THIS PAIR TO site.css. It looks like textbook duplication —
   BottlingSchedule (.otherLineRow) and AppointmentListComponent (.bottlingDay)
   carry byte-identical copies — and it was tried on 2026-08-01 and reverted.
   A global `[draggable="true"] { cursor: grab }` is specificity (0,1,0), but
   Blazor stamps scoped rules with a b-attribute, so THIS file's
   `.pk-chip { cursor: pointer }` below is (0,2,0) and wins. All three
   components set cursor:pointer on the same element, so hoisting silently
   removes the grab cursor from every one of them — a compiler-invisible,
   test-invisible regression.
   ⚠ The drift gate does not argue otherwise: measured 2026-08-01, the audit
   scores 104 groups / 413 LOC identically with the copy, without it, and with
   the global — it does not count single-declaration bodies. There is no gate
   pressure here to relieve. */
.pk-chip[draggable="true"][b-s9ja5clhjb] {
    cursor: grab;
}

.pk-chip[draggable="true"]:active[b-s9ja5clhjb] {
    cursor: grabbing;
}

/* The chip being carried. Faded rather than hidden so the source day still reads as
   "this is where it came from" while the cursor is elsewhere. */
.pk-chip.is-dragging-chip[b-s9ja5clhjb] {
    opacity: 0.4;
}

/* Day under the cursor and eligible for the drop. The pick's own day never gets this
   class — highlighting a no-op drop would promise a move that never happens. */
.pk-cell.is-drop-target[b-s9ja5clhjb] {
    outline: 2px dashed var(--accent-primary);
    outline-offset: -3px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

/* Kill hover chrome mid-drag: the "+ Add" button revealing itself under the cursor
   reads as a second, competing drop affordance. */
.pk-calendar.is-dragging .nwc-cal-add-btn[b-s9ja5clhjb] {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Bin layer

   Bin chips REUSE .pk-chip for their whole box model — same width, borders,
   text truncation and click affordance — so this owns only what makes a bin
   read as a bin. Copying .pk-chip's body under a second name would be a
   duplicate the drift gate rightly counts, for no visual gain.

   ⚠ .pk-chip[draggable="true"] { cursor: grab } does NOT reach these: bin
   chips carry no draggable attribute, deliberately (see the markup), so they
   inherit .pk-chip's plain pointer — which is the honest cursor for a chip
   that opens a form and cannot be moved.
   ========================================================================== */

/* A quieter second layer, set off from the picks above it rather than merged
   into them. Bins are logistics; the picks are the schedule. */
.bn-chip-list[b-s9ja5clhjb] {
    margin-top: var(--space-2xs);
    border-top: 1px dashed var(--border-subtle);
    padding-top: var(--space-2xs);
}

/* The one mark that distinguishes a bin chip at a glance in a dense cell. */
.bn-chip[b-s9ja5clhjb] {
    border-left: 3px solid var(--border-strong);
}

/* ==========================================================================
   Field-sample layer

   Sample chips also REUSE .pk-chip's box model (see the bin-layer note above).
   They are read-only spans — Outlook authors the schedule, so there is nothing
   to open — hence the default cursor overriding .pk-chip's pointer. Like bin
   chips they carry no draggable/data-pick-id, so the drag module never binds.
   ========================================================================== */

.sm-chip-list[b-s9ja5clhjb] {
    margin-top: var(--space-2xs);
    border-top: 1px dotted var(--border-subtle);
    padding-top: var(--space-2xs);
}

.sm-chip[b-s9ja5clhjb] {
    cursor: default;
}

.sm-chip:hover[b-s9ja5clhjb] {
    filter: none;
}

.bn-day-count[b-s9ja5clhjb] {
    color: var(--text-muted);
}
/* /Pages/Vineyards/Picking/VineyardPickPanel.razor.rz.scp.css */
/* ==========================================================================
   VineyardPickPanel — the YMV pick create/edit form.

   Almost everything here comes from the form design system (Pattern 16:
   .nwc-form-grid / <FormField> / .nwc-form-actions) and the shared
   .nwc-statstrip utility, so this file owns only the two things neither
   provides: spacing for the advisory allocation strip and the over-goal
   emphasis. Do not restyle inputs here — site.css already does.
   ========================================================================== */

.pkpanel-body[b-1hbfgzbzmp] {
    padding: var(--space-sm);
}

.pkpanel-alloc[b-1hbfgzbzmp] {
    gap: var(--space-2xs);
}

/* Over the goal is NORMAL, not an error — warning-toned, never danger, and it
   never disables Save. See VineyardPickPanel's type remarks. */
.pkpanel-over[b-1hbfgzbzmp] {
    color: var(--state-warning-fg);
}

.pkpanel-note[b-1hbfgzbzmp] {
    margin: 0;
    font-size: 0.78em;
    color: var(--text-muted);
}
/* /Pages/Vineyards/VineyardBlocksTab.razor.rz.scp.css */
.vm-blocks-group[b-qmth5ilu1n] {
    margin-bottom: var(--space-xl);
}

.vm-blocks-group-header[b-qmth5ilu1n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    background: var(--surface-default);
    padding: var(--space-2xs) 0;
    z-index: 1;
}

.vm-blocks-group-header h5[b-qmth5ilu1n] {
    margin: 0;
}

.vm-blocks-table[b-qmth5ilu1n] {
    /* Widened from 900px when the vine-data columns landed (planted / age / clone / rootstock).
       Still capped rather than fluid: 8 columns of mostly-short values stretched across a 1536px
       viewport reads as a scatter, not a table. */
    max-width: 1200px;
    margin-top: var(--space-sm);
}
/* /Pages/Vineyards/VineyardDashboardTab.razor.rz.scp.css */
.vm-metrics-cards[b-wz9oldycl7] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.vm-metric-card[b-wz9oldycl7] {
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

.vm-metric-value[b-wz9oldycl7] {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--accent-primary, var(--gray-900));
}

.vm-metric-of[b-wz9oldycl7] {
    font-size: 1rem;
    font-weight: var(--font-weight-normal);
    color: var(--gray-500);
}

.vm-metric-label[b-wz9oldycl7] {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-top: var(--space-2xs);
}

.vm-dashboard-section-title[b-wz9oldycl7] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--gray-600);
    margin-bottom: var(--space-sm);
}

.vm-dashboard-table tbody tr:hover[b-wz9oldycl7] {
    background: var(--gray-50);
}
/* /Pages/Vineyards/VineyardHistoryTab.razor.rz.scp.css */
.vm-history-controls[b-6um0rkiwsd] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
}

.vm-history-block-select[b-6um0rkiwsd] {
    max-width: 320px;
}

.vm-trend-grid[b-6um0rkiwsd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.vm-history-note[b-6um0rkiwsd] {
    margin-top: var(--space-lg);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    background: var(--surface-subtle);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}
/* /Pages/Vineyards/VineyardInspector.razor.rz.scp.css */
.vm-inspector-empty[b-ln8tiip6s2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-2xl) var(--space-lg);
    color: var(--gray-500);
    text-align: center;
}

.vm-inspector-empty i[b-ln8tiip6s2] {
    font-size: 1.75rem;
    color: var(--gray-300);
}

.vm-inspector-empty p[b-ln8tiip6s2] {
    margin: 0;
    font-size: var(--font-size-sm);
}

.vm-inspector-body[b-ln8tiip6s2] {
    padding: var(--space-md);
    overflow-y: auto;
}

.vm-inspector-name[b-ln8tiip6s2] {
    margin-bottom: var(--space-3xs);
}

.vm-inspector-code[b-ln8tiip6s2] {
    color: var(--gray-500);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
}

.vm-inspector-stats[b-ln8tiip6s2] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin: var(--space-md) 0;
}

.vm-inspector-stat[b-ln8tiip6s2] {
    background: var(--surface-subtle);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    text-align: center;
}

.vm-inspector-stat-value[b-ln8tiip6s2] {
    font-size: 1.15rem;
    font-weight: var(--font-weight-bold);
    color: var(--accent-primary, var(--gray-900));
}

.vm-inspector-stat-label[b-ln8tiip6s2] {
    font-size: var(--font-size-2xs);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    margin-top: 2px;
}

.vm-inspector-section-title[b-ln8tiip6s2] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wider);
    color: var(--gray-500);
    margin: var(--space-md) 0 var(--space-2xs);
}

.vm-inspector-varietal-list[b-ln8tiip6s2] {
    list-style: none;
    margin: 0 0 var(--space-md);
    padding: 0;
    font-size: var(--font-size-sm);
}

.vm-inspector-varietal-list li[b-ln8tiip6s2] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 4px 0;
    border-bottom: 1px solid var(--gray-100);
}

.vm-inspector-actions[b-ln8tiip6s2] {
    margin-top: var(--space-lg);
}

/* Organic certification block. Estate (Yount Mill) vineyards only — see
   CcofVineyardEvidenceService for why the gate is the grower and not a parcel match. */
.vm-ccof[b-ln8tiip6s2] {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
}

.vm-ccof-head[b-ln8tiip6s2] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
}

.vm-ccof-head > i[b-ln8tiip6s2] {
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--state-success-fg);
}

.vm-ccof-title[b-ln8tiip6s2] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--state-success-fg);
}

.vm-ccof-sub[b-ln8tiip6s2] {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

.vm-ccof-facts[b-ln8tiip6s2] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px var(--space-sm);
    margin: var(--space-sm) 0 0;
    font-size: var(--font-size-xs);
}

.vm-ccof-facts dt[b-ln8tiip6s2] {
    color: var(--gray-500);
    font-weight: var(--font-weight-normal);
}

.vm-ccof-facts dd[b-ln8tiip6s2] {
    margin: 0;
    color: var(--gray-800);
}

.vm-ccof-parcel[b-ln8tiip6s2] {
    margin-top: var(--space-sm);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--gray-200);
}

.vm-ccof-parcel-head[b-ln8tiip6s2] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
}

.vm-ccof-parcel-name[b-ln8tiip6s2] {
    font-weight: var(--font-weight-semibold);
}

.vm-ccof-parcel-num[b-ln8tiip6s2] {
    color: var(--gray-500);
    font-weight: var(--font-weight-normal);
    margin-right: 4px;
}

.vm-ccof-parcel-loc[b-ln8tiip6s2] {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.vm-ccof-crops[b-ln8tiip6s2] {
    list-style: none;
    margin: var(--space-2xs) 0 0;
    padding: 0;
    font-size: var(--font-size-xs);
}

.vm-ccof-crops li[b-ln8tiip6s2] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 1px 0;
}

.vm-ccof-note[b-ln8tiip6s2] {
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

.vm-ccof-doc[b-ln8tiip6s2] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-sm);
    padding-top: var(--space-xs);
    border-top: 1px solid var(--gray-200);
    font-size: var(--font-size-xs);
    text-decoration: none;
}

.vm-ccof-doc span[b-ln8tiip6s2] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vm-ccof-doc:hover[b-ln8tiip6s2] {
    text-decoration: underline;
}

.vm-ccof-doc-ext[b-ln8tiip6s2] {
    margin-left: auto;
    flex: none;
}
/* /Pages/Vineyards/VineyardMapsTab.razor.rz.scp.css */
.vm-maps-tab[b-segbqlw4wo] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.vm-maps-meta[b-segbqlw4wo] {
    padding: var(--space-sm) var(--space-lg);
    border-bottom: 1px solid var(--gray-200);
    font-size: var(--font-size-sm);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs);
}

.vm-maps-caveat[b-segbqlw4wo] {
    margin-left: auto;
    font-style: italic;
}

.vm-maps-canvas[b-segbqlw4wo] {
    flex: 1 1 auto;
    min-height: 0;
}
/* /Pages/Vineyards/VineyardTree.razor.rz.scp.css */
.vm-tree-count-badge[b-72j4wwb7b1] {
    font-weight: var(--font-weight-normal);
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-500);
    font-size: var(--font-size-sm);
}

.vm-tree-search[b-72j4wwb7b1] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--gray-200);
}

.vm-tree-badge[b-72j4wwb7b1] {
    font-size: var(--font-size-2xs);
    margin-left: 6px;
}

/* Scope chips sit above the search box: the slice you are looking at is a coarser choice than
   the text you are filtering it by, so it reads top-down. Shares the global .nwc-filter-chip
   pill; only the row that holds them is scoped here. */
.vm-tree-scope[b-72j4wwb7b1] {
    display: flex;
    gap: 6px;
    padding: 8px 8px 0;
}

/* The count rides inside the chip rather than beside it, so "Yount Mill 7" stays one target. */
.vm-scope-chip-count[b-72j4wwb7b1] {
    margin-left: 5px;
    opacity: 0.65;
    font-variant-numeric: tabular-nums;
}
/* /Pages/Vineyards/VineyardWeatherTab.razor.rz.scp.css */
.vm-weather-grid[b-7nibijf8he] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-lg);
}

.vm-weather-card[b-7nibijf8he] {
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-lg);
}

.vm-weather-card-header[b-7nibijf8he] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.vm-weather-card-header h5[b-7nibijf8he] {
    margin: 0;
}

.vm-weather-card-time[b-7nibijf8he] {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-sm);
}

.vm-weather-card-list[b-7nibijf8he] {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--font-size-sm);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* /Pages/Vineyards/VineyardYieldTab.razor.rz.scp.css */
/* Yield tab — bespoke only where no nwc-* / pattern covers it: the per-year bar strip.
   Colors via tokens; the allocated overlay is a hatched slice INSIDE the year bar so the
   measured/allocated split is visible without a second chart. */

.vm-yield-controls[b-x8d7hz6x77] {
    display: flex;
    gap: .5rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}

.vm-yield-controls .form-select[b-x8d7hz6x77] {
    max-width: 14rem;
}

.vm-yield-years[b-x8d7hz6x77] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: .25rem;
}

.vm-yield-year-row[b-x8d7hz6x77] {
    display: grid;
    grid-template-columns: 3.2rem 1fr 5.5rem;
    align-items: center;
    gap: .5rem;
    font-size: .8rem;
}

.vm-yield-year[b-x8d7hz6x77] {
    color: var(--bs-secondary-color);
    text-align: right;
}

.vm-yield-bar-track[b-x8d7hz6x77] {
    background: var(--bs-tertiary-bg);
    border-radius: 2px;
    height: 14px;
}

.vm-yield-bar[b-x8d7hz6x77] {
    position: relative;
    height: 100%;
    border-radius: 2px;
    background: var(--bs-primary);
    overflow: hidden;
}

.vm-yield-bar.live[b-x8d7hz6x77] {
    background: var(--bs-info);
}

.vm-yield-bar-allocated[b-x8d7hz6x77] {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--bs-warning),
        var(--bs-warning) 3px,
        transparent 3px,
        transparent 6px);
}

.vm-yield-tons[b-x8d7hz6x77] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.vm-yield-legend[b-x8d7hz6x77] {
    font-size: .75rem;
    color: var(--bs-secondary-color);
    display: flex;
    align-items: center;
    gap: .35rem;
    margin-bottom: 1rem;
}

.vm-yield-chip[b-x8d7hz6x77] {
    display: inline-block;
    width: .8rem;
    height: .8rem;
    border-radius: 2px;
    margin-left: .75rem;
}

.vm-yield-chip.measured[b-x8d7hz6x77] { background: var(--bs-primary); }
.vm-yield-chip.live[b-x8d7hz6x77] { background: var(--bs-info); }
.vm-yield-chip.allocated[b-x8d7hz6x77] {
    background: repeating-linear-gradient(
        45deg,
        var(--bs-warning),
        var(--bs-warning) 3px,
        var(--bs-tertiary-bg) 3px,
        var(--bs-tertiary-bg) 6px);
}

.vm-yield-table[b-x8d7hz6x77] {
    font-size: .8rem;
}

.vm-yield-note[b-x8d7hz6x77] {
    font-size: .75rem;
    color: var(--bs-secondary-color);
}
/* /Pages/Vintrace/VintraceHistory.razor.rz.scp.css */
/* The Vintrace archive search.

   Deliberately thin: the table skeleton is the shared .nwc-data-grid, the title is .nwc-page-title,
   the empty states are .nwc-empty, the key/value block is .nwc-kv and the composition bars come
   from LotCompositionBreakdown's own .lws-* rules in site.css. What is left below is only the
   two-pane split and the honesty affordances, which no existing pattern covers. */

.vth-page[b-2huwbx1g5t] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vth-sub[b-2huwbx1g5t] {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.vth-search[b-2huwbx1g5t] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.vth-input[b-2huwbx1g5t] {
    max-width: 24rem;
    font-size: 1rem;
}

.vth-status[b-2huwbx1g5t] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* The businesses behind the hits. */
.vth-clients[b-2huwbx1g5t] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vth-client[b-2huwbx1g5t] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--panel-radius, 6px);
}

.vth-client-name[b-2huwbx1g5t] {
    font-weight: 600;
}

.vth-client-meta[b-2huwbx1g5t] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* An attribution the import could not settle. Amber, never red: the lots are real and the mapping
   is probably right — it is the confidence that is short, and red would read as an error. */
.vth-flag[b-2huwbx1g5t] {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--amber-800);
    background: var(--amber-100);
    border-radius: 3px;
    padding: 0.1rem 0.35rem;
    cursor: help;
}

.vth-split[b-2huwbx1g5t] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    min-height: 0;
}

.vth-listwrap[b-2huwbx1g5t] {
    flex: 1 1 60%;
    min-width: 0;
    max-height: 60vh;
    overflow-y: auto;
    /* The table is the one thing here allowed to scroll sideways. Without this the Blend badge -
       the last column and the one carrying the caveat - is silently clipped off the right edge on a
       narrow pane, which is exactly the column you cannot afford to lose. */
    overflow-x: auto;
}

/* .nwc-data-grid is the skeleton only — width, collapse and font size. Cell padding is
   component-scoped by design, and without it a 14-character lot code runs straight into the
   vintage beside it ("NWECAB4169BH7A2024"). */
.vth-list th[b-2huwbx1g5t],
.vth-list td[b-2huwbx1g5t] {
    padding: 0.3rem 0.65rem;
    vertical-align: baseline;
}

.vth-list th[b-2huwbx1g5t] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-default);
    text-align: left;
    border-bottom: 1px solid var(--border-default);
}

.vth-row[b-2huwbx1g5t] {
    cursor: pointer;
    border-bottom: 1px solid var(--border-subtle);
}

.vth-row:hover[b-2huwbx1g5t] {
    background: var(--surface-subtle);
}

.vth-row-on[b-2huwbx1g5t] {
    background: var(--accent-primary-soft);
}

.vth-code[b-2huwbx1g5t] {
    font-family: var(--font-mono, ui-monospace, monospace);
    white-space: nowrap;
}

/* Vintage is four characters or "NV"; never let it wrap or stretch the column. */
.vth-list td:nth-child(2)[b-2huwbx1g5t],
.vth-list th:nth-child(2)[b-2huwbx1g5t] {
    white-space: nowrap;
}

/* The flexible column: it truncates so the Blend badge beside it never has to. */
.vth-desc[b-2huwbx1g5t] {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vth-num[b-2huwbx1g5t] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.vth-badge[b-2huwbx1g5t] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    white-space: nowrap;
    background: var(--surface-muted);
    color: var(--text-secondary);
}

/* Only "blended" earns a colour. The other four buckets are ordinary and a page of coloured chips
   would flatten the one distinction worth seeing. */
.vth-badge.vth-changed[b-2huwbx1g5t] {
    background: var(--amber-100);
    color: var(--amber-800);
}

.vth-detail[b-2huwbx1g5t] {
    flex: 1 1 40%;
    min-width: 18rem;
    max-height: 60vh;
    overflow-y: auto;
    padding: 0.75rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--panel-radius, 6px);
}

.vth-detail-title[b-2huwbx1g5t] {
    margin: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 1.05rem;
}

.vth-detail-sub[b-2huwbx1g5t] {
    margin: 0.15rem 0 0.6rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.vth-detail-desc[b-2huwbx1g5t]::before {
    content: " · ";
    color: var(--text-muted);
}

.vth-facts[b-2huwbx1g5t] {
    margin-bottom: 0.6rem;
    font-size: 0.85rem;
}

/* The sentence above the bars. It carries the whole caveat, so it gets weight the bars do not. */
.vth-honesty[b-2huwbx1g5t] {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    line-height: 1.4;
    background: var(--surface-default);
    border-left: 3px solid var(--border-strong);
    border-radius: 0 3px 3px 0;
}

.vth-honesty.vth-changed[b-2huwbx1g5t] {
    border-left-color: var(--amber-500);
    background: var(--amber-50);
}

.vth-honesty.vth-unknown[b-2huwbx1g5t] {
    border-left-color: var(--border-default);
    color: var(--text-muted);
}

.vth-unspec[b-2huwbx1g5t] {
    margin: 0.5rem 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.vth-prov[b-2huwbx1g5t] {
    margin: 0.25rem 0 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* One column on a narrow screen: the detail pane is the payload, so it goes first once the two
   cannot sit side by side. */
@media (max-width: 900px) {
    .vth-split[b-2huwbx1g5t] {
        flex-direction: column-reverse;
    }

    .vth-detail[b-2huwbx1g5t],
    .vth-listwrap[b-2huwbx1g5t] {
        width: 100%;
        max-height: none;
    }
}
/* /Pages/WineLots/Manager/CreateInInnovintPanel.razor.rz.scp.css */
/* Push panel internals only — the page hosts this content in a SlidingPanel, so the panel
   chrome (backdrop, width, close button) is not this file's business. */

.wlm-push-grid[b-k6vaj0irhc] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 0.6rem;
    align-items: center;
    margin: 0.5rem 0;
}

.wlm-push-grid > label[b-k6vaj0irhc] {
    font-weight: 600;
    font-size: 0.85rem;
}

.wlm-push-section-title[b-k6vaj0irhc] {
    font-weight: 600;
    margin-top: 0.5rem;
}

.wlm-push-blockers li[b-k6vaj0irhc] {
    color: var(--nwc-danger, #b02a37);
}

.wlm-push-warnings li[b-k6vaj0irhc] {
    color: var(--nwc-warning-text, #8a6d3b);
}

.wlm-push-payload pre[b-k6vaj0irhc] {
    max-height: 30vh;
    overflow: auto;
    font-size: 0.75rem;
    background: var(--nwc-surface-alt, #f6f6f6);
    padding: 0.4rem;
}
/* /Pages/WineLots/Manager/Lenses/LotVesselStayCard.razor.rz.scp.css */
/* One tank stay on the wine lot Vessels tab. The numbers use the shared .nwc-statstrip and the
   charts bring their own scoped styles; only the card frame and its small notes live here. */

.lvs-card[b-5la1xxui3l] {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-default);
    margin-bottom: var(--space-sm);
}

.lvs-head[b-5la1xxui3l] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    width: 100%;
    padding: var(--space-xs) var(--space-md);
    border: none;
    background: none;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
}

.lvs-head:hover[b-5la1xxui3l] {
    background: var(--surface-subtle);
}

.lvs-card--open .lvs-head[b-5la1xxui3l] {
    border-bottom: 1px solid var(--border-subtle);
}

.lvs-caret[b-5la1xxui3l] {
    color: var(--text-muted);
}

.lvs-vessel[b-5la1xxui3l] {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-semibold);
}

.lvs-dur[b-5la1xxui3l],
.lvs-fill[b-5la1xxui3l] {
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

/* The fill amount rides the far right on a wide pane and wraps under on a narrow one. */
.lvs-fill[b-5la1xxui3l] {
    margin-left: auto;
}

.lvs-body[b-5la1xxui3l] {
    padding: var(--space-sm) var(--space-md) var(--space-md);
}

/* The lab plots and the SCADA plot share one column so they share one x-axis. Its max-width is
   set inline from ChartWidth -- the one number both the cap and the SCADA geometry come from. */
.lvs-charts[b-5la1xxui3l] {
    width: 100%;
}

/* The setpoint sequence is the one long value — give it the room the numbers do not need. */
.lvs-setpoints[b-5la1xxui3l] {
    flex: 3 1 12rem;
}

/* Same colours as the chart's call bands, so the number and the band read as one fact. */
.lvs-cool[b-5la1xxui3l] {
    color: var(--tbm-cool);
}

.lvs-heat[b-5la1xxui3l] {
    color: var(--tbm-heat);
}

.lvs-note[b-5la1xxui3l] {
    margin: 0 0 var(--space-sm);
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.lvs-note--warn[b-5la1xxui3l] {
    color: var(--state-warning-fg);
}

.lvs-changes[b-5la1xxui3l] {
    margin-bottom: var(--space-sm);
}

.lvs-change-list[b-5la1xxui3l] {
    margin: var(--space-2xs) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size-sm);
}

.lvs-change-list li[b-5la1xxui3l] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: 2px 0;
}

.lvs-change-when[b-5la1xxui3l] {
    min-width: 8.5rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.lvs-change-who[b-5la1xxui3l] {
    color: var(--text-muted);
}
/* /Pages/WineLots/Manager/WineLotManagerPage.razor.rz.scp.css */
/* WineLotManager — page-specific content only; shell layout is ManagerShell's (ms-*),
   shared chrome comes from nwc-* utilities. All rules wlm-prefixed. */

.wlm-filterbar[b-a2l7reuh1o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.25rem 0.5rem;
}

.wlm-search[b-a2l7reuh1o] {
    max-width: 260px;
}

.wlm-chip[b-a2l7reuh1o] {
    border: 1px solid var(--nwc-border);
    border-radius: 999px;
    background: transparent;
    font-size: 0.78rem;
    padding: 0.1rem 0.6rem;
    line-height: 1.4;
    cursor: pointer;
}

.wlm-chip.active[b-a2l7reuh1o] {
    background: var(--nwc-accent-soft, #e7f1fb);
    border-color: var(--nwc-accent, #2f6fab);
}

.wlm-chip-count[b-a2l7reuh1o] {
    opacity: 0.65;
    margin-left: 0.25rem;
}

.wlm-archived-toggle[b-a2l7reuh1o] {
    font-size: 0.75rem;
    color: var(--nwc-text-muted);
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
    margin-bottom: 0;
}

.wlm-grid-scroll[b-a2l7reuh1o] {
    overflow: auto;
    height: 100%;
}

.wlm-table th[b-a2l7reuh1o] {
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 1;
}

.wlm-row[b-a2l7reuh1o] {
    cursor: pointer;
}

.wlm-sortable[b-a2l7reuh1o] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.wlm-sort-glyph[b-a2l7reuh1o] {
    font-size: 0.65rem;
    opacity: 0.7;
}

.wlm-group-row td[b-a2l7reuh1o] {
    background: var(--nwc-surface-2, #f2f4f6);
    font-weight: 600;
    font-size: 0.8rem;
    border-top: 2px solid var(--nwc-border);
}

.wlm-group-count[b-a2l7reuh1o] {
    opacity: 0.6;
    font-weight: 400;
    margin-left: 0.4rem;
}

.wlm-groupby[b-a2l7reuh1o] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--nwc-text-muted);
    margin-bottom: 0;
}

.wlm-groupby select[b-a2l7reuh1o] {
    width: auto;
}

.wlm-created[b-a2l7reuh1o] {
    white-space: nowrap;
    font-size: 0.8rem;
}

.wlm-row.selected[b-a2l7reuh1o] {
    background: var(--nwc-accent-soft, #e7f1fb);
}

.wlm-code[b-a2l7reuh1o] {
    font-family: var(--font-family-mono);
    font-size: 0.82rem;
    white-space: nowrap;
}

.wlm-exact-flag[b-a2l7reuh1o] {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    cursor: help;
}

/* The note mark. A button, not a flag: it opens the Notes lens on that lot. Sized and spaced to
   sit inside a 33px virtualised row without changing its height - ItemSize on the Virtualize is a
   fixed number, and a taller cell desynchronises the scrollbar from the rows. */
.wlm-note-flag[b-a2l7reuh1o] {
    font-size: 0.7rem;
    margin-left: 0.3rem;
    padding: 0 0.25rem;
    border: none;
    border-radius: 3px;
    line-height: 1.2;
    background: var(--nwc-accent-soft, #e7f1fb);
    color: var(--nwc-accent, #2f6fab);
}

.wlm-note-flag i[b-a2l7reuh1o] {
    margin-right: 0.15rem;
}

.wlm-note-flag:hover[b-a2l7reuh1o] {
    background: var(--nwc-accent, #2f6fab);
    color: #fff;
}

/* Said once, above the table, when the counts could not be read. Amber rather than red: the lots
   themselves loaded fine, and only the marks on them are missing. */
.wlm-note-counts-out[b-a2l7reuh1o] {
    margin: 0 0 0.4rem;
    padding: 0.3rem 0.5rem;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    background: var(--amber-50);
    color: var(--amber-800);
}

.wlm-inspector[b-a2l7reuh1o] {
    padding: 0.5rem 0.75rem;
    overflow-y: auto;
}

.wlm-matchedby[b-a2l7reuh1o] {
    font-size: 0.75rem;
    color: var(--nwc-text-muted);
    margin-left: 0.5rem;
}

.wlm-section-title[b-a2l7reuh1o] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--nwc-text-muted);
    margin: 0.9rem 0 0.25rem;
}

.wlm-vessels[b-a2l7reuh1o] {
    font-size: 0.8rem;
    white-space: pre-wrap;
}

.wlm-action-message[b-a2l7reuh1o] {
    font-size: 0.78rem;
    color: var(--nwc-text-muted);
    padding: 0.15rem 0.5rem 0.35rem;
}

.wlm-actions[b-a2l7reuh1o] {
    display: flex;
    gap: 0.4rem;
    margin: 0.6rem 0 0.2rem;
}

.wlm-candidates[b-a2l7reuh1o] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.wlm-candidate[b-a2l7reuh1o] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: space-between;
}

/* Tier-0 exact match: visually separated from the fuzzy resolver rows above/below it, so a
   confident pairing never reads as one more scored guess. */
.wlm-candidate-exact[b-a2l7reuh1o] {
    border-left: 3px solid var(--bs-success);
    padding-left: 0.4rem;
}

.wlm-manual-link[b-a2l7reuh1o] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    max-width: 320px;
}

/* .wlm-newlot-host is GONE (2026-09-16). Both panels it hosted are SlidingPanels now, which
   is what the rest of the app does here. It was also this page's private copy of the shape
   site.css hoisted as .nwc-dialog-host — that hoist's comment said it would go "whenever that
   page is next touched", and this was the touch. ⛔ Do not reintroduce a bespoke centred host:
   use SlidingPanel, or .nwc-dialog-host if a centred dialog is genuinely wanted. */

/* Pointer where the duplicated lot facts used to be. The inspector is the reconcile surface
   now; everything about the wine itself lives in the centre profile, and saying so beats
   leaving a reader wondering which of two panes was the real one. */
.wlm-inspector-note[b-a2l7reuh1o] {
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    line-height: 1.45;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border-subtle);
    margin-top: 0.5rem;
}
/* /Pages/WineLots/Manager/WineLotProfile.razor.rz.scp.css */
/* WineLotProfile — the centre pane's own chrome. The lens bodies style themselves; what is here
   is the header strip, the lens tab row and the scroll contract.
   State pills come from the shared .nwc-chip family in site.css, not from here. */

.wlp-head[b-obsofbhtba] {
    align-items: baseline;
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
}

.wlp-back[b-obsofbhtba] {
    flex: 0 0 auto;
    padding: 0;
    text-decoration: none;
}

/* The lot's one header action, pushed to the end of the first line; the facts wrap below it. */
.wlp-send[b-obsofbhtba] {
    flex: 0 0 auto;
    margin-left: auto;
}

.wlp-code[b-obsofbhtba] {
    font-family: var(--font-family-mono);
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
}

.wlp-archived[b-obsofbhtba] {
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

/* The identity line. It wraps to its own row rather than truncating: these are the facts someone
   opened the lot to read, and an ellipsis in the middle of them is worse than a second line. */
.wlp-facts[b-obsofbhtba] {
    color: var(--gray-600);
    flex: 1 1 100%;
    font-size: var(--font-size-md);
}

.wlp-lenses[b-obsofbhtba] {
    border-bottom: 1px solid var(--gray-200);
    display: flex;
    gap: 2px;
    padding: 0 8px;
}

/* ⛔ min-height:0 is what makes the overflow real. Without it a flex child's default
   min-height:auto floors it at content height, the pane grows past .ms-pane-grid's
   overflow:hidden, and the tail of a long timeline is DELETED rather than scrolled. */
.wlp-body[b-obsofbhtba] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 12px;
}

/* ============================================================================================
   THE SHARED LENS VOCABULARY.

   Six lens components render into .wlp-body, and every one of them needs a section heading, an
   empty-state sentence, a mono lot/vessel code and a dense table. Written ONCE here behind
   ::deep instead of six near-identical scoped sheets -- which is also what keeps the
   css-duplicate-audit gate's count going down rather than up, and it is why lens seven costs a
   couple of selectors at the foot of this file rather than a new sheet.

   How this reaches a child component: .wlp-body is written in THIS component's markup, so Blazor
   stamps this component's scope attribute onto it. `.wlp-body ::deep X` compiles to
   `.wlp-body[b-xxxxx] X` -- an ordinary descendant selector under a scoped ancestor, which does
   match markup a child rendered.

   The rule that catches people: a bare `.wlp-note { }` here would compile to `.wlp-note[b-xxxxx]`
   and match NOTHING a lens rendered, because the scope attribute is stamped per-COMPONENT, never
   inherited by a child's own elements. Every selector below must stay under `.wlp-body ::deep`.
   ============================================================================================ */

/* A sentence, not a blank card. Every lens says WHY it has nothing rather than showing an empty
   box -- an empty card on every lot is what made the page this one replaces useless. */
.wlp-body[b-obsofbhtba]  .wlp-note {
    color: var(--gray-600);
    margin: 0 0 10px;
    max-width: 62ch;
}

.wlp-body[b-obsofbhtba]  .wlp-section {
    border-bottom: 1px solid var(--gray-200);
    color: var(--gray-700);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-wide);
    margin: 14px 0 6px;
    padding-bottom: 3px;
    text-transform: uppercase;
}

.wlp-body[b-obsofbhtba]  .wlp-section:first-child {
    margin-top: 0;
}

/* Two columns where there is room, one where there is not. The centre pane is ~940px with the
   inspector collapsed and ~640px with it open, so this has to survive both. */
.wlp-body[b-obsofbhtba]  .wlp-cols {
    display: grid;
    gap: 0 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.wlp-body[b-obsofbhtba]  .wlp-table {
    font-size: var(--font-size-sm);
    margin-bottom: 0;
}

.wlp-body[b-obsofbhtba]  .wlp-table th {
    color: var(--gray-600);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    white-space: nowrap;
}

.wlp-body[b-obsofbhtba]  .wlp-mono {
    font-family: var(--font-family-mono);
}

.wlp-body[b-obsofbhtba]  .wlp-nowrap {
    white-space: nowrap;
}

/* Innovint composes this line itself -- "TK521 (4,614gal), 2 barrels in A5, 7 kegs in Bin 90".
   It is the answer to the daily question, so it gets read like a heading, not like body text. */
.wlp-body[b-obsofbhtba]  .wlp-vessel-summary {
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-md);
    padding: 8px 10px;
}

/* NWC's own answer, shown only where Innovint has none. Dashed rather than solid because it is a
   weaker statement than the line above it -- a vessel someone typed here, or merely the booking's
   plan -- and the caveat underneath says which. ⛔ Do not unify this with the rule above: reading
   identical to Innovint's placement is precisely the confusion it must not cause. */
.wlp-body[b-obsofbhtba]  .wlp-nwc-location {
    border-style: dashed;
    color: var(--text-secondary);
}


.wlp-body[b-obsofbhtba]  .wlp-pdf {
    flex: 0 0 auto;
}

/* ---- Timeline ---------------------------------------------------------------------------- */

/* Date rail on the left, everything that happened that day on the right. The date column is
   fixed so the action types line up down the page and the eye can scan one column. */

.wlp-body[b-obsofbhtba]  .wlp-tl-item {
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    gap: 10px;
    padding: 6px 0;
}

.wlp-body[b-obsofbhtba]  .wlp-tl-when {
    color: var(--gray-500);
    flex: 0 0 58px;
    font-size: var(--font-size-sm);
    padding-top: 1px;
}

.wlp-body[b-obsofbhtba]  .wlp-tl-body {
    flex: 1 1 auto;
    min-width: 0;
}

.wlp-body[b-obsofbhtba]  .wlp-tl-head {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wlp-body[b-obsofbhtba]  .wlp-tl-type {
    font-weight: var(--font-weight-semibold);
}

.wlp-body[b-obsofbhtba]  .wlp-tl-meta {
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

.wlp-body[b-obsofbhtba]  .wlp-tl-detail {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 1px 0 1px 2px;
}

/* Analyte + value stay glued together: "pH 3.62 TA 6.1" across a wrap boundary is a misread
   waiting to happen, and these are the numbers lab decisions are made on. */
.wlp-body[b-obsofbhtba]  .wlp-tl-analyte {
    display: inline-flex;
    gap: 4px;
    white-space: nowrap;
}

.wlp-body[b-obsofbhtba]  .wlp-tl-pending {
    color: var(--gray-500);
    font-style: italic;
}

.wlp-body[b-obsofbhtba]  .wlp-tl-note {
    color: var(--gray-700);
    font-style: italic;
}

/* ---- Lineage ----------------------------------------------------------------------------- */


/* Indent carries the generation. --wlp-ln-depth is set per row from the walk, so a grandparent
   sits under its parent without the markup having to nest (and without a component that
   instantiates itself to render the tree). */
.wlp-body[b-obsofbhtba]  .wlp-ln-row {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 3px 0 3px calc(var(--wlp-ln-depth, 0) * 18px);
}

.wlp-body[b-obsofbhtba]  .wlp-ln-lot {
    background: none;
    border: 0;
    color: var(--text-link);
    cursor: pointer;
    padding: 0;
    text-align: left;
}

.wlp-body[b-obsofbhtba]  .wlp-ln-lot:hover {
    text-decoration: underline;
}

/* ---- Analysis ---------------------------------------------------------------------------- */


/* The latest reading of each analyte, as cards. They wrap rather than scroll: a lot with eight
   analytes is normal, and a horizontal scroller hides the ninth from someone who never thinks to
   drag it. */
.wlp-body[b-obsofbhtba]  .wlp-an-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 4px;
}

.wlp-body[b-obsofbhtba]  .wlp-an-card {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    min-width: 120px;
    padding: 6px 10px;
}

.wlp-body[b-obsofbhtba]  .wlp-an-type {
    color: var(--gray-600);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
}

/* The number is the whole reason the card exists -- it reads from across a cellar aisle. */
.wlp-body[b-obsofbhtba]  .wlp-an-value {
    font-size: 1.15rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.wlp-body[b-obsofbhtba]  .wlp-an-when {
    color: var(--gray-600);
    font-size: var(--font-size-xs);
}

/* A reading from an earlier round than the lot's newest (the crush panel beside today's Brix):
   still shown -- it IS the latest of its kind -- but it must not read as current. The value
   greys rather than the whole card fading, so the number stays legible. */
.wlp-body[b-obsofbhtba]  .wlp-an-card--stale {
    border-style: dashed;
}

.wlp-body[b-obsofbhtba]  .wlp-an-card--stale .wlp-an-value {
    color: var(--gray-500);
}

/* Brix, Temp and Other each open with a real gutter. Right-aligned numbers in adjacent narrow
   columns otherwise touch: a day with two temperatures ("65 °F · 65.8 °F") read as the Brix
   column's overflow. Measured on screen at 1536x695, lot HWI26CABLCMIX, 2026-09-26. */
.wlp-body[b-obsofbhtba]  .wlp-an-num {
    font-variant-numeric: tabular-nums;
    padding-left: 1.5rem;
}

/* The non-ferment analytes of one sample day, as label + value pairs that wrap. The cell keeps a
   floor because the footnote column below takes the table's slack: without one, a panel day of
   eight analytes stacked one pair per line in a 255px column beside 400px of empty space. */
.wlp-body[b-obsofbhtba]  .wlp-an-other-cell {
    min-width: 26rem;
}

.wlp-body[b-obsofbhtba]  .wlp-an-other {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
}

.wlp-body[b-obsofbhtba]  .wlp-an-pair {
    white-space: nowrap;
}

.wlp-body[b-obsofbhtba]  .wlp-an-pair-label {
    color: var(--gray-600);
}

/* "Recorded 9/3/26" -- only ever present when entry and sample dates differ, so it must read as a
   footnote and never compete with the reading it qualifies.

   width:100% makes this LAST column swallow the table's slack. Without it the slack lands on the
   analyte column and pushes the right-aligned value a third of the pane away from the analyte it
   belongs to -- "Volatile acidity .............. 0.62 g/L" is a long eye-travel on a row someone
   reads at a glance. Measured on screen at 1536x695, lot HWIZIN4285LC2, 2026-09-15. */
.wlp-body[b-obsofbhtba]  .wlp-an-late {
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    white-space: nowrap;
    width: 100%;
}

/* ---- Additions --------------------------------------------------------------------------- */

/* The totals strip reuses the Analysis cards (.wlp-an-*) as-is: an additive's total and an
   analyte's latest reading are the same shape -- a name, a number, a line of when. */

/* Type, rate and "no work order": context for the line, never competing with the amount. */
.wlp-body[b-obsofbhtba]  .wlp-ad-quiet {
    color: var(--gray-500);
}

/* The last column swallows the table's slack so it does not land between the additive and its
   amount -- the same eye-travel the Analysis table's last column exists to prevent. */
.wlp-body[b-obsofbhtba]  .wlp-ad-wo {
    width: 100%;
}

/* ...which squeezes every other column to its narrowest word. The additive's name is what the row
   is about, so it keeps room to read on one or two lines instead of four. */
.wlp-body[b-obsofbhtba]  .wlp-ad-name {
    min-width: 16rem;
}

/* ---- Composition ------------------------------------------------------------------------- */


.wlp-body[b-obsofbhtba]  .wlp-cp-rows {
    list-style: none;
    margin: 0;
    padding: 0 0 4px;
}

/* Name, bar, percentage -- a grid, so every bar in the section starts and ends on the same two
   lines. Ragged bar starts make two varietals of the same size look different. */
.wlp-body[b-obsofbhtba]  .wlp-cp-row {
    align-items: center;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(90px, 14em) 1fr auto;
    padding: 3px 0;
}

/* There is deliberately NO .wlp-cp-name rule. The name cell needs the truncate trio and nothing
   else, and that trio is .nwc-truncate in site.css -- the css-duplicate-audit gate caught a local
   copy of it here and it is applied in the markup instead. */

/* CAB, SCV, RIGC -- the fragment that turns up inside a lot code. Muted and mono so it reads as an
   identifier rather than part of the varietal's name.

   The gap lives HERE, not as a literal space in markup. Razor trims the whitespace between `@s.Name`
   and a following `@if` block, so the bar rows rendered "ZinfandelZIN" while the matrix table -- whose
   space is on the same source line -- rendered "Zinfandel ZIN". Measured on screen, lot HWIZIN4285LC2,
   2026-09-15. One rule means the two can't drift apart again. */
.wlp-body[b-obsofbhtba]  .wlp-cp-abbr {
    color: var(--gray-500);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    margin-left: 4px;
}

.wlp-body[b-obsofbhtba]  .wlp-cp-bar {
    background: var(--gray-200);
    border-radius: 4px;
    display: block;
    height: 8px;
    overflow: hidden;
}

/* --wlp-cp-pct is set per row from the row's own percentage (0-100, invariant-formatted in the
   code-behind). calc() turns it into a width without the markup having to carry a unit. */
.wlp-body[b-obsofbhtba]  .wlp-cp-fill {
    background: var(--accent-primary);
    display: block;
    height: 100%;
    width: calc(var(--wlp-cp-pct, 0) * 1%);
}

.wlp-body[b-obsofbhtba]  .wlp-cp-pct {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The provenance sentence. It sits under the content it dates, quieter than the note style it
   builds on -- present on every render, including the empty one, which is the point. */
.wlp-body[b-obsofbhtba]  .wlp-cp-fresh {
    border-top: 1px solid var(--gray-200);
    margin-top: 8px;
    padding-top: 6px;
}
/* /Pages/WineLots/Manager/WineLotRail.razor.rz.scp.css */
/* WineLotRail — deltas only. The rail's shape comes from the shared tree vocabulary
   (.nwc-tree-list / .nwc-tree-item / .nwc-tree-count / .nwc-tree-empty in site.css, the same
   one VineyardTree and CategoryTree use) and from ManagerShell's .ms-pane-tree. What is left
   here is what a two-level LOT rail needs and a one-level category tree does not. */

.wlr-modes[b-usdvpwgss3] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px 0;
}

.wlr-search[b-usdvpwgss3] {
    padding: 6px 8px;
}

/* ⛔ Every row is EXACTLY 26px, which is what makes Virtualize's ItemSize="26" true rather than
   estimated. .nwc-tree-item's own `padding: 5px 10px` leaves the height to the content, so a
   leaf (mono code + meta) and a group (label + count pill) would settle at different heights and
   Virtualize would drift — visibly, as the list scrolls past its own end. */
.wlr-tree .nwc-tree-item[b-usdvpwgss3] {
    box-sizing: border-box;
    gap: 6px;
    height: 26px;
    padding-block: 0;
}

.wlr-caret[b-usdvpwgss3] {
    flex: 0 0 12px;
    font-size: var(--font-size-xs);
    text-align: center;
}

/* A lot under an expanded client. The indent is the only thing saying "this belongs to that". */
.wlr-leaf.nested[b-usdvpwgss3] {
    padding-left: 26px;
}

/* Wine lots / Fruit lots / Case goods inside a client: one indent in, caret under the client's
   label, and a size smaller so the client stays the thing the eye lands on. ⛔ No color here:
   this scoped rule outranks .nwc-tree-item:hover, so a color would kill the hover highlight. */
.wlr-group.wlr-sub[b-usdvpwgss3] {
    font-size: var(--font-size-sm);
    padding-left: 26px;
}

/* A lot under a lot-kind header: one more indent than .nested. */
.wlr-leaf.wlr-deep[b-usdvpwgss3] {
    padding-left: 42px;
}

.wlr-code[b-usdvpwgss3] {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
}

.wlr-meta[b-usdvpwgss3] {
    color: var(--gray-500);
    flex: 0 0 auto;
    font-size: var(--font-size-xs);
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Reconcile state, at rail scale. The grid and profile render the same four states as shared
   .nwc-chip pills; at 26px a pill does not fit, so each one's foreground token becomes a dot.
   Same four states, same TOKENS (so they cannot drift apart), one shared source for the suffix
   (WineLotStateDisplay.Css) so the rail can never disagree with the grid about which is which. */
.wlr-dot[b-usdvpwgss3] {
    border-radius: 50%;
    flex: 0 0 7px;
    height: 7px;
    width: 7px;
}

/* A vessel InnoVint says holds a lot the manager has not loaded — archived vendor-side, almost
   always. It still renders, because a vessel disappearing from a vessel search is the exact
   failure this mode exists to prevent; there is just nothing to open, so it stops looking like a
   button and its dot carries no reconcile state it cannot know. */
.wlr-leaf.wlr-orphan[b-usdvpwgss3] {
    cursor: default;
}

.wlr-dot-none[b-usdvpwgss3]     { background: var(--gray-300); }
.wlr-dot-linked[b-usdvpwgss3]   { background: var(--state-success-fg); }
.wlr-dot-nwc[b-usdvpwgss3]      { background: var(--state-neutral-fg); }
.wlr-dot-innovint[b-usdvpwgss3] { background: var(--state-info-fg); }
.wlr-dot-dup[b-usdvpwgss3]      { background: var(--state-warning-fg); }
/* /Pages/WineLots/WineLotPanel.razor.rz.scp.css */
/* ── Two-column layout ── */
.lot-layout[b-fexpaf5cya] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    height: 100%;
}

/* ShowLotList=false — the Existing Lots column is absent from the DOM, which the two-track
   template above cannot detect on its own, so the form would otherwise keep exactly the half-width
   it is meant to escape. Kept to a single declaration deliberately: css-duplicate-audit only counts
   rule bodies of 3+ declarations, so this stays floor-neutral. */
.lot-layout--single[b-fexpaf5cya] {
    grid-template-columns: 1fr;
}

/* ── Section panels ── */
.lot-panel-section[b-fexpaf5cya] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--gray-200);
    min-height: 0;
}

.lot-panel-section:last-child[b-fexpaf5cya] {
    border-right: none;
}

.section-heading[b-fexpaf5cya] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: var(--font-weight-semibold);
    font-size: 0.8rem;
    color: var(--blue-500);
    padding: 0.6rem var(--space-md);
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
    flex-shrink: 0;
}

.section-heading i[b-fexpaf5cya] {
    font-size: var(--font-size-md);
}

/* ── Lots table ── */
.lot-table-wrapper[b-fexpaf5cya] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.lot-table[b-fexpaf5cya] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}

.lot-table thead th[b-fexpaf5cya] {
    position: sticky;
    top: 0;
    background: var(--gray-50);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    padding: var(--space-sm) 0.6rem;
    border-bottom: 2px solid var(--gray-200);
    white-space: nowrap;
}

.lot-table tbody td[b-fexpaf5cya] {
    padding: 0.4rem 0.6rem;
    color: var(--gray-700);
    border-bottom: 1px solid var(--winelot-row-divider);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.lot-table tbody tr:hover td[b-fexpaf5cya] {
    background: var(--winelot-row-hover-bg);
}

.fw-500[b-fexpaf5cya] {
    font-weight: var(--font-weight-medium);
}

/* ── Form area ── */
.lot-form[b-fexpaf5cya] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--space-md);
}

/* ── Arrival + Vintage side-by-side ── */
.form-row-pair[b-fexpaf5cya] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
}

/* ── Lean booking-context strip ── */
/* .nwc-kv supplies the label/value grid; this only tightens its 110px label column
   for the ~330px drawer pane the Lean form renders in. Kept under 3 declarations
   where possible — css-duplicate-audit counts 3+ declaration bodies. */
.lot-context[b-fexpaf5cya] {
    grid-template-columns: 64px 1fr;
    margin-bottom: var(--space-sm);
    font-size: 0.85rem;
}

/* ── Lot Preview uppercase ── */
.lot-preview-input[b-fexpaf5cya] {
    text-transform: uppercase;
}

/* ── Vessel section ── */
.vessel-section[b-fexpaf5cya] {
    margin-top: var(--space-sm);
    margin-bottom: var(--space-sm);
    padding: var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-200);
}

.vessel-header[b-fexpaf5cya] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--gray-300);
    margin-bottom: 0.35rem;
}

.vessel-row[b-fexpaf5cya] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-2xs);
}

.vessel-row .btn[b-fexpaf5cya] {
    padding: 0.15rem 0.35rem;
}

.vessel-total[b-fexpaf5cya] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--gray-300);
    margin-top: 0.35rem;
    font-size: var(--font-size-md);
}

/* ── Toggle switches ── */
.toggle-group[b-fexpaf5cya] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
}

.toggle-group .form-check-label[b-fexpaf5cya] {
    font-size: var(--font-size-md);
}

/* ── Mobile: stack columns ── */
@media (max-width: 768px) {
    .lot-layout[b-fexpaf5cya] {
        grid-template-columns: 1fr;
    }

    .lot-panel-section[b-fexpaf5cya] {
        border-right: none;
        border-bottom: 1px solid var(--gray-200);
    }

    /* Caps the stacked Existing Lots table so it can't push the form off-screen. Scoped to the
       two-column case on purpose: in single mode :first-child IS the form, and capping that to
       250px would truncate the very thing this mode exists to give room to. */
    .lot-layout:not(.lot-layout--single) .lot-panel-section:first-child[b-fexpaf5cya] {
        max-height: 250px;
    }
}
/* /Pages/Winemaking/LotTaskClientRail.razor.rz.scp.css */
/* Lot Tasks board — client rail (ManagerShell tree pane). Mirrors BottlingClientRail so the
   two managers feel like one app; the signal dot is the only addition. */

.ltcr-search[b-keu9hbks3t] {
    position: relative;
    padding: 6px 8px;
    border-bottom: 1px solid var(--gray-100);
}

.ltcr-search i[b-keu9hbks3t] {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    font-size: 0.78rem;
}

.ltcr-search input[b-keu9hbks3t] {
    padding-left: 26px;
    font-size: 0.8rem;
}

.ltcr-list[b-keu9hbks3t] {
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    flex: 1;
}

.ltcr-row[b-keu9hbks3t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    appearance: none;
    background: transparent;
    border: none;
    text-align: left;
    padding: 5px 8px;
    border-radius: var(--radius-xs);
    cursor: pointer;
    color: var(--gray-700);
    font-size: 0.8rem;
}

.ltcr-row:hover[b-keu9hbks3t] {
    background: var(--gray-100);
    color: var(--gray-900);
}

.ltcr-row.selected[b-keu9hbks3t] {
    background: var(--primary-50, var(--gray-200));
    color: var(--gray-900);
    font-weight: var(--font-weight-semibold);
}

.ltcr-row.unattributed .ltcr-label[b-keu9hbks3t] {
    font-style: italic;
}

.ltcr-label[b-keu9hbks3t] {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

/* Signal dot — "is any of this client's work late", readable without opening the client. */
.ltcr-dot[b-keu9hbks3t] {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gray-300);
}
.ltcr-dot.overdue[b-keu9hbks3t] { background: var(--bs-danger); }
.ltcr-dot.soon[b-keu9hbks3t] { background: var(--bs-warning); }
.ltcr-dot.clear[b-keu9hbks3t] { background: var(--gray-300); }

.ltcr-count[b-keu9hbks3t] {
    flex-shrink: 0;
    color: var(--gray-500);
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
}

.ltcr-row.selected .ltcr-count[b-keu9hbks3t] { color: var(--gray-900); }

.ltcr-empty[b-keu9hbks3t] {
    padding: 12px 8px;
    color: var(--gray-500);
    font-size: var(--font-size-sm);
    font-style: italic;
    text-align: center;
}
/* /Pages/Winemaking/LotTaskSchedulesPanel.razor.rz.scp.css */
/* Group schedules panel. The overlay, header and width come from SlidingPanel; the form grid,
   chips and empty state are shared site.css utilities. Only the rule list and the match preview
   are specific to this panel. */

.lts-body[b-g9dn2bx9y1] {
    padding: var(--space-sm);
}

.lts-rules[b-g9dn2bx9y1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}
.lts-rule[b-g9dn2bx9y1] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}
.lts-rule.lapsed[b-g9dn2bx9y1] {
    opacity: 0.6;
}
.lts-rule-main[b-g9dn2bx9y1] {
    flex: 1;
    min-width: 0;
}
.lts-rule-title[b-g9dn2bx9y1] {
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}
.lts-rule-meta[b-g9dn2bx9y1],
.lts-rule-reason[b-g9dn2bx9y1] {
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
}
.lts-rule-reason[b-g9dn2bx9y1] {
    font-style: italic;
}
.lts-rule-actions[b-g9dn2bx9y1] {
    display: flex;
    gap: var(--space-2xs);
    flex-shrink: 0;
}

/* Match preview — the mitigation for implicit enrollment, so it is given real weight rather
   than tucked under the form. */
.lts-preview[b-g9dn2bx9y1] {
    margin-top: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-sm);
}
.lts-preview-head[b-g9dn2bx9y1] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 1.75rem;
}
.lts-preview-lots[b-g9dn2bx9y1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3xs, 2px);
    margin-top: var(--space-2xs);
    max-height: 9rem;
    overflow-y: auto;
}

@media (max-width: 700px) {
    .lts-rule[b-g9dn2bx9y1] {
        flex-wrap: wrap;
    }
    .lts-rule-actions[b-g9dn2bx9y1] {
        width: 100%;
    }
}
/* /Pages/Winemaking/LotTasksDue.razor.rz.scp.css */
/* Lot Tasks Due — scoped chrome only.
   The page shell (.nwc-list-page / -header / -filters / -grid-area), the counter strip
   (.nwc-statstrip), the pills (.nwc-chip) and the empty state (.nwc-empty) are all shared
   utilities from site.css. What is left here is the three things this page alone has:
   clickable stat tiles, the reminder cards, and due-date emphasis. */

/* The stat tiles double as the bucket filter, so they are <button>s wearing .nwc-statstrip-item.
   Resetting the button chrome rather than restyling the tile keeps one definition of the tile. */
.ltd-stat[b-xjw7ishnqf] {
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.ltd-stat:hover[b-xjw7ishnqf] {
    border-color: var(--accent-primary);
}
.ltd-stat.active[b-xjw7ishnqf] {
    border-color: var(--accent-primary);
    box-shadow: inset 0 0 0 1px var(--accent-primary);
}
.ltd-substat[b-xjw7ishnqf] {
    display: block;
    color: var(--state-danger-fg);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
}

/* Reminders — the "don't let me forget" half. Deliberately cards above the grid rather than
   rows inside it: they are not scheduled occurrences and must not read as another cadence. */
.ltd-reminders[b-xjw7ishnqf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    margin-bottom: var(--space-sm);
}
.ltd-reminder[b-xjw7ishnqf] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}
.ltd-reminder.overdue[b-xjw7ishnqf] {
    border-left-color: var(--state-danger-fg);
}
.ltd-reminder-when[b-xjw7ishnqf] {
    flex: 0 0 8.5rem;
}
.ltd-reminder-date[b-xjw7ishnqf] {
    display: block;
    font-weight: var(--font-weight-semibold);
}
.ltd-reminder-rel[b-xjw7ishnqf],
.ltd-reminder-meta[b-xjw7ishnqf] {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
}
.ltd-reminder-body[b-xjw7ishnqf] {
    flex: 1;
    min-width: 0;
}
.ltd-reminder-note[b-xjw7ishnqf] {
    margin: 2px 0;
    overflow-wrap: anywhere;
}

/* Grid */
.ltd-table th[b-xjw7ishnqf] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-default);
    font-size: var(--font-size-2xs);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
    white-space: nowrap;
}
/* ⚠ One line per row, and that is load-bearing, not cosmetic: <Virtualize ItemSize="34"> does
   its scroll arithmetic from that number, so a wrapping cell (a three-line varietal, or a task
   strip that wraps to a second line) desyncs the scrollbar from the content and the overscan
   renders the wrong window. Keep rows single-line; if a column must wrap, change ItemSize with it. */
.ltd-table td[b-xjw7ishnqf] {
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ltd-table td.ltd-wine[b-xjw7ishnqf] {
    max-width: 16rem;
}
.ltd-num[b-xjw7ishnqf] {
    text-align: right;
    white-space: nowrap;
}
.ltd-wine[b-xjw7ishnqf] {
    color: var(--text-secondary);
}
.ltd-row-unknown td[b-xjw7ishnqf] {
    color: var(--text-muted);
}

/* Task strip — the collapsed half of the board.
   One pill per task on the lot, three across at most, always on ONE line (see the ItemSize note
   above). Each pill is self-contained: what the task is, how often, and when next. What set the
   cadence and what phases it live on the pill's title, which is where the "Set by" and
   "Starting from" columns went when the grid collapsed to one row per lot. */
.ltd-tasks[b-xjw7ishnqf] {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-2xs);
    align-items: center;
}
.ltd-task[b-xjw7ishnqf] {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 1px var(--space-2xs);
    border: 1px solid var(--border-subtle);
    /* The tone lives on a left edge rather than a fill: three filled pills per row, over hundreds
       of rows, is a stripe pattern nobody can read past. */
    border-left: 3px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface-default);
    font-size: var(--font-size-2xs);
    line-height: 1.6;
    white-space: nowrap;
}
.ltd-task-name[b-xjw7ishnqf] {
    font-weight: var(--font-weight-semibold);
}
.ltd-task-every[b-xjw7ishnqf] {
    color: var(--text-muted);
}
.ltd-task-due[b-xjw7ishnqf] {
    font-weight: var(--font-weight-semibold);
}
.ltd-task--overdue[b-xjw7ishnqf] {
    border-left-color: var(--state-danger-fg);
}
.ltd-task--overdue .ltd-task-due[b-xjw7ishnqf] {
    color: var(--state-danger-fg);
}
.ltd-task--today[b-xjw7ishnqf] {
    border-left-color: var(--state-warning-fg);
}
.ltd-task--today .ltd-task-due[b-xjw7ishnqf] {
    color: var(--state-warning-fg);
}
/* ⛔ Muted, never hidden. An unanchored task is the exact thing this page exists to surface —
   for a client with no calendar rotation, stirring and sampling have no anchor source at all. */
.ltd-task--unknown[b-xjw7ishnqf] {
    background: transparent;
    border-style: dashed;
}
.ltd-task--unknown .ltd-task-due[b-xjw7ishnqf] {
    color: var(--text-muted);
    font-weight: var(--font-weight-normal);
}
.ltd-remind[b-xjw7ishnqf] {
    white-space: nowrap;
}

/* The reminder form inside the SlidingPanel. The panel supplies the overlay and header;
   this only owns padding. */
.ltd-reminder-form[b-xjw7ishnqf] {
    padding: var(--space-sm);
}

@media (max-width: 700px) {
    .ltd-reminder[b-xjw7ishnqf] {
        flex-wrap: wrap;
    }
    .ltd-reminder-when[b-xjw7ishnqf] {
        flex-basis: 100%;
    }
}
/* /Pages/Winemaking/ProjectWorkspacePage.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   ProjectWorkspacePage — Full-viewport workspace
   Embedded in the standard MainLayout (NavMenu sidebar).

   Zone vocabulary:
     Navigator  — left panel: project tree + lot explorer
     Canvas     — center: active entity sections
     Assistant  — right panel: Copilot chat
   ═══════════════════════════════════════════════════ */

/*
   Standard MainLayout wraps page body in:
     .page (flex row) > .sidebar (250px sticky 100vh) + main (flex:1) + article.content.px-4.custom
   There is NO .top-row inside <main> — the sidebar's NavMenu owns the .top-row (3.5rem).
   article.content has padding-top: 1.1rem. We cancel that with margin-top: -1.1rem so
   the workspace starts flush with the top of main. Height is the full viewport.
*/
:host[b-jpn2vrr9d6] {
    display: block;
}

.workspace-container[b-jpn2vrr9d6] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--surface-default);
    /* Cancel article.content 1.1rem top padding + .custom 0.5rem horizontal padding */
    margin: -1.1rem -0.5rem -0.5rem -0.5rem;
}

/* ─── Workspace Toolbar (spans all 3 zones) ─── */
.workspace-toolbar[b-jpn2vrr9d6] {
    height: 38px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    background: var(--surface-subtle);
    border-bottom: 1px solid var(--border-default);
    z-index: var(--z-sticky);
    overflow: hidden;
}

/* Zone above Navigator — fixed width matches the navigator panel */
.toolbar-nav[b-jpn2vrr9d6] {
    min-width: 300px;
    width: 300px;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 var(--space-md);
    flex-shrink: 0;
    height: 100%;
    border-right: 1px solid var(--border-default);
    transition: min-width 0.2s ease, width 0.2s ease, opacity 0.2s ease;
}

.toolbar-nav.collapsed[b-jpn2vrr9d6] {
    min-width: 0;
    width: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
}

/* Zone above Canvas — grows to fill remaining space */
.toolbar-context[b-jpn2vrr9d6] {
    flex: 1;
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    overflow: hidden;
    min-width: 0;
}

/* Zone above Assistant — width tracks the assistant panel */
.toolbar-actions[b-jpn2vrr9d6] {
    padding: 0 var(--space-md);
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    height: 100%;
    border-left: 1px solid var(--border-default);
    transition: min-width 0.2s ease, opacity 0.2s ease;
}

.toolbar-actions.collapsed[b-jpn2vrr9d6] {
    min-width: 0 !important;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    border-left: none;
}

.toolbar-home-link[b-jpn2vrr9d6] {
    color: var(--text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}

.toolbar-home-link:hover[b-jpn2vrr9d6] {
    color: var(--blue-500);
}

.toolbar-section-label[b-jpn2vrr9d6] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
}

.toolbar-project-name[b-jpn2vrr9d6] {
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toolbar-project-actions .btn[b-jpn2vrr9d6] {
    padding: 0.15rem var(--space-sm);
    font-size: 0.72rem;
    line-height: 1.2;
}

/* ─── Body (three-zone flex) ─── */
/* Base hoisted to global .nwc-pane-row (site.css). Mobile @media override stays scoped. */

/* ─── Navigator ─── */
/* Base shell hoisted to global .nwc-pane-side; collapsed state to .nwc-pane-collapsed (site.css). */

/* ─── Navigator Tabs ─── */
.navigator-tabs[b-jpn2vrr9d6] {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border-subtle);
    padding: 0 var(--space-sm);
    flex-shrink: 0;
}

.panel-tab[b-jpn2vrr9d6] {
    flex: 1;
    padding: 0.4rem 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: color var(--transition-default), border-color var(--transition-default);
}

.panel-tab:hover[b-jpn2vrr9d6] {
    color: var(--text-primary);
}

.panel-tab.active[b-jpn2vrr9d6] {
    color: var(--interactive-primary);
    border-bottom-color: var(--interactive-primary);
}

/* ─── Navigator Toolbar ─── */
.navigator-toolbar[b-jpn2vrr9d6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.35rem 0.6rem;
    background: var(--surface-muted);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

/* ─── Composition Chips (per-project entity-type indicators) ─── */
.project-type-chips[b-jpn2vrr9d6] {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    margin: 0 0.35rem;
}

.type-chip[b-jpn2vrr9d6] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    border-radius: 10px;
    background: var(--border-subtle);
    color: var(--text-secondary);
    font-size: 0.68rem;
    white-space: nowrap;
}

.type-chip-count[b-jpn2vrr9d6] {
    font-weight: var(--font-weight-semibold);
}

/* ─── New Conversation button ─── */
.btn-create-new[b-jpn2vrr9d6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 26px;
    height: 26px;
    margin-left: auto;
    padding: 0 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-default);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    transition: background var(--transition-default), border-color var(--transition-default);
}

.btn-create-new:hover[b-jpn2vrr9d6] {
    background: var(--border-subtle);
    border-color: var(--text-disabled);
}

.btn-create-label[b-jpn2vrr9d6] {
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
}

/* ─── Tree Search ─── */
.tree-search[b-jpn2vrr9d6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid var(--border-subtle);
    background: var(--surface-subtle);
    flex-shrink: 0;
}

.tree-search i[b-jpn2vrr9d6] {
    color: var(--text-disabled);
    font-size: var(--font-size-sm);
}

.tree-search input[b-jpn2vrr9d6] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 0.78rem;
    color: var(--text-primary);
    outline: none;
}

.tree-search input[b-jpn2vrr9d6]::placeholder {
    color: var(--text-disabled);
}

/* ─── Project Tree ─── */
/* Base hoisted to global .nwc-pane-scrolllist (site.css). Scrollbar pseudos stay scoped. */
.project-tree[b-jpn2vrr9d6]::-webkit-scrollbar { width: 5px; }
.project-tree[b-jpn2vrr9d6]::-webkit-scrollbar-track { background: transparent; }
.project-tree[b-jpn2vrr9d6]::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }

/* .tree-loading -> global .nwc-pane-loading (site.css). */

.tree-empty[b-jpn2vrr9d6] {
    padding: var(--space-xl) var(--space-md);
    text-align: center;
}

/* ─── Project Group ─── */
.project-group[b-jpn2vrr9d6] {
    border-bottom: 1px solid var(--border-subtle);
}

.project-header[b-jpn2vrr9d6] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    background: var(--surface-muted);
}

.project-header .project-status[b-jpn2vrr9d6] {
    margin-left: auto;
    flex-shrink: 0;
}

.project-name[b-jpn2vrr9d6] {
    font-size: 0.74rem;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.project-status[b-jpn2vrr9d6] {
    font-size: 0.62rem;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--radius-lg);
    padding: 0.05rem 0.4rem;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Conversation goal subtitle — muted one-liner under the project header. */
.project-goal[b-jpn2vrr9d6] {
    font-size: 0.66rem;
    color: var(--text-muted);
    line-height: 1.2;
    padding: 0.1rem 0.6rem 0.25rem;
    background: var(--surface-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-draft[b-jpn2vrr9d6]    { background: var(--state-warning-bg); color: var(--state-warning-fg); }
.status-saved[b-jpn2vrr9d6]    { background: var(--state-success-bg); color: var(--state-success-fg); }
.status-progress[b-jpn2vrr9d6] { background: var(--state-info-bg); color: var(--state-info-fg); }
.status-complete[b-jpn2vrr9d6] { background: var(--state-success-bg); color: var(--state-success-fg); }

/* ─── Workflow Node ─── */
.workflow-node-row[b-jpn2vrr9d6] {
    display: flex;
    align-items: stretch;
    position: relative;
}

.workflow-node-row .workflow-node[b-jpn2vrr9d6] {
    flex: 1 1 auto;
    min-width: 0;
}

.node-kebab[b-jpn2vrr9d6] {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.1s ease;
    position: relative;
}

.workflow-node-row:hover .node-kebab[b-jpn2vrr9d6],
.workflow-node-row:focus-within .node-kebab[b-jpn2vrr9d6],
.node-kebab.show[b-jpn2vrr9d6] {
    opacity: 1;
}

.node-kebab-btn[b-jpn2vrr9d6] {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 0 var(--space-sm);
    line-height: 1;
}

.node-kebab-btn:hover[b-jpn2vrr9d6] {
    color: var(--text-primary);
    background: var(--border-subtle);
}

.tree-delete-confirm[b-jpn2vrr9d6] {
    margin: var(--space-sm) 0.6rem;
    padding: 0.6rem var(--space-md);
    background: var(--state-danger-bg);
    border: 1px solid var(--workspace-danger-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.tree-delete-confirm p[b-jpn2vrr9d6] {
    color: var(--workspace-danger-text);
}

.workflow-node[b-jpn2vrr9d6] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem 0.4rem var(--space-lg);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background 0.1s ease;
    min-height: 32px;
}

.workflow-node:hover[b-jpn2vrr9d6] {
    background: var(--surface-muted);
    text-decoration: none;
    color: inherit;
}

.workflow-node.active[b-jpn2vrr9d6] {
    background: var(--state-info-bg);
    border-left: 3px solid var(--interactive-primary);
    padding-left: calc(var(--space-lg) - 3px);
}

.node-status-dot[b-jpn2vrr9d6] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-disabled);
    border: 1.5px solid var(--text-disabled);
}

.node-status-dot.draft[b-jpn2vrr9d6]    { background: transparent; border-color: var(--workspace-status-draft); }
.node-status-dot.saved[b-jpn2vrr9d6]    { background: var(--workspace-status-saved); border-color: var(--workspace-status-saved); }
.node-status-dot.submitted[b-jpn2vrr9d6] { background: var(--blue-500); border-color: var(--blue-500); }
.node-status-dot.active[b-jpn2vrr9d6]   { background: var(--workspace-status-saved); border-color: var(--workspace-status-active-border); }

.node-icon[b-jpn2vrr9d6] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    flex-shrink: 0;
}

.node-name[b-jpn2vrr9d6] {
    font-size: 0.76rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.node-status-badge[b-jpn2vrr9d6] {
    font-size: 0.62rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ─── Panel Toggle Buttons ─── */
.panel-toggle[b-jpn2vrr9d6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 100%;
    border: none;
    background: var(--surface-muted);
    color: var(--text-disabled);
    cursor: pointer;
    padding: 0;
    font-size: 0.6rem;
    transition: background var(--transition-default), color var(--transition-default);
    flex-shrink: 0;
}

.panel-toggle:hover[b-jpn2vrr9d6] {
    background: var(--border-default);
    color: var(--text-secondary);
}

/* Positioning context for the on-demand overlays anchored inside the body:
   the Conversations nav flyout (left) and the artifact drawer (right). */
.workspace-body[b-jpn2vrr9d6] {
    position: relative;
}

/* ─── Chat (center, primary surface) ───
   The Copilot chat fills the center. This wrapper is a NON-scrolling flex
   container (the CopilotPanel owns its own message scroll — do not give it
   overflow:auto or you get a nested scrollbar). A max-width column centers the
   conversation with neutral side gutters for the normal-Claude-session look. */
.workspace-chat[b-jpn2vrr9d6] {
    flex: 1;
    /* Conversation-priority invariant: the chat is the PRIMARY surface and must
       never be crushed below a usable width by the navigator + artifact rails.
       This floor is what the artifact yields to (it shrinks, then overlays). The
       responsive band thresholds (data-wm-narrow 1140 / data-wm-overlay 840 in
       workspaceResize.js) are computed from this 480 floor; keep them in sync. The
       JS resize clamp reads this resolved value to keep drag in sync. */
    min-width: 480px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: var(--surface-default);
}

.workspace-chat-column[b-jpn2vrr9d6] {
    width: 100%;
    max-width: 860px;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Track E: the copilot chat renders in the sibling WASM island, which glues
   itself to this spacer's viewport rect (copilotIslandBridge.trackSpacer).
   The spacer just claims the column's full box. */
.wm-chat-spacer[b-jpn2vrr9d6] {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
}

.workspace-empty[b-jpn2vrr9d6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    text-align: center;
    padding: var(--space-2xl);
}

.workspace-empty i[b-jpn2vrr9d6] {
    font-size: 2.5rem;
    opacity: 0.3;
}

.workspace-empty h6[b-jpn2vrr9d6] {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

.workspace-empty p[b-jpn2vrr9d6] {
    color: var(--text-muted);
    font-size: var(--font-size-md);
}

/* ─── Artifact panel (right, conditional tool surface) ───
   Repurposes the former assistant rail: same resizable/collapsible column, now
   hosting the pinned WorkPlanCard + the project's DynamicSectionRenderer. Wider
   default than the old chat rail since it holds project forms. */
.workspace-artifact[b-jpn2vrr9d6] {
    /* 480px is the PREFERRED width (overridable by the persisted inline width).
       flex:0 1 auto + min-width:320 lets it SHRINK toward a usable floor under
       chat-floor pressure, so the conversation keeps its min-width. Below the
       overlay breakpoint it stops sharing the row and becomes a drawer instead. */
    width: 480px;
    min-width: 320px;
    flex: 0 1 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--border-strong);
    background: var(--surface-subtle);
    transition: opacity 0.2s ease;
    /* overflow:visible so the absolutely-positioned .resize-handle (which sits
       outside the left edge to overlap the panel-toggle) is hit-testable. The
       inner .artifact-body already clips content with its own overflow:hidden,
       so this is safe. */
    overflow: visible;
    position: relative;
}

.workspace-artifact.collapsed[b-jpn2vrr9d6] {
    width: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
}

/* Header reuses the global .nwc-pane-header; add space-between so the title sits
   left and the collapse control sits right. Body reuses global .nwc-pane-body. */
.artifact-header[b-jpn2vrr9d6] {
    justify-content: space-between;
}

.artifact-title[b-jpn2vrr9d6] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Header control group — keeps Reset + Hide together at the right edge while the
   title takes the left (the header is justify-content:space-between). */
.artifact-actions[b-jpn2vrr9d6] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
}

.artifact-close[b-jpn2vrr9d6] {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: var(--text-disabled);
    cursor: pointer;
    padding: 0 0.2rem;
    line-height: 1;
    font-size: 0.8rem;
    transition: color var(--transition-default);
}

.artifact-close:hover[b-jpn2vrr9d6] {
    color: var(--text-secondary);
}

/* Scroll region inside the artifact body — hosts the pinned WorkPlanCard and/or
   the project's DynamicSectionRenderer. */
.artifact-scroll[b-jpn2vrr9d6] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--space-md);
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

.artifact-scroll[b-jpn2vrr9d6]::-webkit-scrollbar { width: 6px; }
.artifact-scroll[b-jpn2vrr9d6]::-webkit-scrollbar-track { background: transparent; }
.artifact-scroll[b-jpn2vrr9d6]::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-xs); }

/* Copilot inline overrides hoisted to global .nwc-copilot-fill (site.css);
   applied via CssClass="copilot-inline copilot-centered nwc-copilot-fill" on the
   centered chat in .workspace-chat-column. */

/* ─── Resize Handle ───
   Sits OUTSIDE the workspace-artifact's left edge (left:-10px), entirely on
   top of the .panel-toggle area (18px wide). z-index:10 means clicks in the
   handle's 10px land on the resize, leaving the leftmost 8px of panel-toggle
   for the collapse click — the two affordances no longer fight each other.
   Visible centered grip dots so the user can find the drag zone without
   hunting; subtle by default, opaque on hover/active. */
.resize-handle[b-jpn2vrr9d6] {
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
    cursor: col-resize;
    z-index: var(--z-card-overlay);
    background: transparent;
    transition: background var(--transition-default);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Persistent, discoverable grip — visible at rest (not just on hover) so the
   divider reads as a real splitter and users don't have to know to drag. */
.resize-handle[b-jpn2vrr9d6]::before {
    content: '';
    width: 4px;
    height: 44px;
    border-radius: 2px;
    background-image: radial-gradient(circle, var(--slate-500) 1.5px, transparent 2px);
    background-size: 4px 7px;
    background-repeat: repeat-y;
    opacity: 0.9;
    transition: opacity var(--transition-default), background-image var(--transition-default);
}

.resize-handle:hover[b-jpn2vrr9d6],
.resize-handle:active[b-jpn2vrr9d6] {
    background: rgba(var(--blue-500-rgb), 0.12);
}

    .resize-handle:hover[b-jpn2vrr9d6]::before,
    .resize-handle:active[b-jpn2vrr9d6]::before {
        opacity: 1;
        background-image: radial-gradient(circle, var(--interactive-primary) 1.5px, transparent 2px);
    }

/* ─── Responsive (data-attribute driven; NOT viewport media queries) ───
   workspaceLayout (workspaceResize.js) toggles data-wm-narrow / data-wm-overlay on
   .workspace-container from the ACTUAL .workspace-body width via a ResizeObserver, so
   collapsing the app sidebar reclaims space — the navigator re-docks the instant it
   fits, which a window-keyed @media query can't see. Allocation: nav 300 + chat floor
   480 + artifact min 320 + gaps → narrow <1140, overlay <840 (keep in sync with JS). */

/* Nav-collapse (project views): drop the docked navigator + its inline chevron toggle
   out of flow so the artifact stays DOCKED beside the chat. The conversation list stays
   reachable via the persistent toolbar "Conversations" flyout button (shown here) and
   the back link; the toolbar nav zone shrinks to fit them. .has-artifact gates this so
   the bare /winemaking landing keeps its navigator (there it IS the primary picker). */
.workspace-container.has-artifact[data-wm-narrow] .workspace-navigator[b-jpn2vrr9d6] {
    display: none;
}
.workspace-container.has-artifact[data-wm-narrow] [data-testid='wm-toggle-navigator'][b-jpn2vrr9d6] {
    display: none;
}
.workspace-container.has-artifact[data-wm-narrow] .toolbar-nav[b-jpn2vrr9d6] {
    width: auto;
    min-width: 0;
    opacity: 1;
    overflow: visible;
    padding: 0 var(--space-md);
    border-right: none;
}
.workspace-container.has-artifact[data-wm-narrow] .toolbar-section-label[b-jpn2vrr9d6] {
    display: none;
}
.workspace-container.has-artifact[data-wm-narrow] .wm-conversations-btn[b-jpn2vrr9d6] {
    display: inline-flex;
}

/* Conversations flyout — the SAME navigator, repositioned as a left overlay drawer on
   demand (anchored by .workspace-body position:relative) so the user is never stranded
   when the list can't dock. Higher specificity than the display:none + .nwc-pane-collapsed
   so it wins. A backdrop catches the outside-click to dismiss it. */
.workspace-container.has-artifact[data-wm-narrow] .workspace-navigator.nav-flyout-open[b-jpn2vrr9d6] {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    min-width: 300px;
    opacity: 1;
    pointer-events: auto;
    z-index: var(--z-sticky);
    box-shadow: var(--wm-nav-flyout-shadow);
}

.nav-flyout-backdrop[b-jpn2vrr9d6] {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-sticky) - 1);
    background: var(--wm-nav-flyout-backdrop-bg);
}

/* Persistent toolbar "Conversations" button — opens the flyout. Hidden by default (the
   docked navigator is right there); revealed by the narrow rule above. */
.wm-conversations-btn[b-jpn2vrr9d6] {
    display: none;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-default);
    color: var(--text-secondary);
    padding: 0.15rem 0.5rem;
    font-size: 0.78rem;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-default), border-color var(--transition-default);
}
.wm-conversations-btn:hover[b-jpn2vrr9d6] {
    background: var(--border-subtle);
    border-color: var(--text-disabled);
}

/* Empty actions zone (non-admin: no delete control) shouldn't render a stray border. */
.toolbar-actions:empty[b-jpn2vrr9d6] {
    border-left: none;
    padding: 0;
}

/* Last resort: below the width where even a collapsed-navigator layout can't fit the
   conversation floor + a docked artifact(≥320), the artifact becomes a right-anchored
   overlay DRAWER floating over the chat (which keeps full width underneath) instead of
   overflowing the row. The !important width overrides any persisted inline resize width;
   the collapsed override re-asserts width:0 over it. */
.workspace-container[data-wm-overlay] .workspace-artifact[b-jpn2vrr9d6] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(480px, 92vw) !important;
    min-width: 0 !important;
    z-index: var(--z-sticky);
    box-shadow: var(--wm-artifact-drawer-shadow);
}
.workspace-container[data-wm-overlay] .workspace-artifact.collapsed[b-jpn2vrr9d6] {
    width: 0 !important;
    min-width: 0 !important;
    box-shadow: none;
}
/* Drag-resize is meaningless for an overlay and awkward on touch */
.workspace-container[data-wm-overlay] .resize-handle[b-jpn2vrr9d6] {
    display: none;
}

/* ─── Mobile ───
   Breakpoint aligned to the app-wide 767.98px/768px (Bootstrap md) split used by
   MainLayout/NavMenu/BottomNav — NOT a standalone 640px tier, which previously
   left a 641–767px dead-band where BottomNav showed (<768px) but none of these
   overrides applied (the exact bug class MainLayout.razor.css already documents
   fixing once for the app shell itself). */
@media (max-width: 767.98px) {
    .workspace-container[b-jpn2vrr9d6] {
        /* height:100dvh (base rule above) sizes the box correctly but leaves it
           IN-FLOW, so its top edge sits wherever document flow puts it — on
           mobile that's ~56px down (MainLayout's .sidebar stacks above <main>
           in the column flex layout at this breakpoint, and NavMenu's
           .top-row.auth login bar inside it stays visible/3.5rem tall). A
           height subtraction alone (calc(100dvh - clearance)) assumes a top:0
           starting point, so it undershoots and the box's bottom edge still
           lands past the fixed BottomNav's top edge. Escaping to the viewport
           directly with position:fixed sidesteps that offset entirely instead
           of trying to keep re-deriving it — same technique already used for
           BottomNav's own bottom-sheet and the floating CopilotPanel. */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: var(--bottom-nav-clearance);
        height: auto;
        margin: 0;
        /* ⚠ MUST stay `auto` — do NOT reinstate a numeric z-index here.
           The WASM copilot island (.wm-copilot-island, site.css) is a SIBLING
           position:fixed box at z-index:10 that the bridge pins over this
           container's chat spacer; it renders the entire chat AND the
           empty-state greeting on this route. Both live in the root stacking
           context (<Routes> is a direct child of <body>), so any numeric
           z-index here outranks the island and this container's opaque
           background paints straight over it — the route rendered COMPLETELY
           BLANK on a real iPhone (2026-07-21; docs/assets/
           CC_Evidence_WinemakingMobileBlank_2026-07-21.png). Invisible on every
           desktop check because at ≥768px this container is position:static, so
           its z-index was inert and the island painted above it.
           `auto` creates no stacking context, so the island (a later sibling,
           and positioned) paints on top. Layering above is unaffected: nothing
           inside here exceeds --z-sticky (100), still far below BottomNav /
           nav-drawer / modals (990/998-999/1060). Regression guard:
           `dt ui-smoke winemaking-mobile`. */
        z-index: auto;
    }

    /* On the bare /winemaking landing route the navigator IS the primary picker
       (same rationale the .has-artifact gate documents at :691) — so hiding it
       unconditionally left a phone user with no conversation list AND no way to
       reach one, because the "Conversations" flyout button only renders inside
       @if (ProjectId.HasValue). Stack the list above the chat instead so both
       stay reachable (Jeff's call, 2026-07-21).

       A FIXED split, deliberately not a scrolling page: the copilot island is
       position:fixed and copilotIslandBridge tracks its spacer with a
       ResizeObserver plus a 500ms heartbeat — there is no scroll listener, so
       under a scrolling stack the chat would visibly lag the page by up to half
       a second. Each pane scrolls internally instead (the navigator already
       owns .nwc-pane-scrolllist), which keeps the spacer's rect stable and the
       island pinned. If you ever make this stack scroll, add a capture-phase
       scroll listener to the bridge in the same change. */
    .workspace-container:not(.has-artifact) .workspace-body[b-jpn2vrr9d6] {
        flex-direction: column;
    }

    .workspace-container:not(.has-artifact) .workspace-navigator[b-jpn2vrr9d6] {
        display: flex;
        width: 100%;
        min-width: 0;
        /* min-height:0 is load-bearing — without it a flex item refuses to
           shrink below its content and the internal scroll never engages,
           pushing the chat off the bottom of the container. */
        flex: 0 0 45%;
        min-height: 0;
        border-right: none;
        border-bottom: 1px solid var(--border-default);
    }

    .workspace-container:not(.has-artifact) .workspace-chat[b-jpn2vrr9d6] {
        flex: 1 1 auto;
        min-height: 0;
    }

    .workspace-container.has-artifact .workspace-navigator[b-jpn2vrr9d6] {
        display: none;
    }

    /* Drop the inline collapse chevron at phone width on BOTH routes. On a
       project route it controls a pane that is already hidden — the orphaned
       '‹' floating mid-screen in the device evidence above. On the landing
       route the layout is single-pane anyway, so collapsing the navigator only
       gets the user to a screen with no list and no obvious way back; the tabs,
       the "New conversation" button and the toolbar home link are the real
       navigation here. */
    [data-testid='wm-toggle-navigator'][b-jpn2vrr9d6] {
        display: none;
    }

    /* The nav zone matches the 300px navigator rail by default; the reset at
       :697 is gated on .has-artifact[data-wm-narrow], which the landing route
       never has, so it kept reserving 300px of a 390px bar (77% measured) and
       squeezed the context + actions zones out of a 38px overflow:hidden bar. */
    .toolbar-nav[b-jpn2vrr9d6] {
        width: auto;
        min-width: 0;
        padding: 0 var(--space-md);
        border-right: none;
    }

    /* Full-width drawer on phones. Needs to match the overlay rule's specificity
       (:769, .workspace-container[data-wm-overlay] .workspace-artifact) — a bare
       .workspace-artifact loses to it and the drawer rendered at 92vw, leaving a
       31px sliver of chat instead of a full sheet. Media queries add no
       specificity, so this has to win on the selector, not the @media.
       The [data-wm-overlay] .collapsed rule is more specific still, so
       collapse-to-zero keeps working. */
    .workspace-container .workspace-artifact[b-jpn2vrr9d6],
    .workspace-container[data-wm-overlay] .workspace-artifact[b-jpn2vrr9d6] {
        width: 100% !important;
        max-width: 100%;
    }

    /* The chat column's desktop floor (480px, see .workspace-chat above) exists
       to protect it from being crushed by the navigator/artifact rails — but on
       a phone the navigator is hidden and the artifact is a full-width overlay,
       so there's nothing to protect against and the floor only causes the chat
       (including the input row's textarea + send button) to render wider than
       the viewport and clip under .workspace-container's overflow:hidden. */
    .workspace-chat[b-jpn2vrr9d6] {
        min-width: 0;
    }
}

/* Pinned work-plan card slot — renders at the top of the artifact panel above
   the section list. CSS isolation in WorkPlanCard already styles the card body;
   this wrapper just gives it bottom margin so the section list breathes. */
.workspace-pinned-plan[b-jpn2vrr9d6] {
    margin-bottom: var(--space-md);
}

@media print {
    .no-print[b-jpn2vrr9d6], .no-print *[b-jpn2vrr9d6] {
        display: none !important;
    }
}
/* /Pages/Winemaking/RecurringEventPanel.razor.rz.scp.css */
.recurrence-form[b-nd2klwzn3o] {
  font-family: Arial, sans-serif;
/*  max-width: 600px;
*/  margin: auto;
  margin:0px;
  width:100%;
}

.recurrence-pattern[b-nd2klwzn3o] {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--nwc-border);
  width: 100%;
}

.recurrence-options[b-nd2klwzn3o] {
  flex: 1;
  border-right: 1px solid var(--nwc-border);
}

.weekly-options[b-nd2klwzn3o] {
  flex: 3;
}

  .recurrence-options label[b-nd2klwzn3o],
  .weekly-options label[b-nd2klwzn3o],
  .date-group label[b-nd2klwzn3o],
  .end-options label[b-nd2klwzn3o] {
    display: block;
    margin: 5px 0;
  }

.checkbox-group[b-nd2klwzn3o] {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.monthly-group[b-nd2klwzn3o] {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.date-group[b-nd2klwzn3o], .end-options[b-nd2klwzn3o] {
  display: flex;
  flex-direction: column;
}

.small-input[b-nd2klwzn3o] {
  width: 60px;
}
.form-input[type="radio"][b-nd2klwzn3o] {
  /* Resetting any applied styles to default */
  width: auto; /* Resets any previously set width */
  height: auto; /* Resets any previously set height */
  margin: 0 5px 0 0; /* Ensures a small margin to the right of the button */
  vertical-align: middle; /* Aligns radio buttons vertically in line with the text */
}
.recurrence-pattern label[b-nd2klwzn3o],
.range-of-recurrence label[b-nd2klwzn3o] {
  display: block;
  margin: 10px 0;
}

.weekly-options div[b-nd2klwzn3o],
.range-of-recurrence div[b-nd2klwzn3o] {
  margin-left: 20px;
}
.range-of-recurrence[b-nd2klwzn3o] {
  display: flex;
  justify-content: space-between; /* This will space out your columns evenly */
  align-items: center; /* This will vertically align your inputs and labels */
}

.start-column[b-nd2klwzn3o], .end-options-column[b-nd2klwzn3o], .end-by-column[b-nd2klwzn3o] {
  flex: 1; /* This will give each column an equal amount of space */
  display: flex;
  flex-direction: column; /* This will stack the elements in each column on top of each other */
}

.small-input[b-nd2klwzn3o] {
  width: 60px;
  margin-bottom: 10px; /* To provide some space between the number input and the date label */
}

.flex-container[b-nd2klwzn3o] {
  display: flex;
}

.column[b-nd2klwzn3o] {
  flex: 1;
}

.flex-column[b-nd2klwzn3o] {
  display: flex;
  flex-direction: column;
}
.inline-label[b-nd2klwzn3o] {
  display: flex;
  align-items: center; /* Aligns items vertically in the center */
  justify-content: flex-start; /* Aligns items to the start of the label */
  flex-wrap: nowrap; /* Prevents the items from wrapping */
  white-space:nowrap;
}

.end-options-column label[b-nd2klwzn3o] {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

  .end-options-column label input[type="radio"][b-nd2klwzn3o],
  .end-options-column label input[type="number"][b-nd2klwzn3o] {
    margin-right: 5px;
  }

.end-options-column input[type="number"][b-nd2klwzn3o] {
  text-align: right; /* Align text to the right */
  padding-right: 5px; /* Add padding to the right side */
  width: 75px; /* Adjust width as needed */
}

/*.end-options-column input[type="number"]::-webkit-inner-spin-button,
.end-options-column input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}*/
/* /Pages/Winemaking/ToppingCalendarPanel.razor.rz.scp.css */
/* Topping calendar panel. Overlay, header and width come from SlidingPanel; the stat strip,
   chips, pane titles and hints are shared site.css utilities. Only the reconciliation row is
   specific to this panel — and it is deliberately the same shape as .lts-rule next door, so the
   two panels read as one family. */

.tcp-body[b-4v8g2s2xpa] {
    padding: var(--space-sm);
}

.tcp-rows[b-4v8g2s2xpa] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.tcp-row[b-4v8g2s2xpa] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--border-subtle);
    border-left-width: 3px;
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

/* The severity edge carries the meaning at a glance: a client holding barrels that nobody has
   scheduled is not the same kind of finding as a wobbly cadence. */
.tcp-row--danger[b-4v8g2s2xpa] {
    border-left-color: var(--bs-danger);
}

.tcp-row--warning[b-4v8g2s2xpa] {
    border-left-color: var(--amber-500);
}

.tcp-row-main[b-4v8g2s2xpa] {
    flex: 1;
    min-width: 0;
}

.tcp-row-title[b-4v8g2s2xpa] {
    font-weight: var(--font-weight-semibold);
    overflow-wrap: anywhere;
}

.tcp-row-meta[b-4v8g2s2xpa] {
    color: var(--text-muted);
    font-size: var(--font-size-2xs);
}

@media (max-width: 700px) {
    .tcp-row[b-4v8g2s2xpa] {
        flex-wrap: wrap;
    }
}
/* /Pages/Winemaking/WinemakingSchedule.razor.rz.scp.css */
.week-calendar[b-a139efxmbv] {
  margin-top:5px;
  grid-template-rows: auto 1fr;
  height: 95vh;
  overflow-y: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.calendar-header[b-a139efxmbv], .calendar-content[b-a139efxmbv] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

.calendar-header[b-a139efxmbv] {
  position: sticky;
  top: 0;
  background-color: var(--nwc-bg-muted);
  z-index: 10;
  box-shadow: var(--wmsched-header-shadow);
  max-height: 5vh;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

  .calendar-header[b-a139efxmbv]::-webkit-scrollbar, .calendar-content[b-a139efxmbv]::-webkit-scrollbar {
    display: none;
  }

  .calendar-header > div[b-a139efxmbv], .calendar-content > div[b-a139efxmbv] {
    border: 1px solid red;
    padding: 3px;
    text-align: center;
  }

.calendar-content[b-a139efxmbv] {
  align-items: start;
  overflow-y: hidden;
  max-height: 90vh;
}

.day-column[b-a139efxmbv] {
  display: flex;
  flex-direction: column;
}

.day-number[b-a139efxmbv] {
  text-align: center;
  background-color: var(--nwc-bg-muted);
  padding: 10px;
  border-bottom: 1px solid var(--nwc-border);
}

.day-content[b-a139efxmbv] {
  flex-grow: 1;
  padding: 10px;
}

*[b-a139efxmbv] {
  box-sizing: border-box;
}

.content-column[b-a139efxmbv] {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  max-height: 80vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.button-container[b-a139efxmbv] {
  display: flex;
  flex-direction: row;
  flex-grow: 0;
  justify-content:space-between
}

.content-column[b-a139efxmbv]::-webkit-scrollbar {
  display: none;
}


.content-column > div[b-a139efxmbv], .team-cell[b-a139efxmbv], .team-cell-header[b-a139efxmbv] {
  border: 1px solid var(--nwc-border); /* Softer border color */
  padding: 3px;
  text-align: center;
  background-color: var(--wmsched-cell-bg); /* Soft blue as the base background color */
}

  .content-column > div:hover[b-a139efxmbv], .team-cell:hover[b-a139efxmbv], .team-cell-header:hover[b-a139efxmbv] {
    background: var(--wmsched-cell-hover-gradient); /* Gradient from pastel green to warm beige */
    cursor: pointer; /* Ensures it's clear these are interactive elements */
  }

  .content-column > div:active[b-a139efxmbv], .team-cell:active[b-a139efxmbv], .team-cell-header:active[b-a139efxmbv] {
    background-color: var(--wmsched-cell-active-bg); /* Light lavender for an active or selected state */
  }

/* Additional styling for the team-cell-header to differentiate from team-cell */
.team-cell-header[b-a139efxmbv] {
  display: flex;
  flex-direction:row;
  flex-wrap:nowrap;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px; /* Adds rounded corners to the header for a more polished look */
  font-weight: var(--font-weight-bold); /* Optional: makes the header text bold */
}

.btn-outline-primary[b-a139efxmbv] {
  visibility: hidden;
}

.btn-container:hover .btn-outline-primary[b-a139efxmbv] {
  visibility: visible;
}
.btn-outline-primary[b-a139efxmbv]{
  padding:3px;
}
/* /Pages/Winemaking/WinemakingSchedulePanel.razor.rz.scp.css */
.main-container[b-wdgrrc9zl5]{
  display: flex;
  flex-direction: column;
  max-height: 70vh;
  overflow-y: auto;
}

.header-row[b-wdgrrc9zl5]{
  display: flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  border-bottom: 1px solid var(--nwc-border);
}

.grey-x:hover[b-wdgrrc9zl5] {
  cursor: pointer;
}

.grey-x[b-wdgrrc9zl5] {
  width: 30px;
  height: 30px;
  background-color: grey;
  border-radius: 50%; /* Make it round */
  position: relative;
}

.blue-plus:hover[b-wdgrrc9zl5] {
  cursor: pointer;
}

.blue-plus[b-wdgrrc9zl5] {
  width: 30px;
  height: 30px;
  background-color: blue; /* Changed to blue */
  border-radius: 50%; /* Make it round */
  position: relative;
}

.red-x:hover[b-wdgrrc9zl5] {
  cursor: pointer;
}

.red-x[b-wdgrrc9zl5] {
  width: 30px;
  height: 30px;
  background-color: red; /* Changed to red */
  border-radius: 50%; /* Make it round */
  position: relative;
}

  .grey-x[b-wdgrrc9zl5]::before,
  .grey-x[b-wdgrrc9zl5]::after,
  .blue-plus[b-wdgrrc9zl5]::before,
  .blue-plus[b-wdgrrc9zl5]::after,
  .red-x[b-wdgrrc9zl5]::before,
  .red-x[b-wdgrrc9zl5]::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 12px; /* Adjust height to make it smaller */
    background-color: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .grey-x[b-wdgrrc9zl5]::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .grey-x[b-wdgrrc9zl5]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .blue-plus[b-wdgrrc9zl5]::before {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  .red-x[b-wdgrrc9zl5]::before {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .red-x[b-wdgrrc9zl5]::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
.centered-cell[b-wdgrrc9zl5] {
  text-align: center;
  vertical-align: middle;
}

  .centered-cell > div[b-wdgrrc9zl5] {
    display: inline-block;
  }

/* /Shared/BlendingLayout.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════
   BlendingLayout — Full-viewport workspace
   ═══════════════════════════════════════════════════ */

.blending-workspace[b-3tdqctj6d6] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--white);
}

/* ─── Top Bar ─── */
.blending-topbar[b-3tdqctj6d6] {
    height: 40px;
    flex-shrink: 0;
    background: var(--app-shell-gradient-h);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-md);
    z-index: var(--z-modal);
}

.topbar-left[b-3tdqctj6d6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.topbar-logo[b-3tdqctj6d6] {
    font-weight: var(--font-weight-bold);
    font-size: 0.95rem;
    color: var(--white);
    text-decoration: none;
    letter-spacing: 0.04em;
}

.topbar-logo:hover[b-3tdqctj6d6] {
    color: var(--ws-topbar-link-hover);
    text-decoration: none;
}

.topbar-nav-wrapper[b-3tdqctj6d6] {
    position: relative;
}

.topbar-nav-toggle[b-3tdqctj6d6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--on-shell-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--white);
    cursor: pointer;
    font-size: var(--font-size-lg);
    padding: 0;
    transition: background var(--transition-default), border-color var(--transition-default);
}

.topbar-nav-toggle:hover[b-3tdqctj6d6] {
    background: var(--on-shell-hover-bg-soft);
    border-color: var(--on-shell-hover-border);
}

.topbar-title[b-3tdqctj6d6] {
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    opacity: 0.85;
    letter-spacing: 0.01em;
}

/* ─── Nav Dropdown ─── */
/* .nav-dropdown-backdrop -> global .nwc-overlay-backdrop (site.css). */

.nav-dropdown[b-3tdqctj6d6] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 220px;
    background: var(--white);
    border: 1px solid var(--ws-border);
    border-radius: var(--radius-md);
    box-shadow: var(--ws-dropdown-shadow);
    z-index: var(--z-modal);
    padding: var(--space-2xs) 0;
    max-height: 70vh;
    overflow-y: auto;
}

.nav-dropdown-item[b-3tdqctj6d6] {
    display: block;
    padding: 0.4rem var(--space-md);
    color: var(--ws-text-strong);
    text-decoration: none;
    font-size: 0.82rem;
    transition: background var(--transition-fast);
    white-space: nowrap;
}

.nav-dropdown-item:hover[b-3tdqctj6d6] {
    background: var(--ws-surface-hover);
    color: var(--ws-text-strongest);
    text-decoration: none;
}

.nav-dropdown-item.active-section[b-3tdqctj6d6] {
    color: var(--app-shell-blue-bright);
    font-weight: var(--font-weight-semibold);
    background: var(--ws-active-tint);
}

/* ─── Body (three-zone flex) ─── */
/* Base hoisted to global .nwc-pane-row (site.css). */

/* ─── Left Panel ─── */
/* Base shell hoisted to global .nwc-pane-side; collapsed state to .nwc-pane-collapsed (site.css). */

/* ─── Left Panel Tabs ─── */
.left-panel-tabs[b-3tdqctj6d6] {
    display: flex;
    border-bottom: 1px solid var(--ws-divider);
    background: var(--ws-surface-hover);
    flex-shrink: 0;
}

.left-panel-tabs button[b-3tdqctj6d6] {
    flex: 1;
    padding: 0.45rem var(--space-sm);
    border: none;
    background: transparent;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--ws-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-default);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.left-panel-tabs button:hover[b-3tdqctj6d6] {
    color: var(--ws-text-strong);
    background: var(--gray-200);
}

.left-panel-tabs button.active[b-3tdqctj6d6] {
    color: var(--app-shell-blue-bright);
    border-bottom-color: var(--app-shell-blue-bright);
    background: var(--white);
}

/* .left-tab-content -> global .nwc-pane-body (site.css). */

/* ─── Panel Header ─── */
.panel-header[b-3tdqctj6d6] {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--ws-divider);
    background: var(--ws-panel-header-bg);
    flex-shrink: 0;
}


.blend-status-filter[b-3tdqctj6d6] {
    flex: 1;
    padding: 0.2rem 0.3rem;
    font-size: var(--font-size-sm);
    border: 1px solid var(--ws-border);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ws-text-strong);
    cursor: pointer;
}

.btn-new-blend[b-3tdqctj6d6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--ws-border);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--ws-text-secondary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    padding: 0;
    transition: background var(--transition-default), border-color var(--transition-default);
}

.btn-new-blend:hover[b-3tdqctj6d6] {
    background: var(--gray-200);
    border-color: var(--ws-icon-muted);
}

/* .panel-loading -> global .nwc-pane-loading (site.css). */

/* ─── Blend List ─── */
/* Base hoisted to global .nwc-pane-scrolllist (site.css). Scrollbar pseudos stay scoped. */
.blend-list[b-3tdqctj6d6]::-webkit-scrollbar { width: 5px; }
.blend-list[b-3tdqctj6d6]::-webkit-scrollbar-track { background: transparent; }
.blend-list[b-3tdqctj6d6]::-webkit-scrollbar-thumb { background: var(--ws-border); border-radius: var(--radius-xs); }

.blend-item[b-3tdqctj6d6] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0.65rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--ws-surface-hover);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.blend-item:hover[b-3tdqctj6d6] {
    background: var(--ws-surface-hover-alt);
    text-decoration: none;
    color: inherit;
}

.blend-item.active[b-3tdqctj6d6] {
    background: var(--ws-active-bg);
    border-left: 3px solid var(--app-shell-blue-bright);
    padding-left: calc(0.65rem - 3px);
}

.blend-item.archived[b-3tdqctj6d6] {
    opacity: 0.5;
}

.blend-status-dot[b-3tdqctj6d6] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;
    background: var(--ws-icon-muted);
}

.blend-status-dot.draft[b-3tdqctj6d6] { background: var(--ws-status-draft); }
.blend-status-dot.saved[b-3tdqctj6d6] { background: var(--ws-status-saved); }
.blend-status-dot.archived[b-3tdqctj6d6] { background: var(--ws-icon-muted); }

.blend-item-text[b-3tdqctj6d6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.blend-item-name[b-3tdqctj6d6] {
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--ws-text-strongest);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blend-item-meta[b-3tdqctj6d6] {
    font-size: var(--font-size-xs);
    color: var(--ws-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blend-empty[b-3tdqctj6d6] {
    padding: var(--space-xl) var(--space-md);
    text-align: center;
}

.blend-view-archived[b-3tdqctj6d6] {
    font-size: 0.72rem;
}

/* ─── Toggle Buttons ─── */
.panel-toggle[b-3tdqctj6d6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    min-width: 18px;
    height: 100%;
    border: none;
    background: var(--ws-surface-hover-alt);
    color: var(--ws-icon-muted);
    cursor: pointer;
    padding: 0;
    font-size: 0.6rem;
    transition: background var(--transition-default), color var(--transition-default);
    flex-shrink: 0;
}

.panel-toggle:hover[b-3tdqctj6d6] {
    background: var(--gray-300);
    color: var(--ws-text-secondary);
}

/* ─── Center Content ─── */
/* Base hoisted to global .nwc-pane-center (site.css). Scrollbar pseudos stay scoped. */
.blending-center[b-3tdqctj6d6]::-webkit-scrollbar { width: 6px; }
.blending-center[b-3tdqctj6d6]::-webkit-scrollbar-track { background: transparent; }
.blending-center[b-3tdqctj6d6]::-webkit-scrollbar-thumb { background: var(--ws-border); border-radius: var(--radius-xs); }

/* ─── Right Panel ─── */
.blending-right-panel[b-3tdqctj6d6] {
    width: 380px;
    min-width: 380px;
    height: 100%;
    display: flex;
    flex-direction: column;
    border-left: 2px solid var(--ws-border);
    background: var(--ws-panel-bg);
    transition: width var(--transition-default), min-width var(--transition-default), opacity var(--transition-default);
    overflow: hidden;
}

.blending-right-panel.collapsed[b-3tdqctj6d6] {
    width: 0;
    min-width: 0;
    opacity: 0;
    pointer-events: none;
}

/* .right-panel-header -> global .nwc-pane-header; .right-panel-body -> global .nwc-pane-body (site.css). */

.copilot-empty[b-3tdqctj6d6] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: var(--space-lg);
    text-align: center;
}

/* Copilot inline overrides hoisted to global .nwc-copilot-fill (site.css);
   applied via CssClass="copilot-inline nwc-copilot-fill" on the CopilotPanel. */

/* ─── Mobile ─── */
/* Breakpoint aligned to Bootstrap `md` (768px) so the 3-column workspace collapses
   at the same width the shared bottom nav (<MobileNavShell />) appears — otherwise
   641–767px would show both the desktop panels and the bottom bar at once. */
@media (max-width: 767.98px) {
    .blending-topbar[b-3tdqctj6d6] {
        height: 44px;
    }

    .blending-left-panel[b-3tdqctj6d6],
    .blending-right-panel[b-3tdqctj6d6] {
        display: none;
    }

    .panel-toggle[b-3tdqctj6d6] {
        display: none;
    }

    /* The bottom nav (<MobileNavShell />) is the single mobile entry point;
       the topbar's site-nav dropdown would duplicate it. */
    .topbar-nav-toggle[b-3tdqctj6d6] {
        display: none;
    }

    .blending-center[b-3tdqctj6d6] {
        height: auto;
        overflow: visible;
        /* Clear the fixed bottom nav bar (4rem + safe-area). */
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }
}

@media print {
    .no-print[b-3tdqctj6d6], .no-print *[b-3tdqctj6d6] {
        display: none !important;
    }
}
/* /Shared/BottomNav.razor.rz.scp.css */
/* Mobile bottom tab bar. Hidden by default; shown only under 768px (Bootstrap
   `md`, the unified nav breakpoint — see NavMenu.razor.css / MainLayout.razor.css).
   z sits above page content but below the full nav drawer (998/999), modals, and
   the copilot launcher. */
.bottom-nav[b-eykex2x970] {
    display: none;
}

@media (max-width: 767.98px) {
    .bottom-nav[b-eykex2x970] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-bottom-nav);
        display: flex;
        align-items: stretch;
        height: 4rem;
        background: var(--surface-default);
        border-top: 1px solid var(--gray-200);
        box-shadow: var(--shadow-top-sm);
        padding-bottom: env(safe-area-inset-bottom);
        transition: transform 0.25s ease; /* auto-hide on scroll (bottomNavAutoHide.js) */
    }

    /* Auto-hide: slide fully off-screen when scrolling down content. */
    .bottom-nav.bottom-nav--hidden[b-eykex2x970] {
        transform: translateY(110%);
    }
}

/* Tabs: equal width, icon over label, generous tap target. ::deep is required because
   the primary tabs are <NavLink> CHILD components — their rendered <a> does not inherit
   this component's CSS-isolation scope, so a plain `.bottom-nav-tab` rule would miss them
   (only the More <button>, which is in this component's own markup, would match).
   Label font is small (0.56rem) so all 6 slots fit at 360px without overflow. */
.bottom-nav[b-eykex2x970]  .bottom-nav-tab {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 44px;
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--gray-500);
    font-size: 0.5625rem;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--transition-default);
}

.bottom-nav[b-eykex2x970]  .bottom-nav-tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-nav[b-eykex2x970]  .bottom-nav-tab i {
    font-size: 1.15rem;
}

/* .active is set by NavLink routing (primary tabs) / by sheet-open + MoreIsActive (More). */
.bottom-nav[b-eykex2x970]  .bottom-nav-tab.active {
    color: var(--blue-500);
}

/* ── More slide-up sheet (mobile only) ──────────────────────────────────────
   Replaces "More opens the full drawer": a tidy curated sheet of common
   destinations + a Full-menu row that hands off to the existing NavMenu drawer.
   Sits at --z-modal (above the bar 990); the full drawer (998/999) only appears
   after the sheet closes, so no conflict. */
.bottom-sheet-backdrop[b-eykex2x970] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--overlay-backdrop-soft);
}

.bottom-sheet[b-eykex2x970] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-modal);
    background: var(--surface-default);
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
    box-shadow: var(--shadow-top-lg);
    padding: 6px 0 calc(8px + env(safe-area-inset-bottom));
    animation: bottom-sheet-up-b-eykex2x970 0.22s ease;
}

@keyframes bottom-sheet-up-b-eykex2x970 {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.bottom-sheet-handle[b-eykex2x970] {
    width: 36px;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--gray-300);
    margin: 4px auto 8px;
}

.bottom-sheet-items[b-eykex2x970] {
    display: flex;
    flex-direction: column;
}

/* Rows: ::deep because the curated rows are <NavLink> children; the rule also matches
   the Full-menu <button> (a descendant in this component's own markup). */
.bottom-sheet[b-eykex2x970]  .bottom-sheet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 48px;
    padding: 12px 18px;
    border: 0;
    background: none;
    text-align: left;
    text-decoration: none;
    color: var(--gray-900);
    font-size: var(--font-size-md);
    cursor: pointer;
}

.bottom-sheet[b-eykex2x970]  .bottom-sheet-row:hover {
    background: var(--gray-50);
}

.bottom-sheet[b-eykex2x970]  .bottom-sheet-row > i:first-child {
    width: 1.5rem;
    text-align: center;
    font-size: 1.15rem;
    color: var(--gray-600);
}

.bottom-sheet[b-eykex2x970]  .bottom-sheet-row .bottom-sheet-chev {
    margin-left: auto;
    color: var(--gray-400);
    font-size: 0.85rem;
}

.bottom-sheet[b-eykex2x970]  .bottom-sheet-row.active {
    color: var(--blue-500);
}

.bottom-sheet[b-eykex2x970]  .bottom-sheet-row.active > i:first-child {
    color: var(--blue-500);
}

.bottom-sheet[b-eykex2x970]  .bottom-sheet-fullmenu {
    border-top: 1px solid var(--gray-200);
    margin-top: 4px;
    color: var(--gray-700);
}
/* /Shared/CaseStickerDesigner/CaseStickerDesignerPanel.razor.rz.scp.css */
.csd-root[b-795rhu4j4b] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.csd-loading[b-795rhu4j4b] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
}

.csd-layout[b-795rhu4j4b] {
    display: grid;
    grid-template-columns: 220px 1fr 260px;
    gap: 12px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 12px;
}

.csd-rail[b-795rhu4j4b] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: var(--gray-50);
    border: 1px solid var(--csd-border);
    border-radius: var(--radius-sm);
    overflow-y: auto;
}

.csd-rail-title[b-795rhu4j4b] {
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--csd-muted-fg);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 2px;
}

.csd-token-list[b-795rhu4j4b] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.csd-token-chip[b-795rhu4j4b] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--white);
    border: 1px solid var(--csd-border-input);
    border-radius: var(--radius-xs);
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
}

.csd-token-chip:hover[b-795rhu4j4b] {
    border-color: var(--csd-token-hover-border);
    background: var(--csd-token-hover-bg);
}

.csd-canvas-wrap[b-795rhu4j4b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    overflow: auto;
    background: var(--csd-border);
    border-radius: var(--radius-sm);
    gap: 8px;
}

.csd-canvas-hint[b-795rhu4j4b] {
    font-size: 11px;
    color: var(--csd-muted-fg);
    font-style: italic;
}

.csd-empty[b-795rhu4j4b] {
    font-size: 12px;
    color: var(--csd-empty-fg);
    font-style: italic;
    padding: 12px 0;
}

.csd-footer[b-795rhu4j4b] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--csd-border);
    background: var(--white);
}

[b-795rhu4j4b] .form-label-sm {
    font-size: 11px;
    margin-bottom: 2px;
    color: var(--csd-muted-body);
}
/* /Shared/ConfirmDialogPanel.razor.rz.scp.css */
.confirm-dialog-overlay[b-2q8w5drjqd] {
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop-dim);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.confirm-dialog[b-2q8w5drjqd] {
    background: var(--surface-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--confirm-dialog-shadow);
    max-width: 420px;
    width: 100%;
}

.confirm-header[b-2q8w5drjqd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px;
    border-bottom: 1px solid var(--gray-200);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xl);
}

.confirm-header i[b-2q8w5drjqd] {
    font-size: 1.3rem;
}

.confirm-body[b-2q8w5drjqd] {
    padding: 16px;
    color: var(--gray-700);
}

/* .confirm-details / .edit-instead are global (site.css), not scoped here —
   ChildContent is authored in the CALLER's .razor file, so it carries the
   caller's Blazor scope attribute, not this component's. A scoped selector
   here (even with ::deep) cannot reach elements the caller puts inside
   ChildContent. See site.css's "ConfirmDialogPanel body helpers" block. */

.confirm-footer[b-2q8w5drjqd] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid var(--gray-200);
}
/* /Shared/Contacts/BusinessCardEditor.razor.rz.scp.css */
/* The paste disclosure — .nwc-disclosure-header (site.css) styles the <summary>; this file only
   adds the small amount of layout that shape doesn't already cover. */
.bce-paste[b-8rqhqn6m0v] {
    margin-top: var(--space-md);
}

.bce-paste-body[b-8rqhqn6m0v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.bce-paste-input[b-8rqhqn6m0v] {
    width: 100%;
    min-height: 80px;
    font-size: 16px; /* iOS zoom prevention */
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    resize: vertical;
}

.bce-paste-actions[b-8rqhqn6m0v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
}

/* Says what the paste is about to do, so nobody has to discover the rule by losing something.
   Sits opposite the Fill button, and gives way to it when the panel is narrow. */
.bce-paste-note[b-8rqhqn6m0v] {
    min-width: 0;
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--text-tertiary, var(--gray-500));
}
/* /Shared/Contacts/BusinessCardPanel.razor.rz.scp.css */
/* .sp-content / .sp-body / .sp-footer come from the shared panel-layout.css (App.razor) — no
   need to redefine them here. This file only adds what that shape doesn't already cover. */

.bcard-section[b-rpzfcqvqqa] {
    margin-top: var(--space-md);
}

.bcard-review[b-rpzfcqvqqa] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2xs);
    padding: var(--space-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.bcard-review-message[b-rpzfcqvqqa] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.bcard-note[b-rpzfcqvqqa] {
    font-size: var(--font-size-xs);
    color: var(--text-tertiary, var(--gray-500));
}

/* .sp-footer (panel-layout.css) is a flex row, justify-content: flex-end — this pushes the
   hint to the left edge so Cancel/Save stay pinned right when a hint is shown. */
.bcard-hint[b-rpzfcqvqqa] {
    margin-right: auto;
}

/* ── What is already on file ───────────────────────────────────────────────────────────
   Shown when the panel is opened onto an existing business, so a match is visible where it
   is used. Deliberately neutral: the amber primitives carry no [data-theme="dark"] override
   (tokens.css:608), so "needs attention" is drawn with weight and a border, never a hue. */

.bcard-onfile[b-rpzfcqvqqa] {
    padding: var(--space-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
}

.bcard-onfile-name[b-rpzfcqvqqa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    font-weight: 600;
    color: var(--text-primary);
}

.bcard-onfile-row[b-rpzfcqvqqa] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
    margin-top: var(--space-2xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.bcard-onfile-muted[b-rpzfcqvqqa] {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.bcard-onfile-tag[b-rpzfcqvqqa] {
    padding: 0 var(--space-xs);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-pill);
    background: var(--surface-default);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* A bare record, or a role nobody has ever set. Heavier border + italics rather than a colour. */
.bcard-onfile-thin[b-rpzfcqvqqa] {
    border-color: var(--border-strong);
    font-style: italic;
    color: var(--text-muted);
}

.bcard-onfile-link[b-rpzfcqvqqa] {
    display: inline-block;
    margin-top: var(--space-xs);
    font-size: var(--font-size-xs);
    color: var(--text-link);
}
/* /Shared/Contacts/PasteRevertChip.razor.rz.scp.css */
/* A quiet line under the field it belongs to. .nwc-form-field is a flex column, so the chip
   stacks beneath the input without any layout of its own.

   Deliberately understated: this is a way back, not a call to action. Styled as text rather than
   a button so it reads as an annotation on the field — the value it names is the part that
   matters, so that is the only part with weight. */
.prc-chip[b-mx30pnc0ia] {
    display: inline-flex;
    align-items: baseline;
    align-self: flex-start;
    gap: var(--space-xs);
    max-width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--font-size-xs);
    line-height: 1.3;
    color: var(--text-tertiary, var(--gray-500));
    text-align: left;
    cursor: pointer;
}

.prc-chip:hover:not(:disabled)[b-mx30pnc0ia],
.prc-chip:focus-visible[b-mx30pnc0ia] {
    color: var(--text-primary);
    text-decoration: underline;
}

.prc-chip:disabled[b-mx30pnc0ia] {
    cursor: default;
    opacity: 0.6;
}

.prc-label[b-mx30pnc0ia] {
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex: none;
}

/* The old value is the whole point of the chip, but it must not widen the field — a long pasted
   address truncates here rather than pushing the form grid out. */
.prc-value[b-mx30pnc0ia] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: var(--font-weight-semibold);
}
/* /Shared/DailyFlowLayout.razor.rz.scp.css */
/* Full viewport height layout - no page scrollbar */
.dailyflow-container[b-wr1hj25eeq] {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* .dailyflow-content base hoisted to global .nwc-pane-row; .dailyflow-main/
   .dailyflow-sidebar mechanics hoisted to global .nwc-sidebar-split-main/
   -aside (both site.css) — see LAYOUT-PATTERNS.md Pattern 6. Only this
   instance's own transition timing remains local, below. */

/* Override Bootstrap container padding for this layout */
.content[b-wr1hj25eeq] {
  margin-top: 0;
  padding-top: 0 !important;
}

.col-9[b-wr1hj25eeq], .col-3[b-wr1hj25eeq] {
  padding: 0;
}

/* Scrollable list inside sidebar */
.scrollable-list[b-wr1hj25eeq] {
  height: 100%;
  overflow-y: auto;
  background-color: var(--gray-50);
}

/* Smooth transition for sidebar collapse — this instance's own timing
   delta from DailyFlowSlidingPanel's (0.2s ease vs the design token here). */
.dailyflow-sidebar[b-wr1hj25eeq] {
  transition: all var(--transition-default);
}

.dailyflow-main[b-wr1hj25eeq] {
  transition: flex var(--transition-default);
}

/* Clear the fixed bottom nav bar (<MobileNavShell />, 4rem + safe-area) so the last
   rows of the scrolling main aren't hidden behind it. */
@media (max-width: 767.98px) {
  .dailyflow-main[b-wr1hj25eeq] {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
  }
}
/* /Shared/DataGrid/NwcDataGrid.razor.rz.scp.css */
.nwc-datagrid[b-divib39lc7] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    /* var(--white), not var(--surface-default): several consuming pages
       (e.g. BulkWineDesk) aren't dark-mode-integrated yet, so flipping this
       wrapper dark while their own CSS stays hardcoded-light produced a
       jarring half-dark table (caught by W2 VR — bwd-kendall-view, 22% diff).
       Revisit when DataGrid's remaining consumers get their own cohort. */
    background: var(--white);
}

/* Loading overlay — hoisted to .nwc-loading-center (site.css) */

/* Empty state */
.empty-state[b-divib39lc7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl);
    color: var(--gray-600);
}

.empty-state i[b-divib39lc7] {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

/* Desktop table */
.table-desktop[b-divib39lc7] {
    overflow-x: auto;
}

.table-desktop table[b-divib39lc7] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.table-desktop thead[b-divib39lc7] {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--gray-50);
}

.table-desktop th[b-divib39lc7] {
    padding: 0.625rem var(--space-md);
    border-bottom: 2px solid var(--gray-300);
    font-weight: var(--font-weight-semibold);
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    color: var(--gray-700);
    white-space: nowrap;
    user-select: none;
}

.table-desktop th.sortable[b-divib39lc7] {
    cursor: pointer;
}

.table-desktop th.sortable:hover[b-divib39lc7] {
    color: var(--blue-500);
}

.table-desktop th.active-sort[b-divib39lc7] {
    color: var(--blue-500);
}

.sort-icon[b-divib39lc7] {
    font-size: var(--font-size-sm);
    margin-left: var(--space-2xs);
    vertical-align: middle;
}

.table-desktop td[b-divib39lc7] {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--gray-200);
    vertical-align: middle;
    font-size: 0.875rem;
}

.table-desktop tbody tr[b-divib39lc7] {
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.table-desktop tbody tr:hover[b-divib39lc7] {
    background-color: var(--gray-50);
}

.action-header[b-divib39lc7] {
    width: 1%;
    white-space: nowrap;
}

.action-cell[b-divib39lc7] {
    white-space: nowrap;
    text-align: right;
}

/* Mobile cards */
.cards-mobile[b-divib39lc7] {
    display: none;
}

.mobile-card[b-divib39lc7] {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: var(--space-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.mobile-card:hover[b-divib39lc7] {
    background-color: var(--gray-50);
}

.card-body[b-divib39lc7] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-lg);
}

.card-field[b-divib39lc7] {
    display: flex;
    flex-direction: column;
}

.card-field.priority-1[b-divib39lc7] {
    width: 100%;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
    flex-direction: row;
    justify-content: space-between;
}

.card-field.priority-1 .card-label[b-divib39lc7] {
    display: none;
}

.card-field.priority-2[b-divib39lc7],
.card-field.priority-3[b-divib39lc7] {
    font-size: 0.875rem;
}

.card-label[b-divib39lc7] {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    color: var(--gray-600);
}

.card-actions[b-divib39lc7] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--gray-200);
}

.card-actions[b-divib39lc7]  .btn {
    min-height: 44px;
    min-width: 44px;
}

@media (max-width: 768px) {
    .table-desktop[b-divib39lc7] {
        display: none;
    }

    .cards-mobile[b-divib39lc7] {
        display: block;
    }
}
/* /Shared/DataGrid/NwcDataGridToolbar.razor.rz.scp.css */
.nwc-datagrid-toolbar[b-0rx2krgqkj] {
    padding: var(--space-md);
    background-color: var(--gray-50);
    border-bottom: 1px solid var(--gray-300);
}


.toolbar-search[b-0rx2krgqkj] {
    flex: 1;
    position: relative;
    max-width: 400px;
}

.toolbar-search .search-icon[b-0rx2krgqkj] {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-600);
    pointer-events: none;
    z-index: var(--z-base);
}

.toolbar-search input[b-0rx2krgqkj] {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
}

.toolbar-search .btn-clear[b-0rx2krgqkj] {
    position: absolute;
    right: var(--space-sm);
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--gray-600);
    cursor: pointer;
    padding: var(--space-2xs);
    line-height: 1;
}

.toolbar-search .btn-clear:hover[b-0rx2krgqkj] {
    color: var(--gray-900);
}

.toolbar-count[b-0rx2krgqkj] {
    white-space: nowrap;
}

/* Filter dropdowns */
.filter-dropdown[b-0rx2krgqkj] {
    position: relative;
}

.filter-dropdown-toggle[b-0rx2krgqkj] {
    border-radius: 50rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    min-height: 32px;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.filter-dropdown-toggle .badge[b-0rx2krgqkj] {
    font-size: 0.6875rem;
}

.filter-dropdown-menu[b-0rx2krgqkj] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--z-slot-badge);
    min-width: 180px;
    max-height: 280px;
    overflow-y: auto;
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    box-shadow: var(--dropdown-menu-shadow);
    padding: var(--space-2xs) 0;
    margin-top: var(--space-2xs);
}

.filter-dropdown-item[b-0rx2krgqkj] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    cursor: pointer;
    font-size: 0.8125rem;
    white-space: nowrap;
    margin: 0;
}

.filter-dropdown-item:hover[b-0rx2krgqkj] {
    background-color: var(--gray-50);
}

.filter-dropdown-item input[type="checkbox"][b-0rx2krgqkj] {
    flex-shrink: 0;
}

.filter-item-label[b-0rx2krgqkj] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.filter-dropdown-item .badge[b-0rx2krgqkj] {
    font-size: 0.6875rem;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .toolbar-top[b-0rx2krgqkj] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-search[b-0rx2krgqkj] {
        max-width: none;
    }

    .toolbar-count[b-0rx2krgqkj] {
        text-align: right;
    }

    .toolbar-filters[b-0rx2krgqkj] {
        flex-wrap: wrap;
    }

    .filter-dropdown-toggle[b-0rx2krgqkj] {
        min-height: 44px;
    }
}
/* /Shared/DocumentPageLightboxPanel.razor.rz.scp.css */
.doc-lightbox-overlay[b-oteukvyadk] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: var(--z-lightbox);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}

.doc-lightbox-content[b-oteukvyadk] {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.doc-lightbox-header[b-oteukvyadk] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    margin-bottom: var(--space-sm);
    color: #fff;
}

.doc-lightbox-title[b-oteukvyadk] {
    font-weight: var(--font-weight-semibold);
}

.doc-lightbox-page[b-oteukvyadk] {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-sm);
}

.doc-lightbox-img[b-oteukvyadk] {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-sm);
}

.doc-lightbox-nav[b-oteukvyadk] {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-sm);
}
/* /Shared/EnvironmentBanner.razor.rz.scp.css */
/* Sticky, not fixed, and deliberately so: a fixed bar would overlay the drawer toggle that
   MainLayout pins to the top-left, and a bar that sits on top of a control is a bar someone
   has to fight. Sticky takes real layout space, pushes the app down, blocks nothing. */
.env-banner[b-wkkhuh4t1t] {
    position: sticky;
    top: 0;
    z-index: var(--z-env-banner);

    /* ⛔ Load-bearing, found by ui-smoke 2026-08-21: sticky pushes the PAGE down, but a
       fixed-position overlay (SlidingPanel) anchors to the viewport, so its header slides
       UNDER this strip and the banner then eats the panel's Close-button clicks — three
       harvest-today checks timed out on exactly that. The banner is pure status text (two
       spans, nothing interactive), so clicks pass through; the text stays visible. */
    pointer-events: none;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    flex-wrap: wrap;

    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);

    /* Amber, not red: this is a state to notice, not an error to fix. Red here would compete
       with the app's real error surfaces and lose its meaning in both places. */
    background: var(--amber-500);
    color: #1f1300;

    font-size: 0.8125rem;
    line-height: 1.3;
    text-align: center;

    border-bottom: 1px solid var(--amber-600);
}

/* Pin the strip to the exact height the layout subtracts for it.

   ⛔ Load-bearing, measured 2026-08-22: this bar is `position: sticky`, i.e. IN FLOW, so it
   pushes `.page` down by its own height. MainLayout's `.sidebar` then asks for a definite
   `100vh` (it must — its nav content is taller than the viewport and scrolls internally),
   and displaced + full-height = a document exactly this much taller than the viewport. That
   surplus is a second, OUTER scrollbar with ~26px of travel that scrolls nothing, sitting
   right beside the real inner one. Jeff's words: "two scrollbars / scrolling feels dead."

   Pinning here rather than letting font metrics decide (they give 25.7px) is what makes
   `calc(100dvh - var(--env-banner-h))` exact instead of approximately right.
   ⚠ Desktop only: <768px this bar may legitimately wrap to two lines, and a fixed height
   would clip it. The .sidebar rule that consumes the token is desktop-only too. */
@media (min-width: 768px) {
    .env-banner[b-wkkhuh4t1t] {
        height: var(--env-banner-h);
        box-sizing: border-box;
    }
}

.env-banner-tag[b-wkkhuh4t1t] {
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.env-banner-text b[b-wkkhuh4t1t] {
    font-weight: 700;
}
/* /Shared/ImageCaptureEditor.razor.rz.scp.css */
.image-capture-editor[b-p96fseth2k] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.image-capture-editor.drag-over[b-p96fseth2k] {
    outline: 2px dashed var(--bs-primary);
    outline-offset: -2px;
    background: var(--capture-drag-tint);
    border-radius: var(--radius-lg);
}

.upload-btn[b-p96fseth2k] {
    min-height: 48px; /* Touch-friendly minimum */
    min-width: 160px;
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

/* Mobile-first: larger touch targets */
@media (max-width: 768px) {
    .upload-btn[b-p96fseth2k] {
        min-height: 56px;
        min-width: 100%;
        font-size: var(--font-size-xl);
    }
    
    .upload-btn i[b-p96fseth2k] {
        font-size: 1.4rem;
    }
}

.upload-preview[b-p96fseth2k] {
    position: relative;
    display: inline-block;
    max-width: 200px;
}

.preview-image[b-p96fseth2k] {
    max-width: 100%;
    max-height: 150px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-300);
    object-fit: contain;
}

.pdf-preview[b-p96fseth2k] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--gray-50);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    color: var(--red-500);
}

.pdf-preview i[b-p96fseth2k] {
    font-size: 1.5rem;
}

.pdf-preview span[b-p96fseth2k] {
    color: var(--gray-700);
    font-size: 0.875rem;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-btn[b-p96fseth2k] {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--capture-remove-btn-shadow);
}

.remove-btn:hover[b-p96fseth2k] {
    background: var(--red-500);
    color: var(--white);
    border-color: var(--red-500);
}

/* Camera icon emphasis for mobile */
@media (max-width: 768px) {
    .upload-btn .bi-camera-fill[b-p96fseth2k] {
        font-size: 1.5rem;
    }
}

/* Quick action buttons - 3-column grid */
.quick-upload-actions[b-p96fseth2k] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    width: 100%;
}

.quick-btn[b-p96fseth2k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: var(--space-md) var(--space-sm);
    background: var(--gray-50);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.quick-btn:active[b-p96fseth2k] {
    transform: scale(0.95);
}

.quick-btn:disabled[b-p96fseth2k],
.quick-btn.disabled[b-p96fseth2k] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.quick-btn:disabled:active[b-p96fseth2k],
.quick-btn.disabled:active[b-p96fseth2k] {
    transform: none;
}

/* Visually hidden but accessible - for file inputs triggered by labels */
.visually-hidden[b-p96fseth2k] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.quick-btn i[b-p96fseth2k] {
    font-size: 1.5rem;
    margin-bottom: var(--space-2xs);
}

.quick-btn span[b-p96fseth2k] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Camera button - blue theme */
.quick-btn.camera-btn[b-p96fseth2k] {
    background: var(--capture-action-camera-bg);
    border-color: var(--capture-action-camera-border);
    color: var(--capture-action-camera-fg);
}

/* Gallery button - green theme */
.quick-btn.gallery-btn[b-p96fseth2k] {
    background: var(--capture-action-gallery-bg);
    border-color: var(--capture-action-gallery-border);
    color: var(--capture-action-gallery-fg);
}

/* More button - neutral */
.quick-btn.more-btn[b-p96fseth2k] {
    background: var(--slate-100);
    border-color: var(--slate-300);
    color: var(--slate-600);
}

/* Upload progress bar */
.upload-progress-bar[b-p96fseth2k] {
    width: 100%;
    height: 36px;
    background: var(--slate-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    position: relative;
    margin-top: var(--space-sm);
}

.upload-progress-bar .progress-fill[b-p96fseth2k] {
    height: 100%;
    background: linear-gradient(90deg, var(--capture-accent) 0%, var(--capture-accent-light) 100%);
    animation: progress-pulse-b-p96fseth2k 1.5s ease-in-out infinite;
    width: 30%;
}

@keyframes progress-pulse-b-p96fseth2k {
    0%, 100% { opacity: 1; width: 30%; }
    50% { opacity: 0.7; width: 70%; }
}

.upload-progress-bar .progress-text[b-p96fseth2k] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    color: var(--slate-800);
}

/* Improved mobile preview */
@media (max-width: 768px) {
    .upload-preview[b-p96fseth2k] {
        width: 100%;
        max-width: none;
        margin-top: var(--space-md);
    }

    .preview-image[b-p96fseth2k] {
        width: 100%;
        max-height: 200px;
        object-fit: contain;
        border-radius: var(--radius-xl);
    }

    /* Larger remove button for touch */
    .remove-btn[b-p96fseth2k] {
        width: 40px;
        height: 40px;
        top: -12px;
        right: -12px;
        font-size: var(--font-size-lg);
    }
}

/* Quick actions are always visible when ShowQuickActions=true */

/* ============================================
   Crop Overlay - Fullscreen image cropping UI
   ============================================ */

/* Backdrop ensures nothing behind is clickable */
.crop-overlay-backdrop[b-p96fseth2k] {
    position: fixed;
    inset: 0;
    z-index: var(--z-drag-indicator);
    background: var(--crop-overlay-backdrop);
    pointer-events: all;
}

.crop-overlay[b-p96fseth2k] {
    position: fixed;
    inset: 0;
    z-index: var(--z-crop-overlay);
    background: var(--crop-overlay-bg);
    display: flex;
    flex-direction: column;
    /* Safe area for notched phones */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

.crop-overlay-header[b-p96fseth2k] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--crop-panel-bg);
    flex-shrink: 0;
}

.crop-title[b-p96fseth2k] {
    color: var(--white);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

.crop-cancel-btn[b-p96fseth2k],
.crop-confirm-btn[b-p96fseth2k] {
    border: none;
    border-radius: var(--radius-md);
    padding: 0.6rem var(--space-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    min-width: 80px;
    min-height: 44px;
}

.crop-cancel-btn[b-p96fseth2k] {
    background: var(--crop-btn-bg);
    color: var(--white);
}

.crop-confirm-btn[b-p96fseth2k] {
    background: var(--crop-confirm-bg);
    color: var(--white);
}

.crop-cancel-btn:active[b-p96fseth2k] {
    background: var(--crop-btn-bg-active);
}

.crop-confirm-btn:active[b-p96fseth2k] {
    background: var(--green-500);
}

.crop-container[b-p96fseth2k] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
    padding: var(--space-lg);
}

.crop-container img[b-p96fseth2k] {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

.crop-overlay-footer[b-p96fseth2k] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--crop-panel-bg);
    flex-shrink: 0;
}

/* ============================================
   Adjustment Panel - Brightness/Contrast/Saturation
   ============================================ */

.crop-adjustments[b-p96fseth2k] {
    flex-shrink: 0;
    background: var(--crop-panel-bg);
}

.adjustments-toggle[b-p96fseth2k] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: none;
    border-top: 1px solid var(--crop-divider);
    color: var(--crop-fg-muted);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    min-height: 44px;
}

.adjustments-toggle:active[b-p96fseth2k] {
    background: var(--crop-btn-bg-subtle);
}

.adjustment-sliders[b-p96fseth2k] {
    padding: var(--space-sm) var(--space-lg);
}

.slider-row[b-p96fseth2k] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.slider-row label[b-p96fseth2k] {
    color: var(--nwc-border);
    min-width: 100px;
    font-size: var(--font-size-md);
    user-select: none;
}

.slider-row input[type="range"][b-p96fseth2k] {
    flex: 1;
    accent-color: var(--capture-accent-light);
    height: 6px;
}

/* Filter preset buttons */
.filter-presets[b-p96fseth2k] {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.preset-btn[b-p96fseth2k] {
    background: var(--crop-btn-bg);
    color: var(--white);
    border: 1px solid var(--crop-btn-bg-active);
    border-radius: 20px;
    padding: 0.4rem var(--space-lg);
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
    min-height: 36px;
    transition: background var(--transition-default), border-color var(--transition-default);
}

.preset-btn:active[b-p96fseth2k] {
    background: var(--crop-btn-bg-active);
}

.preset-btn.active[b-p96fseth2k] {
    background: var(--capture-accent);
    border-color: var(--capture-accent);
}

/* Mobile optimizations for crop overlay */
@media (max-width: 768px) {
    .crop-overlay-header[b-p96fseth2k] {
        padding: var(--space-sm) var(--space-md);
    }

    .crop-title[b-p96fseth2k] {
        font-size: var(--font-size-lg);
    }

    .crop-cancel-btn[b-p96fseth2k],
    .crop-confirm-btn[b-p96fseth2k] {
        font-size: var(--font-size-xl);
        padding: 0.6rem var(--space-lg);
        min-width: 85px;
        min-height: 48px;
    }

    .crop-container[b-p96fseth2k] {
        padding: var(--space-sm);
    }

    .crop-overlay-footer[b-p96fseth2k] {
        padding: var(--space-sm) var(--space-md);
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    }

    .crop-overlay-footer .btn[b-p96fseth2k] {
        font-size: 0.8rem;
        padding: 0.4rem var(--space-md);
    }

    .slider-row label[b-p96fseth2k] {
        min-width: 80px;
        font-size: 0.8rem;
    }

    .preset-btn[b-p96fseth2k] {
        min-height: 36px;
    }
}
/* /Shared/InlineEditCell.razor.rz.scp.css */
.iec[b-qn1iglubmo] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.iec.editing[b-qn1iglubmo] {
    width: 100%;
}

.iec-read[b-qn1iglubmo] {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    padding: 2px 6px;
    text-align: inherit;
    cursor: text;
    color: inherit;
    font: inherit;
    font-variant-numeric: tabular-nums;
    min-width: 32px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

.iec-read:hover[b-qn1iglubmo] {
    background: var(--ws-panel-bg);
    border-color: var(--gray-300);
}

/* Empty cell showing its placeholder = an add affordance — make it read as clickable. */
.iec-read-empty[b-qn1iglubmo] {
    color: var(--accent-primary);
    font-style: italic;
    cursor: pointer;
}

.iec-read-empty:hover[b-qn1iglubmo] {
    text-decoration: underline;
}

.iec-read:focus[b-qn1iglubmo] {
    outline: 2px solid var(--bwd-focus-ring);
    outline-offset: 1px;
    background: var(--white);
}

.iec-input[b-qn1iglubmo] {
    font-size: 0.82rem;
    padding: 2px 6px;
    height: auto;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

.iec-textarea[b-qn1iglubmo] {
    font-variant-numeric: normal;
    resize: vertical;
    min-height: 60px;
    line-height: 1.4;
}

.iec-badge[b-qn1iglubmo] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    transition: background var(--transition-slow), color var(--transition-slow);
}

.iec-badge .spinner-border-sm[b-qn1iglubmo] {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
}

.iec.saving .iec-badge[b-qn1iglubmo] {
    background: var(--wr-status-info-bg);
    color: var(--wr-status-info-fg);
}

.iec.saved .iec-badge[b-qn1iglubmo] {
    background: var(--green-100);
    color: var(--wr-status-accepted-fg);
    animation: iec-saved-fade-b-qn1iglubmo 1.5s ease-out forwards;
}

@keyframes iec-saved-fade-b-qn1iglubmo {
    0% { opacity: 1; transform: scale(1); }
    70% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.85); }
}

.iec.error .iec-badge[b-qn1iglubmo] {
    background: var(--state-danger-bg);
    color: var(--wr-status-revision-fg);
}

.iec.error .iec-read[b-qn1iglubmo],
.iec.error .iec-input[b-qn1iglubmo] {
    border-color: var(--bwd-danger-border-subtle);
    background: var(--bwd-danger-bg-subtle);
}
/* /Shared/Inventory/CategoryTree.razor.rz.scp.css */
/* .im-pane-meta is global (site.css). */
/* /Shared/Inventory/InventoryInspector.razor.rz.scp.css */
.im-pane-meta[b-wccyahcusu] {
    font-weight: var(--font-weight-normal);
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-700);
    font-size: 0.78rem;
}

/* .im-insp-empty-pane container is global (site.css); only the icon-size delta stays scoped. */
.im-insp-empty-pane i[b-wccyahcusu] {
    font-size: 2.4rem;
    margin-bottom: 6px;
    color: var(--gray-400);
}

.im-insp-tabs[b-wccyahcusu] {
    display: flex;
    gap: 1px;
    padding: 0 4px;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
}

.im-insp-tab[b-wccyahcusu] {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 7px 12px 6px;
    font-size: 0.78rem;
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: -1px;
}

.im-insp-tab i[b-wccyahcusu] { color: var(--text-muted); }

.im-insp-tab:hover[b-wccyahcusu] {
    color: var(--blue-500);
    background: var(--surface-default);
}

.im-insp-tab.active[b-wccyahcusu] {
    background: var(--surface-default);
    color: var(--blue-500);
    border-bottom-color: var(--blue-500);
}

.im-insp-tab.active i[b-wccyahcusu] { color: var(--blue-500); }

.im-insp-body[b-wccyahcusu] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding: 0;
}

[b-wccyahcusu] .im-insp-empty {
    padding: 16px;
    color: var(--gray-500);
    font-size: var(--font-size-md);
}

[b-wccyahcusu] .im-insp-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--gray-100);
    background: var(--surface-subtle);
    font-size: 0.78rem;
}

/* ── Item tab ─────────────────────────────────────────── */
[b-wccyahcusu] .im-insp-section {
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--gray-100);
}

[b-wccyahcusu] .im-insp-name {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-lg);
}

[b-wccyahcusu] .im-insp-sub {
    color: var(--gray-700);
    font-size: 0.82rem;
    margin-top: 2px;
}

[b-wccyahcusu] .im-insp-cat {
    background: var(--blue-100);
    color: var(--blue-500);
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
}

[b-wccyahcusu] .im-insp-desc {
    color: var(--gray-700);
    font-size: 0.82rem;
    margin-top: 6px;
    line-height: 1.35;
}

[b-wccyahcusu] .im-insp-pulse {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2xs);
    padding: 8px 10px;
    border-bottom: 1px solid var(--gray-100);
    background: var(--surface-subtle);
}

[b-wccyahcusu] .im-insp-pulse-card {
    background: var(--surface-default);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    padding: 6px 8px;
    text-align: center;
}

[b-wccyahcusu] .im-insp-pulse-card.warn {
    background: var(--yellow-100);
    border-color: var(--wr-status-warning-border);
}

[b-wccyahcusu] .im-insp-pulse-num {
    font-size: 1.05rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

[b-wccyahcusu] .im-insp-pulse-label {
    font-size: var(--font-size-2xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 1px;
}

[b-wccyahcusu] .im-insp-alerts {
    padding: 6px 10px 0;
}

[b-wccyahcusu] .im-insp-group {
    border-bottom: 1px solid var(--gray-100);
    padding: 6px 14px 10px;
}

[b-wccyahcusu] .im-insp-group > summary {
    cursor: pointer;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-700);
    padding: 4px 0;
    font-weight: var(--font-weight-semibold);
}

[b-wccyahcusu] .im-insp-group[open] > summary { color: var(--blue-500); }

/* Grid mechanics + dt styling now come from global .nwc-kv (site.css) — see
   LAYOUT-PATTERNS.md Pattern 2. Only this instance's deltas remain local. */
[b-wccyahcusu] .im-kv {
    grid-template-columns: 130px 1fr;
    gap: 4px 10px;
    margin: 6px 0 0;
    font-size: 0.8rem;
}

[b-wccyahcusu] .im-kv dd {
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

/* ── Generic tab tables (lots, movements, suppliers) ──── */
[b-wccyahcusu] .im-lot-table,
[b-wccyahcusu] .im-mov-table,
[b-wccyahcusu] .im-sup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

[b-wccyahcusu] .im-lot-table th,
[b-wccyahcusu] .im-mov-table th,
[b-wccyahcusu] .im-sup-table th {
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gray-700);
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-300);
    padding: 6px 8px;
    position: sticky;
    top: 0;
    z-index: var(--z-base);
}

[b-wccyahcusu] .im-lot-table td,
[b-wccyahcusu] .im-mov-table td,
[b-wccyahcusu] .im-sup-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--gray-100);
    vertical-align: top;
}

[b-wccyahcusu] .im-lot-table .num,
[b-wccyahcusu] .im-mov-table .num,
[b-wccyahcusu] .im-sup-table .num,
[b-wccyahcusu] .im-lot-table th.num,
[b-wccyahcusu] .im-mov-table th.num,
[b-wccyahcusu] .im-sup-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

[b-wccyahcusu] .im-lot-table tr.expired td      { background: var(--inv-expired-bg); }
[b-wccyahcusu] .im-lot-table tr.near-expiry td  { background: var(--yellow-100); }
[b-wccyahcusu] .im-lot-table tr.depleted td     { color: var(--gray-500); }
[b-wccyahcusu] .im-lot-table tr.inactive td     { color: var(--gray-500); background: var(--gray-50); }

[b-wccyahcusu] .im-lot-meta td {
    background: var(--surface-subtle);
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);
    padding: 4px 12px 6px 36px;
    font-size: 0.72rem;
}

[b-wccyahcusu] .im-lot-prop {
    display: inline-block;
    margin-right: 12px;
}

/* .im-fifo-pill (blue) is global (site.css). */

/* .im-mov-type base + receive/issue/adjust/transfer are global (site.css); only .return diverges (gray here). */
[b-wccyahcusu] .im-mov-type.return   { background: var(--gray-100); color: var(--gray-700); }

[b-wccyahcusu] .im-mov-table td.num.pos { color: var(--inv-qty-positive); }
[b-wccyahcusu] .im-mov-table td.num.neg { color: var(--inv-qty-negative); }

[b-wccyahcusu] .im-mov-note td {
    background: var(--surface-subtle);
    color: var(--gray-700);
    border-bottom: 1px solid var(--gray-200);
    padding: 4px 12px 6px 24px;
    font-size: 0.72rem;
}

[b-wccyahcusu] .im-sup-table tr.default-supplier td {
    background: var(--inv-default-supplier-bg);
}

/* .im-badge base + ok/low/warn are global (site.css); this panel only overrides font-size. */
[b-wccyahcusu] .im-badge { font-size: 0.68rem; }
/* /Shared/Inventory/InventoryRibbon.razor.rz.scp.css */
.inv-ribbon[b-zyx9wg5hw7] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--gray-50);
    box-shadow: var(--shadow-sm);
    user-select: none;
}

.inv-ribbon-tabs[b-zyx9wg5hw7] {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--gray-300);
    padding: 0 6px;
    background: var(--gray-200);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.inv-ribbon-tab[b-zyx9wg5hw7] {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 8px 16px 7px;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    margin-bottom: -1px;
}

.inv-ribbon-tab:hover[b-zyx9wg5hw7] {
    background: var(--surface-default);
    color: var(--blue-500);
}

.inv-ribbon-tab.active[b-zyx9wg5hw7] {
    background: var(--surface-default);
    color: var(--blue-500);
    border-bottom-color: var(--blue-500);
}

.inv-ribbon-band[b-zyx9wg5hw7] {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 6px 4px 4px;
    min-height: 84px;
    overflow-x: auto;
}

[b-zyx9wg5hw7] .inv-ribbon-group {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--gray-200);
    padding: 0 8px 2px;
}

[b-zyx9wg5hw7] .inv-ribbon-group:last-child {
    border-right: none;
}

[b-zyx9wg5hw7] .inv-ribbon-group-buttons {
    display: flex;
    gap: 2px;
    flex: 1;
    align-items: stretch;
}

[b-zyx9wg5hw7] .inv-ribbon-btn {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 4px 8px 3px;
    min-width: 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    color: var(--gray-900);
    transition: background 0.1s, border-color 0.1s;
}

[b-zyx9wg5hw7] .inv-ribbon-btn:hover {
    background: var(--surface-default);
    border-color: var(--gray-400);
}

[b-zyx9wg5hw7] .inv-ribbon-btn:active {
    background: var(--gray-200);
}

[b-zyx9wg5hw7] .inv-ribbon-btn i {
    font-size: var(--font-size-2xl);
    line-height: 1;
    color: var(--gray-700);
}

[b-zyx9wg5hw7] .inv-ribbon-btn:hover i {
    color: var(--blue-500);
}

[b-zyx9wg5hw7] .inv-ribbon-btn-label {
    font-size: var(--font-size-xs);
    line-height: 1.1;
    white-space: nowrap;
}

[b-zyx9wg5hw7] .inv-ribbon-group-title {
    font-size: var(--font-size-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    text-align: center;
    padding-top: 2px;
    border-top: 1px solid var(--gray-200);
    margin-top: 4px;
}

/* Placeholder band content (Worksheets). Sits in the same 84px strip the button groups fill, so
   the ribbon does not change height when the tab changes. */
[b-zyx9wg5hw7] .inv-ribbon-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    color: var(--text-muted);
    font-size: var(--font-size-md);
}
/* /Shared/Inventory/ItemGrid.razor.rz.scp.css */
.im-grid-head[b-imwbeldz7o],
[b-imwbeldz7o] .im-grid-row {
    display: grid;
    grid-template-columns:
        140px            /* Category */
        minmax(180px, 2fr) /* Item */
        130px            /* SKU */
        90px             /* On-hand */
        90px             /* Available */
        60px             /* Lots */
        70px             /* UoM */
        90px;            /* Status */
    align-items: center;
    column-gap: 8px;
    padding: 0 10px;
    font-size: 0.82rem;
}

.im-grid-head[b-imwbeldz7o] {
    height: 30px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-300);
    color: var(--gray-700);
    font-weight: var(--font-weight-semibold);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex: 0 0 auto;
}

.im-grid-body[b-imwbeldz7o] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

[b-imwbeldz7o] .im-grid-row {
    height: 34px;
    border-bottom: 1px solid var(--gray-100);
    cursor: pointer;
    color: var(--gray-900);
}

[b-imwbeldz7o] .im-grid-row:hover {
    background: var(--gray-50);
}

[b-imwbeldz7o] .im-grid-row.selected {
    background: var(--blue-100);
}

[b-imwbeldz7o] .im-grid-row.low {
    background: var(--yellow-100);
}

[b-imwbeldz7o] .im-grid-row.low.selected {
    background: var(--inv-low-selected-bg);
}


.im-col-num[b-imwbeldz7o],
[b-imwbeldz7o] .im-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* .im-badge base + ok/low/warn are global (site.css). ItemGrid is canonical, no delta. */

/* .im-grid-empty container is global (site.css); only the icon-size delta stays scoped. */
.im-grid-empty i[b-imwbeldz7o] {
    font-size: 2rem;
    margin-bottom: 6px;
    color: var(--gray-400);
}

/* .im-pane-meta is global (site.css). */
/* /Shared/Inventory/OwnerLabel.razor.rz.scp.css */
/* Owner label — a code plus an overflow count, or an italic note when there is no code to show.
   Deliberately unopinionated about size and colour of the primary code: it inherits the host
   cell so the same component reads correctly in a dense grid and in the workbook sheet. */

.own-house[b-bkiot3xhhe],
.own-unrecorded[b-bkiot3xhhe] {
    color: var(--text-muted);
    font-style: italic;
}

.own-code[b-bkiot3xhhe] {
    font-variant-numeric: tabular-nums;
}

/* The "+2" chip. Neutral on purpose — it is a count, not a status. */
.own-plus[b-bkiot3xhhe] {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    background: var(--surface-emphasis);
    color: var(--text-muted);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    /* Numbers only, so it never needs to wrap or grow the row. */
    white-space: nowrap;
}
/* /Shared/Inventory/Panels/BulkAdjustPanel.razor.rz.scp.css */


.im-upload-zone[b-ubwatty3su] {
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    padding: 24px;
    text-align: center;
    background: var(--gray-50);
    color: var(--gray-600);
    font-size: 0.82rem;
}

.im-csv-template[b-ubwatty3su] {
    margin: 0 4px;
    padding: 8px 10px;
    background: var(--gray-100);
    border-radius: 5px;
    font-size: var(--font-size-sm);
    font-family: var(--bs-font-monospace);
    color: var(--gray-700);
    overflow-x: auto;
    white-space: pre;
}
/* /Shared/Inventory/Panels/DocumentInboxPanel.razor.rz.scp.css */


.im-doc-feed[b-lvggmoglbg] { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }

.im-doc-card[b-lvggmoglbg] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--surface-default);
    opacity: 0.85;
}

.im-doc-thumb[b-lvggmoglbg] {
    width: 36px;
    height: 44px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--gray-500);
    font-size: var(--font-size-xl);
}

.im-doc-meta[b-lvggmoglbg] { flex: 1; min-width: 0; }
.im-doc-meta .name[b-lvggmoglbg] { font-size: 0.82rem; font-weight: var(--font-weight-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.im-doc-meta .details[b-lvggmoglbg] { font-size: 0.72rem; color: var(--gray-600); }

.im-doc-actions[b-lvggmoglbg] { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

.im-ai-confidence[b-lvggmoglbg] { font-size: var(--font-size-xs); color: var(--gray-600); }
.im-ai-confidence.high[b-lvggmoglbg] { color: var(--green-600); }
.im-ai-confidence.low[b-lvggmoglbg]  { color: var(--red-500); }
/* /Shared/Inventory/Panels/ExportCsvPanel.razor.rz.scp.css */

.im-export-option[b-j8dh85czth] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color 0.1s;
}
.im-export-option:hover[b-j8dh85czth] { border-color: var(--gray-500); background: var(--gray-50); }
.im-export-option.selected[b-j8dh85czth] { border-color: var(--blue-500); background: var(--inv-selected-tint-bg); }

/* ⛔ The "disabled" class was COSMETIC until 2026-08-31 — no rule existed for it anywhere, so only
   Bootstrap's .text-muted greyed the text while :hover still lit the border and the cursor stayed
   a pointer. The one option that cannot be chosen went on reading as clickable, which is the exact
   defect the Inventory Manager audit set out to remove: a control that looks live and is not.
   ⚠ The :hover override must stay BELOW .im-export-option:hover — it wins on specificity
   (0,3,0 vs 0,2,0), not on order, but keeping it adjacent is what makes that legible. */
.im-export-option.disabled[b-j8dh85czth] { cursor: not-allowed; opacity: 0.55; background: var(--gray-50); }
.im-export-option.disabled:hover[b-j8dh85czth] { border-color: var(--gray-300); background: var(--gray-50); }
.im-export-option input[type="radio"][b-j8dh85czth] { margin-top: 3px; flex-shrink: 0; }
/* /Shared/Inventory/Panels/ExportPdfPanel.razor.rz.scp.css */


/* .im-export-option base is global (site.css); the :has()/radio deltas stay scoped (see note in site.css). */
.im-export-option:has(input:checked)[b-2ghg2gx6uy] { border-color: var(--blue-500); background: var(--inv-selected-tint-bg); }
.im-export-option input[type="radio"][b-2ghg2gx6uy] { margin-top: 2px; flex-shrink: 0; }
/* /Shared/Inventory/Panels/IssueStockPanel.razor.rz.scp.css */
.im-issue-lots[b-279ixme379] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    padding: 4px;
    background: var(--surface-default);
}

.im-issue-lot[b-279ixme379] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.82rem;
}

.im-issue-lot:hover[b-279ixme379] {
    background: var(--gray-50);
}

.im-issue-lot input[type="radio"][b-279ixme379] {
    margin-top: 4px;
    flex: 0 0 auto;
}

.im-issue-lot.active[b-279ixme379] {
    background: var(--blue-100);
    border-color: var(--wr-status-info-bg);
}

.im-issue-lot.expired[b-279ixme379] {
    background: var(--inv-expired-bg);
}

.im-issue-lot.expired.active[b-279ixme379] {
    background: var(--inv-expired-active-bg);
    border-color: var(--inv-expired-active-border);
}

/* .im-fifo-pill (blue) is global (site.css). */

/* .im-badge base + low are global (site.css); this panel only overrides padding + font-size. */
.im-badge[b-279ixme379] { padding: 1px 7px; font-size: 0.68rem; }
/* /Shared/Inventory/Panels/MatchInvoicePanel.razor.rz.scp.css */


.im-match-cols[b-qsbpjmvw36] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0 4px;
}

.im-match-col-head[b-qsbpjmvw36] {
    font-size: 0.72rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    padding: 0 0 4px;
    border-bottom: 1px solid var(--gray-200);
    margin-bottom: 6px;
}

.im-match-card[b-qsbpjmvw36] {
    padding: 8px;
    border: 1px solid var(--gray-300);
    border-radius: 5px;
    font-size: 0.78rem;
    background: var(--surface-default);
    opacity: 0.85;
    margin-bottom: 6px;
    cursor: pointer;
}

.im-match-card.candidate[b-qsbpjmvw36] { border-color: var(--blue-500); background: var(--inv-selected-tint-bg); }

.im-match-confidence[b-qsbpjmvw36] { font-size: var(--font-size-xs); color: var(--gray-600); }
.im-match-confidence.high[b-qsbpjmvw36] { color: var(--green-600); font-weight: var(--font-weight-semibold); }
.im-match-confidence.medium[b-qsbpjmvw36] { color: var(--orange-500); }
.im-match-confidence.low[b-qsbpjmvw36]  { color: var(--red-500); }

.im-match-summary[b-qsbpjmvw36] {
    margin: 8px 4px 0;
    padding: 8px 12px;
    background: var(--gray-50);
    border-radius: 5px;
    font-size: 0.78rem;
}
/* /Shared/Inventory/Panels/OpenCountsPanel.razor.rz.scp.css */


.im-count-list[b-vtwjtij68d] { padding: 0 4px; display: flex; flex-direction: column; gap: 8px; }

.im-count-card[b-vtwjtij68d] {
    padding: 12px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    background: var(--surface-default);
}

.im-count-card-top[b-vtwjtij68d] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.im-count-progress[b-vtwjtij68d] { display: flex; flex-direction: column; gap: 3px; margin-bottom: 4px; }
/* /Shared/Inventory/Panels/PendingIntakePanel.razor.rz.scp.css */


.im-po-table-demo[b-0vljtehwug] {
    margin: 0 4px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    opacity: 0.85;
}

.badge-days-green[b-0vljtehwug]  { background: var(--green-600); color: var(--text-on-brand); font-size: var(--font-size-xs); padding: 2px 6px; border-radius: 10px; }
.badge-days-amber[b-0vljtehwug]  { background: var(--orange-500); color: var(--text-on-brand); font-size: var(--font-size-xs); padding: 2px 6px; border-radius: 10px; }
.badge-days-red[b-0vljtehwug]    { background: var(--red-500); color: var(--text-on-brand); font-size: var(--font-size-xs); padding: 2px 6px; border-radius: 10px; }
/* /Shared/Inventory/Panels/PhysicalInventoryPanel.razor.rz.scp.css */


.im-stepper[b-lbf82i0xra] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 0 4px 16px;
    position: relative;
}

.im-step[b-lbf82i0xra] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.im-step[b-lbf82i0xra]::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 100%;
    height: 2px;
    background: var(--gray-300);
    z-index: 0;
}

.im-step:last-child[b-lbf82i0xra]::after { display: none; }

.im-step-num[b-lbf82i0xra] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--gray-200);
    color: var(--gray-600);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: var(--z-base);
    border: 2px solid var(--gray-300);
}

.im-step.active .im-step-num[b-lbf82i0xra] {
    background: var(--blue-500);
    color: var(--text-on-brand);
    border-color: var(--blue-500);
}

.im-step.done .im-step-num[b-lbf82i0xra] {
    background: var(--green-600);
    color: var(--text-on-brand);
    border-color: var(--green-600);
}

.im-step-label[b-lbf82i0xra] {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    margin-top: 4px;
    text-align: center;
    white-space: nowrap;
}

.im-step.active .im-step-label[b-lbf82i0xra] { color: var(--blue-500); font-weight: var(--font-weight-semibold); }
.im-step.done .im-step-label[b-lbf82i0xra] { color: var(--green-600); }
/* /Shared/Inventory/Panels/PrintLabelsPanel.razor.rz.scp.css */


.im-label-preview[b-8pnqk703if] {
    margin: 0 4px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    background: var(--surface-default);
    font-size: var(--font-size-sm);
    opacity: 0.85;
    display: inline-block;
    min-width: 220px;
}

.im-label-preview .label-title[b-8pnqk703if] { font-size: 0.95rem; font-weight: var(--font-weight-bold); }
.im-label-preview .label-row[b-8pnqk703if]   { display: flex; justify-content: space-between; margin-top: 3px; color: var(--gray-700); }
.im-label-preview .label-lot[b-8pnqk703if]   { font-size: var(--font-size-xs); font-family: var(--bs-font-monospace); color: var(--gray-600); margin-top: 2px; }

/* .im-export-option base is global (site.css); the :has()/radio deltas stay scoped (see note in site.css). */
.im-export-option:has(input:checked)[b-8pnqk703if] { border-color: var(--blue-500); background: var(--inv-selected-tint-bg); }
.im-export-option input[type="radio"][b-8pnqk703if] { margin-top: 2px; flex-shrink: 0; }
/* /Shared/Inventory/Panels/ReceiveDeliveryPanel.razor.rz.scp.css */
/* Delivery-ticket receiving. Tokens only — no literal colours, no bespoke spacing scale.
   ⛔ The row is a 3-column grid (tick | body | quantity) rather than a table: the body's height is
   driven by how many blockers a line has, and a table row cannot grow one cell without dragging
   the arithmetic line out of alignment with the quantity it explains. */

.rdp-panel[b-orkv3i090a] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.rdp-progress[b-orkv3i090a] {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--gray-100);
    font-size: var(--font-size-sm);
}

.rdp-note[b-orkv3i090a] {
    margin-bottom: 0;
    font-size: var(--font-size-sm);
}

/* ── Ticket card ───────────────────────────────────────────────────────────────────────────── */

.rdp-ticket[b-orkv3i090a] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.rdp-ticket-head[b-orkv3i090a] {
    padding: var(--space-sm) var(--space-md);
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
}

.rdp-ticket-title[b-orkv3i090a] {
    font-weight: var(--font-weight-semibold);
}

.rdp-ticket-no[b-orkv3i090a] {
    margin-left: var(--space-xs);
    color: var(--gray-600);
    font-weight: var(--font-weight-normal);
}

.rdp-ticket-meta[b-orkv3i090a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: 2px;
    font-size: var(--font-size-sm);
    color: var(--gray-700);
}

/* ── Lines ─────────────────────────────────────────────────────────────────────────────────── */

.rdp-line[b-orkv3i090a] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--gray-200);
}

.rdp-lines > .rdp-line:first-child[b-orkv3i090a] {
    border-top: none;
}

/* A fee is SHOWN, greyed, never received — dropping it would make the screen disagree with the
   paper the person is holding. */
.rdp-line--fee[b-orkv3i090a] {
    background: var(--gray-50);
    color: var(--gray-600);
}

.rdp-line--blocked[b-orkv3i090a] {
    background: var(--amber-50, var(--gray-50));
}

.rdp-line--done[b-orkv3i090a] {
    background: var(--green-50, var(--gray-50));
}

.rdp-line-pick[b-orkv3i090a] {
    padding-top: 2px;
    min-width: 1.25rem;
}

.rdp-line-body[b-orkv3i090a] {
    min-width: 0;
}

.rdp-line-name[b-orkv3i090a] {
    font-weight: var(--font-weight-medium);
}

.rdp-line-no[b-orkv3i090a] {
    margin-right: var(--space-xs);
    color: var(--gray-500);
}

.rdp-line-sub[b-orkv3i090a] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
}

.rdp-code[b-orkv3i090a],
.rdp-fee-chip[b-orkv3i090a],
.rdp-suggest[b-orkv3i090a] {
    display: inline-block;
    margin-left: var(--space-xs);
    padding: 0 var(--space-xs);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
}

.rdp-code[b-orkv3i090a] {
    background: var(--gray-200);
    color: var(--gray-700);
}

.rdp-fee-chip[b-orkv3i090a] {
    margin-left: 0;
    background: var(--gray-300);
    color: var(--gray-700);
}

.rdp-suggest[b-orkv3i090a] {
    background: var(--amber-100, var(--gray-200));
    color: var(--gray-800);
}

/* The arithmetic. Monospace so a misplaced decimal is visible as a shape, not just a value. */
.rdp-derivation[b-orkv3i090a] {
    margin-top: 2px;
    font-family: var(--font-family-mono, monospace);
    font-size: var(--font-size-xs);
    color: var(--gray-700);
}

.rdp-batch[b-orkv3i090a] {
    margin-top: 2px;
    font-size: var(--font-size-sm);
}

.rdp-blocker[b-orkv3i090a] {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--amber-800, var(--gray-800));
}

.rdp-outcome[b-orkv3i090a] {
    margin-top: var(--space-xs);
    font-size: var(--font-size-sm);
    color: var(--green-700, var(--gray-800));
}

.rdp-outcome--bad[b-orkv3i090a] {
    color: var(--red-700, var(--gray-800));
}

.rdp-line-qty[b-orkv3i090a] {
    text-align: right;
    white-space: nowrap;
}

.rdp-qty-num[b-orkv3i090a] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
}

.rdp-qty-unit[b-orkv3i090a] {
    margin-left: 2px;
    font-size: var(--font-size-sm);
    color: var(--gray-600);
}

/* ── Actions ───────────────────────────────────────────────────────────────────────────────── */

.rdp-actions[b-orkv3i090a] {
    display: flex;
    align-items: end;
    justify-content: flex-end;
    gap: var(--space-md);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--gray-200);
}

.rdp-category[b-orkv3i090a] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rdp-category-label[b-orkv3i090a] {
    font-size: var(--font-size-xs);
    color: var(--gray-600);
}

@media (max-width: 640px) {
    .rdp-line[b-orkv3i090a] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    /* The quantity drops under the body rather than shrinking — it is the number being agreed to,
       so it must never be the thing that truncates. */
    .rdp-line-qty[b-orkv3i090a] {
        grid-column: 2;
        text-align: left;
    }

    .rdp-actions[b-orkv3i090a] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Shared/Inventory/Panels/ReceiveStockPanel.razor.rz.scp.css */

.im-recv-prop[b-j4lcnu08qp] {
    display: grid;
    grid-template-columns: 1fr 1fr 36px;
    gap: 6px;
    margin-bottom: 6px;
}

/* ── Picker deltas (base .im-picker-* family is global in site.css) ─────── */

.im-picker-compact[b-j4lcnu08qp] {
    border: none;
    background: transparent;
}

.im-picker-compact .im-picker-input[b-j4lcnu08qp] {
    padding: 0;
    border-bottom: none;
}

.im-picker-compact .im-picker-input i[b-j4lcnu08qp] {
    left: 8px;
}

/* Compact mode floats the results as a bordered dropdown; the default
   (non-compact) mode is flush, matching the global base. */
.im-picker-results[b-j4lcnu08qp] {
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    margin-top: 4px;
}

.im-picker:not(.im-picker-compact) .im-picker-results[b-j4lcnu08qp] {
    border: none;
    border-radius: 0;
    margin-top: 0;
}

.im-picker-row[b-j4lcnu08qp] {
    transition: background 0.08s;
}

.im-picker-row:last-child[b-j4lcnu08qp] {
    border-bottom: none;
}
/* /Shared/Inventory/Panels/ReturnToStockPanel.razor.rz.scp.css */
/* .im-picker-* hoisted to site.css (global Inventory picker family). */

.im-return-history[b-6ql6kyhgv6] { border: 1px solid var(--gray-300); border-radius: var(--radius-md); overflow: hidden; max-height: 260px; overflow-y: auto; }
.im-return-row[b-6ql6kyhgv6] { display: block; width: 100%; text-align: left; appearance: none; background: transparent; border: 0; border-bottom: 1px solid var(--gray-100); padding: 8px 12px; cursor: pointer; }
.im-return-row:hover[b-6ql6kyhgv6] { background: var(--gray-50); }
.im-return-row.selected[b-6ql6kyhgv6] { background: var(--blue-100); border-left: 3px solid var(--blue-500); }
.im-return-row-top[b-6ql6kyhgv6] { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; }
.im-return-row-meta[b-6ql6kyhgv6] { font-size: var(--font-size-sm); margin-top: 2px; }
/* /Shared/Inventory/Panels/SetupCatalogPanel.razor.rz.scp.css */


.im-setup-toolbar[b-ikla8g1ejp] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 4px 8px;
}

.im-setup-table[b-ikla8g1ejp] {
    margin: 0 4px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.im-setup-unavailable[b-ikla8g1ejp] {
    margin: 0 4px;
    padding: 16px;
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--gray-600);
    font-size: 0.82rem;
}
/* /Shared/Inventory/Panels/SetupCategoriesPanel.razor.rz.scp.css */
/* .im-setup-panel/-form/-table/-empty/-row-inactive/-subtext are global (site.css);
   this panel's toolbar variant (no flex-wrap) stays scoped. */
.im-setup-panel-toolbar[b-xldkt64n16] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 8px;
    flex-shrink: 0;
}
/* /Shared/Inventory/Panels/SetupItemsPanel.razor.rz.scp.css */
/* .im-setup-panel/-form/-table/-empty/-row-inactive/-subtext are global (site.css);
   this panel's toolbar variant (flex-wrap), search/cat-filter, and table-footer stay scoped. */
.im-setup-panel-toolbar[b-jet8s8cftp] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.im-setup-search[b-jet8s8cftp] { max-width: 160px; }
.im-setup-cat-filter[b-jet8s8cftp] { max-width: 140px; }

.im-setup-table-footer[b-jet8s8cftp] {
    padding: 4px 8px;
    font-size: 0.72rem;
    color: var(--gray-600);
    border-top: 1px solid var(--gray-300);
    background: var(--gray-50);
}
/* /Shared/Inventory/Panels/SplitMergeLotPanel.razor.rz.scp.css */
/* /Shared/Inventory/Panels/StartCycleCountPanel.razor.rz.scp.css */


.im-count-scope-option[b-m474ytu7sb] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    cursor: not-allowed;
    opacity: 0.8;
}
/* /Shared/Inventory/Panels/StubInventoryPanel.razor.rz.scp.css */
.im-stub[b-7q6ixmuavd] {
    padding: 16px 4px;
}

.im-stub-header[b-7q6ixmuavd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.im-stub-header i[b-7q6ixmuavd] {
    font-size: 1.6rem;
    color: var(--blue-500);
}

.im-stub-header h5[b-7q6ixmuavd] {
    margin: 0;
    font-weight: var(--font-weight-semibold);
}

.im-stub-meta[b-7q6ixmuavd] {
    margin-top: 16px;
    padding: 12px 14px;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    display: grid;
    gap: 4px;
}

.im-stub-meta code[b-7q6ixmuavd] {
    background: var(--surface-default);
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--gray-300);
}
/* /Shared/Inventory/Panels/TransferLocationPanel.razor.rz.scp.css */

/* .im-fw-notice + .im-fw-entities (and strong/ul/li) are global (site.css);
   the .im-fw-lot-* / .im-fw-preview* wireframe bits + gray .im-fifo-pill below stay scoped. */

.im-fw-lot-skeleton[b-8okmh2pcm3] {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    opacity: 0.7;
}

.im-fw-lot-row[b-8okmh2pcm3] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-100);
    font-size: 0.82rem;
    color: var(--gray-700);
}

.im-fw-lot-row:last-child[b-8okmh2pcm3] { border-bottom: none; }

.im-fifo-pill[b-8okmh2pcm3] { background: var(--gray-200); color: var(--gray-700); padding: 0 6px; border-radius: var(--radius-pill); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); }

.im-fw-preview[b-8okmh2pcm3] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-200);
}

.im-fw-preview-before[b-8okmh2pcm3], .im-fw-preview-after[b-8okmh2pcm3] {
    flex: 1;
    padding: 8px 10px;
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: 5px;
}

.im-fw-preview-label[b-8okmh2pcm3] { font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--letter-spacing-wider); margin-bottom: 3px; }
.im-fw-preview-arrow[b-8okmh2pcm3] { font-size: 1.2rem; color: var(--gray-500); flex-shrink: 0; }
/* /Shared/Inventory/Panels/TransferLotPanel.razor.rz.scp.css */
/* /Shared/Inventory/Panels/UnassignedReceiptsPanel.razor.rz.scp.css */
/* ═══ Layout (panel-scoped, no viewport-fixed height) ═══ */
.im-recv[b-eaypg7qeyn] {
    display: flex;
    flex-direction: column;
    padding: 4px 0 12px;
    gap: var(--space-md);
}

/* ═══ Header ═══ */
.im-recv-header[b-eaypg7qeyn] {
    padding: 4px 4px 12px;
    border-bottom: 1px solid var(--gray-100);
}

.im-recv-header h6[b-eaypg7qeyn] { font-weight: var(--font-weight-semibold); }

/* ═══ Toolbar: Tabs + Filters ═══ */
.im-recv-toolbar[b-eaypg7qeyn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.im-recv-tabs[b-eaypg7qeyn] { display: flex; gap: 2px; }

.im-recv-tab[b-eaypg7qeyn] {
    padding: var(--space-xs) 0.875rem;
    border: 1px solid var(--slate-200);
    background: var(--white);
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: var(--font-weight-medium);
    color: var(--slate-500);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    transition: all 0.15s;
}

.im-recv-tab:first-child[b-eaypg7qeyn] { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.im-recv-tab:last-child[b-eaypg7qeyn]  { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.im-recv-tab:hover[b-eaypg7qeyn]       { background: var(--slate-50); color: var(--slate-700); }

.im-recv-tab.active[b-eaypg7qeyn] {
    background: var(--slate-800);
    border-color: var(--slate-800);
    color: var(--white);
}

.im-recv-tab-count[b-eaypg7qeyn] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    background: var(--amber-500);
    color: var(--slate-800);
    border-radius: 10px;
    padding: 0 6px;
    line-height: 1.4;
}

.im-recv-tab.active .im-recv-tab-count[b-eaypg7qeyn] {
    background: var(--amber-500);
    color: var(--slate-800);
}

.im-recv-search[b-eaypg7qeyn] { position: relative; }
.im-recv-search i[b-eaypg7qeyn] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slate-400);
    font-size: 0.8rem;
}
.im-recv-search input[b-eaypg7qeyn] { padding-left: 30px; min-width: 160px; }

/* ═══ Summary Strip ═══ */

.im-recv-stat[b-eaypg7qeyn] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-md);
    background: var(--slate-50);
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-md);
    font-size: 0.8rem;
}

.im-recv-stat-count[b-eaypg7qeyn] { font-weight: var(--font-weight-bold); color: var(--slate-800); }
.im-recv-stat-label[b-eaypg7qeyn] { color: var(--slate-500); }
.im-recv-stat-qty[b-eaypg7qeyn]   { color: var(--slate-400); font-size: var(--font-size-sm); }
.im-recv-stat-total[b-eaypg7qeyn] { background: var(--slate-800); border-color: var(--slate-800); }
.im-recv-stat-total .im-recv-stat-count[b-eaypg7qeyn] { color: var(--white); }
.im-recv-stat-total .im-recv-stat-label[b-eaypg7qeyn] { color: var(--slate-400); }

/* ═══ Bulk Actions ═══ */
.im-recv-bulk[b-eaypg7qeyn] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--inv-subtle-info-bg);
    border: 1px solid var(--inv-subtle-info-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-md);
}

/* ═══ Table ═══ */
.im-recv-table-wrap[b-eaypg7qeyn] {
    border: 1px solid var(--slate-200);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    overflow-y: visible;
}

.im-recv-table[b-eaypg7qeyn] { margin-bottom: 0; font-size: 0.84rem; }

.im-recv-table thead th[b-eaypg7qeyn] {
    background: var(--slate-50);
    border-bottom: 2px solid var(--slate-200);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate-500);
    padding: var(--space-sm) 0.625rem;
    white-space: nowrap;
}

.im-recv-table tbody td[b-eaypg7qeyn] {
    padding: var(--space-sm) 0.625rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--slate-100);
}

.im-recv-row--unassigned[b-eaypg7qeyn] { background: var(--inv-row-unassigned-bg); }
.im-recv-row:hover[b-eaypg7qeyn]       { background: var(--inv-subtle-info-bg); }

/* ─ Type badge ─ */
.im-recv-type-badge[b-eaypg7qeyn] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-bold);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    white-space: nowrap;
    letter-spacing: var(--letter-spacing-wide);
}
.im-recv-type-badge.glass[b-eaypg7qeyn]   { background: var(--material-badge-glass-bg); color: var(--material-badge-glass-fg); }
.im-recv-type-badge.closure[b-eaypg7qeyn] { background: var(--material-badge-closure-bg); color: var(--material-badge-closure-fg); }
.im-recv-type-badge.capsule[b-eaypg7qeyn] { background: var(--material-badge-capsule-bg); color: var(--material-badge-capsule-fg); }
.im-recv-type-badge.label[b-eaypg7qeyn]   { background: var(--material-badge-label-bg); color: var(--material-badge-label-fg); }
.im-recv-type-badge.foil[b-eaypg7qeyn]    { background: var(--material-badge-foil-bg); color: var(--material-badge-foil-fg); }
.im-recv-type-badge.box[b-eaypg7qeyn]     { background: var(--amber-100); color: var(--amber-800); }
.im-recv-type-badge.other[b-eaypg7qeyn]   { background: var(--slate-100); color: var(--slate-600); }

/* ─ Item / Desc ─ */
.im-recv-col-desc[b-eaypg7qeyn] { min-width: 180px; }

.im-recv-item-desc[b-eaypg7qeyn] {
    font-weight: var(--font-weight-medium);
    color: var(--slate-800);
    max-width: 280px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.im-recv-item-meta[b-eaypg7qeyn] {
    font-size: 0.72rem;
    color: var(--slate-400);
}

/* ─ Qty ─ */
.im-recv-qty[b-eaypg7qeyn] {
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--slate-800);
}

/* ─ Lot ─ */
.im-recv-lot[b-eaypg7qeyn] {
    font-family: "SF Mono", "Cascadia Code", monospace;
    font-size: 0.78rem;
    color: var(--slate-600);
}

/* ─ Profile link ─ */
.im-recv-profile-link[b-eaypg7qeyn] {
    color: var(--inv-profile-link-fg);
    font-weight: var(--font-weight-medium);
    font-size: 0.82rem;
}

/* ─ Source ─ */
.im-recv-source[b-eaypg7qeyn] {
    font-size: 0.72rem;
    color: var(--slate-500);
    max-width: 90px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─ Status ─ */
.im-recv-status[b-eaypg7qeyn] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
.im-recv-status.unassigned[b-eaypg7qeyn] { background: var(--amber-100); color: var(--amber-800); }
.im-recv-status.assigned[b-eaypg7qeyn]   { background: var(--receipt-status-assigned-bg); color: var(--receipt-status-assigned-fg); }
.im-recv-status.partial[b-eaypg7qeyn]    { background: var(--material-badge-glass-bg); color: var(--receipt-status-partial-fg); }
.im-recv-status.consumed[b-eaypg7qeyn]   { background: var(--slate-100); color: var(--slate-600); }

/* ─ Date ─ */
.im-recv-date[b-eaypg7qeyn] {
    font-size: var(--font-size-sm);
    color: var(--slate-400);
    white-space: nowrap;
}

/* ─ Truncation helper ─ */
.im-recv-cell-trunc[b-eaypg7qeyn] {
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─ Inline expand row ─ */
.im-recv-expand > td[b-eaypg7qeyn] {
    background: var(--slate-50);
    padding: 0.875rem var(--space-lg) !important;
    border-bottom: 1px solid var(--slate-200);
}

.im-recv-expand-grid[b-eaypg7qeyn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.875rem 1.25rem;
    align-items: start;
}

.im-recv-expand-section[b-eaypg7qeyn] { font-size: 0.82rem; color: var(--slate-800); }

.im-recv-expand-label[b-eaypg7qeyn] {
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate-400);
    margin-bottom: 0.2rem;
}

.im-recv-expand-section--actions[b-eaypg7qeyn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
    grid-column: 1 / -1;
    border-top: 1px dashed var(--slate-200);
    padding-top: var(--space-md);
    margin-top: var(--space-2xs);
}

/* ─ Actions ─ */
.btn-xs[b-eaypg7qeyn] {
    padding: 3px 8px;
    font-size: var(--font-size-sm);
    line-height: 1.2;
}

/* ═══ Empty / Footer ═══ */
.im-recv-empty[b-eaypg7qeyn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem var(--space-lg);
    color: var(--slate-400);
}
.im-recv-empty i[b-eaypg7qeyn] { font-size: 2.5rem; margin-bottom: var(--space-md); }
.im-recv-empty p[b-eaypg7qeyn] { margin-bottom: var(--space-sm); }

.im-recv-footer[b-eaypg7qeyn] {
    padding: var(--space-sm) 0;
    font-size: 0.78rem;
    color: var(--slate-400);
}

/* ═══ Responsive ═══ */
@media (max-width: 900px) {
    .im-recv-summary[b-eaypg7qeyn] { gap: var(--space-xs); }
    .im-recv-stat[b-eaypg7qeyn]    { padding: 0.2rem var(--space-sm); font-size: var(--font-size-sm); }
}

@media (max-width: 768px) {
    .im-recv-toolbar[b-eaypg7qeyn]  { flex-direction: column; align-items: flex-start; }
    .im-recv-col-desc[b-eaypg7qeyn] { min-width: 120px; }
    .im-recv-item-desc[b-eaypg7qeyn] { max-width: 180px; }
}
/* /Shared/Inventory/Panels/VarianceReviewPanel.razor.rz.scp.css */


.im-variance-table-demo[b-2hb60p2wfn] {
    margin: 0 4px;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    opacity: 0.85;
}
/* /Shared/Inventory/Reports/AgingReportPanel.razor.rz.scp.css */
.im-aging-filter-wrap[b-rtgbnd60oe] {
    display: flex;
    align-items: center;
}

.im-aging-bucket[b-rtgbnd60oe] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--radius-xs);
    font-size: 0.68rem;
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.bucket-fresh[b-rtgbnd60oe]  { background: var(--inv-aging-fresh-bg); color: var(--inv-qty-positive); }
.bucket-mid[b-rtgbnd60oe]    { background: var(--yellow-100); color: var(--yellow-700); }
.bucket-old[b-rtgbnd60oe]    { background: var(--inv-aging-old-bg); color: var(--inv-aging-old-fg); }
.bucket-aged[b-rtgbnd60oe]   { background: var(--inv-expired-bg); color: var(--inv-qty-negative); }
/* /Shared/Inventory/Worksheets/MaterialsWorkbook.razor.rz.scp.css */
/* Materials Workbook.

   Hosted in ManagerShell's .ms-overlay, which is a flex column with overflow hidden — so this
   root takes the free space and owns its own scrolling, exactly as WorksheetSurface does.

   Colours come from the shared --sheet-* tokens in tokens.css (Excel's own chrome greys and its
   selection green). ⛔ Do not mint near-miss values here: the pre-push css-duplicate-audit counts
   cross-file duplicate groups, and a second almost-identical palette is what it exists to catch. */
.mw-surface[b-2wsi2gryvj] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--sheet-cell-bg);
    font-family: var(--sheet-font);
    color: var(--text-primary);
}

/* ── Command strip ────────────────────────────────────────────────────────── */
.mw-cmd[b-2wsi2gryvj] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    padding: 5px 7px;
    background: var(--sheet-chrome-bg);
    border-bottom: 1px solid var(--sheet-header-border);
}

.mw-btn[b-2wsi2gryvj] {
    font-family: inherit;
    font-size: var(--font-size-sm);
    background: var(--sheet-cell-bg);
    color: var(--text-primary);
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    padding: 4px 10px;
    cursor: pointer;
}

.mw-btn:hover:not(:disabled)[b-2wsi2gryvj] {
    background: var(--sheet-header-active-bg);
    border-color: var(--sheet-select);
    color: var(--sheet-header-active-fg);
}

.mw-btn:disabled[b-2wsi2gryvj] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mw-btn:focus-visible[b-2wsi2gryvj] {
    outline: 2px solid var(--sheet-select);
    outline-offset: 1px;
}

.mw-save[b-2wsi2gryvj] {
    background: var(--sheet-select);
    border-color: var(--sheet-select);
    color: #fff;
    font-weight: var(--font-weight-semibold);
}

/* The disabled Save keeps its green: it is the primary action, and greying it out reads as
   "broken" rather than "nothing to save yet". */
.mw-save:disabled[b-2wsi2gryvj] {
    background: var(--sheet-select);
    border-color: var(--sheet-select);
    color: #fff;
}

/* Undo/redo are icon-only, so they need a square face rather than the label padding. */
.mw-icon[b-2wsi2gryvj] {
    padding: 4px 7px;
    line-height: 1;
}

.mw-sep[b-2wsi2gryvj] {
    width: 1px;
    height: 20px;
    background: var(--sheet-header-border);
    margin: 0 3px;
}

.mw-grow[b-2wsi2gryvj] {
    flex: 1 1 auto;
}

.mw-search[b-2wsi2gryvj] {
    width: 220px;
    padding: 3px 8px;
    background: var(--sheet-cell-bg);
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    font-family: inherit;
    font-size: var(--font-size-sm);
}

.mw-search:focus[b-2wsi2gryvj] {
    outline: none;
    border-color: var(--sheet-select);
}

.mw-dirtycount[b-2wsi2gryvj] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--sheet-header-active-fg);
}

/* ── Name box + formula bar ───────────────────────────────────────────────── */
.mw-bar[b-2wsi2gryvj] {
    display: flex;
    align-items: center;
    padding: 4px 6px;
    background: var(--sheet-chrome-bg);
    border-bottom: 1px solid var(--sheet-header-border);
}

.mw-namebox[b-2wsi2gryvj],
.mw-formula[b-2wsi2gryvj] {
    padding: 3px 8px;
    background: var(--sheet-cell-bg);
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-md);
    line-height: 1.3;
    min-height: 24px;
}

.mw-namebox[b-2wsi2gryvj] {
    width: 96px;
    flex: none;
    font-variant-numeric: tabular-nums;
}

.mw-formula[b-2wsi2gryvj] {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    color: var(--text-primary);
}

.mw-formula:focus[b-2wsi2gryvj] {
    outline: none;
    border-color: var(--sheet-select);
}

.mw-formula-ro[b-2wsi2gryvj] {
    background: var(--sheet-header-bg);
    color: var(--text-muted);
}

.mw-fx[b-2wsi2gryvj] {
    padding: 0 10px;
    font-style: italic;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--sheet-header-fg);
}

/* Why the selected cell cannot be typed in. Its own line rather than a tooltip, because a
   tooltip nobody hovers teaches nothing and this is the surface's central honesty. */
.mw-ro-reason[b-2wsi2gryvj] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 10px;
    background: var(--sheet-header-bg);
    border-bottom: 1px solid var(--sheet-header-border);
    font-size: var(--font-size-xs);
    color: var(--sheet-header-fg);
}

/* ── Scroll region + grid ─────────────────────────────────────────────────── */
.mw-scroll[b-2wsi2gryvj] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    outline: none;
}

.mw-scroll:focus-visible[b-2wsi2gryvj] {
    outline: 2px solid var(--sheet-select);
    outline-offset: -2px;
}

.mw-msg[b-2wsi2gryvj] {
    padding: 16px;
    font-size: var(--font-size-md);
    color: var(--text-muted);
}

.mw-msg-error[b-2wsi2gryvj] {
    color: var(--sheet-header-active-fg);
}

/* border-collapse stays SEPARATE: `collapse` drops borders off position:sticky headers in
   Chrome, and the frozen panes are the whole point. */
/* border-collapse stays SEPARATE (see above).
   ⛔ width is 100% with a min-width floor, NOT `max-content`. With `max-content`, table-layout:
   fixed treats the <col> widths as MINIMUMS and grows every column to fit its content — measured
   2026-09-01 at 1536x695 (Chrome, dev): the colgroup asked for 1320px and the table rendered
   1513px in a 1431px viewport, pushing the State column off the right edge. The floor below is
   the sum of the widths, so the sheet fills the pane when there is room and scrolls sideways only
   when there genuinely is not. */
.mw-grid[b-2wsi2gryvj] {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    width: 100%;
    min-width: 1232px;
    font-size: var(--font-size-md);
}

/* ⚠ These must sum to the min-width above. Jeff's desktop is 1920x1080 at 125% Windows scaling,
   which gives the page 1536 CSS px and this pane ~1431 — so the whole set has to land under that
   or the last column is the one that disappears. */
.mw-col-gutter[b-2wsi2gryvj] { width: 58px; }
.mw-col-owner[b-2wsi2gryvj] { width: 92px; }
.mw-col-material[b-2wsi2gryvj] { width: 260px; }
.mw-col-type[b-2wsi2gryvj] { width: 110px; }
.mw-col-lot[b-2wsi2gryvj] { width: 148px; }
.mw-col-onhand[b-2wsi2gryvj] { width: 92px; }
.mw-col-unit[b-2wsi2gryvj] { width: 56px; }
.mw-col-expires[b-2wsi2gryvj] { width: 100px; }
.mw-col-received[b-2wsi2gryvj] { width: 100px; }
.mw-col-checkedinby[b-2wsi2gryvj] { width: 124px; }
.mw-col-state[b-2wsi2gryvj] { width: 92px; }

.mw-cell[b-2wsi2gryvj],
.mw-labelcell[b-2wsi2gryvj],
.mw-colhead[b-2wsi2gryvj],
.mw-rowhead[b-2wsi2gryvj],
.mw-corner[b-2wsi2gryvj] {
    height: 21px;
    padding: 0 4px;
    border-right: 1px solid var(--sheet-gridline);
    border-bottom: 1px solid var(--sheet-gridline);
    font-weight: var(--font-weight-normal);
}

.mw-cell[b-2wsi2gryvj] {
    position: relative;
    background: var(--sheet-cell-bg);
    cursor: cell;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
}

.mw-cell.num[b-2wsi2gryvj] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A read-only cell must LOOK read-only. It is not disabled decoration: on an existing row most
   of the sheet is read-only because no endpoint can save it, and pretending otherwise is the
   failure mode this surface exists to avoid. */
.mw-cell.ro[b-2wsi2gryvj] {
    color: var(--text-muted);
    cursor: default;
}

/* Frozen panes, three layers: letters at the top, the label row directly beneath them, the
   gutter at the left, and the corner pinned to both. */
.mw-colhead[b-2wsi2gryvj],
.mw-rowhead[b-2wsi2gryvj],
.mw-corner[b-2wsi2gryvj] {
    position: sticky;
    background: var(--sheet-header-bg);
    color: var(--sheet-header-fg);
    border-right-color: var(--sheet-header-border);
    border-bottom-color: var(--sheet-header-border);
    text-align: center;
    font-size: var(--font-size-sm);
    user-select: none;
}

.mw-rowhead[b-2wsi2gryvj] {
    left: 0;
    z-index: var(--z-base);
}

.mw-colhead[b-2wsi2gryvj] {
    top: 0;
    z-index: calc(var(--z-base) + 1);
}

.mw-corner[b-2wsi2gryvj] {
    top: 0;
    left: 0;
    z-index: calc(var(--z-base) + 2);
}

.mw-colhead.active[b-2wsi2gryvj],
.mw-rowhead.active[b-2wsi2gryvj] {
    background: var(--sheet-header-active-bg);
    color: var(--sheet-header-active-fg);
    font-weight: var(--font-weight-semibold);
}

.mw-hdr .mw-labelcell[b-2wsi2gryvj] {
    position: sticky;
    top: 21px;
    z-index: var(--z-base);
    background: var(--sheet-header-bg);
    font-weight: var(--font-weight-semibold);
    color: var(--sheet-header-fg);
    white-space: nowrap;
    overflow: hidden;
}

/* Gutter: chevron + row number side by side. */
.mw-rowhead[b-2wsi2gryvj] {
    display: table-cell;
    white-space: nowrap;
}

.mw-chev[b-2wsi2gryvj] {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0 2px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
}

.mw-chev:hover[b-2wsi2gryvj] {
    color: var(--sheet-select);
}

.mw-rownum[b-2wsi2gryvj] {
    font-variant-numeric: tabular-nums;
}

/* Selection box drawn OUTSIDE the gridlines, so selecting cannot nudge the grid. */
.mw-cell.selected[b-2wsi2gryvj] {
    outline: 2px solid var(--sheet-select);
    outline-offset: -1px;
}

/* Excel's marching ants. Only the outline STYLE changes, so the ring keeps its width and offset
   and the copy cannot shift a single pixel of the grid. The copied cell is always the selected
   one, but the rule stands alone so a future range copy does not need it rewritten. */
.mw-cell.copied[b-2wsi2gryvj] {
    outline: 2px dashed var(--sheet-select);
    outline-offset: -1px;
}

.mw-editor[b-2wsi2gryvj] {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0 3px;
    border: 0;
    outline: none;
    background: var(--sheet-cell-bg);
    font: inherit;
    color: var(--text-primary);
    text-align: inherit;
}

/* A cell holding a picker. ⛔ overflow must be visible or the open list is clipped at the cell's
   own gridline; the z-index lifts it over the rows BELOW, which are later in the DOM and would
   otherwise paint on top of it. The list still cannot escape .mw-scroll — it does not need to,
   because a picker only ever appears on a NEW row and new rows are inserted at the top. */
.mw-cell.pick[b-2wsi2gryvj] {
    overflow: visible;
    z-index: calc(var(--z-base) + 3);
}

/* An unsaved change. The colour is deliberately NOT the selection green — a pending edit and a
   saved one must never look alike. */
.mw-cell.edited[b-2wsi2gryvj] {
    background: var(--sheet-header-active-bg);
}

.mw-newrow .mw-cell[b-2wsi2gryvj] {
    background: var(--sheet-header-active-bg);
}

.mw-failed .mw-cell[b-2wsi2gryvj] {
    background: var(--sheet-header-bg);
}

/* ── Cell content ─────────────────────────────────────────────────────────── */
/* ⚠ The owner cell's own styles moved to OwnerLabel.razor.css when the label became a shared
   component. Nothing here styles it — scoped CSS does not cross the component boundary anyway,
   so a leftover .mw-house rule here would have looked authoritative while doing nothing. */

.mw-siblings[b-2wsi2gryvj] {
    display: inline-block;
    margin-left: 4px;
    padding: 0 4px;
    background: var(--sheet-header-bg);
    color: var(--sheet-header-fg);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
}

/* ⚠ Negative on-hand is REAL upstream data (46 of 400 prod products on 2026-09-01). Coloured so
   it is obvious, never clamped and never hidden — the drum physically exists. */
.mw-neg[b-2wsi2gryvj] {
    color: var(--danger, #b02a20);
    font-weight: var(--font-weight-semibold);
}

.mw-zero[b-2wsi2gryvj],
.mw-unknown[b-2wsi2gryvj] {
    color: var(--text-muted);
}

.mw-exp[b-2wsi2gryvj] {
    color: var(--danger, #b02a20);
}

/* ── Row note + detail ────────────────────────────────────────────────────── */
.mw-noterow .mw-note[b-2wsi2gryvj] {
    padding: 4px 10px;
    background: var(--sheet-header-bg);
    font-size: var(--font-size-xs);
    color: var(--sheet-header-fg);
    white-space: normal;
    height: auto;
}

.mw-note-fail[b-2wsi2gryvj] {
    color: var(--danger, #b02a20);
}

/* ── Pending change strip ─────────────────────────────────────────────────────
   Sits under a row that has been typed in but not saved. It states the before and
   after outright: a change you cannot see is a change you cannot decide about. */
/* ⛔ Stays a table-cell. Giving this display:flex drops it out of table layout, colspan stops
   applying, and the strip collapses into the first column. The flex lives on .mw-pendwrap. */
.mw-noterow .mw-note-pending[b-2wsi2gryvj] {
    background: var(--sheet-header-active-bg);
    color: var(--sheet-header-active-fg);
}

.mw-pendwrap[b-2wsi2gryvj] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.mw-pend s[b-2wsi2gryvj] {
    opacity: 0.7;
    margin-right: 2px;
}

.mw-pend i[b-2wsi2gryvj] {
    font-size: 0.85em;
    margin: 0 1px;
}

.mw-pend em[b-2wsi2gryvj] {
    font-style: normal;
    opacity: 0.75;
    margin-left: 2px;
}

.mw-revert[b-2wsi2gryvj] {
    margin-left: auto;
    flex: 0 0 auto;
    font-family: inherit;
    font-size: var(--font-size-xs);
    background: var(--sheet-cell-bg);
    color: var(--text-primary);
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    padding: 2px 9px;
    cursor: pointer;
}

.mw-revert:hover[b-2wsi2gryvj] {
    border-color: var(--sheet-select);
    color: var(--sheet-header-active-fg);
}

.mw-revert:focus-visible[b-2wsi2gryvj] {
    outline: 2px solid var(--sheet-select);
    outline-offset: 1px;
}

.mw-detailrow > td[b-2wsi2gryvj] {
    padding: 7px 10px 9px;
    background: var(--sheet-header-bg);
    border-bottom: 1px solid var(--sheet-gridline);
    white-space: normal;
    height: auto;
}

.mw-detail[b-2wsi2gryvj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    gap: 8px 18px;
    font-size: var(--font-size-sm);
}

.mw-detail > div > span[b-2wsi2gryvj] {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.mw-detail-note[b-2wsi2gryvj] {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}

.mw-detail-actions[b-2wsi2gryvj] {
    display: flex;
    align-items: flex-end;
}

/* ── Progress row ─────────────────────────────────────────────────────────── */
.mw-progrow[b-2wsi2gryvj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    background: var(--sheet-chrome-bg);
    border-top: 1px solid var(--sheet-header-border);
}

.mw-track[b-2wsi2gryvj] {
    flex: 0 0 190px;
    height: 5px;
    background: var(--sheet-gridline);
    border-radius: var(--radius-xs);
    overflow: hidden;
}

.mw-bar-fill[b-2wsi2gryvj] {
    height: 100%;
    background: var(--sheet-select);
    transition: width 0.2s ease;
}

.mw-progtext[b-2wsi2gryvj] {
    font-size: var(--font-size-sm);
    color: var(--sheet-header-fg);
}

.mw-progtext strong[b-2wsi2gryvj] {
    font-variant-numeric: tabular-nums;
}

/* ── Tab strip ────────────────────────────────────────────────────────────── */
.mw-tabs[b-2wsi2gryvj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 8px;
    background: var(--sheet-chrome-bg);
    border-top: 1px solid var(--sheet-header-border);
}

.mw-tab[b-2wsi2gryvj] {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 3px 14px;
    font-family: inherit;
    font-size: var(--font-size-md);
    color: var(--sheet-header-fg);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    cursor: default;
}

.mw-tab.active[b-2wsi2gryvj] {
    background: var(--sheet-cell-bg);
    border-bottom-color: var(--sheet-select);
    color: var(--sheet-select);
    font-weight: var(--font-weight-semibold);
}

.mw-note[b-2wsi2gryvj] {
    margin-left: auto;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ── Save queue drawer ────────────────────────────────────────────────────── */
.mw-scrim[b-2wsi2gryvj] {
    position: fixed;
    inset: 0;
    background: rgba(20, 22, 20, 0.28);
    z-index: var(--z-modal-backdrop, 1040);
}

.mw-queue[b-2wsi2gryvj] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: min(430px, 94vw);
    display: flex;
    flex-direction: column;
    background: var(--sheet-cell-bg);
    border-left: 1px solid var(--sheet-header-border);
    box-shadow: -8px 0 28px rgba(0, 0, 0, 0.18);
    z-index: var(--z-modal, 1050);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.32, 0.72, 0.3, 1);
}

.mw-queue.open[b-2wsi2gryvj] {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .mw-queue[b-2wsi2gryvj],
    .mw-bar-fill[b-2wsi2gryvj] {
        transition: none;
    }
}

.mw-queue-head[b-2wsi2gryvj] {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    background: var(--sheet-chrome-bg);
    border-bottom: 1px solid var(--sheet-header-border);
}

.mw-queue-head h2[b-2wsi2gryvj] {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.mw-queue-close[b-2wsi2gryvj] {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--sheet-header-fg);
    cursor: pointer;
}

.mw-queue-close:hover:not(:disabled)[b-2wsi2gryvj] {
    color: var(--danger, #b02a20);
}

.mw-queue-close:disabled[b-2wsi2gryvj] {
    opacity: 0.4;
    cursor: not-allowed;
}

.mw-queue-hint[b-2wsi2gryvj] {
    margin: 0;
    padding: 10px 14px;
    background: var(--sheet-header-bg);
    font-size: var(--font-size-sm);
    color: var(--sheet-header-fg);
}

.mw-qlist[b-2wsi2gryvj] {
    flex: 1;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mw-qitem[b-2wsi2gryvj] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--sheet-gridline);
    font-size: var(--font-size-sm);
}

.mw-qdot[b-2wsi2gryvj] {
    flex: none;
    width: 8px;
    height: 8px;
    margin-top: 5px;
    border-radius: 50%;
    background: var(--sheet-gridline);
}

.mw-qdot-sending[b-2wsi2gryvj] { background: var(--sheet-header-active-fg); }
.mw-qdot-applied[b-2wsi2gryvj] { background: var(--sheet-select); }
.mw-qdot-failed[b-2wsi2gryvj] { background: var(--danger, #b02a20); }

.mw-qtext[b-2wsi2gryvj] {
    flex: 1;
    min-width: 0;
}

.mw-qtext code[b-2wsi2gryvj] {
    display: block;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.mw-qmsg[b-2wsi2gryvj] {
    display: block;
    margin-top: 3px;
    color: var(--danger, #b02a20);
    white-space: normal;
}

.mw-qstatus[b-2wsi2gryvj] {
    flex: none;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.mw-qstatus-applied[b-2wsi2gryvj] {
    color: var(--sheet-select);
}

.mw-qstatus-failed[b-2wsi2gryvj] {
    color: var(--danger, #b02a20);
    font-weight: var(--font-weight-bold);
}

/* /Shared/Inventory/Worksheets/WorkbookPicker.razor.rz.scp.css */
/* WorkbookPicker — the in-cell list control.

   Colours are the shared --sheet-* tokens, the same ones the workbook's own chrome uses.
   ⛔ Do not mint near-miss values here: the pre-push css-duplicate-audit counts cross-file
   duplicate groups, and a second almost-identical palette is what it exists to catch. */
.wp-root[b-2atn3r2kbd] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}

/* The box fills the cell and wears no chrome of its own — a workbook cell that happens to be a
   list, not a form control parked inside a grid. */
.wp-input[b-2atn3r2kbd] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 14px 0 3px;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    color: var(--text-primary);
}

.wp-input[b-2atn3r2kbd]::placeholder {
    color: var(--text-muted);
}

/* Nothing chosen yet. The Owner column has no default on purpose, so an empty picker has to read
   as a question still to be answered rather than as a value. */
.wp-input.wp-unset[b-2atn3r2kbd]::placeholder {
    font-style: italic;
}

.wp-caret[b-2atn3r2kbd] {
    position: absolute;
    right: 3px;
    font-size: 8px;
    color: var(--text-muted);
    pointer-events: none;
}

.wp-open .wp-caret[b-2atn3r2kbd] {
    transform: rotate(180deg);
}

/* ── The list ─────────────────────────────────────────────────────────────────

   Opens downward from the cell. New rows are inserted at the TOP of the sheet, so there is always
   sheet below to open over; the height cap keeps it inside the scroll region even so. */
.wp-list[b-2atn3r2kbd] {
    position: absolute;
    top: 100%;
    left: -1px;
    min-width: calc(100% + 2px);
    max-width: 320px;
    max-height: 224px;
    overflow-y: auto;
    margin: 0;
    padding: 2px 0;
    list-style: none;
    background: var(--sheet-cell-bg);
    border: 1px solid var(--sheet-select);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-md);
}

.wp-opt[b-2atn3r2kbd] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 8px;
    white-space: nowrap;
    cursor: pointer;
}

.wp-opt:hover[b-2atn3r2kbd] {
    background: var(--sheet-header-bg);
}

/* The keyboard's position in the list. Distinct from .wp-cur, which is what is already chosen —
   arrowing past the current choice must not make the two look like the same thing. */
.wp-hi[b-2atn3r2kbd] {
    background: var(--sheet-header-active-bg);
    color: var(--sheet-header-active-fg);
}

.wp-cur .wp-label[b-2atn3r2kbd] {
    font-weight: var(--font-weight-semibold);
}

.wp-code[b-2atn3r2kbd] {
    min-width: 42px;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.wp-hi .wp-code[b-2atn3r2kbd] {
    color: inherit;
}

.wp-label[b-2atn3r2kbd] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.wp-none[b-2atn3r2kbd] {
    padding: 4px 8px;
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
}

/* The create row: an action at the foot of the list, in the sheet's own green so it reads as a
   lever rather than one more option. Highlighted, it takes the same colours as any option. */
.wp-add[b-2atn3r2kbd] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 4px 8px;
    border-top: 1px solid var(--sheet-header-border);
    color: var(--sheet-select);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
    cursor: pointer;
}

.wp-add:hover[b-2atn3r2kbd] {
    background: var(--sheet-header-bg);
}

.wp-add.wp-hi[b-2atn3r2kbd] {
    color: var(--sheet-header-active-fg);
}

/* NewAtTop: the same row, first instead of last — the hairline moves to the OTHER edge so it
   still reads as a tool row set apart from the options beneath it, not stitched onto them. */
.wp-add-top[b-2atn3r2kbd] {
    margin-top: 0;
    margin-bottom: 2px;
    border-top: none;
    border-bottom: 1px solid var(--sheet-header-border);
}
/* /Shared/Inventory/Worksheets/WorksheetSurface.razor.rz.scp.css */
/* Blank worksheet surface. Hosted in ManagerShell's .ms-overlay, which is a flex column with
   overflow hidden — so this root takes the free space and owns its own scrolling. */
.sheet-surface[b-350z730by2] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    background: var(--sheet-cell-bg);
    font-family: var(--sheet-font);
}

/* ── Name box + formula bar ───────────────────────────────────────────────── */
.sheet-bar[b-350z730by2] {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 6px;
    background: var(--sheet-chrome-bg);
    border-bottom: 1px solid var(--sheet-header-border);
}

.sheet-namebox[b-350z730by2],
.sheet-formula[b-350z730by2] {
    padding: 3px 8px;
    background: var(--sheet-cell-bg);
    border: 1px solid var(--sheet-header-border);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-md);
    line-height: 1.3;
    min-height: 24px;
}

.sheet-namebox[b-350z730by2] {
    width: 96px;
    flex: none;
    font-variant-numeric: tabular-nums;
}

.sheet-formula[b-350z730by2] {
    flex: 1;
    min-width: 0;
    font-family: inherit;
    color: var(--text-primary);
}

.sheet-formula:focus[b-350z730by2] {
    outline: none;
    border-color: var(--sheet-select);
}

.sheet-fx[b-350z730by2] {
    padding: 0 10px;
    font-style: italic;
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    color: var(--sheet-header-fg);
}

/* ── Scroll region ────────────────────────────────────────────────────────── */
.sheet-scroll[b-350z730by2] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    outline: none;
}

.sheet-scroll:focus-visible[b-350z730by2] {
    outline: 2px solid var(--sheet-select);
    outline-offset: -2px;
}

/* border-collapse stays SEPARATE: `collapse` drops the borders off position:sticky headers in
   Chrome, and the frozen row/column headers are the whole point. Each cell therefore paints only
   its right + bottom edge, so the lines stay 1px instead of doubling. */
.sheet-grid[b-350z730by2] {
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-size: var(--font-size-md);
    color: var(--text-primary);
}

.sheet-cell[b-350z730by2],
.sheet-colhead[b-350z730by2] {
    width: 64px;
    min-width: 64px;
}

.sheet-corner[b-350z730by2],
.sheet-rowhead[b-350z730by2] {
    width: 40px;
    min-width: 40px;
}

.sheet-cell[b-350z730by2],
.sheet-colhead[b-350z730by2],
.sheet-rowhead[b-350z730by2],
.sheet-corner[b-350z730by2] {
    height: 21px;
    padding: 0 4px;
    border-right: 1px solid var(--sheet-gridline);
    border-bottom: 1px solid var(--sheet-gridline);
    font-weight: var(--font-weight-normal);
}

.sheet-cell[b-350z730by2] {
    position: relative;
    background: var(--sheet-cell-bg);
    cursor: cell;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
}

/* Excel right-aligns anything it reads as a number. The full text is always legible in the
   formula bar, so a cell that outgrows its column clips rather than reflowing the grid. */
.sheet-cell.num[b-350z730by2] {
    text-align: right;
}

/* The in-cell editor fills the cell exactly, so committing an edit does not visibly shift the
   text by a pixel. It sits inside the selection outline rather than drawing its own. */
.sheet-editor[b-350z730by2] {
    position: absolute;
    inset: 0;
    width: 100%;
    padding: 0 3px;
    border: 0;
    outline: none;
    background: var(--sheet-cell-bg);
    font: inherit;
    color: var(--text-primary);
    text-align: inherit;
}

/* Headers: the z-index rungs sit inside the documented in-flow band (--z-base = sticky headers
   inside content). Row headers must beat cells, column headers must beat row headers as the sheet
   scrolls sideways, and the corner must beat both. */
.sheet-colhead[b-350z730by2],
.sheet-rowhead[b-350z730by2],
.sheet-corner[b-350z730by2] {
    position: sticky;
    background: var(--sheet-header-bg);
    color: var(--sheet-header-fg);
    border-right-color: var(--sheet-header-border);
    border-bottom-color: var(--sheet-header-border);
    text-align: center;
    font-size: var(--font-size-sm);
    user-select: none;
}

.sheet-rowhead[b-350z730by2] {
    left: 0;
    z-index: var(--z-base);
}

.sheet-colhead[b-350z730by2] {
    top: 0;
    z-index: calc(var(--z-base) + 1);
}

.sheet-corner[b-350z730by2] {
    top: 0;
    left: 0;
    z-index: calc(var(--z-base) + 2);
}

.sheet-colhead.active[b-350z730by2],
.sheet-rowhead.active[b-350z730by2] {
    background: var(--sheet-header-active-bg);
    color: var(--sheet-header-active-fg);
    font-weight: var(--font-weight-semibold);
}

/* Excel's selection box is drawn OUTSIDE the gridlines; an outline keeps it off the box model so
   selecting a cell cannot nudge the grid. */
.sheet-cell.selected[b-350z730by2] {
    outline: 2px solid var(--sheet-select);
    outline-offset: -1px;
}

/* The fill handle. Purely the look of one — it does not drag, because there is nothing to fill. */
.sheet-cell.selected[b-350z730by2]::after {
    content: "";
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 6px;
    height: 6px;
    background: var(--sheet-select);
    border: 1px solid var(--sheet-cell-bg);
}

/* ── Sheet tab strip ──────────────────────────────────────────────────────── */
.sheet-tabs[b-350z730by2] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 3px 8px;
    background: var(--sheet-chrome-bg);
    border-top: 1px solid var(--sheet-header-border);
}

.sheet-tab[b-350z730by2] {
    appearance: none;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 3px 14px;
    font-family: inherit;
    font-size: var(--font-size-md);
    color: var(--sheet-header-fg);
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    cursor: default;
}

.sheet-tab.active[b-350z730by2] {
    background: var(--sheet-cell-bg);
    border-bottom-color: var(--sheet-select);
    color: var(--sheet-select);
    font-weight: var(--font-weight-semibold);
}

.sheet-note[b-350z730by2] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* /Shared/LabelProofPickerPanel.razor.rz.scp.css */
/* Proof picker. A grid of faces, because that is the whole point of a proof: a project with no
   label needs something recognisable to look at.

   Layout comes from the shared utilities in site.css — nwc-stack-md / nwc-row-sm / nwc-center /
   nwc-stack-3xs / nwc-truncate, and nwc-empty for the empty states. Only the deltas live here. */

/* + nwc-stack-md */
.lpp[b-5594fz3fdn] {
    min-height: 0;
    height: 100%;
}

/* --- search ------------------------------------------------------------- */

/* + nwc-row-sm */
.lpp-search[b-5594fz3fdn] {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-default);
    flex: 0 0 auto;
}

.lpp-search:focus-within[b-5594fz3fdn] {
    border-color: var(--border-focus);
}

.lpp-search > i[b-5594fz3fdn] {
    color: var(--gray-500);
}

.lpp-search-input[b-5594fz3fdn] {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    font-size: var(--font-size-md);
    color: var(--text-primary);
    min-width: 0;
}

.lpp-search-clear[b-5594fz3fdn] {
    border: 0;
    background: transparent;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0 var(--space-2xs);
    line-height: 1;
}

.lpp-search-clear:hover[b-5594fz3fdn] {
    color: var(--text-primary);
}

/* --- the grid ----------------------------------------------------------- */

.lpp-grid[b-5594fz3fdn] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: var(--space-md);
    overflow-y: auto;
    min-height: 0;
    padding-bottom: var(--space-sm);
}

.lpp-card[b-5594fz3fdn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    position: relative;
    padding: var(--space-sm);
    text-align: left;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-default);
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.lpp-card:hover[b-5594fz3fdn] {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

/* The picked card has to read as picked from across the room — this is the one thing the grid
   exists to tell you. */
.lpp-card.is-picked[b-5594fz3fdn] {
    border-color: var(--blue-600);
    box-shadow: 0 0 0 2px var(--blue-100);
}

/* + nwc-center */
.lpp-thumb[b-5594fz3fdn] {
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    overflow: hidden;
}

.lpp-thumb img[b-5594fz3fdn] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* A proof with no raster is still a real link — say so quietly rather than hiding the row. */
.lpp-thumb > i[b-5594fz3fdn] {
    font-size: 1.8rem;
    color: var(--gray-400);
}

/* + nwc-stack-3xs. min-width:0 so the truncating children below actually truncate. */
.lpp-meta[b-5594fz3fdn] {
    min-width: 0;
}

/* + nwc-truncate */
.lpp-name[b-5594fz3fdn] {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

/* + nwc-truncate */
.lpp-sub[b-5594fz3fdn] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.lpp-tag[b-5594fz3fdn] {
    font-size: var(--font-size-xs);
    color: var(--gray-500);
}

/* + nwc-center */
.lpp-picked-mark[b-5594fz3fdn] {
    position: absolute;
    top: var(--space-xs);
    right: var(--space-xs);
    width: 1.35rem;
    height: 1.35rem;
    border-radius: var(--radius-pill);
    background: var(--blue-600);
    color: var(--white);
    font-size: var(--font-size-xs);
}

/* The detach tile. Deliberately plain — it is an escape hatch, not a peer of the proofs. */
.lpp-card-none .lpp-thumb-none[b-5594fz3fdn] {
    border: 1px dashed var(--border-default);
    background: transparent;
}

/* This one line is long enough to need two — it beats nwc-truncate on specificity. */
.lpp-card-none .lpp-sub[b-5594fz3fdn] {
    white-space: normal;
}

/* --- empty / error deltas over .nwc-empty -------------------------------- */

.lpp-hint[b-5594fz3fdn] {
    font-size: var(--font-size-sm);
    max-width: 30ch;
}

.lpp-bad i[b-5594fz3fdn] {
    color: var(--red-500);
}

.lpp-retry[b-5594fz3fdn] {
    margin-top: var(--space-sm);
    padding: var(--space-2xs) var(--space-md);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-default);
    color: var(--text-primary);
    cursor: pointer;
}
/* /Shared/LookupSplitPanel.razor.rz.scp.css */
/* No rule for .lookup-split-toggle on purpose. It used to be .booking-lookup-toolbar — a
   full-width `display:flex; justify-content:flex-end` bar above the split, whose entire job was
   right-aligning one small button at the cost of ~45px of the form's vertical budget. The toggle
   now sits inside .sliding-panel-title, which is already a centered flex row with a gap, so the
   bar and its rule are both gone. The layout classes the shell composes (.booking-lookup-shell,
   .sidebar-collapsed, .nwc-sidebar-split-*) stay in site.css — other patterns share them. */

/* Sticky action bar. Pattern 17 deliberately leaves the split itself `overflow: visible` (so the
   typeahead dropdowns aren't clipped), which means the panel's OWN body is the form's single scroll
   region — and without this the Submit/Close/Delete All row scrolls off the bottom the moment a
   booking has more than one load. The aside is usually far taller than the form, so the row also
   used to land hundreds of px below the last field, in the middle of the drawer's dead space.
   Full-bleed via negative margins that cancel .sliding-panel-body's md/lg padding, so the bar seats
   on the panel edge instead of floating inside a gutter. */

/* ⛔ padding-bottom is a TASKBAR GUTTER, not spacing taste — do not tidy it back to --space-md.
   .sliding-panel is height:100dvh anchored to the viewport, so this sticky bar IS the last band
   of the screen. At --space-md the Submit button's bottom edge sat 12px above the Windows
   taskbar, which on a maximized window is close enough to overshoot into (Jeff, 2026-08-08:
   "the submit is practically behind the taskbar"). --space-xl doubles the clearance to 24px.
   ⚠ This is the SCOPED half of the fix — it buys clearance without touching the shared panel.
   The structural version is insetting .sliding-panel off the bottom edge in
   SlidingPanel.razor.css, which changes EVERY panel in the app and is a deliberate call, not a
   drive-by. Not taken. */

/* ⚠ 2026-08-17, Jeff: "the footer ... is too big there is too much space between the buttons and
   the bottom and top for only 2 buttons." Only the TOP was reclaimed here — margin-top went
   --space-md → --space-2xs, dropping the dead band between the last field and the divider.
   ⛔ padding-bottom stayed --space-xl on purpose: it is the taskbar gutter above, from Jeff's
   OWN 08-08 complaint, so trimming it to satisfy the 08-17 one just re-opens the 08-08 one. The
   two requests genuinely conflict, and the only fix that serves both is the structural inset
   named above (SlidingPanel bottom edge, app-wide) — still Jeff's call, still not taken. */
/* ⛔ The negative margins must cancel .sliding-panel-body's ACTUAL padding, which is
   `var(--space-sm) var(--space-md)` (SlidingPanel.razor.css) — 8px vertical, 12px horizontal.
   They cancelled --space-lg (16px) horizontally, so the bar overhung the body by 4px a side and
   the panel grew a horizontal scrollbar across its whole width. MEASURED in Jeff's Chrome at
   1536x695: body clientWidth 1433 vs scrollWidth 1437, with the footer 1441 wide inside a 1409
   content box — every other element (sheet 979, main 1009, aside 400) fitted exactly.
   ⚠ A 4px overhang is far too small to read as "the footer is too wide"; it shows up only as a
   scrollbar on an axis nothing should scroll, which is why it survived the layout pass. */
.lookup-split-footer[b-26azq9gknx] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: var(--space-2xs) calc(-1 * var(--space-md)) calc(-1 * var(--space-sm));
  padding: var(--space-sm) var(--space-md) var(--space-xl);
  background: var(--surface-default);
  border-top: 1px solid var(--nwc-border);
}
/* /Shared/LotNotes/LotNoteAttachmentLinks.razor.rz.scp.css */
/* Files attached to a lot note. Prefix wlna-. Tokens only. */

.wlna[b-36r15tezdy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.wlna-file[b-36r15tezdy] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    max-width: 100%;
    padding: var(--space-3xs) var(--space-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text-link);
    font-size: 0.8125rem;
    cursor: pointer;
}

.wlna-file:hover[b-36r15tezdy] {
    border-color: var(--border-strong);
}

.wlna-file:disabled[b-36r15tezdy] {
    cursor: progress;
    opacity: 0.7;
}

.wlna-size[b-36r15tezdy] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.wlna-error[b-36r15tezdy] {
    flex-basis: 100%;
    margin: 0;
    color: var(--danger);
    font-size: 0.8125rem;
}
/* /Shared/LotNotes/WineLotNotes.razor.rz.scp.css */
/* Wine lot notes. Prefix wln-. Tokens only — see docs/LAYOUT-PATTERNS.md before adding a rule here. */

/* ⛔ No .wln stack rule here: the markup wears .nwc-stack-md, the shared utility that already
   holds that exact shape. A local copy is what the pre-push drift gate counts. */

/* ── Composer ──────────────────────────────────────────────────────────────────────────────── */

.wln-start[b-6hiyh4n71e] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-align: left;
    cursor: pointer;
}

.wln-start:hover[b-6hiyh4n71e] {
    border-color: var(--border-strong);
    color: var(--text-primary);
}

/* Stacking comes from .nwc-stack-sm in the markup — only the surface is local. */
.wln-composer[b-6hiyh4n71e] {
    padding: var(--space-md);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--surface-muted);
}

.wln-composer-row[b-6hiyh4n71e] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

/* Stacking comes from .nwc-stack-3xs in the markup. */
.wln-field[b-6hiyh4n71e] {
    min-width: 9rem;
}

.wln-field label[b-6hiyh4n71e] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.wln-body[b-6hiyh4n71e] {
    resize: vertical;
}

.wln-backdated[b-6hiyh4n71e],
.wln-error[b-6hiyh4n71e] {
    margin: 0;
    font-size: 0.8125rem;
}

.wln-backdated[b-6hiyh4n71e] {
    color: var(--text-muted);
}

.wln-error[b-6hiyh4n71e] {
    color: var(--danger);
}

/* ── Feed ──────────────────────────────────────────────────────────────────────────────────── */

.wln-msg[b-6hiyh4n71e] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* The heading over the InnoVint documents. Stacking comes from .nwc-stack-md on the parent. */
.wln-section-head[b-6hiyh4n71e] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.wln-section-title[b-6hiyh4n71e] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wln-note[b-6hiyh4n71e] {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-default);
}

/* ⛔ Struck through, never hidden. A withdrawn note is part of the record — the reason it was
   withdrawn is often the more useful half. */
.wln-note-retracted .wln-note-body[b-6hiyh4n71e] {
    text-decoration: line-through;
    color: var(--text-disabled);
}

.wln-note-head[b-6hiyh4n71e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-2xs);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.wln-kind[b-6hiyh4n71e] {
    padding: 0.05rem var(--space-xs);
    border-radius: var(--radius-pill);
    background: var(--surface-emphasis);
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.wln-kind-tasting[b-6hiyh4n71e] {
    background: color-mix(in srgb, var(--text-link) 14%, transparent);
    color: var(--text-link);
}

.wln-kind-intent[b-6hiyh4n71e] {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}

.wln-author[b-6hiyh4n71e] {
    color: var(--text-secondary);
    font-weight: 600;
}

.wln-badge[b-6hiyh4n71e] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0.05rem var(--space-xs);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-pill);
}

.wln-badge-inherited[b-6hiyh4n71e] {
    border-style: dashed;
}

.wln-retract-btn[b-6hiyh4n71e] {
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-decoration: underline;
    cursor: pointer;
}

.wln-retract-btn:hover[b-6hiyh4n71e] {
    color: var(--danger);
}

.wln-note-body[b-6hiyh4n71e] {
    margin: 0;
    color: var(--text-primary);
    white-space: pre-wrap;
}

.wln-retracted-why[b-6hiyh4n71e] {
    margin: var(--space-2xs) 0 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.wln-retract[b-6hiyh4n71e] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}
/* /Shared/LotNotes/WineLotNoteSnapshot.razor.rz.scp.css */
/* One note's frozen context. Prefix wlns-. */

.wlns[b-daumwxs8l9] {
    margin-top: var(--space-xs);
    padding-top: var(--space-xs);
    border-top: 1px dashed var(--border-subtle);
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* The collapsed row. Reads as a quiet affordance, not a button competing with the note. */
.wlns-toggle[b-daumwxs8l9] {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-muted);
    cursor: pointer;
}

.wlns-toggle:hover[b-daumwxs8l9],
.wlns-toggle:focus-visible[b-daumwxs8l9] {
    color: var(--text-secondary);
    text-decoration: underline;
}

.wlns-body[b-daumwxs8l9] {
    margin-top: var(--space-2xs);
}

.wlns-was[b-daumwxs8l9] {
    margin: 0 0 var(--space-3xs);
    color: var(--text-secondary);
}

/* One breakdown per line — the facet name quiet, the components carrying the weight. */
.wlns-comp[b-daumwxs8l9] {
    margin: 0 0 var(--space-3xs);
    color: var(--text-secondary);
}

.wlns-comp-facet[b-daumwxs8l9] {
    margin-right: var(--space-3xs);
    color: var(--text-muted);
}

.wlns-comp-asof[b-daumwxs8l9] {
    margin: 0 0 var(--space-3xs);
    color: var(--text-muted);
    font-style: italic;
}

/* Where the fruit came from. One block per line — a wall of chips reads as tags, and
   these are places, not labels. */
.wlns-fruit[b-daumwxs8l9] {
    margin: 0 0 var(--space-3xs);
    padding: 0;
    list-style: none;
}

.wlns-fruit-row[b-daumwxs8l9] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-3xs) var(--space-2xs);
}

.wlns-fruit-where[b-daumwxs8l9] {
    color: var(--text-secondary);
}

.wlns-fruit-what[b-daumwxs8l9],
.wlns-fruit-tons[b-daumwxs8l9] {
    color: var(--text-muted);
}

.wlns-fruit-tons[b-daumwxs8l9] {
    font-variant-numeric: tabular-nums;
}

.wlns-readings[b-daumwxs8l9] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.wlns-reading[b-daumwxs8l9] {
    display: flex;
    align-items: baseline;
    gap: var(--space-3xs);
}

.wlns-analyte[b-daumwxs8l9] {
    color: var(--text-muted);
}

.wlns-value[b-daumwxs8l9] {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* The per-reading age is the honest half of the block — never dim it out of sight. */
.wlns-when[b-daumwxs8l9] {
    color: var(--text-muted);
    font-style: italic;
}

.wlns-none[b-daumwxs8l9],
.wlns-mismatch[b-daumwxs8l9],
.wlns-unavailable[b-daumwxs8l9] {
    margin: 0;
}

.wlns-unavailable[b-daumwxs8l9] {
    color: var(--danger);
}

.wlns-why[b-daumwxs8l9] {
    color: var(--text-muted);
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-xoa4iblbny] {
  position: relative;
  display: flex;
  flex-direction: column;
}

.custom[b-xoa4iblbny] {
  padding-right: var(--space-sm) !important;
  padding-left: var(--space-sm) !important;
}

main[b-xoa4iblbny] {
  flex: 1;
  min-width: 0;
}

.sidebar[b-xoa4iblbny] {
  background-image: var(--app-shell-gradient);
  overflow-y: auto;
}

/* The collapsed icon rail (NavRail) is desktop-only; hidden by default so mobile
   keeps the full overlay drawer + bottom nav. MainLayout renders BOTH .sidebar-full
   (NavMenu) and .sidebar-rail (NavRail); the >=768px rules below swap them on
   `.page.drawer-collapsed`. */
.sidebar-rail[b-xoa4iblbny] {
  display: none;
}

@media (max-width: 767.98px) {
  /* Mobile breakpoint aligned to Bootstrap's `md` (768px) so the overlay/
     desktop-sidebar switch happens at the SAME width as the bottom nav and
     hamburger (both `d-md-none`). Previously this split at 641px while those
     split at 768px, leaving a 641–767px dead-band where the desktop sidebar,
     the bottom bar and the hamburger all rendered at once and the collapse
     rules never applied — the "doesn't collapse well" symptom. */

  /* The fixed top-left drawer-toggle only drives the DESKTOP sidebar collapse
     (.drawer-collapsed). On mobile the entry point is the bottom nav, so hide
     this control here — it was the third competing open/close affordance.
     !important is required: the base `.drawer-toggle { display: inline-flex }`
     rule below is later in source order and equal specificity, so without it
     the base rule wins even under this media query (the panel icon stayed
     visible-but-dead on mobile since #88). */
  .drawer-toggle[b-xoa4iblbny] {
    display: none !important;
  }

  /* Mobile: sidebar becomes overlay, no fixed width */
  .sidebar[b-xoa4iblbny] {
    width: auto;
    height: auto;
    position: relative;
  }

  /* Prevent body scroll when mobile menu is open */
  .page:has(.sidebar.collapse.show)[b-xoa4iblbny] {
    overflow: hidden;
  }

  /* Clear the fixed BottomNav bar so the last content rows aren't hidden behind it. */
  main[b-xoa4iblbny] {
    padding-bottom: var(--bottom-nav-clearance);
  }
}

@media (min-width: 768px) {
  .page[b-xoa4iblbny] {
    flex-direction: row;
  }

  .sidebar[b-xoa4iblbny] {
    width: var(--nav-drawer-width);

    /* ⛔ THE double-scrollbar fix (Jeff, 2026-08-22 — "two scrollbars / scrolling feels dead").
       This element is the tallest child of `.page`, so IT sets the document's height. The
       EnvironmentBanner above `.page` is `position: sticky` = in flow, so it displaces `.page`
       downward by its own height; a plain `100vh` here therefore made the document exactly one
       banner taller than the viewport, producing an outer scrollbar with ~26px of travel that
       scrolls nothing, right next to the page's real inner one.
       `--env-banner-h` is 0px whenever the banner is absent, so PRODUCTION resolves this to
       `calc(100dvh - 0px)` = the previous `100dvh` exactly. This is a dev-visible fix with no
       production behaviour change.
       ⛔ The height must stay DEFINITE — `auto` lets the nav content (~783px, taller than the
       viewport) grow the sidebar and the overflow gets WORSE, measured 41px. The internal
       `overflow: hidden auto` below depends on this being a real height. */
    height: calc(100vh - var(--env-banner-h, 0px));
    height: calc(100dvh - var(--env-banner-h, 0px));
    position: sticky;
    top: var(--env-banner-h, 0px);
    z-index: var(--z-slot-badge);
    transition: width var(--transition-slow), min-width var(--transition-slow);
    overflow: hidden auto;
  }

  /* When the user collapses the drawer, the sidebar narrows to a 56px icon rail
     (NavRail) instead of vanishing — the full drawer is swapped out for the rail
     and the width animates. Sticky-position + transition cooperate because both
     width and min-width animate together. */
  .page.drawer-collapsed .sidebar[b-xoa4iblbny] {
    width: var(--nav-rail-width);
    min-width: var(--nav-rail-width);
  }

  .page.drawer-collapsed .sidebar-full[b-xoa4iblbny] {
    display: none;
  }

  .page.drawer-collapsed .sidebar-rail[b-xoa4iblbny] {
    display: block;
  }

  article[b-xoa4iblbny] {
    padding-left: var(--space-2xl) !important;
    padding-right: var(--space-xl) !important;
  }
}

/* Drawer toggle — fixed to the viewport so it stays reachable whether the
   drawer is open or collapsed. Sits above the sidebar's z-index (1050) so it
   doesn't get hidden behind the gradient when expanded. */
/* Quiet, borderless affordance — mirrors the ManagerShell in-pane collapse
   buttons. Reads as "sidebar control" rather than a competing close-window X. */
.drawer-toggle[b-xoa4iblbny] {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: var(--z-theme-toggle);
  width: 1.8rem;
  height: 1.8rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--on-shell-fg);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.drawer-toggle:hover[b-xoa4iblbny] {
  background: var(--on-shell-hover-bg-strong);
  color: var(--white);
}

.drawer-toggle:focus-visible[b-xoa4iblbny] {
  outline: 2px solid var(--on-shell-fg-faint);
  outline-offset: 2px;
}

.drawer-toggle:active[b-xoa4iblbny] {
  transform: scale(0.94);
}

/* When the drawer is collapsed the gradient is gone — use a darker glyph
   so the affordance stays legible against the page background. */
.page.drawer-collapsed .drawer-toggle[b-xoa4iblbny] {
  color: var(--text-secondary);
}

.page.drawer-collapsed .drawer-toggle:hover[b-xoa4iblbny] {
  background: var(--app-shell-toggle-hover-bg);
  color: var(--app-shell-toggle-fg);
}

/* When the drawer is collapsed, drift the toggle's left edge in slightly so it
   reads as the page-level affordance rather than a remnant of the gradient. */
.page.drawer-collapsed .drawer-toggle[b-xoa4iblbny] {
  left: var(--space-sm);
}


@media print {
  .no-print[b-xoa4iblbny], .no-print *[b-xoa4iblbny] {
    display: none !important;
  }
}
/* /Shared/MaintenanceBanner.razor.rz.scp.css */
.maintenance-banner[b-086itgtjc8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 1rem;
    background: #fff3cd;
    color: #664d03;
    border-bottom: 1px solid #ffe69c;
    font-size: 0.9rem;
    position: sticky;
    top: 0;
    z-index: var(--z-banner, 1040);
}

.maintenance-message[b-086itgtjc8] {
    font-weight: 600;
}

.maintenance-countdown[b-086itgtjc8] {
    font-variant-numeric: tabular-nums;
}

.maintenance-dismiss[b-086itgtjc8] {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
}
/* /Shared/ManagerShell/ManagerShell.razor.rz.scp.css */
/* ManagerShell — extracted from ContactManager (cm-*) + InventoryManager (im-*) */

/* ⛔ grid-template-COLUMNS is declared, and it is minmax(0, 1fr) — do not delete it as
   redundant. Without it the shell has one implicit `auto` column, which is floored at the
   min-content width of its widest row. Harvest Manager's ribbon carries 10 nowrap tabs
   (~1860px of them), so the column grew to fit them and scrolled the whole DOCUMENT
   sideways at 1366px, dragging the toolbar and "+ Add" off-screen with it.

   .nwc-ribbon-tabs already sets overflow-x:auto for exactly this case, but a scroller only
   scrolls when something upstream constrains its width — and nothing did. Fixing it here
   rather than in the ribbon means every ManagerShell page is covered at once.
   Measured 2026-08-09: `ui-smoke density-sweep --viewport=1366x768` named the offender as
   button.nwc-ribbon-tab right=1860 w=71 — a 71px tab sitting 494px past the viewport. */
.ms-shell[b-5pi7im3904] {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: minmax(0, 1fr);
    /* Fill from the shell's real top edge to the viewport bottom.

       ⛔ The old value was `calc(100vh - 56px)` and 56px measured NOTHING. The only 56px in
       the codebase is `--nav-rail-width` (tokens.css), a WIDTH. Measured on a 1920x1080
       desktop at 125% Windows scaling (1536x695 CSS px, the ordinary setup here): the shell's
       real top is 44px = the 26px EnvironmentBanner + `.content`'s 17.6px padding-top
       (site.css `.content { padding-top: 1.1rem }`; padding-bottom is 0). 44 + (100vh - 56)
       left the shell ending 12px above the viewport floor — dead space on every manager page,
       and 38.4px of it in PRODUCTION, where the banner is absent and the real top is 17.6px.

       Deriving it from the same --env-banner-h the sidebar uses means the two cannot drift,
       and the token is 0px in production, so this resolves to `100vh - 1.1rem` there.

       ⛔ Do NOT replace this with `height: 100%` + a flex chain on main/article. Tested live
       2026-08-22: `main`/`article` have no definite height in this ancestry, so `100%`
       degrades to auto, the shell grew to 998px against a 695px viewport and pushed 303px of
       document overflow — the exact bug this file's sibling rules exist to prevent.
       ⛔ Do NOT "simplify" by dropping the viewport lock so the page scrolls normally. Also
       tested live: the document scroller takes over, `.ms-ribbon-host`'s sticky anchors to the
       wrong scrollport, and the tab strip scrolls off the top — which is the owner report from
       2026-07-22 ("the tab strip hides or goes away") that the pinning below exists to fix. */
    height: calc(100vh - var(--env-banner-h, 0px) - 1.1rem);
    gap: 8px;
    padding: 8px;
    background: var(--gray-100);
}

.ms-filterbar-host[b-5pi7im3904],
.ms-statusbar[b-5pi7im3904] {
    /* Hosts are transparent; consumers style the inner ribbon/filterbar themselves. */
}

/* ⛔ Pin each slot to its OWN row. Do not delete these and go back to auto-flow.

   Three of the four children are conditional (ManagerShell.razor:11 ribbon, :16 filterbar,
   :116 statusbar); only .ms-workspace at :21 always renders. With bare auto-flow every
   omitted slot shifts the rest UP one track, so which track a child lands in depends on how
   many slots its consumer happens to supply — and the `1fr` above is the third track.

   Harvest Manager supplies ribbon + workspace + statusbar and no filterbar, so before this
   rule the workspace landed on the `auto` track and the STATUSBAR inherited the `1fr` and
   absorbed all the free space. Measured at 1920x1080: rows resolved to
   `35.9px / 835.5px / 112.588px / 0px` — a 112.6px status strip that should be ~32px, an
   empty fourth track, and ~80px stolen from .ht-page, which reads as a dead band across the
   bottom of the page. Every consumer that omits any slot has some version of this.

   Explicit placement makes the workspace take the `1fr` regardless of which slots exist.
   Empty tracks resolve to 0px and the gap count is unchanged (4 tracks = 3 gaps either way),
   so this costs no vertical space. */
.ms-ribbon-host[b-5pi7im3904]    { grid-row: 1; }
.ms-filterbar-host[b-5pi7im3904] { grid-row: 2; }
.ms-workspace[b-5pi7im3904]      { grid-row: 3; }
.ms-statusbar[b-5pi7im3904]      { grid-row: 4; }

/* Ribbon host is transparent like the others, but it is ALSO pinned.
   Owner report 2026-07-22 (Harvest Manager, desktop): the tab strip "hides or goes away
   and I have to refresh the browser to get it back." .ms-shell is a fixed-height viewport
   lock, so it only takes one hosted page whose content makes the DOCUMENT taller than the
   viewport for the window itself to scroll — and once the ribbon has scrolled off the top,
   the inner scroll regions (.hd-scroll-area and friends) swallow the wheel, so there is no
   way to scroll back up. Reload was the only recovery, which is exactly the reported shape.
   Sticky makes that unreachable-state impossible for every ManagerShell page at once,
   regardless of which hosted tab caused the overflow. Background is opaque (the shell's own
   --gray-100) so grid content scrolling underneath doesn't show through the tabs. */
.ms-ribbon-host[b-5pi7im3904] {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--gray-100);
}

/* ⛔ The center track is minmax(0, 1fr), NOT 1fr — do not "simplify" it back.
   A bare `1fr` is really `minmax(auto, 1fr)`, so the track can never shrink below its
   content's min-content width. A wide child (Harvest Manager's client table has a
   <colgroup> summing to 1255px) therefore forces the TRACK wider than its share, which
   forces the grid wider than the viewport, which scrolls the whole DOCUMENT sideways —
   dragging the nav, tab strip and toolbar off-screen along with it.

   With minmax(0, …) the track takes the space it is given and the child's own
   overflow-x container does the scrolling, which is where a wide table belongs.
   Measured 2026-08-09 at 1366x768: this, not the table's wrapper, was the binding
   constraint — adding overflow-x to the wrapper alone changed nothing, because the
   parent track simply grew instead. */
.ms-workspace[b-5pi7im3904] {
    display: grid;
    grid-template-columns: var(--ms-tree-w, 240px) 6px minmax(0, 1fr) 6px var(--ms-inspector-w, 320px);
    gap: 0;
    min-height: 0;
}

/* ── A page with no TreeContent was still PAYING for the tree ──────────────────
   The template above always declares five columns, but ManagerShell.razor renders
   the tree pane and its splitter only `@if (TreeContent is not null)`. So a page
   that supplies no tree got an empty 240px track plus its 6px splitter — 246px of
   dead space it could never use, and no element in the DOM to explain it.

   Measured 2026-09-02 at 1536x639 (Chrome, dev): /admin/comms/log had a 1254px
   workspace whose panes totalled 1008px, pushing a 961px table into a 665px pane
   and scrolling the Outcome column off-screen. SIX pages ship without a
   TreeContent — this one plus Harvest Manager, Lab Manager, WineLot Manager,
   TankBoard Manager and Bottling Changes Manager — and none of them worked around
   it, because the cause is invisible from the page.

   Safe because every pane is pinned to an explicit grid-column just below, so
   zeroing tracks 1 and 2 cannot shift anything into the wrong track. */
.ms-shell.ms-no-tree .ms-workspace[b-5pi7im3904] {
    grid-template-columns: 0 0 minmax(0, 1fr) 6px var(--ms-inspector-w, 320px);
}

/* ── ...and the SAME BUG on the other side, unfixed until 2026-09-14 ───────────
   The 09-02 fix above reclaimed the tree track and stopped there, but the
   inspector pane and its splitter are just as conditional
   (`@if (InspectorContent is not null)`), so a page supplying no inspector was
   still paying 320px + a 6px splitter — 326px of dead space with, again, no
   element in the DOM to explain it.

   Measured 2026-09-14 at 1536x695 CSS px (Chrome, dev, Jeff's real viewport):
   /winemaking/tasks-due rendered its grid into ~690px of a ~1030px workspace and
   pushed the DUE column — the one the page is named for — off the right edge.
   THREE pages ship without an InspectorContent: this one plus Harvest Manager and
   Lab Manager, both of which are also treeless, so they were paying BOTH tracks.

   Safe for the same reason the rule above is: every pane is pinned to an explicit
   grid-column below, so zeroing tracks 4 and 5 cannot shift anything. */
.ms-shell.ms-no-inspector .ms-workspace[b-5pi7im3904] {
    grid-template-columns: var(--ms-tree-w, 240px) 6px minmax(0, 1fr) 0 0;
}

.ms-shell.ms-no-tree.ms-no-inspector .ms-workspace[b-5pi7im3904] {
    grid-template-columns: 0 0 minmax(0, 1fr) 0 0;
}

/* Explicit column pins. ManagerShell.razor conditionally omits a pane's
   splitter from the DOM entirely when that pane is collapsed (not just
   display:none) — without a pin, CSS Grid auto-placement then shifts every
   later item left by one track, squeezing ms-pane-grid/ms-pane-inspector
   into the wrong (narrow) tracks and leaving ms-splitter-right to fill the
   1fr track meant for the grid. Pinning each pane to its intended column
   makes placement independent of which siblings are actually present. */
.ms-pane-tree[b-5pi7im3904],
.ms-pane-collapsed-left[b-5pi7im3904] {
    grid-column: 1;
}

.ms-splitter-left[b-5pi7im3904] {
    grid-column: 2;
}

.ms-pane-grid[b-5pi7im3904] {
    grid-column: 3;
}

.ms-splitter-right[b-5pi7im3904] {
    grid-column: 4;
}

.ms-pane-inspector[b-5pi7im3904],
.ms-pane-collapsed-right[b-5pi7im3904] {
    grid-column: 5;
}

/* Collapsed-pane track width is driven by the inline --ms-*-w custom property
   (collapse-aware — see ManagerShell.razor), because an inline custom property
   beats any stylesheet rule. The center grid (1fr) reclaims the freed space. */

/* Hide splitters when the adjacent pane is collapsed (the pane is replaced by a stub). */
.ms-shell.tree-collapsed .ms-splitter-left[b-5pi7im3904],
.ms-shell.inspector-collapsed .ms-splitter-right[b-5pi7im3904] {
    display: none;
}

/* Pane chrome (same look as cm-pane / im-pane). */
.ms-pane[b-5pi7im3904] {
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Overlay mode (replaces tree+grid+inspector). */
.ms-overlay[b-5pi7im3904] {
    grid-column: 1 / -1;
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* ── Splitter handles ─────────────────────────────────────── */
.ms-splitter[b-5pi7im3904] {
    width: 6px;
    cursor: col-resize;
    background: transparent;
    position: relative;
    touch-action: none;
    user-select: none;
}

.ms-splitter[b-5pi7im3904]::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2px;
    width: 2px;
    background: transparent;
    transition: background 120ms ease-in-out;
}

.ms-splitter:hover[b-5pi7im3904]::before,
.ms-splitter:active[b-5pi7im3904]::before {
    background: var(--gray-500);
}

/* ── Collapsed-stub buttons ───────────────────────────────── */
.ms-pane-collapsed[b-5pi7im3904] {
    appearance: none;
    border: 1px solid var(--gray-300);
    background: var(--surface-subtle);
    border-radius: var(--radius-md);
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--gray-600);
    overflow: hidden;
}

.ms-pane-collapsed:hover[b-5pi7im3904] {
    background: var(--surface-default);
    border-color: var(--gray-500);
    color: var(--blue-500);
}

.ms-pane-collapsed i[b-5pi7im3904] {
    font-size: var(--font-size-md);
}

.ms-pane-collapsed-label[b-5pi7im3904] {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-widest);
    font-weight: var(--font-weight-semibold);
}

/* ── Per-pane collapse trigger button (in-pane affordance) ── */
.ms-pane-collapse-btn[b-5pi7im3904] {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    appearance: none;
    border: 0;
    background: var(--surface-default);
    color: var(--gray-500);
    border-radius: var(--radius-xs);
    padding: 2px 4px;
    font-size: var(--font-size-xs);
    cursor: pointer;
}

.ms-pane-collapse-btn-right[b-5pi7im3904] {
    right: auto;
    left: 6px;
}

.ms-pane-collapse-btn:hover[b-5pi7im3904] {
    background: var(--gray-100);
    color: var(--gray-700);
}

/* Statusbar — same vibe as im-statusbar. */
.ms-statusbar[b-5pi7im3904] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--surface-default);
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    color: var(--gray-700);
}

/* Responsive collapses. Placed AFTER the .ms-pane / .ms-pane-collapsed chrome
   rules above (not before, where these originally lived) — those base rules
   also set `display`, and at equal specificity ([class][b-scope] either way),
   source order decides. With the base rules earlier, they were winning over
   these overrides even when the media query matched, so the responsive
   collapse silently never fired at any viewport width. */
@media (max-width: 1200px) {
    .ms-shell[b-5pi7im3904] {
        --ms-inspector-w: 0px;
    }
    .ms-pane-inspector[b-5pi7im3904],
    .ms-pane-collapsed-right[b-5pi7im3904],
    .ms-splitter-right[b-5pi7im3904] {
        display: none;
    }
    .ms-workspace[b-5pi7im3904] {
        grid-template-columns: var(--ms-tree-w, 220px) 6px 1fr;
    }

    /* Same reclaim as the desktop rule above — the inspector is already hidden at
       this width, so a treeless page here is otherwise paying 226px for nothing. */
    .ms-shell.ms-no-tree .ms-workspace[b-5pi7im3904] {
        grid-template-columns: 0 0 1fr;
    }
}

@media (max-width: 768px) {
    .ms-shell[b-5pi7im3904] {
        --ms-tree-w: 0px;
    }
    .ms-pane-tree[b-5pi7im3904],
    .ms-pane-collapsed-left[b-5pi7im3904],
    .ms-splitter-left[b-5pi7im3904] {
        display: none;
    }
    .ms-workspace[b-5pi7im3904] {
        grid-template-columns: 1fr;
    }
    .ms-pane-grid[b-5pi7im3904] {
        grid-column: 1;
    }

    /* ── Release the viewport lock on phones (bug #5) ──────────────────────────
       Desktop keeps the fixed-height shell: panes own their scrolling and the page
       itself never scrolls. On a phone that contract inverts — hosted pages are
       written expecting the PAGE to scroll. ProjectedMain says so explicitly
       (Pages/Projected/projectedMain.razor.css: ".harvest-dashboard { height:auto;
       overflow:visible }", ".hd-scroll-area { overflow:visible }" with the comment
       "No inner scroll region on phone — the page is the scroller").

       That is correct when it renders at its own route under MainLayout. But inside
       ManagerShell's overlay slot it was landing in `.ms-overlay { overflow:hidden }`
       within `.ms-shell { height: calc(100vh - 56px) }`, and nothing here overrode
       either at any width. Result: the child released every inner scroller, the
       parent refused to scroll and clipped the overflow, and NOTHING on the page
       scrolled at all — reported as "Harvest Manager scrolling unresponsive on
       iPhone Chrome... completely unresponsive" (#5).

       Fixed at the shared parent, not per-consumer: every ShowOverlay page
       (Harvest, Compliance/Organic, Contact/Notifications, LabelCola/Extraction,
       Inventory reports) inherits the same lock, and patching each child would be
       the CSS duplication the pre-push drift gate exists to stop.

       min-height keeps short pages from collapsing to a stub. The sticky
       .ms-ribbon-host above now sticks against the document scroller here instead of
       never engaging — which is what it was added for; there is no fixed page header
       on mobile for it to collide with. */
    .ms-shell[b-5pi7im3904] {
        height: auto;
        min-height: calc(100vh - 56px);
    }

    .ms-overlay[b-5pi7im3904] {
        overflow: visible;
    }
}
/* /Shared/MonthCalendar.razor.rz.scp.css */
/* ==========================================================================
   MonthCalendar — reusable calendar body grid (see MonthCalendar.razor)

   Owns the outer grid + the .calendar-day cell wrapper only. Cell interior +
   summary table are consumer-rendered, so their styles live with the consumer.
   Day columns are 2fr; the optional trailing summary column uses the global
   --mc-summary-col so a consumer's day-of-week band (which references the same
   var) shares identical tracks and lines up with this grid.
   ========================================================================== */

.flex-grid[b-24j6738q0r] {
    display: grid;
    grid-template-columns: repeat(5, 2fr);
    gap: var(--space-sm);
    padding: 2px;
    text-align: center;
    align-items: stretch;
    min-height: 600px;
    width: 100%;
}

.flex-grid.show-weekends[b-24j6738q0r] {
    grid-template-columns: repeat(7, 2fr);
}

.flex-grid.has-summary[b-24j6738q0r] {
    grid-template-columns: repeat(5, 2fr) var(--mc-summary-col);
}

.flex-grid.has-summary.show-weekends[b-24j6738q0r] {
    grid-template-columns: repeat(7, 2fr) var(--mc-summary-col);
}

/* Weekend cells hidden by default; revealed by the toggle. Keeping them in the DOM
   (display:none, not removed) holds the visible-cells-per-week count at 5 so the
   summary cell auto-flows into the last column. */
.calendar-day.weekend[b-24j6738q0r] {
    display: none;
}

.flex-grid.show-weekends .calendar-day.weekend[b-24j6738q0r] {
    display: block;
}

/* --------------------------------------------------------------------------
   Calendar Day Cell wrapper
   -------------------------------------------------------------------------- */
.calendar-day[b-24j6738q0r] {
    border-radius: 5px;
    background-color: var(--surface-default);
    box-shadow: 0px 0px 4px var(--calendar-cell-shadow);
    box-sizing: border-box;
    font-size: 1em;
    position: relative;
}

.calendar-day:hover[b-24j6738q0r] {
    box-shadow: var(--calendar-hover-shadow);
}

.currentDay[b-24j6738q0r] {
    box-shadow: var(--calendar-today-glow) 0px 54px 6px, var(--calendar-today-glow) 0px -12px 6px, var(--calendar-today-glow) 0px 4px 6px, var(--calendar-today-glow) 0px 12px 6px, var(--calendar-today-glow) 0px -3px 6px;
}
/* /Shared/NavButtonNavMenu.razor.rz.scp.css */
.fixed-top[b-rt2qrrqjc3] {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: var(--z-page-header-fixed);
   max-height:90px;
   overflow-y:auto;
}

.navbar[b-rt2qrrqjc3] {
   background-image: var(--app-shell-gradient);
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   z-index: var(--z-navbar);
}

.nav[b-rt2qrrqjc3] {
   display: flex;
   flex-direction: row;
   padding-left: 0;
   margin-bottom: 0;
   list-style: none;
}

.nav-item[b-rt2qrrqjc3] {
   font-size: var(--font-size-base);
   padding: var(--space-sm);
}

.nav-link[b-rt2qrrqjc3] {
   display: flex;
   align-items: center;
   line-height: 3rem;
}


.navbar-brand[b-rt2qrrqjc3] {
   font-size: var(--font-size-xl);
}

/*.oi {
   width: 2rem;
   font-size: var(--font-size-xl);
   vertical-align: text-top;
   top: -2px;
}*/



   .nav-item:first-of-type[b-rt2qrrqjc3] {
      padding-top: .5rem;
   }

   .nav-item:last-of-type[b-rt2qrrqjc3] {
      padding-bottom: .5rem;
   }

   .nav-item[b-rt2qrrqjc3]  a {
      color: var(--on-shell-fg-muted);
      border-radius: var(--radius-sm);
      height: 2rem;
      display: flex;
      align-items: center;
      line-height: 3rem;
   }

      .nav-item[b-rt2qrrqjc3]  a.active {
         background-color: var(--on-shell-pressed-bg-strong);
         color: var(--white);
      }

      .nav-item[b-rt2qrrqjc3]  a:hover {
         background-color: var(--on-shell-hover-bg);
         color: var(--white);
      }

.caret[b-rt2qrrqjc3] {
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 4px solid;
   display: inline-block;
   height: 0;
   margin-left: 10px;
   vertical-align: middle;
   width: 0;
}

/*.nav-link {
   padding-bottom: 2em;
   padding-top: 2em;
}*/

/*.navbar-toggler {
   background-color: rgba(255, 255, 255, 0.1);
}*/


/* /Shared/NavButtonTopLayout.razor.rz.scp.css */
body[b-atju02hdxa], html[b-atju02hdxa] {
  height: 100%;
  margin: 0;
  padding: 0;
}

.page[b-atju02hdxa] {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
}

.header[b-atju02hdxa] {
  height: 90px;
  background-color: var(--gray-50);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-page-header-fixed);
}

.content[b-atju02hdxa] {
  margin-top: 0px; /* space for the fixed header */
}

.scrollable-list[b-atju02hdxa] {
  max-height: calc(100vh - 90px); /* full height minus the header height */
  overflow-y: auto;
  background-color: var(--gray-50);
  padding-top: 10px;
}

.col-9[b-atju02hdxa], .col-3[b-atju02hdxa] {
  padding: 0;
}

/* Clear the fixed bottom nav bar (<MobileNavShell />, 4rem + safe-area) on mobile
   so the last content rows aren't hidden behind it. */
@media (max-width: 767.98px) {
  .content[b-atju02hdxa] {
    padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    /* No fixed header on mobile — reclaim the mt-5/pt-4 offset that cleared it.
       !important needed to beat the Bootstrap utility classes' own !important. */
    margin-top: 0 !important;
    padding-top: 0.5rem !important;
  }

  /* The bottom nav (<MobileNavShell />) is the single mobile entry point; the
     fixed top button-nav duplicates the drawer's destinations. */
  .header[b-atju02hdxa] {
    display: none;
  }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.nav-label-group[b-lbyr7deu1r] {
    display: block;
    font-size: 0.6rem;
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-shell-fg-subtle);
    padding: 0 var(--space-2xs);
    user-select: none;
}

/* Let the layout gradient show through */
.top-row[b-lbyr7deu1r] {
    height: 3.5rem;
    background: transparent;
    /* Reserve space at the left for the global drawer-toggle (fixed at
       top:0.4rem,left:0.4rem with a 32×32 hit area) so the NWC brand
       doesn't sit underneath it. */
    padding-left: 2.75rem !important;
    padding-right: var(--space-sm);
}

.navmenu-top-row[b-lbyr7deu1r] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    min-width: 0;
}

.navmenu-brand[b-lbyr7deu1r] {
    color: var(--white);
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    flex-shrink: 0;
}

/* User menu pushes to the right edge of the top-row. Holds the inline
   ThemeToggle + the UserMenu badge side-by-side. min-width:0 lets the inner
   user-name truncate cleanly when the drawer is at its 250px width. */
.navmenu-user[b-lbyr7deu1r] {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    margin-left: auto;
    min-width: 0;
    flex: 0 1 auto;
}

/* If an inner .sidebar was added inside NavMenu, keep it transparent so the outer layout gradient shows */
.sidebar[b-lbyr7deu1r] {
    background: transparent !important;
}

/* Optional brand sizing */
.navbar-brand[b-lbyr7deu1r] {
    font-size: var(--font-size-xl);
}

/* Navigation items */
.nav-item[b-lbyr7deu1r] {
    font-size: 0.95rem;
    padding-bottom: 0.35rem;
}

.nav-item:first-of-type[b-lbyr7deu1r] {
    padding-top: var(--space-sm);
}

.nav-item:last-of-type[b-lbyr7deu1r] {
    padding-bottom: var(--space-sm);
}

/* White links on the gradient */
.nav-item[b-lbyr7deu1r]  a {
    color: var(--white);
    border-radius: var(--radius-sm);
    height: auto;
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    line-height: 1.25rem;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}

/* Active/hover on dark gradient */
.nav-item[b-lbyr7deu1r]  a.active {
    background-color: var(--on-shell-active-bg);
    color: var(--white);
}

.nav-item[b-lbyr7deu1r]  a:hover {
    background-color: var(--on-shell-hover-bg);
    color: var(--white);
}

/* Fixed-width icon column so labels align regardless of glyph width. Slightly
   dimmed vs the label so the text stays the primary read. */
.nav-item[b-lbyr7deu1r]  .nav-icon {
    width: 1.35rem;
    margin-right: var(--space-sm);
    flex-shrink: 0;
    text-align: center;
    font-size: 0.95rem;
    opacity: 0.8;
}

/* Caret inherits link color (white); pushed to the right edge of the flex link */
.caret[b-lbyr7deu1r] {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    display: inline-block;
    height: 0;
    margin-left: auto;
    vertical-align: middle;
    width: 0;
}

/* Keep reasonable vertical rhythm */
.nav-link[b-lbyr7deu1r] {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

/* === Submenu indent (slight) === */
.nav.flex-column .nav.flex-column[b-lbyr7deu1r] {
    margin-left: .5rem;
    padding-left: .25rem;
}

.nav.flex-column .nav.flex-column .nav-item[b-lbyr7deu1r] {
    padding-left: .25rem !important;
    padding-right: .25rem !important;
}

.submenu[b-lbyr7deu1r] {
    margin-left: .5rem;
    padding-left: .25rem;
}

.nav-item[b-lbyr7deu1r]  a.nav-link {
    padding: .25rem .5rem;
}

/* ========== CLOSE BUTTON ========== */
.close-menu-btn[b-lbyr7deu1r] {
    display: none; /* Hidden on desktop */
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-dropdown);
}

.close-menu-btn:hover[b-lbyr7deu1r] {
    color: var(--on-shell-fg-strong);
}

/* ========== MOBILE BACKDROP ========== */
.mobile-nav-backdrop[b-lbyr7deu1r] {
    display: none;
}

/* ========== DESKTOP STYLES (768px+) ========== */
/* Breakpoint aligned to Bootstrap `md` (768px) — same width as the bottom nav
   (`d-md-none`) so the drawer and the bottom bar never coexist. */
@media (min-width: 768px) {
    .close-menu-btn[b-lbyr7deu1r] {
        display: none;
    }

    .collapse[b-lbyr7deu1r] {
        display: block;
    }

    .notCollapse[b-lbyr7deu1r] {
        display: none;
    }
}

/* ========== MOBILE STYLES (up to 767.98px) ========== */
@media (max-width: 767.98px) {
    .close-menu-btn[b-lbyr7deu1r] {
        display: flex;
    }

    /* Mobile nav backdrop overlay */
    .mobile-nav-backdrop[b-lbyr7deu1r] {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--overlay-backdrop-strong);
        z-index: var(--z-mobile-nav-backdrop);
    }

    /* Sidebar as full-screen overlay */
    .sidebar[b-lbyr7deu1r] {
        position: fixed !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100% !important;
        height: 100vh !important;
        z-index: var(--z-mobile-nav-sidebar);
        overflow-y: auto;
        padding-top: 3.5rem;
        padding-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom));
        background-image: var(--app-shell-gradient) !important;
    }

    /* Hide menu when collapsed */
    .sidebar.collapse:not(.show)[b-lbyr7deu1r] {
        display: none !important;
    }

    /* Show menu when expanded */
    .sidebar.collapse.show[b-lbyr7deu1r] {
        display: block !important;
    }

    /* Larger touch targets for mobile */
    .nav-item[b-lbyr7deu1r] {
        font-size: var(--font-size-xl);
        padding-bottom: var(--space-2xs);
    }

    .nav-item[b-lbyr7deu1r]  a {
        min-height: 44px;
        padding: var(--space-md) var(--space-lg);
    }

    .nav-item[b-lbyr7deu1r]  a.nav-link {
        min-height: 44px;
        padding: var(--space-md) var(--space-lg);
    }

    /* Submenu items slightly smaller but still touch-friendly */
    .submenu .nav-item[b-lbyr7deu1r]  a {
        min-height: 40px;
        padding: var(--space-sm) var(--space-lg);
    }

    /* More visible active state on mobile */
    .nav-item[b-lbyr7deu1r]  a.active {
        background-color: var(--on-shell-pressed-bg);
    }
}
/* /Shared/NavRail.razor.rz.scp.css */
/* Collapsed icon rail. Sits inside .sidebar (which carries the app-shell gradient), so
   items are white-on-gradient like the full drawer. Item styling uses `.nav-rail ::deep`
   because the items are <NavLink> CHILD components whose rendered <a> does not inherit
   this component's isolation scope (same reason as BottomNav.razor.css). The expand
   <button> is in this component's own markup but ::deep matches it too. */
.nav-rail[b-ngj711n1ug] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: 100%;
    padding: var(--space-sm) 0;
    gap: 2px;
    overflow-x: hidden;
    overflow-y: auto;
}

.nav-rail[b-ngj711n1ug]  .nav-rail-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    margin: 0 var(--space-2xs);
    border: 0;
    background: none;
    border-radius: var(--radius-sm);
    color: var(--white);
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.nav-rail[b-ngj711n1ug]  .nav-rail-item i {
    font-size: 1.2rem;
    line-height: 1;
}

.nav-rail[b-ngj711n1ug]  .nav-rail-item:hover {
    background: var(--on-shell-hover-bg);
}

.nav-rail[b-ngj711n1ug]  .nav-rail-item:focus-visible {
    outline: 2px solid var(--on-shell-fg-faint);
    outline-offset: -2px;
}

/* .active is set by NavLink routing. */
.nav-rail[b-ngj711n1ug]  .nav-rail-item.active {
    background: var(--on-shell-active-bg);
}

/* Subtle group separators on the gradient. */
.nav-rail-divider[b-ngj711n1ug] {
    flex: 0 0 auto;
    height: 1px;
    margin: var(--space-2xs) var(--space-sm);
    background: var(--on-shell-fg-faint);
    opacity: 0.5;
}

/* Expand chevron reads as a quiet control, a notch below the nav icons. */
.nav-rail[b-ngj711n1ug]  .nav-rail-expand {
    color: var(--on-shell-fg-subtle);
}

.nav-rail[b-ngj711n1ug]  .nav-rail-expand:hover {
    color: var(--white);
}

/* Chat button — same 44px target as every other rail item; only the unread pill is new.
   The pill is rendered by ChatUnreadBadge (a CHILD component), so it carries that
   component's isolation scope, not this one — ::deep is required to reach it, the same
   reason the NavLink <a> rules above use it. Anchored to the icon's top-right corner
   because the rail is icon-only: there is no label for the count to sit beside. */
.nav-rail[b-ngj711n1ug]  .nav-rail-chat {
    position: relative;
}

.nav-rail[b-ngj711n1ug]  .nav-rail-chat .chat-unread-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    padding: 0 4px;
    text-align: center;
}
/* /Shared/Notifications/FeatureRecipientPanel.razor.rz.scp.css */
/* Recipient editor — scoped styles. Unique .frp- prefix keeps declaration bodies
   off the css-duplicate-audit gate. Uses the schedule panel's design tokens
   (--text-secondary / --gray-* / --nwc-border-light / --bs-*) so it reads as part
   of the panel and adapts to dark mode. Mirrors the .ses- section-label treatment. */

.frp[b-9zn9azp2jl] {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--nwc-border-light);
}

/* Headless: the host supplied the label, so the rule and the gap would cut that label off from
   the list it names - reading as two sections again, which is the whole thing ShowHeader fixes. */
.frp.frp-headless[b-9zn9azp2jl] {
    margin-top: 6px;
    padding-top: 0;
    border-top: none;
}

.frp-head[b-9zn9azp2jl] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.frp-meta[b-9zn9azp2jl] {
    font-size: 0.78em;
    color: var(--gray-600);
}

.frp-refresh[b-9zn9azp2jl] {
    padding: 0 4px;
    line-height: 1;
    color: var(--gray-600);
}

.frp-hint[b-9zn9azp2jl] {
    font-size: 0.78em;
    color: var(--gray-600);
    line-height: 1.35;
    margin: 0 0 10px;
}

.frp-search[b-9zn9azp2jl] {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.frp-search-icon[b-9zn9azp2jl] {
    position: absolute;
    left: 9px;
    font-size: 0.8em;
    color: var(--gray-600);
    pointer-events: none;
}

.frp-search-input[b-9zn9azp2jl] {
    width: 100%;
    padding: 6px 28px;
    font-size: 0.85em;
    color: var(--text-primary);
    background: var(--gray-50);
    border: 1px solid var(--nwc-border-light);
    border-radius: 6px;
}

.frp-search-input:focus[b-9zn9azp2jl] {
    outline: none;
    border-color: var(--bs-primary);
    background: var(--bs-body-bg);
}

.frp-search-clear[b-9zn9azp2jl] {
    position: absolute;
    right: 6px;
    padding: 2px;
    border: none;
    background: transparent;
    line-height: 1;
    font-size: 0.78em;
    color: var(--gray-600);
    cursor: pointer;
}

.frp-empty[b-9zn9azp2jl] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--gray-600);
    font-size: 0.82em;
    padding: 10px 4px;
}

.frp-error[b-9zn9azp2jl] { color: var(--bs-warning); }

.frp-status[b-9zn9azp2jl] {
    font-size: 0.8em;
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 8px;
}

.frp-status-ok[b-9zn9azp2jl] {
    color: var(--bs-success);
    background: color-mix(in srgb, var(--bs-success) 12%, transparent);
}

.frp-status-err[b-9zn9azp2jl] {
    color: var(--bs-danger);
    background: color-mix(in srgb, var(--bs-danger) 12%, transparent);
}

.frp-list[b-9zn9azp2jl] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
}

.frp-row[b-9zn9azp2jl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-bottom: 1px solid var(--nwc-border-light);
}

.frp-row:last-child[b-9zn9azp2jl] { border-bottom: none; }
.frp-row-on[b-9zn9azp2jl] { background: var(--gray-50); }

.frp-check[b-9zn9azp2jl] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

.frp-check input[type="checkbox"][b-9zn9azp2jl] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.frp-person[b-9zn9azp2jl] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.frp-name[b-9zn9azp2jl] {
    font-size: 0.88em;
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.frp-email[b-9zn9azp2jl] {
    font-size: 0.76em;
    color: var(--gray-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.frp-listtype[b-9zn9azp2jl] {
    flex: 0 0 auto;
}
/* /Shared/Notifications/LabEmailComposePanel.razor.rz.scp.css */
.lab-email-preview[b-2kkjnlxqwp] {
    width: 100%;
    height: 340px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: #fff;
}

.lab-email-preview-empty[b-2kkjnlxqwp] {
    padding: 1rem;
    border: 1px dashed var(--border-default);
    border-radius: 6px;
    text-align: center;
    font-size: 0.875rem;
}

/* The embedded recipient panel brings its own chrome; give it a light card so the three compose
   sections (recipients / subject+instructions / preview) read as distinct steps. */
.lab-email-recipients[b-2kkjnlxqwp] {
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
}
/* /Shared/NwcAppHeader.razor.rz.scp.css */
/* Uniform white page header. Composes the global .nwc-page-header family; this file
   adds the surface, sticky tier, and the on-demand nav drawer. */

.nwc-app-header[b-ybuvu7cgic] {
    background: var(--surface-default);
}

/* Sticky behaviour comes from the global .nwc-sticky-top helper (applied in markup
   when Sticky=true) so the pattern isn't duplicated across scoped stylesheets. */

.nwc-app-header-bar[b-ybuvu7cgic] {
    padding: var(--space-sm) var(--space-md);
}

/* Headers with many controls (e.g. the schedule) wrap their action cluster
   rather than overflow; keep them right-aligned and vertically centered. */
.nwc-app-header-bar .nwc-header-actions[b-ybuvu7cgic] {
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
}

.nwc-app-header-menu[b-ybuvu7cgic] {
    margin-right: var(--space-xs);
    line-height: 1;
}

.nwc-app-header-titletext[b-ybuvu7cgic] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-medium);
}

/* --------------------------------------------------------------------------
   Nav drawer (desktop): a 280px blue slide-in over a dim backdrop. The blue
   gradient matches the app sidebar so the reused NavMenu's white links read.
   -------------------------------------------------------------------------- */
.nwc-nav-drawer-backdrop[b-ybuvu7cgic] {
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop-dim);
    z-index: var(--z-modal);
}

.nwc-nav-drawer[b-ybuvu7cgic] {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    overflow-y: auto;
    z-index: calc(var(--z-modal) + 1);
    background-image: var(--app-shell-gradient);
    box-shadow: var(--nav-drawer-shadow);
    animation: nwc-drawer-slide-in-b-ybuvu7cgic 0.25s ease;
}

@keyframes nwc-drawer-slide-in-b-ybuvu7cgic {
    from { transform: translateX(-100%); }
    to   { transform: translateX(0); }
}

/* Mobile: defer to NavMenu's own full-screen drawer (.sidebar position:fixed
   !important) + its own .mobile-nav-backdrop. Collapse this wrapper to a no-box
   passthrough and drop our backdrop so the two don't fight. */
@media (max-width: 640px) {
    .nwc-nav-drawer[b-ybuvu7cgic] {
        display: contents;
    }
    .nwc-nav-drawer-backdrop[b-ybuvu7cgic] {
        display: none;
    }
}
/* /Shared/ScanUpload.razor.rz.scp.css */
.scan-upload[b-f8ucs9hukp] {
    display: block;
    width: 100%;
}

/* ── Idle / drop affordance ─────────────────────────────────────────── */
.su-drop[b-f8ucs9hukp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    /* Containing block for the absolutely-positioned .su-input below — without it the input
       resolves against a distant positioned ancestor and escapes the control entirely. */
    position: relative;
    /* The label sits in a narrow flex column; never let its contents push the parent wider. */
    box-sizing: border-box;
    min-width: 0;
    overflow: hidden;
    padding: 0.9rem 1rem;
    border: 1.5px dashed #b8c2cc;
    border-radius: 0.6rem;
    background: var(--slate-50);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
    margin: 0;
}

.su-drop:hover[b-f8ucs9hukp],
.su-drop:focus-within[b-f8ucs9hukp] {
    border-color: #2f80ed;
    background: #f1f7ff;
}

/* The real input fills the label but stays invisible — the whole label is the click/tap target.
   ⛔ The hiding rule is the GLOBAL .nwc-file-input-hidden utility in site.css, NOT a scoped rule
   here. A scoped rule cannot work: <InputFile> is a child component, so this component's scope
   attribute is never stamped on the <input> it renders (that was prod bug #11). See site.css. */

.su-drop-icon[b-f8ucs9hukp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: #e7f0ff;
    color: #2f80ed;
    flex: 0 0 auto;
}

/* .su-drop-text layout comes from the shared .nwc-stack-shrink utility (site.css). */

.su-drop-label[b-f8ucs9hukp] {
    font-weight: 600;
    color: #1f2a37;
    line-height: 1.2;
}

.su-drop-help[b-f8ucs9hukp] {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ── The two capture routes: camera and file, as real peer buttons ───── */

/* This was a .btn-sm grey outline button beside a grey "or pick a file above" hint, and the floor
   called both halves: "Use the document camera" is not language anyone here uses, and a muted mini
   button next to muted text does not read as the primary action on a machine with a camera bolted
   over the tags.
   ⛔ Never dress either route in .su-link or .btn-sm again. Worn as grey link text, the control
   that adds a second webcam page was reported as "there is no way to upload a second webcam image"
   while she was looking straight at it — colour and size are a claim about whether a thing works. */
.su-route-row[b-f8ucs9hukp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.su-route-btn[b-f8ucs9hukp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    /* 44px floor (Apple's touch target): an iPad in the cellar, a scale house with gloves on. */
    min-height: 2.75rem;
    padding-inline: 1.1rem;
    font-weight: 600;
    /* A <button> and a <label> do not start equal — Bootstrap's .btn leaves a label's margin. */
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}

/* The same pair again, above the pages in the out-of-circuit gallery. */
.su-add-row[b-f8ucs9hukp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    width: 100%;
}

/* With the camera route present, the block above is the step's INSTRUCTION and the two buttons are
   the controls — so it drops the dashed "choose a file here" costume and every hover state. Its
   `for=` is removed in markup to match. */
.su-drop-info[b-f8ucs9hukp],
.su-drop-info:hover[b-f8ucs9hukp],
.su-drop-info:focus-within[b-f8ucs9hukp] {
    border-style: solid;
    border-color: #e5eaf0;
    background: var(--white);
    cursor: default;
}

/* ── Status rows (preparing / scanning / success / error) ───────────── */
.su-status[b-f8ucs9hukp] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.92rem;
    margin-top: 0.4rem;
}

.su-status:first-child[b-f8ucs9hukp] {
    margin-top: 0;
}

.su-status-text[b-f8ucs9hukp] {
    min-width: 0;
}

.su-status-icon[b-f8ucs9hukp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-weight: 700;
    flex: 0 0 auto;
    font-size: 0.85rem;
}

.su-status-busy[b-f8ucs9hukp] {
    background: #f1f7ff;
    color: #1f4e8c;
}

.su-status-success[b-f8ucs9hukp] {
    background: #eaf7ef;
    color: #1a7f43;
}

.su-status-success .su-status-icon[b-f8ucs9hukp] {
    background: #1a7f43;
    color: var(--white);
}

/* Advisory, not a failure: the file picker beside it works. Deliberately NOT su-status-error —
   red here would read as "the scan failed" when nothing has been attempted yet. */
.su-status-note[b-f8ucs9hukp] {
    background: #fff8e6;
    color: #8a5a00;
}

.su-status-error[b-f8ucs9hukp] {
    background: #fdecec;
    color: #b42318;
}

.su-status-error .su-status-icon[b-f8ucs9hukp] {
    background: #b42318;
    color: var(--white);
}

/* ── Spinner ─────────────────────────────────────────────────────────── */
.su-spinner[b-f8ucs9hukp] {
    width: 1.15rem;
    height: 1.15rem;
    border: 2.5px solid rgba(47, 128, 237, 0.25);
    border-top-color: #2f80ed;
    border-radius: 50%;
    animation: su-spin-b-f8ucs9hukp 0.7s linear infinite;
    flex: 0 0 auto;
}

@keyframes su-spin-b-f8ucs9hukp {
    to { transform: rotate(360deg); }
}

/* Scanning is the long wait — add a subtle pulse so it never reads as "hung". */
.su-scanning .su-status-text[b-f8ucs9hukp] {
    animation: su-pulse-b-f8ucs9hukp 1.4s ease-in-out infinite;
}

@keyframes su-pulse-b-f8ucs9hukp {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* ── Deferred: buffered file list + add-another + Scan button ───────── */
.su-ready[b-f8ucs9hukp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem;
    border: 1px solid #dbe2ea;
    border-radius: 0.6rem;
    background: var(--white);
}

/* ── Out-of-circuit gallery: the captured pages ARE the step ─────────── */

/* The row layout put a filename, three links and a button in one strip and left the rest of a
   full-screen panel empty. Restacked so the photos own the space and the actions sit under them. */
.su-ready-gallery[b-f8ucs9hukp] {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1rem;
    /* Reading width, not panel width. The panel is edge-to-edge on a desktop monitor; a 1600px
       control row is unusable and looked unfinished. */
    max-width: 46rem;
    margin-inline: auto;
    width: 100%;
    padding: 1rem;
}

.su-pages[b-f8ucs9hukp] {
    display: grid;
    /* auto-fit + minmax, so one page fills the width, and two or three share it without a
       breakpoint. An iPad in portrait lands on one column; landscape gets two. */
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.su-page[b-f8ucs9hukp] {
    position: relative;
    margin: 0;
    border: 1px solid #dbe2ea;
    border-radius: 0.6rem;
    overflow: hidden;
    background: #f6f8fa;
}

.su-page-img[b-f8ucs9hukp] {
    display: block;
    width: 100%;
    /* contain, never cover: a weight tag cropped to fill the box can hide the very digits she is
       checking. Letterboxing is the correct trade here. */
    object-fit: contain;
    max-height: 22rem;
    background: #eef2f6;
}

.su-page-noimg[b-f8ucs9hukp] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 9rem;
    color: #6b7280;
    font-size: 0.85rem;
}

/* 44px min, per Apple's touch target floor — this is used on an iPad with wet hands. */
.su-page-remove[b-f8ucs9hukp] {
    position: absolute;
    top: 0.4rem;
    right: 0.4rem;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 24, 39, 0.66);
    color: var(--white);
    font-size: 1rem;
    cursor: pointer;
}

.su-page-remove:hover[b-f8ucs9hukp],
.su-page-remove:focus-visible[b-f8ucs9hukp] {
    background: #b42318;
}

.su-page-cap[b-f8ucs9hukp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.6rem;
    background: var(--white);
    border-top: 1px solid #e5eaf0;
    font-size: 0.8rem;
    color: #6b7280;
}

/* The opt-in "also send to the photo inbox" row. Sits below the control in every phase it shows in,
   so it cannot move under a thumb while photos are still uploading. */
.su-inbox-opt[b-f8ucs9hukp] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    cursor: pointer;
}

.su-inbox-opt-label[b-f8ucs9hukp] {
    display: block;
    color: #1f2a37;
    line-height: 1.2;
}

.su-inbox-opt-help[b-f8ucs9hukp] {
    display: block;
    font-size: 0.8rem;
    color: #6b7280;
}

/* Optional per-photo field a consumer supplies through PageNote. Sits under the caption and inside
   the tile so the field and the picture it describes cannot drift apart. */
.su-page-note[b-f8ucs9hukp] {
    padding: 0 0.6rem 0.6rem;
    background: var(--white);
}

.su-page-num[b-f8ucs9hukp] {
    font-weight: 600;
    color: #1f2a37;
}

.su-page-size[b-f8ucs9hukp] {
    font-variant-numeric: tabular-nums;
}

/* The two "add another" routes now sit ABOVE the pages (.su-add-row), so the only thing left down
   here is the commit action — the eye never has to pick the primary button out of a row of links. */
.su-ready-gallery .su-ready-actions[b-f8ucs9hukp] {
    width: 100%;
    justify-content: flex-end;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e5eaf0;
}

.su-ready-gallery .su-files[b-f8ucs9hukp] {
    width: 100%;
}

/* One thumb, one hand, a tag in the other: on a tablet the commit action spans the width rather
   than being a small target in a corner. */
@media (max-width: 48rem) {
    .su-ready-gallery .su-ready-actions[b-f8ucs9hukp] {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .su-ready-gallery .su-ready-actions .btn[b-f8ucs9hukp] {
        width: 100%;
        min-height: 3rem;
    }
}

.su-files[b-f8ucs9hukp] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.su-file[b-f8ucs9hukp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #1f2a37;
    min-width: 0;
}

.su-add-more[b-f8ucs9hukp] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #2f80ed;
    font-size: 0.85rem;
    cursor: pointer;
    margin: 0;
    flex: 0 0 auto;
}

.su-add-more:hover[b-f8ucs9hukp] {
    text-decoration: underline;
}

/* .su-file-name truncation comes from the shared .nwc-truncate utility (site.css). */

.su-ready-actions[b-f8ucs9hukp] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}

.su-link[b-f8ucs9hukp] {
    color: #6b7280;
    text-decoration: none;
}

.su-link:hover[b-f8ucs9hukp] {
    color: #374151;
    text-decoration: underline;
}

.su-again[b-f8ucs9hukp] {
    margin-left: 0.25rem;
}

/* Out-of-circuit upload feedback — content + data-kind are written DOM-direct by
   capture-upload.js so it keeps updating while the circuit is dead. */
.su-ooc-status[b-f8ucs9hukp] {
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.su-ooc-status:empty[b-f8ucs9hukp] {
    display: none;
}

.su-ooc-status[data-kind="busy"][b-f8ucs9hukp] { color: #6b7280; }
.su-ooc-status[data-kind="ok"][b-f8ucs9hukp]   { color: #15803d; }
.su-ooc-status[data-kind="fail"][b-f8ucs9hukp] { color: #b91c1c; }

@media (prefers-reduced-motion: reduce) {
    .su-spinner[b-f8ucs9hukp] { animation-duration: 1.4s; }
    .su-scanning .su-status-text[b-f8ucs9hukp] { animation: none; }
}
/* /Shared/SecondaryLayout.razor.rz.scp.css */

html[b-8fdpz0p6qh],
body[b-8fdpz0p6qh] {
    height: 100%;
    margin: 0;
    padding: 0;
}

.page[b-8fdpz0p6qh] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}

.main[b-8fdpz0p6qh] {
    flex-grow: 1;
    padding-bottom: 5px;
    overflow-y: auto;
}

.page[b-8fdpz0p6qh] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-8fdpz0p6qh] {
    flex: 1;
}

/* The rail is desktop-only: below 768px <MobileNavShell/> owns navigation (bottom bar +
   hamburger), and showing both would be the third competing affordance MainLayout already
   had to delete once. */
.sidebar[b-8fdpz0p6qh] {
    background-image: var(--secondary-shell-gradient);
    display: none;
}

@media (max-width: 767.98px) {
    /* Clear the fixed BottomNav bar (4rem + safe-area) added via <MobileNavShell>
       so the last content rows aren't hidden behind it. Mirrors MainLayout. */
    .main[b-8fdpz0p6qh] {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }
}

@media (min-width: 768px) {
    .page[b-8fdpz0p6qh] {
        flex-direction: row;
    }

    /* ⛔ --nav-rail-width, NOT --nav-drawer-width. This rule used to say 250px (via the drawer
       token) while matching nothing, so it read as "this shell has a full drawer" — it never
       did. This layout renders the RAIL only: there is no NavMenu here and no .drawer-collapsed
       swap, so a 250px track would just be 194px of empty gradient. */
    .sidebar[b-8fdpz0p6qh] {
        display: block;
        flex: 0 0 var(--nav-rail-width);
        width: var(--nav-rail-width);
        height: 100vh;
        height: 100dvh;
        position: sticky;
        top: 0;
        overflow: hidden auto;
    }

    /* Without this the calendar's wide month grid forces the flex row wider than the viewport
       and scrolls the whole document sideways, dragging the rail off-screen with it — the same
       failure ManagerShell hit at 1366px on 2026-08-09. A flex item's automatic minimum size is
       min-content, so it must be zeroed explicitly. */
    .main[b-8fdpz0p6qh] {
        min-width: 0;
    }

    .main > div[b-8fdpz0p6qh] {
        padding-left: var(--space-xl) !important;
        padding-right: var(--space-xl) !important;
    }
}

@media print {
    .no-print[b-8fdpz0p6qh], .no-print *[b-8fdpz0p6qh] {
        display: none !important;
    }

    /* Bug #19: the report printed a near-blank page 2. Proven by ablation, not inferred.
       height:100vh resolves to the PAGE AREA in paged media (883px measured, vs 804px of
       report), so .page fills printed page 1 on its own -- then <MobileNavShell/>, which
       SecondaryLayout.razor renders AFTER .page, pushes its 56px onto page 2.
       Neither rule below is screen-only, so neither guard fires:
         - d-md-none misses: US Letter's page area is ~739px wide, so (min-width:768px) is
           FALSE on paper -- and (max-width:767.98px) is TRUE, which is why the mobile
           BottomNav clearance further down also applies when printing.
         - .no-print misses: there is NO global .no-print rule in wwwroot/css. Every one in
           this app is CSS-isolation-scoped, so it only matches its own component's markup.
           MobileNavShell has no .razor.css at all => no scope attribute => matches nothing.
       height:auto alone is sufficient; the .main rules drop that print-only BottomNav
       clearance and a latent overflow clip. Fixes the ~11 other SecondaryLayout pages too.
       !! THIS BLOCK MUST STAY LAST IN THE FILE. A media query adds NO specificity, so these
       rules only tie with the plain .page/.main rules above and win purely on source order.
       It lived at the top of this file first and was measurably a no-op in the built bundle
       (.page{height:100vh} re-won 17 lines later). Do not "tidy" it back up there. */
    .page[b-8fdpz0p6qh] {
        height: auto;
    }

    .main[b-8fdpz0p6qh] {
        overflow: visible;
        padding-bottom: 0;
    }
}
/* /Shared/SlidingPanel.razor.rz.scp.css */
/* Overlay - positioned behind sticky header */
.sliding-panel-overlay[b-bdsimjaa6a] {
    position: fixed;
    inset: 0;
    background: var(--overlay-backdrop-dim);
    opacity: 1;
    transition: opacity 0.3s ease;
    /* z-index is applied INLINE from the ZIndex parameter (overlay = ZIndex - 1) in
       SlidingPanel.razor — single source of truth. Do not set z-index here. */
}

.sliding-panel-overlay.fade-out[b-bdsimjaa6a] {
    opacity: 0;
}

/* Panel - slides in from right */
/* NOTE: Do NOT add transform here - it creates a stacking context that traps
   position:fixed children (like crop overlays) inside the panel */
.sliding-panel[b-bdsimjaa6a] {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for mobile */
    width: var(--panel-width, 55%);
    background: var(--surface-default);
    box-shadow: var(--panel-slide-shadow);
    /* z-index applied INLINE from the ZIndex parameter in SlidingPanel.razor —
       single source of truth; layer constants live in tokens.css (--z-modal). */
    display: flex;
    flex-direction: column;
    /* transform removed - was breaking position:fixed children */
}

.sliding-panel.slide-in[b-bdsimjaa6a] {
    animation: slideIn-b-bdsimjaa6a 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* No 'forwards' - we don't want to retain transform which breaks stacking */
}

.sliding-panel.slide-out[b-bdsimjaa6a] {
    animation: slideOut-b-bdsimjaa6a 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    /* forwards is OK here since panel is closing anyway */
}

@keyframes slideIn-b-bdsimjaa6a {
    from {
        transform: translateX(100%);
    }
    to {
        transform: none; /* Use 'none' instead of translateX(0) */
    }
}

@keyframes slideOut-b-bdsimjaa6a {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}

/* Header — .nwc-slide-header (global, site.css). title/close stay scoped below. */
.sliding-panel-title[b-bdsimjaa6a] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-xl);
}

.sliding-panel-close[b-bdsimjaa6a] {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    padding: var(--space-2xs) var(--space-sm);
    cursor: pointer;
    color: var(--gray-600);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-default);
}

.sliding-panel-close:hover[b-bdsimjaa6a] {
    background-color: var(--gray-200);
    color: var(--gray-800);
}

/* Body - scrollable */
.sliding-panel-body[b-bdsimjaa6a] {
    flex: 1;
    overflow-y: auto;
    /* sm/md (was md/lg, 2026-08-04): shared with every panel — vertical space goes to content,
       not gutters, on the scroll-heavy booking/projection surfaces. */
    padding: var(--space-sm) var(--space-md);
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* Mobile - full width */
@media (max-width: 768px) {
    .sliding-panel[b-bdsimjaa6a] {
        width: var(--panel-mobile-width, 100%);
    }
}

/* Tablet band (769-1024px) — NOT an override of the caller's Width (a prior version of this
   rule read `width: var(--panel-width, 70%)`, which is dead code: --panel-width is always set
   inline from the Width parameter, so that 70% fallback can never trigger). The real tablet risk
   is the opposite direction: several call sites pass a fixed px Width (700-900px) sized for
   desktop, which overflows a narrow tablet viewport. Cap it without touching callers that already
   pass a sensible % or a narrower px value. */
@media (min-width: 769px) and (max-width: 1024px) {
    .sliding-panel[b-bdsimjaa6a] {
        max-width: 94vw;
    }
}

/* Focus trap visual indicator */
.sliding-panel:focus[b-bdsimjaa6a] {
    outline: none;
}
/* /Shared/ThemeToggle.razor.rz.scp.css */
/* Inline peer of the profile badge inside .navmenu-user. Borderless against
   the navbar gradient; quiet affordance matching the drawer-toggle. */
.theme-toggle[b-b93hkvt8jj] {
    width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--on-shell-fg);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    flex-shrink: 0;
    transition: background var(--transition-fast),
                color var(--transition-fast),
                transform var(--transition-fast);
}

.theme-toggle:hover[b-b93hkvt8jj] {
    background: var(--on-shell-hover-bg-strong);
    color: var(--white);
}

.theme-toggle:focus-visible[b-b93hkvt8jj] {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.theme-toggle:active[b-b93hkvt8jj] {
    transform: scale(0.96);
}

.theme-toggle i[b-b93hkvt8jj] {
    font-size: var(--font-size-base);
}
/* /Shared/Tooltip.razor.rz.scp.css */
.tooltip-wrapper[b-ilyk7v6chc] {
    position: relative;
    display: inline-block;
    /*    border-bottom: 1px dotted red;
*/
    cursor: help;
}

span[b-ilyk7v6chc] {
    visibility: hidden;
    position: absolute;
    width: 250px;
    bottom: 100%;
    left: 50%;
    margin-left: -60px;
    background-color: var(--tooltip-bg);
    color: var(--white);
    text-align: center;
    padding: 5px 0;
    border-radius: var(--radius-md);
    z-index: var(--z-base);
    white-space: pre-line
}

span[b-ilyk7v6chc]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--tooltip-arrow) transparent transparent transparent;
}

.tooltip-wrapper:hover span[b-ilyk7v6chc] { visibility: visible; }
/* /Shared/UserMenu.razor.rz.scp.css */
.user-menu-container[b-oung6bz41i] {
    position: relative;
}

/* ========== Auth Status Bar ========== */
.user-status[b-oung6bz41i] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-default);
    user-select: none;
}

.user-status.authenticated[b-oung6bz41i] {
    background: var(--on-shell-hover-bg);
    /* Hard cap so the badge can never push past the drawer's 250px width
       even when the inline ThemeToggle is also rendered next to it. */
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.user-status.authenticated:hover[b-oung6bz41i] {
    background: var(--on-shell-pressed-bg);
}

.user-status.not-authenticated[b-oung6bz41i] {
    background: var(--on-shell-warn-bg);
    border: 1px solid var(--on-shell-warn-border);
    cursor: default;
}

/* ========== Avatar ========== */
.user-avatar[b-oung6bz41i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--on-shell-pressed-bg-strong);
    color: var(--white);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    flex-shrink: 0;
}

/* ========== User Info ========== */
/* Single-line display-name label. Role moved to the dropdown so the badge
   stays inside the drawer's 250px width even with the inline ThemeToggle. */
.user-info[b-oung6bz41i] {
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    max-width: 8rem;
    overflow: hidden;
}

.user-name[b-oung6bz41i] {
    color: var(--white);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chevron-icon[b-oung6bz41i] {
    color: var(--on-shell-fg-faint);
    font-size: var(--font-size-2xs);
    margin-left: var(--space-3xs);
}

/* ========== Not Authenticated ========== */
.not-auth-icon[b-oung6bz41i] {
    color: var(--on-shell-warn-fg);
    font-size: var(--font-size-2xl);
}

.not-auth-label[b-oung6bz41i] {
    color: var(--on-shell-fg-dim);
    font-size: 0.8rem;
}

.sign-in-btn[b-oung6bz41i] {
    background: var(--on-shell-active-bg);
    color: var(--white) !important;
    text-decoration: none !important;
    padding: 0.2rem 0.65rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    font-weight: var(--font-weight-medium);
    transition: background-color var(--transition-default);
}

.sign-in-btn:hover[b-oung6bz41i] {
    background: var(--on-shell-pressed-bg-strong);
}

/* ========== Dropdown ========== */
/* position:fixed (not absolute) so it escapes the sidebar's
   `overflow: hidden auto` (MainLayout.razor.css) which otherwise clips it
   at the drawer's right edge. Anchored inside the 250px sidebar gutter so
   it visually belongs to the badge. */
.user-dropdown[b-oung6bz41i] {
    position: fixed;
    top: 3.4rem;
    left: 0.5rem;
    width: 240px;
    max-width: calc(100vw - 1rem);
    background: var(--surface-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-modal);
    overflow: hidden;
}

.dropdown-user-header[b-oung6bz41i] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
}

.dropdown-avatar[b-oung6bz41i] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--app-shell-blue);
    color: var(--white);
    font-weight: var(--font-weight-semibold);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.dropdown-user-identity[b-oung6bz41i] {
    min-width: 0;
    flex: 1;
}

.dropdown-user-name[b-oung6bz41i] {
    font-weight: var(--font-weight-semibold);
    color: var(--nwc-text);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dropdown-user-email[b-oung6bz41i] {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.2;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Roles row — moved out of the badge per design intent: see
   design-intent-invite-default-role-is-internal-vs-client memory. */
.dropdown-roles[b-oung6bz41i] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 var(--space-lg) var(--space-sm);
}

.dropdown-role-chip[b-oung6bz41i] {
    background: var(--blue-100);
    color: var(--wr-status-info-fg);
    border: 1px solid var(--wr-status-info-border);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    font-size: 0.7rem;
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
}

.dropdown-action[b-oung6bz41i] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    padding: 0.6rem var(--space-lg);
    border: none;
    background: transparent;
    color: var(--nwc-text);
    font-size: var(--font-size-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.dropdown-action:hover[b-oung6bz41i] {
    background: var(--surface-muted);
}

/* ========== Backdrop ========== */
.user-menu-backdrop[b-oung6bz41i] {
    position: fixed;
    inset: 0;
    z-index: var(--z-user-menu-backdrop);
}
/* /Shared/Weather/WeatherHistoryPanel.razor.rz.scp.css */
.whp-toolbar[b-bojsiob2l0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-bottom: var(--space-md);
}

.whp-markers[b-bojsiob2l0] {
    margin: 0;
    font-size: var(--font-size-sm);
}

.whp-chart-frame[b-bojsiob2l0] {
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    background: var(--surface-default);
    padding: var(--space-md);
}

.whp-loading[b-bojsiob2l0] {
    padding: var(--space-xl) 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}
/* /Shared/Weather/WeatherTrendChart.razor.rz.scp.css */
.wtc[b-wk4kxhcd00] {
    width: 100%;
}

.wtc-svg[b-wk4kxhcd00] {
    width: 100%;
    display: block;
    overflow: visible;
}

.wtc-empty[b-wk4kxhcd00] {
    padding: var(--space-lg) 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.wtc-axis-label[b-wk4kxhcd00] {
    fill: #9ca3af;
    font-size: 10px;
}

.wtc-gridline[b-wk4kxhcd00] {
    stroke: #e5e7eb;
}

.wtc-line[b-wk4kxhcd00] {
    stroke-linejoin: round;
    stroke-linecap: round;
}

.wtc-area[b-wk4kxhcd00] {
    opacity: 0.10;
    stroke: none;
}

/* Min/avg/max reference lines */
.wtc-ref[b-wk4kxhcd00] {
    stroke-width: 1;
    stroke-dasharray: 2,3;
    opacity: 0.75;
}

.wtc-ref-label[b-wk4kxhcd00] {
    font-size: 9px;
    font-weight: 600;
    opacity: 0.85;
}

.wtc-ref-max[b-wk4kxhcd00] { stroke: var(--bs-danger); fill: var(--bs-danger); }
.wtc-ref-avg[b-wk4kxhcd00] { stroke: #6b7280; fill: #6b7280; }
.wtc-ref-min[b-wk4kxhcd00] { stroke: var(--bs-blue); fill: var(--bs-blue); }

/* Hover strips: transparent (not `none`) so they receive the pointer. The tooltip is revealed
   by CSS alone — no @onmousemove, so panning across the chart never round-trips the circuit. */
.wtc-band[b-wk4kxhcd00] {
    fill: transparent;
}

.wtc-hover[b-wk4kxhcd00] {
    opacity: 0;
    pointer-events: none;
    transition: opacity 90ms ease-out;
}

.wtc-slot:hover .wtc-hover[b-wk4kxhcd00] {
    opacity: 1;
}

.wtc-cross[b-wk4kxhcd00] {
    stroke: #9ca3af;
    stroke-width: 1;
    stroke-dasharray: 3,3;
}

.wtc-dot[b-wk4kxhcd00] {
    fill: #fff;
    stroke-width: 2;
}

.wtc-tip-box[b-wk4kxhcd00] {
    fill: #1f2937;
    opacity: 0.95;
}

.wtc-tip-value[b-wk4kxhcd00] {
    fill: #fff;
    font-size: 12px;
    font-weight: 700;
}

.wtc-tip-date[b-wk4kxhcd00] {
    fill: #d1d5db;
    font-size: 9px;
}

.wtc-legend[b-wk4kxhcd00] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-2xs);
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.wtc-legend-stats[b-wk4kxhcd00] {
    display: flex;
    gap: var(--space-md);
}

.wtc-stat[b-wk4kxhcd00] {
    font-weight: 600;
}

.wtc-stat-min[b-wk4kxhcd00] { color: var(--bs-blue); }
.wtc-stat-avg[b-wk4kxhcd00] { color: #6b7280; }
.wtc-stat-max[b-wk4kxhcd00] { color: var(--bs-danger); }
/* /Shared/WebcamCapturePanel.razor.rz.scp.css */
/* ============================================
   WebcamCapturePanel — full-screen document-camera capture overlay
   ============================================

   ⛔ These rule BODIES are adapted from ImageCaptureEditor.razor.css:249-469, and that is a
   deliberate copy, not an oversight. Blazor scoped CSS emits every selector with the OWNING
   component's scope attribute (`.crop-overlay[b-p96fseth2k]`), so a different component using the
   same class names matches ZERO rules — the overlay renders as an unstyled transparent div while
   the build and every test stay green. Copying is the only way to reuse the grammar; the class
   names are renamed crop-* -> wcp-* so `imageCropper.moveOverlayToBody`'s document-wide
   first-match querySelector can never grab the wrong overlay when both are mounted (which
   Phase 3 of the plan schedules explicitly).

   ⛔ `.crop-container` is the ONE name kept literal, in the markup only, because
   imageCropper.js's setImageFilter / getCroppedImageWithFilters resolve the image wrapper with
   `image.closest('.crop-container')` and return early when it is null. Its CSS lives here under
   .wcp-container; the crop-container class carries no styling of ours.

   ⚠ The palette is deliberately theme-invariant (dark regardless of app theme, the photo-editor
   convention). tokens.css:490-492 says so. Do not add a prefers-color-scheme block.  */

.wcp-overlay-backdrop[b-mn4bq1h2y6] {
    position: fixed;
    inset: 0;
    z-index: var(--z-drag-indicator);
    background: var(--crop-overlay-backdrop);
    pointer-events: all;
}

.wcp-overlay[b-mn4bq1h2y6] {
    position: fixed;
    inset: 0;
    z-index: var(--z-crop-overlay);
    background: var(--crop-overlay-bg);
    display: flex;
    flex-direction: column;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

/* ── header ─────────────────────────────────────────────────────────── */

.wcp-header[b-mn4bq1h2y6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--crop-panel-bg);
    flex-shrink: 0;
}

.wcp-titles[b-mn4bq1h2y6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 0;
}

.wcp-title[b-mn4bq1h2y6] {
    color: var(--white);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
}

/* Which camera is live, and at what resolution it actually negotiated. Always visible while a
   stream is up: a wrong-camera pick and a silently-downgraded negotiation are both invisible
   otherwise, and both look exactly like the feature working. */
.wcp-camera-chip[b-mn4bq1h2y6] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    max-width: 100%;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: var(--crop-btn-bg);
    color: var(--crop-fg-muted);
    font-size: 0.78rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wcp-res[b-mn4bq1h2y6] {
    font-variant-numeric: tabular-nums;
    color: var(--white);
}

/* A stream under ~2000 px cannot yield a 1568 px crop at any sensible framing. Colour it so the
   downgrade is not silent. */
.wcp-res-warn[b-mn4bq1h2y6] {
    color: #fca5a5;
    font-weight: var(--font-weight-semibold);
}

.wcp-cancel-btn[b-mn4bq1h2y6],
.wcp-confirm-btn[b-mn4bq1h2y6] {
    border: none;
    border-radius: var(--radius-md);
    padding: 0.6rem var(--space-lg);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    min-width: 80px;
    min-height: 44px;
    flex: 0 0 auto;
}

.wcp-cancel-btn[b-mn4bq1h2y6] {
    background: var(--crop-btn-bg);
    color: var(--white);
}

.wcp-confirm-btn[b-mn4bq1h2y6] {
    background: var(--crop-confirm-bg);
    color: var(--white);
}

.wcp-cancel-btn:active[b-mn4bq1h2y6] {
    background: var(--crop-btn-bg-active);
}

.wcp-confirm-btn:active[b-mn4bq1h2y6] {
    background: var(--green-500);
}

.wcp-confirm-btn:disabled[b-mn4bq1h2y6] {
    opacity: 0.65;
    cursor: default;
}

/* Keeps the title optically centred when there is no confirm button in this stage. */
.wcp-confirm-spacer[b-mn4bq1h2y6] {
    display: inline-block;
    min-width: 80px;
    flex: 0 0 auto;
}

/* ── stage body: live preview + frozen crop ─────────────────────────── */

/* ⛔ Both children stay in the DOM across stages and are hidden with a class, never removed with
   an @if. Cropper.js mounts on the <img> by element id and the MediaStream is attached to the
   <video> by element id — letting Blazor destroy and recreate either node detaches both with no
   error at all. */
.wcp-body[b-mn4bq1h2y6] {
    flex: 1;
    display: flex;
    min-height: 0;
}

.wcp-body-hidden[b-mn4bq1h2y6] {
    display: none;
}

.wcp-stage[b-mn4bq1h2y6],
.wcp-container[b-mn4bq1h2y6] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
    padding: var(--space-lg);
}

.wcp-stage-hidden[b-mn4bq1h2y6] {
    display: none;
}

.wcp-video[b-mn4bq1h2y6] {
    max-width: 100%;
    max-height: 100%;
    display: block;
    background: #000;
}

.wcp-container img[b-mn4bq1h2y6] {
    max-width: 100%;
    max-height: 100%;
    display: block;
}

/* ── first-run / picker / error body ────────────────────────────────── */

.wcp-panelbody[b-mn4bq1h2y6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    min-height: 0;
    overflow-y: auto;
}

.wcp-lead[b-mn4bq1h2y6] {
    color: var(--white);
    font-size: var(--font-size-lg);
    margin: 0;
    text-align: center;
}

.wcp-primary[b-mn4bq1h2y6] {
    min-height: 48px;
    min-width: 220px;
}

.wcp-devices[b-mn4bq1h2y6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: min(28rem, 100%);
}

.wcp-device[b-mn4bq1h2y6] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--crop-btn-bg-active);
    border-radius: var(--radius-md);
    background: var(--crop-btn-bg);
    color: var(--white);
    text-align: left;
    cursor: pointer;
    min-height: 56px;
}

.wcp-device:hover[b-mn4bq1h2y6] {
    background: var(--crop-btn-bg-active);
}

.wcp-device-icon[b-mn4bq1h2y6] {
    flex: 0 0 auto;
    font-size: 1.2rem;
}

.wcp-device-name[b-mn4bq1h2y6] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wcp-device-tag[b-mn4bq1h2y6] {
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--crop-fg-muted);
}

.wcp-device-tag-good[b-mn4bq1h2y6] {
    color: #86efac;
}

.wcp-error-actions[b-mn4bq1h2y6] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
}

/* ── status rows ────────────────────────────────────────────────────── */

/* ⛔ Copied from ScanUpload.razor.css:65-143 for the same scoping reason as the overlay chrome,
   and kept visually identical on purpose: the crew already reads that red bar as "this scan has a
   problem", and a second dialect for the same meaning is how a warning stops registering. */
.wcp-status[b-mn4bq1h2y6] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.92rem;
    max-width: min(40rem, 100%);
}

.wcp-status-text[b-mn4bq1h2y6] {
    min-width: 0;
}

.wcp-status-icon[b-mn4bq1h2y6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    font-weight: 700;
    flex: 0 0 auto;
    font-size: 0.85rem;
}

.wcp-status-busy[b-mn4bq1h2y6] {
    background: #f1f7ff;
    color: #1f4e8c;
}

.wcp-status-busy .wcp-status-icon[b-mn4bq1h2y6] {
    background: #1f4e8c;
    color: #fff;
}

.wcp-status-error[b-mn4bq1h2y6] {
    background: #fdecec;
    color: #b42318;
}

.wcp-status-error .wcp-status-icon[b-mn4bq1h2y6] {
    background: #b42318;
    color: #fff;
}

/* The crop-stage notices sit between the image and the controls, full width. */
.wcp-notice[b-mn4bq1h2y6] {
    margin: 0 var(--space-lg) var(--space-sm);
    max-width: none;
    flex-shrink: 0;
}

.wcp-spinner[b-mn4bq1h2y6] {
    width: 1.15rem;
    height: 1.15rem;
    border: 2.5px solid rgba(47, 128, 237, 0.25);
    border-top-color: #2f80ed;
    border-radius: 50%;
    animation: wcp-spin-b-mn4bq1h2y6 0.7s linear infinite;
    flex: 0 0 auto;
}

@keyframes wcp-spin-b-mn4bq1h2y6 {
    to { transform: rotate(360deg); }
}

/* ── clean-up panel ─────────────────────────────────────────────────── */

.wcp-adjustments[b-mn4bq1h2y6] {
    flex-shrink: 0;
    background: var(--crop-panel-bg);
}

.wcp-adjust-toggle[b-mn4bq1h2y6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    background: transparent;
    border: none;
    border-top: 1px solid var(--crop-divider);
    color: var(--crop-fg-muted);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    min-height: 44px;
}

.wcp-adjust-toggle:active[b-mn4bq1h2y6] {
    background: var(--crop-btn-bg-subtle);
}

.wcp-presets[b-mn4bq1h2y6] {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.wcp-preset[b-mn4bq1h2y6] {
    background: var(--crop-btn-bg);
    color: var(--white);
    border: 1px solid var(--crop-btn-bg-active);
    border-radius: 20px;
    padding: 0.4rem var(--space-lg);
    font-size: 0.8rem;
    white-space: nowrap;
    cursor: pointer;
    min-height: 36px;
    transition: background var(--transition-default), border-color var(--transition-default);
}

.wcp-preset:active[b-mn4bq1h2y6] {
    background: var(--crop-btn-bg-active);
}

.wcp-preset.active[b-mn4bq1h2y6] {
    background: var(--capture-accent);
    border-color: var(--capture-accent);
}

.wcp-sliders[b-mn4bq1h2y6] {
    padding: var(--space-sm) var(--space-lg);
}

.wcp-slider-row[b-mn4bq1h2y6] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.wcp-slider-row label[b-mn4bq1h2y6] {
    color: var(--nwc-border);
    min-width: 100px;
    font-size: var(--font-size-md);
    user-select: none;
    margin: 0;
}

.wcp-slider-row input[type="range"][b-mn4bq1h2y6] {
    flex: 1;
    accent-color: var(--capture-accent-light);
    height: 6px;
}

/* ── footer + escape ────────────────────────────────────────────────── */

.wcp-footer[b-mn4bq1h2y6] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background: var(--crop-panel-bg);
    flex-shrink: 0;
}

.wcp-escape[b-mn4bq1h2y6] {
    display: flex;
    justify-content: center;
    padding: 0 var(--space-lg) var(--space-sm);
    background: var(--crop-panel-bg);
    flex-shrink: 0;
}

.wcp-escape-link[b-mn4bq1h2y6] {
    color: var(--crop-fg-muted);
    text-decoration: underline;
}

.wcp-escape-link:hover[b-mn4bq1h2y6] {
    color: var(--white);
}

/* ── narrow viewports ───────────────────────────────────────────────── */

@media (max-width: 768px) {
    .wcp-header[b-mn4bq1h2y6] {
        padding: var(--space-sm) var(--space-md);
    }

    .wcp-title[b-mn4bq1h2y6] {
        font-size: var(--font-size-lg);
    }

    .wcp-cancel-btn[b-mn4bq1h2y6],
    .wcp-confirm-btn[b-mn4bq1h2y6] {
        font-size: var(--font-size-xl);
        padding: 0.6rem var(--space-md);
        min-width: 72px;
        min-height: 48px;
    }

    .wcp-stage[b-mn4bq1h2y6],
    .wcp-container[b-mn4bq1h2y6] {
        padding: var(--space-sm);
    }

    .wcp-footer[b-mn4bq1h2y6] {
        gap: var(--space-md);
        padding: var(--space-sm) var(--space-md);
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom));
    }

    .wcp-footer .btn[b-mn4bq1h2y6] {
        font-size: 0.8rem;
        padding: 0.4rem var(--space-md);
    }

    .wcp-notice[b-mn4bq1h2y6] {
        margin: 0 var(--space-sm) var(--space-sm);
    }

    .wcp-slider-row label[b-mn4bq1h2y6] {
        min-width: 80px;
        font-size: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wcp-spinner[b-mn4bq1h2y6] { animation-duration: 1.4s; }
}
/* /Shared/WineLots/LotFermentProfileSendPanel.razor.rz.scp.css */
/* Form on the left, the PDF on the right; stacked on a narrow screen. */
.lfp-body[b-twthf0t7xk] {
    display: grid;
    grid-template-columns: minmax(300px, 380px) 1fr;
    gap: var(--space-lg);
    min-height: calc(100vh - 120px);
}

/* Close / Send stay on screen however long the people list is: sticky to the bottom of
   .sliding-panel-body (the scroll container). The negative bottom cancels that body's padding
   so the bar sits flush on the panel edge; the background hides the rows scrolling under it. */
.lfp-form[b-twthf0t7xk] {
    display: flex;
    flex-direction: column;
}

.lfp-actions[b-twthf0t7xk] {
    position: sticky;
    bottom: calc(-1 * var(--space-sm));
    z-index: 1;
    margin-top: auto;
    padding-bottom: var(--space-sm);
    background: var(--surface-default);
}

.lfp-preview[b-twthf0t7xk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lfp-frame[b-twthf0t7xk] {
    flex: 1;
    width: 100%;
    min-height: 480px;
    border: 1px solid var(--gray-200);
    background: #fff;
}

.lfp-owner[b-twthf0t7xk] {
    display: flex;
    flex-direction: column;
}

.lfp-people[b-twthf0t7xk] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.lfp-person[b-twthf0t7xk] {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.lfp-person.selected[b-twthf0t7xk] {
    border-color: var(--accent-primary);
    background: var(--accent-primary-soft);
}

.lfp-person.unreachable[b-twthf0t7xk] {
    cursor: default;
    opacity: 0.7;
}

.lfp-person-body[b-twthf0t7xk] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lfp-person-name[b-twthf0t7xk] {
    font-weight: var(--font-weight-semibold);
}

.lfp-portal[b-twthf0t7xk] {
    color: var(--gray-700);
}

@media (max-width: 900px) {
    .lfp-body[b-twthf0t7xk] {
        grid-template-columns: 1fr;
    }

    .lfp-frame[b-twthf0t7xk] {
        min-height: 60vh;
    }
}