/* /Components/AddTenantPlanModal.razor.rz.scp.css */
/* ─── Form layout ──────────────────────────────────────────────────────── */

.add-tenant-plan-form[b-pn70f45ugo] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 4px 0;
}

.add-tenant-plan-loading[b-pn70f45ugo] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 24px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ─── Fields — duplicated from CapacityPanel.razor.css's .capacity-drawer-field
   since scoped CSS cannot be shared between components (CLAUDE.md CSS conventions). ─── */

.add-tenant-plan-field[b-pn70f45ugo] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
}

.add-tenant-plan-field label[b-pn70f45ugo] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.add-tenant-plan-field select[b-pn70f45ugo],
.add-tenant-plan-field input[type="text"][b-pn70f45ugo],
.add-tenant-plan-field input[type="date"][b-pn70f45ugo] {
    padding: 6px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
}

/* ─── Tenant picker — filter-as-you-type results list ─────────────────── */

.add-tenant-plan-results[b-pn70f45ugo] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-default);
    border-radius: 6px;
}

.add-tenant-plan-result-item[b-pn70f45ugo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-card);
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.add-tenant-plan-result-item:last-child[b-pn70f45ugo] {
    border-bottom: none;
}

.add-tenant-plan-result-item:hover[b-pn70f45ugo] {
    background: var(--surface-highlight);
}

.add-tenant-plan-result-name[b-pn70f45ugo] {
    font-weight: 600;
    font-size: 0.82rem;
}

.add-tenant-plan-result-id[b-pn70f45ugo] {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.add-tenant-plan-selected-tenant[b-pn70f45ugo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-highlight);
    font-size: 0.82rem;
    font-weight: 600;
}

.add-tenant-plan-empty[b-pn70f45ugo] {
    margin: 0;
    padding: 10px 0;
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* ─── Error banner — duplicated from CapacityPanel.razor.css's
   .capacity-error-state--inline for the same reason as above. ─── */

.add-tenant-plan-error[b-pn70f45ugo] {
    padding: 10px 12px;
    border-radius: var(--radius-lg);
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    color: var(--status-error);
}

.add-tenant-plan-error p[b-pn70f45ugo] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

/* ─── Actions ───────────────────────────────────────────────────────────── */

.add-tenant-plan-actions[b-pn70f45ugo] {
    display: flex;
    gap: 10px;
    padding-top: 6px;
}
/* /Components/AgentInvocationsStrip.razor.rz.scp.css */
/* DEF-INI-047-F1-3 (+ F1-4 BPM polish) — chips connected by arrows in BPM
   style. Each connector takes its colour from the upstream chip's outcome,
   so a `red → red → green` chain reads as "two failed attempts then a
   successful retry". This restores the recovery story that a flat strip
   of chips hides when the final chip is green. */

.ais-strip[b-xa3av1hb8f] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	padding: 0.875rem 1rem;
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--border-default, #c8dedd);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-xs);
}

.ais-chip[b-xa3av1hb8f] {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem 0.4rem 0.65rem;
	border-radius: 9999px;
	background: #f1f5f9;
	border: 1px solid #e2e8f0;
	font-size: 0.78rem;
	font-weight: 600;
	color: #1e293b;
	text-decoration: none;
	transition: all var(--transition-fast, 150ms);
	cursor: pointer;
	flex: 0 0 auto;
}

.ais-chip:hover[b-xa3av1hb8f] {
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

.ais-icon[b-xa3av1hb8f] {
	font-size: 0.95rem;
	line-height: 1;
}

.ais-label[b-xa3av1hb8f] {
	white-space: nowrap;
}

/* Status pill inside the chip — more prominent than the previous coloured
   dot so the outcome reads even when the chip is small. */
.ais-status[b-xa3av1hb8f] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.1rem;
	height: 1.1rem;
	padding: 0 0.3rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 700;
	background: #e2e8f0;
	color: #475569;
}

/* Outcome → chip border + status pill colour */
.ais-outcome-success[b-xa3av1hb8f] {
	border-color: #a7f3d0;
	background: #ecfdf5;
}
.ais-outcome-success:hover[b-xa3av1hb8f] { border-color: #10b981; }
.ais-outcome-success .ais-status[b-xa3av1hb8f] { background: #10b981; color: #ffffff; }

.ais-outcome-failure[b-xa3av1hb8f] {
	border-color: #fecaca;
	background: #fef2f2;
}
.ais-outcome-failure:hover[b-xa3av1hb8f] { border-color: var(--severity-critical, #dc2626); }
.ais-outcome-failure .ais-status[b-xa3av1hb8f] { background: var(--severity-critical, #dc2626); color: #ffffff; }

.ais-outcome-budget_exhausted[b-xa3av1hb8f] {
	border-color: #fde68a;
	background: #fffbeb;
}
.ais-outcome-budget_exhausted:hover[b-xa3av1hb8f] { border-color: var(--severity-medium, #eab308); }
.ais-outcome-budget_exhausted .ais-status[b-xa3av1hb8f] { background: var(--severity-medium, #eab308); color: #ffffff; }

.ais-outcome-partial[b-xa3av1hb8f] {
	border-color: #fed7aa;
	background: #fff7ed;
}
.ais-outcome-partial:hover[b-xa3av1hb8f] { border-color: var(--severity-high, #f97316); }
.ais-outcome-partial .ais-status[b-xa3av1hb8f] { background: var(--severity-high, #f97316); color: #ffffff; }

/* BPM-style connector between adjacent chips. Mirrors the AgentWorkflowDiagram
   pattern: a short coloured line with a chevron tip. Colour follows the
   upstream chip's outcome (ais-connector-{outcome}). Pending / unknown
   stays muted so it's clear when a chain hasn't completed. */
.ais-connector[b-xa3av1hb8f] {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0 0.3rem;
}

.ais-connector[b-xa3av1hb8f]::before {
	content: "";
	display: block;
	width: 1rem;
	height: 2px;
	background: #cbd5e1;
}

.ais-connector[b-xa3av1hb8f]::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 6px solid #cbd5e1;
}

.ais-connector-success[b-xa3av1hb8f]::before          { background: #10b981; }
.ais-connector-success[b-xa3av1hb8f]::after           { border-left-color: #10b981; }

.ais-connector-failure[b-xa3av1hb8f]::before          { background: var(--severity-critical, #dc2626); }
.ais-connector-failure[b-xa3av1hb8f]::after           { border-left-color: var(--severity-critical, #dc2626); }

.ais-connector-budget_exhausted[b-xa3av1hb8f]::before { background: var(--severity-medium, #eab308); }
.ais-connector-budget_exhausted[b-xa3av1hb8f]::after  { border-left-color: var(--severity-medium, #eab308); }

.ais-connector-partial[b-xa3av1hb8f]::before          { background: var(--severity-high, #f97316); }
.ais-connector-partial[b-xa3av1hb8f]::after           { border-left-color: var(--severity-high, #f97316); }
/* /Components/AgentWorkflowDiagram.razor.rz.scp.css */
/* DEF-INI-047-F1-2 — workflow strip styling. Horizontal flex layout that
   wraps on narrow viewports. Each node is a small card; arrows are CSS
   gradients between cards. Colour palette uses the Fenergo design tokens
   declared in app.css (--brand-teal, --severity-*, --surface-card, etc.). */

.wf-diagram[b-ihnubmpk4f] {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	padding: 1rem;
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--border-default, #c8dedd);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-xs);
}

.wf-node[b-ihnubmpk4f] {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: var(--radius-md, 8px);
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--border-default, #c8dedd);
	min-width: 8rem;
	flex: 0 0 auto;
	transition: transform var(--transition-fast, 150ms), box-shadow var(--transition-fast, 150ms);
}

.wf-node-icon[b-ihnubmpk4f] {
	font-size: 1.5rem;
	line-height: 1;
}

.wf-node-body[b-ihnubmpk4f] {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
}

.wf-node-label[b-ihnubmpk4f] {
	font-size: 0.85rem;
	font-weight: 600;
	color: #1f2937;
}

.wf-node-status[b-ihnubmpk4f] {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wf-node-duration[b-ihnubmpk4f] {
	font-size: 0.7rem;
	color: #6b7280;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.wf-node-annotation[b-ihnubmpk4f] {
	font-size: 0.7rem;
	color: var(--severity-high, #f97316);
	font-weight: 600;
}

/* Status colour mapping — accent on the left edge + status text colour */

.wf-status-pending[b-ihnubmpk4f] {
	opacity: 0.55;
}
.wf-status-pending .wf-node-status[b-ihnubmpk4f] { color: #9ca3af; }

.wf-status-running[b-ihnubmpk4f] {
	border-left: 4px solid var(--brand-teal, #21cfb2);
	background: var(--brand-teal-08, rgba(33,207,178,0.08));
}
.wf-status-running .wf-node-status[b-ihnubmpk4f] { color: #0f766e; }

.wf-status-passed[b-ihnubmpk4f] {
	border-left: 4px solid #10b981;
}
.wf-status-passed .wf-node-status[b-ihnubmpk4f] { color: #047857; }

.wf-status-failed[b-ihnubmpk4f] {
	border-left: 4px solid var(--severity-critical, #dc2626);
	background: #fef2f2;
}
.wf-status-failed .wf-node-status[b-ihnubmpk4f] { color: #991b1b; }

.wf-status-salvaged[b-ihnubmpk4f] {
	border-left: 4px solid var(--severity-high, #f97316);
	background: #fff7ed;
}
.wf-status-salvaged .wf-node-status[b-ihnubmpk4f] { color: #9a3412; }

.wf-status-downgraded[b-ihnubmpk4f] {
	border-left: 4px solid var(--severity-medium, #eab308);
	background: #fefce8;
}
.wf-status-downgraded .wf-node-status[b-ihnubmpk4f] { color: #854d0e; }

.wf-status-skipped[b-ihnubmpk4f] {
	opacity: 0.55;
}
.wf-status-skipped .wf-node-status[b-ihnubmpk4f] { color: #9ca3af; }

/* Pulse the currently-running node so the eye finds it quickly */
@keyframes wf-pulse-b-ihnubmpk4f {
	0%, 100% { box-shadow: 0 0 0 0 var(--brand-teal-20, rgba(33,207,178,0.20)); }
	50%      { box-shadow: 0 0 0 6px var(--brand-teal-04, rgba(33,207,178,0.04)); }
}
.wf-status-running[b-ihnubmpk4f] { animation: wf-pulse-b-ihnubmpk4f 2.5s ease-in-out infinite; }

/* Arrow between nodes. Renders as a thin coloured pill with a chevron tip
   built from a CSS triangle. Picks up colour from the upstream node's
   terminal status — green for handoffs, red after a failure, muted while
   pending. */
.wf-connector[b-ihnubmpk4f] {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 0.5rem;
}
.wf-connector[b-ihnubmpk4f]::before {
	content: "";
	display: block;
	width: 1.5rem;
	height: 2px;
	background: #9ca3af;
}
.wf-connector[b-ihnubmpk4f]::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 7px solid #9ca3af;
}
.wf-connector-passed[b-ihnubmpk4f]::before,
.wf-connector-passed[b-ihnubmpk4f]::after { background: #10b981; border-left-color: #10b981; }
.wf-connector-passed[b-ihnubmpk4f]::before { background: #10b981; }
.wf-connector-failed[b-ihnubmpk4f]::before { background: var(--severity-critical, #dc2626); }
.wf-connector-failed[b-ihnubmpk4f]::after  { border-left-color: var(--severity-critical, #dc2626); }
.wf-connector-pending[b-ihnubmpk4f]::before { background: #d1d5db; }
.wf-connector-pending[b-ihnubmpk4f]::after  { border-left-color: #d1d5db; }
/* /Components/CacheStatus.razor.rz.scp.css */
.cache-status[b-cp70b5s9xz] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.cache-status-text[b-cp70b5s9xz] {
    white-space: nowrap;
}

.cache-status-stale[b-cp70b5s9xz] {
    color: var(--status-warning);
}

.cache-status-warming[b-cp70b5s9xz] {
    color: var(--text-muted);
    font-style: italic;
}

.cache-status-refresh-btn[b-cp70b5s9xz] {
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.cache-status-refresh-btn:hover:not(:disabled)[b-cp70b5s9xz] {
    color: var(--brand-teal);
    border-color: var(--brand-teal);
    background: var(--surface-highlight);
}

.cache-status-refresh-btn:disabled[b-cp70b5s9xz] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cache-status-spinner[b-cp70b5s9xz] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-default);
    border-top-color: var(--brand-teal);
    border-radius: 50%;
    animation: cache-spin-b-cp70b5s9xz 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes cache-spin-b-cp70b5s9xz {
    to { transform: rotate(360deg); }
}

.cache-status-message[b-cp70b5s9xz] {
    font-size: 11px;
    color: var(--text-muted);
}

.cache-status-error[b-cp70b5s9xz] {
    color: var(--status-error);
}

/* ─── Pulsing live indicator ─────────────────────────────────────────── */
.cache-live-dot[b-cp70b5s9xz] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rag-green);
    flex-shrink: 0;
    position: relative;
}

.cache-live-dot[b-cp70b5s9xz]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--rag-green);
    opacity: 0.4;
    animation: livePulse-b-cp70b5s9xz 2s ease-in-out infinite;
}

@keyframes livePulse-b-cp70b5s9xz {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cache-live-dot[b-cp70b5s9xz]::after {
        animation: none;
        opacity: 0.3;
    }
}
/* /Components/CapacityPanel.razor.rz.scp.css */
/* ─── Toolbar (refresh + last-fetched) ─────────────────────────────────── */

.capacity-toolbar[b-p627tjz7nl] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 6px 0 10px;
    flex: 0 0 auto;
}

.capacity-last-fetched[b-p627tjz7nl] {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.approvals-refresh-btn[b-p627tjz7nl] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.approvals-refresh-btn:hover:not(:disabled)[b-p627tjz7nl] {
    background: var(--surface-highlight);
    color: var(--text-primary);
}

.approvals-refresh-btn:disabled[b-p627tjz7nl] {
    opacity: 0.5;
    cursor: not-allowed;
}

.approvals-refresh-btn svg[b-p627tjz7nl] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ─── Panel / table ────────────────────────────────────────────────────── */

.capacity-panel[b-p627tjz7nl] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.capacity-table-controls[b-p627tjz7nl] {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 10px;
}

.capacity-tenant-filter[b-p627tjz7nl] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.capacity-tenant-filter input[b-p627tjz7nl] {
    width: min(20rem, 100%);
    padding: 6px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--text-primary);
    font: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.capacity-filter-result-count[b-p627tjz7nl] {
    padding-bottom: 7px;
    color: var(--text-muted);
    font-size: 0.75rem;
}

.capacity-table-scroll[b-p627tjz7nl] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

.capacity-table[b-p627tjz7nl] {
    width: 100%;
    font-size: 0.82rem;
}

.capacity-volume-header[b-p627tjz7nl] {
    text-align: right;
}

.capacity-sort-button[b-p627tjz7nl] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    text-align: inherit;
    cursor: pointer;
}

.capacity-sort-button:hover[b-p627tjz7nl] {
    color: var(--brand-teal);
}

.capacity-sort-button:focus-visible[b-p627tjz7nl],
.capacity-tenant-filter input:focus-visible[b-p627tjz7nl] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}

.capacity-sort-button--numeric[b-p627tjz7nl] {
    justify-content: flex-end;
    width: 100%;
}

.capacity-volume[b-p627tjz7nl] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.capacity-tenant[b-p627tjz7nl] {
    font-weight: 600;
}

.capacity-filter-empty[b-p627tjz7nl] {
    padding: 28px 16px;
    color: var(--text-muted);
    text-align: center;
}

/* ─── Loading / error / empty states ────────────────────────────────────
   Scoped here rather than reusing the unqualified `.loading-state`/
   `.error-state`/`.empty-state` class names — those already have three
   mutually-inconsistent definitions scattered across other pages' scoped
   CSS (Home.razor.css, Pipelines.razor.css, AgentPdlcCost.razor.css), so
   promoting one of them to app.css would silently change how an unrelated
   page looks. Per docs/DESIGN_SYSTEM.md §9.2/CLAUDE.md, a page-local need
   like this is duplicated into the owning component's scoped file. */
.capacity-loading-state[b-p627tjz7nl] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.capacity-error-state[b-p627tjz7nl] {
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    color: var(--status-error);
}

.capacity-error-state p[b-p627tjz7nl] {
    margin: 0 0 10px;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.capacity-error-state--inline[b-p627tjz7nl] {
    margin-bottom: 12px;
}

.capacity-error-state--inline p[b-p627tjz7nl] {
    margin-bottom: 0;
}

.capacity-empty-state[b-p627tjz7nl] {
    padding: 40px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ─── Inline edit drawer ───────────────────────────────────────────────── */

.capacity-drawer-row td[b-p627tjz7nl] {
    padding: 0;
    background: var(--surface-inset);
}

.capacity-drawer[b-p627tjz7nl] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
    padding: 16px;
}

.capacity-drawer-field[b-p627tjz7nl] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.78rem;
}

.capacity-drawer-field label[b-p627tjz7nl] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.capacity-drawer-field select[b-p627tjz7nl],
.capacity-drawer-field input[type="date"][b-p627tjz7nl] {
    padding: 6px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.82rem;
}

/* Match the Band badge's blue (--status-info) instead of the browser's default
   bright date-picker accent colour. Chromium renders each date segment as its
   own shadow element, so the parent `color` alone doesn't reach them. */
.capacity-drawer-field input[type="date"][b-p627tjz7nl] {
    color: var(--status-info);
}

.capacity-drawer-field input[type="date"][b-p627tjz7nl]::-webkit-datetime-edit-text,
.capacity-drawer-field input[type="date"][b-p627tjz7nl]::-webkit-datetime-edit-day-field,
.capacity-drawer-field input[type="date"][b-p627tjz7nl]::-webkit-datetime-edit-month-field,
.capacity-drawer-field input[type="date"][b-p627tjz7nl]::-webkit-datetime-edit-year-field {
    color: var(--status-info);
}

.capacity-drawer-actions[b-p627tjz7nl] {
    display: flex;
    gap: 10px;
}

/* ─── Capacity Consumed column + usage drill-down ──────────────────────── */

.capacity-usage-cell[b-p627tjz7nl] {
    min-width: 120px;
}

.capacity-usage-toggle[b-p627tjz7nl] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 4px 6px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.capacity-usage-toggle:hover[b-p627tjz7nl] {
    background: var(--surface-highlight);
}

/* .prod-dx-bar-track/.prod-dx-bar-fill (app.css, DxPillarCard's bar idiom) render as <span>s here
   rather than DxPillarCard's <div>s, so display:block must be set explicitly — a span's default
   inline display would otherwise ignore the width/height needed to render the bar. */
.capacity-usage-bar-track[b-p627tjz7nl] {
    display: block;
    width: 64px;
    flex: 0 0 auto;
}

.capacity-usage-bar-track .prod-dx-bar-fill[b-p627tjz7nl] {
    display: block;
}

.capacity-usage-pct[b-p627tjz7nl] {
    flex: 0 0 auto;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

.capacity-usage-pct--unset[b-p627tjz7nl] {
    color: var(--text-muted);
}

.capacity-usage-caret[b-p627tjz7nl] {
    flex: 0 0 auto;
    font-size: 0.7rem;
    color: var(--text-muted);
    transition: transform var(--transition-fast);
}

.capacity-usage-caret--expanded[b-p627tjz7nl] {
    transform: rotate(180deg);
}

.capacity-usage-empty[b-p627tjz7nl] {
    color: var(--text-muted);
}
/* /Components/CapacityUsageDrilldown.razor.rz.scp.css */
/* ─── Capacity usage drill-down (extracted from CapacityPanel.razor.css) ───
   These rules only apply to markup rendered by this component — Blazor scoped
   CSS is keyed per-component, so they must live here, not in the parent's
   scoped file, or they silently stop applying. */

.capacity-usage-row td[b-afichlvpc1] {
    padding: 0;
    background: var(--surface-inset);
}

.capacity-usage-drilldown[b-afichlvpc1] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}

.capacity-usage-summary[b-afichlvpc1] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.capacity-usage-stat[b-afichlvpc1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
}

.capacity-usage-stat-label[b-afichlvpc1] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.capacity-usage-stat-value[b-afichlvpc1] {
    font-weight: 600;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.capacity-usage-breakdown[b-afichlvpc1] {
    font-size: 0.78rem;
}
/* /Components/CommandPalette.razor.rz.scp.css */
.cmd-palette-backdrop[b-w70btbe1pe] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    animation: cmdFadeIn-b-w70btbe1pe 150ms ease;
}

.cmd-palette[b-w70btbe1pe] {
    position: fixed;
    top: 20vh;
    left: 50%;
    transform: translateX(-50%);
    width: 560px;
    max-width: 90vw;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    overflow: hidden;
    animation: cmdSlideIn-b-w70btbe1pe 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes cmdFadeIn-b-w70btbe1pe {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes cmdSlideIn-b-w70btbe1pe {
    from { opacity: 0; transform: translateX(-50%) scale(0.96) translateY(-8px); }
    to { opacity: 1; transform: translateX(-50%) scale(1) translateY(0); }
}

.cmd-palette-input-wrapper[b-w70btbe1pe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-default);
    color: var(--text-muted);
}

.cmd-palette-input[b-w70btbe1pe] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    color: var(--text-primary);
    outline: none;
}

.cmd-palette-input[b-w70btbe1pe]::placeholder {
    color: var(--text-muted);
}

.cmd-palette-kbd[b-w70btbe1pe] {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--surface-inset);
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    font-family: monospace;
}

.cmd-palette-list[b-w70btbe1pe] {
    list-style: none;
    margin: 0;
    padding: 8px;
    max-height: 320px;
    overflow-y: auto;
}

.cmd-palette-item[b-w70btbe1pe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 100ms ease;
}

.cmd-palette-item:hover[b-w70btbe1pe],
.cmd-palette-item.selected[b-w70btbe1pe] {
    background: var(--surface-highlight);
}

.cmd-palette-item.selected[b-w70btbe1pe] {
    background: var(--brand-teal-08);
}

.cmd-palette-item-icon[b-w70btbe1pe] {
    font-size: 16px;
    width: 24px;
    text-align: center;
}

.cmd-palette-item-label[b-w70btbe1pe] {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.cmd-palette-item-path[b-w70btbe1pe] {
    font-size: 12px;
    color: var(--text-muted);
    font-family: monospace;
}

.cmd-palette-empty[b-w70btbe1pe] {
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .cmd-palette-backdrop[b-w70btbe1pe],
    .cmd-palette[b-w70btbe1pe] {
        animation: none;
    }
}
/* /Components/FeedbackClustersPanel.razor.rz.scp.css */
/* ─── Clusters toolbar (refresh + last-fetched) ──────────────────────── */

.clusters-toolbar[b-vyohewgc9y] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 6px 0 10px;
    flex: 0 0 auto;
}

.clusters-last-fetched[b-vyohewgc9y] {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.approvals-refresh-btn[b-vyohewgc9y] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.approvals-refresh-btn:hover:not(:disabled)[b-vyohewgc9y] {
    background: var(--surface-highlight);
    color: var(--text-primary);
}

.approvals-refresh-btn:disabled[b-vyohewgc9y] {
    opacity: 0.5;
    cursor: not-allowed;
}

.approvals-refresh-btn svg[b-vyohewgc9y] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ─── List panel ─────────────────────────────────────────────────────── */

.clusters-panel[b-vyohewgc9y] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.clusters-table-scroll[b-vyohewgc9y] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

/* ─── Source state ───────────────────────────────────────────────────── */

.clusters-source-warning[b-vyohewgc9y] {
    margin-bottom: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-highlight);
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.clusters-source-warning p[b-vyohewgc9y] {
    margin: 0;
}

/* ─── Table ──────────────────────────────────────────────────────────── */

.clusters-table[b-vyohewgc9y] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.82rem;
}

.clusters-table thead[b-vyohewgc9y] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.clusters-table thead th[b-vyohewgc9y] {
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--surface-inset);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

.cluster-count-header[b-vyohewgc9y] {
    text-align: right;
}

.clusters-table tbody tr[b-vyohewgc9y] {
    border-top: 1px solid var(--border-default);
    transition: background 0.12s ease;
}

.clusters-table tbody tr:first-child[b-vyohewgc9y] {
    border-top: none;
}

.clusters-table tbody tr:hover[b-vyohewgc9y],
.clusters-row:hover[b-vyohewgc9y] {
    background: var(--surface-highlight);
}

.clusters-table tbody td[b-vyohewgc9y] {
    padding: 10px 14px;
    vertical-align: middle;
    color: var(--text-primary);
}

/* ─── Cell modifiers ─────────────────────────────────────────────────── */

.cluster-agent[b-vyohewgc9y] {
    font-weight: 600;
}

.cluster-model[b-vyohewgc9y] {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cluster-count[b-vyohewgc9y] {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* ─── Status badges ──────────────────────────────────────────────────── */

.promoted-badge[b-vyohewgc9y] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(22, 163, 74, 0.12);
    color: var(--rag-green, #16a34a);
}

.clusters-status-pending[b-vyohewgc9y] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(100, 116, 139, 0.12);
    color: var(--text-muted);
}

/* ─── Promote button ─────────────────────────────────────────────────── */

.promote-btn[b-vyohewgc9y] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    border: 1px solid var(--brand-teal);
    border-radius: 6px;
    background: var(--brand-teal-20);
    color: var(--brand-teal);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.promote-btn:hover:not(:disabled)[b-vyohewgc9y] {
    background: var(--brand-teal);
    color: #fff;
}

.promote-btn:disabled[b-vyohewgc9y] {
    opacity: 0.45;
    cursor: not-allowed;
    border-color: var(--border-default);
    background: var(--surface-card);
    color: var(--text-muted);
}
/* /Components/LiveFetchStatus.razor.rz.scp.css */
/* Mirrors CacheStatus.razor.css — same visual, different wiring (live-fetch vs cache endpoint) */
.cache-status[b-ibfcjhvsmm] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-muted);
}

.cache-status-text[b-ibfcjhvsmm] {
    white-space: nowrap;
}

.cache-status-warming[b-ibfcjhvsmm] {
    color: var(--text-muted);
    font-style: italic;
}

.cache-status-refresh-btn[b-ibfcjhvsmm] {
    background: none;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.cache-status-refresh-btn:hover:not(:disabled)[b-ibfcjhvsmm] {
    color: var(--brand-teal);
    border-color: var(--brand-teal);
    background: var(--surface-highlight);
}

.cache-status-refresh-btn:disabled[b-ibfcjhvsmm] {
    opacity: 0.4;
    cursor: not-allowed;
}

.cache-status-spinner[b-ibfcjhvsmm] {
    width: 12px;
    height: 12px;
    border: 2px solid var(--border-default);
    border-top-color: var(--brand-teal);
    border-radius: 50%;
    animation: cache-spin-b-ibfcjhvsmm 0.6s linear infinite;
    flex-shrink: 0;
}

@keyframes cache-spin-b-ibfcjhvsmm {
    to { transform: rotate(360deg); }
}

.cache-live-dot[b-ibfcjhvsmm] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--rag-green);
    flex-shrink: 0;
    position: relative;
}

.cache-live-dot[b-ibfcjhvsmm]::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: var(--rag-green);
    opacity: 0.4;
    animation: livePulse-b-ibfcjhvsmm 2s ease-in-out infinite;
}

@keyframes livePulse-b-ibfcjhvsmm {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50%       { transform: scale(1.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .cache-live-dot[b-ibfcjhvsmm]::after { animation: none; opacity: 0.3; }
}
/* /Components/ModelApprovalsPanel.razor.rz.scp.css */
/* ─── Approvals toolbar (refresh + last-fetched) ─────────────────────── */

.approvals-toolbar[b-0kiveg6tnq] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 6px 0 10px;
    flex: 0 0 auto;
}

.approvals-last-fetched[b-0kiveg6tnq] {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.approvals-refresh-btn[b-0kiveg6tnq] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.approvals-refresh-btn:hover:not(:disabled)[b-0kiveg6tnq] {
    background: var(--surface-highlight);
    color: var(--text-primary);
}

.approvals-refresh-btn:disabled[b-0kiveg6tnq] {
    opacity: 0.5;
    cursor: not-allowed;
}

.approvals-refresh-btn svg[b-0kiveg6tnq] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ─── Inner tab bar (In Flight / Approved) ───────────────────────────── */

.view-tabs[b-0kiveg6tnq] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-default);
    overflow-x: auto;
    margin-bottom: 4px;
    flex: 0 0 auto;
}

.view-tab[b-0kiveg6tnq] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.view-tab:hover[b-0kiveg6tnq] {
    color: var(--text-secondary);
}

.view-tab-active[b-0kiveg6tnq] {
    color: var(--brand-teal);
    border-bottom-color: var(--brand-teal);
}

.tab-count[b-0kiveg6tnq] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--surface-highlight);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 700;
}

.view-tab-active .tab-count[b-0kiveg6tnq] {
    background: var(--brand-teal-20);
    color: var(--brand-teal);
}

/* ─── List panel ─────────────────────────────────────────────────────── */

.scorecard-list[b-0kiveg6tnq] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.scorecard-table-scroll[b-0kiveg6tnq] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

/* ─── Table ──────────────────────────────────────────────────────────── */

.scorecard-table[b-0kiveg6tnq] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.82rem;
}

.scorecard-table thead[b-0kiveg6tnq] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.scorecard-table thead th[b-0kiveg6tnq] {
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--surface-inset);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

.scorecard-table tbody tr[b-0kiveg6tnq] {
    border-top: 1px solid var(--border-default);
    transition: background 0.12s ease;
}

.scorecard-table tbody tr:first-child[b-0kiveg6tnq] {
    border-top: none;
}

.scorecard-table tbody tr:hover[b-0kiveg6tnq],
.scorecard-row:hover[b-0kiveg6tnq] {
    background: var(--surface-highlight);
}

.scorecard-table tbody td[b-0kiveg6tnq] {
    padding: 10px 14px;
    vertical-align: middle;
    color: var(--text-primary);
}

.scorecard-row[b-0kiveg6tnq] {
    cursor: pointer;
    outline: none;
}

.scorecard-row:focus-visible[b-0kiveg6tnq] {
    background: var(--surface-highlight);
    box-shadow: inset 0 0 0 2px var(--brand-teal);
}

.scorecard-row-selected[b-0kiveg6tnq] {
    background: var(--brand-teal-20) !important;
}

.scorecard-agent[b-0kiveg6tnq] {
    font-weight: 600;
}

.scorecard-model[b-0kiveg6tnq] {
    font-family: 'Space Mono', monospace;
    font-size: 0.75rem;
    color: var(--text-secondary);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── Status badges ──────────────────────────────────────────────────── */

.scorecard-status[b-0kiveg6tnq] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.scorecard-status-draft[b-0kiveg6tnq] {
    background: rgba(217, 119, 6, 0.15);
    color: var(--rag-amber, #d97706);
}

.scorecard-status-approved[b-0kiveg6tnq] {
    background: rgba(22, 163, 74, 0.12);
    color: var(--rag-green, #16a34a);
}

/* ─── Risk rating badges ─────────────────────────────────────────────── */

.risk-badge[b-0kiveg6tnq] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.risk-badge-low[b-0kiveg6tnq]    { background: rgba(22, 163, 74, 0.12);   color: var(--rag-green, #16a34a); }
.risk-badge-medium[b-0kiveg6tnq] { background: rgba(217, 119, 6, 0.15);   color: var(--rag-amber, #d97706); }
.risk-badge-high[b-0kiveg6tnq]   { background: rgba(220, 38, 38, 0.12);   color: var(--severity-critical, #dc2626); }
.risk-badge-none[b-0kiveg6tnq]   { background: transparent;               color: var(--text-muted); }

/* ─── Detail overlay ─────────────────────────────────────────────────── */

.scorecard-detail-overlay[b-0kiveg6tnq] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 200;
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
}

.scorecard-detail-panel[b-0kiveg6tnq] {
    width: min(520px, 90vw);
    background: var(--surface-card);
    border-left: 1px solid var(--border-default);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.scorecard-detail-header[b-0kiveg6tnq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-inset);
    flex-shrink: 0;
}

.scorecard-detail-title[b-0kiveg6tnq] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.02em;
}

.scorecard-detail-close[b-0kiveg6tnq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.scorecard-detail-close:hover[b-0kiveg6tnq] {
    background: var(--surface-highlight);
    color: var(--text-primary);
}

/* ─── Detail body ────────────────────────────────────────────────────── */

.scorecard-detail-body[b-0kiveg6tnq] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ─── Detail sections ────────────────────────────────────────────────── */

.detail-section[b-0kiveg6tnq] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.detail-section-title[b-0kiveg6tnq] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-teal);
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-default);
}

.detail-fields[b-0kiveg6tnq] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}

.detail-field[b-0kiveg6tnq] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.detail-field-full[b-0kiveg6tnq] {
    grid-column: 1 / -1;
}

.detail-field-label[b-0kiveg6tnq] {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.detail-field-value[b-0kiveg6tnq] {
    font-size: 0.82rem;
    color: var(--text-primary);
    word-break: break-word;
}

.detail-field-mono[b-0kiveg6tnq] {
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
}
/* /Components/ReleaseReadinessPanel.razor.rz.scp.css */
/* ─── Toolbar ──────────────────────────────────────────────────────────── */

.rr-toolbar[b-7zr4x0lhqy] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 6px 0 10px;
    flex: 0 0 auto;
}

.rr-last-fetched[b-7zr4x0lhqy] {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.approvals-refresh-btn[b-7zr4x0lhqy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.approvals-refresh-btn:hover:not(:disabled)[b-7zr4x0lhqy] {
    background: var(--surface-highlight);
    color: var(--text-primary);
}

.approvals-refresh-btn:disabled[b-7zr4x0lhqy] {
    opacity: 0.5;
    cursor: not-allowed;
}

.approvals-refresh-btn svg[b-7zr4x0lhqy] {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
}

/* ─── KPI strip ────────────────────────────────────────────────────────── */

.rr-kpi-strip[b-7zr4x0lhqy] {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rr-kpi[b-7zr4x0lhqy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    min-width: 90px;
    box-shadow: var(--shadow-xs);
}

.rr-kpi-value[b-7zr4x0lhqy] {
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.rr-kpi-label[b-7zr4x0lhqy] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    white-space: nowrap;
}

.rr-kpi--green .rr-kpi-value[b-7zr4x0lhqy] { color: var(--rag-green); }
.rr-kpi--amber .rr-kpi-value[b-7zr4x0lhqy] { color: var(--rag-amber); }
.rr-kpi--red   .rr-kpi-value[b-7zr4x0lhqy] { color: var(--severity-critical); }
.rr-kpi--neutral .rr-kpi-value[b-7zr4x0lhqy] { color: var(--text-muted); }
.rr-kpi--closed .rr-kpi-value[b-7zr4x0lhqy] { color: var(--brand-teal); }

/* ─── Panel / table ────────────────────────────────────────────────────── */

.rr-panel[b-7zr4x0lhqy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.rr-legend[b-7zr4x0lhqy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-default);
}

.rr-legend-dot[b-7zr4x0lhqy] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rr-table-scroll[b-7zr4x0lhqy] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

.rr-table[b-7zr4x0lhqy] {
    width: 100%;
    font-size: 0.82rem;
}

.rr-table th[b-7zr4x0lhqy] {
    white-space: nowrap;
}

.rr-row-closed[b-7zr4x0lhqy] {
    opacity: 0.7;
}

.rr-type-badge[b-7zr4x0lhqy] {
    font-size: 0.65rem;
    white-space: nowrap;
}

.rr-item-link[b-7zr4x0lhqy] {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
}

.rr-item-link:hover[b-7zr4x0lhqy] {
    color: var(--brand-teal);
    text-decoration: underline;
}

.rr-state[b-7zr4x0lhqy] {
    white-space: nowrap;
    color: var(--text-secondary);
    font-size: 0.78rem;
}

.rr-area[b-7zr4x0lhqy] {
    font-size: 0.75rem;
    color: var(--text-muted);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ─── RAG colours ──────────────────────────────────────────────────────── */

.rr-rag-dot[b-7zr4x0lhqy] {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.rr-rag-green[b-7zr4x0lhqy]  { background: var(--rag-green); }
.rr-rag-amber[b-7zr4x0lhqy]  { background: var(--rag-amber); }
.rr-rag-red[b-7zr4x0lhqy]    { background: var(--severity-critical); }
.rr-rag-neutral[b-7zr4x0lhqy] { background: var(--text-muted); }

.rr-rag-green-text[b-7zr4x0lhqy]  { color: var(--rag-green); }
.rr-rag-amber-text[b-7zr4x0lhqy]  { color: var(--rag-amber); }
.rr-rag-red-text[b-7zr4x0lhqy]    { color: var(--severity-critical); }
.rr-rag-neutral-text[b-7zr4x0lhqy] { color: var(--text-muted); }
/* /Components/RunSummaryCard.razor.rz.scp.css */
/* DEF-INI-047-F1-6 — Run-summary card. Sits at the top of the Drill-Down
   page above the pipeline strip. Coloured accent bar on the left maps to
   the overall run tone (success / warning / failure / partial / neutral).
   Uses the same Fenergo design tokens as the rest of the page. */

.rsc-loading[b-1czr8yp4xs] {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 1.25rem;
	border: 1px dashed var(--border-default, #c8dedd);
	border-radius: var(--radius-lg, 12px);
	background: var(--surface-card, #ffffff);
	color: #64748b;
	font-size: 0.85rem;
}

.rsc-spinner[b-1czr8yp4xs] {
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--border-default, #e2e8f0);
	border-top-color: var(--brand-teal, #21cfb2);
	border-radius: 50%;
	animation: rsc-spin-b-1czr8yp4xs 0.7s linear infinite;
}

@keyframes rsc-spin-b-1czr8yp4xs {
	to { transform: rotate(360deg); }
}

.rsc-card[b-1czr8yp4xs] {
	display: grid;
	grid-template-columns: 6px 1fr;
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--border-default, #c8dedd);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.rsc-accent[b-1czr8yp4xs] {
	background: var(--brand-teal, #21cfb2);
}

.rsc-tone-success .rsc-accent[b-1czr8yp4xs]  { background: #10b981; }
.rsc-tone-warning .rsc-accent[b-1czr8yp4xs]  { background: var(--severity-medium, #eab308); }
.rsc-tone-failure .rsc-accent[b-1czr8yp4xs]  { background: var(--severity-critical, #dc2626); }
.rsc-tone-partial .rsc-accent[b-1czr8yp4xs]  { background: var(--severity-high, #f97316); }
.rsc-tone-neutral .rsc-accent[b-1czr8yp4xs]  { background: var(--brand-teal, #21cfb2); }

.rsc-body[b-1czr8yp4xs] {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	min-width: 0;
}

.rsc-header[b-1czr8yp4xs] {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	flex-wrap: wrap;
}

.rsc-headline[b-1czr8yp4xs] {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.01em;
}

.rsc-meta[b-1czr8yp4xs] {
	font-size: 0.7rem;
	color: #94a3b8;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	white-space: nowrap;
}

.rsc-description[b-1czr8yp4xs] {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: #1e293b;
	overflow-wrap: anywhere;
}

.rsc-facts[b-1czr8yp4xs] {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 0.75rem;
	margin: 0;
}

.rsc-fact[b-1czr8yp4xs] {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.3rem 0.65rem;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 9999px;
	font-size: 0.78rem;
}

.rsc-fact-label[b-1czr8yp4xs] {
	margin: 0;
	color: #64748b;
	font-weight: 600;
}

.rsc-fact-value[b-1czr8yp4xs] {
	margin: 0;
	color: #0f172a;
	font-weight: 700;
}

.rsc-fact-tone-success[b-1czr8yp4xs] { background: #ecfdf5; border-color: #a7f3d0; }
.rsc-fact-tone-success .rsc-fact-value[b-1czr8yp4xs] { color: #047857; }

.rsc-fact-tone-warning[b-1czr8yp4xs] { background: #fffbeb; border-color: #fde68a; }
.rsc-fact-tone-warning .rsc-fact-value[b-1czr8yp4xs] { color: #92400e; }

.rsc-fact-tone-failure[b-1czr8yp4xs] { background: #fef2f2; border-color: #fecaca; }
.rsc-fact-tone-failure .rsc-fact-value[b-1czr8yp4xs] { color: #991b1b; }

.rsc-fact-tone-partial[b-1czr8yp4xs] { background: #fff7ed; border-color: #fed7aa; }
.rsc-fact-tone-partial .rsc-fact-value[b-1czr8yp4xs] { color: #9a3412; }

.rsc-recommend[b-1czr8yp4xs] {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.85rem;
	background: var(--brand-teal-08, rgba(33,207,178,0.08));
	color: #0f766e;
	border: 1px solid var(--brand-teal-20, rgba(33,207,178,0.20));
	border-radius: var(--radius-sm, 6px);
	text-decoration: none;
	font-size: 0.82rem;
	font-weight: 600;
	transition: all var(--transition-fast, 150ms);
}

.rsc-recommend:hover[b-1czr8yp4xs] {
	background: var(--brand-teal-20, rgba(33,207,178,0.20));
	border-color: var(--brand-teal, #21cfb2);
	transform: translateX(2px);
}
/* /Components/SidePanel.razor.rz.scp.css */
.side-panel-backdrop[b-probfbmwsn] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

.side-panel-backdrop.open[b-probfbmwsn] {
    opacity: 1;
    pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .side-panel-backdrop[b-probfbmwsn] {
        transition: opacity 200ms ease-out;
    }
}

.side-panel-container[b-probfbmwsn] {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: var(--panel-width, 520px);
    max-width: 90vw;
    background: var(--surface-card);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transform: translateX(100%);
    border-left: 1px solid var(--border-default);
}

.side-panel-container.open[b-probfbmwsn] {
    transform: translateX(0);
}

@media (prefers-reduced-motion: no-preference) {
    .side-panel-container[b-probfbmwsn] {
        transition: transform 200ms ease-out;
    }
}

.side-panel-header[b-probfbmwsn] {
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-default);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.side-panel-header h2[b-probfbmwsn] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.side-panel-close[b-probfbmwsn] {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .side-panel-close[b-probfbmwsn] {
        transition: background-color 200ms, color 200ms;
    }
}

.side-panel-close:hover[b-probfbmwsn] {
    background-color: var(--surface-inset);
    color: var(--text-primary);
}

.side-panel-close:focus-visible[b-probfbmwsn] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
    border-radius: inherit;
}

.side-panel-content[b-probfbmwsn] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Ensure proper scrollbar styling */
.side-panel-content[b-probfbmwsn]::-webkit-scrollbar {
    width: 8px;
}

.side-panel-content[b-probfbmwsn]::-webkit-scrollbar-track {
    background: var(--surface-inset);
}

.side-panel-content[b-probfbmwsn]::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: 4px;
}

.side-panel-content[b-probfbmwsn]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ─── Content stagger reveal ─────────────────────────────────────────── */
@keyframes panelContentReveal-b-probfbmwsn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: translateX(0); }
}

.side-panel-container.open .side-panel-content > *[b-probfbmwsn] {
  animation: panelContentReveal-b-probfbmwsn 300ms ease both;
}

.side-panel-container.open .side-panel-content > *:nth-child(1)[b-probfbmwsn] { animation-delay: 60ms; }
.side-panel-container.open .side-panel-content > *:nth-child(2)[b-probfbmwsn] { animation-delay: 120ms; }
.side-panel-container.open .side-panel-content > *:nth-child(3)[b-probfbmwsn] { animation-delay: 180ms; }
.side-panel-container.open .side-panel-content > *:nth-child(4)[b-probfbmwsn] { animation-delay: 240ms; }
.side-panel-container.open .side-panel-content > *:nth-child(5)[b-probfbmwsn] { animation-delay: 300ms; }
.side-panel-container.open .side-panel-content > *:nth-child(6)[b-probfbmwsn] { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  .side-panel-container.open .side-panel-content > *[b-probfbmwsn] {
    animation: none;
  }
}
/* /Components/SignalCorrelationPanel.razor.rz.scp.css */
/* ─── Toolbar ─────────────────────────────────────────────────────────── */

.signal-correlation-toolbar[b-04quj8wteb] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 6px 0 10px;
}

.signal-correlation-toolbar:has(.tab-info-tooltip--open)[b-04quj8wteb] {
    margin-bottom: 6rem;
}

/* ─── Panel container ─────────────────────────────────────────────────── */

.corr-panel[b-04quj8wteb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.corr-table-scroll[b-04quj8wteb] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

/* ─── Table ──────────────────────────────────────────────────────────── */

.corr-table thead th[b-04quj8wteb] {
    padding: 10px 14px;
    text-align: left;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--surface-inset);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

.corr-count-header[b-04quj8wteb] {
    text-align: right;
}

.corr-agent-name[b-04quj8wteb] {
    font-weight: 600;
}

.corr-count[b-04quj8wteb] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.corr-count--nonzero[b-04quj8wteb] {
    color: var(--severity-high, #f97316);
    font-weight: 700;
}
/* /Components/TabInfoTooltip.razor.rz.scp.css */
.tab-info-tooltip[b-gaipc73m21] {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-right: auto;
}

.tab-info-tooltip__button[b-gaipc73m21] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 1px solid var(--border-default);
    border-radius: 50%;
    background: var(--surface-card);
    color: var(--brand-teal);
    cursor: help;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.tab-info-tooltip__button:hover[b-gaipc73m21],
.tab-info-tooltip__button:focus-visible[b-gaipc73m21] {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 2px var(--brand-teal-20);
    outline: none;
}

.tab-info-tooltip__content[b-gaipc73m21] {
    position: absolute;
    z-index: 10;
    top: 50%;
    left: calc(100% + 8px);
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: min(22rem, calc(100vw - 2rem));
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-md);
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translate(4px, -50%);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.tab-info-tooltip__content strong[b-gaipc73m21] {
    color: var(--text-primary);
    font-size: 0.8rem;
}

.tab-info-tooltip--open .tab-info-tooltip__content[b-gaipc73m21] {
    opacity: 1;
    transform: translate(0, -50%);
}
/* /Components/TenantConfigAppConfigTab.razor.rz.scp.css */
/* ── Banner ────────────────────────────────────────────────────────────── */

.tc-banner[b-ezdjgm4qf2] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.tc-banner h2[b-ezdjgm4qf2] { font-size: 1.125rem; font-weight: 600; margin: 0.25rem 0 0.5rem; }
.tc-banner p[b-ezdjgm4qf2] { color: var(--text-secondary); margin: 0; line-height: 1.5; }

.tc-banner-icon[b-ezdjgm4qf2] {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em;
    background: var(--brand-teal-20); color: var(--brand-teal);
}

.tc-warning .tc-banner-icon[b-ezdjgm4qf2] { background: var(--severity-high); color: #fff; }

.tc-retry-btn[b-ezdjgm4qf2] {
    margin-top: 0.75rem; padding: 0.5rem 1rem; border-radius: var(--radius-lg);
    border: 1px solid var(--border-default); background: var(--surface-card);
    color: inherit; cursor: pointer; font-size: 0.875rem;
    transition: background var(--transition-fast);
}
.tc-retry-btn:hover[b-ezdjgm4qf2] { background: var(--surface-highlight); }

/* ── Toolbar ───────────────────────────────────────────────────────────── */

.tc-toolbar[b-ezdjgm4qf2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tc-filter-group[b-ezdjgm4qf2] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.tc-filter-label[b-ezdjgm4qf2] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.tc-filter-select[b-ezdjgm4qf2] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color var(--transition-fast);
}
.tc-filter-select:focus[b-ezdjgm4qf2] { border-color: var(--brand-teal); }

.tc-filter-count[b-ezdjgm4qf2] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tc-sync-status[b-ezdjgm4qf2] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tc-sync-badge[b-ezdjgm4qf2] {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--brand-teal-20);
    color: var(--brand-teal);
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.tc-table-wrap[b-ezdjgm4qf2] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: auto;
}

.tc-table[b-ezdjgm4qf2] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tc-table thead tr[b-ezdjgm4qf2] {
    border-bottom: 1px solid var(--border-default);
}

.tc-table th[b-ezdjgm4qf2] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tc-table th.tc-num[b-ezdjgm4qf2],
.tc-table td.tc-num[b-ezdjgm4qf2] {
    text-align: right;
}

.tc-table tbody tr[b-ezdjgm4qf2] {
    border-bottom: 1px solid var(--border-default);
    transition: background var(--transition-fast);
}
.tc-table tbody tr:last-child[b-ezdjgm4qf2] { border-bottom: none; }
.tc-table tbody tr:hover[b-ezdjgm4qf2] { background: var(--surface-highlight); }

.tc-table td[b-ezdjgm4qf2] {
    padding: 0.625rem 1rem;
    vertical-align: middle;
}

.tc-name-cell[b-ezdjgm4qf2] {
    font-weight: 500;
    white-space: nowrap;
}

.tc-no-results[b-ezdjgm4qf2] {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 1rem !important;
    font-style: italic;
}
/* /Components/TenantConfigEntitlementsTab.razor.rz.scp.css */
/* ── Banner ────────────────────────────────────────────────────────────── */

.tc-banner[b-07qf84t3mn] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.tc-banner h2[b-07qf84t3mn] { font-size: 1.125rem; font-weight: 600; margin: 0.25rem 0 0.5rem; }
.tc-banner p[b-07qf84t3mn] { color: var(--text-secondary); margin: 0; line-height: 1.5; }

.tc-banner-icon[b-07qf84t3mn] {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em;
    background: var(--brand-teal-20); color: var(--brand-teal);
}

.tc-warning .tc-banner-icon[b-07qf84t3mn] { background: var(--severity-high); color: #fff; }

.tc-retry-btn[b-07qf84t3mn] {
    margin-top: 0.75rem; padding: 0.5rem 1rem; border-radius: var(--radius-lg);
    border: 1px solid var(--border-default); background: var(--surface-card);
    color: inherit; cursor: pointer; font-size: 0.875rem;
    transition: background var(--transition-fast);
}
.tc-retry-btn:hover[b-07qf84t3mn] { background: var(--surface-highlight); }

/* ── Toolbar ───────────────────────────────────────────────────────────── */

.tc-toolbar[b-07qf84t3mn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tc-filter-group[b-07qf84t3mn] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.tc-filter-label[b-07qf84t3mn] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.tc-filter-select[b-07qf84t3mn] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color var(--transition-fast);
}
.tc-filter-select:focus[b-07qf84t3mn] { border-color: var(--brand-teal); }

.tc-filter-count[b-07qf84t3mn] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tc-sync-status[b-07qf84t3mn] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tc-sync-badge[b-07qf84t3mn] {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--brand-teal-20);
    color: var(--brand-teal);
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.tc-table-wrap[b-07qf84t3mn] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: auto;
}

.tc-table[b-07qf84t3mn] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tc-table thead tr[b-07qf84t3mn] {
    border-bottom: 1px solid var(--border-default);
}

.tc-table th[b-07qf84t3mn] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tc-table th.tc-num[b-07qf84t3mn],
.tc-table td.tc-num[b-07qf84t3mn] {
    text-align: right;
}

.tc-table tbody tr[b-07qf84t3mn] {
    border-bottom: 1px solid var(--border-default);
    transition: background var(--transition-fast);
}
.tc-table tbody tr:last-child[b-07qf84t3mn] { border-bottom: none; }
.tc-table tbody tr:hover[b-07qf84t3mn] { background: var(--surface-highlight); }

.tc-table td[b-07qf84t3mn] {
    padding: 0.625rem 1rem;
    vertical-align: middle;
}

.tc-name-cell[b-07qf84t3mn] {
    font-weight: 500;
    white-space: nowrap;
}

.tc-no-results[b-07qf84t3mn] {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 1rem !important;
    font-style: italic;
}
/* /Components/TenantConfigServicesTab.razor.rz.scp.css */
/* ── Banner ────────────────────────────────────────────────────────────── */

.tc-banner[b-dtmh60hcnd] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.tc-banner h2[b-dtmh60hcnd] { font-size: 1.125rem; font-weight: 600; margin: 0.25rem 0 0.5rem; }
.tc-banner p[b-dtmh60hcnd] { color: var(--text-secondary); margin: 0; line-height: 1.5; }

.tc-banner-icon[b-dtmh60hcnd] {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em;
    background: var(--brand-teal-20); color: var(--brand-teal);
}

.tc-warning .tc-banner-icon[b-dtmh60hcnd] { background: var(--severity-high); color: #fff; }

.tc-retry-btn[b-dtmh60hcnd] {
    margin-top: 0.75rem; padding: 0.5rem 1rem; border-radius: var(--radius-lg);
    border: 1px solid var(--border-default); background: var(--surface-card);
    color: inherit; cursor: pointer; font-size: 0.875rem;
    transition: background var(--transition-fast);
}
.tc-retry-btn:hover[b-dtmh60hcnd] { background: var(--surface-highlight); }

/* ── Toolbar ───────────────────────────────────────────────────────────── */

.tc-toolbar[b-dtmh60hcnd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tc-filter-group[b-dtmh60hcnd] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.tc-filter-label[b-dtmh60hcnd] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.tc-filter-select[b-dtmh60hcnd] {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color var(--transition-fast);
}
.tc-filter-select:focus[b-dtmh60hcnd] { border-color: var(--brand-teal); }

.tc-filter-count[b-dtmh60hcnd] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tc-sync-status[b-dtmh60hcnd] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tc-sync-badge[b-dtmh60hcnd] {
    margin-left: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--brand-teal-20);
    color: var(--brand-teal);
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.tc-table-wrap[b-dtmh60hcnd] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: auto;
}

.tc-table[b-dtmh60hcnd] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.tc-table thead tr[b-dtmh60hcnd] {
    border-bottom: 1px solid var(--border-default);
}

.tc-table th[b-dtmh60hcnd] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.tc-table th.tc-num[b-dtmh60hcnd],
.tc-table td.tc-num[b-dtmh60hcnd] {
    text-align: right;
}

.tc-table tbody tr[b-dtmh60hcnd] {
    border-bottom: 1px solid var(--border-default);
    transition: background var(--transition-fast);
}
.tc-table tbody tr:last-child[b-dtmh60hcnd] { border-bottom: none; }
.tc-table tbody tr:hover[b-dtmh60hcnd] { background: var(--surface-highlight); }

.tc-table td[b-dtmh60hcnd] {
    padding: 0.625rem 1rem;
    vertical-align: middle;
}

.tc-name-cell[b-dtmh60hcnd] {
    font-weight: 500;
    white-space: nowrap;
}

.tc-no-results[b-dtmh60hcnd] {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 1rem !important;
    font-style: italic;
}
/* /Components/ToastContainer.razor.rz.scp.css */
.toast-container[b-cpz5exj9fc] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    z-index: 10000;
    pointer-events: none;
}

.toast[b-cpz5exj9fc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    background: var(--surface-elevated);
    border: 1px solid var(--border-default);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.2);
    font-size: 13px;
    color: var(--text-primary);
    pointer-events: auto;
    animation: toastIn-b-cpz5exj9fc 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
    max-width: 380px;
}

.toast-exit[b-cpz5exj9fc] {
    animation: toastOut-b-cpz5exj9fc 300ms ease both;
}

@keyframes toastIn-b-cpz5exj9fc {
    from { opacity: 0; transform: translateX(20px) scale(0.95); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

@keyframes toastOut-b-cpz5exj9fc {
    from { opacity: 1; transform: translateX(0) scale(1); }
    to   { opacity: 0; transform: translateX(20px) scale(0.95); }
}

.toast-success .toast-icon[b-cpz5exj9fc] { color: var(--rag-green); }
.toast-error .toast-icon[b-cpz5exj9fc] { color: var(--severity-critical); }
.toast-info .toast-icon[b-cpz5exj9fc] { color: var(--brand-teal); }

.toast-icon[b-cpz5exj9fc] {
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
}

.toast-message[b-cpz5exj9fc] {
    flex: 1;
    line-height: 1.4;
}

.toast-close[b-cpz5exj9fc] {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    border-radius: 4px;
    transition: color 150ms ease;
}

.toast-close:hover[b-cpz5exj9fc] {
    color: var(--text-primary);
}

@media (prefers-reduced-motion: reduce) {
    .toast[b-cpz5exj9fc], .toast-exit[b-cpz5exj9fc] {
        animation: none;
    }
}
/* /Components/TranscriptViewer.razor.rz.scp.css */
/* DEF-INI-047-F1-2 — transcript card. Collapsed state is a single-row
   summary button; expanded state reveals the full conversation. Uses the
   Fenergo design tokens from app.css for surface, border, and brand
   colour. */

.tv-transcript[b-6f3t8c19tz] {
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--border-default, #c8dedd);
	border-radius: var(--radius-md, 8px);
	overflow: hidden;
	transition: box-shadow var(--transition-fast, 150ms), border-color var(--transition-fast, 150ms);
	/* DEF-INI-047-F1-5 — anchor a min-width on the card itself so the flex
	   chain below (.tv-details → .tv-turns → .tv-turn → .tv-turn-content
	   → .tv-pre) doesn't grow past the container when a turn carries a
	   long unbroken token (e.g. base64 blob, no-space JSON). The bug
	   manifested on real INI-047 transcripts where tool_use input/output
	   pushed past the right edge. */
	min-width: 0;
}

.tv-transcript:hover[b-6f3t8c19tz] {
	border-color: var(--brand-teal-20, rgba(33,207,178,0.20));
}

.tv-expanded[b-6f3t8c19tz] {
	box-shadow: var(--shadow-sm);
}

/* Summary button (always visible) */
.tv-summary[b-6f3t8c19tz] {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: none;
	border: none;
	border-radius: 0;
	cursor: pointer;
	text-align: left;
	font: inherit;
	transition: background var(--transition-fast, 150ms);
}

.tv-summary:hover[b-6f3t8c19tz] {
	background: var(--brand-teal-04, rgba(33,207,178,0.04));
}

.tv-chevron[b-6f3t8c19tz] {
	display: inline-block;
	transition: transform var(--transition-fast, 150ms);
	color: #64748b;
	font-size: 0.85rem;
	flex-shrink: 0;
}

.tv-chevron-open[b-6f3t8c19tz] { transform: rotate(90deg); }

.tv-agent-name[b-6f3t8c19tz] {
	font-size: 0.95rem;
	font-weight: 600;
	color: #0f172a;
}

.tv-outcome-badge[b-6f3t8c19tz] {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.2rem 0.55rem;
	border-radius: 9999px;
	white-space: nowrap;
}

.tv-outcome-success[b-6f3t8c19tz] {
	background: #d1fae5;
	color: #065f46;
}

.tv-outcome-failure[b-6f3t8c19tz] {
	background: #fee2e2;
	color: #991b1b;
}

.tv-outcome-budget_exhausted[b-6f3t8c19tz] {
	background: #fef3c7;
	color: #92400e;
}

.tv-outcome-partial[b-6f3t8c19tz] {
	background: #fef9c3;
	color: #713f12;
}

.tv-outcome-reason[b-6f3t8c19tz] {
	font-size: 0.78rem;
	color: #b45309;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	max-width: 18rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tv-summary-meta[b-6f3t8c19tz] {
	margin-left: auto;
	display: flex;
	gap: 0.5rem;
	font-size: 0.78rem;
	color: #64748b;
}

/* Expanded body */
.tv-details[b-6f3t8c19tz] {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 0.875rem 1.125rem 1.125rem;
	border-top: 1px solid var(--border-default, #e2e8f0);
	background: #fafbfc;
	/* Allow flex children to shrink below their intrinsic content width so
	   long <pre> blocks wrap instead of overflowing. See .tv-transcript. */
	min-width: 0;
}

.tv-meta-row[b-6f3t8c19tz] {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: 0.78rem;
	color: #475569;
}

.tv-meta-row strong[b-6f3t8c19tz] {
	color: #1e293b;
	font-weight: 600;
	margin-right: 0.25rem;
}

/* Toggles */
.tv-toggle[b-6f3t8c19tz] {
	align-self: flex-start;
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--border-default, #e2e8f0);
	border-radius: var(--radius-sm, 6px);
	padding: 0.3rem 0.75rem;
	font-size: 0.78rem;
	font-weight: 500;
	cursor: pointer;
	color: #475569;
	transition: all var(--transition-fast, 150ms);
}

.tv-toggle:hover[b-6f3t8c19tz] {
	border-color: var(--brand-teal, #21cfb2);
	color: var(--brand-teal, #21cfb2);
}

.tv-toggle--inline[b-6f3t8c19tz] {
	display: block;
	margin-top: 0.4rem;
}

/* System prompt */
.tv-system-prompt-section[b-6f3t8c19tz] {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.tv-system-prompt[b-6f3t8c19tz] {
	background: #f1f5f9;
	border-left: 3px solid #94a3b8;
	padding: 0.75rem 1rem;
	max-height: 22rem;
	overflow-y: auto;
}

/* Turns */
.tv-turns[b-6f3t8c19tz] {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	min-width: 0;
}

.tv-turn[b-6f3t8c19tz] {
	border-radius: var(--radius-sm, 6px);
	padding: 0.625rem 0.875rem;
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--border-default, #e2e8f0);
	min-width: 0;
	/* Last-resort horizontal scroll if a single token is genuinely unbreakable
	   (very long URL, base64 line). Keeps the box itself from overflowing
	   the page. */
	overflow-x: hidden;
}

.tv-role-user[b-6f3t8c19tz] {
	border-left: 3px solid #38bdf8;
}

.tv-role-assistant[b-6f3t8c19tz] {
	border-left: 3px solid #4ade80;
}

.tv-role-tool_result[b-6f3t8c19tz] {
	border-left: 3px solid #a78bfa;
}

.tv-turn-header[b-6f3t8c19tz] {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-bottom: 0.5rem;
}

.tv-role-badge[b-6f3t8c19tz] {
	font-size: 0.65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.15rem 0.45rem;
	border-radius: var(--radius-sm, 4px);
	background: #f1f5f9;
	color: #334155;
}

.tv-timestamp[b-6f3t8c19tz] {
	font-size: 0.7rem;
	color: #94a3b8;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.tv-turn-content[b-6f3t8c19tz] {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

/* Pre blocks
   DEF-INI-047-F1-10 — text was too large and a long content block (e.g.
   a tool_use input with 200 lines of JSON, or a tool_result with a big
   diff) pushed the card height and made it hard to scan multiple turns
   without scrolling the whole page. Smaller monospace font + a
   per-block scroll viewport keeps each block within a reasonable height
   while preserving full readability when needed (scrollbar on hover). */
.tv-pre[b-6f3t8c19tz] {
	margin: 0;
	white-space: pre-wrap;
	/* `overflow-wrap: anywhere` is stronger than `word-break: break-word`:
	   it allows breaks INSIDE any token, including the no-space JSON blobs
	   and long URLs that tool_use / tool_result content blocks routinely
	   carry. Without this, a single 800-char path string pushes the pre
	   wider than the flex container. */
	overflow-wrap: anywhere;
	word-break: break-word;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.72rem;
	line-height: 1.55;
	color: #1e293b;
	background: #f8fafc;
	border-radius: var(--radius-sm, 6px);
	padding: 0.6rem 0.85rem;
	/* Hard cap so a runaway block can't push the card wider than its
	   container, even if every other guard above misbehaves on some
	   browser combo. */
	max-width: 100%;
	box-sizing: border-box;
	/* Per-block vertical scroll: prevents one large JSON / output from
	   making the card 50 viewports tall. The block itself becomes a
	   scrollable viewport; the surrounding page stays compact. */
	max-height: 22rem;
	overflow-y: auto;
	overflow-x: hidden;
	/* Subtle scrollbar styling (WebKit) — visible only on the block,
	   muted by default. */
	scrollbar-width: thin;
	scrollbar-color: rgba(100,116,139,0.4) transparent;
}
.tv-pre[b-6f3t8c19tz]::-webkit-scrollbar { width: 8px; }
.tv-pre[b-6f3t8c19tz]::-webkit-scrollbar-track { background: transparent; }
.tv-pre[b-6f3t8c19tz]::-webkit-scrollbar-thumb {
	background: rgba(100,116,139,0.35);
	border-radius: 4px;
}
.tv-pre[b-6f3t8c19tz]::-webkit-scrollbar-thumb:hover { background: rgba(100,116,139,0.6); }

.tv-text-block[b-6f3t8c19tz] {
	background: #ffffff;
	border: 1px solid #e2e8f0;
}

/* Tool use */
.tv-tool-use[b-6f3t8c19tz] {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.tv-tool-name[b-6f3t8c19tz] {
	font-size: 0.78rem;
	font-weight: 700;
	color: #6d28d9;
}

.tv-tool-input[b-6f3t8c19tz] {
	border-left: 3px solid #a78bfa;
	background: #faf5ff;
}

/* Tool result */
.tv-tool-result[b-6f3t8c19tz] {
	display: flex;
	flex-direction: column;
}

.tv-tool-result--error .tv-tool-output[b-6f3t8c19tz] {
	border-left: 3px solid #f87171;
	background: #fef2f2;
}

.tv-tool-output[b-6f3t8c19tz] {
	border-left: 3px solid #6ee7b7;
	background: #f0fdf4;
}
/* /Layout/Sidebar.razor.rz.scp.css */
.sidebar-nav-group[b-xcgbes01vz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar-section-heading-spaced[b-xcgbes01vz] {
    margin-top: 8px;
}

.sidebar-section-divider[b-xcgbes01vz] {
    height: 1px;
    background: var(--border-default);
    margin: 10px 10px 8px;
}

/* ─── Collapse toggle button ─────────────────────────────────────────── */
.sidebar-collapse-btn[b-xcgbes01vz] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 2px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sidebar-collapse-btn:hover[b-xcgbes01vz] {
    background: var(--surface-highlight);
    color: var(--text-secondary);
}

.sidebar-collapse-btn svg[b-xcgbes01vz] {
    flex-shrink: 0;
}
/* /Pages/Admin/AccessTab.razor.rz.scp.css */
/* ─── Access Tab Styles ─────────────────────────────────────────────────── */

/* Sub-tabs */
.access-subtabs[b-qiltang8cc] {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--surface-inset);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: 20px;
    width: fit-content;
}

.access-subtab[b-qiltang8cc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.access-subtab:hover[b-qiltang8cc] { color: var(--text-primary); }

.access-subtab.active[b-qiltang8cc] {
    background: var(--surface-card);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}

.access-subtab-count[b-qiltang8cc] {
    font-size: 10px;
    font-weight: 600;
    background: var(--surface-inset);
    color: var(--text-muted);
    padding: 1px 6px;
    border-radius: 99px;
    min-width: 18px;
    text-align: center;
}

.access-subtab.active .access-subtab-count[b-qiltang8cc] {
    background: var(--brand-teal-10);
    color: var(--brand-teal);
}

/* Table */
.access-table-wrap[b-qiltang8cc] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.access-table[b-qiltang8cc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.access-th[b-qiltang8cc] {
    padding: 12px 16px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-align: left;
    background: var(--surface-inset);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

.access-th-num[b-qiltang8cc]    { text-align: right; width: 80px; }
.access-th-action[b-qiltang8cc] { width: 130px; }

.access-row[b-qiltang8cc] { transition: background var(--transition-fast); }
.access-row:hover[b-qiltang8cc] { background: var(--surface-highlight); }

.access-td[b-qiltang8cc] {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
    color: var(--text-primary);
}

.access-td-email[b-qiltang8cc] { font-weight: 500; }
.access-td-name[b-qiltang8cc]  { font-weight: 600; }
.access-td-desc[b-qiltang8cc]  { color: var(--text-secondary); max-width: 320px; }
.access-td-num[b-qiltang8cc]   { text-align: right; font-family: 'Space Mono', monospace; }
.access-td-time[b-qiltang8cc]  { color: var(--text-muted); font-family: 'Space Mono', monospace; font-size: 12px; }
.access-td-action[b-qiltang8cc] { text-align: right; white-space: nowrap; }
.access-td-details[b-qiltang8cc] { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-td-details code[b-qiltang8cc] {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-muted);
}
.access-td-muted[b-qiltang8cc] { color: var(--text-muted); }

/* Chips */
.access-role-chips[b-qiltang8cc] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.access-chip[b-qiltang8cc] {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    line-height: 1.5;
}

.access-chip-system[b-qiltang8cc] {
    background: var(--brand-teal-10);
    color: var(--brand-teal);
    border: 1px solid var(--brand-teal-20);
}

.access-chip-custom[b-qiltang8cc] {
    background: var(--surface-inset);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.access-tag[b-qiltang8cc] {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 8px;
}

.access-tag-disabled[b-qiltang8cc] {
    background: rgba(252, 82, 69, 0.10);
    color: var(--status-error);
}

/* Action tag */
.access-action[b-qiltang8cc] {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--surface-inset);
    color: var(--text-secondary);
    font-family: 'Space Mono', monospace;
}

/* Pagination */
.access-pagination[b-qiltang8cc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 18px;
    font-size: 12px;
    color: var(--text-muted);
}

/* Role checklist in user editor */
.access-role-list[b-qiltang8cc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 8px;
    background: var(--surface-inset);
}

.access-role-checkbox[b-qiltang8cc] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.access-role-checkbox:hover[b-qiltang8cc] { background: var(--surface-card); }

.access-role-checkbox input[b-qiltang8cc] { accent-color: var(--brand-teal); }

.access-role-meta[b-qiltang8cc] {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

/* .perm-list / .perm-list-row / .perm-list-check / .perm-list-label moved to
   global app.css. Blazor CSS isolation was preventing the scoped rules from
   reaching these elements (root cause of the "horizontal scrollbar" /
   "checkbox at row centre" layout bugs reported in dev). */
.access-role-modal[b-qiltang8cc] { max-width: 560px; }
/* /Pages/AgentPdlc.razor.rz.scp.css */
/* ============================================================
   Kanban Board (Agent PDLC) — spec-driven pipeline.
   2026-07-10: Asana-inspired visual polish — same token system as
   AgentPdlcMetrics + AgentPdlcCost so all three Agent PDLC pages
   read as a matched set. Layout stays Kanban (phase bands → stage
   columns → cards); only card shell, typography, spacing, and
   toolbar styling change.
   ============================================================ */

/* ---- Local card tokens (mirror of metrics-page / cost-page) ------------ */
.pipeline-page[b-cwhhnvgv4p] {
    --pdlc-card-bg: var(--surface-card);
    --pdlc-card-border: rgba(0, 46, 51, 0.08);
    --pdlc-card-radius: 14px;
    --pdlc-card-padding: 24px;
    --pdlc-card-shadow: 0 1px 2px rgba(0, 46, 51, 0.04);
    --pdlc-card-shadow-hover: 0 4px 12px rgba(0, 46, 51, 0.07);

    --pdlc-gap-sm: 12px;
    --pdlc-gap-md: 20px;
    --pdlc-gap-lg: 32px;

    --pdlc-caption-size: 0.72rem;
    --pdlc-caption-weight: 600;
    --pdlc-caption-tracking: 0.08em;

    --pdlc-heading-size: 0.95rem;
    --pdlc-heading-weight: 600;
    --pdlc-heading-tracking: 0.04em;
}

/* ---- Page header -------------------------------------------------------- */
.page-header[b-cwhhnvgv4p] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--pdlc-gap-md);
    flex-wrap: wrap;
    gap: 12px;
}

.page-header-left[b-cwhhnvgv4p] { display: flex; flex-direction: column; gap: 6px; }
.page-header-right[b-cwhhnvgv4p] { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.page-title[b-cwhhnvgv4p] {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.15;
}
.page-subtitle[b-cwhhnvgv4p]   { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
.cache-timestamp[b-cwhhnvgv4p] { font-size: 0.75rem; color: var(--text-muted); }

/* ---- Summary stat pills (Asana card style) ----------------------------- */
.board-summary[b-cwhhnvgv4p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--pdlc-gap-sm);
    margin-bottom: var(--pdlc-gap-md);
}

.stat-pill[b-cwhhnvgv4p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: var(--pdlc-card-bg);
    border: 1px solid var(--pdlc-card-border);
    border-radius: var(--pdlc-card-radius);
    box-shadow: var(--pdlc-card-shadow);
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.stat-pill:hover[b-cwhhnvgv4p] {
    box-shadow: var(--pdlc-card-shadow-hover);
    transform: translateY(-1px);
}

.stat-value[b-cwhhnvgv4p] {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.stat-label[b-cwhhnvgv4p] {
    font-size: var(--pdlc-caption-size);
    font-weight: var(--pdlc-caption-weight);
    text-transform: uppercase;
    letter-spacing: var(--pdlc-caption-tracking);
    color: var(--text-muted);
}

/* Kind-colored numeric to preserve at-a-glance state coding without a chunky
   left rail. */
.stat-pill.stat-running .stat-value[b-cwhhnvgv4p] { color: var(--status-info); }
.stat-pill.stat-failed  .stat-value[b-cwhhnvgv4p] { color: var(--status-error); }
.stat-pill.stat-merged  .stat-value[b-cwhhnvgv4p] { color: var(--brand-teal); }

/* ---- Filter toolbar ----------------------------------------------------- */
.board-toolbar[b-cwhhnvgv4p] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.search-field[b-cwhhnvgv4p] { position: relative; flex: 0 1 340px; min-width: 200px; }

.search-icon[b-cwhhnvgv4p] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-input[b-cwhhnvgv4p] {
    width: 100%;
    padding: 9px 12px 9px 36px;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: var(--surface-card);
    border: 1px solid var(--pdlc-card-border);
    border-radius: 10px;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.search-input[b-cwhhnvgv4p]::placeholder { color: var(--text-muted); }

.search-input:focus[b-cwhhnvgv4p] {
    outline: none;
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px var(--brand-teal-20);
}

.filter-select[b-cwhhnvgv4p] {
    padding: 9px 34px 9px 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
    background-color: var(--surface-card);
    /* chevron uses a theme-neutral slate so it reads on both light and dark cards */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237b94a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--pdlc-card-border);
    border-radius: 10px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.filter-select:focus[b-cwhhnvgv4p] {
    outline: none;
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 3px var(--brand-teal-20);
}

.filter-clear[b-cwhhnvgv4p] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-teal);
    background: none;
    border: none;
    padding: 6px 4px;
    cursor: pointer;
}

.filter-clear:hover[b-cwhhnvgv4p] { text-decoration: underline; }

.filter-result[b-cwhhnvgv4p] {
    margin-left: auto;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.board-no-results[b-cwhhnvgv4p] {
    padding: 56px 0;
    text-align: center;
    color: var(--text-secondary);
}

.board-no-results .btn[b-cwhhnvgv4p] { margin-top: 12px; }

/* ---- Board: a horizontally-scrolling row of phase bands ----------------- */
/* Phases stack vertically as full-width swimlanes — work flows top-to-bottom
   along the pipeline, so the board uses the page height instead of scrolling
   sideways. */
.pipeline-board[b-cwhhnvgv4p] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.phase-band[b-cwhhnvgv4p] {
    /* Lanes fill the full page width; columns sit on a shared 4-track grid so
       every column is a uniform 25% and lines up across all lanes. */
    --col-gap: 12px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    /* Asana-style: soft off-white lane, no visible bordering — the phase header
       hairline underneath the name is the only visual separator per lane. */
    background: var(--pdlc-card-bg);
    border: 1px solid var(--pdlc-card-border);
    border-radius: var(--pdlc-card-radius);
    box-shadow: var(--pdlc-card-shadow);
    /* --phase-accent is set per state below */
    --phase-accent: rgba(0, 46, 51, 0.08);
    transition: opacity var(--transition-base), box-shadow 200ms ease;
}

.phase-band:hover[b-cwhhnvgv4p] { box-shadow: var(--pdlc-card-shadow-hover); }

.phase-band.state-alert[b-cwhhnvgv4p]  { --phase-accent: var(--status-error); }
.phase-band.state-active[b-cwhhnvgv4p] { --phase-accent: var(--status-info); }
.phase-band.state-clear[b-cwhhnvgv4p]  { --phase-accent: var(--brand-teal); }
.phase-band.state-idle[b-cwhhnvgv4p]   { --phase-accent: var(--border-default); opacity: 0.5; }

.phase-header[b-cwhhnvgv4p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--phase-accent);
}

.phase-name[b-cwhhnvgv4p] {
    font-size: var(--pdlc-heading-size);
    font-weight: var(--pdlc-heading-weight);
    letter-spacing: var(--pdlc-heading-tracking);
    color: var(--text-primary);
    text-transform: none;
    white-space: nowrap;
}

.phase-total[b-cwhhnvgv4p] {
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 24px;
    text-align: center;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 46, 51, 0.05);
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.state-alert  .phase-total[b-cwhhnvgv4p] { background: var(--status-error-bg); color: var(--status-error); }
.state-active .phase-total[b-cwhhnvgv4p] { background: var(--status-info-bg);  color: var(--status-info); }
.state-clear  .phase-total[b-cwhhnvgv4p] { background: var(--brand-teal-10);   color: var(--brand-teal); }

.phase-columns[b-cwhhnvgv4p] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--col-gap);
    align-items: stretch;
}

/* ---- Stage column ------------------------------------------------------- */
.pipeline-column[b-cwhhnvgv4p] {
    /* width comes from the grid track (25% of the lane) */
    display: flex;
    flex-direction: column;
    min-width: 0;
    /* --kind-color is the semantic accent for this stage's state */
    --kind-color: var(--border-strong);
}

.pipeline-column.kind-running[b-cwhhnvgv4p]  { --kind-color: var(--status-info); }
.pipeline-column.kind-done[b-cwhhnvgv4p]     { --kind-color: var(--status-success); }
.pipeline-column.kind-merged[b-cwhhnvgv4p]   { --kind-color: var(--brand-teal); }
.pipeline-column.kind-failed[b-cwhhnvgv4p]   { --kind-color: var(--status-error); }
.pipeline-column.kind-warning[b-cwhhnvgv4p]  { --kind-color: var(--status-warning); }
.pipeline-column.kind-cancelled[b-cwhhnvgv4p] { --kind-color: var(--text-muted); }
.pipeline-column.kind-neutral[b-cwhhnvgv4p]  { --kind-color: var(--text-muted); }

/* Empty stages keep the uniform width but recede so active work stands out. */
.pipeline-column.is-empty[b-cwhhnvgv4p] {
    opacity: 0.45;
}

.column-header[b-cwhhnvgv4p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 0 2px;
}

.column-title[b-cwhhnvgv4p] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.25;
}

.column-count[b-cwhhnvgv4p] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(0, 46, 51, 0.04);
    border: none;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.kind-dot[b-cwhhnvgv4p] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kind-color);
    flex-shrink: 0;
}

/* A live "heartbeat" on running stages so in-progress reads as motion. */
.kind-running .kind-dot[b-cwhhnvgv4p] { animation: kind-pulse-b-cwhhnvgv4p 1.6s ease-in-out infinite; }

@keyframes kind-pulse-b-cwhhnvgv4p {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.6); }
}

.column-cards[b-cwhhnvgv4p] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
}

.column-empty[b-cwhhnvgv4p] {
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
    padding: 12px 0;
    opacity: 0.5;
}

/* ---- Card --------------------------------------------------------------- */
/* Punched-up padding and typography so the initiative cards breathe more
   like the metrics tiles. Constraints kept: multiple cards per column, so
   we can't go to full tile-scale (24px+ padding, 32px+ values). Instead we
   use the same tile shell but at ~65% scale: 16-18px padding, 0.95rem title,
   proper vertical rhythm between title / id / repo / meta. */
.pipeline-card[b-cwhhnvgv4p] {
    background: var(--surface-card);
    /* Uniform soft border, no coloured rail — state colour is carried by an
       inline .card-kind-chip pill in the card body (Asana-style). */
    border: 1px solid rgba(0, 46, 51, 0.06);
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 1px 2px rgba(0, 46, 51, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

/* ---- Card kind chip (stage-state pill inside the card) ---------------- */
/* Replaces the coloured left-edge rail from earlier iterations. Colour is
   keyed off the pipeline-column.kind-* modifier that sets --kind-color. */
.card-kind-chip[b-cwhhnvgv4p] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kind-color);
    background: color-mix(in srgb, var(--kind-color) 12%, transparent);
    align-self: flex-start;
    line-height: 1.2;
    white-space: nowrap;
}

.card-kind-chip[b-cwhhnvgv4p]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kind-color);
    display: inline-block;
    flex-shrink: 0;
}

/* Running: pulse the dot inside the chip so in-progress cards read as live. */
.kind-running .card-kind-chip[b-cwhhnvgv4p]::before {
    animation: chip-pulse-b-cwhhnvgv4p 1.6s ease-in-out infinite;
}

@keyframes chip-pulse-b-cwhhnvgv4p {
    0%, 100% { opacity: 1;   transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.55); }
}

.pipeline-card:hover[b-cwhhnvgv4p] {
    box-shadow: 0 4px 12px rgba(0, 46, 51, 0.08);
    transform: translateY(-1px);
}

.card-initiative[b-cwhhnvgv4p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 0;
}

.card-feature-title[b-cwhhnvgv4p] {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.005em;
    color: var(--text-primary);
    line-height: 1.35;
    text-decoration: none;
}

.card-feature-title:hover[b-cwhhnvgv4p] {
    color: var(--brand-teal);
    text-decoration: underline;
}

.card-initiative-id[b-cwhhnvgv4p] {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--brand-teal);
    letter-spacing: 0.02em;
}

.card-repo[b-cwhhnvgv4p] {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.card-repo a[b-cwhhnvgv4p] { color: var(--text-muted); text-decoration: none; }
.card-repo a:hover[b-cwhhnvgv4p] { color: var(--brand-teal); text-decoration: underline; }

.card-failure-reason[b-cwhhnvgv4p] {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--severity-high, #e53e3e);
    background: color-mix(in srgb, var(--severity-high, #e53e3e) 10%, transparent);
    border-radius: 4px;
    padding: 2px 6px;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-meta[b-cwhhnvgv4p] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.badge[b-cwhhnvgv4p] {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.badge-auto[b-cwhhnvgv4p]   { background: var(--brand-teal-20); color: var(--brand-deep); }
.badge-manual[b-cwhhnvgv4p] { background: var(--surface-highlight); color: var(--text-secondary); border: 1px solid var(--border-default); }

/* CLAUDE.md quality score — dark text on a tint keeps it readable in both themes. */
.claude-score[b-cwhhnvgv4p] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 0;
    cursor: default;
}

.claude-score-key[b-cwhhnvgv4p] {
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    opacity: 0.65;
}

.claude-score-good[b-cwhhnvgv4p]    { background: var(--status-success-bg); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--status-success-border); }
.claude-score-warn[b-cwhhnvgv4p]    { background: var(--status-warning-bg); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--status-warning-border); }
.claude-score-poor[b-cwhhnvgv4p]    { background: var(--status-error-bg);   color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--status-error-border); }
.claude-score-unknown[b-cwhhnvgv4p] { background: var(--surface-inset);     color: var(--text-muted);   box-shadow: inset 0 0 0 1px var(--border-default); }

.card-time[b-cwhhnvgv4p] {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: auto;
}

.card-pr-badge[b-cwhhnvgv4p] {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--brand-teal);
    border-radius: var(--radius-sm, 4px);
    background: var(--brand-teal-20);
    color: var(--brand-deep);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--transition-fast, 0.15s ease),
                color var(--transition-fast, 0.15s ease);
}

.card-pr-badge:hover[b-cwhhnvgv4p],
.card-pr-badge:focus-visible[b-cwhhnvgv4p] {
    background: var(--brand-teal);
    color: white;
    text-decoration: none;
}

/* ---- Refresh spinner ---------------------------------------------------- */
.spinner-xs[b-cwhhnvgv4p] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-cwhhnvgv4p 0.6s linear infinite;
}

@keyframes spin-b-cwhhnvgv4p { to { transform: rotate(360deg); } }

/* ---- Running-card pulse + spinner (INI-013-1) --------------------------- */
/* Cards in any *Running stage get a subtle GPU-only pulse on their accent
   edge plus a 12px ring spinner in the card-meta row, so a card that is
   actively progressing reads visually distinct from a terminal/done card
   on the same static board. Until the Hub auto-refresh (DEF-008) lands,
   this is the only at-a-glance signal that work is moving. */
.pipeline-card.kind-running[b-cwhhnvgv4p] {
    animation: card-pulse-b-cwhhnvgv4p 2s ease-in-out infinite;
}

.card-spinner[b-cwhhnvgv4p] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid var(--brand-teal-20, rgba(20, 184, 166, 0.25));
    border-top-color: var(--brand-teal, #14b8a6);
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
    animation: spin-b-cwhhnvgv4p 0.9s linear infinite;
}

@keyframes card-pulse-b-cwhhnvgv4p {
    0%, 100% { box-shadow: 0 0 0 0 var(--brand-teal-20, rgba(20, 184, 166, 0.25)); }
    50%      { box-shadow: 0 0 0 4px var(--brand-teal-20, rgba(20, 184, 166, 0.25)); }
}

/* Honour the user's OS-level reduced-motion preference: keep the visual
   indicator (border ring, spinner glyph) but stop the animation. */
@media (prefers-reduced-motion: reduce) {
    .pipeline-card.kind-running[b-cwhhnvgv4p],
    .card-spinner[b-cwhhnvgv4p],
    .spinner-xs[b-cwhhnvgv4p] { animation: none; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 980px) {
    .phase-columns[b-cwhhnvgv4p] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
    .phase-columns[b-cwhhnvgv4p] { grid-template-columns: 1fr; }
    .stat-pill[b-cwhhnvgv4p] { flex: 1 1 calc(50% - 10px); }
}

/* INI-051-1 — salvage card styling. When the latest corpus row for an
   initiative has outcome="salvaged" (per INI-048-1's auto-salvage path),
   the card is rendered with a dashed amber border and a [PARTIAL] badge
   so operators can distinguish at a glance which PRs are recoverable
   partial implementations vs clean ready-for-review submissions. */
.pipeline-card.card-salvage[b-cwhhnvgv4p] {
    border: 2px dashed var(--severity-medium, #c08020);
    background: var(--surface-card, #fffbf3);
}

.badge-partial[b-cwhhnvgv4p] {
    display: inline-block;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: var(--radius-lg, 6px);
    background: var(--severity-medium, #c08020);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: help;
    vertical-align: middle;
}

/* INI-061-1 — small chip beside the initiative ID showing the PR kind
   (intake / build / salvage). Sits inline next to the [PARTIAL] badge
   when both apply. Three tone variants drawn from Fenergo design tokens
   so the chip reads at glance and stays subtle enough to not compete
   with the card-feature-title. */
.card-pr-kind[b-cwhhnvgv4p] {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: middle;
    cursor: help;
    border: 1px solid transparent;
    white-space: nowrap;
}

.card-pr-kind-intake[b-cwhhnvgv4p] {
    background: var(--brand-teal-08, rgba(33,207,178,0.08));
    color: #0f766e;
    border-color: var(--brand-teal-20, rgba(33,207,178,0.20));
}

.card-pr-kind-build[b-cwhhnvgv4p] {
    background: #f1f5f9;
    color: #475569;
    border-color: #e2e8f0;
}

.card-pr-kind-salvage[b-cwhhnvgv4p] {
    background: #fff7ed;
    color: #9a3412;
    border-color: #fed7aa;
}

/* ---- INI-047-F1 FR-05 — clickable card → drill-down -------------------- */
/* NavLink wraps each .pipeline-card. We hold the existing card visual
   styling constant by neutralising NavLink's default <a> styling: block
   layout, inherit colour, no underline. The inner .pipeline-card keeps
   all its own borders/shadows/padding. Hover/focus continues to be
   handled by .pipeline-card:hover.

   NOTE: scoped CSS cannot reach the .pipeline-card element when emitted
   from a child (e.g. RenderFragments), but here .pipeline-card lives
   directly in this .razor file so scoped CSS applies cleanly. */
.card-link-wrapper[b-cwhhnvgv4p] {
    display: block;
    color: inherit;
    text-decoration: none;
}

.card-link-wrapper:hover[b-cwhhnvgv4p],
.card-link-wrapper:focus[b-cwhhnvgv4p],
.card-link-wrapper:focus-visible[b-cwhhnvgv4p] {
    color: inherit;
    text-decoration: none;
    outline: none;
}

/* Keyboard accessibility: when the NavLink is the focused element,
   show the focus ring on the inner card so it's visually distinct. */
.card-link-wrapper:focus-visible .pipeline-card[b-cwhhnvgv4p] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}
/* /Pages/AgentPdlcCost.razor.rz.scp.css */
/* ============================================================
   AgentPdlcCost — Bedrock spend dashboard.
   2026-07-10: Asana-inspired restyle — mirrors the token system from
   AgentPdlcMetrics.razor.css. Cards are calm containers with soft
   borders and generous padding, pill-style range picker, chart-tile
   shell around the stacked bar + donut, softer table.
   ============================================================ */

/* ---- Local card tokens (mirror of metrics-page) ------------------------ */
.cost-page[b-6k5pj4wo4v] {
    --pdlc-card-bg: var(--surface-card);
    --pdlc-card-border: rgba(0, 46, 51, 0.08);
    --pdlc-card-radius: 14px;
    --pdlc-card-padding: 24px;
    --pdlc-card-shadow: 0 1px 2px rgba(0, 46, 51, 0.04);
    --pdlc-card-shadow-hover: 0 4px 12px rgba(0, 46, 51, 0.07);

    --pdlc-gap-sm: 12px;
    --pdlc-gap-md: 20px;
    --pdlc-gap-lg: 32px;

    --pdlc-caption-size: 0.72rem;
    --pdlc-caption-weight: 600;
    --pdlc-caption-tracking: 0.08em;

    --pdlc-value-size: 2.15rem;
    --pdlc-value-weight: 600;
    --pdlc-value-color: var(--text-primary);

    --pdlc-heading-size: 0.95rem;
    --pdlc-heading-weight: 600;
    --pdlc-heading-tracking: 0.04em;
}

/* ---- Page header -------------------------------------------------------- */
.page-header[b-6k5pj4wo4v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: var(--pdlc-gap-lg);
    flex-wrap: wrap;
    gap: 12px;
}

.page-header-left[b-6k5pj4wo4v]  { display: flex; flex-direction: column; gap: 6px; }
.page-header-right[b-6k5pj4wo4v] { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }

.page-title[b-6k5pj4wo4v] {
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--text-primary);
    line-height: 1.15;
}
.page-subtitle[b-6k5pj4wo4v]   { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
.cache-timestamp[b-6k5pj4wo4v] { font-size: 0.75rem; color: var(--text-muted); }

/* ---- Time-range picker (pill-style) ------------------------------------ */
.range-picker[b-6k5pj4wo4v] {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: rgba(0, 46, 51, 0.04);
    border-radius: 999px;
    margin-bottom: var(--pdlc-gap-md);
}

.range-btn[b-6k5pj4wo4v] {
    padding: 5px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease;
    outline-offset: 2px;
}

.range-btn:hover[b-6k5pj4wo4v] { color: var(--text-primary); }

.range-btn.active[b-6k5pj4wo4v],
.range-btn[aria-selected="true"][b-6k5pj4wo4v],
.range-btn.active:hover[b-6k5pj4wo4v],
.range-btn[aria-selected="true"]:hover[b-6k5pj4wo4v] {
    background: var(--surface-card);
    color: var(--brand-deep);
    box-shadow: 0 1px 3px rgba(0, 46, 51, 0.08);
}

.range-btn:focus-visible[b-6k5pj4wo4v] {
    outline: 2px solid var(--brand-teal);
}

/* ---- KPI cards (Asana card system) ------------------------------------- */
.kpi-row[b-6k5pj4wo4v] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--pdlc-gap-md);
    margin-bottom: var(--pdlc-gap-md);
}

.kpi-card[b-6k5pj4wo4v] {
    background: var(--pdlc-card-bg);
    border: 1px solid var(--pdlc-card-border);
    border-radius: var(--pdlc-card-radius);
    box-shadow: var(--pdlc-card-shadow);
    padding: var(--pdlc-card-padding);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 108px;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.kpi-card:hover[b-6k5pj4wo4v] {
    box-shadow: var(--pdlc-card-shadow-hover);
    transform: translateY(-1px);
}

.kpi-card-wide[b-6k5pj4wo4v] { grid-column: span 2; }

.kpi-label[b-6k5pj4wo4v] {
    font-size: var(--pdlc-caption-size);
    font-weight: var(--pdlc-caption-weight);
    text-transform: uppercase;
    letter-spacing: var(--pdlc-caption-tracking);
    color: var(--text-muted);
}

.kpi-value[b-6k5pj4wo4v] {
    font-size: var(--pdlc-value-size);
    font-weight: var(--pdlc-value-weight);
    font-variant-numeric: tabular-nums;
    color: var(--pdlc-value-color);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.kpi-value-sm[b-6k5pj4wo4v] { font-size: 1.05rem; letter-spacing: 0; }

.kpi-sub[b-6k5pj4wo4v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.kpi-badge[b-6k5pj4wo4v] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--brand-teal-20);
    color: var(--brand-deep);
    letter-spacing: 0.02em;
}

/* ---- Section headings --------------------------------------------------- */
.section-heading[b-6k5pj4wo4v] {
    font-size: var(--pdlc-heading-size);
    font-weight: var(--pdlc-heading-weight);
    letter-spacing: var(--pdlc-heading-tracking);
    color: var(--text-primary);
    margin: 0 0 14px;
}

/* ---- Stacked bar + donut section (chart-tile shell) --------------------- */
.chart-section[b-6k5pj4wo4v] {
    background: var(--pdlc-card-bg);
    border: 1px solid var(--pdlc-card-border);
    border-radius: var(--pdlc-card-radius);
    box-shadow: var(--pdlc-card-shadow);
    padding: var(--pdlc-card-padding);
    margin-bottom: var(--pdlc-gap-md);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow 200ms ease;
}

.chart-section:hover[b-6k5pj4wo4v] {
    box-shadow: var(--pdlc-card-shadow-hover);
}

.chart-layout[b-6k5pj4wo4v] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
}

@media (min-width: 1024px) {
    .chart-layout[b-6k5pj4wo4v] {
        grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
        align-items: start;
    }
}

.chart-wrapper[b-6k5pj4wo4v] {
    overflow-x: auto;
    /* Removed the redundant inner border — the chart-section shell already
       encloses. Keeps the tile clean like Asana's chart cards. */
    padding: 0;
}

.donut-wrapper[b-6k5pj4wo4v] {
    padding-left: 16px;
    /* Same reason as .chart-wrapper — the outer chart-section provides the
       shell; this is just an internal layout container. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-left: 1px solid rgba(0, 46, 51, 0.05);
}

.donut-title[b-6k5pj4wo4v] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    align-self: flex-start;
}

.donut[b-6k5pj4wo4v] {
    width: 140px;
    height: 140px;
    /* Same reason as .cost-chart — font must live on the SVG so the
       RenderTreeBuilder-emitted <text> children inherit it. */
    font-family: 'Poppins', 'Segoe UI', sans-serif;
}

.donut-total[b-6k5pj4wo4v] {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    fill: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.donut-caption[b-6k5pj4wo4v] {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    fill: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cost-chart[b-6k5pj4wo4v] {
    width: 100%;
    height: 220px;
    display: block;
    /* SVG text doesn't inherit font from HTML in all browsers, and the .axis-label /
       .chart-label classes are emitted from RenderTreeBuilder in @code so Blazor's
       scoped-CSS attribute is never applied to them — meaning class-level font rules
       silently don't match. Set the font on the SVG itself; text children inherit. */
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 500;
    fill: var(--text-muted);
}

/* SVG <text> elements don't inherit font-family from the HTML parent in all
   browsers — without an explicit family they fall back to Times/serif and look
   broken. Match the app's body font (Poppins) and bump up from 9/10px so the
   labels are legible on hi-dpi displays. */
.chart-label[b-6k5pj4wo4v] {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 500;
    fill: var(--text-muted);
    letter-spacing: 0.01em;
}

.axis-label[b-6k5pj4wo4v] {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 500;
    fill: var(--text-muted);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.gridline[b-6k5pj4wo4v] {
    stroke: var(--cost-grid);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.stack-segment[b-6k5pj4wo4v] {
    transition: transform 150ms ease-out, filter 150ms ease-out, opacity 150ms ease-out;
    transform-origin: center bottom;
    transform-box: fill-box;
    cursor: pointer;
}

.stack-segment:hover[b-6k5pj4wo4v],
.stack-segment.hovered[b-6k5pj4wo4v] {
    transform: translateY(-2px);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.18));
}

.stack-segment.muted[b-6k5pj4wo4v] {
    opacity: 0.20;
}

.tooltip-fo[b-6k5pj4wo4v] {
    pointer-events: none;
}

.tooltip[b-6k5pj4wo4v] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 8px 10px;
    font-size: 0.75rem;
    color: var(--text-primary);
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.tooltip-stage[b-6k5pj4wo4v] { font-weight: 700; }
.tooltip-pct[b-6k5pj4wo4v] { color: var(--text-muted); }

/* ---- Sparkline on KPI card --------------------------------------------- */
.kpi-spark[b-6k5pj4wo4v] {
    width: 100%;
    height: 28px;
    display: block;
    margin-top: 4px;
}

.kpi-spark-line[b-6k5pj4wo4v] {
    fill: none;
    stroke: var(--brand-teal);
    stroke-width: 1.5;
}

.kpi-spark-fill[b-6k5pj4wo4v] {
    fill: var(--brand-teal-20);
    stroke: none;
}

/* ---- Legend pills ------------------------------------------------------ */
.chart-legend[b-6k5pj4wo4v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.legend-pill[b-6k5pj4wo4v] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    padding: 4px 10px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out, opacity 150ms ease-out;
    font-family: inherit;
}

.legend-pill:hover[b-6k5pj4wo4v] {
    border-color: var(--brand-teal);
}

.legend-pill:focus-visible[b-6k5pj4wo4v] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}

.legend-pill.muted[b-6k5pj4wo4v] {
    opacity: 0.45;
    background: var(--surface-inset);
}

.legend-swatch[b-6k5pj4wo4v] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* ---- Skeleton loading state -------------------------------------------- */
.skeleton-row[b-6k5pj4wo4v] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.skeleton-card[b-6k5pj4wo4v],
.skeleton-chart[b-6k5pj4wo4v] {
    background: linear-gradient(90deg,
        var(--surface-inset) 0%,
        var(--surface-highlight) 50%,
        var(--surface-inset) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-lg);
    animation: cost-skeleton-shimmer-b-6k5pj4wo4v 1400ms linear infinite;
}

.skeleton-card[b-6k5pj4wo4v] {
    flex: 1 1 160px;
    min-width: 140px;
    height: 84px;
}

.skeleton-chart[b-6k5pj4wo4v] {
    height: 240px;
    margin-bottom: 24px;
}

@keyframes cost-skeleton-shimmer-b-6k5pj4wo4v {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .stack-segment[b-6k5pj4wo4v] { transition-duration: 1ms; }
    .legend-pill[b-6k5pj4wo4v]   { transition-duration: 1ms; }
    .skeleton-card[b-6k5pj4wo4v],
    .skeleton-chart[b-6k5pj4wo4v] { animation: none; }
}

/* ---- Initiative table (chart-tile shell) ------------------------------- */
.table-section[b-6k5pj4wo4v] {
    background: var(--pdlc-card-bg);
    border: 1px solid var(--pdlc-card-border);
    border-radius: var(--pdlc-card-radius);
    box-shadow: var(--pdlc-card-shadow);
    padding: var(--pdlc-card-padding);
    margin-bottom: var(--pdlc-gap-md);
}

.table-toolbar[b-6k5pj4wo4v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.rollup-toggle[b-6k5pj4wo4v] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.rollup-toggle input[type="checkbox"][b-6k5pj4wo4v] {
    accent-color: var(--brand-teal);
    cursor: pointer;
}

.table-wrapper[b-6k5pj4wo4v] {
    overflow-x: auto;
    /* Inner container — the outer .table-section provides the shell.
       Just handles horizontal overflow for wide tables. */
}

.cost-table[b-6k5pj4wo4v] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.cost-table th[b-6k5pj4wo4v] {
    padding: 12px 14px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(0, 46, 51, 0.08);
    background: transparent;
    white-space: nowrap;
}

.cost-table td[b-6k5pj4wo4v] {
    padding: 12px 14px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(0, 46, 51, 0.05);
    vertical-align: middle;
}

.cost-table tbody tr:last-child td[b-6k5pj4wo4v] { border-bottom: none; }

.cost-table tbody tr:hover td[b-6k5pj4wo4v] { background: rgba(33, 207, 178, 0.04); }

.col-num[b-6k5pj4wo4v] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.col-initiative[b-6k5pj4wo4v] { white-space: nowrap; }
.col-title[b-6k5pj4wo4v] { max-width: 260px; }

.initiative-link[b-6k5pj4wo4v] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--brand-teal);
    text-decoration: none;
}

.initiative-link:hover[b-6k5pj4wo4v] { text-decoration: underline; }

/* ---- Loading / error / empty states ------------------------------------ */
.empty-state[b-6k5pj4wo4v] {
    padding: 56px 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.empty-state .btn[b-6k5pj4wo4v] { margin-top: 12px; }

.alert-error[b-6k5pj4wo4v] {
    padding: 14px 18px;
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border, var(--status-error));
    border-radius: var(--radius-md);
    color: var(--text-primary);
    margin-bottom: 20px;
}

.alert-error p[b-6k5pj4wo4v] { margin: 0 0 8px; }

/* ---- Spinner (mirrors AgentPdlc.razor.css) ------------------------------ */
.spinner-xs[b-6k5pj4wo4v] {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-6k5pj4wo4v 0.6s linear infinite;
}

@keyframes spin-b-6k5pj4wo4v { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner-xs[b-6k5pj4wo4v] { animation: none; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
    .kpi-row[b-6k5pj4wo4v] { flex-direction: column; }
    .kpi-card[b-6k5pj4wo4v] { flex: unset; }
}
/* /Pages/AgentPdlcDrillDown.razor.rz.scp.css */
/* DEF-INI-047-F1-2 — Drill-Down page styling. Uses Fenergo design tokens
   from app.css. Sections are visually separated cards with breathing room;
   the workflow strip is the focal point at the top, with the stage timeline
   collapsed by default (operators usually want the agent transcripts, not
   the raw event log). */

/* Loading state */
.dd-loading[b-8tfoqy9fii] {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 2.5rem;
	color: #64748b;
	font-size: 0.95rem;
}

.dd-spinner[b-8tfoqy9fii] {
	display: inline-block;
	width: 1.25rem;
	height: 1.25rem;
	border: 2px solid var(--border-default, #e2e8f0);
	border-top-color: var(--brand-teal, #21cfb2);
	border-radius: 50%;
	animation: dd-spin-b-8tfoqy9fii 0.7s linear infinite;
}

@keyframes dd-spin-b-8tfoqy9fii {
	to { transform: rotate(360deg); }
}

/* Error banner */
.dd-error-banner[b-8tfoqy9fii] {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: #fef2f2;
	border: 1px solid #fca5a5;
	border-radius: var(--radius-md, 8px);
	color: #991b1b;
	margin: 1rem 0;
	box-shadow: var(--shadow-xs);
}

.dd-error-message[b-8tfoqy9fii] {
	flex: 1;
	font-size: 0.9rem;
}

.dd-retry-btn[b-8tfoqy9fii] {
	background: #991b1b;
	color: #ffffff;
	border: none;
	border-radius: var(--radius-sm, 6px);
	padding: 0.35rem 0.875rem;
	font-size: 0.825rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--transition-fast, 150ms);
}

.dd-retry-btn:hover[b-8tfoqy9fii] {
	background: #7f1d1d;
}

/* Empty state */
.dd-empty-state[b-8tfoqy9fii] {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1rem;
	padding: 3.5rem 2rem;
	color: #64748b;
}

/* Back link */
.dd-back-link[b-8tfoqy9fii] {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: #475569;
	text-decoration: none;
	padding: 0.25rem 0;
	transition: color var(--transition-fast, 150ms);
}

.dd-back-link:hover[b-8tfoqy9fii] {
	color: var(--brand-teal, #21cfb2);
}

/* Page layout */
.dd-page[b-8tfoqy9fii] {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 1.5rem 0 4rem;
}

.dd-page-header[b-8tfoqy9fii] {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.dd-heading[b-8tfoqy9fii] {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex-wrap: wrap;
}

.dd-initiative-id[b-8tfoqy9fii] {
	margin: 0;
	font-size: 1.875rem;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.02em;
}

.dd-stage-badge[b-8tfoqy9fii] {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.3rem 0.75rem;
	border-radius: 9999px;
	background: var(--brand-teal-10, rgba(33,207,178,0.10));
	color: #0f766e;
	border: 1px solid var(--brand-teal-20, rgba(33,207,178,0.20));
}

/* Sections */
.dd-section[b-8tfoqy9fii] {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.dd-section-title[b-8tfoqy9fii] {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #475569;
}

.dd-chevron[b-8tfoqy9fii] {
	display: inline-block;
	transition: transform var(--transition-fast, 150ms);
	font-size: 0.75rem;
	color: #64748b;
}

.dd-chevron-open[b-8tfoqy9fii] {
	transform: rotate(90deg);
}

.dd-empty-list[b-8tfoqy9fii] {
	margin: 0;
	font-size: 0.875rem;
	color: #94a3b8;
	font-style: italic;
}

/* DEF-INI-047-F1-9 — Stage Timeline panel matches the workflow / invocations
   strips: bare <h2> heading outside, single bordered card below containing
   the chevron toggle + event count, expanding to reveal the event table.
   No clickable header strip — the toggle is contained within the panel
   itself. */
.dd-timeline-panel[b-8tfoqy9fii] {
	background: var(--surface-card, #ffffff);
	border: 1px solid var(--border-default, #c8dedd);
	border-radius: var(--radius-lg, 12px);
	box-shadow: var(--shadow-xs);
	overflow: hidden;
}

.dd-timeline-panel-toggle[b-8tfoqy9fii] {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font: inherit;
	color: inherit;
	transition: background var(--transition-fast, 150ms);
}

.dd-timeline-panel-toggle:hover[b-8tfoqy9fii] {
	background: var(--brand-teal-04, rgba(33,207,178,0.04));
}

.dd-timeline-panel-label[b-8tfoqy9fii] {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: #475569;
}

.dd-timeline-panel-count[b-8tfoqy9fii] {
	font-size: 0.75rem;
	color: #94a3b8;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.dd-timeline-panel-empty[b-8tfoqy9fii] {
	margin: 0;
	padding: 1rem;
	border-top: 1px solid var(--border-default, #e2e8f0);
	font-size: 0.875rem;
	color: #94a3b8;
	font-style: italic;
}

/* Timeline table — lives inside .dd-timeline-panel which owns the card
   chrome, so the table itself is borderless. Top border separates from
   the toggle row above. */
.dd-timeline-table[b-8tfoqy9fii] {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.825rem;
	background: var(--surface-card, #ffffff);
	border-top: 1px solid var(--border-default, #e2e8f0);
}

.dd-timeline-table th[b-8tfoqy9fii],
.dd-timeline-table td[b-8tfoqy9fii] {
	text-align: left;
	padding: 0.7rem 1rem;
	border-bottom: 1px solid var(--border-default, #e2e8f0);
}

.dd-timeline-table tbody tr[b-8tfoqy9fii] {
	transition: background var(--transition-fast, 150ms);
}

.dd-timeline-table tbody tr:hover[b-8tfoqy9fii] {
	background: var(--brand-teal-04, rgba(33,207,178,0.04));
}

.dd-timeline-table tbody tr:last-child td[b-8tfoqy9fii] {
	border-bottom: none;
}

.dd-timeline-table thead th[b-8tfoqy9fii] {
	background: #f8fafc;
	font-weight: 700;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #64748b;
}

.dd-cell-timestamp[b-8tfoqy9fii] {
	white-space: nowrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	color: #475569;
	font-size: 0.8rem;
}

.dd-cell-stage[b-8tfoqy9fii] {
	font-weight: 600;
	color: #1e293b;
}

.dd-cell-outcome[b-8tfoqy9fii] {
	color: #475569;
}

/* Transcripts section */
.dd-transcripts-section[b-8tfoqy9fii] {
	gap: 0.75rem;
}
/* /Pages/AgentPdlcMetrics.razor.rz.scp.css */
/* ============================================================
   AgentPdlcMetrics — Asana-inspired dashboard layout.

   Design intent (2026-07-10 redesign):
   - Cards read as calm containers on a light page, not boxed
     "sections" — very soft border, minimal shadow, generous padding.
   - Typography hierarchy: small uppercase caption → large numeric
     value → sparkline / secondary content. Uses tabular-nums so
     values align across cards.
   - CSS grid replaces flex-wrap so all cards in a row are the same
     width, resizing gracefully on narrow viewports.
   - Sparklines sit lower in the card at 32px so they read as trend
     context, not decoration.
   - Sections carry ~40px vertical rhythm and no divider rules —
     whitespace does the separating.

   Tokens reused from app.css: --brand-teal, --surface-card,
   --border-subtle, --radius-lg, --shadow-xs, --text-primary,
   --text-secondary, --text-muted, --severity-medium.
   ============================================================ */

/* ---- Local card tokens -------------------------------------------------- */
/* Scoped here so the pilot page can iterate without touching global tokens.
   Once the pattern lands on Pipeline + Cost pages, these promote to app.css. */
.metrics-page[b-f61xbs3k9o] {
	--pdlc-card-bg: var(--surface-card);
	--pdlc-card-border: rgba(0, 46, 51, 0.08);
	--pdlc-card-radius: 14px;
	--pdlc-card-padding: 24px;
	--pdlc-card-shadow: 0 1px 2px rgba(0, 46, 51, 0.04);
	--pdlc-card-shadow-hover: 0 4px 12px rgba(0, 46, 51, 0.07);

	--pdlc-gap-sm: 12px;
	--pdlc-gap-md: 20px;
	--pdlc-gap-lg: 32px;

	--pdlc-caption-size: 0.72rem;
	--pdlc-caption-weight: 600;
	--pdlc-caption-tracking: 0.08em;

	--pdlc-value-size: 2.15rem;
	--pdlc-value-weight: 600;
	--pdlc-value-color: var(--text-primary);

	--pdlc-heading-size: 0.95rem;
	--pdlc-heading-weight: 600;
	--pdlc-heading-tracking: 0.04em;

	--pdlc-warn: var(--severity-medium);
}

/* ---- Page header -------------------------------------------------------- */
.page-header[b-f61xbs3k9o] {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: var(--pdlc-gap-lg);
	flex-wrap: wrap;
	gap: 12px;
}

.page-header-left[b-f61xbs3k9o] { display: flex; flex-direction: column; gap: 6px; }

.page-header-right[b-f61xbs3k9o] {
	display: flex;
	align-items: center;
	gap: 12px;
}

.page-title[b-f61xbs3k9o] {
	font-size: 1.85rem;
	font-weight: 600;             /* Asana-ish: heavier feels corporate, 600 feels editorial */
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--text-primary);
	line-height: 1.15;
}

.page-subtitle[b-f61xbs3k9o] {
	font-size: 0.85rem;
	color: var(--text-muted);
	line-height: 1.4;
}

/* ---- Date picker -------------------------------------------------------- */
.date-picker-label[b-f61xbs3k9o] {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-secondary);
	white-space: nowrap;
}

.date-picker-input[b-f61xbs3k9o] {
	font-size: 0.82rem;
	padding: 6px 12px;
	border: 1px solid var(--pdlc-card-border);
	border-radius: 10px;
	background: var(--surface-card);
	color: var(--text-primary);
	cursor: pointer;
	outline-offset: 2px;
	transition: border-color 120ms ease, box-shadow 120ms ease;
}

.date-picker-input:hover[b-f61xbs3k9o] {
	border-color: var(--brand-teal);
}

.date-picker-input:focus[b-f61xbs3k9o] {
	outline: none;
	border-color: var(--brand-teal);
	box-shadow: 0 0 0 3px var(--brand-teal-20);
}

@media (max-width: 640px) {
	.page-header-right[b-f61xbs3k9o] {
		width: 100%;
		justify-content: flex-end;
	}
}

/* ---- Range selector (segmented pill) ----------------------------------- */
.range-selector[b-f61xbs3k9o] {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: rgba(0, 46, 51, 0.04);
	border-radius: 999px;
}

.range-btn[b-f61xbs3k9o] {
	padding: 5px 14px;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	background: transparent;
	color: var(--text-muted);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background 140ms ease, color 140ms ease;
	outline-offset: 2px;
}

.range-btn:hover[b-f61xbs3k9o] {
	color: var(--text-primary);
}

.range-btn:focus-visible[b-f61xbs3k9o] {
	outline: 2px solid var(--brand-teal);
}

.range-btn--active[b-f61xbs3k9o],
.range-btn--active:hover[b-f61xbs3k9o] {
	background: var(--surface-card);
	color: var(--brand-deep);
	box-shadow: 0 1px 3px rgba(0, 46, 51, 0.08);
}

/* ---- KPI section group -------------------------------------------------- */
/* NOTE on scoping — 2026-07-10:
   The KpiCard / KpiSparkline / KpiDonut components build their DOM via
   RenderTreeBuilder in @code {}. Blazor's scoped-CSS compiler only
   auto-tags elements written in razor MARKUP with the [b-xxxxxx]
   attribute; RTB-built elements do not receive it. To style those
   from this scoped stylesheet we use `::deep` on descendant selectors
   so the scope attribute lives on the parent (.metrics-page) while
   the child selector matches unattributed descendants.
   See: https://learn.microsoft.com/aspnet/core/blazor/components/css-isolation#child-component-support
*/

.metrics-page[b-f61xbs3k9o]  .kpi-group {
	margin-bottom: var(--pdlc-gap-lg);
}

.metrics-page[b-f61xbs3k9o]  .kpi-group-heading {
	font-size: var(--pdlc-heading-size);
	font-weight: var(--pdlc-heading-weight);
	letter-spacing: var(--pdlc-heading-tracking);
	color: var(--text-primary);
	margin: 0 0 14px;
	/* No border-bottom — Asana lets whitespace do the separating. */
}

/* ---- KPI card row (grid) ------------------------------------------------ */
.metrics-page[b-f61xbs3k9o]  .kpi-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--pdlc-gap-md);
}

/* PR Lifecycle rows are paired Opened/Merged — keep them as 2-up columns
   even on wider screens so a Spec pair reads as a unit. */
.metrics-page[b-f61xbs3k9o]  .kpi-row--pair {
	grid-template-columns: repeat(2, minmax(200px, 1fr));
	max-width: 640px;
	margin-bottom: 12px;
}

/* ---- KPI card (built by RenderTreeBuilder → needs ::deep) --------------- */
.metrics-page[b-f61xbs3k9o]  .kpi-card {
	background: var(--pdlc-card-bg);
	border: 1px solid var(--pdlc-card-border);
	/* Reset the legacy border-left inline colour override — the new card
	   has no coloured left edge. `border-left: 0` neutralises the inline
	   `style="border-left-color:..."` still set by KpiCard in .razor. */
	border-left-width: 1px;
	border-radius: var(--pdlc-card-radius);
	box-shadow: var(--pdlc-card-shadow);
	padding: var(--pdlc-card-padding);
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 108px;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.metrics-page[b-f61xbs3k9o]  .kpi-card:hover {
	box-shadow: var(--pdlc-card-shadow-hover);
	transform: translateY(-1px);
}

.metrics-page[b-f61xbs3k9o]  .kpi-label {
	font-size: var(--pdlc-caption-size);
	font-weight: var(--pdlc-caption-weight);
	text-transform: uppercase;
	letter-spacing: var(--pdlc-caption-tracking);
	color: var(--text-muted);
	margin: 0;
}

.metrics-page[b-f61xbs3k9o]  .kpi-value {
	font-size: var(--pdlc-value-size);
	font-weight: var(--pdlc-value-weight);
	font-variant-numeric: tabular-nums;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--pdlc-value-color);
	/* Colour override via inline style stays supported (see .razor). */
}

/* ---- Sparkline row ------------------------------------------------------ */
.metrics-page[b-f61xbs3k9o]  .kpi-sparkline-container {
	height: 32px;
	display: flex;
	align-items: center;
	margin-top: auto;
}

.metrics-page[b-f61xbs3k9o]  .kpi-sparkline {
	display: block;
	overflow: visible;
	width: 100%;
	max-width: 160px;
}

/* ---- Donut summary card (Intake) --------------------------------------- */
.donut-card[b-f61xbs3k9o] {
	background: var(--pdlc-card-bg);
	border: 1px solid var(--pdlc-card-border);
	border-radius: var(--pdlc-card-radius);
	box-shadow: var(--pdlc-card-shadow);
	padding: var(--pdlc-card-padding);
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 32px;
	align-items: center;
	min-height: 200px;
	transition: box-shadow 200ms ease;
}

.donut-card:hover[b-f61xbs3k9o] {
	box-shadow: var(--pdlc-card-shadow-hover);
}

.donut-visual[b-f61xbs3k9o] {
	position: relative;
	width: 160px;
	height: 160px;
	flex-shrink: 0;
}

.donut-center-total[b-f61xbs3k9o] {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.donut-center-value[b-f61xbs3k9o] {
	font-size: 2.1rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
	line-height: 1;
}

.donut-center-label[b-f61xbs3k9o] {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text-muted);
	margin-top: 6px;
}

.donut-legend[b-f61xbs3k9o] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 10px 16px;
	align-items: center;
	font-size: 0.9rem;
	color: var(--text-secondary);
}

.donut-legend-swatch[b-f61xbs3k9o] {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	display: inline-block;
}

.donut-legend-label[b-f61xbs3k9o] { color: var(--text-secondary); }

.donut-legend-value[b-f61xbs3k9o] {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
	text-align: right;
}

@media (max-width: 640px) {
	.donut-card[b-f61xbs3k9o] {
		grid-template-columns: 1fr;
		justify-items: center;
		gap: 20px;
	}
	.donut-legend[b-f61xbs3k9o] { justify-items: start; }
}

/* ---- Entrance animation ------------------------------------------------- */
.kpi-animate[b-f61xbs3k9o] {
	animation: kpi-fade-in-b-f61xbs3k9o 320ms ease-out both;
}

@keyframes kpi-fade-in-b-f61xbs3k9o {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.kpi-animate[b-f61xbs3k9o] { animation: none; }
	.kpi-card:hover[b-f61xbs3k9o] { transform: none; }
}

/* ---- Skeleton loading state -------------------------------------------- */
.metrics-skeleton[b-f61xbs3k9o] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--pdlc-gap-md);
	margin-bottom: var(--pdlc-gap-lg);
}

.skeleton-card[b-f61xbs3k9o] {
	height: 108px;
	border-radius: var(--pdlc-card-radius);
	background: linear-gradient(
		90deg,
		var(--surface-inset) 0%,
		var(--surface-highlight) 50%,
		var(--surface-inset) 100%
	);
	background-size: 200% 100%;
	animation: skeleton-shimmer-b-f61xbs3k9o 1400ms linear infinite;
}

@keyframes skeleton-shimmer-b-f61xbs3k9o {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
	.skeleton-card[b-f61xbs3k9o] { animation: none; }
}

/* ---- Error / alert ------------------------------------------------------ */
.alert-error[b-f61xbs3k9o] {
	padding: 14px 18px;
	background: var(--status-error-bg);
	border: 1px solid var(--status-error-border, var(--status-error));
	border-radius: var(--radius-md);
	color: var(--text-primary);
	margin-bottom: 20px;
}

.alert-error p[b-f61xbs3k9o] { margin: 0 0 8px; }

/* ---- Chart tile grid (2-up desktop, 1-up mobile) ---------------------- */
/* The tile row is written in razor markup so it gets the scope attribute
   naturally — no ::deep needed here. */
.chart-tile-row[b-f61xbs3k9o] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
	gap: var(--pdlc-gap-md);
	margin-bottom: var(--pdlc-gap-md);
}

/* ---- Chart tile ------------------------------------------------------ */
.chart-tile[b-f61xbs3k9o] {
	background: var(--pdlc-card-bg);
	border: 1px solid var(--pdlc-card-border);
	border-radius: var(--pdlc-card-radius);
	box-shadow: var(--pdlc-card-shadow);
	padding: 24px 24px 20px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-height: 320px;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.chart-tile:hover[b-f61xbs3k9o] {
	box-shadow: var(--pdlc-card-shadow-hover);
	transform: translateY(-1px);
}

.chart-tile--wide[b-f61xbs3k9o] { grid-column: 1 / -1; }

.chart-tile-head[b-f61xbs3k9o] {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.chart-tile-title[b-f61xbs3k9o] {
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	margin: 0;
	color: var(--text-primary);
	line-height: 1.3;
}

.chart-tile-subtitle[b-f61xbs3k9o] {
	font-size: 0.78rem;
	color: var(--text-muted);
	line-height: 1.3;
}

.chart-tile-body[b-f61xbs3k9o] {
	flex: 1;
	min-height: 180px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Inline SVG charts fill the body area. */
.chart-tile-body[b-f61xbs3k9o]  svg {
	width: 100%;
	height: 100%;
	max-height: 240px;
}

/* ---- Chart tile legend (bottom row) ---------------------------------- */
.chart-tile-legend[b-f61xbs3k9o] {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 24px;
	padding-top: 12px;
	border-top: 1px solid rgba(0, 46, 51, 0.05);
}

.chart-legend-item[b-f61xbs3k9o] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.82rem;
}

.chart-legend-swatch[b-f61xbs3k9o] {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	display: inline-block;
	flex-shrink: 0;
}

.chart-legend-label[b-f61xbs3k9o] {
	color: var(--text-secondary);
	font-weight: 500;
}

.chart-legend-value[b-f61xbs3k9o] {
	color: var(--text-primary);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	margin-left: 2px;
}

/* ---- Value grid at the foot of the grouped-bar tile ------------------ */
.chart-tile-values[b-f61xbs3k9o] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	gap: 8px 16px;
	padding-top: 8px;
	border-top: 1px solid rgba(0, 46, 51, 0.05);
}

.chart-tile-values-group[b-f61xbs3k9o] {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 4px;
}

.chart-tile-values-group-label[b-f61xbs3k9o] {
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	margin-bottom: 2px;
}

.chart-tile-values-cell[b-f61xbs3k9o] {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	font-size: 0.82rem;
}

.chart-tile-values-series[b-f61xbs3k9o] {
	color: var(--text-muted);
}

.chart-tile-values-num[b-f61xbs3k9o] {
	color: var(--text-primary);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
	.metrics-page[b-f61xbs3k9o]  .kpi-row { grid-template-columns: 1fr; }
	.metrics-page[b-f61xbs3k9o]  .kpi-row--pair { grid-template-columns: 1fr; }
	.page-header-right[b-f61xbs3k9o] { width: 100%; }
	.chart-tile-row[b-f61xbs3k9o] { grid-template-columns: 1fr; }
}
/* /Pages/AiTrust.razor.rz.scp.css */
.trust-filter-strip[b-tajdndztyu] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    padding: 4px 0 12px;
    flex: 0 0 auto;
}

.trust-tab-toolbar[b-tajdndztyu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 6px 0 10px;
}

.overview-guidance[b-tajdndztyu] {
    margin-bottom: 12px;
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--brand-teal);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-xs);
}

.overview-guidance summary[b-tajdndztyu] {
    padding: 10px 14px;
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 700;
}

.overview-guidance summary:focus-visible[b-tajdndztyu] {
    outline: 2px solid var(--brand-teal);
    outline-offset: -2px;
}

.overview-guidance__content[b-tajdndztyu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 16px 24px;
    padding: 0 14px 14px;
    border-top: 1px solid var(--border-default);
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.45;
}

.overview-guidance__content h2[b-tajdndztyu] {
    margin: 14px 0 8px;
    color: var(--text-primary);
    font-size: 0.8rem;
}

.overview-guidance__content dl[b-tajdndztyu] {
    display: grid;
    gap: 8px;
    margin: 0;
}

.overview-guidance__content dl div[b-tajdndztyu] {
    display: grid;
    gap: 2px;
}

.overview-guidance__content dt[b-tajdndztyu] {
    color: var(--text-primary);
    font-weight: 700;
}

.overview-guidance__content dd[b-tajdndztyu] {
    margin: 0;
}

.overview-guidance__state-note[b-tajdndztyu] {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 10px;
    border-top: 1px solid var(--border-default);
}

.trust-filter-kpi[b-tajdndztyu] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    min-width: 110px;
}

.trust-filter-kpi:hover[b-tajdndztyu] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-teal-20);
}

.trust-filter-kpi:has(select:focus)[b-tajdndztyu] {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 2px var(--brand-teal-20);
    transform: translateY(-1px);
}

.trust-filter-kpi-label[b-tajdndztyu] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Single teal left accent on every filter card */
.trust-filter-kpi[b-tajdndztyu] {
    border-left: 3px solid var(--brand-teal);
    padding-left: 13px; /* 16px - 3px to keep visual spacing consistent */
}

.trust-filter-kpi select[b-tajdndztyu] {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    font-family: inherit;
    padding: 0;
    width: 100%;
}

/* ─── Partial data banner ─────────────────────────────────────────────── */

.partial-data-banner[b-tajdndztyu] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-left: 4px solid var(--rag-amber);
    border-radius: var(--radius-lg);
    background: rgba(217, 119, 6, 0.1);
    box-shadow: var(--shadow-sm);
    flex: 0 0 auto;
}

.partial-data-banner__icon[b-tajdndztyu] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: rgba(217, 119, 6, 0.18);
    color: var(--rag-amber);
    font-weight: 800;
}

.partial-data-banner__title[b-tajdndztyu] {
    margin-bottom: 4px;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.partial-data-banner__body[b-tajdndztyu] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ─── Page wrapper ───────────────────────────────────────────────────── */

.ai-trust-page[b-tajdndztyu] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px);
    min-height: 0;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}

.ai-trust-page .header-card[b-tajdndztyu] {
    flex: 0 0 auto;
}

/* ─── Tab bar ────────────────────────────────────────────────────────── */

.ai-trust-page .view-tabs[b-tajdndztyu] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-default);
    overflow-x: auto;
    margin-bottom: 4px;
    flex: 0 0 auto;
}

.ai-trust-page .view-tab[b-tajdndztyu] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.ai-trust-page .view-tab:hover[b-tajdndztyu] {
    color: var(--text-secondary);
}

.ai-trust-page .view-tab-active[b-tajdndztyu] {
    color: var(--brand-teal);
    border-bottom-color: var(--brand-teal);
}

/* ─── Content column ────────────────────────────────────────────────── */

.trust-content[b-tajdndztyu] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-height: 0;
    overflow: visible;
}

/* ─── KPI Strip ──────────────────────────────────────────────────────── */

.trust-kpi-strip[b-tajdndztyu] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    flex: 0 0 auto;
}

.trust-kpi-card[b-tajdndztyu] {
    flex: 1 1 160px;
    min-width: 160px;
    max-width: 240px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.trust-kpi-header[b-tajdndztyu] {
    padding: 10px 14px 8px;
    background: var(--surface-inset);
    border-bottom: 1px solid var(--border-default);
    text-align: center;
}

.trust-kpi-label[b-tajdndztyu] {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    white-space: nowrap;
}

.trust-kpi-sub[b-tajdndztyu] {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 1px;
    white-space: nowrap;
}

.trust-kpi-value[b-tajdndztyu] {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
    padding: 10px 14px 2px;
    text-align: center;
}

.trust-kpi-counts[b-tajdndztyu] {
    font-size: 0.68rem;
    color: var(--text-muted);
    padding: 0 14px 12px;
    text-align: center;
}

/* KPI card bottom-border colour coding */
.trust-kpi-card--red[b-tajdndztyu]    { border-bottom: 3px solid var(--severity-critical); }
.trust-kpi-card--green[b-tajdndztyu]  { border-bottom: 3px solid var(--rag-green); }
.trust-kpi-card--orange[b-tajdndztyu] { border-bottom: 3px solid var(--severity-high); }
.trust-kpi-card--yellow[b-tajdndztyu] { border-bottom: 3px solid var(--severity-medium); }
.trust-kpi-card--purple[b-tajdndztyu] { border-bottom: 3px solid var(--severity-ageing); }

/* Rate traffic-light colours */
.rate-green[b-tajdndztyu] { color: var(--rag-green, #16a34a); }
.rate-amber[b-tajdndztyu] { color: var(--rag-amber); }
.rate-red[b-tajdndztyu]   { color: var(--severity-critical); }

/* ─── Data Grid ──────────────────────────────────────────────────────── */

.trust-data-grid[b-tajdndztyu] {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-auto-rows: minmax(0, 1fr);
    gap: 16px;
    /* Fixed height for the 3 Overview tiles — Token Usage (below) is the tile that
       benefits most from vertical room now it's a full-width, many-row table. */
    flex: 0 0 320px;
    min-height: 0;
    overflow: hidden;
}

/* .trust-tile inherits background, border, border-radius, box-shadow, overflow from .panel */
.trust-tile[b-tajdndztyu] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}

/* Keep definition in case it is useful for future stubs — no longer applied to token tile */
.trust-tile--stub[b-tajdndztyu] {
    opacity: 0.85;
}

/* .trust-tile-header inherits padding, border-bottom, background from .panel-header */
.trust-tile-header[b-tajdndztyu] {
    flex-shrink: 0;
}

.trust-tile-label[b-tajdndztyu] {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    white-space: nowrap;
}

.trust-tile-sub[b-tajdndztyu] {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.trust-tile-body[b-tajdndztyu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.trust-tile-scroll[b-tajdndztyu] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 0;
}

.trust-tile-summary[b-tajdndztyu] {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--text-primary);
    background: var(--surface-inset);
    border-top: 1px solid var(--border-default);
    flex-shrink: 0;
}

.trust-tile-empty[b-tajdndztyu] {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 16px 20px;
}

/* ─── Trust Tables ───────────────────────────────────────────────────── */

.trust-table[b-tajdndztyu] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 0.8rem;
}

.trust-table thead[b-tajdndztyu] {
    position: sticky;
    top: 0;
    z-index: 1;
}

.trust-table thead th[b-tajdndztyu] {
    padding: 8px 12px;
    text-align: left;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--surface-inset);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

.trust-table tbody tr[b-tajdndztyu] {
    border-top: 1px solid var(--border-default);
    transition: background 0.15s ease;
}

.trust-table tbody tr:first-child[b-tajdndztyu] {
    border-top: none;
}

.trust-table tbody tr:hover[b-tajdndztyu] {
    background: var(--surface-highlight);
}

.trust-table tbody td[b-tajdndztyu] {
    padding: 8px 12px;
    vertical-align: middle;
    color: var(--text-primary);
}

/* ─── Token Usage — full-width section ──────────────────────────────── */

.trust-token-usage[b-tajdndztyu] {
    display: flex;
    flex-direction: column;
    /* Panel header + table header + five 36px data rows. */
    flex: 1 0 280px;
    min-height: 280px;
    min-width: 0;
    overflow: hidden;
}

.token-usage-header[b-tajdndztyu] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.token-agent-filter[b-tajdndztyu] {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.token-agent-filter select[b-tajdndztyu] {
    padding: 5px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.token-agent-label[b-tajdndztyu] {
    font-weight: 700;
    color: var(--text-primary);
}

.token-profile-id-cell[b-tajdndztyu] {
    max-width: 220px;
    overflow: hidden;
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
    font-size: 0.72rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sortable column-header button — fills the <th>, inherits its text styling */
.token-th-button[b-tajdndztyu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}

/* Icon + text unmapped-profile badge — never colour-only, per accessibility requirement */
.token-unmapped-badge[b-tajdndztyu] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
    font-size: 0.62rem;
    vertical-align: middle;
}

.copy-arn-button[b-tajdndztyu] {
    padding: 4px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.copy-arn-button:hover[b-tajdndztyu] {
    border-color: var(--brand-teal-20);
    color: var(--text-primary);
}

/* ─── SLO panel ──────────────────────────────────────────────────────── */

.slo-panel[b-tajdndztyu] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.slo-panel-header[b-tajdndztyu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.slo-legend[b-tajdndztyu] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.slo-legend-label[b-tajdndztyu] {
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.slo-legend-dot[b-tajdndztyu] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.slo-legend-dot.slo-rag-green[b-tajdndztyu]  { background: var(--rag-green); }
.slo-legend-dot.slo-rag-amber[b-tajdndztyu]  { background: var(--rag-amber); }
.slo-legend-dot.slo-rag-red[b-tajdndztyu]    { background: var(--severity-critical); }
.slo-legend-dot.slo-rag-neutral[b-tajdndztyu] { background: var(--text-muted); }

/* ─── SLO tile grid ──────────────────────────────────────────────────── */

.slo-grid[b-tajdndztyu] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-content: start;
    gap: 12px;
    padding: 16px 20px;
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
}

.slo-tile[b-tajdndztyu] {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    overflow: hidden;
    outline: none;
}

.slo-tile:hover[b-tajdndztyu], .slo-tile:focus-visible[b-tajdndztyu] {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.slo-tile:focus-visible[b-tajdndztyu] {
    box-shadow: 0 0 0 2px var(--brand-teal);
}

/* Left accent bar */
.slo-tile-accent[b-tajdndztyu] {
    width: 4px;
    flex-shrink: 0;
}
.slo-rag-green  .slo-tile-accent[b-tajdndztyu] { background: var(--rag-green); }
.slo-rag-amber  .slo-tile-accent[b-tajdndztyu] { background: var(--rag-amber); }
.slo-rag-red    .slo-tile-accent[b-tajdndztyu] { background: var(--severity-critical); }
.slo-rag-neutral .slo-tile-accent[b-tajdndztyu] { background: var(--text-muted); }

.slo-tile-body[b-tajdndztyu] {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.slo-tile-name[b-tajdndztyu] {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slo-tile-pct[b-tajdndztyu] {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.slo-rag-green-text[b-tajdndztyu]  { color: var(--rag-green); }
.slo-rag-amber-text[b-tajdndztyu]  { color: var(--rag-amber); }
.slo-rag-red-text[b-tajdndztyu]    { color: var(--severity-critical); }
.slo-rag-neutral-text[b-tajdndztyu] { color: var(--text-muted); }

.slo-tile-meta[b-tajdndztyu] {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
}

.slo-tile-caption[b-tajdndztyu] {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 4px;
}

.slo-badge[b-tajdndztyu] {
    align-self: flex-start;
    margin-top: 4px;
}

.slo-tile-chevron[b-tajdndztyu] {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: var(--text-muted);
    font-size: 0.6rem;
    flex-shrink: 0;
}

/* ─── SLO drilldown ──────────────────────────────────────────────────── */

.slo-drilldown[b-tajdndztyu] {
    grid-column: 1 / -1;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
    background: var(--surface-card);
}

.slo-drilldown-scroll[b-tajdndztyu] {
    max-height: min(24rem, 50vh);
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.slo-drilldown-scroll:focus-visible[b-tajdndztyu] {
    outline: 2px solid var(--brand-teal);
    outline-offset: -2px;
}

.slo-drilldown-scroll .trust-table thead th[b-tajdndztyu] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-inset);
}

.slo-drilldown-source[b-tajdndztyu] {
    border-top: 1px solid var(--border-default);
}
/* /Pages/AwsCost.razor.rz.scp.css */
/* ============================================================
   AwsCost — net amortized AWS spend by linked account, last 6 months.
   Mirrors the card system used by AgentPdlcCost.razor.css (scoped CSS
   can't be shared between components, so tokens are duplicated here —
   see CLAUDE.md "CSS conventions").
   ============================================================ */

.aws-cost-page[b-vt9uz4g48o] {
    --awsc-card-bg: var(--surface-card);
    --awsc-card-border: rgba(0, 46, 51, 0.08);
    --awsc-card-radius: 14px;
    --awsc-card-padding: 24px;
    --awsc-card-shadow: 0 1px 2px rgba(0, 46, 51, 0.04);
    --awsc-card-shadow-hover: 0 4px 12px rgba(0, 46, 51, 0.07);

    --awsc-gap-md: 20px;
    --awsc-gap-lg: 32px;

    --awsc-caption-size: 0.72rem;
    --awsc-value-size: 2.15rem;
    --awsc-heading-size: 0.95rem;

    /* 12-step qualitative palette, built from existing design tokens so no new
       colour literals are introduced. Cycled by account rank (see AwsCost.razor
       PaletteColor()) — enough distinct hues for the linked accounts typically
       returned by Cost Explorer, repeating gracefully if there are more. */
    --aws-acct-0: var(--brand-teal);
    --aws-acct-1: var(--severity-high);
    --aws-acct-2: var(--severity-ageing);
    --aws-acct-3: var(--severity-medium);
    --aws-acct-4: var(--severity-critical);
    --aws-acct-5: var(--severity-low);
    --aws-acct-6: color-mix(in srgb, var(--brand-teal) 55%, var(--severity-ageing));
    --aws-acct-7: color-mix(in srgb, var(--severity-high) 55%, var(--severity-critical));
    --aws-acct-8: color-mix(in srgb, var(--severity-medium) 55%, var(--brand-teal));
    --aws-acct-9: color-mix(in srgb, var(--severity-ageing) 55%, var(--severity-low));
    --aws-acct-10: color-mix(in srgb, var(--brand-teal) 35%, var(--severity-critical));
    --aws-acct-11: color-mix(in srgb, var(--severity-low) 45%, var(--severity-high));
}

/* ---- KPI cards ----------------------------------------------------------- */
.kpi-row[b-vt9uz4g48o] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--awsc-gap-md);
    margin-bottom: var(--awsc-gap-md);
}

.kpi-card[b-vt9uz4g48o] {
    background: var(--awsc-card-bg);
    border: 1px solid var(--awsc-card-border);
    border-radius: var(--awsc-card-radius);
    box-shadow: var(--awsc-card-shadow);
    padding: var(--awsc-card-padding);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 108px;
    transition: box-shadow 200ms ease, transform 200ms ease;
}

.kpi-card:hover[b-vt9uz4g48o] {
    box-shadow: var(--awsc-card-shadow-hover);
    transform: translateY(-1px);
}

.kpi-card-wide[b-vt9uz4g48o] { grid-column: span 2; }

.kpi-label[b-vt9uz4g48o] {
    font-size: var(--awsc-caption-size);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.kpi-value[b-vt9uz4g48o] {
    font-size: var(--awsc-value-size);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.kpi-value-sm[b-vt9uz4g48o] { font-size: 1.05rem; letter-spacing: 0; }

.kpi-sub[b-vt9uz4g48o] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.kpi-badge[b-vt9uz4g48o] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--brand-teal-20);
    color: var(--brand-deep);
    letter-spacing: 0.02em;
}

/* ---- Section headings ----------------------------------------------------- */
.section-heading[b-vt9uz4g48o] {
    font-size: var(--awsc-heading-size);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0 0 14px;
}

/* ---- Chart section --------------------------------------------------------- */
.chart-section[b-vt9uz4g48o] {
    background: var(--awsc-card-bg);
    border: 1px solid var(--awsc-card-border);
    border-radius: var(--awsc-card-radius);
    box-shadow: var(--awsc-card-shadow);
    padding: var(--awsc-card-padding);
    margin-bottom: var(--awsc-gap-md);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow 200ms ease;
}

.chart-section:hover[b-vt9uz4g48o] { box-shadow: var(--awsc-card-shadow-hover); }

.chart-wrapper[b-vt9uz4g48o] { overflow-x: hidden; }

.cost-chart[b-vt9uz4g48o] {
    width: 100%;
    height: auto;       /* scales proportionally to fill container width */
    display: block;
    /* SVG <text> children (RenderTreeBuilder-emitted) don't get Blazor's scoped-CSS
       attribute, so class rules only work if declared on/inherited from the SVG root. */
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 500;
    fill: var(--text-muted);
}

.chart-label[b-vt9uz4g48o] {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 500;
    fill: var(--text-muted);
    letter-spacing: 0.01em;
}

.chart-total-label[b-vt9uz4g48o] {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 700;
    fill: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.axis-label[b-vt9uz4g48o] {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 500;
    fill: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.gridline[b-vt9uz4g48o] {
    stroke: var(--border-subtle);
    stroke-width: 1;
    stroke-dasharray: 2 4;
}

.stack-segment[b-vt9uz4g48o] {
    transition: transform 150ms ease-out, filter 150ms ease-out;
    transform-origin: center bottom;
    transform-box: fill-box;
}

.stack-segment:hover[b-vt9uz4g48o] {
    transform: translateY(-2px);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.18));
}

/* ---- Table section --------------------------------------------------------- */
.table-section[b-vt9uz4g48o] {
    background: var(--awsc-card-bg);
    border: 1px solid var(--awsc-card-border);
    border-radius: var(--awsc-card-radius);
    box-shadow: var(--awsc-card-shadow);
    padding: var(--awsc-card-padding);
    margin-bottom: var(--awsc-gap-md);
}

.table-wrapper[b-vt9uz4g48o] { overflow-x: auto; }

.cost-table[b-vt9uz4g48o] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.cost-table th[b-vt9uz4g48o] {
    padding: 12px 14px;
    text-align: left;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    border-bottom: 1px solid rgba(0, 46, 51, 0.08);
    white-space: nowrap;
}

.cost-table td[b-vt9uz4g48o] {
    padding: 12px 14px;
    color: var(--text-primary);
    border-bottom: 1px solid rgba(0, 46, 51, 0.05);
    vertical-align: middle;
}

.cost-table tbody tr:last-child td[b-vt9uz4g48o] { border-bottom: none; }
.cost-table tbody tr:hover td[b-vt9uz4g48o] { background: rgba(33, 207, 178, 0.04); }

.col-num[b-vt9uz4g48o] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.col-total[b-vt9uz4g48o] { font-weight: 700; }

.col-account[b-vt9uz4g48o] {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    position: sticky;
    left: 0;
    background: var(--awsc-card-bg);
    z-index: 1;
    box-shadow: 2px 0 4px rgba(0,0,0,0.04);
}

.account-swatch[b-vt9uz4g48o] {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

.account-label[b-vt9uz4g48o] { font-weight: 600; }
.account-id[b-vt9uz4g48o] { font-size: 0.72rem; color: var(--text-muted); }

/* ---- Loading / error / empty states ---------------------------------------- */
.empty-state[b-vt9uz4g48o] {
    padding: 56px 0;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.empty-state-detail[b-vt9uz4g48o] { font-size: 0.8rem; color: var(--text-muted); }
.empty-state code[b-vt9uz4g48o] { font-size: 0.78rem; }

.alert-error[b-vt9uz4g48o] {
    padding: 14px 18px;
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border, var(--status-error));
    border-radius: var(--radius-md);
    color: var(--text-primary);
    margin-bottom: 20px;
}

.alert-error p[b-vt9uz4g48o] { margin: 0 0 8px; }

/* ---- Skeleton loading state ------------------------------------------------- */
.skeleton-card[b-vt9uz4g48o],
.skeleton-chart[b-vt9uz4g48o] {
    background: linear-gradient(90deg,
        var(--surface-inset) 0%,
        var(--surface-highlight) 50%,
        var(--surface-inset) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-lg);
    animation: awsc-skeleton-shimmer-b-vt9uz4g48o 1400ms linear infinite;
}

.skeleton-card[b-vt9uz4g48o] {
    flex: 1 1 160px;
    min-width: 140px;
    height: 84px;
}

.skeleton-chart[b-vt9uz4g48o] {
    height: 200px;
    margin-bottom: 24px;
}

@keyframes awsc-skeleton-shimmer-b-vt9uz4g48o {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .stack-segment[b-vt9uz4g48o] { transition-duration: 1ms; }
    .skeleton-card[b-vt9uz4g48o],
    .skeleton-chart[b-vt9uz4g48o] { animation: none; }
}

/* ---- Responsive ------------------------------------------------------------- */
@media (max-width: 640px) {
    .kpi-row[b-vt9uz4g48o] { flex-direction: column; }
    .kpi-card[b-vt9uz4g48o] { flex: unset; }
}
/* /Pages/CodeReview.razor.rz.scp.css */
/* ─── Code Review Page Layout ─────────────────────────────────────────── */
.cr-page[b-c2wkjgh4tg] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
}

/* ─── Skeleton Loading ───────────────────────────────────────────────── */
.cr-skeleton[b-c2wkjgh4tg] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cr-skeleton .skeleton-bar[b-c2wkjgh4tg] {
    background: linear-gradient(90deg, var(--surface-inset) 25%, var(--surface-highlight) 50%, var(--surface-inset) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: no-preference) {
    .cr-skeleton .skeleton-bar[b-c2wkjgh4tg] {
        animation: crSkeletonShimmer-b-c2wkjgh4tg 1.5s ease infinite;
    }
}

@keyframes crSkeletonShimmer-b-c2wkjgh4tg {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.cr-skeleton-title[b-c2wkjgh4tg] {
    height: 32px;
    width: 220px;
}

.cr-skeleton-kpi-row[b-c2wkjgh4tg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.cr-skeleton-kpi[b-c2wkjgh4tg] {
    height: 88px;
    border-radius: var(--radius-lg);
}

.cr-skeleton-charts-row[b-c2wkjgh4tg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.cr-skeleton-chart[b-c2wkjgh4tg] {
    height: 200px;
    border-radius: var(--radius-lg);
}

.cr-skeleton-table[b-c2wkjgh4tg] {
    height: 300px;
    border-radius: var(--radius-lg);
}

.cr-error[b-c2wkjgh4tg] {
    padding: 16px 20px;
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    border-radius: var(--radius-md);
    color: var(--status-error);
    font-size: 13px;
    font-weight: 500;
}

/* ─── Summary Stats ──────────────────────────────────────────────────── */
.cr-summary-row[b-c2wkjgh4tg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.cr-stat-card[b-c2wkjgh4tg] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .cr-stat-card[b-c2wkjgh4tg] {
        transition: all var(--transition-fast);
    }
}

.cr-stat-card:hover[b-c2wkjgh4tg] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-teal-20);
}

.cr-stat-value[b-c2wkjgh4tg] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.cr-stat-success[b-c2wkjgh4tg] {
    color: var(--status-success);
}

.cr-stat-warning[b-c2wkjgh4tg] {
    color: var(--status-warning);
}

.cr-stat-label[b-c2wkjgh4tg] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ─── State Distribution Bar ─────────────────────────────────────────── */
.cr-state-bar-container[b-c2wkjgh4tg] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 20px;
}

.cr-section-title[b-c2wkjgh4tg] {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0 0 16px 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.cr-state-bar[b-c2wkjgh4tg] {
    display: flex;
    height: 24px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--surface-inset);
}

.cr-bar-segment[b-c2wkjgh4tg] {
    min-width: 2px;
}

@media (prefers-reduced-motion: no-preference) {
    .cr-bar-segment[b-c2wkjgh4tg] {
        transition: width 0.4s ease;
    }
}

.cr-bar-closed[b-c2wkjgh4tg] {
    background: var(--status-success);
}

.cr-bar-resolved[b-c2wkjgh4tg] {
    background: #a399ff;
}

.cr-bar-active[b-c2wkjgh4tg] {
    background: var(--status-warning);
}

.cr-bar-new[b-c2wkjgh4tg] {
    background: var(--text-muted);
}

.cr-state-legend[b-c2wkjgh4tg] {
    display: flex;
    gap: 16px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.cr-legend-item[b-c2wkjgh4tg] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}

.cr-legend-dot[b-c2wkjgh4tg] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* ─── Charts ─────────────────────────────────────────────────────────── */
.cr-charts-row[b-c2wkjgh4tg] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 768px) {
    .cr-charts-row[b-c2wkjgh4tg] {
        grid-template-columns: 1fr;
    }
}

.cr-chart-card[b-c2wkjgh4tg] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 20px;
}

.cr-chart-svg[b-c2wkjgh4tg] {
    width: 100%;
    height: 120px;
}

.cr-chart-labels[b-c2wkjgh4tg] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 8px;
}

.cr-chart-empty[b-c2wkjgh4tg] {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 13px;
    font-style: italic;
}

/* ─── Filters ────────────────────────────────────────────────────────── */
.cr-filters[b-c2wkjgh4tg] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.cr-filter-pills[b-c2wkjgh4tg] {
    display: flex;
    gap: 6px;
}

.cr-filter-dropdowns[b-c2wkjgh4tg] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.cr-select[b-c2wkjgh4tg] {
    padding: 7px 11px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    cursor: pointer;
    width: auto;
}

@media (prefers-reduced-motion: no-preference) {
    .cr-select[b-c2wkjgh4tg] {
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }
}

.cr-select:focus[b-c2wkjgh4tg] {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(33,207,178,0.10);
}

/* ─── Domain Groups & Table ──────────────────────────────────────────── */
.cr-groups-container[b-c2wkjgh4tg] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cr-empty[b-c2wkjgh4tg] {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    font-style: italic;
}

.cr-domain-group[b-c2wkjgh4tg] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.cr-domain-header[b-c2wkjgh4tg] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
    .cr-domain-header[b-c2wkjgh4tg] {
        transition: background var(--transition-fast);
    }
}

.cr-domain-header:hover[b-c2wkjgh4tg] {
    background: var(--surface-highlight);
}

.cr-domain-header:focus-visible[b-c2wkjgh4tg] {
    outline: 2px solid var(--brand-teal);
    outline-offset: -2px;
}

.cr-domain-chevron[b-c2wkjgh4tg] {
    font-size: 10px;
    color: var(--text-muted);
}

@media (prefers-reduced-motion: no-preference) {
    .cr-domain-chevron[b-c2wkjgh4tg] {
        transition: transform var(--transition-fast);
    }
}

.cr-chevron-open[b-c2wkjgh4tg] {
    transform: rotate(90deg);
}

.cr-domain-name[b-c2wkjgh4tg] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.cr-domain-count[b-c2wkjgh4tg] {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: auto;
    font-weight: 500;
}

.cr-table-wrapper[b-c2wkjgh4tg] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.cr-table[b-c2wkjgh4tg] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cr-table thead th[b-c2wkjgh4tg] {
    text-align: left;
    padding: 10px 16px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-top: 1px solid var(--border-default);
    background: var(--surface-inset);
}

.cr-table tbody tr[b-c2wkjgh4tg] {
    border-top: 1px solid var(--border-default);
}

@media (prefers-reduced-motion: no-preference) {
    .cr-table tbody tr[b-c2wkjgh4tg] {
        transition: background-color var(--transition-fast);
    }
}

.cr-table tbody tr:hover[b-c2wkjgh4tg] {
    background: var(--surface-highlight);
}

.cr-table tbody tr:last-child td[b-c2wkjgh4tg] {
    border-bottom: none;
}

.cr-table td[b-c2wkjgh4tg] {
    padding: 10px 16px;
    color: var(--text-secondary);
    vertical-align: middle;
}

.cr-item-link[b-c2wkjgh4tg] {
    color: var(--brand-teal);
    text-decoration: none;
    font-weight: 500;
}

@media (prefers-reduced-motion: no-preference) {
    .cr-item-link[b-c2wkjgh4tg] {
        transition: color var(--transition-fast);
    }
}

.cr-item-link:hover[b-c2wkjgh4tg] {
    color: var(--brand-accent-hover);
    text-decoration: underline;
}

.cr-item-link:focus-visible[b-c2wkjgh4tg] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
    border-radius: 2px;
}

.cr-cell-assignee[b-c2wkjgh4tg] {
    color: var(--text-secondary);
    white-space: nowrap;
}

.cr-cell-tags[b-c2wkjgh4tg] {
    color: var(--text-muted);
    font-size: 11px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cr-cell-age[b-c2wkjgh4tg] {
    color: var(--text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* ─── State Badges ───────────────────────────────────────────────────── */
.cr-state-badge[b-c2wkjgh4tg] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    letter-spacing: 0;
    white-space: nowrap;
}

.cr-state-new[b-c2wkjgh4tg] {
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
    color: var(--text-secondary);
}

.cr-state-active[b-c2wkjgh4tg] {
    background: color-mix(in srgb, var(--status-warning) 15%, transparent);
    color: var(--status-warning);
}

.cr-state-resolved[b-c2wkjgh4tg] {
    background: color-mix(in srgb, #a399ff 15%, transparent);
    color: #a399ff;
}

.cr-state-closed[b-c2wkjgh4tg] {
    background: color-mix(in srgb, var(--status-success) 15%, transparent);
    color: var(--status-success);
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .cr-table thead th[b-c2wkjgh4tg],
    .cr-table td[b-c2wkjgh4tg] {
        padding: 8px 10px;
        font-size: 12px;
    }
}

@media (max-width: 768px) {
    .cr-summary-row[b-c2wkjgh4tg] {
        grid-template-columns: repeat(2, 1fr);
    }

    .cr-filters[b-c2wkjgh4tg] {
        flex-direction: column;
        align-items: flex-start;
    }

    .cr-filter-dropdowns[b-c2wkjgh4tg] {
        margin-left: 0;
        width: 100%;
    }

    .cr-select[b-c2wkjgh4tg] {
        flex: 1;
    }
}

/* ─── Chart hover dots ───────────────────────────────────────────────── */
.cr-hover-dot[b-c2wkjgh4tg] {
    transition: r 150ms ease, fill 150ms ease, stroke 150ms ease;
    cursor: pointer;
}

.cr-hover-dot:hover[b-c2wkjgh4tg] {
    r: 6;
    fill: var(--brand-teal);
    stroke: var(--surface-card);
    stroke-width: 2;
}
/* /Pages/Defects.razor.rz.scp.css */
/* ─── Defects Page Layout ─────────────────────────────────────────────── */
.defects-page[b-ob9347ikif] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1440px;
    margin: 0 auto;
}

.defects-count[b-ob9347ikif] {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ─── KPI Strip ──────────────────────────────────────────────────────── */
.defects-kpi-strip[b-ob9347ikif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.defects-kpi[b-ob9347ikif] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
    font-size: inherit;
    text-align: center;
    color: inherit;
}

.defects-kpi:hover[b-ob9347ikif] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-teal-20);
}

.defects-kpi-active[b-ob9347ikif] {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 2px var(--brand-teal-20);
    transform: translateY(-1px);
}

.defects-kpi-value[b-ob9347ikif] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.defects-kpi-label[b-ob9347ikif] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.defects-kpi-critical .defects-kpi-value[b-ob9347ikif] { color: var(--severity-critical); }
.defects-kpi-critical[b-ob9347ikif] { border-bottom: 3px solid var(--severity-critical); }

.defects-kpi-high .defects-kpi-value[b-ob9347ikif] { color: var(--severity-high); }
.defects-kpi-high[b-ob9347ikif] { border-bottom: 3px solid var(--severity-high); }

.defects-kpi-medium .defects-kpi-value[b-ob9347ikif] { color: var(--severity-medium); }
.defects-kpi-medium[b-ob9347ikif] { border-bottom: 3px solid var(--severity-medium); }

.defects-kpi-low .defects-kpi-value[b-ob9347ikif] { color: var(--severity-low); }
.defects-kpi-low[b-ob9347ikif] { border-bottom: 3px solid var(--severity-low); }

.defects-kpi-ageing .defects-kpi-value[b-ob9347ikif] { color: var(--severity-ageing); }
.defects-kpi-ageing[b-ob9347ikif] { border-bottom: 3px solid var(--severity-ageing); }

/* ─── Charts ─────────────────────────────────────────────────────────── */
.defects-charts[b-ob9347ikif] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 16px;
}

.defects-chart-card[b-ob9347ikif] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 20px;
}

.defects-chart-wide[b-ob9347ikif] {
    grid-column: 1 / -1;
}

.defects-chart-title[b-ob9347ikif] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 16px;
}

/* Donut */
.defects-donut-container[b-ob9347ikif] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.defects-donut[b-ob9347ikif] {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.defects-donut-legend[b-ob9347ikif] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.defects-legend-item[b-ob9347ikif] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

.defects-legend-dot[b-ob9347ikif] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Age bars */
.defects-age-bars[b-ob9347ikif] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.defects-age-row[b-ob9347ikif] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.defects-age-label[b-ob9347ikif] {
    width: 50px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: right;
    flex-shrink: 0;
}

.defects-age-track[b-ob9347ikif] {
    flex: 1;
    height: 18px;
    background: var(--surface-inset);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.defects-age-fill[b-ob9347ikif] {
    height: 100%;
    border-radius: var(--radius-sm);
    transition: width 0.4s ease;
}

.defects-age-count[b-ob9347ikif] {
    width: 30px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Trend */
.defects-chart-header[b-ob9347ikif] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.defects-chart-header .defects-chart-title[b-ob9347ikif] {
    margin-bottom: 0;
}

.defects-trend-toggle[b-ob9347ikif] {
    display: flex;
    gap: 2px;
    background: var(--surface-inset);
    border-radius: 99px;
    padding: 2px;
}

.defects-trend-btn[b-ob9347ikif] {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 99px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.defects-trend-btn:hover[b-ob9347ikif] {
    color: var(--text-primary);
}

.defects-trend-btn-active[b-ob9347ikif] {
    background: var(--surface-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-xs);
}

.defects-trend-container[b-ob9347ikif] {
    position: relative;
    display: flex;
    gap: 8px;
    height: 140px;
}

.defects-trend-y-axis[b-ob9347ikif] {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 18px;
}

.defects-trend-y-label[b-ob9347ikif] {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
    min-width: 24px;
    text-align: right;
}

.defects-trend-chart-area[b-ob9347ikif] {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.defects-trend-svg[b-ob9347ikif] {
    width: 100%;
    height: 110px;
    flex: 1;
}

.defects-trend-labels[b-ob9347ikif] {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Assignee bars */
.defects-assignee-bars[b-ob9347ikif] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.defects-assignee-row[b-ob9347ikif] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.defects-assignee-label[b-ob9347ikif] {
    width: 100px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: right;
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.defects-assignee-track[b-ob9347ikif] {
    flex: 1;
    height: 18px;
    background: var(--surface-inset);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.defects-assignee-fill[b-ob9347ikif] {
    height: 100%;
    display: flex;
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: width 0.4s ease;
}

.defects-assignee-segment[b-ob9347ikif] {
    height: 100%;
    display: block;
}

.defects-assignee-count[b-ob9347ikif] {
    width: 28px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ─── Domain Bars ────────────────────────────────────────────────────── */
.defects-domain-bars[b-ob9347ikif] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.defects-domain-row[b-ob9347ikif] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.defects-domain-label[b-ob9347ikif] {
    width: 110px;
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 0;
}

.defects-domain-track[b-ob9347ikif] {
    flex: 1;
    height: 10px;
    background: var(--surface-hover);
    border-radius: 5px;
    overflow: hidden;
}

.defects-domain-fill[b-ob9347ikif] {
    height: 100%;
    background: var(--brand-teal);
    border-radius: 5px;
    transition: width 0.4s ease;
}

.defects-domain-count[b-ob9347ikif] {
    width: 28px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* ─── Grid Table ─────────────────────────────────────────────────────── */
.defects-grid-container[b-ob9347ikif] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow-x: auto;
}

.defects-table[b-ob9347ikif] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.defects-th[b-ob9347ikif] {
    padding: 10px 14px;
    text-align: left;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-inset);
    vertical-align: top;
    min-width: 80px;
}

.defects-th-title[b-ob9347ikif] {
    min-width: 250px;
}

.defects-th-assigned[b-ob9347ikif] {
    min-width: 140px;
}

.defects-sort-btn[b-ob9347ikif] {
    background: none;
    border: none;
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
}

.defects-sort-btn:hover[b-ob9347ikif] {
    color: var(--text-primary);
}

.defects-col-filter[b-ob9347ikif] {
    margin-top: 4px;
    width: 100%;
    max-width: 180px;
    padding: 4px 8px;
    font-size: 11px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    box-sizing: border-box;
    color: var(--text-secondary);
}

.defects-row[b-ob9347ikif] {
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition-fast);
}

.defects-row:hover[b-ob9347ikif] {
    background: var(--surface-highlight);
}

.defects-td[b-ob9347ikif] {
    padding: 10px 14px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.defects-td-title[b-ob9347ikif] {
    white-space: normal;
    max-width: 350px;
    color: var(--text-primary);
    font-weight: 500;
}

.defects-title-link[b-ob9347ikif] {
    color: var(--text-primary);
    text-decoration: none;
}

.defects-title-link:hover[b-ob9347ikif],
.defects-title-link:focus-visible[b-ob9347ikif] {
    color: var(--brand-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Severity badges */
.defects-severity-badge[b-ob9347ikif] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.severity-critical[b-ob9347ikif] { background: rgba(220,38,38,0.1); color: var(--severity-critical); border: 1px solid rgba(220,38,38,0.2); }
.severity-high[b-ob9347ikif] { background: rgba(249,115,22,0.1); color: var(--severity-high); border: 1px solid rgba(249,115,22,0.2); }
.severity-medium[b-ob9347ikif] { background: rgba(234,179,8,0.1); color: var(--severity-medium); border: 1px solid rgba(234,179,8,0.2); }
.severity-low[b-ob9347ikif] { background: rgba(107,114,128,0.1); color: var(--severity-low); border: 1px solid rgba(107,114,128,0.2); }

/* Age highlighting */
.defects-age-warning[b-ob9347ikif] {
    color: var(--severity-high);
    font-weight: 600;
}

.defects-age-critical[b-ob9347ikif] {
    color: var(--severity-critical);
    font-weight: 700;
}

/* Assignee has gone > 3 days without commenting */
.defects-comment-overdue[b-ob9347ikif] {
    color: var(--severity-critical);
    font-weight: 700;
}

@media (prefers-reduced-motion: no-preference) {
    .defects-age-critical[b-ob9347ikif] {
        animation: pulse-red-b-ob9347ikif 2s infinite;
    }
}

@keyframes pulse-red-b-ob9347ikif {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ─── Skeleton Loading ───────────────────────────────────────────────── */
.defects-skeleton[b-ob9347ikif] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.skeleton-bar[b-ob9347ikif] {
    background: linear-gradient(90deg, var(--surface-inset) 25%, var(--surface-highlight) 50%, var(--surface-inset) 75%);
    background-size: 200% 100%;
    border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: no-preference) {
    .skeleton-bar[b-ob9347ikif] {
        animation: skeletonShimmer-b-ob9347ikif 1.5s ease infinite;
    }
}

@keyframes skeletonShimmer-b-ob9347ikif {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-title[b-ob9347ikif] {
    height: 32px;
    width: 200px;
}

.skeleton-kpi-row[b-ob9347ikif] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.skeleton-kpi-item[b-ob9347ikif] {
    height: 88px;
    border-radius: var(--radius-lg);
}

.skeleton-charts-row[b-ob9347ikif] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.skeleton-chart[b-ob9347ikif] {
    height: 200px;
    border-radius: var(--radius-lg);
}

.skeleton-table-area[b-ob9347ikif] {
    height: 300px;
    border-radius: var(--radius-lg);
}

.defects-error[b-ob9347ikif] {
    padding: 16px 20px;
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    border-radius: var(--radius-md);
    color: var(--status-error);
    font-size: 13px;
}

.defects-no-results[b-ob9347ikif] {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .defects-charts[b-ob9347ikif] {
        grid-template-columns: 1fr;
    }
    .defects-chart-wide[b-ob9347ikif] {
        grid-column: auto;
    }
}

@media (max-width: 768px) {
    .defects-kpi-strip[b-ob9347ikif] {
        grid-template-columns: repeat(3, 1fr);
    }
    .defects-assignee-label[b-ob9347ikif] {
        width: 70px;
    }
}

/* ─── Chart hover dots ───────────────────────────────────────────────── */
.trend-hover-dot[b-ob9347ikif] {
    transition: r 150ms ease, fill 150ms ease, stroke 150ms ease;
    cursor: pointer;
}

.trend-hover-dot:hover[b-ob9347ikif] {
    r: 4;
    fill: var(--brand-teal);
    stroke: var(--surface-card);
    stroke-width: 2;
}
.export-btn[b-ob9347ikif] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}

.export-btn:hover[b-ob9347ikif] {
    border-color: var(--brand-teal);
    color: var(--brand-teal);
    background: var(--surface-highlight);
}

.export-btn:active[b-ob9347ikif] {
    transform: scale(0.95);
}
/* /Pages/Delivery.razor.rz.scp.css */
/* ══════════════════════════════════════════════════════════════
   Streams — Grouped delivery views with tabbed navigation
   ══════════════════════════════════════════════════════════════ */

/* ── Page layout ── */

.streams-page[b-flrdvbh22w] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1440px;
    margin: 0 auto;
}

.streams-result-count[b-flrdvbh22w] {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.streams-btn[b-flrdvbh22w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-card);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.streams-btn:hover:not(:disabled)[b-flrdvbh22w] {
    background: var(--surface-highlight);
    border-color: var(--brand-teal);
}

.streams-btn:disabled[b-flrdvbh22w] {
    opacity: 0.4;
    cursor: not-allowed;
}

.streams-btn-icon svg[b-flrdvbh22w] {
    flex-shrink: 0;
}

.streams-btn-primary[b-flrdvbh22w] {
    background: var(--brand-teal);
    color: var(--text-inverse);
    border-color: var(--brand-teal);
}

.streams-btn-primary:hover[b-flrdvbh22w] {
    opacity: 0.9;
}

/* ── Exec Dashboard Strip ── */

.exec-strip[b-flrdvbh22w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.exec-kpi[b-flrdvbh22w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 96px;
    padding: 16px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-xs);
    transition: all 0.15s ease;
}

button.exec-kpi[b-flrdvbh22w] {
    cursor: pointer;
}

button.exec-kpi:hover[b-flrdvbh22w] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--brand-teal-20);
}

.streams-error[b-flrdvbh22w] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.streams-error strong[b-flrdvbh22w] {
    color: var(--text-primary);
}

.exec-kpi-active[b-flrdvbh22w] {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 2px var(--brand-teal-20);
    transform: translateY(-1px);
}

.exec-kpi-value[b-flrdvbh22w] {
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--text-primary);
}

.exec-kpi-label[b-flrdvbh22w] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.exec-kpi-subvalue[b-flrdvbh22w] {
    font-size: 0.68rem;
    color: var(--text-muted);
    font-weight: 500;
}

.exec-kpi-success .exec-kpi-value[b-flrdvbh22w] { color: var(--rag-green); }
.exec-kpi-warning .exec-kpi-value[b-flrdvbh22w] { color: var(--rag-amber); }
.exec-kpi-danger .exec-kpi-value[b-flrdvbh22w] { color: var(--severity-critical); }
.exec-kpi-overdue .exec-kpi-value[b-flrdvbh22w] { color: var(--severity-ageing); }
.exec-kpi-muted .exec-kpi-value[b-flrdvbh22w] { color: var(--severity-low); }

/* ── Health Bar ── */

.exec-health-bar[b-flrdvbh22w] {
    display: flex;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    background: var(--surface-inset);
}

.exec-health-segment[b-flrdvbh22w] {
    transition: width 0.3s ease;
}

.exec-health-green[b-flrdvbh22w] { background: var(--rag-green); }
.exec-health-amber[b-flrdvbh22w] { background: var(--rag-amber); }
.exec-health-red[b-flrdvbh22w] { background: var(--rag-red); }
.exec-health-none[b-flrdvbh22w] { background: var(--border-default); }

.exec-health-labels[b-flrdvbh22w] {
    display: flex;
    margin-top: 4px;
}

.health-label[b-flrdvbh22w] {
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    color: var(--text-muted);
}

.health-label-green[b-flrdvbh22w] { color: var(--rag-green); }
.health-label-amber[b-flrdvbh22w] { color: var(--rag-amber); }
.health-label-red[b-flrdvbh22w] { color: var(--severity-critical); }
.health-label-none[b-flrdvbh22w] { color: var(--severity-low); }

/* ── State Scope Filter ── */

.state-filter-panel[b-flrdvbh22w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 4px 0 2px;
}

.state-filter-copy[b-flrdvbh22w] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.state-filter-eyebrow[b-flrdvbh22w] {
    color: var(--brand-teal);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.state-filter-title[b-flrdvbh22w] {
    color: var(--text-primary);
    font-size: 0.84rem;
    font-weight: 650;
}

.filter-pills[b-flrdvbh22w] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.filter-pill[b-flrdvbh22w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-card);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.filter-pill:hover[b-flrdvbh22w] {
    background: var(--surface-highlight);
    border-color: var(--brand-teal);
}

.filter-pill-active[b-flrdvbh22w] {
    background: var(--brand-teal);
    color: var(--text-inverse);
    border-color: var(--brand-teal);
}

.filter-pill-active:hover[b-flrdvbh22w] {
    opacity: 0.9;
    background: var(--brand-teal);
}

.filter-pill-count[b-flrdvbh22w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--brand-teal-08);
    font-size: 0.65rem;
    font-weight: 600;
}

.filter-pill-active .filter-pill-count[b-flrdvbh22w] {
    background: var(--brand-teal-20);
}

/* ── Table Toolbar ── */

.table-toolbar[b-flrdvbh22w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.table-toolbar-label[b-flrdvbh22w] {
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.filter-search[b-flrdvbh22w] {
    position: relative;
    flex: 0 1 280px;
    min-width: 180px;
}

.filter-search-icon[b-flrdvbh22w] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.filter-search-input[b-flrdvbh22w] {
    width: 100%;
    padding: 7px 12px 7px 32px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-card);
    font-size: 0.8rem;
    color: var(--text-primary);
    transition: border-color 0.15s ease;
}

.filter-search-input:focus[b-flrdvbh22w] {
    outline: none;
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 2px var(--brand-teal-10);
}

.filter-search-input[b-flrdvbh22w]::placeholder {
    color: var(--text-muted);
}

.role-filter-panel[b-flrdvbh22w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 2px 0 4px;
}

.role-filter-copy[b-flrdvbh22w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 180px;
}

.role-filter-help[b-flrdvbh22w] {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.commitment-controls[b-flrdvbh22w] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 2px 0 4px;
}

.commitment-control-group[b-flrdvbh22w] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.commitment-state-filter[b-flrdvbh22w] {
    flex: 1 1 420px;
    min-width: 280px;
}

/* ── View Tabs ── */

.level-toggle[b-flrdvbh22w] {
    display: inline-flex;
    align-self: flex-start;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-inset);
}

.level-toggle-button[b-flrdvbh22w] {
    padding: 7px 14px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 650;
    cursor: pointer;
    transition: all 0.15s ease;
}

.level-toggle-button:hover[b-flrdvbh22w] {
    color: var(--text-primary);
}

.level-toggle-active[b-flrdvbh22w] {
    background: var(--surface-card);
    color: var(--brand-teal);
    box-shadow: var(--shadow-xs);
}

.view-tabs[b-flrdvbh22w] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-default);
    padding-bottom: 0;
}

.view-tab[b-flrdvbh22w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.view-tab:hover[b-flrdvbh22w] {
    color: var(--text-primary);
}

.view-tab-active[b-flrdvbh22w] {
    color: var(--brand-teal);
    border-bottom-color: var(--brand-teal);
}

.view-tab svg[b-flrdvbh22w] {
    flex-shrink: 0;
}

/* ── Data Table ── */

.table-container[b-flrdvbh22w] {
    overflow-x: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-card);
    box-shadow: var(--shadow-xs);
}

.data-table[b-flrdvbh22w] {
    width: 100%;
    min-width: 1230px;
    border-collapse: collapse;
    font-size: 0.8rem;
}

/* ── Column Headers ── */

.table-thead[b-flrdvbh22w] {
    position: sticky;
    top: 0;
    z-index: 20;
}

.table-th[b-flrdvbh22w] {
    padding: 10px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--surface-inset);
    border-bottom: 1px solid var(--border-default);
    user-select: none;
    white-space: nowrap;
    transition:
        color 0.15s ease,
        background 0.15s ease;
}

.table-th:hover[b-flrdvbh22w] {
    color: var(--text-primary);
    background: var(--surface-highlight);
}

.table-th-button[b-flrdvbh22w] {
    display: inline-flex;
    align-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.table-th-button:focus-visible[b-flrdvbh22w] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 3px;
    border-radius: var(--radius-xs, 4px);
}

.table-th-content[b-flrdvbh22w] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.table-th-status[b-flrdvbh22w] { width: 90px; }
.table-th-feature[b-flrdvbh22w] { width: auto; }
.table-th-parent[b-flrdvbh22w] { width: 220px; }
.table-th-owner[b-flrdvbh22w] { width: 190px; }
.table-th-state[b-flrdvbh22w] { width: 140px; }
.table-th-date[b-flrdvbh22w] { width: 130px; }
.table-th-progress[b-flrdvbh22w] { width: 150px; }

/* ── Group Header Rows ── */

.group-header-row[b-flrdvbh22w] {
    background: linear-gradient(
        90deg,
        var(--surface-inset) 0%,
        var(--surface-card) 100%
    );
    border-top: 1px solid var(--border-default);
    border-bottom: 1px solid var(--border-default);
}

.group-header-row:first-child[b-flrdvbh22w] {
    border-top: none;
}

.group-header-row td[b-flrdvbh22w] {
    padding: 12px 16px;
}

.group-header[b-flrdvbh22w] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 28px;
}

.group-name[b-flrdvbh22w] {
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.group-team-badge[b-flrdvbh22w] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 6px);
    background: var(--brand-teal-10);
    color: var(--brand-teal);
    font-size: 0.65rem;
    font-weight: 600;
}

.group-role-badge[b-flrdvbh22w] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-inset);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
}

.group-meta[b-flrdvbh22w] {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* ── Sub-Header (Per Team engineer rows) ── */

.sub-header-row[b-flrdvbh22w] {
    background: var(--surface-card);
    border-top: 1px solid var(--border-default);
}

.sub-header-row td[b-flrdvbh22w] {
    padding: 8px 16px 8px 40px;
}

.sub-header[b-flrdvbh22w] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sub-header-name[b-flrdvbh22w] {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ── Work Item Rows ── */

.feature-row[b-flrdvbh22w] {
    border-top: 1px solid var(--border-default);
    transition: background 0.15s ease;
}

.feature-row:nth-child(even of .feature-row)[b-flrdvbh22w] {
    background: transparent;
}

.feature-row:hover[b-flrdvbh22w] {
    background: var(--surface-highlight);
}

.feature-row-nested td:first-child[b-flrdvbh22w] {
    padding-left: 48px;
}

.feature-row-overdue[b-flrdvbh22w] {
    background: var(--status-error-bg);
}

.feature-row-overdue:hover[b-flrdvbh22w] {
    background: var(--status-error-bg);
}

.epic-row[b-flrdvbh22w] {
    background: var(--surface-card);
}

.table-td[b-flrdvbh22w] {
    padding: 10px 16px;
    vertical-align: middle;
    color: var(--text-primary);
}

.table-td-feature[b-flrdvbh22w] {
    max-width: 0;
    width: 100%;
}

.table-td-feature a[b-flrdvbh22w] {
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition:
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.table-td-feature a:hover[b-flrdvbh22w] {
    color: var(--brand-teal);
    text-decoration: none;
}

.table-td-feature a:focus-visible[b-flrdvbh22w] {
    outline: none;
    color: var(--brand-teal);
    box-shadow: 0 2px 0 0 var(--brand-teal);
}

.epic-title-cell[b-flrdvbh22w] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.epic-expand-button[b-flrdvbh22w] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--surface-card);
    color: var(--text-muted);
    cursor: pointer;
}

.epic-expand-button:hover[b-flrdvbh22w] {
    border-color: var(--brand-teal);
    color: var(--brand-teal);
}

.epic-expand-chevron[b-flrdvbh22w] {
    font-size: 0.75rem;
    line-height: 1;
}

.epic-no-link[b-flrdvbh22w] {
    font-weight: 700;
    color: var(--text-primary);
}

.table-td-parent[b-flrdvbh22w] {
    min-width: 220px;
    max-width: 300px;
}

.table-td-parent[b-flrdvbh22w]  .epic-link {
    display: block;
    max-width: 100%;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition:
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.table-td-parent[b-flrdvbh22w]  .epic-link:hover {
    color: var(--brand-teal);
    text-decoration: none !important;
}

.table-td-parent[b-flrdvbh22w]  .epic-link:focus-visible {
    outline: none;
    color: var(--brand-teal);
    box-shadow: 0 2px 0 0 var(--brand-teal);
}

.epic-missing[b-flrdvbh22w] {
    color: var(--text-muted);
    font-size: 0.75rem;
    font-style: normal;
}

.table-td-owner[b-flrdvbh22w] {
    min-width: 180px;
}

.owner-cell[b-flrdvbh22w] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.owner-name[b-flrdvbh22w] {
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

.owner-team[b-flrdvbh22w] {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.table-td-date[b-flrdvbh22w] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.eng-date-cell[b-flrdvbh22w] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.date-alert-tag[b-flrdvbh22w] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid var(--status-warning-border);
    border-radius: 999px;
    background: var(--status-warning-bg);
    color: var(--rag-amber);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.table-td-progress[b-flrdvbh22w] {
    min-width: 140px;
}

.progress-cell[b-flrdvbh22w] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 0.72rem;
    font-weight: 600;
}

.progress-track[b-flrdvbh22w] {
    width: 100%;
    height: 5px;
    border-radius: 999px;
    background: var(--surface-inset);
    overflow: hidden;
}

.progress-fill[b-flrdvbh22w] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-teal);
}

.td-overdue[b-flrdvbh22w] {
    color: var(--severity-critical);
    font-weight: 600;
}

.td-missing-eng-target[b-flrdvbh22w] {
    color: var(--rag-amber);
    font-weight: 600;
}

/* ── Status Pill ── */

.status-pill[b-flrdvbh22w] {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.status-pill-green[b-flrdvbh22w] {
    background: var(--status-success-bg);
    color: var(--rag-green);
}

.status-pill-amber[b-flrdvbh22w] {
    background: var(--status-warning-bg);
    color: var(--rag-amber);
}

.status-pill-red[b-flrdvbh22w] {
    background: var(--status-error-bg);
    color: var(--severity-critical);
}

.status-pill-none[b-flrdvbh22w] {
    background: var(--surface-inset);
    color: var(--text-muted);
    border: 1px solid var(--border-default);
}

/* ── State Badge ── */

.state-badge[b-flrdvbh22w] {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-inset);
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.epic-children-row td[b-flrdvbh22w] {
    padding: 0;
    background: var(--surface-inset);
}

.epic-child-list[b-flrdvbh22w] {
    display: flex;
    flex-direction: column;
    padding: 8px 12px 8px 42px;
    gap: 4px;
}

.epic-child-item[b-flrdvbh22w] {
    display: grid;
    grid-template-columns: 86px minmax(220px, 1fr) 150px 120px 120px 120px;
    align-items: center;
    gap: 12px;
    padding: 6px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm, 6px);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-size: 0.74rem;
}

.epic-child-item a[b-flrdvbh22w] {
    color: var(--text-primary);
    font-weight: 600;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.epic-child-item a:hover[b-flrdvbh22w] {
    color: var(--brand-teal);
}

.epic-child-overdue[b-flrdvbh22w] {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
}

.epic-child-empty[b-flrdvbh22w] {
    padding: 14px 42px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

/* ── Loading / Error / Empty ── */

.streams-loading[b-flrdvbh22w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 64px 24px;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.streams-spinner[b-flrdvbh22w] {
    width: 20px;
    height: 20px;
    border: 2.5px solid var(--border-default);
    border-top-color: var(--brand-teal);
    border-radius: 50%;
    animation: spin-b-flrdvbh22w 0.8s linear infinite;
}

@keyframes spin-b-flrdvbh22w {
    to { transform: rotate(360deg); }
}

.streams-error[b-flrdvbh22w] {
    padding: 24px;
    text-align: center;
    color: var(--severity-critical);
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    border-radius: var(--radius-sm, 6px);
}

.streams-no-results[b-flrdvbh22w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--text-muted);
}

.streams-no-results p[b-flrdvbh22w] {
    margin: 0;
}

/* ── Responsive ── */

@media (max-width: 640px) {
    .streams-page[b-flrdvbh22w] {
        gap: 12px;
    }

    .exec-strip[b-flrdvbh22w] {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .exec-kpi[b-flrdvbh22w] {
        padding: 12px 8px;
    }

    .exec-kpi-value[b-flrdvbh22w] {
        font-size: 22px;
    }

    .filter-bar[b-flrdvbh22w] {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-search[b-flrdvbh22w] {
        flex: 1 1 100%;
    }

    .view-tabs[b-flrdvbh22w] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-th-state[b-flrdvbh22w],
    .table-td-state[b-flrdvbh22w] {
        display: none;
    }

    .table-td[b-flrdvbh22w] {
        padding: 8px 10px;
    }

    .group-header-row td[b-flrdvbh22w] {
        padding: 8px 10px;
    }
}
/* Compact grid density */
.density-compact .table-td[b-flrdvbh22w],
.density-compact .feature-row td[b-flrdvbh22w] {
    padding: 5px 12px;
    font-size: 0.75rem;
}

.density-compact .group-header-row td[b-flrdvbh22w],
.density-compact .sub-header-row td[b-flrdvbh22w] {
    padding: 6px 12px;
}
/* /Pages/FlowFramework.razor.rz.scp.css */
/* ─── Flow Framework Page Layout ────────────────────────────────────── */
.flow-page[b-ectuyzpqll] {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1440px;
	margin: 0 auto;
}

/* ─── KPI Strip ──────────────────────────────────────────────────────── */
.flow-kpi-strip[b-ectuyzpqll] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
}

.flow-kpi[b-ectuyzpqll] {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: 16px 12px;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	text-align: center;
}

.flow-kpi-value[b-ectuyzpqll] {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.1;
}

.flow-kpi-pct[b-ectuyzpqll] {
	font-size: 13px;
	font-weight: 600;
	color: var(--text-muted);
}

.flow-kpi-label[b-ectuyzpqll] {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.flow-kpi-feature .flow-kpi-value[b-ectuyzpqll] { color: var(--brand-teal); }
.flow-kpi-feature[b-ectuyzpqll] { border-bottom: 3px solid var(--brand-teal); }

.flow-kpi-defect .flow-kpi-value[b-ectuyzpqll] { color: var(--severity-high); }
.flow-kpi-defect[b-ectuyzpqll] { border-bottom: 3px solid var(--severity-high); }

.flow-kpi-debt .flow-kpi-value[b-ectuyzpqll] { color: var(--severity-medium); }
.flow-kpi-debt[b-ectuyzpqll] { border-bottom: 3px solid var(--severity-medium); }

.flow-kpi-risk .flow-kpi-value[b-ectuyzpqll] { color: var(--severity-low); }
.flow-kpi-risk[b-ectuyzpqll] { border-bottom: 3px solid var(--severity-low); }

/* ─── Chart Card ─────────────────────────────────────────────────────── */
.flow-chart-card[b-ectuyzpqll] {
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	padding: 24px;
}

.flow-chart-title[b-ectuyzpqll] {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 20px;
}

/* ─── Donut ──────────────────────────────────────────────────────────── */
.flow-donut-container[b-ectuyzpqll] {
	display: flex;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.flow-donut[b-ectuyzpqll] {
	width: 160px;
	height: 160px;
	flex-shrink: 0;
}

.flow-donut-legend[b-ectuyzpqll] {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.flow-legend-item[b-ectuyzpqll] {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--text-secondary);
}

.flow-legend-dot[b-ectuyzpqll] {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	flex-shrink: 0;
}

.flow-legend-total[b-ectuyzpqll] {
	font-size: 12px;
	font-weight: 600;
	color: var(--text-muted);
	margin-top: 4px;
	padding-top: 8px;
	border-top: 1px solid var(--border-subtle);
}

/* ─── Caveat ─────────────────────────────────────────────────────────── */
.flow-caveat[b-ectuyzpqll] {
	margin-top: 20px;
	font-size: 12px;
	color: var(--text-muted);
	line-height: 1.5;
	border-top: 1px solid var(--border-subtle);
	padding-top: 14px;
}

.flow-caveat code[b-ectuyzpqll] {
	font-size: 11px;
	background: var(--surface-inset);
	padding: 1px 5px;
	border-radius: 3px;
}

/* ─── Loading / Error ────────────────────────────────────────────────── */
.flow-skeleton[b-ectuyzpqll] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.flow-skeleton-kpi[b-ectuyzpqll] {
	height: 88px;
	border-radius: var(--radius-lg);
}

.skeleton-bar[b-ectuyzpqll] {
	background: linear-gradient(90deg, var(--surface-inset) 25%, var(--surface-highlight) 50%, var(--surface-inset) 75%);
	background-size: 200% 100%;
	border-radius: var(--radius-md);
}

@media (prefers-reduced-motion: no-preference) {
	.skeleton-bar[b-ectuyzpqll] {
		animation: skeletonShimmer-b-ectuyzpqll 1.5s ease infinite;
	}
}

@keyframes skeletonShimmer-b-ectuyzpqll {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.flow-error[b-ectuyzpqll] {
	padding: 16px 20px;
	background: var(--status-error-bg);
	border: 1px solid var(--status-error-border);
	border-radius: var(--radius-md);
	color: var(--status-error);
	font-size: 13px;
}

/* ─── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.flow-kpi-strip[b-ectuyzpqll] {
		grid-template-columns: repeat(2, 1fr);
	}

	.flow-donut-container[b-ectuyzpqll] {
		flex-direction: column;
		align-items: flex-start;
	}
}
/* /Pages/Initiatives.razor.rz.scp.css */
.initiatives-page[b-8bz77t1cm2] {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
}

.initiatives-toolbar[b-8bz77t1cm2] {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.initiatives-count[b-8bz77t1cm2] {
	color: var(--text-secondary);
	font-size: .9rem;
}

.initiatives-btn[b-8bz77t1cm2] {
	border: 1px solid var(--border-default);
	background: var(--surface-card);
	color: var(--text-primary);
	border-radius: .5rem;
	padding: .5rem .8rem;
	cursor: pointer;
}

.initiatives-btn:disabled[b-8bz77t1cm2] {
	opacity: .45;
	cursor: not-allowed;
}

.initiatives-btn.primary[b-8bz77t1cm2] {
	background: var(--brand-teal);
	color: white;
}

.initiatives-loading[b-8bz77t1cm2] {
	display: flex;
	gap: .75rem;
	align-items: center;
	padding: 2rem;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: 1rem;
	color: var(--text-secondary);
}

.initiatives-empty-state[b-8bz77t1cm2] {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	align-items: flex-start;
	padding: 1.5rem;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xs);
	color: var(--text-secondary);
}

.initiatives-empty-state h2[b-8bz77t1cm2] {
	margin: 0;
	color: var(--text-primary);
	font-size: 1.05rem;
}

.initiatives-empty-state p[b-8bz77t1cm2] {
	margin: 0;
	max-width: 64rem;
}

.active-filters[b-8bz77t1cm2] {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	color: var(--text-secondary);
	font-size: .85rem;
}

.active-filters strong[b-8bz77t1cm2] {
	border: 1px solid var(--border-default);
	border-radius: 999px;
	background: var(--surface-inset);
	color: var(--text-primary);
	padding: .2rem .55rem;
	font-weight: 600;
}

.initiatives-kpis[b-8bz77t1cm2] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
	gap: .85rem;
}

.initiatives-charts[b-8bz77t1cm2] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	align-items: stretch;
}

.initiative-kpi[b-8bz77t1cm2],
.initiatives-chart-card[b-8bz77t1cm2],
.timeline-group[b-8bz77t1cm2],
.gantt-view[b-8bz77t1cm2],
.gantt-no-target[b-8bz77t1cm2] {
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: 1rem;
	box-shadow: var(--shadow-sm);
}

.initiative-kpi[b-8bz77t1cm2] {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	text-align: left;
	padding: 1rem;
	cursor: pointer;
	color: var(--text-primary);
	font: inherit;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.initiative-kpi:hover:not(:disabled)[b-8bz77t1cm2] {
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
	border-color: var(--brand-teal-20);
}

.initiative-kpi.active[b-8bz77t1cm2] {
	outline: 2px solid var(--brand-teal);
	outline-offset: 2px;
	background: var(--surface-inset);
}

.initiative-kpi span[b-8bz77t1cm2] {
	display: block;
	font-size: 1.8rem;
	font-weight: 700;
}

.initiative-kpi small[b-8bz77t1cm2] {
	color: var(--text-secondary);
}

.initiative-kpi.danger span[b-8bz77t1cm2] {
	color: #dc2626;
}

.initiative-kpi.warning span[b-8bz77t1cm2] {
	color: #d97706;
}

.initiative-kpi.muted span[b-8bz77t1cm2] {
	color: var(--text-secondary);
}

.initiatives-chart-card[b-8bz77t1cm2] {
	display: flex;
	flex-direction: column;
	gap: .65rem;
	padding: 1rem;
	min-width: 0;
}

.initiatives-chart-card h3[b-8bz77t1cm2],
.timeline-group h2[b-8bz77t1cm2],
.gantt-no-target h2[b-8bz77t1cm2] {
	margin: 0 0 .75rem;
	font-size: .95rem;
	color: var(--text-primary);
}

.chart-row[b-8bz77t1cm2] {
	display: grid;
	grid-template-columns: minmax(96px, 1fr) minmax(120px, 2fr) auto;
	align-items: center;
	gap: .6rem;
	font-size: .85rem;
}

.chart-row span[b-8bz77t1cm2] {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.chart-track[b-8bz77t1cm2],
.gantt-track[b-8bz77t1cm2] {
	position: relative;
	height: .55rem;
	border-radius: 999px;
	background: var(--surface-inset);
	overflow: hidden;
}

.chart-fill[b-8bz77t1cm2] {
	height: 100%;
	border-radius: inherit;
	background: var(--brand-teal);
}

.initiatives-toolbar[b-8bz77t1cm2] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	align-items: end;
	padding: 1rem;
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: 1rem;
	box-shadow: var(--shadow-xs);
}

.filter-field[b-8bz77t1cm2] {
	display: flex;
	flex-direction: column;
	gap: .25rem;
	min-width: 150px;
	flex: 1;
	color: var(--text-secondary);
	font-size: .8rem;
}

.filter-field:first-child[b-8bz77t1cm2] {
	min-width: min(100%, 260px);
}

.filter-field input[b-8bz77t1cm2],
.filter-field select[b-8bz77t1cm2] {
	border: 1px solid var(--border-default);
	border-radius: .5rem;
	background: var(--surface-page);
	color: var(--text-primary);
	padding: .55rem .65rem;
}

.include-closed[b-8bz77t1cm2] {
	display: flex;
	gap: .4rem;
	align-items: center;
	color: var(--text-secondary);
	min-height: 2.55rem;
	font-weight: 600;
}

.view-tabs[b-8bz77t1cm2] {
	display: flex;
	gap: .25rem;
	border-bottom: 1px solid var(--border-default);
	overflow-x: auto;
}

.view-tab[b-8bz77t1cm2] {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-bottom: -1px;
	padding: .7rem 1rem;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	color: var(--text-muted);
	font: inherit;
	font-size: .85rem;
	font-weight: 700;
	cursor: pointer;
}

.view-tab:hover[b-8bz77t1cm2] {
	color: var(--text-primary);
}

.view-tab-active[b-8bz77t1cm2] {
	color: var(--brand-teal);
	border-bottom-color: var(--brand-teal);
}

.initiatives-table-wrap[b-8bz77t1cm2] {
	overflow-x: auto;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
	box-shadow: var(--shadow-xs);
}

.initiatives-table[b-8bz77t1cm2] {
	width: 100%;
	min-width: 1080px;
	border-collapse: collapse;
	font-size: .82rem;
}

.initiatives-table th[b-8bz77t1cm2],
.initiatives-table td[b-8bz77t1cm2] {
	vertical-align: top;
	padding: .75rem .9rem;
	border-bottom: 1px solid var(--border-default);
	text-align: left;
}

.initiatives-table th[b-8bz77t1cm2] {
	background: var(--surface-inset);
	color: var(--text-muted);
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

.initiatives-table tbody tr:hover:not(.description-row) td[b-8bz77t1cm2] {
	background: var(--surface-highlight);
}

.initiatives-table tbody tr:last-child td[b-8bz77t1cm2] {
	border-bottom: 0;
}

.closed-row[b-8bz77t1cm2] {
	opacity: .55;
}

.blocked-row td:first-child[b-8bz77t1cm2] {
	box-shadow: inset 3px 0 #dc2626;
}

.paused-row td:first-child[b-8bz77t1cm2] {
	box-shadow: inset 3px 0 #d97706;
}

.initiative-link[b-8bz77t1cm2] {
	font-weight: 600;
	color: var(--brand-teal);
	text-decoration: none;
}

.expand-btn[b-8bz77t1cm2] {
	width: 1.8rem;
	height: 1.8rem;
	border: 1px solid var(--border-default);
	border-radius: .45rem;
	background: var(--surface-page);
	color: var(--text-primary);
	cursor: pointer;
}

.status-chip[b-8bz77t1cm2] {
	display: inline-flex;
	align-items: center;
	border-radius: 999px;
	background: var(--surface-inset);
	color: var(--text-primary);
	padding: .15rem .5rem;
	font-size: .75rem;
	font-weight: 600;
	margin-left: .25rem;
}

.risk-chip-list[b-8bz77t1cm2] {
	display: inline-flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-left: .35rem;
}

.risk-chip-list .status-chip[b-8bz77t1cm2] {
	margin-left: 0;
}

.status-chip.blocked[b-8bz77t1cm2],
.status-chip.overdue[b-8bz77t1cm2] {
	background: #fee2e2;
	color: #991b1b;
}

.status-chip.paused[b-8bz77t1cm2] {
	background: #fef3c7;
	color: #92400e;
}

.status-chip.muted[b-8bz77t1cm2] {
	background: var(--surface-inset);
	color: var(--text-muted);
}

.tag-list[b-8bz77t1cm2] {
	display: flex;
	gap: .3rem;
	flex-wrap: wrap;
}

.tag-pill[b-8bz77t1cm2] {
	border-radius: 999px;
	background: rgba(70, 181, 157, .12);
	color: var(--brand-teal);
	padding: .1rem .45rem;
	font-size: .72rem;
}

.description-row td[b-8bz77t1cm2] {
	background: var(--surface-inset);
	border-top: 0;
}

.initiative-description[b-8bz77t1cm2] {
	max-width: 70rem;
	color: var(--text-primary);
	line-height: 1.5;
}

.initiative-description[b-8bz77t1cm2]  a {
	color: var(--brand-teal);
}

.timeline-view[b-8bz77t1cm2] {
	display: grid;
	gap: 1rem;
}

.timeline-group[b-8bz77t1cm2] {
	padding: 1rem;
}

.timeline-card[b-8bz77t1cm2] {
	border-left: 3px solid var(--brand-teal);
	padding: .5rem 0 .5rem .75rem;
	margin: .5rem 0;
}

.timeline-card a[b-8bz77t1cm2],
.gantt-row a[b-8bz77t1cm2],
.gantt-no-target a[b-8bz77t1cm2] {
	color: var(--brand-teal);
	font-weight: 600;
	text-decoration: none;
}

.timeline-card p[b-8bz77t1cm2] {
	margin: .3rem 0;
	color: var(--text-secondary);
	font-size: .85rem;
}

.gantt-view[b-8bz77t1cm2] {
	padding: 1rem;
	display: grid;
	gap: .75rem;
}

.gantt-legend[b-8bz77t1cm2] {
	display: flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
	color: var(--text-secondary);
	font-size: .85rem;
}

.gantt-legend i[b-8bz77t1cm2] {
	display: inline-block;
	vertical-align: middle;
	margin-right: .25rem;
}

.gantt-legend-bar[b-8bz77t1cm2] {
	width: 1.4rem;
	height: .45rem;
	border-radius: 999px;
	background: var(--brand-teal);
}

.gantt-legend-milestone[b-8bz77t1cm2] {
	width: .55rem;
	height: .55rem;
	border-radius: .12rem;
	background: var(--brand-teal);
	transform: rotate(45deg);
}

.gantt-legend-today[b-8bz77t1cm2],
.gantt-today[b-8bz77t1cm2] {
	width: 2px;
	height: .8rem;
	background: var(--rag-red);
}

.gantt-row[b-8bz77t1cm2] {
	display: grid;
	grid-template-columns: minmax(180px, 28%) 1fr;
	gap: 1rem;
	align-items: center;
}

.gantt-row p[b-8bz77t1cm2] {
	margin: .25rem 0 0;
	color: var(--text-secondary);
	font-size: .8rem;
}

.gantt-bar[b-8bz77t1cm2],
.gantt-milestone[b-8bz77t1cm2] {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--brand-teal);
	border-radius: 999px;
	min-width: .6rem;
}

.gantt-today[b-8bz77t1cm2] {
	position: absolute;
	top: 0;
	bottom: 0;
	height: auto;
	z-index: 1;
}

.gantt-milestone[b-8bz77t1cm2] {
	width: .75rem !important;
	transform: rotate(45deg);
	border-radius: .15rem;
}

.gantt-no-target[b-8bz77t1cm2] {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.gantt-unscheduled-item[b-8bz77t1cm2] {
	display: flex;
	flex-direction: column;
	gap: .1rem;
}

.gantt-unscheduled-item span[b-8bz77t1cm2] {
	color: var(--text-secondary);
	font-size: .8rem;
}

@media (max-width: 900px) {
	.initiatives-page[b-8bz77t1cm2] {
		gap: 1rem;
	}

	.initiatives-charts[b-8bz77t1cm2] {
		grid-template-columns: 1fr;
	}

	.gantt-row[b-8bz77t1cm2] {
		grid-template-columns: 1fr;
		align-items: stretch;
	}
}
/* /Pages/K6Performance.razor.rz.scp.css */
.k6-page[b-uyu7c3bgrr] {
    max-width: 1400px;
}

/* ── Banner ────────────────────────────────────────────────────────────── */

.k6-banner[b-uyu7c3bgrr] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.k6-banner h2[b-uyu7c3bgrr] { font-size: 1.125rem; font-weight: 600; margin: 0.25rem 0 0.5rem; }
.k6-banner p[b-uyu7c3bgrr] { color: var(--text-secondary); margin: 0; line-height: 1.5; }
.k6-banner code[b-uyu7c3bgrr] {
    background: var(--surface-highlight);
    border-radius: 4px;
    padding: 0.1rem 0.35rem;
    font-size: 0.8125rem;
}

.k6-banner-icon[b-uyu7c3bgrr] {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em;
    background: var(--brand-teal-20); color: var(--brand-teal);
}

.k6-warning .k6-banner-icon[b-uyu7c3bgrr] { background: var(--severity-high); color: #fff; }

.k6-retry-btn[b-uyu7c3bgrr] {
    margin-top: 0.75rem; padding: 0.5rem 1rem; border-radius: var(--radius-lg);
    border: 1px solid var(--border-default); background: var(--surface-card);
    color: inherit; cursor: pointer; font-size: 0.875rem;
    transition: background var(--transition-fast);
}
.k6-retry-btn:hover[b-uyu7c3bgrr] { background: var(--surface-highlight); }

/* ── KPI strip ─────────────────────────────────────────────────────────── */

.k6-kpi-row[b-uyu7c3bgrr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.k6-kpi-card[b-uyu7c3bgrr] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.k6-kpi-label[b-uyu7c3bgrr] {
    font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-secondary);
}

.k6-kpi-value[b-uyu7c3bgrr] { font-size: 1.75rem; font-weight: 700; line-height: 1; color: var(--brand-teal); }
.k6-kpi-value-sm[b-uyu7c3bgrr] { font-size: 1.125rem; }

/* ── Tab bar ───────────────────────────────────────────────────────────── */

.k6-tab-bar[b-uyu7c3bgrr] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-default);
    overflow-x: auto;
    margin-bottom: 1.25rem;
}

.k6-tab[b-uyu7c3bgrr] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 10px 16px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.k6-tab:hover[b-uyu7c3bgrr] { color: var(--text-secondary); }

.k6-tab-active[b-uyu7c3bgrr] {
    color: var(--brand-teal);
    border-bottom-color: var(--brand-teal);
}

.k6-tabpanel[b-uyu7c3bgrr] { display: flex; flex-direction: column; gap: 1.25rem; }

.k6-subheader[b-uyu7c3bgrr] { color: var(--text-secondary); margin: 0; font-size: 0.875rem; }

/* ── App health tiles ──────────────────────────────────────────────────── */

.k6-apphealth-row[b-uyu7c3bgrr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.k6-apphealth-tile[b-uyu7c3bgrr] {
    background: var(--surface-highlight);
    border-radius: 8px;
    padding: 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.k6-apphealth-metric[b-uyu7c3bgrr] {
    font-size: 0.75rem; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--text-secondary);
}

.k6-apphealth-value[b-uyu7c3bgrr] { font-size: 1.125rem; font-weight: 700; }
.k6-apphealth-detail[b-uyu7c3bgrr] { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.4; }

/* ── Tables ────────────────────────────────────────────────────────────── */

.k6-table-wrapper[b-uyu7c3bgrr] {
    overflow-x: auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    box-shadow: var(--shadow-xs);
}

.k6-table[b-uyu7c3bgrr] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.k6-table thead th[b-uyu7c3bgrr] {
    padding: 8px 12px;
    text-align: left;
    font-weight: 700;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: var(--surface-highlight);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

.k6-table tbody tr[b-uyu7c3bgrr] {
    border-top: 1px solid var(--border-default);
    transition: background var(--transition-fast);
}

.k6-table tbody tr:first-child[b-uyu7c3bgrr] { border-top: none; }
.k6-table tbody tr:hover[b-uyu7c3bgrr] { background: var(--surface-highlight); }

.k6-table tbody td[b-uyu7c3bgrr] {
    padding: 8px 12px;
    vertical-align: top;
    color: var(--text-primary);
}

.k6-col-num[b-uyu7c3bgrr] { text-align: right; font-variant-numeric: tabular-nums; }
.k6-col-users[b-uyu7c3bgrr] { font-weight: 600; font-variant-numeric: tabular-nums; }
.k6-col-notes[b-uyu7c3bgrr] { color: var(--text-secondary); max-width: 320px; }

.k6-row-breach[b-uyu7c3bgrr] { background: color-mix(in srgb, var(--severity-critical) 8%, transparent); }
.k6-p95-breach[b-uyu7c3bgrr] { color: var(--severity-critical); font-weight: 700; }

.k6-domain-name[b-uyu7c3bgrr] { font-weight: 600; }
.k6-domain-role[b-uyu7c3bgrr] { font-size: 0.75rem; color: var(--text-secondary); }

.k6-subcalls[b-uyu7c3bgrr] {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

/* ── Badges & pills ────────────────────────────────────────────────────── */

.k6-badge[b-uyu7c3bgrr], .k6-pill[b-uyu7c3bgrr] {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.k6-badge-pass[b-uyu7c3bgrr] { background: #dcfce7; color: #166534; }
.k6-badge-marginal[b-uyu7c3bgrr] { background: #fef3c7; color: #92400e; }
.k6-badge-compute-bound[b-uyu7c3bgrr] { background: #fee2e2; color: #991b1b; }
.k6-badge-neutral[b-uyu7c3bgrr] { background: var(--surface-highlight); color: var(--text-secondary); }

.k6-badge-flat[b-uyu7c3bgrr] { background: #dcfce7; color: #166534; }
.k6-badge-load_sensitive[b-uyu7c3bgrr] { background: #fef3c7; color: #92400e; }
.k6-badge-search_bound[b-uyu7c3bgrr] { background: #dbeafe; color: #1e40af; }

.k6-pill-verified-ceiling[b-uyu7c3bgrr] { background: #dcfce7; color: #166534; }
.k6-pill-first-breaches[b-uyu7c3bgrr] { background: #fef3c7; color: #92400e; }
.k6-pill-wall-removed[b-uyu7c3bgrr] { background: #dbeafe; color: #1e40af; }
.k6-pill-neutral[b-uyu7c3bgrr] { background: var(--surface-highlight); color: var(--text-secondary); }

.k6-legend[b-uyu7c3bgrr] { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0; }

/* ── Hypotheses ────────────────────────────────────────────────────────── */

.k6-section-heading[b-uyu7c3bgrr] { font-size: 1rem; font-weight: 600; margin: 0.5rem 0 0; }

.k6-hypotheses[b-uyu7c3bgrr] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.75rem;
}

.k6-hypothesis-card[b-uyu7c3bgrr] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1rem 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.k6-hypothesis-header[b-uyu7c3bgrr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.k6-hypothesis-n[b-uyu7c3bgrr] { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.k6-hypothesis-title[b-uyu7c3bgrr] { font-size: 0.9375rem; font-weight: 600; margin: 0; }
.k6-hypothesis-detail[b-uyu7c3bgrr] { font-size: 0.8125rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* ── Misc ──────────────────────────────────────────────────────────────── */

.k6-sla-note[b-uyu7c3bgrr] { font-size: 0.75rem; color: var(--text-secondary); margin: 0; }

.k6-not-exercised[b-uyu7c3bgrr] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    background: var(--surface-highlight);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    margin: 0;
}

.k6-report-link[b-uyu7c3bgrr] { margin-top: 0.5rem; }
.k6-report-link a[b-uyu7c3bgrr] { color: var(--brand-teal); font-weight: 600; text-decoration: none; }
.k6-report-link a:hover[b-uyu7c3bgrr] { text-decoration: underline; }
/* /Pages/Pipelines.razor.rz.scp.css */
.pipelines-page[b-z1oe4rde1q] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
}

/* D2/I2: period selector now lives in the trends header row */
.trends-section[b-z1oe4rde1q] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.trends-header[b-z1oe4rde1q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.trends-title[b-z1oe4rde1q] {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.period-selector[b-z1oe4rde1q] {
    display: flex;
    gap: 4px;
    border: 1px solid var(--border-default);
    border-radius: 4px;
    padding: 2px;
    background: var(--surface-inset);
}

.btn-period[b-z1oe4rde1q] {
    background: transparent;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-radius: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .btn-period[b-z1oe4rde1q] {
        transition: background-color 150ms, color 150ms;
    }
}

.btn-period:hover[b-z1oe4rde1q] {
    background: var(--surface-highlight);
    color: var(--text-primary);
}

.btn-period.active[b-z1oe4rde1q] {
    background: var(--brand-teal);
    color: var(--text-inverse);
}

/* D10/I3: KPI cards are now <button> elements */
.kpi-strip[b-z1oe4rde1q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
}

.kpi-card[b-z1oe4rde1q] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    width: 100%;
    box-shadow: var(--shadow-xs);
}

@media (prefers-reduced-motion: no-preference) {
    .kpi-card[b-z1oe4rde1q] {
        transition: border-color 200ms, box-shadow 200ms;
    }
}

.kpi-card:hover[b-z1oe4rde1q] {
    border-color: var(--brand-teal);
    box-shadow: 0 2px 8px var(--brand-teal-10);
}

.kpi-card.status-warning[b-z1oe4rde1q] {
    border-left: 4px solid var(--status-warning);
}

.kpi-card.status-error[b-z1oe4rde1q] {
    border-left: 4px solid var(--status-error);
}

.kpi-card.status-info[b-z1oe4rde1q] {
    border-left: 4px solid var(--status-info);
}

/* Active filter state */
.kpi-card.kpi-active[b-z1oe4rde1q] {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-teal) 25%, transparent);
}

.kpi-value[b-z1oe4rde1q] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.kpi-label[b-z1oe4rde1q] {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 6px;
}

.alerts-row[b-z1oe4rde1q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
}

.alert-card[b-z1oe4rde1q] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.alert-title[b-z1oe4rde1q] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.alert-title.status-error[b-z1oe4rde1q]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-error);
}

.alert-title.status-warning[b-z1oe4rde1q]::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--status-warning);
}

.alert-empty[b-z1oe4rde1q] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

.alert-list[b-z1oe4rde1q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* D11: transparent left border on base state prevents layout shift when overdue border appears */
.alert-row-item[b-z1oe4rde1q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 10px;
    background: var(--surface-inset);
    border-radius: 4px;
    border-left: 3px solid transparent;
    min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
    .alert-row-item[b-z1oe4rde1q] {
        transition: background-color 150ms;
    }
}

.alert-row-item:hover[b-z1oe4rde1q] {
    background: var(--surface-highlight);
}

.alert-row-item.alert-row-overdue[b-z1oe4rde1q] {
    border-left-color: var(--status-error);
    background: var(--status-error-bg);
}

@media (prefers-reduced-motion: no-preference) {
    .alert-row-item.alert-row-overdue[b-z1oe4rde1q] {
        animation: pulse-b-z1oe4rde1q 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }
}

@keyframes pulse-b-z1oe4rde1q {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

.alert-item-content[b-z1oe4rde1q] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.alert-item-name[b-z1oe4rde1q] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.alert-item-env[b-z1oe4rde1q],
.alert-item-duration[b-z1oe4rde1q] {
    font-size: 12px;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}

/* D9: btn-link — muted by default, teal on hover */
.btn-link[b-z1oe4rde1q] {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 16px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
}

@media (prefers-reduced-motion: no-preference) {
    .btn-link[b-z1oe4rde1q] {
        transition: color 150ms;
    }
}

.btn-link:hover[b-z1oe4rde1q] {
    color: var(--brand-teal);
    background: var(--surface-highlight);
}

.trends-row[b-z1oe4rde1q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
}

.trend-card[b-z1oe4rde1q] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.trend-title[b-z1oe4rde1q] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
}

.trend-empty[b-z1oe4rde1q] {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    font-style: italic;
}

/* I9: empty state with icon */
.empty-state[b-z1oe4rde1q] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.empty-icon[b-z1oe4rde1q] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.empty-icon--ok[b-z1oe4rde1q] {
    color: var(--status-success);
}

.empty-icon--neutral[b-z1oe4rde1q] {
    color: var(--text-muted);
}

.trend-list[b-z1oe4rde1q] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.trend-item[b-z1oe4rde1q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    background: var(--surface-inset);
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    min-width: 0;
}

/* I10: clickable trend items open the side panel */
.trend-item--clickable[b-z1oe4rde1q] {
    cursor: pointer;
}

.trend-item--clickable:hover[b-z1oe4rde1q] {
    background: var(--surface-highlight);
    border-color: var(--border-default);
}

.trend-item--clickable:focus-visible[b-z1oe4rde1q] {
    outline: 2px solid var(--brand-teal);
    outline-offset: -2px;
}

@media (prefers-reduced-motion: no-preference) {
    .trend-item--clickable[b-z1oe4rde1q] {
        transition: background 150ms, border-color 150ms;
    }
}

.trend-item-name[b-z1oe4rde1q] {
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
    line-height: 1.35;
}

.trend-item-badge[b-z1oe4rde1q],
.trend-item-duration[b-z1oe4rde1q] {
    padding: 2px 6px;
    background: var(--surface-highlight);
    border-radius: 3px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* I12: failure rate — colour comes from status class applied in template */
.trend-item-rate[b-z1oe4rde1q] {
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.trend-item-rate.status-error[b-z1oe4rde1q]   { background: color-mix(in srgb, var(--status-error)   15%, transparent); color: var(--status-error); }
.trend-item-rate.status-warning[b-z1oe4rde1q] { background: color-mix(in srgb, var(--status-warning) 15%, transparent); color: var(--status-warning); }
.trend-item-rate.status-success[b-z1oe4rde1q] { background: color-mix(in srgb, var(--status-success) 15%, transparent); color: var(--status-success); }

/* I12: delta — colour comes from status class applied in template */
.trend-item-delta[b-z1oe4rde1q] {
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.trend-item-delta.status-error[b-z1oe4rde1q]   { background: color-mix(in srgb, var(--status-error)   15%, transparent); color: var(--status-error); }
.trend-item-delta.status-success[b-z1oe4rde1q] { background: color-mix(in srgb, var(--status-success) 15%, transparent); color: var(--status-success); }

.pipelines-card[b-z1oe4rde1q] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 16px;
}

/* I13: protect definitions table from overflowing on narrow viewports */
.definitions-section[b-z1oe4rde1q] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.card-header[b-z1oe4rde1q] {
    margin-bottom: 12px;
}

.card-header h3[b-z1oe4rde1q] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.definitions-grid[b-z1oe4rde1q] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* D8: remove the border from the table itself; .pipelines-card already provides the outer border */
.pipelines-table[b-z1oe4rde1q] {
    width: 100%;
    min-width: 960px;
    table-layout: fixed;
    border-collapse: collapse;
    background: var(--surface-card);
    border-radius: 8px;
    overflow: hidden;
}

.pipelines-table thead[b-z1oe4rde1q] {
    background: var(--surface-inset);
}

.pipelines-table th[b-z1oe4rde1q] {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-default);
    vertical-align: top;
}

.pipelines-table td[b-z1oe4rde1q] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-default);
    font-size: 13px;
    vertical-align: top;
    line-height: 1.35;
}

@media (prefers-reduced-motion: no-preference) {
    .pipelines-table tbody tr[b-z1oe4rde1q] {
        transition: background-color 150ms;
    }
}

.pipeline-col-status[b-z1oe4rde1q] {
    width: 118px;
}

.pipeline-col-name[b-z1oe4rde1q] {
    width: 26%;
}

.pipeline-col-source[b-z1oe4rde1q] {
    width: 120px;
}

.pipeline-col-repository[b-z1oe4rde1q] {
    width: 24%;
}

.pipeline-col-time[b-z1oe4rde1q] {
    width: 120px;
}

.pipeline-col-action[b-z1oe4rde1q] {
    width: 56px;
    text-align: right;
}

.pipeline-name-cell[b-z1oe4rde1q] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pipeline-name-cell strong[b-z1oe4rde1q],
.pipeline-col-repository[b-z1oe4rde1q] {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.pipeline-flags[b-z1oe4rde1q] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.pipelines-table tbody tr.clickable:hover[b-z1oe4rde1q] {
    background: var(--surface-inset);
    cursor: pointer;
}

.pipelines-table tbody tr.clickable:focus-visible[b-z1oe4rde1q] {
    outline: 2px solid var(--brand-teal);
    outline-offset: -2px;
}

.pipelines-table tbody tr:last-child td[b-z1oe4rde1q] {
    border-bottom: none;
}

/* I8: status pills now use inline-flex to accommodate the icon character */
.status-pill[b-z1oe4rde1q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
    letter-spacing: 0;
}

.status-pill.status-success[b-z1oe4rde1q] {
    background: color-mix(in srgb, var(--status-success) 15%, transparent);
    color: var(--status-success);
}

.status-pill.status-error[b-z1oe4rde1q] {
    background: color-mix(in srgb, var(--status-error) 15%, transparent);
    color: var(--status-error);
}

.status-pill.status-warning[b-z1oe4rde1q] {
    background: color-mix(in srgb, var(--status-warning) 15%, transparent);
    color: var(--status-warning);
}

.status-pill.status-info[b-z1oe4rde1q] {
    background: color-mix(in srgb, var(--status-info) 15%, transparent);
    color: var(--status-info);
}

.status-pill.status-muted[b-z1oe4rde1q] {
    background: var(--surface-highlight);
    color: var(--text-muted);
}

.status-pill.status-unknown[b-z1oe4rde1q] {
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    color: var(--text-secondary);
}

.badge[b-z1oe4rde1q] {
    display: inline-flex;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.2;
    width: fit-content;
}

.badge-warning[b-z1oe4rde1q] {
    background: var(--status-warning-bg);
    color: var(--status-warning);
}

.badge-error[b-z1oe4rde1q] {
    background: var(--status-error-bg);
    color: var(--status-error);
}

/* D1/I1: source badge variants */
.source-badge[b-z1oe4rde1q] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
    background: var(--surface-inset);
    color: var(--text-secondary);
}

.source-badge--ci[b-z1oe4rde1q] {
    background: color-mix(in srgb, var(--status-info) 15%, transparent);
    color: var(--status-info);
}

.source-badge--cd[b-z1oe4rde1q] {
    background: color-mix(in srgb, var(--status-warning) 15%, transparent);
    color: var(--status-warning);
}

.source-badge--gha[b-z1oe4rde1q] {
    background: color-mix(in srgb, #a399ff 15%, transparent);
    color: #a399ff;
}

.drill-down-content[b-z1oe4rde1q] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.drill-down-header[b-z1oe4rde1q] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-default);
}

.drill-down-header h3[b-z1oe4rde1q] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.timeline-section h4[b-z1oe4rde1q],
.stats-section h4[b-z1oe4rde1q],
.sparkline-section h4[b-z1oe4rde1q],
.failure-section h4[b-z1oe4rde1q] {
    margin: 0 0 12px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-grid[b-z1oe4rde1q] {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
}

.timeline-cell[b-z1oe4rde1q] {
    aspect-ratio: 1;
    border-radius: 3px;
    cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
    .timeline-cell[b-z1oe4rde1q] {
        transition: opacity 150ms, transform 150ms;
    }
}

.timeline-cell:hover[b-z1oe4rde1q] {
    opacity: 0.8;
    transform: scale(1.1);
}

.timeline-cell.status-success[b-z1oe4rde1q] {
    background: var(--status-success);
}

.timeline-cell.status-error[b-z1oe4rde1q] {
    background: var(--status-error);
}

.timeline-cell.status-warning[b-z1oe4rde1q] {
    background: var(--status-warning);
}

/* D5: queued/in-progress cells use info colour — no stripe */
.timeline-cell.status-info[b-z1oe4rde1q] {
    background: color-mix(in srgb, var(--status-info) 20%, transparent);
    border: 1px solid var(--status-info);
}

.timeline-cell.status-unknown[b-z1oe4rde1q] {
    background: var(--text-muted);
    opacity: 0.3;
}

.stats-section[b-z1oe4rde1q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.stat-item[b-z1oe4rde1q] {
    padding: 12px;
    background: var(--surface-inset);
    border-radius: 4px;
}

.stat-label[b-z1oe4rde1q] {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.stat-value[b-z1oe4rde1q] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    overflow-wrap: anywhere;
}

.sparkline[b-z1oe4rde1q] {
    width: 100%;
    height: 48px;
}

.failure-section[b-z1oe4rde1q] {
    padding: 12px;
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    border-radius: 4px;
}

.failure-reason[b-z1oe4rde1q] {
    font-size: 13px;
    color: var(--text-primary);
    word-break: break-word;
}

/* D3/I4: structural skeleton matching real page layout */
.pipelines-skeleton[b-z1oe4rde1q] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.skeleton-header[b-z1oe4rde1q] {
    height: 80px;
    border-radius: var(--radius-lg);
}

.skeleton-kpi-strip[b-z1oe4rde1q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 16px;
}

.skeleton-kpi[b-z1oe4rde1q] {
    height: 80px;
    border-radius: var(--radius-md);
}

.skeleton-alerts-row[b-z1oe4rde1q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 16px;
}

.skeleton-alert[b-z1oe4rde1q] {
    height: 120px;
    border-radius: var(--radius-md);
}

.skeleton-trends-row[b-z1oe4rde1q] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px;
}

.skeleton-trend[b-z1oe4rde1q] {
    height: 100px;
    border-radius: var(--radius-md);
}

.skeleton-table[b-z1oe4rde1q] {
    height: 200px;
    border-radius: var(--radius-md);
}

.skeleton-bar[b-z1oe4rde1q] {
    background: linear-gradient(90deg, var(--surface-inset) 25%, var(--surface-highlight) 50%, var(--surface-inset) 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}

@media (prefers-reduced-motion: no-preference) {
    .skeleton-bar[b-z1oe4rde1q] {
        animation: loading-b-z1oe4rde1q 1.5s infinite;
    }
}

@keyframes loading-b-z1oe4rde1q {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.error-card[b-z1oe4rde1q] {
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    border-radius: 8px;
    padding: 16px;
    color: var(--status-error);
    font-weight: 500;
}

.error-card p[b-z1oe4rde1q] {
    margin: 0;
}

/* D4: cache-warming card with retry button */
.warming-card[b-z1oe4rde1q] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
}

.warming-icon[b-z1oe4rde1q] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.warming-text[b-z1oe4rde1q] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.warming-text strong[b-z1oe4rde1q] {
    color: var(--text-primary);
}

.warming-text span[b-z1oe4rde1q] {
    font-size: 13px;
}

/* D6/I5: panel loading uses spinner */
.panel-loading[b-z1oe4rde1q] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: var(--text-muted);
    font-size: 13px;
}

.panel-error[b-z1oe4rde1q] {
    padding: 12px;
    background: var(--status-error-bg);
    border: 1px solid var(--status-error-border);
    border-radius: 4px;
    color: var(--status-error);
    font-size: 13px;
    font-weight: 500;
}

/* I13: tighter column padding on narrow viewports */
@media (max-width: 900px) {
    .pipelines-table th[b-z1oe4rde1q],
    .pipelines-table td[b-z1oe4rde1q] {
        padding: 8px;
        font-size: 11px;
    }

    .pipelines-table[b-z1oe4rde1q] {
        min-width: 820px;
    }
}

@media (max-width: 640px) {
    .pipelines-page[b-z1oe4rde1q] {
        gap: 16px;
    }

    .kpi-strip[b-z1oe4rde1q] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .trends-header[b-z1oe4rde1q] {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .period-selector[b-z1oe4rde1q] {
        width: 100%;
    }

    .btn-period[b-z1oe4rde1q] {
        flex: 1;
    }

    .trend-item[b-z1oe4rde1q] {
        flex-wrap: wrap;
    }

    .timeline-grid[b-z1oe4rde1q] {
        grid-template-columns: repeat(5, 1fr);
    }

    .stats-section[b-z1oe4rde1q] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/PlatformHealth.razor.rz.scp.css */
.platform-health-page[b-nl7138t21f] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1440px;
    margin: 0 auto;
}

.ph-ready-banner[b-nl7138t21f],
.ph-under-construction[b-nl7138t21f] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--brand-teal);
    border-radius: var(--radius-xl);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.ph-ready-banner.ph-ready[b-nl7138t21f] {
    border-left-color: var(--status-success);
}

.ph-ready-banner.ph-warning[b-nl7138t21f] {
    border-left-color: var(--status-warning);
}

.ph-ready-banner.ph-critical[b-nl7138t21f] {
    border-left-color: var(--status-error);
}

.ph-ready-icon[b-nl7138t21f],
.ph-under-construction-icon[b-nl7138t21f] {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: var(--brand-teal-08);
    color: var(--brand-teal);
    font-weight: 800;
    letter-spacing: 0.08em;
}

.ph-ready-banner.ph-warning .ph-ready-icon[b-nl7138t21f] {
    background: var(--status-warning-bg);
    color: var(--status-warning);
}

.ph-ready-banner.ph-critical .ph-ready-icon[b-nl7138t21f] {
    background: var(--status-error-bg);
    color: var(--status-error);
}

.ph-ready-banner h2[b-nl7138t21f],
.ph-under-construction h2[b-nl7138t21f] {
    margin: 4px 0 8px;
    color: var(--text-primary);
    font-size: 24px;
    letter-spacing: -0.02em;
}

.ph-ready-banner p[b-nl7138t21f],
.ph-under-construction p[b-nl7138t21f] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 820px;
}

.ph-eyebrow[b-nl7138t21f] {
    color: var(--brand-teal);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ph-setup-grid[b-nl7138t21f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.ph-filter-bar[b-nl7138t21f],
.ph-action-form[b-nl7138t21f] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 16px;
}

.ph-filter-bar label[b-nl7138t21f] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ph-input[b-nl7138t21f] {
    min-width: 160px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--surface-inset);
    color: var(--text-primary);
    padding: 8px 10px;
    font: inherit;
    font-size: 13px;
}

.ph-button[b-nl7138t21f] {
    border: 1px solid var(--brand-teal);
    border-radius: 6px;
    background: var(--brand-teal);
    color: white;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.ph-button:disabled[b-nl7138t21f] {
    cursor: not-allowed;
    opacity: 0.5;
}

.ph-button-secondary[b-nl7138t21f] {
    background: var(--surface-card);
    color: var(--brand-teal);
}

.ph-kpi-grid[b-nl7138t21f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}

.ph-kpi[b-nl7138t21f] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-left: 4px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-xs);
}

.ph-kpi span[b-nl7138t21f] {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ph-kpi strong[b-nl7138t21f] {
    display: block;
    margin-top: 8px;
    color: var(--text-primary);
    font-size: 24px;
    letter-spacing: -0.03em;
}

.ph-status-green[b-nl7138t21f] { border-left-color: var(--status-success); }
.ph-status-amber[b-nl7138t21f] { border-left-color: var(--status-warning); }
.ph-status-red[b-nl7138t21f] { border-left-color: var(--status-error); }

.ph-grid[b-nl7138t21f] {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 16px;
}

.ph-panel[b-nl7138t21f] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-xs);
}

.ph-panel-wide[b-nl7138t21f] {
    min-width: 0;
}

.ph-panel-header[b-nl7138t21f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ph-panel-header h2[b-nl7138t21f] {
    margin: 0;
    font-size: 15px;
    color: var(--text-primary);
}

.ph-panel-header span[b-nl7138t21f] {
    color: var(--text-muted);
    font-size: 12px;
}

.ph-warning[b-nl7138t21f] {
    border-color: var(--status-warning);
    color: var(--text-primary);
}

.ph-error[b-nl7138t21f],
.ph-error-text[b-nl7138t21f] {
    color: var(--status-error);
}

.ph-error-hint[b-nl7138t21f] {
    margin-top: 8px;
    font-size: 13px;
}

.ph-table-wrap[b-nl7138t21f] {
    overflow-x: auto;
}

.ph-table[b-nl7138t21f] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ph-table th[b-nl7138t21f],
.ph-table td[b-nl7138t21f] {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-subtle);
    text-align: left;
    vertical-align: top;
}

.ph-table th[b-nl7138t21f] {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ph-table td small[b-nl7138t21f] {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
}

.ph-pill[b-nl7138t21f],
.ph-health[b-nl7138t21f] {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    background: var(--surface-inset);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.ph-health-green[b-nl7138t21f] { background: var(--status-success-bg); color: var(--status-success); }
.ph-health-amber[b-nl7138t21f] { background: var(--status-warning-bg); color: var(--status-warning); }
.ph-health-red[b-nl7138t21f] { background: var(--status-error-bg); color: var(--status-error); }

.ph-list[b-nl7138t21f],
.ph-action-list[b-nl7138t21f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ph-list-row[b-nl7138t21f],
.ph-action-row[b-nl7138t21f] {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px;
    border-radius: 6px;
    background: var(--surface-inset);
}

.ph-action-row[b-nl7138t21f] {
    border-left: 3px solid transparent;
}

.ph-action-overdue[b-nl7138t21f] {
    border-left-color: var(--status-error);
    background: var(--status-error-bg);
}

.ph-action-row div:first-child[b-nl7138t21f],
.ph-action-row span[b-nl7138t21f],
.ph-action-row small[b-nl7138t21f] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ph-action-actions[b-nl7138t21f] {
    align-items: flex-end;
}

.ph-empty[b-nl7138t21f] {
    color: var(--text-muted);
    font-style: italic;
}

.ph-trend[b-nl7138t21f] {
    height: 160px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding-top: 12px;
}

.ph-trend-bar[b-nl7138t21f] {
    flex: 1;
    min-width: 4px;
    border-radius: 3px 3px 0 0;
    background: var(--brand-teal);
    opacity: 0.85;
}

@media (max-width: 960px) {
    .ph-grid[b-nl7138t21f] {
        grid-template-columns: 1fr;
    }

    .ph-under-construction[b-nl7138t21f] {
        grid-template-columns: 1fr;
    }

    .ph-ready-banner[b-nl7138t21f] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/PlatformPerformance.razor.rz.scp.css */
.pp-page[b-cl87ytkct7] {
    max-width: 1400px;
}

/* ── Banner ────────────────────────────────────────────────────────────── */

.pp-banner[b-cl87ytkct7] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.pp-banner h2[b-cl87ytkct7] { font-size: 1.125rem; font-weight: 600; margin: 0.25rem 0 0.5rem; }
.pp-banner p[b-cl87ytkct7] { color: var(--text-secondary); margin: 0; line-height: 1.5; }

.pp-banner-icon[b-cl87ytkct7] {
    flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem; letter-spacing: 0.05em;
    background: var(--brand-teal-20); color: var(--brand-teal);
}

.pp-warning .pp-banner-icon[b-cl87ytkct7] { background: var(--severity-high); color: #fff; }

.pp-retry-btn[b-cl87ytkct7] {
    margin-top: 0.75rem; padding: 0.5rem 1rem; border-radius: var(--radius-lg);
    border: 1px solid var(--border-default); background: var(--surface-card);
    color: inherit; cursor: pointer; font-size: 0.875rem;
    transition: background var(--transition-fast);
}
.pp-retry-btn:hover[b-cl87ytkct7] { background: var(--surface-highlight); }

/* ── Toolbar ───────────────────────────────────────────────────────────── */

.pp-toolbar[b-cl87ytkct7] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pp-filter-group[b-cl87ytkct7] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pp-filter-input[b-cl87ytkct7] {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: inherit;
    font-size: 0.875rem;
    width: 260px;
    outline: none;
    transition: border-color var(--transition-fast);
}
.pp-filter-input:focus[b-cl87ytkct7] { border-color: var(--brand-teal); }

.pp-filter-count[b-cl87ytkct7] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.pp-table-wrap[b-cl87ytkct7] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: auto;
}

.pp-table[b-cl87ytkct7] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.pp-table thead tr[b-cl87ytkct7] {
    border-bottom: 1px solid var(--border-default);
}

.pp-table th[b-cl87ytkct7] {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    white-space: nowrap;
}

.pp-table th.pp-num[b-cl87ytkct7],
.pp-table td.pp-num[b-cl87ytkct7] {
    text-align: right;
}

.pp-table tbody tr[b-cl87ytkct7] {
    border-bottom: 1px solid var(--border-default);
    transition: background var(--transition-fast);
}
.pp-table tbody tr:last-child[b-cl87ytkct7] { border-bottom: none; }
.pp-table tbody tr:hover[b-cl87ytkct7] { background: var(--surface-highlight); }

.pp-table td[b-cl87ytkct7] {
    padding: 0.625rem 1rem;
    vertical-align: middle;
}

.pp-client-name-cell[b-cl87ytkct7] {
    font-weight: 500;
    white-space: nowrap;
}

.pp-no-results[b-cl87ytkct7] {
    text-align: center;
    color: var(--text-secondary);
    padding: 2rem 1rem !important;
    font-style: italic;
}

/* ── Tier badges ───────────────────────────────────────────────────────── */

.pp-tier-badge[b-cl87ytkct7] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.pp-tier-mega[b-cl87ytkct7]    { background: #ede9fe; color: #5b21b6; }
.pp-tier-large[b-cl87ytkct7]   { background: #dbeafe; color: #1e40af; }
.pp-tier-mid[b-cl87ytkct7]     { background: #dcfce7; color: #166534; }
.pp-tier-standard[b-cl87ytkct7] { background: var(--surface-highlight); color: var(--text-secondary); }

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.pp-tabs[b-cl87ytkct7] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-default);
    padding-bottom: 0;
}

.pp-tab-btn[b-cl87ytkct7] {
    padding: 0.625rem 1.25rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    border-radius: 0;
}
.pp-tab-btn:hover[b-cl87ytkct7] { color: var(--text-primary); }
.pp-tab-btn.active[b-cl87ytkct7] {
    color: var(--brand-teal);
    border-bottom-color: var(--brand-teal);
    font-weight: 600;
}

/* ── Proven Capacity tab ───────────────────────────────────────────────── */

.pp-capacity-summary[b-cl87ytkct7] {
    background: var(--surface-highlight);
    border-left: 3px solid var(--brand-teal);
    padding: 0.875rem 1.125rem;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.pp-capacity-source[b-cl87ytkct7] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.pp-capacity-client-heading[b-cl87ytkct7] {
    font-size: 1rem;
    font-weight: 600;
    margin: 1.5rem 0 0.5rem;
    padding-bottom: 0.375rem;
    border-bottom: 1px solid var(--border-default);
}

.pp-dimension-cell[b-cl87ytkct7] { font-weight: 500; }

.pp-highlight[b-cl87ytkct7] { font-weight: 600; }

.pp-capacity-table tr.pp-gap-critical[b-cl87ytkct7] { border-left: 3px solid var(--severity-critical); }
.pp-capacity-table tr.pp-gap-warning[b-cl87ytkct7]  { border-left: 3px solid var(--severity-high); }
.pp-capacity-table tr.pp-gap-ok[b-cl87ytkct7]       { border-left: 3px solid #166534; }

.pp-gap-badge[b-cl87ytkct7] {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
}
.pp-gap-badge.pp-gap-critical[b-cl87ytkct7] { color: var(--severity-critical); }
.pp-gap-badge.pp-gap-warning[b-cl87ytkct7]  { color: var(--severity-high); }
.pp-gap-badge.pp-gap-ok[b-cl87ytkct7]       { color: #166534; }

/* ── Performance Reports (K6) tab ──────────────────────────────────────── */

.pp-k6-header[b-cl87ytkct7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.pp-k6-title[b-cl87ytkct7] { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.25rem; }
.pp-k6-meta[b-cl87ytkct7]  { font-size: 0.75rem; color: var(--text-secondary); margin: 0; }

.pp-k6-report-link[b-cl87ytkct7] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--brand-teal);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.pp-k6-report-link:hover[b-cl87ytkct7] { opacity: 0.75; }

.pp-k6-facts[b-cl87ytkct7] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.pp-k6-fact[b-cl87ytkct7] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    min-width: 120px;
}

.pp-k6-fact-value[b-cl87ytkct7] { font-size: 1.5rem; font-weight: 700; line-height: 1; }
.pp-k6-fact-label[b-cl87ytkct7] { font-size: 0.6875rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); }

.pp-k6-section[b-cl87ytkct7]      { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.25rem; }
.pp-k6-section-meta[b-cl87ytkct7] { font-size: 0.8125rem; color: var(--text-secondary); margin: 0 0 0.875rem; }

.pp-k6-status[b-cl87ytkct7] {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 0.125rem 0.5rem; border-radius: 999px;
}
.pp-k6-status-pass[b-cl87ytkct7]     { background: #dcfce7; color: #166534; }
.pp-k6-status-marginal[b-cl87ytkct7] { background: #fef3c7; color: #92400e; }
.pp-k6-status-fail[b-cl87ytkct7]     { background: #fee2e2; color: #991b1b; }

.pp-k6-rung-marginal td[b-cl87ytkct7] { background: rgba(250,204,21,0.04); }
.pp-k6-rung-fail td[b-cl87ytkct7]     { background: rgba(239,68,68,0.04); }

.pp-k6-note[b-cl87ytkct7] { font-size: 0.8125rem; color: var(--text-secondary); max-width: 280px; }

/* ── Hypotheses ────────────────────────────────────────────────────────── */

.pp-k6-hypotheses[b-cl87ytkct7] { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1rem; }

.pp-k6-hypothesis[b-cl87ytkct7] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 0.875rem 1rem;
}

.pp-k6-hypothesis-header[b-cl87ytkct7] {
    display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.375rem;
}

.pp-k6-hypothesis-n[b-cl87ytkct7] {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--brand-teal-20); color: var(--brand-teal);
    font-size: 0.75rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

.pp-k6-hypothesis-detail[b-cl87ytkct7] { font-size: 0.8125rem; color: var(--text-secondary); margin: 0; }

.pp-k6-hyp-state[b-cl87ytkct7] {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 0.125rem 0.5rem; border-radius: 999px;
    margin-left: auto;
}
.pp-k6-hyp-active[b-cl87ytkct7]    { background: #dbeafe; color: #1e40af; }
.pp-k6-hyp-candidate[b-cl87ytkct7] { background: var(--surface-highlight); color: var(--text-secondary); }

/* ── Endpoints table ───────────────────────────────────────────────────── */

.pp-k6-behaviour[b-cl87ytkct7] {
    font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 0.125rem 0.5rem; border-radius: 999px;
}
.pp-k6-beh-flat[b-cl87ytkct7]           { background: #dcfce7; color: #166534; }
.pp-k6-beh-load_sensitive[b-cl87ytkct7] { background: #fef3c7; color: #92400e; }
.pp-k6-beh-search_bound[b-cl87ytkct7]   { background: var(--surface-highlight); color: var(--text-secondary); }

.pp-k6-over-sla[b-cl87ytkct7] { color: var(--severity-critical); font-weight: 600; }

.pp-k6-sla-note[b-cl87ytkct7] {
    font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.5rem; font-style: italic;
}

/* ── Full report iframe ─────────────────────────────────────────────────── */

.pp-k6-report-btn[b-cl87ytkct7] {
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--brand-teal);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-fast);
    white-space: nowrap;
}
.pp-k6-report-btn:hover[b-cl87ytkct7] { background: var(--surface-highlight); }

.pp-k6-iframe[b-cl87ytkct7] {
    width: 100%;
    height: 85vh;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    background: #fff;
}
/* /Pages/QuarterPlanning.razor.rz.scp.css */
.quarter-planning[b-i5zqf3cnui] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}

.controls-card[b-i5zqf3cnui],
.loading-card[b-i5zqf3cnui],
.empty-card[b-i5zqf3cnui] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
}

.controls-loading[b-i5zqf3cnui] {
    color: var(--text-muted);
    font-weight: 700;
    padding: 1rem;
}

.quarter-planning h1[b-i5zqf3cnui],
.quarter-planning h2[b-i5zqf3cnui],
.quarter-planning h3[b-i5zqf3cnui],
.quarter-planning h4[b-i5zqf3cnui],
.quarter-planning p[b-i5zqf3cnui] {
    margin-top: 0;
}

/* Keep the action cluster (Autosave + Save Plan + Load/Refresh + last refreshed) on the
   right beside the title/description rather than wrapping underneath it on wide screens.
   Scoped to this page so the shared global .page-header-row layout is unchanged elsewhere. */
.page-header-row[b-i5zqf3cnui] {
    flex-wrap: nowrap;
    align-items: center;
}

.page-header-actions[b-i5zqf3cnui] {
    margin-top: 0;
}

/* Fall back to stacking below the title on narrower viewports where there isn't room. */
@media (max-width: 900px) {
    .page-header-row[b-i5zqf3cnui] {
        flex-wrap: wrap;
    }
}

.save-state[b-i5zqf3cnui] {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.save-state small[b-i5zqf3cnui] {
    color: var(--text-muted);
    font-size: .75rem;
}

.save-state-badge[b-i5zqf3cnui] {
    border: 1px solid var(--border-default);
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    padding: .2rem .55rem;
}

.save-state-saved[b-i5zqf3cnui] {
    background: var(--brand-teal-10);
    border-color: var(--brand-teal);
    color: var(--brand-teal);
}

.quarter-planning input:focus-visible[b-i5zqf3cnui],
.quarter-planning select:focus-visible[b-i5zqf3cnui],
.quarter-planning textarea:focus-visible[b-i5zqf3cnui],
.health-card:focus-visible[b-i5zqf3cnui],
.planning-mode-tab:focus-visible[b-i5zqf3cnui],
.planning-signal-chip:focus-visible[b-i5zqf3cnui],
.planning-signal-clear:focus-visible[b-i5zqf3cnui],
.drag-handle:focus-visible[b-i5zqf3cnui],
.alert-dismiss:focus-visible[b-i5zqf3cnui] {
    outline: 2px solid var(--brand-teal);
    outline-offset: 2px;
}

.controls-card[b-i5zqf3cnui],
.loading-card[b-i5zqf3cnui],
.empty-card[b-i5zqf3cnui] {
    padding: 16px;
}

.control-grid[b-i5zqf3cnui] {
    display: grid;
    align-items: end;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.control-grid label[b-i5zqf3cnui] {
    display: flex;
    flex-direction: column;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    gap: 6px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.control-grid input[b-i5zqf3cnui],
.control-grid select[b-i5zqf3cnui] {
    background: var(--surface-inset);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: inherit;
    font-size: .85rem;
    padding: .55rem .65rem;
    text-transform: none;
}

.hint[b-i5zqf3cnui],
.empty-inline[b-i5zqf3cnui],
.quarter-planning .panel-header p[b-i5zqf3cnui] {
    color: var(--text-muted);
    font-size: .88rem;
}

.sr-only[b-i5zqf3cnui] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.quarter-planning .panel[b-i5zqf3cnui] {
    display: flex;
    flex-direction: column;
}

.quarter-planning .panel > :not(.panel-header)[b-i5zqf3cnui] {
    margin: 16px;
}

.quarter-planning .panel > :not(.panel-header) + :not(.panel-header)[b-i5zqf3cnui] {
    margin-top: 0;
}

.quarter-planning .panel > .table-scroll[b-i5zqf3cnui],
.quarter-planning .panel > .readiness-table-wrap[b-i5zqf3cnui] {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
}

.planning-count-pill[b-i5zqf3cnui] {
    align-items: center;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 600;
    gap: .35rem;
    padding: .35rem .75rem;
}

.rank-cell button[b-i5zqf3cnui] {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    font-weight: 800;
}

.planning-workspace[b-i5zqf3cnui] {
    display: block;
}

.planning-tabs[b-i5zqf3cnui] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-default);
    overflow-x: auto;
    padding: 0;
}

.planning-mode-tab[b-i5zqf3cnui] {
    align-items: center;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    flex: 0 0 auto;
    font-size: .8rem;
    font-weight: 500;
    gap: 6px;
    margin-bottom: -1px;
    padding: 10px 16px;
    text-align: left;
    transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
    white-space: nowrap;
}

.planning-mode-tab:hover[b-i5zqf3cnui] {
    color: var(--text-primary);
}

.planning-mode-tab-active[b-i5zqf3cnui] {
    border-bottom-color: var(--brand-teal);
    color: var(--brand-teal);
    box-shadow: none;
}

.planning-mode-tab span[b-i5zqf3cnui] {
    color: inherit;
    font-size: .8rem;
    font-weight: 500;
    text-transform: none;
}

.planning-mode-tab strong[b-i5zqf3cnui] {
    background: var(--brand-teal-08);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: .65rem;
    font-weight: 600;
    line-height: 1;
    min-width: 20px;
    padding: .2rem .5rem;
    text-align: center;
}

.planning-mode-tab small[b-i5zqf3cnui] {
    display: none;
}

.planning-health[b-i5zqf3cnui] {
    display: flex;
    flex-direction: column;
}

.health-grid[b-i5zqf3cnui] {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.health-card[b-i5zqf3cnui] {
    align-items: flex-start;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    color: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
    text-align: left;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.health-card:hover[b-i5zqf3cnui] {
    border-color: var(--brand-teal-20);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.health-card-active[b-i5zqf3cnui] {
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 2px var(--brand-teal-20);
}

.health-card span[b-i5zqf3cnui] {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.health-card strong[b-i5zqf3cnui] {
    color: var(--text-primary);
    font-size: 28px;
    letter-spacing: -.03em;
}

.health-card small[b-i5zqf3cnui] {
    color: var(--text-muted);
    line-height: 1.3;
}

.planning-signals[b-i5zqf3cnui] {
    align-items: center;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: .65rem .75rem;
}

.planning-signal-chip[b-i5zqf3cnui],
.planning-signal-clear[b-i5zqf3cnui] {
    align-items: center;
    background: var(--surface-inset);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .82rem;
    font-weight: 700;
    gap: .45rem;
    padding: .35rem .55rem;
}

.planning-signal-chip strong[b-i5zqf3cnui] {
    background: color-mix(in srgb, var(--severity-medium) 16%, transparent);
    border-radius: 999px;
    color: var(--text-primary);
    font-size: .74rem;
    min-width: 1.4rem;
    padding: .1rem .4rem;
    text-align: center;
}

.planning-signal-chip-active[b-i5zqf3cnui] {
    background: var(--brand-teal-10);
    border-color: var(--brand-teal-20);
    color: var(--brand-teal);
}

.planning-signal-clear[b-i5zqf3cnui] {
    color: var(--text-muted);
}

.quarter-planning .panel-header[b-i5zqf3cnui] {
    align-items: flex-start;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.quarter-planning .panel-header h2[b-i5zqf3cnui] {
    color: var(--text-primary);
    font-size: .98rem;
    margin: 0 0 .25rem;
}

.quarter-planning .panel-header h3[b-i5zqf3cnui] {
    color: var(--text-primary);
    font-size: .9rem;
    margin: 0;
}

.warnings-actions[b-i5zqf3cnui] {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: .5rem;
}

.panel-toggle[b-i5zqf3cnui] {
    padding: .35rem .7rem;
}

.table-scroll[b-i5zqf3cnui] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow-x: auto;
    overflow-y: visible;
}

.backlog-table thead th[b-i5zqf3cnui] {
    background: var(--surface-inset);
}

.backlog-table[b-i5zqf3cnui],
.readiness-feature-table[b-i5zqf3cnui] {
    border-collapse: collapse;
    font-size: .8rem;
    min-width: 64rem;
    width: 100%;
}

.backlog-table th[b-i5zqf3cnui],
.backlog-table td[b-i5zqf3cnui],
.readiness-feature-table th[b-i5zqf3cnui],
.readiness-feature-table td[b-i5zqf3cnui] {
    border-bottom: 1px solid var(--border-default);
    padding: 10px 16px;
    text-align: left;
    vertical-align: top;
}

.backlog-table th[b-i5zqf3cnui],
.readiness-feature-table th[b-i5zqf3cnui] {
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.backlog-table tbody tr[b-i5zqf3cnui] {
    transition: background var(--transition-fast), box-shadow var(--transition-fast);
}

.backlog-table tbody tr:hover[b-i5zqf3cnui] {
    background: var(--surface-highlight);
}

.title-cell[b-i5zqf3cnui] {
    min-width: 24rem;
}

.epic-link[b-i5zqf3cnui],
.epic-link:visited[b-i5zqf3cnui] {
    align-items: center;
    background: var(--brand-teal-10);
    border: 1px solid var(--brand-teal-20);
    border-radius: 999px;
    color: var(--brand-teal);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1;
    padding: .22rem .5rem;
    text-decoration: none;
}

.epic-link:hover[b-i5zqf3cnui],
.epic-link:focus-visible[b-i5zqf3cnui] {
    background: color-mix(in srgb, var(--brand-teal) 24%, var(--surface-card));
    border-color: var(--brand-teal);
    box-shadow: 0 0 0 2px var(--brand-teal-10);
}

.title-cell strong[b-i5zqf3cnui] {
    display: block;
    margin-top: .25rem;
}

.rank-cell[b-i5zqf3cnui] {
    align-items: center;
    display: flex;
    gap: .25rem;
    min-width: 7rem;
}

.drag-handle[b-i5zqf3cnui] {
    align-items: center;
    background: var(--surface-highlight);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: grab;
    display: inline-flex;
    font-weight: 900;
    height: 1.8rem;
    justify-content: center;
    letter-spacing: -.15rem;
    padding: 0 .45rem 0 .3rem;
    touch-action: none;
    user-select: none;
}

.drag-handle:hover:not(:disabled)[b-i5zqf3cnui] {
    border-color: var(--brand-teal);
    color: var(--brand-teal);
    transform: translateY(-1px);
}

.drag-handle:active:not(:disabled)[b-i5zqf3cnui] {
    cursor: grabbing;
}

.drag-handle-disabled[b-i5zqf3cnui] {
    cursor: not-allowed;
    opacity: .35;
}

.drag-disabled-note[b-i5zqf3cnui] {
    color: var(--text-muted);
    font-size: .8rem;
}

.rank-drop-target[b-i5zqf3cnui] {
    box-shadow: inset 0 3px 0 var(--brand-teal), 0 -1px 0 var(--brand-teal);
}

.rank-dragging[b-i5zqf3cnui] {
    background: var(--brand-teal-20);
    opacity: .72;
}

.type-pill[b-i5zqf3cnui],
.size-pill[b-i5zqf3cnui] {
    align-items: center;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    display: inline-flex;
    font-size: .72rem;
    font-weight: 650;
    padding: .24rem .5rem;
    white-space: nowrap;
}

.type-pill-product[b-i5zqf3cnui] {
    background: var(--brand-teal-10);
    border-color: var(--brand-teal-20);
    color: var(--brand-teal);
}

.type-pill-engineering[b-i5zqf3cnui] {
    background: color-mix(in srgb, var(--status-info) 14%, transparent);
    border-color: color-mix(in srgb, var(--status-info) 35%, transparent);
    color: var(--status-info);
}

.type-pill-unset[b-i5zqf3cnui] {
    background: color-mix(in srgb, var(--severity-medium) 12%, transparent);
    border-color: color-mix(in srgb, var(--severity-medium) 32%, transparent);
    color: var(--severity-medium);
}

.size-pill[b-i5zqf3cnui] {
    background: var(--surface-highlight);
    color: inherit;
}

.owner-stack[b-i5zqf3cnui] {
    display: grid;
    gap: .35rem;
    min-width: 14rem;
}

.owner-stack span[b-i5zqf3cnui] {
    color: var(--text-primary);
    font-size: .84rem;
    font-weight: 700;
}

.owner-stack strong[b-i5zqf3cnui] {
    background: var(--surface-inset);
    border: 1px solid var(--brand-teal-20);
    border-radius: 999px;
    color: var(--brand-teal);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 700;
    justify-content: center;
    margin-right: .35rem;
    padding: .08rem .35rem;
    text-align: center;
    width: 3.4rem;
}

.taxonomy-cell[b-i5zqf3cnui] {
    color: var(--text-muted);
    font-size: .84rem;
    font-weight: 600;
    min-width: 10rem;
}

.stale-row[b-i5zqf3cnui] {
    background: color-mix(in srgb, var(--severity-medium) 10%, transparent);
}

.warning-row[b-i5zqf3cnui] {
    box-shadow: inset 3px 0 0 var(--severity-medium);
}

.stale-actions[b-i5zqf3cnui] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .45rem;
}

.danger-button[b-i5zqf3cnui] {
    color: var(--severity-high);
}

.details-row[b-i5zqf3cnui] {
    background: var(--surface-highlight);
}

.details-grid[b-i5zqf3cnui] {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.details-grid span[b-i5zqf3cnui] {
    color: var(--text-muted);
    display: block;
    font-size: .72rem;
    font-weight: 800;
    margin-bottom: .25rem;
    text-transform: uppercase;
}

.details-grid strong[b-i5zqf3cnui] {
    overflow-wrap: anywhere;
}

.details-notes[b-i5zqf3cnui] {
    grid-column: 1 / -1;
}

.stale-remediation[b-i5zqf3cnui] {
    background: color-mix(in srgb, var(--severity-medium) 10%, var(--surface-card));
    border: 1px solid color-mix(in srgb, var(--severity-medium) 28%, transparent);
    border-radius: .7rem;
    grid-column: 1 / -1;
    padding: .75rem;
}

.details-notes textarea[b-i5zqf3cnui] {
    width: 100%;
}

.empty-cta[b-i5zqf3cnui] {
    align-items: center;
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 2rem 1rem;
    text-align: center;
}

.empty-cta p[b-i5zqf3cnui] {
    color: var(--text-muted);
    margin: 0;
}

.alert[b-i5zqf3cnui] {
    align-items: center;
    border: 1px solid var(--border-default);
    border-left-width: 4px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    display: flex;
    gap: .75rem;
    justify-content: space-between;
    padding: .85rem 1rem;
}

.alert-dismiss[b-i5zqf3cnui] {
    background: transparent;
    border: 0;
    color: inherit;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: 900;
    line-height: 1;
    padding: .1rem .3rem;
}

.alert-dismiss:hover[b-i5zqf3cnui] {
    opacity: .7;
}

.alert-error[b-i5zqf3cnui] {
    background: var(--status-error-bg);
    border-color: var(--status-error-border);
    border-left-color: var(--status-error);
}

.alert-info[b-i5zqf3cnui] {
    animation: planningMessageAutoDismiss-b-i5zqf3cnui 5s ease forwards;
    background: var(--brand-teal-10);
    border-color: var(--brand-teal-20);
    border-left-color: var(--brand-teal);
}

@keyframes planningMessageAutoDismiss-b-i5zqf3cnui {
    0%,
    88% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-.25rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .alert-info[b-i5zqf3cnui] {
        animation: none;
    }
}

/* ── Readiness tab ─────────────────────────────────────────────────────────── */

.readiness-section[b-i5zqf3cnui] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.readiness-overall-bar[b-i5zqf3cnui] {
    align-items: center;
    background: var(--surface-inset);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: none;
    display: flex;
    gap: 1rem;
    padding: .875rem 1rem;
}

.readiness-overall-pct[b-i5zqf3cnui] {
    font-size: 1.75rem;
    font-weight: 900;
    min-width: 4rem;
}

.readiness-overall-body[b-i5zqf3cnui] {
    flex: 1;
}

.readiness-progress-track[b-i5zqf3cnui] {
    background: var(--border-default);
    border-radius: 999px;
    height: 8px;
    margin-bottom: .35rem;
    overflow: hidden;
}

.readiness-progress-fill[b-i5zqf3cnui] {
    border-radius: 999px;
    height: 8px;
    transition: width .3s ease;
}

.readiness-health-grid[b-i5zqf3cnui] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.readiness-metric-card strong[b-i5zqf3cnui],
.readiness-overall-pct[b-i5zqf3cnui] {
    font-size: 1.6rem;
}

.readiness-value-ready[b-i5zqf3cnui] {
    color: var(--rag-green);
}

.readiness-value-partial[b-i5zqf3cnui] {
    color: var(--severity-medium);
}

.readiness-value-risk[b-i5zqf3cnui] {
    color: var(--severity-high);
}

.readiness-value-muted[b-i5zqf3cnui] {
    color: var(--text-muted);
}

.filter-pills[b-i5zqf3cnui] {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-pill[b-i5zqf3cnui] {
    align-items: center;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: .75rem;
    font-weight: 500;
    gap: 6px;
    padding: 6px 14px;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.filter-pill:hover[b-i5zqf3cnui] {
    background: var(--surface-highlight);
    border-color: var(--brand-teal);
    color: var(--text-primary);
}

.filter-pill-active[b-i5zqf3cnui] {
    background: var(--brand-teal);
    border-color: var(--brand-teal);
    color: var(--text-inverse);
}

.filter-pill-active:hover[b-i5zqf3cnui] {
    background: var(--brand-teal);
    color: var(--text-inverse);
    opacity: .9;
}

.readiness-taxonomy-filter[b-i5zqf3cnui] {
    align-items: center;
    color: var(--text-muted);
    display: inline-flex;
    font-size: .72rem;
    font-weight: 700;
    gap: .4rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.readiness-taxonomy-filter select[b-i5zqf3cnui] {
    background: var(--surface-inset);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font: inherit;
    min-height: 2rem;
    padding: .25rem .65rem;
    text-transform: none;
}

.readiness-table-wrap[b-i5zqf3cnui] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow-x: auto;
}

.readiness-table[b-i5zqf3cnui] {
    min-width: 72rem;
}

.readiness-status-heading[b-i5zqf3cnui],
.readiness-status-cell[b-i5zqf3cnui] {
    text-align: center;
    vertical-align: middle;
    width: 9rem;
}

.readiness-owner[b-i5zqf3cnui] {
    color: var(--text-muted);
    display: block;
    font-size: .75rem;
    margin-top: .15rem;
}

.readiness-status-badge[b-i5zqf3cnui] {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    gap: .375rem;
    justify-content: center;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .035em;
    line-height: 1;
    min-height: 1.625rem;
    padding: .25rem .625rem;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    width: 7.75rem;
}

.readiness-status-badge[b-i5zqf3cnui]::before {
    background: currentColor;
    border-radius: 999px;
    content: "";
    flex: 0 0 .375rem;
    height: .375rem;
    width: .375rem;
}

.badge-ready[b-i5zqf3cnui] {
    background: var(--status-success-bg);
    border: 1px solid var(--status-success-border);
    color: var(--status-success);
}

.badge-partial[b-i5zqf3cnui] {
    background: color-mix(in srgb, var(--severity-medium) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--severity-medium) 32%, transparent);
    color: var(--severity-medium);
}

.badge-risk[b-i5zqf3cnui] {
    background: var(--status-warning-bg);
    border: 1px solid var(--status-warning-border);
    color: var(--severity-high);
}

.badge-nowork[b-i5zqf3cnui] {
    background: var(--surface-inset);
    border: 1px solid var(--border-default);
    color: var(--text-muted);
}

.readiness-bar[b-i5zqf3cnui] {
    background: var(--border-default);
    border-radius: 999px;
    height: 6px;
    margin-bottom: .2rem;
    overflow: hidden;
    width: 100%;
}

.readiness-bar-fill[b-i5zqf3cnui] {
    border-radius: 999px;
    height: 6px;
}

.fill-green[b-i5zqf3cnui] {
    background: var(--rag-green);
}

.fill-yellow[b-i5zqf3cnui] {
    background: var(--severity-medium);
}

.fill-orange[b-i5zqf3cnui] {
    background: var(--severity-high);
}

.readiness-expand-inner[b-i5zqf3cnui] {
    background: var(--surface-highlight);
    padding: .625rem .75rem .75rem 2.25rem;
}

.readiness-feature-table[b-i5zqf3cnui] {
    min-width: unset;
    width: 100%;
}

@media (max-width: 900px) {
    .readiness-health-grid[b-i5zqf3cnui] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quarter-planning .panel-header[b-i5zqf3cnui] {
        align-items: stretch;
        flex-direction: column;
    }

    .warnings-actions[b-i5zqf3cnui] {
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .control-grid[b-i5zqf3cnui] {
        grid-template-columns: 1fr;
    }

    .page-header-actions[b-i5zqf3cnui],
    .page-header-actions .btn[b-i5zqf3cnui] {
        width: 100%;
    }

    .save-state[b-i5zqf3cnui] {
        align-items: flex-start;
        width: 100%;
    }

    .readiness-health-grid[b-i5zqf3cnui] {
        grid-template-columns: 1fr;
    }

    .readiness-overall-bar[b-i5zqf3cnui] {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* /Pages/SaasControl.razor.rz.scp.css */
.saas-control-page[b-8b2uibr749] {
    max-width: 1400px;
}

.sco-banner[b-8b2uibr749] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.sco-banner h2[b-8b2uibr749] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0.25rem 0 0.5rem;
}

.sco-banner p[b-8b2uibr749] {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.sco-banner-icon[b-8b2uibr749] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    background: var(--brand-teal-20);
    color: var(--brand-teal);
}

.sco-warning .sco-banner-icon[b-8b2uibr749] {
    background: var(--severity-high);
    color: #fff;
}

.sco-retry-btn[b-8b2uibr749] {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: inherit;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background var(--transition-fast);
}

.sco-retry-btn:hover[b-8b2uibr749] {
    background: var(--surface-highlight);
}

/* ── Grid ──────────────────────────────────────────────────────────────── */

.sco-grid[b-8b2uibr749] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: 1rem;
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.sco-card[b-8b2uibr749] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: box-shadow var(--transition-fast);
}

.sco-card:hover[b-8b2uibr749] {
    box-shadow: var(--shadow-sm);
}

.sco-card-header[b-8b2uibr749] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.sco-card-icon[b-8b2uibr749] {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0.05em;
    background: var(--surface-highlight);
    color: var(--text-secondary);
}

.sco-card-title-group[b-8b2uibr749] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-height: 40px;
}

.sco-card-title[b-8b2uibr749] {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.sco-card-description[b-8b2uibr749] {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

/* ── Status badges ─────────────────────────────────────────────────────── */

.sco-status-badge[b-8b2uibr749] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}

.sco-badge-green[b-8b2uibr749] {
    background: #dcfce7;
    color: #166534;
}

.sco-badge-amber[b-8b2uibr749] {
    background: #fef3c7;
    color: #92400e;
}

.sco-badge-red[b-8b2uibr749] {
    background: #fee2e2;
    color: #991b1b;
}

.sco-badge-unknown[b-8b2uibr749] {
    background: var(--surface-highlight);
    color: var(--text-secondary);
}

/* ── Awaiting placeholder ──────────────────────────────────────────────── */

.sco-card-awaiting[b-8b2uibr749] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 8px;
    background: var(--surface-highlight);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.sco-awaiting-icon[b-8b2uibr749] {
    font-size: 1.25rem;
    line-height: 1;
}

/* ── Item rows (for when data is wired) ────────────────────────────────── */

.sco-card-items[b-8b2uibr749] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.sco-item[b-8b2uibr749] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8125rem;
}

.sco-item-label[b-8b2uibr749] {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.sco-item-value[b-8b2uibr749] {
    font-weight: 600;
    margin-left: auto;
}

.sco-item-detail[b-8b2uibr749] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sco-severity-warning .sco-item-value[b-8b2uibr749] {
    color: var(--severity-high);
}

.sco-severity-critical .sco-item-value[b-8b2uibr749] {
    color: var(--severity-critical);
}

.sco-card-deeplink[b-8b2uibr749] {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--brand-teal);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}
.sco-card-deeplink:hover[b-8b2uibr749] { opacity: 0.75; }
/* /Pages/Slo.razor.rz.scp.css */
.slo-page[b-6gq94nne0o] {
    max-width: 1400px;
}

/* ── Banner ────────────────────────────────────────────────────────────── */

.slo-banner[b-6gq94nne0o] {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
}

.slo-banner h2[b-6gq94nne0o] {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0.25rem 0 0.5rem;
}

.slo-banner p[b-6gq94nne0o] {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.slo-banner-icon[b-6gq94nne0o] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    background: var(--brand-teal-20);
    color: var(--brand-teal);
}

.slo-warning .slo-banner-icon[b-6gq94nne0o] {
    background: var(--severity-high);
    color: #fff;
}

.slo-retry-btn[b-6gq94nne0o] {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-default);
    background: var(--surface-card);
    color: inherit;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background var(--transition-fast);
}

.slo-retry-btn:hover[b-6gq94nne0o] {
    background: var(--surface-highlight);
}

/* ── Summary row ───────────────────────────────────────────────────────── */

.slo-summary-row[b-6gq94nne0o] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.slo-summary-card[b-6gq94nne0o] {
    flex: 1;
    min-width: 120px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.slo-summary-value[b-6gq94nne0o] {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}

.slo-summary-label[b-6gq94nne0o] {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.slo-summary-meeting .slo-summary-value[b-6gq94nne0o] { color: #166534; }
.slo-summary-atrisk .slo-summary-value[b-6gq94nne0o] { color: #92400e; }
.slo-summary-breaching .slo-summary-value[b-6gq94nne0o] { color: #991b1b; }
.slo-summary-nodata .slo-summary-value[b-6gq94nne0o] { color: var(--text-secondary); }

/* ── Toolbar (tabs + account filter + window pills) ──────────────────────── */

.slo-toolbar[b-6gq94nne0o] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.slo-tabs[b-6gq94nne0o] {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
}

.slo-tab-btn[b-6gq94nne0o] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.slo-tab-btn:hover[b-6gq94nne0o] {
    border-color: var(--brand-teal-20);
    color: var(--text-primary);
}

.slo-tab-btn.active[b-6gq94nne0o] {
    background: var(--brand-teal-20);
    border-color: var(--brand-teal);
    color: var(--brand-teal);
}

.slo-account-select[b-6gq94nne0o] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
}

.slo-window-pills[b-6gq94nne0o] {
    display: flex;
    gap: 0.25rem;
    background: var(--surface-highlight);
    border-radius: 999px;
    padding: 0.25rem;
}

.slo-pill[b-6gq94nne0o] {
    padding: 0.375rem 0.875rem;
    border: none;
    border-radius: 999px;
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.slo-pill:hover[b-6gq94nne0o] {
    color: var(--text-primary);
}

.slo-pill.active[b-6gq94nne0o] {
    background: var(--surface-card);
    color: var(--brand-teal);
    box-shadow: var(--shadow-xs);
}

/* ── Environment table ────────────────────────────────────────────────────── */

.slo-env-table[b-6gq94nne0o] {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    font-size: 0.8125rem;
    margin-bottom: 1.5rem;
}

.slo-env-table th[b-6gq94nne0o] {
    text-align: left;
    padding: 0.625rem 0.875rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    background: var(--surface-highlight);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

.slo-env-table td[b-6gq94nne0o] {
    padding: 0.625rem 0.875rem;
    border-top: 1px solid var(--border-default);
    color: var(--text-primary);
    white-space: nowrap;
}

.slo-env-table tbody tr:hover[b-6gq94nne0o] {
    background: var(--surface-highlight);
}

/* ── Status badges ─────────────────────────────────────────────────────── */

.slo-status-badge[b-6gq94nne0o] {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}

.slo-badge-meeting[b-6gq94nne0o] { background: #dcfce7; color: #166534; }
.slo-badge-atrisk[b-6gq94nne0o] { background: #fef3c7; color: #92400e; }
.slo-badge-breaching[b-6gq94nne0o] { background: #fee2e2; color: #991b1b; }
.slo-badge-nodata[b-6gq94nne0o] { background: var(--surface-highlight); color: var(--text-secondary); }

/* ── Methodology disclosure ─────────────────────────────────────────────── */

.slo-methodology[b-6gq94nne0o] {
    margin-bottom: 1rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    font-size: 0.8125rem;
}

.slo-methodology summary[b-6gq94nne0o] {
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-secondary);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    user-select: none;
}

.slo-methodology summary[b-6gq94nne0o]::before {
    content: "▸";
    font-size: 0.625rem;
    transition: transform var(--transition-fast);
}

.slo-methodology[open] summary[b-6gq94nne0o]::before { transform: rotate(90deg); }

.slo-methodology-body[b-6gq94nne0o] {
    padding: 0 1rem 0.875rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.slo-methodology-body p[b-6gq94nne0o] { margin: 0 0 0.5rem; }
.slo-methodology-body p:last-child[b-6gq94nne0o] { margin-bottom: 0; }
.slo-methodology-note[b-6gq94nne0o] {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding-top: 0.25rem;
    border-top: 1px solid var(--border-default);
    margin-top: 0.5rem;
}
/* /Pages/TeamsAdmin.razor.rz.scp.css */
/* ─── Teams Admin Styles ───────────────────────────────────────────────────── */

/* ── Config tab bar ── */
.config-tabs[b-vgrwaf278v] {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    box-shadow: var(--shadow-xs);
}

.config-tab[b-vgrwaf278v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: none;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text-muted);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.config-tab:hover[b-vgrwaf278v] {
    background: var(--surface-highlight);
    color: var(--text-primary);
}

.config-tab.active[b-vgrwaf278v] {
    background: var(--brand-teal-10);
    color: var(--brand-teal);
    font-weight: 600;
    box-shadow: var(--shadow-xs);
}

.config-tab svg[b-vgrwaf278v] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.config-tab-count[b-vgrwaf278v] {
    font-size: 10px;
    font-weight: 600;
    background: var(--surface-inset);
    color: var(--text-muted);
    padding: 1px 7px;
    border-radius: 99px;
    min-width: 20px;
    text-align: center;
}

.config-tab.active .config-tab-count[b-vgrwaf278v] {
    background: var(--brand-teal-20);
    color: var(--brand-teal);
}

/* ── Config panel (content area below tabs) ── */
.config-panel[b-vgrwaf278v] {
    animation: configFadeIn-b-vgrwaf278v 200ms ease-out;
}

@keyframes configFadeIn-b-vgrwaf278v {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* .config-panel-toolbar / .config-panel-title / .config-panel-desc moved to global app.css */

.ta-settings-card[b-vgrwaf278v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-xs);
}

.ta-toggle[b-vgrwaf278v] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
}

.ta-toggle input[b-vgrwaf278v] {
    width: 16px;
    height: 16px;
    accent-color: var(--brand-teal);
}

/* .config-error / .config-empty / .config-msg moved to global app.css */

/* ── Defect threshold table ── */
.dt-table-wrap[b-vgrwaf278v] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.dt-table[b-vgrwaf278v] {
    width: 100%;
    border-collapse: collapse;
}

.dt-th[b-vgrwaf278v] {
    padding: 12px 16px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-align: left;
    background: var(--surface-inset);
    border-bottom: 1px solid var(--border-default);
    white-space: nowrap;
}

.dt-th-state[b-vgrwaf278v] { width: 40%; }
.dt-th-days[b-vgrwaf278v]  { width: 25%; }
.dt-th-action[b-vgrwaf278v] { width: 48px; }

.dt-th-icon[b-vgrwaf278v] {
    font-size: 11px;
    margin-right: 4px;
}

.dt-warning-icon[b-vgrwaf278v]  { color: var(--status-warning); }
.dt-critical-icon[b-vgrwaf278v] { color: var(--status-error); }

.dt-row[b-vgrwaf278v] {
    transition: background var(--transition-fast);
}

.dt-row:hover[b-vgrwaf278v] {
    background: var(--surface-highlight);
}

.dt-td[b-vgrwaf278v] {
    padding: 8px 16px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.dt-td-action[b-vgrwaf278v] {
    text-align: center;
    padding: 8px 12px;
}

.dt-input[b-vgrwaf278v] {
    padding: 6px 10px;
    font-size: 13px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

.dt-input:focus[b-vgrwaf278v] {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px rgba(33,207,178,0.10);
}

.dt-input-state[b-vgrwaf278v] {
    width: 100%;
    font-weight: 500;
}

.dt-input-days[b-vgrwaf278v] {
    width: 100%;
    max-width: 120px;
    font-family: 'Space Mono', monospace;
    text-align: right;
}

.dt-add-row[b-vgrwaf278v] {
    padding: 12px 16px;
    border-top: 1px solid var(--border-subtle);
}

/* ── Screen reader only ── */
.sr-only[b-vgrwaf278v] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* ── Team cards ── */
.ta-team-card[b-vgrwaf278v] {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-fast);
}

.ta-team-card:hover[b-vgrwaf278v] {
    box-shadow: var(--shadow-sm);
}

.ta-team-header[b-vgrwaf278v] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 18px 20px;
    gap: 16px;
}

.ta-team-name[b-vgrwaf278v] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.ta-team-domains[b-vgrwaf278v] {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}

.ta-section[b-vgrwaf278v] {
    padding: 14px 20px;
    border-top: 1px solid var(--border-subtle);
}

.ta-section-label[b-vgrwaf278v] {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.ta-tags[b-vgrwaf278v] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ta-tag[b-vgrwaf278v] {
    font-size: 11px;
    padding: 3px 10px;
    background: var(--surface-inset);
    color: var(--text-secondary);
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    border: 1px solid var(--border-subtle);
}

.ta-members[b-vgrwaf278v] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ta-member[b-vgrwaf278v] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--surface-inset);
    border-radius: var(--radius-sm);
    font-size: 13px;
    border: 1px solid var(--border-subtle);
}

.ta-member-name[b-vgrwaf278v] {
    font-weight: 500;
    color: var(--text-primary);
}

.ta-member-identity[b-vgrwaf278v] {
    font-size: 11px;
    color: var(--text-muted);
    font-family: 'Space Mono', monospace;
}

.ta-member-role[b-vgrwaf278v] {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 99px;
    background: var(--surface-inset);
    color: var(--text-muted);
    white-space: nowrap;
}

.ta-role-tech-lead[b-vgrwaf278v] {
    background: rgba(33, 207, 178, 0.12);
    color: var(--brand-teal);
}

.ta-role-eng-leader[b-vgrwaf278v] {
    background: rgba(99, 102, 241, 0.12);
    color: #6366f1;
}

/* Modal */
.ta-modal[b-vgrwaf278v] {
    max-width: 600px;
}

/* .ta-form-group / .ta-label / .ta-input / .ta-textarea moved to global app.css */

.ta-members-editor[b-vgrwaf278v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ta-member-row[b-vgrwaf278v] {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ta-remove-btn[b-vgrwaf278v] {
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.ta-remove-btn:hover[b-vgrwaf278v] {
    background: var(--status-error-bg);
    color: var(--status-error);
    border-color: var(--status-error-border);
}

/* ── Responsive: mobile ── */
@media (max-width: 768px) {
    .config-tabs[b-vgrwaf278v] {
        flex-direction: column;
    }

    .config-panel-toolbar[b-vgrwaf278v] {
        flex-direction: column;
        gap: 12px;
    }

    .dt-th-state[b-vgrwaf278v] { width: auto; }
    .dt-th-days[b-vgrwaf278v]  { width: auto; }

    .dt-td[b-vgrwaf278v], .dt-th[b-vgrwaf278v] {
        padding: 8px 10px;
        font-size: 12px;
    }

    .dt-input-days[b-vgrwaf278v] {
        max-width: 80px;
    }
}

@media (max-width: 900px) {
    .config-tabs[b-vgrwaf278v] {
        overflow-x: auto;
    }
}
/* /Pages/TenantConfig.razor.rz.scp.css */
.tc-page[b-p7rg7i7d9o] {
    max-width: 1400px;
}

/* ── Tabs ──────────────────────────────────────────────────────────────── */

.tc-tabs[b-p7rg7i7d9o] {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--border-default);
    padding-bottom: 0;
}

.tc-tab-btn[b-p7rg7i7d9o] {
    padding: 0.625rem 1.25rem;
    border: none;
    background: none;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    border-radius: 0;
}
.tc-tab-btn:hover[b-p7rg7i7d9o] { color: var(--text-primary); }
.tc-tab-btn.active[b-p7rg7i7d9o] {
    color: var(--brand-teal);
    border-bottom-color: var(--brand-teal);
    font-weight: 600;
}
/* /Pages/WeeklyBriefing.razor.rz.scp.css */
.briefing-page[b-yeeyuxcbuu] {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 1440px;
	margin: 0 auto;
}

.briefing-card[b-yeeyuxcbuu],
.briefing-meta-card[b-yeeyuxcbuu],
.domain-card[b-yeeyuxcbuu],
.change-list-card[b-yeeyuxcbuu] {
	background: var(--surface-card);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
}

.briefing-card h2[b-yeeyuxcbuu],
.domain-card h2[b-yeeyuxcbuu],
.change-list-card h2[b-yeeyuxcbuu] {
	margin: 0;
	color: var(--text-primary);
}

.briefing-card[b-yeeyuxcbuu],
.change-list-card[b-yeeyuxcbuu] {
	padding: 20px;
}

.briefing-meta-card[b-yeeyuxcbuu] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 16px;
	padding: 18px 20px;
}

.briefing-meta-label[b-yeeyuxcbuu],
.metric-label[b-yeeyuxcbuu] {
	color: var(--text-muted);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.briefing-meta-value[b-yeeyuxcbuu],
.metric-value[b-yeeyuxcbuu] {
	color: var(--text-primary);
	font-size: 20px;
	font-weight: 700;
	margin-top: 4px;
}

.first-run-card[b-yeeyuxcbuu],
.partial-card[b-yeeyuxcbuu] {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-left: 4px solid var(--status-warning);
}

.summary-list[b-yeeyuxcbuu],
.notable-list[b-yeeyuxcbuu],
.partial-card ul[b-yeeyuxcbuu] {
	margin: 12px 0 0;
	padding-left: 20px;
}

.summary-list li[b-yeeyuxcbuu] {
	margin-bottom: 8px;
	color: var(--text-secondary);
}

.change-grid[b-yeeyuxcbuu] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
}

.change-list[b-yeeyuxcbuu] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 14px;
}

.change-item[b-yeeyuxcbuu] {
	border-left: 3px solid var(--border-default);
	padding-left: 12px;
}

.change-item-title[b-yeeyuxcbuu] {
	color: var(--text-primary);
	font-weight: 700;
}

.change-item-detail[b-yeeyuxcbuu],
.change-item-domain[b-yeeyuxcbuu],
.domain-unavailable-reason[b-yeeyuxcbuu] {
	color: var(--text-secondary);
	font-size: 13px;
}

.domain-grid[b-yeeyuxcbuu] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: 16px;
}

.domain-card[b-yeeyuxcbuu] {
	padding: 20px;
}

.domain-card-header[b-yeeyuxcbuu] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}

.domain-unavailable[b-yeeyuxcbuu] {
	opacity: 0.82;
}

.metric-grid[b-yeeyuxcbuu] {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
	gap: 12px;
}

.metric-tile[b-yeeyuxcbuu] {
	background: var(--surface-inset);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: 14px;
}

.metric-delta[b-yeeyuxcbuu] {
	font-size: 12px;
	margin-top: 4px;
}

.notable-list[b-yeeyuxcbuu] {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-left: 0;
	list-style: none;
}

.notable-list li[b-yeeyuxcbuu] {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	border-top: 1px solid var(--border-default);
	padding-top: 10px;
}

.notable-list small[b-yeeyuxcbuu] {
	display: block;
	color: var(--text-secondary);
	margin-top: 2px;
}

.status-pill[b-yeeyuxcbuu] {
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 8px;
	text-transform: uppercase;
}

.status-pill-attention[b-yeeyuxcbuu] {
	background: color-mix(in srgb, var(--status-warning) 16%, transparent);
	color: var(--status-warning);
}

.tone-positive[b-yeeyuxcbuu] {
	color: var(--status-success);
}

.tone-negative[b-yeeyuxcbuu] {
	color: var(--status-error);
}

.tone-attention[b-yeeyuxcbuu] {
	color: var(--status-warning);
}

.tone-neutral[b-yeeyuxcbuu] {
	color: var(--text-muted);
}

@media print {
	.sidebar[b-yeeyuxcbuu],
	.print-button[b-yeeyuxcbuu] {
		display: none !important;
	}

	.briefing-page[b-yeeyuxcbuu] {
		max-width: none;
		gap: 12px;
	}

	.briefing-card[b-yeeyuxcbuu],
	.briefing-meta-card[b-yeeyuxcbuu],
	.domain-card[b-yeeyuxcbuu],
	.change-list-card[b-yeeyuxcbuu] {
		box-shadow: none;
		break-inside: avoid;
	}
}