@import '_content/Blazored.Toast/Blazored.Toast.bundle.scp.css';
@import '_content/NWCWebApp2022.Copilot/NWCWebApp2022.Copilot.bp0zr75f35.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;
}
/* /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, #dee2e6);
    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, #6c757d);
}

.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, #dee2e6);
    color: var(--text-muted, #6c757d);
}

.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, #dee2e6);
    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, #6c757d);
}

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

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

.history-panel[b-fgorkd7x1c] {
    margin-top: 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-subtle, #dee2e6);
    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.
   The no-tree grid override lives in site.css (.comms-log-shell .ms-workspace) because scoped CSS
   can't reach the child ManagerShell's .ms-workspace. */

.comms-scroll[b-29tg32uzja] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.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;
}
/* /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(--nwc-surface, #fff);
    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/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, #333);
    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-sm);
  border-bottom: 1px solid var(--nwc-border);
  margin-bottom: var(--space-md);
}

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

.booking-parent-picker label[b-jlha5pfi8z] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  flex: 1 1 260px;
  min-width: 0;
  max-width: 100%;
}

/* 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, #dc3545);
}

.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);
}

/* 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;
}
/* /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 */
.footer-row[b-jtmur55r0o] { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.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; }
/* /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-text[b-e94ah9kf81] {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 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-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-xs);
  margin-bottom: var(--space-sm);
  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-md);
}
.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-2xs);
  margin-bottom: var(--space-sm);
  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;
  }
}

/* Lot chips: the gate-OFF chip row, and (gate ON) each lot group's chip header. */
.booking-load-row__lots[b-kpobzd7yga] {
  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-kpobzd7yga] {
  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);
}

/* Press band (booking×press convergence C2, D6) — full-width sibling ABOVE Lots & Tanks (the
   process step precedes the juice landing). It deliberately SHARES the pairing section's shape —
   the section/bar/label rules are comma-joined onto the pairing selectors below rather than
   duplicated here (the pre-push drift gate counts copies). Only press-specific sizing lives in
   this block. Editor internals (.adp-*) live in PressLegsEditor's own scoped css. */
.booking-load-row__press-mode[b-kpobzd7yga] {
  flex: 0 1 20rem;
  min-width: 0;
}

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

/* ⛔ 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;
}

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

/* Lots & Tanks section (decision §8 item 5) — full-width BELOW the grid, so it grows downward and
   can never push Date & Time out of view (the regression the old full-width chip band caused was
   ABOVE the grid). Content width is capped so tank rows don't stretch across the whole card. Row
   internals (picker/tons/detail sizing) live in the shared TankAllocationRow's scoped css. */
.booking-load-row__legacy-fields[b-kpobzd7yga],
.booking-load-row__pairing[b-kpobzd7yga],
.booking-load-row__press[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__pairing-bar[b-kpobzd7yga],
.booking-load-row__press-bar[b-kpobzd7yga] {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.booking-load-row__pairing-bar label[b-kpobzd7yga],
.booking-load-row__press-bar label[b-kpobzd7yga] {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--nwc-text-muted);
  margin-right: var(--space-xs);
}

.booking-load-row__pairing-bar select[b-kpobzd7yga] {
  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-kpobzd7yga] {
  max-width: 20rem;
}

/* Section 3's nested card. Modeled on site.css's own .nwc-facts-dl ("subtle bordered box"
   recipe, ~line 2137) rather than .booking-load-row's OWN card rule — background/border use a
   DIFFERENT token pair (--surface-subtle/--border-subtle vs the parent's --nwc-bg-muted/
   --nwc-border), plus a different radius (md vs lg) and a 2-value padding shorthand vs the
   parent's single value — 4 differing properties, not near-duplicate of either rule. */
.booking-load-row__pairing-card[b-kpobzd7yga] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

/* 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-kpobzd7yga] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Lot-as-row: the chip is the group header, its tank rows indent under it as children. */
.booking-load-row__lot-group[b-kpobzd7yga] {
  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-kpobzd7yga] {
  display: flex;
  gap: var(--space-2xs);
}

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

.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. */
.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);
}

/* 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);
}
/* /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;
}
/* /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, #6c757d);
  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 */
}
.leftAlign[b-j0mr4fk7yn] {
    align-items: flex-start;
}

.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/BottlingTankPanel.razor.rz.scp.css */

/* /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 */
.header-title i[b-few2cvr38r] {
    font-size: var(--font-size-lg);
    color: var(--dailyflow-purple-accent);
}

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

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

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

/* Date Tabs */
.date-tabs[b-few2cvr38r] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: var(--space-sm);
}

.date-tab[b-few2cvr38r] {
    position: relative;
    padding: 0.35rem 0.6rem;
    padding-right: var(--space-xl);
    border-radius: var(--radius-sm);
    border: 1px solid var(--gray-300);
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.date-tab:hover[b-few2cvr38r] {
    background: var(--gray-200);
    border-color: var(--gray-500);
}

.date-tab.active[b-few2cvr38r] {
    background: var(--blue-500);
    color: var(--white);
    border-color: var(--blue-500);
}

.date-text[b-few2cvr38r] {
    white-space: nowrap;
}

.sequence-badge[b-few2cvr38r] {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--blue-500);
    color: var(--white);
    border: 1px solid var(--white);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    box-shadow: var(--dailyflow-badge-shadow);
}

.date-tab.active .sequence-badge[b-few2cvr38r] {
    background: var(--white);
    color: var(--blue-500);
    border-color: var(--blue-500);
}

/* 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) {
    .lab-header[b-0qf1dm8llt] {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .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) !important;
    padding: 0.2rem 0.4rem !important;
}

/* 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) {
    .winemaking-header[b-xrdc2wwhf1] {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .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, #ffc107);
    }

.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) !important;
    padding: 0.2rem 0.4rem !important;
}

/* 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;
}

/* Button no style for TTB link */
.buttonNoStyle[b-ude9shnkee] {
    border: none;
    background: none;
    color: var(--blue-500);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.buttonNoStyle:hover[b-ude9shnkee] {
    color: var(--dailyflow-link-hover-fg);
}

/* ========== 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;
    }

    .cola-header[b-ude9shnkee] {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .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 */
.picker-grid[b-gtshoiuj08] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.form-group[b-gtshoiuj08] {
    display: flex;
    flex-direction: column;
}

.form-group label[b-gtshoiuj08] {
    font-size: 0.55rem;
    font-weight: var(--font-weight-medium);
    color: var(--bs-secondary);
    margin-bottom: 0.1rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.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;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .picker-grid[b-gtshoiuj08] {
        grid-template-columns: 1fr;
    }
}
/* /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) !important;
    padding: 0.2rem 0.4rem !important;
}

/* 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;
    }

    .label-header[b-dtueebyaa0] {
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    .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);
}

.packaging-header h6[b-jubp9vqua9] {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
}

.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-name[b-jubp9vqua9] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    min-width: 70px;
}

.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-scope[b-jubp9vqua9] {
    font-size: var(--font-size-2xs);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-xs);
    background: var(--gray-200);
    color: var(--gray-600);
}

.date-specific .item-scope[b-jubp9vqua9] {
    background: var(--wr-status-info-bg);
    color: var(--blue-500);
}

.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 */
.main.cards[b-vuw5d64s4z] {
    padding-top: -1.1rem;
}

.newCard[b-vuw5d64s4z] {
    width: 100%;
    margin: 5px;
    border: 1px solid #d9d9d9;
    padding: 3px;
    border-radius: 5px;
}

.cards[b-vuw5d64s4z] {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-sm);
  gap: var(--space-sm);
}

/* .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 */
}


.card-2[b-vuw5d64s4z] {
    display: grid; /* Use grid layout for flexible card heights */
    grid-template-columns: 1fr 1fr;; /* Single column layout */
    margin: 3px;
    border: 1px solid var(--nwc-border);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
    gap:10px;
}

.cardTest[b-vuw5d64s4z] {
    flex: auto;
    margin: 3px;
    border: 1px solid var(--nwc-border);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}

.cardStyle[b-vuw5d64s4z] {
    display: flex;
    margin: 3px;
    border: 1px solid var(--nwc-border);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
}

.cardStyleCola[b-vuw5d64s4z] {
    flex: 1; /* This allows the card to grow and take available space within the container */
    margin: 3px;
    border: 1px solid var(--nwc-border);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
    max-width: 810px; /* Set a maximum width for the card */
}

.colaLabelContainer[b-vuw5d64s4z] {
    display: flex; /* Use flex instead of grid for the container */
    flex-wrap: wrap; /* Allow flex items to wrap to new lines */
}

/* Adjust the flex container's behavior */
@media (min-width: 810px) {
    /* Two columns when window width is 800px or larger */
    .colaLabelContainer[b-vuw5d64s4z] {
        justify-content: space-between;
    }

    /* Give each child item 50% width for two columns */
    .cardStyleCola[b-vuw5d64s4z] {
        flex: 0 0 calc(50% - 10px); /* Subtract the grid gap from the 50% width */
    }
}

.cardProductionColumn[b-vuw5d64s4z] {
    display: flex;
    flex-direction: column;
    margin: 3px;
    border: 1px solid var(--nwc-border);
    box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
    padding: 3px;
}

.cardProductionGrid[b-vuw5d64s4z] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: azure;
}

.form-group[b-vuw5d64s4z] {
    display: flex;
    align-items: flex-start;
}


.card img[b-vuw5d64s4z] {
    max-width: 100%;
}



.card .text[b-vuw5d64s4z] {
    padding: 0 10px 10px;
}

    .card .text > button[b-vuw5d64s4z] {
        background: gray;
        border: 0;
        color: white;
        padding: 10px;
        width: 100%;
    }

textarea[b-vuw5d64s4z] {
    display: block;
}


.flexTwoColumnContainer[b-vuw5d64s4z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: space-between;
}

textarea label[b-vuw5d64s4z] > {
    display: block;
}


.paddingForText[b-vuw5d64s4z] {
    padding-right: 8px;
}

.labTextFormat[b-vuw5d64s4z] {
    padding-right: 50px;
    text-align: right;
}

.noSpin[b-vuw5d64s4z]::-webkit-outer-spin-button,
input[type=number][b-vuw5d64s4z]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    pointer-events: none;
}

.inputStyle[b-vuw5d64s4z] {
    width: 65%;
}

.formInputs[b-vuw5d64s4z] {
    width: 300px;
}

.experimental[b-vuw5d64s4z] {
    margin-left: -40px;
}

.formInputs[b-vuw5d64s4z] {
    display: flex;
    flex-direction: row;
    justify-content: right;
    align-items: center
}

.formInputsMultiLine[b-vuw5d64s4z] {
    display: flex;
    align-items: flex-start;
}

.lblWth[b-vuw5d64s4z] {
    text-align: right;
    padding-right: .5em;
}

.lblWth-L[b-vuw5d64s4z] {
    width: 120px;
    text-align: left;
    padding-right: .5em;
}

.container-flex[b-vuw5d64s4z] {
    display: flex;
    flex-direction: row;
    margin: 3px;
    border: 1px solid var(--nwc-border);
}


.testingContainer[b-vuw5d64s4z] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    border-bottom: solid 1px grey;
    justify-content: space-between;
}

    .testingContainer > *[b-vuw5d64s4z] {
        flex-basis: 19%;
        flex-grow: 1;
        flex-shrink: 3;
        min-width: 150px;
        max-width: 400px;
        padding: 5px;
    }


.subContainer-flex[b-vuw5d64s4z] {
    display: flex;
    flex-direction: row;
}

.myLabel[b-vuw5d64s4z] {
    position: relative;
    max-height: 200px;
    max-width: 200px;
    overflow: hidden;
}

img[b-vuw5d64s4z] {
    width: 100%;
    height: auto;
    transition: transform .2s;
    overflow: hidden;
}

.myLabel:hover[b-vuw5d64s4z] {
    transform: scale(2.5);
    z-index: var(--z-base); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

.tableBottlingMain[b-vuw5d64s4z] {
    width: 100%;
    min-height: 150px;
    max-height: 250px;
    overflow-y: scroll;
}

.Parent[b-vuw5d64s4z] {
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
}

.child1[b-vuw5d64s4z] {
    width: 33%;
}

.child2[b-vuw5d64s4z] {
    width: 33%;
}

.child3[b-vuw5d64s4z] {
    width: 33%
}

.itransformidth[b-vuw5d64s4z] {
    width: 265px;
}

.upperCase[b-vuw5d64s4z] {
    text-transform: uppercase;
}

.lowerCase[b-vuw5d64s4z] {
    text-transform: lowercase;
}

.bottlingTag[b-vuw5d64s4z] {
    display: flex;
    flex-direction: row;
    padding: 2px;
}

thead th[b-vuw5d64s4z] {
    position: sticky;
    top: 0;
}

.wineLotButton[b-vuw5d64s4z] {
    position: relative;
    background-color: white;
    border: none;
    margin: 0px;
    padding: 0px;
}

    .wineLotButton:hover[b-vuw5d64s4z] {
        cursor: pointer;
    }

.notesSection[b-vuw5d64s4z] {
    margin: 4px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.txtAreaWidth[b-vuw5d64s4z] {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    resize: vertical;
}

.flexSaveButtonArea[b-vuw5d64s4z] {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 5px;
}

.buttonForLabel[b-vuw5d64s4z] {
    position: absolute;
    bottom: 5px;
    right: 5px;
}


.shipping-heading[b-vuw5d64s4z] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    gap: 5px;
}

.cardHeadingforBottling[b-vuw5d64s4z] {
    display: flex;
    flex-wrap: wrap;
}

    .cardHeadingforBottling > *[b-vuw5d64s4z] {
        flex: 1 1 160px;
    }

.card-img[b-vuw5d64s4z] {
    width: 100%;
    height: 7vw;
    object-fit: contain;
}

.buttonGrid[b-vuw5d64s4z] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
    grid-gap: 5px;
    align-items: baseline;
}

.card-img[b-vuw5d64s4z] {
    min-height: 50vh;
    object-fit: contain;
}

.row[b-vuw5d64s4z] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
}

.buttonNoStyle[b-vuw5d64s4z] {
    border: none;
    background: none;
}

    .buttonNoStyle:hover[b-vuw5d64s4z] {
        color: blue;
        text-decoration: underline;
        cursor: pointer;
    }


.bottleMain[b-vuw5d64s4z] {
    display: flex;
    flex-wrap: wrap;
    row-gap: 3px;
}

.bottleInstance[b-vuw5d64s4z] {
    flex: 0 1 auto;
    margin: 3px;
}

.packagingMaterials-grid[b-vuw5d64s4z] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 5px;
    padding: 5px;
    align-content: center;
    box-sizing: border-box;
}

.packagingMaterials-item[b-vuw5d64s4z] {
    background-color: white;
    border: 1px solid black;
    padding: 2px;
    text-align: center;
    justify-content: center;
}

.twoColumn-grid[b-vuw5d64s4z] {
    display: grid;
    grid-template-columns: 50px auto;
    gap: 5px;
    justify-content: flex-start;
    align-items: center;
}

.twoBythreeGrid[b-vuw5d64s4z] {
    display: grid;
    flex-direction: column;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 5px;
    align-content: flex-end;
    align-items: center;
    border-bottom: solid 2px grey;
    padding-bottom: 5px;
    padding-top: 5px;
}

    .twoBythreeGrid > p[b-vuw5d64s4z] {
        text-align: left;
        margin: 0px;
    }

    .twoBythreeGrid > label[b-vuw5d64s4z] {
        text-align: right;
        font-weight: var(--font-weight-bold);
    }

    .twoBythreeGrid > span[b-vuw5d64s4z] {
        font-weight: var(--font-weight-bold);
    }

.rowNoWrap[b-vuw5d64s4z] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: 100%;
    gap: 5px;
}


#tabs[b-vuw5d64s4z] {
    width: 500px;
    margin: 0 auto;
}

ul[b-vuw5d64s4z] {
    list-style: none;
    border-bottom: 1px solid var(--nwc-border);
    margin: 0;
    padding: 0;
}

li.tab[b-vuw5d64s4z] {
    display: inline-block;
    cursor: pointer;
}

    li.tab.active[b-vuw5d64s4z] {
        border-bottom: 2px solid #000;
    }

    li.tab.inActive[b-vuw5d64s4z] {
        border-bottom: none;
    }

.tab-content[b-vuw5d64s4z] {
    display: none;
}

    .tab-content.active[b-vuw5d64s4z] {
        display: block;
    }

.bottlingDateRow[b-vuw5d64s4z] {
    border-bottom: 1px solid lightgrey;
    padding-top: .75rem;
    padding-bottom: .75rem;
}

.testingContainerGrid[b-vuw5d64s4z] {
    display: grid;
    gap: var(--space-2xs);
    padding-top: 1px;
    padding-bottom: 1px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.bottlingDateMainContainer[b-vuw5d64s4z] {
    max-height: 490px;
    overflow-y: auto;
}

/* Collapse Controls */
.collapse-controls[b-vuw5d64s4z] {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: var(--space-2xs) var(--space-sm);
    margin-bottom: var(--space-2xs);
}

.collapse-controls button[b-vuw5d64s4z] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
}

/* Collapsible Sections */
.collapsible-section[b-vuw5d64s4z] {
    overflow: hidden;
}

/* .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;
}

/* For card-2 which has two columns */
.section-content-row[b-vuw5d64s4z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ============================================
   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-sidebar-header[b-yzodvfqtjb] {
    padding: 0.4rem var(--space-sm);
}

.sp-sidebar-title[b-yzodvfqtjb] {
    font-size: var(--font-size-xs);
}

.sp-sidebar-count[b-yzodvfqtjb] {
    font-size: 0.6rem;
}

.sp-sidebar-body[b-yzodvfqtjb] {
    padding: 0.35rem;
}

/* 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;
}

.qr-code-img[b-5wkpv5o3lu] {
  max-width: 100px; /* Set the maximum width as per your requirement */
  width: 100%; /* Ensure the image scales down if necessary */
  height: auto; /* Maintain the aspect ratio */
}
.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 !important;
    font-size: 0.7rem !important;
    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);
}

.header-buttons .btn-text[b-26y3vbuxy0] {
    margin-left: var(--space-2xs);
    font-size: var(--font-size-sm);
}

.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-card.editing[b-26y3vbuxy0] {
    border-color: var(--bs-info);
    background: var(--bs-info-bg-subtle);
    box-shadow: 0 0 0 2px var(--bs-info);
    animation: pulse-editing-b-26y3vbuxy0 1.5s ease-in-out infinite;
}

@keyframes pulse-editing-b-26y3vbuxy0 {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.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.editing[b-26y3vbuxy0] {
    border-color: var(--bs-info);
    background: var(--bs-info-bg-subtle);
    animation: pulse-editing-b-26y3vbuxy0 1.5s ease-in-out infinite;
}

.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-row[b-lefqun57ao] {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.form-group[b-lefqun57ao] {
    flex: 1;
}

.form-group.flex-grow[b-lefqun57ao] {
    flex: 2;
}

.form-label[b-lefqun57ao] {
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-600);
    text-transform: uppercase;
    margin-bottom: 0.15rem;
    display: block;
}

.form-control-sm[b-lefqun57ao],
.form-select-sm[b-lefqun57ao] {
    font-size: 0.78rem;
    padding: var(--space-2xs) 0.4rem;
}

.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);
}
/* /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) */
.no-profile[b-xaaslwlk9r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: var(--space-lg);
    background: var(--yellow-100);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: 0.82rem;
    color: var(--yellow-700);
}

.no-profile i[b-xaaslwlk9r] {
    font-size: var(--font-size-2xl);
}

.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-icon[b-xaaslwlk9r] {
    font-size: var(--font-size-md);
    color: var(--gray-600);
    width: 1.25rem;
    text-align: center;
}

.section-icon[b-xaaslwlk9r]  i {
    font-size: var(--font-size-md);
}

.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);
}

/* Materials Section */
.materials-section[b-xaaslwlk9r] {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    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; }
}

/* Context Indicator */
.context-indicator[b-63byngywon] {
    padding: var(--space-2xs) var(--space-sm);
    background: var(--gray-50);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--gray-600);
}

/* 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-actions[b-63byngywon] {
    display: flex;
    justify-content: flex-end;
    min-height: 18px;
}

.patrol-actions .btn-link[b-63byngywon] {
    opacity: 0.4;
    transition: opacity 0.2s;
    font-size: var(--font-size-sm);
}

.patrol-header:hover .patrol-actions .btn-link[b-63byngywon] {
    opacity: 1;
}

.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);
    }

    /* Delete patrol button */
    .patrol-actions .btn-link[b-63byngywon] {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Notes textarea */
    .notes-section textarea[b-63byngywon] {
        font-size: 16px !important;
        min-height: 80px;
    }
}

@media (pointer: coarse) {
    /* Always show patrol delete on touch */
    .patrol-actions .btn-link[b-63byngywon] {
        opacity: 0.6;
    }
}
/* /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 !important;
}

.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 */
    .save-btn[b-4ex72jmypr],
    .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 #000;
    }

    /* 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: #fff;
    }

    /* 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 #000;
    }

    .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/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
   -------------------------------------------------------------------------- */
@media print {
    .no-print[b-e40aiq6xfr], .no-print *[b-e40aiq6xfr] {
        display: none !important;
    }

    @page {
        size: landscape;
    }
}

/* --------------------------------------------------------------------------
   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;
}

.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);
}

/* --------------------------------------------------------------------------
   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;
}

.bold-cell[b-e40aiq6xfr] {
    font-weight: var(--font-weight-bold);
}
/* /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);
}

.date-range-row[b-5swcbk7o0y] {
    gap: 8px;
}

.checkbox-label[b-5swcbk7o0y] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: var(--font-weight-normal) !important;
    cursor: pointer;
}

.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: #fff;
    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: #198754; }
.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.wide[b-kqzijut3wq] { grid-column: span 2; }
@media (max-width: 1024px) { .section-card.wide[b-kqzijut3wq] { grid-column: 1 / -1; min-width: 0; } }

.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: #fff;
    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; }
.status-dot.pending[b-kqzijut3wq] { background: #98a2b3; }

/* ─── 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);
}

[b-kqzijut3wq] .notes-text {
    color: #475467;
}

/* ─── 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 #fcd34d;
    color: #92400e;
    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 #fcd34d;
    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-inline[b-ueaogdb0px] {
    padding: var(--space-2xs) var(--space-xs);
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    min-width: 180px;
    max-width: 220px;
    background: white;
    color: var(--slate-600);
}

.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-config[b-ueaogdb0px] {
        display: none;
    }

    .header-meta[b-ueaogdb0px] {
        font-size: var(--font-size-sm);
    }

    .brand-name[b-ueaogdb0px] {
        font-size: var(--font-size-xl);
    }

    .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;
    }

    .partial-btn[b-ueaogdb0px] {
        min-height: 48px;
    }

    .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/BulkWineDesk/BulkWineDesk.razor.rz.scp.css */
/* Shell/workspace/pane/collapse mechanics now come from Shared/ManagerShell
   (this page was migrated onto <ManagerShell> 2026-07-08 — see
   LAYOUT-PATTERNS.md "Reference implementations worth knowing about"). Only
   page-specific content styling remains below. The picker pane CSS that used
   to live here was deleted entirely — it was dead scaffold for a feature
   that was never wired up (no markup, no state; the "Add Lot" button that
   would open it is still disabled, "coming next"). */

/* ── Ribbon ────────────────────────────────────────────── */
/* Ribbon toolbar hoisted to site.css .nwc-ribbon-* — only the page-unique
   .bwd-ribbon-hint remains below. */

.bwd-ribbon-hint[b-eb93l027w0] {
    font-size: 0.66rem;
    color: var(--gray-500);
    font-style: italic;
    margin-left: 4px;
}

.bwd-search[b-eb93l027w0] {
    position: relative;
    flex: 1 1 240px;
    max-width: 320px;
}

.bwd-search i[b-eb93l027w0] {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    color: var(--bwd-muted-icon);
    font-size: var(--font-size-md);
    pointer-events: none;
}

.bwd-search input[b-eb93l027w0] { padding-left: 26px; }

.bwd-filter[b-eb93l027w0] {
    width: auto;
    min-width: 130px;
    max-width: 180px;
}

.bwd-chips[b-eb93l027w0] {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

/* .bwd-chip replaced by <FilterChip> (Components/Shared); .bwd-chips wrapper stays. */

/* .bwd-pane-title hoisted to site.css .nwc-pane-title; .bwd-pane-meta (child) stays. */

.bwd-pane-meta[b-eb93l027w0] {
    font-weight: var(--font-weight-normal);
    text-transform: none;
    letter-spacing: 0;
    color: var(--gray-500);
    font-size: 0.72rem;
}

/* ── Vintage tree ──────────────────────────────────────── */
.bwd-tree[b-eb93l027w0] {
    list-style: none;
    margin: 0;
    padding: 4px;
    overflow-y: auto;
    flex: 1;
    font-size: 0.82rem;
}

.bwd-tree-item[b-eb93l027w0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--gray-700);
    gap: 6px;
}

.bwd-tree-item:hover[b-eb93l027w0] { background: var(--gray-100); color: var(--bwd-tree-active-fg); }

.bwd-tree-item.active[b-eb93l027w0] {
    background: var(--blue-100);
    color: var(--bwd-tree-active-fg);
    font-weight: var(--font-weight-semibold);
}

.bwd-tree-count[b-eb93l027w0] {
    font-variant-numeric: tabular-nums;
    color: var(--bwd-muted-icon);
    font-size: 0.72rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.bwd-tree-gal[b-eb93l027w0] {
    color: var(--gray-500);
    font-size: 0.66rem;
}

/* ── Grid pane internals ───────────────────────────────── */
.bwd-grid-wrap[b-eb93l027w0] {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Selected row + archived dim — applied via NwcDataGrid's RowCssClass. */
[b-eb93l027w0] .bwd-row-archived td { opacity: 0.55; background: var(--bwd-row-archived-bg); }
[b-eb93l027w0] .bwd-row-selected td {
    background: var(--blue-100) !important;
    box-shadow: inset 3px 0 0 var(--blue-500);
}

[b-eb93l027w0] .bwd-comp-col {
    max-width: 160px;
    width: 160px;
    overflow: hidden;
}

.bwd-lotcode[b-eb93l027w0] {
    font-family: var(--bs-font-monospace, ui-monospace, SFMono-Regular, monospace);
    font-size: 0.82rem;
}

.bwd-badge[b-eb93l027w0] {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    font-size: 0.62rem;
    border-radius: 9px;
    font-weight: var(--font-weight-medium);
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bwd-badge-archived[b-eb93l027w0] { background: var(--amber-100); color: var(--amber-800); }
.bwd-badge-organic[b-eb93l027w0] { background: var(--receipt-status-assigned-bg); color: var(--receipt-status-assigned-fg); }

.bwd-asking[b-eb93l027w0] { color: var(--bwd-asking-fg); font-weight: var(--font-weight-medium); font-variant-numeric: tabular-nums; }
.bwd-benchmark[b-eb93l027w0] { color: var(--slate-600); font-style: italic; font-variant-numeric: tabular-nums; }
.bwd-benchmark.fallback[b-eb93l027w0] {
    opacity: 0.7;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.bwd-muted[b-eb93l027w0] { color: var(--bwd-muted-fg); font-style: italic; }

.bwd-composition[b-eb93l027w0] {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.78rem;
    vertical-align: middle;
}

/* ── Inspector ─────────────────────────────────────────── */
.bwd-inspector-body[b-eb93l027w0] {
    padding: 12px 14px;
    overflow-y: auto;
    flex: 1;
    font-size: 0.82rem;
}

.bwd-inspector-body h6[b-eb93l027w0] {
    margin: 14px 0 4px;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-700);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.bwd-inspector-body h6:first-of-type[b-eb93l027w0] { margin-top: 0; }

.bwd-inspector-text[b-eb93l027w0] {
    margin: 0;
    color: var(--gray-900);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Grid mechanics now come from global .nwc-kv (site.css) — see
   LAYOUT-PATTERNS.md Pattern 2. Only this instance's deltas remain local. */
.bwd-kv[b-eb93l027w0] {
    gap: 4px 10px;
    margin: 6px 0;
}

.bwd-kv dt[b-eb93l027w0] {
    color: var(--bwd-muted-icon);
}

.bwd-kv dd[b-eb93l027w0] {
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

/* ── Empty / loading states ────────────────────────────── */
/* .bwd-empty container + icon are global (.nwc-empty in site.css); this desk keeps
   its larger 32px padding. */
.bwd-empty[b-eb93l027w0] { padding: 32px; }

.bwd-empty p[b-eb93l027w0] { margin: 0; }

.bwd-empty-sm[b-eb93l027w0] { padding: 18px; }
.bwd-empty-sm i[b-eb93l027w0] { font-size: 1.6rem; }

.bwd-loading[b-eb93l027w0] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Status bar ────────────────────────────────────────── */
/* Container chrome now comes from ManagerShell's .ms-statusbar (near-identical
   values already — same background/border/radius, 0.78rem vs 0.76rem font-size). */
.bwd-status-spacer[b-eb93l027w0] { flex: 1; }

.bwd-orphan[b-eb93l027w0] { color: var(--bwd-warn-strong); }

/* /Pages/BulkWineDesk/Components/InlineEditCell.razor.rz.scp.css */
.iec[b-ialkwid7ey] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.iec.editing[b-ialkwid7ey] {
    width: 100%;
}

.iec-read[b-ialkwid7ey] {
    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-ialkwid7ey] {
    background: var(--ws-panel-bg);
    border-color: var(--gray-300);
}

.iec-read:focus[b-ialkwid7ey] {
    outline: 2px solid var(--bwd-focus-ring);
    outline-offset: 1px;
    background: var(--white);
}

.iec-input[b-ialkwid7ey] {
    font-size: 0.82rem;
    padding: 2px 6px;
    height: auto;
    font-variant-numeric: tabular-nums;
    min-width: 0;
}

.iec-textarea[b-ialkwid7ey] {
    font-variant-numeric: normal;
    resize: vertical;
    min-height: 60px;
    line-height: 1.4;
}

.iec-badge[b-ialkwid7ey] {
    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-ialkwid7ey] {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
}

.iec.saving .iec-badge[b-ialkwid7ey] {
    background: var(--wr-status-info-bg);
    color: var(--wr-status-info-fg);
}

.iec.saved .iec-badge[b-ialkwid7ey] {
    background: var(--green-100);
    color: var(--wr-status-accepted-fg);
    animation: iec-saved-fade-b-ialkwid7ey 1.5s ease-out forwards;
}

@keyframes iec-saved-fade-b-ialkwid7ey {
    0% { opacity: 1; transform: scale(1); }
    70% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.85); }
}

.iec.error .iec-badge[b-ialkwid7ey] {
    background: var(--state-danger-bg);
    color: var(--wr-status-revision-fg);
}

.iec.error .iec-read[b-ialkwid7ey],
.iec.error .iec-input[b-ialkwid7ey] {
    border-color: var(--bwd-danger-border-subtle);
    background: var(--bwd-danger-bg-subtle);
}
/* /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, #e5e7eb);
}

.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, #64748b));
}

.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, #6b7280);
    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, #dbeafe);
    color: var(--blue-700, #1d4ed8);
}

.calsrc-chip.muted[b-40bgjmf6a9] {
    background: var(--surface-muted, #f3f4f6);
    color: var(--text-muted, #6b7280);
}

.calsrc-chip.off[b-40bgjmf6a9] {
    background: var(--amber-100, #fef3c7);
    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, #e5e7eb);
    border-radius: var(--radius-sm, 6px);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.calsrc-discovered-row:hover[b-40bgjmf6a9] {
    background: var(--surface-muted, #f3f4f6);
}

.calsrc-discovered-row.picked[b-40bgjmf6a9] {
    border-color: var(--blue-500, #0d6efd);
    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, #15803d);
}

.calsrc-alert.warn[b-40bgjmf6a9] {
    background: var(--amber-100, #fef3c7);
    color: var(--amber-700, #b45309);
}

.calsrc-alert.error[b-40bgjmf6a9] {
    background: var(--red-50, #fef2f2);
    color: var(--red-700, #b91c1c);
}
/* /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, #f3f4f6);
    border: 1px solid var(--gray-200, #e5e7eb);
    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, #374151);
    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, #e5e7eb);
    color: var(--gray-900, #111827);
}

.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, #9ca3af));
}

.pcal-switch.active[b-upqg0bnx9j] {
    background: var(--surface, #ffffff);
    color: var(--gray-900, #111827);
    border-color: var(--cal-accent, var(--gray-300, #d1d5db));
    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, #f1f3f5);
}

.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, #d1d5db);
    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, #4b5563);
    cursor: pointer;
}

.pcal-more-toggle:hover[b-upqg0bnx9j] {
    color: var(--blue-600, #0078d4);
    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, #7c5cff);
    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, #e9ecef) 0, var(--gray-200, #e9ecef) 4px, var(--gray-50, #f8f9fa) 4px, var(--gray-50, #f8f9fa) 8px);
    color: var(--gray-600);
    border: 1px dashed var(--gray-500, #adb5bd);
    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, #f1f3f5);
    color: var(--gray-500, #868e96);
    border-left: 3px dashed var(--gray-500, #adb5bd);
    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, #b42318);
    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, #9ca3af));
}

.pcal-chip.calendar-topping[b-upqg0bnx9j]::before {
    background: var(--green-500, #2e9e5b);
}

.pcal-chip.calendar-production[b-upqg0bnx9j]::before {
    background: var(--blue-500, #0078d4);
}

.pcal-chip.calendar-concierge[b-upqg0bnx9j]::before {
    background: var(--amber-500, #f59e0b);
}

/* --- 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/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/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/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);
}

/* 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);
}

.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);
}
/* /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/ContactsMain.razor.rz.scp.css */
/* ContactsMain scoped styles — most styling handled by NwcDataGrid */
/* /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;
}

.nm-matrix-scroll[b-wktfz6e5lq] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* 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;
}
/* /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; }

/* ── Status bar (sep + spacer for the slotted content; outer .ms-statusbar comes from ManagerShell) ── */
.cm-status-spacer[b-i89c3t2tza] { flex: 1; }
/* /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/Contracts/ContractMain.razor.rz.scp.css */
.wrapper[b-clbp2w3p2c] {
    display: flex;
    flex-flow: row wrap;
    font-weight: var(--font-weight-bold);
    text-align: center;
    height: 98vh;
    margin-top: 5px;
    overflow: hidden;
    border-radius: 10px 10px 10px 10px;
}

    .wrapper > *[b-clbp2w3p2c] {
        padding: 10px;
        flex: 1 100%;
    }


.header[b-clbp2w3p2c] {
    height: 6vh;
    padding: 10px 20px; /* must stay scoped: .wrapper > * (0,1,1) outranks the global band class */
}

.footer[b-clbp2w3p2c] {
    max-width: 100vw;
    height: 12vh;
    background: var(--legacy-cardgrid-header-gradient);
    color: var(--nwc-text)333; /* Dark text for readability */
    padding: 10px 10px;
    border: 1px solid var(--legacy-cardgrid-border); /* Nickel grey border */
    border-radius: 10px 10px 10px 10px; /* Rounded corners at the bottom */
    overflow: hidden; /* Hide any content that overflows the container */
}

.card-containerFooter[b-clbp2w3p2c] {
    display: flex;
    overflow-x: auto; /* Allow horizontal scrolling */
    gap: 10px; /* Adjust the spacing between cards */
}

    /*.card-containerFooter::-webkit-scrollbar {
        display: block;*/ /* Display the scrollbar in WebKit browsers */
    /*}*/

    .card-containerFooter[b-clbp2w3p2c]::-webkit-scrollbar {
        height: 10px; /* Set the height of the scrollbar */
    }

    .card-containerFooter[b-clbp2w3p2c]::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey; /* Add some shadow for a 3D effect */
        border-radius: 10px; /* Rounded corners */
    }

    .card-containerFooter[b-clbp2w3p2c]::-webkit-scrollbar-thumb {
        background: var(--legacy-cardgrid-border); /* Nickel grey color for the scrollbar thumb */
        border-radius: 10px; /* Rounded corners */
    }


.card-container[b-clbp2w3p2c] {
    display: flex;
    overflow-x: scroll; /* Allow horizontal scrolling */
}


.cards[b-clbp2w3p2c] {
    display: flex;
    gap: 10px; /* Adjust the spacing between cards */
}

.primary[b-clbp2w3p2c] {
    text-align: left;
    flex-grow: 1;
    height: 80vh;
}

.aside-1[b-clbp2w3p2c],
.aside-2[b-clbp2w3p2c] {
    height: 80vh;
}

.custom-link[b-clbp2w3p2c] {
    color: inherit; /* Use the same color as the parent's font color */
    text-decoration: underline; /* Add underline to simulate a link */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: color 0.2s; /* Smooth transition for color change */
    text-align: left; /* Align text to the left */
}

    .custom-link:hover[b-clbp2w3p2c] {
        color: blue; /* Change color on hover */
    }

.grid-card-container[b-clbp2w3p2c] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.grid-row[b-clbp2w3p2c] {
    display: flex; /* Use flex layout for horizontal alignment */
    gap: 5px; /* Adjust gap between items in the row */
    padding: 1px;
}
.grid-item[b-clbp2w3p2c] {
    width: 25%;
    text-align: center; /* Optional: to center the text within each div */
}

.nwc-cardgrid-card p[b-clbp2w3p2c] {
    font-weight: var(--font-weight-bold);
    text-align: center;
    margin: 0;
}

.columnQty[b-clbp2w3p2c] {
    display: flex;
    flex-direction: column; /* Organize the content vertically */
    gap: 2px; /* Adjust the gap between rows */
    align-items: flex-start; /* Align items to the start */
}



@media all and (min-width: 600px) {
    .aside[b-clbp2w3p2c] {
        flex: 1 0 0;
    }
}

@media all and (min-width: 800px) {
    .primary[b-clbp2w3p2c] {
        flex: 3 0px;
    }

    .aside-1[b-clbp2w3p2c] {
        order: 1;
    }

    .primary[b-clbp2w3p2c] {
        order: 2;
    }

    .aside-2[b-clbp2w3p2c] {
        order: 3;
    }

    .footer[b-clbp2w3p2c] {
        order: 4;
    }
}

*[b-clbp2w3p2c] {
    box-sizing: border-box;
}
.home-button[b-clbp2w3p2c] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px; /* Adjust as needed */
    border: none;
    background: none;
    cursor: pointer;
}

.home-icon[b-clbp2w3p2c] {
    color: blue; /* Set the icon color to blue */
    font-size: 24px; /* Adjust the size as needed */
    overflow: hidden; /* Prevent overflow */
}
/* /Pages/Contracts/ContractsPanel.razor.rz.scp.css */
.buttonRow[b-w8ac68xcy5] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}
.headerRow[b-w8ac68xcy5] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: 10px;
    gap: 10px;
}
.headerRowSpaceBetween[b-w8ac68xcy5] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content:space-between;
    margin-top: 10px;
    gap: 10px;
}
.headerColumn[b-w8ac68xcy5] {
    flex-basis: 250px; /* Adjust the value as per your requirement */
}
.headerColumnAuto[b-w8ac68xcy5] {
  flex-basis:auto;
}
    .headerRow label[b-w8ac68xcy5] {
        font-weight: var(--font-weight-bold);
        white-space: nowrap;
    }

    .headerRow button[b-w8ac68xcy5] {
        white-space: nowrap;
    }
.upload-button[b-w8ac68xcy5] {
    position: relative;
    display: inline-block;
}
.btn-transparent[b-w8ac68xcy5] {
    background-color: transparent;
    border: none;
}
    /* Add additional styling to the label to match the "btn btn-primary" style */
    .upload-button label[b-w8ac68xcy5] {
        font-weight: var(--font-weight-bold);
        padding: var(--space-sm) var(--space-lg);
        border: 1px solid var(--blue-500);
        color: var(--white);
        background-color: var(--blue-500);
        border-radius: var(--radius-sm);
        cursor: pointer;
    }

        /* Style the label when it's being clicked or focused */
        .upload-button label:focus[b-w8ac68xcy5],
        .upload-button label:hover[b-w8ac68xcy5] {
            outline: none;
            background-color: var(--contracts-upload-btn-hover-bg);
        }
        .outlineBox[b-w8ac68xcy5]{
border: 1px solid var(--blue-500);
            border-radius: var(--radius-sm);
            padding: var(--space-sm) var(--space-lg);
            max-height: 300px;
            min-height:200px;
            overflow-y:auto;
        }
/* /Pages/Contracts/PermitsPanel.razor.rz.scp.css */
.grid-columns[b-f2m6mdqmup] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.grid-rows[b-f2m6mdqmup] {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-end;
}

.main-container[b-f2m6mdqmup] {
    display: grid;
    grid-template-rows: 12fr 1fr;
    grid-row-gap: 2rem; /* Will be used instead by browsers that do not support `row-gap` */
    row-gap: var(--space-2xl);
    overflow-y: auto;
}


/* /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 */
.ht-page[b-lexpumavna] {
    max-width: 640px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-md) var(--space-2xl);
}

.ht-header[b-lexpumavna] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.ht-header h1[b-lexpumavna] {
    margin: 0;
    font-size: var(--font-size-xl);
}

.ht-date[b-lexpumavna] {
    margin: var(--space-3xs) 0 0;
    color: var(--gray-600);
    font-size: var(--font-size-sm);
}

/* 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. */
.ht-scan-btn[b-lexpumavna] {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    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;
}

.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;
}

.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;
}
/* /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(--border-color, #dee2e6);
    border-radius: var(--radius-md, 6px);
    background: var(--surface-2, #f8f9fa);
}

.qrs-reading[b-sxp2clkgo2] {
    display: flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-muted, #6c757d);
}

.qrs-verdict[b-sxp2clkgo2] {
    border: 1px solid var(--border-color, #dee2e6);
    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;
    }
}
/* /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;
}

.adf-field[b-ljoym76mcn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.adf-label[b-ljoym76mcn] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.adf-optional[b-ljoym76mcn] {
    font-weight: var(--font-weight-regular, 400);
    color: var(--text-secondary);
}

/* 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, #f1f5f9);
}

.adf-actions[b-ljoym76mcn] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}
/* /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;
}

.ru-field[b-m8fczlmloh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
}

.ru-label[b-m8fczlmloh] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-primary);
}

.ru-optional[b-m8fczlmloh] {
    font-weight: var(--font-weight-regular, 400);
    color: var(--text-secondary);
}

.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);
}

.ru-actions[b-m8fczlmloh] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}
/* /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, #dee2e6);
}

@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/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/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);
}


/* ── 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/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/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, #6b7280);
    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] {
    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 .fruit-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 .fruit-fab[b-tz883k0njs]     { top: 118px; }

.home-page .stickers-fab:hover[b-tz883k0njs],
.home-page .fruit-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 .fruit-fab .fruit-fab-label[b-tz883k0njs] { font-size: 0.85rem; }
    .home-page .inventory-fab[b-tz883k0njs],
    .home-page .stickers-fab[b-tz883k0njs],
    .home-page .fruit-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 .fruit-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/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 */
/* Lab Manager has no Tree/Inspector panes (its two tabs are simple report
   pages, not entity lists) — without this override, ManagerShell still
   reserves the tree/inspector grid tracks by default width, squeezing the
   grid pane into a narrow column and leaving empty gray gutters on both
   sides. Collapsing to a single full-width track matches how a one-pane
   manager should look. */
.lab-manager-root[b-zai5fet29r]  .ms-shell.lab-shell-skin .ms-workspace {
    grid-template-columns: 1fr;
}

.lab-manager-root[b-zai5fet29r]  .ms-shell.lab-shell-skin .ms-pane-grid {
    grid-column: 1;
    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; }

.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/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, #f0f0f0);
    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, #333);
    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(--yellow-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;
}
/* /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;
}
/* /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/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);
}

.lp-bol-indicator[b-pf4v2g98k6] {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8rem;
    color: var(--pkg-text-strong);
    padding: var(--space-xs) 0;
}

/* ── 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/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, #6c757d);
}

.sticker-picked i[b-4o5stsxdxt] {
  color: var(--success, #198754);
}

/* 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);
}

.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, #dee2e6);
  border-radius: var(--radius-md, .5rem);
  background: var(--surface-sunken, #f8f9fa);
}

/* 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, #6c757d);
}

.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, #6c757d);
}

.sticker-toggle[b-4o5stsxdxt] {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin: 0;
  font-size: .875rem;
  cursor: pointer;
}

/* ---- batch list ---- */

.sticker-batch-head[b-4o5stsxdxt] {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2, .5rem);
}

.sticker-batch-count[b-4o5stsxdxt] {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--text-muted, #6c757d);
}

.sticker-batch-item[b-4o5stsxdxt] {
  border: 1px solid var(--border-subtle, #dee2e6);
  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, #6c757d);
}

/* 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);
}

.sticker-printer-row[b-4o5stsxdxt] {
  display: flex;
  align-items: center;
  gap: var(--space-2, .5rem);
}

.sticker-printer-row select[b-4o5stsxdxt],
.sticker-nickname-input[b-4o5stsxdxt] {
  flex: 1 1 auto;
  min-width: 0;
}

.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;
}

.sticker-flash[b-4o5stsxdxt] {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  color: var(--success, #198754);
}
/* /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, #198754);
    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-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);
}

/* Tokenized progress bars — reuse the #completeWhite/-Red/-Total fills from A2. */
.summary-bars[b-7ldxj0sj9c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 210px;
}

.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. */
.summary-clients[b-7ldxj0sj9c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    min-width: 220px;
    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;
    }

    .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, #555); }

.msu-upload-zone[b-ff4slfheta] { padding: 1.25rem; border: 2px dashed var(--border-strong, #bbb); border-radius: 8px; }

.msu-template-hint[b-ff4slfheta] { font-size: 0.9rem; color: var(--text-secondary, #555); }

.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, #555); }

.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, #eee); color: var(--text-secondary, #444); }
.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, #666); }

.msu-grid-wrap[b-ff4slfheta] { max-height: 60vh; overflow: auto; border: 1px solid var(--border-subtle, #ddd); 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, #ddd); 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, #888); }
.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/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;
}

/* 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;
}

.rf-row-actions[b-0kdhqgi1nx] {
    display: flex;
    gap: var(--space-sm);
}

.rf-close-actions[b-0kdhqgi1nx] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-sm);
}

/* 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;
}

.rf-entry-field-checkbox[b-0kdhqgi1nx] {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
}

.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] {
        flex: 1 1 100%;
    }

    .rf-entry-fields[b-0kdhqgi1nx] {
        gap: var(--space-sm);
    }

    /* Full-width, thumb-sized actions instead of two small side-by-side buttons. */
    .rf-row-actions[b-0kdhqgi1nx] {
        display: flex;
        flex-direction: column;
        gap: var(--space-2xs);
    }

    .rf-row-actions .btn[b-0kdhqgi1nx] {
        width: 100%;
        min-height: 2.75rem;
    }

    .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(--border-color, #dee2e6);
    border-radius: var(--radius-md, 6px);
    background: var(--surface-2, #f8f9fa);
}

@container rf-panel (max-width: 900px) {
    .rf-scan-split[b-0kdhqgi1nx] {
        grid-template-columns: 1fr;
    }

    .rf-scan-doc-frame[b-0kdhqgi1nx] {
        height: 320px;
    }
}
/* /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, #198754);
}

/* Errors sit left of the action buttons in the sticky footer bar. */
.afc-errors[b-p63hqualby] {
    margin-right: auto;
}
/* /Pages/PumpOver/HarvestView/MoveFermentationContractPanel.razor.rz.scp.css */
.mfc-summary[b-dcvs0y6cqs] {
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ddd;
}

/* 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 */
.table-container[b-7u0cn1gd5m] {
  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-7u0cn1gd5m] {
  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-7u0cn1gd5m], td[b-7u0cn1gd5m] {
  padding: 3px;
  text-align: left;
  border: 1px solid var(--nwc-border); /* Add borders to the table */
}

.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/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/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 */
.tr-badge[b-hvhlh8i2xm] {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
}

.tr-badge.ok[b-hvhlh8i2xm] {
    background: var(--tr-badge-ok-bg);
    color: var(--tr-badge-ok-fg);
}

.tr-badge.bad[b-hvhlh8i2xm] {
    background: var(--tr-badge-bad-bg);
    color: var(--tr-bad-fg);
}

.tr-badge.muted[b-hvhlh8i2xm] {
    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;
}
/* /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/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; }

.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, #cfe8ff); }
  35%  { opacity: 1; max-height: 90px; margin-top: 0;    background: var(--state-info-bg, #cfe8ff); }
  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 colour cue, drop the movement. */
@media (prefers-reduced-motion: reduce) {
  .adp-leg--new[b-1bwhyolv9s] { animation: none; background: var(--state-info-bg, #cfe8ff); }
}

/* 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/TankAllocationEditor.razor.rz.scp.css */
.ta-editor[b-yi0n7aphkw] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ta-editor__actions[b-yi0n7aphkw] {
    display: flex;
}

.ta-editor__preview[b-yi0n7aphkw] {
    font-size: var(--nwc-font-sm, 0.8125rem);
    color: var(--nwc-text-muted, #6c757d);
}

/* R4 duplicate-tank advisory — warns only, never blocks the save. */
.ta-editor__warning[b-yi0n7aphkw] {
    font-size: var(--nwc-font-sm, 0.8125rem);
    color: var(--nwc-warning-text, #8a6d1a);
}
/* /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;
}

/* 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, #6c757d);
    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, #6c757d);
    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. */
.ta-row__unresolved[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);
    color: var(--color-danger, #dc3545);
}
/* /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, #fff);
    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, #fff);
    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, #fff);
    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/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, #fff);
    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, #fff);
    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, #fff);
    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/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] {
    max-width: 900px;
    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);
}
/* /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;
}
/* /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/WineLots/Manager/CreateInInnovintPanel.razor.rz.scp.css */
/* Push panel internals — the overlay host/backdrop belong to the page (.wlm-newlot-host). */

.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/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, #d0d0d0);
    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, #6c757d);
    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(--nwc-surface, #fff);
    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, #d0d0d0);
}

.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, #6c757d);
    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(--nwc-mono, ui-monospace, monospace);
    font-size: 0.82rem;
    white-space: nowrap;
}

.wlm-state[b-a2l7reuh1o] {
    display: inline-block;
    border-radius: 3px;
    font-size: 0.7rem;
    padding: 0 0.35rem;
    white-space: nowrap;
}

.wlm-state-linked[b-a2l7reuh1o]  { background: #d9efd9; color: #1e5e1e; }
.wlm-state-nwc[b-a2l7reuh1o]     { background: #eef0f2; color: #444; }
.wlm-state-innovint[b-a2l7reuh1o]{ background: #e7ecfb; color: #2b4a9b; }
.wlm-state-dup[b-a2l7reuh1o]     { background: #fbecd9; color: #8a5a12; }

.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, #6c757d);
    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, #6c757d);
    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, #6c757d);
    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;
}

.wlm-manual-link[b-a2l7reuh1o] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.5rem;
    max-width: 320px;
}

.wlm-newlot-host[b-a2l7reuh1o] {
    position: fixed;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(680px, 92vw);
    max-height: 84vh;
    overflow-y: auto;
    background: var(--nwc-surface, #fff);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    z-index: 1055;
    padding: 0.75rem;
}
/* /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/WineLots/WineLotsPage.razor.rz.scp.css */

#stickySearch[b-gp9k37ra86] {
    background-color: var(--white);
    position: fixed;
    height: 120px;
    padding: 10px 10px;
    z-index: var(--z-base);
    left: 270px;
    box-sizing: border-box;
    width: 100%;
}

#mainList[b-gp9k37ra86] {
    position: relative;
    padding: 0px;
    width: 100%;
}

table[b-gp9k37ra86] {
    margin-top: 120px;
}

.th_main[b-gp9k37ra86] {
    position: sticky;
    top: 120px;
    background-color: var(--white);
}

#MainTable[b-gp9k37ra86] {
    text-align: left;
    position: relative;
    border-collapse: collapse;
}

#category-select[b-gp9k37ra86] {
    left: 0px;
    top: 0px;
    width: 200px;
    text-align: right;
}

    #category-select label[b-gp9k37ra86] {
        float: left;
        margin: 1px;
    }

    #category-select select[b-gp9k37ra86] {
        max-width: 200px;
        margin: 2px;
    }

.tabs[b-gp9k37ra86] {
    display: flex;
    border-bottom: 1px solid var(--winelot-tabs-border);
}

.tab[b-gp9k37ra86] {
    cursor: pointer;
    padding: 5px 30px;
    color: var(--winelot-tab-fg);
    font-size: 18px;
    border-bottom: 2px solid transparent;
}

    .tab.is-tab-selected[b-gp9k37ra86] {
        border-bottom-color: var(--winelot-tab-active-border);
    }

.flex-container[b-gp9k37ra86] {
    display: flex;
    flex-wrap: nowrap;
    background-color: var(--white);
    width: 100%;
}

    .flex-container > div[b-gp9k37ra86] {
        background-color: var(--white);
        width: 300px;
        margin: 10px;
        text-align: center;
    }

/* /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/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;
  }

/* /Pages/WineProfile/WineProfileMain.razor.rz.scp.css */
.wrapper[b-iopj0ls7iz] {
  display: flex;
  flex-flow: row wrap;
  font-weight: var(--font-weight-bold);
  text-align: center;
  height: 95vh;
  margin-top: 5px;
  overflow: hidden;
  border-radius: 10px 10px 10px 10px;
}

  .wrapper > *[b-iopj0ls7iz] {
    padding: 10px;
    flex: 1 100%;
  }


.header[b-iopj0ls7iz] {
  height: 10vh;
  padding: 10px 20px; /* must stay scoped: .wrapper > * (0,1,1) outranks the global band class */
}

.footer[b-iopj0ls7iz] {
  max-width: 100vw;
  height: 12vh;
  background: var(--legacy-cardgrid-header-gradient);
  color: var(--nwc-text)333; /* Dark text for readability */
/*  padding: 10px 10px;*/
  border: 1px solid var(--legacy-cardgrid-border); /* Nickel grey border */
  border-radius: 10px 10px 10px 10px; /* Rounded corners at the bottom */
  overflow: hidden; /* Hide any content that overflows the container */
/*  margin-bottom:10px;*/
}

.card-containerFooter[b-iopj0ls7iz] {
  display: flex;
  overflow-x: auto; /* Allow horizontal scrolling */
  gap: 10px; /* Adjust the spacing between cards */
  height: 100%;
}

  .card-containerFooter[b-iopj0ls7iz]::-webkit-scrollbar {
    height: 10px; /* Set the height of the scrollbar */
  }

  .card-containerFooter[b-iopj0ls7iz]::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey; /* Add some shadow for a 3D effect */
    border-radius: 10px; /* Rounded corners */
  }

  .card-containerFooter[b-iopj0ls7iz]::-webkit-scrollbar-thumb {
    background: var(--legacy-cardgrid-border); /* Nickel grey color for the scrollbar thumb */
    border-radius: 10px; /* Rounded corners */
  }


.card-container[b-iopj0ls7iz] {
  display: flex;
  overflow-x: scroll; /* Allow horizontal scrolling */
}


.cards[b-iopj0ls7iz] {
  display: flex;
  gap: 10px; /* Adjust the spacing between cards */
}

.primary[b-iopj0ls7iz] {
  text-align: left;
  flex-grow: 1;
  height: 76vh;
}

.aside-1[b-iopj0ls7iz],
.aside-2[b-iopj0ls7iz] {
  height: 76vh;
}

.grid-card-container[b-iopj0ls7iz] {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.grid-row[b-iopj0ls7iz] {
  display: flex; /* Use flex layout for horizontal alignment */
  gap: 5px; /* Adjust gap between items in the row */
  padding: 1px;
}

.grid-item[b-iopj0ls7iz] {
  width: 25%;
  text-align: center; /* Optional: to center the text within each div */
}

@media all and (min-width: 600px) {
  .aside[b-iopj0ls7iz] {
    flex: 1 0 0;
  }
}

@media all and (min-width: 800px) {
  .primary[b-iopj0ls7iz] {
    flex: 3 0px;
  }

  .aside-1[b-iopj0ls7iz] {
    order: 1;
  }

  .primary[b-iopj0ls7iz] {
    order: 2;
  }

  .aside-2[b-iopj0ls7iz] {
    order: 3;
  }

  .footer[b-iopj0ls7iz] {
    order: 4;
  }
}

*[b-iopj0ls7iz] {
  box-sizing: border-box;
}

.home-icon[b-iopj0ls7iz] {
  color: blue; /* Set the icon color to blue */
  font-size: 24px; /* Adjust the size as needed */
  overflow: hidden; /* Prevent overflow */
}
ul li[b-iopj0ls7iz]{
  list-style:none;
}
.wineLotItem:hover[b-iopj0ls7iz]{
  cursor:pointer;
  box-shadow: var(--legacy-cardgrid-shadow-lg);
  border-radius:10px;
}
select[b-iopj0ls7iz] {
  box-shadow: var(--legacy-cardgrid-shadow-lg);
  border-radius: 10px;
  width:max-content;
}

.tankItem[b-iopj0ls7iz] {
  border-radius: 10px;
  box-shadow: var(--wineprofile-tankitem-shadow); /* Slightly reduced shadow */
  transition: box-shadow 0.3s ease; /* Add a transition for smoother hover effect */
}

  .tankItem:hover[b-iopj0ls7iz] {
    cursor: pointer;
    box-shadow: var(--wineprofile-tankitem-hover-shadow); /* Increased shadow on hover */
    border-radius: 15px; /* Slightly increased border radius on hover */
  }

  .tankHeader[b-iopj0ls7iz]{
    padding: 10px 20px; /* must stay scoped: sibling .grid-row (0,1,1) outranks the global band class */
    overflow-y:hidden;
  }

  .tankBody[b-iopj0ls7iz]{
    height:90%;
overflow-y:auto;
  }


/* /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/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/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/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;
}
/* /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/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); }
.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/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/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. */
.lookup-split-footer[b-26azq9gknx] {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: var(--space-md) calc(-1 * var(--space-lg)) calc(-1 * var(--space-md));
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  background: var(--surface-default);
  border-top: 1px solid var(--nwc-border);
}
/* /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: 250px;
    height: 100vh;
    height: 100dvh;
    position: sticky;
    top: 0;
    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: 56px;
    min-width: 56px;
  }

  .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-*) */

.ms-shell[b-5pi7im3904] {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    height: calc(100vh - 56px);
    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. */
}

/* 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);
}

.ms-workspace[b-5pi7im3904] {
    display: grid;
    grid-template-columns: var(--ms-tree-w, 240px) 6px 1fr 6px var(--ms-inspector-w, 320px);
    gap: 0;
    min-height: 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;
    }
}

@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);
}
/* /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);
}

.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, #1c7ed6);
    background: var(--bs-body-bg, #fff);
}

.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, #b45309); }

.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(--bs-border-color, #dee2e6);
    border-radius: 6px;
    background: #fff;
}

.lab-email-preview-empty[b-2kkjnlxqwp] {
    padding: 1rem;
    border: 1px dashed var(--bs-border-color, #dee2e6);
    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(--bs-border-color, #dee2e6);
    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: #f8fafc;
    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;
}

/* ── 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: #fff;
}

.su-status-error[b-f8ucs9hukp] {
    background: #fdecec;
    color: #b42318;
}

.su-status-error .su-status-icon[b-f8ucs9hukp] {
    background: #b42318;
    color: #fff;
}

/* ── 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: #fff;
}

.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 */

@media print {
    .no-print[b-8fdpz0p6qh], .no-print *[b-8fdpz0p6qh] {
        display: none !important;
    }
}

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;
}

.sidebar[b-8fdpz0p6qh] {
    background-image: var(--secondary-shell-gradient);
}

@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;
    }

    .sidebar[b-8fdpz0p6qh] {
        width: 250px;
        height: 100vh;
        height: 100dvh;
        position: sticky;
        top: 0;
    }

    .main > div[b-8fdpz0p6qh] {
        padding-left: var(--space-xl) !important;
        padding-right: var(--space-xl) !important;
    }
}
/* /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, #6b7280);
    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, #6b7280);
    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: #dc3545; fill: #dc3545; }
.wtc-ref-avg[b-wk4kxhcd00] { stroke: #6b7280; fill: #6b7280; }
.wtc-ref-min[b-wk4kxhcd00] { stroke: #0d6efd; fill: #0d6efd; }

/* 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, #6b7280);
}

.wtc-legend-stats[b-wk4kxhcd00] {
    display: flex;
    gap: var(--space-md);
}

.wtc-stat[b-wk4kxhcd00] {
    font-weight: 600;
}

.wtc-stat-min[b-wk4kxhcd00] { color: #0d6efd; }
.wtc-stat-avg[b-wk4kxhcd00] { color: #6b7280; }
.wtc-stat-max[b-wk4kxhcd00] { color: #dc3545; }