/* ============================================================
   Personal Dashboards — Portfolio Dashboard (personal-dashboards-plan.md Phase 3).
   Container wrapper is a body-level sibling to #gantt-container (mirrors
   .inbox-container / .dashboard-container-wrapper): it fills the content area to
   the right of the fixed-overlay sidebar. Dark-mode compliant (Ground rule 10:
   no large bright fills — surfaces stay muted, only small accents are saturated).
   ============================================================ */
.dashboards-container {
    display: none; /* shown by the 'dashboards' view switch (nav-view-switcher.js) */
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    margin-left: 0; /* default: no sidebar */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #f8f9fa;
    color: #1f2937;
}
.dashboards-container.sidebar-open {
    margin-left: var(--side-width-user, var(--side-width, 256px));
}
.dashboards-container *,
.dashboards-container *::before,
.dashboards-container *::after {
    box-sizing: border-box;
}

/* ── Page shell = ONE persistent surface (v2 Phase 4, Q3a design contract) ───
   Values copied from the Financial Reports page (tests/dashboards-q3-layout-mockup.html)
   under the .pdash-* namespace (NOT the financial module's .rpt-* names). Tokens drive
   both light + dark; no large bright fills (Ground rule 10). ───────────────── */
.pdash-page {
    --pdash-ink: #1f2937;
    --pdash-title: #2c3e50;
    --pdash-sub: #6b7280;
    --pdash-border: #e5e9f2;
    --pdash-panel: #f8f9fa;
    --pdash-surface: #ffffff;
    --pdash-blue: #2563eb;
    --pdash-green: #16a34a;
    --pdash-red: #dc2626;
    --pdash-amber: #b45309;
    --pdash-canvas-bg: #ffffff;
    --pdash-topbar-bg: #f8fafc;
    --pdash-panel-bg: #fafbfc;
    --pdash-active: #eff6ff;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: var(--pdash-ink);
    background: var(--pdash-panel);
}

/* ── Topbar (48px): title + origin tag + subtitle | actions ──────────────── */
.pdash-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 48px;
    flex-shrink: 0;
    padding: 0 16px;
    background: var(--pdash-topbar-bg);
    border-bottom: 1px solid var(--pdash-border);
}
.pdash-topbar-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pdash-topbar-title { font-weight: 600; font-size: 15px; color: var(--pdash-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdash-topbar-subtitle { color: var(--pdash-sub); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdash-topbar-origin-tag { font-size: 9px; padding: 2px 8px; border-radius: 10px; font-weight: 700; letter-spacing: 0.03em; flex-shrink: 0; text-transform: uppercase; }
.pdash-topbar-origin-tag.standard { background: #f0fdf4; color: #16a34a; }
.pdash-topbar-origin-tag.custom { background: #faf5ff; color: #7c3aed; }
.pdash-topbar-actions { display: flex; gap: 6px; flex-shrink: 0; }
.pdash-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; border: none; transition: all 0.15s; }
.pdash-btn i { font-size: 11px; }
.pdash-btn-primary { background: var(--pdash-blue); color: #fff; }
.pdash-btn-primary:hover { background: #1d4ed8; }
.pdash-btn-outline { background: var(--pdash-surface); border: 1px solid var(--pdash-border); color: var(--pdash-sub); }
.pdash-btn-outline:hover { border-color: var(--pdash-blue); color: var(--pdash-blue); }

/* ── Main split: canvas (flexible LEFT) + right panel (330px RIGHT) ──────── */
.pdash-main { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.pdash-canvas { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--pdash-canvas-bg); padding: 16px; }
.pdash-right-panel { width: 330px; min-width: 330px; flex-shrink: 0; border-left: 1px solid var(--pdash-border); display: flex; flex-direction: column; overflow: hidden; background: var(--pdash-panel-bg); }
.pdash-panel-content { flex: 1; overflow-y: auto; }

/* ── Accordions ──────────────────────────────────────────────────────────── */
.pdash-accordion { border-bottom: 1px solid var(--pdash-border); }
.pdash-accordion-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; cursor: pointer; font-size: 12px; font-weight: 700; color: var(--pdash-title); user-select: none; }
.pdash-accordion-header:hover { background: var(--pdash-panel); }
.pdash-acc-arrow { color: var(--pdash-sub); font-size: 10px; transition: transform 0.15s; display: inline-flex; }
.pdash-accordion-header.open .pdash-acc-arrow { transform: rotate(90deg); }
.pdash-accordion-body { display: none; border-top: 1px solid var(--pdash-border); padding: 6px 0 10px; }
.pdash-accordion-body.open { display: block; }
.pdash-acc-placeholder { padding: 10px 16px; font-size: 11px; color: var(--pdash-sub); }

/* ── Right-panel list rows (★ Portfolio pinned + My dashboards + Shared) ──── */
.pdash-section-title { padding: 6px 16px; font-size: 9px; font-weight: 700; color: var(--pdash-sub); text-transform: uppercase; letter-spacing: 0.06em; }
.pdash-list-divider { height: 1px; background: var(--pdash-border); margin: 6px 12px; }
.pdash-report-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin: 0 6px; border-radius: 6px; cursor: pointer; font-size: 12px; color: var(--pdash-ink); }
.pdash-report-item:hover { background: var(--pdash-panel); }
.pdash-report-item.active { background: var(--pdash-active); color: var(--pdash-blue); }
.pdash-report-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.pin-star { color: #f59e0b; font-size: 11px; flex-shrink: 0; display: inline-flex; }
.pdash-report-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pdash-report-type-badge { font-size: 9px; padding: 1px 6px; border-radius: 8px; font-weight: 700; flex-shrink: 0; background: var(--pdash-panel); color: var(--pdash-sub); border: 1px solid var(--pdash-border); letter-spacing: 0.03em; }
.pdash-report-item.active .pdash-report-type-badge { background: #dbe7ff; color: var(--pdash-blue); border-color: #bcd3ff; }
.pdash-row-actions { display: none; align-items: center; gap: 2px; flex-shrink: 0; }
.pdash-report-item:hover .pdash-row-actions { display: inline-flex; }
.pdash-row-btn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--pdash-sub); cursor: pointer; border-radius: 5px; font-size: 11px; }
.pdash-row-btn:hover { background: var(--pdash-surface); color: var(--pdash-blue); }
.pdash-row-btn-danger:hover { color: var(--pdash-red); }
.pdash-list-empty { padding: 6px 16px; font-size: 11px; color: var(--pdash-sub); font-style: italic; }
.pdash-new-report-btn { display: flex; align-items: center; gap: 6px; padding: 8px 10px; margin: 6px 6px 0; color: var(--pdash-blue); font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 6px; }
.pdash-new-report-btn:hover { background: var(--pdash-panel); }

/* ── Templates gallery (Q2a clone-on-use) — list-row look w/ a name + one-line scenario ─── */
.pdash-template-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin: 0 6px; border-radius: 6px; cursor: pointer; }
.pdash-template-item:hover { background: var(--pdash-panel); }
.pdash-template-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pdash-template-text .pdash-report-name { font-size: 12px; }
.pdash-template-desc { font-size: 10px; color: var(--pdash-sub); line-height: 1.35; white-space: normal; }
.tpl-use { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; padding: 3px 8px; border: 1px solid var(--pdash-border); border-radius: 4px; background: var(--pdash-surface); color: var(--pdash-blue); font-size: 10px; font-weight: 700; cursor: pointer; letter-spacing: 0.02em; }
.tpl-use i { font-size: 8px; }
.tpl-use:hover { background: var(--pdash-blue); color: #fff; border-color: var(--pdash-blue); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.pdash-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.pdash-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--pdash-title);
    letter-spacing: -0.01em;
}
.pdash-head .pdash-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--pdash-blue);
    background: #eff4ff;
    border: 1px solid #bcd3ff;
    border-radius: 999px;
    padding: 2px 10px;
}
.pdash-head .pdash-asof {
    font-size: 12px;
    color: var(--pdash-sub);
    margin-left: auto;
}

/* ── KPI strip ──────────────────────────────────────────────────────────── */
.pdash-kpi-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.pdash-kpi-card {
    background: var(--pdash-surface);
    border: 1px solid var(--pdash-border);
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.pdash-kpi-card .rpt-dash-kpi-value {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--pdash-title);
}
.pdash-kpi-card.pdash-pos .rpt-dash-kpi-value { color: var(--pdash-green); }
.pdash-kpi-card.pdash-neg .rpt-dash-kpi-value { color: var(--pdash-red); }
.pdash-kpi-card .rpt-dash-kpi-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pdash-sub);
    margin-top: 4px;
}
.pdash-kpi-card .rpt-dash-kpi-subtitle {
    font-size: 11px;
    color: var(--pdash-sub);
    margin-top: 2px;
}

/* ── Controls ───────────────────────────────────────────────────────────── */
.pdash-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.pdash-search {
    width: 240px;
    max-width: 100%;
    padding: 7px 12px;
    border: 1px solid var(--pdash-border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--pdash-surface);
    color: var(--pdash-ink);
}
.pdash-search:focus { outline: none; border-color: var(--pdash-blue); }
.pdash-status-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pdash-chip {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--pdash-border);
    background: var(--pdash-surface);
    color: var(--pdash-sub);
    cursor: pointer;
}
.pdash-chip.active {
    background: var(--pdash-blue);
    border-color: var(--pdash-blue);
    color: #fff;
}
.pdash-sort {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pdash-sub);
}
.pdash-sort select {
    padding: 6px 10px;
    border: 1px solid var(--pdash-border);
    border-radius: 8px;
    font-size: 13px;
    background: var(--pdash-surface);
    color: var(--pdash-ink);
}

/* ── Table ──────────────────────────────────────────────────────────────── */
.pdash-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: var(--pdash-surface);
    border: 1px solid var(--pdash-border);
    border-radius: 10px;
}
.pdash-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.pdash-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f5f9;
    color: var(--pdash-sub);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: 9px 12px;
    border-bottom: 1px solid var(--pdash-border);
    white-space: nowrap;
}
.pdash-table th.pdash-num, .pdash-table td.pdash-num { text-align: right; }
.pdash-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid #f1f2f6;
    vertical-align: middle;
    white-space: nowrap;
}
.pdash-table tbody tr:hover { background: #f8fafc; }
.pdash-proj-name { font-weight: 600; color: var(--pdash-title); }
.pdash-proj-code { font-size: 11px; color: var(--pdash-sub); }

/* Health chip */
.pdash-health {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.pdash-health.on-track { background: #dcfce7; color: #166534; }
.pdash-health.at-risk  { background: #fef3c7; color: #92400e; }
.pdash-health.delayed  { background: #fee2e2; color: #991b1b; }

/* Progress bar */
.pdash-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}
.pdash-progress-track {
    flex: 1;
    height: 7px;
    background: #e5e9f2;
    border-radius: 4px;
    overflow: hidden;
}
.pdash-progress-fill {
    height: 100%;
    background: var(--pdash-blue);
    border-radius: 4px;
}
.pdash-progress-pct { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--pdash-sub); min-width: 34px; text-align: right; }

.pdash-pos-val { color: var(--pdash-green); font-weight: 600; }
.pdash-neg-val { color: var(--pdash-red); font-weight: 600; }
.pdash-datadate.stale { color: var(--pdash-amber); font-weight: 600; }

.pdash-open-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 7px;
    border: 1px solid var(--pdash-blue);
    background: var(--pdash-blue);
    color: #fff;
    cursor: pointer;
}
.pdash-open-btn:hover { background: #1d4ed8; }

/* ── States: loading / error / empty ────────────────────────────────────── */
.pdash-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    min-height: 240px;
    color: var(--pdash-sub);
    font-size: 14px;
}
.pdash-state i { font-size: 28px; opacity: 0.5; }
.pdash-state .pdash-retry {
    font-size: 13px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid var(--pdash-border);
    background: var(--pdash-surface);
    color: var(--pdash-blue);
    cursor: pointer;
}
.pdash-empty-note { font-size: 12px; }

/* ── Nav row Font Awesome icon sizing (matches neighbor SVG item-icons) ──── */
.nav-item .item-icon.fa-solid,
.nav-item .item-icon.fa-regular {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* ============================================================
   PHASE 6 — List + Builder + View (custom dashboards).
   Reuses the Phase-3 tokens on .pdash-page (--pdash-*). Font Awesome only, no emoji.
   ============================================================ */

/* ── Shared "back" button (still used by the builder's config header) ──────── */
.pdash-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--pdash-border);
    background: var(--pdash-surface);
    color: var(--pdash-sub);
    cursor: pointer;
}
.pdash-back:hover { color: var(--pdash-blue); border-color: var(--pdash-blue); }

/* ── Org visibility badge (used by the read-only dashboard view header) ────── */
.pdash-badge-org {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #7c3aed;
    background: #f3ecff;
    border: 1px solid #ddd0fb;
    border-radius: 999px;
    padding: 1px 7px;
}

/* ── Icon buttons (reorder / remove / edit / delete) ──────────────────────── */
.pdash-icon-btn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid var(--pdash-border);
    background: var(--pdash-surface);
    color: var(--pdash-sub);
    cursor: pointer;
    font-size: 12px;
}
.pdash-icon-btn:hover { color: var(--pdash-blue); border-color: var(--pdash-blue); }
.pdash-tile-remove:hover { color: var(--pdash-red); border-color: var(--pdash-red); }

/* ── View + preview tile grids ────────────────────────────────────────────── */
.pdash-view-head { align-items: center; }
.pdash-view-head h1 { font-size: 20px; }
.pdash-view-meta { display: flex; gap: 14px; font-size: 12px; color: var(--pdash-sub); align-items: center; flex-wrap: wrap; }
.pdash-view-meta i { margin-right: 3px; }
.pdash-view-actions { margin-left: auto; display: flex; gap: 8px; }
.pdash-refresh, .pdash-edit-btn, .pdash-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--pdash-border);
    background: var(--pdash-surface);
    color: var(--pdash-sub);
    cursor: pointer;
}
.pdash-edit-btn, .pdash-share-btn { border-color: var(--pdash-blue); color: var(--pdash-blue); }
.pdash-refresh:hover, .pdash-edit-btn:hover, .pdash-share-btn:hover { border-color: var(--pdash-blue); color: var(--pdash-blue); }
.pdash-view-grid { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 14px; align-content: start; }
.pdash-tile {
    display: flex;
    flex-direction: column;
    min-height: 150px;
    border: 1px solid var(--pdash-border);
    border-radius: 10px;
    background: var(--pdash-surface);
    padding: 12px 14px;
    overflow: hidden;
}
.pdash-tile-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--pdash-title);
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pdash-tile-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; overflow: auto; }
.pdash-tile-body .rpt-dash-kpi-value { font-size: 30px; font-weight: 700; color: var(--pdash-title); }
.pdash-tile-body .rpt-dash-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pdash-sub); margin-top: 4px; }
.pdash-tile-msg { display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--pdash-sub); font-size: 12px; text-align: center; padding: 8px; }
.pdash-tile-msg i { font-size: 20px; opacity: 0.6; }
.pdash-tile-error i { color: var(--pdash-red); opacity: 0.9; }
.pdash-tile-soon i { color: var(--pdash-blue); opacity: 0.9; }
.pdash-tile-denied i { color: var(--pdash-amber); opacity: 0.9; }

/* ── Positioned view grid (Canvas Studio D4) — tiles span their saved grid rects ───────────── */
.pdash-view-grid.pdash-positioned { gap: 10px; }
.pdash-view-grid.pdash-positioned .pdash-tile { min-height: 0; overflow: hidden; }

/* ── Embedded saved-report tile (Phase 7) — a compact grid of the report's inner tiles ─────── */
.pdash-embed-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; align-content: start; align-self: stretch; }
.pdash-embed-tile { display: flex; flex-direction: column; min-height: 96px; border: 1px solid var(--pdash-border); border-radius: 8px; background: var(--pdash-panel); padding: 8px 10px; overflow: hidden; }
.pdash-embed-tile-title { font-size: 11px; font-weight: 700; color: var(--pdash-sub); margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdash-embed-tile-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; overflow: auto; }
.pdash-embed-tile-body svg { display: block; margin: 0 auto; max-width: 100%; }
.pdash-embed-tile-body .rpt-dash-kpi-value { font-size: 22px; font-weight: 700; color: var(--pdash-title); }
.pdash-embed-tile-body .rpt-dash-kpi-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pdash-sub); margin-top: 3px; }

/* ── Builder (two-pane: config + preview) ─────────────────────────────────── */
/* Full-surface takeover of the page host (v2 Phase 4 transitional; the page host no longer
   carries padding, so the builder owns its own frame). Phase 5 relocates this into the shell. */
.pdash-builder { flex: 1; min-height: 0; display: flex; gap: 16px; padding: 16px 20px; }
.pdash-builder-config {
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--pdash-border);
    border-radius: 10px;
    background: var(--pdash-surface);
    overflow: hidden;
}
.pdash-builder-config .pdash-head { padding: 14px 16px 0; margin-bottom: 10px; }
.pdash-builder-config .pdash-head h1 { font-size: 17px; }
.pdash-cfg-scroll { flex: 1; min-height: 0; overflow: auto; padding: 0 16px; }
.pdash-cfg-section { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--pdash-border); }
.pdash-cfg-section:last-child { border-bottom: none; }
.pdash-cfg-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--pdash-sub);
    margin: 10px 0 5px;
}
.pdash-cfg-label:first-child { margin-top: 0; }
.pdash-optional { font-weight: 400; text-transform: none; letter-spacing: 0; }
.pdash-name-input, .pdash-desc-input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--pdash-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--pdash-surface);
    color: var(--pdash-ink);
    resize: vertical;
}
.pdash-name-input:focus, .pdash-desc-input:focus, .pdash-field-select:focus, .pdash-tile-title-input:focus { outline: none; border-color: var(--pdash-blue); }
.pdash-meta-row { display: flex; gap: 16px; }
.pdash-meta-row > div { flex: 1; }
.pdash-chip-row { display: flex; gap: 6px; flex-wrap: wrap; }

/* Scope */
.pdash-scope-note { font-size: 12px; color: var(--pdash-sub); margin-top: 8px; }
.pdash-scope-count { font-size: 11px; font-weight: 600; color: var(--pdash-blue); margin: 8px 0 4px; }
.pdash-project-checklist { max-height: 190px; overflow: auto; border: 1px solid var(--pdash-border); border-radius: 8px; padding: 6px; }
.pdash-project-item { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-size: 13px; cursor: pointer; border-radius: 6px; }
.pdash-project-item:hover { background: var(--pdash-panel); }
.pdash-project-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Tiles */
.pdash-tiles-head { font-size: 13px; font-weight: 700; color: var(--pdash-title); display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pdash-tiles-count { font-size: 11px; font-weight: 700; color: var(--pdash-sub); background: var(--pdash-panel); border: 1px solid var(--pdash-border); border-radius: 999px; padding: 1px 8px; }
.pdash-tile-card { border: 1px solid var(--pdash-border); border-radius: 9px; padding: 10px; margin-bottom: 10px; background: var(--pdash-panel); }
.pdash-tile-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pdash-tile-order { display: flex; gap: 3px; }
.pdash-tile-num { font-size: 11px; font-weight: 700; color: var(--pdash-sub); margin-left: auto; }
.pdash-tile-title-input, .pdash-field-select {
    width: 100%;
    padding: 6px 9px;
    border: 1px solid var(--pdash-border);
    border-radius: 7px;
    font-size: 12px;
    font-family: inherit;
    background: var(--pdash-surface);
    color: var(--pdash-ink);
    margin-bottom: 6px;
}
.pdash-type-chips { margin-bottom: 8px; }
.pdash-type-chip { font-size: 11px; padding: 3px 8px; }
.pdash-gran-chips { margin-bottom: 6px; }
.pdash-gran-chip { font-size: 11px; padding: 3px 9px; }
.pdash-limit-field { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--pdash-sub); margin-bottom: 6px; }
.pdash-limit-field input { width: 64px; padding: 4px 8px; border: 1px solid var(--pdash-border); border-radius: 7px; font-size: 12px; background: var(--pdash-surface); color: var(--pdash-ink); }
.pdash-add-tile {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    padding: 8px;
    border-radius: 8px;
    border: 1px dashed var(--pdash-border);
    background: var(--pdash-surface);
    color: var(--pdash-blue);
    cursor: pointer;
}
.pdash-add-tile:hover { border-color: var(--pdash-blue); background: var(--pdash-panel); }

/* Builder footer */
.pdash-builder-foot { border-top: 1px solid var(--pdash-border); padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--pdash-surface); }
.pdash-validation { display: none; font-size: 12px; color: var(--pdash-red); align-items: center; gap: 6px; }
.pdash-validation.show { display: flex; }
.pdash-validation-more { color: var(--pdash-sub); }
.pdash-foot-btns { display: flex; gap: 8px; justify-content: flex-end; }
.pdash-cancel-btn {
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--pdash-border);
    background: var(--pdash-surface);
    color: var(--pdash-sub);
    cursor: pointer;
}
.pdash-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--pdash-blue);
    background: var(--pdash-blue);
    color: #fff;
    cursor: pointer;
}
.pdash-save-btn:hover { background: #1d4ed8; }
.pdash-save-btn:disabled { opacity: 0.7; cursor: default; }

/* Builder preview pane */
.pdash-builder-preview {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--pdash-border);
    border-radius: 10px;
    background: var(--pdash-surface);
    overflow: hidden;
}
.pdash-preview-head {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pdash-sub);
    padding: 12px 16px;
    border-bottom: 1px solid var(--pdash-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.pdash-preview-grid { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 14px; align-content: start; padding: 16px; }

/* ============================================================
   PHASE 5 — Builder relocated into the Configuration accordion + canvas live preview.
   Config mounts in the 330px right-panel accordion body (.pdash-cfg-host); the live preview mounts
   in the canvas (.pdash-builder-preview-canvas). Reuses the .pdash-* tokens; Font Awesome only.
   ============================================================ */

/* Config pane inside the Configuration accordion body */
.pdash-cfg-host { display: block; }
.pdash-cfg { display: flex; flex-direction: column; }
.pdash-cfg .pdash-cfg-section { padding: 10px 16px 12px; margin: 0; border-bottom: 1px solid var(--pdash-border); }
.pdash-cfg .pdash-cfg-section:last-of-type { border-bottom: none; }
.pdash-cfg-foot {
    position: sticky;
    bottom: 0;
    border-top: 1px solid var(--pdash-border);
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--pdash-panel-bg);
}
.pdash-cfg-foot .pdash-foot-btns { display: flex; gap: 8px; justify-content: flex-end; }

/* 3-col tile-type card grid (Q3a design contract: the Reports page's rpt-type-grid values) */
.pdash-type-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-bottom: 8px; }
.pdash-type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 7px 4px;
    border: 1px solid var(--pdash-border);
    border-radius: 4px;
    background: var(--pdash-surface);
    cursor: pointer;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--pdash-sub);
    font-family: inherit;
}
.pdash-type-card:hover { border-color: var(--pdash-blue); color: var(--pdash-title); }
.pdash-type-card.active { background: var(--pdash-active); border-color: var(--pdash-blue); color: var(--pdash-blue); }
.pdash-type-icon { display: block; font-size: 13px; margin-bottom: 1px; }

/* Section sub-heading inside the config (Source · Metric / Scope, etc.) */
.pdash-sidebar-heading {
    font-size: 10px;
    font-weight: 700;
    color: var(--pdash-sub);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

/* Canvas live-preview wrapper (builder mode): the grid fills the already-padded canvas */
.pdash-builder-preview-canvas { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pdash-builder-preview-canvas .pdash-preview-grid { padding: 0; }

/* Draft origin tag (builder mode) — amber "unsaved" accent */
.pdash-topbar-origin-tag.draft { background: #fef3c7; color: #b45309; }

/* ============================================================
   PHASE 4 — Canvas Studio (Direction A). A full-page create/edit surface mounted OVER the shell.
   Namespace .pdash-studio-*; tokens only (--pdash-*); mirrors the Direction A mockup tab. No large
   bright fills (Ground rule 10) — the grid lines + widget chrome use the border/surface tokens.
   ============================================================ */
.pdash-studio {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

/* ── Topbar: back | name | tag | (err) | Cancel · Save ─────────────────────── */
.pdash-studio-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 48px;
    flex-shrink: 0;
    padding: 0 14px;
    background: var(--pdash-topbar-bg);
    border-bottom: 1px solid var(--pdash-border);
}
.pdash-studio-name {
    width: 240px;
    max-width: 40%;
    padding: 6px 10px;
    border: 1px solid var(--pdash-border);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--pdash-surface);
    color: var(--pdash-ink);
}
.pdash-studio-name:focus { outline: none; border-color: var(--pdash-blue); }
.pdash-studio-err { font-size: 12px; color: var(--pdash-red); font-weight: 600; }
.pdash-studio-spacer { flex: 1; }
.pdash-studio-save:disabled { opacity: 0.5; cursor: default; background: var(--pdash-blue); }
.pdash-studio-save:disabled:hover { background: var(--pdash-blue); }

/* ── Main split (canvas LEFT; Phase 5 adds the inspector RIGHT) ─────────────── */
.pdash-studio-main { flex: 1; min-height: 0; display: flex; overflow: hidden; }
.pdash-studio-work { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; }

/* ── Toolbar: Add widget | Snap layout presets | widget counter ────────────── */
.pdash-studio-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 44px;
    flex-shrink: 0;
    padding: 0 14px;
    background: var(--pdash-panel-bg);
    border-bottom: 1px solid var(--pdash-border);
}
.pdash-studio-sep { width: 1px; height: 20px; background: var(--pdash-border); }
.pdash-studio-toolbar-label { font-size: 11px; color: var(--pdash-sub); }
.pdash-studio-presets { display: flex; gap: 6px; }
.pdash-studio-preset { padding: 5px 10px; }
.pdash-studio-count { margin-left: auto; font-size: 11.5px; color: var(--pdash-sub); font-weight: 600; }

/* ── Canvas + cell-lined backdrop ──────────────────────────────────────────── */
.pdash-studio-canvas { flex: 1; min-height: 0; overflow: auto; padding: 16px; background: var(--pdash-canvas-bg); }
.pdash-studio-sgrid {
    position: relative;
    min-height: 100%;
    background-image:
        linear-gradient(to right, var(--pdash-border) 1px, transparent 1px),
        linear-gradient(to bottom, var(--pdash-border) 1px, transparent 1px);
    background-position: 0 0;
}

/* ── Widget chrome (absolutely positioned from its grid rect) ──────────────── */
.pdash-studio-w {
    position: absolute;
    background: var(--pdash-surface);
    border: 1px solid var(--pdash-border);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    transition: left 0.12s, top 0.12s, width 0.12s, height 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.pdash-studio-w:hover { border-color: var(--pdash-blue); }
.pdash-studio-w.sel { border-color: var(--pdash-blue); box-shadow: 0 0 0 2px var(--pdash-active), 0 1px 2px rgba(15, 23, 42, 0.06); }
.pdash-studio-w.dragging { transition: none; z-index: 5; box-shadow: 0 10px 30px rgba(16, 24, 40, 0.16); border-color: var(--pdash-blue); }
.pdash-studio-wh {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--pdash-border);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pdash-title);
    cursor: grab;
}
.pdash-studio-w.dragging .pdash-studio-wh { cursor: grabbing; }
.pdash-studio-drag { color: var(--pdash-sub); display: inline-flex; }
.pdash-studio-wt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdash-studio-wctl { margin-left: auto; display: none; gap: 2px; }
.pdash-studio-w:hover .pdash-studio-wctl, .pdash-studio-w.sel .pdash-studio-wctl { display: flex; }
.pdash-studio-wctl button { border: none; background: transparent; color: var(--pdash-sub); padding: 2px 5px; border-radius: 5px; cursor: pointer; font-size: 11px; }
.pdash-studio-wctl button:hover { background: var(--pdash-panel); color: var(--pdash-red); }
/* flex-direction:column so the builder body matches the read-only .pdash-tile-body (decision A1):
   chart + legend (and KPI value + label) stack vertically instead of being laid out side-by-side. */
.pdash-studio-wb { flex: 1; min-height: 0; padding: 9px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.pdash-studio-rz {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 16px;
    height: 16px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: nwse-resize;
    color: var(--pdash-sub);
    font-size: 10px;
}
.pdash-studio-w:hover .pdash-studio-rz, .pdash-studio-w.sel .pdash-studio-rz { display: flex; }

/* ── Empty state ───────────────────────────────────────────────────────────── */
.pdash-studio-empty {
    min-height: 320px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--pdash-sub);
    text-align: center;
}
.pdash-studio-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    border: 2px dashed var(--pdash-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: var(--pdash-blue);
}
.pdash-studio-empty-text { max-width: 300px; font-size: 13px; line-height: 1.5; }

/* ── Add-widget popover (14-type gallery) ──────────────────────────────────── */
.pdash-studio-mask { position: absolute; inset: 0; z-index: 20; }
.pdash-studio-popover {
    position: absolute;
    z-index: 30;
    width: 320px;
    padding: 12px;
    background: var(--pdash-surface);
    border: 1px solid var(--pdash-border);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.18);
}
.pdash-studio-popover h4 { margin: 0 0 9px; font-size: 12px; color: var(--pdash-title); }
.pdash-studio-typegrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pdash-studio-typecard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 4px;
    border: 1px solid var(--pdash-border);
    border-radius: 8px;
    background: var(--pdash-surface);
    color: var(--pdash-sub);
    font-size: 10.5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.pdash-studio-typecard i { font-size: 14px; color: var(--pdash-blue); }
.pdash-studio-typecard:hover { border-color: var(--pdash-blue); background: var(--pdash-active); color: var(--pdash-title); }

/* ============================================================
   PHASE 5 — Contextual Inspector (right ~330px). Reuses the .pdash-cfg-* / .pdash-field-select /
   .pdash-type-* / .pdash-chip / .pdash-project-* field look; only the panel chrome is new here.
   Tokens only (--pdash-*); no large bright fills (Ground rule 10).
   ============================================================ */
.pdash-studio-inspector {
    width: 330px;
    flex: none;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--pdash-panel-bg);
    border-left: 1px solid var(--pdash-border);
}
.pdash-studio-insp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    flex-shrink: 0;
    padding: 0 14px;
    border-bottom: 1px solid var(--pdash-border);
    font-size: 13px;
    font-weight: 700;
    color: var(--pdash-title);
}
.pdash-studio-insp-head i { color: var(--pdash-sub); }
.pdash-studio-insp-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }

/* Empty-selection hint (DASHBOARD mode) — mockup :292 */
.pdash-studio-insp-empty {
    text-align: center;
    color: var(--pdash-sub);
    font-size: 12.5px;
    line-height: 1.5;
    padding: 18px 12px 20px;
    border-bottom: 1px solid var(--pdash-border);
    margin-bottom: 6px;
}
.pdash-studio-insp-empty-ic {
    font-size: 26px;
    color: var(--pdash-border);
    margin-bottom: 6px;
}

/* Section sub-heading inside the inspector (mirrors the mockup .sec-l) */
.pdash-studio-insp-sec {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--pdash-sub);
    margin: 16px 0 8px;
    padding-top: 12px;
    border-top: 1px solid var(--pdash-border);
}
.pdash-studio-insp-body > .pdash-studio-insp-sec:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.pdash-studio-fld { margin-bottom: 12px; }
.pdash-studio-fld .pdash-cfg-label { margin: 0 0 5px; }
.pdash-studio-fld .pdash-field-select,
.pdash-studio-fld .pdash-name-input,
.pdash-studio-fld .pdash-desc-input { margin-bottom: 0; }
/* ── Type dropdown (Widget mode) — a custom icon-on-the-LEFT select that replaces the type grid.
   Open/close mirrors the ＋Add-widget popover (mask + menu). Tokens only → dark-safe; no bright fills. ── */
.pdash-type-dd { position: relative; }
.pdash-type-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--pdash-border);
    border-radius: 8px;
    background: var(--pdash-surface);
    color: var(--pdash-ink);
    font-size: 13px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}
.pdash-type-trigger:hover,
.pdash-type-dd.open .pdash-type-trigger { border-color: var(--pdash-blue); }
.pdash-type-trigger-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--pdash-blue);
}
.pdash-type-trigger-lbl { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdash-type-caret { flex-shrink: 0; font-size: 11px; color: var(--pdash-sub); transition: transform 0.12s ease; }
.pdash-type-dd.open .pdash-type-caret { transform: rotate(180deg); }

/* Full-viewport transparent mask — an outside click closes the menu (same role as .pdash-studio-mask). */
.pdash-type-dd-mask { position: fixed; inset: 0; z-index: 1000; }

/* The menu — hidden until .open; absolute under the trigger, scrolls internally if it runs long. */
.pdash-type-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1002;
    max-height: 320px;
    overflow-y: auto;
    padding: 4px;
    background: var(--pdash-surface);
    border: 1px solid var(--pdash-border);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.18);
}
.pdash-type-dd.open .pdash-type-menu { display: block; }
.pdash-type-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--pdash-sub);
    font-size: 12.5px;
    font-family: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
.pdash-type-opt + .pdash-type-opt { margin-top: 1px; }
.pdash-type-opt-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    flex-shrink: 0;
    font-size: 13px;
    color: var(--pdash-blue);
}
.pdash-type-opt-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pdash-type-opt-chk { flex-shrink: 0; font-size: 11px; color: var(--pdash-blue); }
.pdash-type-opt:hover { background: var(--pdash-active); color: var(--pdash-title); }
.pdash-type-opt.active { background: var(--pdash-active); color: var(--pdash-blue); }

.pdash-studio-hint { font-size: 11.5px; line-height: 1.5; color: var(--pdash-sub); }
.pdash-studio-insp-err {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--pdash-red);
    margin: 4px 0 2px;
}
.pdash-studio-insp-actions { margin-top: 14px; }
.pdash-studio-del { color: var(--pdash-red); }
.pdash-studio-del:hover { border-color: var(--pdash-red); }
.pdash-studio-scope-list { margin-top: 8px; }

/* ============================================================
   PHASE 6 (Dashboard Data Layer / D2) — v2 authoring controls: field picker + filter builder.
   Namespace .pdash-fp-* (field picker) + .pdash-v2-* (filter / date-range builder). Reuses the
   inspector .pdash-field-select / .pdash-chip / .pdash-add-tile / .pdash-icon-btn look; tokens only
   (--pdash-*) so both light + dark cascade (Ground rule 10 — no large bright fills). Not a modal, so
   no !important needed (matches the rest of this inspector CSS).
   ============================================================ */

/* ── Field picker (table-tile "Columns" multi-select — searchable, role-grouped checkbox list) ── */
.pdash-field-picker {
    border: 1px solid var(--pdash-border);
    border-radius: 8px;
    background: var(--pdash-surface);
    overflow: hidden;
    margin-bottom: 6px;
}
.pdash-fp-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--pdash-border);
    background: var(--pdash-panel);
}
.pdash-fp-search { flex: 1; min-width: 0; margin-bottom: 0; }
.pdash-fp-count { flex-shrink: 0; font-size: 10px; font-weight: 700; color: var(--pdash-sub); white-space: nowrap; }
.pdash-fp-list { max-height: 190px; overflow: auto; padding: 4px; }
.pdash-fp-group-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pdash-sub);
    padding: 7px 6px 3px;
}
.pdash-fp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    font-size: 12px;
    color: var(--pdash-ink);
    cursor: pointer;
    border-radius: 6px;
}
.pdash-fp-item:hover { background: var(--pdash-panel); }
.pdash-fp-item input { flex-shrink: 0; }
.pdash-fp-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Filter builder (rows: field · op · value · delete) + date-range presets ────────────────── */
.pdash-v2-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.pdash-v2-filter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pdash-v2-filter-row .pdash-field-select { margin-bottom: 0; flex: 1 1 auto; min-width: 0; }
.pdash-v2-filter-op { flex: 0 0 auto; max-width: 120px; }
.pdash-v2-filter-del { flex-shrink: 0; }
.pdash-v2-filter-range { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; }
.pdash-v2-filter-range .pdash-field-select { margin-bottom: 0; flex: 1; min-width: 0; }
.pdash-v2-and { font-size: 11px; color: var(--pdash-sub); flex-shrink: 0; }
.pdash-v2-add-filter { margin-bottom: 10px; }
.pdash-v2-daterange { margin-top: 2px; }
.pdash-v2-daterange-custom { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pdash-v2-daterange-custom .pdash-field-select { margin-bottom: 0; flex: 1; min-width: 0; }

/* ── Inline checkbox label (v2 + v1 "Running total" toggle) ─────────────────────────────────── */
.pdash-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--pdash-sub); cursor: pointer; }
.pdash-check input { flex-shrink: 0; }

/* ============================================================
   DARK MODE — muted surfaces, small saturated accents only (Ground rule 10).
   ============================================================ */
[data-theme-mode="dark"] .dashboards-container {
    background: #0f172a;
    color: #e2e8f0;
}
[data-theme-mode="dark"] .pdash-page {
    --pdash-ink: #e2e8f0;
    --pdash-title: #f1f5f9;
    --pdash-sub: #94a3b8;
    --pdash-border: #334155;
    --pdash-panel: #0f172a;
    --pdash-surface: #1e293b;
    --pdash-canvas-bg: #0f172a;
    --pdash-topbar-bg: #111c34;
    --pdash-panel-bg: #111c34;
    --pdash-active: #1e293b;
    background: #0f172a;
}
/* Shell dark overrides — origin tags + active badge (small saturated accents only). */
[data-theme-mode="dark"] .pdash-topbar-origin-tag.standard { background: #12341f; color: #86efac; }
[data-theme-mode="dark"] .pdash-topbar-origin-tag.custom { background: #2a2145; color: #c4b5fd; }
[data-theme-mode="dark"] .pdash-topbar-origin-tag.draft { background: #3a2c0c; color: #fcd34d; }
[data-theme-mode="dark"] .pdash-report-item.active .pdash-report-type-badge { background: #1f3457; color: #93c5fd; border-color: #2b4066; }
[data-theme-mode="dark"] .pdash-btn-primary { background: #2563eb; }
[data-theme-mode="dark"] .pdash-btn-outline { background: #1e293b; }
[data-theme-mode="dark"] .pdash-head .pdash-count {
    background: #1e293b;
    border-color: #334155;
    color: #93c5fd;
}
[data-theme-mode="dark"] .pdash-kpi-card { box-shadow: none; }
[data-theme-mode="dark"] .pdash-table thead th { background: #1e293b; }
[data-theme-mode="dark"] .pdash-table tbody td { border-bottom-color: #24324a; }
[data-theme-mode="dark"] .pdash-table tbody tr:hover { background: #24324a; }
[data-theme-mode="dark"] .pdash-progress-track { background: #334155; }
[data-theme-mode="dark"] .pdash-health.on-track { background: #14361f; color: #86efac; }
[data-theme-mode="dark"] .pdash-health.at-risk  { background: #3a2c0c; color: #fcd34d; }
[data-theme-mode="dark"] .pdash-health.delayed  { background: #3a1414; color: #fca5a5; }
[data-theme-mode="dark"] .pdash-chip.active,
[data-theme-mode="dark"] .pdash-open-btn { background: #2563eb; border-color: #2563eb; }

/* View / builder dark overrides — only the hardcoded light accents (token-based rules cascade). */
[data-theme-mode="dark"] .pdash-badge-org { color: #c4b5fd; background: #2a2145; border-color: #43356b; }
[data-theme-mode="dark"] .pdash-save-btn { background: #2563eb; border-color: #2563eb; }
[data-theme-mode="dark"] .pdash-tile-body .rpt-dash-kpi-value { color: #f1f5f9; }

/* Phase-7 dark overrides — embed tile surfaces + share button accent. */
[data-theme-mode="dark"] .pdash-embed-tile-body .rpt-dash-kpi-value { color: #f1f5f9; }