/* Dashboard layout + component styles (shared by the demo and the portal). */
    /* Tab switching */
    .tab-content { display: none; }
    .tab-content.active { display: block; }
    /* KPI cards */
    .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
    .kpi-card { background: var(--color-surface); border: 0.5px solid var(--color-border); padding: 24px; text-align: center; }
    .kpi-card__value { font-family: var(--font-display); font-size: 2rem; font-weight: 300; color: var(--color-accent); line-height: 1.2; }
    .kpi-card__title { font-family: var(--font-body); font-size: 0.68rem; font-weight: 500; color: var(--color-text-dim); letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 8px; }
    .kpi-card__sem { font-size: 0.7rem; color: var(--color-text-dim); margin-top: 8px; }
    .kpi-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }
    .kpi-dot--red { background: var(--color-critical); }
    .kpi-dot--amber { background: var(--color-high); }
    .kpi-dot--green { background: var(--color-green); }
    .kpi-card__reason { font-size: 0.64rem; color: var(--color-text-muted); font-weight: 300; margin-top: 8px; line-height: 1.5; }
    /* Side nav overrides for dashboard use */
    .dash-rail { position: fixed; left: 0; top: var(--nav-height); bottom: 0; width: 224px; z-index: 30; background: color-mix(in srgb, var(--color-base) 95%, transparent); border-right: 0.5px solid var(--color-border); padding: 32px 0; display: flex; flex-direction: column; gap: 2px; backdrop-filter: blur(12px); }
    .dash-rail__item { display: flex; align-items: center; gap: 12px; padding: 16px 24px; cursor: pointer; transition: all var(--transition-base); border-left: 2px solid transparent; color: var(--color-text-dim); font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; background: none; border-top: none; border-right: none; border-bottom: none; width: 100%; text-align: left; }
    .dash-rail__item:hover { background: color-mix(in srgb, var(--color-accent) 5%, transparent); color: var(--color-accent); }
    .dash-rail__item.active { border-left-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-accent); }
    .dash-rail__num { font-size: 0.6rem; font-weight: 500; color: var(--color-text-muted); flex-shrink: 0; }
    .dash-rail__item.active .dash-rail__num { color: var(--color-accent); }
    /* Top bar */
    .top-bar { position: fixed; top: var(--nav-height); left: 224px; right: 0; z-index: 20; background: color-mix(in srgb, var(--color-base) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 0.5px solid var(--color-border); padding: 14px 32px; display: flex; justify-content: space-between; align-items: center; }
    .top-bar__meta { font-family: var(--font-body); font-size: 0.72rem; color: var(--color-text-muted); letter-spacing: 0.04em; }
    .top-bar__meta span { color: var(--color-text-dim); }
    /* Main content area */
    .dash-main { margin-left: 224px; padding: 24px 32px 80px; margin-top: calc(var(--nav-height) + 52px); isolation: isolate; }
    /* Section headings */
    .dash-heading { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--color-text); letter-spacing: 0.04em; margin-bottom: 4px; }
    .dash-subheading { font-family: var(--font-body); font-size: 0.78rem; font-weight: 400; color: var(--color-text-muted); letter-spacing: 0.04em; margin-bottom: 24px; }
    /* Severity badges */
    .sev-critical { background: color-mix(in srgb, var(--color-critical) 12%, transparent); color: var(--color-critical); border: 0.5px solid color-mix(in srgb, var(--color-critical) 20%, transparent); }
    .sev-high { background: color-mix(in srgb, var(--color-high) 10%, transparent); color: var(--color-high); border: 0.5px solid color-mix(in srgb, var(--color-high) 20%, transparent); }
    .sev-medium { background: color-mix(in srgb, var(--color-accent) 8%, transparent); color: var(--color-accent); border: 0.5px solid var(--color-border); }
    .sev-safe { background: color-mix(in srgb, var(--color-green) 10%, transparent); color: var(--color-green); border: 0.5px solid color-mix(in srgb, var(--color-green) 15%, transparent); }
    .sev-fp { background: color-mix(in srgb, var(--color-text-muted) 6%, transparent); color: var(--color-text-muted); border: 0.5px dashed var(--color-border-light); }

    @media (max-width: 768px) {
      .dash-rail { display: none; }
      .dash-main { margin-left: 0; }
      .top-bar { left: 0; }
      .kpi-row { grid-template-columns: repeat(2, 1fr); }
      .data-table { font-size: 0.75rem; }
    }
    .nav__link { color: var(--color-text); }
    .dash-main canvas { position: relative; z-index: 0; }
    @media print {
      .dash-rail, .nav, .top-bar { display: none !important; }
      .dash-main { margin-left: 0; margin-top: 0; }
      body { background: #fff; color: #000; }
    }