/* ============================================================================
   dashboard.css — Adviesraad dashboard-frame grammar (loaded AFTER app.css)
   ----------------------------------------------------------------------------
   Fully tokenised (zero raw brand hex). Redefines NOTHING that already works:
   the base .overview-section panel primitive is migrated in place in app.css.
   This sheet adds the dashboard-as-home layer:

     1. The dashboard frame (the <h1>-bearing dashboard-root container).
     2. The five INTENT PANELS as .overview-section variants, each a left-accent
        stripe over the shared panel primitive (no reinvention — every panel is
        an .overview-section heir). These classes are the reserved intent-panel
        grammar: inert until DashboardView markup applies them alongside
        .overview-section, then a pure-additive re-skin with zero divergence.
     3. Rekentool harmonisation for the Verken panel (shared card grammar so the
        promoted /rekentool surface does not read as a foreign panel).
     4. The reserved cross-app linkage tile (dq-ci-005) as an .overview-section
        variant — inert null-state today, token-styled so wiring it is additive.

   Panel accent stripes (§ styling spec):
     Situatie    → --brand-primary   (situation-at-a-glance)
     Nu handelen → --counterfactual  (insight-3846 counterfactual stake)
     Signalen    → --alert           (incoming change signals)
     Richtingen  → neutral           (--border-3)
     Verken      → neutral           (--border-3)
   ============================================================================ */

/* --- 1. Dashboard frame ---------------------------------------------------- */

/* The dashboard-root container (DashboardView outer <div data-testid="dashboard-root">).
   Reuses the existing .adviesraad-overview flow-column; this only sets the frame
   rhythm so the /dashboard route reads as a composed home rather than a tab body. */
[data-testid="dashboard-root"] {
    display: block;
}

[data-testid="dashboard-root"] .adviesraad-overview + .adviesraad-overview {
    margin-top: var(--space-4);
}

/* --- 2. Intent panels (reserved grammar — .overview-section variants) ------- */

.dashboard-panel-situatie,
.dashboard-panel-nuhandelen,
.dashboard-panel-signalen,
.dashboard-panel-richtingen,
.dashboard-panel-verken {
    /* Inherit the .overview-section primitive (padding/radius/border/bg via
       app.css tokens); these variants only set the intent accent + heading tint. */
    border-left-width: 3px;
    border-left-style: solid;
}

.dashboard-panel-situatie {
    border-left-color: var(--brand-primary);
}

.dashboard-panel-nuhandelen {
    border-left-color: var(--counterfactual);
}

.dashboard-panel-signalen {
    border-left-color: var(--alert);
}

.dashboard-panel-richtingen {
    border-left-color: var(--border-3);
}

.dashboard-panel-verken {
    border-left-color: var(--border-3);
}

/* Intent-panel heading stays on brand ink for continuity with .overview-section h4. */
.dashboard-panel-situatie h4,
.dashboard-panel-nuhandelen h4,
.dashboard-panel-signalen h4,
.dashboard-panel-richtingen h4,
.dashboard-panel-verken h4 {
    color: var(--brand-primary);
}

/* Counterfactual "Nu handelen" stake card (insight-3846), rendered under
   ShowActionStakes. Reserved grammar: a delta card echoing the rekentool
   baseline/challenger idiom, tinted with the counterfactual valence. */
.dashboard-action-stake {
    border: 1px solid var(--border-2);
    border-left: 3px solid var(--counterfactual);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
}

.dashboard-action-stake-head {
    font-weight: 600;
    color: var(--counterfactual);
    font-size: 0.9rem;
    margin: 0 0 var(--space-1);
}

/* --- 3. Rekentool harmonisation inside the Verken panel -------------------- */

/* When the promoted Rekentool renders inside Verken, align its self-contained
   card grammar to the shared panel tokens so it does not read as a foreign
   surface. /rekentool standalone is unaffected (own page owns its own spacing). */
.dashboard-panel-verken .rekentool-columns,
.dashboard-panel-verken .rekentool-delta-grid {
    gap: var(--space-3);
}

.dashboard-panel-verken .rekentool-column,
.dashboard-panel-verken .rekentool-delta-card {
    background: var(--surface);
    border-color: var(--border-2);
    border-radius: var(--radius-sm);
}

.dashboard-panel-verken .rekentool-delta-card {
    border-left: 3px solid var(--brand-primary);
}

/* --- 4. Reserved cross-app linkage tile (dq-ci-005) ------------------------ */

/* Inert today (null LinkedPersonal → invite state). Token-styled so the later
   wiring only swaps content, never adds a stylesheet. */
.dashboard-linkage-tile {
    border-left: 3px solid var(--border-3);
}

.dashboard-linkage-invite {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    color: var(--muted);
    font-size: 0.85rem;
}

.dashboard-linkage-invite[aria-disabled="true"],
.dashboard-linkage-invite .btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.dashboard-linkage-couplings {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: 0.85rem;
    color: var(--ink);
}

/* --- Accessibility: visible focus ring on dashboard interactive affordances - */

.dashboard-panel-nuhandelen .dashboard-action-stake:focus-visible,
.dashboard-linkage-invite .btn:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ============================================================================
   5. Intent-layout grammar (redesign) — ported from the signed-off prototype,
      recoloured onto the existing tokens. Zero raw hex: valence washes use
      color-mix(<token>, <surface>) so nothing new enters the palette. Light
      theme only (dark is out of redesign scope; a future sibling block adds it).
   ============================================================================ */

.dashboard-home {
    display: block;
}

/* --- profile header row --- */
.dashboard-pheader {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}

.dashboard-pname {
    font-size: 1.4rem;
    font-weight: 680;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.dashboard-pchip {
    font-size: 0.75rem;
    color: var(--ink-2);
    background: var(--surface);
    border: 1px solid var(--border-2);
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
}

.dashboard-pchip b {
    color: var(--ink);
    font-weight: 600;
}

/* --- board grid --- */
.dashboard-board {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-4);
    align-items: start;
}

@media (max-width: 900px) {
    .dashboard-board {
        grid-template-columns: 1fr;
    }
}

.dashboard-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* Flex gap owns inter-panel rhythm inside the board; drop any stray section margin. */
.dashboard-board .overview-section {
    margin: 0;
}

/* --- shared panel header row --- */
.dashboard-h {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--hairline);
}

.dashboard-h h4 {
    font-size: 0.8rem;
    font-weight: 680;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin: 0;
}

.dashboard-cnt {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--brand-primary);
    background: var(--brand-tint);
    border-radius: 20px;
    padding: 0.05rem 0.5rem;
}

.dashboard-h-act {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--brand-primary);
    font-weight: 600;
    background: none;
    border: none;
    padding: 0.2rem 0.35rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.dashboard-h-act:hover {
    background: var(--surface-muted);
}

/* --- hero: Situatie in een blik --- */
.dashboard-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-primary);
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: var(--space-2);
}

.dashboard-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    flex: none;
}

.dashboard-hero-body {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    max-width: 62ch;
}

.dashboard-hero-actions {
    margin-top: var(--space-2);
}

.dashboard-diff {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.dashboard-diff-item {
    font-size: 0.78rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface-subtle);
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    padding: 0.3rem 0.6rem;
    color: var(--ink-2);
}

.dashboard-diff-item .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex: none;
}

.dashboard-diff-item.up .dot { background: var(--ok); }
.dashboard-diff-item.warn .dot { background: var(--alert); }
.dashboard-diff-item.info .dot { background: var(--brand-primary); }

/* --- Nu handelen: counterfactual act-cards --- */
/* Compact "Nu handelen" table (design mockup): one bordered container, rows
   separated by hairlines, no inter-card gap or per-card rounding. */
.dashboard-acts {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    overflow: hidden;
}

.dashboard-act {
    border-left: 3px solid var(--border-3);
    background: var(--surface);
}

/* Hairline separator between rows (not above the first). */
.dashboard-act + .dashboard-act {
    border-top: 1px solid var(--hairline);
}

.dashboard-act.crit { border-left-color: var(--danger); }
.dashboard-act.warn { border-left-color: var(--alert); }
.dashboard-act.good { border-left-color: var(--ok); }

.dashboard-act-top {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    padding: 11px 14px;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

.dashboard-act-top:hover {
    background: var(--surface-subtle);
}

.dashboard-sev {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.5rem;
    border-radius: 20px;
    white-space: nowrap;
    flex: none;
}

.dashboard-sev.crit { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface)); }
.dashboard-sev.warn { color: var(--alert); background: color-mix(in srgb, var(--alert) 12%, var(--surface)); }
.dashboard-sev.good { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--surface)); }

/* One-liner row cells: title grows and truncates; the rest sit in a nowrap right cluster. */
.dashboard-act-title {
    flex: 1;
    min-width: 0;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-act-deadline {
    flex: none;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--ink-2);
    white-space: nowrap;
}

.dashboard-act-src {
    flex: none;
    font-size: 0.72rem;
    color: var(--muted-2);
    white-space: nowrap;
}

.dashboard-amt {
    flex: none;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--danger);
    white-space: nowrap;
}

.dashboard-amt.good { color: var(--ok); }

.dashboard-verdict-label {
    flex: none;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--counterfactual);
    background: color-mix(in srgb, var(--counterfactual) 12%, var(--surface));
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
    white-space: nowrap;
}

.dashboard-chev {
    color: var(--muted-2);
    font-size: 0.9rem;
    flex: none;
    transition: transform 0.18s;
}

.dashboard-act.open .dashboard-chev {
    transform: rotate(90deg);
}

/* counterfactual reveal */
.dashboard-cf-in {
    padding: 0 var(--space-3) var(--space-3);
    border-top: 1px dashed var(--border-2);
}

.dashboard-cf-lead {
    font-size: 0.7rem;
    color: var(--muted-2);
    margin: var(--space-3) 0 var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 650;
}

.dashboard-cf-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

@media (max-width: 560px) {
    .dashboard-cf-cols {
        grid-template-columns: 1fr;
    }
}

.dashboard-cf-branch {
    border: 1px solid var(--border-2);
    border-radius: var(--radius);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-subtle);
}

.dashboard-cf-branch.keep {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.dashboard-cf-branch.act {
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface));
}

.dashboard-cf-branch .lbl {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}

.dashboard-cf-branch.keep .lbl { color: var(--danger); }
.dashboard-cf-branch.act .lbl { color: var(--brand-primary); }

.dashboard-cf-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    padding: 0.15rem 0;
    gap: 0.6rem;
}

.dashboard-cf-row span:first-child { color: var(--ink-2); }
.dashboard-cf-row .v { font-weight: 600; color: var(--ink); }

.dashboard-cf-shift {
    margin: var(--space-2) 0 0;
    font-size: 0.75rem;
    color: var(--counterfactual);
    font-weight: 600;
}

.dashboard-cf-qual {
    margin: var(--space-3) 0 0;
    font-size: 0.82rem;
    color: var(--ink-2);
}

.dashboard-cf-foot {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
    flex-wrap: wrap;
}

/* --- Signalen feed --- */
.dashboard-feed {
    display: flex;
    flex-direction: column;
}

.dashboard-feed-item {
    display: flex;
    gap: 0.7rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--hairline);
    align-items: flex-start;
}

.dashboard-feed-item:last-child { border-bottom: none; }

.dashboard-fdot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 0.35rem;
    flex: none;
}

.dashboard-fdot.crit { background: var(--danger); }
.dashboard-fdot.warn { background: var(--alert); }
.dashboard-fdot.info { background: var(--brand-primary); }

/* Fill the row so the actions span full width — otherwise a short summary shrinks
   the body and the right-aligned Analyseer button stops short of the panel edge. */
.dashboard-feed-body {
    flex: 1;
    min-width: 0;
}

.dashboard-feed-body .ft {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ink);
}

.dashboard-feed-body .fm {
    font-size: 0.72rem;
    color: var(--muted-2);
    margin-top: 0.15rem;
}

/* Signalen feed actions: Details link on the LEFT, Analyseer as a small dark
   button pushed to the RIGHT. */
.dashboard-feed-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

/* Analyseer — small dark (navy) button, right-aligned, no arrow. */
.dashboard-feed-analyse {
    margin-left: auto;
    flex: none;
    font-family: var(--font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--surface);
    background: var(--brand-primary);
    border: none;
    border-radius: var(--radius-sm);
    padding: 5px 12px;
    cursor: pointer;
    white-space: nowrap;
}

.dashboard-feed-analyse:hover {
    background: color-mix(in srgb, var(--brand-primary) 86%, black);
}

/* Link-style buttons across the panels (Details, +N meer): the trailing arrow IS
   the affordance — keep them small and un-underlined for consistency. */
.dashboard-feed-actions .btn-link,
.dashboard-traj-foot .btn-link,
.dashboard-panel-foot .btn-link {
    font-size: 0.72rem;
    padding: 0;
    text-decoration: none;
}

.dashboard-feed-actions .btn-link:hover,
.dashboard-traj-foot .btn-link:hover,
.dashboard-panel-foot .btn-link:hover {
    text-decoration: none;
}

.dashboard-panel-foot {
    margin-top: var(--space-2);
}

/* --- Richtingen strip --- */
.dashboard-traj {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--hairline);
}

.dashboard-traj:last-child { border-bottom: none; }

.dashboard-traj .tt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

.dashboard-traj .tt h5 {
    font-size: 0.85rem;
    font-weight: 620;
    margin: 0;
    color: var(--ink);
}

.dashboard-tstate {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.1rem 0.45rem;
    border-radius: 20px;
    white-space: nowrap;
}

.dashboard-tstate.active { color: var(--brand-primary); background: var(--brand-tint); }
.dashboard-tstate.rest { color: var(--muted-2); background: var(--surface-muted); }

.dashboard-traj .tm {
    font-size: 0.75rem;
    color: var(--ink-3);
    margin-top: 0.4rem;
}

.dashboard-traj-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: 0.4rem;
}

/* --- Verken shortcuts --- */
.dashboard-explore {
    display: flex;
    flex-direction: column;
}

.dashboard-exp {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0;
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    color: var(--ink);
}

.dashboard-exp:last-child { border-bottom: none; }
.dashboard-exp:hover { background: var(--surface-subtle); }

.dashboard-exp .ei {
    width: 34px;
    height: 34px;
    border-radius: var(--radius);
    background: var(--brand-tint);
    color: var(--brand-primary);
    display: grid;
    place-items: center;
    font-size: 1rem;
    flex: none;
}

.dashboard-exp .et { font-size: 0.85rem; font-weight: 620; }
.dashboard-exp .em { font-size: 0.72rem; color: var(--muted-2); }
.dashboard-exp .arr { margin-left: auto; color: var(--muted-2); }

/* --- completeness strip (demoted Bedrijfsprofiel) --- */
.dashboard-settings-strip {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.dashboard-ring {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    flex: none;
    background: conic-gradient(var(--brand-primary) calc(var(--p) * 1%), var(--border-2) 0);
    display: grid;
    place-items: center;
}

.dashboard-ring-in {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    display: grid;
    place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink);
}

.dashboard-st {
    flex: 1;
    min-width: 180px;
}

.dashboard-st h4 {
    font-size: 0.9rem;
    font-weight: 640;
    margin: 0;
    color: var(--ink);
}

.dashboard-st p {
    margin: 0.15rem 0 0;
    font-size: 0.8rem;
}

.dashboard-completeness-detail {
    width: 100%;
}

.dashboard-completeness-detail > summary {
    display: inline-flex;
    cursor: pointer;
    list-style: none;
}

.dashboard-completeness-detail > summary::-webkit-details-marker {
    display: none;
}

.dashboard-field-list {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.dashboard-field-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    background: var(--surface-subtle);
}

.dashboard-field-list li .fv {
    font-weight: 600;
    color: var(--ink-2);
}

.dashboard-field-list li.empty .fv {
    color: var(--alert);
}

/* --- Nu handelen: module group filter (never cap urgent items — group + drill in) --- */
.dashboard-act-groups {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}
.dashboard-act-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    font: inherit;
    color: var(--ink);
}
.dashboard-act-group:hover { border-color: var(--counterfactual); }
.dashboard-act-group.on {
    border-color: var(--counterfactual);
    box-shadow: inset 0 0 0 1px var(--counterfactual);
}
.dashboard-act-group .grp-name { font-weight: 600; font-size: 0.85rem; }
.dashboard-act-group .grp-counts { display: flex; gap: var(--space-2); font-size: 0.72rem; }
.dashboard-act-group .grp-u { color: var(--danger); font-weight: 600; }
.dashboard-act-group .grp-a { color: var(--warn); }
.dashboard-act-group .grp-v { color: var(--muted); }

/* --- Qualitative act detail: a conceptually separate "toelichting" collapse (no invented euro) --- */
.dashboard-qual { border-top: 1px dashed var(--border-2); }
.dashboard-qual-in {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.dashboard-qual-lead {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    font-weight: 700;
}
.dashboard-qual-verdict { margin: 0; font-size: 0.85rem; }
.dashboard-qual-src { margin: 0; }
.dashboard-qual-foot { margin-top: var(--space-1); }

/* full description surfaced in either detail collapse (card title is clamped to 2 lines) */
.dashboard-detail-desc {
    margin: 0 0 var(--space-1);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ============================================================================
   6. ADVIESWIJZER redesign overlay (2026-08) — navy-monochrome re-skin of the
      dashboard-as-home surface. Appended last so it wins by source order; it
      overrides values only (no new markup contract beyond the KPI stat-row +
      the eyebrow label, both additive in DashboardView.razor). Character:
      white canvas, one sunken panel, thin lines, Sora on titles, mono on
      numbers, colour reserved for status.
   ============================================================================ */

/* --- board grid: wide content + sticky narrow rail (design §3.3, 3fr / 1fr) --- */
.dashboard-board {
    grid-template-columns: minmax(0, 3fr) minmax(300px, 1fr);
    gap: 20px;
}

@media (max-width: 1024px) {
    .dashboard-board {
        grid-template-columns: minmax(0, 2.4fr) minmax(280px, 1fr);
    }
}

@media (max-width: 900px) {
    .dashboard-board {
        grid-template-columns: 1fr;
    }
}

/* The right rail scrolls WITH the page — no sticky. A previous version pinned it
   with `position: sticky; top: 64px`, on the assumption that the sticky scroll
   container was the viewport (with the 64px global topbar). It is not: the
   dashboard's nearest scrolling ancestor is a nested overflow container (the
   tab/content scroller) whose own top already sits below the global chrome. The
   board sits only ~57px inside it — less than the 64px offset — so `top: 64px`
   clamped the rail DOWN ~7px even at scrollY=0, leaving the Signalering header
   visibly below the Situatie hero at rest (measured 7.7px; static → 0.9px). Both
   columns now share the same flow top and their headers stay level at any scroll. */

/* --- profile header: Sora name, pill chips --- */
.dashboard-pname {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.dashboard-pchip {
    border-color: var(--border);
    color: var(--ink-2);
    border-radius: var(--radius-pill);
}

/* --- clean panels: drop the per-intent left-accent stripes (design cards are
       plain white + 1px border; colour is reserved for status, not chrome) --- */
.dashboard-panel-situatie,
.dashboard-panel-nuhandelen,
.dashboard-panel-signalen,
.dashboard-panel-richtingen,
.dashboard-panel-verken,
.dashboard-linkage-tile {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: var(--border-2);
}

/* --- HERO: the one sunken summary panel (#F5F8FA, radius 18, no border) --- */
.dashboard-hero.dashboard-panel-situatie,
.dashboard-panel-situatie.dashboard-hero {
    background: var(--surface-subtle);
    border: none;
    border-radius: var(--radius-panel);
    /* Top padding matches the standard .overview-section (20px) so the hero header
       aligns to the pixel with the Signalering panel header alongside it. */
    padding: 20px 28px 26px;
}

/* Hero block header — "Situatie in één blik" as a proper panel title (replaces the
   former "· AI-samenvatting" eyebrow; ChainResult already carries the AI label). */
.dashboard-hero-h {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 14px;
    /* Header divider, matching the other panels' .dashboard-h hr. */
    padding-bottom: 14px;
    border-bottom: 1px solid var(--hairline);
}

.dashboard-hero-h h2 {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0;
}

/* Model provenance for the AI summary — pushed to the right of the hero title
   (model type + generation date). Mono, muted; a quiet audit trail, not a headline. */
.dashboard-hero-prov {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    white-space: nowrap;
    align-self: center;
}

/* Long-summary clamp + "Lees meer" fade (design: Advieswijzer Topbar §hero). */
.dashboard-hero-summary {
    position: relative;
}

.dashboard-hero-summary.is-clamped {
    max-height: 260px;
    overflow: hidden;
}

.dashboard-hero-fade {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 72px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2px;
    border: none;
    cursor: pointer;
    background: linear-gradient(to bottom, rgba(245, 248, 250, 0) 0%, var(--surface-subtle) 78%);
}

.dashboard-hero-more,
.dashboard-hero-lesbtn {
    font-family: var(--font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-primary);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: 20px;
    padding: 5px 13px;
    cursor: pointer;
}

.dashboard-hero-less {
    margin-top: 14px;
    text-align: center;
}

.dashboard-pulse {
    background: var(--brand-tint);
    box-shadow: 0 0 0 1px var(--brand-primary);
}

.dashboard-hero-body {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink-body);
    /* Full-width text block (design feedback 2026-08): the hero now spans the
       whole board, so the summary uses the full available width. */
    max-width: none;
}

/* --- section heads: small caps, secondary ink (design §2.1 sectiekop) --- */
.dashboard-h {
    border-bottom-color: var(--hairline);
}

.dashboard-h h4 {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.005em;
    text-transform: none;
    color: var(--ink);
}

/* Card-title heads that are NOT the caps section-heads keep Sora (Signalering,
   Richtingen list titles are h5 handled below). Count badge → accent-soft + mono. */
.dashboard-cnt {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    border-radius: var(--radius-pill);
    padding: 1px 7px;
}

.dashboard-h-act {
    font-family: var(--font-ui);
    color: var(--brand-primary);
}

/* --- Nu-handelen rows: the container (.dashboard-acts) owns the rounding now;
       each row is flat so they read as one table (design mockup). --- */
.dashboard-acts {
    border-color: var(--border-2);
}

/* Priority left-bar + chip recolour to the design's semantic ramp
   (hoog/risico #B5551F, middel #D3A147, laag neutral) — no red/green. */
.dashboard-act.crit { border-left-color: var(--alert); }
.dashboard-act.warn { border-left-color: var(--prio-mid); }
.dashboard-act.good { border-left-color: var(--border-3); }

.dashboard-sev {
    font-family: var(--font-ui);
    border-radius: 6px;
}

.dashboard-sev.crit { color: var(--alert); background: color-mix(in srgb, var(--alert) 12%, var(--surface)); }
.dashboard-sev.warn { color: var(--stale); background: color-mix(in srgb, var(--prio-mid) 18%, var(--surface)); }
.dashboard-sev.good { color: var(--ink-2); background: var(--surface-subtle); }

.dashboard-act-body h5 {
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--ink);
}

.dashboard-amt {
    font-family: var(--font-mono);
    color: var(--alert);
}
.dashboard-amt.good { color: var(--ink); }

/* --- Signalen / Richtingen list titles: keep Sora small-title feel --- */
.dashboard-feed-body .ft,
.dashboard-traj .tt h5 {
    font-family: var(--font-ui);
    color: var(--ink);
}

.dashboard-fdot.crit { background: var(--alert); }
.dashboard-fdot.warn { background: var(--prio-mid); }
.dashboard-fdot.info { background: var(--brand-primary); }

.dashboard-tstate {
    font-family: var(--font-ui);
    border-radius: var(--radius-pill);
}
.dashboard-tstate.active { color: var(--brand-primary); background: var(--brand-tint); }

/* dates / mono stamps inside the feed + trajectory rows */
.dashboard-traj .tm { color: var(--ink-3); }

/* --- Verken icon tiles: 34x34, radius 10, accent-soft, navy glyph --- */
.dashboard-exp .ei {
    border-radius: var(--radius);
    background: var(--brand-tint);
    color: var(--brand-primary);
}

.dashboard-exp .et { font-family: var(--font-ui); color: var(--ink); }

/* --- linkage invite: faint disabled title per design --- */
.dashboard-linkage-invite strong { color: var(--text-faint); }

/* --- completeness ring: navy fill over the track --- */
.dashboard-ring {
    background: conic-gradient(var(--brand-primary) calc(var(--p) * 1%), var(--track) 0);
}

.dashboard-ring-in { font-family: var(--font-mono); }

.dashboard-st h4 { font-family: var(--font-display); }

/* --- act-group filter tabs: neutral, navy-on-select --- */
.dashboard-act-group:hover { border-color: var(--brand-primary); }
.dashboard-act-group.on {
    border-color: var(--brand-primary);
    box-shadow: inset 0 0 0 1px var(--brand-primary);
}
.dashboard-act-group .grp-u { color: var(--alert); }
.dashboard-act-group .grp-a { color: var(--stale); }
.dashboard-act-group .grp-v { color: var(--muted); }