/*
 * Product Analysis - shared design primitives.
 *
 * Global (not CSS-isolated) on purpose: the Product Analysis page is split across many
 * components (Hero, TabNav, Overview/Areas/Findings/Scans panels, Area detail, scan run drawer).
 * Blazor CSS isolation scopes a .razor.css file to the elements that specific component renders
 * directly, so a shared class like .pa-status-pill used by half a dozen different components
 * cannot live in any single component's scoped file without `::deep` plumbing everywhere.
 * Keeping the shared visual language here (loaded once via App.razor, same pattern as
 * css/variables.css) means every Product Analysis component renders identical cards, pills,
 * buttons, and status colors from one source of truth. Component-specific layout (grid column
 * counts, unique widths) still lives in each component's own scoped .razor.css.
 */

.product-analysis-page {
    min-height: 100vh;
    overflow-y: auto;
    background: var(--bg-colors-default-primary, var(--theme-neutral-0, #fff));
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    padding: 32px clamp(20px, 4vw, 56px) 56px;
}

.pa-kicker {
    display: block;
    margin-bottom: 8px;
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

/* Card utility — applied alongside a semantic class wherever a bordered card is needed
   (hero panels, tab-panel cards, selector/detail panels, the unavailable-module message). */
.pa-panel {
    border: 1px solid var(--border-colors-default-secondary, var(--theme-neutral-100, #E6E6E9));
    border-radius: 8px;
    background: var(--bg-colors-default-primary, var(--theme-neutral-0, #fff));
    padding: 20px;
}

.pa-tab-panel {
    display: block;
    max-width: 1200px;
    margin: 0 auto;
}

.pa-section-heading {
    margin-bottom: 16px;
}

.pa-section-heading h2 {
    margin: 0;
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0;
}

.pa-section-heading-wide {
    margin-bottom: 14px;
}

.pa-muted-text {
    margin: 0;
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.92rem;
    line-height: 1.5;
}

.pa-empty-state,
.pa-empty-panel p {
    margin: 0;
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.92rem;
}

.pa-empty-panel {
    display: flex;
    min-height: 120px;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pa-inline-notice {
    border: 1px solid currentColor;
    border-radius: 6px;
    background: var(--bg-colors-default-secondary, var(--theme-neutral-25, #F9F9FA));
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.45;
    padding: 10px 12px;
}

/* ---------- Chips and pills ---------- */

.pa-chip-row,
.pa-collection-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pa-collection-row {
    padding-top: 2px;
}

.pa-chip,
.pa-collection-row span,
.pa-status-pill,
.pa-severity-pill {
    display: inline-flex;
    min-height: 28px;
    align-items: center;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
}

.pa-chip,
.pa-collection-row span {
    border: 1px solid var(--border-colors-default-secondary, var(--theme-neutral-200, #D7D7DC));
    background: var(--bg-colors-default-secondary, var(--theme-neutral-25, #F9F9FA));
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    padding: 4px 10px;
}

.pa-chip-warning {
    border-color: var(--accent-warning-300, #F9D89A);
    background: var(--accent-warning-50, #FFF8EA);
    color: var(--accent-warning-800, #7A4A00);
}

.pa-status-pill,
.pa-severity-pill {
    flex: 0 0 auto;
    border: 1px solid currentColor;
    padding: 5px 9px;
}

/* ---------- Buttons ---------- */

.pa-action-button {
    min-height: 40px;
    border: 1px solid var(--theme-neutral-900, #2E2E38);
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-size: 1rem;
    font-weight: 500;
    padding: 0.5rem 1.5rem;
}

.pa-action-button.primary {
    background-color: var(--theme-neutral-900, #2E2E38);
    color: var(--theme-neutral-0, #fff);
    border-color: var(--theme-neutral-900, #2E2E38);
}

.pa-action-button.primary:hover:not(:disabled) {
    background-color: var(--theme-neutral-1000, #1a1a20);
    border-color: var(--theme-neutral-1000, #1a1a20);
}

.pa-action-button.secondary {
    background-color: var(--bg-colors-default-primary, #fff);
    color: var(--text-colors-default-primary, var(--theme-neutral-800, #2E2E38));
    border-color: var(--border-colors-default-secondary, var(--theme-neutral-300, #C3C3CB));
}

.pa-action-button.secondary:hover:not(:disabled) {
    background-color: var(--bg-colors-default-secondary, var(--theme-neutral-50, #F3F3F5));
    border-color: var(--border-colors-default-primary, var(--theme-neutral-500, #9897A6));
}

.pa-action-button:focus-visible {
    outline: 2px solid var(--color-yellow-400, #FFE600);
    outline-offset: 1px;
}

.pa-action-button.primary:disabled,
.pa-action-button.secondary:disabled,
.pa-action-button.danger:disabled {
    cursor: not-allowed;
    opacity: 1;
}

.pa-action-button.primary:disabled {
    background-color: var(--theme-neutral-500, #9897A6);
    color: var(--theme-neutral-0, #fff);
    border-color: var(--theme-neutral-500, #9897A6);
}

.pa-action-button.secondary:disabled {
    background-color: var(--bg-colors-default-secondary, var(--theme-neutral-50, #F3F3F5));
    color: var(--text-colors-disabled, var(--theme-neutral-500, #9897A6));
    border-color: var(--border-colors-default-secondary, var(--theme-neutral-300, #C3C3CB));
}

.pa-action-button.danger {
    background-color: var(--bg-colors-default-primary, #fff);
    color: var(--accent-error-800, #8F100A);
    border-color: var(--accent-error-500, #C9251C);
}

.pa-action-button.danger:hover:not(:disabled) {
    background-color: var(--accent-error-50, #FCF5F3);
    border-color: var(--accent-error-800, #8F100A);
}

.pa-action-button.danger:disabled {
    background-color: var(--bg-colors-default-secondary, var(--theme-neutral-50, #F3F3F5));
    color: var(--text-colors-disabled, var(--theme-neutral-500, #9897A6));
    border-color: var(--border-colors-default-secondary, var(--theme-neutral-300, #C3C3CB));
}

.pa-text-button {
    border: 0;
    background: transparent;
    color: var(--theme-neutral-900, #2E2E38);
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 0;
    text-align: left;
    text-decoration: underline;
    text-decoration-color: var(--color-yellow-400, #FFE600);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.pa-text-button:hover,
.pa-text-button:focus-visible {
    outline: 2px solid var(--color-yellow-400, #FFE600);
    outline-offset: 2px;
}

.pa-text-button:disabled {
    color: var(--text-colors-disabled, var(--theme-neutral-500, #9897A6));
    cursor: not-allowed;
    text-decoration-color: var(--theme-neutral-300, #C3C3CB);
}

/* ---------- Data tables (Scans tab: "Recent scan runs") ---------- */

.pa-table-container {
    width: 100%;
    overflow-x: auto;
}

.pa-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    table-layout: fixed;
}

.pa-table th,
.pa-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-colors-default-secondary, var(--theme-neutral-100, #E6E6E9));
    text-align: left;
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.pa-table th {
    background: var(--bg-colors-default-secondary, var(--theme-neutral-25, #F9F9FA));
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pa-table tbody tr:hover,
.pa-table tbody tr.selected {
    background: var(--bg-colors-hover-primary, var(--theme-neutral-25, #F9F9FA));
}

.pa-table tbody tr.selected {
    box-shadow: inset 4px 0 0 var(--color-yellow-400, #FFE600);
}

.pa-table td strong,
.pa-table td span {
    display: block;
}

.pa-table td > span:not(.pa-status-pill) {
    margin-top: 4px;
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.78rem;
}

.pa-table code {
    border-radius: 4px;
    background: var(--bg-colors-default-secondary, var(--theme-neutral-25, #F9F9FA));
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.78rem;
    padding: 2px 5px;
}

.pa-table-caption {
    margin: 0 0 10px;
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.82rem;
}

/* Scan trigger / repository-select form — shared by the Scans panel (bulk trigger) and the
   Area detail drill-in (trigger scoped to one area). */
.pa-scan-form {
    display: grid;
    gap: 14px;
}

.pa-scan-form label {
    display: grid;
    gap: 6px;
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.82rem;
    font-weight: 700;
}

.pa-scan-form select {
    min-height: 42px;
    border: 1px solid var(--border-colors-default-secondary, var(--theme-neutral-200, #D7D7DC));
    border-radius: 6px;
    background: var(--bg-colors-default-primary, var(--theme-neutral-0, #fff));
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font: inherit;
    padding: 8px 10px;
}

.pa-scan-action-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1rem;
}

/* ---------- Master list + detail workspace (Areas, Findings) ---------- */

.pa-workspace {
    display: grid;
    grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.pa-selector-panel {
    min-width: 0;
    position: sticky;
    top: 16px;
}

.pa-selector-list,
.pa-priority-list,
.pa-inline-list {
    display: grid;
    gap: 10px;
}

.pa-selector-card,
.pa-readiness-card,
.pa-priority-item,
.pa-inline-item {
    display: grid;
    width: 100%;
    min-width: 0;
    border: 1px solid var(--border-colors-default-secondary, var(--theme-neutral-100, #E6E6E9));
    border-left-width: 4px;
    border-radius: 8px;
    background: var(--bg-colors-default-primary, var(--theme-neutral-0, #fff));
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    cursor: pointer;
    font-family: inherit;
    gap: 4px 12px;
    padding: 10px 12px;
    text-align: left;
}

.pa-selector-card,
.pa-readiness-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
}

.pa-selector-card:hover,
.pa-selector-card:focus-visible,
.pa-priority-item:hover,
.pa-priority-item:focus-visible,
.pa-inline-item:hover,
.pa-inline-item:focus-visible {
    border-color: var(--theme-neutral-900, #2E2E38);
    outline: 2px solid var(--color-yellow-400, #FFE600);
    outline-offset: 1px;
}

.pa-selector-card.selected {
    border-color: currentColor;
    background: var(--bg-colors-default-secondary, var(--theme-neutral-25, #F9F9FA));
    box-shadow: inset 0 0 0 1px currentColor;
}

.pa-selector-card strong,
.pa-readiness-card strong,
.pa-priority-item strong,
.pa-inline-item strong {
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font-size: 0.95rem;
    line-height: 1.25;
}

.pa-selector-card .pa-selector-eyebrow,
.pa-readiness-card .pa-selector-eyebrow,
.pa-selector-card > span:not(.pa-selector-eyebrow),
.pa-readiness-card > span:not(.pa-selector-eyebrow) {
    grid-column: 1 / -1;
}

.pa-selector-card > em,
.pa-readiness-card > em {
    min-width: 42px;
    justify-self: end;
    align-self: start;
    border: 1px solid currentColor;
    border-radius: 999px;
    padding: 2px 8px;
    text-align: center;
}

.pa-selector-card span,
.pa-selector-card em,
.pa-readiness-card span,
.pa-readiness-card em,
.pa-priority-item span,
.pa-priority-item small,
.pa-inline-item span,
.pa-inline-list p {
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.35;
}

.pa-readiness-card {
    cursor: default;
}

.pa-selector-eyebrow {
    text-transform: uppercase;
}

.pa-inline-item {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
}

.pa-inline-list h3 {
    margin: 0;
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font-size: 1rem;
}

/* ---------- Detail panel (right-hand side of a workspace, or a standalone drill-in) ---------- */

.pa-detail-panel {
    display: grid;
    gap: 16px;
    border-left-width: 4px;
    padding: 24px;
}

.pa-detail-header,
.pa-finding-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
}

.pa-detail-header {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-colors-default-secondary, var(--theme-neutral-100, #E6E6E9));
}

.pa-detail-header h2,
.pa-finding-header h2 {
    margin: 0;
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.25;
}

.pa-detail-header p {
    margin: 8px 0 0;
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.92rem;
    line-height: 1.45;
}

.pa-area-rationale,
.pa-finding-card p {
    margin: 0;
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.92rem;
    line-height: 1.5;
}

/* ---------- Key/value grids (definition list style, no per-cell boxes) ---------- */

.pa-definition-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
    margin: 0;
}

.pa-definition-grid div {
    min-width: 0;
}

.pa-definition-grid dt {
    margin-bottom: 4px;
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.78rem;
    font-weight: 700;
}

.pa-definition-grid dd {
    margin: 0;
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font-size: 0.92rem;
    overflow-wrap: anywhere;
}

/* Meta grid: a row of labelled values separated by a hairline, not individually boxed —
   avoids the "boxes nested inside boxes" look of stacking a bordered cell per field. */
.pa-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-colors-default-secondary, var(--theme-neutral-100, #E6E6E9));
}

.pa-meta-grid > div {
    min-width: 0;
    display: grid;
    gap: 4px;
    overflow-wrap: anywhere;
}

.pa-meta-grid span {
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

.pa-meta-grid strong {
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.25;
}

.pa-score-track {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-colors-default-secondary, var(--theme-neutral-50, #F3F3F5));
    overflow: hidden;
}

.pa-score-fill {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: inherit;
}

/* ---------- Findings ---------- */

.pa-finding-id {
    display: block;
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.76rem;
    font-weight: 700;
}

.pa-recommendation {
    border-radius: 6px;
    background: var(--bg-colors-default-secondary, var(--theme-neutral-25, #F9F9FA));
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font-size: 0.9rem;
    line-height: 1.45;
    padding: 10px 12px;
}

.pa-finding-summary {
    margin: 0;
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font-size: 0.95rem;
    line-height: 1.5;
}

.pa-evidence-list {
    display: grid;
    gap: 10px;
}

.pa-evidence-item {
    display: grid;
    gap: 7px;
    margin: 0;
    border: 1px solid var(--border-colors-default-secondary, var(--theme-neutral-100, #E6E6E9));
    border-radius: 6px;
    background: var(--bg-colors-default-secondary, var(--theme-neutral-25, #F9F9FA));
    padding: 12px;
}

.pa-evidence-item figcaption {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    color: var(--text-colors-default-primary, var(--theme-neutral-900, #2E2E38));
    font-size: 0.86rem;
}

.pa-evidence-item figcaption span,
.pa-evidence-path {
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
}

.pa-evidence-path,
.pa-evidence-item blockquote {
    overflow-wrap: anywhere;
}

.pa-evidence-item blockquote {
    margin: 0;
    border-left: 3px solid var(--border-colors-default-secondary, var(--theme-neutral-300, #C3C3CB));
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
    font-size: 0.86rem;
    line-height: 1.45;
    padding-left: 10px;
}

/* ---------- Status and severity colors ----------
 * Eight operational/scoring states share this palette everywhere (pills, card borders, trend
 * bars, score fills). Each state gets its own hue so two different states are never rendered
 * identically:
 *  - OnTrack (green), AttentionNeeded (amber), ImmediateAction (red), Running (blue): unchanged.
 *  - Stale (purple) — previously orange, which read as near-identical to AttentionNeeded's amber.
 *    Purple also tells a clearer story: "this data is aging", a cool/neutral concern, not a
 *    warm/urgent one.
 *  - Failed (maroon) — previously the same red as ImmediateAction. Maroon keeps the "negative"
 *    warm-red family (so it doesn't read as a neutral/info color) while staying visually distinct
 *    from the product/trend-level ImmediateAction red.
 *  - NotApplicable — same neutral gray as Missing (both are "no concern"), but dashed borders so
 *    "intentionally excluded" reads differently from "absent/not yet scanned".
 */

.state-on-track {
    border-color: var(--accent-success-500, #168736);
    color: var(--accent-success-800, #0A3616);
}

.state-on-track.pa-trend-bar,
.state-on-track.pa-score-fill {
    background: var(--accent-success-500, #168736);
}

.state-attention-needed {
    border-color: var(--accent-warning-500, #D98600);
    color: var(--accent-warning-800, #7A4A00);
}

.state-attention-needed.pa-trend-bar,
.state-attention-needed.pa-score-fill {
    background: var(--accent-warning-500, #D98600);
}

.state-immediate-action {
    border-color: var(--accent-error-500, #C9251C);
    color: var(--accent-error-800, #8F100A);
}

.state-immediate-action.pa-trend-bar,
.state-immediate-action.pa-score-fill {
    background: var(--accent-error-500, #C9251C);
}

.state-running {
    border-color: var(--accent-info-500, #3A80D2);
    color: var(--accent-info-800, #0B4E8A);
}

.state-running.pa-trend-bar,
.state-running.pa-score-fill {
    background: var(--accent-info-500, #3A80D2);
}

.state-stale {
    border-color: var(--color-purple-500, #7C5CBF);
    color: var(--color-purple-800, #4A2E8F);
}

.state-stale.pa-trend-bar,
.state-stale.pa-score-fill {
    background: var(--color-purple-500, #7C5CBF);
}

.state-failed {
    border-color: var(--color-maroon-500, #8C2F4B);
    color: var(--color-maroon-800, #5C2036);
}

.state-failed.pa-trend-bar,
.state-failed.pa-score-fill {
    background: var(--color-maroon-500, #8C2F4B);
}

.state-missing,
.state-not-applicable {
    border-color: var(--theme-neutral-400, #AFAEBA);
    color: var(--text-colors-default-secondary, var(--theme-neutral-700, #656579));
}

.state-missing.pa-trend-bar,
.state-missing.pa-score-fill,
.state-not-applicable.pa-trend-bar,
.state-not-applicable.pa-score-fill {
    background: var(--theme-neutral-400, #AFAEBA);
}

.state-not-applicable.pa-status-pill,
.state-not-applicable.pa-selector-card,
.state-not-applicable.pa-detail-panel,
.state-not-applicable.pa-coverage-item {
    border-style: dashed;
}

.pa-status-pill.state-on-track {
    background: var(--accent-success-50, #E7FCE8);
}

.pa-status-pill.state-attention-needed {
    background: var(--accent-warning-50, #FFF8EA);
}

.pa-status-pill.state-immediate-action {
    background: var(--accent-error-50, #FCF5F3);
}

.pa-status-pill.state-running {
    background: var(--accent-info-50, #F4F7FC);
}

.pa-status-pill.state-stale {
    background: var(--color-purple-25, #F8F6FA);
}

.pa-status-pill.state-failed {
    background: var(--color-maroon-25, #FAF5F8);
}

.pa-status-pill.state-missing,
.pa-status-pill.state-not-applicable {
    background: var(--theme-neutral-50, #F3F3F5);
}

.severity-critical {
    border-color: var(--accent-error-500, #C9251C);
    color: var(--accent-error-800, #8F100A);
}

.severity-high {
    border-color: var(--color-orange-500, #D07200);
    color: var(--color-orange-800, #723600);
}

.severity-medium {
    border-color: var(--accent-warning-500, #D98600);
    color: var(--accent-warning-800, #7A4A00);
}

.severity-info {
    border-color: var(--accent-info-500, #3A80D2);
    color: var(--accent-info-800, #0B4E8A);
}

.pa-severity-pill.severity-critical {
    background: var(--accent-error-50, #FCF5F3);
}

.pa-severity-pill.severity-high,
.pa-severity-pill.severity-medium {
    background: var(--accent-warning-50, #FFF8EA);
}

.pa-severity-pill.severity-info {
    background: var(--accent-info-50, #F4F7FC);
}

@media (max-width: 1180px) {
    .pa-workspace {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 820px) {
    .product-analysis-page {
        padding: 24px 16px 40px;
    }

    .pa-definition-grid,
    .pa-meta-grid {
        grid-template-columns: 1fr;
    }

    .pa-selector-panel {
        position: static;
    }

    .pa-detail-header,
    .pa-finding-header {
        display: grid;
    }
}