/* ───────────────────────────────────────────────────────────────────────────
   R&D Analytics Hub — Dashboard CSS
   Emami Analytics Hub Design System v1.1 (DESIGN_SYSTEM.md)
   Hybrid: Plotly.js charts + Raw CSS design tokens (no Bootstrap / Tailwind)
   ─────────────────────────────────────────────────────────────────────────── */

/* ── 1. CSS Custom Properties (Design Tokens) ──────────────────────────────── */
:root {
  /* Brand & accent */
  --orange:         #f97316;
  --orange-bg:      #fff7ed;
  --orange-border:  #fed7aa;
  --deep-indigo:    #1e3a8a;
  --indigo:         #6366f1;
  --indigo-deep:    #4338ca;
  --indigo-tint:    #eef2ff;
  --blue:           #2563eb;
  --blue-lt:        #3b82f6;
  --blue-pale:      #eff6ff;

  /* Neutrals */
  --n-900:  #0f172a;
  --n-800:  #111827;
  --n-700:  #374151;
  --n-600:  #475569;
  --n-500:  #6b7280;
  --n-400:  #9ca3af;
  --n-300:  #cbd5e1;
  --n-200:  #e5e7eb;
  --n-150:  #f0f0f0;
  --n-100:  #f3f4f6;
  --n-50:   #f9fafb;
  --white:  #ffffff;

  /* Semantic — growth/direction */
  --up-text:    #15803d;
  --up-bg:      #dcfce7;
  --up-border:  #bbf7d0;
  --dn-text:    #b91c1c;
  --dn-bg:      #fee2e2;
  --dn-border:  #fecaca;
  --flat-text:  #6b7280;
  --flat-bg:    #f3f4f6;

  /* Achievement bands */
  --ach-ok:   #15803d;
  --ach-warn: #b45309;
  --ach-bad:  #b91c1c;

  /* Shadows */
  --shadow-card:    0 1px 4px rgba(0,0,0,.04);
  --shadow-modal:   0 24px 80px rgba(0,0,0,.28);
  --shadow-tooltip: 0 4px 20px rgba(0,0,0,.3);

  /* Shape */
  --radius-card: 12px;
  --radius-chip: 100px;

  /* Header heights (FIXED — do not change) */
  --h-stripe:  4px;
  --h-header:  52px;
  --h-filter:  42px;
  --h-context: 30px;
  --h-sticky:  124px;   /* header(52) + filter(42) + context(30) */

  /* Sidebar */
  --sidebar-w:      220px;
  --sidebar-w-col:  64px;

  /* Font stack */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── 2. Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Without this, Chrome falls back to its own OS-matched default canvas colour
   (black, if Windows/Chrome is in dark mode) for any unpainted sliver of the
   page — e.g. the very top edge — since neither html nor body otherwise tells
   the browser what colour scheme this page actually uses. */
:root { color-scheme: light; }

html { font-size: 13px; background: var(--n-50); }

body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--n-700);
  background: var(--n-50);
  overflow-x: hidden;
}

::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--n-300); border-radius: 3px; }

font-variant-numeric { font-variant-numeric: tabular-nums; }

/* ── 3. App Shell ────────────────────────────────────────────────────────────── */
#app-shell {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

#main-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  /* The 4 sticky layers + sidebar fill this space */
  height: calc(100vh - var(--h-sticky) - var(--h-stripe));
}

/* ── 4. Top Stripe ───────────────────────────────────────────────────────────── */
.stripe {
  height: var(--h-stripe);
  background: linear-gradient(90deg, #f97316 0%, #fb8c00 40%, #1e3a8a 100%);
  flex-shrink: 0;
}

/* ── 5. White Header ─────────────────────────────────────────────────────────── */
.top-header {
  background: var(--white);
  border-bottom: 1px solid var(--n-200);
  height: var(--h-header);
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
  position: sticky;
  top: var(--h-stripe);
  z-index: 220;
  flex-shrink: 0;
}

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

.header-logo {
  height: 30px;
  object-fit: contain;
}
.header-logo-fallback {
  font-size: 16px;
  font-weight: 900;
  color: var(--deep-indigo);
  letter-spacing: -.02em;
}

.header-sep {
  width: 1px;
  height: 26px;
  background: var(--n-200);
}

.header-title-block .title-main {
  font-size: 14px;
  font-weight: 700;
  color: var(--n-800);
  letter-spacing: -.01em;
}
.header-title-block .title-sub {
  font-size: 10px;
  color: var(--n-400);
  letter-spacing: .02em;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-sync {
  font-size: 11px;
  color: var(--n-500);
}
.header-sync b { color: var(--n-800); font-weight: 600; }

.live-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #16a34a;
}
.live-badge::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #16a34a;
  animation: blink 1.4s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ── 6. Reset Button ─────────────────────────────────────────────────────────── */
.reset-btn {
  height: 28px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--n-200);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: var(--n-600);
  cursor: pointer;
  transition: all .15s;
  font-family: var(--font);
}
.reset-btn:hover { background: var(--n-50); border-color: var(--n-300); }

/* ── 7. Filter Chips Bar ─────────────────────────────────────────────────────── */
.filter-chips-bar {
  background: var(--white);
  border-bottom: 1px solid var(--n-200);
  padding: 0 20px;
  height: var(--h-filter);
  display: flex;
  align-items: center;
  position: sticky;
  top: calc(var(--h-stripe) + var(--h-header));
  z-index: 209;
  flex-shrink: 0;
}
.filter-chips-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  height: 100%;
  scrollbar-width: none;
}
.filter-chips-inner::-webkit-scrollbar { display: none; }

.fchip {
  appearance: none;
  height: 30px;
  padding: 0 28px 0 12px;
  border: 1px solid var(--n-200);
  border-radius: var(--radius-chip);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--n-700);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  cursor: pointer;
  white-space: nowrap;
  min-width: 100px;
  transition: all .15s;
  font-family: var(--font);
  flex-shrink: 0;
}
.fchip:hover {
  border-color: var(--indigo);
}
.fchip:focus {
  border-color: var(--blue);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.1);
}
.fchip.active {
  background-color: var(--blue-pale);
  border-color: var(--blue);
  color: #1d4ed8;
}

.chip-divider {
  width: 1px;
  height: 20px;
  background: var(--n-200);
  flex-shrink: 0;
}

/* ── 7b. Context Strip ───────────────────────────────────────────────────────── */
.context-bar {
  height: var(--h-context);
  background: var(--deep-indigo);
  color: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: calc(var(--h-stripe) + var(--h-header) + var(--h-filter));
  z-index: 205;
  flex-shrink: 0;
}
.ctx-left, .ctx-right {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(255,255,255,.92);
  white-space: nowrap;
  flex-shrink: 0;
}
.ctx-center {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 11px;
  font-style: italic;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 8. Sidebar Navigation ───────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  background: var(--white);
  border-right: 1px solid var(--n-150);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  transition: width .2s ease;
  z-index: 100;
}
.sidebar.collapsed { width: var(--sidebar-w-col); }

.sidebar-toggle {
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
  color: var(--n-500);
  border-bottom: 1px solid var(--n-150);
}
.sidebar-toggle:hover { color: var(--orange); }

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--n-600);
  border-left: 3px solid transparent;
  transition: all .15s;
  white-space: nowrap;
  overflow: hidden;
  text-decoration: none;
}
.nav-item:hover {
  background: var(--n-50);
  color: var(--n-800);
}
.nav-item.active {
  color: var(--orange);
  border-left-color: var(--orange);
  background: var(--orange-bg);
  font-weight: 700;
}
.nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: currentColor;
}
.nav-label { transition: opacity .15s; }
.sidebar.collapsed .nav-label { opacity: 0; width: 0; overflow: hidden; }

.nav-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--n-400);
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 12px 16px 4px;
}
.sidebar.collapsed .nav-section-label { display: none; }

/* ── 10. Main Content Area ───────────────────────────────────────────────────── */
#main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px;
  min-height: 0;
}

/* ── 11. Section Panels ──────────────────────────────────────────────────────── */
.section-panel { display: none; }
.section-panel.active { display: block; }

.section-header {
  margin-bottom: 12px;
}
.section-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--n-800);
}
.section-subtitle {
  font-size: 11px;
  color: var(--n-400);
  margin-top: 2px;
}
.section-drill-hint {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 7px;
  font-size: 11.5px; font-weight: 600;
  color: #6366f1;
  background: rgba(99,102,241,.07);
  border: 1px solid rgba(99,102,241,.18);
  border-radius: 6px; padding: 4px 12px 4px 9px;
  letter-spacing: .01em;
}
.section-drill-hint svg { opacity: .75; flex-shrink: 0; }

/* ── 12. Grid Layout ─────────────────────────────────────────────────────────── */
.row-4  { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.row-3  { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.row-2  { display: grid; grid-template-columns: 1fr 1fr;        gap: 8px; margin-bottom: 8px; }
.row-3-asym  { display: grid; grid-template-columns: 3fr 2fr;   gap: 8px; margin-bottom: 8px; }
.row-2-asym  { display: grid; grid-template-columns: 2fr 1fr;   gap: 8px; margin-bottom: 8px; }
.row-1  { display: grid; grid-template-columns: 1fr;            gap: 8px; margin-bottom: 8px; }

@media (max-width: 1400px) {
  .row-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1200px) {
  .row-4 { grid-template-columns: repeat(2, 1fr); }
  .row-3 { grid-template-columns: 1fr 1fr; }
  .row-3-asym { grid-template-columns: 1fr; }
  .row-2-asym { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .row-4, .row-3, .row-2, .row-3-asym, .row-2-asym { grid-template-columns: 1fr; }
}

/* ── 13. Card Shell ──────────────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--n-150);
}
.card-hd {
  padding: 16px 20px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.card-title    { font-size: 13px; font-weight: 700; color: var(--n-800); }
.card-subtitle { font-size: 11px; color: var(--n-400); font-weight: 400; margin-top: 1px; }
.card-body     { padding: 14px 20px 18px; }
.card-body.no-pad { padding: 0; }

/* ── 14. KPI Tiles ───────────────────────────────────────────────────────────── */
.kpi {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  overflow: hidden;
  min-height: 80px;
}
.kpi::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  border-radius: 4px 0 0 4px;
}
.kpi.ok::after   { background: var(--ach-ok); }
.kpi.warn::after { background: var(--ach-warn); }
.kpi.bad::after  { background: var(--ach-bad); }
.kpi.navy::after { background: var(--orange); }

.kpi-icon-wrap {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.kpi-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--n-400);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--n-800);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.kpi-unit { font-size: 13px; font-weight: 500; color: var(--n-400); }
.kpi-sub  { font-size: 11px; color: var(--n-400); }

.kpi-delta {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-top: 2px;
  display: inline-block;
}
.kpi-delta.up { background: var(--up-bg);   color: var(--up-text); }
.kpi-delta.dn { background: var(--dn-bg);   color: var(--dn-text); }
.kpi-delta.nu { background: var(--flat-bg); color: var(--flat-text); }

.kpi-sparkline {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 60px;
  height: 28px;
  opacity: .5;
}

/* ── 15. Pills & Chips ───────────────────────────────────────────────────────── */
.pill { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.pill.ok   { background: var(--up-bg);   color: var(--up-text); }
.pill.warn { background: #fef3c7;        color: var(--ach-warn); }
.pill.bad  { background: var(--dn-bg);   color: var(--dn-text); }
.pill.navy { background: var(--indigo-tint); color: var(--deep-indigo); }
.pill.orange { background: var(--orange-bg); color: var(--orange); border: 1px solid var(--orange-border); }

/* ── 16. Loading States ──────────────────────────────────────────────────────── */
.spin {
  width: 20px; height: 20px;
  border: 3px solid var(--n-100);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.ld {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--n-400);
  font-size: 12px;
}

.chart-overlay {
  position: absolute; inset: 0;
  background: rgba(255,255,255,.9);
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  border-radius: inherit;
}

.err-msg {
  text-align: center;
  font-size: 12px;
  color: var(--n-400);
  padding: 24px;
}

/* Skeleton pulse for cards */
.skel {
  background: linear-gradient(90deg, var(--n-100) 25%, #e9e9e9 50%, var(--n-100) 75%);
  background-size: 200% 100%;
  animation: skel-pulse 1.4s ease infinite;
  border-radius: 6px;
}
@keyframes skel-pulse { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── 17. Insight Cards ───────────────────────────────────────────────────────── */
.insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}

.insight-card {
  border-radius: 10px;
  padding: 14px 16px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
  /* Glassmorphism accent for AI insight cards */
  backdrop-filter: blur(1px);
}
.insight-card.HIGH   { background: rgba(255,241,240,.9); border-color: #fecaca; }
.insight-card.MEDIUM { background: rgba(255,251,235,.9); border-color: #fde68a; }
.insight-card.LOW    { background: rgba(239,246,255,.9); border-color: #bfdbfe; }

.insight-rank {
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
}
.insight-rank.HIGH   { background: var(--dn-text); }
.insight-rank.MEDIUM { background: var(--ach-warn); }
.insight-rank.LOW    { background: var(--blue); }

.insight-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
}
.insight-text {
  font-size: 12px;
  color: var(--n-700);
  line-height: 1.5;
  flex: 1;
}
.insight-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.insight-action {
  font-size: 11px;
  color: var(--n-600);
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(0,0,0,.06);
  line-height: 1.4;
}
.insight-confidence {
  font-size: 10px;
  font-weight: 700;
  color: var(--n-500);
}
.insight-impact {
  font-size: 10px;
  color: var(--up-text);
  font-weight: 600;
}

/* ── 18. Action / Recommendation Items ───────────────────────────────────────── */
.rec-list { display: flex; flex-direction: column; gap: 8px; }
.rec-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid;
}
.rec-item.HIGH   { background: #fff1f0; border-color: #fecaca; }
.rec-item.MEDIUM { background: #fffbeb; border-color: #fde68a; }
.rec-item.LOW    { background: #eff6ff; border-color: #bfdbfe; }

.rec-rank {
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rec-rank.HIGH   { background: var(--dn-text); }
.rec-rank.MEDIUM { background: var(--ach-warn); }
.rec-rank.LOW    { background: var(--blue); }

.rec-body { flex: 1; }
.rec-title { font-size: 12px; font-weight: 600; color: var(--n-800); line-height: 1.4; }
.rec-action { font-size: 11px; color: var(--n-600); margin-top: 4px; line-height: 1.4; }
.rec-meta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; align-items: center; }
.rec-savings { font-size: 11px; font-weight: 700; color: var(--up-text); }
.rec-reason  { font-size: 10px; color: var(--n-500); }

/* ── 19. Decision Support ─────────────────────────────────────────────────────── */
.ds-list { display: flex; flex-direction: column; gap: 10px; }
.ds-item {
  background: var(--white);
  border-radius: 10px;
  border: 1px solid var(--n-150);
  overflow: hidden;
}
.ds-question {
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--deep-indigo) 0%, #1d4ed8 100%);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ds-answer {
  padding: 12px 16px;
  font-size: 12px;
  color: var(--n-700);
  line-height: 1.6;
}
.ds-projects {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-project-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--n-600);
  padding: 4px 0;
  border-bottom: 1px solid var(--n-100);
}

/* ── 20. Chart Wrappers ───────────────────────────────────────────────────────── */
.chart-wrap {
  position: relative;
  width: 100%;
}
.chart-h-200 { height: 200px; }
.chart-h-260 { height: 260px; }
.chart-h-320 { height: 320px; }
.chart-h-380 { height: 380px; }
.chart-h-440 { height: 440px; }

/* ── 21. Tables ───────────────────────────────────────────────────────────────── */
.data-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-tbl thead tr {
  background: var(--deep-indigo);
  position: sticky;
  top: 0;
  z-index: 2;
}
.data-tbl th {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 9px 12px;
  white-space: nowrap;
  cursor: pointer;
  text-align: left;
}
.data-tbl th:hover { background: rgba(255,255,255,.1); }
.data-tbl td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--n-100);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.data-tbl tbody tr:hover           { background: #f1f5f9; }
.data-tbl tbody tr:nth-child(even) { background: #f8fafc; }

/* ── 22. Chat Interface ───────────────────────────────────────────────────────── */
.chat-container {
  display: flex;
  flex-direction: column;
  height: 560px;
  border-radius: var(--radius-card);
  border: 1px solid var(--n-150);
  overflow: hidden;
  background: var(--white);
}
.chat-header {
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--deep-indigo) 0%, #1d4ed8 100%);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--n-50);
}
.chat-msg {
  max-width: 75%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 12px;
  line-height: 1.55;
}
.chat-msg.user {
  background: var(--deep-indigo);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-msg.bot {
  background: var(--white);
  color: var(--n-700);
  align-self: flex-start;
  border: 1px solid var(--n-150);
  border-bottom-left-radius: 4px;
}
.chat-msg.bot b { color: var(--n-800); }

.chat-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--n-200);
  display: flex;
  gap: 8px;
  background: var(--white);
}
.chat-input {
  flex: 1;
  height: 36px;
  border: 1px solid var(--n-200);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--n-700);
  outline: none;
  transition: border-color .15s;
}
.chat-input:focus { border-color: var(--blue); }
.chat-send {
  height: 36px;
  padding: 0 16px;
  background: var(--deep-indigo);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background .15s;
}
.chat-send:hover { background: #1d4ed8; }

.chat-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
  border-top: 1px solid var(--n-100);
}
.chat-sug {
  background: var(--n-50);
  border: 1px solid var(--n-200);
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 11px;
  color: var(--n-600);
  cursor: pointer;
  transition: all .15s;
}
.chat-sug:hover { background: var(--orange-bg); border-color: var(--orange-border); color: var(--orange); }

/* ── 23. Risk Badges ──────────────────────────────────────────────────────────── */
.risk-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
}
.risk-high   { background: var(--dn-bg);  color: var(--dn-text); }
.risk-med    { background: #fef3c7;       color: var(--ach-warn); }
.risk-low    { background: var(--up-bg);  color: var(--up-text); }

/* ── 24. Tooltip ─────────────────────────────────────────────────────────────── */
.tooltip-box {
  background: #1f2937;
  color: var(--n-50);
  border-radius: 10px;
  padding: 10px 14px;
  box-shadow: var(--shadow-tooltip);
  min-width: 160px;
  font-size: 12px;
  pointer-events: none;
  position: fixed;
  z-index: 9999;
  display: none;
}
.tooltip-box .tt-title { color: #fff; font-weight: 600; margin-bottom: 4px; }
.tooltip-box .tt-row   { display: flex; justify-content: space-between; gap: 12px; color: var(--n-400); font-size: 11px; }
.tooltip-box .tt-val   { font-weight: 700; }

/* ── 25. Drill-Down Modal ─────────────────────────────────────────────────────── */
.dd-backdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.55);
  backdrop-filter: blur(3px);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: ddFadeIn .18s ease;
}
.dd-backdrop.open { display: flex; }
.dd-panel {
  background: var(--white);
  border-radius: 14px;
  width: min(94vw, 1100px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  animation: ddSlideUp .2s ease;
}
.dd-panel-header {
  background: linear-gradient(135deg, var(--deep-indigo) 0%, #1e40af 100%);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}
.dd-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dd-body { overflow-y: auto; padding: 16px; }

@keyframes ddFadeIn  { from { opacity: 0; }                              to { opacity: 1; } }
@keyframes ddSlideUp { from { transform: translateY(20px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

/* ── 26. Miscellaneous Utilities ─────────────────────────────────────────────── */
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-8   { margin-top: 8px; }
.mt-12  { margin-top: 12px; }

.text-up   { color: var(--up-text); }
.text-dn   { color: var(--dn-text); }
.text-muted { color: var(--n-400); }
.text-sm   { font-size: 11px; }

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--n-100);
  font-size: 12px;
}
.stat-row:last-child { border-bottom: none; }
.stat-row .label { color: var(--n-500); }
.stat-row .value { font-weight: 600; color: var(--n-800); font-variant-numeric: tabular-nums; }

/* ── 27. Notification dot ─────────────────────────────────────────────────────── */
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--orange);
  position: absolute;
  top: 6px; right: 6px;
}

/* ── Executive Summary v2 ─────────────────────────────────────────────────── */
.es-hero-wrap { margin-bottom: 18px; }
.es-type-row  { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }

/* Hero card — 3-column grid */
.es2-hero {
  display: grid;
  grid-template-columns: 272px 1fr 176px;
  background: #fff;
  border-radius: 18px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 6px 32px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.9) inset;
  overflow: hidden;
  min-height: 210px;
}

/* Left: animated counter */
.es2-left {
  background: linear-gradient(155deg,#1e1b4b 0%,#312e81 55%,#3730a3 100%);
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.es2-left::before {
  content:''; position:absolute; top:-50px; right:-40px;
  width:150px; height:150px; border-radius:50%;
  background:rgba(255,255,255,.05); pointer-events:none;
}
.es2-left::after {
  content:''; position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events:none; z-index:0;
}
.es2-left > * { position:relative; z-index:1; }
.es2-eyebrow {
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.es2-big-num {
  font-size: 72px; font-weight: 900;
  color: #fff; line-height: 1; letter-spacing: -3px;
  font-variant-numeric: tabular-nums;
}
.es2-live-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; color: rgba(255,255,255,.55); font-weight: 500;
}
.es2-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(34,197,94,.3);
  animation: es2pulse 2s ease-in-out infinite;
}
@keyframes es2pulse {
  0%,100% { box-shadow:0 0 0 3px rgba(34,197,94,.3); }
  50%      { box-shadow:0 0 0 7px rgba(34,197,94,.1); }
}

/* Middle: Portfolio Health */
.es2-middle {
  padding: 20px 26px;
  display: flex; flex-direction: column; justify-content: center;
  border-right: 1px solid #f1f5f9;
}
.es2-ph-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.es2-ph-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #64748b;
}
.es2-ph-sublabel { font-size: 11px; color: #94a3b8; margin-top: 3px; }
.es2-ph-score-wrap { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.es2-ph-sc-inner {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.es2-ph-sc-num { font-size: 11px; font-weight: 800; color: #1e293b; line-height: 1; }
.es2-status-list { display: flex; flex-direction: column; gap: 8px; }
.es2-si {
  background: var(--bg, rgba(0,0,0,.04));
  border-left: 3px solid var(--clr, #94a3b8);
  border-radius: 10px;
  padding: 9px 10px 9px 11px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap: 10px; row-gap: 7px;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.es2-si-meta  { grid-column:1; grid-row:1; display:flex; align-items:center; gap:7px; }
.es2-si-icon  {
  width:20px; height:20px; border-radius:5px;
  background:var(--clr,#94a3b8);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.es2-si-name  { font-size:12px; font-weight:600; color:#475569; }
.es2-si-right { grid-column:2; grid-row:1; display:flex; align-items:baseline; gap:5px; }
.es2-si-count { font-size:18px; font-weight:800; color:#1e293b; font-variant-numeric:tabular-nums; line-height:1; }
.es2-si-pct   { font-size:11px; font-weight:700; color:var(--clr,#94a3b8); }
.es2-si-bar-wrap {
  grid-column:1/3; grid-row:2;
  height:4px; background:rgba(0,0,0,.07); border-radius:3px; overflow:hidden;
}
.es2-si-bar {
  height:100%; border-radius:3px;
  background:var(--clr,#94a3b8);
  box-shadow:0 0 6px var(--clr,transparent);
  transition:width .9s cubic-bezier(.4,0,.2,1);
}
.es2-left-chips { display:flex; gap:7px; flex-wrap:wrap; }
.es2-chip { font-size:11px; font-weight:700; padding:3px 9px; border-radius:20px; }

/* Right: donut */
.es2-right { display:flex; align-items:center; justify-content:center; padding:16px; }
.es2-donut-wrap { position:relative; display:flex; align-items:center; justify-content:center; }
.es2-donut-inner { position:absolute; text-align:center; pointer-events:none; }
.es2-donut-pct { font-size:26px; font-weight:900; color:#1e293b; line-height:1; letter-spacing:-.5px; }
.es2-donut-sub { font-size:10px; color:#94a3b8; font-weight:700; text-transform:uppercase; letter-spacing:.08em; margin-top:3px; }

/* ── Type Tiles ──────────────────────────────────────────────────────────── */
.es2-type-card {
  border-radius: 16px; overflow: hidden;
  border: 1.5px solid #e2e8f0;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  transition: box-shadow .3s, transform .28s, border-color .3s;
}
.es2-type-card:hover {
  box-shadow: 0 16px 44px rgba(0,0,0,.12), 0 0 0 2.5px var(--tc-glow,#6366f1);
  transform: translateY(-7px);
  border-color: transparent;
}

.es2-tc-top {
  padding: 18px 18px 16px;
  display: flex; align-items: center; justify-content: space-between;
  position: relative; overflow: hidden;
  min-height: 112px;
}
.es2-tc-top::before {
  content:''; position:absolute; bottom:-22px; left:-18px;
  width:90px; height:90px; border-radius:50%;
  background:rgba(255,255,255,.07); pointer-events:none;
}
.es2-tc-top::after {
  content:''; position:absolute; top:-28px; left:50%;
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,.05); pointer-events:none;
}
.es2-tc-icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.18); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.es2-tc-top-lft { display:flex; flex-direction:column; gap:12px; position:relative; z-index:1; }
.es2-tc-num-wrap { text-align:left; }
.es2-tc-num      { font-size:40px; font-weight:900; color:#fff; line-height:1; letter-spacing:-2px; font-variant-numeric:tabular-nums; text-shadow:0 2px 12px rgba(0,0,0,.18); }
.es2-tc-projects { font-size:10px; color:rgba(255,255,255,.60); font-weight:600; text-transform:uppercase; letter-spacing:.07em; }
.es2-ring-svg    { flex-shrink:0; position:relative; z-index:1; filter:drop-shadow(0 0 8px rgba(255,255,255,.22)); }

.es2-tc-bot  { background:#fff; padding:14px 20px 18px; }
.es2-tc-name { font-size:14px; font-weight:700; color:#1e293b; }
.es2-tc-desc { font-size:11px; color:#94a3b8; margin-top:2px; margin-bottom:10px; }
.es2-tc-bar-wrap { height:5px; background:#f1f5f9; border-radius:3px; overflow:hidden; margin-bottom:8px; }
.es2-tc-bar  { height:100%; border-radius:3px; transition:width 1.1s cubic-bezier(.4,0,.2,1); }
.es2-tc-share{ font-size:11px; color:#64748b; font-weight:600; }

/* ── Dark mode ──────────────────────────────────────────────────────────── */
:root[data-theme="dark"] .es2-hero,
:root[data-theme="dark"] .es2-tc-bot   { background:#1e293b; }
:root[data-theme="dark"] .es2-hero,
:root[data-theme="dark"] .es2-type-card { border-color:#334155; }
:root[data-theme="dark"] .es2-middle   { border-right-color:#334155; }
:root[data-theme="dark"] .es2-si       { background:rgba(255,255,255,.05); }
:root[data-theme="dark"] .es2-si-name  { color:#94a3b8; }
:root[data-theme="dark"] .es2-si-count { color:#f1f5f9; }
:root[data-theme="dark"] .es2-si-bar-wrap { background:rgba(255,255,255,.06); }
:root[data-theme="dark"] .es2-tc-bar-wrap { background:#334155; }
:root[data-theme="dark"] .es2-tc-name  { color:#f1f5f9; }
:root[data-theme="dark"] .es2-ph-sc-num { color:#f1f5f9; }
:root[data-theme="dark"] .es2-donut-pct { color:#f1f5f9; }

/* ── Type card CTA hint ────────────────────────────────────────────────────── */
.es2-type-card { cursor: pointer; }
.es2-tc-cta {
  font-size: 11px; font-weight: 600; color: #94a3b8;
  margin-top: 6px; opacity: 0; transition: opacity .2s;
}
.es2-type-card:hover .es2-tc-cta { opacity: 1; }

/* ── Type Drill-Down Dropdown ─────────────────────────────────────────────── */
.td-drop {
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 40px rgba(0,0,0,.10);
  background: #fff;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  transition: max-height .45s cubic-bezier(.4,0,.2,1), opacity .3s ease;
  position: relative;
}
.td-drop.open {
  max-height: 540px;
  opacity: 1;
  pointer-events: auto;
}
.td-drop.open::before {
  content: '';
  position: absolute;
  top: -8px;
  left: var(--arrow-left, 50%);
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--arrow-color, #6366f1);
  z-index: 2;
}

.td-header {
  padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; flex-shrink: 0;
}
.td-title   { font-size: 17px; font-weight: 700; }
.td-subtitle{ font-size: 12px; color: rgba(255,255,255,.7); margin-top: 3px; }
.td-close {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255,255,255,.18); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0; transition: background .15s;
}
.td-close:hover { background: rgba(255,255,255,.32); }

.td-body { max-height: 430px; overflow-y: auto; }
.td-loader { padding: 24px 20px; }

.td-table-wrap { overflow-x: auto; }
.td-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.td-table thead th {
  background: #f8fafc;
  padding: 10px 12px;
  text-align: left;
  font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #64748b;
  border-bottom: 1px solid #e2e8f0;
  position: sticky; top: 0; z-index: 1;
}
.td-table tbody tr { border-bottom: 1px solid #f1f5f9; transition: background .1s; }
.td-table tbody tr:hover { background: #f8fafc; }
.td-table tbody td { padding: 10px 12px; color: #334155; vertical-align: middle; }
.td-idx   { color: #94a3b8; font-size: 11px; width: 36px; }
.td-name  { font-weight: 600; color: #1e293b; max-width: 170px; }
.td-brand { color: #475569; max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-stage { color: #64748b; font-size: 11px; max-width: 130px; }

:root[data-theme="dark"] .td-drop { background: #1e293b; border-color: #334155; }
:root[data-theme="dark"] .td-table thead th { background: #0f172a; border-bottom-color: #334155; color: #475569; }
:root[data-theme="dark"] .td-table tbody tr { border-bottom-color: #334155; }
:root[data-theme="dark"] .td-table tbody tr:hover { background: #0f172a; }
:root[data-theme="dark"] .td-table tbody td { color: #cbd5e1; }
:root[data-theme="dark"] .td-name { color: #f1f5f9; }

/* ── Portfolio Overview ────────────────────────────────────────────────────── */
.po-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

/* BU toggle pill buttons */
.po-bu-toggle {
  display: flex; gap: 4px; align-items: center; flex-shrink: 0;
}
.po-bu-btn {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 20px;
  border: 1px solid #e2e8f0;
  background: transparent; color: #64748b;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.po-bu-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.po-bu-btn.active { background: #6366f1; color: #fff; border-color: #6366f1; }

/* Heatmap — full-coverage CSS grid */
#po-heatmap-card { display: flex; flex-direction: column; }
#po-heatmap-body { display: block; overflow: visible; }

.hm-grid {
  display: flex; flex-direction: column; height: 100%;
}
.hm-hdr-row, .hm-data-row, .hm-footer {
  display: grid;
  grid-template-columns: 138px repeat(4, 1fr) 52px;
}
/* Header */
.hm-hdr-row {
  flex: 0 0 32px;
  background: #f1f5f9;
  border-bottom: 2px solid #e2e8f0;
}
.hm-hdr-cat {
  display: flex; align-items: center; padding: 0 10px;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: #64748b;
}
.hm-hdr-type {
  display: flex; align-items: center; justify-content: center;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; color: var(--t-color, #6366f1);
  border-left: 1px solid #e2e8f0;
}
.hm-hdr-ttl { color: #334155; border-left: 2px solid #e2e8f0; }
/* Data section */
.hm-data { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hm-data-row { flex: 1; border-bottom: 1px solid rgba(0,0,0,0.05); }
.hm-data-row:last-child { border-bottom: none; }
/* Category label */
.hm-cat-cell {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 8px 0 10px; background: #fafbfd;
  border-right: 1px solid #eef0f4; gap: 1px; overflow: hidden;
}
.hm-cat-name { font-size: 10.5px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-cat-sub  { font-size: 8.5px; font-weight: 600; color: #94a3b8; }
/* Value cell */
.hm-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
  border-left: 1px solid rgba(255,255,255,0.45);
  position: relative; cursor: default; transition: filter .15s;
}
.hm-cell:hover { filter: brightness(.88); }
.hm-num  { font-size: 17px; font-weight: 900; color: rgba(0,0,0,0.68); line-height: 1; }
.hm-pct  {
  font-size: 8.5px; font-weight: 700; color: rgba(0,0,0,0.48);
  background: rgba(255,255,255,0.55); padding: 1px 4px;
  border-radius: 8px; line-height: 1.4;
}
.hm-dom-pip {
  position: absolute; top: 4px; right: 4px;
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(0,0,0,0.30);
}
/* Total column */
.hm-tot-cell {
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #0f172a;
  background: #f8fafc; border-left: 2px solid #e2e8f0;
}
/* Footer */
.hm-footer {
  flex: 0 0 36px; background: #eef2ff; border-top: 2px solid #c7d2fe;
}
.hm-foot-lbl { font-size: 9.5px; font-weight: 700; color: #4338ca; background: #e0e7ff; }
.hm-foot-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  border-left: 1px solid rgba(99,102,241,0.18);
}
.hm-foot-cell .hm-num  { font-size: 12px; color: var(--t-color, #6366f1); }
.hm-foot-cell .hm-pct  { background: rgba(99,102,241,0.10); color: var(--t-color, #6366f1); }
.hm-grand {
  font-size: 14px; font-weight: 900; color: #4338ca;
  background: #e0e7ff; border-left: 2px solid #c7d2fe;
  display: flex; align-items: center; justify-content: center;
}

/* Dark mode */
:root[data-theme="dark"] .po-bu-btn        { border-color: #334155; color: #94a3b8; }
:root[data-theme="dark"] .po-bu-btn:hover  { background: #1e293b; }
:root[data-theme="dark"] .po-bu-btn.active { background: #6366f1; color: #fff; }
:root[data-theme="dark"] .hm-hdr-row       { background: #0f172a; border-bottom-color: #334155; }
:root[data-theme="dark"] .hm-hdr-cat       { color: #475569; }
:root[data-theme="dark"] .hm-hdr-type      { border-left-color: #334155; }
:root[data-theme="dark"] .hm-cat-cell      { background: #0f172a; border-right-color: #1e293b; }
:root[data-theme="dark"] .hm-cat-name      { color: #e2e8f0; }
:root[data-theme="dark"] .hm-data-row      { border-bottom-color: #1e293b; }
:root[data-theme="dark"] .hm-num           { color: rgba(255,255,255,0.80); }
:root[data-theme="dark"] .hm-pct           { color: rgba(255,255,255,0.55); background: rgba(0,0,0,0.30); }
:root[data-theme="dark"] .hm-tot-cell      { background: #0f172a; color: #f1f5f9; border-left-color: #334155; }
:root[data-theme="dark"] .hm-footer        { background: #1e1b4b; border-top-color: #4338ca; }
:root[data-theme="dark"] .hm-foot-lbl      { background: #1e1b4b; color: #a5b4fc; }
:root[data-theme="dark"] .hm-grand         { background: #1e1b4b; color: #a5b4fc; }

/* ── Brand×Type card ────────────────────────────────────────────────────────── */
#po-brand-card {
  position: relative;
  overflow: hidden;
}
#po-brand-chart {
  position: relative;
  z-index: 1;
}

/* ── Glossy Stacked H-Bar — Compact ──────────────────────────────────────── */
.shb-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 8px 12px 6px;
  box-sizing: border-box;
}
.shb-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow-y: auto;
  min-height: 0;
}
.shb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 4px;
  border-radius: 6px;
  transition: background 0.15s;
}
.shb-row:hover { background: rgba(99,102,241,0.06); }
.shb-lbl {
  flex: 0 0 108px;
  font-size: 9px;
  font-weight: 700;
  color: #374151;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.shb-track {
  flex: 1;
  height: 18px;
  background: rgba(0,0,0,0.05);
  border-radius: 20px;
  padding: 2px;
  box-sizing: border-box;
}
.shb-bar {
  display: flex;
  height: 14px;
  width: 0;
  border-radius: 12px;
  overflow: hidden;
  transition: width 0.80s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow:
    0 2px 6px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.50),
    inset 0 -1px 0 rgba(0,0,0,0.14);
}
.shb-bar.shb-go { width: var(--bar-w); }
.shb-seg {
  height: 100%;
  flex-shrink: 0;
  background-color: var(--seg-color);
  background-image: linear-gradient(
    to bottom,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.18) 35%,
    rgba(0,0,0,0.00) 55%,
    rgba(0,0,0,0.16) 100%
  );
  border-right: 1px solid rgba(255,255,255,0.40);
  transition: filter 0.12s;
  cursor: default;
}
.shb-seg:last-child { border-right: none; }
.shb-seg:hover { filter: brightness(1.10) saturate(1.10); }
/* Chips: dot + number, inline after bar */
.shb-chips {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.shb-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 800;
  color: var(--seg-color);
  white-space: nowrap;
  cursor: default;
}
.shb-chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--seg-color);
  flex-shrink: 0;
  opacity: 0.75;
}
.shb-val { flex: 0 0 auto; }
.shb-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 6px;
  background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  border-radius: 20px;
  box-shadow: 0 2px 5px rgba(99,102,241,0.38);
}
.shb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 7px;
  justify-content: center;
  padding-top: 7px;
  border-top: 1px solid rgba(0,0,0,0.07);
}
.shb-leg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  color: #6b7280;
}
.shb-leg-dot {
  width: 12px;
  height: 8px;
  border-radius: 3px;
  flex-shrink: 0;
  background-color: var(--seg-color);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.45) 0%, rgba(0,0,0,0.12) 100%);
  box-shadow: 0 1px 3px rgba(0,0,0,0.16);
}
:root[data-theme="dark"] .shb-lbl       { color: #e5e7eb; }
:root[data-theme="dark"] .shb-row:hover { background: rgba(99,102,241,0.10); }
:root[data-theme="dark"] .shb-track     { background: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .shb-bar       { box-shadow: 0 2px 6px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.16), inset 0 -1px 0 rgba(0,0,0,0.26); }
:root[data-theme="dark"] .shb-leg       { color: #9ca3af; }
:root[data-theme="dark"] .shb-legend    { border-top-color: rgba(255,255,255,0.08); }

/* ── Isometric chart tooltip ─────────────────────────────────────────────── */
.iso-tip {
  position: fixed;
  display: none;
  z-index: 9999;
  background: #1f2937;
  color: #f9fafb;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 11px;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.30);
  min-width: 160px;
  border: 1px solid rgba(255,255,255,0.08);
}
.iso-tip-brand {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.iso-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 4px 0 2px;
}
.iso-tip-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.iso-tip-type {
  flex: 1;
  color: #9ca3af;
  font-weight: 500;
}
.iso-tip-val {
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.iso-tip-sub {
  font-size: 9.5px;
  color: #6b7280;
  margin-top: 5px;
}

/* ── Portfolio full-width card ───────────────────────────────────────────── */
.po-full-card {
  margin-top: 16px;
}

/* ── Brand × Lead Matrix table ───────────────────────────────────────────── */
.pbm-scroll {
  width: 100%;
  overflow-x: auto;
}
.pbm-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: 12px;
  font-family: inherit;
}
.pbm-head-row { background: #f8fafc; }
.pbm-group-row, .pbm-sub-row { background: #f8fafc; }

/* Group-level header (NPD Projects / DTV / Tech Cons / NPD Total) */
.pbm-th-grp {
  padding: 8px 12px 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
  vertical-align: middle;
}
/* Sub-level header (Emami Led / 3P Led) */
.pbm-th-sub-col {
  padding: 4px 10px 7px;
  text-align: center;
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}

.pbm-th {
  padding: 9px 10px 7px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--col-color, #64748b);
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 2.5px solid var(--col-color, #e2e8f0);
  white-space: nowrap;
}
.pbm-th-brand {
  text-align: left;
  color: #64748b;
  border-bottom-color: #e2e8f0;
  min-width: 130px;
  vertical-align: middle;
}
.pbm-th-sep {
  border-left: 2px solid #e2e8f0;
}
.pbm-th-sub {
  font-size: 8.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  opacity: .75;
  margin-top: 2px;
}
.pbm-row { border-bottom: 1px solid #f1f5f9; }
.pbm-row:nth-child(even) { background: #fafbff; }
.pbm-brand-td {
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
  max-width: 160px;
}
.pbm-brand-foot {
  font-size: 11.5px;
  font-weight: 700;
  color: #1e293b;
}
.pbm-rank {
  display: inline-block;
  width: 16px;
  font-size: 9px;
  font-weight: 800;
  color: rgba(0,0,0,0.22);
  margin-right: 3px;
}
.pbm-rank-top { color: #f97316; }
.pbm-cell {
  padding: 6px 8px;
  text-align: center;
  min-width: 80px;
  vertical-align: middle;
  transition: filter .12s;
}
.pbm-cell:hover { filter: brightness(.94); }
.pbm-cell-sep { border-left: 2px solid #e2e8f0; }
.pbm-cell-foot { border-top: 2px solid #e2e8f0; background: #f8fafc !important; }
.pbm-num {
  font-size: 17px;
  font-weight: 900;
  color: #1e293b;
  line-height: 1.1;
}
.pbm-badges {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: 3px;
  flex-wrap: wrap;
}
.pbm-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.pbm-hold {
  color: #b45309;
  background: rgba(245,158,11,0.13);
}
.pbm-ft {
  color: #7c3aed;
  background: rgba(139,92,246,0.12);
}

/* ── Skin + Deo Deep Dive ──────────────────────────────────────────────────── */
#sdm-plot { filter: drop-shadow(0 4px 14px rgba(99,102,241,0.13)); }
.sdm-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 8px;
}
.sdm-filter-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .05em;
}
/* ── Single-brand deep-dive ─────────────────────────────────────────── */
.sdm-sb-wrap   { padding: 24px 28px 28px; }
.sdm-sb-hdr    { display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.sdm-sb-name   { font-size:26px; font-weight:800; color:#1e293b; letter-spacing:-.03em; }
.sdm-sb-badge  {
  background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
  color:#fff; font-size:11.5px; font-weight:700;
  padding:5px 16px; border-radius:999px; letter-spacing:.03em;
  box-shadow: 0 2px 8px rgba(99,102,241,.35);
}
.sdm-sb-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 22px;
}
.sdm-sb-kpi {
  background: var(--bg, #f8fafc);
  border-radius: 14px;
  padding: 20px 20px 16px;
  border-left: 4px solid var(--a, #6366f1);
  position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  cursor: default;
}
.sdm-sb-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.09);
}
.sdm-sb-kpi::after {
  content:''; position:absolute; top:-28px; right:-20px;
  width:90px; height:90px; border-radius:50%;
  background: var(--a, #6366f1); opacity:.07; pointer-events:none;
}
.sdm-sb-kpi-num  { font-size:40px; font-weight:800; color:#1e293b; line-height:1; letter-spacing:-.04em; }
.sdm-sb-kpi-lbl  { font-size:10.5px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.07em; margin-top:8px; }
.sdm-sb-kpi-pct  { font-size:12px; font-weight:600; color:var(--a); margin-top:4px; }

.sdm-sb-donuts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.sdm-sb-donut-panel {
  background: #f8fafc; border-radius: 14px; padding: 18px 16px 14px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
.sdm-sb-donut-ttl {
  font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; text-align:center; margin-bottom:2px;
}
.sdm-sb-legend {
  display: flex; gap: 7px; justify-content: center;
  flex-wrap: wrap; margin-top: 10px;
}
.sdm-sb-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size:11.5px; font-weight:600; color:#475569;
  background:#fff; border:1px solid #e2e8f0;
  padding:3px 11px 3px 7px; border-radius:999px; white-space:nowrap;
}
.sdm-sb-pill-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sdm-sb-pill-pct { color:#94a3b8; font-weight:400; }

/* Back button + click hint */
.sdm-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 18px;
  background: none; border: 1px solid #e2e8f0; border-radius: 8px;
  padding: 7px 16px; font-size: 12px; font-weight: 600; color: #64748b;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.sdm-back-btn:hover { background: #f1f5f9; color: #1e293b; border-color: #cbd5e1; }
.sdm-click-hint {
  text-align: center; font-size: 11px; color: #94a3b8;
  margin: 4px 0 0; letter-spacing: .02em;
}
:root[data-theme="dark"] .sdm-back-btn { border-color:rgba(255,255,255,.12); color:#94a3b8; }
:root[data-theme="dark"] .sdm-back-btn:hover { background:rgba(255,255,255,.06); color:#e2e8f0; }

/* ── Brand pills ──────────────────────────────────────────────────────────── */
.sdm-brand-pills-wrap {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 14px 2px 18px;
}
.sdm-brand-pill {
  padding: 6px 18px; border-radius: 999px;
  border: 1.5px solid #e2e8f0; background: #fff;
  font-size: 12px; font-weight: 600; color: #475569;
  cursor: pointer; transition: all .15s ease;
  white-space: nowrap;
}
.sdm-brand-pill:hover {
  border-color: #6366f1; color: #6366f1;
  background: rgba(99,102,241,.05);
}
.sdm-brand-pill.active {
  background: #6366f1; border-color: #6366f1; color: #fff;
  box-shadow: 0 2px 10px rgba(99,102,241,.32);
}
:root[data-theme="dark"] .sdm-brand-pill {
  background: rgba(30,41,59,.6); border-color: rgba(255,255,255,.1); color: #94a3b8;
}
:root[data-theme="dark"] .sdm-brand-pill.active { background:#6366f1; color:#fff; border-color:#6366f1; }

/* ── Complexity Map — overall risk-distribution pill strip ────────────────── */
.cmx-pct-strip {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 14px 2px 18px;
}
.cmx-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 12px;
  background: #fff; border: 1.5px solid #e2e8f0;
  font-size: 12.5px; font-weight: 600; color: #475569;
}
.cmx-pill-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.cmx-pill-val { font-size: 16px; font-weight: 800; color: #1e293b; }
.cmx-pill-lbl { color: #94a3b8; font-weight: 600; }
:root[data-theme="dark"] .cmx-pill {
  background: rgba(30,41,59,.6); border-color: rgba(255,255,255,.1); color: #94a3b8;
}
:root[data-theme="dark"] .cmx-pill-val { color: #f1f5f9; }

/* ── Brand Complexity Map — small-multiples donut grid ─────────────────────── */
.cmxb-legend-row {
  display: flex; flex-wrap: wrap; gap: 16px;
  padding: 16px 20px 4px;
}
.cmxb-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: #64748b;
}
.cmxb-legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cmxb-legend-sep { width: 1px; height: 16px; background: #e2e8f0; margin: 0 4px; }
:root[data-theme="dark"] .cmxb-legend-sep { background: rgba(255,255,255,.15); }
:root[data-theme="dark"] .cmxb-legend-item { color: #94a3b8; }

/* ── Brand Complexity Map — segmented pill bars ─────────────────────────────── */
.cmxp-group { padding: 6px 24px 14px; }
.cmxp-group-hdr { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cmxp-group-title { font-size: 13px; font-weight: 800; letter-spacing: .02em; }
.cmxp-list { display: flex; flex-direction: column; gap: 14px; }
.cmxp-row {
  display: flex; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 6px 8px; margin: -6px -8px; border-radius: 10px;
  transition: background .15s ease;
}
.cmxp-row:hover { background: rgba(99,102,241,.06); }
.cmxp-row:hover .cmxp-track { box-shadow: 0 0 0 2px rgba(99,102,241,.25); }
.cmxp-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cmxp-brand {
  font-size: 12.5px; font-weight: 700; color: #334155;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cmxp-count { font-size: 11px; color: #94a3b8; white-space: nowrap; }
.cmxp-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cmxp-pct-badge {
  font-size: 10.5px; font-weight: 700; color: #b45309;
  background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.3);
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.cmxp-pct-badge-lg { font-size: 11.5px; padding: 5px 14px; }
:root[data-theme="dark"] .cmxp-pct-badge { color: #fbbf24; background: rgba(245,158,11,.16); border-color: rgba(245,158,11,.35); }
.cmxp-track {
  display: flex; width: 100%; height: 16px;
  border-radius: 999px; overflow: hidden; background: #eef2f7;
  transition: box-shadow .15s ease;
}
.cmxp-seg { height: 100%; transition: filter .15s ease; }
.cmxp-seg:hover { filter: brightness(1.12); }

/* Single-brand deep dive (reuses .sdm-sb-* tile language + .td-table for the
   project list) */
.cmxp-sb-kpis { grid-template-columns: repeat(5, 1fr); }
.cmxb-cat-badge {
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; letter-spacing: .02em;
}
@media (max-width: 900px) {
  .cmxp-sb-kpis { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}
.cmxp-kpi-btn { cursor: pointer; }
.cmxp-kpi-btn.active { box-shadow: 0 0 0 2px var(--a) inset; }
.cmxp-proj-hint { font-size: 11px; color: #94a3b8; margin: -10px 0 12px; }
.cmxp-proj-count { font-size: 12px; font-weight: 700; color: #475569; margin-bottom: 10px; }
.cmxp-lvl-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
:root[data-theme="dark"] .cmxp-proj-count { color: #cbd5e1; }
:root[data-theme="dark"] .cmxp-brand { color: #e2e8f0; }
:root[data-theme="dark"] .cmxp-count { color: #64748b; }
:root[data-theme="dark"] .cmxp-track { background: #1e293b; }

/* dark-mode single-brand */
:root[data-theme="dark"] .sdm-sb-name,
:root[data-theme="dark"] .sdm-sb-kpi-num { color:#f1f5f9; }
:root[data-theme="dark"] .sdm-sb-kpi          { background:rgba(30,41,59,.7); }
:root[data-theme="dark"] .sdm-sb-donut-panel  { background:rgba(30,41,59,.6); }
:root[data-theme="dark"] .sdm-sb-pill         { background:rgba(30,41,59,.8); border-color:rgba(255,255,255,.1); color:#cbd5e1; }

.sdm-scroll { width: 100%; overflow-x: auto; }
.sdm-table {
  width: 100%;
  min-width: 960px;
  border-collapse: collapse;
  font-family: inherit;
}
.sdm-group-row, .sdm-sub-row { background: #f8fafc; }
.sdm-th-brand {
  padding: 10px 16px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #475569;
  min-width: 150px;
  border-bottom: 2px solid #e2e8f0;
  vertical-align: middle;
}
.sdm-th-grp {
  padding: 9px 14px 7px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  white-space: nowrap;
  vertical-align: middle;
}
.sdm-th-sep { border-left: 2px solid #e2e8f0; }
.sdm-th-sub {
  padding: 5px 10px 7px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  white-space: nowrap;
}
.sdm-th-subtot { font-weight: 800; }
.sdm-row { border-bottom: 1px solid #f1f5f9; }
.sdm-row:nth-child(even) { background: #fafbff; }
.sdm-brand-td {
  padding: 8px 16px;
  font-size: 12.5px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.sdm-brand-foot {
  font-size: 13px;
  font-weight: 800;
  color: #1e293b;
}
.sdm-cell {
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
  transition: filter .12s;
}
.sdm-cell:hover { filter: brightness(.93); }
.sdm-cell-sep { border-left: 2px solid #e2e8f0; }
.sdm-cell-subtot { background: rgba(59,130,246,0.03) !important; }
.sdm-cell-grand  { border-left: 2px solid #e2e8f0; background: rgba(15,23,42,0.03) !important; }
.sdm-cell-foot   { border-top: 2px solid #e2e8f0; background: #f8fafc !important; }
.sdm-num {
  font-size: 17px;
  font-weight: 900;
  color: #1e293b;
  line-height: 1.1;
}
.sdm-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.sdm-panel { min-width: 0; }
.sdm-panel-right { border-left: 2px solid #f1f5f9; }
.sdm-panel-hd {
  padding: 14px 12px 4px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-align: center;
}

/* ── Achievement Dashboard — KPI strip + funnel charts ──────────────────────── */
.ach-kpi-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 18px;
}
.ach-kpi {
  background: #f8fafc; border-radius: 14px; padding: 18px 18px 14px;
  border-left: 4px solid var(--a, #6366f1);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ach-kpi:hover { transform: translateY(-3px); box-shadow: 0 8px 28px rgba(0,0,0,.09); }
.ach-kpi-num { font-size: 32px; font-weight: 800; color: #1e293b; line-height: 1; letter-spacing: -.03em; }
.ach-kpi-lbl {
  font-size: 10.5px; font-weight: 700; color: #94a3b8;
  text-transform: uppercase; letter-spacing: .06em; margin-top: 8px;
}
.ach-kpi-sub { font-size: 12px; font-weight: 600; color: var(--a); margin-top: 4px; }

.ach-cat-grid { display: flex; flex-wrap: wrap; gap: 18px; padding: 18px 20px; }
.ach-cat-tile {
  flex: 1 1 300px; min-width: 280px;
  background: #f8fafc; border-radius: 14px; padding: 14px 8px 6px;
}
.ach-cat-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12.5px; font-weight: 800; color: #1e293b; padding: 0 12px 6px;
}
.ach-cat-total { font-size: 11px; font-weight: 600; color: #94a3b8; }

:root[data-theme="dark"] .ach-kpi,
:root[data-theme="dark"] .ach-cat-tile { background: rgba(30,41,59,.7); }
:root[data-theme="dark"] .ach-kpi-num,
:root[data-theme="dark"] .ach-cat-title { color: #f1f5f9; }
@media (max-width: 900px) {
  .ach-kpi-row { grid-template-columns: repeat(2, 1fr); }
}