/* ============================================================================ C3 SECURITY COMMAND CENTER LeadtheAI Design System — Ink + Signal Amber Framework-agnostic. Light & Dark via .dark class on . ============================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } /* ============================================ THREAT INTELLIGENCE V2 ============================================ */ .threat-intel-page { --ti-cyan: #087ea4; --ti-green: #16865b; --ti-amber: #a86008; --ti-red: #c43d55; display: flex; flex-direction: column; gap: var(--space-4); padding-bottom: var(--space-8); animation: none; } .dark .threat-intel-page { --ti-cyan: #38bdf8; --ti-green: #4ade80; --ti-amber: #fbbf24; --ti-red: #fb7185; } .threat-intel-commandbar, .threat-intel-viewbar, .threat-intel-panel__header, .threat-intel-commandbar__context, .threat-intel-commandbar__actions, .threat-intel-report__meta, .threat-intel-report__footer, .threat-intel-detail__actions, .threat-intel-report-detail-meta { display: flex; align-items: center; } .threat-intel-commandbar { min-height: 52px; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); } .threat-intel-commandbar__context { gap: var(--space-4); min-width: 0; } .threat-intel-commandbar__actions { gap: var(--space-3); flex-shrink: 0; } .threat-intel-eyebrow { color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; } .threat-intel-freshness { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); } .threat-intel-freshness__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--text-muted) 14%, transparent); } .threat-intel-freshness.healthy .threat-intel-freshness__dot { background: var(--ti-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ti-green) 14%, transparent); } .threat-intel-freshness.degraded .threat-intel-freshness__dot { background: var(--ti-amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ti-amber) 14%, transparent); } .threat-intel-freshness.checking .threat-intel-freshness__dot { background: var(--ti-blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ti-blue) 14%, transparent); } .threat-intel-refreshed { color: var(--text-muted); font-size: var(--text-xs); } .threat-intel-refresh { width: 36px; height: 36px; border: 1px solid var(--border-default); background: var(--bg-elevated); } .threat-intel-degraded { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid color-mix(in srgb, var(--ti-amber) 38%, var(--border-default)); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--ti-amber) 7%, var(--bg-surface)); color: var(--text-secondary); } .threat-intel-degraded > i { color: var(--ti-amber); font-size: 21px; } .threat-intel-degraded > div { display: grid; gap: 2px; flex: 1; min-width: 0; } .threat-intel-degraded strong { color: var(--text-primary); font-size: var(--text-sm); } .threat-intel-degraded span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); } .threat-intel-source-strip { display: flex; align-items: center; gap: var(--space-3); min-height: 46px; padding: var(--space-2) var(--space-3); overflow: hidden; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); } .threat-intel-source-strip__label { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding-right: var(--space-3); border-right: 1px solid var(--border-subtle); color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; } .threat-intel-source-strip__label i { color: var(--ti-cyan); font-size: 16px; } .threat-intel-source-strip__items { display: flex; align-items: center; gap: var(--space-2); min-width: 0; overflow-x: auto; scrollbar-width: none; } .threat-intel-source-strip__items::-webkit-scrollbar { display: none; } .threat-intel-source-chip { display: inline-grid; grid-template-columns: 7px auto auto; align-items: center; gap: 6px; flex-shrink: 0; min-height: 28px; padding: 3px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-elevated); } .threat-intel-source-chip > i { width: 7px; height: 7px; border-radius: 50%; background: var(--ti-green); } .threat-intel-source-chip > strong { color: var(--text-primary); font-size: var(--text-xs); font-weight: 600; } .threat-intel-source-chip > span { color: var(--text-muted); font-size: 9px; text-transform: uppercase; } .threat-intel-source-chip > time { grid-column: 2 / -1; display: none; color: var(--text-muted); font-size: 9px; } .threat-intel-source-chip.is-stale > i, .threat-intel-source-chip.is-degraded > i { background: var(--ti-amber); } .threat-intel-source-chip.is-failed > i { background: var(--ti-red); } .threat-intel-source-chip.is-disabled { opacity: .62; } .threat-intel-source-chip.is-disabled > i { background: var(--text-muted); } .threat-intel-source-chip.is-syncing > i { background: var(--ti-cyan); animation: ti-pulse 1.4s ease-in-out infinite; } .threat-intel-source-strip__loading { display: flex; gap: var(--space-2); } .threat-intel-source-strip__loading span { width: 116px; height: 28px; border-radius: var(--radius-md); background: var(--bg-elevated); animation: ti-pulse 1.5s ease-in-out infinite; } .threat-intel-source-strip__empty { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex: 1; color: var(--text-muted); font-size: var(--text-xs); } .threat-intel-view { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; } .threat-intel-viewbar { justify-content: space-between; gap: var(--space-4); min-height: 48px; } .threat-intel-viewbar__actions { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .threat-intel-viewbar h2 { margin: 0 0 3px; color: var(--text-primary); font-size: var(--text-xl); font-weight: 650; } .threat-intel-viewbar p { margin: 0; color: var(--text-muted); font-size: var(--text-sm); } .threat-intel-result-count { flex-shrink: 0; color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .threat-intel-scope { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--ti-cyan) 26%, var(--border-default)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--ti-cyan) 7%, var(--bg-surface)); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } .threat-intel-scope i { color: var(--ti-cyan); font-size: 14px; } .threat-intel-range, .threat-intel-mode { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-elevated); } .threat-intel-range button, .threat-intel-mode button { min-height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; cursor: pointer; } .threat-intel-range button:hover, .threat-intel-mode button:hover { color: var(--text-primary); } .threat-intel-range button.active, .threat-intel-mode button.active { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); } .threat-intel-mode button:disabled { color: var(--text-muted); cursor: not-allowed; opacity: .55; } .threat-intel-catalog-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); } .threat-intel-catalog-metric { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: var(--space-3); min-height: 82px; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); } .threat-intel-catalog-metric__icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--ti-cyan) 24%, var(--border-default)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--ti-cyan) 7%, var(--bg-elevated)); color: var(--ti-cyan); font-size: 18px; } .threat-intel-catalog-metric > span:last-child { display: grid; gap: 3px; min-width: 0; } .threat-intel-catalog-metric small { overflow: hidden; color: var(--text-muted); font-size: 10px; font-weight: 700; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .threat-intel-catalog-metric strong { color: var(--text-primary); font-size: var(--text-xl); font-weight: 550; line-height: 1; font-variant-numeric: tabular-nums; } .threat-intel-partial-note { display: flex; align-items: center; gap: 6px; margin: calc(var(--space-3) * -1) 0 0; color: var(--text-muted); font-size: 10px; } .threat-intel-partial-note i { color: var(--ti-amber); font-size: 13px; } .threat-intel-kpi-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } .threat-intel-kpi { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: var(--space-3); min-height: 132px; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); } .threat-intel-kpi--priority { border-color: color-mix(in srgb, var(--ti-cyan) 45%, var(--border-subtle)); } .threat-intel-kpi__icon, .threat-intel-type-icon, .threat-intel-report__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--ti-cyan); } .threat-intel-kpi__icon { width: 42px; height: 42px; border-radius: var(--radius-md); font-size: 20px; } .threat-intel-kpi__body { display: flex; flex-direction: column; min-width: 0; } .threat-intel-kpi__body > span { color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; } .threat-intel-kpi__body > strong { margin: 4px 0; color: var(--text-primary); font-size: 2.125rem; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; } .threat-intel-kpi__body > strong em { color: var(--text-muted); font-size: var(--text-base); font-style: normal; } .threat-intel-kpi__body > small { color: var(--text-muted); font-size: 11px; line-height: 1.35; } .threat-intel-delta { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; align-items: center; gap: 3px; color: var(--ti-green); font-size: var(--text-xs); } .threat-intel-delta.down { color: var(--ti-red); } .threat-intel-overview-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: var(--space-4); } .threat-intel-overview-grid--lists { grid-template-columns: repeat(2, minmax(0, 1fr)); } .threat-intel-panel { min-width: 0; padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); } .threat-intel-panel__header { justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .threat-intel-panel__header h3 { margin: 0 0 3px; color: var(--text-primary); font-size: var(--text-base); } .threat-intel-panel__header p { margin: 0; color: var(--text-muted); font-size: var(--text-xs); } .threat-intel-panel__signal { flex-shrink: 0; color: var(--ti-cyan); font-size: 21px; } .threat-intel-panel__signal--red { color: var(--ti-red); } .threat-intel-panel__signal--amber { color: var(--ti-amber); } .threat-intel-activity { display: flex; align-items: stretch; gap: clamp(4px, 1vw, 12px); height: 210px; padding-top: 22px; overflow: hidden; } .threat-intel-activity__point { position: relative; display: flex; flex: 1 1 0; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 8px; } .threat-intel-activity__bar { width: min(32px, 72%); min-height: 3px; border-radius: 3px 3px 0 0; background: var(--ti-cyan); opacity: .78; transition: opacity var(--duration-fast); } .threat-intel-activity__point:hover .threat-intel-activity__bar { opacity: 1; } .threat-intel-activity__value { position: absolute; top: -18px; color: var(--text-secondary); font-size: 10px; opacity: 0; } .threat-intel-activity__point:hover .threat-intel-activity__value { opacity: 1; } .threat-intel-activity time { width: 100%; overflow: hidden; color: var(--text-muted); font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .threat-intel-bars { display: grid; gap: var(--space-3); } .threat-intel-bar-row { display: grid; gap: 6px; } .threat-intel-bar-row > div { display: flex; justify-content: space-between; gap: var(--space-3); color: var(--text-secondary); font-size: var(--text-xs); } .threat-intel-bar-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; } .threat-intel-bar-track { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: var(--bg-elevated); } .threat-intel-bar-track > span { display: block; height: 100%; border-radius: inherit; background: var(--ti-cyan); } .threat-intel-bar-track--red > span { background: var(--ti-red); } .threat-intel-bar-track--amber > span { background: var(--ti-amber); } .threat-intel-ranked-list, .threat-intel-vulnerability-list { margin: 0; list-style: none; } .threat-intel-ranked-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 64px; border-top: 1px solid var(--border-subtle); } .threat-intel-ranked-list li:first-child { border-top: 0; } .threat-intel-rank { color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; } .threat-intel-ranked-list__body { display: grid; gap: 4px; min-width: 0; } .threat-intel-ranked-list__body strong { overflow: hidden; color: var(--text-primary); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; } .threat-intel-ranked-list__body small { overflow: hidden; color: var(--text-muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .threat-intel-ranked-list__value { min-width: 32px; color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; text-align: right; } .threat-intel-country-list, .threat-intel-sector-list { display: grid; } .threat-intel-country-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 56px; border-top: 1px solid var(--border-subtle); } .threat-intel-country-row:first-child, .threat-intel-sector-row:first-child { border-top: 0; } .threat-intel-country-code { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 28px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-secondary); font-family: var(--font-mono); font-size: 10px; font-weight: 700; } .threat-intel-country-code i { color: var(--ti-cyan); font-size: 15px; } .threat-intel-country-row > span:nth-child(2) { display: grid; gap: 7px; min-width: 0; } .threat-intel-country-row strong, .threat-intel-sector-row strong { overflow: hidden; color: var(--text-primary); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; } .threat-intel-country-row > strong, .threat-intel-sector-row > strong { color: var(--text-secondary); font-variant-numeric: tabular-nums; } .threat-intel-sector-row { display: grid; grid-template-columns: minmax(130px, .75fr) minmax(100px, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 56px; border-top: 1px solid var(--border-subtle); } .threat-intel-sector-row__label { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .threat-intel-sector-row__label i { flex-shrink: 0; color: var(--ti-amber); } .threat-intel-relationship-chart { display: flex; align-items: stretch; gap: clamp(4px, 1vw, 10px); height: 190px; padding-top: 24px; overflow: hidden; } .threat-intel-relationship-chart__point { position: relative; display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-width: 7px; } .threat-intel-relationship-chart__point > span { width: min(26px, 72%); min-height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--ti-cyan), color-mix(in srgb, var(--ti-cyan) 52%, var(--ti-green))); opacity: .84; } .threat-intel-relationship-chart__point > strong { position: absolute; top: -19px; color: var(--text-secondary); font-size: 10px; opacity: 0; } .threat-intel-relationship-chart__point:hover > strong { opacity: 1; } .threat-intel-relationship-chart__point time { width: 100%; overflow: hidden; color: var(--text-muted); font-size: 9px; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .threat-intel-vulnerability-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 52px; border-top: 1px solid var(--border-subtle); } .threat-intel-vulnerability-list li:first-child { border-top: 0; } .threat-intel-vulnerability-list__icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--ti-red) 28%, var(--border-default)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ti-red) 7%, var(--bg-surface)); color: var(--ti-red); } .threat-intel-vulnerability-list strong { overflow: hidden; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; } .threat-intel-vulnerability-list > li > span:last-child { color: var(--text-secondary); font-variant-numeric: tabular-nums; } .threat-intel-operational-list { display: grid; } .threat-intel-operational-list button { display: grid; grid-template-columns: 34px minmax(180px, 1fr) minmax(120px, auto) minmax(90px, auto) 16px; align-items: center; gap: var(--space-3); width: 100%; min-height: 62px; padding: var(--space-2) 0; border: 0; border-top: 1px solid var(--border-subtle); background: transparent; color: var(--text-secondary); text-align: left; cursor: pointer; } .threat-intel-operational-list button:first-child { border-top: 0; } .threat-intel-operational-list button:hover:not(:disabled) { background: var(--bg-hover); } .threat-intel-operational-list button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; } .threat-intel-operational-list button:disabled { cursor: default; opacity: .72; } .threat-intel-operational-list__body { display: grid; gap: 4px; min-width: 0; } .threat-intel-operational-list__body strong, .threat-intel-operational-list__body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .threat-intel-operational-list__body strong { color: var(--text-primary); font-size: var(--text-sm); } .threat-intel-operational-list__body small, .threat-intel-operational-list time { color: var(--text-muted); font-size: var(--text-xs); } .threat-intel-operational-list > button > .ph-caret-right { color: var(--text-muted); } .threat-intel-tenant-badge { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 190px; min-height: 24px; padding: 0 7px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--ti-cyan) 23%, var(--border-default)); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--ti-cyan) 6%, var(--bg-elevated)); color: var(--text-secondary); font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .threat-intel-tenant-badge i { flex-shrink: 0; color: var(--ti-cyan); } .threat-intel-tenant-table { overflow-x: auto; } .threat-intel-tenant-table__header, .threat-intel-tenant-table__row { display: grid; grid-template-columns: minmax(190px, 1.3fr) repeat(3, minmax(80px, .55fr)) minmax(125px, .8fr); align-items: center; gap: var(--space-3); min-width: 690px; } .threat-intel-tenant-table__header { min-height: 34px; color: var(--text-muted); font-size: 9px; font-weight: 700; text-transform: uppercase; } .threat-intel-tenant-table__row { min-height: 52px; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--text-xs); } .threat-intel-tenant-table__row > strong { color: var(--text-primary); font-variant-numeric: tabular-nums; } .threat-intel-tenant-table__row time { color: var(--text-muted); } .threat-intel-tenant-name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } .threat-intel-tenant-name i { flex-shrink: 0; color: var(--ti-cyan); } .threat-intel-tenant-name strong { overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; } .threat-intel-compact-list { display: grid; } .threat-intel-compact-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 16px; align-items: center; gap: var(--space-3); width: 100%; min-height: 60px; padding: var(--space-2) 0; border: 0; border-top: 1px solid var(--border-subtle); background: transparent; color: inherit; text-align: left; cursor: pointer; } .threat-intel-compact-row:first-child { border-top: 0; } .threat-intel-compact-row:hover strong { color: var(--ti-cyan); } .threat-intel-type-icon { width: 34px; height: 34px; border-radius: var(--radius-md); } .threat-intel-compact-row__main { display: grid; gap: 3px; min-width: 0; } .threat-intel-compact-row__main strong, .threat-intel-compact-row__main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .threat-intel-compact-row__main strong { color: var(--text-primary); font-size: var(--text-sm); } .threat-intel-compact-row__main small { color: var(--text-muted); font-size: var(--text-xs); } .threat-intel-match-count { display: grid; color: var(--text-muted); text-align: right; } .threat-intel-match-count strong { color: var(--ti-cyan); font-size: var(--text-base); } .threat-intel-match-count small { font-size: 10px; } .threat-intel-tlp { display: inline-flex; align-items: center; min-height: 22px; padding: 0 7px; border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 10px; font-weight: 700; white-space: nowrap; } .threat-intel-state { display: flex; align-items: center; justify-content: center; gap: var(--space-4); min-height: 180px; padding: var(--space-6); border: 1px dashed var(--border-default); border-radius: var(--radius-lg); color: var(--text-muted); text-align: left; } .threat-intel-state > i { color: var(--ti-cyan); font-size: 30px; } .threat-intel-state > div { display: grid; gap: 4px; } .threat-intel-state strong { color: var(--text-primary); } .threat-intel-state p { margin: 0; font-size: var(--text-sm); } .threat-intel-state--error { border-style: solid; border-color: color-mix(in srgb, var(--ti-red) 40%, var(--border-default)); background: color-mix(in srgb, var(--ti-red) 5%, var(--bg-surface)); } .threat-intel-state--error > i { color: var(--ti-red); } .threat-intel-inline-empty { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 120px; color: var(--text-muted); font-size: var(--text-sm); } .threat-intel-inline-empty i { font-size: 20px; } .threat-intel-skeleton { overflow: hidden; background: var(--bg-surface); } .threat-intel-skeleton::after, .threat-intel-table-skeleton span { content: ''; display: block; width: 100%; height: 100%; background: var(--bg-elevated); animation: ti-pulse 1.4s ease-in-out infinite; } @keyframes ti-pulse { 0%, 100% { opacity: .38; } 50% { opacity: .8; } } .threat-intel-filters { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(250px, 1.6fr) repeat(5, minmax(120px, .8fr)) minmax(150px, 1fr) auto; gap: var(--space-2); align-items: center; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); } .threat-intel-filters--reports { grid-template-columns: minmax(280px, 1.35fr) repeat(2, minmax(150px, 1fr)) repeat(2, minmax(130px, .9fr)) minmax(160px, 1fr) auto; } .threat-intel-filters--matches { grid-template-columns: minmax(300px, 1fr) minmax(190px, .3fr) auto; } .threat-intel-search { position: relative; min-width: 0; } .threat-intel-search > i { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; } .threat-intel-search input, .threat-intel-filters select { width: 100%; height: 40px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); font-size: var(--text-sm); } .threat-intel-search input { padding: 0 12px 0 38px; } .threat-intel-filters select { min-width: 0; padding: 0 32px 0 11px; } .threat-intel-filters select[aria-label="Lifecycle status"] { min-width: 150px; } .threat-intel-search input:focus, .threat-intel-filters select:focus { outline: 2px solid var(--ring); outline-offset: 1px; border-color: var(--primary); } .threat-intel-calendar { width: auto; min-width: 160px; } .calendar-filter.threat-intel-calendar { background: var(--bg-surface); color: var(--text-primary); } .threat-intel-calendar .calendar-filter-trigger { min-height: 38px; } .threat-intel-reset { min-height: 40px; white-space: nowrap; } .threat-intel-table-wrap { overflow: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); } .threat-intel-table { width: 100%; min-width: 1050px; border-collapse: collapse; } .threat-intel-table th { height: 44px; padding: 0 var(--space-3); border-bottom: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--text-muted); font-size: 10px; font-weight: 700; text-align: left; text-transform: uppercase; white-space: nowrap; } .threat-intel-table td { height: 68px; padding: var(--space-2) var(--space-3); border-top: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: var(--text-sm); } .threat-intel-table tbody tr { cursor: pointer; transition: background var(--duration-fast); } .threat-intel-table tbody tr:hover { background: var(--bg-hover); } .threat-intel-table tbody tr:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } .threat-intel-indicator-cell { display: grid; grid-template-columns: 36px minmax(0, 1fr) 30px; align-items: center; gap: var(--space-2); min-width: 300px; } .threat-intel-indicator-cell > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; } .threat-intel-indicator-cell strong { overflow: hidden; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-sm); text-overflow: ellipsis; white-space: nowrap; } .threat-intel-indicator-cell small { color: var(--text-muted); font-size: var(--text-xs); text-transform: uppercase; } .threat-intel-indicator-cell .btn-icon { width: 28px; height: 28px; opacity: 0; } .threat-intel-table tr:hover .threat-intel-indicator-cell .btn-icon, .threat-intel-indicator-cell .btn-icon:focus { opacity: 1; } .threat-intel-score { display: grid; gap: 2px; } .threat-intel-score strong { color: var(--text-primary); font-variant-numeric: tabular-nums; } .threat-intel-score small { color: var(--text-muted); font-size: 10px; white-space: nowrap; } .threat-intel-status { display: inline-flex; align-items: center; gap: 7px; min-height: 27px; padding: 0 9px; border: 1px solid var(--border-default); border-radius: 14px; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; text-transform: capitalize; white-space: nowrap; } .threat-intel-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); } .threat-intel-status.active i, .threat-intel-status.healthy i { background: var(--ti-green); } .threat-intel-status.expired i, .threat-intel-status.stale i { background: var(--ti-amber); } .threat-intel-status.revoked i, .threat-intel-status.failed i { background: var(--ti-red); } .threat-intel-sources { display: flex; flex-wrap: wrap; gap: 5px; max-width: 210px; } .threat-intel-sources > span { padding: 3px 7px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-secondary); font-size: 10px; } .threat-intel-sources small, .threat-intel-muted { color: var(--text-muted); font-size: var(--text-xs); } .threat-intel-match-pill { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 9px; border: 1px solid color-mix(in srgb, var(--ti-cyan) 35%, var(--border-default)); border-radius: 14px; background: color-mix(in srgb, var(--ti-cyan) 7%, var(--bg-surface)); color: var(--ti-cyan); font-size: var(--text-xs); cursor: pointer; white-space: nowrap; } .threat-intel-row-caret { color: var(--text-muted); } .threat-intel-table-skeleton td { padding: var(--space-3); } .threat-intel-table-skeleton span { height: 32px; border-radius: var(--radius-sm); } .threat-intel-table-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); min-height: 260px; padding: var(--space-6); color: var(--text-muted); text-align: center; } .threat-intel-table-empty > i { margin-bottom: var(--space-2); color: var(--ti-cyan); font-size: 34px; } .threat-intel-table-empty strong { color: var(--text-primary); } .threat-intel-table-empty p { max-width: 480px; margin: 0 0 var(--space-3); font-size: var(--text-sm); } .threat-intel-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); } .threat-intel-pagination { margin-top: 0; } .threat-intel-report-list { display: grid; gap: var(--space-2); } .threat-intel-report { display: grid; grid-template-columns: 42px minmax(0, 1fr) 18px; align-items: center; gap: var(--space-4); min-height: 104px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast), transform var(--duration-fast); } .threat-intel-report:hover { border-color: color-mix(in srgb, var(--ti-cyan) 32%, var(--border-default)); background: color-mix(in srgb, var(--ti-cyan) 3%, var(--bg-hover)); transform: translateY(-1px); } .threat-intel-report:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .threat-intel-report__icon { width: 42px; height: 42px; border-radius: var(--radius-md); font-size: 20px; } .threat-intel-report__body { display: grid; gap: 7px; min-width: 0; } .threat-intel-report__meta { gap: var(--space-2); color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; } .threat-intel-report__meta > span:not(.threat-intel-tlp) + span:not(.threat-intel-tlp)::before { content: '·'; margin-right: var(--space-2); } .threat-intel-report h3 { margin: 0; overflow: hidden; color: var(--text-primary); font-size: var(--text-base); text-overflow: ellipsis; white-space: nowrap; } .threat-intel-report p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .threat-intel-report__footer { flex-wrap: wrap; gap: var(--space-4); color: var(--text-muted); font-size: var(--text-xs); } .threat-intel-report__footer > * { display: inline-flex; align-items: center; gap: 5px; } .threat-intel-detail-layer { position: fixed; inset: 0; z-index: 1200; display: flex; justify-content: flex-end; width: 100vw; height: 100vh; height: 100dvh; } .threat-intel-detail-backdrop { position: absolute; inset: 0; border: 0; background: rgb(2 6 12 / .68); cursor: default; } .threat-intel-detail { position: relative; display: flex; flex-direction: column; width: min(720px, 94vw); height: 100%; border-left: 1px solid var(--border-default); background: var(--bg-base); box-shadow: var(--shadow-xl); } .threat-intel-detail__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-shrink: 0; min-height: 82px; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-subtle); background: var(--bg-surface); } .threat-intel-detail__header > div { display: grid; gap: 5px; min-width: 0; } .threat-intel-detail__header span { color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; } .threat-intel-detail__header h2 { margin: 0; overflow-wrap: anywhere; color: var(--text-primary); font-family: var(--font-mono); font-size: var(--text-lg); } .threat-intel-detail__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); overflow-y: auto; padding: var(--space-5); } .threat-intel-detail__loading { display: flex; flex: 1; align-items: center; justify-content: center; gap: var(--space-3); color: var(--text-muted); } .threat-intel-detail__actions { flex-wrap: wrap; gap: var(--space-2); } .threat-intel-detail-section { padding: var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); } .threat-intel-detail-section > h3 { display: flex; align-items: center; justify-content: space-between; margin: 0 0 var(--space-4); color: var(--text-primary); font-size: var(--text-sm); } .threat-intel-detail-section > h3 > span { color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; } .threat-intel-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; } .threat-intel-detail-grid > div { min-width: 0; } .threat-intel-detail-grid dt { margin-bottom: 5px; color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; } .threat-intel-detail-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--text-primary); font-size: var(--text-sm); } .threat-intel-pattern { display: grid; gap: 7px; margin-top: var(--space-4); } .threat-intel-pattern > span { color: var(--text-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; } .threat-intel-pattern code { overflow-x: auto; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-base); color: var(--ti-cyan); font-size: var(--text-xs); white-space: pre-wrap; overflow-wrap: anywhere; } .threat-intel-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-4); } .threat-intel-tags > span { padding: 4px 8px; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-secondary); font-size: var(--text-xs); } .threat-intel-evidence-list, .threat-intel-match-list, .threat-intel-reference-list { display: grid; gap: var(--space-2); } .threat-intel-evidence-list article { display: grid; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-elevated); } .threat-intel-evidence-list article > div { display: flex; justify-content: space-between; gap: var(--space-3); } .threat-intel-evidence-list article > div span { color: var(--text-muted); font-size: var(--text-xs); } .threat-intel-evidence-list dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0; } .threat-intel-evidence-list dt { color: var(--text-muted); font-size: 9px; text-transform: uppercase; } .threat-intel-evidence-list dd { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--text-xs); } .threat-intel-evidence-list a { justify-self: start; color: var(--ti-cyan); font-size: var(--text-xs); } .threat-intel-match-list button, .threat-intel-reference-list a { display: grid; grid-template-columns: 22px minmax(0, 1fr) 18px; align-items: center; gap: var(--space-2); min-height: 50px; padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-secondary); text-align: left; text-decoration: none; cursor: pointer; } .threat-intel-match-list button:hover, .threat-intel-reference-list a:hover { border-color: var(--border-subtle); background: var(--bg-hover); } .threat-intel-match-list button span, .threat-intel-reference-list a span { display: grid; gap: 3px; min-width: 0; } .threat-intel-match-list strong, .threat-intel-reference-list strong { color: var(--text-primary); font-size: var(--text-sm); } .threat-intel-match-list small, .threat-intel-reference-list small { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; } .threat-intel-match-list .threat-intel-tenant-badge { display: inline-flex; margin-right: 6px; vertical-align: middle; } .threat-intel-report-detail-meta { flex-wrap: wrap; gap: var(--space-2); color: var(--text-muted); font-size: var(--text-xs); } .threat-intel-report-content { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.65; white-space: pre-wrap; } .threat-intel-alert-title { display: block; max-width: 320px; overflow: hidden; color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; } .threat-intel-cell-meta { display: block; margin-top: 4px; color: var(--text-muted); font-size: 10px; } .threat-intel-match-table { min-width: 1040px; } @media (max-width: 1180px) { .threat-intel-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .threat-intel-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .threat-intel-filters { grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(130px, 1fr)); } .threat-intel-calendar { min-width: 0; } .threat-intel-filters--reports { grid-template-columns: minmax(260px, 1fr) repeat(3, minmax(130px, 1fr)); } } @media (max-width: 820px) { .threat-intel-commandbar { align-items: flex-start; } .threat-intel-commandbar__context { align-items: flex-start; flex-direction: column; gap: 5px; } .threat-intel-refreshed { display: none; } .threat-intel-viewbar { align-items: flex-start; } .threat-intel-viewbar__actions { align-items: flex-end; flex-direction: column; } .threat-intel-catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .threat-intel-overview-grid, .threat-intel-overview-grid--lists { grid-template-columns: 1fr; } .threat-intel-filters, .threat-intel-filters--reports { grid-template-columns: repeat(2, minmax(0, 1fr)); } .threat-intel-filters select[aria-label="Lifecycle status"] { min-width: 0; } .threat-intel-search { grid-column: 1 / -1; } .threat-intel-detail { width: 100%; border-left: 0; } .threat-intel-detail-backdrop { display: none; } .threat-intel-operational-list button { grid-template-columns: 34px minmax(0, 1fr) 16px; } .threat-intel-operational-list .threat-intel-tenant-badge, .threat-intel-operational-list time { grid-column: 2; } .threat-intel-operational-list > button > .ph-caret-right { grid-column: 3; grid-row: 1 / span 3; } } @media (max-width: 560px) { .header-actions > .header-btn { display: none; } .page-subnav--threats .sub-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .page-subnav--threats .sub-tab { justify-content: center; min-width: 0; padding-right: var(--space-2); padding-left: var(--space-2); } .threat-intel-page { gap: var(--space-3); } .threat-intel-commandbar { min-height: 48px; padding: var(--space-2) var(--space-3); } .threat-intel-eyebrow { display: none; } .threat-intel-degraded { align-items: flex-start; } .threat-intel-degraded .threat-intel-source-action { display: none; } .threat-intel-source-strip { align-items: flex-start; flex-direction: column; gap: var(--space-2); } .threat-intel-source-strip__label { width: 100%; padding: 0 0 var(--space-2); border-right: 0; border-bottom: 1px solid var(--border-subtle); } .threat-intel-source-strip__items { flex-wrap: wrap; width: 100%; overflow: visible; } .threat-intel-kpi-grid { grid-template-columns: 1fr; } .threat-intel-catalog-grid { gap: var(--space-2); } .threat-intel-catalog-metric { grid-template-columns: 32px minmax(0, 1fr); min-height: 68px; padding: var(--space-2); } .threat-intel-catalog-metric__icon { width: 32px; height: 32px; font-size: 16px; } .threat-intel-catalog-metric strong { font-size: var(--text-lg); } .threat-intel-kpi { min-height: 108px; } .threat-intel-viewbar { flex-direction: column; } .threat-intel-viewbar__actions { align-items: stretch; width: 100%; } .threat-intel-viewbar__actions > .threat-intel-scope { align-self: flex-start; } .threat-intel-range { width: 100%; } .threat-intel-range button { flex: 1; } .threat-intel-panel { padding: var(--space-3); } .threat-intel-panel__header { align-items: flex-start; } .threat-intel-panel__header p { display: none; } .threat-intel-activity { height: 170px; } .threat-intel-activity time { display: none; } .threat-intel-relationship-chart__point time { display: none; } .threat-intel-country-row { grid-template-columns: 36px minmax(0, 1fr) auto; } .threat-intel-sector-row { grid-template-columns: minmax(100px, .9fr) minmax(70px, 1fr) auto; gap: var(--space-2); } .threat-intel-filters, .threat-intel-filters--reports, .threat-intel-filters--matches { grid-template-columns: 1fr; padding: var(--space-2); } .threat-intel-filters select { min-width: 0; font-size: var(--text-xs); } .threat-intel-calendar, .threat-intel-reset { width: 100%; } .threat-intel-reset { justify-content: center; } .threat-intel-report { grid-template-columns: 36px minmax(0, 1fr) 14px; min-height: 112px; padding: var(--space-3); gap: var(--space-3); } .threat-intel-report__icon { width: 36px; height: 36px; } .threat-intel-report__footer { gap: var(--space-2); } .threat-intel-report__footer span:last-child { display: none; } .threat-intel-detail__header { min-height: 70px; padding: var(--space-3) var(--space-4); } .threat-intel-detail__body { padding: var(--space-3); } .threat-intel-detail-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); } .threat-intel-evidence-list dl { grid-template-columns: 1fr 1fr; } .threat-intel-kpi__body > strong { font-size: 1.875rem; } } @media (prefers-reduced-motion: reduce) { .threat-intel-skeleton::after, .threat-intel-table-skeleton span { animation: none; } } /* Prevent horizontal overflow and improve mobile viewport */ html { overflow-x: hidden; -webkit-text-size-adjust: 100%; } body { overflow-x: hidden; } /* ============================================ DESIGN TOKENS — LeadtheAI ============================================ */ :root { /* ── LeadtheAI Ink scale ── */ --ink-1000: #0B0F14; --ink-900: #11161D; --ink-800: #1A2230; --ink-750: #222C3A; /* midpoint between ink-800 and ink-700 */ --ink-700: #2A3445; --ink-600: #3E4A5E; --ink-500: #5C6878; --ink-400: #8A95A4; --ink-300: #B7BFCB; --ink-200: #D7DCE3; --ink-100: #ECEFF3; --ink-50: #F6F7F9; --ink-0: #FDFDFC; /* ── Signal Amber ── */ --signal-900: #7E4A12; --signal-700: #B97324; --signal-500: #E8A23A; --signal-300: #F1C57A; --signal-100: #FBEBC9; /* ── Functional ── */ --ok: #3FB37F; --warn: #E8B23A; --error: #D3573D; --info: #5B9BD8; /* ── Level system L0→L4 ── */ --level-0: #C4CBD5; --level-1: #E5C784; --level-2: #D9A958; --level-3: #C18434; --level-4: var(--ink-1000); --on-level-4: var(--signal-500); /* ── Radius scale (LeadtheAI) ── */ --radius-none: 0px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; /* legacy radius aliases for component compatibility */ --radius: 0.625rem; --radius-xs: 4px; --radius-2xl: 18px; --radius-3xl: 22px; --radius-4xl: 26px; --radius-full: 999px; /* ── Spacing scale (4px base) ── */ --space-0: 0px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; /* ── Shadows (flat-with-hairlines; shadows for overlays only) ── */ --shadow-sm: 0 1px 2px rgba(11,15,20,.06), 0 1px 1px rgba(11,15,20,.04); --shadow-md: 0 6px 16px rgba(11,15,20,.08), 0 2px 4px rgba(11,15,20,.05); --shadow-lg: 0 24px 48px rgba(11,15,20,.12), 0 6px 12px rgba(11,15,20,.06); --shadow-xl: 0 24px 48px rgba(11,15,20,.12), 0 6px 12px rgba(11,15,20,.06); --shadow-glow: none; --shadow-glow-accent: none; /* Legacy shadow aliases */ --shadow-01: var(--shadow-sm); --shadow-02: var(--shadow-sm); --shadow-03: var(--shadow-md); --shadow-04: var(--shadow-lg); --shadow-05: var(--shadow-xl); /* ── Font families (LeadtheAI) ── */ --font-display: 'Manrope', 'General Sans', 'Inter Tight', system-ui, sans-serif; --font-sans: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif; --font-arabic: 'Cairo', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* ── Typography sizes ── */ --text-xs: 0.6875rem; /* 11px — label-caps */ --text-sm: 0.8125rem; /* 13px — body-sm */ --text-base: 1rem; /* 16px — body-md */ --text-lg: 1.1875rem; /* 19px — body-lg */ --text-xl: 1.25rem; /* 20px — h4 */ --text-2xl: 1.75rem; /* 28px — h3 */ --text-3xl: 2.5rem; /* 40px — h2 */ --text-4xl: 3.5rem; /* 56px — h1 */ /* ── Line heights ── */ --leading-tight: 1.05; --leading-normal: 1.55; --leading-relaxed: 1.7; /* ── Letter spacing ── */ --tracking-tighter: -0.035em; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.14em; /* ── Font weights ── */ --font-normal: 400; --font-medium: 500; --font-semibold: 500; --font-bold: 700; --font-black: 900; /* ── Light mode semantic tokens (cool grey paper — clear canvas vs surface) ── */ --background: #EBEEF2; --foreground: var(--ink-1000); --card: #FFFFFF; --card-foreground: var(--ink-1000); --popover: #FFFFFF; --popover-foreground: var(--ink-1000); --primary: var(--ink-1000); --primary-foreground: var(--ink-0); --secondary: #E8EBF0; --secondary-foreground: var(--ink-700); --muted: #E8EBF0; --muted-foreground: var(--ink-500); --accent: #F2F4F7; --accent-foreground: var(--ink-700); --destructive: var(--error); --success: var(--ok); --success-foreground: var(--ink-0); --warning: var(--warn); --warning-foreground: var(--ink-1000); --info-color: var(--info); --info-foreground: var(--ink-0); --border: #C5CCD6; --input: #C5CCD6; --ring: var(--ink-700); /* Toggle switch (light) */ --toggle-track-off: var(--ink-400); --toggle-track-on: var(--primary); --toggle-thumb: var(--ink-0); --toggle-border: var(--ink-500); /* ── Chart palette ── */ --chart-1: var(--info); --chart-2: var(--ok); --chart-3: var(--signal-500); --chart-4: #9B6ED8; --chart-5: var(--error); /* ── Sidebar (light) ── */ --sidebar: #EDF0F4; --sidebar-foreground: var(--ink-700); --sidebar-primary: var(--ink-1000); --sidebar-primary-foreground: var(--ink-0); --sidebar-accent: #DDE1E8; --sidebar-accent-foreground: var(--ink-1000); --sidebar-border: #C5CCD6; --sidebar-ring: var(--ink-500); /* ── Agent accent colors ── */ --agent-budget: #3D9C8A; --agent-project: var(--signal-500); --agent-knowledge: #9B6ED8; --agent-budget-bg: #F0FAF7; --agent-project-bg: var(--signal-100); --agent-knowledge-bg: #F5F0FC; --agent-budget-glow: 0 0 20px rgba(61,156,138,.2); --agent-project-glow: 0 0 20px rgba(232,162,58,.2); --agent-knowledge-glow: 0 0 20px rgba(155,110,216,.2); /* ── Glassmorphism ── */ --glass-bg: rgba(253,253,252,.85); --glass-border: rgba(11,15,20,.06); --glass-blur: 12px; /* ── AI gradient (amber-based) ── */ --ai-gradient-from: var(--signal-700); --ai-gradient-to: var(--signal-500); /* ── Z-index scale ── */ --z-base: 1; --z-below: -1; --z-nav: 100; --z-dropdown: 50; --z-sticky: 100; --z-overlay: 200; --z-modal: 300; --z-popover: 400; --z-toast: 500; --z-tooltip: 600; /* ── Transitions ── */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-level: cubic-bezier(.2,.7,.2,1); --duration-instant: 0.08s; --duration-fast: 0.15s; --duration-normal: 0.25s; --duration-slow: 0.3s; --duration-slower: 0.4s; /* ── Card and Grid System ── */ --card-min-width: 260px; --card-mini-min-width: 180px; --card-fixed-width: 520px; --card-fixed-height: 322px; --list-card-width: 550px; --list-card-height: auto; --list-card-min-height: 300px; --card-grid-gap: var(--space-4); --card-padding: var(--space-5); --section-padding: var(--space-6); /* ── Layout ── */ --sidebar-width: 64px; --header-height: 64px; --content-max-width: min(100%, 1600px); --content-padding: var(--space-6); /* ── Semantic aliases for component compatibility ── */ --bg-base: var(--background); --bg-surface: var(--card); --bg-elevated: var(--accent); --bg-overlay: var(--popover); --bg-hover: rgba(11,15,20,.07); --bg-active: rgba(11,15,20,.05); --bg-hover-strong: rgba(11,15,20,.10); --bg-selected: rgba(11,15,20,.12); --bg-primary: var(--background); --bg-secondary: var(--card); --bg-tertiary: var(--accent); --surface-2: var(--accent); --text-primary: var(--foreground); --text-secondary: var(--ink-700); --text-tertiary: var(--ink-500); --text-quaternary: var(--ink-400); --text-muted: var(--ink-500); --accent-hover: var(--ink-100); --accent-muted: var(--ink-700); --accent-subtle: rgba(11,15,20,.06); --accent-surface: rgba(11,15,20,.04); --accent-glow: rgba(11,15,20,.08); --accent-secondary: var(--ink-500); --accent-secondary-subtle: rgba(92,104,120,.12); --border-subtle: #C5CCD6; --border-default: #AEB7C4; --border-strong: #949EAE; --border-focus: var(--ink-700); --border-glow: rgba(11,15,20,.12); --status-danger: var(--error); --status-danger-subtle: rgba(211,87,61,.10); --status-warning: var(--warn); --status-warning-subtle: rgba(232,178,58,.10); --status-success: var(--ok); --status-success-subtle: rgba(63,179,127,.10); --status-info: var(--info); --status-info-subtle: rgba(91,155,216,.10); --severity-critical: var(--error); --severity-critical-bg: rgba(211,87,61,.08); --severity-high: #C97C35; --severity-high-bg: rgba(201,124,53,.08); --severity-medium: var(--signal-500); --severity-medium-bg: rgba(232,162,58,.08); --severity-low: var(--ok); --severity-low-bg: rgba(63,179,127,.08); --color-success: var(--ok); --color-danger: var(--error); --color-warning: var(--warn); --color-info: var(--info); --bg-gradient-radial: radial-gradient(ellipse at top, rgba(11,15,20,.04) 0%, transparent 55%); --bg-gradient-mesh: radial-gradient(at 25% 25%, rgba(11,15,20,.02) 0%, transparent 50%), radial-gradient(at 75% 75%, rgba(11,15,20,.015) 0%, transparent 55%); --grid-cols: 1; } /* ============================================ DARK THEME — LeadtheAI Ink inverse Activated by class="dark" on . ============================================ */ .dark { --background: var(--ink-1000); --foreground: var(--ink-100); --card: var(--ink-900); --card-foreground: var(--ink-100); --popover: var(--ink-900); --popover-foreground: var(--ink-100); --primary: var(--ink-0); --primary-foreground: var(--ink-1000); --secondary: var(--ink-800); --secondary-foreground: var(--ink-200); --muted: var(--ink-800); --muted-foreground: var(--ink-400); --accent: var(--ink-800); --accent-foreground: var(--ink-200); --destructive: #E06A52; --success: #52C497; --success-foreground: var(--ink-1000); --warning: #EBB84A; --warning-foreground: var(--ink-1000); --info-color: #7AB4E8; --info-foreground: var(--ink-1000); --border: var(--ink-700); --input: var(--ink-700); --ring: var(--ink-300); --chart-1: #7AB4E8; --chart-2: #52C497; --chart-3: var(--signal-500); --chart-4: #B88AE8; --chart-5: #E06A52; --sidebar: var(--ink-900); --sidebar-foreground: var(--ink-200); --sidebar-primary: var(--ink-0); --sidebar-primary-foreground: var(--ink-1000); --sidebar-accent: var(--ink-800); --sidebar-accent-foreground: var(--ink-100); --sidebar-border: var(--ink-700); --sidebar-ring: var(--ink-400); --agent-budget: #5BBFAB; --agent-project: var(--signal-300); --agent-knowledge: #B88AE8; --agent-budget-bg: rgba(91,191,171,.12); --agent-project-bg: rgba(241,197,122,.10); --agent-knowledge-bg: rgba(184,138,232,.12); --agent-budget-glow: 0 0 20px rgba(91,191,171,.2); --agent-project-glow: 0 0 20px rgba(232,162,58,.2); --agent-knowledge-glow: 0 0 20px rgba(184,138,232,.2); --glass-bg: rgba(17,22,29,.85); --glass-border: rgba(255,255,255,.06); --glass-blur: 12px; --ai-gradient-from: var(--signal-700); --ai-gradient-to: var(--signal-500); --shadow-sm: 0 1px 2px rgba(0,0,0,.3); --shadow-md: 0 6px 16px rgba(0,0,0,.35); --shadow-lg: 0 24px 48px rgba(0,0,0,.4); --shadow-xl: 0 24px 48px rgba(0,0,0,.4); --shadow-glow: none; --shadow-glow-accent: none; --bg-base: var(--background); --bg-surface: var(--card); --bg-elevated: var(--accent); --bg-overlay: var(--popover); --bg-hover: var(--ink-800); --bg-active: rgba(255,255,255,.06); --bg-hover-strong: rgba(255,255,255,.10); --bg-selected: rgba(255,255,255,.10); --bg-primary: var(--background); --bg-secondary: var(--card); --bg-tertiary: var(--accent); --surface-2: var(--accent); --text-primary: var(--foreground); --text-secondary: var(--ink-300); --text-tertiary: var(--ink-400); --text-quaternary: var(--ink-500); --text-muted: var(--ink-400); --accent-hover: var(--ink-700); --accent-muted: var(--ink-300); --accent-subtle: rgba(255,255,255,.08); --accent-surface: rgba(255,255,255,.04); --accent-glow: rgba(255,255,255,.12); --accent-secondary: var(--ink-400); --accent-secondary-subtle: rgba(138,149,164,.12); --border-subtle: var(--ink-700); --border-default: var(--ink-700); --border-strong: var(--ink-600); --border-focus: var(--ink-300); --border-glow: rgba(255,255,255,.15); --toggle-track-off: var(--ink-600); --toggle-track-on: var(--primary); --toggle-thumb: var(--ink-0); --toggle-border: var(--ink-500); --status-danger: #E06A52; --status-danger-subtle: rgba(224,106,82,.12); --status-warning: #EBB84A; --status-warning-subtle: rgba(235,184,74,.12); --status-success: #52C497; --status-success-subtle: rgba(82,196,151,.12); --status-info: #7AB4E8; --status-info-subtle: rgba(122,180,232,.12); --severity-critical: #E06A52; --severity-critical-bg: rgba(224,106,82,.10); --severity-high: #D4924A; --severity-high-bg: rgba(212,146,74,.10); --severity-medium: var(--signal-300); --severity-medium-bg: rgba(241,197,122,.10); --severity-low: #52C497; --severity-low-bg: rgba(82,196,151,.10); --color-success: #52C497; --color-danger: #E06A52; --color-warning: #EBB84A; --color-info: #7AB4E8; --bg-gradient-radial: radial-gradient(ellipse at top, rgba(255,255,255,.03) 0%, transparent 60%); --bg-gradient-mesh: radial-gradient(at 25% 25%, rgba(255,255,255,.02) 0%, transparent 50%), radial-gradient(at 75% 75%, rgba(255,255,255,.015) 0%, transparent 55%); } /* ============================================ BASE STYLES ============================================ */ *, *::before, *::after { border-color: var(--border); } body { font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); letter-spacing: var(--tracking-normal); background: var(--background); background-image: var(--bg-gradient-mesh); color: var(--foreground); min-height: 100vh; overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "rlig" 1, "calt" 1, "ss01" 1; } #app { display: flex; min-height: 100vh; height: 100vh; height: 100dvh; min-width: 0; padding-top: 0; position: relative; box-sizing: border-box; } /* Focus States */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Agent-specific focus rings */ .focus-budget:focus-visible { outline: 2px solid oklch(0.50 0.14 175); outline-offset: 2px; } .focus-project:focus-visible { outline: 2px solid oklch(0.60 0.16 55); outline-offset: 2px; } .focus-knowledge:focus-visible { outline: 2px solid oklch(0.50 0.18 300); outline-offset: 2px; } /* Selection — force visible contrast in both themes */ ::selection { background: oklch(0.45 0.15 260); color: #fff; } input::selection, textarea::selection { background: oklch(0.45 0.15 260); color: #fff; } /* ============================================ CPOD ANIMATIONS & KEYFRAMES ============================================ */ @keyframes cpod-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @keyframes cpod-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes cpod-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes cpod-slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } } @keyframes cpod-slide-in-left { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: translateX(0); } } @keyframes cpod-scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes cpod-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ── Animation classes ── */ .cpod-pulse { animation: cpod-pulse 2s ease-in-out infinite; } .cpod-gradient-shift { background-size: 200% 200%; animation: cpod-gradient-shift 8s ease infinite; } .cpod-fade-in { animation: cpod-fade-in var(--transition-slow) both; } .cpod-slide-right { animation: cpod-slide-in-right var(--transition-slow) both; } .cpod-slide-left { animation: cpod-slide-in-left var(--transition-slow) both; } .cpod-scale-in { animation: cpod-scale-in var(--transition-slow) both; } .cpod-spin { animation: cpod-spin 1s linear infinite; } /* ── Agent glow shadows ── */ .cpod-glow-budget { box-shadow: var(--agent-budget-glow); } .cpod-glow-project { box-shadow: var(--agent-project-glow); } .cpod-glow-knowledge { box-shadow: var(--agent-knowledge-glow); } /* ── Glassmorphism card ── */ .cpod-glass { background: var(--glass-bg); backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); } /* ── Semantic surface cards ── */ .cpod-card { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); } .cpod-popover { background: var(--popover); color: var(--popover-foreground); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } /* ── CPOD Buttons ── */ .cpod-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium); line-height: 1; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast); text-decoration: none; } .cpod-btn-primary { background: var(--primary); color: var(--primary-foreground); } .cpod-btn-primary:hover { filter: brightness(1.15); } .cpod-btn-secondary { background: var(--secondary); color: var(--secondary-foreground); border-color: var(--border); } .cpod-btn-secondary:hover { background: var(--accent); } .cpod-btn-destructive { background: var(--destructive); color: var(--primary-foreground); } .cpod-btn-destructive:hover { opacity: 0.9; } .cpod-btn-ghost { background: transparent; color: var(--foreground); } .cpod-btn-ghost:hover { background: var(--accent); color: var(--accent-foreground); } /* ── CPOD Form inputs ── */ .cpod-input { display: block; width: 100%; padding: var(--space-2) var(--space-3); font-family: var(--font-sans); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--foreground); background: var(--background); border: 1px solid var(--input); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .cpod-input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 2px oklch(from var(--ring) l c h / 0.2); } .cpod-input::placeholder { color: var(--muted-foreground); } /* ── CPOD Labels ── */ .cpod-label { display: block; font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--foreground); margin-bottom: var(--space-1); } /* ── CPOD Badges ── */ .cpod-badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); font-size: var(--text-xs); font-weight: var(--font-medium); border-radius: var(--radius-sm); line-height: 1.5; } .cpod-badge-primary { background: var(--primary); color: var(--primary-foreground); } .cpod-badge-secondary { background: var(--secondary); color: var(--secondary-foreground); } .cpod-badge-destructive { background: var(--destructive); color: var(--primary-foreground); } .cpod-badge-success { background: var(--success); color: var(--success-foreground); } .cpod-badge-warning { background: var(--warning); color: var(--warning-foreground); } .cpod-badge-info { background: var(--info); color: var(--info-foreground); } .cpod-badge-budget { background: var(--agent-budget-bg); color: var(--agent-budget); } .cpod-badge-project { background: var(--agent-project-bg); color: var(--agent-project); } .cpod-badge-knowledge { background: var(--agent-knowledge-bg); color: var(--agent-knowledge); } /* ── LeadtheAI Level Badges (L0→L4) ── */ .lvl-badge { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; white-space: nowrap; } .lvl-badge-0 { background: var(--ink-100); color: var(--ink-700); } .lvl-badge-1 { background: var(--signal-100); color: var(--ink-800); } .lvl-badge-2 { background: var(--signal-300); color: var(--ink-800); } .lvl-badge-3 { background: var(--signal-500); color: var(--ink-900); } .lvl-badge-4 { background: var(--ink-1000); color: var(--signal-500); } /* ── LeadtheAI Typography helpers ── */ .lta-display { font-family: var(--font-display); font-size: 80px; font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; } .lta-h1 { font-family: var(--font-display); font-size: 56px; font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; } .lta-h2 { font-family: var(--font-display); font-size: 40px; font-weight: 500; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; } .lta-h3 { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; } .lta-h4 { font-family: var(--font-display); font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; } .lta-body-lg { font-family: var(--font-sans); font-size: 19px; font-weight: 400; line-height: 1.55; } .lta-body-md { font-family: var(--font-sans); font-size: 16px; font-weight: 400; line-height: 1.55; } .lta-body-sm { font-family: var(--font-sans); font-size: 13px; font-weight: 400; line-height: 1.5; } .lta-label-caps { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; } .lta-mono-sm { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.05em; line-height: 1.5; } .lta-number { font-family: var(--font-display); font-size: 64px; font-weight: 500; letter-spacing: -0.035em; line-height: 1; } /* ── LeadtheAI Eyebrow ── */ .lta-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); } /* ── LeadtheAI signal accent text ── */ .lta-signal { color: var(--signal-500); } .lta-signal-text { color: var(--signal-700); } /* ── LevelMark SVG (four ascending bars) ── */ .level-mark { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; } .level-mark span { display: block; width: 4px; border-radius: 1.5px; background: currentColor; } .level-mark span:nth-child(1) { height: 5px; } .level-mark span:nth-child(2) { height: 9px; } .level-mark span:nth-child(3) { height: 14px; } .level-mark span:nth-child(4) { height: 20px; } /* ── CPOD Typography helpers ── */ .cpod-h1 { font-size: var(--text-3xl); font-weight: var(--font-bold); letter-spacing: -0.025em; line-height: var(--leading-tight); } .cpod-h2 { font-size: var(--text-2xl); font-weight: var(--font-semibold); letter-spacing: -0.025em; line-height: var(--leading-tight); } .cpod-h3 { font-size: var(--text-xl); font-weight: var(--font-semibold); line-height: var(--leading-tight); } .cpod-h4 { font-size: var(--text-lg); font-weight: var(--font-medium); line-height: var(--leading-tight); } .cpod-body { font-size: var(--text-sm); line-height: var(--leading-normal); } .cpod-small { font-size: var(--text-xs); line-height: var(--leading-normal); } .cpod-muted { font-size: var(--text-sm); color: var(--muted-foreground); } .cpod-mono { font-family: var(--font-mono); } .cpod-value-hero { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: var(--font-black); } /* ── Agent-colored text ── */ .cpod-text-budget { color: var(--agent-budget); } .cpod-text-project { color: var(--agent-project); } .cpod-text-knowledge { color: var(--agent-knowledge); } /* ── Agent-colored backgrounds ── */ .cpod-bg-budget { background: var(--agent-budget-bg); } .cpod-bg-project { background: var(--agent-project-bg); } .cpod-bg-knowledge { background: var(--agent-knowledge-bg); } /* ── Separator ── */ .cpod-separator { height: 1px; background: var(--border); border: none; margin: var(--space-4) 0; } /* ── AI gradient background ── */ .cpod-ai-gradient { background: linear-gradient(135deg, var(--ai-gradient-from), var(--ai-gradient-to)); } /* ── CPOD Sidebar utility ── */ .cpod-sidebar { background: var(--sidebar); color: var(--sidebar-foreground); border-inline-end: 1px solid var(--sidebar-border); } .cpod-sidebar-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--sidebar-foreground); border-radius: var(--radius-md); text-decoration: none; transition: background var(--transition-fast); } .cpod-sidebar-item:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); } .cpod-sidebar-item[aria-current="page"], .cpod-sidebar-item.active { background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); } /* ── RTL font switch ── */ [dir='rtl'] { --font-sans: var(--font-arabic); } /* ── Responsive grid columns ── */ @media (min-width: 640px) { :root { --grid-cols: 2; } } @media (min-width: 768px) { :root { --grid-cols: 2; } } @media (min-width: 1024px) { :root { --grid-cols: 4; } } @media (min-width: 1280px) { :root { --grid-cols: 4; } } /* ============================================ SIDEBAR - Icon Rail ============================================ */ .sidebar { width: var(--sidebar-width); background: var(--sidebar); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; align-items: center; padding: 0 0 var(--space-3) 0; position: relative; z-index: 100; transition: width var(--duration-slow) var(--ease-out); } /* Light mode: sidebar slightly warm-tinted so it reads as a distinct panel */ :root .sidebar { background: var(--sidebar); } /* Dark mode: sidebar one step lighter than the base to act as a rail */ .dark .sidebar { background: var(--sidebar); } .sidebar::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 200px; background: linear-gradient(180deg, var(--bg-hover) 0%, transparent 100%); pointer-events: none; } .sidebar-header { height: var(--header-height); min-height: var(--header-height); padding: 0; width: 100%; display: flex; align-items: center; justify-content: center; } .logo { width: clamp(32px, 2.5vw, 40px); height: clamp(32px, 2.5vw, 40px); background: var(--ink-0); border-radius: var(--radius-md); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--duration-normal) var(--ease-spring); box-shadow: var(--shadow-md); position: relative; } .logo::after { content: ''; position: absolute; inset: -3px; border-radius: var(--radius-lg); background: var(--ink-1000); opacity: 0; z-index: -1; transition: opacity var(--duration-normal) var(--ease-out); filter: blur(8px); } .logo:hover { transform: scale(1.08); box-shadow: var(--shadow-lg); border-color: var(--border); } .logo:hover::after { opacity: 0.08; } .logo i { font-size: clamp(16px, 1.2vw, 20px); color: var(--signal-900); } .nav-menu { list-style: none; width: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4) 0; } .nav-item { width: clamp(36px, 2.8vw, 44px); height: clamp(36px, 2.8vw, 44px); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); cursor: pointer; color: var(--text-secondary); transition: all var(--duration-fast) var(--ease-out); position: relative; } .nav-item i { font-size: clamp(18px, 1.3vw, 22px); transition: transform var(--duration-fast) var(--ease-spring); } .nav-item span { display: none; } .nav-item:hover, .nav-item:focus-visible { color: var(--sidebar-foreground); background: var(--sidebar-accent); } .nav-item:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-md); } .nav-item:hover i { transform: scale(1.1); } .nav-item { /* Inactive items: deliberately dimmer than the secondary text so the active item reads as the unmistakable focus point of the rail. The `color` declared earlier (line ~976) is overridden via opacity here so the cascade for :hover / .active continues to win. */ opacity: 0.62; } .nav-item:hover, .nav-item:focus-visible, .nav-item.active { opacity: 1; } .nav-item.active { color: var(--signal-900); background: var(--sidebar-accent); } .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); /* Wider + taller accent stripe so the active item's "where am I" affordance survives across light + dark + AR/RTL without depending on background-color contrast alone. */ width: 4px; height: 32px; background: var(--signal-500); border-radius: 0 4px 4px 0; box-shadow: 0 0 8px color-mix(in srgb, var(--signal-500) 45%, transparent); } /* RTL: anchor the accent stripe to the logical-start edge, which in ``dir="rtl"`` is the visual right. */ [dir="rtl"] .nav-item.active::before { left: auto; right: 0; border-radius: 4px 0 0 4px; } /* Nav Tooltip - pointer-events: none so it never blocks clicks on adjacent nav items */ .nav-item::after { content: attr(data-tooltip); position: absolute; left: calc(100% + 12px); background: var(--bg-overlay); color: var(--text-primary); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateX(-8px); transition: all var(--duration-fast) var(--ease-out); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); z-index: 1000; pointer-events: none; } .nav-item:hover::after { opacity: 1; visibility: visible; transform: translateX(0); } /* Approvals nav — Coming Soon (Area 2) */ .nav-item--soon { opacity: 0.45; cursor: not-allowed; } .nav-item--soon:hover { background: transparent; transform: none; } .nav-item--soon:hover::after { opacity: 1; visibility: visible; transform: translateX(0); } .nav-item--soon::before { content: ''; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--warning, var(--signal-500)); border: 1.5px solid var(--bg-sidebar, var(--bg)); z-index: 2; } .sidebar-footer { /* Push to the bottom of the flex column. The sidebar is a flex-column at full height (#app is 100vh, sidebar inherits cross-axis stretch), so ``margin-top: auto`` parks this group flush with the bottom and splits the rail into "work nav" (top) + "account/settings" (bottom), matching the Linear/Slack/Notion/Vercel convention. Before this rule the footer floated ~80% down the column with empty space below it, which read as "forgotten" rather than "intentionally separated". */ margin-top: auto; width: 100%; display: flex; justify-content: center; /* No vertical padding — the parent ``.sidebar`` already provides the bottom inset via its ``padding: 0 0 var(--space-3) 0;`` rule. Adding padding here was stacking with the nested ``.nav-menu`` rule (``padding: var(--space-4) 0``) and pushing the Settings icon ~40px above the bottom edge, making it look like it was floating mid-air. */ padding: 0; } /* The nested ``.nav-menu`` inside ``.sidebar-footer`` would otherwise inherit the top-rail nav-menu's ``flex: 1; padding: var(--space-4) 0`` — that ``flex: 1`` would fight ``.sidebar-footer { margin-top: auto }`` and the padding would stack on top of the parent's. Reset both so the footer item sits flush with the sidebar's bottom inset. */ .sidebar-footer .nav-menu { flex: 0 0 auto; padding: 0; } .user-info { width: clamp(28px, 2vw, 36px); height: clamp(28px, 2vw, 36px); background: linear-gradient(135deg, var(--bg-overlay) 0%, var(--bg-elevated) 100%); border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); border: 1px solid var(--border-default); } .user-info:hover { background: var(--bg-active); border-color: var(--border-strong); transform: scale(1.05); } .user-info i, .user-info span { display: none; } .user-info::before { content: 'A'; } .status-online::after { content: ''; position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; background: var(--status-success); border-radius: var(--radius-full); border: 2px solid var(--bg-surface); box-shadow: 0 0 8px var(--status-success); } /* ============================================ MAIN CONTENT ============================================ */ .content { flex: 1 1 0; min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--bg-base); background-image: var(--bg-gradient-radial); overflow: hidden; position: relative; } /* ============================================ HEADER - Minimal with Glow ============================================ */ .page-header { min-height: var(--header-height); height: auto; padding: var(--space-2) var(--content-padding); display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: var(--space-4); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); position: relative; flex-shrink: 0; } .page-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--accent-subtle) 50%, transparent 100%); } .header-left { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); min-width: 0; flex: 1 1 auto; } .header-title-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); min-width: 0; flex: 1 1 auto; } /* Inline org / impersonation tag — sits next to the page title, not a side panel */ .context-chip { display: inline-flex; align-items: center; gap: var(--space-2); max-width: min(100%, 420px); padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; line-height: 1.2; border: 1px solid var(--border-subtle); flex-shrink: 1; min-width: 0; } .context-chip i { flex-shrink: 0; font-size: var(--text-sm); } .context-chip__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .context-chip__action { flex-shrink: 0; margin-left: var(--space-1); padding: var(--space-1) var(--space-2); border: none; border-radius: var(--radius-full); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .context-chip__action:hover { background: rgba(11, 15, 20, .08); } .context-chip--org { background: var(--signal-100); color: var(--signal-900); border-color: var(--signal-300); } .context-chip--org i { color: var(--signal-700); } .context-chip--warn { background: var(--status-warning-subtle); color: var(--ink-700); border-color: var(--severity-high); } .dark .context-chip--org { background: rgba(232, 162, 58, .12); color: var(--signal-300); border-color: rgba(232, 162, 58, .35); } .dark .context-chip--org i { color: var(--signal-500); } .dark .context-chip--warn { background: rgba(235, 184, 74, .12); color: var(--signal-300); border-color: rgba(235, 184, 74, .35); } .dark .context-chip__action:hover { background: rgba(255, 255, 255, .1); } .page-header h1 { font-family: var(--font-display); font-size: 1.5rem; /* 24px — clear visual separation from section h3s */ font-weight: 700; letter-spacing: var(--tracking-tight); display: flex; align-items: center; flex-wrap: nowrap; flex-shrink: 0; white-space: nowrap; gap: var(--space-3); color: var(--text-primary); min-width: 0; } .page-header h1 i { font-size: var(--text-2xl); color: var(--primary); filter: drop-shadow(0 0 8px var(--accent-muted)); flex-shrink: 0; } .header-actions { display: flex; align-items: center; align-content: center; gap: var(--space-2); flex-shrink: 0; flex-wrap: nowrap; } /* Section sub-navigation — below top bar, separate from utility actions */ .page-subnav { display: flex; align-items: stretch; padding: 0 var(--content-padding); background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); min-height: 44px; flex-shrink: 0; } .page-subnav .sub-tabs { background: transparent; border: none; border-radius: 0; padding: 0; gap: 0; width: 100%; min-height: 44px; } .page-subnav .sub-tab { border-radius: 0; border: none; border-bottom: 2px solid transparent; padding: var(--space-3) var(--space-4); margin-bottom: -1px; height: 100%; } .page-subnav .sub-tab:hover { background: var(--bg-hover); border-color: transparent; } .page-subnav .sub-tab.active { background: transparent; color: var(--text-primary); font-weight: 600; box-shadow: none; border: none; border-bottom: 2px solid var(--primary); } .page-subnav .sub-tab.active::after { display: none; } /* Queue depth on sub-nav tabs — muted metadata, not notification badges */ .tab-meta { font-size: var(--text-xs); font-weight: 500; color: var(--text-tertiary); font-variant-numeric: tabular-nums; letter-spacing: 0; } .page-subnav .sub-tab.active .tab-meta { color: var(--text-secondary); } .header-btn { width: clamp(32px, 2vw, 40px); height: clamp(32px, 2vw, 40px); border: 1px solid var(--border-subtle); background: var(--bg-elevated); color: var(--text-secondary); border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--duration-fast) var(--ease-out); } .header-btn:hover { background: var(--bg-hover); border-color: var(--border-default); color: var(--text-primary); transform: translateY(-1px); } .header-btn i { font-size: var(--text-lg); } .header-language { display: flex; align-items: center; gap: var(--space-1); height: clamp(32px, 2vw, 40px); padding: 0 var(--space-2); border: 1px solid var(--border-subtle); background: var(--bg-elevated); border-radius: var(--radius-md); color: var(--text-secondary); } .header-language:hover { background: var(--bg-hover); border-color: var(--border-default); color: var(--text-primary); } .header-language i { font-size: var(--text-lg); flex-shrink: 0; } .header-language-select { background: transparent; border: none; color: inherit; font: inherit; font-size: var(--text-sm); cursor: pointer; padding: 0; min-width: 0; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0 center; padding-right: 14px; } .header-language-select:focus { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); } .header-language-select option { background: var(--bg-elevated); color: var(--text-primary); } /* ============================================ RTL - Arabic (dir="rtl") ============================================ */ html[dir="rtl"] { direction: rtl; text-align: right; } html[dir="rtl"] body, html[dir="rtl"] #app { font-family: var(--font-arabic); } html[dir="rtl"] #app { flex-direction: row-reverse; } html[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid var(--sidebar-border); } html[dir="rtl"] .nav-item.active::before { left: auto; right: 0; border-radius: 2px 0 0 2px; } html[dir="rtl"] .nav-item::after { left: auto; right: calc(100% + 12px); transform: translateX(8px); } html[dir="rtl"] .nav-item:hover::after { transform: translateX(0); } html[dir="rtl"] .header-language { flex-direction: row-reverse; } html[dir="rtl"] .header-language-select { background-position: left center; padding-right: 0; padding-left: 14px; } html[dir="rtl"] .page-header { flex-direction: row-reverse; } html[dir="rtl"] .page-header h1 { flex-direction: row-reverse; } html[dir="rtl"] .header-actions { flex-direction: row-reverse; } html[dir="rtl"] .findings-table th, html[dir="rtl"] .findings-table td, html[dir="rtl"] table th, html[dir="rtl"] table td { text-align: right; } html[dir="rtl"] .sub-tabs { flex-direction: row-reverse; } html[dir="rtl"] .pref-row, html[dir="rtl"] .pref-label, html[dir="rtl"] .pref-rows { text-align: right; } html[dir="rtl"] .pref-row-select select, html[dir="rtl"] .pref-row input { text-align: right; } html[dir="rtl"] .card-header, html[dir="rtl"] .card-title, html[dir="rtl"] .kpi-value, html[dir="rtl"] .kpi-label, html[dir="rtl"] .filter-row, html[dir="rtl"] .empty-state, html[dir="rtl"] .loading-state { text-align: right; } html[dir="rtl"] .toast-container { margin-left: 0; margin-right: auto; } html[dir="rtl"] .modal, html[dir="rtl"] .overlay-panel { text-align: right; } html[dir="rtl"] .modal-header, html[dir="rtl"] .overlay-header { flex-direction: row-reverse; } html[dir="rtl"] .btn-group, html[dir="rtl"] .filter-row .filters { flex-direction: row-reverse; } html[dir="rtl"] .overlay-backdrop { justify-content: flex-start; } html[dir="rtl"] .overlay-panel { border-left: none; border-right: 1px solid var(--border-default); box-shadow: var(--shadow-xl), var(--shadow-glow); } html[dir="rtl"] .slide-enter-from .overlay-panel, html[dir="rtl"] .slide-leave-to .overlay-panel { transform: translateX(-100%); } /* ============================================ SUB-TABS - Pill Style with Glow ============================================ */ .sub-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--space-1); background: var(--bg-elevated); padding: var(--space-1); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); min-width: 0; align-items: center; align-content: center; height: auto; } .sub-tabs::-webkit-scrollbar { display: none; } /* Soft fade on the edge that has hidden content past it — gated by the ``has-fade-start`` / ``has-fade-end`` classes that ``v-overflow-fade`` (app.ts) toggles based on actual scroll position. Previous version applied a fade unconditionally, which painted a transparent right edge on pages where the strip fit comfortably (e.g. Approvals with two sub-tabs), making it look like an unfinished gradient. */ .sub-tabs.has-fade-end { mask-image: linear-gradient( to right, #000 0%, #000 calc(100% - 24px), transparent 100% ); -webkit-mask-image: linear-gradient( to right, #000 0%, #000 calc(100% - 24px), transparent 100% ); } .sub-tabs.has-fade-start { mask-image: linear-gradient( to right, transparent 0%, #000 24px, #000 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0%, #000 24px, #000 100% ); } .sub-tabs.has-fade-start.has-fade-end { mask-image: linear-gradient( to right, transparent 0%, #000 24px, #000 calc(100% - 24px), transparent 100% ); -webkit-mask-image: linear-gradient( to right, transparent 0%, #000 24px, #000 calc(100% - 24px), transparent 100% ); } /* RTL: ``has-fade-start`` is still the logical start (visual right in RTL), ``has-fade-end`` is still the logical end (visual left). Mirror the gradient direction so each fade lands on the right visual edge. */ [dir="rtl"] .sub-tabs.has-fade-end { mask-image: linear-gradient( to left, #000 0%, #000 calc(100% - 24px), transparent 100% ); -webkit-mask-image: linear-gradient( to left, #000 0%, #000 calc(100% - 24px), transparent 100% ); } [dir="rtl"] .sub-tabs.has-fade-start { mask-image: linear-gradient( to left, transparent 0%, #000 24px, #000 100% ); -webkit-mask-image: linear-gradient( to left, transparent 0%, #000 24px, #000 100% ); } [dir="rtl"] .sub-tabs.has-fade-start.has-fade-end { mask-image: linear-gradient( to left, transparent 0%, #000 24px, #000 calc(100% - 24px), transparent 100% ); -webkit-mask-image: linear-gradient( to left, transparent 0%, #000 24px, #000 calc(100% - 24px), transparent 100% ); } .sub-tab { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid transparent; background: transparent; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; border-radius: var(--radius-md); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); flex-shrink: 0; white-space: nowrap; } .sub-tab i { font-size: var(--text-lg); } .sub-tab:hover { color: var(--text-primary); background: var(--bg-hover); border-color: var(--border-subtle); } .sub-tab.active { background: var(--card); color: var(--primary); font-weight: 600; box-shadow: var(--shadow-sm), 0 0 0 1px oklch(from var(--primary) l c h / 0.08); border: 1px solid var(--border); position: relative; } .sub-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); width: 24px; height: 2px; background: var(--primary); border-radius: var(--radius-pill); } .tab-count { background: var(--secondary); padding: 2px 8px; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; color: var(--primary); } .tab-badge-v2 { background: linear-gradient(135deg, oklch(from var(--chart-1) l c h / 0.08), oklch(from var(--chart-4) l c h / 0.08)); padding: 2px 8px; border-radius: var(--radius-full); font-size: 10px; font-weight: 600; color: var(--chart-1); border: 1px solid oklch(from var(--chart-1) l c h / 0.15); margin-left: 4px; letter-spacing: 0.5px; } /* ============================================ PAGE CONTENT - Fluid Container ============================================ */ .page-content { flex: 1; min-width: 0; max-width: 100%; overflow-y: auto; padding: var(--content-padding); background: var(--bg-base); } /* Light theme — page-content inherits :root CPOD tokens by default. No override needed. */ /* Middle body — dashboard UI: alignment, spacing, visual polish */ .page-content .dashboard-grid { gap: var(--space-5); width: 100%; max-width: 100%; } .page-content .kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; width: 100%; } @media (min-width: 768px) { .page-content .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } } @media (min-width: 1200px) { .page-content .kpi-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .page-content .kpi-card { border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); background: var(--bg-surface); box-shadow: 0 1px 0 var(--shadow-color, rgba(15, 23, 42, 0.02)), var(--shadow-sm); padding: var(--space-4) var(--space-5); min-height: 88px; width: 100%; min-width: 0; display: flex; align-items: center; gap: var(--space-4); } /* LeadtheAI – KPI cards lift off the paper canvas */ :root .page-content .kpi-card { border-color: var(--border-subtle); background: var(--bg-surface); } .dark .page-content .kpi-card { border-color: var(--ink-800); background: var(--ink-900); } .page-content .kpi-card:hover { background: var(--bg-elevated); } .dark .page-content .kpi-card:hover { background: var(--ink-800); } .page-content .kpi-icon { flex-shrink: 0; width: auto; height: auto; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; background: transparent; border: none; box-shadow: none; } .page-content .kpi-icon i { font-size: 1.6rem; } .page-content .kpi-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); justify-content: center; } .page-content .kpi-value { font-family: var(--font-display); font-size: clamp(var(--text-2xl), 2vw, var(--text-3xl)); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tighter); color: var(--text-primary); line-height: 1.15; } .page-content .kpi-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: var(--tracking-wider); text-transform: uppercase; line-height: 1.35; white-space: normal; } /* Dashboard rows: equal-height cards */ .page-content .dashboard-sections-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: stretch; width: 100%; min-width: 0; } @media (max-width: 900px) { .page-content .dashboard-sections-row { grid-template-columns: 1fr; } } .overview-stats-col { display: flex; flex-direction: column; gap: var(--space-2); } .overview-apt-col { display: flex; flex-direction: column; gap: var(--space-1); } .page-content .dashboard-section { border-radius: var(--radius-xl); border-color: var(--border-subtle); box-shadow: var(--shadow-sm); padding: var(--space-5); min-width: 0; display: flex; flex-direction: column; } .page-content .dashboard-section .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); min-height: 32px; flex-shrink: 0; } .page-content .dashboard-section .section-header h3 { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: var(--text-sm); /* 13px — section labels, clearly sub-page-title */ font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-secondary); margin: 0; min-width: 0; } .page-content .dashboard-section .section-header h3 i { flex-shrink: 0; font-size: var(--text-base); color: var(--text-tertiary); } .page-content .dashboard-section .section-header .btn-link { flex-shrink: 0; margin-left: var(--space-3); font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); } .page-content .dashboard-section .section-header .btn-link:hover { color: var(--primary); } /* Title + muted subtitle stacked on the left of a section header (e.g. the Triage Queue card). Keeps the View-All link aligned right. */ .page-content .dashboard-section .section-header .section-header-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .page-content .dashboard-section .section-header .section-subtitle { font-size: var(--text-xs); font-weight: 400; text-transform: none; letter-spacing: var(--tracking-normal); color: var(--text-tertiary); line-height: 1.2; /* Optically align with the h3 text, past its leading icon. */ padding-left: calc(var(--text-base) + var(--space-3)); } /* Recent Alerts list: alignment and spacing */ .page-content .dashboard-section .alerts-mini-list { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .page-content .dashboard-section .empty-state.small { min-height: 112px; padding: var(--space-4); } .page-content .dashboard-grid .onboarding-card { margin-bottom: 0; padding: var(--space-5); } .page-content .dashboard-grid .onboarding-header { margin-bottom: var(--space-4); } .page-content .dashboard-section .alert-mini-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--bg-active); min-height: 52px; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .page-content .dashboard-section .alert-mini-card:hover { background: var(--bg-hover-strong); border-color: var(--border-default); } .page-content .dashboard-section .alert-severity { flex-shrink: 0; width: 4px; height: 40px; border-radius: var(--radius-full); align-self: center; } .page-content .dashboard-section .alert-mini-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; justify-content: center; } .page-content .dashboard-section .alert-mini-title { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .page-content .dashboard-section .alert-mini-meta { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.3; } .page-content .dashboard-section .alert-status-badge { flex-shrink: 0; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } /* Active Threat Groups: alignment */ .page-content .dashboard-section .threats-mini-grid { display: flex; flex-direction: column; gap: var(--space-3); } .page-content .dashboard-section .threat-mini-card { padding: var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); background: var(--bg-active); display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; min-width: 0; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .page-content .dashboard-section .threat-mini-card:hover { background: var(--bg-hover-strong); border-color: var(--border-default); } .page-content .dashboard-section .threat-origin { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); line-height: 1.3; } .page-content .dashboard-section .threat-name { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); line-height: 1.3; } .page-content .dashboard-section .threat-iocs { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.3; } /* Security Overview widget (3rd column) */ .security-overview { display: flex; flex-direction: column; gap: var(--space-2); } /* Stats stacked vertically as compact key-value rows */ .overview-stat-row { display: flex; flex-direction: column; gap: var(--space-2); } .overview-stat { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--bg-active); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); transition: background var(--duration-fast), border-color var(--duration-fast); } .overview-stat:hover { background: var(--bg-hover-strong); border-color: var(--border-default); } /* Dark mode overview-stat: consistent darker background */ .dark .overview-stat { background: var(--ink-900); } .overview-label { font-size: var(--text-xs); color: var(--text-secondary); font-weight: 500; white-space: nowrap; } .overview-value { font-size: var(--text-base); font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); line-height: 1; flex-shrink: 0; } .overview-value.text-success { color: var(--status-success); } .overview-value.text-warning { color: var(--warning); } /* Dark mode: subtle hover with clear contrast for white text */ .dark .overview-stat:hover { background: var(--ink-850, #161D28); border-color: var(--ink-700); } .dark .overview-stat:hover .overview-label { color: var(--ink-200); } .dark .overview-stat:hover .overview-value { color: #ffffff; text-shadow: 0 1px 2px rgba(0,0,0,0.3); } .overview-divider { height: 1px; background: var(--border-subtle); margin: var(--space-2) 0; } .apt-mini-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); transition: background var(--duration-fast), border-color var(--duration-fast); } .apt-mini-row:hover { background: var(--accent); } .dark .apt-mini-row:hover { background: var(--bg-hover-strong); } .apt-mini-origin { font-size: var(--text-xs); font-weight: 700; padding: 1px var(--space-2); border-radius: var(--radius-sm); min-width: 32px; text-align: center; background: var(--bg-elevated); color: var(--text-secondary); flex-shrink: 0; } .apt-mini-name { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .apt-mini-iocs { font-size: var(--text-xs); font-family: var(--font-mono); font-weight: 600; color: var(--text-secondary); flex-shrink: 0; } .page-content .section-header a, .page-content .section-header .btn-link { color: var(--text-secondary); font-weight: 500; } .page-content .section-header a:hover, .page-content .section-header .btn-link:hover { color: var(--primary); } /* Dashboard: responsive */ @media (max-width: 768px) { .page-content .kpi-row { grid-template-columns: repeat(2, 1fr); } .page-content .dashboard-sections-row { grid-template-columns: 1fr; } } @media (max-width: 480px) { .page-content .kpi-row { grid-template-columns: 1fr; } } /* Consistent spacing; top padding for content, horizontal padding from .page-content only (avoid double padding) */ .page-content .page { padding-top: var(--space-4); padding-left: 0; padding-right: 0; } /* Remove any padding from subtab-content wrapper to ensure consistent spacing across all pages */ .subtab-content { padding: 0; margin: 0; } /* Middle body (nude) — All pages: full-width layout, consistent spacing */ .page-content .page.dashboard-page, .page-content .page.investigations-page, .page-content .page.threats-page, .page-content .page.tasks-page, .page-content .page.settings-page, .page-content .page.approvals-page { max-width: none; width: 100%; } .page-content .tasks-page { padding-bottom: var(--space-8); } /* Consistent section header spacing across all main pages */ .page-content .tasks-page .section-header, .page-content .threats-page .section-header, .page-content .investigations-page .section-header, .page-content .settings-page .section-header, .page-content .approvals-page .section-header { margin-bottom: var(--space-4); width: 100%; } .page-content .investigations-page .section-header h3 { display: flex; align-items: center; gap: var(--space-2); } /* Consistent filter bar spacing across all main pages */ .page-content .tasks-page .filter-bar, .page-content .threats-page .filter-bar, .page-content .investigations-page .filter-bar, .page-content .approvals-page .filter-bar, .page-content .settings-page .filter-bar { width: 100%; margin-bottom: var(--space-6); flex-wrap: wrap; } /* Settings/Connectors filter row: the third dropdown (scope) was getting squeezed to "All Sco..." because the inner filter-group had no min-width on its dropdowns and the search box ate the remaining space. Allow the group to wrap to a new line if needed and give each dropdown enough room to render its longest label. */ .page-content .settings-page .filter-bar .filter-group { flex-wrap: wrap; flex-shrink: 0; } .page-content .settings-page .filter-bar .filter-group select { min-width: 9rem; } .page-content .tasks-page .filter-group { flex-shrink: 0; } .page-content .tasks-page .filter-group select { border-radius: var(--radius-lg); border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--text-primary, #e2e8f0); padding: var(--space-2) var(--space-6) var(--space-2) var(--space-3); font-size: var(--text-sm); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23717b8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-2) center; appearance: none; -webkit-appearance: none; } .page-content .tasks-page .filter-group select:hover, .page-content .tasks-page .filter-group select:focus { border-color: var(--primary); background: var(--bg-hover); } /* Fixed-width cards matching APT group cards */ .page-content .tasks-page .tasks-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--list-card-width), 1fr)); gap: var(--space-4); margin-top: var(--space-4); align-items: start; justify-content: start; } /* Card dimensions and style matching APT cards */ .page-content .tasks-page .task-card { width: 100%; min-width: 0; max-width: none; min-height: var(--list-card-min-height); box-sizing: border-box; display: flex; flex-direction: column; border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); box-shadow: none; padding: var(--space-4); padding-top: var(--space-3); gap: var(--space-3); background: var(--bg-surface); transition: all var(--duration-normal) var(--ease-spring); cursor: pointer; position: relative; } /* No top accent line */ .page-content .tasks-page .task-card::before { display: none; } .page-content .tasks-page .task-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-subtle), 0 8px 32px var(--shadow-glow); } .page-content .tasks-page .task-card:hover .task-name { color: var(--primary); } /* Inactive tasks — greyed out like APT inactive */ .page-content .tasks-page .task-card.inactive { opacity: 0.5; filter: grayscale(30%); } .page-content .tasks-page .task-card.inactive:hover { opacity: 0.7; filter: grayscale(10%); } .page-content .tasks-page .task-header { flex-shrink: 0; } .page-content .tasks-page .task-icon-name { flex-shrink: 0; } .page-content .tasks-page .task-description { flex-shrink: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .page-content .tasks-page .task-card-info { flex-shrink: 0; } .page-content .tasks-page .task-card-footer { flex-shrink: 0; margin-top: auto; } .page-content .tasks-page .task-badge { border-radius: var(--radius-sm); font-weight: 600; border-color: var(--border-subtle); } .page-content .tasks-page .task-badge.ai { background: var(--accent-surface); color: var(--primary); border-color: transparent; } .page-content .tasks-page .task-trigger-badge { border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-secondary); } .page-content .tasks-page .task-status.active { color: var(--status-success); } .page-content .tasks-page .task-icon-name i { color: var(--primary); font-size: 18px; } .page-content .tasks-page .task-name { font-size: var(--text-base); color: var(--text-secondary); transition: color var(--duration-fast); } .page-content .tasks-page .task-description { color: var(--text-secondary); } .page-content .tasks-page .task-role-badge { background: var(--accent-surface); color: var(--primary); font-weight: 600; border-radius: var(--radius-full); padding: var(--space-1) var(--space-3); } .page-content .tasks-page .task-skills { color: var(--text-secondary); } .page-content .tasks-page .task-skills i { color: var(--primary); } .page-content .tasks-page .task-card-footer { border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); } .page-content .tasks-page .task-last-run { color: var(--text-secondary); } .page-content .tasks-page .task-last-run i { color: var(--text-secondary); opacity: 0.9; } .page-content .tasks-page .task-card-footer .btn-primary.small { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); font-weight: 600; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); transition: transform var(--duration-fast), box-shadow var(--duration-fast), opacity var(--duration-fast); } .page-content .tasks-page .task-card-footer .btn-primary.small:hover:not(:disabled) { opacity: 0.88; transform: translateY(-1px); box-shadow: var(--shadow-md); } .page-content .tasks-page .task-card-footer .btn-primary.small:disabled { opacity: 0.4; } .page-content .tasks-page .history-card { border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); } .page-content .tasks-page .history-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .page-content .tasks-page .empty-state { color: var(--text-secondary); width: 100%; } /* Middle body — Threats: APT grid cards, same fixed width as Tasks/Playbooks */ .page-content .threats-page .apt-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--list-card-width), 1fr)); gap: var(--space-5); margin-top: var(--space-4); align-items: stretch; justify-content: stretch; } .page-content .threats-page .apt-card { width: 100%; min-width: 0; max-width: none; min-height: var(--list-card-min-height); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); padding-top: var(--space-4); border-radius: var(--radius-xl); border: none; background: var(--bg-surface); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); } /* Remove top colored lines from APT cards and task cards */ .page-content .threats-page .apt-risk-meter, .page-content .threats-page .apt-card::before, .page-content .tasks-page .apt-risk-meter, .page-content .tasks-page .apt-card::before { display: none; } /* Task category colors — map to CPOD chart palette */ .tasks-page .apt-origin.incident-response { color: var(--chart-1); background: oklch(from var(--chart-1) l c h / 0.12); border-color: transparent; } .tasks-page .apt-origin.compliance { color: var(--chart-2); background: oklch(from var(--chart-2) l c h / 0.12); border-color: transparent; } .tasks-page .apt-origin.monitoring { color: var(--chart-3); background: oklch(from var(--chart-3) l c h / 0.12); border-color: transparent; } .tasks-page .apt-origin.vulnerability { color: var(--chart-4); background: oklch(from var(--chart-4) l c h / 0.12); border-color: transparent; } .tasks-page .apt-origin.threat-detection { color: var(--severity-critical); background: var(--severity-critical-bg); border-color: transparent; } .tasks-page .apt-origin.privileged-account { color: var(--chart-5, var(--chart-4)); background: oklch(from var(--chart-5, var(--chart-4)) l c h / 0.12); border-color: transparent; } .tasks-page .apt-origin.ai { color: var(--primary); background: var(--accent-surface); border-color: transparent; } /* Task card descriptions — always visible */ .page-content .threats-page .apt-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .page-content .threats-page .apt-header { flex-shrink: 0; } .page-content .threats-page .apt-name { flex-shrink: 0; } .page-content .threats-page .apt-description { flex: 1; min-height: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .page-content .threats-page .apt-aliases, .page-content .threats-page .apt-meta { font-weight: 500; } .page-content .threats-page .apt-meta i { color: var(--primary); } .page-content .threats-page .apt-stats { flex-shrink: 0; } /* Medium confidence badge: clear and vibrant (not dull) */ .page-content .threats-page .apt-confidence.medium { color: var(--status-warning); background: var(--status-warning-subtle); font-weight: 600; } @media (max-width: 600px) { .page-content .threats-page .apt-grid { grid-template-columns: 1fr; } } /* Playbooks page — match Agents tab card grid */ .page-content .investigations-page .playbooks-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--list-card-width), 1fr)); gap: var(--space-4); margin-top: var(--space-4); align-items: start; justify-content: start; } .page-content .investigations-page .playbooks-grid .apt-card { cursor: pointer; } .page-content .investigations-page .playbooks-grid .apt-card:hover .apt-name { color: var(--primary); } .page-content .investigations-page .playbooks-grid .apt-name { transition: color var(--duration-fast); } /* Playbooks page — apt-card overrides (unified design with APT Groups + Tasks) */ .page-content .investigations-page .playbooks-grid .apt-risk-meter, .page-content .investigations-page .playbooks-grid .apt-card::before { display: none; } .page-content .investigations-page .playbooks-grid .apt-card.inactive { opacity: 0.5; filter: grayscale(30%); } /* Playbook card descriptions — always visible */ /* Category color variants for playbook origin pills + card left border */ .investigations-page .apt-origin.credential-theft { color: var(--chart-1); background: oklch(from var(--chart-1) l c h / 0.12); } .investigations-page .apt-origin.lateral-movement { color: var(--chart-2); background: oklch(from var(--chart-2) l c h / 0.12); } .investigations-page .apt-origin.malware { color: var(--severity-critical); background: var(--severity-critical-bg); } .investigations-page .apt-origin.phishing { color: var(--chart-3); background: oklch(from var(--chart-3) l c h / 0.12); } .investigations-page .apt-origin.ransomware { color: var(--chart-4); background: oklch(from var(--chart-4) l c h / 0.12); } .investigations-page .apt-origin.incident-response { color: var(--chart-5); background: oklch(from var(--chart-5) l c h / 0.12); } /* Playbook card left accent border by category */ .investigations-page .playbooks-grid .apt-card:has(.apt-origin.credential-theft) { border-left: 3px solid var(--chart-1); } .investigations-page .playbooks-grid .apt-card:has(.apt-origin.lateral-movement) { border-left: 3px solid var(--chart-2); } .investigations-page .playbooks-grid .apt-card:has(.apt-origin.malware) { border-left: 3px solid var(--severity-critical); } .investigations-page .playbooks-grid .apt-card:has(.apt-origin.phishing) { border-left: 3px solid var(--chart-3); } .investigations-page .playbooks-grid .apt-card:has(.apt-origin.ransomware) { border-left: 3px solid var(--chart-4); } .investigations-page .playbooks-grid .apt-card:has(.apt-origin.incident-response) { border-left: 3px solid var(--chart-5); } .investigations-page .playbooks-grid .apt-card:has(.apt-origin.investigation) { border-left: 3px solid var(--info); } .page { flex: 1 1 0; min-height: 0; max-width: var(--content-max-width); width: 100%; margin: 0 auto; padding: 0 var(--content-padding) var(--content-padding); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; animation: fadeSlideIn var(--duration-normal) var(--ease-out); } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ LOADING STATE ============================================ */ .loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 200px; gap: var(--space-4); color: var(--text-secondary); } .spinner { width: clamp(24px, 1.5vw, 32px); height: clamp(24px, 1.5vw, 32px); border: 2.5px solid var(--border-default); border-top-color: var(--primary); border-radius: var(--radius-full); animation: cpod-spin 0.8s linear infinite; box-shadow: 0 0 16px var(--accent-surface); } /* ============================================ EMPTY STATE ============================================ */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 400px; text-align: center; color: var(--text-secondary); padding: var(--space-9); position: relative; } .empty-state::before { content: ''; position: absolute; inset: 0; background: none; pointer-events: none; } .empty-state-icon { width: clamp(100px, 8vw, 140px); height: clamp(100px, 8vw, 140px); background: linear-gradient(145deg, var(--bg-surface) 0%, var(--bg-elevated) 100%); border-radius: var(--radius-2xl); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-6); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg); position: relative; transition: all var(--duration-normal) var(--ease-spring); } .empty-state-icon::before { content: ''; position: absolute; inset: -2px; border-radius: var(--radius-xl); background: linear-gradient(135deg, transparent 0%, var(--accent-subtle) 50%, transparent 100%); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); } .empty-state:hover .empty-state-icon::before { opacity: 1; } .empty-state:hover .empty-state-icon { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .empty-state-icon i { font-size: clamp(40px, 3vw, 56px); background: linear-gradient(135deg, var(--chart-1) 0%, var(--chart-4) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: all var(--duration-fast) var(--ease-out); } .empty-state:hover .empty-state-icon i { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%); -webkit-background-clip: text; background-clip: text; } .empty-state h2 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-3); letter-spacing: var(--tracking-tight); } .empty-state h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); letter-spacing: var(--tracking-tight); } .empty-state p { font-size: var(--text-base); color: var(--text-secondary); max-width: 400px; line-height: var(--leading-relaxed); } .empty-state.small { min-height: 180px; padding: var(--space-6); } .empty-state.small .empty-state-icon { width: 64px; height: 64px; margin-bottom: var(--space-4); } .empty-state.small .empty-state-icon i { font-size: var(--text-2xl); } .empty-state-action { margin-top: var(--space-6); } .empty-state-action .btn-primary { padding: var(--space-3) var(--space-6); } /* ============================================ BUTTONS - Premium with Glow Effects ============================================ */ .btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--primary-foreground); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); box-shadow: var(--shadow-md); position: relative; overflow: hidden; } /* Dark theme – primary buttons use same monochrome accent */ .dark .btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-md); } .btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, transparent 0%, oklch(1 0 0 / 0.12) 50%, transparent 100%); transform: translateX(-100%); transition: transform var(--duration-slow) var(--ease-out); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-primary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .btn-icon:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; border-radius: var(--radius-md); } .btn-danger:focus-visible { outline: 2px solid var(--destructive); outline-offset: 2px; } .sub-tab:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; border-radius: var(--radius-md); } .btn-primary:hover::before { transform: translateX(100%); } .btn-primary:active { transform: translateY(0); } .btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } .btn-primary i { font-size: var(--text-lg); } .btn-primary.small { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); } .btn-secondary { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--secondary); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--secondary-foreground); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .btn-secondary:hover { background: var(--accent); border-color: var(--accent-subtle); color: var(--accent-foreground); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .btn-secondary.small { padding: var(--space-2) var(--space-4); font-size: var(--text-xs); } .btn-link { background: transparent; border: none; color: var(--primary); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); position: relative; } .btn-link::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1px; background: var(--accent); transition: width var(--duration-fast) var(--ease-out); } .btn-link:hover::after { width: 100%; } /* ============================================ FILTER BAR - Glass Effect ============================================ */ .filter-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); padding: var(--space-4); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); backdrop-filter: blur(12px); flex-wrap: wrap; } .filter-bar.has-calendar-open { position: relative; z-index: 1000; } /* Severity filter pills */ .filter-pills { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .filter-pill { padding: 4px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: var(--bg-elevated); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); text-transform: capitalize; } .filter-pill:hover { background: var(--bg-hover); color: var(--text-primary); } .filter-pill.active { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .filter-pill.critical.active { background: var(--severity-critical); color: #fff; border-color: var(--severity-critical); } .filter-pill.critical:not(.active):hover { color: var(--severity-critical); border-color: var(--severity-critical); } .filter-pill.high.active { background: var(--severity-high); color: #fff; border-color: var(--severity-high); } .filter-pill.high:not(.active):hover { color: var(--severity-high); border-color: var(--severity-high); } .filter-pill.medium.active { background: var(--severity-medium); color: #fff; border-color: var(--severity-medium); } .filter-pill.medium:not(.active):hover { color: var(--severity-medium); border-color: var(--severity-medium); } .filter-pill.low.active { background: var(--severity-low); color: var(--text-primary); border-color: var(--severity-low); } .filter-pill.low:not(.active):hover { color: var(--severity-low); border-color: var(--severity-low); } .filter-pill.informational.active { background: var(--info); color: #fff; border-color: var(--info); } .filter-pill.informational:not(.active):hover { color: var(--info); border-color: var(--info); } .search-box { display: flex; align-items: center; gap: var(--space-3); flex: 1; max-width: clamp(280px, 20vw, 360px); padding: var(--space-2) var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); transition: all var(--duration-fast) var(--ease-out); } .search-box:focus-within { border-color: var(--accent-subtle); box-shadow: 0 0 0 3px var(--accent-surface); } .search-box i { color: var(--text-quaternary); font-size: var(--text-lg); } .search-box input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--text-primary); font-size: var(--text-sm); outline: none; } .search-box input::placeholder { color: var(--text-quaternary); } .filter-group { display: flex; gap: var(--space-2); } .calendar-filter { position: relative; display: flex; align-items: center; min-width: 190px; height: 38px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-secondary); transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .calendar-filter:hover, .calendar-filter.is-open { border-color: var(--text-tertiary); background: var(--bg-hover); } .calendar-filter.is-active { border-color: var(--primary); color: var(--text-primary); } .calendar-filter.is-open { z-index: 1002; } .calendar-filter-trigger { display: flex; flex: 1; align-items: center; gap: var(--space-2); min-width: 0; height: 100%; padding: 0 var(--space-3); border: 0; background: transparent; color: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; } .calendar-filter-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .calendar-filter-trigger:focus-visible, .calendar-filter-clear:focus-visible, .calendar-popover button:focus-visible, .calendar-popover input:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .calendar-filter-trigger > .ph-calendar-blank { color: var(--text-tertiary); font-size: var(--text-base); } .calendar-filter-caret { margin-left: auto; color: var(--text-quaternary); transition: transform var(--duration-fast) var(--ease-out); } .calendar-filter.is-open .calendar-filter-caret { transform: rotate(180deg); } .calendar-filter-clear, .calendar-popover-close { display: inline-flex; flex: 0 0 30px; align-items: center; justify-content: center; width: 30px; height: 30px; margin-right: 3px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-tertiary); cursor: pointer; } .calendar-filter-clear:hover, .calendar-popover-close:hover { background: var(--bg-hover); color: var(--text-primary); } .calendar-popover { position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: 1003; width: 360px; box-sizing: border-box; padding: var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: var(--shadow-xl); color: var(--text-primary); } .calendar-popover--datetime { width: min(620px, calc(100vw - 32px)); } .calendar-popover-header, .calendar-popover-footer { display: flex; align-items: center; justify-content: space-between; } .calendar-popover-header strong { font-size: var(--text-sm); font-weight: 600; } .calendar-popover-close { margin: 0; } .calendar-timezone-note { display: flex; align-items: center; gap: var(--space-2); width: fit-content; margin-top: var(--space-2); padding: 5px 8px; border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-tertiary); font-size: var(--text-xs); } .calendar-timezone-note i { color: var(--primary); } .calendar-timezone-note strong { color: var(--text-primary); font-weight: 600; } .calendar-presets { display: flex; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); } .calendar-presets button { flex: 1; min-height: 30px; padding: 0 var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-elevated); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; cursor: pointer; } .calendar-presets button:hover { border-color: var(--text-tertiary); color: var(--text-primary); } .calendar-presets button.active { border-color: var(--primary); background: var(--accent-surface); color: var(--text-primary); } .calendar-popover-fields { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: var(--space-2); } .calendar-popover-fields label { display: grid; gap: var(--space-2); min-width: 0; } .calendar-popover-fields label > span { color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 500; } .calendar-popover-fields > i { margin-bottom: 11px; color: var(--text-quaternary); } .calendar-datetime-inputs { display: grid; grid-template-columns: minmax(0, 1fr) 126px; gap: var(--space-2); } .calendar-popover-fields input[type="date"], .calendar-popover-fields input[type="time"] { width: 100%; box-sizing: border-box; min-width: 0; height: 38px; padding: 0 var(--space-2); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-primary); font: inherit; font-size: var(--text-xs); font-variant-numeric: tabular-nums; } .dark .calendar-popover-fields input[type="date"]::-webkit-calendar-picker-indicator, .dark .calendar-popover-fields input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.72; } .calendar-popover-error { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; color: var(--danger); font-size: var(--text-xs); } .calendar-popover-footer { gap: var(--space-2); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); } .calendar-popover-footer button { min-height: 34px; padding: 0 var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 600; cursor: pointer; } .calendar-popover-clear { border: 0; background: transparent; color: var(--text-secondary); } .calendar-popover-clear:hover { background: var(--bg-hover); color: var(--text-primary); } .calendar-popover-apply { margin-left: auto; border: 1px solid var(--primary); background: var(--primary); color: var(--primary-foreground); } .calendar-popover-apply:hover { filter: brightness(1.06); } .calendar-popover-apply:disabled { opacity: 0.45; cursor: not-allowed; filter: none; } .cases-list-header-actions { display: flex; align-items: center; gap: var(--space-3); } @media (max-width: 768px) { .calendar-filter { width: 100%; } } @media (max-width: 480px) { .calendar-popover { right: 0; width: 100%; padding: var(--space-3); } .calendar-presets { gap: var(--space-1); } .calendar-popover--datetime { position: fixed; top: 230px; right: 12px; left: 0; width: auto; max-height: calc(100vh - 242px); overflow-y: auto; } .calendar-popover--datetime .calendar-popover-fields { grid-template-columns: 1fr; align-items: stretch; } .calendar-popover--datetime .calendar-popover-fields > i { margin: 0; transform: rotate(90deg); justify-self: center; } .calendar-datetime-inputs { grid-template-columns: minmax(0, 1fr) 122px; } .cases-list-header { flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); } .cases-list-header-actions { width: 100%; justify-content: space-between; } } .filter-group select { min-width: 0; height: 36px; padding: var(--space-2) var(--space-6) var(--space-2) var(--space-4); appearance: none; -webkit-appearance: none; -moz-appearance: none; background: var(--bg-elevated); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23717b8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; border: 1px solid var(--border-default); border-radius: var(--radius-full); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; cursor: pointer; outline: none; transition: all var(--duration-fast) var(--ease-out); box-shadow: var(--shadow-sm); } .filter-group select:hover, .filter-group select:focus { border-color: var(--primary); background: var(--bg-elevated); box-shadow: var(--shadow-md); } /* ============================================ DASHBOARD GRID ============================================ */ .dashboard-grid { display: flex; flex-direction: column; gap: var(--space-6); } .dashboard-sections-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--card-grid-gap); align-items: stretch; } @media (max-width: 900px) { .dashboard-sections-row { grid-template-columns: 1fr; } } /* ============================================ KPI CARDS - Premium Stats ============================================ */ .kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); width: 100%; } @media (min-width: 768px) { .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1200px) { .kpi-row { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .kpi-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--card-padding); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); transition: all var(--duration-fast) var(--ease-out); position: relative; overflow: hidden; min-width: 0; } .kpi-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent-subtle), transparent); opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); } .kpi-card:hover { border-color: var(--border-default); transform: translateY(-1px); box-shadow: var(--shadow-md); } .kpi-card:hover::before { opacity: 1; } .kpi-card--clickable { cursor: pointer; user-select: none; } .kpi-card--clickable:hover { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md); transform: translateY(-2px); } .kpi-card--clickable:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .kpi-card--warning { border-color: var(--severity-high); border-left: 3px solid var(--severity-critical); } .kpi-card--warning .kpi-value { color: var(--severity-critical); } .kpi-icon { width: clamp(44px, 3vw, 56px); height: clamp(44px, 3vw, 56px); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; background: transparent; border: none; transition: all var(--duration-fast) var(--ease-out); } .kpi-card:hover .kpi-icon { transform: scale(1.05); } .kpi-icon i { font-size: clamp(20px, 1.4vw, 26px); color: var(--text-secondary); } .kpi-icon.critical { background: var(--severity-critical-bg); border-color: oklch(from var(--severity-critical) l c h / 0.2); } .kpi-icon.critical i { color: var(--severity-critical); } .kpi-icon.high { background: var(--severity-high-bg); border-color: oklch(from var(--severity-high) l c h / 0.2); } .kpi-icon.high i { color: var(--severity-high); } .kpi-icon.success { background: var(--status-success-subtle); border-color: oklch(from var(--status-success) l c h / 0.2); } .kpi-icon.success i { color: var(--status-success); } .kpi-icon.info { background: var(--accent-surface); border-color: var(--accent-subtle); } .kpi-icon.info i { color: var(--primary); } .kpi-content { display: flex; flex-direction: column; gap: 4px; } .kpi-value { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tighter); color: var(--text-primary); line-height: 1; } .kpi-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); letter-spacing: var(--tracking-wider); text-transform: uppercase; } .kpi-sublabel { display: block; margin-top: 4px; font-size: var(--text-xs); color: var(--text-muted); text-transform: none; letter-spacing: normal; } /* Platform dashboard & admin (global_admin cross-tenant views) */ .page-content .dashboard-grid.platform-dashboard { /* Platform stacks toolbar + KPIs + two feed tables vertically. */ gap: var(--space-5); } .platform-dashboard { gap: var(--space-5); } .platform-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); background: linear-gradient(135deg, oklch(from var(--primary) l c h / 0.06), transparent 55%), var(--bg-surface); box-shadow: var(--shadow-sm); } .platform-toolbar--compact { margin-bottom: var(--space-5); } .platform-toolbar-copy { display: flex; align-items: flex-start; gap: var(--space-4); min-width: 0; } .platform-toolbar-badge { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-lg); background: oklch(from var(--primary) l c h / 0.12); color: var(--primary); flex-shrink: 0; } .platform-toolbar-badge i { font-size: 20px; } .platform-toolbar-title { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); line-height: 1.35; } .platform-toolbar-hint { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.35; } .platform-toolbar-actions { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; padding: var(--space-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-elevated); } .platform-meta-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; } .platform-meta-chip i { color: var(--text-tertiary); } .platform-refresh-btn { margin: 0; border: none; box-shadow: none; } .platform-refresh-btn:hover:not(:disabled) { transform: none; } .platform-refresh-btn:disabled { opacity: 0.65; } .platform-refresh-btn i.spinning { animation: auth-spin 0.8s linear infinite; } .platform-dashboard .platform-kpi-row { gap: var(--space-3); } .platform-dashboard .platform-kpi-row .kpi-card { min-height: 92px; padding: var(--space-4); } .platform-dashboard .platform-kpi-row .kpi-label { white-space: normal; overflow: visible; text-overflow: unset; line-height: 1.3; } .platform-dashboard .platform-kpi-row .kpi-content { min-width: 0; } .platform-dashboard .platform-tenant-section, .platform-dashboard .platform-cases-section, .platform-dashboard .platform-alerts-section { margin-top: 0; padding: var(--space-5); } .platform-section-desc { margin: -4px 0 var(--space-3); font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.4; } .platform-dashboard .platform-section-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); } .platform-dashboard .platform-section-header h3 { text-transform: none; letter-spacing: normal; font-size: var(--text-base); color: var(--text-primary); } .platform-table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); } .platform-dashboard .platform-tenant-table, .platform-dashboard .platform-cases-table, .platform-dashboard .platform-alerts-table, .platform-admin-page .platform-tenant-table { margin: 0; width: 100%; } .platform-tenant-table th, .platform-cases-table th, .platform-alerts-table th { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-tertiary); white-space: nowrap; background: var(--bg-elevated); } .platform-tenant-table td, .platform-cases-table td, .platform-alerts-table td { vertical-align: middle; } .platform-tenant-row:hover td, .platform-case-row:hover td, .platform-alert-row:hover td { background: oklch(from var(--primary) l c h / 0.04); } .platform-cases-table tbody tr, .platform-alerts-table tbody tr { cursor: pointer; } .platform-cases-table tbody tr.sev-critical td:first-child { box-shadow: inset 3px 0 0 0 var(--severity-critical); } .platform-cases-table tbody tr.sev-high td:first-child { box-shadow: inset 3px 0 0 0 var(--severity-high); } .platform-cases-table tbody tr.sev-medium td:first-child { box-shadow: inset 3px 0 0 0 var(--severity-medium); } .platform-cases-table tbody tr.sev-low td:first-child { box-shadow: inset 3px 0 0 0 var(--severity-low); } .platform-cases-table tbody tr:focus-visible, .platform-alerts-table tbody tr:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; background: var(--bg-hover); } .platform-dashboard .platform-cases-section .empty-state.small, .platform-dashboard .platform-alerts-section .empty-state.small { gap: var(--space-2); min-height: 112px; padding: var(--space-4); } .platform-cases-filters { margin-bottom: var(--space-3); } .platform-org-cell { display: flex; flex-direction: column; gap: 2px; min-width: 140px; } .platform-org-name { font-weight: 600; color: var(--text-primary); } .platform-org-slug { display: inline-block; width: fit-content; font-size: 11px; font-family: var(--font-mono); color: var(--text-tertiary); background: var(--bg-elevated); padding: 1px 6px; border-radius: var(--radius-sm); border: 1px solid var(--border-subtle); } .platform-pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-full); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border: 1px solid transparent; } .platform-pill--tier-enterprise, .platform-pill--status-active { color: var(--status-success); background: var(--status-success-subtle); border-color: oklch(from var(--status-success) l c h / 0.25); } .platform-pill--tier-professional, .platform-pill--status-trial { color: var(--primary); background: oklch(from var(--primary) l c h / 0.12); border-color: oklch(from var(--primary) l c h / 0.2); } .platform-pill--tier-free, .platform-pill--status-open { color: var(--text-secondary); background: var(--bg-elevated); border-color: var(--border-subtle); } .platform-pill--status-suspended, .platform-pill--status-deactivated { color: var(--severity-high); background: var(--severity-high-bg); border-color: oklch(from var(--severity-high) l c h / 0.25); } .platform-metric { font-variant-numeric: tabular-nums; font-weight: 500; } .platform-metric--warn { color: var(--severity-high); } .platform-metric-note { font-size: var(--text-xs); color: var(--text-secondary); } .platform-actions-col { width: 1%; white-space: nowrap; } .platform-view-org-btn { display: inline-flex; align-items: center; gap: 6px; } .platform-admin-page .platform-table-section { padding: 0; overflow: hidden; } .platform-admin-page .platform-table-section .platform-table-wrap { border: none; border-radius: 0; } @media (max-width: 768px) { .platform-toolbar { padding: var(--space-4); } .platform-toolbar-actions { width: 100%; justify-content: space-between; } .platform-meta-chip { white-space: normal; } .platform-refresh-btn span { display: none; } .platform-refresh-btn { padding: var(--space-2) var(--space-3); } } @media (max-width: 640px) { .platform-dashboard .platform-kpi-row .kpi-label { overflow: visible; text-overflow: unset; white-space: normal; } } /* ============================================ SECTION HEADERS ============================================ */ .section-header { display: flex; justify-content: space-between; align-items: center; min-height: 40px; margin-bottom: var(--space-4); } .section-header h3 { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-secondary); } .section-header h3 i { font-size: var(--text-base); color: var(--text-tertiary); } /* Reduce button padding in section-headers to fit within min-height */ .section-header .btn-primary { padding: 8px 16px; min-height: 40px; max-height: 40px; box-sizing: border-box; } /* ============================================ DASHBOARD SECTIONS ============================================ */ .dashboard-section { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--section-padding); box-shadow: var(--shadow-sm); position: relative; overflow: visible; } .dashboard-section::before { display: none; } /* ============================================ ALERT CARDS - Mini List ============================================ */ .alerts-mini-list { display: flex; flex-direction: column; gap: var(--space-2); } .alert-mini-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .alert-mini-card:hover { background: var(--bg-overlay); border-color: var(--border-subtle); transform: translateX(4px); } .alert-severity { width: 4px; height: 36px; border-radius: var(--radius-full); background: var(--text-tertiary); transition: all var(--duration-fast) var(--ease-out); } .alert-mini-card:hover .alert-severity { height: 44px; box-shadow: 0 0 12px currentColor; } .alert-severity.critical { background: var(--severity-critical); } .alert-severity.high { background: var(--severity-high); } .alert-severity.medium { background: var(--severity-medium); } .alert-severity.low { background: var(--severity-low); } .alert-mini-content { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; } .alert-mini-title { font-size: var(--text-base); font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .alert-mini-meta { font-size: var(--text-xs); color: var(--text-secondary); } .alert-status-badge { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); background: var(--bg-active); color: var(--text-secondary); } .alert-status-badge.open { color: var(--severity-critical); background: var(--severity-critical-bg); } .alert-status-badge.investigating { color: var(--severity-high); background: var(--severity-high-bg); } .alert-status-badge.escalated_to_customer { color: var(--severity-medium); background: var(--severity-medium-bg); } .alert-status-badge.resolved { color: var(--status-success); background: var(--status-success-subtle); } .alert-status-badge.false-positive { color: var(--text-secondary); background: var(--bg-elevated); } /* ============================================ THREATS MINI GRID ============================================ */ .threats-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-mini-min-width), 1fr)); gap: var(--card-grid-gap); } /* Dashboard: 1 per line, compact */ .dashboard-section .threats-mini-grid { grid-template-columns: 1fr; gap: var(--space-2); } .dashboard-section .threat-mini-card { padding: var(--space-3); gap: var(--space-2); } .threat-mini-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--card-padding); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); transition: all var(--duration-fast) var(--ease-out); } .threat-mini-card:hover { border-color: var(--border-subtle); transform: translateY(-2px); box-shadow: var(--shadow-md); } .threat-origin { padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wider); width: fit-content; background: var(--bg-active); color: var(--text-secondary); } .threat-name { font-size: var(--text-base); font-weight: 600; color: var(--text-primary); } .threat-iocs { font-size: var(--text-sm); color: var(--text-secondary); } /* ============================================ ALERTS LIST - Full Cards ============================================ */ .alerts-list { display: flex; flex-direction: column; gap: var(--space-3); } .alert-card { display: flex; background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); overflow: hidden; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .alert-card:hover { border-color: var(--border-default); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .alert-severity-indicator { width: 4px; flex-shrink: 0; background: var(--text-tertiary); transition: all var(--duration-fast) var(--ease-out); } .alert-card:hover .alert-severity-indicator { width: 6px; } .alert-severity-indicator.critical { background: var(--severity-critical); } .alert-severity-indicator.high { background: var(--severity-high); } .alert-severity-indicator.medium { background: var(--severity-medium); } .alert-severity-indicator.low { background: var(--severity-low); } .alert-main { flex: 1; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); } .alert-header { display: flex; align-items: center; gap: var(--space-4); } .alert-id { font-size: var(--text-xs); color: var(--text-quaternary); font-family: var(--font-mono); } .alert-title { flex: 1; font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); } .alert-time { font-size: var(--text-sm); color: var(--text-secondary); } .alert-body { display: flex; flex-direction: column; gap: var(--space-3); } /* Shared description/caption font for card body text */ .alert-description, .playbook-description, .apt-description, .connector-category, .live-event-message { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-relaxed); } .alert-tags { display: flex; gap: var(--space-2); flex-wrap: wrap; } .tag { padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 500; background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-subtle); transition: all var(--duration-fast) var(--ease-out); } .tag:hover { background: var(--bg-hover); border-color: var(--border-default); } .tag.kill-chain, .tag.mitre, .tag.source { background: var(--accent-surface); color: var(--primary); border-color: var(--accent-subtle); } .tag.small { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); } .alert-classification-chip { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 190px; margin-left: 0; color: var(--text-primary); background: var(--bg-elevated); border-color: var(--border-default); white-space: nowrap; } .alert-classification-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .alerts-table .col-classification { min-width: 170px; max-width: 220px; } .classification-pending { color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 500; } /* Severity-colored tags — apply the palette that already exists as tokens */ .tag.critical { background: var(--severity-critical-bg); color: var(--severity-critical); border-color: var(--severity-critical); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .tag.high { background: var(--severity-high-bg); color: var(--severity-high); border-color: var(--severity-high); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .tag.medium { background: var(--severity-medium-bg); color: var(--severity-medium); border-color: var(--severity-medium); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .tag.low { background: var(--severity-low-bg); color: var(--severity-low); border-color: var(--severity-low); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .tag.info { background: var(--accent-surface); color: var(--primary); border-color: var(--accent-subtle); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; } .alert-footer { display: flex; align-items: center; gap: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border-subtle); } .alert-host, .alert-user { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); } /* Status is a SECONDARY signal — kept visually quieter than severity so the two never compete on hue. An outline chip with a leading state dot, not a saturated fill (saturated fills are reserved for severity). See frontend/DESIGN.md. */ .alert-status { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); background: transparent; border: 1px solid var(--border-default); color: var(--text-secondary); } .alert-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-quaternary); flex-shrink: 0; } .text-muted-sm { font-size: var(--text-xs); color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-1); } /* State dot colors carry the status hue subtly; the chip text stays neutral. Note ``false_positive`` uses an underscore to match the backend enum value bound in the template — the previous ``.false-positive`` (hyphen) selector never matched. */ .alert-status.open::before { background: var(--info); } .alert-status.investigating::before { background: var(--warning); } .alert-status.resolved::before { background: var(--status-success); } .alert-status.false_positive::before { background: var(--text-quaternary); } .alert-status.false_positive { color: var(--text-quaternary); } .alert-status.resolved { color: var(--status-success); } /* ============================================ PLAYBOOKS GRID — uses apt-grid / apt-card system (old .playbook-card styles removed; see investigations-page overrides above) ============================================ */ .playbook-status { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); background: var(--bg-elevated); color: var(--text-secondary); border: none; box-shadow: none; } .playbook-status.active { color: var(--status-success); background: var(--status-success-subtle); } .playbook-status.inactive { color: var(--text-secondary); } .playbook-status.draft { color: var(--warning); background: var(--status-warning-subtle); } .playbook-status.deprecated { color: var(--muted-foreground); background: var(--muted); text-decoration: line-through; } .playbook-status.large { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); } /* ============================================ FINDINGS TABLE ============================================ */ .findings-table { background: transparent; border: none; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* Tables with action menus need visible overflow so dropdowns aren't clipped */ .findings-table.has-actions { overflow: visible; } .findings-table table { width: 100%; min-width: 600px; border-collapse: collapse; } .findings-table th { text-align: left; padding: var(--space-3) var(--space-4); background: var(--bg-elevated); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wider); border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 2; } .findings-table thead { background: var(--card); } /* Sortable column headers — click to sort; caret shows direction. Severity + status are ranked semantically server-side (see DESIGN.md / alert_service rank maps), not alphabetically. */ .findings-table th.th-sortable, .data-table th.th-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .findings-table th.th-sortable:hover, .data-table th.th-sortable:hover { color: var(--text-primary); } .th-sort-caret { display: inline-block; position: relative; width: 10px; height: 15px; margin-left: 6px; opacity: 1; vertical-align: -2px; font-size: 0; color: var(--text-secondary); flex-shrink: 0; } .th-sort-caret::before, .th-sort-caret::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; transition: border-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); } .th-sort-caret::before { top: 1px; border-bottom: 4.5px solid currentColor; opacity: 0.72; } .th-sort-caret::after { bottom: 1px; border-top: 4.5px solid currentColor; opacity: 0.72; } .th-sort-caret.ph-caret-up::before, .th-sort-caret.ph-caret-down::after { color: var(--signal-500); opacity: 1; } .th-sort-caret.ph-caret-up::after, .th-sort-caret.ph-caret-down::before { opacity: 0.22; } .findings-table th.th-sorted, .data-table th.th-sorted { color: var(--text-primary); } .findings-table th.th-sorted .th-sort-caret, .data-table th.th-sorted .th-sort-caret { opacity: 1; } .findings-table th.th-with-filter { white-space: nowrap; padding-top: var(--space-2); padding-bottom: var(--space-2); } .th-with-filter { color: var(--text-secondary); } .th-header-actions, .th-with-filter { user-select: none; } /* Unified chip — filter + sort read as one control in both themes */ .th-header-actions { display: inline-flex; align-items: stretch; gap: 0; max-width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 1px 0 color-mix(in srgb, var(--foreground) 5%, transparent); overflow: hidden; } .th-filter-trigger, .th-sort-button { appearance: none; border: 0; background: transparent; color: var(--text-primary); font: inherit; text-transform: inherit; letter-spacing: inherit; line-height: 1.2; } .th-filter-trigger { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; max-width: 100%; padding: 4px 9px; border-radius: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .th-filter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .th-filter-caret { flex-shrink: 0; font-size: 11px; color: var(--text-secondary); opacity: 0.9; transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .th-filter-trigger:hover, .th-filter-trigger.is-open { background: var(--bg-hover); color: var(--text-primary); } .th-filter-trigger:hover .th-filter-caret, .th-filter-trigger.is-open .th-filter-caret { color: var(--text-primary); } .th-filter-trigger.is-open .th-filter-caret { transform: rotate(180deg); } .th-sort-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; min-height: 28px; padding: 0; border-left: 1px solid var(--border-default); border-radius: 0; cursor: pointer; color: var(--text-secondary); opacity: 1; transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); } .th-sort-button .th-sort-caret { margin-left: 0; } .th-sort-button:hover { background: var(--bg-hover); color: var(--text-primary); } .th-sort-button:hover .th-sort-caret { color: var(--text-primary); } .th-filter-trigger:focus-visible, .th-sort-button:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; z-index: 1; } .th-with-filter.th-filtered { color: var(--text-primary); } .th-with-filter.th-filtered .th-header-actions, .th-header-actions:has(.th-filter-trigger.is-open) { border-color: color-mix(in srgb, var(--info) 45%, var(--border-default)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--info) 12%, transparent), 0 1px 0 color-mix(in srgb, var(--foreground) 5%, transparent); } .th-with-filter.th-filtered .th-filter-trigger, .th-filter-trigger.is-open { color: var(--text-primary); background: color-mix(in srgb, var(--info) 10%, var(--bg-surface)); } .th-with-filter.th-filtered .th-filter-trigger .th-filter-caret, .th-filter-trigger.is-open .th-filter-caret { color: var(--info); opacity: 1; } .th-with-filter.th-sorted .th-header-actions { border-color: color-mix(in srgb, var(--signal-500) 38%, var(--border-default)); } .th-with-filter.th-sorted .th-sort-button { color: var(--text-primary); background: color-mix(in srgb, var(--signal-500) 10%, var(--bg-surface)); } .th-header-actions--filter-only .th-filter-trigger { border-radius: calc(var(--radius-md) - 1px); } .th-sortable-label, .th-static-label { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; margin: -4px -8px; color: var(--text-primary); font-weight: 600; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-surface); box-shadow: 0 1px 0 color-mix(in srgb, var(--foreground) 5%, transparent); } .th-sortable-label { gap: 5px; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .findings-table th.th-static { padding-top: var(--space-2); padding-bottom: var(--space-2); } .th-static-label { cursor: default; user-select: none; } .findings-table th.th-sortable:hover .th-sortable-label, .data-table th.th-sortable:hover .th-sortable-label { background: var(--bg-hover); border-color: var(--border-strong); } .findings-table th.th-sortable.th-sorted .th-sortable-label, .data-table th.th-sortable.th-sorted .th-sortable-label { border-color: color-mix(in srgb, var(--signal-500) 42%, var(--border-default)); background: color-mix(in srgb, var(--signal-500) 12%, var(--bg-surface)); } .findings-table th.th-sortable.th-sorted .th-sortable-label .th-sort-caret, .data-table th.th-sortable.th-sorted .th-sortable-label .th-sort-caret { color: var(--signal-500); } .findings-table td { /* Compact density — SOC queues are high-volume; tighter rows fit ~40% more alerts on screen. Vertical 8px / horizontal 16px (was 16px all round). Font drops to --text-sm for the denser grid. */ padding: var(--space-2) var(--space-4); font-size: var(--text-sm); border-top: 1px solid var(--border-subtle); } .findings-table tr { cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .findings-table tbody tr:hover { background: var(--bg-hover); } /* Keyboard-focus ring for the now-clickable findings rows (rows wired to ``openFindingDetail`` with role="button" + tabindex=0). ``cursor: pointer`` is already set on the row above; mouse-only hover keeps it subtle. */ .findings-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } /* Severity row accent — the primary at-a-glance triage signal. A 3px left bar keyed on the row's severity, so an analyst reads severity without parsing the badge text. Applied as an inset box-shadow on the first cell (reliable under ``border-collapse: collapse``, and adds no layout shift the way ``border-left`` would). See frontend/DESIGN.md. */ .findings-table tbody tr.sev-critical td:first-child { box-shadow: inset 3px 0 0 0 var(--severity-critical); } .findings-table tbody tr.sev-high td:first-child { box-shadow: inset 3px 0 0 0 var(--severity-high); } .findings-table tbody tr.sev-medium td:first-child { box-shadow: inset 3px 0 0 0 var(--severity-medium); } .findings-table tbody tr.sev-low td:first-child { box-shadow: inset 3px 0 0 0 var(--severity-low); } /* ---- Inline-accordion variant of the findings table (PR #480) ------------- Replaces the popup-modal click target with a row that toggles a detail panel underneath itself. The expanded row stays highlighted; the detail row carries no severity bar of its own and adopts the elevated bg. Background token choice: ``--bg-elevated`` (not ``--bg-hover``). The hover token in light theme is a *dark* ink overlay at 7 % opacity, which composites onto the table's already-tinted parent (and against the tinted ``--severity-*-bg`` banner inside the panel) to read as a peach wash. ``--bg-elevated`` is the dedicated neutral elevation token: pure cool-grey in both themes, no brand-colour mixing, visibly raised over the page background. The row → panel join stays seamless because the same token is applied to both the expanded row and the detail cell. */ .findings-table--accordion .finding-row.is-expanded { background: var(--bg-elevated); } .findings-table--accordion .finding-row.is-expanded + .finding-detail-row { background: var(--bg-elevated); } .findings-table--accordion .finding-expand-cell { width: 32px; padding-right: 0; text-align: center; } .findings-table--accordion .finding-chevron { color: var(--text-tertiary); font-size: var(--text-base); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); display: inline-block; } .findings-table--accordion .finding-chevron--open { transform: rotate(90deg); color: var(--text-primary); } .findings-table--accordion .finding-detail-row > td.finding-detail-cell { /* Strip default row padding so the inner content owns spacing. The severity rail flows in from td:first-child below — DO NOT suppress it here, the whole point of the accordion is that the row and the detail panel read as one continuous block keyed by severity. */ padding: 0; background: var(--bg-elevated); border-top: 0; } /* Severity rail continues from the parent row into the detail cell. We re-declare here (rather than inheriting) because the parent row's .sev-X td:first-child selector is scoped per-row, and the detail row needs its own .sev-X to keep the rail visually connected. The ``inset 3px 0 0 0 `` matches the parent row's rule exactly so the rail is pixel-continuous from row top to panel bottom — no gap, no colour change. */ .findings-table--accordion .finding-detail-row.sev-critical > td.finding-detail-cell { box-shadow: inset 3px 0 0 0 var(--severity-critical); } .findings-table--accordion .finding-detail-row.sev-high > td.finding-detail-cell { box-shadow: inset 3px 0 0 0 var(--severity-high); } .findings-table--accordion .finding-detail-row.sev-medium > td.finding-detail-cell { box-shadow: inset 3px 0 0 0 var(--severity-medium); } .findings-table--accordion .finding-detail-row.sev-low > td.finding-detail-cell { box-shadow: inset 3px 0 0 0 var(--severity-low); } .findings-table--accordion .finding-detail-row.sev-info > td.finding-detail-cell { box-shadow: inset 3px 0 0 0 var(--severity-info, var(--border-strong)); } .findings-table--accordion .finding-detail-row { cursor: default; } .findings-table--accordion .finding-detail-row:hover { /* Keep the elevated bg — don't pick up the .findings-table tbody tr:hover shade (which would visually disconnect the detail panel from its parent row). */ background: var(--bg-elevated); } /* Match the parent row's expanded bg exactly so the row → panel join is seamless. ``--bg-elevated`` is the same token applied on .is-expanded. */ .findings-table--accordion .finding-detail-row > td.finding-detail-cell, .findings-table--accordion .finding-row.is-expanded + .finding-detail-row { background: var(--bg-elevated); } .finding-accordion-content { /* Padding starts inside the severity rail (3px) — keep the left padding slightly larger so text doesn't crowd the rail. No border, no margin-left: the rail is owned by the parent so it stays pixel-continuous with the row above. */ padding: var(--space-4) var(--space-5) var(--space-5) calc(var(--space-5) + 3px); display: flex; flex-direction: column; gap: var(--space-4); } .finding-accordion-content .severity-banner, .dark .finding-accordion-content .severity-banner { /* Inside the inline accordion the popup-overlay's hero strip is redundant — severity is already conveyed by the parent row, the severity badge in the row, and the rail painted by .finding-detail -row.sev-X above. Strip the tinted backdrop, padding, border (incl. the dark-theme bottom hairline) and shadow so the banner collapses to a quiet inline label row. The severity label + type badge stay on one line. Why not display:none? Keeping the restatement lets an analyst focused on the open panel still see the severity context without glancing back up at the row. */ background: transparent; border: 0; border-left: 0; border-bottom: 0; box-shadow: none; border-radius: 0; padding: 0; gap: var(--space-3); } .finding-accordion-content .severity-banner.critical, .finding-accordion-content .severity-banner.high, .finding-accordion-content .severity-banner.medium, .finding-accordion-content .severity-banner.low { /* Override the per-severity backdrop + left-border from the popup overlay variant — same reason as above. The severity dot in ``.severity-label::before`` still carries the colour cue. */ background: transparent; border-left: 0; } .finding-accordion-content .severity-banner .severity-label { /* De-emphasise: this is a section label, not a hero title. The dot glyph in ::before still renders so the severity colour is visible inline with the label text. */ font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-secondary); } .finding-accordion-content .detail-section { /* Sections are denser inline than in the popup overlay. */ background: transparent; padding: 0; border: 0; margin: 0; } .finding-accordion-content .detail-section h4 { margin: 0 0 var(--space-2) 0; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-tertiary); font-weight: 600; } .finding-accordion-content .finding-description-text { margin: 0; color: var(--text-primary); } .finding-accordion-content .finding-metadata-footer { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-subtle, var(--border)); } .finding-title { font-weight: 500; color: var(--text-primary); } .col-entity-id { width: 220px; max-width: 230px; white-space: nowrap; } .entity-id-token { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 100%; padding: 5px 8px; border: 1px solid var(--border-primary); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-tertiary) 74%, transparent); color: var(--text-secondary); font-family: var(--font-mono, ui-monospace, monospace); font-size: 11.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; cursor: pointer; } .entity-id-token:hover, .entity-id-token:focus-visible { border-color: var(--accent-primary); color: var(--text-primary); background: color-mix(in srgb, var(--accent-primary) 12%, var(--bg-elevated)); outline: none; } .entity-id-token i { flex: 0 0 auto; font-size: 12px; } .entity-id-token__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Keyboard focus affordance. Findings/cases rows are role=button; alert rows keep their interactive children (checkbox/assignee/promote) so the title cell is the keyboard entry point instead of the whole row. */ .findings-table tbody tr:focus-visible, .findings-table .finding-title:focus-visible { outline: 2px solid var(--border-focus); outline-offset: -2px; background: var(--bg-hover); } /* Bulk action bar — selection mode toolbar; matches filter-bar + table header chips */ .bulk-action-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--bg-surface); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-lg); margin-bottom: var(--space-3); font-size: var(--text-sm); box-shadow: inset 3px 0 0 var(--info), 0 1px 0 color-mix(in srgb, var(--foreground) 4%, transparent), 0 4px 14px color-mix(in srgb, var(--foreground) 5%, transparent); animation: bulk-bar-in var(--duration-normal) var(--ease-out); } @keyframes bulk-bar-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .bulk-action-bar__summary, .bulk-action-bar__actions { display: flex; align-items: center; gap: var(--space-2); } .bulk-action-bar__summary { min-width: 0; flex: 1 1 420px; max-width: 560px; flex-wrap: wrap; } .bulk-action-bar__divider { flex-shrink: 0; align-self: stretch; width: 1px; min-height: 28px; background: var(--border-subtle); margin: 0 var(--space-1); } .bulk-action-bar__actions { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; } .bulk-action-button, .bulk-icon-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 28px; background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-primary); font-size: var(--text-sm); font-weight: 600; border-radius: var(--radius-md); padding: 0 var(--space-3); cursor: pointer; box-shadow: 0 1px 0 color-mix(in srgb, var(--foreground) 4%, transparent); transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .bulk-icon-button { width: 28px; padding: 0; } .bulk-action-button:hover:not(:disabled), .bulk-icon-button:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); } .bulk-action-button:focus-visible, .bulk-icon-button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; } .bulk-action-button:disabled, .bulk-icon-button:disabled { opacity: 0.45; cursor: not-allowed; } .bulk-action-button--promote:not(:disabled) { border-color: color-mix(in srgb, var(--signal-500) 38%, var(--border-default)); background: color-mix(in srgb, var(--signal-500) 10%, var(--bg-surface)); } .bulk-action-button--promote:not(:disabled):hover { background: color-mix(in srgb, var(--signal-500) 16%, var(--bg-surface)); border-color: color-mix(in srgb, var(--signal-500) 48%, var(--border-default)); } .bulk-icon-button--dismiss { color: var(--text-secondary); } .bulk-icon-button--dismiss:hover:not(:disabled) { color: var(--text-primary); } .bulk-count { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; min-height: 28px; padding: 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--info) 32%, var(--border-subtle)); background: color-mix(in srgb, var(--info) 10%, var(--bg-surface)); font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); } .bulk-count i { color: var(--info); font-size: 1rem; } .bulk-meta, .bulk-message { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; padding: 0 var(--space-3); min-height: 28px; border-radius: var(--radius-md); border: 1px solid var(--border-subtle); color: var(--text-secondary); background: var(--bg-elevated); font-size: var(--text-sm); font-weight: 500; } .bulk-meta i { color: var(--text-tertiary); flex-shrink: 0; } .bulk-message { color: var(--text-primary); border-color: color-mix(in srgb, var(--warning) 34%, var(--border-subtle)); background: var(--status-warning-subtle); max-width: min(560px, 52vw); } .bulk-message i { color: var(--warning); flex-shrink: 0; } .bulk-message span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Row selection state */ .findings-table tr.row-selected td { background: color-mix(in srgb, var(--info) 8%, var(--bg-surface)); } .modal-panel--bulk-status { width: min(560px, calc(100vw - 32px)); } .modal-title-context { margin: var(--space-1) 0 0; color: var(--text-secondary); font-size: var(--text-sm); } .findings-table .col-check { width: 36px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); } @media (max-width: 900px) { .bulk-action-bar { align-items: stretch; flex-direction: column; } .bulk-action-bar__divider { display: none; } .bulk-action-bar__summary, .bulk-action-bar__actions { width: 100%; } .bulk-action-bar__actions { justify-content: flex-start; } .bulk-message { max-width: 100%; } } .severity-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); background: var(--bg-active); color: var(--text-secondary); } /* Unified on the ``--severity-*`` tokens so a badge's color is the exact same hue as the row's left-accent (C1) and the theme's intended contrast pairs apply — previously these used ad-hoc ``oklch()`` literals that drifted from the tokens. See frontend/DESIGN.md. */ .severity-badge.critical { color: var(--severity-critical); background: var(--severity-critical-bg); } .severity-badge.high { color: var(--severity-high); background: var(--severity-high-bg); } .severity-badge.medium { color: var(--severity-medium); background: var(--severity-medium-bg); } .severity-badge.low { color: var(--severity-low); background: var(--severity-low-bg); } .severity-badge.info, .severity-badge.informational { color: var(--info); background: var(--status-info-subtle); } .type-badge { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 500; background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .alert-link { color: var(--primary); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); } .alert-link:hover { text-decoration: underline; filter: brightness(1.2); } /* ============================================ APT GRID - Premium Threat Actor Cards (Uses --list-card-width/height for alignment with Tasks page) ============================================ */ .apt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--list-card-width), 1fr)); gap: var(--card-grid-gap); margin-top: var(--space-4); } .apt-card { width: 100%; min-width: 0; max-width: none; min-height: var(--list-card-min-height); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); padding-top: var(--space-3); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); transition: all var(--duration-normal) var(--ease-spring); position: relative; overflow: hidden; } /* Risk meter at top - uses --risk-pct (0%–100%) from inline style */ .apt-risk-meter { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--bg-overlay); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .apt-risk-meter::after { content: ''; position: absolute; top: 0; left: 0; height: 100%; width: var(--risk-pct, 50%); max-width: 100%; background: linear-gradient(90deg, var(--severity-low), var(--severity-medium), var(--severity-high), var(--severity-critical)); border-radius: var(--radius-lg) 0 0 0; transition: width var(--duration-normal) var(--ease-out); } /* Subtle border glow below risk meter */ .apt-card::before { content: ''; position: absolute; top: 4px; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--border-subtle) 30%, var(--text-tertiary) 50%, var(--border-subtle) 70%, transparent 100% ); opacity: 0.5; transition: opacity var(--duration-fast) var(--ease-out); } .apt-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-subtle), 0 8px 32px var(--shadow-glow); } .apt-card:hover::before { background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100% ); opacity: 1; } .apt-card.inactive { opacity: 0.5; filter: grayscale(30%); } .apt-card.inactive:hover { opacity: 0.7; filter: grayscale(10%); } .apt-header { display: flex; justify-content: space-between; align-items: center; } .apt-origin { padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); background: var(--bg-overlay); color: var(--text-secondary); border: 1px solid var(--border-subtle); } /* Country-specific origin colors */ .apt-origin.russia { color: var(--severity-critical); background: var(--severity-critical-bg); border-color: transparent; } .apt-origin.china { color: var(--severity-high); background: var(--severity-high-bg); border-color: transparent; } .apt-origin.north.korea, .apt-origin[class*="north korea"] { color: var(--severity-medium); background: var(--severity-medium-bg); border-color: transparent; } .apt-origin.iran { color: var(--accent-secondary); background: var(--accent-subtle); border-color: transparent; } .apt-status { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wider); } .apt-status.active { color: var(--status-success); } /* Pulsing dot for active status */ .apt-status.active::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--status-success); animation: pulse 2s var(--ease-out) infinite; } .apt-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-primary); letter-spacing: var(--tracking-tight); transition: color var(--duration-fast) var(--ease-out); } .apt-card:hover .apt-name { color: var(--primary); } .apt-card .apt-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-sm); } .apt-aliases { display: flex; gap: var(--space-2); flex-wrap: wrap; } .alias-tag { padding: var(--space-1) var(--space-3); background: var(--bg-overlay); border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--text-secondary); font-family: var(--font-mono); border: 1px solid var(--border-subtle); transition: all var(--duration-fast) var(--ease-out); } .apt-card:hover .alias-tag { border-color: var(--border-default); color: var(--text-secondary); } .connector-tag { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-family: var(--font-mono); display: inline-flex; align-items: center; gap: 3px; transition: all var(--duration-fast) var(--ease-out); } .connector-tag.required.ok { background: var(--status-success-subtle); color: var(--status-success); border: 1px solid var(--status-success-subtle); } .connector-tag.required.missing { background: var(--status-danger-subtle); color: var(--status-danger); border: 1px solid var(--status-danger-subtle); } .connector-tag.optional { background: var(--bg-overlay); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .connector-tag.optional.ok { background: var(--status-info-subtle); color: var(--info); border: 1px solid var(--status-info-subtle); } .apt-card:hover .connector-tag.required.ok { border-color: var(--status-success); } .apt-card:hover .connector-tag.required.missing { border-color: var(--status-danger); } .apt-card:hover .connector-tag.optional { border-color: var(--border-default); color: var(--text-secondary); } .apt-card:hover .connector-tag.optional.ok { border-color: var(--info); } .apt-meta { font-size: var(--text-sm); color: var(--text-secondary); } .apt-meta span { display: flex; align-items: center; gap: var(--space-2); } .apt-meta i { color: var(--primary); opacity: 0.7; } .apt-sectors { display: flex; flex-wrap: wrap; gap: var(--space-1); } .sector-tag { font-size: 10px; padding: 1px var(--space-2); text-transform: capitalize; } .apt-stats { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-4); margin-top: auto; border-top: 1px solid var(--border-subtle); } .apt-actions-row { display: flex; gap: var(--space-2); align-items: center; } .apt-iocs { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); font-family: var(--font-mono); } .apt-iocs i { color: var(--primary); } .playbook-last-run { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); } .playbook-last-run i { color: var(--text-tertiary); } .apt-confidence { font-size: var(--text-xs); font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); background: var(--bg-active); color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wider); } .apt-confidence.high { color: var(--status-success); background: var(--status-success-subtle); } .apt-confidence.medium { color: var(--severity-medium); background: var(--severity-medium-bg); } .apt-confidence.low { color: var(--text-secondary); background: var(--bg-overlay); } /* ============================================ TASKS PAGE — Modern, compact layout ============================================ */ .tasks-page { padding-bottom: var(--space-8); } /* Tasks page uses shared section-header + filter-bar (same as threats/apt-groups) */ /* Fixed-size grid: same as APT grid (--list-card-width/height) for consistent alignment */ .tasks-page .tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--list-card-width), 1fr)); gap: var(--card-grid-gap); margin-top: 0; } /* Task card — aligned with APT cards */ .tasks-page .task-card { width: 100%; min-width: 0; max-width: none; min-height: var(--list-card-min-height); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); position: relative; overflow: hidden; cursor: pointer; } .tasks-page .task-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--border-subtle); transition: background var(--duration-fast); } .tasks-page .task-card:hover { border-color: var(--accent-subtle); box-shadow: var(--shadow-md); } .tasks-page .task-card:hover::before { background: var(--accent); } .tasks-page .task-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); } .tasks-page .task-header-left { display: flex; align-items: center; gap: var(--space-2); } .tasks-page .task-badge { padding: 2px var(--space-2); border-radius: var(--radius-sm); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; background: var(--bg-overlay); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .tasks-page .task-badge.ai { color: var(--primary); background: var(--accent-surface, var(--bg-overlay)); border-color: transparent; } .tasks-page .task-trigger-badge { font-size: 10px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--bg-overlay); color: var(--text-secondary); } .tasks-page .task-status { font-size: var(--text-xs); font-weight: 500; text-transform: capitalize; color: var(--text-secondary); } .tasks-page .task-status.active { color: var(--status-success); } .tasks-page .task-icon-name { display: flex; align-items: center; gap: var(--space-2); margin: 0; } .tasks-page .task-icon-name i { font-size: 18px; color: var(--text-secondary); flex-shrink: 0; } .tasks-page .task-name { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text-secondary); letter-spacing: var(--tracking-tight); margin: 0; line-height: 1.3; transition: color var(--duration-fast); } .tasks-page .task-card:hover .task-name { color: var(--primary); } .tasks-page .task-description { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; margin: 4px 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-shrink: 0; } /* Card info: role + skills in one row */ .tasks-page .task-card-info { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: auto; min-height: 0; } .tasks-page .task-card-info .task-role-badge { margin: 0; } .tasks-page .task-card-info .task-skills { margin: 0; flex-shrink: 0; } .tasks-page .task-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 0; } .tasks-page .task-role-badge { font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-full); background: var(--status-info-subtle, var(--accent-surface)); color: var(--status-info, var(--info)); font-weight: 500; } .tasks-page .task-execution-badge.container { font-size: var(--text-xs); padding: 2px 6px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 4px; background: var(--accent-surface); color: var(--accent-secondary); } .tasks-page .task-connectors { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; margin-bottom: 0; } .tasks-page .task-connector-label { font-size: var(--text-xs); color: var(--text-secondary); } .tasks-page .task-skills { font-size: var(--text-xs); color: var(--text-secondary); margin-bottom: 0; } /* Connector requirement pills on task cards */ .tasks-page .task-connectors { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--space-2); margin-bottom: var(--space-1); } .tasks-page .task-connector-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 500; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.03em; cursor: default; transition: opacity 0.15s; } .tasks-page .task-connector-tag i { font-size: 11px; } /* Required — missing (red) */ .tasks-page .task-connector-tag.required.missing { background: var(--status-danger-subtle, var(--severity-critical-bg)); color: var(--status-danger, var(--destructive)); border: 1px solid oklch(from var(--destructive) l c h / 0.25); } /* Required — configured (green) */ .tasks-page .task-connector-tag.required.ok { background: var(--status-success-subtle); color: var(--status-success); border: 1px solid oklch(from var(--status-success) l c h / 0.25); } /* Optional — not configured (muted) */ .tasks-page .task-connector-tag.optional { background: var(--bg-active); color: var(--text-secondary); border: 1px solid var(--border-subtle); } /* Optional — configured (blue tint) */ .tasks-page .task-connector-tag.optional.ok { background: var(--accent-surface); color: var(--primary); border: 1px solid var(--accent-subtle); } .tasks-page .task-card-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); margin-top: auto; border-top: 1px solid var(--border-subtle); gap: var(--space-3); } .tasks-page .task-last-run { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--text-secondary); padding-top: 0; border-top: none; } .tasks-page .task-last-run i { color: var(--text-secondary); opacity: 0.8; } @media (max-width: 768px) { .page-content .tasks-page .tasks-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { .apt-grid, .tasks-page .tasks-grid { grid-template-columns: 1fr; justify-content: stretch; } .apt-card, .tasks-page .task-card { width: 100%; min-width: 0; max-width: none; height: auto; min-height: 0; max-height: none; } } /* ============================================ TASK HISTORY ============================================ */ .history-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); } .history-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); transition: all var(--duration-fast) var(--ease-out); position: relative; overflow: hidden; } .history-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: var(--border-subtle); transition: background var(--duration-fast); } .history-card:hover { border-color: var(--accent-subtle); box-shadow: var(--shadow-sm); } .history-card:hover::before { background: var(--accent); } .history-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .history-info { display: flex; align-items: center; gap: var(--space-2); flex: 1; } .history-info i { font-size: 18px; color: var(--status-success); flex-shrink: 0; } .history-task-name { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text-primary); letter-spacing: var(--tracking-tight); } .task-run-status-badge { font-size: var(--text-xs); padding: 2px 8px; border-radius: var(--radius-full); font-weight: 500; text-transform: capitalize; } .task-run-status-badge.completed { background: var(--status-success-subtle); color: var(--status-success); } .task-run-status-badge.running { background: var(--status-info-subtle, var(--accent-surface)); color: var(--status-info, var(--info)); } .task-run-status-badge.queued { background: var(--accent-surface); color: var(--accent-secondary); } .task-run-status-badge.failed { background: var(--status-danger-subtle, var(--severity-critical-bg)); color: var(--status-danger, var(--destructive)); } .task-run-status-badge.cancelled { background: var(--bg-active); color: var(--text-secondary); } .history-actions { display: flex; align-items: center; gap: var(--space-2); } /* History action buttons (view/download) – icons only, no boxes */ .history-actions .btn-icon.small { width: auto; height: auto; padding: 0; border: none !important; background: transparent !important; box-shadow: none !important; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; transition: color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .history-actions .btn-icon.small i { font-size: var(--text-base); } .history-actions .btn-icon.small:hover { color: var(--primary); transform: translateY(-1px); } .history-details { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-xs); color: var(--text-secondary); } .history-timestamp, .history-duration { display: flex; align-items: center; gap: var(--space-1); } .history-timestamp i, .history-duration i { font-size: 14px; opacity: 0.8; } .history-error { font-size: var(--text-sm); color: var(--severity-critical); padding: var(--space-2); background: var(--status-danger-subtle, var(--severity-critical-bg)); border-radius: var(--radius-sm); border-left: 2px solid var(--severity-critical); margin-top: var(--space-2); } .history-triggered-by, .history-repo { display: inline-flex; align-items: center; gap: 4px; } .history-detail-panel { margin-top: var(--space-3); padding: var(--space-3); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); } .detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); } .detail-item { display: flex; flex-direction: column; gap: 2px; } .detail-label { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .detail-value { font-size: var(--text-sm); color: var(--text-primary); display: flex; align-items: center; gap: 4px; } .detail-value.mono { font-family: var(--font-mono); font-size: var(--text-xs); word-break: break-all; } .detail-section { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-default); } .triage-feedback { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); } .triage-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--bg-inset); border: 1px solid var(--border-default); border-radius: var(--radius-sm); color: var(--text-secondary); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); font-size: var(--text-base); } .triage-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); } /* Investigation Notes */ .notes-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); } .notes-header h4 { display: flex; align-items: center; gap: var(--space-2); margin: 0; } .notes-textarea { width: 100%; padding: var(--space-3); background: var(--bg-inset); border: 1px solid var(--border-default); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--text-sm); font-family: var(--font-sans); resize: vertical; line-height: 1.6; transition: border-color var(--duration-fast) var(--ease-out); box-sizing: border-box; } .notes-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px oklch(from var(--primary) l c h / 0.15); } .notes-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); } .notes-text { white-space: pre-wrap; font-size: var(--text-sm); line-height: 1.6; color: var(--text-primary); background: var(--bg-inset); padding: var(--space-3); border-radius: var(--radius-md); margin: 0; } .detail-params { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); } .detail-param { display: flex; gap: var(--space-1); font-size: var(--text-xs); background: var(--bg-inset); padding: 4px 8px; border-radius: var(--radius-sm); } .param-key { color: var(--text-muted); font-weight: 600; } .param-val { color: var(--text-primary); font-family: var(--font-mono); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 768px) { .history-header { flex-direction: column; align-items: flex-start; } .history-details { flex-wrap: wrap; } } /* Global task card (used outside tasks page if any) and shared base */ .tasks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-fixed-width), 1fr)); gap: var(--card-grid-gap); margin-top: var(--space-4); } .task-card { width: 100%; min-width: 0; max-width: none; min-height: var(--card-fixed-height); box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--card-padding); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); transition: all var(--duration-normal) var(--ease-spring); position: relative; overflow: hidden; } .task-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--border-subtle) 30%, var(--text-tertiary) 50%, var(--border-subtle) 70%, transparent 100% ); opacity: 0.5; transition: opacity var(--duration-fast) var(--ease-out); } .task-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border-subtle), 0 8px 32px var(--shadow-glow); } .task-card:hover::before { background: linear-gradient(90deg, transparent 0%, var(--accent) 30%, var(--accent) 70%, transparent 100% ); opacity: 1; } .task-header { display: flex; justify-content: space-between; align-items: center; } .task-badge { padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); background: var(--bg-overlay); color: var(--text-secondary); border: 1px solid var(--border-subtle); } .task-badge.ai { color: var(--primary); background: var(--accent-subtle, var(--bg-overlay)); border-color: transparent; } .task-badge.human { color: var(--text-secondary); background: var(--bg-overlay); } .task-status { font-size: var(--text-xs); font-weight: 600; text-transform: capitalize; color: var(--text-secondary); } .task-status.active { color: var(--status-success); } .task-status.idle { color: var(--text-secondary); } .task-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; color: var(--text-secondary); letter-spacing: var(--tracking-tight); transition: color var(--duration-fast) var(--ease-out); } .task-card:hover .task-name { color: var(--primary); } .task-role { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; } .task-stats { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-2); margin-top: auto; } .task-tasks { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-secondary); font-family: var(--font-mono); } .task-tasks i { color: var(--primary); } .task-last-run { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-secondary); border-top: 1px solid var(--border-subtle); padding-top: var(--space-4); } .task-last-run i { color: var(--primary); opacity: 0.7; } /* ============================================ CONNECTORS GRID ============================================ */ .connectors-list-wrap { margin-top: var(--space-5); } .connectors-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-fixed-width), 1fr)); gap: var(--card-grid-gap); } .connectors-scroll-sentinel, .tasks-scroll-sentinel { height: 1px; width: 100%; pointer-events: none; visibility: hidden; } .loading-more { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-4); font-size: var(--text-sm); color: var(--text-secondary); } /* Middle body — Connectors: 4-column fixed grid, golden ratio proportions */ .page-content .settings-page .connectors-grid { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-4); align-items: stretch; } .page-content .settings-page .connector-card { width: 100%; min-width: 0; max-width: none; height: auto; min-height: 260px; max-height: none; overflow: visible; box-sizing: border-box; border-radius: var(--radius-xl); border: 1px solid var(--border-subtle); } @media (max-width: 1100px) { .page-content .settings-page .connectors-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .page-content .settings-page .connectors-grid { grid-template-columns: 1fr; } } .spinner.small { width: 18px; height: 18px; border-width: 2px; } .connector-card { width: 100%; min-width: 0; max-width: none; min-height: var(--card-fixed-height); box-sizing: border-box; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--card-padding); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); transition: all var(--duration-fast) var(--ease-out); } .connector-card:hover { /* Subtle brand-orange accent on hover so the card reads as interactive — matches the active chip + sidebar indicator color so the brand identity stays consistent. ``color-mix`` keeps the border subtle (40% mix toward the brand) instead of a hard orange outline which would feel aggressive on a list of cards. */ border-color: color-mix(in srgb, var(--signal-500) 40%, var(--border-subtle)); transform: translateY(-2px); box-shadow: var(--shadow-md), 0 4px 12px color-mix(in srgb, var(--signal-500) 8%, transparent); } .connector-card:hover .connector-icon { /* Icon swatch also picks up a brand-orange tint on hover (subtle inner shadow) to reinforce that the card is interactive. The icon glyph color stays as ``text-secondary`` so vendor logos (GitHub, Splunk, …) don't get recoloured. */ border-color: color-mix(in srgb, var(--signal-500) 35%, var(--border-subtle)); background: color-mix(in srgb, var(--signal-500) 8%, var(--bg-overlay)); } .connector-card.error { border-color: var(--severity-critical); border-left: 3px solid var(--severity-critical); background: var(--severity-critical-bg); } .connector-card.warning { border-color: var(--severity-high); border-left: 3px solid var(--severity-high); } .connector-header { display: flex; justify-content: space-between; align-items: center; } .connector-icon { width: clamp(40px, 2.5vw, 48px); height: clamp(40px, 2.5vw, 48px); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; background: var(--bg-overlay); border: 1px solid var(--border-subtle); transition: all var(--duration-fast) var(--ease-spring); } .connector-card:hover .connector-icon { transform: scale(1.05); } .connector-icon i { font-size: clamp(18px, 1.2vw, 22px); color: var(--text-secondary); } /* Stub integration indicators */ .stub-badge { margin-left: auto; padding: 4px 10px; background: var(--status-warning-subtle); color: var(--status-warning); font-size: var(--text-xs); font-weight: 600; border-radius: var(--radius-full); letter-spacing: 0.3px; line-height: 1; pointer-events: none; } .stub-connector { border: 1px dashed var(--border-subtle); opacity: 0.85; } .stub-connector:hover { opacity: 1; } .stub-integration { opacity: 0.7; } .status-badge { font-size: 0.85em; opacity: 0.7; margin-left: 4px; } .disabled { opacity: 0.5; cursor: not-allowed; } .connector-status { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); background: var(--bg-active); color: var(--text-secondary); } .connector-status.connected { color: var(--status-success); background: var(--status-success-subtle); } .connector-status.degraded { color: var(--status-warning); background: var(--status-warning-subtle); } .connector-status.disconnected { color: var(--severity-critical); background: var(--severity-critical-bg); } .connector-status.error { color: var(--destructive); background: var(--status-danger-subtle); } .connector-status.configuring { color: var(--info); background: var(--status-info-subtle); } .connector-status.large { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); } .connector-name { margin: 0; font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-tight); color: var(--text-primary); } .connector-body { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4); align-items: start; min-width: 0; } .connector-body-left { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .connector-category { display: block; margin: 0; } .connector-stats { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); margin: 0; font-size: var(--text-sm); color: var(--text-secondary); text-align: right; } .connector-stats span { display: flex; align-items: center; gap: var(--space-2); } .connector-sync { margin: 0; font-size: var(--text-xs); color: var(--text-quaternary); } .sync-time { display: flex; align-items: center; gap: var(--space-1); } .connector-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); } .connector-actions .btn-secondary, .connector-actions .btn-primary, .connector-actions .btn-danger-subtle { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); } /* ============================================ TEAM MEMBERS ============================================ */ .team-members-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5); } .team-member-card { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); transition: all var(--duration-fast) var(--ease-out); } .team-member-card:hover { background: var(--bg-overlay); border-color: var(--border-default); } .team-member-avatar { width: clamp(44px, 3vw, 56px); height: clamp(44px, 3vw, 56px); border-radius: var(--radius-full); background: linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%); color: var(--primary-foreground); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: var(--text-lg); box-shadow: 0 4px 12px var(--accent-subtle); } .team-member-info { display: flex; flex-direction: column; gap: 4px; flex: 1; } .team-member-name { font-weight: 600; color: var(--text-primary); font-size: var(--text-base); } .team-member-email { font-size: var(--text-sm); color: var(--text-secondary); } .team-member-role { font-size: var(--text-sm); color: var(--text-secondary); } .team-member-status { padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); background: var(--bg-active); color: var(--text-secondary); } .team-member-status.active { color: var(--status-success); background: var(--status-success-subtle); } .team-member-status.inactive { color: var(--text-secondary); } .team-member-last-active { font-size: var(--text-sm); color: var(--text-quaternary); display: flex; align-items: center; gap: var(--space-2); } /* ============================================ LIVE FEED PANEL — below Alert Triage on the Live Alerts tab ============================================ */ .live-feed-panel { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); margin-top: var(--space-5); overflow: hidden; } .live-feed-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); cursor: pointer; user-select: none; border-bottom: 1px solid var(--border-subtle); transition: background-color var(--duration-fast) var(--ease-out); } .live-feed-panel--collapsed .live-feed-header { border-bottom-color: transparent; } .live-feed-header:hover, .live-feed-header:focus-visible { background: var(--bg-overlay); outline: none; } .live-feed-header-left { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; } .live-feed-header-left h3 { margin: 0; font-size: var(--text-base); font-weight: 600; color: var(--text-primary); } .live-feed-header-left > i { color: var(--signal-500); font-size: var(--text-lg); } .live-feed-meta { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-secondary); font-size: var(--text-sm); } .live-feed-count { color: var(--text-secondary); } .live-feed-status { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--signal-500) 14%, transparent); color: var(--signal-500); font-size: var(--text-xs); font-weight: 500; } .live-feed-status.paused { background: var(--bg-overlay); color: var(--text-quaternary); } .live-feed-header-right { display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .live-feed-body { padding: var(--space-3) var(--space-4) var(--space-4); } .live-feed-body .live-events-list { margin-top: 0; } /* Row action button: hide label on narrow screens (icon-only) */ @media (max-width: 640px) { .row-action-btn-label { display: none; } } /* ============================================ LIVE EVENTS ============================================ */ .live-events-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-5); } .live-event-row { display: grid; grid-template-columns: 90px 1fr auto auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border-radius: var(--radius-lg); border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-default); font-size: var(--text-base); transition: all var(--duration-fast) var(--ease-out); } .live-event-row:hover { background: var(--bg-overlay); } /* Live Feed: cell types for grid layout (time / message / source / badge) */ .live-event-time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-quaternary); white-space: nowrap; } .live-event-message { font-size: var(--text-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-event-source { font-size: var(--text-xs); color: var(--text-secondary); white-space: nowrap; } .live-event-row.critical { border-left-color: var(--severity-critical); background: var(--severity-critical-bg); } .live-event-row.high { border-left-color: var(--severity-high); } .live-event-row.medium { border-left-color: var(--severity-medium); } .live-event-row.low, .live-event-row.info { border-left-color: var(--text-quaternary); } .live-event-time { font-size: var(--text-sm); font-family: var(--font-mono); color: var(--text-quaternary); } .live-event-source { font-size: var(--text-sm); color: var(--text-secondary); } /* ============================================ PREFERENCES FORM - Premium Settings Experience ============================================ */ .preferences-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--card-grid-gap); margin-top: var(--space-5); } .pref-section { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-5); position: relative; overflow: visible; } .pref-section::before { display: none; } .pref-section:hover::before { display: none; } .pref-section h4 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text-primary); margin: 0 0 var(--space-4) 0; padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; gap: var(--space-2); letter-spacing: var(--tracking-tight); } .pref-section h4 i { font-size: var(--text-lg); color: var(--primary); } .pref-section h4::before { display: none; } .pref-rows { display: flex; flex-direction: column; gap: 0; } .pref-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-out); } .pref-row:not(:last-child) { border-bottom: 1px solid var(--border-subtle); } .pref-row:hover { background: var(--bg-hover-strong); } .pref-label { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; } .pref-label i { font-size: var(--text-base); color: var(--text-secondary); flex-shrink: 0; } /* Custom toggle switch */ .pref-row input[type="checkbox"] { position: relative; width: 44px; height: 24px; margin: 0; cursor: pointer; appearance: none; -webkit-appearance: none; background: var(--toggle-track-off); border-radius: var(--radius-full); border: 1px solid var(--toggle-border); box-shadow: inset 0 1px 2px rgba(11,15,20,.12); transition: background 0.2s ease, border-color 0.2s ease; flex-shrink: 0; } .pref-row input[type="checkbox"]::before { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: var(--toggle-thumb); border-radius: 50%; box-shadow: 0 1px 3px rgba(11,15,20,.2); transition: transform 0.2s ease; } .pref-row input[type="checkbox"]:checked { background: var(--toggle-track-on); border-color: var(--toggle-track-on); box-shadow: inset 0 1px 2px rgba(11,15,20,.15); } .pref-row input[type="checkbox"]:checked::before { transform: translateX(20px); background: var(--toggle-thumb); } .pref-row input[type="checkbox"]:hover { border-color: var(--border-strong); } .pref-row input[type="checkbox"]:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .pref-row input[type="checkbox"]:checked:hover { border-color: var(--toggle-track-on); } .pref-row select { padding: var(--space-2) var(--space-4); padding-right: var(--space-8); background: var(--bg-surface); border: 1px solid var(--border, oklch(0.75 0.005 260)); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-primary); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; transition: all var(--duration-fast) var(--ease-out); min-width: 140px; } .pref-row select:hover, .pref-row select:focus { border-color: var(--primary); outline: none; box-shadow: 0 0 0 2px oklch(0.55 0.15 250 / 0.15); } .pref-row select option { background: var(--bg-surface); color: var(--text-primary); padding: var(--space-2); } /* Preferences placeholder/promo state */ .preferences-promo, .subtab-content .settings-content:has(> :only-child:not(.preferences-form)) { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-9); min-height: 400px; } .preferences-promo-icon, .settings-content > div:only-child:not(.preferences-form) > *:first-child { width: clamp(64px, 5vw, 80px); height: clamp(64px, 5vw, 80px); display: flex; align-items: center; justify-content: center; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); margin-bottom: var(--space-6); font-size: var(--text-3xl); color: var(--text-secondary); } /* Reporting settings - template config & generate */ .reporting-settings .settings-description { color: var(--text-secondary); font-size: var(--text-sm); margin-bottom: var(--space-4); } .report-template-form, .report-generate-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 560px; } /* Collapsible report sections (accordion) */ .report-template-sections { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; } .report-section { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; transition: border-color var(--duration-fast); } .report-section:hover { border-color: var(--border-default); } .report-section-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); cursor: pointer; user-select: none; transition: background-color var(--duration-fast); } .report-section-header:hover { background: var(--bg-elevated); } .report-section-header:active { background: var(--bg-overlay); } .report-section-title { display: flex; align-items: center; gap: var(--space-3); } .report-section-title i { font-size: var(--text-lg); color: var(--primary); } .report-section-title h4 { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text-primary); margin: 0; letter-spacing: var(--tracking-tight); } .report-section-header > i { font-size: var(--text-lg); color: var(--text-secondary); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast); } .report-section-header:hover > i { color: var(--text-secondary); } .report-section-content { padding: 0 var(--space-5) var(--space-5) var(--space-5); } /* Expand transition for collapsible sections */ .expand-enter-active, .expand-leave-active { transition: all var(--duration-normal) var(--ease-out); overflow: hidden; } .expand-enter-from, .expand-leave-to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; } .expand-enter-to, .expand-leave-from { opacity: 1; max-height: 1000px; } .reporting-settings .section-header-spaced { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); } .reporting-settings .report-generate-inline { margin-top: var(--space-8); } /* Generate report form (shared: inline + modal) */ .report-generate-form .form-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); gap: var(--space-5); align-items: flex-end; } .report-generate-form .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .report-generate-form .form-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); } .report-generate-form .form-input, .report-generate-form .date-input { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); font-size: var(--text-sm); } .report-generate-form .date-range-row { display: flex; gap: var(--space-3); align-items: center; } .report-generate-form .date-range-row .date-input { flex: 1; min-width: 0; } .reporting-settings .form-group { display: flex; flex-direction: column; gap: var(--space-2); } .reporting-settings .form-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); } .reporting-settings .form-label i { color: var(--primary); opacity: 0.9; } .reporting-settings .form-input { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); background: var(--bg-surface); color: var(--text-primary); font-size: var(--text-sm); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); } /* Modern selects across settings (report format etc.) */ .reporting-settings select.form-input { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: var(--space-6); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23717b8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; } .reporting-settings .form-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--accent-glow); } .reporting-settings .form-input::placeholder { color: var(--text-secondary); } /* Dark theme – ensure date inputs and selects match dark palette */ .dark .reporting-settings .form-input[type="date"], .dark .reporting-settings .form-input[type="text"], .dark .reporting-settings .form-input[type="number"], .dark .reporting-settings .form-input select { background: var(--bg-elevated); border-color: var(--border-subtle); color: var(--text-primary); } .dark .reporting-settings .form-input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); } .reporting-settings .form-hint { font-size: var(--text-xs); color: var(--text-secondary); } .reporting-settings .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-4); } .reporting-settings .form-row-2 { grid-template-columns: 1fr auto; } /* Generate report – date range row */ .reporting-settings .date-range-row { display: flex; align-items: center; gap: var(--space-2); } .reporting-settings .date-range-row .date-input { flex: 1; min-width: 0; } .reporting-settings .date-sep { color: var(--text-secondary); font-size: var(--text-sm); } .reporting-settings .form-group-inline .form-inline-inputs { display: flex; align-items: center; gap: var(--space-2); } .reporting-settings .form-input-narrow { width: 5rem; min-width: 4rem; } .reporting-settings .form-inline-sep { color: var(--text-secondary); font-size: var(--text-sm); } .reporting-settings .form-input[type="number"] { width: auto; } .reporting-settings code { font-size: 0.9em; padding: 0.1em 0.35em; background: var(--bg-overlay); border-radius: var(--radius-sm); color: var(--primary); } .reporting-settings .form-actions { margin-top: var(--space-2); display: flex; justify-content: flex-start; } .reporting-settings .form-actions .btn-primary { display: inline-flex; align-items: center; gap: var(--space-2); } .reporting-settings .form-actions .spinner.small { width: 18px; height: 18px; border-width: 2px; } /* Generate report - modern card styling */ .reporting-settings .report-generate-form { margin-top: var(--space-4); padding: var(--space-5); border-radius: var(--radius-xl); background: var(--bg-surface); box-shadow: var(--shadow-sm); } @media (min-width: 900px) { .reporting-settings .report-generate-form .form-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ============================================ OVERLAY PANEL - Premium Slide-Out ============================================ */ .overlay-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: var(--space-6); } .overlay-panel { width: min(560px, 95vw); max-height: 85vh; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-2xl); display: flex; flex-direction: column; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); } .overlay-backdrop:has(.overlay-panel--alert) { padding: var(--space-4); } .overlay-panel--alert { /* Widened from 580px → 760px so long PowerShell command lines and base64 payloads have room to breathe, and the 3-column DETAILS grid below gets ~225px per card instead of cramped ~170px. The viewport cap (calc(100vw - 48px)) keeps narrow screens safe. */ width: min(760px, calc(100vw - 2 * var(--space-6))); max-width: 760px; max-height: min(88vh, 820px); min-height: 0; overflow: visible; box-shadow: var(--shadow-xl); } .overlay-panel--alert .overlay-header h2 { font-size: var(--text-xl); line-height: var(--leading-tight); margin-top: 0; } .overlay-panel--alert .overlay-subtitle { font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1); } .alert-header-byline { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); } .alert-header-byline__source { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); } .alert-header-byline__sep { color: var(--text-quaternary); user-select: none; } .alert-header-byline__time { font-size: var(--text-xs); color: var(--text-tertiary); } .alert-header-byline__tenant { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 500; color: var(--text-secondary); } .alert-header-byline__tenant .ph { font-size: 0.95rem; opacity: .85; } .alert-header-byline .alert-header-meta { display: inline-flex; align-items: center; gap: var(--space-2); margin-left: auto; } .overlay-subtitle--muted { display: block; color: var(--text-tertiary) !important; } .overlay-header--alert { padding: var(--space-5) var(--space-5) var(--space-4); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; overflow: visible; z-index: 25; } .overlay-header--alert::after { display: none; } .alert-header-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .alert-workflow { padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--border-subtle); background: transparent; flex-shrink: 0; } .alert-workflow__bar { display: flex; gap: 6px; height: 4px; } .alert-workflow__segment { flex: 1 1 0; border-radius: var(--radius-full); background: var(--border-subtle); transition: background var(--duration-fast) var(--ease-out); } .alert-workflow__segment.is-done { background: var(--ink-300); } .dark .alert-workflow__segment.is-done { background: var(--ink-600); } .alert-workflow__segment.is-active { background: var(--signal-500); box-shadow: 0 0 8px rgba(232, 162, 58, .35); } .alert-workflow__labels { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-2); } .alert-workflow__labels span { font-size: var(--text-xs); line-height: 1.3; font-weight: 600; text-align: center; color: var(--text-quaternary); } .alert-workflow__labels span.is-done { color: var(--text-tertiary); } .alert-workflow__labels span.is-active { color: var(--signal-500); } .dark .alert-workflow__labels span.is-active { color: var(--signal-300); } .overlay-panel--alert .overlay-body { flex: 1 1 auto; min-height: 0; } .overlay-content--alert { gap: var(--space-4); padding: var(--space-4) var(--space-5) var(--space-5); } .alert-severity-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-active); } .alert-severity-strip__label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); } .alert-severity-strip__dot { width: 8px; height: 8px; border-radius: var(--radius-full); flex-shrink: 0; } .alert-severity-strip__label.critical .alert-severity-strip__dot { background: var(--severity-critical); } .alert-severity-strip__label.high .alert-severity-strip__dot { background: var(--severity-high); } .alert-severity-strip__label.medium .alert-severity-strip__dot { background: var(--severity-medium); } .alert-severity-strip__label.low .alert-severity-strip__dot { background: var(--severity-low); } .alert-detail-section { display: flex; flex-direction: column; gap: var(--space-3); } .alert-detail-section__label { margin: 0; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-tertiary); } /* Resolution block (SL#7): closure verdict + comment shown on terminal alerts. */ .alert-resolution__comment-label { font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-tertiary); } .alert-resolution__comment { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); /* Preserve analyst line breaks; wrap long tokens so the panel never overflows. */ white-space: pre-wrap; word-break: break-word; color: var(--text-secondary); } /* Verdict badge — reuse the status palette; colour by verdict. */ .verdict-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: var(--radius-pill, 999px); font-size: var(--text-xs); font-weight: 600; text-transform: capitalize; background: var(--bg-subtle, rgba(127, 127, 127, 0.12)); color: var(--text-secondary); } .verdict-badge.true_positive { background: var(--danger-soft, rgba(220, 38, 38, 0.12)); color: var(--danger, #dc2626); } .verdict-badge.false_positive, .verdict-badge.benign { background: var(--success-soft, rgba(22, 163, 74, 0.12)); color: var(--success, #16a34a); } .alert-detail-section__text { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); } .detail-grid--alert { grid-template-columns: 1fr; gap: var(--space-2); } .detail-grid--alert .detail-item { padding: var(--space-3) var(--space-4); } .alert-detail-section--notes { padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); } .alert-notes-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .alert-detail-section--notes .notes-textarea { width: 100%; min-height: 120px; resize: vertical; } .alert-detail-section--notes .notes-text, .alert-detail-section--notes .notes-empty { margin: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-secondary); } .alert-detail-section--notes .notes-empty { color: var(--text-tertiary); font-style: italic; } .alert-detail-section--notes .notes-actions { display: flex; gap: var(--space-2); } .alert-detail-section .technique-name { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); } .alert-detail-section .triage-feedback { padding-left: var(--space-1); } /* Structured process-context block (Wazuh decoder output). Replaces the wall of raw log text the alert modal used to show as its primary view. */ .alert-process-context { display: grid; grid-template-columns: minmax(110px, max-content) 1fr; gap: var(--space-2) var(--space-3); margin: 0; } .alert-process-context dt { color: var(--text-secondary); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.05em; padding-top: 4px; } .alert-process-context dd { margin: 0; word-break: break-word; /* Without min-width: 0, a grid cell takes the intrinsic width of its children — a 
 with white-space: pre forces the cell to expand
       past the modal, then the modal can't clip and the page itself
       starts overflowing. min-width: 0 lets the cell shrink so the
       codeblock's own overflow-x scroll (or wrap variant) actually kicks in. */
    min-width: 0;
}
.alert-codeblock {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary, color-mix(in srgb, var(--text) 6%, transparent));
    border-radius: 4px;
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: var(--text-xs);
    overflow-x: auto;
    white-space: pre;
    max-width: 100%;
}
.alert-codeblock--wrap {
    white-space: pre-wrap;
    /* overflow-wrap: anywhere prefers space-breaks (good for commands)
       but falls back to mid-token break (good for base64). Better than
       word-break: break-all, which always shatters words mid-character. */
    overflow-wrap: anywhere;
    word-break: normal;
    /* Cap tall expansions (a full base64 payload could be 30+ lines)
       and let the user scroll within instead of stretching the modal. */
    max-height: 240px;
    overflow-y: auto;
}
.alert-encoded-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    /* Same flex-shrink problem as the dd above — without min-width: 0
       the long  child sets the min-content and the wrap doesn't
       constrain. */
    min-width: 0;
    max-width: 100%;
}
.alert-encoded {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: var(--text-xs);
    color: var(--text);
    word-break: break-all;
    min-width: 0;
    flex: 1 1 auto;
}
.alert-expand-details {
    margin-top: var(--space-2);
}
/* Raw payload collapsible now sits inside the Details section — give it a
   little breathing room below the detail grid + a divider. */
.alert-raw-details--in-detail {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle, var(--border-color, #2a2a3a));
}
.alert-expand-details > summary,
.alert-raw-details > summary {
    cursor: pointer;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    padding: 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.alert-expand-details > summary:hover,
.alert-raw-details > summary:hover {
    color: var(--text);
}
.alert-detail-section__text--raw {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: var(--text-xs);
    background: var(--bg-secondary, color-mix(in srgb, var(--text) 6%, transparent));
    padding: var(--space-2) var(--space-3);
    border-radius: 4px;
    margin-top: var(--space-2);
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-secondary);
}

/* Raw alert payload JSON viewer (bottom of the alert overlay). Reuses the
   .alert-raw-details chip summary; the 
 here is the scrollable,
   monospace, bordered JSON body. Theme-agnostic — every colour resolves
   through a token so it reads correctly in both dark and light. */
.alert-raw-json__pre {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace);
    font-size: var(--text-xs);
    line-height: 1.5;
    background: var(--bg-secondary, color-mix(in srgb, var(--text) 6%, transparent));
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: var(--space-3);
    border-radius: var(--radius-md, 8px);
    margin-top: var(--space-2);
    margin-bottom: 0;
    max-height: 360px;
    overflow: auto;
    white-space: pre;
    tab-size: 2;
    -moz-tab-size: 2;
}

.overlay-panel--alert .overlay-header-actions {
    align-self: flex-start;
    padding-top: var(--space-1);
}

.overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    background: transparent;
    border-bottom: none;
    position: relative;
}

.overlay-panel--alert .overlay-header {
    padding: var(--space-4) var(--space-4) var(--space-3);
}

.modal-panel--disposition {
    width: min(420px, 92vw);
}

.overlay-header-actions {
    position: relative;
    z-index: 30;
    flex-shrink: 0;
}

.action-menu-backdrop--elevated {
    z-index: 10000;
}

.action-menu-dropdown--elevated {
    z-index: 10001;
    min-width: 260px;
}

.overlay-actions-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
}

.action-menu-label {
    padding: var(--space-2) var(--space-4) var(--space-1);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.action-menu-item--escalate i {
    color: var(--severity-high);
}

.overlay-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-subtle), transparent);
}

.overlay-header-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 auto;
    min-width: 0;
}

.overlay-header h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tight);
}

.overlay-subtitle {
    font-size: var(--text-base);
    color: var(--text-secondary);
}

.overlay-close {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-out);
    flex-shrink: 0;
}

.overlay-close:hover {
    background: var(--bg-active);
    border-color: var(--border-strong);
    color: var(--text-primary);
    transform: rotate(90deg);
}

.overlay-close i {
    font-size: var(--text-lg);
}

.overlay-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: var(--space-2);
    background: var(--bg-surface);
    scrollbar-width: thin;
    scrollbar-color: var(--border-subtle) transparent;
}

.overlay-body:hover {
    scrollbar-width: thin;
}

.overlay-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    background: var(--bg-surface);
    scrollbar-width: none; /* Firefox – hide scrollbar but keep scroll */
}

/* Hide scrollbars inside overlay while keeping scroll behavior */
.overlay-body::-webkit-scrollbar,
.overlay-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Overlay Footer */
.overlay-footer {
    padding: var(--space-4) var(--space-6) var(--space-5);
    background: transparent;
    border-top: none;
    display: flex;
    gap: var(--space-3);
}

.overlay-footer .btn-primary,
.overlay-footer .btn-secondary {
    flex: 1;
    justify-content: center;
    padding: var(--space-4);
}

.overlay-footer .btn-secondary:only-child {
    flex: 1;
}

/* Full-width button utility */
.btn-block {
    width: 100%;
    flex: 1;
    justify-content: center;
}

/* Success Value Display */
.overlay-value-display {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--accent-subtle), var(--bg-surface));
    border: 1px solid var(--border-default);
    box-shadow:
        var(--shadow-lg),
        0 0 0 1px var(--border-subtle);
}

.overlay-value-icon {
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--status-success-subtle);
    color: var(--status-success);
    flex-shrink: 0;
    box-shadow: 0 0 24px var(--status-success-subtle);
}

.overlay-value-icon.connected {
    background: var(--status-success-subtle);
    color: var(--status-success);
    box-shadow: 0 0 24px var(--status-success-subtle);
}

.overlay-value-icon.disconnected {
    background: var(--status-danger-subtle);
    color: var(--status-danger);
    box-shadow: 0 0 24px var(--status-danger-subtle);
}

.overlay-value-icon i {
    font-size: var(--text-2xl);
}

.overlay-value-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.overlay-value-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.overlay-value-number {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: var(--tracking-tighter);
    text-transform: capitalize;
}

.value.capitalize {
    text-transform: capitalize;
}

/* Detail Sections – simple, card-like blocks */
.detail-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
}

.overlay-content > .detail-section:first-of-type {
    margin-top: var(--space-1);
}

.detail-section h4 {
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-secondary);
    /* Hairline under each section title so the flyout's stacked cards
       (Description / Details / MITRE / Indicators / Notes) read as
       distinct titled blocks instead of blending. */
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-subtle);
}

.detail-section p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* Severity Banner */
.severity-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-xl);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    box-shadow:
        var(--shadow-lg),
        0 0 0 1px var(--border-subtle);
    gap: var(--space-4);
}

.overlay-content > .severity-banner {
    margin-bottom: var(--space-2);
}

.severity-banner.critical {
    border-left: 4px solid var(--severity-critical);
    background: var(--severity-critical-bg);
}

.severity-banner.high {
    border-left: 4px solid var(--severity-high);
    background: var(--severity-high-bg);
}

.severity-banner.medium {
    border-left: 4px solid var(--severity-medium);
    background: var(--severity-medium-bg);
}

.severity-banner.low {
    border-left: 4px solid var(--severity-low);
    background: var(--severity-low-bg);
}

.severity-label {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.severity-label::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: currentColor;
    box-shadow: 0 0 12px currentColor;
}

.severity-banner.critical .severity-label::before { background: var(--severity-critical); }
.severity-banner.high .severity-label::before { background: var(--severity-high); }
.severity-banner.medium .severity-label::before { background: var(--severity-medium); }
.severity-banner.low .severity-label::before { background: var(--severity-low); }

.status-badge {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.status-badge.open {
    color: var(--text-primary);
    background: var(--bg-active);
}
.status-badge.investigating {
    color: var(--primary);
    background: var(--accent-surface);
    border-color: var(--accent-subtle);
}
.status-badge.escalated_to_customer {
    color: var(--severity-medium);
    background: var(--severity-medium-bg);
    border-color: var(--severity-medium-bg);
}
.status-badge.resolved {
    color: var(--status-success);
    background: var(--status-success-subtle);
    border-color: var(--status-success-subtle);
}

.scope-badge {
    display: inline-block;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.scope-badge.org {
    /* Previous styling hard-coded a dark surface (``#2a2a2a``) so the
       ORGANIZATION badge painted near-black-on-near-black in light mode
       on the Connectors card. Use theme-aware tokens instead: a subtle
       neutral fill + thin border that reads as a labeled pill in both
       themes and stays distinct from the PERSONAL purple pill below. */
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
    color: var(--text-secondary);
    border: 1px solid color-mix(in srgb, var(--text-primary) 14%, transparent);
}
.scope-badge.user {
    background: rgba(147, 112, 219, 0.15);
    color: #8a6bd0;
    border: 1px solid rgba(147, 112, 219, 0.35);
}
.dark .scope-badge.user {
    color: #b39ddb;
}
.btn-danger-subtle {
    background: transparent;
    color: var(--text-tertiary, #666);
    border: 1px solid transparent;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: var(--radius-md, 6px);
    transition: color 0.15s, background 0.15s;
}
.btn-danger-subtle:hover {
    color: var(--destructive, oklch(0.55 0.22 25));
    background: rgba(220, 50, 50, 0.08);
}
.btn-danger-subtle.small {
    padding: 4px 6px;
    font-size: var(--text-xs, 11px);
}

/* Detail Grid */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    min-width: 0;
}

.detail-item .label {
    font-size: var(--text-xs);
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.detail-item .value {
    font-size: var(--text-base);
    color: var(--text-primary);
    font-weight: 500;
    min-width: 0;
    word-break: break-word;
}

.detail-item .value.code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    word-break: break-all;
    font-weight: 400;
}

.detail-item--id .value--mono {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    word-break: break-all;
    font-weight: 400;
}

.btn-copy-id {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-quaternary);
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.btn-copy-id:hover {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
/* Wazuh "open in source" button shown before the dashboard URL is configured:
   muted + dashed so it reads as "set me up" rather than a live deep-link, but
   stays discoverable. Clicking routes the admin to Settings → Integrations.
   Theme-aware — inherits the base button's custom properties. */
.btn-copy-id--unset {
    border-style: dashed;
    opacity: 0.65;
}
.btn-copy-id--unset:hover {
    opacity: 1;
}

/* "View linked case" (and similar) anchors live as  INSIDE
    — the compound `.value.link` selector never matched
   them, so they fell back to the browser-default blue (unreadable on the dark
   theme). Target the child anchor and use the theme-flipped --info-color
   (#5B9BD8 light / #7AB4E8 dark) so the link reads well in both themes. */
.detail-item .value .link,
.detail-item .value.link {
    color: var(--info-color);
    cursor: pointer;
    text-decoration: none;
}

.detail-item .value .link:hover,
.detail-item .value .link:focus-visible,
.detail-item .value.link:hover {
    text-decoration: underline;
}

.tags-row {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.technique-name {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin-top: var(--space-2);
}

/* Indicators List */
.indicators-list {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.indicator-chip {
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    transition: all var(--duration-fast) var(--ease-out);
    cursor: pointer;
}

.indicator-chip:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-subtle);
    color: var(--primary);
    transform: translateY(-2px);
}

/* Steps List */
.steps-list {
    list-style: none;
    counter-reset: step;
    position: relative;
}

.steps-list::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-subtle), var(--border-subtle));
}

.steps-list li {
    position: relative;
    padding: var(--space-4) var(--space-5);
    padding-left: 48px;
    margin-bottom: var(--space-3);
    background: var(--bg-surface);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    line-height: var(--leading-relaxed);
    transition: all var(--duration-fast) var(--ease-out);
}

.steps-list li:hover {
    background: var(--bg-elevated);
    border-color: var(--border-default);
    transform: translateX(4px);
}

.steps-list li:last-child {
    margin-bottom: 0;
}

.steps-list li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: var(--space-4);
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    color: var(--primary-foreground);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    box-shadow: 0 0 12px var(--accent-subtle);
}

/* Config and Analysis Data */
.config-list,
.analysis-data {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Finding reasoning chain — ordered list of analytical observations
   that led to a finding. Lives inside ``.detail-section`` in the
   finding detail overlay; numerals are slightly muted so the prose
   reads first. */
.finding-reasoning-list {
    list-style: decimal;
    list-style-position: outside;
    padding-left: var(--space-5);
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: 1.55;
}
.finding-reasoning-list li {
    padding-left: var(--space-1);
    margin: var(--space-2) 0;
}
.finding-reasoning-list li::marker {
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* Finding description / analyst-notes prose blocks. Descriptions are
   the full Sysmon-event line in many cases, so preserve embedded
   newlines and let long tokens (commands, hashes) wrap. */
.finding-description-text {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--text-sm);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Metadata footer — detected / first-observed / last-observed /
   confidence. Visually de-emphasized vs the rest of the overlay so
   the analyst's eye skims past it unless they're auditing timings. */
.finding-metadata-footer {
    opacity: 0.85;
}
.finding-metadata-footer dl dt,
.finding-metadata-footer dl dd {
    color: var(--text-tertiary);
    font-size: var(--text-xs);
}

.config-item,
.analysis-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--bg-surface);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.config-item .label,
.analysis-item .label {
    font-size: var(--text-xs);
    color: var(--text-quaternary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}

.config-item .value,
.analysis-item .value {
    font-size: var(--text-base);
    color: var(--text-primary);
    font-weight: 500;
}

.config-item .value.code {
    font-family: var(--font-mono);
    font-weight: 400;
    color: var(--text-secondary);
}

/* Health Badge */
.health-badge {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    margin-left: var(--space-3);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

.health-badge.healthy {
    color: var(--status-success);
    background: var(--status-success-subtle);
    border-color: var(--status-success-subtle);
}
.health-badge.warning {
    color: var(--status-warning);
    background: var(--status-warning-subtle);
    border-color: var(--status-warning-subtle);
}
.health-badge.error {
    color: var(--status-danger);
    background: var(--status-danger-subtle);
    border-color: var(--status-danger-subtle);
}

/* ============================================
   TRANSITIONS & ANIMATIONS
   ============================================ */
.slide-enter-active,
.slide-leave-active {
    transition: opacity var(--duration-normal) var(--ease-out);
}

.slide-enter-active .overlay-panel,
.slide-leave-active .overlay-panel {
    transition: transform var(--duration-normal) var(--ease-out), opacity var(--duration-normal) var(--ease-out);
}

.slide-enter-from .overlay-panel,
.slide-leave-to .overlay-panel {
    transform: scale(0.95) translateY(10px);
    opacity: 0;
}

.slide-enter-from,
.slide-leave-to {
    opacity: 0;
}

/* Pulse Animation for Live Data */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

/* Glow Animation */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 20px var(--accent-subtle); }
    50% { box-shadow: 0 0 40px var(--accent-muted); }
}

.glow {
    animation: glow 3s ease-in-out infinite;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-strong);
}

/* ============================================
   RESPONSIVE - LARGE SCREENS
   ============================================ */

/* 1600px+ - Wide Desktop (cap content width for readability) */
@media (min-width: 1600px) {
    :root {
        --content-max-width: min(100%, 1720px);
    }

    .playbooks-grid,
    .connectors-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--list-card-width), 1fr));
    }
    .apt-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--list-card-width), 1fr));
    }
}

/* 2560px+ - 2K/QHD (no extra-wide content) */
@media (min-width: 2560px) {
    :root {
        --content-max-width: min(100%, 1720px);
    }

    .live-event-row {
        grid-template-columns: 120px 1fr auto auto;
    }

    .detail-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 3840px+ - 4K/UHD (keep content contained, no giant boxes) */
@media (min-width: 3840px) {
    :root {
        --sidebar-width: 80px;
        --header-height: 72px;
        --content-max-width: min(100%, 1720px);
    }

    .kpi-row {
        grid-template-columns: repeat(5, 1fr);
    }

    .playbooks-grid,
    .connectors-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--list-card-width), 1fr));
    }
    .apt-grid {
        grid-template-columns: repeat(auto-fill, minmax(var(--list-card-width), 1fr));
    }

    .overlay-panel {
        width: min(520px, 90vw);
        max-width: 520px;
    }

    .detail-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   RESPONSIVE - STANDARD SCREENS
   ============================================ */
@media (max-width: 1024px) {
    .dashboard-sections-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    :root {
        --content-padding: var(--space-4);
    }

    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-box {
        max-width: none;
    }

    .filter-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Row actions: fade in on row hover (actions are hidden by default) */
.row-actions-visible {
    opacity: 0;
    transition: opacity var(--duration-fast);
}
tr:hover .row-actions-visible,
tr:focus-within .row-actions-visible {
    opacity: 1;
}

/* Live Feed collapsed: last-event snippet */
.live-feed-last {
    color: var(--text-quaternary);
    font-size: var(--text-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 768px) {
    /* Investigations: compact spacing on small screens */
    .investigations-page .section-header {
        margin-bottom: var(--space-3);
    }
    .investigations-page .filter-bar {
        margin-bottom: var(--space-4);
        padding: var(--space-3);
    }
    .investigations-page .playbooks-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
        gap: var(--space-3);
    }
    .investigations-page .playbooks-grid .apt-card {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: auto;
        min-height: 0;
        max-height: none;
        padding: var(--space-4);
        gap: var(--space-3);
    }
    .investigations-page .apt-actions-row {
        flex-wrap: wrap;
        gap: var(--space-2);
        padding-top: var(--space-3);
    }
    .investigations-page .apt-meta {
        gap: var(--space-3);
    }

    .overlay-panel {
        width: 100%;
    }

    .header-left {
        gap: var(--space-2);
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-grid--alert {
        grid-template-columns: 1fr;
    }

    .overlay-panel--alert {
        width: min(100%, calc(100vw - 2 * var(--space-3)));
        max-height: 92vh;
    }

    .page-header {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
        flex-wrap: nowrap;
        gap: var(--space-2);
    }

    .page-subnav {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }

    .header-actions {
        flex-wrap: nowrap;
        gap: var(--space-1);
    }

    .profile-trigger-name {
        display: none;
    }

    .header-language-select {
        max-width: 4.5rem;
    }

    .notif-panel {
        width: min(360px, calc(100vw - 2 * var(--space-4)));
        right: calc(-1 * var(--space-2));
    }

    .modal-backdrop {
        padding: var(--space-4);
        align-items: flex-start;
        overflow-y: auto;
    }

    .modal-panel {
        width: 100%;
        max-width: none;
        max-height: calc(100dvh - 2 * var(--space-4));
        max-height: calc(100vh - 2 * var(--space-4));
        margin: auto 0;
        flex-shrink: 0;
    }

    .modal-body {
        padding: var(--space-4) var(--space-4);
    }

    .task-run-progress-header {
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .task-run-info {
        flex-wrap: wrap;
    }

    .task-run-actions {
        flex-shrink: 0;
    }
}

@media (max-width: 560px) {
    .page-header {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
        gap: var(--space-1);
    }

    .header-left,
    .header-title-group {
        min-width: 0;
        overflow: hidden;
    }

    .header-title-group {
        flex-wrap: nowrap;
        gap: var(--space-2);
    }

    .page-header h1 {
        flex: 1 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 1.25rem;
        gap: var(--space-2);
    }

    .page-header h1 i {
        font-size: var(--text-xl);
    }

    .header-actions {
        flex: 0 0 auto;
    }

    .header-language {
        position: relative;
        justify-content: center;
        width: clamp(32px, 2vw, 40px);
        padding: 0;
    }

    .header-language-select {
        position: absolute;
        inset: 0;
        width: 100%;
        max-width: none;
        opacity: 0;
        padding: 0;
    }

    .profile-trigger {
        width: clamp(32px, 2vw, 40px);
        height: clamp(32px, 2vw, 40px);
        padding: 0;
        justify-content: center;
    }

    .profile-trigger-caret {
        display: none;
    }
}

@media (max-width: 480px) {
    :root {
        --content-padding: var(--space-3);
    }

    .page-header {
        padding-left: var(--space-2);
        padding-right: var(--space-2);
    }

    .context-chip {
        max-width: 100%;
    }

    .page {
        padding-left: var(--space-3);
        padding-right: var(--space-3);
    }

    /* Investigations playbooks: maximum space efficiency */
    .investigations-page .section-header {
        margin-bottom: var(--space-2);
    }
    .investigations-page .section-header h3 {
        font-size: var(--text-base);
    }
    .investigations-page .filter-bar {
        margin-bottom: var(--space-3);
        padding: var(--space-2) var(--space-3);
    }
    .investigations-page .playbooks-grid {
        gap: var(--space-2);
    }
    .investigations-page .playbooks-grid .apt-card {
        padding: var(--space-3);
        gap: var(--space-2);
    }
    .investigations-page .apt-actions-row {
        flex-wrap: wrap;
        gap: var(--space-2);
        padding-top: var(--space-2);
    }
    .investigations-page .apt-meta {
        gap: var(--space-2);
    }

    .modal-backdrop {
        padding: var(--space-3);
    }

    .modal-panel {
        max-height: calc(100dvh - 2 * var(--space-3));
        max-height: calc(100vh - 2 * var(--space-3));
    }

    .toast-container {
        left: var(--space-3);
        right: var(--space-3);
        max-width: min(400px, calc(100vw - 2 * var(--space-3)));
    }

    .sub-tab {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-xs);
    }

    .empty-state,
    .loading-state {
        padding-left: var(--space-4);
        padding-right: var(--space-4);
    }
}

/* ============================================
   PAGINATION & SCROLL CONTROLS
   ============================================ */

/* CSS Custom Property for list heights */
:root {
    --list-max-height: calc(100vh - 350px);
    --list-max-height-compact: calc(100vh - 400px);
}

/* Pagination Controls Container */
.pagination-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Pagination Info Text */
.pagination-info {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    letter-spacing: var(--tracking-normal);
}

.pagination-info .current-range {
    color: var(--text-primary);
    font-weight: 500;
}

.pagination-info .total-count {
    color: var(--text-secondary);
}

/* Pagination Buttons Container */
.pagination-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Pagination Icon Buttons */
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.pagination-btn:hover:not(:disabled) {
    background: var(--bg-overlay);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.pagination-btn:active:not(:disabled) {
    background: var(--bg-active);
    transform: scale(0.96);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.pagination-btn i {
    font-size: var(--text-base);
}

/* Page Number Display */
.pagination-page-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0 var(--space-3);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}

.pagination-page-info .current-page {
    color: var(--text-primary);
    font-weight: 600;
}

/* Page Size Select Dropdown */
.page-size-select {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-size-select label {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.page-size-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 70px;
    padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-sans);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.page-size-select select:hover {
    border-color: var(--border-strong);
    background-color: var(--bg-overlay);
}

.page-size-select select:focus {
    outline: none;
    border-color: var(--accent-subtle);
    box-shadow: 0 0 0 3px var(--accent-surface);
}

.page-size-select select option {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Middle body — modern, simple pagination styling */
.page-content .pagination-controls {
    padding: var(--space-3) 0;
    margin-top: var(--space-4);
    border-top: 1px solid var(--border-subtle);
    background: transparent;
    border-radius: 0;
    gap: var(--space-4);
    font-size: var(--text-sm);
}

.page-content .pagination-controls .pagination-info {
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.page-content .pagination-controls .pagination-buttons {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-content .pagination-controls .btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--duration-fast) var(--ease-out);
}

.page-content .pagination-controls .btn-icon:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.page-content .pagination-controls .btn-icon:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-content .pagination-controls .page-indicator {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: 0 var(--space-2);
}

.page-content .pagination-controls .page-size-select {
    min-width: 0;
}

.page-content .pagination-controls .page-size-select {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.page-content .pagination-controls .page-size-select select {
    min-width: 80px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    font-size: var(--text-xs);
}


/* ============================================
   SCROLLABLE LIST CONTAINERS
   ============================================ */

/* Virtual Scroll Container */
.scroll-container {
    overflow-y: auto;
    max-height: var(--list-max-height);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar Styling */
.scroll-container::-webkit-scrollbar {
    width: 8px;
}

.scroll-container::-webkit-scrollbar-track {
    background: var(--bg-surface);
    border-radius: var(--radius-full);
}

.scroll-container::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: var(--radius-full);
    border: 2px solid var(--bg-surface);
}

.scroll-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-quaternary);
}

/* Firefox Scrollbar */
.scroll-container {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) var(--bg-surface);
}

/* Apply scrollable behavior to list containers */
.alerts-list.scroll-container,
.alerts-list-scrollable {
    max-height: var(--list-max-height);
    overflow-y: auto;
}

.playbooks-grid.scroll-container,
.playbooks-grid-scrollable {
    max-height: var(--list-max-height);
    overflow-y: auto;
}

.findings-table.scroll-container,
.findings-table-scrollable {
    max-height: var(--list-max-height);
    overflow-y: auto;
}

.connectors-grid.scroll-container,
.connectors-grid-scrollable {
    max-height: var(--list-max-height);
    overflow-y: auto;
}

.team-table.scroll-container,
.team-table-scrollable {
    max-height: var(--list-max-height);
    overflow-y: auto;
}

.apt-grid.scroll-container,
.apt-grid-scrollable {
    max-height: var(--list-max-height);
    overflow-y: auto;
}

.events-list.scroll-container,
.events-list-scrollable {
    max-height: var(--list-max-height);
    overflow-y: auto;
}

/* Compact variant for smaller sections */
.scroll-container-compact {
    max-height: var(--list-max-height-compact);
}

/* ============================================
   FILTER BAR RESPONSIVE ENHANCEMENTS
   ============================================ */

.filter-bar-responsive {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.filter-bar-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    min-width: 0;
}

.filter-bar-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}

/* Filter chips/tags */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--accent-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.filter-chip:hover {
    background: var(--accent-subtle);
    border-color: var(--border-strong);
    color: var(--text-primary);
}

.filter-chip.active {
    background: var(--accent-subtle);
    border-color: var(--accent-muted);
    color: var(--primary);
}

.filter-chip .remove-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: var(--space-1);
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.filter-chip .remove-chip:hover {
    background: var(--bg-active);
    color: var(--text-primary);
}

/* Active filters count badge */
.filter-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-2);
    background: var(--accent);
    border-radius: var(--radius-full);
    color: var(--bg-base);
    font-size: var(--text-xs);
    font-weight: 600;
}

/* Clear all filters button */
.clear-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.clear-filters-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}

/* Responsive filter bar adjustments */
@media (max-width: 1024px) {
    .filter-bar-responsive {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-bar-left,
    .filter-bar-right {
        width: 100%;
    }

    .filter-bar-right {
        justify-content: flex-end;
    }
}

@media (max-width: 768px) {
    .pagination-controls {
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
    }

    .pagination-info {
        text-align: center;
    }

    .pagination-buttons {
        justify-content: center;
    }

    .page-size-select {
        justify-content: center;
    }

    .filter-bar-left {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-chips {
        justify-content: center;
    }
}

/* ============================================
   LOADING STATE FOR PAGINATED LISTS
   ============================================ */

.list-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    color: var(--text-secondary);
}

.list-loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-default);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: cpod-spin 0.8s linear infinite;
}

/* Empty state for paginated lists */
.list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-8);
    color: var(--text-secondary);
    text-align: center;
}

.list-empty i {
    font-size: 48px;
    margin-bottom: var(--space-4);
    opacity: 0.5;
}

.list-empty-title {
    font-size: var(--text-lg);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.list-empty-description {
    font-size: var(--text-sm);
    max-width: 320px;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
.toast-container {
    position: fixed;
    top: var(--space-4);
    left: var(--space-4);
    right: var(--space-4);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: min(400px, calc(100vw - 2 * var(--space-4)));
    margin-left: auto;
    pointer-events: none;
}

.toast-clear-all {
    pointer-events: all;
    display: flex;
    justify-content: flex-end;
}

.toast-clear-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--ink-900);
    color: var(--ink-200);
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.05em;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.toast-clear-btn:hover {
    opacity: 1;
}

.toast-container .toast {
    pointer-events: auto;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    animation: toast-in 0.3s ease-out;
}

.toast.success { border-left: 3px solid var(--status-success); }
.toast.error { border-left: 3px solid var(--status-danger); }
.toast.warning { border-left: 3px solid var(--status-warning); }
.toast.info { border-left: 3px solid var(--info); }

.toast-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.toast.success .toast-icon { color: var(--status-success); }
.toast.error .toast-icon { color: var(--status-danger); }
.toast.warning .toast-icon { color: var(--status-warning); }
.toast.info .toast-icon { color: var(--info); }

.toast-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.toast-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.toast-message {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.toast-dismiss {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 2px;
    flex-shrink: 0;
}

.toast-dismiss:hover {
    color: var(--text-primary);
}

@keyframes toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.toast-enter-active { animation: toast-in 0.3s ease-out; }
.toast-leave-active { animation: toast-in 0.2s ease-in reverse; }

/* ============================================
   CONFIRM DIALOG
   ============================================ */
.confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11000;
    animation: confirm-overlay-in 0.2s ease-out;
}

@keyframes confirm-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

.confirm-dialog {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 28px 32px 24px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: confirm-dialog-in 0.25s ease-out;
}

@keyframes confirm-dialog-in {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.confirm-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 24px;
}

.confirm-dialog.warning .confirm-icon {
    background: rgba(234, 179, 8, 0.12);
    color: var(--status-warning);
}

.confirm-dialog.danger .confirm-icon {
    background: rgba(239, 68, 68, 0.12);
    color: var(--status-danger);
}

.confirm-dialog.info .confirm-icon {
    background: rgba(59, 130, 246, 0.12);
    color: var(--info);
}

.confirm-title {
    margin: 0 0 8px;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
}

.confirm-message {
    margin: 0 0 24px;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
}

.confirm-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.confirm-actions .btn {
    min-width: 100px;
    padding: 8px 20px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.confirm-actions .btn-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.confirm-actions .btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.confirm-actions .btn-primary {
    background: var(--primary);
    border: 1px solid var(--primary);
    color: #fff;
}

.confirm-actions .btn-primary:hover {
    filter: brightness(1.1);
}

.confirm-actions .btn-danger {
    background: var(--status-danger);
    border: 1px solid var(--status-danger);
    color: #fff;
}

.confirm-actions .btn-danger:hover {
    filter: brightness(1.1);
}

/* ============================================
   TASK RUN PROGRESS PANEL
   ============================================ */
.task-run-progress {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    transition: all var(--duration-normal) var(--ease-out);
    box-shadow: var(--shadow-sm);
}

.task-run-progress.minimized {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    width: 360px;
    padding: var(--space-3);
    margin-bottom: 0;
    box-shadow: var(--shadow-xl);
    z-index: 1000;
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
}

.task-run-progress.minimized .task-run-progress-header {
    margin-bottom: 0;
    cursor: pointer;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.task-run-progress.minimized .task-run-progress-header:hover {
    background: var(--bg-hover);
    border-radius: var(--radius-md);
    margin: calc(var(--space-1) * -1);
    padding: var(--space-1);
}

.task-run-progress.minimized .task-run-steps {
    display: none;
}

.task-run-progress.minimized .task-run-info {
    flex: 1;
    min-width: 0;
}

.task-run-progress.minimized .task-run-name {
    font-size: var(--text-sm);
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.task-run-progress.minimized .task-run-actions .btn-secondary,
.task-run-progress.minimized .task-run-actions .btn-primary {
    display: none;
}

.task-run-mini-progress {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-left: auto;
    font-family: var(--font-mono);
}

.task-run-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.task-run-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.task-run-name {
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--text-primary);
}

.task-run-status-badge {
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
    text-transform: capitalize;
}

.task-run-status-badge.running,
.task-run-status-badge.queued {
    background: var(--status-info-subtle);
    color: var(--info);
}

.task-run-status-badge.completed {
    background: var(--status-success-subtle);
    color: var(--status-success);
}

.task-run-status-badge.failed {
    background: var(--status-danger-subtle);
    color: var(--status-danger);
}

.task-run-status-badge.partial {
    background: var(--status-warning-subtle);
    color: var(--status-warning);
}

.task-run-status-badge.cancelled {
    background: var(--bg-overlay);
    color: var(--text-secondary);
}

.task-run-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.task-run-actions .btn-icon {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-out);
}

.task-run-actions .btn-icon:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-strong);
}

.task-run-step-progress {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.progress-bar {
    height: 6px;
    background: var(--muted);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--info), var(--chart-4));
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

/* ── Container task progress ─────────────────────────────── */

/* Shimmer bar */
@keyframes container-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(200%); }
}

.container-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.container-progress-bar-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.container-shimmer-track {
    flex: 1;
    height: 5px;
    background: var(--muted);
    border-radius: var(--radius-full);
    overflow: hidden;
    position: relative;
}
.container-shimmer-track.done {
    background: var(--status-success);
    opacity: 0.6;
}
.container-shimmer-track.done .container-shimmer-fill {
    display: none;
}
.container-shimmer-fill {
    position: absolute;
    inset: 0;
    width: 50%;
    background: linear-gradient(90deg, transparent 0%, var(--info) 50%, transparent 100%);
    animation: container-shimmer 1.6s ease-in-out infinite;
}

.elapsed-time {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    min-width: 48px;
    text-align: right;
}

/* Timeline */
.container-timeline {
    position: relative;
    padding-left: 20px;
}
.container-timeline::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 1.5px;
    background: var(--border);
    border-radius: 1px;
}

.timeline-item {
    position: relative;
    padding: 4px 0 8px 0;
}
.timeline-item:last-child { padding-bottom: 0; }

.timeline-dot {
    position: absolute;
    left: -20px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    z-index: 1;
}
.timeline-dot.completed {
    background: var(--color-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 15%, transparent);
}
.timeline-dot.active {
    background: var(--info);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 25%, transparent);
    animation: dot-pulse 2s ease-in-out infinite;
}
@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 25%, transparent); }
    50%      { box-shadow: 0 0 0 6px color-mix(in srgb, var(--info) 12%, transparent); }
}

/* Completed panel: green left accent */
.task-run-progress:has(.task-run-status-badge.completed) {
    border-left: 3px solid var(--color-success);
}
.task-run-progress:has(.task-run-status-badge.failed) {
    border-left: 3px solid var(--color-danger);
}
.task-run-progress:has(.task-run-status-badge.partial) {
    border-left: 3px solid var(--color-warning);
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.timeline-stage {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-primary);
}
.timeline-item.completed .timeline-stage {
    color: var(--text-secondary);
    font-weight: 400;
}
.timeline-msg {
    font-size: var(--text-xs);
    color: var(--text-tertiary, var(--text-secondary));
    opacity: 0.8;
}

/* Container console */
.container-console {
    background: var(--bg-secondary, rgba(0,0,0,0.2));
    border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    margin-top: var(--space-1);
}
.container-console .console-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    user-select: none;
}
.container-console .console-header:hover {
    color: var(--text-primary);
}
.container-console .console-log-count {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    opacity: 0.7;
}
.container-console-lines {
    max-height: 200px;
    overflow-y: auto;
    padding: 0 12px 8px;
    font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    font-size: 12px;
    line-height: 1.6;
}
.container-log-entry {
    display: flex;
    gap: 10px;
    padding: 1px 0;
}
.container-log-entry .log-ts {
    color: var(--text-secondary);
    opacity: 0.5;
    white-space: nowrap;
    flex-shrink: 0;
}
.container-log-entry .log-msg {
    color: var(--text-secondary);
    word-break: break-word;
}
.container-log-entry.info .log-msg  { color: var(--text-primary); }
.container-log-entry.warn .log-msg  { color: var(--color-warning); }
.container-log-entry.error .log-msg { color: var(--color-danger); }
.container-console-empty {
    padding: 16px 0;
    text-align: center;
    color: var(--text-secondary);
    opacity: 0.6;
    font-size: var(--text-sm);
}
.container-console .console-actions {
    border-top: 1px solid var(--border);
    padding: 6px 12px;
}

.task-run-step-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.task-run-step-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    padding: var(--space-1) 0;
}

.task-run-step-item.completed { color: var(--status-success); }
.task-run-step-item.running { color: var(--info); }
.task-run-step-item.failed { color: var(--status-danger); }

.step-duration {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.task-run-error {
    margin-top: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--status-danger-subtle);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--status-danger);
}

.task-run-warnings {
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.task-run-warning {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    color: var(--status-warning);
}

.task-run-output {
    margin-top: var(--space-3);
    border-top: 1px solid var(--border-default);
    padding-top: var(--space-3);
}

.task-run-output-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.task-run-output-content {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    max-height: 400px;
    overflow-y: auto;
}

.task-run-output-content pre {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.5;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.output-status-badge {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}
.output-status-badge.success { background: var(--status-success-subtle); color: var(--status-success); }
.output-status-badge.failed { background: var(--status-danger-subtle); color: var(--status-danger); }

.output-summary {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: var(--space-3);
}

.output-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
    margin-top: var(--space-3);
}

.output-finding-item {
    padding: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}

.finding-severity {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-right: var(--space-2);
}
.finding-severity.critical { background: rgba(var(--red-rgb, 248,113,113), 0.2); color: var(--color-danger); }
.finding-severity.high { background: oklch(from var(--severity-high, #f59e0b) l c h / 0.2); color: var(--severity-high, #f59e0b); }
.finding-severity.medium { background: oklch(from var(--severity-medium, #eab308) l c h / 0.15); color: var(--severity-medium, #eab308); }
.finding-severity.low { background: rgba(var(--green-rgb, 74,222,128), 0.15); color: var(--color-success); }
.finding-severity.info { background: rgba(var(--blue-rgb, 96,165,250), 0.15); color: var(--accent); }

.finding-title { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
.finding-desc { font-size: var(--text-xs); color: var(--text-secondary); margin: var(--space-1) 0 0; }

.output-recommendations ul {
    margin: 0;
    padding-left: var(--space-4);
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: 1.8;
}

.output-more {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: var(--space-1) 0;
}

.output-raw-toggle {
    margin-top: var(--space-3);
    border-top: 1px solid var(--border-default);
    padding-top: var(--space-2);
}
.output-raw-toggle summary {
    font-size: var(--text-xs);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.output-raw-toggle pre {
    margin-top: var(--space-2);
    max-height: 300px;
    overflow-y: auto;
}

/* ============================================
   CONSOLE LOG VIEWER
   ============================================ */
.task-run-console {
    margin-top: var(--space-4);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.console-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--muted);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
    font-size: var(--text-sm);
}

.console-header:hover {
    background: var(--bg-overlay);
}

.console-header i:last-child {
    margin-left: auto;
    font-size: 1.2rem;
}

.console-logs-container {
    padding: var(--space-3);
    max-height: 500px;
    overflow-y: auto;
}

.console-step-section {
    margin-bottom: var(--space-3);
}

.console-step-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    cursor: pointer;
    user-select: none;
    font-weight: 500;
}

.console-step-header:hover {
    background: var(--bg-overlay);
}

.console-log-count {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.console-log-lines {
    margin-top: var(--space-2);
    padding: var(--space-2);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    max-height: 300px;
    overflow-y: auto;
}

.console-log-line {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.6;
    padding: 2px 0;
    display: flex;
    gap: var(--space-2);
}

.console-log-line.error {
    color: var(--color-danger);
}

.console-log-line.info {
    color: var(--text-primary);
}

.console-log-empty {
    padding: var(--space-6);
    text-align: center;
    color: var(--muted-foreground);
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-style: italic;
}

.console-log-empty i {
    font-size: 1.2rem;
}

.log-timestamp {
    color: var(--text-secondary);
    flex-shrink: 0;
}

.log-source {
    color: var(--text-secondary);
    flex-shrink: 0;
    min-width: 60px;
}

.log-line {
    flex: 1;
    word-break: break-all;
}

.console-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-default);
}

.console-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    user-select: none;
    font-size: var(--text-sm);
}

.console-checkbox input[type="checkbox"] {
    cursor: pointer;
}

/* ============================================
   TASK CARD ENHANCEMENTS
   ============================================ */
.task-card {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.task-card:hover {
    border-color: var(--border-active, var(--border-subtle));
    box-shadow: var(--shadow-md);
}

.task-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.task-trigger-badge {
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg-overlay);
    color: var(--text-secondary);
}

.task-icon-name {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-1);
}

.task-icon-name i {
    font-size: 20px;
    color: var(--text-secondary);
}

.task-description {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
    margin-bottom: var(--space-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.task-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.task-role-badge {
    font-size: var(--text-xs);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    background: var(--status-info-subtle);
    color: var(--info);
    font-weight: 500;
}

.task-execution-badge {
    font-size: var(--text-xs);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-execution-badge.container {
    background: var(--accent-subtle);
    color: var(--primary);
}

.task-connectors {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex-wrap: wrap;
    margin-bottom: var(--space-2);
}

.task-connector-label {
    font-size: var(--text-xs);
    color: var(--text-secondary);
}

.task-skills {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
}

.task-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
}

/* ============================================
   MODAL (Task Run)
   ============================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--shadow-overlay, rgba(0, 0, 0, 0.7));
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

.modal-backdrop.modal-backdrop--stacked {
    z-index: 10100;
}

.modal-panel {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl, var(--radius-lg));
    width: min(640px, 96vw);
    max-height: 82vh;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl, var(--shadow-lg));
}

.modal-panel--form {
    width: min(520px, 96vw);
}

.modal-panel--narrow {
    width: min(480px, 96vw);
}

.modal-panel--credentials {
    width: min(500px, 96vw);
}

.modal-title-icon--success {
    color: var(--success);
}

.modal-title-group {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.modal-title-icon {
    font-size: var(--text-xl);
    color: var(--signal-700);
    flex-shrink: 0;
}

.dark .modal-title-icon {
    color: var(--signal-500);
}

.modal-info-box {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-active);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-normal);
}

.modal-info-box strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.credentials-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-active);
}

.credentials-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) 0;
}

.credentials-row + .credentials-row {
    border-top: 1px solid var(--border-subtle);
}

.credentials-row__content {
    min-width: 0;
    flex: 1 1 auto;
}

.credentials-row__label {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin-bottom: var(--space-1);
}

.credentials-row__value {
    display: block;
    font-size: var(--text-sm);
    font-family: var(--font-mono);
    color: var(--text-primary);
    word-break: break-all;
}

/* Copy button — bordered icon affordance against the mono code value. */
.credentials-row__copy {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.credentials-row__copy:hover,
.credentials-row__copy:focus-visible {
    background: var(--accent);
    color: var(--text-primary);
    border-color: var(--border);
    outline: none;
}

.runner-setup-panel {
    margin-bottom: var(--space-5);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-active);
}

.runner-setup-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.runner-setup-panel__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--success);
}

.runner-setup-panel__close {
    position: static;
    flex-shrink: 0;
}

.modal-info-box p {
    margin: var(--space-1) 0 0;
}

.form-label-optional {
    font-weight: 400;
    color: var(--text-tertiary);
}

.modal-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.assignee-cell--field {
    width: 100%;
    justify-content: flex-start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    transition: border-color var(--duration-fast), background var(--duration-fast);
}

.assignee-cell--field:hover {
    border-color: var(--border-default);
    background: var(--bg-hover);
}

@media (max-width: 480px) {
    .modal-form-row {
        grid-template-columns: 1fr;
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-subtle);
}

.modal-header h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
}

.modal-close:hover {
    background: var(--bg-overlay);
    color: var(--text-primary);
}

.modal-body {
    padding: var(--space-5) var(--space-6);
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0;
    background: var(--bg-surface);
    -webkit-overflow-scrolling: touch;
}

.modal-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
    margin-bottom: var(--space-5);
    padding-bottom: 0;
    border-bottom: none;
}

.invite-tenant-context {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--border-subtle));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent) 7%, var(--bg-surface));
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.invite-tenant-context > i {
    flex: 0 0 auto;
    margin-top: 2px;
    color: var(--accent);
}

.invite-tenant-context strong {
    color: var(--text-primary);
    font-weight: 600;
}

.modal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) 0;
}

.modal-form .form-group {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.modal-form .form-label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.modal-form .required {
    color: var(--destructive);
}

/* Report Preview */
.report-preview-content { font-size: 14px; line-height: 1.6; color: var(--text-primary); }
.report-preview-content h2 { font-size: 20px; font-weight: 600; margin: 16px 0 8px; color: var(--text-primary); }
.report-preview-content h3 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; color: var(--text-primary); }
.report-preview-content h4 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; color: var(--text-secondary); }
.report-preview-content pre.code-block { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 12px; font-size: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: 8px 0; }
.report-preview-content ul { margin: 4px 0; padding-left: 20px; }
.report-preview-content li { margin: 2px 0; }
.report-preview-content hr { border: none; border-top: 1px solid var(--border-default); margin: 16px 0; }
.report-preview-content strong { color: var(--text-primary); }

.modal-form .form-input,
.modal-form input[type="text"],
.modal-form input[type="email"],
.modal-form input[type="url"],
.modal-form input[type="password"],
.modal-form input[type="number"],
.modal-form select,
.modal-form textarea {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: inherit;
    transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.modal-form .form-input:focus,
.modal-form input:focus,
.modal-form select:focus,
.modal-form textarea:focus {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

/* Placeholders + helper hints in modal forms should clearly read as
 * GUIDANCE, not pre-filled values. The previous --text-secondary was
 * close enough to body text that analysts confused the example string
 * ("Select a status…", "What changed? e.g. …") with a real selection.
 * Use a low-opacity tertiary tone with opacity:1 to defeat Firefox's
 * default 0.54 override (which compounds on already-translucent colors).
 *
 * For `` itself, so the legacy
   ".page-size-select select" descendant rules never matched and the
   control rendered as a bare native select. Style the element directly:
   a 32px pill that matches the circular pagination .btn-icon next to it.
   The .page-content twin outranks the legacy display:flex container rule. */
select.page-size-select,
.page-content .pagination-controls select.page-size-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    align-items: center;
    height: 32px;
    min-width: 0;
    padding: 0 var(--space-6) 0 var(--space-4);
    background-color: var(--bg-elevated);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23717b8a' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                background-color var(--duration-fast) var(--ease-out);
}
select.page-size-select:hover,
.page-content .pagination-controls select.page-size-select:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
select.page-size-select:focus-visible,
.page-content .pagination-controls select.page-size-select:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}
.dark select.page-size-select {
    background-color: var(--card);
}

/* Keyboard parity for the pagination arrows beside the select. */
.page-content .pagination-controls .btn-icon:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* ---- 2. Approvals status filter -------------------------------------------