/* BD KPI Dashboard styles — built on top of /colors_and_type.css */

* { box-sizing: border-box; }
html, body, #app { height: 100%; }
body {
  background: var(--bg-subtle);
  color: var(--fg);
  font-family: var(--font-body);
  margin: 0;
}

/* ---- App shell --------------------------------------------------------- */
.app {
  display: block !important; /* Change from grid to block for fixed sidebar */
  min-height: 100vh !important;
  position: relative !important;
}

/* Global class-based sidebar state management */
.app.sidebar-collapsed .main,
.app.sidebar-collapsed .main-content {
  margin-left: 70px !important;
}

.app:not(.sidebar-collapsed) .main,
.app:not(.sidebar-collapsed) .main-content {
  margin-left: 232px !important;
}

/* Enhanced collapsed sidebar styling */
.sidebar.collapsed .nav-section,
.sidebar.collapsed .nav-item span {
  display: none !important;
}

.sidebar.collapsed .brand {
  justify-content: center !important;
  align-items: center !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.sidebar.collapsed .nav-item {
  justify-content: center !important;
  padding: 12px 8px !important;
}

.sidebar.collapsed .sidebar-toggle {
  margin: 0 auto !important;
}

/* Ensure collapsed sidebar content is properly centered */
.sidebar.collapsed {
  align-items: center !important;
}

.sidebar.collapsed .nav-item {
  width: 54px !important;
  min-width: 54px !important;
  border-radius: 8px !important;
}

.sidebar.collapsed .nav-item.active {
  background: var(--yuno-blue) !important;
}

/* Optimized centering for collapsed sidebar */
.app:has(.sidebar.collapsed) .content,
.app.sidebar-collapsed .content {
  max-width: 95vw;
  padding: 24px 48px 32px;
}

.sidebar {
  background: var(--neutral-800);
  color: var(--neutral-100);
  padding: 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100vh !important;
  min-height: 100vh !important;
  overflow-y: auto;
  z-index: 100 !important;
  width: 232px !important;
  transition: width 0.3s ease !important;
}

.sidebar.collapsed {
  width: 70px !important;
  min-width: 70px !important;
  padding: 24px 8px !important;
}
.sidebar .brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 4px 8px 24px;
  background: transparent;
  position: relative;
}

.sidebar.collapsed .brand {
  align-items: center;
  flex-direction: column;
  gap: 16px;
}
.sidebar .brand img { height: 28px; }
.sidebar .nav-section {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-400);
  padding: 16px 8px 6px;
  font-weight: 600;
}
.sidebar .nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  color: var(--neutral-200);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms;
}
.sidebar .nav-item:hover { background: rgba(255,255,255,0.05); }
.sidebar .nav-item.active { background: var(--yuno-blue); color: white; }
.sidebar .nav-item.disabled { color: var(--neutral-500); cursor: not-allowed; }
.sidebar .nav-item .lock { margin-left: auto; font-size: 10px; padding: 2px 6px; background: rgba(255,255,255,0.08); border-radius: 4px; }

.main,
.main-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-left: 232px !important; /* Account for fixed sidebar width */
  min-height: 100vh !important; /* Ensure main content is full height */
  transition: margin-left 0.3s ease !important;
}

/* Adjust main content when sidebar is collapsed */
.sidebar.collapsed ~ .main,
.sidebar.collapsed ~ .main-content,
body:has(.sidebar.collapsed) .main,
body:has(.sidebar.collapsed) .main-content {
  margin-left: 70px !important;
}

/* ---- Header ----------------------------------------------------------- */
.header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  position: sticky; top: 0; z-index: 20;
}
.header-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.header h1 {
  font-size: 1.375rem; /* 22px */
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1.3;
}
.header .subtitle {
  color: var(--fg-muted);
  font-size: 0.8125rem; /* 13px */
  margin-top: var(--space-xs);
  line-height: 1.4;
}

.view-toggle {
  display: inline-flex;
  background: var(--bg-muted);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.view-toggle button {
  background: transparent;
  border: 0;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.view-toggle button.active {
  background: var(--bg);
  color: var(--fg);
  box-shadow: var(--shadow-xs);
}

/* ---- Filters ---------------------------------------------------------- */
.filter-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin-top: 14px;
}
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  transition: all 120ms;
  font-family: inherit;
  position: relative; /* Added for popover positioning */
}
.filter-chip:hover { border-color: var(--border-strong); }
.filter-chip.active {
  background: var(--blue-50);
  border-color: var(--yuno-blue);
  color: var(--blue-700);
}
.filter-chip .chip-count {
  background: var(--yuno-blue);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
}
.filter-chip .caret { font-size: 9px; opacity: 0.5; }
.filter-divider { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.filter-clear {
  background: transparent;
  border: 0;
  color: var(--fg-muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.preset-row {
  display: flex; gap: 6px; margin-top: 10px; align-items: center; flex-wrap: wrap;
}
.preset-row .preset-label { font-size: 11px; color: var(--fg-subtle); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.preset-chip {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--fg-muted);
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.preset-chip:hover { border-color: var(--yuno-blue); color: var(--yuno-blue); border-style: solid; }

/* ---- Filter dropdown -------------------------------------------------- */
.filter-popover {
  position: absolute;
  top: calc(100% + 8px); /* Fixed position relative to button bottom */
  left: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  min-width: 200px;
  z-index: 100;
}
.filter-popover .opt {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
}
.filter-popover .opt:hover { background: var(--bg-subtle); }
.filter-popover .opt input { accent-color: var(--yuno-blue); }

/* ---- Content ---------------------------------------------------------- */
.content {
  padding: 24px 32px 32px;
  max-width: 1600px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* Responsive content padding */
@media (max-width: 1024px) {
  .content {
    padding: 20px 24px 28px;
  }
}

@media (max-width: 768px) {
  .content {
    padding: 16px 20px 24px;
  }
}

@media (max-width: 480px) {
  .content {
    padding: 12px 16px 20px;
  }
}

/* ---- Enhanced Section Titles for Executive Hierarchy ------------------- */
.section-title {
  display: flex; align-items: center; gap: 16px;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-display);
  color: var(--fg);
  margin: 40px 0 24px;
  letter-spacing: -0.02em;
  position: relative;
}
.section-title:first-child { margin-top: 16px; }
.section-title .line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, var(--yuno-blue) 0%, var(--border) 100%);
  border-radius: 1px;
}

/* ---- Executive-focused subsection headings ----------------------------- */
.subsection-title {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-display);
  color: var(--fg);
  margin: 32px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ---- KPI Hero Card ---------------------------------------------------- */
/* Hero grid for non-responsive sections (not overview KPI cards) */
.hero-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* Ensure hero-grid doesn't conflict with hero-metrics responsive layout */
.hero-grid:not(.hero-metrics) {
  grid-template-columns: repeat(4, 1fr);
}
/* ---- Standardized KPI Card Styling (Executive-friendly) --------------- */
.kpi-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px 20px; /* Optimized padding for uniform sizing */
  cursor: pointer;
  transition: all 150ms;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  border-left: 4px solid var(--yuno-blue);
  height: 160px; /* Fixed height for uniform sizing */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Even spacing of content */
}
.kpi-card:hover {
  border-color: var(--border);
  border-left-color: var(--yuno-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.kpi-card .kpi-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 10px;
}
.kpi-card .kpi-name {
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
}
.kpi-card .kpi-status {
  width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px;
}
.kpi-card .kpi-value {
  font-family: var(--font-display);
  font-size: 2.125rem; /* 34px - Optimized for fixed height */
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin: 8px 0; /* Consistent margins for uniform layout */
  flex-grow: 1;
  display: flex;
  align-items: center;
}
.kpi-card .kpi-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto; /* Push to bottom of card */
  font-size: 0.75rem; /* 12px */
  color: var(--fg-muted);
  line-height: 1.4;
  flex-shrink: 0;
}
.kpi-card .kpi-delta {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 2px;
}
.kpi-card .kpi-spark { margin-top: 10px; height: 36px; margin-left: -4px; margin-right: -4px; }

/* Status colors — scoped to indicator elements only.
   Previously these were unscoped utility rules (.status-good {...}) which
   leaked solid red/amber/green backgrounds onto every text/card element that
   carried a status-* className (trend captions, KPI values, deep-dive heroes,
   etc). Containers that want the filled bg now opt in via their own scoped
   rule (e.g. .lfr-bar, .dept-kpi-status, .region-kpi-card). */
.dot.status-good,
.kpi-status.status-good,
.headline-kpi-status.status-good { background: var(--success); }
.dot.status-warn,
.kpi-status.status-warn,
.headline-kpi-status.status-warn { background: var(--warning); }
.dot.status-bad,
.kpi-status.status-bad,
.headline-kpi-status.status-bad  { background: var(--danger); }
.dot.status-neutral,
.kpi-status.status-neutral,
.headline-kpi-status.status-neutral { background: var(--neutral-300); }

.text-good { color: var(--success); }
.text-warn { color: var(--warning); }
.text-bad  { color: var(--danger); }
.text-muted { color: var(--fg-muted); }

/* ---- Executive-friendly number color coding (only numbers, not backgrounds) --- */
.number-good {
  color: var(--success);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.number-warn {
  color: var(--warning);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.number-bad {
  color: var(--danger);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.number-neutral {
  color: var(--fg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ---- Typography Standardization for Executive Dashboard */
/* Ensures consistent typography across all dashboard elements */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
  margin: 0 0 var(--space-lg) 0;
}

h1 { font-size: 2.25rem; } /* 36px - Main page titles */
h2 { font-size: 1.5rem; } /* 24px - Section titles */
h3 { font-size: 1.25rem; } /* 20px - Subsection titles */
h4 { font-size: 1.125rem; } /* 18px - Card titles */
h5 { font-size: 1rem; } /* 16px - Small titles */
h6 { font-size: 0.875rem; } /* 14px - Labels */

/* Standardized metric display classes */
.metric-display {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-weight: 700;
}

.metric-hero { font-size: 3rem; } /* 48px - Hero metrics */
.metric-large { font-size: 2rem; } /* 32px - Card metrics */
.metric-medium { font-size: 1.5rem; } /* 24px - Secondary metrics */
.metric-small { font-size: 1.125rem; } /* 18px - Small metrics */

/* Standardized label styling */
.label-standard {
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-muted);
  line-height: 1.3;
}

/* Consistent body text sizing */
.body-large { font-size: 1rem; line-height: 1.5; } /* 16px */
.body-medium { font-size: 0.875rem; line-height: 1.4; } /* 14px */
.body-small { font-size: 0.75rem; line-height: 1.4; } /* 12px */
.body-caption { font-size: 0.6875rem; line-height: 1.3; } /* 11px */

/* Insight icon styling for hover tooltips */
.insight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--yuno-blue);
  color: white;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 6px;
  transition: all 150ms ease;
}
.insight-icon:hover {
  background: var(--blue-600);
  transform: scale(1.1);
}

/* ---- Enhanced Pie Chart Centerpiece ------------------------------------ */
.enhanced-pie-container {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
  min-height: auto;
  height: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
  overflow: visible;
}

.enhanced-pie-tooltip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--shadow-lg);
  max-width: 300px;
  font-size: 13px;
  line-height: 1.4;
}

.enhanced-pie-tooltip .tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.enhanced-pie-tooltip .trend-indicator {
  font-size: 16px;
  font-weight: 700;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-subtle);
  border-radius: 50%;
}

.enhanced-pie-tooltip .performance-summary {
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}

.enhanced-pie-tooltip .performance-details {
  margin: 8px 0;
  padding: 8px;
  background: var(--bg-subtle);
  border-radius: 6px;
}

.enhanced-pie-tooltip .performance-details p {
  margin: 4px 0;
  font-size: 12px;
}

.enhanced-pie-tooltip .q2-context {
  font-weight: 600;
  color: var(--yuno-blue);
  margin-bottom: 8px;
}

.enhanced-pie-tooltip .click-hint {
  color: var(--fg-muted);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  margin-top: 8px;
}

.pie-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 150ms ease;
}

.legend-item:hover, .legend-item.highlighted {
  background: var(--bg);
  border-color: var(--yuno-blue);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.legend-text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.legend-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}

.legend-trend {
  font-size: 16px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: 50%;
  border: 1px solid var(--border);
}

.legend-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--bg);
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
}

/* ---- Hover Insight System ---------------------------------------------- */
.insight-wrapper {
  position: relative;
  display: inline-block;
}

.insight-icon-wrapper {
  position: relative;
  display: inline-block;
  margin-left: 6px;
}

.insight-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  width: 320px;
  max-width: 90vw;
  z-index: 1000;
  font-size: 14px;
  line-height: 1.4;
  white-space: normal;
  pointer-events: none;
  word-wrap: break-word;
}

/* Removed tooltip arrow - was covering content */

.insight-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 8px;
}

.insight-content {
  color: var(--fg-muted);
  margin-bottom: 12px;
}

.insight-drivers {
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.insight-drivers strong {
  color: var(--fg);
  font-size: 12px;
}

.insight-drivers ul {
  margin: 6px 0 0 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--fg-muted);
}

.insight-drivers li {
  margin-bottom: 2px;
}

/* Enhanced number displays with insight integration */
.kpi-value-with-insight {
  display: flex;
  align-items: center;
  gap: 8px;
}

.performance-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Ensure tooltips appear above other content and don't interfere */
.insight-tooltip {
  z-index: 1001;
}

/* Chart tooltips positioning and styling */
.recharts-tooltip-wrapper {
  pointer-events: none !important;
  z-index: 999;
}

.recharts-tooltip-cursor {
  pointer-events: none !important;
}

/* Ensure all tooltip text is visible with proper contrast */
.recharts-default-tooltip {
  background-color: #ffffff !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}

.recharts-tooltip-label {
  color: #1E293B !important;
  font-weight: 600 !important;
  margin-bottom: 4px !important;
}

.recharts-tooltip-item {
  color: #1E293B !important;
}

.recharts-tooltip-item-value {
  color: #1E293B !important;
  font-weight: 600 !important;
}

/* ---- Clean Executive Overview Layout ----------------------------------- */
.executive-overview-clean {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Hero Section */
.executive-hero-section {
  background: linear-gradient(135deg, #3E4FE0 0%, #2563EB 100%);
  border-radius: 24px;
  padding: 48px;
  color: white;
  box-shadow: 0 20px 50px rgba(62, 79, 224, 0.15);
}

.hero-header {
  text-align: center;
  margin-bottom: 40px;
}

.executive-main-title {
  font-size: 42px;
  font-weight: 700;
  font-family: var(--font-display);
  color: white;
  margin: 0 0 12px 0;
  letter-spacing: -0.03em;
}

.hero-subtitle {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

/* Hero KPI Grid */
.hero-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; /* Reduced gap for cleaner, more cohesive layout */
}

.hero-kpi-card {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 36px 24px; /* Increased vertical padding */
  text-align: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 200ms ease;
  min-height: 160px; /* Ensure consistent height */
}

.hero-kpi-card:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.hero-kpi-card.primary {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.hero-kpi-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.hero-kpi-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
  line-height: 1;
}

.hero-kpi-delta {
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

/* Clean Overview Hero */
.overview-hero {
  background: linear-gradient(135deg, #3E4FE0 0%, #2563EB 100%);
  border-radius: 20px;
  padding: 40px 48px;
  color: white;
  box-shadow: 0 12px 40px rgba(62, 79, 224, 0.2);
}

.overview-title {
  font-size: 2.25rem; /* 36px */
  font-weight: 700;
  font-family: var(--font-display);
  line-height: 1.1;
  color: white;
  margin: 0 0 var(--space-2xl) 0;
  color: white;
  text-align: center;
}

/* ---- Hero Metrics Responsive Grid Layout ---- */
.hero-metrics {
  display: grid !important;
  gap: 20px !important;
  align-items: stretch !important;
  width: 100% !important;
  /* Desktop: 4 columns */
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Ensure all cards stretch to same height and behave uniformly */
.hero-metrics .kpi-card-executive {
  height: 80px !important;
  min-height: 80px !important;
  max-height: 80px !important;
  width: 100% !important;
  flex: none !important; /* Prevent flex interference */
  box-sizing: border-box !important;
}

/* Reset any potential inherited styles that might interfere */
.hero-metrics {
  box-sizing: border-box !important;
  contain: layout style !important; /* Isolate layout calculations */
  grid-auto-rows: minmax(80px, 80px) !important; /* Force consistent row height */
}

/* Large Laptop/Desktop (1200px+) */
@media (min-width: 1200px) {
  .hero-metrics {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
  }
}

/* Tablet Landscape (769px - 1199px) */
@media (max-width: 1199px) and (min-width: 769px) {
  .hero-metrics {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    grid-auto-rows: minmax(80px, 80px) !important;
  }

  .hero-metrics .kpi-card-executive {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
    width: 100% !important;
  }
}

/* Mobile Portrait and Small Tablet (768px and below) */
@media (max-width: 768px) {
  .hero-metrics {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    grid-auto-rows: minmax(160px, 160px) !important;
  }

  .hero-metrics .kpi-card-executive {
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
    width: 100% !important;
    padding: 20px 16px !important;
  }

  .kpi-value-executive {
    font-size: 1.75rem !important;
    height: 50px !important;
  }

  .kpi-label-executive {
    height: 18px !important;
    font-size: 0.75rem !important;
  }

  .performance-badge {
    height: 20px !important;
    font-size: 0.7rem !important;
  }
}

/* Very Small Mobile (480px and below) */
@media (max-width: 480px) {
  .hero-metrics {
    gap: 12px !important;
    grid-auto-rows: minmax(140px, 140px) !important;
  }

  .hero-metrics .kpi-card-executive {
    height: 140px !important;
    min-height: 140px !important;
    max-height: 140px !important;
    width: 100% !important;
    padding: 16px 12px !important;
  }

  .kpi-value-executive {
    font-size: 1.5rem !important;
    height: 45px !important;
  }
}

.metric-primary {
  text-align: center;
  flex: 1;
}

.metric-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.metric-value {
  display: block;
  font-family: var(--font-display);
  font-size: 3rem; /* 48px */
  font-weight: 700;
  color: white;
  margin-bottom: var(--space-sm);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.metric-delta {
  font-size: 1rem; /* 16px */
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums;
}

.metric-secondary {
  display: flex;
  gap: 32px;
  flex: 1;
  justify-content: center;
}

.metric-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.metric-small-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
}

.metric-small-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: white;
}

/* Main Chart Section */
.main-chart-section {
  background: white;
  border-radius: 24px;
  padding: 32px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(229, 231, 235, 0.6);
  text-align: center;
  overflow: visible;
  min-height: auto;
  height: auto;
}

.chart-header {
  margin-bottom: 32px;
}

.chart-title {
  font-size: 1.5rem; /* 24px - more appropriate for section titles */
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 var(--space-sm) 0;
  font-family: var(--font-display);
  line-height: 1.3;
}

.chart-subtitle {
  font-size: 0.875rem; /* 14px */
  color: var(--fg-muted);
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
}

.chart-container-main {
  margin: 32px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Performance Summary - Graph Scale Style */
.performance-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}

.summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: none;
  transition: none;
  cursor: default;
}

.summary-item.positive {
  /* No special background - just indicator color */
}

.summary-item.warning {
  /* No special background - just indicator color */
}

.summary-item.negative {
  /* No special background - just indicator color */
}

.summary-icon {
  font-size: 10px;
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg-muted);
  display: inline-block;
  position: relative;
}

.summary-item.positive .summary-icon {
  background: var(--success);
}

.summary-item.warning .summary-icon {
  background: var(--warning);
}

.summary-item.negative .summary-icon {
  background: var(--danger);
}

/* Uniform styling for pillar indicators */
.summary-item.pillar-indicator .summary-icon {
  background: var(--yuno-blue); /* Consistent blue for all pillars */
}

.summary-text {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--fg);
  line-height: 1.3;
  font-weight: 400;
  margin: 0;
}

/* Pie Chart Section */
.executive-pie-section {
  text-align: center;
}

.pie-section-header {
  margin-bottom: 32px;
}

.pie-section-header h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 8px 0;
}

.pie-section-header p {
  font-size: 16px;
  color: var(--fg-muted);
  font-weight: 500;
}

.executive-hero-pie {
  background: white;
  border-radius: 32px;
  padding: 80px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(62, 79, 224, 0.1);
  max-width: 1200px;
  margin: 0 auto;
}

.executive-hero-pie .enhanced-pie-container {
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
  margin: 0;
}

.executive-hero-pie .enhanced-pie-container > div:first-child {
  height: 700px !important;
}

/* Bottom Insights Section */
.executive-bottom-insights {
  background: var(--bg-subtle);
  border-radius: 24px;
  padding: 48px;
  border: 1px solid var(--border);
}

.insights-header {
  text-align: center;
  margin-bottom: 32px;
}

.insights-header h3 {
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

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

.insight-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  border-left: 4px solid var(--border);
  transition: all 200ms ease;
}

.insight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.insight-card.positive,
.insight-card.warning,
.insight-card.neutral {
  border-left-color: var(--yuno-blue);
}

.insight-icon {
  font-size: 24px;
  width: 48px;
  height: 48px;
  background: var(--bg-subtle);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.insight-content {
  flex: 1;
}

.insight-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 4px;
}

.insight-desc {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.4;
}

.insight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  line-height: 1.4;
}

.insight-label {
  font-weight: 600;
  color: var(--fg);
  min-width: 140px;
}

.insight-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

.insight-text {
  color: var(--fg-muted);
  font-weight: 500;
}

/* Enhanced Pie Chart Legend */
.pie-legend {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 32px;
  padding: 24px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 16px;
  border: 1px solid rgba(62, 79, 224, 0.08);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border-radius: 12px;
  cursor: pointer;
  transition: all 200ms ease;
  border: 1px solid rgba(229, 231, 235, 0.8);
}

.legend-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(62, 79, 224, 0.15);
  border-color: var(--yuno-blue);
}

.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.legend-name {
  font-weight: 600;
  color: var(--fg);
  flex: 1;
}

.legend-count {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--yuno-blue);
  font-size: 14px;
}

/* Pie Chart Labels */
.recharts-pie-label-text {
  font-size: 14px !important;
  font-weight: 600 !important;
  fill: var(--fg) !important;
  font-family: var(--font-display) !important;
}

/* Enhanced Pie Chart Container */
.enhanced-pie-container .recharts-wrapper {
  margin: 0 auto;
}

/* Ensure enhanced pie chart legend is always visible */
.enhanced-pie-container .pie-legend {
  display: grid !important;
}

/* Compact Contextual Filters */
.contextual-filters-clean {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: rgba(248, 250, 252, 0.5);
  border-radius: 8px;
  border: 1px solid rgba(229, 231, 235, 0.3);
  margin-bottom: 12px;
}

/* Time Filter Tabs */
.time-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}

.time-tab {
  padding: 6px 12px;
  border: none;
  background: white;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 150ms ease;
  border: 1px solid rgba(229, 231, 235, 0.6);
  min-height: 28px;
  display: flex;
  align-items: center;
}

.time-tab:hover {
  color: var(--fg);
  background: rgba(62, 79, 224, 0.05);
  border-color: rgba(62, 79, 224, 0.2);
}

.time-tab.active {
  background: var(--yuno-blue);
  color: white;
  border-color: var(--yuno-blue);
  font-weight: 700;
}

/* Compact Filter Groups */
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.filter-label {
  font-size: 0.625rem; /* 10px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-subtle);
  margin-bottom: 2px;
  text-align: left;
  padding-left: 2px;
}

.filter-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0;
  scroll-behavior: smooth;
}

.filter-tabs::-webkit-scrollbar {
  height: 4px;
}

.filter-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.filter-tabs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}

.filter-tabs::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.2);
}

.filter-tab {
  padding: 4px 8px;
  border: none;
  background: white;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  transition: all 150ms ease;
  border: 1px solid rgba(229, 231, 235, 0.6);
  white-space: nowrap;
  min-height: 24px;
  display: flex;
  align-items: center;
}

.filter-tab:hover {
  color: var(--fg);
  background: rgba(62, 79, 224, 0.05);
  border-color: rgba(62, 79, 224, 0.2);
}

.filter-tab.active {
  background: var(--yuno-blue);
  color: white;
  border-color: var(--yuno-blue);
  font-weight: 600;
}

/* Clean Filter Groups */
.clean-filter-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 200px;
}

.clean-filter-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.clean-filter-dropdown {
  position: relative;
  width: 100%;
}

.clean-filter-select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid rgba(62, 79, 224, 0.2);
  border-radius: 12px;
  background: white;
  font-size: 16px;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  appearance: none;
  transition: all 200ms ease;
  padding-right: 48px;
}

.clean-filter-select:hover {
  border-color: var(--yuno-blue);
  box-shadow: 0 2px 8px rgba(62, 79, 224, 0.1);
}

.clean-filter-select:focus {
  outline: none;
  border-color: var(--yuno-blue);
  box-shadow: 0 0 0 4px rgba(62, 79, 224, 0.1);
}

.dropdown-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--fg-muted);
  font-size: 12px;
  pointer-events: none;
}

/* Enhanced Pie Chart Tooltip */
.enhanced-pie-tooltip {
  background: white;
  border: 1px solid rgba(229, 231, 235, 0.8);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  max-width: 320px;
  font-size: 13px;
  line-height: 1.4;
  z-index: 1000;
  pointer-events: none;
}

.tooltip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}

.tooltip-header strong {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
}

.tooltip-badge {
  background: var(--yuno-blue);
  color: white;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
}

.tooltip-content {
  margin-bottom: 12px;
}

.perf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.perf-label {
  color: var(--fg-muted);
  font-weight: 600;
  min-width: 80px;
}

.perf-value {
  font-weight: 600;
  color: var(--fg);
  text-align: right;
}

.perf-value.good {
  color: var(--success);
}

.perf-value.warn {
  color: var(--warning);
}

.tooltip-footer {
  color: var(--yuno-blue);
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  padding-top: 8px;
  border-top: 1px solid rgba(229, 231, 235, 0.5);
}

/* Enhanced pie chart sizing for executive view */
.enhanced-pie-container .pie-legend {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 16px;
  margin-top: 24px;
  padding: 20px;
  background: rgba(248, 250, 252, 0.5);
  border-radius: 16px;
  border: 1px solid rgba(62, 79, 224, 0.08);
  width: 100%;
  min-height: 200px;
  max-height: none;
  overflow: visible;
}

@media (max-width: 1200px) {
  .enhanced-pie-container .pie-legend {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .enhanced-pie-container .pie-legend {
    grid-template-columns: 1fr;
  }
}

.enhanced-pie-container .legend-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 12px;
  background: white;
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all 200ms ease;
  box-shadow: var(--shadow-xs);
}

.enhanced-pie-container .legend-item:hover {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.enhanced-pie-container .legend-text {
  flex: 1;
  min-width: 0; /* Allow text to wrap */
}

.enhanced-pie-container .legend-name {
  font-family: var(--font-display);
  font-size: 1rem; /* 16px - text-base */
  font-weight: 600;
  line-height: 1.3;
  color: var(--fg);
  word-wrap: break-word;
  overflow-wrap: break-word;
  margin-bottom: 2px;
}

.enhanced-pie-container .legend-count {
  font-family: var(--font-body);
  font-size: 0.75rem; /* 12px - text-xs */
  font-weight: 500;
  color: var(--fg-muted);
  white-space: nowrap;
}
}

.enhanced-pie-container .legend-count {
  font-size: 14px;
  font-weight: 600;
}

/* Remove card background colors - numbers only get color coding */
/* All cards maintain consistent neutral background */

/* ---- Card / panel ----------------------------------------------------- */
.panel {
  background: white;
  border: 1px solid #E0E4E7;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.panel-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F1F3F5;
}
.panel-title {
  font-size: 18px; font-weight: 700; color: #1a1d24;
  font-family: var(--font-display);
}
.panel-subtitle { font-size: 14px; color: #6B7280; margin-top: 4px; font-weight: 500; }
.panel-actions { display: flex; gap: 6px; }
.panel-tab {
  background: transparent; border: 0;
  padding: 4px 10px;
  font-size: 12px; font-weight: 600;
  color: var(--fg-muted);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.panel-tab.active { background: var(--bg-muted); color: var(--fg); }

/* Two col / three col */
.row-2 { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; }
.row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.row-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- Region tiles ----------------------------------------------------- */
.region-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.region-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 14px 12px;
  cursor: pointer;
  transition: all 150ms;
  position: relative;
  overflow: hidden;
}
.region-tile::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--neutral-300);
}
.region-tile.region-good::before { background: var(--success); }
.region-tile.region-warn::before { background: var(--warning); }
.region-tile.region-bad::before  { background: var(--danger); }
.region-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.region-tile.selected { border-color: var(--yuno-blue); box-shadow: 0 0 0 3px rgba(62,79,224,0.12); }
.region-tile .region-name { font-size: 14px; font-weight: 700; }
.region-tile .region-owner { font-size: 11px; color: var(--fg-muted); margin-top: 2px; }
.region-tile .region-stat { margin-top: 12px; }
.region-tile .region-stat .label { font-size: 10px; text-transform: uppercase; color: var(--fg-subtle); letter-spacing: 0.06em; font-weight: 600; }
.region-tile .region-stat .val { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.region-tile .region-stat .pct { font-size: 11px; font-weight: 700; }
.region-tile .region-mini { margin: 10px -4px -4px; height: 28px; }

/* ---- Avatars ---------------------------------------------------------- */
.avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: 10px;
  font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: 0.02em;
}
.avatar-sm { width: 18px; height: 18px; font-size: 9px; }
.avatar-lg { width: 36px; height: 36px; font-size: 13px; }

/* ---- Tables ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
.tbl {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tbl th {
  text-align: left;
  padding: 10px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  position: sticky; top: 0;
  cursor: pointer;
  user-select: none;
}
.tbl th:hover { color: var(--fg); }
.tbl th .sort-ind { font-size: 9px; margin-left: 4px; opacity: 0.6; }
.tbl td {
  padding: 12px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.tbl tr:hover td { background: var(--bg-subtle); }
.tbl .num { text-align: right; }
.tbl .center { text-align: center; }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}
.badge-good { background: var(--success-bg); color: var(--success); }
.badge-warn { background: var(--warning-bg); color: var(--warning); }
.badge-bad  { background: var(--danger-bg); color: var(--danger); }
.badge-neutral { background: var(--bg-muted); color: var(--fg-muted); }
.badge-region { background: var(--blue-50); color: var(--blue-700); }

.bar-track {
  position: relative;
  background: var(--bg-muted);
  height: 6px;
  border-radius: 4px;
  overflow: hidden;
  width: 100px;
  display: inline-block;
  vertical-align: middle;
}
.bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 4px;
  transition: width 320ms var(--ease-out);
}
.bar-fill.good { background: var(--success); }
.bar-fill.warn { background: var(--warning); }
.bar-fill.bad  { background: var(--danger); }
.bar-fill.neutral { background: var(--neutral-400); }
  border: 1px solid #F2C7CB;
  border-radius: 12px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
}
.atrisk-strip .icon { width: 28px; height: 28px; border-radius: 50%; background: var(--danger); color: white; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.atrisk-strip .copy { flex: 1; font-size: 13px; }
.atrisk-strip .copy strong { color: var(--danger); font-weight: 700; }
.atrisk-strip .pills { display: flex; gap: 6px; flex-wrap: wrap; }
.atrisk-pill {
  background: var(--bg);
  border: 1px solid #F2C7CB;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  color: var(--neutral-800);
  cursor: pointer;
  font-weight: 500;
}
.atrisk-pill:hover { border-color: var(--danger); }
.atrisk-pill .x { color: var(--danger); font-weight: 700; margin-left: 4px; }

/* ---- Funnel ---------------------------------------------------------- */
.funnel-stage {
  display: grid;
  grid-template-columns: 140px 1fr 80px 60px;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  font-size: 13px;
}
.funnel-stage .stage-name { font-weight: 600; }
.funnel-stage .stage-bar {
  height: 32px;
  background: var(--blue-500);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 10px;
  color: white;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  transition: width 320ms var(--ease-out);
}
.funnel-stage .stage-conv { font-size: 11px; color: var(--fg-muted); text-align: right; font-variant-numeric: tabular-nums; }
.funnel-stage .stage-count { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms;
  border: 1px solid transparent;
}
.btn-primary { background: var(--yuno-blue); color: white; }
.btn-primary:hover { background: var(--blue-600); }
.btn-secondary { background: var(--bg); color: var(--fg); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-ghost { background: transparent; color: var(--fg-muted); border: 0; padding: 4px 8px; }
.btn-ghost:hover { color: var(--fg); }

/* ---- Drawer ---------------------------------------------------------- */
.drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(40,42,48,0.32);
  z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity 200ms;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: 640px; max-width: 90vw;
  background: var(--bg);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 280ms var(--ease-out);
  box-shadow: var(--shadow-xl);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: flex-start;
}
.drawer-head .close {
  background: transparent; border: 0; font-size: 22px;
  width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; color: var(--fg-muted);
}
.drawer-head .close:hover { background: var(--bg-muted); color: var(--fg); }
.drawer-body { flex: 1; overflow-y: auto; padding: 20px 24px; }

.kv { display: grid; grid-template-columns: 110px 1fr; gap: 4px 12px; font-size: 13px; }
.kv dt { color: var(--fg-muted); }
.kv dd { margin: 0; font-weight: 600; }

/* ---- Empty / coming soon --------------------------------------------- */
.empty-state {
  text-align: center;
  padding: 80px 32px;
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
}
.empty-state .icon { font-size: 32px; opacity: 0.4; margin-bottom: 12px; }
.empty-state h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.empty-state p { color: var(--fg-muted); font-size: 14px; }

/* ---- Tooltip ---------------------------------------------------------- */
.recharts-tooltip-wrapper { outline: none; }
.tt {
  background: var(--neutral-800);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  box-shadow: var(--shadow-md);
}
.tt .tt-row { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; }
.tt .tt-label { color: var(--neutral-300); }
.tt .tt-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---- Misc ----------------------------------------------------------- */
.flex { display: flex; }
.flex-1 { flex: 1; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.items-center { align-items: center; } .justify-between { justify-content: space-between; }
.mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.mb-2 { margin-bottom: 8px; }
.text-xs { font-size: 11px; } .text-sm { font-size: 13px; } .text-md { font-size: 15px; }
.font-semibold { font-weight: 600; } .font-bold { font-weight: 700; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Scrollbar ------------------------------------------------------- */
.sidebar::-webkit-scrollbar, .drawer-body::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--neutral-200); border-radius: 4px; }

/* ---- Header meta chip ------------------------------------------------ */
.header-meta { display: flex; gap: 8px; align-items: center; }
.meta-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; color: var(--fg-muted);
  background: var(--bg-subtle);
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.meta-chip .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 0 rgba(43,169,113,0.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(43,169,113,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(43,169,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(43,169,113,0); }
}

/* ---- Executive summary ---------------------------------------------- */
.exec-summary {
  background: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 100%);
  border-radius: 14px;
  padding: 22px 26px;
  color: white;
  margin-bottom: 16px;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.exec-summary::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
}
.exec-summary.exec-good::before { background: var(--success); }
.exec-summary.exec-warn::before { background: var(--warning); }
.exec-summary.exec-bad::before  { background: var(--danger); }

.exec-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
  font-weight: 600;
  margin-bottom: 10px;
}
.exec-headline {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.92);
  text-wrap: pretty;
}
.exec-headline .exec-state {
  font-weight: 700;
  padding: 1px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.exec-headline .state-good { background: rgba(43,169,113,0.18); color: #8FD4B3; }
.exec-headline .state-warn { background: rgba(224,160,32,0.18); color: #F2C77A; }
.exec-headline .state-bad  { background: rgba(216,67,75,0.18); color: #F09AA0; }

.exec-row {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 28px;
  align-items: flex-start;
}
.exec-block .exec-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  font-weight: 600;
  margin-bottom: 8px;
}
.exec-big {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}
.exec-big.text-good { color: #8FD4B3; }
.exec-big.text-warn { color: #F2C77A; }
.exec-big.text-bad  { color: #F09AA0; }
.exec-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.exec-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.88);
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  transition: all 120ms;
}
.exec-pill:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.exec-pill span { font-weight: 700; font-variant-numeric: tabular-nums; }
.exec-pill.good span { color: #8FD4B3; }
.exec-pill.bad span  { color: #F09AA0; }

/* ---- Owner cards ------------------------------------------------------ */
.owner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: var(--space-xl);
  margin-bottom: var(--space-3xl);
}

/* Responsive Design for Executive Dashboard */
@media (max-width: 768px) {
  .owner-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .enhanced-pie-container .pie-legend {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dept-header-clickable {
    padding: var(--space-lg) var(--space-xl);
  }

  .owner-card {
    padding: var(--space-lg);
  }
}

@media (min-width: 1200px) {
  .owner-grid {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: var(--space-2xl);
  }
}

/* Accessibility & Focus States */
.owner-card:focus-within,
.dept-header-clickable:focus,
.legend-item:focus {
  outline: 3px solid var(--yuno-blue);
  outline-offset: 2px;
}

/* Enhanced hover animations */
@media (prefers-reduced-motion: no-preference) {
  .owner-card,
  .dept-header-clickable,
  .legend-item {
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .owner-card,
  .dept-header-clickable,
  .legend-item {
    transition: none;
  }

  .dept-header-clickable:hover {
    transform: none;
  }

  .owner-card:hover {
    transform: none;
  }
}
.owner-card {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 200ms ease;
}

.owner-card:hover {
  border-color: var(--border-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.owner-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--yuno-blue) 0%, var(--blue-300) 100%);
}

.owner-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-subtle);
}

.owner-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.owner-avatar-good,
.owner-avatar-warn,
.owner-avatar-bad {
  background: linear-gradient(135deg, var(--yuno-blue) 0%, #2563EB 100%);
}
.owner-name {
  font-family: var(--font-display);
  font-size: 1rem; /* 16px - text-base */
  font-weight: 600; /* font-semibold */
  line-height: 1.4;
  color: var(--fg);
}
.owner-title {
  font-family: var(--font-body);
  font-size: 0.6875rem; /* 11px - body-caption */
  font-weight: 400;
  color: var(--fg-muted);
  margin-top: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.owner-score {
  margin-left: auto;
  font-family: var(--font-display);
  font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.owner-kpi-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.owner-kpi-row {
  display: grid;
  grid-template-columns: 12px 1fr auto auto 60px;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  align-items: center;
  align-items: center;
  padding: 6px 8px;
  border-radius: 6px;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  width: 100%;
  transition: background 120ms;
}
.owner-kpi-row:hover {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin: 0 calc(-1 * var(--space-md));
}

.owner-kpi-row .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: var(--shadow-xs);
}
.owner-kpi-row .name {
  font-family: var(--font-body);
  font-size: 0.875rem; /* 14px - text-sm */
  font-weight: 500; /* font-medium */
  color: var(--fg);
}
.owner-kpi-row .val {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
  font-size: 0.875rem; /* 14px - consistent size */
}
.owner-kpi-row .tgt {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  color: var(--fg-subtle);
  font-size: 0.6875rem; /* 11px - body-caption */
  font-weight: 400;
}
.owner-kpi-row .delta {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-size: 0.75rem; /* 12px - text-xs */
}

/* ---- KPI Tiles (compact, used in Overview heatmap) ------------------- */
.kpi-group { margin-bottom: 18px; }
.kpi-group:last-of-type { margin-bottom: 0; }
.kpi-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-subtle);
  margin: 0 0 8px 2px;
}
.kpi-tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (min-width: 1400px) {
  .kpi-tile-grid { grid-template-columns: repeat(4, 1fr); }
}
.kpi-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 150ms;
  min-height: 124px;
  display: flex;
  flex-direction: column;
  border-left: 4px solid var(--yuno-blue);
  box-shadow: var(--shadow-xs);
}
.kpi-tile:hover {
  border-color: var(--border);
  border-left-color: var(--yuno-blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
/* Remove the colored status bar - use blue strip for all */
.kpi-tile .tile-status-bar {
  display: none;
}
.kpi-tile .tile-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.kpi-tile .tile-name {
  font-size: 12px; font-weight: 600; color: var(--fg-muted);
  line-height: 1.25;
  flex: 1;
}
.kpi-tile .tile-delta {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.kpi-tile .tile-value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--fg);
}
.kpi-tile .tile-meta {
  font-size: 11px;
  color: var(--fg-subtle);
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.kpi-tile .tile-spark {
  height: 24px;
  margin: 6px -6px -4px -6px;
  flex: 1;
  display: flex;
  align-items: flex-end;
}

/* ---- Panel-level filters (per-chart scoped chips) -------------------- */
.panel-filters {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.panel-filters.inline { display: inline-flex; }
.filter-chip.small {
  font-size: 11px;
  padding: 3px 9px;
  gap: 4px;
  line-height: 1.2;
}
.filter-chip.small .chip-count { font-size: 9px; padding: 0 5px; }
.filter-chip.small .caret { font-size: 8px; }
.filter-clear.small { font-size: 11px; }
.section-title .panel-filters { margin-left: 8px; text-transform: none; letter-spacing: 0; }
.filter-bar.slim { margin-top: 10px; }

/* ---- Sidebar 2-level (Teams + Pages) -------------------------------- */
.sidebar .nav-item.team { padding-left: 10px; font-weight: 600; font-size: 13px; }
.sidebar .nav-item.team .team-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--neutral-500);
}
.sidebar .nav-item.team[class*="active"] .team-dot { background: white; }
.sidebar .nav-item.team .team-dot[data-team="bd"]        { background: var(--yuno-blue); }
.sidebar .nav-item.team .team-dot[data-team="marketing"] { background: #b56cff; }
.sidebar .nav-item.team .team-dot[data-team="cs"]        { background: var(--success); }
.sidebar .nav-item.team .team-dot[data-team="product"]   { background: #ffb547; }
.sidebar .nav-item.team .team-dot[data-team="finance"]   { background: #ff7a59; }
.sidebar .nav-item.team .team-dot[data-team="hr"]        { background: #6ad5ff; }
.sidebar .nav-item.page {
  padding-left: 22px; font-size: 12.5px; font-weight: 500;
  color: var(--neutral-300);
}
.sidebar .nav-item.page.active {
  background: rgba(91,110,247,0.18);
  color: white;
  position: relative;
}
.sidebar .nav-item.page.active::before {
  content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 14px; border-radius: 2px; background: var(--yuno-blue);
}

/* ---- Page filter bar ------------------------------------------------- */
.page-filterbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 14px;
}
.pfb-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; flex: 1; }
.pfb-right { display: flex; align-items: center; gap: 8px; }
.pfb-group { display: inline-flex; align-items: center; gap: 8px; }
.pfb-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-muted);
}
.pfb-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.pfb-chips { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---- All KPIs toolbar ----------------------------------------------- */
.allkpi-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.allkpi-toolbar-left, .allkpi-toolbar-right {
  display: inline-flex; align-items: center; gap: 10px;
}
.search-input {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg);
  width: 280px;
  outline: none;
}
.search-input:focus { border-color: var(--yuno-blue); box-shadow: 0 0 0 3px rgba(91,110,247,0.12); }
.kpi-tile-grid.all-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tbl thead th { cursor: pointer; user-select: none; }
.tbl thead th .sort-ind { font-size: 10px; opacity: 0.5; margin-left: 2px; }
.bar-track {
  display: inline-block; vertical-align: middle;
  width: 100px; height: 6px; border-radius: 3px;
  background: var(--neutral-100); overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: 3px; transition: width 200ms; }
.bar-fill.good { background: var(--success); }
.bar-fill.warn { background: var(--warning); }
.bar-fill.bad  { background: var(--danger); }
.bar-fill.neutral { background: var(--neutral-400); }

/* ---- Drawer expanded (fullscreen) ----------------------------------- */
.drawer.expanded {
  width: 100vw; max-width: 100vw; left: 0;
  border-left: 0;
}
.drawer.expanded .drawer-body { padding: 28px 40px; }
.drawer-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.drawer-grid-2 > .panel { margin-bottom: 0 !important; }
.drawer-head-actions { display: inline-flex; align-items: center; gap: 4px; }
.drawer-head .icon-btn {
  background: transparent; border: 0; font-size: 18px;
  width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; color: var(--fg-muted);
}
.drawer-head .icon-btn:hover { background: var(--bg-muted); color: var(--fg); }
.exec-scope {
  margin-left: 6px; padding: 2px 8px; background: rgba(255,255,255,0.7);
  border-radius: 6px; font-weight: 600; color: var(--fg);
}

/* ---- Coming Soon page ----------------------------------------------- */
.coming-soon {
  max-width: 560px; margin: 80px auto; text-align: center;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 48px 40px;
}
.coming-soon .cs-badge {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  font-weight: 700; color: var(--yuno-blue);
  background: var(--blue-50);
  padding: 4px 10px; border-radius: 999px;
  margin-bottom: 16px;
}
.coming-soon h2 {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700; margin-bottom: 12px;
}
.coming-soon .cs-desc { color: var(--fg-muted); font-size: 15px; margin-bottom: 24px; line-height: 1.5; }
.coming-soon .cs-source {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg-subtle); border-radius: 10px;
  padding: 14px; margin-bottom: 20px; text-align: left;
}
.coming-soon .cs-source-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-muted);
}
.coming-soon .cs-source-val { font-size: 13px; font-weight: 600; }
.coming-soon .cs-cta { font-size: 13px; color: var(--fg-muted); line-height: 1.5; }

/* ---- Empty state ---------------------------------------------------- */
.empty-state {
  text-align: center; padding: 60px 20px;
  color: var(--fg-muted);
}
.empty-state .icon { font-size: 32px; margin-bottom: 8px; opacity: 0.6; }
.empty-state h3 { font-size: 16px; font-weight: 700; color: var(--fg); margin-bottom: 4px; }
.empty-state p { font-size: 13px; }

/* ---- KPI Group label (Overview) ------------------------------------- */
.kpi-group { margin-bottom: 20px; }
.kpi-group-label {
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-muted);
  margin-bottom: 8px;
}

/* ---- Expandable KPI tile + branch ----------------------------------- */
.kpi-tile-x {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: all 150ms;
  display: flex; flex-direction: column;
}
.kpi-tile-x.expanded {
  grid-column: 1 / -1;
  box-shadow: var(--shadow-md);
  border-color: var(--yuno-blue);
}
.kpi-tile-x:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.kpi-tile-x.expanded:hover { transform: none; }
.kpi-tile-x .tile-status-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--neutral-300); z-index: 1;
}
.kpi-tile-x.tile-good .tile-status-bar { background: var(--success); }
.kpi-tile-x.tile-warn .tile-status-bar { background: var(--warning); }
.kpi-tile-x.tile-bad  .tile-status-bar { background: var(--danger); }
.kpi-tile-x-head {
  background: transparent; border: 0; cursor: pointer; text-align: left;
  padding: 12px 14px 10px; font-family: inherit;
  display: flex; flex-direction: column; gap: 4px; min-height: 124px;
  width: 100%;
}
.kpi-tile-x .tile-value-row {
  display: flex; align-items: baseline; justify-content: space-between;
}
.kpi-tile-x .tile-chevron {
  font-size: 14px; color: var(--fg-muted); font-weight: 700;
}
.kpi-tile-x .tile-meta {
  display: flex; justify-content: space-between; font-size: 10.5px;
  color: var(--fg-subtle); font-variant-numeric: tabular-nums;
}
.kpi-tile-x .tile-meta .branches { color: var(--yuno-blue); font-weight: 600; }
.kpi-tile-x .tile-spark {
  height: 22px; margin: 4px -6px -4px;
}
.kpi-branch {
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.branch-section .branch-label {
  font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-muted);
  margin-bottom: 8px;
}
.branch-rows { display: flex; flex-direction: column; gap: 4px; }
.branch-row {
  display: grid;
  grid-template-columns: 10px 60px 1fr auto auto;
  gap: 10px; align-items: center;
  font-size: 12px; padding: 4px 0;
}
.branch-row .branch-name { font-weight: 600; }
.branch-row .branch-bar-track {
  height: 6px; background: var(--neutral-100); border-radius: 3px;
  position: relative; overflow: hidden;
}
.branch-row .branch-bar-fill {
  height: 100%; border-radius: 3px;
}
.branch-row .branch-bar-fill.good { background: var(--success); }
.branch-row .branch-bar-fill.warn { background: var(--warning); }
.branch-row .branch-bar-fill.bad  { background: var(--danger); }
.branch-row .branch-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.branch-row .branch-pct { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }

.branch-derivs {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.branch-deriv {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  text-align: left; cursor: pointer;
  font-family: inherit;
  display: flex; flex-direction: column; gap: 4px;
  transition: all 120ms;
}
.branch-deriv:hover { border-color: var(--yuno-blue); transform: translateY(-1px); box-shadow: var(--shadow-xs); }
.branch-deriv.branch-good,
.branch-deriv.branch-warn,
.branch-deriv.branch-bad {
  border-left: 3px solid var(--yuno-blue);
}
.branch-deriv-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
}
.branch-deriv-name { font-weight: 600; color: var(--fg-muted); }
.branch-deriv-val {
  font-family: var(--font-display); font-size: 18px;
  font-weight: 700; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.branch-deriv-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 10.5px; gap: 8px;
}
.branch-deriv-why { color: var(--fg-subtle); text-align: right; line-height: 1.3; }

.branch-actions {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 10px; border-top: 1px dashed var(--border);
}

/* ---- Clean Department Headers (Owners page) ------------------------ */
.dept-overview {
  background: white;
  border: 1px solid rgba(229, 231, 235, 0.6);
  border-radius: 16px;
  padding: 24px 32px;
  margin-bottom: 32px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.dept-overview-label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-muted); margin-bottom: 12px;
}
.dept-overview-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.dept-stat {
  display: flex; gap: 12px; align-items: center;
  padding: 12px; border-radius: 10px;
  background: var(--bg-subtle);
  border-left: 4px solid var(--neutral-300);
}
.dept-stat.dept-good,
.dept-stat.dept-warn,
.dept-stat.dept-bad {
  border-left-color: var(--yuno-blue);
}
.dept-stat-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 14px; flex-shrink: 0;
  background: #3E4FE0 !important; /* Override individual department colors with consistent blue */
}
.dept-stat-body { flex: 1; min-width: 0; }
.dept-stat-label { font-size: 13px; font-weight: 700; }
.dept-stat-sub { line-height: 1.3; }
.dept-stat-pct {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1;
  margin-top: 2px;
}

.dept-block { margin-bottom: 28px; }
.dept-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0 14px; border-bottom: 2px solid var(--border);
  margin-bottom: 14px;
}
.dept-header-left { display: flex; align-items: center; gap: 12px; }
.dept-icon {
  width: 32px; height: 32px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 14px;
  background: #3E4FE0 !important; /* Override individual department colors with consistent blue */
}
.dept-title { font-size: 16px; font-weight: 700; }
.dept-sub { line-height: 1.3; max-width: 720px; }
.dept-count {
  font-size: 11px; font-weight: 600; color: var(--fg-muted);
  background: var(--bg-subtle); padding: 4px 10px; border-radius: 999px;
}

/* ---- Lead funnel page ---------------------------------------------- */
.lead-headline {
  display: grid;
  grid-template-columns: 1fr 30px 1fr 30px 1fr 1fr;
  gap: 12px; align-items: center;
  background: linear-gradient(135deg, var(--neutral-900) 0%, var(--neutral-800) 100%);
  color: white;
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 16px;
}
.lh-block .lh-label {
  font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); font-weight: 600;
}
.lh-block .lh-big {
  font-family: var(--font-display);
  font-size: 36px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  line-height: 1.1; margin-top: 4px;
}
.lh-block .lh-meta { font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 4px; }
.lh-arrow {
  font-size: 24px; color: rgba(255,255,255,0.4); text-align: center;
}
.lh-status .lh-pace {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.lead-funnel { display: flex; flex-direction: column; gap: 6px; }
.lead-funnel-row {
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  background: var(--bg);
  overflow: hidden;
  transition: border-color 120ms;
}
.lead-funnel-row:hover { border-color: var(--border); }
.lead-funnel-row.expanded { border-color: var(--yuno-blue); }
.lfr-head {
  display: grid;
  grid-template-columns: 220px 1fr 100px 60px 16px;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  width: 100%; text-align: left;
}
.lfr-head:hover { background: var(--bg-subtle); }
.lfr-name {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
}
.lfr-bar-wrap { position: relative; height: 28px; background: var(--neutral-100); border-radius: 4px; overflow: hidden; }
.lfr-target-marker {
  position: absolute; top: -2px; bottom: -2px; width: 2px;
  background: var(--neutral-700); z-index: 2;
}
.lfr-bar {
  height: 100%; display: flex; align-items: center; padding: 0 10px;
  border-radius: 4px;
  background: var(--blue-500); color: white;
  font-weight: 700; font-size: 12px; font-variant-numeric: tabular-nums;
  transition: width 320ms var(--ease-out);
  min-width: 60px;
}
.lfr-bar.status-good { background: var(--success); }
.lfr-bar.status-warn { background: var(--warning); }
.lfr-bar.status-bad  { background: var(--danger); }
.lfr-bar-val { white-space: nowrap; }
.lfr-num { text-align: right; font-variant-numeric: tabular-nums; }
.lfr-num-val { font-weight: 700; font-size: 14px; }
.lfr-num-tgt { font-size: 11px; color: var(--fg-subtle); }
.lfr-conv { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; font-size: 13px; }
.lfr-chevron { color: var(--fg-muted); font-weight: 700; }
.lfr-branch {
  background: var(--bg-subtle);
  border-top: 1px solid var(--border-subtle);
  padding: 16px;
}
.lfr-branch-grid { display: grid; grid-template-columns: 1fr 1fr 1.2fr; gap: 16px; }
.lf-mini-tbl { width: 100%; font-size: 12px; border-collapse: collapse; }
.lf-mini-tbl td { padding: 4px 6px; border-bottom: 1px solid var(--border-subtle); }
.lf-mini-tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

.conv-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 16px; text-align: center;
  border-top: 3px solid var(--neutral-300);
}
.conv-card.conv-good,
.conv-card.conv-warn,
.conv-card.conv-bad {
  border-top-color: var(--yuno-blue);
}
.conv-from, .conv-to { font-size: 12px; font-weight: 600; color: var(--fg-muted); }
.conv-arrow { font-size: 14px; color: var(--fg-subtle); margin: 4px 0; }
.conv-rate {
  font-family: var(--font-display); font-size: 32px; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
  margin: 6px 0 2px;
}
.conv-target { display: block; }

.lead-owner-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 12px; padding: 16px;
  border-left: 4px solid var(--neutral-300);
}
.lead-owner-card.lo-good,
.lead-owner-card.lo-warn,
.lead-owner-card.lo-bad {
  border-left-color: var(--yuno-blue);
}
.lo-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lo-name { font-size: 14px; font-weight: 700; }
.lo-role { line-height: 1.3; }
.lo-scope { margin-bottom: 12px; }
.lo-stat { padding-top: 10px; border-top: 1px dashed var(--border); }
.lo-metric { letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.lo-val { font-family: var(--font-display); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.lo-tgt { font-size: 14px; font-weight: 500; }
.lo-pace { font-size: 12px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }

/* ============================================================================
   NEW OVERVIEW PAGE STYLES
   ============================================================================ */

/* ---- Hero KPI Card ----------------------------------------------------- */
.hero-kpi-container {
  margin-bottom: 32px;
}

.hero-kpi-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all 200ms ease;
}

.hero-kpi-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--yuno-blue);
  transform: translateY(-2px);
}

.hero-main {
  padding: 32px;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.hero-main:hover {
  background: var(--bg-subtle);
}

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

.hero-name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
}

.hero-status {
  font-size: 14px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.8);
}

.hero-value {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.hero-subtitle {
  color: var(--fg-muted);
  font-size: 14px;
  margin-bottom: 16px;
}

.expand-indicator {
  color: var(--yuno-blue);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.hero-expansion {
  border-top: 1px solid var(--border);
  padding: 24px 32px;
  background: var(--bg-subtle);
}

.contributing-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.contributing-kpi {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 150ms ease;
}

.contributing-kpi:hover {
  border-color: var(--yuno-blue);
  box-shadow: 0 2px 8px rgba(62,79,224,0.1);
}

.contributing-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--fg);
}

.contributing-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.contributing-target {
  font-size: 12px;
  color: var(--fg-muted);
}

/* ---- Headlines Grid ---------------------------------------------------- */
.headlines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.headline-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

.headline-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-muted);
  margin-bottom: 8px;
}

.headline-value {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.headline-detail {
  color: var(--fg-muted);
  font-size: 13px;
  line-height: 1.4;
}

/* ---- Chart and Insights Panels ---------------------------------------- */
.chart-panel,
.insights-panel {
  min-height: 340px;
}

.insights-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 450px;
  overflow-y: auto;
  padding-bottom: 20px;
}

.insight-item {
  padding: 16px;
  border-radius: 10px;
  border-left: 4px solid var(--border);
}

.insight-positive {
  background: linear-gradient(135deg, rgba(0, 200, 81, 0.08) 0%, rgba(0, 200, 81, 0.03) 100%);
  border-left-color: #00C851;
  box-shadow: 0 2px 8px rgba(0, 200, 81, 0.1);
}

.insight-negative {
  background: linear-gradient(135deg, rgba(255, 107, 107, 0.08) 0%, rgba(255, 107, 107, 0.03) 100%);
  border-left-color: #FF6B6B;
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.1);
}

.insight-neutral {
  background: linear-gradient(135deg, rgba(62, 79, 224, 0.08) 0%, rgba(62, 79, 224, 0.03) 100%);
  border-left-color: #3E4FE0;
  box-shadow: 0 2px 8px rgba(62, 79, 224, 0.1);
}

.insight-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--fg);
}

.insight-text {
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg-muted);
}

/* ---- Tooltip Enhancement ---------------------------------------------- */
.tt-hint {
  font-size: 11px;
  color: var(--fg-muted);
  font-style: italic;
  margin-top: 4px;
}

/* ============================================================================
   ENHANCED OWNER PAGE STYLES
   ============================================================================ */

/* ---- Department Filter Dropdown --------------------------------------- */
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.department-filter-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  margin-right: 16px;
}

.department-filter {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--fg);
  min-width: 180px;
  cursor: pointer;
  outline: none;
  transition: border-color 150ms ease;
}

.department-filter:hover {
  border-color: var(--yuno-blue);
}

.department-filter:focus {
  border-color: var(--yuno-blue);
  box-shadow: 0 0 0 3px rgba(62,79,224,0.1);
}

/* ---- Enhanced Department Headers -------------------------------------- */
.dept-header-clickable {
  width: 100%;
  background: linear-gradient(135deg, var(--yuno-blue) 0%, #2563EB 100%);
  color: white;
  border: 1px solid transparent;
  cursor: pointer;
  padding: var(--space-xl) var(--space-2xl);
  border-radius: var(--radius-xl);
  margin: var(--space-xl) 0 var(--space-2xl) 0;
  transition: all 250ms ease;
  text-align: left;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(62, 79, 224, 0.15);
}

.dept-header-clickable:hover {
  box-shadow: 0 12px 32px rgba(62, 79, 224, 0.3);
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--yuno-blue) 0%, #1D4ED8 100%);
}

.dept-header-clickable::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 600ms ease;
}

.dept-header-clickable:hover::before {
  left: 100%;
}

.dept-header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dept-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white !important; /* White text for consistency */
  background: #3E4FE0 !important; /* Blue background for consistency */
  backdrop-filter: none; /* Remove blur effect */
  font-weight: 700;
  font-size: 16px;
}

.dept-title {
  font-family: var(--font-display);
  font-size: 1.25rem; /* 20px - text-xl */
  font-weight: 700;
  color: white;
  line-height: 1.3;
  margin-bottom: var(--space-xs);
}

.dept-sub {
  font-family: var(--font-body);
  font-size: 0.875rem; /* 14px - text-sm */
  color: rgba(255, 255, 255, 0.85);
  font-weight: 400;
  line-height: 1.4;
  max-width: 720px;
}

.dept-header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dept-performance {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: white;
}

.dept-count {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 20px;
}

.dept-chevron {
  font-size: 16px;
  color: white;
  font-weight: bold;
  transition: transform 200ms ease;
}

/* ---- Enhanced Owner Cards --------------------------------------------- */
.owner-info {
  flex: 1;
  min-width: 0;
}

.owner-scope {
  margin-top: 2px;
}

.kpi-list-header {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-muted);
  padding: 8px 0 4px 0;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 8px;
}

.owner-kpi-row {
  display: grid;
  grid-template-columns: 16px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 6px 0;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  border-radius: 4px;
  transition: background-color 150ms ease;
}

.owner-kpi-row:hover {
  background: var(--bg-subtle);
  padding-left: 4px;
  padding-right: 4px;
}

.kpi-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
}

.kpi-values {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.kpi-values .val {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kpi-values .tgt {
  color: var(--fg-muted);
  font-weight: 500;
}

/* ---- Improved Department Overview -------------------------------------- */
.dept-overview-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-muted);
  margin-bottom: 16px;
}

/* ============================================================================
   EXPANDABLE SIDEBAR DRILL-DOWN SYSTEM
   ============================================================================ */

/* Prevent background scrolling when sidebar is open */
body.sidebar-open {
  overflow: hidden;
  height: 100vh;
  position: relative;
}

/* Ensure sidebar captures all scroll events */
.expandable-sidebar.open {
  pointer-events: auto;
  isolation: isolate;
}

/* ---- Sidebar Backdrop and Container ----------------------------------- */
.sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 280ms ease;
  pointer-events: none;
}

.sidebar-backdrop.open {
  pointer-events: auto;
}

.sidebar-backdrop.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.expandable-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 720px;
  max-width: 90vw;
  background: var(--bg);
  border-left: 1px solid var(--border);
  z-index: 10000;
  transform: translateX(100%);
  transition: transform 280ms ease;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  pointer-events: auto;
  touch-action: auto;
}

.expandable-sidebar.open {
  transform: translateX(0);
}

.expandable-sidebar.expanded {
  width: calc(100vw - 232px); /* Leave space for left sidebar */
  max-width: calc(100vw - 232px);
  left: 232px; /* Start after left sidebar */
  border-left: 1px solid var(--border);
}

/* ---- Sidebar Navigation & Header --------------------------------------- */
.sidebar-header .back-btn {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  color: var(--fg);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-right: 8px;
}

.sidebar-header .back-btn:hover {
  background: var(--bg-hover);
  border-color: var(--yuno-blue);
}

/* ---- Sidebar Header ---------------------------------------------------- */
.sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
  flex-shrink: 0;
  min-height: auto;
}

.sidebar-title-area {
  flex: 1;
  min-width: 0;
}

.sidebar-eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-muted);
  margin-bottom: 4px;
}

.sidebar-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: var(--fg);
}

.sidebar-subtitle {
  color: var(--fg-muted);
  font-size: 14px;
  margin-top: 4px;
}

.sidebar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- Contextual Filters ------------------------------------------------ */
.sidebar-filters {
  padding: 8px 16px 12px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  max-height: 25vh;
  overflow-y: auto;
}

.contextual-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.filters-row {
  display: flex;
  gap: 16px;
  align-items: end;
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.filter-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-muted);
}

.filter-select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  min-width: 120px;
  max-height: 100px;
  overflow-y: auto;
}

.filter-select:focus {
  border-color: var(--yuno-blue);
  outline: none;
  box-shadow: 0 0 0 2px rgba(62,79,224,0.1);
}

.granularity-toggle {
  display: flex;
  background: var(--bg-subtle);
  border-radius: 6px;
  padding: 2px;
}

.granularity-toggle button {
  background: transparent;
  border: none;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: all 150ms ease;
}

.granularity-toggle button.active {
  background: var(--yuno-blue);
  color: white;
}

.granularity-toggle button:hover:not(.active) {
  background: var(--bg);
}

/* ---- Sidebar Content Area ---------------------------------------------- */
.sidebar-content {
  flex: 1 1 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 24px;
  min-height: 0; /* Allow flexbox to shrink */
  height: 0; /* Force flex item to take remaining space */
  position: relative;
  pointer-events: auto;
  touch-action: pan-y;
}

/* Custom scrollbar for sidebar content */
.sidebar-content::-webkit-scrollbar {
  width: 8px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: var(--bg-subtle);
  border-radius: 4px;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: var(--fg-muted);
}

/* Ensure smooth scrolling and proper event isolation */
.sidebar-content {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Force content to be tall enough to scroll if needed */
.sidebar-content > * {
  min-height: max-content;
}

/* Ensure KPI performance sections take proper space */
.kpi-performance-section {
  margin-bottom: 32px;
}

/* ---- Department Drill-down --------------------------------------------- */
.department-drilldown {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100%;
  padding-bottom: 40px;
}

.kpi-performance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.dept-kpi-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  border-left: 4px solid var(--border);
}

.dept-kpi-card.status-good,
.dept-kpi-card.status-warn,
.dept-kpi-card.status-bad {
  border-left-color: var(--yuno-blue);
}

.dept-kpi-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--fg);
}

.dept-kpi-value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.dept-kpi-target {
  font-size: 12px;
  color: var(--fg-muted);
  margin-bottom: 6px;
}

.dept-kpi-pct {
  font-size: 14px;
  font-weight: 600;
}

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.member-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
}

.member-header {
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-subtle);
}

.member-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}

.member-title {
  font-size: 12px;
  color: var(--fg-muted);
  margin-top: 2px;
}

.member-kpis {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.member-kpi {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
}

/* Remove member KPI background colors - use consistent neutral backgrounds */
.member-kpi {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
}

/* Color coding only in numbers, not backgrounds */

.member-kpi-name {
  font-weight: 600;
  flex: 1;
}

.member-kpi-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-right: 8px;
}

.member-kpi-pct {
  font-weight: 700;
  min-width: 45px;
  text-align: right;
}

/* ---- KPI Drill-down ---------------------------------------------------- */
.kpi-drilldown {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px;
}

/* ============================================================================
   KPI Deep-Dive — redesigned panel (replaces the purple/blue hero + fake trend)
   ============================================================================ */
.kpi-deepdive {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 4px;
}

/* Hero — clean white card with status accent stripe */
.kdd-hero {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 18px 20px 16px;
  position: relative;
  overflow: hidden;
}
.kdd-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: #94A3B8;
  border-radius: 14px 0 0 14px;
}
.kdd-hero.status-good::before,
.kdd-hero.status-on-track::before,
.kdd-hero.status-exceeding::before { background: #10B981; }
.kdd-hero.status-warn::before,
.kdd-hero.status-at-risk::before { background: #F59E0B; }
.kdd-hero.status-bad::before,
.kdd-hero.status-off-track::before { background: #DC2626; }

.kdd-hero-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #64748B;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.kdd-hero-sep { color: #CBD5E1; }
.kdd-hero-team { color: #94A3B8; font-weight: 600; }

.kdd-hero-name {
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  line-height: 1.2;
  margin-bottom: 14px;
}

.kdd-hero-stat-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.kdd-hero-value {
  font-size: 38px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: #0F172A;
  line-height: 1;
}
/* Override the global .status-* background rules so the value text is colored only,
   no solid background block. Same below for .kdd-hero-status-bar. */
.kdd-hero-value.status-good,
.kdd-hero-value.status-on-track,
.kdd-hero-value.status-exceeding { color: #10B981; background: transparent; }
.kdd-hero-value.status-warn,
.kdd-hero-value.status-at-risk { color: #F59E0B; background: transparent; }
.kdd-hero-value.status-bad,
.kdd-hero-value.status-off-track { color: #DC2626; background: transparent; }

.kdd-hero-vs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  border-left: 1px solid #E2E8F0;
}
.kdd-hero-vs-label {
  font-size: 10px;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.kdd-hero-vs-target {
  font-size: 14px;
  color: #475569;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.kdd-hero-pct {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #64748B;
}
.kdd-hero-pct.status-good,
.kdd-hero-pct.status-on-track,
.kdd-hero-pct.status-exceeding { background: #ECFDF5; color: #10B981; }
.kdd-hero-pct.status-warn,
.kdd-hero-pct.status-at-risk { background: #FFFBEB; color: #F59E0B; }
.kdd-hero-pct.status-bad,
.kdd-hero-pct.status-off-track { background: #FEF2F2; color: #DC2626; }

.kdd-hero-status-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid #F1F5F9;
  font-size: 11px;
  color: #64748B;
  font-weight: 500;
  background: transparent;
}
/* Override the global .status-* background rules — the colored dot carries the status,
   the bar itself stays transparent. */
.kdd-hero-status-bar.status-good,
.kdd-hero-status-bar.status-warn,
.kdd-hero-status-bar.status-bad,
.kdd-hero-status-bar.status-on-track,
.kdd-hero-status-bar.status-at-risk,
.kdd-hero-status-bar.status-off-track,
.kdd-hero-status-bar.status-exceeding { background: transparent; }
.kdd-hero-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #94A3B8;
}
.kdd-hero-status-dot.status-good,
.kdd-hero-status-dot.status-on-track,
.kdd-hero-status-dot.status-exceeding { background: #10B981; }
.kdd-hero-status-dot.status-warn,
.kdd-hero-status-dot.status-at-risk { background: #F59E0B; }
.kdd-hero-status-dot.status-bad,
.kdd-hero-status-dot.status-off-track { background: #DC2626; }
.kdd-hero-status-label { font-weight: 600; color: #1E293B; }
.kdd-hero-status-sep { color: #CBD5E1; }
.kdd-hero-owner { color: #64748B; }

/* Section block — used for trend, drivers, watch, insights */
.kdd-section {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.kdd-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.kdd-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
  letter-spacing: 0.01em;
}
.kdd-section-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94A3B8;
  background: #F1F5F9;
  padding: 3px 8px;
  border-radius: 999px;
}
.kdd-section-tag.tag-placeholder {
  background: rgba(245,158,11,0.10);
  color: #B45309;
}

/* No-trend empty state */
.kdd-empty {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: #F8FAFC;
  border: 1px dashed #CBD5E1;
  border-radius: 10px;
}
.kdd-empty-icon {
  flex: 0 0 36px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #64748B;
  display: flex; align-items: center; justify-content: center;
}
.kdd-empty-title {
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 2px;
}
.kdd-empty-sub {
  font-size: 11px;
  color: #64748B;
  line-height: 1.45;
}

/* Drivers grid */
.kdd-drivers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.kdd-driver {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid #E2E8F0;
  background: #FFFFFF;
  position: relative;
}
.kdd-driver::before {
  content: '';
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #CBD5E1;
}
.kdd-driver.senti-positive::before { background: #10B981; }
.kdd-driver.senti-negative::before { background: #DC2626; }
.kdd-driver.senti-neutral::before { background: #94A3B8; }
.kdd-driver-label {
  font-size: 10px;
  font-weight: 600;
  color: #64748B;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kdd-driver-value {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  font-variant-numeric: tabular-nums;
}

/* Watch list */
.kdd-watch-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kdd-watch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 12px;
  color: #1E293B;
  font-weight: 500;
}
.kdd-watch-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #94A3B8;
}
.kdd-watch-dot.senti-warn { background: #F59E0B; }
.kdd-watch-dot.senti-info { background: #3E4FE0; }
.kdd-watch-dot.senti-bad { background: #DC2626; }

/* Footer summary */
.kdd-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 10px 4px;
}
.kdd-footer-col {
  padding: 4px 12px;
  border-right: 1px solid #E2E8F0;
}
.kdd-footer-col:last-child { border-right: none; }
.kdd-footer-label {
  font-size: 9px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.kdd-footer-value {
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
}

.kpi-summary {
  background: linear-gradient(135deg, #3E4FE0 0%, #5856D6 100%);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}

.kpi-summary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at top right, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}

.kpi-summary .kpi-header-info {
  position: relative;
  z-index: 1;
  margin-bottom: 16px;
}

.kpi-summary .kpi-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 4px 0;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.kpi-summary .kpi-owner {
  font-size: 14px;
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}

.kpi-value-large {
  font-family: var(--font-display);
  font-size: 56px;
  font-weight: 700;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: white;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.kpi-arrow {
  font-size: 32px;
  opacity: 0.9;
  font-weight: 700;
}

.kpi-arrow.status-exceeding,
.kpi-arrow.status-on-track {
  color: #ffffff;
}

.kpi-arrow.status-at-risk {
  color: rgba(255,255,255,0.9);
}

.kpi-target {
  color: #000000 !important;
  font-size: 16px;
  margin-bottom: 16px;
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.kpi-performance {
  font-size: 18px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 24px;
  background: rgba(255,255,255,0.95);
  display: inline-block;
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  color: #000000 !important;
}

/* Override text status classes for kpi-performance */
.kpi-performance.text-good,
.kpi-performance.text-warn,
.kpi-performance.text-bad,
.kpi-performance.text-neutral {
  color: #000000 !important;
}

/* Remove focus outline from pie chart slices */
.enhanced-pie-container svg,
.enhanced-pie-container svg *,
.recharts-pie-sector {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Remove any default focus styling from pie chart */
.enhanced-pie-container .recharts-active-shape,
.enhanced-pie-container .recharts-active-sector {
  outline: none !important;
  stroke: white !important;
  stroke-width: 2px !important;
}

/* Performance status colors for drill-down */
.kpi-summary.status-exceeding {
  background: linear-gradient(135deg, #00C851 0%, #00BF4F 100%);
}

.kpi-summary.status-on-track {
  background: linear-gradient(135deg, #3E4FE0 0%, #5856D6 100%);
}

.kpi-summary.status-at-risk {
  background: linear-gradient(135deg, #3E4FE0 0%, #5856D6 100%);
}

/* Chart-specific filters */
.chart-filters {
  margin: 0 0 24px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid #E0E4E7;
}

/* Summary-specific filters */
.summary-filters {
  margin-bottom: 16px;
  padding-bottom: 0;
  border-bottom: none;
}

/* Strategic Pillars Layout */
.strategic-pillars {
  display: grid;
  gap: 32px;
  margin-bottom: 48px;
}

.pillar-section {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  border: 1px solid #E0E4E7;
}

.pillar-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #3E4FE0;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pillar-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.kpi-target-executive {
  font-size: 13px;
  color: #6B7280;
  margin-bottom: 8px;
  font-weight: 500;
}

/* Deep Dive Actions */
.deep-dive-actions {
  margin-top: 32px;
  padding: 24px;
  background: linear-gradient(135deg, #F8F9FB 0%, #FFFFFF 100%);
  border-radius: 16px;
  border: 1px solid #E0E4E7;
}

.actions-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #1a1d24;
  margin-bottom: 16px;
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.deep-dive-btn {
  background: linear-gradient(135deg, #3E4FE0 0%, #5856D6 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--font-display);
}

.deep-dive-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(62, 79, 224, 0.3);
}

.strategic-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

/* Strategic Deep Dive Components */
.strategic-deep-dive {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 8px;
}

.deep-dive-header {
  text-align: center;
  margin-bottom: 8px;
}

.deep-dive-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: #1a1d24;
  margin-bottom: 8px;
}

.deep-dive-subtitle {
  font-size: 16px;
  color: #6B7280;
  font-weight: 500;
}

.strategic-kpis-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  align-items: start !important; /* Changed from stretch to start */
  grid-auto-rows: 220px !important; /* Force consistent row height */
}

/* Qualitative Commentary */
.qualitative-commentary {
  background: linear-gradient(135deg, #F8F9FB 0%, #FFFFFF 100%);
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #E0E4E7;
}

.commentary-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #3E4FE0;
  margin-bottom: 16px;
}

.commentary-content {
  color: #4B5563;
  line-height: 1.6;
}

.commentary-section p {
  margin-bottom: 12px;
}

.commentary-section p:last-child {
  margin-bottom: 0;
}

.commentary-section strong {
  color: #1a1d24;
  font-weight: 600;
}

/* ---- Region Drill-down ------------------------------------------------- */
.region-drilldown {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.region-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.region-kpi-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  border-left: 4px solid var(--border);
}

.region-kpi-card.status-good,
.region-kpi-card.status-warn,
.region-kpi-card.status-bad {
  border-left-color: var(--yuno-blue);
}

.region-kpi-name {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--fg);
}

.region-kpi-value {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.region-kpi-pct {
  font-size: 13px;
  font-weight: 600;
}

/* ========================================
   Strategic & Headline KPI Drill-downs
========================================== */
.strategic-kpis-drilldown,
.headline-kpis-drilldown {
  padding: var(--space-lg);
}

.drilldown-header {
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--border-subtle);
}

.drilldown-header h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: var(--space-sm);
}

.drilldown-description {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--fg-muted);
  line-height: 1.5;
}

/* Strategic KPIs Grid - consolidated definition */

.strategic-kpi-card {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.strategic-kpi-card:hover {
  border-color: var(--yuno-blue);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
}

.kpi-name {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
  margin: 0;
}

.kpi-unit {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.kpi-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.kpi-current,
.kpi-target,
.kpi-performance {
  text-align: center;
}

.kpi-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 2px;
}

.kpi-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.kpi-pct {
  font-family: var(--font-display);
  font-weight: 700;
}

.kpi-pct.good { color: var(--green-600); }
.kpi-pct.warn { color: var(--amber-600); }
.kpi-pct.bad { color: var(--red-600); }

.kpi-owner {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}

.owner-label,
.owner-name {
  font-family: var(--font-body);
  font-size: 0.875rem;
}

.owner-label {
  color: var(--fg-muted);
}

.owner-name {
  color: var(--fg);
  font-weight: 500;
}

.kpi-click-hint {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--yuno-blue);
  text-align: center;
  padding: var(--space-sm) 0;
  background: var(--blue-50);
  border-radius: var(--radius-sm);
  margin-top: var(--space-sm);
}

/* Parent KPI Summary */
.parent-kpi-summary {
  margin-bottom: var(--space-xl);
}

.parent-kpi-card {
  background: linear-gradient(135deg, var(--yuno-blue) 0%, #2563EB 100%);
  color: white;
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  text-align: center;
}

.parent-kpi-value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: var(--space-sm);
}

.parent-kpi-target {
  font-family: var(--font-body);
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: var(--space-sm);
}

.parent-kpi-health {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
}

/* Headline KPIs List */
.headline-kpis-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.headline-kpi-item {
  background: var(--bg);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.headline-kpi-info {
  flex: 1;
}

.headline-kpi-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 var(--space-xs) 0;
}

.headline-kpi-type {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--fg-muted);
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.headline-kpi-metrics {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.headline-kpi-value {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg);
}

.headline-kpi-health {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.headline-kpi-health.good {
  color: var(--green-700);
  background: var(--green-100);
}

.headline-kpi-health.warn {
  color: var(--amber-700);
  background: var(--amber-100);
}

.headline-kpi-health.bad {
  color: var(--red-700);
  background: var(--red-100);
}

.empty-state {
  text-align: center;
  padding: var(--space-xl);
  color: var(--fg-muted);
}

/* ---- Department Deep Dive Styling (Full-Screen Sidebar) ---- */
.department-deep-dive {
  padding: 20px;
}

.department-overview {
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.department-overview h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--fg);
  margin: 0 0 8px 0;
}

.department-overview p {
  color: var(--fg-muted);
  margin: 0;
}

.department-kpis {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.dept-kpi-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: box-shadow 0.2s ease;
}

.dept-kpi-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.dept-kpi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.dept-kpi-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  line-height: 1.3;
}

.dept-kpi-status {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: white;
}

.dept-kpi-status.status-good { background: var(--success); }
.dept-kpi-status.status-warn { background: var(--warning); }
.dept-kpi-status.status-bad { background: var(--danger); }

.dept-kpi-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.dept-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dept-metric-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dept-metric-value {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--fg);
}

.dept-metric-value.status-good { color: var(--success); }
.dept-metric-value.status-warn { color: var(--warning); }
.dept-metric-value.status-bad { color: var(--danger); }

.dept-metric-value.text-good { color: var(--success); }
.dept-metric-value.text-warn { color: var(--warning); }
.dept-metric-value.text-bad { color: var(--danger); }

.dept-kpi-owner {
  font-size: 0.8rem;
  color: var(--fg-muted);
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

/* ---- Executive Card Styling - Uniform Backgrounds with Color-Coded Numbers ---- */
.kpi-card-executive {
  background: var(--neutral-0);
  border: 1px solid var(--neutral-200);
  padding: 32px 24px;
  border-radius: 8px;
  position: relative;
  transition: box-shadow 0.2s ease;
  height: 180px !important; /* Force fixed height for uniform sizing */
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important; /* Force even content distribution */
  box-sizing: border-box !important; /* Ensure padding is included in height */
}

.kpi-card-executive:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Number-only color coding for performance status */
.kpi-number.status-exceeding {
  color: var(--success);
  font-weight: 700;
}

.kpi-number.status-on-track {
  color: var(--yuno-blue);
  font-weight: 600;
}

.kpi-number.status-at-risk {
  color: var(--danger);
  font-weight: 700;
}

.kpi-value-executive {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 60px; /* Fixed height for main value area */
  justify-content: flex-start;
}

.kpi-label-executive {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  height: 20px; /* Fixed height for uniformity */
  display: flex;
  align-items: center;
}

.kpi-insight-trigger {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-muted);
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.kpi-insight-trigger:hover {
  border-color: var(--yuno-blue);
  color: var(--yuno-blue);
  background: var(--neutral-50);
}

.performance-badge {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg-muted);
  height: 24px; /* Fixed height for badge area */
  display: flex;
  align-items: center;
  margin-top: auto; /* Push to bottom */
}

/* ---- Strategic KPIs Drill-down Styling ---- */
.strategic-kpis-drilldown {
  padding: 24px;
}

.drilldown-header {
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.drilldown-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}

.drilldown-description {
  font-size: 0.875rem;
  color: var(--fg-muted);
}

/* Removed duplicate - using consolidated definition above */

.strategic-kpi-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  transition: all 0.2s ease;
  overflow: hidden; /* Prevent text overflow */
}

.strategic-kpi-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  border-color: var(--yuno-blue);
  transform: translateY(-2px);
}

.strategic-kpi-card:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.strategic-kpi-card.status-exceeding,
.strategic-kpi-card.status-on-track,
.strategic-kpi-card.status-at-risk {
  border-left: 3px solid #3E4FE0;
}

.kpi-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.kpi-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  margin: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.kpi-unit {
  font-size: 0.75rem;
  color: var(--fg-muted);
  background: var(--bg-muted);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 8px;
  flex-shrink: 0;
}

.kpi-metrics {
  margin-bottom: 12px;
}

.kpi-metric-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}

.metric-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: var(--bg-muted);
  border-radius: 6px;
}

.metric-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.metric-value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.metric-value.status-exceeding {
  color: var(--success);
}

.metric-value.status-on-track {
  color: var(--yuno-blue);
}

.metric-value.status-at-risk {
  color: var(--danger);
}

.kpi-owner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.owner-label {
  font-size: 0.75rem;
  color: var(--fg-muted);
  font-weight: 500;
}

.owner-name {
  font-size: 0.75rem;
  color: var(--fg);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- Filter Layout Improvements ---- */
.filter-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}

.filter-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.time-filter-tabs, .granularity-tabs {
  display: flex;
  gap: 4px;
}

.time-tab, .granularity-tab {
  background: var(--bg-muted);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--fg);
  cursor: pointer;
  transition: all 0.2s ease;
}

.time-tab:hover, .granularity-tab:hover {
  border-color: var(--yuno-blue);
  background: var(--bg);
}

.time-tab.active, .granularity-tab.active {
  background: var(--yuno-blue);
  color: white;
  border-color: var(--yuno-blue);
}

/* =====================================================
   4 PILLAR BOXES LAYOUT - Executive Overview
   ===================================================== */

.pillars-container {
  margin: 24px 0;
  overflow: hidden;
}

/* Fix random line issues */
.executive-overview-clean {
  overflow-x: hidden;
}

.deep-dive-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid #E5E7EB;
  overflow: hidden;
}

.pillar-boxes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.pillar-box {
  background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%);
  border: 2px solid #E1E5E9;
  border-radius: 20px;
  padding: 28px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pillar-box:hover {
  border-color: var(--pillar-color);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.pillar-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, var(--pillar-color), var(--pillar-color));
  border-radius: 20px 20px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pillar-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  position: relative;
}

.pillar-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: white;
  flex-shrink: 0;
  font-family: var(--font-display);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  letter-spacing: 0.5px;
}

.pillar-title-section {
  flex-grow: 1;
}

.pillar-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
  margin: 0 0 4px 0;
  letter-spacing: 0.02em;
}

.pillar-subtitle {
  font-size: 13px;
  color: #6B7280;
  margin: 0 0 4px 0;
  font-weight: 500;
}

.pillar-target-info {
  font-size: 11px;
  color: #9CA3AF;
  margin: 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pillar-performance {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.kpi-count {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.performance-indicator {
  display: flex;
  gap: 4px;
}

.performance-indicator .exceeding {
  color: #059669;
  font-size: 14px;
}

.performance-indicator .on-track {
  color: #D97706;
  font-size: 14px;
}

.performance-indicator .at-risk {
  color: #DC2626;
  font-size: 14px;
}

.pillar-kpis {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kpi-item {
  padding: 16px;
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  transition: all 0.2s ease;
  cursor: default;
}

.kpi-item:hover {
  background: #FAFAFA;
  border-color: rgba(62, 79, 224, 0.1);
}

.kpi-name {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 8px;
}

.kpi-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.kpi-value .value {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.kpi-value .value.exceeding {
  color: #059669;
}

.kpi-value .value.on-track {
  color: #D97706;
}

.kpi-value .value.at-risk {
  color: #DC2626;
}

.kpi-value .target {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
}

.performance-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-align: center;
  min-width: 40px;
  align-self: flex-start;
}

.performance-badge.exceeding {
  background: #D1FAE5;
  color: #065F46;
}

.performance-badge.on-track {
  background: #FEF3C7;
  color: #92400E;
}

.performance-badge.at-risk {
  background: #FEE2E2;
  color: #991B1B;
}

/* =====================================================
   DEEP DIVE SECTION - Enhanced Analytics
   ===================================================== */

.deep-dive-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 2px solid #E5E7EB;
}

.deep-dive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.deep-dive-box {
  background: linear-gradient(135deg, #FEFEFE 0%, #F8FAFC 100%);
  border: 1px solid #E5E7EB; border-right: none;
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.deep-dive-box:hover {
  border-color: #3E4FE0;
  box-shadow: 0 12px 48px rgba(62, 79, 224, 0.15);
  transform: translateY(-4px);
}

.deep-dive-box:hover .dive-header h4 {
  color: #3E4FE0;
}

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

.dive-header h4 {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: #1F2937;
  margin: 0;
  transition: color 0.2s ease;
}

.dive-icon {
  font-size: 20px;
  opacity: 0.8;
}

.dive-metrics {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.dive-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dive-value {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-mono);
}

.dive-value.exceeding {
  color: #059669;
}

.dive-value.on-track {
  color: #D97706;
}

.dive-value.at-risk {
  color: #DC2626;
}

.dive-label {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* =====================================================
   DETAILED DEEP DIVE CARDS - Advanced Analytics
   ===================================================== */

.detailed-dive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 32px;
  margin-top: 32px;
}

.detailed-dive-stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 32px;
  overflow: hidden;
}

.detailed-dive-card,
.interactive-dive-card {
  background: white;
  border: 1px solid #E5E7EB;
  border-right: none;
  border-radius: 20px;
  padding: 32px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.detailed-dive-card:hover,
.interactive-dive-card:hover {
  border-color: #D1D5DB;
  border-right: none;
  box-shadow: 0 16px 64px rgba(62, 79, 224, 0.15);
  transform: translateY(-4px);
}

.detailed-dive-card:hover .dive-card-header h4,
.interactive-dive-card:hover .dive-card-header h4 {
  color: #3E4FE0;
}

.dive-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E2E8F0;
}

.dive-title-section {
  flex-grow: 1;
}

.dive-card-header h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: #1F2937;
  margin: 0 0 4px 0;
  transition: color 0.2s ease;
  line-height: 1.2;
}

.dive-subtitle {
  font-size: 13px;
  color: #6B7280;
  margin: 0;
  font-weight: 500;
}

.dive-card-header .dive-icon {
  font-size: 24px;
  opacity: 0.8;
  margin-left: 16px;
}

.dive-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.dive-chart-section {
  background: #F8FAFC;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #E2E8F0;
}

.mini-chart .chart-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.regional-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.region-bar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.region-name {
  font-size: 12px;
  font-weight: 600;
  color: #4B5563;
  min-width: 80px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bar-container {
  flex-grow: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.bar {
  height: 8px;
  border-radius: 4px;
  min-width: 20px;
  transition: all 0.3s ease;
  position: relative;
}

.bar-value {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  min-width: 50px;
  text-align: right;
  font-family: var(--font-mono);
}

.dive-insights {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.key-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.metric-item {
  text-align: center;
  padding: 16px;
  background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 100%);
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.metric-value {
  display: block;
  font-size: 28px;
  font-weight: 700;
  font-family: var(--font-mono);
  margin-bottom: 6px;
}

.metric-value.exceeding {
  color: #059669;
}

.metric-value.on-track {
  color: #D97706;
}

.metric-value.at-risk {
  color: #DC2626;
}

.metric-label {
  font-size: 11px;
  color: #6B7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
}

.qualitative-insight {
  background: linear-gradient(135deg, #EEF2FF 0%, #F0F9FF 100%);
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 4px solid #3E4FE0;
  font-size: 13px;
  line-height: 1.5;
  color: #374151;
}

.qualitative-insight strong {
  color: #1F2937;
  font-weight: 600;
}

/* =====================================================
   INTERACTIVE DEEP DIVE CONTROLS & CHARTS
   ===================================================== */

.dive-controls {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
  padding: 16px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-group label {
  font-size: 11px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.control-group select {
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  background: white;
  font-size: 13px;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 160px;
}

.control-group select:hover {
  border-color: #3E4FE0;
}

.control-group select:focus {
  outline: none;
  border-color: #3E4FE0;
  box-shadow: 0 0 0 3px rgba(62, 79, 224, 0.1);
}

.chart-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E2E8F0;
}

.chart-title-row h5 {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.chart-period {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
  background: #F3F4F6;
  padding: 4px 8px;
  border-radius: 6px;
}

.interactive-chart {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chart-bar-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  overflow: hidden;
  max-width: 100%;
}

.bar-label {
  font-size: 13px;
  font-weight: 600;
  color: #4B5563;
  min-width: 120px;
  text-align: left;
}

.bar-visual {
  flex-grow: 1;
  height: 12px;
  background: #F3F4F6;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
}

.bar-fill:hover {
  opacity: 0.8;
}

.bar-value {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  text-align: right;
  font-family: var(--font-mono);
}

  overflow: hidden;
}

  max-width: 100px;
  text-overflow: ellipsis;
}

.total-summary {
  background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
  border: 1px solid #BAE6FD;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.total-metric {
  display: flex;
  align-items: center;
  gap: 12px;
}

.total-label {
  font-size: 14px;
  font-weight: 600;
  color: #1E40AF;
}

.total-value {
  font-size: 20px;
  font-weight: 700;
  color: #1E40AF;
  font-family: var(--font-mono);
}

.total-target {
  font-size: 12px;
  color: #6B7280;
  font-weight: 500;
}

.target-note {
  display: block;
  font-size: 10px;
  color: #9CA3AF;
  font-style: italic;
  margin-top: 2px;
}

/* ============================================================================
   CLEAN EXECUTIVE DASHBOARD - PROFESSIONAL STYLING
   ============================================================================ */

/* Performance Summary - Clean Professional */
.performance-summary-clean {
  display: flex;
  gap: 1px;
  margin: 16px 0;
  background: #F8FAFC;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
}

.summary-metric {
  flex: 1;
  text-align: center;
  padding: 12px 16px;
  background: #FFFFFF;
  border-right: 1px solid #F1F5F9;
  transition: background-color 0.2s ease;
}

.summary-metric:last-child {
  border-right: none;
}

.summary-metric:hover {
  background: #FAFBFC;
}

.summary-metric.on-track { border-top: 3px solid #10B981; }
.summary-metric.at-risk { border-top: 3px solid #F59E0B; }
.summary-metric.behind { border-top: 3px solid #EF4444; }
.summary-metric.overall { border-top: 3px solid #3E4FE0; }

.summary-number {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #1E293B;
  line-height: 1;
  margin-bottom: 2px;
}

.summary-text {
  font-size: 11px;
  font-weight: 600;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ============================================================================
   RICH VISUAL DASHBOARD - MULTIPLE CHART TYPES (CLAUDIO'S REQUIREMENTS)
   ============================================================================ */

.visual-dashboard-grid {
  margin: 16px 0;
  gap: 16px;
}

/* Hero Metrics Row - Large Visual KPIs */
.hero-metrics-visual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.hero-kpi-visual {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.hero-chart {
  margin-bottom: 12px;
}

.hero-number {
  text-align: center;
  margin: 12px 0;
}

.big-number {
  font-size: 32px;
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1;
}

.big-number.good { color: #10B981; }
.big-number.warn { color: #F59E0B; }
.big-number.bad { color: #EF4444; }

.hero-details {
  text-align: center;
}

.kpi-name-hero {
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 8px;
}

.progress-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.progress-circle {
  background: #F8FAFC;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid;
}

.progress-circle.good { border-color: #10B981; color: #10B981; }
.progress-circle.warn { border-color: #F59E0B; color: #F59E0B; }
.progress-circle.bad { border-color: #EF4444; color: #EF4444; }

.target-text {
  font-size: 11px;
  color: #64748B;
  font-weight: 500;
}

/* Detailed KPIs with Multiple Chart Types */
.detailed-kpis-visual {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.visual-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
  position: relative;
}

.kpi-header-visual {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.kpi-name-large {
  font-size: 16px;
  font-weight: 700;
  color: #1E293B;
  flex: 1;
}

.current-value-large {
  text-align: right;
}

.value-big {
  font-size: 24px;
  font-weight: 700;
  font-family: var(--font-mono);
  display: block;
  line-height: 1;
  margin-bottom: 4px;
}

.value-big.good { color: #10B981; }
.value-big.warn { color: #F59E0B; }
.value-big.bad { color: #EF4444; }

.vs-target-inline {
  font-size: 11px;
  color: #64748B;
}

.text-green { color: #10B981; font-weight: 600; }
.text-yellow { color: #F59E0B; font-weight: 600; }
.text-red { color: #EF4444; font-weight: 600; }

.multi-chart-section {
  display: grid;
  grid-template-columns: 1fr 100px 80px;
  gap: 12px;
  margin-bottom: 12px;
}

.bar-chart-section {
  position: relative;
}

.chart-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  color: #94A3B8;
  margin-top: 4px;
}

.line-chart-section {
  background: #FAFBFC;
  border-radius: 4px;
  padding: 4px;
}

.gauge-section {
  text-align: center;
}

.circular-progress {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 8px;
}

.gauge-svg {
  width: 100%;
  height: 100%;
}

.gauge-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.gauge-percent {
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
}

.target-info {
  font-size: 9px;
  color: #64748B;
  font-weight: 500;
}

.kpi-footer-visual {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #F1F5F9;
  font-size: 10px;
}

.owner-tag {
  background: #F1F5F9;
  color: #64748B;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}

.fy-target-tag {
  color: #94A3B8;
  font-weight: 500;
}

/* Expandable Charts */
.expandable-chart {
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.expandable-chart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(62, 79, 224, 0.15);
}

.expand-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: 10px;
  color: #94A3B8;
  background: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.expandable-chart:hover .expand-hint {
  opacity: 1;
}

/* Performance Pie Chart */
.performance-pie-section {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
  margin-top: 24px;
}

.performance-pie-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1E293B;
  text-align: center;
}

.pie-summary {
  margin-top: 16px;
}

.pie-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #374151;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.legend-item.green .legend-color { background: #10B981; }
.legend-item.yellow .legend-color { background: #F59E0B; }
.legend-item.red .legend-color { background: #EF4444; }

.kpi-card-chart {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 16px;
  transition: all 0.15s ease;
  position: relative;
}

.kpi-card-chart:hover {
  border-color: #CBD5E1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.kpi-card-chart.good { border-left: 3px solid #10B981; }
.kpi-card-chart.warn { border-left: 3px solid #F59E0B; }
.kpi-card-chart.bad { border-left: 3px solid #EF4444; }

.kpi-header-chart {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.kpi-name-chart {
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
  line-height: 1.2;
  flex: 1;
}

.kpi-updated-chart {
  font-size: 9px;
  color: #94A3B8;
  font-weight: 500;
  background: #F8FAFC;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

.kpi-values-chart {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

.current-section {
  flex: 1;
}

.current-number {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-mono);
  color: #1E293B;
  display: block;
  line-height: 1;
  margin-bottom: 2px;
}

.current-number.good { color: #059669; }
.current-number.warn { color: #D97706; }
.current-number.bad { color: #DC2626; }

.current-label {
  font-size: 10px;
  color: #64748B;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.target-section {
  text-align: right;
}

.target-number {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: #64748B;
  display: block;
  line-height: 1;
  margin-bottom: 2px;
}

.target-label {
  font-size: 10px;
  color: #64748B;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.kpi-visual-section {
  margin: 12px 0;
}

.trend-line-chart {
  margin-bottom: 8px;
  background: #FAFBFC;
  border-radius: 4px;
  padding: 4px;
}

.progress-bar-section {
  margin-top: 8px;
}

.progress-bar {
  width: 100%;
  height: 4px;
  background: #E2E8F0;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}

.progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.progress-fill.good { background: #10B981; }
.progress-fill.warn { background: #F59E0B; }
.progress-fill.bad { background: #EF4444; }

.progress-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 9px;
}

.progress-pct {
  font-weight: 600;
  color: #374151;
}

.fy-target {
  color: #94A3B8;
  font-weight: 500;
}

.chart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  color: #64748B;
}

.vs-target-clean {
  font-weight: 600;
}

.year-target {
  color: #94A3B8;
  font-weight: 500;
}

.kpi-owner-chart {
  font-size: 10px;
  color: #94A3B8;
  font-weight: 500;
  padding-top: 8px;
  border-top: 1px solid #F1F5F9;
  text-align: right;
}

/* Strategic Deep Dives - Clean Professional */
.strategic-deep-dives {
  margin: 32px 0;
}

.deep-dives-header {
  margin-bottom: 16px;
}

.deep-dives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.deep-dive-card-clean {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 6px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  position: relative;
}

.deep-dive-card-clean:hover {
  border-color: #3E4FE0;
  box-shadow: 0 4px 12px rgba(62, 79, 224, 0.1);
  transform: translateY(-1px);
}

.deep-dive-card-clean::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: #3E4FE0;
  transform: scaleX(0);
  transition: transform 0.2s ease;
  transform-origin: left;
}

.deep-dive-card-clean:hover::after {
  transform: scaleX(1);
}

.dive-title-clean {
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 6px;
  line-height: 1.2;
}

.dive-subtitle-clean {
  font-size: 12px;
  color: #64748B;
  margin-bottom: 10px;
  line-height: 1.3;
}

.dive-metrics-clean {
  font-size: 10px;
  color: #94A3B8;
  font-weight: 500;
  border-top: 1px solid #F1F5F9;
  padding-top: 10px;
  line-height: 1.3;
}

/* Dashboard Timestamp - Clean */
.dashboard-timestamp {
  margin: 8px 0 16px 0;
  text-align: center;
  padding: 8px 16px;
  background: #F8FAFC;
  border-radius: 4px;
  border: 1px solid #F1F5F9;
}

.timestamp-main {
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 2px;
}

.timestamp-note {
  font-size: 10px;
  color: #64748B;
  font-weight: 500;
}

/* Structured Commentary */
.structured-commentary {
  background: #FAFBFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  padding: 16px;
  margin: 12px 0;
}

.commentary-section {
  margin-bottom: 12px;
}

.commentary-section:last-child {
  margin-bottom: 0;
}

.commentary-label {
  font-size: 11px;
  font-weight: 700;
  color: #4338CA;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.commentary-text {
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
}

/* Global overflow fix for random lines */
body {
  overflow-x: hidden;
}

#app {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

/* Responsive Design for Pillars and Deep Dive */
@media (max-width: 1200px) {
  .detailed-dive-grid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 28px;
  }

  .detailed-dive-stack {
    gap: 24px;
  }
}

@media (max-width: 1200px) {
  .pillar-boxes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 1024px) {
  .pillar-boxes-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .deep-dive-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
  }

  .detailed-dive-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .detailed-dive-stack {
    gap: 20px;
  }

  .detailed-dive-card,
  .interactive-dive-card {
    padding: 24px;
  }

  .key-metrics {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dive-controls {
    flex-direction: column;
    gap: 16px;
  }

  .control-group {
    flex-direction: row;
    align-items: center;
    gap: 12px;
  }

  .control-group label {
    min-width: 80px;
    margin-bottom: 0;
  }
}

@media (max-width: 768px) {
  .pillar-boxes-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pillar-header {
    gap: 12px;
  }

  .pillar-icon {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .deep-dive-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .deep-dive-box {
    padding: 20px;
  }

  .detailed-dive-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .detailed-dive-stack {
    gap: 16px;
  }

  .detailed-dive-card,
  .interactive-dive-card {
    padding: 20px;
  }

  .dive-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .dive-card-header .dive-icon {
    margin-left: 0;
    align-self: flex-end;
  }

  .dive-controls {
    padding: 12px;
    gap: 12px;
  }

  .control-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .control-group label {
    min-width: auto;
  }

  .control-group select {
    min-width: 100%;
  }

  .chart-bar-row {
    gap: 12px;
  }

  .bar-label {
    min-width: 100px;
    font-size: 12px;
  }

  .bar-value {
    min-width: 60px;
    font-size: 12px;
  }

  .chart-title-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .region-name {
    min-width: 70px;
    font-size: 11px;
  }

  .metric-value {
    font-size: 24px;
  }

  .qualitative-insight {
    padding: 12px 16px;
    font-size: 12px;
  }
}

/* Enhanced Total Summary and Regional Targets */
.total-metric-header {
  margin-bottom: 16px;
}

.total-title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  color: #1E40AF;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.total-metrics-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 12px;
}

.total-actual,
.total-target {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.total-vs {
  font-size: 16px;
  font-weight: 600;
  color: #6B7280;
  padding: 0 8px;
}

.dummy-data-note {
  text-align: center;
  padding-top: 12px;
  border-top: 1px solid #BFDBFE;
}

.dummy-data-note small {
  font-size: 11px;
  color: #9CA3AF;
  font-style: italic;
}

.bar-metrics {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 140px;
}

.bar-actual,
.bar-target-display {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.metric-label {
  font-weight: 600;
  color: #6B7280;
  font-size: 11px;
}

.metric-value {
  font-weight: 700;
  color: #374151;
  font-family: var(--font-mono);
  font-size: 12px;
}

.dummy-indicator {
  color: #F59E0B;
  font-weight: 700;
  font-size: 10px;
}

/* Professional Interactive Charts */
.interactive-chart-professional {
  margin: 16px 0;
  padding: 16px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.interactive-chart-professional .recharts-cartesian-grid-horizontal line,
.interactive-chart-professional .recharts-cartesian-grid-vertical line {
  stroke-opacity: 0.3;
}

.interactive-chart-professional .recharts-bar {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.interactive-chart-professional .recharts-bar:hover {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

/* Clean Chart Improvements */
.hero-chart {
  margin-bottom: 8px;
}

.hero-chart .recharts-bar {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

.visual-chart {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 6px;
  padding: 4px;
  margin-bottom: 8px;
}

.visual-chart .recharts-bar {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}

.visual-chart .recharts-cartesian-grid line {
  stroke: #e2e8f0;
  stroke-opacity: 0.3;
}

/* Remove click cursor since we removed click handlers */
.hero-kpi-visual, .visual-kpi-card {
  cursor: default !important;
}

.expandable-chart {
  cursor: default !important;
}

/* Better KPI card styling */
.hero-kpi-visual {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-kpi-visual:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.visual-kpi-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.visual-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Clean number formatting */
.big-number {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  line-height: 1.1;
}

.kpi-number-large {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  line-height: 1.1;
}

/* ---- Strategic Pillars Dashboard Layout ----------------------------------- */
.strategic-pillars-dashboard {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
}

.strategic-pillar-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
  transition: all 0.2s ease;
}

.strategic-pillar-section:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  border-color: var(--border-accent);
}

.pillar-header {
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.pillar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 8px;
}

.pillar-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}

.pillar-health-badge {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: auto;
  flex-shrink: 0;
}

.pillar-health-badge.good {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.pillar-health-badge.warn {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.pillar-health-badge.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.pillar-subtitle {
  font-size: 14px;
  color: var(--fg-muted);
  font-style: italic;
}

.pillar-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.pillar-kpi-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.pillar-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  border-color: var(--yuno-blue);
  background: var(--bg);
}

.kpi-header-enhanced {
  margin-bottom: 16px;
}

.kpi-name-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 8px;
}

.kpi-current-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.value-primary {
  font-size: 24px;
  font-weight: 700;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.value-primary.good { color: #059669; }
.value-primary.warn { color: #D97706; }
.value-primary.danger { color: #DC2626; }

.value-unit {
  font-size: 14px;
  color: var(--fg-muted);
  font-weight: 500;
}

.kpi-target-comparison {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.target-label {
  color: var(--fg-muted);
}

.performance-delta {
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
}

.performance-delta.good {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.performance-delta.warn {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}

.performance-delta.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

.kpi-chart-enhanced {
  margin: 16px 0;
}

.chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.chart-legend {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 8px;
  font-size: 11px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.actual {
  background: #3E4FE0;
}

.legend-color.target {
  background: #E2E8F0;
}

.legend-text {
  color: var(--fg-muted);
  font-weight: 500;
}

.kpi-footer-enhanced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--fg-muted);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 16px;
}

.kpi-owner {
  font-weight: 500;
}

.kpi-fy-target {
  font-weight: 500;
}

.kpi-health-indicator {
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.kpi-health-indicator.good {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.kpi-health-indicator.warn {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}

.kpi-health-indicator.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

/* Strategic Pillar Dashboard Styling */
.strategic-pillars-dashboard {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 24px;
}

.strategic-pillar-section {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.pillar-header {
  margin-bottom: 20px;
}

.pillar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pillar-name {
  font-size: 20px;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}

.pillar-health-badge {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

.pillar-health-badge.good { background: #DCFCE7; color: #166534; }
.pillar-health-badge.warn { background: #FEF3C7; color: #92400E; }
.pillar-health-badge.danger { background: #FEE2E2; color: #991B1B; }

.pillar-subtitle {
  color: #64748B;
  font-size: 14px;
  line-height: 1.5;
}

.pillar-kpis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: stretch;
}

.pillar-kpi-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
  position: relative;
  overflow: hidden;
}

.pillar-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  border-color: #3E4FE0;
  background: #FFFFFF;
}

/* Removed click to expand overlay - cards are already clickable */
/* .pillar-kpi-card:hover::after {
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  z-index: 10;
} */

.kpi-header-enhanced {
  margin-bottom: 12px;
}

.kpi-name-title {
  font-size: 16px;
  font-weight: 600;
  color: #1E293B;
  margin-bottom: 8px;
}

.kpi-current-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.value-primary {
  font-size: 24px;
  font-weight: 700;
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
}

.value-primary.good { color: #059669; }
.value-primary.warn { color: #D97706; }
.value-primary.danger { color: #DC2626; }

.value-unit {
  font-size: 14px;
  color: #64748B;
  font-weight: 500;
}

.kpi-target-comparison {
  display: flex;
  align-items: center;
  gap: 8px;
}

.target-label {
  font-size: 13px;
  color: #64748B;
}

.performance-delta {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
}

.performance-delta.good { background: #DCFCE7; color: #166534; }
.performance-delta.warn { background: #FEF3C7; color: #92400E; }
.performance-delta.danger { background: #FEE2E2; color: #991B1B; }

/* ---- UNIFIED KPI CARD STYLING FOR CONSISTENCY ---- */

/* Ensure all pillar-kpi-card instances have consistent styling */
.pillar-kpi-card {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 12px !important;
  padding: 20px !important;
  transition: all 0.2s ease !important;
  min-height: 200px !important;
  max-height: 200px !important;
  height: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  position: relative !important;
  overflow: visible !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  min-height: 200px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
  position: relative !important;
}

.pillar-kpi-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
  border-color: #3E4FE0 !important;
  background: var(--bg) !important;
}

/* Unified spacing for KPI card content */
.pillar-kpi-card .kpi-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

/* Universal KPI title styling for all card types */
.pillar-kpi-card .kpi-name,
.kpi-card .kpi-name,
[class*="kpi-card"] .kpi-name,
[class*="kpi"] .kpi-name,
.kpi-name-title,
.kpi-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--fg) !important;
  line-height: 1.25 !important;
  margin-bottom: 12px !important;
  padding: 0 8px !important;
  text-align: center !important;
  white-space: normal !important;
  overflow: visible !important;
  word-wrap: break-word !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 32px !important;
  max-height: 50px !important; /* Limit to prevent taking too much space */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.pillar-kpi-card .kpi-value {
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--fg) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  font-variant-numeric: tabular-nums !important;
  margin-bottom: 6px !important;
}

.pillar-kpi-card .kpi-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 12px !important;
  margin-bottom: 8px !important;
  color: var(--fg-muted) !important;
}

.pillar-kpi-card .kpi-delta {
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
}

.pillar-kpi-card .kpi-spark {
  margin-top: auto !important;
  height: 36px !important;
  margin-left: -4px !important;
  margin-right: -4px !important;
}

/* Grid spacing for both views */
.strategic-kpis-grid,
.dept-overview-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
  margin: 24px 0 !important;
  align-items: stretch !important;
}

/* Responsive grid adjustments */
@media (min-width: 1200px) {
  .strategic-kpis-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (min-width: 1600px) {
  .strategic-kpis-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

.kpi-chart-enhanced {
  margin: 16px 0;
}

.chart-title {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 8px;
  text-align: center;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #64748B;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.actual { background: #3E4FE0; }
.legend-color.target { background: #E2E8F0; }

.kpi-footer-enhanced {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid #E2E8F0;
  font-size: 12px;
  color: #64748B;
  min-height: 24px; /* Ensure consistent height */
}

.kpi-health-indicator {
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.kpi-health-indicator.good {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.kpi-health-indicator.warn {
  background: rgba(245, 158, 11, 0.1);
  color: #D97706;
}

.kpi-health-indicator.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

/* Performance Summary Clean */
.performance-summary-clean {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin: 24px 0;
  padding: 20px;
  background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
  border-radius: 16px;
  border: 1px solid #E2E8F0;
}

.summary-metric {
  text-align: center;
  padding: 12px 20px;
  border-radius: 12px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

.summary-number {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}

.summary-metric.on-track .summary-number { color: #059669; }
.summary-metric.at-risk .summary-number { color: #D97706; }
.summary-metric.behind .summary-number { color: #DC2626; }
.summary-metric.overall .summary-number { color: #3E4FE0; }

.summary-text {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748B;
}

/* Strategic Pillar Performance Section Headers */
.title-section {
  font-size: 24px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 8px 0;
  font-family: var(--font-display);
}

.subtitle-executive {
  font-size: 14px;
  color: #64748B;
  margin: 0 0 24px 0;
  text-align: center;
}

.main-chart-section {
  margin: 16px 0;
}

.chart-header {
  text-align: center;
  margin-bottom: 16px;
}

/* Strategic Deep Dives - Panel Components */
.dive-panel-header {
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E2E8F0;
}

.dive-panel-header h3.dive-title-clean {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
}

.period-label {
  font-size: 10px;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
}

.performance-summary-header {
  margin: 16px 0;
  padding: 12px;
  background: #F8FAFC;
  border-radius: 6px;
  border: 1px solid #E2E8F0;
}

.summary-title {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  text-align: center;
}

.summary-metrics {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.summary-actual, .summary-target {
  text-align: center;
}

.summary-actual .label, .summary-target .label {
  font-size: 10px;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.summary-actual .value, .summary-target .value {
  font-size: 16px;
  font-weight: 700;
  color: #3E4FE0;
}

.vs-separator {
  font-size: 10px;
  color: #94A3B8;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.regional-breakdown, .metrics-breakdown {
  margin: 12px 0;
}

.region-row, .metric-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 0;
}

.region-label, .metric-label {
  font-size: 10px;
  font-weight: 600;
  color: #475569;
  min-width: 60px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.region-bar, .metric-bar {
  flex: 1;
  height: 6px;
  background: #F1F5F9;
  border-radius: 3px;
  overflow: hidden;
  max-width: 80px;
}

.bar-fill {
  height: 100%;
  background: #3E4FE0;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.region-metrics, .metric-values {
  font-size: 9px;
  color: #64748B;
  min-width: 80px;
  text-align: right;
}

.actual-value, .current {
  font-weight: 600;
  color: #1E293B;
}

.target-value, .target {
  color: #64748B;
  margin-top: 1px;
}

.key-driver {
  margin-top: 12px;
  padding: 8px;
  background: #F8FAFC;
  border-radius: 4px;
  border-left: 3px solid #3E4FE0;
  font-size: 10px;
  line-height: 1.4;
  color: #475569;
}

.key-driver strong {
  color: #1E293B;
}

/* Collapsible Sidebar Styles */
.sidebar.collapsed {
  width: 70px;
}



.sidebar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.main-content {
  transition: margin-left 0.3s ease;
}

.sidebar {
  transition: width 0.3s ease;
}

/* Sidebar toggle button styling */
.sidebar-toggle {
  transition: background-color 0.2s ease, transform 0.2s ease !important;
  border: none !important;
  background: none !important;
  cursor: pointer !important;
}

.sidebar-toggle:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
  transform: scale(1.05) !important;
}

.sidebar {
  flex-shrink: 0;
  overflow-x: hidden !important;
}

/* COMPREHENSIVE: Force ALL card types to uniform height */
.strategic-kpis-grid > *,
.strategic-kpis-grid .pillar-kpi-card,
.strategic-kpis-grid .kpi-card,
.pillar-kpis-grid > *,
.pillar-kpis-grid .pillar-kpi-card,
.teams-overview .strategic-kpis-grid > *,
.teams-overview .pillar-kpi-card,
.overview-content .pillar-kpi-card,
[class*="kpi-card"],
[class*="pillar-kpi"] {
  height: 220px !important;
  min-height: 220px !important;
  max-height: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  padding: 20px !important;
  position: relative !important;
}

/* KPI Value and content styling within fixed height cards */
.pillar-kpi-card .kpi-value,
.kpi-card .kpi-value,
[class*="kpi-card"] .kpi-value {
  font-size: 22px !important;
  font-weight: 700 !important;
  text-align: center !important;
  margin: 8px 0 !important;
  flex-grow: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Target and progress info styling */
.pillar-kpi-card .target-info,
.pillar-kpi-card .progress-info,
.kpi-card .target-info,
.kpi-card .progress-info {
  font-size: 11px !important;
  text-align: center !important;
  margin-top: auto !important;
  line-height: 1.2 !important;
}

/* TEAMS PAGE: Reduce content sizes to prevent overflow */
.teams-overview .kpi-name-title {
  font-size: 14px !important;
  margin-bottom: 12px !important;
  line-height: 1.2 !important;
}

.teams-overview .value-primary {
  font-size: 20px !important;
}

.teams-overview .trend-arrow {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  overflow: visible !important;
  margin-left: 8px !important;
  vertical-align: middle !important;
}

/* Ensure KPI cards don't clip arrows */
.pillar-kpi-card {
  overflow: visible !important;
}

.pillar-kpi-card .value-primary {
  overflow: visible !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Force arrow visibility in all KPI card types */
[class*="kpi-card"] svg,
.pillar-kpi-card svg,
.trend-arrow,
svg.trend-arrow {
  visibility: visible !important;
  display: inline-block !important;
  overflow: visible !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
}

/* SVG Arrow improvements - ensure they display properly */
svg.sort-ind,
svg.caret,
svg.trend-arrow,
.conv-arrow svg,
.lh-arrow svg,
.trend-arrow {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
  overflow: visible !important;
  pointer-events: none !important;
}

.sort-ind {
  opacity: 0.6 !important;
  transition: transform 0.2s ease !important;
}

.caret {
  opacity: 0.5 !important;
  transition: transform 0.2s ease !important;
}

/* Fix table header arrow spacing */
th .sort-ind {
  margin-left: 6px !important;
  vertical-align: middle !important;
}

/* Fix filter caret alignment */
.filter-chip .caret {
  margin-left: 6px !important;
}

.teams-overview .pillar-kpi-card > div {
  margin-bottom: 8px !important;
}

/* Teams dropdown positioning fix to prevent upward opening */
.teams-overview select {
  position: relative !important;
  z-index: 10 !important;
}

/* Force all dropdowns to open downward and stay within viewport */
.department-filter,
.teams-overview select,
select {
  /* Ensure dropdown always opens downward */
  transform-origin: top center !important;
  /* Force appearance to prevent automatic positioning */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  /* Add dropdown arrow */
  background-image: url("data:image/svg+xml,%3csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
}

/* Department filter specific positioning */
.department-filter-container {
  position: relative !important;
  z-index: 1000 !important;
  margin-bottom: 16px !important; /* Reduced spacing for dropdown */
}

/* Force teams dropdown to always open downward */
.teams-overview select {
  position: relative !important;
  z-index: 1000 !important;
  /* Force dropdown direction */
  direction: ltr !important;
}

/* Comprehensive dropdown positioning fix */
select {
  /* Force downward opening by ensuring sufficient space */
  margin-bottom: 20px !important;
}

/* Override for specific dropdowns that should stay close to content */
.teams-overview .strategic-kpis-grid {
  margin-top: 20px !important; /* Reduced space between dropdown and cards */
}

/* Ensure dropdown stays in viewport */
select:focus {
  position: relative !important;
  z-index: 9999 !important;
}

.department-filter {
  position: relative !important;
  /* Ensure dropdown options appear below the select */
  overflow: visible !important;
}

/* Ensure teams page container provides proper spacing for dropdown */
.teams-overview {
  padding-top: 20px !important;
  padding-bottom: 40px !important; /* Reduced bottom padding */
  min-height: auto !important;
}

/* Additional fix for Teams page dropdown */
.teams-overview .content,
.teams-overview {
  overflow: visible !important;
}

.teams-overview .page-header {
  margin-top: 0px !important;
  margin-bottom: 12px !important;
}

/* Reduce spacing between filter and KPI cards */
.teams-overview .department-filter-container {
  margin-bottom: 16px !important;
}

/* Ensure KPI cards start closer to the filter */
.teams-overview .overview-content {
  margin-top: 0px !important;
  margin-bottom: 12px !important;
}

/* Compact spacing for teams page filter section */
.teams-overview .filter-section {
  margin-bottom: 20px !important;
}

/* Global dropdown positioning fix - prevent any select from opening upward */
select:focus {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  z-index: 999 !important;
}

/* Force dropdown to stay within viewport bounds */
select option {
  position: relative !important;
}

/* Prevent select dropdowns from extending beyond viewport */
select {
  max-height: 200px !important;
  overflow-y: auto !important;
}

/* Ensure page has minimum height so dropdowns always have space below */
.app-container,
.teams-overview,
body {
  min-height: calc(100vh + 300px) !important;
}

/* Viewport constraint fix - ensure dropdown containers don't overflow */
.page-header,
.department-filter-container {
  overflow: visible !important;
  position: relative !important;
  contain: none !important;
}

/* ============================================================================
   Executive Overview — Pattern A structure
   Pillar header + headline metric paired in a single "KEY METRICS" panel,
   with a quarter/month period selector above.
   ============================================================================ */
.exec-overview { padding: 4px 0 16px; }

.exec-overview-topbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.exec-overview-period { display: flex; flex-direction: column; gap: 8px; }
.exec-overview-period-row {
  display: inline-flex;
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 4px;
  gap: 2px;
}
.exec-overview-period-btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 12px; font-weight: 600;
  color: #64748B;
  cursor: pointer;
  transition: all 0.15s;
  min-width: 56px;
  font-family: inherit;
}
.exec-overview-period-btn:hover { background: #F8FAFC; color: #1E293B; }
.exec-overview-period-btn.active {
  background: #3E4FE0; color: white;
  box-shadow: 0 2px 6px rgba(62,79,224,0.2);
}
.exec-overview-period-row.month .exec-overview-period-btn { font-weight: 500; min-width: 56px; }
.exec-overview-period-row.month .exec-overview-period-btn.active {
  background: rgba(62,79,224,0.1);
  color: #3E4FE0;
  box-shadow: none;
}
.exec-overview-period-current {
  font-size: 11px; color: #94A3B8;
  font-weight: 500; letter-spacing: 0.02em; margin-top: 4px;
}
.exec-overview-period-current strong { color: #64748B; font-weight: 600; }
.exec-overview-current-tag {
  font-size: 8px; font-weight: 700;
  color: #10B981;
  margin-left: 4px;
  letter-spacing: 0.04em;
}

/* KEY METRICS panel — 4 pillar + headline-metric columns */
.exec-overview-summary {
  background: rgba(62, 79, 224, 0.04);
  border: 1px solid rgba(62, 79, 224, 0.18);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 44px;
  box-shadow: 0 4px 14px rgba(62, 79, 224, 0.06);
  position: relative;
}
.exec-overview-summary::before {
  content: 'KEY METRICS';
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 12px;
  font-size: 10px; font-weight: 600;
  color: #64748B;
  letter-spacing: 0.12em;
  background: #FFFFFF;
  border: 1px solid rgba(62, 79, 224, 0.18);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.exec-overview-summary::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -22px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(15,23,42,0.08) 20%, rgba(15,23,42,0.08) 80%, transparent);
}
.exec-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.exec-overview-col {
  padding: 6px 14px;
  border-right: 1px solid rgba(62, 79, 224, 0.08);
  display: flex; flex-direction: column;
}
.exec-overview-col:last-child  { border-right: none; padding-right: 6px; }
.exec-overview-col:first-child { padding-left: 6px; }

.exec-overview-pillar {
  display: flex; gap: 8px; align-items: flex-start;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(62, 79, 224, 0.18);
}
.exec-overview-pillar-tag {
  margin-top: 2px;
  flex-shrink: 0;
  background: rgba(62,79,224,0.06);
  border: 1px solid rgba(62,79,224,0.18);
  color: #64748B;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
}
.exec-overview-pillar-title {
  font-size: 11px; font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.exec-overview-hero-tile {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: all 0.15s;
}
.exec-overview-hero-tile:hover {
  border-color: #C7D2FE;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.exec-overview-hero-name {
  font-size: 10px; color: #64748B;
  font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.exec-overview-hero-value {
  font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.exec-overview-hero-value.good { color: #10B981; }
.exec-overview-hero-value.warn { color: #F59E0B; }
.exec-overview-hero-value.bad  { color: #DC2626; }
.exec-overview-hero-pct {
  font-size: 10px; font-weight: 600;
  margin-top: 4px;
}
.exec-overview-hero-pct.good { color: #10B981; }
.exec-overview-hero-pct.warn { color: #F59E0B; }
.exec-overview-hero-pct.bad  { color: #DC2626; }

/* Pillar group below the KEY METRICS panel */
.exec-overview-pillar-group {
  margin-bottom: 32px;
  padding-top: 12px;
  border-top: 1px dashed #E2E8F0;
}
.exec-overview-pillar-group .pgh {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  padding-bottom: 6px;
}
.exec-overview-pillar-group .pgh-tag {
  background: rgba(62,79,224,0.06);
  border: 1px solid rgba(62,79,224,0.18);
  color: #64748B;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
}
.exec-overview-pillar-group .pgh-name {
  font-size: 12px; color: #475569;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.exec-overview-pillar-group.pulse {
  animation: execOverviewPulse 1.5s ease-out;
  border-radius: 12px;
  padding: 12px;
  margin-left: -12px;
  margin-right: -12px;
}

/* Focus mode — when a strategic KPI is active, dim non-active pillar groups */
.exec-overview-pillar-group {
  transition: opacity 0.25s ease, max-height 0.3s ease, margin 0.25s ease, padding 0.25s ease, transform 0.25s ease;
}
.exec-overview-pillar-group.is-active {
  border-top-color: rgba(62,79,224,0.35);
}
.exec-overview-pillar-group.is-active .pgh-tag {
  background: rgba(62,79,224,0.12);
  border-color: rgba(62,79,224,0.32);
  color: #3E4FE0;
}
.exec-overview-pillar-group.is-active .pgh-name { color: #1E293B; }
.exec-overview-pillar-group.is-dimmed {
  opacity: 0.55;
  max-height: 44px;
  overflow: hidden;
  margin-bottom: 8px;
  padding-top: 8px;
  border-top-style: solid;
  border-top-color: #F1F5F9;
}
.exec-overview-pillar-group.is-dimmed:hover { opacity: 0.85; }
.exec-overview-pillar-group.is-dimmed .strategic-kpis-grid {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.2s;
}
.exec-overview-pillar-group.is-dimmed .pgh {
  cursor: pointer;
  margin-bottom: 0;
}
.exec-overview-pillar-group .pgh-hint {
  margin-left: auto;
  font-size: 10px;
  font-weight: 500;
  color: #94A3B8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@keyframes execOverviewPulse {
  0%   { background: rgba(62,79,224,0); }
  25%  { background: rgba(62,79,224,0.06); }
  100% { background: rgba(62,79,224,0); }
}

@media (max-width: 1100px) {
  .exec-overview-grid { grid-template-columns: repeat(2, 1fr); gap: 4px; }
  .exec-overview-col { border-right: none; border-bottom: 1px solid rgba(62,79,224,0.08); padding: 12px 6px; }
  .exec-overview-col:nth-last-child(-n+2) { border-bottom: none; }
}

/* In the executive overview, let cards reflow when cascade panels open */
.exec-overview .strategic-kpis-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  gap: 14px !important;
  margin-bottom: 24px !important;
}

/* Compact top period selector (single row, no caption) */
.exec-overview-topbar.compact {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

/* Stacked period selector — quarter pill row on top, months row below (compact, mock-up accurate) */
.exec-overview-topbar.stacked {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
  align-items: flex-start;
  max-width: 360px;
}
.exec-overview-topbar.stacked .exec-overview-period-row {
  display: flex;
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  box-sizing: border-box;
}
.exec-overview-topbar.stacked .exec-overview-period-row.month { padding: 3px; }
.exec-overview-topbar.stacked .exec-overview-period-btn {
  flex: 1;
  padding: 5px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #94A3B8;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  text-align: center;
  min-width: 0;
}
.exec-overview-topbar.stacked .exec-overview-period-btn.month {
  font-weight: 500;
  color: #64748B;
}
.exec-overview-topbar.stacked .exec-overview-period-btn:hover {
  background: #F8FAFC;
  color: #1E293B;
}
.exec-overview-topbar.stacked .exec-overview-period-btn.quarter.active {
  background: #3E4FE0;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(62,79,224,0.22);
  font-weight: 700;
}
.exec-overview-topbar.stacked .exec-overview-period-btn.month.active {
  background: rgba(62,79,224,0.10);
  color: #3E4FE0;
  font-weight: 700;
}

/* ============================================================================
   KEY METRICS — wrapping panel with floating "KEY METRICS" pill label.
   4 anchor columns separated by dashed dividers; each column = pillar header
   on top + hero metric tile on bottom. Sentiment ('good'|'warn'|'bad'|'neutral')
   on .exec-overview-anchor drives the value color and a status accent.
   ============================================================================ */
.exec-overview-key-metrics {
  background: rgba(62, 79, 224, 0.04);
  border: 1px solid rgba(62, 79, 224, 0.18);
  border-radius: 14px;
  padding: 18px 16px;
  margin-bottom: 44px;
  box-shadow: 0 4px 14px rgba(62, 79, 224, 0.06);
  position: relative;
}
.exec-overview-key-metrics::before {
  content: 'KEY METRICS';
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 12px;
  font-size: 10px; font-weight: 700;
  color: #64748B;
  letter-spacing: 0.12em;
  background: #FFFFFF;
  border: 1px solid rgba(62, 79, 224, 0.18);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  white-space: nowrap;
}
.exec-overview-anchors {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.exec-overview-anchor {
  padding: 6px 14px;
  border-right: 1px dashed rgba(62, 79, 224, 0.18);
  display: flex; flex-direction: column;
  position: relative;
  cursor: pointer;
}
.exec-overview-anchor:last-child { border-right: none; }
.exec-overview-anchor:first-child { padding-left: 6px; }
.exec-overview-anchor:last-child  { padding-right: 6px; }

/* Top: pillar header */
.exec-overview-anchor-pillar {
  display: flex; gap: 8px; align-items: flex-start;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(62, 79, 224, 0.18);
}
.exec-overview-anchor-tag {
  margin-top: 2px;
  flex-shrink: 0;
  background: rgba(62,79,224,0.06);
  border: 1px solid rgba(62,79,224,0.18);
  color: #64748B;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
}
.exec-overview-anchor-title {
  font-size: 11px; font-weight: 700;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.3;
  min-width: 0;
}

/* Bottom: hero metric tile (white card so it feels clickable) */
.exec-overview-anchor-tile {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.exec-overview-anchor:hover .exec-overview-anchor-tile {
  border-color: #C7D2FE;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.exec-overview-anchor-name {
  font-size: 10px; font-weight: 600;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.exec-overview-anchor-value {
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.exec-overview-anchor-fy {
  font-size: 10px; font-weight: 600;
  color: #94A3B8;
  letter-spacing: 0.04em;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.exec-overview-anchor-fy.is-pending {
  color: #B45309;
  font-style: italic;
}

/* Q2-progress row on the L1/L2 detail panels (April view).
   "Q2 target  $27.1M   −9% vs Q2" — single row, badge tinted by status. */
.exec-overview-cascade .panel-q2-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.exec-overview-cascade .panel-q2-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #64748B;
  text-transform: uppercase;
}
.exec-overview-cascade .panel-q2-value {
  font-weight: 700;
  color: #0F172A;
}
.exec-overview-cascade .panel-q2-pct {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.exec-overview-cascade .panel-q2-row.is-pending {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
}

/* Trend area chart shown in detail panels — solid status-colored actual + dashed gray
   ideal trajectory + inline legend in the top-right. */
.exec-overview-cascade .kpi-trend-area {
  position: relative;
  margin-top: 14px;
  padding: 6px 4px 4px;
}
.exec-overview-cascade .kpi-trend-area svg {
  display: block;
  width: 100%;
  height: 150px;
}
.exec-overview-cascade .kpi-trend-area-x {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px 0;
  font-size: 9px;
  font-weight: 600;
  color: #94A3B8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.exec-overview-cascade .kpi-trend-area-tick.is-actual {
  color: #0F172A;
}

/* Top-right legend overlaid on the chart */
.exec-overview-cascade .kpi-trend-legend,
.exec-overview-cascade .kdd-trend-legend {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 10px;
  font-size: 9px;
  font-weight: 600;
  color: #64748B;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.exec-overview-cascade .kpi-trend-legend-item,
.exec-overview-cascade .kdd-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.exec-overview-cascade .kpi-trend-swatch,
.exec-overview-cascade .kdd-trend-swatch {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: #1E293B;
}
/* Option D swatches: weight + dash style mirror the SVG line treatments. */
.exec-overview-cascade .kpi-trend-swatch.solid-thick,
.exec-overview-cascade .kdd-trend-swatch.solid-thick {
  height: 3px;
}
/* Dashed swatch in status color — uses --c custom prop. Replaces the older
   gray .dashed swatch (now used by Ideal pace below in dotted-gray form). */
.exec-overview-cascade .kpi-trend-swatch.dashed-color,
.exec-overview-cascade .kdd-trend-swatch.dashed-color {
  background-image: linear-gradient(to right,
    var(--c, #1E293B) 0 6px, transparent 6px 10px,
    var(--c, #1E293B) 10px 14px);
  background-color: transparent;
  height: 2px;
}
/* Dotted gray — Ideal pace */
.exec-overview-cascade .kpi-trend-swatch.dotted-gray,
.exec-overview-cascade .kdd-trend-swatch.dotted-gray {
  background-image: radial-gradient(circle, #94A3B8 0.9px, transparent 1.1px);
  background-size: 4px 1.5px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-color: transparent;
  height: 1.5px;
  opacity: 0.85;
}
/* Legacy classes kept for safety in case other call-sites still reference them. */
.exec-overview-cascade .kpi-trend-swatch.dashed,
.exec-overview-cascade .kdd-trend-swatch.dashed {
  background-image: linear-gradient(to right, #9CA3AF 0 4px, transparent 4px 7px, #9CA3AF 7px 11px, transparent 11px 14px);
  background-color: transparent;
  height: 2px;
}
.exec-overview-cascade .kpi-trend-swatch.dotted {
  background-image: radial-gradient(circle, var(--c, #1E293B) 1px, transparent 1.2px);
  background-size: 4px 2px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-color: transparent;
  height: 2px;
}

/* TREND + DRIVERS captions below the trend chart */
.exec-overview-cascade .kpi-trend-meta {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.exec-overview-cascade .kpi-trend-meta-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
}
.exec-overview-cascade .kpi-trend-meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94A3B8;
  text-transform: uppercase;
  min-width: 60px;
}
.exec-overview-cascade .kpi-trend-meta-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #1E293B;
  background: transparent;
}
.exec-overview-cascade .kpi-trend-meta-value.muted { color: #94A3B8; font-weight: 500; background: transparent; }
/* Override the global .status-* background rules so only the text is colored, no fill block. */
.exec-overview-cascade .kpi-trend-meta-value.status-good { color: #10B981; background: transparent; }
.exec-overview-cascade .kpi-trend-meta-value.status-warn { color: #F59E0B; background: transparent; }
.exec-overview-cascade .kpi-trend-meta-value.status-bad  { color: #DC2626; background: transparent; }

/* KpiDrillDown deep dive — April-only context block (target rows + trajectory chart). */
.kdd-apr-context {
  margin-top: 14px;
  padding: 12px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}
.kdd-apr-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 4px 0;
}
.kdd-apr-row.is-pending { color: #B45309; }
.kdd-apr-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #64748B;
  text-transform: uppercase;
  min-width: 88px;
}
.kdd-apr-value {
  font-weight: 700;
  color: #0F172A;
}
.kdd-apr-pct {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.02em;
}
.kdd-apr-pct.status-good     { background: #ECFDF5; color: #10B981; }
.kdd-apr-pct.status-warn     { background: #FFFBEB; color: #F59E0B; }
.kdd-apr-pct.status-bad      { background: #FEF2F2; color: #DC2626; }
.kdd-apr-pct.status-neutral  { background: #F1F5F9; color: #64748B; }

.kdd-trend {
  position: relative;
  margin-top: 12px;
  padding: 6px 4px 4px;
}
.kdd-trend svg {
  display: block;
  width: 100%;
  height: 150px;
}
/* Top-right legend overlaid on the chart (mirrors .kpi-trend-legend) */
.kdd-trend-legend {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 10px;
  font-size: 9px;
  font-weight: 600;
  color: #64748B;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kdd-trend-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.kdd-trend-swatch {
  display: inline-block;
  width: 14px;
  height: 2px;
  border-radius: 1px;
  background: #1E293B;
}
/* Option D swatches (non-cascade scope) */
.kdd-trend-swatch.solid-thick { height: 3px; }
.kdd-trend-swatch.dashed-color {
  background-image: linear-gradient(to right,
    var(--c, #1E293B) 0 6px, transparent 6px 10px,
    var(--c, #1E293B) 10px 14px);
  background-color: transparent;
  height: 2px;
}
.kdd-trend-swatch.dotted-gray {
  background-image: radial-gradient(circle, #94A3B8 0.9px, transparent 1.1px);
  background-size: 4px 1.5px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-color: transparent;
  height: 1.5px;
  opacity: 0.85;
}
/* Legacy fallbacks */
.kdd-trend-swatch.dashed {
  background-image: linear-gradient(to right, #9CA3AF 0 4px, transparent 4px 7px, #9CA3AF 7px 11px, transparent 11px 14px);
  background-color: transparent;
}
.kdd-trend-swatch.dotted {
  background-image: radial-gradient(circle, currentColor 1px, transparent 1.2px);
  background-size: 4px 2px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-color: transparent;
  color: #1E293B;
  height: 2px;
}
/* TREND + DRIVERS captions */
.kdd-trend-meta {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kdd-trend-meta-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 11px;
}
.kdd-trend-meta-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #94A3B8;
  text-transform: uppercase;
  min-width: 60px;
}
.kdd-trend-meta-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  background: transparent;
}
.kdd-trend-meta-value.muted { color: #94A3B8; font-weight: 500; background: transparent; }
.kdd-trend-x {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px 0;
  font-size: 9px;
  font-weight: 600;
  color: #94A3B8;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.kdd-trend-tick.is-actual { color: #0F172A; }

/* Hero pct badge label is now "+X% vs target" — adjust to inline */
.kdd-hero-pct {
  white-space: nowrap;
}

/* Variance pill subtitle on anchor cards — replaces the gauge / Q2 row.
   The %  itself is tinted by status, the descriptive label sits next to it in muted gray. */
.exec-overview-anchor-vs {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.exec-overview-anchor-vs.muted { color: #94A3B8; }
.exec-overview-anchor-vs-pct {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.exec-overview-anchor-vs-label {
  color: #64748B;
  font-weight: 500;
}

/* Strategic / pillar KPI card (March variant, no arrows, no FY-target row) */
.march-card {
  background: white;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 30px 16px 32px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  display: flex; flex-direction: column;
  min-height: 168px;
}
.march-card:hover {
  border-color: #C7D2FE;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.march-card.active {
  border-color: #3E4FE0;
  box-shadow: 0 0 0 2px rgba(62,79,224,0.18);
}
.march-card.tba { background: linear-gradient(180deg, #FAFAFB 0%, #FFFFFF 60%); }
.march-card-tag {
  position: absolute; top: 10px; left: 10px;
  background: white;
  border: 1px solid #E2E8F0;
  color: #94A3B8;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em;
}
.march-card-team {
  position: absolute; top: 12px; right: 10px;
  font-size: 9px; color: #94A3B8;
  font-weight: 500; letter-spacing: 0.02em;
  max-width: 60%;
  text-align: right;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* TBA cards: hide team and use the badge spot for "To be activated" instead */
.march-card.tba .march-card-team { display: none; }
.march-card-tba {
  position: absolute; top: 10px; right: 10px;
  font-size: 8px; font-weight: 700;
  color: #6366F1;
  background: rgba(99,102,241,0.08);
  border: 1px solid rgba(99,102,241,0.22);
  border-radius: 4px;
  padding: 2px 6px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.march-card-name {
  font-size: 14px; font-weight: 600;
  color: #1F2937;
  text-align: center;
  margin: 8px 0 10px;
  min-height: 32px;
  display: flex; align-items: center; justify-content: center;
}
.march-card-value {
  font-size: 26px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  margin-bottom: 14px;
  line-height: 1.05;
}
.march-card-target {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; color: #64748B;
}
.march-card-pct {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px; font-weight: 600;
}
.march-card-fy {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  font-size: 10px; color: #94A3B8;
  text-align: center;
  margin-top: 6px;
  letter-spacing: 0.02em;
}
.march-card-fy .fy-label {
  font-weight: 700;
  color: #64748B;
  letter-spacing: 0.06em;
}
.march-card-fy .fy-vals {
  font-variant-numeric: tabular-nums;
  color: #475569;
  font-weight: 600;
}
.march-card-fy .fy-sep {
  margin: 0 4px;
  color: #CBD5E1;
}
.march-card-fy .fy-pct {
  background: rgba(62,79,224,0.08);
  color: #3E4FE0;
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0;
}
.march-card-headlines-hint {
  position: absolute;
  bottom: 8px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px; color: #94A3B8;
  font-weight: 500;
  pointer-events: none;
}
.march-card-info-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: 1px;
}
.march-card-info {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(62,79,224,0.10);
  color: #3E4FE0;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
}
.march-card-info-wrap:hover .march-card-info { background: #3E4FE0; color: #FFFFFF; transform: scale(1.08); }
.march-card-info-pop {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1E293B;
  color: #FFFFFF;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: 0;
  text-transform: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, transform 0.15s;
  box-shadow: 0 6px 16px rgba(15,23,42,0.18);
  z-index: 10;
}
.march-card-info-pop::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1E293B;
}
.march-card-info-wrap:hover .march-card-info-pop {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* FY-target line shown between panel-stats and the panel body in L1/L2 panels */
.exec-overview-cascade .panel-fy {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(62, 79, 224, 0.06);
  border: 1px solid rgba(62, 79, 224, 0.15);
  border-radius: 8px;
  font-size: 11px; font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.exec-overview-cascade .panel-fy.is-pending {
  background: rgba(245, 158, 11, 0.08);
  border-color: rgba(245, 158, 11, 0.25);
  color: #B45309;
  font-style: italic;
}

/* Sidebar subtitle under the yuno wordmark */
.sidebar .brand-subtitle {
  margin: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 9px;
  font-weight: 600;
  color: #94A3B8;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: left;
}

/* Cascading drill-down panels (Pattern A) */
.exec-overview.cascade-l1 { padding-right: 400px; transition: padding-right 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
.exec-overview.cascade-l2 { padding-right: 760px; transition: padding-right 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
/* When a drill-down is open the canvas is narrow — hide KEY METRICS so it doesn't squeeze.
   Focus shifts to the active panel; KEY METRICS reappears on close. */
.exec-overview.cascade-l1 .exec-overview-key-metrics,
.exec-overview.cascade-l2 .exec-overview-key-metrics {
  display: none;
}
.exec-overview { transition: padding-right 0.28s cubic-bezier(0.16, 1, 0.3, 1); }

.exec-overview-cascade {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: row;
  pointer-events: none;
}
.exec-overview-cascade-panel {
  background: white;
  border-left: 1px solid #E2E8F0;
  box-shadow: -8px 0 24px rgba(15,23,42,0.06);
  width: 380px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.exec-overview-cascade-panel.open { transform: translateX(0); }

.exec-overview-cascade .panel-header {
  padding: 22px 24px 14px;
  border-bottom: 1px solid #E2E8F0;
}
.exec-overview-cascade .panel-eyebrow {
  font-size: 10px; color: #94A3B8;
  font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.exec-overview-cascade .panel-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  padding: 4px 8px 4px 4px;
  margin: 0 0 10px -4px;
  border-radius: 6px;
  color: #3E4FE0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.exec-overview-cascade .panel-back-btn:hover {
  background: rgba(62,79,224,0.08);
  color: #3137b3;
}
.exec-overview-cascade .panel-back-btn span {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exec-overview-cascade .panel-title-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px;
}
.exec-overview-cascade .panel-title {
  font-size: 22px; font-weight: 700; line-height: 1.2;
  color: #1E293B;
  flex: 1;
}
.exec-overview-cascade .close-btn {
  background: transparent;
  border: 1px solid #E2E8F0;
  color: #64748B;
  padding: 5px 10px; border-radius: 6px;
  font-size: 12px; cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  flex-shrink: 0;
}
.exec-overview-cascade .close-btn:hover { background: #F8FAFC; color: #1E293B; }
.exec-overview-cascade .panel-stats {
  display: flex; align-items: baseline; gap: 12px;
  margin: 14px 0 4px;
}
.exec-overview-cascade .panel-stats .big {
  font-size: 30px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1E293B;
}
.exec-overview-cascade .panel-stats .big.good { color: #10B981; }
.exec-overview-cascade .panel-stats .big.warn { color: #F59E0B; }
.exec-overview-cascade .panel-stats .big.bad  { color: #DC2626; }
.exec-overview-cascade .panel-stats .of { color: #64748B; font-size: 13px; }
.exec-overview-cascade .panel-stats .pct {
  font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 4px;
  margin-left: auto;
}
.exec-overview-cascade .panel-stats .pct.good { background: #ECFDF5; color: #10B981; }
.exec-overview-cascade .panel-stats .pct.warn { background: #FFFBEB; color: #F59E0B; }
.exec-overview-cascade .panel-stats .pct.bad  { background: #FEF2F2; color: #DC2626; }
.exec-overview-cascade .sparkline {
  width: 100%; height: 60px; display: block; margin-top: 12px;
}
.exec-overview-cascade .panel-section-title {
  font-size: 10px; color: #94A3B8;
  font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 14px 24px 8px;
  background: #FAFBFC;
  border-bottom: 1px solid #E2E8F0;
  display: flex; justify-content: space-between;
}
.exec-overview-cascade .panel-section-title .hint {
  color: #94A3B8; font-weight: 500;
  text-transform: none; letter-spacing: 0;
}

/* Headlines list (L1) */
.exec-overview-cascade .drill-list { padding: 8px 0; }
.exec-overview-cascade .drill-row {
  padding: 12px 24px;
  border-bottom: 1px solid #E2E8F0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto 10px;
  gap: 12px;
  align-items: center;
}
.exec-overview-cascade .drill-row:hover { background: #F8FAFC; }
.exec-overview-cascade .drill-row.selected {
  background: rgba(62,79,224,0.06);
  border-left: 3px solid #3E4FE0;
  padding-left: 21px;
}
.exec-overview-cascade .drill-row .h-name {
  font-size: 13px; font-weight: 500; color: #1E293B;
}
.exec-overview-cascade .drill-row .h-value {
  font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1E293B;
}
.exec-overview-cascade .drill-row .h-status {
  width: 8px; height: 8px; border-radius: 50%;
}
.exec-overview-cascade .drill-row .h-status.good { background: #10B981; }
.exec-overview-cascade .drill-row .h-status.warn { background: #F59E0B; }
.exec-overview-cascade .drill-row .h-status.bad  { background: #DC2626; }

/* Detail section (L2) */
.exec-overview-cascade .detail-section { padding: 16px 24px; }
.exec-overview-cascade .detail-section h3 {
  font-size: 13px; margin-bottom: 8px; color: #1E293B; font-weight: 600;
}
.exec-overview-cascade .detail-section .label {
  font-size: 10px; color: #94A3B8;
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 12px; margin-bottom: 4px;
}
.exec-overview-cascade .detail-section .stat-line {
  font-size: 14px; color: #1E293B; font-weight: 600;
}
.exec-overview-cascade .empty-headlines {
  padding: 32px 24px;
  color: #64748B;
  font-size: 13px;
  text-align: center;
}
.exec-overview-cascade .driver-list ul { list-style: none; padding: 0; margin: 0; }
.exec-overview-cascade .driver-list li {
  padding: 6px 0;
  font-size: 12px;
  color: #64748B;
  line-height: 1.4;
}
.exec-overview-cascade .driver-list li::before {
  content: '— ';
  color: #94A3B8;
}

@media (max-width: 1280px) {
  .exec-overview.cascade-l2 { padding-right: 720px; }
  .exec-overview-cascade-panel { width: 360px; }
}
@media (max-width: 900px) {
  .exec-overview.cascade-l1, .exec-overview.cascade-l2 { padding-right: 0; }
  .exec-overview-cascade-panel { width: 100vw; }
  .exec-overview-cascade-panel + .exec-overview-cascade-panel { display: none; }
}

/* Cascade validation warning badge — small inline marker next to a KPI name
   when the cascade ETL flagged a data issue (e.g. FY target missing).
   Hovering shows the full warning text via the native title attribute. */
.cascade-warning-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border-radius: 50%;
  background: #FBE7E8;
  color: #B45309;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-display, system-ui);
  cursor: help;
  vertical-align: middle;
  line-height: 1;
}
.cascade-warning-badge:hover { background: #FDE68A; color: #92400E; }

/* ============================================================================
   AnchorDrillIn (Pattern C) — drawer below the anchor cards row.
   Connector triangle uses --connector-x set on the wrapper. The drawer slides
   into the same .exec-overview-key-metrics block so it inherits its width.
   ============================================================================ */

.exec-overview-anchor.is-expanded {
  background: rgba(62, 79, 224, 0.05);
  box-shadow: inset 0 0 0 2px #3E4FE0;
  border-radius: 10px;
}

.anchor-drillin {
  margin-top: 16px;
  padding: 22px 24px 20px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  position: relative;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* Connector triangle pointing up to the active anchor card */
.anchor-drillin::before {
  content: '';
  position: absolute;
  top: -8px;
  left: var(--connector-x, 12.5%);
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #FFFFFF;
  border-left: 1px solid #E2E8F0;
  border-top: 1px solid #E2E8F0;
}

.anchor-drillin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.anchor-drillin-title {
  font-size: 22px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.anchor-drillin-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.anchor-drillin-pill.rag-good { background: #ECFDF5; color: #10B981; }
.anchor-drillin-pill.rag-warn { background: #FFFBEB; color: #F59E0B; }
.anchor-drillin-pill.rag-bad  { background: #FEF2F2; color: #EF4444; }
.anchor-drillin-pill.rag-neutral { background: #F1F5F9; color: #64748B; }

.anchor-drillin-subtitle {
  font-size: 11px;
  color: #64748B;
  margin-top: 4px;
  text-transform: capitalize;
  letter-spacing: 0.02em;
}

.anchor-drillin-close {
  background: transparent;
  border: 1px solid #E2E8F0;
  color: #64748B;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  transition: all 120ms ease;
}
.anchor-drillin-close:hover {
  background: #F8FAFC;
  border-color: #CBD5E1;
  color: #0F172A;
}

/* Three milestone tiles */
.anchor-drillin-milestones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 14px 0 18px;
}
.anchor-drillin-milestone {
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 12px 14px;
  background: #FAFBFD;
}
.anchor-drillin-milestone-label {
  font-size: 9px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.anchor-drillin-milestone-value {
  font-size: 24px;
  font-weight: 700;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.anchor-drillin-milestone-sub {
  font-size: 11px;
  color: #64748B;
  margin-top: 4px;
}

/* Chart wrapper + legend */
.anchor-drillin-chart {
  margin: 4px 0 8px;
}
.anchor-drillin-legend {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 11px;
  color: #475569;
  flex-wrap: wrap;
}
.anchor-drillin-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.anchor-drillin-swatch {
  display: inline-block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
  background: #94A3B8;
}
.anchor-drillin-swatch.solid { height: 3px; }
.anchor-drillin-swatch.dashed {
  background-image: linear-gradient(to right,
    var(--c, #1E293B) 0 6px, transparent 6px 10px,
    var(--c, #1E293B) 10px 14px);
  background-color: transparent;
  height: 2px;
}
.anchor-drillin-swatch.dotted {
  background-image: radial-gradient(circle, #94A3B8 0.9px, transparent 1.1px);
  background-size: 4px 1.5px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  background-color: transparent;
  height: 1.5px;
  opacity: 0.85;
}

/* Trend caption footer */
.anchor-drillin-caption {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #F1F5F9;
  font-size: 12px;
  color: #475569;
}
.anchor-drillin-caption strong { color: #0F172A; font-weight: 700; }
.anchor-drillin-caption .is-miss { color: #EF4444; font-weight: 700; }
.anchor-drillin-caption .is-beat { color: #10B981; font-weight: 700; }

/* ============================================================================
   Team picker (Teams landing page) + leaf-team page grid
   ============================================================================ */

/* Picker container */
.team-picker { padding: 8px 0; }
.team-picker-intro {
  font-size: 12px;
  color: #64748B;
  margin: 0 0 14px 0;
  max-width: 720px;
  line-height: 1.5;
}

/* Cluster section header (CRO, Product & Tech, Other teams) */
.team-picker-cluster-head {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 22px 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #E2E8F0;
}
.team-picker-cluster-head:first-child { margin-top: 8px; }

/* Tile grid */
.team-picker-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

/* Picker tile — single team */
.team-picker-tile {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 92px;
  transition: all 120ms ease;
}
.team-picker-tile:hover {
  border-color: #3E4FE0;
  box-shadow: 0 4px 12px rgba(62, 79, 224, 0.10);
  transform: translateY(-1px);
}
.team-picker-tile.no-data {
  opacity: 0.55;
  cursor: default;
}
.team-picker-tile.no-data:hover {
  border-color: #E2E8F0;
  box-shadow: none;
  transform: none;
}
.team-picker-tile-pillar {
  font-size: 9px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.team-picker-tile-name {
  font-size: 14px;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.01em;
}
.team-picker-tile-arrow {
  color: #94A3B8;
  font-size: 12px;
  font-weight: 500;
}
.team-picker-tile-meta {
  font-size: 11px;
  color: #64748B;
  margin-top: 2px;
}

/* Leaf-team page card grid — flows MarchCards in a responsive grid */
.exec-overview-march-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* ============================================================================
   Rich anchor cards (Executive Overview hero row).
   Replaces the previous slim AnchorCard + AnchorDrillIn drawer. Clicking a
   card now scrolls to the matching pillar group on the same page.
   Palette tuned to align with the dashboard's existing pillar tags + variance
   pills — light tints + saturated text rather than full-saturation backgrounds.
   ============================================================================ */

.exec-overview-anchor-rich {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  position: relative;
}
.exec-overview-anchor-rich:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  border-color: rgba(62, 79, 224, 0.3);
}
.exec-overview-anchor-rich.is-empty {
  opacity: 0.6;
  cursor: default;
}
.exec-overview-anchor-rich.is-empty:hover {
  transform: none;
  box-shadow: none;
  border-color: #E2E8F0;
}

/* Pillar accent stripe — muted shade, slim 4px */
.anchor-rich-stripe { width: 100%; height: 4px; }
.anchor-rich-stripe.stripe-p1 { background: #818CF8; }   /* muted indigo */
.anchor-rich-stripe.stripe-p2 { background: #A78BFA; }   /* muted violet */
.anchor-rich-stripe.stripe-p3 { background: #5EEAD4; }   /* muted teal */
.anchor-rich-stripe.stripe-p4 { background: #FCD34D; }   /* muted amber */

.anchor-rich-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
}

/* Header: pillar tag + name */
.anchor-rich-pillar-tag {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  letter-spacing: 0.06em;
}
.anchor-rich-pillar-name {
  font-size: 18px;
  font-weight: 700;
  color: #0F172A;
  margin-top: 2px;
  letter-spacing: -0.01em;
}
.anchor-rich-divider {
  height: 1px;
  background: #E2E8F0;
  margin: 14px 0 12px;
}

/* KPI name + big value */
.anchor-rich-kpi-name {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
}
.anchor-rich-value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}

/* Trend arrow + variance pill row */
.anchor-rich-trend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.anchor-rich-arrow { font-size: 20px; line-height: 1; }
.anchor-rich-arrow.arrow-down { color: #DC2626; }
.anchor-rich-arrow.arrow-up   { color: #059669; }
.anchor-rich-arrow.arrow-flat { color: #94A3B8; }

/* Variance pill — light tint + saturated text + soft border, matching .march-card-pct */
.anchor-rich-pill {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  flex: 1;
  text-align: center;
  border: 1px solid transparent;
}
.anchor-rich-pill.pill-bad     { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }
.anchor-rich-pill.pill-warn    { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.anchor-rich-pill.pill-good    { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.anchor-rich-pill.pill-neutral { background: #F1F5F9; color: #475569; border-color: #E2E8F0; }

.anchor-rich-fy {
  font-size: 12px;
  color: #64748B;
  font-style: italic;
  margin-top: 12px;
}

/* Pillar status block */
.anchor-rich-status-label {
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
}
.anchor-rich-status-counts {
  font-size: 12px;
  color: #64748B;
  margin-top: 4px;
}
.anchor-rich-status-tiles {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
/* Count tiles — light tint bg + saturated text (same family as the variance pill) */
.anchor-rich-status-tile {
  border-radius: 8px;
  padding: 12px 0;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.anchor-rich-status-tile.tile-good { background: #ECFDF5; color: #047857; border-color: #A7F3D0; }
.anchor-rich-status-tile.tile-warn { background: #FFFBEB; color: #B45309; border-color: #FDE68A; }
.anchor-rich-status-tile.tile-bad  { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }

/* ============================================================================
 * Anchor card — split body
 * ----------------------------------------------------------------------------
 * The card has two click zones:
 *   .anchor-rich-summary  → click → scroll to pillar's KPI group below
 *   .anchor-rich-insights → click → open right-side sidebar with all
 *                                    curated insights for the pillar
 * A 1px divider sits between them. The bottom zone has a subtle hover state
 * so users discover it's also clickable.
 * ============================================================================ */
.anchor-rich-summary {
  padding: 18px 20px 16px;
  cursor: pointer;
}
.anchor-rich-insights {
  padding: 14px 20px 16px;
  cursor: pointer;
  border-top: 1px solid #F1F5F9;
  transition: background 120ms ease;
}
.anchor-rich-insights:hover { background: #F8FAFC; }
.anchor-rich-insights:focus-visible {
  outline: 2px solid rgba(62, 79, 224, 0.5);
  outline-offset: -2px;
  background: #F8FAFC;
}

.anchor-rich-insights-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.anchor-rich-insights-label {
  font-size: 10px;
  font-weight: 700;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.anchor-rich-insights-count {
  font-size: 10px;
  color: #94A3B8;
  letter-spacing: 0.04em;
}

/* One row per insight (Driving / Watch / Risk). Icon + label + 2-line
 * clamped prose so the four cards stay roughly equal height even when one
 * pillar's insights are wordier. Full prose is in the sidebar. */
.anchor-rich-insight-row {
  display: flex;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.5;
  color: #334155;
}
.anchor-rich-insight-row + .anchor-rich-insight-row {
  border-top: 1px dashed #F1F5F9;
}
.anchor-rich-insight-icon {
  flex: 0 0 16px;
  font-size: 13px;
  line-height: 1.45;
  text-align: center;
}
.anchor-rich-insight-icon.icon-driving { color: #059669; }
.anchor-rich-insight-icon.icon-watch   { color: #D97706; }
.anchor-rich-insight-icon.icon-risk    { color: #DC2626; }
.anchor-rich-insight-icon.icon-note    { color: #94A3B8; }

.anchor-rich-insight-text {
  flex: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.anchor-rich-insight-label {
  font-weight: 600;
  color: #1E293B;
}

.anchor-rich-insights-more {
  margin-top: 8px;
  text-align: right;
  font-size: 11px;
  color: #3E4FE0;
  font-weight: 600;
}
.anchor-rich-insights-empty {
  font-size: 12px;
  color: #64748B;
  font-style: italic;
  padding: 6px 0 2px;
  line-height: 1.5;
}

/* ============================================================================
 * Hero search — large centered search bar at the top of Executive Overview.
 * The first thing the user sees on landing. Wraps the existing CommandPalette
 * (Cmd+K still works); chips seed initial queries.
 * ============================================================================ */
.hero-search-wrap {
  max-width: 720px;
  margin: 24px auto 28px;
  text-align: center;
}
.hero-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
  cursor: text;
  transition: box-shadow 120ms ease, border-color 120ms ease, transform 120ms ease;
  text-align: left;
}
.hero-search:hover {
  border-color: rgba(62, 79, 224, 0.4);
  box-shadow: 0 6px 20px rgba(62, 79, 224, 0.10);
  transform: translateY(-1px);
}
.hero-search:focus-visible {
  outline: 2px solid rgba(62, 79, 224, 0.6);
  outline-offset: 2px;
}
.hero-search-icon {
  color: #94A3B8;
  font-size: 18px;
  line-height: 1;
}
.hero-search-placeholder {
  flex: 1;
  font-size: 15px;
  color: #94A3B8;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hero-search-placeholder-eg {
  color: #CBD5E1;
}
.hero-search-kbd {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #94A3B8;
  font-size: 12px;
  flex: 0 0 auto;
}
.hero-search-kbd kbd {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #475569;
}

.hero-search-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 10px;
}
.hero-search-chip {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  color: #64748B;
  cursor: pointer;
  font-family: inherit;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.hero-search-chip:hover {
  background: #EEF2FF;
  color: #3E4FE0;
  border-color: rgba(62, 79, 224, 0.3);
}

/* On narrower viewports the placeholder example wraps awkwardly; hide the
 * secondary "Try …" hint so the placeholder stays one line. */
@media (max-width: 640px) {
  .hero-search-placeholder-eg { display: none; }
  .hero-search-wrap { margin: 16px auto 20px; padding: 0 12px; }
}

/* ============================================================================
 * Mobile responsive — anchor cards
 * ----------------------------------------------------------------------------
 * Default layout is 4 cards side-by-side, designed for desktop. On phones
 * and small tablets the cards become unreadably narrow if we keep them
 * tiled. Two breakpoints:
 *
 *   <= 1100px (tablets / small laptops) — 2-up grid
 *   <=  640px (phones)                  — single column, reduced padding,
 *                                         smaller hero value font
 *
 * Same breakpoint set as the mockup-insights-search.html prototype, so any
 * future redesign work has a consistent baseline.
 * ============================================================================ */
@media (max-width: 1100px) {
  .exec-overview-anchors {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 14px !important;
  }
}

@media (max-width: 640px) {
  .exec-overview-anchors {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* Tighten the cards on small screens so the content takes less vertical
     real estate. The 4 cards stacked already make a long page; trimming
     padding + font sizes keeps the scroll reasonable. */
  .anchor-rich-summary  { padding: 16px 16px 14px; }
  .anchor-rich-insights { padding: 12px 16px 14px; }
  .anchor-rich-value    { font-size: 32px; }
  .anchor-rich-pillar-name { font-size: 17px; }
  /* Status tiles stay 3-up but shrink a bit so they don't dominate. */
  .anchor-rich-status-tile { font-size: 18px; padding: 10px 0; }
  /* Allow more lines per insight on mobile (one card per row → there's
     room for 3 lines instead of the desktop 2-line clamp). */
  .anchor-rich-insight-text { -webkit-line-clamp: 3; }
}

/* ============================================================================
 * Pillar Insights sidebar — content rendered inside ExpandableSidebar when
 * a user clicks the bottom half of an anchor card. Lists every curated
 * insight for the pillar + the anchor KPI, grouped by month newest-first.
 * ============================================================================ */
.pillar-insights-drilldown {
  padding: 24px 28px 40px;
}
.pillar-insights-month-block {
  margin-bottom: 18px;
}
.pillar-insights-month-block + .pillar-insights-month-block {
  padding-top: 16px;
  border-top: 1px solid #E2E8F0;
}
.pillar-insights-month-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pillar-insights-month-current {
  background: #EEF2FF;
  color: #3E4FE0;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}

.pillar-insights-block {
  padding: 14px 16px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: #1E293B;
}
.pillar-insights-block.block-driving { border-left: 3px solid #059669; }
.pillar-insights-block.block-watch   { border-left: 3px solid #D97706; }
.pillar-insights-block.block-risk    { border-left: 3px solid #DC2626; }
.pillar-insights-block.block-note    { border-left: 3px solid #94A3B8; }

.pillar-insights-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pillar-insights-type.type-driving { color: #059669; }
.pillar-insights-type.type-watch   { color: #D97706; }
.pillar-insights-type.type-risk    { color: #DC2626; }
.pillar-insights-type.type-note    { color: #64748B; }
.pillar-insights-scope {
  color: #94A3B8;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-left: 2px;
}
.pillar-insights-text {
  color: #1E293B;
  line-height: 1.55;
}
.pillar-insights-meta {
  font-size: 11px;
  color: #94A3B8;
  margin-top: 8px;
}

/* ============================================================================
 * KPI-drill-in Insights list — same visual family as the pillar sidebar but
 * sits inside the existing `.kdd-section` panel on the KPI drill-in. Used by
 * the rewritten KpiInsights component to render `cascade.insights.byKpi[id]`.
 * Only mounts when the KPI actually has curated text — no canned filler.
 * ============================================================================ */
.kpi-insights-list { /* container around all month groups */ }
.kpi-insights-month + .kpi-insights-month {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #F1F5F9;
}
.kpi-insights-month-label {
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.kpi-insights-block {
  padding: 12px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #1E293B;
}
.kpi-insights-block.block-driving { border-left: 3px solid #059669; }
.kpi-insights-block.block-watch   { border-left: 3px solid #D97706; }
.kpi-insights-block.block-risk    { border-left: 3px solid #DC2626; }
.kpi-insights-block.block-note    { border-left: 3px solid #94A3B8; }

.kpi-insights-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.kpi-insights-type.type-driving { color: #059669; }
.kpi-insights-type.type-watch   { color: #D97706; }
.kpi-insights-type.type-risk    { color: #DC2626; }
.kpi-insights-type.type-note    { color: #64748B; }
.kpi-insights-text { color: #1E293B; line-height: 1.55; }
.kpi-insights-meta {
  font-size: 11px;
  color: #94A3B8;
  margin-top: 6px;
}

/* ============================================================================
 * MOBILE RESPONSIVE OVERHAUL — phone viewport (≤768px)
 * ----------------------------------------------------------------------------
 * The dashboard was built desktop-first with a fixed-position left sidebar
 * that always ate 232px (expanded) or 70px (collapsed). On a 375px phone
 * that's 19–62% of the screen wasted; in real screenshots from iPhone Safari
 * the main content was getting cut off ("ABLE GROWTH" instead of "SCALABLE
 * GROWTH", "Logo ARR" instead of "New Logo ARR", etc).
 *
 * Mobile pattern applied here:
 *   - Sidebar hidden off-screen by default (transform: translateX(-100%))
 *   - A small top-bar appears on phones with a hamburger + YUNO wordmark
 *   - Tapping hamburger sets .app.mobile-nav-open which slides sidebar in
 *   - A dim backdrop catches taps to close
 *   - Main content has no left margin (full viewport width)
 *   - Drill-in panel (ExpandableSidebar) becomes full-screen
 *   - Period selector + hero search chips trimmed/scrollable
 *
 * Desktop layout is completely unaffected — every rule below is inside a
 * @media query.
 * ============================================================================ */

/* Top bar — visible only on phones; hidden on desktop. */
.mobile-topbar { display: none; }
.mobile-nav-backdrop { display: none; }

@media (max-width: 768px) {
  /* Top bar */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    padding: 0 14px;
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    z-index: 90;
  }
  .mobile-topbar-menu {
    flex: 0 0 36px;
    width: 36px; height: 36px;
    border: none; background: transparent;
    color: #1E293B; cursor: pointer;
    border-radius: 8px;
    display: inline-flex;
    align-items: center; justify-content: center;
    padding: 0;
  }
  .mobile-topbar-menu:active { background: #F1F5F9; }
  .mobile-topbar-brand {
    font-size: 18px; font-weight: 700;
    color: #3E4FE0; letter-spacing: -0.01em;
    flex: 0 0 auto;
  }
  .mobile-topbar-page {
    font-size: 13px; color: #64748B; font-weight: 500;
    margin-left: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Sidebar — off-screen by default, slides in when .app.mobile-nav-open. */
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease !important;
    width: 280px !important;  /* roomy when open on mobile */
    min-width: 280px !important;
    z-index: 200 !important;  /* above the backdrop */
  }
  .app.mobile-nav-open .sidebar {
    transform: translateX(0);
  }
  /* Collapsed-state styling shouldn't apply on mobile — we always show the
     full sidebar when open. Override the internal collapse mechanism. */
  .sidebar.collapsed {
    width: 280px !important;
    min-width: 280px !important;
    padding: 24px 16px !important;
  }
  .sidebar.collapsed .brand { align-items: flex-start; flex-direction: column; }
  .sidebar.collapsed .nav-section,
  .sidebar.collapsed .nav-item span { display: initial !important; }
  .sidebar.collapsed .nav-item { justify-content: flex-start !important; width: auto !important; }

  /* Backdrop — fades in when nav is open. */
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  .app.mobile-nav-open .mobile-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Main content fills the viewport — no left margin from the sidebar.
     Top padding makes room for the fixed top-bar. */
  .app .main,
  .app .main-content,
  .app.sidebar-collapsed .main,
  .app.sidebar-collapsed .main-content,
  .app:not(.sidebar-collapsed) .main,
  .app:not(.sidebar-collapsed) .main-content {
    margin-left: 0 !important;
    padding-top: 52px;  /* room for the fixed top-bar */
  }
  .app.sidebar-collapsed .content,
  .app:has(.sidebar.collapsed) .content {
    padding: 14px 14px 32px;
    max-width: 100%;
  }
  .content {
    padding: 14px 14px 32px !important;
  }

  /* Body scroll lock when the drawer is open (the React effect adds this
     class to <body>). */
  body.mobile-nav-open { overflow: hidden; }
}

/* ============================================================================
 * Drill-in panel (ExpandableSidebar / KpiDrillDown) — full-screen on phones
 * ============================================================================
 * The drill-in slides in from the right at ~540px wide on desktop. On a
 * 375px phone, 540px overflows or gets capped, and the chart/headers
 * inside are designed for the full panel width — content was cropped on
 * the left edge (visible in screenshot 1: "Logo ARR" / "5M" / "RGET").
 * On mobile we make the panel cover the full viewport.
 * ============================================================================ */
@media (max-width: 768px) {
  /* Cover the full viewport on phones — the desktop panel was 720px capped
     to 90vw which left a strip showing on the left and pushed the panel's
     content off the right edge. The existing z-index (10000) is fine; we
     don't override it. */
  .expandable-sidebar,
  .expandable-sidebar.expanded {
    width: 100vw !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    height: 100vh !important;
    border-radius: 0 !important;
  }
  /* Tighter inner padding on phones; the panel was designed for 540–720px. */
  .kpi-deepdive,
  .pillar-insights-drilldown { padding: 12px !important; }
  /* The hero block inside KpiDrillDown squeezes its value font when narrow. */
  .kdd-hero { padding: 14px !important; }
  .kdd-hero-value { font-size: 32px !important; }
  .kdd-hero-name { font-size: 18px !important; }
}

/* ============================================================================
 * Period selector — horizontally scrollable on phones
 * ============================================================================
 * Q1/Q2/Q3/Q4 + Jan/Feb/…/Dec was laid out as two rows of equal-width
 * buttons. On a 375px phone the month row overflows (visible in screenshot
 * 2: "Jun" bleeding off the right edge). Make each row a horizontal scroll
 * container so all buttons stay reachable and the layout doesn't break.
 * ============================================================================ */
@media (max-width: 768px) {
  .exec-overview-topbar.stacked {
    padding: 6px !important;
  }
  .exec-overview-topbar.stacked .exec-overview-period-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Hide the scrollbar but keep the scroll behavior. */
    scrollbar-width: none;
  }
  .exec-overview-topbar.stacked .exec-overview-period-row::-webkit-scrollbar {
    display: none;
  }
  .exec-overview-topbar.stacked .exec-overview-period-btn {
    flex: 0 0 auto;  /* don't stretch — keep natural width so all fit in scroll */
    min-width: 56px;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}

/* ============================================================================
 * Hero search — trim on phones
 * ============================================================================
 * The search bar itself is already responsive (capped at 100vw). The
 * suggestion chip row eats a lot of vertical space on a phone (5 chips
 * wrapping to 2-3 lines, see screenshot 4). Hide the chip row on phones —
 * the user can still tap the search bar to open the palette and type.
 * ============================================================================ */
@media (max-width: 640px) {
  .hero-search-hints { display: none; }
  .hero-search { padding: 12px 14px; }
  .hero-search-placeholder { font-size: 13px; }
  .hero-search-kbd { display: none; }  /* phones don't have ⌘K anyway */
}