/* =========================================================
   DESIGN TOKENS
========================================================= */

:root {
  --bg: #f8fafc;
  --card-bg: #ffffff;

  --text-primary: #0f172a;
  --text-secondary: #64748b;

  --accent: #0000A0;
  --positive: #10b981;
  --negative: #ef4444;
  --warning: #f59e0b;

  --border: #f1f5f9;
}

/* =========================================================
   BASE
========================================================= */

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, sans-serif;
}

.main-content {
 padding: 12px 16px; 
}

/* =========================================================
   INTELLIGENCE GRID
========================================================= */

.dcc-intelligence-grid {
   display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}



.dcc-column,
.coe-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* =========================================================
   SHARED SCORECARD CONTRACT
========================================================= */

.scorecard,
.dcc-card-2030,
.coe-scorecard {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coe-scorecard {
  flex: 1;
}

/* =========================================================
   DCC EXECUTIVE SCORECARD
========================================================= */

.dcc-card-2030 {
  position: relative;
  box-shadow: 0 10px 24px -14px rgba(15, 23, 42, 0.08);
  overflow: hidden;
}



/* Header */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.label-caps {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-secondary);
  font-weight: 700;
  margin-bottom: 4px;
}

.card-header h2 {
  font-size: 18px;
  font-weight: 800;
  margin: 0;
}

/* Status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.status-pill.warning {
  background: rgba(245, 158, 11, 0.12);
  color: var(--warning);
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.5); opacity: 0.5; }
  100% { transform: scale(1); opacity: 1; }
}

/* Hero */
.hero-metric {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 12px 0 8px;
}

.main-val {
  font-size: 42px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.main-val .unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-left: 6px;
  text-transform: uppercase;
}

.trend-lite {
  font-size: 12.5px;
  font-weight: 600;
}

/* Context grid */
.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.data-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.data-value {
  font-size: 15px;
  font-weight: 700;
}

/* CFO Insight */
.executive-alert {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  background: #f9fafb;
  border-left: 3px solid var(--warning);
  border-radius: 10px;
}

/* =========================================================
   ENTITY KPI TRACKER
========================================================= */

.entity-kpi-tracker {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}

/* Header */
.entity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.entity-header h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* KPI Toggle */
.kpi-toggle {
  display: flex;
  gap: 6px;
}

.kpi-toggle button {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}

.kpi-toggle button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Scrollable table */
.entity-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 4px;
}

/* Rows */
.entity-row {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 0.7fr 16px;
  align-items: center;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 10px;
  font-size: 12.5px;
}

.entity-name {
  font-weight: 600;
}

.entity-value {
  font-weight: 700;
}

.entity-trend {
  font-size: 12px;
  font-weight: 600;
}

.risk-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  justify-self: end;
}

.risk-dot.low { background: var(--positive); }
.risk-dot.medium { background: var(--warning); }
.risk-dot.high { background: var(--negative); }

.entity-row.risk-high { border-left: 4px solid var(--negative); }
.entity-row.risk-medium { border-left: 4px solid var(--warning); }
.entity-row.risk-low { border-left: 4px solid var(--positive); }

.entity-insight {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* =========================================================
   COE COLUMNS (DSO / DIO / DPO)
========================================================= */

.coe-scorecard {
  max-height: 400px;
}

.coe-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.coe-header h3 {
  font-size: 18px;
  font-weight: 800;
}

.coe-status {
  font-size: 12px;
  font-weight: 700;
}

.coe-hero {
  margin: 10px 0 6px;
}

.coe-value {
  font-size: 36px;
  font-weight: 900;
}

.coe-unit {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-left: 6px;
}

.coe-context {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 600;
}

.coe-insight {
  margin-top: 8px;
  padding-left: 10px;
  border-left: 3px solid currentColor;
  font-size: 12.5px;
}

/* Metrics */
.coe-metrics,
.coe-dzero {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}

.metrics-header h4,
.coe-dzero h4 {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-transform: uppercase;
}

.metrics-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.metric-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

/* D-Zero */
.dzero-item {
  margin-bottom: 10px;
}

.dzero-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
}

.dzero-bar {
  height: 6px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}

.dzero-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.dzero-bar.warn i {
  background: var(--warning);
}

/* =========================================================
   UTILITIES
========================================================= */

.positive { color: var(--positive); }
.negative { color: var(--negative); }


.entity-grid {
  max-height: 300px;   /* was 360px */
  overflow-y: auto;
}


/* ================= HEADER FIX ================= */

.card-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
}

.header-left h2 {
  margin: 0;
  line-height: 1.2;
}

/* ================= HERO FIX ================= */

.hero-metric {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: end;
  margin: 12px 0 10px;
}

.hero-left {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.hero-right {
  justify-self: end;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* ================= DATA GRID FIX ================= */

.data-grid {
  align-items: start;
}

.data-item {
  min-width: 0;
}

/* ================= INSIGHT FIX ================= */

.executive-alert {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.insight-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
}


/* ================= MICRO AREA TREND ================= */

.coe-microtrend {
  height: 28px;
  margin: 6px 0 4px;
}

.coe-microtrend svg {
  width: 100%;
  height: 100%;
  display: block;
}

.coe-microtrend.negative { color: var(--negative); }
.coe-microtrend.positive { color: var(--positive); }


/* ================= NORMALIZED SCORECARD ================= */

.coe-scorecard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  border-radius: 18px;
  background: var(--card-bg);
  border: 1px solid var(--border);
}

/* Header */
.coe-header {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Micro Trend */
.coe-microtrend {
  height: 28px;
  margin: 6px 0 4px;
}

/* Hero */
.coe-hero {
  height: 56px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

/* Context */
.coe-context {
  height: 32px;
  display: flex;
  gap: 12px;
  font-size: 12.5px;
  font-weight: 600;
}

/* Insight */
.coe-insight {
  height: 48px;
  font-size: 12.5px;
  line-height: 1.45;
  padding-left: 10px;
  border-left: 3px solid;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Spacer ensures equal column height */
.coe-spacer {
  flex: 1;
}

.coe-scorecard {
  box-shadow:
    0 6px 16px rgba(15, 23, 42, 0.06);
}

.coe-microtrend {
  opacity: 0.75;
}


.coe-insight {
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.85;
  font-weight: 500;
}

.metrics-header h4 {
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}



.coe-insight {
  font-size: 13px;
  line-height: 1.5;
  padding-left: 12px;
  border-left: 3px solid currentColor;
  color: var(--text-primary); /* neutral text */
}

.coe-insight.negative {
  color: var(--negative); /* ONLY for border */
}






/* Key Drivers container */
.coe-metrics.normalized {
  padding: 18px 18px 14px;
}

/* Header spacing */
.metrics-header {
  margin-bottom: 4px;
}

/* Body rhythm */
.metrics-body {
  display: flex;
  flex-direction: column;
  gap: 0px; /* THIS is the vertical comfort */
}

/* Individual row */
.metric-row {
  display: flex;
  align-items: center;
  padding: 8px 0;              /* vertical breathing */
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

/* Remove last divider */
.metric-row:last-child {
  border-bottom: none;
}

/* Labels */
.metric-label {
  color: var(--text-secondary);
  font-weight: 600;
}

/* Spacer pushes value to right */
.metric-spacer {
  flex: 1;
}

/* Values */
.metric-value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}


/* ================= D-ZERO ================= */

.coe-dzero.normalized {
  padding: 18px;
}

/* Section title */
.coe-dzero h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 14px;
}

/* Initiative block */
.dzero-item {
  padding: 12px 0 14px;
  border-bottom: 1px solid var(--border);
}

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

/* Header row */
.dzero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

/* Title */
.dzero-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* Status pill */
.dzero-status {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

/* Status states */
.dzero-status.ontrack {
  background: rgba(16, 185, 129, 0.12);
  color: var(--positive);
}

.dzero-status.delayed {
  background: rgba(239, 68, 68, 0.12);
  color: var(--negative);
}

.dzero-status.completed {
  background: rgba(15, 23, 42, 0.08);
  color: var(--text-secondary);
}

/* Meta row */
.dzero-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.dzero-value {
  font-weight: 700;
  color: var(--text-primary);
}

/* Progress bar */
.dzero-bar {
  height: 6px;
  background: #eef2f7;
  border-radius: 6px;
  overflow: hidden;
}

.dzero-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
}

.dzero-bar.warn i {
  background: var(--warning);
}

/* Completed visual (optional) */
.dzero-item.completed .dzero-bar i {
  background: var(--text-secondary);
}


/* ================= D-ZERO TOGGLE ================= */

.dzero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.dzero-toggle {
  display: flex;
  gap: 6px;
}

.dzero-toggle button {
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  cursor: pointer;
}

.dzero-toggle button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* Views */
.dzero-view {
  display: none;
  text-align: center;
}

.dzero-view.active {
  display: block;
}

/* Donut */
.donut {
  width: 104px;
  height: 104px;
  margin: 6px auto;
  transform: rotate(-90deg);
}

.donut circle {
  fill: none;
  stroke-width: 3.2;
}

.donut-seg.completed { stroke: #94a3b8; }
.donut-seg.ontrack   { stroke: var(--positive); }
.donut-seg.delayed   { stroke: var(--negative); }

/* Legend */
.dzero-legend {
  margin-top: 6px;
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding-left: 12px;
}

/* Alert */
.dzero-alert {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--negative);
  background: #f9fafb;
  font-size: 12.5px;
  font-weight: 600;
}























/* ================= EXECUTION INTELLIGENCE ================= */

.execution-intel {
  background: var(--card-bg);
  border-radius: 16px;
  padding: 16px;
  margin-top: 24px;
}

/* Header */
.execution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.execution-header h3 {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Toggle */
.execution-toggle {
  display: flex;
  gap: 8px;
}

.execution-toggle button {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  cursor: pointer;
}

.execution-toggle button.active {
  background: var(--pro-navy);
  color: #fff;
  border-color: var(--pro-navy);
}

/* Panels */
.execution-panel {
  display: none;
}

.execution-panel.active {
  display: block;
}

/* Grid */
.execution-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* Metrics Cards */
.coe-metrics {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}

.coe-metrics h4 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.coe-metrics div {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.coe-metrics div:last-child {
  border-bottom: none;
}

/* D-Zero */
.dzero-summary {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
}

.dzero-summary h4 {
  font-size: 12px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.dzero-metrics div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}

.dzero-risk {
  margin-top: 12px;
  padding-left: 10px;
  border-left: 3px solid var(--danger);
  color: var(--danger);
  font-weight: 500;
}


/* =========================================================
   TOP INTELLIGENCE GRID (DCC / DSO / DIO / DPO)
========================================================= */

.dcc-intelligence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* Ensure all KPI cards align visually */
.coe-column {
  display: flex;
  flex-direction: column;
}

/* Normalize KPI scorecard height */
.coe-scorecard {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Spacer keeps insight aligned */
.coe-spacer {
  flex-grow: 1;
}

/* =========================================================
   ENTITY + EXECUTION ROW (SAME ROW)
========================================================= */

.execution-row {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 20px;
  align-items: stretch;
}

/* Left: Entity Tracker */
.entity-kpi-tracker {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Scroll area sizing */
.entity-grid {
  flex-grow: 1;
  overflow-y: auto;
  max-height: 420px;
}

/* =========================================================
   EXECUTION INTELLIGENCE
========================================================= */

.execution-intel {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Header */
.execution-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

.execution-header h3 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Toggle */
.execution-toggle {
  display: flex;
  gap: 6px;
}

.execution-toggle button {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-secondary);
  cursor: pointer;
}

.execution-toggle button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* =========================================================
   EXECUTION PANELS
========================================================= */

.execution-body {
  position: relative;
  flex-grow: 1;
}

.execution-panel {
  display: none;
  height: 100%;
}

.execution-panel.active {
  display: block;
}

/* =========================================================
   EXECUTION GRID (KEY DRIVERS)
========================================================= */

.execution-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

/* Normalize metric cards */
.coe-metrics.normalized {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}

.coe-metrics.normalized h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

/* Metric rows */
.coe-metrics.normalized > div {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}

.coe-metrics.normalized > div:last-child {
  border-bottom: none;
}

/* =========================================================
   D-ZERO SUMMARY PANEL
========================================================= */

.dzero-summary {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
}

.dzero-summary h4 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.dzero-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.dzero-metrics div {
  font-size: 12.5px;
}

.dzero-metrics strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
}

/* Risk note */
.dzero-risk {
  font-size: 13px;
  font-weight: 600;
  padding-left: 10px;
  border-left: 3px solid var(--negative);
  color: var(--text-secondary);
}

/* =========================================================
   RESPONSIVE SAFETY
========================================================= */

@media (max-width: 1280px) {
  .dcc-intelligence-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .execution-row {
    grid-template-columns: 1fr;
  }

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


.dcc-intelligence-grid {
    display: grid;
    /* Keeps your 4-column structure */
    grid-template-columns: repeat(4, minmax(0, 1fr)); 
    gap: 20px;
    align-items: stretch;
}

/* Force specific components to take up 50% of the row (2 out of 4 columns) */
.span-2 {
    grid-column: span 2;
}

/* Ensure the scorecard and table expand to the new width */
.coe-scorecard {
    width: 100%;
}








/* Make DCC visually dominant */
.coe-column.dcc-column {
  grid-column: span 1;
}

/* DCC EXECUTIVE EMPHASIS */
.coe-scorecard.dcc {
  border: 2px solid var(--accent);
}

.coe-scorecard.dcc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}

.coe-scorecard.dcc .coe-value {
  font-size: 52px;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.coe-scorecard.dcc .coe-unit {
  font-size: 14px;
  letter-spacing: 0.12em;
}

.coe-scorecard:not(.dcc) .coe-value {
  font-size: 36px;
}

/* Softer microtrends for non-DCC */
.coe-scorecard:not(.dcc) .coe-microtrend {
  opacity: 0.75;
}

/* Insights less loud */
.coe-scorecard:not(.dcc) .coe-insight {
  opacity: 0.85;
  border-left-width: 2px;
}

.execution-row {
    display: grid;
    grid-template-columns: 40% 60%; /* Use fixed percentages instead of fr */
    gap: 20px;
}



/* === EXECUTION PANEL CONTRACT (SINGLE SOURCE OF TRUTH) === */

.execution-panel {
    display: none;
    width: 100%;
    height: auto;
}

.execution-panel.active {
    display: block;
}

/* Drivers only */
#panel-drivers .execution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}



.execution-panel {
    display: none;
    width: 100%;
}

.execution-panel.active {
    display: block;
}

/* Drivers ONLY */
#panel-drivers .execution-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}






/* =========================================================
   D-ZERO TEASER (EXECUTION INTELLIGENCE)
   Calm by default • Intentional on hover
========================================================= */

.dzero-teaser {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: 
        box-shadow 0.25s ease,
        transform 0.25s ease,
        border-color 0.25s ease;
}

/* Hover affordance – subtle lift */
.dzero-teaser:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 0, 160, 0.25);
    box-shadow:
        0 8px 20px -12px rgba(15, 23, 42, 0.25),
        0 2px 6px rgba(15, 23, 42, 0.04);
}

/* ================= HEADER ================= */

.dzero-teaser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dzero-teaser-header h4 {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0;
    color: #475569;
}

.dzero-period {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
}

/* ================= KPI STRIP ================= */

.dzero-kpi-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.dzero-kpi {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dzero-kpi .label-caps {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #94a3b8;
}

.dzero-kpi strong {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

/* Muted state colors */
.dzero-kpi strong.positive {
    color: #16a34a;
}

.dzero-kpi strong.negative {
    color: #dc2626;
}

/* ================= PROGRESS ================= */

.dzero-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dzero-progress-bar {
    height: 6px;
    background: #f1f5f9;
    border-radius: 6px;
    overflow: hidden;
}

.progress-realized {
    height: 100%;
    background: #34d399; /* muted green */
    border-radius: 6px;
    transition: width 0.6s ease;
}



.dzero-progress-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
}

/* ================= CTA ================= */

.dzero-teaser-cta {
    display: flex;
    justify-content: flex-end;
    margin-top: 2px;
}

.dzero-link {
    font-size: 12px;
    font-weight: 700;
    color: #0000A0;
    text-decoration: none;
    position: relative;
    padding-right: 14px;
    transition: color 0.2s ease;
}

/* Arrow affordance */
.dzero-link::after {
    content: "→";
    position: absolute;
    right: 0;
    top: 0;
    transition: transform 0.2s ease;
}

/* CTA hover – subtle, not loud */
.dzero-teaser:hover .dzero-link {
    color: #0000A0;
}

.dzero-teaser:hover .dzero-link::after {
    transform: translateX(4px);
}

/* ================= RESPONSIVE SAFETY ================= */

@media (max-width: 1024px) {
    .dzero-kpi-strip {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}


/* ================= D-ZERO LEVER SNAPSHOT ================= */

.dzero-lever-snapshot {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 18px;
}

/* Individual lever card */
.lever-card {
    background: #fbfdff;
    border: 1px dashed #e5eaf1;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition:
        background 0.25s ease,
        border-color 0.25s ease;
}

/* Subtle hover – reinforces click-through */
.lever-card:hover {
    background: #ffffff;
    border-color: rgba(0, 0, 160, 0.25);
}

/* Label */
.lever-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}

/* Value */
.lever-value {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
}

/* Subtext */
.lever-sub {
    font-size: 11.5px;
    line-height: 1.4;
    color: #94a3b8;
}

/* ================= LEVER STATUS SPLIT ================= */

.lever-split {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
}

.lever-split span {
    text-align: left;
}

/* Label row */
.lever-split-labels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    margin-top: 2px;
}

/* Muted execution value */
.lever-split .muted {
    color: #64748b;
}

/* Tone discipline */
.positive {
    color: #16a34a;
}

.negative {
    color: #dc2626;
}


/* ================= DSO KPI REFINEMENTS ================= */

/* Hero spacing */
.coe-hero-muted {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin: 10px 0 6px;
}

/* Sparkline */
.sparkline.muted svg {
    display: block;
}

.sparkline.muted {
    opacity: 0.8;
}

/* Delta */
.coe-delta {
    font-size: 12px;
    font-weight: 700;
}

/* Context muted */
.coe-context.muted {
    font-size: 12.5px;
    font-weight: 600;
    opacity: 0.9;
}

/* Target bar */
.target-track.slim {
    height: 4px;
    background: #eef2f7;
    border-radius: 6px;
    margin-top: 12px;
}

/* Fills / bars (softer) */
.target-fill.positive { background: #9fd1c4; }
.target-fill.negative { background: #efb2b2; }
.target-fill.warning  { background: #efd8a6; }

/* Target meta */
.coe-target-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
    color: #64748b;
}

/* Footer CTA */
.coe-footer {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

.coe-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    text-decoration: none;
    position: relative;
    padding-right: 14px;
}

.coe-link::after {
    content: "→";
    position: absolute;
    right: 0;
    transition: transform 0.2s ease;
}

.coe-scorecard:hover .coe-link::after {
    transform: translateX(3px);
}




:root {
    --dcc-width: 1.25fr;
    --kpi-gap: 20px;
}

.main-content {
    padding: 24px;
    background-color: #f8fafc;
    font-family: 'Inter', sans-serif;
}

.dcc-intelligence-grid {
    display: grid;
    grid-template-columns: var(--dcc-width) 1fr 1fr 1fr;
    gap: var(--kpi-gap);
    margin-bottom: var(--kpi-gap);
}

.execution-row {
    display: grid;
    grid-template-columns: var(--dcc-width) 3fr;
    gap: var(--kpi-gap);
}

.execution-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
}

.execution-body {
    min-height: 350px;
    position: relative;
}




.coe-scorecard {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.coe-scorecard.dcc {
    border: 2px solid #3b82f6;
    box-shadow: 0 10px 15px -3px rgba(59,130,246,0.1);
}

.label-caps {
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
}

.coe-value {
    font-size: 42px;
    font-weight: 800;
    color: #1e293b;
}

.coe-unit {
    font-size: 16px;
    color: #64748b;
    margin-left: 4px;
}

.positive { color: #22c55e; }
.negative { color: #ef4444; }
.warning  { color: #f59e0b; }



.trend-gradient-pos {
    fill: url(#grad-pos);
    fill-opacity: .2;
    stroke: var(--positive);
    stroke-width: 2;
}

.trend-gradient-neg {
    fill: url(#grad-neg);
    fill-opacity: .2;
    stroke: var(--negative);
    stroke-width: 2;
}

.trend-gradient-war {
    fill: url(#grad-war);
    fill-opacity: .2;
    stroke: var(--warning);
    stroke-width: 2;
}

.target-track {
    height: 4px;
    background: #eef2f7;
    border-radius: 10px;
    margin-top: 15px;
    overflow: hidden;
}

.target-fill {
    height: 100%;
    border-radius: 10px;
    transition: width 1s ease-in-out;
}


.radar-toggle {
    display: inline-flex;
    background: #f1f5f9;
    padding: 2px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
}

.radar-toggle button {
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #64748b;
}

.radar-toggle button.active {
    background: #0000A0;
    color: #fff;
}

.entity-grid-container {
    height: 400px;
    overflow-y: auto;
}

.entity-list-header,
.entity-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    padding: 10px 12px;
    align-items: center;
}

.entity-list-header {
    font-size: 10px;
    font-weight: 700;
    border-bottom: 1px solid #f1f5f9;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
}

.entity-row {
    font-size: 11px;
    border-bottom: 1px solid #f8fafc;
}


.driver-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}

.driver-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 8px;
}

.driver-item {
    display: grid;
    grid-template-columns: 1.5fr .6fr .9fr;
    padding: 8px 0;
    border-bottom: 1px solid #f8fafc;
}

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

.driver-label { font-size: 11px; color: #64748b; }
.driver-value { font-size: 12px; font-weight: 700; text-align: right; }
.driver-delta { font-size: 10px; font-weight: 700; text-align: right; }

.delta-up      { color: #b91c1c; }
.delta-down    { color: #15803d; }
.delta-neutral { color: #94a3b8; }

.dpo-card .delta-up   { color: #15803d; }
.dpo-card .delta-down { color: #b91c1c; }




/* Initial State */
#panel-drivers {
    display: grid; /* Shown by default */
}

#panel-dzero {
    display: none; /* Hidden by default */
}

/* Fix for the Execution Body container to ensure it expands */
.execution-body {
    width: 100%;
    min-height: 350px;
}

/* Ensure D-Zero summary ribbon takes full width */
.dzero-summary-ribbon {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    width: 100%;
}


/* ================= D-ZERO SPECIFIC STYLES ================= */
.dzero-summary-ribbon {
    display: flex;
    gap: 24px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.dzero-total {
    font-size: 32px;
    font-weight: 800;
    color: #0000A0;
}

.dzero-realization {
    display: flex;
    gap: 20px;
    margin-top: 8px;
}

.dzero-realization strong { font-size: 18px; display: block; }
.dzero-realization span { font-size: 10px; color: #64748b; font-weight: 700; }

.dzero-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.milestone-bar {
    display: flex;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin: 12px 0;
}

.milestone.realized { background: #22c55e; }
.milestone.pipeline { background: #f59e0b; }
.milestone.risk     { background: #ef4444; }

.dzero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 12px;
}

.stat-box {
    background: #f1f5f9;
    padding: 8px;
    border-radius: 6px;
}

.stat-box span { font-size: 10px; color: #64748b; display: block; }
.stat-box strong { font-size: 14px; display: block; }
.stat-box em { font-size: 10px; font-style: normal; color: #94a3b8; }

.dzero-footer {
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
    font-size: 11px;
}


@media (max-width: 1024px) {

  /* Top KPI grid: 4 → 2 */
  .dcc-intelligence-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  /* Execution + Entity stack */
  .execution-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Execution cards stack */
  .execution-grid {
    grid-template-columns: 1fr;
  }

  /* Reduce card padding */
  .coe-scorecard,
  .entity-kpi-tracker {
    padding: 14px;
  }

  /* Entity table height */
  .entity-grid-container {
    height: 280px;
  }
}


@media (max-width: 768px) {

  /* KPI grid: 2 → 1 */
  .dcc-intelligence-grid {
    grid-template-columns: 1fr;
  }

  /* Hero metrics shrink slightly */
  .coe-value {
    font-size: 34px;
  }

  .coe-scorecard.dcc .coe-value {
    font-size: 40px;
  }

  /* Header stacking */
  .coe-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  /* Toggle wraps */
  .execution-toggle,
  .radar-toggle {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Driver rows tighter */
  .driver-item {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }

  .driver-delta {
    grid-column: span 2;
    text-align: left;
  }
}


@media (max-width: 480px) {

  /* Page padding */
  .main-content {
    padding: 10px;
  }

  /* Cards */
  .coe-scorecard,
  .entity-kpi-tracker {
    border-radius: 12px;
    padding: 12px;
  }

  /* Labels tighter */
  .label-caps {
    font-size: 9px;
  }

  /* KPI numbers */
  .coe-value {
    font-size: 30px;
  }

  .coe-unit {
    font-size: 12px;
  }

  /* Entity rows become compact */
  .entity-row {
    grid-template-columns: 1fr auto;
    row-gap: 2px;
    padding: 6px 8px;
  }

  .entity-trend {
    grid-column: span 2;
    text-align: left;
  }

  /* Execution header stacks */
  .execution-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* Hide non-essential micro trends */
  .coe-microtrend {
    display: none;
  }
}


@media (max-width: 768px) {
  .entity-list-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 10;
  }
}