/* ================================================================
   Privacy Platform — Compliance Dashboard Design System
   Extracted from approved mockups (Part 1, 2, 3)
   All selectors scoped under .pp-dashboard
   ================================================================

   AUDIT STATUS (Wave 1 — 2026-05-05):
   - All color references verified to use project Context tokens or local aliases
     (--cyan, --yellow, --success, --danger, --neutral-*, --surface, --text-*)
     that are themselves mapped to the Context contract inside .pp-dashboard scope.
   - .heat-1 through .heat-4 use --dp-status-* tokens directly (F13 ✓).
   - .pp-risk-legend__swatch color is inherited from .heat-* parent class (✓).
   - .table-striped zebra is suppressed via --dp-surface-table-zebra: transparent
     (see variables.css token additions, Wave 1).
   - No hardcoded hex/rgb colors in this file as of Wave 1 audit.
   - Unused selectors have NOT been removed yet — pending component extraction
     in Wave 2-6 when inline markup migrates to Apple components.

   LOCAL ALIAS TOKENS (defined inside .pp-dashboard {}):
     --cyan            → var(--dp-interactive-primary)
     --cyan-dark       → var(--dp-interactive-primary)
     --yellow          → var(--color-text-warning)
     --success         → var(--color-text-success-active)
     --danger          → var(--color-text-danger-active)
     --surface         → var(--dp-surface-primary)
     --text-primary    → var(--dp-text-primary)
     --text-secondary  → var(--dp-text-secondary)
     --neutral-*       → mapped to --dp-surface / --dp-border / --dp-text tokens
   ================================================================ */


/* ================================================================
   Variables & Base
   ================================================================ */

.pp-dashboard {
  /* Primary/brand colors — resolved via active palette (Option B default: #007A82 primary, #01CDD3 light) */
  --cyan: var(--opt-b-primary-light, var(--dp-interactive-primary));
  --cyan-dark: var(--opt-b-primary, var(--dp-interactive-primary));
  --cyan-light: var(--dp-interactive-primary-hover);
  --cyan-subtle: var(--dp-surface-selected);
  --yellow: var(--color-text-warning, var(--opt-b-accent, var(--dp-status-warning)));
  --yellow-bg: var(--color-bg-surface-warning-secondary, var(--dp-status-warning-bg));
  --success: var(--color-text-success-active, var(--dp-status-success));
  --danger: var(--color-text-danger-active, var(--dp-status-danger));
  --high: var(--dp-risk-high);
  --neutral-50: var(--dp-surface-page);
  --neutral-100: var(--dp-surface-hover);
  --neutral-200: var(--dp-border-default);
  --neutral-300: var(--dp-border-strong);
  --neutral-400: var(--dp-text-tertiary);
  --neutral-500: var(--dp-text-secondary);
  --neutral-600: var(--dp-text-secondary);
  --neutral-700: var(--dp-text-primary);
  --neutral-800: var(--dp-text-primary);
  --neutral-900: var(--dp-text-primary);
  --surface: var(--dp-surface-primary);
  --text-primary: var(--dp-text-primary);
  --text-secondary: var(--dp-text-secondary);
  --text-muted: var(--dp-text-muted); /* was --dp-text-tertiary (2.8:1 FAIL) — --dp-text-muted is 4.86:1 on white */
  --radius: var(--radius-md, 0.625rem);
  --shadow: var(--shadow-l1);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
}

.pp-dashboard canvas {
  display: block;
}


/* ================================================================
   KPI Cards
   ================================================================ */

/* --- KPI Grid --- */
/* Apple fluid grid: auto-reflow 4→3→2→1 columns based on content width */
.pp-dashboard .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4, 16px);
}

/* --- KPI Card (Apple: shadow-only elevation, no colored border-top) --- */
.pp-dashboard .kpi-card {
  background: var(--surface);
  border: none;
  border-top: none;
  border-radius: var(--card-radius, 14px);
  padding: var(--card-padding-compact, 20px);
  box-shadow: var(--card-shadow, var(--shadow-l1));
  position: relative;
  cursor: pointer;
  transition: box-shadow var(--transition-micro, 150ms ease);
  min-height: 130px;
  display: flex;
  flex-direction: column;
}

.pp-dashboard .kpi-card:hover {
  transform: none;
  box-shadow: var(--card-shadow-hover, var(--shadow-l1-hover));
}

/* Apple Design: KPI semantic color is now communicated via .kpi-icon tinted circles
   (defined in apple-design-tokens.css), not via border-top/border-left.
   These selectors are kept as no-ops for backward compatibility with existing markup. */
.pp-dashboard .kpi-card.border-cyan,
.pp-dashboard .kpi-card.border-yellow,
.pp-dashboard .kpi-card.border-success,
.pp-dashboard .kpi-card.border-danger,
.pp-dashboard .kpi-card.danger,
.pp-dashboard .kpi-card.warning,
.pp-dashboard .kpi-card.border-red,
.pp-dashboard .kpi-card.border-green,
.pp-dashboard .kpi-card.border-left-cyan,
.pp-dashboard .kpi-card.border-left-red,
.pp-dashboard .kpi-card.border-left-green,
.pp-dashboard .kpi-card.border-left-yellow {
  border-top: none;
  border-left: none;
}

/* --- KPI Header (Part 1 layout) --- */
.pp-dashboard .kpi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* --- KPI Top (Part 2/3 layout) --- */
.pp-dashboard .kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

/* --- KPI Label --- */
.pp-dashboard .kpi-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

/* Part 3 variant (slightly different sizing) */
.pp-dashboard .kpi-card .kpi-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--neutral-500); /* Use readable secondary instead of decorative tertiary */
  margin-bottom: 4px;
}

/* --- KPI Icon --- */
.pp-dashboard .kpi-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}

.pp-dashboard .kpi-icon.cyan    { background: var(--dp-interactive-primary); color: var(--dp-text-inverse); }
.pp-dashboard .kpi-icon.yellow  { background: var(--dp-status-warning); color: var(--dp-text-on-warning); }
.pp-dashboard .kpi-icon.success { background: var(--dp-status-success); color: var(--dp-text-inverse); }
.pp-dashboard .kpi-icon.danger  { background: var(--dp-status-danger); color: var(--dp-text-inverse); }
.pp-dashboard .kpi-icon.red     { background: var(--dp-status-danger); color: var(--dp-text-inverse); }
.pp-dashboard .kpi-icon.green   { background: var(--dp-status-success); color: var(--dp-text-inverse); }

/* --- KPI Value --- */
.pp-dashboard .kpi-value {
  font-size: 1.875rem; /* 30px */
  font-weight: 700;
  color: var(--neutral-800);
  line-height: 1.2;
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}

.pp-dashboard .kpi-value.cyan   { color: var(--cyan-dark); }
.pp-dashboard .kpi-value.red    { color: var(--danger); }
.pp-dashboard .kpi-value.green  { color: var(--success); }
.pp-dashboard .kpi-value.yellow { color: var(--dp-status-warning); }

/* --- KPI Sub --- */
.pp-dashboard .kpi-sub {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* --- KPI Trend --- */
.pp-dashboard .kpi-trend {
  font-size: 11px;
  font-weight: 600;
  margin-top: 4px;
}

.pp-dashboard .kpi-trend.up      { color: var(--success); }
.pp-dashboard .kpi-trend.down    { color: var(--danger); }
.pp-dashboard .kpi-trend.warning { color: var(--yellow); }

/* --- KPI Badge (absolute-positioned corner label) --- */
.pp-dashboard .kpi-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pp-dashboard .kpi-badge.critical { background: var(--dp-status-danger-bg); color: var(--dp-status-danger); }

/* --- KPI Footer (Part 3) --- */
.pp-dashboard .kpi-footer {
  font-size: 10.5px;
  color: var(--cyan);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--neutral-100);
}

.pp-dashboard .kpi-footer.danger-link { color: var(--danger); }

/* --- KPI Card Filled Danger (Part 3 red filled variant) --- */
.pp-dashboard .kpi-card-filled-danger {
  background: var(--danger);
  border-top-color: var(--dp-status-danger);
}

.pp-dashboard .kpi-card-filled-danger .kpi-label,
.pp-dashboard .kpi-card-filled-danger .kpi-sub,
.pp-dashboard .kpi-card-filled-danger .kpi-value {
  color: var(--dp-surface-primary);
}

.pp-dashboard .kpi-card-filled-danger .kpi-icon {
  background: rgba(255, 255, 255, 0.92);
  color: var(--dp-status-danger);
}

.pp-dashboard .kpi-card-filled-danger .kpi-footer {
  border-top-color: rgba(255, 255, 255, 0.2);
  color: var(--dp-status-danger-bg);
}


/* ================================================================
   Cards
   ================================================================ */

.pp-dashboard .card {
  background: var(--surface);
  border: none;
  border-radius: var(--card-radius, 14px);
  box-shadow: var(--card-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Cards inside a .row stretch to equal height */
.pp-dashboard .row > .card { flex: 1; }

/* Card body fills remaining space */
.pp-dashboard .card > .card-body {
  flex: 1;
}

/* Chart containers get fixed height to prevent Chart.js resize loop */
.pp-dashboard .card-body .chart-canvas-wrap {
  position: relative;
  height: 260px;
}

.pp-dashboard .card-body canvas {
  max-height: 300px;
}

.pp-dashboard .card-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--dp-border-subtle);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--dp-surface-secondary);
}

.pp-dashboard .card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--dp-text-primary);
  letter-spacing: -0.005em;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pp-dashboard .card-title i { color: var(--dp-text-muted); opacity: 0.85; }

.pp-dashboard .card-subtitle {
  font-size: 11px;
  color: var(--text-secondary);
}

.pp-dashboard .card-body {
  padding: 16px;
}

.pp-dashboard .card-body-flush {
  padding: 0;
}


/* ================================================================
   Grid Layout
   ================================================================ */

.pp-dashboard .row    { display: flex; gap: 14px; align-items: stretch; }
.pp-dashboard .col-4  { flex: 0 0 calc(33.33% - 10px); min-width: 0; }
.pp-dashboard .col-5  { flex: 0 0 calc(41.67% - 7px); min-width: 0; }
.pp-dashboard .col-6  { flex: 0 0 calc(50% - 7px); min-width: 0; }
.pp-dashboard .col-7  { flex: 0 0 calc(58.33% - 7px); min-width: 0; }
.pp-dashboard .col-8  { flex: 0 0 calc(66.67% - 5px); min-width: 0; }
.pp-dashboard .col-12 { flex: 1; min-width: 0; }
.pp-dashboard .col-full { flex: 1; min-width: 0; }

/* Cards and containers inside columns stretch to full height */
.pp-dashboard [class^="col-"] > .card { height: 100%; }

/* charts-split (Part 3 — 5fr/7fr grid) */
.pp-dashboard .charts-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 12px;
  margin-bottom: 16px;
}

.pp-dashboard .chart-canvas-wrap { position: relative; }

.pp-dashboard .chart-stat-total {
  text-align: center;
  margin-top: 8px;
  font-size: 11px;
  color: var(--neutral-500);
}

.pp-dashboard .chart-stat-total strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--neutral-800);
  display: block;
  line-height: 1.2;
}

.pp-dashboard .section-mb { margin-bottom: 16px; }


/* ================================================================
   Tables
   Apple pattern: no zebra stripes. Uses --dp-surface-table-zebra token (transparent).
   ================================================================ */

/* F13 Wave 1: Suppress Bootstrap .table-striped zebra inside pp-dashboard.
   --dp-surface-table-zebra is defined as transparent in variables.css. */
.pp-dashboard .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: var(--dp-surface-table-zebra);
  --bs-table-accent-bg: var(--dp-surface-table-zebra);
}

.pp-dashboard table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.pp-dashboard thead th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--dp-border-subtle);
}

.pp-dashboard tbody td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(226, 232, 238, 0.6);
  vertical-align: middle;
}

.pp-dashboard tbody tr:last-child td { border-bottom: none; }
.pp-dashboard tbody tr:hover         { background: rgba(248, 250, 251, 0.8); }

.pp-dashboard .tr-overdue { background: rgba(239, 68, 68, 0.04) !important; }
.pp-dashboard .tr-warning  { background: rgba(255, 202, 0, 0.04) !important; }

/* Part 2 / Part 3 named table variants */
.pp-dashboard .data-table { width: 100%; border-collapse: collapse; }

.pp-dashboard .data-table th {
  padding: 9px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--neutral-500);
  background: var(--neutral-50);
  border-bottom: 1px solid var(--dp-border-subtle);
}

.pp-dashboard .data-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--neutral-100);
  color: var(--neutral-800);
  vertical-align: middle;
  font-size: 12.5px;
}

.pp-dashboard .data-table tr:last-child td { border-bottom: none; }
.pp-dashboard .data-table tr:hover         { background: var(--neutral-50); }
.pp-dashboard .data-table tr.row-danger    { background: var(--dp-status-danger-bg); }
.pp-dashboard .data-table tr.row-warn      { background: var(--dp-status-warning-bg); }
.pp-dashboard .data-table tr.row-overdue   { background: rgba(239, 68, 68, 0.04); }
.pp-dashboard .data-table tr.row-warning   { background: rgba(255, 202, 0, 0.04); }

.pp-dashboard .text-danger  { color: var(--danger); font-weight: 600; }
.pp-dashboard .text-success { color: var(--success); font-weight: 600; }
.pp-dashboard .text-warn    { color: var(--dp-status-warning); font-weight: 600; }
.pp-dashboard .text-cyan    { color: var(--cyan-dark); font-weight: 600; }
.pp-dashboard .text-muted   { color: var(--dp-text-muted); }

/* Summary table (Part 3) */
.pp-dashboard .summary-table { width: 100%; border-collapse: collapse; margin-top: 12px; }

.pp-dashboard .summary-table th {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neutral-500);
  background: var(--neutral-50);
  padding: 7px 12px;
  text-align: left;
  border-bottom: 1px solid var(--dp-border-subtle);
}

.pp-dashboard .summary-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--neutral-100);
  font-size: 12px;
  vertical-align: middle;
}

.pp-dashboard .summary-table tr:last-child td { border-bottom: none; }
.pp-dashboard .summary-table tr:hover         { background: var(--neutral-50); }

.pp-dashboard .avg-risk-badge        { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 4px; }
.pp-dashboard .avg-risk-high         { background: var(--dp-status-danger-bg); color: var(--dp-status-danger); }
.pp-dashboard .avg-risk-medium       { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }

.pp-dashboard .overdue-badge {
  background: var(--danger);
  color: var(--dp-surface-primary);
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
}


/* ================================================================
   Alert Banners
   ================================================================ */

.pp-dashboard .alert-banner {
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 4px solid transparent;
  border: 1px solid;
}

.pp-dashboard .alert-banner.danger {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.25);
  border-left-color: var(--danger);
}

.pp-dashboard .alert-banner.warning {
  background: rgba(255, 202, 0, 0.06);
  border-color: rgba(255, 202, 0, 0.25);
  border-left-color: var(--yellow);
}

.pp-dashboard .alert-banner.alert-banner-success {
  background: color-mix(in srgb, var(--dp-status-success) 6%, transparent);
  border-color: color-mix(in srgb, var(--dp-status-success) 25%, transparent);
  border-left-color: var(--success);
}

.pp-dashboard .alert-icon          { font-size: 16px; flex-shrink: 0; }
.pp-dashboard .alert-icon.danger   { color: var(--danger); }
.pp-dashboard .alert-icon.warning  { color: var(--dp-status-warning); }
.pp-dashboard .alert-icon-success  { color: var(--success); }

.pp-dashboard .alert-content  { flex: 1; }
.pp-dashboard .alert-title    { font-weight: 700; font-size: 13px; margin-bottom: 1px; }
.pp-dashboard .alert-title.danger  { color: var(--dp-status-danger); }
.pp-dashboard .alert-title.warning { color: var(--dp-status-warning); }
.pp-dashboard .alert-title-success { color: var(--dp-status-success); }
.pp-dashboard .alert-desc     { font-size: 12px; color: var(--text-secondary); }

/* Alert Box (Part 2 inline variant) */
.pp-dashboard .alert-box {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pp-dashboard .alert-box.danger { background: var(--dp-status-danger-bg); border: 1px solid var(--dp-status-danger-bg); color: var(--dp-status-danger); }
.pp-dashboard .alert-box.warn   { background: var(--dp-status-warning-bg); border: 1px solid var(--dp-status-warning-border); color: var(--dp-status-warning); }

.pp-dashboard .alert-box i { margin-top: 1px; flex-shrink: 0; }

/* Clear-state for alerts panel (no active alerts) */
.pp-dashboard .alerts-clear {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--success);
  font-weight: 600;
}

.pp-dashboard .alerts-clear i { font-size: 16px; }


/* ================================================================
   Service Score Notes
   ================================================================ */

.pp-dashboard .sub-score-note      { font-size: 11px; color: var(--text-secondary); }
.pp-dashboard .sub-score-note.warn { color: var(--dp-status-warning); }


/* ================================================================
   Badges
   ================================================================ */

.pp-dashboard .badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
}

.pp-dashboard .badge-danger  { background: var(--dp-status-danger-bg); color: var(--dp-status-danger); }
.pp-dashboard .badge-warning { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.pp-dashboard .badge-success { background: var(--dp-status-success-bg); color: var(--dp-status-success); }
.pp-dashboard .badge-cyan    { background: var(--cyan-subtle); color: var(--cyan-dark); }
.pp-dashboard .badge-gray    { background: var(--dp-surface-secondary); color: var(--dp-text-secondary); }
.pp-dashboard .badge-orange  { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.pp-dashboard .badge-navy    { background: var(--dp-text-primary); color: var(--dp-text-inverse); }

/* Part 2 badge color aliases */
.pp-dashboard .badge-red    { background: var(--dp-status-danger-bg); color: var(--danger); }
.pp-dashboard .badge-yellow { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.pp-dashboard .badge-green  { background: var(--dp-status-success-bg); color: var(--dp-status-success); }

/* Type badges (Part 2 table cells) */
.pp-dashboard .type-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.pp-dashboard .tb-cyan   { background: var(--cyan-subtle); color: var(--cyan-dark); }
.pp-dashboard .tb-red    { background: var(--dp-status-danger-bg); color: var(--danger); }
.pp-dashboard .tb-green  { background: var(--dp-status-success-bg); color: var(--dp-status-success); }
.pp-dashboard .tb-yellow { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.pp-dashboard .tb-gray   { background: var(--dp-surface-secondary); color: var(--dp-text-secondary); }
.pp-dashboard .tb-dark   { background: var(--dp-nav-bg); color: var(--dp-text-inverse); }
.pp-dashboard .tb-blue   { background: var(--dp-status-info-bg); color: var(--dp-status-info); }
.pp-dashboard .tb-orange { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }

/* Status badges (Part 2) */
.pp-dashboard .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
}

.pp-dashboard .sb-green  { background: var(--dp-status-success-bg); color: var(--dp-status-success); }
.pp-dashboard .sb-yellow { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.pp-dashboard .sb-blue   { background: var(--dp-status-info-bg); color: var(--dp-status-info); }
.pp-dashboard .sb-red    { background: var(--dp-status-danger-bg); color: var(--danger); }

@keyframes pp-pulse-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

.pp-dashboard .sb-pulsing { animation: pp-pulse-badge 1.5s infinite; }


/* ================================================================
   Buttons
   ================================================================ */

.pp-dashboard .btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}

.pp-dashboard .btn-cyan            { background: var(--cyan); color: white; border-color: var(--cyan); }
.pp-dashboard .btn-cyan:hover      { background: var(--cyan-dark); }
.pp-dashboard .btn-danger          { background: var(--danger); color: white; border-color: var(--danger); }
.pp-dashboard .btn-danger:hover    { background: var(--dp-status-danger); }
.pp-dashboard .btn-outline         { background: transparent; color: var(--text-secondary); border-color: var(--neutral-200); }
.pp-dashboard .btn-outline:hover   { background: var(--neutral-50); border-color: var(--cyan); color: var(--cyan); }
.pp-dashboard .btn-outline-danger  { background: transparent; color: var(--danger); border-color: var(--danger); }
.pp-dashboard .btn-warning-outline { background: transparent; color: var(--dp-status-warning); border-color: var(--yellow); }
.pp-dashboard .btn-warning-outline:hover { background: rgba(255, 202, 0, 0.1); }
.pp-dashboard .btn-primary         { background: var(--cyan); color: var(--dp-surface-primary); border: none; }
.pp-dashboard .btn-danger-outline  { background: var(--dp-surface-primary); border: 1px solid var(--danger); color: var(--danger); }
.pp-dashboard .btn-sm              { padding: 4px 9px; font-size: 11px; }

/* Period button group (Part 3) */
.pp-dashboard .btn-period {
  background: var(--neutral-100);
  border: 1px solid var(--neutral-200);
  color: var(--neutral-600);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 11px;
  cursor: pointer;
}

.pp-dashboard .btn-period.active { background: var(--cyan); color: var(--dp-surface-primary); border-color: var(--cyan); }

.pp-dashboard .btn-period-group { display: flex; gap: 4px; }


/* ================================================================
   Period Selector
   ================================================================ */

.pp-dashboard .period-selector {
  display: flex;
  gap: 2px;
  background: var(--neutral-50);
  padding: 2px;
  border-radius: 7px;
  border: 1px solid var(--neutral-200);
}

.pp-dashboard .period-btn {
  padding: 4px 10px;
  border: none;
  background: transparent;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
}

.pp-dashboard .period-btn.active {
  background: var(--dp-surface-primary);
  color: var(--cyan-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}


/* ================================================================
   Regulation
   ================================================================ */

.pp-dashboard .regulation-card {
  background: var(--surface);
  border: none;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}

.pp-dashboard .regulation-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pp-dashboard .reg-badge {
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.pp-dashboard .reg-badge.gdpr { background: var(--neutral-800); color: var(--dp-text-inverse); }
.pp-dashboard .reg-badge.ccpa { background: transparent; color: var(--cyan-dark); border: 1.5px solid var(--cyan); }
.pp-dashboard .reg-badge.pdpl { background: var(--yellow); color: var(--dp-text-primary); }

.pp-dashboard .reg-score      { font-size: 15px; font-weight: 800; margin-left: auto; }
.pp-dashboard .reg-issue      { font-size: 11px; color: var(--danger); margin-top: 4px; }
.pp-dashboard .reg-issue.ok   { color: var(--text-secondary); }


/* ================================================================
   Deadlines
   ================================================================ */

.pp-dashboard .deadlines-box {
  background: var(--neutral-50);
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
}

.pp-dashboard .deadline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--neutral-200);
  font-size: 12px;
}

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

.pp-dashboard .deadline-date {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
}


/* ================================================================
   Risk Grid
   ================================================================ */

.pp-dashboard .risk-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.pp-dashboard .risk-card {
  border-radius: 8px;
  padding: 10px 12px;
  border: 1px solid;
}

.pp-dashboard .risk-card.critical { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.2); }
.pp-dashboard .risk-card.high     { background: rgba(249, 115, 22, 0.06); border-color: rgba(249, 115, 22, 0.2); }
.pp-dashboard .risk-card.medium   { background: rgba(255, 202, 0, 0.06); border-color: rgba(255, 202, 0, 0.2); }
.pp-dashboard .risk-card.low      { background: rgba(34, 197, 94, 0.06); border-color: rgba(34, 197, 94, 0.2); }

.pp-dashboard .risk-label          { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.pp-dashboard .risk-label.critical { color: var(--dp-status-danger); }
.pp-dashboard .risk-label.high     { color: var(--dp-status-warning); }
.pp-dashboard .risk-label.medium   { color: var(--dp-status-warning); }
.pp-dashboard .risk-label.low      { color: var(--dp-status-success); }

.pp-dashboard .risk-count { font-size: 22px; font-weight: 800; color: var(--neutral-800); }

/* ================================================================
   Service Health
   ================================================================ */

.pp-dashboard .service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.pp-dashboard .service-card {
  background: var(--surface);
  border: none;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  min-height: 140px;
}

.pp-dashboard .service-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  margin-bottom: 8px;
}

.pp-dashboard .service-icon.cyan    { background: var(--cyan-subtle); color: var(--cyan-dark); }
.pp-dashboard .service-icon.red     { background: rgba(239, 68, 68, 0.1); color: var(--danger); }
.pp-dashboard .service-icon.success { background: rgba(34, 197, 94, 0.1); color: var(--success); }

.pp-dashboard .service-name  { font-size: 12px; font-weight: 700; margin-bottom: 4px; }
.pp-dashboard .service-score { font-size: 20px; font-weight: 800; margin-bottom: 4px; }
.pp-dashboard .service-score.green { color: var(--success); }
.pp-dashboard .service-score.red   { color: var(--danger); }
.pp-dashboard .service-score.cyan  { color: var(--cyan-dark); }


/* ================================================================
   Quick Actions
   ================================================================ */

/* --- Quick Actions: compact list layout --- */
.pp-dashboard .qa-list-body {
  padding: 0 !important;
}

.pp-dashboard .qa-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--dp-border-separator);
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
  color: inherit;
}

.pp-dashboard .qa-row:last-child { border-bottom: none; }
.pp-dashboard .qa-row:hover      { background: var(--cyan-subtle); }

.pp-dashboard .qa-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.pp-dashboard .qa-icon.cyan    { background: var(--cyan-subtle); color: var(--cyan-dark); }
.pp-dashboard .qa-icon.success { background: var(--dp-status-success-bg); color: var(--dp-status-success); }
.pp-dashboard .qa-icon.warning { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.pp-dashboard .qa-icon.danger  { background: var(--dp-status-danger-bg); color: var(--dp-status-danger); }
.pp-dashboard .qa-icon.info    { background: var(--dp-status-info-bg); color: var(--dp-status-info); }
.pp-dashboard .qa-icon.yellow  { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.pp-dashboard .qa-icon.neutral { background: var(--dp-surface-hover); color: var(--dp-text-secondary); }

.pp-dashboard .qa-label { font-size: 12.5px; font-weight: 500; color: var(--text-primary); }

.pp-dashboard .qa-chevron {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-muted);
  flex-shrink: 0;
}


/* ================================================================
   Activity Timeline
   ================================================================ */

.pp-dashboard .activity-list { display: flex; flex-direction: column; gap: 0; }

.pp-dashboard .activity-item {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(226, 232, 238, 0.5);
  align-items: flex-start;
}

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

.pp-dashboard .activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.pp-dashboard .dot-cyan    { background: var(--cyan); }
.pp-dashboard .dot-danger  { background: var(--danger); }
.pp-dashboard .dot-warning { background: var(--yellow); }
.pp-dashboard .dot-success { background: var(--success); }
.pp-dashboard .dot-gray    { background: var(--text-muted); }

.pp-dashboard .activity-content { flex: 1; }
.pp-dashboard .activity-title   { font-size: 12px; font-weight: 700; margin-bottom: 1px; }
.pp-dashboard .activity-desc    { font-size: 11px; color: var(--text-secondary); }
.pp-dashboard .activity-time    { font-size: 11px; color: var(--text-muted); white-space: nowrap; }


/* ================================================================
   Sync Chips
   ================================================================ */

.pp-dashboard .sync-chips {
  display: flex;
  gap: 8px;
  padding: 10px 0;
  flex-wrap: wrap;
}

.pp-dashboard .sync-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid;
}

.pp-dashboard .sync-chip.cyan   { background: var(--cyan-subtle); color: var(--cyan-dark); border-color: rgba(1, 205, 211, 0.3); }
.pp-dashboard .sync-chip.orange { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); border-color: var(--dp-status-warning-border); }
.pp-dashboard .sync-chip.gray   { background: var(--neutral-50); color: var(--text-secondary); border-color: var(--neutral-200); }

/* Unassigned chip (Part 2) */
.pp-dashboard .chip-unassigned {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--dp-status-danger-bg);
  color: var(--danger);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--dp-status-danger-bg);
}


/* ================================================================
   Donut Overlay
   ================================================================ */

.pp-dashboard .donut-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.pp-dashboard .donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  text-align: center;
  pointer-events: none;
}

.pp-dashboard .donut-center-value { font-size: 18px; font-weight: 800; color: var(--dp-text-primary); }
.pp-dashboard .donut-center-label { font-size: 10px; color: var(--dp-text-muted); }


/* ================================================================
   Section Footer
   ================================================================ */

.pp-dashboard .section-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--neutral-200);
  font-size: 12px;
  color: var(--cyan-dark);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
}

.pp-dashboard .section-footer:hover { color: var(--cyan); }

.pp-dashboard .link-action {
  color: var(--cyan);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.pp-dashboard .link-action:hover { text-decoration: underline; }


/* ================================================================
   Progress Bars (Part 1 + Part 2)
   ================================================================ */

/* --- Part 1 style (thin 6px, inside sub-score cards) --- */
.pp-dashboard .progress-bar-track {
  height: 6px;
  background: var(--neutral-200);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 5px;
}

.pp-dashboard .progress-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}

.pp-dashboard .progress-bar-fill.cyan   { background: var(--cyan); }
.pp-dashboard .progress-bar-fill.red    { background: var(--danger); }
.pp-dashboard .progress-bar-fill.yellow { background: var(--yellow); }
.pp-dashboard .progress-bar-fill.green  { background: var(--success); }

/* --- Part 2 style (8px, labelled progress items) --- */
.pp-dashboard .prog-item          { margin-bottom: 14px; }
.pp-dashboard .prog-item:last-child { margin-bottom: 0; }

.pp-dashboard .prog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}

.pp-dashboard .prog-header .prog-label { font-size: 12px; font-weight: 600; }
.pp-dashboard .prog-header .prog-pct   { font-size: 12px; font-weight: 700; }

.pp-dashboard .prog-sub         { font-size: 10px; color: var(--neutral-500); margin-top: 3px; }
.pp-dashboard .prog-sub.warn    { color: var(--dp-status-warning); }
.pp-dashboard .prog-sub.danger  { color: var(--danger); font-weight: 600; }

.pp-dashboard .prog-bar-track {
  height: 8px;
  background: var(--dp-surface-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.pp-dashboard .prog-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}

.pp-dashboard .fill-cyan   { background: var(--cyan); }
.pp-dashboard .fill-yellow { background: var(--yellow); }
.pp-dashboard .fill-red    { background: var(--danger); }
.pp-dashboard .fill-green  { background: var(--success); }


/* ================================================================
   Server Locations (Part 2)
   ================================================================ */

.pp-dashboard .server-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.pp-dashboard .server-col {
  border-radius: 8px;
  border: 1px solid var(--neutral-200);
  overflow: hidden;
}

.pp-dashboard .server-col-header {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  border-left: 3px solid transparent;
}

.pp-dashboard .server-col-header.green { border-left-color: var(--success); background: var(--dp-status-success-bg); }
.pp-dashboard .server-col-header.amber { border-left-color: var(--high); background: var(--dp-status-warning-bg); }
.pp-dashboard .server-col-header.red   { border-left-color: var(--danger); background: var(--dp-status-danger-bg); }

.pp-dashboard .server-col-header .col-title { font-size: 12px; font-weight: 700; }
.pp-dashboard .server-col-header .col-sub   { font-size: 10px; color: var(--dp-text-secondary); margin-top: 2px; font-weight: 400; }

.pp-dashboard .server-rows {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pp-dashboard .server-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: 6px;
  background: var(--dp-surface-page);
  border: 1px solid var(--dp-surface-secondary);
  flex-wrap: wrap;
}

.pp-dashboard .server-row .flag-name  { font-size: 11px; font-weight: 600; flex: 1; min-width: 80px; }
.pp-dashboard .server-row .s-provider { font-size: 10px; color: var(--dp-text-secondary); width: 100%; padding-left: 0; margin-top: 1px; }
.pp-dashboard .server-row .sys-count  { font-size: 10px; color: var(--dp-text-secondary); white-space: nowrap; }

/* Flag-name and sys-count as top-level classes too (used outside .server-row context) */
.pp-dashboard .flag-name  { font-size: 11px; font-weight: 600; }
.pp-dashboard .sys-count  { font-size: 10px; color: var(--dp-text-secondary); white-space: nowrap; }

/* Risk badge (server location variant — Part 2) */
.pp-dashboard .risk-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
}

.pp-dashboard .risk-low  { background: var(--dp-status-success-bg); color: var(--dp-status-success); }
.pp-dashboard .risk-med  { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); }
.pp-dashboard .risk-high { background: var(--dp-status-danger-bg); color: var(--danger); }

/* Transfer badges */
.pp-dashboard .transfer-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.pp-dashboard .tb-scc      { background: var(--dp-status-info); color: var(--dp-surface-primary); }
.pp-dashboard .tb-adequacy { background: var(--cyan-subtle); color: var(--cyan-dark); }
.pp-dashboard .tb-review   { background: var(--dp-status-danger-bg); color: var(--danger); }


/* ================================================================
   Timeline (Part 2)
   ================================================================ */

.pp-dashboard .timeline-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 20px 8px 10px;
  overflow-x: auto;
  position: relative;
}

.pp-dashboard .tl-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.pp-dashboard .tl-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: var(--neutral-200);
  z-index: 0;
}

.pp-dashboard .tl-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 3px solid var(--neutral-200);
  background: var(--dp-surface-primary);
  z-index: 1;
  position: relative;
  flex-shrink: 0;
}

.pp-dashboard .tl-dot.today  { border-color: var(--cyan); background: var(--cyan); }
.pp-dashboard .tl-dot.red    { border-color: var(--danger); background: var(--danger); }
.pp-dashboard .tl-dot.yellow { border-color: var(--yellow); background: var(--yellow); }
.pp-dashboard .tl-dot.cyan   { border-color: var(--cyan); background: var(--cyan-subtle); }
.pp-dashboard .tl-dot.gray   { border-color: var(--dp-text-tertiary); background: var(--dp-surface-secondary); }

.pp-dashboard .tl-label          { font-size: 10px; font-weight: 700; margin-top: 8px; text-align: center; max-width: 110px; }
.pp-dashboard .tl-date           { font-size: 10px; color: var(--dp-text-secondary); margin-top: 2px; text-align: center; }
.pp-dashboard .tl-label.red      { color: var(--danger); }
.pp-dashboard .tl-label.yellow   { color: var(--dp-status-warning); }
.pp-dashboard .tl-label.cyan     { color: var(--cyan-dark); }
.pp-dashboard .tl-label.gray     { color: var(--dp-text-secondary); }
.pp-dashboard .tl-label.today-l  { color: var(--cyan-dark); font-size: 11px; }

/* Timeline V2 — new marker + event-type classes */
.pp-dashboard .pn-marker-today   { border-color: var(--dp-status-info); background: var(--dp-status-info); }
.pp-dashboard .pn-marker-danger  { border-color: var(--dp-status-danger); background: var(--dp-status-danger); }
.pp-dashboard .pn-marker-warn    { border-color: var(--dp-status-warning); background: var(--dp-status-warning); }
.pp-dashboard .pn-marker-info    { border-color: var(--dp-status-info); background: var(--dp-status-info-bg); }

.pp-dashboard .tl-event-icon       { font-size: 11px; margin-top: 4px; }
.pp-dashboard .tl-event-icon.text-danger  { color: var(--dp-status-danger); }
.pp-dashboard .tl-event-icon.text-warning { color: var(--dp-status-warning); }
.pp-dashboard .tl-event-icon.text-info    { color: var(--dp-status-info); }
.pp-dashboard .tl-event-icon.text-primary { color: var(--dp-text-link); }

.pp-dashboard .tl-event-type-label { font-size: 9px; margin-top: 2px; text-align: center; }
.pp-dashboard .pn-event-badge           { display: inline-block; padding: 1px 5px; border-radius: 4px; font-size: 9px; font-weight: 600; white-space: nowrap; }
.pp-dashboard .pn-event-badge--review   { background: var(--dp-status-info-bg); color: var(--dp-status-info); border: 1px solid var(--dp-status-info-border); }
.pp-dashboard .pn-event-badge--expiration { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); border: 1px solid var(--dp-status-warning-border); }

/* Timeline info button */
.pp-dashboard .pn-timeline-info-btn {
  background: none;
  border: none;
  padding: 0 4px;
  cursor: pointer;
  color: var(--dp-text-tertiary);
  line-height: 1;
  vertical-align: middle;
}
.pp-dashboard .pn-timeline-info-btn:hover,
.pp-dashboard .pn-timeline-info-btn:focus-visible {
  color: var(--dp-text-link);
  outline: 2px solid var(--dp-border-interactive-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Timeline legend toggle */
.pp-dashboard .pn-timeline-legend-toggle {
  background: none;
  border: 1px solid var(--dp-border-subtle);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--dp-text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
}
.pp-dashboard .pn-timeline-legend-toggle:hover,
.pp-dashboard .pn-timeline-legend-toggle:focus-visible {
  background: var(--dp-surface-secondary);
  outline: 2px solid var(--dp-border-interactive-focus);
  outline-offset: 2px;
}

/* Timeline legend bar */
.pp-dashboard .pn-timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 4px 12px;
  border-bottom: 1px solid var(--dp-border-subtle);
  margin-bottom: 8px;
}
.pp-dashboard .pn-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--dp-text-secondary);
}
.pp-dashboard .pn-legend-review     i { color: var(--dp-status-info); }
.pp-dashboard .pn-legend-expiration i { color: var(--dp-status-warning); }
.pp-dashboard .pn-legend-danger     i { color: var(--dp-status-danger); }
.pp-dashboard .pn-legend-warning    i { color: var(--dp-status-warning); }
.pp-dashboard .pn-legend-info       i { color: var(--dp-status-info); }

/* Timeline empty & skeleton */
.pp-dashboard .pn-timeline-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  color: var(--dp-text-tertiary);
  text-align: center;
}
.pp-dashboard .pn-timeline-empty-icon { font-size: 28px; margin-bottom: 8px; }

.pp-dashboard .pn-timeline-skeleton { display: flex; gap: 0; padding: 20px 8px 10px; }
.pp-dashboard .pn-tl-skeleton-item  { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pp-dashboard .pn-tl-skel-dot   { width: 22px; height: 22px; border-radius: 50%; background: var(--dp-surface-secondary); animation: pn-pulse 1.4s ease-in-out infinite; }
.pp-dashboard .pn-tl-skel-label { width: 60px; height: 10px; border-radius: 4px; background: var(--dp-surface-secondary); animation: pn-pulse 1.4s ease-in-out infinite 0.1s; }
.pp-dashboard .pn-tl-skel-date  { width: 50px; height: 8px; border-radius: 4px; background: var(--dp-surface-secondary); animation: pn-pulse 1.4s ease-in-out infinite 0.2s; }
@keyframes pn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Mobile: timeline goes vertical */
@media (max-width: 767px) {
  .pp-dashboard .timeline-row { flex-direction: column; overflow-x: unset; gap: 8px; }
  .pp-dashboard .tl-item { flex-direction: row; align-items: flex-start; gap: 10px; }
  .pp-dashboard .tl-item:not(:last-child)::after { top: 22px; left: 11px; width: 2px; height: 100%; }
  .pp-dashboard .tl-label { text-align: left; max-width: 180px; }
  .pp-dashboard .tl-date  { text-align: left; }
}

/* ================================================================
   Review Cycle Form Fields
   ================================================================ */

.pn-review-date-wrap { position: relative; }

/* Review History Block */
.pn-review-history-block {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--dp-surface-brand-subtle);
  border: 1px solid var(--dp-border-subtle);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.pn-review-history-icon { color: var(--dp-text-link); font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.pn-review-history-content { display: flex; flex-direction: column; gap: 4px; }
.pn-review-history-text { font-size: 13px; color: var(--dp-text-primary); font-weight: 500; }
.pn-review-history-notes {
  font-size: 12px;
  color: var(--dp-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: help;
}

/* char count helper */
.pn-char-count { float: right; font-size: 11px; color: var(--dp-text-tertiary); }

/* ================================================================
   Mark as Reviewed Modal
   ================================================================ */

.pn-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--dp-surface-overlay);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.pn-modal {
  background: var(--dp-surface-primary);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
  width: 100%;
}

.pn-modal--md { max-width: 500px; }

.pn-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--dp-border-subtle);
}

.pn-modal-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--dp-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pn-modal-title .fas.fa-circle-check { color: var(--dp-status-info); }

.pn-modal-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
}

.pn-modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--dp-border-subtle);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Mobile: modal full screen */
@media (max-width: 576px) {
  .pn-modal-overlay { padding: 0; align-items: flex-end; }
  .pn-modal { border-radius: 12px 12px 0 0; max-height: 95vh; }
}

/* Focus trap visible indicator */
.pn-modal :focus-visible {
  outline: 2px solid var(--dp-border-interactive-focus);
  outline-offset: 2px;
}


/* ================================================================
   Assessment Specific (Part 3)
   ================================================================ */

/* Risk badges for assessment table (with border) */
.pp-dashboard .risk-badge.risk-critical {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--dp-status-danger-bg);
  color: var(--dp-status-danger);
  border: 1px solid var(--dp-status-danger-border);
}

.pp-dashboard .risk-badge.risk-high {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--dp-status-warning-bg);
  color: var(--dp-status-warning);
  border: 1px solid var(--dp-status-warning-border);
}

.pp-dashboard .risk-badge.risk-medium {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--dp-status-warning-bg);
  color: var(--dp-status-warning);
  border: 1px solid var(--dp-status-warning-border);
}

.pp-dashboard .risk-badge.risk-low {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--dp-status-success-bg);
  color: var(--dp-status-success);
  border: 1px solid var(--dp-status-success-border);
}

/* Status badges (Assessment specific) */
.pp-dashboard .status-overdue  { background: rgba(239, 68, 68, 0.12); color: var(--danger); }
.pp-dashboard .status-progress { background: rgba(1, 205, 211, 0.12); color: var(--cyan-dark); }
.pp-dashboard .status-draft    { background: var(--neutral-100); color: var(--neutral-500); }

/* Urgency text */
.pp-dashboard .urgency-overdue { font-size: 11px; font-weight: 700; color: var(--danger); }
.pp-dashboard .urgency-warning { font-size: 11px; font-weight: 700; color: var(--dp-status-warning); }
.pp-dashboard .urgency-ok      { font-size: 11px; color: var(--neutral-500); }

/* Assessment type badges */
.pp-dashboard .type-badge.type-dpia { background: rgba(1, 205, 211, 0.12); color: var(--cyan-dark); border-radius: 4px; }
.pp-dashboard .type-badge.type-tia  { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); border-radius: 4px; }
.pp-dashboard .type-badge.type-dpa  { background: rgba(100, 116, 139, 0.12); color: var(--neutral-600); border-radius: 4px; }
.pp-dashboard .type-badge.type-lia  { background: var(--dp-status-success-bg); color: var(--dp-status-success); border-radius: 4px; }
.pp-dashboard .type-badge.type-pia  { background: var(--dp-status-warning-bg); color: var(--dp-status-warning); border-radius: 4px; }

/* Owner avatar (inline circular initials) */
.pp-dashboard .owner-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--cyan-subtle);
  color: var(--cyan-dark);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Assessment bar chart wrap */
.pp-dashboard .assessment-bar-wrap {
  position: relative;
  height: 160px;
}

.pp-dashboard .assessment-bar-wrap > canvas {
  width: 100% !important;
  height: 100% !important;
}

/* Online dot indicator */
.pp-dashboard .dot-online {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--success);
  display: inline-block;
}


/* ================================================================
   Heatmap (Part 3)
   ================================================================ */

.pp-dashboard .heatmap-section { margin-top: 16px; }

.pp-dashboard .heatmap-grid {
  display: grid;
  grid-template-columns: 80px repeat(5, 1fr);
  gap: 4px;
}

.pp-dashboard .heatmap-header {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--neutral-500);
  text-align: center;
  padding: 6px 4px;
}

.pp-dashboard .heatmap-row-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  border-radius: 4px;
}

.pp-dashboard .heatmap-row-label.critical { color: var(--dp-status-danger); }
.pp-dashboard .heatmap-row-label.high     { color: var(--dp-status-warning); }
.pp-dashboard .heatmap-row-label.medium   { color: var(--dp-status-warning); }
.pp-dashboard .heatmap-row-label.low      { color: var(--dp-status-success); }

.pp-dashboard .heatmap-cell {
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  min-height: 40px;
}

/* Heatmap legend (utility class referenced in task spec) */
.pp-dashboard .heatmap-legend {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 11px;
  color: var(--neutral-600);
}

.pp-dashboard .heatmap-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pp-dashboard .heatmap-legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}


/* ================================================================
   Domain Compliance Bars (Cookie Consent)
   ================================================================ */

.pp-dashboard .cc-domain-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--neutral-100);
}

.pp-dashboard .cc-domain-bar-row:last-child { border-bottom: none; }

.pp-dashboard .cc-domain-bar-label {
  width: 180px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-dashboard .cc-domain-bar-track {
  flex: 1;
  height: 20px;
  background: var(--neutral-100);
  border-radius: 4px;
  overflow: hidden;
}

.pp-dashboard .cc-domain-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.5s ease;
}

.pp-dashboard .cc-domain-bar-fill.cc-bar-green  { background: var(--success); }
.pp-dashboard .cc-domain-bar-fill.cc-bar-yellow { background: var(--yellow); }
.pp-dashboard .cc-domain-bar-fill.cc-bar-red    { background: var(--danger); }

.pp-dashboard .cc-domain-bar-value {
  width: 42px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}

.pp-dashboard .cc-domain-bar-value.text-success { color: var(--success); }
.pp-dashboard .cc-domain-bar-value.text-warning { color: var(--dp-status-warning); }
.pp-dashboard .cc-domain-bar-value.text-danger  { color: var(--danger); }


/* ================================================================
   Consistent Empty State for Charts
   ================================================================ */

.pp-dashboard .chart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-muted);
  font-size: 12px;
  gap: 8px;
}

.pp-dashboard .chart-empty-state i {
  font-size: 32px;
  opacity: 0.4;
}


/* ================================================================
   Apple Panels + Refined Teal DPO Dashboard
   ================================================================ */

.pp-dashboard .pp-panel {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--dp-border-default) 72%, transparent);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 16px 36px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  min-width: 0;
}

.pp-dashboard .pp-panel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--dp-border-subtle) 80%, transparent);
}

.pp-dashboard .pp-panel__title {
  margin: 0;
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1.25;
}

.pp-dashboard .pp-panel__sub {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.pp-dashboard .pp-panel__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.pp-dashboard .pp-panel__body {
  padding: 18px;
}

.pp-dashboard .pp-panel__body--flush {
  padding: 0;
}


.pp-dashboard .pp-executive-grid,
.pp-dashboard .pp-insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.9fr);
  gap: 16px;
  align-items: stretch;
}

.pp-dashboard .pp-attention-rail {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.pp-dashboard .pp-secondary-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.8fr);
  gap: 16px;
  align-items: stretch;
}

.pp-dashboard .pp-secondary-grid--balanced {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 1fr);
}

.pp-dashboard .pp-score-band {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.pp-dashboard .pp-score-band.excellent,
.pp-dashboard .pp-score-band.good {
  background: color-mix(in srgb, var(--cyan-dark) 12%, var(--surface));
  color: var(--cyan-dark);
}

.pp-dashboard .pp-score-band.fair {
  background: var(--dp-status-warning-bg);
  color: var(--dp-status-warning);
}

.pp-dashboard .pp-score-band.poor {
  background: var(--dp-status-danger-bg);
  color: var(--dp-status-danger);
}


.pp-dashboard .pp-trend-positive { color: var(--dp-status-success); font-weight: 750; }
.pp-dashboard .pp-trend-negative { color: var(--dp-status-danger); font-weight: 750; }
.pp-dashboard .pp-trend-flat     { color: var(--text-secondary); font-weight: 700; }

.pp-dashboard .pp-panel--trend .trend-chart-container .dp-chart-lg {
  height: 220px;
}

.pp-dashboard .pp-service-score-chart {
  width: 100%;
  height: 220px;
}

.pp-dashboard .pp-panel--consent-trend .trend-chart-container .dp-chart-lg {
  height: 260px;
}

.pp-dashboard .pp-subscore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.pp-dashboard .pp-subscore {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--dp-border-subtle) 84%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--dp-surface-secondary) 72%, var(--surface));
  min-width: 0;
}

.pp-dashboard .pp-subscore__label {
  min-height: 30px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.3;
}

.pp-dashboard .pp-subscore__value {
  margin: 4px 0 8px;
  color: var(--text-primary);
  font-size: 18px;
  font-weight: 780;
  font-variant-numeric: tabular-nums;
}

.pp-dashboard .pp-meter {
  width: 100%;
  height: 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--neutral-200) 76%, transparent);
  overflow: hidden;
}

.pp-dashboard .pp-meter__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.pp-dashboard .pp-meter__fill.cyan   { background: var(--cyan); }
.pp-dashboard .pp-meter__fill.red    { background: var(--danger); }
.pp-dashboard .pp-meter__fill.yellow { background: var(--yellow); }
.pp-dashboard .pp-meter__fill.green  { background: var(--success); }


.pp-dashboard .pp-risk-heatmap-chart {
  min-height: 260px;
}

.pp-dashboard .pp-risk-heatmap-chart .dp-chart-md {
  height: 260px;
  min-height: 260px;
}

.pp-dashboard .heat-0 {
  background: color-mix(in srgb, var(--neutral-100) 70%, var(--surface));
  border-color: color-mix(in srgb, var(--neutral-200) 60%, transparent);
  color: var(--text-secondary);
}

.pp-dashboard .heat-1 {
  background: color-mix(in srgb, var(--dp-status-success) 12%, var(--surface));
  color: var(--dp-status-success);
}

.pp-dashboard .heat-2 {
  background: color-mix(in srgb, var(--dp-status-warning) 14%, var(--surface));
  color: var(--dp-status-warning);
}

.pp-dashboard .heat-3 {
  background: color-mix(in srgb, var(--dp-status-danger) 13%, var(--surface));
  color: var(--dp-status-danger);
}

.pp-dashboard .heat-4 {
  background: var(--dp-status-danger);
  color: var(--dp-text-inverse);
}

.pp-dashboard .pp-risk-legend,
.pp-dashboard .pp-risk-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 11px;
}

.pp-dashboard .pp-risk-legend span,
.pp-dashboard .pp-risk-counts span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.pp-dashboard .pp-risk-counts strong {
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.pp-dashboard .pp-risk-legend__swatch {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  display: inline-block;
}

.pp-dashboard .pp-risk-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--dp-status-danger) 18%, transparent);
  background: color-mix(in srgb, var(--dp-status-danger) 7%, var(--surface));
  color: var(--dp-status-danger);
  font-size: 12px;
  font-weight: 700;
}

.pp-dashboard .pp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pp-dashboard .pp-table {
  min-width: 980px;
  table-layout: fixed;
}

.pp-dashboard .pp-table th,
.pp-dashboard .pp-table td {
  padding: 11px 12px;
}

.pp-dashboard .pp-table th {
  background: color-mix(in srgb, var(--dp-surface-secondary) 82%, var(--surface));
}

.pp-dashboard .pp-table--dsr th:first-child,
.pp-dashboard .pp-table--dsr td:first-child {
  width: 230px;
}

.pp-dashboard .pp-dsr-subject {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pp-dashboard .pp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  background: color-mix(in srgb, var(--cyan-dark) 13%, var(--surface));
  color: var(--cyan-dark);
  font-size: 12px;
  font-weight: 800;
}

.pp-dashboard .pp-code {
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  background: transparent;
  padding: 0;
}

.pp-dashboard .pp-muted-line {
  margin-top: 2px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.3;
}

.pp-dashboard .pp-assignee {
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 650;
}

.pp-dashboard .pp-due {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.pp-dashboard .pp-due.danger {
  background: var(--dp-status-danger-bg);
  color: var(--dp-status-danger);
}

.pp-dashboard .pp-due.warning {
  background: var(--dp-status-warning-bg);
  color: var(--dp-status-warning);
}

.pp-dashboard .pp-due.neutral {
  background: color-mix(in srgb, var(--cyan-dark) 8%, var(--surface));
  color: var(--cyan-dark);
}

.pp-dashboard .pp-progress-cell {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 42px;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.pp-dashboard .pp-progress-mini {
  height: 6px;
  border-radius: 999px;
  background: var(--neutral-200);
  overflow: hidden;
}

.pp-dashboard .pp-progress-mini span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.pp-dashboard .pp-progress-mini .cyan   { background: var(--cyan); }
.pp-dashboard .pp-progress-mini .yellow { background: var(--yellow); }
.pp-dashboard .pp-progress-mini .red    { background: var(--danger); }


/* NOTE: .pp-dashboard .pp-panel--donut .pp-panel__body rule removed (Wave 2A cleanup).
 * position:relative + min-height:286px are now provided by ApplePagePanel Variant=Donut
 * via apple-page-panel--donut in ApplePagePanel.razor.css. */

.pp-dashboard .pp-panel--donut .dp-chart-md {
  height: 250px;
}

.pp-dashboard .pp-donut-total {
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
}

.pp-dashboard .pp-donut-total strong {
  display: block;
  color: var(--text-primary);
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pp-dashboard .pp-donut-total span {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.pp-dashboard .pp-deadlines {
  margin-top: 16px;
}


.pp-dashboard .pp-deadline-list {
  border: 1px solid color-mix(in srgb, var(--dp-border-subtle) 82%, transparent);
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.pp-dashboard .pp-deadline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--dp-border-subtle) 70%, transparent);
  color: var(--text-primary);
  font-size: 12px;
}

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

.pp-dashboard .pp-deadline-date {
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 750;
  white-space: nowrap;
}

.pp-dashboard .pp-panel--assessment-status .assessment-bar-wrap,
.pp-dashboard .pp-panel--assessment-status .dp-chart-sm {
  height: 220px;
}

.pp-dashboard .pp-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.pp-dashboard .pp-service-card {
  min-width: 0;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--dp-border-subtle) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--dp-surface-secondary) 54%, var(--surface));
}

.pp-dashboard .pp-service-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 15px;
}

.pp-dashboard .pp-service-icon.cyan    { background: color-mix(in srgb, var(--cyan-dark) 11%, var(--surface)); color: var(--cyan-dark); }
.pp-dashboard .pp-service-icon.red     { background: var(--dp-status-danger-bg); color: var(--dp-status-danger); }
.pp-dashboard .pp-service-icon.success { background: var(--dp-status-success-bg); color: var(--dp-status-success); }

.pp-dashboard .pp-service-name {
  min-height: 34px;
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}

.pp-dashboard .pp-service-score {
  margin: 3px 0;
  font-size: 20px;
  font-weight: 820;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.pp-dashboard .pp-service-score.green { color: var(--success); }
.pp-dashboard .pp-service-score.red   { color: var(--danger); }
.pp-dashboard .pp-service-score.cyan  { color: var(--cyan-dark); }
.pp-dashboard .pp-service-score.yellow { color: var(--dp-status-warning); }

.pp-dashboard .pp-sub-note {
  min-height: 18px;
  color: var(--text-secondary);
  font-size: 11px;
  line-height: 1.35;
}

.pp-dashboard .pp-sub-note.warn {
  color: var(--dp-status-warning);
  font-weight: 650;
}




/* ================================================================
   Responsive (tablet/mobile)
   ================================================================ */

/* Apple responsive: aligned to compact/regular/large breakpoints.
   KPI grid uses auto-fit, so no manual column overrides needed. */
@media (max-width: 991.98px) {
  .pp-dashboard .pp-executive-grid,
  .pp-dashboard .pp-insight-grid,
  .pp-dashboard .pp-secondary-grid,
  .pp-dashboard .pp-secondary-grid--balanced {
    grid-template-columns: 1fr;
  }
  .pp-dashboard .pp-subscore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pp-dashboard .pp-service-grid,
  .pp-dashboard .service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pp-dashboard .row {
    flex-wrap: wrap;
  }
  .pp-dashboard .col-4,
  .pp-dashboard .col-5,
  .pp-dashboard .col-6,
  .pp-dashboard .col-7,
  .pp-dashboard .col-8,
  .pp-dashboard .col-full {
    flex: 1 1 100%;
  }
  .pp-dashboard .charts-split {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .pp-dashboard .pp-subscore-grid {
    grid-template-columns: 1fr;
  }
  .pp-dashboard .pp-risk-heatmap-chart,
  .pp-dashboard .pp-risk-heatmap-chart .dp-chart-md {
    min-height: 220px;
    height: 220px;
  }
  .pp-dashboard .pp-service-grid,
  .pp-dashboard .service-grid {
    grid-template-columns: 1fr;
  }
}