/* Engineering Org Dashboard — dark theme matching the reference mockups. */
:root {
  --surface-0: #0f0f0e;
  --surface-1: #1a1a19;
  --surface-2: #232322;
  --text-1: #ffffff;
  --text-2: #c3c2b7;
  --text-3: #8b8a83;
  --border: #2e2e2c;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--surface-0);
  color: var(--text-1);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.page {
  max-width: 1500px;
  margin: 0 auto;
  padding: 28px 32px 60px;
}

.page-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin: 4px 0 2px;
}

.snapshot-meta {
  color: var(--text-3);
  font-size: 12px;
  margin-bottom: 22px;
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 22px;
}

.section-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text-1);
}

.section-sub {
  color: var(--text-2);
  font-size: 13px;
  margin: 0 0 20px;
}

/* A term with an explainer on hover: dotted underline + help cursor. */
.explain {
  border-bottom: 1px dotted var(--text-3);
}

/* ---------------------------------------------------------------------------
   Instant CSS tooltip — any element with class .has-tip and a data-tip
   attribute shows a styled bubble on hover (no ~1s browser-title delay).
   data-tip may contain newlines (rendered via white-space: pre-line).
   --------------------------------------------------------------------------- */
.has-tip {
  position: relative;
  cursor: help;
}
.has-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  z-index: 50;
  width: max-content;
  max-width: 300px;
  white-space: pre-line;      /* honor \n in data-tip, wrap long lines */
  text-align: left;
  background: #0b0b0a;
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 10px 12px;
  font-size: 11.5px;
  line-height: 1.45;
  text-transform: none;       /* stat labels are uppercased; the tip isn't */
  letter-spacing: normal;
  font-weight: 400;
  /* hidden until hover */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
  pointer-events: none;
}
.has-tip:hover::after {
  opacity: 1;
  visibility: visible;
}
/* Tooltips near the right edge (e.g. the 3rd stat cell) flip to right-aligned
   so the 300px bubble doesn't overflow the tile / viewport. */
.has-tip.tip-right::after { left: auto; right: 0; }

/* --- Segment filter --- */
.segment-filter {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.filter-label {
  color: var(--text-3);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  flex: 0 0 auto;
}
.segment-dd {
  flex: 0 0 340px;
}

/* --- Organization selection grid (3 x 3) --- */
.selector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 40px;
}

.leader-dd {
  flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Dash 4.4.1 Dropdown = a NATIVE `dash-dropdown-*` component (NOT react-select,
   NOT emotion). Verified against the rendered DOM via headless Chromium:
     .dash-dropdown            root <button> (ships a WHITE background -> the
                               invisible-name bug was white text on white box)
     .dash-dropdown-value-item the selected label
     .dash-dropdown-content    the menu popover (portal'd)
     .dash-dropdown-search     the type-to-search input
     .dash-dropdown-option /   an option row; `.selected` on the chosen one
       .dash-options-list-option
   All rules are scoped to .leader-dd so they don't touch other dcc.Dropdowns.
   --------------------------------------------------------------------------- */

/* Control button: dark field with a light underline, not a white pill. */
.leader-dd.dash-dropdown {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #4a4a47 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 38px;
  padding: 4px 2px !important;
}
.leader-dd.dash-dropdown:hover,
.leader-dd.dash-dropdown:focus,
.leader-dd.dash-dropdown:focus-within {
  border-bottom-color: #7a7a75 !important;
  outline: none !important;
}

/* Selected value + placeholder text -> light. */
.leader-dd .dash-dropdown-value,
.leader-dd .dash-dropdown-value-item,
.leader-dd .dash-dropdown-value-item * {
  color: var(--text-1) !important;
  font-size: 15px;
}
.leader-dd .dash-dropdown-placeholder,
.leader-dd .dash-dropdown-value-item.placeholder {
  color: var(--text-3) !important;
}

/* Arrow + clear icons -> muted grey (they default to near-black). */
.leader-dd .dash-dropdown-clear,
.leader-dd svg,
.leader-dd svg path {
  color: #8b8a83 !important;
  fill: currentColor !important;
}

/* Menu popover: opaque dark surface so the light option text is legible. */
.dash-dropdown-content {
  background: var(--surface-2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  color: var(--text-1) !important;
}

/* Search box inside the open menu (the element itself is
   <input class="dash-dropdown-search">, not a nested input). */
input.dash-dropdown-search,
.dash-dropdown-search {
  background: var(--surface-1) !important;
  color: var(--text-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
}
input.dash-dropdown-search::placeholder {
  color: var(--text-3) !important;
}

/* Option rows. */
.dash-dropdown-option,
.dash-options-list-option {
  background: transparent !important;
  color: var(--text-2) !important;
}
.dash-dropdown-option:hover,
.dash-options-list-option:hover,
.dash-dropdown-option.selected,
.dash-options-list-option.selected {
  background: #313130 !important;
  color: var(--text-1) !important;
}

.unresolved-note {
  margin-top: 20px;
  color: #e0a35a;
  font-size: 12px;
}

/* --- chart rows --- */
.chart-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.chart-row-1 {
  margin-top: 8px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}
.chart-row-2 > div:first-child { border-right: 1px solid var(--border); }

/* ---------------------------------------------------------------------------
   KPI stat tiles — one card per selected org. Headline number + within-org
   IC/leader split bar + senior-IC (G9-11) bench dots. These encode a SINGLE
   org each (composition), never cross-org magnitude — the span lollipop does
   the comparing.
   --------------------------------------------------------------------------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}
.kpi-placeholder {
  color: var(--text-3);
  font-size: 13px;
  padding: 20px 2px;
}
.kpi-tile {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
}
.kpi-tile--empty { opacity: 0.6; }
.kpi-empty-note {
  color: var(--text-3);
  font-size: 12px;
  margin-top: 6px;
}

.kpi-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.kpi-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-1);
  /* subtle ring so the circle reads as a photo slot even before a photo loads */
  border: 1px solid var(--border);
  box-shadow: 0 0 0 2px var(--surface-2);
}
.kpi-avatar--initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #e8e7dd;
  /* tinted gradient fill so an un-photo'd avatar looks deliberate, not empty */
  background: linear-gradient(135deg, #2f6fb0 0%, #199e70 100%);
  border-color: transparent;
}
.kpi-nameblock {
  flex: 1 1 auto;
  min-width: 0;
}
.kpi-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.25;
}
.kpi-level {
  font-size: 10.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.kpi-span-chip {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: #7fd6bd;
  background: rgba(25, 158, 112, 0.15);
  border: 1px solid rgba(25, 158, 112, 0.35);
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}

.kpi-total {
  font-size: 34px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
  letter-spacing: -0.5px;
}
.kpi-total-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  margin: 4px 0 14px;
}

/* Org-structure strip — layers-deep + manager leverage, small stat cells. */
.kpi-structure {
  display: flex;
  gap: 10px;
  margin: 0 0 14px;
}
.kpi-stat {
  flex: 1 1 0;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 0;
}
.kpi-stat--flag {
  border-color: rgba(224, 163, 90, 0.5);
  background: rgba(224, 163, 90, 0.08);
}
.kpi-stat-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.1;
}
.kpi-stat--flag .kpi-stat-val { color: #e0a35a; }
.kpi-stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--text-3);
  margin-top: 3px;
  line-height: 1.2;
  /* wrap rather than truncate so multi-word labels ("mgr-of-mgrs") stay
     readable when three stat cells share the row on a narrow tile */
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Grade-inversion callout — slim amber line under the structure strip, shown
   only when the org has >=1 inversion. Full example list in the hover. */
.kpi-inversions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: -6px 0 14px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(224, 163, 90, 0.08);
  border: 1px solid rgba(224, 163, 90, 0.3);
  font-size: 11px;
}
.kpi-inv-icon { color: #e0a35a; font-size: 12px; }
.kpi-inv-text { color: #e0a35a; font-weight: 600; }

/* 100%-stacked split bar (ICs vs people-leaders) */
.kpi-split {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-1);
  gap: 2px;                 /* 2px surface gap between fills */
}
.kpi-split-fill { height: 100%; }
.kpi-split-ic { background: #3987e5; }
.kpi-split-ld { background: #d95926; }
.kpi-split-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
}
.kpi-split-legend > span { display: inline-flex; align-items: center; }
.kpi-sw {
  width: 9px; height: 9px; border-radius: 2px;
  display: inline-block; margin-right: 6px;
}
.kpi-sw-ic { background: #3987e5; }
.kpi-sw-ld { background: #d95926; }

.kpi-dots-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  margin: 16px 0 8px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.kpi-dots {
  display: flex;
  gap: 16px;
}
.kpi-dot { display: inline-flex; align-items: center; gap: 6px; }
.kpi-dot-swatch {
  width: 8px; height: 8px; border-radius: 999px; display: inline-block;
}
.kpi-dot-label { font-size: 11px; color: var(--text-3); }
.kpi-dot-val { font-size: 13px; font-weight: 600; color: var(--text-1); }

/* ---------------------------------------------------------------------------
   Similar Organizations — small-multiple panels, one per selected org, each
   ranking same-level peers by grade-mix cosine. Score bars are within-panel
   magnitude (one sequential hue); the peer name carries identity.
   --------------------------------------------------------------------------- */
.sim-titlebar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.sim-level-picker {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding-top: 2px;
}
.sim-level-dd { flex: 0 0 220px; }

.sim-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.sim-panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px 16px;
}
.sim-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.sim-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sim-sub {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  flex: 0 0 auto;
}
.sim-empty { color: var(--text-3); font-size: 12px; }
.sim-rows { display: flex; flex-direction: column; gap: 9px; }
.sim-row {
  display: grid;
  grid-template-columns: 96px 1fr 30px;
  align-items: center;
  gap: 8px;
}
.sim-peer {
  font-size: 12px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sim-bar-track {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-1);
  overflow: hidden;
}
.sim-bar-fill {
  height: 100%;
  border-radius: 999px;
  /* Teal accent (not blue) — de-blues this section and matches the span-chip /
     "peer" language. A gentle same-hue gradient adds life; it still reads as a
     single sequential direction (light->saturated), so magnitude stays honest. */
  background: linear-gradient(90deg, #16887e 0%, #2bb6c4 100%);
}
.sim-score {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-1);
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Org Depth vs. Size — scatter (shape) + a ranked list of the most
   over-layered orgs (names the actionable outliers the plot can't label,
   since depth is integer-valued and dots pile onto the same y).
   --------------------------------------------------------------------------- */
.depth-split {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 22px;
  align-items: start;
}
.depth-graph { min-width: 0; }
.depth-outliers {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  margin-top: 44px;   /* drop below the chart title band */
}
.depth-out-title {
  font-size: 12px;
  font-weight: 600;
  color: #e0a35a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.depth-out-sub {
  font-size: 11px;
  color: var(--text-3);
  margin: 2px 0 12px;
}
.depth-out-rows { display: flex; flex-direction: column; gap: 2px; }
.depth-out-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name excess" "meta excess";
  align-items: center;
  column-gap: 10px;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.depth-out-row:first-child { border-top: none; }
.depth-out-name {
  grid-area: name;
  font-size: 13px;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.depth-out-meta { grid-area: meta; font-size: 11px; color: var(--text-3); }
.depth-out-excess {
  grid-area: excess;
  font-size: 14px;
  font-weight: 700;
  color: #e0a35a;
}
.depth-out-empty { color: var(--text-3); font-size: 12px; }

/* "Exclude interns" toggle beside the segment filter. */
.intern-toggle {
  display: flex;
  align-items: center;
  margin-left: 8px;
  flex: 0 0 auto;
}
.intern-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
  white-space: nowrap;
}
.intern-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: #2bb6c4;
  cursor: pointer;
}

/* Per-tile note when the toggle dropped interns from the headcount. */
.kpi-intern-note {
  font-size: 11px;
  color: var(--text-3);
  margin: -8px 0 14px;
  font-style: italic;
}

/* Search bar above the Org Depth scatter — find + highlight one org. */
.depth-search {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
}
.depth-search-dd { flex: 0 0 360px; }

/* Thumbnails inside the org-selection dropdown options (and the selected value).
   Small round avatar + name text, mirroring the KPI-tile avatar language. */
.opt-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.opt-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.opt-thumb {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface-1);
  border: 1px solid var(--border);
}
.opt-thumb--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #e8e7dd;
  background: linear-gradient(135deg, #2f6fb0 0%, #199e70 100%);
  border-color: transparent;
}